@charset "utf-8";

/*-----------------header-----------------*/
#header{position: fixed; z-index: 999; overflow: hidden; transition-duration: 0.4s; width: 100%; height: 80px;/*278px;*/; border-bottom: 1px solid rgba(255, 255, 255, 0.5); }
#header::before{position: absolute; top: 80px; left: 0; width: 100%; height: 1px; background-color: rgba(255, 255, 255, 0.5); content: ""; display: block;}
#header .header_container{margin: 0 auto; width: 1160px;}

/*logo*/
#header .header_container .logo{float: left; display: inline-block; line-height: 76px; height: auto;}

/*gnb*/
#header #gnb_pc .gnb_wrap{float: right; display: flex; justify-content: space-around; }
#header #gnb_pc .gnb_wrap .gnb{padding: 0 30px;}
#header #gnb_pc .gnb_wrap .gnb:last-child{padding: 0; margin: 0 0 0 20px;}
#header #gnb_pc .gnb_wrap a .gnb_menu{font-size: 17px; font-weight: 400; color: #fff; text-align: center; height: 80px; line-height: 80px;}
#header #gnb_pc .lnb_wrap{margin: 15px 0;}
#header #gnb_pc .lnb_wrap .lnb a .lnb_menu{font-size: 16px; font-weight: 100; color: #fff; text-align: center; height: 33px; line-height: 33px;}

/*login*/
#header #gnb_pc .login_wrap .login{float: left; position: relative; padding: 0 10px;}
#header #gnb_pc .login_wrap .login:last-child{padding-right: 0;}
#header #gnb_pc .login_wrap .login::after{position: absolute; top: 35px; left: 0; width: 1px; height: 12px; background-color: #fff; content:""; display: block;  }
#header #gnb_pc .login_wrap .login:first-child::after{display: none;}
#header #gnb_pc .login_wrap .login_menu{font-size: 12px; font-weight: 400; color: #fff; text-align: center; height: 80px; line-height: 80px;}


/*-----------------------responsive-----------------------*/


/*pc*/
@media all and (min-width:1200px){

    /*-----------------header-----------------*/
    /*hover*/
    #header:hover{height: 278px; background-color: rgba(0, 0, 0, 0.55);}
    #header .gnb:hover>a .gnb_menu{border-bottom: 3px solid #e81444; }
    #header #gnb_pc .gnb_wrap a .gnb_menu:hover{color: #e81444; font-weight: 700;}
    #header #gnb_pc .gnb_wrap a .lnb_menu:hover{color: #e81444; font-weight: 700;}
}

@media all and (max-width:1080px) and (min-width:768px){
    /*gnb*/
    #header #gnb_pc .gnb_wrap .gnb{padding: 0 10px;}
    #header #gnb_pc .gnb_wrap .gnb:last-child{margin: 0 0 0 10px;}

    /*login*/
    #header #gnb_pc .login_wrap .login{ padding: 0 7px;}
    #header #gnb_pc .login_wrap .login_menu{font-size: 10px;}

    #product_wrap .txt_product_wrap{bottom: 100px;}

}
/*tab*/
@media all and (max-width:1199px) and (min-width:768px){

    /*-----------------header-----------------*/
    #header #gnb_pc.header_container{padding: 0 20px; width: 100%;}

    /*logo*/
    #header #gnb_pc.header_container .logo{width: 100px;}

    /*gnb*/
    #header #gnb_pc .lnb_wrap .lnb a .lnb_menu{font-size: 16px; font-weight: 100; color: #fff; text-align: center; height: 33px; line-height: 33px;}

    /*gnb*/
    #header #gnb_pc .gnb_wrap .gnb{padding: 0 20px;}
    #header #gnb_pc .gnb_wrap .gnb:last-child{padding: 0; margin: 0 0 0 15px;}
    #header #gnb_pc .gnb_wrap a .gnb_menu{font-size: 15px;}
    #header #gnb_pc .lnb_wrap .lnb a .lnb_menu{font-size: 14px;}

    /*login*/
    #header #gnb_pc .login_wrap  .login{ padding: 0 8px;}
    #header #gnb_pc .login_wrap  .login_menu{font-size: 12px;}

    /*hover*/
    #header:hover{height: 278px; background-color: rgba(0, 0, 0, 0.55);}
    #header #gnb_pc .gnb:hover>a .gnb_menu{border-bottom: 3px solid #e81444; }
    #header #gnb_pc .gnb_wrap a .gnb_menu:hover{color: #e81444; font-weight: 700;}
    #header #gnb_pc .gnb_wrap a .lnb_menu:hover{color: #e81444; font-weight: 700;}
}


