@charset "utf-8";

.main-tit {font-size: 4.8em; font-weight: 700; color: var(--default); margin-bottom: 0.85em;}
.main-tit span {color: var(--point2);}
.main-tit b {font-weight: 700; font-size: 1.15em;}

.main1 {background: url(../images/index/visual.jpg) no-repeat 70% center / cover; height:57em; align-items: center; margin-top: 10em;}
.main1 p {font-size: 2.4em;}
.main1 p span {font-size: 1.05em; font-weight: 700; color: var(--default);} 
.main1 h4 {font-size: 3.9em; color: var(--point2); margin: .8em 0 0.2em;} 
.main1 h2 {font-size: 8.2em; font-weight: 700; } 
.main1 h5 {font-size: 3.6em; margin-top: .75em; color: #2c3cbf; font-weight: 600;}

.main2 .banner1 {padding-left: calc(50% - 680px); padding-right: 2%; width: calc(100% - 39em); background: url(../images/index/banner1.jpg) no-repeat right center / cover; color: var(--reverse);}
.main2 .banner1 .txt {padding: 5em 0; display: flex;align-items: center;}

.main2 .banner2 {width: 39em; background: #cfe4c9; align-items: center; justify-content: center; position: relative;}
.main2 .banner2 .txt {position: absolute; bottom:0; left: 0; width: 100%; height: 35%; z-index: 2; align-items: center; justify-content: center; font-size: 2.3em; color: var(--reverse); background: rgba(0,0,0,0.5);}
.main2 .banner2 .txt > img {margin-right: .5em;}
.main2 .banner2 .txt span {margin-left: .5em;}


.main3 {padding: 7em 0;}
.main3 .main-tit:not(:first-child) {margin-top: 1.45em;}
.main3 .box-wrap {justify-content: space-between;}
.main3 .box {position: relative; opacity: 1 !important; width: min(425px,32%); display: flex; overflow: hidden; border-radius: 2.5em;}
.main3 .box-wrap2 .box {width: 48%;}
.main3 .box img {transition: all 0.3s; width: 100%;}
.main3 .box:hover img {transform: scale(1.2);}

.main3 .box .txt {position: absolute; top:0; left:0; padding: 3.5em 3em; align-items: flex-start; justify-content: space-between; height: 100%; z-index: 2;}
.main3 .box .txt .tit {display: flex; flex-flow: column wrap; align-items: flex-start;}
.main3 .box .txt h4 {font-size: 3.2em; font-weight: 700; letter-spacing: -0.01em; color: #fff; display: inline-block; position: relative; padding: 0.1em 0.2em;}
.main3 .box .txt h4:not(:first-child) {margin-top: 5px;}
.main3 .box .txt .cover {display: block; position: absolute; width: 100%; height: 100%; background: var(--point1); transform: scale(0, 1); transform-origin: left center; left: 0; top:0;}
.main3 .box .txt h6 {font-size: 2.4em; margin-top: 0.5em; color: #070707; font-weight: 700;}
.main3 .box .txt h5 {font-size: 2.4em; color: #083e88; font-weight: 700; display: block; margin-top: 0.5em; text-shadow: calc(3px * 1) 0 0 #fff, calc(3px * 0.9239) calc(3px * 0.3827) 0 #fff, calc(3px * 0.7071) calc(3px * 0.7071) 0 #fff, calc(3px * 0.3827) calc(3px * 0.9239) 0 #fff, 0 calc(3px * 1) 0 #fff, calc(3px * -0.3827) calc(3px * 0.9239) 0 #fff, calc(3px * -0.7071) calc(3px * 0.7071) 0 #fff, calc(3px * -0.9239) calc(3px * 0.3827) 0 #fff, calc(3px * -1) 0 0 #fff, calc(3px * -0.9239) calc(3px * -0.3827) 0 #fff, calc(3px * -0.7071) calc(3px * -0.7071) 0 #fff, calc(3px * -0.3827) calc(3px * -0.9239) 0 #fff, 0 calc(3px * -1) 0 #fff, calc(3px * 0.3827) calc(3px * -0.9239) 0 #fff, calc(3px * 0.7071) calc(3px * -0.7071) 0 #fff, calc(3px * 0.9239) calc(3px * -0.3827) 0 #fff;
}
.main3 .box .txt p {font-size: max(15px,1.8em); font-weight: 600; color: var(--default); margin-top: 0.7em; letter-spacing: -0.035em; line-height: 1.4;}


/* .main3 .box5 h4:not(:first-child) {display: none;}
.main3 .box6 .txt .tit.mo {display: none;} */

.main3 .box.aos-animate .txt h4 {animation: cover_back 1s -0.1s forwards 1 ease; }
.main3 .box.aos-animate .txt .cover {animation:cover_start 1s -0.1s forwards 1 ease;}

@keyframes cover_back{
	0%{background: none;}
	61%{background: none;}
	62%{background: var(--point1);}
	100%{background: var(--point1);}
}
@keyframes cover_start{
	0%{transform: scale(0, 1); transform-origin: left center;}
	60%{transform: scale(1, 1); transform-origin: left center;}
	61%{transform: scale(1, 1); transform-origin: right center;}
	99%{transform: scale(0, 1); transform-origin: right center;}
	100%{transform: scale(0, 0); transform-origin: right center;}
}

.main4 {padding: 7em 0; background: url(../images/index/bg3.png)#f1f1f1 no-repeat 80% top / min(594px,60%); }
.main4 .box-wrap {justify-content: space-between; align-items: flex-end;}
.main4 .main-tit {position: relative;}
.main4 .main-tit span.line { width: 63%; display: inline-block; height: 1px; position: absolute; bottom: 10px; right: 0; transform: translateY(-50%); background: #cecece;}

.main4 .left {width: min(425px,32%);}
.main4 .left .box {padding: 3.5em; color: #fff; border-radius: 2em; width: 100%;}
.main4 .left .box1 {background: url(../images/index/img10.jpg) no-repeat center / cover; }
.main4 .left .box2 {background: url(../images/index/bg1.png) var(--point1) no-repeat 70% center / contain; margin-top: 2em;}
.main4 .left .box h5 {font-size: 2.2em;}
.main4 .left .box h5 span {width: 1em; height: 1px; background: #fff; display: inline-block; margin: 0.3em 0.5em 0 0;}
.main4 .left .box h3 {font-size: 3em;}
.main4 .left .box h3 b {font-weight: 600;}
.main4 .left .box .more-btn {font-size: 1.7em; padding: 0.55em 2.1em; margin-top: 2.5em; display: inline-block; border: 1px solid var(--reverse); border-radius: 5em; transition: all 0.2s;}
.main4 .left .box .more-btn:hover {background: #fff; color:var(--point1)}
.main4 .left .box2 .more-btn:hover {background: #fff; color:var(--point1)}

.main4 .right {width: 65%; padding: 0 2%;}
.main4 .right .tit {text-align: center;}
.main4 .right .tit h3 {font-size: 5.5em; color: var(--point2);}
.main4 .right .tit h4 {font-size: 3.4em; font-weight: 700;}
.main4 .right .tab {justify-content: center; margin-top: 2em;}
.main4 .right .tab li a {font-size: 2.4em; font-weight: 500; color: #939ba8; position: relative; z-index: 2; margin: 0 0.8em;}
.main4 .right .tab li a.active {color: var(--reverse);}
.main4 .right .tab li a.active::before {content:""; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); width: 2.7em; height: 2.7em; border-radius: 50%; background: var(--point1); z-index: -1;}

.main4 .main_slide_wrap {position: relative;}
.main4 .main_slide {padding: 3.5em 1px 3.5em 0;}
.main4 .main_slide .swiper-slide {background: #fff; height: auto; justify-content: space-between; padding: 3em; border-radius: 2em; min-height: 30em; border: 1px solid #fff; transition: all 0.2s;}
.main4 .main_slide .swiper-slide:hover {border-color:var(--point2)}
.main4 .main_slide .swiper-slide h3 {font-size: 3em; font-weight: 700;}
.main4 .main_slide .swiper-slide h4 {font-size: max(17px,2em); margin: 1em 0;}
.main4 .main_slide .swiper-slide p {font-size: max(13px,1.5em); color: #767676;}
.main4 .main_slide .swiper-slide p img {margin-right: .5em; margin-bottom: -0.2em;}
.main4 .main_slide_wrap .main_slide_next::after, .main4 .main_slide_wrap .main_slide_prev::after {display: none;}
.main4 .main_slide_wrap .main_slide_next {right: 0; width: 5.7em; height: 5.7em; transform: translateX(50%);}
.main4 .main_slide_wrap .main_slide_prev {left: 0; width: 5.7em; height: 5.7em; transform: translateX(-50%);}
.main4 .main_slide_wrap .main_slide_prev img {transform: rotate(180deg);}
.main4 .main_slide .main_slide_pagi {top: auto; bottom:0;}
.main4 .main_slide .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background: #000;}


.main5 .box-wrap3 {display: grid; grid-template-columns: 2fr 1fr; gap: 4%;}
.main5 .box-wrap3 .box {width: 100%;}
.main5 .box-wrap3 .box img {object-fit: cover;}

@media (max-width:1360px) {
    .main1 p {font-size: max(16px,2.2em);}
    .main1 h4 {font-size: 3.6em;} 
    .main1 h2 {font-size: 7.6em;}
    .main1 h5 {font-size: 2.6em;}

	.main2 .banner1 {padding-left: 4%; align-items: center;}
    .main2 .banner1 .txt {padding: 0;}
    .main3 .box5 h4:first-child {display: none;}


    .main4 .main-tit span.line {width: 60%;}
}
@media (max-width:1080px) {
    .main-tit {margin-bottom: 0.75em;}

    .main1 {height: 52em;}
	.main2 .banner1 {width: calc(100% - 30em);}
    .main2 .banner2 {width: 30em; padding: 0 2em;}
    .main2 .banner2 .txt > img {max-height: 70% ;}
    .main3 .box-wrap2 .box {width: 49%;}
    .main3 .box .txt {padding: 2.5em 2em;}
    .main3 .box .txt h4 {font-size: 3em;}
    .main3 .box .txt h5, .main3 .box .txt h6 {font-size: 2.2em;}
    /* .main3 .box6 .txt .tit {display: none;}
    .main3 .box6 .txt .tit.mo {display: flex;} */
    .main4 .main-tit span.line {width: 55%;}
    .main4 .left .box {padding: 2.75em 2.25em;}
}


@media (max-width:800px) {
    .main-tit {margin-bottom: 0.6em;}

    .main1 h4 {font-size: 3em;} 
    .main1 h2 {font-size: 6.8em;}

	.main2 .banner1 {width: 100%; padding: 0; background: none;}
    .main2 .banner2 {width: 100%; padding: 0 4%;}

    .main3 .box, .main3 .box-wrap2 .box {width: 100%; margin-bottom: 4%;}
    .main3 .box:last-child {margin-bottom: 0;}
    .main3 .box img {width: 100%; object-fit: cover;}

    .main3 .box .txt h4 {font-size: 3.8em; }
    .main3 .box .txt p {font-size: max(15px,2.25em); }

    .main3 .box5 h4:first-child {display: block;}


    .main4 .main-tit span.line {display: none;}
    .main4 .left {width: 100%; flex-flow: row wrap; justify-content: space-between;}
    .main4 .left .box {width:calc(50% - 7.5px); margin-top: 0;}
    .main4 .right {width: 100%; margin-top: 4em; padding: 0;}
    .main4 .right .tit {display: flex; flex-flow: row wrap ; align-items: center;}
    .main4 .main_slide {padding-top: 2.4em;}
    .main4 .main_slide_wrap .main_slide_next, .main4 .main_slide_wrap .main_slide_prev {display: none;}
    .main4 .main_slide .swiper-slide h4 br {display: none;}

    .main5 .box-wrap3 {display: grid; grid-template-columns: 1fr;}
} 

@media (max-width:500px) {
    .main3 .box .txt h4 {font-size: 3.1em;}
    .main4 .left .box {width: 100%; }
    .main4 .left .box:last-child {margin-top: 2em;}
}