@charset "utf-8";

/* layout */
.inner {	width: 100%; max-width:1600px;	position:relative;	margin-left:auto;	margin-right:auto; }
.s-inner {	width:92%; max-width:1600px;	position:relative;	margin-left:auto;	margin-right:auto; }

#wrap { font-size: 1.6rem; }

/* 타블렛 가로 */
@media all and (max-width:1480px) {

}

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

}

@media all and (max-width:976px) {
  html { font-size: 60% !important; }
}

@media all and (max-width:767px) {
  html { font-size: 0.55rem !important; }
}

@media all and (max-width:480px) {
  html { font-size: 0.5rem !important; }
}




/*Header*/
#header { position:fixed; width:100%; height:100px; z-index:150; }
#header::after { content:''; width: 100%; height: 1px; background: rgba(255,255,255,0.1); position: absolute; left:0; top: 100px; }

#header #logo { position:absolute; top:30px; left: 2%; z-index:89; font-size:0; }
#header #logo a{display: block; width: 164px; height: 37px; background: url(/images/common/logo_new_w.png)no-repeat center center/100% auto;}
.fp-viewing-4Page #header #logo a{background: url(/images/common/logo_new.png)no-repeat center center/100% auto;}
.fp-viewing-6Page #header #logo a{background: url(/images/common/logo_new.png)no-repeat center center/100% auto;}
#header.scroll #logo a{background: url(/images/common/logo_new.png)no-repeat center center/100% auto;}
#header.on #logo a{background: url(/images/common/logo_new_w.png)no-repeat center center/100% auto;}
 
/* #header #logo img { vertical-align:middle;  } */

#header .hd_bx { line-height:100px;  }

#header #hd_ico { position: absolute; top: 0; right:120px; font-size:0;  }
#header #hd_ico a { position: relative; display: inline-block; vertical-align: middle; line-height: 1em; width: 60px; height: 60px; text-align: center;
                                border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 100%; margin-right: 2px;  }
#header #hd_ico a:hover { background: #0060ff;  }
#header #hd_ico a .in { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#header #hd_ico a p { font-size: 1.1rem; color:#fff; margin-top: 5px; letter-spacing: 0.01em; line-height: 1.0em;}

#gnb_pc { position:relative; overflow:hidden; width:100%; box-sizing:border-box; color:#fff; text-align:center;  }
#gnb_pc .gnb_dp1 { display:inline-block; vertical-align:top; text-align:center; }
#gnb_pc .gnb_dp1>div {padding:0 45px; height:100px; font-size:1.8rem; box-sizing:border-box; cursor:pointer;}
#gnb_pc .gnb_dp1>div>a { display:inline-block; position:relative; color:#fff; font-weight: 500; }
#gnb_pc .gnb_dp1 .smenu::after { display:block; content:''; width:100%; height:400px; position:absolute; left:0; top:0px; background:#ff0000; transition:all .3s; transform:scaleY(0); z-index:1; }
#gnb_pc .gnb_dp1 .smenu { display:none; padding:20px 0; color:#fff; font-size: 1.5rem;  position: relative;  }
#gnb_pc .gnb_dp1 .smenu li { line-height: 1.3em; margin: 1em 0; z-index:10; position: relative; }
#gnb_pc .gnb_dp1 .smenu li a { color:#fff; }
#gnb_pc .gnb_dp1 .smenu li:hover a { font-weight:600; }

#gnb_pc li.gnb_dp1:hover > div > a { color:#ff0000 !important; font-weight:700; }
#gnb_pc li.gnb_dp1:hover .smenu:after{ transform:scaleY(1);}

