@charset "utf-8"; .clr-green { color: #52c329 !important; } .colorred { color: #f23030 !important; } .bg-f5 { background-color: #f5f5f5; } .pull-right { float: right; } .pull-left { float: left; } .iconfont-user { font-family: "iconfont-user" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .iconfont-global { font-family: "iconfont-global" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .text-center { text-align: center !important; } /* grayscale灰度 sepia褐色 saturate饱和度 hue-rotate色相旋转 invert反色 opacity透明度 brightness亮度 contrast对比度 blur模糊 drop-shadow阴影 */ /*@mixin filter-grayscale($filter){ -webkit-filter: $filter; !* chrome, safari, opera *! filter: $filter; }*/ /* @mixin transform($property...){ -moz-transform: $amount; -webkit-transform: $amount; transform: $amount; } */ .bg-f9 { background-color: #f9f9f9; } .bg-f { background-color: #fff; } .container { width: 100%; } .fentu-btn_base { background-color: #6abf43; width: 180px; height: 50px; line-height: inherit; font-size: 18px; color: #fff; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); -webkit-transition: background-color 0.25s ease-in-out; -o-transition: background-color 0.25s ease-in-out; transition: background-color 0.25s ease-in-out; } .fentu-btn_base:hover { background-color: #48a91c; color: #fff; } .fentu-btn { background-color: transparent; color: #48a91c; border: 1px solid #48a91c; margin-left: 30px; margin-top: 50px; line-height: 36px; position: relative; } .fentu-btn .icon-qq { color: #48a91c; font-size: 20px; margin-right: 10px; } .fentu-btn:hover { color: #fff; } .fentu-btn:hover .icon-qq { color: #fff; } .fentu-btn:focus { color: #48a91c; } .fentu-btn:focus:hover { color: #fff; } .fentu-btn.animate-ewm span { display: block; -webkit-animation: ewmshow 0.25s ease-in; -o-animation: ewmshow 0.25s ease-in; animation: ewmshow 0.25s ease-in; animation-fill-mode: forwards; } @keyframes ewmshow { to { opacity: 0; -webkit-transform: translatey(-50px); -moz-transform: translatey(-50px); -o-transform: translatey(-50px); transform: translatey(-50px); } form { opacity: 1; -webkit-transform: translatey(50px); -moz-transform: translatey(50px); -o-transform: translatey(50px); transform: translatey(50px); } } .ewe-animate { position: absolute; background-image: url(/uploads/image/wdfimages/qq.png); width: 150px; height: 150px; bottom: 0; right: 0; } .fentu-banner { width: 100%; background-color: #212830; text-align: center; font-size: 0; padding-top: 70px !important; position: relative; } @media screen and (max-width: 980px) { .fentu-banner { padding-bottom: 70px !important; } } @media screen and (max-width: 680px) { .fentu-banner { padding: 0 12px; } } .fentu-banner .banner_left { max-width: 430px; width: 100%; display: inline-block; vertical-align: middle; padding-top: 80px; padding-bottom: 60px; text-align: left; } @media screen and (max-width: 1000px) { .fentu-banner .banner_left { max-width: 400px; } } @media screen and (max-width: 980px) { .fentu-banner .banner_left { text-align: center; padding-bottom: 30px; } .fentu-banner .banner_left.banner-media-div { display: inline-block !important; padding-top: 0; } .fentu-banner .banner_left .banner-btn { position: absolute; left: 0; width: 100%; text-align: center; bottom: 35px; } } @media screen and (max-width: 980px) and (max-width: 420px) { .fentu-banner .banner_left .banner-btn .fentu-btn_base { width: 45%; } } .fentu-banner .banner_left h1 { position: absolute; max-width: 582px; margin-top: -20px; width: 100%; /* font-size: 46px; background: -moz-linear-gradient(left, rgba(#6abf43,1) 1%, rgba(#b7cb49,1) 100%); background: -webkit-linear-gradient(left, rgba(#6abf43,1) 1%,rgba(#b7cb49,1) 100%); background: linear-gradient(to right, rgba(#6abf43,1) 1%,rgba(#b7cb49,1) 100%); // background: -ms-linear-gradient(to right, rgba(#6abf43,1) 1%,rgba(#b7cb49,1) 100%); filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#b7cb49', endcolorstr='#b7cb49',gradienttype=1 ); -ms-filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#b7cb49', endcolorstr='#b7cb49',gradienttype=1 ); !*用文字做背景图切割*! background-clip:content-box; -webkit-background-clip:text; !* 文字设为透明 *! color:transparent; */ } @media screen and (max-width: 980px) { .fentu-banner .banner_left h1 { position: relative; margin-top: 0; } } .fentu-banner .banner_left h1 span { font-size: 18px; color: #6abf43; width: 100%; display: inline-block; margin-top: 10px; max-width: 425px; line-height: 24px; } @media screen and (max-width: 460px) { .fentu-banner .banner_left h1 span { font-size: 16px; padding: 0 10px; } } @media screen and (max-width: 460px) and (max-width: 460px) { .fentu-banner .banner_left h1 span { font-size: 14px; } } @media screen and (max-width: 1000px) { .fentu-banner .banner_left h1 img { width: 80%; max-width: 424px; } } @media screen and (max-width: 1000px) and (max-width: 375px) { .fentu-banner .banner_left h1 { font-size: 28px; } } .fentu-banner .banner_left h2 { font-size: 16px; color: #fff; opacity: .8; line-height: 32px; max-width: 380px; width: 100%; margin-top: 110px; } .fentu-banner .banner_left h2 strong { color: #a7ff7f; font-weight: normal; } @media screen and (max-width: 980px) { .fentu-banner .banner_left h2 { text-align: left; padding-left: 10px; margin-top: 20px; display: none; } .fentu-banner .banner_left h2.banner-media { display: inline-block !important; padding-top: 0; } } @media screen and (max-width: 980px) and (max-width: 400px) { .fentu-banner .banner_left h2 { font-size: 14px; } } @media screen and (max-width: 980px) and (max-width: 400px) and (max-width: 360px) { .fentu-banner .banner_left h2 { font-size: 12px; } } .fentu-banner .banner_left button { margin-top: 50px; } .fentu-banner .banner_right { display: inline-block; vertical-align: middle; margin-left: 30px; max-width: 538px; max-height: 315px; width: 100%; height: 315px; /* background: no-repeat;*/ margin-top: 70px; background-size: 100%; margin-bottom: 30px; } @media screen and (max-width: 1000px) { .fentu-banner .banner_right { width: 55%; } } @media screen and (max-width: 980px) { .fentu-banner .banner_right { width: 100%; margin-top: 0; /* padding-top: 50%;*/ height: auto; margin-bottom: 0; } } @media screen and (max-width: 980px) and (max-width: 768px) { .fentu-banner .banner_right { margin-left: 0px; } } @media screen and (max-width: 980px) and (max-width: 414px) { .fentu-banner .banner_right { /*padding-top: 70%;*/ } } section { width: 100%; display: inline-block; } .section-div { font-size: 0; text-align: center; position: relative; max-width: 1000px; width: 100%; margin: 0 auto; } .section-div .section-div_left { display: inline-block; vertical-align: middle; text-align: left; float: left; background-size: 100% !important; } @media screen and (max-width: 980px) { .section-div .section-div_left { max-width: none !important; } } .section-div .section-div_right { display: inline-block; vertical-align: top; text-align: left; float: right; max-width: 450px; } @media screen and (max-width: 980px) { .section-div .section-div_right { width: 100%; } } .section-div h2 { font-size: 24px; color: #333; margin-top: 80px; margin-bottom: 0; } .section-div h3 { margin-top: 30px; color: #666; font-size: 16px; line-height: 26px; margin-bottom: 0; } .section-div .section-a_left { /* background: no-repeat;*/ margin-top: 57px; margin-bottom: 49px; max-width: 546px; height: 314px; width: 100%; } .section-div .section-b_left { margin-top: 57px; margin-bottom: 49px; max-width: 450px; height: 330px; width: 100%; } .section-div .section-b_right { max-width: 450px; width: 100%; } .section-div .section-c_left { /* background: no-repeat;*/ margin-top: 57px; margin-bottom: 49px; max-width: 450px; height: 350px; width: 100%; } .section-div .section-c_right { max-width: 420px; width: 100%; } .section-div .section-d_left { /*background: no-repeat;*/ margin-top: 57px; margin-bottom: 49px; max-width: 450px; height: 330px; width: 100%; } .section-div .section-d_right { max-width: 420px; width: 100%; } .section-div.seciton-e button { margin-top: 80px; margin-bottom: 80px; } .section-div .section-e_left { width: 100%; text-align: center; padding-top: 0 !important; } .section-div .section-e_right { max-width: 1000px; width: 100%; margin: 0 auto; background-color: #fff; border: 2px solid #6abf43; -moz-border-radius: 4px !important; -webkit-border-radius: 4px !important; border-radius: 4px !important; -webkit-box-shadow: 0 4px 27px rgba(0, 0, 0, 0.09); box-shadow: 0 4px 27px rgba(0, 0, 0, 0.09); padding-bottom: 40px; margin-top: 40px; float: none; } .section-div .section-e_right h6 { margin-top: 30px; font-size: 20px; color: #48a91c; margin-bottom: 40px; text-align: center; } .section-div .section-e_right h6 span { display: inline-block; vertical-align: middle; width: 30px; background-color: #6abf43; height: 1px; margin-left: 14px; margin-right: 14px; } .section-div .section-e_right p { width: 100%; padding: 0 30px; margin-bottom: 20px; font-size: 14px; color: #333; position: relative; line-height: 20px; text-align: left; } .section-div .section-e_right p strong { font-weight: normal; color: #6abf43; } .section-div .section-e_right p span { width: 200px; display: inline-block; vertical-align: middle; margin-right: 28px; text-align: left; position: absolute; } .section-div .section-e_right p b { display: inline-block; vertical-align: middle; font-weight: normal; position: relative; padding-left: 220px; } .fentu-help{ position: absolute; right: 50px; top: 100px; } .cad span{ box-shadow: 0 0 20px 0 #fff0d5, 0 0 0 2px #f1a325!important; display: inline-block; padding: 5px; } .fentu-help span button{ padding: 0; position: relative; overflow: hidden; line-height: 50px; } .fentu-help img{ display:none; } .fentu-help.cad img{ display:inline-block; position: absolute; opacity: 0; top: 22px; left: -200px; height: 70px; transform: rotate(7deg); -ms-transform: rotate(7deg); -moz-transform: rotate(7deg); -webkit-transform: rotate(7deg); -o-transform: rotate(7deg); animation: hend 2s infinite 2s linear; z-index: 11; } @-webkit-keyframes hend { 0% { opacity: 0; left: -200px; } 1% { opacity: .8; left: -200px; } 50% { opacity: .8; left: 64px; } 90% { opacity: .8; left: 64px; } 100% { opacity: 0; left: -200px; } } @-moz-keyframes hend { 0% { opacity: 0; left: -200px; } 1% { opacity: .8; left: -200px; } 50% { opacity: .8; left: 64px; } 90% { opacity: .8; left: 64px; } 100% { opacity: 0; left: -200px; } } @-o-keyframes hend { 0% { opacity: 0; left: -200px; } 1% { opacity: .8; left: -200px; } 50% { opacity: .8; left: 64px; } 90% { opacity: .8; left: 64px; } 100% { opacity: 0; left: -200px; } } @keyframes hend { 0% { opacity: 0; left: -200px; } 1% { opacity: .8; left: -200px; } 50% { opacity: .8; left: 64px; } 90% { opacity: .8; left: 64px; } 100% { opacity: 0; left: -200px; } } .rippleria-ink{ display:none; } .cad .rippleria-ink{ display:inline-block; position: absolute; background: rgba(0, 0, 0, 0.2); border-radius: 100%; transform: scale(0); -ms-transform: scale(0); -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); z-index: 10; animation: rippleria 2s infinite 2s linear; height: 180px; width: 180px; top: -65px; left: -1px; } @-webkit-keyframes rippleria { 0% { opacity: 0; transform: scale(0); -ms-transform: scale(0); -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); } 55% { opacity: 0; transform: scale(0); -ms-transform: scale(0); -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); } 90% { opacity: 1; transform: scale(2.5); -ms-transform: scale(2.5); -moz-transform: scale(2.5); -webkit-transform: scale(2.5); -o-transform: scale(2.5); } 91% { opacity: 0; transform: scale(0); -ms-transform: scale(0); -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); } 100% { opacity: 0; transform: scale(0); -ms-transform: scale(0); -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); } } @-moz-keyframes rippleria { 0% { opacity: 0; transform: scale(0); -ms-transform: scale(0); -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); } 55% { opacity: 0; transform: scale(0); -ms-transform: scale(0); -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); } 90% { opacity: 1; transform: scale(2.5); -ms-transform: scale(2.5); -moz-transform: scale(2.5); -webkit-transform: scale(2.5); -o-transform: scale(2.5); } 91% { opacity: 0; transform: scale(0); -ms-transform: scale(0); -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); } 100% { opacity: 0; transform: scale(0); -ms-transform: scale(0); -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); } } @-o-keyframes rippleria { 0% { opacity: 0; transform: scale(0); -ms-transform: scale(0); -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); } 55% { opacity: 0; transform: scale(0); -ms-transform: scale(0); -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); } 90% { opacity: 1; transform: scale(2.5); -ms-transform: scale(2.5); -moz-transform: scale(2.5); -webkit-transform: scale(2.5); -o-transform: scale(2.5); } 91% { opacity: 0; transform: scale(0); -ms-transform: scale(0); -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); } 100% { opacity: 0; transform: scale(0); -ms-transform: scale(0); -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); } } @keyframes rippleria { 0% { opacity: 0; transform: scale(0); -ms-transform: scale(0); -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); } 55% { opacity: 0; transform: scale(0); -ms-transform: scale(0); -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); } 90% { opacity: 1; transform: scale(2.5); -ms-transform: scale(2.5); -moz-transform: scale(2.5); -webkit-transform: scale(2.5); -o-transform: scale(2.5); } 91% { opacity: 0; transform: scale(0); -ms-transform: scale(0); -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); } 100% { opacity: 0; transform: scale(0); -ms-transform: scale(0); -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); } } @media screen and (max-width: 618px) { .section-div .section-e_right p b { padding-left: 0; top: 24px; margin-bottom: 22px; text-indent: 2em; } } @media screen and (max-width: 1024px) { .section-div { padding: 0 12px; } } @media screen and (max-width: 1024px) and (max-width: 968px) and (max-width: 768px) { .section-div h2 { margin-top: 40px; } } @media screen and (max-width: 1024px) and (max-width: 968px) and (max-width: 768px) and (max-width: 414px) { .section-div h2 { font-size: 20px; } } @media screen and (max-width: 1024px) and (max-width: 968px) and (max-width: 768px) { .section-div h3 { margin-top: 20px; } } @media screen and (max-width: 1024px) and (max-width: 968px) and (max-width: 768px) and (max-width: 414px) { .section-div h3 { font-size: 14px; } } @media screen and (max-width: 1024px) and (max-width: 968px) { .section-div .section-div_left { float: none !important; width: 100%; text-align: center; height: auto; margin-bottom: 55px; margin-top: 27px; } .section-div .section-e_left { margin-top: 0; } .section-div .section-e_right h6 { margin-bottom: 30px; } .section-div .section-div_right { float: none !important; text-align: center; } .section-div .section-e_right { margin-top: 20px; } } .section-divm01 { width: 100%; padding-top: 80px; font-size: 12px; padding-bottom: 80px; } .section-left01 { float: left; margin-top: 57px; margin-bottom: 49px; max-width: 460px; height: 350px; width: 100%; } .section-right01 { float: right; margin-top: 57px; margin-bottom: 49px; max-width: 460px; height: 350px; width: 100%; } .section-left02 { width: 100%; height: 50px; background-color: #f9f9f9; } .section-left03 { width: 100%; height: 350px; background-color: white; border-radius: 15px; box-shadow: 0px 0px 35px #eaeaea; } .section-right02 { background-color: #f9f9f9; width: 100%; height: 50px; } .section-right03 { width: 100%; height: 350px; background-color: white; border-radius: 15px; box-shadow: 0px 0px 35px #eaeaea; } .section-left02 h6 { font-size: 20px; color: #8c8c8c; margin-bottom: 40px; text-align: left; position: relative; left: 8px; } .section-right02 h6 { font-size: 20px; color: #8c8c8c; margin-bottom: 40px; text-align: left; position: relative; left: 8px; } .section-03up { padding-top: 20px; padding-bottom: 40px; padding-left: 30px; margin-right: 30px; max-width: 460px; height: 170px; text-align: left; } .section-03down { padding-left: 28px; padding-right: 25px; padding-bottom: 12px; max-width: 460px; height: 100px; text-align: left; } .section-left03 h6 { margin-bottom: 40px; text-align: left; } .section-03left { float: left; margin: 30px 20px 10px 30px; max-width: 460px; height: 300px; width: 180px; text-align: left; } .section-03right { float: right; margin: 30px 30px 10px 10px; max-width: 460px; height: 300px; width: 180px; text-align: left; } .section-03up p span { line-height: 1.8; color: #999; } .section-03down p span { line-height: 1.8; color: #999; } .section-up-img { float: left; position: relative; top: 20px; } .section-down-img { float: left; position: relative; top: 20px; } .section-03left p span { line-height: 1.8; color: #999; padding-top: 18px; } .section-03right p span { line-height: 1.8; color: #999; padding-top: 18px; text-align: justify; } @media screen and (max-width: 941px) { .section-left01 { float: none; display: inline-block; } .section-right03 { text-align: center; } .section-03left { display: inline-block; float: none; } .section-right01 { float: none; display: inline-block; } } @media screen and (max-width: 941px) { .section-right01 { background-color: transparent; } .section-right03 { background-color: transparent; box-shadow: none; height: auto; } .section-03left { background-color: #fff; width: 100%; text-align: center; margin-left: 0; margin-right: 0; height: auto; padding: 20px; } .section-03right-01 { width: 190px; display: inline-block; margin: 0 auto; } .section-03right { width: 100%; } } .section-03up h6.demo1 { position: relative; top: 20px; color: #666; } .section-03down h6.demo2 { position: relative; top: 20px; color: #666; } .section-03leftg01 { width: 84px; height: 23px; line-height: 23px; position: relative; left: 0px; background-color: rgba(0, 0, 0, 0.65); color: #fff; text-align: center; } .section-03leftg01 span { color: white; position: relative; left: 10px; top: 2px; } .section-03right01 { width: 84px; height: 20px; position: relative; bottom: 20px; left: 0px; background-color: rgba(0, 0, 0, 0.5); } .section-03right01 span { color: white; position: relative; left: 10px; top: 2px; } .section-green01 { width: 3px; height: 16px; float: left; background-color: #6abf43; position: relative; top: 2px; } .section-divm01 { padding-bottom: 20px !important; font-size: 14px !important; } .section-divm01 .section-03right-01 { position: relative; } .section-divm01 .section-left02 h6, .section-divm01 .section-right02 h6 { font-size: 18px; } .section-divm01 .section-03left p { margin-top: 18px; } .section-divm01 .section-03left p span { margin-top: 0; } .section-divm01 .section-03leftg01 { left: 0; position: absolute !important; bottom: 0 !important; } .section-divm01 .section-left03 { padding-bottom: 40px; } .section-divm01 .section-left03 h6 { margin-bottom: 35px; } .section-divm01 .section-03down { margin-top: 30px; } .section-divm01 .section-03up h6.demo1, .section-divm01 .section-03down h6.demo2 { font-size: 14px !important; line-height: 16px; } .section-divm01 .section-03left p span { font-size: 14px; } @media screen and (max-width: 960px) { .section-divm01 { padding-top: 0 !important; } .section-divm01 .section-left02 h6 { font-size: 16px; } .section-divm01 .section-03down { margin-top: 0; } .section-divm01 .section-left01 { margin-top: 0; width: 48%; height: auto; } .section-divm01 .section-right01 { width: 48%; margin-top: 0; } .section-divm01 .section-03left { margin: 30px 4%; } } @media screen and (max-width: 960px) and (max-width: 941px) { .section-divm01 .section-left03 { height: auto; padding-bottom: 20px; } .section-divm01 .section-left03 .section-03up { padding: 15px 10px; padding-bottom: 0; margin-right: 0; } .section-divm01 .section-left01 { width: 100%; max-width: none; } .section-divm01 .section-left01 .section-03up { max-width: none; height: auto; padding: 15px 10px; padding-bottom: 0; margin-right: 0; } .section-divm01 .section-left01 .section-03down { max-width: none; height: auto; padding: 15px 10px; padding-bottom: 0; margin-right: 0; } .section-divm01 .section-right01 { width: 100%; max-width: none; height: auto; margin-bottom: 0; } .section-divm01 .section-right01 .section-right03 .section-03left { max-width: none; margin: 0; position: relative; padding-left: 0; border-bottom: 1px solid #eee; padding-bottom: 15px; } .section-divm01 .section-right01 .section-right03 .section-03left .section-03right-01 { width: 20%; max-width: 190px; min-width: 90px; vertical-align: top; } .section-divm01 .section-right01 .section-right03 .section-03left .section-03right-01 .section-03leftg01 { width: 100%; } .section-divm01 .section-right01 .section-right03 .section-03left .section-03right-01 .section-03leftg01 span { left: 0; } .section-divm01 .section-right01 .section-right03 .section-03left p { width: 77%; display: inline-block; padding-top: 2%; text-align: left; padding-left: 2%; } } @media screen and (max-width: 960px) and (max-width: 941px) and (max-width: 380px) { .section-divm01 .section-right01 .section-right03 .section-03left p { width: 100%; } } /*# sourcemappingurl=index.css.map */