/* ---------------------------------------------------------
   0. COMPANY PAGE TOKENS
--------------------------------------------------------- */
.about-page{
    --about-navy:#071a35;
    --about-blue:#1769c2;
    --about-blue2:#2d8ff0;
    --about-sky:#eaf4ff;
    --about-line:#dce6f1;
    --about-text:#162238;
    --about-sub:#607089;
    --about-white:#fff;
    --about-radius:22px;
    --about-shadow:0 22px 60px rgba(7,26,53,.12);
    --about-shadow-hover:0 30px 80px rgba(7,26,53,.18);
}

.about-page,
.about-page *{
    box-sizing:border-box;
}

.about-page .area{
    width:min(1440px,92vw);
    margin:0 auto;
}

.about-page img{
    display:block;
}

/* ---------------------------------------------------------
   1. TOP / COMPANY INTRO
--------------------------------------------------------- */
.about-page .about-top-con{
    position:relative;
    padding:118px 0 100px;
    background:#fff;
    overflow:hidden;
}

.about-page .about-top-con:before{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    right:-260px;
    top:80px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(45,143,240,.10),rgba(45,143,240,0) 68%);
    pointer-events:none;
}

.about-page .about-top-con .area{
    position:relative;
    z-index:1;
}

/* breadcrumb */
.about-page .location{
    margin-bottom:34px;
}

.about-page .location ul{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:0;
}

.about-page .location li{
    position:relative;
    display:flex;
    align-items:center;
    color:#8592a5;
    font-size:12px;
    font-weight:700;
    letter-spacing:.7px;
}

.about-page .location li:not(:last-child):after{
    content:"\f105";
    margin:0 13px;
    font-family:"Font Awesome 7 Pro";
    font-weight:900;
    color:#b9c4d1;
}

.about-page .location li:first-child a{
    color:var(--about-blue);
}

.about-page .location li:first-child a:before{
    content:"\f015";
    margin-right:6px;
    font-family:"Font Awesome 7 Pro";
    font-weight:900;
}

/* intro 2-column */
.about-page .top-box-wrap{
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
    align-items:stretch;
    gap:clamp(34px,4vw,72px);
}

.about-page .top-left-box{
    position:relative;
}

.about-page .video-iframe-wrapper{
    position:relative;
    width:100%;
    aspect-ratio:16/10;
    min-height:420px;
    overflow:hidden;
    border-radius:var(--about-radius);
    background:#06162b;
    box-shadow:var(--about-shadow);
}

.about-page .video-iframe-wrapper:before{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    background:
        linear-gradient(135deg,rgba(6,22,43,.06),rgba(6,22,43,.42)),
        linear-gradient(180deg,transparent 55%,rgba(0,0,0,.32));
    pointer-events:none;
}

.about-page .video-iframe-wrapper:after{
    content:"\f03d";
    position:absolute;
    left:28px;
    bottom:25px;
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    border:1px solid rgba(255,255,255,.30);
    border-radius:50%;
    background:rgba(5,24,48,.48);
    backdrop-filter:blur(8px);
    color:#fff;
    font-family:"Font Awesome 7 Pro";
    font-weight:900;
    font-size:15px;
}

.about-page .video-iframe-wrapper video{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .8s cubic-bezier(.2,.65,.2,1);
}

.about-page .video-iframe-wrapper:hover video{
    transform:scale(1.025);
}

/* intro copy */
.about-page .top-right-box{
    display:flex;
    align-items:center;
}

.about-page .right-list{
    position:relative;
    width:100%;
    margin:0;
    padding:clamp(38px,4vw,66px);
    overflow:hidden;
    border-radius:var(--about-radius);
    background:
        radial-gradient(circle at 100% 0,rgba(45,143,240,.30),transparent 36%),
        linear-gradient(145deg,#071a35 0%,#0b2e59 100%);
    box-shadow:var(--about-shadow);
    color:#fff;
}

.about-page .right-list:before{
    content:"";
    position:absolute;
    right:-80px;
    bottom:-100px;
    width:280px;
    height:280px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:50%;
    box-shadow:0 0 0 35px rgba(255,255,255,.025),0 0 0 70px rgba(255,255,255,.018);
}

.about-page .right-list:after{
    content:"\f201";
    position:absolute;
    right:36px;
    top:32px;
    color:rgba(255,255,255,.12);
    font-family:"Font Awesome 7 Pro";
    font-weight:900;
    font-size:72px;
}

.about-page .right-list li{
    position:relative;
    z-index:2;
}

.about-page .numby{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-bottom:24px;
    color:#fff;
    font-size:clamp(22px,2vw,32px);
    font-weight:800;
    letter-spacing:-.8px;
    line-height:1.35;
}

.about-page .numby:before{
    content:"\f1c0";
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    flex:0 0 38px;
    border-radius:11px;
    background:rgba(45,143,240,.18);
    color:#73b8ff;
    font-family:"Font Awesome 7 Pro";
    font-weight:900;
    font-size:15px;
}

.about-page .top-list-txt{
    position:relative;
    max-width:640px;
    color:rgba(255,255,255,.76);
    font-size:clamp(15px,.25vw + 14px,18px);
    line-height:2;
    letter-spacing:-.25px;
}

/* three value cards */
.about-page .p11{
    margin-top:46px;
}

.about-page .p11 ul{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.about-page .p11 li{
    position:relative;
    min-width:0;
    overflow:hidden;
    border:1px solid var(--about-line);
    border-radius:18px;
    background:#fff;
    box-shadow:0 12px 32px rgba(7,26,53,.07);
    transition:transform .4s cubic-bezier(.2,.65,.2,1),box-shadow .4s,border-color .4s;
}

.about-page .p11 li:after{
    content:"\f061";
    position:absolute;
    right:18px;
    bottom:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    border-radius:50%;
    background:var(--about-sky);
    color:var(--about-blue);
    font-family:"Font Awesome 7 Pro";
    font-weight:900;
    font-size:10px;
    opacity:0;
    transform:translateX(-8px);
    transition:.35s;
}

.about-page .p11 li:hover{
    transform:translateY(-7px);
    border-color:#bcd8f4;
    box-shadow:var(--about-shadow-hover);
}

.about-page .p11 li:hover:after{
    opacity:1;
    transform:translateX(0);
}

.about-page .p11 li img{
    width:100%;
    height:auto;
}

/* ---------------------------------------------------------
   2. CERTIFICATION / LICENSE MARQUEE
--------------------------------------------------------- */
.about-page .about-con-02 {
  position: relative;
  padding: 92px 0 96px;
  background: #f6f9fc;
  border-top: 1px solid #edf2f7;
  border-bottom: 1px solid #e8eef5;
}

/* 제목 전체 정렬 상자 */
.about-page .about-con-02 .con-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px; /* 아이콘과 글자 사이 간격 */
  margin: 0 auto 34px;
  color: var(--about-navy);
  font-size: clamp(18px, 1.4vw, 25px);
  font-weight: 800;
  letter-spacing: 1.4px;
  text-align: center;
}

/* 글자 왼쪽에 올바르게 붙는 아이콘 */
.about-page .about-con-02 .con-title::before {
 /* content: "\f0a3";   사용 중인 폰트어썸 유니코드 */
  content: "\f5f3";
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  color: #1a56db; /* 아이콘 색상 */
  font-size: 0.9em; /* 글자 크기에 맞춰 자동 조절 */
}


.about-page .about-con-02 .area{
    width:100%;
}

.about-page .about-con-02 .process-list-wrap{
    width:100%;
}

.about-page .about-con-02 .licens{
    position:relative;
    width:100%;
    overflow:hidden;
    padding:10px 0;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}

.about-page .about-con-02 #slider{
    width:100%;
    overflow:hidden;
}

