.header{ width: 100%; position: fixed; z-index: 9999999; height: 150px; display: flex; align-items: center; }
.header.down{background: linear-gradient(
    to top,
    rgba(20, 20, 20, 0) 10%,
    rgba(20, 20, 20, 0.35) 25%,
    rgba(20, 20, 20, 0.6) 50%,
    rgba(20, 20, 20, 0.75) 75%,
    rgba(20, 20, 20, 1) 100%);
    
}
.header .header_wrap{}
.header .header_wrap .header_left{position: absolute; top: 58px; left: 70px; width: 220px;}
.header .header_wrap .header_center{transition: 0.3s; font-size: 0; margin-left: 320px; font-weight: 300;
    height:100px;} 
.header .header_wrap .header_center.on{display: none;}
.header .header_wrap .header_center .header_menu{height: 100%;
    display: flex;
    align-items: center;}
.header .header_wrap .header_center .header_menu>ul{height: 100%;}
.header .header_wrap .header_center .header_menu>ul>li{ font-size: 17px; display: inline-block; padding: 0 30px;height:100%;padding-top: 36px;}
/* .header .header_wrap .header_center .header_menu>ul>li:first-child{padding-left: 0;} */
.header .header_wrap .header_right{position: absolute; right: 70px; top: 65px; cursor: pointer; z-index: 9999;}
.header .header_wrap .header_right .header_menu_btn{}
.header .header_wrap .header_right .header_menu_btn span{font-size: 12px; vertical-align: top; margin-right: 13px;}
.header .header_wrap .header_right .header_menu_btn span.menu_on{display: none; }
.header .header_wrap .header_right .header_menu_btn span.menu_close.on{display: none;}
.header .header_wrap .header_right .header_menu_btn span.menu_on.on{display: inline-block;}
.header .header_wrap .header_right .header_menu_btn .menu_btn_img{background: url(../img/menu_btn.png)no-repeat center center; background-size: cover; display: inline-block; width: 15px; height: 15px;}
.header .header_wrap .header_right .header_menu_btn .menu_btn_img.on{background: url(../img/menu_on_btn.png)no-repeat center center; background-size: 30%;}

.hr_lang{position: absolute; right: 180px; top: 60px;}
.hr_lang .hr_wrap{}
.hr_lang .hr_wrap ul{}
.hr_lang .lang_wrap ul li{cursor: pointer; opacity: 0.5; display: inline-block; margin: 0 2px; font-size: 18px;}
.hr_lang .lang_wrap ul li.on{opacity: 1;}

/* 헤더 서브메뉴 */
.header .header_wrap .header_center .header_menu>ul>li:hover .hm_sub{opacity: 1; pointer-events: visible;}
.hm_sub:hover{ border:1px solid rgba(255,2,7,0.4); box-shadow: 0px 0px 40px rgba(255,2,7,0.2);}
.hm_sub:hover .btn_dot1{background: rgba(255,2,7,0.8);}
.hm_sub:hover .btn_dot2{background: rgba(255,2,7,0.8);}
.hm_sub:hover .btn_dot3{background: rgba(255,2,7,0.8);}
.hm_sub:hover .btn_dot4{background: rgba(255,2,7,0.8);}
.hm_sub{width: 100%; line-height: 30px; transition:0.2s; opacity: 0; pointer-events: none; position: absolute; left: 0; top: 120px; padding: 21px; border: 1px solid rgba(255,255,255,0.3);background: rgba(0,0,0,0.8); }
.hm_sub.hs_1{ padding-left: 150px;}
.hm_sub.hs_2{ padding-left:355px; }
.hm_sub.hs_3{ padding-left:450px; }
.hm_sub.hs_4{ padding-left:650px;}
.hm_sub.hs_5{ padding-left: 800px;}
.hm_sub.hs_6{ padding-left: 884px;}
.hm_sub.hs_7{ padding-left: 1080px;}
.hm_sub ul{font-size: 0;}
.hm_sub ul li{ cursor: pointer; display: inline-block; text-align: center; font-size: 16px; margin: 0 15px; }


