@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:100%;}
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;}


body.start .intro_wrap .container .goto {opacity:1; visibility:visible; -webkit-transform:translateY(0); -moz-transform:translateY(0); -ms-transform:translateY(0); -o-transform:translateY(0); transform:translateY(0);}


.intro_wrap{width:100%; min-width:1400px; min-height:960px; font-family:'NotoR'; letter-spacing:-0.04em;  background:url('../images/bg.png') no-repeat center;  background-size:cover;}
.intro_wrap .header{padding:30px 0; width:1200px; margin:0 auto; border-bottom:1px solid #9a9a9a; }
.intro_wrap .header h1{margin:0 auto; text-align:center;}

.intro_wrap .container{width:1200px; margin:0 auto;  }
.intro_wrap .container h2{margin:50px 0 30px; font-size:40px; color:#fff; font-family:'NotoL'; text-align:center; }
.intro_wrap .container h2 strong {  font-family:'NotoB'; }


/*바로가기*/
.intro_wrap .container .goto {width:100%; margin: 100px auto 0; visibility:hidden; -webkit-transform:translateY(3rem); -moz-transform:translateY(3rem); -ms-transform:translateY(3rem); -o-transform:translateY(3rem); transform:translateY(3rem); -webkit-transition:opacity 1000ms cubic-bezier(0.77, 0, 0.175, 1), visibility 1000ms cubic-bezier(0.77, 0, 0.175, 1), transform 1000ms cubic-bezier(0.77, 0, 0.175, 1); transition:opacity 1000ms cubic-bezier(0.77, 0, 0.175, 1), visibility 1000ms cubic-bezier(0.77, 0, 0.175, 1), transform 1000ms cubic-bezier(0.77, 0, 0.175, 1); -webkit-transition-delay:.5s; transition-delay:.5s;}
.intro_wrap .container .goto ul {width:100%; margin: 0 auto; }
.intro_wrap .container .goto ul li{background: rgba(255, 255, 255, 0.2);border-radius: 2rem;position:relative;float: left;padding: 2.5%;margin: 0 2%;width: 46%;height: 500px;transition: 0.4s;box-sizing: border-box;}
.intro_wrap .container .goto ul li.sub_04:hover, .intro_wrap .container .goto ul li.sub_04:active {background-color: rgba(0,0,0,.5);}
.intro_wrap .container .goto ul li.sub_05:hover, .intro_wrap .container .goto ul li.sub_05:active {background-color: rgba(0,0,0,.5);}
.intro_wrap .container .goto ul li p {transition: 0.4s;}
.intro_wrap .container .goto ul li:hover>a>p,
.intro_wrap .container .goto ul li:active>a>p {transform: translateY(-10px);}
.intro_wrap .container .goto ul li a {padding:20px 0;background: #fff;font-family:'NotoB';display:inline-block;font-size:20px;box-sizing: border-box;width: 100%;height: 100%;text-align: center;border-radius: 2rem;}
.intro_wrap .container .goto ul li a span.top {line-height: 56px;color:#131f4a;}
.intro_wrap .container .goto ul li a span.top2 {line-height: 56px;color: #f73f3f; box-shadow: 0 -8px rgb(200 58 44 / 15%) inset;}
.intro_wrap .container .goto ul li a span.bottom {font-size: 1.3rem;display: inline-block;width: 80%;line-height: 50px;color: #fff;background: #324daf;}
.intro_wrap .container .goto ul li a span.bottom2 {font-size: 1.3rem;display: inline-block;width: 80%;height: 100px;line-height: 33px;color: #fff;background: #324daf;}
.intro_wrap .container .goto ul li.sub_04:hover span.bottom {background: #fe6433;}
.intro_wrap .container .goto ul li.sub_05:hover span.bottom {background: #fe6433;}
.intro_wrap .container .goto ul li a img {margin: 50px auto 10px;display: block;width: auto;max-width: 100%;transition: 0.4s;}
.intro_wrap .container .goto ul li:hover>a>.img_box img,
.intro_wrap .container .goto ul li:active>a>.img_box img {transform: translateY(10px);}
.intro_wrap .container .goto ul li a .img_box {width: 100%;transition: 0.4s;} 

/*문구강조추가*/
.emphasis {color: #fe6433; /* 기본 텍스트 색상 */ }
.intro_wrap .container .goto ul li.sub_05:hover .emphasis{color:#000;}


/*푸터*/
.foot { background:#fff;  text-align:center; font-family:'NotoM';}
.foot img { padding:20px;} 
.foot p.address { font-size:15px; color:#383f45;  margin: 40px 10px 0;}
.foot p.copyright {color:#7f7f7f; font-size:12px; padding:3px 0; padding-bottom:40px; }




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

	.intro_wrap{width:100%; min-width:100%;}
	.intro_wrap .header { width:100%; }

	.intro_wrap .container .goto ul {width:100%; margin: 0 auto; overflow: hidden;}
	.intro_wrap .container .goto ul li a img {max-width: 100%;}

	
}


@media screen and (max-width:1024px) {
    
    .intro_wrap .container {width: 100%;}
	.intro_wrap .container .goto ul {width:100%; margin: 0 auto; overflow: hidden;}
	.intro_wrap .container .goto ul li{max-height: 600px;position:relative;float: left; width: auto; max-width: 45%; height: 480px;}

	.intro_wrap .container .goto ul li a img {max-width: 100%;}

	
}



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

	.intro_wrap .container{width:95%;}
	.intro_wrap .container .pop_wrap p.img{ width: 100%; }
	


	
}

@media screen and (max-width:779px) {
	 
.intro_wrap .container .goto {width:100%; margin: 30px auto 0;}
.intro_wrap .container .goto ul li{ width: 100%;  max-width: 730px;}

.intro_wrap .container .goto ul li{max-height: 600px;margin-left:0;max-width: 700px;margin: 20px 0;height: auto;}
.intro_wrap .container .goto ul li a img {margin: 20px auto 10px;}
    .intro_wrap .container .goto ul li a span.bottom {font-size: 1.1rem;}
	
}



@media screen and (max-width:640px) {
	
	.intro_wrap .container h2 { font-size:30px; margin:40px 0; }
    .intro_wrap .container .pop_wrap p.img{ height: 420px;}

	
}

@media screen and (max-width:480px) {
		
	.intro_wrap .container h2 { font-size:25px; margin:60px 0; }
     
	
}

@media screen and (max-width:360px) {
	
	.intro_wrap .container .pop_wrap p.img{ height: 250px; }


	
}



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


	.intro_wrap .container .goto ul li{ width: 100%;  min-width: 300px;}

	

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

	.foot {width:90%; margin:0 auto;}
	


}