@charset "utf-8";

/* Pretendard */
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 100;
    src: url(../css/font/Pretendard-Thin.woff2) format('woff2');
}
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 200;
    src: url(../css/font/Pretendard-ExtraLight.woff2) format('woff2');
}
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 300;
    src: url(../css/font/Pretendard-Light.woff2) format('woff2');
}
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 400;
    src: url(../css/font/Pretendard-Regular.woff2) format('woff2');
}
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 500;
    src: url(../css/font/Pretendard-Medium.woff2) format('woff2');
}
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 600;
    src: url(../css/font/Pretendard-SemiBold.woff2) format('woff2');
}
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 700;
    src: url(../css/font/Pretendard-Bold.woff2) format('woff2');
}
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 800;
    src: url(../css/font/Pretendard-ExtraBold.woff2) format('woff2');
}
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 900;
    src: url(../css/font/Pretendard-Black.woff2) format('woff2');
}

/* Archivo */
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 100;
    src: url(../css/font/Archivo-Thin.woff2) format('woff2');
}
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 200;
    src: url(../css/font/Archivo-ExtraLight.woff2) format('woff2');
}
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 300;
    src: url(../css/font/Archivo-Light.woff2) format('woff2');
}
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 400;
    src: url(../css/font/Archivo-Regular.woff2) format('woff2');
}
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 500;
    src: url(../css/font/Archivo-Medium.woff2) format('woff2');
}
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 600;
    src: url(../css/font/Archivo-SemiBold.woff2) format('woff2');
}
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 700;
    src: url(../css/font/Archivo-Bold.woff2) format('woff2');
}
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 800;
    src: url(../css/font/Archivo-ExtraBold.woff2) format('woff2');
}
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 900;
    src: url(../css/font/Archivo-Black.woff2) format('woff2');
}


/* css variables */
:root{
    /* font-weight */
    --fwt : 100;
    --fwel: 200;
    --fwl : 300;
    --fwr : 400;
    --fwm : 500;
    --fwsb: 600;
    --fwb : 700;
    --fweb: 800;
    --fwbl: 900;

    /* gradient */
    --grad1: linear-gradient(0deg, rgba(67,118,139,1) 0%, rgba(67,118,139,0) 100%);
    --grad2: linear-gradient(0deg, rgba(0,34,76,1) 0%, rgba(0,34,76,0) 100%);
    --grad3: linear-gradient(0deg, rgba(152,123,90,1) 0%, rgba(152,123,90,0) 100%);

    /* colors */
    --main: #000;
    --white: #fff;
    --gray: #ababab;

    /* more view line */
    --more_view: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
}


/* Reset : 이 부분은 초기화만 작성 */
*,
*:before,
*:after{box-sizing: border-box;}

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, 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, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, input, textarea, select{margin: 0; padding: 0; -webkit-touch-callout: none;}

hr{display: none;}
ul, ol, li{list-style: none;}
img{border: none; vertical-align: middle;}
fieldset{border: none; vertical-align: top;}
table{border-collapse: collapse; border-spacing: 0;}
address, em, optgroup{font-style: normal;}
object{vertical-align: top;}
blockquote, q{quotes: none;}
blockquote:before,
blockquote:after,
q:before,
q:after{content: ""; content: none;}
input, button, select{vertical-align: middle;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display: block;}
audio, canvas, progress, video{display: inline-block;}
button{padding: 0; box-shadow: none; border: none; font-size: inherit; font-family: inherit; border-radius: 0; color: inherit;}
button:hover,
button:active,
button:focus{cursor: pointer;}
h1, h2, h3, h4, h5, h6{font-size: 100%; font-weight: normal; line-height: normal;}
img{max-width: 100%; border: 0; -webkit-tap-highlight-color: rgba(0,0,0,0); -ms-interpolation-mode: bicubic;}
legend, caption{visibility: hidden; overflow: hidden; position: absolute; width: 0; height: 0; line-height: 0; margin: 0; padding: 0;}
caption{position: static;}
a{color: inherit; text-decoration: none;}
a:link, a:visited, a:hover, a:active{text-decoration: none;}
a[href^="tel"]{color: inherit; text-decoration: none;}
textarea{overflow-y: auto;}
label{cursor: pointer;}
input[type=text], input[type=password], textarea{-webkit-appearance: none;}
input[type=checkbox], input[type=radio]{vertical-align: middle;}
input[type=submit]{-webkit-border-radius: 0; -webkit-appearance: none;}
input[type=image]{height: auto; border: 0;}
input[type=file]{border: 0; background: none;}