.menuToggle { right: 0; top: 0;  width:100px; height:100px; border-left: 1px solid rgba(255,255,255,0.1);  position:absolute; cursor:pointer; z-index:9999; box-sizing: border-box; }
.menuToggle span {display:block; width:26px; height:2px; background:#fff; position:absolute; left:50%; margin-left: -13px; transition:all 0.5s}
.menuToggle span.t {top:38px;}
.menuToggle span.m {top:50%; margin-top:-1px;}
.menuToggle span.b {bottom:38px;}



#header.scroll #gnb_pc { background:#fff;  }
#header.scroll #gnb_pc > ul > li > div a { color:#212121; }
#header.scroll #hd_ico a { background: #212121;  }

#header.menu_on #gnb_pc { background:rgba(0, 0, 0, 0.85);  }
#header.menu_on #gnb_pc > ul > li > div a { color:#fff; }
#header.menu_on #hd_ico a { background: none;  }


#header.scroll { height: 80px;  }
#header.scroll { height: 100px;  }
#header.scroll::after { top: 80px; }
#header.scroll::after { top: 100px; }
#header.scroll .hd_bx { line-height: 100px; }
/*#header.scroll #logo img { height: 28px; }*/

/*#header.scroll #gnb_pc .gnb_dp1>div { height:80px; }*/

/*#header.scroll .menuToggle { width: 80px; height: 80px; border-left-color:#e9e9e9; }*/
#header.scroll::before { content:''; width: 100%; height: 80px; background: #fff; position: absolute; top:0; left:0;  }
#header.scroll .menuToggle { width: 80px; height: 80px; border-left-color:#e9e9e9; }
#header.scroll .menuToggle { width: 100px; height: 100px; border-left-color:#e9e9e9; }
#header.scroll .menuToggle span { background: #212121; }
#header.scroll .menuToggle span.t {top:38px;}
#header.scroll .menuToggle span.b {bottom:38px;}


#gnb_mo { position:fixed; height:100%; z-index:99; right:0;  top:0; padding:120px 30px 2%; background:rgba(0, 0, 0, 0.95);
                color:#FFF; width:100%; max-width:500px; box-sizing:border-box; transition: all 0.4s ease;
            	-webkit-transform: translateX(100%) rotate(0); -moz-transform: translateX(100%) rotate(0); -ms-transform: translateX(100%) rotate(0); -o-transform: translateX(100%) rotate(0);
               transform: translateX(100%) rotate(0);
}

#gnb_mo.m_menuOn{	-webkit-transform: translateX(0) rotate(0); -moz-transform: translateX(0) rotate(0);	-ms-transform: translateX(0) rotate(0);	-o-transform: translateX(0) rotate(0);	transform: translateX(0) rotate(0); }

#gnb_mo > ul > li > div.active:before {transform:rotate(90deg)}

.menuToggle.m_on {}
.menuToggle.m_on span.t {transform:translateY(11px) rotate(45deg)}
.menuToggle.m_on span.m {width:0;}
.menuToggle.m_on span.b {transform:translateY(-11px) rotate(-45deg)}




#gnb_mo .gnb_dp1 div { font-weight:500;  padding:1.5em 0; cursor:pointer; border-bottom:1px dotted rgba(255, 255, 255, 0.5);}
#gnb_mo .gnb_dp1 > div > a { color:#fff; }

#gnb_mo .smenu {display:none; padding:10px 0;}
#gnb_mo .smenu>li br{display:none;}
#gnb_mo .smenu>li>a,
#gnb_mo .smenu>li>span {display:block; padding:4px 10px; color:#fff;}
#gnb_mo .smenu>li>a:hover,
#gnb_mo .smenu>li>span:hover{background:rgba(0,0,0,0.2); color:#FFF; font-weight:500;}

#gnb_mo .mem { margin-top: 3em; overflow: hidden; width: 100%; text-align: center; }
#gnb_mo .mem li { float: left; width: calc((100% - 6px) / 2); margin-left: 6px; margin-top:6px;  background: #fff; }
#gnb_mo .mem li:nth-child(odd) { margin-left:0; }
#gnb_mo .mem li a { color:#212121; font-size: 1.4rem; display: block; line-height: 3.5em; font-weight: 700; }
#gnb_mo .mem li a:hover { background: #0060ff; color:#fff; }

#fullpage::before { content:''; width: 1px; height: 100%; position: absolute; top:100px; right: 100px; margin-right: -0.5px; background: rgba(255,255,255,0.1); z-index:10;  }


.fp-viewing-3rdPage #gnb_pc > ul > li > div a,
.fp-viewing-5Page #gnb_pc > ul > li > div a { color:#212121; }

