body{ font-size:16px; background:#f3f3f3;font-family: "MicroSoft YaHei"; color: #333;} .img{display:block} img{max-width:100%} *{margin:0px; padding:0px;} div,table,td{margin: 0px;padding: 0px;} ul,li{ list-style:none} img, a img,textarea {border: 0; } a{ text-decoration:none; color:#333} a:focus {outline: none;} input,textarea{font-family: Arial;outline: none;} input[type="submit"], input[type="reset"], input[type="button"], button {-webkit-appearance: none;} ::-webkit-scrollbar/*整体部分*/ {width:0px;height:0px;} ::-webkit-scrollbar-track/*滑动轨道*/ {-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0);border-radius: 0px;background: rgba(0,0,0,0);} ::-webkit-scrollbar-thumb/*滑块*/ {border-radius: 5px;-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0);background: rgba(0,0,0,0);} ::-webkit-scrollbar-thumb:hover/*滑块效果*/ {border-radius: 5px;-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0);background: rgba(0,0,0,0);} img,a img{border:0} em,i{font-style: normal;} a,button,input,textarea,dl,dt,dd,li,div{-webkit-tap-highlight-color:rgba(255,0,0,0);} input:-moz-placeholder,textarea:-moz-placeholder {color: #888;} input:-ms-input-placeholder,textarea:-ms-input-placeholder {color: #888;} input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {color: #888;} input, input[type="text"], textarea,button, input[type="email"], input[type="search"], input[type="password"] { -webkit-appearance: none; -moz-appearance: none; /* mobile firefox too! */ } .bg{ width: 100%; height: 100%; position: fixed; z-index: -1;} .bg img{ display: block; width: 100%; height: 100%} .bg01{ width: 100%; height: 100%; position: fixed; z-index: 0; background: #02154c} .main{ width: 100%; overflow: hidden; position: relative;} .date_div{ position: absolute; left: 0; color: #fff; font-size: 1.15rem} .date_div .date{ padding: 1vw} .date_div time{ font-size: 1.7rem; padding: 0 0.5vw} .date_div img{ width: 200px; display: block;} .left01{ width: 76%; background-color: rgba(255,255,255,.0); padding: 1% 0 0; float: left;} .tit{ color: #fff; width: 100%; text-align: center; padding-top: 1.5vw} .tit_div{ width: 76%;} .tit h1{ font-size: 2.8rem; font-weight: normal;} .tit h2{ font-size: 1.15rem; font-weight: normal;} .sj_tit{ font-size: 22px; color: #fff; width: 90%; margin: 0 auto; padding-top: 2vw} .right01{ width: 22%; background-color: rgba(255,255,255,0); margin-right: 1.5%; float: right; margin-top: 0; transform: translateX(100%); -ms-transform: translateX(100%); /* IE 9 */ -webkit-transform: translateX(100%); /* Safari and Chrome */ -o-transform: translateX(100%); /* Opera */ -moz-transform: translateX(100%); } .active .right01{ transform: translateX(0); -ms-transform: translateX(0); /* IE 9 */ -webkit-transform: translateX(0); /* Safari and Chrome */ -o-transform: translateX(0); /* Opera */ -moz-transform: translateX(0); transition: all 1s ; -moz-transition: all 1s ; /* Firefox 4 */ -webkit-transition: all 1s ; /* Safari 和 Chrome */ -o-transition: all 1s ;} .right_con{height: auto; background: url(../../images/screendisplay/right_bg.png) no-repeat; background-size: 100% 100%} .right_cont01{ width: 90%; margin: 0vw auto; overflow: hidden; padding: 1vw 0 0.5vw} .right_cont02{ width: 90%; margin: 0vw auto; overflow: hidden; padding: 0vw 0 0.5vw} .right_cont01_left{ width: 37%; float: left; color: #fff} .right_cont01_left h1{ font-size: 1.15rem; color: #fff; font-weight: normal;} .right_cont01_left p{ font-size: 0.9rem; line-height: 1.8vw;letter-spacing: -0.2px} .right_cont01_right{ width: 75%; margin-left: 5px; float: right;} .right_cont01_right img{ display: block; width:90%; cursor: pointer; transition: all 0.5s; -moz-transition: all 0.5s; /* Firefox 4 */ -webkit-transition: all 0.5s; /* Safari 和 Chrome */ -o-transition: all 0.5s; padding: 0.2vw 0} .right_cont01_right img:hover{ transform: scale(1.05); -ms-transform: scale(1.05); /* IE 9 */ -webkit-transform: scale(1.05); /* Safari 和 Chrome */ -o-transform: scale(1.05); /* Opera */ -moz-transform: scale(1.05); transition: all 0.3s; -moz-transition: all 0.3s; /* Firefox 4 */ -webkit-transition: all 0.3s; /* Safari 和 Chrome */ -o-transition: all 0.3s;} .bt_left{ width: 25%; background: url(../../images/screendisplay/bt_bg01.png) no-repeat; background-size: 100% 100%; height: 16vw; overflow: hidden; margin-left: 1%; float: left;cursor: pointer;} .bt_left .sj{ background: url(../../images/screendisplay/bt01_img01.png) no-repeat;background-size: 100% 100%; height: 12vw;overflow: hidden; width: 88%; margin:0.5vw auto ; position: relative; cursor: pointer; transition: all 0.5s; -moz-transition: all 0.5s; /* Firefox 4 */ -webkit-transition: all 0.5s; /* Safari 和 Chrome */ -o-transition: all 0.5s;} .bt_left .sj:hover{ transform: scale(1.05); -ms-transform: scale(1.05); /* IE 9 */ -webkit-transform: scale(1.05); /* Safari 和 Chrome */ -o-transform: scale(1.05); /* Opera */ -moz-transform: scale(1.05); transition: all 0.3s; -moz-transition: all 0.3s; /* Firefox 4 */ -webkit-transition: all 0.3s; /* Safari 和 Chrome */ -o-transition: all 0.3s; } .bt_left .sj img{width: 0%; display: block; float: right; } .active .bt_left .sj img{width: 85%; transition: all 1s 0.3s; -moz-transition: all 1s 0.3s; /* Firefox 4 */ -webkit-transition: all 1s 0.3s; /* Safari 和 Chrome */ -o-transition: all 1s 0.3s; } .bt_left .sj .blue{ position: absolute; left: 10%; bottom: 1.8vw} .bt_left .sj .red{ position: absolute; left: 10%; top: 1vw} .bt_tit{ font-size: 1.15rem; text-align: center; width: 100%; color: #fff; padding-top: 1.5vw} .bt_mid{ width:22%;background: url(../../images/screendisplay/bt_bg02.png) no-repeat; background-size: 100% 100%; height: 16vw; overflow: hidden; margin-left: 1% ; float: left;} .bt_mid img{ width: 88%; margin: 0 auto; display: block; padding: 1vw 0 0.2vw; cursor: pointer;} .bt_mid img.img01{ opacity: 0; height: 0vw; transition: all 0.3s; -moz-transition: all 0.3s; /* Firefox 4 */ -webkit-transition: all 0.3s; /* Safari 和 Chrome */ -o-transition: all 0.3s;} .active .bt_mid img.img01:hover{ transform: scale(1.05); -ms-transform: scale(1.05); /* IE 9 */ -webkit-transform: scale(1.05); /* Safari 和 Chrome */ -o-transform: scale(1.05); /* Opera */ -moz-transform: scale(1.05); transition: all 0.3s 0s; -moz-transition: all 0.3s 0s; /* Firefox 4 */ -webkit-transition: all 0.3s 0s; /* Safari 和 Chrome */ -o-transition: all 0.3s 0s;} .active .bt_mid img.img01{ opacity: 1; height: 7.5vw; transition: all 1s 0.3s; -moz-transition: all 1s 0.3s; /* Firefox 4 */ -webkit-transition: all 1s 0.3s; /* Safari 和 Chrome */ -o-transition: all 1s 0.3s;} .bt_mid01{ width: 24%; margin-left: 1%;background: url(../../images/screendisplay/bt_bg01.png) no-repeat; background-size: 100% 100%; float: left; height: 16vw; overflow: hidden; } .bt_right{ width:24%;background: url(../../images/screendisplay/bt_bg01.png) no-repeat; background-size: 100% 100%; height: 16vw; overflow: hidden; margin-left:1% ; float: left; } .bt_right .sj{ background: url(../../images/screendisplay/bt03_img01.png) no-repeat;background-size: 100% 100%; height: 12vw;overflow: hidden; width: 94%; margin:0.35vw auto ; position: relative;cursor: pointer; } .bt_right .sj .img01{ width: 0%; position: absolute; left: 9%; bottom: 1.8vw; height: 8.5vw} .bt_right .sj{ transition: all 0.3s; -moz-transition: all 0.3s; /* Firefox 4 */ -webkit-transition: all 0.3s; /* Safari 和 Chrome */ -o-transition: all 0.3s;} .bt_right .sj:hover{ transform: scale(1.05); -ms-transform: scale(1.02); /* IE 9 */ -webkit-transform: scale(1.02); /* Safari 和 Chrome */ -o-transform: scale(1.02); /* Opera */ -moz-transform: scale(1.02); transition: all 0.3s; -moz-transition: all 0.3s; /* Firefox 4 */ -webkit-transition: all 0.3s; /* Safari 和 Chrome */ -o-transition: all 0.3s; } .active .bt_right .sj .img01{width: 90%; transition: all 1s 0.5s; -moz-transition: all 1s 0.5s; /* Firefox 4 */ -webkit-transition: all 1s 0.5s; /* Safari 和 Chrome */ -o-transition: all 1s 0.5s;} .bt_mid,.bt_right{transform: translateY(100%); -ms-transform: translateY(100%); /* IE 9 */ -webkit-transform: translateY(100%); /* Safari and Chrome */ -o-transform: translateY(100%); /* Opera */ -moz-transform: translateY(100%);} .bt_left{ transform: translateX(-100%); -ms-transform: translateX(-100%); /* IE 9 */ -webkit-transform: translateX(-100%); /* Safari and Chrome */ -o-transform: translateX(-100%); /* Opera */ -moz-transform: translateX(-100%);} .bt_right{ transform: translateX(100%); -ms-transform: translateX(100%); /* IE 9 */ -webkit-transform: translateX(100%); /* Safari and Chrome */ -o-transform: translateX(100%); /* Opera */ -moz-transform: translateX(100%);} .active .bt_left ,.active .bt_mid,.active .bt_right{ transform: translateY(0); -ms-transform: translateY(0); /* IE 9 */ -webkit-transform: translateY(0); /* Safari and Chrome */ -o-transform: translateY(0); /* Opera */ -moz-transform: translateY(0); transition: all 1s ; -moz-transition: all 1s ; /* Firefox 4 */ -webkit-transition: all 1s ; /* Safari 和 Chrome */ -o-transition: all 1s ; } .active .bt_left,.active .bt_right{transform: translateX(0); -ms-transform: translateX(0); /* IE 9 */ -webkit-transform: translateX(0); /* Safari and Chrome */ -o-transform: translateX(0); /* Opera */ -moz-transform: translateX(0); } /*加载动画*/ .loaders {width: 100%; box-sizing: border-box; height: 100%; position: fixed; top: 0; display: flex; flex: 0 1 auto; flex-direction: row; flex-wrap: wrap; background:rgba(0,0,0,.8);z-index: 1000} .loaders .loader { box-sizing: border-box; display: flex; display: -webkit-flex; flex: 0 1 auto;flex-direction: column;flex-grow: 1;flex-shrink: 0;flex-basis: 25%; width: 25%;align-items: center;justify-content: center;} .loader-inner{ } @-webkit-keyframes ball-spin-fade-loader { 50% { opacity: 0.3; -webkit-transform: scale(0.4);transform: scale(0.4); } 100% { opacity: 1;-webkit-transform: scale(1); transform: scale(1); } } @keyframes ball-spin-fade-loader { 50% { opacity: 0.3;-webkit-transform: scale(0.4); transform: scale(0.4); } 100% { opacity: 1;-webkit-transform: scale(1); transform: scale(1); } } .ball-spin-fade-loader { position: relative; top: -10px;left: -10px; } .ball-spin-fade-loader > div:nth-child(1) {top: 25px;left: 0;-webkit-animation: ball-spin-fade-loader 1s -0.96s infinite linear; animation: ball-spin-fade-loader 1s -0.96s infinite linear; } .ball-spin-fade-loader > div:nth-child(2) {top: 17.04545px;left: 17.04545px;-webkit-animation: ball-spin-fade-loader 1s -0.84s infinite linear;animation: ball-spin-fade-loader 1s -0.84s infinite linear; } .ball-spin-fade-loader > div:nth-child(3) {top: 0; left: 25px;-webkit-animation: ball-spin-fade-loader 1s -0.72s infinite linear; animation: ball-spin-fade-loader 1s -0.72s infinite linear; } .ball-spin-fade-loader > div:nth-child(4) { top: -17.04545px;left: 17.04545px;-webkit-animation: ball-spin-fade-loader 1s -0.6s infinite linear; animation: ball-spin-fade-loader 1s -0.6s infinite linear; } .ball-spin-fade-loader > div:nth-child(5) { top: -25px; left: 0; -webkit-animation: ball-spin-fade-loader 1s -0.48s infinite linear; animation: ball-spin-fade-loader 1s -0.48s infinite linear; } .ball-spin-fade-loader > div:nth-child(6) {top: -17.04545px;left: -17.04545px;-webkit-animation: ball-spin-fade-loader 1s -0.36s infinite linear;animation: ball-spin-fade-loader 1s -0.36s infinite linear; } .ball-spin-fade-loader > div:nth-child(7) { top: 0; left: -25px; -webkit-animation: ball-spin-fade-loader 1s -0.24s infinite linear; animation: ball-spin-fade-loader 1s -0.24s infinite linear; } .ball-spin-fade-loader > div:nth-child(8) {top: 17.04545px;left: -17.04545px;-webkit-animation: ball-spin-fade-loader 1s -0.12s infinite linear; animation: ball-spin-fade-loader 1s -0.12s infinite linear; } .ball-spin-fade-loader > div { background-color: #fff; width: 15px;height: 15px; border-radius: 100%;margin: 2px;-webkit-animation-fill-mode: both; animation-fill-mode: both; position: absolute; } /*弹层活动说明*/ .layer{display:table; background-color:rgba(0,0,0,0.5); width:100%; height:100%; overflow:hidden; visibility: hidden;opacity: 0; -webkit-transition: opacity 0.35s, visibility 0.35s;position: fixed; left: 0;top: 0;z-index: 2000;} .layer>div{vertical-align:middle; display:table-cell;text-align: center;} .layer-content{display: inline-block;width:35%; margin: 0 auto;-webkit-transform:scale(0.5);-webkit-transition: -webkit-transform 0.35s cubic-bezier(0.53, -0.54, 0.79, 0.51); background-size: 100% 100%; border-radius: 10px; padding-top: 10px; box-sizing: border-box; background:url(../../images/screendisplay/bg.jpg) ; background-size: 100% 100%; box-shadow: 0 0 03px rgba(0,0,0,.2)} .layer.active{visibility: visible;opacity: 1; -webkit-transition: opacity 0.35s;} .layer.active .layer-content{-webkit-transform:scale(1.0);-webkit-transition: -webkit-transform 0.35s cubic-bezier(0.24, 0.9, 0.42, 1.21)} .close-layer{font-size:1.8rem;font-style: normal;color: #5ecdff;position: absolute;right:-1vw;top:-1vw;display: block;width:2vw; border-radius: 30px; background:rgba(0,0,0,.2); border: 1px solid #5ecdff;height:2vw;line-height: 1.8vw;border-radius: 50%; font-weight: lighter; font-family: arial; text-align: center; margin-left: -15px; box-sizing: border-box; cursor: pointer;} .layer-title{padding: 0px 10px 10px 10px;border-radius: 5px 5px 0 0; border-bottom: 1px solid #e5e5e5} .layer-title h2{font-size:1.2rem; color:#dd3042; padding: 3px 0; font-weight: normal; } .layer-tit{ position: absolute; top:0%; background: url(../../images/screendisplay/bg01.png) no-repeat; background-size: 100%; width:100%; height: 12vw; color: #fff; text-align: center; left:0%; margin-top: -16vw; line-height: 12vw; font-size: 1.25rem; border: 1px solid #888cff; border-radius: 10px; box-sizing: border-box; font-size: 1.25rem; text-shadow: 0 1px 2px rgba(0,0,0,.5)} .layer-tit::before ,.layer-tit::after{content: ""; position: absolute; top:0%; margin-top: 6.2vw; background: url(../../images/screendisplay/tc_bg01.png) no-repeat left center; width: 5vw; height: 16vw; background-size: 100% 100% } .layer-tit::before{left:4%;} .layer-tit::after{ right:4%; } .layer-text{max-height: 70vw;overflow: auto;padding: 10px 15px 15px;text-align: left; margin-top: 18%} .layer-text h2{ font-size:1.15rem; color:#000; line-height:28px; padding:5px 0px 0px; font-weight: normal; text-align: center;} .layer-text h2 span{ color: #ef0000} .layer-text h3{ font-size:1rem; color:#000; line-height:28px; padding:10px 0px 5px; font-weight: normal;} .layer-text p{ font-size:0.95rem; color:#1a1a1a; line-height:1.5rem; padding:2px; } .layer-text p span{ color: #ef0000} .layer_people{ background: url(../../images/screendisplay/bt01_img01.png) no-repeat;background-size: 100% 100%; height: 16vw;overflow: hidden; width: 84%; margin:2vw auto ; position: relative; cursor: pointer; transition: all 0.5s; -moz-transition: all 0.5s; /* Firefox 4 */ -webkit-transition: all 0.5s; /* Safari 和 Chrome */ -o-transition: all 0.5s;} .layer_people img{width: 0%; display: block; float: right; } .layer_people .sj img{width: 85%; } .layer_people .blue{ position: absolute; left: 10%; bottom: 1.8vw} .layer_people .red{ position: absolute; left: 10%; top: 1.12vw} .bt_tit01{ font-size: 1.45rem; text-align: center; width: 100%; color: #fff; padding-top: 1.2vw; padding-bottom: 1vw} .layer_ywzb{ width: 100%} .layer_ywzb img{display: block; width: 52%; margin:2.5vw auto} .logo{ width:14%; position: fixed; right: 5.5%; top:1.4vw;display: block;}