@charset "utf-8";
* {margin: 0; padding: 0; box-sizing: border-box;}


/* 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');
}

@font-face {
  font-family: 'S-Core';
  font-weight:100;
  src: url('../font/S-core/S-CoreDream-1Thin.eot');
  src: url('../font/S-core/S-CoreDream-1Thin.eot?#iefix') format('embedded-opentype'),
       url('../font/S-core/S-CoreDream-1Thin.svg#S-CoreDream-1Thin') format('svg'),
       url('../font/S-core/S-CoreDream-1Thin.ttf') format('truetype'),
       url('../font/S-core/S-CoreDream-1Thin.woff') format('woff'),
       url('../font/S-core/S-CoreDream-1Thin.woff2') format('woff2');
}
@font-face {
  font-family: 'S-Core';
  font-weight:200;
  src: url('../font/S-core/S-CoreDream-2ExtraLight.eot');
  src: url('../font/S-core/S-CoreDream-2ExtraLight.eot?#iefix') format('embedded-opentype'),
       url('../font/S-core/S-CoreDream-2ExtraLight.svg#S-CoreDream-2ExtraLight') format('svg'),
       url('../font/S-core/S-CoreDream-2ExtraLight.ttf') format('truetype'),
       url('../font/S-core/S-CoreDream-2ExtraLight.woff') format('woff'),
       url('../font/S-core/S-CoreDream-2ExtraLight.woff2') format('woff2');
}
@font-face {
  font-family: 'S-Core';
  font-weight:300;
  src: url('../font/S-core/S-CoreDream-3Light.eot');
  src: url('../font/S-core/S-CoreDream-3Light.eot?#iefix') format('embedded-opentype'),
       url('../font/S-core/S-CoreDream-3Light.svg#S-CoreDream-3Light') format('svg'),
       url('../font/S-core/S-CoreDream-3Light.ttf') format('truetype'),
       url('../font/S-core/S-CoreDream-3Light.woff') format('woff'),
       url('../font/S-core/S-CoreDream-3Light.woff2') format('woff2');
}
@font-face {
  font-family: 'S-Core';
  font-weight:400;
   src: url('../font/S-core/S-CoreDream-4Regular.eot');
  src: url('../font/S-core/S-CoreDream-4Regular.eot?#iefix') format('embedded-opentype'),
       url('../font/S-core/S-CoreDream-4Regular.svg#S-CoreDream-4Regular') format('svg'),
       url('../font/S-core/S-CoreDream-4Regular.ttf') format('truetype'),
       url('../font/S-core/S-CoreDream-4Regular.woff') format('woff'),
       url('../font/S-core/S-CoreDream-4Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'S-Core';
  font-weight:500;
  src: url('../font/S-core/S-CoreDream-5Medium.eot');
  src: url('../font/S-core/S-CoreDream-5Medium.eot?#iefix') format('embedded-opentype'),
       url('../font/S-core/S-CoreDream-5Medium.svg#S-CoreDream-5Medium') format('svg'),
       url('../font/S-core/S-CoreDream-5Medium.ttf') format('truetype'),
       url('../font/S-core/S-CoreDream-5Medium.woff') format('woff'),
       url('../font/S-core/S-CoreDream-5Medium.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'S-Core';
  font-weight:600;
  src: url('../font/S-core/S-CoreDream-6Bold.eot');
  src: url('../font/S-core/S-CoreDream-6Bold.eot?#iefix') format('embedded-opentype'),
       url('../font/S-core/S-CoreDream-6Bold.svg#S-CoreDream-6Bold') format('svg'),
       url('../font/S-core/S-CoreDream-6Bold.ttf') format('truetype'),
       url('../font/S-core/S-CoreDream-6Bold.woff') format('woff'),
       url('../font/S-core/S-CoreDream-6Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'S-Core';
  font-weight:700;
  src: url('../font/S-core/S-CoreDream-7ExtraBold.eot');
  src: url('../font/S-core/S-CoreDream-7ExtraBold.eot?#iefix') format('embedded-opentype'),
       url('../font/S-core/S-CoreDream-7ExtraBold.svg#S-CoreDream-7ExtraBold') format('svg'),
       url('../font/S-core/S-CoreDream-7ExtraBold.ttf') format('truetype'),
       url('../font/S-core/S-CoreDream-7ExtraBold.woff') format('woff'),
       url('../font/S-core/S-CoreDream-7ExtraBold.woff2') format('woff2');
}
@font-face {
  font-family: 'S-Core';
  font-weight:800;
  src: url('../font/S-core/S-CoreDream-8Heavy.eot');
  src: url('../font/S-core/S-CoreDream-8Heavy.eot?#iefix') format('embedded-opentype'),
       url('../font/S-core/S-CoreDream-8Heavy.svg#S-CoreDream-8Heavy') format('svg'),
       url('../font/S-core/S-CoreDream-8Heavy.ttf') format('truetype'),
       url('../font/S-core/S-CoreDream-8Heavy.woff') format('woff'),
       url('../font/S-core/S-CoreDream-8Heavy.woff2') format('woff2');
}
@font-face {
  font-family: 'S-Core';
  font-weight:900;
  src: url('../font/S-core/S-CoreDream-9Black.eot');
  src: url('../font/S-core/S-CoreDream-9Black.eot?#iefix') format('embedded-opentype'),
       url('../font/S-core/S-CoreDream-9Black.svg#S-CoreDream-9Black') format('svg'),
       url('../font/S-core/S-CoreDream-9Black.ttf') format('truetype'),
       url('../font/S-core/S-CoreDream-9Black.woff') format('woff'),
       url('../font/S-core/S-CoreDream-9Black.woff2') format('woff2');
}

/* 폰트 */



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:'S-Core';}
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;min-height:960px;font-family:'S-Core';letter-spacing:-1px;background: url(../images/bg.png) center no-repeat; }
.intro_wrap .header{height: 90px;} 
.intro_wrap .header .layout {width: 1400px; margin: 0 auto; position: relative; height: 100%;}
.intro_wrap .header h1{margin:0 auto; text-align:center; line-height: 90px;}
.intro_wrap .container{width: 1200px;margin:0 auto;border-top:1px solid #ccc;}
.intro_wrap .container h2 {text-align: center;color: #fff;font-size: 33px;padding: 20px 0 10px;text-shadow: 3px 3px 3px #333;}

/* link_box */
.intro_wrap .link_box {margin: 10px auto 0;}
.intro_wrap .link_box ul {display: inline-block; margin: 20px auto; width: 100%; box-sizing: border-box;}
.intro_wrap .link_box ul li {float: left;color: #333;margin-right:2%;font-size: 18px;width: 100%; box-sizing: border-box;position: relative;height: 80px;line-height: 80px; background: #2b3764;}
.intro_wrap .link_box ul li a {display: block;width: 100%;height: 100%;font-weight: 300;color: #fff;padding: 3px 0px 0px 59px;font-size: 1.2rem;}
.intro_wrap .link_box ul li::before {content: '';width: 50px;height: 50px;display: block;background: url(../images/enter_btn.png) center no-repeat;background-size: 50px 50px;position: absolute;right: 50px;top: 50%;transform: translatey(-50%);}
.intro_wrap .link_box ul li:hover::before {right: 20px;}
.intro_wrap .link_box ul li:hover::before {
            -webkit-transition: all 0.5s ease; 
            -moz-transition: all 0.5s ease; 
            -o-transition: all 0.5s ease; 
            transition: all 0.5s ease; 
            -ms-transition: all 0.5s ease;
}

.intro_wrap .link_box ul li:last-child {margin-right: 0;}


/*바로가기*/

.list_box{margin-top: 5rem;overflow:hidden;}
.list_box > div{position:relative;width: 49%;height: 300px;min-height:205px;margin-right: 2%;float:left;border-radius: 2rem;}
.list_box > div.list02{margin-right: 0;}
.list_box > div.list01 {background: linear-gradient(90deg, #5948f5, #7e60f6 )}
.list_box > div.list01 a {background: rgba(50,36,177,0.55);}
.list_box > div.list01 a:hover {background: rgba(50,36,177,0.7);}

.list_box > div.list02 {background: linear-gradient(90deg, #0470dc, #13c2fc )}
.list_box > div.list02 a {background: rgba(7,63,120,0.55);}
.list_box > div.list02 a:hover {background: rgba(7,63,120,0.7);}


.list_box > div.list03 {background: linear-gradient(90deg, #f76b1c, #fab461 )}
.list_box > div.list03 a {background: rgba(187,70,4,0.55);}
.list_box > div.list03 a:hover {background: rgba(187,70,4,0.7);}
.list_box > div.list03 a::before {content: ''; display: block; position: absolute;  bottom: 10px; right: 15px; width: 24px; height: 24px; background: url(../images/arrow_03.png) center no-repeat;}

.list_box > div .list_img {text-align: center;padding: 50px 0 0px;}
.list_box > div h3{padding:20px 0 13px; text-align:center; font-size:22px; color:#fff;}
.list_box > div .list_btn {padding: 20px 30px;}
.list_box > div .list_btn a {display: block;width: 100%;padding: 20px 30px;border-radius: 5px;color: #fff;box-sizing: border-box;font-size: 18px;position: relative;}
.list_box > div .list_btn:hover a::before {transform: translateX(5px);}
.list_box > div .list_btn:hover a::before {
            -webkit-transition: all 0.5s ease; 
            -moz-transition: all 0.5s ease; 
            -o-transition: all 0.5s ease; 
            transition: all 0.5s ease; 
            -ms-transition: all 0.5s ease;
}

.info_box {width: 100%; padding: 30px 50px; min-height: 200px; background: rgba(255,255,255,0.98); margin: 30px 0;}
.info_box ul {display: inline-block; padding: 0 100px; width: 100%; margin: 0 auto;}
.info_box ul::after {content: ''; display: block; clear: both;}
.info_box ul li {width: 50%; float: left; font-size: 16px; padding: 0 0 8px 8px; position: relative; margin-bottom: 5px;}
.info_box ul li::before {content: ''; display: block; width: 2px; height: 12px; background: #005596; position: absolute; left: 0; top: 3px;}
.info_box ul li span {display: inline-block; color: #005596;}



@media screen and (max-width:1400px) {	
			
	
	.intro_wrap {min-width:320px;}
	.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 .container {width:90%; overflow: auto;}	
    .intro_wrap .header .layout {width: 90%;}
    .list_box {margin-top: 30px;}
    .intro_wrap .link_box ul li a {padding: 3px 0px 0px 30px;}
    .intro_wrap .link_box ul li::before {right: 30px;}
}


@media screen and (min-width:1200px) and (max-width:1399px) {
}



@media screen and (max-width:1199px) {		
		
	.list_box > div{width:49%; margin-bottom:20px;}
	.list_box > div.list03{margin-left:0;}
    .info_box ul {padding: 0 30px;}
}

@media screen and (max-width:900px) {
    .list_box > div {width: 100%; margin-left: 0;}
    .intro_wrap .link_box ul li a {padding: 3px 0px 0px 20px; font-size: 16px;}
    .intro_wrap .link_box ul li::before {right: 10px;}
}


@media screen and (max-width:720px) {
    .intro_wrap .link_box ul li {width: 100%; margin-right: 0; margin-bottom: 5px;}
    .info_box {padding: 20px 10px;}
    .info_box ul {padding: 10px 20px;}
    .info_box ul li {width: 100%;}
}


@media screen and (max-width:640px) {
		
	/*상단텍스트*/
	.intro_wrap .container h2{font-size:20px;}
    .info_box {padding: 20px 0;}
	.list_box > div h3{font-size:20px;}
    .info_box ul li {font-size: 15px;}
}


@media screen and (max-width:380px) {
	
	/*바로가기*/
    
    .intro_wrap .header ul li {font-size: 15px;}
    .intro_wrap .link_box ul li a {padding: 3px 0px 0px 10px; font-variant-caps: 15px;}
    .intro_wrap .link_box ul li::before {right: 0px;width: 40px;height: 40px;background-size: 40px 40px;}
    .intro_wrap .link_box ul li a img {width: 40px;}
    .list_box > div h3 {font-size: 18px;}
    .list_box > div .list_btn a {font-size: 15px;}
    
}