/* RESET
--------------------------------------------------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

* {
	margin:0;
	padding:0;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}

html {
	width:100%;
}

body{
	width:100%;
	line-height:1;
	color:#333;
	font-size:1em;
	font-family:'Noto Sans KR', 'Roboto', sans-serif;
	overflow-y: visible !important;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}

ul, ol, li { padding:0; margin:0; list-style:none; }

a { text-decoration:none; color:#333; }

strong, em, i, address, b { font-style:normal; font-weight:400; }

img { vertical-align:middle; border:none; }

h1, h2, h3, h4, h5 ,h6 { line-height:1; font-weight:400; }

.hidden { visibility:inherit; width:0; height:0; font-size:0; line-height:0; overflow:hidden; }

.clear  {clear:both; }

input[type=checkbox] { vertical-align:middle; }

input[type=radio] { vertical-align:middle;margin:0 5px; }

input[type=button] {cursor:pointer;	border:none; }

select, input {	vertical-align:top; margin:0; padding:0; }


.wrap {
	width:980px;
	margin:150px auto 0 auto;
}

.wrap .banner {
	width:470px;
	margin-top:30px;
	border-radius:20px; 
	overflow:hidden;
	box-shadow:0px 0px 15px #999;
}

.wrap .banner .img {
	width:100%;
}

.wrap .banner .img img {
	width:100%;
}

.wrap .banner .txt {
	padding:30px 40px;
	display:block;
}

.wrap .banner .txt strong {
	font-size:2.7em;
	font-weight:900;
	line-height:130%;
}

.wrap .banner .txt strong span {
	display:block;
}

.wrap .banner .txt em {
	margin-top:15px;
	font-size:1.3em;
	font-weight:300;
	color:#666;
	line-height:140%;
	display:block;
}

.wrap .banner .txt span.go {
	margin-top:20px;
	padding-right:35px;
	font-size:1.3em;
	font-weight:500;
	background:url(images/intro/icon_go_off.png) no-repeat right center;
	display:inline-block;
}
	

.wrap .banner.bn01 {
	float:left;
}

.wrap .banner.bn01 strong {
	color:#203c75;
}

.wrap .banner.bn02 {
	float:right;
}

.wrap .banner.bn02 strong {
	color:#573c3c;
}

.wrap .banner.bn01.active {
	background:#324f89;
}

.wrap .banner.bn01.active strong, .wrap .banner.bn01.active em {
	color:#fff;
}

.wrap .banner.bn02.active {
	background:#573c3c;
}

.wrap .banner.bn02.active strong, .wrap .banner.bn02.active em {
	color:#fff;
}

.wrap .banner.active span.go {
	color:#fff;
	background:url(images/intro/icon_go_over.png) no-repeat right center;
}

@media screen and (max-width: 600px) {
	
	.wrap {
		width:80%;
		margin:0 auto;
	}
	
	.wrap .banner {
		float:none;
		width:100%;
	}
	
	.wrap .banner .txt {
		padding:15px 25px;
	}
	
	.wrap .banner .txt strong {
		font-size:6vw;
	}
	
	.wrap .banner .txt strong span {
		display:inline;
	}
	
	.wrap .banner .txt em {
		margin-top:5px;
		font-size:3.5vw;
	}
		
	.wrap .banner .txt span.go {
		padding-right:25px;
		font-size:1.0em;
		background:url(images/intro/icon_go_off.png) no-repeat right center;
		background-size:18px auto;
	}
	
}