.many-img2 {
    background: url(/en/res/img/product/top-img1.png) no-repeat;
    height: 460px;
    width: 665px;
    background-size: 100%;
    position: absolute;
    right: 0;
    top: 23%;
}

.img-c1 {
    position: absolute;
    height: 143px;
    width: 192px;
    top: 49px;
    left: 457px;
}

.img-c2 {
    position: absolute;
    height: 147px;
    width: 392px;
    top: 192px;
    left: 66px;
}

.img-c3 {
    position: absolute;
    height: 147px;
    width: 191px;
    top: 192px;
    left: 458px;
}

.img-c4 {
    position: absolute;
    height: 101px;
    width: 159px;
    top: 339px;
    left: 66px;
}

.img-c5 {
    position: absolute;
    height: 101px;
    width: 276px;
    top: 339px;
    left: 225px;
}

.img-c6 {
    position: absolute;
    height: 101px;
    width: 149px;
    top: 339px;
    left: 501px;
}

/* ************ */
.background1 {
    background: url("../../res/img/product/background1.png") no-repeat;
    position: relative;
    top: -70px;
    height: 902px;
    background-size: 100% 100%;
}

.top h1 {
    font-size: 36px;
    line-height: 30px;
    font-weight: bolder;
    letter-spacing: 0;
    color: #ffffff;
    padding: 13px 0 23px 0;
}

.top .top-content {
    font-weight: bolder;
    font-size: 36px;
    line-height: 30px;
    letter-spacing: 0;
    color: #ffffff;
    padding-top: 226px;
}

.top h3 {
    font-weight: bolder;
    font-size: 36px;
    line-height: 30px;
    letter-spacing: 0;
    color: #ffffff;
    padding-top: 226px;
}

.top h4 {
    font-size: 36px;
    line-height: 30px;
    font-weight: bolder;
    letter-spacing: 0;
    color: #ffffff;
    padding: 13px 0 23px 0;
}

.top p {
    font-size: 24px;
    /* 	font-weight: bolder; */
    line-height: 30px;
    letter-spacing: 0;
    color: #ffffff;
    padding-bottom: 50px;
}

.top a {
    font-size: 22px;
    /*     font-weight: bolder; */
    line-height: 28px;
    letter-spacing: 0;
    color: #ffffff;
    border-radius: 14px;
    border: solid 2px #ffffff;
    padding: 8px 15px;
}

.use_product:hover {
    color: #4ad1cd;
    background-color: #fff;
}

.color_page img {
    margin-right: 10px;
}

.top .col-md-6.product-V5 {
    padding-left: 20%;
}

.content-data h2 {
    font-size: 26px;
    font-weight: bolder;
    font-stretch: normal;
    line-height: 38px;
    letter-spacing: 0;
    color: #153c4a;
    padding-bottom: 21px;
}

.content-data .content-data-subtitle {
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 28px;
    letter-spacing: 0;
    color: #5e8b90;
    margin-bottom: 89px;
}

.content-data .four-part h3 {
    font-size: 20px;
    font-weight: bolder;
    line-height: 26px;
    letter-spacing: 0;
    color: #1b464f;
    margin-top: 0;
    padding: 0;
}

.content-data .four-part p {
    line-height: 26px;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    text-align: justify;
    letter-spacing: 0;
    color: #5e8b90;
}

.content-data .four-part .col-md-8 {
    padding-left: 0;
}

.four-part5 {
    float: right;
    width: 100%;
    padding-left: 74px;
}

.four-part-first{
    margin-bottom: 60px;
}

.mini-title {
    text-align: center;
    margin-bottom: 20px;
}

.mini-title p {
    height: 42px;
    line-height: 42px;
    font-size: 18px;
    font-weight: bolder;
    font-stretch: normal;
    letter-spacing: 0;
    color: #22c7d6;
    background-color: #e7f9fa;
    border-radius: 10px;
    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0 10px;
}

.content-application {
    background-color: #fff;
    margin-top: 122px;
    padding: 80px 0;
}

.content-application .container{

}

.content-application .mini-title p {
    line-height: 26px;
    font-size: 16px;
    color: #22c7d6;
    font-weight: bolder;
}

.content-application h4 {
    font-size: 34px;
    font-weight: bolder;
    line-height: 38px;
    letter-spacing: 0;
    color: #153c4a;
    text-align: center;
    margin-bottom: 81px;
}

.content-application .full-page {
    background-image: url("../img/product/scene/dotted.png");
    background-repeat: no-repeat;
    background-position-x: 75%;
    background-position-y: 125px;
}

.content-application .container > .row:first-child {
    margin-bottom: 90px;
}

.content-application .item {
    text-align: center;
    padding: 0 26px;
}

.content-application .item img {
    height: 110px;
    display: block;
    margin: 0 auto;
}

.content-application .item .more {
    width: 30px;
    height: 30px;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;
}

.content-application .item .more::before {
    content: "鈼?;
    color: #3ddae3;
    font-size:30px;
}

.content-application .item:hover .more::before {
    display: none;
}

.content-application .item .more i {
    width: 30px;
    height: 30px;
    background-color: #3ddae3;
    font-weight: bolder;
    color: white;
    border: 6px solid #d3f2f5;
    border-radius: 50%;
    margin: 0 auto;

    display: none;
    align-items: center;
    justify-content: center;
}

.content-application .item .more i:before {
    margin-left: 1px;
}

.content-application .item:hover i {
    display: flex;
}

.content-application .item h3 {
    font-size: 22px;
    font-weight: bolder;
    font-stretch: normal;
    line-height: 26px;
    letter-spacing: 0;
    color: #1b464f;
    margin: 20px 0;
}

.content-application .item p {
    height: 78px;
    line-height: 26px;
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 0;
    text-align: center;
    color: #5e8b90;
}

@media (max-width: 1264px) {
    .content-application .item h3 {
        font-size: 20px;
    }

    .content-application .item p {
        font-size: 16px;
    }
}

@media (max-width: 991px) {
    .content-application .full-page {
        background-image: unset;
    }
}

.content-WEB {
    padding-top: 80px;
}

.content-WEB h2 {
    font-size: 26px;
    font-weight: bolder;
    line-height: 38px;
    letter-spacing: 0;
    color: #1b464f;
    text-align: center;
    margin-bottom: 64px;
}

.five-web .nav-tabs > li.active > a, .five-web .nav-tabs > li.active > a:hover, .five-web .nav-tabs > li.active > a:focus {
    width: 383px;
    height: 173px;
    border: unset;
    background-color: #ffffff;
    box-shadow: 0 16px 39px 1px rgba(0, 0, 0, 0.07);
    border-radius: 15px;
    border-bottom-color: unset;
    border: solid 1px transparent;
    padding: 0;
}

.five-web .nav-tabs {
    border-bottom: unset;
}

.five-web .nav-tabs li {
    width: 383px;
    /*     height: 173px; */
    position: relative;
}

.five-web .nav-tabs > li > a {
    width: 100%;
    height: 104px;
    font-size: 22px;
    font-weight: bolder;
    line-height: 26px;
    letter-spacing: 0;
    color: #1b464f;
    padding-top: 34px;
}

.tab-content img {
    position: relative;
    left: 159px;
    width: 100%;
    max-width: 929px;
}

.five-web .nav > li > a:hover, .five-web .nav > li > a:focus {
    background-color: transparent;
    border: 1px solid transparent;
}

.five-web .content-title-nav {
    opacity: 0;
}

.five-web .active .content-title-nav {
    line-height: 26px;
    font-size: 18px;
    font-weight: normal;
    letter-spacing: 0;
    color: #5e8b90;
    float: right;
    width: 63%;
    margin-top: 14px;
    padding-right: 18px;
    opacity: 1;
    transition: opacity 2s;
}

.five-web .active .num-nav {
    font-family: OpenSans-BoldItalic;
    font-size: 88px;
    font-weight: bolder;
    font-style: italic;
    line-height: 26px;
    letter-spacing: 0;
    color: #22c7d6;
    position: relative;
    top: 48px;
    left: -6px;
    margin: 0 16px;
    transition: 0.8s;
}

.five-web .active a {
    font-size: 22px;
    font-weight: bolder;
    line-height: 26px;
    letter-spacing: 0;
    color: #1b464f;
}

.five-web a:hover, .five-web a:focus {
    color: #1b464f;
}

.five-web .num-nav {
    font-family: OpenSans-BoldItalic;
    font-size: 30px;
    font-weight: bolder;
    font-style: italic;
    line-height: 26px;
    letter-spacing: 0;
    color: #22c7d6;
    margin-right: 16px;
}

.five-web img {
    position: absolute;
    top: 5px;
    right: 0;
    visibility: hidden;
    opacity: 0;
}

.five-web .active img {
    visibility: unset;
    transform: translateY(45px);
    transition: 2s;
    opacity: 1;
}

.content-nav .nav-tabs li {
    width: 16.666%;
    height: 55px;
    background-color: #1e2b34;
}

.content-nav .nav-tabs li > a {
    height: 100%;
    font-size: 18px;
    font-weight: bolder;
    font-stretch: normal;
    line-height: 37px;
    letter-spacing: 0;
    color: #ffffff;
    text-align: center;
    margin-right: unset;
    border: unset;
}

