@charset "utf-8";
/* User: PL Kim */

html, body { height: 100%; min-width: var(--contents-min-width); color: #222; background: var(--body-bg); }

.contents-wrap { width: 100%; max-width: var(--contents-max-width); margin: 0 auto; padding: var(--padding); text-align: center; }

.container-fluid { min-width: var(--contents-min-width); }
.container-fluid .contents-wrap { padding: 0; }

.box-wrap		{ width: 100%; margin: 0 auto; margin-bottom: var(--margin); padding: var(--padding); background: var(--box-bg); border: /*var(--border--box)*/; box-shadow: /*var(--box-shadow)*/; }
.box-wrap--half	{ width: 49%; margin: 0 auto; }

/********************/
/* modal            */
/********************/
.overlay		{ opacity: 0; visibility: hidden; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 99999; background: rgba(0, 0, 0, 0.5); transition: opacity 0; }
.overlay:target { opacity: 1; visibility: visible; }
.overlay .modal { display: block; position: relative; width: 80%; margin: var(--footer-height) auto 0; padding: var(--padding); background: var(--popup-bg); border-radius: var(--border-radius); box-shadow: var(--box-shadow); transition: all 5s ease-in-out; }

/********************/
/* popup            */
/********************/
.popup { overflow: hidden; padding-top: 0!important; }
.popup .contents-wrap { padding: 0;}
.popup .contents-wrap h1 { margin: 0; padding: var(--padding); text-align: left; color: #00fe33; background: #000; border-bottom: 8px solid #666; }
.popup .contents-wrap h1 img { width: 40px; margin-right: var(--margin); }
.popup .contents-wrap p	{ margin: 0 auto; padding: 0 var(--padding); }

/********************/
/* mobile           */
/********************/
.none { display: none; }
.web--only { display: block; }
.web--none { display: none; }
.mobile--only { display: none; }
.tablet--only { display: none; }

@media screen and (max-width: 992px){
	.web--only { display: none; }
	.web--none { display: none; }
	.tablet--only { display: block; }
	.tablet--none { display: none; }
}

@media screen and (max-width: 480px){
	.tablet--only { display: none; }
	.mobile--none { display: none; }
	.mobile--only { display: block; }
}

/********************/
/* input, select    */
/********************/
input	{ width: calc(100% - 16px); height: var(--form-height); padding-left: var(--padding-text); }
select	{ width: calc(100% - 10px); height: var(--form-height); padding: 1px 0; }
textarea{ width: calc(100% - 10px); }

input, select, textarea { color: var(--form-color); border: var(--border--form); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }

input[type=password] { font-family: sans-serif; }
input[type=radio], input[type=checkbox] { width: 16px; margin: 0 var(--margin-text); }
input.file { display: inline-block; width: -webkit-calc(96% - 9em); width: -moz-calc(96% - 9em); width: -ms-calc(96% - 9em); width: -o-calc(96% - 9em); width: calc(96% - 9em); outline: none; }

input.info, 
select.info, 
textarea.info { 
	background: var(--input-bg--info); outline: none; border: var(--border--none); 
}

input.readonly, 
select.readonly, 
textarea.readonly,
input:disabled, 
select:disabled, 
textarea:disabled { 
	background: var(--input-bg--readonly); outline: none;
}

@media screen and (max-width: 480px){
	input:not(radio, checkbox)	{ width: calc(100% - 24px); }
	select						{ width: calc(100% - 18px); }
}

/********************/
/* button           */
/********************/
.cursor--pointer	{ cursor: pointer!important; }

/* button area */
.btn-wrap				{ margin-top: var(--margin); }
.btn-wrap--right		{ margin-top: var(--margin); text-align: right; }
.btn-wrap--center		{ margin-top: var(--margin); text-align: center; }
.pagination .btn-wrap	{ position: absolute; top: -4px; right: 0px; margin-top: 0; }

/* button */
.btn				{ display: inline-block; margin-left: var(--margin-text); border: var(--btn-border); border-radius: var(--btn-radius); text-shadow: var(--text-shadow); box-shadow: var(--btn-shadow); moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; }
.btn-square			{ display: inline-block; margin-left: var(--margin-text); border: var(--btn-border); border-radius: var(--btn-square-radius); text-shadow: var(--text-shadow); box-shadow: var(--btn-shadow); moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; }
.btn:hover			{ box-shadow: var(--btn-shadow--active); }

.btn-xs				{ padding: 0px 8px; font-size: 0.9em; line-height: 24px; }
.btn-sm				{ padding: 0px 16px; font-size: 1em; line-height: 26px; }
.btn-md				{ padding: 0px 20px; font-size: 1em; line-height: 30px; }
.btn-xl				{ padding: 0px 40px; font-size: 1.08em; line-height: 50px; }
.btn-xxl			{ width: 80%; margin: 0 auto; font-size: 1.08em; line-height: 40px; }

.btn-store 			{ color: var(--store-color); background: var(--store-bg); }
.btn-store:hover 	{ color: var(--store-color--hover); background: var(--store-bg--hover); }

.btn-login 			{ color: var(--login-color); background: var(--login-bg); }
.btn-login:hover 	{ color: var(--login-color); background: var(--login-bg--hover); }

.btn-search 		{ color: var(--search-color); background: var(--search-bg); }
.btn-search:hover 	{ color: var(--search-color); background: var(--search-bg--hover); }

.btn-regist 		{ color: var(--regist-color); background: var(--regist-bg); }
.btn-regist:hover 	{ color: var(--regist-color); background: var(--regist-bg--hover); }

.btn-delete 		{ color: var(--delete-color); background: var(--delete-bg); }
.btn-delete:hover 	{ color: var(--delete-color); background: var(--delete-bg--hover); }

.btn-list 			{ color: var(--list-color); background: var(--list-bg); }
.btn-list:hover 	{ color: var(--list-color); background: var(--list-bg--hover); }

.btn-file			{ color: var(--file-color); background: var(--file-bg); }
.btn-file:hover		{ color: var(--file-color--hover); background: var(--file-bg--hover); }

.btn-juso			{ color: var(--juso-color); background: var(--juso-bg); }
.btn-juso:hover		{ color: var(--juso-color--hover); background: var(--juso-bg--hover); }

.btn-print 			{ color: var(--print-color); background: var(--print-bg); }
.btn-print:hover 	{ color: var(--print-color); background: var(--print-bg--hover); }

/********************/
/* border           */
/********************/
.border--none		{ border-left: 0!important; border-right: 0!important; }
.border-left--none	{ border-left: 0!important; }
.border-right--none	{ border-right: 0!important; }

/************************/
/* list                 */
/************************/
ul.basic-list { margin: 0 auto; padding: 0 0 var(--padding) 0; text-align: left; -webkit-transition: all 0.5s; transition: all 0.5s; }
ul.basic-list li { padding-bottom: var(--padding); font-size: var(--font-size--md); word-break: break-all; -webkit-transition: all 0.5s; transition: all 0.5s; }
ul.basic-list li:last-child { padding-bottom: 0; }
ul.basic-list li.title { font-size: var(--font-size--lg); font-weight: bold; }
ul.basic-list li span { margin-right: var(--margin-text); }

ul.bullet-list li::before { content: ''; display: inline-block; z-index: 9; width: 4px; height: 4px; margin-right: 4px; background: #000; border-radius: 50%; }
ul.bullet-list li.title::before { display: none; }

/********************/
/* table            */
/********************/
table { width: 100%; margin: 0 auto; border-top: var(--border--table-top); }
table th, table td { padding: var(--padding) var(--padding-text); border-bottom: var(--border--table); }
table th { text-align: right; background: var(--th-bg); }
table td { text-align: left; background: var(--td-bg); word-break: break-all; }
table td div { display: table; width: 100%; table-layout: fixed; }
table td div span { display: table-cell; }
table td input, table td select { margin: var(--margin-text) 0; }

/* list */
.list-table th { text-align: center; max-width: none!important; }
.list-table td { text-align: center; }

/* search */
.search-table { border-top: none; }
.search-table th, .search-table td { padding: var(--padding-text); border-bottom: none; }
.search-table th { padding-right: var(--padding-text); text-align: right; background: var(--td-bg); }
.search-result { position: relative; top: -8px; font-size: var(--font-size--sm); text-align: right; }

.box-wrap.search-box .row > div { padding: var(--padding) 4px; font-size: 16px; }
.box-wrap.search-box .row > div .btn { margin: 0; }
.box-wrap.search-box .row > div > div { display: table; width: 100%; table-layout: fixed; }
.box-wrap.search-box .row > div > div > span { display: table-cell; }

@media screen and (max-width: 768px){
	table th { min-width: 80px; }
	
	.list-table th { min-width: 0!important; }
	
	.box-wrap.search-box .row > div { padding: var(--padding); }
	.box-wrap.search-box .row > div .btn { float: right; }
	.box-wrap.search-box .row .col-sm-1 { text-align: right; }
}

/********************/
/* pagination       */
/********************/
.pagination { display: block; min-height: 20px; margin-top: var(--margin); }
.pagination a, .pagination strong { z-index: 2; margin: 0 var(--margin-text); color: var(--pagination-color); }
.pagination a:hover, .pagination a:active, .pagination a:focus, .pagination strong { color: var(--pagination-point-color); }
.pagination .direction { z-index: 1; color: var(--pagination-color); }
.pagination .direction:hover, .pagination .direction:active, .pagination .direction:focus { color: var(--pagination-point-color); }
/*
.pagination .direction span { width: 0; height: 0; line-height: 0; font-size: 0; vertical-align: middle; }
.pagination .prev span { margin-right: var(--margin-text); border: 3px solid; border-top: solid #fff; border-bottom: solid #fff; border-left: 0; }
.pagination .next span { margin-left: var(--margin-text); border: 3px solid; border-top: solid #fff; border-bottom: solid #fff; border-right: 0; }
 */
/********************/
/* go top           */
/********************/
.gotop				{ display: none; position: fixed; bottom: 12px; right: var(--margin); z-index: 9999; }
.gotop img			{ opacity: 0.6; }
.gotop:hover img	{ opacity: 1; }

/********************/
/* print            */
/********************/
#print { width: 100%; height: 100%; overflow: auto; background: var(--warranty-bg); }
#print .contents-wrap { display: flex; flex-flow: wrap; align-items: center; align-content: space-between; height: 100%; }

#print h4			{ width: 100%; margin-top: var(--margin); }
#print .logo		{ width: 140px; margin-top: var(--margin); }
#print .exception	{ width: 100%; margin: var(--margin) auto; }

#print .box-wrap			{ max-width: 620px; margin: 0 auto; border: none; background: none; box-shadow: none; }
#print .box-wrap table		{ border-top: none; font-size: 12px; }
#print .box-wrap table th	{ padding: 8px; text-align: center; background: #e8f9e5; border: var(--border--table); letter-spacing: 8px; }
#print .box-wrap table td	{ padding: 8px; text-align: center; background: var(--darkmode-bg); border: var(--border--table); }

#print .container			{ max-width: 620px; margin: 0 auto; padding: 0; width: 100%; }
#print .container .row		{ width: 100%; margin: 0; background: var(--darkmode-bg); border-radius: var(--border-radius); }
#print .container .row h6	{ margin: 0; margin-top: 8px; font-size: 10px; text-align: left; }
#print .container .row ul			{ text-align: left; }
#print .container .row ul li		{ font-size: 9px; }
#print .container .row ul li span	{ font-size: 9px; padding-right: 4px; }
#print .container .row table 		{ border-top: none; }
#print .container .row table th,
#print .container .row table td		{ font-size: 9px; padding: 0px; background: none; border: none; }
#print .container .row table th		{ min-width: 55px; font-weight: normal; text-align: center; }
#print .container .row table td img	{ width: 40px; }

@media print {
	@page		{ margin: 0; padding: 0; }
	html, body	{ margin: 0; padding: 0; }
	table		{ page-break-inside: auto; }
	tr			{ page-break-inside: avoid; page-break-after: auto; }
	thead		{ display: table-header-group; }
	tfoot		{ display: table-footer-group; }
	th, td, img { -webkit-print-color-adjust: exact; }
	
	#print { background: var(--warranty-bg)!important; -webkit-print-color-adjust: exact; }
	
	#print h4			{ font-size: 24px; }
	#print .logo		{ width: 200px; }
	#print .exception	{ display: none; }
	
	#print .box-wrap			{ width: 84%; margin: 0 8%; }
	#print .box-wrap table th	{ padding: 12px 8px; background: #e8f9e5!important; border: var(--border--print); }
	#print .box-wrap table td	{ padding: 12px 8px; background: var(--darkmode-bg)!important; border: var(--border--print); }
	
	#print .container .row			{ margin-bottom: 50px; background: var(--darkmode-bg)!important; -webkit-print-color-adjust: exact; }
	#print .container .row table td img	{ width: 60px; margin: 0px 8px; }
}

@media screen and (max-width: 480px){
	#print .box-wrap { padding: 0; }
	#print .box-wrap table th { min-width: auto; letter-spacing: 0; }
	#print .box-wrap table th, #print .box-wrap table:not(.noline-table) td { padding: 2px; overflow: hidden; text-overflow: ellipsis; word-break: break-all; white-space: nowrap; }
	
	#print .container { padding: 0; }
	#print .container .row table td img { width: 0px; }
}

/********************/
/* text             */
/********************/
/* check-box */
.check-icon:before { content: url(/images/icon/icon-check-box.png); vertical-align: middle; }

/* circle */
.square, .rectangle, .ellipse, .circle, circle-sm, circle-bg { text-align: center; vertical-align: middle; }

.square 	{ display: inline-block; width: 15px; height: 15px; }
.rectangle 	{ display: inline-block; padding: 1px 8px; border-radius: var(--border-radius); }
.ellipse	{ display: inline-block; padding: 6px 14px; border-radius: 20px; }

.circle 	{ display: inline-block; border-radius: 50%; }
.circle-sm 	{ width: 12px; height: 12px; }
.circle-md 	{ width: 15px; height: 15px; }
.circle-bg 	{ width: 30px; height: 30px; }

.bg-point 	{ color: #222222; background: var(--point-color); }
.bg-red 	{ color: #ffffff; background: #db3434; }
.bg-orange 	{ color: #ffffff; background: #ff5f2e; }
.bg-yellow 	{ color: #ffffff; background: #ffb400; }
.bg-green 	{ color: #ffffff; background: #04A060; }
.bg-blue 	{ color: #ffffff; background: #0360AD; }
.bg-skyblue { color: #ffffff; background: #178de6; }
.bg-gray 	{ color: #ffffff; background: #686868; }
.bg-black 	{ color: #ffffff; background: #000000; }
.bg-white 	{ color: #222222; background: #ffffff; border: var(--btn-border--line); }

/* text */
h1, h2, h3, h4, h5, h6 { margin: var(--margin) auto; font-weight: bold; line-height: inherit; }
a, a:link, a:visited, a:hover, a:active, a:focus { /* color: var(--link-color); */ text-decoration: none; }

.text-left	{ text-align: left!important; padding-left: var(--padding-text); }
.text-right	{ text-align: right!important; padding-right: var(--padding-text); }

.text-point				{ color: var(--point-color); }
.text-required			{ margin-right: 2px; color: var(--required-color); }
.text-caution			{ margin: var(--margin) auto; color: var(--caution-color); }
.text-caution--yellow	{ margin: var(--margin) auto; color: var(--caution-color--yellow); }

/* overflow */
.overflow 		{ display: flex; flex: 1; }
.overflow-box 	{ flex: 1; width: 1px; }
.overflow-text	{ overflow: hidden; text-overflow: ellipsis; word-break: break-all; white-space: nowrap; }

/* shadow-3d */
.shadow-3d {
	text-shadow: 0 1px 0 hsl(174,5%,80%), 0 2px 0 hsl(174,5%,75%), 0 3px 0 hsl(174,5%,70%), 0 4px 0 hsl(174,5%,66%), 0 5px 0 hsl(174,5%,64%), 0 6px 0 hsl(174,5%,62%), 0 7px 0 hsl(174,5%,61%), 0 8px 0 hsl(174,5%,60%),
				0 0 5px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.2), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.2), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.3);
}

/* gradient */
.gradient--green{ background: linear-gradient(to right, #30CFD0 0%, #00fe33 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* neon */
.neon--green	{ -webkit-animation: glow 1.5s ease-in-out infinite alternate; -moz-animation: glow 1.5s ease-in-out infinite alternate; animation: glow 1.5s ease-in-out infinite alternate; }

/* flux */
.flux--blue		{ color: #426DFB; animation: flux 2s linear infinite; -moz-animation: flux 2s linear infinite; -webkit-animation: flux 2s linear infinite; -o-animation: flux 2s linear infinite; }

/* glow */
.glow--blue		{ animation: glow-blue 1.5s ease-in-out infinite alternate; }
.glow--yellow	{ animation: glow-green 1.5s ease-in-out infinite alternate; }

@-webkit-keyframes glow {
	from {
		color: #fff;
		text-shadow: 0 0 10px #00fe33, 0 0 10px #00fe33, 0 0 20px #00fe33, 0 0 30px #00fe33, 0 0 40px #00fe33, 0 0 50px #00fe33, 0 0 60px #00fe33;
	} to {
		color: #ddd;
		text-shadow: 0 0 20px #00fe33, 0 0 30px #00fe33, 0 0 40px #00fe33, 0 0 50px #00fe33, 0 0 60px #00fe33, 0 0 70px #00fe33, 0 1 80px #00fe33;
	}
}
@keyframes glow-blue {
	from {
		text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228dff, 0 0 70px #228dff, 0 0 80px #228dff, 0 0 100px #228dff, 0 0 150px #228dff;
	} to {
		text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228dff, 0 0 35px #228dff, 0 0 40px #228dff, 0 0 50px #228dff, 0 0 75px #228dff;
	}
}
@keyframes glow-green {
	from {
		text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #b6ff00, 0 0 70px #b6ff00, 0 0 80px #b6ff00, 0 0 100px #b6ff00, 0 0 150px #b6ff00;
	} to {
		text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #b6ff00, 0 0 35px #b6ff00, 0 0 40px #b6ff00, 0 0 50px #b6ff00, 0 0 75px #b6ff00;
	}
}

@keyframes flux {
	0%, 100% {
		color: #28D7FE; text-shadow: 0 0 0.1vw #1041FF, 0 0 0.3vw #1041FF, 0 0 1vw #1041FF, 0 0 1vw #1041FF, 0 0 0.04vw #8BFDFE, 0.05vw 0.05vw 0.01vw #147280;
	} 50% {
		color: #146C80; text-shadow: 0 0 0.05vw #082180, 0 0 0.15vw #082180, 0 0 0.5vw #082180, 0 0 0.5vw #082180, 0 0 0.02vw #082180, 0.05vw 0.05vw 0.01vw #0A3940;
	}
}