@charset "utf-8";

/* 나눔폰트 적용 */
@font-face {
	font-family: 'NotoKrL';
	font-style: normal;
	font-weight: 100;
	src: local('Noto Sans Light'), local('NotoSans-Light'), url(/fonts/notokr-light.eot);
	src: url(/fonts/notokr-light.eot?#iefix) format('embedded-opentype'),
		 url(/fonts/notokr-light.woff2) format('woff2'),
		 url(/fonts/notokr-light.woff) format('woff');;
}

@font-face {
	font-family: 'NotoKrR';
	font-style: normal;
	font-weight: 300;
	src: local('Noto Sans Regular'), local('NotoSans-Regular'), url(/fonts/notokr-regular.eot);
	src: url(/fonts/notokr-regular.eot?#iefix) format('embedded-opentype'),
		 url(/fonts/notokr-regular.woff2) format('woff2'),
		 url(/fonts/notokr-regular.woff) format('woff');
}

@font-face {
	font-family: 'NotoKrM';
	font-style: normal;
	font-weight: 500;
	src: local('Noto Sans Medium'), local('NotoSans-Medium'), url(/fonts/notokr-medium.eot);
	src: url(/fonts/notokr-medium.eot?#iefix) format('embedded-opentype'),
		 url(/fonts/notokr-medium.woff2) format('woff2'),
		 url(/fonts/notokr-medium.woff) format('woff');
}

@font-face {
	font-family: 'NotoKrB';
	font-style: normal;
	font-weight: 700;
	src: local('Noto Sans Bold'), local('NotoSans-Bold'), url(/fonts/notokr-bold.eot);
	src: url(/fonts/notokr-bold.eot?#iefix) format('embedded-opentype'),
		 url(/fonts/notokr-bold.woff2) format('woff2'),
		 url(/fonts/notokr-bold.woff) format('woff');
}
@font-face {
    font-family: 'nanum-square-r';
    src: url('/fonts/nanumsquarer.eot');
    src: url('/fonts/nanumsquarer.eot?#iefix') format('embedded-opentype'),
         url('/fonts/nanumsquarer.woff2') format('woff2'),
         url('/fonts/nanumsquarer.woff') format('woff'),
         url('/fonts/nanumsquarer.ttf') format('truetype'),
         url('/fonts/nanumsquarer.svg#nanumsquarerregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'nanum-square-b';
    src: url('/fonts/nanumsquareb.eot');
    src: url('/fonts/nanumsquareb.eot?#iefix') format('embedded-opentype'),
         url('/fonts/nanumsquareb.woff2') format('woff2'),
         url('/fonts/nanumsquareb.woff') format('woff'),
         url('/fonts/nanumsquareb.ttf') format('truetype'),
         url('/fonts/nanumsquareb.svg#nanumsquarebregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* reset */
html,body{width:100%;  width:100%; height:100%;  margin:0px; padding:0px; } 
*{-webkit-text-size-adjust:none;box-sizing: border-box;}
html {overflow-y:scroll}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,form,fieldset,p,button,strong,span,em,iframe,img, textarea,input {margin:0px;padding:0px}
body {width:100%;font-family:'NotoKrR', '나눔 고딕', NotoKrR Gothic, "맑은 고딕", Malgun Gothic, '돋움',dotum,Helvetica,sans-serif;background-size:100% auto;font-size:16.5px; background:#fff;line-height:150%;color:#666; letter-spacing:-0.5px; text-align:left;word-break:break-all;-ms-word-break:break-all; }
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
#hd ul, nav ul, #ft ul {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle}
input, button {margin:0;padding:0;font-family:'NotoKrR','나눔 고딕', NotoKrR Gothic, "맑은 고딕", Malgun Gothic, '돋움',dotum,Helvetica,sans-serif;font-size:15.5px; }
button {cursor:pointer}
textarea, select {font-family:'NotoKrR','나눔 고딕', NotoKrR Gothic, "맑은 고딕", Malgun Gothic, '돋움',dotum,Helvetica,sans-serif; font-size:15.5px; }
select {margin:0; }
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a:link, a:visited {color:#000;text-decoration:none; border:0px;}
a:hover, a:focus, a:active {color:#000;text-decoration:none}
img {border:0px;}
li{list-style:none; margin:0px; padding:0px;}


/*scroll none*/
body {-ms-overflow-style: none;}
::-webkit-scrollbar {display: none;}


/*intro-video*/
.video-background {background: #000;position: fixed;top: 0; right: 0; bottom: 0; left: 0;z-index: -99;}
.video-foreground,.video-background iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;}
#vidtop-content {top: 0;color: #fff;}
.vid-info { position: absolute; top: 0; right: 0; width: 33%; background: rgba(0,0,0,0.3); color: #fff; padding: 1rem; font-family: Avenir, Helvetica, sans-serif; }
.vid-info h1 { font-size: 2rem; font-weight: 700; margin-top: 0; line-height: 1.2; }
.vid-info a { display: block; color: #fff; text-decoration: none; background: rgba(0,0,0,0.5); transition: .6s background; border-bottom: none; margin: 1rem auto; text-align: center; }
@media (min-aspect-ratio: 16/9) {
.video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
.video-foreground { width: 300%; left: -100%; }
}
@media all and (max-width: 600px) {
.vid-info { width: 50%; padding: .5rem; }
.vid-info h1 { margin-bottom: .2rem; }
}
@media all and (max-width: 500px) {
.vid-info .acronym { display: none; }
}


#totalWrap {position:relative;height:100vh;overflow:hidden;}
.overay {position:absolute;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,.2)}
.layer {position: absolute;left: 0;top: 0;right: 0;bottom: 0;box-sizing: border-box;padding: 0 175px;z-index:9}
.layer:after {content:'';display:block;clear:both;}
.layer h1 {float:left;margin-top: 280px;}
.layer h1 a {display: block;color:#fff;font-size:64px;line-height: 120%;letter-spacing: -1px;}
.layer h1 .btn0 {content:'';display: block;width: 76px;height: 76px;margin:30px 0 0;border-radius: 50%;background: #fff url(/img2024/arrow.png) center center no-repeat;}
.layer h1:hover .btn0 {background: #779eb5 url(/img2024/arrow_w.png) center center no-repeat;}
.layer h1 span {display: block;margin: 0 0 15px;font-size:32px;line-height: 100%;}
.layer .in_btn {float:right;width: 920px;margin: 185px 0 0 !important;display: grid;grid-template-columns: 1fr 1fr;grid-template-rows: 1fr 1fr 1fr 1fr;background: rgba(0,0,0,.3);border-left: 1px solid rgba(255,255,255,.2);border-top: 1px solid rgba(255,255,255,.2);}
.layer .in_btn:after {content:'';}
.layer .in_btn li {position: relative;text-align: left;border: 1px solid rgba(255,255,255,.2);border-left: 0;border-top: 0;}
.layer .in_btn li a {display: block;font-size: 24px;color: #fff;font-family: 'NotoKrM';padding: 28px 20px 28px 40px;}
.layer .in_btn li a > p {display: inline-block;}
.layer .in_btn li a > span {display: inline-block;width: 68px;height: 68px;border-radius: 50%;margin: 0 20px 0 0;background-size: 34px !important;}
.btn01 {background:#fff url(/img2024/icon01.png) center center no-repeat;}
.layer .in_btn li:hover .btn01 {background:#a0b075 url(/img2024/icon01_w.png) center center no-repeat;}
.btn02 {background:#fff url(/img2024/icon02.png) center center no-repeat;}
.layer .in_btn li:hover .btn02 {background:#d27768 url(/img2024/icon02_w.png) center center no-repeat;}
.btn03 {background:#fff url(/img2024/icon03.png) center center no-repeat;}
.layer .in_btn li:hover .btn03 {background:#1A4B9D url(/img2024/icon03_w.png) center center no-repeat;}
.btn04 {background:#fff url(/img2024/icon04.png) center center no-repeat;}
.layer .in_btn li:hover .btn04 {background:#9486ae url(/img2024/icon04_w.png) center center no-repeat;}
.btn05 {background:#fff url(/img2024/icon05.png) center center no-repeat;}
.layer .in_btn li:hover .btn05 {background:#7c6a67 url(/img2024/icon05_w.png) center center no-repeat;}
.btn06 {background:#fff url(/img2024/icon06.png) center center no-repeat;}
.layer .in_btn li:hover .btn06 {background:#234039 url(/img2024/icon06_w.png) center center no-repeat;}
.btn07 {background:#fff url(/img2024/icon07.png) center center no-repeat;}
.layer .in_btn li:hover .btn07 {background:#58b1a1 url(/img2024/icon07_w.png) center center no-repeat;}
.btn08 {background:#fff url(/img2024/icon10.png) center center no-repeat;}
.layer .in_btn li:hover .btn08 {background:#A83C25 url(/img2024/icon10_w.png) center center no-repeat;}
.btn09 {background:#fff url(/img2024/icon11.png) center center no-repeat;}
.layer .in_btn li:hover .btn09 {background:#5d7682 url(/img2024/icon11_w.png) center center no-repeat;}


@media all and (max-width: 1650px) {
.layer {padding:0 50px}
}

@media all and (max-width: 1400px) {
.layer h1 a {font-size:46px;}
.layer h1 span {font-size:26px;}
.layer h1 .btn0 {width: 54px;height: 54px;background-size: 24px !important;}
.layer .in_btn {width:760px;}
.layer .in_btn li a {font-size:22px;}
.layer .in_btn li a > span {width: 54px;height: 54px;background-size: 24px !important;}

}

@media all and (max-width: 1200px) {
.layer h1{float: none;margin-top: 80px;}
.layer .in_btn {float: none;width: 100%;margin-top:80px !important;border-top:1px solid rgba(255,255,255,.2);border-bottom:1px solid rgba(255,255,255,.2);}
}