a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
    font-family: Microsoft YaHei
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block
}

ol,
ul {
    list-style: none
}

blockquote,
q {
    quotes: none
}

blockquote:after,
blockquote:before,
q:after,
q:before {
    content: '';
    content: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

.w1200 {
    max-width: 1200px;
    margin: 0 auto
}

.sticky {
    width: 100%;
    text-transform: uppercase;
    background: #fff;
    z-index: 99999999999999999;
    position: relative;
    background: #fff url(../images/hebg.png) repeat-x left bottom;
}

.fixed {
    width: 100%;
    position: fixed;
    top: 0;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .1)
}

p {
    font-size: 35%;
    font-weight: 400;
    line-height: 150%;
    color: #666
}


h1 {
	font-size: 50%;
	font-weight: 400;
	color: #333
}

h2 {
	font-size: 45%;
	font-weight: 400;
	color: #333
}

h3 {
	font-size: 40%;
	font-weight: 400;
	color: #333
}



.p_bigTit {
    font-size: 70%;
    font-weight: 400;
    color: #1a1a1a;
    letter-spacing: .2vw;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all
}

.p_bigCon {
    font-size: 30%;
    font-weight: 400;
    color: #999;
    text-align: center;
    line-height: 150%
}

.p_smallTit {
    font-size: 40%;
    font-weight: 400;
    color: #1a1a1a;
    text-align: center
}

.p_smallCon {
    font-size: 35%;
    font-weight: 400;
    line-height: 150%;
    color: #999
}

.p_button a {
    font-size: 35%;
    color: #3088ff;
    border: 1px solid #3088ff;
    text-decoration: none;
    border-radius: 5px
}

.p_button a:hover {
    background: #3088ff;
    color: #fff
}

.header {
    position: relative
}

.header .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px
}

.header .top .logo {
    display: flex;
    justify-content: flex-start;
    width: 45%
}

.header .top .logo .logo_left {
    width: 25%;
    max-width: 40px
}

.header .top .logo .logo_left img {
    width: 100%;
    max-width: 40px
}

.header .top .logo .logo_right {
    margin-left: 6px
}

.header .top .logo .logo_right .p1 {
    font-size: 40%;
    font-weight: 700;
    color: #1a1a1a
}

.header .top .logo .logo_right .p2 {
    font-size: 35%;
    font-weight: 400;
    margin-top: 3%;
    color: #1a1a1a
}

.header .top .wap_menu {
    display: none;
    width: 5%
}

.header .top .wap_menu img {
    width: 100%;
    max-width: 32px
}

.header .top .menu {
    width: 50%;
    text-align: right
}

.header .top .menu ul {
    width: 100%;
    justify-content: flex-end;
    align-items: center
}

.header .top .menu ul li {
    display: inline-block;
    padding: 2% 2%;
    margin-right: 1%;
    vertical-align: middle;
    margin-top: -3%;
    position: relative
}

.header .top .menu ul li:hover {
    box-sizing: border-box
}

.header .top .menu ul li a {
    display: inline-block;
    height: 100%;
    text-decoration: none;
    font-size: 45%;
    font-weight: 400;
    color: #1a1a1a
}

.header .top .menu ul li:hover a {
    color: #3088ff
}
con_right
.header .top .menu ul li i {
    width: 12px;
    height: 6px;
    background: url(../images/icon-arrow.png);
    display: inline-block;
    margin-left: 4px;
    vertical-align: 1px;
    -webkit-transition: transform .3s linear;
    transition: transform .3s linear
}

.header .top .menu ul li:hover i {
    background-position-y: -6px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.header .banner {
    background: url(../images/banner.png) no-repeat;
    background-size: cover;
    text-align: center;
    padding: 4% 0
}

.header .banner h1 {
    font-size: 105%;
    font-weight: 400;
    color: #fff
}

.header .banner .p_headerTit {
    font-size: 105%;
    font-weight: 400;
    color: #fff
}

.header .banner h2 {
    font-size: 53%;
    font-weight: 400;
    padding-top: 2%;
    color: #fff
}

.header .banner .p_headerCon {
    font-size: 53%;
    font-weight: 400;
    padding-top: 2%;
    color: #fff
}

.header .banner h3 {
    width: 60%;
    margin: 0 auto;
    font-size: 39%;
    padding-top: 2%;
    font-weight: 400;
    color: #fff;
    line-height: 200%;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical
}

.header .banner .p_headerCon2 {
    width: 60%;
    margin: 0 auto;
    font-size: 39%;
    padding-top: 2%;
    font-weight: 400;
    color: #fff;
    line-height: 200%;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical
}

.header .banner .p_btn {
    padding-top: 2%
}

.header .banner .p_btn a {
    border: 1px solid #204ac7;
    font-size: 35%;
    padding: .8% 5.5%;
    font-weight: 400;
    color: #fff;
    border-radius: 50px;
    text-decoration: none
}

.header .banner .p_btn a:hover {
    background: #3088ff;
    color: #fff
}

.header .banner .p_btn a:first-child {
    margin-right: 2%;
    background: #204ac7
}

.header .banner .p_btn a:first-child:hover {
    background: #599fff
}

.header .p_banben {
    padding-top: 3%;
    font-size: 20%;
    font-weight: 400;
    color: #838487
}

.header .top .menu ul li.after::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 4px;
    left: 0;
    top: 75px;
    background: #3088ff;
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    animation: widths .6s 1 alternate;
    -webkit-animation: widths .6s 1 alternate
}

@media only screen and (min-width:800px) and (max-width:900px) {
    .header .top .menu ul li:after {
        top: 62px!important
    }
}

@media only screen and (min-width:900px) and (max-width:1000px) {
    .header .top .menu ul li:after {
        top: 68px!important
    }
}

@media only screen and (min-width:1000px) and (max-width:1100px) {
    .header .top .menu ul li:after {
        top: 70px!important
    }
}

@media only screen and (min-width:1100px) and (max-width:1200px) {
    .header .top .menu ul li:after {
        top: 73px!important
    }
}

