@charset "UTF-8";

/*layout*/
#wrapper{width:100%; height:auto; max-width:100%; min-width:var(--min-width);position:relative; display:block}

@media all and (max-width:768px){
#wrapper{height:100%;}
}


#header{width:100%;max-width:100%; min-width:var(--min-width);height:var(--w-90); position:relative;z-index:55;/* border-bottom:1px solid var(--gray-d7d)*/}
#header .header{width:var(--min-width); min-width:var(--min-width); max-width:var(--min-width); position:relative; z-index:20; overflow:hidden; background:var(--white) url("../images/layout/heder-line.svg"); background-repeat: repeat-x ; background-position:0 var(--w-90)}

#header .header h1{ flex:0 0 16.875rem; width:18.75rem; height:var(--w-90) ; display: flex; align-items: center; padding-left:var(--w-20) }
#header .header h1 *{ width:100%; max-width:15.25rem}
#header .header .hd-div{ width:100%;height:1px;position:absolute;top:calc(var(--w-90) - 1px);left:0;background:var(--gray-d7d);z-index:10; font-size:0}
#header .header .gnb{ margin:0 var(--w-20); }
#header .header .gnb li{ padding:0 var(--w-25); height:5.625rem; display:flex; justify-content: center; align-items: center; position:relative; transition:all 0.5s ease; position:relative}
#header .header .gnb li a{ font-size:var(--black); font-weight:var(--weight-bold); font-size:var(--font-size-18); white-space: nowrap;}
#header .header .gnb li span{ padding:0 var(--w-30); height:100%; border-bottom:3px solid transparent; display:flex; justify-content: center; align-items: center;transition:all 250ms ease-in-out;}
#header .header .gnb > li.gnb-li:hover span,
#header .header .gnb > li.gnb-li.active span{ color:var(--red-e41); border-color: var(--red-e41d)}
#header .header .gnb > li.gnb-li:hover span a,
#header .header .gnb > li.gnb-li.active span a{ color:inherit }
#header .header-dimd{ position:absolute; top:var(--w-90);left:0;z-index:15; width:100%; height:0; background:var(--white); font-size:0; background-image:url("../images/layout/heder-line.svg");background-repeat: repeat-x; background-position:0 0 }

@media all and (max-width:1200px) {

#header .header h1{ width:12.5rem; height:var(--w-90) ; flex:0 0 12.5rem; padding:var(--w-10)}
#header .header .hd-div{ display:none}
#header .header .gnb{ margin:0 auto}
#header .header .gnb li{ padding:0 var(--w-20); }
#header .header .gnb li span{ padding:0 var(--w-15); }

}

@media all and (max-width:768px){
#header{ height:var(--w-40) !important; }
#header .header{width:80%; height:var(--w-40) !important; padding:0; border-bottom:1px solid var(--gray-d7d); background:none}
#header .header .gnb{ display:none }
#header .header h1 { width:50%; height:var(--w-40); padding-left:var(--w-15); display:flex; justify-content: flex-start; align-items: center; }
#header .header h1 *{ width:auto; height:1.5rem }

}


#header .header .gnb li ul.snb{ width:100%;flex-direction:column; justify-content: center ; align-items: flex-start; position:absolute; top:var(--w-90); left:0; height:27.5rem; padding-top:var(--w-20); margin:1px 0 0 0 ; }
#header .header .gnb li:nth-child(3) ul.snb li:nth-child(2){height:auto; text-align: left; line-height:1.5}
#header .header .gnb li ul.snb li{ margin:0; padding:0 0 0 var(--w-25); border:0; height:var(--w-30); display:flex; justify-content: flex-start;}
#header .header .gnb li:nth-child(3) ul.snb{left:-0.938rem}
#header .header .gnb li:nth-child(4) ul.snb{left:var(--w-25)}
#header .header .gnb li ul.snb li a{ font-size: var(--font-size-16); color:var(--gray-333); font-weight:var(--weight-regular); border-bottom:1px solid transparent }
#header .header .gnb li ul.snb li a:hover{ border-bottom:1px solid var(--gray-333)}

