/* bootstrap & fonts */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");
@font-face { font-family: 'hufs_L'; src: url('https://dep.hufs.ac.kr/Web-home/_UI/font/hufs/hufs_L.eot'); src: url('https://dep.hufs.ac.kr/Web-home/_UI/font/hufs/hufs_L.eot?#iefix') format('embedded-opentype'), url('https://dep.hufs.ac.kr/Web-home/_UI/font/hufs/hufs_L.woff') format('woff'), url('https://dep.hufs.ac.kr/Web-home/_UI/font/hufs/hufs_L.woff2') format('woff2'); }
@font-face { font-family: 'hufs_M'; src: url('https://dep.hufs.ac.kr/Web-home/_UI/font/hufs/hufs_M.eot'); src: url('https://dep.hufs.ac.kr/Web-home/_UI/font/hufs/hufs_M.eot?#iefix') format('embedded-opentype'), url('https://dep.hufs.ac.kr/Web-home/_UI/font/hufs/hufs_M.woff') format('woff'), url('https://dep.hufs.ac.kr/Web-home/_UI/font/hufs/hufs_M.woff2') format('woff2'); }
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&display=swap');


/* common */
body { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif; font-size: 16px; background-color: var(--navy); margin: 0; padding: 0; }

:root { 
  --navy: #002d56; 
  --glass-bg: rgba(255, 255, 255, 0.04); --glass-border: rgba(255, 255, 255, 0.15); --glass-hover-bg: rgba(255, 255, 255, 0.12); --glass-hover-border: rgba(255, 255, 255, 0.4); 
}