@keyframes widths {
    from {
        -webkit-transform: scaleX(0);
        transform: scaleX(0)
    }
    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

@-webkit-keyframes widths {
    from {
        -webkit-transform: scaleX(0);
        transform: scaleX(0)
    }
    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

@media only screen and (min-width:300px) and (max-width:800px) {
    .header .banner {
        padding: 9% 0!important
    }
    .header .p_banben {
        width: 80%;
        margin: 0 15%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }
}

.hoverCp {
    position: absolute;
    background: #fff;
    padding: 3% 0;
    display: none;
    width: 100%;
    top: 70px;
    z-index: 999999999999;
    border-top: 1px solid #e5e5e5;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .1)
}

.hoverCp .con {
    border-bottom: 1px dashed #cecece;
    padding-top: 3%
}

.hoverCp .con:last-child {
    border-bottom: none
}

.hoverCp .con:first-child {
    padding-top: 0
}

.hoverCp .con .con_left {
    float: left;
    width: 10%;
    margin-right: 3%;
    font-size: 40%;
    font-weight: 700;
    color: #1a1a1a;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all
}

.hoverCp .con .con_right {
    float: left;
    width: 85%;
    display: flex;
    flex-flow: wrap
}


.hoverCp .con .con_right .con_node {
    margin-right: 5%;
    margin-bottom: 3%
}

.hoverCp .con .con_right .con_node a {
    text-decoration: none
}

.hoverCp .con .con_right .con_node a:hover .p2 {
    color: #3088ff
}

.hoverCp .con .con_right .con_node .p1 {
    width: 30%;
    margin: 0 auto
}

.hoverCp .con .con_right .con_node .p1 img {
    width: 100%;
    max-width: 45px
}

.hoverCp .con .con_right .con_node .p2 {
    font-size: 35%;
    font-weight: 400;
    color: #333
}

.wap_hoverCp {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0, 0, 0, .4);
    z-index: 99999999999999999999999;
    display: none
}

.wap_hoverCp .wap_hoverCpLeft {
    float: left;
    height: 100%;
    width: 45%
}

.wap_hoverCp .wap_hoverCpRight {
    float: left;
    background: #fff;
    height: 100%;
    width: 55%
}

.wap_hoverCp .wap_hoverCpRight .con {
    font-size: 40%;
    font-weight: 400;
    padding: 0 0;
    border-bottom: 1px solid #ccc
}

.wap_hoverCp .wap_hoverCpRight .con a {
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    color: #666;
    padding: 6% 0
}

.wap_hoverCp .wap_hoverCpRight .con a.hover {
    background: #3088ff;
    color: #fff
}

.wap_hoverCp .wap_hoverCpRight .con .con_children {
    margin-top: 3%
}

.wap_hoverCp .wap_hoverCpRight .con .con_children a {
    justify-content: center
}

.wap_hoverCp .wap_hoverCpRight .con .con_children .con {
    border-bottom: none
}

.wap_hoverCp .wap_hoverCpRight .con .con_children a span:first-child {
    width: 10%;
    margin-left: 0!important;
    margin-right: 5%
}

.wap_hoverCp .wap_hoverCpRight .con .con_children a span img {
    width: 100%;
    max-width: 45px;
    vertical-align: middle
}

.wap_hoverCp .wap_hoverCpRight .con a span:first-child {
    margin-left: 15%
}

.wap_hoverCp .wap_hoverCpRight .con a span:last-child {
    margin-right: 5%
}

.nav {
    box-shadow: 0 3px 6px rgba(0, 0, 0, .15)
}

.nav .content {
    display: flex;
    justify-content: space-between
}

.nav .content .con_left {
    width: 42%
}

.nav .content .con_left .con_left_pic {
    float: left;
    margin-right: 1%;
    margin-top: 2%
}

.nav .content .con_left .con_left_text {
    float: left;
    margin-top: 2%
}

.nav .content .con_left .con_left_text .p1 {
    font-size: 40%;
    font-weight: 400;
    color: #1a1a1a
}

.nav .content .con_left .con_left_text .p2 {
    margin-top: 1%;
    font-size: 30%;
    font-weight: 400;
    color: #1a1a1a
}

.nav .content .con_right {
    display: flex;
    width: 55%;
    text-align: right
}

.nav .content .con_right .navMenu {
    width: 60%;
    display: flex
}

.nav .content .con_right .navMenu span {
    position: relative;
    padding: 1% 4%;
    display: inline-block;
    height: 100%;
    line-height: 100%;
    box-sizing: border-box;
    border-bottom: 4px solid #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.nav .content .con_right .navMenu span.topqer::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 4px;
    left: 0;
    bottom: 0;
    background: #204ac7;
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    animation: widths .6s 1 alternate;
    -webkit-animation: widths .6s 1 alternate
}

@keyframes widths {
    from {
        -webkit-transform: scaleX(0);
        transform: scaleX(0)
    }
    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

@-webkit-keyframes widths {
    from {
        -webkit-transform: scaleX(0);
        transform: scaleX(0)
    }
    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

.nav .content .con_right .navMenu span:hover a {
    color: #3088ff
}

.nav .content .con_right .navMenu a {
    width: 100%;
    font-size: 39%;
    font-weight: 400;
    color: #1a1a1a;
    text-decoration: none
}

.nav .content .con_right .navMenu span::before {
    position: absolute;
    content: "";
    right: 0;
    top: 50%;
    height: 15px;
    margin-top: -5.5px;
    width: 2px;
    background: #b2b8ca
}

.nav .content .con_right .navMenu span:last-child::before {
    height: 0;
    width: 0
}

.nav .content .con_right .down {
    width: 38%;
    vertical-align: middle;
    margin-top: -.4%
}

.nav .content .con_right .down a {
    display: inline-block;
    text-align: center;
    background: #3088ff;
    font-size: 35%;
    padding: 2% 0;
    width: 44%;
    font-weight: 400;
    color: #fff;
    border-radius: 5px;
    text-decoration: none
}

.nav .content .con_right .down a:hover {
    background: #599fff
}

.nav .content .con_right .down a:last-child {
    background: #fa6f06;
    margin-left: 5%
}

.nav .content .con_right .down a:last-child:hover {
    background: #f99a53
}

@media only screen and (min-width:300px) and (max-width:800px) {
    .nav .content .con_left {
        display: none
    }
    .nav .content .con_right {
        width: 100%
    }
    .nav .content .con_right .navMenu {
        width: 78%
    }
    .nav .content .con_right .down {
        width: 20%
    }
    .nav .content .con_right .navMenu span {
        padding: 1% 3%
    }
    .nav .content .con_right .down a {
        width: 100%
    }
    .nav .content .con_right .down a:last-child {
        display: none
    }
}

.footer {
    padding: 2% 0 1.8% 0;
    background: #353131;
    border-bottom: 1px solid #474443
}

.footer .content {
    padding: 0 5%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start
}

.footer .content p {
    line-height: 100%
}

.footer .con_1 {
    text-align: center
}

.footer .con_1 .p_con {
    font-size: 35%;
    color: #fff;
    margin-top: 20px
}

.footer .con_2 p {
    line-height: 150%;
}

.footer .con_3 p {
    line-height: 150%;
}

.footer .con_4 {
    margin-top: -1.05%
}

.footer .p_tit a {
    font-size: 40%;
    font-weight: 400;
    color: #fff;
    text-decoration: none
}

.footer .p_con a {
    font-size: 35%;
    font-weight: 400;
    color: #817f7f;
    text-decoration: none;
    line-height: 150%;
}

.footer .p_con a:hover {
    color: #fff
}

.footer .con_4 .sdiv {
    background: #3b3838;
    display: flex;
    align-items: center;
    padding: 3% 8%;
    width: 15vw
}

.footer .con_4 .sdiv .icon {
    margin-right: 6%
}

.footer .con_4 .sdiv .text {
    margin-top: 1%;
    padding: 3% 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all
}

.footer .con_4 .sdiv .text .p1 {
    font-size: 33%;
    font-weight: 400;
    color: #7d7b7b
}

.footer .con_4 .sdiv .text .p2 {
    font-size: 40%;
    font-weight: 400;
    color: #c2c2c2;
    margin-top: 8%
}

.footer .con_4 .sdiv:last-child .text .p2 {
    margin-top: 5%
}

.footer .con_4 .qq {
    margin-top: 6%
}

.footer .con_4 .em {
    margin-top: 20px
}

.footerms {
    padding: 1% 3%;
    background: #353131;
    color: #5d6063;
    font-size: 35%;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all
}

.footerms .p1 {
    display: block
}

.footerms .p2 {
    padding: 1% 0;
    display: none;
    color: #fff
}

@media only screen and (min-width:300px) and (max-width:800px) {
    .footerms .p1 {
        display: none
    }
    .footerms .p2 {
        display: block
    }
    .footer {
        display: none
    }
    .header .top .menu {
        display: none
    }
    .header .top .wap_menu {
        display: block
    }
}

.rightFlxed {
    position: fixed;
    right: 5px;
    top: 60%;
    margin-top: -123px;
    width: 64px;
    height: 246px;
    background: #fff;
    border: 1px solid #ececec;
    opacity: 1;
    border-radius: 4px;
    z-index: 88888888888888888888
}

@media only screen and (min-width:300px) and (max-width:800px) {
    .rightFlxed {
        display: none
    }
}

.rightFlxed .con {
    width: 90%;
    margin-left: 5%;
    height: 80px;
    border-bottom: 1px solid #ececec
}

.rightFlxed .con:last-child {
    border-bottom: none
}

.rightFlxed .con a {
    text-decoration: none
}

.rightFlxed .con:nth-child(1) .p_pic {
    padding-top: 15px;
    padding-bottom: 6px;
    height: 26px;
    width: 26px;
    margin: 0 auto 0 auto;
    background: url(../images/flxedright_icon1.png) no-repeat;
    background-position: center
}

.rightFlxed .con:nth-child(1):hover .p_pic {
    padding-top: 15px;
    padding-bottom: 6px;
    height: 26px;
    width: 26px;
    margin: 0 auto 0 auto;
    background: url(../images/flxedright_icon1_hover.png) no-repeat;
    background-position: center
}

.rightFlxed .con:nth-child(1):hover .p_text {
    color: #3088ff
}

.rightFlxed .con:nth-child(2) {
    position: relative
}

.rightFlxed .con:nth-child(2) .p_pic {
    padding-top: 15px;
    padding-bottom: 6px;
    height: 26px;
    width: 26px;
    margin: 0 auto 0 auto;
    background: url(../images/flxedright_icon2.png) no-repeat;
    background-position: center
}

.rightFlxed .con:nth-child(2):hover .p_pic {
    padding-top: 15px;
    padding-bottom: 6px;
    height: 26px;
    width: 26px;
    margin: 0 auto 0 auto;
    background: url(../images/flxedright_icon2_hover.png) no-repeat;
    background-position: center
}

.rightFlxed .con:nth-child(2):hover .p_text {
    color: #3088ff
}

.rightFlxed .con:nth-child(3) .p_pic {
    padding-top: 15px;
    padding-bottom: 6px;
    height: 26px;
    width: 26px;
    margin: 0 auto 0 auto;
    background: url(../images/flxedright_icon3.png) no-repeat;
    background-position: center
}

.rightFlxed .con:nth-child(3):hover .p_pic {
    padding-top: 15px;
    padding-bottom: 6px;
    height: 26px;
    width: 26px;
    margin: 0 auto 0 auto;
    background: url(../images/flxedright_icon3_hover.png) no-repeat;
    background-position: center
}

.rightFlxed .con:nth-child(3):hover .p_text {
    color: #3088ff
}

.rightFlxed .p_text {
    text-align: center;
    height: 16px;
    font-size: 12px;
    font-weight: 400;
    color: #4e5b75;
    opacity: 1
}

.fightFlxed2 {
    position: absolute;
    top: 0;
    right: 75px;
    width: 142px;
    height: 200px;
    background: #fff;
    border: 1px solid #e1e6ec;
    opacity: 1;
    border-radius: 4px;
    z-index: 9999999999999999999999
}

@media only screen and (min-width:300px) and (max-width:800px) {
    .fightFlxed2 {
        display: none
    }
}

.fightFlxed2 .fight {
    width: 140px;
    height: 164px;
    background: #f6f8fb;
    text-align: center
}

.fightFlxed2 .fight .p_pic2 {
    padding-top: 14px
}

.fightFlxed2 .fight .p_text2 {
    font-size: 14px;
    font-weight: 400;
    color: #4e5b75;
    margin-top: -5px
}

.fightFlxed2 .fight2 {
    text-align: center;
    margin-top: 10px;
    font-size: 12px;
    font-weight: 400;
    color: #4e5b75
}

.transition {
    transition: all .3s ease-in-out
}

@media only screen and (min-width:2400px) and (max-width:4800px) {
    div {
        font-size: 42px
    }
}

@media only screen and (min-width:1200px) and (max-width:2400px) {
    div {
        font-size: 42px
    }
}

@media only screen and (max-width:1200px) {
    div {
        font-size: 39px
    }
    .w1200 {
        padding: 0 2%
    }
}

@media only screen and (max-width:1100px) {
    div {
        font-size: 38px
    }
    .w1200 {
        padding: 0 2%
    }
}

@media only screen and (max-width:1000px) {
    div {
        font-size: 37px
    }
    .w1200 {
        padding: 0 2%
    }
}

@media only screen and (max-width:900px) {
    div {
        font-size: 36px
    }
    .w1200 {
        padding: 0 2%
    }
}

@media only screen and (max-width:800px) {
    div {
        font-size: 35px
    }
    .w1200 {
        padding: 0 2%
    }
}

@media only screen and (max-width:700px) {
    div {
        font-size: 34px
    }
    .w1200 {
        padding: 0 2%
    }
}

@media only screen and (max-width:600px) {
    div {
        font-size: 33px
    }
    .w1200 {
        padding: 0 2%
    }
}

@media only screen and (max-width:500px) {
    div {
        font-size: 32px
    }
    .w1200 {
        padding: 0 2%
    }
}

@media only screen and (max-width:400px) {
    div {
        font-size: 31px
    }
    .w1200 {
        padding: 0 2%
    }
}

@media only screen and (max-width:300px) {
    div {
        font-size: 30px
    }
    .w1200 {
        padding: 0 2%
    }
}


/**                     首页                 **/

.index .banner {
    padding: 0!important;
    height: 450px
}

.index .banner .p_headerTit {
    padding-top: 5%
}

.index .banner2 {
    background: url(../images/pro_banner.png) no-repeat;
    text-align: center;
    background-size: cover;
    height: 450px
}

.index .banner2 .content .con_left {
    float: left;
    width: 60%;
    margin-right: 2%;
    text-align: left;
    padding-top: 5%
}

.index .banner2 .content .con_left .p_headerTit {
    font-size: 85%;
    font-weight: 400;
    color: #fff
}

.index .banner2 .content .con_left .p_headerCon {
    font-size: 45%;
    font-weight: 400;
    padding-top: 5%;
    color: #fff
}

.index .banner2 .content .con_left .p_tit {
    font-size: 35%;
    font-weight: 400;
    padding-top: 3%;
    color: #fff;
    line-height: 200%
}

.index .banner2 .content .con_left .p_btn a {
    color: #fff;
    padding: 1.3% 8.5%!important
}

.index .banner2 .content .con_left .p_btn a:hover {
    background: #2f81f0;
    color: #fff
}

.index .banner2 .content .con_left .p_btn a :first-child {
    background: #3088ff
}

.index .banner2 .content .con_left .p_btn a :first-child:hover {
    background: #599fff
}

.index .banner2 .content .con_left .p_con {
    font-size: 35%;
    padding-top: 4%;
    font-weight: 400;
    color: #636364
}

.index .banner2 .content .con_right {
    float: left;
    width: 35%;
    padding-top: 5%
}

.index .banner2 .content .con_right img {
    width: 100%;
    max-width: 450px
}

.index .banner2 .p_btn a {
    border: 1px solid #3088ff;
    font-size: 35%;
    padding: .8% 5.5%;
    font-weight: 400;
    color: #fff;
    border-radius: 50px;
    text-decoration: none
}

.index .banner2 .p_btn a:first-child {
    margin-right: 2%;
    background: #3088ff
}

.index .banner2 .content .con_left .p_btn a {
    color: #fff;
    padding: 1.3% 8.5%!important
}

.index .banner2 .content .con_left .p_btn a:hover {
    background: #2f81f0;
    color: #fff
}

.index .banner2 .content .con_left .p_btn a :first-child {
    background: #3088ff
}

.index .banner2 .content .con_left .p_btn a :first-child:hover {
    background: #599fff
}

@media only screen and (min-width:1000px) and (max-width:4000px) {
    .index .banner .p_headerTit {
        padding-top: 7%
    }
    .index .banner2 .content .con_left {
        padding-top: 8%
    }
    .index .banner2 .content .con_right {
        padding-top: 8%
    }
    .index .banner {
        padding: 0!important;
        height: 480px
    }
    .index .banner2 {
        height: 480px
    }
}

@media only screen and (min-width:900px) and (max-width:1000px) {
    .index .banner {
        padding: 0!important;
        height: 380px
    }
    .index .banner2 {
        height: 380px
    }
}

@media only screen and (min-width:800px) and (max-width:900px) {
    .index .banner {
        padding: 0!important;
        height: 360px
    }
    .index .banner2 {
        height: 360px
    }
}

@media only screen and (min-width:700px) and (max-width:800px) {
    .index .banner {
        padding: 0!important;
        height: 350px
    }
    .index .banner2 {
        height: 350px
    }
}

@media only screen and (min-width:600px) and (max-width:700px) {
    .index .banner {
        padding: 0!important;
        height: 320px
    }
    .index .banner2 {
        height: 320px
    }
}

@media only screen and (min-width:500px) and (max-width:600px) {
    .index .banner {
        padding: 0!important;
        height: 295px
    }
    .index .banner2 {
        height: 295px
    }
}

@media only screen and (min-width:400px) and (max-width:500px) {
    .index .banner {
        padding: 0!important;
        height: 275px
    }
    .index .banner2 {
        height: 275px
    }
}

@media only screen and (min-width:300px) and (max-width:400px) {
    .index .banner {
        padding: 0!important;
        height: 260px
    }
    .index .banner2 {
        height: 260px
    }
}

@media only screen and (min-width:300px) and (max-width:800px) {
    .index .banner2 .content .con_left {
        width: 100%;
        margin-right: 0;
        text-align: center
    }
    .index .banner2 .content .con_right {
        display: none
    }
    .index .banner2 .content .con_left .p_tit {
        width: 80%;
        margin-left: 10%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden
    }
    .index .banner2 .content .con_left .p_con {
        width: 70%;
        margin-left: 15%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }
}

.swap_company {
    padding-bottom: 3%;
    padding-top: 3%
}

.swap_company .p_headerCon {
    margin-top: 2%
}

.swap_company .content .con {
    float: left;
    width: 49%;
    text-align: center;
    margin-top: 4%;
    border: 1px solid #e9e9e9;
    box-sizing: border-box;
    padding: 3% 0;
    transition: transform .2s;
    -webkit-transition: transform .2s;
    -moz-transition: transform .2s;
    -ms-transition: transform .2s;
    position: relative;
    box-shadow: 0 0 20px rgba(0, 0, 0, .16)
}

.swap_company .content .con:hover {
    box-shadow: 0 8px 10px rgba(15, 92, 228, .24);
    cursor: pointer
}

.swap_company .content .con:first-child::before {
    position: absolute;
    content: "";
    right: -5px;
    top: -5px;
    width: 10%;
    height: 20%;
    background: url(../images/index_s1_hot.png) no-repeat;
    background-size: 100% 100%
}

@media only screen and (min-width:300px) and (max-width:800px) {
    .swap_company .content .con:first-child::before {
        width: 16%
    }
}

.swap_company .content .con .p_con {
    width: 65%;
    margin: 3% auto 0 auto;
    font-size: 35%;
    font-weight: 400;
    line-height: 150%;
    color: #999;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical
}

.swap_company .content .conli {
    width: 75%;
    margin: 0 auto
}

.swap_company .content .con .conli ul {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: wrap
}

.swap_company .content .con .conli ul li {
    width: 31%;
    margin-top: 4%;
    font-weight: 400;
    color: #3088ff
}

.swap_company .content .con .conli ul li:first-child {
    margin-right: 0
}

.swap_company .content .con .conli ul li a {
    text-decoration: none
}

.swap_company .content .con .conli ul li:hover .p2 {
    color: #3088ff
}

.swap_company .content .con .conli ul li .p1 {
    width: 45%;
    margin: 0 auto;
    text-align: center
}

.swap_company .content .con .conli ul li .p1 img {
    width: 100%;
    max-width: 44px
}

.swap_company .content .con .conli ul li .p2 {
    font-size: 37%;
    font-weight: 400;
    color: #1a1a1a;
    margin-top: 3%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all
}

.swap_company .content .con .p_btn {
    margin-top: 2%
}

.swap_company .content .con .p_btn a {
    padding: 1.5% 6%
}

.swap_company .content .con:nth-child(2),
.swap_company .content .con:nth-child(4) {
    margin-left: 2%
}

.swap_produce {
    background: #f6f9fc;
    padding-bottom: 3%;
    padding-top: 3%
}

.swap_produce .p_headerCon {
    margin-top: 2%
}

.swap_produce .content .con {
    float: left;
    width: 31%;
    margin-right: 3%;
    background: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .1);
    padding: 4% 0;
    border-radius: 10px;
    margin-top: 3%;
    transition: transform .2s;
    -webkit-transition: transform .2s;
    -moz-transition: transform .2s;
    -ms-transition: transform .2s
}

.swap_produce .content .con:hover {
    -webkit-transform: translateY(-12px);
    -moz-transform: translateY(-12px);
    -ms-transform: translateY(-12px);
    transform: translateY(-12px);
    box-shadow: 0 8px 10px rgba(15, 92, 228, .24);
    cursor: pointer
}

.swap_produce .content .con .p_pic {
    width: 45%;
    margin: 0 auto;
    text-align: center
}

.swap_produce .content .con .p_pic img {
    width: 100%;
    max-width: 160px
}

.swap_produce .content .con:nth-child(3n) {
    margin-right: 0
}

@media only screen and (min-width:300px) and (max-width:800px) {
    .swap_produce .content .con {
        width: 48%;
        margin-right: 4%
    }
    .swap_produce .content .con:nth-child(3n) {
        margin-right: 4%
    }
    .swap_produce .content .con:nth-child(2n) {
        margin-right: 0
    }
}

.swap_produce .content .con .p_tit {
    padding: 2% 3% 0 3%;
    font-size: 40%;
    font-weight: 400;
    color: #1a1a1a;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all
}

.swap_produce .content .con .p_con {
    width: 75%;
    margin: 3% auto 0 auto;
    min-height: 50px;
    max-height: 50px;
    overflow: hidden;
    display: flex;
    justify-content: center
}

.swap_produce .content .con .p_con p {
    height: 100%;
    font-size: 34%;
    font-weight: 400;
    color: #666;
    text-align: center;
    line-height: 150%;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.swap_produce .content .con .p_btn {
    margin-top: 3%;
    text-align: center
}

.swap_produce .content .con .p_btn a {
    padding: 3% 13%
}

.swap_produce .content .con .p_btn a:first-child {
    margin-right: 5%
}

.swap_story {
    padding-bottom: 5%;
    padding-top: 3%
}

.swap_story .p_headerCon {
    margin-top: 2%
}

.swap_story .p_pic {
    margin-top: 5%
}

.swap_story .posion {
    position: relative
}

.swap_story .posion .icon1 .p_text {
    font-size: 40%;
    font-weight: 700;
    color: #ed517a;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all
}

.swap_story .posion .icon1 {
    position: absolute;
    top: 20%;
    left: 20%;
    width: 15%;
    text-align: center
}

.swap_story .posion .icon1 .p_1 {
    width: 30%;
    margin: 0 auto;
    -webkit-animation: story-user-icon 2s linear infinite .6s;
    -moz-animation: story-user-icon 2s linear infinite .6s;
    animation: story-user-icon 2s linear infinite .6s
}

.swap_story .posion .icon1 .p_1 img {
    max-width: 53px
}

.swap_story .posion .icon2 .p_text {
    font-size: 40%;
    font-weight: 700;
    color: #25b8c4;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all
}

.swap_story .posion .icon2 {
    position: absolute;
    top: 10%;
    left: 70%;
    width: 15%;
    text-align: center
}

.swap_story .posion .icon2 .p_1 {
    width: 30%;
    margin: 0 auto;
    -webkit-animation: story-user-icon 2s linear infinite .6s;
    -moz-animation: story-user-icon 2s linear infinite .6s;
    animation: story-user-icon 2s linear infinite .6s
}

@keyframes story-user-icon {
    0%,
    100%,
    50% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        transform: translate(0, 0)
    }
    25% {
        -webkit-transform: translate(0, -3px);
        -moz-transform: translate(0, -3px);
        transform: translate(0, -3px)
    }
    75% {
        -webkit-transform: translate(0, 3px);
        -moz-transform: translate(0, 3px);
        transform: translate(0, 3px)
    }
}

.swap_story .posion .icon2 .p_1 img {
    max-width: 53px
}

.swap_story .posion .icon3 .p_text {
    font-size: 40%;
    font-weight: 700;
    color: #4786ff;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all
}

.swap_story .posion .icon3 {
    position: absolute;
    top: 40%;
    left: 70%;
    width: 15%;
    text-align: center
}

.swap_story .posion .icon3 .p_1 {
    width: 30%;
    margin: 0 auto;
    -webkit-animation: story-user-icon 2s linear infinite .6s;
    -moz-animation: story-user-icon 2s linear infinite .6s;
    animation: story-user-icon 2s linear infinite .6s
}

.swap_story .posion .icon3 .p_1 img {
    max-width: 53px
}

.swap_story .posion .icon4 .p_text {
    font-size: 40%;
    font-weight: 700;
    color: #7559ee;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all
}

.swap_story .posion .icon4 {
    position: absolute;
    top: 60%;
    left: 50%;
    width: 15%;
    text-align: center
}

.swap_story .posion .icon4 .p_1 {
    width: 30%;
    margin: 0 auto;
    -webkit-animation: story-user-icon 2s linear infinite .6s;
    -moz-animation: story-user-icon 2s linear infinite .6s;
    animation: story-user-icon 2s linear infinite .6s
}

.swap_story .posion .icon4 .p_1 img {
    max-width: 53px
}

.swap_story .p_pic img {
    width: 100%
}

.swap_story .p_border {
    height: 1px;
    background: #e8e8e8;
    width: 84%;
    margin-left: 7%;
    margin-top: 4%
}

.swap_story .content {
    margin-top: 2%
}

.swap_story .content .con {
    width: 31%;
    float: left;
    margin-right: 3%
}

.swap_story .content .con:last-child {
    margin-right: 0
}

.swap_story .content .con .p_con {
    margin-top: 8%
}

.swap_story .content .con .p_con a {
    text-decoration: none;
    display: flex;
    justify-content: space-between
}

.swap_story .content .con .p_con a:hover .text {
    color: #3088ff
}

.swap_story .content .con .p_con .text {
    flex: 1;
    font-size: 35%;
    font-weight: 400;
    color: #333;
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all
}

.swap_story .content .con .p_con .time {
    display: inline-block;
    font-size: 35%;
    font-weight: 400;
    color: #999
}

@media only screen and (min-width:300px) and (max-width:900px) {
    .swap_story .content .con .p_con .time {
        display: none
    }
    .swap_story .content .con .conli ul li .p2 {
        display: none
    }
}


/*********                       下载页面                     ************/

.down .banner {
    background: url(../images/product_banner.png) no-repeat;
    text-align: center;
    background-size: cover;
    padding: 4% 0 6% 0
}

.down .banner h1 {
    font-size: 115%;
    font-weight: 400;
    color: #fff
}

.down .banner h2 {
    font-size: 45%;
    font-weight: 400;
    padding-top: 2.3%;
    color: #fff
}

.swap_down {
    background: #f6f9fc;
    padding-bottom: 3%;
    padding-top: 3%
}

.swap_down .p_headerTit {
    padding-top: 1%;
    padding-bottom: 1%
}

.swap_down .content .con {
    float: left;
    width: 31%;
    margin-right: 3%;
    background: #fff;
    border: 1px solid #e4e4e4;
    padding: 4% 0;
    margin-top: 3%;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .1);
    transition: transform .2s;
    -webkit-transition: transform .2s;
    -moz-transition: transform .2s;
    -ms-transition: transform .2s
}

.swap_down .content .con:hover {
    -webkit-transform: translateY(-12px);
    -moz-transform: translateY(-12px);
    -ms-transform: translateY(-12px);
    transform: translateY(-12px);
    box-shadow: 0 8px 10px rgba(15, 92, 228, .24);
    cursor: pointer
}

.swap_down .content .con:nth-child(3n) {
    margin-right: 0
}

@media only screen and (min-width:300px) and (max-width:800px) {
    .swap_down .content .con {
        width: 47%;
        margin-right: 4%
    }
    .swap_down .content .con:nth-child(3n) {
        margin-right: 4%
    }
    .swap_down .content .con:nth-child(2n) {
        margin-right: 0
    }
}

.swap_down .content .hot {
    position: relative
}

.swap_down .content .hot::before {
    position: absolute;
    content: "";
    right: -5px;
    top: -5px;
    width: 18%;
    height: 20%;
    background: url(../images/product_s1_hot.png) no-repeat
}

.swap_down .content .new {
    position: relative
}

.swap_down .content .new::before {
    position: absolute;
    content: "";
    right: -5px;
    top: -5px;
    width: 18%;
    height: 20%;
    background: url(../images/product_s1_new.png) no-repeat
}

@media only screen and (min-width:600px) and (max-width:800px) {
    .swap_down .content .hot::before {
        width: 15%;
        background-size: cover
    }
    .swap_down .content .new::before {
        width: 15%;
        background-size: cover
    }
}

@media only screen and (min-width:450px) and (max-width:600px) {
    .swap_down .content .hot::before {
        width: 20%;
        background-size: cover
    }
    .swap_down .content .new::before {
        width: 20%;
        background-size: cover
    }
}

@media only screen and (min-width:300px) and (max-width:450px) {
    .swap_down .content .hot::before {
        width: 25%;
        background-size: cover
    }
    .swap_down .content .new::before {
        width: 25%;
        background-size: cover
    }
    .swap_down .content .con:nth-child(2n) {
        margin-right: 0
    }
}

.swap_down .content .con .p_tit {
    display: flex;
    align-items: center;
    width: 75%;
    margin: 0 auto 0 auto
}

.swap_down .content .con .p_tit .p_pic {
    display: inline-block;
    vertical-align: middle;
    width: 35%;
    margin-right: 3%
}

.swap_down .content .con .p_tit .p_pic img {
    width: 100%;
    max-width: 68px
}

.swap_down .content .con .p_tit .p_txt {
    display: inline-block;
    vertical-align: middle;
    font-size: 45%;
    font-weight: 400;
    color: #1a1a1a;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all
}

.swap_down .content .con .p_con {
    width: 75%;
    margin: 5% auto 0 auto;
    min-height: 70px;
    max-height: 70px;
    overflow: hidden;
    display: flex;
    justify-content: center
}

.swap_down .content .con .p_con p {
    height: 100%;
    font-size: 35%;
    font-weight: 400;
    color: #666;
    text-align: center;
    line-height: 150%;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical
}

.swap_down .content .con .wap_btn {
    margin-top: 5%;
    text-align: center;
    display: none
}

.swap_down .content .con .p_btn {
    margin-top: 5%;
    text-align: center
}

.swap_down .content .con .wap_btn a {
    text-decoration: none;
    font-size: 35%;
    font-weight: 400;
    color: #3088ff;
    border: 1px solid #3088ff;
    border-radius: 40px;
    padding: 1.5% 6%
}

.swap_down .content .con .wap_btn a:hover {
    background: #3088ff;
    color: #fff
}

.swap_down .content .con .wap_btn a:first-child {
    margin-right: 5%
}

.swap_down .content .con .p_btn a {
    text-decoration: none;
    font-size: 35%;
    font-weight: 400;
    color: #3088ff;
    border: 1px solid #3088ff;
    border-radius: 40px;
    padding: 1.5% 6%
}

@media only screen and (min-width:300px) and (max-width:800px) {
    .swap_down .content .con .p_btn {
        display: none
    }
    .swap_down .content .con .wap_btn {
        display: block
    }
    .swap_down .content .con .p_btn a {
        font-size: 25%;
        padding: 1.5% 3%
    }
    .swap_down .content .con .wap_btn a {
        font-size: 25%;
        padding: 1.5% 3%
    }
}

.swap_down .content .con .p_btn a:hover {
    background: #3088ff;
    color: #fff
}

.swap_down .content .con .p_btn a:first-child {
    margin-right: 5%
}

.swap_down .content .con .p_erw {
    width: 40%;
    margin: 2% auto 0 auto
}

.swap_down .content .con .p_erw img {
    width: 100%;
    max-width: 164px
}

.swap_down .content .con .p_textEr {
    font-size: 35%;
    font-weight: 400;
    color: #666;
    text-align: center;
    margin-top: 1%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all
}

.swap_helper {
    padding-bottom: 5%;
    padding-top: 3%;
    background: url(../images/product_s2_back.png) no-repeat;
    background-size: cover
}

.swap_helper .p_headerCon {
    margin-top: 2%
}

.swap_helper .content {
    width: 94%;
    margin: 4% auto 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center
}

.swap_helper .content .con {
    margin-right: 1%
}

.swap_helper .content .p_pic {
    width: 60%;
    margin: 0 auto
}

.swap_helper .content .p_pic img {
    width: 100%;
    max-width: 90px
}

@media only screen and (min-width:300px) and (max-width:800px) {
    .swap_helper .content .p_pic img {
        max-width: 35px
    }
}

.swap_helper .content .p_tit {
    margin-top: 4%;
    font-size: 45%;
    font-weight: 700;
    color: #000;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all
}

.swap_helper .content .p_con {
    margin-top: 6%;
    font-size: 35%;
    color: #666;
    font-weight: 400;
    line-height: 150%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}


/*******                        关于我们                 **********/

.about .banner {
    background: url(../images/about_banner.png) no-repeat;
    text-align: center;
    padding: 4% 0 6% 0;
    background-size: cover
}

.about .banner h1 {
    font-size: 115%;
    font-weight: 400;
    color: #fff
}

.about .banner h2 {
    font-size: 44%;
    font-weight: 400;
    padding-top: 2.3%;
    color: #fff;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all
}

.swap_about {
    margin-top: 5%;
    padding-bottom: 1%
}

.swap_about .p1_left {
    float: left;
    width: 65%;
    margin-right: 3%
}

.swap_about .p_top {
    display: none;
    text-align: center
}

.swap_about .p_top img {
    width: 100%;
    max-width: 489px
}

.swap_about .p1_left .p_tit {
    font-size: 60%;
    font-weight: 400;
    color: #1a1a1a
}

.swap_about .p1_left .p_ENtit {
    margin-top: 2%;
    font-size: 35%;
    font-weight: 400;
    color: #8a8a8a
}

.swap_about .p1_left .p_border {
    margin-top: 2%;
    height: 3px;
    background: #3088ff;
    width: 5%
}

.swap_about .p1_left .p_con {
    margin-top: 4%;
    font-size: 35%;
    font-weight: 400;
    line-height: 200%;
    color: #666
}

.swap_about .p1_right {
    float: left;
    width: 32%
}

.swap_about .p1_right img {
    width: 100%
}


.swap_comm {
    margin-top:1%;
    padding-bottom: 1%
}

.swap_comm .p1_left {
    float: left;
    width: 65%;
    margin-right: 3%
}

.swap_comm .p_top {
    display: none;
    text-align: center
}

.swap_comm .p_top img {
    width: 100%;
    max-width: 489px
}

.swap_comm .p1_left .p_tit {
    font-size: 60%;
    font-weight: 400;
    color: #1a1a1a
}

.swap_comm .p1_left .p_ENtit {
    margin-top: 2%;
    font-size: 35%;
    font-weight: 400;
    color: #8a8a8a
}

.swap_comm .p1_left .p_border {
    margin-top: 2%;
    height: 3px;
    background: #3088ff;
    width: 5%
}

.swap_comm .p1_left .p_con {
    margin-top: 4%;
    font-size: 35%;
    font-weight: 400;
    line-height: 200%;
    color: #666
}

.swap_comm .p1_right {
    float: left;
    width: 32%
}

.swap_comm .p1_right img {
    width: 100%
}

@media only screen and (min-width:300px) and (max-width:800px) {
    .swap_about .p_top {
        display: block
    }
    .swap_about .p1_left {
        width: 100%;
        margin-right: 0
    }
    .swap_about .p1_right {
        display: none
    }
    .swap_about .p1_left .p_tit {
        text-align: center;
        margin-top: 3%
    }
    .swap_about .p1_left .p_ENtit {
        text-align: center
    }
    .swap_about .p1_left .p_border {
        margin: 3% auto 0 auto
    }
}

.swap_pattern {
    width: 90%;
    margin: 4% auto 0 auto
}

.swap_pattern .content {
    display: flex;
    justify-content: space-between;
    padding-bottom: 5%
}

.swap_pattern .content .con {
    width: 21%
}

.swap_pattern .content .con .p_tit {
    font-size: 80%;
    font-weight: 400;
    color: #3088ff;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all
}

.swap_pattern .content .con .p_con {
    margin-top: 4%;
    font-size: 40%;
    font-weight: 400;
    color: #999;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all
}

.swap_pattern .conBorder {
    width: 80%;
    margin: 0 auto;
    height: 1px;
    background: #e8e8e8
}

.swap_centre {
    padding-bottom: 3%;
    padding-top: 3%
}

.swap_centre .p_headerTit {
    padding-top: 2%;
    padding-bottom: 1%
}

.swap_centre .p_headerCon {
    width: 60%;
    margin: 1% auto 0 auto;
    line-height: 180%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

.swap_centre .content {
    margin-top: 3%
}

.swap_centre .content .con_top {
    display: none
}

.swap_centre .content .con_left {
    float: left;
    width: 60%;
    margin-right: 2%
}

.swap_centre .content .con_left p {
    font-size: 35%;
    font-weight: 400;
    color: #666;
    padding-bottom: 3%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all
}

.swap_centre .content .con_left p img {
    width: 5%;
    margin-right: 2%;
    max-width: 28px;
    vertical-align: middle
}

.swap_centre .content .con_right {
    float: left;
    width: 38%
}

.swap_centre .content .con_right img {
    width: 100%;
    max-width: 460px
}

@media only screen and (min-width:300px) and (max-width:800px) {
    .swap_centre h2 {
        width: 80%
    }
    .swap_centre .con_top {
        display: block!important;
        width: 80%;
        margin: 0 auto
    }
    .swap_centre .con_top img {
        width: 100%;
        max-width: 460px
    }
    .swap_centre .content .con_left {
        margin-top: 3%;
        width: 100%;
        margin-right: 0
    }
    .swap_centre .content .con_right {
        display: none
    }
}

.swap_center {
    padding-bottom: 4%;
    padding-top: 4%;
    background: url(../images/about_s4_back.png) no-repeat;
    background-size: cover
}

.swap_center .p_tit {
    font-size: 70%;
    font-weight: 400;
    color: #fff;
    text-align: center
}

.swap_center .p_ENtit {
    text-align: center;
    margin-top: 2%;
    font-size: 35%;
    font-weight: 400;
    color: #fff
}

.swap_center .p_border {
    height: 3px;
    background: #fff;
    width: 5%;
    margin: 2% auto 0 auto
}

.swap_center .p_con {
    width: 40%;
    margin: 2% auto 0 auto;
    font-size: 35%;
    font-weight: 400;
    line-height: 180%;
    color: #fff;
    text-align: center
}

@media only screen and (min-width:300px) and (max-width:800px) {
    .swap_center {
        display: none
    }
}


/*********                      è´­ä¹°                       ********/

.buy .banner {
    background: url(../images/buy_banner_back.png) no-repeat;
    text-align: center;
    background-size: cover;
    padding: 4% 0
}

.buy .banner h1 {
    font-size: 80%;
    font-weight: 400;
    color: #fff
}

.buy .banner h2 {
    font-size: 40%;
    font-weight: 400;
    padding-top: 3%;
    color: #fff;
    line-height: 200%
}

.swap_buy {
    margin-top: 3%;
    padding-bottom: 5%
}

.swap_buy .p_tit {
    font-size: 45%;
    font-weight: 400;
    color: #1a1a1a;
    border-left: 8px solid #3088ff;
    text-indent: 2%;
    position: relative
}

.swap_buy .p_tit::before {
    content: "";
    position: absolute;
    top: 50%;
    height: 1px;
    width: 80%;
    right: 0;
    border-bottom: 1px dashed #e2e2e2
}

.swap_buy .content1 .con {
    margin-top: 3%
}

.swap_buy .content1 .con_top {
    display: none;
    width: 60%;
    margin: 0 auto 2% auto
}

.swap_buy .content1 .con_top img {
    width: 100%;
    max-width: 273px
}

.swap_buy .content1 .con .con_left {
    float: left;
    width: 25%;
    margin: 0 2.5%
}

.swap_buy .content1 .con .con_left img {
    width: 100%;
    max-width: 273px
}

.swap_buy .content1 .con .con_right {
    float: left;
    width: 70%
}

.swap_buy .content1 .con .con_right .wtc {
    margin-top: 2%;
    padding-bottom: 3%
}

.swap_buy .content1 .con .con_right .wtc a {
    display: inline-block;
    text-decoration: none;
    padding: 2% 3%;
    font-size: 35%;
    color: #333;
    font-weight: 400;
    border: 1px solid #dfdfdf;
    position: relative
}

.swap_buy .content1 .con .con_right .wtc a.hover {
    position: relative;
    border: 2px solid #3088ff
}

.postion {
    position: absolute;
    right: -5%;
    top: -30px
}

.postion img {
    width: 100%;
    max-width: 60px
}

.swap_buy .content1 .con .con_right .p_tits {
    font-size: 70%;
    color: #1a1a1a;
    font-weight: 400
}

.swap_buy .content1 .con .con_right .p_price {
    font-size: 50%;
    color: #ff0030;
    margin-top: 2%;
    font-weight: 700
}

.swap_buy .content1 .con .con_right .p_stit {
    font-size: 40%;
    color: #1a1a1a;
    margin-top: 2%;
    font-weight: 400
}

.swap_buy .content1 .con .con_right .p_con {
    font-size: 35%;
    color: #666;
    margin-top: 2%;
    font-weight: 400;
    line-height: 180%
}

.swap_buy .content1 .con .con_right .taoc1,
.swap_buy .content1 .con .con_right .taoc2,
.swap_buy .content1 .con .con_right .taoc3,
.swap_buy .content1 .con .con_right .taoc4 {
    background-color: #f8f8f8;
    display: flex;
    flex-wrap: wrap;
    margin-top: 2%;
    padding: 2% 3%;
    float: left;
    width: 60%
}

.swap_buy .content1 .con .con_right .taoc1 .pc,
.swap_buy .content1 .con .con_right .taoc2 .pc,
.swap_buy .content1 .con .con_right .taoc3 .pc,
.swap_buy .content1 .con .con_right .taoc4 .pc {
    width: 23%;
    margin-right: 2%
}

.swap_buy .content1 .con .con_right .taoc1 .pc .p1,
.swap_buy .content1 .con .con_right .taoc2 .pc .p1,
.swap_buy .content1 .con .con_right .taoc3 .pc .p1,
.swap_buy .content1 .con .con_right .taoc4 .pc .p1 {
    width: 40%;
    margin: 0 auto;
    text-align: center
}

.swap_buy .content1 .con .con_right .taoc1 .pc .p1 img,
.swap_buy .content1 .con .con_right .taoc2 .pc .p1 img,
.swap_buy .content1 .con .con_right .taoc3 .pc .p1 img,
.swap_buy .content1 .con .con_right .taoc4 .pc .p1 img {
    width: 100%;
    max-width: 44px
}

.swap_buy .content1 .con .con_right .taoc1 .pc .p2,
.swap_buy .content1 .con .con_right .taoc2 .pc .p2,
.swap_buy .content1 .con .con_right .taoc3 .pc .p2,
.swap_buy .content1 .con .con_right .taoc4 .pc .p2 {
    font-size: 35%;
    color: #1a1a1a;
    font-weight: 400;
    text-align: center;
    margin-top: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

@media only screen and (min-width:300px) and (max-width:800px) {
    .swap_buy .content1 .con_top {
        display: block
    }
    .swap_buy .content1 .con .con_right .p_tits {
        text-align: center
    }
    .swap_buy .content1 .con .con_right .p_price {
        text-align: center
    }
    .swap_buy .content1 .con .con_right .taoc1,
    .swap_buy .content1 .con .con_right .taoc2,
    .swap_buy .content1 .con .con_right .taoc3,
    .swap_buy .content1 .con .con_right .taoc4 {
        width: 96%;
        padding-top: 5%
    }
    .swap_buy .content1 .con .con_right .taoc1 .pc,
    .swap_buy .content1 .con .con_right .taoc2 .pc,
    .swap_buy .content1 .con .con_right .taoc3 .pc,
    .swap_buy .content1 .con .con_right .taoc4 .pc {
        margin-bottom: 2%;
        width: 48%
    }
    .swap_buy .content1 .con .con_right .wtc a {
        display: inline-block;
        margin-bottom: 1%
    }
    .swap_buy .content1 .con .con_left {
        display: none
    }
    .swap_buy .content1 .con .con_right {
        width: 98%;
        margin-left: 1%
    }
    .swap_buy .content1 .con .con_right .wtc {
        text-align: center
    }
}

.swap_buy .content1 .con .con_right .taoc1 .pc .p3,
.swap_buy .content1 .con .con_right .taoc2 .pc .p3,
.swap_buy .content1 .con .con_right .taoc3 .pc .p3,
.swap_buy .content1 .con .con_right .taoc4 .pc .p3 {
    font-size: 35%;
    color: #1a1a1a;
    font-weight: 400;
    text-align: center;
    margin-top: 3%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.swap_buy .content1 .con .con_right .taoc1 .pc .p3 img,
.swap_buy .content1 .con .con_right .taoc2 .pc .p3 img,
.swap_buy .content1 .con .con_right .taoc3 .pc .p3 img,
.swap_buy .content1 .con .con_right .taoc4 .pc .p3 img {
    vertical-align: middle;
    margin-left: 2px
}

.swap_buy .content2 {
    margin-top: 4%
}

.swap_buy .content2 .p1 {
    margin-top: 4%;
    width: 70%;
    margin-left: 30%;
    font-size: 40%;
    color: #1a1a1a;
    font-weight: 400
}

.swap_buy .content2 .p2 {
    width: 70%;
    margin-left: 30%
}

.swap_buy .content2 .p2 input {
    width: 57%;
    padding: 1.7% 0;
    text-indent: 2%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border: 1px solid #e8e8e8;
    border-radius: 4px
}

.swap_buy .content2 .error {
    margin-top: 3px;
    width: 70%;
    margin-left: 30%;
    font-size: 20%;
    color: red;
    font-weight: 400
}

input::-webkit-input-placeholder {
    color: #999
}

input::-moz-placeholder {
    color: #999
}

input:-moz-placeholder {
    color: #999
}

input:-ms-input-placeholder {
    color: #999
}

.swap_buy .content2 .p3 {
    margin-top: 2%;
    width: 70%;
    margin-left: 30%;
    font-size: 35%;
    color: #999;
    font-weight: 400;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

@media only screen and (min-width:300px) and (max-width:800px) {
    .swap_buy .content2 .p2 input {
        width: 75%
    }
    .swap_buy .content2 .p1 {
        width: 80%;
        margin-left: 10%
    }
    .swap_buy .content2 .p2 {
        width: 80%;
        margin-left: 10%
    }
    .swap_buy .content2 .p3 {
        width: 80%;
        margin-left: 10%
    }
}

.swap_buy .content3 {
    margin-top: 4%
}

.swap_buy .content3 .topfkm {
    margin-top: 3%;
    display: flex;
    width: 70%;
    margin-left: 30%;
    justify-content: flex-start
}

.swap_buy .content3 .topfkm div {
    width: 23%;
    border: 1px solid #b5b5b5;
    padding: 0 0;
    text-indent: 1%;
    cursor: pointer;
    vertical-align: middle
}

.swap_buy .content3 .topfkm div.hover {
    background: url(../images/buy_s1_check.png) no-repeat;
    background-size: 100% 100%
}

.swap_buy .content3 .topfkm div:last-child {
    margin-left: 2.7%
}

.swap_buy .content3 .topfkm div img {
    width: 95%;
    max-width: 160px;
    vertical-align: middle;
    margin-top: -5%
}

@media only screen and (min-width:300px) and (max-width:800px) {
    .swap_buy .content3 .topfkm div img {
        width: 85%
    }
}

.swap_buy .content3 .con .p_btn {
    width: 49%;
    margin-left: 30%;
    margin-top: 1.5%
}

.swap_buy .content3 .con .p_btn a {
    text-decoration: none;
    font-size: 38%;
    font-weight: 400;
    color: #3088ff;
    border: 1px solid #3088ff;
    border-radius: 5px;
    padding: 3% 30%
}

.swap_buy .content3 .con .p_btn a:hover {
    background-color: #3088ff;
    color: #fff
}

@media only screen and (min-width:300px) and (max-width:800px) {
    .swap_buy .content3 .topfkm div {
        width: 36%
    }
    .swap_buy .content3 .topfkm {
        width: 80%;
        margin-left: 10%
    }
    .swap_buy .content3 .p_btn {
        width: 80%!important;
        margin-left: 10%!important
    }
}

.swap_buy .content4 {
    margin-top: 4%
}

.swap_buy .content4 table {
    margin-top: 4%
}

.swap_buy .content4 table tr:first-child td {
    font-size: 60%;
    color: #1a1a1a;
    font-weight: 400;
    padding: 4% 3%
}

.swap_buy .content4 table tr:first-child td a {
    color: #1a1a1a;
    font-weight: 400;
    text-decoration: none;
    font-size: 60%;
    font-weight: 400;
    color: #3088ff;
    border-radius: 5px;
    padding: 10% 28%
}

.swap_buy .content4 table tr:first-child td .pbtn {
    margin-top: 2%
}

.swap_buy .content4 table tr:first-child td:nth-child(2) a {
    background-color: #353543;
    color: #ffdeae
}

.swap_buy .content4 table tr:first-child td:nth-child(3) a {
    background-color: #fd6a41;
    color: #fff
}

.swap_buy .content4 table tr:first-child td:nth-child(4) a {
    background-color: #317bff;
    color: #fff
}

.swap_buy .content4 table tr:first-child td:nth-child(5) a {
    background-color: #ffb505;
    color: #fff
}

.swap_buy .content4 table tr td {
    border: 1px solid #e5e5e5;
    width: 20%;
    font-size: 35%;
    color: #1a1a1a;
    font-weight: 400;
    text-align: center;
    padding: 1.8% 5%;
    line-height: 180%;
    vertical-align: middle
}

.swap_buy .content4 table tr td img {
    width: 20%;
    max-width: 18px
}

@media only screen and (min-width:300px) and (max-width:800px) {
    .swap_buy .content4 table tr:first-child td {
        font-size: 45%;
        padding: 4% 2%
    }
    .swap_buy .content4 table tr:first-child td a {
        padding: 5% 8%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis
    }
}

@media only screen and (min-width:900px) and (max-width:1100px) {
    .swap_buy .p_tit::before {
        width: 75%
    }
}

@media only screen and (min-width:800px) and (max-width:900px) {
    .swap_buy .p_tit::before {
        width: 70%
    }
}

@media only screen and (min-width:500px) and (max-width:800px) {
    .swap_buy .p_tit::before {
        width: 65%
    }
}

@media only screen and (min-width:300px) and (max-width:500px) {
    .swap_buy .p_tit::before {
        width: 60%
    }
}

.swap_totipotent {
    padding-bottom: 5%;
    padding-top: 3%;
    background: url(../images/product_s2_back.png) no-repeat
}

.swap_totipotent .p_headerCon {
    margin-top: 2%
}

.swap_totipotent .content {
    width: 94%;
    margin: 4% auto 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center
}

.swap_totipotent .content .con {
    margin-right: 1%
}

.swap_totipotent .content .p_pic {
    width: 60%;
    margin: 0 auto
}

.swap_totipotent .content .p_pic img {
    width: 100%;
    max-width: 90px
}

@media only screen and (min-width:300px) and (max-width:800px) {
    .swap_totipotent .content .p_pic img {
        max-width: 35px
    }
}

.swap_totipotent .content .p_tit {
    margin-top: 4%;
    font-size: 45%;
    font-weight: 700;
    color: #000;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all
}

.swap_totipotent .content .p_con {
    margin-top: 6%;
    font-size: 35%;
    color: #666;
    font-weight: 400;
    line-height: 150%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}


/*********                       使用教程                     ************/

::-webkit-scrollbar {
    display: none
}

input[type=radio] {
    display: none
}

.word .banner {
    background: url(../images/word_banner_back.png) no-repeat!important;
    background-size: cover!important;
    padding: 2% 0!important
}

.word .banner .p_tit {
    font-weight: 400;
    color: #fff;
    font-size: 80%!important
}

.word .banner .p_con {
    width: 60%;
    margin: 0 auto;
    font-size: 39%;
    padding-top: 2%;
    font-weight: 400;
    color: #fff;
    line-height: 200%;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical
}

.word .banner .p_btn {
    padding-top: 1%!important
}

.word .banner .p_btn a:hover {
    background: #3088ff;
    color: #fff
}

.swap_application {
    padding-top: 1.6%;
    padding-bottom: 1.6%
}

.swap_application .con_left {
    float: left;
    width: 225px
}

.swanky_header {
    background: #3088ff;
    font-size: 45%;
    font-family: Microsoft YaHei;
    font-weight: 400;
    padding: 6.2% 0;
    text-indent: 8%;
    color: #fff
}

.swanky_wrapper {
    width: 225px;
    height: auto;
    overflow: hidden;
    border-radius: 4px;
    background: #fafafa;
    border: 1px solid #eee;
    box-sizing: border-box
}

.swanky_wrapper label {
    padding: 5%;
    height: 55px;
    float: left;
    border-bottom: 1px solid #efefef;
    position: relative;
    width: 100%;
    color: #eff4fa;
    transition: text-indent .15s, height .3s;
    box-sizing: border-box
}

.swanky_wrapper label img {
    margin-right: 10px;
    position: relative;
    top: 2px;
    width: 16px
}

.swanky_wrapper label span {
    position: relative;
    top: -18px;
    font-size: 40%;
    font-weight: 400;
    color: #333
}

.swanky_wrapper label span::before {
    content: "â—†";
    font-size: 30%;
    margin-right: 6px
}

.swanky_wrapper label:hover {
    background: #f3f8ff;
    border-bottom: 1px solid #2a394f;
    text-indent: 4px
}

.swanky_wrapper label:hover .bar {
    width: 100%
}

.swanky_wrapper label .bar {
    width: 0;
    transition: width .15s;
    height: 2px;
    position: absolute;
    display: block;
    background: #355789;
    bottom: 0;
    left: 0
}

.swanky_wrapper label .lil_arrow {
    width: 5px;
    height: 5px;
    transition: -webkit-transform .8s;
    transition: transform .8s;
    transition: transform .8s, -webkit-transform .8s;
    -webkit-transition-timing-function: cubic-bezier(.68, -.55, .265, 1.55);
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    float: right;
    position: relative;
    top: 6px;
    right: 2px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.swanky_wrapper__content {
    position: absolute;
    display: none;
    overflow: hidden;
    left: 0;
    width: 100%
}

.swanky_wrapper__content li {
    width: 100%;
    opacity: 0;
    left: -100%;
    background: #fff;
    height: 44px;
    line-height: 44px;
    text-indent: 25px;
    box-shadow: 0 0 #126ca1 inset;
    transition: box-shadow .3s, text-indent .3s;
    position: relative;
    font-size: 35%;
    font-weight: 400;
    color: #333
}

.swanky_wrapper__content li::before {
    content: ">";
    font-size: 30%;
    margin-right: 6px
}

.swanky_wrapper__content li a {
    text-decoration: none;
    color: #333
}

.swanky_wrapper__content li:hover {
    background: #f3f8ff;
    box-shadow: 3px 0 #126ca1 inset;
    transition: box-shadow .3s linear, text-indent .3s linear;
    text-indent: 31px
}

.swanky_wrapper__content .clear {
    clear: both
}

input[type=radio]:checked+label .swanky_wrapper__content {
    display: block;
    top: 68px;
    border-bottom: 1px solid #efefef
}

input[type=radio]:checked+label>.lil_arrow {
    transition: -webkit-transform .8s;
    transition: transform .8s;
    transition: transform .8s, -webkit-transform .8s;
    -webkit-transition-timing-function: cubic-bezier(.68, -.55, .265, 1.55);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    border-top: 2px solid #999;
    border-right: 2px solid #999
}

input[type=radio]:checked+label {
    height: 245px;
    background: #fafafa;
    text-indent: 4px;
    transition-property: height;
    transition-duration: .6s;
    -webkit-transition-timing-function: cubic-bezier(.68, -.55, .265, 1.55)
}

input[type=radio]:checked+label .bar {
    width: 0
}

input[type=radio]:checked+label li:nth-of-type(1) {
    -webkit-animation: in .15s 575ms forwards;
    animation: in .15s 575ms forwards;
    -webkit-transition-timing-function: cubic-bezier(.68, -.55, .265, 1.55);
    -moz-animation: in .15s 575ms forwards;
    -moz-transition-timing-function: cubic-bezier(.68, -.55, .265, 1.55)
}

input[type=radio]:checked+label li:nth-of-type(2) {
    -webkit-animation: in .15s .7s forwards;
    animation: in .15s .7s forwards;
    -webkit-transition-timing-function: cubic-bezier(.68, -.55, .265, 1.55);
    -moz-animation: in .15s .7s forwards;
    -moz-transition-timing-function: cubic-bezier(.68, -.55, .265, 1.55)
}

input[type=radio]:checked+label li:nth-of-type(3) {
    -webkit-animation: in .15s 825ms forwards;
    animation: in .15s 825ms forwards;
    -webkit-transition-timing-function: cubic-bezier(.68, -.55, .265, 1.55);
    -moz-animation: in .15s 825ms forwards;
    -moz-transition-timing-function: cubic-bezier(.68, -.55, .265, 1.55)
}

input[type=radio]:checked+label li:nth-of-type(4) {
    -webkit-animation: in .15s .95s forwards;
    animation: in .15s .95s forwards;
    -webkit-transition-timing-function: cubic-bezier(.68, -.55, .265, 1.55);
    -moz-animation: in .15s .95s forwards;
    -moz-transition-timing-function: cubic-bezier(.68, -.55, .265, 1.55)
}

@-webkit-keyframes in {
    from {
        left: -100%;
        opacity: 0
    }
    to {
        left: 0;
        opacity: 1
    }
}

@keyframes in {
    from {
        left: -100%;
        opacity: 0
    }
    to {
        left: 0;
        opacity: 1
    }
}

.swap_application .con_right {
    float: left;
    width: calc(100% - 245px);
    margin-left: 20px
}

.swap_application .con_right h1 {
    font-size: 80%;
    font-weight: 400;
    color: #333
}

.swap_application .con_right .p_con {
    font-size: 35%;
    font-weight: 400;
    color: #333;
    padding: 3% 0 0 0;
    line-height: 180%
}

.swap_application .con_right .p_pic {
	padding-top: 3%;
	width: 65%
}

.swap_application .con_right .p_pic img {
    width: 100%;
    max-width: 602px
}

.swap_application .con_right .p_tit {
    margin-top: 3%;
    padding: 1% 0;
    background: #f3f8ff;
    border-left: 4px solid #3088ff;
    font-size: 50%;
    font-weight: 400;
    color: #333;
    text-indent: 2%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.quesetion {
    padding: 2.5% 0 7% 0!important
}

.swap_application .con_right h1 {
    font-size: 55%!important;
    font-weight: 400;
    line-height: 200%;
    color: #1a1a1a
}

.swap_application .con_right h3 {
    font-size: 45%!important;
    font-weight: 700;
    color: #444;
    margin-top: 2.5%;
    text-indent: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.swap_application .con_right h3:first-child {
	margin-top: 0px;
}

.swap_application .con_right h4 {
    font-size: 45%!important;
    font-weight: 400;
    color: #1a1a1a
}

.swap_application .con_right .p_qusetion {
    font-size: 35%!important;
    font-weight: 400;
    line-height: 200%;
    color: #1a1a1a;
    margin-left: 38px;
    margin-top: 1%
}

.swap_application .con_right p a {
    color: #1a1a1a
}

.swap_application .con_right img {
    width: 7%;
    max-width: 44px;
    margin-right: 1%
}

@media only screen and (min-width:300px) and (max-width:800px) {
    .swap_application .con_left {
        display: none
    }
    .swap_application .con_right {
        width: calc(100%);
        margin-left: 0
    }
    .swap_application .con_right .p_pic {
        padding-top: 3%;
        width: 80%;
        margin-left: 10%
    }
    .quesetion {
        padding: 5% 0 8% 0!important
    }
}


/*********                         截屏                  ************/

::-webkit-scrollbar {
    display: none
}

input[type=radio] {
    display: none
}

.screenshot .banner {
    text-align: center;
    background-size: cover;
    padding: 2% 0!important
}

.screenshot .banner h1 {
    font-size: 80%!important
}

.screenshot .banner .p_btn {
    padding-top: 1%!important
}

.screenshot .banner .p_btn a:hover {
    background: #3088ff;
    color: #fff
}

.swap_screenshot {
    padding-top: 3%;
    padding-bottom: 4%
}

.swap_screenshot .p_tit {
    font-size: 55%;
    font-weight: 700;
    color: #333
}

.swap_screenshot .content {
    display: flex;
    flex-wrap: wrap
}

.swap_screenshot .content .con {
	width: 25%;
	margin-right: 2%;
	margin-top: 3%;
	position: relative
}

.swap_screenshot .content .con :hover .postion {
    display: block!important
}

.swap_screenshot .content .con .postion {
    top: 0;
    height: 94%;
    width: 100%;
    right: 0px;
    color: #fff;
    position: absolute;
    background-color: rgba(0, 0, 0, .5);
    z-index: 88;
    text-align: center;
    font-size: 40%
}

.swap_screenshot .content .con img {
    width: 100%
}

.swap_screenshot .content .con .p_pic {
    cursor: pointer;
    position: relative;
    overflow: hidden
}

.swap_screenshot .content .con .p_pic .zg {
    display: none;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 100%;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .3);
    font-size: 35%;
    font-weight: 700;
    color: #fff
}

.swap_screenshot .content .con .p_tit {
    margin-top: 2%;
    text-align: center;
    font-size: 35%;
    font-weight: 700;
    color: #1a1a1a
}

.swap_screenshot .content .con .p_text {
    margin-top: 2%;
    text-align: center;
    font-size: 40%;
    font-weight: 700;
    color: #1a1a1a
}

@media only screen and (min-width:300px) and (max-width:800px) {
    .swap_screenshot {
        padding-top: 6%;
        padding-bottom: 8%
    }
    .swap_screenshot .content {
        margin-top: 3%;
        padding: 0 5%
    }
    .swap_screenshot .content .con {
        width: 48%;
        margin-right: 4%
    }
    .swap_screenshot .content .con:nth-child(2n) {
        margin-right: 0
    }
}


/**************                   产品                  ************/

.product .banner {
    background: url(../images/pro_banner.png) no-repeat;
    text-align: center;
    background-size: cover;
    padding: 4% 0
}

.product .banner .content .con_left {
    float: left;
    width: 50%;
    margin-right: 2%;
    text-align: left;
}

.product .banner .content .con_left h1 {
    font-size: 85%;
    font-weight: 400;
    color: #fff
}

.product .banner .content .con_left h2 {
    font-size: 45%;
    font-weight: 400;
    padding-top: 5%;
    color: #fff
}

.product .banner .content .con_left .p_tit {
    font-size: 35%;
    font-weight: 400;
    padding-top: 3%;
    color: #fff;
    line-height: 200%
}

.product .banner .content .con_left .p_btn a {
    color: #fff;
    padding: 1.3% 8.5%!important
}

.product .banner .content .con_left .p_btn a:hover {
    background: #2f81f0;
    color: #fff
}

.product .banner .content .con_left .p_btn a :first-child {
    background: #3088ff
}

.product .banner .content .con_left .p_btn a :first-child:hover {
    background: #599fff
}

.product .banner .content .con_left .p_con {
    font-size: 35%;
    padding-top: 4%;
    font-weight: 400;
    color: #636364
}

.product .banner .content .con_right {
    float: left;
    width: 46%;
}

.product .banner .content .con_right img {
    width: 100%;
    max-width: 450px
}

@media only screen and (min-width:300px) and (max-width:800px) {
    .product .banner .content .con_left {
        width: 100%;
        margin-right: 0;
        text-align: center
    }
    .product .banner .content .con_right {
        display: none
    }
    .product .banner .content .con_left .p_tit {
        width: 80%;
        margin-left: 10%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden
    }
    .product .banner .content .con_left .p_con {
        width: 70%;
        margin-left: 15%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }
}

.swap_conversion {
    padding-bottom: 5%;
    padding-top: 3%
}

.swap_conversion .p_headerTit {
    font-size: 65%;
    font-weight: 400;
    color: #1a1a1a;
    font-weight: 700;
    letter-spacing: .2vw;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all
}

.swap_conversion .p_headerCon {
    width: 60%;
    margin: 2% auto 0 auto;
    letter-spacing: .1vw;
    font-size: 38%;
    font-weight: 400;
    color: #999;
    text-align: center;
    line-height: 200%
}

.swap_conversion .content {
    margin-top: 3%
}

.swap_conversion .content .con {
    float: left;
    width: 30%;
    margin-right: 5%;
    margin-top: 2%
}

.swap_conversion .content .con:nth-child(3n) {
    margin-right: 0
}

.swap_conversion .content .con:nth-child(4),
.swap_conversion .content .con:nth-child(5),
.swap_conversion .content .con:nth-child(6) {
    margin-top: 6%
}

.swap_conversion .content .con .con_left {
    float: left;
    width: 25%;
    margin-right: 3%
}

.swap_conversion .content .con .con_left img {
    width: 100%;
    max-width: 100px
}

.swap_conversion .content .con .con_right {
    width: 70%;
    float: left
}

.swap_conversion .content .con .con_right .p_tit {
    font-size: 45%;
    font-weight: 700;
    margin-top: 5%;
    color: #1a1a1a
}

.swap_conversion .content .con .con_right .p_con {
    font-size: 35%;
    font-weight: 400;
    margin-top: 3%;
    color: #666;
    line-height: 150%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

@media only screen and (min-width:300px) and (max-width:800px) {
    .swap_conversion {
        padding-top: 8%;
        padding-bottom: 10%
    }
    .swap_conversion .content .con {
        width: 48%;
        margin-right: 4%
    }
    .swap_conversion .content .con:nth-child(3n) {
        margin-right: 4%
    }
    .swap_conversion .content .con:nth-child(2n) {
        margin-right: 0
    }
    .swap_conversion .p_headerCon {
        width: 80%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden
    }
}

.swap_function {
    padding-bottom: 5%;
    padding-top: 3%;
    background: url(../images/pro_s2_back.png) no-repeat;
    background-size: cover
}

.swap_function .p_headerTit {
    color: #fff
}

.swap_function .p_headerCon {
    width: 50%;
    margin: 2% auto 0 auto;
    color: #fff;
    text-align: center;
    line-height: 200%;
    letter-spacing: .1vw
}

.swap_function .content {
    padding: 4% 5%;
    background: #fff;
    border-radius: 5px;
    margin-top: 3%
}

.swap_function .content .br {
    display: flex;
    justify-content: space-between;
    margin-top: 3%;
    flex-wrap: wrap
}

.swap_function .content .br:first-child {
    margin-top: 0
}

.swap_function .content .con {
    width: 10%;
    text-align: center
}

@media only screen and (min-width:300px) and (max-width:800px) {
    .swap_function {
        padding-top: 8%;
        padding-bottom: 10%
    }
    .swap_function .content .con {
        width: 30%;
        text-align: center
    }
    .swap_function .content .con:nth-child(4),
    .swap_function .content .con:nth-child(5),
    .swap_function .content .con:nth-child(6) {
        margin-top: 3%
    }
    .swap_function .p_headerCon {
        width: 80%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden
    }
}

.swap_function .content .con .p_pic {
    width: 30%;
    margin: 0 auto
}

.swap_function .content .con .p_pic img {
    width: 100%;
    max-width: 62px
}

.swap_function .content .con .p_text {
    margin-top: 5%;
    font-size: 35%;
    font-weight: 400;
    color: #1a1a1a
}

.swap_PDF {
    padding: 4% 0
}

.swap_PDF .content {
    display: flex;
    align-items: center
}

.swap_PDF .con_top {
    width: 60%;
    margin: 0 20%;
    display: none
}

.swap_PDF .con_top img {
    width: 100%;
    max-width: 693px
}

.swap_PDF .con_left {
    width: 40%;
    margin-right: 2%
}

.swap_PDF .con_left .p_tit {
    font-size: 55%;
    font-weight: 400;
    color: #1a1a1a
}

.swap_PDF .con_left .p_con {
    margin-top: 6%;
    font-size: 35%;
    font-weight: 400;
    color: #1a1a1a;
    line-height: 200%
}

.swap_PDF .con_left .p_btn {
    margin-top: 5%
}

.swap_PDF .con_left .p_btn a {
    border: 1px solid #204ac7;
    font-size: 35%;
    padding: 1.5% 7%;
    font-weight: 400;
    color: #fff;
    background-color: #204ac7;
    border-radius: 50px;
    text-decoration: none
}

.swap_PDF .con_left .p_btn a:hover {
    background: #599fff;
    color: #fff
}

.swap_PDF .con_right {
    width: 56%
}

.swap_PDF .con_right img {
    width: 100%;
    max-width: 693px
}

@media only screen and (min-width:300px) and (max-width:800px) {
    .swap_PDF {
        padding: 6% 0 8% 0
    }
    .swap_PDF .con_left {
        width: 100%;
        margin-right: 0;
        text-align: center
    }
    .swap_PDF .con_top {
        display: block
    }
    .swap_PDF .con_left .p_con {
        margin-top: 3%
    }
    .swap_PDF .con_left .p_con {
        width: 80%;
        margin-top: 3%;
        margin-left: 10%
    }
    .swap_PDF .con_left .p_btn {
        margin-top: 2%
    }
    .swap_PDF .con_right {
        display: none
    }
}

.swap_PDF2 {
    padding: 4% 0;
    background: #f6f9fc
}

.swap_PDF2 .content {
    display: flex;
    align-items: center
}

.swap_PDF2 .con_top {
    width: 60%;
    margin: 0 20%;
    display: none
}

.swap_PDF2 .con_top img {
    width: 100%;
    max-width: 693px
}

.swap_PDF2 .con_right {
    width: 40%;
    margin-right: 2%
}

.swap_PDF2 .con_right .p_tit {
    font-size: 55%;
    font-weight: 400;
    color: #1a1a1a
}

.swap_PDF2 .con_right .p_con {
    margin-top: 6%;
    font-size: 35%;
    font-weight: 400;
    color: #1a1a1a;
    line-height: 200%
}

.swap_PDF2 .con_right .p_btn {
    margin-top: 5%
}

.swap_PDF2 .con_right .p_btn a {
    border: 1px solid #3088ff;
    font-size: 35%;
    padding: 1.5% 7%;
    font-weight: 400;
    color: #fff;
    border-radius: 50px;
    text-decoration: none;
    background: #3088ff;
	margin-left: 25px;
}

.swap_PDF2 .con_right .p_btn a:hover {
    background: #599fff;
    color: #fff
}

.swap_PDF2 .con_left {
    float: left;
    width: 56%
}

.swap_PDF2 .con_left img {
    width: 100%;
    max-width: 693px
}

@media only screen and (min-width:300px) and (max-width:800px) {
    .swap_PDF2 {
        padding: 6% 0 8% 0
    }
    .swap_PDF2 .con_right {
        width: 100%;
        margin-right: 0;
        text-align: center
    }
    .swap_PDF2 .con_top {
        display: block
    }
    .swap_PDF2 .con_right .p_con {
        width: 80%;
        margin-top: 3%;
        margin-left: 10%
    }
    .swap_PDF2 .con_right .p_btn {
        margin-top: 2%
    }
    .swap_PDF2 .con_left {
        display: none
    }
}

.swap_feedback {
    padding-bottom: 5%;
    padding-top: 3%;
    background: url(../images/pro_s5_back.png) no-repeat;
    background-size: cover
}

.swap_feedback .p_headerCon {
    width: 50%;
    margin: 2% auto 0 auto
}

@media only screen and (min-width:300px) and (max-width:800px) {
    .swap_feedback {
        padding-top: 8%;
        padding-bottom: 10%
    }
    .swap_feedback .p_headerCon {
        width: 80%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden
    }
}

.swap_feedback .content {
    padding: 0 3%
}

.swap_feedback .swiper-container {
    padding: 4% 2% 1% 2%;
    width: 100%;
    height: 100%
}

.swap_feedback .swiper-slide {
    text-align: center
}

.swap_feedback .swiper-slide .amite {
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    position: relative;
    background: #fff;
    padding: 0 0 3% 0;
    transition: transform .2s;
    -webkit-transition: transform .2s;
    -moz-transition: transform .2s;
    -ms-transition: transform .2s
}

.swap_feedback .swiper-slide .amite:hover {
    -webkit-transform: translateY(-12px);
    -moz-transform: translateY(-12px);
    -ms-transform: translateY(-12px);
    transform: translateY(-12px);
    box-shadow: 0 8px 10px rgba(15, 92, 228, .24);
    cursor: pointer
}

.position {
    position: absolute;
    top: 0;
    left: 10%;
    width: 10%
}

.position img {
    width: 100%;
    max-width: 16px
}

.swap_feedback .swiper-slide .p_pic {
    position: absolute;
    left: 50%;
    margin-left: -22.5%;
    top: -15%;
    width: 45%
}

.swap_feedback .swiper-slide .p_pic img {
    width: 100%;
    max-width: 68px
}

.swap_feedback .swiper-slide .p_name {
    padding-top: 13%;
    margin-top: 3%;
    font-size: 55%;
    font-weight: 400;
    color: #1a1a1a
}

.swap_feedback .swiper-slide .p_zan {
    margin-top: 3%;
    font-size: 35%;
    font-weight: 400;
    color: #1a1a1a
}

.swap_feedback .swiper-button-prev,
.swap_feedback .swiper-container-rtl .swiper-button-next {
    left: 20px!important;
    right: auto!important
}

.swap_feedback .swiper-button-next,
.swap_feedback .swiper-container-rtl .swiper-button-prev {
    right: 20px!important
}

@media only screen and (min-width:300px) and (max-width:800px) {
    .swap_feedback .swiper-container {
        padding: 9% 2% 1% 2%
    }
    .swap_feedback .swiper-slide .p_pic {
        left: 50%;
        width: 30%;
        margin-left: -15%
    }
    .swap_feedback .swiper-slide .p_name {
        padding-top: 16%
    }
}

.swap_feedback .swiper-slide .p_zan img {
    width: 6%;
    max-width: 16px
}

.swap_feedback .swiper-slide .p_con {
    margin-top: 3%;
    text-align: left;
    font-size: 35%;
    font-weight: 400;
    color: #1a1a1a;
    padding: 0 8%;
    line-height: 170%;
    min-height: 100px
}

.swap_feedback .swiper-slide .p_con .p_text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden
}

.swap_feedback {
    position: relative
}

.swap_feedback .content {
    margin-top: 3%
}

.swap_topic {
    padding-bottom: 5%;
    padding-top: 3%;
    background: url(../images/pro_s6_back.png) no-repeat;
    background-size: cover
}

.swap_topic .p_headerTit {
    color: #fff
}

.swap_topic .content {
    margin-top: 3%
}

.swap_topic .content .con {
    float: left;
    width: 30%;
    margin-right: 5%
}

.swap_topic .content .con:nth-child(3n) {
    margin-right: 0
}

.swap_topic .content .con .p_tit {
    font-size: 45%;
    font-weight: 700;
    margin-top: 5%;
    color: #fff
}

.swap_topic .content .con .p_tit img {
    width: 10%;
    max-width: 34px;
    vertical-align: middle;
    margin-right: 2%
}

.swap_topic .content .con .p_con {
    font-size: 35%;
    font-weight: 400;
    margin-top: 6%;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.swap_topic .content .con .p_con a {
    color: #fff;
    text-decoration: none
}

.swap_topic .content .con .p_con a:hover {
    color: #0ff
}

@media only screen and (min-width:300px) and (max-width:800px) {
    .swap_topic {
        padding-top: 8%;
        padding-bottom: 10%
    }
}

.swap_converter {
    padding-bottom: 2.5%;
    padding-top: 3%;
    background: url(../images/pro_s7_back.png) no-repeat;
    background-size: cover
}

.swap_converter .p_headerTit {
    color: #fff
}

.swap_converter .p_headerCon {
    width: 50%;
    margin: 1.4% auto 0 auto;
    letter-spacing: .1vw;
    font-size: 38.2%;
    font-weight: 400;
    color: #fff;
    text-align: center;
    line-height: 200%
}

.swap_converter .p_btn {
    margin-top: 2.5%;
    text-align: center
}

.swap_converter .p_btn a {
    border: 1px solid #204ac7;
    font-size: 35%;
    padding: 1.2% 5%;
    font-weight: 400;
    color: #204ac7;
    border-radius: 50px;
    text-decoration: none
}

.swap_converter .p_btn a:hover {
    background: #3088ff;
    color: #fff
}

@media only screen and (min-width:300px) and (max-width:800px) {
    .swap_converter {
        padding-top: 8%;
        padding-bottom: 10%
    }
    .swap_converter .p_headerCon {
        width: 80%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden
    }
}