/*#header .header .gnb li:nth-child(1) ul.snb{transform:translate(-10px, 0); }
#header .header .gnb li:nth-child(2) ul.snb{transform:translate(-5px, 0); }
#header .header .gnb li:nth-child(3) ul.snb{transform:translate(-28px, 0); }
#header .header .gnb li:nth-child(4) ul.snb{transform:translate(0px, 0); }*/
/*#header .header .gnb li:hover ul.snb{ display:flex; background:var(--white); border-top:1px solid var(--gray-d7d)}
#header .header .gnb li:hover ul.snb li{ margin:0; padding:0; border:0; height:var(--w-30);}
#header .header .gnb li:hover ul.snb li a{ font-size: var(--font-size-16); color:var(--gray-333); font-weight:var(--weight-regular); border-bottom:1px solid transparent }
#header .header .gnb li:hover ul.snb li a:hover{ border-bottom:1px solid var(--gray-333)}*/

#header .header .tnb{ flex-shrink: 0; height:var(--w-90); display:flex; align-items: center; padding-right:var(--w-20)}
#header .header .tnb li{ margin-left:1rem; }
#header .header .tnb li a{ display:flex; flex-direction:row; justify-content: flex-start ; align-items: center; }
#header .header .tnb li a:hover{ color:var(--red-9810); }
#header .header .tnb .ic{ width:1rem; height:1rem; margin-right:0.313rem; display:flex; background:url("../images/layout/tnb-lang.png") no-repeat 0 0; background-size:1rem 1rem; font-size:0; }
#header .header .tnb .bt-list{ width:var(--w-30); height:var(--w-30); display:flex; background:url("../images/layout/tnb-btn-list.svg") no-repeat 0 0; font-size:0;}
#header .header .tnb .bt-list.active{display:none}
#header .header .tnb .bt-close{ width:var(--w-30); height:var(--w-30); display:none; background:url("../images/layout/tnb-btn-close.svg") no-repeat 0 0; font-size:0; }
#header .header .tnb .bt-close.active{display:flex}
.gnb-wrap{width:100%; height:0; position:absolute; top:calc(var(--w-90) + 1px); left:0; z-index:22; display:flex; justify-content: center; align-items: flex-start; background:var(--white)}
.gnb-wrap .sm-gnb{ min-width:var(--min-width); max-width:var(--min-width); display:none; transition: all 0.5s ease; padding-left:22.5rem;padding-top:var(--w-20)}
.ctl-ul{display:none;}
.ctl-ul.active{display:flex;}
.gnb-wrap .lang-ul{display:none;}
.gnb-wrap .lang-ul.active{display:flex;}


@media all and (max-width:1200px){

  #header .header .tnb{ flex:0 0 12.375rem; width: 12.375rem; padding-right:var(--w-20)}
  #header .header .tnb li {margin-left:var(--w-10)}

  #header .header .gnb li ul.snb li{ padding:0 0 0 var(--w-10); }
  #header .header .gnb li:nth-child(3) ul.snb{left:0}
  #header .header .gnb li:nth-child(3) ul.snb li{ padding:0 0 0 var(--w-0); }
  #header .header .gnb li:last-child ul.snb li{ padding:0 0 0 var(--w-25); }
  #header .header .gnb li ul.snb li a{ font-size: var(--font-size-14);}

}

@media all and (max-width:768px){
  #header .header .tnb{ flex:0 0 40%; width:40%; min-width:40%; height:100%; padding-right:var(--w-15)}
  #header .header .tnb li {margin-left:0}
  #header .header .tnb .bt-list{ background:url("../images/layout/tbn-mbtn-list.svg") no-repeat 0 0; margin-right:0 }
}

@media all and (max-width:375px){

  #header .header .tnb{ flex:0 0 30%; width:30%; min-width:30%; }

}


