@charset "utf-8";

/* main */

.items {
    padding: 60px 0;
}

.items-title {
    font-size: 30px;
    color: #333;
}

.items-subtitle {
    font-size: 14px;
    margin-top: 10px;
}

/*  */

.main-banner {
    background: url(../../images/online/fastsite1/banner-fastsite1.jpg) no-repeat center #01233F;
}

.main-banner-button:not(:first-child) {
    margin-left: 16px;
}

/* 所有模板均采用响应式设计 */

.items-responsive .items-block {
    margin-top: 40px;
    flex-wrap: wrap;
    justify-content: space-between;
}

.items-responsive .img-block {
    margin: 0;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.items-responsive .img-block:not(:nth-child(-n+4)) {
    margin-top: 20px;
}

.items-responsive .item-btn {
    text-align: center;
    margin-top: 30px;
}

.items-responsive .item-button {
    width: 120px;
    height: 46px;
    line-height: 44px;
}

/* 简单、易用，3步完成建站 */

.items-video {
    padding-top: 0;
}

.items-video .items-block {
    box-sizing: border-box;
    width: 886px;
    height: 531px;
    margin: 50px auto 0;
    background: url(../../images/online/fastsite1/v-bg.png) no-repeat center;
    padding: 24px 57px 0 43px;
}

.items-video video {
    display: block;
    width: 100%;
    height: 100%;
}

.v-block {
    position: relative;
    height: 442px;
}

.v-controls {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.5);
}

.v-play {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2OSIgaGVpZ2h0PSI3MCI+PHBhdGggc3Ryb2tlPSIjRkZGIiBzdHJva2Utd2lkdGg9IjIiIGZpbGw9Im5vbmUiIGQ9Ik0zNCA2OGMxOC4yMjUgMCAzMy0xNC45OTkgMzMtMzMuNUM2NyAxNS45OTggNTIuMjI1IDEgMzQgMVMxIDE1Ljk5OCAxIDM0LjVDMSA1My4wMDEgMTUuNzc1IDY4IDM0IDY4eiIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI0ZGRiIgZD0iTTI4IDIxdjI3YzAgMS4xMDYuNzMxIDEuNDg1IDEuNjM1Ljg0OGwxOC43My0xMy4xOTZjLjkwNC0uNjM3LjkwNC0xLjY2NyAwLTIuMzA0bC0xOC43My0xMy4xOTZDMjguNzMxIDE5LjUxNSAyOCAxOS44OTQgMjggMjF6Ii8+PC9zdmc+) no-repeat center;
    background-size: 70px auto;
    left: 0;
    top: 0;
    z-index: 1;
}

/* 不同版本满足各类中小企业建站需求 */

.items-ver .items-sublink {
    text-align: center;
    margin-top: 14px;
}

.items-ver .items-sublink a {
    font-size: 16px;
    text-decoration: underline;
}

.items-ver .items-block {
    margin-top: 66px;
    justify-content: space-between;
    align-items: flex-start;
}

.items-ver .item {
    box-sizing: border-box;
    width: 360px;
    height: 480px;
    border: 1px solid #D8D8D8;
    transition: all .3s ease;
}

.items-ver .item:hover {
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
}

.items-ver .item-title-block {
    height: 120px;
    color: #fff;
    margin: -1px -1px 0;
}

.items-ver .item:nth-child(1) .item-title-block {
    background-color: #4DC4DA;
}

.items-ver .item:nth-child(2) .item-title-block {
    background-color: #23B9A9;
}

.items-ver .item:nth-child(3) .item-title-block {
    background-color: #2290E8;
}

.items-ver .item-title {
    font-size: 22px;
    font-weight: bold;
}

.items-ver .item-tag {
    margin-top: 10px;
    font-size: 16px;
}

.items-ver .item-tag:before,
.items-ver .item-tag:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    height: 1px;
    background-color: #fff;
    margin: 0 15px;
}

.items-ver .item-subtitle {
    margin-top: 10px;
}

