ul, ol { list-style: none; }
input {outline:none}
.container-screen .center { width: 1400px; margin: 0 auto; }
.container-screen { padding-top: 62px; }
.navbar { z-index: 4000; }
.navbar-max { border-bottom: 1px solid #d3d3d3; }
.screen-first-pic { position: relative; z-index: 3; }
.first-pic { width: 500px; height: 450px; position: fixed; left: 50%; top: 50%; margin: -185px 0 0 -250px; }
.first-pic-a { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; }
.first-pic-b { position: absolute; overflow: hidden; left: 0; top: 0; z-index: 1; width: 490px; height: 440px; position: absolute; left: 5px; top: 5px; }
.first-pic-in { overflow: hidden; }
.img-pc { display: block; }
.img-ph { display: none; }
.download-menu { display: none; z-index: 3333; height: 70px; position: fixed; left: 0; top: 62px; width: 100%; line-height: 70px; font-size: 16px; }
.download-menu a { color: #ffffff; margin: 0 50px; position: relative; z-index: 3; display: inline-block; line-height: 26px; padding: 4px 16px; border: 1px solid transparent; }
.download-menu a:hover { opacity: 0.7; }
.d-m-bg { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: #022d94; opacity: 0.75; }
.screen-download-display { display: none; text-align: center; position: fixed; left: 0; top: 0; height: 100%; width: 100%; background: url('http://www.ssxhl.com/uploadfile/content/2018/02/zwcad2019/images/cadpic/bg001.jpg') top center no-repeat; background-size: 100% 100%; z-index: 99; }
.s-d-list { display: inline-block; width: 180px; text-align: left; margin: 0 70px; }
.s-d-d { width: 660px; position: absolute; top: 50%; left: 50%; height: 200px; margin: -30px 0 0 -300px; }
.s-d-tit { background: url('http://www.ssxhl.com/uploadfile/content/2018/02/zwcad2019/images/cadpic/icon13.png') left center no-repeat; padding-left: 33px; font-size: 16px; color: #fff; }
.s-d-con { padding-left: 33px; line-height: 30px; padding-top: 30px; }
.s-d-d-close { position: absolute; left: 50%; margin-left: 22px; bottom: 30px; width: 44px; height: 44px; display: inline-block; background: url('http://www.ssxhl.com/uploadfile/content/2018/02/zwcad2019/images/cadpic/icon12.png') no-repeat; }
.s-d-d-close:hover { opacity: 0.6; }
.download-menu.opening a { color: #fff; }
.download-menu.opening a.active { border: 1px solid #fff; }
.s-d-con a { color: #fff; }
.s-d-con a:hover { opacity: 0.7; }
.first-pic-out { position: absolute; left: -100px; top: 20px; z-index: 10; }
.first-pic-in { opacity: 1; }
.firstOut .first-pic-in { opacity: 0; }
.thIE.firstOut .first-pic-in { display: none; }
.thIE .first-pic-out { display: none; }
.thIE.firstOut .first-pic-out { display: block; }
.first-pic-out { opacity: 0; }
.firstOut .first-pic-out { opacity: 1; }
.screen-first-pic.abs .first-pic { position: absolute; margin-top: 0; }
.screen-first-pic { min-height: 2000px; background: #fff; }
.first-word { width: 700px; padding-top: 80px; }
.screen-h1 { color: #fff; font-size: 70px; }
.screen-h2 { color: #fff; font-size: 24px; }
.screen-h3 { color: #fff; font-size: 24px;}
.screen-h3 span { display: block; }
.screen-download { margin-top: 65px; position: relative; z-index: 33; }
.download-list { display: inline-block; position: relative; width: 160px; margin: 0 5px; margin-bottom: 30px; }
.download-list ul { display: none; position: absolute; left: 0; top: 0; background: #021662; width: 100%; padding: 0; }
.d-l-a { display: inline-block; background: #ffffff; height: 36px; font-size: 16px; line-height: 36px; width: 100%; text-align: center; position: relative; color: #021662; }
.d-l-a i { display: inline-block; width: 27px; height: 23px; background: url('http://www.ssxhl.com/uploadfile/content/2018/02/zwcad2019/images/cadpic/icon10.png') no-repeat; vertical-align: -6px; margin-right: 10px; }
.d-l-a:hover, .d-l-a.active { background: #021662; color: #fff; }
.download-list ul li a { color: #fff; font-size: 14px; display: block; line-height: 36px; text-align: center; position: relative; }
.download-list ul li a:after { content: ''; right: 0; top: 12px; bottom: 12px; width: 1px; background: #fff; position: absolute; }
.download-list ul li { padding: 0; float: left; width: 50%; }
.download-list ul li:last-child a:after { display: none; }
.download-list ul li a:hover { opacity: 0.7; }
.screen-more { margin-top: 50px; }
.screen-more a { font-size: 18px; color: #072a7c; display: inline-block; padding-left: 36px; background: url('http://www.ssxhl.com/uploadfile/content/2018/02/zwcad2019/images/cadpic/icon02.png') left center no-repeat; }
.screen-more a:hover { opacity: 0.7; }
/* topic */
.d-l-a { position: relative; }
.d-l-a { -webkit-transition: all 0.6s ease-in; transition: all 0.6s ease-in; }
.d-l-a:before, .d-l-a:after { content: ''; display: block; position: absolute; }
.d-l-a:after, .d-l-a:before { box-sizing: border-box; border: 1px solid transparent; width: 0; height: 0; }
.d-l-a:before { bottom: 0; right: 0; transition: border-color 0s ease-in 1.4s, width 0.2s ease-in 0.2s, height 0.2s ease-in; }
.begin .d-l-a:after, .begin .d-l-a:before { width: 100%; height: 100%; }
.begin .d-l-a:before { border-bottom-color: #021662; border-left-color: #021662; transition: width 0.8s ease-out 2.2s, height 0.4s ease-out 3.0s; }
.d-l-a:after, .d-l-a:before { box-sizing: border-box; border: 1px solid transparent; width: 0; height: 0; }
.d-l-a:after { top: 0; left: 0; transition: width 0.8s ease-in 2.6s, height 0.4s ease-in 3.4s; }
.begin .d-l-a:after { border-top-color: #021662; border-right-color: #021662; transition: width 0.8s ease-out 1s, height 0.4s ease-out 1.8s; }
.screen-h3, .screen-download, .screen-more { opacity: 1; transform: translate3d(0, 0, 0); }
.begin .screen-h3, .begin .screen-download, .begin .screen-more { opacity: 1; transform: translate3d(0, 0, 0); }
.elements { position: absolute; background-repeat: no-repeat; background-size: 100%; }
.jq-h1 { font-size: 32px; color: #000000; }
.jq-h2 { font-size: 16px; line-height: 1.6; color: #666666; opacity: 0.75; padding-top: 40px; }
.jq-h2 span,.jq-h1 span { display: block; }
.jq-h1 { opacity: 0; transform: translate3d(0,40px,0); }
.begin .jq-h1 { opacity: 1; transform: translate3d(0,0,0); }
.jq-h2,.jq-h3 { opacity: 0; transform: translate3d(0,40px,0); }
.begin .jq-h2,.begin .jq-h3 { opacity: 1; transform: translate3d(0,0,0); }
.f9f9f9 { background: #f9f9f9; }
.pic-m { display: none; }
.tab-container { position: relative; }
.tab-screen { position: relative; z-index: 4 }
.tab-hide { opacity: 0; z-index: 3; position: absolute; width: 100%; top: 0; bottom: 0; }
/* 1 */
.first-screen { background: url(/uploadfile/content/2019/10/zbhpic/first-bg01.png) 100% 100% no-repeat; background-size: 100% 100%; height: 880px; position: relative; }
.fi-pic { position: absolute; bottom: 10%; width: 60%; left: 0; }
.fi-pic > img { max-width: 100%; }
.fi-word { float: right; padding-top: 60px; text-align: center; position: absolute; top: 50%; right: 0; margin-top: -315px; }
.fi-title { font-size: 40px; color: #fff; text-align: center; line-height: 1.6; }
.fi-title span { display: block; }
.fi-phone { margin-top: 25px; color: #33cc00; font-size: 20px; background: url(/uploadfile/content/2019/10/zbhpic/icon01.png) left center no-repeat; padding-left: 40px; display: inline-block; }
.screen-title { text-align: center; padding-top: 60px; padding-bottom: 30px; text-align: center; }
.title-one { color: #535353; font-size: 42px; position: relative; }
.title-two { color: #072f84; padding-top:15px; font-size: 18px }
.title-line { display: inline-block; width: 74px; height: 5px; background: #000; margin-top: 12px; }
.first-con { height: 100%; position: relative; padding-top: 60px; z-index: 9; }
.fi-pic-a { position: absolute; left: 0; top: 0; width: 100%; }
.fi-pic-a img { max-width: 100%; }
.fi-pic-b { position: absolute; left: 0; top: 0; width: 100%; }
.fi-pic-b img { max-width: 100%; }
.fi-pic-c { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; }
.fi-pic-c img { position: absolute; left: 0; bottom: 0; }
.fi-form-con { width: 416px; border:1px solid #084674; padding: 35px; margin:0 auto; background: #000536; margin-top: 30px; }
.fi-form-con span { position: relative; position: relative; background: #1f265a; display: block; text-align: left; height: 38px; line-height: 38px; margin-bottom: 18px; }
.fi-form-con span em { font-size: 14px; color: #fff; position: absolute; left: 18px; top: 0; }
.fi-form-con span input { z-index: 3; position: relative; padding-left: 64px; border: none; width: 100%; height: 34px; line-height: 38px; background: none; color: #fff; font-size: 14px;}
.fi-form-con span a { transition: all 0.5s; box-shadow: 0px 0px 0 #407728 inset; cursor: pointer; display: inline-block; height: 38px; line-height: 38px; position: absolute; right: 0; top:0; background: #33cc00; width: 100px; text-align: center; color: #fff; font-size: 14px; z-index: 4; }
.fi-form-con span a:hover {box-shadow: 0px 0px 20px #407728 inset; color: #fff;}
.fi-form-btn {transition: all 0.5s; box-shadow: 0px 0px 0 #407728 inset; cursor: pointer; display: block; background: #33cc00; height: 38px; line-height: 38px; color: #fff; font-size: 14px; padding: 0 30px; }
.fi-form-con span:nth-child(4) input { padding-left: 92px; }
.fi-form-con span:nth-child(5) input { padding-left: 80px; }
.fi-form-btn:hover {box-shadow: 0px 0px 20px #407728 inset; color: #fff;}
.fi-form-con .job-box{padding-left: 64px;padding-right: 5px;}
.fi-form-con .job-box select{width: 100%;height: 100%;background-color: #1f265a;border: none;text-align: center;font-size: 14px;color: #fff;outline: none;}
.fi-pic > img { opacity: 0; transform: scale3d(0.8,0.8,1); }
.begin .fi-pic > img { opacity: 1; transform: scale3d(1,1,1); }
.fi-pic-b { opacity: 0; transform: translate3d(0,-50px,0); }
.begin .fi-pic-b { opacity: 1; transform: translate3d(0,0,0); }
.fi-pic-a { opacity: 0; }
.begin .fi-pic-a { opacity: 1; }
/*.fi-pic-c { overflow: hidden; height: 0; }
.begin .fi-pic-c { overflow: hidden; height: 100%; }*/
.fi-title,.fi-phone,.fi-form-con { opacity: 0; transform: translate3d(120px,0,0); }
.begin .fi-title,.begin .fi-phone,.begin .fi-form-con { opacity: 1; transform: translate3d(0,0,0); }
/* 2 */
.sec-list { }
.sec-item { float: left; width: 346px; padding: 15px; margin: 0 15px; margin-bottom: 10px; }
.sec-item:nth-child(3n+1) { margin-left: 0; }
.sec-item:nth-child(3n+3) { margin-right: 0; }
.sec-title { padding: 20px 30px; font-size: 13px; color: #858585; line-height: 24px; text-align: center; min-height: 48px; }
a.sec-item:hover { box-shadow: 0px 2px 14px rgba(0,0,0,0.3); }
a.sec-item:hover .sec-title { color: #000; }
.title-one,.title-two { opacity: 0; transform: translate3d(0,40px,0); }
.begin .title-one,.begin .title-two { opacity: 1; transform: translate3d(0,0,0); }
.title-line { width: 0; }
.begin .title-line { width: 74px; }
.sec-item .sec-img,.sec-item .sec-title { opacity: 0; transform: translate3d(0,100px,0); }
.begin .sec-item .sec-img,.begin .sec-item .sec-title { opacity: 1; transform: translate3d(0,0,0); }
/* 3 */
.third-screen { margin-top: 50px; background: url(/uploadfile/content/2020/10/5f841039097bc.jpg) center no-repeat; height: 588px; position: relative; }
.th-pic { width: 49%; position: absolute; right: 0; top: 0; height: 100%; }
.th-pic img { max-height: 100%; }
.th-word { padding-left: 30px; }
.th-title { font-size: 36px; color: #072f84; padding-top: 200px; padding-bottom: 20px; }
.th-subTitle { color: #535353; font-size: 22px; line-height: 36px; }
.th-pic > img { opacity: 0; transform: scale3d(0.8,0.8,1); }
.begin .th-pic > img { opacity: 1; transform: scale3d(1,1,1); }
.th-title,.th-subTitle{ opacity: 0; transform: translate3d(0,40px,0); }
.begin .th-title,.begin .th-subTitle { opacity: 1; transform: translate3d(0,0,0); }
/* 4 */
.fourth-con { width: 1180px !important; margin-left: -40px; }
.fo-list { }
a.fo-item { display: block; float: left; width: 378px; margin: 0 10px; margin-bottom: 10px; padding: 15px; }
a.fo-item:hover { box-shadow: 0px 2px 14px rgba(0,0,0,0.3); }
a.fo-item:hover .fo-title-two { color: #000; }
.fo-item:nth-child(3n+1) { margin-left: 0; }
.fo-item:nth-child(3n+3) { margin-right: 0; }
.fo-title { padding: 20px 0; text-align: center; height: 150px; }
.fo-title-one { font-size: 16px; font-weight: 500; color:#000 }
.fo-title-two { font-size: 13px; color: #858585; line-height: 24px; padding-top: 10px; }
.fo-item .fo-img,.fo-item .fo-title { opacity: 0; transform: translate3d(100px,0,0); }
.begin .fo-item .fo-img,.begin .fo-item .fo-title { opacity: 1; transform: translate3d(0,0,0); }
/* 5 */
.fifth-screen { margin-top: 50px; background: url(/uploadfile/content/2019/10/zbhpic/fifth-bg01.png) center no-repeat; height: 480px; position: relative; }
.fif-pic { float: left; padding-top: 80px; }
.fif-word { float: right; padding-top: 200px; }
.fif-word p { font-size: 13px; color: #fff; line-height: 24px; }
.fif-pic{ opacity: 0; transform: scale3d(0.8,0.8,1) translate3d(0,80px,0); }
.begin .fif-pic { opacity: 1; transform: scale3d(1,1,1) translate3d(0,0,0);}
.fif-word p { opacity: 0; transform: translate3d(100px,0,0); }
.begin .fif-word p { opacity: 1; transform: translate3d(0,0,0); }
/* 6 */
.sixth-con { padding: 120px 0; text-align: center; font-size: 16px; line-height: 36px; color: #1a1a1a; }
.sixth-con a { color: #072f84; }
.sixth-con a:hover { color: #072f84; text-decoration: underline; }
.sixth-con p { opacity: 0; transform: translate3d(0,40px,0); }
.begin.sixth-con p { opacity: 1; transform: translate3d(0,0,0); }
/* form */
.form-screen { display: none; background: rgba(0,1,42,0.85); padding: 40px 0; text-align: center; position: fixed; bottom: 0; width: 100%; left: 0; z-index: 99000 }
.form-con span { display: inline-block; background: #88889c; padding-left: 18px; height: 34px; line-height: 34px; margin: 0 2px; }
.form-con span em { font-size: 14px; color: #fff; }
.form-con span input { border: none; height: 34px; line-height: 34px; width: 170px; background: none; color: #fff; font-size: 14px;}
.form-con span a { transition: all 0.5s; box-shadow: 0px 0px 0 #407728 inset; cursor: pointer; display: inline-block; height: 34px; line-height: 34px; width: 90px; background: #33cc00; color: #fff; font-size: 14px; }
.form-con span a:hover { color: #fff;box-shadow: 0px 0px 20px #407728 inset; }
.form-btn { display: inline-block; background: #33cc00; height: 34px; line-height: 34px; color: #fff; font-size: 14px; padding: 0 30px; }
.download-menu-close { z-index: 5; position: absolute; top: 22px; right: 22px; width: 28px; height: 28px; }
.form-con span a.link-click.gray { background-color: #ccc; }
.form-con span a.get-link-click { background: #fff; color: #33cc00; }
.form-btn {transition: all 0.5s; box-shadow: 0px 0px 0 #407728 inset; cursor: pointer; }
.form-btn:hover { color: #fff; box-shadow: 0px 0px 20px #407728 inset; cursor: pointer; }
.form-con .job-box{padding-right: 5px;}
.form-con .job-box select{height: 100%;background-color: #88889c;border: none;text-align: center;font-size: 14px;color: #fff;outline: none;}
/* css style */
@media (max-width:1400px) {
.fi-pic { width: 70%; left: -5%; }
.center { width: 100% !important; padding: 0 30px; }
.form-con span{
margin-bottom: 5px;
}
}
@media (max-width:1140px) {
.sec-item { margin: 0 10px; width: 32%; }
.sec-item img { max-width: 100%; }
a.fo-item { width: 32% }
a.fo-item img { max-width: 100%; }
.third-con.center { padding-right: 53%; }
.sixth-con { padding: 120px 30px; }
.fi-title { padding-right: 20px; }
}
@media (max-width:1060px) {
.fi-pic { width: 73%; left: -10%; }
.sec-item { width: 31% }
a.fo-item { width: 31%;}
.sec-title { padding: 20px 10px; }
.fif-pic { width: 50% }
.fif-pic img { max-width: 100%; }
.fi-form-con { background: rgba(0,5,54,0.7); }
}
@media (max-width:980px) {
.fi-pic { width: 73%; left: -10%; }
.center { padding: 0 20px; }
.th-word { padding-left: 0; }
.sixth-con { padding: 100px 20px; }
}
@media (max-width:900px) {
.fo-title { height: 200px; }
.fif-pic { width: 45%; padding-top: 17%; }
.sec-title { padding: 20px 0px; }
}
@media (max-width:768px) {
.third-screen { height: 350px; }
.th-title { font-size: 30px; padding-top: 70px; }
.th-subTitle {font-size: 20px;}
a.fo-item { margin: 0; width: 33%; }
.fi-pic { width: 87%; left: -10%; bottom: 20%;}
.fi-title {font-size: 30px;}
.fi-form-con { width: 350px; padding: 25px; }
.sec-item { margin: 0; width: 33%; }
}
@media (max-width:600px) {
.fi-word {top: 0; margin: 0; padding-top: 50px;}
.fi-title span { display: inline; }
.fi-title { font-size: 1.3rem; padding: 0 30px; line-height: 1.8; }
.fi-title span{display: block;}
.fi-phone { font-size: 1.0rem; padding-left: 25px; background-size: 15px; margin-top: 12px; }
.fi-word {width: 100%;}
.first-con.center { padding: 0; }
.fi-form-con { width: 280px; padding: 18px 20px; margin-top: 20px; }
.fi-form-con span { height: 32px; line-height: 32px; margin-bottom: 10px; }
.fi-form-con span input { height: 32px; line-height: 32px; padding-left: 56px; }
.fi-form-con span em {font-size: 0.7rem; left: 15px;}
.fi-form-con span:nth-child(3) input { padding-left: 82px; }
.fi-form-con span:nth-child(4) input { padding-left: 70px; }
.fi-form-con span a { height: 32px; line-height: 32px; font-size: 0.7rem; width: 80px; }
.fi-form-btn { height: 34px; line-height: 34px; }
.fi-pic { width: 150%; left: -22%; bottom: -11%; }
.first-screen { height: 680px; overflow: hidden; }
.screen-title { padding-top: 40px; }
.title-one { font-size: 1.6rem; }
.title-line {height: 3px;}
.title-two {font-size: 0.8rem; padding-top: 8px;}
.sec-item { margin: 0; width: 50%; padding: 6px; }
.sec-list .sec-item:nth-child(even) { padding-right: 0; }
.sec-list .sec-item:nth-child(odd) { padding-left: 0; }
.sec-title { height: 70px; padding: 0; padding-top: 10px; padding-bottom: 0; font-size: 0.8rem; line-height: 1.5; }
.third-screen { height: auto; }
.third-con.center { width: 100%;padding: 0; }
.th-pic {position: relative; width: 100%; height: auto;}
.th-pic img { max-width: 100%; }
.th-title { font-size: 1.5rem; text-align: center; padding-top: 80px; }
.th-subTitle { font-size: 0.9rem; text-align: center; line-height: 30px; }
.th-word { padding-bottom: 70px; }
a.fo-item { margin: 0; width: 100%; padding: 0; position: relative; padding: 20px 0; padding-left: 135px; border-bottom: 1px solid #f1f1f1; min-height: 128px; }
a.fo-item:last-child { border-bottom: none; }
.fo-img { width: 120px; position: absolute; left: 0; top: 20px; overflow: hidden; }
a.fo-item img { max-width: 130px; }
.fo-title { padding: 0; height: auto;}
.fo-title-one { font-size: 0.9rem; text-align: left; line-height: 1; padding-bottom: 5px; }
.fo-title-two { line-height: 20px; text-align: left; font-size: 0.7rem; padding-top: 5px; }
.fourth-con .screen-title { padding-bottom: 10px; }
.fif-pic { width: 100%; padding-top: 0; position: absolute; bottom: 40px; left: 0; }
.fif-word { padding-top: 70px; font-size: 0.8rem; }
.fif-word p {font-size: 0.8rem; text-align: center;}
.fif-pic { padding:0 50px; }
.fifth-screen { height: 480px; background-size: 500px 520px; height: 520px; }
.sixth-con { padding: 70px 20px; }
.sixth-con p { font-size: 0.8rem; }
.form-screen { padding: 10px 0; padding-top: 40px; }
.form-con span { height: 30px; line-height: 30px; width: 49%; padding-left: 10px; margin: 0; margin-bottom: 10px; position: relative; }
.form-con span em { position: absolute; left: 8px; top: 0;line-height: 30px; font-size: 0.7rem; }
.form-con span input { width: 100% !important; height: 30px; line-height: 30px; font-size: 0.7rem; position: relative; z-index: 2; }
.download-menu-close { width: 18px; height: 18px; top: 8px; right: 15px; }
.download-menu-close img { max-width: 100%; }
.form-con.center { padding: 0 10px; }
.form-con span { height: 30px; line-height: 30px; width: 49%; margin: 0; margin-bottom: 10px; position: relative; float: left; margin-right: 5px;}
.form-con span:nth-child(even) { margin-right: 0; }
.form-con span input { padding-left: 38px; }
.form-con span:nth-child(4) input { /* padding-left: 60px; */ }
.form-con span:nth-child(5) input { padding-left: 60px; }
.form-con span:nth-child(6) input { padding-left: 50px; }
.form-con span a { font-size: 0.7rem; height: 30px; line-height: 30px; position: absolute; right: 0; top: 0; width: auto; padding: 0 6px; }
.form-con span.form-code{width: 98%;}
}
@media (max-width:500px) {
.form-con span{width: 100%;}
.form-con .job-box{padding-left: 38px;}
.form-con .job-box select{
width: 100%;
}
}
@media (max-width:414px) {
.center {
padding: 0 15px;
}
.sixth-con { padding: 60px 15px; }
}
@media (max-width:360px) {
}
@media (max-width:375px) {
.fi-title { font-size: 1.3rem; }
}
@media (max-width:320px) {
}