@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;
}

@font-face {
    font-family: 'OAGothic-ExtraBold';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.0/OAGothic-ExtraBold.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
 font-family: 'NanumBarunGothic';
 font-style: normal;
 font-weight: 400;
 src: url('//fastly.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWeb.eot');
 src: url('//fastly.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWeb.eot?#iefix') format('embedded-opentype'), url('//fastly.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWeb.woff') format('woff'), url('//fastly.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWeb.ttf') format('truetype');
}

@font-face {
	font-family: 'S-CoreDream-3Light';
	src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 100;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 300;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 400;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 500;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 700;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 900;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');}





@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)
    }
  }

  @keyframes loadingC {
	0% {
	  transform: translate(0, 0);
	}
	50% {
	  transform: translate(0, 15px);
	}
	100% {
	  transform: translate(0, 0);
	}
  }



/* 폰트 확대 방지 */
html {
  font-size: 14px;
  -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: 'Noto Sans KR', sans-serif;
	font-size: 14px;
	letter-spacing:-0.03em;
	margin:0;
}

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


/*
ul, li, ol {
	list-style:none;
}
*/


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: 12px; height: 8px;} /*스크롤바의 너비*/
body::-webkit-scrollbar-thumb { background-color: var(--color-darkpurple); /*스크롤바의 색상*/  
    background-clip: padding-box;  border: 2px solid transparent;	 border-radius: 1em; }
body::-webkit-scrollbar-track { background-color: var(--color-white);} /*스크롤바 트랙 색상*/


/* popup overlay */
#overlay, 
#loading-bar,
#footer-modal-overlay {  background-color: rgba(0, 0, 0, 0.5); bottom: 0; left: 0;  /* IE7 & 8 */ position: fixed; right: 0; top: 0; z-index: 300; display:none;  }


/* 색상변수 */
:root {		
	--color-white:			#ffffff;
	--color-black:			#1e1e1e;
	--color-grey:			#e3e1e3;
	--color-darkgrey:		#8d8d8d;
	--color-lightgrey:		#f4f5f7;	
	--color-darkpurple:     #462581;
	--color-purple:			#8b5cf6;
	--color-lightpurple:	#d1bffb;
	--color-blue:			#007cfe;
	--color-darkblue:		#302d9d;
	--color-lightblue:		#ddedfd;
	--color-green:			#00fb81;	
	--color-sky:			#01cafe;	
	--color-orange:			#f0ad4e;	
	--color-red:			#d9534f;		
}




.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;}
			
.bottom-shadow {
	-webkit-box-shadow: 0 6px 6px -6px #777;
	-moz-box-shadow: 0 6px 6px -6px #777;
   box-shadow: 0 6px 6px -6px #777;	}

.box-shadow {-webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
	-moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
	-ms-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
	-o-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }

.align-center-center { display: flex; justify-content: center; align-items: center; }
.text-white { color: var(--color-white); border: 1px solid red; }


/* 로딩 바 */
.loading-wrapp {
	position: fixed;	width: 150px;	height: 150px; top: 50%; left: 50%; transform: translate(-50%, -50%);	
	padding: 20px 20px;
	border-radius: 10px;
	text-align: center;
	background-color:var(--color-white);
  }
  
.loading-wrapp .main-text {	padding: 20px 0; font-size: 1.1rem; color: var(--color-darkpurple);  }
.loading-wrapp .sub-text {	padding: 30px 0; font-size: 0.9rem; color: var(--color-darkgrey); }
.loading-wrapp:last-child {	margin-right: 0;  }
.loading-wrapp .line {	display: inline-block;	width: 15px;	height: 15px;	border-radius: 15px;  }
.loading-wrapp .line:nth-last-child(2) {background: var(--color-red); animation: loadingC 0.6s 0.1s linear infinite; }
.loading-wrapp .line:nth-last-child(3) {background: var(--color-blue); animation: loadingC 0.6s 0.2s linear infinite; }
.loading-wrapp .line:nth-last-child(4) {background: var(--color-green); animation: loadingC 0.6s 0.3s linear infinite; }






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

		/* 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: 10px;
				/*border-bottom: 1px solid var(--color-grey);*/ padding: 30px 0px 6px 0px;}
	
		.input-area .line .title {width: 100%; padding-bottom: 20px; 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 .counsel-time{	display:none;}
		.input-area .line .counsel-time + label{ display: block; flex-grow: 1; 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 .counsel-time:checked + label{ width: 12%;	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);  }
	
		.input-area .line .select-area { width: 100%; padding: 14px; 
					border-radius: 6px; border:1px solid var(--color-grey);
					text-align:center; font-size: 1.6em; font-weight: 600;  }
	
		
		.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: 150px 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: 80px; height: 20px; line-height: 20px; font-size: 0.9em; color: var(--color-black); background: var(--color-grey); border-radius: 6px; cursor: pointer;}
	
	.box-radius { border-radius: 40px; }

	.page-wrapper { position: relative;  width: 100%;  height: auto; 
		display: flex; justify-content: center; align-items: center; flex-direction: column; 
		background: var(--color-white); gap: 20px; 
		/*background: linear-gradient(180deg, #7729b3, #fe5d93);*/ }	

	#topButton { display: none; position: fixed; bottom: 100px; right: 100px; border-radius: 50%; background: var(--color-white); 
		width: 100px; height: 100px; justify-content: center; align-items: center; line-height: 120px; text-align: center; cursor: pointer; 
		-webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
		-moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
		-ms-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
		-o-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); z-index: 200;  }

	#topButton .material-icons {font-size: 2.0rem; font-weight: 100; }

    header { position: fixed; top: 0; left: 0;   width: calc(100% - 40px); height: 60px;  padding: 20px; background: var(--color-white); 
		display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 100; }

	main { position: relative; width: calc(100% - 40px); height: calc(100% - 300px); padding: 0px 20px; margin-top: 100px; min-width: 1200px;
		display: flex; flex-direction: column; justify-content: center; align-items: center; }

	footer { position: relative; width: calc(100% - 40px); height: auto; padding: 20px; min-width: 1200px;
		display: flex; flex-direction: column; justify-content: center; align-items: center;
		background: var(--color-black);}


	.logo-img { width: 280px; }


/* mobile nav-btn */
.mobile-nav-btn { display: none; }


/* popup layer */
.popup-layer { display: none; position: relative; width: calc(1100px - 40px); height: calc(100vh - 200px); flex-direction: column; align-items: center; padding: 20px;  z-index: 1; 
	background: var(--color-white); margin: 80px auto; overflow-y: scroll; border-radius: 20px; font-size: 1.1rem; }

.popup-layer .title-line { position: fixed; width: calc(1100px - 40px); height: 80px; font-size: 1.2rem; font-weight: 600; left: 50%; top: 80px; transform: translate(-50%, 0);
	 display: flex; justify-content: space-between; align-items: center; background: var(--color-white); z-index: 2;  }
.popup-layer .title-line .btn-pop-close::before,
.popup-layer .title-line .btn-pop-close::after { position: absolute; right: 20px; top: 20px; content:''; height: 40px; width: 4px; background: var(--color-black); z-index: 1; } 
.popup-layer .title-line .btn-pop-close::before {transform: rotate(45deg);} 
.popup-layer .title-line .btn-pop-close::after {transform: rotate(-45deg);}
.popup-layer .title-line .btn-pop-close { cursor: pointer; }


.popup-layer .term-content { position: relative; width: calc(100% - 40px); height: auto; padding: 100px 20px; }

.popup-layer .term-content .line { display: flex; justify-content: flex-start; align-items: center; gap: 10px;}

.popup-layer .term-content .line .agree-termination{	display:none;}
.popup-layer .term-content .line .agree-termination + label{ display: block; background:#fff;	border:1px solid var(--color-grey); border-radius: 40px; 
			width: 98px; height: 50px; line-height: 50px; text-align:center; font-size: 1.0em; font-weight: 600;
			cursor: pointer;}
.popup-layer .term-content .line .agree-termination:checked + label{ width: 100px;	background: var(--color-blue);	 color: var(--color-white); border: 0; }

.popup-layer .bottom-line { position: fixed; width: calc(1100px - 40px); height: 80px; font-size: 1.2rem; font-weight: 600; left: 50%; bottom: 80px; transform: translate(-50%, 0);
	display: flex; justify-content: space-between; align-items: center; background: var(--color-white); z-index: 2;  }


.popup-layer .bottom-line .btn-agree-term { padding: 10px 20px; background: var(--color-blue); color: var(--color-white); font-size: 1.2rem; border-radius: 20px; }

.popup-layer .bottom-line { display: flex; justify-content: flex-end; align-items: center; }

.popup-layer::-webkit-scrollbar { width: 12px; height: 8px;} /*스크롤바의 너비*/
.popup-layer::-webkit-scrollbar-thumb { background-color: var(--color-darkpurple); /*스크롤바의 색상*/  
    background-clip: padding-box;  border: 2px solid transparent;	 border-radius: 1em; }
.popup-layer:-webkit-scrollbar-track { background-color: var(--color-white);} /*스크롤바 트랙 색상*/

/* log in */
.login-wrapper { width: 1000px; display: flex; flex-direction: column; align-items: center; padding-top: 50px; }

.login-wrapper .title-line { position:relative; width: 100%; display: flex; justify-content: space-between; align-items: center;  }
.login-wrapper .title-line .login-title {  font-size: 2.6rem; font-weight: 900; }
.login-wrapper .title-line .btn-login-cancel::before,
.login-wrapper .title-line .btn-login-cancel::after {position: absolute; right: 14px; top: 6px; content:''; height: 40px; width: 2px; background: var(--color-black);} 
.login-wrapper .title-line .btn-login-cancel::before {transform: rotate(45deg);} 
.login-wrapper .title-line .btn-login-cancel::after {transform: rotate(-45deg);}


.login-wrapper .title-line .btn-login-cancel { cursor: pointer; }


.login-wrapper .input-container .line .phone {width: calc(76% - 8px); height: 26px; line-height: 26px; font-size: 1.3em; color: var(--color-black);  padding-top: 10px; }
.login-wrapper .input-container .line .btn-search-address { width: 24%; height: 50px; line-height: 50px; font-size: 1.3em; font-weight: 600;	
	border-radius: 40px; cursor: pointer; background: var(--color-blue); color: var(--color-white); }
.login-wrapper .input-container .line .btn_auth { width: 24%; height: 50px; line-height: 50px; font-size: 1.3em; font-weight: 600;	border-radius: 6px; cursor: pointer; }
.login-wrapper .input-container .line .address {width: calc(76% - 8px); height: 26px; line-height: 26px; font-size: 1.3em; color: var(--color-black);  padding-top: 10px; }
.login-wrapper .input-container .line .detail-address {width: 100%; height: 26px; line-height: 26px; font-size: 1.3em; color: var(--color-black);  padding-top: 10px; }
.login-wrapper .input-container .line .btn-join { width: calc(60% - 40px); padding: 20px; background: var(--color-darkblue); color: var(--color-white); 
	font-size: 1.6rem; font-weight: 600; border-radius: 40px;  cursor: pointer; }

.login-wrapper .input-container .line .term-title {width: calc(76% - 8px); font-weight: 600; font-size: 1.8em;}

.login-wrapper .term-line { width: 100%; height: auto; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;  gap: 6px;
	padding: 30px 0px 6px 0px; gap: 20px;}
.login-wrapper .term-line .term-title {width: calc(60% - 8px);  font-weight: 600; font-size: 1.4em;}

.login-wrapper .term-line .input-line { position: relative; width: 100%; display: flex; flex-direction: row; justify-content: space-between; flex-grow:  1; align-items: center; gap: 10px;  }
.login-wrapper .term-line .input-line .title { width: 80%; font-size: 1.2rem; font-weight: 500; }
.login-wrapper .term-line .input-line .inp-tel { width: calc(90% - 60px); font-size: 1.0rem; font-weight: 500; border: 1px solid var(--color-grey); border-radius: 6px; padding: 10px; }
.login-wrapper .term-line .input-line .inp-auth { width: 100%; font-size: 1.0rem; font-weight: 500; border: 1px solid var(--color-grey); border-radius: 6px; padding: 10px; }
.login-wrapper .term-line .input-line .btn-auth { display: flex; justify-content: center; align-items: center; font-size: 1.0rem; padding: 10px 15px;	
	background: var(--color-darkpurple); color: var(--color-white); border-radius: 40px; cursor: pointer; }

.login-wrapper .term-line .input-line .btn-login { width: 80%; padding: 20px; background: var(--color-purple); color: var(--color-white); font-size: 2.0rem; font-weight: 600; margin: 20px auto;
	border-radius: 40px; cursor: pointer;  }



.login-wrapper .term-line .check-line { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 10px; font-size: 1.1rem; }

.login-wrapper .term-line .check-line .checkbox { width: 20px; height: 20px; }
.login-wrapper .term-line .check-line .btn-special { display: flex; justify-content: center; align-items: center; font-size: 1.0rem; padding: 4px 10px;
	background: var(--color-grey); color: var(--color-darkgrey); border-radius: 40px; cursor: pointer;  }

.login-wrapper .term-line .check-line .btn-view-term { padding: 4px 10px; background: var(--color-grey); color: var(--color-darkgrey); border-radius: 10px; cursor: pointer;}

.login-wrapper .term-line .term-box { width: calc(100% - 42px); padding: 20px; min-height: 100px; max-height: 100px;  overflow-y: auto; border: 1px solid var(--color-grey); font-size: 0.9rem; text-align: left;  }

.login-wrapper .term-line .term-box::-webkit-scrollbar { width: 12px; height: 8px;} /*스크롤바의 너비*/
.login-wrapper .term-line .term-box::-webkit-scrollbar-thumb { background-color: var(--color-darkpurple); /*스크롤바의 색상*/  
    background-clip: padding-box;  border: 2px solid transparent;	 border-radius: 1em; }
.login-wrapper .term-line .term-box::-webkit-scrollbar-track { background-color: var(--color-white);} /*스크롤바 트랙 색상*/

.login-wrapper .border-wrapper { width: calc(100% - 80px); border: 4px solid var(--color-darkblue); padding: 40px; border-radius: 40px; }


/* start navigation style */

.nav-wrapper {  width: 80%; min-width: 1200px; 
	display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; }	

.nav-wrapper .logo { width: 180px; }
.nav-wrapper .logo > img { width: 100%; }


.nav-wrapper ul { list-style: none;}
	
	
.nav-wrapper .main-menu { display: flex; justify-content: center; align-items: center; gap: 0px; }
.nav-wrapper .main-menu .main-item { position:relative; font-size: 1.1rem; font-weight: normal; cursor: pointer; line-height: 20px; padding: 10px 14px;}
/*.nav-wrap .main-menu .main-item:hover { border-radius: 20px; background: var(--color-lightblue);			}*/

