/* hero */
.main .hero{position: relative;padding: 0 0 100px;}
.main .hero::after{position: absolute;height: 100px;width: 1px;background: linear-gradient(to bottom, #fff 50%, #0169C5 50%);bottom: 50px;left: 50%;content: '';transform: translateX(-50%);}

.main .top-hero{position: relative;border-radius: 0 0 min(5.5vw,110px) min(5.5vw,110px);overflow: hidden;}
.main .top-hero .video-mv{max-width: 100%;vertical-align: bottom;}
.main .top-hero .txt-mv{position: absolute;top: 55%;left: 50%;transform: translate(-50%,-50%);text-align: center;}
.main .top-hero .txt-mv h3{font-size: min(2.5vw,3.2rem);font-weight: 600;color: #0169C5;line-height: 1.65;letter-spacing: 0.1em;margin: 0 0 min(4vw,75px);}
.main .top-hero .txt-mv h2{font-size: min(3.5vw,7rem);font-weight: 600;line-height: 1.3;color: #fff;text-shadow: 0 3px 10px #03335D;}
.main .top-hero .btn-scroll{position: absolute;left: 50%;bottom: min(6vw,60px);color: #fff;transform: translateX(-50%);font-weight: 600;letter-spacing: 0.05em;}
.main .top-hero .btn-scroll span {display: inline-block;position: relative;animation: fallDown 3s linear infinite;}
@keyframes fallDown {
    0% { transform: translateY(0%); opacity: 0; } 
    20% { opacity: 1; } 
    80% { opacity: 1; transform: translateY(0); } 
    100% { transform: translateY(30%); opacity: 0; }
}
@media (max-width: 1000px){
    .main .top-hero .txt-mv h3{margin: 0 0 min(3vw,75px);}
    .main .hero{position: relative;padding: 0 0 70px;}
    .main .hero::after{position: absolute;height: 70px;width: 1px;background: linear-gradient(to bottom, #fff 50%, #0169C5 50%);bottom: 35px;left: 50%;content: '';transform: translateX(-50%);}

}
@media (min-width: 769px){
    .main .hero .video-mv{width: 100%;}
}
@media (max-width: 768px){
    .main .top-hero{height: 650px;border-radius:0 0 80px 80px;}
    .main .top-hero .video-mv{height: 100%;width: 100vw;object-fit: cover;object-position: center;}
    .main .top-hero .txt-mv {width: 100%;top: 60%;}
    .main .top-hero .txt-mv h3{font-size: 3.2rem;margin-bottom: 3rem;}
    .main .top-hero .txt-mv h2{font-size: 4rem;}
    .main .top-hero .txt-mv a{font-size: 2.3vw;line-height: 1;background: #EF7626;letter-spacing: 0.2em;display: block;max-width: 35vw;margin:10vw 0 0;text-align: center;color: #fff;padding:3vw 0;border-radius: 100px;position: relative;padding-right: 35px;transition: all 0.4s;}
    .main .top-hero .txt-mv a::after{content: '';background: url(../img/icon-fly.png) center center /100% 100% no-repeat;width: min(3vw,35px);height: min(2.5vw,25px);position: absolute;top: 50%;right: 20px;display: inline-block;transition: all 0.4s;transform: translateY(-50%);}
    .main .top-hero .txt-mv a:hover{background: #000;}
    .main .top-hero .txt-mv a:hover::after{right: 15px;top: 45%;}
    .main .top-hero .btn-scroll{bottom: 45px;}
}
@media (max-width: 380px){
    .main .top-hero .txt-mv h3{font-size: 2.2em;margin-bottom: 3rem;}
    .main .top-hero .txt-mv h2{font-size: 3.6rem;}
}
/* vision */
.vision{padding:min(16vw,160px) 0 min(19vw,190px);position: relative;}
.vision::before{content: '';width: 100%;height: calc(100% - 90px);background: #F6F6F6;position: absolute;top: 0;left: 0;border-radius: min(5vw,50px);z-index: -1;}
.vision::after{background: url('../img/bg-vision_bottom.png') no-repeat;background-size: cover;width: 1020px;height: 120px;position: absolute;bottom: 0;left: 50%;content: '';background-position: center;transform: translateX(-50%);}
.vision .m-tit::before{content: '';color: #F1F1F1;background: url('../img/vision.svg') no-repeat; width: 1175px;height: 204px;z-index: -1;top: -100%;background-size: contain;transform: translate(-50%,5%);}

.vision .inner{margin: min(10vw,100px) 0 0;}
.vision .inner .expand{width: 62.6%;}
.vision .inner .expand .expand-tit{text-align: center;background: #23A1FF;border: 2px solid #000000;border-radius: 11px;color: #fff;font-size: min(2.4vw,2.4rem);font-weight: 600;line-height: 1.45;padding: min(1.6vw,16px) 0;margin: 0 0 35px;}
.vision .inner .expand .list-item .item{width: 40.0958%;text-align: center;border: 2px solid #000;border-radius: 14px;background: #fff;padding:5px 0 35px;position: relative;}
.vision .inner .expand .list-item .item p{font-weight: 500;letter-spacing: 0.05em;margin: 24px 0 0;}
.vision .inner .expand .list-item .item:nth-of-type(1)::after{content: '';position: absolute;background: url('../img/arrow-black.png') no-repeat;width: 83px;height: 32px;right:-83px;top: 50%;transform: translateY(-50%);}

.vision .inner .box-arca{width: 25.1%;display: flex;flex-direction: column;justify-content: space-between;}
.vision .inner .box-arca >p{margin: 0 0 20px;}
.vision .inner .box-arca .item{text-align: center;border: 2px solid #FE6445;border-radius: 14px;background: #fff;padding:5px 0 35px;position: relative;}
.vision .inner .box-arca .item p{font-weight: 500;letter-spacing: 0.05em;margin: 24px 0 0;}
.vision .inner .box-arca .item::after{content: '';position: absolute;background: url('../img/arrow-orange.png') no-repeat;width: 83px;height: 32px;left:-83px;top: 50%;transform: translateY(-50%);}

@media (max-width: 1020px){
    .vision::after {background-size: 70%;}
}
@media (max-width: 768px){
    .vision{padding: 40px 0;}
    .vision::after {display: none;}
    .vision::before {height: 100%;}
    .vision .inner {display: block;margin-top: 40px;}
    .vision .m-tit::before{top: -40%;}
    .vision .inner .box-arca{display: none;}
    .vision .inner .photo{text-align: center;width: 80%;margin: 0 auto;}
    .vision .inner .photo img{width: 100%;}
}
@media (max-width: 576px){
    .vision .inner .photo{width: 100%;}
}
/* method */
.method{padding: min(16.5vw,165px) 0 min(10vw,10rem);}
.method .m-tit::before{content: '';color: #F1F1F1;background: url('../img/method.svg') no-repeat;width: 1429px;height: 204px;z-index: -1;top: -45%;background-size: contain;transform: translate(-50%,5%);}

.method .box-method{margin: min(9vw,90px) 0 0;}
.method .box-method .s-tit{margin: 0 0 50px;}
.method .box-method .method-diagram{padding: 0 0 75px;position: relative;}
.method .box-method .method-diagram::after{content: '';position: absolute;background: url('../img/arrow-down.png') center center/100% 100% no-repeat;width: 90px; height: 48px;bottom: 0;left: 50%;transform: translateX(-50%);}
.method .box-kpi{background: #000;color: #fff;padding:min(3.6vw,36px) 0 min(3.2vw,32.5px) ;font-size: min(2.6vw,3.2rem);font-weight: 500;line-height: 1.4375;text-align: center;border-radius: 24px;margin-top: 25px;}
@media (max-width: 768px){
    .method{padding: 40px 0;}
    .method .m-tit::before {top: -15%;}
    .method .box-method {margin: 9vw 0 0;}
    .method .box-method .method-diagram{padding: 0;text-align: center;width: 80%;margin: 0 auto;}
    .method .box-method .method-diagram img{width: 100%;}
    .method .box-method .method-diagram::after {width: 45px;height: 24px;display: none;}
    .method .box-kpi{border-radius: 12px;font-size: 2.4rem;padding: 20px 0;display: none;}
}
@media (max-width: 576px){
    .method .box-kpi{font-size: 4vw;}
    .method .box-method .method-diagram{width: 100%;}
}

/* reason */
.reason{padding: min(17vw,170px) 0 min(10vw,100px);background: #EDF5FF;}
.reason .m-tit::before{content: '';color: #F1F1F1;background: url('../img/reason.svg') no-repeat;width: 1345px;height: 204px;z-index: -1;top: -80%;background-size: contain;transform: translate(-50%,5%);}
.reason .box-roles{margin: 50px 0 0;padding: min(6.5vw,65px) 0 min(5vw,50px);position: relative;z-index: 2;}
.reason .box-roles::before{width: 100%;height: 100%;background: #23A1FF;position: absolute;content: '';top: 0;left: -100%;}
.reason .box-roles::after{width:85%;height: 100%;background: #23A1FF;position: absolute;content: '';top: 0;left: 0;z-index: -1;border-radius: 0 0 100px 0;}
.reason .box-roles .tit-roles{font-size: 2rem;font-weight: 600;color: #fff;text-align: center;line-height: 1.6;margin: 0 0 20px;}
.reason .box-roles .sub-tit-roles{text-align: center;color: #fff;}
.reason .list-point{margin: min(7vw,70px) 0 0;}
.reason .list-point .point{width: 30%;background: #fff;text-align: center;padding: 20px 30px 30px;box-shadow: 0 3px 6px rgba(1, 105, 197, 0.3);}
.reason .list-point .point .point-num{font-weight: 600;margin: 0 0 30px;}
.reason .list-point .point h5{font-weight: 700;color: #FE6445;line-height: 3.25;margin: 30px 0 0}
.reason .list-point .point .txt{text-align: left;font-weight: 500;}

@media (max-width: 768px){
    .reason{padding:60px 0;}
    .reason .box-roles{background: #23A1FF;}
    .reason .m-tit::before {top: -70%;}
    .reason .box-roles::after {left: unset;width: 100%;right: -100%;}
    .reason .list-point .point{width: 100%;margin-bottom: 20px;display: flex;justify-content: space-between;padding: 10px;}
    .reason .list-point .point:last-child{margin-bottom: 0;}
    .reason .list-point .point .point-left{width: 120px;}
    .reason .list-point .point .point-right{width: calc(100% - 140px);text-align: left;}
    .reason .list-point .point .point-num{margin-bottom: 0;font-size: 1.6rem;}
    .reason .list-point .point h5{margin-top: 0;line-height: 2;font-size: 1.6rem;margin-bottom: 10px;}
}
@media (max-width: 640px){
    .reason .list-point .point .point-left{width: 80px;}
    .reason .list-point .point .point-right{width: calc(100% - 95px);}
    .reason .list-point .point h5{font-size: 1.5rem;}
}
/* flow */

.flow{padding: min(17.3vw,173px) 0 min(10vw,100px);;background: #F6F6F6;position: relative;}
.flow::after{width: 100%;height: 50%;content: '';background: #F6F6F6;bottom: -170px;left: 0%;position: absolute;z-index: -1;}
.flow .m-tit::before{content: '';color: #F1F1F1;background: url('../img/flow.svg') no-repeat;width: 918px;height: 204px;z-index: -1;top: -100%;background-size: contain;transform: translate(-50%,5%);}
.flow .box-steps{margin: min(10vw,100px) 0 0;}
.flow .box-steps .s-tit{margin: 0 0 min(5vw,50px);}
@media (max-width: 768px){
    .flow{padding: 40px 0;}
    .flow .m-tit::before {top: -80%;}
    .flow .box-steps{margin: 9vw 0 0;}
    .flow .box-steps .s-tit{margin: 0 0 40px;}
    .flow .photo{text-align: center;width: 80%;margin: 0 auto;}
    .flow .photo img{width: 100%;}
}
@media (max-width: 576px){
    .flow .photo{width: 100%;}
}
@media (max-width: 1429px){
    .m-tit::before{width: 100% !important;}
}
/* contact */
.contact{max-width: 1796px;width: calc(100% - 40px);;margin: 0px auto 0;background: #EF7626;border-radius: 11px;box-shadow: 0 3px 6px rgba(0, 0, 0, 0.47);padding: min(10vw,100px) 0;position: relative;}

.contact .inner{display: flex;justify-content: space-between;align-items: center;}
.contact .inner .text{width: 50%;}
.contact .inner .text h4{font-size: min(2.4vw,2.4rem);font-weight: 600;line-height: 2.5;color: #fff;position: relative;z-index: 2;}
.contact .inner .text p{font-size: 1.3rem;line-height:1.7;font-weight: 600;margin-top: 8px;}
.contact .inner .text h4::after{content: '';position: absolute;top: -40%;left: 0;line-height: 0;z-index: -1;background: url('../img/contact_en.svg') no-repeat;background-size: contain;width: 100%;height: 100%;}
.contact .inner .btn{width: 50%;}
.contact .inner .btn a{margin: 0 auto;max-width:min(40vw,445px); background: linear-gradient(30deg, #0C82F0, #5EBAFF);font-size: min(2.6vw,2.6rem);letter-spacing: 0.2em;display: block;padding:14px 0;text-align: center;border-radius: 100px;border: 2px solid #fff;color: #fff;position: relative;transition: all 0.4s;}
.contact .inner .btn a::after{content: '';background: url(../img/icon-fly.png) right top /100% 100% no-repeat;width: 35px;height: 25px;position: absolute;top: 50%;right: 11.5%;display: inline-block;transform: translateY(-50%);transition: all 0.4s;}
.contact .inner .btn a:hover{background: #000;}
.contact .inner .btn a:hover::after{right: 8.5%;}
@media (max-width: 768px){
    .contact{padding: 40px 0;border-radius: 0;width: 100%;}
    .contact::after{display: none;}
    .contact .inner{flex-wrap: wrap;}
    .contact .inner .text h4::after {font-size: 10vw;}
    .contact .inner .text h4{font-size:3.2rem;}
    .contact .inner .text{width: 100%;margin-bottom: 10vw;}
    .contact .inner .btn{width: 100%;}
    .contact .inner .btn a{padding: 10px 0;padding-right: 15px;}
    .contact .inner .btn a::after {right: 25px;width: 30px;height: 20px;}
    .contact .inner .btn a:hover::after {right: 20px;}
}
@media (max-width: 576px){
    .contact .inner .btn a{max-width: 360px;font-size: 5vw;}
    .contact .inner .text h4{font-size: 5.5vw;}
}