@media all and (max-width:1080px) and (min-width:768px){

    /*-----------------header-----------------*/
    /*gnb*/
    #header #gnb_pc .gnb_wrap .gnb{padding: 0 10px;}
    #header #gnb_pc .gnb_wrap .gnb:last-child{margin: 0 0 0 10px;}

    /*login*/
    #header #gnb_pc .login_wrap .login{ padding: 0 7px;}
    #header #gnb_pc .login_wrap .login_menu{font-size: 10px;}   
}


/*mobile*/
@media all and (max-width:767px){

    /*-----------------header-----------------*/
    #header{height: 60px; overflow: inherit;}
    #header::before{display: none;}
    #header .header_container{margin: 0 5%; width: 90%;}
    #header .header_container .logo{width: 80px; line-height: 55px;}
    #header .header_container .logo img{width: 80%}
    #btn_menu_open{float: right; display: inline-block; line-height: 60px; width: 20px;}

    /*열림메뉴*/
    #mobile_menu_wrap{position: absolute; top: 0; right: -90%; padding: 5%; box-sizing: border-box; width: 85%; height: 100%; height:  calc(var(--vh, 1vh) * 100); background-color: rgba(0, 0, 0, 0.877); overflow: hidden;}
    #mobile_menu_wrap .login_wrap{margin: 80px 0 0; text-align: right; }
    #mobile_menu_wrap .login_box {display: flex; justify-content: end; width: 100%;}
    #mobile_menu_wrap .login_wrap .login_box .login{position: relative; margin-left: 30px;}
    #mobile_menu_wrap .login_wrap .login_box .login::before{position: absolute; top: 5px; left: -15px; width: 1px; height: 10px; background-color: #eee; content: ""; display: block;}
    #mobile_menu_wrap .login_wrap .login_box .login:first-child::before{display: none;}
    #mobile_menu_wrap .login_wrap .login_box .login a h3{font-size: 11px; font-weight: 300; color: #eee; }

    #mobile_menu_wrap .gnb{height: auto; overflow: hidden; display: block; border-bottom: 1px solid rgba(255, 255, 255, 0.3); box-sizing: border-box;}
    #mobile_menu_wrap .gnb a {float: left; height: 60px; overflow: hidden; }
    #mobile_menu_wrap .gnb a .gnb_menu{font-size: 15px; line-height: 59px; color: #fff;  font-weight: 300; }
    #mobile_menu_wrap .gnb span{float: right; margin-top: 20px;}

    #mobile_menu_wrap .lnb_wrap{display: none; width: 100%; background-color: rgba(255, 255, 255, 0.1); overflow: hidden;}
    #mobile_menu_wrap .lnb_wrap .lnb{padding-left: 5%; border-bottom: 1px solid rgba(255, 255, 255, 0.3); overflow: hidden;}
    #mobile_menu_wrap .lnb_wrap .lnb:last-child{border-bottom: 0px ;}
    #mobile_menu_wrap .lnb_wrap .lnb a{height: 40px; display: block; width: 100%;}
    #mobile_menu_wrap .lnb_wrap a .lnb_menu{width: 100%; font-size: 13px; line-height: 40px; color: #fff; font-weight: 100; }

    #btn_menu_close{position: absolute; top: 0%; right: 5%; display: inline-block; text-align: end; line-height: 60px; width: 20px;}
}