/* 메뉴 버튼 애니메이션 */
.nav-wrapper .main-item { 		  text-decoration: none;		  position: relative;		  transition: all 0.5s;		  z-index: 2;		}
.nav-wrapper .main-item::before,
.nav-wrapper .main-item::after {
	  content: "";
	  position: absolute;
	  height: 50%;
	  width: 0;
	  background-color: #e8ebfe;		  		  
	  transition: all 0.5s;
	  z-index: -1;		}
.nav-wrapper .main-item::before { 		  right: 0;		  top: 0;		}
.nav-wrapper .main-item::after {		  left: 0;		  bottom: 0; 		}
.nav-wrapper .main-item:hover::before,
.nav-wrapper .main-item:hover::after {		  width: 100%;			}

.nav-wrapper .sub-menu { position:absolute; left:0; top:40px; height: 0; text-align:center; 
	width: 100%; padding: 20px 10px 20px 10px; background: var(--color-white);  border-radius: 10px; 
	justify-content: center; align-items: center; gap: 10px; flex-direction: column; opacity: 0; transition: all  .5s ease; 
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
	  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
	  -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
	  -o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
	  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 	}
.nav-wrapper .sub-menu .sub-item { width: calc(100% - 20px); cursor: pointer; padding: 10px; text-align: left; font-size: 0.86rem;
text-decoration: underline 0.15em rgba(0, 124, 254, 0);
 transition: text-decoration-color 300ms;}
.nav-wrapper .sub-menu .sub-item:hover { color: var(--color-darkpurple); text-decoration-color:var(--color-purple); }

.nav-wrapper .main-menu .main-item:hover .sub-menu { height: auto;   opacity: 1; transform: translateY(0); }	


.nav-wrapper .btn-nav-login { width: auto; padding: 5px 20px; background: var(--color-darkpurple); color: var(--color-white); border-radius: 40px; font-size: 1.1em; 
		cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 6px; }

/* end navigation style */


/* start main style */
.main-wrapper { position: relative; width: 80%; min-width: 1200px; 
			display: flex; flex-direction: column; justify-content: center; align-items: center; flex-wrap: wrap; gap: 60px; }		
			
