* {
    padding: 0;
    margin: 0;
    border: 0;
    text-decoration: none;
    font-family: Alibaba PuHuiTi;
}

.content {
    background-color: #fff;
    width: 100%;
    min-width: 1200px;
}

.w1200 {
    width: 1200px;
    margin: 0 auto;
}

.pointer {
    cursor: pointer;
}

.mr30 {
    margin-right: 30px;
}

#icon_module {
    display: none
}

.mt60 {
    margin-bottom: 60px;
}

.g-title {
    height: 45px;
    font-size: 48px;
    font-weight: bold;
    color: #333333;
    line-height: 45px;
    text-align: center;
}


/* banner */
.banner img {
    width: 100%;
}

/* 为什么搭建网站 */
.build {
    padding: 100px 0;
}

.build .drops {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 80px;
}

.build .drops .drop-left {
    text-align: right;
}

.drops .drop .drop-title {
    font-size: 30px;
    font-weight: 500;
    color: #333333;
    line-height: 48px;
}

.drops .drop .drop-adesc {
    font-size: 16px;
    font-weight: 400;
    color: #666;
    line-height: 48px;
}

.build .drop .drop-adesc {
    width: 280px;
    line-height: 36px;
}

.build .drop-left .drop::before {
    content: '';
    width: 16px;
    height: 16px;
    background: #1F4DF9;
    border-radius: 50%;
    display: inline-block;
    margin-left: 15px;
    position: absolute;
    margin-top: 15px;
}

.build .drop-right .drop::before {
    content: '';
    width: 16px;
    height: 16px;
    background: #1F4DF9;
    border-radius: 50%;
    display: inline-block;
    margin-left: -30px;
    position: absolute;
    margin-top: 15px;
}

/* 为什么要模版建站 */
.template {
    width: 100%;
    min-width: 1200px;
    background: url(/static2023/images/q_gain/zzfw-jz-2-bg.png) center no-repeat;
    padding: 70px 0 80px;
}

.template .drops {
    margin-top: 50px;
    display: flex;
    justify-content: space-between;
}

.template .drops .drop {
    text-align: center;
    width: 240px;
}

.template .drops .drop-adesc {
    line-height: 36px;
}