.about-page .about-con-02 .image-box{
    width:max-content !important;
    height:auto !important;
    min-height:0;
    display:flex !important;
    align-items:center;
    flex-wrap:nowrap !important;
    gap:20px;
    animation:bannermove-company 32s linear infinite !important;
    will-change:transform;
}

.about-page .about-con-02 .image-box > div{
    flex:0 0 auto;
    width:210px;
    padding:13px;
    border:1px solid #e0e7ef;
    border-radius:13px;
    background:#fff;
    box-shadow:0 8px 22px rgba(7,26,53,.07);
    transition:transform .3s,box-shadow .3s;
}

.about-page .about-con-02 .image-box > div:hover{
    transform:translateY(-5px);
    box-shadow:0 16px 35px rgba(7,26,53,.12);
}

.about-page .about-con-02 .image-box img{
    width:100%;
    height:250px;
    object-fit:contain;
    background:#fff;
}

@keyframes bannermove-company{
    0%{transform:translate3d(0,0,0);}
    100%{transform:translate3d(calc(-50% - 10px),0,0);}
}

.about-page .about-con-02 .image-box:hover{
    animation-play-state:paused !important;
}

/* ---------------------------------------------------------
   3. HISTORY
--------------------------------------------------------- */
.about-page .about-con-01.about-bg-wrap{
    position:relative;
    min-height:980px;
    padding:130px 0 145px;
    overflow:hidden;
    background:#06152a;
}

.about-page .about-con-01 .about-bg{
    position:absolute !important;
    inset:0;
    opacity:.68;
    filter:saturate(1.12) contrast(1.05);
    transform:scale(1.02);
}

.about-page .about-con-01 .about-bg:after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg,rgba(2,12,25,.25),rgba(2,12,25,.55)),
        radial-gradient(circle at 50% 42%,rgba(18,102,190,.08),transparent 45%);
}

.about-page .about-con-01 .area{
    position:relative;
    z-index:2;
}

.about-page .about-con-01 .tit{
    position:relative;
    margin:0 auto 95px;
    text-align:center;
    color:#fff;
    font-size:clamp(28px,2.6vw,48px);
    line-height:1.2;
    font-weight:800;
    letter-spacing:1.5px;
}

.about-page .about-con-01 .tit:before{
    content:"\f1da";
    display:block;
    margin:0 auto 18px;
    color:#5fb0ff;
    font-family:"Font Awesome 7 Pro";
    font-weight:900;
    font-size:20px;
}