.slider-wrapper { position: relative; width: 100%; height: 900px; /*background: linear-gradient(180deg, #eceffe, #b4b9fe); */   
			/*background-image: url('../images/slide_01.png');
			background-size: cover;
			background-repeat: no-repeat;
			background-color: #725ceb;
			background-position: center center;				*/
			/*background : radial-gradient(#d5d8fa, #a1a0ec) ;*/
			background : radial-gradient(#d5d8fa, var(--color-lightgrey)) ;
			border-radius: 40px;
			display: flex; flex-direction: row; justify-content: space-between; align-items: center; 			}
				


.slider-wrapper .text-container { width: 45%; padding-left: 5%; ;
				display: flex; justify-content: flex-start; flex-direction: column; align-items: center; z-index: 1; gap: 30px;   }
.slider-wrapper .text-container .main-text { width: 100%; font-size: 3.4rem; color: var(--color-darkpurple); /*-webkit-text-stroke-width: 2px;	-webkit-text-stroke-color: var(--color-green);*/ font-weight: 900; text-align: left; }
.slider-wrapper .text-container .sub-text {  width: 100%; font-size: 1.6rem; color: var(--color-darkpurple); font-weight: 500; text-align: left; }
.slider-wrapper .text-container .info-text { width: 100%; font-size: 1.2rem; color: var(--color-darkpurple); font-weight: 300; text-align: left; }	
.slider-wrapper .text-container .btn-membership { display: block; width: auto; min-width: 300px; height: 80px; padding: 0px 40px; font-size: 1.3rem; 
			color: var(--color-white);
			border-radius: 40px; background: var(--color-purple); font-weight: 300; text-align: left; cursor: pointer;
			display: flex; justify-content: center; align-items: center; align-self : flex-start }
.slider-wrapper .text-container .btn-membership	.material-icons { margin-left: 10px;}
.slider-wrapper .img-container { width: 50%;    }
.slider-wrapper .img-container > img { height: 900px; border-radius: 40px; position: absolute; top: 0; right: 0; }

.quick-service-wrapper { position: relative; width: 100%; height: auto;  
			display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
.quick-service-wrapper .title-container {  width: calc(100% - 80px); height: auto; background: var(--color-white); padding: 40px;
		display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 30px;
		/*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
		font-size: 1.2rem; }
.quick-service-wrapper .title-container .title { font-size: 3.4rem; font-weight: 800;}
.quick-service-wrapper .title-container .sub-title { font-size: 1.3rem; font-weight: 100; }
.quick-service-wrapper .title-container img { width: 200px; }
.quick-service-wrapper .content-container {  width: calc(100% - 80px); height: auto; padding: 40px; 
	display: flex; justify-content: center; align-items: center; flex-direction: row; gap: 30px; }
.quick-service-wrapper .content-container .service-box { position: relative;
	 box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); border-radius: 40px; width: 500px; min-height: 400px;  perspective: 1000px;}
.quick-service-wrapper .content-container .service-box	 .box-inner {
		position: relative;
		width: 100%;
		height: 100%;
		transition: transform 0.6s;
		transform-style: preserve-3d; 		  }
	  
.quick-service-wrapper .content-container .service-box:hover .box-inner {
		transform: rotateY(180deg); 		  }
	  
.quick-service-wrapper .content-container .service-box .box-front,
.quick-service-wrapper .content-container .service-box .box-back {
		position: absolute;
		width: 100%;
		height: 400px;
		backface-visibility: hidden;
		display: flex; flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 40px;		  }
	  
.quick-service-wrapper .content-container .service-box  .box-front {
		background: var(--color-white);		}
	  
.quick-service-wrapper .content-container .service-box  .box-back {
		background: var(--color-purple);
		color: var(--color-white);
		transform: rotateY(180deg); 	}
.quick-service-wrapper .content-container .service-box .icon-img { width: 150px; }
.quick-service-wrapper .content-container .service-box .btn-detail { padding: 10px 20px; color: var(--color-purple); font-size: 1.3rem;
		background: var(--color-lightpurple); border-radius: 40px;	cursor: pointer;	 }
.quick-service-wrapper .content-container .service-box .title-text { font-size: 1.6rem; font-weight: 700; padding-top: 40px;}
.quick-service-wrapper .content-container .service-box .content-text { width: 80%; font-size: 1.2rem; font-weight: 300; text-align: center; padding-top: 20px; }
.service-wrapper { position: relative; width: 100%; height: auto;  background: var(--color-white);
	display: flex; flex-direction: column; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: 40px; }
.service-wrapper .service-container { width: 100%; }
.service-wrapper .service-container  .title-container {  width: calc(100% - 80px); height: auto; background: var(--color-white); padding: 40px;
		display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 30px;
		/*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
		font-size: 1.2rem; }	
.service-wrapper .service-container  .title-container .title { font-size: 3.4rem; font-weight: 800;}
.service-wrapper .service-container  .title-container .sub-title { font-size: 1.3rem; font-weight: 100; text-align: center; }
.service-wrapper .service-container  .content-container {  width: calc(100% - 80px); height: auto;  padding: 40px; 
	display: flex; justify-content: center; align-items: center; flex-direction: row; gap: 100px; }
.bg-image-container-purple { background: var(--color-lightpurple); border-radius: 40px; }
.bg-image-container-darkpurple { background: var(--color-darkpurple); border-radius: 40px; }
.bg-image-container-grey { background: var(--color-lightgrey); border-radius: 40px; }


.quick-service-wrapper .content-container .insure-box { position: relative; background: var(--color-white);
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); border-radius: 40px; width: calc(500px - 80px); padding:40px; min-height: 400px;
	display: flex; flex-direction: column; justify-content: flex-start; align-items: center; cursor: pointer;  }

.quick-service-wrapper .content-container .insure-box .title-text { font-size: 1.4rem; font-weight: 800; color: var(--color-darkpurple); }
.quick-service-wrapper .content-container .insure-box .accent-text { font-size: 2.2rem; font-weight: 800; color: var(--color-purple); }
.quick-service-wrapper .content-container .insure-box .accent-text-grey { font-size: 1.5rem; font-weight: 400; color: var(--color-grey); }
.quick-service-wrapper .content-container .insure-box .normal-text { font-size: 1.1rem; font-weight: 300; color: var(--color-black); margin-top: 30px; }

.quick-service-wrapper .content-container .insure-box:hover { transform: translateY(-50px); }


.quick-service-wrapper .content-container .shingan-service-box { position: relative; background: var(--color-white);
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); border-radius: 40px; width: calc(500px - 80px); padding:40px; min-height: 200px;
	display: flex; flex-direction: column; justify-content: flex-start; align-items: center; cursor: pointer; gap: 40px;   }

.quick-service-wrapper .content-container .shingan-service-box .title-text { font-size: 1.4rem; font-weight: 800; color: var(--color-darkpurple); }
.quick-service-wrapper .content-container .shingan-service-box img { width: 200px;}


.quick-service-wrapper .detail-content-container {  width: calc(100% - 80px); height: auto; padding: 20px; 
	display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 30px; }

.quick-service-wrapper .detail-content-container .line { width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: row; gap: 30px;}


.quick-service-wrapper .detail-content-container .line .detail-service-box { position: relative; background: var(--color-white);
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);  width: 50%; padding:40px; min-height: 400px;
	display: flex; flex-direction: column; justify-content: flex-start; align-items: center; cursor: pointer; text-align: center;  }

.quick-service-wrapper .detail-content-container .line .detail-service-box .title-text { font-size: 1.4rem; font-weight: 800; color: var(--color-darkpurple); }
.quick-service-wrapper .detail-content-container .line .detail-service-box .accent-text { font-size: 2.2rem; font-weight: 800; color: var(--color-purple); }
.quick-service-wrapper .detail-content-container .line .detail-service-box .accent-text-grey { font-size: 1.5rem; font-weight: 400; color: var(--color-grey); }
.quick-service-wrapper .detail-content-container .line .detail-service-box .normal-text { font-size: 1.1rem; font-weight: 300; color: var(--color-black); margin-top: 30px; }
.quick-service-wrapper .detail-content-container .line .detail-service-box .accent-small-text { font-size: 1.1rem; font-weight: 800; color: var(--color-orange); }

.border-top-left-radius {  border-top-left-radius: 40px; }
.border-top-right-radius {  border-top-right-radius: 40px; }
.border-bottom-left-radius {  border-bottom-left-radius: 40px; }
.border-bottom-right-radius {  border-bottom-right-radius: 40px; }


.quick-service-wrapper .process-container {  width: calc(100% - 80px); height: auto; padding: 40px; 
	display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 30px; }
.quick-service-wrapper .process-container .process-box { position: relative; background: var(--color-white); flex-wrap: wrap;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); border-radius: 40px; width: calc(100% - 80px); padding:40px; 
	display: flex; flex-direction: row; justify-content: flex-start; align-items: center;  }

.quick-service-wrapper .process-container .info-box { position: relative;  width: calc(100% - 40px); padding: 20px; 
		display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;  }

.quick-service-wrapper .process-container .info-box p { width: 100%; text-align: left; font-size: 1.1rem; color: var(--color-black); font-weight: 300; }

.quick-service-wrapper .process-container .info-box ul { 
	list-style-type: disc; list-style-position:outside;
	 width: calc(100%- 40px); text-align: left; font-size: 1.1rem; color: var(--color-darkgrey); font-weight: 300; padding: 20px; }


.quick-service-wrapper .process-container .info-box ul li::marker {	color: var(--color-darkgrey);	}
.quick-service-wrapper .process-container .info-box ul li { margin: 4px 0px; }


.quick-service-wrapper .process-container .process-box .count-num { width: 10%; font-size: 3.8rem; color: var(--color-purple); font-weight: 800; }
.quick-service-wrapper .process-container .process-box .prcess-text { width: 90%; font-size: 2.4rem; color: var(--color-black); font-weight: 500; }
.quick-service-wrapper .process-container .process-box .prcess-sub-text { width: 90%; padding-left: 10%; font-size: 1.1rem; color: var(--color-black); font-weight: 300; }
.quick-service-wrapper .process-container .process-box .prcess-sub-text-left { width: 100%; font-size: 1.1rem; color: var(--color-black); font-weight: 300; }
.quick-service-wrapper .process-container .process-box table { width: 100%;  margin-top: 40px; border-collapse: collapse; text-align: left; border: 1px solid var(--color-grey); }
.quick-service-wrapper .process-container .process-box table thead { text-align: center; background: var(--color-lightpurple); color: var(--color-darkpurple); font-size: 1.0rem; font-weight: 600; height: 60px;}
.quick-service-wrapper .process-container .process-box table tbody { color: var(--color-black); font-size: 0.9rem; font-weight: 300; white-space: nowrap;}
.quick-service-wrapper .process-container .process-box table th:nth-child(1) { width: 20%; border-right: 1px solid var(--color-grey); border-bottom: 1px solid var(--color-grey);}
.quick-service-wrapper .process-container .process-box table th:nth-child(2) { width: 50%; border-right: 1px solid var(--color-grey); border-bottom: 1px solid var(--color-grey);}
.quick-service-wrapper .process-container .process-box table th:nth-child(3) { width: 30%; border-bottom: 1px solid var(--color-grey);}
.quick-service-wrapper .process-container .process-box table td { border: 1px solid var(--color-grey);  padding: 5px 0px;}
.quick-service-wrapper .process-container .process-box table tr,
.quick-service-wrapper .process-container .process-box table td { padding-left: 10px;}
.quick-service-wrapper .process-container .process-box table tbody .align-center { text-align: center;}



.service-wrapper .service-container  .image-content-container .content-box { display: flex; justify-content: column; align-items: center; left: 0; top: 0;
	font-size: 1.4rem; color: var(--color-white);}

.service-wrapper .service-container  .content-container .content-box { width: calc(100% - 630px); max-width: 1000px; display: flex; flex-direction: column; gap: 20px; }
.service-wrapper .service-container  .content-container .image-box { width: 600px; }
.service-wrapper .service-container  .content-container .image-box img { width: 100%; border-radius: 40px;  }
.service-wrapper .service-container  .content-container .left-image-box { width: 800px; background: var(--color-darkpurple); border-radius: 40px; }
.service-wrapper .service-container  .content-container .right-image-box { width: calc(100% - 800px);}
.service-wrapper .service-container  .content-container .left-image-box img,
.service-wrapper .service-container  .content-container .right-image-box img { width: 100%; border-radius: 40px;}
.service-wrapper .service-container .content-container .content-box .content-text { width:100%; padding: 0px 10px;
	 font-size: 1.2rem; font-weight: 100;  }
.service-wrapper .service-container .content-container .content-box .content-text .material-icons { padding: 4px 6px 0px 0px;}
.service-wrapper .service-container .content-container .content-box .content-text .accent { font-size: 1.4rem; font-weight: 700; }
.service-wrapper .service-container .content-container .content-box .content-text .accent-purple { font-size: 1.8rem; font-weight: 900; color: var(--color-purple) ; }
.service-wrapper .service-container .content-container .content-box .content-text .accent-lightpurple { font-size: 1.8rem; font-weight: 900; color: var(--color-lightpurple) ; }
.service-wrapper .service-container .content-container .content-box .content-text .accent-white { font-size: 1.4rem; font-weight: 700; color: var(--color-white); }

.service-wrapper .service-container .content-container .content-box .btn-detail { width: 300px; height: 80px; padding: 0px 40px; margin-top: 20px; font-size: 1.2rem; color: var(--color-white);		
	border-radius: 40px; background: var(--color-purple); font-weight: 300; text-align: center; cursor: pointer;
	display: flex; justify-content: center; align-items: center; }


.title-wrapper { position: relative; width: calc(100% - 80px); padding: 40px; height: 200px; /*background: linear-gradient(180deg, #eceffe, #b4b9fe); */   
	/*background-image: url('../images/slide_01.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-color: #725ceb;
	background-position: center center;				*/
	/*background : radial-gradient(#d5d8fa, #a1a0ec) ;*/	
	background: url('../images/title-background.png') no-repeat center bottom;
	background-size: cover;
	background-attachment: fixed;
	/*background: var(--color-darkpurple);*/
	border-radius: 40px;
	display: flex; flex-direction: column; justify-content: center; align-items: center; 			}
.title-wrapper .title-text { font-size: 2.4rem; font-weight: 900; color: var(--color-darkpurple); text-align: center;}
.title-wrapper .sub-text { font-size: 1.3rem; font-weight: 100; color: var(--color-darkpurple); text-align: center; }


.service-wrapper .service-container  .content-container .page-content-box { width: 100%; display: flex; flex-direction: column;  justify-content: flex-start; align-items: center; gap: 20px; }

.service-wrapper .service-container  .content-container .page-content-box .content-title { display: flex ; justify-content: flex-start; align-items: center;
	width: 100%; font-size: 1.3rem; font-weight: 800;}

.service-wrapper .service-container  .content-container .page-content-box .address-box { width: calc(100% - 40px); padding: 20px; border-radius: 40px;
	display: flex; flex-direction: column; 	gap: 20px;}
.service-wrapper .service-container  .content-container .page-content-box .address-box .line-end { position: relative; width: 100%;  font-size: 1.0rem;
	display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 20px;  }
.service-wrapper .service-container  .content-container .page-content-box .address-box .line-between { position: relative; width: 100%;  font-size: 1.0rem;
	display: flex; flex-direction: row; justify-content: space-between; align-items: center;  gap: 20px; flex-wrap: wrap;   }
.service-wrapper .service-container  .content-container .page-content-box .address-box .line-start { position: relative; width: 100%; font-size: 1.0rem;  
	display: flex; flex-direction: column; justify-content: center; align-items: flex-start;  gap: 20px;  }
.service-wrapper .service-container  .content-container .page-content-box .address-box .line-start .input-text { 
	width: calc(100% - 20px); padding: 18px; font-size: 1.1rem; border: 1px solid var(--color-grey); border-radius: 8px; }

.service-wrapper .service-container  .content-container .page-content-box .address-box .line-between .input-text { 
	width: calc(100% - 240px); padding: 18px; font-size: 1.1rem; border: 1px solid var(--color-grey); border-radius: 8px;  }


.service-wrapper .service-container  .content-container .page-content-box .address-box .normal-text,
.service-wrapper .service-container  .content-container .page-content-box .address-box .normal-text,
.service-wrapper .service-container  .content-container .page-content-box .address-box .normal-text { width: 100%; font-size: 1.1rem; text-align: left; }


.service-wrapper .service-container  .content-container .page-content-box .address-box .info-text { width: 100%; color: var(--color-purple); font-size: 0.9rem; font-weight: 300;}




.service-wrapper .service-container  .content-container .page-content-box .address-box .btn-mod-address { width: auto; padding: 10px 20px; 
	background: var(--color-purple); color: var(--color-white); font-size: 1.0rem; border-radius: 40px; cursor: pointer; }

.service-wrapper .service-container  .content-container .page-content-box .address-box .line-between .btn-mod-complete { width: 180px; padding: 10px 20px; 
		background: var(--color-purple); color: var(--color-white); font-size: 1.0rem; border-radius: 40px; cursor: pointer;    }

.service-wrapper .service-container  .content-container .page-content-box .box-title { width: 100%; font-size: 1.1rem; font-weight: 800; }

.quick-service-wrapper .info-container {  width: calc(100% - 80px); height: auto; padding: 40px; 
	display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 30px; }


/*tab css*/
.quick-service-wrapper .info-container .tab-box { position: relative; background: var(--color-white); flex-wrap: wrap;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); border-radius: 40px; width: calc(100% - 80px); padding:40px; 
	display: flex; flex-direction: column; justify-content: flex-start; align-items: center;  }
.quick-service-wrapper .info-container .tab-box .tab-nav{font-size:0; width: 100%; border-bottom: 1px solid #ddd; border-left: 1px solid #ddd; 
	display: flex; flex-direction: row; justify-content: flex-start; align-items: center; }
.quick-service-wrapper .info-container .tab-box .tab-nav li{ width: 300px;  height:46px; text-align:center; border-right:1px solid #ddd;}
.quick-service-wrapper .info-container .tab-box .tab-nav li a:before{content:""; position:absolute; left:0; top:0px; width:100%; height:3px; }
.quick-service-wrapper .info-container .tab-box .tab-nav li a.active:before{background: var(--color-purple);}
.quick-service-wrapper .info-container .tab-box .tab-nav li a.active{border-bottom:1px solid #fff;}
.quick-service-wrapper .info-container .tab-box .tab-nav li a{ position:relative; display:block; background: #f8f8f8; color: #000; padding:0 30px; line-height:46px; text-decoration:none; font-size:16px;}
.quick-service-wrapper .info-container .tab-box .tab-nav li a:hover,
.quick-service-wrapper .info-container .tab-box .tab-nav li a.active{background:#fff; color:var(--color-purple); cursor: pointer; }
.quick-service-wrapper .info-container .tab-box .tab-content{ width: calc(100% - 40px); padding: 20px;  height:auto; margin-top: 40px; }

.quick-service-wrapper .info-container .tab-box .tab-content .tab { width: 100%; display: flex; justify-content: flex-start; align-items: center;
	flex-wrap: wrap; gap: 30px; }

.quick-service-wrapper .info-container .tab-box .tab-content .tab .line { position: relative; width: 100%;  display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;
 	gap: 10px; text-align: left; }
.quick-service-wrapper .info-container .tab-box .tab-content .tab .line-row { position: relative; width: 100%;  display: flex; flex-direction: row; justify-content: flex-start; align-items: center;
		gap: 10px; text-align: left; }	


.quick-service-wrapper .info-container .tab-box .tab-content .tab .line .btn-address { width: 100px;  
		position: absolute; right: 0; top: 0; padding: 19px; background: var(--color-purple);
		color: var(--color-white); font-size: 1.1rem; border-radius: 8px; cursor: pointer;  }

.quick-service-wrapper .info-container .tab-box .tab-content .tab .line .btn-gongsi { width: auto;  padding: 10px 20px; background: var(--color-purple);
		color: var(--color-white); font-size: 1.1rem; border-radius: 8px; cursor: pointer;  }

.quick-service-wrapper .info-container .tab-box .tab-content .tab .line .accent-purple { color: var(--color-purple); }
.quick-service-wrapper .info-container .tab-box .tab-content .tab .line .accent { font-weight: 800; }


.quick-service-wrapper .info-container .tab-box .tab-content .tab .line-row .column { width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-direction: column; gap: 10px;  }
.quick-service-wrapper .info-container .tab-box .tab-content .tab .line-row .column select { width: 100%; padding: 10px; border-radius: 4px; border: 1px solid var(--color-lightgrey);  }
.quick-service-wrapper .info-container .tab-box .tab-content .tab .line-row .column select:disabled { background: var(--color-grey); color: var(--color-darkgrey);}
.quick-service-wrapper .info-container .tab-box .tab-content .tab .flex-grow { flex-grow: 1; }

.quick-service-wrapper .info-container .tab-box .tab-content .tab .align-right { align-items: flex-end; }

.quick-service-wrapper .info-container .tab-box .tab-content .tab .line-row .column .column-line { width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-direction: row; gap: 10px;  }
.quick-service-wrapper .info-container .tab-box .tab-content .tab .line-row .input-address { width: calc(100% - 20px); padding: 10px; border-radius: 4px; border: 1px solid var(--color-lightgrey); }
.quick-service-wrapper .info-container .tab-box .tab-content .tab .line-row .column  .column-line .input-jibun { width: calc(50% - 20px); padding: 10px; border-radius: 4px; border: 1px solid var(--color-lightgrey); }

.quick-service-wrapper .info-container .tab-box .tab-content .tab .line-row .column p {width: 100%; text-align: left;}
.quick-service-wrapper .info-container .tab-box .tab-content .tab .line-row .column .column-line p {width: auto; text-align: left;}




.quick-service-wrapper .info-container .tab-box .tab-content .tab .line-row .btn { padding: 10px 20px; background: var(--color-lightpurple); color: var(--color-purple); border-radius: 40px; cursor: pointer;
		display: flex; justify-content: center; align-items: center; gap: 5px; }
.quick-service-wrapper .info-container .tab-box .tab-content .tab .line-row .btn.active { background: var(--color-darkpurple); color: var(--color-lightpurple); }

.info-line { width: calc(100% - 80px); background: var(--color-lightgrey); padding: 40px; border-radius: 20px; color: var(--color-darkgrey); margin-top: 20px; }

.research-line { background: var(--color-lightgrey); padding: 40px; border-radius: 20px;  }

.quick-service-wrapper .info-container .tab-box .tab-content .line .input-text { align-self: flex-start;
	width: calc(100% - 140px); padding: 18px; font-size: 1.1rem; border: 1px solid var(--color-grey); border-radius: 8px; }



/* 공동 주택/ 단독주택 */
#apartment { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 30px; padding-top: 40px;  } 

/* 초기화면 안보이게  */
#tab-01,
#normal-address-info,
#single,
#normal-address {display: none; }
#single {  width: 100%; flex-direction: column; align-items: center; gap: 30px; padding-top: 40px; }


.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-gongsi { width: 100%;  margin-top: 20px; border-collapse: collapse; text-align: left; border: 1px solid var(--color-grey); font-size: 1.1rem; }
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-gongsi thead { text-align: center; background: var(--color-lightpurple); color: var(--color-darkpurple); font-weight: 600; height: 60px;}
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-gongsi tbody { color: var(--color-black); font-weight: 300; white-space: nowrap;}
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-gongsi th:nth-child(1) { width: 10%; border-right: 1px solid var(--color-grey); border-bottom: 1px solid var(--color-grey);}
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-gongsi th:nth-child(2) { width: 35%; border-right: 1px solid var(--color-grey); border-bottom: 1px solid var(--color-grey);}
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-gongsi th:nth-child(3) { width: 10%; border-right: 1px solid var(--color-grey); border-bottom: 1px solid var(--color-grey);}
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-gongsi th:nth-child(4) { width: 10%; border-right: 1px solid var(--color-grey); border-bottom: 1px solid var(--color-grey);}
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-gongsi th:nth-child(5) { width: 20%; border-right: 1px solid var(--color-grey); border-bottom: 1px solid var(--color-grey);}
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-gongsi th:nth-child(6) { width: 15%; border-bottom: 1px solid var(--color-grey);}
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-gongsi td { border: 1px solid var(--color-grey);  padding: 10px;}





.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-table { width: 100%;  margin-top: 20px; border-collapse: collapse; text-align: left; border: 1px solid var(--color-grey); font-size: 1.1rem; }
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-table thead { text-align: center; background: var(--color-lightpurple); color: var(--color-darkpurple); font-weight: 600; height: 60px;}
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-table tbody { color: var(--color-black); font-weight: 300; white-space: nowrap;}
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-table th:nth-child(1) { width: 30%; border-right: 1px solid var(--color-grey); border-bottom: 1px solid var(--color-grey);}
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-table th:nth-child(2) { width: 50%; border-right: 1px solid var(--color-grey); border-bottom: 1px solid var(--color-grey);}
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-table th:nth-child(3) { width: 10%; border-bottom: 1px solid var(--color-grey);}
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-table th:nth-child(4) { width: 10%; border-bottom: 1px solid var(--color-grey);}
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-table td { border: 1px solid var(--color-grey);  padding: 10px;}

.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-table .btn-search { padding: 10px 16px; background: var(--color-purple); color: var(--color-white); border-radius: 6px; 
		cursor: pointer; }


.research-line .title-text { width: 100%; font-size: 1.6em; font-weight: 800; color: var(--color-darkblue); }
.research-line .sub-text { width: 100%; font-size: 1.2rem; font-weight: 100; color: var(--color-black); }

.research-line .info-block { width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: wrap; flex-grow: 1; padding-top: 20px; }
.research-line .info-block .block { width: 25%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; color: var(--color-black); }
.research-line .info-block .block .name-text { padding: 2px 6px; background: var(--color-darkblue); color: var(--color-white); font-size: 0.86rem; border-radius: 6px; margin-right: 6px; }
.research-line .info-block .block .normal-text { font-size: 0.92rem; }


.research-line .unit-block { width: 100%; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; padding-top: 10px; font-weight: 300; color: var(--color-black); margin-bottom: -40px; }


.research-line .info-block .info-table { width: 100%;  margin-top: 20px; border-collapse: collapse; text-align: left; border: 1px solid var(--color-grey); font-size: 1.1rem; }
.research-line .info-block .info-table thead { text-align: center; background: var(--color-darkblue); color: var(--color-white); font-weight: 600; height: 60px;}
.research-line .info-block .info-table tbody { color: var(--color-black); font-weight: 300; white-space: nowrap; text-align: right;}
.research-line .info-block .info-table th:nth-child(1) { width: 15%; border-right: 1px solid var(--color-grey); border-bottom: 1px solid var(--color-grey);}
.research-line .info-block .info-table th:nth-child(2) { width: 10%; border-right: 1px solid var(--color-grey); border-bottom: 1px solid var(--color-grey);}
.research-line .info-block .info-table th:nth-child(3) { width: 15%; border-right: 1px solid var(--color-grey); border-bottom: 1px solid var(--color-grey);}
.research-line .info-block .info-table th:nth-child(4) { width: 15%; border-right: 1px solid var(--color-grey); border-bottom: 1px solid var(--color-grey);}
.research-line .info-block .info-table th:nth-child(5) { width: 15%; border-right: 1px solid var(--color-grey); border-bottom: 1px solid var(--color-grey);}
.research-line .info-block .info-table th:nth-child(6) { width: 15%; border-right: 1px solid var(--color-grey); border-bottom: 1px solid var(--color-grey);}
.research-line .info-block .info-table th:nth-child(7) { width: 15%; border-bottom: 1px solid var(--color-grey); }
.research-line .info-block .info-table td:nth-child(7) { text-align: center; }
.research-line .info-block .info-table .btn-regist { padding: 10px 16px; background: var(--color-purple); color: var(--color-white); border-radius: 6px; 
	cursor: pointer; }

.research-line .info-block .info-table td { border: 1px solid var(--color-grey);  padding: 10px;}


/* on off button */
.btn-alarm {
	position: absolute;
	/* hidden */
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
  }
  
  .alarm-label {
	position: relative;
	cursor: pointer;
	display: inline-block;
	width: 50px;
	height: 25px;
	background: #fff;
	border: 2px solid var(--color-lightblue);
	border-radius: 20px;
	transition: 0.2s;
  }
  .alarm-label:hover {
	background: #efefef;
  }
  .btn-onoff {
	position: absolute;
	top: 3px;
	left: 2px;
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 20px;
	background: var(--color-lightblue);
	transition: 0.2s;
  }
  
  /* checking style */
  .btn-alarm:checked+.alarm-label {
	background: var(--color-blue);
	border: 2px solid var(--color-blue);
  }
  
  .btn-alarm:checked+.alarm-label:hover {
	background: var(--color-lightblue);
  }
  
  /* move */
  .btn-alarm:checked+.alarm-label .btn-onoff{
	left: 30px;
	background: #fff;
	box-shadow: 1px 2px 3px #00000020;
  }


  /* table style*/
.quick-service-wrapper .process-container .process-box .alarm-table { width: 100%;  margin-top: 20px; border-collapse: collapse; text-align: left; border: 1px solid var(--color-grey); font-size: 1.1rem; }
.quick-service-wrapper .process-container .process-box .alarm-table thead { text-align: center; background: var(--color-lightpurple); color: var(--color-darkpurple); font-weight: 600; height: 60px;}
.quick-service-wrapper .process-container .process-box .alarm-table tbody { color: var(--color-black); font-weight: 300; white-space: nowrap;}
.quick-service-wrapper .process-container .process-box .alarm-table th:nth-child(1) { width: 10%; border-right: 1px solid var(--color-grey); border-bottom: 1px solid var(--color-grey);}
.quick-service-wrapper .process-container .process-box .alarm-table th:nth-child(2) { width: 50%; border-right: 1px solid var(--color-grey); border-bottom: 1px solid var(--color-grey);}
.quick-service-wrapper .process-container .process-box .alarm-table th:nth-child(3) { width: 10%; border-right: 1px solid var(--color-grey); border-bottom: 1px solid var(--color-grey);}
.quick-service-wrapper .process-container .process-box .alarm-table th:nth-child(4) { width: 10%; border-right: 1px solid var(--color-grey); border-bottom: 1px solid var(--color-grey);}
.quick-service-wrapper .process-container .process-box .alarm-table th:nth-child(5) { width: 20%; border-bottom: 1px solid var(--color-grey); }
.quick-service-wrapper .process-container .process-box .alarm-table td {border: 1px solid var(--color-grey);  padding: 10px;}

.quick-service-wrapper .process-container .process-box .alarm-table .btn-info { padding: 10px 20px; color: var(--color-white); font-size: 1.1rem; background: var(--color-purple); cursor: pointer; border-radius: 40px; }
.quick-service-wrapper .process-container .process-box .alarm-table .btn-del { padding: 10px 20px; color: var(--color-darkgrey); font-size: 1.1rem; background: var(--color-lightgrey); cursor: pointer; border-radius: 40px; }



/* shingan life join */
.shinhan-join-wrapper { position: relative; width: 100%; height: auto;  
	display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: wrap; gap: 20px; }
.shinhan-join-wrapper .title-container {  width: calc(100% - 80px); height: auto; background: var(--color-white); padding: 40px;
display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 30px;
/*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
font-size: 1.2rem; }
.shinhan-join-wrapper .title-container .title { font-size: 3.4rem; font-weight: 800;}
.shinhan-join-wrapper .title-container .sub-title { font-size: 1.3rem; font-weight: 100; }

.shinhan-join-wrapper .input-container { width: calc(1000px - 60px); display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
	padding: 30px; background-color: var(--color-white); overflow-y: auto; border: 4px solid var(--color-darkpurple); border-radius: 40px; }


/* scroll-bar design */

.shinhan-join-wrapper .input-container .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: 60px 0px 6px 0px;}

.shinhan-join-wrapper .input-container .btn-line { justify-content: center; border: 0px; }


.shinhan-join-wrapper .input-container .line .title {width: 60%; font-weight: 600; font-size: 1.4rem;}
.shinhan-join-wrapper .input-container .line .name {width: calc(76% - 8px); height: 26px; line-height: 26px; font-size: 1.2rem; color: var(--color-black);  }

.shinhan-join-wrapper .input-container .line .gender{	display:none;}
.shinhan-join-wrapper .input-container .line .gender + label{ display: block; background:#fff;	border:1px solid var(--color-grey); border-radius: 40px; 
			width: calc(12% - 2px); height: 50px; line-height: 50px; text-align:center; font-size: 1.2em; font-weight: 600;
			cursor: pointer;}
.shinhan-join-wrapper .input-container .line .gender:checked + label{ width: 12%;	background: var(--color-blue);	 color: var(--color-white); border: 0; }
.shinhan-join-wrapper .input-container .line .birth { width: calc(76% - 8px); height: 26px; line-height: 26px; font-size: 1.3em; color: var(--color-black);  padding-top: 10px; }

.shinhan-join-wrapper .input-container .line .phone {width: calc(76% - 8px); height: 26px; line-height: 26px; font-size: 1.3em; color: var(--color-black);  padding-top: 10px; }
.shinhan-join-wrapper .input-container .line .btn-search-address { width: 24%; height: 50px; line-height: 50px; font-size: 1.3em; font-weight: 600;	
	border-radius: 40px; cursor: pointer; background: var(--color-blue); color: var(--color-white); }
.shinhan-join-wrapper .input-container .line .btn_auth { width: 24%; height: 50px; line-height: 50px; font-size: 1.3em; font-weight: 600;	border-radius: 6px; cursor: pointer; }
.shinhan-join-wrapper .input-container .line .address {width: calc(76% - 8px); height: 26px; line-height: 26px; font-size: 1.3em; color: var(--color-black);  padding-top: 10px; }
.shinhan-join-wrapper .input-container .line .detail-address {width: 100%; height: 26px; line-height: 26px; font-size: 1.3em; color: var(--color-black);  padding-top: 10px; }
.shinhan-join-wrapper .input-container .line .btn-join { width: calc(60% - 40px); padding: 20px; background: var(--color-purple); color: var(--color-white); 
	font-size: 1.6rem; font-weight: 600; border-radius: 40px;  cursor: pointer; }

.shinhan-join-wrapper .input-container .line .term-title {width: calc(76% - 8px); font-weight: 600; font-size: 1.8em;}

.shinhan-join-wrapper .input-container .term-line { width: 100%; height: auto; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;  gap: 6px;
	padding: 30px 0px 6px 0px; gap: 20px;}

.shinhan-join-wrapper .input-container .term-line  .btn-view-term{width: 15%; padding:0 4px 0 4px; background: var(--color-grey); color: var(--color-darkgrey); border-radius: 10px; cursor: pointer; }

.shinhan-join-wrapper .input-container .term-line .term-title {width: calc(60% - 8px);  font-weight: 600; font-size: 1.4em;}

.shinhan-join-wrapper .input-container .term-line div { display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; gap: 10px; font-size: 1.2rem; }

.shinhan-join-wrapper .input-container .term-line div .checkbox { width: 24px; height: 24px; }

.shinhan-join-wrapper .input-container .term-line .term-box { display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
	width: calc(100% - 42px); padding: 20px; min-height: 100px; max-height: 200px;  overflow-y: auto; border: 1px solid var(--color-grey); font-size: 1.0rem; text-align: left;  }

.shinhan-join-wrapper .input-container .term-line .term-box::-webkit-scrollbar { width: 12px; height: 8px;} /*스크롤바의 너비*/
.shinhan-join-wrapper .input-container .term-line .term-box::-webkit-scrollbar-thumb { background-color: var(--color-darkpurple); /*스크롤바의 색상*/  
    background-clip: padding-box;  border: 2px solid transparent;	 border-radius: 1em; }
.shinhan-join-wrapper .input-container .term-line .term-box::-webkit-scrollbar-track { background-color: var(--color-white);} /*스크롤바 트랙 색상*/

.shinhan-join-wrapper .input-container .info-line { width: calc(100% - 60px); height: auto; min-height: 100px; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; 
	background: var(--color-lightgrey); color: var(--color-darkgrey); font-size: 1.0rem; padding: 30px;}

		  
/* end main style */




/* start footer style */

.footer-wrapper { width: auto; width: 80%; min-width: 1200px; 
	display: flex; flex-direction: column; justify-content: center; align-items: center; flex-wrap: wrap; color: var(--color-grey); }
.footer-wrapper .logo-line { width: 100%; height: 100px; padding: 30px 0px 10px 0px; display: flex; justify-content: space-between; align-items: center; 
	border-bottom: 1px solid var(--color-darkgrey);  font-size: 1.04rem;  }	
.footer-wrapper .logo-line .terms-line { display: flex; justify-content: flex-end; align-items: center; flex-direction: row; flex-wrap: wrap; gap: 30px; }
.footer-wrapper .logo-line .terms-line p { font-weight: 600; cursor: pointer; }
.footer-wrapper .logo-line .terms-line p a { font-weight: 600; cursor: pointer; color: var(--color-grey);}
.footer-wrapper .address-line { width: 100%; padding: 40px 0px; display: flex; justify-content: space-between; align-items: center;  font-size: 0.9rem;  }
.footer-wrapper .copyright-line { width: 100%; padding: 20px 0px; display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; }


/* drop zone */
#actions {
	margin: 2em 0;
  }
  
  
  /* Mimic table appearance */
  div.table {
	display: table;
	width: 100%; 
  }
  div.table .file-row {
	display: table-row;
  }
  div.table .file-row > div {
	display: table-cell;
	vertical-align: top;
	border-top: 1px solid #ddd;
	padding: 8px;
  }
  div.table .file-row:nth-child(odd) {
	background: #f9f9f9;
  }
  
  .progress-bar { border: 1px solid var(--color-blue); width: 100%; height: 20px; background: var(--color-lightgrey);}
  
  /* The total progress gets shown by event listeners */
  #total-progress {
	opacity: 0;
	transition: opacity 0.3s linear;
  }
  
  /* Hide the progress bar when finished */
  #previews .file-row.dz-success .progress {
	opacity: 0;
	transition: opacity 0.3s linear;
  }
  
  /* Hide the delete button initially */
  #previews .file-row .delete {
	display: none;
  }
  
  /* Hide the start and cancel buttons and show the delete button */
  
  #previews .file-row.dz-success .start,
  #previews .file-row.dz-success .cancel {
	display: none;
  }
  #previews .file-row.dz-success .delete {
	display: block;
  }

  /* my dorpzone style */
  .quick-service-wrapper .process-container .process-box .submit-container { width: 100%;  margin-top: 40px; }
  .quick-service-wrapper .process-container .process-box .submit-container .title-text { font-size: 1.1rem; font-weight: 800; padding-top: 20px; }
  .quick-service-wrapper .process-container .process-box .submit-container .sub-text { font-size: 1.0rem; font-weight: 300;  padding-top: 10px; }
  .dropzone-button-line { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; width: 100%; gap: 10px;  }
  .fileinput-button { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 6px; padding: 4px 20px; border-radius: 40px; color: var(--color-white); background: var(--color-darkpurple); font-size: 1.0rem; cursor: pointer; }
  .btn-primary { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 6px; padding: 4px 20px; border-radius: 40px; color: var(--color-white); background: var(--color-blue); font-size: 0.9rem; cursor: pointer;}
  .btn-warning { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 6px; padding: 4px 20px; border-radius: 40px; color: var(--color-white); background: var(--color-orange); font-size: 0.9rem; cursor: pointer; }
  .btn-danger { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 6px; padding: 4px 20px; border-radius: 40px; color: var(--color-white); background: var(--color-red); font-size: 0.9rem; cursor: pointer; }


  .quick-service-wrapper .process-container .process-box .file-list { width: 100%;  margin-top: 40px; }
  .quick-service-wrapper .process-container .process-box .file-list .title-text { font-size: 1.1rem; font-weight: 800; padding-top: 20px;
	 display: flex; flex-direction: row; justify-content: space-between; align-items: center;  }

  .quick-service-wrapper .process-container .process-box .file-list .title-text .normal-text { font-size: 0.9rem; font-weight: 300;}
  .quick-service-wrapper .process-container .process-box .file-list ul { padding-top: 30px; }
  .quick-service-wrapper .process-container .process-box .file-list ul li { display: flex; justify-content: space-between; align-items: center;
		font-size: 0.9rem; font-weight: 300; border: 1px solid var(--color-grey); border-radius: 10px; gap: 10px;
		padding: 10px;   }
  .quick-service-wrapper .process-container .process-box .file-list ul li .file-action { display: flex; justify-content: space-between; align-items: center;
		gap: 20px;}
  .quick-service-wrapper .process-container .process-box .file-list ul li .file-action .btn { padding: 4px; background: var(--color-white); color: var(--color-darkpurple); cursor: pointer; }
  /* end dropzone */ 



	

