.banner {
    width: 100%;
    margin-bottom: 80px;
}

.line-btn {
    position: relative;
    z-index: 9;
    width: 2.33rem;
    height: 0.54rem;
    border: 1px solid #00826b;
    border-radius: 0.27rem;
    line-height: 0.54rem;
    text-align: center;
    margin: 0.24rem auto 0 auto;
    font-weight: 300;
    font-size: 0.24rem;
    cursor: pointer;
    user-select: none;
}
.line-btn a {
    display: block;
    height: 100%;
    color: #00826b;
}
.vr-wrap {
    position: relative;
    transform: translateY(-30px) scale(0.9);
    margin: 40px auto 0 auto;
    background-position: 0 0;
    width: 1550px;
    height: 930px;
}
.vr-wrap .start,
.vr-wrap .going,
.vr-wrap .end {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
}
.vr-wrap .start {
    background-image: url('../../../images/qjyw-start.png');
}
.vr-wrap .going {
    opacity: 0;
    /* background-image: url('../../../images/ydw-yw4.jpg'); */
}
.vr-wrap .going video {
    border: none;
    mix-blend-mode: darken;
}
.vr-wrap .end {
    opacity: 0;
    /* transition: opacity 0.01s 2.5s; */
    background-image: url('../../../images/qjyw-end.png');
}
.vr-wrap.hide-other .going {
     opacity: 1;
    /* animation: vrAnimation 2.53s steps(1);
    animation-fill-mode: both; */
}
.vr-wrap.hide-other .start {
    display: none;
}
.vr-wrap.animation .going {
    display: none;
}
.vr-wrap.animation .end {
    opacity: 1;
}
.card-show-wrap {
    width: 1545px;
    margin: 0 auto;
    padding-top: 40px;
}
.card-show-wrap ul {
    width: 1555px;
    list-style: none;
    overflow: hidden;
}
.card-show-wrap ul li {
    float: left;
    padding-right: 10px;
}
.card-show-wrap ul li {
    visibility: hidden;
}
.card-show-wrap ul li:nth-child(1) {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
.card-show-wrap ul li:nth-child(2) {
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
}
.card-show-wrap ul li:nth-child(3) {
    -webkit-animation-delay: 1.1s;
    animation-delay: 1.1s;
}
.card-show-wrap ul li:nth-child(4) {
    -webkit-animation-delay: 1.4s;
    animation-delay: 1.4s;
}
.card-show-wrap ul li:nth-child(5) {
    -webkit-animation-delay: 1.7s;
    animation-delay: 1.7s;
}
.card-show-wrap ul li:nth-child(6) {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}
.card-show-wrap ul#ythCard li.animation {
    visibility: visible;
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}
.card-show-wrap ul li .item {
    position: relative;
    width: 213px;
    height: 400px;
    overflow: hidden;
    transition: width 300ms;
    cursor: pointer;
}
.card-show-wrap ul li .item .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
    width: 70px;
    height: 70px;
    color: #fff;
    font-size: 70px;
    margin-top: -50px;
}
.card-show-wrap ul li .item .text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
    font-weight: 500;
    color: #ffffff;
    font-size: 24px;
    white-space: nowrap;
    margin-top: 30px;
}
.card-show-wrap ul li .item .mask {
    display: none;
}
.card-show-wrap ul li .item.active .mask p {
    width: 154px;
    font-size: 14px;
    margin-top: 20px;
    line-height: 26px;
}
.card-show-wrap ul li .item.active {
    width: 427px;
}
.card-show-wrap ul li .item.active .mask {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    z-index: 9;
    background: rgba(0, 130, 107, 0.9);
    color: #fff;
    padding: 50px 30px 30px 30px;
}
.card-show-wrap ul li .item.active .mask .title {
    font-weight: 500;
    color: #ffffff;
    font-size: 24px;
    white-space: nowrap;
    text-align: center;
}
.card-show-wrap ul li .item.active .text {
    display: none;
}
.card-show-wrap ul li .item.active .icon {
    left: 25%;
}
.card-show-wrap ul li.list-item img {
    vertical-align: top;
    width: 427px;
    height: 400px;
}
.card-show-tip {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
}
.card-show-tip .card-icon {
    font-size: 60px;
    padding-top: 20px;
}
.card-show-tip .line {
    display: block;
    width: 1px;
    height: 120px;
    transform: scale(0.5);
    margin: 5px 20px 0 20px;
    background: #dddddd;
}
.card-show-tip .text,
.card-show-tip .sub-text {
    display: block;
    font-size: 25px;
}
.card-show-tip .sub-text {
    font-size: 20px;
    margin-top: 5px;
    font-weight: 400;
}

