@charset"utf-8";
/*滚动条*/
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{border-radius:0px;}
::-webkit-scrollbar-track-piece{ background: #f1f1f1; }
::-webkit-scrollbar-thumb{  background: #c1c1c1; border-radius:20px;}
::-webkit-scrollbar-thumb:hover{background: #c1c1c1;}
::-webkit-scrollbar-corner{ background: #c1c1c1;}

input , textarea { font-size: 14px; font-family: PingFang SC,Lantinghei SC,Helvetica Neue,Helvetica,Arial,Microsoft YaHei,微软雅黑,STHeitiSC-Light,simsun,宋体,WenQuanYi Zen Hei,WenQuanYi Micro Hei,"sans-serif"; resize: none; color: #333; }
* { margin:0px; padding:0px; box-sizing:border-box; }
*:focus { outline:none; }
ul { list-style:none; }
em ,i { font-style:normal; }
img { vertical-align:top; }
body { background-color: #F6FAFD; color: #000; font: 14px/1.8 PingFang SC,Lantinghei SC,Helvetica Neue,Helvetica,Arial,Microsoft YaHei,微软雅黑,STHeitiSC-Light,simsun,宋体,WenQuanYi Zen Hei,WenQuanYi Micro Hei,"sans-serif"; color:#2c2c2c; }
a { color:#2c2c2c; text-decoration:none; cursor:pointer; }

::placeholder { color: #dbdbdb; }

ul li { line-height: 1.6; padding: 8px 0; }

header { width: 100%; }
header .header_top { padding: 20px 5%; }
header .header_top img { height: 24px; }
header .tips { text-align: center;  padding: 80px 5% 100px 5%; }
header .tips h2 { font-size: 46px; line-height: 1.5; }
header .tips h2 span { color: #3b97ff; }
header .tips p { line-height: 20px; font-size: 14px; margin-bottom: 30px; background-color: #D1ECFF; padding:10px 20px; font-weight: 800; border-radius: 30px; display: inline-block; color: #3b97ff;  }
header .tips p span { padding: 0 5px; }
header .tips p img { height: 20px; margin-right: 4px; }
header .tips a { font-weight: 800; background: #2E8CF8; padding: 20px 50px; font-size: 18px; color: #ffffff; border-radius: 50px; margin-top: 30px; display: inline-block; transition: transform 0.3s ease; line-height: 24px; box-shadow: 0 0 16px 0px rgba(0, 0, 0, 0.2); }
header .tips a img { height: 24px; margin-right: 4px; }
header .tips a:hover { background:#3b97ff; transform: scale(1.1); }

.main { width: 1000px; margin: 0 auto; padding: 40px 0 80px 0; display: flex; justify-content: space-between; }
.main .left { height: 330px; width: 35%; border-radius: 20px; background: linear-gradient(30deg, #ffffff, #e5f4ff); box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.1); padding: 30px 30px 0 30px; position: relative; }
.main .right { height: 330px; width: 60%; border-radius: 20px; background: linear-gradient(130deg, #ffffff, #e5f4ff); box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.1); padding: 30px 30px 0 30px; position: relative; }
.main h2 img { height: 30px; }
.main h3 { font-weight: 800; padding: 10px 0; font-size: 20px; }
.main h4 { line-height: 1.7; color: #777777; }
.main span { background-color: #7799C1; padding: 6px 20px; border-radius: 10px; color: #ffffff; display:inline-block; position: absolute; bottom: 26px; }
.main span a { color: #ffffff;  }

.main-recommended { width: 1000px; margin: 0 auto; padding: 70px 0; background: url("/img/recommended.png") #F2F7FA no-repeat center center; background-size: 800px; border-radius: 20px; text-align: center; }
.main-recommended h2 { font-size: 24px; }
.main-recommended h3 { font-size: 16px; color: #777777; padding: 10px 240px; }
.main-recommended a { font-weight: 800; background: #2E8CF8; padding: 20px 50px; font-size: 16px; color: #ffffff; border-radius: 50px; margin-top: 20px; display: inline-block; transition: transform 0.3s ease; line-height: 24px; box-shadow: 0 0 16px 0px rgba(0, 0, 0, 0.2); }
.main-recommended a img { height: 24px; margin-right: 4px; }
.main-recommended a:hover { background:#3b97ff; transform: scale(1.1); }

.w-100 { color: #ffffff; width: 100%; background: url(/img/bg.png); background-size: cover; padding: 40px 0; text-align: center; font-size: 16px; }
.w-100 span { font-size: 24px; padding: 0 4px; font-weight: 800; }

footer { text-align: center; padding: 20px 5%; font-size: 12px; }
@media only screen and (max-width: 1000px) { 
    header { width: 100%; }
    header .tips { padding: 50px 5% 80px 5%; }
    header .tips h2 { font-size: 30px; padding: 4px 0; }
    .main { width: 100%; flex-wrap: wrap; padding: 0 5%; }
    .main .left , .main .right { width: 100%; height: auto; }
    .main .right { margin-top: 40px; }
    .main span { position: relative; bottom: 0; margin: 20px 0 30px 0; }
    .main-recommended { width: 90%; margin: 50px 5% 40px 5%; }
    .main-recommended h3 { padding: 10px 20px; }
    .w-100 { padding: 20px 5%; }
}