.about-page .about-con-01 .tit:after{
    content:"";
    display:block;
    width:54px;
    height:3px;
    margin:20px auto 0;
    border-radius:3px;
    background:linear-gradient(90deg,#2d8ff0,#7bc1ff);
}

/* timeline wrapper */
.about-page .about-con-01 .txt-box{
    position:relative;
    max-width:1000px;
    margin:0 auto;
    padding:0 0 20px;
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:130px;
    row-gap:92px;
}

/* central line */
.about-page .about-con-01 .txt-box:before{
    content:"";
    position:absolute;
    left:50%;
    top:0;
    bottom:0;
    width:1px;
    background:linear-gradient(180deg,transparent,#4a9ae7 5%,#4a9ae7 95%,transparent);
    transform:translateX(-50%);
    opacity:.75;
}

.about-page .about-con-01 .txt-box:after{
    content:"";
    position:absolute;
    left:50%;
    top:0;
    width:10px;
    height:10px;
    border:2px solid #7fc5ff;
    border-radius:50%;
    background:#06152a;
    transform:translate(-50%,0);
    box-shadow:0 0 0 7px rgba(45,143,240,.12);
}

/* all timeline blocks */
.about-page .about-con-01 .h_left,
.about-page .about-con-01 .h_right{
    position:relative;
    min-width:0;
    padding:26px 30px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px;
    background:rgba(4,21,43,.52);
    backdrop-filter:blur(8px);
    box-shadow:0 15px 45px rgba(0,0,0,.14);
}

.about-page .about-con-01 .h_left{
    text-align:right;
}

.about-page .about-con-01 .h_right{
    text-align:left;
}

/* connector dots */
.about-page .about-con-01 .h_left:after,
.about-page .about-con-01 .h_right:before{
    content:"";
    position:absolute;
    top:38px;
    width:9px;
    height:9px;
    border-radius:50%;
    background:#53a9f7;
    box-shadow:0 0 0 6px rgba(83,169,247,.13);
}

.about-page .about-con-01 .h_left:after{right:-70px;}
.about-page .about-con-01 .h_right:before{left:-70px;}

.about-page .about-con-01 .tit_t{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:15px;
    color:#71bbff;
    font-size:clamp(25px,2.1vw,37px);
    font-weight:900;
    line-height:1;
    letter-spacing:1px;
}

.about-page .about-con-01 .h_left .tit_t:before,
.about-page .about-con-01 .h_right .tit_t:before{
    content:"\f073";
    font-family:"Font Awesome 7 Pro";
    font-weight:900;
    font-size:13px;
    color:#80c6ff;
}

.about-page .about-con-01 .txt{
    position:relative;
    margin:0;
    padding:4px 0;
    color:rgba(255,255,255,.76);
    font-size:13px;
    line-height:1.65;
    letter-spacing:-.1px;
}

.about-page .about-con-01 .h_left .txt{
    padding-right:0;
}

.about-page .about-con-01 .h_right .txt{
    padding-left:0;
}

/* alternate timeline spacing */
.about-page .about-con-01 .h_left:nth-of-type(3),
.about-page .about-con-01 .h_right:nth-of-type(4){
    margin-top:0;
}

.about-page .about-con-01 .h_line{
    position:absolute;
    left:50%;
    bottom:0;
    width:11px;
    height:11px;
    margin-left:-5px;
    border-radius:50%;
    background:#58adfa;
    box-shadow:0 0 0 8px rgba(88,173,250,.13);
}

.about-page .about-con-01 .h_line:after{
    content:"";
    position:absolute;
    left:50%;
    top:18px;
    width:1px;
    height:80px;
    background:linear-gradient(#58adfa,transparent);
    transform:translateX(-50%);
}

/* ---------------------------------------------------------
   4. ACCESSIBILITY / INTERACTION
--------------------------------------------------------- */
.about-page a:focus-visible,
.about-page button:focus-visible{
    outline:3px solid rgba(45,143,240,.55);
    outline-offset:4px;
}

@media (prefers-reduced-motion:reduce){
    .about-page *,
    .about-page *:before,
    .about-page *:after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }
}

/* ---------------------------------------------------------
   5. TABLET
--------------------------------------------------------- */
@media (max-width:1200px){
    .about-page .about-top-con{
        padding-top:104px;
    }

    .about-page .top-box-wrap{
        grid-template-columns:1fr;
        gap:28px;
    }

    .about-page .top-right-box{
        align-items:stretch;
    }

    .about-page .right-list{
        padding:42px 44px;
    }

    .about-page .p11{
        margin-top:30px;
    }

    .about-page .about-con-01.about-bg-wrap{
        min-height:auto;
        padding:110px 0 120px;
    }

    .about-page .about-con-01 .txt-box{
        max-width:900px;
        column-gap:90px;
    }

    .about-page .about-con-01 .h_left:after{right:-50px;}
    .about-page .about-con-01 .h_right:before{left:-50px;}
}

/* ---------------------------------------------------------
   6. MOBILE
--------------------------------------------------------- */
@media (max-width:991px){
    .about-page .area{
        width:100%;
        padding-left:20px;
        padding-right:20px;
    }

    .about-page .about-top-con{
        padding:92px 0 70px;
    }

    .about-page .location{
        margin-bottom:25px;
    }

    .about-page .top-box-wrap{
        gap:20px;
    }

    .about-page .video-iframe-wrapper{
        min-height:0;
        aspect-ratio:16/10;
        border-radius:16px;
    }

    .about-page .right-list{
        padding:34px 28px;
        border-radius:16px;
    }

    .about-page .right-list:after{
        right:24px;
        top:24px;
        font-size:54px;
    }

    .about-page .numby{
        font-size:23px;
        margin-bottom:18px;
    }

    .about-page .top-list-txt{
        font-size:14.5px;
        line-height:1.85;
    }

    .about-page .p11{
        margin-top:20px;
    }

    .about-page .p11 ul{
        gap:12px;
    }

    .about-page .p11 li{
        border-radius:14px;
    }

    .about-page .about-con-02{
        padding:70px 0;
    }

    .about-page .about-con-02:before{
        margin-bottom:24px;
        font-size:17px;
    }

    .about-page .about-con-02:after{
        top:73px;
        left:calc(50% - 116px);
    }

    .about-page .about-con-02 .image-box{
        gap:14px;
        animation-duration:26s !important;
    }

    .about-page .about-con-02 .image-box > div{
        width:175px;
        padding:9px;
        border-radius:10px;
    }

    .about-page .about-con-02 .image-box img{
        height:250px;
    }

    .about-page .about-con-01.about-bg-wrap{
        padding:80px 0 90px;
    }

    .about-page .about-con-01 .tit{
        margin-bottom:52px;
        font-size:27px;
        letter-spacing:.5px;
    }

    /* 모바일에서는 좌/우 2열 대신 하나의 세로 timeline */
    .about-page .about-con-01 .txt-box{
        display:flex;
        flex-direction:column;
        gap:18px;
        max-width:none;
        padding-left:28px;
    }

    .about-page .about-con-01 .txt-box:before{
        left:6px;
        top:0;
        bottom:0;
        transform:none;
    }

    .about-page .about-con-01 .txt-box:after{
        left:6px;
        top:0;
        transform:translate(-50%,0);
    }

    .about-page .about-con-01 .h_left,
    .about-page .about-con-01 .h_right{
        width:100%;
        padding:22px 22px 20px;
        text-align:left;
        border-radius:13px;
    }

    .about-page .about-con-01 .h_left:after,
    .about-page .about-con-01 .h_right:before{
        left:-28px;
        right:auto;
        top:30px;
        width:8px;
        height:8px;
    }

    .about-page .about-con-01 .tit_t{
        font-size:25px;
        margin-bottom:10px;
    }

    .about-page .about-con-01 .txt{
        font-size:12.5px;
        line-height:1.7;
    }

    .about-page .about-con-01 .h_line{
        left:6px;
        bottom:-4px;
        margin-left:0;
        transform:translateX(-50%);
    }

    .about-page .about-con-01 .h_line:after{
        display:none;
    }
}

@media (max-width:640px){
    .about-page .area{
        padding-left:16px;
        padding-right:16px;
    }

    .about-page .about-top-con{
        padding:82px 0 55px;
    }

    .about-page .location li{
        font-size:10px;
    }

    .about-page .location li:not(:last-child):after{
        margin:0 8px;
    }

    .about-page .top-box-wrap{
        gap:16px;
    }

    .about-page .video-iframe-wrapper{
        aspect-ratio:16/11;
        border-radius:13px;
    }

    .about-page .video-iframe-wrapper:after{
        left:16px;
        bottom:16px;
        width:38px;
        height:38px;
        font-size:12px;
    }

    .about-page .right-list{
        padding:28px 22px;
        border-radius:13px;
    }

    .about-page .numby{
        display:flex;
        align-items:flex-start;
        gap:9px;
        margin-bottom:15px;
        font-size:20px;
    }

    .about-page .numby:before{
        width:32px;
        height:32px;
        flex-basis:32px;
        font-size:13px;
    }

    .about-page .top-list-txt{
        font-size:13.5px;
        line-height:1.8;
    }

    .about-page .p11{
        margin-top:16px;
    }

    .about-page .p11 ul{
        grid-template-columns:1fr;
        gap:10px;
    }

    .about-page .p11 li{
        border-radius:12px;
    }

    .about-page .p11 li:after{
        opacity:1;
        transform:none;
        right:12px;
        bottom:12px;
        width:26px;
        height:26px;
    }

    .about-page .about-con-02{
        padding:55px 0 60px;
    }

    .about-page .about-con-02:before{
        font-size:15px;
        letter-spacing:.8px;
        margin-bottom:20px;
    }

    .about-page .about-con-02:after{
        top:58px;
        left:calc(50% - 101px);
        font-size:13px;
    }

    .about-page .about-con-02 .licens{
        -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
        mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
    }

    .about-page .about-con-02 .image-box{
        gap:10px;
        animation-duration:22s !important;
    }

    .about-page .about-con-02 .image-box > div{
        width:145px;
        padding:7px;
        border-radius:8px;
    }

    .about-page .about-con-02 .image-box img{
        height:200px;
    }

    .about-page .about-con-01.about-bg-wrap{
        padding:62px 0 75px;
    }

    .about-page .about-con-01 .tit{
        margin-bottom:38px;
        font-size:23px;
    }

    .about-page .about-con-01 .tit:before{
        margin-bottom:12px;
        font-size:16px;
    }

    .about-page .about-con-01 .tit:after{
        width:42px;
        margin-top:14px;
    }

    .about-page .about-con-01 .txt-box{
        padding-left:24px;
        gap:13px;
    }

    .about-page .about-con-01 .txt-box:before{
        left:4px;
    }

    .about-page .about-con-01 .txt-box:after{
        left:4px;
        width:8px;
        height:8px;
    }

    .about-page .about-con-01 .h_left,
    .about-page .about-con-01 .h_right{
        padding:18px 17px 17px;
    }

    .about-page .about-con-01 .h_left:after,
    .about-page .about-con-01 .h_right:before{
        left:-24px;
        top:27px;
        width:7px;
        height:7px;
    }

    .about-page .about-con-01 .tit_t{
        font-size:22px;
    }

    .about-page .about-con-01 .txt{
        font-size:11.5px;
        line-height:1.65;
    }
}

@media (max-width:380px){
    .about-page .area{
        padding-left:13px;
        padding-right:13px;
    }

    .about-page .right-list{
        padding:24px 18px;
    }

    .about-page .numby{
        font-size:18px;
    }

    .about-page .top-list-txt{
        font-size:12.5px;
    }

    .about-page .about-con-02 .image-box > div{
        width:132px;
    }

    .about-page .about-con-02 .image-box img{
        height:96px;
    }

    .about-page .about-con-01 .txt{
        font-size:11px;
    }
}


/**************************************************/
/**************************************************/
/**************************************************/
/* =========================================================
   GSF SOLUTION
   P11 CORE VALUE
   Font Awesome Pro 7.3.1
========================================================= */


/* ---------------------------------------------------------
   SECTION
--------------------------------------------------------- */

.p11-value-section {
    width: 100%;
    padding: 90px 20px 110px;
    background: #ffffff;
    box-sizing: border-box;
    overflow: hidden;
}


/* ---------------------------------------------------------
   WRAP
--------------------------------------------------------- */

.p11-value-wrap {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;

    box-sizing: border-box;
}


/* ---------------------------------------------------------
   CARD
--------------------------------------------------------- */

.p11-value-card {
    position: relative;

    min-height: 500px;

    padding: 10px;

    background:
        linear-gradient(
            145deg,
            #d9e2ee 0%,
            #ffffff 15%,
            #ffffff 85%,
            #d7e0eb 100%
        );

    border-radius: 22px;

    box-sizing: border-box;

    box-shadow:
        0 18px 45px rgba(4, 25, 61, 0.10);

    transition:
        transform 0.5s ease,
        box-shadow 0.5s ease;
}


/* ---------------------------------------------------------
   CARD HOVER
--------------------------------------------------------- */

.p11-value-card:hover {

    transform:
        translateY(-12px);

    box-shadow:
        0 30px 70px rgba(4, 25, 61, 0.18);
}


/* ---------------------------------------------------------
   CARD INNER
--------------------------------------------------------- */

.p11-card-inner {

    position: relative;

    width: 100%;
    height: 100%;
    min-height: 480px;

    background: #ffffff;

    border-radius: 16px;

    border: 1px solid #e3e8ef;

    overflow: hidden;

    box-sizing: border-box;

    text-align: center;
}


/* ---------------------------------------------------------
   TOP AREA
--------------------------------------------------------- */

.p11-card-top {

    position: relative;

    width: 100%;
    height: 205px;

    display: flex;
    justify-content: center;
    align-items: flex-start;

    background:
        linear-gradient(
            180deg,
            #f9fafc 0%,
            #ffffff 100%
        );

    box-sizing: border-box;
}


/* ---------------------------------------------------------
   NAVY RIBBON
--------------------------------------------------------- */

.p11-card-top::before {

    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 235px;
    height: 180px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            180deg,
            #071b43 0%,
            #092650 100%
        );

    clip-path:
        polygon(
            0 0,
            100% 0,
            100% 58%,
            50% 100%,
            0 58%
        );

    box-shadow:
        0 10px 20px rgba(0, 20, 60, 0.20);

    transition:
        height 0.5s ease,
        width 0.5s ease;
}


/* ---------------------------------------------------------
   RIBBON BORDER
--------------------------------------------------------- */

.p11-card-top::after {

    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 239px;
    height: 184px;

    transform:
        translateX(-50%);

    clip-path:
        polygon(
            0 0,
            100% 0,
            100% 58%,
            50% 100%,
            0 58%
        );

    border: 1px solid rgba(255,255,255,0.18);

    pointer-events: none;
}


/* ---------------------------------------------------------
   ICON
--------------------------------------------------------- */

.p11-icon-box {

    position: relative;

    z-index: 5;

    width: 115px;
    height: 115px;

    margin-top: 27px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;

    transition:
        transform 0.5s ease;
}


.p11-icon-box i {

    font-size: 65px;

    font-weight: 400;

    line-height: 1;

    color: #ffffff;

    text-shadow:
        0 3px 10px rgba(0,0,0,0.12);

    transition:
        transform 0.5s ease,
        filter 0.5s ease;
}


/* ---------------------------------------------------------
   ICON HOVER
--------------------------------------------------------- */

.p11-value-card:hover
.p11-icon-box {

    transform:
        translateY(-5px);
}


.p11-value-card:hover
.p11-icon-box i {

    transform:
        scale(1.08);

    filter:
        drop-shadow(
            0 0 12px rgba(255,255,255,0.25)
        );
}


/* ---------------------------------------------------------
   CONTENT
--------------------------------------------------------- */

.p11-card-content {

    position: relative;

    z-index: 5;

    padding:
        35px 30px 70px;

    box-sizing: border-box;
}


/* ---------------------------------------------------------
   TITLE
--------------------------------------------------------- */

.p11-card-content h3 {

    margin: 0 0 28px;

    color: #061936;

    font-family:
        "Pretendard",
        "Noto Sans KR",
        sans-serif;

    font-size: 34px;

    font-weight: 700;

    letter-spacing: -1.5px;

    line-height: 1.25;
}


/* ---------------------------------------------------------
   DESCRIPTION
--------------------------------------------------------- */

.p11-card-content p {

    margin: 0;

    color: #253754;

    font-family:
        "Pretendard",
        "Noto Sans KR",
        sans-serif;

    font-size: 18px;

    font-weight: 400;

    line-height: 1.75;

    letter-spacing: -0.7px;
}


/* ---------------------------------------------------------
   NUMBER
--------------------------------------------------------- */

.p11-card-number {

    position: absolute;

    right: 28px;
    bottom: 25px;

    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #071d46;

    color: #ffffff;

    font-family:
        Arial,
        sans-serif;

    font-size: 11px;

    font-weight: 700;

    opacity: 0.9;

    transition:
        transform 0.4s ease,
        background 0.4s ease;
}


.p11-value-card:hover
.p11-card-number {

    transform:
        rotate(360deg);

    background:
        #0b397b;
}


/* ---------------------------------------------------------
   BOTTOM DECORATION
--------------------------------------------------------- */

.p11-card-inner::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 5px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #092957,
            transparent
        );

    opacity: 0.7;
}


