@charset "utf-8";

.main-visual {position:relative;}
.main-visual .item {height:100vh;}
.main-visual .secting-img {width:100%; height:100%; background-repeat:no-repeat; background-size:cover; background-position:center center; position:relative;}
/* .main-visual .secting-img01 {background-image:url('../img/main/main-visual.jpg');} */
.main-visual .secting-img video {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}
.main-visual .txt-box {position:absolute; top:0; left:0; width:100%; height:100%; display:flex; align-items:center;}
.main-visual .txt-box .txt {width:100%; max-width:1470px; padding:0 15px; margin:0 auto;}
.main-visual .txt-box h2 {font-size:60px; line-height:1.2em; color:#fff; margin-bottom:20px;}
.main-visual .txt-box h2 span {display:block; margin-top:8px;}
.main-visual .txt-box p {font-size:22px; line-height:1.6em; color:#ccc; font-weight:600; margin-bottom:60px;}
.main-visual .txt-box a {font-size:24px; line-height:66px; color:#fff; font-weight:700; padding:0 60px; border-radius:35px; display:inline-block; position:relative; transition:all 0.4s;}
.main-visual .txt-box a:hover {background:#fff; color:#00a4e4;}
.main-visual .txt-box a:before {content:''; width:calc(100% + 6px); height:72px; background:linear-gradient(90deg, #00A4E4 -1.24%, #14D8DF 99.94%); position:absolute; top:-3px; left:-3px; z-index:-1; transition:all 0.4s; border-radius:36px;}

.main-visual .btns {position:absolute; bottom:46px; left:50%; transform:translateX(-50%); display:flex; align-items:center;}
.main-visual .btns .progress {width:220px; height:2px; background:rgba(255,255,255,0.3); border-radius:2px; overflow:hidden; position:relative; margin-right:16px;}
.main-visual .btns .progress .bar {width:0%; height:100%; background:#fff; transition:all 4.5s;}
.main-visual .btns .box {position:relative; width:80px; display:flex; justify-content:center;}
.main-visual .btns .bt {width:24px; height:24px; position:relative;}
.main-visual .btns .btnw {width:14px; height:14px; background-repeat:no-repeat; background-size:cover; background-position:center center; cursor:pointer; z-index:10; position:absolute; top:50%; left:50%; margin-top:-7px; margin-left:-7px;}
.main-visual .btns .btnw.bt-pause {background-image:url('../img/main/visual-pause.png');}
.main-visual .btns .btnw.bt-play {background-image:url('../img/main/visual-play.png');}
.main-visual .btns .btnw.bt-play {display:none;}
.main-visual .btns .slick-arrow {position:absolute; width:24px; height:24px; top:50%; margin-top:-12px; background-repeat:no-repeat; background-color:transparent; font-size:0; border:0;}
.main-visual .btns .slick-prev {background-image:url('../img/main/main-prev.png'); left:0;}
.main-visual .btns .slick-next {background-image:url('../img/main/main-next.png'); right:0;}
/* section01 */
.section01 {padding:200px 0 220px; margin-bottom:180px; background:url('../img/main/sec01bg.jpg') center center no-repeat; background-size:cover; overflow:hidden;}
.section01 .title {text-align:center; margin-bottom:150px;}
.section01 .title span {display:block; font-size:20px; line-height:1.6em; font-weight:600; font-family:'Montserrat'; margin-bottom:20px; letter-spacing:; background: linear-gradient(270deg, #00A4E4 -1.24%, #14D8DF 99.94%); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
.section01 .title h3 {font-size:50px; color:#fff; line-height:1.2em; margin-bottom:40px;}
.section01 .title p {font-size:22px; line-height:1.6em; color:#ccc;}
.section01 .tit-box {margin-bottom:74px;}
.section01 .tit-box h4 {font-size:40px; line-height:1.6em; color:#fff; margin-bottom:20px;}
.section01 .tit-box p {font-size:22px; line-height:1.6em; color:#ccc; position:relative; padding-left:16px;}
.section01 .tit-box p:before {content:''; width:4px; height:20px; background:linear-gradient(270deg, #00A4E4 -1.24%, #14D8DF 99.94%); border-radius:2px; position:absolute; top:8px; left:0;}
.section01 .cnt01 {margin-bottom:160px;}
.section01 .cnt01 .col {display:flex; padding-left:40px; border:2px solid #00A4E4; border-radius:10px 0 0 10px; position:relative; overflow:hidden; margin-top:20px;}
.section01 .cnt01 .col .ti {background:#00A4E4; width:40px; height:100%; position:absolute; left:0; top:0;}
.section01 .cnt01 .col .ti p {font-size:18px; font-weight:700; line-height:1.6em; color:#fff; transform:rotate(-90deg) translateX(-280%); white-space:nowrap;}
.section01 .cnt01 .col .row {width:25%; display:flex; align-items:center; padding:30px; border-right:1px dashed #00A4E4;}
.section01 .cnt01 .col .row:last-child {border-right:0;}
.section01 .cnt01 .col .row p {font-size:18px; line-height:1.6em; color:#ccc;}
.section01 .cnt01 .col .row p span {color:#ff0000;}

.section01 .cnt02 .col {display:flex; margin:0 -10px;}
.section01 .cnt02 .col .row {width:20%; padding:0 10px;}
.section01 .cnt02 .inner {display:flex; flex-direction:column; overflow:hidden; border-radius:40px; height:100%; background:linear-gradient(180deg, rgba(178, 218, 255, 0.20) 0%, rgba(239, 239, 239, 0.20) 100%); box-shadow:0 2px 4px 0 rgba(255, 255, 255, 0.10) inset; backdrop-filter:blur(5px);}
.section01 .cnt02 .inner .ti {flex:1; padding:30px;}
.section01 .cnt02 .inner .ti .num {font-size:24px; line-height:1.2em; font-weight:700; text-align:right; color:rgba(255,255,255,0.3);}
.section01 .cnt02 .inner .ti .tt {color:#fff; font-size:26px; line-height:1.6em; font-weight:700;}
.section01 .cnt02 .inner .ti h4 {font-size:28px; font-weight:400; line-height:1.2em; background: linear-gradient(270deg, #00A4E4 -1.24%, #14D8DF 99.94%); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:10px;}
.section01 .cnt02 .inner .ti h4 strong {font-size:40px; font-weight:700;}
.section01 .cnt02 .inner .ti p {font-size:18px; line-height:1.6em; color:#fff;}
.section01 .cnt02 .inner .tx {height:70px; display:flex; align-items:center; justify-content:center; text-align:center; padding:5px; background:rgba(40, 114, 183, 0.10); border-top:1px solid rgba(255,255,255,0.1);}
.section01 .cnt02 .inner .tx p {font-size:24px; line-height:1.6em; color:#ff0000; font-weight:600;}

/* section03 */
.section03 {margin-bottom:200px; overflow:hidden;}
.section03 .wrap {width:100%; max-width:1610px; padding:0 15px; margin:0 auto;}
.section03 .cnt {width:100%; padding:130px 15px 140px; background:url('../img/main/sec03bg.jpg') center center no-repeat; background-size:cover; border-radius:60px; overflow:hidden;}
.section03 .cnt .tit-box {text-align:center; margin-bottom:60px; }
.section03 .cnt .tit-box p {font-size:20px; margin-bottom:20px; line-height:1.6em; font-weight:600; font-family:'Montserrat'; background:linear-gradient(90deg, #CDFF8F 0%, #7DFFAF 100%); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
.section03 .cnt .tit-box h3 {font-size:50px; line-height:1.2em; color:#fff;}
.section03 .cnt .txt-box {margin-bottom:60px;}
.section03 .cnt .txt-box dl {width:100%; max-width:840px; margin:0 auto; border-top:1px solid rgba(255,255,255,0.4); border-bottom:1px solid rgba(255,255,255,0.4); display:flex; align-items:center;}
.section03 .cnt .txt-box dt {width:100%; max-width:250px; font-size:20px; font-weight:600; color:#fff; line-height:1.2em; padding:25px 0; text-align:center; border-right:1px solid rgba(255,255,255,0.4);}
.section03 .cnt .txt-box dt p {display:inline-block; padding-left:24px; position:relative;}
.section03 .cnt .txt-box dt p:before {content:''; width:6px; height:6px; background:linear-gradient(90deg, #CDFF8F 0%, #7DFFF0 100%); border-radius:50%; position:absolute; top:8px; left:10px;}
.section03 .cnt .txt-box dd {padding:0 35px; font-size:18px; line-height:1.2em; color:#fff;}
.section03 .cnt .btn ul {display:flex; margin:0 -8px; justify-content:center;}
.section03 .cnt .btn ul li {padding:0 8px;}
.section03 .cnt .btn ul li a {width:440px; line-height:70px; text-align:center; font-size:24px; font-weight:700; color:#fff; background:rgba(255, 255, 255, 0.20); backdrop-filter:blur(5px); border-radius:35px; transition:all 0.4s; position:relative; overflow:hidden;}
.section03 .cnt .btn ul li a:hover {background:transparent;}
.section03 .cnt .btn ul li a:after {content:''; width:100%; height:100%; position:absolute; top:0; left:0; opacity:0; transition:all 0.4s; background:linear-gradient(270deg, #00A4E4 -1.24%, #14D8DF 99.94%); z-index:-1;}
.section03 .cnt .btn ul li a:hover:after {opacity:1;}
/* section04 */
.section04 {background:url('../img/main/sec04bg.jpg') center center no-repeat; background-size:cover; padding:200px 0 140px; background-attachment:fixed;}
.section04 .col {display:flex; justify-content:space-between;}
.section04 .tit-box {width:100%; max-width:440px; position:relative;}
.section04 .tit-box .box {position:sticky; top:120px;}
.section04 .tit-box .tit {margin-bottom:60px;}
.section04 .tit-box .tit p {font-size:20px; font-weight:600; line-height:1.6em; margin-bottom:20px; font-family:'Montserrat'; background:linear-gradient(90deg, #CDFF8F 0%, #7DFFAF 100%); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
.section04 .tit-box .tit h3 {font-size:50px; line-height:1.2em; color:#fff;}
.section04 .tit-box .txt {width:100%; max-width:394px; border-top:1px solid rgba(255,255,255,0.6); border-bottom:1px solid rgba(255,255,255,0.6);}
.section04 .tit-box .txt dl {display:flex; padding:20px 0; border-bottom:1px solid rgba(255,255,255,0.2); align-items:center; font-weight:700;}
.section04 .tit-box .txt dl:last-child {border-bottom:0;}
.section04 .tit-box .txt dt {width:100%; max-width:150px; font-size:22px; color:#fff; padding:0 20px; line-height:1.6em;}
.section04 .tit-box .txt dd {width:1%; flex:1 1 auto; font-size:36px; line-height:1.6em; background:linear-gradient(90deg, #CDFF8F 0%, #7DFFAF 100%); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
.section04 .img-box {width:100%; max-width:900px; padding-left:10px;}
.section04 .img-box .row {display:flex; justify-content:space-between; flex-wrap:wrap; padding-bottom:80px;}
.section04 .img-box .inner {width:100%; max-width:420px; position:relative; transition:all 0.4s; margin-bottom:50px;}
.section04 .img-box .inner:nth-child(even) {transform:translateY(80px);}
.section04 .img-box .inner .img {overflow:hidden; transition:all 0.4s; position:relative; border-radius:40px;}
/* .section04 .img-box .inner:hover .img {border-radius:40px;} */
.section04 .img-box .inner .img .pic {position:relative; height:0; padding-bottom:81.19%; overflow:hidden; transition:all 0.6s;}
.section04 .img-box .inner .img .pic img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100% !important; height:100% !important; max-width:100%; min-height:100%; object-fit:cover; transition:0.3s;}
.section04 .img-box .inner .txt {opacity:0; position:absolute; top:0; left:0; width:100%; height:100%; padding:20px; display:flex; flex-direction:column; justify-content:flex-end; transition:all 0.4s;}
.section04 .img-box .inner:hover .txt {opacity:0;}
.section04 .img-box .inner .txt p {font-size:22px; line-height:1.6em; font-weight:600; color:#5cd1ff;}
.section04 .img-box .inner .txt h4 {font-size:28px; line-height:1.6em; color:#fff;}
.section04 .img-box .inner .over {opacity:0; z-index:1; position:absolute; top:0; left:0; width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; background:linear-gradient(0deg, rgba(2, 3, 32, 0.80) 0%, rgba(2, 3, 32, 0.80) 100%); transition:all 0.4s;}
.section04 .img-box .inner:hover .over {opacity:1;}
.section04 .img-box .inner .over p {font-size:22px; line-height:1.6em; font-weight:600; color:#eee;}
.section04 .img-box .inner .over h4 {font-size:28px; line-height:1.6em; color:#fff; margin-bottom:20px;}
.section04 .img-box .inner .over span {display:inline-block; font-size:18px; line-height:1.6em; color:#32a3ff;}
.section04 .img-box .inner .over span:after {content:''; width:24px; height:24px; background:url('../img/main/sec04-more.png') no-repeat; display:inline-block; vertical-align:middle; margin-top:-2px; margin-left:12px; transition:all 0.4s;}
.section04 .img-box .inner:hover .over span:hover:after {margin-left:20px;}
.section04 .img-box .more {text-align:center;}
.section04 .img-box .more a {display:inline-block; font-size:24px; font-weight:700; line-height:1.6em; color:#fff; padding-right:60px; position:relative;}
.section04 .img-box .more a:after {content:''; width:48px; height:48px; background:url('../img/main/sec04-more-w.png') no-repeat; background-size:cover; position:absolute; top:50%; margin-top:-24px; right:0; transition:all 0.4s;}
.section04 .img-box .more a:hover:after {right:-10px;}