/* end footer style */

}
	

		
	




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

@media (max-width: 1000px){		


	.input-area {display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
		width: calc(100% - 30px); height: auto; padding: 0px 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: 100%; font-weight: 600; padding-bottom: 10px; 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 .counsel-time{	display:none;}

.input-area .line .counsel-time + label{ display: block; flex-grow: 1; 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.2em; font-weight: 600;
	cursor: pointer;}
.input-area .line .counsel-time: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);  }

.input-area .line .select-area { width: 100%; padding: 12px; background: var(--color-white);
			border-radius: 6px; border:1px solid var(--color-grey);
			text-align:center; font-size: 1.2em; font-weight: 600;  }

.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: 100px 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: 80px; height: 20px; line-height: 20px; font-size: 0.9em; color: var(--color-black); background: var(--color-grey); border-radius: 6px;}


	.box-radius { border-radius: 20px; }
	
	
	.page-wrapper { position: relative;  width: 100%;  height: auto; 
		display: flex; justify-content: center; align-items: center; flex-direction: column; 
		background: var(--color-white); gap: 10px; overflow-x: hidden;
		/*background: linear-gradient(180deg, #7729b3, #fe5d93);*/ }	

	#topButton { display: none; position: fixed; bottom: 30px; right: 30px; border-radius: 50%; background: var(--color-white); 
		width: 50px; height: 50px; justify-content: center; align-items: center; line-height: 60px; text-align: center; cursor: pointer; 
		-webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
		-moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
		-ms-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
		-o-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); z-index: 200;  }

	#topButton .material-icons {font-size: 1.4rem; font-weight: 100; }

    header { position: fixed; top: 0; left: 0;   width: calc(100% - 20px); height: 40px;  padding: 10px; background: var(--color-white); 
		display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 100; }

	main { position: relative; width: calc(100% - 20px); height: auto; padding: 0px 10px; margin-top: 80px; 
		display: flex; flex-direction: column; justify-content: center; align-items: center; }

	footer { position: relative; width: calc(100% - 20px); height: auto; padding: 0px 10px; 
		display: flex; flex-direction: column; justify-content: center; align-items: center;
		background: var(--color-black);}

