@charset "utf-8";

main {overflow: hidden;}
.mo {display: none;}
.section-header h3 {font-size: 60px; font-weight: 600; color: #000; line-height: 1;}
.section-header p {font-size: 24px; line-height: 40px; color: #333; margin-top: 40px;}
.give {position: relative; display: block; margin-top: 60px; width: 220px; line-height: 70px; text-align: center; color: #fff; font-weight: 700; font-size: 22px; background-color: #1e305f; border-radius: 50px; transition: all .2s linear;}

/* m-visual */
.m-visual {padding: 0;}
.m-visual .visual {width: 100%; height: 970px; position: relative;}
.m-visual .visual::before {position: absolute; content: ''; width: 100%; height: 100%; background-color: rgba(0,0,0, .1);}
.m-visual .visual video {width: 100%; object-fit: cover; height: 100%;}
.m-visual .visual .container {position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
.m-visual .visual .container h2 {font-size: 60px; font-weight: 600; color: #fff; line-height: 80px; padding-top: 320px; z-index: 2; opacity: 0; transition: all 1s ease-in-out .2s;}
.m-visual .visual .swiper-slide-active .container h2 {padding-top: 355px; opacity: 1;}

.scroll {position: absolute; z-index: 1; bottom: 70px; right: 52px; width: 24px; height: 32px; background: url(../images/main/scroll.png) 50% 50% no-repeat;background-size: auto; animation: bounce 1.3s ease infinite;}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      transform: translateY(0);
    }
  
    40% {
      transform: translateY(-10px);
    }
  
    60% {
      transform: translateY(-5px);
    }
}

/* sec2 */
.sec2 {padding: 150px 0;}
.sec2 .inner {width: 100%; display: flex; align-items: center;}
.sec2 .section-header {max-width: 720px; width: 100%;}
.sec2 .section-header .give::before {position: absolute; content: ''; width: calc(100% - 6px); height: calc(100% - 6px); background-color: transparent; border: 2px solid #fff; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: all .2s linear; border-radius: 50px;}
.sec2 .section-header .give:hover::before {opacity: 1;}
.sec2 .inner .img-box {max-width: 900px; width: 100%;}
.sec2 .inner .img-box img {margin: 0 auto; display: block;}

/* sec3 */
.sec3 {width: 100%; padding: 180px 0 100px; background: url(../images/main/bg_sec3.jpg) 50% 50% no-repeat; background-size: cover;}
.sec3 .section-header h3 {color: #fff; text-align: center;}
.sec3 .inner {position: relative; width: 100%; margin-top: 75px; padding: 0 135px;}
.sec3 .inner::before {position: absolute; content: ''; width: 10px; height: 10px; border-radius: 50%; background-color: #84d2da; top: 175px; left: 0; z-index: 2;}
.sec3 .inner::after {position: absolute; content: ''; width: 10px; height: 10px; border-radius: 50%; background-color: #84d2da; top: 175px; right: 0; z-index: 2;}
.sec3 .inner ul {position: relative; width: calc(100% + 10px); margin: 0 -5px; display: flex; align-items: center;}
.sec3 .inner ul::before {position: absolute; content: ''; width: calc(100% + 260px); height: 1px; top: 180px; left: 50%; transform: translateX(-50%); background-color: rgba(255,255,255, .2);}
.sec3 .inner ul li {width: 20%; padding: 0 5px; position: relative;}
.sec3 .inner ul li .over-box {position: absolute; top: 10px; left: 50%; transform: translateX(-50%); max-width: 262px; width: 100%; border-radius: 20px 0 20px 0; border: 3px solid rgba(255,255,255, .2); overflow: hidden; transition: all .3s linear; opacity: 0;}
.sec3 .inner ul li .over-box p {font-size: 18px; color: #150c06; line-height: 30px; background-color: #fff; width: 100%; min-height: 144px; text-align: center; display: flex; align-items: center; justify-content: center;}
.sec3 .inner ul li:hover .over-box {opacity: 1; top: -10px;}
.sec3 .inner ul li dl {width: 100%;}
.sec3 .inner ul li dl dt {position: relative; max-width: 140px; margin: 0 auto; width: 100%; border-radius: 50%;}
.sec3 .inner ul li dl dt::before {position: absolute; content: ''; width: 1px; height: 40px; background-color:rgba(255,255,255, .2); bottom: -40px; left: 50%; transform: translateX(-50%);}
.sec3 .inner ul li dl dt::after {position: absolute; content: ''; width: 25px; height: 25px; bottom: -52.5px; left: 50%; transform: translateX(-50%); background-color: #84d2da; opacity: 0; transition: all .3s linear; border-radius: 50%;}
.sec3 .inner ul li:hover dl dt::after {opacity: .2;}
.sec3 .inner ul li dl dt img {margin: 0 auto; opacity: 1; transition: all .2s linear;}
.sec3 .inner ul li:hover dl dt img {opacity: 0;}
.sec3 .inner ul li dl dd {position: relative; font-size: 30px; font-weight: 600; color: #fff; text-align: center; margin-top: 80px;}
.sec3 .inner ul li dl dd::before {position: absolute; content: ''; width: 10px; height: 10px; background-color: #84d2da; border-radius: 50%; top: -45px; left: 50%; transform: translateX(-50%);}
.sec3 .inner ul li dl dd span {display: block; font-size: 22px; font-weight: 500; color: #84d2da; padding-top: 15px;}
.sec3 .inner .give {margin: 75px auto 0; background-color: rgba(255,255,255, .2); color: #fff; border: 1px solid rgba(255,255,255, .2);}
.sec3 .inner .give:hover {background-color: #84d2da; border-color: #84d2da;}

/* sec4 */
.sec4 {padding-top: 185px;}
.sec4 .container-fluid {margin-top: 80px; width: 100%; background: url(../images/main/bg_sec4.jpg) 50% 50% no-repeat; background-size: cover;}
.sec4 .container-fluid .inner {padding: 125px 0; width: 100%; display: flex;}
.sec4 .container-fluid .inner .txt {max-width: 800px; width: 100%; padding-top: 35px;}
.sec4 .container-fluid .inner .txt h4 {font-size: 34px; font-weight: 700; color: #fff;}
.sec4 .container-fluid .inner .txt i {display: block; margin-top: 40px; font-size: 24px; color: #fff; line-height: 40px;}
.sec4 .container-fluid .inner .txt small {display: block; margin-top: 15px; font-size: 20px; color: rgba(255,255,255, .5); font-style: italic;}
.sec4 .container-fluid .inner .txt i ~ i {margin-top: 0px;}
.sec4 .container-fluid .inner .youtube {position: relative; overflow: hidden; border: 10px solid rgba(255,255,255, .5); box-shadow: 6.5px 11.258px 46px 0px rgba(0, 0, 0, 0.49); max-width: 820px; width: 100%;}
.sec4 .container-fluid .inner .youtube::before {display: block; content: ''; padding-top: 55%;}
.sec4 .container-fluid .inner .youtube iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

/* sec5 */
.sec5 {padding-top: 190px;}
.sec5 .inner {width: 100%; margin-top: 70px;}
.sec5 .inner ul {width: calc(100% + 16px); margin: 0 -8px; display: flex;}
.sec5 .inner ul li {width: 33.3333%; padding: 0 8px;}
.sec5 .inner ul li dl {width: 100%;}
.sec5 .inner ul li dl dt {width: 100%; overflow: hidden;}
.sec5 .inner ul li dl dt img {margin: 0 auto; transition: all .4s linear; display: block; width: 100%;}
.sec5 .inner ul li dl:hover dt img {scale: 1.1;}
.sec5 .inner ul li dl dd {position: relative; border: 1px solid #ddd; border-top: 0; min-height: 300px; height: 100%; padding: 50px 10px 0 50px; font-size: 24px; color: #333; line-height: 40px;}
.sec5 .inner ul li dl dd::before {position: absolute; content: attr(data-content); font-size: 100px; font-weight: 700; color: #e5e5e5; opacity: .5; top: -55px; left: 50px; line-height: 1;}

/* sec6 */
.sec6 {padding-top: 170px;}
.sec6 .section-header h3 {line-height: 80px;}
.sec6 .container-fluid {padding-top: 305px; position: relative;}
.sec6 .container-fluid .banner {position: absolute; z-index: 2; top: 0; left: 50%; transform: translateX(-50%); max-width: 1650px; width: 100%; padding: 0 15px; display: flex; gap: 40px;}
.sec6 .container-fluid .banner > div {max-width: 790px; width: 100%; position: relative; overflow: hidden;}
.sec6 .container-fluid .banner > div .tit {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; transition: all .4s linear; }
.sec6 .container-fluid .banner > div img {margin: 0 auto 20px; opacity: 1; transition: all .4s linear; display: block;}
.sec6 .container-fluid .banner > div h4 {font-size: 40px; font-weight: 600; color: #fff; text-align: center; line-height: 50px;}
.sec6 .container-fluid .banner .left {margin-top: 55px; min-height: 570px; height: 100%; background: url(../images/main/bg_banner01.jpg) 50% 50% no-repeat; background-size: cover;}
.sec6 .container-fluid .banner .right {margin-top: 30px; min-height: 410px; height: 100%; background: url(../images/main/bg_banner02.jpg) 50% 50% no-repeat; background-size: cover;}
.sec6 .container-fluid .banner .over-txt {margin-top: 140px; padding: 0 70px; width: 100%; opacity: 0; transform: translateY(100%); transition: all .4s linear;}
.sec6 .container-fluid .banner .right .over-txt {margin-top: 160px;}
.sec6 .container-fluid .banner .over-txt p {font-size: 18px; color: #fff; line-height: 32px; padding-bottom: 20px;}
.sec6 .container-fluid .banner .over-txt ul {padding-top: 20px; border-top: 1px solid rgba(255,255,255, .3);}
.sec6 .container-fluid .banner .over-txt ul li {position: relative; font-size: 18px; line-height: 32px; color: #fff; padding-left: 15px;}
.sec6 .container-fluid .banner .over-txt ul li::before {position: absolute; content: ''; width: 5px; height: 5px; border-radius: 50%; background-color: #fff; top: 13px; left: 0;}

.sec6 .container-fluid .banner > div.left:hover .tit {top: 65px; transform: translateX(-50%);}
.sec6 .container-fluid .banner > div.right:hover .tit {top: 75px; transform: translateX(-50%);}
.sec6 .container-fluid .banner > div:hover img {opacity: 0; height: 0; margin-bottom: 0;}
.sec6 .container-fluid .banner > div:hover .over-txt {opacity: 1; transform: translateY(0);}

.sec6 .container-fluid .bg {position: relative; width: 100%; height: 580px; background: url(../images/main/bg_sec6.jpg) 50% 50% no-repeat; background-size: cover;}
.sec6 .container-fluid .bg .btns {position: absolute; bottom: 110px; left: 50%; transform: translateX(-50%); max-width: 460px; width: 100%; display: flex; gap: 20px;}
.sec6 .container-fluid .bg .btns a {position: relative; display: block; width: 220px; line-height: 70px; text-align: center; color: #fff; font-weight: 700; font-size: 22px; border-radius: 50px; transition: all .2s linear;}
.sec6 .container-fluid .bg .btns a::before {position: absolute; content: ''; width: calc(100% - 6px); height: calc(100% - 6px); background-color: transparent; border: 2px solid #fff; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: all .2s linear; border-radius: 50px;}
.sec6 .container-fluid .bg .btns a.pink {background-color: #cf0d77;}
.sec6 .container-fluid .bg .btns a.yellow {background-color: #e9cd3a;}
.sec6 .container-fluid .bg .btns a:hover::before {opacity: 1;}

/* sec7 */
.sec7 {padding: 110px 0 85px;}
.sec7 .inner {width: 100%; padding: 0 300px;}
.sec7 ul {display: flex; width: 100%; justify-content: space-between; align-items: flex-start;}
.sec7 ul li {max-width: 172px; width: 100%;}
.sec7 ul li dl dt img {margin: 0 auto; display: block;}
.sec7 ul li dl dd {margin-top: 15px; text-align: center; color: #000;}
.sec7 ul li dl dd p {font-size: 100px; font-weight: 600; letter-spacing: -5px;}
.sec7 ul li dl dd span {display: block; font-size: 30px; margin-top: 20px; line-height: 35px; font-weight: 400; letter-spacing: -.3px;}
.sec7 ul li dl dd span i {font-style: normal; display: block; font-size: 20px; color: #666;}