*,:before,:after { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,p,blockquot,filedset,input,nav,aside,header,article,section,figure,figcaption,video,audio { margin: 0; padding: 0 } h1,h2,h3,h4,h5,h6,em,i { font-size: 1em; font-style: normal; font-weight: normal } ul,ol,li { list-style: none } fieldset,img { width: 100%; border: 0 none; vertical-align: middle } table { border-collapse: collapse } table td,table th { line-height: 24px; padding: 10px 0; border: 1px solid #ccc; text-align: center } input,select,textarea,button { font: 12px/20px Arial; outline: none; resize: none } input[type="button"],input[type="submit"],input[type="reset"] { -webkit-appearance: none; outline: 0px } :focus { outline: none } a { color: #333333; text-decoration: none; outline: none; cursor: pointer } a:link,a:visited { text-decoration: none } a:active { text-decoration: none } .clearfix:after { clear: both; content: ''; display: block; height: 0; line-height: 0 } .clearfix { zoom:1} .clear { clear: both } .fl { float: left } .fr { float: right } body { font: 14px/20px Arial; color: #333333; line-height: 1; position: relative } .container { max-width: 1520px; margin: 0 auto } @font-face { font-family: 'FuturaStd_Bold'; font-style: italic; src: url("../fonts/FuturaStd-Bold.otf") format("OpenType"); font-display: swap } @font-face { font-family: 'FuturaStd_Heavy'; font-style: italic; src: url("../fonts/FuturaStd-Heavy.otf") format("OpenType"); font-display: swap } @font-face { font-family: 'FuturaStd_Light'; font-style: italic; src: url("../fonts/FuturaStd-Light_1.otf") format("OpenType"); font-display: swap } @font-face { font-family: 'FuturaStd_Medium'; font-style: italic; src: url("../fonts/FuturaStd-MEDIUM.otf") format("OpenType"); font-display: swap } @font-face { font-family: 'Monoton_Regular'; font-style: italic; src: url("../fonts/MONOTON-REGULAR_0.otf") format("OpenType"); font-display: swap } @font-face { font-family: 'QTFuturePoster'; font-style: italic; src: url("../fonts/QTFuturePoster.otf") format("OpenType"); font-display: swap } .zhuanti-body { position: relative } .special-header { height: 136px; line-height: 136px; position: absolute; left: 0; right: 0; top: 0; z-index: 9999 } .special-header .logo { float: left } .special-header .nav { float: right; overflow: hidden } .special-header .nav li { float: left; margin-left: 60px } .special-header .nav li:first-child { margin: 0 } .special-header .nav li a { font-size: 16px; color: #ffffff; font-family: 'FuturaStd_Medium'; display: block; position: relative; transition: all 0.5s ease-in-out } .special-header .nav li a i { width: 1px; height: 0px; background: #c1a468; position: absolute; left: 50%; top: 0; opacity: 0; transition: all 0.5s ease-in-out } .special-header .nav li a i:after { content: ""; width: 3px; height: 3px; background: #c1a468; border-radius: 50%; display: block; position: absolute; left: -1px; bottom: -8px } .special-header .nav li:hover a { color: #c1a468 } .special-header .nav li:hover a i { height: 30px; opacity: 1 } .special h2 { font-size: 46px; color: #082241; line-height: 60px; font-family: 'FuturaStd_Bold' } .special .same-text { font-size: 18px; color: #586e82; line-height: 30px; font-family: 'FuturaStd_Light' } .special .same-dl { overflow: hidden; position: relative } .special .same-dl dd { width: 33%; float: left } .special .same-dl dt { width: 46%; float: right } .special .same-dl dt .same-text a { color: #c8ae79; font-family: 'FuturaStd_Heavy'; text-decoration: underline } .special01 { width: 100%; background: url(../images_pc/singlepage_2/sc-bg02.jpg) center top no-repeat; background-size: cover; overflow: hidden } .special01 .container { padding: 190px 0 50px 60px; position: relative; z-index: 1; overflow: hidden } .special01 h1 { font-size: 70px; color: #ffffff; font-family: 'FuturaStd_Bold'; line-height: 80px; position: relative } .special01 h1:before { content: ""; width: 40px; height: 1px; background: #ffffff; position: absolute; left: -60px; top: 48% } .special01 .text { width: 40%; font-size: 20px; color: #9eb2d6; font-family: 'FuturaStd_Light'; line-height: 28px; margin: 15px 0 44px } .special01 .cs-show .tit { font-size: 26px; color: #ffffff; font-family: 'FuturaStd_Heavy' } .special01 .cs-show ul { margin: 22px 0 5px -10px } .special01 .cs-show ul li { overflow: hidden; display: none } .special01 .cs-show ul li p { width: 11%; background: #2358a1; color: #ffffff; text-align: center; margin-left: 10px; float: left } .special01 .cs-show ul li p span { font-size: 20px; font-family: 'FuturaStd_Light'; line-height: 24px; display: block; padding: 16px 20% } .special01 .cs-show ul li p strong { background: #2a6ab7; font-size: 26px; font-family: 'FuturaStd_Heavy'; display: block; padding: 14px 0 10px } .special01 .cs-show ul li p:hover { background: #2d72c1 } .special01 .cs-show ul li p:hover strong { background: #3788dd } .special01 .cs-show ul li p+p span { padding: 16px 30% } .special01 .cs-show ul .swiper-slide-active { display: block } .special01 .cs-show .notice { width: 34%; font-size: 16px; color: #92a5c6; font-family: 'FuturaStd_Light'; line-height: 28px } .special01 .cs-show .notice font { color: #c8ae7a; margin-right: 4px } .special01 .swt-zx { width: 240px; height: 46px; border: 3px solid #ffffff; border-radius: 50px; font-size: 20px; color: #ffffff; font-family: 'FuturaStd_Medium'; text-align: center; line-height: 40px; display: block; margin: 30px 0 26px } .special01 .swt-zx:hover { background: #ffffff; color: #3788dd } .special01 .cp-tab { margin-left: -30px } .special01 .cp-tab li { width: 10.74%; height: 196px; text-align: center; color: #64aaf3; padding: 100px 0 0; margin-left: 2%; float: left; position: relative; cursor: pointer } .special01 .cp-tab li:before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 63px } .special01 .cp-tab li span { width: 100%; height: 70px; background: #2358a1; font-size: 20px; font-family: 'FuturaStd_Light'; display: block; margin-bottom: 10px; padding: 27% 0 0 } .special01 .cp-tab li i { font-size: 20px; font-family: 'FuturaStd_Bold' } .special01 .cp-tab .small:before { background: url(../images_pc/singlepage_2/sc-ztxz01.png) center bottom no-repeat } .special01 .cp-tab .medium:before { background: url(../images_pc/singlepage_2/sc-ztxz02.png) center bottom no-repeat } .special01 .cp-tab .large:before { background: url(../images_pc/singlepage_2/sc-ztxz03.png) center bottom no-repeat } .special01 .cp-tab .swiper-item-active { color: #ffffff } .special01 .cp-tab .small.swiper-item-active:before { background: url(../images_pc/singlepage_2/sc-zt01.png) center bottom no-repeat } .special01 .cp-tab .medium.swiper-item-active:before { background: url(../images_pc/singlepage_2/sc-zt02.png) center bottom no-repeat } .special01 .cp-tab .large.swiper-item-active:before { background: url(../images_pc/singlepage_2/sc-zt03.png) center bottom no-repeat } .special01 .cp-pic { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: -1 } .special01 .cp-pic li { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: none\9 } .special01 .cp-pic li .pic { width: 77.698%; position: absolute; right: 33px; bottom: 80px; transform: scale(0); transition: all .4s } .special01 .cp-pic li .pic img { width: 95%; } .special01 .cp-pic li .price { width: 215px; background: #3788dd; font-size: 18px; color: #ffffff; font-family: 'FuturaStd_Light'; padding: 38px 2%; position: absolute; right: 0; bottom: 70px; transform: translateY(330px); transition: all .4s } .special01 .cp-pic li .price:after { content: ""; height: 66px; background: url(../images_pc/singlepage_2/sc-zs05.png) center no-repeat; background-size: 100%; display: block; position: absolute; left: -3%; right: -3%; bottom: -58px } .special01 .cp-pic li .price span { line-height: 24px; display: block } .special01 .cp-pic li .price .sp1 { font-size: 30px; font-family: 'FuturaStd_Bold'; line-height: 40px } .special01 .cp-pic li .price .sp2 { margin: 14px 0 0 } .special01 .cp-pic li i { width: 13.948%; position: absolute; right: 66px; bottom: 280px; z-index: -1; transform: translateX(500px); transition: all .4s } .special01 .cp-pic li i img { width: auto; max-width: 100% } .special01 .cp-pic .swiper-slide-active { display: block } .special01 .cp-pic .swiper-slide-active .pic { transform: scale(1) } .special01 .cp-pic .swiper-slide-active .price { transform: translateY(0) } .special01 .cp-pic .swiper-slide-active i { transform: translateX(0) } .special01 .fw-txt { position: absolute; right: 0; bottom: 480px } .special01 .fw-txt p { font-size: 16px; color: #ffb92d; font-family: 'FuturaStd_Light'; text-align: right; margin: 40px 0 } .special01 .fw-txt p:after { content: ""; width: 30%; height: 1px; background: #ffb92d; float: right; margin-top: 8px } .special02 { padding: 100px 0 } .special02 .fl { width: 61.85%; position: relative } .special02 .fl img { width: 106.053%; margin: 0 0 0 -3% } .special02 .fl dl { text-align: center } .special02 .fl dl dd { width: 73.4%; background: #ffffff; float: left; padding: 0.6%; position: relative } .special02 .fl dl dd:before { content: ""; position: absolute; left: 0; right: 30%; top: 0; bottom: 0; z-index: -1; box-shadow: 0 18px 27px rgba(2,23,60,0.3) } .special02 .fl dl dd p { width: 31.86%; margin: 0.73%; float: left; position: relative } .special02 .fl dl dd p span { font-size: 16px; font-family: 'FuturaStd_Medium'; line-height: 20px; color: #ffffff; background: rgba(41,106,184,0.5); padding: 10px 0; position: absolute; left: 0; right: 0; bottom: 0 } .special02 .fl dl dd .wl-num { text-align: right; padding: 5% 0 0 } .special02 .fl dl dd .wl-num img { width: auto; max-width: 100% } .special02 .fl dl dd .wl-num span { background: none; font-size: 18px; color: #c8ae7a; font-family: 'FuturaStd_Light'; display: block; margin-top: 5px; padding: 0; position: static } .special02 .fl dl dt { width: 23.62%; background: #ffffff; float: right; padding: 1px; position: relative } .special02 .fl dl dt:before { content: ""; position: absolute; left: 30%; right: 0; top: 0; bottom: 0; box-shadow: 0 18px 27px rgba(2,23,60,0.3); z-index: -1 } .special02 .fl dl dt p { margin: 10px; position: relative } .special02 .fl dl dt p span { background: rgba(35,88,161,0.7); font-size: 20px; color: #ffffff; font-family: 'FuturaStd_Medium'; line-height: 24px; padding: 7px 0; position: absolute; left: 0; right: 0; bottom: 0 } .special02 .fl .same-text { width: 60%; padding-left: 22px; margin-top: -30px; position: relative } .special02 .fl .same-text:before { content: ""; width: 2px; background: #082241; position: absolute; left: 0; top: 0; bottom: 0 } .special02 .fl .mark { width: 37%; padding-left: 50px; font-size: 18px; color: #082241; font-family: 'FuturaStd_Bold'; line-height: 1.5; position: absolute; right: 0; bottom: 5%; } .special02 .fl .mark:before { content: ""; width: 40px; height: 2px; background: #082241; display: block; position: absolute; left: 0; top: 0; bottom: 0; margin: auto 0; } .special02 .fr { width: 32.25% } .special02 .fr p { font-size: 18px; color: #586e82; line-height: 30px; font-family: 'FuturaStd_Light'; margin: 30px 0 } .special03 { padding: 60px 0; position: relative; margin-bottom: 110px } .special03:before { content: ""; background: #e8eff6; position: absolute; left: 36%; right: 0; top: 0; bottom: 0; z-index: -1 } .special03 .container { position: relative } .special03 .hot-cp { margin-left: -4% } .special03 .hot-cp li { width: 46%; float: left; margin-left: 4%; text-align: center } .special03 .hot-cp li img { box-shadow: 0 18px 27px rgba(2,23,60,0.5) } .special03 .hot-cp li strong { font-size: 18px; color: #173c7e; font-family: 'FuturaStd_Bold'; line-height: 24px; padding-top: 24px; display: block; position: relative } .special03 .hot-cp li strong:before { content: ""; width: 2px; height: 40px; background: #173c7e; position: absolute; left: 50%; bottom: 30px } .special03 .fl { width: 49%; padding-top: 70px } .special03 .zx-box { width: 49%; margin-top: 185px; position: absolute; left: 0; bottom: 0; z-index: 1 } .special03 .zx-box p { width: 72.5%; font-size: 20px; color: #173c7e; line-height: 30px; font-family: 'FuturaStd_Light'; padding: 7px 15px; border: 1px dashed #173c7e; border-radius: 12px; position: absolute; left: 123px; bottom: 100px } .special03 .zx-box p:before { content: ""; width: 21px; height: 20px; background: url(../images_pc/singlepage_2/sc-zs03.jpg) no-repeat; background-size: 100%; position: absolute; left: -18px; top: 25% } .special03 .zx-box .btn { width: 240px; height: 46px; background: #173c7e; border-radius: 50px; font-size: 20px; color: #ffffff; font-family: 'FuturaStd_Medium'; text-align: center; line-height: 46px; display: block; position: relative } .special03 .zx-box .btn:before { content: ""; width: 170px; height: 192px; background: url(../images_pc/singlepage_2/sc-zs01.png) no-repeat; background-size: 100%; position: absolute; left: -25px; bottom: -12px; z-index: -1 } .special03 .zx-box .btn:hover { background: #c8ae79 } .special03 .fr { width: 49% } .special03 .fr h2 { padding-left: 45px } .special03 .fr p { font-size: 18px; color: #586e82; line-height: 30px; font-family: 'FuturaStd_Light'; padding-left: 45px; margin: 33px 0 } .special03 .fr p a { color: #c8ae79; font-family: 'FuturaStd_Heavy'; text-decoration: underline } .special04 { padding: 90px 0; overflow: hidden; position: relative } .special04:before,.special04:after { content: ""; position: absolute; top: 0; bottom: 0; z-index: -1 } .special04:before { background: #173c7e; left: 0; right: 50% } .special04:after { background: #296ab8; left: 50%; right: 0 } .special04 .container:before { content: ""; border-radius: 50%; display: block; box-shadow: 0 0 200px 200px #296ab8; position: absolute; left: 6%; top: -4%; z-index: -1 } .special04 .container:after { content: ""; border-radius: 50%; display: block; box-shadow: 0 0 200px 200px #0a3a9b; position: absolute; right: 0; bottom: -4% } .special04 h2 { font-size: 30px; color: #ffffff } .special04 .same-tit:before { content: ""; width: 1px; background-image: linear-gradient(#1044a1, #296ab8, #296ab8); position: absolute; right: 47px; top: 0; bottom: 0; z-index: 1 } .special04 .same-text { font-size: 20px; color: #ffffff; color: rgba(244,244,244,0.5); margin-top: 5px } .special04 ul { margin-top: 55px; position: relative; z-index: 1 } .special04 ul li { width: 45.724%; background: url(../images_pc/singlepage_2/sc-zs06.png) right top no-repeat; padding: 10px 10px 0 0; float: left; margin-left: 8.55%; cursor: pointer } .special04 ul li:first-child { margin: 0 } .special04 ul li span { display: block; position: relative } .special04 ul li span:before,.special04 ul li span:after { content: ""; box-shadow: 0 25px 20px #000; position: absolute; left: 2%; right: 2%; top: 50%; bottom: 6%; z-index: -1; opacity: 0.6 } .special04 ul li span:before { transform: rotate(-1deg) } .special04 ul li span:after { transform: rotate(1deg) } .special04 ul li video { width: 100% } .special04 ul li p { font-size: 36px; color: #ffffff; line-height: 50px; font-family: 'FuturaStd_Bold'; text-align: center; position: relative; margin: 20px 0 0 0 } .special04 ul li p:before { content: ""; width: 2px; height: 40px; background: #ffffff; position: absolute; left: 50%; top: -50px } .special04 .sp-zs { font-size: 18px; font-family: 'FuturaStd_Light'; color: #586e82; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: -webkit-linear-gradient(left, #0b54bc, #13356f); position: absolute; right: -7px; top: 50%; transform: rotate(90deg); -ms-transform: rotate(90deg); -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg) } .special05 { width: 100%; background: url(../images_pc/singlepage_2/sc-bg01.jpg) no-repeat; background-size: cover; padding: 100px 0; position: relative } .special05:before { content: ""; height: 410px; background: #c8ae79; position: absolute; left: 21%; right: 50%; top: 0 } .special05 ul { margin: 30px 0 0 -5% } .special05 ul li { width: 45%; float: left; margin: 40px 0 0 5% } .special05 ul li .pic { padding: 0 0 0 60px; display: block; position: relative } .special05 ul li .pic:before { content: ""; width: 91px; height: 58px; background: url(../images_pc/singlepage_2/sc-num01.png) left center no-repeat; position: absolute; left: 0; bottom: 12px } .special05 ul li .pic img { box-shadow: 0 21px 21px rgba(0,0,0,0.23) } .special05 ul li p a { font-size: 18px; color: #173c7e; font-family: 'FuturaStd_Bold'; line-height: 24px; padding: 15px 0; display: block } .special05 ul li p a:after { content: ""; width: 40px; height: 2px; background: #173c7e; display: block; margin-top: 15px } .special05 ul li+li .pic:before { content: ""; background: url(../images_pc/singlepage_2/sc-num02.png) left center no-repeat } .special05 ul li+li+li .pic:before { content: ""; background: url(../images_pc/singlepage_2/sc-num03.png) left center no-repeat } .special05 ul li+li+li+li .pic:before { content: ""; background: url(../images_pc/singlepage_2/sc-num04.png) left center no-repeat } .special06 { padding: 100px 0 } .special06 ul { margin-top: 70px; padding: 20px 2.18% 0; position: relative } .special06 ul:before { content: ""; background: #c8ae79; position: absolute; left: 0; right: 0; top: 0; bottom: 42%; box-shadow: 0 21px 21px rgba(67,47,7,0.23); z-index: -1 } .special06 ul li { width: 20.64%; float: left; text-align: center; margin: 0 2.18% } .special06 ul li p { font-size: 18px; color: #173c7e; font-family: 'FuturaStd_Bold'; line-height: 24px; padding-top: 24px; position: relative } .special06 ul li p:before { content: ""; width: 2px; height: 40px; background: #173c7e; position: absolute; left: 50%; bottom: 30px } .special07 { width: 100%; background: url(../images_pc/singlepage_2/sc-bg02.jpg) center top no-repeat } .special07 .container { padding: 85px 0; position: relative } .special07 .same-tit { font-size: 50px; color: #ffffff; position: relative; z-index: 1 } .special07 .gs_one { text-align: right; margin: 120px 0 215px } .special07 .gs_one .pic { width: 1103px; position: absolute; left: -200px; top: 0 } .special07 .gs_one .pic:before { content: ""; width: 330px; height: 330px; background: rgba(21,55,119,0.9); border-radius: 0 0 175px 0; position: absolute; left: 0; top: 0 } .special07 .gs_one .pic:after { content: ""; background-image: linear-gradient(rgba(21,55,119,0.6), rgba(21,55,119,0)); position: absolute; left: 0; right: -50px; top: 0; bottom: 63% } .special07 .gs_one .same-text { width: 37.24%; line-height: 40px; color: #ffffff; text-align: left; display: inline-block; position: relative } .special07 .gs_one .same-text:before { content: ""; width: 76px; height: 2px; background: #ffffff; position: absolute; left: -90px; top: 18px } .special07 .gs_one .same-text span { font-size: 24px; color: #c8ae79; font-family: 'FuturaStd_Bold' } .special07 .gs_two { overflow: hidden } .special07 .gs_two .same-text { width: 22.5%; color: #ffffff; line-height: 40px; float: left } .special07 .gs_two .same-text p { margin-bottom: 55px } .special07 .gs_two .same-text p:before { content: ""; width: 40px; height: 2px; background: #ffffff; display: block; margin-bottom: 12px } .special07 .gs_two .pic { width: 77.5%; float: right; overflow: hidden } .special07 .gs_two .pic p { width: 48.218%; float: left; margin-left: 4.24% } .special07 .gs_two .pic p:first-child { width: 47.54%; margin: 0 } .special08 { width: 100%; overflow: hidden } .special08 .fl { width: 31.6% } .special08 .fl .same-text { margin: 35px 0 0 } .special08 .fl .pic { margin: 30px 0; padding: 0 60px } .special08 .fl .pic img { width: auto } .special08 .fl .text p { font-size: 18px; color: #c8ae79; font-family: 'FuturaStd_Medium'; margin: 30px 0 } .special08 .fl .text p:before { content: ""; width: 40px; height: 2px; background: #c8ae79; display: inline-block; vertical-align: middle; margin-right: 20px } .special08 .fr { width: 65.8%; padding: 140px 60px 110px 150px; position: relative } .special08 .fr:before { content: ""; background: #e8eff6; position: absolute; left: 0; right: -20%; top: 0; bottom: 0; z-index: -1 } .special08 .fr input,.special08 .fr textarea { width: 100%; height: 37px; background: none; border: none; border-bottom: 2px solid #082241; font-size: 18px; color: #586e82; font-family: 'FuturaStd_Medium' } .special08 .fr textarea { height: 130px; padding: 10px 0 } .special08 .fr .form-item { overflow: hidden } .special08 .fr .form-item dl { width: 43.5%; float: left; margin: 0 0 41px 13% } .special08 .fr .form-item dl:first-child { margin: 0 } .special08 .fr .form-item dl dt { font-size: 20px; color: #082241; font-family: 'FuturaStd_Heavy'; margin-bottom: 2px } .special08 .fr .form-item dl dt span { color: #f7aa02 } .special08 .fr .icon-rt dl { width: 100% } .special08 .fr .icon-rt dl dt span { margin-left: 20px } .special08 .fr .ly_note { font-size: 18px; color: #586e82; line-height: 30px; font-family: 'FuturaStd_Medium'; margin: 14px 0 33px } .special08 .fr .submit_btn:before { content: ""; width: 61px; height: 48px; background: url(../images_pc/singlepage_2/sc-zs04.png) center no-repeat; background-size: 100%; display: inline-block; vertical-align: top; margin-right: 25px } .special08 .fr .submit { width: 240px; border: 4px solid #082241; display: inline-block; font-size: 20px; color: #082241; text-align: center; font-family: 'FuturaStd_Bold'; padding: 10px 0 } .special08 .fr .submit:hover { background: #082241; color: #ffffff } .flow-wrapper { width: 100%; background: #1c2c64; background: -webkit-linear-gradient(left, #1e1248, #1b2f68, #0747a6); background: -moz-linear-gradient(to right, #1e1248, #1b2f68, #0747a6); background: linear-gradient(to right, #1e1248, #1b2f68, #0747a6); position: relative; padding: 30px 0; overflow: hidden } .flow-wrapper:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-position: left top; background-repeat: repeat; opacity: .2 } .flow-wrapper .container { position: relative; z-index: 1 } .flow-wrapper .flow-title { width: 100%; height: 40px } .flow-wrapper .flow-title h2 { float: left; padding-left: 36px; line-height: 40px; font-size: 22px; color: #a6e0ff; font-family: 'FuturaStd_Bold'; padding-bottom: 0; background: none; position: relative } .flow-wrapper .flow-title h2:before { content: ''; width: 20px; height: 20px; border: 2px solid #a6e0ff; border-radius: 100%; position: absolute; left: 0; top: 10px } .flow-wrapper .flow-title h2:after { content: ''; display: block; width: 10px; height: 10px; border-radius: 100%; background: #ffffff; position: absolute; left: 5px; top: 15px; -webkit-box-shadow: 0 0 12px 4px white; -moz-box-shadow: 0 0 12px 4px white; box-shadow: 0 0 12px 4px white } .flow-wrapper .flow-title p { float: right; line-height: 40px; font-size: 14px; color: #a6e0ff; font-family: 'FuturaStd_Light'; opacity: .4 } .flow-wrapper ul { width: 100%; position: relative } .flow-wrapper ul:before { content: ''; display: block; height: 1px; width: 0; position: absolute; left: -260px; top: 180px; -webkit-animation: widthMove1 1s linear forwards; animation: widthMove1 1s linear forwards } .flow-wrapper ul:after { content: ''; display: block; width: 100%; clear: both } .flow-wrapper ul li { width: 12.5%; float: left; position: relative; margin-top: 32px } .flow-wrapper ul li:first-child .item-flow:before { content: ''; position: absolute; display: block; left: 0; top: 0; width: 1px; height: 100%; background: #3d5483 } .flow-wrapper ul li .item-flow { width: 100%; overflow: hidden; position: relative } .flow-wrapper ul li .item-flow:after { content: ''; position: absolute; display: block; right: 0; top: 0; width: 1px; height: 100%; background: #3d5483 } .flow-wrapper ul li .item-flow i { display: block; left: 0; right: 0; position: absolute; bottom: 0; height: 0; background: url(../images_pc/singlepage_2/flow_bg.png) left top repeat-x; -webkit-background-size: auto 100%; background-size: auto 100% } .flow-wrapper ul li .item-flow span { display: block; height: 34px; margin-top: 8px; position: relative; z-index: 1 } .flow-wrapper ul li .item-flow span img { display: block; height: 34px; width: auto; margin: 0 auto } .flow-wrapper ul li .item-flow strong { display: block; width: 100%; text-align: center; font-size: 18px; font-weight: bold; font-family: 'FuturaStd_Bold'; color: #f7aa02; height: 30px; line-height: 30px; margin-top: 8px; position: relative; z-index: 1 } .flow-wrapper ul li .item-flow em { display: block; width: 100%; text-align: center; height: 30px; line-height: 30px; font-size: 16px; font-family: Arial, Helvetica, sans-serif; overflow: hidden; color: #ffffff; margin-bottom: 12px; position: relative; z-index: 1 } .flow-wrapper ul li>span { display: block; width: 100%; text-align: center; height: 52px; line-height: 52px; color: #a6e0ff; font-family: 'FuturaStd_Light'; position: relative } .flow-wrapper ul li>span:before,.flow-wrapper ul li>span:after { content: ''; display: block; height: 1px; width: 0; position: absolute; top: 50%; background: url(../images_pc/singlepage_2/flow_line.png) left top repeat-x } .flow-wrapper ul li>span:before { left: 0 } .flow-wrapper ul li>span:after { left: 60% } .flow-wrapper ul li.flow-1 .item-flow i { -webkit-animation: heightMove 1s 1s linear forwards; animation: heightMove 1s 1s linear forwards } .flow-wrapper ul li.flow-1>span { -webkit-animation: fontChange .2s 1.5s linear forwards; animation: fontChange .2s 1.5s linear forwards } .flow-wrapper ul li.flow-1>span:before { -webkit-animation: widthMove2 .5s 1s linear forwards; animation: widthMove2 .5s 1s linear forwards } .flow-wrapper ul li.flow-1>span:after { -webkit-animation: widthMove2 .5s 1.5s linear forwards; animation: widthMove2 .5s 1.5s linear forwards } .flow-wrapper ul li.flow-2 .item-flow i { -webkit-animation: heightMove 1s 2s linear forwards; animation: heightMove 1s 2s linear forwards } .flow-wrapper ul li.flow-2>span { -webkit-animation: fontChange .2s 2.5s linear forwards; animation: fontChange .2s 2.5s linear forwards } .flow-wrapper ul li.flow-2>span:before { -webkit-animation: widthMove2 .5s 2s linear forwards; animation: widthMove2 .5s 2s linear forwards } .flow-wrapper ul li.flow-2>span:after { -webkit-animation: widthMove2 .5s 2.5s linear forwards; animation: widthMove2 .5s 2.5s linear forwards } .flow-wrapper ul li.flow-3 .item-flow i { -webkit-animation: heightMove 1s 3s linear forwards; animation: heightMove 1s 3s linear forwards } .flow-wrapper ul li.flow-3>span { -webkit-animation: fontChange .2s 3.5s linear forwards; animation: fontChange .2s 3.5s linear forwards } .flow-wrapper ul li.flow-3>span:before { -webkit-animation: widthMove2 .5s 3s linear forwards; animation: widthMove2 .5s 3s linear forwards } .flow-wrapper ul li.flow-3>span:after { -webkit-animation: widthMove2 .5s 3.5s linear forwards; animation: widthMove2 .5s 3.5s linear forwards } .flow-wrapper ul li.flow-4 .item-flow i { -webkit-animation: heightMove 1s 4s linear forwards; animation: heightMove 1s 4s linear forwards } .flow-wrapper ul li.flow-4>span { -webkit-animation: fontChange .2s 4.5s linear forwards; animation: fontChange .2s 4.5s linear forwards } .flow-wrapper ul li.flow-4>span:before { -webkit-animation: widthMove2 .5s 4s linear forwards; animation: widthMove2 .5s 4s linear forwards } .flow-wrapper ul li.flow-4>span:after { -webkit-animation: widthMove2 .5s 4.5s linear forwards; animation: widthMove2 .5s 4.5s linear forwards } .flow-wrapper ul li.flow-5 .item-flow i { -webkit-animation: heightMove 1s 5s linear forwards; animation: heightMove 1s 5s linear forwards } .flow-wrapper ul li.flow-5>span { -webkit-animation: fontChange .2s 5.5s linear forwards; animation: fontChange .2s 5.5s linear forwards } .flow-wrapper ul li.flow-5>span:before { -webkit-animation: widthMove2 .5s 5s linear forwards; animation: widthMove2 .5s 5s linear forwards } .flow-wrapper ul li.flow-5>span:after { -webkit-animation: widthMove2 .5s 5.5s linear forwards; animation: widthMove2 .5s 5.5s linear forwards } .flow-wrapper ul li.flow-6 .item-flow i { -webkit-animation: heightMove 1s 6s linear forwards; animation: heightMove 1s 6s linear forwards } .flow-wrapper ul li.flow-6>span { -webkit-animation: fontChange .2s 6.5s linear forwards; animation: fontChange .2s 6.5s linear forwards } .flow-wrapper ul li.flow-6>span:before { -webkit-animation: widthMove2 .5s 6s linear forwards; animation: widthMove2 .5s 6s linear forwards } .flow-wrapper ul li.flow-6>span:after { -webkit-animation: widthMove2 .5s 6.5s linear forwards; animation: widthMove2 .5s 6.5s linear forwards } .flow-wrapper ul li.flow-7 .item-flow i { -webkit-animation: heightMove 1s 7s linear forwards; animation: heightMove 1s 7s linear forwards } .flow-wrapper ul li.flow-7>span { -webkit-animation: fontChange .2s 7.5s linear forwards; animation: fontChange .2s 7.5s linear forwards } .flow-wrapper ul li.flow-7>span:before { -webkit-animation: widthMove2 .5s 7s linear forwards; animation: widthMove2 .5s 7s linear forwards } .flow-wrapper ul li.flow-7>span:after { -webkit-animation: widthMove2 .5s 7.5s linear forwards; animation: widthMove2 .5s 7.5s linear forwards } .flow-wrapper ul li.flow-8 .item-flow i { -webkit-animation: heightMove 1s 8s linear forwards; animation: heightMove 1s 8s linear forwards } .flow-wrapper ul li.flow-8>span { -webkit-animation: fontChange .2s 8.5s linear forwards; animation: fontChange .2s 8.5s linear forwards } .flow-wrapper ul li.flow-8>span:before { -webkit-animation: widthMove2 .5s 8s linear forwards; animation: widthMove2 .5s 8s linear forwards } .flow-wrapper ul li.flow-8>span:after { -webkit-animation: widthMove2 .5s 8.5s linear forwards; animation: widthMove2 .5s 8.5s linear forwards } @keyframes heightMove { 0% { height: 0 } 100% { height: 100% } } @-webkit-keyframes heightMove { 0% { height: 0 } 100% { height: 100% } } @keyframes widthMove1 { 0% { width: 0 } 100% { width: 262px } } @-webkit-keyframes widthMove1 { 0% { width: 0 } 100% { width: 262px } } @keyframes widthMove2 { 0% { width: 0 } 100% { width: 40% } } @-webkit-keyframes widthMove2 { 0% { width: 0 } 100% { width: 40% } } @keyframes fontChange { 0% { color: #a6e0ff; font-family: 'FuturaStd_Light'; -webkit-text-shadow: 0 0 0 rgba(166,224,255,0.5); -moz-text-shadow: 0 0 0 rgba(166,224,255,0.5); text-shadow: 0 0 0 rgba(166,224,255,0.5) } 100% { color: #ffffff; font-family: 'FuturaStd_Bold'; -webkit-text-shadow: 0 0 6px #a6e0ff; -moz-text-shadow: 0 0 6px #a6e0ff; text-shadow: 0 0 6px #a6e0ff } } @-webkit-keyframes fontChange { 0% { color: #a6e0ff; font-family: 'FuturaStd_Light'; -webkit-text-shadow: 0 0 0 rgba(166,224,255,0.5); -moz-text-shadow: 0 0 0 rgba(166,224,255,0.5); text-shadow: 0 0 0 rgba(166,224,255,0.5) } 100% { color: #ffffff; font-family: 'FuturaStd_Bold'; -webkit-text-shadow: 0 0 6px #a6e0ff; -moz-text-shadow: 0 0 6px #a6e0ff; text-shadow: 0 0 6px #a6e0ff } } .fixed-notice { display: none; width: 100%; background: #061a37; padding: 20px 200px; overflow: hidden; position: fixed; left: 0; top: 0; z-index: 10900 } .fixed-notice p { width: 100%; font-size: 18px; color: #fff; line-height: 36px; overflow: hidden; text-align: center } .fixed-notice span { display: block; position: absolute; right: 20px; top: 50%; height: 36px; padding: 0 20px; border-radius: 36px; background: #fff; color: #061a37; font-size: 16px; margin-top: -18px; line-height: 36px; cursor: pointer; transition: all .3s linear } .fixed-notice span:hover { opacity: .9 } .notice-placeholder { width: 100%; height: 76px; display: none } .fixed-notice.active,.notice-placeholder.active { display: block } .fdftm { position: fixed; width: 8.4167%; min-width: 100px; max-width: 200px; right: 10px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); z-index: 9999 } .back-top { width: 75px; height: 75px; position: fixed; z-index: 1050; bottom: 50px; right: 50px } .back-top a { display: block; width: 100%; height: 100%; overflow: hidden } .back-top a img { display: block; width: 100%; height: 100% } #LRdiv0,#LRfloater0 { display: none } @media screen and (max-width: 1600px) { .container { width:1280px } .special h2 { font-size: 40px; line-height: 50px } .special .same-text,.special02 .fr p,.special03 .fr p { font-size: 16px; line-height: 26px } .special01 h1 { font-size: 50px; line-height: 60px } .special01 .text { font-size: 17px; line-height: 24px; margin: 10px 0 38px } .special01 .cs-show .tit { font-size: 22px } .special01 .cs-show ul li p span { font-size: 17px; line-height: 20px; padding: 12px 20% } .special01 .cs-show ul li p+p span { padding: 12px 30% } .special01 .cs-show ul li p strong { font-size: 22px; padding: 12px 0 8px } .special01 .cp-tab li span { font-size: 17px; height: 62px } .special01 .cp-tab li i { font-size: 17px } .special01 .cp-pic li i { bottom: 260px } .special01 .cp-pic li .price { width: 190px; font-size: 17px; padding: 30px 2% } .special01 .cp-pic li .price:after { bottom: -54px } .special01 .cp-pic li .price span { line-height: 20px } .special01 .cp-pic li .price .sp1 { font-size: 27px; line-height: 32px } .special01 .cp-tab li:before { bottom: 70px } .special01 .cp-tab .small:before { background-size: 56% !important } .special01 .cp-tab .medium:before { background-size: 66% !important } .special01 .cp-tab .large:before { background-size: 86% !important } .special02 .fl dl dd p span,.special02 .fl dl dt p span { font-size: 14px; line-height: 22px; padding: 5px 0 } .special02 .fl dl dd .wl-num { padding: 3.5% 0 0 } .special02 .fl dl dd .wl-num span { font-size: 16px } .special02 .fl .mark { font-size: 16px } .special03 .hot-cp li strong { font-size: 16px } .special03 .zx-box p { font-size: 17px; line-height: 27px } .special04 ul li p { font-size: 28px; line-height: 30px } .special05 ul li p a { font-size: 16px } .special06 ul li p { font-size: 16px } .special07 .gs_one { margin: 80px 0 180px } .special07 .gs_one .same-text { width: 35% } .special07 .gs_one .pic { width: 977px } .special07 .gs_two .pic { width: 75% } .special07 .gs_two .same-text { line-height: 30px } .special08 .fl { padding-top: 80px } .special08 .fl .text p { font-size: 16px } .special08 .fr { padding: 120px 0 110px 110px } .special08 .fr .ly_note { font-size: 16px } .flow-wrapper ul li .item-flow strong { font-size: 16px } .flow-wrapper ul li .item-flow em { font-size: 14px } .flow-wrapper ul li>span { height: 45px; line-height: 45px } } @media screen and (max-width: 1440px) { .special-header .nav li { margin-left:40px } .special-header .nav li a { font-size: 14px } .container { width: 1120px } .special h2 { font-size: 34px; line-height: 40px } .special01 h1 { font-size: 40px; line-height: 50px } .special01 .swt-zx { width: 200px; height: 44px; font-size: 18px; line-height: 38px; margin: 24px 0 } .special02 .fl .same-text { width: 60%; margin-top: -20px } .special02 .fl .mark { width: 200px; font-size: 14px; line-height: 24px } .special03 .zx-box p { font-size: 14px; line-height: 24px } .special04 ul li p { font-size: 24px } .special07 .container { padding-bottom: 0 } .special07 .gs_one { margin: 60px 0 120px } .special07 .gs_one .pic { width: 880px } .flow-wrapper ul:before { display: none } .flow-wrapper ul li { width: 25% } .flow-wrapper ul li.flow-5 .item-flow:before { content: ''; position: absolute; display: block; left: 0; top: 0; width: 1px; height: 100%; background: #3d5483 } } @media screen and (max-width: 1280px) { .container { width:960px } .special h2 { font-size: 28px; line-height: 40px } .special .same-text,.special02 .fr p,.special03 .fr p { font-size: 14px; line-height: 22px } .special01 h1 { font-size: 30px; line-height: 40px } .special01 .text { font-size: 14px; line-height: 20px; margin: 10px 0 30px } .special01 .cs-show .tit { font-size: 18px } .special01 .cs-show ul { margin: 15px 0 5px -10px } .special01 .cs-show ul li p span { font-size: 14px; line-height: 18px; padding: 8px 20% } .special01 .cs-show ul li p+p span { padding: 8px 30% } .special01 .cs-show ul li p strong { font-size: 18px; padding: 9px 0 6px } .special01 .cs-show .notice { font-size: 14px; line-height: 20px } .special01 .cp-tab li { height: 160px; padding: 70px 0 0 } .special01 .cp-tab li span { font-size: 14px; height: 50px; margin-bottom: 7px } .special01 .cp-tab li i { font-size: 14px } .special01 .cp-pic li i { bottom: 260px } .special01 .cp-pic li .price { width: 160px; font-size: 14px; padding: 25px 2% } .special01 .cp-pic li .price:after { bottom: -50px } .special01 .cp-pic li .price span { line-height: 20px } .special01 .cp-pic li .price .sp1 { font-size: 24px; line-height: 28px } .special02 .fl dl dd p span,.special02 .fl dl dt p span { padding: 3px 0; line-height: 20px } .special02 .fl dl dd .wl-num { padding: 3.5% 0 0 } .special02 .fl dl dd .wl-num span { font-size: 14px } .special02 .fl .mark:before { width: 30px; margin-right: 10px } .special02 .fr p { margin: 20px 0 } .special03 .hot-cp li strong { font-size: 14px; line-height: 20px; padding-top: 18px } .special03 .fl { padding-top: 20px } .special04 ul li p { font-size: 20px; line-height: 30px } .special05 ul li p a { font-size: 14px } .special06 ul li p { font-size: 14px; line-height: 20px; padding-top: 20px } .special07 .container { padding: 60px 0 0 } .special07 .gs_one { margin: 40px 0 100px } .special07 .gs_one .same-text { width: 35% } .special07 .gs_one .pic { width: 785px } .special07 .gs_two .pic { width: 75% } .special07 .gs_two .same-text { line-height: 30px } .special08 .fl { padding-top: 80px } .special08 .fl .text p { font-size: 14px; margin: 20px 0 } .special08 .fl .pic { padding: 0 30px } .special08 .fl .pic img { width: 180px } .special08 .fr { padding: 80px 0 80px 90px } .special08 .fr .ly_note { font-size: 16px } } .msg-confirm { overflow: hidden; background: rgba(0,0,0,0.5); position: fixed; left: 0; right: 0; top: 50%; bottom: 50%; z-index: 9999; transition: all .5s } .msg-confirm .msg-box { width: 629px; background: #1d2c3d; padding: 30px; position: absolute; left: 50%; top: 50%; margin: -100px 0 0 -315px } .msg-confirm .msg-box .text { font-size: 18px; color: #d7d7d7; text-align: center } .msg-confirm dl { font-size: 0 } .msg-confirm dl dd,.msg-confirm dl dt { display: inline-block; vertical-align: middle } .msg-confirm dl dt { margin-left: 85px } .msg-confirm dl dd p { font-size: 20px; color: #fff; text-align: center; position: relative; margin-top: 40px } .msg-confirm dl dd p label { background: #1d2c3d; font-size: 15px; color: #ababab; font-family: FuturaStd_Medium; line-height: 1; padding: 0 10px; display: block; position: absolute; left: 15px; top: -6px } .msg-confirm dl dd p input { width: 340px; height: 53px; background: 0 0; border: 1px solid #51534f; font-size: 18px; color: #ceaa61; font-family: FuturaStd_Light; padding: 10px 0 0 22px } .msg-confirm dl dt a { width: 130px; height: 42px; background: #fff; border-radius: 50px; font-size: 18px; color: #1d2c3d; font-family: FuturaStd_Light; text-align: center; line-height: 42px; display: block; margin-top: 40px } .msg-confirm dl dt .submit { background: #ffa23f; margin-top: 44px; box-shadow: 0 6px 9px rgba(233,144,48,0.6) } .msg-show { top: 0; bottom: 0 } .swt-panel { position: fixed; width: 168px; right: 0; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); z-index: 9999 } .swt-panel .swt-content { cursor: pointer; width: 100%; height: 240px; background: url("../images/swt_bg.png") center top no-repeat } .swt-panel .swt-content p { position: absolute; top: 144px; width: 149px; left: 10px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; background: #fff; display: block; line-height: 22px; font-size: 16px; color: #c8ae79; font-family: 'Lato_Regular', Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; padding: 10px 15px 10px; -webkit-box-shadow: 0 6px 6px rgba(64,8,29,0.2); -moz-box-shadow: 0 6px 6px rgba(64,8,29,0.2); -ms-box-shadow: 0 6px 6px rgba(64,8,29,0.2); -o-box-shadow: 0 6px 6px rgba(64,8,29,0.2); box-shadow: 0 6px 6px rgba(64,8,29,0.2) } .swt-panel .swt-content p strong { color: #c88600; font-size: 18px; line-height: 24px; font-family: 'FuturaBT_Bold', Helvetica; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; font-weight: normal }