/* popup layer */
.popup-layer { display: none; position: relative; width: calc(100% - 60px); height: calc(100vh - 180px); flex-direction: column; align-items: center; padding: 20px;  z-index: 1; 
	background: var(--color-white); margin: 40px auto; overflow-y: scroll; border-radius: 20px; font-size: 0.8rem; }

.popup-layer .title-line { position: fixed; width: calc(100% - 60px); padding: 20px; height: 40px; font-size: 0.72rem; font-weight: 600; left: 50%; top: 40px; transform: translate(-50%, 0);
	 display: flex; justify-content: space-between; align-items: center; background: var(--color-white); z-index: 2; border-radius: 20px 20px 0px 0px;  }
.popup-layer .title-line .btn-pop-close::before,
.popup-layer .title-line .btn-pop-close::after { position: absolute; right: 26px; top: 20px; content:''; height: 30px; width: 3px; background: var(--color-black); z-index: 1; } 
.popup-layer .title-line .btn-pop-close::before {transform: rotate(45deg);} 
.popup-layer .title-line .btn-pop-close::after {transform: rotate(-45deg);}
.popup-layer .title-line .btn-pop-close { cursor: pointer; }

.popup-layer .term-content { position: relative; width: calc(100% - 20px); height: 400px; padding: 60px 10px; }

.popup-layer .term-content .line { display: flex; justify-content: flex-start; align-items: center; gap: 10px;}

.popup-layer .term-content .line .agree-termination{	display:none;}
.popup-layer .term-content .line .agree-termination + label{ display: block; background:#fff;	border:1px solid var(--color-grey); border-radius: 40px; 
			width: 58px; height: 34px; line-height: 34px; text-align:center; font-size: 1.0em; font-weight: 600;
			cursor: pointer;}
.popup-layer .term-content .line .agree-termination:checked + label{ width: 60px;	background: var(--color-blue);	 color: var(--color-white); border: 0; }

.popup-layer .bottom-line { position: fixed; width: calc(1100px - 40px); height: 80px; font-size: 1.2rem; font-weight: 600; left: 50%; bottom: 80px; transform: translate(-50%, 0);
	display: flex; justify-content: space-between; align-items: center; background: var(--color-white); z-index: 2;  }

.popup-layer .bottom-line { position: fixed; width: calc(100% - 60px); padding: 20px; height: 40px; font-size: 1.2rem; font-weight: 600; left: 50%; bottom: 40px; transform: translate(-50%, 0);
	display: flex; justify-content: space-between; align-items: center; background: var(--color-white); z-index: 2; border-radius: 0px 0px 20px 20px; }


.popup-layer .bottom-line .btn-agree-term { padding: 10px 20px; background: var(--color-blue); color: var(--color-white); font-size: 1.2rem; border-radius: 20px; }

.popup-layer .bottom-line { display: flex; justify-content: flex-end; align-items: center; }

.popup-layer::-webkit-scrollbar { width: 12px; height: 8px;} /*스크롤바의 너비*/
.popup-layer::-webkit-scrollbar-thumb { background-color: var(--color-darkpurple); /*스크롤바의 색상*/  
    background-clip: padding-box;  border: 2px solid transparent;	 border-radius: 1em; }
.popup-layer:-webkit-scrollbar-track { background-color: var(--color-white);} /*스크롤바 트랙 색상*/
	


/* log in */
/* border 두께 만큼 더 뺀다 (좌 우 4px씩) */
.login-wrapper { width: calc(100% - 8px); display: flex; flex-direction: column; align-items: center; padding-top: 50px; }
.login-wrapper .title-line { position:relative; width: 100%; display: flex; justify-content: space-between; align-items: center; }
.login-wrapper .title-line .login-title {  font-size: 2.0rem; font-weight: 900; }
.login-wrapper .title-line .btn-login-cancel::before,
.login-wrapper .title-line .btn-login-cancel::after {position: absolute; right: 14px; top: 6px; content:''; height: 30px; width: 2px; background: var(--color-black);} 
.login-wrapper .title-line .btn-login-cancel::before {transform: rotate(45deg);} 
.login-wrapper .title-line .btn-login-cancel::after {transform: rotate(-45deg);}


.login-wrapper .input-container .line .phone {width: calc(76% - 8px); height: 26px; line-height: 26px; font-size: 1.3em; color: var(--color-black);  padding-top: 10px; }
.login-wrapper .input-container .line .btn-search-address { width: 24%; height: 50px; line-height: 50px; font-size: 1.3em; font-weight: 600;	
	border-radius: 40px; cursor: pointer; background: var(--color-blue); color: var(--color-white); }
.login-wrapper .input-container .line .btn_auth { width: 24%; height: 50px; line-height: 50px; font-size: 1.3em; font-weight: 600;	border-radius: 6px; cursor: pointer; }
.login-wrapper .input-container .line .address {width: calc(76% - 8px); height: 26px; line-height: 26px; font-size: 1.3em; color: var(--color-black);  padding-top: 10px; }
.login-wrapper .input-container .line .detail-address {width: 100%; height: 26px; line-height: 26px; font-size: 1.3em; color: var(--color-black);  padding-top: 10px; }
.login-wrapper .input-container .line .btn-join { width: calc(60% - 40px); padding: 20px; background: var(--color-purple); color: var(--color-white); 
	font-size: 1.6rem; font-weight: 600; border-radius: 40px;  cursor: pointer; }

.login-wrapper .input-container .line .term-title {width: calc(76% - 8px); font-weight: 600; font-size: 1.8em;}

.login-wrapper .term-line { width: 100%; height: auto; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;  gap: 6px;
	padding: 30px 0px 6px 0px; gap: 20px;}
.login-wrapper .term-line .term-title {width: calc(60% - 8px);  font-weight: 600; font-size: 1.4em;}

.login-wrapper .term-line .input-line { position: relative; width: 100%; display: flex; flex-direction: row; justify-content: space-between; flex-grow:  1; align-items: center; gap: 10px;  }
.login-wrapper .term-line .input-line .title { width: 100%; font-size: 1.2rem; font-weight: 500; }
.login-wrapper .term-line .input-line .inp-tel { width: calc(90% - 100px); font-size: 1.0rem; font-weight: 500; border: 1px solid var(--color-grey); border-radius: 6px; padding: 10px; }
.login-wrapper .term-line .input-line .inp-auth { width: 100%; font-size: 1.0rem; font-weight: 500; border: 1px solid var(--color-grey); border-radius: 6px; padding: 10px; }
.login-wrapper .term-line .input-line .btn-auth { display: flex; justify-content: center; align-items: center; font-size: 0.9rem; padding: 10px 15px;	
	background: var(--color-darkpurple); color: var(--color-white); border-radius: 20px; cursor: pointer; }

.login-wrapper .term-line .input-line .btn-login { width: 80%; padding: 15px; background: var(--color-purple); color: var(--color-white); font-size: 1.6rem; font-weight: 600; margin: 20px auto;
	border-radius: 40px; cursor: pointer;  }

.login-wrapper .term-line .check-line { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 10px; font-size: 0.9rem; }

.login-wrapper .term-line .check-line .checkbox { width: 20px; height: 20px; }
.login-wrapper .term-line .check-line .btn-special { display: flex; justify-content: center; align-items: center; font-size: 0.9rem; padding: 5px 10px;
	background: var(--color-grey); color: var(--color-darkgrey); border-radius: 20px; cursor: pointer;  }


.login-wrapper .term-line .check-line .btn-view-term { padding: 5px 10px; background: var(--color-grey); color: var(--color-darkgrey); border-radius: 20px; cursor: pointer;}

.login-wrapper .term-line .term-box { width: calc(100% - 22px); padding: 10px; min-height: 100px; max-height: 100px;  overflow-y: auto; border: 1px solid var(--color-grey); font-size: 0.9rem; text-align: left;  }

.login-wrapper .term-line .term-box::-webkit-scrollbar { width: 12px; height: 8px;} /*스크롤바의 너비*/
.login-wrapper .term-line .term-box::-webkit-scrollbar-thumb { background-color: var(--color-darkpurple); /*스크롤바의 색상*/  
    background-clip: padding-box;  border: 2px solid transparent;	 border-radius: 1em; }
.login-wrapper .term-line .term-box::-webkit-scrollbar-track { background-color: var(--color-white);} /*스크롤바 트랙 색상*/

.login-wrapper .border-wrapper { width: calc(100% - 40px); border: 4px solid var(--color-darkblue); padding: 20px; border-radius: 20px; }


/* start navigation style */


.nav-wrapper {  width: 100%; 
	display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; }	

.logo-img { width: 120px; }

/*nav { display: none;  }*/
nav { position: fixed; top: 60px; right: -100%; background: var(--color-white); width: calc(100% - 40px); height: calc(100vh - 80px); padding: 20px; 
	overflow-y: auto; overflow-x: hidden;  transition: right .5s;  }
nav .main-menu { list-style: none; display: flex; flex-direction: column; gap: 20px;  }
nav .main-menu > .main-item { width: 100%;  }
nav .main-menu > .main-item a { font-size: 1.0rem;   }
nav .main-menu > .main-item > a:not(:only-child)::after {
    content: "+";
    float:right;	
}




/* 엑티브가 있는 메뉴(펼쳐진 메뉴)에 a에 - 를 붙혀준다 */
nav .main-menu > .main-item.active > a:not(:only-child)::after {
    content: "-";
}

nav .main-menu > .main-item .sub-menu { list-style: none; border-radius: 10px; transition: .5s;
	padding-left: 20px; width: calc(100% - 20px); margin: 10px 0px; padding: 10px; display: none; flex-direction: column; gap: 20px; background: var(--color-lightgrey); }
	
nav .main-menu > .main-item .sub-menu li a { display: block; width: 100%; }
/* 모바일 메뉴 액티브 */
nav.active {
    right: 0;
}

nav > .main-menu > li.active > .sub-menu {
    display: flex;	
}

/* mobile nav-btn */
.mobile-nav-btn { display: flex; cursor: pointer; }
.mobile-nav-btn .mobile-nav-checkbox { display: none;}

/* 토글 사이드바 버튼 아이콘 */
.ico {
    position:absolute;
    top:50%;
    right:14px;
    width:20px;
    height:20px;
    transform:translatey(-50%);
    cursor:pointer;
}
.ico > div {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:20%;
    background: var(--color-black);
}
.ico > div:nth-child(2) {
    top:40%;
    transition:visibility 0s .15s;
}
.ico.active > div:nth-child(2) {
    visibility:hidden;
    transition:visibility 0s;
}
.ico > div:nth-child(3) {
    top:80%;
}
.ico > div:nth-child(1), .ico > div:nth-child(3) {
    transition:top .15s .15s, transform .15s;
}
.ico.active > div:nth-child(1), .ico.active > div:nth-child(3) {
    top:40%;
    transform:rotate(45deg);
    transition:top .15s, transform .15s .15s;
}
.ico.active > div:nth-child(3) {
    transform:rotate(-45deg);
}

/* 아이콘 색 변화 */
.ico[data-ico-now-animating="Y"] > div {
    background-color:var(--color-purple);
}
/* 라이브러리 끝 */






.nav-wrapper .btn-nav-login { width: auto; padding: 2px 10px; background: var(--color-darkpurple); color: var(--color-white); border-radius: 40px; font-size: 0.86em; 
		cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 6px; }

/* end navigation style */


/* start main style */
.main-wrapper { position: relative; width: 100%; padding: 20px 0px; 
			display: flex; flex-direction: column; justify-content: center; align-items: center; flex-wrap: wrap; gap: 20px; }		
			
