@charset "utf-8"; .cm { color: #b01f24; } .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('../other/Geometr415BlkBT.ttf'); } @font-face { font-family: 'swissbt'; src: url('../other/SWISSBT.TTF'); } @font-face { font-family: 'helvetica'; src: url('../other/HELVETICA.TTF'); } .inbanner { width: 100%; height: 1000px; position: relative; overflow: hidden; background-color: #f1f1f1; } .inbanner>img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; z-index: 0; } .inbanner.actived>img { -webkit-transform: scale(1.05); transform: scale(1.05); -webkit-transition: 8000ms; transition: 8000ms; } .inbanner .cer { position: relative; height: 100%; } .inbanner2 { width: 100%; height: 750px; position: relative; overflow: hidden; } .inbanner2>img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; z-index: 0; } .inbanner2.actived>img { -webkit-transform: scale(1.05); transform: scale(1.05); -webkit-transition: 8000ms; transition: 8000ms; } .inbanner3 { width: 100%; height: 1000px; position: relative; overflow: hidden; background-color: #f1f1f1; } .inbanner3>img { position: relative; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; z-index: 0; } .inbanner3.actived>img { -webkit-transform: scale(1.05); transform: scale(1.05); -webkit-transition: 8000ms; transition: 8000ms; } .inbanner3 .cer { position: relative; height: 100%; } .ibcatein { position: absolute; width: 100%; left: 0; top: 50%; z-index: 1; color: #fff; text-align: center; overflow: hidden; margin-top: -176px; } .ibcatein .cn { font-size: 36px; line-height: 60px; letter-spacing: 4px; text-indent: 4px; font-family: 'Source Han Serif CN'; } .ibcatein .en { font-size: 24px; line-height: 54px; letter-spacing: 16px; font-family: 'helvetica'; text-transform: uppercase; position: relative; padding-bottom: 44px; text-indent: 16px; } .ibcatein .en:after { content: ''; position: absolute; left: 50%; bottom: 0; z-index: 0; width: 66px; height: 2px; background-color: #fff; margin-left: -33px; } .mouse { width: 120px; height: 28px; padding-top: 42px; margin-top: 100px; position: absolute; left: 50%; margin-left: -60px; top: 50%; z-index: 2; font-size: 16px; line-height: 28px; color: #fff; text-align: center; background: url('../images/mouse.png') center 0 no-repeat; } .mouse2 { width: 360px; height: 38px; padding-top: 40px; margin-bottom: -1.1%; position: absolute; left: 50%; margin-left: -180px; bottom: 50%; z-index: 2; font-size: 18px; line-height: 38px; color: #fff; text-align: center; background: url('../images/addr.png') center 0 no-repeat; } .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%; } .ibcatein3 { position: absolute; width: 100%; left: 0; top: 50%; z-index: 1; color: #fff; text-align: center; overflow: hidden; margin-top: -110px; } .ibcatein3 .cn { font-size: 48px; color: #fff; line-height: 64px; font-weight: bold; letter-spacing: 5px; } .ibcatein3 .txt { font-size: 18px; color: #fff; line-height: 36px; letter-spacing: 2px; max-width: 780px; margin: 0 auto; padding: 0 20px; } .ibcatein3 .hx { width: 90px; height: 1px; background-color: #fff; margin: 24px auto; } @media screen and (max-width: 960px) { .inbanner { height: 0; padding-bottom: 52%; } .inbanner2 { height: 0; padding-bottom: 39%; } .mouse { display: none; } .ibcatein { margin-top: -80px; } .ibcatein3 { margin-top: -32px; } .ibcatein3 .txt, .ibcatein3 .hx { display: none; } } @media screen and (max-width: 750px) { .ibcatein { margin-top: -50px; } .ibcatein .cn { line-height: 50px; } .ibcatein .en { padding-bottom: 0; line-height: 50px; letter-spacing: 8px; text-indent: 8px; } .ibcatein .en:after { display: none; } .ibcatein3 .cn { font-size: 40px; letter-spacing: 0; } } @media screen and (max-width: 600px) { .ibcatein { margin-top: -40px; } .ibcatein .cn { font-size: 30px; line-height: 40px; } .ibcatein .en { font-size: 20px; line-height: 40px; } .ibcatein3 { margin-top: -16px; } .ibcatein3 .cn { font-size: 30px; } } .bantel { width: 100%; position: absolute; left: 0; top: 50%; z-index: 1; margin-top: 8.5%; height: 42px; line-height: 42px; text-align: center; } .bantel a { display: inline-block; font-size: 24px; color: #fff; font-family: 'helvetica'; margin: 0 30px; padding-left: 32px; } .bantel a.tel1 { background: url('../images/tel1.png') 0 no-repeat; } .bantel a.tel2 { background: url('../images/tel2.png') 0 no-repeat; } .fullline { width: 100%; position: absolute; left: 0; top: 50%; z-index: 1; overflow: hidden; margin-top: 3.8%; height: 1px; background-color: rgba(255, 255, 255, 0.2); } .fullline:before { content: ''; position: absolute; left: -100%; bottom: 0; z-index: 2; width: 100%; height: 2px; background-color: #fff; -webkit-animation: widthgrow 20s linear infinite; animation: widthgrow 20s linear infinite; } @-webkit-keyframes widthgrow { from { left: -100%; } to { left: 100%; } } @keyframes widthgrow { from { left: -100%; } to { left: 100%; } } .lxbtnout { height: 68px; font-size: 0; text-align: center; position: absolute; left: 0; top: 50%; margin-top: 13.8%; z-index: 1; width: 100%; } .lxbtnout a { display: inline-block; width: 66px; height: 66px; margin: 0 30px; border-radius: 34px; border: 1px solid #fff; text-align: center; line-height: 66px; } .lxbtnout a>img { max-width: 90%; -webkit-transition: 1s; transition: 1s; } .lxbtnout a:hover>img { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .footwx { position: relative; } .footwx .bigewm { position: absolute; width: 140px; height: 140px; bottom: 110%; left: 50%; margin-left: -70px; z-index: 1; display: none; line-height: 140px; background-color: #fff; } @media screen and (max-width: 1400px) { .ibcatein2 { margin-bottom: 85px; } .mouse2 { margin-bottom: -6px; } .lxbtnout { margin-top: 184px; } } @media screen and (max-width: 920px) { .bantel a { font-size: 20px; margin: 0 20px; } } @media screen and (max-width: 550px) { .bantel a { display: block; width: 220px; margin: 0 auto; text-align: left; } .lxbtnout a { margin: 0 15px; } } .sil-particles { position: fixed; z-index: 99; display: block; width: 100%; height: 100%; pointer-events: none; } .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: #b01f24; line-height: 24px; font-family: arial; text-transform: uppercase; font-weight: bold; letter-spacing: 3px; } .cate1 .cn { font-size: 18px; color: #fff; 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; } .head_menu { width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 45; display: none; background: url('../images/navbg.jpg') center no-repeat; } .head_menu ul { width: 100%; height: 100%; display: inline-block; } .head_menu ul li { width: calc(100% / 7); height: 100%; float: left; text-align: center; display: table; position: relative; } .head_menu ul li:before { content: ''; position: absolute; left: 0; top: 0; z-index: 1; width: 1px; height: 100%; background-color: rgba(255, 255, 255, 0.1); } .fp-tableCell { display: table-cell; vertical-align: middle; width: 100%; height: 100%; position: relative; z-index: 2; } .head_menu ul li .box1 { width: 100%; font-size: 24px; line-height: 44px; } .head_menu ul li .box1 a { display: inline-block; color: #919191; } .head_menu ul li .box2 { width: 100%; margin-top: 70px; } .head_menu ul li .box2 i { display: inline-block; background: url(../images/jia-nav.png) no-repeat center; position: relative; -webkit-transition: all 1.8s 0.6s; transition: all 1.8s 0.6s; opacity: 0; width: 33px; height: 33px; } .head_menu ul li:hover .box2 i { -webkit-transform: rotate(540deg); transform: rotate(540deg); opacity: 1; } .head_menu ul li::after { content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0; background: rgba(36, 43, 58, 0.9); -webkit-transition: all 1s; transition: all 1s; } .head_menu ul li:hover::after { left: 50%; width: 0; } .greybg { background-color: #f8f8f8; } .js-qiecon2 { display: none; } .js-qiecon2.on { display: block; } .js-qiecon { position: absolute; left: 200%; top: 0; z-index: -20; opacity: 0; } .js-qiecon.on { position: static; left: 0; top: 0; z-index: 1; opacity: 1; } .pianyi { padding-top: 80px; margin-top: -80px; } .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 { height: 76px; position: relative; z-index: 5; padding: 0 20px; background-color: #b01f24; margin-top: -76px; } .baninfo:before { content: ''; position: absolute; left: -7px; top: 26px; z-index: 1; width: 29px; height: 25px; background: url('../images/jtr-erji.png') center no-repeat; } .erji { float: left; font-size: 0; white-space: nowrap; text-align: center; max-width: 100%; line-height: 72px; height: 72px; } .erji a { display: inline-block; padding: 0 30px; height: 100%; position: relative; color: #fff; font-size: 16px; line-height: 72px; vertical-align: top; } .erji a:after { content: ''; position: absolute; left: 0; bottom: 0; z-index: 0; width: 0; height: 1px; display: none; } .erji i { display: inline-block; width: 1px; height: 14px; vertical-align: middle; background-color: #4dbefb; } .erji a:hover { text-decoration: underline; } .erji a.on { text-decoration: underline; } .tree { float: right; height: 100%; font-size: 14px; line-height: 72px; color: #fff; } .tree a { display: inline-block; vertical-align: middle; color: #fff; } .tree a:hover, .tree a.leaf { color: #f60; } .tree i { padding: 0 15px; display: inline-block; width: 10px; vertical-align: middle; background: url('../images/sjr-tree.png') center no-repeat; } @media screen and (max-width: 1300px) { .tree { display: none; } .erji { float: none; } } @media screen and (max-width: 920px) { .baninfo { display: none; } } .berji { font-size: 0; width: 100%; } .berji a { display: inline-block; width: 250px; font-size: 18px; color: #d52e15; line-height: 48px; height: 48px; position: relative; overflow: hidden; background-color: #fff; margin-left: 30px; border: 1px solid #d52e15; text-align: center; } .berji a:first-child { margin-left: 0; } .berji a span { color: #d52e15; display: inline-block; height: 48px; -webkit-transition: 0.3s; transition: 0.3s; } .berji a.on, .berji a:hover { background-color: #d52e15; } span.lei1 { background: url('../images/lei1.png') 0 center no-repeat; padding-left: 31px; } span.lei2 { background: url('../images/lei2.png') 0 center no-repeat; padding-left: 35px; } .berji a.on span.lei1, .berji a:hover span.lei1 { background-image: url('../images/lei1h.png'); color: #fff; } .berji a.on span.lei2, .berji a:hover span.lei2 { background-image: url('../images/lei2h.png'); color: #fff; } @media screen and (max-width: 750px) { .berji a { width: 200px; } .berji { padding: 0 10px; width: auto; } } @media screen and (max-width: 560px) { .berji a { width: 150px; } } 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 infinite; animation: jello 1s 0s infinite; } .rubberBand-h:hover { -webkit-animation: rubberBand 1s 0s 1; animation: rubberBand 1s 0s 1; } .outnavbg { width: 100%; height: 0; opacity: 0; background-color: #fff; border-bottom: 1px solid #eee; overflow: hidden; } .outnavbg2 { width: 100%; height: 60px; background-color: #f0f3f6; } .outnav3 { height: 60px; padding: 0; position: relative; z-index: 1; overflow: hidden; text-align: center; } .outnav3 .nav-left, .outnav3 .nav-right { width: 50px; height: 100%; cursor: pointer; position: absolute; top: 0; z-index: 2; background-position: center; background-repeat: no-repeat; display: none; transition: 0.3s; -moz-transition: 0.3s; -webkit-transition: 0.3s; -o-transition: 0.3s; } .outnav3 .nav-left { left: 0; background-image: url('../images/lt3.png'); } .outnav3 .nav-right { right: 0; background-image: url('../images/gt3.png'); } .outnav3 .nav-left:hover, .outnav3 .nav-right:hover { background-color: #81cdf1; } .outnav3 #wrapper22 { width: 100%; height: 100%; position: relative; } .outnav3.on { padding: 0 50px; } .outnav3.on .nav-left, .outnav3.on .nav-right { display: block; } .nav7 { width: 100%; height: 100%; font-size: 0; white-space: nowrap; } .nav7 li { width: 200px; 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; background-color: #fff; color: #333; line-height: 60px; font-size: 16px; } .outnavbg2 .nav7 li a { background-color: #f0f3f6; } .nav7 li:hover a, .outnavbg2 .nav7 li:hover a { background-color: #44b6ff; color: #fff; } .nav7 li.on a, .outnavbg2 .nav7 li.on a { background-color: #2194ef; color: #fff; } @media screen and (max-width: 750px) { .nav7 li a { font-size: 24px; } } .atcbanner { padding-bottom: 148px; padding-top: 288px; background: #ffffff url('../images/ib4.jpg') center 0 fixed no-repeat; } .atc-h { text-align: center; margin-bottom: 62px; } .atc-h h1 { font-size: 24px; color: #fff; line-height: 40px; letter-spacing: 4px; } .atc-date { font-size: 16px; color: #fff; line-height: 30px; margin-top: 18px; } .atc-date span { display: inline-block; margin: 0 1em; letter-spacing: 2px; } .atc-two { background-color: #fff; border-radius: 10px; padding-bottom: 106px; -webkit-box-shadow: 0 6px 21px 0 rgba(115, 115, 115, 0.2); box-shadow: 0 6px 21px 0 rgba(115, 115, 115, 0.2); } .atc-con { padding: 64px 70px 106px; font-size: 16px; line-height: 2em; color: #666; text-align: justify; letter-spacing: 2px; } .atc-con img { max-width: 100%; } .atc-con .pic { padding: 20px 0; text-align: center; } .atc-con a { color: #f60; } .atc-pn { height: 70px; line-height: 70px; overflow: hidden; padding: 0 105px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } .atc-pn a { display: block; width: 50%; height: 100%; overflow: hidden; font-size: 16px; color: #666; line-height: 70px; } .atc-pn a:hover { color: #b01f24; } a.atc-prev { float: left; margin-left: -35px; text-align: left; } a.atc-next { float: right; margin-right: -35px; text-align: right; } a.atc-ret { font-size: 0; display: inline-block; vertical-align: top; margin: 0 auto; width: 68px; height: 70px; background: url('../images/ret.png') center no-repeat; border-left: 1px solid #ddd; border-right: 1px solid #ddd; } a.atc-ret:hover { opacity: 0.8; } @media screen and (max-width: 1200px) { .atc-con { padding: 50px 50px 60px; } .atc-two { padding-bottom: 70px; } .atc-pn { padding: 0 85px; } } @media screen and (max-width: 960px) { .videowrap { padding-bottom: 60%; height: 0; } .video { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; } .atc-pn { height: auto; line-height: 40px; padding: 20px 50px 30px; } .atc-pn a { width: 100%; line-height: 40px; } a.atc-prev { float: none; margin-left: 0; } a.atc-next { float: none; margin-right: 0; text-align: left; } a.atc-ret { width: 30%; height: 40px; display: block; border: 1px solid #ddd; margin-top: 20px; } } @media screen and (max-width: 750px) { .atc-h h1 { letter-spacing: 0; } .atc-date span { letter-spacing: 0; } .atc-con { padding: 40px 30px 50px; letter-spacing: 0; } .atc-two { padding-bottom: 0; } .atc-pn { padding: 20px 30px 30px; border-bottom: 0 none; } } @media screen and (max-width: 640px) { .atc-con { padding: 30px 20px 40px; } .atc-pn { padding: 20px 20px 30px; } } .caseout { padding: 120px 0; } .caselist { padding: 50px 0 100px; margin: 0 -10px; overflow: hidden; } .caselist li { float: left; width: 33.3%; margin-bottom: 20px; } .caselist li .lin { padding: 0 10px; } .caselist li a { display: block; width: 100%; position: relative; } .caselist .pic { width: 100%; height: 316px; overflow: hidden; position: relative; text-align: center; font-size: 0; line-height: 316px; } .caselist img { width: 560px; margin-left: -280px; left: 50%; } .caselist li .wz { background-color: rgba(230, 70, 46, 0.9); padding: 42px 54px 0; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 100%; opacity: 0; -webkit-transition: .8s; transition: .8s; position: absolute; left: 0; top: 0; z-index: 3; } .caselist li h3 { font-size: 24px; color: #fff; line-height: 48px; height: 48px; overflow: hidden; margin-bottom: 15px; } .caselist li .hx { display: block; margin: 14px 0; width: 64px; height: 1px; background-color: #fff; } .caselist li .txt { font-size: 16px; color: rgba(255, 255, 255, 0.8); line-height: 28px; height: 84px; overflow: hidden; } .caselist li .more { display: block; width: 28px; height: 28px; margin-top: 28px; background: url('../images/jtr-cs.png') center no-repeat; } .caselist li:hover .wz { opacity: 1; } @media screen and (max-width: 1200px) { .caseout { padding: 70px 0; } .caselist { padding: 50px 0 50px; } .caselist li { width: 50%; } } @media screen and (max-width: 750px) { .caselist { margin: 0; } } @media screen and (max-width: 640px) { .caselist li { width: 100%; } } .comform { padding: 50px 0 62px; background: url('../images/formbg.jpg') center no-repeat; background-size: cover; } .comform .title { height: 48px; font-size: 0; white-space: nowrap; line-height: 48px; text-align: center; overflow: hidden; } .comform .title i { display: inline-block; vertical-align: top; width: 110px; height: 100%; background: url('../images/line1.png') center no-repeat; } .comform .title span { display: inline-block; vertical-align: top; height: 100%; margin: 0 35px; font-size: 24px; color: #222; font-family: 'Source Han Serif CN'; } .comform .title span em { font-weight: normal; color: #b01f24; } .liuyan { margin: 43px auto 0; max-width: 1540px; color: #555; font-size: 0; } .liuyan .hang { float: left; width: 25%; height: 60px; line-height: 60px; margin-bottom: 30px; } .liuyan p { height: 100%; margin: 0 10px; } .liuyan input[type=text] { width: 100%; height: 60px; border: 0 none; background-color: #fff; line-height: 60px; text-indent: 22px; font-size: 18px; outline: 1px solid #fff; -webkit-transition: 0.3s; transition: 0.3s; } .liuyan input[type=text]:focus { outline: 1px solid #b01f24; } .liuyan i.v { display: inline-block; width: 100%; height: 100%; vertical-align: top; } .liuyan .btnarea { float: left; width: 25%; height: 60px; line-height: 60px; margin-bottom: 30px; } .liuyan .btnarea input { width: 100%; height: 60px; font-size: 18px; color: #fff; line-height: 60px; } .liuyan .btnarea input:hover { opacity: 0.8; } .liuyan input.tj { background-color: #b01f24; } @media screen and (max-width: 1300px) { .comform { padding: 50px 20px 62px; } .liuyan .hang { width: 50%; } .liuyan .btnarea { width: 50%; } } @media screen and (max-width: 750px) { .comform .title i { display: none; } .comform .title span { margin: 0 auto; } .liuyan .btnarea { float: none; width: 100%; } .liuyan .hang { float: none; width: 100%; } .v span.Validform_checktip { line-height: 30px; height: 30px; } } .newsout { padding: 0 0 120px; } .newslist { padding: 0 0 120px; width: 100%; } .newslist li { width: 100%; padding: 38px 0; background-color: #eee; border-bottom: 2px solid #fff; } .newslist li:nth-child(even) { background-color: #f5f5f5; } .newslist li .lin { max-width: 1200px; margin: 0 auto; } .newslist li a { display: block; position: relative; padding-left: 0; min-height: 220px; overflow: hidden; padding-right: 166px; } .newslist li a:after { content: ''; position: absolute; right: 130px; top: 40px; z-index: 2; width: 1px; height: 143px; background-color: rgba(0, 0, 0, 0.1); } .newslist li .pic { position: absolute; left: 0; top: 0; z-index: 1; width: 0; height: 220px; overflow: hidden; } .newslist li .pic img { width: 386px; height: 100%; } .newslist li h3 { font-size: 18px; color: #333; line-height: 30px; height: 30px; overflow: hidden; padding-top: 28px; } .newslist li .txt { font-size: 16px; color: #666; line-height: 32px; overflow: hidden; height: 64px; text-align: justify; margin: 18px 0 24px; } .newslist li .date { font-size: 16px; color: #666; line-height: 30px; height: 30px; background: url('../images/clock.png') 0 center no-repeat; font-family: 'helvetica'; padding-left: 28px; } .newslist li label { display: block; width: 28px; height: 28px; font-size: 0; cursor: pointer; background: #b01f24 url('../images/jtr-n.png') center no-repeat; border-radius: 50%; position: absolute; right: 0; top: 50%; z-index: 1; margin-top: -14px; } .newslist li:hover { background-color: #b01f24; } .newslist li:hover a { padding-left: 426px; } .newslist li:hover a:after { background-color: rgba(255, 255, 255, 0.2); } .newslist li:hover .pic { width: 386px; } .newslist li:hover h3 { color: #fff; } .newslist li:hover .txt { color: rgba(255, 255, 255, 0.7); } .newslist li:hover .date { background-image: url('../images/clock2.png'); color: #fff; } .newslist li:hover label { background-image: url('../images/jtr-nh.png'); background-color: #fff; } .newslist li, .newslist a:after, .newslist h3, .newslist .date, .newslist label { -webkit-transition: 0.4s; transition: 0.4s; } .newslist a, .newslist .pic { -webkit-transition: 1s; transition: 1s; } .newslist .txt { -webkit-transition: color 0.4s; transition: color 0.4s; } @media screen and (max-width: 1440px) { .newsout { padding: 0 0 80px; } .newslist { padding: 0 0 80px; } } @media screen and (max-width: 1280px) { .newslist li a { padding-left: 426px; padding-right: 20px; } .newslist li:hover a { padding-left: 426px; } .newslist li a:after { display: none; } .newslist li label { display: none; } .newslist li .pic { width: 386px; left: 20px; } .newslist li:hover .pic { width: 386px; } } @media screen and (max-width: 1000px) { .newslist li h3 { padding-top: 10px; } .newslist li .txt { height: auto; max-height: 96px; } } @media screen and (max-width: 840px) { .newslist li a { padding-left: 46%; padding-right: 3%; } .newslist li:hover a { padding-left: 46%; } .newslist li .pic { width: 40%; left: 3%; } .newslist li:hover .pic { width: 40%; } .newslist li .pic img { position: absolute; left: 50%; margin-left: -193px; } } @media screen and (max-width: 600px) { .newsout { padding: 0 0 60px; } .newslist { padding: 0 0 60px; } .newslist li a { padding-left: 3%; } .newslist li:hover a { padding-left: 3%; } .newslist li .pic { position: relative; width: 100%; left: 0; height: auto; } .newslist li:hover .pic { width: 100%; } .newslist li .pic img { position: static; left: 0; margin-left: 0; width: 100%; height: auto; } } .proxilie { width: 100%; height: 1000px; overflow: hidden; background: url('../images/proleibg.jpg') center no-repeat; background-size: cover; } .proxilie li { float: left; width: 25%; height: 100%; } .proxilie li .lin { padding: 0; height: 100%; } .proxilie li a { display: block; width: 100%; position: relative; height: 100%; overflow: hidden; } .proxilie .bg { width: 100%; height: 78.4%; overflow: hidden; position: relative; z-index: 0; -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-transition: 1.4s; transition: 1.4s; -webkit-transform-origin: 50% 0; transform-origin: 50% 0; opacity: 0; } .proxilie li.i5 { background-color: rgba(0, 0, 0, 0.3); } .proxilie li.i2, .proxilie li.i4 { background-color: rgba(0, 0, 0, 0.4); } .proxilie li.i1, .proxilie li.i3 { background-color: rgba(0, 0, 0, 0.5); } .proxilie li.i1 .bg { background: url('../images/prolei1.jpg') center no-repeat; } .proxilie li.i2 .bg { background: url('../images/prolei2.jpg') left center no-repeat; } .proxilie li.i3 .bg { background: url('../images/prolei3.jpg') center no-repeat; } .proxilie li.i4 .bg { background: url('../images/prolei4.jpg') center no-repeat; } .proxilie li.i5 .bg { background: url('../images/prolei5.jpg') right center no-repeat; } .proxilie li .wrap { background-color: rgba(230, 70, 46, 0); padding: 40px 0 47px; width: 100%; text-align: center; -webkit-transition: background-color 0.4s, top 1s; transition: background-color 0.4s, top 1s; position: absolute; left: 0; top: 5.6%; z-index: 3; } .proxilie li .cn { font-size: 24px; color: #fff; line-height: 40px; font-weight: bold; height: 40px; overflow: hidden; letter-spacing: 4px; } .proxilie li .en { font-size: 14px; color: rgba(255, 255, 255, 0.3); line-height: 20px; height: 20px; overflow: hidden; font-family: 'helvetica'; text-transform: uppercase; } .proxilie li .hx { display: block; margin: 14px auto 28px; width: 28px; height: 1px; background-color: #fff; } .proxilie li label { display: block; width: 32px; height: 32px; margin: 0 auto; background: url('../images/jtr-pro.png') center no-repeat; } .proxilie li:hover .wrap { background-color: #b01f24; top: 78.4%; } .proxilie li:hover .bg { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); opacity: 1; } @media screen and (max-width: 1000px) { .proxilie li { width: 50%; height: 50%; } .proxilie .bg { height: 100%; } .proxilie li .wrap { padding: 25px 0 26px; } .proxilie li .hx { display: none; } .proxilie li label { display: none; } } .door .svg { display: block; z-index: 0; width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .door .svg svg { overflow: visible; } .door .path { stroke-dasharray: 1904; stroke-dashoffset: 0; -webkit-animation: dash 10s linear infinite; animation: dash 10s linear infinite; } @-webkit-keyframes dash { from { stroke-dashoffset: 3808; } to { stroke-dashoffset: 0; } } @keyframes dash { from { stroke-dashoffset: 3808; } to { stroke-dashoffset: 0; } } .lxout { width: 100%; background-color: #323844; } .lx { padding-left: 336px; height: 650px; position: relative; } .door { width: 336px; height: 100%; background-color: #b01f24; position: absolute; left: 0; top: 0; z-index: 1; } .door .fig1 { position: absolute; left: 0; top: 89px; z-index: 1; width: 100%; height: 50px; background: url('../images/shu.png') center no-repeat; } .door .fig2 { position: absolute; left: 0; top: 50%; z-index: 1; width: 100%; height: 75px; background: url('../images/logo3.png') center no-repeat; margin-top: -59px; } .door .hx { width: 68px; height: 1px; background-color: #fff; margin-left: -34px; position: absolute; left: 50%; top: 50%; z-index: 1; margin-top: 142px; } .door .txt { position: absolute; left: 0; bottom: 32px; z-index: 1; width: 100%; opacity: 0.5; font-size: 16px; color: #fff; line-height: 2em; height: 2em; text-align: center; } .door .txt span { letter-spacing: 14px; padding-left: 14px; } .lxform { padding-top: 152px; } .lxform .title { height: 48px; font-size: 0; line-height: 48px; text-align: center; overflow: hidden; position: relative; } .lxform .title i { width: 166px; height: 100%; position: absolute; left: 52px; top: 0; z-index: 0; } .lxform .title i.i2 { left: auto; right: 52px; } .lxform .title i:before { content: ''; position: absolute; left: 0; top: 50%; z-index: 0; width: 100%; height: 1px; background-color: rgba(255, 255, 255, 0.12); } .lxform .title span { display: inline-block; vertical-align: top; height: 100%; font-size: 24px; color: #fff; font-family: 'Source Han Serif CN'; } .lxform .title span em { font-weight: normal; color: #b01f24; } .liuyan2 { margin: 44px 0 0; padding: 0 40px; font-size: 0; } .liuyan2 .hang { float: left; width: 50%; height: 50px; line-height: 50px; margin-bottom: 30px; } .liuyan2 p { height: 100%; margin: 0 12px; } .liuyan2 input[type=text] { width: 100%; height: 50px; border: 0 none; background-color: transparent; line-height: 50px; text-indent: 22px; font-size: 18px; color: #fff; outline: 1px solid rgba(255, 255, 255, 0.2); -webkit-transition: 0.3s; transition: 0.3s; } .liuyan2 input[type=text]:focus, .liuyan2 select:focus { outline: 1px solid #b01f24; } .liuyan2 i.v { display: inline-block; width: 100%; height: 100%; vertical-align: top; } .liuyan2 select { width: 100%; height: 50px; border: 0 none; background-color: transparent; line-height: 50px; text-indent: 20px; font-size: 18px; color: #fff; outline: 1px solid rgba(255, 255, 255, 0.2); -webkit-transition: 0.3s; transition: 0.3s; } .liuyan2 select option { color: #666; } .liuyan2 .btnarea { float: left; width: 100%; height: 50px; line-height: 50px; margin-top: 30px; } .liuyan2 .btnarea input { width: 100%; height: 50px; font-size: 18px; color: #fff; line-height: 50px; } .liuyan2 .btnarea input:hover { opacity: 0.8; } .liuyan2 input.tj { background-color: #b01f24; } @media screen and (max-width: 1080px) { .lx { padding: 50px 0; height: auto; } .door { position: relative; width: 100%; height: 250px; } .door .svg { display: none; } .door .fig1 { top: 30px; } .door .fig2 { margin-top: -30px; } .door .hx { display: none; } .lxform { padding-top: 50px; } .liuyan2 { padding: 0; } } @media screen and (max-width: 750px) { .liuyan2 .hang { float: none; width: 100%; } .liuyan2 .btnarea { float: none; } } @media screen and (max-width: 750px) { .lxform .title i { display: none; } .lxform .title span { margin: 0 auto; } } .tuijian { width: 100%; height: 1000px; overflow: hidden; position: relative; } .tjpicbg { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; overflow: hidden; } .tjpicbg img { position: absolute; width: 1920px; height: 100%; left: 50%; top: 0; z-index: 2; margin-left: -960px; -webkit-transition: 1s; transition: 1s; } .tjother { width: 53.85%; height: 100%; display: table; position: relative; z-index: 2; background-color: rgba(50, 56, 68, 0.7); } .tjother .inner { padding-left: 200px; padding-right: 120px; display: table-cell; vertical-align: middle; } .tjother .cn { font-size: 24px; color: #b01f24; line-height: 56px; } .tjother .en { font-size: 42px; color: #b01f24; line-height: 52px; text-transform: uppercase; word-break: normal; } .tjother h3 { font-size: 30px; color: #fff; line-height: 50px; font-weight: bold; margin-top: 38px; } .tjother .tjcon { font-size: 16px; color: #fff; line-height: 36px; margin-top: 44px; overflow: hidden; } .tjother .tjcon img { display: none; } .tjpicbg:hover img { -webkit-transform: scale(1.04); transform: scale(1.04); } @media screen and (max-width: 1580px) { .tjother .en { font-size: 38px; } .tjother .inner { padding: 0 10%; } } @media screen and (max-width: 1100px) { .tjother { width: 70%; } } @media screen and (max-width: 900px) { .tjother { width: 100%; } } @media screen and (max-width: 720px) { .tjother .inner { padding: 0 5%; } } @media screen and (max-width: 540px) { .tjother .en { font-size: 30px; } } .linian { padding: 196px 0 178px; text-align: center; background: #ffffff url('../images/linianbg.jpg') center bottom no-repeat; } .linian .pic img { max-width: 100%; } .linian .cn { font-size: 30px; color: #b01f24; line-height: 50px; margin: 72px 0 32px; } .linian .cn2 { font-size: 24px; color: #666; line-height: 40px; } @media screen and (max-width: 580px) { .linian .cn2 { font-size: 20px; } } .liuchen { padding: 76px 0 134px; background: url('../images/liuchenbg.jpg') center no-repeat; background-size: cover; } .lclist { width: 100%; height: 506px; position: relative; text-align: center; font-size: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); overflow: hidden; margin-top: 60px; } .lclist li { display: inline-block; width: 231px; vertical-align: bottom; } .lclist .sx { width: 1px; background-color: rgba(255, 255, 255, 0.1); margin: 0 auto; } .lclist li.i1 .sx { height: 265px; } .lclist li.i2 .sx { height: 131px; } .lclist li.i3 .sx { height: 265px; } .lclist li.i4 .sx { height: 131px; } .lclist li.i5 .sx { height: 206px; } .lclist li.i6 .sx { height: 317px; } .lclist li.i7 .sx { height: 242px; } .lclist a { display: block; } .lclist .num { width: 100%; height: 54px; overflow: hidden; font-size: 0; line-height: 54px; } .lclist .num img { max-width: 100%; max-height: 100%; } .lclist .txt { display: table; width: 100%; height: 102px; overflow: hidden; } .lclist .txt span { display: table-cell; vertical-align: middle; font-size: 16px; line-height: 28px; color: rgba(255, 255, 255, 0.7); } .lclist .juhua { width: 35px; height: 35px; margin: 0 auto; background: url('../images/juhua.png') center no-repeat; } .lclist li:hover .num img { -webkit-animation: rotateY360 2s linear 1; animation: rotateY360 2s linear 1; } .lclist li:hover .juhua { -webkit-animation: rotate360 1s linear infinite; animation: rotate360 1s linear infinite; } @media screen and (max-width: 1670px) { .lclist li { width: 14.2%; } } @media screen and (max-width: 1000px) { .lclist { height: auto; } .lclist li { width: 24%; } .lclist li.i1 .sx { height: 165px; } .lclist li.i2 .sx { height: 31px; } .lclist li.i3 .sx { height: 165px; } .lclist li.i4 .sx { height: 31px; } .lclist li.i5 .sx { height: 106px; } .lclist li.i6 .sx { height: 217px; } .lclist li.i7 .sx { height: 142px; } } .guihuaout { padding: 24px 0 26px; } .guihlist { margin: 0 -13px; height: 940px; overflow: hidden; } .guihlist li { float: left; width: 25%; height: 100%; } .guihlist li .lin { padding: 0 13px; height: 100%; } .guihlist li a { display: block; width: 100%; position: relative; height: 100%; overflow: hidden; } .guihlist .bg { width: 100%; height: 100%; overflow: hidden; position: relative; } .guihlist .bg img { position: absolute; left: 50%; top: 0; z-index: 0; width: 460px; height: 100%; margin-left: -230px; } .guihlist li .wrap { background-color: rgba(230, 70, 46, 0); width: 100%; text-align: center; -webkit-transition: .4s; transition: .4s; position: absolute; left: 0; bottom: 0; z-index: 3; } .guihlist li h3 { font-size: 20px; color: #fff; line-height: 40px; font-weight: bold; height: 40px; overflow: hidden; margin-top: -28px; } .guihlist li .txt { font-size: 16px; color: rgba(255, 255, 255, 0.5); line-height: 32px; width: 240px; height: 0; overflow: hidden; margin: 0 auto; } .guihlist li .hx { display: block; margin: 0 auto; width: 66px; height: 0; background-color: #fff; } .guihlist li .fig { display: block; width: 146px; height: 146px; margin: 0 auto; border-radius: 50%; border: 1px solid transparent; line-height: 146px; } .guihlist li .sx1 { width: 1px; height: 0; margin: 0 auto; background-color: rgba(255, 255, 255, 0.2); } .guihlist li .sx2 { width: 1px; height: 26px; margin: 0 auto; background-color: rgba(255, 255, 255, 0.2); } .guihlist li:hover .wrap { background-color: #b01f24; } .guihlist li:hover h3 { margin-top: 30px; } .guihlist li:hover .txt { height: 96px; } .guihlist li:hover .hx { margin-top: 36px; margin-bottom: 37px; height: 3px; } .guihlist li:hover .fig { border-color: #fff; } .guihlist li:hover .sx1 { height: 300px; } .guihlist li:hover .sx2 { height: 250px; } .guihlist h3, .guihlist .txt, .guihlist .hx, .guihlist .fig { -webkit-transition: .4s; transition: .4s; } .guihlist .wrap, .guihlist .sx1, .guihlist .sx2 { -webkit-transition: 1s; transition: 1s; } @media screen and (max-width: 1300px) { .guihlist { margin: 0; } .guihlist li .lin { padding: 0; } } @media screen and (max-width: 1100px) { .guihlist li .txt { width: 220px; font-size: 14px; } } @media screen and (max-width: 1024px) { .guihlist li { width: 50%; height: 50%; } .guihlist .bg img { width: 512px; height: auto; margin-left: -256px; } .guihlist li:hover .sx1 { height: 40px; } .guihlist li:hover .sx2 { height: 40px; } } .gancate { position: relative; padding: 32px 0 30px; background-color: #b01f24; text-align: center; color: #fff; } .gancate .cn { font-size: 24px; line-height: 34px; } .gancate .cn2 { font-size: 36px; line-height: 52px; font-weight: bold; position: relative; z-index: 1; } .gancate:after { content: ''; position: absolute; left: 0; bottom: 14px; z-index: 0; width: 100%; height: 57px; background: url('../images/detail.png') center no-repeat; } @media screen and (max-width: 770px) { .gancate:after { background-size: 100%; } } .gan { padding: 120px 0; background: #ffffff url('../images/ganbg.jpg') bottom no-repeat; } #sw.swiper-container { position: relative; max-width: 1620px; height: 840px; overflow: hidden; margin: 0 auto; } #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; overflow: hidden; width: 500px; height: 100%; } /*#sw .swiper-slide.swiper-slide-prev{ opacity: 1;} #sw .swiper-slide.swiper-slide-next{ opacity: 1;}*/ .sw-next, .sw-prev { position: absolute; bottom: 320px; width: 48px; height: 48px; z-index: 10; cursor: pointer; font-size: 0; border-radius: 50%; } .sw-next { right: 0; background: url('../images/gt-gan.png') center no-repeat; } .sw-prev { left: 0; background: url('../images/lt-gan.png') center no-repeat; } .sw-prev:hover, .sw-next:hover { background-color: #fff; } .swiper-container-3d { -webkit-perspective: 1200px; perspective: 1200px; } .swiper-container-3d .swiper-cube-shadow, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-wrapper { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .slideinner { position: relative; width: 100%; height: 100%; background-color: #fff; display: block; -webkit-transform: scale(0.82); transform: scale(0.82); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-transition: 0.5s; transition: 0.5s; } #sw .swiper-slide.swiper-slide-active .slideinner { -webkit-transform: scale(1); transform: scale(1); } .slideinner:before { content: ''; position: absolute; left: -5px; top: 68px; z-index: 0; width: 10px; height: 0; background-color: #b01f24; -webkit-transition: 0.5s 0.7s; transition: 0.5s 0.7s; } .swiper-slide.swiper-slide-active .slideinner:before { height: 128px; } .fittuwen { width: 100%; height: 100%; overflow: hidden; } .fittuwen .pic { width: 100%; height: 100%; } .fittuwen img { width: 100%; height: 100%; } .fittuwen .ttxt { padding: 64px 34px; position: absolute; left: 0; top: 0; z-index: 2; } .fittuwen .ttxt>h5 { font-size: 30px; color: #fff; line-height: 52px; height: 52px; overflow: hidden; } .fittuwen .ttxt .txt { font-size: 18px; color: rgba(255, 255, 255, 0.7); max-width: 340px; line-height: 32px; margin-top: 18px; } @media screen and (max-width: 750px) { .fittuwen .ttxt>h5 { font-size: 24px; line-height: 34px; height: 34px; } .fittuwen .ttxt .txt { font-size: 22px; line-height: 36px; height: 36px; margin-top: 10px; } } .cate2 { position: relative; } .cate2 .en { font-size: 24px; color: #b01f24; line-height: 24px; font-family: arial; text-transform: uppercase; font-weight: bold; letter-spacing: 2px; } .cate2 .cn { font-size: 18px; color: rgba(255, 255, 255, 0.7); line-height: 26px; margin-top: 10px; } .cate2 .more { position: absolute; right: 44px; top: 30px; z-index: 1; width: 46px; height: 34px; background: url('../images/star.png') center no-repeat; } .cate2 .more:hover { right: 34px; } .rongyu { padding: 78px 0 88px; background-color: #323844; position: relative; } .rongyu:before { content: ''; position: absolute; left: 0; top: 236px; z-index: 0; width: 100%; height: 8px; background-color: #1e222a; } .rongyu:after { content: ''; position: absolute; left: 50%; top: 120px; z-index: 0; width: 50%; height: 1px; background-color: rgba(255, 255, 255, 0.1); padding-left: 380px; margin-left: -380px; } .picScroll-left1 { overflow: hidden; position: relative; padding: 0 0 95px; margin: 148px auto 0; width: 100%; height: 370px; } .picScroll-left1 .bd { margin: 0 auto; height: 100%; overflow: hidden; } .rylist { height: 370px; overflow: hidden; } .rylist li { float: left; width: 300px; } .rylist li .lin { padding: 0 20px; } .rylist li a { display: block; position: relative; } .rylist li .pic { overflow: hidden; width: 100%; height: 370px; background-color: #fff; line-height: 370px; text-align: center; font-size: 0; } .rylist li img { max-width: 98%; max-height: 98%; } .picScroll-left1 a.prev, .picScroll-left1 a.next { position: absolute; width: 40px; height: 40px; z-index: 5; top: 50%; margin-top: -70px; border-radius: 5px; } .picScroll-left1 a.prev { left: 0; background: rgba(0, 0, 0, 0.2) url('../images/jtl-n.png') center no-repeat; } .picScroll-left1 a.next { right: 0; background: rgba(0, 0, 0, 0.2) url('../images/jtr-n.png') center no-repeat; } .picScroll-left1 a.prev:hover, .picScroll-left1 a.next:hover { background-color: rgba(0, 0, 0, 0.5); } .picScroll-left1 .hd { position: absolute; z-index: 5; bottom: 0; left: 0; width: 100%; height: 10px; } .picScroll-left1 .hd ul { width: 100%; height: 10px; overflow: hidden; text-align: center; font-size: 0; } .picScroll-left1 .hd ul li { display: inline-block; width: 8px; height: 8px; cursor: pointer; border-radius: 5px; margin: 0 10px; vertical-align: top; background-color: transparent; border: 1px solid #fff; -webkit-transition: 0.5s; transition: 0.5s; } .picScroll-left1 .hd ul li.on { background-color: #b01f24; border-color: #b01f24; } .xijie { width: 100%; height: 1000px; z-index: 1; position: relative; margin-bottom: 146px; } .xijie .bigpic { width: 100%; height: 100%; text-align: center; background-color: #fff; position: absolute; left: 0; top: 0; z-index: 0; } img#bigpic { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; -webkit-transition: all .3s linear 0.2s; transition: all .3s linear 0.2s; } .xijiebar-out { width: 100%; padding: 16px 0; background-color: rgba(0, 0, 0, 0.5); position: absolute; left: 0; top: 100%; z-index: 2; } .xijiebar-out .cer { height: 114px; } .xijiebar { padding-right: 70px; position: relative; height: 100%; } .xijiebtn { width: 50px; height: 114px; background-color: #b01f24; position: absolute; right: 0; top: 0; z-index: 2; } .xijiebar a { position: absolute; left: 12px; width: 26px; height: 26px; border: 1px solid #fff; border-radius: 50%; } .xijiebar .xijie-prev { top: 16px; background: #b01f24 url('../images/jtl-n.png') center no-repeat; } .xijiebar .xijie-next { bottom: 16px; background: #b01f24 url('../images/jtr-n.png') center no-repeat; } .xijiebar .xijie-prev:hover { background-color: #fff; background-image: url('../images/jtl-nh.png'); } .xijiebar .xijie-next:hover { background-color: #fff; background-image: url('../images/jtr-nh.png'); } .twlist2-out { width: 100%; overflow: hidden; height: 100%; position: relative; } .twlist2 { width: auto; height: 100%; font-size: 0; white-space: nowrap; position: absolute; left: 0; top: 0; z-index: 1; -webkit-transition: 0.4s; transition: 0.4s; } .twlist2 li { display: inline-block; width: 172px; height: 114px; position: relative; line-height: 114px; text-align: center; margin-right: 14px; } .twlist2 li:before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; border: 1px solid transparent; } .twlist2 li img { width: 100%; height: 100%; cursor: pointer; } .twlist2 li:hover:before, .xijie .twlist2 li.on:before { border-color: #b01f24; } .xijie .xjcloses { width: 30px; height: 30px; cursor: pointer; border-radius: 100%; overflow: hidden; position: absolute; top: 50%; right: 100px; z-index: 10; margin-top: -310px; transition: all .6s; -webkit-transition: all .6s; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background: #000000 url('../images/cha.png') center no-repeat; background-size: 50% 50%; } .xijie .xjcloses.active { transform: rotate(135deg); -webkit-transform: rotate(135deg); } .xijie .pull-left { width: 400px; height: 600px; background: rgba(0, 0, 0, 0.45); position: absolute; z-index: 5; right: 110px; top: 50%; margin-top: -300px; -webkit-transition: all .6s; transition: all .6s; } .xijie .pull-left .box_info { padding: 0 25px; color: #fff; } .xijie .pull-left .box1 { font-size: 30px; margin-bottom: 30px; position: relative; display: table; width: 100%; height: 180px; } .xijie .pull-left .box1 span { display: table-cell; vertical-align: middle; } .xijie .pull-left .box1::after { content: ''; width: 20px; height: 1px; background: #fff; position: absolute; left: 0; bottom: 0; } .xijie .pull-left .box2 { margin-top: 20px; line-height: 24px; max-height: 360px; overflow: auto; } .xijie .pull-left.active { display: none; } .xijiebar-out.active { display: none; } .xijie.active { margin-bottom: 0; } @media screen and (max-width: 1280px) { .xijie .xjcloses { margin-right: auto; right: 40px; } .xijie .pull-left { margin-right: auto; right: 50px; } } @media screen and (max-width: 960px) { .xijie { height: 500px; } .xijie .pull-left { width: 90%; background: rgba(0, 0, 0, 0.4); right: 5%; height: 300px; margin-top: -120px; } .xijie .xjcloses { margin-top: -130px; } .xijie .pull-left .box1 { font-size: 26px; height: 90px; margin-bottom: 20px; } .xijie .pull-left .box2 { max-height: 168px; } /*.xijie .pull-left{ display: none;} .xijie .xjcloses{ display: none;}*/ /*.xijie .bigpic{ overflow-x: auto;} img#bigpic{ width: auto; height: 100%; object-fit: initial;}*/ } .protwo { width: 100%; background-color: #fff; padding: 112px 0; } h2.protitle { background: #ffffff url('../images/quan.png') right 0 no-repeat; font-size: 24px; color: #222; line-height: 40px; padding-right: 30px; } .procon { overflow: hidden; margin-top: 36px; width: 100%; position: relative; font-size: 16px; color: #666; line-height: 30px; } .procon:before { content: ''; position: absolute; left: 35%; top: 9px; z-index: 0; width: 1px; bottom: 9px; background-color: #ccc; } .probasic { float: left; width: 35%; } .prointro { float: right; width: 55%; } .casetwo { width: 100%; background-color: #fff; padding: 120px 0; } .casecon { overflow: hidden; width: 100%; position: relative; } .caseleft { float: left; width: 35%; } .caseright { float: right; width: 57%; } .caseleftwrap { padding: 0 35px; position: relative; } .caseleftwrap:before { content: ''; position: absolute; left: 0; top: 0; z-index: 0; width: 6px; height: 100%; background-color: #b01f24; } h2.casetitle { font-size: 24px; color: #222; line-height: 40px; margin-bottom: 28px; } .casebasic { border-right: 1px solid #ccc; font-size: 16px; color: #666; line-height: 32px; } .casebasic label { display: inline-block; color: #222; min-width: 70px; } .caseright .fig { margin-bottom: 8px; padding: 8px 0; } .casetxt { background-color: #f6f6f6; padding: 20px 25px; } .caseintro { overflow: auto; font-size: 16px; line-height: 30px; color: #666; min-height: 150px; } .dinzhiout { padding: 80px 0; text-align: center; background-color: #323844; position: relative; } .dinzhi { display: inline-block; height: 40px; font-size: 24px; color: #fff; line-height: 40px; padding-left: 38px; background: url('../images/dinzhi.png') 0 no-repeat; letter-spacing: 5px; position: relative; z-index: 2; } .dzbg { position: absolute; left: 0; top: 0; z-index: 0; width: 100%; height: 100%; opacity: 0; background: url('../images/dinzhibg.jpg') center no-repeat; -webkit-transition: 0.6s; transition: 0.6s; } .dinzhiout:hover .dzbg { opacity: 0.3; } .shanghua { padding: 100px 0 104px; background: #ffffff url('../images/shanghua.jpg') center no-repeat; } .shanghua .cn { font-size: 30px; color: #222; line-height: 50px; letter-spacing: 6px; text-align: center; } .shanghua .cn2 { font-size: 18px; color: #666; line-height: 24px; letter-spacing: 3px; text-align: center; text-transform: uppercase; font-family: 'helvetica'; word-break: normal; } .shanghua2 { padding: 38px 0 34px; text-align: center; } .shanghua2 .cn { font-size: 36px; color: #f2171a; line-height: 52px; font-family: 'Source Han Serif CN'; font-weight: bold; } .shanghua2 .en { font-size: 24px; color: rgba(230, 70, 46, 0.5); line-height: 30px; text-transform: uppercase; word-break: normal; } @media screen and (max-width: 1280px) { .caseleft { width: 45%; } .caseright { width: 50%; } .probasic { width: 45%; } .procon:before { left: 45%; } .prointro { width: 50%; } } @media screen and (max-width: 1024px) { .caseleft { width: 50%; } .caseleftwrap { padding: 0 20px; } .casebasic { padding-right: 5px; } .caseintro { height: auto; } .probasic { width: 48%; } .procon:before { display: none; } .shanghua .cn { letter-spacing: 0; } .shanghua .cn2 { letter-spacing: 0; } } @media screen and (max-width: 750px) { .casetwo { padding: 60px 0; } .caseleftwrap { padding-left: 35px; padding-right: 0; } .caseleft { float: none; width: 100%; } .caseright { float: none; width: 100%; margin-top: 40px; } .protwo { padding: 60px 0; } .probasic { float: none; width: 100%; } .prointro { float: none; width: 100%; margin-top: 40px; } } .editcon { padding: 40px 3%; font-size: 16px; line-height: 2em; color: #666; text-align: justify; margin-top: 50px; border: 1px solid #ddd; } .editcon img { max-width: 100%; } .editcon .pic { padding: 15px 0; text-align: center; } @media screen and (max-width: 750px) { .editcon { border: 0 none; padding: 0; } } .casetui { padding: 262px 0 222px; position: relative; background: #323844 url('../images/casetuibg.jpg') bottom no-repeat; } .casetui:before { content: ''; position: absolute; right: 0; top: 64px; z-index: 0; width: 1060px; height: 119px; background: url('../images/recom.png') 0 center no-repeat; max-width: 100%; background-size: 100%; } .biaoqian { background-color: #b01f24; padding: 22px 12px; position: absolute; left: 100px; top: 0; z-index: 1; } .biaoqian span { display: block; border: 1px solid #fff; width: 30px; padding: 14px 23px; font-size: 30px; color: #fff; line-height: 34px; text-align: center; font-family: 'Source Han Serif CN'; } .biaoqian i { position: absolute; left: 50%; bottom: 18px; z-index: 0; width: 8px; height: 8px; background-color: #fff; margin-left: -4px; -webkit-animation: rotateX360 2s linear infinite; animation: rotateX360 2s linear infinite; } .casetuih { text-align: center; margin-bottom: 50px; } .picScroll-left2 { overflow: hidden; position: relative; padding: 0 0 60px; margin: 0 auto; width: 100%; height: 306px; } .picScroll-left2 .bd { margin: 0 auto; height: 100%; overflow: hidden; } .cstlist { height: 306px; overflow: hidden; } .cstlist li { float: left; width: 470px; } .cstlist li .lin { padding: 0 15px; } .cstlist li a { display: block; position: relative; } .cstlist li .pic { overflow: hidden; width: 100%; height: 306px; background-color: #000; line-height: 306px; text-align: center; font-size: 0; } .cstlist li img { width: 100%; height: 100%; } .cstlist li .cov { position: absolute; left: 9px; right: 9px; top: 9px; bottom: 9px; z-index: 2; opacity: 0; border: 1px solid #fff; -webkit-transition: 0.6s; transition: 0.6s; } .cstlist li h3 { font-size: 20px; color: #fff; line-height: 44px; text-align: center; width: 100%; margin-bottom: 0; padding: 0 15px; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: 0.6s; transition: 0.6s; height: 44px; overflow: hidden; position: absolute; left: 0; bottom: 10px; z-index: 4; } .cstlist li:hover .cov { opacity: 1; } .cstlist li:hover h3 { bottom: 50%; margin-bottom: -22px; } .picScroll-left2 a.prev, .picScroll-left2 a.next { position: absolute; width: 40px; height: 80px; z-index: 5; top: 50%; margin-top: -40px; border-radius: 20px; } .picScroll-left2 a.prev { left: 0; background: rgba(0, 0, 0, 0.2) url('../images/lt1.png') center no-repeat; } .picScroll-left2 a.next { right: 0; background: rgba(0, 0, 0, 0.2) url('../images/gt1.png') center no-repeat; } .picScroll-left2 a.prev:hover, .picScroll-left2 a.next:hover { background-color: rgba(0, 0, 0, 0.5); } .picScroll-left2 .hd { position: absolute; z-index: 5; bottom: 0; left: 0; width: 100%; height: 6px; } .picScroll-left2 .hd ul { width: 100%; height: 6px; overflow: hidden; text-align: center; font-size: 0; } .picScroll-left2 .hd ul li { display: inline-block; width: 6px; height: 6px; cursor: pointer; border-radius: 3px; margin: 0 10px; vertical-align: top; background-color: #fff; -webkit-transition: 0.5s; transition: 0.5s; } .picScroll-left2 .hd ul li.on { background-color: #b01f24; width: 24px; } @media screen and (max-width: 1200px) { .biaoqian { left: 60px; } } @media screen and (max-width: 750px) { .biaoqian { left: 30px; } } .prosec { width: 100%; height: 1000px; position: relative; overflow: hidden; } .prosec .probigbg { position: absolute; left: 0; top: 0; z-index: 0; width: 100%; height: 100%; background: url('../images/it1.jpg') center no-repeat; background-size: cover; -webkit-transition: all .5s ease 0.2s; transition: all .5s ease 0.2s; } #prolistwrap { width: 1440px; max-width: 100%; height: 100%; overflow: hidden; border-left: 1px solid rgba(255, 255, 255, 0.6); position: relative; z-index: 2; border-right: 1px solid rgba(255, 255, 255, 0.6); margin: 0 auto; } #prolistwrap .tempWrap { height: 100%; } .prolist { position: relative; width: 100%; height: 100%; overflow: hidden; } .prolist ul { float: left; width: 33.33%; height: 100%; } .prolist li { width: 100%; height: 50%; } .prolist li a { display: block; width: 100%; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.6); position: relative; background-color: rgba(0, 0, 0, 0.2); } .prolist li .wz { padding: 24px 34px 26px; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; position: absolute; left: 0; bottom: 0; z-index: 3; } .prolist li .pic { width: 100%; height: 240px; overflow: hidden; margin-bottom: 20px; } .prolist li .pic img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .prolist li h3 { font-size: 24px; color: #fff; line-height: 40px; height: 40px; padding-right: 40px; overflow: hidden; } .prolist li .hx { display: block; margin: 16px 0 20px; width: 100%; height: 1px; background-color: #fff; position: relative; } .prolist li .txt { font-size: 16px; color: rgba(255, 255, 255, 0.7); line-height: 28px; max-height: 112px; overflow: hidden; } .prolist li .txt p { display: inline-block; margin-right: 20px; } .prolist li:hover a { background-color: rgba(230, 70, 46, 0.8); } .prolist li:hover h3 { background: url('../images/jtr-cs.png') right no-repeat; } .prosec a.proprev, .prosec a.pronext { position: absolute; width: 200px; height: 80px; z-index: 5; bottom: 84px; right: 0; background-color: transparent; background-repeat: no-repeat; background-position: 120px center; background-image: url('../images/jtr-ll.png'); font-size: 24px; color: #fff; line-height: 80px; text-indent: 52px; } .prosec a.proprev { margin-bottom: 82px; } .prosec a.proprev:hover, .prosec a.pronext:hover { background-color: #b01f24; } #prolistwrap a.prev, #prolistwrap a.next { position: absolute; width: 100px; height: 40px; z-index: 5; bottom: 84px; right: 0; background-color: transparent; text-align: center; font-size: 24px; color: #fff; line-height: 40px; visibility: hidden; } #prolistwrap a.prev { margin-bottom: 82px; } #prolistwrap a.prev:hover, #prolistwrap a.next:hover { background-color: #b01f24; } @media screen and (max-width: 1500px) { #prolistwrap { width: 1000px; } .prolist ul { width: 50%; } .prosec a.proprev, .prosec a.pronext { bottom: 45%; width: 120px; background-image: none; background-color: rgba(0, 0, 0, 0.2); text-indent: 0; text-align: center; } .prosec a.proprev { margin-bottom: 0; } .prosec a.proprev { right: auto; left: 0; } } @media screen and (max-width: 1024px) { #prolistwrap { border-left: 0 none; border-right: 0 none; } .prolist li:hover a { background-color: rgba(230, 70, 46, 0.5); } } @media screen and (max-width: 800px) { #prolistwrap { width: 500px; } .prolist ul { width: 100%; } } @media screen and (max-width: 540px) { .prolist li:hover a { background-color: rgba(0, 0, 0, 0); } } /*shouye*/ .shopout { width: 100%; height: 138px; background-color: #323844; } .shoplist { width: 100%; height: 100%; overflow: hidden; } .shoplist li { float: left; width: 33.3%; height: 100%; background-color: #323844; -webkit-transition: 0.3s; transition: 0.3s; } .shoplist li:hover { background-color: #262c37; } .shoplist li a { display: block; text-align: center; font-size: 18px; color: #fff; line-height: 138px; height: 138px; } .shoplist li span { display: inline-block; padding-left: 70px; } .shoplist li span.sp1 { background: url('../images/shop1.png') left no-repeat; } .shoplist li span.sp2 { background: url('../images/shop2.png') left no-repeat; } .shoplist li span.sp3 { background: url('../images/shop3.png') left no-repeat; } @media screen and (max-width: 750px) { .shoplist li span { padding-left: 0; padding-top: 80px; background-position: center 20px !important; line-height: 40px; } } .flc { padding: 86px 0 100px; background: #ffffff url('../images/flcbg.jpg') center no-repeat; background-size: cover; } .fcate1 { position: relative; } .fcate1 .en { font-size: 24px; color: #b01f24; line-height: 24px; font-family: arial; text-transform: uppercase; font-weight: bold; letter-spacing: 2px; } .fcate1 .cn { font-size: 18px; color: rgba(51, 51, 51, 0.7); line-height: 26px; margin-top: 10px; } .fcate1 p { font-size: 16px; color: #333; line-height: 30px; margin-top: 20px; } .flclist { padding-top: 56px; margin: 0 -6px; text-align: center; font-size: 0; } .flclist li { float: left; width: 20%; margin-bottom: 24px; } .flclist li .lin { padding: 0 6px; } .flclist li a { display: block; border: 1px solid #b01f24; border-radius: 10px; text-align: center; padding: 21px 0; } .flclist .wrap { display: inline-block; height: 46px; overflow: hidden; padding-left: 50px; position: relative; } .flclist .pic { width: 50px; height: 100%; font-size: 0; line-height: 46px; position: absolute; left: 0; top: 0; z-index: 0; text-align: left; } .flclist img { max-width: 100%; max-height: 100%; } .flclist .pic.p1 { opacity: 1; } .flclist .pic.p2 { opacity: 0; } .flclist .wz { text-align: left; } .flclist .cn { font-size: 18px; line-height: 24px; color: #b01f24; height: 24px; font-weight: bold; overflow: hidden; } .flclist .txt { font-size: 16px; color: #b01f24; line-height: 22px; height: 22px; overflow: hidden; } .flclist a, .flclist .cn, .flclist .txt, .flclist .pic { -webkit-transition: .6s; transition: .6s; } .flclist li:hover a { background-color: #b01f24; } .flclist li:hover .cn { color: #fff; } .flclist li:hover .txt { color: #fff; } .flclist li:hover .pic.p1 { opacity: 0; } .flclist li:hover .pic.p2 { opacity: 1; } @media screen and (max-width: 1260px) { .flclist { margin: 0 -10px; } .flclist li .lin { padding: 0 10px; } .flclist li { width: 33.33%; } } @media screen and (max-width: 840px) { .flclist li { width: 50%; } } @media screen and (max-width: 560px) { .flc { padding: 80px 0 60px; } .flclist { margin: 0; } .flclist li .lin { padding: 0; } .flclist li { width: 100%; } } .fshu { width: 100%; height: auto; position: relative; overflow: hidden; } .fshu .bigbg { position: absolute; left: 0; top: 0; z-index: 0; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; -webkit-transition: all .5s ease 0.2s; transition: all .5s ease 0.2s; } #fshuwrap { width: 100%; height: 100%; overflow: hidden; position: sticky; margin-bottom: 30px; margin-top: 300px; z-index: 2; } .fshulist { width: 100%; max-width: 1600px; margin: auto; height: auto; white-space: nowrap; display: flex; flex-wrap: wrap; justify-content: space-between; } .fshulist li { display: inline-block; width: 22%; height: max-content; margin-bottom: 40px; border: 1px solid #E7E7E7; background: #fff; transition: all 0.7s ease-in-out; } .fshulist li .picture { position: relative; width: 100%; padding-bottom: 100%; text-align: center; font-size: 0; overflow: hidden; cursor: pointer; } .fshulist li.p_Product:hover .p_articles { background: #b01f24; color: #fff; } .fshulist li .picture a.p_linkB { width: inherit; height: inherit; display: block; position: static; } .fshulist li .picture a.p_linkB .e_image { width: 100%; height: 100%; } .fshulist li .picture a.p_linkB .e_image img { width: 100% !important; height: auto !important; left: 50% !important; top: 50% !important; -webkit-transform: translate(-50%, -50%) !important; -ms-transform: translate(-50%, -50%) !important; transform: translate(-50%, -50%) !important; position: absolute !important; } .fshulist li .p_articles { height: 100px; width: auto; padding: 0; border-width: 1px; border-style: none; border-color: rgba(228, 228, 228, 0); background-color: #fff; overflow: hidden; transition: all 0.7s ease-in-out; display: flex; align-items: center; justify-content: center; } .fshulist li .lin { padding: 0; height: 100%; } .fshulist li a { display: block; width: 100%; position: relative; height: 100%; overflow: hidden; } .fshulist li .wrap { padding: 180px 0 184px; width: 100%; text-align: center; position: absolute; left: 0; top: 50%; margin-top: -230px; z-index: 3; background: url('../images/zuan5.png') center no-repeat; background-size: 100% 100%; } .fshulist li .cn { font-size: 24px; color: #fff; line-height: 36px; height: 36px; overflow: hidden; } .fshulist li .en { font-size: 14px; color: #fff; line-height: 22px; height: 22px; overflow: hidden; font-family: 'helvetica'; text-transform: uppercase; } .fshulist li .hx { display: block; margin: 38px auto 40px; width: 56px; height: 2px; background-color: #fff; } .fshulist li label { display: block; width: 40px; height: 40px; border: 1px solid #fff; margin: 0 auto; background: url('../images/jia-fshu.png') center no-repeat; border-radius: 50%; -webkit-transition: 0.4s; transition: 0.4s; } .fshulist li:hover label { border-color: #222; background-color: #222; -webkit-animation: rotate360 2s; animation: rotate360 2s; } .fshutitle2 { width: 578px; height: 260px; background-color: #b01f24; position: absolute; left: 0; top: 0; z-index: 5; } .fcate6 { position: relative; padding-top: 60px; padding-right: 60px; text-align: right; } .fcate6 a { display: block; } .fcate6 .en { font-size: 29px; color: #fff; line-height: 50px; opacity: 0.3; text-transform: uppercase; font-family: 'Helvetica'; } .fcate6 .cn { font-size: 0; } .fcate6 .cn img { max-width: 100%; } .fcate6 .fig { float: right; width: 27px; height: 26px; margin-top: 16px; -webkit-transition: 0.6s; transition: 0.6s; background: url('../images/jtd-fab.png') 0 center no-repeat; } .fcate6:hover .fig { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } @media screen and (max-width: 1440px) { .fshutitle2 { height: 200px; } #fshuwrap { margin-top: 240px; } .fcate6 .fig { display: none; } } @media screen and (max-width: 1024px) { .fshutitle2 { width: 460px; height: 160px; } .fcate6 { padding-top: 30px; padding-right: 30px; } } @media screen and (max-width: 960px) { #fshuwrap { /* display: none; */ height: auto; position: static; margin: 0; } .fshulist li { width: 48%; margin-bottom: 20px; height: auto; } .fshulist li .hx { margin: 20px auto; } .fshulist li .wrap { padding: 12% 0; margin-top: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-size: 80% 100%; } } .fiform { padding: 108px 0 124px; background: #f6f6f6 url('../images/fiformbg.jpg') center bottom no-repeat; } .fiform .title { height: 38px; font-size: 0; line-height: 38px; text-align: center; overflow: hidden; } .fiform .title i { display: inline-block; vertical-align: top; width: 110px; height: 100%; background: url('../images/line1.png') center no-repeat; } .fiform .title span { display: inline-block; vertical-align: top; height: 100%; margin: 0 22px; font-size: 18px; color: #666; } .fiform .title span em { font-weight: normal; color: #b01f24; } .fiform .title2 { height: 56px; font-size: 36px; color: #b01f24; line-height: 56px; text-align: center; font-family: 'Source Han Serif CN'; overflow: hidden; margin-bottom: 10px; } .liuyan3 { margin: 55px auto 0; max-width: 1418px; color: #555; font-size: 0; } .liuyan3 .hang { float: left; width: 33.33%; height: 50px; line-height: 50px; margin-bottom: 30px; } .liuyan3 p { height: 100%; margin: 0 9px; } .liuyan3 input[type=text] { width: 100%; height: 50px; border: 0 none; background-color: #fff; line-height: 50px; text-indent: 24px; font-size: 18px; outline: 1px solid #fff; -webkit-transition: 0.3s; transition: 0.3s; } .liuyan3 input[type=text]:focus { outline: 1px solid #b01f24; } .liuyan3 i.v { display: inline-block; width: 100%; height: 100%; vertical-align: top; } .liuyan3 .btnarea { float: left; width: 100%; height: 50px; line-height: 50px; margin-top: 10px; text-align: center; } .liuyan3 .btnarea input { width: 290px; height: 50px; font-size: 18px; color: #fff; line-height: 50px; } .liuyan3 .btnarea input:hover { opacity: 0.8; } .liuyan3 input.tj { background-color: #b01f24; } @media screen and (max-width: 1300px) { .fiform { padding: 108px 20px 124px; } .liuyan3 .hang { width: 50%; } } @media screen and (max-width: 750px) { .fiform { padding: 70px 20px 70px; } .fiform .title2 { font-size: 30px; } .fiform .title i { display: none; } .fiform .title span { margin: 0 auto; } .liuyan3 .btnarea { float: none; } .liuyan3 .hang { float: none; width: 100%; margin-bottom: 20px; } } .fpplist { padding-top: 40px; max-width: 1418px; margin: 0 auto; text-align: center; font-size: 0; } .fpplist li { float: left; width: 33.33%; } .fpplist li .lin { padding: 0 9px; } .fpplist li a { display: block; position: relative; background-color: #b01f24; } .fpplist .num { position: absolute; right: 0; bottom: 0; z-index: 1; width: 54px; height: 42px; text-align: center; line-height: 42px; background-color: rgba(255, 255, 255, 0.2); } .fpplist .wrap { display: inline-block; height: 100%; padding-left: 66px; position: relative; /* width: 100%; */ } .fpplist .pic { width: 40px; height: 100%; font-size: 0; line-height: 90px; position: absolute; left: 0; top: 0; z-index: 0; text-align: left; } .fpplist img { max-width: 100%; max-height: 100%; } .fpplist .cn { font-size: 24px; line-height: 90px; color: #fff; text-align: left; height: 100%; overflow: hidden; } @media screen and (max-width: 1024px) { .fpplist li { width: 50%; margin-bottom: 20px; } .fpplist li:last-child { width: 100%; margin-bottom: 0; } } @media screen and (max-width: 750px) { .fpplist li { width: 100%; } } .fcate2 { position: relative; } .fcate2 .en { font-size: 24px; color: #b01f24; line-height: 24px; font-family: arial; text-transform: uppercase; font-weight: bold; letter-spacing: 2px; } .fcate2 .cn { font-size: 18px; color: rgba(255, 255, 255, 0.7); line-height: 26px; margin-top: 10px; } .fcate2 .more { position: absolute; right: 0; top: 30px; z-index: 1; width: 26px; height: 26px; background: url('../images/jtr-fn.png') center no-repeat; } .fcate2 .more:hover { right: 10px; } .fnews { padding: 74px 0 86px; background: url('../images/fnewsbg.jpg') top no-repeat; background-size: cover; position: relative; } .fnews:before { content: ''; position: absolute; left: 0; top: 250px; z-index: 0; width: 100%; height: 8px; background-color: #323844; } .fnewslist { max-width: 1418px; overflow: hidden; margin: 0 auto; padding: 188px 20px 1px; text-align: center; font-size: 0; } .fnewslist li { float: left; width: 33.333%; margin-bottom: 30px; } .fnewslist li .inner { padding: 0 10px; text-align: left; } .hot { position: relative; } .hot .pic { width: 100%; height: 0; padding-bottom: 57%; overflow: hidden; position: relative; } .hot .pic img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; } .hot h3 { font-size: 18px; color: #fff; line-height: 30px; height: 30px; overflow: hidden; } .hot .txt { font-size: 16px; color: rgba(255, 255, 255, 0.3); line-height: 24px; overflow: hidden; height: 48px; margin-top: 22px; } .hot .date { font-size: 14px; color: rgba(255, 255, 255, 0.3); line-height: 22px; height: 22px; font-family: 'helvetica'; margin-bottom: 22px; } .hot label.more { display: block; font-size: 14px; color: #fff; line-height: 32px; height: 32px; position: relative; margin-top: 10px; text-transform: uppercase; padding-left: 0; } .hot label.more:before { content: ''; position: absolute; left: 0; top: 15px; z-index: 1; width: 0; height: 1px; background-color: #fff; } .fnewslist li:hover label.more { padding-left: 118px; } .fnewslist li:hover label.more:before { width: 100px; } .fnewslist label.more, .fnewslist label.more:before { -webkit-transition: 0.8s; transition: 0.8s; } @media screen and (max-width: 1080px) { .fnewslist li { width: 50%; } } @media screen and (max-width: 750px) { .fnewslist li { width: 100%; } } .fyishu { width: 100%; height: 900px; overflow: hidden; position: relative; } .fyishupic { float: right; width: 59%; height: 100%; position: relative; background: url('../images/fyishu.jpg') center no-repeat; -webkit-transition: 0.6s; transition: 0.6s; } .fyishupic img { position: absolute; left: 22%; top: 18.5%; z-index: 1; max-width: 100%; max-height: 100%; } .fyishupic:hover { -webkit-transform: scale(1.02); transform: scale(1.02); } .fyishuleft { float: left; width: 41%; height: 100%; position: relative; z-index: 2; background: #323844 url('../images/fyishubg1.jpg') center no-repeat; } .fyishulist { width: 100%; padding: 75px 0; } .fyishulist li { width: 100%; height: 125px; background-color: transparent; } .fyishulist li .lin { padding-left: 32.4%; height: 100%; } .fyishulist .wrapper { height: 76px; padding: 25px 0 24px 102px; position: relative; } .fyishulist .pic { width: 74px; height: 74px; border-radius: 50%; font-size: 0; line-height: 74px; position: absolute; left: 0; top: 25px; z-index: 1; text-align: center; border: 1px solid #fff; } .fyishulist img { max-width: 100%; max-height: 100%; } .fyishulist .wz { padding-top: 15px; } .fyishulist .cn { font-size: 18px; color: #fff; line-height: 28px; height: 28px; font-weight: bold; overflow: hidden; } .fyishulist .en { font-size: 12px; color: #fff; line-height: 18px; opacity: 0.5; text-transform: uppercase; overflow: hidden; } .fyishulist .txt { height: 125px; display: table; width: 100%; overflow: hidden; opacity: 0; position: absolute; left: -10%; top: 0; z-index: 5; } .fyishulist .txt span { display: table-cell; vertical-align: middle; font-size: 16px; color: rgba(255, 255, 255, 0.6); line-height: 30px; } .fyishulist li, .fyishulist .txt, .fyishulist .wz, .fyishulist .pic { -webkit-transition: .6s; transition: .6s; } .fyishulist li:hover { background-color: #b01f24; padding-right: 15px; } .fyishulist li:hover .txt { opacity: 1; left: 0; } .fyishulist li:hover .wz, .fyishulist li:hover .pic { opacity: 0; } @media screen and (max-width: 1640px) { .fyishulist li .lin { padding-left: 4%; } } @media screen and (max-width: 1350px) { .fyishuleft { width: 50%; } .fyishupic { width: 50%; } } @media screen and (max-width: 1130px) { .fyishulist li .lin { padding-left: 20%; } } @media screen and (max-width: 960px) { .fyishupic { float: none; position: absolute; right: 0; top: 0; z-index: 0; } .fyishupic img { left: auto; right: 20%; } .fyishuleft { float: none; width: 480px; max-width: 100%; } .fyishulist li .lin { padding-left: 12%; } } @media screen and (max-width: 960px) { .fyishu { width: auto; padding-right: 0; background: #323844; height: auto; } .fyishulist { margin: 0; padding: 0; } .fyishuleft { width: 100%; background: none; position: static; } .fyishupic { width: 100%; position: static; float: none; padding-bottom: 80%; height: auto; display: none; } .fyishupic img { width: 100%; position: static; display: none; } } @media screen and (max-width: 540px) { .fyishulist li .lin { padding-left: 30px; } } .fcate3 { text-align: left; } .fcate3 .en { font-size: 42px; color: #b01f24; line-height: 1.5; font-family: helvetica; text-transform: uppercase; white-space: nowrap; } .fcate3 .cn { font-size: 24px; color: #b01f24; line-height: 26px; margin-top: 8px; } .fabout { padding: 120px 0 124px; width: 100%; overflow: hidden; position: relative; background: url('../images/fabbg.jpg') center no-repeat; z-index: 0; background-size: cover; } .fab1 { overflow: hidden; position: relative; z-index: 1; } .fab1:after { content: ''; position: absolute; left: 340px; bottom: 16px; z-index: 0; right: 0; height: 1px; background-color: rgba(255, 255, 255, 0.1); } .fab1l { float: left; width: 40.85%; } .fab1r { float: right; width: 42.85%; position: relative; } .fab1r .pic { position: relative; margin-top: 98px; } .fab1r .pic img { width: 100%; position: relative; z-index: 2; -webkit-transition: 0.5s; transition: 0.5s; } .fab1r .pic img:hover { -webkit-transform: scale(1.02); transform: scale(1.02); } .fab1l h3 { font-size: 30px; color: #fff; line-height: 50px; font-weight: bold; margin-top: 45px; } .fab1con { font-size: 16px; color: rgba(255, 255, 255, 0.78); line-height: 32px; margin-top: 26px; } .fab1con-2 { font-size: 14px; color: rgba(255, 255, 255, 0.6); line-height: 24px; margin-top: 20px; word-break: normal; text-align: justify; } .fab1con img, .fab1con-2 img { display: none; } .fabtxt { display: block; height: 32px; line-height: 32px; overflow: hidden; margin-top: 64px; } .fabtxt span { float: left; font-size: 20px; color: #fff; line-height: 32px; } .fabtxt a.fabmore { float: right; font-size: 16px; color: #fff; text-transform: uppercase; } .fabtxt a.fabmore i { color: #b01f24; font-style: normal; } @media screen and (max-width: 1200px) { .fab1l { width: 55%; } } @media screen and (max-width: 1023px) { .fabout { padding: 80px 0; } .fcate3 .en { font-size: 30px; } .fab1 { overflow: visible; } .fab1l { float: none; width: 100%; margin: 0 auto; max-width: 720px; margin-top: 40px; } .fab1r { float: none; width: 100%; margin: 0 auto; max-width: 520px; } .fab1r .pic { margin: 0 auto; } } @media screen and (max-width: 750px) { .fab1con { margin-top: 30px; } } .fabout1 { width: 100%; height: 240px; position: relative; background: #ffffff url('../images/fabbg2.jpg') center no-repeat; } .fcate4 { position: relative; padding-top: 47px; padding-bottom: 13px; } .fcate4:after { content: ''; position: absolute; left: 0; bottom: 0; z-index: 0; width: 90px; height: 1px; background-color: #666; } .fcate4 .en { font-size: 40px; color: #b01f24; line-height: 45px; font-family: helvetica; text-transform: uppercase; opacity: 0.1; } .fcate4 .cn { font-size: 16px; color: #666; line-height: 28px; font-family: 'Source Han Serif CN'; } .fcate4 .fig { position: absolute; left: 0; bottom: 41px; z-index: 3; width: 212px; } .fab2 { width: 614px; height: 352px; background-color: #b01f24; position: absolute; right: 0; top: 0; z-index: 5; } .fcate5 { position: relative; padding-top: 84px; padding-left: 30px; } .fcate5 a { display: block; } .fcate5 .en { font-size: 24px; color: #fff; line-height: 24px; font-family: arial; text-transform: uppercase; font-weight: bold; } .fcate5 .cn { font-size: 18px; color: rgba(255, 255, 255, 0.7); line-height: 26px; height: 26px; margin-top: 10px; } .fcate5 .fig { width: 27px; height: 26px; margin-top: 72px; -webkit-transition: 0.6s; transition: 0.6s; background: url('../images/jtd-fab.png') 0 center no-repeat; } .fcate5:hover .fig { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } @media screen and (max-width: 1580px) { .fab2 { width: 33%; } } @media screen and (max-width: 750px) { .fab2 { width: 230px; height: auto; } .fcate5 { padding: 30px 20px; } .fcate5 .fig { display: none; } } @media screen and (max-width: 640px) { .fabout1 { height: auto; padding-bottom: 20px; } .fab2 { position: static; width: 100%; margin-top: 30px; text-align: center; } } .pro-pn { overflow: hidden; text-align: center; position: relative; background-color: #f5f5f5; height: 40px; line-height: 40px; margin-top: 50px; padding: 10px 20px; } .pro-pn a { width: 38%; height: 100%; font-size: 16px; color: #666; position: relative; z-index: 1; overflow: hidden; } a.pro-prev { float: left; text-align: left; padding-left: 20px; background: url('../images/jtl-n2.png') left no-repeat; } a.pro-prev:hover { background-image: url('../images/jtl-nh.png'); } a.pro-next { float: right; text-align: right; padding-right: 20px; background: url('../images/jtr-n2.png') right no-repeat; } a.pro-next:hover { background-image: url('../images/jtr-nh.png'); } a.pro-ret { display: inline-block; vertical-align: top; width: 130px; background-color: #b01f24; border-radius: 20px; color: #fff; } a.pro-ret span { display: inline-block; padding-left: 34px; height: 100%; background: url('../images/ret.png') left center no-repeat; } a.pro-prev:hover, a.pro-next:hover { color: #b01f24; text-decoration: underline; } a.pro-ret:hover { -webkit-box-shadow: 0 0 10px 0 rgba(230, 70, 46, 0.7); box-shadow: 0 0 10px 0 rgba(230, 70, 46, 0.7); } @media screen and (max-width: 960px) { a.pro-prev, a.pro-next { width: 25%; } a.pro-prev span, a.pro-next span { display: none; } } /**/ @media screen and (max-width: 960px) { .head_menu ul { background: rgba(36, 43, 58, 0.9); padding-top: 120px; } .head_menu ul li { width: 100%; float: none; height: calc(100% / 7); border-top: rgba(255, 255, 255, 0.2) solid 1px; } .head_menu ul li .box2 { display: none; } .head_menu ul li:before, .head_menu ul li:after { display: none; } .logo img { max-width: 100%; } .flexslider .slides li .wrap .video1 video { object-fit: cover; } .btt1, .btt2, .btt3 { text-align: center; width: 80%; left: 0%; right: 0%; transform: none; margin: auto; } .btt1 img, .btt2 img, .btt3 img { transform: none; } .fshutitle2 { width: 100%; height: auto; position: static; background: var(--main-color); } .fcate6 .cn img { max-width: 65%; } .fcate6 .en { font-size: 16px; } .fcate4 .fig { position: static; width: auto; max-width: 60%; margin: 20px 0; } .fcate4 .fig img { width: 100%; } .fcate4 .en { font-size: 30px; line-height: 1; } .fcate5 { padding: 20px 10px; } .fcate6 { padding: 20px; background: var(--main-color); } .fshulist li .p_articles { height: auto; opacity: 1; color: #333; /* font-size: 20px; */ line-height: 1; display: block; position: relative; /* background: none; */ text-align: center; padding: 15px; margin: 0; } .fshulist li .p_articles h3 { color: #333; font-size: 16px; line-height: 1; } .fyishulist .txt { width: 100%; position: static; opacity: 1; } .fyishulist .wrapper { width: 100%; height: auto; padding: 10px 0 10px 102px; } .fyishulist li { width: 100%; height: auto; border-bottom: rgba(255, 255, 255, 0.2) solid 1px; } .fpplist .cn{ font-size:16px; line-height:50px; } .fpplist .pic{ line-height:50px; width:20px; left: 20px; } .fpplist .wrap{ width:100%; padding-left:50px; } .liuyan3{ margin-top:20px; } }