/* ====================第三款产品详情样式========================= */
.proenban{width: 100%;overflow: hidden;}
.proenban-bg{width: 100%;object-fit: cover;min-height: 900px;}
.proenban-wd{width: 100%;position: absolute;top: 120px;left: 0;z-index: 2;text-align: center;}
.proenban-wdft{width: 100%;}
.proenban-wdft h6, .proenban-wdft h1{font-size: 52px;color: #f7f7f7;font-weight: 400;opacity: 0;animation: proenbanUp 1s ease both 200ms;}
.proenban-wdft p{font-size: 20px;color: #f7f7f7;opacity: 0;animation: proenbanUp 1s ease both 400ms;margin: 14px 0 28px;}
.proenban-wdft .protplay{float: none;margin: 0 auto;width: 138px;animation: proenbanUp 1s ease both 600ms;line-height: normal;}
@keyframes proenbanUp{0%{opacity: 0;transform: translateY(-20px);}100%{opacity: 1;transform: translateY(0);}}
.proenban-wdimg{width: 100%;margin-top: 30px;animation: proenbanDown 1s ease both 800ms;opacity: 0;}
.proenban-wdimg img{max-width: 100%;}
@keyframes proenbanDown{0%{opacity: 0;transform: translateY(80px);}100%{opacity: 1;transform: translateY(0);}}
.proenicon{width: 100%;overflow: hidden;background: #2266cb;padding: 64px 4%;text-align: center;font-size: 0;}
.proenicon li{display: inline-block;vertical-align: top;margin: 0 44px;text-align: center;width: 150px;}
.proenicon-img{width: 100%;height: 50px;line-height: 50px;}
.proenicon-img img{width: auto;}
.proenicon li p{font-size: 18px;color: #fff;line-height: 24px;font-weight: 400;margin-top: 32px;}

.proenbk{width: 100%;padding: 90px 4% 100px;overflow: hidden;position: relative;background: linear-gradient(to bottom,#fff,#e6ebf3);}
.proenbg{width: 100%;padding: 90px 4% 100px;overflow: hidden;position: relative;background-repeat: no-repeat !important;background-size: cover !important;background-position: center !important;}
.proen-title{text-align: center;width: 760px;margin: 0 auto;}
.proen-title h6, .proen-title h1{font-size: 42px;color: #333;font-weight: 700;line-height: 1.2em;}
.proen-title p{font-size: 18px;color: #888;margin: 20px auto 0;line-height: 24px;}
.proen-img{width: 100%;text-align: center;margin-top: 42px;}
.proen-img img{max-width: 100%;}
.proen-title-white h6, .proen-title-white h1, .proen-title-white p{color: #fff;}
.proeninst li{display: inline-block;vertical-align: middle;margin: 0 82px;}
.proeninst li img{max-width: 100%;}
.proeninst li p{font-size: 28px;color: #666;font-weight: 700;margin-top: 44px;}
.proentable .proocs-tit h6, .proentable .proocs-tit h1{font-weight: 700;}
#hubble-canvas{position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 1;}
.proenfast .proen-title, .proenfast .proen-img{position: relative;z-index: 3;}
.proencur-img{transition: all .4s linear 0s;}


/* -------------------------PC端--------------------------- */
@media all and (max-width:1700px) {
    /* 1600 × (900/1024/1200) */
}

@media all and (max-width:1599px) {
    /* 1440 × (900/1050) */
    .proenban-wdft h6, .proenban-wdft h1{font-size: 42px;}
    .proenban-bg {min-height: 844px;}
    .proenicon li {margin: 0 28px;}
    .proenicon li p{margin-top: 24px;}
    .proenicon {padding: 50px 4%;}
    .proen-title h6, .proen-title h1 {font-size: 34px;}
    .proeninst li {margin: 0 40px;}
    .proencur-img img{max-width: 80%;width: auto;}
}

@media all and (max-width:1439px) {
    /* 1360 × (768) */
    .proenicon li {margin: 0 24px;}
}

@media all and (max-width:1359px) {
    /* 1280 × (800/854/1024) */
    .proenicon li {margin: 0 20px;}
    .proenbk, .proenbg{padding: 68px 4% 80px;}
    .proenban-wdft h6, .proenban-wdft h1 {font-size: 36px;}
    .proenban-wdft p {font-size: 18px;margin: 12px 0 24px;}
    .proenban-bg {min-height: 820px;}
    .proenicon li p {font-size: 16px;line-height: 20px;margin-top: 18px;}
    .proenicon {padding: 40px 4%;}
    .proen-title h6, .proen-title h1 {font-size: 28px;}
    .proen-title p {font-size: 16px;margin: 14px auto 0;line-height: 22px;}
    .proeninst li {margin: 0 1%;width: 46%;}
    .proeninst li p {font-size: 24px;margin-top: 36px;}
}

@media all and (max-width:1279px) {
    /* 1152 × (864) */
    .proenicon li {margin: 16px 0;width: 33.3333%;}
    .proenicon {padding: 34px 4%;}
}

@media all and (max-width:1151px) {
    /* 1024 × (600/768) */
    .proenban-wd{top: 100px;}
}


/* ------------------------手机端-------------------------- */
@media all and (max-width:1000px) {
    /* 平板设备 720 适配 */
    .proen-title{width: 100%;}
    .proencur-img img {max-width: 100%;}
    #hubble-canvas{display: none;}
}
@media all and (max-width:640px) {
    /* 移动终端以上 360 适配 */
    .proenban-wdft h6, .proenban-wdft h1 {font-size: 26px;}
    .proenban-wdft p {font-size: 16px;margin: 10px 0 18px;}
    .proenban-wd{padding: 0 4%;top: 72px;}
    .proenban-wdimg img{height: 280px;}
    .proenban-bg {min-height: 550px;}
    .proenicon li{width: 50%;}
    .proenicon {padding: 24px 4%;}
    .proen-title h6, .proen-title h1 {font-size: 22px;}
    .proenbk, .proenbg {padding: 36px 4% 40px;}
    .proen-img {margin-top: 32px;}
    .proeninst li p {font-size: 18px;margin-top: 20px;}
}