@charset "UTF-8";

/* 공통 */
html {overflow-x:hidden; overflow-y: auto;}
body {overflow:hidden; touch-action: pan-y; 
/*
 overscroll-behavior:none; 
 260205 2번째 섹션 스크롤 안되는 원인*/
}
.tab-anchor {overflow: hidden; position: fixed; top: -9999px; left: -9999px; width: 1px; height: 1px;}

/* 애니메이션 */
@keyframes scrollArrow {
    0% { opacity:0;}
    50% {opacity:1;}
    100% {opacity:0;}
}

@keyframes flow-right {
    0% {transform: translateX(-50%);}
    100% {transform: translateX(0%);}
}

img,
svg path,
svg circle{ transition:all 0.3s; }
svg{ width: 100%; height: 100%; }

/* 인트로 */
:root { --bg-color: #061343; --box-w: 32.96vw; --box-h: 5.625vw; --logo-w: 5.2vw; --logo-h: 5.625vw; }
.intro { position: fixed; display: flex; justify-content: center; align-items: center; z-index: 10000; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.intro-effect { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--bg-color); will-change: mask-size, -webkit-mask-size, mask-position, -webkit-mask-position; transition: opacity 0.5s; --mask-img: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 108"><path d="M66.1 72.8C61.5 79.3 56.1 85.1 49.7 90.4C28.2 72.8 17.1 48.8 14.7 15H23.4C23.1 10.3 22.9 5.3 22.9 0H0C0 5.2 0.2 10.2 0.5 15C3.2 55.9 17.8 86.3 49.7 108C59.7 101.2 68 93.5 74.7 85C72.2 82.1 69.3 78.6 66.1 72.8Z" fill="black"/><path d="M78 44.2C81.4 35.9 83.6 26.3 84.5 15C84.9 10.3 85.1 5.3 85.1 0H99.3C99.3 32.6 93 59.2 78 80.5C74.8 76.9 72 72.5 69.6 67.6C66.9 62.1 64.6 56.1 62.8 49.5C59.5 57.6 55.1 64.6 49.7 70.9C37.4 57 30.8 39.1 28.9 15C28.6 10.2 28.4 5.3 28.4 0H42.5C42.5 5.3 42.7 10.3 43.1 15C44.1 26.3 46.2 35.9 49.6 44.2C53 35.9 55.2 26.3 56.1 15C56.5 10.3 56.7 5.3 56.7 0H70.9C70.9 5.3 71.1 10.3 71.5 15C72.5 26.3 74.6 35.9 78 44.2Z" fill="black"/></svg>'); mask-image: var(--mask-img), linear-gradient(#fff, #fff); mask-repeat: no-repeat, no-repeat; mask-size: var(--logo-w) var(--logo-h), 100% 100%; mask-composite: add; -webkit-mask-image: var(--mask-img), linear-gradient(#fff, #fff); -webkit-mask-repeat: no-repeat, no-repeat; -webkit-mask-size: var(--logo-w) var(--logo-h), 100% 100%; -webkit-mask-composite: source-over; mask-position: calc(50% - (var(--box-w) - var(--logo-w)) / 2) center, center; -webkit-mask-position: calc(50% - (var(--box-w) - var(--logo-w)) / 2) center, center; }
.intro-wrap { position: relative; width: 100%; height: 100%; opacity: 1;}
/* .intro.active .intro-wrap {opacity: 1;} */
.intro-text { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); width: var(--box-w); height: var(--box-h); opacity: 0; transition: opacity 0.5s; }
.intro-text svg { width: 100%; height: 100%; display: block; }
.intro-logo { position: absolute; z-index: 3; top: 50%; left: 50%; width: var(--box-w); height: var(--box-h); transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center; }
.intro-logo svg { width: var(--logo-w); height: auto; opacity: 0; will-change: transform; transform: translateX(calc((var(--box-w) - var(--logo-w)) / -2)); transition: transform 2.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s; }
.intro.active .intro-text { opacity: 1; }
.intro.active .intro-wrap.active .intro-text{opacity: 0; visibility: hidden;}
.intro.active .intro-wrap.active .intro-logo svg { opacity: 1;}
.intro.active .intro-wrap.active .intro-logo.move svg {transform: translateX(0); }
.intro.active .intro-effect { mask-position: 50% center, center; -webkit-mask-position: 50% center, center; transition: mask-position 2.5s cubic-bezier(0.25, 1, 0.5, 1), -webkit-mask-position 2.5s cubic-bezier(0.25, 1, 0.5, 1); }
.intro.punch .intro-logo { opacity: 0; transition: opacity 0.2s; }
.intro.punch .intro-effect { mask-composite: exclude; -webkit-mask-composite: destination-out; mask-position: 50% center; -webkit-mask-position: 50% center; mask-size: 600vw 600vw, 100% 100%; -webkit-mask-size: 600vw 600vw, 100% 100%; transition: mask-size 1.2s cubic-bezier(0.7, 0, 0.3, 1), -webkit-mask-size 1.2s cubic-bezier(0.7, 0, 0.3, 1); }
.intro.off .intro-effect { opacity: 0; transition: opacity 0.5s;}

/* main-cover */
.inner{display:block; overflow: visible; position:relative;}
.main-cover{display:flex; overflow:hidden; align-items:center; justify-items:center; position:fixed; z-index:5; top:0; left:0; width:100%; height:calc(var(--vh, 1vh) * 100); opacity:1;}
.main-cover.active.disabled{opacity:0; pointer-events:none;}
.main-cover .con{display:flex; flex-direction:column; align-items:center; z-index:2; width:100%; gap:6.5rem; text-align:center;}
.main-cover .tit{display:flex; flex-direction:column; width:100%; transform:translate3d(0, -80px, 0); opacity:0; will-change: transform, opacity; transition:transform 1s ease, opacity 1s ease;}
.main-cover .tit > span{color:#fff; line-height:1.4; word-break:keep-all; text-align:center; text-shadow: 0px 6px 6px rgba(0, 0, 0, 0.3);}
.main-cover .tit > span br{display:none;}
.main-cover .tit > span:nth-child(1){font-size:4rem; font-weight:800;}
.main-cover .tit > span:nth-child(2){font-size:3rem;}
.main-cover .tit  + .scroll {margin-top: 0;}
.main-cover .scroll {display: flex;position: absolute;right: 2.5rem;bottom: 2.5rem;z-index: 5;align-items: center;justify-content: center;opacity:0;transition: transform 1s ease, opacity 1s ease;margin-top: 20vh;}
.main-cover .scroll:before {content:"";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background: url(../images/scroll_down1.png) no-repeat center;width: 23px;height: 33px;}
.main-cover .scroll .img {width: 5.9rem;height: 5.9rem;transform-origin: center;animation: rotateC 5s linear infinite;}
.main-cover .scroll .img img {max-width:100%; width:100%; height:100%;}
@keyframes rotateC {0% {transform: rotate(0)}100% {transform: rotate(360deg)}}

.main-cover .video{display:flex; align-items:center; justify-content:center; position:absolute; z-index:1; top:0; left:0; width:100%; height:100%; clip-path:inset(0% 0% 0% 0%); will-change: clip-path; transition: clip-path 0.8s cubic-bezier(0.4, 0, 0.2, 1);}
.inner.disabled .main-cover .video{clip-path:inset(50% 50% 50% 50%);}
.main-cover .video > video{position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; pointer-events:none;}
.main-cover .video .video-overlay{display: none !important;}
/* active */
.inner.active .main-cover .tit{transform:translate3d(0, 0px, 0); opacity:1;}
.inner.active .main-cover .scroll {opacity:1;}
/* disabled */
.inner.active.disabled .main-cover .tit{opacity:0; transform:translate3d(0, -20px, 0); transition: opacity 0.5s ease, transform 0.5s ease;}
.inner.active.disabled .main-cover .scroll {opacity: 0; transition: opacity 0.5s ease, transform 0.5s ease;}

/* main-con */
.main-con{position:relative;}
.main-con .fake .fake-item{height:calc(var(--vh, 1vh) * 100); opacity:0; will-change:height, opacity;  transition:height 1s ease, opacity 1s ease;}
.main-con .campus{display:flex; position:relative; justify-content:center; align-items:center; width:100%; height:calc(var(--vh, 1vh) * 100); font-size:0; line-height:0; text-align:center;}
.main-con .campus:before{display:block;position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;background:url(../images/campus_bg.png) no-repeat center / 100% 100%;content:'';background-size: cover;opacity:0;transition:opacity 0.5s ease;}
.main-con .campus .M_link:after{display:block;position:absolute;z-index:1;top: -9.5rem;left: -7.3rem;width: 15.65rem;height: 17.15rem;background:url(../images/logo.png) no-repeat center / 100% 100%;content:'';background-size: contain;opacity:0;transition:opacity 0.5s ease;z-index: -1;}
.inner.disabled .main-con .campus:before{opacity:1;}
.inner.disabled .main-con .campus .M_link:after{opacity:1;}
.main-con .M_link{display:inline-flex;max-width: 75rem;width: 100%;align-items:center;position:relative;z-index:5;gap: 1rem;}
.main-con .M_link li{position:relative;margin-top:0rem;transition:margin-top 0.5s ease, transform 0.5s ease;}
.main-con .M_link li a{display:block;overflow:hidden;position:relative;aspect-ratio: 3 / 4;max-width:100%;width: 18rem;border-radius:1.5rem;border-bottom-right-radius:0;}
.main-con .M_link .img{display:flex;position:absolute;align-items:center;justify-content:center;z-index:1;top:0;left:0;width:100%;height:100%;-webkit-mask: url(../images/mark_img.png) no-repeat center / 100% 100%;mask: url(../images/mark_img.png) no-repeat center / 100% 100%;mask-size: contain;}
.main-con .M_link .img:before{display:block; position:absolute; z-index:1; top:0; left:0; width:100%; height:100%; background:linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 100%); content:''; opacity:1; transition:opacity 0.4s ease;}
.main-con .M_link .img > img{position:relative; width:100%; height:100%; object-fit:cover;}
.main-con .M_link .txt{display:flex; flex-direction:column; align-items:center; position:relative; z-index:1; width:100%; height:100%; padding:3rem 0.5rem; gap:0.5rem;}
.main-con .M_link .txt > span{display:block; font-size:1.4rem; color:#fff; line-height:1.2; font-weight:600;}
.main-con .M_link .more{display:flex; align-items:center; justify-content:center; position:absolute; z-index:2; bottom:0; right:0; border:1px solid #01143F; border-radius:100%; background:#fff; width:3rem; height:3rem; transition:background 0.4s ease;}
.main-con .M_link .more > img{display:flex; align-items:center; justify-content:center; width:15px; height:15px;}
.main-con .eng-bg-container{display:flex; overflow:hidden; position:absolute; z-index:1; width:100%; bottom:-0.5rem;}
.main-con .eng-bg {display:flex; white-space:nowrap; will-change:transform;}
.main-con .eng-bg span{display:inline-block; padding-right:50px; font-size:7.5rem; color:rgba(0, 62, 138, 0.05); line-height:1.5; font-weight:700; white-space:nowrap;}
/* hover, focus */
.main-con .M_link li a:focus-visible{outline-offset:0.3rem;}
.main-con .M_link li a:hover .img:before,
.main-con .M_link li a:focus .img:before{opacity:0;}
.main-con .M_link li a:hover .more,
.main-con .M_link li a:focus .more{background:#01143F;}
.main-con .M_link li a:hover .more img,
.main-con .M_link li a:focus .more img{filter:brightness(0) invert(1);}
.main-con .M_link li a:hover .txt > span,
.main-con .M_link li a:focus .txt > span{text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4);}
/* active */
.inner.active .main-con .M_link li:hover,
.inner.active .main-con .M_link li:focus{margin-top:-30vh;}
.inner.active .main-con .fake .fake-item{height:calc(var(--vh, 1vh) * 64); opacity:1;}
/* .inner.active .main-con .M_link li a{pointer-events:none; cursor:default;} 260223 포인트커서 활성*/
/* disabled */
.inner.disabled .main-con .M_link li:hover,
.inner.disabled .main-con .M_link li:focus{margin-top:0 !important;}
.inner.disabled .main-con .M_link li a {pointer-events:auto; cursor:pointer;}
.inner.disabled .main-con .M_link li:nth-child(2){margin-top:0rem;}
.inner.disabled .main-con .M_link li:nth-child(3){margin-top:0rem;}

@media screen and (min-width: 1921px) {
    .inner.active .main-con .fake .fake-item {height: calc(var(--vh, 1vh) * 59);}
}
@media screen and (max-width:1800px) {
.main-cover .scroll {margin-top:30vh;display: none;}/* 260224 모바일 삭제 */
}
@media screen and (max-width:1640px) {
    .main-cover .con{gap:6rem;}
    .main-cover .tit > span:nth-child(1){font-size:3.5rem;}
    .main-cover .tit > span:nth-child(2){font-size:2.5rem;}
    .main-con .eng-bg-container{bottom:0;}
    .main-con .eng-bg span{font-size:6.5rem;}

        
}

@media screen and (max-width:1540px) {
    .main-con .campus{padding:0 2rem; width:100%;}
    .main-con .M_link{width:100%;}
    .inner.active .main-con .fake .fake-item{height:calc(var(--vh, 1vh) * 63);}
    .main-con .M_link li{flex:1; min-width:0;}
    .main-con .M_link .txt{padding:4vw 0.5rem;}
    .main-con .M_link .more{width: 3.7vw;height: 3.7vw;}
    .main-con .M_link .more > img{width:1.2vw; height:1.2vw;}
    .main-con .eng-bg span{font-size:6rem;}
    
}

@media screen and (max-width:1240px) {
    .main-cover .tit > span:nth-child(1){font-size:3rem;}
    .main-cover .tit > span:nth-child(2){font-size:2.2rem;}
    .main-cover .con{gap:5rem;}
    

}

@media screen and (max-width:1024px) {
    .main-cover .tit > span:nth-child(1){font-size:2.5rem;}
    .main-cover .tit > span:nth-child(2){font-size:2rem;}
    .main-cover .con{gap:9vw;}
    .main-con .campus{padding:0 1.2rem;}
    .main-con .M_link .txt > span{font-size:1.3rem;}
    .main-con .eng-bg span{padding-right:40px; font-size:5rem;}
    .inner.active .main-con .fake .fake-item{height:calc(var(--vh, 1vh) * 59);}
}

@media screen and (max-width:860px) {
    .main-con .M_link .txt > span{font-size:1.15rem;}
    .inner.active .main-con .fake .fake-item{height:calc(var(--vh, 1vh) * 56);}
}

@media screen and (max-width:768px) {
    .main-cover .tit > span:nth-child(1){font-size:2.2rem;}
    .main-cover .tit > span:nth-child(2){font-size:1.7rem;}
    .main-con .eng-bg span{padding-right:30px; font-size:4.5rem;}
    .main-cover .con{gap:12vw;}
    .main-cover .scroll {margin-top:30vh;display: none;}/* 260224 모바일 삭제 */
    .main-con .M_link{align-items:flex-start;flex-wrap:wrap;max-width:26rem;gap:5vw;padding-bottom: 30vw;}
    .main-con .M_link li{flex:unset; min-width:0; width:calc((100% - 5vw) / 2);}
    .main-con .M_link li:nth-child(2){transform:translateY(0);}
    .main-con .M_link .txt{padding:1.7rem 0.5rem;}
    .main-con .M_link .more{width: 2rem;height: 2rem;}
    .main-con .M_link .more > img{width:9px; height:9px;}
    .main-con .eng-bg span{font-size:3.5rem;}
    .inner.active .main-con .M_link li:hover,
    .inner.active .main-con .M_link li:focus{margin-top:-4rem;}
    .main-con .campus .M_link:after {top: -7.5rem;left: -1rem;width: 9.65rem;height: 11.15rem;}
    .inner.active .main-con .fake .fake-item{height:calc(var(--vh, 1vh) * 70);}
    .inner .main-con .M_link li:nth-child(2n){transform:translateY(3rem);}/* 260224 첫번째 페이지에서부터 */

        
}

@media screen and (max-width:640px) {
    /* 모바일 로고 크기 수정 260205 */
:root {
        --box-w: 70vw;   
        --box-h: 12vw;     
        --logo-w: 11vw;
        --logo-h: 12vw;
    }
}

@media screen and (max-width:480px) {
    .main-con .campus{padding:0 1rem;}
    .main-con .M_link{max-width:100%; gap:1.5rem 4.4vw;}
    .main-con .M_link li{width:calc((100% - 4.4vw) / 2);}
    .main-con .M_link .txt{padding:1.5rem 0.5rem;}
    .main-con .M_link .txt > span{font-size:1rem;}
    .main-cover .tit > span br{display:block;}
    .main-cover .tit > span:nth-child(1){font-size:2rem;}
    .main-cover .tit > span:nth-child(2){margin-top:0.3rem; font-size:1.3rem;}
    .main-con .eng-bg span{padding-right:20px; font-size:3rem;}
    .inner.active .main-con .M_link li:hover,
    .inner.active .main-con .M_link li:focus{margin-top:-3rem;}
}

@media screen and (max-width:420px) {
    .main-con .M_link li a{height:58vw;}
    .main-con .M_link .more{width:7vw; height:7vw;}
    .main-con .M_link .more > img{width:9px; height:9px;}
}
@media screen and (max-width:380px) {
.main-con .campus .M_link::after{display: none;}
}
@media screen and (max-width:360px) {
    .main-cover .tit > span:nth-child(1){font-size:1.8rem;}
    .main-cover .tit > span:nth-child(2){font-size:1.1rem;}
    .inner.active .main-con .fake .fake-item{height:calc(var(--vh, 1vh) * 65);}
}

@media screen and (max-width:320px) {
    .main-con .campus:before{display:none;}
    
    .main-con .M_link{flex-direction:column;gap:1rem;padding-bottom: 0;}
    .main-con .M_link li{width:100%; transition:none;}
    .main-con .M_link li:nth-child(2){margin-top:0; transform:none;}
    .main-con .M_link li a{height:6rem; border-radius:1.2rem; border-bottom-right-radius:0;}
    .main-con .M_link .img{-webkit-mask:none; mask:none;}
    .main-con .M_link .btns{position:absolute; z-index:1; bottom:0; right:0; width:35px; height:35px; background:#fff; border-top-left-radius:15px;}
    .main-con .M_link .btns:before,
    .main-con .M_link .btns:after{display:block; position:absolute; width:12px; height:12px; border-radius:0 0 12px 0; box-shadow:12px 12px 0 12px #fff; content:'';}
    .main-con .M_link .btns:before{bottom:0; left:-12px;}
    .main-con .M_link .btns:after{top:-12px; right:0;}
    .main-con .M_link .more{width:25px; height:25px;}
    .main-con .eng-bg span{padding-right:15px; font-size:2.5rem;}
    .inner.active .main-con .M_link li:hover,
    .inner.active .main-con .M_link li:focus{margin-top:0;}
    .inner.disabled .main-con .M_link li:nth-child(2n){transform:translateY(0);}

}