.gnb-wrap .sm-gnb.active{ display:flex}
.gnb-wrap .sm-gnb li{ height:var(--w-30); text-align: left;}
.gnb-wrap .sm-gnb li{ height:var(--w-30); text-align: left;}
.gnb-wrap .sm-gnb li a{ font-size: var(--font-size-16); color:var(--gray-333); font-weight:var(--weight-regular); border-bottom:1px solid transparent }
.gnb-wrap .sm-gnb li a.pc{ display:inline-flex !important;}
.gnb-wrap .sm-gnb li a:hover{ border-bottom:1px solid var(--gray-333)}

.gnb-wrap .sm-gnb li:nth-child(1){ width:150px;}
.gnb-wrap .sm-gnb li:nth-child(2){ width:155px;}
.gnb-wrap .sm-gnb li:nth-child(3){ width:160px;}
.gnb-wrap .sm-gnb li:nth-child(4){ width:150px;}


@media all and (max-width:1200px){

#header .header .gnb li:hover ul.snb li a{ font-size: var(--font-size-14);}

.gnb-wrap .sm-gnb{ padding-left:18.875rem;}

.gnb-wrap .sm-gnb li a{ font-size:var(--font-size-14)}
.gnb-wrap .sm-gnb li:nth-child(1){ width:130px;}
.gnb-wrap .sm-gnb li:nth-child(2){ width:125px;}
.gnb-wrap .sm-gnb li:nth-child(3){ width:125px;}
.gnb-wrap .sm-gnb li:nth-child(4){ width:125px;}


}

@media all and (max-width:768px){
.gnb-wrap{top:var(--w-40); display:none; flex-direction: column; overflow-y:auto; width:100%; height:32rem}


.ctl-ul{ width:100%; height:var(--w-40);  background:var(--white); position:fixed; top:0; left:0; }
.ctl-ul.active{ z-index:10; display:flex; justify-content: space-between; align-items: center; }
.ctl-ul.active *{ display:flex }
.ctl-ul .ic-home{ width:var(--w-30); height:var(--w-30); font-size:0; background:url("../images/layout/ic-state-home-m.svg") no-repeat center; margin-left:0.813rem; }
.ctl-ul .ic-close{ width:var(--w-30); height:var(--w-30); background:url("../images/layout/tnb-mbtn-close.svg") no-repeat 0 0; font-size:0; margin-right:var(--w-10);}

.lang-ul{ width:calc(100% - 1.25rem); height:1.75rem; justify-content: flex-end;}
.lang-ul li{ margin-left: var(--w-10); }
.lang-ul li a{ font-size:var(--font-size-12); color:var(--gray-555) ;display:flex; justify-content: flex-start; align-items: center;}
.lang-ul li .ic-mem-login{ width:0.75rem; height:0.75rem; background:url("../images/layout/ic-mem-login.svg") no-repeat 0 0; font-size:0; margin-right:0.375rem; display:flex}
.lang-ul li a.active{ color:var(--red-e41); text-decoration:underline}


.gnb-wrap .sm-gnb{ padding-left:0;padding-top:0; flex-direction:column; justify-content: flex-start; align-items: flex-start;}
.gnb-wrap .sm-gnb li a.pc{ display:none !important;}
.gnb-wrap .sm-gnb li{ height:auto; }
.gnb-wrap .sm-gnb li:nth-child(1),
.gnb-wrap .sm-gnb li:nth-child(2),
.gnb-wrap .sm-gnb li:nth-child(3),
.gnb-wrap .sm-gnb li:nth-child(4){ width:100%}
.gnb-wrap .sm-gnb li .snb{ width:calc(100% - 2.25rem); margin:0 auto }
.gnb-wrap .sm-gnb li .snb h4{ font-size:var(--font-size-14); font-weight:var(--weight-bold); color:var(--black)}

.gnb-wrap .sm-gnb li:nth-child(1) .snb li:last-child,
.gnb-wrap .sm-gnb li:nth-child(2) .snb li:last-child,
.gnb-wrap .sm-gnb li:nth-child(3) .snb li:last-child{border-bottom:1px solid var(--gray-eee); padding-bottom:0.5rem;margin-bottom:0.5rem}
.gnb-wrap .sm-gnb li:nth-child(4) .snb li:last-child{padding-bottom:var(--w-40)}


}


