body{
    position: relative;
    font-size: 16px!important;
}
a{
    text-decoration: none;
}
.targetClass{
    color: #f60
}
.optionText{
    font-size: 16px;
}
.targetA{
    color: #f60
}
.arrowImg{
    cursor: pointer;
    position: relative;
    width: 30px;
    left: 752px;
    top: 5px;
}
.swiper-container{
    margin-bottom: 42px;
}
#hostTable>tbody>tr{
    /* width:30px */
}
/* 弹窗 */
.middleBox{
    width:800px;
    /* height:600px; */
    background: #f7f7f7
}
.popBox{
    visibility: hidden;
    /* display: none; */
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.swiper-button-next{
    color:gray !important
}
.swiperImg{
    width:60%;margin-left: 29%;
}
.swiper-button-prev{
    color:gray !important
}

.linux .pro_type{
    font-size: 40px;
    text-align: center;
}
.linux .pro_type a{
    width: 35%;
    margin: 40px 0;
    display: inline-block;
    border-radius: 4px;
    padding: 10px 0;
}
.linux .act_type {
    background-color: #fb8201;
    color: white!important;
}
.linux .product{
    font-size: 35px;
}


/* 常见问题 */
.questionTitle{
    cursor: pointer;
    margin-bottom: 30px;
    font-weight: 400;
    font-size: 20px;
    color: #00aeef;
    margin-top: 30px;
}
.questionText{
    display:none
}
.questionBox{
    margin-bottom: 80px;
    background: #F7F7F8;
    padding: 30px;
}
.displayBox{
    width: 100%;
    height: 700px;
    background-color: #f7f7f7;
}
.hostTitle::after{
    content: "";
    width: 92px;
    height: 5px;
    position: absolute;
    background: #000;
    bottom: -5px;
    z-index: 1;
    left: 15px;
    margin-bottom: 20px;
}
.hostUl{
    display: inline-block;
    vertical-align: top;
    /* list-style-type: circle; */
}
.hostUl li{
    color: #949494;
    list-style: circle;
    padding: 5px;
}
.hostImg{
    width: 734px;
    margin-left: 600px;
    margin-top: -326px;
}
.hostBtn{
    border-radius: 3px;
    cursor: pointer;
    background: #fed630;
    color: #333;
    height: 42px;
    width: 176px;
    border: none;
}

.product{
    text-align: center;
    padding: 30px;
    font-size: 51px;
    font-weight: bold;
}
.fixed{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
}
.container{
    width: 1200px;
    margin: 0 auto;
}
.banner{
    width: 100% !important;
    background: url('../images/sitelock/site.png') center no-repeat;
    height: 300px;
    background-size: cover;
}
.simple_des{
    width: 1200px;
    margin: 0 auto;
    color: white;
}
.site_logo{
    display: flex;
    align-items: flex-end;
    padding-top: 30px;
}
.site_logo h1 {
    margin: 10px 0 -3px 15px;
    font-size: 35px;
}
.simple_des>p{
    font-size: 22px;
    letter-spacing: 3px;
    font-family: monospace;
    margin: 22px 0;
}
.lock_adv span{
    margin-right: 10px;
    font-size: 18px;
}
.lock_adv>div{
    display: flex;
}
.lock_adv>div>p {
    width: 200px;
    margin: 10px 0 0;
    font-size: 15px;
}
.more{
    text-align: center;
    padding-bottom: 30px;
}
.more a{
    background-color: #f60;
    border-radius: 2px;
    color: white!important;
    padding: 8px 30px;
}
.buy a {
    display: block;
    width: 100%;
    text-align: center;
    height: 100%;
    color: black;
    font-size: 17px;
    line-height: 50px;
    box-shadow: 0 5px 10px rgba(0,0,0,.1);
    font-weight: bold;
}
.package>div:hover .buy a{
    background: #f60;
    color: white;
}

.package_box{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 0 30px;
}
.plan-list li.p-name {
    font: 500 26px 'Helvetica Neue',serif;
    line-height: 10px;
    margin: 0;
    padding: 100px 0 20px 0;
    text-transform: uppercase;
    color: #333;
    border-bottom: 0 solid #d4dbd3;
    background-color: #fff;
}
.red span.pl-title {
    background-image: url(../images/sitelock/table-header.png);
    background-size: auto;
    background-position: -15px -12px;
}
span.pl-title {
    position: absolute;
    top: 50px;
    right: 0;
    left: 0;
    width: 160px;
    height: 60px;
    margin: 0 auto;
    text-align: center;
    vertical-align: middle;
    color: #fff;
    background-repeat: no-repeat;
    background-size: cover;
    font-size: 20px;
}
.p-button{
    border-bottom: none!important;
}
.container p{
    margin: 22px 0;
}
.plan-list li{
    list-style: none;
}
.plan-list {
    position: relative;
    float: none;
    width: 23%;
    padding: 0;
    text-align: center;
    border: 1px solid #e3e3e3;
    display: inline-block;
}
.plan-list li.p-pricing {
    font: bold 37px 'Helvetica Neue',serif;
    position: relative;
    height: 20px;
    margin-bottom: 20px;
    padding: 0;
    color: #333;
    border-bottom: none;
    background-color: #fff;
}
.plan-list li.p-feat, .plan-list li {
    font: normal 15px Helvetica,sans-serif;
    margin: 0;
    padding: 18px 0;
    color: #333;
    border-bottom: 0;
    border-bottom: 1px dashed #e3e3e3;
    background-color: #fff;
}

.btn-green {
    display: inline-block;
    border-radius: 3px;
    margin-top: 15px;
    letter-spacing: 2px;
    background-color: #00a651;
    color: #fff!important;
    border: 1px solid transparent;
    text-transform: uppercase;
    padding: 12px 25px;
    font: 400 18px 'Helvetica Neue',serif;
    transition: background-color 0.2s ease;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    background-image: linear-gradient(#27ae60,#27ae60 25%,#27ae60);
    background-repeat: no-repeat;
}
.p-pricing .price small {
    font-size: 17px;
}
.red_cross img {
    height: 18px;
}
.purple span.pl-title {
    background-image: url(../images/sitelock/table-header.png);
    background-size: auto;
    background-position: -15px -273px;
}
.yellow span.pl-title {
    background-image: url(../images/sitelock/table-header.png);
    background-size: auto;
    background-position: -15px -99px;
}
.blue span.pl-title {
    background-image: url(../images/sitelock/table-header.png);
    background-size: auto;
    background-position: -15px -186px;
}
 .font-style5 {
    font: 700 51px/47px 'Helvetica Neue',sans-serif;
    margin-bottom: 45px;
}
 .intro_bg{
     background-color: #f7f7f7;
 }
 .intro_title{
     padding-top: 35px;
     text-align: center;
 }
 .intro_title p{
    font: normal 22px 'Helvetica Neue',sans-serif;
 }
 .box_bg1{
    background: url("../images/sitelock/rc-sprite.png")no-repeat 0px center;
 }
.box_bg2{
    background: url("../images/sitelock/rc-sprite.png")no-repeat  -168px center;
}
.box_bg3{
    background: url("../images/sitelock/rc-sprite.png")no-repeat  -334px center;
}
.box_bg4{
    background: url("../images/sitelock/rc-sprite.png")no-repeat -500px center;
}
 .box_bg{
     height: 200px;
     background-size: 1170px;
     width: 162px;
     margin: 0 auto;
 }
 .intro_words span{
     font: normal 32px 'Helvetica Neue';
     font-weight: 800;
 }
 .intro_box{
     display: flex;
 }
 .intro_box>div{
     width: 50%;
 }
 .intro_words{
    display: flex;
    flex-direction: column;
    justify-content: center;
    vertical-align: middle;
     box-sizing: border-box;
 }
 .intro_box>div:nth-child(2){
     border-left: 1px solid #ccc;
     position: relative;
 }
.intro_box>div:nth-child(2) img{
     position: absolute;
     left: -30px;
     top: 0;
     bottom: 0;
     margin:  auto 0;
 }
 .text_right{
     text-align: right;
 }
 .p_left{
     padding-left: 8%;
 }
 .p_right{
     padding-right: 8%;
 }
 .margin_1{
     margin-left: 1px;
 }
.intro_bg .container{
    padding-bottom: 80px;
}
.support .title {
    font-size: 40px;
    text-transform: uppercase;
    padding-bottom: 20px;
    padding-top: 90px;
    position: relative;
}
.support .title:after {
    content: "";
    width: 92px;
    height: 5px;
    position: absolute;
    background: #000;
    bottom: 5px;
    z-index: 1;
    left: 5px;
}
.support .container{
    display: flex;
}
.support .container>div{
    width: 50%;
}
.support img{width: 500px}
.support p{
    margin: 30px 0;
}
.infra_bg{
    background: url("../images/sitelock/bg-hp-infra.jpg") no-repeat right bottom #F6F6F8;
    height: 700px;
    max-width: 100%;
}
.left_sec{
    width: 100%;
    float: left;
    margin: 70px 0;
}
.infra_bg .left_sec h2{
    font: 900 42px 'Helvetica Neue',serif;
    text-transform: uppercase;
    position: relative;
    margin: 0 0 50px;
    padding: 45px 0 15px;
}
.left_sec h2:after{
    display:none;
    content: "";
    width: 92px;
    height: 5px;
    position: absolute;
    background: #000;
    bottom: -5px;
    z-index: 1;
    left: 0;
}
div.left_sec p {
    font: 400 15px 'Helvetica Neue',serif;
    word-spacing: .41px;
    line-height: 20px;
}
.mt-30{
    margin-top: 30px;
}
.robust {
    border: 1px solid #CECECE;
    width: 135px;
    text-align: center;
    height: 150px;
    padding: 12px;
    margin: 0 20px 0 0px;
    display: inline-flex;
    font: normal 16px 'Helvetica Neue',serif;
}
.robust span {
    display: block;
    text-align: center;
    width: 20px;
    height: 1px;
    position: relative;
    background: #000000;
    margin: 10px auto;
}
.container a{
    /* color: black; */
}
.function .title{
    font-size: 35px;
    margin-bottom: 40px;
    display: block;
}
.function{
    padding: 50px 0;
}
.fun_tit{
    font-size: 27px;
}
.function .container>div{
    display: flex;
    justify-content: space-between;
}
.function .container>div>div{
    width: 30%;
    box-shadow: 0px 0px 10px 0px #bdbdbd;
    min-height: 276px;
    padding: 20px 40px;
    box-sizing: border-box;
    background-color: white;
}
.fun_content{
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 30px;
}
.nav-tabs{
    border: 1px solid #ddd;
    background-color: white;
}
.nav-tabs .container{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.nav-tabs  a{
    padding: 15px 0;
    text-align: center;
    width: 100%;
}
.nav-tabs  span{
    display: none;
}
.linux .pro_type a:first-child{
    margin-right: 5%;
}
.linux .not_act{
    border: 1px solid #999;
}
@media (max-width: 768px) {
    body{
        font-size: 12px !important;
    }
    #hostTable{
        width: 100%;
    }
    .hostUl{
        
    }
    .questionBox{
        margin-left: 5%;
    }
    .table>tbody>tr {
        display: table-row !important;
        /* flex-wrap: wrap; */
    }
    .questionTitle{
        margin-top: -8px !important;
        font-size: 16px;
    }
    .questionText{
        margin-bottom: 15px;
    }
    #hostTable>tbody>tr{
        width:120px
    }
    .swiperImg{
        width: 90%;
    margin-left: 5%;
    }
    #hostUlMobile{
        margin-left: 156px;
        margin-top: -182px;
    }
    .hostBtn{
        border-radius: 3px;
        cursor: pointer;
        background: #fed630;
        color: #333;
        height: 36px;
        width: 110px;
        border: none;
    }
    .hostImg{
        width: 142px;
        margin-left: 15px;
        margin-top: 0;
    }
    .selectBox{
        /* width: 158px !important; */
    }
    .displayBox{
        height: 485px;
    }
    .banner{
        height: auto;
        background-size: auto 100%;
        /* background: url('../images/sitelock/site.png') center no-repeat; */
        background-position: right;
    }
    .simple_des>p{
        font-size: 18px;
    }
    .container{
        width: 95%;
    }
    .simple_des{
        width: 100%;
        padding-left: 20px;
        box-sizing: border-box;
    }
    .plan-list{
        width: 90%;
    margin-left: 5%;
    }
    .site_logo h1{
        font-size: 25px;
    }
    .site_logo img{
        width: 150px;
    }
    .lock_adv{
        margin-top: 15px;
    }
    .lock_adv>div>p{
        width: 170px;
    }
    .package_box{
        justify-content: space-between;
    }
    .plan-list{
        margin-bottom: 15px;
    }
    .plan-list li.p-pricing{
        font-size: 28px;
    }
    .font-style5,.product{
        font-size: 25px;
    }
    .plan-list li.p-feat, .plan-list li{
        padding: 10px 0;
    }
    .intro_words span{
        font-size: 18px;
    }
    .intro_title p{
        font-size: 18px;
    }
    .support img{
        width: 60%;
        margin: 0 auto;
        display: block;
    }
    .left_sec h2:after{
        height: 3px;
    }
    .support .container{
        display: block;
    }
    .support .container>div{
        width: 100%;
    }
    .intro_box>div{
        font-size: 14px;
    }
    .support p{
        font-size: 14px;
        margin: 15px 0;
    }
    .support .title{
        padding-top: 15px;
    }
    .intro_box>div:nth-child(2) img{
        width: 35px;
        left: -20px;
    }
    .box_bg{
        height: 130px;
        width: 110px;
        background-size: cover;
    }
    .intro_box>div{
        display: inline-flex;
        align-items: center;
    }
    .box_bg2{
        background-position: -115px center;
    }
    .box_bg3{
        background-position: -230px center;
    }
    .box_bg4{
        background-position: -335px center;
    }
    .p_right{
        padding-right: 5%;
    }
    .p_left{
        padding-left: 5%;
    }
    .support .title{
        font-size: 25px;
        padding: 15px 0;
        margin-top: 0;
    }
    .support .title:after{
        left: 2px;
        width: 55px;
        height: 3px;
    }
    .infra_bg .left_sec h2{
        font-size: 25px;
        margin: 0 0 20px;
        padding: 20px 0 15px;
    }
    .left_sec{
        margin-top: 20px;
        width: 100%;
    }
    .infra_bg{
        background-size: contain;
    }
    .mt-30{
        display: flex;
        justify-content: space-between;
    }
    .mt-30>div{
        width: 24%;
        max-width: 135px;
    }
    span.pl-title{
        top: 25px!important;
    }
    .plan-list li.p-name{
        padding-top: 50px;
        font-size: 22px;
        font-weight: bold;
    }
    div.function{
        margin: 30px 0;
    }
    .function .title{
        font-size: 25px;
        margin-bottom: 30px;
    }
    .fun_tit{
        padding: 0;
        font-size: 18px;
        margin: 0;
    }
    .fun_content{
        font-size: 14px;
        line-height: 20px;
    }
    .function .container>div>div{
        padding: 20px;
        min-height: auto;
    }
    .function{
        padding: 0;
    }
    .fun_tit{
        margin: 0!important;
    }
    .linux .pro_type{
        font-size: 22px;
    }
    .linux .pro_type a{
        width: 45%;
    }
    .linux .product{
        font-size: 25px;
    }
}

@media (max-width: 500px) {
    .function .container>div{
        flex-direction: column;
    }
    .function .container>div>div{
        width: 100%;
        margin-bottom: 15px;
    }
}