.sub-visual .visual-section {background: url("../images/benner-sub01-kep.jpg") 50% 100%/cover no-repeat;}
.sub-visual .visual-section .info-box .info-tit{font-size:4.5rem;line-height: 1.2;letter-spacing: -0.08rem; color:#fff}
.sub-visual .visual-section .info-box .info-desc p{font-size:3.0rem; }
#section-02{position:relative;width:100%;min-height:100vh;overflow:hidden;display:flex;align-items:center; justify-content:center;
background:radial-gradient(circle at 15% 20%,rgba(0,132,255,.18),transparent 30%),radial-gradient(circle at 85% 80%,rgba(0,87,255,.12),transparent 35%),#050816;}
#section-02 .vision-grid-x{position:absolute; inset:0;
    background-image:
        linear-gradient(
            rgba(255,255,255,.03) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.03) 1px,
            transparent 1px
        );

    background-size:80px 80px;
    opacity:.8;}

#section-02::before{content:'';position:absolute;width:700px;height:700px;top:250px;left:300px;border-radius:50%;background:radial-gradient(circle,rgba(0,192,255,.20),transparent 70%);animation:visionGlowMoveX 10s ease-in-out infinite;}
#section-02::after {content:'';position:absolute;width:500px;height:500px;top:100px;right:250px;border-radius:50%; background:radial-gradient(circle,rgba(0,153,255,.12), transparent 70%);filter:blur(20px);animation:floatGlow 12s ease-in-out infinite;}
@keyframes floatGlow{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(50px);
    }
}







#section-02.section-pd {padding-block:25rem 16rem 30rem 16rem;}
#section-02 .section-title {padding:10rem 2.4rem 0rem 2.4rem; }
#section-02 .section-title .tit{ font-size:8.8rem;line-height: 1.2; margin-bottom:0rem;}
#section-02 .section-title .desc{color:#2172ec; }

#section-02 .business-list { grid-template-columns: repeat(1, 1fr); gap:0rem; padding:5.6rem 0rem 5rem 0rem;}
#missionText {font-size:4.5rem;font-weight:700;text-align:center; color:#fff;
    opacity: 0;
    transform: translateY(50px);
}

#missionText.show {
    animation: fadeUp 1s ease forwards;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


#section-03{position:relative;width:100%;min-height:100vh;overflow:hidden;display:flex;align-items:center; justify-content:center;
background:radial-gradient(circle at top left,rgba(0,140,255,.18),transparent 35%),radial-gradient(circle at bottom right,rgba(0,255,200,.12),transparent 35%), #050816;}
#section-03 .vision-grid-x{
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
    background-size:60px 60px;
    mask-image:linear-gradient(
        to bottom,
        transparent,
        black 15%,
        black 85%,
        transparent
    );}
#section-03::before{content:'';position:absolute;width:700px;height:700px;top:250px;left:200px;border-radius:50%;background:radial-gradient(circle,rgba(0,132,255,.20),transparent 70%);animation:visionGlowMoveX 10s ease-in-out infinite;}
#section-03::after{content:'';position:absolute;width:600px;height:600px;right:200px;bottom:250px;border-radius:50%; background:radial-gradient( circle,rgba(0,255,180,.12),transparent 70%);animation:visionGlowMoveX2 12s ease-in-out infinite;}
#section-03 .vision-text-wrap-x{width:100%;max-width:1200px;margin:5rem auto 0;text-align:center;}
#section-03 .section-title .tit{font-size:10.8rem;opacity:0;transform:translateY(70px);margin-bottom:0;line-height:1.2;}
#section-03 .section-title .desc{color:#2172ec;opacity:0;transform:translateY(40px);}
#section-03 .vision-line-x{display:block;margin:0.5rem 0;color:#fff;font-size:3.2rem;line-height:1.3;letter-spacing:-0.03em;font-weight:300;opacity:0;transform:translateY(60px);}
#section-03 .vision-line-x:first-child{margin-bottom:40px;font-size:4.8rem;font-weight:700;}
#section-03.vision-active-x .tit{animation:visionFadeUpX 1s .3s forwards;}
#section-03.vision-active-x .desc{animation:visionFadeUpX 1s .5s forwards;}
#section-03.vision-active-x .vision-line-x:nth-child(1){animation:visionLineUp 1s .8s forwards;}
#section-03.vision-active-x .vision-line-x:nth-child(2){animation:visionLineUp 1s 1.15s forwards;}
#section-03.vision-active-x .vision-line-x:nth-child(3){animation:visionLineUp 1s 1.5s forwards;}
#section-03.vision-active-x .vision-line-x:nth-child(4){animation:visionLineUp 1s 1.85s forwards;}

/* KEYFRAMES ========================================================= */

