@charset "euc-kr";
@charset "utf-8";
.gnb02{display:none;}
.gnb-btn{display:none;}
.mt10 {margin-top:10px;}
.letter {letter-spacing: -1px;}

/* layerPopup */
.layerPopWrap { visibility:hidden; display:flex; display:-ms-flex; align-items:center; position:fixed; top:0; left:0; width:100%; height:100%; z-index:100; opacity:0; transition:all .2s ease}
.layerPopWrap .bg {position:fixed; top:0; right:0; width:100%; height:100%; background:rgba(0,0,0,0.8);}
.layerPopWrap .layerPopCont { display:flex; display:-ms-flex; flex-direction:column; position:relative; width:700px; max-height:90%; border-radius:8px; margin:0 auto; opacity:0;}
.layerPopWrap .layerPopCont .popTitle { height:62px; padding-left:30px; border-radius:8px 8px 0 0; font-size:20px; color:#333333; font-weight:bold; line-height:62px; background:#f1f3f4;}
.layerPopWrap .layerPopCont .contBox { overflow:hidden; height:450px;}
.layerPopWrap .layerPopCont .contBox iframe { width:100%; height:100%;}
.layerPopWrap .layerPopCont > .btnPopClose { position:absolute; top:-50px; right:0; width:50px; height:50px; font-size:0; background:url('../img/btn_pop_close.png') no-repeat center center;}

.layerPopWrap.on { visibility:visible; opacity:1;}
.layerPopWrap.on .layerPopCont{ animation:fadeInUp .4s ease-in-out forwards;}
@-webkit-keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 20%, 0);
transform: translate3d(0, 20%, 0);
}

to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}

@keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 20%, 0);
transform: translate3d(0, 20%, 0);
}

to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}

.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}


