/* 鑷畾涔夊垵濮嬪寲 */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0; padding:0; } table{border-collapse:collapse; border-spacing:0; } fieldset,img{border:0; } ol,ul{list-style:none; } caption,th{text-align:left; } q:before,q:after{content:''; } abbr,acronym{border:0; } .clear{clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0; } .l,.col-l,.col_l,.col-c,.col_c{float:left; } .r,.col-r,.col_r,dt span,.ul-txt li span,.ul_txt li span{float:right; } .c{clear:both; } .n,em{font-weight:normal; font-style:normal; } .b{font-weight:bold; } .i{font-style:italic; } .fa{font-family:Arial; } .fg{font-family:Georgia; } .ft{font-family:Tahoma; } .fl{font-family:Lucida Console; } .fs{font-family:'瀹嬩綋'; } .fw{font-family:'寰蒋闆呴粦'; } .tc{text-align:center; } .tr{text-align:right; } .tl{text-align:left; } .tdu{text-decoration:underline; } .tdn,.tdn:hover,a.tdl:hover{text-decoration:none; } .fc0{color:#000000; } .fc3{color:#333333; } .fc6{color:#666666; } .fc9{color:#999999; } .fcr{color:red; } .fcw{color:white; } .fcb{color:blue; } .fcg{color:green; } .f0{font-size:0; } .f10{font-size:10px; } .f12{font-size:12px; } .f13{font-size:13px; } .f14{font-size:14px; } .f16{font-size:16px; } .f20{font-size:20px; } .f24{font-size:24px; } .vm{vertical-align:middle; } .vtb{vertical-align:text-bottom; } .vt{vertical-align:top; } .vn{vertical-align:-2px; } .vimg{margin-bottom:-3px; } .m0{margin:0; } .ml0{margin-left:0; } .ml5{margin-left:5px; } .ml10{margin-left:10px; } .ml20{margin-left:20px; } .mr0{margin-right:0; } .mr5{margin-right:5px; } .mr10{margin-right:10px; } .mr20{margin-right:20px; } .mt5{margin-top:5px; } .mt10{margin-top:10px; } .mt20{margin-top:20px; } .mb5{margin-bottom:5px; } .mb10{margin-bottom:10px; } .mb20{margin-bottom:20px; } .ml-1{margin-left:-1px; } .mt-1{margin-top:-1px; } /*.p1{padding:1px; }*/ .pl5{padding-left:5px; } .p5{padding:5px; } .pt5{padding-top:5px; } .pr5{padding-right:5px; } .pb5{padding-bottom:5px; } .p10{padding:10px; } .pl10{padding-left:10px; } .pt10{padding-top:10px; } .pr10{padding-right:10px; } .pb10{padding-bottom:10px; } .p20{padding:20px; } .pl20{padding-left:20px; } .pt20{padding-top:20px; } .pr20{padding-right:20px; } .pb20{padding-bottom:20px; } .rel,.pr{position:relative; } .abs,.pa{position:absolute; } .dn{display:none !important; } .db{display:block !important; } .dib{-moz-inline-stack:inline-block; display:inline-block; } .di{display:inline; } .ovh{overflow:hidden; } .ovs{overflow:scroll; } .vh{visibility:hidden; } .vv{visibility:visible; } .lh14{line-height:14px; } .lh16{line-height:16px; } .lh18{line-height:18px; } .lh20{line-height:20px; } .lh22{line-height:22px; } .lh24{line-height:24px;} .fix{*zoom:1; } .fix:after,.fix:before{display:block; content:"clear"; height:0; clear:both; overflow:hidden; visibility:hidden; } .z{_zoom:1; } .h1{height:1px; } .h5{height:5px; } .h10,.h{height:10px; } .h15{height:15px; } .h20{height:20px; } .h1,.h5,.h10,.h15,.h20,.h{font-size:0px; line-height:0; overflow:hidden; clear:both; } body{font:12px '瀹嬩綋',Arial,sans-serif; } a{text-decoration:none; } a:hover{color:#FF6600 } .ani{ transition: .3s; -ms-transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; -o-transition: .3s; } *{outline: 0;} input,select,button,textarea{ color: #333; font-size: 14px; font-family: "寰蒋闆呴粦","Microsoft Yahei"; border:0; background: none; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } select::-ms-expand {display: none;} input[type='submit'],input[type='reset'], input[type='button'],button{ cursor: pointer; } ::-webkit-input-placeholder {color:#999;} :-moz-placeholder {color:#999;} ::-moz-placeholder {color:#999;} :-ms-input-placeholder {color:#999;} /*inital*/ body{ color: #333; font-size: 14px; line-height: 1.5; font-family: "寰蒋闆呴粦","Microsoft Yahei"; } body,html{ overflow-x: hidden; } a{color: #333;} a:hover{color: #0068b6;} img{max-width: 100%;} /*scrollbar*/ ::-webkit-scrollbar { width: 3px; height: 3px; } ::-webkit-scrollbar-track { background: #f8f8f8; } ::-webkit-scrollbar-thumb { background: #aeaeae; } ::-webkit-scrollbar-thumb:window-inactive { background: #333; } /*font*/ /* @font-face{ font-family: 'SourceHanSerifCN-Bold'; src: url('../fonts/SourceHanSerifCN-Bold.otf'); } */ /*title*/ .g-tit1{ overflow: hidden; margin-bottom: 40px; } .g-tit1 h2{ color: #333; font-size: 30px; line-height: 1; padding-bottom: 20px; position: relative; } .g-tit1 h2::after{ content: ''; position: absolute; left: 0;bottom: 0; width: 1em; border-bottom: 3px solid #0068b6; } .g-tit1 .white::after{border-color: #fff;} .g-tit2{ color: #333; font-size: 36px; font-weight: normal; line-height: 50px; text-align: center; /*margin: 35px 0;*/ margin: 40px 0; } /*button*/ .btn1{ color: #0068b6; font-size: 16px; width: 120px; line-height: 36px; text-align: center; border: 2px solid #0068b6; display: block; transition: .3s; -ms-transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; -o-transition: .3s; } .btn1:hover{ color: #fff; background: #0068b6; } .btn2{ color: #999; font-size: 16px; width: 120px; line-height: 36px; text-align: center; border: 2px solid #eeeeee; display: block; transition: .3s; -ms-transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; -o-transition: .3s; } .btn2:hover{ color: #0068b6; border-color: #0068b6; } /*color*/ .blue{color: #0068b6 !important;} .white{color: #fff !important;} .tit-white, .tit-white *{color: #fff !important;} /******************************* -------[=layout]------- ********************************/ .wrapper{max-width: 1700px;padding: 0 2.604vw;} .wrap{max-width: 1490px;padding: 0 6.604vw;margin: 0 auto;} .wp{max-width: 1200px;padding: 0 2.604vw;margin: 0 auto;} .h40{height: 40px;} .h50{height: 50px;} .h60{height: 60px;} .h70{height: 70px;} .h80{height: 80px;} /******************************* -------[=header]------- ********************************/ #header{ position: fixed; left: 0;right: 0;top: 0; z-index: 9; height: 55px; line-height: 55px; padding: 20px 0; transition: .5s; -ms-transition: .5s; -moz-transition: .5s; -webkit-transition: .5s; -o-transition: .5s; } #header.min{ height: 60px;line-height: 60px;padding: 0; background: #222; box-shadow: 0 0 5px rgba(0,0,0,.1); } #header.min .logo img{max-height: 30px;} #header.min .logo .txt{font-size: 12px;line-height: 15px;padding-left: 10px;margin-left: 10px;} #header.min .soBtn{height: 60px;} #header.min .subBox{margin-top: 0;} .header_space{height: 100px;} .logo{ float: left; overflow: hidden; } .logo img{ display: inline-block; vertical-align: middle; max-height: 55px; /*max-height: 100%;*/ transition: .3s; -ms-transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; -o-transition: .3s; } .logo .txt{ color: #fff; font-size: 14px; display: inline-block; vertical-align: middle; line-height: 20px; position: relative; padding-left: 20px; margin-left: 20px; display: none; } .logo .txt::before{ content: ''; position: absolute; left: 0;top: 50%; height: 24px;margin-top: -12px; border-right: 1px solid rgba(255,255,255,.2); } .hdr{float: right;} .hdr .g-search{float: left;margin-left: 10px;} .g-search{position: relative;} .g-search .soBtn{ width: 25px; height: 55px; background: url(../image/ico_so.png) center center no-repeat; } .g-search.open .soBtn{background-image: url(../image/ico_x.png);} .g-search .form{ position: absolute; right: 0;top: 100%; width: 420px; padding: 15px 20px; background: rgba(36,36,36,.85); opacity: 0; visibility: hidden; transition: .3s; -ms-transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; -o-transition: .3s; } .g-search.open .form{ opacity: 1; visibility: visible; } .g-search input{ color: #fff; display: block; height: 30px; line-height: 30px; } .g-search .inp{ width: 100%; padding-right: 30px; } .g-search .btn{ width: 30px; background: url(../image/ico_so.png) center center no-repeat; position: absolute; right: 20px;top: 15px; } /******************************* -------[=navigation]------- ********************************/ #nav{ float: left; } #nav li{ float: left; margin: 0 23px; } #nav .lang{margin: 0 5px 0 15px;} #nav .v1{ color: #fff; font-size: 16px; display: block; position: relative; } #nav .v1:hover{color: #fff;} #nav .v1::after{ content: ''; position: absolute; left: 0;right: 0;bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.5); /*opacity: 0;*/ visibility: hidden; transition: width .3s; -ms-transition: width .3s; -moz-transition: width .3s; -webkit-transition: width .3s; -o-transition: width .3s; } #nav li.active .v1::after, #nav .v1:hover::after, #nav li:hover .v1::after{ /*opacity: 1;*/ visibility: visible; } #nav .subBox{ position: absolute; left: 0;right: 0;top: 100%; background: rgba(0,0,0,.7); margin-top: -20px; opacity: 0; visibility: hidden; transition: .3s; -ms-transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; -o-transition: .3s; line-height: 35px; padding: 10px 0; } #nav li:hover .subBox{ opacity: 1; visibility: visible; } #nav .subBox ul{ position: relative; top: 0;left: 0; display: inline-block; overflow: hidden; } #nav .subBox li{ float: none; margin: 0; } #nav .subBox a{ color: #fff; transition: .3s; -ms-transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; -o-transition: .3s; } #nav .subBox a:hover{color: #0068b6;} /*menuBtn*/ .menuBtn{ display: none; position: relative; z-index: 9; float: right; width: 30px; height: 35px; cursor: pointer; margin-top: 8px; margin-left: 10px; } .menuBtn em{ position: absolute; left: 0; top: 8px; width: 30px; height: 2px; background: #fff; transition: .3s; -ms-transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; -o-transition: .3s; } .menuBtn .s1{top: 8px;} .menuBtn .s2{top: 17px;} .menuBtn .s3{top: 26px;} .menuBtn.on .s1{ top: 18px; transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -moz-transform: rotate(45deg); } .menuBtn.on .s2{ opacity: 0; } .menuBtn.on .s3{ top: 18px; transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); -moz-transform: rotate(-45deg); } #slideNav{ display: none; font-family:"寰蒋闆呴粦","Microsoft Yahei"; z-index: 9999999; } .mm-menu{width: 60%; -webkit-transform: translate(-100%, 0); -moz-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); -o-transform: translate(-100%, 0); transform: translate(-100%, 0); -webkit-transition: .4s ease; transition: .4s ease; } .mm-navbar{height: 50px;line-height: 50px;} .mm-navbar.mm-hasbtns{background: rgb(46,46,46);} .mm-navbar .mm-title{padding: 0;text-align: left;color: #999 !important;} .mm-navbar .mm-btn{height: 50px;} .mm-hasnavbar-top-1 .mm-panel{top: 50px;} .mm-listview> li:not(.mm-divider):after{left: 0;} .mm-menu.mm-theme-dark .mm-listview> li .mm-next:after, .mm-menu.mm-theme-dark .mm-listview> li .mm-arrow:after{border-color: rgba(255,255,255,.3);} html.mm-opening .mm-menu, html.mm-opening .mm-slideout{ -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } /******************************* -------[=banner]------- ********************************/ #banner{ background: #000; position: relative; } #banner .item{ height: 100vh; position: relative; overflow: hidden; } #banner .item-bg{ position: relative; height: 100%; background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; background-size: cover; /* -moz-transform:scale(1,1); -ms-transform:scale(1,1); -o-transform:scale(1,1); -webkit-transform:scale(1,1); transform:scale(1,1); -webkit-transition: all 6s ease; transition: all 6s ease; */ } #banner .slick-current-page .item-bg{ /* -moz-transform:scale(1.2,1.2); -ms-transform:scale(1.2,1.2); -o-transform:scale(1.2,1.2); -webkit-transform:scale(1.2,1.2); transform:scale(1.2,1.2); */ } #banner .item-con{ position: absolute; left: 0;right: 0; top: 50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -ms-transform:translateY(-50%); color: #fff; font-size: 20px; } #banner .txt{ color: #fff; font-size: 24px; line-height: 35px; max-width: 50%; } #banner .txt h2{ font-size: 50px; line-height: 75px; margin-bottom: 15px; } #banner .txt h3{ color: rgba(255,255,255,.6); font-size: 30px; font-weight: normal; } #banner .flex-box{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: space-between; } #banner .info, #banner .txt h2, #banner .txt h3, #banner .ban-list1{opacity: 0;} #banner .slick-current-page .txt h2{ -webkit-animation: moveleft .5s forwards ease-in-out; animation: moveleft .5s forwards ease-in-out; } #banner .slick-current-page .txt h3{ -webkit-animation: moveleft .5s forwards ease-in-out .3s; animation: moveleft .5s forwards ease-in-out .3s; } #banner .slick-current-page .ban-list1{ -webkit-animation: moveleft .5s forwards ease-in-out .6s; animation: moveleft .5s forwards ease-in-out .6s; } #banner .slick-current-page .info{ -webkit-animation: moveup .5s forwards ease-in-out; animation: moveup .5s forwards ease-in-out; } @-webkit-keyframes moveup{0%{opacity: 0;-webkit-transform:translateY(50px);transform:translateY(50px)}100%{opacity: 1;-webkit-transform:translateY(0);transform:translateY(0)}} @keyframes moveup{0%{opacity: 0;-webkit-transform:translateY(50px);transform:translateY(50px)}100%{opacity: 1;-webkit-transform:translateY(0);transform:translateY(0)}} @-webkit-keyframes moveleft{0%{opacity: 0;-webkit-transform:translateX(50px);transform:translateX(50px)}100%{opacity: 1;-webkit-transform:translateX(0);transform:translateX(0)}} @keyframes moveleft{0%{opacity: 0;-webkit-transform:translateX(50px);transform:translateX(50px)}100%{opacity: 1;-webkit-transform:translateX(0);transform:translateX(0)}} #banner .item-progLine{ position: absolute; left: 0;bottom: 0; width: 0; height: 5px; display: block; background: rgba(255,255,255,.5); opacity: 0; transition: .5s; -ms-transition: .5s; -moz-transition: .5s; -webkit-transition: .5s; -o-transition: .5s; } #banner .slick-current .item-progLine{opacity: 1;} #banner .slick-current-page .item-progLine{ -webkit-animation: progLine 8s forwards ease-in-out .5s; animation: progLine 8s forwards ease-in-out .5s; } @-webkit-keyframes progLine{0%{width: 0;}100%{width: 100%;}} @keyframes progLine{0%{width: 0;}100%{width: 100%;}} #banner .slick-arrow{ position: absolute;z-index: 9; top: 50%;cursor: pointer; width: 60px;height: 60px; margin-top: -30px; text-indent: -999px; overflow: hidden; } #banner .slick-prev{left: 2%;} #banner .slick-next{right: 2%;} #banner .slick-arrow i{ width: 30px; height: 30px; border: 4px solid; border-color: #fff #fff transparent transparent; display: inline-block; position: absolute; left: 50%;top: 50%; margin-top: -17px; margin-left: -17px; opacity: .5; transition: .3s; -ms-transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; -o-transition: .3s; } #banner .slick-prev i{ transform: rotate(-135deg); -webkit-transform: rotate(-135deg); -o-transform: rotate(-135deg); -ms-transform: rotate(-135deg); } #banner .slick-next i{ transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); } #banner .slick-arrow:hover i{opacity: 1;} #banner .slick-dots{ position: absolute; left: 110px; left: 5.729vw; bottom: 40px; height: 4px; } #banner .slick-dots li{ width: 24px; height: 4px; float: left; margin-right: 10px; } #banner .slick-dots button{ width: 24px; height: 4px; background: #fff; opacity: .4; padding: 0;margin: 0; text-indent: -9999px; border-radius: 2px; overflow: hidden; } #banner .slick-dots .slick-active button{ opacity: 1; } #banner video{ position: absolute; left: 0;top: 0; width: 100%;/*height: 100%;*/ background: #000; } /*banner1*/ .ban-list1{ font-size: 16px; /*line-height: 60px;*/ line-height: 40px; margin-top: 20px; } .ban-list1 li{} .ban-list1 a{color: #fff;} .ban-list1 a:hover{color: #0068b6;} .ban-list1 i{ height: 30px; width: 30px; display: inline-block; vertical-align: middle; background-repeat: no-repeat; background-position: center; margin-right: 10px; } .ico_play{ background-image: url(../image/ico_play.png); } .ico_feng{ background-image: url(../image/ico_feng.png); } /*banner2*/ #banner .videoBtn{ position: absolute; left: 50%;top: 50%; width: 80px; height: 80px; background: url(../image/ico_play-big.png) center center no-repeat; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); display: none; } /*banner3*/ .g-stock{ line-height: 2; text-align: right; } .g-stock .num{ font-size: 48px; font-family: 'Arial'; font-weight: bold; line-height: 75px; border-bottom: 1px solid rgba(255,255,255,.3); margin-bottom: 10px; } .g-stock .percent{} .g-stock i{ width: 24px; height: 24px; display: inline-block; vertical-align: middle; background-repeat: no-repeat; background-position: center; /*background: url(../image/ico_down.png) center center no-repeat;*/ } .g-stock .down{background-image: url(../image/ico_down.png);} .g-stock .up{background-image: url(../image/ico_up.png);} /*banner4*/ .g-list1{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; /*justify-content: space-between;*/ justify-content: space-around; text-align: center; line-height: 30px; /*width: 650px; width: 500px;*/ } .g-list1 li{ margin: 0 15px; } .g-list1 .ico{ height: 80px; line-height: 80px; margin-bottom: 20px; } .g-list1 .ico img{ display: inline-block; vertical-align: middle; max-height: 100%; } .g-list1 .det{} .g-list1 .num{ font-size: 28px; font-family: 'SourceHanSerifCN-Bold'; line-height: 45px; margin: 10px 0; } .mouseBtn{ display: block; position: absolute; right: 110px; right: 5.729vw; bottom: 20px; width: 23px; height: 40px; cursor:pointer; background: url(../image/mouse_ico.png) -23px 0 no-repeat; -webkit-animation: nudgeMouse 1.6s linear infinite;animation: nudgeMouse 1.6s linear infinite; } .mouseBtn:after,.mouseBtn:before{content: "";position: absolute;} .mouseBtn:before{width:23px;height:40px;background:url(../image/mouse_ico.png) 0 0 no-repeat;-webkit-animation: colorSlide 1.6s linear infinite;animation: colorSlide 1.6s linear infinite;top:0;left:0;} .mouseBtn:after{background-color: #fff;width: 4px;height: 4px;border-radius: 100%;-webkit-animation: trackBallSlide 1.6s linear infinite;animation: trackBallSlide 1.6s linear infinite;top: 0;right: 0;bottom: 0;left: 0;margin: auto;} @-webkit-keyframes colorSlide { 0% {height:0;}90%{height:40px;} } @keyframes colorSlide { 0% {height:0;}90%{height:40px;} } @-webkit-keyframes trackBallSlide { 0% {opacity: 1;-webkit-transform: scale(1) translateY(-8px);transform: scale(1) translateY(-8px);} 34% {opacity: 1;-webkit-transform: scale(0.9) translateY(4px);transform: scale(0.9) translateY(4px);} 68% {opacity: 0;-webkit-transform: scale(0.4) translateY(16px);transform: scale(0.4) translateY(16px);} 100% {opacity: 0;-webkit-transform: scale(0.4) translateY(-8px);transform: scale(0.4) translateY(-8px);} } @keyframes trackBallSlide { 0% {opacity: 1;-webkit-transform: scale(1) translateY(-8px);transform: scale(1) translateY(-8px);} 34% {opacity: 1;-webkit-transform: scale(0.9) translateY(4px);transform: scale(0.9) translateY(4px);} 68% {opacity: 0;-webkit-transform: scale(0.4) translateY(16px);transform: scale(0.4) translateY(16px);} 100% {opacity: 0;-webkit-transform: scale(0.4) translateY(-8px);transform: scale(0.4) translateY(-8px);} } @-webkit-keyframes nudgeMouse { 0% {-webkit-transform: translateY(0);transform: translateY(0);} 50% {-webkit-transform: translateY(8px);transform: translateY(8px);} 100% {-webkit-transform: translateY(0);transform: translateY(0);} } @keyframes nudgeMouse { 0% {-webkit-transform: translateY(0);transform: translateY(0);} 50% {-webkit-transform: translateY(8px);transform: translateY(8px);} 100% {-webkit-transform: translateY(0);transform: translateY(0);} } /******************************* -------[=footer]------- ********************************/ #footer{ color: #999; background: #222; overflow: hidden; position: relative;z-index: 1; clear: both; } .f_top a, .f_bot a{color: #999;/*display:block;overflow:hidden;word-break:keep-all;white-space:nowrap;text-overflow:ellipsis;*/} /*#footer .wrapper{padding: 0 50px;padding: 0 2.604vw;}*/ #footer .wrapper{max-width: 1820px;} .f_top{ padding: 55px 0 65px; clear: both; } .f-info{float: left;width: 260px;} .f-logo{display: block;margin-bottom: 25px;} .f-tel{ color: #7f7f7f; } .f-tel span{ font-size: 24px; line-height: 1.5; display: block; margin-top: 10px; } .f_nav{ float: left; line-height: 24px; overflow: hidden; } .f_nav .item{ float: left; width: 180px; } .f_nav h3{ color: #fff; font-size: 16px; font-weight: normal; line-height: 30px; position: relative; padding-bottom: 7px; margin-bottom: 10px; } .f_nav h3::after{ content: ''; position: absolute; left: 0;bottom: 0; width: 1em; border-bottom: 2px solid #0068b6; } .f_nav h3 a{color: #fff;} .f_nav li a:hover{color: #fff;} .fdr{float: right;} .f-code{ float: right; color: #fff; font-size: 16px; text-align: center; margin-bottom: 25px; } .f-code img{ width: 115px; height: 115px; display: block; margin-bottom: 15px; } .f-link{ width: 220px; height: 40px; line-height: 40px; border: 1px solid rgba(255,255,255,.4); position: relative;z-index: 9; clear: both; } .f-link .value{ padding: 0 10px; position: relative; cursor: default; } .f-link .value::after{ content: ''; position: absolute; right: 10px;top: 50%; margin-top: -8px; width: 8px; height: 8px; border: 2px solid; border-color: transparent transparent #7a7a7a #7a7a7a; display: inline-block; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); } .f-link .option{ position: absolute; left: -1px;right: -1px;top: 100%; background: #000; border: 1px solid rgba(255,255,255,.4); padding: 10px 0; max-height: 80px; overflow-y: auto; opacity: 0; visibility: hidden; } .f-link .option a{ line-height: 30px; padding: 0 10px; display: block; } .f-link .option a:hover{color: #fff;} .f-link.open .value::after{ transform: rotate(135deg); -webkit-transform: rotate(135deg); -o-transform: rotate(135deg); -ms-transform: rotate(135deg); margin-top: -4px; } .f-link.open .option{ opacity: 1; visibility: visible; } .f_bot{ line-height: 30px; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.1); overflow: hidden; } .f_bot a:hover{color: #fff;} .f-copy{float: left;} .f-website{float: right;} .f_bot .split{ height: 13px; border-right: 1px solid rgba(255,255,255,.4); display: inline-block; vertical-align: middle; margin: 0 10px; position: relative;top: -2px; } #main{position: relative;z-index: 1;} /******************************* -------[=棣栭〉]------- ********************************/ .index-row{ position: relative; padding: 200px 0; background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; background-size: cover; overflow: hidden; min-height: 100vh; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .g-newSlider .g-tit1{ position: absolute; top: 0;right: 0; width: 595px; width: 35%; } /*鏈€鏂版柊闂?/ .g-newSlider{position: relative;} .g-newSlider .slider-for{} .g-newSlider .slider-for .item{overflow: hidden;} .g-newSlider .slider-for .picture{ float: left; width: 1020px; width: 60%; height: 570px; background-color: #f3f3f3; background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; background-size: cover; transform:translateX(-80px); -webkit-transform:translateX(-80px); -o-transform:translateX(-80px); -ms-transform:translateX(-80px); transition: .4s ease; -ms-transition: .4s ease; -moz-transition: .4s ease; -webkit-transition: .4s ease; -o-transition: .4s ease; } .g-newSlider .slider-for .picture img{ display: block; width: 100%; height: 100%; visibility: hidden; } .g-newSlider .slider-for .text{ float: right; width: 595px; width: 35%; color: #999; font-size: 16px; padding-top: 105px; transform:translateX(80px); -webkit-transform:translateX(80px); -o-transform:translateX(80px); -ms-transform:translateX(80px); transition: .4s ease; -ms-transition: .4s ease; -moz-transition: .4s ease; -webkit-transition: .4s ease; -o-transition: .4s ease; } .g-newSlider .slider-for .title{ font-size: 24px; font-weight: normal; line-height: 35px; word-break:keep-all; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; margin-bottom: 30px; } .g-newSlider .slider-for .date{ line-height: 25px; margin-bottom: 10px; } .g-newSlider .slider-for .detail{ line-height: 30px; height: 60px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 50px; } .g-newSlider .slider-for .slick-current .text, .g-newSlider .slider-for .slick-current .picture{ transform:translateX(0); -webkit-transform:translateX(0); -o-transform:translateX(0); -ms-transform:translateX(0); } .g-newSlider .slider-nav{ float: right; width: 100%; max-width: 1020px; overflow: hidden; margin-top: -70px; margin: -70px -20px 0; } .g-newSlider .slider-nav .item{ float: left; } .g-newSlider .slider-nav .item-con{ position: relative; margin: 0 20px; } .g-newSlider .slider-nav .item-con::after{ content: ''; position: absolute; left: 0;right: 0;top: 0;bottom: 0; border: 2px solid #0068b6; opacity: 0; transition: .3s; -ms-transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; -o-transition: .3s; } .g-newSlider .slider-nav .pic{ position: relative; height: 0; padding-top: 56%; /*width: 215px; height: 120px;*/ background: #000; position: relative; } .g-newSlider .slider-nav .pic img{ display: block; width: 100%; height: 100%; opacity: .6; position: absolute; left: 0;top: 0; } .g-newSlider .slider-nav .date{ position: absolute; left: 0;right: 0;top: 50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -ms-transform:translateY(-50%); color: #fff; font-size: 18px; font-family: 'Arial'; text-align: center; cursor: default; } .g-newSlider .slider-nav .day{ font-size: 30px; display: block; } .g-newSlider .slider-nav .slick-current .item-con::after, .g-newSlider .slider-nav .item-con:hover::after{opacity: 1;} .g-newSlider .slider-nav .slick-current .pic img{opacity: 1;} .g-newSlider .slider-nav .slick-current .date{opacity: 0;} .g-newSlider .slider-for .slick-dots{text-align: center;margin-top: 20px;height: 4px;} .g-newSlider .slider-for .slick-dots li{display: inline-block;margin: 0 5px;} .g-newSlider .slider-for .slick-dots button{ width: 24px; height: 4px; background: #333; opacity: .4; padding: 0;margin: 0; text-indent: -9999px; border-radius: 2px; overflow: hidden; } .g-newSlider .slider-for .slick-dots .slick-active button{ opacity: 1; } /*浼佷笟鏂囧寲*/ .index-culture{} .g-txt1{ font-size: 18px; } .g-txt1 .big{font-size: 50px;} .g-txt1 .ico_book{margin-right: 5px;} .ico_book{ width: 40px; height: 40px; display: inline-block; vertical-align: middle; } .index-culture-bot{ position: absolute; left: 0;right: 0;bottom: 0; margin: 100px 0; } .g-list2{ overflow: hidden; } .g-list2 ul{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: space-between; overflow: hidden; } .g-list2 li{ /*float: left;*/ width: 33.333%; background: rgba(0,104,182,.5); } .g-list2 .con{ color: #fff; padding: 20px 45px 40px; display: block; /*min-height: 185px;*/ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; transition: .4s; -ms-transition: .4s; -moz-transition: .4s; -webkit-transition: .4s; -o-transition: .4s; } .g-list2 li:nth-child(2){background: rgba(0,104,182,.3);} .g-list2 li:nth-child(3){background: rgba(0,104,182,.2);} .g-list2 li:hover{background: rgba(0,128,0,.5) !important;} .g-list2 .title{ font-size: 18px; font-weight: normal; line-height: 35px; word-break:keep-all; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; margin-bottom: 10px; } .g-list2 .title i{ width: 32px; height: 32px; display: inline-block; vertical-align: middle; background-repeat: no-repeat; background-position: center; margin-right: 10px; } .g-list2 .icon_culture1{} .g-list2 .icon_culture2{} .g-list2 .icon_culture3{} .g-list2 .slogan{ font-size: 24px; font-weight: bold; } /******************************* -------[=寮瑰嚭瑙嗛]------- ********************************/ .videoFancy{ position: fixed; left: 0;top: 0; width: 100%; height: 100%; z-index: 9999; background: rgba(0,0,0,.8); } .videoFancy .videoClose{ z-index: 9; cursor: pointer; position: absolute; right: 10px;top: 15px; width: 20px; height: 20px; display: block; } .videoFancy .videoClose::before, .videoFancy .videoClose::after{ content: ''; position: absolute; left: 50%;top: 50%; width: 2px; height: 24px; margin-left: -1px; margin-top: -12px; background: #fff; } .videoFancy .videoClose::before{ transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -o-transform:rotate(-45deg); -ms-transform:rotate(-45deg); } .videoFancy .videoClose::after{ transform:rotate(45deg); -webkit-transform:rotate(45deg); -o-transform:rotate(45deg); -ms-transform:rotate(45deg); } .videoFancy .videoCon{ z-index: 1; position: absolute; left: 50%; top: 50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); width: 80%; max-width: 970px; max-height: 600px; } .videoFancy .videoCon video{ width: 100%; background: #000; } .videoFancy .playBtn{ position: absolute; left: 0;right: 0;top: 0;bottom: 0; background: url(../image/ico_play-big.png) center center no-repeat; opacity: 0; } /******************************* -------[=鍔ㄧ敾]------- ********************************/ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } @-webkit-keyframes fadeIn {0%{opacity: 0;} 100%{opacity: 1;}} @keyframes fadeIn {0%{opacity: 0;} 100%{opacity: 1;}} .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInUp {0% {opacity: 0;-webkit-transform: translate3d(0, 30%, 0);transform: translate3d(0, 30%, 0);}100% {opacity: 1;-webkit-transform: none;transform: none;}} @keyframes fadeInUp {0% {opacity: 0;-webkit-transform: translate3d(0, 30%, 0);transform: translate3d(0, 30%, 0);}100% {opacity: 1;-webkit-transform: none;transform: none;}} .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInDown {0%{opacity: 0;-webkit-transform: translate3d(0, -30%, 0);transform: translate3d(0, -30%, 0); } 100%{opacity: 1;-webkit-transform: none;transform: none; }} @keyframes fadeInDown {0%{opacity: 0;-webkit-transform: translate3d(0, -30%, 0);transform: translate3d(0, -30%, 0); } 100%{opacity: 1;-webkit-transform: none;transform: none; }} .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInLeft {0% { opacity: 0; -webkit-transform: translate3d(-30%, 0, 0); transform: translate3d(-30%, 0, 0);}100% { opacity: 1; -webkit-transform: none; transform: none;}} @keyframes fadeInLeft {0% { opacity: 0; -webkit-transform: translate3d(-30%, 0, 0); transform: translate3d(-30%, 0, 0);}100% { opacity: 1; -webkit-transform: none; transform: none;}} .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInRight {0% {opacity: 0;-webkit-transform: translate3d(30%, 0, 0);transform: translate3d(30%, 0, 0); }100% {opacity: 1;-webkit-transform: none;transform: none; }} @keyframes fadeInRight {0% {opacity: 0;-webkit-transform: translate3d(30%, 0, 0);transform: translate3d(30%, 0, 0); }100% {opacity: 1;-webkit-transform: none;transform: none; }} .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } .wow:first-child{ -webkit-animation-delay: .1s; animation-delay: .1s; } .wow:nth-child(2){ -webkit-animation-delay: .2s; animation-delay: .2s; } .wow:nth-child(3){ -webkit-animation-delay: .3s; animation-delay: .3s; } .wow:nth-child(4){ -webkit-animation-delay: .4s; animation-delay: .4s; } .wow:nth-child(5){ -webkit-animation-delay: .5s; animation-delay: .5s; } /******************************* -------[=鍐呴〉]------- ********************************/ #ban{ height: 500px; position: relative; background-color: #222; background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; background-size: cover; } #ban .ban-txt{ position: absolute; left: 0;right: 0;top: 50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -ms-transform:translateY(-50%); } #ban .ban-txt h2{ color: #fff; font-size: 36px; } /*-----------------[浜岀骇瀵艰埅]--------------*/ #snavCur{ height: 68px; line-height: 68px; background: #f6f6f6; margin-bottom: 50px; } .g-snav{ float: left; } .g-snav li{ float: left; margin-right: 50px; } .g-snav .s1{ font-size: 16px; position: relative; display: block; } .g-snav li.active .s1{color: #0068b6;} .g-snav li.active .s1::after{ content: ''; position: absolute; left: 0;right: 0;bottom: 0; border-bottom: 2px solid #0068b6; } .g-cur{float: right;} .g-cur span{color: #0068b6;} .g-cur i{ width: 1px; height: 14px; background: #c3c3c3; display: inline-block; vertical-align: middle; transform:rotate(20deg); -webkit-transform:rotate(20deg); -o-transform:rotate(20deg); -ms-transform:rotate(20deg); margin: 0 10px; } /*-----------------[椤电爜]--------------*/ .g-page{ text-align: center; } .g-page ul{ display: inline-block; overflow: hidden; } .g-page li{ float: left; margin: 0 5px; } .g-page a{ color: #999; /*width: 34px;*/ padding: 0 13px; height: 34px; border: 1px solid #dedede; border-radius: 17px; line-height: 34px; display: block; transition: .3s; -ms-transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; -o-transition: .3s; } .g-page a:hover{color: #0068b6;} .g-page .current:hover, .g-page .current{ color: #fff; border-color: #0068b6; background: #0068b6; } .fy {width:100%; margin-top:20px;border:none;text-transform:uppercase;font-size:14px;padding:0;height:35px;clear:both;text-align:center;} .fy a {text-decoration:none;margin:0 10px 0 0;padding:8px 13px 8px 13px;font-size:14px;height:35px;line-height:35px; color: #999; /*width: 34px;*/ border: 1px solid #dedede; border-radius: 17px; transition: .3s; -ms-transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; -o-transition: .3s; } .fy a:hover {color: #fff; border-color: #0068b6; background: #0068b6;} .fy span { text-decoration:none;margin:0 10px 0 0;padding:8px 13px 8px 13px;font-size:14px;height:35px;line-height:35px; color: #fff !important; /*width: 34px;*/ border: 1px solid #dedede; border-radius: 17px; transition: .3s; -ms-transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; -o-transition: .3s; color: #fff; border-color: #0068b6; background: #0068b6; } /******************************* -------[=璧拌繘杩愯揪]------- ********************************/ /*-----------------[浼佷笟绠€浠媇--------------*/ .s-tit1{ color: #0168b5; font-size: 30px; line-height: 50px; margin-bottom: 30px; } .g-txt2{ font-size: 18px; line-height: 2; } .g-txt2 p{margin-bottom: 15px;} .m-list1{ border-bottom: 1px solid #eeeeee; margin: 35px 0; } .m-list1:last-child{border-bottom: 0;} .m-list1 ul{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: space-between; max-width: 950px; } .m-list1 li{ text-align: center; margin-bottom: 30px; } .m-list1 .icon{ height: 90px; line-height: 90px; margin-bottom: 30px; } .m-list1 .icon img{ display: inline-block; vertical-align: middle; max-height: 100%; } .m-list1 .title{ color: #0168b5; font-size: 36px; line-height: 45px; margin-bottom: 30px; } .m-list1 .detail{ font-size: 16px; line-height: 30px; } /*-----------------[缁勭粐鏋舵瀯]--------------*/ .g-picture{ padding: 20px 0; text-align: center; } /*-----------------[浼佷笟鏂囧寲]--------------*/ .m-culture{} .m-culture .item{ padding: 60px 0; } .m-culture .item-con{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: space-between; max-width: 1200px; padding: 0 2.604vw; margin: 0 auto; } .m-culture .picture{ width: 500px; width: 41.66%; overflow: hidden; } .m-culture .picture img{ display: block; width: 100%; transition: .2s ease-in; -ms-transition: .2s ease-in; -moz-transition: .2s ease-in; -webkit-transition: .2s ease-in; -o-transition: .2s ease-in; } .m-culture .picture:hover img{ -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .m-culture .text{ width: 600px; width: 50%; } .m-culture .title{ font-size: 36px; font-weight: normal; margin-bottom: 25px; } .m-culture .icon{ width: 32px; height: 32px; padding: 20px; border: 1px solid rgba(0,104,182,.4); border-radius: 50%; text-align: center; display: inline-block; vertical-align: middle; margin-right: 15px; } .m-culture .icon img{ display: inline-block; vertical-align: top; max-height: 100%; } .m-culture .slogan{ font-size: 24px; line-height: 35px; margin-bottom: 30px; } .m-culture .detail{ font-size: 16px; line-height: 2; } .m-culture .item:nth-child(2n){background: #f9f9f9;} .m-culture .item:nth-child(2n+1) .picture{order:2;} /*-----------------[浼佷笟鑽h獕]--------------*/ .m-list2{ overflow: hidden; } .m-list2 ul{ overflow: hidden; margin: 0 -35px; } .m-list2 li{ float: left; width: 25%; } .m-list2 .con{ display: block; margin: 20px 35px; } .m-list2 .pic{ height: 230px; line-height: 230px; text-align: center; background: #f9f9f9; overflow: hidden; } .m-list2 .pic img{ display: inline-block; vertical-align: middle; max-height: 100%; transition: .2s ease-in; -ms-transition: .2s ease-in; -moz-transition: .2s ease-in; -webkit-transition: .2s ease-in; -o-transition: .2s ease-in; } .m-list2 .pic:hover img{ -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } /*-----------------[棰嗗鍏虫€€]--------------*/ .m-list3{ overflow: hidden; } .m-list3 ul{ overflow: hidden; margin: 0 -25px; } .m-list3 li{ float: left; width: 33.333%; margin-bottom: 20px; } .m-list3 li:nth-child(3n+1){clear: left;} .m-list3 .con{ display: block; overflow: hidden; margin: 0 25px; } .m-list3 .pic{ height: 0; padding-top: 56%; position: relative; overflow: hidden; } .m-list3 .pic img{ display: block; width: 100%; height: 100%; position: absolute; left: 0;top: 0; transition: .2s ease-in; -ms-transition: .2s ease-in; -moz-transition: .2s ease-in; -webkit-transition: .2s ease-in; -o-transition: .2s ease-in; } .m-list3 .con:hover .pic img{ -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .m-list3 .title{ font-size: 16px; line-height: 30px; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 15px 25px; } /*-----------------[鍙戝睍鍘嗙▼]--------------*/ .m-history{ font-size: 16px; line-height: 35px; } .m-history li{ margin-bottom: 25px; } .m-history li:last-child{margin-bottom: 0;} .m-history .year{ color: #0068b6; font-size: 24px; margin-bottom: 5px; } /*-----------------[鑱旂郴鏂瑰紡]--------------*/ .m-contact{} .m-contact .item{ padding: 60px 0; } .m-contact .item:first-child{padding-top: 30px;} .m-contact .item-con{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: space-between; align-items: center; max-width: 1200px; padding: 0 2.604vw; margin: 0 auto; } .m-contact .picture{ width: 640px; width: 53%; box-shadow: 0 4px 9px rgba(0,0,0,.1); overflow: hidden; } .m-contact .picture img{ display: block; width: 100%; transition: .2s ease-in; -ms-transition: .2s ease-in; -moz-transition: .2s ease-in; -webkit-transition: .2s ease-in; -o-transition: .2s ease-in; } .m-contact .picture:hover img{ -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .m-contact .text{ width: 500px; width: 42%; } .m-contact .title{ font-size: 36px; font-weight: normal; line-height: 50px; margin-bottom: 15px; } .m-contact .detail{ color: #999; font-size: 16px; line-height: 35px; } .m-contact .detail span{color: #666;} .m-contact .item:nth-child(2n){background: #f9f9f9;} /******************************* -------[=鏂伴椈涓績]------- ********************************/ /*-----------------[浼佷笟鍔ㄦ€乚--------------*/ .m-list4{ overflow: hidden; } .m-list4 ul{ overflow: hidden; margin: 0 -50px; } .m-list4 li{ float: left; width: 33.333%; margin-bottom: 50px; } .m-list4 .con{ color: #999; font-size: 16px; line-height: 30px; display: block; margin: 0 50px; } .m-list4 .pic{ height: 0; padding-top: 56%; position: relative; overflow: hidden; margin-bottom: 35px; } .m-list4 .pic img{ display: block; width: 100%; height: 100%; position: absolute; left: 0;top: 0; transition: .2s ease-in; -ms-transition: .2s ease-in; -moz-transition: .2s ease-in; -webkit-transition: .2s ease-in; -o-transition: .2s ease-in; } .m-list4 .con:hover .pic img{ -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .m-list4 .title{ color: #333; font-size: 18px; font-weight: normal; word-break:keep-all; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; margin-bottom: 10px; } .m-list4 .date{ margin-bottom: 10px; } .m-list4 .detail{ height: 60px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 30px; } .m-list4 .more{ width: 120px; line-height: 36px; text-align: center; border: 2px solid #eeeeee; display: inline-block; transition: .3s; -ms-transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; -o-transition: .3s; } .m-list4 .con:hover .title, .m-list4 .con:hover .more{ color: #0068b6; border-color: #0068b6; } /*-----------------[浼佷笟鍔ㄦ€?璇︽儏]--------------*/ .article{ font-size: 16px; line-height: 2; margin-bottom: 50px; } .article h1{ font-size: 36px; font-weight: normal; text-align: center; line-height: 50px; margin-bottom: 20px; } .article .info{ color: #999; padding-bottom: 10px; border-bottom: 1px solid #eeeeee; margin-bottom: 35px; } .article .info .origin{float: right;} .article .content{ padding: 0 10px; max-width: 1280px; margin: 0 auto; } .article .content ol,.article .content ul{ list-style: revert; padding: revert; } .g-footer{ line-height: 80px; background: #0068b6; } .g-footer ul{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: space-between; } .g-footer li{} .g-footer a{ color: #fff; display: block; } .g-footer a:hover span{ border-bottom: 1px solid #fff; } .g-footer i{ display: inline-block; vertical-align: middle; } .g-footer .back{ width: 24px; height: 24px; background: url(../image/ico_back.png) center center no-repeat; margin-right: 6px; } .g-footer .lt, .g-footer .gt{ width: 8px; height: 8px; border: 1px solid; border-color: #fff #fff transparent transparent; display: inline-block; } .g-footer .lt{ transform: rotate(-135deg); -webkit-transform: rotate(-135deg); -o-transform: rotate(-135deg); -ms-transform: rotate(-135deg); margin-right: 6px; } .g-footer .gt{ transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); margin-left: 6px; } /*-----------------[濯掍綋鑱旂粶]--------------*/ .m-list5{ font-size: 24px; line-height: 35px; text-align: center; padding: 0 2.604vw; } .m-list5 ul{ text-align: left; display: inline-block; overflow: hidden; } .m-list5 li{ float: left; margin-bottom: 15px; } .m-list5 .con{ display: block; width: 425px; height: 270px; padding: 45px 60px; border: 1px solid #ddd; border-radius: 10px; position: relative; overflow: hidden; margin: 0 15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; transition: all .16s ease-in; -ms-transition: all .16s ease-in; -moz-transition: all .16s ease-in; -webkit-transition: all .16s ease-in; -o-transition: all .16s ease-in; } .m-list5 .con > *{position: relative;z-index: 2;} .m-list5 .con:hover{ color: #fff; background: #0068b6; } .m-list5 .icon{ position: absolute;z-index: 1; right: -12px;bottom: -22px; max-width: 124px; max-height: 124px; transition: all .16s ease-in; -ms-transition: all .16s ease-in; -moz-transition: all .16s ease-in; -webkit-transition: all .16s ease-in; -o-transition: all .16s ease-in; } .m-list5 .con:hover .icon{ filter: brightness(200%); opacity: .4; } .m-list5 .title{ font-size: 18px; font-weight: normal; line-height: 30px; margin-bottom: 25px; } .m-list5 .code{ display: block; width: 105px; height: 105px; float: right; transform:translateY(-55px); -webkit-transform:translateY(-55px); -o-transform:translateY(-55px); -ms-transform:translateY(-55px); } /*-----------------[鍥剧墖涓績]--------------*/ .m-list6{ overflow: hidden; } .m-list6 ul{ overflow: hidden; margin: 0 -33px; } .m-list6 li{ float: left; width: 33.333%; margin-bottom: 15px; } .m-list6 .con{ color: #999; font-size: 16px; line-height: 30px; margin: 0 33px; } .m-list6 .pic{ height: 0; padding-top: 57%; position: relative; overflow: hidden; margin-bottom: 15px; } .m-list6 .pic img{ display: block; width: 100%; height: 100%; position: absolute; left: 0;top: 0; transition: .2s ease-in; -ms-transition: .2s ease-in; -moz-transition: .2s ease-in; -webkit-transition: .2s ease-in; -o-transition: .2s ease-in; } .m-list6 .pic:hover img{ -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .m-list6 .pic i{ position: absolute; left: 0;top: 0; width: 100%; height: 100%; } .m-list6 .title{ color: #333; font-size: 16px; font-weight: normal; word-break:keep-all; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; margin-right: 80px; } .m-list6 .txtr{ float: right; } .m-list6 .txtr a{ display: inline-block; margin-left: 15px; } /*寮瑰嚭*/ .pop-view-box{ position: fixed; left: 0;top: 0; width: 100%; height: 100%; z-index: 999999; background: rgba(0,0,0,.8); } .pop-view-close{ position: absolute; right: 0; bottom: 100%; cursor: pointer; width: 40px; height: 40px; background: url(../image/ico_xx.png) center center no-repeat; margin-bottom: 30px; } .pop-view-inner{ position: absolute; left: 50%;top: 50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); } .pop-view-inner img, .pop-view-inner video{ display: block; max-width: 100vw; max-height: 60vh; margin: 0 auto; } .pop-view-title{ position: absolute; left: 0;right: 50px;bottom: 100%; color: #fff; font-size: 24px; font-weight: normal; line-height: 40px; margin-bottom: 30px; } /*-----------------[璧勬枡涓嬭浇]--------------*/ .m-list7{ overflow: hidden; } .m-list7 ul{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: space-between; } .m-list7 li{ width: 280px; margin-bottom: 35px; } .m-list7 .con{ color: #999; font-size: 16px; line-height: 30px; } .m-list7 .pic{ height: 400px; position: relative; overflow: hidden; margin-bottom: 15px; } .m-list7 .pic img{ display: block; width: 100%; height: 100%; transition: .2s ease-in; -ms-transition: .2s ease-in; -moz-transition: .2s ease-in; -webkit-transition: .2s ease-in; -o-transition: .2s ease-in; } .m-list7 .pic:hover img{ -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .m-list7 .pic i{ position: absolute; left: 0;top: 0; width: 100%; height: 100%; } .m-list7 .logo-mask{ background: url(../image/logo.png) center center no-repeat; -webkit-background-size: 55% auto; background-size: 55% auto; } .m-list7 .title{ color: #333; font-size: 16px; font-weight: normal; word-break:keep-all; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; margin-bottom: 5px; } .m-list7 .info{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: space-between; } /******************************* -------[=鎶曡祫鑰呰仈绯籡------- ********************************/ /*-----------------[鍏憡]--------------*/ .m-list8{} .m-list8 ul{ overflow: hidden; } .m-list8 li{ float: left; width: 705px; width: 47%; padding: 25px 0; line-height: 25px; border-bottom: 1px solid #ddd; } .m-list8 li:nth-child(2n){float: right;} .m-list8 li:first-child, .m-list8 li:nth-child(2){border-top: 1px solid #ddd;} .m-list8 .title{ font-size: 18px; font-weight: normal; word-break:keep-all; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; margin-bottom: 10px; } .m-list8 .date{ color: #999; font-size: 16px; } .m-list8 .fa-icon{ float: left; width: 40px; height: 40px; margin-right: 15px; margin-top: 10px; } .fa-icon-word{background-image: url(../image/ico_word.png);} .fa-icon-docx{background-image: url(../image/ico_word.png);} .fa-icon-doc{background-image: url(../image/ico_word.png);} .fa-icon-pdf{background-image: url(../image/ico_pdf.png);} .m-list8 .btn{ float: right; display: inline-block; text-align: center; border: 1px solid #dedede; border-radius: 50%; margin-top: 10px; margin-left: 10px; transition: .3s; -ms-transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; -o-transition: .3s; } .m-list8 .btn i{margin: 0;} .m-list8 .btn:hover{ border-color: #0068b6; background: #0068b6; } .m-list8 .btn:hover i{ filter: brightness(1000%); } /*鍥炬爣*/ .fa-icon{ width: 24px; height: 24px; display: inline-block; vertical-align: middle; background-repeat: no-repeat; background-position: center; } .fa-download{background-image: url(../image/ico_download.png);} .fa-bigView{background-image: url(../image/ico_bigview.png);} .fa-videoplay{background-image: url(../image/ico_videoplay.png);} /*-----------------[钁d簨浼氶珮绾х鐞嗗眰]--------------*/ .g-txt3{ font-size: 16px; line-height: 35px; } .g-tab-tit{ color: #666; font-size: 16px; line-height: 66px; padding: 0 40px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; margin: 40px 0; } .g-tab-tit ul{ overflow: hidden; margin-bottom: -1px; } .g-tab-tit li{ float: left; cursor: pointer; position: relative; margin-right: 80px; } .g-tab-tit li::after{ content: ''; position: absolute; left: 0;right: 0;bottom: 0; border-bottom: 3px solid #0068b6; visibility: hidden; } .g-tab-tit li:hover, .g-tab-tit .active{color: #0068b6;} .g-tab-tit li.active::after{visibility: visible;} .g-tab-tit.tab-state2{color: #666;} .g-tab-tit.tab-state2 .active{font-weight: bold;} .g-tab-con{ padding: 0 40px; } .m-manager{ overflow: hidden; } .m-manager .avatar{ float: left; width: 190px; height: 265px; background: #0068b6 url(../image/bg-avatar.png) center center no-repeat; border-radius: 5px; overflow: hidden; } .m-manager .avatar img{ width: 100%; height: 100%; } .m-manager .text{ margin-left: 245px; } .m-manager .duty{ color: #999; font-size: 20px; font-weight: normal; line-height: 1; margin-bottom: 10px; } .m-manager .name{ color: #333; font-size: 30px; font-weight: normal; margin-bottom: 15px; } .m-manager .detail{ color: #666; font-size: 16px; line-height: 2; } /*-----------------[鎶曡祫鑰呰仈绯籡--------------*/ .m-list5-1{ font-size: 24px; line-height: 30px; overflow: hidden; } .m-list5-1 ul{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: space-between; overflow: hidden; } .m-list5-1 li{} .m-list5-1 .con{ display: block; width: 280px; height: 210px; padding: 25px 20px; border: 1px solid #ddd; border-radius: 10px; position: relative; overflow: hidden; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; transition: all .16s ease-in; -ms-transition: all .16s ease-in; -moz-transition: all .16s ease-in; -webkit-transition: all .16s ease-in; -o-transition: all .16s ease-in; } .m-list5-1 .con > *{position: relative;z-index: 2;} .m-list5-1 .icon{ position: absolute;z-index: 1; right: -10px;bottom: -15px; max-width: 124px; max-height: 124px; transition: all .16s ease-in; -ms-transition: all .16s ease-in; -moz-transition: all .16s ease-in; -webkit-transition: all .16s ease-in; -o-transition: all .16s ease-in; } .m-list5-1 .title{ color: #999; font-size: 18px; font-weight: normal; margin-bottom: 15px; } .m-list5-1 .con:hover{ color: #fff; background: #0068b6; } .m-list5-1 .con:hover .title{color: #fff;} .m-list5-1 .con:hover .icon{ filter: brightness(200%); opacity: .4; } /******************************* -------[=浜у搧涓績]------- ********************************/ .m-product{} .m-product .item{ padding: 100px 0; } .m-product .item-con{ color: #333; max-width: 1490px; padding: 0 2.604vw; margin: 0 auto; } .m-product .title{ font-size: 36px; font-weight: normal; line-height: 45px; margin-bottom: 25px; } .m-product .content{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: space-between; } .m-product .picture{ width: 695px; position: relative; top: 10px; /*padding-top: 10px;*/ overflow: hidden; } .m-product .picture img{ display: block; width: 100%; transition: .2s ease-in; -ms-transition: .2s ease-in; -moz-transition: .2s ease-in; -webkit-transition: .2s ease-in; -o-transition: .2s ease-in; } .m-product .picture:hover img{ -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .m-product .text{ width: 670px; position: relative; } .m-product .para{ font-size: 16px; line-height: 35px; padding-bottom: 60px; } .m-product .para span{color: #999;} .m-product .btn2{ position: absolute; left: 0;bottom: 0; } .m-product .item:first-child{padding-top: 0;} .m-product .item:nth-child(2n){background: #f4f4f4;} .m-product .item:nth-child(2n+1) .picture{order: 2;} /*-----------------[浜у搧璇︽儏]--------------*/ #snavCur.cur-state2{ padding: 30px 0; background: none; border-bottom: 1px solid #ddd; margin-bottom: 30px; } #snavCur.cur-state2 h2{ font-size: 36px; font-weight: normal; float: left; } .m-prodcut-para{ padding-bottom: 40px; border-bottom: 1px solid #ddd; } .m-prodcut-para .para{ color: #333; font-size: 16px; line-height: 35px; } .m-prodcut-para .para span{color: #999;} .g-table1{ font-size: 16px; max-width: 1400px; margin: 0 auto; } .g-table1 table{ width: 100%; } .g-table1 thead{ background: #0068b6; } .g-table1 th, .g-table1 td{ line-height: 46px; text-align: center; } .g-table1 th{ color: #fff; line-height: 48px; font-weight: normal; } .g-table1 tbody tr{ border: 1px solid #eeeeee; } .g-table1 th:first-child, .g-table1 td:first-child{ text-align: left; padding-left: 40px; } .m-product-case{} .m-product-case .item{ position: relative; } .m-product-case h2{ position: absolute; left: 0;right: 0; top: 130px; color: #fff; font-size: 36px; text-align: center; } .m-product-case img{ display: block; width: 100%; } /******************************* -------[=鎶€鏈垱鏂癩------- ********************************/ /*-----------------[澶ф暟鎹钩鍙癩--------------*/ /*-----------------[鏁呴殰棰勬祴涓庡仴搴风鐞嗙郴缁焆--------------*/ /*-----------------[鐢电綉鍙嬪ソ鍨嬫妧鏈痌--------------*/ /*-----------------[鍒嗘暎寮忚В鍐虫柟妗圿--------------*/ /******************************* -------[=鎷涙爣鍏憡]------- ********************************/ .m-list9{} .m-list9 li{ font-size: 18px; line-height: 36px; padding: 20px 0; border-bottom: 1px solid #ddd; word-break:keep-all; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; } .m-list9 li:first-child{border-top: 1px solid #ddd;} .m-list9 .date{ float: right; color: #999; font-size: 16px; margin-left: 10px; } /******************************* -------[=鑱屼笟鍙戝睍]------- ********************************/ /*-----------------[鎷涜仒淇℃伅]--------------*/ /*-----------------[鍙戝睍閫氶亾]--------------*/ .m-career{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: space-between; align-items: center; } .m-career .text{ font-size: 16px; line-height: 35px; width: 820px; } .m-career .picture{ width: 600px; order: 2; } .m-career .picture img{ display: block; width: 100%; border-radius: 15px; } .s-tit2{ color: #333; font-size: 30px; font-weight: normal; line-height: 50px; text-align: center; margin-bottom: 30px; } .g-table2{ font-size: 16px; max-width: 1400px; margin: 0 auto; } .g-table2 table{ width: 100%; } .g-table2 thead{ background: #0068b6; } .g-table2 th, .g-table2 td{ line-height: 46px; text-align: center; border: 1px solid #eee; } .g-table2 th{ color: #fff; line-height: 48px; } /*-----------------[浜烘墠鍩瑰吇]--------------*/ .m-career{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: space-between; align-items: center; } .m-career .picture{ width: 600px; border-radius: 15px; overflow: hidden; } .m-career .picture img{ display: block; width: 100%; border-radius: 15px; transition: .2s ease-in; -ms-transition: .2s ease-in; -moz-transition: .2s ease-in; -webkit-transition: .2s ease-in; -o-transition: .2s ease-in; } .m-career .picture:hover img{ -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .m-career .text{ width: 820px; font-size: 16px; line-height: 35px; } .m-tab-tit{ color: #666; font-size: 24px; line-height: 48px; height: 58px; text-align: center; } .m-tab-tit ul{ display: inline-block; overflow: hidden; } .m-tab-tit li{ float: left; cursor: pointer; padding: 0 30px; background: #f4f4f4; border-radius: 5px; margin: 5px; } .m-tab-tit li.active{ color: #fff; background: #0068b6; } .m-career-train{} .m-career-train .item{ font-size: 16px; line-height: 35px; padding: 80px 0 70px; } .m-career-train .item-con{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: space-between; max-width: 1490px; padding: 0 2.604vw; margin: 0 auto; } .m-career-train .text{ width: 530px; } .m-career-train .title{ font-size: 30px; font-weight: normal; margin-bottom: 30px; } .m-career-train .list{ width: 915px; } .m-career-train .list ul{ overflow: hidden; margin: 0 -15px; } .m-career-train .list li{ float: left; width: 50%; } .m-career-train .list .con{ color: #999; text-align: center; display: block; margin: 0 15px; } .m-career-train .list .pic{ position: relative; height: 0; padding-top: 65%; border-radius: 8px; overflow: hidden; margin-bottom: 10px; } .m-career-train .list .pic img{ display: block; width: 100%; height: 100%; border-radius: 8px; position: absolute; left: 0;top: 0; transition: .2s ease-in; -ms-transition: .2s ease-in; -moz-transition: .2s ease-in; -webkit-transition: .2s ease-in; -o-transition: .2s ease-in; } .m-career-train .list .pic:hover img{ -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .m-career-train .list p{ word-break:keep-all; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; } .m-career-train .item:nth-child(2n){background: #f9f9f9;} .m-career-train .item:nth-child(2n+1) .text{order: 2;} /*-----------------[20190722 begin]--------------*/ .logo .txt i{font-style: normal;letter-spacing: 1px;} .g-table1 tr.active{background: #f3f3f3;} .g-table1 .pop-box{font-size: 14px;display: none;} .g-table1 .pop-box.open{display: table-row;} .g-table1 .pop-box td{padding: 20px 40px;line-height: 25px;} /*-----------------[20190722 end]--------------*/ /*-----------------[20220318 begin]--------------*/ #banner .txt { max-width: 80%; } #banner .txt .top { display: flex; align-items: center; } #banner .txt .top h2 { line-height: 1.1; } #banner .txt .code { width: 150px; height: 150px; margin-right: 20px; } @media only screen and (max-width:1900px) { #banner .txt .code { width: calc(150/1920*100vw); height: calc(150/1920*100vw); margin-right: calc(20/1920*100vw); min-width: 80px; min-height: 80px; } } @media only screen and (max-width:750px) { #banner .txt .top { display: block; } #banner .txt .code { margin: 0 auto 15px; } } @media (max-width:1280px) { .g-snav .s1 { font-size: 14px; } } /*-----------------[20220318 end]--------------*/