/*LOADING*/ /*.loading { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 99999; background-color: #b51b13; } .loader { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -mos-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default; } .line { border-bottom: 5px solid #f2f2f2; overflow: hidden; width: 100%; -webkit-animation: line 2s ease-in-out infinite; -moz-animation: line 2s ease-in-out infinite; -mos-animation: line 2s ease-in-out infinite; -o-animation: line 2s ease-in-out infinite; animation: line 2s ease-in-out infinite; color: #f2f2f2; font-size: 4em; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.1), 0 3px 5px rgba(0,0,0,.1), 0 5px 10px rgba(0,0,0,.1), 0 10px 10px rgba(0,0,0,.1), 0 20px 20px rgba(0,0,0,.15); box-shadow: inset 0px -5px 10px -7px rgba(0,0,0,0.75), inset 0px 5px 10px -7px rgba(0,0,0,0.75); } .cap { position: absolute; left: -1px; height: 100%; border-bottom: 5px solid #403833; -webkit-animation: cap 2s ease-in-out infinite; -moz-animation: cap 2s ease-in-out infinite; -mos-animation: cap 2s ease-in-out infinite; -o-animation: cap 2s ease-in-out infinite; animation: cap 2s ease-in-out infinite; background: #403833; }*/ .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 {} .conrp #owl-demo .item .banry{ position: absolute; width:100%; top:20%; left:0; z-index: 100; color: #FFF;} .conrp #owl-demo .item .banry .main{ } .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:20%; 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(../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, %100 { bottom:45px; opacity: 1; } 50% { bottom:45px; opacity: .5 } } @-webkit-keyframes arrow { %0, %100 { bottom:25px; opacity: 1; } 50% { bottom:45px; opacity: .5; } }