@charset "utf-8";
/* CSS Document */
/*.merchantEdition .swiper-wrapper { position: relative;}*/
body.onload { opacity: 0;}
body.endload { opacity: 1;}
#wrapper #header{position:relative;}
body { overflow-x: hidden;}

/* 2021改版 */
/* .header_box{background:url(../Image/wcf/2021/banner.jpg) top center no-repeat;position: relative;height: 636px;background-size: cover;width: 100%;margin: 0 auto;} */
.header_box{background:#1a62e1;position: relative;height: 470px;background-size: cover;width: 100%;margin: 0 auto;}
.header_box .header{box-sizing: border-box;top: 40%;left: 50%;transform: translateY(-50%); width:1080px; position: absolute; margin-left: -540px;}
.header_box .header>h1{font-size: 44px;color: #fff;font-weight: 900;line-height: 90px;}
.header_box .header>p{font-size: 18px;color: #ffffff;line-height: 34px;}
.header_box .header>a{margin:42px 20px 0 0;height: 40px;line-height: 40px;border-radius: 4px;width: 116px;display: inline-block; border: 1px #ffffff solid; text-align: center;font-size: 16px;color: #1a62e1; background: #ffffff; transition: all .3s; box-shadow: 0 0 10px rgba(0, 0, 0, .2); font-weight: 400;}
.header_box .header>a:hover{ box-shadow: 0 0 10px rgba(0, 0, 0, 0);}
.header_box .header>a.qrcodeBtn { border: 1px #ffffff solid; color: #ffffff; box-shadow: none; background: none; position: relative;}
.header_box .header>a.qrcodeBtn .qrcode { position: absolute; top: 48px; left: 50%; margin-left: -48px; opacity: 0; transition: all .3s; transform: translateY(-10px);}
.header_box .header>a.qrcodeBtn:hover .qrcode { opacity: 1; transform: translateY(0);}
.header_box .header .header_r { z-index: 0; width: 493px; height: 271px; right: 0; top: 65%; transform: translateY(-50%); background: url(../Image/wcf/2021/banner_bg.png) no-repeat center center;}
.header_box .header .header_r .ele_1 { top: -20px; right: 56px; z-index: -1; animation: ele_1 5s 0s ease-in-out infinite alternate;-webkit-animation: ele_1 5s 0s ease-in-out infinite alternate;}
.header_box .header .header_r .ele_2 { top: 62px; left: 25px; z-index: -1; opacity: 0; animation: ele_2 .6s .65s ease-in-out forwards alternate;-webkit-animation: ele_2 .6s .65s ease-in-out forwards alternate;}
.header_box .header .header_r .ele_3 { top: 72px; left: 38px; z-index: -1; opacity: 0; animation: ele_3 .6s .65s ease-in-out forwards alternate;-webkit-animation: ele_3 .6s .65s ease-in-out forwards alternate;}
.header_box .header .header_r .ele_3 img { animation: ele_3_img 5s 2s ease-in-out infinite alternate;-webkit-animation: ele_3_img 5s 2s ease-in-out infinite alternate;}
.header_box .header .header_r .ele_4 { top: 34px; left: 182px; z-index: -1; opacity: 0; animation: ele_4 .6s .65s ease-in-out forwards alternate;-webkit-animation: ele_4 .6s .65s ease-in-out forwards alternate;}
.header_box .header .header_r .ele_5 { top: 118px; right: 35px; z-index: -1; opacity: 0; animation: ele_5 .2s .65s ease-in-out forwards alternate;-webkit-animation: ele_5 .2s .65s ease-in-out forwards alternate;}
.header_box .header .header_r .ele_6 { top: 202px; left: 112px; z-index: -1; opacity: 0; animation: ele_6 .6s .65s ease-in-out forwards alternate;-webkit-animation: ele_6 .6s .65s ease-in-out forwards alternate;}
.header_box .header .header_r .ele_7 { top: 246px; right: -15px; z-index: -2;}
@keyframes ele_1{
    0% { opacity: 0;}
    50% { opacity: .5; -webkit-transform: translate(50%, 0); transform: translate(50%, 0);}
    100% { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0);}
}
@-webkit-keyframes ele_1{
    0% { opacity: 0;}
    50% { opacity: .5; -webkit-transform: translate(50%, 0); transform: translate(50%, 0);}
    100% { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0);}
}
@keyframes ele_2{
    0% { opacity: 0; -webkit-transform: translate(-100%, -150%); transform: translate(-100%, -150%);}
    100% { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0);}
}
@-webkit-keyframes ele_2{
    0% { opacity: 0; -webkit-transform: translate(-100%, -150%); transform: translate(-100%, -150%);}
    100% { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0);}
}
@keyframes ele_3{
    0% { opacity: 0; -webkit-transform: translate(100%, 150%); transform: translate(100%, 150%);}
    100% { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0);}
}
@-webkit-keyframes ele_3{
    0% { opacity: 0; -webkit-transform: translate(100%, 150%); transform: translate(100%, 150%);}
    100% { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0);}
}
@keyframes ele_3_img{
    0% { opacity: 1;}
    50% { opacity: .5; -webkit-transform: translate(5%, 5%); transform: translate(5%, 5%);}
    100% { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0);}
}
@-webkit-keyframes ele_3_img{
    0% { opacity: 1;}
    50% { opacity: .5; -webkit-transform: translate(5%, 5%); transform: translate(5%, 5%);}
    100% { opacity: 1; -webkit-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0);}
}
@keyframes ele_4{
    0% { opacity: 0; -webkit-transform: translate(0, -250%); transform: translate(0, -250%);}
    100% { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0);}
}
@-webkit-keyframes ele_4{
    0% { opacity: 0; -webkit-transform: translate(0, -250%); transform: translate(0, -250%);}
    100% { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0);}
}
@keyframes ele_5{
    0% { opacity: 0;}
    100% { opacity: 1;}
}
@-webkit-keyframes ele_5{
    0% { opacity: 0;}
    100% { opacity: 1;}
}
@keyframes ele_6{
    0% { opacity: 0; -webkit-transform: translate(0, -150%); transform: translate(0, -150%);}
    100% { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0);}
}
@-webkit-keyframes ele_6{
    0% { opacity: 0; -webkit-transform: translate(0, -150%); transform: translate(0, -150%);}
    100% { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0);}
}

