.header{height: 100px; position: relative; z-index: 999999;position: fixed; width: 100%;}
.head_wrap{max-width: 1700px; margin: 0 auto; display: flex; justify-content: space-between; position: relative; align-items: center; height: 100%;}
.head_wrap .logo{width: 250px;}
.head_wrap .logo a{display: block;width: 100%; height: 100%;}

.head_right_wrap{max-width: 1100px; width: 90%; display: flex; justify-content: space-between;}

.header.on{ background-color: rgba(0, 0, 0, 0.8);}

.gnb{height: 100%; max-width: 800px; width: 90%;}
.gnb .main_menu{display: flex; height: 100%; align-items: center;}
.gnb .main_menu .gnb-1dep{margin: 0 5px; text-align: center; height: 80px; line-height: 80px; position: relative; flex: 1 1 25%;}
.gnb .main_menu .gnb-1dep::after{content: ""; background-color: var(--main-color); width: 0; position: absolute; left: 0; bottom: 0; transition: all .5s; height: 3px;}
.gnb .main_menu .gnb-1dep> a{display: block; width: 100%; height: 100%; font-size: 20px; position: relative; color: #fff;}
.gnb .main_menu .gnb-1dep> a::after{content: "";
    position: absolute;
    bottom: 0px;
    left: 50%;
    width: 10px;
    height: 10px;
    background-color: var(--main-color);
    opacity: 0;
    transform: translateX(-50%);
    transition: all .3s ease-in-out;}
    .gnb .main_menu .gnb-1dep:hover >a::after{opacity: 1;}
.gnb .main_menu .gnb-1dep .gnb-2dep{height: auto; padding: 30px 20px; display: none; background-color: rgba(0, 0, 0, 0.8); width: 275px; position: absolute; left: 50%; transform: translateX(-50%);     box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px; top: 90px;}
.gnb .main_menu .gnb-1dep .gnb-2dep li{margin: 15px 0; position: relative;}
.gnb .main_menu .gnb-1dep .gnb-2dep li a{display: block; width: 100%; height: 100%; font-size: 20px; text-align: center;line-height: 1.5; color: #fff;}


.gnb .main_menu .gnb-1dep .gnb-2dep li .depth03{display:none; width: 360px; position:absolute; top: 0; right:-380px; background: #fff; padding: 50px 20px;     box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;}
.gnb .main_menu .gnb-1dep .gnb-2dep li .depth03 li{}
.gnb .main_menu .gnb-1dep .gnb-2dep li .depth03 li a{}
.gnb .main_menu .gnb-1dep .gnb-2dep li .depth03 li a:hover{color: var(--main-color);}


/*언어*/
.head_wrap .main_right{width: 15%; display: flex; justify-content: space-between; align-items: center;}
.head_wrap .lang{width: 110px; height: 40px;text-align: center; border: 1px solid #fff; border-radius: 20px;}
.head_wrap .lang .lang_btn{background-color: transparent; border: none; position: relative; height: 100%; width: 100%; display: flex; align-items: center; justify-content: space-between;padding: 5px;}
.head_wrap .lang .lang_btn::before{content: ""; width: 80%; height: 1px; background-color: #ccc; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; display: none;}
.head_wrap  .lang .lang_btn img{ }
.head_wrap  .lang .lang_btn span{  font-size: 14px;color: #fff;   font-weight: 400;}
.head_wrap  .lang .lang_btn i{font-size: 15px; color: #fff;}
.head_wrap .lang .lang_list{ text-align: left;  display: none;  width: 110px; padding: 10px; background-color:#fff; border-radius:0 0 15px 15px; border: 1px solid #666; border-top: none; transform: translateX(-1px);}
.head_wrap  .lang .lang_list li{line-height: 30px; height: 30px; font-size: 14px;}
.head_wrap  .lang .lang_list li a{display: block; color: #666;}
.head_wrap  .lang .lang_list li a.on{color: #000;}

.lang.on{background-color:#fff; border-radius:15px 15px 0 0 ; border: 1px solid #666;border-bottom: none;}
.lang.on .lang_btn::before{display: block;}
.lang.on .lang_btn span{color: #000;}
.lang.on .lang_btn i{color: #000;}

/*전체메뉴*/
.head_wrap .all_menu_wrap{width: 30px;  cursor: pointer;}
.head_wrap .all_menu_wrap .all_menu_btn button{width: 100%; border: none; background: none; }
.head_wrap .all_menu_wrap .all_menu_btn span{background-color: #fff; width: 100%; height: 2px; position: relative; display: block;}
.head_wrap .all_menu_wrap .all_menu_btn span::before{content: ""; width: 100%; height: 2px; background-color: #fff; position: absolute; top: -8px; right: 0; transition: all .3s;}
.head_wrap .all_menu_wrap .all_menu_btn span::after{content: ""; width: 50%; height: 2px; background-color: #fff; position: absolute; bottom: -8px; right: 0; transition: all .3s;}
.head_wrap .all_menu_wrap .all_menu_btn:hover span::after{width: 100%;}
.head_wrap .all_menu_wrap .all_menu_btn:hover span::before{width: 100%;}


.all_menu_list.active{transition: all 0.7s ease-in-out; right: 0; z-index: 99999999; display: block;}
.all_menu_list{position: fixed; width: 100%; height: 100vh; z-index:1000; 
    /* background: url(../img/site_map.jpg) no-repeat;
    background-position: center;
	background-size: cover; */
    background-color: rgba(0, 0, 0, 0.8);
    transition: all 0.7s ease-in-out;
     top: 0; right: -100%;  bottom: 0; backdrop-filter: blur(8px);  }

     .close_btn{width: 5%; display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; z-index: 9999; top: 40px; right: 10px; text-align: center;}
     .close_btn button{width: 50%; border: none; background: none;}
     .close_btn span{border: 1px solid #fff; display: block; margin: 5px 0; width: 70%;}
     .close_btn span:nth-child(1){transform: rotate(45deg) translate(5px, 5px)}
     .close_btn span:nth-child(2){transform: rotate(-45deg);}
/*sitemap*/
.site_map{display: flex; flex-direction: column; align-items: center; width: 100%; height: 100%; justify-content: center; position: relative;}
.site_map::before{content: "ALEUM TECH"; font-weight: 900;color: rgba(255, 255, 255, 0.1); font-size: 24rem;position: absolute;left: 0; bottom: -55px;display: block; font-family: var(--font-play); letter-spacing: -7px; }

.site_map_menu >ul{max-width: 1540px; width: 100%; display: flex; }
.site_map_menu >ul> li.gnb-1dep{width:calc(100% / 4); text-align: center; }
.site_map_menu >ul> li.gnb-1dep> a{display: block; padding-bottom: 40px; color: rgba(255,255,255,1); line-height: 1.4; font-size: 30px; transition: all .3s; border-bottom: 1px solid rgba(255,255,255,0.3); position: relative; font-weight: 600;}
.site_map_menu >ul> li.main_menu1> a::before{content: "01"; font-weight: 900; color: rgba(255, 255, 255, 0.3); font-size: 8rem; position: absolute; left: 80px; top: -50px; display: block; font-family: var(--font-play); letter-spacing: -7px; }
.site_map_menu >ul> li.main_menu2> a::before{content: "02"; font-weight: 900; color: rgba(255, 255, 255, 0.3); font-size: 8rem; position: absolute; left: 80px; top: -50px; display: block; font-family: var(--font-play); letter-spacing: -3px; }
.site_map_menu >ul> li.main_menu3> a::before{content: "03"; font-weight: 900; color: rgba(255, 255, 255, 0.3); font-size: 8rem; position: absolute; left: 80px; top: -50px; display: block; font-family: var(--font-play); letter-spacing: -3px; }
.site_map_menu >ul> li.main_menu4> a::before{content: "04"; font-weight: 900; color: rgba(255, 255, 255, 0.3); font-size: 8rem; position: absolute; left: 80px; top: -50px; display: block; font-family: var(--font-play); letter-spacing: -3px; }
.site_map_menu >ul> li.main_menu5> a::before{content: "05"; font-weight: 900; color: rgba(255, 255, 255, 0.3); font-size: 8rem; position: absolute; left: 80px; top: -50px; display: block; font-family: var(--font-play); letter-spacing: -3px; }

.site_map_menu >ul .gnb-1dep:hover >a{border-bottom: 1px solid rgba(255,255,255,1);}
.site_map_menu ul li:hover p{border-bottom: 1px solid rgba(255,255,255,1);}
.site_map_menu ul li .gnb-2dep li a:hover{color: rgba(255,255,255,1); }
.site_map_menu ul li .gnb-2dep li a i{display: none;}
.site_map_menu ul li .gnb-2dep{display: block; }
.site_map_menu ul li .gnb-2dep{flex-direction: column; justify-content: center; margin: 40px auto 0;}
.site_map_menu ul li .gnb-2dep li{width: 100%;}
.site_map_menu ul li .gnb-2dep li a{    display: block; width: 100%; height: 100%;padding: 10px;color: rgba(255, 255, 255, 0.7);line-height: 1.4;font-size: 20px;transition: all .3s; }
.site_map_menu ul li .gnb-2dep li a span{}



.all_menu_list .depth03{display: none;}



/*모바일head*/
#header.mobile{background-color: #fff; border-bottom: 1px solid #ccc;}
#header.mobile .logo a img.white{display: none;}
#header.mobile .logo a img.color{display: block;}
.mo_wrap{display: none;}

.head_wrap .m_btn{vertical-align: top; text-align: center; z-index: 200; display: none;}
.head_wrap .m_btn span{position:relative; display:inline-block; width: 30px; height: 2px; background: var(--main-color); transition:0.4s}
.head_wrap .m_btn span::before{content:""; position:absolute; top: -8px; left: 0; width: 100%; height: 2px; background: var(--main-color); transition:0.4s}
.head_wrap .m_btn span::after{content:""; position:absolute; top: 8px; left: 0; width: 100%; height: 2px; background: var(--main-color); transition:0.4s}

.m_btn.on{}
.m_btn.on span{background: transparent !important;}
.m_btn.on span::before{position:absolute; top: 0; transform:rotate(45deg); background-color: #fff;}
.m_btn.on span::after{position:absolute; top: 0; transform:rotate(-45deg); background-color: #fff;}

.head_wrap .m_menu{display:none; position:fixed; top: 0; right: -100%; width: 100%; height: 100%; max-width:640px; 
    /* background: linear-gradient(135deg, #01088A, #369DB5); */
    background-image: linear-gradient(to bottom, var(--main-color) 0%, var(--main-color) 100%);
     z-index: 100; box-sizing:border-box; transition:0.4s}
.head_wrap .m_menu .m_logo{position:relative; display:inline-block; vertical-align:middle; width: 150px; height: 60px; background:url(../img/logo_color.png) 50% 50% no-repeat; background-size:contain; margin: 25px 0;}
.head_wrap .m_menu .m_lang{ margin-top: 80px; display: flex; text-align: center; font-size: 22px;}
.head_wrap .m_menu .m_lang a{color: #aaa; height: 50px; line-height: 50px; position: relative; width: calc(100% / 2 - 10px); margin: 0 5px; border: 1px solid rgba(255, 255, 255, 0.5); font-size: 16px;}
.head_wrap .m_menu .m_lang a.active{color: var(--main-color); background-color: #fff;}

.head_wrap .m_menu > ul{padding-top: 50px;}
.head_wrap .m_menu > ul > li{padding-left: 20px; }
.head_wrap .m_menu > ul > li > a{position:relative; display:inline-block; width: 100%; font-size:18px; color: #fff; padding: 14px 0; box-sizing:border-box; line-height:1.2em;  font-weight: 600;}
.head_wrap .m_menu > ul > li > a::before{background-color: #fff;
    content: '';
    width: 15px;
    height: 1px;
    position: absolute;
    right: 2%;
    top: 50%;
    transition: 0.3s ease-in-out;
    transform: translate(-50%, -50%);}
    .head_wrap .m_menu > ul > li > a::after{
        background-color: #fff;
        content: '';
        width: 15px;
        height: 1px;
        position: absolute;
        right: 2%;
        top: 50%;
        transition: 0.3s ease-in-out;
        transform: translate(-50%, -50%) rotate(90deg);
    }

.head_wrap .m_menu > ul > li > ul{display:none; padding: 10px 0 10px 25px;} 
.head_wrap .m_menu > ul > li > ul > li{}
.head_wrap .m_menu > ul > li > ul > li > a{position:relative; display:inline-block; width: 100%; font-size:16px; color: #222;  box-sizing:border-box; padding: 10px 0;  }
/* .head .m_menu > ul > li > ul > li > a i{position:absolute; right: 53px; top: 19px; display:inline-block; width: 6px; height: 6px; background:url(../img/icon_arrowG.png) 50% 50% no-repeat; background-size:cover} */

.head_wrap .m_menu.on{right: 0; display:block;}
.head_wrap .m_menu > ul > li.on{background: #f5f5f5;}
.head_wrap .m_menu > ul > li.on > a{color: var(--main-color);}

.head_wrap .m_menu > ul > li.on > a::before{background-color: var(--main-color);}
.head_wrap .m_menu > ul > li.on > a::after{transform: translate(-50%, -50%); background-color: var(--main-color);}
.head_wrap .m_menu > ul > li > ul > li.on a{color: var(--main-color);}
.head_wrap .m_btn.on span::before {background-color: #fff !important;}
.head_wrap .m_btn.on span::after {background-color: #fff !important;}

.head_wrap .m_menu .depth03{padding-left: 20px;}
.head_wrap .m_menu .depth03 li{font-size: 15px; margin: 10px 0;}





/*****************footer**********************/
.footer{background-color: #9e9e9e; }
.footer .ft_top{border-bottom: 1px solid #ccc; padding: 35px 0;}
.footer .ft_top .main_inner{display: flex; justify-content: space-between;}
.footer .ft_top .main_inner li{}
.footer .ft_top .main_inner .family_site{width: 200px; height: 40px;}
.footer .ft_top .main_inner .family_site button{border: 1px solid #fff; display: flex; justify-content: space-around; width: 100%; height: 100%; align-items: center; background-color: transparent;}
.footer .ft_top .main_inner .family_site button span{font-family: 'Cairo', sans-serif; font-size:16px ; color: #fff;}
.footer .ft_top .main_inner .family_site button i{font-size:16px ; color: #fff;}
.footer .ft_top .main_inner .family_site .family_site_list{background-color: #f7f7f7; display: none; position: relative;z-index: 10;}
.footer .ft_top .main_inner .family_site .family_site_list li{ font-size: 15px; }
.footer .ft_top .main_inner .family_site .family_site_list li a{display: block; padding: 10px;}
.footer .ft_top .main_inner .family_site .family_site_list li:hover{background-color: #ccc;}

.footer .ft_bot{padding: 50px 0; }
.footer .ft_bot .ft_menu{display: flex; margin-bottom: 20px;}
.footer .ft_bot .ft_menu li{}
.footer .ft_bot .ft_menu li a{font-size: 15px; color: #fff; padding: 0 10px; position: relative;}
.footer .ft_bot .ft_menu li a::after{content: ""; width: 1px; height: 15px; background-color: #fff; position: absolute; right: 0; top: 2px;}
.footer .ft_bot .ft_menu li:last-child a::after{display: none;}
.footer .ft_bot .ft_menu li:first-child a{color: #fff; font-weight: 600;}
.footer .ft_bot .ft_info{display: flex; justify-content: space-between;}
.footer .ft_bot .ft_info li{}
.footer .ft_bot .ft_info li div{margin: 5px 0;}
.footer .ft_bot .ft_info li div span{font-size: 15px; color: #fff; padding: 0 10px; position: relative;}
.footer .ft_bot .ft_info li div span::after{content: ""; width: 1px; height: 15px; background-color: #fff; position: absolute; right: 0; top: 2px;}
.footer .ft_bot .ft_info li div span:last-child::after{display: none;}
.footer .ft_bot .ft_info .copy{}
.footer .ft_bot .ft_info .copy p{font-size: 15px; color: #fff;}
.footer .ft_bot .ft_info .copy p span{font-weight: 600;}

/*footer 개인정보처리방침*/
.privacy .pop_wrap{width: 800px; }
.layerpopup{display: none; position:fixed; top: 0; left:0;right:0;bottom:0;background:rgba(0,0,0,0.4);z-index:999999999999;overflow:auto;}
.layerpopup .pop_wrap{margin:70px auto 50px;padding:20px;background:#fff;box-sizing:border-box;border:1px solid #c1c1c1;position:relative;  height: 800px;}
.layerpopup .pop_wrap .pop_tit{font-size: 25px; text-align: center;margin: 50px 0 ; color: var(--main-color); font-weight: 600;}
.layerpopup .pop_wrap .pop_content{border: 1px solid #ddd; margin-bottom: 20px; padding: 20px; background-color: #f7f7f7;}
.layerpopup .pop_wrap .pop_content h3{font-size: 18px; font-weight: 500; margin-bottom: 20px;}
.layerpopup .pop_wrap .pop_content p{font-size: 16px;line-height: 1.2; word-break: keep-all;}

.layerpopup .pop_wrap .pop_close{position: absolute; right: 30px; top: 30px;}
.layerpopup .pop_wrap .pop_close i{color: var(--main-color); font-size: 30px; transition: all .5s;}
.layerpopup .pop_wrap .pop_close:hover i{transform: rotate(360deg);}
.privacy .pop_wrap textarea{width: 100%;height: 500px;background-color: #f4f4f4; font-size: 16px; word-break: keep-all;}


/*************************반응형*************************************/
@media all and (max-width:1540px){
    /*header*/
    #header .head_wrap{width: 90%;}

    
}
@media all and (max-width:1280px){
    /*header*/
    #header .head_wrap{width: 95%;}
    #header .head_wrap .menu_wrap{display: none;}
    .head_wrap .m_btn{position:relative; display:inline-block; width: 40px; height: 40px; vertical-align: middle;  cursor: pointer; transition:0.4s}
	.head_wrap .m_btn.on{margin-left: 0;}
	.head_wrap .m_btn span{margin: 19px 0;}
    .head_wrap .m_menu{display:block; }

    /*footer*/
    .footer .ft_bot .ft_info{flex-direction: column;}
    .footer .ft_bot .ft_info .copy{margin-top: 15px;}
    .footer .ft_bot .ft_info li div span:first-child{padding-left: 0;}
    .privacy .pop_wrap{width: 90%;}
    .layerpopup .pop_wrap .pop_tit{font-size: 20px;}
    .layerpopup .pop_wrap .pop_close i{font-size: 25px;}
}
@media all and (max-width:1024px){
    
}
@media all and (max-width:800px){
    
}
@media all and (max-width:500px){
    /*header*/
    #header{height: 60px;}
    #header .head_wrap{width: 90%; height: 100%;}
    .head_wrap .pc_wrap{height: 60px;}
    #header .head_wrap h1 a img{width: 200px;}
    .head_wrap .m_menu > ul{padding-top: 50px;}
    .head_wrap .m_menu > ul > li > a{font-size: 16px;}
    .head_wrap .m_menu > ul > li > ul > li > a{font-size: 15px;}

    /*footer*/
    .footer .ft_top .main_inner li img{width: 180px;}
    .footer .ft_top .main_inner{flex-direction: column;}
    .footer .ft_top .main_inner .family_site{margin-top: 20px;}
    .footer .ft_bot .ft_info li div span{display: block; padding: 0; line-height: 1.5;}
    .footer .ft_bot .ft_info li div span::after{display: none;}
    .layerpopup .pop_wrap .pop_tit{font-size: 18px;}
    .layerpopup .pop_wrap .pop_close i{font-size: 22px;}
    .privacy .pop_wrap textarea{font-size: 14px;}
}