@charset "utf-8"; /* CSS Document */ @font-face{ src:url(../fonts/SourceHanSansCN-Regular.otf); font-family:"mytitle2"; } @font-face { font-family: 'iconfont'; src:url(../icons/iconfont.eot); src: url(../icons/iconfont.eot?#iefix) format('embedded-opentype'), url(../icons/iconfont.woff) format('woff'), url(../icons/iconfont.ttf) format('truetype'), url(../icons/iconfont.svg#iconfont) format('svg'); } .iconfont{ font-family:"iconfont" !important; font-size:16px;font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; } img{ display: block; } *{ padding:0; margin:0; border:none; outline:none; font-size:12px; color:#666; list-style:none; font-family:"mytitle2"; font-weight:normal; } p{ margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; list-style:none; font-size:12px; line-height:1.7; text-indent: 2em!important; } article, aside, dialog, figure, footer, header, hgroup, menu, nav, dir, section{ margin: 0; padding: 0; display: block; } .clear{ clear:both; } a{ text-decoration:none; } .w_1140{ width:98%; margin:auto; } .w_all{ width:88%; margin:auto; } .w_all2{ width:70%; margin:auto; } .n_width{ width: 82%; margin: auto; } /*index*/ html, body{ width:100%; position:relative; font-size:62.5%; } header{ width:100%; position:fixed; left:0%; top:0; z-index:9999; -webkit-transition: all 0.5s; transition: all 0.5s; } .nav_box{ position:relative; padding: 0 1.5%; } .logo{ height: 68px; padding: 10px 0; float: left; -webkit-transition:all 0.3s linear; transition:all 0.3s linear; } .logo img{ display: block; height: 100%; } .logo .lg1,.logo .lg2{ float: left; } .nav_box ul{ float:right; -webkit-transition:all 0.3s linear; transition:all 0.3s linear; position:relative; margin-right: 20px; } .nav_box ul li{ display: inline-block; position: relative; } .nav_box ul li strong{ height: 0px; width: 0px; border-top: 4px solid transparent; border-left: 5px solid #fff; border-bottom: 4px solid transparent; display: block; position: absolute; right: 8px; top: 50%; -webkit-transform: translate(0,-50%); transform: translate(0,-50%); } .nav_box ul li h1{ padding:0 20px; font-size: 1.6rem; line-height: 88px; text-align: center; position: relative; -webkit-transition:all 0.4s; transition:all 0.4s; color:#fff; letter-spacing:0.8px; font-weight:bold; box-sizing:border-box; } .nav_box ul li h1:before{ content:""; width:0; height:3px; background:#e62129; position:absolute; left:0; bottom:0; -webkit-transition:all 0.3s linear; transition:all 0.3s linear; } .nav_box ul li:nth-child(8) h1:before{ } .nav_box ul li:hover h1{ color:#2c367d!important; } .nav_box ul li.active{ color:#e62129; } .nav_box ul li.active h1:before{ opacity:1; width:100%; } .nav_box .search{ width:24px; display:block; position:absolute; right:3%; top:50%; -webkit-transform:translate(0,-50%); transform:translate(0,-50%); } .nav_box .search img{ width:100%;} .nav_box .search .sear1{ display: none; } .navBtn{ display:none; } .s_menu{ position:fixed; width:100%; left:0; top:0; background:rgba(255,255,255,0.99); border-top:1px solid #f0f0f0; box-sizing:border-box; padding:2% 0; display:none; } .s_menu .box{ height:100%; width:60%; position:relative; opacity:0; margin-top:20px; } .s_menu .box .left{ width:25%; height:100%; min-height:100px; position:absolute; left:0; top:0; } .s_menu .box dl{ width:65%; float:right; margin-right:-3%; padding:2% 0; } .s_menu .box dl dd{ float:left; margin:10px 0; font-size:1.6rem; color:#333; width:33.3%; position:relative; -webkit-transition:all 0.3s linear; transition:all 0.3s linear; cursor:pointer; } .s_menu .box dl dd:hover{ color:#343b83; letter-spacing:1px; } .s_menu .box dl dd .more{ position:absolute; right:40%; top:2px; width:20px; height:20px; } .s_menu .box dl dd .more i{ font-size:0.8rem; } .s_menu .box dl dd:nth-of-type(3n){ margin-right:0; } .banner{ width:100%; height:100%; position:relative; z-index:9; overflow:hidden; } .banner ul{ width:100%; height:100%; } .banner ul li{ width:100%; height:100%; position:absolute; left:0; top:0; display:none; } .banner ul li b{ width:100%; height:100%; display:block; -webkit-transition:all 5s linear; transition:all 5s linear; } .banner ul li:first-of-type{ display:block;} .banner ul li b.active{ -webkit-transform:scale(1.06); transform:scale(1.06); } .banner .b_txt{ display:none; } .banner .b_txt dd{ position:absolute; left:5%; top:50%; -webkit-transform:translate(0%,-50%); transform:translate(0%,-50%); opacity:0; padding-top:2%; } .banner dl dd:before{ content:""; width:0; height:3px; background:rgba(217,37,28,0.9); position:absolute; left:0; top:0px; } .banner dl dd.active:before{ width:100%; -webkit-transition:all 5s ease-out; transition:all 5s ease-out; } .banner .b_txt h1{ font-size:3.6rem; letter-spacing:6px; color:#fff; font-weight:bold; } .banner .b_txt h2{ font-size:1.8rem; color:#fff; letter-spacing:1.2px; line-height:2; } .banner .btn{ color:#fff; position:absolute; left:50%; bottom:3%; -webkit-transform:translate(-50%,0%); transform:translate(-50%,0%); } .banner .btn span{ color:rgba(255,255,255,0.8); font-size:1.6rem; margin:0 3px; position: relative; transition: all 0.5s linear; } .banner .btn span.active{ font-size:2rem; color:#fff; } .index_title{ text-align:center; } .index_title h1{ font-size:2.6rem; color:#2c367d; position:relative; padding:10px 0 0px; letter-spacing:1px; font-weight:bold; } .index_title h1:before{ content:""; left:50%; margin-left:-20px; position:absolute; top:0; width:40px; height:2px; background:#e62129; } .index_title h2{ font-size:1.4rem; color:#666; letter-spacing:0.5px; } .index_bar2{ padding:4% 0; background:#eee; } .index_bar2 ul li{ float:left; width:25%; text-align:center; cursor:pointer; opacity:0; margin-top:3%; } .index_bar2 ul li b:before{ content:""; width:100%; height:100%; padding:40%; background:rgba(44,54,125,0.8); position:absolute; left:50%; top:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); border-radius:50%; opacity:0; } .index_bar2 ul li b{ display:block; width:32%; position:relative; margin:30px auto 10px; -webkit-transition:all 0.3s linear; transition:all 0.3s linear; } .index_bar2 ul li b span{ color: #fff; display: block; font-size: 1.8rem; z-index: 3; position: absolute; left: 50%; top: 100%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-transition:all 0.3s linear; transition:all 0.3s linear; width: 100%; opacity: 0; } .index_bar2 ul li img{ display:block; width:100%; } .index_bar2 ul li h2{ font-size:1.8rem; color:#333; position:relative; z-index:3; -webkit-transition:all 0.3s linear; transition:all 0.3s linear; } .index_bar2 ul li:hover b span{ top: 50%; opacity: 1; } .index_bar2 ul li:hover b:before{ opacity:1; } .index_bar2 ul li:hover h2{ opacity: 0; -webkit-transform:translateY(-5px); transform:translateY(-5px); } .index_bar2 ul li:hover b{ -webkit-transform:translateY(30px); transform:translateY(30px); } .index_bar3{ background:url(../image/a1.jpg) no-repeat center center; background-size:cover; position:relative; padding:5% 0; background-attachment:fixed;} .index_bar3:before{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; } .index_bar3 .box{ width:220px; height:220px; margin:auto; background:#fff; border-radius:50%; position:relative; z-index:2; -webkit-transition:all 0.8s linear; transition:all 0.8s linear; } .index_bar3 .box.active{ -webkit-transform:rotate(360deg); transform:rotate(360deg); } .index_bar3 .box:before{ content:""; position:absolute; left:50%; top:50%; width:100%; height:100%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); padding:8%; border-radius:50%; background:rgba(255,255,255,0.5); } .index_bar3 .txt{ position:absolute; left:50%; top:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); z-index:5; } .more{ width:24px; height:24px; border:1px solid #ccc; box-sizing:border-box; border-radius:50%; margin:auto; position:relative; -webkit-transition:all 0.3s linear; transition:all 0.3s linear; cursor:pointer; } .more i{ font-size:0.8rem; color:#333; display:block; position:absolute; left:55%; top:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); -webkit-transition:all 0.4s linear; transition:all 0.4s linear; } .more:hover,.more.active{ background:#e62129; border:1px solid #e62129; } .more:hover i,.more.active i{ color:#fff;} .index_bar3 .more{ margin-top:20px;} .index_bar4{ position:relative; padding:0 0 1%; overflow:hidden; padding-top: 4%; } .index_bar4 ul{ margin-top: 1%; } .index_bar4 ul li{ float:left; width:49%; height:480px; margin:0.5%; position:relative; overflow:hidden; opacity:0; } .index_bar4 ul li b{ width:100%; height:100%; display:block; } .index_bar4 ul li:before{ content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.3); opacity: 0; z-index: 1; -webkit-transition: all 0.5s linear; transition: all 0.5s linear; } .index_bar4 ul li:hover:before{ opacity: 1; height: 100%; } .index_bar4 ul li:first-of-type{ width:54%;} .index_bar4 ul li:nth-of-type(2){ width:44%;} .index_bar4 ul li:nth-of-type(1),.index_bar4 ul li:nth-of-type(3){ left:-5%; } .index_bar4 ul li:nth-of-type(2),.index_bar4 ul li:nth-of-type(4){ right:-5%; } .index_bar4 ul li .txt{ position:absolute; left:50%; top:60%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); opacity:0; z-index: 2; -webkit-transition:all 0.3s ease-out; transition:all 0.3s ease-out; } .index_bar4 ul li .more{ margin-top:10px; } .index_bar4 ul li .more i{ color: rgba(255,255,255,0.6); font-size: 1.6rem; position: relative; display: block; text-align: center; top: 65%; left: 50%; } .index_bar4 ul li .more i:before { content: "浏览所有"; position: absolute; left: 0%; width: 100%; top: -40px; text-align: center; display: block; color: #fff; font-size: 1.3rem; letter-spacing: 0.5px; } .index_bar4 ul li .more { position: absolute; left: 50%; top: 300%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); opacity: 0; background: rgba(230,33,41,0.8); border: none; width: 140px; height: 140px; z-index: 9; -webkit-transition: all 0.6s ease-out; transition: all 0.6s ease-out; } .index_bar4 ul li:hover .more{ opacity: 1; top: 50%; box-shadow: 0 3px 5px rgba(218,37,28,0.2); } .index_bar4 ul li:hover .txt{ opacity:1; top:50%;} .index_bar4 ul li:after{ content: ""; background: url(../image/pa_1.jpg) no-repeat center; background-size: cover; position: absolute; left: 0; bottom: 0; opacity: 0; width: 100%; height: 0; -webkit-transition:all 0.5s ease-out; transition:all 0.5s ease-out; } .index_bar4 ul li:nth-of-type(2):after{ background:url("../image/pa_2.jpg") no-repeat center center; background-size: cover; } .index_bar4 ul li:nth-of-type(3):after{ background:url("../image/pa_3.jpg") no-repeat center center; background-size: cover; } .index_bar4 ul li:nth-of-type(4):after{ background:url("../image/pa_4.jpg") no-repeat center center; background-size: cover; } .index_bar4 ul li:hover:after{ height: 100%; opacity: 1; } .index_bar5{ width:100%; position:relative; background:url(../image/br-_02.jpg) no-repeat center center; background-size:cover; padding:4% 0; } .index_bar5 .title h1{ font-size: 1.8rem; color: #333; float: left; font-weight: bold; } .index_bar5 .title span{ float: right; margin-top: 6px; display: block; } .index_bar5 .index_title h1:before{ width: 30px; } .index_bar5 .box{ margin-top: 10%; overflow: hidden; position: relative; width: 90%; opacity: 0; } .index_bar5 .box ul li{ width: 33.33%; padding: 0 0.2%; box-sizing: border-box; float: left; transition: .5s; } .index_bar5 .box ul li img{ padding: 2% 0; width: 100%; } .index_bar5 .btn .prev{ position: absolute; top: 56%; left: 1.5%; cursor: pointer; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .index_bar5 .btn .next{ position: absolute; top: 56%; right: 1.5%; cursor: pointer; } .index_bar5 .btn .prev .iconfont,.index_bar5 .btn .next .iconfont{ font-size: 3rem; color: #999; -webkit-transition: 0.3; transition: 0.3; } .index_bar5 .btn .prev:hover .iconfont{ color: #e62129; } .index_bar5 .btn .next:hover .iconfont{ color: #e62129; } .footer{ background:#ddd; padding:4% 0 1%; position:relative; z-index:9; } .footer .box{ position: relative; } .footer .logof{ position: absolute; right: 0; top: 0; } .footer .logof p{ font-size:1.3rem; color:#333; margin:1px 0; } .footer p:first-of-type{ margin-bottom:16px; line-height:36px; font-size:20px; letter-spacing:1px; font-weight:bold; color:#e62129; } .footer p strong{ display:block; width:38px; height:38px; background:#e62129; border-radius:50%; float:left; margin-right:10px; } .footer p i{ font-size:2.2rem; color:#fff; text-align:center; line-height:40px; display:block; } .footer .bar{ float:left; width:76%; } .footer dl{ float:left; width:16.666%; } .footer dl dt{ font-size:1.5rem; color:#2c367d; font-weight:bold; margin-bottom:5px; letter-spacing:1px; position:relative; } .footer dl dd{ font-size:1.3rem; line-height:22px; -webkit-transition:all 0.3s linear; transition:all 0.3s linear; } .footer dl a:hover dd{ color:#da251c; letter-spacing:0.5px; } .copy_right_box{ padding:7px 0 25px; background:#ddd; } .copy_right{ margin:auto; padding-top:1%; border-top:1px solid #ccc; position: relative; } .copy_right p{ color:#333; float:left; text-indent: 0!important; } .copy_right .f_box{ float:right; opacity:0.8; margin-top:-3px; position: relative; } .copy_right .ww{ position: absolute; right: 0; bottom: 20px; width: 10%; z-index: 99; opacity: 0; } .copy_right .ww{} .copy_right .ww img{ width: 100%; } .copy_right .wx{ float:right; width:30px; background:#888; height:30px; border-radius:50%; margin:0 5px } .copy_right .wx img{ display:block; margin:2px auto; width:24px; } .index_bar6{ margin: auto; padding-top: 4%; position: relative; } .index_bar6 .box{ position: relative; margin: 2% 6% 0 6%; overflow: hidden; } .index_bar6 .left{ width: 54%; position: absolute; top: 0; left: -10%; opacity: 0; height: 100%; } .index_bar6 .left img{ width: 100%; } .index_bar6 .right{ width: 42%; float: right; padding: 8% 0; opacity: 0; position: relative; margin-right: -10%; z-index: 4; } .index_bar6 .right h1{ color: #333; font-size: 2.2rem; margin-bottom: 10px; } .index_bar6 .right h2{ color: #666; font-size: 1.4rem; margin-bottom: 3%; } .index_bar6 .right p{ color: #666; font-size: 1.4rem; text-indent: 0!important; } .index_bar6 .right .more_s{ margin-top: 3%; } .index_bar6 .right .more_s a{ color: #e62129; font-size: 1.4rem; } .index_bar6 .right .more_s .more{ margin: inherit; } .index_bar6 .box .about{ color: #aaa; font-size: 25rem; position: absolute; top: -20%; right: -10%; z-index: 3; opacity: 0; letter-spacing: 1px; } /*about*/ .common_banner{ position: relative; } .common_banner .bj{ height: 360px; } .common_banner .text{ position: absolute; top: 56%; left: 9%; width: 40%; } .common_banner .text h1{ font-size: 3.2rem; color: #2c367d; font-weight: bold; letter-spacing: 2px; } .common_banner .text h1:before{ content: ""; left: 0; position: absolute; top: -10px;; width: 80px; height: 2px; background: #e62129; } .common_banner .text p{ font-size: 1.7rem; color: #333; line-height: 2.3rem; margin-top: 1%; } .about_box{ padding: 1% 9%; margin: auto; background: #eee; } .about_box ul{ display: flex; justify-content: space-between; } .about_box ul li{ border-right: solid rgba(0,0,0,0.1) 1px; width: calc(100% / 6); text-align: center; padding: 0.3% 0; } .about_box ul li:nth-of-type(6){ border-right: 0; } .about_box ul li h1{ font-size: 1.7rem; color: #333; margin-top: 6px; } .about_box ul li img{ width: 35px; margin: auto; } .about_box ul li .pic1{ display: none; } .about_box ul li:hover h1{ color: #2c367d; } .about_box ul li:hover .pic1{ display: block; } .about_box ul li:hover .pic2{ display: none; } .about1{ padding: 4% 0 0 0; position: relative; } .about1 .index_title{ margin-top: 5%; opacity: 0; } .about1 .index_title p{ color: #333; font-size: 1.5rem; margin-top: 4px; text-align: center; } .about1 .box{ margin-top: 1%; position: relative; } .about1 .about{ position: relative; } .about1 .about .right{ position: relative; z-index: 2; margin-top: 8%; opacity: 0; padding-bottom: 3%; } .about1 .about .more{ transform: rotate(90deg); width: 34px; height: 34px; background: #e62129; border-color: #e62129; position: relative; z-index: 2; } .about1 .about .more i{ font-size: 1.5rem; color: #fff; } .about1 .about .right h1{ color: #2c367d; font-size: 2.4rem; position: relative; margin: 20px 0 0 0; } .about1 .about .right h1:before{ content: ""; left: 0; position: absolute; top: -6px; width: 80px; height: 2px; background: #e62129; } .about1 .about .right p{ font-size: 1.5rem; line-height: 25px; color: #333; margin-top: 9px; text-indent: 2em; } .about1 .about .dm{ font-size: 1.8rem; color: #e62129; position: absolute; left: 40px; top: 40px; font-weight: bold; } .about1 .left{ width: 100%; background: url(../image/banner2.jpg) no-repeat center; background-size: cover; background-attachment: fixed; margin-top: -0.5%; position: relative; padding: 3% 0 7% 0; } .about1 .left:before{ content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.8); } .about1 .left .text{ opacity: 0; margin-top: 6%; } .about1 .left .text p{ color: #2c367d; font-size: 2rem; position: relative; z-index: 2; line-height: 1.8; text-align: center; width: 80%; margin: auto; } .about1 .s_about{ margin-top: 10%; margin-bottom: 2%; display: flex; justify-content: space-around; opacity: 0; padding: 0 16%; position: relative; } .about1 .s_about li{ text-align: center; } .about1 .s_about li h1{ font-size: 5rem; color: #e62129; font-weight: bold; } .about1 .s_about li h1 b{ font-size: 1.4rem; color: #e62129; margin-left: 10px; } .about1 .s_about li h2{ color: #666; font-size: 1.5rem; letter-spacing: 0.5px; } .about2{ padding: 3%; position: relative; margin-top: -5%; background: #fff; width: 76%; } .about2:before{ content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.7); } .about2 .zc{ margin-top: 10%; opacity: 0; } .about2 .zc .left{ width: 60%; float: right; position: relative; padding: 1% 0; z-index: 2; } .about2 .zc .left P{ font-size: 1.5rem; line-height: 25px; color: #333; margin-top: 9px; text-indent: 28px; } .about2 .zc .left P:nth-of-type(5){ font-weight: bold; } .about2 .zc .right{ float: right; width: 20%; margin-right: 10%; z-index: 2; position: relative; } .about2 .zc .right img{ width: 100%; } .about2 .zc .right h1{ color: #333; font-size: 1.6rem; margin-top: 10px; text-align: center; font-weight: bold; } .about2 .zc .right h1 span{ color: #e62129; font-size: 1.6rem; font-weight: bold; } .about2 .index_title{ margin: inherit; text-align: inherit; } .about2 .index_title h1{ color: #2c367d; } .about2 .index_title h1:before{ margin-left: 0; left: 0; } .culture{ margin-top: 4%; } .culture .index_title{ margin-top: 5%; opacity: 0; } .culture .cul_s{ padding-top: 2%; } .cul_s{ position: relative; padding: 3% 0; overflow: hidden; } .cul_s .left{ float: left; width: 50%; padding: 8% 0; position: relative; z-index: 2; margin-left: -60%; opacity: 0; } .culture { padding-bottom: 3%; } .culture .tetx{ text-align: center; padding: 1% 0; } .culture .index_title{ margin-bottom: 3%; } .culture .tetx h1{ color: #2c367d; font-size: 2.4rem; padding-bottom: 6px; margin-bottom: 20px; position: relative; } .culture .tetx h2{ color: #333; font-size: 1.9rem; margin-bottom: 6px; } .culture .tetx p{ color: #666; font-size: 1.4rem; line-height: 23px; text-indent: 2em; } .cul_s .right{ position: absolute; top: 50%; right: -60%; width: 45%; -webkit-transform: translate(0,-50%); transform: translate(0,-50%); overflow: hidden; opacity: 0; } .cul_s .right img{ width: 100%; transition: all 0.5s linear; } .cul_s:hover .right img{ -webkit-transform: scale(1.1); transform: scale(1.1); } .cul_s .sz{ position: absolute; top: 20%; left: 50%; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); font-size: 20rem; color: #eee; z-index: 1; opacity: 0; } .culture2{ background: url(../image/nb.png) no-repeat center center; background-size: cover; background-attachment: fixed; } .culture2:before{ content: ""; position: absolute; width: 100%; height: 100%; background: rgba(255,255,255,0.8) } .culture2 .right,.culture4 .right,.culture6 .right{ left: -60%; opacity: 0; } .culture2 .left,.culture4 .left,.culture6 .left{ float: right; margin-right: -60%; opacity: 0; font-weight: bold; } .culture2 .cul_s .sz,.culture4 .cul_s .sz,.culture6 .cul_s .sz{ color: #bbb; opacity: 0; font-weight: bold; } .hour{ padding: 4% 0; } .hour .index_title{ margin-top: 5%; opacity: 0; } .hour .list{ } .hour .list li{ float: left; width: 23.5%; margin-right: 2%; margin-top: 2%; background: #f6f6f6; padding: 2% 2% 1.4% 2%;; box-sizing: border-box; cursor: pointer; position: relative; opacity: 0; overflow: hidden; } .hour .list li .bg{ position: absolute; bottom: 0; left: 0; width: 100%; height: 0; background: rgba(44,54,125,0.6); opacity: 0; -webkit-transition: all .5s linear; transition: all .5s linear; } .hour .list li b{ background: url(../image/big.png) no-repeat center; background-size: 16%; position: absolute; left: 50%; top: 200%; width: 100%; height: 0; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-transition: all .5s linear; transition: all .5s linear; } .hour .list li:hover .bg{ height: 100%; opacity: 1; } .hour .list li:hover b{ top: 50%; height: 100%; opacity: 1; } .hour .list li:nth-child(4n){ margin-right: 0; } .hour .list li img{ width: 100%; } .hour .list li h1{ color: #333; font-size: 1.4rem; text-align: center; margin-top: 20px; line-height: 24px; } .hour .list li:hover h1{ color: #e62129; } .big_box{ width: 100%; height: 100%; background: rgba(255,255,255,0.9); position: fixed; top: 0; left: 0; z-index: 9999;; } .big_box:before{ content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; cursor: url(../image/mouse4.png),auto; } .big_box .close { position: fixed; top: 10%; right: 3.5%; z-index: 100; cursor: pointer; display: none; } .big_box .close img { width: 36px; } .big_imgss { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); z-index: 2; width: 40%; } .big_imgss img { display: block; max-width: 100%; width: 100%; margin: auto; box-shadow: 0 0px 5px rgba(0,0,0,0.05); } .big_imgss h1{ color: #e62129; font-size: 1.4rem; text-align: center; margin-top: 20px; } .culture2 .cul_s,.culture4 .cul_s{ border: 0; } .culture4{ background: url(../image/nb.png) no-repeat center center; background-size: cover; background-attachment: fixed; } .culture4:before{ content: ""; position: absolute; width: 100%; height: 100%; background: rgba(255,255,255,0.86) } .zr{ width: 88%; margin: auto; margin-top: 3%; } .zr .index_title{ opacity: 0; } .zr .s_zr_box{ margin-top: 1.5%; position: relative; overflow: hidden; } .zr .s_zr .right span { font-size: 1.5rem; color: #aaa; background: url(../image/date.png) no-repeat left; background-size: 14px; padding-left: 20px; margin-bottom: 20px; display: block; } .zr .s_zr .left,.zr .s_zr .right{ position: relative; z-index: 2; } .zr .s_zr .left{ float: left; width: 50%; margin-left: -60%; opacity: 0; } .zr .s_zr .left img{ width: 100%; } .zr .s_zr .right{ position: absolute; width: 43%; top: 50%; right: -60%; -webkit-transform: translate(0,-50%); transform: translate(0,-50%); opacity: 0; } .zr .s_zr .right span{ font-size: 1.4rem; color: #888; display: block; background: url(../image/date.png) no-repeat left; padding-left: 20px; background-size: 15px; padding-top: 2px; } .zr .s_zr .right h1{ font-size: 2.2rem; color: #333; margin: 1.6% 0; } .zr .s_zr .right h2{ font-size: 1.6rem; color: #666; line-height: 1.6; } .zr .s_zr .right .more{ margin: inherit; margin-top: 2%; } .zr .s_news { position: absolute; left: 43%; top: 0; font-size: 15rem; color: rgba(0,0,0,0.03); line-height: 120px; font-weight: bold; } .footer p{ text-indent: 0!important; } .l_zr{ width: 88%; margin: auto; margin-top: 3%; margin-bottom: 4%; } .l_zr li{ float: left; width: 32%; margin-right: 2%; overflow: hidden; opacity: 0; box-sizing: border-box; padding: 2%; background: #eee; } .l_zr li img{ width: 100%; -webkit-transition: .5s; transition: .5s; } .l_zr li:nth-of-type(3){ margin-right: 0; } .l_zr li .text{ padding: 4% 3% 0 3%; } .l_zr li:hover .text h1{ color: #2c367d; } .l_zr li:hover img{ -webkit-transform: scale(1.02); transform: scale(1.02); } .l_zr li .text p{ color: #555; font-size: 1.5rem; line-height: 26px; text-indent: 0!important; } .news_box{ margin-top: 4%; position: relative; } .news_box .news_z{ margin-top: 2%; position: relative; } .news_box .news_z .left{ float: left; width: 46%; } .news_box .news_z .left img{ width: 100%; margin: auto; } .news_box .news_z .right{ position: absolute; width: 50%; top: 48%; right: 0; -webkit-transform: translate(0,-50%); transform: translate(0,-50%); } .news_box .news_z .right h1{ font-size: 2.2rem; color: #333; margin-bottom: 2px; } .news_box .news_z .right p{ color: #666; font-size: 1.5rem; text-indent: 0!important; } .news_box .news_z .right .more{ margin: inherit; margin-top: 20px; } .news_box .news_z .right span{ font-size: 1.5rem; color: #aaa; background: url(../image/date.png) no-repeat left; background-size: 14px; padding-left: 20px; margin-bottom: 20px; display: block; } .news_box .s_news{ position: absolute; left: 43%; top: 0; font-size: 15rem; color: rgba(0,0,0,0.03); line-height: 120px; font-weight: bold; } .video_box{ margin: 4% auto 4% auto; } .video_box .s_video{ position: relative; } .video_box .s_video dl dd{ float: left; width: calc(100% / 3); padding: 2% 2% 1.5% 2%; position: relative; box-sizing: border-box; border-bottom: solid #eee 1px; overflow: hidden; cursor: pointer; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .video_box .s_video dl dd b{ position: relative; display: block; width: 100%; } .video_box .s_video dl dd b img{ width: 100%; -webkit-transition: 0.5s; transition: 0.5s; } .video_box .s_video dl dd b .v_btn,.video_box .s_video dl dd b .v_btn1{ width: 10%; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-transition: .5s; transition: .5s; } .video_box .s_video dl dd b .v_btn1{ opacity: 0; } .video_box .s_video dl dd b:before{ content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.2); -webkit-transition: 0.5s; transition: 0.5s; } .video_box .s_video dl dd:hover b .v_btn1{ opacity: 1; } .video_box .s_video dl dd:hover b .v_btn{ opacity: 0; } .video_box .s_video dl dd:hover b .im1{ -webkit-transform: scale(1.02); transform: scale(1.02); } .video_box .s_video dl dd b:hover:before{ opacity: 0; } .video_box .s_video dl dd h1{ color: #555; font-size: 1.8rem; padding: 2% 0 0 0; position: relative; margin-top: 6%; } .video_box .s_video dl dd h1:before{ content: ""; position: absolute; left: 0; top: 0; width: 40px; height: 2px; background: #e62129; } .video_box .s_video dl dd .v_box{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.7); z-index: 99999; display: none; } /* .video_box .s_video dl dd .v_box:before{ content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; cursor: url(../image/mouse4.png),auto; } */ .video_box .s_video dl dd .v_box video{ position: relative; list-style: none; padding: 0; margin: 0; width: 60%; height: 60%; left: 20%; top:20%; object-fit: cover; } .video_box .s_video dl dd .v_box video source{ width: 100%; } .video_box .s_video dl dd .v_box .close{ position: absolute; right: 12%; top: 12%; width: 2%; } .video_box .s_video dl dd .v_box .close img{ width: 100%; } .list_box{ margin: 4% auto 4% auto; } .list_box .tittle{ border-bottom: solid rgba(44,54,125,0.3) 1px; padding-bottom: 10px; margin-bottom: 20px; } .list_box .tittle .left{ float: left; } .list_box .tittle .left h1{ color: #333; font-size: 2rem; font-weight: bold; } .list_box .tittle .right{ float: right; } .list_box .tittle .right li{ color: #666; font-size: 1.7rem; float: left; margin-right: 20px; letter-spacing: 1px; font-weight: bold; padding-top: 7px; } .list_box .tittle .right li.active{ font-size: 2.4rem; color: #e62129; padding-top: 0; } .list_box .list li{ float: left; width: 32%; margin-top: 2%; margin-right: 2%; background: #F6F6F6; padding: 2%; box-sizing: border-box } .list_box .list li:nth-of-type(3n){ margin-right: 0; } .list_box .list .top{ overflow: hidden; } .list_box .list .top img{ height: 256px; overflow: hidden; margin: auto; -webit-transition: all 0.5s linear; transition: all 0.5s linear; } .list_box .list li:hover .top img{ transform: scale(1.1); } .list_box .list .text{ padding-top: 16px; } .list_box .list .text .more{ margin: inherit; margin-top: 13px; } .list_box .list .text span{ font-size: 1.4rem; color: #999; background: url(../image/date.png) no-repeat left; background-size: 14px; padding-left: 20px; padding-top: 2px; display: block; margin: 2px 0 8px 0; } .list_box .list .text h1{ font-size: 1.8rem; color: #333; overflow: hidden; } .list_box .list li:hover .text h1{ color: #2c367d; } .list_box .list .text p{ font-size: 1.4rem; color: #666; margin-top: 6px; line-height: 22px; height: 40px; overflow: hidden; text-indent: 0!important; } .v_deo{ background: url(../image/a1.jpg) no-repeat center center; background-size: cover; padding: 4% 0 0 0; position: relative; height: 240px; } .v_deo .btn{ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); cursor: pointer; } .v_deo .btn i{ font-size: 5rem; opacity: 0.8; } .history{ padding: 4% 0; position: relative; } .history .date{ width: 12%; float: left; margin-left: 16%; } .history .date ul li{ height: 60px; margin-top: 11.5%; } .history .nr ul li{ height: 60px; margin-top: 2%; } .history .date ul li h1{ color: #666; font-size: 2rem; text-align: center; line-height: 60px; } .history .date ul li h2{ font-size: 1.4rem; color: #777; } .history .nr{ float: right; width: 70%; border-left: solid #eee 1px; box-sizing: border-box; position: relative; padding-bottom: 2%; } .history .nr ul li p{ color: #666; font-size: 1.6rem; line-height: 60px; padding-left: 4%; } .history .his_box{ overflow: hidden; } .history .his{ float: right; width: 60%; height: 500px; } .history .nr ul li{ background: #eee; position: relative; margin-left: 7%; -webkit-transition: .5s; transition: .5s; } .history .nr ul li b{ position: absolute; left: -8.6%; top: 50%; -webkit-transform: translate(0,-50%); transform: translate(0,-50%); width: 8px; height: 8px; border: solid #aaa 2px; border-radius: 50%; } .history .nr ul li.active{ background: #ddd; } .history .nr ul li b.active{ background: #e62129; border-color: #e62129; } .history .date ul li h1.active{ color: #e62129; } .history .h_box{ margin-top: 2%; position: relative; } .history .h_box .img li{ position: absolute; width: 46%; height: 100%; display: none; left: 0; top: 0; } .hj{ margin: 4% 0; } .hj .index_title{ margin-top: 5%; opacity: 0; } .hj .list{ margin-top: 1%; } .hj .list li{ margin:0.5%; width: 28.5%; float: left; height: 347px; overflow: hidden; position: relative; opacity: 0; } .hj .list li img{ width: 100%; } .hj .list li:nth-child(1),.hj .list li:nth-child(8){ width: 40%; } .hj .list li:nth-child(5){ width: 69.5%; } .hj .list li:before{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.08); transition: .5s; } .hj .list li:hover:before{ background: rgba(0,0,0,0); } .quality{ margin-top: 4%; } .quality .index_title{ margin-top: 5%; opacity: 0; } .quality .s_box{ } .quality .s_box .top li{ width: 20%; float: left; margin-top: 9%; opacity: 0; box-sizing: border-box; } .quality .s_box .top li img{ width: 82%; margin: auto; } .quality .s_box .top .pic_box{ width: 80%; margin: auto; position: relative; } .quality .s_box .top .pic{ overflow: hidden; } .quality .s_box .top .pic_box .btn .prev{ position: absolute; left: -5%; top: 50%; cursor: pointer; -webkit-transform: translate(0,-50%) rotate(180deg); transform: translate(0,-50%) rotate(180deg); } .quality .s_box .top .pic_box .btn .next{ position: absolute; right: -5%; top: 50%; cursor: pointer; -webkit-transform: translate(0,-50%); transform: translate(0,-50%); } .quality .s_box .top .pic_box .btn .prev .iconfont,.quality .s_box .top .pic_box .btn .next .iconfont{ font-size: 4rem; color: #999; -webkit-transition: 0.3s; transition: 0.3s; } .quality .s_box .top .pic_box .btn .prev:hover .iconfont{ color: #e62129; } .quality .s_box .top .pic_box .btn .next:hover .iconfont{ color: #e62129; } .quality .s_box .top p{ width: 68%; color: #666; font-size: 1.5rem; margin: auto; text-align: center; line-height: 1.6; margin-top: 8%; opacity: 0; } .pzbz{ margin-top: 4%; background: #f6f6f6; padding: 4% 0; } .pzbz .index_title h1{ margin-bottom: 3%; } .pzbz .cs_box{ width: 100%; } .pzbz .cs_box .p_cs{ height: 326px; overflow: hidden; } #picture ul{ position: relative; padding: 0; margin: 0; width: 290000px; } .pzbz .cs_box li{ display: inline-block; float: left; height: 326px; } .pzbz .cs_box li:nth-child(1),.pzbz .cs_box li:nth-child(2),.pzbz .cs_box li:nth-child(3),.pzbz .cs_box li:nth-child(4){ margin-top: 0; } .pzbz .cs_box li img{ width: 92%; margin: auto; } .pzbz .cs_box li p{ color: #333; font-size: 1.4rem; text-align: center; padding: 3%; } .s_pz{ margin-top: 2%; position: relative; } .s_pz .index_title{ position: relative; z-index: 3; } .s_pz .pz{ position: relative; z-index: 2; margin-top: 2%; } .s_pz .pz li{ width: 50%; float: left; text-align: center; padding: 6% 0; box-sizing: border-box; position: relative; overflow: hidden; } .s_pz .pz li:nth-of-type(1){ border-bottom: solid #ddd 1px; border-right: solid #ddd 1px; } .s_pz .pz li:nth-of-type(2){ border-bottom: solid #ddd 1px; } .s_pz .pz li:nth-of-type(3){ border-right: solid #ddd 1px; } .s_pz .pz li h1{ color: #333; font-size: 2rem; position: relative; z-index: 3; } .s_pz .pz li:hover h1{ color: #e62129; } .s_pz .pz li p{ color: #333; font-size: 1.4rem; margin: auto; margin-top: 16px; width: 60%; position: relative; z-index: 3; line-height: 1.8; } .s_pz .pz li:before{ content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 0; background: rgba(255,255,255,0.8); opacity: 0; -webkit-transition: .5s; transition: .5s; } .s_pz .pz li:hover:before{ opacity: 1; height: 100%; } .s_pz .big li{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .s_pz .big li:before{ content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.7); } .pz3{ margin-top: 4%; } .pz3 .s_pz3{ margin-top: 2%; padding: 0 5% 4% 5%; position: relative; box-sizing: border-box; } .pz3 .s_pz3:before{ content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 50%; background: #f6f6f6; } .pz3 .s_pz3 .tp{ position: relative; z-index: 2; } .pz3 .s_pz3 .tp li{ float: left; width: 32%; margin-right: 2%; overflow: hidden; } .pz3 .s_pz3 .tp li img{ width: 100%; transition: .5s; } .pz3 .s_pz3 .tp li:nth-of-type(3){ margin-right: 0; } .pz3 .s_pz3 .tp li:hover img{ -webkit-transform: scale(1.03); transform: scale(1.03); } .pz3 .s_pz3 p{ position: relative; z-index: 2; font-size: 1.6rem; color: #666; text-align: center; margin-top: 2%; } .pz3 .s_pz3 p b{ color: #e62129; font-size: 1.8rem; } .pz4{ margin-top: 4%; position: relative; margin-bottom: 4%; } .pz4 .pz_box{ margin-top: 2%; position: relative; } .pz4 .pz_box .left{ position: relative; z-index: 3; width: 90%; padding: 4% 3%; box-sizing: border-box; margin: auto; background: #F6F6F6; margin-top: -6%; } .pz4 .pz_box .left p{ font-size: 1.6rem; color: #555; position: relative; z-index: 2; text-indent: 26px; } .pz4 .pz_box .right{ overflow: hidden; } .pz4 .pz_box .right img{ width: 100%; } .jouin_box{ margin-top: 4%; position: relative; } .jouin_box .left{ width: 54%; float: left; margin-top: 2%; } .jouin_box .left img{ width: 100%; } .jouin_box .join{ position: absolute; width: 42%; bottom: 0; right: 0; padding-bottom: 6%; } .jouin_box .v_jion{ position: relative; } .jouin_box .v_jion .jin{ position: absolute; top: 0; left: 52%; color: #eee; font-size: 16rem; font-weight: bold; letter-spacing: 1px; opacity: 0.4; } .jouin_box .join p{ margin: auto; position: relative; z-index: 2; color: #333; font-size: 1.5rem; margin-top: 1%; line-height: 26px; } .jouin_box .join p:nth-of-type(1){ font-weight: bold; font-size: 2rem; letter-spacing: 1px; margin-bottom: 2%; } .s_join{ margin: 4% auto 4% auto; } .s_join dl{ position: relative; } .s_join dl dd{ background: #eee; padding: 0 6%; margin-top: 2%; cursor: pointer; } .s_join dl dd .join_w{ padding: 2% 0; position: relative; } .s_join dl dd .join_w p{ float: left; width: 20%; text-indent: 0!important; } .s_join dl dd .join_w .ad{ color: #e62129; font-size: 3rem; font-weight: bold; text-align: right; position: absolute; right: 0; top: 50%; width: auto; -webkit-transition: .5s; transition: .5s; -webkit-transform: translate(0,-50%) rotate(0deg); transform: translate(0,-50%) rotate(0deg); } .s_join dl dd .join_w .ad img{ width: 22px; } .s_join dl dd .join_w .aj{ color: #e62129; font-size: 2.6rem; font-weight: bold; text-align: right; position: absolute; right: 0; top: 50%; -webkit-transform: translate(0,-50%); transform: translate(0,-50%); display: none; } .s_join dl dd .join_w p span{ color: #666; font-size: 1.8rem; } .s_join dl dd .join_w p span:nth-of-type(2){ color: #333; } .s_join dl dd .yq{ padding: 2% 0; display: none; position: relative; } .s_join dl dd .yq .bor{ position: absolute; left: 0; top: 0; width: 50%; height: 1px; background: #2c367d; opacity: 0; } .s_join dl dd .yq .zz .txt h1{ color: #333; font-size: 1.8rem; } .s_join dl dd .yq .zz .txt p{ font-size: 1.5rem; color: #666; line-height: 24px; margin-top: 4px; text-indent: 0!important; } .s_join dl dd .yq .zz .txt p span,.s_join dl dd .yq .zz .txt p strong{ color: #666; font-weight: bold; font-size: 1.6rem; } .s_join dl dd .yq .zz .txt:nth-of-type(2){ margin-top: 20px; } .s_join dl dd .yq .sq{ padding: 1% 0 2% 0; } .s_join dl dd .yq .sq h1{ color: #333; font-size: 1.8rem; float:left; margin-right: 30px; position: relative; } .s_join dl dd .yq .sq h1 span{ color: #e62129; font-size: 1.8rem; } .contact_box{ position: relative; background: #eee; } .contact_box .gd .list{ } .contact li{ height: 368px; } .contact li,.contact_box .gd .list li{ float: left; width: calc(100% / 3); padding: 3% 6%; box-sizing: border-box; overflow: hidden; position: relative; border-right: solid rgba(0,0,0,0.1) 1px; -webkit-transition: .5s; transition: .5s; } .contact li:hover{ background: rgba(0,0,0,0.03); } .contact_box .gd .list li:hover{ background: rgba(0,0,0,0.03); } .contact li:hover .add{ color: #e62129; } .contact_box .gd .list li{ height: 254px; } .contact li:nth-child(3){ margin-right: 0; border-right: 0; } .contact_box .gd .list li:nth-child(3){ border-right: 0; } .contact{ border-bottom: solid rgba(0,0,0,0.1) 1px; } .contact li h1,.contact_box .gd .list li h1{ color: #333; font-size: 2rem; letter-spacing: 1px; padding-bottom: 3%; margin-bottom: 5%; position: relative; } .contact li h1:before,.contact_box .gd .list li h1:before{ content: ""; left: 0; position: absolute; bottom: 0; width: 40px; height: 2px; background: #e62129; } .contact li p,.contact_box .gd .list li p{ font-size: 1.5rem; color: #666; padding-left: 36px; padding-top: 4px; margin-top: 10px; text-indent: 0!important; } .contact_box .gd .list li img{ position: absolute; right: 8%; bottom: 10%; width: 17%; opacity: 0; } .contact li .add{ font-weight: bold; letter-spacing: 1px; } .n_news_box{ margin: 4% auto 4% auto; position: relative; } .n_news_box .n_news{ float: right; width: 75%; padding: 3% 5%; box-shadow: 0px 5px 26px rgba(0,0,0,0.04); } .n_news_box .n_news img{ width: 70%; margin: auto; padding: 3% 0 2% 0; } .n_news_box .n_news h1{ color: #333; font-size: 2.4rem; text-align: center; letter-spacing: 1px; } .n_news_box .n_news p{ color: #666; font-size: 1.5rem; line-height: 25px; margin-top: 1%; text-indent: 28px; } .n_news_box .dat{ position: fixed; left: 6%; top: 80%; font-weight: bold; font-size: 1.6rem; color: #2c367d; letter-spacing: 1px; width: 14%; background: url(../image/date1.png) no-repeat left; background-size: 16px; padding-left: 25px; -webkit-transition: 0.5s; transition: 0.5s; } .n_news_box .dat:before{ content: ""; position: absolute; left: 0; bottom: -17px; width: 100%; height: 20px; background: #2c367d; opacity: 0.2; z-index: -1; -webkit-transform: translate(0,-50%); transform: translate(0,-50%); } .n_news_box .n_news .next{ margin-top: 2%; padding-top: 2%; border-top: solid #ddd 1px; } .n_news_box .n_news .next .nxt{ float: right; width: 34%; padding-top: 6px; } .n_news_box .n_news .next .back{ float: left; } .n_news_box .n_news .next .nxt .more{ float: left; margin-right: 6px; } .n_news_box .n_news .next .nxt span{ font-size: 1.4rem; color: #888; margin-top: 3px; display: block; } .n_news_box .n_news .next .back h3{ color: #888; font-size: 1.4rem; background: url(../image/back.png) no-repeat left; background-size: 23px; padding-left: 30px; padding-top: 6px; } .n_news_box .n_news .next .back h3:hover{ color: #E62129; } .n_news_box .n_news .next .nxt:hover span{ color: #e62129; } .n_news_box .n_news .next .nxt:hover .more{ background: #e62129; border-color: #e62129; } .n_news_box .n_news .next .nxt:hover .more i{ color: #fff; } .message_box{ padding: 4% 8%; } .message_box .message{ margin-top: 2%; background: #eee; padding: 2% 4% 3% 4%; position: relative; overflow: hidden; } .message_box .message .inf_box{ } .message_box .message .inf{ padding: 1% 0 1% 1%; margin-top: 1%; border-bottom: solid rgba(0,0,0,0.06) 1px; position: relative; } .message_box .message .inf font{ position: absolute; left: 0; top: 50%; color: red; font-size: 1.5rem; -webkit-transform: translate(0,-50%); transform: translate(0,-50%); } .message_box .message input{ font-size: 1.5rem; color: #333; background: none; display: block; } .message_box .message textarea{ border: solid #eee 1px; width: 98%; font-size: 1.5rem; color: #333; background: rgba(0,0,0,0.01); padding: 1%; margin-top: 2%; height: 100PX; } .message_box .btn{ width: 110px; padding: 7px 20px; margin: auto; background: #2c367d; margin-top: 2%; cursor: pointer; transition: .5s; } .message_box .btn:hover{ background: #e62129; } .message_box .btn input{ color: #fff; font-size: 1.6rem; text-align: center; float: left; background: none; } .message_box .btn .more{ float: right; } .message_box .btn .more i{ color: #fff; } .relate_box{ margin: 4% 0; } .relate_box .relate{ margin-top: 2%; position: relative; } .relate_box .relate li{ float: left; width: 23%; margin-right: 2.5%; box-shadow: 0 5px 26px rgba(0,0,0,0.04); box-sizing: border-box; padding: 2% 3%; } .relate_box .relate li:nth-child(4){ margin-right: 0; } .relate_box .relate li h1{ font-size: 1.6rem; color: #333; } .relate_box .relate li .more{ margin: inherit; margin-top: 12px; } .relate_box .r_relate{ margin-top: 2%; position: relative; } .relate_box .r_relate .left{ } .relate_box .r_relate .left li{ position: absolute; left: 0; top: 0; width: 50%; height: 100%; z-index: -1; display: none; } .relate_box .r_relate .right{ float: right; width: 48%; padding:1% 3% 3% 3%; background: rgba(238,238,238,0.96); margin-top: 3%; } .relate_box .r_relate .right li{ padding: 2% 0; border-bottom: solid #ddd 1px; margin-top: 2%; } .relate_box .r_relate .right li h1{ float: left; color: #666; font-size: 1.6rem; } .relate_box .r_relate .right li .more{ float: right; } .relate_box .r_relate .right li span{ float: left; font-size: 1.6rem; color: #aaa; margin-right: 6%; } .relate_box .r_relate .right li h1.active{ color: #e62129; } .relate_box .r_relate .right li .more.active{ background: #e62129; border: 1px solid #e62129; } .relate_box .r_relate .right li .more i.active{ color: #fff; } .relate_box .m_relate{ position: absolute; right: 0; top: 0; width: 7%; } .relate_box .m_relate h1{ color: #333; font-size: 1.6rem; float: left; } .relate_box .m_relate .more{ float: right; } .relate_box .r_list{ width: 80%; margin: auto; margin-top: 2%; } .relate_box .r_list table{ width: 100%; } .relate_box .r_list tr{ } .relate_box .r_list tr td,.relate_box .r_list tr a{ color: #666; font-size: 1.5rem; background: #f6f6f6; line-height:42px; text-align: center; width: 20%; } .relate_box .r_list tr td:nth-of-type(2){ width: 60%; text-align: left; box-sizing: border-box; padding-left: 2rem; } .relate_box .r_list tr a:hover{ color: #2c367d; font-weight: bold; } .relate_box .r_list tr:nth-child(1) td{ background: #eee; text-align: center; font-weight: bold; font-size: 2rem; color:#333 } .relate_box .r_list tr .look img{ width: 2rem; margin: auto; } .relate_box .r_list tr .look .yl1{ display: none; } .relate_box .r_list tr .look:hover .yl{ display: none; } .relate_box .r_list tr .look:hover .yl1{ display: block; } .relate_box .r_list .r_bg{ width: 100%; background: #eee; cursor: pointer; -webkit-transition: 0.5s; transition: 0.5s; } .relate_box .r_list .r_bg h1{ color: #2c367d; font-size: 1.8rem; line-height: 42px; text-align: center; } .relate_box .r_list .r_bg:hover h1{ color: #e62129; } .pdf{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; margin: auto; background: rgba(0,0,0,0.01); z-index: 9999; } .h_relate{ margin-top: 4%; position: relative; } .h_relate:before{ content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.8); } .h_relate .txt{ position: relative; width: 50%; margin: auto; margin-top: 2%; } .h_relate .txt h1{ text-align: center; font-size: 2rem; color: #e62129; } .h_relate .txt p{ text-align: center; font-size: 1.5rem; color: #666; margin-top: 1%; line-height: 1.8; } .h_relate .txt .btn{ background: #2c367d; margin: auto; width: 110px; padding: 10px 22px; margin-top: 2%; transition: .5s; } .h_relate .txt .btn h2{ color: #fff; font-size: 1.5rem; float: left; } .h_relate .txt .btn .more{ float: right; width: 22px; height: 22px; } .h_relate .txt .btn .more i{ color: #fff; } .h_relate:hover .txt .btn{ background: #e62129; } .h_relate iframe{ position: relative; } .h_relate .gp{ border-top: solid #eee 1px; margin-bottom: 4%!important; } .business_box{ margin: 4% 0; } .business_box .business ul{ margin-top: 3%; position: relative; overflow: hidden; } .business_box .business ul:nth-of-type(1){ margin-top: 2%; } .business_box .business ul li .left{ width: 60%; position: absolute; left: 0%; top: 50%; transform: translate(0,-50%); } .business_box .business ul li .left img{ width: 100%; } .business_box .business ul li .right{ float: right; width: 32%; padding: 10% 0; } .business_box .business ul li .right h1{ color: #333; font-size: 2rem; margin-bottom: 10px; } .business_box .business ul li .right p{ font-size: 1.5rem; margin-top: 12px; padding-left: 33px; padding-top: 3px; } .business_box .business ul:nth-of-type(2) .left{ right: 0; left: inherit; } .business_box .business ul:nth-of-type(2) .right{ float: left; } .business_box .business ul li .num{ position: absolute; top: 0; right: 24%; color: rgba(0,0,0,0.04); font-size: 21rem; font-weight: bold; line-height: 16rem; letter-spacing: 1px; } .business_box .business ul:nth-of-type(2) li .num{ left: 24%; } .business_box .product li{ margin-top: 2%; position: relative; width: 23.5%; margin-right: 2%; float: left; background: #f2f2f2; padding:3% 0 2% 0; } .business_box .product li .p_img{ position: relative; width: 60%; height: 220px; margin: auto; } .business_box .product li .p_img img{ position: absolute; width: 100%; left: 0; top: 0; transition: .5s; } .business_box .product li:nth-of-type(4n){ margin-right: 0; } .business_box .product li .text{ margin-top: 5%; } .business_box .product li .text h1{ color: #333; font-size: 1.7rem; text-align: center; margin-bottom: 2px; transition: .5s; } .business_box .product li .text .p_t{ position: relative; margin: auto; height: 30px; overflow: hidden; transition: .5s; } .business_box .product li .text .p_t h2{ color: #666; font-size: 1.4rem; margin-bottom: 10px; position: absolute; text-align: center; -webkit-transform: translate(-50%,0%); transform: translate(-50%,0%); top: 180%; left: 50%; width: 100%; opacity: 0; transition: .5s; } .business_box .product li:hover .text .p_t h2{ top: 0; opacity: 1; } .business_box .product li:hover img{ top: -5%; } .business_box .product li:hover h1{ color: #e62129; } .business_box .product li:hover .more{ background: #e62129; border: solid #e62129 1px; } .business_box .product li:hover .more i{ color: #fff; } .business_box .map{ margin-top: 2%; padding: 2% 0; } .business_box .map img{ width: 100%; } .pro{ margin-top: 4%; } .pro .left{ float: left; width: 50%; position: relative; overflow: hidden; } .pro .left ul img{ width: 100%; float: left; } .pro .left .n_btn { position: absolute; left: 50%; bottom: 2%; -webkit-transform: translate(-50%,0%); transform: translate(-50%,0%); } .pro .left .n_btn span { display: block; width: 10px; height: 10px; background-color: #666; margin: 4px; border-radius: 50%; float: left; cursor: pointer; } .pro .left .n_btn span.n_btn_active { box-sizing: border-box; background-color: #e62129; -webkit-transition: all .4s ease-in; transition: all .4s ease-in; } .pro .right{ float: right; width: 46%; margin-top: 4%; } .pro .right h1{ color: #2c367d; font-size: 2.6rem; position: relative; padding-bottom: 10px; } .pro .right h1:before{ content: ""; left: 0; position: absolute; bottom: 0; width: 40px; height: 2px; background: #e62129; } .pro .right p{ color: #666; font-size: 1.6rem; line-height: 26px; margin-top: 16px; text-indent: 0!important; } .pro .right .lx{ background: #2c367d; width: 110px; padding: 10px 22px; margin-top: 5%; transition: .5s; } .pro .right .lx h2{ color: #fff; font-size: 1.5rem; float: left; } .pro .right .lx .more{ float: right; width: 22px; height: 22px; } .pro .right .lx .more i{ color: #fff; } .pro .right .lx:hover{ background: #e62129; } .pro_box .search{ margin-top: 3%; padding-bottom: 2%; border-bottom: solid #eee 1px; } .pro_box .search .left{ float: left; width: 50%; position: relative; } .pro_box .search .left h1{ color: #333; font-size: 1.6rem; float: left; font-weight: bold; letter-spacing: 1px; } .pro_box .search input{ color: #666; font-size: 1.5rem; border: solid #eee 1px; padding: 2px 0 2px 10px; margin-left: 2%; width: 20%; } .pro_box .search img{ width: 18px; position: absolute; right: 74%; top: 50%; opacity: 0.4; -webkit-transform: translate(0,-50%); transform: translate(0,-50%); } .pro_box .search .right{ float: right; } .pro_box .search .right h1{ color: #333; font-size: 1.6rem; background: url(../image/back.png) no-repeat left; background-size: 27px; padding-left: 33px; padding-top: 5px; } .pro_box .search .left{ float: left; } .pro_box .search .left h1{ color: #2c367d; font-size: 2rem; font-weight: bold; background: url(../image/all.png) no-repeat left; background-size: 32px; padding-left: 44px; } .pro_box .spec{ margin-top: 1%; margin-bottom: 4%; } .pro_box .spec table{ width: 100%; } .pro_box .spec .r_bg{ width: 100%; background: #eee; cursor: pointer; -webkit-transition: 0.5s; transition: 0.5s; } .pro_box .spec .r_bg h1 { color: #2c367d; font-size: 1.8rem; line-height: 42px; text-align: center; } .pro_box .spec table tr{ border: solid #eee 1px; } .pro_box .spec table tr td{ padding: 10px 0; color: #666; background: #eee; font-size: 1.5rem; text-align: center; } .pro_box .spec table tr:nth-of-type(1) td{ font-size: 1.7rem; color: #333; } .inner_select{ margin-top: 5%; } .inner_select h5{ color: #333; font-size: 1.7rem; margin-bottom: 10px; } .inner_select ul{ background: #eee; padding: 1%; position: relative; } .inner_select ul li{ float: left; margin-right: 1%; width: 13%; } .inner_select ul li:nth-child(2){ width: 30%; } .inner_select ul li:nth-child(3){ width: 19%; } .inner_select ul li:nth-child(4){ width: 30%; } .inner_select ul li select{ padding: 2px 2px 11px 2px; width: 38px; line-height: 30px; } .inner_select ul li dt{ font-size: 1.5rem; color: #666; display: initial; margin-right: 5px; float: left; line-height: 30px; } .inner_select ul li input{ line-height: 1.6; padding: 3px 2px; font-size: 1.5rem; color: #333; width: 76%; float: right; } .inner_select ul li dl{ line-height: 30px; } .inner_select ul li input.inp1,.inner_select ul li input.inp4{ width: 42%; float: left; margin-right: 6px; } .inner_select ul li input.inp2,.inner_select ul li input.inp5{ float: right; width: 42%; } .inner_select ul li input.inp5{ margin-left: 6px; } .inner_select ul li input.inp3{ width: 66%; } .inner_select ul .submit{ line-height: 23px; color: #2c367d; font-size: 1.6rem; font-weight: bold; background: none; position: absolute; right: 1.6%; top: 50%; -webkit-transform: translate(0,-50%); transform: translate(0,-50%); }