* {margin: 0;padding: 0;box-sizing: border-box;}
        body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;color: #333;line-height: 1.6;overflow-x: hidden;}
        .wrap {width: 100%;background: url(../images/bg.jpg) center top no-repeat #1a231e;background-size: 100%;}
        .inner-wrap {width: 100%;background: url(../images/inner-bg.jpg) center top no-repeat #1a231e;background-size: 100%;padding-top: 7.4rem;}
        a{text-decoration: none;}
        .animate-section {animation: fadeInUp 0.8s ease forwards;}

        /* 导航栏 */
        header {width: 100%;background: url(../images/topNavi_bg.png) center top no-repeat;left: 0;position: sticky;top: 0;z-index: 100;height: 1.10rem;margin-bottom: 7rem;background-size: 100%;}

        .header-container {height: .80rem; }
        #subscribeBtn{display: block;margin: 0 auto .45rem;text-indent: -9999px;background: url(../images/btn-subscribe.png) no-repeat;width: 4.95rem;height: 1.52rem;background-size: 100%;}

        .nav-menu {list-style: none;display: flex;height: .8rem;justify-content: center;align-items: center;}
        .nav-menu li{display: block;height: .8rem;width: 20%;}
        .nav-menu li a {color: #f2e0a4; text-decoration: none;font-size: .26rem;transition: all 0.3s ease;line-height: .8rem;display: block;height: .8rem;text-align: center;}
        .nav-menu li a:hover {font-size: .30rem;}
        .nav-menu li a.nav-pay{color: #ff0000;}
        .subscribe-wrap{margin-bottom: .2rem;}
        .subscribe-wrap h2{background: url(../images/subscribe_title.png) no-repeat;width: 3.47rem;height: .65rem;margin: 0 auto;text-indent: -9999px;background-size: 100%;}
        .subscribe-wrap p{text-align: center;font-size: .34rem;color: #af8f5d;line-height: .5rem;margin: .35rem 0;}
        .subscribe-wrap img{display: block;margin: 0 auto;}

        .dlBtn-wrap{display: flex;justify-content: center;height: 2.18rem;}
        .dlBtn-wrap a{display: block;text-indent: -9999px;margin: 0 .35rem;}
        .dl-ios{background: url(../images/btn-ios.png) no-repeat;width: 3.23rem;height: .97rem;background-size: 100%;}
        .dl-android{background: url(../images/btn-android.png) no-repeat;width: 3.25rem;height: .97rem;background-size: 100%;}
        .btn-index{display: block;position: absolute;right: 10%;top: .5rem;background: url(../images/btn-back.png) no-repeat;width: 4.3rem;height: 1,32rem;background-size: 100%;text-indent: -9999px;}
        .roles-wrap h2{background: url(../images/title_role.png) no-repeat;width: 4.21rem;height: 1.10rem;margin: 0 auto;text-indent: -9999px;background-size: 100%;}
        .role-container{position: relative;}
        .swiper-slide{width: 100%;display: flex;justify-content: center;}
        .swiper-pagination{position: absolute;}
        .swiper-container-horizontal>.swiper-pagination-bullets{left: 50%;margin-left: -6.90rem;top: 0;width: 4rem;}
        #roles_pagination span{display: block;width: 1.82rem;height: 1.82rem;opacity: 1;margin: 0 0;}
        #roles_pagination .swiper-pagination-bullet:nth-child(1){background: url(../images/role-s-0.png) center no-repeat;margin-left: 1.92rem;background-size: 85%;}
        #roles_pagination .swiper-pagination-bullet:nth-child(2){background: url(../images/role-s-1.png) center no-repeat;margin-left: .77rem;background-size: 85%;}
        #roles_pagination .swiper-pagination-bullet:nth-child(3){background: url(../images/role-s-2.png) center no-repeat;background-size: 85%;margin-left: .2rem;}
        #roles_pagination .swiper-pagination-bullet:nth-child(4){background: url(../images/role-s-3.png) center no-repeat;background-size: 85%;margin-left: .2rem;}
        #roles_pagination .swiper-pagination-bullet:nth-child(5){background: url(../images/role-s-4.png) center no-repeat;margin-left: .9rem;background-size: 85%;}
        #roles_pagination .swiper-pagination-bullet:nth-child(6){background: url(../images/role-s-5.png) center no-repeat;margin-left: 2.32rem;background-size: 85%;}

        #roleImg_2{margin-left: -5rem;}
        #roleImg_3{margin-left: -2rem;}
        #roleImg_6{margin-left: -2rem;}

        #roles_pagination .swiper-pagination-bullet:nth-child(6):hover{background: url(../images/role-s-5-hover.png) no-repeat;background-size: 100%;}
        #roles_pagination .swiper-pagination-bullet:nth-child(1):hover{background: url(../images/role-s-0-hover.png) no-repeat;background-size: 100%;}
        #roles_pagination .swiper-pagination-bullet:nth-child(2):hover{background: url(../images/role-s-1-hover.png) no-repeat;background-size: 100%;}
        #roles_pagination .swiper-pagination-bullet:nth-child(3):hover{background: url(../images/role-s-2-hover.png) no-repeat;background-size: 100%;}
        #roles_pagination .swiper-pagination-bullet:nth-child(4):hover{background: url(../images/role-s-3-hover.png) no-repeat;background-size: 100%;}
        #roles_pagination .swiper-pagination-bullet:nth-child(5):hover{background: url(../images/role-s-4-hover.png) no-repeat;background-size: 100%;}

        .role-info{width: 3.09rem;position: absolute;top: 2.20rem;left: 50%;margin-left: 1.80rem;}
        .role-name{text-align: center;background: url(../images/roleName_bg.png) no-repeat;height: 1.30rem;line-height: 1.20rem;font-size: .30rem;color: #fcff00;background-size: 100%;}
        .role-info h3{text-align: center;background: url(../images/role_icon.png) center bottom no-repeat;font-size: 35px;color: white;line-height: 68px;text-shadow: -2px -2px 0 #707e5e,2px -2px 0 #707e5e,-2px 2px 0 #707e5e,2px 2px 0 #707e5e;}
        .info-text{text-align: center;color: #26362e;font-size: 24px;line-height: 50px;background: url(../images/role_line.png) center bottom no-repeat;}

        .feature-wrap{width: 79%;margin: 4rem auto 0;padding-bottom: 1.50rem;}
        .feature-wrap h2{background: url(../images/title_intro.png) no-repeat;width: 4.01rem;height: 1.01rem;margin: 0 auto 1.20rem;text-indent: -9999px;background-size: 100%;}
        .featureImg-wrap{width: 100%;padding: .22rem .19rem;position: relative;background: url(../images/intro_wrap.png) no-repeat;background-size: 100%;}
        .featureImg-wrap img{width: 100%;}
        .featureImg-wrap::before{display: block;content: "";position: absolute;background: url(../images/intro_icon.png) no-repeat;width: 4.61rem;height: .72rem;right: 0;top: -0.8rem;background-size: 100%;}
        .featureImg-wrap::after{display: block;content: "";position: absolute;background: url(../images/intro_icon.png) no-repeat;width: 4.61rem;height: .72rem;left: 0;bottom: -0.8rem;background-size: 100%;}
        .swiper-button-prev{display: block;background: url(../images/arrow_Left.png) no-repeat;width: .63rem;height: .78rem;background-size: 100%;}
        .swiper-button-next{display: block;background: url(../images/arrow_Right.png) no-repeat;width: .63rem;height: .78rem;background-size: 100%;}

        .container{width: 79%;border-radius: 25px;margin: 0 auto 1.5rem;position: relative;background: url(../images/dot.png) repeat;padding: .8rem 0;box-shadow: 0 0 0 .02rem #ffdb05,0 0 0 .02rem #786700, 0 0 0 .02rem #eedf86;}
        .container::after {top: -40px; left: -40px; right: -40px; bottom: -40px; border-color: green; }
        .container h3{margin: 0 auto;width: 79%;margin: 0 auto .3rem;text-align: center;font-size: .3rem;color: white;line-height: .4rem;border-bottom: 1px solid #f0e28c;padding: .3rem 0;}
        .text-content{font-size: .24rem;line-height: .55rem;color: white;width: 79%;margin: 0 auto;}


        /* 页脚 */
        footer {width: 100%;padding-bottom: 1rem;background: #0d0d0d;}
        .footer-icon-wrap{width: 100%;background: #1b1b1b;}
        .footer-icon-wrap h2{background: url(../images/title_contract.png) no-repeat;width: 2.56rem;height: .79rem;margin: 0 auto;text-indent: -9999px;background-size: 100%;}
        .icon-list{display: flex;justify-content: center;align-items: center;height: 3rem;width: 100%;border-top: .01rem solid #313131;}
        .icon-list a{display: flex;width: .96rem;height: .96rem;justify-content: center;align-items: center;border-radius: 1rem;background: #313131;margin: 0 1rem;}
        .icon-list a:hover{background: #ff6845;}
        .copyright {text-align: center;padding-top: .5rem; margin-top: .5rem;}

        .link-wrap{text-align: center;font-size: .3rem;color: white;line-height: .9rem;}
        .link-wrap a{color: white;display: inline-block;margin: 0 .1rem;}

        /* 预约弹窗样式 */
        .modal-overlay {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.7);display: flex;justify-content: center;align-items: center;z-index: 1000;opacity: 0;visibility: hidden;transition: all 0.3s ease;  }
        .modal-overlay.active {opacity: 1;visibility: visible;}
        
        .subscribe-modal {background: url(../images/pop_bg1.png) no-repeat;width: 12.61rem;height: 5.44rem;background-size: 100%;position: relative;transform: translateY(30px);transition: transform 0.4s ease;padding-top: .6rem;box-sizing: border-box;}
        
        .modal-overlay.active .subscribe-modal {transform: translateY(0);}
        
        .modal-close {background: url(../images/pop_close.png) no-repeat;width: .26rem;height: .26rem;background-size: 100%;position: absolute;top: .3rem;right: .3rem;transition: all 0.3s ease;border: 0;cursor: pointer;}
        
        .modal-close:hover {opacity: .8;}
        
        .modal-title {text-indent: -9999px;margin: 0 auto .32rem;background: url(../images/pop-subscribe-title.png) no-repeat;width: 2.36rem;height: .45rem;background-size: 100%;display: block;}
   
        
        .form-group {display: flex;align-items: center;width: 6.35rem;margin: 0 auto .35rem;justify-content: space-between;}
        
        .input-group {width: 6.35rem;height: .69rem;margin: 0 auto .3rem;position: relative;display: flex;border-radius: 100px;background: white;border: .03rem solid #cacfb2;align-items: center; }
        
        .phone-prefix {border-right: .02rem solid #b7b590;height: .3rem;color: #aeaeae;font-size: .24rem;width: 1rem;text-align: center;margin-right: .25rem;}
        
        .input-group input {width: 60%;height: .26rem;color: #aeaeae;font-size: .24rem;transition: all 0.3s ease;border: 0;}
        .input-group input::placeholder{color: #aeaeae;font-size: .24rem;}
        
        .input-group input:focus {outline: none;}
        
        .form-group #code{width: 4rem;height: .69rem;position: relative;border-radius: 100px;background: white;border: .03rem solid #cacfb2;text-align: center;color: #aeaeae;font-size: .2rem;}
        .form-group #code::placeholder{color: #aeaeae;font-size: .2rem;}
        
        #sendCodeBtn{width: 2.15rem;height: .69rem;background: #8f976c;border-radius: 100px;border: .03rem solid #cacfb2;text-align: center;display: block;font-size: .2rem;color: white;}

        .message {text-align: center;color: #ff6b6b;font-size: .24rem;margin-top: 8px;}

        #submitBtn{display: block;width: 3.6rem;height: .69rem;background: #487036;border-radius: 100px;border: .03rem solid #cacfb2;margin: 0 auto;color: white;font-size: .24rem;}
        
        .success-modal {background: url(../images/pop_bg2.png) no-repeat;width: 5.96rem;height: 3.92rem;background-size: 100%;position: relative;display: flex;align-items: center;justify-content: center;}
      
        .success-message {text-indent: -9999px;margin: 0 auto;background: url(../images/subscribe_sucess.png) no-repeat;width: 3.47rem;height: .7rem;background-size: 100%;}
       

        @media (max-width: 1200px) {
          .wrap {width: 100%;background: url(../images/m_bg.jpg) center top no-repeat #1a231e;background-size: 100%;}
          #roleImg_3{width: 90%;}
          .subscribe-wrap img{width: 80%;}
        }