/* html5 구 버전 적용 위한 소스 */
area, base, basefont, command, datalist, head, link, meta,
noframes, param, script, source, style, track, title, noembed,
[hidden], input[type=hidden], menu[type=context] {display: none;}
address, article, aside, blockquote, body, center, dd, dir, div, dl, dt, figure,
figcaption, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, html,
legend, listing, menu, nav, ol, p, plaintext, pre, section, summary, ul, xmp{display: block;}
table{display: table;}
caption{display: table-caption;}
colgroup{display: table-column-group;}
col{display: table-column;}
thead{display: table-header-group;}
tbody{display: table-row-group;}
tfoot{display: table-footer-group;}
tr{display: table-row;}
td, th{ display: table-cell;}
li{ display: list-item;}
ruby{display: ruby;}
rt{display: ruby-text; display: inline;}


/* 기본 공통스타일 */
html{width: 100%; height: 100%; word-break: keep-all; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-font-size-adjust: none; text-rendering: optimizeLegibility; font-size: 16px;}
body{position: relative; width: 100%; min-width: 320px; overflow-x: hidden; height: 100%; line-height: 1.5; letter-spacing: 0; font-weight: 400; font-style: normal; font-family: 'Pretendard', '맑은고딕', Malgun Gothic, sans-serif,'Sans-serif', 돋움, 'dotum'; color: var(--main);}
@media (max-width: 1280px){
    html{font-size: 15px;}
}


/* 드래그 선택 */
::selection{background: var(--main); color: var(--white);}


/* 모바일 주소창 제외한 높이 100% */
.h100vh{height: calc(var(--vh, 1vh) * 100) !important;}
.min_h100vh{min-height: calc(var(--vh, 1vh) * 100) !important;}


/* 영문 폰트 */
.font_en{font-family: 'Archivo'; font-weight: 800;}




/**********************/
/* 인트로 페이지 시작 */
/**********************/

.intro{overflow: hidden; width: 100vw; height: 100vh;}
.container{position: relative; z-index: 2; width: 100%; height: 100%;}

/* links */
.links{display: flex; flex-wrap: wrap; width: 100%; height: 100%; color: var(--white);}
.links > li{position: relative; transition: 0.2s;  height: 100%; background: rgba(0,0,0,.3); flex: 1;}
.links > li:not(:last-child):after{content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; height: 100%; background-color: rgba(0,0,0,0.35);}
.links > li.on{flex: 2;}
.links > li.link1.on{background: var(--grad1);}
.links > li.link2.on{background: var(--grad2);}
.links > li.link3.on{background: var(--grad3);}

.links > li .btn{position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; height: 100%; text-align: center; padding: 15vh 1vw 0; background-color: transparent;}
.links > li .btn .logo{display: block; margin: 0 auto; width: 150px; aspect-ratio: 138 / 118;}
.links:hover > li:not(:hover) .btn .logo{opacity: 0.35;}
.links > li .btn .logo img{}
.links > li.link1 .btn .logo img{width: 100%;}
.links > li.link2 .btn .logo img{width: 82.66%; margin-top: 12%;}
.links > li.link3 .btn .logo img{width: 62%;}

.links > li .btn .txt{width: 100%; font-size: 17px; font-weight: var(--fwr); line-height: 1.3; padding: 39px 0 0; padding: 4.19vh 0 0;}
.links:hover > li:not(:hover) .btn .txt{display: none;}
.links > li .btn .txt dt{font-size: 1.764em; font-weight: var(--fwb);}
.links > li .btn .txt dd{line-height: 1.47; padding: 1.51vh 0 0;}

.links > li .btn .more{display: none; position: absolute; bottom: 10%; left: 0; right: 0; font-size: 13px; font-weight: var(--fweb); letter-spacing: 0.1em; text-transform: uppercase;}
.links > li.on .btn .more{display: block;}
.links > li .btn .more:before{content: ""; display: block; margin: 0 auto 18px; width: 2px; height: 80px; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 100%);}

.links .footer{position: absolute; bottom: 52px; left: 50%; transform: translateX(-50%);}
.links .footer .copyright{letter-spacing: 0.1em; line-height: 1; font-size: 12px; font-weight: var(--fwm); color: var(--gray); opacity: 0.5;}