.content-nav .nav-tabs > li.active > a, .content-nav .nav-tabs > li.active > a:hover, .content-nav .nav-tabs > li.active > a:focus {
    background-color: #4bd8e0;
    /* 	border:1px solid transparent; */
    color: #fff;
    border-bottom-color: unset;
}

.content-nav .nav > li > a:hover, .content-nav .nav > li > a:focus {
    background-color: #1e2b34;
    margin-right: unset;
    border: unset;
}

.content-solution {
    background: url(../../res/img/product/v-background.png) no-repeat;
    background-size: auto;
    padding-top: 80px;
    padding-bottom: 90px;
}

/*.content-solution h2, .content-bac h2 {
    font-size: 26px;
    font-weight: bolder;
    line-height: 38px;
    letter-spacing: 0;
    color: #1b464f;
    text-align: center;
    margin-bottom: 46px;
}*/

.content-solution .container p {
    font-size: 18px;
    font-weight: bolder;
    line-height: 28px;
    letter-spacing: 0;
    color: #5e8b90;
}

.version-content li {
    margin-bottom: 0;
}

.version-content {
    position: relative;
}

.right-part {
    position: absolute;
    bottom: 0;
    right: 0;
}

.version-content span {
    font-size: 16px;
    font-weight: normal;
    line-height: 24px;
    letter-spacing: 0;
    color: #5e8b90;
}

.right-part2 {
    width: 60%;
    margin: 0 auto;
    text-align: center;
    float: none;
}

.right-part2 img {
    width: 85%;
}

.version-content ul {
    padding-left: 0;
}

.box-card h3 {
    font-size: 18px;
    font-weight: bolder;
    line-height: 26px;
    letter-spacing: 0;
    color: #1b464f;
    text-align: left;
    margin-top: 28px;
    margin-bottom: 28px;
}

.box-card {
    background-color: #ffffff;
    box-shadow: 0px 0px 35px 3px rgba(99, 120, 121, 0.1);
    border-radius: 5px 10px 10px 10px;
    padding: 18px 47px;
    margin-top: 33px;
    border-bottom: solid 7px transparent;
    transition: 2s;
}

.box-card:hover {
    border-bottom: solid 7px #4bd8e0;
    transition: 2s;
    transform: translateY(-20px);
}

.box-card p {
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0;
    color: #5e8b90;
    margin: 10px 0;
}

.box-card i {
    color: #5ba6cc;
}

.top-card {
    margin-top: 96px;
}

.box-card .title-card {
    text-align: justify;
}

.content-rec {
    padding-top: 80px;
    padding-bottom: 80px;
}

.content-rec h2 {
    font-size: 34px;
    font-weight: bolder;
    line-height: 38px;
    letter-spacing: 0;
    color: #ffffff;
    text-align: center;
    margin-top: 57px;
}

.content-rec h3 {
    font-size: 34px;
    font-weight: bolder;
    line-height: 38px;
    letter-spacing: 0;
    color: #ffffff;
    text-align: center;
    margin-top: 57px;
}

.content-rec p {
    font-size: 16px;
    font-weight: bolder;
    font-stretch: normal;
    line-height: 26px;
    letter-spacing: 0;
    color: #ffffff;
    text-align: center;
}

.recovery-block1 {
    background-color: #7592e6;
    padding: 60px 126px;
    margin-bottom: 57px;
    margin-top: 42px;
}

.recovery-block1:hover {
    box-shadow: 9px 16px 23px 10px rgba(0, 0, 0, 0.14);
}

.recovery-block1 .recovery-headline p {
    font-size: 20px;
    font-weight: bolder;
    letter-spacing: 0;
    color: #c2f6ff;
}

.recovery-block1 h3 {
    font-size: 40px;
    font-weight: bolder;
    line-height: 74px;
    letter-spacing: 0;
    color: #f9f9f9;
    margin-top: 10px;
}

.recovery-block3 {
    background-color: #ffffff;
    padding: 64px 40px;
}

.recovery-block3:hover {
    box-shadow: 9px 16px 23px 10px rgba(0, 0, 0, 0.14);
}

.recovery-block3 h3 {
    font-size: 22px;
    font-weight: bolder;
    line-height: 26px;
    letter-spacing: 0;
    color: #4ad1cd;
    text-align: left;
    margin-top: 0;
}

.recovery-block3 p {
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 22px;
    letter-spacing: 0;
    color: #5e8b90;
    text-align: justify;
}

.bac-mini-rec {
    background: url(../../res/img/product/bac-rec.png) no-repeat center bottom;
    background-size: contain;
}

.recovery-block1 .left-p {
    text-align: left;
    font-weight: inherit;
}

.recovery-block3 img {
    float: right;
    width: 100%;
    max-width: 120px;
}

.content-db {
    padding-top: 80px;
    padding-bottom: 80px;
}

.content-db h3 {
    line-height: 35px;
    color: #1b464f;
}

/* 锟斤拷幕锟街诧拷 start*/
#pic {
    position: relative;
    overflow: hidden;
    height: 400px;
    z-index: 2;
    margin: 0 auto;
}

#pic ul {
    width: 100%;
    height: 100%;
    margin-bottom: 0;
    padding-left: 0;
    position: absolute;
    top: 0;
    left: 0;
}

#pic ul li {
    width: 180px;
    position: absolute;
    margin: 0;
}

#pic ul img {
    width: 100%;
    display: block;
    margin: 0 auto;

    position: relative;
    top: 0;
    left: 0;
}

#pic ul .pic2 {
    width: 140px;
    top: 250px;
    left: 60px;
    z-index: 2;
}

#pic ul .pic3 {
    top: 140px;
    left: 208px;
    z-index: 3;
}

#pic ul .pic4 {
    width: 220px;
    top: 0;
    left: calc(50% - 120px);
    z-index: 4;
}

#pic ul .pic5 {
    top: 140px;
    right: 208px;
    z-index: 3;
}

#pic ul .pic6 {
    width: 140px;
    top: 250px;
    right: 20px;
    z-index: 2;
}

#pic ul .pic1,
#pic ul .pic7,
#pic ul .pic8,
#pic ul .pic9,
#pic ul .pic10,
#pic ul .pic11,
#pic ul .pic12 {
    top: 360px;
    left: 493px;
    z-index: 1;
}

#pic ul li.pic1 {
    opacity: 0;
    filter: alpha(opacity:0);
}

#pic ul li.pic2 {
    opacity: 0.6;
    filter: alpha(opacity:60);
}

#pic ul li.pic3 {
    opacity: 0.9;
    filter: alpha(opacity:90);
}

#pic ul li.pic4 {
    opacity: 1;
    filter: alpha(opacity:100);
}

#pic ul li.pic5 {
    opacity: 0.9;
    filter: alpha(opacity:90);
}

#pic ul li.pic6 {
    opacity: 0.6;
    filter: alpha(opacity:60);
}

#pic ul li.pic7 {
    opacity: 0;
    filter: alpha(opacity:20);
}

#pic ul li.pic8 {
    opacity: 0;
    filter: alpha(opacity:20);
}

#pic ul li.pic9 {
    opacity: 0;
    filter: alpha(opacity:20);
}

#pic ul li.pic10 {
    opacity: 0;
    filter: alpha(opacity:20);
}

#pic ul li.pic11 {
    opacity: 0;
    filter: alpha(opacity:20);
}

#pic ul li.pic12 {
    opacity: 0;
    filter: alpha(opacity:20);
}

#pic span {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    position: absolute;
    top: 160px;
    z-index: 30;
    cursor: pointer;
    opacity: 0.5;
    filter: alpha(opacity=70);
}

#pic:hover span {
    opacity: 1;
    filter: alpha(opacity=100);
}

#pic span.next {
    right: 0;
}

#pic-mobile{
    display: none;
    height: 90px;
}

#pic-mobile .swiper-pagination{
    margin-bottom: 0px;
}

#pic-mobile .swiper-wrapper{
    margin-bottom: 45px;
}

.content-arrow {
    width: 580px;
    font-family: SourceHanSansCN-Regular;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 0;
    color: #5e8b90;
    text-align: center;
    position: relative;
    margin: 0 auto;
    top: 240px;
}

.content-arrow1 {
    font-family: SourceHanSansCN-Regular;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 0;
    color: #5e8b90;
    margin: 0 auto;
}

/* 灞忓箷杞挱 end*/
.content-cdp {
    background-image: url("../img/product/pic_cdp.png");
    background-repeat: no-repeat;
    background-size: auto 90%;
    background-position: left bottom;
    padding-bottom: 125px;
    position: relative;
}

.content-cdp img {
    width: 100%;
}

.content-cdp .cdp_h h2 {
    font-size: 26px;
    font-weight: bolder;
    line-height: 44px;
    letter-spacing: 0;
    color: #1b464f;
    margin-top: 40px;
}

.content-cdp .cdp_h .text {
    font-size: 18px;
    font-weight: normal;
    line-height: 30px;
    letter-spacing: 0;
    color: #5e8b90;
    margin-bottom: 44px;
}

.content-cdp .content-font {
    margin-bottom: 44px;
}

.content-cdp .content-font .row {
    margin-bottom: 30px;
}

