@font-face {
	font-family: 'icon';
	src: url('/tint/icon/font/icon.eot?46151566');
	src: url('/tint/icon/font/icon.eot?46151566#iefix') format('embedded-opentype'),
		 url('/tint/icon/font/icon.woff?46151566') format('woff'),
		 url('/tint/icon/font/icon.ttf?46151566') format('truetype'),
		 url('/tint/icon/font/icon.svg?46151566#icon') format('svg');
	font-weight: normal;
	font-style: normal;

}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */


/* Common Color */
@color_link					: #00AAD2;
@color_line					: #00AAD2;

/* Body */
@color_body_bg				: #F6F3F2;
@color_body_font			: #000000;


/* Color */
@color_11					: #E63312;
@color_12					: #A36B4F;
@color_13					: #E4DCD3;
@color_14					: #F6F3F2;
@color_15					: #002C5F;
@color_16					: #00AAD2;
@color_17					: #AACAE6;

@color_21					: #000000;
@color_22					: #595959;
@color_23					: #999999;
@color_24					: #CCCCCC;
@color_25					: #EEEEEE;
@color_26					: #F3F3F3;
@color_27					: #FFFFFF;

@color_border				: #E9E2DB;


/* Screen Size */
/* @container_width_default			: 360px; */
@screen_mobile_max					: 850px;
@container_width_default			: 100%;
@container_width_min			: 320px;
@container_width_max			: 800px;

@container_padding			: 16px 16px;
/* @content_width				: 328px; */
@content_width				: 100%;
@content_padding			: 16px 20px;

@height_header				: 106px;
@height_footer				: 150px;
@height_content_out			: 206px;


@font_google				: "Noto Sans KR";
@font_icon_grtech			: "icon";


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */


