@charset "utf-8"; select, input{vertical-align: middle;outline: none; font-family:"Microsoft YaHei";} input[type=button], input[type=reset], input[type=submit], input[type=radio], input[type=checkbox]{cursor: pointer;outline: none;} textarea{outline: none;font-family:"Microsoft YaHei";} .wrap{width: 1200px;clear: both;margin: 0 auto;} .clear{clear: both;overflow:hidden;} .h2{clear: both;height: 2px;overflow:hidden;} .h10{clear: both;height: 10px;overflow:hidden;} .h15{clear: both;height: 16px;overflow:hidden;} .h20{clear: both;height: 20px;overflow:hidden;} .h25{clear: both;height: 25px;overflow:hidden;} .h30{clear: both;overflow:hidden;height: 30px;} .h32{clear: both;height: 32px;} .h40{clear: both;height: 40px;overflow:hidden;} .h50{clear: both;height: 50px;overflow:hidden;} .h55{clear: both;height: 55px;overflow:hidden;} .h60{clear: both;height: 60px;overflow:hidden;} .h80{clear: both;height: 80px;overflow:hidden;} .h100{clear: both;height: 100px;overflow:hidden;} .h110{clear: both;height: 110px;overflow:hidden;} .h125{clear: both;height: 125px;overflow:hidden;} .h150{clear: both;height: 150px;overflow:hidden;} .h185{clear: both;height: 185px;overflow:hidden;} .h250{clear: both;height: 125px;overflow:hidden;} .fl{float: left;display: inline;} .fr{float: left!important;} .bai{ background: #FFF;} .hui{ background: #f2f2f2;} .pic{ overflow:hidden;} .pic img{ overflow:hidden; transition: all 0.3s linear; -webkit-transition: all 0.3s linear;} .pic:hover img{ transform:scale(1.05); -webkit-transform:scale(1.05);} .hoverDH{transition: 0.3s linear; -webkit-transition: 0.3s linear;} .hoverDH:hover{transform: translateY(-5px); -webkit-transform: translateY(-5px);box-shadow: 0 2px 9px 2px rgba(0,0,0,0.1);} .default{background:#ececec url(../images/basicLogo.png) center center no-repeat;} .imgBox{ position: relative; overflow: hidden; } .imgBox img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .jqthumb{ position: absolute; top: 0; left: 0; transition: 0.3s linear; } .publicTit{ font-size: 28px; color: #fff; text-align: center; padding: 20px 0; position: relative; z-index: 1; } .publicTit a{ color: #fff; } /*???????????*/ img.desaturate{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); } /*??????????*/ .writing-mode-lr{ writing-mode: vertical-lr;/*???????? ?????????? writing-mode: vertical-rl;*/ writing-mode: tb-lr;/*IE?????????????? ?????????? writing-mode: tb-rl??*/ text-align: left; } .writing-mode-rl{ writing-mode: vertical-rl;/*???????? ?????????? writing-mode: vertical-rl;*/ writing-mode: tb-rl;/*IE?????????????? ?????????? writing-mode: tb-rl??*/ text-align: left; } /** * ?????????????? * @author ???? * @return */ ::-webkit-scrollbar {width:8px;background:#fff;} ::-webkit-scrollbar-button {} ::-webkit-scrollbar-track {} ::-webkit-scrollbar-track-piece {} ::-webkit-scrollbar-thumb {width:8px;background:#585f72;} ::-webkit-scrollbar-corner {background:#f0f0f0;} ::-webkit-resizer {} ::-webkit-scrollbar:horizontal{height:9px;} /** * css3??????????????????????????????????????????????????? * @author ???? * @return */ @-webkit-keyframes gupIn{from{opacity:0; -webkit-transform:translate3d(0,-30px,0);}} @-moz-keyframes gupIn{from{opacity:0; -moz-transform:translate3d(0,-30px,0);}} @keyframes gupIn{from{opacity:0; transform:translate3d(0,-30px,0);}} @-webkit-keyframes gdownIn{from{opacity:0; -webkit-transform:translate3d(0,30px,0);}} @-moz-keyframes gdownIn{from{opacity:0; -moz-transform:translate3d(0,30px,0);}} @keyframes gdownIn{from{opacity:0; transform:translate3d(0,30px,0);}} @-webkit-keyframes gleftIn{0%{opacity:0; -webkit-transform:translate3d(-30px,0,0);}100%{opacity:1; -webkit-transform:translate3d(0,0,0);}} @-moz-keyframes gleftIn{0%{opacity:0; -moz-transform:translate3d(-30px,0,0);}100%{opacity:1; -moz-transform:translate3d(0,0,0);}} @keyframes gleftIn{0%{opacity:0; transform:translate3d(-30px,0,0);}100%{opacity:1; transform:translate3d(0,0,0);}} @-webkit-keyframes grightIn{0%{opacity:0; -webkit-transform:translate3d(80px,0,0);}100%{opacity:1; -webkit-transform:translate3d(0,0,0);}} @-moz-keyframes grightIn{0%{opacity:0; -moz-transform:translate3d(80px,0,0);}100%{opacity:1; -moz-transform:translate3d(0,0,0);}} @keyframes grightIn{0%{opacity:0; transform:translate3d(80px,0,0);}100%{opacity:1; transform:translate3d(0,0,0);}} @-webkit-keyframes gfadeIn{0%{opacity:0;}100%{opacity:1;}} @-moz-keyframes gfadeIn{0%{opacity:0;}100%{opacity:1;}} @keyframes gfadeIn{0%{opacity:0;}100%{opacity:1;}} @-webkit-keyframes gfadeOut{0%{opacity:1;}100%{opacity:0;}} @-moz-keyframes gfadeOut{0%{opacity:1;}100%{opacity:0;}} @keyframes gfadeOut{0%{opacity:1;}100%{opacity:0;}} .gupIn{ -webkit-transition: 0.3s; -moz-transition: 0.3s; transition: 0.3s; -webkit-animation: gupIn 1s 0.1s both; -moz-animation: gupIn 1s 0.1s both; animation: gupIn 1s 0.1s both; } .gdownIn{ -webkit-transition: 0.3s; -moz-transition: 0.3s; transition: 0.3s; -webkit-animation: gdownIn 1s 0.1s both; -moz-animation: gdownIn 1s 0.1s both; animation: gdownIn 1s 0.1s both; } .gleftIn{ -webkit-transition: 0.3s; -moz-transition: 0.3s; transition: 0.3s; -webkit-animation: gleftIn 1s 0.1s both; -moz-animation: gleftIn 1s 0.1s both; animation: gleftIn 1s 0.1s both; } .grightIn{ -webkit-transition: 0.3s; -moz-transition: 0.3s; transition: 0.3s; -webkit-animation: grightIn 1s 0.1s both; -moz-animation: grightIn 1s 0.1s both; animation: grightIn 1s 0.1s both; } .gfadeIn{ -webkit-transition: 0.3s; -moz-transition: 0.3s; transition: 0.3s; -webkit-animation: gfadeIn 1s 0.1s both; -moz-animation: gfadeIn 1s 0.1s both; animation: gfadeIn 1s 0.1s both; } .gfadeOut{ -webkit-transition: 0.3s; -moz-transition: 0.3s; transition: 0.3s; -webkit-animation: gfadeOut 1s 0.1s both; -moz-animation: gfadeOut 1s 0.1s both; animation: gfadeOut 1s 0.1s both; } /*???????????*/ /* ********************************????????????******************************** */ .fade{ position: fixed; z-index: 999999; top: 0; left: 0; width: 100%; height: 100%; } .fadeTop, .fadeBottom{ position: absolute; width: 100%; height: 50%; background: #fff; left: 0; } .fadeLogo{ text-align: center; width: 100%; } .fadeC{ position: absolute; z-index: 9; top: 50%; left: 0; width: 100%; margin-top: -57px; text-align: center; } .fadeTop{ top: 0; } .fadeBottom{ bottom: 0; } .fadeLoading { display:inline-block; font-size:0px; padding:0px; } .fadeLoading span { vertical-align:middle; border-radius:100%; display:inline-block; width:10px; height:10px; margin:3px 2px; -webkit-animation:loader1 0.8s linear infinite alternate; animation:loader1 0.8s linear infinite alternate; } .fadeLoading span:nth-child(1) { -webkit-animation-delay:-1s; animation-delay:-1s; background:rgba(0, 117, 193,0.6); } .fadeLoading span:nth-child(2) { -webkit-animation-delay:-0.8s; animation-delay:-0.8s; background:rgba(0, 117, 193,0.8); } .fadeLoading span:nth-child(3) { -webkit-animation-delay:-0.26666s; animation-delay:-0.26666s; background:rgba(0, 117, 193,1); } .fadeLoading span:nth-child(4) { -webkit-animation-delay:-0.8s; animation-delay:-0.8s; background:rgba(0, 117, 193,0.8); } .fadeLoading span:nth-child(5) { -webkit-animation-delay:-1s; animation-delay:-1s; background:rgba(0, 117, 193,0.4); } @keyframes loader1 { from {transform: scale(0, 0);} to {transform: scale(1, 1);} } @-webkit-keyframes loader1 { from {-webkit-transform: scale(0, 0);} to {-webkit-transform: scale(1, 1);} } /*?????? start */ .box{ height: 100%; width: 100%; position: relative; } .box .page-next{ position: absolute; bottom:20px; text-align: center; left:50%; z-index: 999; color: #fff; font-size: 16px; cursor: pointer; line-height: 30px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; transition: 0.3s ease; animation:arrowDown 1s infinite linear ; -webkit-animation: arrowDown 1s infinite linear; } /*???��???????*/ @-webkit-keyframes arrowDown { 0% { -webkit-transform: translate(0,0); } 25%{ -webkit-transform: translate(0,6px); } 50% { -webkit-transform: translate(0,0); } 75%{ -webkit-transform: translate(0, -6px); } 100% { -webkit-transform: translate(0,0); } } .box .page-next:hover{ /* transform: translateY(-4px); */ animation: none; } .box .nextIco{ height: 30px; width: 30px; display: inline-block; vertical-align: middle; margin-left: 8px; background: url(../images/pageNext.png) center center no-repeat; position: relative; } .box .nextIco:after{ content: ''; height: 7px; border-left: 3px solid darkorange; position: absolute; top: 3px; left: 14px; border-radius: 40%; animation: yishan infinite; animation-duration: 1s; animation-timing-function: linear; } .box .page-next:hover .nextIco:after{ content: ''; height: 10px; width: 9px; border-left:none; background: url(../images/pageNext_h.png); position: absolute; top: 1px; left: 7px; border-radius: 0; animation: yishan infinite; animation-duration: 1s; animation-timing-function: linear; } @keyframes yishan{ 0%{ opacity: 1; display: block; } 50%{ opacity: 0; display: none; } 100%{ opacity: 1; display: block; } } /*?????????*/ .box3{ position: relative; } .bisBox, .box3Bg, .box3Bg .swiper-wrapper, .box3Bg .swiper-slide{ height: 100% !important; width: 100% !important; } .box3Bg{ position: absolute !important; top: 0; left: 0; } .box3Bg .swiper-wrapper{ transform: translate(1px) !important;/*???swiper??????????*/ margin-left: -1px; left: 0 !important; } .box3Bg .swiper-slide{ background-size: cover; background-position: center center; position: absolute; top: 0; left: 0; opacity: 0; filter:alpha(opacity=0); z-index: 1; transform: scale(1.3); transition: 3s ease-in-out; } .box3Bg .swiper-slide-active{ opacity: 1; filter:alpha(opacity=100); z-index: 2; transform: scale(1); } .box3Left{ height: 100%; padding-left: 15%!important; position: relative; z-index: 9; } .bisPhrase{ color: #fff; font-size: 16px; position: relative; z-index: 9; } .bisList{ width:49% ; padding-right: 15%; height: 100%; position: relative; z-index: 9; } .bisList1{ margin: 30px -15px; } .bisList1 dd{ float: left; display: inline; padding: 15px 0; width: 36%; } .bisList1 dd a{ display: block; padding-top: 77.5%; border: 1px solid rgba(255,255,255,0.4); margin: 0 15px; position: relative; } .bisList1 .listBox1{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: 0.4s ease; } .bisList1 dd span{ color: #d7b88f; font-size: 22px; position: absolute; top: 52%; margin-top: -1px; width: 100%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 36px; line-height: 36px; } .bisList1 .listBox{ position: absolute; top: 0; left: 0; /* background: #000; */ width: 100%; height: 100%; opacity: 0; filter: alpha(opacity=00); transform: scale(0.2); transition: 0.6s ease; } .bisList1 .listTxt{ padding: 20px 10px; } .bisList1 .listBox .listTit{ color: #000; text-align: center; font-size: 22px; white-space: normal; text-overflow: ellipsis; overflow: hidden; line-height: 36px!important; padding: 8% 0 8% 0; } .bisList1 .listBox .listInfr{ font-size: 12px; color: #000; text-align: center; line-height: 26px; height: 52px; overflow: hidden; padding-top: 20px; position: relative; top: 30px; opacity: 0; filter: alpha(opacity=0); transition: 0.5s linear; word-break: break-all; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical; } .bisList1 .listBox .listInfr:after{ content: ''; width: 30px; border-bottom: 1px solid #000; position: absolute; top: 0; left: 40%; } .bisList1 dd.ico1 .listBox1{background: url(/img/xzh017.png) center 26% no-repeat;} .bisList1 dd.ico2 .listBox1{background: url(/img/xzh016.png) center 26% no-repeat;} .bisList1 dd.ico3 .listBox1{background: url(/img/xzh015.png) center 26% no-repeat;} .bisList1 dd.ico4 .listBox1{background: url(/img/xzh014.png) center 26% no-repeat;} .bisList1 dd.ico5 .listBox1{background: url(/img/icon11.png) center 26% no-repeat;} .bisList1 dd.ico6 .listBox1{background: url(/img/icon11.png) center 26% no-repeat;} .bisList1 dd.ico6 .listBox1{background: url(/img/icon11.png) center 26% no-repeat;} .bisList1 dd.ico1 .listBox{background: linear-gradient(to top,#f7d8ae 0%,#907049 100%);} .bisList1 dd.ico2 .listBox{background: linear-gradient(to top,#f7d8ae 0%,#907049 100%);} .bisList1 dd.ico3 .listBox{background: linear-gradient(to top,#f7d8ae 0%,#907049 100%); } .bisList1 dd.ico4 .listBox{background: linear-gradient(to top,#f7d8ae 0%,#907049 100%);} .bisList1 dd.ico5 .listBox{background:#e42f39; } .bisList1 dd.ico6 .listBox{background:#e42f39; } .bisList1 dd.ico6 .listBox{background:#e42f39; } .bisList1 dd:hover .listBox{ transform: scale(1); opacity: 1; filter: alpha(opacity=100); } .bisList1 dd:hover .listBox1{ transform: scale(0.2); opacity: 0; filter: alpha(opacity=0); } .bisList1 dd:hover .listBox .listInfr{ top: 0; opacity: 1; filter: alpha(opacity=100); transition-delay: 0.3s; } .bisList1 dd.ico1:hover a{border-color: #9c876b;} .bisList1 dd.ico2:hover a{border-color: #9c876b;} .bisList1 dd.ico3:hover a{border-color: #9c876b;} .bisList1 dd.ico4:hover a{border-color: #9c876b;} .bisList1 dd.ico5:hover a{border-color: #e42f39;} .bisList1 dd.ico6:hover a{border-color: #e42f39;} .swiper-wrapper{ position:relative; } .box3BgMask{ width:100%; height:100%; position:absolute; z-index:9999; opacity:0.6; } /*??????????*/ /* ********************************?????????????******************************** */