@charset "utf-8"; .cm { color: #1d6bdd; } .cm2 { color: #29c3ab; } .jianbian { background-image: -webkit-gradient(linear, left top, right top, from(#29c3ab), to(#16a8b5)); background-image: linear-gradient(to right, #29c3ab, #16a8b5); } @font-face { font-family: 'Geometr415BlkBT'; src: url('../font/Geometr415BlkBT.ttf'); } @font-face { font-family: 'swissbt'; src: url('../font/SWISSBT.TTF'); } @font-face { font-family: 'Century751No2BT'; src: url('../font/Century751No2BT.TTF'); } .inbanner { width: 100%; height: 540px; position: relative; overflow: hidden; } .inbanner > img { position: relative; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; z-index: 0; } .inbanner .cer { position: relative; height: 100%; } .inbanner2 { width: 100%; height: 200px; overflow: hidden; } .inbanner2 > img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } /*鍖犲績浣忓2鍏充簬 璁捐鏂藉伐娴佺▼鏍囬*/ .cate1 { text-align: center; position: relative; padding-bottom: 36px; } .cate1:after { content: ''; position: absolute; left: 50%; bottom: 0; z-index: 0; width: 50px; height: 1px; margin-left: -25px; background-color: #fff; } .cate1 .en { font-size: 24px; color: #e6462e; line-height: 24px; font-family: arial; text-transform: uppercase; font-weight: bold; letter-spacing: 3px; } .cate1 .cn { font-size: 18px; color: #666; line-height: 30px; margin-top: 8px; width: 100%; position: relative; overflow: hidden; height: 30px; } .cate1 .cn:before { content: ''; position: absolute; left: 0; top: 50%; z-index: 0; width: 50%; height: 1px; background-color: rgba(255, 255, 255, 0.1); margin-left: -74px; } .cate1 .cn:after { content: ''; position: absolute; right: 0; top: 50%; z-index: 0; width: 50%; height: 1px; background-color: rgba(255, 255, 255, 0.1); margin-right: -74px; } /*鍖犲績浣忓3浜у搧澶у垎绫 banner鏍囬*/ .ibcatein { position: absolute; width: 100%; left: 0; top: 50%; z-index: 1; color: #fff; text-align: center; overflow: hidden; margin-top: -36px; } .ibcatein .cn { font-size: 46px; line-height: 66px; font-weight: bold; margin-bottom: 10px; } .ibcatein .en { font-size: 32px; line-height: 34px; letter-spacing: 4px; font-family: 'Times New Roman'; text-transform: uppercase; } /*鍖犲績浣忓10鑱旂郴 banner鏍囬*/ .ibcatein2 { position: absolute; width: 100%; left: 0; bottom: 50%; z-index: 1; color: #fff; text-align: center; overflow: hidden; margin-bottom: 5.4%; } .ibcatein2 .cn { font-size: 24px; line-height: 40px; height: 40px; margin-top: 30px; background: url('../images/line2.png') center no-repeat; } .ibcatein2 .cn span { padding-left: 8px; letter-spacing: 8px; } .ibcatein2 .en { font-size: 0; } .ibcatein2 img { max-width: 90%; } .ibcate .bg { position: absolute; left: 50%; top: 4px; margin-left: -132px; z-index: 0; width: 265px; height: 265px; background: url('../images/huahuan1.png') center no-repeat; -webkit-animation: rotate360 30s linear infinite; animation: rotate360 30s linear infinite; } .ibcate .fig1 img { -webkit-animation: movt 8s linear 0s both infinite; animation: movt 8s linear 0s both infinite; } @-webkit-keyframes movt { 0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 25% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 75% { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } 100% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } } @keyframes movt { 0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 25% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 75% { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } 100% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } } .ibbg { -webkit-animation: pagebgfd 6s linear infinite alternate; animation: pagebgfd 6s linear infinite alternate; } @-webkit-keyframes pagebgfd { 0% { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } 100% { opacity: 1; -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } } @keyframes pagebgfd { 0% { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } 100% { opacity: 1; -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } } /*杩滆2鍏充簬鎴戜滑 鍚堜綔鍗曚綅*/ .borderwan { position: relative; } .borderwan i.ii1, .borderwan i.ii2, .borderwan i.ii3, .borderwan i.ii4 { position: absolute; z-index: 5; background-color: #cfd1f8; -webkit-transition: 0.5s; transition: 0.5s; } .borderwan i.ii1 { left: 0; top: 0; width: 0; height: 1px; } .borderwan i.ii2 { right: 0; top: 0; width: 1px; height: 0; } .borderwan i.ii3 { right: 0; bottom: 0; width: 0; height: 1px; } .borderwan i.ii4 { left: 0; bottom: 0; width: 1px; height: 0; } .borderwan:hover i.ii1, .borderwan:hover i.ii3 { width: 100%; } .borderwan:hover i.ii2, .borderwan:hover i.ii4 { height: 100%; } .btt1 img, .btt2 img, .btt3 img { -webkit-animation: move ease-in-out 2s infinite; animation: move ease-in-out 2s infinite; } @-webkit-keyframes move { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(5px); transform: translateY(5px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes move { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(5px); transform: translateY(5px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes move2 { 0% { -webkit-transform: translateX(0) rotate(0deg); transform: translateX(0) rotate(0deg); } 50% { -webkit-transform: translateX(10px) rotate(360deg); transform: translateX(10px) rotate(360deg); } 100% { -webkit-transform: translateX(0) rotate(0deg); transform: translateX(0) rotate(0deg); } } @keyframes move2 { 0% { -webkit-transform: translateX(0) rotate(0deg); transform: translateX(0) rotate(0deg); } 50% { -webkit-transform: translateX(10px) rotate(360deg); transform: translateX(10px) rotate(360deg); } 100% { -webkit-transform: translateX(0) rotate(0deg); transform: translateX(0) rotate(0deg); } } .greybg { background-color: #bdbbbc; } .greybg2 { background-color: #918f8f; } .js-qiecon2 { display: none; } .js-qiecon2.on { display: block; } .js-qiecon { position: absolute; left: 200%; top: 0; z-index: -20; opacity: 0; width: 100%; } .js-qiecon.on { position: static; left: 0; top: 0; z-index: 1; opacity: 1; } .pianyi { padding-top: 80px; margin-top: -80px; } .pianyi2 { padding-top: 170px; margin-top: -170px; } .js-qiecon-wrap1, .js-qiecon-wrap2, .js-qiecon-wrap3 { position: relative; width: 100%; overflow: hidden; } .lefthalf { float: left; width: 50%; height: 100%; position: relative; overflow: hidden; } .righthalf { float: right; width: 50%; height: 100%; position: relative; overflow: hidden; } /*鐢樻捣瀛?鐗硅壊涓婚*/ .baninfo { width: 100%; margin-top: 32px; } .erji { width: 100%; height: 44px; font-size: 0; white-space: nowrap; text-align: center; } .erji a { display: inline-block; position: relative; margin: 0 10px; overflow: hidden; width: 114px; height: 42px; background-color: transparent; border: 1px solid rgba(255, 255, 255, 0.5); font-size: 14px; color: #fff; line-height: 42px; } .erji a:hover, .erji a.on { background-color: #43ac5b; border-color: #fff; } .erji a:before { content: ''; position: absolute; left: -22px; top: -30px; z-index: 0; width: 22px; height: 30px; background: url('../images/hua1.png') center no-repeat; } .erji a:after { content: ''; position: absolute; right: -22px; bottom: -30px; z-index: 0; width: 22px; height: 30px; background: url('../images/hua2.png') center no-repeat; } .erji a:before, .erji a:after { -webkit-transition: 0.3s; transition: 0.3s; } .erji a:hover:before, .erji a.on:before { left: 0; top: 0; } .erji a:hover:after, .erji a.on:after { right: 0; bottom: 0; } /*杩滆3鑽h獕 */ .sanji { width: 100%; height: 46px; font-size: 0; white-space: nowrap; text-align: center; } .sanji a { display: inline-block; position: relative; margin: 0 30px; overflow: hidden; width: 158px; height: 44px; background-color: #fff; border: 1px solid #eb0104; font-size: 18px; color: #eb0104; line-height: 44px; font-weight: bold; } .sanji a:hover, .sanji a.on { background-color: #eb0104; color: #fff; } /*杩滆8浜у搧璇︽儏 */ .tree { height: 20px; font-size: 14px; line-height: 20px; color: #e7e7e7; } .tree a { color: #e7e7e7; padding: 0 5px; vertical-align: middle; } .tree a.leaf, .tree a:hover { color: #fff; text-decoration: underline; } .tree i { margin: 0 10px; width: 10px; vertical-align: middle; } /*瀹濆垱8浜у搧璇︽儏 */ .bneck { width: 100%; position: absolute; left: 0; bottom: 66px; z-index: 3; } .berji { font-size: 0; width: 100%; text-align: center; } .berji a { display: inline-block; width: 164px; height: 100%; font-size: 16px; color: #fff; line-height: 54px; position: relative; overflow: hidden; background-color: #66807f; margin: 10px 17px; border-radius: 8px; } .berji a:before { content: ''; position: absolute; right: 0; top: 20px; z-index: 0; width: 1px; height: 30px; display: none; } .berji a:after { content: ''; position: absolute; left: 50%; bottom: 0px; z-index: 0; margin-left: 0; width: 0; height: 4px; background-color: #0076cd; display: none; -webkit-transition: 0.3s; transition: 0.3s; } .berji a.on:after, .berji a:hover:after { width: 80px; margin-left: -40px; } .berji a.on, .berji a:hover { background-color: #1fb5b0; } /*楦跨洓骞胯揪1棣栭〉鎸夐挳*/ a.seemore { display: block; width: 172px; height: 42px; margin: 0 auto; overflow: hidden; position: relative; font-size: 16px; color: #fff; line-height: 42px; text-align: center; border: 2px solid #0292fd; border-radius: 23px; } a.seemore span { position: relative; z-index: 2; display: inline-block; padding-right: 40px; background: url('../images/jtr1.png') right no-repeat; } a.seemore:after { content: ''; position: absolute; left: 0; bottom: 0; z-index: 1; width: 100%; height: 100%; background-image: -webkit-gradient(linear, left top, right top, from(#005ffb), to(#0292fd)); background-image: linear-gradient(to right, #005ffb, #0292fd); -webkit-transition: 0.3s; transition: 0.3s; } a.seemore:hover:after { height: 0; } a.seemore:hover { background-color: #fff; color: #005ffb; } a.seemore:hover span { background-image: url('../images/jtr1h.png'); } a.seemore2 { display: block; width: 172px; height: 42px; margin: 0 auto; overflow: hidden; position: relative; font-size: 16px; color: #1e64c6; line-height: 42px; text-align: center; border: 2px solid #fff; border-radius: 23px; background-color: #fff; } a.seemore2 span { position: relative; z-index: 2; display: inline-block; padding-right: 40px; background: url('../images/jtr1h.png') right no-repeat; } .jello-h:hover { -webkit-animation: jello 1s 0s 1; animation: jello 1s 0s 1; } .rubberBand-h:hover { -webkit-animation: rubberBand 1s 0s 1; animation: rubberBand 1s 0s 1; } /*杩滆8浜у搧璇︽儏 */ .outnavbg { width: 100%; height: 60px; background-color: #f8f8f8; overflow: hidden; position: relative; z-index: 5; margin-bottom: 12px; } .outnav7 { height: 60px; padding: 0; position: relative; z-index: 1; overflow: hidden; text-align: center; } .outnav7 .nav-left, .outnav7 .nav-right { width: 40px; height: 100%; cursor: pointer; position: absolute; top: 0; z-index: 2; background-repeat: no-repeat; background-color: #eaeaea; display: none; background-position: center; -webkit-transition: 0.3s; transition: 0.3s; } .outnav7 .nav-left { left: 0; background-image: url('../images/lt3.png'); } .outnav7 .nav-right { right: 0; background-image: url('../images/gt3.png'); } .outnav7 .nav-left:hover { background-image: url('../images/lt3h.png'); background-color: #eb0104; } .outnav7 .nav-right:hover { background-image: url('../images/gt3h.png'); background-color: #eb0104; } .outnav7 #wrapper77 { width: 100%; height: 100%; position: relative; } .outnav7.on { padding: 0 40px; } .outnav7.on .nav-left, .outnav7.on .nav-right { display: block; } .nav7 { width: 100%; height: 100%; font-size: 0; white-space: nowrap; } .nav7 li { width: 170px; display: inline-block; height: 100%; overflow: hidden; } .nav7.fen2 li { width: 50%; } .nav7.fen3 li { width: 33.3%; } .nav7.fen4 li { width: 25%; } .nav7.fen5 li { width: 20%; } .nav7 li a { display: block; position: relative; color: #666; line-height: 60px; font-size: 16px; } .nav7 li a:before { content: ''; position: absolute; left: 0; top: 50%; z-index: 0; width: 1px; height: 14px; background-color: #ccc; margin-top: -7px; } .nav7 li:hover a { color: #eb0104; } .nav7 li.on a { color: #eb0104; } .merjiout { width: 100%; height: 70px; background-color: #fff; border-bottom: 1px solid #f0f0f0; } .merji { position: relative; font-size: 0; width: 100%; height: 100%; text-align: center; } .merji li { display: inline-block; width: 150px; height: 100%; position: relative; } .merji li a { display: block; font-size: 16px; color: #666; line-height: 70px; height: 70px; position: relative; } .merji li a:after { content: ''; position: absolute; left: 50%; bottom: 0; z-index: 0; width: 0; height: 2px; background-color: #1d6bdd; margin-left: 0; -webkit-transition: 0.4s; transition: 0.4s; } .merji li.on a, .merji li:hover a { color: #1d6bdd; } .merji li.on a:after, .merji li:hover a:after { width: 70px; margin-left: -35px; } @media screen and (max-width: 600px) { .merji li { max-width: 33%; } } .dinzhiout { padding: 108px 0 100px; } .dinzhiout h3 { font-size: 32px; color: #333; line-height: 50px; text-align: center; } .liuyan2 { color: #666; font-size: 0; margin: 50px auto 0; width: 680px; padding-bottom: 1px; } .liuyan2 .hang { float: left; width: 50%; margin-bottom: 20px; } .liuyan2 .hang.fat { width: 100%; height: auto; } .liuyan2 .inner { height: 100%; margin: 0 10px; } .liuyan2 .hang label { display: none; font-size: 16px; line-height: 1em; color: #666; height: 1em; margin-bottom: 13px; } .liuyan2 .hang:hover label { color: #33b597; } .liuyan2 input[type=text] { width: 100%; height: 44px; border: 1px solid #e7e7e7; line-height: 42px; text-indent: 15px; font-size: 16px; color: #666; -webkit-box-sizing: border-box; box-sizing: border-box; } .liuyan2 textarea { padding: 9px 15px; height: 160px; border: 1px solid #e7e7e7; resize: none; vertical-align: top; width: 100%; line-height: 28px; font-size: 16px; color: #666; -webkit-box-sizing: border-box; box-sizing: border-box; } .liuyan2 input[type=text]:focus, .liuyan2 textarea:focus { border-color: #1d6bdd; } .liuyan2 input[type=text], .liuyan2 textarea { -webkit-transition: 0.3s; transition: 0.3s; } .liuyan2 select { width: 100%; height: 44px; border: 0 none; line-height: 44px; text-indent: 15px; font-size: 16px; color: #666; border: 1px solid #e7e7e7; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: 0.3s; transition: 0.3s; } .liuyan2 select:focus { border-color: #1d6bdd; } .liuyan2 select option { color: #666; } .liuyan2 i.v { display: inline-block; width: 100%; height: 100%; vertical-align: top; } .liuyan2 .hang2 { height: 44px; line-height: 44px; margin-bottom: 20px; } .liuyan2 .hang2 .yzwrap { float: left; height: 100%; } .liuyan2 .hang2 i.v { width: 300px; } .liuyan2 .verifyImg { width: 96px; height: 100%; cursor: pointer; border: 1px solid #e7e7e7; vertical-align: top; margin-left: 10px; -webkit-box-sizing: border-box; box-sizing: border-box; } .liuyan2 .yzmchange { display: inline-block; vertical-align: top; width: 60px; height: 100%; background: url('../images/change2.png') center no-repeat; } .liuyan2 input#tj { float: right; width: 178px; height: 44px; border-radius: 4px; font-size: 16px; color: #fff; line-height: 44px; background-color: #1d6bdd; border: 1px solid #1d6bdd; } .liuyan2 input#tj:hover { background-color: #fff; color: #1d6bdd; } @media screen and (max-width: 750px) { .dinzhiout { padding: 60px 0; } .dinzhiout h3 { font-size: 26px; } .liuyan2 { width: 100%; } .liuyan2 .hang { float: none; width: 100%; } .liuyan2 .inner { margin: 0 0; } .liuyan2 .hang2 { height: auto; } .liuyan2 .hang2 .yzwrap { float: none; height: 44px; } .liuyan2 input#tj { float: none; display: block; margin: 30px auto 0; } } @media screen and (max-width: 560px) { .liuyan2 .hang2 i.v { width: 50%; } .dinzhiout h3 { font-size: 22px; line-height: 38px; } } .atc-out { position: relative; z-index: 5; } .atc { padding-bottom: 80px; background-color: #fff; position: relative; } .atc-h { padding: 56px 0 48px; background-color: #f7f8fa; } .atc-h h1 { font-size: 30px; color: #222; line-height: 50px; margin: 10px 0 18px; } .atc-time { font-size: 24px; color: #666; line-height: 32px; font-family: "Times New Roman"; } .atc-date { font-size: 14px; color: #999; line-height: 26px; } .atc-date span { display: inline-block; margin-right: 36px; } .atc-con { padding: 70px 0; font-size: 16px; line-height: 32px; color: #444; text-align: justify; } .atc-con img, .atc-con2 img { max-width: 100%; } .atc-con .pic, .atc-con2 .pic { padding: 24px 0; text-align: center; } .atc-con a, .atc-con2 a { color: #1d6bdd; } .atc-con2 { font-size: 16px; line-height: 34px; color: #444; text-align: justify; } .atc-pn { height: 32px; overflow: hidden; padding: 30px 0; border-top: 1px solid #dddde7; } .atc-pn > div { width: 48%; height: 32px; line-height: 32px; } .atc-pn a { display: block; height: 100%; overflow: hidden; font-size: 14px; color: #333; position: relative; } .atc-pn a:before { content: ''; position: absolute; top: 0; z-index: 0; -webkit-transition: 0.5s; transition: 0.5s; width: 30px; height: 30px; border: 1px solid #c4c4d0; border-radius: 50%; } .atc-pn a label { position: absolute; bottom: 0; z-index: 2; width: 42px; height: 100%; -webkit-transition: 0.3s; transition: 0.3s; } .atc-pn a span { margin-right: 16px; } .atc-pn a:hover { color: #1d6bdd; } .atc-pn a:hover:before { border-color: #1d6bdd; } .atc-prev { float: left; text-align: left; } .atc-prev a { padding-left: 80px; } .atc-prev a:before { left: 0; } .atc-prev label { left: 15px; background: url('../images/jtl3-a.png') left center no-repeat; } .atc-prev:hover label { left: 3px; background-image: url('../images/jtl3h-a.png'); } .atc-next { float: right; text-align: right; } .atc-next a { padding-right: 80px; } .atc-next a:before { right: 0; } .atc-next label { right: 15px; background: url('../images/jtr3-a.png') right center no-repeat; } .atc-next:hover label { right: 3px; background-image: url('../images/jtr3h-a.png'); } .videowrap { width: 100%; padding-bottom: 60%; height: 0; position: relative; text-align: center; } .video { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; } @media screen and (max-width: 960px) { .atc-h h1 { font-size: 26px; } .atc { padding-bottom: 60px; } .atc-pn { height: auto; } .atc-pn > div { width: 100%; padding: 5px 0; } .atc-prev { float: none; } .atc-next { float: none; text-align: left; } .atc-next a { padding-right: 0; padding-left: 80px; } .atc-next a:before { right: auto; left: 0; } .atc-next label { right: auto; left: 15px; background-position: left center; background-image: url('../images/jtl3-a.png'); } .atc-next:hover label { right: auto; left: 3px; background-image: url('../images/jtl3h-a.png'); } } @media screen and (max-width: 750px) { .atc-pn a { font-size: 16px; } } @media screen and (max-width: 640px) { .atc { padding-bottom: 40px; } .atc-h { padding: 40px 0; } .atc-h h1 { font-size: 22px; line-height: 40px; } .atc-con { padding: 50px 0; } .atc-prev a { padding-left: 60px; } .atc-next a { padding-left: 60px; } } @media screen and (max-width: 480px) { .atc-h h1 { font-size: 20px; line-height: 36px; } .atc-time { font-size: 20px; } } .linian { padding-top: 110px; text-align: center; } .linian h2.btitle { font-size: 42px; color: #222; line-height: 66px; height: 66px; overflow: hidden; } .linianfig { position: relative; width: 1000px; max-width: 100%; height: 400px; overflow: hidden; margin: 0 auto; } .liniancon { margin: 30px 0 90px; font-size: 16px; color: #333; line-height: 34px; } .liniancon img { max-width: 100%; } .zpout { padding: 110px 0 120px; } .rec-head { height: 76px; background-color: #fff; overflow: hidden; padding-left: 70px; border-bottom: 2px solid #333; } .rec-head .th { float: left; padding: 18px 0; width: 25%; height: 40px; overflow: hidden; font-size: 16px; color: #222; line-height: 40px; text-align: center; } .rec-head .th.zhiwei { text-align: left; } .reclist { background-color: #fff; } .reclist li { border-bottom: 1px solid #ddd; } .rec-hand { height: 64px; line-height: 64px; background-color: #fff; padding-left: 70px; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .rec-hand .td { float: left; padding: 12px 0; width: 25%; overflow: hidden; font-size: 16px; color: #222; line-height: 40px; text-align: center; height: 40px; } .rec-hand .td.zhiwei { text-align: left; } .reclist li:hover .rec-hand { background-color: #eee; } .reclist li.on .rec-hand { background-color: #333; } .reclist li.on .rec-hand .td { color: #fff; } .reclist li, .rec-hand, .reclist .td { -webkit-transition: 0.5s; transition: 0.5s; } .reclist .rec-con { display: none; } .rec-txt { font-size: 14px; color: #444; line-height: 24px; padding: 34px 70px 46px; background-color: #f7f7f7; } .rec-txt .email { color: #1d6bdd; } .rec-txt .email:hover { text-decoration: underline; } @media screen and (max-width: 1080px) { .rec-head, .rec-hand { padding-left: 40px; } .rec-txt { padding: 34px 40px 46px; } } @media screen and (max-width: 750px) { .rec-head .th { width: 33%; } .rec-head .th.bumen { display: none; } .rec-hand .td { width: 33%; } .rec-hand .td.bumen { display: none; } .rec-head, .rec-hand { padding-left: 20px; } .rec-txt { padding: 34px 20px 40px; } .linian { padding-top: 70px; } .linian h2.btitle { font-size: 34px; } .zpout { padding: 70px 0; } .liniancon { margin: 30px 0 50px; } } .lichenout { padding: 70px 0 74px; } .lichenout h2.btitle { font-size: 38px; color: #333; line-height: 56px; text-align: center; height: 56px; overflow: hidden; } .lichenlist { width: 100%; padding: 70px 0 230px; position: relative; margin: 34px auto 38px; overflow: hidden; } .lichenlist:before { content: ''; position: absolute; left: 50%; top: 0; z-index: 0; width: 0; height: 100%; border-left: 1px solid #e7e7e7; } .lichenlist li { float: left; width: 50%; height: 600px; text-align: right; position: relative; top: 0; z-index: 1; } .lichenlist li:before { content: ''; position: absolute; right: -8px; top: 13px; z-index: 0; -webkit-transition: 0.5s; transition: 0.5s; width: 15px; height: 15px; background: url('../images/dot1-fz.png') center no-repeat; } .lichenlist li:last-child { height: 530px; } .lichenlist li .inner { padding-right: 80px; } .lichenlist li:hover { z-index: 2; } .lichenlist li:hover:before { background-image: url('../images/dot1h-fz.png'); } .lichenlist li .pic { width: 100%; height: 336px; margin-top: 20px; } .lichenlist li .pic img { max-width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .lichenlist li .year { height: 42px; line-height: 42px; font-size: 24px; color: #666; font-family: "Times New Roman"; } .lichenlist li h3 { font-size: 20px; color: #333; line-height: 40px; font-weight: bold; height: 40px; overflow: hidden; -webkit-transition: 0.5s; transition: 0.5s; } .lichenlist li:hover h3 { color: #1d6bdd; } .lichenlist li:nth-child(2n) { top: 300px; text-align: left; } .lichenlist li:nth-child(2n):before { right: auto; left: -8px; } .lichenlist li:nth-child(2n) .inner { padding-left: 80px; padding-right: 0; } .chenbtn { display: block; width: 200px; height: 24px; padding-top: 42px; margin: 0 auto; font-size: 14px; color: #666; line-height: 24px; text-align: center; position: relative; } .chenbtn i { position: absolute; left: 50%; top: 0; z-index: 1; width: 32px; height: 32px; background: url('../images/load1.png') center no-repeat; margin-left: -16px; } .chenbtn:hover i { -webkit-animation: rotate360 2s linear infinite; animation: rotate360 2s linear infinite; } .chenbtn.finish { padding-top: 0; } .chenbtn.finish i { height: 0; opacity: 0; } @media screen and (max-width: 1440px) { .lichenlist li .inner { padding-right: 50px; } .lichenlist li:nth-child(2n) .inner { padding-left: 50px; } } @media screen and (max-width: 1300px) { .lichenlist li .inner { padding-right: 30px; } .lichenlist li:nth-child(2n) .inner { padding-left: 30px; } } @media screen and (max-width: 1200px) { .lichenlist { padding-bottom: 120px; } .lichenlist li { height: auto; margin-bottom: 100px; } .lichenlist li:last-child { height: auto; } .lichenlist li .pic { height: auto; } .lichenlist li .pic img { width: 100%; } .lichenlist li:nth-child(2n) { top: 150px; } } @media screen and (max-width: 750px) { .lichenout { padding: 60px 0; } .lichenout h2.btitle { font-size: 28px; } .lichenlist li:nth-child(2n) { top: 0; } .lichenlist { padding-top: 50px; padding-bottom: 20px; } .lichenlist li { margin-bottom: 50px; } } @media screen and (max-width: 640px) { .lichenlist { padding-top: 20px; } .lichenlist:before { left: 7px; } .lichenlist li { float: none; width: 100%; text-align: left; } .lichenlist li .inner { padding-left: 30px; padding-right: 0; } .lichenlist li:before { right: auto; left: 0; } .lichenlist li:nth-child(2n):before { right: auto; left: 0; } .lichenlist li .year { font-size: 20px; } .lichenlist li h3 { font-size: 18px; } } .huoout { padding: 110px 0 96px; } .huoout:before { content: ""; position: fixed; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; background: url('../images/huobg.jpg') bottom / cover no-repeat; } .huoout h2.btitle { font-size: 42px; color: #fff; line-height: 66px; text-align: center; height: 66px; overflow: hidden; } .huocon { margin: 30px auto 62px; font-size: 16px; color: #c8c8c8; line-height: 36px; max-width: 900px; text-align: center; } .huocon img { max-width: 100%; } .huobtn { display: block; width: 62px; height: 32px; padding-left: 48px; margin: 0 auto; font-size: 14px; color: #a9a9a9; line-height: 32px; position: relative; } .huobtn i { position: absolute; left: 0; top: 0; z-index: 1; width: 32px; height: 32px; background: url('../images/load1.png') center no-repeat; } .huobtn:hover i { -webkit-animation: rotate360 2s linear infinite; animation: rotate360 2s linear infinite; } .huobtn.finish { padding-left: 0; } .huobtn.finish i { width: 0; opacity: 0; } .kehulist { padding: 2px 0 60px; overflow: hidden; margin: 0 -12px; } .kehulist li { float: left; width: 16.66%; margin: 10px 0; } .kehulist li .lin { padding: 0 12px; text-align: center; } .kehulist li a { display: block; background-color: #fff; overflow: hidden; } .kehulist .pic { width: 100%; height: 120px; overflow: hidden; font-size: 0; line-height: 120px; } .kehulist img { max-width: 90%; max-height: 90%; } .kehulist li:hover a { -webkit-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); } @media screen and (max-width: 1400px) { .kehulist li { width: 20%; } } @media screen and (max-width: 1200px) { .kehulist li { width: 25%; } } @media screen and (max-width: 900px) { .kehulist li { width: 33.33%; } .huoout h2.btitle { font-size: 36px; } .huocon { line-height: 30px; } } @media screen and (max-width: 600px) { .huoout { padding: 80px 0; } .kehulist li { width: 50%; } } .csliout { padding: 90px 0; background: #191b20 url('../images/casebg1.jpg') bottom no-repeat; } .caseerji { font-size: 0; width: 100%; position: relative; text-align: center; } .caseerji a { display: inline-block; min-width: 200px; height: 46px; position: relative; color: #fff; font-size: 16px; line-height: 46px; overflow: hidden; white-space: nowrap; background-color: #303237; border-radius: 23px; margin: 5px 10px; padding: 0 5px; } .caseerji a span { margin-left: 14px; vertical-align: middle; white-space: nowrap; } .caseerji a:nth-child(n+4) span { margin-left: 0; } .caseerji a:nth-child(n+4) img { display: none; } .caseerji a:hover { background-color: #428bff; } .caseerji a.on { background-color: #3978df; } .caselist { width: auto; padding: 80px 0 34px; margin: 0 -20px; overflow: hidden; } .caselist li { float: left; width: 50%; margin-bottom: 70px; } .caselist li .lin { padding: 0 20px; } .caselist li a { display: block; width: 100%; } .caselist .pic { width: 100%; height: 0; padding-bottom: 56%; background-color: #000; overflow: hidden; position: relative; } .caselist img { position: absolute; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; opacity: 1; } .caselist li .cover { width: 100%; position: absolute; z-index: 2; left: 0; top: 0; background-color: #252729; -webkit-transform-origin: 50% 0; transform-origin: 50% 0; } .caselist li h3 { font-size: 32px; color: #fff; line-height: 52px; font-weight: bold; height: 52px; overflow: hidden; margin-top: 36px; } .caselist li .type { font-size: 18px; color: #676b74; line-height: 38px; height: 38px; overflow: hidden; } .caselist li label { font-size: 14px; color: #fff; line-height: 32px; height: 32px; overflow: hidden; display: block; position: relative; cursor: pointer; } .caselist li label i { position: absolute; left: 80px; top: 12px; z-index: 1; width: 8px; height: 8px; background: url('../images/jtr2-cs.png') center 0 no-repeat; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; } .caselist li:hover i { -webkit-transform: rotate(360deg); transform: rotate(360deg); } /*.caselist li:hover .cover{ opacity: 1;} .caselist li .cover,.caselist li img{ transition: .6s;}*/ @media screen and (max-width: 1000px) { .caseerji a span { margin-left: 4px; font-size: 14px; } } @media screen and (max-width: 780px) { .caseerji a { width: 40%; margin: 10px; min-width: 0; } .caselist { margin: 0 0; } .caselist li { float: none; width: 100%; margin-bottom: 50px; } .caselist li .lin { padding: 0 0; } .caselist li h3 { font-size: 26px; line-height: 44px; height: 44px; } } @media screen and (max-width: 600px) { .csliout { padding: 60px 0 70px; } .caselist { padding: 60px 0 20px; } } .caseall { width: 100%; height: 100vh; position: relative; overflow: hidden; background: url('../images/casebg2.jpg') center / cover no-repeat; } .caseout { width: 100%; position: absolute; left: 0; bottom: 0; z-index: 1; } .case-pn { width: 1000px; height: 60px; margin: 0 auto; overflow: hidden; position: relative; } .case-pn > div { width: 8%; height: 60px; line-height: 60px; position: absolute; top: 0; z-index: 2; } .case-pn a { font-size: 14px; color: #999; } .case-pn a:hover { color: #fff; } .case-pn h2.btitle { font-size: 38px; color: #fff; line-height: 60px; text-align: center; width: 82%; height: 100%; overflow: hidden; font-weight: bold; margin: 0 auto; } .case-prev { left: 0; text-align: left; } .case-next { right: 0; text-align: right; } #sw { position: relative; width: 100%; height: 560px; overflow: hidden; margin: 40px 0 0; padding-bottom: 102px; } #sw .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; } #sw .swiper-slide { float: left; position: relative; width: 1000px; height: 100%; z-index: 0; } #sw .swiper-slide.swiper-slide-active { z-index: 2; } /*#sw .swiper-slide.swiper-slide-prev{ opacity: 1;} #sw .swiper-slide.swiper-slide-next{ opacity: 1;}*/ .sw-next, .sw-prev { position: absolute; top: 256px; width: 48px; height: 48px; z-index: 10; cursor: pointer; font-size: 0; border-radius: 50%; -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2) inset; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2) inset; } .sw-prev:before, .sw-next:before { content: ''; position: absolute; left: 0; top: 0; z-index: 1; border-radius: 50%; width: 44px; height: 44px; border: 2px solid rgba(255, 255, 255, 0); -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; } .sw-prev:before { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .sw-next:before { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .sw-prev:hover:before { border-top-color: #fff; border-left-color: #fff; -webkit-transform: rotate(-405deg); transform: rotate(-405deg); } .sw-next:hover:before { border-top-color: #fff; border-right-color: #fff; -webkit-transform: rotate(405deg); transform: rotate(405deg); } .sw-prev { left: 110px; background: url('../images/lt2.png') center no-repeat; } .sw-next { right: 110px; background: url('../images/gt2.png') center no-repeat; } #sw .swiper-pagination { position: absolute; left: 0; bottom: 50px; z-index: 10; width: 100%; text-align: center; font-size: 0; } #sw .swiper-pagination-bullet { width: 40px; height: 2px; margin: 0 5px; display: inline-block; cursor: pointer; background-color: #fff; opacity: 0.3; border-radius: 0; -webkit-transition: all 0.22s linear 0s; transition: all 0.22s linear 0s; } #sw .swiper-pagination-bullet-active { opacity: 1; } #sw .slideinner { position: relative; width: 100%; height: 100%; background-color: #000; } .fittuwen { display: block; width: 100%; height: 100%; } .fittuwen .pic { width: 100%; height: 100%; overflow: hidden; } .fittuwen .cov { position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); -webkit-transition: 0.5s; transition: 0.5s; } .fittuwen img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: 0.5s; transition: 0.5s; } .swiper-slide-active .fittuwen .cov { background-color: rgba(0, 0, 0, 0); } .swiper-slide-active .fittuwen img { -webkit-transform: scale(1.1); transform: scale(1.1); } .fittuwen .txt { font-size: 16px; color: #eee; line-height: 28px; width: 274px; opacity: 0; position: absolute; left: 30px; bottom: 64px; z-index: 2; } .swiper-slide-active .fittuwen .txt { left: -54px; opacity: 1; -webkit-transition: 0.6s 0.6s; transition: 0.6s 0.6s; } @media screen and (max-width: 1100px) { .caseout { bottom: auto; top: 50%; -webkit-transform: translateY(-45%); transform: translateY(-45%); } .case-pn { max-width: 90%; } #sw { height: 448px; } #sw .swiper-slide { width: 800px; } .sw-next, .sw-prev { top: 200px; } .fittuwen .txt { left: 130px; } .swiper-slide-active .fittuwen .txt { left: 30px; } } @media screen and (max-width: 900px) { #sw { height: 336px; } #sw .swiper-slide { width: 600px; } .sw-next, .sw-prev { top: 144px; } .sw-prev { left: 50px; } .sw-next { right: 50px; } } @media screen and (max-width: 840px) { .case-pn { padding-bottom: 60px; } .case-pn > div { top: 60px; width: 40%; } .case-pn h2.btitle { font-size: 30px; } .case-prev { text-align: right; } .case-next { text-align: left; } } @media screen and (max-width: 750px) { #sw { height: 280px; } #sw .swiper-slide { width: 500px; } .sw-next, .sw-prev { top: 116px; } .fittuwen .txt { width: 70%; bottom: 30px; } } @media screen and (max-width: 600px) { #sw { height: 224px; } #sw .swiper-slide { width: 400px; } .sw-next, .sw-prev { top: 88px; } .sw-prev { left: 20px; } .sw-next { right: 20px; } } .network { position: relative; width: 100%; margin-top: 120px; margin-bottom: 100px; } .network .map { width: 100%; min-width: 792px; height: 670px; position: relative; } .network .map .mapImg { margin: 0 auto; text-align: center; width: 792px; height: 669px; position: relative; } .mapList { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .mapList li { width: 23px; height: 33px; position: absolute; top: 477px; left: 455px; } .mapList li .bg-y { width: auto; height: auto; position: absolute; font-size: 0px; display: none; z-index: 8; } .mapList li .mapText { width: 70px; text-align: center; position: absolute; bottom: -20px; z-index: 10; left: 50%; margin-left: -35px; font-size: 14px; color: #999; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .mapList li .pot { width: 20px; height: 22px; position: absolute; bottom: 0; z-index: 2; left: 0; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: none; background: url('../images/po1.png') 0 0 no-repeat; } .mapList li.active .pot { display: block; } .mapList li.cur .pot { background-image: url('../images/po1h.png'); } .mapList li.cur .mapText { color: #ff850e; } .mapList li:hover .mapText { color: #ff850e; } .mapList li.on .mapText { color: #ff850e; } .mapList li.cur .bg-y { display: block; } /*.mapList li.cur .bg-y2{ display: none;}*/ .mapList li:hover .pot { background-image: url('../images/po1h.png'); } .mapList li:hover .bg-y { display: block; } .mapList li.on .pot { background-image: url('../images/po1h.png'); } .mapList li.on .bg-y { display: block; } /*.mapList li.on .bg-y2 {display: block;}*/ .mapList li.on .bg-y { -webkit-animation: scaleout 0.7s infinite ease-in-out alternate; animation: scaleout 0.7s infinite ease-in-out alternate; } .mapList li.SX { top: 340px; left: 475px; } .mapList li.SX .bg-y { top: -75px; left: -34px; } .mapList li.NX { top: 275px; left: 432px; } .mapList li.NX .bg-y { top: -4px; left: -12px; } .mapList li.GS { top: 320px; left: 410px; } .mapList li.GS .bg-y { top: -124px; left: -151px; } .mapList li.SC { top: 390px; left: 392px; } .mapList li.SC .bg-y { top: -28px; left: -77px; } .mapList li.ZQ { top: 413px; left: 445px; } .mapList li.ZQ .bg-y { top: -12px; left: -9px; } .mapList li.SXX { left: 520px; top: 286px; } .mapList li.SXX .bg-y { top: -42px; left: -13px; } .mapList li.XJ { left: 168px; top: 173px; } .mapList li.XJ .bg-y { top: -109px; left: -168px; } .mapList li.YN { left: 354px; top: 514px; } .mapList li.YN .bg-y { top: -59px; left: -47px; } .mapList li.GX { left: 483px; top: 530px; } .mapList li.GX .bg-y { top: -15px; left: -60px; } .mapList li.HN { left: 502px; top: 614px; } .mapList li.HN .bg-y { top: 17px; left: -15px; } .mapList li.GD { left: 554px; top: 514px; } .mapList li.GD .bg-y { top: 14px; left: -52px; } .mapList li.HNN { left: 543px; top: 449px; } .mapList li.HNN .bg-y { top: -9px; left: -54px; } .mapList li.HB { left: 538px; top: 401px; } .mapList li.HB .bg-y { top: -17px; left: -55px; } .mapList li.HNNN { left: 551px; top: 338px; } .mapList li.HNNN .bg-y { top: -15px; left: -40px; } .mapList li.FJ { left: 645px; top: 475px; } .mapList li.FJ .bg-y { top: -6px; left: -37px; } .mapList li.JX { left: 591px; top: 446px; } .mapList li.JX .bg-y { top: -9px; left: -25px; } .mapList li.ZJ { left: 655px; top: 413px; } .mapList li.ZJ .bg-y { top: 14px; left: -22px; } .mapList li.AH { left: 606px; top: 383px; } .mapList li.AH .bg-y { top: -32px; left: -26px; } .mapList li.JS { left: 645px; top: 356px; } .mapList li.JS .bg-y { top: -16px; left: -46px; } .mapList li.SD { left: 595px; top: 300px; } .mapList li.SD .bg-y { top: -14px; left: -18px; } .mapList li.TJ { left: 592px; top: 233px; } .mapList li.TJ .bg-y { top: 1px; left: -19px; } .mapList li.LN { left: 668px; top: 179px; } .mapList li.LN .bg-y { top: 1px; left: -49px; } .mapList li.HBB { left: 562px; top: 261px; } .mapList li.HBB .bg-y { top: -59px; left: -12px; } .mapList li.GZ { left: 445px; top: 470px; } .mapList li.GZ .bg-y { top: -15px; left: -38px; } .mapList li.HLJ { top: 66px; left: initial; right: 70px; } .mapList li.HLJ .bg-y { top: -66px; right: -66px; } .mapList li.XZ { top: 330px; left: 125px; } .mapList li.XZ .bg-y { top: -42px; left: -95px; } .mapList li.QH { top: 280px; left: 271px; } .mapList li.QH .bg-y { top: -24px; left: -68px; } .mapList li.NMG { top: 190px; left: 480px; } .mapList li.NMG .bg-y { top: -184px; left: -151px; } .mapList li.JL { top: 125px; left: 688px; } .mapList li.JL .bg-y { top: 1px; left: -54px; } .mapList li.TW { top: 531px; left: 675px; } .mapList li.BJ { top: 200px; left: 565px; } .mapList li.BJ .bg-y { top: 30px; left: 15px; } .mapList li.SH { top: 371px; left: 670px; } .mapList li.SH .bg-y { top: 40px; left: 0px; } .mapList li.XG { top: 530px; left: 580px; } .mapList li.XG .bg-y { top: 40px; left: -8px; } .mapList li.AM { top: 542px; left: 534px; } .mapList li.AM .bg-y { top: 31px; left: 23px; } .mapList li.SD .mapText { bottom: 0; margin-left: -20px; } .mapList li.HB .mapText { bottom: -5px; } .mapList li.JS .mapText { bottom: 0; } .mapList li.HNN .mapText { margin-left: -55px; } .mapList li.AH .mapText { bottom: 0; } .mapList li.SX .mapText { bottom: 0; } .mapList li.ZQ .mapText { bottom: -5px; margin-left: -30px; } .mapList li.SXX .mapText { bottom: 0; } .mapList li.TJ .mapText { bottom: -10px; margin-left: -20px; } .mapList li.BJ .mapText { bottom: -10px; margin-left: -20px; } .mapList li.HBB .mapText { bottom: -5px; } .nwright { width: 100%; height: auto; margin-top: 70px; } .nettitle { width: 100%; height: 40px; overflow: hidden; position: relative; } .netprovince { height: 100%; font-size: 24px; color: #333; line-height: 40px; font-weight: bold; } .netprovince > div { position: relative; z-index: 1; } .netprovince:after { content: ''; position: absolute; right: 0; top: 50%; z-index: 0; width: 70%; height: 1px; background-color: #eee; } /* background: url('../images/point.png') 4px center no-repeat;*/ .shoplist { margin-top: 45px; } .shoplist li { width: 100%; overflow: hidden; padding: 10px 0; border-bottom: 1px solid #eee; } .shoplist li p.nodata { text-align: center; font-size: 20px; color: #3978df; font-weight: bold; line-height: 60px; } .shoplist li div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; line-height: 36px; font-size: 0; } .shoplist li span { display: inline-block; height: 100%; padding-left: 68px; padding-right: 50px; position: relative; font-size: 18px; color: #333; font-weight: bold; -webkit-transition: .5s; transition: .5s; } .shoplist .shopname { background: url('../images/lx1.png') 11px no-repeat; } .shoplist .shoptel { background: url('../images/lx2.png') 13px no-repeat; } .shoplist .shopaddr { background: url('../images/lx3.png') 13px no-repeat; } .shoplist li:hover span { color: #3978df; } .shoplist li span:before { content: ''; position: absolute; left: 0; top: 14px; z-index: -1; width: 18px; height: 18px; background-color: #eee; border-radius: 50%; } .shoplist li span:after { content: ''; position: absolute; left: 50px; top: 7px; z-index: 0; width: 1px; height: 22px; background-color: #e9e9e9; } .shoplist li:hover .shopname { background-image: url('../images/lx1h.png'); } .shoplist li:hover .shoptel { background-image: url('../images/lx2h.png'); } .shoplist li:hover .shopaddr { background-image: url('../images/lx3h.png'); } .shoplist li a { font-size: 14px; color: #0066cc; line-height: 36px; height: 36px; overflow: hidden; display: block; position: relative; padding-right: 18px; } .shoplist li a:hover { text-decoration: underline; } .shoplist li a i { position: absolute; right: 0; top: 14px; z-index: 1; width: 8px; height: 8px; background: url('../images/jtr2.png') center 0 no-repeat; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; } .shoplist li a:hover i { -webkit-transform: rotate(360deg); transform: rotate(360deg); } @media screen and (max-width: 1360px) { .shoplist li span { padding-left: 38px; } .shoplist .shopname, .shoplist .shoptel, .shoplist .shopaddr { background-position: 0 7px; } .shoplist li span:after { display: none; } } @media screen and (max-width: 960px) { .shoplist li span { font-weight: normal; } } @media screen and (max-width: 870px) { .network { margin-top: 60px; margin-bottom: 50px; } .network .map { -webkit-transform: scale(0.9); transform: scale(0.9); left: 50%; margin-left: -396px; } .nwright { margin-top: 0; } } @media screen and (max-width: 740px) { .network .map { -webkit-transform: scale(0.8); transform: scale(0.8); } } @media screen and (max-width: 660px) { .network { margin-top: 0; margin-bottom: 0; } .network .map { -webkit-transform: scale(0.7); transform: scale(0.7); } } @media screen and (max-width: 560px) { .nwright { margin-top: -50px; } .network .map { -webkit-transform: scale(0.6); transform: scale(0.6); } } .nwpopup { width: 100%; } .nettitle2 { width: 100%; height: 40px; overflow: hidden; position: relative; } .netprovince2 { height: 100%; font-size: 24px; color: #333; line-height: 40px; font-weight: bold; } .netprovince2 > div { position: relative; z-index: 1; } .shoplist2 { margin-top: 30px; height: 417px; overflow: auto; } .shoplist2 li { width: 100%; overflow: hidden; padding: 15px 0; border-bottom: 1px solid #e6e9ef; } .shoplist2 li p.nodata { text-align: center; font-size: 20px; color: #3978df; font-weight: bold; line-height: 60px; } .shoplist2 li div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; line-height: 30px; font-size: 0; } .shoplist2 li span { display: inline-block; height: 100%; padding: 0 10px; position: relative; font-size: 16px; color: #333; word-break: break-all; -webkit-transition: .5s; transition: .5s; -webkit-box-sizing: border-box; box-sizing: border-box; } .shoplist2 li:hover span { color: #3978df; } .shoplist2 li.first { background-color: #f3f6fa; padding: 10px 0; } .shoplist2 li.first span { font-weight: bold; } .shoplist2 span.shoparea { width: 12%; } .shoplist2 span.shopname { width: 12%; } .shoplist2 span.shopzhiwu { width: 18%; } .shoplist2 span.shoptel { width: 18%; } .shoplist2 span.shopaddr { width: 40%; } .fu { position: fixed; width: 100%; height: 100%; z-index: 150; top: 0; left: 0; display: none; } .fubg { position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 1; background-color: rgba(0, 0, 0, 0.6); } .fuin { position: absolute; width: 1200px; height: 650px; background-color: #fff; left: 50%; margin-left: -600px; top: 50%; margin-top: -320px; z-index: 3; } .fuin { -webkit-transition: 0.3s; transition: 0.3s; -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0; } .fu.on .fuin { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } .fu a.close { width: 40px; height: 40px; position: absolute; top: 20px; right: 20px; z-index: 1; cursor: pointer; background: url('../images/cha.png') center no-repeat; } .fu a.close:hover { background-color: #eee; } .fuin .fucon { padding: 80px 60px; overflow: hidden; } @media screen and (max-width: 1200px) { .fuin { width: 100%; left: 0; margin-left: 0; } .fuin .fucon { padding: 80px 30px; } } @media screen and (max-width: 980px) { .shoplist2 li span { padding: 0 5px; } .shoplist2 span.shoparea { width: 16%; } .shoplist2 span.shopname { width: 16%; } .shoplist2 span.shopzhiwu { width: 18%; } .shoplist2 span.shoptel { width: 20%; } .shoplist2 span.shopaddr { width: 30%; } } .proliout { padding: 55px 0 80px; background: #14171f url('../images/casebg1.jpg') bottom no-repeat; } .prolist { padding: 55px 0 52px; margin: 0 -13px; overflow: hidden; } .prolist li { float: left; width: 25%; margin-bottom: 28px; } .prolist li .lin { padding: 0 13px; } .prolist li a { display: block; background-color: #fff; position: relative; padding: 60px 0 70px; overflow: hidden; } .prolist .covpic { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; opacity: 0; -webkit-transition: opacity 1.2s; transition: opacity 1.2s; } .prolist .covpic img { display: block; position: absolute; top: 50%; left: 50%; max-width: 100%; max-height: 100%; -webkit-transform: translate(-50%, -50%) scale(1.4); transform: translate(-50%, -50%) scale(1.4); -webkit-transition: -webkit-transform 1.2s; transition: -webkit-transform 1.2s; transition: transform 1.2s; transition: transform 1.2s, -webkit-transform 1.2s; } .prolist li:hover .covpic { opacity: 1; } .prolist li:hover .covpic img { -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } .prolist .pic { width: 100%; height: 150px; position: relative; line-height: 150px; overflow: hidden; margin: 22px 0 48px; } .prolist li .wz { padding: 0 30px; text-align: center; position: relative; top: 0; } .prolist li h3 { font-size: 20px; color: #000; line-height: 38px; height: 38px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .prolist li .txt { font-size: 14px; color: #666; line-height: 26px; height: 52px; overflow: hidden; } .prolist li .wz2 { position: absolute; left: 0; bottom: -70px; z-index: 1; width: 100%; height: 70px; padding: 0 30px; background-color: #0071e3; opacity: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .prolist li .wz2 label { display: block; height: 100%; overflow: hidden; cursor: pointer; font-family: "Times New Roman"; font-size: 18px; color: #fff; line-height: 70px; background: url('../images/jtr1-pro.png') right no-repeat; } .prolist li:hover .wz { top: -30px; } .prolist li:hover .wz2 { bottom: 0; opacity: 1; } .prolist li:hover i { -webkit-animation-play-state: running; animation-play-state: running; } .prolist .wz2 { -webkit-transition: .3s .3s; transition: .3s .3s; } .prolist .wz { -webkit-transition: .5s; transition: .5s; } .sandian { position: relative; height: 20px; font-size: 0; } .sandian i { display: inline-block; width: 18px; height: 18px; margin: 0 5px; border-radius: 50%; border: 1px solid #eee; -webkit-box-shadow: 0 0 0 3px #fff inset; box-shadow: 0 0 0 3px #fff inset; -webkit-animation: sandian 1.5s infinite; animation: sandian 1.5s infinite; -webkit-animation-play-state: paused; animation-play-state: paused; } .sandian i.i1 { background-color: #ff8080; } .sandian i.i2 { background-color: #80a1ff; } .sandian i.i3 { background-color: #ffb380; } .sandian i.i1 { -webkit-animation-delay: 0s; animation-delay: 0s; } .sandian i.i2 { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } .sandian i.i3 { -webkit-animation-delay: 1s; animation-delay: 1s; } @-webkit-keyframes sandian { 0% { -webkit-box-shadow: 0 0 0 3px #fff inset; box-shadow: 0 0 0 3px #fff inset; } 33% { -webkit-box-shadow: 0 0 0 0 #fff inset; box-shadow: 0 0 0 0 #fff inset; } 100% { -webkit-box-shadow: 0 0 0 3px #fff inset; box-shadow: 0 0 0 3px #fff inset; } } @keyframes sandian { 0% { -webkit-box-shadow: 0 0 0 3px #fff inset; box-shadow: 0 0 0 3px #fff inset; } 33% { -webkit-box-shadow: 0 0 0 0 #fff inset; box-shadow: 0 0 0 0 #fff inset; } 100% { -webkit-box-shadow: 0 0 0 3px #fff inset; box-shadow: 0 0 0 3px #fff inset; } } @media screen and (max-width: 1230px) { .prolist li { width: 33.33%; } } @media screen and (max-width: 1100px) { .prolist { margin: 0 -10px; } .prolist li .lin { padding: 0 10px; } .prolist li .wz { padding: 0 20px; } } @media screen and (max-width: 900px) { .prolist li { width: 50%; } } @media screen and (max-width: 640px) { .prolist { margin: 0; } .prolist li { width: 100%; } .prolist li .lin { padding: 0; } .prolist li a { padding: 30px 0; } .prolist li:hover .wz { top: 0; } .prolist li:hover .wz2 { bottom: -70px; opacity: 0; } } .cpban { position: relative; width: 100%; height: 540px; overflow: hidden; } .cpban .bg { position: absolute; left: 0; top: 0; z-index: 0; width: 100%; height: 100%; } .cpban .bg img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .issues { padding: 100px 0; height: 340px; overflow: hidden; position: relative; z-index: 1; } .issues .pic { float: right; width: 792px; height: 100%; font-size: 0; text-align: center; line-height: 340px; background: url('../images/led-tai.png') center bottom no-repeat; } .issues img { max-width: 100%; max-height: 100%; } .issues .ttxt { position: absolute; left: 0; top: 208px; z-index: 1; width: 400px; } .issues .ttxt .fig { height: 60px; font-size: 0; margin-bottom: 15px; } .issues .ttxt .fig img { max-height: 100%; } .issues .ttxt .cn { font-size: 42px; color: #fff; line-height: 62px; height: 62px; overflow: hidden; } .issues .ttxt .en { font-size: 26px; color: #fff; line-height: 40px; height: 40px; font-family: "Times New Roman"; text-transform: uppercase; overflow: hidden; } .fsouout { position: relative; z-index: 10; height: 40px; overflow: hidden; } .souleft { float: left; width: 70%; padding-left: 28px; position: relative; font-size: 0; line-height: 40px; height: 40px; overflow: hidden; } .souleft:before { content: ''; position: absolute; left: 0; top: 6px; z-index: 0; border-radius: 50%; width: 28px; height: 28px; background: #0071e3 url('../images/tian.png') center no-repeat; } .souleft a { display: inline-block; font-size: 16px; color: #c5c5c5; padding: 0 20px; position: relative; } .souleft a + a:before { content: ''; position: absolute; left: 0; top: 12px; z-index: 0; width: 1px; height: 16px; background-color: rgba(198, 198, 198, 0.3); } .souleft a:hover, .souleft a.on { color: #0071e3; } .sou { width: 160px; height: 100%; overflow: hidden; float: right; position: relative; padding-right: 52px; } .sou form { height: 100%; } .sou input.soutxt { width: 100%; height: 38px; background-color: #2c2f36; display: block; border-radius: 20px 0 0 20px; line-height: 38px; font-size: 14px; text-indent: 20px; border: 1px solid #2c2f36; color: #666; } .sou input.soubtn { position: absolute; top: 0; right: 0; z-index: 2; width: 50px; height: 100%; cursor: pointer; font-size: 0; background: #2c2f36 url('../images/glass.png') center no-repeat; border: 0 none; border-radius: 0 20px 20px 0; } .sou, .sou input.soutxt, .sou input.soubtn { -webkit-transition: 0.3s; transition: 0.3s; } .sou input.soutxt:focus { border-color: #888; } .sou input.soubtn:hover { background-color: #0071e3; background-image: url('../images/glass2.png'); } .souwrap { width: 100%; height: 100%; overflow: hidden; position: relative; } .souinner { white-space: nowrap; height: 100%; overflow: hidden; } @media screen and (max-width: 1000px) { .fsouout { height: auto; } .souinner { white-space: normal; } .souleft { width: 100%; height: auto; margin-bottom: 10px; } .issues .pic { width: 70%; } } @media screen and (max-width: 750px) { .cpban { height: auto; } .issues { height: auto; padding-bottom: 80px; } .issues .pic { float: none; width: 100%; height: 340px; } .issues .ttxt { position: static; top: 0; width: 100%; margin-top: 20px; } } /*棣栭〉*/ .section { position: relative; overflow: hidden; background-color: #000; width: 100%; height: 100vh; } /*animation: fnext 2.2s infinite cubic-bezier(0.65,0.05,0.36,1);*/ @-webkit-keyframes fnext { 0% { -webkit-transform: translateY(-10px); transform: translateY(-10px); opacity: 0; } 30%, 70% { opacity: 1; } 100% { -webkit-transform: translateY(10px); transform: translateY(10px); opacity: 0; } } @keyframes fnext { 0% { -webkit-transform: translateY(-10px); transform: translateY(-10px); opacity: 0; } 30%, 70% { opacity: 1; } 100% { -webkit-transform: translateY(10px); transform: translateY(10px); opacity: 0; } } .section3 { background-color: #333; } .sectionbg4 { position: absolute; left: 0; top: 0; z-index: 0; width: 100%; height: 100%; background: #ffffff url('../images/sec4.jpg') bottom no-repeat; } .mouse { position: absolute; left: 50%; bottom: 60px; z-index: 8; line-height: 28px; height: 76px; cursor: pointer; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .mouse > label { display: block; height: 28px; font-size: 12px; color: #fff; white-space: nowrap; cursor: pointer; } .mouse > b { position: absolute; top: 36px; width: 1px; left: 0; right: 0; margin: auto; overflow: hidden; background-color: #555; } .mouse > b.i1 { left: -12px; height: 40px; } .mouse > b.i1:after { content: ""; position: absolute; height: 50%; width: 100%; background-color: #fff; bottom: 100%; left: 0; -webkit-animation: rise1 1.6s linear infinite; animation: rise1 1.6s linear infinite; } .mouse > b.i2 { right: -12px; height: 24px; } .mouse > b.i2:after { content: ""; position: absolute; height: 50%; width: 100%; background-color: #fff; bottom: 100%; left: 0; -webkit-animation: rise2 1.6s linear infinite; animation: rise2 1.6s linear infinite; } @-webkit-keyframes rise1 { 0% { -webkit-transform: translate(0); transform: translate(0); } 100% { -webkit-transform: translateY(80px); transform: translateY(80px); } } @keyframes rise1 { 0% { -webkit-transform: translate(0); transform: translate(0); } 100% { -webkit-transform: translateY(80px); transform: translateY(80px); } } @-webkit-keyframes rise2 { 0% { -webkit-transform: translate(0); transform: translate(0); } 100% { -webkit-transform: translateY(48px); transform: translateY(48px); } } @keyframes rise2 { 0% { -webkit-transform: translate(0); transform: translate(0); } 100% { -webkit-transform: translateY(48px); transform: translateY(48px); } } .marketout { padding-top: 100px; } .market { width: 100%; height: 710px; position: relative; overflow: hidden; } .marketl { position: relative; width: 25%; padding-top: 172px; margin-left: 30px; } .marketl h2 { font-size: 52px; color: #1d6bdd; line-height: 56px; word-break: normal; font-family: "Times New Roman"; text-transform: uppercase; position: relative; padding-bottom: 26px; } .marketl h2:after { content: ''; position: absolute; left: 0; bottom: 0; z-index: 0; width: 30px; height: 3px; background-color: #1d6bdd; } .marketl h3 { font-size: 36px; color: #333; line-height: 70px; margin-top: 30px; } .marketl .txt { font-size: 16px; color: #333; line-height: 26px; } .world { position: absolute; right: 0; top: 0; z-index: 0; width: 1179px; height: 710px; background: url('../images/world.png') no-repeat; } @media screen and (max-height: 680px) { .market { height: 570px; } .world { -webkit-transform: scale(0.8); transform: scale(0.8); -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; } } @media screen and (max-width: 1380px) { .marketl h2 { font-size: 40px; } } @media screen and (max-width: 1240px) { .world { -webkit-transform: scale(0.8); transform: scale(0.8); -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; } .marketl { width: auto; padding-top: 0; } .marketl h2 { font-size: 30px; line-height: 50px; padding-bottom: 0; } .marketl h3 { font-size: 30px; line-height: 50px; margin-top: 10px; } } @media screen and (max-width: 1023px) { .marketl { margin-left: 0; } } @media screen and (max-width: 960px) { .world { -webkit-transform: scale(0.6); transform: scale(0.6); -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; } } @media screen and (max-width: 750px) { .world { -webkit-transform: scale(0.5); transform: scale(0.5); } } @media screen and (max-width: 640px) { .world { -webkit-transform: scale(0.4); transform: scale(0.4); } } @media screen and (max-width: 540px) { .world { right: auto; left: 0; -webkit-transform-origin: 0 50%; transform-origin: 0 50%; } } .world > div { position: absolute; z-index: 5; width: 14px; height: 14px; border-radius: 50%; -webkit-box-shadow: 0px 0px 0px 30px rgba(47, 121, 229, 0.15); box-shadow: 0px 0px 0px 30px rgba(47, 121, 229, 0.15); background-color: #2f79e5; white-space: nowrap; } .world .zhuanzhu { font-size: 24px; line-height: 100px; color: #1d6bdd; position: absolute; left: 822px; top: 142px; z-index: 10; } .world .zhuanzhu em { font-size: 72px; font-weight: bold; margin-right: 10px; } .world .pulse { position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 100%; border-radius: 50%; background-color: rgba(47, 121, 229, 0.5); -webkit-animation: circlepulse 1.5s ease 0s infinite; animation: circlepulse 1.5s ease 0s infinite; } @media screen and (max-width: 960px) { .world .zhuanzhu { left: 800px; top: 120px; } } .world label { font-size: 18px; color: #276fd9; position: absolute; z-index: 1; } div.pin-01 label { bottom: 20px; left: -20px; } div.pin-02 label { bottom: -11px; right: 32px; } div.pin-03 label { top: -50px; left: -11px; } div.pin-04 label { top: 40px; left: -20px; } div.pin-05 label { top: 34px; left: -11px; } div.pin-06 label { top: 34px; left: -20px; } div.pin-07 label { bottom: -11px; left: 39px; } @-webkit-keyframes circlepulse { 0% { -webkit-transform: scale(2); opacity: 1; } 100% { -webkit-transform: scale(4); opacity: 0; } } @media screen and (max-width: 750px) { .world label { font-size: 24px; } } @media screen and (max-width: 640px) { .world label { font-size: 30px; } } @media screen and (max-width: 540px) { .world label { font-size: 36px; } } .world > div.pin-01 { top: 214px; left: 140px; -webkit-animation: pin02 3s ease-in-out 0s infinite; animation: pin02 3s ease-in-out 0s infinite; } .world > div.pin-02 { top: 260px; left: 562px; -webkit-animation: pin03 3s ease-in-out 0.5s infinite; animation: pin03 3s ease-in-out 0.5s infinite; } .world > div.pin-03 { top: 334px; left: 854px; -webkit-animation: pin01 3s ease-in-out 1s infinite; animation: pin01 3s ease-in-out 1s infinite; } .world > div.pin-04 { top: 459px; left: 311px; -webkit-animation: pin02 3s ease-in-out 1.5s infinite; animation: pin02 3s ease-in-out 1.5s infinite; } .world > div.pin-05 { top: 430px; left: 560px; -webkit-animation: pin02 3s ease-in-out 2s infinite; animation: pin02 3s ease-in-out 2s infinite; } .world > div.pin-06 { top: 440px; left: 802px; -webkit-animation: pin02 3s ease-in-out 2.5s infinite; animation: pin02 3s ease-in-out 2.5s infinite; } .world > div.pin-07 { top: 559px; left: 940px; -webkit-animation: pin03 3s ease-in-out 3s infinite; animation: pin03 3s ease-in-out 3s infinite; } @-webkit-keyframes pin01 { 0% { -webkit-box-shadow: 0px 0px 0px 8px rgba(47, 121, 229, 0.15); box-shadow: 0px 0px 0px 8px rgba(47, 121, 229, 0.15); } 50% { -webkit-box-shadow: 0px 0px 0px 28px rgba(47, 121, 229, 0.15); box-shadow: 0px 0px 0px 28px rgba(47, 121, 229, 0.15); } 100% { -webkit-box-shadow: 0px 0px 0px 8px rgba(47, 121, 229, 0.15); box-shadow: 0px 0px 0px 8px rgba(47, 121, 229, 0.15); } } @-webkit-keyframes pin02 { 0% { -webkit-box-shadow: 0px 0px 0px 8px rgba(47, 121, 229, 0.15); box-shadow: 0px 0px 0px 8px rgba(47, 121, 229, 0.15); } 50% { -webkit-box-shadow: 0px 0px 0px 23px rgba(47, 121, 229, 0.15); box-shadow: 0px 0px 0px 23px rgba(47, 121, 229, 0.15); } 100% { -webkit-box-shadow: 0px 0px 0px 8px rgba(47, 121, 229, 0.15); box-shadow: 0px 0px 0px 8px rgba(47, 121, 229, 0.15); } } @-webkit-keyframes pin03 { 0% { -webkit-box-shadow: 0px 0px 0px 8px rgba(47, 121, 229, 0.15); box-shadow: 0px 0px 0px 8px rgba(47, 121, 229, 0.15); } 50% { -webkit-box-shadow: 0px 0px 0px 18px rgba(47, 121, 229, 0.15); box-shadow: 0px 0px 0px 18px rgba(47, 121, 229, 0.15); } 100% { -webkit-box-shadow: 0px 0px 0px 8px rgba(47, 121, 229, 0.15); box-shadow: 0px 0px 0px 8px rgba(47, 121, 229, 0.15); } } .section3 .cer8 { position: relative; z-index: 2; height: 100%; pointer-events: none; } .fcate1 { position: absolute; right: 7.8%; top: 50%; margin-top: -250px; z-index: 20; } .fcate1 .cn { font-size: 36px; color: #fff; line-height: 48px; height: 48px; padding-left: 64px; } .fcate1:after { content: ''; position: absolute; left: 0; top: 50%; z-index: 0; width: 40px; height: 1px; background-color: rgba(255, 255, 255, 0.4); } .peijianlist { font-size: 0; text-align: center; height: 120px; position: absolute; left: 7.8%; bottom: 95px; z-index: 2; pointer-events: auto; } .peijianlist li { display: inline-block; width: 70px; margin-right: 200px; vertical-align: top; pointer-events: auto; } .peijianlist li:last-child { margin-right: 0; } .peijianlist li a { display: block; position: relative; width: 100%; padding-top: 72px; padding-bottom: 22px; } .peijianlist li i { position: absolute; left: 50%; bottom: -5px; z-index: 0; margin-left: -5px; width: 10px; height: 10px; background-color: #fff; border-radius: 50%; -webkit-box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2); -webkit-transition: .3s; transition: .3s; } .peijianlist .pic { width: 100%; overflow: hidden; font-size: 0; line-height: 50px; position: absolute; left: 0; top: 0; } .peijianlist .pic.i1 { z-index: 0; height: 50px; } .peijianlist .pic.i2 { z-index: 1; height: 0; opacity: 0; -webkit-transition: 0.8s; transition: 0.8s; } .peijianlist img { max-width: 100%; max-height: 50px; } .peijianlist li h3 { font-size: 14px; color: #fff; line-height: 26px; width: 100%; height: 26px; overflow: hidden; -webkit-transition: .3s; transition: .3s; } /*.peijianlist li:hover .pic.i2,.peijianlist li.on .pic.i2{ height: 50px; opacity: 1;} .peijianlist li:hover h3,.peijianlist li.on h3{ color: #f70;}*/ .peijianlist li:hover i, .peijianlist li.on i { -webkit-box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.2); box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.2); } .peijianlist li.fenge { width: 3px; height: 100%; position: relative; overflow: hidden; } .peijianlist li.fenge:before { content: ''; position: absolute; left: 1px; top: 6px; z-index: 0; width: 1px; height: 130px; background-color: rgba(255, 255, 255, 0.2); } .peijianlist li.fenge .in, .peijianlist li.fenge .in2 { position: absolute; left: 0; top: 0; z-index: 2; width: 3px; height: 40px; background-color: #fff; -webkit-animation: move4 2s infinite; animation: move4 2s infinite; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; } .peijianlist li.fenge .in2 { -webkit-animation-delay: 1s; animation-delay: 1s; } @-webkit-keyframes move4 { 0% { -webkit-transform: translateY(-40px); transform: translateY(-40px); } 90%, 100% { -webkit-transform: translateY(150px); transform: translateY(150px); } } @keyframes move4 { 0% { -webkit-transform: translateY(-40px); transform: translateY(-40px); } 90%, 100% { -webkit-transform: translateY(150px); transform: translateY(150px); } } .peijianlist2 { font-size: 0; position: absolute; left: 7.8%; top: 50%; z-index: 2; width: 84%; margin-top: -110px; pointer-events: auto; } .peijianlist2 li { position: absolute; width: 560px; max-width: 100%; opacity: 0; pointer-events: auto; -webkit-transform: translateX(60px); transform: translateX(60px); } .peijianlist2 li h3 { font-size: 38px; color: #fff; line-height: 80px; padding-left: 114px; position: relative; height: 80px; overflow: hidden; background: url('../images/zaominxx.png') 72px center no-repeat; } .peijianlist2 li h3 label { position: absolute; left: 0; top: 0; z-index: 0; font-size: 0; } .peijianlist2 li h3 label img { vertical-align: top; } .peijianlist2 li .txt { font-size: 16px; color: #fff; line-height: 26px; height: 78px; overflow: hidden; margin-top: 18px; } .peijianlist2 li.on { opacity: 1; -webkit-transform: translateX(0px); transform: translateX(0px); -webkit-transition: .5s; transition: .5s; } @media screen and (max-width: 1540px) { .peijianlist li { margin-right: 120px; } } @media screen and (max-width: 1400px) { .peijianlist li { margin-right: 80px; } } @media screen and (max-width: 1200px) { .peijianlist li { margin-right: 60px; } } @media screen and (max-width: 900px) { .fcate1 { margin-top: -350px; } .peijianlist2 { top: 40%; } .peijianlist { bottom: 120px; } } @media screen and (max-width: 750px) { .peijianlist { width: 96%; left: 2%; } .peijianlist li { margin-right: 0; width: 20%; } } @media screen and (max-width: 640px) { .peijianlist2 li .txt { height: 104px; } } .cvbanner { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; z-index: 1; } .cvbanner:before { content: ''; position: absolute; left: 0; bottom: 95px; z-index: 2; width: 100%; height: 1px; background-color: rgba(255, 255, 255, 0.2); } .chepic-scroll { position: relative; width: 100%; height: 100%; z-index: 1; } .chepic-scroll .flex-viewport { width: 100%; height: 100%; } .chepic-scroll .slides { overflow: hidden; height: 100%; } .chepic-scroll .slides li { display: block; width: 100%; height: 100%; position: relative; overflow: hidden; text-align: center; } .chepic-scroll .slides li > img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .chepic-scroll .flex-direction-nav a { width: 40px; height: 80px; margin-top: -40px; display: block; font-size: 38px; color: #bfbfbf; line-height: 80px; text-align: center; font-family: 'simsun'; position: absolute; top: 50%; z-index: 4; background-color: rgba(0, 0, 0, 0.2); } .chepic-scroll .flex-direction-nav a.flex-prev { left: 4%; } .chepic-scroll .flex-direction-nav a.flex-next { right: 4%; } .chepic-scroll .flex-direction-nav a:hover { background-color: rgba(0, 0, 0, 0.4); color: #fff; } .chepic-scroll .flex-control-paging { width: 100%; text-align: center; height: 3px; font-size: 0; position: absolute; bottom: 40px; left: 0; z-index: 3; } .chepic-scroll .flex-control-paging li { display: inline-block; *display: inline; *zoom: 1; overflow: hidden; width: 40px; height: 3px; margin-right: 10px; } .chepic-scroll .flex-control-paging li a { width: 40px; height: 3px; display: block; cursor: pointer; background-color: rgba(255, 255, 255, 0.4); position: relative; } .chepic-scroll .flex-control-paging li a:before { content: ''; position: absolute; left: 0; bottom: 0; z-index: 1; width: 0; height: 3px; background-color: #fff; } .chepic-scroll .flex-control-paging li.ac a:before { -webkit-transition: linear 5.5s; transition: linear 5.5s; width: 100%; } .cvbanner .pagination { position: absolute; left: 7.8%; top: 50%; margin-top: 100px; z-index: 20; height: 2px; font-size: 0; } .cvbanner .pagination .btn { display: inline-block; position: relative; cursor: pointer; width: 30px; height: 2px; margin-right: 10px; background-color: rgba(255, 255, 255, 0.4); } .cvbanner .pagination .btn:before { content: " "; position: absolute; left: 0; top: 0; z-index: 1; width: 0; height: 2px; background-color: #fff; } .cvbanner .pagination .btn.on:before { -webkit-transition: linear 4s; transition: linear 4s; width: 100%; } .cvbanner .ctrbox { z-index: 20; position: absolute; right: 7.8%; bottom: 120px; white-space: nowrap; font-size: 0; font-family: "SimSun", "瀹嬩綋"; line-height: 26px; } .cvbanner .ctrbox > s { display: inline-block; vertical-align: middle; font-size: 20px; color: #fff; margin-left: 30px; margin-right: 30px; } .cvbanner .ctrbox .ctr { position: relative; vertical-align: top; display: inline-block; vertical-align: middle; width: 20px; height: 26px; text-align: center; cursor: pointer; } .cvbanner .ctrbox .ctr s { color: #fff; font-size: 28px; font-weight: bold; } .cvbanner .ctrbox .ctr s { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; } .cvbanner .ctrbox .ctr:hover s { color: #1d6bdd; } @media screen and (max-width: 900px) { .cvbanner .ctrbox { right: 0; bottom: 50px; width: 100%; text-align: center; } .cvbanner:before { bottom: 120px; } } #loading { position: fixed; width: 100%; height: 100vh; top: 0; left: 0; background-color: #000; z-index: 200; } #loading .logo-wrap { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 200px; height: 50px; z-index: 8; opacity: 1; background: #000000 url('../images/logo.png') center no-repeat; } #loading .logo-wrap.on { opacity: 0; pointer-events: none; -webkit-animation: fadeOut 2s ease-in-out; animation: fadeOut 2s ease-in-out; } #loading .load-ball { position: absolute; top: -75px; left: 0; pointer-events: none; border-radius: 50%; width: 200px; height: 200px; z-index: 2; opacity: 0; background-color: #fff; } #loading .load-ball.on { -webkit-animation: water-go 2s linear both; animation: water-go 2s linear both; } #loading .load-mask { width: 200px; height: 50px; position: absolute; z-index: 1; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.77); -webkit-animation: load-mask-go 3s ease-in-out both; animation: load-mask-go 3s ease-in-out both; } @-webkit-keyframes load-mask-go { 0% { left: 0px; } 100% { left: 200px; } } @keyframes load-mask-go { 0% { left: 0px; } 100% { left: 200px; } } @-webkit-keyframes water-go { 0% { -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity: 0; } 80% { -webkit-transform: scale(15, 15); transform: scale(15, 15); opacity: 1; background-color: #fff; } 100% { -webkit-transform: scale(15, 15); transform: scale(15, 15); opacity: 1; background-color: #000; } } @keyframes water-go { 0% { -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity: 0; } 80% { -webkit-transform: scale(15, 15); transform: scale(15, 15); opacity: 1; background-color: #fff; } 100% { -webkit-transform: scale(15, 15); transform: scale(15, 15); opacity: 1; background-color: #000; } } /*2about*/ .sectionbg21 { position: absolute; left: 0; top: 0; z-index: 0; width: 100%; height: 100%; background: #ffffff url('../images/sec21bg2.jpg') center / cover no-repeat; } .sectionbg23 { position: absolute; left: 0; top: 0; z-index: 0; width: 100%; height: 100%; background: #ffffff url('../images/sec23bg.jpg') center / cover no-repeat; } .sectionbg24 { position: absolute; left: 0; top: 0; z-index: 0; width: 100%; height: 100%; background: #ffffff url('../images/sec24bg.jpg') center / cover no-repeat; } .section23 .cer3, .section24 .cer3 { position: relative; z-index: 2; } .fcate2 { position: absolute; width: 100%; left: 0; top: 146px; z-index: 7; text-align: center; } .fcate2 .cn1 { font-size: 42px; color: #fff; line-height: 74px; height: 74px; } .fcate2 .cn2 { font-size: 24px; color: #fff; line-height: 40px; height: 40px; } .fcate5 .cn1 { font-size: 36px; color: #fff; line-height: 60px; height: 60px; text-align: center; } .gaosec { position: relative; width: 100%; padding-bottom: 260px; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } .gaosectwo { padding: 60px 0; width: 100%; height: 140px; background-color: #fff; position: absolute; left: 0; bottom: 0; z-index: 1; } .gaosectwo .cer3 { height: 100%; overflow: hidden; } .fcate3 { float: left; width: 46.5%; color: #222; margin-top: 25px; } .fcate3 .cn1 { font-size: 18px; line-height: 36px; height: 36px; } .fcate3 .cn2 { font-size: 36px; line-height: 54px; height: 54px; } .gaosectwo .intro { float: right; width: 53.5%; display: table; height: 100%; font-size: 16px; color: #333; line-height: 26px; } .gaosectwo .intro2 { width: 36%; } .gaosectwo .intro span { display: table-cell; vertical-align: middle; } .gaosecone { width: 100%; height: 100%; position: relative; } .gaopic { position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; overflow: hidden; } .gaopic img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .hole { width: 500px; height: 500px; border-radius: 50%; -webkit-box-shadow: 0 0 0 9999em rgba(0, 0, 0, 0.6); box-shadow: 0 0 0 9999em rgba(0, 0, 0, 0.6); position: absolute; z-index: 5; margin: -250px 0 0 -250px; -webkit-transition: width 0.5s ease-in-out, height 0.5s ease-in-out, margin 0.5s ease-in-out; transition: width 0.5s ease-in-out, height 0.5s ease-in-out, margin 0.5s ease-in-out; } .hole:after { content: ""; display: block; margin: 0; width: 100%; height: 100%; -webkit-box-shadow: inset 0 0 50px 50px rgba(0, 0, 0, 0.6); box-shadow: inset 0 0 50px 50px rgba(0, 0, 0, 0.6); border-radius: 50%; } .hole:active { margin: -350px 0 0 -350px; width: 700px; height: 700px; -webkit-transition: width 1s ease-in-out, height 1s ease-in-out, margin 1s ease-in-out; transition: width 1s ease-in-out, height 1s ease-in-out, margin 1s ease-in-out; } .mouse2 { width: 100px; height: 24px; margin-left: -50px; cursor: pointer; position: absolute; left: 50%; bottom: 40px; z-index: 2; background: url('../images/sjd2-mouse.png') center no-repeat; } @media screen and (max-width: 1023px) { .fcate3 .cn2 { font-size: 28px; line-height: 42px; height: 42px; } .hole { left: 50%!important; top: 50%!important; } } @media screen and (max-width: 750px) { .fcate2 .cn1 { font-size: 30px; line-height: 50px; height: 50px; } .fcate2 .cn2 { font-size: 20px; } .fcate3 .cn1 { font-size: 18px; line-height: 28px; height: 28px; } .fcate3 .cn2 { font-size: 24px; line-height: 36px; height: 36px; } .fcate5 .cn1 { font-size: 26px; line-height: 44px; height: auto; } .gaosectwo { padding: 30px 0; height: 200px; overflow: hidden; } .gaosectwo .cer3 { overflow: visible; } .fcate3 { float: none; width: 100%; margin-top: 0; margin-bottom: 16px; } .gaosectwo .intro { float: none; width: 100%; height: auto; max-height: 130px; } .gaosectwo .intro2 { width: 100%; } .fadeinleft60 { -webkit-transform: translateX(0) !important; transform: translateX(0) !important; } .fadeinright60 { -webkit-transform: translateX(0) !important; transform: translateX(0) !important; } } .liantiaolist { position: absolute; left: 0; top: 302px; z-index: 6; width: 100%; font-size: 0; text-align: center; padding: 0 60px; -webkit-box-sizing: border-box; box-sizing: border-box; } .liantiaolist li { display: inline-block; vertical-align: top; width: 116px; height: 48px; } .liantiaolist li a { display: block; padding: 0 10px; width: 40px; height: 100%; margin: 0 auto; font-size: 18px; color: #fff; line-height: 24px; position: relative; } .liantiaolist li a:before { content: ''; position: absolute; left: 0; top: 50%; z-index: 0; width: 2px; height: 40px; background-color: #fff; margin-top: -20px; } @media screen and (max-width: 1240px) { .liantiaolist { padding: 0 40px; } .liantiaolist li { width: 100px; } } @media screen and (max-width: 900px) { .liantiaolist { padding: 0 30px; } .liantiaolist li { width: 25%; padding: 5px 0; } } @media screen and (max-width: 750px) { .liantiaolist { top: 260px; } } .fcate4 { color: #fff; } .fcate4 .cn1 { font-size: 18px; line-height: 30px; height: 30px; } .fcate4 .cn2 { font-size: 36px; line-height: 60px; height: 60px; } #sw2 { position: relative; width: 100%; height: 494px; overflow: visible!important; margin: 56px 0 0; padding-bottom: 0; cursor: url('../images/curse.png'), -webkit-grab; cursor: url('../images/curse.png'), grab; } #sw2 .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; } #sw2 .swiper-slide { float: left; position: relative; width: 316px; height: 100%; z-index: 0; } #sw2 .swiper-slide.swiper-slide-active { z-index: 2; } #sw2 .sw-prev { top: 224px; left: 0; } #sw2 .sw-next { top: 224px; right: 0; } #sw2 .swiper-pagination { position: absolute; left: 0; bottom: 0; z-index: 10; width: 100%; text-align: center; font-size: 0; } #sw2 .swiper-pagination-bullet { width: 40px; height: 2px; margin: 0 5px; display: inline-block; cursor: pointer; background-color: #fff; opacity: 0.3; border-radius: 0; -webkit-transition: all 0.22s linear 0s; transition: all 0.22s linear 0s; } #sw2 .swiper-pagination-bullet-active { opacity: 1; } #sw2 .slideinner { position: relative; width: 100%; height: 100%; } .fittuwen2 { display: block; width: 100%; height: 100%; } .fittuwen2 .pic { position: relative; width: 100%; height: 420px; overflow: hidden; } .fittuwen2 img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: 0.5s; transition: 0.5s; } .swiper-slide-active .fittuwen2 img { -webkit-transform: scale(1.1); transform: scale(1.1); } .fittuwen2 .txt { color: #fff; margin-top: 14px; } .fittuwen2 .txt dt { font-size: 20px; line-height: 34px; height: 34px; overflow: hidden; } .fittuwen2 .txt dd { font-size: 16px; line-height: 26px; opacity: 0.6; height: 26px; overflow: hidden; } @media screen and (max-width: 1600px) { #sw2 { height: 380px; } #sw2 .swiper-slide { width: 234px; margin-right: 40px!important; } .fittuwen2 .pic { height: 315px; } #sw2 .sw-prev, #sw2 .sw-next { top: 140px; } .fcate4 .cn2 { font-size: 30px; line-height: 50px; height: 50px; } } @media screen and (max-height: 800px) { #sw2 { margin-top: 20px; } } #sw3 { position: relative; width: 100%; height: 326px; margin: 126px 0 0; padding-bottom: 0; cursor: url('../images/curse.png'), -webkit-grab; cursor: url('../images/curse.png'), grab; } #sw3 .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; } #sw3 .swiper-slide { float: left; position: relative; width: 300px; height: 100%; z-index: 0; } #sw3 .sw-prev { left: 50%; margin-left: -60px; } #sw3 .sw-next { right: 50%; margin-right: -60px; } #sw3 .sw-prev, #sw3 .sw-next { top: auto; bottom: 0; -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset; } #sw3 .swiper-pagination { position: absolute; left: 0; bottom: 0; z-index: 10; width: 100%; text-align: center; font-size: 0; } #sw3 .swiper-pagination-bullet { width: 40px; height: 2px; margin: 0 5px; display: inline-block; cursor: pointer; background-color: #fff; opacity: 0.3; border-radius: 0; -webkit-transition: all 0.22s linear 0s; transition: all 0.22s linear 0s; } #sw3 .swiper-pagination-bullet-active { opacity: 1; } #sw3 .slideinner { position: relative; width: 100%; padding-top: 50px; height: 276px; } #sw3 .swiper-slide:nth-child(even) .slideinner { padding-top: 0; height: 326px; } .fittuwen3 { display: block; padding-left: 28px; padding-right: 72px; height: 100%; color: #fff; background: url('../images/sx1-fz.png') 4px 26px no-repeat; position: relative; } .swiper-slide:nth-child(even) .fittuwen3 { background-image: url('../images/sx1h-fz.png'); } .fittuwen3 i { position: absolute; left: 0; top: 20px; z-index: 1; border-radius: 5px; width: 9px; height: 9px; background-color: #fff; -webkit-transition: 1s; transition: 1s; } .swiper-slide:hover .fittuwen3 i { -webkit-transform: scale(1.2) rotateY(360deg); transform: scale(1.2) rotateY(360deg); } .fittuwen3 dt { font-size: 16px; line-height: 48px; height: 48px; overflow: hidden; } .fittuwen3 dt em { font-size: 36px; font-family: "Times New Roman"; margin-right: 5px; } .fittuwen3 dd { font-size: 16px; line-height: 26px; margin-top: 10px; height: 218px; overflow: auto; } .curse { width: 71px; height: 42px; background: url('../images/curse.png') center no-repeat; margin-top: -21px; position: absolute; left: 50%; top: 50%; z-index: 10; margin-left: -35px; display: none; } .curse:active { -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-transition: -webkit-transform 0.5s ease-in-out; transition: -webkit-transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out; } @media screen and (max-height: 800px) { #sw3 { margin-top: 80px; } } .wenhuapic-scroll { position: absolute; width: 100%; height: 100%; z-index: 1; } .wenhuapic-scroll .flex-viewport { width: 100%; height: 100%; } .wenhuapic-scroll .slides { overflow: hidden; height: 100%; } .wenhuapic-scroll .slides li { display: block; width: 100%; height: 100%; position: relative; overflow: hidden; } .wenhuapic-scroll .slides li > img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: opacity 1s; transition: opacity 1s; } .wenhuapic-scroll .slides li > img { -webkit-transition: -webkit-transform 1s ease-in; transition: -webkit-transform 1s ease-in; transition: transform 1s ease-in; transition: transform 1s ease-in, -webkit-transform 1s ease-in; -webkit-transform: scale(1); transform: scale(1); } .wenhuapic-scroll .slides li.ac > img { -webkit-transition: -webkit-transform 4s ease-in; transition: -webkit-transform 4s ease-in; transition: transform 4s ease-in; transition: transform 4s ease-in, -webkit-transform 4s ease-in; -webkit-transform: scale(1.1); transform: scale(1.1); } .wenhuapic-scroll .flex-control-paging { height: 8px; font-size: 0; position: absolute; bottom: 40px; left: 0; z-index: 3; width: 100%; text-align: center; } .wenhuapic-scroll .flex-control-paging li { display: inline-block; *display: inline; *zoom: 1; overflow: hidden; width: 8px; height: 8px; margin: 0 6px; } .wenhuapic-scroll .flex-control-paging li a { width: 6px; height: 6px; display: block; cursor: pointer; background-color: transparent; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 50%; } .wenhuapic-scroll .flex-control-paging li a.flex-active { background-color: #fff; } .wenhuapic-scroll .flex-direction-nav a { width: 20px; height: 28px; display: block; font-size: 16px; color: #fff; line-height: 28px; text-align: center; font-family: 'simsun'; position: absolute; bottom: 30px; z-index: 4; font-weight: bold; } .wenhuapic-scroll .flex-direction-nav a.flex-prev { left: 50%; margin-left: -90px; } .wenhuapic-scroll .flex-direction-nav a.flex-next { right: 50%; margin-right: -90px; } .wenhuapic-scroll .flex-direction-nav a:hover { color: #1d6bdd; } .whtxt { position: absolute; top: 50%; left: 50%; max-width: 1200px; z-index: 1; margin-top: -40px; margin-left: -600px; color: #fff; -webkit-transition-duration: 1.2s; transition-duration: 1.2s; } .whtxt h2 { font-size: 36px; line-height: 54px; margin-bottom: 8px; } .whtxt h3 { font-size: 18px; line-height: 36px; max-width: 600px; } .yanfalist { position: absolute; left: 50%; margin-left: -600px; bottom: 70px; z-index: 2; max-width: 1200px; font-size: 0; } .yanfalist li { display: inline-block; vertical-align: top; padding: 0 42px; -webkit-box-sizing: border-box; box-sizing: border-box; border-left: 1px solid rgba(255, 255, 255, 0.5); } .yanfalist li:first-child { padding-left: 0; border-left-width: 0; } .yanfalist li a { display: block; position: relative; width: 100%; } .yanfalist .pic { width: 100%; font-size: 0; line-height: 28px; height: 28px; } .yanfalist img { max-width: 100%; max-height: 28px; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .yanfalist li h3 { font-size: 14px; color: #fff; line-height: 22px; height: 44px; margin-top: 12px; } .yanfalist li:hover img { -webkit-transform: translate(0, -5px); transform: translate(0, -5px); } @media screen and (max-width: 1240px) { .whtxt { left: 60px; margin-left: 0; right: 60px; width: auto; } .yanfalist { left: 60px; margin-left: 0; right: 60px; width: auto; } .yanfalist li { width: 50%; margin-top: 20px; } .yanfalist li:first-child { padding-left: 42px; border-left-width: 1px; } } @media screen and (max-width: 750px) { .whtxt { left: 30px; right: 30px; } .yanfalist { left: 30px; right: 30px; } .fcate4 .cn2 { font-size: 24px; line-height: 40px; height: 40px; } } @media screen and (max-width: 670px) { .yanfalist li { padding: 0 20px; } .yanfalist li:first-child { padding-left: 20px; } .yanfalist li h3 { height: 66px; } } .section22 { background-color: #1f2024; } .gai { width: 100%; height: 100%; overflow: hidden; } .gaileft { float: left; width: 27%; height: 100%; pointer-events: none; position: relative; z-index: 9; } .gairight { float: right; width: 73%; height: 100%; position: relative; overflow: hidden; background-image: -webkit-gradient(linear, left bottom, left top, from(#0c0d0f), to(#595c65)); background-image: linear-gradient(to top, #0c0d0f, #595c65); } .fcate6 { width: 260px; color: #fff; margin: 180px auto 0; } .fcate6 .cn1 { font-size: 18px; line-height: 38px; } .fcate6 .cn2 { font-size: 36px; line-height: 1.27777778; } .fcate6 .txt { font-size: 14px; line-height: 26px; color: #9d9d9d; margin-top: 36px; } .city { width: 1187px; height: 595px; position: absolute; left: 0; right: 0; bottom: 0; top: auto; z-index: 0; margin: 0 auto -5%; background: url('../images/city.png') center no-repeat; } .yuan { position: absolute; z-index: 5; width: 9px; height: 9px; cursor: pointer; border-radius: 50%; background-color: #fff; opacity: 0; -webkit-transition: 0.5s; transition: 0.5s; } .yuan:before { content: ""; position: absolute; left: 4px; bottom: 5px; z-index: 2; width: 1px; -webkit-transition: 1s; transition: 1s; background-color: rgba(255, 255, 255, 0.6); -webkit-transform: scale(1, 0); transform: scale(1, 0); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; } .yuan.on { background-color: #1a6cce; opacity: 1; } .yuan.on:before { -webkit-transform: scale(1, 1); transform: scale(1, 1); } .yuan.i1 { top: 120px; left: 396px; } .yuan.i1:before { height: 294px; } .yuan.i2 { top: 130px; left: 465px; } .yuan.i2:before { height: 304px; } .yuan.i3 { top: 267px; left: 675px; } .yuan.i3:before { height: 434px; } .yuan.i4 { top: 156px; left: 741px; } .yuan.i4:before { height: 324px; } .yuan.i5 { top: 61px; right: 262px; } .yuan.i5:before { height: 234px; } .guolist { overflow: hidden; width: auto; position: absolute; z-index: 3; font-size: 0; opacity: 0; top: -169px; -webkit-transition: 0.5s 0s; transition: 0.5s 0s; } .guolist li { display: inline-block; width: auto; margin-right: 38px; position: relative; } .guolist li a { display: block; position: relative; } .guolist h3 { font-size: 18px; color: #fff; height: 36px; line-height: 36px; } .guolist h3 span { font-size: 36px; } .guolist li .txt { font-size: 16px; color: #ececec; line-height: 28px; margin-top: 4px; } .guobox .guolist.on { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: 0.5s 0.5s; transition: 0.5s 0.5s; } .guolist.i1 { left: 480px; -webkit-transform: translateX(40px); transform: translateX(40px); } .guolist.i2 { left: 532px; -webkit-transform: translateX(40px); transform: translateX(40px); } .guolist.i3 { left: 120px; -webkit-transform: translateX(-40px); transform: translateX(-40px); } .guolist.i4 { left: 410px; -webkit-transform: translateX(-40px); transform: translateX(-40px); } .guolist.i5 { left: 570px; -webkit-transform: translateX(-40px); transform: translateX(-40px); } .guolist2 { overflow: auto; width: auto; position: absolute; z-index: 4; white-space: nowrap; font-size: 0; display: none; top: 150px; left: 2%; width: 96%; } .guolist2 li { display: inline-block; width: auto; margin: 0 20px 10px; position: relative; } .guolist2 li a { display: block; position: relative; } .guolist2 h3 { font-size: 18px; color: #fff; height: 36px; line-height: 36px; } .guolist2 h3 span { font-size: 26px; } .guolist2 li .txt { font-size: 16px; color: #ececec; line-height: 28px; } .build { position: absolute; z-index: 4; cursor: pointer; } .build .p1 { display: block; position: relative; z-index: 0; opacity: 1; -webkit-transition: 0.5s; transition: 0.5s; } .build .p2 { position: absolute; left: 0; top: 0; z-index: 2; opacity: 0; -webkit-transition: 0.5s; transition: 0.5s; } .build:hover .p2, .build.on .p2 { opacity: 1; } .build.i1 { top: 92px; left: 274px; } .build.i2 { top: 60px; left: 431px; } .build.i3 { top: 208px; left: 461px; } .build.i4 { top: 139px; right: 306px; } .build.i5 { top: 48px; right: 153px; } @media screen and (max-width: 1440px) { .fcate6 { width: auto; padding: 0 10%; } .fcate6 .cn2 { font-size: 28px; } .city { left: 50%; right: auto; margin-left: -594px; -webkit-transform: scale(0.9); transform: scale(0.9); } } @media screen and (max-width: 1080px) { .city { -webkit-transform: scale(0.8); transform: scale(0.8); } } @media screen and (max-width: 1024px) { .gaileft { float: none; width: 90%; height: auto; position: absolute; left: 5%; bottom: 80px; z-index: 1; } .gairight { float: none; width: 100%; } .city { bottom: 50px; margin-bottom: 0; } .fcate6 { margin-top: 0; width: 100%; padding: 0; } .fcate6 .cn2 { text-shadow: 0 0 4px rgba(0, 0, 0, 0.5); } .section25, .section26, .section27, .section28 { display: block !important; } .section25 .fp-tableCell, .section26 .fp-tableCell, .section27 .fp-tableCell, .section28 .fp-tableCell { display: block !important; } } @media screen and (max-width: 960px) { .city { -webkit-transform: scale(0.7); transform: scale(0.7); bottom: 100px; } } @media screen and (max-width: 840px) { .city { -webkit-transform: scale(0.6); transform: scale(0.6); } } @media screen and (max-width: 720px) { .city { -webkit-transform: scale(0.5); transform: scale(0.5); bottom: 150px; } .guolist h3 { font-size: 36px; } .guolist li .txt { font-size: 32px; } .fcate6 .cn2 { font-size: 24px; } /*.guolist{ display: none;} .guolist2{ display: block;} .yuan:before{ display: none;}*/ } @media screen and (max-width: 600px) { .city { -webkit-transform: scale(0.4); transform: scale(0.4); } } @media screen and (max-height: 800px) and (min-width: 1025px) { .city { bottom: -120px; } } /*5浜у搧璇︽儏*/ .profirstout { width: 100%; padding-top: 50px; padding-bottom: 100px; background: url('../images/ibpro.jpg') center / cover no-repeat; } .profirst { overflow: hidden; margin-top: 60px; min-height: 432px; } .xijie { width: 46.5%; float: left; z-index: 1; position: relative; } .xijie .bigpic { width: 100%; height: 432px; position: relative; text-align: center; line-height: 432px; font-size: 0; } .xijie img#bigpic { max-width: 100%; max-height: 100%; } .proinfo { float: right; width: 42.5%; } .proinfo .proname { font-size: 32px; line-height: 50px; color: #fff; font-weight: bold; margin-bottom: 12px; } .proinfo .proen { font-size: 16px; line-height: 24px; color: #e2e2e2; } .proinfo .hx { width: 100%; height: 1px; background-color: rgba(255, 255, 255, 0.15); margin: 25px 0; } .proinfo .xiangxi { font-size: 14px; line-height: 28px; color: #e7e7e7; max-height: 168px; overflow: auto; margin-top: 20px; } .proinfo .procolor { height: 50px; font-size: 0; } .proinfo .procolor label { display: inline-block; width: 50px; vertical-align: middle; font-size: 16px; color: #fff; line-height: 50px; } .proinfo .procolor a { display: inline-block; width: 20px; height: 20px; margin-right: 10px; background-color: #ff8080; border-radius: 50%; vertical-align: middle; -webkit-box-shadow: 0 0 0 4px #666 inset; box-shadow: 0 0 0 4px #666 inset; } .proinfo .procolor a:hover { -webkit-box-shadow: 0 0 0 0 #666 inset; box-shadow: 0 0 0 0 #666 inset; } .proinfo .tedian { margin: 18px 0 28px; } .proinfo .tedian img { max-width: 100%; } .propic-scroll { position: relative; width: 100%; height: 432px; } .propic-scroll .flex-viewport { width: 100%; height: 100%; } .propic-scroll .slides { overflow: hidden; height: 100%; } .propic-scroll .slides li { display: none; height: 100%; -webkit-backface-visibility: hidden; position: relative; } .propic-scroll .slides li a { display: block; width: 100%; height: 100%; position: relative; overflow: hidden; text-align: center; line-height: 432px; } .propic-scroll .slides a > img { max-width: 100%; max-height: 100%; } .vd2 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; -o-object-fit: fill; object-fit: fill; } .propic-scroll .flex-direction-nav a { width: 18px; height: 36px; margin-top: -18px; display: block; font-size: 0; position: absolute; top: 50%; z-index: 4; opacity: 0.7; } .propic-scroll .flex-direction-nav a.flex-prev { left: 0; background: url('../images/lt3-pro.png') center no-repeat; } .propic-scroll .flex-direction-nav a.flex-next { right: 0; background: url('../images/gt3-pro.png') center no-repeat; } .propic-scroll .flex-direction-nav a:hover { opacity: 1; } .propic-scroll .flex-control-paging { width: 100%; height: 8px; font-size: 0; text-align: center; position: absolute; bottom: 14px; left: 0; z-index: 3; } .propic-scroll .flex-control-paging li { display: inline-block; *display: inline; *zoom: 1; overflow: hidden; width: 8px; height: 8px; margin: 0 7px; } .propic-scroll .flex-control-paging li a { width: 8px; height: 8px; display: block; cursor: pointer; background-color: rgba(255, 255, 255, 0.4); border-radius: 50%; } .propic-scroll .flex-control-paging li a.flex-active { background-color: #fff; } @media screen and (max-width: 1023px) { .profirstout { padding-top: 20px; padding-bottom: 60px; } .profirst { height: auto; margin-top: 20px; } .xijie { float: none; width: 100%; margin-bottom: 50px; } .proinfo { float: none; width: 100%; height: auto; } .proinfo .xiangxi { max-height: none; } .propic-scroll { height: 380px; } .propic-scroll .slides li a { line-height: 380px; } .propic-scroll .flex-control-paging { bottom: 0; } } .tmerjiout { width: 100%; height: 80px; background-color: #f3f4f7; } .tmerjiout.on { position: fixed; top: 90px; left: 0; z-index: 20; min-width: 480px; } .tmerjiout-shadow { height: 80px; display: none; } .tmerjiout-shadow.on { display: block; } .tmerji { position: relative; font-size: 0; width: 100%; height: 100%; } .tmerji li { display: inline-block; width: 25%; height: 100%; text-align: center; position: relative; } .tmerji li:after { content: ''; position: absolute; left: 0; top: 50%; z-index: 0; width: 1px; height: 14px; background-color: #ccc; margin-top: -7px; } .tmerji li a { display: block; font-size: 16px; color: #444; line-height: 80px; height: 80px; position: relative; } .tmerji li.on a, .tmerji li:hover a { color: #3978df; } .protitle { line-height: 46px; color: #222; height: 46px; overflow: hidden; padding-bottom: 20px; border-bottom: 1px solid #e7e7e7; } .protitle span.cn { font-size: 26px; font-weight: bold; } .prosecond { padding-top: 80px; } .proconout { padding-bottom: 90px; } .procontent { font-size: 16px; color: #666; line-height: 30px; margin-top: 40px; } .procontent img { max-width: 100%; } .procontent dd.matter { display: inline-block; line-height: 52px; padding-left: 55px; margin-bottom: 10px; background: url('../images/pdf.png') 0 6px no-repeat; margin-right: 60px; -webkit-transition: .3s; transition: .3s; } .procontent dd.matter:hover { background-image: url('../images/pdf2.png'); } .procontent dd.matter a { color: #666; } .procontent dd.matter:hover a { color: #3978df; } .rlcaselist { padding: 0 0 10px; margin: 0 -12px; overflow: hidden; } .rlcaselist li { float: left; width: 25%; margin-bottom: 20px; } .rlcaselist li .lin { padding: 0 12px; } .rlcaselist li a { display: block; width: 100%; position: relative; } .rlcaselist .pic { width: 100%; height: 0; overflow: hidden; position: relative; padding-bottom: 62%; } .rlcaselist img { -o-object-fit: cover; object-fit: cover; } .rlcaselist li h3 { font-size: 16px; color: #333; line-height: 34px; height: 34px; overflow: hidden; margin-top: 10px; -webkit-transition: .4s; transition: .4s; } .rlcaselist li:hover h3 { color: #1d6bdd; } @media screen and (max-width: 1100px) { .rlcaselist li { width: 50%; } } @media screen and (max-width: 750px) { .prosecond { padding-top: 60px; } .proconout { padding-bottom: 60px; } .procontent dd.matter { margin-right: 30px; } } /*7妗堜緥鎬昏*/ .dianpic-scroll { position: relative; width: 100%; height: 100%; z-index: 1; } .dianpic-scroll .flex-viewport { width: 100%; height: 100%; } .dianpic-scroll .slides { overflow: hidden; height: 100%; } .dianpic-scroll .slides li { display: block; width: 100%; height: 100%; position: relative; overflow: hidden; font-size: 0; text-align: left; background-color: #000; } .dianpic-scroll .slides li > img { width: auto; height: 100%; max-width: 100%; } .dianpic-scroll .slides li .cov { position: absolute; right: 0; top: 0; z-index: 2; display: block; width: 100%; height: 100%; background: url('../images/s1.png') right no-repeat; } .dianpic-scroll .slides img { -webkit-transition: -webkit-transform 1s ease-in; transition: -webkit-transform 1s ease-in; transition: transform 1s ease-in; transition: transform 1s ease-in, -webkit-transform 1s ease-in; -webkit-transform: scale(1); transform: scale(1); } .dianpic-scroll .slides .ac img { -webkit-transition: -webkit-transform 5s ease-in; transition: -webkit-transform 5s ease-in; transition: transform 5s ease-in; transition: transform 5s ease-in, -webkit-transform 5s ease-in; -webkit-transform: scale(1.1); transform: scale(1.1); } .jindian.even .dianpic-scroll .slides li { text-align: right; } .jindian.even .dianpic-scroll .slides li .cov { right: auto; left: 0; background-position: left; background-image: url('../images/s2.png'); } .dianpic-scroll .flex-control-paging { font-size: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); position: absolute; top: 50%; left: 50px; z-index: 3; width: 8px; } .dianpic-scroll .flex-control-paging li { overflow: hidden; width: 8px; height: 8px; margin: 16px 0; } .dianpic-scroll .flex-control-paging li a { width: 8px; height: 8px; display: block; cursor: pointer; background-color: rgba(255, 255, 255, 0.3); border-radius: 50%; } .dianpic-scroll .flex-control-paging li a.flex-active { background-color: #fff; } .jindian.even .dianpic-scroll .flex-control-paging { left: auto; right: 50px; } .jindianout { width: 100%; position: relative; } .jindianout i.bg { position: absolute; left: 50%; top: 0; z-index: 10; margin-left: -588px; width: 1209px; height: 0; background: url('../images/ss.png') center 560px no-repeat; pointer-events: none; } .jindian { position: relative; width: 100%; height: 800px; z-index: 0; } .jdtxt { position: absolute; top: 50%; right: 50%; width: 530px; z-index: 4; margin-top: -124px; margin-right: -720px; color: #fff; padding-top: 70px; background: url('../images/cases.png') 0 0 no-repeat; } .jdtxt h2 { font-size: 48px; line-height: 60px; font-weight: bold; } .jdtxt .txt { font-size: 16px; line-height: 32px; margin-top: 35px; } .jindian.even .jdtxt { right: auto; left: 50%; margin-right: auto; margin-left: -720px; } @media screen and (max-width: 1480px) { .jdtxt { right: 60px; margin-right: auto; } .jindian.even .jdtxt { right: auto; left: 60px; margin-right: auto; margin-left: auto; } } @media screen and (max-width: 1300px) { .dianpic-scroll .slides li > img { width: 100%; } .jindianout i.bg { margin-left: -610px; } } @media screen and (max-width: 1200px) { .dianpic-scroll .slides li .cov { background-image: none; background-color: rgba(0, 0, 0, 0.5); } .jindian.even .dianpic-scroll .slides li .cov { background-image: none; } } @media screen and (max-width: 750px) { .jdtxt { right: auto; left: 40px; width: 80%; } .jdtxt h2 { font-size: 36px; } .jindian.even .jdtxt { left: 40px; } .dianpic-scroll .flex-control-paging { left: 20px; } .jindian.even .dianpic-scroll .flex-control-paging { right: 20px; } } /*3浜у搧涓績鎬昏椤?/ .sectionbg31, .sectionbg33, .sectionbg35 { position: absolute; left: 0; top: 0; z-index: 0; width: 100%; height: 100%; background: #ffffff url('../images/sec31.jpg') center / cover no-repeat; } .sectionbg32, .sectionbg34 { position: absolute; left: 0; top: 0; z-index: 0; width: 100%; height: 100%; background: #ffffff url('../images/sec32.jpg') center / cover no-repeat; } .fcate7 { width: 100%; position: relative; z-index: 2; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .fcate7 .cn1 { font-size: 42px; color: #fff; line-height: 60px; height: 60px; } .fcate7 .cn2 { font-size: 42px; color: #1d1d1f; line-height: 60px; height: 60px; } .tedlist { position: absolute; left: 0; bottom: 70px; z-index: 2; width: 100%; font-size: 0; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .tedlist li { display: inline-block; vertical-align: top; width: 155px; border-right: 1px solid rgba(189, 189, 189, 0.3); } .tedlist li:last-child { border-right-width: 0; width: 170px; } .tedlist .pic { width: 58px; font-size: 0; line-height: 58px; height: 58px; border-radius: 50%; border: 1px solid #bdbdbd; margin: 0 auto; } .tedlist img { max-width: 100%; max-height: 100%; } .tedlist li h3 { font-size: 16px; color: #eee; line-height: 18px; height: 18px; margin-top: 16px; } .tedlist li a.more { display: block; position: relative; margin: 27px auto 0; width: 136px; height: 36px; border: 2px solid #fff; border-radius: 20px; font-size: 14px; color: #eee; line-height: 36px; text-align: center; } .tedlist li a.more:hover { background-color: #fff; color: #333; } .tedlist.even .pic { border-color: #6e6e73; } .tedlist.even h3 { color: #444; } .tedlist.even li a.more { border-color: #757978; color: #757978; } .tedlist.even li a.more:hover { background-color: #757978; color: #fff; } .tedlist.even li { border-color: rgba(117, 121, 120, 0.3); } .txtEff label { display: inline-block; } .pig { width: 50px; height: 50px; background-color: #3978df; border-radius: 50%; opacity: 0; position: absolute; left: 100%; top: 100%; z-index: 10; margin-left: -25px; margin-top: -25px; -webkit-box-shadow: 0 0 0 5px rgba(57, 120, 223, 0.1); box-shadow: 0 0 0 5px rgba(57, 120, 223, 0.1); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; -webkit-transition: opacity 0.4s linear, -webkit-transform 0.5s ease-in-out; transition: opacity 0.4s linear, -webkit-transform 0.5s ease-in-out; transition: opacity 0.4s linear, transform 0.5s ease-in-out; transition: opacity 0.4s linear, transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out; } .pig.show { opacity: 1; } .pig:active, .pig.active { -webkit-transform: scale(1.1); transform: scale(1.1); } .pig s { width: 14px; height: 20px; cursor: pointer; position: absolute; margin-top: -10px; top: 50%; z-index: 2; border-radius: 7px; background-color: transparent; background-position: center; background-repeat: no-repeat; -webkit-transition: 0.3s; transition: 0.3s; } .pig s.i1 { left: 8px; background-image: url('../images/lt4-pig.png'); } .pig s.i2 { right: 8px; background-image: url('../images/gt4-pig.png'); } .pig:active s.i1, .pig.active s.i1 { left: 0px; } .pig:active s.i2, .pig.active s.i2 { right: 0px; } .desk { width: 1000px; height: 560px; margin: 0 auto; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-position: center; background-repeat: no-repeat; background-size: contain; } .desk .playbtn { position: absolute; right: 0; bottom: 0; z-index: 15; width: 50px; height: 50px; border-radius: 50%; background: #ffffff url('../images/play.png') 60% center no-repeat; display: none; } .desk .playbtn.on { background-image: url('../images/pause.png'); } .desk i.load { position: absolute; left: 50%; top: 50%; z-index: 1; width: 32px; height: 32px; background: url('../images/load1.png') center no-repeat; margin-left: -16px; margin-top: -16px; -webkit-animation: rotate360 2s linear infinite; animation: rotate360 2s linear infinite; } .desktwo { width: 100%; height: 500px; position: relative; z-index: 1; display: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .desktwo .playbtn { position: absolute; left: 50%; top: 50%; z-index: 15; width: 50px; height: 50px; border-radius: 50%; background: #ffffff url('../images/play.png') 60% center no-repeat; margin-left: -25px; margin-top: -25px; } .vd3 { position: relative; width: 100%; height: 100%; z-index: 1; -o-object-fit: fill; object-fit: fill; } .deskten { width: 100%; height: 100%; left: 0; top: 0; position: absolute; z-index: 1; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .deskten .playbtn { position: absolute; left: 50%; top: 50%; z-index: 15; width: 50px; height: 50px; border-radius: 50%; background: #ffffff url('../images/play.png') 60% center no-repeat; margin-left: -25px; margin-top: -25px; display: none; } .vd { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; background-color: #000; -o-object-fit: cover; object-fit: cover; } .vdppp { position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } /* 3浜у搧 绗?娈 甯搁┗瑙嗛*/ .deskfour { width: 100%; height: 100%; left: 0; top: 0; position: absolute; z-index: 1; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .deskfour .playbtn { position: absolute; left: 50%; top: 50%; z-index: 15; width: 50px; height: 50px; border-radius: 50%; background: #ffffff url('../images/play.png') 60% center no-repeat; margin-left: -25px; margin-top: -25px; } @media screen and (max-width: 1023px) { .desk { display: none; } .desktwo { display: block; } .tedlist { bottom: 30px; } .vd { display: none; } .vd3 { -o-object-fit: contain; object-fit: contain; } .deskten .playbtn { display: block; } .vdppp { z-index: 4; } } @media screen and (max-width: 720px) { .desktwo { height: 400px; } .tedlist li { width: 22%; } } @media screen and (max-height: 700px) and (min-width: 1000px) { .tedlist { bottom: 20px; } .desk { height: 400px; } .desktwo { height: 400px; } } @media screen and (max-height: 700px) { .fcate7 .cn1 { font-size: 32px; line-height: 40px; height: 40px; } .fcate7 .cn2 { font-size: 32px; line-height: 40px; height: 40px; } } .etx-info { margin-top: 6px; } .etx-info li { display: inline-block; background-color: #fff; border-radius: 7px; min-width: 40px; height: 50px; font-size: 16px; text-align: center; line-height: normal; padding-left: 5px; padding-right: 5px; margin-right: 2px; vertical-align: top; } .etx-info li span { display: block; padding-top: 4px; height: 22px; color: #444444; } .etx-info li .icon { display: block; width: 100%; height: 100%; font-size: 0; line-height: 22px; } .etx-info li .icon.icon2 { background: url('../images/tea2.jpg') center no-repeat; } .etx-info li .icon.icon3 { background: url('../images/tea3.jpg') center no-repeat; } .etx-info li .icon.icon4 { background: url('../images/tea4.jpg') center no-repeat; } .etx-info li .icon.icon5 { background: url('../images/tea5.jpg') center no-repeat; } .etx-info li p { font-size: 14px; height: 24px; line-height: 20px; }