.transition(@transition) {
	-webkit-transition: @transition;
	-moz-transition: @transition;
	-o-transition: @transition;
	transition: @transition;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
html,body {
	width: 100%;
	height: 100%;
	margin:0;
	padding:0;
	text-align: -webkit-center;

	&.scroll-lock {
		overflow: hidden;
	}
}

body {
	background: @color_22;
	color: @color_body_font;
	font-size: 13px;
	line-height: 1.4285em;
	font-family: @font_google, sans-serif;
	font-weight: 400;

	::-webkit-scrollbar {
		-webkit-appearance: none;
		width: 10px;
		height: 10px;

	}

	&.is-mobile ::-webkit-scrollbar {
		-webkit-appearance:none;
		width:0px;
	}

	::-webkit-scrollbar-track {
		background: rgba(0,0,0,.1);
		border-radius: 0;
	}

	::-webkit-scrollbar-thumb {
		cursor: pointer;
		border-radius: 5px;
		background: rgba(0,0,0,.25);
		-webkit-transition: color .2s ease;
		transition: color .2s ease;
	}



}

* {
	font-family: @font_google, sans-serif;
}


p {
	margin: 0;

	&.blank {
		height: 8px;
		font-size: 1px;
		margin:0;
		padding:0;
		&::after{
			content:" ";
		}
	}
}

h1,h2,h3,h4,h5,h6 {
	margin: 0;
	padding: 0;
	margin-block-start: 0;
	margin-block-end: 0;
	margin-inline-start: 0;
	margin-inline-end: 0;
}

a {
	color: inherit;
	text-decoration: none;
	font-weight: 600;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* 1 */


h1 {
	font-size: 20px;
	font-weight: 300;
}

h2 {
	font-size: 18px;
	font-weight: 600;
	margin-top: 0px;
}

h3 {
	font-size: 16px;
	font-weight: 400;
	margin-top: 18px;
}

h4, .txt-1 {
	font-size: 14px;
	font-weight: 400;
	line-height: 21px;
	margin-top: 20px;

	&.regular {
		font-weight: 600;
	}

	&.svc-notice {
		font-size: 14px;
		font-weight: 600;
		color: @color_21;
	}
}



h5 {
	font-size: 14px;
	font-weight: 400;
	line-height: 21px;
	margin-top: 20px;
	color: @color_22;
}

h6 {
	font-size: 14px;
	font-weight: 400;
	margin-top: 16px;
	color: @color_22;
}

ol {
	margin: 16px 0 0 0;
    padding: 0 0 0 20px;

	li {
		margin-top: 1rem;
	}
}

.margin-zero {
	&-top {
		margin-top: 0!important;
	}
	&-bottom {
		margin-bottom: 0!important;
	}
}

.display-none {
    display: none;
}

.display-block {
	display: block!important;
}

.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }

.align--left { text-align: left !important; }
.align--center { text-align: center !important; }
.align--right { text-align: right !important; }

.margin-top-big { margin-top: 38px !important; }
.margin-top-mid { margin-top: 28px !important; }
.margin-top-sml { margin-top: 20px !important; }
.margin-top-tiny { margin-top: 16rem !important; }


.height {	/* height style */
	&-full { height: 100% !important; }
	&-huge { height: 30rem !important; }
	&-big { height: 15rem !important; }
	&-mid { height: 10rem !important; }
	&-sml { height: 4rem !important; }
	&-tiny { height: 3rem !important;  line-height: 3rem !important; }
}


.pointer {
	cursor: pointer;
	&:hover {
		color:@color_15;
	}
}

.box-image-main {
	/* width: 296px; */
/* 	height: 166px; */
	background: @color_24;
	text-align: center;

	&::before{
/* 		content: "image"; */
	}

	img {
		width: 100%;
		display: block;
	}
}


.box-image-sub {
	/* width: 296px; */
/* 	height: 166px; */
	background: @color_24;
	text-align: center;
	margin-top: 16px;

	&::before{
/* 		content: "image"; */
	}
	img {
		width: 100%;
		display: block;
	}
}

.box-information, p.info {
	font-size: 13px;
	font-weight: 500;
	line-height: 18px;
	color: @color_23;
	margin-left: 20px;

	&:before {
		font-family: @font_icon_grtech;
		content: '\e898';
		font-weight: 500;
		font-size: 14px;
		margin-left: -17px;
		padding-right: 4px;
		line-height: 18px;


	}

	p:first-child {
		display: inline-block;
		margin-left: -2px;
	}

	&.sub {
		font-weight: 400;

		&:before {
			font-family: @font_icon_grtech;
			content: '\e836';
			margin-left: -2px;
		}
	}
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.color-red { color: @color_11; }
.color-black { color: @color_21; }
.color-white { color: @color_27; }
.color-grey { color: @color_22; }
.color-blue { color: @color_15; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.site-container {
	position: relative;
	width: @container_width_default;
	max-width: @container_width_max;
	min-width: @container_width_min;

 	min-height:calc(~"100% - "@height_footer);
	min-height:-moz-calc(~"100% - "@height_footer);
	min-height:-webkit-calc(~"100% - "@height_footer);
	min-height:-o-calc(~"100% - "@height_footer);
	background: @color_body_bg;
	color: @color_body_font;
	text-align: left;
	padding-bottom: @height_footer;


	@media (min-width:@screen_mobile_max){
		-webkit-box-shadow: 2px 5px 9px 2px rgba(0,0,0,0.77);
		-moz-box-shadow: 2px 5px 9px 2px rgba(0,0,0,0.77);
		box-shadow: 2px 5px 9px 2px rgba(0,0,0,0.77);
	}

}

.site-header {
	position: fixed;
	display: block;
	width: @container_width_default;
	max-width: @container_width_max;
	min-width: @container_width_min;
	height: 105px;
	background-color: @color_27;
	z-index: 99;
	margin-bottom: 16px;
	border-bottom: 1px solid @color_border;

	.site-header-title {
		height: 55px;
		line-height: 55px;

		&.txt-toolbar {
			font-size: 18px;
			font-weight: 800;
			border-bottom: 1px solid #E4DCD3;
		}

		.site-logo {
			margin-left: 16px;
			display: inline-block;
			/* padding: 0 5px; */

			&:before {
				font-family: @font_icon_grtech;
				content: '\e811';
				font-weight: 400;
			}
		}
	}

	.site-title {
		padding-left: 10px;
	}
}


.site-content {
	z-index: 1;
	padding-top: @height_header;

 	min-height:calc(~"100% - "@height_content_out);
	min-height:-moz-calc(~"100% - "@height_content_out);
	min-height:-webkit-calc(~"100% - "@height_content_out);
	min-height:-o-calc(~"100% - "@height_content_out);

	.site-content-inner {
		padding: 0 16px 0 16px;

		.content-box {
			background-color: @color_27;
			padding: 20px 16px;
			margin-top: 16px;

			.box-info , .box-info-sub{
				display: none;
				-webkit-animation: fadeIn 1s;
				animation: fadeIn 1s;

				&:hover {

				}
			}
		}
	}

}


.site-footer {
	display: none;
	z-index: 1;
	position: absolute;
	bottom:0;
	width: @container_width_default;
	max-width: @container_width_max;
	min-width: @container_width_min;
	background-color: @color_22;

	.footer-content {
		padding: 20px 16px 25px 16px;
		font-size: 12px;
		letter-spacing: 0px;
		color: @color_24;
	}
}
body.login{
	.site-footer {
		display: block;
	}
}
body.content{
	.site-footer {
		display: none;
	}
}




.service-box {
	-webkit-animation: fadeIn 1s;
	animation: fadeIn 1s;
	margin-top: 0!important;
}


.menu-service {
	cursor: pointer;
	margin-right: 0px;
	color: @color_21;
	border-bottom: 2px solid @color_25;

	&:hover{
		font-weight: 400;
		color: @color_15;
		border-bottom: 2px solid @color_15;
	}
	&.active{
		font-weight: 400;
		color: @color_15;
		border-bottom: 2px solid @color_15;
	}
}





.menu-box {
	width: 100%;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-align: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
	-webkit-box-shadow: none;
	padding: 0;


	.item {
		cursor: pointer;
		position: relative;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-flex: 1;
		-ms-flex: 1 0 auto;
		flex: 1 0 auto;
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
		vertical-align: middle;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		margin: 0;
		background-color: @color_27;
		color: @color_23;
/* 		height: 48px;
		line-height: 48px; */
		font-weight: 400;
		font-size: 14px;
		text-decoration: none;
		border: 0;
		border-right: 1px solid #E4DCD3;
/* 		border-bottom: 1px solid @color_23;
		padding-bottom: 1px; */

		&:last-child {
			margin-right: 0;
			border-right: 0;
		}

		&:hover {
			background: @color_27;
			color: @color_15;
		}
		&.active {
			background: @color_27;
			color: @color_15;
/* 			border-bottom: 2px solid @color_15;
			padding-bottom: 0px; */
			font-weight: 600;
		}

	}
}

.box-signout {
	position: fixed;
	bottom: 0;
	display: block;
	width: @container_width_default;
	max-width: @container_width_max;
	min-width: @container_width_min;
	z-index: 99;
}

.menu-box-bottom-out {
	position: fixed;
	bottom: 0;
	display: block;
	width: @container_width_default;
	max-width: @container_width_max;
	min-width: @container_width_min;
	height: 61px;
	background-color: @color_27;
	z-index: 99;

	.menu-box-vkooldealer {
		width: 100%;
		display: -webkit-inline-box;
		display: -ms-inline-flexbox;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
		-webkit-box-align: stretch;
		-ms-flex-align: stretch;
		align-items: stretch;
		-webkit-box-shadow: none;


		.item-box {
			cursor: pointer;
			position: relative;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-flex: 1;
			-ms-flex: 1 0 auto;
			flex: 1 0 auto;
			-ms-flex-wrap: nowrap;
			flex-wrap: nowrap;
			-webkit-box-orient: horizontal;
			-webkit-box-direction: normal;
			-ms-flex-direction: row;
			flex-direction: row;
			vertical-align: middle;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			justify-content: center;
			margin: 0;
			background-color: @color_27;
			color: @color_23;


			font-weight: 400;
			font-size: 20px;
			text-decoration: none;
			border: 0;
/* 			padding-top: 2px; */

			&:last-child {
				margin-right: 0;
			}


			.items {
				flex-direction: column;
				line-height: 22px;
				text-align: center;
				width: 100%;

				.item {
					border-top: 1px solid @color_border;
					padding-top: 1px;
					display: block;


					&:hover {
						background: @color_27;
						color: @color_15;
					}

					&.active {
						background: @color_27;
						color: @color_15;
						border-top: 2px solid @color_15;
						padding-top: 0px;

						&.mymenu01{
							&:before {
							}
						}
						&.mymenu02{
							&:before {
							}
						}
						&.mymenu03{
							&:before {
							}
						}
						&.mymenu04{
							&:before {

							}
						}
						&.mymenu05{

						}
					}


					&:before {
						font-family: @font_icon_grtech;
						content: '\e846';
						font-size: 24px;
						display: block;
						padding-top: 10px;
						font-weight: 300;
					}
					&:after {
						font-size: 10px;
						display: block;
						font-weight: 400;
						margin-top: -1px;
					}


					&.mymenu01{
						&:before {
							content: '\e85f';
						}
						&:after {
							content: 'Home';
						}
						&:hover{
							color:@color_15;
						}
					}
					&.mymenu02{
						&:before {
							content: '\e81c';
						}
						&:after {
							content: 'Service';
						}
						&:hover{
							color:@color_15;
						}
					}
					&.mymenu03{
						&:before {
							content: '\f290';
						}
						&:after {
							content: 'Order';
						}
						&:hover{
							color:@color_15;
						}
					}
					&.mymenu04{
						&:before {
							content: '\e849';
						}
						&:after {
							content: 'MyPage';
						}
						&:hover{
							color:@color_15;
						}
					}
					&.mymenu05{
						&:before {

							content: '\e821';
						}
						&:after {
							content: 'Logout';
						}
						&:hover{
							color:@color_15;
						}
					}

				}
			}



		}
	}
}





.location-box {
	width: 100%;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-align: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
	margin:0;
	-webkit-box-shadow: none;

	.item {
		position: relative;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-flex: 1;
		-ms-flex: 1 0 auto;
		flex: 1 0 auto;
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
		vertical-align: middle;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		margin: 0;
		background-color: @color_27;
		color: @color_23;
		height: 48px;
		line-height: 48px;
		font-weight: 400;
		font-size: 14px;
		text-decoration: none;
		border: 0;
		border-bottom: 2px solid @color_27;
		padding-bottom: 1px;
		width: 50%;

		&.active {
			background: @color_27;
			color: @color_15;
			border-bottom: 2px solid @color_15;
			padding-bottom: 0px;
			font-weight: 600;

		}

	}

}




/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.toggle-service-info {
	cursor: pointer;
	&:after {
		float: right;
		font-family: @font_icon_grtech;
		content: '\e832';
		float: right;
		font-size: larger;
		font-weight: 400;
	}

	&.active{
		font-weight: 400;
		&:after {
			content: "\e833";
			font-size: larger;
			font-weight: 400;
		}
	}
}


.toggle-service-info-sub {
	&:after {
		float: right;
		font-family: @font_icon_grtech;
		content: '\e826';
		float: right;
		font-size: larger;
		font-weight: 400;
		cursor: pointer;
	}

	&.active{
		font-weight: 700;
		&:after {
			content: "\e829";
			font-size: larger;
			font-weight: 400;
		}
	}
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
button,a.button {
	display: block;
	outline: none;
    width: 100%;
	width: -webkit-fill-available;
	line-height:50px;
	margin-top:16px;
	background: @color_15;
	color: @color_27;
    font-size: 14px;
	cursor: pointer;
	overflow: visible;
	text-align: center;

	border: 1px solid @color_15;
	color: @color_27;


	.transition(all 0.2s ease-in-out);


	&.cancel {
		background: @color_23;
		border: 1px solid @color_23;
	}

	&.simple {
		background: @color_27;
		color: @color_21;
		border: 0;
	}

	&[class^="icon-"], &[class^=" icon-"]{
		border: 1px solid transparent;
		padding: 0;
		border-radius: 50%;
		text-align: center;
		line-height: initial;

		&:before {
			font-size: 1.3rem;
		}
	}

	&:hover {
		background-color: @color_26;
		color: @color_21;
	}

	&.icon {
		font-size: 13px;
		margin: 0.2rem 0;
		padding:2px 25px;
		height: 48px;
		width: unset;
		line-height:30px;
		display: unset;

		&.search {

			&:before {
				padding-right: 5px;
				font-family: @font_icon_grtech;
				content: "\e802";
			}
		}

		&.close {
			border-color: @color_24;
			background: @color_24;
			color: @color_21;

			&:before {
				font-family: @font_icon_grtech;
				content: "\e828";
			}
		}


	}


}



input[type="text"],input[type="number"],input[type="file"],input[type="date"],input[type="datetime-local"],input[type="password"],select, textarea {
	margin: 0.2rem 0;
	-webkit-box-flex: 1;
	-ms-flex: 1 0 auto;
	flex: 1 0 auto;
	outline: 0;
	-webkit-tap-highlight-color: rgba(255,255,255,0);
	text-align: left;
	font-size: 14px;
	font-weight: 600;
	height: 48px;
	width: -webkit-fill-available;
//	line-height: 28px;
	line-height: 1.5rem;
	padding: 0 10px;
	background: @color_26;
	border: 0;

	box-shadow: none;
	overflow: hidden;
	vertical-align: middle;


	&.style-underline {
		border-bottom: 1px solid @color_15;
	}

	&.input-large {
		height:43px;
		line-height:43px;
		font-size:31px;
		letter-spacing:5px;
		padding:0 15px;
	}

	&.input-small {
		height:28px;
		line-height:28px;
		font-size: 13px;
	}

	&.readonly {
		background-color: @color_27;
		color: @color_23;
	}

	&.width-tiny {
		width: 20%;
	}
	&.width-sml {
		width: 30%;
	}
	&.width-mid {
		width: 50%;
	}
	&.width-big {
		width: 70%;
	}
}


.datepicker {
	&.date {
		width: 50%;
	}
	&.time {
		width: 30%;
	}

}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.box-service-form {
	margin-top: 28px;
}

.ADDSCH_List {

	table {
		table-layout:fixed;
		border-collapse: collapse;
		border-spacing: 0;
		width: 100%;
		border-top: 3px solid #F3F3F3;
		border-bottom: 3px solid #F3F3F3;


		> caption {
			font-size:1.3rem;
			padding: 1em 0 0.5em 1em;
			font-weight: bold;
			text-align: left;
		}


		>thead {
			>tr {

				>th, >td {
					text-align: center;

					border: 1px solid #DEDEDE;
					border-top: 1px solid #AEAEAE;
					border-bottom: 1px solid #4C545B;
					padding: 1rem 0;

					border-left: 0 !important;
					border-right: 0 !important;

				}
			}
		}
		>tbody {
			> tr {

				>th, >td{

					border: 1px solid #DEDEDE;
					padding: 1rem 0.3rem;
					overflow-x: hidden;
					text-overflow: ellipsis;


					border-left: 0 !important;
					border-right: 0 !important;
				}
			}

			tr:hover {
				th,td {
					background-color:#ffffcc;
					cursor: pointer;
				}
			}
		}

	}
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.box-address-search-result {
	max-height: 300px;
	overflow: auto;
	table {
		table-layout:fixed;
		border-collapse: collapse;
		border-spacing: 0;
		width: 100%;

		> thead > tr > th {
			font-weight: 600;
			text-align: center;
			border-bottom: 1px solid @color_22;
		}

		> tbody > tr > th, > tbody > tr > td {
			border-bottom: 1px solid @color_24;
			height: 21px;
		}

		> tbody > tr > th {
			font-weight: 400;
			text-align: center;
		}

		> tbody > tr > td {
			font-weight: 300;
		}

		tbody{
			tr:hover {
				th,td {
					cursor: pointer;
					background-color:@color_15;
					color: @color_27;
				}
			}
		}

	}
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.vertical-middle-out {
	position: fixed;
	top: 0;
	z-index: -1;
	width: 100%;
	max-width: @container_width_max;
	min-width: @container_width_min;
	height: 100%;
	/* background-color: @color_22; */
	background-color: #010101b0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-align: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;

	&.popup {
		z-index: 100;
	}


	&> .vertical-middle-in {
		background-color: @color_27;
		width: 100%;

		max-width:calc(~"100% - 32px") !important;
		max-width:-moz-calc(~"100% - 32px") !important;
		max-width:-webkit-calc(~"100% - 32px") !important;
		max-width:-o-calc(~"100% - 32px") !important;

		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		vertical-align: middle;
		-ms-flex-item-align: center!important;
		align-self: center!important;
		text-align: center;

		.content {
			padding: 34px 64px;
			font-weight: 600;
			font-size: 14px;
		}
		.buttons {
			border-top: 1px solid @color_border;
			-ms-flex-direction: row;
			flex-direction: row;

			font-size: 14px;
			padding: 18px 0;
			text-align: center;
			width: 100%;

			.close {
				display: block;
				text-align: center;
				width: 100%;
				font-weight: 600;
				font-size: 14px;
				cursor: pointer;
			}
			.progress {
				display: none;
				text-align: center;
				font-weight: 600;
				font-size: 14px;
				cursor: pointer;
			}

			&.confirm {
				.progress {
					display: inline-block;
					width: 49%;
				}
				.close {
					display: inline-block;
					width: 49%;
					border-right: 1px solid @color_border;
				}
			}
		}
	}
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.tips {
	font-size: 0.8rem;
	font-weight: 300;
	color: @color_23;
	margin-left: 1rem;
/* 	font-family: Gulim; */

	&:before {
		font-family: @font_icon_grtech;
		content: '\e85d';
		font-weight: 400;
		padding-right: .2rem;
	}
}

.required {
	&:before {
		font-family: @font_icon_grtech;
		content: '\e853';
		font-weight: 400;
		padding-right: .2rem;
	}
}

.scroll-box {
	height:5rem;
	overflow:auto;
	background: @color_26;
	border-bottom:1px solid @color_15;

	&.agreement-box {
		font-family: Gulim;
		font-weight: 300;
		font-size: 12px;
		line-height: 14px;
		padding: 1rem .6rem;
		color: @color_23;
	}
}

.img-namecard {
	max-width: 90px;
	max-height: 60px;
	border: 1px solid @color_25;;
	padding: 3px;
	margin: .5rem;
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */


/* YOUTUBE EMBED */
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; }
.embed-container iframe, .embed-container object, .embed-container embed, .embed-container .background-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }







/**
 * ----------------------------------------
 * animation fade-in
 * ----------------------------------------
 */
@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}
@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
[class^="icon-"]:before, [class*=" icon-"]:before {
	font-family: @font_icon_grtech;
	font-style: normal;
	font-weight: normal;
	speak: none;

	display: inline-block;
	text-decoration: inherit;
	text-align: center;

	font-variant: normal;
	text-transform: none;


	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.checkbox-box {
	position: relative;
	display: inline-block;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	outline: none;
	vertical-align: baseline;
	font-style: normal;
	min-height: 2.1rem;
	font-size: 1rem;
	width: unset;
	min-width: 4rem;
	line-height: 2.1rem;
	padding: 4px 12px 4px 0;
	vertical-align: middle;

	input {
		width: 3.5rem;
		height: 1.5rem;
		&[type="checkbox"], &[type="radio"] {
			left: 0;
			cursor: pointer;
			position: absolute;
			opacity: 0 ;
			outline: none;
			z-index: 3;
			margin: 0;
		}
		&[type="radio"] {
			&:focus:checked~label {
				&:before {
					background-color: #0D71BB ;
				}
			}
		}
		&[type="checkbox"] {
			&:focus:checked~label {
				&:before {
					background-color: #CDD021 ;
				}
			}
		}



		&:checked ~ label.radio:before {
			background-color: #2185D0;
		}
		&:checked ~ label.checkbox:before {
			background-color: #CDD021;
		}
		&:checked ~ label:before {
			background: #FFFFFF;
			border-color: rgba(34, 36, 38, 0.35);
		}

		&[disabled]~label {
			cursor: default ;
			opacity: 0.5;
			color: #000000;
		}
		&~label:after {
			left: -0.05rem;
			-webkit-box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset;
			box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset;
		}
		&:checked~label {
			color: red ;
			&:before {
				background-color: #2185D0 ;
			}
			&:after {
				left: 2.15rem;
				-webkit-box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset;
				box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset;
			}
		}
	}
	label {
		line-height: 1.5rem;
		white-space: nowrap;
		cursor: auto;
		position: relative;
		display: block;
		outline: none;
		font-size: 1rem;
		min-height: 1.5rem;
		padding-left: 3.7rem;
		color: rgba(0, 0, 0, 0.87);
		padding-top: 0.3em;
		border: none;
		&.checkbox:before {
			border-radius: 0.5rem;
		}
		&.checkbox:after {
			border-radius: 0.5rem;
		}
		&:before {
			position: absolute;
			display: block;
			top: 4px;
			left: 0;
			z-index: 1;
			width: 3.5rem;
			height: 1.5rem;
			content: '';
			background: rgba(0, 0, 0, 0.05);
			border-radius: 500rem;
			-webkit-transition: border 0.1s ease, opacity 0.1s ease, -webkit-transform 0.1s ease, -webkit-box-shadow 0.1s ease;
			transition: border 0.1s ease, opacity 0.1s ease, -webkit-transform 0.1s ease, -webkit-box-shadow 0.1s ease;
			transition: border 0.1s ease, opacity 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease;
			transition: border 0.1s ease, opacity 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease, -webkit-transform 0.1s ease, -webkit-box-shadow 0.1s ease;
		}
		&:after {
			position: absolute;
			width: 1.5rem;
			height: 1.5rem;
			top: 4px;
			left: 0;
			text-align: center;
			color: rgba(0, 0, 0, 0.87);
			content: '' ;
			opacity: 1;
			z-index: 2;
			background: #FFFFFF linear-gradient(transparent, rgba(0, 0, 0, 0.05));
			-webkit-box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset;
			box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset;
			border-radius: 500rem;
			-webkit-transition: background 0.3s ease, left 0.3s ease;
			transition: background 0.3s ease, left 0.3s ease;
		}
		&:hover::before {
			background-color: rgba(0, 0, 0, 0.15);
		}
		&:active::before {
			border-color: rgba(34, 36, 38, 0.35);
		}

	}
	label, &+label {
		color: rgba(0, 0, 0, 0.87);
		-webkit-transition: color 0.1s ease;
		transition: color 0.1s ease;
		vertical-align: middle;
		&:hover {
			color: rgba(0, 0, 0, 0.8);
		}
	}
}