.main-banner {
    position: relative;
    width: 100%;
    height: 89vh;
    min-height: 740px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 80px;
    overflow: hidden;
}

.swiper-slide {
    overflow: hidden;
    color: #fff;
}

.swiper-container {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.slide-inner {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
}
.slide-bg1 {
    background-image: url(../images/main_bg1.png);
}

.slide-bg2 {
    background-image: url(../images/main_bg2.png);
}
.slide-title {
    font-size: 39px;
    font-weight: 700;
    user-select: none;
    margin-bottom: 1px;
    line-height: 1.5;
    text-transform: uppercase;
    color: #fff;
    font-family: serif;
    user-select: none;
    text-align: left;
}
.slide-text {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -1px;
    color: #fff;
    opacity: 0.90;
    margin-bottom: 65px;
    user-select: none;
    line-height: 1.6; 
     text-align: left;
}
.account-arrow-wrap{
    display: flex;
    gap:20px;
     margin-top: 15px;
     text-align: left;
     justify-content: left;
}
#content-wrap{ overflow: hidden; }
.account-arrow-wrap a{
    min-width: 110px;
    position: relative;
    display: inline-block;
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    letter-spacing: 1px;
    transition-duration: .3s;
    padding:10px 20px;
    border-radius: 1px;
	border: 2px solid #fff;
}


/* 
.account-arrow-wrap a:first-child { border-color:var(--main-blue1);;  color:var(--main-blue1);;  }
 */

.account-arrow-wrap a:hover { background: var(--main-blue1);; color:#fff; border-color:var(--main-blue1);;  }




/* 
.account-arrow-wrap a::after{
    position: absolute;
    top: calc(50% + 6px);
    left: 100%;
    width: 14px;
    height: 14px;
    margin-left: 15px;
    border-right: 1px solid #fff;
    transform: rotate(-45deg);
    content: "";
}
.account-arrow-wrap a::before{
    position: absolute;
    left:0;
    bottom: 2px;
    width: 130%;
    height: 1px;
    background: #fff;
    content: "";
}
 */
 

.account-arrow-wrap a:hover::before{
    transition-duration: .3s;
    width: 140%;
}
.account-arrow-wrap a:hover::after{
    transition-duration: .3s;
    margin-left: 24px;
}
.swiper-progress-bar {
    position: relative;
    display: block;
    z-index: 1;
    height: 3px;
    bottom: 60px;
}

.swiper-progress-bar .slide_progress-bar {
    position: absolute;
    height: 3px;
    background: #ffffff50;
    width: 200px;
    clear: both;
    opacity: 0.5;
    left: 3%;
    right: 0;
}

.swiper-progress-bar .slide_progress-bar:after {
    position: absolute;
    top: 0;
    left: 0;
    background: #ffffff;
    width: 200px;
    height: 100%;
    width: 0;
    content: "";
    transition: 0.1s width linear;
}

.swiper-progress-bar.active .slide_progress-bar {
    opacity: 1;
}

.swiper-progress-bar.animate .slide_progress-bar:after {
    transition: width linear;
    transition-delay: unset;
    width: 100%;
    transition-duration: 5s;
}
.swiper-pagination{
    position: relative;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    text-align: left;
    bottom:70px;
    font-family: 'Rubik', sans-serif;
}
.swiper-pagination > span{
    font-family: 'Rubik', sans-serif;
    color: #ffffff;
}

.account-banner {
    z-index: 100;
    position: absolute;
    right: 4%;
    top: 110px;
    max-width: 390px;
    width: 100%;
    background: rgba(14,25,55, 0.85) ;
    opacity: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 25px;
    border-radius: 10px;
}

.choose-account {
    display:flex;
    margin-bottom: 10px;
    width: 100%;

}


.banner-close{
    position: absolute;
    top:30px;
    right:30px;
    width: 32px;
    height: 22px;
    cursor: pointer;
    z-index: 1002;
}
.banner-close span{
    position: absolute;
    width: 100%;
    height: 4px;
    background-color: #ffffff;
    border-radius: 30px;
}
.banner-close span:first-child{
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    -webkit-transform: translateY(-50%) rotate(45deg);
}
.banner-close span:last-child{
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
    -webkit-transform: translateY(50%) rotate(-45deg);
}

.account-title {
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
    user-select: none;
    text-align: center; margin: 15px 0 20px;
}

.account-text {
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    line-height: 22px;
}

.account-banner form {
    width: 100%;
}

.banner-input {
    width: 100%;
    margin: 10px 0;
}

.banner-input input {
    width: 100%;
    height: 40px;
    background-color: transparent;
    border-bottom: 1px solid #fff;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    opacity: 1;
    padding: 0 5px;
}

.banner-input input::placeholder {
    color: #fff;
    opacity: 0.6;
}

.account-caution {
    font-size: 13px;
    font-weight: 400;
    color: #fff;
    margin: 4px 0;
}

.account-btn {
    width: 100%;
    height: 50px;
    background-color: #fff;
    color: var(--main-blue1);
    font-size: 16px;
    font-weight: 700;
    margin-top: 24px;
    cursor: pointer;
    border-radius: 100px;
        transition-duration: .3s;
}

.account-btn:hover { background: var(--main-blue1); color:#fff;  }

.caution-memo{
    width: 100%;
    text-align: left;
    font-size: 13px;
    color: #fff;
    margin-top: 10px;
}
.account-open{
    display: none;
}
.scroll-arrow-wrap{
    z-index: 200;
    position: absolute;
    bottom: 30px;
    left:50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;    
}
.scroll-arrow-wrap p{
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 10px;
    opacity: 0.7;
    font-family: 'Rubik', sans-serif;
}
.scroll-arrow-layer{
    position: relative;
    width: 1px;
    height: 50px;
    background-color:rgba(255, 255, 255, 0.4);
    /* background-color: #fff; */
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    overflow: hidden;
}
.scroll-arrow{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 80px;
    background-color:  #ffffff;
    animation-name: scroll-ani;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1) 2s infinite;
}
@keyframes scroll-ani {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    90% {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}
.count-wrap{
    display: flex;
    align-items: center;
    justify-content: space-between;
    transform: translateY(60px);
    opacity: 0;
    margin-top: 50px;
}
.count-box{
    width: 30%;
    padding:20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.count-text{
    font-size: 18px;
    font-weight: 700;
    font-family: 'Rubik', sans-serif;
    color:  var(--main-blue1);
    margin-bottom: 14px;

}
.count-number{
    display: inline-block;
    font-size: 42px;
    font-weight: 700;
    color: #121212;
    letter-spacing: -1px;
    font-family: 'Rubik', sans-serif;
}
.bg-section{
    height: 310px;
    background-image: url(../images/main/main_bottom_bg.png) ;
    background-repeat: no-repeat;
    background-position: top left;
 /*    background-attachment: fixed; */
    background-size: 100%;
    padding: 0;
}
.back-bg{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.back-text{
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
    opacity: 1;
   /*  transform: translateY(70px); */
    user-select: none;
    text-shadow: 0px 2px 3px #12121240;
    text-align: center;
    line-height: 48px;
}
.circle-wrap{
    width: 100%;
    height: 650px;
    position: relative;
    margin-top: 50px;
}
.circle-center{
    position: absolute;
    max-width: 320px;
    width: 100%;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
}
.circle-img{
    width: 100%;
    transform:  rotate(320deg);
    opacity: 0;
}
.circle-logo{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    width: auto;
    max-width: 220px;
    opacity: 0;
}
.benefits-box{
    width:26%;
    min-width: 320px;
    height:auto;
    min-height: 140px;
    position: absolute;
    padding:22px 20px;
    border-radius: 10px;
    box-shadow:inset -2px 2px 4px #00000045;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    
}
.benefits1{
    top:30px;
    left:8%;
    background-color: var(--main-blue1);
    opacity: 0;
}
.benefits2{
    top:30px;
    right:8%;
    background-color: var(--main-blue2);
    opacity: 0;
}
.benefits3{
    bottom:30px;
    right:8%;
    background-color: var(--main-green);
    opacity: 0;
}
.benefits4{
    bottom:30px;
    left:8%;
    background-color: #7fa6f4;
    opacity: 0;
}
.benefits-title{
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 16px;
}
.benefits-text{
    font-size:14px;
    font-weight: 500;
    color: #ffffff;
    word-break: keep-all;
    line-height: 20px;
}
.usdt-section{
    padding: 0;
    background-image: url(../images/usdt_bg.png);
    background-position: center;
    background-size: cover;
    height: 220px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(-30px);
    opacity: 0;
}
.usdt-text{
    font-size: 40px;
    font-weight: 700;
    color: #fff;
    user-select: none;
}
.usdt-text span{
    display: inline-block;
    color: #fff;
    box-shadow: INSET 0px -14px 0px 0px #50AF94;
}
.spread-section{
    position: relative;

}
.spread-section::after{
    position: absolute;
    content: '';
    top:0;
    left:0;
    width: 100%;
    height: 320px;
    background-color: #f9f9f9;
    z-index:-10;
}
.type-table{
    margin-top: 50px;
    border-collapse: collapse;
    width: 100%;
    border-top: 4px solid var(--main-blue2);
    border-bottom: 1px solid var(--main-blue2);
}

.type-table tr th, .type-table tr th{
    padding:16px 0;
}
.type-table tr:nth-child(odd){
    background-color: #f9f9f9;
}
.type-table tr:nth-child(even){
    background-color: #ffffff;
}
.type-table tr:first-child th{
    background-color: var(--main-blue2);
    color: #fff;
}
.type-table tr td{
    text-align: center;
    font-size: 15px;
}
.main-tab-wrap{
    margin-top: 70px;
}
.tab-btn-wrap{
    position: relative;
    display: flex;
    justify-content: center;
}

.tab-btn{
    position: relative;
    width: auto;
    font-size: 20px;
    font-weight: 700;
    color: var(--main-blue2);
    background-color: transparent;
    text-align: center;
    cursor: pointer;
    user-select: none;
    margin: 0 25px;
    letter-spacing: 1px;
    font-family: 'Raleway', sans-serif;
}

.tab-btn span{
    color: var(--main-blue2);
    font-size: 20px;
    font-weight: 700;
    font-family: 'Raleway', sans-serif;
}
.tab-btn::after{
    content: '';
    position: absolute;
    left: -22px;
    top:50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background-color: var(--main-blue1);
    transform: translateY(-50%);
    transition-duration: .3s;
    z-index: -1;
    opacity: 0;
}
.tab-btn.active{
    color: var(--main-blue1);
}
.tab-btn.active span{
    color: #ffffff;
}
.tab-btn.active::after{
    width: 50px;
    height: 50px;
    transition-duration: .3s;
    opacity: 1;
}

.tab-content-wrap{
    width: 100%;
    margin-top:30px;
}
.tab-content{
    width: 0;
    opacity: 0;
    transition-duration: .3s;
    display: none;
}
.tab-content.active{
    display: block;
    width: 100%;
    opacity: 1;
}
.spread-wrap{
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 50px 20px 0;
}
.spread-wrap::before{
    position: absolute;
    content:'';
    top:0;
    left:0;
    width: 80px;
    height: 50px;
    border-top: 4px solid var(--main-blue2);
    border-left: 4px solid var(--main-blue2);
}
.spread-wrap::after{
    position: absolute;
    content:'';
    top:0;
    right:0;
    width: 80px;
    height: 50px;
    border-top: 4px solid var(--main-blue2);
    border-right: 4px solid var(--main-blue2);
}
.spread-list{
    width: 50%;
    padding:10px 10px 20px;
    display: flex;
}
.spread-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 25%;
    height: 50px;   
}
.spread-box strong{
    font-size: 13px;
    font-family: 'Raleway', sans-serif;
    line-height: 1;
}
.spread-box p{
    font-size: 14px;
    font-weight: 700;  
    font-family: 'Raleway', sans-serif;
    line-height: 1.1;
    opacity: 0.8;
}
.spread-box span{
    font-size: 16px;
    font-weight: 500;
    color: #5a5a5a;
    font-family: 'Rubik', sans-serif;
}
.spread-box span.spread-num{
    font-size: 20px;
    font-weight: 700;
    color: var(--main-green);
}

.spread-box span.txt-green {
    color: var(--main-green);
}
.spread-box span.txt-red {
    color: var(--text-red);
}


.flag-wrap{
    display: flex;
    align-items: center;
}
.flag-img{
    width: 48px;
    padding:0 1px;
}
@media screen and (max-width:1200px) {
	
	
	.choose-account{ width: 230px;  }
	.account_choose_btn, .account_choose_btn.active { font-size: 12px;  }
	
	
	
    .account-open{
        position: fixed;
        /* top: 100px; */
        right: 30px;
        border-radius: 50%;
        width: 90px;
        height: 90px;
        display: flex;
        align-items: center;
        justify-content: center;
        word-break: keep-all;
        text-align: center;
        background-color: var(--main-blue1);
        font-size: 15px;
        font-weight: 700;
        line-height: 20px;
        color: #ffffff;
        cursor: pointer;
        border: 0;
        z-index: 999;
        box-shadow: 2px 3px 14px rgba(0, 0, 0, 0.35);
        transition-duration: .3s;
        animation-name: ball-bounce;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1) 2s infinite;
    }
    @keyframes ball-bounce {
        0% {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
        50% {
            -webkit-transform: translate3d(0, -4px, 0);
            transform: translate3d(0, -4px, 0);
        }
        100% {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
    }
    .account-open:hover{
        background-color: #ffffff;
        color: var(--main-blue1);
        transition-duration: .3s;
    }
    .account-banner{
        position: fixed;
        top:-100%;
        left:0;
        max-width: 100vw;
        width: 100vw;
        height: 100%;
        opacity: 1 !important;
        z-index: 1010;
        overflow-y: auto;
        padding:30px 15px;
        display: block;
    }
    .account-banner::-webkit-scrollbar {
        width: 0;
    }
    .banner-show{
        top:0;
        transition-duration: .5s;
    }
}
@media screen and (max-width:991px){
    .main-banner{
        min-height: 580px;
        height: 100vh;
        padding-top: 70px;
    }
    .account-open{
        width: 80px;
        height: 80px;
    }
    .slide-title{
        font-size: 38px;
        margin-bottom: 20px;
    }
    .slide-text{
        font-size: 28px;
        margin-bottom: 25px;
    }
    .account-arrow-wrap a::after{
        top:calc(50% + 4px);
    }
    .swiper-progress-bar .slide_progress-bar{
        left:2%;
    }
    .account-arrow-wrap a{
        font-size: 18px;
        margin-top: 12px;
    }
    .swiper-pagination{
        font-size: 15px;
    }
    .scroll-arrow-layer{
        height: 60px;
    }
    .bg-section{
        height: 280px;
            background-attachment: inherit;
            background-size: 100%;
            padding: 0;
            background-position: center;
    }
    .back-text{
        font-size: 30px;
        line-height:42px;
    }
    .benefits-box{
        min-width: 280px;
    }
    .circle-center{
        max-width: 280px;
    }
    .benefits1{
        left:4%;
    }
    .benefits2{
        right:4%;
    }
    .benefits3{
        right:4%;
    }
    .benefits4{
        left:4%;
    }
    .usdt-section{
        height: 200px;
    }
    .usdt-text{
        font-size: 36px;
    }
}
@media screen and (max-width:768px){
    .slide-title{
        font-size: 34px;
    }
    .slide-text{
        font-size: 26px;
    }
    .swiper-pagination{
        font-size: 14px;
    }
    .swiper-progress-bar .slide_progress-bar{
        width: 30%;
    }
    .count-wrap{
        margin-top: 40px;
    }
    .count-box{
        width: 32%;
    }
    .count-text{
        font-size: 16px;
        text-align: center;
        margin-bottom: 10px;
    }
    .count-number{
        font-size: 38px;
    }
    .back-text{
        font-size: 26px;
        word-break: keep-all;
    }
    .circle-wrap{
        height: 560px;
        margin-top: 40px;
    }
    .circle-center{
        max-width: 240px;
    }
    .benefits-box{
        padding:16px 10px;
    }
    .benefits1{
        left:0;
    }
    .benefits2{
        right: 0;
    }
    .benefits3{
        right: 0;
    }
    .benefits4{
        left:0;
    }
    .usdt-text{
        font-size: 32px;
    }
    .type-table tr th, .type-table tr th{
        padding:14px 0;
        font-size: 15px;
    }
    .type-table tr td{
        font-size: 14px;
    }
    .tab-btn{
        font-size: 18px;
    }
    .tab-btn span{
        font-size: 18px;
    } 
    .tab-btn::after{
        left: -20px;
    }
    .tab-btn.active::after{
        width: 42px;
        height: 42px;
    }
}
@media screen and (max-width:680px){
    .circle-wrap{
        display: flex;
        flex-direction: column;
        align-items: center;
        height: auto;
    }
    .circle-center{
        display: none;
    }
    .benefits-box{
        position: relative;
        top:0;
        bottom:0;
        left:0;
        right: 0;
        margin-bottom: 10px;
        width: 80%;
    }
    .benefits-box:last-of-type{
        margin-bottom: 0;
    }
    .spread-wrap{
        padding:30px 10px 0;
    }
    .spread-list{
        width: 100%;
    }
}
@media screen and (max-width:500px){
    .main-banner{
        padding-top: 60px;
    }
    .account-open{
        right:20px;   
    }
}






.content-section{ padding: 120px 0;  }
.main_wrap .section-tag { font-size: 17px; font-weight: 300; margin-bottom: 10px;  }

.main_wrap .section1 .section-tag{  text-align: left;  }
.main_wrap .section1 { background: url("/static/images/main/main_section1.png") no-repeat right center; background-size: 45%;  }
.main_wrap .section1 .section-tag, .section1 .section-description, .section1 .section-title { text-align: left;  }

.main_wrap .count-box{ border-radius: 10px; border: 2px solid #D2D2D2; padding: 50px 0; transition: 0.3s;   }

.main_wrap .section-description{ margin-top: 30px; font-size: 17px;   }
.main_wrap .section1 .count-box .img {  }
.main_wrap .section1 .count-box .img img { height: 30px; }

.main_wrap .section1 .count-text { margin-top: 15px; color:#000; font-weight: 400;   }


.main_wrap .section1 .count-number{ font-weight: 500; color: var(--main-blue1); }

.main_wrap .content-section.section1 { padding: 150px 0;  }

.main_wrap .section1 .count-box:hover {  border-color:var(--main-blue1);   }


.main_wrap .section2 { background: url("/static/images/main/main_section2.png") no-repeat center; background-size: cover;  }


.main_wrap .section2_li{ display: inline-block; width: 100%; margin-top: 70px;  }
.main_wrap .section2_li ul { display: flex; gap:30px; flex-direction: row;  flex-wrap: wrap;}
.main_wrap .section2_li ul li { width: calc(20% - 24px); position: relative; transition: 0.3s; }

.main_wrap .section2_li ul li > div{ transition: 0.3s; border-radius: 10px; padding: 20px; 
 background: #fff; width: 100%; height: 380px; max-width: 100%; text-align: center; padding-top: 30px;
 border: 1px solid #fff;  box-shadow: 2px 2px 30px 0px rgba(0, 0, 0, 0.15);  }

.main_wrap .section2_li ul li .img{ margin-bottom: 20px;  }

.main_wrap .section2_li ul li img{ width: auto; width: 200px; max-width: 100%;   }

.main_wrap .section2_li ul li h5{ font-size: 20px;     transition: 0.3s;  }
.main_wrap .section2_li ul li p { margin-top: 10px; line-height: 1.35; font-size: 13px;  }

.main_wrap .section2_li ul li:hover > div{ border-color: var(--main-blue1); }
.main_wrap .section2_li ul li:hover h5 { color: var(--main-blue1); }

.main_wrap .section3 .section-tag{ text-align: left;   }
.main_wrap .section3 .section-title { text-align: left;   }
.main_wrap .section3 .section-title_w p{ text-align: left; line-height: 1.5;   }

.main_wrap .section3 img{ width: 70px;  }

.main_wrap .section3 .swiper_wrap { width: 50%; overflow: hidden;  position: absolute; right: 0; top: 27%; margin: 0 20px;  }

.main_wrap .section3 .section3_li_w > div{  width: 45%; text-align: left; padding: 60px 30px; border: 2px solid #D2D2D2;   transition: 0.3s;  }

.main_wrap .section3 .swiper-slide.swiper-slide-active {  border-color: var(--main-blue1); }
.main_wrap .section3 .swiper-slide.swiper-slide-active h5 { color: var(--main-blue1); }

.main_wrap .section3{ position: relative;  }


.main_wrap .section3 .section3_li_w .memo { margin-top: 10px;  }  
.main_wrap .section3 .section3_li_w .memo h5 { font-size: 15px;     transition: 0.3s; line-height: 1.5 }
.main_wrap .section3 .section3_li_w .memo p { margin-top: 5px; line-height: 1.35; font-size: 13px;   }




.section4{ background: #FAFAFA; }



.slide_btn_w{ display: flex; width: 100%; margin-top: 20px; gap: 9px;  }
.slide_btn_w span{ cursor: pointer; }


.main_wrap .section4_li{ display: inline-block; width: 100%; margin-top: 90px;  }
.main_wrap .section4_li ul { display: flex; gap: 30px;  }

.main_wrap .section4_li ul li { text-align: center; width: calc(25% - 20px);  transition: 0.3s;  }

.main_wrap .section4_li ul li a{   position: relative; border-radius: 10px; border: 2px solid #D2D2D2; background: #FFF; 
padding: 80px 20px 50px; transition: 0.3s; display: inline-block; width: 100%;  }
.main_wrap .section4_li ul li h5{ font-size: 19px;     transition: 0.3s; }
.main_wrap .section4_li ul li p { margin-top: 10px;     line-height: 1.35;  }


.main_wrap .section4_li ul em {  background-color: var(--main-blue2); color:#fff;     position: absolute;
    left: 50%; top: -26px; transform: translate(-50%, -0%); width: 55px; height: 55px; border-radius: 100px; font-size: 25px;
    text-align: center; font-style: normal; line-height: 55px;   }

.main_wrap .section4_li ul li a > span{ display: inline-block; width: 100%; padding: 12px 20px; border-radius: 10px;
border: 1px solid #222; margin-top: 50px;   transition: 0.3s;  }
.main_wrap .section4_li ul li span span { font-size: 15px; font-weight: 600; padding-right: 20px; 
background: url("/static/images/common/mor_btn1.png") no-repeat right center;   transition: 0.3s;  }




.main_wrap .section4_li ul li i { display: inline-block;  width: 70px; height: 70px; margin-bottom: 20px;   transition: 0.3s;
background-size: 70px !important; }

.main_wrap .section4_li ul li.main_section4_ico1 i { background: url("/static/images/main/main_section4_ico1.png") no-repeat center; }
.main_wrap .section4_li ul li.main_section4_ico2 i { background: url("/static/images/main/main_section4_ico2.png") no-repeat center; }
.main_wrap .section4_li ul li.main_section4_ico3 i { background: url("/static/images/main/main_section4_ico3.png") no-repeat center; }
.main_wrap .section4_li ul li.main_section4_ico4 i { background: url("/static/images/main/main_section4_ico4.png") no-repeat center; }

.main_wrap .section4_li ul li:hover a{ border: 2px solid var(--main-blue1); box-shadow: 4px 4px 10px 0px rgba(227, 74, 40, 0.15); }

.main_wrap .section4_li ul li:hover a > span { background-color: var(--main-blue1);  border-color: var(--main-blue1); }

.main_wrap .section4_li ul li:hover span span {  background: url("/static/images/common/mor_btn1_w.png") no-repeat right center; color:#fff;  }


.main_wrap .section4_li ul li:hover.main_section4_ico1 i { background: url("/static/images/main/main_section4_ico1_on.png") no-repeat center; }
.main_wrap .section4_li ul li:hover.main_section4_ico2 i { background: url("/static/images/main/main_section4_ico2_on.png") no-repeat center; }
.main_wrap .section4_li ul li:hover.main_section4_ico3 i { background: url("/static/images/main/main_section4_ico3_on.png") no-repeat center; }
.main_wrap .section4_li ul li:hover.main_section4_ico4 i { background: url("/static/images/main/main_section4_ico4_on.png") no-repeat center; }





.main-banner .swiper-pagination-custom { position: absolute;  top: 27%; width: 100%; max-width: none; height: 30px; padding: 0;  }
.main-banner .swiper-pagination-custom ul { padding: 0 0.7%; display: flex; gap:10px; max-width: 1600px; width: 100%; margin: auto;   }
.main-banner .swiper-pagination-custom li { width: 50px; height: 4px; background: #fff; opacity: 0.2;  }
.main-banner .swiper-pagination-custom li.on  { height: 8px; opacity:1;   }


.main_wrap .content-section.section3 .container { display: flex; }

.main_wrap .content-section.section3 .section-title_w { width: 35%; padding-right: 50px;  }

.main_wrap .content-section.section3 .r { width: 65%;  }
.main_wrap .content-section.section3 .section3_li_w { display: flex; gap: 20px;  flex-wrap: wrap; text-align: left; } 
.main_wrap .content-section.section3 .section3_li_w > div{ width: calc(50% - 10px); background: #fff;
 border: 1px solid #c5c5c5;  padding: 20px 30px;  }



.main_wrap .section3 .section-title_w a { margin-top: 50px; display: inline-block; float: left;
    color: #333; border: 1px solid #333; padding: 10px 20px; transition: 0.3s;  }

.main_wrap .section3 .section-title_w a:hover { background: var(--main-blue1); color: #fff; border-color: var(--main-blue1); } 





.side_close{ position: absolute; right: 15px ; top:35px;  }



.main_wrap .content-section.section5 .section-title_w { width: 39%; padding-right: 10px; text-align: left; padding-top: 75px  }

.main_wrap .section5 .section-tag{ text-align: left;   }
.main_wrap .section5 .section-title { text-align: left;   }
.main_wrap .section5 .section-title_w p{ text-align: left; line-height: 1.5;   }

.main_wrap .content-section.section5 .section-title_w strong { color:var(--main-blue2); }


.section5_li{ display: inline-block; width: 100%; margin-top: 30px;  }

.section5_li ul { display: flex; flex-wrap: wrap; }
.section5_li ul li{  width: 50%; font-size: 15px; margin: 1px 0; padding: 10px 0; padding-left: 23px; 
    background: url(../images/common/ico_ch.png) no-repeat 0 10px ; background-size: 17px;    }


.main_wrap .content-section.section5 .container { display: flex; }
.main_wrap .content-section.section5 .r { width: 61%;  }

.main_wrap .content-section.section5 .r img { width: 80%; float: right;  }






.account-banner{ right: 0; top:0; height: 100%; padding-top: 70px; max-width: 500px;  }