@charset "utf-8";

/* 2022改版 */
.header_box{background:#1a62e1;position: relative;height: 470px;background-size: cover;width: 100%;margin: 0 auto;}
.header_box .header{box-sizing: border-box;top: 50%;left: 50%;transform: translateY(-50%); width:1080px; position: absolute; margin-left: -540px;}
.header_box .header .header_r { z-index: 0; right: 0px; top: 50%; transform: translateY(-50%);}
.header_box .header>h1{font-size: 44px;color: #fff;font-weight: 900;line-height: 90px;}
.header_box .header>p{font-size: 16px;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.btn2 { background: none; color: #ffffff;}
.header_box .header>span { display: inline-block; color: #ffffff; font-size: 18px;}

.content-1 { width: 100%; padding: 65px 0 10px; background: #f9faff;}
.content-1>h1 { font-weight: 100; line-height: 1; font-size: 30px; color: #333333; text-align: center;}
.content-1>p { font-size: 16px;color: #999999; text-align: center; margin: 25px 0 50px;}
.content-1 .boxArea { width: 1080px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;}
.content-1 .boxArea .box { flex: 0 0 317px; box-sizing: border-box;}
.content-1 .boxArea .box p { font-size: 42px; color: #1a62e1; text-align: center;}
.content-1 .boxArea .box span { font-size: 15px; color: #6d788e; text-align: center; display: block; margin: 16px 0 22px;}
.content-1 .boxArea .box .coupon { display: block; filter: drop-shadow(0 0 21px rgba(27, 101, 225, .14));}

.content-2 { width: 100%; padding: 65px 0 80px; background: #edeff2;}
.content-2>h1 { font-weight: 100; line-height: 1; font-size: 30px; color: #333333; margin-bottom: 60px; text-align: center;}
.content-2 .boxArea { width: 1080px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;}
.content-2 .boxArea p { color: #6d788e; font-size: 15px; line-height: 2em; text-align: center;}

.content-3 { width: 100%; padding: 60px 0 50px; background: #1a62e1;}
.content-3>h1 { font-weight: 100; line-height: 1; font-size: 30px; color: #ffffff; margin-bottom: 50px; text-align: center;}
.content-3 .boxArea { width: 1080px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;}
.content-3 .boxArea .flexRow { display: flex; align-items: center; justify-content: space-between;}
.content-3 .boxArea .flexRow .flexColumn { margin-left: 35px; width: 190px;}
.content-3 .boxArea .flexRow .flexColumn p { color: #ffffff; font-size: 18px; line-height: 2em;}
.content-3 .boxArea .flexRow .flexColumn span { color: #ffffff; font-size: 15px; opacity: 0.75; line-height: 24px;}

.content-4 { width: 100%; padding: 60px 0 20px; background: #f9faff;}
.content-4>h1 { font-weight: 100; line-height: 1; font-size: 30px; color: #333333; margin-bottom: 50px; text-align: center;}
.content-4 .boxArea { width: 1080px; height: 224px; margin: 0 auto; display: flex; align-items: center; justify-content: space-around; box-sizing: border-box; overflow: hidden; position: relative; background: #ffffff; z-index: 0; border: 1px #edeff2 solid;}
.content-4 .boxArea::before { content: ""; display: block; width: 182px; height: 182px; position: absolute; top: -58px; left: -68px; background: url(../Image/zfb717/2022/palpay717Active_friend_bg.png) 0 0 no-repeat; z-index: -1;}
.content-4 .boxArea::after { content: ""; display: block; width: 182px; height: 182px; position: absolute; bottom: -101px; right: -60px; background: url(../Image/zfb717/2022/palpay717Active_friend_bg.png) 0 0 no-repeat; z-index: -1;}
.content-4 .boxArea .joinBox { border-right: 1px #edeff2 solid; flex: 0 0 50%; height: 100%; display: flex; align-items: center; justify-content: center; box-sizing: border-box;}
.content-4 .boxArea .joinBox:first-child { flex-direction: column;}
.content-4 .boxArea .joinBox:first-child p { width: 256px; font-size: 18px; color: #212c42; margin-bottom: 22px;}
.content-4 .boxArea .joinBox:first-child .blueBox { width: 256px; border: 1px #1a62e1 solid; box-sizing: border-box; padding: 15px; line-height: 30px; color: #1a62e1; font-size: 24px;}
.content-4 .boxArea .joinBox:first-child .blueBox img { vertical-align: middle; margin-right: 15px;}
.content-4 .boxArea .joinBox:last-child { border-right: none; justify-content: flex-start; padding-left: 20px;}
.content-4 .boxArea .joinBox:last-child p { font-size: 18px; color: #212c42; margin-left: 20px;}

/* 添加微信弹窗 */
.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;}
.popServer .inner .right { float: left;}
.popServer .inner .txt-1 { margin: 65px 0 0 42px;}
.popServer .inner .txt-1 h3 { font-size: 23px; color: #04709d; line-height: 1.4em;}
.popServer .inner .txt-1 p { font-size: 14px; color: #04709d; line-height: 1.4em; font-weight: 300;}
.popServer .inner .txt-2 { margin: 20px 0 0 30px;}
.popServer .inner .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 .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;}