/*header*/
#header{ z-index:999; position:fixed; top:0; left:0;  width:100%; padding:0 6rem; text-align:right; font-size:0;   background:rgba(0,0,0,1); 
    -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s;
}
#header .hd_logo{ z-index:11; position:absolute; top:0; left:6rem; height:10rem; width:18.1rem; margin-right:8rem;  }
#header .hd_logo a{ display:block; height:100%; font-size:0; background:url('../_img/comm/hd_logo.png') no-repeat center / 100%;
    -webkit-transition:all .3s; -moz-transition:all .3s; transition:all .3s;
}
#header:hover .hd_logo a,
#header.scroll .hd_logo a{ background-image:url('../_img/comm/hd_logo.png'); }
#header.open .hd_logo a{ background-image:url('../_img/comm/hd_logo.png'); }

#header:hover,
#header.scroll{ background:rgba(0,0,0,1);}
#header .inner_area {text-align:center;}
@media all and (max-width:1750px) {
    #header{ padding:0;}
    #header .hd_logo{ left:1.5rem; }
}
@media all and (max-width:1199.98px) {
    #header .hd_logo{ height:8rem; width:15rem; }
}
@media all and (max-width:991.98px) {
    #header .inner_area{ height:8rem;}
    #header.open .hd_logo a{ background-image:url('../_img/comm/hd_logo_b.png'); }
}


/*gnb*/
#gnb{ display:inline-block; padding-right:10rem;}
#gnb .dp1-box > li{ display:inline-block; vertical-align: top; }
#gnb .dp2-box{ display:none;  padding:2rem; }
#gnb .dp1-box > li > a{ display:block; padding:0 5rem; }
#gnb .dp1-box > li > a span{ position:relative; display:block; font-size:1.8rem; line-height:10rem; font-weight:600; color:#fff;
    -webkit-transition:all .3s; -moz-transition:all .3s; transition:all .3s;
}
#gnb .dp1-box > li > a span:after{ content:""; opacity:0; position:absolute; bottom:0; left:0; width:100%; height:5px; background:var(--blue);  
    -webkit-transition:all .3s; -moz-transition:all .3s; transition:all .3s;
}
#gnb .dp2-box > li > a{ display:block; padding:.75rem 0; font-size:1.6rem; color:#888; text-align:center;  
    -webkit-transition:all .3s; -moz-transition:all .3s; transition:all .3s;
}

#header:hover #gnb .dp1-box > li > a span,
#header.scroll #gnb .dp1-box > li > a span{ color:#fff;}
#gnb .dp1-box > li:hover > a span:after,
#gnb .dp1-box > li.opened > a span:after{ opacity:1;}
#gnb .dp1-box > li.opened > a span:after{ background:#fff; }
#gnb .dp1-box > li:hover > a span:after,
#header.scroll #gnb .dp1-box > li.opened > a span:after{ background:var(--blue); }
#gnb .dp2-box > li > a:hover{ color:#fff;}

@media all and (max-width:1199.98px) {
    #gnb{ padding-right:9rem;}
    #gnb .dp1-box > li > a{ padding:0 3rem;}
    #gnb .dp1-box > li > a span{ line-height:8rem; }
    #gnb .dp2-box > li > a{ font-size:1.5rem; line-height:4.5rem;}
} 

@media all and (max-width:991.98px) {
    #gnb{ display:none;}
}

/*all btn*/
#all_btn{ opacity:1 !important; z-index:11; position:absolute; top:0; right:0; background:var(--blue); width:12rem; height:10rem; text-align:center; margin-left:auto; font-size:0; outline:none; }
#all_btn i{ font-size:3rem; color:#fff; 
    -webkit-transition:all .3s; -moz-transition:all .3s; transition:all .3s;
}

#header:hover #all_btn i,
#header.scroll #all_btn i{ color:#fff; }
#header.open #all_btn i{ color:#fff;}

@media all and (max-width:1199.98px) {
    #all_btn{ height:8rem; width:8rem;}
}
@media all and (max-width:991.98px) {
	#all_btn{ background:rgba(255,255,255,0); }
    #header.open #all_btn i{ color:#000;}
}


