@charset "utf-8";

* {box-sizing: border-box;}
#wrap{ max-width: 100%;position: relative;padding-top: 90px;}
.fc_y { color: var(--yellow);}
.container{max-width: 1100px; width: 100%;margin: 0 auto;}

.tit24{font-size: 24px; margin-bottom: 50px;font-family: 'IBM Plex Sans';}
header{ border-bottom: 1px solid #d4d4d4;position: fixed;top: 0; left: 0;right: 0;z-index: 50;background: var(--white);}
.header{max-width: 1400px; width: 66%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;padding: 30px 0;}
.gnb{display: flex;gap: 60px;align-items: center;}
.gnb li{font-size: 18px; font-family: 'IBM Plex Sans'; font-weight: 500;}
.section1{
    background: url(../img/mainvisul_bg.jpg) no-repeat center;
    background-size: auto 100%;
    aspect-ratio: 1920 / 870;
    position: relative;
}
.section1 .text{
    position: absolute;
    top: 52%;
    left: 16%;
    width: 19.73%;
}
.section1,
.section2,
.section3,
.section4,
.section5{
    overflow: hidden;
    padding: 130px 0;
}

.section3,
.section_bg{
    background-image: url(../img/con_bg.jpg);
    background-repeat: repeat-y;
    background-size: cover ;
    text-align: center;
}

.section3 .tit24,
.section5 .tit24{color: var(--white);}

.section2 .top_txt{display: flex; align-items: start; gap: 14px; word-break: keep-all;}
.section2 .top_txt em{font-size: 30px;font-weight: bold; color: var(--white);display: inline-flex; position: relative; z-index: 5;}
.section2 .top_txt em::before{display: block; content: ''; position: absolute; width: 45px; height: 45px; right: -3px; bottom: 6px; border-radius: 50%; background: var(--yellow);z-index: -1;}
.section2 .top_txt strong{font-size: 30px;font-weight: bold; display: inline-flex;padding-left: 3px;}

.section2 .top_txt .left{padding-left: 28px; display: flex; padding-left: 30px; gap: 3px; width: 196px;}
.section2 .top_txt .right{font-size: 24px; width: calc(100% - 210px);letter-spacing: -1.8px;}
.section2 .top_txt .right span{font-weight: bold;}
.section2 .about_img{margin: 116px auto;text-align: center;}
.section2 .bottom_txt{font-size: 24px;text-align: center; margin: auto; width: 72%;word-break: keep-all;}

.section3{position: relative;}
.section3::after{
    display: block;
    font-size: 15vw;
    font-weight: bold;
    content: 'PARTNERS';
    font-family: 'IBM Plex Sans';
    line-height: 132px;
    position: absolute;
    letter-spacing: -1vw;
    right: -4%;
    bottom: 0;
    color: rgba(255, 255, 255, 0.2);

}
.section3 .card_box{
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 30px;
}
.section3 .card_box > div{
    display: flex;
    gap: 20px;
}
.section3 .card{
    padding-top: 90px;
    aspect-ratio: 326 / 375;
    width: 326px;
    line-height: 1;
    z-index: 5;
}
.section3 .type1{
    background: url(../img/people_card_w.png) no-repeat center;
    background-size: contain;
}
.section3 .type2{
    background: url(../img/people_card_y.png) no-repeat center;
    background-size: contain;
}
.section3 .card .name{font-size: 30px;margin-bottom: 30px;}
.section3 .card .fc_y{font-size: 20px;margin-bottom: 30px;font-weight: 500;}
.section3 .card .cont{font-size: 16px; line-height: 22px; letter-spacing: -1.2px;}

.tit30{font-size: 30px; font-weight: bold; margin-bottom: 50px;}
.section4 .timeline{display: flex;}
.section4 .timeline .line{width: 50%;}
.section4 .timeline h5{font-size: 24px; font-weight: 500; font-family: 'IBM Plex Sans';letter-spacing: -1.2px;}
.section4 .timeline .box{padding-bottom: 50px;padding-left: 30px;position: relative;}
.section4 .timeline p{padding-left: 20px;font-size: 16px; font-weight: 500;letter-spacing: -1.2px;}

.section4 .timeline .box::before{display: block;content: ''; width: 8px; height: 8px; border-radius: 4px; position: absolute; left: 0;top: 14px;background: var(--yellow); }
.section4 .timeline .box::after{display: block;height: 100%;width: 2px; background: var(--grey); content: ''; position:absolute; left: 3px; top: 16px; z-index: -1;}

.section4 .timeline .box:nth-child(3){padding-bottom: 0;}
.section4 .timeline .box:nth-child(3)::after{height: calc(100% - 16px);}
.section4 .timeline .line:nth-child(2) .box:nth-child(3)::after{display: none;}


.section5 p{font-size: 20px; color: #fff; margin-bottom: 50px; letter-spacing: normal;}

.footer{color: var(--white);font-size: 16px;padding: 30px 0;font-family: 'IBM Plex Sans'; border-top: 1px solid #fff; font-weight: normal; letter-spacing: normal;}


/* 1400 이하 */
@media (max-width: 1400px){
    .header{ width: 90%;}
    .container{ width: 90%;}
}

/* 1024 이하 */
@media (max-width: 1024px){
    .header{padding: 3vh 0;}
    .header .logo{width: 20%;}
    .gnb li {font-size: 1.8vw;}
    .tit24{font-size: 2vw;margin-bottom: 5vh;}
    .section1, .section2, .section3, .section4, .section5{padding: 11vh 0;}
    .section1 .text{width: 26.73%; top: 48%;}

    .section2 .top_txt em::before{width: 40px;height: 40px;}
    .section2 .top_txt em,
    .section2 .top_txt strong{font-size: 26px;}
    .section2 .top_txt .left{width: 180px; padding-left: 3vw;}
    .section2 .top_txt .right{font-size: 2vw;width: calc(100% - 180px);}
    .section2 .about_img{margin: 10vh auto;}
    .section2 .about_img img{width: 30%;}
    .section2 .bottom_txt{font-size: 2vw;}


    .section3 .card_box > div{width: 100%; justify-content: center;}
    .section3 .card{width: 33%; padding-top: 8.5vh;}
    .section3 .card .name{font-size: 2.6vw;margin-bottom: 1.8vh;}
    .section3 .card .fc_y{font-size: 1.8vw;margin-bottom: 1.8vh;}
    .section3 .card .cont{font-size: 1.6vw; line-height: 1.4;}
    .section3::after{line-height: 0.7;}

    .tit30{font-size: 2.6vw;margin-bottom: 5vh;}
    .section4 .timeline h5{font-size: 2vw; line-height: 1.8;}
    .section4 .timeline p{font-size: 1.6vw; padding-left: 1.2vw;}
    .section4 .timeline .box{padding-bottom: 5vh; padding-left: 2vw;}

    .section5 p{font-size: 1.8vw; margin-bottom: 5vh;}
    .footer{font-size: 1.6vw; padding: 3vh 0; }
}

/* 768 이하 */
@media (max-width: 768px){
    #wrap{padding-top: 100px;}
    .section1{}
    .section2, .section3, .section4, .section5{padding: 80px 0;}
    .header{flex-direction: column; gap: 15px; padding: 15px 0; width: 100%; align-items: flex-start;}
    .gnb{gap: 0; width: 100%;justify-content: space-between; border-top: 1px solid #d4d4d4;padding-top: 15px; padding-left: 20px;padding-right: 20px;}
    .header .logo{width: auto; padding-left: 20px;}
    .header .logo a{display: block;}
    .header .logo img{height: 22px;}
    .gnb li{font-size: 16px; line-height: 1;}

    .container{width: calc(100% - 40px);}
    .section1{ background:  url(../img/mv_bg.png) no-repeat center;
    background-size: auto 100%;
    aspect-ratio: 750 / 686;}

    .section1 .text{ top: 13%; left: 50%;transform: translateX(-50%);width: 50%;}
    .tit24{font-size: 24px; margin-bottom: 30px;}

    .section2 .top_txt .left{padding-top: 20px;}
    .section2 .about_img img{width: 40%;}
    .section2 .top_txt{justify-content: center; align-items: center; flex-direction: column; align-items: flex-start;}
    .section2 .bottom_txt{font-size: 16px;width: 100%;}
    .section2 .top_txt .right{font-size: 16px; width: 100%;text-align: left;}
    .section2 .about_img{margin: 50px auto;}

    .section4 .timeline{flex-wrap: wrap;}
    .section4 .timeline .line{width: 100%;}
    .section4 .timeline .box:nth-child(3){padding-bottom: 40px;}
    .section4 .timeline .box:nth-child(3)::after{height: 100%;}
    .section4 .timeline h5{font-size: 24px;}
    .section4 .timeline p{font-size: 16px;}
    .section4 .timeline .box{padding-left: 20px;padding-bottom: 40px;}

    .tit30{font-size: 26px; margin-bottom: 30px;}
    .section5 p{font-size: 16px; margin-bottom: 30px;}
    .footer{font-size: 16px;padding: 20px 0;}
    .section3 .card{padding-top: 12%; width: 48%; position: relative;}
    .section3 .card.type1:nth-child(1){margin: 0 20% 10px;}
    .section3 .card_box{gap: 10px;}
    .section3 .card_box > div{gap: 5px; flex-wrap: wrap; }
    .section3 .card .name{font-size: 4vw; margin-bottom: 7%;}
    .section3 .card .fc_y{font-size: 2.7vw; margin-bottom: 7%;}
    .section3 .card .cont{font-size: 2.3vw;}

}

@media (max-width: 500px){
    .section3 .card.type1:nth-child(1){margin: auto;}
    .section3 .card{width: 74%; padding-top: 18%;}
    .section3 .card .name{font-size: 25px;}
    .section3 .card .fc_y{font-size: 15px;}
    .section3 .card .cont{font-size: 3.5vw;}
    .section3::after{font-size: 21.5vw; left: -1%;right: auto;}
    .section4 .timeline p,
    .section5 p,
    .footer{font-size: 14px;}

}