/* 智能配用电管理平台应用典型案例 */
.case-wrap {
    display: inline-block;
    width: 1382px !important;
    margin-left: 5px;
    /* overflow: inherit !important; */
}
.case-wrap li {
    float: left;
    padding-bottom: 10px;
}
.case-wrap li .case-item {
    position: relative;
    cursor: pointer;
    overflow: hidden;
}
.case-wrap li .case-item img {
    width: 450px;
    height: 285px;
}
.case-wrap li:nth-child(4) .case-item img {
    width:766.66px;
    height:298.31px;
}
.case-wrap li:nth-child(5) .case-item img {
    width:593.04px;
    height:298.72px;
}
.case-wrap li .case-item .case-mask {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 9;
    width: 100%;
    height:60px;
    background:linear-gradient(90deg,rgba(0, 0, 0, 0.7) 0%,rgba(0, 0, 0, 0.58) 100%);
    padding: 10px 38px;
    text-align: left;
    transition: height 300ms ease-in-out;
}
.case-wrap li .case-item .case-mask .title {
    position: relative;
    font-weight: 500;
    color:#ffffff;
    font-size:18px;
    transition: font-size 400ms ease-in-out;
}
.case-wrap li .case-item .case-mask .title i {
    position: absolute;
    top: 4px;
    left: -10px;
    display: block;
    width: 4px;
    height: 15px;
    background:#ffac0f;
}
.case-wrap li .case-item .case-mask p {
    height: 20px;
    font-weight: 300;
    color: #cccccc;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: height 400ms ease-in-out;
    font-size: 16px;
    line-height: 24px;
}
.case-wrap li .case-item .case-mask .icon {
    position: absolute;
    bottom: -100px;
    transition: bottom 400ms ease-in-out;
}
.case-wrap li .case-item.active .case-mask {
    height: 100%;
    padding: 30px;
    transition: height 300ms ease-in-out;
}
.case-wrap li .case-item.active .case-mask .title {
    text-align: center;
    font-weight: 500;
    color:#ffffff;
    font-size:24px;
}
.case-wrap li .case-item.active .case-mask .title i {
    display: none;
}
.case-wrap li .case-item.active .case-mask p {
    height: 130px;
    line-height: 25px;
    white-space: break-spaces;
    padding-top: 25px;
    display: -webkit-box;
    display: -moz-box;
    display: -moz-inline-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}
