@charset "utf-8";


.sec1 .fp-scroller{width: 100%; height: 100%;}
.sec1 #mVisual{height: 100%; width: 100%; position: relative;}
.sec1 #mVisual::after{content: ''; width: 100%; height: 50%; position: absolute; bottom: 0px; left: 0; background: url(/images/main/mv_bg.png) no-repeat bottom center / contain;}
.sec1 #mVisual .mv{position: relative; height: 100%; width: 100%;}
#mVisual .bg{position: absolute; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; overflow: hidden;}
#mVisual .bg iframe{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 120vw;}
/* .sec1 #mVisual video.mo{display: none;} */
.sec1 #mVisual .mv video{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: auto; height: auto; min-width: 100%; min-height: 100%;}
.sec1 #mVisual .mv .s-inner{height: 100%;display: flex; justify-content: center; align-content: center;flex-wrap: wrap; align-items: center;}
.sec1 #mVisual .mv .s-inner .text h3{font-size: 5rem; color: #fff; text-align: center;}
br.mo{display: none !important;}

@media all and (max-width:1580px){
    #mVisual .bg iframe{width: 1920px; left: 10%; transform: translate(-20%, -50%);}
}

@media all and (max-width:1280px){
    .sec1 #mVisual .mv .s-inner .text h3{font-size: 4rem;}
}
@media all and (max-width:976px){
    .sec1 .fp-tableCell{height: auto !important;}
	.sec1 .fp-scrollable{height: auto !important;}
	.sec1 #mVisual::after{display: none;}
    #mVisual .bg iframe{height: 120vh;}
}
@media all and (max-width:767px){
    .sec1 #mVisual .mv .s-inner .text h3{font-size: 3.5rem; line-height: 4.5rem;}
}
@media all and (max-width:640px){
    br.mo{display: block !important;}
}

@media all and (max-width:480px){
}

@media all and (max-width:380px){
}


#m_title{color: #222;}
#m_title p.eng{font-family: 'poppins'; font-size: 1.8rem; color: #fab22c; font-weight: bold;letter-spacing: 0.05em}
#m_title h3{font-weight: normal; font-size: 4.5rem; line-height: 5.5rem;margin: 30px 0 50px;letter-spacing: -0.04em}
#m_title h3 span{font-weight: bold;}
#m_title p.t1{font-size: 1.8rem; font-weight: 500; line-height: 2.6rem;}
#m_title a{margin-top: 80px; display: inline-block; font-family: 'montserrat'; display: flex; align-items: end; gap: 25px; transition: 0.3s; width: 170px;}
#m_title a:hover{gap: 35px; transition: 0.3s;}
#m_title a p{color: #222; font-size: 1.6rem; line-height: 1rem; font-weight: bold;}
#m_title div{display: flex;justify-content: space-between; flex-wrap: wrap; gap: 60px;}
#m_title div a{margin: 0 0 7px;}

@media all and (max-width:1280px){
    #m_title p.eng{font-size: 1.6rem;}
    #m_title h3{font-size: 4rem; line-height: 5rem; margin: 20px 0 40px;}
    #m_title p.t1{font-size: 1.6rem;line-height: 2.4rem;}
    #m_title a{margin-top: 60px;}
    #m_title a p{font-size: 1.4rem;}
    #m_title a img{width: 25px;}
}
@media all and (max-width:980px){
    #m_title h3{font-size: 3.5rem; line-height: 4.5rem; margin: 20px 0 40px;}
    #m_title a{margin-top: 60px;}
}
@media all and (max-width:768px){
    #m_title p.eng{font-size: 1.4rem;}
    #m_title h3{font-size: 3rem; line-height: 4rem; margin: 20px 0 30px;}
    #m_title a{margin-top: 40px;}
    #m_title p.t1{font-size: 1.5rem;}
    #m_title div{gap: 40px;}
}


