/*headStyle.css*/

#hd{position: fixed; top: 0; left: 0; right: 0; width: 100%; height: 100px; z-index: 1000; background: #e2e2e0; transition: .45s ease; }



.main #hd{background:transparent; }
#hd.scrollBg #hd_wrapper {background:#e2e2e0 !important; border-bottom:1px solid #ACACAC}


#hd #hd_wrapper{border-bottom:1px solid #ACACAC}
.main #hd #hd_wrapper {border-bottom:1px solid #E2E2E0}



#hd_wrapper{height: 100%; }
#hd_wrapper > .inner{height: 100%; box-sizing: border-box; position: relative;}



.hd_nav{width: 100%; height: 70px; position: relative; display: table;}

.main #logo{-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);}
#logo{float: left; width: 145px; height: 80px; position: relative; left:60px; z-index: 10; background: url(../../img/common/logo.png) no-repeat; background-size: 100% auto; background-position: center;  transition: .45s ease; margin-top:10px}

#hd.scrollBg #logo {-webkit-filter: grayscale(100%) brightness(0); filter: grayscale(100%) brightness(0);}

#logo a{width: 100%; height: 100%;}
#logo  img {}
/* #hd.scrollBg #logo{background-image: url(../../img/common/logo.png);} */
/* 열림 버튼 */
.open_icon{position: relative; float: right; width: 26px; height: 100px; display:none}
.open_icon.on{/*animation: ham_rotate .5s ease;*/ transform: rotate(225deg); transition: .45s ease;}

/* @keyframes ham_rotate{
    0%{transform: rotate(0deg) translateX(0px);}
    100%{transform: rotate(225deg) translateX(0px);}
} */

#mb-open-menu{position: absolute;right: 0;top: 50%;-webkit-transform: translate(0,-50%);-ms-transform: translate(0,-50%);transform: translate(0,-50%);width: 30px;height: 16px;cursor: pointer;z-index: 10;}
#mb-open-menu span {position: absolute;left: 0;display: block;width: 100%;height: 1px;background: #000; -webkit-transition: all .4s ease;transition: all .4s ease;}
#mb-open-menu .line1 {top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(90deg);}
#mb-open-menu .line2 {top: 50%; transform: translateY(-50%);}
#mb-open-menu .line3 {bottom: 0; display: none;}

.main #mb-open-menu span {position: absolute;left: 0;display: block;width: 100%;height: 1px;background: #fff; -webkit-transition: all .4s ease;transition: all .4s ease;}
.main #mb-open-menu .line1 {top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(90deg);}
.main #mb-open-menu .line2 {top: 50%; transform: translateY(-50%);}
.main #mb-open-menu .line3 {bottom: 0; display: none;}
.main .scrollBg #mb-open-menu span {background:#FD4E4F}
.scrollBg #mb-open-menu span {background:#000}