.slider-wrapper { width: 100%; height: auto; /*background: linear-gradient(180deg, #eceffe, #b4b9fe); */  padding: 10px 0px;   
			/*background-image: url('../images/slide_01.png');
			background-size: cover;
			background-repeat: no-repeat;
			background-color: #725ceb;
			background-position: center center;				*/
			/*background : radial-gradient(#d5d8fa, #a1a0ec) ;*/
			background : radial-gradient(#d5d8fa, var(--color-lightgrey)) ;
			border-radius: 20px;
			display: flex; flex-direction: column; justify-content: space-between; align-items: center; margin-top: -30px;	gap: 10px;		}
				


.slider-wrapper .text-container { width: 100%; padding-left: 5%; ;
				display: flex; justify-content: center; flex-direction: column; align-items: center;  gap: 14px;   }
.slider-wrapper .text-container .main-text { width: 100%; font-size: 2.2rem; color: var(--color-darkpurple); /*-webkit-text-stroke-width: 2px;	-webkit-text-stroke-color: var(--color-green);*/ font-weight: 900; text-align: center; }
.slider-wrapper .text-container .sub-text {  width: 100%; font-size: 1.1rem; color: var(--color-darkpurple); font-weight: 500; text-align: center; }
.slider-wrapper .text-container .info-text { width: 100%; font-size: 0.9rem; color: var(--color-darkpurple); font-weight: 300; text-align: center; }	
.slider-wrapper .text-container .btn-membership { display: block; width: auto; width: 100px; height: 40px; padding: 0px 20px; font-size: 1.0rem; 
			color: var(--color-white);
			border-radius: 40px; background: var(--color-purple); font-weight: 300; text-align: left; cursor: pointer;
			display: flex; justify-content: center; align-items: center; align-self : center; }
.slider-wrapper .text-container .btn-membership	.material-icons { margin-left: 10px;}
.slider-wrapper .img-container { width: 100%; display: flex; justify-content: center; align-items: center;  }
.slider-wrapper .img-container > img { height: 180px;  }

.quick-service-wrapper { position: relative; width: 100%; height: auto;  
			display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; }
.quick-service-wrapper .title-container {  width: calc(100% - 40px); height: auto; background: var(--color-white); padding: 20px;
		display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 10px; 
		/*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/		font-size: 1.2rem; }
.quick-service-wrapper .title-container .title { font-size: 2.0rem; font-weight: 800; text-align: center; }
.quick-service-wrapper .title-container .sub-title { font-size: 1.1rem; font-weight: 100; }
.quick-service-wrapper .title-container img { width: 100px; }
.quick-service-wrapper .content-container {  width: 100%; height: auto; padding: 10px; border-radius: 20px;
	display: flex; justify-content: center; align-items: center; flex-direction: row; flex-wrap: wrap; gap: 10px; }
.quick-service-wrapper .content-container .service-box { position: relative;
	 box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); border-radius: 20px; width: calc(50% - 5px); min-height: 250px;  perspective: 1000px;}
.quick-service-wrapper .content-container .service-box	 .box-inner {
		position: relative;
		width: 100%;
		height: 100%;
		transition: transform 0.6s;
		transform-style: preserve-3d; 		  }
	  
.quick-service-wrapper .content-container .service-box:hover .box-inner {
		transform: rotateY(180deg); 		  }
	  
.quick-service-wrapper .content-container .service-box .box-front,
.quick-service-wrapper .content-container .service-box .box-back {
		position: absolute;
		width: 100%;
		height: 250px;
		backface-visibility: hidden;
		display: flex; flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 20px;		  }
	  
.quick-service-wrapper .content-container .service-box  .box-front {
		background: var(--color-white);		}
	  
.quick-service-wrapper .content-container .service-box  .box-back {
		background: var(--color-purple);
		color: var(--color-white);
		transform: rotateY(180deg); 	}
.quick-service-wrapper .content-container .service-box .icon-img { width: 90px; }
.quick-service-wrapper .content-container .service-box .btn-detail { padding: 6px 14px; color: var(--color-purple); font-size: 1.1rem;
		background: var(--color-lightpurple); border-radius: 40px;	cursor: pointer;	 }
.quick-service-wrapper .content-container .service-box .title-text { font-size: 1.2rem; font-weight: 700; padding-top: 20px;}
.quick-service-wrapper .content-container .service-box .content-text { width: 80%; font-size: 0.9rem; font-weight: 300; text-align: center; padding-top: 20px; }

.quick-service-wrapper .content-container .insure-box { position: relative; background: var(--color-white);
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); border-radius: 20px; width: calc(100% - 40px); padding:20px; 
	display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer;  }

.quick-service-wrapper .content-container .insure-box .title-text { font-size: 1.4rem; font-weight: 800; color: var(--color-darkpurple); }
.quick-service-wrapper .content-container .insure-box .accent-text { font-size: 1.5rem; font-weight: 800; color: var(--color-purple); }
.quick-service-wrapper .content-container .insure-box .accent-text-grey { font-size: 1.2rem; font-weight: 400; color: var(--color-grey); }
.quick-service-wrapper .content-container .insure-box .normal-text { font-size: 1.0rem; font-weight: 300; color: var(--color-black); margin-top: 15px; text-align: center; }

.quick-service-wrapper .content-container .insure-box:hover { transform: translateY(-50px); }


.quick-service-wrapper .content-container .shingan-service-box { position: relative; background: var(--color-white);
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); border-radius: 20px; width: calc(50% - 50px); padding:20px; min-height: 200px;
	display: flex; flex-direction: column; justify-content: flex-start; align-items: center; cursor: pointer; gap: 30px;   }

.quick-service-wrapper .content-container .shingan-service-box .title-text { font-size: 1.2rem; font-weight: 800; color: var(--color-darkpurple); text-align: center; }
.quick-service-wrapper .content-container .shingan-service-box img { position: absolute; bottom: 20px; width: 100px;}


.quick-service-wrapper .detail-content-container {  width: calc(100% - 40px); height: auto; padding: 20px; 
	display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 10px; }

.quick-service-wrapper .detail-content-container .line { width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 15px;}


.quick-service-wrapper .detail-content-container .line .detail-service-box { position: relative; background: var(--color-white);
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);  width: calc(100% - 40px); padding: 20px; 
	display: flex; flex-direction: column; justify-content: flex-start; align-items: center; cursor: pointer; text-align: center; }

.quick-service-wrapper .detail-content-container .line .detail-service-box .title-text { font-size: 1.4rem; font-weight: 800; color: var(--color-darkpurple); }
.quick-service-wrapper .detail-content-container .line .detail-service-box .accent-text { font-size: 1.5rem; font-weight: 800; color: var(--color-purple); }
.quick-service-wrapper .detail-content-container .line .detail-service-box .accent-text-grey { font-size: 1.2rem; font-weight: 400; color: var(--color-grey); }
.quick-service-wrapper .detail-content-container .line .detail-service-box .normal-text { font-size: 1.0rem; font-weight: 300; color: var(--color-black); margin-top: 10px; }
.quick-service-wrapper .detail-content-container .line .detail-service-box .accent-small-text { font-size: 0.80rem; font-weight: 800; color: var(--color-orange); }

.border-top-left-radius,
.border-top-right-radius,
.border-bottom-left-radius,
.border-bottom-right-radius {  border-radius: 20px; }


.quick-service-wrapper .process-container {  width: calc(100% - 20px); height: auto; padding: 10px; 
	display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 10px; }
.quick-service-wrapper .process-container .process-box { position: relative; background: var(--color-white); flex-wrap: wrap;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); border-radius: 20px; width: calc(100% - 20px); padding: 10px; 
	display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 20px;  }

.quick-service-wrapper .process-container .info-box { position: relative;  width: 100%; padding: 10px; 
		display: flex; flex-direction: column; justify-content: flex-start; align-items: center;  }

.quick-service-wrapper .process-container .info-box ul {
	list-style-type: disc; list-style-position:outside;
	 width: calc(100%- 20px); text-align: left; font-size: 0.9rem; color: var(--color-darkgrey); font-weight: 300; padding: 10px; }


.quick-service-wrapper .process-container .info-box ul	 li::marker {	color: var(--color-darkgrey);	}


.quick-service-wrapper .process-container .process-box .count-num { width: 14%; font-size: 2.4rem; color: var(--color-purple); font-weight: 800; }
.quick-service-wrapper .process-container .process-box .prcess-text { width: calc(86% - 20px); font-size: 1.4rem; color: var(--color-black); font-weight: 500; }
.quick-service-wrapper .process-container .process-box .prcess-sub-text { width: 100%; padding-left: 10%; font-size: 0.96rem; color: var(--color-black); font-weight: 300; }
.quick-service-wrapper .process-container .process-box .prcess-sub-text-left { width: 100%; font-size: 0.9rem; color: var(--color-black); font-weight: 300; }
.quick-service-wrapper .process-container .process-box table { width: 100%;  margin-top: 10px; border-collapse: collapse; text-align: left; border: 1px solid var(--color-grey); }
.quick-service-wrapper .process-container .process-box table thead { text-align: center; background: var(--color-lightpurple); color: var(--color-darkpurple); font-size: 1.0rem; font-weight: 600; height: 60px;}
.quick-service-wrapper .process-container .process-box table tbody { color: var(--color-black); font-size: 0.9rem; font-weight: 300; }
.quick-service-wrapper .process-container .process-box table th:nth-child(1) { width: 20%; border-right: 1px solid var(--color-grey); border-bottom: 1px solid var(--color-grey);}
.quick-service-wrapper .process-container .process-box table th:nth-child(2) { width: 50%; border-right: 1px solid var(--color-grey); border-bottom: 1px solid var(--color-grey);}
.quick-service-wrapper .process-container .process-box table th:nth-child(3) { width: 30%; border-bottom: 1px solid var(--color-grey);}
.quick-service-wrapper .process-container .process-box table td { border: 1px solid var(--color-grey);  padding: 5px 0px;}
.quick-service-wrapper .process-container .process-box table tr,
.quick-service-wrapper .process-container .process-box table td { padding-left: 10px;}
.quick-service-wrapper .process-container .process-box table tbody .align-center { text-align: center;}


.service-wrapper { position: relative; width: 100%; height: auto;  background: var(--color-white); 
	display: flex; flex-direction: column; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: 10px; }
.service-wrapper .service-container { width: 100%; }
.service-wrapper .service-container  .title-container {  width: calc(100% - 40px); height: auto; background: var(--color-white); padding: 20px;
		display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 30px; 
		/*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
		font-size: 1.2rem; }	
.service-wrapper .service-container  .title-container .title { font-size: 2.0rem; font-weight: 800;}
.service-wrapper .service-container  .title-container .sub-title { font-size: 1.1rem; font-weight: 100; text-align: center; }
.service-wrapper .service-container  .content-container {  width: calc(100% - 20px); height: auto;  padding: 10px; 
	display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 10px; }
.bg-image-container-purple { background: var(--color-lightpurple); border-radius: 20px; }
.bg-image-container-darkpurple { background: var(--color-darkpurple); border-radius: 20px; }
.bg-image-container-grey { background: var(--color-lightgrey); border-radius: 20px; }

.service-wrapper .service-container  .image-content-container .content-box { display: flex; justify-content: column; justify-content: center; align-items: center; 
	font-size: 1.1rem; color: var(--color-white); background: red;}

.service-wrapper .service-container  .content-container .content-box { width: 100%; display: flex; flex-direction: column; justify-content: center; text-align: center; gap: 10px; }
.service-wrapper .service-container  .content-container .image-box { width: 100%; }
.service-wrapper .service-container  .content-container .image-box img { width: 100%; border-radius: 20px;  }
.service-wrapper .service-container  .content-container .left-image-box { width: 100px; background: var(--color-darkpurple); border-radius: 20px; }
.service-wrapper .service-container  .content-container .right-image-box { width: calc(100% - 800px);}
.service-wrapper .service-container  .content-container .left-image-box img,
.service-wrapper .service-container  .content-container .right-image-box img { width: 100%; border-radius: 20px;}
.service-wrapper .service-container .content-container .content-box .content-text { width:100%;  font-size: 1.1rem; font-weight: 100;  }
.service-wrapper .service-container .content-container .content-box .content-text .material-icons { padding: 4px 6px 0px 0px;}
.service-wrapper .service-container .content-container .content-box .content-text .accent { font-size: 1.2rem; font-weight: 700; }
.service-wrapper .service-container .content-container .content-box .content-text .accent-purple { font-size: 1.5rem; font-weight: 900; color: var(--color-purple) ; }
.service-wrapper .service-container .content-container .content-box .content-text .accent-lightpurple { font-size: 1.4rem; font-weight: 900; color: var(--color-lightpurple) ; }
.service-wrapper .service-container .content-container .content-box .content-text .accent-white { font-size: 1.2rem; font-weight: 700; color: var(--color-white); }

.service-wrapper .service-container .content-container .content-box .btn-detail { width: 60%; height: 40px; padding: 0px 40px;  font-size: 1.2rem; color: var(--color-white);		
	border-radius: 20px; background: var(--color-purple); font-weight: 300; text-align: center; cursor: pointer;
	display: flex; justify-content: center; align-items: center; margin: 20px auto;  }


.title-wrapper { position: relative; width: calc(100% - 20px); padding: 10px; height: auto; /*background: linear-gradient(180deg, #eceffe, #b4b9fe); */   
	/*background-image: url('../images/slide_01.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-color: #725ceb;
	background-position: center center;				*/
	/*background : radial-gradient(#d5d8fa, #a1a0ec) ;*/	
	background: url('../images/title-background.png') center top;
	background-size: contain;
	background-attachment: fixed;
	/*background: var(--color-darkpurple);*/
	border-radius: 20px;
	display: flex; flex-direction: column; justify-content: center; align-items: center; 	gap: 10px;		}
.title-wrapper .title-text { font-size: 1.4rem; font-weight: 900; color: var(--color-darkpurple); text-align: center;}
.title-wrapper .sub-text { font-size: 0.86rem; font-weight: 100; color: var(--color-darkpurple); text-align: center; }


.service-wrapper .service-container  .content-container .page-content-box { width: 100%; display: flex; flex-direction: column;  justify-content: flex-start; align-items: center; gap: 10px; }

.service-wrapper .service-container  .content-container .page-content-box .content-title { display: flex ; justify-content: flex-start; align-items: center;
	width: 100%; text-align: left; font-size: 1.1rem; font-weight: 800; padding-top: 10px;}

.service-wrapper .service-container  .content-container .page-content-box .address-box { width: calc(100% - 20px); padding: 10px; border-radius: 20px;
	display: flex; flex-direction: column; 	gap: 10px; }
.service-wrapper .service-container  .content-container .page-content-box .address-box .line-end { position: relative; width: 100%;  font-size: 1.0rem;
	display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 20px;  }
.service-wrapper .service-container  .content-container .page-content-box .address-box .line-between { position: relative; width: 100%;  font-size: 1.0rem;
	display: flex; flex-direction: row; justify-content: space-between; align-items: center;  gap: 20px; flex-wrap: wrap;   }
.service-wrapper .service-container  .content-container .page-content-box .address-box .line-start { position: relative; width: 100%; font-size: 1.0rem;  
	display: flex; flex-direction: column; justify-content: center; align-items: flex-start;  gap: 10px; padding-top: 5px;  }
.service-wrapper .service-container  .content-container .page-content-box .address-box .line-start .input-text { 
	width: calc(100% - 22px); padding: 10px; font-size: 1.0rem; border: 1px solid var(--color-grey); border-radius: 4px; }

.service-wrapper .service-container  .content-container .page-content-box .address-box .line-between .input-text { 
	width: calc(100% - 22px); padding: 10px; font-size: 1.0rem; border: 1px solid var(--color-grey); border-radius: 4px; }


.service-wrapper .service-container  .content-container .page-content-box .address-box .normal-text,
.service-wrapper .service-container  .content-container .page-content-box .address-box .normal-text,
.service-wrapper .service-container  .content-container .page-content-box .address-box .normal-text { width: 100%; font-size: 1.1rem; text-align: left; }


.service-wrapper .service-container  .content-container .page-content-box .address-box .info-text { width: 100%; color: var(--color-purple); font-size: 0.86rem; font-weight: 300;}




.service-wrapper .service-container  .content-container .page-content-box .address-box .btn-mod-address { width: auto; padding: 10px 20px; 
	background: var(--color-purple); color: var(--color-white); font-size: 1.0rem; border-radius: 20px; cursor: pointer; }

.service-wrapper .service-container  .content-container .page-content-box .address-box .line-between .btn-mod-complete { width: calc(100% - 40px); padding: 10px; 
		background: var(--color-purple); color: var(--color-white); font-size: 1.0rem; border-radius: 20px; cursor: pointer; margin: 0 auto;    }

.service-wrapper .service-container  .content-container .page-content-box .box-title { width: 100%; font-size: 1.1rem; font-weight: 800; }

.quick-service-wrapper .info-container {  width: calc(100% - 20px); height: auto; padding: 10px; 
	display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 10px; }


/*tab css*/

.quick-service-wrapper .info-container .tab-box { position: relative; background: var(--color-white); flex-wrap: wrap;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); border-radius: 20px; width: calc(100% - 20px); padding: 10px; 
	display: flex; flex-direction: column; justify-content: flex-start; align-items: center;  }