/* video_bg */
.video_bg{position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;}
.video_bg .dim{position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.15);}
.video_bg video{position: absolute; z-index: 0; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover; object-position: top center;}


/* hidden_wrap */
.hidden_wrap{position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; height: 90%; border-radius: 100px; z-index: -100; background-color: #fff; opacity: 0; transition: 0.5s;}
.hidden_wrap.step1{z-index: 3;}
.hidden_wrap.step2{opacity: 1; width: 100%; height: 100%; border-radius: 0;}
.hidden_wrap .v_item{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: 0.2s;}
.hidden_wrap .v_item.show{opacity: 1;}
.hidden_wrap .btn_skip{position: absolute; z-index: 2; bottom: 52px; right: 80px; width: 82px; height: 32px; border-radius: 32px; line-height: 32px; font-size: 13px; font-weight: var(--fweb); text-align: center; color: #fff; background-color: rgba(0,0,0,0.25);}
@media (max-width: 1560px){
    .links > li .btn .txt{max-width: 360px; margin: 0 auto; font-size: clamp(15px,1.1vw,17px);}
    .links > li .btn .txt dd{}
    .links > li .btn .txt dd br{display: none;}
}
@media (max-width: 1280px){
    .links > li .btn .logo{width: 12vw;}
    .links > li .btn .txt{max-width: 300px;}
    .hidden_wrap .btn_skip{bottom: 30px; right: 30px;}
}
@media (max-width: 1024px){
    .links{flex-direction: column;}
    .links > li{width: 100%; height: auto;}
    .links > li:not(:last-child):after{width: 100%; height: 1px; top: auto; bottom: 0; left: 0; right: 0;}
    .links > li .btn{padding: 0; justify-content: center;}
    .links > li .btn .logo{width: 14vw;}
    .links > li .btn .txt{max-width: 60%; font-size: 15px; padding: 1vh 0 0;}
    .links > li .btn .txt dt{font-size: 1.6em;}
    .links > li .btn .txt dd{padding: 1vh 0 0;}
    .links > li .btn .more{position: static; font-size: 12px; padding: 2vh 0 0;}
    .links > li .btn .more:before{height: 4vh; margin: 0 auto 1vh;}
}
@media (max-width: 700px){
    .links > li .btn .logo{width: 100px;}
    .links > li .btn .txt{font-size: 14px;}
    .links > li .btn .txt dt{font-size: 1.45em;}
}
@media (max-width: 640px){
    .links > li .btn .txt dt{font-size: 1.35em;}
    .links > li .btn .txt dd{display: none;}
    .hidden_wrap .btn_skip{bottom: 20px; right: 15px;}
}


/* 화면 가로 1921px 이상일 경우 */
@media (min-width: 1921px){
    .links > li .btn .logo{width: 6.5vw;}
    .links > li .btn .txt{font-size: 0.9vw;}
    .links > li .btn .more{font-size: clamp(13px,0.75vh,40px);}
}


/* 화면 세로형이면서 가로 1921 이상일 경우 */
@media (orientation: portrait) and (min-width: 1921px){
	.links{flex-direction: column;}
    .links > li{width: 100%; height: auto;}
    .links > li:not(:last-child):after{width: 100%; height: 1px; top: auto; bottom: 0; left: 0; right: 0;}
    .links > li .btn{padding: 0; justify-content: center;}
    .links > li .btn .logo{width: 14vw;}
    .links > li .btn .txt{max-width: 60%; font-size: 1vh; padding: 1vh 0 0;}
    .links > li .btn .txt dt{font-size: 1.6em;}
    .links > li .btn .txt dd{padding: 1vh 0 0;}
    .links > li .btn .more{position: static; font-size: 0.75vh; padding: 2vh 0 0;}
    .links > li .btn .more:before{height: 4vh; margin: 0 auto 1vh;}
}


/* 모바일 가로모드 대응 (스마트폰이면서 가로모드인 경우만 적용 O, 태블릿 사이즈는 적용 X) */
@media (orientation: landscape) and (max-width: 940px) and (min-aspect-ratio: 9/5.2){
    .intro,
    .video_bg{min-height: 660px !important;}
}


/* 화면 세로형 */
@media (orientation: portrait){
    .hidden_wrap .v_item{object-fit: contain;}
}