.case-wrap li .case-item.active .case-mask .icon {
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 57px;
    color: #ffffff;
}
/* .card-show-wrap ul#case li {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
} */
.card-show-wrap ul#case li.animation {
    visibility: visible;
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}
/* .card-show-wrap ul#case li:nth-child(1).animation {
    -webkit-animation-name: fadeInTopLeft;
    animation-name: fadeInTopLeft;
}
.card-show-wrap ul#case li:nth-child(2).animation {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}
.card-show-wrap ul#case li:nth-child(3).animation {
    -webkit-animation-name: fadeInTopRight;
    animation-name: fadeInTopRight;
}
.card-show-wrap ul#case li:nth-child(4).animation {
    -webkit-animation-name: fadeInBottomLeft;
    animation-name: fadeInBottomLeft;
}
.card-show-wrap ul#case li:nth-child(5).animation {
    -webkit-animation-name: fadeInBottomRight;
    animation-name: fadeInBottomRight;
} */
/*新闻与咨询*/
.news-wrap {
    width: 1382px;
    margin: 0 auto;
    overflow: hidden;
    padding: 44px 0 80px 0;
}
.news-wrap .news-header {
    overflow: hidden;
    padding-bottom: 10px;
}
.news-wrap .news-header span {
    float: left;
    font-weight: 500;
    color:#333333;
    font-size:24px;
}
.news-wrap .news-header .more {
    float: right;
    color:#999999;
    font-size:16px;
    cursor: pointer;
    padding-top: 12px;
}
.news-wrap .news-header .more:hover {
     color: #00826b;
}
.news-wrap .news-list {
    float: left;
    width: calc(100% - 400px);
    padding-right: 190px;
}
.news-wrap .news-selected {
    float: right;
    width: 400px;
}
.news-wrap .news-list ul {
    list-style: none;
}
.news-wrap .news-list ul li {
    padding: 10px 0 5px 0;
    border-bottom: 1px solid #dddddd;
}
.news-wrap .news-list ul li .news-title {
    overflow: hidden;
}
/* .news-wrap .news-list ul li .news-title .news-flag {
    float: left;
    height: 18px;
    background: #00ceaa;
    line-height: 18px;
    color: #ffffff;
    font-size:12px;
    padding: 0 5px;
    border-radius: 2px;
    margin-top: 3px;
} */
.news-wrap .news-list ul li .news-title .title {
    float: left;
    height: 28px;
    font-weight: 500;
    font-size: 20px;
    cursor: pointer;
}
.news-wrap .news-list ul li .news-title .title a {
    text-decoration: none;
}
.news-wrap .news-list ul li .news-title .title:hover a {
     color: #00826b;
}
.news-wrap .news-list ul li p {
    font-weight:300;
    color:#666666;
    font-size:18px;
    padding-top: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.news-wrap .news-list ul li p a {
    color:#666666;
    text-decoration: none;
}
.news-wrap .news-list ul li .news-msg {
    overflow: hidden;
    color: #cccccc;
    font-size: 12px;
}
.news-wrap .news-list ul li .news-msg span {
    float: left;
    padding: 10px 10px 10px 0;
}
.news-wrap .news-list ul li .news-msg .icon {
    margin-top: 3px;
    font-size: 16px;
}
.news-wrap .news-list ul li .news-msg .time {
    margin-top: 2px;
    font-size: 16px;
}
.news-wrap .news-list ul li .news-msg .author {}

.news-wrap .news-selected ul {
    list-style: none;
    padding-top: 25px;
}
.news-wrap .news-selected ul li {
    padding-bottom: 20px;
}
.news-wrap .news-selected ul li:last-child {
    padding-bottom: 0;
}
.news-wrap .news-selected ul li .img {
    position: relative;
    height: 110px;
    background-repeat: no-repeat;
    background-position: center;
    color: #ffffff;
    font-size: 16px;
    line-height: 30px;
    padding: 26px 60px;
    font-weight: 500;
    cursor: pointer;
}
.news-wrap .news-selected ul li .img p {
    position: relative;
    display: -webkit-box;
    display: -moz-box;
    display: -moz-inline-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    z-index: 99;
    font-size: 18px;
}
.news-wrap .news-selected ul li .img .mask {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    background-color: rgba(0, 0, 0, 0.8);
}
.news-wrap .news-selected ul li .img.noBg {
    background-image: url('/upload/images/2023/8/5ff847c947d95c41.jpg') !important;
}
/* 1920 下 缩放比150% */
@media screen and (max-width: 1920px) and (-webkit-min-device-pixel-ratio: 1.5) {

}
/* 1920 下 缩放比175% */
@media screen and (max-width: 1920px) and (-webkit-min-device-pixel-ratio: 1.75) {

}
/* 1600 下 缩放比125% */
@media screen and (max-width: 1600px) and (-webkit-min-device-pixel-ratio: 1.25) {

}
/* 1600 下 缩放比150% */
@media screen and (max-width: 1600px) and (-webkit-min-device-pixel-ratio: 1.5) {

}
/* 1600 下 缩放比175% */
@media screen and (max-width: 1600px) and (-webkit-min-device-pixel-ratio: 1.75) {

}
@media screen and (max-width: 1600px) {
    .vr-main {
        height: 800px;
        position: relative;
    }
    .vr-wrap {
        transform: translateX(-50%) scale(0.775);
        position: absolute;
        left: 50%;
        bottom: -152px;
    }
    
    .yth-main {
        height: 568px;
        position: relative;
    }
    .yth-main .card-show-wrap {
        transform: translateX(-50%) scale(0.7769);
        position: absolute;
        top: 40px;
        left: 50%;
    }
    .yth-main .card-show-tip {
        transform: translateX(-50%) scale(0.7769);
        position: absolute;
        bottom: -16px;
        left: 50%;
    }

    .al-main {
        height: 1320px;
    }
    .al-main .container-title {
    }
    .al-main .temp-dom {
        position: relative;
        height: 630px;
    }
    .al-main .card-show-wrap {
        position: absolute;
        top: -50px;
        left: 50%;
        transform: translateX(-50%) scale(0.8685);
    }
    .al-main .news-wrap {
        transform: translateY(-62px) scale(0.8685);
    }
    .al-main .news-head {
        transform: translateY(-36px) scale(0.8685);
    }
}
@keyframes vrAnimation {
	0% { background-position: 0px 0px; }
	2.22% { background-position: -1550px 0px; }
	4.44% { background-position: -3100px 0px; }
	6.67% { background-position: 0px -930px; }
	8.89% { background-position: -1550px -930px; }
	11.11% { background-position: -3100px -930px; }
	13.33% { background-position: 0px -1860px; }
	15.56% { background-position: -1550px -1860px; }
	17.78% { background-position: -3100px -1860px; }
	20.00% { background-position: 0px -2790px; }
	22.22% { background-position: -1550px -2790px; }
	24.44% { background-position: -3100px -2790px; }
	26.67% { background-position: 0px -3720px; }
	28.89% { background-position: -1550px -3720px; }
	31.11% { background-position: -3100px -3720px; }
	33.33% { background-position: 0px -4650px; }
	35.56% { background-position: -1550px -4650px; }
	37.78% { background-position: -3100px -4650px; }
	40.00% { background-position: 0px -5580px; }
	42.22% { background-position: -1550px -5580px; }
	44.44% { background-position: -3100px -5580px; }
	46.67% { background-position: 0px -6510px; }
	48.89% { background-position: -1550px -6510px; }
	51.11% { background-position: -3100px -6510px; }
	53.33% { background-position: 0px -7440px; }
	55.56% { background-position: -1550px -7440px; }
	57.78% { background-position: -3100px -7440px; }
	60.00% { background-position: 0px -8370px; }
	62.22% { background-position: -1550px -8370px; }
	64.44% { background-position: -3100px -8370px; }
	66.67% { background-position: 0px -9300px; }
	68.89% { background-position: -1550px -9300px; }
	71.11% { background-position: -3100px -9300px; }
	73.33% { background-position: 0px -10230px; }
	75.56% { background-position: -1550px -10230px; }
	77.78% { background-position: -3100px -10230px; }
	80.00% { background-position: 0px -11160px; }
	82.22% { background-position: -1550px -11160px; }
	84.44% { background-position: -3100px -11160px; }
	86.67% { background-position: 0px -12090px; }
	88.89% { background-position: -1550px -12090px; }
	91.11% { background-position: -3100px -12090px; }
	93.33% { background-position: 0px -13020px; }
	95.56% { background-position: -1550px -13020px; }
	97.78% { background-position: -3100px -13020px; }
	100.00% {
        display: none;
        background-position: 0px -13950px;
    }
}

.font19 .tip-text span{
    font-size: 19px !important;
}
.font20 .tip-text span{
    font-size: 20px !important;
}
.font19 .card-show-wrap ul li .item.active .mask p{
    font-size: 15px !important;
}
.font20 .card-show-wrap ul li .item.active .mask p{
    font-size: 15px !important;
}
.font19 .container-sub-title{
    font-size: 19px !important;
}
.font20 .container-sub-title{
    font-size: 20px !important;
}
.font19 .case-wrap li .case-item .case-mask .title{
    font-size: 19px !important;
}
.font20 .case-wrap li .case-item .case-mask .title{
    font-size: 20px !important;
}
.font19 .case-wrap li .case-item .case-mask p{
    font-size: 19px !important;
}
.font20 .case-wrap li .case-item .case-mask p{
    font-size: 20px !important;
}
.font19 .news-wrap .news-header .more{
    font-size: 19px !important;
}
.font20 .news-wrap .news-header .more{
    font-size: 20px !important;
}
.font19 .news-wrap .news-list ul li .news-title .title{
    font-size: 19px !important;
}
.font20 .news-wrap .news-list ul li .news-title .title{
    font-size: 20px !important;
}
.font19 .news-wrap .news-list ul li p{
    font-size: 19px !important;
}
.font20 .news-wrap .news-list ul li p{
    font-size: 20px !important;
}
.font19 .news-wrap .news-list ul li .news-msg .icon{
    font-size: 19px !important;
}
.font20 .news-wrap .news-list ul li .news-msg .icon{
    font-size: 20px !important;
}
.font19 .news-wrap .news-list ul li .news-msg .time{
    font-size: 19px !important;
}
.font20 .news-wrap .news-list ul li .news-msg .time{
    font-size: 20px !important;
}
.font19 .news-wrap .news-selected ul li .img p{
    font-size: 19px !important;
}
.font20 .news-wrap .news-selected ul li .img p{
    font-size: 20px !important;
}