@charset "utf-8";

@font-face {
    font-family: 'Pretendard';
    src: url('./font/Pretendard-Light.woff2') format('woff2'),
         url('./font/Pretendard-Light.woff') format('woff');;
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('./font/Pretendard-Regular.woff2') format('woff2'),
         url('./font/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('./font/Pretendard-Medium.woff2') format('woff2'),
         url('./font/Pretendard-Medium.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('./font/Pretendard-SemiBold.woff2') format('woff2'),
         url('./font/Pretendard-SemiBold.woff') format('woff');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('./font/Pretendard-Bold.woff2') format('woff2'),
         url('./font/Pretendard-Bold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('./font/Pretendard-Black.woff2') format('woff2'),
        url('./font/Pretendard-Black.woff') format('woff');
    font-weight: 900;
    font-display: swap;
}

:root {
  --pri-color: #1A6CA4;     /* 메인 색상 */
  --sec-color: #7C736D;     /* 서브 색상 */
  --ter-color: #6A7A8B;     /* 서브 색상 */
  --qua-color: #E5D9CA;     /* 서브 색상 */
  --text-dark: #333333;     /* 기본 텍스트 색상 */
  --bg-light: #f4f4f4;      /* 배경 색상 */
}

tml, body{height:100%; min-height:100vh; background:linear-gradient(-45deg, #0f1629, #1c2b3e, #0a1128, #162842); background-size:400% 400%; color:#222; overflow:hidden; animation:gradientFlow 10s ease infinite;}
*{margin:0; padding:0; color:#222; font-family:'Pretendard';}
li{list-style:none;}
a{text-decoration:none;}
button{border:none; background:transparent; cursor:pointer;}
em, i{font-style:normal;}
*{box-sizing:border-box;}

.intro-container{width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; padding: 0 20px;}
.intro-container:before,
.intro-container:after{content:''; position:fixed; border-radius:50%; filter:blur(90px); z-index:-1; animation:floatOrb 10s ease-in-out infinite alternate;}
.intro-container:before{width:50vw; height:50vw; max-width:600px; max-height:600px; background:rgba(32, 145, 209, 0.35); top:-10vw; left:-10vw;}
.intro-container:after{width:60vw; height:60vw; max-width:700px; max-height:700px; background:rgba(138, 124, 255, 0.20); bottom:-15vw; right:-10vw; animation-delay:-5s;}
.intro-inner{width:100%;max-width:600px;background-color:white;border-radius:16px;padding:50px 50px;}
.intro-inner h1{ font-size: 32px; font-weight: 700; text-align: center; margin-bottom: 32px; color: var(--pri-color);}
.intro-inner ul.d1{width: 100%; display: flex; justify-content: space-between; flex-direction: column; }
.intro-inner ul.d1 li.d1{position: relative; width: 100%; margin-bottom: 20px; background-color: white; border: 3px solid #e1e1e1; border-radius: 12px; height: 120px; transition: transform 0.3s ease;}
.intro-inner ul.d1 li.d1::before{content: ''; position: absolute; top: -3px; left: -3px; right: -3px; bottom: -3px; border-radius: 12px; background: linear-gradient(135deg, #2091d1, #1A6CA4 45%, transparent 50%); background-size: 220% 220%; background-position: 100% 100%; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 3px; opacity: 0; transition: opacity 0.8s ease, background-position 0.8s ease; pointer-events: none;}
.intro-inner ul.d1 li.d1:hover::before{opacity: 1; background-position: 0% 0%;}
.d1 a{display:flex;justify-content:space-between;align-items:center;padding:30px 40px 30px 30px;width:100%;height:100%;transition:all .2s ease-in;}
.d1 a:hover{padding:30px 30px 30px 30px;}
.d1 a span{font-size:24px;font-weight:700;color:var(--text-dark)}
.d1 a i{width:30px;}
.d1 a i img{width:100%;height:auto;}