@charset "utf-8";
/* CSS Document */
@charset "utf-8";
/* CSS Document */

/* 폰트 */
@font-face {
    font-family: 'NotoT';
    src: url(../font/NotoSansKR/NotoSansKR-Thin.eot);
    src: url(../font/NotoSansKR/NotoSansKR-Thin.eot?#iefix) format('embedded-opentype'),
    	 url(../font/NotoSansKR/NotoSansKR-Thin.woff2) format('woff2'),
		 url(../font/NotoSansKR/NotoSansKR-Thin.woff) format('woff');
}

@font-face {
    font-family: 'NotoL';
    src: url(../font/NotoSansKR/NotoSansKR-Light.eot);
    src: url(../font/NotoSansKR/NotoSansKR-Light.eot?#iefix) format('embedded-opentype'),
    	 url(../font/NotoSansKR/NotoSansKR-Light.woff2) format('woff2'),
		 url(../font/NotoSansKR/NotoSansKR-Light.woff) format('woff');
}

@font-face {
    font-family: 'NotoDL';
    src: url(../font/NotoSansKR/NotoSansKR-DemiLight.eot); 
    src: url(../font/NotoSansKR/NotoSansKR-DemiLight.eot?#iefix) format('embedded-opentype'),
		 url(../font/NotoSansKR/NotoSansKR-DemiLight.woff2) format('woff2'),
		 url(../font/NotoSansKR/NotoSansKR-DemiLight.woff) format('woff');
}

@font-face {
    font-family: 'NotoR';
    src: url(../font/NotoSansKR/NotoSansKR-Regular.eot);
    src: url(../font/NotoSansKR/NotoSansKR-Regular.eot?#iefix) format('embedded-opentype'),
    	 url(../font/NotoSansKR/NotoSansKR-Regular.woff2) format('woff2'),
		 url(../font/NotoSansKR/NotoSansKR-Regular.woff) format('woff');
}

@font-face {
    font-family: 'NotoM';
    src: url(../font/NotoSansKR/NotoSansKR-Medium.eot);
   	src: url(../font/NotoSansKR/NotoSansKR-Medium.eot?#iefix) format('embedded-opentype'),
    	 url(../font/NotoSansKR/NotoSansKR-Medium.woff2) format('woff2'),
		 url(../font/NotoSansKR/NotoSansKR-Medium.woff) format('woff');
}

@font-face {
    font-family: 'NotoB';
    src: url(../font/NotoSansKR/NotoSansKR-Bold.eot);
    src: url(../font/NotoSansKR/NotoSansKR-Bold.eot?#iefix) format('embedded-opentype'),
    	 url(../font/NotoSansKR/NotoSansKR-Bold.woff2) format('woff2'),
		 url(../font/NotoSansKR/NotoSansKR-Bold.woff) format('woff');
}

@font-face {
    font-family: 'NotoBK';
    src: url(../font/NotoSansKR/NotoSansKR-Black.eot);
    src: url(../font/NotoSansKR/NotoSansKR-Black.eot?#iefix) format('embedded-opentype'),
    	 url(../font/NotoSansKR/NotoSansKR-Black.woff2) format('woff2'),
		 url(../font/NotoSansKR/NotoSansKR-Black.woff) format('woff');
}



body{font-family:'돋움',Dotum,'굴림',Gulim,Helvetica,sans-serif}
body, input, textarea, select, button, table, h1, h2, h3, h4, h5{font-size:14px; line-height:1.267em}

/* HTML Default */
article, aside, figcaption, figure, footer, header, hgroup, nav, section {display:block}
mark{background:#FF0;color:#000}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a,
abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small,
strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label,
legend, table, caption, article, aside, hgroup, header, footer, figure, figcaption, nav, section { margin:0; padding:0; border:0; font-size:87%;}
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,q:before, q:after { content:''; }
a {margin:0; padding:0; text-decoration:none;}
button { margin:0; padding:0; border:0; font:inherit; color:inherit; background:transparent; overflow:visible; cursor:pointer; line-height:1; }
button::-moz-focus-inner { margin: -1px; padding: 0; }
table {border-collapse:collapse; border-spacing:0; width:100%;}
h1, h2, h3, h4, h5 {font-weight:normal; font-family:'NotoM';}
img, select, input, button {vertical-align:middle;}
input, select { color:inherit; font:inherit; line-height:100%; }
textarea { resize:vertical; font:inherit; overflow-y:auto; }
html {-webkit-text-size-adjust:none; -moz-text-size-adjust:none; -ms-text-size-adjust:none; text-size-adjust:none;}
.hid, legend, hr {position:absolute; left:-10000%; top:0; overflow:hidden; width:1px; height:1px; font-size:0; line-height:0; text-indent:-10000px;}
caption {visibility:hidden; overflow:hidden; width:0; height:0; font-size:0; line-height:0;}
body {margin:0; padding:0; font-size:14px; word-break:break-all; -webkit-text-size-adjust:none;}
ul, ol, li, figure {list-style-type:none; margin:0; padding:0;}
cite, blockqoute {display:block; font-style:normal;}
figcaption { display:none;}

.intro_wrap{ width:100%; min-width:1020px;  font-family:'NotoR'; letter-spacing:-1px;}

.intro_wrap .header{margin:20px 0; background:#fff; }
.intro_wrap .header h1{margin:0 auto; text-align:center;}

.intro_wrap .container{ background:url('../images/bg3.png') no-repeat center center; padding:60px 0; background-size:cover;}
.intro_wrap .box{width:1000px; margin:0 auto; overflow:hidden;}
.top_box{position:relative; text-align:center;}
.top_box h2{margin-top:15px; font-size:40px; color:#fff; font-family:'NotoDL';}
.top_box h2 span{font-family:'NotoB';}
.top_box h2:after{content:""; position:relative; display:block; width:40px; height:1px; margin:20px auto; background:#fff;}
.top_box p{line-height:20px; font-size:16px; color:#fff;}

.txt_box{margin:30px 0; padding:20px; background:#fff;}
.txt_box ul{border-bottom:1px dotted #999;}
.txt_box ul li{position:relative; margin-bottom:10px; padding-left:90px; line-height:45px; font-size:16px;}
.txt_box ul li:first-child{color:#e51f27; font-family:'NotoB';}
.txt_box ul li span{position:absolute; top:0; left:0; padding:0 20px; background:#003258; color:#fff; font-size:18px; font-family:'NotoB';}
.txt_box p{margin-top:15px; text-align:center; font-size:16px; color:#333;}
.txt_box p span{font-family:'NotoM';}

/*바로가기*/
.M_link li{margin:7px 0; width:20%; float:left;}
.M_link li a{color:#fff; font-size:16px; font-family:'NotoM';}
.M_link li a span{margin-left:10px;}
.M_link li a:hover{text-decoration:underline;}
.M_link li a:hover img{transition:transform 300ms ease-in-out 0s; transform:rotate(360deg); transform: rotateY(360deg); transition:transform 300ms ease-in-out 0.1s;}



@media screen and (max-width:1000px) {				

	.intro_wrap, .container {-webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; transition:all 0.3s ease;}
	
	.intro_wrap {min-width:320px;}
	.intro_wrap .container {margin:0 0 20px 0; padding:40px 5%;}
	
	.intro_wrap .box{width:100%;}
	
	/*바로가기*/
	.M_link li{width:33%;}

	
}

@media screen and (max-width:640px) {
	
	.intro_wrap .container {margin-bottom:50px;} 	
	
	.top_box h2{font-size:30px;}
	
	.txt_box ul li{line-height:25px; font-size:15px;}
	.txt_box ul li span{font-size:16px;}
	
	/*바로가기*/
	.M_link li{width:50%;}
	
}

@media screen and (max-width:380px) {
	
	.top_box p{font-size:15px;}
	
	/*바로가기*/
	.M_link li a{font-size:14px;}
	
}