/* Common Color */
@color_link					: #f05000;
@color_line					: #f05000;

/* Body */
@color_body_bg				: #F3F3F3;
@color_body_font			: #222222;


/* Color */
@color_black				: #131313;
@color_white				: #FFFFFF;
@color_grey					: #9C9C9C;
@color_lightgrey			: #DED8DC;
@color_darkgrey				: #333333;
@color_orange				: #f05000;
@color_gold					: #FCBF33;

@color_red					: #DB2828;
@color_yellow				: #ffff99;
@color_green				: #016936;
@color_blue					: #0E6EB8;

@color_olive				: #32CD32;
@color_teal					: #008080;
@color_violet				: #EE82EE;
@color_purple				: #B413EC;
@color_pink					: #FF1493;
@color_brown				: #A52A2A;

@body_padding				: 20px;
@body_padding_2x			: 40px;

/* Screen Size */
@screen_mobile_max			: 699px;
@screen_tablet_min			: 700px;
@screen_tablet_max			: 999px;
@screen_computer_min		: 1000px;
@screen_computer_max		: 1280px;

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

.gen_box(@margin) {
    position: relative;
	margin-top: @margin;
	overflow: hidden;
    border: 1px solid #dbdbdb;
    border-top: 1px solid #ececec;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 2px 2px rgba(0,0,0,.18);
}


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

html {
	height: 100%;
}
html,body {
	width: 100%;
	margin:0;
	padding:0;
	font-size: 13px;
	line-height: 1.4285em;
	font-family:'Noto Sans KR','맑은 고딕', 'Malgun Gothic';
	font-weight: 300;

}

body {
	padding: @body_padding;
	height:calc(~"100% - "@body_padding_2x);
	height:-moz-calc(~"100% - "@body_padding_2x);
	height:-webkit-calc(~"100% - "@body_padding_2x);
	height:-o-calc(~"100% - "@body_padding_2x);
	width:calc(~"100% - "@body_padding_2x);
	width:-moz-calc(~"100% - "@body_padding_2x);
	width:-webkit-calc(~"100% - "@body_padding_2x);
	width:-o-calc(~"100% - "@body_padding_2x);

	background: @color_body_bg;
	color: @color_body_font;

	min-width: 355px;

}

a {
	text-decoration:none;
	outline: none;
	color:@color_black;
	&:hover {
		color:@color_link;
	}
	&:active {
		color:@color_link;
	}
}


p {
	margin: 0.3em 0;
}

h1,h2,h3,h4,h5,h6 {
	margin: 0;
	padding: 0;
	line-height: 2em;
	font-weight: 400;
}
h1 {
	font-size: 35px;
	font-weight: 500;
	&.title {
		padding: 0.5em 0 1em 0;
		font-size: 30px;
		font-weight: 400;
		line-height: 1em;
		letter-spacing: 5px;
	}
}
h2 {
	font-size: 31px;
	font-weight: 500;
}
h3 {
	font-size: 27px;
	font-weight: 500;
}
h4 {
	font-size: 23px;
	font-weight: 500;
}
h5 {
	font-size: 21px;
	font-weight: 500;
}
h6 {
	font-size: 17px;
	font-weight: 700;
}
@media (max-width:@screen_mobile_max){
	h1 {
		font-size: 27px;
	}
	h2 {
		font-size: 23px;
	}
	h3 {
		font-size: 21px;
	}
	h4 {
		font-size: 17px;
	}
	h5 {
		font-size: 15px;
	}
	h6 {
		font-size: 13px;
	}
}


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

.color-black {color: @color_black!important;}
.color-white {color: @color_white!important;}
.color-grey {color: @color_grey!important;}
.color-lightgrey {color: @color_lightgrey!important;}
.color-darkgrey {color: @color_darkgrey!important;}
.color-orange {color: @color_orange!important;}
.color-red {color: @color_red!important;}
.color-yellow {color: @color_yellow!important;}
.color-green {color: @color_green!important;}
.color-blue {color: @color_blue!important;}
.color-gold {color: @color_gold!important;}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.font-weight-100 {
	font-weight: 100;
}
.font-weight-300 {
	font-weight: 300;
}
.font-weight-400 {
	font-weight: 400;
}
.font-weight-500 {
	font-weight: 500;
}
.font-weight-700 {
	font-weight: 700;
}
.font-weight-900 {
	font-weight: 900;
}

