@charset "UTF-8";

.main-banner{background: url(../images/download26/banner-bg.jpg) no-repeat center top/100% 506px;height: 506px;}
.main-banner .container{display: flex;justify-content: space-between;align-items: center;height: 100%;}
.baanner-content{color: #fff;width: 50%;}
.banner-img{padding-right: 5%;}
h1{font-size: 41px;line-height: 1;}
h1+p{font-size: 19px;padding-top: 30px;line-height: 1.5;}

@media (max-width:1200px){
    .main-banner .container{width: 98%;}
}
@media (max-width:767px){
    .main-banner{height: auto;padding: 30px 0;}
    .banner-img{display: none;}
    .baanner-content{width: auto;}
    
}
@media (max-width:767px){
    h1{font-size: 35px;}
}
/* ------------------------------- */
.main-content{}
.main-content .container{display: flex;justify-content: space-between; padding: 45px 0 0;max-width: 1470px;align-items: flex-start;}
.content-nav{position: sticky;top:40px;width: 260px; border-right: 1px solid #dcdcdc;flex-shrink: 0;}
.content-wrapper{padding-bottom: 130px; }
.nav-title{color: #626262;font-size: 21px;padding: 25px 0 17px 25px;}
.nav-lists li{font-size: 23px;cursor: pointer;display: flex;align-items: center;padding: 15px 0 15px 25px;}
.nav-lists li::before{content: "\2022";font-size: 35px;display: inline-block;color: #c3cfff;margin-right: 5px;}
.nav-lists li.active{color: #3761ff;background-color: #f5f8ff;}
.nav-lists li.active::before {color: inherit;}
.nav-lists li:hover{color: #3761ff;}
.wrapper-list{padding: 55px 0 0;}
.wrapper-item{font-size: 18px;border-radius: 18px;display: flex;align-items: center;gap:60px; padding: 30px 40px; box-shadow: 0px 5px 51px 0px rgba(94, 143, 255, 0.14);;}
.wrapper-item-content{width: 430px;}
.wrp-item-title{padding: 10px 0 30px;border-bottom: 1px solid #f2f6fa;}
.wrp-item-title p{font-size: 20px;color: #848484;}
.wrp-item-t{display: flex;padding-bottom: 20px;align-items: center;}
.wrp-item-t h2{font-size: 30px;display: flex;align-items: center;gap: 10px;color: #000;line-height: 1;}
.wrp-item-t a{color: #848484;margin-left: auto;align-self: flex-end;}
.wrp-itmi-t{padding: 18px 0 10px;display: flex;align-items: center;gap: 5px;color: #000;}
.wrp-item-intro p{color: #868686;}
.wrp-item-btns{padding: 50px 0 0;}
.wrp-item-btns a{display: inline-block;border-radius: 20px;line-height: 40px;background: #4145fc;color: #fff;min-width: 160px;padding: 0 10px; text-align: center;}
.wrp-item-btns .wrp-item-buy{background: none;border: 1px solid currentColor;color: #4145fc;}
.wrp-item-btns a:nth-child(1){margin-right: 20px;}
.wrp-list-title{font-size: 35px;color: #000;padding: 10px 0;line-height: 1;}
.wrp-lists-btns{padding: 30px 0;}
.wrp-lists-btns button{background: none;border: none;cursor: pointer;font-size: 23px;padding: 0 20px;margin: 0 10px;}
.wrp-lists-btns button.active{color: #3337c7;background: #ececff;line-height: 45px;border-radius: 23px;font-weight: bold;}
.wrp-lists-btns button:hover{color:#3337c7;}
.wrp-list-items .wrapper-item{display: none;}
.wrp-list-items .wrapper-item:first-child{display: flex;}
.more-nav{position: absolute;cursor: pointer;display: none; right: 10px;top: 20px;background: url(../images/download26/nav-jt02.png) no-repeat center/contain; width:25px;height: 25px;}
.content-nav.fixed .more-nav{background-image: url(../images/download26/nav-jt01.png);}
.content-nav span{font-size: 12px;margin-top: 20px;display: block;}
.content-nav.fixed{position: fixed;left: 0;right: 0;top:0;height: auto;box-shadow: 0 0 10px #ccc;}
.content-nav.fixed .nav-title{display: block;}
.content-nav.fixed span{display: none;}

@media (max-width:1200px){
    .wrapper-item{gap: 20px;}
    .wrapper-item-pic{width: 50%;}
}
@media (max-width:979px){
    .main-content .container{flex-direction: column;width: 98%;padding-top: 0;}
    .content-nav{width: 100%;height: 70px;overflow: hidden; align-self: center; border-right:none;border-bottom:1px solid #dcdcdc;background: #fff;top: 0;padding-top: 10px;}
    .content-nav .nav-title{display: none;}
    .nav-lists{display: flex;flex-wrap: wrap;}
    .nav-lists li{padding: 15px 25px;border-radius: 10px;}
    .wrapper-item{gap: 20px;}
    .wrapper-item-pic{width: 50%;}
    .nav-lists li{font-size: 20px;}
    .more-nav{display: block;}
}
@media (max-width:767px){
    .wrapper-item{flex-direction:column-reverse;}
    .wrapper-item-pic,.wrapper-item-content{width: 100%;}
    .wrp-lists-btns button{font-size: 20px;margin-bottom: 5px;}
}
@media (max-width:479px){
    .wrapper-item{padding: 30px 10px;}
    .wrp-item-t h2{font-size: 25px;}
    .wrp-item-btns{display: flex;flex-direction: column;gap: 10px;}
    .wrp-item-btns a:nth-child(1){margin-right: 0;}
    .nav-lists li{padding: 10px 15px;}
    .content-nav{height: 55px;}
}