/* Main Content */


.column {
	float: left;
	width: 50%;
	padding: 0 2em;
	min-height: 350px;
	position: relative;
}

.column:nth-child(2) {
	box-shadow: -1px 0 0 rgba(0,0,0,0.1);
}

.column p {
	font-weight: 300;
	font-size: 2em;
	padding: 0;
	margin: 0;
	text-align: right;
	line-height: 1.5;
}

/* To Navigation Style */
.codrops-top {
	background: #fff;
	background: rgba(255, 255, 255, 0.2);
	text-transform: uppercase;
	width: 100%;
	font-size: 0.69em;
	line-height: 2.2;
}

.codrops-top a {
	padding: 0 1em;
	letter-spacing: 0.1em;
	display: inline-block;
}

.codrops-top a:hover {
	color: #e74c3c;
	background: rgba(255,255,255,0.6);
}

.codrops-top span.right {
	float: right;
}

.codrops-top span.right a {
	float: left;
	display: block;
}

.codrops-icon:before {
	font-family:'Noto Sans KR','Malgun Gothic','돋움','dotum','AppleGothic','Apple SD Gothic Neo Medium',Helvetica,Arial,Sans-Serif;
	margin: 0 4px;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}

.codrops-icon-drop:before {
	content: "\e001";
}

.codrops-icon-prev:before {
	content: "\e004";
}

button {
	border: none;
	background:#ffffff;
	text-transform: uppercase;
	cursor: pointer;
	display: inline-block;
	
}

/*button:hover {
	background: #A5281B;
}*/

@media screen and (max-width: 46.0625em) {
	.column {
		width: 100%;
		min-width: auto;
		min-height: auto;
		padding: 1em; 
	}

	.column p {
		text-align: left;
		font-size: 1.5em;
	}

	.column:nth-child(2) {
		box-shadow: 0 -1px 0 rgba(0,0,0,0.1);
	}
}

@media screen and (max-width: 25em) {

	.codrops-icon span {
		display: none;
	}

}

/* General styles for the modal */

/* 
Styles for the html/body for special modal where we want 3d effects
Note that we need a container wrapping all content on the page for the 
perspective effects (not including the modals and the overlay).
*/
.md-perspective,
.md-perspective body {
	height: 100%;
	overflow: hidden;
}

.md-perspective body  {
	background: #222;
	-webkit-perspective: 600px;
	-moz-perspective: 600px;
	perspective: 600px;
}

.container {
	background: #e74c3c;
	min-height: 100%;
}

.md-modal {

	position: fixed;
	top: 50%;
	left: 50%;
	width: 50%;
	max-width: 630px;
	min-width: 320px;
	z-index: 9999;
	
	visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	
}

.md-modal2 {

	position: fixed;
	top: 50%;
	left: 50%;
	width: 50%;
	max-width:1030px;
	min-width:320px;
	z-index: 9999;
	
	visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	
}

.md-modal3 {

	position: fixed;
	top: 50%;
	left: 50%;
	width: 100%;
	max-width:1300px;
	min-width:320px;
	z-index: 9999;
	
	visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	
}


.md-modal4 {
	
	visibility: visible;
	-webkit-backface-visibility: visible;
	-moz-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-transform: translateX(-50%) translateY(-20%);
	-moz-transform: translateX(-50%) translateY(-20%);
	-ms-transform: translateX(-50%) translateY(-20%);
	transform: translateX(-50%) translateY(-20%);
	
}

.md-show {
	visibility: visible;
}

.md-overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	visibility: hidden;
	top: 0;
	left: 0;
	z-index: 9998;
	opacity: 0;
	background: rgba(0, 0, 0, 0.8);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.md-show ~ .md-overlay {
	opacity: 1;
	visibility: visible;
}