.content-cdp .content-font .row:last-child {
    margin-bottom: 0;
}

.content-cdp .content-font p {
    font-size: 18px;
    font-weight: bolder;
    line-height: 26px;
    letter-spacing: 0;
    color: #1b464f;
    border: solid 1px #fff;
    box-shadow: 0 1px 13px 0 rgba(57, 57, 57, 0.1);
    padding: 18px 15px;
    cursor: default;
}

.content-cdp .content-font i {
    font-size: 20px;
    color: #cedde6;
    margin-right: 4px;
}

.content-cdp .content-font p:hover i {
    color: #4bd8e0;
}

.content-cdp .cdp_h .more {
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    border-radius: 25px;
    padding: 0 24px;
}

.content-cdp .cdp_h .more i {
    color: white;
}

.content-where h2 {
    font-size: 34px;
    font-weight: bolder;
    line-height: 38px;
    letter-spacing: 0;
    color: #1b464f;
    text-align: center;
    margin-bottom: 87px;
}

.content-where h3 {
    font-size: 22px;
    font-weight: bolder;
    line-height: 26px;
    letter-spacing: 0;
    color: #1b464f;
    text-align: center;
}

.content-where p {
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 0;
    color: #5e8b90;
    margin: 25px 0;
}

.card-box2 {
    width: 90%;
    height: 596px;
    background-color: #ffffff;
    box-shadow: 0px 0px 35px 3px rgba(99, 120, 121, 0.1);
    border-radius: 5px 10px 10px 10px;
    padding: 89px 49px;
    margin: auto;
    border-top: solid 7px transparent;
    position: relative;
}

#scroll23 {
    border-top: solid 7px #4bd8e0;
}

.card-box2:hover {
    border-top: solid 7px #4bd8e0;
}

.card-box2:hover img {
    opacity: 1;
    width: 39px;
    top: 335px;
}

.card-box2 img {
    position: absolute;
    right: 0;
    width: 22px;
    top: 128px;
    opacity: 0;
    transition: 2s;
}

.content-safe .pos h4 {
    font-size: 26px;
    font-weight: bolder;
    line-height: 44px;
    letter-spacing: 0;
    color: #1b464f;
    text-align: center;
}

.content-safe .pos h2 {
    font-size: 24px;
    font-weight: bolder;
    line-height: 26px;
    letter-spacing: 0;
    color: #1b464f;
    margin-top: 0;
    margin-bottom: 20px;
}

.content-safe .pos p {
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0;
    color: #5e8b90;
    text-align: justify;
    margin-top: 0;
    margin-bottom: 40px;
}

.content-safe .safe-p {
    max-width: 592px;
    line-height: 33px;
    font-size: 18px;
    text-align: center;
    margin: 33px auto 61px;
}

.content-safe a.more, .content-safe a.more i {
    font-size: 16px;
    color: #3ddae3;
}

.content-safe .mobile{
    display: none;
}

.content-safe a.more i:nth-child(1) {
    opacity: 1;
}

.content-safe a.more i:nth-child(2) {
    opacity: 0.6;
}

.content-safe a.more i:nth-child(3) {
    opacity: 0.2;
}

.four-safe-card .left-strip {
    width: 40px;
    height: 278px;
    background-color: #4bd8e0;
    border-radius: 0 0 30px 0;
    box-shadow: 0 1px 13px 0 rgba(57, 57, 57, 0.1);
}

.card-box3 {
    width: 250px;
    height: 278px;
    background-color: #ffffff;
    box-shadow: 0 1px 13px 0 rgba(57, 57, 57, 0.1);
    border-radius: 35px 0 35px 35px;
    text-align: center;
    margin-left: 50px;
    padding: 42px 35px;
}

.card-box3 h3 {
    font-weight: bolder;
    margin-bottom: 18px;
}

.card-box3 p {
    color: #5e8b90;
    margin-bottom: 0;
}

.card-box5 {
    width: 81%;
    height: 278px;
    background-color: #0c0c0c;
    border-radius: 38px 0px 38px 38px;
    text-align: center;

}

.pos {
    position: relative;
}

.content-safe .col-md-8 img {
    width: 100%;
}

.four-safe-card {
    position: absolute;
    bottom: -90px;

    display: flex;
    align-items: center;
}

.content-safe {
    height: 730px;
    background-image: url("../img/product/pic-safe.png");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: auto 85%;
    margin-bottom: 100px;
    padding-top: 80px;
    padding-bottom: 80px;
    position: relative;
}

.content-file {
    background-image: url("../img/product/nas/backgroud.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center bottom;
    padding-top: 80px;
    padding-bottom: 80px;
    position: relative;
}

.content-file h2 {
    font-size: 26px;
    font-weight: bolder;
    line-height: 44px;
    letter-spacing: 0;
    color: #1b464f;
}

.content-file .content-file-subtitle {
    font-size: 18px;
    line-height: 30px;
    color: #5e8b90;
    letter-spacing: 0;
    text-align: justify;
    margin-top: 33px;
    margin-bottom: 49px;
}

.content-file .row-group {
    margin-bottom: 60px;
}

.content-file .row-group .row {
    margin-bottom: 43px;
    padding-top: 37px;
}

.content-file .item {
    height: 150px;
    line-height: 32px;
    font-size: 20px;
    font-weight: bolder;
    letter-spacing: 0;
    color: #1b464f;
    text-align: center;
    background-color: white;
    border: solid 1px #fff;
    box-shadow: 0 1px 13px 0 rgba(57, 57, 57, 0.1);
    padding: 0 16px 18px;
}

.content-file .icon {
    width: 67px;
    height: 74px;
    background-size: 100%;
    background-repeat: no-repeat;
    margin: -37px auto 20px;
}

.content-file .icon01 {
    background-image: url("../img/product/nas/01.png");
}

.content-file .item:hover .icon01 {
    background-image: url("../img/product/nas/01-hover.png");
}

.content-file .icon02 {
    background-image: url("../img/product/nas/02.png");
}

.content-file .item:hover .icon02 {
    background-image: url("../img/product/nas/02-hover.png");
}

.content-file .icon03 {
    background-image: url("../img/product/nas/03.png");
}

.content-file .item:hover .icon03 {
    background-image: url("../img/product/nas/03-hover.png");
}

.content-file .icon04 {
    background-image: url("../img/product/nas/04.png");
}

.content-file .item:hover .icon04 {
    background-image: url("../img/product/nas/04-hover.png");
}

.content-file .icon05 {
    background-image: url("../img/product/nas/05.png");
}

.content-file .item:hover .icon05 {
    background-image: url("../img/product/nas/05-hover.png");
}

.content-file .icon06 {
    background-image: url("../img/product/nas/06.png");
}

.content-file .item:hover .icon06 {
    background-image: url("../img/product/nas/06-hover.png");
}

.content-file .button {
    width: 180px;
    font-size: 16px;
    border-radius: 4px;
}

.right-ground img {
    width: 100%;
}

.left-ground img {
    width: 83%;
    padding-top: 57px;
}

.right-ground {
    background: url("../../res/img/product/pic-background1.png") no-repeat right;
    padding: 10%;
    background-size: contain;
    margin-bottom: 30%;
}

.left-ground {
    background: url("../../res/img/product/pic-background2.png") no-repeat;
    padding: 10%;
    background-size: contain;
    position: absolute;
    top: 70%;
    z-index: -1;
    width: 100%;
}

.content-filing {
    padding-top: 80px;
    padding-bottom: 80px;
    position: relative;
}

.content-filing .container {
    margin-top: 64px;
}

.content-filing .item {
    background-repeat: no-repeat;
    background-position: center bottom;
    padding: 50px 70px;
    border-radius: 4px;
}

.content-filing .item.item01 {
    background-color: #4bd8e0;
    background-image: url("../img/product/protect/01-bg.png");
}

.content-filing .item.item02 {
    background-color: #7592e6;
    background-image: url("../img/product/protect/02-bg.png");
}

.content-filing .item h3 {
    font-size: 22px;
    font-weight: bolder;
    line-height: 26px;
    letter-spacing: 0;
    color: #ffffff;
}

.content-filing .item p {
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 0;
    text-align: justify;
    color: #ffffff;
    margin: 25px 0;
}

.content-filing .item .more {
    height: 50px;
    line-height: 50px;
    border-radius: 4px;
    font-size: 16px;
    padding: 0 36px;
    margin-top: 40px;
    color: white;
    border: 1px solid white;
    display: inline-block;
}

.content-filing .item .more:hover {
    height: 50px;
    line-height: 50px;
    border-radius: 4px;
    font-size: 16px;
    padding: 0 36px;
    margin-top: 40px;
    color: #4BD8E0;
    background-color: white;
    display: inline-block;
}

.content-filing .title-desc-mobile{
    display: none;
}

.content-nav img {
    width: 100%;
}

.content-application hr {
    position: relative;
    top: 55px;
    background: url(../../res/img/product/line.png) no-repeat;
    background-size: 100%;
    padding: 2px;
    width: 62%;
    margin: auto;
    border: 0;
    transition: 2s;
}

.bac-nav-title {
    background: url(../../res/img/product/nav-title.png) no-repeat;
    background-size: cover;
    height: 343px;
    text-align: center;
}

.bac-nav-title h2 {
    font-size: 30px;
    font-weight: bolder;
    line-height: 30px;
    letter-spacing: 0;
    color: #ffffff;
    padding-top: 219px;
}

.bac-nav-title .content-nav-subtitle {
    font-size: 24px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 30px;
    letter-spacing: 0;
    color: #ffffff;
}

/* scroll start */
#scroll-back-it-up,
#scroll-character-1, #scroll-character-2, #scroll-character-3, #scroll-character-4 {
    transition: transform, opacity 2s, 1s;
    transform: translateY(90px);
    opacity: 0;
}

