.scene { width: 100%; transform: translatey(var(--translatey)); will-change: transform;} /*banner*/ .conrp { width: 100%; overflow: hidden; position: relative; } .conrp #owl-demo { width: 100%; margin-left: auto; margin-right: auto; position: relative; } .conrp #owl-demo .item { width: 100%; display: block; position: relative; height: auto; overflow: hidden; } .conrp #owl-demo .item img { width: 100%; display: block; vertical-align: top; } .conrp #owl-demo .item .pcimg { width: 100%; height: auto; display: block; } .conrp #owl-demo .item .moimg { width: 100%; height: auto; display: none; } .conrp #owl-demo .active .item img { animation: mobileburns 30s infinite;} .conrp #owl-demo .item .banry{ position: absolute; width:100%; top:35%; left:0; z-index: 100; color: #fff;} .conrp #owl-demo .item .banry .main{ text-shadow: 3px 0 10px rgba(22, 78, 145, 0.4); color:#fff;} .conrp #owl-demo .item .banry .main dt{ width: 100%; overflow:hidden; display:block; font-style:normal; transform: translatex(60px); opacity: 0;} .conrp #owl-demo .active .item .banry .main dt{ transition: all 2s ease 1.2s; transform: translatex(0); opacity: 1;} .conrp #owl-demo .item .banry .main dd{ width: 100%; overflow:hidden; transform: translatex(70px); opacity: 0;} .conrp #owl-demo .active .item .banry .main dd{ transition: all 2s ease 1.3s; transform: translatex(0); opacity: 1;} .conrp #owl-demo .item .banry .main .moreb{ width: 100%; overflow:hidden; transform: translatex(80px); opacity: 0;} .conrp #owl-demo .active .item .banry .main .moreb{ transition: all 2s ease 1.4s; transform: translatex(0); opacity: 1;} .conrp #owl-demo .item .banry.ban1 .main dt span, .conrp #owl-demo .item .banry.ban1 .main dd span{ margin-left:1em;} .conrp #owl-demo .item .banry.ban2 .main dt span, .conrp #owl-demo .item .banry.ban2 .main dd span{ margin-left:1em;} .conrp #owl-demo .item .banry.ban5 .main dt span, .conrp #owl-demo .item .banry.ban5 .main dd span{ margin-left:1em;} .conrp .owl-pagination { width: 100%; overflow: hidden; position: absolute; left: 0; bottom: 16%; text-align: center; display: block; } .conrp .owl-page { display: inline-block; width: 16px; height: 16px; margin: 0 8px; background: #fff; *display: inline; *zoom: 1; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%;} .conrp .owl-page.active { background: #b51b13; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%;} .conrp .owl-buttons{ display:none;} .conrp .scroll_wrapper{ width: 100%; position: absolute; bottom: 1%; left: 0; z-index: 100; opacity: 1; animation: arrow 3s cubic-bezier(0.5, 0, 0.1, 1) infinite; -webkit-animation: arrow 3s cubic-bezier(0.5, 0, 0.1, 1) infinite;} .conrp .scroll_wrapper .scroll_img{ width:2%; margin:0 auto; cursor: pointer;} .conrp .scroll_wrapper:hover { animation:none; -webkit-animation: none;} } @media screen and (max-width: 1350px) and (min-width:0) { .conrp .owl-page { width: 12px; height: 12px; margin: 0 5px;} .cpzs_bo .owl-page, .news_img .owl-page { width: 12px; height: 12px; margin: 0 5px;} .cpzs_bo .owl-page.active, .news_img .owl-page.active { width: 48px; height: 12px; border-radius: 12px; -moz-border-radius: 12px; -webkit-border-radius: 12px;} / } @media screen and (max-width: 1250px) and (min-width:0) { .conrp .owl-page { width: 10px; height: 10px; margin: 0 4px;} .cpzs_bo .owl-page, .news_img .owl-page { width: 10px; height: 10px; margin: 0 4px;} .cpzs_bo .owl-page.active, .news_img .owl-page.active { width: 46px; height: 10px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;} } /*wap*/ @media screen and (max-width: 1024px) and (min-width:0) { .scene { position:inherit; transform:none; will-change:inherit;} /*banner*/ .conrp{ margin-top:0rem;} .conrp #owl-demo .item .pcimg { display: none; } .conrp #owl-demo .item .moimg { display: block; } .conrp #owl-demo .item .banry .main{ text-align:center;} .conrp #owl-demo .item .banry .main .moreb .fl{ margin:0 auto; float:none;} .conrp .owl-page { width: 10px; height: 10px; margin: 0 5px; } .conrp .owl-pagination { bottom: 10px;} .conrp .scroll_wrapper{ display:none;} } @media screen and (max-width: 768px) and (min-width:0) { .conrp #owl-demo .item .banry{ position: absolute; width:100%; top:25%; left:0; z-index: 100; color: #fff;} /*我们的优势*/ .youshi_bo.f18{ font-size:0.25rem;} .news_img #owl-demo .item dt{ width:100%; float:none;} .news_img #owl-demo .item dd{ width:100%; overflow:hidden; position:absolute; right:0; top:auto; bottom:0; text-align:center; background:url(/uploads/image/b/image/hy.png) repeat;} .news_img #owl-demo .item dd a.f20{ width:90%; margin:0 auto; height:0.45rem; line-height:0.45rem; color:#fff;} .news_img #owl-demo .item dd p{ display:none;} .news_img .owl-pagination { width:100%; overflow: hidden; position: absolute; right: 0; bottom: 0; display: block; text-align:center;} .news_txt li{ width:100%;} .news_txt li:nth-of-type(odd) { float:none; } .news_txt li:nth-of-type(even) { float:none; } .news_txt li p a.f20{ font-weight:bold; height:auto; line-height:normal;} .news_txt li .lihe32{ height:1.2rem; overflow:hidden; line-height:1.8;} } @media screen and (max-width: 481px) and (min-width:0) { .conrp #owl-demo .item .banry{ top:15%;} .conrp #owl-demo .item .banry span{ display:block;} .conrp #owl-demo .item .banry.ban1 .main dt span, .conrp #owl-demo .item .banry.ban1 .main dd span{ margin-left:0;} .conrp #owl-demo .item .banry.ban2 .main dt span, .conrp #owl-demo .item .banry.ban2 .main dd span{ margin-left:0;} .conrp #owl-demo .item .banry.ban5 .main dt span, .conrp #owl-demo .item .banry.ban5 .main dd span{ margin-left:0;} /*cpzs*/ .cpzs_bo #owl-demo .item dt, .cpzs_bo #owl-demo .item dd{ width: 100%;} } @media screen and (max-width: 320px) and (min-width:0) { } /* animation */ @keyframes mobileburns { 5% { transform: scale3d(1, 1, 1) translate3d(0px, 0px, 0px); animation-timing-function: ease-in; } 65% { transform: scale3d(2.5, 2.5, 2.5) translate3d(-100px, -30px, 0px); animation-timing-function: ease-in; } 80% { transform: scale3d(2.5, 2.5, 2.5) translate3d(-100px, -30px, 0px); animation-timing-function: ease-in; } 100% { transform: scale3d(1, 1, 1) translate3d(0px, 0px, 0px); animation-timing-function: ease-in; } } @keyframes circleprogressload_right { 0% { transform: rotate(45deg); } 50%, 100% { transform: rotate(225deg); } } @keyframes circleprogressload_left { 0%, 50% { transform: rotate(45deg); } 100% { transform: rotate(225deg); } } @-webkit-keyframes to100vh { 0% { width: 0 } 100% { width: 100vw } } @keyframes to100vh { 0% { width: 0 } 100% { width: 100vw } } @keyframes arrow { %0, 0 { bottom:45px; opacity: 1; } 50% { bottom:45px; opacity: .5 } } @-webkit-keyframes arrow { %0, 0 { bottom:25px; opacity: 1; } 50% { bottom:45px; opacity: .5; } }