.content { position: relative; background: #f8f8f8;}
.content .part1 { height: 480px; background: url(../Image/wcf/2021/zf_bg_01.png) bottom center repeat-x;}
.content .part1>h1 {text-align: center;font-size: 30px;color: #444444;font-weight: 100;text-align: center; padding: 48px 0 22px;}
.content .part1>p {font-size: 16px;color: #666666;margin: 37px auto 65px;text-align: center;}
.content .part1 .inner {width: 1080px; margin: 0 auto; position: relative;}
.content .part1 .inner::before { display: block; content: ""; position: absolute; bottom: -25px; left: -125px; width: 870px; height: 240px; background: url(../Image/wcf/2021/zf_bg_02.png) 0 0 no-repeat;}
.content .part1 .inner .part1_l { width: 542px; height: 325px; margin: 0 90px 0 23px;}
.content .part1 .inner .part1_l .ele_1 { bottom: 20px; left: 50px; z-index: 1; animation: zf_ele_03 8s 0s ease-in-out infinite alternate;-webkit-animation: zf_ele_03 8s 0s ease-in-out infinite alternate;}
.content .part1 .inner .part1_l .ele_2 { top: 25px; left: 92px; animation: zf_ele_02 8s 0s ease-in-out infinite alternate;-webkit-animation: zf_ele_02 8s 0s ease-in-out infinite alternate;}
.content .part1 .inner .part1_l .ele_3 { top: 0; right: 98px; animation: zf_ele_02 8s 0s ease-in-out infinite alternate;-webkit-animation: zf_ele_02 8s 0s ease-in-out infinite alternate;}
.content .part1 .inner .part1_l .ele_4 { bottom: 0; right: 0;}
.content .part1 .inner .part1_l .ele_5 { bottom: 40px; right: 66px; animation: zf_ele_05 8s 0s ease-in-out infinite alternate;-webkit-animation: zf_ele_05 8s 0s ease-in-out infinite alternate;}
.content .part1 .inner .part1_l .ele_6 { top: 20px; right: 186px; animation: zf_ele_06 8s 0s ease-in-out infinite alternate;-webkit-animation: zf_ele_06 8s 0s ease-in-out infinite alternate;}
.content .part1 .inner .part1_r { margin-top: 30px;}
.content .part1 .inner .part1_r li { margin-bottom: 20px; font-size: 16px; color: #4f5c79;}
.content .part1 .inner .part1_r i { display: inline-block; width: 32px; height: 32px; margin-right: 15px; vertical-align: middle;}
.content .part1 .inner .part1_r i.zf_icon_01 { background: url(../Image/wcf/2021/zf_icon_01.png) 0 0 no-repeat;}
.content .part1 .inner .part1_r i.zf_icon_02 { background: url(../Image/wcf/2021/zf_icon_02.png) 0 0 no-repeat;}
.content .part1 .inner .part1_r i.zf_icon_03 { background: url(../Image/wcf/2021/zf_icon_03.png) 0 0 no-repeat;}
.content .part1 .inner .part1_r i.zf_icon_04 { background: url(../Image/wcf/2021/zf_icon_04.png) 0 0 no-repeat;}
.content .part1 .inner .part1_r i.zf_icon_05 { background: url(../Image/wcf/2021/zf_icon_05.png) 0 0 no-repeat;}
@keyframes zf_ele_02{
    0% { opacity: 0;}
    10% { opacity: 0; transform: scale(0);}
    15% { opacity: 1; transform: scale(1);}
    20% { opacity: 1; transform: translateY(0px);}
    40% { opacity: 1; transform: translateY(-8px);}
    60% { opacity: 1; transform: translateY(0px);}
    80% { opacity: 1; transform: translateY(-8px);}
    100% { opacity: 1; transform: translateY(0px);}
}
@-webkit-keyframes zf_ele_02{
    0% { opacity: 0;}
    10% { opacity: 0; transform: scale(0);}
    15% { opacity: 1; transform: scale(1);}
    20% { opacity: 1; transform: translateY(0px);}
    40% { opacity: 1; transform: translateY(-8px);}
    60% { opacity: 1; transform: translateY(0px);}
    80% { opacity: 1; transform: translateY(-8px);}
    100% { opacity: 1; transform: translateY(0px);}
}
@keyframes zf_ele_03{
    0% { opacity: 0;}
    10% { opacity: 0; transform: scale(0);}
    15% { opacity: 1; transform: scale(1);}
    20% { opacity: 1; transform: translateY(0px);}
    30% { opacity: 1; transform: translateY(-10px);}
    40% { opacity: 1; transform: translateY(0px);}
    50% { opacity: 1; transform: translateY(-10px);}
    60% { opacity: 1; transform: translateY(0px);}
    70% { opacity: 1; transform: translateY(-10px);}
    80% { opacity: 1; transform: translateY(0px);}
    90% { opacity: 1; transform: translateY(-10px);}
    100% { opacity: 1; transform: translateY(0px);}
}
@-webkit-keyframes zf_ele_03{
    0% { opacity: 0;}
    10% { opacity: 0; transform: scale(0);}
    15% { opacity: 1; transform: scale(1);}
    20% { opacity: 1; transform: translateY(0px);}
    30% { opacity: 1; transform: translateY(-10px);}
    40% { opacity: 1; transform: translateY(0px);}
    50% { opacity: 1; transform: translateY(-10px);}
    60% { opacity: 1; transform: translateY(0px);}
    70% { opacity: 1; transform: translateY(-10px);}
    80% { opacity: 1; transform: translateY(0px);}
    90% { opacity: 1; transform: translateY(-10px);}
    100% { opacity: 1; transform: translateY(0px);}
}
@keyframes zf_ele_05{
    0% { opacity: 0;}
    15% { opacity: 0;}
    30% { opacity: 1;}
    100% { opacity: 1;}
}
@-webkit-keyframes zf_ele_05{
    0% { opacity: 0;}
    15% { opacity: 0;}
    30% { opacity: 1;}
    100% { opacity: 1;}
}
@keyframes zf_ele_06{
    0% { opacity: 0;}
    10% { opacity: 0; transform: translateY(-100%);}
    15% { opacity: 1; transform: translateY(0px);}
    100% { opacity: 1; transform: translateY(0px);}
}
@-webkit-keyframes zf_ele_06{
    0% { opacity: 0;}
    10% { opacity: 0; transform: translateY(-100%);}
    15% { opacity: 1; transform: translateY(0px);}
    100% { opacity: 1; transform: translateY(0px);}
}

.content .part2 { margin-bottom: 30px; background: #fbfcff;}
.content .part2>h1 {font-size:30px;color: #444444;text-align: center; line-height: 1;font-weight: 100; padding: 50px 0;}
.content .part2>p {font-size: 16px;color: #666666;margin-bottom: 45px;text-align: center;}
.content .part2 .part2_box_top { width: 1080px; margin: 0 auto;}
.content .part2 .part2_box_top ul { display: flex; justify-content: space-between; margin-bottom: 50px;}
.content .part2 .part2_box_top ul li { text-align: center; padding: 0 4%;}
.content .part2 .part2_box_top ul li p { font-size: 18px; color: #374567; margin: 10px 0;}
.content .part2 .part2_box_top ul li span { font-size: 15px; color: #8694ac; line-height: 26px;}
.content .part2 .part2_box_bottom { width: 1080px; margin: 0 auto; display: flex; justify-content: space-evenly; padding-bottom: 70px;}
.content .part2 .part2_box_bottom>div { width: 515px; overflow: hidden; position: relative; z-index: 0; border: 1px #ebf0fc solid; box-sizing: border-box; padding: 16px 30px 31px 46px;}
.content .part2 .part2_box_bottom>div .txt { display: flex; justify-content: space-between; align-items: center;}
.content .part2 .part2_box_bottom>div .txt h3 { font-size: 26px; color: #374567;}
.content .part2 .part2_box_bottom>div ul { display: flex; flex-wrap: wrap;}
.content .part2 .part2_box_bottom>div ul li { font-size: 16px; color: #374567; flex: 1 0 60%; margin: 14px 0;}
.content .part2 .part2_box_bottom>div ul li:nth-child(2n) { flex: 1 0 40%;}
.content .part2 .part2_box_bottom>div ul li i.fg_l_05 { display: inline-block; vertical-align: middle; width: 15px; height: 13px; margin-right: 12px; background: url(../Image/wcf/2021/fg_l_05.png) 0 0 no-repeat;}
.content .part2 .part2_box_bottom .part2_box_bottom_l::before { animation: part2_box_bottom_l_01 10s 0s ease-in-out infinite alternate;-webkit-animation: part2_box_bottom_l_01 10s 0s ease-in-out infinite alternate; display: inline-block; content: ""; position: absolute; width: 224px; height: 224px; left: -98px; bottom: 118px; background: url(../Image/wcf/2021/fg_l_01.png) 0 0 no-repeat; z-index: -1;}
.content .part2 .part2_box_bottom .part2_box_bottom_l::after { animation: part2_box_bottom_l_02 10s 0s ease-in-out infinite alternate;-webkit-animation: part2_box_bottom_l_02 10s 0s ease-in-out infinite alternate; display: inline-block; content: ""; position: absolute; width: 283px; height: 283px; right: -105px; top: 73px; background: url(../Image/wcf/2021/fg_l_02.png) 0 0 no-repeat; z-index: -1;}
.content .part2 .part2_box_bottom .part2_box_bottom_r::before { animation: part2_box_bottom_l_01 10s 0s ease-in-out infinite alternate;-webkit-animation: part2_box_bottom_l_01 10s 0s ease-in-out infinite alternate; display: inline-block; content: ""; position: absolute; width: 224px; height: 224px; left: -96px; top: 145px; background: url(../Image/wcf/2021/fg_l_01.png) 0 0 no-repeat; z-index: -1;}
.content .part2 .part2_box_bottom .part2_box_bottom_r::after { animation: part2_box_bottom_l_02 10s 0s ease-in-out infinite alternate;-webkit-animation: part2_box_bottom_l_02 10s 0s ease-in-out infinite alternate; display: inline-block; content: ""; position: absolute; width: 224px; height: 224px; right: -129px; bottom: 85px; background: url(../Image/wcf/2021/fg_l_01.png) 0 0 no-repeat; z-index: -1;}
@keyframes part2_box_bottom_l_01{
    0% { opacity: 1; transform: translateX(-18px);}
    20% { opacity: 1; transform: translateX(0px);}
    40% { opacity: 1; transform: translateX(-18px);}
    60% { opacity: 1; transform: translateX(0px);}
    80% { opacity: 1; transform: translateX(-18px);}
    100% { opacity: 1; transform: translateX(0px);}
}
@-webkit-keyframes part2_box_bottom_l_01{
    0% { opacity: 1; transform: translateX(-18px);}
    20% { opacity: 1; transform: translateX(0px);}
    40% { opacity: 1; transform: translateX(-18px);}
    60% { opacity: 1; transform: translateX(0px);}
    80% { opacity: 1; transform: translateX(-18px);}
    100% { opacity: 1; transform: translateX(0px);}
}
@keyframes part2_box_bottom_l_02{
    0% { opacity: 1; transform: translateX(0px);}
    20% { opacity: 1; transform: translateX(-18px);}
    40% { opacity: 1; transform: translateX(0px);}
    60% { opacity: 1; transform: translateX(-18px);}
    80% { opacity: 1; transform: translateX(0px);}
    100% { opacity: 1; transform: translateX(-18px);}
}
@-webkit-keyframes part2_box_bottom_l_02{
    0% { opacity: 1; transform: translateX(0px);}
    20% { opacity: 1; transform: translateX(-18px);}
    40% { opacity: 1; transform: translateX(0px);}
    60% { opacity: 1; transform: translateX(-18px);}
    80% { opacity: 1; transform: translateX(0px);}
    100% { opacity: 1; transform: translateX(-18px);}
}

.content .part3{ background: #1a62e1;height: 420px;overflow: hidden;}
.content .part3 .inner { width: 1080px; margin: 0 auto; display: flex; justify-content: space-between; padding-top: 70px;}
.content .part3 .inner>h1{font-size:30px;color: #ffffff;text-align: left; line-height: 1.5;font-weight: 100; margin: 140px 0 0 23px; position: relative;}
.content .part3 .inner>h1::after { display: inline-block; content: ""; position: absolute; top: -65px; left: -50px; width: 147px; height: 147px; background: url(../Image/wcf/2021/lc_icon_01.png) center center no-repeat;}
.content .part3 .inner>p{font-size: 16px;color: #ffffff;margin-bottom: 100px;text-align: center;}
.content .part3 .inner ul { display: flex; justify-content: space-between; align-items: center;}
.content .part3 .inner ul li { transition: all .3s;}
.content .part3 .inner ul li:nth-child(2n+1):hover { transform: translateY(-8px);}

.content .part4{ background: #ffffff; text-align: center; padding-bottom: 60px;}
.content .part4>h1{font-size: 30px;color: #444444;font-weight: 100;line-height: 1; padding: 68px 0 35px;}
.content .part4>p{font-size: 16px;color: #666666;margin: 20px 0 45px;}
.content .part4>ul { display: inline-block; margin: 0 auto 0 33px;}
.content .part4>ul li { float: left; margin-left: -33px; position: relative; overflow: hidden;}
.content .part4>ul li p { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #ffffff; font-size: 18px; cursor: default;}
.content .part4>ul li img { transition: all .3s; display: block;}
.content .part4>ul li:hover img { transform: scale(1.05);}

.popServer { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.2); z-index: 1002;}
.popServer .inner { width: 440px; height: 260px; position: fixed; top: 50%; left: 50%; margin: -160px 0 0 -220px; background: url(../Image/popServer/popup_bg.png) center center no-repeat;background-size: cover;}
.popServer .inner .qrcode { float: left; margin: 97px 0 0 56px; width: 134px;}
.popServer .inner .right { float: left;}
.popServer .inner .right .txt-1 { margin: 65px 0 0 45px;}
.popServer .inner .right .txt-1 h3 { font-size: 23px; color: #04709d; line-height: 1.4em;}
.popServer .inner .right .txt-1 p { font-size: 12px; color: #04709d; line-height: 1.4em; font-weight: 300;}
.popServer .inner .right .txt-2 { margin: 20px 0 0 25px;}
.popServer .inner .right .txt-2 h3 { font-size: 43px; color: #f9feff; line-height: 1.4em; text-shadow: 1px 0 5px rgba(34, 203, 239, 0.43);}
.popServer .inner .right .txt-2 p { font-size: 14px; color: #f9feff; line-height: 1.4em; font-weight: 300; text-shadow: 1px 0 5px rgba(34, 203, 239, 0.43);}
.popServer .inner .close { width: 31px; height: 31px; cursor: pointer; position: absolute; top: 10px; right: 10px; background: url(../Image/popServer/icon_close.png) center center no-repeat;background-size: cover;}

.foot_ban{width: 100%;height: 232px;background: url(../Image/memberMarketing/2021-11/footer_bg.jpg) center center no-repeat;background-size: cover;}
.foot_ban .inner { display: flex; width: 1200px; height: 100%; margin: 0 auto; flex-direction: column; justify-content: center; position: relative;}
.foot_ban .inner h1{font-size: 30px;color: #FFFFFF;line-height: 1.5;text-align: center;font-weight: 100;margin-bottom: 20px;}
.foot_ban .inner a{width: 160px;font-size: 16px;color: #ffffff;line-height: 42px;display: block;margin: 0 auto;text-align: center;border-radius: 5px;text-decoration: none;height: 42px; background: #12caee; transition: all .3s; box-shadow: 2px 0 10px rgba(0, 0, 0, .2); font-weight: bold;}
.foot_ban .inner a:hover{ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}
.foot_ban .inner .qrcode { position: absolute; top: 50%; right: 0; transform: translateY(-50%); text-align: center;}
.foot_ban .inner .qrcode p { color: #ffffff; font-size: 14px;}