/* ---------------------------------------------------------
   TABLET
--------------------------------------------------------- */

@media (max-width: 1100px) {

    .p11-value-section {

        padding:
            70px 25px 90px;
    }


    .p11-value-wrap {

        gap: 20px;
    }


    .p11-value-card {

        min-height: 450px;
    }


    .p11-card-inner {

        min-height: 430px;
    }


    .p11-card-top {

        height: 185px;
    }


    .p11-card-top::before {

        width: 210px;
        height: 165px;
    }


    .p11-card-top::after {

        width: 214px;
        height: 169px;
    }


    .p11-card-content {

        padding:
            28px 20px 60px;
    }


    .p11-card-content h3 {

        font-size: 29px;
    }


    .p11-card-content p {

        font-size: 16px;
    }

}


/* ---------------------------------------------------------
   TABLET / SMALL
--------------------------------------------------------- */

@media (max-width: 800px) {

    .p11-value-wrap {

        grid-template-columns:
            repeat(2, 1fr);

        max-width: 700px;

        margin: 0 auto;
    }

}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 600px) {

    .p11-value-section {

        padding:
            50px 16px 70px;
    }


    .p11-value-wrap {

        display: grid;

        grid-template-columns:
            1fr;

        gap: 22px;

        max-width: 430px;
    }


    .p11-value-card {

        min-height: 430px;

        border-radius: 18px;
    }


    .p11-card-inner {

        min-height: 410px;
    }


    .p11-card-top {

        height: 175px;
    }


    .p11-card-top::before {

        width: 205px;
        height: 158px;
    }


    .p11-card-top::after {

        width: 209px;
        height: 162px;
    }


    .p11-icon-box {

        width: 105px;
        height: 105px;

        margin-top: 23px;
    }


    .p11-icon-box i {

        font-size: 58px;
    }


    .p11-card-content {

        padding:
            25px 22px 60px;
    }


    .p11-card-content h3 {

        margin-bottom: 20px;

        font-size: 28px;

        letter-spacing: -1px;
    }


    .p11-card-content p {

        font-size: 16px;

        line-height: 1.7;

        word-break: keep-all;
    }


    .p11-card-number {

        right: 20px;
        bottom: 18px;
    }

}


