/* CSS Document */
@font-face { src: url(../font/SourceHanSansCN-Regular.otf); font-family: "myfont"; }
* { padding: 0; margin: 0; border: none; outline: none; font-size: 12px; color: #666; list-style: none; font-family: "myfont", Arial, sans-serif; font-weight: normal; }
@font-face { font-family: 'iconfont'; src: url(../font/iconfont.eot); src: url(../font/iconfont.eot) format('embedded-opentype'),  url(../font/iconfont.woff) format('woff'),  url(../font/iconfont.ttf) format('truetype'),  url(../font/iconfont.svg) 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; }
p { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; list-style: none; font-size: 12px; line-height: 24px; }
article, aside, dialog, figure, footer, header, hgroup, menu, nav, dir, section { margin: 0; padding: 0; display: block; }
.clear { clear: both; }
a { text-decoration: none; }
/*index*/
.w_all { width: 94%; margin: auto; }
.w_all2 { width: 68%; margin: auto; }
html, body { width: 100%; position: relative; }
header { width: 100%; position: fixed; left: 0; top: 0; z-index: 999; }
header .nav { position: relative; }
header .logo { height: 48px; float: left; position: relative; padding: 20px 0; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; }
header .logo.active { padding: 12px 0; }
header .logo img { display: block; height: 100%; }
header .navBtn { display: none; }
header .nav { width: 55%; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
header .nav li { float: left; width: 12.5%; text-align: center; color: #fff; font-size: 1.32rem; position: relative; }
header .nav li:before { content: ""; width: 66px; height: 1px; background: #fff; position: absolute; left: 50%; bottom: -5px; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); opacity: 0; }
header .nav li.active:before { opacity: 1; }
header .h_other { position: absolute; right: 0%; top: 50%; -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); }
header .h_other .ll { float: left; margin-left: 20px; color: #fff; font-size: 1.1rem; }
header .h_other .ll i { color: #fff; font-size: 1.7rem; margin-right: 6px; float: left; }
header .h_other .ll.tel i { font-size: 1.5rem; }
/*banner*/
.banner { position: fixed; z-index: 0; left: 0; top: 0; width: 100%; height: 100%; }
.banner p { z-index: 999; }
.banner_bc { width: 100%; height: 100%; position: relative; }
.banner_bc .bc:before { content: ""; width: 100%; height: 100%; background: rgba(0,0,0,0.1); position: absolute; left: 0; top: 0; }
.banner_bc .bc { width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: none; }
.banner_bc .bc:first-of-type { display: block; }
.banner_nav { width: 100%; position: absolute; left: 0%; top: 0px; height: 100%; z-index: 4; }
.banner_nav .cl { width: 20%; height: 100%; background: rgba(0,0,0,0); float: left; box-sizing: border-box; border-left: 1px solid rgba(255,255,255,0.01); position: relative; }
.banner_nav a:first-of-type .cl { border: none; }
.banner_nav h1 { width: 60%; left: 20%; position: absolute; bottom: 40px; color: #fff; font-size: 1.6rem; padding: 5% 0; padding-top: 20px; -webkit-transition: all 0.4s linear; transition: all 0.4s linear; font-weight: bold; }
.banner_nav h1 b { display: block; width: 0; height: 1px; position: absolute; left: 0; top: 0; background: #df0024; }
.banner_nav .cl h1:hover { bottom: 60px; }
.banner_nav h1:before { content: ""; width: 100%; position: absolute; left: 0%; top: 0; background: #fff; height: 1px; }
.banner_nav h1:after { content: ""; width: 18px; height: 18px; background: url(../image/more2.png) no-repeat center center; position: absolute; left: -5px; bottom: -10px; -webkit-transition: all 0.5s linear; transition: all 0.5s linear; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); }
.banner_nav h1:hover:after { opacity: 1; bottom: -20px; }
.index_title { }
.index_title h2 { font-size: 1.16rem; color: #333; position: relative; letter-spacing: 1px; text-transform: uppercase; opacity: 0.4; }
.index_title h2:before { content: ""; width: 18%; height: 1px; background: #333; position: absolute; left: -19.5%; top: 10px; }
.index_title h1 { font-size: 2.4rem; color: #df0024; margin: 10px 0; font-weight: bold; }
.index_main { background: #fff; position: relative; z-index: 1; }
.index_bar1 { padding: 3% 0 10px; position: relative; text-align: center; }
.index_bar1 .index_title { opacity: 1; }
.index_bar1 .index_title h2:before { display: none; }
.index_bar1 .contain { position: relative; }
.index_bar1 .right { width: 720px; position: relative; opacity: 0; margin: auto; padding-top: 3%; -webkit-transition: all 0.4s linear; transition: all 0.4s linear; }
.index_bar1 .right img { width: 30%; position: absolute; left: 50%; top: 0%; opacity: 0.03; z-index: 0; -webkit-transform: translate(-40%, 0); transform: translate(-40%, 0); }
.index_bar1 .txt p { font-size: 1.1rem; color: #666; margin: 30px 0; line-height: 22px; overflow: hidden; }
.index_bar1 .right span { display: block; font-size: 1.2rem; color: #555; line-height: 46px; overflow: hidden; margin-top: 20px; }
.index_bar1 .right span img { float: left; width: 46px; margin-right: 10px; }
.index_bar1 .more1 { font-size: 1.1rem; color: #333; margin-left: 50px; opacity: 0; }
.index_bar1 .more1 i { margin-left: 10px; color: #333; font-size: 1.2rem; }
.index_bar1s { position: relative; opacity: 0; padding-top: 5%; }
.index_bar1s img { width: 100%; }
.index_bar3 { padding: 3% 0 5%; position: relative; text-align: center; opacity: 0; margin-top: 5%; }
.index_bar3 .index_title h2:before { display: none; }
.index_bar3 .right { width: 720px; position: relative; margin: auto; -webkit-transition: all 0.4s linear; transition: all 0.4s linear; }
.index_bar3 .txt p { font-size: 1.1rem; color: #333; margin: 30px 0; line-height: 22px; overflow: hidden; }
.index_bar3 .right span { display: block; font-size: 1.2rem; color: #555; line-height: 46px; overflow: hidden; margin-top: 20px; }
.index_bar3 .right span img { float: left; width: 46px; margin-right: 10px; }
.index_bar3 ul { margin-top: 3%; }
.index_bar3 ul li { width: 22.5%; margin-right: 3%; float: left; text-align: left; }
.index_bar3 ul li:nth-of-type(4) { margin-right: 0; }
.index_bar3 ul li b { display: block; width: 100%; overflow: hidden; }
.index_bar3 ul li img { display: block; width: 100%; -webkit-transition: all 0.4s linear; transition: all 0.4s linear; }
.index_bar3 ul li:hover img { -webkit-transform: scale(1.08); transform: scale(1.08); }
.index_bar3 ul li .txt2 { padding: 5% 0; border-bottom: 2px solid #eee; position: relative; }
.index_bar3 ul li .txt2:before { content: ""; width: 0; height: 2px; background: #df0024; position: absolute; left: 0; bottom: -2px; opacity: 0; -webkit-transition: all 0.6s linear; transition: all 0.6s linear; }
.index_bar3 ul li:hover .txt2:before { width: 100%; opacity: 1; }
.index_bar3 ul li .txt2 h3 { font-size: 1.3rem; color: #333; -webkit-transition: all 0.6s linear; transition: all 0.6s linear; }
.index_bar3 ul li:hover .txt2 h3 { color: #df0024; -webkit-transform: translateY(-3px); transform: translateY(-3px); }
.index_bar3 ul li .txt2 p { font-size: 1.2rem; color: #888; }
.index_bar3s { position: relative; opacity: 0; padding-top: 5%; }
.index_bar3s img { width: 100%; }
.index_bar2 { background: #f5f5f5; padding: 5% 0% 6%; position: relative; overflow: hidden; }
.index_bar2 .index_title h2:before { width: 15%; left: -16.5%; }
.index_bar2 .index_title h1 { position: relative; }
.index_bar2 .more1 { font-size: 1.2rem; color: #333; position: absolute; right: 50px; top: 0; }
.index_bar2 .more1 i { float: right; margin-left: 10px; margin-top: 2px; color: #333; }
.index_bar2 .contain { position: relative; }
.index_bar2 .b_box { position: relative; }
.index_bar2 dl { float: left; width: 29%; position: relative; }
.index_bar2 dl dd { width: 100%; cursor: pointer; margin: 2% 0; padding-bottom: 2%; }
.index_bar2 .txt h1 { font-size: 1.2rem; color: #333; overflow: hidden; width: 86%; border-bottom: 1px solid #eee; padding-bottom: 2%; text-overflow: ellipsis; white-space: nowrap; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; }
.index_bar2 .txt span { display: block; font-size: 1rem; color: #555; letter-spacing: 0.5px; margin-bottom: 5px; opacity: 0.8; }
.index_bar2 dl dd.active h1 { color: #df0024; font-size: 1.3rem; }
.index_bar2 dl dd:hover h1 { text-decoration: underline; color: #df0024; }
.index_bar2 .txt span img { display: block; float: left; width: 13px; margin-right: 5px; margin-top: 2px; }
.index_bar2 .box { float: right; width: 85%; overflow: hidden; margin-right: -14%; max-height: 430px; }
.index_bar2 ul li { float: left; width: 50%; cursor: pointer; }
.index_bar2 ul li b { display: block; width: 98%; margin: auto; position: relative; overflow: hidden; -webkit-transition: all 0.5s linear; transition: all 0.5s linear; }
.index_bar2 ul li b img { display: block; width: 100%; }
.index_bar2 ul li:hover b { -webkit-transform: translateY(-5px); transform: translateY(-5px); }
.index_bar2 ul li b .v_btn { width: 42px; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -55%); transform: translate(-50%, -55%); }
.index_bar2 .btn { position: absolute; right: -14%; top: 0%; z-index: 9; background: #f5f5f5; width: 18%; height: 100%; }
.index_bar2 .btn .ll { position: absolute; left: -80px; bottom: 0; border: 2px solid #222; width: 80px; height: 80px; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; }
.index_bar2 .btn .ll i { display: block; font-size: 2.4rem; color: #fff; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.index_bar2 .btn .b_left{ background: #df0024;border: 2px solid #df0024; }

.index_bar2 .btn .b_right { left: 0; background: #222; }
.index_bar2 .btn .b_right i { -webkit-transform: translate(-50%, -50%) rotate(180deg); transform: translate(-50%, -50%) rotate(180deg); }
.index_bar2 .n_btn { margin-top: -30px; }
.index_bar2 .n_btn span { float: left; display: block; width: 8px; height: 8px; margin: 5px 10px; border-radius: 50%; background: #333; opacity: 0.6; }
.index_bar2 .n_btn span.active { -webkit-transform: scale(1.3); transform: scale(1.3); opacity: 1; }
.index_bar4 { background: #f5f5f5; border-top: 1px solid #ddd; z-index: 1; position: relative; }
.index_bar4 ul { width: 84%; position: relative; }
.index_bar4 ul:before { content: ""; width: 1px; height: 22%; position: absolute; left: 50%; top: -22%; background: #ddd; margin-left: -1px; display: none; }
.index_bar4 ul li { float: left; width: 25%; text-align: center; padding: 6% 0; border-right: 1px solid #ddd; box-sizing: border-box; margin-top: 3%; opacity: 0; }
.index_bar4 ul li:last-of-type { border: none; }
.index_bar4 ul li b { font-size: 1.1rem; color: #333; display: block; position: relative; text-transform: uppercase; margin-bottom: 20px; }
.index_bar4 ul li span { display: block; width: 60px; height: 60px; position: relative; overflow: hidden; margin: auto; }
.index_bar4 ul li span img { position: absolute; top: 0; left: 0; width: 100%; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
.index_bar4 ul li:hover span img { top: -60px; }
.index_bar4 ul li h1 { font-size: 2rem; }
.index_bar4 ul li p { font-size: 1.2rem; color: #111; position: relative; padding-top: 3%; }
.index_bar4 ul li p:before { content: ""; position: absolute; width: 40px; height: 1px; background: #df0024; left: 50%; top: 0; -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); }
.more { width: 160px; padding: 10px; margin: auto; border: 1px solid #ccc; margin-top: 8%; color: #333; display: none; }
.footer { position: relative; z-index: 3; padding: 3% 0 0; background: #222; }
.footer .wx2 { display: none; }
.footer dl { float: left; width: 13.3%; }
.footer dl:last-of-type { float: right; width: 20%; position: relative; }
.footer dl dt { font-size: 1.4rem; color: #fff; margin-bottom: 15px; letter-spacing: 1px; position: relative; padding-bottom: 8px; }
.footer dl dt:before { content: ""; width: 14px; height: 2px; background: #df0024; position: absolute; left: 0; bottom: -5px; }
.footer dl dd { font-size: 1rem; line-height: 20px; margin: 5px 0; color: #ccc; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; }
.footer dl a:hover dd { text-decoration: underline; color: #df0024; }
.footer dl p { color: #eee; font-size: 1.1rem; }
.footer dl b { color: #eee; font-size: 1rem; }
.footer dl strong { color: #be1a20; }
.footer .wx { position: absolute; left: 0; bottom: -80px; padding: 3px; background: #333; border-radius: 50%; overflow: hidden; }
.footer .wx img.tb { width: 18px; display: block; }
.footer .wx img.ewm { position: absolute; left: 50%; margin-left: -60px; top: -120px; width: 120px; opacity: 0; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; }
.footer .wx:hover { overflow: inherit; background: #df0024; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; }
.footer .wx:hover .ewm { opacity: 1; top: -130px; }



.footer .copy { margin-top: 1%; border-top: 1px solid rgba(255,255,255,0.03); padding: 10px 0; }
.footer .copy p { color: #fff; float: left; line-height: 36px; opacity: 0.6; }
.footer .copy a { color: #fff; margin-left: 20px; }
.footer .copy ul { float: right; }
.footer .copy ul li { float: left; height: 36px; margin: 0px 4px; opacity: 0.8; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; }
.footer .copy ul li img { display: block; height: 100%; }
.footer .copy ul li:hover { opacity: 1; }
.all_back { position: absolute; right: 10px; bottom: 90px; cursor: pointer; }
.all_back i { color: #df0024; font-size: 32px; display: block; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); }
.all_back:before { content: "TOP"; position: absolute; left: 2px; top: 0px; color: #df0024; opacity: 0; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; }
.all_back:hover:before { opacity: 1; top: -15px; }
.o_ban { width: 100%; position: relative; }
.o_ban img { width: 100%; display: block; }
.o_ban p { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -45%); transform: translate(-50%, -45%); font-size: 1.5rem; color: #fff; text-align: center; letter-spacing: 1px; }
.o_ban .v_btn { width: 56px; margin: 0 auto 20px; display: block }
.o_ban p strong { display: block; font-size: 1.2rem; color: #fff; opacity: 0.8; letter-spacing: 0; }
.normals .top { background: #eee; padding: 40px 0; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; }
.normals .top p { float: left; font-size: 1.4rem; margin-right: 5%; color: #333; }
.normals .top p.active { color: #df0024; font-size: 2rem; }
.normals .top_a { padding: 30px 0; position: static; top: inherit; left: inherit }
.normals .top_a.active { position: fixed; top: 72px; left: 0; width: 100%; z-index: 99; padding: 20px 0 }
.normals .top_a p { font-size: 1.2rem; }
.about .bar0 { position: relative; padding: 4% 0 5%; }
.about .bar0 h1 { font-size: 1.2rem; text-align: center; color: #333; }
.about .bar0 h1 strong { display: block; font-size: 2.2rem; text-align: center; color: #df0024; margin-bottom: 10px; }
.about .bar0 ul { margin-top: -3%; }
.about .bar0 ul li { position: relative; width: 100%; height: 100%; margin-top: 8%; }
.about .bar0 ul li b { display: block; width: 60%; position: absolute; left: 0; top: 0; height: 100% }
.about .bar0 ul li:nth-of-type(2n) b { left: inherit; right: 0; }
.about .bar0 ul li .right { float: right; width: 35%; padding: 5% 0; }
.about .bar0 ul li:nth-of-type(2n) .right { float: left; }
.about .bar0 ul li .right .txt p { font-size: 1.1rem; margin: 10px 0; }
.about .bar0 ul li:nth-of-type(1) .right .txt p { font-size: 1.16rem; }
.about .bar0 ul li .right .txt p strong { font-size: 1.7rem; color: #111; display: block; margin-bottom: 20px; }
.about2 ul { position: relative; }
.about2 ul:before { content: ""; width: 1px; height: 100%; position: absolute; left: 50%; top: 0; background: #ddd; z-index: 9; }
.about2 ul li { position: relative; width: 100%; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; }
.about2 ul li:last-of-type { padding-bottom: 2%; }
.about2 ul li:first-of-type { padding-top: 2%; }
.about2 ul li .box { position: relative; padding: 3% 0; }
.about2 ul li:hover { background: #f8f8f8; }
.about2 ul li span { line-height: 60px; text-align: center; width: 60px; height: 60px; position: absolute; left: 50%; top: 50%; background: #eee; border-radius: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 1.3rem; color: #333; z-index: 10; }
.about2 ul li:hover span { background: #df0024; color: #fff; }
.about2 ul li .left { position: absolute; left: 0; top: 50%; -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); width: 42%; }
.about2 ul li:nth-of-type(2n) .left { left: inherit; right: 0; }
.about2 ul li .left strong { display: block; font-size: 1.3rem; color: #333; float: left; position: absolute; left: 0; top: -2px; }
.about2 ul li .left p { font-size: 1.1rem; color: #555; padding-left: 15%; position: relative; line-height: 1.6; margin: 6px 0; }
.about2 ul li .left p:before { content: ""; width: 5%; height: 1px; background: #333; position: absolute; left: 38px; top: 10px; }
.about2 ul li .right { float: right; width: 42%; }
.about2 ul li:nth-of-type(2n) .right { float: left; }
.about2 ul li .right img { display: block; width: 100%; -webkit-transition: all 0.5s linear; transition: all 0.5s linear; }
.about2 ul li:hover .right img { -webkit-transform: translateY(-5px); transform: translateY(-5px); }
.about3 .box { position: relative; height: 100%; margin: 5% auto; }
.about3 .left { position: absolute; left: 0; top: 0; height: 100%; width: 50%; }
.about3 .right { float: right; width: 40%; padding: 10% 0; }
.about3 .right p { font-size: 1.16rem; color: #333; margin: 10px 0; }
.about3 .right h3 { font-size: 1.6rem; color: #df0024; position: relative; margin-top: 15%; }
.about3 .right h3:before { content: ""; position: absolute; left: -30%; top: 12px; height: 1px; width: 25%; background: #df0024; }
.about4 ul { position: relative; padding: 0% 0 5%; }
.about4 ul:before { content: ""; width: 1px; height: 100%; position: absolute; left: 50%; top: 0; background: #ddd; z-index: 9; }
.about4 ul li { position: relative; width: 100%; margin-top: 120px; }
.about4 ul li:before { content: ""; width: 10px; height: 10px; position: absolute; right: -5px; top: 9px; background: #ddd; border-radius: 50%; z-index: 10; }
.about4 ul li:hover span { background: #df0024; color: #fff; }
.about4 ul li { float: left; width: 47%; padding: 0 3% 0 0; text-align: right; }
.about4 ul li:nth-of-type(2n) { float: right; margin-top: 30px; padding: 0 0 0 3%; text-align: left; margin-top: 40px; }
.about4 ul li:nth-of-type(2) { margin-top: 210px; }
.about4 ul li:nth-of-type(4) { margin-top: 60px; }
.about4 ul li:nth-of-type(2n) h2 { margin-left: -6%; float: left; padding-left: 5.5%; }
.about4 ul li:nth-of-type(2n):before { right: inherit; left: -5px; }
.about4 ul li p { font-size: 1.1rem; color: #333; margin: 3px auto; position: relative; padding-left: 10px; line-height: 1.5; display: inline-block; }
.about4 ul li p:before { width: 2px; height: 2px; border-radius: 50%; position: absolute; left: 0; top: 8px; content: ""; background: #666; }
.about4 ul li h2 { font-size: 2rem; color: #df0024; position: relative; border-bottom: 1px solid #ddd; padding-bottom: 5px; margin-bottom: 20px; width: 50px; margin-top: -28px; padding-right: 5.5%; float: right; margin-right: -6%; }
.about5 .bar0 .box { position: relative; height: 100%; margin: 5% auto; }
.about5 .bar0 .left { position: absolute; left: 0; top: 0; height: 100%; width: 50%; }
.about5 .bar0 .right { float: right; width: 40%; padding: 10% 0; }
.about5 .bar0 .right .p { font-size: 1.2rem; color: #333; margin: 10px 0; text-decoration: underline; cursor: pointer; }
.about5 .bar0 .right h3 { font-size: 2.2rem; color: #df0024; position: relative; margin-bottom: 5%; }
.about5 .bar0 .right h3:before { content: ""; position: absolute; left: -30%; top: 16px; height: 1px; width: 25%; background: #df0024; }
.about5 .bar1 { position: relative; padding: 4% 0; background: #f9f9f9; }
.about5 .bar1 h1 { font-size: 1.2rem; text-align: center; color: #333; }
.about5 .bar1 h1 strong { display: block; font-size: 2.2rem; text-align: center; color: #df0024; margin-bottom: 10px; }
.about5 .bar1 ul li { float: left; width: 33.3%; margin-top: 3%; }
.about5 .bar1 ul li h2 { background: #ddd; padding: 14px 10% 14px 12%; position: relative; font-size: 1.6rem; color: #df0024; }
.about5 .bar1 ul li h2 strong { font-size: 1.2rem; color: #333; margin-left: 10px; letter-spacing: 0.5px; }
.about5 .bar1 ul li h2:before { content: ""; width: 40px; height: 40px; position: absolute; right: -20px; top: 8px; -webkit-transform: rotate(45deg); transform: rotate(45deg); background: #ddd; border-top: 1px solid #fff; border-right: 1px solid #fff; z-index: 5; }
.about5 .bar1 ul li h2:after { content: ""; width: 5px; height: 5px; border-radius: 50%; position: absolute; left: 11%; top: 26px; background: #df0024; display: none; }
.about5 .bar1 ul li p { padding: 3% 8% 3% 18%; font-size: 1.1rem; color: #555; position: relative; line-height: 1.6; }
.about5 .bar1 ul li p:after { content: ""; width: 1px; height: 110%; border-radius: 50%; position: absolute; left: 14%; top: -12px; background: #df0024; opacity: 0.4; }
.about5 .bar2 { position: relative; }
.about5 .bar2 img { display: block; width: 100%; }
.about5 .bar2 p { position: absolute; left: 50%; top: 50%; width: 50%; text-align: center; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 2rem; color: #fff; letter-spacing: 1px; text-shadow: 0 0 5px rgba(0,0,0,0.2); }
.about5 .bar3 .box { position: relative; height: 100%; margin: 5% auto; }
.about5 .bar3 ul li { position: absolute; left: 0; top: 0; height: 100%; width: 50%; display: none; }
.about5 .bar3 .right { float: right; width: 40%; padding: 5% 0; }
.about5 .bar3 .right h3 { font-size: 1.2rem; color: #333; position: relative; cursor: default; margin: 10px 0; }
.about5 .bar3 .right h3:before { content: ""; position: absolute; left: -30%; top: 16px; height: 1px; width: 0; background: #df0024; opacity: 0; -webkit-transition: all 0.5s linear; transition: all 0.5s linear; }
.about5 .bar3 .right h3.active { font-size: 2.2rem; color: #df0024; }
.about5 .bar3 .right h3.active:before { opacity: 1; width: 25%; }
.about5 .bar3 li p { font-size: 1.6rem; color: #fff; position: absolute; left: 50%; width: 80%; bottom: 5%; -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); text-align: center; letter-spacing: 1px; }
.about5 .bar4 { position: relative; }
.about5 .bar4 ul li { position: relative; width: 33.3%; border-right: 1px solid rgba(255,255,255,0.3); box-sizing: border-box; float: left; padding: 10% 0; }
.about5 .bar4 ul li:before { content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(0,0,0,0.1); }
.about5 .bar4 li h2 { font-size: 2rem; color: #fff; width: 90%; margin: auto; text-align: center; letter-spacing: 1px; margin-bottom: 20px; padding-bottom: 40px; position: relative; z-index: 2; }
.about5 .bar4 li h2:before { content: ""; width: 1px; height: 30px; position: absolute; left: 50%; bottom: 0; background: #fff; text-shadow: 0 0 5px rgba(0,0,0,0.3); }
.about5 .bar4 li p { font-size: 1.2rem; color: #fff; width: 90%; margin: auto; text-align: center; position: relative; z-index: 2; height: 72px; text-shadow: 0 0 5px rgba(0,0,0,0.3); }
.about5 .bar5 { position: relative; padding: 4% 0 6%; }
.about5 .bar5 .box { overflow: hidden; position: relative; }
.about5 .bar5 ul li { text-align: center; width: 100%; float: left; }
.about5 .bar5 h1 { font-size: 2.2rem; color: #df0024; text-align: center; margin-bottom: 20px; }
.about5 .bar5 h2 { font-size: 1.6rem; color: #333; }
.about5 .bar5 p { font-size: 1.1rem; margin: auto; margin-top: 10px; width: 80%; }
.about5 .bar5 dl { position: absolute; left: 50%; bottom: 50px; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); }
.about5 .bar5 dl dd { width: 8px; height: 8px; border: 1px solid #333; border-radius: 50%; margin: 8px; float: left; }
.about5 .bar5 dl dd.active { background: #333; }
.about5 .bar5 .btn .ll { position: absolute; left: 0; top: 50%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); }
.about5 .bar5 .btn .ll i { font-size: 2rem; }
.about5 .bar5 .btn .b_right { left: inherit; right: 0; -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.about7.news .bar1 dl { border: none; }
.about7.news .bar1 dl dd { cursor: default; }
.about7 .bar1 dt { text-align: center; padding: 2% 8% 1% 0; font-size: 1.16rem; color: #555; position: relative; }
.about7 .bar1 dt img { width: 72px; margin-top: -3px; margin-right: 20px; float: left; opacity: 0.1; }
.about7 .bar1 dt img:last-of-type { -webkit-transform: rotate(180deg); -webkit-transform: rotate(180deg); position: absolute; right: -20px; top: 1.5%; }
/*详情*/
.xq_boxs { width: 80%; height: 60%; position: fixed; top: 50%; left: 50%; background: rgba(0,0,0,0.5); z-index: 6; display: none; cursor: default; padding: 10%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.xq_boxs .b_imgs { display: block; width: 50%; height: 100%; float: left; }
.xq_boxs .xq_box_right { width: 50%; height: 100%; float: right; position: relative; background: #fff; }
.xq_boxs .xq { width: 100%; height: 80%; position: absolute; left: 10%; top: 10%; }
#boxscroll2 { width: 80%; overflow: hidden; height: 90%; padding-right: 10%; }
.xq_boxs .close img { width: 40px; position: absolute; right: -20px; top: -20px; -webkit-transition: all .5s; transition: all .5s; z-index: 7000; opacity: 0; cursor: pointer; }
.xq_boxs .close img:hover { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.xq_boxs .xq_box_right h2 { font-size: 2rem; color: #333; margin-bottom: 10px; }
.xq_boxs .xq_box_right p { font-size: 1.12rem; color: #555; margin: 10px 0; }
.xq_boxs .imgs2 { width: 100%; position: relative; background: #fff; }
.xq_boxs .imgs2 .box { width: 100%; position: relative; overflow: hidden; cursor: move; }
.xq_boxs .imgs2 .box img { float: left; width: 33.3%; border-right: 2px solid #f6f6f6; box-sizing: border-box; -webkit-transition: all 0.5s linear; transition: all 0.5s linear; }
.xq_boxs .imgs2 .box img:hover { -webkit-transform: translateY(2px); transform: translateY(2px); z-index: 3; }
.xq_boxs .imgs2 i { position: absolute; left: -8%; top: 50%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); color: #fff; font-size: 3rem; display: block; z-index: 9; cursor: pointer; }
.xq_boxs .imgs2 i:nth-of-type(2) { -webkit-transform: rotate(180deg); transform: rotate(180deg); left: inherit; right: -8%; }
.xq_boxs .imgs { display: block; width: 85%; margin: auto; position: relative; }
.xq_boxs .imgs > img { display: block; width: 100%; margin: auto; margin-top: -3.5%; }
.news .bar0 { margin-bottom: 10%; position: relative; }
.news .bar0 ul { float: left; width: 42%; margin-top: 4%; }
.news .bar0 ul li { font-size: 1.24rem; color: #555; margin: 15px 0; border-bottom: 1px solid #f8f8f8; padding-bottom: 15px; cursor: pointer; }
.news .bar0 ul li strong { margin-right: 10px; font-size: 1.2rem; color: #333; font-weight: bold; letter-spacing: 0.5px; }
.news .bar0 ul li.active { color: #df0024; }
.news .bar0 .box { position: absolute; right: 0; width: 50%; height: 100%; }
.news .bar0 .box img { display: block; width: 100%; position: absolute; left: 0; top: 0; display: none; box-shadow: 0 2px 14px rgba(0,0,0,0.05); }
.news .bar1 dl { border-top: 1px solid #ddd; padding: 2% 0 3%; }
.news .bar1 dd { float: left; width: 31.3%; margin-right: 3%; margin-top: 3%; cursor: pointer; }
.news .bar1 dd:nth-of-type(3n) { margin-right: 0; }
.news .bar1 dd b { display: block; width: 100%; margin-bottom: 20px; overflow: hidden; }
.news .bar1 dd b img { display: block; width: 100%; -webkit-transition: all 0.5s linear; transition: all 0.5s linear; }
.news .bar1 dd:hover b img { -webkit-transform: translateY(-5px); transform: translateY(-5px); }
.news .bar1 dd strong { float: left; font-size: 1.5rem; font-weight: bold; position: relative; color: #333; margin-top: -3px; }
.news .bar1 dd strong:before { content: ""; width: 40px; height: 1px; background: #333; position: absolute; right: -50px; top: 14px; }
.news .bar1 dd span { display: block; letter-spacing: 1px; font-size: 1rem; }
.news .bar1 dd h2 { width: 70%; float: right; font-size: 1.26rem; color: #333; height: 66px; overflow: hidden; line-height: 22px; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; }
.news .bar1 dd:hover h2 { color: #df0024; }
.news .pages { text-align: center; margin-top: 3%; padding-top: 15px; border-top: 1px solid #eee; }
.news .pages a { font-size: 1.1rem; color: #333; margin: 0 5px; line-height: 20px; }
.news .pages span { font-size: 1.2rem; color: #df0024; margin: 0 8px; text-decoration: underline; font-weight: bold; }
.news .rows b { margin: 0 5px; }
.header_o { background: #222; }
.news_d { padding-top: 88px; }
.news_d .top { padding: 25px 0; background: #f5f5f5; }
.news_d .top .a1 { font-size: 1.1rem; color: #df0024; }
.news_d .top .a1:hover { text-decoration: underline; }
.news_d .top i { font-size: 1.5rem; color: #df0024; float: left; margin-right: 5px; }
.news_d .top .a2 { float: right; font-size: 1.2rem; color: #333; opacity: 0.6; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; }
.news_d .top .a2 i { float: right; margin: 0px 0 0 8px; color: #333; font-size: 1.8rem; }
.news_d .top .a2:hover { opacity: 0.9; }
.news_d .contain { margin: 3% auto 5%; }
.news_d .contain h1 { font-size: 2rem; color: #333; }
.news_d .contain h2 { font-size: 1rem; margin: 5px 0 30px; border-bottom: 4px solid #f6f6f6; padding-bottom: 20px; letter-spacing: 0.5px; }
.news_d .contain h2 img { width: 14px; display: block; float: left; margin-right: 5px; margin-top: 1px; }
.news_d .contain img, .news_d .contain p img { display: block; max-width: 100%; }
.news_d .contain p { margin: 6px 0; font-size: 1.2rem; color: #555; line-height: 20px; }
.news_d .contain video { max-width: 100%; }
.video.news .bar1 dl { border: none; }
.video.news .bar1 dd { width: 47%; margin-right: 6%; position: relative; }
.video.news .bar1 a:nth-of-type(3n) dd { margin-right: 6%; }
.video.news .bar1 a:nth-of-type(2n) dd { margin-right: 0; }
.video dd b { position: relative; }
.video dd .v_btn { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 50px !important; display: block; }
.video.news .bar1 dd:hover b .v_btn { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.video.news .bar1 dd h2 { width: 88%; padding-left: 12%; position: relative; }
.video.news .bar1 dd h2:before { content: ""; width: 10%; height: 1px; background: #333; position: absolute; left: 0%; top: 10px; overflow: inherit; }
.click_video { cursor: pointer; }
.video_box { width: 80%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%) }
.video_close img { display: block; width: 40px; position: absolute; top: -20px; right: -20px; cursor: pointer; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; }
.video_close:hover img { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.pro { width: 100%; height: 100%; }
.pro .bars { width: 100%; height: 100%; position: relative; cursor: pointer; }
.pro .bars p { position: absolute; left: 50%; top: 90%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #fff; font-size: 2.4rem; letter-spacing: 1px; text-shadow: 0 0 5px rgba(0,0,0,0.1); margin-left: 20px; -webkit-transition: all 0.5s linear; transition: all 0.5s linear; }
.pro .bars p i { color: #fff; font-size: 2rem; margin-left: 30px; -webkit-transform: rotate(180deg); transform: rotate(180deg); display: block; float: right; opacity: 0; -webkit-transition: all 0.6s linear; transition: all 0.6s linear; }
.pro .bars:hover p { margin-left: 0; }
.pro .bars:hover p i { opacity: 1; margin-left: 10px; }
.map { width: 100%; position: relative; }
.map img { width: 100%; }
.map .map_p { display: none; }
.contact .top { width: 100%; background: #fff; padding: 0; }
.contact .top .txt { background: #fff; }
.contact .top .txt .t1:hover { background: #eee; }
.contact .top .txt .t1 { width: 33.3%; float: left; border-bottom: 1px solid #eee; border-right: 1px solid #eee; padding: 3%; box-sizing: border-box; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; cursor: default; }
.contact .top .txt .t1 h1 { font-size: 1.6rem; color: #333; margin-bottom: 10px; }
.contact .top .txt .t1 h2 { font-size: 1.12rem; color: #666; margin: 3px 0; }
.contact .top .txt .t1 h2 strong { font-size: 1.2rem; color: #333; }
.contact .con1 { position: absolute; left: 50%; top: 60%; background: #fff; padding: 2.5% 2.5% 1.6% 2.5%; margin-left: -321px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); opacity: 0; }
.contact .con1 h1 { font-size: 1.8rem; color: #df0024; margin-bottom: 15px; }
.contact .con1 h1 { float: left; width: 130px; border-right: 1px solid #eee; margin-right: 30px }
.contact .con1 h1 img { width: 100%; }
.contact .con1 .t2 { float: right; }
.contact .con1 p { font-size: 1.14rem; color: #333; margin-top: 5px; }
.contact .con1 i { float: left; margin-right: 8px; color: #df0024; font-size: 1.7rem; }
.contact .con1 p a, .contact .con1 p strong { font-size: 1.14rem; color: #333; text-decoration: underline; cursor: pointer; }
.contact .con1 p:nth-of-type(2) i { font-size: 1.6rem; }
.contact .con1 p:nth-of-type(3) i { font-size: 1.82rem; margin-left: -1px; }
.contact .con1 p >img { display: block; float: left; width: 18px; margin-right: 8px; margin-top: 4px; margin-left: 1px; }
.contact .xq { width: 80%; }
.contact .xq .inf { width: 46%; float: left; position: relative; margin: 3% 2% 0 0; }
.contact .xq input { z-index: 2; border-color: #fff; border: none; background-color: transparent; padding-left: 0; display: block; width: 100%; border-bottom: 1px solid #ddd; line-height: 36px; box-shadow: none; border-radius: 2px; color: #333; font-size: 1.2rem; padding: 3px; }
.contact .xq .inf.yzm { width: 96%; }
.contact .xq .inf.yzm img { position: absolute; right: 0; bottom: 6px; width: 160px; }
.contact .xq textarea { z-index: 2; border-color: #fff; border: none; background-color: transparent; display: block; width: 94%; margin: 6% auto 0; border: 1px solid #ddd; line-height: 32px; box-shadow: none; border-radius: 2px; color: #333; font-size: 15px; padding: 2% 3%; height: 160px; background: #eee; }
.contact .xq span { z-index: 3; pointer-events: none; position: absolute; -webkit-transition: all 0.3s; transition: all 0.3s; top: 6px; left: 0; font-size: 14px; display: block; font-weight: normal; }
.contact .xq span.active { color: #75bfe4; top: -15px; font-size: 1.3rem; letter-spacing: 0.5px }
.contact .xq h3 { font-size: 24px; color: #111; text-align: center; }
.contact .xq p { font-size: 1.2rem; color: #555; margin: 5px 0; }
.contact .xq .submit { text-align: center; color: #333; font-size: 13px; margin: 5% 0 6%; cursor: pointer; width: 130px; border: 1px solid #888; line-height: 32px; border-radius: 3px; position: relative; -webkit-transition: all 0.3s; transition: all 0.3s; }
.contact .xq .submit:hover { background: #df0024; color: #fff; border: 1px solid #df0024; }
.area.about5 .bar0 .left { width: 78%; }
.area.about5 .bar0 .right { width: 15%; padding: 15% 0; }
.area.about5 .bar0 .right h3 { margin-bottom: 5px; }
.area.about5 .bar0 .right h3:before { width: 50%; left: -60%; }
.area .bar0 .right h4 { font-size: 1.12rem; margin-bottom: 20px; }
.area .top p { cursor: pointer; }
.area .bar0 .right .p:hover { color: #df0024; }
.area .bar0:nth-of-type(2n+1) .left { left: inherit; right: 0; }
.area .bar0:nth-of-type(2n+1) .right { float: left; text-align: right; }
.area .bar0:nth-of-type(2n+1) .right h3:before { left: inherit; right: -60%; }
.pro_d .bc { position: fixed; width: 100%; height: 100%; left: 0; top: 0; }
.pro_d .bc:before { content: ""; width: 100%; height: 100%; background: rgba(0,0,0,0.5); left: 0; top: 0; position: absolute; z-index: 2; }
.pro_d .close img { position: fixed; top: 10%; width: 36px; right: 2%; z-index: 8; opacity: 0; cursor: pointer; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; }
.pro_d .close:hover img { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.pro_d .img_boxs { width: 76%; position: relative; z-index: 4; margin: 6% auto 3%; }
.pro_d .img_boxs li { float: left; width: 32%; display: block; margin-right: 2%; margin-bottom: 2%; overflow: hidden; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; }
.pro_d .img_boxs li:nth-of-type(3n) { margin-right: 0; }
.pro_d .img_boxs li img { display: block; width: 100%; -webkit-transition: all 0.8s linear; transition: all 0.8s linear; }
.pro_d .img_boxs li:hover { -webkit-transform: translateY(-5px); transform: translateY(-5px); box-shadow: 0 5px 10px rgba(0,0,0,0.2) }
.pro_d .img_boxs li:hover img { -webkit-transform: scale(1.04); transform: scale(1.04); }
.p_nav { position: fixed; left: 0%; top: 50%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); }
.p_nav span { display: block; margin: 10px 0; color: #fff; font-size: 1rem; position: relative; padding-left: 30px; opacity: 0.7; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; }
.p_nav span > a { color: #fff; font-size: 1.1rem; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; }
.p_nav span:hover { opacity: 1; }
.p_nav span:before { content: ""; width: 20px; height: 1px; position: absolute; left: 0px; top: 8px; background: #fff; opacity: 0.7; }
.p_nav span.active { padding-left: 40px; opacity: 1; }
.p_nav span.active a { font-size: 1.3rem; }
.p_nav span.active:before { width: 30px; opacity: 1; top: 12px; }
.p_nav span b { margin: 5px 0; display: block; display: none; }
.p_nav span strong { color: #fff; font-size: 1.02rem; display: block; line-height: 24px; opacity: 0.8; position: relative; letter-spacing: 0.5px; }
.p_nav span strong:before { content: ""; width: 4px; height: 4px; position: absolute; left: 35px; top: 12px; background: #fff; opacity: 0; border-radius: 50%; }
.p_nav span strong.active { opacity: 1; }
.p_nav span strong.active:before { opacity: 1; }
.btns { text-align: center; }
.btns a { width: 18px; height: 18px; display: inline-block; margin: 8px; color: #fff; font-size: 1rem; padding: 2px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); -webkit-transition: all 0.3s linear; transition: all 0.3s linear; cursor: pointer; }
.btns .current, .btns span:hover { background: #fff; color: #333; width: 18px; height: 18px; display: inline-block; margin: 8px; font-size: 1rem; padding: 2px; border-radius: 50%; cursor: pointer; }
.pro_d .img_boxs .btns li, .btns a.next, .btns a.prev { display: none; }
.join .top p { cursor: pointer; }
.join .bar0 { padding: 5% 0; }
.join .bar0 .box { position: relative; height: 100%; }
.join .bar0 .left { position: absolute; left: 0; top: 0; height: 100%; width: 78%; }
.join .bar0 .right { float: right; width: 15%; padding: 10% 0; }
.join .bar0 .right h3 { font-size: 2.2rem; color: #df0024; position: relative; margin-bottom: 5px; }
.join .bar0 .right h3:before { content: ""; position: absolute; width: 50%; left: -60%; top: 16px; height: 1px; background: #df0024; }
.join .bar0 .right span { font-size: 1.2rem; color: #888; margin-right: 15px; position: relative; padding-left: 10px; cursor: default; }
.join .bar0 .right span:before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: #888; position: absolute; left: 0; top: 7px; }
.join .bar0s .tl { position: relative; margin-top: 10px; }
.join .bar0s .tl p { position: absolute; left: 0; top: 0; opacity: 0; font-size: 1.1rem; color: #333; margin: 10px 0; line-height: 22px; }
.join .bar0s .tl p:first-of-type { opacity: 1; position: relative; }
.join .bar0:nth-of-type(3) { padding: 0% 0 5%; position: relative; }
.join .bar0:nth-of-type(3):before { content: ""; background: #f6f6f6; position: absolute; left: 0; top: 13%; width: 50%; height: 100%; }
.join .bar0:nth-of-type(3) .left { left: inherit; right: 0; width: 50%; height: 120%; }
.join .bar0:nth-of-type(3) .right { float: none; padding: 5% 5% 4%; background: #fff; width: 50%; position: relative; z-index: 6; box-shadow: 0 2px 5px rgba(0,0,0,0.02); }
.join .bar0:nth-of-type(3) .right h3 { margin-bottom: 15px; }
.join .bar0:nth-of-type(3) .right h3:before { left: inherit; right: -20%; }
.join .bar0:nth-of-type(3) h2 { line-height: 20px; color: #666; font-size: 1.14rem; margin-bottom: 30px; }
.join .bar0:nth-of-type(3) p img { display: block; position: absolute; left: 0; top: 0px; width: 15px; border-radius: 50%; overflow: hidden; border: 1px solid #555; padding: 2px; }
.join .bar0:nth-of-type(3) p { font-size: 1.2rem; color: #333; padding-left: 28px; position: relative; margin: 5px 0; }
.join .bar0:nth-of-type(3) p strong { font-size: 1.24rem; color: #333; font-weight: bold; }
.join .bar0:nth-of-type(4) { padding: 9% 0 5%; }
.join .bar0:nth-of-type(4) .left { width: 40%; }
.join .bar0:nth-of-type(4) .right { width: 50%; padding: 8% 0; }
.join .bar0:nth-of-type(4) .right h3:before { left: -26%; width: 22%; }
.join .bar0:nth-of-type(4) .right p { position: relative; padding-left: 12px; margin: 3px 0; }
.join .bar0:nth-of-type(4) .right p:before { content: ""; width: 3px; height: 3px; position: absolute; left: 0; top: 11px; background: #333; border-radius: 50% }
.join .index_bar4 { border: none; }
.join .index_bar4 ul { width: 72%; }
.join .index_bar4 li { opacity: 1; margin-top: 0; padding: 10% 0; border-right: 1px solid #e6e6e6; }
.join .index_bar4 ul li span img { top: -60px; }
.join .index_bar4 ul li h1 { font-size: 1.6rem; color: #333; }
.join .index_bar4 li p { width: 80%; margin: auto; font-size: 1.1rem; line-height: 20px; }
.join #j5 .left { width: 50%; }
.join #j5 .right { width: 42%; padding: 6% 0; }
.join #j5 .right h3:before { left: -26%; width: 22%; }
.join #j5 .right p { position: relative; padding-left: 12px; margin: 3px 0; }
.join #j5 .right p:before { content: ""; width: 3px; height: 3px; position: absolute; left: 0; top: 11px; background: #333; border-radius: 50% }
.join #j5 .right h4 { font-size: 1.24rem; color: #df0024; margin-top: 20px; font-weight: bold; cursor: pointer; opacity: 0.9; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; }
.join #j5 .right h4 > img { display: block; float: left; width: 18px; margin-right: 10px; margin-top: 2px; }
.join #j5 .right h4:hover { text-decoration: underline; opacity: 1; letter-spacing: 1px; }
.join #j5 .xq h2 strong { font-size: 1.4rem; }
.join #j5 .xq h6 { font-size: 1.3rem; color: #333; margin: 10px 0; position: relative; padding-left: 32px; }
.join #j5 .xq h6 b { font-size: 3rem; position: absolute; left: 0; top: -15px; color: #df0024; opacity: 0.08; font-weight: bold; }
.join #j5 .xq h6 img { display: block; width: 20px; margin: 10px 20px; opacity: 0.8; }
.join .bar3 { background: #f9f9f9; padding: 0.5% 0 5%; }
.join .bar3 .box { position: relative; height: 100%; margin: 5% auto 0; }
.join .bar3 ul li { position: absolute; right: 0; top: 0; height: 100%; width: 80%; display: none; }
.join .bar3 .right { float: left; width: 20%; padding: 12% 0; }
.join .bar3 .right h3 { font-size: 1.2rem; color: #333; position: relative; cursor: default; margin: 10px 0; }
.join .bar3 .right h3:before { content: ""; position: absolute; right: -10%; top: 18px; height: 1px; width: 0; background: #df0024; opacity: 0; -webkit-transition: all 0.5s linear; transition: all 0.5s linear; }
.join .bar3 .right h3.active { font-size: 2rem; color: #df0024; }
.join .bar3 .right h3.active:before { opacity: 1; width: 35%; }
.join .bar3 li p { font-size: 1.6rem; color: #fff; position: absolute; left: 50%; width: 80%; bottom: 5%; -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); text-align: center; letter-spacing: 1px; }
.zp2 .top p { cursor: pointer; }
.zp2 .top p strong { font-size: 1.1rem; color: #666; margin-left: 16px; position: relative; opacity: 0.6 }
.zp2 .top p strong:before { content: ""; position: absolute; left: -8px; top: 46%; width: 2px; height: 2px; border-radius: 50%; background: #666; }
.zp2 ul { padding: 4% 0; }
.zp2 ul .bar { width: 100%; cursor: pointer; position: relative; }
.zp2 ul .bar .bl { position: relative; z-index: 2; overflow: hidden; }
.zp2 ul .bar h5 { text-align: center; float: left; font-size: 1.2rem; width: 20%; color: #333; border-bottom: 1px solid #f1f1f1; line-height: 56px; position: relative; height: 56px; overflow: hidden; }
.zp2 ul li:first-of-type h5 { font-size: 1.4rem; color: #333; font-weight: bold; }
.zp2 ul li h5 strong { font-size: 0.8rem; background: #0753a4; position: absolute; left: 0; top: 50%; margin-top: -11px; width: 22px; height: 22px; border-radius: 50%; display: block; text-align: center; line-height: 22px; color: #fff; }
.zp2 ul .bar h5 i { position: absolute; color: #333; font-size: 2rem; text-align: center; opacity: 0; display: block; top: 50%; left: 50%; margin-top: -10px; margin-left: -10px; }
.zp2 ul .bar h5.active:first-of-type { color: #df0024; font-weight: bold; }
.zp2 ul .bar h5.active i { color: #df0024; -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.zp2 ul .bar h5 i { -webkit-animation: myfirst 2.8s ease-in-out 0s infinite; animation: myfirst 2.8s ease-in-out 0s infinite; }
@keyframes myfirst {  0%, 100% {
top: 5px;
opacity: 1;
}
 50% {
top: 15px;
opacity: 0.6;
}
}
 @-webkit-keyframes myfirst {  0%, 100% {
top: 5px;
opacity: 1;
}
 50% {
top: 15px;
opacity: 0.6;
}
}
.zp2 ul .bars { width: 100%; background: #fff; height: 0; background: #f8f8f8; opacity: 0; text-align: left; margin-top: -2px; }
.zp2 ul .bars .contain { padding: 2% 9%; display: none; margin-bottom: 0; }
.zp2 ul .bars .contain h4 { font-size: 1.4rem; color: #111; letter-spacing: 0.5px; margin: 20px 0 5px; padding-left: 12px; position: relative; }
.zp2 ul .bars .contain h4:before { content: ""; width: 5px; height: 5px; background: #333; border-radius: 50%; position: absolute; left: 0; top: 10px; }
.zp2 ul .bars .contain p { font-size: 1.2rem; color: #555; letter-spacing: 0; }
.zp2 ul .bars .contain h6 { margin-top: 10px; font-size: 15px; color: #222; }
.zp2 ul .bars .contain h6 a { font-size: 1.3rem; font-weight: bold; text-decoration: underline; color: #df0024; }
.footer .copy span { margin-top: 10px; display: block; float: left; }
.area.made .bar0 .left { width: 58%; }
.area.made .bar0 .right { width: 32%; padding: 8% 0; }
.normals .bar0 .right p { font-size: 1.1rem; }
.made .bar0:nth-of-type(2n) { background: #f9f9f9; padding: 1% 0; margin: 0; }
.made2 ul .bar { position: relative; border-bottom: 1px solid #f1f1f1; }
.made2 ul .bar h5 { width: 90%; margin: auto; border: none; font-size: 1.4rem; color: #333; font-weight: bold; }
.made2 ul .bar h5:last-of-type { width: 30px; float: none; position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.made3 #j5 .right p strong { color: #333; font-weight: bold; font-size: 1.3rem; display: block; margin-bottom: 3px; }
.made3 #j5 .right p { margin: 10px 0; }
.made3 #j5 .right { width: 44%; padding: 3% 0; }
.made3 .xq h2 { position: relative; margin-bottom: 5%; }
.made3 .xq dl { position: absolute; right: 0; top: -22px; width: 80%; }
.made3 .xq dl dd { width: 80px; height: 80px; text-align: center; border-radius: 50%; border: 1px solid #ccc; position: relative; margin: 0 3%; float: left; }
.join #j5 .xq h2 dl dd strong { display: block; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 1.3rem !important; color: #333; line-height: 1.3; font-weight: bold; }
.made3 .xq dl dd img { width: 80%; margin: 0 auto; display: none; }

/*Toast*/
.ui-toast-warp{z-index:998;pointer-events:none;position:fixed;}
.ui-toast{min-width:250px;max-width:400px;overflow:hidden;font-size:16px;background:#fff;border:1px solid rgba(0,0,0,0.1);box-shadow:0 1px 5px rgba(0,0,0,0.2);border-radius:4px;transition:transform .2s cubic-bezier(.16,.68,.43,.99);word-break:break-all;text-align:left;pointer-events:all;display:block;z-index:999;opacity:1;transition:all 0.2s linear;animation-duration:0.3s;animation-fill-mode:both;}
.ui-toast-header{display:flex;align-items:center;padding:15px 16px;border-bottom:1px solid rgba(0,0,0,0.05);}
.ui-toast-header .ui-toast-title{flex:1;font-weight:bold;}
.ui-toast-header .ui-toast-close{justify-content:flex-end;align-items:center;font-size:20px;cursor:pointer;font-weight:700;line-height:1;color:#999;}
.ui-toast-header .ui-toast-close:hover{color:#000;}
.ui-toast-body{padding:15px 25px;}
.ui-toast-body-icon{padding:10px 20px;}
.ui-toast-body span{font-size:30px;vertical-align:middle;margin-right:15px;transform:translateY(1px);}
.ui-toast-body .success{color:#19BE6B;}
.ui-toast-body .error{color:#ED4014;}
.ui-toast-body .warn{color:#F37B1D;}
.ui-toast-body .loading{color:#1890FF;}
.ui-progress-toast{background:#f5f5f5;}
.ui-progress-toast .ui-progress-bar{background:#40a9ff;}
.ui-progress-toast .ui-progress-success{background:#19BE6B;opacity:.6;}
.ui-progress-toast .ui-progress-error{background:#ED4014;opacity:.6;}
.ui-progress-toast .ui-progress-warn{background:#F37B1D;opacity:.6;}
.ui-progress-toast .ui-progress-loading{background:#ED4014;}
.ui-toast-warp-top-left{left:0;top:0;}
.ui-toast-warp-top-right{right:0;top:0;}
.ui-toast-warp-top-center{top:0;}
.ui-toast-warp-bottom-left{left:0;bottom:0;}
.ui-toast-warp-bottom-right{right:0;bottom:0;}
.ui-toast-warp-bottom-center{bottom:0;}
.ui-toast-warp-top-left .ui-toast,.ui-toast-warp-top-right .ui-toast,.ui-toast-warp-bottom-left .ui-toast,.ui-toast-warp-bottom-right .ui-toast{margin:10px;}
.ui-toast-warp-top-center .ui-toast{margin:10px auto 5px auto;}
.ui-toast-warp-bottom-center .ui-toast{margin:5px auto 10px auto;}
.ui-toast-red{background:#ED4014;color:#fff;}
.ui-toast-red .ui-toast-header{border-color:#F16643;}
.ui-toast-red .ui-toast-header .ui-toast-title{color:#fff;}
.ui-toast-red .ui-toast-header .ui-toast-close{color:#fff;}
.ui-toast-red .ui-toast-header .ui-toast-close:hover{color:#fff;}
.ui-toast-red .ui-icon-font.success,.ui-toast-red .ui-icon-font.error,.ui-toast-red .ui-icon-font.warn{color:#fff;}
.ui-toast-yellow{background:#FF6C47;color:#fff;}
.ui-toast-yellow .ui-toast-header{border-color:#FB882D;}
.ui-toast-yellow .ui-toast-header .ui-toast-title{color:#fff;}
.ui-toast-yellow .ui-toast-header .ui-toast-close{color:#fff;}
.ui-toast-yellow .ui-toast-header .ui-toast-close:hover{color:#fff;}
.ui-toast-yellow .ui-icon-font.success,.ui-toast-yellow .ui-icon-font.error,.ui-toast-yellow .ui-icon-font.warn{color:#fff;}
.ui-toast-blue{background:#1890FF;color:#fff;}
.ui-toast-blue .ui-toast-header{border-color:#40A9FF;}
.ui-toast-blue .ui-toast-header .ui-toast-title{color:#fff;}
.ui-toast-blue .ui-toast-header .ui-toast-close{color:#fff;}
.ui-toast-blue .ui-toast-header .ui-toast-close:hover{color:#fff;}
.ui-toast-blue .ui-icon-font.success,.ui-toast-blue .ui-icon-font.error,.ui-toast-blue .ui-icon-font.warn{color:#fff;}
.ui-toast-green{background:#19BE6B;color:#fff;}
.ui-toast-green .ui-toast-header{border-color:#47CB89;}
.ui-toast-green .ui-toast-header .ui-toast-title{color:#fff;}
.ui-toast-green .ui-toast-header .ui-toast-close{color:#fff;}
.ui-toast-green .ui-toast-header .ui-toast-close:hover{color:#fff;}
.ui-toast-green .ui-icon-font.success,.ui-toast-green .ui-icon-font.error,.ui-toast-green .ui-icon-font.warn{color:#fff;}
.ui-toast-info{background:#2DB7F5;color:#fff;}
.ui-toast-info .ui-toast-header{border-color:#57C5F7;}
.ui-toast-info .ui-toast-header .ui-toast-title{color:#fff;}
.ui-toast-info .ui-toast-header .ui-toast-close{color:#fff;}
.ui-toast-info .ui-toast-header .ui-toast-close:hover{color:#fff;}
.ui-toast-info .ui-icon-font.success,.ui-toast-info .ui-icon-font.error,.ui-toast-info .ui-icon-font.warn{color:#fff;}
.ui-toast-red .ui-progress-toast{background:none;}
.ui-toast-red .ui-progress-toast .ui-progress-bar{background:rgba(255,255,255,.4);}
.ui-toast-red .ui-progress-toast{background:none;}
.ui-toast-red .ui-progress-toast .ui-progress-bar{background:rgba(255,255,255,.4);}
.ui-toast-yellow .ui-progress-toast{background:none;}
.ui-toast-yellow .ui-progress-toast .ui-progress-bar{background:rgba(255,255,255,.4);}
.ui-toast-blue .ui-progress-toast{background:none;}
.ui-toast-blue .ui-progress-toast .ui-progress-bar{background:rgba(255,255,255,.4);}
.ui-toast-green .ui-progress-toast{background:none;}
.ui-toast-green .ui-progress-toast .ui-progress-bar{background:rgba(255,255,255,.4);}
.ui-toast-info .ui-progress-toast{background:none;}
.ui-toast-info .ui-progress-toast .ui-progress-bar{background:rgba(255,255,255,.4);}
.ui-toast-in{-webkit-animation-name:ui-toast-In;animation-name:ui-toast-In;}

.city a{ margin:5px 8px 5px 0; display:inline-block;}
.city a.active{ color:#f00;}
.city b{ font-size:14px;}