/*->*/
#scroll1, #scroll8, #scroll10, #scroll19, #scroll25, #scroll32, #scroll34 {
    transition: transform, opacity 2s, 1s;
    transform: translateX(-90px);
    opacity: 0;
}

/*<-*/
#scroll2, #scroll9, #scroll11, #scroll20, #scroll26, #scroll33, #scroll35 {
    transition: transform, opacity 2s, 1s;
    transform: translateX(90px);
    opacity: 0;
}

/*|^*/
#scroll3 {
    transition: transform, opacity 0.5s, 0.5s;
    transform: translateY(90px);
    opacity: 0;
}

#scroll4 {
    transition: transform, opacity 1s, 1s;
    transform: translateY(90px);
    opacity: 0;
}

#scroll5 {
    transition: transform, opacity 1.5s, 1.5s;
    transform: translateY(90px);
    opacity: 0;
}

#scroll6 {
    transition: transform, opacity 2s, 2s;
    transform: translateY(90px);
    opacity: 0;
}

#scroll7 {
    transition: opacity 2.5s;
    opacity: 0;
}

#scroll12, #scroll14, #scroll16, #scroll13, #scroll15, #scroll17 {
    transition: transform, opacity 2s, 1s;
    transform: translateY(90px);
    opacity: 0;
}

#scroll18, #scroll21, #scroll31 {
    transition: transform, opacity 2s, 1s;
    transform: translateY(90px);
    opacity: 0;
}

#scroll22 {
    transition: transform, opacity 0.5s, 0.5s;
    transform: translateY(90px);
    opacity: 0;
}

#scroll23 {
    transition: transform, opacity 1s, 1s;
    transform: translateY(90px);
    opacity: 0;
}

#scroll24 {
    transition: transform, opacity 1.5s, 1.5s;
    transform: translateY(90px);
    opacity: 0;
}

#scroll-four-card-1 {
    transition: transform, opacity 1s, 1s;
    transform: translateX(calc(-400% - 900px));
    opacity: 0;
}

#scroll-four-card-2 {
    transition: transform, opacity 1s, 1s;
    transform: translateX(calc(-400% - 600px));
    opacity: 0;
}

#scroll-four-card-3 {
    transition: transform, opacity 1s, 1s;
    transform: translateX(calc(-400% - 300px));
    opacity: 0;
}

#scroll-four-card-4 {
    transition: transform, opacity 1s, 1s;
    transform: translateX(calc(-400%));
    opacity: 0;
}

/*.product-page {
    background: url(../../res/img/product/f-bac.png);
    background-size: contain;
}*/

/* .content-filing{ */
/* 	background: url(../../res/img/product/floor.png) no-repeat center bottom; */
/*     background-size: contain; */
/* } */
.top .color_page {
    border: 0;
    font-size: 16px;
    margin-left: 0;
}

.top .color_page a {
    font-size: 16px;
    padding: 5px 15px;
}

.top .color_page i {
    margin: 0 4px;
}

.back-top i {
    position: fixed;
    font-size: 76px;
    color: #22313b;
    z-index: 100;
    right: 4px;
    bottom: 146px;
}

.back-top {
    position: fixed;
    font-size: 23px;
    color: #22313b;
    z-index: 100;
    right: 0;
    bottom: 134px;
    display: none;
}

.back-top img {
    width: 77%;
}

/* scroll end */
.pic_product {
    width: 100%;
    margin-top: 100px;
    animation-name: example;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    position: relative;
}

@keyframes example {
    0% {
        left: 0;
        top: 0;
    }
    50% {
        left: 0;
        top: 20px;
    }
    100% {
        left: 0;
        top: 0;
    }

}

.top .row {
    margin: 0;
    padding: 0;
}

.top .col-md-6 {
    margin: 0;
    padding: 0;
}

.content-arrow1 {
    display: none;
}

.four-part img {
    width: 100%;
    max-width: 83px;
}

.cdp_h .row:last-child {
    margin-bottom: 0;
}

@media (max-width: 1374px) and (min-width: 991px){
    .free-trial-button{
        width: auto;
    }
}

/*@media (min-width: 1601px) {
    .product-page .container {
        width: 1349px;
    }
}*/

@media (max-width: 1600px) {
    .top a {
        padding: 10px 14px;
    }

    /*.cdp_h {*/
    /*    margin: 6% 0;*/
    /*}*/

    .content-cdp{
        background-size: auto 70%;
        padding-bottom: 85px;
    }
}

@media (max-width: 1599px) and (min-width: 1441px){
    .top a {
        font-size: 20px;
    }
}

    /*@media (max-width: 1599px) and (min-width: 1441px) {
        .product-page .container {
            width: 77%;
        }
    }*/

@media (max-width: 1440px) {
    /* 	font */
    .top a {
        padding: 7px 10px;
        font-size: 20px;
    }

    .top h3, .top h4 ,.top h1, .top .top-content{
        font-size: 32px;
    }

    .top .color_page {
        font-size: 14px;
    }

    .content-data h2 {
        font-size: 32px;
    }

    .content-data .content-data-subtitle {
        font-size: 20px;
    }

    .content-data .four-part h3 {
        font-size: 18px;
    }

    .content-data .four-part p {
        font-size: 16px;
    }

    .content-application h4 {
        font-size: 32px;
    }

    .content-application h3 {
        font-size: 18px;
    }

    .content-application p {
        font-size: 16px;
    }

    .content-WEB h2 {
        font-size: 34px;
    }

    .five-web .active .num-nav {
        font-size: 70px;
    }

    .five-web .nav-tabs > li > a {
        font-size: 18px;
    }

    .five-web .active .content-title-nav {
        font-size: 16px;
        width: 69%;
    }

    .bac-nav-title h2 {
        font-size: 30px;
    }

    .bac-nav-title .content-nav-subtitle {
        font-size: 22px;
    }

    .content-nav .nav-tabs li > a {
        font-size: 16px;
    }

    .content-solution h2, .content-bac h2 {
        font-size: 26px;
    }

    .content-solution p {
        font-size: 16px;
    }

    .version-content span {
        font-size: 14px;
    }

    .box-card h3 {
        font-size: 20px;
    }

    .box-card p {
        font-size: 16px;
    }

    .recovery-block3 {
        margin-bottom: 10px;
    }

    .content-rec h2 {
        font-size: 32px;
    }

    .content-rec h3 {
        font-size: 32px;
    }

    .content-rec p {
        font-size: 16px;
    }

    .recovery-block1 .recovery-headline p {
        font-size: 18px;
    }

    .recovery-block3 h3 {
        font-size: 20px;
    }

    .content-db h3 {
        font-size: 26px;
    }

    .content-arrow {
        font-size: 16px;
    }

    .content-cdp p {
        font-size: 16px;
    }

    .content-cdp .content-font p {
        font-size: 20px;
    }

    .content-where h2 {
        font-size: 32px;
    }

    .content-where h3 {
        font-size: 20px;
    }

    .content-where p {
        font-size: 16px;
    }

    .content-safe h4 {
        font-size: 32px;
    }

    .content-safe .safe-p {
        font-size: 20px;
    }

    .content-safe h3 {
        font-size: 20px;
    }

    .content-file h2 {
        font-size: 32px;
    }

    .content-filing h3 {
        font-size: 16px;
    }

    .content-filing p {
        font-size: 15px;
    }

    .content-cdp{
        background-size: auto 60%;
        padding-bottom: 25px;
    }
}

/*@media (max-width: 1440px) and (min-width: 1367px) {
    .product-page .container {
        width: 76%;
    }
}*/

@media (max-width: 1366px) {
    .content-cdp p {
        margin-bottom: 33px;
    }

    .content-file p {
        margin-bottom: 33px;
    }
}

@media (max-width: 1080px){
    .content-cdp{
        background-size: auto 40%;
        padding-bottom: 0px;
    }
}

@media (max-width: 991px) {

    .content-cdp{
        background-image: none;
    }

    .content-file{
        background-image: none;
    }

    .pic_product {
        display: none;
    }

    .four-part5 {
        display: none;
    }

    .content-WEB {
        display: none;
    }

    #v-revolve {
        display: none;
    }

    .box-card h3 {
        font-size: 16px;
        text-align: inherit;
    }

    .card-box2 {
        height: auto;
    }

    .four-safe-card {
        position: inherit;
        bottom: -25px;
    }

    .right-ground img {
        display: none;
    }

    .left-ground img {
        display: none;
    }

    .product-page {
        text-align: center;
    }

    .right-part {
        position: inherit;
    }

    #pic {
        display: none;
    }

    .content-arrow1 {
        display: block;
    }

    .top .col-md-6.product-V5 {
        padding-left: 0;
    }

    .top .col-md-6 {
        padding: 17px 0;
    }

    .top a {
        margin-right: 0;
    }

    .recovery-block1 {
        margin-bottom: 0;
        margin-top: 42px;
        padding: 21px 31px;
    }

    .right-ground {
        background: unset;
        margin-bottom: 0;
    }

    .left-ground {
        background: unset;
        position: unset;
    }

    .content-filing h3 {
        color: #5e8b90;
    }

    .content-filing p {
        color: #5e8b90;
    }

    .back-top {
        right: 0;
        bottom: 96px;
    }

    .back-top img {
        width: 41%;
    }

}