/* 모달 메뉴 */
.menu_modal{  background-size: cover; opacity: 0;  padding: 11% 0 0 13%;  width: 100%; height: 937px; position: fixed; perspective: 600px; transform-style: preserve-3d;  transform:rotateY(0deg);  left: -100%; z-index: 999; transition:1s;} 
.menu_modal.on{opacity: 1; left: 0; transform:rotateY(360deg);}
.menu_modal .menu_modal_wrap{}
.menu_modal .menu_modal_wrap>ul{}
.menu_modal .menu_modal_wrap>ul>li{position: relative; font-weight: 500; font-size: 40px; margin-bottom: 15px;}
.menu_modal .menu_modal_wrap>ul>li:nth-child(5) .modal_sub_menu{top: 17px;}
.menu_modal .menu_modal_wrap>ul>li:nth-child(6) .modal_sub_menu{top: 18px;}
.menu_modal .menu_modal_wrap>ul>li:nth-child(7) .modal_sub_menu{top: 20px;}
.menu_modal .menu_modal_wrap>ul>li:nth-child(8) .modal_sub_menu{top: -85px;}
.menu_modal .menu_modal_wrap>ul>li a{transition:0.2s;}
.menu_modal .menu_modal_wrap>ul>li a.on{opacity: 0.5;}
.menu_modal .menu_modal_wrap>ul>li a strong{font-size: 16px; font-weight: 300;}

.menu_modal .menu_modal_wrap>ul>li .on{opacity: 1; transform:scale(1); pointer-events: visible;}
.modal_sub_menu{background: rgba(255,255,255,0.05); opacity: 0; transform:scale(0); transition: 0.3s;  position: absolute; z-index: 9999; font-size: 17px;  left: 520px; top: 20px; padding: 15px 110px 15px 15px; border:1px solid rgba(255,255,255,0.3);}
.modal_sub_menu ul{}
.modal_sub_menu ul li{font-weight: 300; padding: 8px;}


.modal_sub_menu:hover{ border:1px solid rgba(255,2,7,0.4); box-shadow: 0px 0px 40px rgba(255,2,7,0.2);}
.modal_sub_menu:hover .btn_dot1{background: rgba(141, 99, 100, 0.8);}
.modal_sub_menu:hover .btn_dot2{background: rgba(255,2,7,0.8);}
.modal_sub_menu:hover .btn_dot3{background: rgba(255,2,7,0.8);}
.modal_sub_menu:hover .btn_dot4{background: rgba(255,2,7,0.8);}





/* 모바일 헤더 메뉴 */

