@import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css);
@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@keyframes paperScale {
    0% {
      transform: scale(1, 1)
    }    
	50% {
      transform: scale(0.98, 0.98)
    }
    100% {
      transform: scale(1, 1)
    }
  }



/* 폰트 확대 방지 */
html {
  font-size: 100%;
  -webkit-text-size-adjust: none;
  -ms-text-size-adjust: none;
}
/* 여백 설정 */
body, div, dl, dt, dd, ul, li, ol, h1, h2, h3, h4, h5, h6, form, input, legend, textarea, select, 
fieldset, p, button, figcaption, figure, menu {margin:0; padding:0; }

/* 시멘틱 태그 블럭화 */
header, aside, article, footer, hgroup, menu, nav, section, details, 
figcaption, figure {display:block;}

/* a 링크 초기화 */
a {
	color:#2f3743;
	text-decoration:none;
}

body, input, textarea, select, button, table {
		
	font-family: 'GmarketSansMedium', sans-serif;
	font-size: 11px;
	letter-spacing:-0.03em;
	margin:0;
}

body { display: flex; justify-content: center; flex-direction: column; align-items: center; }


img, fieldset, button {border:0;}
img {vertical-align:middle;}

input:focus, select:focus, option:focus, textarea:focus, button:focus{ 	outline: none; }
input::placeholder { color:#bfd5d5; font-weight:300; }

/* 화살표 없애기 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {   -webkit-appearance: none; }


/* scroll-bar design */
body::-webkit-scrollbar { width: 8px; height: 8px;} /*스크롤바의 너비*/
body::-webkit-scrollbar-thumb { background-color: #1e1e2d; /*스크롤바의 색상*/  
    background-clip: padding-box;  border: 2px solid transparent;	 border-radius: 1em; }
body::-webkit-scrollbar-track { background-color: #f5f8fa;} /*스크롤바 트랙 색상*/

#overlay {  background-color: #000; bottom: 0; left: 0; opacity: 0.5; filter: alpha(opacity = 50); /* IE7 & 8 */ position: fixed; right: 0; top: 0; z-index: 200; display:none;  }




/* 색상변수 */
:root {		
	--color-white:			#ffffff;
	--color-black:			#000000;
	--color-grey:				#e3e1e3;
	--color-darkgrey:		#8d8d8d;
	--color-lightgrey:		#f4f5f7;	
	--color-purple:			#dc54ff;
	--color-lightpurple:	#e47aff;
	--color-blue:				#692dff;
	--color-green:			#09b697;
}




.bold-font {font-weight: bold;}

input[type=text] { border: 0; }
input[type=number] { border: 0; }
input::placeholder {color: var(--color-grey);}




/***********************************************************************************************  	
	common
***********************************************************************************************/

.displayNo {display: none;}



/***********************************************************************************************  	
	pc style
***********************************************************************************************/
@media (min-width:769px){	

	table { width: 100%; border: 2px solid var(--color-sky); border-collapse: collapse; }
	th, td { border : 1px solid var(--color-lightgrey); padding: 8px;}
	th {background-color: var(--color-lightsky); width: 15%;  }


	#fix_btn { position: fixed; bottom: 30px; right: 30px; width: 180px; height: 180px; z-index: 100; cursor: pointer; border-radius: 50%; color:#fff;		
		display: flex; justify-content: center; align-items: center; }
	#fix_btn img {width: 160px;}
	

	 /***************************** 우편번호 팝업 ******************************/

	.popup-layer { position: relative;  width: 1000px; height: 100lvh; overflow-y: scroll;  z-index: 300; 
						 display: none;  background: var(--color-white);  }
	.popup-layer::-webkit-scrollbar {  display: none; }

	.popup-layer .top-wrap { position: fixed;  display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; left: 50%; top: 0; transform: translate(-50%, 0);
			width: calc(1000px - 60px); height: auto; padding: 30px; background: var(--color-white);   }

	.popup-layer .content-wrap {  width: calc(100% - 60px); padding: 120px 30px 30px 30px; 
						display: flex;  flex-direction: column;  gap: 20px; }

	.popup-layer .top-wrap .pop-title { font-size: 30px; font-weight: 800; }
	.popup-layer  .pop-close { font-size: 40px; font-weight: 800; cursor: pointer; color: var(--color-black); }	


	.popup-layer .content-wrap .term-layer { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; font-size: 1.18em;    }
	.popup-layer .content-wrap .term-layer h4 { font-size: 1.8em; font-weight: 800;  }
	.popup-layer .content-wrap .term-layer h3 { font-size: 1.4em; font-weight: 800;  }
	.popup-layer .content-wrap .term-layer ol { display: block;   list-style-type: decimal;
							  margin-block-start: 1em;
							  margin-block-end: 1em;
							  margin-inline-start: 0px;
							  margin-inline-end: 0px;
							  padding-inline-start: 10px;}

	.popup-layer .content-wrap .term-layer .indent { padding: 10px; }
	.popup-layer .content-wrap .term-layer a { color: var(--color-blue);}
	.popup-layer .content-wrap .term-layer table { margin-top: 10px; }


	/***************************** 팝업 끝 ****************************/


    
	section { position: relative; width: 1000px; height: auto; display: flex; justify-content: center; align-items: center; flex-direction: column; 
				background: var(--color-lightgrey); }	


	#main_page { position: relative; width: 1000px;}
	#complete_page  { position: relative; width: 1000px; height: 100%; background: var(--color-blue)}

	#main_page img {width: 100%;}

	#main_page .image-wrap, #complete_page .image-wrap { width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; }
	#main_page .content-wrap { width: calc(100% - 80px); padding: 120px 40px; 
						display: flex; justify-content: center; align-items: center; flex-direction: row; flex-wrap: wrap; gap: 40px; }

	#main_page .content-wrap .content-title { width: 100%; font-size: 2.4em; text-align: center; font-weight: bold; 
						color: var(--color-black);}

	#main_page .content-wrap .content-box { display: flex; justify-content:center; align-items: center;
						width: calc(50% - 20px); background: #ffffff;
						border-radius: 30px; 
						-webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03), 0 3px 10px rgba(0, 0, 0, 0.03);
						 -moz-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03), 0 3px 10px rgba(0, 0, 0, 0.03);
						 -ms-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03), 0 3px 10px rgba(0, 0, 0, 0.03);
						 -o-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03), 0 3px 10px rgba(0, 0, 0, 0.03);
						 box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03), 0 3px 10px rgba(0, 0, 0, 0.03);  }


	#main_page .footer-wrap { width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column;
						padding: 0 0 120px 0; }


	#main_page .fixed-wrap { position: fixed; left: 50%;  transform: translate(-50%, 0); bottom: 0; 
						width: calc(1000px - 80px); height: 121px; display: flex; justify-content: center; align-items: center; flex-direction: row;
						padding: 0 40px; }


	#main_page .fixed-wrap .btn-shinchung { width: 80%; height: 90px; border-radius: 30px; cursor: pointer;
						display: flex; justify-content: center; align-items: center;  font-size: 40px; font-weight: 800;			
						color: var(--color-white); background: linear-gradient(45deg, #5ee4c3, #5808fb, #5808fb, #9929ea );
					    background-size: 400% 400%;	animation: gradient 5s ease infinite; 	transition: all 0.5s;}
	


	#input_page { position: fixed; left: 50%; top: 0;  transform: translate(-50%, 0); width: 1000px; height: 100vh; z-index: 100; 
						 display: none; }
	#input_page::-webkit-scrollbar {  display: none; }
	
	
	/* input page input_area */
	.fixed-area {
			display: flex; flex-direction: row; justify-content: space-between; align-items: center;
			width: calc(100% - 60px); height: auto; padding: 30px; background: var(--color-lightgrey); }
	.fixed-area .pop-title { font-size: 30px; font-weight: 800; }
	.fixed-area .pop-close { font-size: 40px; font-weight: 800; cursor: pointer; }

	.input-area { display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
			width: 90%; height: auto; padding: 20px 20px 20px 20px; background-color: var(--color-white); overflow-y: auto;   }

	/* scroll-bar design */
	.input-area::-webkit-scrollbar { width: 8px; height: 8px;} /*스크롤바의 너비*/
	.input-area::-webkit-scrollbar-thumb { background-color: #1e1e2d; /*스크롤바의 색상*/  
		background-clip: padding-box;  border: 2px solid transparent;	 border-radius: 1em; }
	.input-area::-webkit-scrollbar-track { background-color: #f5f8fa;} /*스크롤바 트랙 색상*/

	.input-area .line { width: 100%; height: auto; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 4px;
			border-bottom: 1px solid var(--color-grey); padding: 30px 0px 6px 0px;}

	.input-area .line .title {width: 60%; font-weight: 600; font-size: 1.8em;}
	.input-area .line .name {width: calc(76% - 8px); height: 26px; line-height: 26px; font-size: 1.7em; color: var(--color-black);  }

	.input-area .line .gender{	display:none;}
	.input-area .line .gender + label{ display: block; background:#fff;	border:1px solid var(--color-grey); border-radius: 6px; 
			width: calc(12% - 2px); height: 50px; line-height: 50px; text-align:center; font-size: 1.6em; font-weight: 600;
			cursor: pointer;}
	.input-area .line .gender:checked + label{ width: 12%;	background: var(--color-green);	 color: var(--color-white); border: 0; }

	.input-area .line .pay_method{	display:none;}
	.input-area .line .pay_method + label{ display: block; background:#fff;	border:1px solid var(--color-grey); border-radius: 6px; 
			width: calc(47% - 2px); height: 50px; line-height: 50px; text-align:center; font-size: 1.6em; font-weight: 600;
			cursor: pointer;}
	.input-area .line .pay_method:checked + label{ width: 45%;	background: var(--color-green);	 color: var(--color-white); border: 0; }

	.input-area .line .birth { width: calc(76% - 8px); height: 26px; line-height: 26px; font-size: 1.7em; color: var(--color-black);  padding-top: 10px; }

	.input-area .line .phone {width: calc(76% - 8px); height: 26px; line-height: 26px; font-size: 1.7em; color: var(--color-black);  padding-top: 10px; }
	.input-area .line .btn_search_address { width: 24%; height: 50px; line-height: 50px; font-size: 1.7em; font-weight: 600;	border-radius: 6px; cursor: pointer; }
	.input-area .line .btn_auth { width: 24%; height: 50px; line-height: 50px; font-size: 1.7em; font-weight: 600;	border-radius: 6px; cursor: pointer; }
	.input-area .line .address {width: calc(76% - 8px); height: 26px; line-height: 26px; font-size: 1.7em; color: var(--color-black);  padding-top: 10px; }
	.input-area .line .detail-address {width: 100%); height: 26px; line-height: 26px; font-size: 1.7em; color: var(--color-black);  padding-top: 10px; }
	.input-area .line .info { font-size: 1.4em; color: var(--color-green);  }

	
	.action_before { background-color: var(--color-blue); color: var(--color-white); }
	.action_after { background-color: var(--color-green); color: var(--color-white); }
	
	.input-area .line .term_title {width: calc(76% - 8px); font-weight: 600; font-size: 1.8em;}
	.input-area .line .term_info { width: 100%; font-weight: 600; font-size: 1.4em; margin-top: 20px; color: var(--color-darkgrey); }
	.input-area .line .btn_agree { width: 24%; height: 50px; line-height: 50px; font-size: 1.7em; font-weight: 600; border-radius: 6px; cursor: pointer; }

	.input-area .line .emp_title {width: 100%; font-weight: 600; font-size: 1.8em; padding-bottom: 20px; margin-top: 20px; }
	.input-area .line .emp_info { font-size: 0.8em;}
	.input-area .line .emp_number {width: 94px; height: 94px; border: 1px solid var(--color-grey); border-radius: 4px;
			text-align: center; font-size: 2.4em; font-weight: 800; }
	

	.input-area .next_line { position: relative; width: 100%; height: 200px; display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: wrap; gap: 4px;
			padding: 20px 0px 0px 0px; margin-bottom: 40px;}

	.input-area .next_line .btn_sinchung { 
			font-size: 4.2em; border-radius: 10px; font-weight: 800; 
			width: 80%; height:100px; line-height:100px; cursor: pointer;
			box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
           background: linear-gradient(45deg, #5ee4c3, #5808fb, #5808fb, #9929ea );
            background-size: 400% 400%;	animation: gradient 5s ease infinite;
            color:#fff; transition: all 0.5s; }

	.input-area .term-line { width: 100%; height: auto; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;  gap: 10px;
			border-bottom: 1px solid var(--color-grey); padding: 30px 0px 6px 0px;}
	.input-area .term-line div { display: flex; flex-direction: row; justify-content: center; align-items: flex-start; gap: 10px; font-size: 14px; }
	.input-area .term-line div .checkbox { width: 30px; height: 30px; }
	.input-area .term-line .term_title {width: calc(76% - 8px); font-weight: 600; font-size: 1.8em;}

	.input-area .term-line .btn-view-term { width: 40px; height: 20px; line-height: 20px; font-size: 0.9em; color: var(--color-black); background: var(--color-grey); border-radius: 6px;}

	/* 약관 */
	.term-layer { width: 100%; display: flex; justify-content: center; align-items: center; }
	.term-layer img { width: 100%;}	


	#complete_page .image-wrap { position: relative; width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; }
	#complete_page .content-wrap {width: calc(100% - 60px); padding: 30px; 
						display: flex; justify-content: center; align-items: center; flex-direction: column; flex-wrap: wrap; gap: 20px; }


	#complete_page .image-wrap .btn-complete { position: absolute; top: 1170px; left: 50%; transform: translate(-50%, 0);
						width: 480px; height: 80px; border-radius: 20px; cursor: pointer;
						display: flex; justify-content: center; align-items: center;  font-size: 2.6em; font-weight: 800;			
						color: var(--color-white); background: var(--color-black);}	

	.complete-text-wrap { position: absolute;
						display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 40px;
						width: 100%; top: 380px; left: 0px; color: var(--color-white); font-size: 24px; text-align: center;  }


	#complete_page .footer-wrap { width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column;
						padding: 0; }



	.tosspay { width: 220px; }	
	
}



