@charset "utf-8";

/*
@작업자			:김유진
@작업완료일		:2025.05.09
@최종수정일		:2025.05.09
*/

html{scroll-behavior:smooth}
body{height:100%;background:#fff;touch-action:auto}

.main > div{padding:150px 0}
.inner{height:100%}
.main-tit{margin-bottom:80px;color:var(--color-primary);text-align:center;font-family:'JalnanGothic'}
.main-tit h2{margin-bottom:12px;font-size:2.8rem;color:var(--color-primary);line-height:160%;letter-spacing:0}
.main-tit p{font-size:6rem;line-height:130%;color:var(--color-brown)}
.main-tit .desc{margin-top:20px;font-size:2.4rem;color:#333;line-height:150%;letter-spacing:0}
.main-tit2{display: block;margin-bottom:20px;font-size:2.6rem;line-height:150%;font-weight:600;color:#333}

.list li:before{content:'•';color:var(--color-primary)}
.list li{margin-bottom:8px;line-height:160%;text-align:center;color:#333}
.list li img{border-radius:16px}

.card-list{display:flex;flex-wrap:wrap;gap:40px}
.card-list > li{width:calc(50% - 20px);padding:60px 32px 32px;border-radius:20px;background:#f1f1f5}
.card-list > li div{margin-bottom:32px}
.card-list > li img{border-radius:16px}

@media (max-width: 1920px){
    .main-tit{margin-bottom:60px}
    .main-tit h2{font-size:2.4rem}
    .main-tit p{font-size:5rem}
    .main-tit .desc{font-size:2.2rem}
}
@media (max-width: 1366px){
    .main > div{padding:120px 0}

    .main-tit{margin-bottom:40px}
    .main-tit h2{margin-bottom:4px;font-size:2rem}
    .main-tit p{font-size:4rem}
    .main-tit .desc{font-size:2rem}
    .main-tit2{font-size:2rem}
    
    .card-list{gap:20px}
    .card-list > li{width:calc(50% - 10px);padding:50px 24px 24px}
}
@media (max-width: 1024px){
    .main > div{padding:100px 0}
    .main-tit .desc{font-size:1.8rem}
}
@media (max-width: 768px){
    .main > div{padding:60px 0}
    
    .main-tit{margin-bottom:40px}
    .main-tit h2{font-size:1.6rem}
    .main-tit p{font-size:3rem}
    .main-tit .desc{margin-top:12px;font-size:1.6rem}
    .main-tit2{font-size:1.8rem}

    .card-list{flex-direction:column;gap:16px}
    .card-list > li{width:100%;padding:32px 16px 16px}
    .card-list > li div{margin-bottom:24px}
}

/* visual */
#home{padding:0}
.visual .swiper-slide:before{content:'';position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;background:rgba(0,0,0,.6)}
.visual .swiper-slide{display:flex;justify-content:center;align-items:center;position:relative;z-index:0;min-height:100vh;background:url('../img/main/img-visual1.png')no-repeat center / cover}
.visual .visual-tit{margin-bottom:60px;font-size:7rem;color:#fff;font-family:'JalnanGothic';text-align:center}
.visual .visual-desc{font-size:3.2rem;color:#fff;text-align:center}
@media (max-width: 1920px){
    .visual .visual-tit{font-size:5.8rem}
    .visual .visual-desc{font-size:2.8rem}
}
@media (max-width: 1366px){
    .visual .visual-tit{font-size:4.6rem}
    .visual .visual-desc{font-size:2rem}
}
@media (max-width: 768px){
    .visual .visual-tit{margin-bottom:40px;font-size:3.4rem}
    .visual .visual-desc{font-size:1.8rem}
}
@media (max-width: 480px){
    .visual .visual-tit{font-size:3rem}
}

/* vision */
#vision{margin-bottom:0}
.vision .mission{gap:20px;margin-bottom:120px}
.vision .mission li{display:flex;flex-direction:column;justify-content:space-between;width:calc(100%/3 - 14px)}
.vision .mission li:nth-child(n+4){width:calc(50% - 10px)}
.vision .mission li img{width:100%;height:300px;object-fit:cover;object-position:center}

.vision .value .main-tit{margin-bottom:20px}
.vision .value ul{display:flex;flex-wrap:wrap;gap:60px;margin:0 auto;padding:80px 40px;border-radius:20px/* ;background:#f1f1f5 */}
.vision .value li{width:calc(50% - 30px);text-align:center}
.vision .value li:before{content:'';flex-shrink:0;display:block;width:120px;height:120px;margin:0 auto 20px;background:no-repeat center / 100%}
.vision .value li:nth-child(1):before{background-image:url('../img/main/ico-mission1.png')}
.vision .value li:nth-child(2):before{background-image:url('../img/main/ico-mission2.png')}
.vision .value li:nth-child(3):before{background-image:url('../img/main/ico-mission3.png')}
.vision .value li:nth-child(4):before{background-image:url('../img/main/ico-mission4.png')}
.vision .value li strong{margin-bottom:8px}
.vision .value li p{font-size:2rem;line-height:160%}

@media (max-width: 1280px){
    .vision .mission li{width:calc(100%/2 - 10px)}
    .vision .mission li:last-child{width:100%}
    .vision .mission li img{height:260px}

    .vision .value ul{padding:40px}
    .vision .value li:before{width:100px;height:100px}
    .vision .value li p{font-size:1.7rem}
}
@media (max-width: 768px){
    .vision .mission{gap:16px;margin-bottom:60px}
    .vision .mission li{width:100%}
    .vision .mission li:nth-child(n+4){width:100%}
    .vision .mission li img{height:200px}
    
    .vision .value ul{gap:40px;padding:20px}
    .vision .value li{width:100%}
    .vision .value li:before{width:80px;height:80px}
    .vision .value li p{font-size:1.5rem}
}

/* history */
.history:before{content:'';position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;background:rgba(0,0,0,.7);}
.history{display:flex;align-items:center;position:relative;z-index:0;height:auto;background:url('../img/main/bg-history.png')no-repeat center / cover}
.history .main-tit{margin-bottom:120px;text-align:left}
.history .main-tit p{color:#fff}
.history-list{position:relative}
.history-list:after{content:'';position:absolute;top:4px;left:0;width:250%;height:1px;background:rgba(255,255,255,.25);transform:translateX(-50%)}
.history-list .swiper-slide:before{content:'';display:block;width:8px;height:8px;margin-bottom:60px;border-radius:50%;background:#fff}
.history-list .swiper-slide:after{content:'';position:absolute;top:-8px;left:-8px;z-index:-1;width:24px;height:24px;border-radius:50%;background:rgb(255,255,255,.25)}
.history-list .swiper-slide > strong{display:block;margin-bottom:24px;font-size:4rem;color:#fff;font-weight:600}
.history-list .swiper-slide li{display:flex;color:#bbb}
.history-list .swiper-slide li span{display:block;margin-right:16px;color:#fff;letter-spacing:0}
.history-list .swiper-slide li:not(:last-child){margin-bottom:12px}
.slide-btn{position:absolute;top:-150px;right:0;width:100px}
.slide-btn .swiper-button-prev,
.slide-btn .swiper-button-next{color:#fff}
.slide-btn .swiper-button-next:after, .slide-btn .swiper-button-prev:after{font-size:2.4rem}

@media (max-width: 1366px){
    .history-list .swiper-slide > strong{margin-bottom:12px;font-size:3rem}
}
@media (max-width: 768px){
    #history{padding:100px 0}
    .history .main-tit{margin-bottom:60px}
    .slide-btn{top:-83px}
}
@media (max-width: 480px){
    .history-list .swiper-slide > strong{font-size:2.4rem}
    .slide-btn{width:82px;top:-40px}
    .slide-btn .swiper-button-next:after, .slide-btn .swiper-button-prev:after{font-size:2rem}
}

/* business */
.business .card-list{align-items:flex-start}
.business .card-list > li:nth-child(2){margin-top:120px}
.business .card-list > li:nth-child(3){margin-top:-120px}

@media (max-width: 768px){
    .business .card-list > li:nth-child(2),.business .card-list > li:nth-child(3){margin-top:0}
}

/* program */
#program{margin-bottom:0;background:#fffbed}
.program-list > li{display:flex;overflow:hidden;height:460px;border-radius:240px}
.program-list > li:not(:last-child){margin-bottom:40px}
.program-list .main-tit2{margin-bottom:12px}
.program-list > li img{width:50%;height:100%;object-fit:cover}
.program-list > li:nth-child(2) img{order:2}
.program-list > li > div{display:flex;justify-content:center;align-items:center;width:50%;background:#fff}
.program-list > li > div p{width:fit-content;margin:0 auto 32px;padding:6px 24px;border-radius:20px;background:var(--color-primary);color:#fff;text-align:center}

@media (max-width: 1280px){
    .program-list > li{height:360px}
    .program-list > li > div p{margin:0 auto 20px}
}
@media (max-width: 1024px){
    .program-list > li{flex-direction:column;height:auto;border-radius:20px}
    .program-list > li:not(:last-child){margin-bottom:20px}
    .program-list > li img{width:100%;height:280px}
    .program-list > li:nth-child(2) img{order:-1}
    .program-list > li > div{width:100%;padding:32px 20px 20px}
}

/* organization */
.org-list{margin-bottom:60px}
.org-list > li{position:relative;text-align:center}
.org-list > li > strong::before{content:'';position:absolute;top:-16px;left:-16px;z-index:-1;width:calc(100% + 32px);height:calc(100% + 32px);border-radius:50%;background:#c6dfff}
.org-list > li > strong{display:inline-block;position:relative;width:150px;height:150px;margin-bottom:320px;padding-top:50px;border-radius:50%;background:#1459b3;font-size:2.4rem;color:#fff;font-weight:500}
.org-list > li > strong span{display:block;line-height:20px;letter-spacing:0}
.org-list > li > ul{display:flex;align-items:flex-start;gap:60px;position:relative}
.org-1 > li{flex:1;position:relative}
.org-1 > li > strong{display:block;margin-bottom:24px;padding:16px 40px;border-radius:12px;background:#09254b;font-weight:500;color:#fff}
.org-1 li > strong span{display:block;font-size:1.6rem;color:#bbb;letter-spacing:0}
.org-2 li{padding:16px 40px;border:1px solid #bbb;border-radius:12px;background:#f1f1f5;color:#333}
.org-2 li:not(:last-child){margin-bottom:12px}

/* organization - 위원회 */
.org-1.committee{position:absolute;top:200px;left:calc(50% + 150px)}
.org-1.committee > li{display:flex;align-items:flex-start}
.org-1.committee > li > strong{margin:0 32px 0 0;border:1px solid #1459b3;background:#e9eef9;color:#1459b3}

/* organization - 가로선 */
.org-1{position:relative}
.org-1:after{content:'';position:absolute;top:48px;left:0;z-index:-1;width:100%;height:1px;background:#000}
.org-1.committee:after{top:32px;left:-150px}
.org-1.committee .org-2{position:relative}
.org-1.committee .org-2:after{content:'';position:absolute;top:0;left:50%;z-index:-2;width:1px;height:100%;background:#000}

/* organization - 세로선 */
.org-list > li:after{content:'';position:absolute;top:0;left:50%;z-index:-2;width:1px;height:500px;background:#000}
.org-1 > li:after{content:'';position:absolute;top:0;left:50%;z-index:-1;width:1px;height:100%;background:#000}
.org-1.committee > li:after{display:none}

.org-list2{padding:60px 80px;border-radius:20px;background:#f1f1f5}
.org-list2 li{display:flex;align-items:center}
.org-list2 li:not(:last-child){margin-bottom:20px}
.org-list2 strong{min-width:160px;font-size:2rem;font-weight:600;color:#333}

@media (max-width: 1366px){
    .org-list > li > strong{font-size:2rem}
    .org-2 li{padding:12px 16px}
    /* organization - 위원회 */
    .org-1.committee > li > strong{padding:12px 16px}
    /* organization - 가로선 */
    .org-1.committee:after{top:26px}

    .org-list2{padding:50px}
}
@media (max-width: 1024px){
    .org-list > li > strong{width:120px;height:120px;margin-bottom:280px;padding-top:38px;font-size:1.8rem}
    .org-1 li > strong span{font-size:1.4rem}
    /* organization - 위원회 */
    .org-1.committee{top:180px;left:calc(50% + 50px)}
    .org-1.committee > li > strong{margin:0 24px 0 0}
    /* organization - 가로선 */
    .org-1.committee:after{left:-49px}

    .org-list2{padding:40px 32px}
    .org-list2 li{align-items:flex-start}
    .org-list2 strong{min-width:140px;font-size:1.6rem}
    .org-list2 li:not(:last-child){margin-bottom:12px}
}
@media (max-width: 768px){
    .org-list > li > strong{width:100px;height:100px;margin-bottom:312px;padding-top:28px;font-size:1.6rem}
    .org-list > li > ul{gap:32px}
    .org-1{flex-direction:column}
    .org-1 > li{width:100%}
    .org-1 > li > strong{margin-bottom:12px}
    .org-2 li:not(:last-child){margin-bottom:8px}
    /* organization - 위원회 */
    .org-1.committee{top:160px;left:50%;transform:translateX(-50%)}
    .org-1.committee > li{flex-direction:column}
    .org-1.committee > li > strong{width:100%;margin:0 0 12px 0}
    /* organization - 가로선 */
    .org-1.committee:after{display:none}
    /* organization - 세로선 */
    .org-list > li:after{height:100%}

    .org-list2{padding:32px 24px}
    .org-list2 li{flex-direction:column}
    .org-list2 li:not(:last-child){margin-bottom:20px}
    .org-list2 strong{margin-bottom:8px}
}

/* contact */
#contact{position:relative;z-index:0;padding:120px 0 100px;background:url('../img/main/bg-contact.jpg') no-repeat center / cover;color:#ddd}
.contact:before{content:'';position:absolute;top:0;left:0;;z-index:-1;width:100%;height:100%;background:rgba(0,0,0,.5)}
.contact .con-wrap{text-align:center}
.contact .con-wrap > p:first-child{/*margin-bottom:60px;*/font-size:4rem;line-height:160%}
.contact .con-wrap span{display:block}
.contact .con-wrap strong{font-weight:500;color:#fff}
.contact .con-wrap > p:nth-child(2) strong{display:inline-block;margin-right:8px}
.contact .con-wrap p{margin-bottom:8px;font-size:2.2rem}
.contact .con-wrap div{display:flex;justify-content:center;gap:20px}
.contact .con-wrap div p strong{letter-spacing:0}
.contact .con-wrap div p a{color:#ddd;letter-spacing:0}

@media (max-width: 1366px){
    #contact{padding:80px 0 70px}
    .contact .con-wrap > p:first-child{font-size:3.2rem}
    .contact .con-wrap p{font-size:2rem}
}
@media (max-width: 1024px){
    .contact .con-wrap > p:first-child{margin-bottom:40px;font-size:2.8rem}
    .contact .con-wrap p{font-size:1.8rem}
    
}
@media (max-width: 768px){
    .contact .con-wrap > p:first-child{margin-bottom:32px;font-size:2.2rem}
    .contact .con-wrap p:nth-child(2){margin-bottom:8px}
    .contact .con-wrap p{margin-bottom:0;font-size:1.6rem}
    .contact .con-wrap div{flex-direction:column;gap:0}
}
@media (max-width: 480px){
    .contact .con-wrap span{display:inline}
}