.quick-service-wrapper .info-container .tab-box .tab-nav{font-size:0; width: 100%; border-bottom: 1px solid #ddd; border-left: 1px solid #ddd; 
	display: flex; flex-direction: row; justify-content: flex-start; align-items: center; }
.quick-service-wrapper .info-container .tab-box .tab-nav li{ width: 300px;  height:46px; text-align:center; border-right:1px solid #ddd;}
.quick-service-wrapper .info-container .tab-box .tab-nav li a:before{content:""; position:absolute; left:0; top:0px; width:100%; height:3px; }
.quick-service-wrapper .info-container .tab-box .tab-nav li a.active:before{background: var(--color-purple);}
.quick-service-wrapper .info-container .tab-box .tab-nav li a.active{border-bottom:1px solid #fff;}
.quick-service-wrapper .info-container .tab-box .tab-nav li a{ position:relative; display:block; background: #f8f8f8; color: #000; padding:0 30px; line-height:46px; text-decoration:none; font-size:16px;}
.quick-service-wrapper .info-container .tab-box .tab-nav li a:hover,
.quick-service-wrapper .info-container .tab-box .tab-nav li a.active{background:#fff; color:var(--color-purple); cursor: pointer; }
.quick-service-wrapper .info-container .tab-box .tab-content{ width: 100%;  height:auto; margin-top: 40px; }

.quick-service-wrapper .info-container .tab-box .tab-content .tab { width: 100%; display: flex; justify-content: flex-start; align-items: center;
	flex-wrap: wrap; gap: 30px; }

.quick-service-wrapper .info-container .tab-box .tab-content .tab .line { position: relative; width: 100%;  display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;
 	gap: 10px; text-align: left; }
.quick-service-wrapper .info-container .tab-box .tab-content .tab .line-row { position: relative; width: 100%;  display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start;
		gap: 10px; text-align: left; }	

.quick-service-wrapper .info-container .tab-box .tab-content .tab .line .btn-address { width: 80px;  
		position: absolute; right: 0; top: 0; padding: 10px 5px; background: var(--color-purple);
		color: var(--color-white); font-size: 1.1rem; border-radius: 8px; cursor: pointer;  }		

.quick-service-wrapper .info-container .tab-box .tab-content .tab .line .btn-gongsi { width: auto;  padding: 10px 20px; background: var(--color-purple);
		color: var(--color-white); font-size: 1.1rem; border-radius: 8px; cursor: pointer;  }

.quick-service-wrapper .info-container .tab-box .tab-content .tab .line .accent-purple { color: var(--color-purple); }
.quick-service-wrapper .info-container .tab-box .tab-content .tab .line .accent { font-weight: 800; }


.quick-service-wrapper .info-container .tab-box .tab-content .tab .line-row .column { width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-direction: column; gap: 10px;   }
.quick-service-wrapper .info-container .tab-box .tab-content .tab .line-row .column select { width: 100%; padding: 10px; border-radius: 4px; border: 1px solid var(--color-lightgrey); background: var(--color-white);  }
.quick-service-wrapper .info-container .tab-box .tab-content .tab .line-row .column .column-line { width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-direction: row; gap: 10px; }
.quick-service-wrapper .info-container .tab-box .tab-content .tab .line-row .column select:disabled { background: var(--color-grey); color: var(--color-darkgrey);}
.quick-service-wrapper .info-container .tab-box .tab-content .tab .line-row .column p {width: 100%; text-align: left;}
.quick-service-wrapper .info-container .tab-box .tab-content .tab .line-row .column .column-line p { width: auto; }

.quick-service-wrapper .info-container .tab-box .tab-content .tab .line-row .input-address { width: calc(100% - 22px); padding: 11px 10px; border-radius: 4px; border: 1px solid var(--color-lightgrey); }
.quick-service-wrapper .info-container .tab-box .tab-content .tab .line-row .column-line .input-jibun { width: calc(50% - 22px); padding: 11px 10px; border-radius: 4px; border: 1px solid var(--color-lightgrey); }

.quick-service-wrapper .info-container .tab-box .tab-content .tab .flex-grow { flex-direction: column; }

.quick-service-wrapper .info-container .tab-box .tab-content .tab .align-right { align-items: flex-end; }



.quick-service-wrapper .info-container .tab-box .tab-content .tab .line-row .btn { padding: 10px 20px; background: var(--color-lightpurple); color: var(--color-purple); border-radius: 40px; cursor: pointer;
		display: flex; justify-content: center; align-items: center; gap: 5px; }
.quick-service-wrapper .info-container .tab-box .tab-content .tab .line-row .btn.active { background: var(--color-darkpurple); color: var(--color-lightpurple); }

.info-line { width: calc(100% - 20px); background: var(--color-lightgrey); padding: 20px 10px; border-radius: 10px; color: var(--color-darkgrey); font-size: 0.9rem; }

.info-line ol { margin-left: 20px; }


.quick-service-wrapper .info-container .tab-box .tab-content .tab .line.research-line { width: calc(100% - 40px); background: var(--color-lightgrey); padding: 20px; border-radius: 20px;  }

.quick-service-wrapper .info-container .tab-box .tab-content .line .input-text { align-self: flex-start;
	width: calc(90% - 80px); font-size: 1.0rem; font-weight: 500; border: 1px solid var(--color-grey); border-radius: 6px; padding: 10px; }	



/* 공동 주택/ 단독주택 */
#apartment { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 30px; padding-top: 40px;  } 

/* 초기화면 안보이게  */
#tab-01,
#normal-address-info,
#single,
#normal-address {display: none; }
#single {  width: 100%; flex-direction: column; align-items: center; gap: 30px; padding-top: 40px; }

#list-table,
#detail-research {display: none;}


.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-gongsi { table-layout: fixed;  width: 100%;  border-collapse: collapse; text-align: left; font-size: 0.9rem; margin-top: 20px; }
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-gongsi thead { display: none; }
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-gongsi tbody { color: var(--color-black); font-weight: 300; }
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-gongsi tbody tr { width: calc(100% - 22px); padding: 2px 10px;  
	display: flex; flex-direction: row; justify-content: flex-start; align-items: center; flex-wrap: wrap; border: 1px solid var(--color-grey); border-radius: 10px; margin-top: 4px;}
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-gongsi tbody tr td { border: 0px; margin:0; padding: 0; margin-top: 4px;	  }
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-gongsi td:nth-child(1) { width: 100%; font-size: 0.8rem; color: var(--color-purple); }
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-gongsi td:nth-child(2) { width: 100%; font-size: 0.9rem; font-weight: 800; color: var(--color-darkpurple); }
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-gongsi td:nth-child(3) { width: 50%; font-size: 0.8rem; color: var(--color-darkgrey);  }
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-gongsi td:nth-child(4) { width: 50%; font-size: 0.8rem; color: var(--color-darkgrey);  }
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-gongsi td:nth-child(5) { width: 60%; font-size: 0.9rem; color: var(--color-darkgrey); color: var(--color-blue); }
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-gongsi td:nth-child(6) { width: 40%; font-size: 0.9rem; color: var(--color-darkgrey);  }
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-gongsi td:nth-child(1)::before { content: "(공시일자) "; }
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-gongsi td:nth-child(2)::before { content: "(주소) "; }
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-gongsi td:nth-child(3)::before { content: "(동) "; }
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-gongsi td:nth-child(4)::before { content: "(호) "; }
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-gongsi td:nth-child(5)::before { content: "공지지가(원) "; }
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-gongsi td:nth-child(6)::before { content: "공급면적(㎡) "; }


.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-gongsi td { border: 1px solid var(--color-grey);  padding: 10px;}

/*
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-table thead { background: var(--color-lightpurple); color: var(--color-darkpurple); font-weight: 600; }
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-table th:nth-child(1) { width: 30%;  }
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-table th:nth-child(2) { width: 30%; }
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-table th:nth-child(3) { width: 30%; }
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-table th:nth-child(4) { display: none; }
*/
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-table thead { display: none; }
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-table tbody { color: var(--color-black); font-weight: 300; }
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-table thead tr { width: calc(100% - 20px); padding: 2px 10px;  display: flex; flex-direction: row; justify-content: flex-start; align-items: center; flex-wrap: wrap; }
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-table tbody tr { width: calc(100% - 22px); padding: 2px 10px;  
	display: flex; flex-direction: row; justify-content: flex-start; align-items: center; flex-wrap: wrap; border: 1px solid var(--color-grey); border-radius: 10px; margin-top: 4px;}
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-table tbody tr td { border: 0px; margin:0; padding: 0;	  }
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-table td:nth-child(1) { width: 100%; font-size: 0.8rem; color: var(--color-purple); }
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-table td:nth-child(2) { width: 100%; font-size: 0.9rem; font-weight: 800; color: var(--color-darkpurple); }
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-table td:nth-child(3) { width: 100%; font-size: 0.8rem; color: var(--color-darkgrey);  }
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-table td:nth-child(1)::before { content: "(부동산) "; }
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-table td:nth-child(2)::before { content: "(주소) "; }
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-table td:nth-child(3)::before { content: "(구분) "; }
.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-table td:nth-child(4) { width: 100%; text-align: right; align-self: flex-end;  }

.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-table td { border: 1px solid var(--color-grey);  padding: 10px;}

.quick-service-wrapper .info-container .tab-box .tab-content .tab .list-table .btn-search { padding: 4px 10px; background: var(--color-purple); color: var(--color-white); border-radius: 6px; 
		cursor: pointer; }


.research-line .title-text { width: 100%; font-size: 1.2em; font-weight: 800; color: var(--color-darkblue); }
.research-line .sub-text { width: 100%; font-size: 0.9rem; font-weight: 100; color: var(--color-black); }

.research-line .info-block { width: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; flex-wrap: wrap; flex-grow: 1; padding-top: 10px; gap: 10px;  }
.research-line .info-block .block { width: auto; min-width: calc(50% - 10px); display: flex; flex-direction: row; justify-content: flex-start; align-items: center; color: var(--color-black); }
.research-line .info-block .block .name-text { padding: 2px 4px; background: var(--color-darkblue); color: var(--color-white); font-size: 0.80rem; border-radius: 6px; margin-right: 6px; }
.research-line .info-block .block .normal-text { font-size: 0.86rem; }

.research-line .unit-block { width: 100%; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; padding-top: 10px; font-weight: 300; color: var(--color-black); margin-bottom: -20px; }


.research-line .info-block .info-table { table-layout: fixed;  width: 100%;  border-collapse: separate; text-align: left; font-size: 0.9rem; }
.research-line .info-block .info-table thead { display: none; }
.research-line .info-block .info-table tbody { color: var(--color-black); font-weight: 300; white-space: nowrap; text-align: left;}
.research-line .info-block .info-table tbody tr { width: calc(100% - 12px); padding: 2px 6px;  
	display: flex; flex-direction: row; justify-content: flex-start; align-items: center; flex-wrap: wrap; border: 1px solid var(--color-white); border-radius: 10px; margin-top: 4px; background: var(--color-white);}
.research-line .info-block .info-table tbody tr td { border: 0px; margin: 4px; padding: 4px 6px; border: 1px solid;	  }
.research-line .info-block .info-table td:nth-child(1) { min-width: 120px; font-size: 0.9rem; font-weight: 500; border-radius: 10px; border: 1px solid var(--color-lightblue); background: var(--color-lightblue); color: var(--color-darkblue); }
.research-line .info-block .info-table td:nth-child(2) { min-width: 120px; font-size: 0.9rem; font-weight: 500; border-radius: 10px; border: 1px solid var(--color-lightblue); background: var(--color-lightblue); color: var(--color-darkblue); }
.research-line .info-block .info-table td:nth-child(3) { min-width: 120px; font-size: 0.9rem; font-weight: 500; border-radius: 10px; border: 1px solid var(--color-lightblue); background: var(--color-lightblue); color: var(--color-darkblue); }
.research-line .info-block .info-table td:nth-child(4) { min-width: 120px; font-size: 0.9rem; font-weight: 500; border-radius: 10px; border: 1px solid var(--color-lightblue); background: var(--color-lightblue); color: var(--color-darkblue); }
.research-line .info-block .info-table td:nth-child(5) { min-width: 120px; font-size: 0.9rem; font-weight: 500; border-radius: 10px; border: 1px solid var(--color-lightblue); background: var(--color-lightblue); color: var(--color-darkblue); }
.research-line .info-block .info-table td:nth-child(6) { min-width: 120px; font-size: 0.9rem; font-weight: 500; border-radius: 10px; border: 1px solid var(--color-lightblue); background: var(--color-lightblue); color: var(--color-darkblue); }
.research-line .info-block .info-table td:nth-child(7) { width: 100%; font-size: 0.9rem; text-align: right; border: 0;  }
.research-line .info-block .info-table td:nth-child(1)::before { content: "(전용면적 ㎡)  "; }
.research-line .info-block .info-table td:nth-child(2)::before { content: "(세대수) "; }
.research-line .info-block .info-table td:nth-child(3)::before { content: "(일반매매가) "; }
.research-line .info-block .info-table td:nth-child(4)::before { content: "(최근실거래가) "; }
.research-line .info-block .info-table td:nth-child(5)::before { content: "(일반전세가) "; }
.research-line .info-block .info-table td:nth-child(6)::before { content: "(최근실전세가) "; }
.research-line .info-block .info-table .btn-regist { padding: 4px 10px; background: var(--color-purple); color: var(--color-white); border-radius: 6px; 
	cursor: pointer; }

.research-line .info-block .info-table td { border: 1px solid var(--color-grey);  padding: 10px;}


/* on off button */
.btn-alarm {
	position: absolute;
	/* hidden */
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
  }
  
  .alarm-label {
	margin-left: 10px;
	position: relative;
	cursor: pointer;
	display: block;
	width: 50px;
	height: 25px;
	background: #fff;
	border: 2px solid var(--color-lightblue);
	border-radius: 20px;
	transition: 0.2s;
  }
  .alarm-label:hover {
	background: #efefef;
  }
  .btn-onoff {
	position: absolute;
	top: 3px;
	left: 2px;
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 20px;
	background: var(--color-lightblue);
	transition: 0.2s;
  }
  
  /* checking style */
  .btn-alarm:checked+.alarm-label {
	background: var(--color-blue);
	border: 2px solid var(--color-blue);
  }
  /*
  .btn-alarm:checked+.alarm-label:hover {
	background: var(--color-lightblue);
  }
  */
  /* move */
  .btn-alarm:checked+.alarm-label .btn-onoff{
	left: 30px;
	background: #fff;
	box-shadow: 1px 2px 3px #00000020;
  } 



  /* table style*/

.quick-service-wrapper .process-container .process-box .alarm-table { table-layout: fixed;  width: 100%;  border-collapse: collapse; text-align: left; font-size: 0.9rem; border: 0px; margin-top: -10px; }
.quick-service-wrapper .process-container .process-box .alarm-table thead { display: none; }
.quick-service-wrapper .process-container .process-box .alarm-table tbody { color: var(--color-black); font-weight: 300; }
.quick-service-wrapper .process-container .process-box .alarm-table thead tr { width: calc(100% - 20px); padding: 2px 10px;  display: flex; flex-direction: row; justify-content: flex-start; align-items: center; flex-wrap: wrap; }
.quick-service-wrapper .process-container .process-box .alarm-table tbody tr { width: calc(100% - 22px); padding: 2px 10px;  
	display: flex; flex-direction: row; justify-content: flex-start; align-items: center; flex-wrap: wrap; border: 1px solid var(--color-grey); border-radius: 10px; margin-top: 4px;}
.quick-service-wrapper .process-container .process-box .alarm-table tbody td { border: 0px; margin: 0; padding: 0;	  }
.quick-service-wrapper .process-container .process-box .alarm-table td:nth-child(1) { width: 10%; font-size: 0.9rem; color: var(--color-darkpurple); font-weight: 500;  }
.quick-service-wrapper .process-container .process-box .alarm-table td:nth-child(2) { width: 90%; font-size: 0.9rem; font-weight: 800; color: var(--color-darkpurple); margin: 2px 0px; }
.quick-service-wrapper .process-container .process-box .alarm-table td:nth-child(3) { width: 50%; font-size: 0.8rem; color: var(--color-darkgrey); text-align: left; color: var(--color-blue); }
.quick-service-wrapper .process-container .process-box .alarm-table td:nth-child(4) { display: flex; justify-content: flex-end;  align-items: center; width: 50%; font-size: 0.8rem; color: var(--color-darkgrey);  }
.quick-service-wrapper .process-container .process-box .alarm-table td:nth-child(5) { width: 100%; font-size: 0.8rem; color: var(--color-darkgrey); text-align: right;  margin: 10px 0px; }
.quick-service-wrapper .process-container .process-box .alarm-table td:nth-child(2)::before { content: "(주소) "; }
.quick-service-wrapper .process-container .process-box .alarm-table td:nth-child(3)::before { content: "(면적 / 상세) "; }
.quick-service-wrapper .process-container .process-box .alarm-table td:nth-child(4)::before { content: "알림 설정 "; }
/*.quick-service-wrapper .process-container .process-box .alarm-table td:nth-child(4) { width: 100%; text-align: right; align-self: flex-end;  }*/

.quick-service-wrapper .process-container .process-box .alarm-table td { border: 1px solid var(--color-grey);  padding: 10px;}




.quick-service-wrapper .process-container .process-box .alarm-table .btn-info { padding: 4px 10px; color: var(--color-white);  background: var(--color-purple); cursor: pointer; border-radius: 6px; }
.quick-service-wrapper .process-container .process-box .alarm-table .btn-del { padding: 4px 10px; color: var(--color-darkgrey);  background: var(--color-lightgrey); cursor: pointer; border-radius: 6px; }



/* shingan life join */
.shinhan-join-wrapper { position: relative; width: 100%; height: auto;  
	display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: wrap; gap: 20px; }
.shinhan-join-wrapper .title-container {  width: calc(100% - 40px); height: auto; background: var(--color-white); padding: 20px;
display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 30px;
/*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
font-size: 1.2rem; }
.shinhan-join-wrapper .title-container .title { font-size: 2.0rem; font-weight: 800; text-align: center;}
.shinhan-join-wrapper .title-container .sub-title { font-size: 1.1rem; font-weight: 100; }

.shinhan-join-wrapper .input-container { width: calc(1000px - 40px); display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
	padding: 20px; background-color: var(--color-white); overflow-y: auto; border: 4px solid var(--color-darkpurple); border-radius: 40px; }


/* scroll-bar design */

.shinhan-join-wrapper .input-container .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;}

.shinhan-join-wrapper .input-container .btn-line { justify-content: center; border: 0px; }


.shinhan-join-wrapper .input-container .line .title {width: 60%; font-weight: 600; font-size: 1.1rem;}
.shinhan-join-wrapper .input-container .line .name {width: calc(76% - 8px); height: 26px; line-height: 26px; font-size: 1.0rem; color: var(--color-black);  }

.shinhan-join-wrapper .input-container .line .gender{	display:none;}
.shinhan-join-wrapper .input-container .line .gender + label{ display: block; background:#fff;	border:1px solid var(--color-grey); border-radius: 20px; 
			width: calc(15% - 2px); height: 40px; line-height: 40px; text-align:center; font-size: 1.0em; font-weight: 600;
			cursor: pointer;}
.shinhan-join-wrapper .input-container .line .gender:checked + label{ width: 15%;	background: var(--color-blue);	 color: var(--color-white); border: 0; }
.shinhan-join-wrapper .input-container .line .birth { width: calc(70% - 8px); height: 26px; line-height: 26px; font-size: 1.0em; color: var(--color-black);  padding-top: 10px; }

.shinhan-join-wrapper .input-container .line .phone {width: calc(76% - 8px); height: 26px; line-height: 26px; font-size: 1.0em; color: var(--color-black);  padding-top: 10px; }
.shinhan-join-wrapper .input-container .line .btn-search-address { width: 24%; height: 40px; line-height: 40px; font-size: 1.0em; font-weight: 600;	
	border-radius: 40px; cursor: pointer; background: var(--color-blue); color: var(--color-white); }
.shinhan-join-wrapper .input-container .line .btn_auth { width: 24%; height: 50px; line-height: 50px; font-size: 1.3em; font-weight: 600;	border-radius: 6px; cursor: pointer; }
.shinhan-join-wrapper .input-container .line .address {width: calc(76% - 8px); height: 26px; line-height: 26px; font-size: 1.0em; color: var(--color-black);  padding-top: 10px; }
.shinhan-join-wrapper .input-container .line .detail-address {width: 100%; height: 26px; line-height: 26px; font-size: 1.0em; color: var(--color-black);  padding-top: 10px; }
.shinhan-join-wrapper .input-container .line .btn-join { width: calc(80% - 40px); padding: 10px 20px; background: var(--color-purple); color: var(--color-white); 
	font-size: 1.6rem; font-weight: 600; border-radius: 20px;  cursor: pointer; }

.shinhan-join-wrapper .input-container .line .term-title {width: calc(76% - 8px); font-weight: 600; font-size: 1.8em;}

.shinhan-join-wrapper .input-container .term-line { width: 100%; height: auto; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;  gap: 6px;
	padding: 30px 0px 6px 0px; gap: 20px;}
.shinhan-join-wrapper .input-container .term-line  .btn-view-term{ padding: 2px 8px; background: var(--color-grey); color: var(--color-darkgrey); border-radius: 20px; cursor: pointer; }
.shinhan-join-wrapper .input-container .term-line .term-title {width: calc(60% - 8px);  font-weight: 600; font-size: 1.1em;}

.shinhan-join-wrapper .input-container .term-line div { display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; gap: 10px; font-size: 1.0rem; }

.shinhan-join-wrapper .input-container .term-line div .checkbox { width: 20px; height: 20px; }

.shinhan-join-wrapper .input-container .term-line .term-box { width: calc(100% - 22px); padding: 10px; min-height: 100px; max-height: 200px;  overflow-y: auto; 
	border: 1px solid var(--color-grey); font-size: 0.8rem; text-align: left; border-radius: 10px;  }

.shinhan-join-wrapper .input-container .term-line .term-box::-webkit-scrollbar { width: 12px; height: 8px;} /*스크롤바의 너비*/
.shinhan-join-wrapper .input-container .term-line .term-box::-webkit-scrollbar-thumb { background-color: var(--color-darkpurple); /*스크롤바의 색상*/  
    background-clip: padding-box;  border: 2px solid transparent;	 border-radius: 1em; }
.shinhan-join-wrapper .input-container .term-line .term-box::-webkit-scrollbar-track { background-color: var(--color-white);} /*스크롤바 트랙 색상*/

.shinhan-join-wrapper .input-container .info-line { width: calc(100% - 40px); height: auto; min-height: 100px; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; 
	background: var(--color-lightgrey); color: var(--color-darkgrey); font-size: 0.9rem; padding: 20px;}
.shinhan-join-wrapper .input-container .info-line p{ font-weight: 800; font-size: 1.0rem;}
		  
/* end main style */




/* start footer style */

.footer-wrapper { width: auto; width: 100%; 
	display: flex; flex-direction: column; justify-content: center; align-items: center; flex-wrap: wrap; color: var(--color-grey); }
.footer-wrapper .logo-line { width: 100%; height: 80px; padding: 20px 0px 10px 0px; display: flex; justify-content: column; align-items: center; 
	border-bottom: 1px solid var(--color-darkgrey);  font-size: 0.9rem; flex-wrap: wrap;  }	
.footer-wrapper .logo-line div { width: 100%; }
.footer-wrapper .logo-line .terms-line { width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: row; gap: 20px; }
.footer-wrapper .logo-line .terms-line p { font-weight: 600; cursor: pointer; }
.footer-wrapper .logo-line .terms-line p a { font-weight: 600; cursor: pointer; color: var(--color-grey);}
.footer-wrapper .address-line { width: 100%; padding: 20px 0px; display: flex; justify-content: space-between; align-items: center;  font-size: 0.9rem;  }
.footer-wrapper .copyright-line { width: 100%; padding: 20px 0px; display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; }


/* drop zone */
#actions {
	margin: 2em 0;
  }
  
  
  /* Mimic table appearance */
  div.table {
	display: table;
	width: 100%; 
  }
  div.table .file-row {
	display: table-row;
  }
  div.table .file-row > div {
	display: table-cell;
	vertical-align: top;
	border-top: 1px solid #ddd;
	padding: 8px;
  }
  div.table .file-row:nth-child(odd) {
	background: #f9f9f9;
  }
  
  
  
  /* The total progress gets shown by event listeners */
  #total-progress {
	opacity: 0;
	transition: opacity 0.3s linear;	
  }
  #total-progress.active { background: var(--color-blue); opacity: 1;}
  
  /* Hide the progress bar when finished */
  #previews .file-row.dz-success .progress {
	opacity: 0;
	transition: opacity 0.3s linear;
  }
  
  /* Hide the delete button initially */
  #previews .file-row .delete {
	display: none;
  }
  
  /* Hide the start and cancel buttons and show the delete button */
  
  #previews .file-row.dz-success .start,
  #previews .file-row.dz-success .cancel {
	display: none;
  }
  #previews .file-row.dz-success .delete {
	display: block;
  }

  /* my dorpzone style */
  .quick-service-wrapper .process-container .process-box .submit-container { width: 100%;  }
  .quick-service-wrapper .process-container .process-box .submit-container .title-text { font-size: 1.1rem; font-weight: 800; padding-top: 10px; }
  .quick-service-wrapper .process-container .process-box .submit-container .sub-text { font-size: 1.0rem; font-weight: 300;  padding-top: 0px; }
  .dropzone-button-line { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; width: 100%; gap: 10px;  }
  .fileinput-button { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 6px; padding: 4px 20px; border-radius: 40px; color: var(--color-white); background: var(--color-darkpurple); font-size: 1.0rem; cursor: pointer; }
  .btn-primary { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 6px; padding: 4px 20px; border-radius: 40px; color: var(--color-white); background: var(--color-blue); font-size: 0.9rem; cursor: pointer;}
  .btn-warning { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 6px; padding: 4px 20px; border-radius: 40px; color: var(--color-white); background: var(--color-orange); font-size: 0.9rem; cursor: pointer; }
  .btn-danger { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 6px; padding: 4px 20px; border-radius: 40px; color: var(--color-white); background: var(--color-red); font-size: 0.9rem; cursor: pointer; }


  .quick-service-wrapper .process-container .process-box .file-list { width: 100%;  margin-top: 0px; }
  .quick-service-wrapper .process-container .process-box .file-list .title-text { font-size: 1.1rem; font-weight: 800; padding-top: 20px;
	 display: flex; flex-direction: row; justify-content: space-between; align-items: center;  }

  .quick-service-wrapper .process-container .process-box .file-list .title-text .normal-text { font-size: 0.9rem; font-weight: 300;}
  .quick-service-wrapper .process-container .process-box .file-list ul { padding-top: 30px; }
  .quick-service-wrapper .process-container .process-box .file-list ul li { display: flex; justify-content: space-between; align-items: center;
		font-size: 0.9rem; font-weight: 300; border: 1px solid var(--color-grey); border-radius: 10px; gap: 10px; margin-top: 4px;
		padding: 10px;   }
  .quick-service-wrapper .process-container .process-box .file-list ul li .file-action { display: flex; justify-content: space-between; align-items: center;
		gap: 20px;}
  .quick-service-wrapper .process-container .process-box .file-list ul li .file-action .btn { padding: 4px; background: var(--color-white); color: var(--color-darkpurple); cursor: pointer; }
  /* end dropzone */ 



	

/* end footer style */
	


	
}