/* 绉诲姩绔€傞厤璋冩暣寮€濮嬶紙414-360锛 */
.display-mobile{
    display: none;
}

@media (max-width: 414px) {

    .display-website{
        display: none;
    }

    .display-mobile{
        display: block;
    }

    .top h1{
        font-size: 28px;
        padding: 30px 0;
        margin: 0;
    }

    .top .top-content{
        font-size: 28px;
        padding-top: 140px;
    }

    .top h3{
        font-size: 28px;
        padding-top:100px;
    }

    .top h4{
        font-size: 28px;
    }

    .top p{
        font-size: 21px !important;
        padding-bottom: 0px;
    }

    .top a{
        font-size: 16px;
    }

    .background1{
        height: 450px;
        background-size: cover;
        background-position: bottom;
    }

    .content-data h2{
        font-size: 18px;
        margin-top: 30px;
        margin-bottom: 0px;
    }

    .content-data .content-data-subtitle{
        font-size: 14px;
        width: 95%;
        margin: 0 auto;
        margin-bottom: 30px;
    }

    .half-module{
        padding:0;
        margin-top:-20px;
    }

    .half-module .text{
        margin-top: 10px;
        font-size: 14px;
        text-align: justify;
    }

    .half-module .button{
        margin-top:30px;
        font-size: 14px;
    }

    .content-data .four-part .col-md-6{
        width: 45%;
        float: left;
        margin-bottom: 30px;
        padding: 0;
    }

    .content-data .four-part .four-part-left{
        margin-right: 5%;
    }

    .content-data .four-part .four-part-right{
        margin-left: 5%;
    }

    .content-data .four-part p{
        font-size: 12px !important;
        margin-bottom: 0;
    }

    .content-application .col-md-3{
        width: 50%;
        float: left;
    }

    .content-application .item{
        padding:0;
        padding-bottom: 30px;
    }

    .content-application .pub-text{
        margin-top:10px;
        padding-bottom: 30px;
    }

    .content-application .item .more{
        display: none;
    }

    .content-application .full-page .row{
        width: 95%;
        margin: 0 auto;
    }

    .content-application .full-page .row #scroll3,.content-application .full-page .row #scroll5{
        padding: 0;
        width: 45%;
        margin-right: 5%;
    }

    .content-application .full-page .row #scroll4,.content-application .full-page .row #scroll6{
        padding: 0;
        width: 45%;
        margin-left: 5%;
    }

    .content-data .four-part{
        width: 95%;
        margin: 0 auto;
    }

    .content-data .four-part .row{
        width: 100%;
        margin:0 auto;
    }

    .four-part img{
        max-width: 70px;
    }

    .content-data .four-part .col-md-8{
        padding: 0;
    }

    .content-data .four-part h3{
        margin-top:10px;
        font-size: 16px;
    }

    .content-application{
        margin-top: 0px;
        padding-top: 30px;
        padding-bottom: 0px;
    }

    .content-application .pub-title{
        margin: 0;
        font-size: 18px;
    }

    .content-application .item h3{
        font-size: 16px;
    }

    .content-application .item p{
        font-size: 12px !important;
    }

    .content-application .container > .row:first-child{
        margin-bottom: 0px;
    }

    .content-filing .item {
        float: left;
        width: 48%;
        padding: 30px 3%;
    }

    .content-filing .item p{
        margin: 20px 0;
        font-size: 12px !important;
        min-height: 250px;
    }

    .content-filing .item.item01 {
        margin-right: 2%;
    }

    .content-filing .item.item02 {
        margin-left: 2%;
    }

    .content-filing .item img{
        width: 70px;
    }

    .content-filing .item .more{
        margin-top: 0px;
    }

    .bac-nav-title{
        height: 175px;
        background-position: 60%;
        background-color: #F8F8F9;
        margin-top: -50px;
    }

    .bac-nav-title h2{
        font-size: 24px;
        padding-top: 85px;
    }

    .bac-nav-title content-nav-subtitle{
        margin-top: 10px;
        font-size: 18px;
    }


    .bac-mini-rec .title-main{
        margin-top: 50px;
        margin-bottom: 0px !important;
    }

    .content-bac .display-mobile .swiper-container{
        padding-top:30px;
    }

    .content-bac .display-mobile .swiper-container .box-card p{
        text-align: left;
        line-height: 20px;
    }

    #scroll12, #scroll14, #scroll16, #scroll13, #scroll15, #scroll17 {
        transition: none;
        transform: none;
        opacity: 1;
    }

    #scroll12, #scroll14, #scroll16{
        margin: 0%;
    }

    #scroll13, #scroll15, #scroll17{
        margin: 0%;
    }

    .box-card{
        width: 48%;
        float: left;
        padding: 5%;
        min-height: 375px;
    }

    .box-card p{
        font-size: 12px !important;
    }

    .content-solution{
        padding: 10px;
    }

    .content-solution h2, .content-bac h2{
        font-size: 12px;
    }

    .content-solution .pub-text{
        margin-bottom: 30px;
    }

    .content-bac img{
        width: 70px;
    }

    .top-card{
        margin-top:30px;
    }

    .content-nav .nav-tabs{
        display: none;
    }

    .content-nav .nav-tabs #nav1{
        display: none;
    }

    .right-part2{
        width: 100%;
    }

    #v-revolve{
        display: block;
        margin: 0 auto;
        margin-bottom: 20px;
        width: 97%;
    }

    .content-nav .nav-tabs li{
        width: 20%;
    }

    .bac-mini-rec{
        margin-top:30px;
        background-size: 450%;
        background-position: 35% 100%;
    }

    .content-nav .nav-tabs li > a{
        font-size:12px;
        padding-left: 0;
        padding-right: 0;
    }

    .content-rec{
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .content-rec .recovery-headline .col-md-6{
        width: 50%;
        float: left;
    }

    .content-rec h2{
        margin-top: 0px;
        font-size: 24px;
        margin-bottom: 0;
    }

    .content-rec h3{
        font-size: 24px;
        margin-bottom: 0;
    }

    .recovery-block1{
        margin-top: 30px;
        padding: 20px 30px;
    }

    .recovery-block1 h3{
        /*color: #222;*/
        font-size: 16px;
        line-height: 16px;
        margin-bottom: 10px;
    }

    .recovery-block1 .left-p{
        text-align: justify;
    }

    .recovery-block1 .recovery-headline p{
        font-size: 14px !important;
        text-align: center;
        min-height: auto;
    }

    .recovery-block3 .col-md-3{
        text-align: center;
    }

    .recovery-block3{
        padding-top: 30px;
        padding-bottom: 10px;
    }

    .recovery-block3 img{
        width: 70px;
        margin: 0 auto;
        float: none;
        margin-bottom: 10px;
    }

    .recovery-block3 h3{
        text-align: center;
        font-size: 14px;
        margin-bottom: 10px;
    }

    .recovery-block3 .col-md-9{
        padding: 0%;
    }

    .recovery-block3 .col-md-9 p{
        font-size:12px !important;
        text-align: justify;
        min-height: 155px;
    }


    .content-rec .button-module a{
        font-size: 14px;
        margin-top: 20px;
        margin-bottom: 0px;
        height: 40px;
        line-height: 40px;
        padding: 0 20px;
        min-width: auto;
    }

    .content-rec .recovery-block3{
        width: 48%;
        float: left;
    }

    #scroll19{
        margin-right: 2%;
    }

    #scroll20{
        margin-left: 2%;
    }

    .character-module .item > img{
        margin: 0 auto;
        float: none;
    }

    .character-module .row .col-sm-6{
        padding:0 15px !important;
    }

    .character-module .row > div:last-child{
        margin-top: 0px;
        height: 400px;
        padding-bottom: 500px;
    }

    .content-cdp .content-font .row{
        margin-bottom: 0;
    }

    .four-safe-card{
        display: block;
        width: 93.5%;
        margin: 0 auto;
        margin-top: -20px;
    }

    .four-safe-card .left-strip{
        display: none;
    }

    .card-box3{
        padding:20px 10px;
        margin:10px 3%;
        height: 210px;
        width: 44%;
        float: left;
    }

    .content-db{
        padding-top: 10px;
        padding-bottom: 55px;
    }

    .content-db h3{
        font-size: 18px;
    }

    #pic-mobile{
        display: block;
        margin-top: 30px;
        margin-bottom: 10px;
    }

    #pic-mobile .each-pic{
        margin-top: 10px;
        width: 100%;
        height: 75px;
        display: inline-block;
        vertical-align: middle;
    }

    #pic-mobile .each-pic img{
        max-width: 200px;
        height: 75px;
    }

    #pic-mobile .each-pic.each-pic-oracle img{
        position: relative;
        top:30%;
        height: 25px;
    }

    #pic-mobile .each-pic.each-pic-sql img{
        position: relative;
        top:10%;
        height: 50px;
    }

    #pic-mobile .each-pic.each-pic-dameng img{
        position: relative;
        top:15%;
        height: 40px;
    }

    .content-cdp{
        margin-bottom: 50px;
    }

    .content-cdp .cdp_h h2{
        font-size: 18px;
        margin-top: 10px;
    }

    .content-cdp .cdp_h .text{
        margin-bottom: 30px;
    }

    .content-cdp p{
        margin-bottom: 30px;
    }

    .content-cdp .cdp_h .more{
        font-size: 14px;
        border-radius: 5px;
        padding: 0 20px;
    }

    .content-cdp .content-font{
        margin-bottom: 0px;
    }

    .content-safe .pos h2{
        font-size: 18px;
        margin-bottom: 10px;
    }

    .content-safe{
        padding-top: 30px;
        padding-bottom: 0px;
        margin-bottom: 0px;
        background-color: #fafafa;
        background-image:none;
        height: 850px;
    }

    .content-safe h3{
        font-size: 16px;
    }

    .content-safe .four-safe-card p{
        font-size: 12px !important;
    }

    .content-safe a.more.website, .content-safe a.more.website i{
        font-size: 14px;
        display: none;
    }

    .content-safe .pos p{
        margin-bottom: 30px;
        width: 95%;
        margin: 0 auto;
        margin-bottom: 20px;
    }

    .content-safe a.mobile{
        display: block;
        color: #fff;
        width: 33%;
        padding: 10px 10px;
        margin: 0 auto;
        font-size: 14px;
        height: 40px;
        float: left;
        float: left;
        margin-left: 33%;
        margin-top: 45px;
    }

    .content-safe a.more i{
        color: #fff;
    }

    .content-file{
        padding-top: 50px;
        padding-bottom: 0;
    }

    .content-file .item{
        width: 33.3%;
        float: left;
        margin-bottom: 0;
    }

    .content-file h2{
        font-size: 18px;
        margin-bottom: 0;
    }

    .content-file .content-file-subtitle{
        font-size: 14px;
        margin-top: 10px;
        margin-bottom: 60px;
    }

    .content-file .item{
        margin-bottom: 60px;
        font-size: 14px;
    }

    .content-file .row-group .row{
        margin-bottom: 0px;
        padding-top: 0px;
    }

    .content-file .row-group{
        margin-bottom: 0px;
    }

    .content-file .button{
        font-size: 14px;
        margin: 0 auto;
        border: none;
        color: #fff;
        background-color: #4BD8E0;
        width: auto;
        padding: 10px 20px;
        height: auto;
        display: unset;
        position: relative;
        top: -30px;
    }

    .content-file .button i{
        display: unset !important;
    }

    .content-filing{
        padding-top: 40px;
        padding-bottom: 0;
    }

    .content-filing .container{
        margin-top:30px;
    }

    .content-filing .item{
        margin-bottom: 30px;
    }

    .content-filing .title-desc{
        width: 93%;
        margin: 0 auto;
        font-size: 14px;
        text-align: justify-all;
        display: none;
    }

    .content-filing .title-desc-mobile{
        color: #5e8b90;
        width: 90%;
        margin: 0 auto;
        font-size: 14px;
        text-align: justify-all;
        display: block;
        line-height: 30px;
        margin-top: 20px;
    }

    #nav_top4 .container .row .col-md-6{
        width: 95%;
        margin: 0 auto;
    }

    .blank{
        display: none;
    }

    .character-module .item{
        width: 48%;
        min-height: 400px;
        margin-bottom: 0;
        margin-top: 30px;
        float: left;
        padding-left: 5%;
        padding-right: 5%;
        transform: none !important;
        opacity: 1 !important;
    }

    #scroll-character-1,#scroll-character-2{
        /*margin: 0 1%;*/
    }

    #scroll-character-3,#scroll-character-4{
        /*margin: 0 1%;*/
    }

    .character-module .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
        width: 15%;
        height: 4px;
        border-radius: unset;
        margin: unset;
        outline: none !important;
        transition: all .3s ease-in-out;
        opacity: 0.3;
    }

    .character-module .swiper-pagination-bullet-active, .backup-content .swiper-pagination-bullet:hover {
        background: #4ad1cd !important;
        opacity: 1 !important;
        height: 6px !important;
    }

    .character-module .swiper-wrapper{
        margin-bottom: 45px;
    }

    .character-module .item img{
        width: 90%;
    }

    .character-module .item p{
        font-size: 12px !important;
        line-height: 20px;
    }

    .character-module{
        padding-top: 30px;
        padding-bottom: 0px;
        margin-bottom: 0px;
    }

    .character-module .item h3{
        margin-top: 30px;
        font-size: 16px;
    }

    .character-module .swiper-pagination{
        margin-bottom: 15px;
    }

    .content-cdp .content-font .col-md-6{
        width: 50%;
        float: left;
    }

    .content-filing .item h3{
        font-size: 18px;
    }

    .content-filing .item .more{
        font-size: 14px;
    }

    .content-filing .item .more:hover{
        margin-top: 0;
        padding: 0 36px;
    }

    /*绉诲姩绔叧闂姩鏁?/
    #scroll-back-it-up,
    #scroll-character-1, #scroll-character-2, #scroll-character-3, #scroll-character-4 {
        transition: none;
        transform: none;
        opacity: 1;
    }

    /*->*/
    #scroll1, #scroll8, #scroll10, #scroll19, #scroll25, #scroll32, #scroll34 {
        transition: none;
        transform: none;
        opacity: 1;
    }

    /*<-*/
    #scroll2, #scroll9, #scroll11, #scroll20, #scroll26, #scroll33, #scroll35 {
        transition: none;
        transform: none;
        opacity: 1;
    }

    /*|^*/
    #scroll3 {
        transition: none;
        transform: none;
        opacity: 1;
    }

    #scroll4 {
        transition: none;
        transform: none;
        opacity: 1;
    }

    #scroll5 {
        transition: none;
        transform: none;
        opacity: 1;
    }

    #scroll6 {
        transition: none;
        transform: none;
        opacity: 1;
    }

    #scroll7 {
        transition: none;
        opacity: 1;
    }

    #scroll12, #scroll14, #scroll16, #scroll13, #scroll15, #scroll17 {
        transition: none;
        transform: none;
        opacity: 1;
    }

    #scroll18, #scroll21, #scroll31 {
        transition: none;
        transform: none;
        opacity: 1;
    }

    .content-file-gray-background{
        background-color: #fafafa;
        position: absolute;
        height: 350px;
        width: 100%;
        left: 0;
        top: 50%;
        margin-top: 30px;
    }

    #scroll18{
        margin-bottom: 30px;
    }

    #scroll22 {
        transition: none;
        transform: none;
        opacity: 1;
    }

    #scroll23 {
        transition: none;
        transform: none;
        opacity: 1;
    }

    #scroll24 {
        transition: none;
        transform: none;
        opacity: 1;
    }

    #scroll-four-card-1 {
        transition: none;
        transform: none;
        opacity: 1;
    }

    #scroll-four-card-2 {
        transition: none;
        transform: none;
        opacity: 1;
    }

    #scroll-four-card-3 {
        transition: none;
        transform: none;
        opacity: 1;
    }

    .four-safe-card img{
        width: 70px;
    }

    #scroll-four-card-4 {
        transition: none;
        transform: none;
        opacity: 1;
    }

    .content-bac{
        margin-bottom: 0px;
    }

    .content-bac .display-mobile{
        height: 450px;
    }

    .content-bac .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
        width: 15%;
        height: 4px;
        border-radius: unset;
        margin: unset;
        outline: none !important;
        transition: all .3s ease-in-out;
        opacity: 0.3;
    }

    .content-bac .swiper-pagination-bullet-active, .backup-content .swiper-pagination-bullet:hover {
        background: #4ad1cd !important;
        opacity: 1 !important;
        height: 6px !important;
    }

    .content-bac .swiper-wrapper{
        margin-bottom: 45px;
    }

    #pic-mobile .swiper-pagination{
        bottom: 0px;
    }
}

