.mask {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,.8);
    z-index: 100;
    display: none;
}
.pop_media {
    position: fixed;
    width: 59.1666rem;
    height: 33.333rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    background-color: #000000;
    display: none;
}
.pop_media video {
    display: block;
    width: 100%;
    height: 100%;
}
.pop_media .close {
    width: 1.5104166rem;
    height: 1.5104166rem;
    background: url(../images/close.png) no-repeat center;
    background-size: contain;
    position: absolute;
    top: 0;
    right: -2.083333rem;
    transition: all ease 0.5s;
}
.pop_media .close:hover {
    transform: rotate(-180deg);
}
 .video_box {
    width: 33.85416rem;
    height: 19.0104166rem;
    padding: .78125rem 0;
    background: #8e0b0b;
    position: relative;
}
 .video_box video {
    width: 100%;
    height: 100%;
    display: block;
}
 .video_box .play_btn {
    width: 4.2708333rem;
    height: 4.2708333rem;
    background: url(../images/media_play.png) no-repeat center;
    background-size: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: .8;
    cursor: pointer;
    z-index: 1;
}
 .video_box .play_btn:hover {
    opacity: 1;
}

.home_ad {
    height: 48.95rem;
    width: 100%;
    /* padding-top: 13rem; */
    background: url('../images/home_01.png') no-repeat;
    background-size: 100% 100%;
    position: relative;
}
.home_img1{
    height: 100%;
    width: 100%;
    background: url('../images/home_swiper1.png') no-repeat;
    background-size: 100% 100%;
}
.home_img2{
    height: 100%;
    width: 100%;
    background: url('../images/home_swiper2.png') no-repeat;
    background-size: 100% 100%;
}
.swiper_text{
    font-size: 1.4rem;
    font-family: 'sycn_medium';
    height: 3.333rem;
    line-height: 1.8rem;
}

.ad_text .text_top {
    width: 39.5rem;
    font-size: 4.375rem;
    border-bottom: 1px solid rgb(83, 85, 92);
    width: 40.5rem;
    font-size: 4.375rem;
    padding-bottom: 0.8333rem;
    line-height: 4.1145rem;
}
.text_top{
    height: 4.1145rem;
}
.ad_text{
    display: flex;
    align-items: flex-end;
}
.ad_text .text_bottom {
    font-size: 1.7rem;
    margin-top: 1.25rem;
    height: 1.6666rem;
    line-height: 1.6666rem;
}

.ad_bottom{
    color: rgb(226,209,209);
    position: absolute;
    bottom: 5.7rem;
    height: 7.291rem;
}
.ad_bottom .tb_top{
    margin-top: 1.5625rem;
    font-size: .9375rem;
    height: .8333rem;
}
.ad_bottom .tb_bottom{
    /* margin-top: .8rem; */
    font-size: .9375rem;
    height: .8333rem;
    margin-top: .78125rem;


}
.home_ad .ad_type{
    /* float: right; */
    /* right: 0; */
    position: absolute;
    right: 12rem;
    top: 14.17rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}


