/*head.css*/
.gnb_wrap .gnb_empty{padding: 20px 0;}
#hd{width: 100%; height: 120px; background: none; position: fixed; top: 0; left: 0; z-index: 10; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;}
#hd.scroll_bg{top:-40px;}
#hd_wrapper{width: 100%; height: 80px; overflow: visible; z-index: 30; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; background-color: #fff;}
#hd.scroll_bg #hd_wrapper{background: #fff; border-bottom: 1px solid #ccc;}
#hd_wrapper .inner{height: 100%; position: relative;}
/*로고*/
#logo{position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left: 20px; width: 200px; height: 49px;}
#logo a{width: 100%; height: 100%; -webkit-transform: none;-ms-transform: none;transform: none; background: url(../../img/common/logo_scroll.png) no-repeat; background-size: 100% auto; background-position: center;}
#logo a, #logo a img{width: 100%;display: block;}
#hd.scroll_bg #logo a{background-image: url(../../img/common/logo_scroll.png);}
/*메뉴*/
#gnb{width: 850px; height: 80px; position: absolute; right: 0;}
#gnb #gnb_1dul{height: 80px; font-size: 1.0em;}
#gnb .gnb_1dli{height: 100%; line-height: 80px; width: 15%;}
.gnb_1da{height: 100%; width: 100%; text-align: center; font-size: 17px; color: #000; font-weight: 300;}
#hd.scroll_bg .gnb_1da{color: #222;}
.gnb_1da::after{display: block; content: ""; width: 0; height: 3px; margin-top: -3px; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;background: #fac60e; position: relative; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);}
.gnb_1dli:hover .gnb_1da::after{width: 100%;}
#hd.scroll_bg .gnb_1da::after{background: #fac60e;} 
.gnb_1dli .bg{display: none;}
.gnb_2dul{width: 100%; min-width: none; background: #fff; -webkit-box-shadow: none; box-shadow: none; top: 80px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);} 
#hd.scroll_bg .gnb_2dul{-webkit-box-shadow: 1px 2px 10px 0px rgba(0,0,0,0.23);
box-shadow: 1px 2px 10px 0px rgba(0,0,0,0.23); }
.gnb_1dli_over .gnb_2dul{left: 50%;}
.gnb_2dli{border-top: 1px solid #ddd;}
.gnb_2da{color: #888; font-size: 15px; padding: 0 20px; line-height: 40px; font-weight: 400; text-align: center;}
a.gnb_2da:hover{background: none;}
.gnb_2da:hover{color: #222;}
.gnb_2dli:hover{background: #fac60e;}
/* tnb */
#tnb.pc{padding: 0; width: 100%; height: 40px; background-color: #fff; border-bottom: 1px solid rgba(255,255,255,0.3); -webkit-box-sizing: border-box; box-sizing: border-box;}
#tnb .left_tnb{float: left; width: auto;}
#tnb .right_tnb{float: right; width: auto; height: 40px;}
#tnb .tnb_admin{margin-top: -1px;}
#tnb .tnb_admin a{width: 100%; background: #fac60e;}
#tnb.pc ul li, #tnb.pc ul li a{line-height: 40px; height: 40px;}
#tnb.pc ul li a, #tnb.pc ul li b, #tnb.pc ul li span{color: #000; font-weight: 300; font-size: 14px;}
#tnb .left_tnb li{float: left; margin-right: 20px;}
.left_tnb li i, .left_tnb li span{display: inline-block; float: left;}
.left_tnb li i{margin-right: 5px; width: 15px; height: 40px; background: url(../../img/common/phone_icon.png) no-repeat; background-size: 15px auto; background-position: center;}
.left_tnb li i.clock{background-image: url(../../img/common/clock_icon.png);}
.right_tnb li:hover, #tnb .right_tnb a:hover{background: #333; color: #fff; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;}
.right_tnb li a i{display: none;}
/* login */
#ol_before{background: #fac60e; height: 50px;}
#ol_before .buttons{float: left; margin-top: 7.5px; width: 50%;}
#ol_before .buttons a{width: 100%; text-align: center;}
#tnb.mobile #ol_before .buttons a{padding: 0; color: #fff;}
#tnb.mobile #ol_before .buttons a:hover{background: none; color: #fff;}
#ol_before .buttons.join a{border-left: none;}
#ol_before .buttons.join a::after{display: block; margin-top: 7.5px; margin-right: -0.5px; float: right; width: 1px; height: 20px; content:""; background: #fff;}
#ol_before  .buttons a i{display: none;}
.ol{margin: 0;}
#ol_after{-webkit-box-shadow: none; box-shadow: none; border: none; background: #f0f0f0;}
#ol_after_hd{padding: 0; margin: 0; float: right; width: 100%; height: inherit;}
#ol_after_hd .profile_img{float: left; display: none; width: 40%; position: relative; top: 0; left: 0;}
#ol_after_hd .profile_img img{margin: 25px auto; border-color: #ddd; width:95px; height:95px;}
#ol_after_hd #ol_after_info i{display: none;}
#ol_after_hd .profile_text{float: none; margin: 25px auto; width: 100%; max-width: 200px;}
#ol_after_hd .profile_text strong{float: left; margin: 0; line-height: 30px; display: inline-block; -ms-transform: skew(-0.1deg);-webkit-transform: skew(-0.1deg); transform: skew(-0.1deg);}
#ol_after_hd .profile_text #ol_after_info{float: left; margin-left: 5px; width: 30px; height: 30px; -webkit-box-shadow: none; box-shadow: none; background: url(../../img/common/mypage_icon2.png) no-repeat center; background-color: #fff; border-radius: 50%; border: 1px solid #ddd; background-size: 20px auto;}
#ol_after_hd .profile_text .nick{margin: 10px auto; width: 100%; text-align: center;}
#ol_after_hd .profile_text .nick span{margin-right: 5px; display: inline-block; font-weight: 900;}
#ol_after_hd .profile_text .buttons{margin: 0 auto; width: 100%;}
#ol_after_hd .profile_text .buttons a{padding: 0; margin-top: 5px; width: 100%; height: 25px; line-height: 25px; color: #666; border: 1px solid #aaa; text-align: center; font-size: 13px;}
#ol_after_hd .profile_text .buttons a.btn_admin{border-color:#fac60e; background: #38a540; color: #fff; }
#ol_after_private{display: none;}
@media screen and (min-width:1200px){
    #mb-open-menu{display: none;}
}
@media screen and (max-width:1199px){
    #hd_wrapper .inner{width: 100%;}
    #hd.scroll_bg{top:0;}
    #hd{min-width: inherit;}
    #logo{left: 20px; width: 120px;}
    #gnb{display: none;}
    #aside{position: fixed; padding-left: 60px; right: -100%; top: 0px; bottom: 0; margin: 0px; width: 40%; border-top: 0; z-index: 1005; overflow-y: auto; background:none; border: 0; display: block;}
    #aside ul{background: #fff;}
    .gnb_1da{border-bottom: none;}
    #tnb{display: none;}
    #tnb.mobile{display: block;}
    #tnb.mobile{height: auto; background: #fff;}
    #ol_before .buttons{margin-top: 0; height: 100%;}
    #tnb.mobile #ol_before .buttons a{height: 100%; line-height: 50px; font-size: 14px; font-weight: 300;}
    #ol_before .buttons.join a{border-right: 1px solid rgba(255,255,255,0.5); -webkit-box-sizing: border-box; box-sizing: border-box;}
    #ol_before .buttons.join a::after{display: none;}
    #mb-open-menu{position: absolute;top: 50%; right: 20px;-ms-transform: translate(0,-50%); -webkit-transform: translate(0,-50%); transform: translate(0,-50%);  width: 25px; height: 20px; cursor: pointer; z-index: 10; display: block;}
	#divpop{display:none;}
    #mb-open-menu span {position: absolute; right: 0; display: block;width: 100%;height: 2px; background: #000; -webkit-transition: all .4s ease; transition: all .4s ease;}
    #mb-open-menu.scroll_bg span{background: #fac60e;}
    #mb-open-menu .line1 {top: 1px;}
    #mb-open-menu .line2 {top: 9px; width: 18px;}
    #mb-open-menu .line3 {bottom: 1px;}
    .close_menu{position: absolute; z-index: 1100; top: 0; left:0; width: 60px; height:100%;}
    .close_menu .line_box{position: absolute; left: 50%; top: 28px; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 30px; height: 30px;}
    .close_menu span {position:absolute; left:0; display:block; width:100%; height:2px; background:#fff; -webkit-transition:all .4s ease; transition:all .4s ease; }
    .close_menu .close-line1 {top:13px; -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg);}
    .close_menu .close-line2 {top:13px; -ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); transform:rotate(-45deg);}
    .mobile_menu{width: 100%; height: 100%; float: right; background: #fff;}
    .mobile_menu ul{padding-top: 15px; width: 100%; overflow: hidden;}
    .mobile-list {width: 100%; position: relative;}
    .mobile_menu li:first-child i{display: none;}
    .mobile-list a {padding: 15px 20px; width: 100%; color: #444; text-transform: uppercase; text-align: left; font-weight: 400;}
    .mobile-list.on > a{border-bottom: 2px solid #fac60e;}
    .mobile-list .icon{position: absolute; right: 20px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}
    .mobile-list .icon{width: 27px; height: 13px;}
    .mobile-list .icon_box{-webkit-transform: rotate(90deg);-ms-transform: rotate(90deg);transform: rotate(90deg); width: 100%; height: 100%; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;}
    .mobile-list .icon .line{position: relative; display: inline-block; width: 10px; height: 20px; overflow: hidden; background-color: transparent;}
    .mobile-list .icon .line2{position: absolute; margin-left: -3.5px; top: 50%; left: 50%; width: 10px; height: 10px; -webkit-transform: translate(-50%, -50%) rotate(45deg); -ms-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); border-top: 2px solid #cbcbcb; border-right: 2px solid #cbcbcb;}
    .mobile-list.on .icon_box{-webkit-transform: rotate(270deg);-ms-transform: rotate(270deg);transform: rotate(270deg);}
    .mask{display: none;position: fixed;top: 0;right: 0;width: 100%;height: 100%;background: #333;opacity: 0.98;cursor: pointer; z-index: 1000;}
    #aside .mobile_menu .mb-sub-ul{display: none; padding: 10px 0; background: #f5f5f5;}
    .mb-sub-ul li a {display: block; padding: 0 25px; color: #222; line-height: 45px; font-size: 13px; color: #666;}
}
@media screen and (max-width:767px){
    #aside{width: 50%; min-width: 350px;}
}
@media screen and (max-width:480px){
    #aside{padding-left: 45px; width: 95%; min-width: inherit; max-width: 350px;}
    .close_menu{width: 45px;}  
}