.sec2{background: url('/images/main/sec2_bg.png') -10px 100% / 90% no-repeat;}
.sec2 .s-inner{display: flex; padding-top: 100px; flex-wrap: wrap;}
.sec2 .lt{width: 50%;}
.sec2 .rt{width: 50%;}
.sec2 .rt .img{width: 100%; position: relative;}
.sec2 .rt .img:after{position: absolute; content: ''; width: 60%; height: 70%; background: #fab22c; border-radius: 10px; right: -30px; top: -30px;z-index: -1;}
.sec2 .rt .img img{width: 100%;}

@media all and (max-width:1280px){
    .sec2 .rt .img:after{right: -20px; top: -20px;}
}
@media all and (max-width:980px){
    .sec2 .s-inner{justify-content: end;}
    .sec2 .lt{width: 100%;}
    .sec2 .rt{width: 60%;}
}
@media all and (max-width:768px){
    .sec2{padding: 7% 0;}
    .sec2 .s-inner{padding-top: 0px;}
    .sec2 .rt{width: 100%; margin-top: 80px;}
    .sec2 .rt .img:after{right: -10px; top: -10px;}
}
@media all and (max-width:480px){
    .sec2{padding: 0;}
    .sec2 .rt{margin-top: 60px;}
}



.sec3{background: url('/images/main/sec3_bg.png') 78% center / cover no-repeat; text-align: center; padding-top: 50px;}
.sec3 #m_title{color: #fff;}
.sec3 ul {margin-top:120px; display:flex; flex-wrap:wrap; justify-content:center;}
.sec3 ul li {position: relative; width: 270px; height: 270px; border-radius: 50%; overflow: hidden; margin-left: -20px; display: flex; align-items: center; justify-content: center;}
.sec3 ul li::before {content: ""; position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; z-index: 2;}
.sec3 ul li .blur-bg {position: absolute; inset: 0; background-color: transparent; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 0;}
.sec3 ul li .content {position: relative; z-index: 1; text-align: center; color: #fff;}
.sec3 ul li .label {font-size: 1.6rem; font-weight: 800; opacity: 0.5; font-family: 'montserrat';}
.sec3 ul li img {margin: 15px 0 25px;}
.sec3 ul li .title {font-size: 2.5rem; font-weight: 600;}

@media all and (max-width:1280px) {
    .sec3 ul {margin-top:80px;}
    .sec3 ul li {width:230px; height:230px; }
    .sec3 ul li .label {font-size: 1.4rem;}
    .sec3 ul li img {width:60px;}
    .sec3 ul li .title {font-size: 2.2rem;}
}
@media all and (max-width:1024px) {
    .sec3{padding-top: 30px;}
    .sec3 ul li {width:25vw; height:25vw; }
    .sec3 ul li .title {font-size: 2rem;}
}
@media all and (max-width:768px) {
    .sec3 ul {margin-top:50px;}
    .sec3 ul li {width:35vw; height:35vw; margin-top: -20px;}
}
@media all and (max-width:580px) {
    .sec3{padding-top: 0px;}
    .sec3 ul {gap: 10px 2%;}
    .sec3 ul li {width:49%; height:auto; margin:0; padding:3em; border-radius:10px}
    .sec3 ul li::before {border-radius: 10px;}
}
@media all and (max-width:480px) {
    .sec3 ul {margin-top:60px;}
}


.sec4{background: url('/images/main/sec4_bg.png') 100% 30% / 23% no-repeat; padding-top: 50px;}
.sec4 ul{margin-top: 50px; display: flex; flex-wrap: wrap;}
.sec4 ul li{width: calc(100%/4); text-align: center; position: relative; overflow: hidden; color: #fff; text-align: center; display: flex; align-items: center; justify-content: center;}
.sec4 ul li::before {content: ""; position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.5s ease; z-index: 1; background-image: var(--bg-url);}
.sec4 ul li::after {content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(250, 178, 44, 0.5), transparent, transparent); opacity: 0; transition: opacity 0.5s ease; z-index: 2;}
.sec4 ul li a {position: relative; z-index: 3; padding: 50px 10px; color: #fff; display: inline-block;width: 100%; height: 100%;}
.sec4 ul li a p{font-weight: bold; font-family: 'montserrat'; font-size: 1.8rem; letter-spacing: -0.04em;margin-bottom: 20px; opacity: 0.5;}
.sec4 ul li a h3{font-size: 3rem; letter-spacing: -0.04em; min-height: 70px; display: flex; align-items: center; justify-content: center;}
.sec4 ul li:hover::before {transform: scale(1.05);}
.sec4 ul li:hover::after {opacity: 1;}


@media all and (max-width:1280px){
    .sec4 ul li a {padding: 40px 10px;}
    .sec4 ul li a p{font-size: 1.6rem;}
    .sec4 ul li a h3{font-size: 2.5rem; min-height: 50px;}
}
@media all and (max-width:980px){
    .sec4 ul{margin-top: 40px;}
    .sec4 ul li{width: calc(100%/2);}
    .sec4 ul li a {padding: 30px 10px;}
    .sec4 ul li a p{margin-bottom: 10px;}
}
@media all and (max-width:768px){
    .sec4{padding-top: 30px}
    .sec4 ul li a p{font-size: 1.4rem;}
    .sec4 ul li a h3{font-size: 2.2rem;}
}
@media all and (max-width:480px){
    .sec4{padding-top: 20px}
    .sec4 ul li a p{font-size: 1.3rem;}
    .sec4 ul li a h3{font-size: 2rem;}
}


.sec5{background: url('/images/main/sec5_bg.png') 80% center / cover no-repeat; padding-top: 50px;}
.sec5 .s-inner{display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-end;}
.sec5 #m_title{color: #fff; margin-bottom: 50px;}
.sec5 #m_title h3{position: relative;z-index: 10;}
.sec5 #m_title h3::after{position: absolute;z-index: -1; content: ''; width: 30px; height: 30px; border-radius: 5px; background: #fab22c;top: -2px; left: -10px;}
.sec5 .lt{ width: 100%;}
.sec5 .rt{ width: 50%;}
.sec5 .rt > a{color: #fff;padding: 20px; display: flex; gap: 20px; align-items: center;font-size: 3rem; font-weight: bold;width: 210px; transition: 0.3s;}
.sec5 .rt > a:hover{transition: 0.3s; gap: 30px;}
.sec5 .rt > a img{filter: invert(1) brightness(5);margin-bottom: 5px;}
.sec5 .rt ul{border: 2px solid #fff; border-left: 0; border-right: 0;}
.sec5 .rt ul li a{color: #fff;padding: 30px; display: flex; align-items: center;justify-content: space-between;}
.sec5 .rt ul li + li{border-top: 1px solid rgba(255, 255, 255, 0.5);}
.sec5 .rt ul li a h3{font-size: 2rem; overflow: hidden; text-overflow: ellipsis;  -webkit-line-clamp: 1;-webkit-box-orient: vertical; display: -webkit-box;}
.sec5 .rt ul li a span{font-family: 'montserrat'; font-size: 1.6rem; font-weight: bold; opacity: 0.5; text-align: right; width: 100px;}

@media all and (max-width:1280px){
    .sec5 .rt{ width: 100%;}
    .sec5 .rt > a{font-size: 2.5rem;padding: 10px;}
    .sec5 .rt > a img{width: 25px;}
    .sec5 .rt ul li a{padding: 20px;}
    .sec5 .rt ul li a h3{font-size: 1.8rem;}
    .sec5 .rt ul li a span{font-size: 1.4rem;}
}