@keyframes visionFadeUpX{
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes visionLineUp{
    from{
        opacity:0;
        transform:translateY(60px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes visionGlowMoveX{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(40px);
    }
}

@keyframes visionGlowMoveX2{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-40px);
    }
}

#section-04 .section-title .desc{color:#2172ec; }

.core-grid {display:grid;grid-template-columns:repeat(4, 1fr); gap:20px; max-width:1200px; margin:auto;}
.core-card{padding:80px 20px 100px 20px;  font-size: 2.4rem; border-radius:20px; text-align:center; opacity:0;transform:translateY(80px);transition:opacity .7s ease,transform .7s cubic-bezier(.19,1,.22,1); border:1px solid #f3f3f3; background-color:#fff; }
.core-card.show{opacity:1;transform:translateY(0);}
.core-card:hover{ border:1px solid #eee; background-color:#fff;transform:translateY(-8px);box-shadow:0 15px 40px rgba(0,0,0,.08);}
.core-icon {width:10rem; height:10rem; margin:auto;margin-bottom:4rem;}
.core-icon img {width:100%;}


.history-section {position:relative;background:url("../images/sub01-kep-history.jpg") center center no-repeat;background-size:cover;background-attachment:fixed;overflow:visible;}
.history-overlay {position:absolute;inset:0;background:rgba(0, 0, 0, .45);z-index:1;}
.history-inner {position:relative;z-index:2;max-width:1100px; width:100%;display:flex;gap:60px;padding:80px 0px;}

.history-title-wrap {width:40%;position:sticky;top:170px; padding-top:10px;height:fit-content;align-self:flex-start;}
.history-title {font-size: 6.4rem;font-weight: 700;line-height: 1.4;letter-spacing: -0.128rem;color:#fff;margin-bottom: 1.2rem;}
.history-sub-title {font-size: 2.7rem;font-weight: 700;line-height: 1.29;letter-spacing: -0.048rem; color:rgba(255, 255, 255, .7); color:#2172ec; }

.history-content {width:60%;}
.history-item {display:flex;gap:60px;padding:30px 0;border-bottom:1px solid rgba(255, 255, 255, .15);}
.history-item .year {width:180px;flex-shrink:0; font-size:4.4rem;font-weight:700;line-height:1; letter-spacing: -0.1rem; color:#fff; padding-left:7.5rem}
.history-item .desc {flex:1;color:rgba(255, 255, 255, .85);flex:1; font-size:2.4rem;line-height:1.5; padding-left:7rem}

.company-info {list-style:none;padding:0;max-width:860px;margin:auto; font-size: 2.4rem;}
.company-info li {display:grid; grid-template-columns:230px 1fr;padding:2rem 5.5rem 2rem 0;border-bottom:1px solid #eee;opacity:0;transform:translateY(20px);transition:.6s;}
.company-info li.show {opacity:1;transform:translateY(0);}
.company-info strong {font-weight:600; margin-left:5.5rem}

@media screen and (max-width: 1280px) { 

}
@media screen and (max-width: 1024px) { 
 .history-inner {gap:60px;padding:120px 30px;}
.history-title {font-size:60px;}
.history-sub-title {font-size:18px;}
.history-item .year {width:70px; padding-left:1rem;}
.history-item .desc {padding-left:0rem;line-height:1.3;}
.core-grid {grid-template-columns:repeat(2, 1fr); gap:20px; max-width:1200px; width:100%; padding:0 3rem; }


}
@media screen and (max-width: 768px)  {
.sub-visual .visual-section .info-box .info-tit {font-size:3rem;line-height: 1.2; letter-spacing: -0.08rem;}
.sub-visual .visual-section .info-box .info-desc p {font-size: 2.2rem;}	
#section-02 .section-title .tit{ font-size:4.8rem; }	
#missionText {font-size:3rem;  padding:0rem 4rem;}

#section-03{padding:3rem;}
#section-03 .vision-line-x{line-height:1.2;}
#section-03 .vision-text-wrap-x{margin-top:3rem;}
#section-03 .section-title .tit{font-size:5.2rem;  }
#section-03 .section-title .desc{ color:#2172ec;}
#section-03 .vision-line-x{margin:0.3rem 0;font-size:2.3rem;line-height:1.3;}
#section-03 .vision-line-x:first-child{margin-bottom:30px;font-size:3rem; }

.core-grid {grid-template-columns:repeat(1, 1fr); gap:20px; max-width:1200px; width:100%; padding:0 3rem; }
.core-card{padding:40px 0px 50px 0px;  }
 
.history-section {background-attachment:scroll;}
.history-inner {flex-direction:column;gap:40px;padding:80px 20px;}
.history-title-wrap {width:100%;position:relative;top:auto;}
.history-content {width:100%;}
.history-title {font-size:42px;margin-bottom:10px;}
.history-sub-title {font-size:15px;}
.history-item { gap:20px;padding:1.5rem 0;}
.history-item .year {width:70px; font-size:2.5rem; padding-left:1rem;}
.history-item .desc {font-size:1.8rem; padding-left:0rem;line-height:1.3;}

.section-content{ padding:0 3rem}
.company-info {  max-width:760px; width:100%;  font-size:1.8rem;letter-spacing:-0.03em; }
.company-info li {grid-template-columns:100px 1fr;padding:1.2rem 0rem 1.2rem 0; font-size:1.8rem;}
.company-info strong { margin-left:0em}
}