/* 为什么要选择我们 */
.choose {
    padding: 97px 0 92px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.choose .g-title {
    text-align: left;
    margin-bottom: 40px;
}

.choose .drops .drop {
    padding-left: 30px;
}

.choose .drops .drop::before {
    content: '';
    width: 16px;
    height: 16px;
    background: #FFAB19;
    border-radius: 50%;
    display: inline-block;
    margin-left: -30px;
    position: absolute;
    margin-top: 15px;
}

/* 网站类别及模板展示 */
.show {
    width: 100%;
    min-width: 1200px;
    background: url(/static2023/images/q_gain/zzfw-jz-4.png) center no-repeat;
    padding: 100px 0 92px;
}

.show .layui-tab {
    margin-top: 50px;
}

.show .layui-tab-title {
    height: auto;
    border-bottom: 1px solid #d4dfea;
    text-align: center;
}

.show .layui-tab-title li {
    font-size: 30px;
    font-weight: bold;
    color: #333333;
    line-height: 36px;
    margin: 0 70px;
}

.show .layui-tab-title li span {
    display: block;
    font-size: 16px;
    font-weight: 400;
}

.show .layui-tab-title .layui-this:after {
    height: 2px;
}

.show .layui-tab-brief>.layui-tab-title .layui-this {
    color: #204CEC;
}

.show .layui-tab-brief>.layui-tab-title .layui-this:after {
    border: none;
    background: linear-gradient(90deg, #09BBFE 0%, #5A42EC 100%);
    top: auto;
}

.show .layui-tab-content {
    padding: 0;
}

.show .layui-tab-content .layui-tab-item {
    margin-top: 50px;
    height: 300px;
}

.show .layui-tab-content .layui-tab-item .drop {
    width: 378px;
    float: left;
}

.show .layui-tab-item .drop .box {
    border-radius: 10px;
    border: 1px solid #E6E6E6;
}

.show .layui-tab-item .drop .template-type {
    font-size: 18px;
    font-weight: 400;
    color: #333333;
    line-height: 60px;
    text-align: center;
}

.show .layui-tab-item .drop .preview {
    width: 100px;
    height: 40px;
    background: linear-gradient(90deg, #09BBFE 0%, #5A42EC 100%);
    border-radius: 20px;
    line-height: 40px;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    color: #FFFFFF;
    margin: 10px auto;
    display: none;
}

.show .layui-tab-content .layui-tab-item img {
    width: 100%;
}

.show .layui-tab-content .layui-tab-item .long-img {
    height: 240px;
    overflow: hidden;
    border-radius: 0 0 10px 10px;
}

/* 移动上去效果 */
.show .layui-tab-content .layui-tab-item .drop:hover {
    background: linear-gradient(90deg, #F7FBFF 0%, #E7F0FD 100%);
    border-radius: 10px;
    border: 2px solid #3871FD;
    box-shadow: 0px 0px 20px 0px rgba(164, 164, 164, 0.6);
}

.show .layui-tab-content .layui-tab-item .drop:hover .long-img {
    border-radius: 0;
}

.show .layui-tab-content .layui-tab-item .drop .long-img:hover img {
    animation: bounce-down 8s linear 1 forwards;
}

.show .layui-tab-item .drop:hover .template-type {
    display: none;
}

.show .layui-tab-item .drop:hover .preview {
    display: block;
}

.show .layui-tab-item .drop:hover .box {
    border-radius: 0;
    border: none;
}

@keyframes bounce-down {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-76%);
    }
}

.show .more-web {
    display: block;
    width: 300px;
    height: 60px;
    background: linear-gradient(270deg, #09BBFE 0%, #5A42EC 100%);
    border-radius: 10px;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 60px;
    margin: 70px auto 0;
}

/* 模板售价 */
.price {
    padding: 88px 0 120px;
}

.price .box {
    height: 490px;
    background: #F4F6F8;
    box-shadow: 0px 9px 21px 0px rgba(172, 172, 172, 0.41);
    border-radius: 10px;
    padding: 10px;
}

.price .box .guidance {
    background-color: #fff;
    text-align: center;
    padding-top: 30px;
    height: 320px;
    border-radius: 10px;
    margin-bottom: 10px;
}

.price .box .guidance .guidance-tips {
    font-size: 16px;
    font-weight: 400;
    color: #666666;
    line-height: 30px;
    margin: 20px 0;
}

.price .guidance a {
    width: 300px;
    height: 60px;
    background: linear-gradient(90deg, #86F2FF 0%, #09BBFE 34%, #5A42EC 100%);
    border-radius: 10px;
    display: block;
    text-align: center;
    line-height: 60px;
    font-size: 18px;
    font-weight: 400;
    color: #FFFFFF;
    margin: 0 auto;
}

/* 留言反馈 */
.feedback {
    width: 100%;
    min-width: 1200px;
    background: url(/static2023/images/q_gain/zzfw-jz-7-bg.png) center no-repeat;
    padding: 80px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feedback img {
    margin-right: 84px;
}

.feedback .base-form {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 630px;
}

.feedback .base-form input {
    width: 300px;
    height: 60px;
    background: #FFFFFF;
    box-shadow: 0px 9px 35px 0px rgba(216, 216, 216, 0.42);
    border-radius: 10px;
    padding-left: 20px;
    font-size: 18px;
    font-weight: 400;
    color: #666666;
    line-height: 60px;
    margin-bottom: 30px;
}

.feedback .base-form .base-content {
    width: 100%;
}

.feedback .base-form .btn-form {
    width: 300px;
    height: 60px;
    background: linear-gradient(90deg, #09BBFE 0%, #5A42EC 100%);
    box-shadow: 0px 9px 35px 0px rgba(216, 216, 216, 0.42);
    border-radius: 10px;
    font-size: 18px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 60px;
    text-align: center;
}

.feedback .base-form a {
    display: block;
    width: 60px;
    height: 60px;
    margin-left: 20px;
}

.feedback .base-form .feedback-img {
    width: 100%;
}

/* 在线QQ */
.online-qq {
    display: block;
    position: fixed;
    z-index: 1000;
    right: 20px;
    top: 500px;
}

.online-qq img {
    width: 100%;
}



/* 模板弹窗 */
.template-dialog {
    width: 100%;
    background: #F7F9FA;
    padding: 50px 0 72px;
    display: none;
}

.template-dialog .regain {
    float: left;
    margin-left: 50px;
}

.template-dialog .cancel {
    float: right;
    margin-right: 50px;
}

.template-dialog .swiper {
    background: #FFFFFF;
    border-radius: 30px;
}

.template-dialog .swiper-pagination {
    border-bottom: none;
    font-size: 24px;
    font-weight: 500;
    text-align: center;
    bottom: auto;
    top: 30px;
}

.template-dialog .swiper-pagination li {
    width: 100px;
    height: 40px;
    border-radius: 20px;
}

.template-dialog .swiper-pagination .swiper-pagination-bullet {
    width: 100px;
    height: 40px;
    display: inline-block;
    border-radius: 20px;
    background-color: transparent;
    color: #333;
    opacity: 1;
}

.template-dialog .swiper-pagination .swiper-pagination-bullet-active {
    color: #fff;
    background: linear-gradient(90deg, #FF4C1F 0%, #FF0F47 100%);
    font-weight: bold;
    line-height: 40px;
}

.template-dialog .swiper-pagination .swiper-pagination-bullet-active:after {
    border: none;
}

.template-dialog .swiper-wrapper {
    height: 100%;
    margin: 30px;
    margin-top: 100px;
}

.template-dialog .swiper-slide {
    height: auto;
    overflow: hidden;
}

.template-dialog .swiper-slide img {
    display: none;
}

.template-dialog .swiper-slide.swiper-slide-active img {
    display: block;
    margin: 0 auto;
    width: 100%;
}

.swiper-button-next {
    background: url(/static2023/images/q_gain/y-1.png);
    width: 77px;
    height: 77px;
    right: 15px;
    position: fixed;
    color: transparent;
}

.swiper-button-next:hover {
    background: url(/static2023/images/q_gain/y-2.png);
}

.swiper-button-prev {
    background: url(/static2023/images/q_gain/z-1.png);
    width: 77px;
    height: 77px;
    left: 15px;
    position: fixed;
    color: transparent;
}

.swiper-button-prev:hover {
    background: url(/static2023/images/q_gain/z-2.png);
}

.swiper-button-disabled {
    display: none;
}