@charset "UTF-8"; 
body { font-family: "Red Hat Display", 'Pretendard'; font-weight: 300; }
#wrap { position: relative; }
.layout { position: relative;margin:0 auto;width:100%; }

/* header */
.header { width: 100%; z-index: 999;position: absolute;padding-top:7rem;  }
.header .layout { max-width:1720px;justify-content: space-between; align-items: center;display: flex; }
.header .header-logo { flex-shrink: 0;display: block; width:23.1rem; }
.header .header-util .header-util-language { display: flex;gap:1rem;align-items: center; }
.header .header-util .header-util-language i { font-size:2.2rem;color:#fff; }
.header .header-util .header-util-language .header-util-language-inner { display: flex;align-items: center;gap:2rem;position: relative; }
.header .header-util .header-util-language .header-util-language-inner:before { height: 1.7rem;width:1px;position: absolute;top:50%;left:50%;transform: translate(-50%, -50%);background: #fff;content:""; }
.header .header-util .header-util-language .header-util-language-inner a { color: #FFF;text-align: center; }
.header .header-util .header-util-language .header-util-language-inner a span { font-family: "Red Hat Display";font-size: 2rem; font-style: normal;font-weight: 700; line-height: 140%;opacity: .3; }
.header .header-util .header-util-language .header-util-language-inner a.on span { opacity: 1; }

/* container */
#main-section-intro .layout { max-width:1920px; }
.main-section { display: flex; position: relative; height: 100vh; background: no-repeat 50% 50%/cover; justify-content: center; align-items: center; overflow: hidden; min-height: 850px; } 
.main-section > .layout { margin: auto; } 
.main-section-nodata { display: flex; height: 100%; font-size: 2rem; align-items: center; } 
.main-section-title h2 { color: #222; font-weight: 700; font-size: 6rem; line-height: 1.2; } 
.main-section-title h2 span { color: #00468c; } 
@media (max-width: 1340px){
.main-section-title h2 { font-size: 5.5rem; } 
}
@media (max-width: 767px){
.main-section-title h2 { font-size: 5rem; } 
}
@media (max-width: 479px){
.main-section-title h2 { text-align: Center; } 
}
.main-section-more { display: inline-flex; border: 1px solid transparent; justify-content: center; align-items: center; border-radius: 10rem; } 
.main-section-more > i { font-size: 2.4rem; } 
.main-section-more[data-more-text="hidden"] { width: 4.8rem; height: auto; color: #222; aspect-ratio: 1 / 1; border-color: #bdbdbd; } 
.main-section-more[data-more-text="visible"] { padding: 1.6rem 2.4rem 1.6rem 3.2rem; color: #00468c; gap: 2rem; border-color: #00468c; } 
.main-section-more[data-more-text="visible"] > span { font-weight: 500; font-size: 1.6rem; transform: translatey(0.1rem); } 
.main-section-more:hover { color: #fff; background-color: #00468c; } 
@media (max-width: 479px){
.main-section-more { position: absolute; top: calc(100% + 2.5rem); left: 50%; width: 23rem !important; margin: 0 !important; transform: translatex(-50%); } 
.main-section-more[data-more-text="hidden"] { padding: 1.6rem 2.4rem 1.6rem 3.2rem; gap: 2rem; flex-direction: row-reverse; aspect-ratio: unset; } 
.main-section-more[data-more-text="hidden"] > .sr-only { color: inherit; font-weight: 500; font-size: 1.6rem; all: unset; } 
.main-section-more[data-more-text="hidden"] > .sr-only > b { font-weight: 400; } 
}
.main-section-intro:before, .main-section-intro:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; } 
.main-section-intro:before { background-color: rgba(0, 0, 0, 0.3); z-index: 1; } 
.main-section-intro:after { visibility: visible; z-index: 3; } 
.main-section-intro-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: no-repeat 50% 50%/cover; opacity: 0; transition: .5s opacity; z-index: 0; } 
.main-section-intro-bg[data-status="active"] { opacity: 1; } 
.main-section-intro-bg[data-intro-value="I"] { background-image: url(/_html/images/intro/bg-i.jpg); } 
.main-section-intro-bg[data-intro-value="T"] { background-image: url(/_html/images/intro/bg-t.jpg); } 
.main-section-intro-bg[data-intro-value="V"] { background-image: url(/_html/images/intro/bg-v.jpg); } 
.main-section-intro-bg[data-intro-value="C"] { background-image: url(/_html/images/intro/bg-c.jpg); } 
.main-section-intro-desc { position: relative; font-family: "Red Hat Display"; text-align: center; z-index: 2; } 
.main-section-intro-copy { display: block; color: #fff; font-weight: 700; font-size: 3.2rem; opacity: 0; transition: .5s color, .5s opacity; } 
.main-section-intro-text { color: #fff; font-family: "Pretendard"; font-size: 2.4rem; opacity: 0; transition: .5s color, .5s opacity; } 
.main-section-intro-keypoint { position: absolute; top: 0; width: 25%; color: #fff; opacity: 0; } 
.main-section-intro-keypoint:before { content:"";width:1px;height: 200vh;position: absolute;top:50%;left:0;transform: translateY(-50%); background: #fff; opacity: 0; }
.main-section-intro-keypoint[data-intro-value="I"]:before { display: none; }
.main-section-intro-keypoint-list { position: relative; height: 20rem; margin: 1rem 0; } 
.main-section-intro-keypoint dt { color: transparent; font-weight: 900; font-size: 20rem; line-height: 1; -webkit-text-stroke: 2px #fff; } 
.main-section-intro-keypoint dd { position: absolute; top: calc(100% + 2rem); left: 50%; white-space: nowrap; transform: translatex(-50%); opacity: 0; transition: .5s top, .5s opacity; } 
[data-animation="end"] .main-section-intro-keypoint dd { opacity: .5; }
.main-section-intro-keypoint dd strong { display: block; font-weight: 700; font-size: 3.2rem; } 
.main-section-intro-keypoint dd p { font-size: 2.4rem; margin-top: 2.5rem; font-family: "Pretendard"; font-weight: 400; line-height: 140%; } 
.main-section-intro-keypoint dd span { display: inline-flex;
padding: .7rem 2rem;justify-content: center;align-items: center;gap: .5rem;border-radius:50rem;border: 1px solid rgba(255, 255, 255, 0.30);background: linear-gradient(90deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.07) 99.99%);box-shadow: .4rem .4rem 1rem 0 rgba(0, 0, 0, 0.15);backdrop-filter: blur(2.5px);margin-top:4rem;font-size:1.8rem;font-weight: 400;color:#fff;line-height: 140%; } 
.main-section-intro-keypoint[data-status="active"] dt { color: #fff !important; } 
.main-section-intro-keypoint[data-status="active"] dd { opacity: 1; } 

/* footer */
.footer { position: absolute;bottom:0;left:0;width:100%;padding-bottom:5rem;  }
.footer .layout { max-width:1720px; }
.footer .layout p { text-align: center;color:#E0E0E0;text-align: center;
font-family: "Pretendard";font-size: 1.5rem;
font-style: normal;font-weight: 400;line-height: 140%; }

/* response */
@media (min-width: 1281px){
[data-loading="complete"] .main-section-intro:before, [data-loading="complete"] .main-section-intro * { animation-duration: 2s; animation-fill-mode: forwards; } 
[data-loading="complete"] .main-section-intro:before { animation-name: introBlind; } 
[data-loading="complete"] .main-section-intro:after { visibility: hidden; transition: 0s visibility 2.5s; } 
[data-loading="complete"] .main-section-intro-copy, [data-loading="complete"] .main-section-intro-text { animation-name: introOpacity; } 
[data-loading="complete"] .main-section-intro-keypoint dt { animation-name: introKey; animation-fill-mode: unset; } 
[data-loading="complete"] .main-section-intro-keypoint[data-status="active"] dd { animation-name: introKeyActive; animation-fill-mode: unset; } 
[data-loading="complete"] .main-section-intro-keypoint[data-intro-value="I"] { animation-name: introI; } 
[data-loading="complete"] .main-section-intro-keypoint[data-intro-value="T"] { animation-name: introT; } 
[data-loading="complete"] .main-section-intro-keypoint[data-intro-value="V"] { animation-name: introV; } 
[data-loading="complete"] .main-section-intro-keypoint[data-intro-value="C"] { animation-name: introC; } 
[data-animation="end"] .main-section-intro:before, [data-animation="end"] .main-section-intro * { animation: unset; } 
[data-animation="end"] .main-section-intro:before { opacity: 0; } 
[data-animation="end"] .main-section-intro:after { visibility: hidden; } 
[data-animation="end"] .main-section-intro-copy, [data-animation="end"] .main-section-intro-text { opacity: 0; } 
[data-animation="end"] .main-section-intro-keypoint dt { color: transparent; } 
[data-animation="end"] .main-section-intro-keypoint[data-status="active"] dd { opacity: 1; } 
[data-animation="end"] .main-section-intro-keypoint[data-intro-value="I"] { top: 0; left: 0; opacity: 1; } 
[data-animation="end"] .main-section-intro-keypoint[data-intro-value="T"] { top: 0; left: 25%; opacity: 1; } 
[data-animation="end"] .main-section-intro-keypoint[data-intro-value="V"] { top: 0; right: 25%; opacity: 1; } 
[data-animation="end"] .main-section-intro-keypoint[data-intro-value="C"] { top: 0; right: 0; opacity: 1; } 
[data-animation="end"] .main-section-intro-keypoint:before { opacity: .5; }
}
@media (max-height:1720px){
.header .layout { padding:0 20px; }
.footer .layout { padding:0 20px; }
}
@media (max-width: 1280px){
.main-section-intro { height: 100vh; } 
.main-section-intro:after { visibility: hidden; } 
.main-section-intro .layout { height: 100%; padding: 0; } 
.main-section-intro-bg { top:0; width: 50%; height: 50%; opacity: 1; } 
.main-section-intro-bg[data-intro-value="T"] { left: 50%; } 
.main-section-intro-bg[data-intro-value="V"] { top: 50%; } 
.main-section-intro-bg[data-intro-value="C"] { top: 50%; left: 50%; } 
.main-section-intro-copy, .main-section-intro-text { display: none; } 
.main-section-intro-desc { position: static; } 
.main-section-intro-keypoint { display: flex; position: relative; width: 50%; height: 50vh; padding: 2rem; justify-content: center; align-items: center; opacity: 1; z-index: 2; } 
.main-section-intro-keypoint-list { display: flex; height: auto; margin: 0; flex-wrap: wrap; } 
.main-section-intro-keypoint dt { color: #fff; font-size: 17.5rem; -webkit-text-stroke-color: #fff !important; } 
.main-section-intro-keypoint dd { position: relative; top: auto; left: auto; white-space: normal; transform: unset; margin-top: 2rem; opacity: 1; } 
.main-section-intro-keypoint[data-intro-value="T"] dt { color: #fff; -webkit-text-stroke-color: #fff !important; } 
.main-section-intro-keypoint[data-intro-value="T"] dd { color: #fff; } 
}
@media (max-width: 1024px){
.header { padding-top:4rem; }
.footer { padding-bottom: 4rem; }
.main-section { min-height: 120rem; }
.main-section-intro-bg { min-height: 60rem; }
.main-section-intro-keypoint { min-height: 60rem; }
.main-section-intro-keypoint:before { display: none;}
.main-section-intro-keypoint dt { font-size: 15rem; } 
.main-section-intro-keypoint dd { opacity: 1 !important; }
}
@media (max-width: 639px){
.main-section-intro-keypoint dt { font-size: 12.5rem; } 
}

/* animation */
@keyframes introBlind { 
0% { opacity: 1; } 
100% { opacity: 0; } 
}
@keyframes introOpacity { 
0% { opacity: 0; } 
50% { opacity: 1; } 
100% { opacity: 0; } 
}
@keyframes introKey { 
0% { color: #fff; } 
50% { color: #fff; } 
100% { color: transparent; } 
}
@keyframes introKeyActive { 
0% { opacity: 0; } 
50% { opacity: 0; } 
100% { opacity: 1; } 
}
@keyframes introI { 
0% { top: 15rem; left: 20%; opacity: 0; } 
50% { top: 0; left: 20%; opacity: 1; } 
100% { top: 0; left: 0; opacity: 1; } 
}
@keyframes introT { 
0% { top: 15rem; left: 31%; opacity: 0; } 
50% { top: 0; left:31%; opacity: 1; } 
100% { top: 0; left: 25%; opacity: 1; } 
}
@keyframes introV { 
0% { top: 15rem; right:31%;  opacity: 0; } 
50% { top: 0; right: 31%;  opacity: 1; } 
100% { top: 0; right: 25%;  opacity: 1; } 
}
@keyframes introC { 
0% { top: 15rem; right: 20%; opacity: 0; } 
50% { top: 0; right: 20%; opacity: 1; } 
100% { top: 0; right: 0; opacity: 1; } 
}