.items-ver .item-content {
    padding: 15px 30px 0;
}

.items-ver ul {
    height: 230px;
}

.items-ver li {
    color: #666;
    font-size: 13px;
    line-height: 2.2em;
    padding-left: 15px;
    position: relative;
}

.items-ver li:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 4px;
    background-color: #999;
    left: 0;
    top: 50%;
    transform: translateY(-50%) rotateZ(45deg);
}

.items-ver .item-price {
    font-size: 14px;
    text-align: center;
}

.items-ver .item-price.tag .current-price:before {
    content: "";
    position: absolute;
    width: 74px;
    height: 20px;
    background: url(../../images/online/fastsite1/tag.png) no-repeat center;
    left: 0;
    top: 0;
    transform: translate(0, -28px);
}

.items-ver .current-price {
    position: relative;
}

.items-ver .current-price .em {
    font-size: 24px;
    color: #ff8b47;
}

.items-ver .origin-price {
    color: #999;
    margin-left: 15px;
}

.items-ver .item-btn {
    text-align: center;
    margin-top: 20px;
}

.info-intro-ver .item-btn {
    text-align: center;
    margin-top: 15px;
}

.items-ver .item-button,
.info-intro-ver .item-button {
    display: inline-block;
    width: 100px;
    height: 36px;
    line-height: 36px;
    background-color: #FF8B47;
    color: #fff;
    border-radius: 3px;
}

.items-ver .item-button:hover,
.info-intro-ver .item-button:hover {
    background-color: #e28148;
}

.items-ver .item-button.trial,
.info-intro-ver .item-button.trial {
    margin-right: 30px;
    background: transparent;
    color: #FF8B47;
    border: 1px solid #FF8B47;
}

.items-ver .item-button.trial:hover,
.info-intro-ver .item-button.trial:hover {
    color: #e28148;
    border: 1px solid #e28148;
}

/* 速成建站，亮点功能 */

.items-highlight .items-block {
    margin-top: 60px;
    flex-wrap: wrap;
}

.items-highlight .item {
    width: 171px;
    text-align: center;
}

.items-highlight .item:not(:nth-child(-n+7)) {
    margin-top: 40px;
}

.items-highlight .img-block img {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

.items-highlight .item-title {
    font-size: 16px;
    margin-top: 16px;
    font-weight: bold;
}

.items-highlight .item-p {
    color: #666;
    line-height: 1.5em;
    margin-top: 6px;
}

/* 为您提供专业的搭建服务，省时、省心 */

.items-bottom-banner {
    height: 240px;
    background: url(../../images/online/fastsite1/bottom-banner-bg.jpg) no-repeat center #2290E8;
    color: #fff;
}

.items-bottom-banner .item-title {
    font-size: 30px;
    font-weight: bold;
}

.items-bottom-banner .item-text {
    margin-top: 20px;
}

.items-bottom-banner .item-p {
    font-size: 16px;
    font-weight: bold;
    padding: 0 20px;
    position: relative;
}

.items-bottom-banner .item-p:not(:first-child):before {
    content: "";
    position: absolute;
    width: 1px;
    height: 14px;
    background-color: #fff;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.items-bottom-banner .item-button {
    width: 140px;
    height: 46px;
    line-height: 44px;
    text-align: center;
    border: 1px solid #fff;
    margin-top: 36px;
    font-size: 16px;
}

/* 弹窗 */

.hd-pop {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, .4);
    z-index: 999;
    display: none;
}

.hd-pop-wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.hd-pop-content {
    box-sizing: border-box;
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    width: 420px;
    border-radius: 10px;
    padding: 50px;
}

.hd-content {
    text-align: center;
    overflow: hidden;
    height: 100%;
    position: relative;
}

