/*页面响应式*/
/*超小设备（小于 576px）col*/
@media (max-width: 575.98px) {
    /*首页背景图片底部为平整*/
    .firstScreen{
        background-image: url("../img/video/firsttScreen.png");
        background-size: cover;
        -webkit-background-size: cover;
        background-position: center 0;
    }
    .redBoxFont{
        font-size: 11px;
    }
    .whiteFont{
        font-size: 30px;
        text-align: center;
    }
    .redFont{
        font-size: 16px;
        text-align: center;
    }
    .redFontPadding{
        padding-top: 0%;
    }
    .ashFont{
        font-size: 14px;
        line-height: 22px;
    }
    .ashFontPadding{
        padding-top: 10%;
    }
    .redBtn{
        width: 118px;
        height: 32px;
        font-size: 12px;
    }
    .btnPadding{
        display: none;
    }
    .redBoxSize{
        width: 46%;
    }
    .titleBlackFont{
        font-size: 1.7rem;
    }
    .titleFontPadding{
        padding: 10% 0 5% 0;
    }
    .cardPadding{
        padding: 12px 24px!important;
    }
    .whiteRedBox{
        padding: 24px 35px;
    }
    .whiteRedBoxTitle{
        font-size: 1.375rem;
    }
    .whiteRedBoxContent{
        font-size: 1rem;
    }
    .whiteRedBoxPadding{
        padding: 9% 0 3% 0;
    }
    .sceneRow{
        padding-bottom: 12px;
    }
    .scenePadding{
        text-align: center;
        padding:12px 24px!important;
    }
    .sceneWhiteFont{
        position: relative;
        bottom: 3.3rem;
        font-size: 30px;
        right: 24px;
    }
    .computerPadding{
        margin-bottom:-1.5rem;
    }
    .firstPadding{
        padding: 24px 24px 50px 24px;
    }
    .meetRedBox{
        padding-top: 16%;
        padding-bottom: 5%;
    }
    .whiteBoard{
        display: none;
    }
    .cardBox{
        padding:10px 24px 35px 24px;
    }
    .cardContentFont{
        font-size: 0.9rem;
    }
    .cardTitleFont{
        font-size: 1.625rem;
    }
    .cardTitlePadding{
        padding-bottom: 10px;
    }
}
/*小型设备（576px-767px）col-sm*/
@media (min-width: 576px) and (max-width: 767.98px){
    /*首页背景图片底部为平整*/
    .firstScreen{
        background-image: url("../img/video/firsttScreen.png");
        background-size: cover;
        -webkit-background-size: cover;
        background-position: center 0;
    }
    .redBoxFont{
        font-size: 11px;
    }
    .whiteFont{
        text-align: center;
        font-size: 33px;
    }
    .redFont{
        text-align: center;
        font-size: 18px;
    }
    .redFontPadding{
        padding-top: 2%;
    }
    .ashFont{
        font-size: 14px;
        line-height: 24px;
    }
    .ashFontPadding{
        padding-top: 10%;
    }
    .redBtn{
        width: 124px;
        height: 36px;
        font-size: 13px;
    }
    .btnPadding{
        display: none;
    }
    .redBoxSize{
        width: 46%;
    }
    .titleBlackFont{
        font-size: 1.7rem;
    }
    .titleFontPadding{
        padding: 4% 0 2% 0;
    }
    .cardPadding{
        padding: 12px 24px!important;
    }
    .whiteRedBox{
        padding: 50px;
    }
    .whiteRedBoxContent{
        font-size: 12px;
    }
    .whiteRedBoxPadding{
        padding: 8% 0 3% 0;
    }
    .sceneRow{
        padding-bottom: 12px;
    }
    .scenePadding{
        text-align: center;
        padding:12px 24px!important;
    }
    .sceneWhiteFont{
        position: relative;
        bottom: 4.5rem;
        font-size: 38px;
    }
    .computerPadding{
        margin-bottom:-1.5rem;
    }
    .firstPadding{
        padding: 24px 24px 50px 24px;
    }
    .meetRedBox{
        padding-top: 10%;
        padding-bottom: 5%;
    }
    .whiteBoard{
        display: none;
    }
    .cardBox{
        padding:10px 50px 35px 50px;
    }
    .cardContentFont{
        font-size: 18px;
    }
    .cardTitlePadding{
        padding-bottom: 10px;
    }
    .brShow{
        display: none;
    }
}
/*中型设备（768px-991px）col-md*/
@media (min-width: 768px) and (max-width: 991.98px) {
    /*首页背景图片底部为凹陷*/
    .firstScreen{
        background-image: url("../img/video/firstScreen.png");
        background-size: cover;
        -webkit-background-size: cover;
        background-position: center 0;
    }
    .firstPadding{
        padding: 24px 24px 50px 24px;
    }
    .meetRedBox{
        padding-top: 10%;
        padding-bottom: 5%;
    }
    .whiteFont{
        font-size: 36px;
    }
    .whiteFontPadding{
        padding-top: 6%;
    }
    .redFont{
        font-size: 20px;
    }
    .redFontPadding{
        padding-top: 2%;
    }
    .ashFont{
        font-size: 13px;
        line-height: 22px;
    }
    .ashFontPadding{
        padding-top: 10%;
    }
    .redBoxSize{
        width: 46%;
    }
    .redBoxFont{
        font-size: 11px;
    }
    .redBtn{
        width: 130px;
        height: 38px;
        font-size: 14px;
    }
    .btnPadding{
        padding-top: 8%;
    }
    .meetRedBox{
        padding-top: 60%;
        padding-bottom: 4%;
    }
    .titleBlackFont{
        font-size: 1.7rem;
    }
    .titleFontPadding{
        padding: 7% 0 5% 0;
    }
    .cardPadding{
        padding: 10px!important;
    }
    .whiteRedBox{
        padding: 25px 50px;
    }
    .whiteRedBoxContent{
        font-size: 12px;
    }
    .whiteRedBoxPadding{
        padding: 10% 0 4% 0;
    }
    .sceneRow{
        padding-bottom: 12px;
    }
    .scenePadding{
        text-align: center;
        padding:12px!important;
    }
    .sceneWhiteFont{
        position: relative;
        bottom: 3.5rem;
        font-size: 30px;
    }
    .computerPadding{
        margin-bottom:-1.5rem;
    }
    .rowRight{
        position: relative;
        right: -20px;
        bottom: 98px;
    }
    .redBoxFontPadding{
        padding-top: 4%;
    }
    .whiteBoard{
        display: none;
    }
    .cardBox{
        padding:10px 50px 35px 50px;
    }
    .cardContentFont{
        font-size: 18px;
    }
    .cardTitlePadding{
        padding-bottom: 10px;
    }
    .brShow{
        display: none;
    }
}
/*大型设备（992px-1199px）col-lg*/
@media (min-width: 992px) and (max-width: 1199.98px) {
    /*首页背景图片底部为凹陷*/
    .firstScreen{
        background-image: url("../img/video/firstScreen.png");
        background-size: cover;
        -webkit-background-size: cover;
        background-position: center 0;
    }
    .whiteFont{
        font-size: 38px;
    }
    .whiteFontPadding{
        padding-top: 10%;
    }
    .redFont{
        font-size: 22px;
    }
    .redFontPadding{
        padding-top: 3%;
    }
    .ashFont{
        font-size: 14px;
        line-height: 23px;
    }
    .ashFontPadding{
        padding-top: 6%;
    }
    .redBoxSize{
        width: 46%;
    }
    .redBoxFont{
        font-size: 14px;
    }
    .redBtn{
        width: 136px;
        height: 40px;
        font-size: 15px;
    }
    .btnPadding{
        padding-top: 12%;
    }
    .meetRedBox{
        padding-top: 15%;
        padding-bottom: 4%;
    }
    .titleBlackFont{
        font-size: 1.7rem;
    }
    .titleFontPadding{
        padding: 4% 0 3% 0;
    }
    .cardTitleFont{
        font-size: 20px;
    }
    .cardPadding{
        padding: 5px!important;
    }
    .sceneRow{
        padding-bottom: 130px;
    }
    .scenePadding{
        text-align: center;
        padding:0 6px!important;
    }
    .sceneWhiteFont{
        position: relative;
        bottom: 2.8rem;
        font-size: 30px;
    }
    .computerPadding{
        margin-bottom:-1.5rem;
    }
    .whiteBoard{
        display: none;
    }
    .whiteRedBoxContent{
        font-size: 12px;
    }
    .whiteRedBoxPadding{
        padding: 10% 0 5% 0;
    }
    .whiteRedBox{
        padding: 20px;
    }
    .cardBox{
        padding:10px 50px 35px 50px;
    }
    .cardContentFont{
        font-size: 18px;
    }
    .cardTitlePadding{
        padding-bottom: 10px;
    }
    .brShow{
        display: none;
    }
}
/*超大型设备（1200px-1440px）col-xl*/
@media (min-width: 1200px) and (max-width: 1439.98px) {
    /*首页背景图片底部为凹陷*/
    .firstScreen{
        background-image: url("../img/video/firstScreen.png");
        background-size: cover;
        -webkit-background-size: cover;
        background-position: center 0;
    }
    .whiteFont{
        font-size: 36px;
    }
    .whiteFontPadding{
        padding-top: 10%;
    }
    .redFont{
        font-size: 20px;
    }
    .redFontPadding{
        padding-top: 5%;
    }
    .ashFont{
        font-size: 14px;
        line-height: 22px;
    }
    .ashFontPadding{
        padding-top: 5%;
    }
    .redBoxSize{
        width: 46%;
    }
    .redBoxFont{
        font-size: 13px;
    }
    .redBtn{
        width: 142px;
        height: 42px;
        font-size: 16px;
    }
    .btnPadding{
        padding-top: 15%;
    }
    .meetRedBox{
        padding-top: 25%;
        padding-bottom: 5%;
    }
    .titleBlackFont{
        font-size: 1.7rem;
    }
    .titleFontPadding{
        padding: 7% 0 5% 0;
    }
    .cardPadding{
        padding: 5px!important;
    }
    .whiteRedBox{
        padding: 26px;
    }
    .whiteRedBoxTitle{
        font-size: 20px;
    }
    .whiteRedBoxContent{
        font-size: 13px;
    }
    .whiteRedBoxPadding{
        padding: 15% 0 5% 0;
    }
    .whiteBoardPadding{
        padding-top: 0.5rem;
    }
    .sceneRow{
        padding-bottom: 130px;
    }
    .scenePadding{
        text-align: center;
        padding:0 6px!important;
    }
    .sceneWhiteFont{
        position: relative;
        bottom: 3.6rem;
        font-size: 32px;
    }
    .computerPadding{
        margin-bottom:-1.5rem;
    }
    .rowRight{
        position: relative;
        right: -50px;
    }
    .cardBox{
        padding: 5px 25px 20px 25px
    }
    .cardContentFont{
        font-size: 14px;
    }
    .cardTitleFont{
        font-size: 22px;
    }
    .cardTitlePadding{
        padding-bottom: 10px;
    }
    .brShow{
        display: none;
    }
}
/*1440显示器*/
@media (min-width: 1440px) and (max-width: 1919.98px){
    /*首页背景图片底部为凹陷*/
    .firstScreen{
        background-image: url("../img/video/firstScreen.png");
        background-size: cover;
        -webkit-background-size: cover;
        background-position: center 0;
    }
    .whiteFont{
        font-size: 45px;
    }
    .whiteFontPadding{
        padding-top: 15%;
    }
    .redFont{
        font-size: 24px;
    }
    .redFontPadding{
        padding-top: 5%;
    }
    .ashFont{
        font-size: 14px;
        line-height: 22px;
    }
    .ashFontPadding{
        padding-top: 10%;
    }
    .redBoxSize{
        width: 46%;
    }
    .redBoxFont{
        font-size: 13px;
    }
    .redBtn{
        width: 148px;
        height: 48px;
        font-size: 16px;
    }
    .btnPadding{
        padding-top: 20%;
    }
    .meetRedBox{
        padding-top: 25%;
        padding-bottom: 5%;
    }
    .titleBlackFont{
        font-size: 1.7rem;
    }
    .titleFontPadding{
        padding: 7% 0 5% 0;
    }
    .cardTitlePadding{
        padding-bottom: 0;
    }
    .cardPadding{
        padding: 5px!important;
    }
    .whiteRedBox{
        padding: 30px;
    }
    .whiteRedBoxTitle{
        font-size: 20px;
    }
    .whiteRedBoxContent{
        font-size: 13px;
    }
    .whiteRedBoxPadding{
        padding: 12% 0 4% 0;
    }
    .sceneRow{
        padding-bottom: 130px!important;
    }
    .scenePadding{
        text-align: center;
        padding:0 6px!important;
    }
    .sceneWhiteFont{
        position: relative;
        bottom: 3.6rem;
        font-size: 32px;
    }
    .computerPadding{
        margin-bottom:-3.5rem;
    }
    .rowRight{
        position: relative;
        right: -50px;
    }
    .redBoxFontPadding{
        padding-top: 4%;
    }
    .whiteBoardPadding{
        padding-top: 1rem;
    }
    .cardBox{
        padding:10px 25px 25px 25px;
    }
    .cardContentFont{
        font-size: 15px;
    }
    .brShow{
        display: none;
    }
}
/*1920显示器以上*/
@media (min-width: 1920px){
    /*首页背景图片底部为凹陷*/
    .firstScreen{
        background-image: url("../img/video/firstScreen.png");
        background-size: cover;
        -webkit-background-size: cover;
        background-position: center 0;
    }
    .whiteFont{
        font-size: 48px;
    }
    .whiteFontPadding{
        padding-top: 20%;
    }
    .redFont{
        font-size: 24px;
    }
    .redFontPadding{
        padding-top: 5%;
    }
    .ashFont{
        font-size: 14px;
        line-height: 30px;
    }
    .ashFontPadding{
        padding-top: 13%;
    }
    .redBoxSize{
        width: 40%;
    }
    .redBoxFont{
        font-size: 14px;
    }
    .redBtn{
        width: 142px;
        height: 42px;
        font-size: 16px;
    }
    .btnPadding{
        padding-top: 16%;
    }
    .meetRedBox{
        padding-top: 20%;
        padding-bottom: 5%;
    }
    .titleBlackFont{
        font-size: 1.7rem;
    }
    .titleFontPadding{
        padding: 7% 0 5% 0;
    }
    .cardTitlePadding{
        padding-bottom: 10px;
    }
    .cardPadding{
        padding: 5px!important;
    }
    .whiteRedBox{
        padding: 50px;
    }
    .whiteRedBoxTitle{
        font-size: 22px;
    }
    .whiteRedBoxContent{
        font-size: 16px;
    }
    .whiteRedBoxPadding{
        padding: 15% 0 7% 0;
    }
    .sceneRow{
        padding-bottom: 130px;
    }
    .scenePadding{
        text-align: center;
        padding:0 6px!important;
    }
    .sceneWhiteFont{
        position: relative;
        bottom: 4rem;
        left: -6px;
        font-size: 32px;
    }
    .computerPadding{
        margin-bottom:-3.5rem;
    }
    .rowRight{
        position: relative;
        right: -70px;
    }
    .redBoxFontPadding{
        padding-top: 8%;
    }
    .whiteBoardPadding{
        padding-top: 3.5rem;
    }
    .cardBox{
        padding:10px 50px 35px 50px;
    }
    .cardContentFont{
        font-size: 18px;
    }
    .brShow{
        display: none;
    }
}
/*页面样式*/
.whiteBoard{
    width: 67%;
    position: absolute;
}
.whiteFont{
    font-weight: bold;
    font-family: Source Han Sans CN;
    color: #FFFFFF;
    opacity: 0.97;
}
.redFont{
    font-family: San Francisco Display;
    font-weight: bold;
    color: #FF635B;
}
.redBoxFont{
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFFFF;
    opacity: 0.65;
}
.ashFont{
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFFFF;
    opacity: 0.4;
}
.redBtn{
    cursor: pointer;
    color: #FFFFFF;
    background: linear-gradient(180deg, #FF6760 0%, #FF3A30 100%);
    border-radius: 24px;
    border: 0px solid;
}
.redBtn:hover{
    background: linear-gradient(180deg, #FF6760 0%, #FF6760 100%);
}
.redBtn:active{
    opacity: 0.8;
}
.titleBlackFont{
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #1E1E1E;
}
.cardTitleFont{
    text-align: center;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FF635B;
}
.cardContentFont{
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 28px;
    opacity: 0.9;
}
.sceneWhiteFont{
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #FFFFFF;
}
.meetRedBox{
    text-align: center;
}
.cardBox{
    background: linear-gradient(0deg, #27313D 0%, #3C4C5E 100%);
    border-radius: 10px;
    height: 100%;
}
.whiteRedBoxTitle{
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #1E1E1E;
    line-height: 8px;
}
.whiteRedBoxContent{
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #1E1E1E;
    line-height: 22px;
    opacity: 0.6;
}

.sceneWhitePadding{
    position: absolute!important;
    width: 100%;
}
/*滚动条消失*/
.overflowShow{
    overflow-y:hidden;
    overflow-x:hidden;
}
