@charset "utf-8";*,:before,:after { margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, pre, form, fieldset, figure, figcaption, table, th, td img { margin: 0; padding: 0; } body { font-family: "Microsoft YaHei","微软雅黑"; color: #333; font-size: 16px; line-height: 1.5; margin: 0 auto; background-color: #FFF; } ol,ul,li { list-style: none; } i,em { font-style: normal; } a { color: #333; text-decoration: none; outline: none; cursor: pointer; -ms-transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; } a:hover, a:active, a:link, a:visited { text-decoration: none; } fieldset,img,video { max-width: 100%; height: auto; border: none; vertical-align: middle; } input,select,textarea,button { color: #333; font-size: 16px; font-family: "Microsoft Yahei",sans-serif; outline: none; border: none; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } input, button { border-radius: 0; -webkit-appearance: none; } /*清除IOS默认圆角*/ textarea { resize : none; outline: none; border: none; -webkit-appearance: none; } /*去除右下角拖动边框标识*/ input:-ms-clear { display: none; } /*消除 IE10 里的叉号*/ input[type="button"], input[type="submit"], input[type="reset"] { -webkit-appearance: none; outline: none; cursor: pointer; } ::-webkit-input-placeholder { color: #e1e1e1; } ::-moz-placeholder { color: #e1e1e1; } :-ms-input-placeholder { color: #e1e1e1; } :-moz-placeholder { color: #e1e1e1; } table { border-collapse: separate; } /*边线重叠*/ .clearfix:after { content: "."; display: block; height: 0; line-height: 0; clear: both; visibility: hidden; } .clearfix { zoom:1;} .wp { width: 98%; max-width: 1410px; margin: 0 auto; } /* index tyle */ .header { overflow: hidden; position: absolute; left: 0; top: 0; width: 100%; padding: 40px 0; z-index: 99; } .header .lx { float: right; margin-top: 10px; width: 114px; line-height: 40px; text-align: center; font-size: 18px; color: #ffffff; background-color: #fb605a; -moz-box-shadow: 0 5px 15px rgba(250,123,118,0.4); box-shadow: 0 5px 15px rgba(250,123,118,0.4); text-transform: uppercase; } .header .lx:hover { background-color: #ff0000; } .logo { float: left; } .logo img { display: block; } .nav { overflow: hidden; text-align: center; padding-top: 13px; } .nav li { display: inline-block; margin: 0 20px; position: relative; } .nav li a { display: block; font-size: 18px; color: #0b1c51; line-height: 28px; text-transform: capitalize; padding-bottom: 10px; } .nav li:before { content: ""; position: absolute; bottom: 0; width: 0%; height: 3px; background-color: #FB605A; left: 50%; -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); transition: all .3s ease; } .nav li:hover:before, .nav li.on:before { width: 50%; } .pro-top { padding-bottom: 250px; overflow: hidden; position: relative; } .pro-top .pro { display: block; float: right; width: 79.5%; } .pro-top .left { position: absolute; left: 0; top: 208px; width: 54%; padding-left: 100px; padding-top: 140px; } .pro-top .left:before { content: ""; position: absolute; top: 0; left: 190px; width: 1px; height: 100px; background-color: #000; } .pro-top .left:after { content: ""; position: absolute; top: 215px; left: 30px; width: 18px; height: 12px; background: url(../images/y-ico9.png) no-repeat center; } .pro-top .left .tit { display: block; margin-bottom: 122px; } .pro-top .left .swt { display: block; width: 248px; line-height: 64px; text-align: center; font-size: 20px; color: #ffffff; font-weight: bold; border-radius: 6px; background-color: #0b1c51; position: relative; padding-right: 20px; margin-bottom: 60px; cursor: pointer; -ms-transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; } .pro-top .left .swt:hover { background-color: #284bb6; } .pro-top .left .swt:after { content: ""; position: absolute; right: 12px; bottom: -17px; width: 47px; height: 61px; background: url(../images/y-ico1.png) no-repeat center; -webkit-background-size: 100%; -moz-background-size: 100%; -o-background-size: 100%; background-size: 100%; cursor: pointer; } .pro-top .left .type { overflow: hidden; } .pro-top .left .type .ly { float: left; margin-right: 105px; width: 248px; line-height: 64px; text-align: center; font-size: 20px; color: #0b1c51; font-weight: bold; background: url(../images/y-ico2.png) no-repeat center; -webkit-background-size: 100%; -moz-background-size: 100%; -o-background-size: 100%; background-size: 100%; cursor: pointer; -ms-transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; } .pro-top .left .type .email:hover { text-decoration: none; } .pro-top .left .type .ly:hover { font-size: 22px; } .pro-top .left .type .email { float: left; font-size: 30px; color: #f1641a; line-height: 64px; padding-left: 100px; background: url(../images/y-ico3.png) no-repeat center left; font-weight: bold; text-decoration: underline; cursor: pointer; } .pro-top .right { background: url(../images/y-bg1.png) repeat center; width: 45%; position: absolute; right: 0; bottom: 105px; padding: 46px 70px 40px; } .pro-top .right .item { overflow: hidden; margin-bottom: 45px; } .pro-top .right .item .part { float: left; text-align: center; padding-right: 70px; margin-right: 70px; position: relative; } .pro-top .right .item .part:after { content: ""; position: absolute; right: 0; top: 50%; width: 1px; height: 80px; background-color: #7899ff; margin-top: -40px; } .pro-top .right .item .part:last-child:after { display: none; } .pro-top .right .item .part:last-child { margin-right: 0; padding-right: 0; } .pro-top .right .item .part strong { display: block; font-size: 36px; color: #d8a846; line-height: 46px; margin-bottom: 30px; } .pro-top .right .item .part p { font-size: 22px; color: #ffffff; line-height: 32px; } .pro-top .right .con { font-size: 24px; color: #bfcfff; line-height: 44px; } .pro-top .right .con span { color: #d8a846; } .pro-part1 { background: url(../images/y-bg2.png) no-repeat top right; overflow: hidden; margin-bottom: 66px; } .pro-part1 img { float: left; width: 55.4%; margin-right: 76px; } .pro-part1 .txt { overflow: hidden; padding-right: 11.5%; padding-top: 312px; } .pro-part1 .txt h3 { font-size: 46px; color: #060606; line-height: 66px; text-transform: uppercase; margin-bottom: 40px; padding-top: 150px; position: relative; } .pro-part1 .txt p { font-size: 18px; color: #060606; line-height: 44px; } .pro-part1 .txt h3:before { content: ""; position: absolute; left: 37px; top: 0; width: 1px; height: 100px; background-color: #000; } .pro-part2 { position: relative; margin-bottom: 65px; } .pro-part2 h3 { font-size: 56px; color: #000000; line-height: 66px; margin-bottom: 40px; text-transform: uppercase; padding-top: 150px; position: relative; } .pro-part2 h3:before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 100px; background-color: #000; } .pro-part2 p { font-size: 18px; color: #060606; line-height: 48px; margin-bottom: 50px; } .pro-part2 .con { width: 45.4%; font-size: 18px; line-height: 48px; color: #060606; } .pro-part2 .img { position: absolute; right: 0; bottom: 200px; width: 50.2%; } .ft-price { width: 1340px; padding: 70px 0 70px 270px; background: url(../images/y-bg1.png) repeat center; z-index: 1; position: relative; margin-top: 60px; } .ft-price strong { font-size: 36px; color: #ffffff; line-height: 46px; text-align: center; margin-bottom: 50px; display: block; font-style: italic; } .ft-price li { display: inline-block; margin-right: 70px; } .ft-price li img { display: inline-block; vertical-align: middle; margin-right: 30px; } .ft-price li span { display: inline-block; vertical-align: middle; font-size: 24px; color: #ffffff; line-height: 34px; width: 200px; } .pro-part3 { margin-bottom: 90px; } .pro-part3 h3 { padding-top: 155px; position: relative; font-size: 56px; color: #0b1c51; line-height: 65px; text-transform: uppercase; } .pro-part3 h3:before { content: ""; position: absolute; left: 38px; top: 0; width: 1px; height: 100px; background-color: #000; } .pro-part3 img { display: block; } .pro-part3 p { font-size: 18px; color: #666666; line-height: 28px; } .pro-part4 { padding: 70px 45px 40px; background-color: #e8edfc; border: 1px solid #7899ff; margin-bottom: 165px; } .pro-part4 h3 { font-size: 56px; color: #0b1c51; line-height: 70px; text-transform: capitalize; margin-bottom: 40px; } .pro-part4 p { font-size: 18px; color: #333333; line-height: 28px; margin-bottom: 15px; } .pro-part5 { padding: 125px 0 80px; background: url(../images/y-bg3.jpg) no-repeat center bottom; } .pro-part5 h3 { position: absolute; margin-bottom: 70px; font-size: 56px; color: #0b1c51; line-height: 65px; text-transform: uppercase; } .pro-part5 h3:before { content: ""; position: absolute; top: -120px; width: 1px; height: 100px; background-color: #000; left: 38px; } .slick-case { position: relative; -ms-touch-action: pan-y!important; touch-action: pan-y!important } .slick-case .slick-arrow { position: absolute; bottom: 40px; width: 80px; height: 80px; border: 1px solid #fff; background-repeat: no-repeat; background-position: center; left: auto; z-index: 1; top: auto; } .slick-case .slick-prev { right: 185px; background-image: url(../images/y-ico7.png); } .slick-case .slick-next { right: 66px; background-image: url(../images/y-ico8.png); } .slick-case .item { padding-top: 126px; } .slick-case .left { width: 50%; position: relative; z-index: 2; } .slick-case .left img { display: block; width: 100%; margin-bottom: 40px; } .slick-case .left .tit { font-size: 42px; color: #ffffff; line-height: 56px; margin-bottom: 50px; display: block; padding-right: 125px; } .slick-case .left .swt { display: block; width: 350px; line-height: 72px; text-align: center; border-radius: 72px; font-size: 20px; color: #0f2159; text-transform: capitalize; background-color: #f5cb7f; background: -moz-linear-gradient(left, #daa847 0%, #f5cb7f 100%); background: -webkit-linear-gradient(left, #daa847 0%,#f5cb7f 100%); background: -o-linear-gradient(left, #daa847 0%,#f5cb7f 100%); background: -ms-linear-gradient(left, #daa847 0%,#f5cb7f 100%); background: linear-gradient(to right, #daa847 0%,#f5cb7f 100%); -moz-box-shadow: 0 0 10px rgba(219,167,70,0.2); -webkit-box-shadow: 0 0 10px rgba(219,167,70,0.2); box-shadow: 0 0 10px rgba(219,167,70,0.2); -ms-transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; } .slick-case .left .swt:hover { opacity: .9; filter: alpha(opacity=90); } .slick-case .right { position: absolute; right: 0; width: 745px; background: url(../images/y-bg4.jpg) no-repeat center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; top: 0; padding: 130px 100px 80px 200px; margin-right: 60px; margin-top: 50px; -moz-box-shadow: 0 0 30px rgba(29,32,37,0.4); -webkit-box-shadow: 0 0300px rgba(29,32,370,0.4); box-shadow: 0 0 30px rgba(29,32,37,0.4); } .slick-case .right p { color: #ffffff; font-size: 22px; line-height: 40px; margin-bottom: 26px; } .slick-case .right p strong { float: left; margin-right: 10px; } .slick-case .right p span { overflow: hidden; display: block; } .slick-case .right em { font-weight: bold; font-size: 100px; color: #d9a845; line-height: 110px; position: absolute; right: -60px; top: -50px; z-index: -1; } .slick-case div { outline: none; } .pro-part5 { margin-bottom: 140px; } .pro-part6 { margin-bottom: 105px; overflow: hidden; } .pro-part6 .wp { padding: 0 5.987%; } .pro-part6 h3 { font-size: 56px; color: #000000; text-align: center; position: relative; padding-top: 135px; line-height: 65px; } .pro-part6 h3:before { content: ""; position: absolute; top: 0; width: 1px; height: 100px; background-color: #000; left: 50%; } .pro-part6 ul { margin: 55px auto 0; } .pro-part6 li { float: left; width: 33.33%; padding-top: 78px; } .pro-part6 .item { margin: 0 22px 40px; position: relative; padding: 36% 22px 25px; -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2); -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2); box-shadow: 0 0 10px rgba(0,0,0,0.2); } .pro-part6 .item .img { position: absolute; top: -78px; left: 0; margin-right: 30px; right: 0; } .pro-part6 .item .img img { display: block; border-radius: 0 0 80px 0; overflow: hidden; width: 100%; } .pro-part6 .item p { font-size: 18px; color: #000000; line-height: 44px; padding-left: 20px; position: relative; font-weight: bold; } .pro-part6 .item p:before { content: ""; position: absolute; left: 0; top: 10px; width: 10px; height: 10px; border-radius: 10px; border: 1px solid #ab9337; } .pro-part6 .item span { position: absolute; right: 34px; bottom: 20px; font-size: 48px; color: #f5f5f5; line-height: 1; font-weight: bold; z-index: -1; } .pro-part7 { background: url(../images/y-bg5.jpg) no-repeat center; } .pro-part7 .form { background: url(../images/y-bg7.png) no-repeat center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 720px; padding: 55px 80px; } .pro-part7 .tit { color: #ffffff; margin-bottom: 70px; } .pro-part7 .tit strong { font-size: 70px; display: block; margin-bottom: 10px; line-height: 80px; margin-bottom: 10px; } .pro-part7 .tit p { font-size: 28px; line-height: 38px; } .pro-part7 .con { font-size: 16px; color: #ffffff; line-height: 2; } .pro-part7 .con em { color: #e1a64c; font-size: 81px; line-height: 82px; font-weight: bold; margin-right: 8px; } .pro-part7 .con span { font-size: 18px; color: #e1a64c; } .pro-part7 .con p { margin: 30px 0 80px; } .pro-part7 .con p a { font-size: 18px; color: #e1a64c; font-weight: bold; } .pro-part7 .con p a:hover { text-decoration: underline } .pro-part7 .item { overflow: hidden; margin: 0 -2% 60px; position: relative; } .pro-part7 .item .inp { border: none; float: left; width: 46%; margin: 0 2%; border-bottom: 1px solid #727272; padding: 10px; font-size: 16px; color: #ffffff; line-height: 36px; } .pro-part7 .item em { position: absolute; font-size: 16px; color: #b91314; left: 9px; top: 50%; margin-top: -10px; line-height: 20px; } .pro-part7 .area { border: none; border-bottom: 1px solid #727272; display: block; width: 100%; height: 90px; padding: 10px; font-size: 16px; color: #ffffff; line-height: 36px; text-align: left; margin-bottom: 90px; } .pro-part7 .sub:hover { font-size: 22px; } .pro-part7 .sub { width: 215px; display: block; height: 64px; line-height: 64px; text-align: center; font-size: 20px; color: #ffffff; text-transform: capitalize; background: url(../images/y-bg6.png) no-repeat center; -ms-transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; } .pro-part7 .item .inp,.pro-part7 .area { background-color: transparent; } .footer { font-size: 14px; line-height: 24px; padding: 36px 0 75px; background-color: #04123b; color: #ffffff; text-align: center; } .navBtn { display: none; } /* 弹窗 */ .popu-msg { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 99999; display: none; } .msg-box { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); } .msg-close { position: absolute; right: 20px; top: 20px; background: url(../images/msg-close.png) no-repeat; width: 16px; height: 16px; cursor: pointer; } .popu-show { position: absolute; left: 50%; top: 50%; width: 96%; max-width: 800px; background-color: #FFF; -ms-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .popu-show .msg-con { width: 100%; margin-left: 0; } .popu-show.foot-msg p { width: 100%; } .popu-show .msg-sub { left: 250px; } .popu-case { max-width: 660px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; } .popu-case .msg-fill { width: 100%; } .popu-case .fill-btn { text-align: center; margin-left: 0; } .popu-case .msg-close { top: -24px; right: -24px; } .msg-fill { float: left; width: 63%; padding: 22px 50px 36px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; background-color: #FFF; } .msg-fill li { position: relative; line-height: 70px; border-bottom: 1px dashed #DDD; } .msg-fill li img { position: absolute; left: 18px; top: 20px; width: 28px; height: auto; } .msg-fill ul li input,.msg-fill ul li textarea { width: 100%; line-height: 30px; color: #606267; font-size: 20px; background: none; position: relative; z-index: 2; padding: 22px 20px 22px 68px; } .fl-area textarea { height: 180px; } .msg-fill span { position: absolute; left: 0; top: 0; width: 100%; line-height: 30px; color: #B5B8C1; font-size: 20px; padding: 22px 20px 22px 68px; } .msg-fill span i { color: #F3632D; padding-left: 2px; } .fill-btn { margin-top: 30px; margin-left: 50px; } .fill-btn input { color: #FFF; font-size: 20px; width: 180px; height: 50px; line-height: 50px; -webkit-border-radius: 10px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; border-radius: 50px; background: -webkit-linear-gradient(top, #FFAA6E 0%,#F92C0B 100%); background: -moz-linear-gradient(top, #FFAA6E 0%, #F92C0B 100%); background: -ms-linear-gradient(top, #FFAA6E 0%,#F92C0B 100%); background: -o-linear-gradient(top, #FFAA6E 0%,#F92C0B 100%); background: linear-gradient(to bottom, #FFAA6E 0%,#F92C0B 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#FFAA6E, endColorstr=#F92C0B, GradientType=0); -webkit-box-shadow: 0 1px 6px rgba(255,108,44,.5); -moz-box-shadow: 0 1px 6px rgba(255,108,44,.5); -ms-box-shadow: 0 1px 6px rgba(255,108,44,.5); -o-box-shadow: 0 1px 6px rgba(255,108,44,.5); box-shadow: 0 1px 6px rgba(255,108,44,.5); cursor: pointer; margin-left: -6%; } .fill-btn input[type='submit'] { -ms-transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; } .fill-btn input:hover { -webkit-box-shadow: inset 0 2px 16px rgba(255,108,44,.9); -moz-box-shadow: inset 0 2px 16px rgba(255,108,44,.9); -ms-box-shadow: inset 0 2px 16px rgba(255,108,44,.9); -o-box-shadow: inset 2px 16px rgba(255,108,44,95); box-shadow: inset 0 2px 16px rgba(255,108,44,.9); } .msg-base { float: right; width: 30%; color: #FFF; padding-right: 2%; padding-top: 6%; } .msg-base strong { display: block; font-size: 32px; line-height: 1.1; margin: 55px 0 20px; } .msg-base a { color: #FFF; font-size: 20px; position: relative; } .msg-base a:after { content: ""; position: absolute; left: 0; bottom: 1px; width: 100%; height: 2px; background-color: #FFF; } .msg-base a:hover:after { display: none; } .msg-base span { display: inline-block; width: 190px; height: 46px; line-height: 46px; text-align: center; color: #FFF; font-size: 16px; background-color: #FF8800; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; cursor: pointer; -ms-transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; } .msg-base span:hover { background-color: #E5472E; } .msg-base p { font-size: 18px; line-height: 24px; margin-top: 60px; } /* 弹窗 end */ .show-fix { position: fixed; right: 12px; top: 220px; width: 145px; height: 345px; z-index: 9999; } .fix-online { position: absolute; top: 0; width: 100%; height: 100%; cursor: pointer; } .fix-msg { position: absolute; left: 0; bottom: 0; width: 100%; color: #666; line-height: 20px; font-size: 16px; background: url(../images/fix-icon.png) no-repeat 36px top; padding: 26px 0 30px 36px; } .fix-msg:hover { color: #FB605A; background-image: url(../images/fix-icons.png); } .show-fix p { width: 140px; color: #FFF; padding: 10px 15px; font-weight: 400; line-height: 1.6; background-color: #FB605A; left: -60px; top: 12%; -webkit-transition: all .3s cubic-bezier(.86,0,.07,1); transition: all .3s cubic-bezier(.86,0,.07,1); -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.2); box-shadow: 0 2px 2px rgba(0,0,0,.2); font-size: 16px; border-radius: 3px; position: absolute; transition: .5s; -ms-transition: .5s; -moz-transition: .5s; -webkit-transition: .5s; -o-transition: .5s; opacity: 0; filter: alpha(opacity=0); z-index: 9; font-family: "思源黑体 cn" } .show-fix p:after { content: ''; position: absolute; height: 20px; width: 20px; -webkit-box-shadow: none; box-shadow: none; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; z-index: 50; background-color: #FB605A; -webkit-box-shadow: 3px 3px 10px 0 rgba(281,37,29,.2); box-shadow: 3px 3px 10px 0 rgba(281,37,29,.2); right: -6px; top: 50%; margin-top: -10px } .show-fix .show { left: -150px; opacity: 1; filter: alpha(opacity=100); } .fix-top { position: fixed; right: 20px; bottom: 80px; width: 48px; height: 48px; cursor: pointer; z-index: 9998; display: none; } @media screen and (max-width: 1900px) { .pro-top .left { width: 52%; } .pro-top .right { padding: 30px 15px; } .pro-top .right .item .part { margin-right: 30px; padding-right: 30px; } } @media screen and (max-width: 1599px) { .pro-top .right .item .part strong { font-size: 28px; margin-bottom: 8px; } .pro-top .right .con { font-size: 16px; line-height: 26px; } .pro-top .left .tit { margin-bottom: 30px; } .pro-top .left .type .ly { margin-right: 30px; } .pro-top .left .type .email { font-size: 26px; padding-left: 80px; } .pro-part1 .txt { padding-right: 5%; padding-top: 20px; } .ft-price { width: 100%; } .ft-price { padding-left: 0; text-align: center; } .ft-price li span { text-align: left; } .pro-part2 .img { bottom: 300px; } } @media screen and (max-width: 1279px) { /* .pro-top .right{position: static;} */ .header { overflow: visible; position: relative; background-color: #fff; padding: 10px 0; -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2); -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2); box-shadow: 0 0 10px rgba(0,0,0,0.2); } .logo img { height: 35px; } .header .lx { display: none; } .nav { display: none; position: absolute; left: 0; top: 55px; width: 100%; background-color: #fff; -moz-box-shadow: 0 3px 5px rgba(0,0,0,0.2); -webkit-box-shadow: 0 3px 5px rgba(0,0,0,0.2); box-shadow: 0 3px 5px rgba(0,0,0,0.2); padding-bottom: 20px; } .navBtn { display: block; float: right; width: 50px; } .wp { width: 94%; } .nav li { display: block; } .nav li a { display: block; margin: 15px 0; } .pro-top .pro { float: none; width: 100%; display: block; } .pro-top .left .swt { display: none; } .pro-top .left { width: auto; } .pro-top .left img { width: 52%; } .pro-top .right,.pro-top .left { position: static; width: auto; } .pro-top .left:before,.pro-top .left:after,.pro-part1 .txt h3:before,.pro-part2 h3:before,.pro-part3 h3:before,.pro-part5 h3:before,.pro-part6 h3:before { display: none; } .pro-part1 .txt h3,.pro-part2 h3,.pro-part3 h3,.pro-part5 h3,.pro-part6 h3 { padding-top: 30px; } .pro-top .left { padding-top: 0; margin-top: -140px; padding-left: 0; width: 94%; margin: 50px auto; } .pro-top .right .item { text-align: center; } .pro-top .right .item .part { float: none; display: inline-block; } .pro-top { padding-bottom: 0; } .pro-part1 img { float: none; width: 100%; display: block; margin-bottom: 30px; } .pro-part1 .txt { padding-right: 0; width: 94%; margin: 0 auto; } .pro-part1 .txt h3, .pro-part2 h3, .pro-part3 h3, .pro-part5 h3,.pro-part6 h3 { font-size: 40px; } .pro-part2 .con { width: auto; } .pro-part2 .img { display: none; } .ft-price li { margin-right: 30px; } .ft-price li span { font-size: 20px; } .ft-price li img { margin-right: 15px; } .ft-price li span { width: 180px; } .pro-part4 { padding: 40px; margin-bottom: 40px; } .slick-case .left { width: auto; margin-bottom: 20px; } .slick-case .right { position: static; padding: 30px; width: auto; margin: 0; } .slick-case .right em { display: none; } .pro-part5 { padding-top: 0; margin-bottom: 30px; } .pro-part5 { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .pro-part5 h3 { color: #ffffff; } .slick-case .left .tit { font-size: 32px; margin-bottom: 20px; } .slick-case .slick-arrow { -webkit-background-size: 30px; -moz-background-size: 30px; -o-background-size: 30px; background-size: 30px; width: 60px; height: 60px; bottom: -30px; } .pro-part6 .wp { padding: 0; } .pro-part6 li { width: 50%; } .pro-part6 .item .img { position: static; margin-right: 0; margin-bottom: 20px; } .pro-part6 li { padding-top: 0; } .pro-part6 .item { padding-top: 20px; } .pro-part6 .item p { line-height: 30px; } } @media screen and (max-width: 959px) { .ft-price li img { width: 30px; } .ft-price li span { font-size: 18px; width: 150px; } .ft-price li { margin-right: 30px; } .ft-price li:last-child { margin-right: 0; } } @media screen and (max-width: 767px) { .pro-part7 .form { width: auto; padding: 30px; } .slick-case .left .tit { padding-right: 0; } .pro-part7 .wp { width: 100%; } .pro-part7 .tit strong { font-size: 40px; line-height: 50px; } .pro-part7 .con em { font-size: 40px; line-height: 1; } .pro-part7 .tit { margin-bottom: 30px; } .pro-part7 .con p { margin: 20px 0; } .pro-part7 .area { margin-bottom: 30px; } .pro-part6 li { width: auto; float: none; } .pro-part6 { overflow: visible; } .pro-part6 ul { margin: 40px 0 0; } .pro-part6 .item { margin: 0 0 20px; } .pro-top .left .type .ly { width: 200px; font-size: 16px; } .pro-top .left .type .email { padding-left: 0; background: none; } .pro-top .left img { width: 75%; } .pro-top .right .item .part strong { font-size: 18px; line-height: 28px; } .pro-top .right .item .part { padding-right: 15px; margin-right: 15px; } .pro-top .right .item { margin-bottom: 20px; } .pro-part1 .txt h3, .pro-part2 h3, .pro-part3 h3, .pro-part5 h3,.pro-part4 h3 { font-size: 32px; line-height: 46px; padding-top: 0; margin-bottom: 15px; } .pro-part2 p { margin-bottom: 20px; } .pro-part1 .txt p,.pro-part2 p,.pro-part2 .con { line-height: 2; } .pro-part1 { margin-bottom: 20px; } .ft-price strong { font-size: 24px; } .ft-price { padding: 20px 0; margin-top: 30px; } .ft-price strong { margin-bottom: 15px; } .ft-price li { display: block; text-align: left; padding: 0 20px; margin-bottom: 10px; } .ft-price li span { display: block; overflow: hidden; width: auto; line-height: 50px; } .ft-price li img { float: left; margin-top: 7px; } .pro-part4 { padding: 20px; } .pro-part5 { padding-top: 20px; } .pro-part3 { margin-bottom: 30px; } .slick-case .item { padding-top: 70px; } .slick-case .left .tit { font-size: 20px; line-height: 1.8; } .slick-case .left .swt { width: 250px; line-height: 40px; font-size: 16px; } .slick-case .left img { margin-bottom: 20px; } .slick-case .right p { font-size: 16px; line-height: 1.8; margin-bottom: 12px; } .slick-case .right p strong { margin-right: 5px; } .slick-case .slick-arrow { width: 40px; height: 40px; -webkit-background-size: 20px; -moz-background-size: 20px; -o-background-size: 20px; background-size: 20px; left: 50%; } .slick-case .slick-prev { margin-left: -30px; right: auto; } .slick-case .slick-next { margin-left: 30px; right: auto; } .fix-top { right: 0.75rem; bottom: 170px; width: 36px; height: 36px; } .show-fix { display: none; } .msg-fill li { line-height: 56px; } .msg-fill ul li input, .msg-fill ul li textarea,.msg-fill span { padding: 15px 20px 15px 40px; font-size: 18px; } .msg-fill li img { left: 0; top: 16px; width: 26px; } .msg-fill ul li input, .msg-fill ul li textarea,.msg-fill span { font-size: 16px; } .fill-btn { margin-left: 0; } .fill-btn input { width: 100%; margin-left: 0; } .solu-foot { margin-top: 40px; padding-top: 30px; } .solu-foot strong { margin-left: 10px; margin-right: 10px; } .solu-foot p { margin: 10px 10px 0; font-size: 16px; } .solu-msg { margin-top: 20px; } .msg-base p { margin-top: 30px; } .msg-fill { padding: 20px; width: 100%; } .fl-area textarea { height: 150px; } } @media screen and (max-width: 479px) { .pro-part7 .con p { display: b; } .pro-part7 .item .inp { float: none; width: 100%; margin-bottom: 20px; } .pro-part7 .item { margin-bottom: 0; } .pro-part7 .form { padding: 20px; } .pro-part7 .sub { width: 150px; height: 40px; line-height: 40px; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; } .pro-part7 .con em { font-size: 34px; } .pro-part7 .tit p { font-size: 20px; } .pro-part7 .tit strong { font-size: 30px; } .pro-part7 .tit { margin-bottom: 10px; } .pro-part7 .con { margin-bottom: 20px; } .pro-part7 .item em { margin-top: -57px; } .pro-part6 { margin-bottom: 30px; } .pro-top .left .type .ly { width: 165px; } .pro-top .left .type .email { font-size: 16px; } .pro-top .left { margin: 30px auto; } .slick-case .right { padding: 15px; } .pro-part1 .txt h3, .pro-part2 h3, .pro-part3 h3, .pro-part5 h3, .pro-part6 h3 { font-size: 28px; line-height: 42px; } .pro-top .right .item .part strong { font-size: 16px; } .pro-top .left .tit { margin-bottom: 10px; } .pro-part7 .area { height: 130px; } } /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: none; /* touch-action: none; */ -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-list, .slick-track, .slick-slide, .slick-slide img { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; left: 0; top: 0; display: block; zoom: 1; } .slick-track:before, .slick-track:after { content: ""; display: table; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { float: left; height: 100%; min-height: 1px; display: none; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-prev, .slick-next { position: absolute; display: block; line-height: 0; font-size: 0; cursor: pointer; background: transparent; color: transparent; top: 50%; margin-top: -10px; padding: 0; border: none; outline: none; } .slick-prev:focus, .slick-next:focus { outline: none; } .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { filter: alpha(opacity=25); -moz-opacity: 0.25; -khtml-opacity: 0.25; opacity: 0.25; } .slick-prev:before, .slick-next:before { font-family: "slick"; font-size: 20px; line-height: 1; color: white; filter: alpha(opacity=80); -moz-opacity: 0.85; -khtml-opacity: 0.85; opacity: 0.85; ; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-prev { left: -25px; } .slick-prev:before { content: "\2190"; } .slick-next { right: -25px; } .slick-next:before { content: "\2192"; } /* Dots */ .slick-dots { position: absolute; bottom: -25px; list-style: none; display: block; text-align: center; padding: 0px; width: 100%; } .slick-dots li { position: relative; display: inline-block; margin: 0px 5px; padding: 0px; cursor: pointer; } .slick-dots li button { border: 0; background: transparent; display: block; height: 16px; width: 16px; outline: none; line-height: 0; font-size: 0; color: transparent; padding: 5px; cursor: pointer; outline: none; } .slick-dots li button:focus { outline: none; } .slick-dots li button:before { position: absolute; top: 0; left: 0; content: "\2022"; width: 20px; height: 20px; font-family: "slick"; font-size: 6px; line-height: 20px; text-align: center; /* color: black; */ filter: alpha(opacity=25); -moz-opacity: 0.25; -khtml-opacity: 0.25; opacity: 0.25; ; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-dots li.slick-active button:before { filter: alpha(opacity=75); -moz-opacity: 0.75; -khtml-opacity: 0.75; opacity: 0.75; } .slick-dots li { margin: 0; } .slick-dots li button { background-color: rgba(255, 255, 255, .3); border-radius: 50%; width: 10px; height: 10px; margin: 5px; } .slick-slider .slick-active button { background-color: #000; width: 24px; border-radius: 20px; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.8s ease-in-out; }