.code_text p{
    transform: rotate(90deg) translateX(3rem);
    /* transform: translateY(1rem); */
    font-size: .7rem;
    color: rgb(222,213,213);
}
.zd_profile {
    height: 43.75rem;
    background: url('../images/home_02.png') no-repeat;
    background-size: 100% 8.333rem;
    background-position: bottom;
    /* display: flex; */
    /* align-items: center; */
    justify-content: space-between;
    padding-right: 12rem;
    position: relative;
}
.profile_left{
    padding-top: 5.2rem;
    padding-left: 12rem;
    height: 26.30rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    position: relative;
}
.pl_one>div{
    display: flex;
    align-items: center;
}
.pl_one span{
    font-size: 1.875rem;
    color: black;
    margin: 0 8px;
    font-weight: 600;
}
.pl_one p{
    margin-top: .2rem;
    font-size: .9rem;
    color: rgb(128,128,128);
}
.pl_two{
    width: 37.8rem;
    margin-top: 2.6rem;
    height: 14.0625rem;
    color:rgb(128,128,128);
    font-size: .83rem;
    border-bottom: 1px solid rgb(165,165,165);

}
.pl_two p{
    margin-bottom: 1.666rem;
    line-height: 1.6666rem;
    text-align: justify;
}
.pl_three{
    padding-top: 2.3rem;
    color: rgb(127,127,127);
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
}
.pl_three div{
    text-align: center;

}
.pl_three div span{
    font-size: 2.3rem;
    color: black;
    /* font-weight: 800; */
}
.pl_four{
    position: absolute;
    bottom: 2.625rem;
    left: 12rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.pl_four>div>span{
    font-size: .7rem;
    color: rgb(244,231,231);

}
.pl_four_text{
    font-size: 1.25rem;
    color: rgb(244,231,231);
    padding-bottom: .5rem;
    margin-top: -.4rem;
    /* margin: .6rem 0; */
}
.pl_four_img{
    margin-top: -.9rem;
    padding-left: 5rem;
}
.pl_four_img>div{
    width: 6.145rem;
    height: 1.6rem;
    background: url('../images/more.png') no-repeat;
    background-size: 100% 100%;
    
}
.pl_four_img>div:hover{
    background: url('../images/light_more.png') no-repeat;
    background-size: 100% 100%;

    cursor: pointer;
}

.profile_right_img{
    /* position: absolute; */
    /* bottom: -.2rem; */
    /* right: 12.5rem; */
    /* position: relative; */

}

.core_bg{
    height: 43.75rem;
    background: url('../images/core_bg.png') no-repeat;
    background-size: 100% 100%; 
}
.ct_top{
    display: flex;
    align-items: center;
    font-size: 1.875rem;
}
.ct_top p{
    margin: 0 .9rem;
}
.ct_bottom{
    margin-top: .6rem;
    font-size: .9rem;
}
.core_content{
    margin-top: 4.4rem;
    display: flex;
}
.core_content>div{
    width: 18.8rem;
    height: 24rem;
    /* background: black; */
}
.cc_one{
    width: 24.2rem;
    background: url('../images/core_one_img.png') no-repeat;
    background-size: 100% 100%;

}
.cc_two{
    width: 24.2rem;

    background: url('../images/core_two_img.png') no-repeat;
    background-size: 100% 100%;

}
.cc_three{
    width: 24.2rem;

    background: url('../images/core_three_img.png') no-repeat;
    background-size: 100% 100%;


}
.cc_four{
    width: 24.2rem;

    background: url('../images/core_four_img.png') no-repeat;
    background-size: 100% 100%;

}
.cc_one:hover,.cc_two:hover,.cc_three:hover,.cc_four:hover{
    background: rgb(141,12,12);
    font-family: 'sycn_bold'!important;
    font-size: 1.4583rem;
}
.cc_one:hover .open_business>div,.cc_two:hover .open_business>div,.cc_three:hover .open_business>div,.cc_four:hover .open_business>div{
    background: url('../images/light_more.png');
    background-size: 100% 100%;

}
.cc_one:hover .cc_text,.cc_two:hover .cc_text,.cc_three:hover .cc_text,.cc_four:hover .cc_text{
    font-family: 'sycn_bold';
}
.cc_one,.cc_two,.cc_three,.cc_four{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.cc_number{
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.4rem;
}
.cc_text{
    font-size: 1.25rem;
    margin: 2rem 0;
    color: rgb(222,217,212);
    font-family: 'sycn_regular';
}
.open_business{
    width: 6.1rem;
    height: 1.6rem;
}
.open_business>div{
    width: 100%;
    height: 100%;
    background: url('../images/more.png') no-repeat;
    background-size: 100% 100%;
}
.open_business:hover{
    cursor: pointer;
}
.server_case{
    height: 43.75rem;
    background: url('../images/case_bg.png') no-repeat;
    background-size: 100% 100%;
    position: relative;
}
.casetotl_top{
    padding-top: 5.2rem; 
    display: flex;
    align-items: center;
    font-size: 1.875rem;
    color: black;
    height: 1.875rem;
}
.casetotl_top p{
    margin: 0 .3rem;
    /* font-weight: 600; */
    font-family: 'sycn_bold';
}
.casetitle_bottom{
    height: .67708rem;
    line-height: 1.7708rem;
}
.casetitle_bottom span{
    font-size: .9rem;
    color: rgb(127,127,127);
}
.case_content{
    /* height: 840px; */
    margin-top: 9.8rem;
    position: absolute;
    left: 0;
    width: 100%;
}
.case_content>div{
    display: flex;
    justify-content: space-between;
}
.case_bg{
    width: 31.25rem;
    height: 17.7rem;
    background-size: 100% 100%;
}
.case_bg1{
    background: url('../images/casebg1.png') no-repeat;
    background-size: 100% 100%;

}
.case_bg1:hover{
    background: url('../images/casebg1_hover.png') no-repeat;
    background-size: 100% 100%;
}
.case_bg2{
    background: url('../images/casebg2.png') no-repeat;
    background-size: 100% 100%;

}
.case_bg2:hover{
    background: url('../images/casebg2_hover.png') no-repeat;
    background-size: 100% 100%;
}
.case_bg3{
    background: url('../images/casebg3.png') no-repeat;
    background-size: 100% 100%;
}
.case_bg3:hover{
    background: url('../images/casebg3_hover.png') no-repeat;
    background-size: 100% 100%;
}
.case_bg>div{
    padding-left: 3.9rem;
    padding-top: 2.8rem;
}
.case_bg>div>p:first-child{
    font-size: 1.25rem;
    color: black;
    margin-bottom: 1.2rem;
}
.case_bg div .more_bg{
    margin-top: 3.6rem;
    width: 6.145rem;
    height: 1.6rem;
    background: url('../images/red_more.png') no-repeat;
    background-size: 100% 100%;
}

.case_bg:hover  .more_bg{
    background: url('../images/light_more.png') no-repeat;
    background-size: 100% 100%;

}
.case_bg:hover div p{
    color: white;
}
.more_bg:hover{
    cursor: pointer;
}
.open_case:hover{
    background: url('../images/light_more.png') no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
}
.case_text_sec{
    color: rgb(158,158,158);
    font-size: .833rem;
    line-height: 1.562rem;
    font-family: 'sycn_regular';
}
.server_case2{
    height: 43.75rem;
    background: rgb(244,244,244);
}

.case_content2{
    /* width: 76rem; */
    height: 22rem;
    margin-top: 3rem;
    position: relative;
}
.swiper_case{
    display: flex;
}

.swiper_img{
    height: 3.6rem;
    width: 9.2rem;
    margin: 1rem 1rem;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .2rem;
}
.swiper_img img{
    width: 100%;
    /* height: 1.7rem; */
    /* height: 3.645rem; */

}
.case_swiper1{
    height: 4rem;
    display: flex;
    /* margin-left: 1.5rem; */
}
.left_mask{
    height:21.6rem;
    width: 13rem;
    background: url('../images/left_mask.png') no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
}
.right_mask{
    height:21.6rem;
    width: 13rem;
    background: url('../images/left_mask.png') no-repeat;
    position: absolute;
    top: 0;
    right: -1px;
    z-index: 99;
    transform: rotate(180deg);
}
#footer{
    height: 24rem;
}