/* Content styles */
.md-content {
	color: #454545;
	background: #ffffff;
	position: relative;
	/*border-radius: 3px;*/
	margin: 0 auto;
	
	
}
.md-content .pop_title {position: relative;border-bottom:2px solid #eeeeee;height:40px;margin-bottom:30px;padding-top:20px}
.md-content .pop_title:after {content:""; display:block; clear:both;}
.md-content h3 {
	margin: 0;
	position:absolute;left:20px;top:0px;
	font-size:24px;
	/*opacity: 0.8;
	padding:30px 50px 10px 50px;
	background: rgba(0,0,0,0.1);
	border-radius: 3px 3px 0 0;*/
	color:#da1f3d;
	background:none;
}

.md-content > div.content_box {
	padding:0px 30px 50px 30px;
	margin: 0;
	font-size: 15px;
	line-height:160%
}
.md-content > div.content_box img{max-width:100%;}

.md-content > div.content_box p {
	margin: 0;
	padding:0px 0;
}

.md-content > div.content_box ul {
	margin: 0;
	padding: 0 0 ;
}
.md-content > div.content_box ul:after {content:""; display:block; clear:both;}

.md-content > div.content_box > ul > li {
	padding:0;
	float:left;width:50%
}

.md-content > div.content_box ul li img{max-width:100%;}


.md-content button.close {	
	position:absolute;right:20px;top:15px;
}

/* Individual modal styles with animations/transitions */

/* Effect 1: Fade in and scale up */
.md-effect-1 .md-content {
	-webkit-transform: scale(0.7);
	-moz-transform: scale(0.7);
	-ms-transform: scale(0.7);
	transform: scale(0.7);
	opacity: 0;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	border:5px solid #da1f3d;
	max-height: 600px;	
	overflow-y: scroll;
	overflow-x:hidden;
}
.md-effect-1 .md-hiht {max-height:800px}

.md-show.md-effect-1 .md-content {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}


@-webkit-keyframes rotateRightSideFirst {
	50% { -webkit-transform: translateZ(-50px) rotateY(5deg); -webkit-animation-timing-function: ease-out; }
	100% { -webkit-transform: translateZ(-200px); }
}

@-moz-keyframes rotateRightSideFirst {
	50% { -moz-transform: translateZ(-50px) rotateY(5deg); -moz-animation-timing-function: ease-out; }
	100% { -moz-transform: translateZ(-200px); }
}

@keyframes rotateRightSideFirst {
	50% { transform: translateZ(-50px) rotateY(5deg); animation-timing-function: ease-out; }
	100% { transform: translateZ(-200px); }
}

.md-effect-18 .md-content {
	-webkit-transform: translateX(200%);
	-moz-transform: translateX(200%);
	-ms-transform: translateX(200%);
	transform: translateX(200%);
	opacity: 0;
}

.md-show.md-effect-18 .md-content {
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
	opacity: 1;
	-webkit-transition: all 0.5s 0.1s;
	-moz-transition: all 0.5s 0.1s;
	transition: all 0.5s 0.1s;
}

/* Effect 19:  Slip in from the top with perspective on container */
.md-show.md-effect-19 ~ .container {
	height: 100%;
	overflow: hidden;
}

.md-show.md-effect-19 ~ .md-overlay {
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
}

.md-show.md-effect-19 ~ .container,
.md-show.md-effect-19 ~ .md-overlay {
	-webkit-transform-style: preserve-3d;
	-webkit-transform-origin: 50% 100%;
	-webkit-animation: OpenTop 0.5s forwards ease-in;
	-moz-transform-style: preserve-3d;
	-moz-transform-origin: 50% 100%;
	-moz-animation: OpenTop 0.5s forwards ease-in;
	transform-style: preserve-3d;
	transform-origin: 50% 100%;
	animation: OpenTop 0.5s forwards ease-in;
}

@-webkit-keyframes OpenTop {
	50% { 
		-webkit-transform: rotateX(10deg); 
		-webkit-animation-timing-function: ease-out; 
	}
}

@-moz-keyframes OpenTop {
	50% { 
		-moz-transform: rotateX(10deg); 
		-moz-animation-timing-function: ease-out; 
	}
}

@keyframes OpenTop {
	50% { 
		transform: rotateX(10deg); 
		animation-timing-function: ease-out; 
	}
}

.md-effect-19 .md-content {
	-webkit-transform: translateY(-200%);
	-moz-transform: translateY(-200%);
	-ms-transform: translateY(-200%);
	transform: translateY(-200%);
	opacity: 0;
}

.md-show.md-effect-19 .md-content {
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
	opacity: 1;
	-webkit-transition: all 0.5s 0.1s;
	-moz-transition: all 0.5s 0.1s;
	transition: all 0.5s 0.1s;
}


.md-content > div.content_box div.pop_write{padding:0;width:100%}
.md-content > div.content_box div.pop_write:after{content:"";display:block;clear:both;} 
.md-content > div.content_box div.pop_write dl{min-height:40px;line-height:40px;padding:5px 0 2px;}
.md-content > div.content_box div.pop_write dl:after{content:"";display:block;clear:both;} 
.md-content > div.content_box div.pop_write dl dt {float:left;width:20%;font-size:14px;color:#333;font-weight: bold;text-align:center;}
.md-content > div.content_box div.pop_write dl dt span.str {color:#f16617; }
.md-content > div.content_box div.pop_write dl dd {float:left;width:80%;text-align:left}

.md-content > div.content_box div.pop_write ul.check_qna:after {content:"";display:block;clear:both;} 
.md-content > div.content_box div.pop_write ul.check_qna li {text-align:left; margin-bottom:30px;}
.md-content > div.content_box div.pop_write ul.check_qna li .txt {font-size:16px; font-weight:bold; line-height:22px;margin-bottom:15px;}
.md-content > div.content_box div.pop_write ul.check_qna li .txt > span {color:#da1f3d; font-size:20px;}
.md-content > div.content_box div.pop_write ul.check_qna li > p {font-size:13px; color:#666;}

.md-content > div.content_box div.pop_write dl.check_qna:after {content:"";display:block;clear:both;} 
.md-content > div.content_box div.pop_write dl.check_qna  {text-align:left; margin-bottom:30px;width:100%;line-height:150%}
.md-content > div.content_box div.pop_write dl.check_qna dt{width:100%;text-align:left;cursor:pointer;margin-bottom:15px;}
.md-content > div.content_box div.pop_write dl.check_qna dt .txt {font-size:16px; font-weight:bold; line-height:120%;}
.md-content > div.content_box div.pop_write dl.check_qna dt .txt > span {color:#da1f3d; font-size:20px;}
.md-content > div.content_box div.pop_write dl.check_qna dd{clear:both;width:100%;margin-bottom:15px;}
.md-content > div.content_box div.pop_write dl.check_qna dd > p {font-size:13px; color:#666;line-height:140%}



div.pop_write input.text01 {height:32px; line-height:32px; width:50%;}
div.pop_write input.text02 {height:32px; line-height:32px; width:15% }
div.pop_write input.text03 {height:32px; line-height:32px; width:90%;}
div.pop_write input.text04 {height:32px; line-height:32px; width:30%; margin-bottom:5px;}
div.pop_write input.text05 {height:32px; line-height:32px; width:60%;}
div.pop_write input.text06 {height:32px; line-height:32px; width:8%;}


@media screen and (max-width: 32em) {
	body { font-size: 75%; }
	.md-content > div.content_box ul li {padding:0;float:none;width:100%}

	.md-effect-1 .md-content {
	-webkit-transform: scale(0.7);
	-moz-transform: scale(0.7);
	-ms-transform: scale(0.7);
	transform: scale(0.7);
	opacity: 0;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	border:5px solid #da1f3d;
	max-height:550px;
	min-height:450px;	
	overflow-y: scroll;
	overflow-x:hidden;
}
	
}

@media only screen and (max-width: 767px) {
	div.pop_write dl dt {float:none;width:100%;text-align:left}
	div.pop_write dl dd {float:none;clear:both;width:100%;}
	
	div.pop_write input.text01 {width:95%;}
	div.pop_write input.text02 {width:25%;}
	div.pop_write input.text03 {width:95%;}
	div.pop_write input.text04 {width:95%;}
	div.pop_writenput.text05 {width:80%;}


}