/* ---------------------------------------------------------
   SMALL MOBILE
--------------------------------------------------------- */

@media (max-width: 380px) {

    .p11-card-top::before {

        width: 185px;
    }


    .p11-card-top::after {

        width: 189px;
    }


    .p11-card-content h3 {

        font-size: 25px;
    }


    .p11-card-content p {

        font-size: 15px;
    }

}

/******************************************************************/
/******************************************************************/
/******************************************************************/
																																													 /* =========================================================
   GSF SOLUTION
   HISTORY TIMELINE
   Minimal Center Timeline
========================================================= */


/* =========================================================
   SECTION
========================================================= */

.about-history {

    position: relative;

    width: 100%;

    min-height: 1100px;

    overflow: hidden;

    color: #fff;

}


/* =========================================================
   BACKGROUND
========================================================= */

.about-history .about-bg {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 0;

}


/* =========================================================
   BACKGROUND OVERLAY
========================================================= */

.history-bg-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:

        linear-gradient(
            180deg,
            rgba(0,10,25,0.48) 0%,
            rgba(0,12,28,0.28) 50%,
            rgba(0,8,20,0.55) 100%
        );

}


/* =========================================================
   CONTENT AREA
========================================================= */

.about-history .area {

    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    padding:

        100px 30px
        110px;

    box-sizing: border-box;

}


/* =========================================================
   TITLE
========================================================= */

.history-title {

    text-align: center;

    margin-bottom: 70px;

}


.history-sub-title {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 14px;

    color: rgba(150,205,255,0.85);

    font-family:

        "Pretendard",
        "Noto Sans KR",
        sans-serif;

    font-size: 12px;

    font-weight: 500;

    letter-spacing: 2.5px;

    text-transform: uppercase;

}


.history-sub-title i {

    font-size: 12px;

}


.history-title .tit {

    margin: 0;

    color: #fff;

    font-family:

        "Pretendard",
        "Noto Sans KR",
        sans-serif;

    font-size: 36px;

    font-weight: 700;

    line-height: 1.2;

    letter-spacing: -1px;

    text-shadow:

        0 2px 15px rgba(0,0,0,0.35);

}


/* =========================================================
   TIMELINE WRAPPER
========================================================= */

.history-line-wrap {

    position: relative;

    width: 100%;

    max-width: 1000px;

    margin: 0 auto;

}


/* =========================================================
   CENTER LINE
========================================================= */

.history-line {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 50%;

    width: 1px;

    transform: translateX(-50%);

    background:

        linear-gradient(
            180deg,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,0.8) 7%,
            rgba(255,255,255,0.8) 93%,
            rgba(255,255,255,0) 100%
        );

    box-shadow:

        0 0 8px rgba(120,190,255,0.25);

}


/* =========================================================
   ROW
========================================================= */

.history-row {

    position: relative;

    display: grid;

    grid-template-columns:

        1fr
        30px
        1fr;

    align-items: start;

    min-height: 170px;

}


/* =========================================================
   LEFT / RIGHT CONTENT
========================================================= */

.history-side {

    width: 100%;

    box-sizing: border-box;

}


/* LEFT */

.history-side-left {

    padding:

        0 32px 0 0;

    text-align: right;

}


/* RIGHT */

.history-side-right {

    padding:

        0 0 0 32px;

    text-align: left;

}


/* =========================================================
   YEAR
========================================================= */

.history-year {

    margin-bottom: 12px;

    color: #fff;

    font-family:

        "Pretendard",
        "Noto Sans KR",
        sans-serif;

    font-size: 23px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: -0.5px;

    text-shadow:

        0 2px 10px rgba(0,0,0,0.5);

}


