@import url(//fonts.googleapis.com/earlyaccess/nanumbrushscript.css);

	@import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css);
	@import url(//fonts.googleapis.com/earlyaccess/nanummyeongjo.css);
	@import url(//fonts.googleapis.com/earlyaccess/nanumpenscript.css);
	@import url(//fonts.googleapis.com/earlyaccess/nanumsquare.css);


	/* 다크모드/라이트모드 대응 (변수 적용) */
    :root {
      --bg-color: #ffffff;
      --text-color: #000000;
    }

    [data-theme="dark"] {
      --bg-color: #121212;
      --text-color: #f5f5f5;
    }

    body {
      background-color: var(--bg-color);
      color: var(--text-color);
      transition: background-color 0.3s, color 0.3s;
    }

	html, body{	padding: 0;margin: 0;}
	body {
		margin: 0;
		font-family: "나눔스퀘어", "NanumSquare", "verdana" , sans-serif;

		/* font-family:'NotoSansKR Regular', sans-serif; */
		font-weight: 400;
		color: #fff;
		background:#121212 !important;
		height:100%;
	}


	body, div, p
	{
		/*font-family: 'Pretendard', 'Noto Sans KR', sans-serif;*/
		font-family: "나눔고딕", "Nanum Gothic", "verdana" , sans-serif;
		/*font-family: "나눔스퀘어", "NanumSquare", "verdana" , sans-serif;*/
		color: #d4d4d4; -webkit-text-size-adjust: none;
	}
	div, ul, ol, dl, dt, dd, li, table, thead, tbody, td, tr, th, caption, address {margin:0; padding:0; list-style:none; }
	h1, h2, h3, h4, h5, h6{	line-height: 1;	color: #330; font-weight: bold;	margin: 10px 0 10px 0;}
	h1, h2, h3{	font-size: 18px;}
	h4, h5, h6{	font-size: 16px;}

	em,address{font-family: "나눔스퀘어", "NanumSquare", "verdana" , sans-serif; font-weight: normal; font-style:normal;}
	label,img,input,select,textarea,button {  display: inline-block; vertical-align: middle; }

	a, a:link, a:active, a:visited, a:hover {
		color: #ebebeb; 
		text-decoration:none;
		margin: 0;
		padding: 0;
	}
	pre { font-size: 12px;	width: 100%;	overflow: auto;	-webkit-overflow-scrolling: touch;}
	#page nav{	display: none;}


	/*************************** button ***************************/
	button::-moz-focus-inner,
	input::-moz-focus-inner {
		border: 0;
		padding: 0;
	}
	input:focus {
		/*outline:1px solid #7f7f7f;*/
	}

	.input {background:#29343c;color: #ebebeb;border-radius:10px;height:42px;font-size:1.0em; font-family: "나눔고딕", "Nanum Gothic", sans-serif;padding-left:6px;font-weight:bold; border:1px solid #29343c;box-sizing: border-box;}
	.input2 {height:22px;width:20%;font-size:1.0em; font-family: "나눔고딕", "Nanum Gothic", sans-serif;padding-left:5px;font-weight:bold; border:1px solid #d2d2d2;}
	.input3 {height:25px;font-size:0.9em; font-family: "나눔고딕", "Nanum Gothic", sans-serif;padding-left:5px;font-weight:bold; border:1px solid #d2d2d2;}
	.input4 {height:25px;width:50%;font-size:1.0em; font-family: "나눔고딕", "Nanum Gothic", sans-serif;padding-left:5px;font-weight:bold;}
	.input5 {height:25px;width:100px;font-size:1.0em; font-family: "나눔고딕", "Nanum Gothic", sans-serif;padding-left:5px;font-weight:bold;}

	.input_s {border-radius:1px;width:100%;height:32px;font-size:12px; padding:2px 5px;font-weight:300; border:1px solid #d2d2d2;}
	.input_r {border-radius:5px;width:100%;height:32px;font-size:12px; padding:2px 5px;font-weight:300; border:1px solid #d2d2d2;}

	.select {
			border-radius: 10px;height:42px;font-size:1.0em; font-family: "나눔고딕", "Nanum Gothic", sans-serif;
			padding-left:5px;
			padding-right:5px;
			border: solid 1px #29343c;
			background:#29343c;
			color: #ebebeb;
	}
	.select2 {font-size:1.0em; font-family: "나눔고딕", "Nanum Gothic", sans-serif;}
	.clear {clear:both;}
	input::placeholder {
	  color: #888888;
	}
	textarea {padding:10px;border-radius: 10px; background:#29343c;color: #ebebeb;}
	textarea::placeholder {
	  color: #888888;
	}

	.select-mobile {
		border-radius: 10px;
		height:28px;
		font-size:1.0em; 
		font-family: "나눔고딕", "Nanum Gothic", sans-serif;
		border:1px solid #29343c;
		background:#29343c;
		color: #ebebeb;
		position:relative; 
		padding:6px; 
		cursor:pointer;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.select-mobile span {
		margin-top:5px;
		display: flex;
		align-items: center;
		justify-content: flexd-start;
	}
	.cursor {cursor:pointer;}
	.pointer {cursor:pointer;}


	.color-site {color:#333;}
	a.color-site {color:#ebebeb;}

	.color-white {color:#fff;}
	.color-black {color:#000;}

	a.color-white {color:#fff;}
	a.color-black {color:#000;}

	.color-white i {color:#fff;}
	.color-black i {color:#000;}

	.font14 {font-size:14px;}
	.font16 {font-size:16px;}
	.font18 {font-size:18px;}
	.font20 {font-size:20px;}
	.font26 {font-size:26px;}

	a.font14 {font-size:14px;}
	a.font16 {font-size:16px;}
	a.font18 {font-size:18px;}
	a.font20 {font-size:20px;}
	a.font26 {font-size:26px;}

	.font16 i {font-size:16px;}
	.font18 i {font-size:18px;}
	.font20 i {font-size:20px;}
	.font26 i {font-size:26px;}


	/* with */
	.w10p { width:10%;}
	.w20p { width:20%;}
	.w30p { width:30%;}
	.w40p { width:40%;}
	.w50p { width:50%;}
	.w60p { width:60%;}
	.w70p { width:70%;}
	.w80p { width:80%;}
	.w90p { width:90%;}
	.w95p { width:95%;}
	.w100p { width:100%;}

	.w10 { width:10px;}
	.w20 { width:20px;}
	.w30 { width:30px;}
	.w40 { width:40px;}
	.w50 { width:50px;}
	.w80 { width:80px;}
	.w90 { width:90px;}
	.w100 { width:100px;}
	.w120 { width:120px;}
	.w140 { width:140px;}
	.w150 { width:150px;}
	.w160 { width:160px;}
	.w170 { width:170px;}
	.w180 { width:180px;}
	.w200 { width:200px;}
	.w210 { width:210px;}
	.w220 { width:220px;}
	.w240 { width:240px;}
	.w250 { width:250px;}
	.w260 { width:260px;}
	.w270 { width:270px;}
	.w280 { width:280px;}
	.w300 { width:300px;}
	.w400 { width:400px;}

	.h24 {height:24px;}
	.h26 {height:26px;}
	.h30 {height:30px;}
	.h34 {height:34px;}
	.h35 {height:35px;}
	.h36 {height:36px;}
	.h37 {height:37px;}
	.h38 {height:38px;}
	.h40 {height:40px;}
	.h50 {height:50px;}
	.h100 {height:100px;}
	.h200 {height:200px;}
	/* 아이콘 표시 */
	.icon-red {width:60px;margin:1px 0px;padding:2px 4px;background:#ff0000; font-size:12px; color:#fff;border-radius:5px;}
	.icon-blue {width:60px;margin:1px 0px;padding:2px 4px;background:#0066cc; font-size:12px; color:#fff;border-radius:5px;}
	.icon-green {width:60px;margin:1px 0px;padding:2px 4px;background:#006600; font-size:12px; color:#fff;border-radius:5px;}
	.icon-pink {width:60px;margin:1px 0px;padding:2px 4px;background:#ff33cc; font-size:12px; color:#000;border-radius:5px;}
	.icon-gray {width:60px;margin:1px 0px;padding:2px 4px;background:#c0c0c0; font-size:12px; color:#000;border-radius:5px;}
	.icon-white {width:60px;margin:1px 0px;padding:2px 4px;background:#fff; border:solid 1px #000;font-size:12px; color:#000;border-radius:5px;}
	.icon-black {width:60px;margin:1px 0px;padding:2px 4px;background:#000; font-size:12px; color:#fff;border-radius:5px;}

	.icon-count {margin:1px 0px;padding:2px 6px;background:#808080; font-size:12px; color:#fff;border-radius:15px;}

	.ic-blue {width:60px;margin:1px 0px;padding:2px 4px;background:#0066cc; font-size:12px; color:#fff;border-radius:5px;white-space:nowrap;}
	.ic-red {width:60px;margin:1px 0px;padding:2px 4px;background:#ff0000; font-size:12px; color:#fff;border-radius:5px;white-space:nowrap;}


	.code {font-size:11px;color:#969696;}
	.blod {font-weight:700;}

	.state_name {flex-shrink:0; font-size:11px;padding:6px 10px;margin-right:2px;border-radius:7px;}
	.icon_name {flex-shrink:0; font-size:11px;padding:4px 4px;margin-right:2px;border-radius:5px;}
	.tag_name {flex-shrink:0; background:#29343c; font-size:11px;padding:4px 4px;margin-right:2px;border-radius:5px;}
	.border_name {flex-shrink:0; border:solid 1px #0099cc;font-size:11px;padding:3px 3px;margin-right:2px;border-radius:5px;}
	.item_name {flex-shrink:0; background:#ddd; font-size:14px;padding:8px 8px;margin-right:2px;border-radius:10px;}
	.state_tag {flex-shrink:0; background:#ddd;font-size:11px;padding:4px 6px;margin-right:2px;border-radius:7px;white-space:nowrap;}

	.s-red {background:#ff0000; color:#fff;}
	.s-gray {background:#ddd; color:#000;}
	.s-black {background:#000; color:#fff;}
	.s-blue {background:#0066cc; color:#fff;}
	.s-green {background:#009900; color:#fff;}
	.s-orange {background:#ff9900; color:#000;}
	.s-yellow {background:#ffe100; color:#000;}
	.s-brown {background:#990066; color:#fff;}
	.s-purple {background:#9900ff; color:#fff;}
	.s-pink {background:#ff00ff; color:#000;}
	.s-white {background:#fff; color:#000; border:solid 1px #ddd;}


	a.state_name {flex-shrink:0; font-size:14px;padding:4px 10px;margin-right:2px;border-radius:14px;}
	a.icon_name {flex-shrink:0; font-size:11px;padding:4px 4px;margin-right:2px;border-radius:5px;}
	a.tag_name {flex-shrink:0; background:#ddd; font-size:11px;padding:4px 4px;margin-right:2px;border-radius:5px;}
	a.border_name {flex-shrink:0; border:solid 1px #0099cc;font-size:11px;padding:3px 3px;margin-right:2px;border-radius:5px;}
	a.item_name {flex-shrink:0; background:#ddd; font-size:14px;padding:8px 8px;margin-right:2px;border-radius:10px;}
	a.state_tag {flex-shrink:0; background:#ddd;font-size:11px;padding:4px 6px;margin-right:2px;border-radius:7px;white-space:nowrap;}

	a.s-red {background:#ff0000; color:#fff;}
	a.s-gray {background:#ddd; color:#000;}
	a.s-black {background:#000; color:#fff;}
	a.s-blue {background:#0066cc; color:#fff;}
	a.s-green {background:#009900; color:#fff;}
	a.s-orange {background:#ff9900; color:#000;}
	a.s-yellow {background:#ffe100; color:#000;}
	a.s-brown {background:#990066; color:#fff;}
	a.s-purple {background:#9900ff; color:#fff;}
	a.s-pink {background:#ff00ff; color:#000;}
	a.s-white {background:#fff; color:#000; border:solid 1px #ddd;}

	.f-red {color:#ff0000;}
	.f-gray {color:#ddd;}
	.f-black {color:#000;}
	.f-blue {color:#0066cc; }
	.f-green {color:#009900;}
	.f-orange {color:#ff9900;}
	.f-brown {color:#990066;}
	.f-purple {color:#9900ff;}
	.f-pink {color:#ff00ff;}

	.area-btn {
		display: inline-block;
		margin: 5px 0;
		padding: .5em .75em;
		border-radius: 10px;
		box-sizing: content-box;
		-moz-box-sizing: content-box;
		background: transparent;
		outline: 0;
		vertical-align: middle;
		font-family: : inherit;
		font-size: 18px;
		text-decoration: none;
		white-space: nowrap;
		/*cursor: pointer;*/
	}

	/* 버튼 고정 사이즈 */
	.area-btn.bigsmall {
		padding: 4px 12px;
		font-size: 11px;
		line-height: 15px;
		margin:0px 5px;
	}

	.area-btn.small {
		height: 25px;
		padding: 0 .75em;
		font-size: 11px;
		line-height: 25px;
	}

	.area-btn.default {
		height: 35px;
		padding: 0 .75em;
		font-size: 12px;
		line-height: 35px;
	}

	.area-btn.large {
		height: 46px;
		padding: 0 1em;
		font-size: 14px;
		font-weight: 600;
		line-height: 46px;
	}

	.area-btn.big {
		width:94%;
		height: 86px;
		padding: 0 1em;
		font-size: 22px;
		font-weight: 600;
		line-height: 86px;
	}

	.area-btn.login {
		width:97px;
		height: 97px;
		padding: 0px 10px 0;
		font-size: 18px;
		font-weight: bold;

		line-height: 10px;
		font-family: "나눔고딕", "Nanum Gothic", "verdana" , sans-serif;
		position:relative !important;
		left:0; top:0;
	}

	/* 버튼 스타일 */
	.area-btn.black,
	.area-btn.black:link,
	.area-btn.black:visited {
		color: #fff!important;
		border: 1px solid #353535;
		border-bottom-color: #353535;
		box-shadow: 0 2px 2px rgba(0,0,0,0.04);
		background: #1f1f1f;
		background: linear-gradient(to bottom, #000 40%, #1f1f1f 100%);
	 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000', endColorstr='#f6f6f6', GradientType=0 );/*IE*/
	}

	.area-btn.black:focus,
	.area-btn.black:hover {
		background: #3f3f3f;
		background: linear-gradient(to bottom, #000 0%, #1f1f1f 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000', endColorstr='#ffffff', GradientType=0 );/*IE*/
	}

	.area-btn.black:active,
	.area-btn.black.active {
		text-shadow: 0 1px 0px #fff;
		border-color: #2f2f2f;
		border-top-color: #000;
		background: #f4f4f4;
		box-shadow: none
	}

	.area-btn.gray,
	.area-btn.gray:link,
	.area-btn.gray:visited {
		color: #666!important;
		border: 1px solid #ebebeb;
		border-bottom-color: #c6c6c6;
		box-shadow: 0 2px 2px rgba(0,0,0,0.04);
		background: #dbdbdb;
		background: linear-gradient(to bottom, #ffffff 40%, #f6f6f6 100%);
	 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6', GradientType=0 );/*IE*/
	}

	.area-btn.gray:focus,
	.area-btn.gray:hover {
		background: #d2d2d2;
		background: linear-gradient(to bottom, #fafafa 0%, #fff 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#ffffff', GradientType=0 );/*IE*/
	}

	.area-btn.gray:active,
	.area-btn.gray.active {
		text-shadow: 0 1px 0px #fff;
		border-color: #dfdfdf;
		border-top-color: #ddd;
		background: #f4f4f4;
		box-shadow: none
	}


	.area-btn.white,
	.area-btn.white:link,
	.area-btn.white:visited {
		color: #666!important;
		border: 1px solid #ebebeb;
		border-bottom-color: #c6c6c6;
		box-shadow: 0 2px 2px rgba(0,0,0,0.04);
		background: #fff;
		background: linear-gradient(to bottom, #ffffff 40%, #f6f6f6 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6', GradientType=0 );/*IE*/
	}

	.area-btn.white:focus,
	.area-btn.white:hover {
		background: #f4f4f4;
		background: linear-gradient(to bottom, #fafafa 0%, #fff 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#ffffff', GradientType=0 );/*IE*/
	}

	.area-btn.white:active,
	.area-btn.white.active {
		text-shadow: 0 1px 0px #fff;
		border-color: #ebebeb;
		border-top-color: #ddd;
		background: #f4f4f4;
		box-shadow: none
	}

	.area-btn.blue,
	.area-btn.blue:link,
	.area-btn.blue:visited {
		color: #fff!important;
		text-shadow: 0 1px 0px #135fa4;
		border: 1px solid #135fa4;
		border-top-color: #2d9acf;
		box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.22);
		background: #3aaee7;
		background: linear-gradient(to bottom, #3aaee7 0%, #1a80d9 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3aaee7', endColorstr='#1a80d9', GradientType=0 );/*IE*/
	}

	.area-btn.blue:hover {
		background: #50bae9;
		background: linear-gradient(to bottom, #50bae9 0%, #3392de 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#50bae9', endColorstr='#3392de', GradientType=0 );/*IE*/
	}

	.area-btn.blue:active,
	.area-btn.blue.active {
		border-color: #2585d9;
		border-top-color: #0f4678;
		background: #2d90e7;
		box-shadow: none
	}

	.area-btn.green,
	.area-btn.green:link,
	.area-btn.green:visited {
		color: #fff!important;
		text-shadow: 0 1px 0px #135fa4;
		border: 1px solid #368321;
		border-top-color: #439f2a;
		box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.22);
		background: #76ac41;
		background: linear-gradient(to bottom, #76ac41 0%, #489215 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#76ac41', endColorstr='#489215', GradientType=0 );/*IE*/
	}

	.area-btn.green:hover {
		background: #4c9b16;
		background: linear-gradient(to bottom, #7ab243 0%, #4c9b16 100%);
	 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7ab243', endColorstr='#4c9b16', GradientType=0 );/*IE*/
	}

	.area-btn.green:active,
	.area-btn.green.active {
		border-color: #6c9d3c;
		border-top-color: #368321;
		background: #4c9b16;
		box-shadow: none;
		text-shadow: none;
	}

	.area-btn.yellow,
	.area-btn.yellow:link,
	.area-btn.yellow:visited {
		color: #000!important;
		text-shadow: 0 1px 0 #fcda7c;
		border: 1px solid #dfac23;
		border-bottom: 1px solid #c06f01;
		box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.10);
		background: #f5a802;
		background: linear-gradient(to bottom, #fcd054 0%, #f5a802 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcd054', endColorstr='#f5a802', GradientType=0 );/*IE*/
	}

	.area-btn.yellow:hover {
		background: #ffb618;
		background: linear-gradient(to bottom, #ffdc78 0%, #ffb618 100%);
	 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffdc78', endColorstr='ffb618', GradientType=0 );/*IE*/
	}

	.area-btn.yellow:active,
	.area-btn.yellow.active {
		border-color: #efa80d;
		border-top-color: #cf8e00;
		background: #ffb618;
		box-shadow: none;
		text-shadow: none;
	}

	.area-btn.red,
	.area-btn.red:link,
	.area-btn.red:visited {
		color: #fff!important;
		text-shadow: 0 1px 0 #991e1a;
		border: 1px solid #991e1a;
		border-top: 1px solid #c06f01;
		box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.20);
		background: #b22520;
		background: linear-gradient(to bottom, #e8605a 0%, #b22520 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8605a', endColorstr='#b22520', GradientType=0 );/*IE*/
	}

	.area-btn.red:hover {
		background: #ca3631;
		background: linear-gradient(to bottom, #f17771 0%, #ca3631 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffdc78', endColorstr='ffb618', GradientType=0 );/*IE*/
	}

	.area-btn.red:active,
	.area-btn.red.active {
		border-color: #a0211d;
		border-top-color: #7f1b17;
		background: #b22520;
		box-shadow: none;
		text-shadow: none;
	}


	.area-btn.orange,
	.area-btn.orange:link,
	.area-btn.orange:visited {
		color: #fff!important;
		text-shadow: 0 1px 0 #bb5e00;
		border: 1px solid #bb5e00;
		border-top: 1px solid #e37200;
		box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.20);
		background: #ea7500;
		background: linear-gradient(to bottom, #ff8000 0%, #e37200 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8000', endColorstr='#e37200', GradientType=0 );/*IE*/
	}

	.area-btn.orange:hover {
		background: #df7000;
		background: linear-gradient(to bottom, #f17771 0%, #df7000 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffdc78', endColorstr='e37200', GradientType=0 );/*IE*/
	}

	.area-btn.orange:active,
	.area-btn.orange.active {
		border-color: #d06800;
		border-top-color: #994d00;
		background: #e37200;
		box-shadow: none;
		text-shadow: none;
	}

	.area-btn.k-plate,
	.area-btn.k-plate:link,
	.area-btn.k-plate:visited {
		color: #666!important;
		border: 1px solid #c3c3c3;
		border-top-color: #d9d9d9;
		box-shadow: 0 1px 1px rgba(0, 0, 0, .1), inset -1px -1px 0 #fff;
		background: #fff;
		background: linear-gradient(to bottom, #fdfdfd 0%, #f8f8f8 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfdfd', endColorstr='#f8f8f8', GradientType=0 );
	}

	.area-btn.k-plate:focus,
	.area-btn.k-plate:hover {
		background: #f4f4f4;
		background: linear-gradient(to bottom, #fafafa 0%, #fff 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#ffffff', GradientType=0 );/*IE*/
	}

	.area-btn.k-plate:active,
	.area-btn.k-plate.active {
		text-shadow: 0 1px 0px #fff;
		border-color: #ebebeb;
		border-top-color: #ddd;
		background: #f4f4f4;
		box-shadow: none
	}

	.area-btn.soap,
	.area-btn.soap:link,
	.area-btn.soap:visited {
		padding: .45em .75em .75em .75em;
		color:#888!important;
		text-shadow:0 1px 0 #fafafa;
		border-style: solid;
		border-width: 1px;
		border-top-color: #f2f2f2;
		border-left-color: #dfdfdf;
		border-right-color: #dfdfdf;
		border-bottom-color: #ccc;
		box-shadow:
		0 .2em .3em rgba(0,0,0,.1),
		inset 0 -0.3em 0 #ddd,
		inset 0 -0.33em 0 #f1f1f1;
		background: #e9e9e9;
		background: linear-gradient(to bottom, #fafafa 0%, #e9e9e9 80%);
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#fafafa, endColorstr=#e9e9e9);
	}

	.area-btn.soap.small {
		height: 25px;
		padding: 0 .75em;
		font-size: 11px;
		line-height: 22px;
	}

	.area-btn.soap.default {
		height: 35px;
		padding: 0 .75em;
		font-size: 12px;
		line-height: 32px;
	}

	.area-btn.soap.large {
		height: 46px;
		padding: 0 1em;
		font-size: 18px;
		font-weight: 600;
		line-height: 42px;
	}

	.area-btn.soap.big {
		height: 86px;
		padding: 0 1em;
		font-size: 18px;
		font-weight: 600;
		line-height: 82px;
	}

	.en-01 { font-family: verdana, Helvetica, Arial, sans-serif; }
	.kr-01 { font-family: "나눔고딕", "NotoSansKR Regular", sans-serif !important; font-weight:700; }




	/* 헤딩 그룹 */
	.bc-hgroup-01 {
		margin: 0;
		padding-bottom: 40px;
	}

	.bc-hgroup-01 span.strong { font-weight: 800; }

	.bc-hgroup-01 h1 {
		font-family: Nanum Myeongjo;
		font-size: 46px;
		font-style: normal;
		font-weight: 400;
		letter-spacing: -3px;
		color: #212121;
		line-height: 0;
		display: block;
		padding-bottom: 30px;
	}

	.bc-hgroup-01 h2 {
		font-size: 30px;
		font-family: Nanum Pen Script;
		font-weight: 400;
		font-style: normal;
		letter-spacing: -1px;
		color: #2b96f2;
		line-height: 0;
		display: block;
	}

	/* 강조된 문장 */
	.area-em {
		text-decoration: none;
		font-weight: bold;
		font-style: normal;
	}

	/* 중요한 문장 */
	.area-strong {
		margin-left: 5px;
		padding: 2px 0 2px 0px;
		border-bottom: 2px solid #f7c6b8;
		background-color: transparent;
		background-repeat: no-repeat;
		background-position: left center;
		font-weight: normal;
	}

	/* 마킹 */
	.area-mark {
		margin-left: 0px;
		margin-right: 5px;
		padding: 2px 4px;
		background-color: #ff6666;
		background-repeat: no-repeat;
		background-position: left center;
		color: #ffffff;
		font-size: 100%;
	}

	.area-mark2 {
		margin-left: 5px;
		padding: 2px 4px;
		background-color: #f7f3c5;
		background-repeat: no-repeat;
		background-position: left center;
		color: #834202;
		font-size: 100%;
	}

	/* 주목 */
	.area-u {
		padding-bottom: 2px;
		border-bottom: 2px solid #99deff;
		text-decoration: none;
	}

	/* 탑바 */
	.area-topbar {
		margin: 0;
		padding: 1em;
		font-family: 돋움, dotum, 굴림, gulim;
		font-size: 11px;
		letter-spacing: -1px;
	}

	.area-topbar.orange {
		color: #834202;
		background: #f9c667;
		background: linear-gradient(to bottom, #f9c667 0%, #f79621 100%);
	 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9c667', endColorstr='#f79621', GradientType=0 );
	}

	/* 분리선 */
	.area-hr.shadow {
		display: block;
		height: 20px;
		border: 0;
		margin: 3em 0;
		padding: 0;
		background: url('img/hr-01.png') no-repeat center top;
		text-indent: -1000em;
	}



	/* 툴팁 기본 */

	.tooltip {
		position: relative;
		display: inline-block;
		cursor: pointer;
	}

	.tooltip .tooltiptext {
		visibility: hidden;
		width: max-content;
		background-color: #4c4c4c;
		color: #fff;
		text-align: center;
		border-radius: 6px;
		padding: 3px 8px;
		position: absolute;
		z-index: 2;
		bottom: 125%; /* 상단에 위치 */
		left: 50%;
		opacity: 0;
		transform: translateX(-50%);
		transition: opacity 0.3s;
		white-space: nowrap;
		font-size:12px;
	}

	.tooltip:hover .tooltiptext {
		visibility: visible;
		opacity: 1;
		color: #fff;
	}

	.tooltip .tooltiptext p {
		color: #fff;
		text-align:center;
		margin:4px 0px;
		font-size:12px;
		display: inline-block;
		padding:0px;
	}

	.tooltip .tooltip-msg {
		visibility: hidden;
		width: max-content;
		background-color: #333;
		color: #fff;
		text-align: center;
		border-radius: 6px;
		padding: 5px 8px;
		position: absolute;
		z-index: 2;
		opacity: 0;
		transition: opacity 0.3s;
		white-space: nowrap;
		font-size: 12px;
	}

	.tooltip:hover .tooltip-msg {
		visibility: visible;
		opacity: 1;
		color: #fff;
	}

	/* 왼쪽 툴팁 */
	.tooltip.tooltip-left .tooltip-msg {
		top: 50%;
		right: 100%;
		transform: translateY(-50%);
		margin-right: 6px;
	}

	/* 오른쪽 툴팁 */
	.tooltip.tooltip-right .tooltip-msg {
		top: 50%;
		left: 100%;
		transform: translateY(-50%);
		margin-left: 6px;
	}
	/* 위쪽 툴팁 */
	.tooltip.tooltip-top .tooltip-msg {
		bottom: 100%;
		left: 50%;
		transform: translateX(-50%);
		margin-bottom: 6px;
	}

	/* 아래쪽 툴팁 */
	.tooltip.tooltip-bottom .tooltip-msg {
		top: 100%;
		left: 50%;
		transform: translateX(-50%);
		margin-top: 6px;
	}


	/*탭메뉴*/
	.tabmenu{ width:100%;padding:0 0 0px 0px;}
	.tabmenu ul{  margin:0; padding-left:10px; list-style:none; border-bottom:1px solid #dbaf00; font-family:dotum, Sans-serif; font-size:13px;  *zoom:1;}
	.tabmenu ul:after{ content:""; display:block; clear:both;}
	.tabmenu li{ float:left; margin:0px 1px -1px 1px; }
	.tabmenu li a{ position:relative; float:left; text-decoration:none; border-top:1px solid #c0c0c0; border-right:1px solid #c0c0c0;border-left:1px solid #c0c0c0;background:#efefef; color:#666;}
	.tabmenu li a span{ display:inline-block; padding:6px 7px; letter-spacing:-1px; cursor:pointer;border-top:1px solid #fff;border-left:1px solid #fff; }
	.tabmenu li a:hover{background:#fff; color:#404960; border:1px solid #404960; }
	.tabmenu li ul{ display:none; width:100%; top:40px; left:0; list-style:none; border:0; margin:0; padding:0; white-space:nowrap; overflow:hidden; *zoom:1;}
	.tabmenu li ul:after{ content:""; display:block; clear:both;}
	.tabmenu li.selected a{ border:2px solid #dbaf00; padding:1px;border-bottom:0px solid #fff; margin-top:-3px; background-color:#fff; color:#000000;}
	.tabmenu li.selected a span{ display:inline-block;padding-top:7px; font-weight:bold;background-color:#fff; }
	.tabmenu li.selected a:hover{ border:2px solid #dbaf00; padding:1px;border-bottom:0px solid #fff; margin-top:-3px; background-color:#fff; color:#404960;}

	.area-paging { margin:35px 0 0 0; font-size:0; text-align:center;width:100%;}
	.area-paging a {display:inline-block; border-radius: 10px;width:20px; height:20px; margin: 0 3px; border:1px solid #e8e8e8; padding:10px 10px; font-size:16px !important; text-align:center; /*border-radius:50%;*/ transition:all 0.3s ease; vertical-align:top }
	.area-paging a.on {background-color:#006699; border-color:#006699; color:#fff; font-weight:500; }
	.area-paging a.on:hover{background-color:#006699; border-color:#006699; color:#fff; font-weight:500;}
	.area-paging a:hover {background-color:#fff; border-color:#fff; color:#000; font-weight:500}
	.area-paging a.contr {background-color:#fff; border:1px solid #e8e8e8; color:#555; display:inline-block;  vertical-align:top}
	.area-paging a.contr:hover {background-color:#002b58; border-color:#002b58; color:#fff}
	.area-paging a.bt_f { background:url(/mgr/images/icon/ic-frist.png) no-repeat center center #fff; text-indent:-5000px;}
	.area-paging a.bt_p { background:url(/mgr/images/icon/ic-prev.png) no-repeat center center #fff; text-indent:-5000px;}
	.area-paging a.bt_n { background:url(/mgr/images/icon/ic-next.png) no-repeat center center #fff; text-indent:-5000px;}
	.area-paging a.bt_l { background:url(/mgr/images/icon/ic-last.png) no-repeat center center #fff; text-indent:-5000px;}
	.area-paging a.bt_f:hover { background:url(/mgr/images/icon/ic-frist-on.png) no-repeat center center #444; }
	.area-paging a.bt_p:hover { background:url(/mgr/images/icon/ic-prev-on.png) no-repeat center center #444;}
	.area-paging a.bt_n:hover { background:url(/mgr/images/icon/ic-next-on.png) no-repeat center center #444; }
	.area-paging a.bt_l:hover { background:url(/mgr/images/icon/ic-last-on.png) no-repeat center center #444; }
	.i-opt  {height:38px; padding:10px 8px 8px 8px; font-size:13px; color:#333; border:#CCC 1px solid; }

	.popup-slide {
		display: none;
		position: fixed; /* ← fixed로 변경 */
		left: 0;
		top: 0;
		background: #121212;
		box-shadow: 0 4px 10px rgba(0,0,0,0.2);
		z-index: 1001;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		overflow: auto; /* 내용이 넘칠 경우 스크롤 가능 */
	}
	
	.popup {
		display: none;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #232e37;
		color: black;
		padding: 10px;
		border-radius: 10px;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
		z-index: 1000;
		box-sizing: border-box;
		width: 540px;
		max-width: 90vw;
		max-height: 90vh;
	}

	/*
	.popup {
		position: fixed;
		top: 0;
		right: -100%;
		width: 20%;
		height: 96%;
		background-color: #fff;
		box-shadow: -4px 0 10px rgba(0, 0, 0, 0.1);
		z-index: 1000;
		transition: right 0.3s ease;
		display: flex;
		flex-direction: column;
		padding: 20px;
		box-sizing: border-box;
		margin-right:10px;
		margin-top:10px;
		margin-bottom:10px;
	}

	.popup.active {
		right: 0;
	}
	*/
	.popup .popup-top {
	
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 5px 20px;
		margin-bottom: 0px;
		font-size: 16px;
		font-weight: 600;
		border-bottom:solid 1px #474747;
	
	}
	.popup .data-title {
		padding-left:5px; 
		font-size:18px; 
		margin-top:0px;
	}
	.popup span.close-popup {
		float:right;
		padding-right:5px; 
		margin-top:-5px;
		cursor:pointer;
	}
	.popup span.close-popup i {
		font-size:24px;
	}
	/*
	.popup .data-content {
		max-height:80vh;
		padding:10px 10px;
		box-sizing:border-box;
	}
	*/
	.popup #load-data-content {
		max-height:80vh;
		padding:10px 10px;
		box-sizing:border-box;
	}
	.popup .data-content ul.pop-up {}
	.popup .data-content ul.pop-up li {font-size:14px;}

	/* ② 스크롤바 꾸미기(선택 사항) */
	#load-data-content::-webkit-scrollbar{ width:4px; }
	#load-data-content::-webkit-scrollbar-thumb{ background:#0080c0; border-radius:3px; }
	#load-data-content::-webkit-scrollbar-track{ background:#eee; }

	.popup-overlay {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		z-index: 81;
	}
	.popup-overlay-none {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		z-index: 81;
		cursor : no-drop;
	}

	.sentence-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 18px 10px;
		font-size: 18px;
		font-weight: 400;
	}


	@media screen and (max-width: 640px) {

		/* 팝업 콘텐츠 박스 */
		.popup {
			width: 90vw;       /* 화면 너비의 90% */
			max-height: 90vh;  /* 화면 높이의 90% */
		}
		.popup .data-title {font-size:16px;}
		
		.popup .data-content {
			padding:10px 0px;
		}
	}

	/* 슬라이드 레이어창 */
	.side-panel {
		position: fixed;
		top: 0;
		right: -100%;
		width: 500px;
		height: 100%;
		background-color: #212121;
		box-shadow: -4px 0 10px rgba(0, 0, 0, 0.1);
		z-index: 1000;
		transition: right 0.3s ease;
		display: flex;
		flex-direction: column;
		padding: 10px;
		box-sizing: border-box;
		/*
		margin-right:10px;
		margin-top:10px;
		margin-bottom:10px;
		*/
	}

	.side-panel.active {
		right: 0;
	}

	.sideTitle {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 6px 10px;
		border-bottom: 1px solid #29343c;
	}

	.sideTitle h2 {
		margin: 0;
		font-size: 1.2rem;
		color:#fff;
	}

	.close-btn {
		background: none;
		border: none;
		font-size: 1.5rem;
		cursor: pointer;
		color: #ebebeb;
		padding:4px 10px;
		border-radius: 50%;
	}

	.close-btn:hover {
		background: #eee;
		color: #333;
	}

	.panel-content {
		flex: 1;
		overflow-y: auto;
		padding: 10px;
	}

	@media (max-width: 768px) {
		.side-panel {
			width: 80%; /* 모바일에서는 전체의 80% */
		}
	}


	/*서브 패널*/
	
	.sub-side-panel {
		position: fixed;
		top: 0;
		right: 0;
		width: 500px;
		height: 100%;
		background-color: #232e37;
		box-shadow: -4px 0 10px rgba(0, 0, 0, 0.1);
		z-index: 1000;
		transition: right 0.3s ease;
		display: none;
		flex-direction: column;
		padding: 10px;
		box-sizing: border-box;
		border-right:solid 0.5 #626262;
	}

	.sub-side-panel.active {
		display: flex;
		right: 500px;
	}
	

	.sub-sideTitle {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 6px 10px;
		border-bottom: 1px solid #29343c;
	}

	.sub-sideTitle h2 {
		margin: 0;
		font-size: 1.2rem;
		color:#fff;
	}

	.sub-close-btn {
		background: none;
		border: none;
		font-size: 1.5rem;
		cursor: pointer;
		color: #ebebeb;
		padding:4px 10px;
		border-radius: 50%;
	}

	.sub-close-btn:hover {
		background: #eee;
		color: #333;
	}

	.sub-panel-content {
		flex: 1;
		overflow-y: auto;
		padding: 10px;
	}

	@media (max-width: 900px) {
		.sub-side-panel {
			width: 100%;
		}
	
		.sub-side-panel.active {
			display: flex;
			right: 0px;
		}
	}
	@media (max-width: 768px) {
		.sub-side-panel {
			width: 90%; /* 모바일에서는 전체의 80% */
		}
	}
	


	.training-side-panel {
		position: fixed;
		top: 0;
		right: -100%;
		max-width: 500px;
		height: 100%;
		background-color: #212121;
		box-shadow: -4px 0 10px rgba(0, 0, 0, 0.1);
		z-index: 1000;
		transition: right 0.3s ease;
		display: flex;
		flex-direction: column;
		padding: 10px;
		box-sizing: border-box;
		color: #d4d4d4;
		/*
		margin-right:10px;
		margin-top:10px;
		margin-bottom:10px;
		*/
	}

	.training-side-panel.active {
		right: 0;
	}

	.training-sideTitle {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 6px 10px;
		border-bottom: 1px solid #474747;
	}

	.training-sideTitle h2 {
		margin: 0;
		font-size: 1.2rem;
		color:#fff;
	}

	.training-sideTitle .auth-links {
		margin-left: auto;
		display: flex;
		align-items: center;
		gap: 6px; /* 버튼 사이 간격 */
	}

	.side-panel-menu-button {
		background: none;
		border: none;
		font-size: 1.5rem;
		cursor: pointer;
		color: #d4d4d4;
		padding:6px 16px;
		border-radius: 50%;
	}
	.side-panel-menu-button:hover {
		background: #eee;
		color: #333;
	}

	.training-close-btn {
		background: none;
		border: none;
		font-size: 1.5rem;
		cursor: pointer;
		color: #d4d4d4;
		padding:4px 11px;
		border-radius: 50%;
	}

	.training-close-btn:hover {
		background: #eee;
		color: #333;
	}

	.training-panel-content {
		flex: 1;
		overflow-y: auto;
		padding: 0px;
		/*padding:10px;*/
	}

	@media (max-width: 768px) {
		.training-side-panel {
			width: 80vw;
		}
	}
	/*
	.side-panel-menu {
		display: none;
		position: fixed;
		background: white;
		color: black;
		padding: 20px;
		border-radius: 10px;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
		z-index: 999;
	}
	*/
	.side-panel-menu {
		display: none;
		position: fixed;
		top: 50px;
		right: 20px;
		min-width: 140px;
		background: #383838;
		color: black;
		padding: 10px 2px;
		border-radius: 5px;
		z-index: 9999;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
		visibility: visible;
		opacity: 1;
	}
	.side-panel-menu-info {padding:5px 2px;}
	.side-panel-menu-info ul li {padding:0px 0px;}
	.side-panel-menu-info ul li b {font-size:16px;font-weight:600;}
	.side-panel-menu-info ul li a {
		display: block;
		padding: 12px 14px;
		color: #ebebeb;
		text-decoration: none;
		font-size: 14px;
		border-radius: 5px;
		text-align:left;
	}
	.side-panel-menu-info ul li a:hover {
		background: #5e5e5e;
	}





	.form-title {width:100%; font-size:18px; font-weight:700;padding:10px 0px 20px;}
	.content-form {
		width:100%;
		padding:0px 10px;
		box-sizing: border-box;
		padding-top:20px;
	}
	.content-form ul {		
		display: flex;
		align-items: center; /* 세로 정렬 맞춤 */
		padding-bottom: 10px;
		margin-bottom: 10px;
		/*border-bottom:solid 0.5px #474747;*/
	}
	.content-form ul li {

		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 16px;
		position: relative;
	}
	.content-form ul li input {
		background:#29343c;
		border: solid 0.5px #29343c;
		color: #ebebeb;
	}
	.content-form ul li select {
		background:#29343c;
		border: solid 0.5px #29343c;
		color: #ebebeb;
	}
	.content-form ul li .form-label {
		width: 100%;
		max-width: 100px;
		font-weight: bold;
		font-size: 14px;
		display: inline-block;
		/*height:30px;*/
	}
	.content-form ul li .form-label i {
		color: #bebebe;
	}

	.content-form ul li .label {
		width: 100%;
		max-width: 80px;
		font-weight: bold;
		font-size: 14px;
		display: inline-block;
	}

	.content-form ul li .w100per {
		width: 100%;
	}

	/* 라디오/체크박스 라벨 */
	.content-form ul li .inline-label {
		font-weight: normal;
		font-size: 14px;
		margin-right: 10px;
		display: inline-flex;
		align-items: center;
		gap: 5px;
	}


	.content-form ul li {
		flex: 1;
		font-size:13px;
	}
	.content-form ul li strong {
		font-size:15px;
	}
	.content-form ul li a {
		margin:5px;
	}

	.form-button {display:block;padding:10px;}
	/*
	.form-button {display:block;margin-top:10px; }
	.form-button ul li {
		display: block;
		margin: 10px 0px;
		text-align: center;
	}
	.form-button ul li.center {
		text-align: center;
	}
	*/

	a.btn-user-black {
		display: block;
		width: 100%;
		/*
		background: linear-gradient(to right, #111, #333); 
		*/
		background: #2a80f4; 
		color: #fff;
		font-weight: 600;
		font-size: 16px;
		letter-spacing: 0.5px;
		padding: 16px;
		border-radius: 12px;
		text-align: center;
		transition: background 0.3s ease, transform 0.2s ease;
		box-shadow: 0 4px 10px rgba(0,0,0,0.15);
		border: none; /* 테두리 제거 */
		box-sizing: border-box;
	}

	a.btn-user-black:hover {
		/*
		background: linear-gradient(to right, #222, #444);
		*/
		background: #104bd8; 
		/*transform: translateY(-2px);*/ /* 살짝 띄우기 */
		box-shadow: 0 6px 14px rgba(0,0,0,0.25);
	}
	.help-url-content {
		margin-top:10px;
		margin-bottom:10px;
		background: #3f3f3f;
		color: #ebebeb;
		padding: 10px 14px;
		border-radius: 8px;
		box-shadow: 0 1px 4px rgba(0,0,0,0.05);
		font-size:14px;
		box-sizing: border-box;
	}
	.help-url-content a {
		color:#fff;
		font-size:14px;
		padding:0;
		margin:0;
	}
	.help-url-content div {
		line-height:18px;
		font-size:13px;
	}
	.help-ai-content {
		margin-top:10px;
		margin-bottom:10px;
		background: #29343c;
		color: #ebebeb;
		padding: 10px 14px;
		border-radius: 8px;
		box-shadow: 0 1px 4px rgba(0,0,0,0.05);
		box-sizing: border-box;
	}
	.help-ai-content p {
		line-height:24px;
	}
	.help-ai-content p span.script-chk {
		padding:4px 8px;
		border:solid 1px #adadad;
		border-radius: 10px;
		color:#0099ff;
		margin-right:2px;
		font-weight:600;
	}
	.help-quiz-content {
		margin-top:10px;
		margin-bottom:10px;
		background: #29343c;
		color: #ebebeb;
		padding: 10px 14px;
		border-radius: 8px;
		box-shadow: 0 1px 4px rgba(0,0,0,0.05);
	}
	.help-quiz-content p {
		line-height:24px;
	}

	@media all and (max-width: 600px) {
		.content-form ul {
			border-bottom: solid 0px #fff;
		}

		.content-form ul li {
			flex-direction: column;
			align-items: flex-start;
		}
		.content-form ul li .form-label {
			width: 100%;
			margin-bottom: 4px;
		}
		.content-form ul li .w100per {
			width: 100%;
		}


		.input {width:100%;}
		#zipcode {width:160px;}
		.select {width:100%;}
		/*
		.form-button ul {margin-top:50px;}
		.form-button ul li {
			width:100%;
			margin-top:10px; 
			box-sizing: border-box;
		}
		*/

		a.btn-user-black {width:100%;}
		a.btn-user-yellow {width:100% !important;}

	}



	.alert-overlay {
		position: fixed;
		top: 0; left: 0;
		width: 100vw; height: 100vh;
		background: rgba(0,0,0,0.4);
		z-index: 9999;
		display: flex;
		align-items: center;
		justify-content: center;
		display: none;
	}

	.alert-box {
		background: #4b4b4b;
		padding: 24px;
		border-radius: 10px;
		max-width: 90%;
		box-shadow: 0 6px 18px rgba(0,0,0,0.1);
		text-align: center;
	}

	.alert-box p {
		font-size: 14px;
		color:#ebebeb;
		margin-bottom: 20px;
	}

	.alert-box button {
		background: #1976d2;
		color: white;
		border: none;
		padding: 10px 20px;
		font-size: 14px;
		border-radius: 6px;
		cursor: pointer;
	}

	/*부모 페이지의 스크롤을 막는 */
	body.modal-open {
		overflow: hidden;
		height: 100vh; /* iOS 대응 */
		touch-action: none; /* 터치 스크롤 방지 */
	}