/*변수사용은 variable과 maxin에서 사용*/
#header{position:relative ;width:100%; height:132px; z-index:9999; box-sizing:border-box; transition:all .40s ease;border-bottom:1px solid var(--gray-base)}
#header:after{position:absolute; height: 42px; width:100%; background: var(--primary-color); content: ''; top:0; left:0; z-index: -1;}

.head_inbox{width:1400px; margin:0 auto; position:relative; }


#header .head_inbox .had_util {}
#header .head_inbox .had_util > ul {display: flex;justify-content: flex-end;gap: 1.1.9rem; height: 42px;}
#header .head_inbox .had_util > ul > li i {vertical-align: middle;font-size: 1.1rem; ;}
#header .head_inbox .had_util > ul > li > a {color:var(--white); font-size: 0.9rem;    line-height: 42px;}

#header .head_inbox .logo {position:absolute; left:0; top:60px}
#header .head_inbox .logo h1 {width: 186px; height: 54px;}
#header .head_inbox .logo > span {font-size: 0.8rem; color:var(--gray-40); display: inline-block; position: absolute;left:200px;  top:10px; width: 230px; }





.gnb { height: 89px; padding-top: 1rem;  padding-right:70px }
.gnb > ul {display: flex;justify-content: flex-end; gap: 3rem;}

.gnb > ul > li > a {color: var(--black); font-weight: 500;display:flex;  position:relative;  box-sizing:border-box; height: 50px; line-height: 50px; font-size:1.2rem; }
.gnb > ul > li > a:hover{color:var(--primary-color)}
.gnb > ul > li > :after{ position:absolute; content:''; width:0px; height:3px; background:var(--primary-gradi);   transition:all .25s ease; bottom:-23px; left:0px }
.gnb > ul > li > :hover:after{width:100%;}


#header #allmenu {width: 100%;    position: absolute; top:0px }
#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: 50px;  transition: 0.3s;}
.AllBtn_area .AllBtn{ text-align: center; position:absolute; right:40%; width:50px; height: 50px; line-height: 50px; top: 10px; background: #f2f2f2; border-radius: 50%;   display:flex; align-items:center; justify-content:center }
.AllBtn_area .AllBtn:hover{background:var(--primary-color); color:#fff; width: 75px; border-radius: 30px;}
.AllBtn_area .AllBtn i {font-size: 2.1.1.9rem;}
.clsBtn{color:#fff; font-size: 1.2.5rem; 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:0rem; padding:1.1.9rem 0rem 1.1.9rem 0.6rem; height: 100vh; 
    background: var(--primary-color); 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.4);    }
.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: 1.1.9rem; padding-bottom: 10px; display: inline-block;}
.sideall_menu > dl > dd a{opacity: .6; font-size: 0.9rem; 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%;}



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

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

.top_shortcuts button {font-size: 0.9rem;}


@media all and (max-width:1600px)
{	
    #header {padding:0 10px}
	/*
    .head_inbox {width:100%}
	*/
    .AllBtn_area {right:15px}

}

@media all and (max-width:1400px)
{	
  
    
}


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

}





@media all and (max-width:768px){
 
    #header .head_inbox .logo h1 {width:150px}    
    #header .head_inbox .logo > span {display: none;}


}





.fixed_cs{ position:fixed; width:100%; height:100%; background: rgba(0,0,0,0.8); top:0; left:0; display:flex; 
justify-content:center; align-items:center; z-index:9999999; }
.scroll_no { overflow:hidden; width:100%; height:100%; }

.fixed_cs_con { width:700px;height:100%;  }

.fixed_cs_con .inner { color:#222;  width:100%; background:#f5f5f5; border-radius:30px; padding:50px; position:relative; }
.fixed_cs_con label { all:unset; }
.fixed_cs_con select { appearance: auto;        /* 최신 브라우저 */   -webkit-appearance: auto; /* 크롬, 사파리 */  -moz-appearance: auto;    /* 파이어폭스 */  }
.fixed_cs_con .fixed_cs_close { position:absolute; top:20px; right:20px; cursor:pointer; }
.fixed_cs_con .fixed_cs_close i { color:#222; }
.fixed_cs_con h3 { font-size:35px;  color:#222; letter-spacing:-1px; margin-bottom:30px }
.fixed_cs_con .input_box { width:100%; text-align:left; display:flex; align-items:center;  padding:5px 0; }
.fixed_cs_con .input_box .label { display:block; margin-bottom:5px;  font-size:18px; width:150px; flex-shrink:0; color:#222; text-align:left;  }
.fixed_cs_con .input_box input[type="text"], .fixed_cs_con .input_box select
{ border:1px solid #ddd;  line-height:45px; height:45px; font-size:18px; color:#222; padding:0 5px; box-sizing:border-box; background:#fff !important; width:100%; }
.fixed_cs_con .input_box .required_i { display:inline-block; color:#dd0000; margin-left:5px; }
.fixed_cs_con .input_box .flex3 { display:flex; align-items:center;  flex-grow:1; }
.fixed_cs_con .input_box .add2 { width:100%; }
.fixed_cs_con .input_box .add2 input { margin-bottom:7px; width:350px; }
.fixed_cs_con .input_box .add2 input:last-child { margin:0; }
.fixed_cs_con .input_box .add2 .add2_flex2 { display:flex; }
.fixed_cs_con .input_box .add2 > input { margin-bottom:7px; width:405px; }
.search_add { background:#eee;  border-radius:5px; white-space:nowrap; height:40px; line-height:40px; margin-left:5px; padding:0 10px; font-size:16px; }
.fixed_cs_con .phone input,
.fixed_cs_con .phone select { margin:0 0 0 5px;  }
.fixed_cs_con .phone select:first-child { margin-left:0; }
.fixed_cs_con .sangdam_title1 input { width:100%; }
.fixed_cs_con .memo textarea { border:1px solid #ddd;  line-height:30px; height:200px; font-size:16px; color:#222; padding:5px; box-sizing:border-box; background:#fff; width:100%; }
.fixed_cs_con .btn_area { text-align:center; }
.fixed_cs_con .btn_area .button { background:#0091a2; border:none; width:300px; height:50px; font-size:20px; border-radius:10px; cursor:pointer; margin:0 auto; }
.fixed_cs_con .agree_check { display:flex; justify-content:center; align-items:center; color:#555; width:90%; margin:20px auto;}
.fixed_cs_con .agree_check [type="checkbox"] { width:22px; height:22px; }
.fixed_cs_con .agree_check label { font-size:16px; margin-left:5px; }
.fixed_cs_con .agree_check .btn_detail { background:#222; border-radius:10px; color:#fff; padding:2px 10px 4px; margin-left:10px; font-size:14px; }
.btn_submit { display:inline-block;  margin:0px auto ; background:#164593; color:#fff; font-size:22px; 
 padding:10px 30px 11px; width:200px; border-radius:10px; border:0; font-weight:500; cursor:pointer; }





.allmenu_view { position:absolute; top:130px; width:100%; left:0; background:rgba(20,22,30,0.9); height:170px; }
.allmenu_view > div { width:100%; max-width:1100px; margin:20px auto; display:flex; }
.allmenu_view > div ul { width:25%; }
.allmenu_view > div li { height:25px; }
.allmenu_view > div a { color:#fff; line-height:25px; display:block; font-weight:400; font-size:15px; }
.allmenu_view > div h4 { color:#fff998; line-height:25px; }

.allmenu_view {
  display: none;
}

.allmenu_view.visible {
  display: block;
}