.m_menu{overflow: hidden; overflow-y: scroll; transition: 1.5s; opacity: 0; top: -50%; right: -50%; transform: scale(0); pointer-events: none; position: fixed; z-index: 99; padding-top: 120px; background: #2a2a2a; width:100%; height: 100%; transition: 0.3s;}
.m_lang{}
.m_lang ul{margin: 20px 10px;}
.m_lang ul li{display: inline-block; position: relative; margin:0px 5px; }
.m_lang ul li.active{color: #c92020;}
.m_lang ul li:first-child:after{content:""; width: 1px; height: 10px; position: absolute; right: -7px; top: 7px; background: #c92020;}

.m_menu_list{}
.m_menu_list>ul{}
.m_menu_list>ul>li{border-top: 1px solid rgba(255,255,255,0.15); }
.m_menu_list>ul>li>a{position: relative; font-size: 17px; display: block; padding: 10px 15px;}
.m_menu_list>ul>li>a:after{content:"\2193"; position: absolute; right: 15px; font-size: 16px; top: 12px; opacity: 0.5;} 
.m_menu_list>ul>li:nth-child(8) a:after{display: none;}
.m_menu_list>ul>li>a.active{color: #c92020;}
.m_menu_list>ul>li>a.active:after{content:"\2191"; opacity: 1; position: absolute; right: 15px; font-size: 16px; top: 12px;}
.m_menu_list ul li ul{background: #2a2a2a; padding: 10px 0; display: none;}
.m_menu_list ul li ul li{}
.m_menu_list ul li ul li a{font-size: 14px; padding: 5px 15px; display: block; opacity: 0.7;}




/* ********************************************* *
 * 1900px
 * ********************************************* */
 @media screen and (max-width: 1900px){
/*     .menu_modal{padding: 130px 0 0 210px;}
    .menu_modal .menu_modal_wrap>ul>li{font-size: 37px;} */
   
    
}

/* ********************************************* *
 * 1600px
 * ********************************************* */
 @media screen and (max-width: 1660px){
   
    .header .header_wrap .header_left{left: 40px;}
    .header .header_wrap .header_center .header_menu>ul>li{padding: 0 20px; padding-top: 36px;}
    .header .header_wrap .header_center{margin-left: 320px;}
    .header .header_wrap .header_right{right: 40px;}
    .hr_lang{right: 140px;}
    .hm_sub.hs_2{ padding-left:325px; }
    .hm_sub.hs_3{ padding-left:400px; }
    .hm_sub.hs_4{ padding-left:570px;}
    .hm_sub.hs_5{ padding-left: 690px;}
    .hm_sub.hs_6{ padding-left: 772px;}
    .hm_sub.hs_7{ padding-left: 920px;}
    
}

/* ********************************************* *
* 1400px
* ********************************************* */
@media screen and (max-width: 1400px){

    .header .header_wrap .header_left{left: 30px;}
    .header .header_wrap .header_right{right: 30px;}
    .menu_modal{padding: 13.5% 0 0 8.5%;}
    .menu_modal .menu_modal_wrap>ul>li{font-size: 35px; margin-bottom: 13px;}
    .modal_sub_menu{left: 460px;}
    .header .header_wrap .header_left{width: 200px; left: 30px;}
    .header .header_wrap .header_center{margin-left: 250px;}
    .header .header_wrap .header_center .header_menu>ul>li{padding: 0 15px; padding-top: 37px; font-size: 16px;}
    .hr_lang .lang_wrap ul li{font-size: 17px;}
    .hm_sub.hs_1{ padding-left:100px; }
    .hm_sub.hs_2{ padding-left:240px; }
    .hm_sub.hs_3{ padding-left:305px; }
    .hm_sub.hs_4{ padding-left:480px;}
    .hm_sub.hs_5{ padding-left: 590px;}
    .hm_sub.hs_6{ padding-left: 630px;}
    .hm_sub.hs_7{ padding-left: 780px;}
    .hm_sub ul li{font-size: 15px;}
}


/* ********************************************* *
* 1200px
* ********************************************* */
@media screen and (max-width: 1200px){

    .header .header_wrap .header_center{display: none;}
    .menu_modal{display: none !important;}
    .hr_lang{display: none;}
    .m_menu.on{opacity:1; pointer-events:visible ; transform:scale(1); top: 0; right: 0; }
    .header{height: 130px;}
    .header.down{background: linear-gradient(
        to top,
        rgba(20, 20, 20, 0) 5%,
        rgba(20, 20, 20, 0.35) 15%,
        rgba(20, 20, 20, 0.6) 40%,
        rgba(20, 20, 20, 0.75) 65%,
        rgba(20, 20, 20, 1) 100%);
        
    }
}

/* ********************************************* *
* 1024px
* ********************************************* */
@media screen and (max-width: 1024px){

    
}


/* ********************************************* *
* 960px
* ********************************************* */
@media screen and (max-width: 960px){
    .header .header_wrap .header_right{top: 55px;}
    .header .header_wrap .header_left{top: 48px;}



}


/* ********************************************* *
* 768px
* ********************************************* */
@media screen and (min-width: 769px){
 

 
}
@media screen and (max-width: 768px){

    .header{height: 110px;}
    .header.down{background: linear-gradient(
        to top,
        rgba(20, 20, 20, 0) 5%,
        rgba(20, 20, 20, 0.35) 10%,
        rgba(20, 20, 20, 0.6) 30%,
        rgba(20, 20, 20, 0.75) 55%,
        rgba(20, 20, 20, 1) 100%);
    }
    .header .header_wrap .header_right{top: 45px;}
    .header .header_wrap .header_left{top: 38px;}

}


/* ********************************************* *
* 640px
* ********************************************* */
@media screen and (max-width: 640px){

    .menu_modal{padding: 140px 0 0 60px;}
}


/* ********************************************* *
* 500px
* ********************************************* */
@media screen and (max-width: 500px){

    .menu_modal{padding: 130px 0 0 40px;}
    .menu_modal .menu_modal_wrap>ul>li{font-size: 30px;}
    .header .header_wrap .header_left{width: 170px; top: 28px; left: 20px;}
    .header .header_wrap .header_right{top: 45px; top: 30px; right: 20px;}
    .footer_left_top>ul>li{font-size: 14px;}
    .header{height: 90px;}
    .header .header_wrap .header_right .header_menu_btn .menu_btn_img{width: 13px; height: 13px;}
    .header .header_wrap .header_right .header_menu_btn span{vertical-align: 2px; margin-right: 8px;}
    
}

/* ********************************************* *
* 400px
* ********************************************* */
@media screen and (max-width: 400px){
    .header .header_wrap .header_left{left: 20px;}
    .header .header_wrap .header_right{right: 20px;}
    .footer_left_top>ul>li{font-size: 13px;}

}