/* =========================================================
   TEXT
========================================================= */

.history-text {

    color:

        rgba(255,255,255,0.72);

    font-family:

        "Pretendard",
        "Noto Sans KR",
        sans-serif;

    font-size: 13px;

    font-weight: 400;

    line-height: 1.7;

    letter-spacing: -0.25px;

    text-shadow:

        0 1px 5px rgba(0,0,0,0.65);

}


.history-text p {

    margin: 0;

    padding: 0;

}


/* =========================================================
   POINT
========================================================= */

.history-point {

    position: relative;

    z-index: 10;

    width: 30px;

    min-height: 25px;

    display: flex;

    align-items: flex-start;

    justify-content: center;

}


.history-point span {

    display: block;

    width: 9px;

    height: 9px;

    margin-top: 1px;

    border-radius: 50%;

    background: #fff;

    box-shadow:

        0 0 0 3px rgba(255,255,255,0.08),

        0 0 12px rgba(130,200,255,0.75);

}


/* =========================================================
   HORIZONTAL CONNECTOR
========================================================= */

.history-row-left
.history-side-left {

    position: relative;

}


.history-row-left
.history-side-left::after {

    content: "";

    position: absolute;

    top: 5px;

    right: 0;

    width: 32px;

    height: 1px;

    background:

        rgba(255,255,255,0.42);

}


.history-row-right
.history-side-right {

    position: relative;

}


.history-row-right
.history-side-right::before {

    content: "";

    position: absolute;

    top: 5px;

    left: 0;

    width: 32px;

    height: 1px;

    background:

        rgba(255,255,255,0.42);

}


/* =========================================================
   HOVER
========================================================= */

.history-row {

    transition:

        transform 0.35s ease;

}


.history-row:hover {

    transform:

        translateY(-3px);

}


.history-row:hover
.history-year {

    color: #8fc9ff;

}


.history-row:hover
.history-text {

    color: rgba(255,255,255,0.94);

}


.history-row:hover
.history-point span {

    transform: scale(1.35);

    box-shadow:

        0 0 0 4px rgba(130,200,255,0.08),

        0 0 20px rgba(100,190,255,0.95);

}


.history-point span {

    transition:

        transform 0.3s ease,
        box-shadow 0.3s ease;

}


/* =========================================================
   2025 FIRST ITEM
========================================================= */

.history-row:first-child {

    padding-top: 5px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {


    .about-history .area {

        padding:

            80px 25px
            90px;

    }


    .history-title {

        margin-bottom: 60px;

    }


    .history-title .tit {

        font-size: 32px;

    }


    .history-line-wrap {

        max-width: 850px;

    }


    .history-side-left {

        padding-right: 25px;

    }


    .history-side-right {

        padding-left: 25px;

    }


    .history-text {

        font-size: 12px;

    }


}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {


    .about-history {

        min-height: auto;

    }


    .about-history .area {

        padding:

            65px 20px
            75px;

    }


    /* -----------------------------------------
       TITLE
    ----------------------------------------- */

    .history-title {

        margin-bottom: 50px;

    }


    .history-sub-title {

        font-size: 10px;

        letter-spacing: 2px;

    }


    .history-title .tit {

        font-size: 25px;

        letter-spacing: -0.8px;

    }


    /* -----------------------------------------
       TIMELINE
    ----------------------------------------- */

    .history-line-wrap {

        width: 100%;

        padding-left: 28px;

        box-sizing: border-box;

    }


    /* 모바일에서는 왼쪽 라인 */

    .history-line {

        left: 8px;

        width: 1px;

        transform: none;

    }


    /* -----------------------------------------
       ROW
    ----------------------------------------- */

    .history-row {

        display: block;

        min-height: 0;

        margin-bottom: 38px;

        padding: 0;

    }


    .history-row:last-child {

        margin-bottom: 0;

    }


    /* -----------------------------------------
       모든 내용을 오른쪽으로
    ----------------------------------------- */

    .history-side,
    .history-side-left,
    .history-side-right {

        width: 100%;

        padding:

            0 0 0 20px;

        text-align: left;

    }


    /* -----------------------------------------
       EMPTY 제거
    ----------------------------------------- */

    .history-side-empty {

        display: none;

    }


    /* -----------------------------------------
       POINT
    ----------------------------------------- */

    .history-point {

        position: absolute;

        top: 3px;

        left: -28px;

        width: 17px;

        min-height: 17px;

        display: flex;

        align-items: center;

        justify-content: center;

    }


    .history-point span {

        width: 8px;

        height: 8px;

        margin: 0;

    }


    /* -----------------------------------------
       YEAR
    ----------------------------------------- */

    .history-year {

        margin-bottom: 9px;

        font-size: 21px;

    }


    /* -----------------------------------------
       TEXT
    ----------------------------------------- */

    .history-text {

        font-size: 12px;

        line-height: 1.75;

        word-break: keep-all;

    }


    /* -----------------------------------------
       CONNECTOR
    ----------------------------------------- */

    .history-row-left
    .history-side-left::after,

    .history-row-right
    .history-side-right::before {

        display: none;

    }


}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {


    .about-history .area {

        padding:

            55px 15px
            65px;

    }


    .history-title .tit {

        font-size: 22px;

    }


    .history-line-wrap {

        padding-left: 25px;

    }


    .history-line {

        left: 6px;

    }


    .history-point {

        left: -25px;

    }


    .history-side,
    .history-side-left,
    .history-side-right {

        padding-left: 17px;

    }


    .history-year {

        font-size: 20px;

    }


    .history-text {

        font-size: 11px;

        line-height: 1.7;

    }

}


/*************/
/*************/
/* =========================================================
   GSF SOLUTION
   HISTORY TIMELINE
   Responsive / 4K / Ultra Wide
========================================================= */


/* =========================================================
   SECTION
========================================================= */

.about-history {

    position: relative;

    width: 100%;

    min-height: 1100px;

    overflow: hidden;

    color: #fff;

}


/* =========================================================
   BACKGROUND
========================================================= */

.about-history .about-bg {

    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 100%;

    z-index: 0;

    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;

}


/* =========================================================
   BACKGROUND OVERLAY
========================================================= */

.about-history .history-bg-overlay {

    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    z-index: 1;

    background:

        linear-gradient(
            180deg,
            rgba(0, 8, 22, 0.48) 0%,
            rgba(0, 12, 28, 0.20) 48%,
            rgba(0, 7, 18, 0.55) 100%
        );

    pointer-events: none;

}


/* =========================================================
   CONTENT AREA
========================================================= */

.about-history .area {

    position: relative;

    z-index: 5;

    width: 100%;

    /*
     * 일반 PC ~ 4K까지 대응
     */
    max-width: 1800px;

    margin: 0 auto;

    padding:

        clamp(80px, 5vw, 150px)
        clamp(25px, 3vw, 80px)
        clamp(90px, 6vw, 170px);

    box-sizing: border-box;

}


/* =========================================================
   TITLE
========================================================= */

.history-title {

    width: 100%;

    margin: 0 auto;

    margin-bottom:

        clamp(55px, 4vw, 110px);

    text-align: center;

}


/* =========================================================
   SUB TITLE
========================================================= */

.history-sub-title {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin-bottom: 14px;

    color: rgba(160, 210, 255, 0.90);

    font-family:

        "Pretendard",
        "Noto Sans KR",
        sans-serif;

    font-size:

        clamp(10px, 0.55vw, 18px);

    font-weight: 500;

    line-height: 1;

    letter-spacing:

        clamp(1.5px, 0.12vw, 4px);

    text-transform: uppercase;

}


.history-sub-title i {

    font-size:

        clamp(10px, 0.5vw, 16px);

}


/* =========================================================
   MAIN TITLE
========================================================= */

.history-title .tit {

    margin: 0;

    padding: 0;

    color: #fff;

    font-family:

        "Pretendard",
        "Noto Sans KR",
        sans-serif;

    font-size:

        clamp(25px, 1.8vw, 48px);

    font-weight: 700;

    line-height: 1.2;

    letter-spacing: -1px;

    text-shadow:

        0 2px 15px rgba(0, 0, 0, 0.45);

}


/* =========================================================
   TIMELINE WRAPPER
========================================================= */

.history-line-wrap {

    position: relative;

    width: 100%;

    max-width:

        clamp(900px, 65vw, 1500px);

    margin: 0 auto;

}


/* =========================================================
   CENTER LINE
========================================================= */

.history-line {

    position: absolute;

    top: 0;
    bottom: 0;

    left: 50%;

    width: 1px;

    transform: translateX(-50%);

    background:

        linear-gradient(
            180deg,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,0.80) 7%,
            rgba(255,255,255,0.80) 93%,
            rgba(255,255,255,0) 100%
        );

    box-shadow:

        0 0 10px rgba(110, 190, 255, 0.20);

}