.hd-pop-close {
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    height: 50px;
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjNweCIgaGVpZ2h0PSIyM3B4Ij48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9InJnYigyMDQsIDIwNCwgMjA0KSIgZD0iTTIyLjEwNywyMS4zOTkgTDIxLjM5OSwyMi4xMDcgTDExLjUwMCwxMi4yMDcgTDEuNjAwLDIyLjEwNyBMMC44OTMsMjEuMzk5IEwxMC43OTMsMTEuNTAwIEwwLjg5MywxLjYwMCBMMS42MDAsMC44OTMgTDExLjUwMCwxMC43OTMgTDIxLjM5OSwwLjg5MyBMMjIuMTA3LDEuNjAwIEwxMi4yMDcsMTEuNTAwIEwyMi4xMDcsMjEuMzk5IFoiLz48L3N2Zz4=) no-repeat center;
    z-index: 1;
    cursor: pointer;
}

.disable-order-title {
    font-size: 18px;
    font-weight: bold;
}

.disable-order-title:before {
    content: "";
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTgxMTQ4OTUwOTA1IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjIxMzEiIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PC9zdHlsZT48L2RlZnM+PHBhdGggZD0iTTUxMy4zODA0NCA5MjAuNDU2NzYyYzIyNS42MTEzODcgMCA0MDkuMTUzNjM0LTE4My41NDMyNyA0MDkuMTUzNjM0LTQwOS4xNTQ2NTdTNzM4Ljk5MTgyOCAxMDIuMTQ4NDcxIDUxMy4zODA0NCAxMDIuMTQ4NDcxIDEwNC4yMjU3ODMgMjg1LjY5MTc0MSAxMDQuMjI1NzgzIDUxMS4zMDMxMjggMjg3Ljc2OTA1MyA5MjAuNDU2NzYyIDUxMy4zODA0NCA5MjAuNDU2NzYyTTUxMy4zODA0NCA5NTcuNjU4MDM2Yy0yNDYuNTE0NDYzIDAtNDQ2LjM1NDkwNy0xOTkuODQwNDQ0LTQ0Ni4zNTQ5MDctNDQ2LjM1NDkwNyAwLTI0Ni41MTQ0NjMgMTk5Ljg0MDQ0NC00NDYuMzU0OTA3IDQ0Ni4zNTQ5MDctNDQ2LjM1NDkwN3M0NDYuMzU0OTA3IDE5OS44NDA0NDQgNDQ2LjM1NDkwNyA0NDYuMzU0OTA3Qzk1OS43MzQzMjQgNzU3LjgxNzU5MiA3NTkuODk0OTAzIDk1Ny42NTgwMzYgNTEzLjM4MDQ0IDk1Ny42NTgwMzZMNTEzLjM4MDQ0IDk1Ny42NTgwMzYgNTEzLjM4MDQ0IDk1Ny42NTgwMzZ6IiBwLWlkPSIyMTMyIiBmaWxsPSIjRkY1NjJBIj48L3BhdGg+PHBhdGggZD0iTTM2Ni4xNDYxMjEgNDQ5LjIzNTUxNGMtMjEuNDA2NTQyIDAtMzguNzM2MjMzLTE3LjYyMTMzMy0zOC43MzYyMzMtMzkuNDAxMzgybDAtNy44ODQ1NzRjMC0yMS43Njk4MTYgMTcuMzI5NjktMzkuMzkxMTQ5IDM4LjczNjIzMy0zOS4zOTExNDkgMjEuNDA3NTY2IDAgMzguNzM2MjMzIDE3LjYyMTMzMyAzOC43MzYyMzMgMzkuMzkxMTQ5bDAgNy44ODQ1NzRDNDA0Ljg4MjM1NCA0MzEuNTg0NTA2IDM4Ny41MzMyMiA0NDkuMjM1NTE0IDM2Ni4xNDYxMjEgNDQ5LjIzNTUxNEwzNjYuMTQ2MTIxIDQ0OS4yMzU1MTQgMzY2LjE0NjEyMSA0NDkuMjM1NTE0IDM2Ni4xNDYxMjEgNDQ5LjIzNTUxNHoiIHAtaWQ9IjIxMzMiIGZpbGw9IiNGRjU2MkEiPjwvcGF0aD48cGF0aCBkPSJNNjY2Ljc3NTA2MyA0NDkuMjM1NTE0Yy0yMS4zODcxIDAtMzguNzM2MjMzLTE3LjYyMTMzMy0zOC43MzYyMzMtMzkuNDAxMzgybDAtNy44ODQ1NzRjMC0yMS43Njk4MTYgMTcuMzQ5MTMzLTM5LjM5MTE0OSAzOC43MzYyMzMtMzkuMzkxMTQ5IDIxLjM4NzEgMCAzOC43NDY0NjYgMTcuNjIxMzMzIDM4Ljc0NjQ2NiAzOS4zOTExNDlsMCA3Ljg4NDU3NEM3MDUuNTIxNTI4IDQzMS41ODQ1MDYgNjg4LjE2MjE2MiA0NDkuMjM1NTE0IDY2Ni43NzUwNjMgNDQ5LjIzNTUxNEw2NjYuNzc1MDYzIDQ0OS4yMzU1MTQgNjY2Ljc3NTA2MyA0NDkuMjM1NTE0IDY2Ni43NzUwNjMgNDQ5LjIzNTUxNHoiIHAtaWQ9IjIxMzQiIGZpbGw9IiNGRjU2MkEiPjwvcGF0aD48cGF0aCBkPSJNMzEzLjk0NjI0OCA3MDkuMzM1MzkxYzQyLjk1NTMyNC03Mi40Nzg3MzEgMTIyLjExMDEwNS0xMTcuNDk4MDY0IDIwNi41NzE3NTItMTE3LjQ5ODA2NCA4My44MjcxOTcgMCAxNjAuMTYxNzQ2IDQyLjQ1MTg1OCAyMDQuMTk0NjEyIDExMy41NzE2MzggNS40MDcxNSA4Ljc0MDA1OCAyLjcwODY5MiAyMC4xOTkwNDEtNi4wMjExMzQgMjUuNjA2MTkxLTguNzQwMDU4IDUuNDA3MTUtMjAuMTk5MDQxIDIuNzA4NjkyLTI1LjYwNjE5MS02LjAyMTEzNC0zNS42NDQ4MjUtNTcuNTc2MzIzLTk5LjU5NTMyMi05NS45NjA1MzktMTcyLjU2NzI4Ny05NS45NjA1MzktNzQuMzYxNjE1IDAtMTM5LjM1ODk1NSAzOS44NjM5MTYtMTc0LjU4MTE1NCA5OS4yNzI5ODEtNS4yMzYyNTggOC44MzExMzItMTYuNjQ1MDk5IDExLjc1MDYyNS0yNS40NzUyMDggNi41MTQzNjdDMzExLjYyMDI3MyA3MjkuNTg1NTk3IDMwOC43MDA3ODEgNzE4LjE3Njc1NiAzMTMuOTQ2MjQ4IDcwOS4zMzUzOTFMMzEzLjk0NjI0OCA3MDkuMzM1MzkxIDMxMy45NDYyNDggNzA5LjMzNTM5MXoiIHAtaWQ9IjIxMzUiIGZpbGw9IiNGRjU2MkEiPjwvcGF0aD48L3N2Zz4=) no-repeat center;
    background-size: 100% 100%;
    display: inline-block;
    vertical-align: middle;
    width: 36px;
    height: 36px;
    margin-right: 10px;
}

.disable-order-text {
    text-align: left;
    margin-top: 20px;
    font-size: 16px;
    color: #666;
    line-height: 1.8em;
}

.disable-order-text .em {
    color: #FF5F36;
}

.disable-order-btn {
    margin-top: 20px;
}

.disable-order-button {
    display: inline-block;
    width: 140px;
    height: 40px;
    line-height: 40px;
    border-radius: 50px;
    background-color: #5282F0;
    color: #fff;
    font-size: 18px;
}

.disable-order-button:hover {
    transform: translateY(-4px);
}