.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;} .detail{width:100%;overflow:hidden;box-shadow:var(--shadow-main);border-radius:10px;background-color:#fff} .detail-title{width:100%;height:auto;overflow:hidden;margin:0 auto;padding:0 var(--ace-gutter);} .detail-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 0;margin-bottom:0;} .detail-content{width:100%;height:auto;padding:var(--ace-gutter);overflow:hidden;position:relative} .detail-left{float:left;width:100%;height:auto;overflow:hidden;margin-bottom:var(--ace-gutter);} .detail-image img{width:100%;height:auto;border-radius:10px;padding:14px;background:#f1f2f3;margin-bottom:16px;} .detail-right{float:left;width:100%;height:auto;overflow:hidden;padding-left:0;} .detail-right > h2{width:100%;height:40px;line-height:1;font-size:30px;margin-bottom:20px;} .detail-right h3{width:100%;font-size:22px;margin-bottom:5px;color:var(--ace-color-main)} .detail-right h4{width:100%;font-size:18px;margin-bottom:5px;color:var(--ace-color-main);} .detail-right h4::before {content: "•";padding-right: 5px;} .detail-right strong{color:#666} .detail-right p{font-size:20px;margin-bottom:15px} .detail-right > section{padding-top:30px;} .detail-right > section:first-child{padding-top:0;} .detail-right ol{margin:15px 0;padding-left:20px;counter-reset:item;font-size:20px;} .detail-right ol li{position: relative;padding-left:15px} .detail-right ol li:before{content:counters(item, ".") ".";counter-increment:item;position: absolute;left: -20px;} .detail-menu{width:100%;height:auto;overflow:hidden;background:#f1f2f3;color:#555;padding:15px 20px;border-radius:10px;position:relative;border:1px solid #ddd;} .detail-menu .menu-title{width:100%;height:auto;cursor:pointer;font-size:22px;font-weight:700;color:var(--ace-color-main)} .detail-menu .menu-title i{position:absolute;top:10px;right:15px;font-size:30px;transition:transform .3s ease} .detail-menu .menu-list{text-transform:capitalize;counter-reset:item;font-size:18px;} .detail-menu .menu-list > li{margin-top:15px;margin-left: 15px;padding-left:15px;position: relative;} .detail-menu .menu-list > li:before{content:counters(item, ".") ". ";counter-increment:item;position: absolute;left: -10px;} .detail-menu .menu-list li ol{margin-top:5px;padding-left:30px;counter-reset:item} .detail-menu .menu-list li ol li{position: relative;padding-left:10px} .detail-menu .menu-list li ol li:before{content:counters(item, ".") ". ";counter-increment:item;position: absolute;left: -28px;} @media (min-width :992px){ .detail-left{width:30%;} .detail-image img{padding:20px;margin-bottom:20px;} .detail-right{float:right;width:70%;padding-left:30px;} .detail-menu{border:none;} .detail-menu .menu-title i{right:20px;} } .detail-tab{width:100%;height:46px;margin-bottom:20px;border-bottom:1px solid var(--ace-color-main);padding-left:30px;overflow: hidden;white-space: nowrap;display:flex;} .detail-tab .tab-item{display:inline-block;float:left;padding:0 5px;background-color:#f1f2f3;z-index:2;position:relative;cursor:pointer;color:#777;border-radius:8px 8px 0 0;text-align:center;transition:all 250ms ease;font-size:20px;margin-right:40px;margin-bottom:0;height:46px;line-height:46px;} .detail-tab .tab-item:after,.detail-tab .tab-item:before{display:block;content:" ";position:absolute;top:0;height:100%;width:30px;background-color:#f1f2f3;transition:all 250ms ease;z-index:-1} .detail-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} .detail-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} .detail-tab .tab-item:hover{margin-right:40px;} .detail-tab .tab-item:hover,.detail-tab .tab-item:hover:after,.detail-tab .tab-item:hover:before{color:var(--ace-color-main);} .detail-tab .active{margin-right:40px;z-index:3;position: relative;} .detail-tab .active,.detail-tab .active:hover,.detail-tab .active:after,.detail-tab .active:before{background-color:var(--ace-color-main);color:#fff}