ul, ol { list-style: none; }
.container-screen .center { width: 1070px; 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.zwcad.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.zwcad.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.zwcad.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: #021662; font-size: 70px; }
.screen-h2 { color: #021662; font-size: 30px; }
.screen-h3 { color: #676767; font-size: 20px; line-height: 1.8; padding-top: 20px; }
.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.zwcad.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.zwcad.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%; }

/* 1 */
@font-face { font-family: 'pfmd'; src: url('fontsword/pfmd.ttf') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'pfxt'; src: url('fontsword/pfxt.ttf') format('truetype'); font-weight: normal; font-style: normal; }
.first-screen { height: 880px; position: relative; }
.fi-pic { position: absolute; left: 0; bottom: 0; z-index: 2; width: 60%; height: 80%; z-index: 5; }
.fi-pic img { max-width: 100%; max-height: 100%; position: absolute; bottom: 0; left: 0; }
.first-center { width: 1200px; height: 100%; margin: 0 auto; text-align: right; position: relative; z-index: 12; }
.first-center h1 { font-family: "pfmd"; font-weight: normal; font-size: 90px; color: #021662; }
.first-center h2 { font-family: "pfxt"; font-size: 46px; padding-top: 16px; }
.fi-bg { position: absolute; width: 100%; left: 0; bottom: 0; }
.se-left { width: 460px; padding-top: 220px; }
.smoke-con { position: absolute; bottom: 0; left: 0; width: 100%; z-index: 2; }
#smokeCanvas { width: 100%; height: 300px; vertical-align: bottom; opacity: 0.8; }
.first-box { display: inline-block; position: absolute; right: 0; top: 50%; margin-top: -140px; text-align: left; }
.first-box h1 span { display: inline-block; }
.first-box strong { font-weight: normal; }
.link-video { position: absolute; bottom: 60px; right: 10px; font-size: 14px; color: #021662; cursor: pointer; }
.link-video-b { display: none; }
.link-video .fi-icon-video { vertical-align: 1px; margin-right: 6px; }
.link-video:hover { opacity: 0.85; }
.fi-pic img { opacity: 0; transform: translate3d(-50%, 0, 0); }
.begin.fi-pic img { opacity: 1; transform: translate3d(0, 0, 0); }
.first-box h1 { transform: translate3d(60px, 0, 0); opacity: 0; }
.begin .first-box h1 { transform: translate3d(0, 0, 0); opacity: 1; }
/* .first-box h1 span { transform: rotateY(180deg); transform: translate3d(0, 60px, 0); opacity: 0; }
.begin .first-box h1 span { transform: rotateY(0deg); transform: translate3d(0, 0, 0); opacity: 1; } */
.first-box h2 { opacity: 0; transform: translate3d(60px, 0, 0); }
.begin .first-box h2 { opacity: 1; transform: translate3d(0, 0, 0); }
.download-list { opacity: 0; transform: translate3d(-80px, 0, 0); }
.download-list:nth-child(2) { transform: translate3d(0, 0, 0); }
.download-list:nth-child(3) { transform: translate3d(80px, 0, 0); }
.begin .download-list { opacity: 1; transform: translate3d(0, 0, 0); }

.screen-download { margin-top: 65px; position: relative; z-index: 33; }
.download-list {display: inline-block;position: relative;width: 180px;margin: 0 9px;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: #021662;height: 40px;font-size: 16px;line-height: 40px;width: 100%;color: #fff;text-align: left;padding-left: 14px;}
.d-l-a i {display: inline-block;width: 27px;height: 23px;background: url('http://www.zwcad.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: 40px;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; }

/* 2 */
.second-screen { padding-bottom: 100px; }
.se-pic-box { width: 460px; height: 610px; background: #4b4b4c; border-radius: 5px; padding: 30px; color: #fff; font-size: 12px; position: relative; }
.word-tit-a { color: #021662; font-size: 52px; line-height: 1.2; }
.word-tit-b { color: #606061; font-size: 18px; line-height: 1.6; padding-top: 30px; }
.word-tit-a span, .word-tit-b span { display: block; }
.second-screen { margin-top: 250px; }
.se-tit { padding-top: 30px; }
.se-list { padding-top: 45px; }
.se-list span { display: inline-block; width: 150px; color: #262728; font-weight: 700; padding: 6px 0; }
.icon-se-a { padding-right: 8px; }
.se-b { padding: 8px 0; }
.se-c { display: inline-block; padding: 4px 12px; background: #8b8b8c; color: #cdcdcd; }
.se-d { margin: 8px 0; height: 24px; line-height: 24px; background: #8b8b8c; }
.se-d span { display: inline-block; line-height: 24px; padding-right: 20px; background: #4b4b4c; }
.se-e { position: absolute; right: 30px; top: 30px; }
.se-f { height: 24px; line-height: 24px; width: 260px; position: absolute; right: 30px; top: 53px; background: #5d5d5e; }
.se-f b { position: absolute; right: 0; top: 0; display: inline-block; width: 24px; height: 24px; text-align: center; background: #343d60; }
.se-f p { position: absolute; left: 0; top: 24px; }
.se-g { background: #9c9c9d; height: 390px; }
.se-h { text-align: center; margin-top: 6px; }
.se-h span:nth-child(1) { float: left; }
.se-h span:nth-child(3) { float: right; }
.se-h span { display: inline-block; width: 32%; background: #d9d9d9; color: #333; height: 28px; line-height: 28px; text-align: center; font-size: 12px; }
.second-screen .center { position: relative; }
.se-word { position: absolute; left: 0; top: 0; }


.word-tit-a,.word-tit-b { opacity: 0; transform: translate3d(-60px, 0, 0); }
.begin .word-tit-a,.begin .word-tit-b { opacity: 1; transform: translate3d(0, 0, 0); }
.se-list span { opacity: 0; }
.begin .se-list span { opacity: 1; }

.se-pic-box  { opacity: 0; transform: scale3d(0.8, 0.8, 1); }
.begin .se-pic-box  { opacity: 1; transform: scale3d(1, 1, 1); }
.se-f p { height: 0; overflow: hidden; }
.begin .se-f p { height: 325px; }

/* 3 */
.third-screen { background: #fafafa; padding-top: 150px; }
.th-pic { background: #4b4b4c; padding: 30px; margin-top: 120px; }
.th-left { position: relative; }
.th-b { position: absolute; right: 0; top: -4px; }
.th-c { margin-top: 16px; }
.th-right { padding-top: 57px; padding-right: 10px; margin-left: 50px; }
.th-right-box { padding-top: 58px; background: #fff; position: relative; text-align: center; width: 550px; height: 510px; }
.th-e { position: absolute; bottom: 20px; left: 20px; }
.th-right-bottom { padding: 15px 0 0 0; }
.th-word-a { text-align: right; }

.th-right-bottom { font-size: 12px; color: #fff; }
.th-right-bottom span { display: inline-block; position: relative; padding-right: 42px; margin-right: 8px; }
.th-right-bottom span:last-child{ padding-right: 0; margin-right: 0;  }
.th-right-bottom span i { position: absolute; right: 0; top: 5px; display: inline-block; width: 27px; height: 7px; background: url('../images/3Dpic/th-icon01.png') }


/* swiper */
.swiper-container { margin: 0 auto; position: relative; overflow: hidden; direction: ltr; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; }
.swiper-wrapper { position: relative; width: 100%; -webkit-transition-property: -webkit-transform, left, top; -webkit-transition-duration: 0s; -webkit-transform: translate3d(0px, 0, 0); -webkit-transition-timing-function: ease; -moz-transition-property: -moz-transform, left, top; -moz-transition-duration: 0s; -moz-transform: translate3d(0px, 0, 0); -moz-transition-timing-function: ease; -ms-transition-property: -ms-transform, left, top; -ms-transition-duration: 0s; -ms-transform: translate3d(0px, 0, 0); -ms-transition-timing-function: ease; transition-property: transform, left, top; transition-duration: 0s; transform: translate3d(0px, 0, 0); transition-timing-function: ease; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }
.swiper-free-mode > .swiper-wrapper { -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -ms-transition-timing-function: ease-out; transition-timing-function: ease-out; margin: 0 auto; }
.swiper-slide { float: left; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }
.swiper-wp8-horizontal { -ms-touch-action: pan-y; }
.swiper-wp8-vertical { -ms-touch-action: pan-x; }

.five-swiper-inside { width: 468px; height: 410px; }
.pagination  { font-size: 12px; color: #fff; }
.swiper-pagination-switch { cursor: pointer; opacity: 0.3; display: inline-block; position: relative; padding-right: 42px; margin-right: 8px; }
.swiper-pagination-switch:last-child{ padding-right: 0; margin-right: 0;  }
.swiper-pagination-switch:after { content: ''; position: absolute; right: 0; top: 5px; display: inline-block; width: 27px; height: 7px; background: url('../images/3Dpic/th-icon01.png') }
.swiper-pagination-switch:last-child:after { display: none; }
.swiper-pagination-switch.swiper-visible-switch { opacity: 1; }


.th-a { width: 0; overflow: hidden; }
.begin .th-a { width: 100%; }

.th-c { opacity: 0; transform: scale3d(0.8, 0.8, 1); }
.begin .th-c { opacity: 1; transform: scale3d(1, 1, 1); }


.th-right-box { width: 0; /* overflow: hidden;  */}
.begin  .th-right-box { width: 550px; }

.th-d { position: relative; display: inline-block; }
.th-d .elements { left: 0; top: 0; opacity: 0; }
.five-swiper-inside { transform: rotateY(180deg); opacity: 0; }
.begin .five-swiper-inside { transform: rotateY(0deg); opacity: 1; }
.th-right-bottom,.th-b { opacity: 0; }
.begin .th-right-bottom,.begin .th-b { opacity: 1; }

/* 4 */
.four-screen { background: #fafafa; padding-top: 150px; }
.fo-pic { margin-top: -150px; }
.fo-pic-box { position: relative; width: 891px; height: 925px; float: right; }
.fo-pic-box p { position: absolute; left: 0; top: 0 }
.fo-a { position: absolute; left: 0; top: 0 }
.fo-pic-box .fo-e { left: auto; right: 18px; top: -83px; }
.fo-pic-box .fo-d { left: 350px; top: 195px; }
.fo-pic-box .fo-c { left: -100px; top: 380px; }

.fo-a { height: 0; overflow: hidden; }
.begin .fo-a  { height: 100%; }
.fo-e,.fo-d,.fo-c { opacity: 0; transform:rotate(180deg); }
.begin .fo-e,.begin .fo-d,.begin .fo-c { opacity: 1; transform:rotate(0deg); }
.fo-b { opacity: 0; transform: translate3d(200px, -50px, 0) scale3d(0.8, 0.8, 1); }
.begin .fo-b { opacity: 1; transform: translate3d(0, 0, 0) scale3d(1, 1, 1); }

/* 5 */
.five-screen { padding-top: 120px; }
.fv-pic-box { background: #4b4b4c; width: 736px; height: 650px; position: relative; }
.fv-a { padding: 20px 0 0 20px; }
.fv-b { position: absolute; right: 213px; top: -7px; z-index: 2; }
.fv-c { position: absolute; left: 422px; top: 20px; background: #fff; width: 650px; height: 610px; opacity: 0.98; text-align: center; }
.fv-c-line-a, .fv-c-line-b { display: block; position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
.fv-c-line-a:before, .fv-c-line-a:after, .fv-c-line-b:before, .fv-c-line-b:after { content: ''; position: absolute; }
.fv-c-line-a:before, .fv-c-line-b:before { background: url('../images/3Dpic/fv-line01.png') top repeat-x; height: 2px; left: 9px; top: 9px; right: 9px; }
.fv-c-line-a:after, .fv-c-line-b:after { background: url('../images/3Dpic/fv-line02.png') left repeat-y; width: 2px; left: 9px; top: 9px; bottom: 9px; }
.fv-c-line-b:before { top: auto; bottom: 9px; }
.fv-c-line-b:after { left: auto; right: 9px; }
.fv-c-a { margin-top: 200px; }
.fv-c-b { position: absolute; right: 25px; bottom: 30px; }
.fv-word { text-align: right; }
.fv-pic { margin-top: 120px; }

.fv-a { opacity: 0; transform: scale3d(0.7, 0.7, 1); position: relative; z-index: 2; }
.begin .fv-a { opacity:1; transform: scale3d(1, 1, 1); }
.fv-b { overflow: hidden; height: 0; }
.begin .fv-b { overflow: hidden; height: 100%; }
.fv-c { opacity: 0; transform: translate3d(-50px,0, 0) }
.begin .fv-c { opacity: 1; transform: translate3d(0,0, 0) }

/* 6 */
.six-screen { margin-top: 200px; padding-bottom: 150px; }
.si-pic { position: relative; margin-top: 70px; }
.si-pic-box { padding-bottom: 30px; background: #4b4b4c; position: relative; z-index: 3; }
.si-left { background: #fff; width: 258px; height: 370px; margin: 34px 0 0 20px; padding: 80px 30px 0 30px; position: relative; font-size: 18px; line-height: 1.6; text-align: justify; }
.si-left-bottom { position: absolute; bottom: 0; left: 0; width: 100%; height: 42px; background: url('../images/3Dpic/si-img03.png') repeat; }
.si-a { position: absolute; left: 0; top: 0; z-index: 3; }
.si-right { margin: 34px 8px 0 0; }
.si-b { position: absolute; right: -105px; top: -160px; }

.si-pic-box { opacity: 0; transform: translate3d(0,-60px, 0) }
.begin .si-pic-box { opacity: 1; transform: translate3d(0,0, 0) }

.si-a { opacity: 0; transform: translate3d(-100px,-100px, 0) }
.si-left { opacity: 0; transform: translate3d(-100px,100px, 0) }
.si-right { opacity: 0; transform: translate3d(100px,100px, 0) }
.begin .si-a,.begin .si-left,.begin .si-right   { opacity: 1; transform: translate3d(0,0, 0) }



/* 7 */
.seven-screen { background: #fafafa; padding-top: 120px; }
.seven-screen .center {  width: 926px; }
.sv-word { text-align: right; }
.sv-pic {  padding: 40px; margin-top: 80px; width: 926px; height: 763px; position: relative;  }
.sv-pic:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url('../images/3Dpic/sv-img04.png') repeat; }
.sv-pic-box {  text-align: center; padding: 40px 0; position: relative;  }
.sv-pic-box:before { content: '';background: #4b4b4c; position: absolute; left: 0; top: 0; width: 100%; height: 100%;   }
.sv-a { display: inline-block; position: relative; }
.sv-a-b { position: absolute; top: 250px; left: 270px; }
.sv-b { position: absolute; left: 100px; }
.sv-c { width: 480px; height: 480px; position: absolute; bottom: -116px; right: -116px; background: #fff; border-radius: 50%; border: 2px solid #4b4b4c; z-index: 6; }
.sv-c img { padding-top: 56px; }

.sv-pic:before{ overflow: hidden; width: 0; height: 0;padding: 0; }
.begin .sv-pic:before{ width: 100%; height: 100%; }

.sv-a { opacity: 0; transform: scale3d(0.7, 0.7, 1); position: relative; z-index: 2; }
.begin .sv-a { opacity:1; transform: scale3d(1, 1, 1); }
.sv-c { opacity: 0; transform: translate3d(-200px,-450px, 0) scale3d(0.2, 0.2, 1) }
.begin .sv-c { opacity: 1; transform: translate3d(0,0, 0) scale3d(1, 1, 1)  }

/* 8 */
.eight-screen { padding-top: 200px; background: #fafafa; padding-bottom: 100px; }
.ei-pic { position: relative; padding-left: 120px; }
.ei-pic-box { position: relative; background: #4b4b4c; text-align: center; padding: 60px 0; margin-top: 120px; }
.ei-line-box { position: absolute; left: 9px; top: 9px; bottom: 9px; right: 9px; }
.ei-line-a:before, .ei-line-a:after, .ei-line-b:before, .ei-line-b:after { content: ''; position: absolute; }
.ei-line-a:before, .ei-line-b:before { background: url('../images/3Dpic/ei-line01.png') top left repeat-x; height: 2px; width: 100%; left: 0; top: 0; }
.ei-line-a:after, .ei-line-b:after { background: url('../images/3Dpic/ei-line02.png') left top repeat-y; width: 2px; height: 100%; left: 0; top: 0;}
.ei-line-b:before { top: auto; bottom: 0px; }
.ei-line-b:after { left: auto; right: 0px; }
.ei-a { position: relative; z-index: 3; }
.ei-c { position: absolute; left: 0; bottom: 0; }
.ei-c img { max-width: 100%; }
.ei-b { position: absolute; left: -180px; bottom: -50px; }
.ei-line-b:before { left: auto; right: 0; background-position: right top; }

.ei-line-a:before,.ei-line-b:before { width: 0; }
.begin .ei-line-a:before,.begin .ei-line-b:before { width: 100%; }
.ei-line-a:after,.ei-line-b:after { height: 0; }
.begin .ei-line-a:after,.begin .ei-line-b:after { height: 100%; }

.ei-c { width: 20px; }
.begin .ei-c { width: 250px; }
.ei-b { opacity: 0;transform: translate3d(50px,-30px, 0)  }
.begin .ei-b { opacity: 1; transform: translate3d(0,0, 0) }
.ei-a {  opacity: 0; transform: scale3d(0.7, 0.7, 1);  }
.begin .ei-a { opacity:1; transform: scale3d(1, 1, 1); }

/* 9 */
.nine-screen { padding-top: 200px; background: #fafafa; }
.ni-word-a { text-align: right; }
.ni-word-b { text-align: right; }
.ni-pic { padding-top: 270px; text-align: right; position: relative; margin-top: -124px; padding-right: 104px; }
.ni-pic-main { border-radius: 50%; width: 370px; height: 370px; display: inline-block; padding: 34px; background: #f2f2f2; position: relative; }
.ni-pic-main:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%;  border: 2px dashed #021662; border-radius: 50%; }
.ni-pic-border { width: 100%; height: 100%; background: url('../images/3Dpic/ni-bg.png') repeat; border-radius: 50%; border: 34px solid #021662; position: relative; }
.ni-pic-border img { position: absolute; left: 50%; top: 50%; margin: -40px 0 0 -40px; }
.ni-pic-icon { position: absolute; left: 0; top: 0; }
.ni-icon { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.ni-b { top: 130px; right: -110px; }
.ni-c { bottom: -32px; left: 0; }
.ni-d { left: -62px; top: 36px; }
.ni-e { bottom: 0; left: -53px; }
.ni-pic-icon span,.ni-d,.ni-b,.ni-c { opacity: 0;transform: translate3d(-80px, -200px, 0);  }
.begin .ni-pic-icon span,.begin .ni-d,.begin .ni-b,.begin .ni-c { opacity: 1; transform: translate3d(0,0, 0) }
.ni-e { height: 0; overflow: hidden; }
.begin .ni-e { height: 102px; }

/* 10 */
.ten-screen { padding-top: 200px; background: #fafafa; }
.te-pic { background: url('../images/3Dpic/te-bg.png') repeat; padding: 30px; }
.te-pic-box { background: #fff; padding: 50px; text-align: center; position: relative; }
.te-pic-main { position: relative; display: inline-block; margin: 120px 0; }
.te-word { text-align: left; }
.te-pic-a { left: 0; top: 0; z-index: 2; }
.te-word-bottom { bottom: 50px; right: 25px; }
.te-pic-bottom { left: 30px; bottom: 40px; }
.te-pic-b { left: 0; bottom: 0; width: 100%; }
.te-pic-b img { position: absolute; bottom: 0; left: 0; }
.te-pic-a {text-align: center;display: block;width: 100%;height: 100%;}
.te-pic-a em {display: inline-block; width: 0; overflow: hidden;height: 100%;}
.te-pic-a img {position: absolute;left: 50%;margin-left: -364px;top: 0;}

.te-pic-main { transform: rotate(0deg); }
.begin .te-pic-main { transform: rotate(11deg); }
.te-pic-b { height: 0; overflow: hidden; }


/* 12 */
.twelve-screen { padding-top: 120px; background: #fafafa; padding-bottom: 120px; }
.tw-pic { text-align: right; padding-top: 280px; }
.tw-pic-box { display: inline-block; position: relative; }
.tw-b { left: 160px; bottom: 0; }

.tw-b { opacity: 0;transform: translate3d(0,80px, 0) scale3d(0.7, 0.7, 1)  }
.begin .tw-b { opacity: 1; transform: translate3d(0,0, 0) scale3d(1, 1, 1) }
.tw-a img { opacity: 0; width: 759px;  height: 120px; }
.begin .tw-a img { opacity: 1; }


/* 11 */
.eleven-screen { background: #ffffff }

.eleven-tit { color: #111111;font-size: 40px; padding-top: 90px; }
.eleven-list { width: 280px; margin: 0 50px; display: inline-block; text-align: center;  }
.eleven-con { margin-top: 80px; padding-bottom: 160px;  }
.eleven-word-a { font-size: 22px; color: #181818; padding-top: 24px;  }
.eleven-word-b { color: #999; font-size: 16px; padding-top: 4px;  }
.eleven-word-c { margin-top: 40px;  }
.eleven-link { color: #1884da; font-size: 18px; cursor: pointer;   }
.eleven-list  {  transform: translate3d(0,-50px,0); opacity: 0;  }
.begin .eleven-list {  transform: translate3d(0,0,0); opacity: 1;  }


.pic-m { display: none; }
/* css style */

@media (max-width:1240px) {
    .first-center { width: 100%; padding:0 30px;}
    .first-box { right: 30px; }
    .fi-pic { width: 50%; }
    .sv-c { width: 400px; height: 400px;bottom: -86px; right: -87px; }
    .sv-c img { width: 200px; padding-top: 68px; }
}
@media (max-width:1180px) {
    .eleven-list { margin: 0 30px; }
    .first-center {height: auto;text-align: center;padding-top: 100px;}
    .first-box {position: relative;right: auto;margin: 0 auto;top: 0;text-align: center;}
    .first-center { height: auto; text-align: center; padding-top: 80px; }
    .screen-download { margin-top: 40px; }
    .first-box { position: relative; right: auto; margin: 0 auto; top: 0; text-align: center; }
    .fi-pic {position: relative; width: 60%; height: auto; margin-top: -20px; }
    .fi-pic img { position: relative; left: 0; top: 0; }
    .first-screen { height: auto; }
    .link-video-b { display: block; z-index: 11; right: 30px; }
    .link-video-a { display: none; }
    .download-menu { top: 60px; }
    .si-right { width: 68%; overflow: hidden; }

    

}

@media (max-width:1080px) {
    .container-screen .center { width: 100%; padding: 0 30px; }
    .th-left { width: 392px; float: none; margin: 0 auto; height: 644px; }
    .th-right { width: 560px; margin: 0 auto; float: none; height: 603px; }

    .fv-c { width: 560px; }
    .si-right { width: 66%; }
    .se-word { left: 30px; }

}

@media (max-width:1024px) {
    .eleven-list { margin: 0; }
    .fv-c { width: 520px; }
    .sv-c { right: -66px }
    .tw-pic { padding-top: 380px; }

}
@media (max-width:990px) {
    .eleven-list { width: 240px; }
    .eleven-word-b { height: 52px; }

    
    .se-list span { width: 105px; }
    .se-left { width: 350px; }
   
}
@media (max-width:900px) {
    .container-screen .center { width: 100%; padding: 0 20px; overflow: hidden; }
    .pic-m { display: inline-block; }
    .pic-pc { display: none; }

    .second-screen { margin-top: 60px; }

    .se-word { position: relative; left: auto; padding-bottom: 50px; }
    .se-left { width: 150px; }
    .se-tit { padding-top: 0; }
    .se-left { padding-top: 0; }
    .th-word-a,.th-word-b { float: none; }
    .th-word { text-align: right }
    .second-screen { padding-bottom: 60px; }
    .third-screen { padding-top: 60px; }
    .th-pic { margin-top: 60px; }
    .fo-pic img { max-width: 100%; }
    .fo-pic-box { width: 100%; height: 800px; }
    .fo-pic-box .fo-d { left: 46%; top: 16%; }
    .fo-pic-box p { left: 100px; }
    .fo-pic-box .fo-c { left: 10px; top: 40%; }
    .fv-word { padding-left: 50%; }
    .word-tit-a span, .word-tit-b span { display: inline; }
    .five-screen { padding-top: 60px; }

    .fv-pic { margin-top: 60px; } 

    .fv-pic-box { width: 100%; height: auto; }
    .fv-c { position: relative; left: 0; top: 0; width: 100%; }
    .fv-b { position: relative; right: auto; top: 0; padding-top: 50px; text-align: center; }
    .fv-a { text-align: center; }
    .fv-b { padding-top: 40px; text-align: center; }

    .fv-c { width: 600px; margin: 0 20px; margin: 0 auto; margin-top: -100px; height: 420px; }
    .fv-c-a { padding-top: 140px;margin-top: 0px; }
    .fv-c-a {  }
    .si-left { width: auto; margin: 34px 20px 0 20px; height: auto; padding-bottom: 100px; }
    .si-right { width: 100%; margin: 0; padding: 20px 20px; }
    .si-right img { max-width: 100%; }
    .si-b { top: -100px; }
    .fo-word-a span, .fo-word-b span {
        display: block;
    }
    .sv-word-a span, .sv-word-b span {
        display: block;
    }
    .sv-pic { width: 100%; }
    .sv-c { width: 300px; height: 300px; bottom: -20px; right: -20px; }
    .sv-c img { width: 150px; }
    .ei-pic { padding-bottom: 30px; }
    .ni-word-a span, .ni-word-b span {
        display: block;
    }
    .ni-pic { padding-top: 360px; }
    .te-pic-main { width: 600px; margin-top: 30px; margin-bottom: 200px; }
    .te-pic-main img { width: 600px; }
    .te-pic-a img { width: 600px; margin-left: -300px; }
    .tw-pic { padding-top: 480px; }
    
}
@media (max-width:860px) {
    .fi-line { right: -5%; }
    .si-img-tit { top: -130px; right: 20px; }
    .si-img-c { left: 17%; top: 10px; }
    .si-jt { left: 150px; top: -196px; }
}
@media (max-width:810px) {
    
}
@media (max-width:767px) {
    .eleven-tit { font-size: 1.6rem; padding-top: 50px; }
    .eleven-con { margin-top: 50px; padding-bottom: 60px; }
    .eleven-list { margin: 0; width: 30%; }
    .eleven-word-c { margin-top: 10px; }
    .eleven-word-a { font-size: 18px; }
    .eleven-link { font-size: 14px; }
    .fi-line { right: -18%; }

   
}
@media (max-width:600px) {
    .download-menu { display: none !important; }
    .screen-h1 { padding-top: 30px; }
    .eleven-word-a { height: 78px; }
    img { max-width: 100%; }

    .first-screen { height: 650px; }
    .first-center h1 { font-size: 2.2rem; }
    .first-center h2 { font-size: 1.2rem; }
    .screen-download { display: none; }
    .fi-pic { position: absolute; width: 80%; }
    .link-video-b { display: block; z-index: 11; right: 10px; bottom: 20px; }
    .first-center { padding-top: 18%; }
    .word-tit-a { font-size: 1.6rem; }
    .word-tit-a span, .word-tit-b span {
        display: block;
    }
    .second-screen { margin-top: 40px; }
    .word-tit-b { padding-top: 15px; }
    .se-word { padding-bottom: 40px; }
    .se-left { position: absolute; left: 20px; top: 171px; }
    .se-right { width: 100%; padding-left: 96px; }
    .se-pic-box { width: 100%; height: 420px; }
    .se-e { right: 12px; }
    .se-f { right: 12px; top: 64px; padding-left: 6px; width: 130px; }
    .begin .se-f p { height: 225px; }
    .se-g { height: 240px; }
    .se-pic-box { padding: 12px; }
    .se-list { padding-top: 30px; }

    .link-video .fi-icon-video { margin-right: 3px; }
    .link-video .fi-icon-video img { width: 18px; }
    .link-video-b { font-size: 0.8rem; }
    .third-screen { padding-top: 40px; }

    .word-tit-b { font-size: 0.8rem; }
    .th-pic { margin-top: 40px; padding: 20px; } 
    .th-left { width: 100%; height: 520px; }
   


    .th-right { width: 100%; padding-right: 0; height: 420px; }
    .begin .th-right-box { width: 100%; }
    .th-right-box { width: 100%; padding: 60px 20px; height: 330px; }

    .five-swiper-inside { width: 90%; padding: 0; height: 330px; }
    .th-d img { width: 240px; }

    .four-screen {padding-top: 60px;}
    .fo-pic { margin-top: 50px; }
    .fo-pic-box { width: 320px; margin: 0 auto;float: none; height: 350px; }
    .fo-pic-box p { left: 0; }
    .fo-pic-box .fo-e { width: 60px; top: -50px; right: 0; }
    .fo-pic-box .fo-d { width: 70px; left: 120px; top: 60px; }
    .fo-pic-box .fo-c { width: 90px; top: 150px; left: -25px; }
    .five-screen { padding-top: 40px; }
    .fv-word { padding-left: 30%; } 
    .fv-word-b span {
        display: inline;
    }
    .fv-pic { margin-top: 40px; }
    .fv-a { padding: 30px; }
    .fv-pic { padding-bottom: 220px; }
    .fv-a  { padding: 30px 0; text-align: center; }
    .fv-a img { width: 300px; }
    .fv-pic-box { height: 700px; }
    .begin .fv-b { height: 50px; }
    .fv-c { width: auto; margin: 0 10px; }
    .fv-b { padding-top: 0; }
    .fv-c { width: auto; margin: 0 10px; height: auto; }
    .fv-c-a { padding: 80px 40px; padding-top: 100px; }
    .six-screen { margin-top:60px; }
    .si-b { width: 140px; right: -40px; top: -96px; }
    .si-left { padding-bottom: 60px; padding-top: 50px;margin: 10px 10px 0 10px;    font-size: 1.0rem; }
    .si-a { width: 160px; }
    .si-right { padding: 10px; }
    .si-pic-box { padding-bottom: 10px; }
    .six-screen { padding-bottom: 60px; }
    .seven-screen { padding-top: 60px; }
    .sv-word { padding-left: 50%; }
    .sv-word-b span { display: inline;  }
    .sv-pic { margin-top: 40px; padding: 15px; }
    .sv-a { padding: 0 20px; }
    .sv-a { max-width: 290px; }
    .sv-pic { height: auto; }
    .sv-c { width: 160px; height: 160px; right: -10px; bottom: -10px; }
    .sv-c img { width: 80px; padding-top: 29px; }
    .eight-screen { padding-top: 60px; }

    .eight-screen { padding-bottom: 0; }
    .ei-pic { padding: 0;    margin-top: 60px; }
    .ei-pic-box { margin-top: 0;  padding: 80px 50px;}
    .ei-c { top: 0; }
    .ei-b { top: -30px; left: -20px; width: 120px; bottom: auto; }
    .ei-b { transform: translate3d(50px,30px, 0); }

    .nine-screen { padding-top: 60px; }
    .ni-pic { margin-top: 30px; padding-right: 0; }
    .ni-pic-icon { left: -20px; }
    .ni-icon-a { display: block; }
    .ni-pic { padding-top: 250px; text-align: center; }
    .ni-pic-main { width: 260px; height: 260px; }
    .ni-b { width: 120px; top: 130px; right: -60px; }
    .ni-c { width: 120px; bottom: 0; }
    .ni-d { width: 120px; left: -30px; } 
    .ni-pic-border img { width: 60px; height: 60px;     margin: -30px 0 0 -30px; }
    .ni-e { bottom: 0; left: -33px; }
    .ten-screen { padding-top: 60px; }
    .te-pic { padding: 15px; }
    .te-pic-box { padding: 30px 20px; }
    .te-pic-main { width: 240px; }
    .te-pic-a img { width: 240px; margin-left: -120px; max-width: 1000px; }
    .te-pic-main img { width: 240px; }
    .te-pic-bottom { width: 100px; left: 20px; }
    .te-pic-main { margin-bottom: 150px; }
    .te-word-bottom { right: 20px; bottom: 35px; }
    .te-word-bottom span { width: 150px; display: block; }
    .twelve-screen { padding-top: 60px; padding-bottom: 100px; }
    .tw-b { left: 0; }
    .tw-pic { padding-top: 180px; }
    .tw-b { padding: 0 40px; }
    
    .th-c { height: auto;opacity: 0;transform: scale3d(0.8, 0.8, 1);  }
    .begin .th-c { height: auto;  opacity: 1; transform: scale3d(1, 1, 1);}
    .th-left .th-c  { transition: all 1s 0.6s ease-out; }
    .fv-b { height: 50px; width: 0; }
    .fv-b img { max-width: 1000px; margin-left: -20px; }
    .begin .fv-b { width: 100%; height: 50px; }
    .fv-pic .fv-b { transition: width 0.6s 0.6s ease-out; }
    .fv-c { margin-top: -65px; }


}
@media (max-width:420px) {
    .pagination {     margin: 10px 0; }
    .fi-pic {  width: 100%; }
    .first-center { padding-top: 30%; }
    .fo-img-a .img-pc { display: none; }
    .eleven-list { margin: 0 20px; padding-bottom: 25px; border-bottom: 1px solid #dedede; display: block; width: auto; text-align: left; position: relative; padding-left: 64px; margin-bottom: 20px; }
    .eleven-icon { position: absolute; left: 0; top: 0px; width: 50px; }
    .eleven-word-a { padding-top: 0; font-size: 1.0rem; height: auto; }
    .eleven-word-b { font-size: 0.8rem; height: auto; font-size: 14px; }
    .eleven-word-c { position: absolute; right: 0; top: 17px; margin-top: 0; }

    .container-screen .center { padding: 0 15px; }
    .se-left { left: 15px; top: 155px; }
    .se-list { font-size: 0.7rem; }
    .se-tit img { width: 40px; }
    .se-right { padding-left: 86px; }
    .se-f { width: 140px; }
    .se-g { height: 200px; }
    .se-pic-box { height: 380px; }
}
@media (max-width:375px) { }
@media (max-width:370px) {
    .eleven-list { margin: 0 15px; padding-left: 54px; margin-bottom: 20px; }
    .eleven-word-b { font-size: 0.7rem; }
    .th-left { height: 460px; }
    /* eleven end */

}
@media (max-width:320px) {
    .eleven-word-b { font-size: 0.7rem; }
    .eleven-list { margin: 0 10px; margin-bottom: 20px; }
    
    .th-left { height: 420px; }
    /* eleven end */
 
}