.banner{width:100%;height:auto;background:-webkit-radial-gradient(50% 40%,80% 100%,#6132b8 0,#131673 100%);background:-o-radial-gradient(50% 40%,80% 100%,#6132b8 0,#131673 100%);background:radial-gradient(80% 100% at 50% 40%,#6132b8 0,#131673 100%)} .banner-header{width:100%;height:auto;overflow:hidden;text-align:center;position:relative;} .banner-title{text-transform: uppercase;width:100%;margin-top:60px;font-family:"Julius Sans One";font-size:50px;font-weight:700;line-height:1;color:#fff;text-shadow:0 6px 6px rgba(46,20,107,.45)} .banner-intro{padding:0 20px;margin-top:20px;font-size:18px;font-weight:300;line-height:30px;color:#d9f7ff} .banner-nav{width:90%;height:auto;overflow:hidden;margin:30px auto 0;padding:10px;position:relative;background:rgba(15,15,15,.25);border-radius:10px;} .banner-nav li{float:left;background:#fff;cursor:pointer;line-height:normal;width:100%;height:40px;line-height:40px;border-radius:3px;margin-right:0;margin-bottom:10px;font-size:20px;position:relative} .banner-nav li:last-child{margin-bottom:0} .banner-nav li:hover,.banner-nav li.active{color:var(--ace-color-main);} .banner-nav li i{position:absolute;top:0px;right:10px;font-size:20px;transition:transform .3s ease} .banner-nav li.active i{transform: rotate(-180deg);} .banner-menu{position:relative;z-index:9;} .banner-menu ul{width:calc(90% - 180px);height:auto;overflow:hidden;z-index:3;background:#FFF;border-radius:3px;padding:10px;position:absolute;top:0;left:calc(5% + 10px);box-shadow:0 2px 8px rgba(0,0,0,.1);display:none;} .banner-menu ul li{width:100%;height:30px;line-height:30px;position:relative;cursor:pointer;} .banner-menu ul li a{color:#333;} .banner-menu ul li:hover,.banner-menu ul li:hover a{color:var(--ace-color-main);font-weight:600;} .banner-menu ul li i{display:inline-block;font-style:normal;width:30px;text-align:right;margin-right:10px;} #menu-major{top:-50px;left:calc(5% + 10px);width:calc(90% - 20px);} #menu-major li{width:50%;float:left;} #menu-minor{left:calc(95% - 160px);width:150px;text-align:right;padding:10px 15px;} #menu-minor li{font-size:18px;} #menu-minor li i{position:absolute;top:0px;left:-5px;transition:transform .3s ease;text-align:left;} @media (min-width :992px){ .banner-title{margin-top:80px;} .banner-intro{padding:0 50px;} .banner-nav{width:630px;height:60px;} .banner-nav li{width:300px;margin-right:10px;margin-bottom:10px;} .banner-nav li:last-child{margin-right:0} .banner-menu ul{width:300px;left:calc(50% - 305px);} #menu-major{top:0;left:calc(50% - 305px);width:610px;} #menu-major li{width:33%;} #menu-major li:nth-child(2n){width:33%;} #menu-minor{left:calc(50% + 5px);width:300px;} } .banner-footer{width:100%;height:auto;position:relative} .banner-footer img{width:100%;z-index:1;} .index{width:100%;overflow:hidden;box-shadow:var(--ace-shadow-main);border-radius:10px;margin-bottom:20px;background-color:#fff} .index:last-child{margin-bottom:0;} .index-title{width:100%;height:auto;overflow:hidden;margin:0 auto;padding:0 20px;} .index-title h1{width:100%;border-bottom:1px solid #eee;text-align:center;font-size:36px;color:var(--ace-color-main);line-height:1.2;padding:20px 20px 15px;margin-bottom:0;} .index-content{width:100%;height:auto;overflow:hidden;padding:15px 15px 0;} .index-content > p{font-size:18px;margin-bottom:10px;} .index-content > p:last-child{margin-bottom:15px;} .index-intro{width:100%;height:auto;overflow:hidden;font-size:18px;margin-top:5px;margin-bottom:15px;} .index-intro p{text-align:left;margin-bottom:15px;} .index-intro.major-intro{margin-bottom:0;} .index-intro.minor-intro{margin-bottom:30px;} .index-tab{width:100%;position:relative;height:60px;background-color:#f6f7f8;display: flex;justify-content: space-between;align-items: center;} .index-tab .tab-left,.index-tab .tab-right{position:absolute;top:0;height:0;border-bottom:60px solid transparent;border-bottom-color:transparent;text-align:center;font-size:20px;line-height:60px;cursor:pointer;white-space: nowrap;width:50%;} .index-tab .tab-left{left:0;border-right:60px solid transparent;padding-left:30px;} .index-tab .tab-right{right:0;border-left:60px solid transparent;padding-right:30px;} .index-tab .tab-left:hover,.index-tab .tab-right:hover{font-weight:600;color:var(--ace-color-main);} .index-tab .active{width:60%;font-size:28px;color:var(--ace-color-main);font-weight:700;z-index:2;line-height:90px;border-bottom-color:#fff!important} .index-list{ width:100%;height:auto;overflow:hidden;padding: 10px 0 0;margin:0;} .index-list li{float:left;width:calc(50% - 7px);margin-right:14px;} .index-list li:nth-child(2n){margin-right:0;} .index-list li .item-image{width:100%;height:auto;border-radius:10px;padding:15px;background:#f6f7f8;} .index-list li .item-title{width:100%;height:auto;line-height:30px;text-align:center;font-size:20px;margin-top:10px;margin-bottom:10px;} @media (min-width :992px){ .index-title{padding:0 30px;} .index-title h1{font-size:40px;padding:30px 30px 20px;} .index-content{padding:15px 30px 0;} .index-content > p{margin-bottom:15px;} .index-content > p:last-child{margin-bottom:30px;} .index-list li{width:calc(20% - 16px);margin-right:20px;} .index-list li:nth-child(2n){margin-right:20px;} .index-list li:nth-child(5n){margin-right:0;} } .suit-tab{width:100%;height:46px;margin:20px 0;border-bottom:1px solid var(--ace-color-main);padding-left:30px;overflow: hidden;white-space: nowrap;display:flex;} .suit-tab .tab-item{display:inline-block;float:left;padding:0 5px;background-color:#f6f7f8;z-index:2;position:relative;cursor:pointer;color:#777;border-radius:8px 8px 0 0;text-align:center;transition:all .3s ease;font-size:20px;margin-right:40px;margin-bottom:0;height:46px;line-height:46px;} .suit-tab .tab-item:after,.suit-tab .tab-item:before{display:block;content:" ";position:absolute;top:0;height:100%;width:30px;background-color:#f6f7f8;transition:all 250ms ease;z-index:-1} .suit-tab .tab-item:before{right:-15px;transform:skew(30deg,0deg);box-shadow:rgba(0,0,0,.1) 3px 2px 5px,inset rgba(255,255,255,.09) -1px 0;border-radius:0 8px 0 0} .suit-tab .tab-item:after{left:-15px;transform:skew(-30deg,0deg);box-shadow:rgba(0,0,0,.1) -3px 2px 5px,inset rgba(255,255,255,.09) 1px 0;border-radius:8px 0 0 0} .suit-tab .tab-item:hover{margin-right:40px;} .suit-tab .tab-item:hover,.suit-tab .tab-item:hover:after,.suit-tab .tab-item:hover:before{color:var(--ace-color-main);} .suit-tab .active{margin-right:40px;z-index:3;position: relative;} .suit-tab .active,.suit-tab .active:hover,.suit-tab .active:after,.suit-tab .active:before{background-color:var(--ace-color-main);color:#fff} @media (min-width :992px){ .index{margin-bottom:30px;} .suit-tab .tab-item{padding:0 20px;} .index-intro{text-align:center;} .index-list{ padding: 10px 0 10px;} }