#container{width:100%; min-width:var(--min-width); height:100%; display:block}
#container.main-c{ border-top:1px solid var(--gray-d7d)}
#container section h2{ font-size:var(--font-size-30); color:var(--gray-333); font-weight:var(--weight-bold)}

@media all and (max-width:768px){

#container {height:auto}
#container section h2{ font-size:var(--font-size-16); }
}

#footer{width:100%; min-width:var(--min-width); height:23.125rem; background:var(--gray-333)}
#footer section:nth-of-type(1){background:var(--white); border:1px solid var(--gray-dfd); border-width:1px 0; min-width:var(--min-width); height:var(--w-80); display:flex; justify-content: center; align-items: center; position:relative}
#footer section:nth-of-type(1) .cont{ display:flex; justify-content: flex-start; align-items: center; overflow:hidden; width:calc(1280px - 6.5rem); min-width:calc(1280px - 6.5rem); max-width:calc(1280px - 6.5rem)}
#footer section:nth-of-type(1) .cont .swiper-wrapper{ display:flex; justify-content: flex-start; width:calc(100% - 6.5rem); position:relative}
#footer section:nth-of-type(1) .cont .swiper-slide {width:calc(100% / 7); max-width:168px;}
#footer section:nth-of-type(1) .cont .swiper-slide img{width:var(--w-150) !important}
#footer section:nth-of-type(1) .swiper-button-next,
#footer section:nth-of-type(1) .swiper-button-prev{width:52px; background:var(--white) url("../images/layout/ic-bnr-arrow.svg") no-repeat center center; }

#footer section:nth-of-type(1) .swiper-button-prev{left:calc(50% - 640px);}
#footer section:nth-of-type(1) .swiper-button-next{right:calc(50% - 640px); transform:rotate(-180deg)}

#footer section:nth-of-type(1) .cont .bnr{width:100%}



@media all and (max-width:1200px){

#footer section:nth-of-type(1) .cont{ width:calc(100% - 6.5rem); min-width:calc(100% - 6.5rem); max-width:calc(100% - 6.5rem); }
#footer section:nth-of-type(1) .cont .swiper-wrapper{ width:100%;}
#footer section:nth-of-type(1) .cont .swiper-slide {width:calc(100%  / 7); max-width:calc(100%  / 7)}
#footer section:nth-of-type(1) .cont .swiper-slide img{width:90% !important; height:auto}

#footer section:nth-of-type(1) .swiper-button-prev{left:0}
#footer section:nth-of-type(1) .swiper-button-next{right:0}


}

@media all and (max-width:768px){

#footer{height:21.25rem; }
#footer section:nth-of-type(1){ height:var(--w-60); }
#footer section:nth-of-type(1) .cont{ display:flex; justify-content: flex-start; align-items: center; overflow:hidden; width:calc(100% - 4.25rem); min-width:calc(100% - 4.25rem); max-width:calc(100% - 4.25rem); height:100%;}
#footer section:nth-of-type(1) .cont .swiper-wrapper{ width:100%}
#footer section:nth-of-type(1) .cont .swiper-slide {width:calc(100% / 3); max-width:calc(100% / 3); overflow:hidden }
#footer section:nth-of-type(1) .cont .swiper-slide  a{width:100%; height:100%; display:flex; justify-content: center; align-items: center; }
#footer section:nth-of-type(1) .cont .swiper-slide img{width:100% !important; height:80%; max-width:100%; }

#footer section:nth-of-type(1) .swiper-button-next,
#footer section:nth-of-type(1) .swiper-button-prev{width:34px; }


#footer section:nth-of-type(1) .cont .bnr{width:100%}

}



