@charset "utf-8";

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

#wrap {position: relative;  overflow-x: hidden; }

/* 타블렛 가로 */
@media all and (max-width:1399px) {
  .inner {  width: 96%; }
}

@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:absolute; width:100%; height:160px; box-sizing:border-box;  z-index:5;      border:0px solid red;         }
#header .hd_bx {  }
#header .hd_mbx { display: none; }

#header #logo {position:relative;  width:1200px; margin:0 auto; height:90px; }
#header #logo a { display: block; }
#header #logo img { display: inline-block; vertical-align:middle;}

#gnb_pc { border:0px solid red; width:1200px;  margin:0 auto;}
#gnb_pc > ul > li {display:inline-block; float:left; vertical-align:top; text-align:center; position:relative; background:#fbae09;
 line-height:70px; width:20%;  border-right:1px solid rgba(250,250,250,0.3);}

#gnb_pc > ul > li > div > a { display:block; font-size:19px; position:relative;  
                                   cursor: pointer; font-weight: 600; color:#fff;   }
#gnb_pc > ul > li > div:hover a { color:#874a01 !important;  }
#gnb_pc > ul > li > ul { display: none; width:240px; background:#fbae09; position: absolute;
                                  top: 70px; left: 0%; margin-left:0px; }
#gnb_pc > ul > li > ul > li > a { display:block;  font-size:1.7rem; width:100%; color:#fff; padding:1em 0.7em; 
  line-height: 1.4em; border-bottom:1px solid rgba(255,255,255,0.1); box-sizing: border-box; }
#gnb_pc > ul > li > ul > li:last-child > a {border-bottom:0;}
#gnb_pc > ul > li > ul > li > a:hover { background:#c58702; }

#userMenu {position:absolute; right:0px; top:40px;}
#userMenu ul{width:auto;}
#userMenu li {display:inline-block;padding:0px 20px; line-height:1.6rem; font-size:17px;}
#userMenu li:first-child {padding-left:0; margin-left:0; bordeR-right:1px solid rgba(0,0,0,0.3);}

@media all and (max-width:1180px){
#userMenu{position:relative;top:0px; }

}

#userMenu.mo {padding:2em 1em; }
#userMenu.mo li {border-radius:20px; background:#fbae09; padding:0.5em 1em; margin:0 0.2em; font-size:16px;}
#userMenu.mo li:before {display:none}
#userMenu.mo li a {color:#FFF}



#gnb_mo {  position:fixed; top:80px; right:0; width:100%; height:100%; max-width:350px;
                background:rgba(30,25,35, 0.95); overflow-y:scroll; -ms-overflow-style:none; z-index: 100; text-align: left; 
           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 > ul { border-top: 0px solid rgba(255,255,255,0.1); line-height:55px;}
#gnb_mo > ul > li > div {display:block; width:100%; font-size:1.8rem;  border-bottom:1px solid rgba(255,255,255,0.1); 
  box-sizing:border-box; padding:0 1.5em; position:relative; cursor: pointer; }
#gnb_mo > ul > li > div:after {content:''; display:block; width:11px; height:1px; background:#fff; position:absolute; right:1em; top:50%; margin-top:-1px;}
#gnb_mo > ul > li > div:before {content:''; display:block; width:1px; height:11px; background:#fff; position:absolute; right:calc(1em + 5.5px); top:50%; margin-top:-6px; transition:all 0.5s;}
#gnb_mo > ul > li > div > a { color:#fff; font-size:17px; }
#gnb_mo > ul > li > ul { display:none; }
#gnb_mo > ul > li > ul > li > a { display:block; width:100%;  color:#4b4b4b;padding:0 1.4em ; font-weight: 500; font-size:16px;
                                             border-bottom:1px solid #e1e1e1; background:#fff; box-sizing:border-box; line-height:3.5em;}
#gnb_mo > ul > li > div.on {background:#fbae09}
#gnb_mo > ul > li > div.on:before {transform:rotate(90deg)}

/* #header.mo_on::before { content: ''; width: 100%; height: 80px; background: #fff; position: absolute; left:0; top:0; z-index: 101; } */
#header.mo_on #gnb_mo {display:block; }
#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); }


.menuToggle { position: absolute; top:0px; right:0px; width:80px; height:80px; cursor:pointer; z-index:102; order: 1;
 background: #fbae09; }
.menuToggle span { display:block; width:30px; height:2px; background:#fff; position:absolute; top: 50%; left:50%; margin-left: -16px; transition:all 0.5s}
.menuToggle span.t { margin-top: -11px; }
.menuToggle span.m { margin-top:-1px; width: 20px; }
.menuToggle span.b { margin-top: 9px; }

#header.mo_on .menuToggle span.t { transform:rotate(45deg); margin-top: 0;  }
#header.mo_on .menuToggle span.m {width:0;}
#header.mo_on .menuToggle span.b { transform:rotate(-45deg); margin-top: 0; }


@media all and (max-width:1580px){
  #header { padding: 0 3%; }
  #header #logo img { height: 60px; }
  #gnb_pc > ul > li > div > a { padding: 0 1.3em; }
}

@media all and (max-width:1180px){
  #header { height: 80px; padding: 0;  }
  #header .hd_bx { line-height:80px; }  
  #header .hd_mbx { display: block; }

  #header #logo {padding-left:3%}
    #header #logo img { height: 60px; }
  #gnb_pc { display: none; }  
  #userMenu.pc { display: none; }
}


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


@media all and (max-width:480px){
  #header { height: 60px; }
  #header .hd_bx { line-height:60px; }
  #header #logo img { height: 60px; }
  #gnb_mo { top: 60px;  }
  .menuToggle { width: 60px; height: 60px; }

  .menuToggle span { width:24px; margin-left: -12px; }
  .menuToggle span.t { margin-top: -10px; }
  .menuToggle span.m { width: 18px; }
  .menuToggle span.b { margin-top: 8px; }
}

@media all and (max-width:380px){
  .menuToggle { width: 50px; }

  .menuToggle span { width:20px; margin-left: -10px; }
  .menuToggle span.t { margin-top: -9px; }
  .menuToggle span.m { width: 14px; }
  .menuToggle span.b { margin-top: 7px; }
}





.footer{width:100%; background:#f7f7f7;  padding:55px 0px; margin-top:55px; overflow:hidden;}
.footer ul{width:1200px; margin:0 auto;}
.footer ul li{display:inline-block; float:left; font-size:16px; line-height:25px;}
.footer ul li:first-child{padding-right: 25px;}
.footer ul li span{padding:0px 20px;}
 
 .mobileshow{display:none;}
.mobilenone{display:inline-block;}

@media all and (max-width:1199px){
.footer{padding:35px 0px;}
.footer ul{width:100%;border:0px solid red; }
.footer ul li{width:100%; text-align:center; font-size:15px;}
.footer ul li span{padding:0px 10px;}
 .mobileshow{display:block;}
 .mobilenone{display:none;}
}