@charset "utf-8";

#wrap {width:100%; height: 100%; overflow: hidden; position:relative}


#header {position:absolute; width:100%; height: 108px; z-index: 100;}
#header .header_top { height: 100%;isolation: isolate; width:90%; margin:0 auto; position:relative; padding-top: 20px; }
#header .header_top:after{content: '';    position: absolute;    background: #fff;    z-index: -1;    inset: 0;    opacity: 0.4;}
#header .header_top .logo{position:absolute; left:0; top:20px; width:173px; height: 64px;} 
#header .header_top .logo img{width: 100%;}

/* gnb */
.gnb{z-index:100; position:relative; box-sizing:border-box;   }
.gnb .gnb_box{position:relative; width:80%; margin: 0 auto; }

.gnb .submenu{position:absolute;left:0;top:95px;border-top:1px solid #2053a6; }
.gnb_ul{width:100%;margin:0 auto; height: 100%;}
.gnb_ul>li{float:left;display:inline-block; }
.gnb_ul>li:first-child{margin-left:130px}
.gnb_ul>li>a{position:relative;display:block; width:125px; text-align:center;height:55px; line-height:55px;font-size:20px;letter-spacing:0.025em;color:#000; font-weight: 600;}
.gnb_ul>li>a.select {color:#1D62EC; position:relative}
.gnb_ul>li>a.select:after{position:absolute; content: '\ead5'; font-family: 'xeicon'; top:-25px; left: 44%; font-size: 1.2rem;}
.gnb_ul>li>a:hover:after{position:absolute; content: '\ead5'; font-family: 'xeicon'; top:-25px; left: 44%; font-size: 1.2rem;}

.gnb_ul>li .subdepth{display:none;position:absolute; top:50px;border-top:1px solid #f2f2f2; -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.175);
	box-shadow: 0 2px 5px rgba(0,0,0,0.175);background-color:#000;padding:10px 30px; border-radius: 8px;}
.gnb_ul>li .subdepth>div{position:relative;margin:0 auto; }
.gnb_ul>li.active>a, .gnb_ul>li.on>a, .gnb_ul>li a:hover, .gnb_ul>li a:focus{color:#1D62EC;transition: all 0.8s ease;}
.gnb_ul>li.active .pointer{display:block}
.gnb_ul>li.active .subdepth .list>li em a:hover, .gnb_ul>li.active .subdepth .list>li em a:focus, .gnb_ul>li.active .subdepth .list>li ul a:hover, .gnb_ul>li.active .subdepth .list>li ul a:focus
{color:#1D62EC;}



/* SubMenu */


.subdepth .list_wrap{min-height:35px;margin-left:5px; padding-left:0px; position:relative;}
.subdepth .list{position:relative; }
.subdepth .list, .subdepth .list>li ul{display:inline-block;vertical-align:middle; }
.subdepth .list > li{ float:left; display:inline-block; position:relative;font-weight:nomal;letter-spacing:-0.025em; margin: 0 25px; line-height: 30px;  }
.subdepth .list > li:after{content:'';position:absolute;bottom: 0px;left:0;width:0;height: 13px;background: rgba(1,92,184,1);transition: all 0.5s ease-out;opacity: 0.2;border-radius: 10px;}


.subdepth .list>li {display:block; text-align:center; box-sizing:border-box;  }

.subdepth .list>li a{display:block; font-size:17px;color:#fff;  position:relative;  font-weight: 600; }
.subdepth .list>li a:after{ position:absolute; content:''; width:0px; height:3px; background:#fff;transition:all .25s ease; bottom:-15px; left:0px; border-radius: 30px; }
.subdepth .list>li a:hover:after{width:100%;}
.subdepth .list>li a:hover{color:#1D62EC; background: #fff; border-radius: 30px; padding: 0 20px;}





#header #allmenu {width: 100%;    position: relative;  }
#header #allmenu.show {right:0}
#header .allmenuWrap{position: absolute; right: 0 ; height: 100vh; ;z-index: 999;top:0;/* display: none; */}

.AllBtn_area{position:absolute; right:5rem; top: -10rem;  transition: 0.3s;}
.AllBtn_area .AllBtn{ text-align: center; position:absolute; right:40%; width:50px; height: 50px; line-height: 50px; top: 20px; background: #f2f2f2; border-radius: 50%;   }
.AllBtn_area .AllBtn:hover{background: #533c32; color:#fff; width: 75px; border-radius: 30px;}
.AllBtn_area .AllBtn i {font-size: 2.2rem;}
.clsBtn{color:#fff; font-size: 2.3rem; font-weight: bold;  position:absolute; right: 25px; top: 1.75rem; 
    border:0; line-height: 50px; width:50px; height: 50px; font-family: 'xeicon' !important; background: transparent;}
    
    .close-container{position: relative;margin: auto;width: 50px;height: 50px;cursor: pointer;}
    .leftright{height: 4px;width: 50px;position: absolute;margin-top: 24px;background-color: #fff;border-radius: 2px;transform: rotate(45deg);
        transition: all .3s ease-in;}      
    .rightleft{height: 4px;width: 50px;position: absolute;margin-top: 24px;background-color:#fff;border-radius: 2px;transform: rotate(-45deg);transition: all .3s ease-in;}      
      label{color: white;font-size: 1.0rem;text-transform: uppercase;letter-spacing: 2px;transition: all .3s ease-in;opacity: 0;}
    .close{margin: 40px 0px 0 -20px;position: absolute;}      
    .close-container:hover .leftright{transform: rotate(-45deg);background-color:#fff;}
    .close-container:hover .rightleft{transform: rotate(45deg);background-color: #fff;}
    .close-container:hover label{opacity: 1;}    
      
/* 전체메뉴 */
.quickBox {visibility: hidden;   position:absolute; transition: 0.5s; right:-35rem; top:-12rem; padding:2rem 0rem 2rem 1rem; height: 100vh; 
    background: #745344; width: 35rem;  ; z-index: 9999; color:#fff; padding: 5px;}
    .allbg{    position: fixed;    z-index: -1;    left: 0;    top: 0;    width: 100%;    height: 100%; background: rgba(0,0,0,0.3);    }
.quickBox .box_inbox{height: 100%; overflow-y: auto; padding-right:10px;   z-index: 99999;}







.quickBox .box_inbox::-webkit-scrollbar {    width: 7px;}
.quickBox .box_inbox::-webkit-scrollbar-track {     background-color: #fff;}
.quickBox .box_inbox::-webkit-scrollbar-thumb {     background-color: #DFD9D4;}
.quickBox .box_inbox::-webkit-scrollbar-button {    display: none;}
/* hover 효과 */
.quickBox .box_inbox::-webkit-scrollbar-thumb:hover {    background-color: #9A775A;    transition: all 0.2s; }
/* 코너에 라운드 효과 */
.quickBox .box_inbox::-webkit-scrollbar-track,.quickBox .box_inbox::-webkit-scrollbar-thumb {    border-radius: 5px;}



.sideall_menu {margin:60px 20px 0}
.sideall_menu > dl {display: block; margin-bottom: 30px;}
.sideall_menu > dl a {color: #fff;}
.sideall_menu > dl > dt a{font-size: 2rem; padding-bottom: 10px; display: inline-block;}
.sideall_menu > dl > dd a{opacity: .6; font-size: 1.5rem; display: inline-block; position:relative}
.sideall_menu > dl > dd a:hover{opacity: 1;}
.sideall_menu > dl > dd a:after{ position:absolute; content:''; width:0px; height:1px; background:#fff;transition:all .25s ease; bottom:-0px; left:0px }
.sideall_menu > dl > dd a:hover:after{width:100%;}
.solution_btn {background: #A79C97; border:0; width:100%;color:#fff; text-align: left;   border-radius: 3px; padding: 8px 15px; position:relative; font-size: 1.6rem; position:relative;}
.solution_btn:hover{text-decoration: underline;}
.solution_btn i {position:absolute; right:15px; top:9px}


/*전체메뉴 */
.allmenuWrap.active .quickBox{right:0; visibility:visible; z-index: 9999; top:-11rem  }
.allmenuWrap.active .closeBtn_area{right: -4.5rem; }

.top_shortcuts{position:absolute; right:8%; bottom:40%}
.top_shortcuts a {color:#533C32; font-size: 1.6rem; font-weight: 500; }
.top_shortcuts a:hover{text-decoration: underline;}
.top_shortcuts i{vertical-align: middle; margin-bottom: 3px;}
.top_shortcuts button{font-size: 1.5rem;}

/* footer */
#footer { min-height: 150px; border-top:1px solid #ccc ;}
#footer .footer_inner {padding:2% 7.5%; position:relative; background: #fff;}
#footer .footer_inner .footer_logo {position:absolute; right:0; top:20px}
#footer .footer_inner .footer_logo img {width: 50%;}
.copyright {font-size: 1.5rem; margin-top: 5px;}

#mfooter { min-height: 150px; border-top:0;}
#mfooter .footer_inner {padding:2% 7.5%; position:relative;  color:#b4b4b4; font-size: 1.5rem;}
#mfooter .footer_inner .footer_logo {position:absolute; right:0; top:20px}
#mfooter .footer_inner .footer_logo img {width: 50%;}


/* sub top 버튼 */
#top_btn{position:fixed;right:1.5%;bottom:20px;display:none;z-index:999;background: #F5F3F1;border-radius:8px;
    width: 50px;height: 70px;text-align: center;line-height: 15px;color: #000;font-size: 1.1rem;font-weight: 200; z-index: 99999;}
#top_btn i{text-align: center;display: block;padding-top: 18px;font-size: 1.8rem;}




@media (max-width:1400px){

#wrap {min-width:340px}
#header .header_top {width:96%}
#footer .footer_inner .footer_logo {display: none;}


}

@media (max-width:1280px){
    .gnb {display:none}
    .top_shortcuts{right:14%}

}

@media (max-width:768px){

    .AllBtn_area {top:-11rem}
    .top_shortcuts{right:16%}
    .allmenuWrap.active .quickBox {top:-12rem}
    #footer {min-height: auto;}
    #footer .footer_inner {padding:3% 3%}
    
}
  

@media (max-width:640px){

    .top_shortcuts {display:none ;}
}


@media (max-width:480px){

    #header {height: 90px;}
    #header .header_top .logo im .AllBtn_area {top:-11rem}
    .allmenuWrap.active .quickBox {top:-11rem}
   
    
}