/*瀹圭伨澶囦唤绯荤粺鏂伴〉闈㈠紑濮?/
.vinchin-disaster-recovery.background1{
    background: url("../../res/img/product/vinchin-disaster-recovery/banner.png") no-repeat;
    text-align: center;
    height: auto;
}

.vinchin-disaster-recovery.background1 .top-content{
    font-size:16px;
    color: #00CBC9;
    font-weight: normal;
}

.vinchin-disaster-recovery.background1 h1{
    font-size: 50px;
    font-weight: bold;
    line-height: normal;
    margin-bottom: 20px;
    padding-top: 0;
    margin-top: 10px;
}

.vinchin-disaster-recovery.background1 p{
    font-family: Harmonyos-regular;
    line-height: 36px;
    width: 50%;
    margin: 0 auto 50px;
}

.vinchin-disaster-recovery.background1 .free-trial-button{
    padding: 10px 30px;
    background: none;
    background-color: none;
    color:#00CBC9;
    border:1px solid #00CBC9;
    border-radius: 50px;
    margin: 0 15px;
}

.vinchin-disaster-recovery.background1 .free-trial-button:hover{
    color:#fff;
    background: #00CBC9;
}

.vinchin-disaster-recovery.background1 .free-trial-button i{
    margin-left: 10px;
}

.vinchin-disaster-recovery.background1 .top-content{
    padding-top: 200px;
}

.vinchin-disaster-recovery.background1 .product-V5{
    padding-bottom: 150px;
}

.jump-band{
    width: 100%;
    height: 80px;
    background: radial-gradient(81% 81% at 50% 30%, #1CC8E2 0%, #9CEEEC 100%), #49AECE;
    position: relative;
    top: -70px;
}

.jump-band .col-md-2{
    text-align: center;
    display: grid;
    place-items: center;
}

.jump-band a{
    font-size: 20px;
    color: #fff;
    position: absolute;
    top: 50%;
    transform: translateY(80%);
}

.jump-band .white-line{
    background-color: #fff;
    width:40px;
    height: 2px;
    margin: 0 auto;
    opacity: 0;
}

.jump-band a:hover .white-line{
    opacity: 1;
}

.content-application{
    margin-top: 0;
    padding-top: 0;
}

.content-application h2{
    font-size: 36px;
    line-height: 48px;
    text-align: center;
    color: #1D1D1D;
    font-family: Harmonyos-medium;
    margin-bottom: 0px;
    background-color: unset;
    font-weight: normal;
}

.content-application .pub-text{
    font-size: 16px;
    line-height: 36px;
    margin:0 auto 50px;
    font-weight: normal;
    font-family: Harmonyos-regular;
}

.vinchin-disaster-recovery.hypervisor-solution{
    padding-top: 50px;
}

.vinchin-disaster-recovery.hypervisor-solution h2{
    margin-bottom: 10px;
}


.vinchin-disaster-recovery.hypervisor-solution p{
    font-size: 16px;
    line-height: 36px;
    font-weight: normal;
    font-family: Harmonyos-regular;
    text-align: center;
    width:50%;
    margin: 0 auto 30px;
}

.disaster-recovery-backup-protection h2{
    font-size: 36px;
    line-height: 48px;
    text-align: center;
    color: #1D1D1D;
    font-family: Harmonyos-medium;
    margin-bottom: 0px;
    background-color: unset;
    font-weight: normal;
    margin-top: 0;
    padding-top: 0;
}

.disaster-recovery-backup-protection .pub-text{
    font-size: 16px;
    line-height: 36px;
    font-weight: normal;
    font-family: Harmonyos-regular;
    margin: 0 auto 50px;
}

.vinchin-disaster-recovery.hypervisor-solution .solution-group,.vinchin-disaster-recovery.hypervisor-solution .solution-content{
    height: 460px;
}

.vinchin-disaster-recovery.hypervisor-solution .solution-group:hover .solution-content{
    background:unset;
    background-color: #ECFFFF;
    border: 5px solid #ECFFFF;
}
.vinchin-disaster-recovery.hypervisor-solution .solution-group .solution-content a:hover{
    background-color: #00CBC9;
    color:#fff;
}

.vinchin-disaster-recovery.hypervisor-solution .solution-group p{
    font-size:14px;
    line-height: 28px;
    width: 100%;
}

.vinchin-disaster-recovery.hypervisor-solution .solution-group img{
    width:auto;
    height: 150px;
    margin: 0 auto;
}

.vinchin-disaster-recovery.hypervisor-solution .solution-group a{
    color:#00CBC9;
    border: 1px solid #00CBC9;
    border-radius: 50px;
    padding:10px 30px;
}

.disaster-recovery-sketch-map{
    padding: 10px 0 70px;
    text-align: center;
}

.disaster-recovery-sketch-map h2{
    font-size: 36px;
    font-weight: 500;
    line-height: 48px;
    text-align: center;
    color: #1D1D1D;
    letter-spacing: 0.05em;
    margin-top: 0;
    font-family: Harmonyos-medium;
    margin-bottom: 30px;
}

.disaster-recovery-sketch-map p{
    font-size: 16px;
    line-height: 36px;
    margin:0 auto 30px;
    font-weight: normal;
    font-family: Harmonyos-regular;
}

.disaster-recovery-sketch-map .title-main{
    margin-bottom: 0;
}

.disaster-recovery-sketch-map img{
    width:100%;
}

.disaster-recovery-sketch-map .row{
    margin-bottom: 30px;
}

.disaster-recovery-sketch-map .card{
    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.15);
    width:32%;
    padding:30px 30px 0px 30px;
    border-radius: 15px;
    float: left;
    text-align: left;
}

.disaster-recovery-sketch-map .card h3{
    font-family: Harmonyos-medium, sans-serif;
    font-size: 20px;
    margin-top: 10px;
}

.disaster-recovery-sketch-map .card p{
    font-size:14px;
    line-height: 24px;
    width:100%;
}

.disaster-recovery-sketch-map .card .blue-bar{
    height: 3px;
    width:80%;
    margin: 0 auto;
    background-color: #00CBC9;
    opacity: 0;
    border-radius: 5px;
    cursor: default;
}

.disaster-recovery-sketch-map .card:hover{
    background: #ECFFFF;
}

.disaster-recovery-sketch-map .card:hover .blue-bar{
    opacity: 1;
}

.disaster-recovery-sketch-map .card:nth-child(2){
    margin: 0 2%;
}

.disaster-recovery-sketch-map .row-list-2 .card:first-child{
    margin-left: 17%;
    margin-bottom: 20px;
}

.disaster-recovery-sketch-map .row a{
    padding:10px 30px;
    color:#00CBC9;
    border: 1px solid #00CBC9;
    border-radius: 30px;
}

.disaster-recovery-sketch-map .row a i{
    margin-left: 5px;
}

.disaster-recovery-sketch-map .row a:hover{
    color:#fff;
    background-color: #00CBC9;
}

.vinchin-disaster-recovery.solution-feature{
    padding-top:50px;
    padding-bottom: 120px;
}

.vinchin-disaster-recovery.solution-feature h2{
    margin-bottom: 30px;
}

.vinchin-disaster-recovery.solution-feature .subtitle{
    font-size: 16px;
    line-height: 36px;
    margin:0 auto 50px;
    font-weight: normal;
    font-family: Harmonyos-regular;
}

.vinchin-disaster-recovery.solution-feature .sketch-card{
    width:48%;
    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.15);
    float: left;
    padding:30px;
    border-radius: 15px;
    height: 330px;
    position: relative;
    background-color: #fff;
}

.vinchin-disaster-recovery.solution-feature .sketch-card:first-child{
    margin-right: 2%;
}

.vinchin-disaster-recovery.solution-feature .sketch-card:last-child{
    margin-left: 2%;
}

.vinchin-disaster-recovery.solution-feature .sketch-card .card-title{
    font-family: Harmonyos-medium, sans-serif;
    text-align: left;
    font-size: 20px;
    margin-bottom: 10px;
    border-bottom: 3px solid #00CBC9;
    display: table;
}

.vinchin-disaster-recovery.solution-feature .sketch-card{
    text-align: center;
}

.vinchin-disaster-recovery.solution-feature .sketch-card .card-image{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 240px;
}

.vinchin-disaster-recovery.solution-feature .sketch-card img{
    max-width: 100%;
    max-height: 240px;
}

.vinchin-disaster-recovery.solution-feature .sketch-card:first-child img{
    position: relative;
    top:-10px;
}

.vinchin-disaster-recovery.solution-feature .sketch-card:last-child img{
    width:90%;
    margin: 0 auto;
}

.vinchin-disaster-recovery.solution-feature p{
    margin-bottom: 10px;
}

.vinchin-disaster-recovery.solution-feature .row{
    margin-top: 30px;
    height: auto;
}

.vinchin-disaster-recovery.solution-feature .row a{
    padding:10px 30px;
    color:#00CBC9;
    border: 1px solid #00CBC9;
    border-radius: 30px;
    position: relative;
    top: 50px;
    margin-bottom: 50px;
}

.vinchin-disaster-recovery.solution-feature .row a i{
    margin-left: 5px;
}

.vinchin-disaster-recovery.solution-feature .row a:hover{
    color:#fff;
    background-color: #00CBC9;
}

.elastic-recovery{
    padding: 70px 0 70px;
    text-align: center;
}

.elastic-recovery h2{
    font-size: 36px;
    font-weight: 500;
    line-height: 48px;
    text-align: center;
    color: #1D1D1D;
    letter-spacing: 0.05em;
    margin-top: 0;
    font-family: Harmonyos-medium;
    margin-bottom: 30px;
}

.elastic-recovery p{
    font-size: 16px;
    line-height: 36px;
    margin:0 auto 30px;
    font-weight: normal;
    font-family: Harmonyos-regular;
}

.elastic-recovery .title-main{
    margin-bottom: 0;
}

.elastic-recovery .row{
    margin-bottom: 30px;
}

.elastic-recovery .row .card{
    width:48%;
    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    border-radius: 15px;
    padding:30px;
    text-align: left;
    float: left;
    height: 240px;
}

.elastic-recovery .row .card:hover{
    background-color: #ECFFFF;
}

.elastic-recovery .row .card:first-child{
    margin-right: 2%;
}

.elastic-recovery .row .card:last-child{
    margin-left: 2%;
}

.elastic-recovery .row .card h3{
    font-family: Harmonyos-medium, sans-serif;
    font-size: 20px;
    margin-bottom: 20px;
    margin-top: 0;
}

.elastic-recovery .row .card img{
    width:100%;
}

.elastic-recovery .row .card p{
    font-size: 14px;
    font-family: Harmonyos-regular;
    font-weight: normal;
    line-height: 24px;
    width:100%;
}

.elastic-recovery .row .card a{
    padding:5px 20px;
    color:#00CBC9;
    border: 1px solid #00CBC9;
    border-radius: 20px;
    float: right;
}

.elastic-recovery .row .card a:hover{
    color:#fff;
    background-color: #00CBC9;
}

.disaster-recovery-backup-protection-type-group{
    border-bottom: 2px solid #DFDFDF;
    overflow: hidden;
    padding-bottom: 10px;
}

.disaster-recovery-backup-protection-type-group .column{
    width:20%;
    float: left;
    border: 2px solid #fff;
    text-align: center;
    padding:10px 30px;
    border-radius: 5px;
    cursor: pointer;
}

.disaster-recovery-backup-protection-type-group .column.active{
    border: 2px solid #00CBC9;
    color:#00CBC9;
}

.disaster-recovery-backup-protection-content .content{
    display: none;
}

.disaster-recovery-backup-protection-content .content.active{
    display: block;
    margin: 30px auto 70px;
    overflow: hidden;
}

.disaster-recovery-backup-protection-content .content div{
    padding: 0;
}

.disaster-recovery-backup-protection-content .content .description{
    background: linear-gradient(180deg, #38D1E9 0%, #BFECEB 100%), rgba(236, 255, 255, 0.5);
    border-radius: 15px;
    overflow: hidden;
    width: 100%;
    color:#fff;
    text-align: left;
    padding:30px;
    position: relative;
    height: 530px;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
}

.disaster-recovery-backup-protection-content .content .description h3{
    font-size: 20px;
    font-family: Harmonyos-medium, sans-serif;
    color:#fff;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.disaster-recovery-backup-protection-content .content .description .white-line{
    background-color: #fff;
    height: 3px;
    border-radius: 5px;
    width:40px;
    margin-bottom: 20px;
}

.disaster-recovery-backup-protection-content .content .description p{
    font-size: 15px;
    line-height: 24px;
    letter-spacing: 2px;
    margin-bottom: 50px;
}

.disaster-recovery-backup-protection-content .content .description img{
    opacity: 0.8;
    width: 80%;
    position: absolute;
    float: right;
    bottom: 0px;
    right: 10px;
}

.disaster-recovery-backup-protection-content .content .solution-group {
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    width: 32%;
    float: left;
    height: auto;
    margin-bottom: 30px;
    overflow: hidden;
    background-color: #fff;
    border: 3px solid #fff;
    position: relative;
}

.disaster-recovery-backup-protection-content .content .solution-group:hover{
    background: url("/res/img/product/vinchin-disaster-recovery/typical-application-background.png") no-repeat;
    background-size: auto;
    background-size: cover;
    border: 3px solid #00CBC9;
}

.disaster-recovery-backup-protection-content .content .solution-group{
    padding:30px;
    width:45%;
    float: left;
}

.disaster-recovery-backup-protection-content .row {
    margin: 0;
    width: calc(100% - 2px);
}

.disaster-recovery-backup-protection-content .row .solution-group{
    height: 250px;
}

.disaster-recovery-backup-protection-content .row .solution-group:first-child{
    margin: 0 3% 0 7%;
}

.disaster-recovery-backup-protection-content .content .solution-group h4 {
    display: flex;
    font-size: 24px;
    line-height: 32px;
    height: 64px;
    font-family: Harmonyos-medium;
    margin: 0px auto 0px;
    align-items: center;
    justify-content: left;
}

.disaster-recovery-backup-protection-content .content .solution-group p {
    font-size: 14px;
    font-family: Harmonyos-regular;
    line-height: 28px;
    text-align: left;
    margin-bottom: 20px;
}

.disaster-recovery-backup-protection-content .content .solution-group a{
    padding: 3px 15px;
    color: #00CBC9;
    border: 1px solid #00CBC9;
    border-radius: 20px;
    position: absolute;
    bottom: 20px;
    right:20px;
}

.disaster-recovery-backup-protection-content .content .solution-group a:hover{
    color:#fff;
    background-color: #00CBC9;
}

.disaster-recovery-backup-protection .pub-text,.disaster-recovery-sketch-map p,.vinchin-disaster-recovery.solution-feature .subtitle,.elastic-recovery p,.content-application .pub-text{
    width: 40%;
}

/*瀹圭伨澶囦唤绯荤粺鏂伴〉闈㈢粨鏉?/

@media (max-width: 414px) {
    .content-safe{
        height: 820px;
    }

    .pub-text{
        margin: 0;
    }

    .content-safe .title-main{
        margin-bottom: 30px !important;
    }
    
    .disaster-recovery-sketch-map{
        padding:30px 0;
    }

    .disaster-recovery-sketch-map h2{
        font-size:18px;
        line-height: 28px;
        margin-bottom: 0;
        padding:0 20px;
    }
    
    .disaster-recovery-sketch-map img{
        padding: 0px 20px;
        margin-top:30px;
    }

    .elastic-recovery{
        padding:30px 0;
    }

    .elastic-recovery h2{
        font-size:18px;
        line-height: 28px;
        margin-bottom: 0;
        padding:0 20px;
    }

    .elastic-recovery img{
        padding: 0px 20px;
        margin-top:10px;
        margin-bottom: 20px;
    }

    .vinchin-disaster-recovery.background1 h1{
        font-size:24px;
    }

    .vinchin-disaster-recovery.background1 p{
        width:90%;
        margin:0 auto 30px;
        font-size:16px !important;
    }

    .vinchin-disaster-recovery.background1 .free-trial-button{
        padding: 3px 15px;
        width: 60%;
        float: left;
        margin: 0 20% 10px;
    }

    .vinchin-disaster-recovery.solution-feature{
        overflow: hidden;
    }

    .vinchin-disaster-recovery.solution-feature .sketch-card{
        width:100%;
        margin: 30px 0;
    }

    .vinchin-disaster-recovery.solution-feature .sketch-card:last-child{
        margin: 30px 0;
    }

    .disaster-recovery-backup-protection-content .row .solution-group{
        width: 100%;
        margin: 30px 0;
    }

    .disaster-recovery-backup-protection-content .row .solution-group:first-child{
        margin: 30px 0;
    }

    .disaster-recovery-backup-protection-type-group .column{
        padding:0;
    }

    .disaster-recovery-backup-protection h2{
        font-size:18px;
    }

    .disaster-recovery-backup-protection .pub-text{
        font-size: 14px;
    }

    .disaster-recovery-backup-protection .pub-text,.disaster-recovery-sketch-map p,.vinchin-disaster-recovery.solution-feature .subtitle,.elastic-recovery p,.content-application .pub-text,.vinchin-disaster-recovery.hypervisor-solution p{
        width: 100%;
    }

    .vinchin-disaster-recovery.hypervisor-solution p{
        font-size: 14px;
    }

    .hypervisor-solution .solution-group h3{
        height: 40px;
    }

    .vinchin-disaster-recovery.hypervisor-solution .solution-group p{
        margin-bottom: 20px;
    }

    .disaster-recovery-sketch-map .card{
        width:100%;
    }

    .disaster-recovery-sketch-map .card, .disaster-recovery-sketch-map .card:nth-child(2),.disaster-recovery-sketch-map .row-list-2 .card:first-child{
        margin: 10px 5% 10px;
        width: 90%;
    }

    .vinchin-disaster-recovery.solution-feature .subtitle{
        margin-bottom: 10px;
    }

    .vinchin-disaster-recovery.solution-feature .sketch-card,.vinchin-disaster-recovery.solution-feature .sketch-card:last-child{
        margin: 10px 5% 10px;
        width: 90%;
    }

    .vinchin-disaster-recovery.solution-feature .sketch-card{
        height: auto;
    }

    .vinchin-disaster-recovery.solution-feature .sketch-card .card-image{
        height: auto;
    }

    .elastic-recovery .row{
        margin-bottom: 0;
        display: grid;
    }

    .elastic-recovery .row .card:last-child,.elastic-recovery .row .card:first-child{
        margin: 0 auto 30px;
    }

    .elastic-recovery .row .card{
        width: 80%;
        text-align: center;
        height: auto;
        display: grid;
    }

    .elastic-recovery .row .card img{
        width: 50%;
    }

    .elastic-recovery .row .card a{
        float: unset;
    }

    .content-application .pub-text{
        font-size: 14px;
        width: 90%;
        margin: 0 auto 30px;
    }

    .jump-band{
        height: auto;
    }

    .jump-band a{
        position: unset;
        transform: unset;
        margin: 10px auto;
        font-size: 16px;
    }
}

/* 绉诲姩绔€傞厤璋冩暣缁撴潫锛?14-360锛 */