#footer section:nth-of-type(2){background:var(--gray-f3f); border-bottom:1px solid var(--gray-dfd); min-width:var(--min-width); height:var(--w-70); display:flex; justify-content: center ; align-items: center;}
#footer section:nth-of-type(2) .cont{justify-content: space-between; align-items: center;}
#footer section:nth-of-type(2) h2{width:11.938rem; height:var(--w-50); padding-left:var(--w-20); display:flex}
#footer section:nth-of-type(2) h2 img{width:7.5rem}
#footer section:nth-of-type(2) .ft-menu{ width:calc(100% - 11.938rem); }
#footer section:nth-of-type(2) .ft-menu *{color:var(--gray-333)}
#footer section:nth-of-type(2) .ft-menu ul{margin-right:1.688rem;}
#footer section:nth-of-type(2) .ft-menu ul li{margin-left:1.5rem}
#footer section:nth-of-type(2) a:hover{ color:var(--red-9810) }
#footer .footer{margin:1.625rem auto 0 auto; width:var(--min-width); max-width:var(--min-width);  height:calc(13.75rem - 1.625rem); display:flex; justify-content: space-between; align-items: flex-start;}
#footer .footer *{color:var(--gray-777); font-size:var(--font-size-14)}
#footer .ft{font-size:var(--font-size-14); text-align: left; margin-left:11.938rem; }
#footer .ft .pc{ display:inline-block !important}
#footer .count{ text-align: right; margin-right:1.688rem}
#footer .count *{font-size:var(--font-size-12); font-weight:var(--weight-regular);vertical-align: top;}
#footer .count strong{margin-right:0.75rem}
#footer .count span{font-weight:var(--weight-bold)}
#footer .count strong:nth-of-type(2){margin-left:1rem}

@media all and (max-width:768px){

#footer section:nth-of-type(2){background:transparent; height:var(--w-100); display:flex; justify-content: flex-start ; align-items: flex-start; border-bottom:0;}
#footer section:nth-of-type(2) *{color:var(--gray-ccc)}
#footer section:nth-of-type(2) .cont{justify-content: flex-start; align-items: center; flex-wrap: wrap;}
#footer section:nth-of-type(2) h2{width:100%; height:var(--w-40); padding-left:var(--w-15); padding-right:var(--w-15); display:flex; justify-content: space-between; align-items: center; margin-top:var(--w-10)}
#footer section:nth-of-type(2) h2 img{width:6.5rem; height:var(--w-20)}
#footer section:nth-of-type(2) h2 a{ font-size:var(--font-size-14); font-weight:var(--weight-medium);}
#footer section:nth-of-type(2) a:hover,
#footer section:nth-of-type(2) a:active,
#footer section:nth-of-type(2) a:visited{ color:var(--gray-ccc) !important }
#footer section:nth-of-type(2) .ft-menu{ width:100%; height:var(--w-50);}
#footer section:nth-of-type(2) .ft-menu ul{margin-right:0}
#footer section:nth-of-type(2) .ft-menu ul *{color:var(--gray-ccc); font-size:var(--font-size-12)}
#footer section:nth-of-type(2) .ft-menu ul li{margin-left:var(--w-20) }
#footer section:nth-of-type(2) .ft-menu ul li:first-child{margin-left:var(--w-15) }

#footer .footer{margin:0.563rem auto 0 auto; height:calc(21.25rem - 10.563rem); display:flex;flex-direction:column; justify-content: flex-start; align-items: flex-start; position:relative; }
#footer .footer *{font-size:var(--font-size-12)}
#footer .footer .posi{position:absolute; bottom:var(--w-15); left:var(--w-15);}
#footer .ft{ font-size:var(--font-size-12); text-align: left; margin-left:var(--w-15); line-height:1.5 }
#footer .ft .pc{ display:none !important}
#footer .count{ text-align: left; margin-right:1.688rem; margin-left:var(--w-15); margin-top:var(--w-10); line-height:1rem}



}

@media all and (max-width:320px){
  #footer section:nth-of-type(2) .ft-menu{ width:100%; height:var(--w-50); }
  #footer section:nth-of-type(2) .ft-menu ul{margin-right:0 ;flex-wrap: wrap; justify-content: flex-start !important;}
  #footer section:nth-of-type(2) .ft-menu ul li:last-child{margin-left:var(--w-15)}


  
}

.cont{width:var(--min-width); max-width:var(--min-width); min-width:var(--min-width); margin:0 auto; display:flex; justify-content: flex-start; align-items: flex-start;}