.mainVisual { position:relative; height:820px;}
.mainVisual .visualBox { overflow:hidden; display:none; position:absolute; top:0; left:0; width:100%; height:820px; background-position:center center; text-align:center;}
.mainVisual .visualBox:first-child {display:block;}
.mainVisual .visualBox .visual { position:absolute; top:0; left:50%; width:1920px; height:820px; margin-left:-960px; animation:scaleM 5s linear infinite alternate;}
.mainVisual .visualBox .textBox { position:relative;}
.mainVisual .visualBox .title {width:760px; margin:185px auto 0; font-size:54px; font-weight:bold; font-family: 'Gmarket Sans'; color:#fff; text-align:left;}
.mainVisual .visualBox .title.tc { text-align:center;} /* 20-02-12 */
.mainVisual .visualBox .text { width:760px; margin:20px auto 0; font-size:18px; color:#fff; text-align:left;}
.mainVisual .visualBox .img { margin:100px 0 65px; }
.mainVisual .visualBox .img + .btn { margin-top:0;}
.mainVisual .visualBox .btn { display:block; position:relative; width:200px; height:54px; margin:100px auto 0; border:2px solid rgba(255,255,255,0.3); padding-left:27px; line-height:50px; font-size:12px; color:#ffffff; text-transform:uppercase; font-weight:bold; text-align:left; box-sizing:border-box; transition:all .3s ease;}
.mainVisual .visualBox .btn:after { content:''; display:block; position:absolute; top:50%; right:28px; width:6px; height:9px; margin-top:-4.5px; background:url('../img/btn_visual_arrow.png') no-repeat;}
.mainVisual .visualBox .btn:hover { border-color:#111; color:#fff; background:#111;}
.mainVisual .icon { position:absolute; bottom:120px; left:50%; font-size:0; text-align:center; transform:translateX(-50%);}
.mainVisual .icon a { display:inline-block; width:70px; height:12px; margin:0 8px; font-size:0; background:rgba(255,255,255,0.5);}
.mainVisual .icon a.on { background:#fff;}

@keyframes scaleM{
0% {transform:scale(1) rotate(0)}
100% {transform:scale(1.05) rotate(0.001deg)}
}

.innerBox { width:1200px; margin:0 auto;}

.mainSec02 { overflow:hidden; position:relative; padding-bottom:180px; text-align:center; background:url('../img/bg_sec02.jpg') no-repeat center 0; background-size:auto 350px;}
.mainSec02 .mySwiper{display:none;}
.mainSec02 h2 { padding-top:80px; font-size:40px; color:#ffffff; font-family: 'Spoqa Han Sans'; font-weight:300;}
.mainSec02 .text { margin-top:30px; font-size:18px; color:rgba(255,255,255,0.5); font-family: 'Spoqa Han Sans';}
/*  20-02-12 占쏙옙占쏙옙
.mainSec02 .slideWrap  { position:relative; width:1033px; height:460px; margin:65px auto 0;}
.mainSec02 .slideWrap .slide { float:left; position:relative; width:580px; height:320px; margin:70px 136.5px 0; transition:all .3s ease; background-size:cover; background-repeat:no-repeat; box-sizing:border-box;}
.mainSec02 .slideWrap .slide.slick-active { height:460px; padding:0; margin-top:0;}

.mainSec02 .number { position:absolute; top:50px; left:50px; font-size:14px; color:#ffffff; font-family: 'Spoqa Han Sans'; font-weight:bold; transition:all .3s ease;}
.mainSec02 .title { position:absolute; top:50%; left:50%; font-size:24px; color:#ffffff; font-family: 'Spoqa Han Sans'; font-weight:bold; transform:translate(-50%, -50%); transition:all .3s ease;font-family: 'Spoqa Han Sans'; font-weight:100;}
.mainSec02 .more { position:absolute; top:250px; left:510px; width:20px; height:20px; font-size:0; transition:all .3s ease; transition:all .3s ease;}
.mainSec02 .more:after { content:''; display:block; position:absolute; top:8px; left:0; width:20px; height:4px; background:#e7e7e7;}
.mainSec02 .more:before { content:''; display:block; position:absolute; top:0px; left:8px; width:4px; height:20px; background:#e7e7e7;}
.mainSec02 .more:hover { transform:rotate(360deg);}

.mainSec02 .slick-active .number {top:120px; left:190px; font-size:20px;}
.mainSec02 .slick-active .title { font-size:36px; font-family: 'Spoqa Han Sans'; font-weight:100;}
.mainSec02 .slick-active .more { top:320px; left:650px;}

.mainSec02 .slick-arrow { position:absolute; top:50%; width:25px; height:41px; font-size:0; border:0; padding:0; background:url('../img/btn_sec02_arrow.png') no-repeat; transition:all .3s ease;}
.mainSec02 .slick-arrow:hover { background-image:url('../img/btn_sec02_arrow_on.png')}
.mainSec02 .slick-prev { left:0; transform:rotate(180deg);}
.mainSec02 .slick-next { right:0;}

.mainSec02 .slick-dots { position:absolute; bottom:-75px; left:50%; transform:translateX(-50%);}
.mainSec02 .slick-dots li { display:inline-block; margin:0 5px; font-size:0;}
.mainSec02 .slick-dots .slick-active button { background:#2d47cd;}
.mainSec02 .slick-dots button { display:block; width:50px; height:8px; border:0; font-size:0; background:#e7e7e7;}
*/

/* 20-02-12 占쌩곤옙 */
.mainSec02 .slideWrap { position:relative;}
.mainSec02 .sliderBox { width:890px; height:420px; margin:65px auto 0;}
.mainSec02 .sliderBox > div { width:5000px;}
.mainSec02 .sliderBox .slide { float:left; position:relative; width:580px; height:320px; margin:50px 155px 0; transition:all .3s ease;}
.mainSec02 .number { position:absolute; top:50px; left:calc(50% - 18px);; font-size:14px; color:#ffffff; font-family: 'Spoqa Han Sans'; font-weight:bold; transition:all .3s ease;}
.mainSec02 .title { position:absolute; top:50%; left:50%; font-size:24px; color:#ffffff; font-family: 'Spoqa Han Sans'; font-weight:bold; transform:translate(-50%, -50%); transition:all .3s ease;font-family: 'Spoqa Han Sans'; font-weight:100;}
.mainSec02 .more { position:absolute; top:250px; left:510px; width:20px; height:20px; font-size:0; transition:all .3s ease; transition:all .3s ease;}
.mainSec02 .more:after { content:''; display:block; position:absolute; top:8px; left:0; width:20px; height:4px; background:#e7e7e7;}
.mainSec02 .more:before { content:''; display:block; position:absolute; top:0px; left:8px; width:4px; height:20px; background:#e7e7e7;}
.mainSec02 .more:hover { transform:rotate(360deg);}

.mainSec02 .sliderBox .slide.on { width:760px; height:420px; margin:0 65px 0;}
.mainSec02 .sliderBox .slide.on .number {top:120px; left:calc(50% - 18px);; font-size:20px;}
.mainSec02 .sliderBox .slide.on .title { font-size:36px; font-family: 'Spoqa Han Sans'; font-weight:100;}
.mainSec02 .sliderBox .slide.on .more { top:320px; left:650px;}

.mainSec02 .slideArrow > a { position:absolute; top:50%; width:25px; height:41px; font-size:0; border:0; padding:0; background:url('../img/btn_sec02_arrow.png') no-repeat; transition:all .3s ease;}
.mainSec02 .slideArrow > a:hover { background-image:url('../img/btn_sec02_arrow_on.png')}
.mainSec02 .btnLeft { left:80px; transform:rotate(180deg);}
.mainSec02 .btnRight { right:80px;}

.mainSec02 .slideDots { position:absolute; bottom:-75px; left:50%; transform:translateX(-50%);}
.mainSec02 .slideDots a { display:inline-block; width:50px; height:8px; border:0; margin:0 5px; font-size:0; background:#e7e7e7;}
.mainSec02 .slideDots a.on { background:#2d47cd;}

/* //20-02-12 占쌩곤옙 */

.mainSec03 { padding-bottom:100px; text-align:center; background:#f7f7f7;}
.mainSec03 h2 { padding-top:70px; font-size:40px; color:#111111; font-family: 'Spoqa Han Sans';}
.mainSec03 .title { margin-top:40px; font-size:36px; color:#111111; font-family: 'Spoqa Han Sans'; font-weight:300;}
.mainSec03 .title2 { margin-top:30px; font-size:20px; line-height:1.4; color:#111111; font-family: 'Spoqa Han Sans'; font-weight:300;}
.mainSec03 .btn {display:inline-block;padding: 10px 30px;margin:35px auto 0;border:1px solid #e7e7e7;border-radius:20px;line-height: 20px;}
.mainSec03 .btn:after { content:''; display:inline-block; width:5px; height:9px; margin-left:13px; background:url('../img/icon_btn_sec03.png') no-repeat;}
.mainSec03 .listBox { overflow:hidden; margin:60px 0 0;}
.mainSec03 .listBox > div { float:left; position:relative; width:580px; height:300px; padding:50px; box-sizing:border-box; text-align:left; background:#fff url('../img/icon_sec03_1.png') no-repeat 105% 105%; transition:all .3s ease; background-size:150px}
.mainSec03 .listBox > div + div { margin-left:40px; background:#fff url('../img/icon_sec03_2.png') no-repeat 105% 105%; background-size:150px}
.mainSec03 .listBox > div:hover,
.mainSec03 .listBox > div + div:hover { background-position:100% 100%; background-size:170px;}
.mainSec03 .listBox h3 { font-size:24px; color:#111111; font-family: 'Spoqa Han Sans';}
.mainSec03 .listBox .text { margin-top:30px; font-size:14px; color:rgba(17,17,17,0.7); font-family: 'Spoqa Han Sans'; line-height:1.4;}
.mainSec03 .listBox .text2 { margin-top:20px; font-size:16px; color:#111; font-family: 'Spoqa Han Sans'; line-height:1.4; font-weight:500;}
.mainSec03 .listBox ul { width:280px; margin-top:20px;}
.mainSec03 .listBox ul li { float:left; width:140px; margin-bottom:5px; font-size:14px; color:rgba(17,17,17,0.7); font-family: 'Spoqa Han Sans'; line-height:1.4;}
.mainSec03 .listBox .btn2 { position:absolute; left:50px; bottom:50px; width:32px; height:32px; font-size:0; background:url('../img/btn_sec03.png') no-repeat; transition:all .3s ease;}
.mainSec03 .listBox .btn2:hover { transform:scale(1.1)}

/* service */
.service {position:relative;}
.service ~ #footer { margin-top:0;}
.service .s_slide {position:relative;}
.service .s_slide img { height:530px;}
.service .s_slide .left_txt {position:absolute; width:1200px; left:50%; margin-left:-600px; top:80px;}
.service .s_slide .txt01 {font-size:30px; font-weight:300; color:#fff; line-height:50px;}
.service .s_slide .line {display:inline-block; width:20px; height:1px; background:#fff; margin:33px 0;}
.service .s_slide .txt02 {font-size:14px; color:#fff; font-weight:100; letter-spacing:1px; line-height:24px;}
.service .s_slide .link {width:150px; height:40px; border:2px solid #fff; margin-top:60px;}
.service .s_slide .link a {line-height:40px; text-align:center; color:#fff; font-size:13px; display:block;}
.service .s_slide .bx-wrapper .bx-controls-direction {position:absolute; bottom:80px; left:50%; margin-left:-565px; z-index:5;}
.service .s_slide .bx-wrapper .bx-controls-direction a {position:absolute; width:32px; height:32px; background-size:cover; text-indent:-9999px;}
.service .s_slide .bx-wrapper .bx-prev {right:2px; background: url("../img/s_left_btn.png") no-repeat;}
.service .s_slide .bx-wrapper .bx-prev:hover {background: url("../img/s_left_btn_on.png") no-repeat;}
.service .s_slide .bx-wrapper .bx-next {left:0; background: url("../img/s_right_btn.png") no-repeat;}
.service .s_slide .bx-wrapper .bx-next:hover {background: url("../img/s_right_btn_on.png") no-repeat;}
.bx-pager_wrap {position:absolute; width:300px; left:50%; bottom:0; margin-left:300px; top:0; overflow:hidden; background:#fff;}
#bx-pager {}
#bx-pager .tit {font-size:20px; color:#242424; margin:100px 0 40px 50px;font-family: 'Spoqa Han Sans'; font-weight:bold;}
#bx-pager ul li {border-bottom:1px solid #ececec; position:relative;}
#bx-pager ul li a {line-height:50px; padding-left:50px; font-size:14px; color:#999; background:#fff; display:block;}
#bx-pager ul li a.active {color:#294eb6; font-weight:bold;}


@media (max-width:720px){
    body.scroll_out02{overflow:hidden;height:100%}
    .wrap{min-width: 100%;}
    .mainVisual{height:540px;}
    .mainVisual .visualBox{height:540px;}
    .mainVisual .visualBox .textBox{padding: 0 20px;height:350px;}
    .mainVisual .visualBox .btn{position: absolute;bottom: 0;left: calc(50% - 100px);}
    .mainVisual .visualBox .visual{width: 100%;}
    .mainVisual .visualBox .title{width:100%;font-size: 30px;margin-top: 80px;}
    .mainVisual .visualBox .img{margin:30px 0;}
    .mainVisual .visualBox .text{width:100%;}
    .mainVisual .icon{width:90%;bottom:60px;}
    .mainVisual .icon a{width:17%;}
    .innerBox{width:100%;}

    .mainSec02{padding-bottom:0;}
    .mainSec02 .text{padding:0 20px;}
    .mainSec02 .slideWrap{display:none;}
    .mainSec02 .mySwiper{margin-top:60px;display:block;}
    .mainSec02 .mySwiper .swiper-slide{position:relative;}
    .mainSec02 .mySwiper .swiper-slide .number{position:absolute;top:50px;left:49%;font-size:24px;}
    .mainSec02 .mySwiper .swiper-slide .title{position:absolute;top:200px;left:51%;font-size:32px;}
    .mainSec02 .mySwiper .swiper-slide .more{display:none;}
    .mySwiper .swiper-button{position:relative;}
    .mySwiper .swiper-button .swiper-button-prev{top: -220px;width: 25px;height: 41px;background: url(../img/btn_sec02_arrow.png) no-repeat;    transform: rotate(180deg);}
    .mySwiper .swiper-button .swiper-button-prev:after{display:none;}
    .mySwiper .swiper-button .swiper-pagination{  }
    .mySwiper .swiper-button .swiper-pagination span{box-sizing: border-box;border-radius: 0;opacity: 1;display: inline-block;width: 3rem;height: 12px;margin: 0 8px;font-size: 0;background: rgba(255, 255, 255, 0.5);margin-bottom: 50px;  }
    .mySwiper .swiper-button .swiper-pagination span.swiper-pagination-bullet-active{background-color:#fff;}
    .mySwiper .swiper-button .swiper-button-next{top: -220px;width: 25px;height: 41px;background: url(../img/btn_sec02_arrow.png) no-repeat;}
    .mySwiper .swiper-button .swiper-button-next:after{display:none;}


    .mainSec03{padding:0 20px;}
    .mainSec03 .listBox > div{float:none;width:100%;padding:20px;}
    .mainSec03 .listBox > div + div{margin: 20px 0 60px;}
    .mainSec03 .btn{height:auto;}
    .mainSec03 .listBox .btn2{left: 20px;}
    .bx-pager_wrap{display:none;}
    .service .s_slide .left_txt{width: 100%;margin-left: 0;left: 0;padding: 0 20px;box-sizing: border-box;}
    .service .s_slide .bx-wrapper .bx-controls-direction{bottom: 70px;margin-left: 0;}

    .gnb_wrap .gnb{width:100%;margin-left: 0;left: 0;display:flex;justify-content: center;align-items: center;height: 80px;}
    .gnb-btn{}
    .gnb-btn{position: relative; display: block;border:0;width: 40px;height: 40px;cursor: pointer;background-color: #fff;position: absolute;top: 17px;left: 3%;}
    .gnb-btn i{ position: absolute; top: 37%; left:0; margin-left:0; width: 36px; height:2px; background-color: #000; display: block; transition:all 0.2s ease-in-out;}
    .gnb-btn i:nth-child(2){ margin-top: 10px;}
    .gnb-btn.open i{left:30%;top:45%;}
    .gnb-btn.open i:nth-child(1){ margin: 0 0 0 -.8rem; transform: rotate(45deg);}
    .gnb-btn.open i:nth-child(2){ margin: 0 0 0 -.8rem; transform: rotate(-45deg);}
    .gnb-btn span{ display:block; overflow:hidden; font-size:1px; line-height:0; color:transparent;}
    .org .gnb_wrap .gnb .logo{width:auto;float:none;}
    .org .gnb_wrap .gnb .logo a{margin:0}
    .gnb .lang{right:10px;}
    .gnb > ul{display:none;}
    #footer .footerBox{width:100%;padding:20px;;box-sizing: border-box;}

    #header{position:relative;}
    .gnb02{background-color:#fff;position: absolute;width:100%;transition: all 0.4s ease-in-out;top:-105vh}
    .gnb02.open{top: 5rem;height: 95%;overflow-y: scroll;position: fixed;display:flex;        flex-direction: column;}
    .gnb02 > li{}
    .gnb02 > li > a{display:flex;height:50px;border-bottom:1px solid #000;padding-left:20px;background:url(../img/down_arrow.jpg)no-repeat 95% 50%;font-size:16px;align-items: center;}
    .gnb02 > li.submenu-open > a{background:url(../img/up_arrow.jpg)no-repeat 95% 50%;}
    .gnb02 > li > a img{}
    .gnb02 > li > ul{display:none;}
    .gnb02 > li > ul > li{}
    .gnb02 > li > ul > li > a{display:flex;height:50px;padding-left:40px;font-size:14px;align-items: center;}
    .gnb02 > li > ul > li > ul{}
    .gnb02 > li > ul > li > ul li a{padding-left: 50px;padding-bottom: 5px;display: flex;}








}
