/*-------------공통-------------*/ 
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css); 
*{margin:0; padding:0;}
html {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
*{ box-sizing: inherit;}
*:before, *:after {  box-sizing: inherit;}
li{list-style:none;} 
a{text-decoration:none; display: block;}
img{vertical-align:top;}  
body {font-family: 'Noto Sans KR', sans-serif; color:#434959; line-height:1.6; overflow-x: hidden;}
.wrap:after, ul:after { content:""; clear:both; display:block; height:0; visibility:hidden; }
ul li{float: left;}
ul li:last-child { margin-right:0 !important; }  
a{text-decoration: none; outline: none;}
h2{line-height: normal;}
input[type=text]:-ms-clear{ display: none; width: 0; height:0; opacity: 0; pointer-events: none;
}         
 
       
/*-------------pagepiling css-------------*/   
.pp-easing {transition: all 1000ms cubic-bezier(1.275, 0.320, 0.885, 0.175);}       
#pp-nav span{width:10px; height: 10px;}         
#pp-nav.right{right:-70px; transition: all 0.5s ease-out 0s;} 
#pp-nav ul li{float: none; /*pointer-events: none;*/ margin:10px; width:15px; height: 15px;}  
#pp-nav ul li:nth-child(n+1):nth-child(-n+2){display: none;}
#pp-nav .pp-tooltip{color:#434959; display: block; top:50%; transform: translateY(-50%); font-family: 'Noto Sans KR', sans-serif;}          
.section{ background: #fff;}   
#section1, #section2{background:linear-gradient(to right top, #99f3ef 50%, #a1d2ff 100%);}
  
#section2 .add_txt{color: #fff; text-align: center; margin-top:50px}      
           
.pp-tableCell{vertical-align:inherit;}

#section1 .pp-tableCell, #section2 .pp-tableCell{vertical-align:middle;}   

 
/*-------------section1-------------*/   
.cont_wrap{width:85%; height:500px; margin:0 auto; padding:0; background: #fff; border-radius:10px; box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.08); display:flex; align-items:center; justify-content: center;flex-direction: column; }   

 

.cont_wrap h2{text-align: center; font-weight: bold; color:#434959; display:flex; align-items:center; justify-content: center; line-height: normal; font-size:45px; margin-bottom: 50px;}      

.cont_wrap h2 .logo{margin-right:20px; position: relative; top:4px;}               
              
.cont_wrap .txt_box{text-align: center;}    
 
.cont_wrap .btn_box li{width:calc(50% - 10px); height:80px; background: linear-gradient(to right, #5ADFDE , #A1D3FF); float:left; margin-right:20px; 	/*추가*/color:#fff; border-radius: 10px; box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.08); transition:box-shadow 0.3s ease 0s;} 
  
.cont_wrap .btn_box li a{display:flex; align-items:center;justify-content:center; }              
.cont_wrap .btn_box li:nth-child(1){background:linear-gradient(to right top, #9bebf3 , #9be6f3);}    
.cont_wrap .btn_box li:nth-child(2){background:linear-gradient(to right top, #9bef8f4 , #9ce4f6);}              
.cont_wrap .btn_box li:last-child{margin-right: 0; }    
.cont_wrap .btn_box li a{color: #fff; font-size: 15px; height: 100%}   
.cont_wrap .btn_box li a span{font-size: 15px}       
.cont_wrap .btn_box li:active{box-shadow: none;}        
         
/*--section1 btn_box--*/         
.write_btn {display:flex; align-items:center;
	justify-content:center; 
     --color:#fff;
	 --background-left:#2b3044;
	 --folder:#f3e9cb;
	 --folder-inner:#beb393;
	 --paper:#fff;
	 --paper-lines:#bbc1e1;
	 --paper-behind:#e1e6f9;
	 --pencil-cap:#fff;
	 --pencil-top:#275efe;
	 --pencil-middle:#fff;
	 --pencil-bottom:#5c86ff;
		/* --shadow:rgba(13,15,25,.2);*/
	--pencil-opacity:1; 
	 position:relative;
	 border-radius:5px;
	 font-size:14px;
	 font-weight:500;
	 line-height:19px; 
	width:300px; 
	height:80px;
    transition:background 0.3s;
	 color:var(--color);
	 background:var(--bg,var(--background));
}
.write_btn>div {
	 top:0;
	 left:0;
	 bottom:0;
	 width:50px;
	height:80px;
	float:left;
	 position:relative;
	 overflow:hidden;
	margin-right:5px;
	margin-left:-25px;
}
.write_btn>div .folder {
	 width:23px;
	 height:27px;
	 position:absolute;
	 left:15px;
	 top:26.5px;
}
.write_btn>div .folder .top {
	 left:0;
	 top:0;
	 z-index:2;
	 position:absolute;
	 transform:translateX(var(--fx,0));
	 transition:transform 0.4s ease var(--fd,0.3s);
}
.write_btn>div .folder .top svg {
	 width:24px;
	 height:27px;
	 display:block;
	 fill:var(--folder);
	 transform-origin:0 50%;
	 transition:transform 0.3s ease var(--fds,0.45s);
	 transform:perspective(120px) rotateY(var(--fr,0deg));
}
.write_btn>div .folder:before,.write_btn>div .folder:after,.write_btn>div .folder .paper {
	 content:'';
	 position:absolute; 
	 left:var(--l,0);
	 top:var(--t,0);
	 width:var(--w,100%);
	 height:var(--h,100%);
	 border-radius:1px;
	 background:var(--b,var(--folder-inner));
}
.write_btn>div .folder:before {
	 box-shadow:0 1.5px 3px var(--shadow),0 2.5px 5px var(--shadow),0 3.5px 7px var(--shadow);
	 transform:translateX(var(--fx,0));
	 transition:transform 0.4s ease var(--fd,0.3s);
}
.write_btn>div .folder:after,.write_btn>div .folder .paper {
	 --l:1px;
	 --t:1px;
	 --w:21px;
	 --h:25px;
	 --b:var(--paper-behind);
}
.write_btn>div .folder:after {
	 transform:translate(var(--pbx,0),var(--pby,0));
	 transition:transform 0.4s ease var(--pbd,0s);
}
.write_btn>div .folder .paper {
	 z-index:1;
	 --b:var(--paper);
}
.write_btn>div .folder .paper:before,.write_btn>div .folder .paper:after {
	 content:'';
	 width:var(--wp,14px);
	 height:2px;
	 border-radius:1px;
	 transform:scaleY(0.5);
	 left:3px;
	 top:var(--tp,3px);
	 position:absolute;
	 background:var(--paper-lines);
	 box-shadow:0 12px 0 0 var(--paper-lines),0 24px 0 0 var(--paper-lines);
}
.write_btn>div .folder .paper:after {
	 --tp:6px;
	 --wp:10px;
}
.write_btn>div .pencil {
	 height:2px;
	 width:3px;
	 border-radius:1px 1px 0 0;
	 top:23.5px;
	 left:105%;
	 position:absolute;
	 z-index:3;
	 transform-origin:50% 19px;
	 background:var(--pencil-cap);
	 transform:translateX(var(--pex,0)) rotate(35deg);
	 transition:transform 0.4s ease var(--pbd,0s);
}
.write_btn>div .pencil:before,.write_btn>div .pencil:after {
	 content:'';
	 position:absolute;
	 display:block;
	 background:var(--b,linear-gradient(var(--pencil-top) 55%,var(--pencil-middle) 55.1%,var(--pencil-middle) 60%,var(--pencil-bottom) 60.1%));
	 width:var(--w,5px);
	 height:var(--h,20px);
	 border-radius:var(--br,2px 2px 0 0);
	 top:var(--t,2px);
	 left:var(--l,-1px);
}
.write_btn>div .pencil:before {
	 clip-path:polygon(0 5%,5px 5%,5px 17px,50% 20px,0 17px);
}
.write_btn>div .pencil:after {
	 --b:none;
	 --w:3px;
	 --h:6px;
	 --br:0 2px 1px 0;
	 --t:3px;
	 --l:3px;
	 border-top:1px solid var(--pencil-top);
	 border-right:1px solid var(--pencil-top);
}
.write_btn:after {
	 --r:45deg;
}
.write_btn {
	animation:write 2s linear infinite;
}   
        
@keyframes write {
	100% {
		--cx:2px;
		 --bg:var(--background-hover);
		 --fx:-40px;
		 --fr:-60deg;
		 --fd:0.15s;
		 --fds:0s;
		 --pbx:3px;
		 --pby:-3px;
		 --pbd:0.15s;
		 --pex: -24px;
	}
}       
 
 
/*-------------section2(직원전용)-------------*/
    
  #section2 .employee_list{width:75vw; height: 400px; margin: 0 auto; overflow: hidden;}   
  #section2 .employee_list .list_box{overflow: hidden; width: 85%;} 
  #section2 .employee_list .list_box > div{width: calc(50% - 10px); height:80px; margin:0 20px 20px 0; background:#f6f7fa; border:1px solid #d5dae7; border-radius:10px; box-sizing: border-box; float: left; overflow: hidden;}              
  #section2 .employee_list .list_box > div:nth-of-type(2n){margin-right: 0!important;}  
  #section2 .employee_list .list_box > div a{line-height: 80px; text-align: center; color: #acaeb5; transition:background 0.3s ease 0s;} 
    #section2 .slick-slider {
    margin:0 -15px;}  
    #section2 .slick-slide {
    margin-right:15px;
    margin-left:15px;} 
    #section3{background:#fff;}  


/*-------------작성하기 공통-------------*/
 
.progress_area{height:150px; width: 100%; background:linear-gradient(to right, #5ADFDE , #A1D3FF); position:relative; padding:0 60px; color:#fff; display:flex; justify-content: center;flex-direction: column;} 
            
.progress_area .txt_area{padding-left:40px; margin-bottom:15px}
          
.progress_area .txt_area h2{font-size:25px; font-weight: bold; }

.progress_area .progress_bar{width:100%; height: 10px; box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.08); background:rgba(255,255,255,0.5); border-radius: 10px; position: relative;  overflow: hidden;}
          
.progress{width:0; height: 100%; background: #fff; position: absolute; left:0; top:0; transition:all 0.8s ease-out 0.5s;}

.cont_area{width:90%; height:calc(100% - 300px);margin:30px auto 0;  position: relative; overflow: auto; padding:0 50px;}

.add_txt{font-size:15px; color:#b9b9b9; margin-left: 5px;}     
          

.list_area .write{margin: 0;} 
.input_select_area .write{margin-bottom: 30px;} .input_select_area .write:last-of-type{margin-bottom: 0;}     
.cont_area > div{display:inline-block; width: 100%; margin-bottom:30px;}
.cont_area > div:last-of-type{margin-bottom: 0;} .chk_list .input_select_area{padding: 0;}   
  
input.hidden{width: 0!important; height: 0!important; border: none
!important; outline: 0!important; opacity: 0!important; padding: 0!important; margin: 0!important;}  
    

 
/*작성하기 세로화면*/    
@media (min-width: 800px) and (max-width: 1280px){
 
}       
/*작성하기 가로화면*/    
@media (min-width: 800px) and (max-width: 1280px) and (orientation: landscape) {
           
}  

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
  .section03 .input_select_area label{display:inline; line-height:35px;} 
}      
  
.tit{position: relative; width: 100%; display:flex; align-items:center; border-bottom:2px solid #626262; }

.tit h2{font-weight: bold; padding:0 0 5px 0; font-size: 20px; float: left; }
    
 
.list_area{padding:15px 0 0 0;} 
 
input{font-family: 'Noto Sans KR', sans-serif;}
.write{margin-bottom:30px; display:flex; align-items:center;}   
       
.write > div{position: relative; display:block; width: 100%;}
.write > div:after{content:""; clear:both; display:block; height:0; visibility:hidden;}



/*--input css--*/
.input_box{position: relative;}
.select_box{position: relative;} 

.write input{width: 100%; height: 65px; float: left; color:#333; background:#f6f7fa; border: 2px solid #eaeaea; border-radius:5px; transition: all 0.3s ease 0s;  padding-left: 15px; 
font-family:'Noto Sans KR', sans-serif; font-size: 15px;  font-weight: bold; height: 65px; outline: none;}  

.input_select_area label {align-items:center; cursor:text; height:65px; background:none; border:2px solid #eaeaea; display:inline-flex; transition:all 0.3s ease; width: 100%;position: relative; border-radius: 5px; background:#f6f7fa;}       
      
.input_select_area label input{margin:0;  position:relative;  height:45px;padding:0 15px; outline:none; border:none; color:#333; width: 100%; top:7.5px; border-radius:5px; background: none!important; border: none!important;}      
.input_select_area label input:hover{border:none;} 
      
.input_select_area label .label {position: absolute; top:calc(50% - 12px);left:15px; font-size: 15px; color:#626262; transform-origin: 0 0; transition: all 0.2s ease; pointer-events:none; font-weight: bold;}    
.input_select_area label label input {width: 100%; height:100%; padding-top:10px; border: 0; font-family: inherit; font-size: 16px;
font-weight: 500; background: none; border-radius: 0; color: #adadad; transition: all 0.15s ease; pointer-events:none; height:40px; background:none; position:relative; top:20px;}
          
.input_select_area label input:not(:placeholder-shown) + span {color: #3bd3d2; transform: translateY(-10px) scale(0.75);}   
          
.input_select_area label input:not(:-ms-input-placeholder) + span{color: #3bd3d2; transform: translateY(-10px) scale(0.75)}
.input_select_area label input:focus + span {color: #3bd3d2!important; transform: translateY(-10px) scale(0.75)!important; transition-delay: 0.1s!important; }    
          
.input_select_area label input:-webkit-autofill, .write label input:-webkit-autofill:hover, .write label input:-webkit-autofill:focus, .write label input:-webkit-autofill:active
 {  box-shadow: 0 0 0 30px #fff inset !important; -webkit-text-fill-color: #333; border-bottom:2px solid #eaeaea}    



/*--select css--*/
select{width: 100%; height: 65px; border:2px solid #eaeaea; transition: all 0.3s ease; border-radius: 5px; background:#f6f7fa; padding-left: 15px; font-family:'Noto Sans KR', sans-serif; font-size:15px; color:#626262; font-weight: bold; -webkit-appearance: none; /* 네이티브 외형 감추기 */ -moz-appearance: none; appearance: none; outline: none;}

.select_box label {
  position: absolute;
  top:0px;
  left:0px;
  width: 100%; height: 100%;
  color: #626262;
  z-index: -1; 
    display: flex; 
    align-items: center; 
    padding-left: 15px; 
    font-family:'Noto Sans KR', sans-serif; 
    font-size: 15px; 
    font-weight: bold; 
      border: 2px solid #eaeaea;  
        border-radius: 5px;  
      background: #f6f7fa;   
    transition: all 0.3s ease 0s; 
}
          
.select_box .select_focus{ 
    border: 2px solid #5ADFDE;   
    outline: none; 
              }           
 
.select_box select {
  line-height: normal;
  font-family: inherit;  
  border: 0;
  opacity: 0;
  filter:alpha(opacity=0);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; 
}
.chk_focus{ border: 1px solid #5ADFDE!important;  }

body .input_focus{background:#dcfaf7; border:2px solid #dcfaf7;}
body .input_focus_label{background:#dcfaf7; border:2px solid #dcfaf7;}
body .input_focus_label_span{transform:translateY(-10px) scale(0.75); color:#3bd3d2}   
  
 

/*--input (체크박스)--*/ 
.chk_boxArea{float:left; margin-right:10px; display:flex; align-items:center; width:calc(100% / 4 - 10px); margin-bottom:15px;}     
.one_check_input .chk_boxArea{width:100%!important}
.one_check_select .chk_boxArea{width:100%!important} 
.one_check_radio .chk_boxArea{width:calc(50% - 10px)!important;}
.one_check_radio2 .chk_boxArea{width:calc(50% - 10px)!important;}
 
.chk_boxArea .item{width: 100%; display:flex; align-items:center; margin-right:5px; cursor: pointer;}  
.chk_boxArea .item .chk_true1{border:1px solid #42c0bf!important}
.chk_boxArea .item .chk_true2{color:#42c0bf!important;} 

.chk_boxArea .item .cbx{position: relative;display: inline-block; width: 16px; height: 16px; margin:0 5px 0 0; border: 1px solid #d5dae7; box-sizing: border-box; transition:all 0.3s ease; border-radius:3px; cursor: pointer;} 
 
.chk_boxArea .item .cbx svg{ transform: scale(0); fill: none; stroke-linecap: round; stroke-linejoin: round; height:auto;}
.chk_boxArea .item .cbx svg polyline{stroke-width: 2; stroke: #a0a0a0 ; /*#18CDA6;*/} /*체크모션*/
.chk_boxArea .item .cbx:before{ content: ''; position: absolute; top: 50%; left: 50%; margin: -10px 0 0 -10px; width: 20px; height: 20px; border-radius: 100%; background:#a0a0a0; transform: scale(0)}
         
.chk_boxArea .item .cbx:after{content: ''; position: absolute; top: 5px; left: 5px; width: 2px; height: 2px; border-radius: 2px; box-shadow: 0 -18px 0 #000, 12px -12px 0 #000, 18px 0 0 #000, 12px 12px 0 #000, 0 18px 0 #000, -12px 12px 0 #000, -18px 0 0 #000, -12px -12px 0 #000; transform: scale(0); } /*퍼지는모션*/

.chk_boxArea .item .cbx-lbl{position: relative; cursor: pointer; transition: color .3s ease; font-size:15px; color:#626262; margin-bottom:0; margin-right:0;} /*텍스트 영역*/
.chk_boxArea .item .cbx-lbl:after{content: ''; position: absolute; top: calc(50% - 1px); left: 0; transform:translateY(-50%); width: 0; height: 1px; background: #a0a0a0; display:none} /*밑줄*/
.chk_boxArea .item input{display:block; width:0; height:0; opacity:0;  } /*체크박스*/
.chk_boxArea .item input[type="checkbox"]:checked + .cbx svg{transform: scale(1); transition: all .4s ease; transition-delay :.1s}  
.chk_boxArea .item input[type="checkbox"]:checked + .cbx svg polyline{stroke:#fff;}
.chk_boxArea .item input[type="checkbox"]:checked + .cbx{border:1px solid #3bd3d2; background:#3bd3d2;}
.chk_boxArea .item input:checked ~ .cbx-lbl{color:#626262}   
     
.chk_boxArea .item input:checked + .cbx:before{transform: scale(1) ;opacity: 0; transition: all .3s ease;}
.chk_boxArea .item input:checked + .cbx:after{ transform: scale(1); opacity: 0; transition: all .6s ease;}
.chk_boxArea .item input:checked ~ .cbx-lbl:after{width: 100%; transition: all .4s ease} 



/*--input (체크모션)--*/
.cont_area .success_check {
	 --background: #fff;
	 --border:#3bd3d2; 
	 --border-hover:#3bd3d2;
	 --border-active:#3bd3d2;
	 --tick: #fff;  
	 position:relative;
     width: auto; 
     height: auto;
     border: none; 
     background: none;
     transition: none;
     border-radius:0;
     cursor:none;  
   pointer-events:none;
    left:20px;  
    float: left; 
}   
 .cont_area .success_check input, .cont_area .success_check svg {
	 width: 21px;
	 height: 21px;
	 display: block;
     top:auto; 
}
 .cont_area .success_check input {
	 -webkit-appearance: none;
	 -moz-appearance: none;
	 position: relative;
	 outline: none;
	 background: var(--background);
	 border: none;
	 margin: 0;
	 padding: 0;
	 cursor: pointer;
	 border-radius: 4px;
	 transition: box-shadow 0.3s;
	 /*box-shadow: inset 0 0 0 var(--s, 1px) var(--b, var(--border));*/ 
}
 .cont_area .success_check input:hover {
	 --s: 2px;
	 --b: var(--border-hover);
}
 .cont_area .success_check input:checked {
	 --b: var(--border-active);
}
 .cont_area .success_check svg {
	 pointer-events: none;
	 fill: none;
	 stroke-width: 2px;
	 stroke-linecap: round;
	 stroke-linejoin: round;
	 stroke: var(--stroke, var(--border-active));
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 21px;
	 height: 21px;
	 transform: scale(var(--scale, 1)) translateZ(0);
}
 .cont_area .success_check.path input:checked {
	 --s: 2px;
	 transition-delay: 0.4s;
}
 .cont_area .success_check.path input:checked + svg {
	 --a: 16.1 86.12;
	 --o: 102.22;
}
.cont_area .success_check.path svg {
	 stroke-dasharray: var(--a, 86.12);
	 stroke-dashoffset: var(--o, 86.12);
	 transition: stroke-dasharray 0.6s, stroke-dashoffset 0.6s;
}  

.write .success_check{position: absolute; right: 15px; left: auto;} 
      
  
 

/*--input 1줄--*/
.select_type1 {
  position: relative;
  width:100%; 
  height: 65px;    
  z-index: 1;
} 

.select_type1:before {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  width: 0;
  height: 0;
  margin-top: -1px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #333;
}

           
           
/*--input 2줄--*/
.input_type2 > label{width:calc(100% / 2 - 20px)!important; float: left;} 
.input_type2 > input{width:calc(100% / 2 - 20px)!important; float: left;}     
.input_type2 > div{width:calc(100% / 2 - 20px)!important; float: left;}   
.input_type2 > .select_box{width:calc(100% / 2 - 20px)!important; float: left;}  
.input_type2 .line_area span{width: 10px; height: 2px; background:#333; } 
 
 
/*--input 3줄--*/
.input_type3 > label{width:calc(100% / 3 - 10px)!important; float: left;} 
.input_type3 > input{width:calc(100% / 3 - 10px)!important; float: left;}     
.input_type3 > div{width:calc(100% / 3 - 10px)!important; float: left;}    
.input_type3 > .select_box{width:calc(100% / 3 - 10px)!important; float: left;}  
.input_type3 .line_area span{width: 10px; height: 2px; background:#333; } 


/*--이메일 2줄--*/
.email_type > label{width:calc(100% / 2 - 20px)!important; float: left;} 
.email_type > input{width:calc(100% / 2 - 20px)!important; float: left;}     
.email_type > div{width:calc(100% / 2 - 20px)!important; float: left;}   
.email_type > .select_box{width:calc(100% / 2 - 20px)!important; float: left; display:flex; align-items:center; justify-content: center;flex-direction: column;}   
.email_type .line_area span{width: 10px; height: 2px; background:#333; } 

/*--서브제목 2줄--*/              
.sub_tit_type .sub_tit{width: 60px!important; height: 120px; line-height: 120px; font-weight: bold;} 
.sub_tit_type > label{width:calc(100% - 60px)!important; float: left;} 
.sub_tit_type > input{width:calc(100% - 60px)!important; float: left;}     
.sub_tit_type > div{width:calc(100% - 60px)!important; float: left;}   
.sub_tit_type > .select_box{width:calc(100% / 2 - 38px)!important; float: left;}  
.cont_area .list_area .sub_tit_type .line_area{width: 15px!important;} 

/*--select 2줄--*/
.select_type2 > label{width:calc(100% / 2 - 20px)!important; float: left;} 
.select_type2 > input{width:calc(100% / 2 - 20px)!important; float: left;}     
.select_type2 > div{width:calc(100% / 2 - 20px)!important; float: left;}   
.select_type2 > .select_box{width:calc(100% / 2 - 20px)!important; float: left;}
 
/*--input 3줄--*/
.input_type3 > label{width:calc(100% / 3 - 10px)!important; float: left;} 
.input_type3 > input{width:calc(100% / 3 - 10px)!important; float: left;}     
.input_type3 > select{width:calc(100% / 3 - 10px)!important; float: left;}  
.cont_area .list_area .input_type3 .line_area{width: 15px!important;}

/*--input (중간 - 부분)--*/
.cont_area .list_area .line_area{display: inline-block; width:40px!important; height: 65px; float: left; display:flex; align-items:center; justify-content: center;} 

/*--이전,다음 버튼--*/  
.btn_box{display:flex; align-items:center; justify-content: center;}
 
.btn{ 
width: 160px;   
height: 60px;      
background: #3bd3d2;
display:flex; align-items:center; justify-content: center; 
border-radius:5px;
position: relative; 
cursor:pointer;   
margin-right:10px;     
}    
  
.prev_btn{transform: rotate(180deg);}
.next_btn{margin-right:0;} 

.btn > div{display:flex; align-items:center; justify-content: center; position: relative; left:10px;}
 

.btn .txt{color:#fff; font-weight:normal;} 
.prev_btn .txt{transform:rotate(180deg)}
  
.btn .arrow {
	 --active: #fff;
	 --border: rgba(255, 255, 255, .12);
	 display: block;
	 position: relative;
	 width: 44px;
	 height: 44px;  
     transform: scale(0.5)
}  
.btn .arrow.left {transform: scaleX(-1);}
 
.btn .arrow i {
	 display: block;
	 position: absolute;
	 margin: -10px 0 0 -10px;
	 width: 20px;
	 height: 20px;
	 left: 50%;
	 top: 50%;
}



 .btn .arrow i:before, .btn .arrow i:after {
	 content: ''; 
	 width: 10px;
	 height: 2px;
	 border-radius: 1px;
	 position: absolute;
	 left: 50%;
	 top: 50%; 
	 background: var(--active);   
	 margin: -1px 0 0 -5px;
	 display: block;
     	 transform-origin: 9px 50%;
}
 .btn .arrow i:before {
	 transform: rotate(-40deg);
}
 .btn .arrow i:after {
	 transform: rotate(40deg);
} 
 .btn .arrow:before, .btn .arrow:after {
	 content: '';
	 display: block;
	 position: absolute;
	 left: 1px;
	 right: 1px;
	 top: 1px;
	 bottom: 1px;
	 border-radius: 50%;
	 border: 2px solid var(--border);
} 

 .btn .arrow svg {
	 width: 44px;
	 height: 44px;
	 display: block;
	 position: relative;  
	 z-index: 1;
	 color: var(--active);
	 stroke-width: 2px;
	 stroke-dashoffset: 126;
	 stroke-dasharray: 126 126 0;
	 transform: rotate(0deg);
} 
  .btn .arrow.animate svg {
	 animation: stroke 1s ease forwards 0.3s;
}
 .btn .arrow.animate i {
	 animation: arrow 1.6s ease forwards;
}
 .btn .arrow.animate i:before {
	 animation: arrowUp 1.6s ease forwards;   
}
 .btn .arrow.animate i:after {
	 animation: arrowDown 1.6s ease forwards;
}  
  
  
  
 @keyframes stroke {
	 52% {
		 transform: rotate(-180deg);
		 stroke-dashoffset: 0;
	}
	 52.1% {
		 transform: rotate(-360deg);
		 stroke-dashoffset: 0;
	}
	 100% {
		 transform: rotate(-180deg);
		 stroke-dashoffset: 126;
	}
}
 @keyframes arrow {
	 0%, 100% {
		 transform: translateX(0);
		 opacity: 1;
	}
	 23% {
		 transform: translateX(17px);
		 opacity: 1;
	}
	 24%, 80% {
		 transform: translateX(-22px);
		 opacity: 0;
	}
	 81% {
		 opacity: 1;
		 transform: translateX(-22px);
	}
}
 @keyframes arrowUp {
	 0%, 100% {
		 transform: rotate(-40deg) scaleX(1);
	}
	 20%, 80% {
		 transform: rotate(0deg) scaleX(0.1);
	}
}
 @keyframes arrowDown {
	 0%, 100% {
		 transform: rotate(40deg) scaleX(1);
	}
	 20%, 80% {
		 transform: rotate(0deg) scaleX(0.1);
	}
}
  
 


/*--alert창--*/
body .swal2-title{font-size:20px;}
body .swal2-icon{transform: scale(0.9); margin:1.25em auto 1.2em;} 
body .swal2-icon .swal2-icon-content{font-size:40px;} 
       

/*-------------section3(기본정보)-------------*/

/*--input (주소)--*/
.address_area > .input_box{width:calc(100% / 2 - 40px)!important; float: left; } 
.address_area > .search{width: 50px; height:65px; float: left; display:flex; align-items:center; justify-content: center;flex-direction: column; font-size:25px; background:#f6f7fa; border:2px solid #eaeaea; border-radius:5px;}  
.cont_area .list_area .address_area .line_area{width: 15px!important;}

/*--input (이메일)--*/
#select_box_direct{position: absolute; left: 0; top:0; opacity: 0; pointer-events: none; z-index: 2;}
               

/*--input (주소검색)--*/
#search_address{position:fixed; z-index:999}
.where {
  display: block;
  margin: 25px 15px;
  font-size: 11px;
  color: #000;
  text-decoration: none;
  font-family: verdana;
  font-style: italic;
}
.info_body{padding:20px!important;}
.form_search .tf_keyword{font-size:12px;}

   


/*-------------section6(개인정보 동의서)-------------*/

/*--동의서 (스크롤)--*/     
.agreement{position: relative; padding: 20px 5px 20px 20px; background:#f6f7fa; border-radius:10px;} 
.agreement .scrollLy{height:250px; font-size:14px; overflow-x:hidden; overflow-y: auto; }
.agreement .scrollLy a{display: inline-block; color:inherit; font-weight: bold; text-decoration: underline}     
.agreement .scrollLy > div{display: block; margin-bottom: 30px;} 
.agreement .scrollLy > div > div{display: block; margin-bottom: 10px;}   
    
#section6 .chk_boxArea{width: 100%;     flex-direction: column;} 

 
 



  
/*제출버튼*/
.submit_button:focus{border:none;}

.submit_button {
    pointer-events:none; 
    outline:none;
	 --button-width: 152px;
	 --background:#3bd3d2;
	 --background-transparent: rgba(64, 70, 96, 0); 
	 --background-hover: #3bd3d2;
	 --background-back:#3db2b1;
	 --shadow: rgba(0, 9, 61, .125);
	 --text: #f6f8ff;
	 --paper: #f6f8ff;
	 --paper-lines: #d1d6ee;
	 --paper-shadow: rgba(0, 9, 61, .15);
	 --zipper: #bbc1e1;
	 --zipper-end: #d1d6ee;
	 --zipper-line: #8a91b4;
	 --zipper-lines:#d1d6ee; 
	 --tick: #f6f8ff;    
	 display: flex;
	 outline: none;
	 cursor: pointer;
	 text-align: center;
	 border: 0;
	 padding: 0;
	 line-height: 24px;
	 font-family: inherit;
	 font-weight: 600;
	 font-size: 14px;
	 border-radius: 3px;
	 color: var(--text);
	 background: var(--background-back);
	 transition: transform 0.2s;
	 transform: scale(var(--scale, 1)) translateZ(0);
	 -webkit-appearance: none;
	 -webkit-tap-highlight-color: transparent;
}
 .submit_button:not(.compress):active {
	 --scale: 0.95;
}
 .submit_button:not(.compress):hover {
	 --b: var(--background-hover);
}
 .submit_button .paper {
	 width: 26px;
	 height: 32px;
	 pointer-events: none;
	 position: absolute;
	 top: -2px;
	 left: var(--left, 50%);
	 margin: 0 0 0 -13px;
	 background: var(--paper);
	 border-radius: 3px;
	 box-shadow: 0 1px 1px var(--paper-shadow);
	 opacity: 0;
	 transform: translate(var(--x, 0), var(--y, -68px));
}
 .submit_button .paper:before {
	 content: '';
	 position: absolute;
	 left: 4px;
	 top: 6px;
	 width: 18px;
	 height: 2px;
	 border-radius: 1px;
	 background: var(--paper-lines);
	 box-shadow: 0 6px 0 var(--paper-lines), 0 12px 0 var(--paper-lines), 0 18px 0 var(--paper-lines);
}
 .submit_button .paper.left {
	 --left: 25%;
	 --x: -12px;
	 --y: -52px;
}
 .submit_button .paper.right {
	 --left: 75%;
	 --x: 12px;
	 --y: -52px;
}
 .submit_button .inner {
	 position: relative;
	 z-index: 1;
	 padding: 10px 0;
	 width: var(--button-width);
	 border-radius: 3px;
	 color: var(--text);
	 transform-origin: 50% 100%;
	/* background: var(--b, var(--background));*/
   background:#fff;
	/* transition: background 0.4s;*/
}
 .submit_button .inner span {
   display:flex; align-items:center; justify-content: center; 
   color:#fff; 
	 opacity: var(--span-o, 1);
	 transform: translateY(var(--span-y, 0)) translateZ(0);
	 transition: transform 0.2s ease var(--span-de, 0.4s), opacity 0.2s linear var(--span-de, 0.4s);
   font-weight:normal;
} 
 .submit_button .inner span img{         
    border-radius: 0;
    width: 24px;
    height: 24px;
    margin-left: 10px;
    border: none;
    background: none;
}
 .submit_button .inner svg {
	 width: 20px;
	 height: 16px;
	 display: block;
	 position: absolute;
	 top: 14px;
	 left: calc(var(--button-width) / 2);
	 margin-left: -10px;
	 fill: none;
	 stroke-width: 2px;
	 stroke-linecap: round;
	 stroke-linejoin: round;
	 stroke: var(--tick);
	 opacity: var(--tick-o, 0);
	 transform: scale(var(--tick-s, 0.5));
	 transition: transform 0.3s ease var(--tick-de, 0s), opacity 0.2s linear var(--tick-de, 0s);
}
 .submit_button .inner .zipper {
	 width: calc(var(--button-width) + 12px);
	 position: absolute;
	 top: 4px;
	 left: 0;
	 height: 12px;
	 overflow: hidden;
	 opacity: 0;
}
 .submit_button .inner .zipper:before, .submit_button .inner .zipper:after {
	 content: '';
	 position: absolute;
	 top: var(--top, 1px);
	 left: var(--left, 1px);
	 height: 3px;
	 width: 2px;
	 border-radius: 1px;
	 box-shadow: 5px 0 0 var(--zipper-lines), 10px 0 0 var(--zipper-lines), 15px 0 0 var(--zipper-lines), 20px 0 0 var(--zipper-lines), 25px 0 0 var(--zipper-lines), 30px 0 0 var(--zipper-lines), 35px 0 0 var(--zipper-lines), 40px 0 0 var(--zipper-lines), 45px 0 0 var(--zipper-lines), 50px 0 0 var(--zipper-lines), 55px 0 0 var(--zipper-lines), 60px 0 0 var(--zipper-lines), 65px 0 0 var(--zipper-lines), 70px 0 0 var(--zipper-lines), 75px 0 0 var(--zipper-lines), 80px 0 0 var(--zipper-lines), 85px 0 0 var(--zipper-lines), 90px 0 0 var(--zipper-lines), 95px 0 0 var(--zipper-lines), 100px 0 0 var(--zipper-lines), 105px 0 0 var(--zipper-lines), 110px 0 0 var(--zipper-lines), 115px 0 0 var(--zipper-lines), 120px 0 0 var(--zipper-lines), 125px 0 0 var(--zipper-lines), 130px 0 0 var(--zipper-lines), 135px 0 0 var(--zipper-lines), 140px 0 0 var(--zipper-lines), 145px 0 0 var(--zipper-lines);
	 background: var(--zipper-lines);
}
 .submit_button .inner .zipper:after {
	 --top: 8px;
	 --left: 3px;
}
 .submit_button .inner .zipper .gradient {
	 position: absolute;
	 top: 0;
	 bottom: 0;
	 width: 200%;
	 right: 12px;
	 z-index: 1;
	 background: linear-gradient(to right, var(--background-transparent) 0%, var(--background-transparent) 33.33%, var(--background) 66.66%, var(--background) 100%);
	 background-size: 300% 100%;
	 background-position-x: var(--gradient, 100%);
	 transition: background-position var(--gradient-d, 0s) ease var(--gradient-de, 0s);
}
 .submit_button .inner .zipper .line {
	 width: calc(var(--button-width) + 12);
	 height: 2px;
	 margin: 5px 0;
	 position: relative;
	 left: -12px;
	 z-index: 2;
	 background: var(--zipper-line);
	 transform: translateX(calc(calc(var(--button-width) * -1) + 8px));
}
 .submit_button .inner .zipper .line:before, .submit_button .inner .zipper .line:after {
	 content: '';
	 position: absolute;
	 right: var(--right, 0);
	 width: var(--width, 6px);
	 height: var(--height, 2px);
	 border-radius: 1px;
}
 .submit_button .inner .zipper .line:before {
	 background: var(--zipper-end);
}
 .submit_button .inner .zipper .line:after {
	 --right: -7px;
	 --width: 8px; 
	 --height: 8px;
	 transform: translate(0, -3px) scaleY(0.6) rotate(-45deg);
	 clip-path: polygon(0 0, 100% 0, 0 100%);
	 background: var(--zipper);
}
 .submit_button.compress {
	 --span-o: 0;
	 --span-y: 8px;
	 --span-de: 0s;
	 --tick-o: 1;
	 --tick-s: 1;
	 --tick-de: 3.2s;
	 --gradient: 0%;
	 --gradient-d: 1.8s;
	 --gradient-de: 1.8s;
}
 .submit_button.compress .paper {
	 animation: paper 1.8s linear forwards;
}
 .submit_button.compress .inner {
	 animation: fold 1.8s linear forwards;
}
 .submit_button.compress .inner .zipper {
	 animation: zipper 3.5s linear;
}
 .submit_button.compress .inner .zipper .line {
	 animation: line 1.2s linear forwards 1.8s;
}
 @keyframes paper {
	 10%, 100% {
		 opacity: 1;
	}
	 0%, 5% {
		 transform: translate(var(--x, 0), var(--y, -68px));
	}
	 30% {
		 transform: translate(0, 1px);
	}
	 50%, 70% {
		 transform: translate(0, -3px);
	}
	 95%, 100% {
		 transform: translate(0, 4px);
	}
}
 @keyframes line {
	 60% {
		 transform: translateX(5px);
	}
	 80% {
		 transform: translateX(-2px);
	}
	 100% {
		 transform: translateX(0);
	}
}
 @keyframes fold {
	 10%, 80% {
		 transform: perspective(500px) rotateX(-20deg) translateZ(16px);
	}
}
 @keyframes zipper { 
	 20%, 90% {
		 opacity: 1;
	}   
}   
 .submit_all{position:relative;  width:160px; height:60px; display:flex; align-items:center; justify-content: center; border-radius:5px; cursor:pointer; background:#3bd3d2;}

.submit_all .inner{background:#3bd3d2;}

.submit_all .next_txt{color:#fff; margin-right:10px;}
 
 
/*-------------rolling_select-------------*/      
.cont_area .rolling_select1 .res_time{width:calc(100% - 180px)!important;  padding:0 50px;}
.cont_area .rolling_select1 .res_time .select_box{height:40px; border:2px solid #626262; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); box-shadow:0 5px 20px rgba(0, 0, 0, 0.08); width:90%; transition:all 0.3s ease;}  
 
.cont_area .rolling_select1 .res_time .select_box.select_box_foucs{border:2px solid #5ADFDE}  
 
.cont_area .rolling_select2 .rolling_select_list{width:calc(50% - 50px); float: left; margin: 0;} 
.cont_area .rolling_select2 .line_area{width:100px!important; height: 120px!important;}
      

.res_time{height:120px; overflow:hidden; /*padding:0 50px;*/ position:relative;}
.res_time > div{height:100%; overflow:hidden; width:calc(100% / 3); float:left;}
.res_time .swiper-slide{display:flex; align-items:center; justify-content: center; color:#626262; transition:opacity .3s linear 0s; font-size:15px;  opacity:0.3; }  
.res_time .swiper-slide-prev{transform:rotateX(0deg) translateZ(40px);  opacity:0.3; }
.res_time .swiper-slide-next{transform:rotateX(0deg) translateZ(40px);  opacity:0.3; } 
.res_title{position:relative;}
.res_title .caution{font-size:12px; position:absolute; top:35px; right:0; color:#666; font-weight:normal;} 
.res_time .swiper-slide-active{transform:rotateX(0deg) translateZ(85px); opacity:1;}

     
/*--time_select--*/      
.sub_tit_type .time_select_btn{width: 120px!important; height: 120px; display:flex; align-items:center; justify-content: center;} 
.time_select_btn > button{color:#fff; height:40px; line-height:40px; width:100%; background:#626262; font-size:12px; border:0; transition:all 0.2s ease-in-out;outline:none; border-radius:5px; box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);}      
.time_select_btn > button > i{margin-left:5px}
.time_select_btn > button:active{box-shadow:none;}
.ap_wrap{pointer-events:none; }
.ap_wrap .swiper-slide-next{opacity:0!important;}
.ap_wrap .swiper-slide-prev{opacity:0!important;}
.time_select_list .time_select_button{width:100px!important; float: left; display:flex; align-items:center; justify-content: center;}
 
/*--date_select--*/
.sub_tit_type .date_select_btn{width: 120px!important; height: 120px; display:flex; align-items:center; justify-content: center;} 
.date_select_btn > button{color:#fff; height:40px; line-height:40px; width:100%; background:#626262; font-size:12px; border:0; transition:all 0.2s ease-in-out;outline:none; border-radius:5px; box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);}     
.date_select_btn > button > i{margin-left:5px}
.date_select_btn > button:active{box-shadow:none;}
.year_wrap{pointer-events:none; } 
.year_wrap .swiper-slide-next{opacity:0!important;}
.year_wrap .swiper-slide-prev{opacity:0!important;}
.date_select_list .date_select_button{width:100px!important; float: left; display:flex; align-items:center; justify-content: center;}
      

  
/*-- one_check_radio --*/ 
.one_check_radio2 > div{width:calc(100% / 2 - 20px)!important; float:left;}
.one_check_radio2 .line_area{width: 40px; height: 90px; float:left; display: inline-block;}
.fix_txt{position: absolute; right: 15px; }
.sub_tit_chk .chk_boxArea{margin-bottom:0;}
.chk_list_all .input_select_area{padding: 0;}    


/*-- select_box-- */
 
/** Custom Select **/ 
select{box-sizing: border-box;}
.custom-select-wrapper {
  position: relative;
  display: inline-block;
  user-select: none;
  cursor: pointer;
    z-index: 2; 
    width: 100%; 
}
.custom-select-wrapper select {
  display: none;
}
/*셀렉트창*/
.custom-select {
  position: relative;
  display: inline-block; 
  width: 100%; 
} 
.custom-select-trigger {
  position: relative;
  display: block;
  width: 100%;   
  padding: 0 0 0 15px; 
  font-weight: 100;
  color: #626262;  
  line-height: 61px;
  background-color: #f6f7fa;
  border: 2px solid #eaeaea; 
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
      font-family:'Noto Sans KR', sans-serif;
    font-size: 15px; font-weight: bold; 
}
 
.custom-select-trigger:before {
  position: absolute;
  display: block;
  content: "";
  width: 1px;  
   height: 80%;
  top: 50%;  
  transform: translateY(-50%);
  right: 50px;
  border-right: 1px solid #c7d1d6;
  transition: all 0.35s ease-out;
  transform-origin: 50% 0;
}
.custom-select-trigger:after {
  position: absolute;
  display: block;
  content: "";
  width: 10px;
  height: 10px;
  top: 50%;
  right: 20px;
  margin-top: -3px;
  border-bottom: 1px solid #333;
  border-right: 1px solid #333; 
  transform: rotate(45deg) translateY(-50%);
  transition: all 0.35s ease-out;
  transform-origin: 50% 0; 
}
.custom-select.opened .custom-select-trigger:after {
  margin-top: 3px;
  transform: rotate(-135deg) translateY(-50%);
}
.custom-options {
  position: absolute;
  display: block;
  top: 100%;
  left: 0%;
  right: 0;
  width: 100%;

  margin: 10px 0;
  border-radius: 5px;
  box-sizing: border-box;

  background: #fff;
  transition: all 0.2s ease-in-out;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-15px);
  border: 0;
}
.custom-select.opened .custom-options {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateY(-8px);
     -webkit-box-shadow: 0px 10px 50px 0px rgba(43, 111, 246, 0.1);
  box-shadow: 0px 10px 50px 0px rgba(43, 111, 246, 0.1); 
} 
 
.custom-option {
  position: relative; 
  display: block;
  padding: 0 15px; 
  color:#626262; 
  line-height: 41px;
  cursor: pointer;
  transition: all 0.05s ease-in-out;
} 
.custom-option:first-of-type {
  border-radius: 5px 5px 0 0;

  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}
.custom-option:last-of-type {
  border-bottom: 0;
  border-radius: 0 0 5px 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}
.custom-option:hover,
.custom-option.selection {
  color: #333;  
  background-color:#dcfaf7;
}