@charset "UTF-8";

/* main common */
.main-tit{margin-bottom:14px;font-weight:600;font-size:2.6rem;font-family:var(--family-point);color:#1C47D4;line-height:110%;letter-spacing:0}
.main-txt{font-weight:400;font-size:4.8rem;font-family:var(--family-point);color:#222;line-height:120%}
.main-txt span{font-weight:600}
.main-desc{margin-top:30px;font-weight:500;font-size:2rem;color:#222;line-height:140%}
.main-desc span{font-weight:700;color:#0051CA}
@media (max-width:1366px){
    .main-txt br{display:none}
}
@media (max-width:1280px){
    .main-txt{font-size:4.2rem}
    .main-desc{font-size:1.8rem}
}
@media (max-width:1024px){
    .main-txt{font-size:3.6rem}
}
@media (max-width:768px){
    .br{display:none}

    .main-tit{margin-bottom:10px;font-size:2rem}
    .main-txt{font-size:2.7rem}
}
/* //main common */

.quick{display:block}
@media (max-width:768px){
    .quick{display:none}
}

/* visual */
.visual{overflow:hidden}
.visual-box{width:100vw;height:100vh}
.visual .txt-box1{padding:226px 40px 67px;text-align:center;font-family:'WantedSans'}
.visual .txt-box1 p:first-child{margin-bottom:17px;font-weight:500;font-size:clamp(66px, 2.75vw, 120px);color:#333;line-height:150%}
.visual .txt-box1 p:first-child strong{font-weight:700;color:#1C47D4}
.visual .txt-box1 p:last-child{font-size:2.6rem;color:#767676;line-height:130%}
.video-box{overflow:hidden;position:absolute;bottom:-90px;left:50%;z-index:2;width:40%;height:62%;border-radius:20px;transform:translateX(-50%)}
.visual .video video{width:100vw;height:100vh;position:absolute;top:50%;left:50%;max-width:none;transform:translate(-50%, -50%);object-fit:cover}
.visual .txt-box2:before{content:'';position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;background:rgba(0,0,0,.7)}
.visual .txt-box2{display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;top:0;left:0;z-index:3;width:100%;height:100%;padding:40px;opacity:0;transition:opacity 0.3s ease;pointer-events:none}
.visual .txt-box2 p{text-align:center}
.visual .txt-box2 p span{display:block;background:linear-gradient(to right, #fff 0%, rgba(255,255,255,.2) 0%);background-clip:text !important;font-weight:700;font-size:4.6rem;line-height:2;letter-spacing:-1.4px;-webkit-background-clip:text !important;-webkit-text-fill-color:transparent}
.visual .txt-box2 strong{font-weight:600;font-size:5.3rem}
.mb-visual{display:none}
@media (max-width:1920px){
    .video-box{width:30%}
}
@media (max-width:1500px){
    .visual .txt-box2 p span{font-size:3.8rem}
    .visual .txt-box2 strong{font-size:4.7rem}
}
@media (max-width:1280px){
    .visual .txt-box1{padding:150px 32px}
    .visual .txt-box1 p:first-child{margin-bottom:6px;font-size:clamp(55px, 2.75vw, 120px)}
    .video-box{width:50%}
    .visual .txt-box2 p span{font-size:3.1rem}
    .visual .txt-box2 strong{font-size:3.7rem}
}
@media (max-width:1024px){
    .visual .txt-box1{padding:190px 24px}
    .visual .txt-box1 p:first-child{font-size:4.5rem}
    .visual .txt-box1 p:last-child{font-size:2.2rem}
    .visual .txt-box2 p span{display:inline;font-size:3rem}
    .visual .txt-box2 strong{font-size:3.7rem}
}
@media (max-width:768px){
    .visual .txt-box1{padding:100px 20px}
    .visual .txt-box1 p:first-child{margin-bottom:20px;font-weight:400;font-size:clamp(34px, 2.75vw, 120px)}
    .visual .txt-box1 p:first-child strong{font-weight:600}
    .visual .txt-box1 p:last-child{font-size:1.8rem}
    .visual .txt-box1 p span{display:block}
    .video-box{width:calc(100% - 48px);height:calc(100% - 228px)}
    .visual .video video{width:100%;height:100%}
}
@media (max-width:481px){
    .visual .txt-box2 p span{font-weight:300;font-size:2.6rem;line-height: 1.5;}
    .visual .txt-box2 strong{font-size:2.6rem}
}

/* company */
.company{overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;padding:300px 0}
.company-list li{margin-bottom:28px;font-weight:500;font-size:5rem;line-height:160%;text-align:center;color:#ddd;transition:all .4s}
.company-list li.active{font-weight:800;font-size:7.6rem;color:#222}
.company-list li.active:before{content:'[ '}
.company-list li.active:after{content:' ]'}
.company-bg{position:absolute;z-index:-1;top:0;width:100%;height:100%}
.company-bg div{overflow:hidden;position:absolute;width:200px;height:200px;border-radius:50%}
.company-bg div:nth-child(1){top:286px;left:calc((100% - 1400px) / 2 - 14px)}
.company-bg div:nth-child(2){top:394px;right:calc((100% - 1400px) / 2 - 144px)}
.company-bg div:nth-child(3){bottom:305px;left:calc((100% - 1400px) / 2 - 160px)}
.company-bg div:nth-child(4){bottom:200px;right:calc((100% - 1400px) / 2)}
@media (max-width:1550px){
    .company{padding:210px 0}
    .company-bg div:nth-child(1){top:100px;left:6%}
    .company-bg div:nth-child(2){top:260px;right:6%}
    .company-bg div:nth-child(3){left:10%;bottom:230px}
    .company-bg div:nth-child(4){right:11%;bottom:110px}
}
@media (max-width:1280px){
    .company{padding:150px 0}
    .company-list li{margin-bottom:20px;font-size:4rem}
    .company-list li.active{font-size:5.6rem}
    .company-bg div:nth-child(1){top:66px}
    .company-bg div:nth-child(2){top:232px}
    .company-bg div:nth-child(3){bottom:128px}
    .company-bg div:nth-child(4){bottom:20px}

}
@media (max-width:1024px){
    .company{padding:100px 0}
    .company-list li{margin-bottom:15px;font-size:3rem}
    .company-list li.active{font-size:4.5rem}
    .company-bg div{width:120px;height:120px}
    .company-bg div:nth-child(2){top:160px}
}
@media (max-width:768px){
    .company{flex-direction:column;min-height:auto;padding:90px 0}
    .company-list{margin-bottom:33px}
    .company-list li{margin-bottom:10px}
    .company-bg{display:flex;flex-direction:row-reverse;justify-content:center;position:relative;text-align:center}
    .company-bg div{display:inline-block;position:unset;margin-left:-20px}
    .company-bg div:nth-child(1){order:3;top:130px;margin-left:0}
    .company-bg div:nth-child(2){order:1;top:280px}
    .company-bg div:nth-child(3){order:2;bottom:235px}
    .company-bg div:nth-child(4){bottom:120px}
}
@media screen and (max-width:480px){
    .company-list li{margin-bottom:10px;font-size:2.6rem}
    .company-list li.active{font-size:3.4rem}
    .company-bg div{width:80px;height:80px}
    .company-bg div{width:98px;height:98px}
}

/* Business */
.business{display:flex;align-items:center;overflow:hidden;padding:150px 0;background:#f5f5f5}
.business .tit-box{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:38px}
.business .tit-box > div{flex-shrink:0}
.main-business-list{position:relative}
.main-business-list .swiper-wrapper{margin-bottom:40px}
.main-business-list .swiper-slide{display:flex;justify-content:center;overflow:hidden;position:relative;z-index:0;width:1400px;height:auto;padding:120px 0;border-radius:30px;color:#fff;background:no-repeat center / cover}
.main-business-list .swiper-slide:nth-child(1){background-image:url('/asset/www/images/main/bg-business01.jpg')}
.main-business-list .swiper-slide:nth-child(2){background-image:url('/asset/www/images/main/bg-business02.jpg')}
.main-business-list .swiper-slide:nth-child(3){background-image:url('/asset/www/images/main/bg-business03.jpg')}
.main-business-list .swiper-slide:nth-child(4){background-image:url('/asset/www/images/main/bg-business04.jpg')}
.main-business-list .swiper-slide:after{content:'';position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;background:rgba(0,0,0,.4);backdrop-filter:blur(4px)}
.main-business-list .swiper-slide:nth-child(1):after{background:rgba(0,0,0,.08)}
.main-business-list .swiper-slide > div{display:flex;align-items:center;justify-content:space-between;width:1093px}
.main-business-list .swiper-slide > div:after{content:'';display:block;width:100%;height:1px;background:rgba(255,255,255,.5)}
.main-business-list .swiper-slide div div{flex-shrink:0;width:54%;margin-right:132px}
.main-business-list .swiper-slide div div strong{display:block;margin-bottom:10px;font-weight:800;font-size:6rem;line-height:120%;letter-spacing:0}
.main-business-list .swiper-slide > div div p{margin-bottom:43px;font-weight:500;font-size:2rem;line-height:140%;letter-spacing:0}
.main-business-list .swiper-slide > div a{flex-shrink:0;order:1;position:relative;width:50px;height:50px;border:1px solid #ddd;border-radius:50%;margin-left:40px}
.main-business-list .swiper-slide > div a:before,.main-business-list .swiper-slide > div a:after{content:'';position:absolute;top:50%;left:50%;background:#15e8ff;transform:translate(-50%,-50%);transition:all ease-in .2s;-webkit-transition:all ease-in .2s;-moz-transition:all ease-in .2s;-ms-transition:all ease-in .2s}
.main-business-list .swiper-slide > div a:before{width:14px;height:2px}
.main-business-list .swiper-slide > div a:after{width:2px;height:14px}
.keyword-list{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.keyword-list li{padding:8px 20px;border:1px solid #15E8FF;border-radius:20px;font-weight:400;font-size:1.6rem;line-height:140%;letter-spacing:0}
.main-business-list .pagination-wrap{display:none;overflow-x:auto;overflow-y:hidden;position:relative;top:0;left:50%;width:100%;height:30px;transform:translateX(-50%)}
.main-business-list .swiper-pagination{display:flex;gap:10px;position:unset}
.main-business-list .swiper-pagination .swiper-pagination-bullet{flex-shrink:0;width:auto;height:auto;background:#f5f5f5;font-weight:500;font-size:2rem;color:#747474}
.main-business-list .swiper-pagination .swiper-pagination-bullet-active{font-weight:700;color:#1C47D4}
.main-business-list .swiper-button-next, .main-business-list .swiper-button-prev{top:50%;color:#fff}
.main-business-list .swiper-button-next, .main-business-list .swiper-rtl .swiper-button-prev{right:24px}
.main-business-list .swiper-button-prev, .main-business-list .swiper-rtl .swiper-button-next{left:24px}
.main-business-list .swiper-button-next:after, .main-business-list .swiper-button-prev:after{font-size:32px}
.custom-pagination{position:relative;width:100%;height:6px;border-radius:4px;background:#ddd}
.custom-progress{position:absolute;top:0;left:0;width:0;height:100%;border-radius:4px;background:#0051CA;opacity:0;transition:left 0.3s ease, opacity 0.1s ease;;cursor:pointer}
@media (max-width:1550px){
    .main-business-list .swiper-slide > div{width:80%}
}
@media (max-width:1280px){
    .business{padding:120px 0}
    .business .tit-box{flex-direction:column;align-items:flex-start;gap:20px;text-align:center}
    .business .tit-box > div{width:100%}
    .business .main-desc{width:100%;margin-top:0}
    .business .tit-box .br{display:none}
    .main-business-list .swiper-slide div div strong{font-size:5rem}
}
@media (min-width: 1024px) {
    .main-business-list .swiper-slide > div a:hover{background:rgba(0,0,0,.5)}
    .main-business-list .swiper-slide > div a:hover:before,.main-business-list .swiper-slide > div a:hover:after{background:#fff;transform:rotate(45deg)}
    .main-business-list .swiper-slide > div a:hover:before{top:37%;left:38%}
    .main-business-list .swiper-slide > div a:hover:after{top:44%}
}
@media (max-width:1024px){
    .main-business-list .swiper-slide{padding:150px 0}
    .main-business-list .swiper-slide > div{display:block}
    .main-business-list .swiper-slide > div:after{display:none}
    .main-business-list .swiper-slide div div{width:100%;margin-right:0}
    .main-business-list .swiper-slide div div strong{font-size:4rem}
    .main-business-list .swiper-slide > div a{position:absolute;top:40px;right:40px}
    .keyword-list li{font-size:1.4rem}
}
@media (max-width:768px){
    .business{min-height:auto;padding:85px 0}
    .business .tit-box{margin-bottom:29px}
    .business .main-txt span:first-child{font-weight:400}
    .business .main-desc{display:none}
    .main-business-list .swiper-slide{border-radius:12px}
    .main-business-list .swiper-slide div div strong{font-size:3.6rem}
    .main-business-list .swiper-wrapper{margin:12px 0 32px}
    .main-business-list .swiper-slide{padding:76px 0}
    .main-business-list .swiper-slide > div div p{margin-bottom:20px;font-size:1.6rem}
    .main-business-list .swiper-slide > div a{position:absolute;top:20px;right:20px;width:32px;height:32px}
    .main-business-list .swiper-slide > div a:before{width:9px}
    .main-business-list .swiper-slide > div a:after{height:9px}
    .main-business-list .pagination-wrap{display:block}
    .main-business-list .swiper-button-next, .main-business-list .swiper-button-prev{display:none}
    .keyword-list{gap:5px}
    .keyword-list li{padding:5px 15px;font-weight:500}
}

/* Partner */
.partner{overflow:hidden;padding:210px 0}
.partner .tit-box{margin-bottom:60px;text-align:center}
.partner-list ul{display:flex;margin-bottom:50px}
.partner-list ul:nth-child(2){justify-content:flex-end}
.partner-list ul li{flex-shrink:0;display:flex;justify-content:center;align-items:center;padding:0 60px}
@media (max-width:1920px){
    .partner-list ul li{padding:0 44px}
}
@media (max-width:1280px){
    .partner{padding:120px 0}
    .partner-list ul{margin-bottom:32px}
    .partner-list ul li{padding:0 12px}
    .partner-list ul li img{width:80%}
}
@media (max-width:768px){
    .partner{padding:85px 0}
    .partner-list ul{margin-bottom:16px}
    .partner-list ul li{padding:0}
}

/* Social Media */
.sns{padding-bottom:100px}
.sns .main-con-wrap{display:flex;justify-content:space-between}
.sns .tit-box{position:sticky;top:120px;height:fit-content}
.sns-list{display:flex;flex-wrap:wrap;gap:60px;max-width:912px}
.sns-list ul{width:calc(50% - 30px)}
.sns-list ul:last-child{padding-top:60px}
.sns-list ul li:not(:last-child){margin-bottom:40px}
.sns-list ul li .thumb{overflow:hidden;margin-bottom:16px;border:1px solid #f0f0f0;border-radius:20px}
.sns-list ul li img{display:block;width:100%;height:auto;object-fit:contain;transition:transform 0.3s ease}
.sns-list ul li:hover img{transform:scale(1.05)}
.sns-list ul li.facebook img{background:#fff}
.sns-list ul li span:before{content:'';width:25px;height:25px;background:no-repeat center / 100%}
.sns-list ul li span{display:flex;align-items:center;gap:5px;margin-bottom:10px;font-weight:700;font-size:1.8rem}
.sns-list ul li.youtube span:before{background-image:url('/asset/www/images/main/ico_sns_youtube.svg')}
.sns-list ul li.youtube span{color:#FF0302}
.sns-list ul li.facebook span:before{background-image:url('/asset/www/images/main/ico_sns_facebook.svg')}
.sns-list ul li.facebook span{color:#0866FF}
.sns-list ul li p{overflow:hidden;display:-webkit-box;color:#333;font-weight:500;font-size:1.8rem;line-height:130%;letter-spacing:-.8px;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sns-list ul li.youtube p{font-weight:700;font-size:2rem;-webkit-line-clamp:1}

@media (max-width:1366px){
    .sns .main-con-wrap{flex-direction:column}
    .sns .tit-box{position:unset;margin-bottom:60px;text-align:center}
    .sns-list{gap:40px;margin:0 auto}
    .sns-list ul{width:calc(50% - 20px)}
}
@media (max-width:1024px){
    .sns-list{gap:24px}
    .sns-list ul{width:calc(50% - 12px)}
    /* .sns-list ul li.youtube img,.sns-list ul li.facebook img{height:auto} */
    .sns-list ul li p{font-size:1.6rem}
    .sns-list ul li.youtube p{font-size:1.8rem}
}
@media (max-width:768px){
    .sns{padding:20px 0 78px}
    .sns .tit-box{margin-bottom:25px}
    .sns .main-desc{display:none}
    .sns-list{gap:12px}
    .sns-list ul{width:calc(50% - 6px)}
    .sns-list ul:last-child{padding-top:40px}
    .sns-list ul li:not(:last-child){margin-bottom:32px}
    .sns-list ul li .thumb{margin-bottom:10px;border-radius:12px}
    .sns-list ul li span{margin-bottom:4px}
    .sns-list ul li p{font-size:1.4rem;-webkit-line-clamp:1}
    .sns-list ul li.youtube p{font-size:1.4rem}
}
@media (max-width:375px){
    .sns-list ul{width:100%}
    .sns-list ul:last-child{padding-top:12px}
}