/*all menu*/
#all_menu{ opacity:0; position:fixed; top:0; left:0;  width:100%; height:100%; padding-top:14rem; background:var(--blue); text-align:left; 
    -webkit-transform:translateY(-100%); -moz-transform:translateY(-100%); transform:translateY(-100%);
    -webkit-transition:all .7s; -moz-transition:all .7s; transition:all .7s;
}
#all_menu > div{  display:flex; flex-wrap:wrap; align-items:center;  height:100%;  padding-bottom:5rem;    overflow-y:auto;  }
#all_menu nav .dp1-box{ display:flex; flex-wrap:wrap; }
#all_menu nav .dp1-box > li{ opacity:0;  width:20%; 
    -webkit-transform:translateY(3rem); -moz-transform:translateY(3rem); transform:translateY(3rem);
    -webkit-transition:all .7s; -moz-transition:all .7s; transition:all .7s;
}
#all_menu nav .dp1-box > li > a{ position:relative; display:block; padding-bottom:2rem; font-size:2.4rem; font-weight:700; color:#fff; border-bottom:1px solid rgba(255,255,255,.3);  }
#all_menu nav .dp1-box > li > a:after{ content:""; position:absolute; bottom:-1px; left:0; width:5rem; height:2px; background:#fff; }
#all_menu nav .dp2-box{ margin-top:4rem;}
#all_menu nav .dp2-box > li{ margin-bottom:2rem;}
#all_menu nav .dp2-box > li:last-child{ margin-bottom:0;}
#all_menu nav .dp2-box > li > a{ opacity:.4; display:block; font-size:1.8rem; color:#fff; 
    -webkit-transition:all .3s; -moz-transition:all .3s; transition:all .3s;
}
#all_menu nav .dp2-box > li > a:hover{ opacity:1;}

#all_menu.open{ opacity:1; 
    -webkit-transform:translateY(0%); -moz-transform:translateY(0%); transform:translateY(0%); 
}
#all_menu.open nav .dp1-box > li{ opacity:1; 
    -webkit-transform:translateY(0%); -moz-transform:translateY(0%); transform:translateY(0%);
}
#all_menu.open nav .dp1-box > li:nth-child(1){ -webkit-transition-delay:.7s; -moz-transition-delay:.7s; transition-delay:.7s; }
#all_menu.open nav .dp1-box > li:nth-child(2){ -webkit-transition-delay:.8s; -moz-transition-delay:.8s; transition-delay:.8s; }
#all_menu.open nav .dp1-box > li:nth-child(3){ -webkit-transition-delay:.9s; -moz-transition-delay:.9s; transition-delay:.9s; }
#all_menu.open nav .dp1-box > li:nth-child(4){ -webkit-transition-delay:1s; -moz-transition-delay:1s; transition-delay:1s; }
#all_menu.open nav .dp1-box > li:nth-child(5){ -webkit-transition-delay:1.1s; -moz-transition-delay:1.1s; transition-delay:1.1s; }


@media all and (max-width:1199.98px) {
    #all_menu{ padding-top:10rem;}
    #all_menu nav{ padding:0;}
}

@media all and (max-width:991.98px) {
    #all_menu{  padding-top:8rem;  background:#fff; 
        -webkit-transform:translateX(100%); -moz-transform:translateX(100%); transform:translateX(100%); 
    }
    #all_menu > div{ display:block;}
    #all_menu nav{ max-width:100% !important; border-top:1px solid #eee;}
    #all_menu nav .dp1-box > li{ opacity:1; width:100%; border-bottom:1px solid #eee; 
        -webkit-transform:translateY(0%); -moz-transform:translateY(0%); transform:translateY(0%);
    }
    #all_menu nav .dp1-box > li > a{ position:relative; padding:1.5rem 15px; color:#000; font-size:2rem;}
    #all_menu nav .dp1-box > li > a:after{ content:none;}
    #all_menu nav .dp1-box > li > a:before{ content:"\e942"; position:absolute; top:50%; right:15px; font-family: xeicon!important; font-size:2.5rem;
        -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); transform:translateY(-50%);
        -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s;
    }
    #all_menu nav .dp2-box{ display:none; margin-top:0; padding:1rem 0; border-top:1px solid #eee; background:#f7f7f7;}
    #all_menu nav .dp2-box > li{ margin-bottom:0;}
    #all_menu nav .dp2-box > li > a{ padding:1rem 15px; color:#000; font-size:1.7rem;  }

    #all_menu.open{ opacity:1; 
        -webkit-transform:translateX(0%); -moz-transform:translateX(0%); transform:translateX(0%); 
    }
    #all_menu .dp1-box > li > a.on:before{ 
        -webkit-transform:translateY(-50%) rotate(180deg); -moz-transform:translateY(-50%) rotate(180deg); transform:translateY(-50%) rotate(180deg);
    }
    
}