.width-100 {
	width: 100%!important;
}

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

.float-left { float: left;}
.float-right { float: right;}
.float-clear { clear: both;}

.cut-text{ white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
.display-inline { display:inline-block;zoom:1;*display:inline;_display:inline;}
.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-top { vertical-align: top;}
.align-bottom { vertical-align: bottom;}

.background-image {
	background-color: #000066;
	background-position-x: center;
	background-position-y: center;
	background-size: cover;
	background-repeat: no-repeat;

	.background-overlay {
		position: absolute;
		z-index: 99;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		color: @color_white;
		font-size: 6rem;
	}
	&:hover {
		.background-overlay {
			color: @color_orange;
  -webkit-animation: zoomout-zoomin 1.3s infinite ease-in-out;
          animation: zoomout-zoomin 1.3s infinite ease-in-out; 
		}
	}

}

.content-loading {
	width:100%;
	height:100%;
	min-width:100px;
	min-height:100px;
	background:url(data:image/gif;base64,R0lGODlhKwALAPEAAP///wCt/oLW/gCt/iH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAKwALAAACMoSOCMuW2diD88UKG95W88uF4DaGWFmhZid93pq+pwxnLUnXh8ou+sSz+T64oCAyTBUAACH5BAkKAAAALAAAAAArAAsAAAI9xI4IyyAPYWOxmoTHrHzzmGHe94xkmJifyqFKQ0pwLLgHa82xrekkDrIBZRQab1jyfY7KTtPimixiUsevAAAh+QQJCgAAACwAAAAAKwALAAACPYSOCMswD2FjqZpqW9xv4g8KE7d54XmMpNSgqLoOpgvC60xjNonnyc7p+VKamKw1zDCMR8rp8pksYlKorgAAIfkECQoAAAAsAAAAACsACwAAAkCEjgjLltnYmJS6Bxt+sfq5ZUyoNJ9HHlEqdCfFrqn7DrE2m7Wdj/2y45FkQ13t5itKdshFExC8YCLOEBX6AhQAADsAAAAAAAAAAAA=) 50% 50% no-repeat;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
button {
	outline: none;

	border: 1px solid @color_lightgrey;
	padding: 10px 40px;
	background: @color_white;
	color: @color_grey;
	font-size: 15px;
	margin: 1px;

	[class^="icon-"]:before, [class*=" icon-"]:before {
		font-size: 19px;
	}

	&:hover {
		cursor: pointer;
		border: 1px solid @color_grey;
		color: @color_black;
		font-weight: 700;
	}

	&.button-grey {
		border: 1px solid @color_grey;
		color: @color_darkgrey;

		&:hover {
			border: 1px solid @color_black;
			color: @color_black;
		}
	}
	&.button-orange {
		border: 1px solid #ff9999;
		color: @color_darkgrey;

		&:hover {
			border: 1px solid @color_orange;
			color: @color_orange;
		}
	}
}


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

.box-border {
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border: 1px solid @color_lightgrey;
}
table {
	&.table {
		table-layout:fixed;
		border-collapse: collapse;
		border-spacing: 0;
		width: 100%;


		th, td{
			padding: 0.3em 2em;
			overflow-x: hidden;
			text-overflow: ellipsis;
		}
		&.height-mid {
			th, td{
				padding: 0.7em 2em;
				overflow-x: hidden;
				text-overflow: ellipsis;
			}
		}

		thead {
			th, td{
				border-bottom: 3px double @color_grey;
				line-height: 1.1em;
			}
		}
		tbody {
			th{
				line-height: 1.1em;
			}
			td{
				font-weight: 400;
				line-height: 1.7em;
				color: @color_darkgrey;
			}
		}
		@media (max-width:@screen_tablet_max){ // 모바일(태블릿)
			th, td{
				padding: 0.3em 0.3em;
				overflow-x: hidden;
				text-overflow: inherit;
			}
		}

		&.hoverable {
			tbody{
				tr:hover {
					td {background-color:@color_yellow!important;}
				}
			}

			tr:nth-child(2n):not(.no-sel) > td{
				background-color: rgba(0,0,50,.02);
			}
		}
	}
	&.line {
		tr:not(:last-child) {
			border-bottom: 1px solid @color_lightgrey;
		}
	}
	&.line-bottom {
		tr {
			border-bottom: 1px solid @color_lightgrey;
		}
	}
	&.line-all {
		th, td{
			border: 1px solid @color_lightgrey;
		}
	}

}

.border-bottom {
	border-bottom: 1px solid @color_lightgrey;
}

.bg-modal {
	display: none;
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	z-index:1000;

	&.active {
		display: block;
	}
}

hr {
	border: 0;
	border-top: 1px solid @color_lightgrey;
	margin: 10px auto;
}

/* 회전 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.transform-X1 {
	-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
	transform: scaleX(-1);
}
.transform-Y1 {
	-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
	transform: scaleY(-1);
}
.transform-90 {
	-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
	transform: rotate(90deg);
}
.transform-180 {
	-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
	transform: rotate(180deg);
}
.transform-270 {
	-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
	transform: rotate(270deg);
}


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

.input-box {
	position: relative;
	height: 40px;
	line-height: 40px;
	input[type="text"] {
		margin: 0;
		width:100%;
		-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: 15px;
		line-height: 15px;
		padding: 10px;
		background: #fff;
		border: 1px solid rgba(34,36,38,.15);
		border-radius: .28571429rem;
		box-shadow: none;
	}
	i {
		position: absolute;
		color: @color_grey;
		font-size: 25px;
		top:0;
		right: 10px;
		z-index: 2;
		&:hover {
			cursor: pointer;
			color: @color_black;
		}
	}

	&.required {
		input[type="text"] {
			width:calc(~"100% - 45px");
			width:-moz-calc(~"100% - 45px");
			width:-webkit-calc(~"100% - 45px");
			width:-o-calc(~"100% - 45px");
			padding: 10px 10px 10px 35px;
		}
		i {
			left: 7px;
			right: inherit;
			&:hover {
				color: @color_red;
			}
		}
	}
}

.grid-container {
	position: relative;
	font-size: 0px;
	
	.gridbox {
		position: relative;
		display: inline-block;zoom:1;*display:inline;_display:inline;
		vertical-align: top;
		text-align: justify;
		margin-bottom: 1.5em;

		&.margin-0 {
			margin-bottom: 0;
		}

		&.one {
			font-size: 15px;
			width: 100%;
			.txt-1 {
				position: relative;
			}
		}
		&.two {
			font-size: 15px;
			width: 50%;
			.txt-1 {
				padding-right: 15px;
			}
			.txt-2 {
				padding-left: 15px;
			}
		}
		&.two2 {
			font-size: 15px;
			&.cell-1 {
				width: 33%;
			}
			&.cell-2 {
				width: 67%;
			}
			.txt-1 {
				padding-right: 15px;
			}
			.txt-2 {
				padding-left: 15px;
			}
		}
		&.two3 {
			font-size: 15px;
			&.cell-1 {
				width: 67%;
			}
			&.cell-2 {
				width: 33%;
			}
			.txt-1 {
				padding-right: 15px;
			}
			.txt-2 {
				padding-left: 15px;
			}
		}
		&.two4 {
			font-size: 15px;
			&.cell-1 {
				width: 40%;
			}
			&.cell-2 {
				width: 60%;
			}
			.txt-1 {
				padding-right: 15px;
			}
			.txt-2 {
				padding-left: 15px;
			}
		}
		&.three {
			font-size: 15px;
			width: 33.33%;
			.txt-1 {
				padding-right: 20px;
			}
			.txt-2 {
				padding-left: 10px;
				padding-right: 10px;
			}
			.txt-3 {
				padding-left: 20px;
			}

		}
		&.four {
			font-size: 15px;
			width: 25%;
			.txt-1 {
				padding-right: 23px;
			}
			.txt-2 {
				padding-left: 8px;
				padding-right: 15px;
			}
			.txt-3 {
				padding-left: 15px;
				padding-right: 8px;
			}
			.txt-4 {
				padding-left: 23px;
			}
		}
		&.five {
			font-size: 15px;
			width: 20%;
			.txt-1 {
				padding-right: 24px;
			}
			.txt-2 {
				padding-left: 6px;
				padding-right: 18px;
			}
			.txt-3 {
				padding-left: 12px;
				padding-right: 12px;
			}
			.txt-4 {
				padding-left: 18px;
				padding-right: 6px;
			}
			.txt-5 {
				padding-left: 24px;
			}
		}
		&.six {
			font-size: 15px;
			width: 16.6%;
			.txt-1 {
				padding-right: 24px;
			}
			.txt-2 {
				padding-left: 6px;
				padding-right: 18px;
			}
			.txt-3 {
				padding-left: 12px;
				padding-right: 12px;
			}
			.txt-4 {
				padding-left: 18px;
				padding-right: 6px;
			}
			.txt-5 {
				padding-left: 24px;
				padding-right: 6px;
			}
			.txt-6 {
				padding-left: 24px;
			}
		}
	}

	/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
	&.fullsize {
		.gridbox {
			&.one {
				width: 100%;
				.txt-1 {}
			}
			&.two {
				width: 100%;
				.txt-1 {
					padding-right: 0;
				}
				.txt-2 {
					padding-left: 0;
				}
			}
			&.two2 {
				font-size: 15px;
				&.cell-1 {
					width: 100%;
				}
				&.cell-2 {
					width: 100%;
				}
				.txt-1 {
					padding-right: 0;
				}
				.txt-2 {
					padding-left: 0;
				}
			}
			&.two3 {
				font-size: 15px;
				&.cell-1 {
					width: 100%;
				}
				&.cell-2 {
					width: 100%;
				}
				.txt-1 {
					padding-right: 0;
				}
				.txt-2 {
					padding-left: 0;
				}
			}
			&.two4 {
				font-size: 15px;
				&.cell-1 {
					width: 100%;
				}
				&.cell-2 {
					width: 100%;
				}
				.txt-1 {
					padding-right: 0;
				}
				.txt-2 {
					padding-left: 0;
				}
			}
			&.three {
				width: 100%;
				.txt-1 {
					padding-right: 0;
				}
				.txt-2 {
					padding-left: 0;
					padding-right: 0;
				}
				.txt-3 {
					padding-left: 0;
				}

			}
			&.four {
				width: 100%;
				.txt-1 {
					padding-right: 0;
				}
				.txt-2, .txt-3 {
					padding-left: 0;
					padding-right: 0;
				}
				.txt-4 {
					padding-left: 0;
				}
			}
			&.five {
				width: 100%;
				.txt-1 {
					padding-right: 0;
				}
				.txt-2, .txt-3, .txt-4 {
					padding-left: 0;
					padding-right: 0;
				}
				.txt-5 {
					padding-left: 0;
				}
			}
			&.six {
				width: 100%;
				.txt-1 {
					padding-right: 0;
				}
				.txt-2, .txt-3, .txt-4, .txt-5 {
					padding-left: 0;
					padding-right: 0;
				}
				.txt-6 {
					padding-left: 0;
				}
			}
		}
	}

	/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
	@media (max-width:@screen_mobile_max) {
		.gridbox {
			&.one {
				width: 100%;
				.txt-1 {}
			}
			&.two {
				width: 100%;
				.txt-1 {
					padding-right: 0;
				}
				.txt-2 {
					padding-left: 0;
				}
			}
			&.two2 {
				font-size: 15px;
				&.cell-1 {
					width: 100%;
				}
				&.cell-2 {
					width: 100%;
				}
				.txt-1 {
					padding-right: 0;
				}
				.txt-2 {
					padding-left: 0;
				}
			}
			&.two3 {
				font-size: 15px;
				&.cell-1 {
					width: 100%;
				}
				&.cell-2 {
					width: 100%;
				}
				.txt-1 {
					padding-right: 0;
				}
				.txt-2 {
					padding-left: 0;
				}
			}
			&.two4 {
				font-size: 15px;
				&.cell-1 {
					width: 100%;
				}
				&.cell-2 {
					width: 100%;
				}
				.txt-1 {
					padding-right: 0;
				}
				.txt-2 {
					padding-left: 0;
				}
			}
			&.three {
				width: 100%;
				.txt-1 {
					padding-right: 0;
				}
				.txt-2 {
					padding-left: 0;
					padding-right: 0;
				}
				.txt-3 {
					padding-left: 0;
				}

			}
			&.four {
				width: 100%;
				.txt-1 {
					padding-right: 0;
				}
				.txt-2, .txt-3 {
					padding-left: 0;
					padding-right: 0;
				}
				.txt-4 {
					padding-left: 0;
				}
			}
			&.five {
				width: 100%;
				.txt-1 {
					padding-right: 0;
				}
				.txt-2, .txt-3, .txt-4 {
					padding-left: 0;
					padding-right: 0;
				}
				.txt-5 {
					padding-left: 0;
				}
			}
			&.six {
				width: 100%;
				.txt-1 {
					padding-right: 0;
				}
				.txt-2, .txt-3, .txt-4, .txt-5 {
					padding-left: 0;
					padding-right: 0;
				}
				.txt-6 {
					padding-left: 0;
				}
			}
		}
	}


	/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
	@media (min-width:@screen_tablet_min) and (max-width:@screen_tablet_max){
		.gridbox {
			display: inline-block;zoom:1;*display:inline;_display:inline;
			vertical-align: top;
			text-align: justify;

			&.one {
				width: 100%;
				.txt-1 {}
			}
			&.two {
				width: 50%;
				.txt-1 {
					padding-right: 15px;
				}
				.txt-2 {
					padding-left: 15px;
				}
			}
			&.two2 {
				font-size: 15px;
				&.cell-1 {
					width: 50%;
				}
				&.cell-2 {
					width: 50%;
				}
				.txt-1 {
					padding-right: 15px;
				}
				.txt-2 {
					padding-left: 15px;
				}
			}
			&.two3 {
				font-size: 15px;
				&.cell-1 {
					width: 50%;
				}
				&.cell-2 {
					width: 50%;
				}
				.txt-1 {
					padding-right: 15px;
				}
				.txt-2 {
					padding-left: 15px;
				}
			}
			&.three {
				&.cell-1, &.cell-2 {
					width: 50%;
				}
				&.cell-3 {
					width: 100%;
				}
				.txt-1 {
					padding-right: 15px;
				}
				.txt-2 {
					padding-left: 15px;
					padding-right: 0;
				}
				.txt-3 {
					padding-left: 0;
				}

			}
			&.four {
				width: 50%;
				.txt-1 {
					padding-right: 15px;
				}
				.txt-2 {
					padding-left: 15px;
					padding-right: 0;
				}
				.txt-3 {
					padding-left: 0;
					padding-right: 15px;
				}
				.txt-4 {
					padding-left: 15px;
				}
			}
			&.five {
				&.cell-1, &.cell-2, &.cell-3, &.cell-4 {
					width: 50%;
				}
				&.cell-5 {
					width: 100%;
				}
				.txt-1 {
					padding-right: 15px;
				}
				.txt-2, {
					padding-left: 15px;
					padding-right: 0;
				}
				.txt-3 {
					padding-left: 0;
					padding-right: 15px;
				}
				.txt-4 {
					padding-left: 15px;
					padding-right: 0;
				}
				.txt-5 {
					padding-left: 0;
				}
			}
			&.six {
				&.cell-1, &.cell-2, &.cell-3, &.cell-4, &.cell-5, &.cell-6 {
					width: 33.33%;
				}
				.txt-1 {
					padding-right: 20px;
				}
				.txt-4 {
					padding-left: 0;
					padding-right: 20px;
				}
				.txt-2, .txt-5 {
					padding-left: 10px;
					padding-right: 10px;
				}
				.txt-3, .txt-6 {
					padding-left: 20px;
					padding-right: 0;
				}
			}
		}
	}
}

.site-width-limit {
	position:relative;
	max-width:@screen_computer_max;
	margin: 0 auto;
}

.site-sub-container {
	
	&.doc-height {
		height:100%;
		min-height:100%;
	}

	.gen_box(0);


	.doc-content {
		margin: 42px 73px;
		font-size: 16px;
		line-height: 2em;
	}
}

@media (max-width:@screen_mobile_max){
	.site-sub-container {
		.gen_box(31px);

		.doc-content {
			margin: 15px;
			font-size: 13px;
			line-height: 2em;
		}
	}
}

.desktop-only {
	display: block;
}
.mobile-only {
	display: none;
}
@media (max-width:@screen_tablet_max){ // 모바일(태블릿)
	.desktop-only {
		display: none;
	}
	.mobile-only {
		display: block;
	}
}