/***********************************************************************************************  	
	mobile style
***********************************************************************************************/

@media (max-width: 768px){		

	table { width: 100%; border: 2px solid var(--color-sky); border-collapse: collapse; }
	th, td { border : 1px solid var(--color-lightgrey); padding: 8px;}
	th {background-color: var(--color-lightsky); width: 15%;  }

	#fix_btn { position: fixed; bottom: 10px; right: 0px; width: 90px; height: 90px; z-index: 100; cursor: pointer; border-radius: 50%; color:#fff;		
		display: flex; justify-content: center; align-items: center; }
	#fix_btn img {width: 80px;}	

	input::placeholder {font-size: 0.74em;}


    

	 /***************************** 우편번호 팝업 ******************************/

	.popup-layer { position: relative; width: 100%; height: 100lvh;  overflow-y: scroll;  z-index: 300;  
						 display: none;  background: var(--color-white);}

	.popup-layer  .top-wrap {  position: fixed; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; left: 50%; top: 0; transform: translate(-50%, 0);
			width: calc(100% - 20px); height: auto; padding: 10px; background: var(--color-white); }

	.popup-layer  .content-wrap { width: calc(100% - 20px); padding: 80px 10px 10px 10px; 
						display: flex; flex-direction: column; gap: 20px; }

	.popup-layer  .top-wrap .pop-title { font-size: 1.7em; font-weight: 800; }
	.popup-layer  .top-wrap .pop-close { font-size: 2.6em; font-weight: 800; cursor: pointer; }	


	.popup-layer .content-wrap .term-layer { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; font-size: 1.0em;    }
	.popup-layer .content-wrap .term-layer h4 { font-size: 1.1em; font-weight: 800;  }
	.popup-layer .content-wrap .term-layer h3 { font-size: 0.9em; font-weight: 800;  }
	.popup-layer .content-wrap .term-layer ol { display: block;   list-style-type: decimal;
							  margin-block-start: 0em;
							  margin-block-end: 0em;
							  margin-inline-start: 0px;
							  margin-inline-end: 0px;
							  padding-inline-start: 0px;}

	.popup-layer .content-wrap .term-layer .indent { padding: 6px; }
	.popup-layer .content-wrap .term-layer a { color: var(--color-blue);}
	.popup-layer .content-wrap .term-layer table { margin-top: 6px; }


	/***************************** 팝업 끝 ****************************/
	
	
	section { position: relative; width: 100%; height: auto; display: flex; justify-content: center; align-items: center; flex-direction: column; }	

	#main_page {width: 100%; background: var(--color-lightgrey);}	
	#main_page img {width: 100%;}
	#input_page { position: fixed; top: 0; left: 50%;  transform: translate(-50%, 0); width: 100%; z-index: 100; 
						 display: none; }

	#main_page .image-wrap { width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; }
	#main_page .content-wrap { width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 40px; padding-top: 40px; }

	#main_page .content-wrap .content-title { width: 100%; font-size: 1.8em; text-align: center; font-weight: bold; 
						color: var(--color-black); margin-bottom: -20px;}

	#main_page .content-wrap .content-box { display: flex; justify-content; align-items: center;
						width: calc(96% - 20px); 	border-radius: 5%; background: #ffffff;
					-webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03), 0 3px 10px rgba(0, 0, 0, 0.03);
						 -moz-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03), 0 3px 10px rgba(0, 0, 0, 0.03);
						 -ms-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03), 0 3px 10px rgba(0, 0, 0, 0.03);
						 -o-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03), 0 3px 10px rgba(0, 0, 0, 0.03);
						 box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03), 0 3px 10px rgba(0, 0, 0, 0.03);  }


	#main_page .footer-wrap { width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column;
						padding: 0 0 70px 0; }


	#main_page .fixed-wrap { position: fixed; left: 50%;  transform: translate(-50%, 0); bottom: 0; 
						width: calc(100% - 80px); height: 71px; display: flex; justify-content: center; align-items: center; flex-direction: row;
						padding: 0 40px; }


	#main_page .fixed-wrap .btn-shinchung { width: 90%; height: 60px; border-radius: 20px; cursor: pointer;
						display: flex; justify-content: center; align-items: center;  font-size: 20px; font-weight: 800;			
						color: var(--color-white); background: linear-gradient(45deg, #5ee4c3, #5808fb, #5808fb, #9929ea );
					    background-size: 200% 200%;	animation: gradient 5s ease infinite; 	transition: all 0.5s;}


	#input_page { position: fixed; left: 50%; top: 0;  transform: translate(-50%, 0%); width: 100%; height: 100%; z-index: 100; 
						 display: none; background-color: var(--color-white);  }
	#input_page::-webkit-scrollbar {  display: none; }


	/* input page input_area */
	.fixed-area {
			display: flex; flex-direction: row; justify-content: space-between; align-items: center;
			width: calc(100% - 20px); padding: 10px; background: var(--color-white);}
	.fixed-area .pop-title { font-size: 1.6em; font-weight: 800; }
	.fixed-area .pop-close { font-size: 2.6em; font-weight: 800; cursor: pointer; }

	.input-area {display: flex; flex-direction: column; justify-content: center; align-items: center;
			width: calc(100% - 30px); height: auto; padding: 240px 15px 15px 15px; background-color: var(--color-white);  overflow-y: auto; }

	.input-area .line { width: 100%; height: auto; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 2px;
			border-bottom: 1px solid var(--color-grey); padding: 30px 0px 6px 0px;}

	.input-area .line .title {width: 60%; font-weight: 600; font-size: 1.4em;}
	.input-area .line .name {width: 100%; height: 26px; line-height: 26px; font-size: 1.5em; color: var(--color-black);  padding-top: 10px; }

	.input-area .line .gender{	display:none;}
	.input-area .line .gender + label{ display: block; background:#fff;	border:1px solid var(--color-grey); border-radius: 6px; 
			width: calc(20% - 2px); height: 40px; line-height: 40px; text-align:center; font-size: 1.2em; font-weight: 600;
			cursor: pointer;}
	.input-area .line .gender:checked + label{ background: var(--color-green);	 color: var(--color-white); border: 0; }

	.input-area .line .pay_method{	display:none;}
	.input-area .line .pay_method + label{ display: block; background:#fff;	border:1px solid var(--color-grey); border-radius: 6px; 
			width: calc(47% - 2px); height: 40px; line-height: 40px; text-align:center; font-size: 1.2em; font-weight: 600;
			cursor: pointer;}
	.input-area .line .pay_method:checked + label{ background: var(--color-green);	 color: var(--color-white); border: 0; }

	.input-area .line .birth {width: calc(60% - 8px); height: 26px; line-height: 26px; font-size: 1.5em; color: var(--color-black);  padding-top: 10px; }

	.input-area .line .phone {width: calc(60% - 8px); height: 26px; line-height: 26px; font-size: 1.5em; color: var(--color-black);  padding-top: 10px; }
	.input-area .line .btn_auth { width: 40%; height: 40px; line-height: 40px; font-size: 1.4em; font-weight: 600;	border-radius: 6px; cursor: pointer; }
	.input-area .line .btn_search_address { width: 24%; height: 40px; line-height: 40px; font-size: 1.4em; font-weight: 600;	border-radius: 6px; cursor: pointer; }

	.input-area .line .address {width: 100%; height: 26px; line-height: 26px; font-size: 1.5em; color: var(--color-black);  padding-top: 10px; }
	.input-area .line .detail-address {width: 100%; height: 26px; line-height: 26px; font-size: 1.5em; color: var(--color-black);  padding-top: 10px; }
	.input-area .line .info { font-size: 1.1em; color: var(--color-green);  }
	
	.action_before { background-color: var(--color-blue); color: var(--color-white); }
	.action_after { background-color: var(--color-green); color: var(--color-white); }
	
	.input-area .line .term_title {width: calc(60% - 8px); font-weight: 600; font-size: 1.4em;}
	.input-area .line .term_info { width: 100%; font-weight: 600; font-size: 1.0em; margin-top: 10px; color: var(--color-darkgrey); }
	.input-area .line .btn_agree { width: 40%; height: 40px; line-height: 40px; font-size: 1.4em; font-weight: 600; border-radius: 6px; cursor: pointer; }

	.input-area .line .emp_title {width: 100%; font-weight: 600; font-size: 1.8em; padding-bottom: 20px; margin-top: 10px; }
	.input-area .line .emp_info { font-size: 0.8em;}
	.input-area .line .emp_number {width: 42px; height: 42px; border: 1px solid var(--color-grey); border-radius: 4px;
			text-align: center; font-size: 2.4em; font-weight: 800; }
	

	.input-area .next_line { position: relative; width: 100%; height: 100px; display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: wrap; gap: 4px;
			padding: 20px 0px 0px 0px; margin-bottom: 40px;}

	.input-area .next_line .btn_sinchung {  text-align:center; 
			 font-size: 1.8em; border-radius: 10px; font-weight: 800;
			width: 100%; height: 60px; line-height: 60px; cursor: pointer;
			box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
            background: linear-gradient(-45deg, #9929ea, #9929ea, #5808fb, #5808fb );
          /*  background-size: 400% 400%;	animation: gradient 5s ease infinite;*/
            color:#fff; transition: all 0.5s; }
	
	/* close input page input-area */


	.input-area .term-line { width: 100%; height: auto; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;  gap: 6px;
			border-bottom: 1px solid var(--color-grey); padding: 30px 0px 6px 0px;}
	.input-area .term-line div { display: flex; flex-direction: row; justify-content: center; align-items: flex-start; gap: 10px; font-size: 1.2em; }
	.input-area .term-line div .checkbox { width: 20px; height: 20px; }
	.input-area .term-line .term_title {width: calc(60% - 8px);  font-weight: 600; font-size: 1.7em;}


	.input-area .term-line .btn-view-term { width: 40px; height: 20px; line-height: 20px; font-size: 0.9em; color: var(--color-black); background: var(--color-grey); border-radius: 6px;}


	/* 약관 */
	.term-layer { width: 100%; display: flex; justify-content: center; align-items: center; }
	.term-layer img { width: 100%;}


	#complete_page  { position: relative; width: 100%; height: 100%; }
	#complete_page .image-wrap { position: relative; width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; }
	#complete_page .content-wrap { width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 40px;}
	#complete_page img {width: 100%;}

	#complete_page .image-wrap .btn-complete { position: absolute; bottom: 20px; left: 50%; transform: translate(-50%, 0);
						width: 70%; height: 40px; border-radius: 20px; cursor: pointer;
						display: flex; justify-content: center; align-items: center;  font-size: 1.4em; font-weight: 800;			
						color: var(--color-white); background: var(--color-black);}

	.complete-text-wrap { position: absolute;
						display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 40px;
						width: 100%; top: 160px; left: 0px; color: var(--color-white); font-size: 1.2em; text-align: center;  }


	#complete_page .footer-wrap { width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column;
						padding: 0; }



	.tosspay { width: 120px; }	
	


	
}