.contain { margin: 0 auto; padding: 0 40px; width: 100%; box-sizing: border-box; }
.text-nowrap { white-space: nowrap !important; }
.text-white { color: #fff !important; }

/* Typography */
.display01 { font-size: 64px !important; font-family: hufs!important; line-height: 1.1; letter-spacing: -1px; font-weight:400;}
.display02 { font-size: 32px !important; font-family: hufs!important;font-weight:400!important;}
.text-xl { font-size: 22px !important; }
.text-lg { font-size: 17px !important; }

@media screen and (max-width:1024px) {
  .display01 { font-size: 48px !important; }
  .display02 { font-size: 28px !important; }
  .text-xl { font-size: 20px !important; }
  .text-lg { font-size: 15px !important; }
}

/* Base Structure */
.intro { display: flex; width: 100%; max-width: 100vw; min-height: 100vh; overflow: hidden; background: radial-gradient(circle at 100% 0%, rgba(20, 50, 90, 1) 0%, var(--navy) 60%); }
.intro > div:nth-of-type(1) { flex: 1.5; }
.intro > div:nth-of-type(2) { flex: 1; }

/* Left Side: Message Wrap */
.intro .message-wrap { position: relative; display: flex; justify-content: center; align-items: center; text-align: center; overflow: hidden; }
.intro .message-wrap::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/bg-message.png) no-repeat center/80% auto; opacity: 0.3; mix-blend-mode: color-dodge; /*animation: scaleBg 20s infinite alternate ease-in-out;*/ }
.intro .message-wrap .logo {position: absolute;top: 20px;left: 20px;max-width: 180px; filter: brightness(0) invert(1);}
.intro .message-wrap .contain > * { position: relative; z-index: 2; opacity: 0; animation: fadeUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.intro .message-wrap .contain > *:nth-child(1) { animation-delay: 0.2s; }
.intro .message-wrap .contain > *:nth-child(2) { animation-delay: 0.4s; }
.intro .message-wrap .contain > *:nth-child(3) { animation-delay: 0.6s; }

.intro .message-wrap h1 {margin: 24px 0 4px;}
.intro .message-wrap .text-from { display: block; font-family: 'hufs_M' !important;letter-spacing: 0.5px; color: rgb(255 255 255 / 100%) !important;}

.intro .message-wrap .btn-wrap { display: flex; justify-content: center; gap: 16px; margin-top: 60px; }
.intro .message-wrap .btn-wrap > a { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--glass-bg); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50px; color: rgba(255,255,255,0.9); text-decoration: none; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.intro .message-wrap .btn-wrap > a > * {line-height: 1;}
.intro .message-wrap .btn-wrap > a i { font-size: 1.2rem; transition: transform 0.4s ease; }
.intro .message-wrap .btn-wrap > a:hover { background: #fff; color: var(--navy); transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.25); border-color: #fff; }
.intro .message-wrap .btn-wrap > a:hover i { transform: translateX(4px); }

.intro .message-wrap .copyright { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); text-align: center; font-size: 13px; font-weight: 300; opacity: 0.6; line-height: 1.6; z-index: 2; width: 100%; }

/* Right Side: Link Wrap */
.intro .link-wrap { display: flex; flex-direction: column; border-left: 1px solid rgba(255,255,255,0.6); }
.intro .link-wrap > a { flex: 1; display: flex; align-items: center; position: relative; padding: 40px; color: #fff; text-decoration: none; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,0.6); }
.intro .link-wrap > a:last-child { border-bottom: none; }

/* Background Images with Ken Burns Effect */
.intro .link-wrap > a .bg-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;mix-blend-mode: overlay; opacity: 0.5; transition: transform 1.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.8s ease; }
.intro .link-wrap > a:nth-child(1) .bg-img { background: url(../images/bg1.jpg) no-repeat center/cover; }
.intro .link-wrap > a:nth-child(2) .bg-img { background: url(../images/bg2.jpg) no-repeat center/cover; }
.intro .link-wrap > a:nth-child(3) .bg-img { background: url(../images/bg3.jpg) no-repeat center/cover; }

/* Glassmorphism Inner Card */
.intro .link-wrap > a .inner { display: flex; flex-direction: column; align-items: flex-start; position: relative; z-index: 2; padding: 40px; border-radius: 20px; background: var(--glass-bg); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid var(--glass-border); transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); width: 100%; box-sizing: border-box; opacity: 0; animation: fadeUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.intro .link-wrap > a:nth-child(1) .inner { animation-delay: 0.3s; }
.intro .link-wrap > a:nth-child(2) .inner { animation-delay: 0.5s; }
.intro .link-wrap > a:nth-child(3) .inner { animation-delay: 0.7s; }

/* Inner Content Styling */
.intro .link-wrap .link-tit { display: flex; align-items: center; line-height: 1; margin-bottom: 12px; }
.intro .link-wrap .link-tit span:nth-of-type(1) { display: flex; align-items: center; font-weight: bold; letter-spacing: 1px; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.intro .link-wrap .link-tit span:nth-of-type(1)::after { content: ''; display: block; margin: 0 20px; width: 1px; height: 26px; background: rgba(255,255,255,0.4); }
.intro .link-wrap .link-tit span:nth-of-type(2) { font-weight: 500; opacity: 0.95; }
.intro .link-wrap .inner > .text-lg { color: rgba(255,255,255,0.75); font-weight: 300; }

.intro .link-wrap .btn-arrow { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 36px; padding: 10px 24px; border: 1px solid rgba(255,255,255,0.3); border-radius: 50px; background: transparent; font-weight: 300; transition: all 0.4s ease; }
.intro .link-wrap .btn-arrow i { font-size: 24px; line-height: 1; transition: transform 0.4s ease; }

/* Hover States for Link Cards */
.intro .link-wrap > a:hover .bg-img { transform: scale(1.08); opacity: 0.65; }
.intro .link-wrap > a:hover .inner { background: var(--glass-hover-bg); border-color: var(--glass-hover-border); transform: translateX(12px); box-shadow: 0 20px 40px rgba(0,0,0,0.3); }
.intro .link-wrap > a:hover .btn-arrow { background: #fff; color: var(--navy); border-color: #fff; }
.intro .link-wrap > a:hover .btn-arrow i { transform: translateX(6px); }

/* Keyframes */
@keyframes fadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
/* @keyframes scaleBg { from { transform: scale(1); } to { transform: scale(1.15); } } */

@media screen and (min-width: 1025px) {
 .intro { height: 100vh; } 
 .intro .link-wrap { display: flex; flex-direction: column; height: 100vh; } 
 .intro .link-wrap > a { flex: 0 0 33.3333%; height: 33.3333%; display: flex; align-items: center; justify-content: center; padding: 24px 40px; box-sizing: border-box; } 
 .intro .link-wrap > a .inner { width: 100%; max-width: 520px; padding: 34px 40px; box-sizing: border-box; min-height: 210px; } 
}

@media screen and (max-width:1024px) {
  .intro { flex-direction: column; }
  .intro .message-wrap { min-height: 60vh; padding: 80px 0; }
  .intro .message-wrap::before { background: url(../images/bg-message.png) no-repeat top center/80% auto; }
  .intro .message-wrap .btn-wrap { margin-top: 40px; }
  .intro .link-wrap { border-left: none; border-top: 1px solid rgba(255,255,255,0.6); }
  .intro .link-wrap > a {border-bottom: 1px solid rgba(255,255,255,0.6); }
  .intro .link-wrap > a .inner { padding: 30px; border-radius: 16px; }
  .intro .link-wrap > a:hover .inner { transform: translateY(-5px) translateX(0); }
}