@charset "utf-8";

*{-webkit-text-size-adjust: none;}

.header_wrap{position: absolute; top:0; left:0; z-index: 100; padding-top:13px; padding-left:20px;  box-sizing: border-box;}
.header_wrap .logo_con{float:left; margin-top:0px; font-size:0; line-height:0;}
.header_wrap .logo_con h1{float:left; margin-top:0px;}
/*.header_wrap .logo_con h1 > a{display:block;}*/
.header_wrap .logo_con h1 > a.logo_box.web{display: none;}
.header_wrap .logo_con h1 > a.logo_box.mobile{display: block;}
.header_wrap .menu_wrap{float:right;}
.header_wrap .gnb_wrap{font-size:0; line-height:0; float:left; width:auto; margin-right:150px; display: none;}
.header_wrap .gnb_wrap > div > ul > li{overflow: hidden; display:inline-block; vertical-align: top;}
.header_wrap .gnb_wrap > div > ul > li > a{display:block; position: relative; padding-top: 18px; padding-bottom: 23px; margin-right: 90px;
    font-size:20px; font-size:2.0rem; line-height:26px; line-height:2.6rem; letter-spacing: -0.025em; color:#fff; font-weight:500;}
.header_wrap .gnb_wrap > div > ul > li:last-child > a{margin-right:0;}
.header_wrap .gnb_wrap > div > ul > li:hover > a{}
.header_wrap .gnb_wrap > div > ul > li.active > a:after{display :block;}
.header_wrap .gnb_wrap > div > ul > li > ul{}
.header_wrap .gnb_wrap > div > ul > li > ul > li > a{display:block; padding-top: 4px; padding-bottom: 4px;
    font-size:16px; font-size:1.6rem; line-height:22px; line-height:2.2rem; letter-spacing: -0.025em; font-weight: 300; color:rgba(255,255,255,0.6);}
.header_wrap .gnb_wrap > div > ul > li > ul > li:first-child > a {padding-top: 0px;}
.header_wrap .gnb_wrap > div > ul > li > ul > li:last-child > a {padding-bottom: 0px;}
.header_wrap .gnb_wrap > div > ul > li > ul > li > a.active{font-weight: 500; color:#f28d2c;}
.header_wrap .gnb_wrap > div > ul > li > ul > li:hover > a{font-weight: 500; color:#f28d2c;}
.header_wrap .gnb_wrap > div > ul > li > ul{display: none;}
.header_wrap .gnb_wrap > div > ul > li:hover > a + ul {display: block;}

/* icon */

.menu_icon{transition: margin-top 0.3s ease-in; float:left; display:block; position: absolute; top:-15px; right:5px; width:41px; height:41px; padding-top:15px; padding-bottom:15px; padding-right:15px; padding-left:15px;}
.menu_icon span {position: absolute; display: block; width: 41px; height: 3px; top: 50%; margin-top: -1.5px; background-color: #fff;}
.menu_icon span::before, .menu_icon span::after {position: absolute; display: block; height: 3px; background-color: #fff; content: "";}
.menu_icon span::before{width:29px; top: -10px;}
.menu_icon span::after{width:18px; bottom: -10px;}
.header_wrap.active .menu_icon span {background: none;}
.menu_icon span, .menu_icon span::before, .menu_icon span::after {
    -webkit-transition-duration: 0.1s, 0.15s;
    transition-duration: 0.1s, 0.15s;
    -webkit-transition-delay: 0.1s, 0s;
    transition-delay: 0.1s, 0s;
    -webkit-transition-timing-function : ease-in-out;
    transition-timing-function : ease-in-out;
}
.header_wrap.active .menu_icon span::before {
    -webkit-transition-property: top, -webkit-transform;
    transition-property: top, transform;
}
.header_wrap.active .menu_icon span::after {
    -webkit-transition-property: bottom, -webkit-transform;
    transition-property: bottom, transform;
}
.header_wrap.active .menu_icon span::before, .header_wrap.active .menu_icon span::after {
    -webkit-transition-delay: 0s, 0.05s;
    transition-delay: 0s, 0.05s;
    transition-timing-function : ease-in-out;
}
.header_wrap.active .menu_icon span::before {
    top: 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.header_wrap.active .menu_icon span::after {
    bottom: 0;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/*.fixed_header_wrap .menu_icon{top:-7px; right:5px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px;}*/
.fixed_header_wrap .menu_icon{top:4px; right:20px; padding:0;}
.fixed_header_wrap .menu_icon span{width:37px; height:2px; background-color: #000;}
.fixed_header_wrap .menu_icon span::before, .fixed_header_wrap .menu_icon span::after{height:2px; background-color: #000;}
.fixed_header_wrap .menu_icon span::before{width:27px; top: -8px;}
.fixed_header_wrap .menu_icon span::after{width:19px; bottom: -8px;}

/* fixed_header */
.fixed_header_wrap{display:none; position: fixed; top:0; left:0; z-index: 100; background-color:rgba(255,255,255,0.9); box-sizing: border-box; border-bottom:1px solid #eee;}
.fixed_header_wrap .logo_con{float:left; margin-top:0px; font-size:0; line-height:0;}
.fixed_header_wrap .logo_con h1{float:left; margin-top:0px;}
.fixed_header_wrap .logo_con h1 > a{display:block; padding:15px 20px 15px 20px;}
.fixed_header_wrap .menu_wrap{float:right;}
.fixed_header_wrap .gnb_wrap{font-size:0; line-height:0; float:left; width:auto; margin-right:112px; display: none;}
.fixed_header_wrap .gnb_wrap > div > ul > li{overflow: hidden; display:inline-block; vertical-align: top;}
.fixed_header_wrap .gnb_wrap > div > ul > li > a{display:block; position: relative; padding-top: 12px; padding-bottom: 14px; margin-right: 62px;
    font-size:15px; font-size:1.5rem; line-height:21px; line-height:2.1rem; letter-spacing: -0.035em; color:#444; font-weight:400;}
.fixed_header_wrap .gnb_wrap > div > ul > li:last-child > a{margin-right:0;}
.fixed_header_wrap .gnb_wrap > div > ul > li:hover > a{font-weight: 500; color:#f28d2c;}




/* w_gnb */
.web_header_wrap{display:none; padding-top: 58px; padding-bottom: 100px;
    position: fixed; top:0; left:0; z-index: 101; background-color:rgba(0,0,0,0.7); box-sizing: border-box;}
.web_header_wrap .menu_wrap{margin-bottom: 98px;}
.web_header_wrap .gnb_wrap{font-size:0; line-height:0; text-align: center;}
.web_header_wrap .gnb_wrap > div > ul{display: inline-block; text-align: left;}
.web_header_wrap .gnb_wrap > div > ul > li{overflow: hidden; display:inline-block; vertical-align: top; margin-right: 114px;}
.web_header_wrap .gnb_wrap > div > ul > li:last-child{margin-right:0;}
.web_header_wrap .gnb_wrap > div > ul > li > a{display:block; position: relative; padding-top: 18px; padding-bottom: 23px;
    font-size:22px; font-size:2.2rem; line-height:28px; line-height:2.8rem; letter-spacing: -0.065em; color:#fff; font-weight:500;}
.web_header_wrap .gnb_wrap > div > ul > li.active > a:after{display :block;}
.web_header_wrap .gnb_wrap > div > ul > li > ul{}
.web_header_wrap .gnb_wrap > div > ul > li > ul > li > a{display:block; padding-top: 7px; padding-bottom: 6px;
    font-size:17px; font-size:1.7rem; line-height:23px; line-height:2.3rem; letter-spacing: -0.035em; font-weight: 300; color:rgba(255,255,255,0.6);}
.web_header_wrap .gnb_wrap > div > ul > li > ul > li:first-child > a {padding-top: 0px;}
.web_header_wrap .gnb_wrap > div > ul > li > ul > li:last-child > a {padding-bottom: 0px;}
.web_header_wrap .gnb_wrap > div > ul > li > ul > li > a.active{color:#f28d2c;}
.web_header_wrap .gnb_wrap > div > ul > li > ul > li:hover > a{color:#f28d2c;}
.web_header_wrap .gnb_wrap > div > ul > li:hover > a + ul {display: block;}
.web_header_wrap .close_btn_box{text-align: center;}
.web_header_wrap .close_btn{display:block; height: 20px; transition: all 0.1s ease;
    background-image: url("../img/gnb_arrow_web.png"); background-repeat: no-repeat; background-position: center;}
.web_header_wrap .close_btn:hover{background-image: url("../img/gnb_arrow_web_hover.png");}

/* m_gnb */
.m_header_wrap{position: fixed; top:0; right:-100%; z-index: 100; background-color: #fff; height: 100%; max-width: 480px;}
.m_header_wrap .logo_con{border-bottom: 2px solid #e8e9ea; overflow: hidden; padding-top: 24px; padding-right: 34px; padding-bottom: 31px; padding-left: 34px;}
.m_header_wrap h1{float:left;}
.m_header_wrap .close_btn{float:right; margin-top: 12px; cursor: pointer;}
.m_header_wrap .close_btn .close_btn_img{width: 27px; height: 28px; transition: all 0.2s ease;
    background-image: url("../img/m_gnb_close_icon.png"); background-repeat: no-repeat; background-position: center;}

.m_header_wrap .gnb_wrap > div > ul > li{border-bottom:2px solid #e8e9ea; overflow: hidden;}
.m_header_wrap .gnb_wrap > div > ul > li > a{display: block; padding: 26px 34px 27px 34px;
    background-image: url("../img/m_gnb_arrow.png"); background-repeat: no-repeat; background-position: right 34px center;
    font-size:23px; font-size:2.3rem; line-height:29px; line-height:2.9rem; letter-spacing: -0.025em; color:#000; font-weight: 400;}
.m_header_wrap .gnb_wrap > div > ul > li > ul > li{position: relative;}
.m_header_wrap .gnb_wrap > div > ul > li > ul > li > a{display:block; padding: 14px 14px 14px 14px;
   font-size:20px; font-size:2.0rem; line-height:26px; line-height:2.6rem;   letter-spacing: -0.045em; color:#000; font-weight: 400;}
.m_header_wrap .gnb_wrap > div > ul > li > ul > li > a:after{content: ""; position: absolute; top:50%; left:0; width:5px; border-bottom:1px solid #000;}
.m_header_wrap .gnb_wrap > div > ul > li.list_on > a{background-color: #f28d2c; background-image:url(../img/m_gnb_arrow_active.png); color:#fff;}
.m_header_wrap .gnb_wrap > div > ul > li > ul{height:0; padding: 0; overflow: hidden;}
.m_header_wrap .gnb_wrap > div > ul > li.list_on > ul{ padding: 18px 34px 32px 34px; height: auto;}
.m_dim{display:none; position: fixed; top:0; left:0; z-index: 4; height: 100%; background-color: rgba(0,0,0,0.6);}

@media all and (min-width: 480px) {
.m_header_wrap .close_btn:hover .close_btn_img{background-image: url("../img/popup_close_btn_hover.png");}
}

@media all and (min-width:992px){
    .fixed_header_wrap .gnb_wrap{display: block;}
    /*.fixed_header_wrap .logo_con h1 > a{padding:15px 30px 15px 30px;}*/

}
@media all and (min-width:1199px){
    /*.header_dim{position:absolute; top:0; left:0; z-index:1; height: 337px; background-color: rgba(0,0,0,0.7);}*/
    .header_wrap .logo_con h1 > a.logo_box.web{display: block;}
    .header_wrap .logo_con h1 > a.logo_box.mobile{display: none;}
    .header_wrap{padding-left:50px; padding-top:30px;}
    /*.header_wrap .gnb_wrap{display: block;}*/
    .menu_icon{top:-5px; right:35px; transition: margin-top 0.3s ease-in;}
    .header_wrap .gnb_wrap{display: block;}
}