/* =========================================================
   TIMELINE ROW
========================================================= */

.history-row {

    position: relative;

    display: grid;

    grid-template-columns:

        minmax(0, 1fr)
        clamp(26px, 2vw, 42px)
        minmax(0, 1fr);

    align-items: start;

    min-height:

        clamp(150px, 10vw, 280px);

    box-sizing: border-box;

    transition:

        transform 0.35s ease;

}


/* =========================================================
   LEFT / RIGHT SIDE
========================================================= */

.history-side {

    position: relative;

    width: 100%;

    box-sizing: border-box;

}


/* =========================================================
   LEFT
========================================================= */

.history-side-left {

    padding-right:

        clamp(25px, 2.5vw, 65px);

    text-align: right;

}


/* =========================================================
   RIGHT
========================================================= */

.history-side-right {

    padding-left:

        clamp(25px, 2.5vw, 65px);

    text-align: left;

}


/* =========================================================
   EMPTY SIDE
========================================================= */

.history-side-empty {

    min-height: 1px;

}


/* =========================================================
   YEAR
========================================================= */

.history-year {

    margin: 0 0
        clamp(8px, 0.7vw, 18px);

    padding: 0;

    color: #fff;

    font-family:

        "Pretendard",
        "Noto Sans KR",
        sans-serif;

    font-size:

        clamp(20px, 1.25vw, 34px);

    font-weight: 700;

    line-height: 1;

    letter-spacing: -0.5px;

    text-shadow:

        0 2px
        clamp(5px, 0.5vw, 15px)
        rgba(0,0,0,0.70);

}


/* =========================================================
   TEXT
========================================================= */

.history-text {

    margin: 0;

    padding: 0;

    color:

        rgba(255,255,255,0.74);

    font-family:

        "Pretendard",
        "Noto Sans KR",
        sans-serif;

    /*
     * 화면 크기에 따라 증가
     */
    font-size:

        clamp(13px, 0.72vw, 20px);

    font-weight: 400;

    line-height:

        clamp(1.6, 1.75, 1.95);

    letter-spacing: -0.25px;

    text-shadow:

        0 1px 7px rgba(0,0,0,0.70);

}


.history-text p {

    display: block;

    margin: 0;

    padding: 0;

}


/* =========================================================
   CENTER POINT
========================================================= */

.history-point {

    position: relative;

    z-index: 10;

    width: 100%;

    min-height: 25px;

    display: flex;

    align-items: flex-start;

    justify-content: center;

}


/* =========================================================
   POINT
========================================================= */

.history-point span {

    display: block;

    width:

        clamp(8px, 0.55vw, 14px);

    height:

        clamp(8px, 0.55vw, 14px);

    margin-top: 1px;

    border-radius: 50%;

    background: #fff;

    box-shadow:

        0 0 0 3px rgba(255,255,255,0.08),

        0 0 14px rgba(120,200,255,0.75);

    transition:

        transform 0.3s ease,
        box-shadow 0.3s ease;

}


/* =========================================================
   LEFT CONNECTOR
========================================================= */

.history-row-left
.history-side-left::after {

    content: "";

    position: absolute;

    top: 5px;

    right: 0;

    width:

        clamp(25px, 2vw, 60px);

    height: 1px;

    background:

        rgba(255,255,255,0.42);

}


/* =========================================================
   RIGHT CONNECTOR
========================================================= */

.history-row-right
.history-side-right::before {

    content: "";

    position: absolute;

    top: 5px;

    left: 0;

    width:

        clamp(25px, 2vw, 60px);

    height: 1px;

    background:

        rgba(255,255,255,0.42);

}


/* =========================================================
   HOVER
========================================================= */

.history-row:hover {

    transform:

        translateY(-3px);

}


.history-row:hover .history-year {

    color: #9bd2ff;

}


.history-row:hover .history-text {

    color:

        rgba(255,255,255,0.95);

}


.history-row:hover
.history-point span {

    transform: scale(1.35);

    box-shadow:

        0 0 0 4px rgba(130,200,255,0.08),

        0 0 20px rgba(100,190,255,0.95);

}


/* =========================================================
   1920px
========================================================= */

@media (min-width: 1920px) {

    .about-history .area {

        max-width: 2000px;

    }


    .history-line-wrap {

        max-width: 1200px;

    }


    .history-row {

        min-height: 185px;

    }


    .history-year {

        font-size: 25px;

    }


    .history-text {

        font-size: 15px;

        line-height: 1.75;

    }

}