.fp-viewing-3rdPage .menuToggle span,
.fp-viewing-5Page .menuToggle span { background: #212121; }
.fp-viewing-3rdPage #header #hd_ico a,
.fp-viewing-5Page #header #hd_ico a { background: #212121;  }

@media all and (max-width:1280px) {
  #header #gnb_pc {display:none; }
  #header { height:80px; }
  #header::after { top: 80px; }
  #header .hd_bx { line-height:80px;  }

  #header #hd_ico { right: 90px; }

  .menuToggle { width: 80px; height: 80px; }
  .menuToggle span.t {top:28px;}
  .menuToggle span.b {bottom:28px; }

  #fullpage::before { top: 80px; right: 80px; }
  #fp-nav.fp-right { right: 65.4px !important; }

  #header .hd_bx { line-height:60px;  } { height: 80px;  }

  #header.scroll::before { height: 80px; }
}


@media all and (max-width:976px) {
  #header { height:70px; }
  #header::after { top: 70px; }
  #header .hd_bx { line-height:70px;  }


  #header #logo img { height: 25px; }

  #header #hd_ico { right: 80px; }
  #header #hd_ico a { width: 50px; height: 50px; }
  #header #hd_ico a p { margin-top: 3px; }

  .menuToggle { width: 70px; height: 70px; }
  .menuToggle span.t {top:24px;}
  .menuToggle span.b {bottom:24px; }
  .menuToggle.m_on span.t {transform:translateY(10px) rotate(45deg)}
  .menuToggle.m_on span.b {transform:translateY(-10px) rotate(-45deg)}

  #header.scroll { height: 70px;  }
  #header.scroll .hd_bx { line-height:70px;  }
  #header.scroll .menuToggle { width: 70px; height: 70px; }
  #header.scroll .menuToggle span.t {top:24px;}
  #header.scroll .menuToggle span.b {bottom:24px;}

  #header.scroll::before { height: 70px; }

  #fullpage::before { top: 70px; right: 70px; }
  #fp-nav.fp-right { right: 55.4px !important; }

  #fullpage::before { display: none; }
}

@media all and (max-width:568px) {
  #header { height:60px; }
  #header::after { top: 60px; }
  #header .hd_bx { line-height:60px;  }

  #header #logo img { height: 20px; }

  #header #hd_ico { right: 70px; }
  #header #hd_ico a { width: 45px; height: 45px; }

  .menuToggle { width: 60px; height: 60px; }
  .menuToggle span.t {top:20px;}
  .menuToggle span.b {bottom:20px; }
  .menuToggle.m_on span.t {transform:translateY(9px) rotate(45deg)}
  .menuToggle.m_on span.b {transform:translateY(-9px) rotate(-45deg)}

  #header.scroll { height: 60px;  }
  #header.scroll .hd_bx { line-height:60px;  }
  #header.scroll .menuToggle { width: 60px; height: 60px; }
  #header.scroll .menuToggle span.t {top:20px;}
  #header.scroll .menuToggle span.b {bottom:20px;}

  #header.scroll::before { height: 60px; }
}



#footer { position: relative; width: 100%; background: #0f0f12; padding: 4% 0; overflow: hidden; z-index: 15;  }
#footer h1 { float: left; margin-right: 5%; margin-bottom: 2%; }
#footer .f-cont { float: left; font-size: 1.4rem;  }
#footer .f-cont .f-link li { display: inline-block; margin-right: 12px; }
#footer .f-cont .f-link li a { color:#fff; }
#footer .f-cont .f-info { margin: 1em 0 2em; }
#footer .f-cont .f-info p { display: inline-block; margin-right: 7px; opacity: 0.4; line-height: 1.7em; color: #fff;}
#footer .f-cont .f-info p a{color: #fff;}
#footer .f-cont .copy { font-size: 1.2rem; opacity: 0.2; text-transform: uppercase; }


@media all and (max-width:767px) {
  #footer { padding: 5% 0; }
  #footer h1 img { height: 24px; }
  #footer .f-cont .f-info p br { display: none; }
}

@media all and (max-width:568px) {
  #footer { padding: 7% 0; }
}

@media all and (max-width:480px) {
  #footer h1 img { height: 20px; }
}