.head_link{position: absolute; right: 60px; top: 50%; transform: translateY(-50%); z-index:1; transition: .45s ease;}
.main .head_link a{font-size: 17px; font-weight: 400; color: #fff; border:1px solid #fff; border-radius:50px; border-left:0; border-right:0; padding: 5px 20px; transition: .45s ease;}
.head_link a{font-size: 17px; font-weight: 400; color: #FD4E4F; border:1px solid #FD4E4F; border-radius:50px; border-left:0; border-right:0; padding: 5px 20px; transition: .45s ease;}

.main.on  .head_link a {
    font-size: 17px;
    font-weight: 400;
    color: #FD4E4F;
    border: 1px solid #FD4E4F;
    border-radius: 50px;
    border-left: 0;
    border-right: 0;
    padding: 5px 20px;
    transition: .45s ease;
}

.main.on   #hd #logo {
    -webkit-filter: grayscale(100%) brightness(0);
    filter: grayscale(100%) brightness(0);
}



#hd.scrollBg .head_link a {color:#FD4E4F; border:1px solid #FD4E4F; border-right:0px; border-left:0px}
#hd.scrollBg .head_link a:hover {background:#FD4E4F; color:#fff;}

/* 토글 메뉴 */
#aside{position: fixed; display: block; z-index: 2000; left: 0; top: -100%; bottom: 0; margin: 0px; width: 100%; border-top: 0; z-index: 100; overflow-y: auto; background: none; border: 0; transition: .45s ease;}
#aside.on{top: 0;}


.btn_ {transition: .45s ease; border-radius:50px; padding:10px 20px 5px; border-left:0px !important;; border-right:0px !important;     display: inline-block;}
.btn_:hover {background:#FD4E4F; color:#fff; border:1px solid #FD4E4F;} 
.btn_red {border:1px solid #FD4E4F; color:#FD4E4F}
.btn_black {border:1px solid #000; color:#000}
.btn_white {border:1px solid #ffF; color:#fff}

/* 닫기 메뉴 */
/* .close_menu{position: absolute; z-index: 1100; top: 30px; right: 30px; width: 60px; height: 60px;} */
/* .close_menu .line_box{position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 50px; height: 50px;}
.close_menu span {position:absolute; left:0; top: 20px; display:block; width:100%; height:2px; background:#fff; -webkit-transition:all .4s ease; transition:all .4s ease;}
.close_menu .close-line1{-ms-transform:rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg);}
.close_menu .close-line2{-ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); transform:rotate(-45deg);} */
/* login */
.hd_tnb{float: right; margin-right: 50px; height: 100px;}
#ol_before{float: left; height: 100%;}
#ol_before .buttons{float: left; height: 100%;}
#ol_before .buttons a{text-align: center; line-height: 100px; font-weight: 300;}
.hd_tnb #ol_before .buttons a{padding: 0; color: #fff; font-size: 12px;}
.hd_tnb #ol_before .buttons a:hover{background: none; color: #ccc;}
#ol_before .buttons.join a{margin-right: 10px;}
#ol_before .buttons.join a::after{display: inline-block; margin: 0 0 0 10px; width: 1px; height: 10px; 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: none;}
#ol_after_hd{padding: 0; margin: 0; float: right; width: 100%; height: inherit;}
#ol_after_hd #ol_after_info i{display: none;}
#ol_after_hd .profile_text{float: none; height: 100px;}
#ol_after_hd .profile_text .nick_name{float: left; margin: 0; line-height: 30px; display: inline-block; -ms-transform: skew(-0.1deg);-webkit-transform: skew(-0.1deg); transform: skew(-0.1deg); color: #fff; font-size: 13px;}
#ol_after_hd .profile_text #ol_after_info{float: left; margin: 5px 0 0 5px; width: 20px; height: 20px; -webkit-box-shadow: none; box-shadow: none; background: url(../../img/common/mypage_icon2.png) no-repeat center; border-radius: 50%; border: 1px solid #ddd; background-size: 80% auto; background-position: center; text-indent: -9999px; overflow: hidden;}
#ol_after_hd .profile_text .nick{float: left; margin-right: 10px; position: relative; top: 50%; transform: translateY(-50%);}
#ol_after_hd .profile_text .nick span{display: inline-block; margin-right: 5px; color: #fff;}
#ol_after_hd .profile_text .buttons{float: left; margin: 0 auto; position: relative; top: 50%; transform: translateY(-50%);}
#ol_after_hd .profile_text .buttons a{padding: 0; line-height: 30px; text-align: center; font-size: 12px; border: none; color: #fff; background: none;}
#ol_after_hd .profile_text .buttons a.btn_admin{height: inherit;}
#ol_after_private{display: none;}
#ol_after_hd .profile_text .buttons a.hd_btn_admin{margin-left: 10px;}
#ol_after_hd .profile_text .buttons a.hd_btn_admin::before{display: inline-block; margin: 0 10px 0 0; width: 1px; height: 10px; content:""; background: #fff;}
#hd.scrollBg .hd_tnb #ol_before .buttons a,
#hd.scrollBg #ol_after_hd .profile_text .nick_name,
#hd.scrollBg #ol_after_hd .profile_text .nick span,
#hd.scrollBg #ol_after_hd .profile_text .buttons a{color: #333;}
#hd.scrollBg #ol_before .buttons.join a::after,
#hd.scrollBg #ol_after_hd .profile_text .buttons a.hd_btn_admin::before{background-color: #f6f1e7;}
/* 토글 메뉴 CONTENTS */
.mobile_menu{display: table; width: 100%; height: 100%; background: #e2e2e0 ;}
.m_ul{display: table-cell; padding: 0 2%; vertical-align: middle; width: 100%; overflow-x: hidden;}
.mobile-list{width: 100%; padding: 0 30px; position: relative; border-bottom: 1px solid transparent; text-align: center;}
.mobile-list a{text-align: center; padding: 20px 0; position: relative;  color: #000; text-transform: uppercase; text-align: left; font-size: 90px; line-height: 90px; font-weight: 200; transition: .15s linear;}

.mobile_menu li:nth-child(1) a{font-weight: 300;}
.mobile-list a:hover{font-weight: 300 !important;}

.mobile_menu .mb-sub-ul{display: none; float: left; width: 60%;}
.mb-sub-ul li{padding: 0; float: left; width: 32%; overflow: hidden;}
.mb-sub-ul li:nth-child(3n-1){margin: 0 2%;}
.mb-sub-ul li a{display: block; padding: 20px 0; width: 100%; height: 100%; color: #c6864e; font-size: 18px; font-weight: 400; line-height: 28px;}
.mb-sub-ul li a::before{display: inline-block; margin: 0 10px 5px 0; content: ""; width: 4px; height: 4px; background: #c6864e; border-radius: 50%;}


/* .mask{display: none;position: fixed;top: 0;right: 0;width: 100%;height: 100%;background: #333;opacity: 0.7;cursor: pointer; z-index: 1000;} */

#hd_wrapper{background: rgba(0,0,0,0); -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;}

#hd.scrollBg .gnb_1da{color: #000;}



/* #hd.scrollBg {border-bottom: 1px solid rgba(255,255,255,0.2);} */
#hd_wrapper{position: absolute; width: 100%; height: 100px; border-bottom: 1px solid #e2e2e0; }
/* #hd.scrollBg #mb-open-menu span{background: #000;} */
#mb-open-menu{display: block;}

/*#gnb {display:none !important;}*/
/*.open_icon{display:inline-block !important;}*/

.open_icon{display:none ;}

@media screen and (min-width:1400px){
.mobile-list{width:100%; text-align:center}
.mobile-list a{float:none;}
}

@media screen and (max-width:1400px){
    #hd_wrapper{width: 100%;}
	.head_link {right:20px}
	#logo {left:0px}
}


@media screen and (max-width:1200px){
    .mobile-list a{font-size: 60px; line-height: 60px;}
}

@media screen and (max-width: 1024px) {
.open_icon{display:inline-block ;}
}

@media screen and (max-width:1024px){
    #logo{width: 120px;}
    .m_ul{padding: 0 5%;}
    .mobile-list{padding: 0;}
    .mobile-list a{font-size: 30px; line-height: 40px; padding: 15px 0;}
    .mobile_menu .mb-sub-ul{width: 70%;}
    .mb-sub-ul li a{font-size: 16px; line-height: 24px;}
}
@media screen and (max-width:767px){
    .mobile-list a{font-size: 16px;}
    .mobile_menu .mb-sub-ul{}
    .mb-sub-ul li a{font-size: 14px;}
    .mobile-list a{font-size: 20px; line-height: 25px;}
    .mb-sub-ul li a::before{margin: 0 5px 5px 0;}
    .mobile-list .icon{margin-left: 10px;}
    .close_menu{top: 20px; right: 20px;}
	.head_link a{font-size: 16px;}

	    #logo{width: 100px;}
}
@media screen and (max-width:600px){
   
    .hd_tnb{margin-right: 20px;}
    #ol_after_hd .profile_text .nick{margin-right: 10px;}
    #ol_after_hd .profile_text .nick_name{display: none;}
    #ol_after_hd .profile_text #ol_after_info{margin: 0; background: none; text-indent: 0; width: auto; height: auto; border: none; color: #fff; font-size: 12px; border-radius: 0; }
    #ol_after_hd .profile_text #ol_after_info::after{display: inline-block; margin: 0 0 0 10px; width: 1px; height: 10px; content:""; background: #fff;}
    #hd.scrollBg #ol_after_hd .profile_text #ol_after_info{color: #333;} 
    #hd.scrollBg #ol_after_hd .profile_text #ol_after_info::after{background: #333;}
    .m_ul{padding: 0 20px;}
    .mobile-list a{padding: 15px 0;}
    .mobile_menu .mb-sub-ul{width: 55%;}
    .mb-sub-ul li{width: 100%;}
    .mb-sub-ul li:nth-child(3n-1){margin: 0;}
    .mb-sub-ul li a{padding: 15px 0; }
    .mb-sub-ul li a::before{margin: 0 10px 5px 0;}
    .mobile-list .icon{width: 10px; height: 10px;}
    .close_menu{width: 20px; height: 20px;}
    .close_menu .line_box{width: 20px; height: 20px;}
    .close_menu span{top: 8px;}
}