/* =========================================================
   2560px
========================================================= */

@media (min-width: 2560px) {

    .about-history .area {

        max-width: 2200px;

    }


    .history-line-wrap {

        max-width: 1500px;

    }


    .history-title {

        margin-bottom: 100px;

    }


    .history-title .tit {

        font-size: 40px;

    }


    .history-sub-title {

        font-size: 14px;

    }


    .history-row {

        min-height: 230px;

    }


    .history-year {

        font-size: 30px;

        margin-bottom: 15px;

    }


    .history-text {

        font-size: 18px;

        line-height: 1.8;

    }


    .history-side-left {

        padding-right: 55px;

    }


    .history-side-right {

        padding-left: 55px;

    }

}


/* =========================================================
   3200px
========================================================= */

@media (min-width: 3200px) {

    .about-history .area {

        max-width: 3000px;

        padding-left: 120px;

        padding-right: 120px;

    }


    .history-line-wrap {

        max-width: 2000px;

    }


    .history-title {

        margin-bottom: 130px;

    }


    .history-title .tit {

        font-size: 48px;

    }


    .history-sub-title {

        font-size: 17px;

    }


    .history-row {

        min-height: 280px;

    }


    .history-year {

        font-size: 36px;

        margin-bottom: 20px;

    }


    .history-text {

        font-size: 21px;

        line-height: 1.85;

    }


    .history-point span {

        width: 13px;

        height: 13px;

    }


    .history-side-left {

        padding-right: 65px;

    }


    .history-side-right {

        padding-left: 65px;

    }

}


/* =========================================================
   3800px / 4K ULTRA WIDE
========================================================= */

@media (min-width: 3800px) {

    .about-history .area {

        max-width: 3400px;

        padding-top: 170px;

        padding-bottom: 200px;

    }


    .history-title {

        margin-bottom: 150px;

    }


    .history-title .tit {

        font-size: 54px;

    }


    .history-sub-title {

        font-size: 19px;

        letter-spacing: 4px;

    }


    .history-line-wrap {

        max-width: 2300px;

    }


    .history-row {

        min-height: 320px;

    }


    .history-year {

        font-size: 40px;

        margin-bottom: 22px;

    }


    .history-text {

        font-size: 23px;

        line-height: 1.9;

    }


    .history-side-left {

        padding-right: 70px;

    }


    .history-side-right {

        padding-left: 70px;

    }


    .history-row-left
    .history-side-left::after {

        width: 70px;

    }


    .history-row-right
    .history-side-right::before {

        width: 70px;

    }


    .history-point {

        width: 50px;

    }


    .history-point span {

        width: 14px;

        height: 14px;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .about-history .area {

        padding:

            80px 25px
            90px;

    }


    .history-title {

        margin-bottom: 60px;

    }


    .history-title .tit {

        font-size: 32px;

    }


    .history-line-wrap {

        max-width: 850px;

    }


    .history-side-left {

        padding-right: 25px;

    }


    .history-side-right {

        padding-left: 25px;

    }


    .history-text {

        font-size: 12px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .about-history {

        min-height: auto;

    }


    .about-history .area {

        padding:

            65px 20px
            75px;

    }


    /* -----------------------------------------
       TITLE
    ----------------------------------------- */

    .history-title {

        margin-bottom: 50px;

    }


    .history-sub-title {

        font-size: 10px;

        letter-spacing: 2px;

    }


    .history-title .tit {

        font-size: 25px;

        letter-spacing: -0.8px;

    }


    /* -----------------------------------------
       TIMELINE
    ----------------------------------------- */

    .history-line-wrap {

        width: 100%;

        max-width: none;

        padding-left: 28px;

        box-sizing: border-box;

    }


    /* -----------------------------------------
       MOBILE LINE
    ----------------------------------------- */

    .history-line {

        top: 0;
        bottom: 0;

        left: 8px;

        width: 1px;

        transform: none;

    }


    /* -----------------------------------------
       ROW
    ----------------------------------------- */

    .history-row {

        display: block;

        min-height: 0;

        margin-bottom: 38px;

        padding: 0;

    }


    .history-row:last-child {

        margin-bottom: 0;

    }


    /* -----------------------------------------
       SIDE
    ----------------------------------------- */

    .history-side,
    .history-side-left,
    .history-side-right {

        width: 100%;

        padding:

            0 0 0 20px;

        text-align: left;

    }


    /* -----------------------------------------
       EMPTY
    ----------------------------------------- */

    .history-side-empty {

        display: none;

    }


    /* -----------------------------------------
       POINT
    ----------------------------------------- */

    .history-point {

        position: absolute;

        top: 3px;

        left: -28px;

        width: 17px;

        min-height: 17px;

        display: flex;

        align-items: center;

        justify-content: center;

    }


    .history-point span {

        width: 8px;

        height: 8px;

        margin: 0;

    }


    /* -----------------------------------------
       YEAR
    ----------------------------------------- */

    .history-year {

        margin-bottom: 9px;

        font-size: 21px;

    }


    /* -----------------------------------------
       TEXT
    ----------------------------------------- */

    .history-text {

        font-size: 12px;

        line-height: 1.75;

        word-break: keep-all;

    }


    /* -----------------------------------------
       CONNECTOR
    ----------------------------------------- */

    .history-row-left
    .history-side-left::after,

    .history-row-right
    .history-side-right::before {

        display: none;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .about-history .area {

        padding:

            55px 15px
            65px;

    }


    .history-title .tit {

        font-size: 22px;

    }


    .history-line-wrap {

        padding-left: 25px;

    }


    .history-line {

        left: 6px;

    }


    .history-point {

        left: -25px;

    }


    .history-side,
    .history-side-left,
    .history-side-right {

        padding-left: 17px;

    }


    .history-year {

        font-size: 20px;

    }


    .history-text {

        font-size: 11px;

        line-height: 1.7;

    }

}

/* 오른쪽 카드의 답답한 네이비 배경 제거 */
.about-page .top-right-box {
    background: transparent !important;
    box-shadow: none !important;
    padding: 10px 0; /* 내부 여백 최소화 */
    color: #111827; /* 텍스트를 어두운 색으로 변경 */
}

/* 제목 텍스트 색상 조정 */
.about-page .top-right-box h3,
.about-page .top-right-box .title {
    color: #0f172a;
}

/* 본문 폰트 색상 및 행간 깔끔하게 정돈 */
.about-page .top-right-box p {
    color: #ebe5e5;
    font-size: 17.4px;
    line-height: 1.6;
    margin-bottom: 16px;
}
#byfont{
    font-size: 14px;
    line-height: 1.3;
}

.about-page .top-box-wrap {
 
    align-items: center; /* 상하 중앙 정렬 */
   
}