@charset "utf-8";

/*---------- reset ----------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; margin:0; padding:0}article, aside, canvas, figure, figure img, figcaption, hgroup, footer, header, nav, section, audio, video{display:block}ul, li, ol{list-style:none; background:transparent}h1, h2, h3, h4, h5, h6{font-weight:400; clear:both}a, a:hover{text-decoration:none}
blockquote{quotes:none}blockquote:before, blockquote:after, q:before, q:after{content:none}table{border-collapse:collapse; border-spacing:0}input[type="submit"]:focus, input[type="button"]:focus{outline:none}:focus{outline:0}a img, input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner{border:0}
html,body{width:100%;height: 100%;}
body{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;background:#fff}
.clear{background:none;border:0;clear:both;display:block;float:none;font-size:0;overflow:hidden;visibility:hidden;width:0;height:0;margin:0;padding:0}
.clearfix:after{content:'';clear:both;display:block;}
*{-webkit-tap-highlight-color:transparent;}
*{
  -webkit-overflow-scrolling: touch;
}
.input_no_style{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;border:none;background:none;}
img,canvas{display:block;}
.anim500{-webkit-transition:all 0.5s;transition:all 0.5s;}
.anim1000{-webkit-transition:all 1s;transition:all 1s;}

.center_center_box{
	width:100%;height:100%;
	z-index: 9999;
	-webkit-overflow-scrolling: touch;
	display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:box;
	-webkit-box-pack:center;-moz-box-pack:center;-ms-flex-pack:center;box-pack:center;
	-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;box-align:center;
}

canvas.light{width:100%;-webkit-filter:blur(8.5px);filter:blur(8.5px);overflow:hidden;}
.layout{background-color:#fff;max-width:750px;width:100%;height:100%;position:relative;}
.layout .bg{position:absolute;left:0;bottom:0;z-index:0;width:100%;}
.layout .bg.hide{opacity:0;}
.layout .bgcover{position:absolute;top:0;left:0;z-index:0;display:none;}
.part{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;}
.part .content{width:88%;margin:0 auto;}
.part .next{position:absolute;left:0;bottom:2.2%;width:100%;z-index:10;opacity:0;}
.part .next.show{opacity:1;}
.part .next .text{color:#000;line-height:100%;margin-bottom:1%;text-align:center;font-size:0.71em;}
.part .next img{
	width:4%;margin:0 auto;
	-webkit-animation:next 0.5s infinite alternate;
    animation:next 0.5s infinite alternate;
}
@-webkit-keyframes next{
    from { -webkit-transform:translateY(0); }
    to { -webkit-transform:translateY(4px); }
}
@keyframes next{
    from { transform:translateY(0); }
    to { transform:translateY(4px); }
}
.part .tips{font-size:0.75em;color:#333;text-align:center;margin-top:4%;line-height:150%;}
.part .tips.hide{opacity:0;-webkit-transform:translate(0,-10px);transform:translate(0,-10px);}
.part .btn{width:60%;background-color:#db0011;color:#fff;text-align:center;padding:3% 0;margin:4% auto 0;display:block;line-height:100%;}
.part .btn.hide{-webkit-transform:scale(1.2,1.2);transform:scale(1.2,1.2);opacity:0;}

.part0 .logo{width:44.53%;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background:url('logo.png') no-repeat 0 0;background-size:100% auto;}
.part0 .logo.hide{opacity:0;}
.part0 .card{width:76.66%;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}
.part0 .card.hide{opacity:0;}

.part1.next{z-index:-1;}
.part1.prev{opacity:0;}
.part1 .hsbc_logo,
.part1 .jd_logo{width:29.6%;position:absolute;top:4%;}
.part1 .hsbc_logo{left:6.8%;}
.part1 .hsbc_logo.hide{opacity:0;-webkit-transform:scale(1.5,1.5);transform:scale(1.5,1.5);}
.part1 .jd_logo{right:6.8%;width: 25%;}
.part1 .jd_logo.hide{opacity:0;-webkit-transform:scale(1.5,1.5);transform:scale(1.5,1.5);}
.part1 .card{width:80%;margin:5% auto;position:relative;opacity:0;}
.part1 .card img{width:100%;}
.part1 .card .light{position:absolute;top:0;left:0;z-index:1;display:none;}
.part1 .center_center_box{position:relative;z-index:2;}
.part1 .center_center_box > div{margin-top:6%;}
.part1 .top{width:114%;margin-left:-7%;}
.part1 .title{letter-spacing:0.15em;font-size:2.14em;color:#db0011;text-align:center;font-weight:bold;}
.part1 .title.hide{opacity:0;-webkit-transform:scale(1.2,1.2);transform:scale(1.2,1.2);}
.part1 .title img{width:9.1%;margin-left:1%;display:inline;-webkit-transform:translate(0,15%) rotate(0deg);transform:translate(0,15%) rotate(0deg);}
.part1 .title img.hide{-webkit-transform:translate(-10px,15%) rotate(-180deg);transform:translate(-10px,15%) rotate(-180deg);opacity:0;}
.part1 .intro{margin-top:2%;color:#000;font-size:1.35em;text-align:center;font-weight:bold;}
.part1 .intro.hide{opacity:0;-webkit-transform:scale(1.2,1.2);transform:scale(1.2,1.2);}
.part1 .intro span{color:#db0011;}
.part1 .top .text{width:78%;margin:3% auto 0;}
.part1 .top .text li{margin:1px 0 1px 1.5em;font-size:0.85em;list-style-type:disc;color:#333;text-align:left;white-space:nowrap;font-weight:bold;}
.part1 .top .text.hide{opacity:0;-webkit-transform:scale(1.2,1.2);transform:scale(1.2,1.2);}
.part1 .card_hidden{visibility:hidden;width:88.8%;margin:5% auto 0;}
.part1 .card_text_hidden{font-size:1em;visibility:hidden;margin-top:0.3em;}
.part1 .characteristic{margin:5% auto 0;width:100%;}
.part1 .characteristic .point{float:left;width:22%;height:0;margin-left:4%;padding-bottom:22%;border-radius:50%;text-align:center;line-height:100%;position:relative;background:url('characteristic_bg.png') no-repeat 0 0;background-size:100% 100%;}
.part1 .characteristic .point:nth-child(1){margin-left:0;}
.part1 .characteristic .point:nth-child(4){float:right;margin-left:0;}
.part1 .characteristic .point.hide{opacity:0;-webkit-transform:translate(10px,0) rotate(90deg);transform:translate(10px,0) rotate(90deg);}
.part1 .characteristic .point > div{position:absolute;top:50%;left:0;width:100%;-webkit-transform:translate(0,-50%);transform:translate(0,-50%);}
.part1 .characteristic .point strong{font-size:0.92em;color:#333;}
.part1 .characteristic .point span{font-size:0.75em;color:#808080;}
.part1 .characteristic .point .light{position:absolute;top:0;left:0;z-index:1;display:none;}
.part1 .characteristic canvas{border-radius:50%;}

.part2.prev{display:none;}
.part2.next{opacity:1;display:none;}
.part2 .top{padding:4% 0;overflow:hidden;border-bottom:6px solid #db0011;width:100%;}
.part2 .top.hide{width:0;opacity:0;}
.part2 .top .content{position:relative;}
.part2 .top img{width:52%;}
.part2 .top .title{width:46%;font-size:1.6em;letter-spacing:0.15em;color:#db0011;text-align:right;font-weight:bold;position:absolute;top:50%;right:0;-webkit-transform:translate(0,-35%);transform:translate(0,-35%);line-height:100%;}
.part2 .top .title img{width:16%;display:inline;-webkit-transform:translate(0,15%);transform:translate(0,15%);float:none;margin:0 0 0 1%;}
.part2 .top a{font-size:0.71em;text-decoration:underline;position:absolute;right:0;bottom:0;color:#000;}
.part2 .bottom{margin-top:3%;}
.part2 .discount{width:48%;text-align:center;margin-top:5%;}
.part2 .discount.left{float:left;}
.part2 .discount.right{float:right;}
.part2 .discount.notop{margin-top:0;}
.part2 .discount.out{-webkit-transform:scale(0.8,0.8);transform:translate(0.8,0.8);opacity:0;}
.part2 .discount .icon{width:50%;margin:0 auto 3%;}
.part2 .discount .name{font-weight:bold;font-size:1.21em;color:#4d4d4d;}
.part2 .discount .name.hide{opacity:0;-webkit-transform:scale(1.2,1.2);transform:translate(1.2,1.2);}
.part2 .discount .info{line-height:150%;font-size:0.75em;color:#666;margin-top:3%;white-space:nowrap;}
.part2 .discount .info.hide{opacity:0;-webkit-transform:scale(1.2,1.2);transform:translate(1.2,1.2);}
.part2 .discount .info span{font-size:1.1em;color:#db0011;font-weight:bold;}
.part2 .discount.hide{opacity:0;}
.part2 .discount.left.hide{-webkit-transform:translate(-10px,0);transform:translate(-10px,0);}
.part2 .discount.right.hide{-webkit-transform:translate(10px,0);transform:translate(10px,0);}
.part2 .discount.left.hide .icon{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);}
.part2 .discount.right.hide .icon{-webkit-transform:rotate(90deg);transform:rotate(90deg);}

.part3.next{opacity:1;display:none;}

.popup{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:6;display:none;}
.popup-w{position: absolute;;top:0;left:0;width:100%;height:100vh;background-color:rgba(0,0,0,0.8);z-index:66;display:none;}
.popup .panel{height:66.7vh; overflow: hidden; border-radius: 0.2rem;z-index:99; background-color:#fff;width:80%;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 0 1.4rem 0;}
.popup .close{position:absolute;top:0.08rem;right:0.08rem;transform:translate(-50%,50%);width:4.9%;}
.popup h2.title{font-size:1.04em;line-height:1rem;color:#424146;background: #edc68d;text-align: center;}
.popup .scroll{padding: 0 0.3rem; height:100%;overflow-x:hidden;overflow-y:auto;}
.popup ol{margin:2% 0 2% 1.2em;}
.popup ol li{margin:1% 0;list-style-type:decimal;font-size:0.75em;line-height:150%;color:#555;}
.popup ul{margin:2% 0 2% 1.2em;}
.popup ul li{margin:1% 0;list-style-type:disc;font-size:0.75em;line-height:150%;color:#555;}
.popup p{font-size:0.75em; text-align: justify;margin:2% 0;line-height:150%;color:#424146;}
.popup p.title{font-size:0.85em;font-weight:400;line-height: 0.7rem; color:#424146; text-decoration:underline;}
.popup p:first-child,.popup ol:first-child,.popup ul:first-child{margin-top:0;}
.popup p:last-child,.popup ol:last-child,.popup ul:last-child{margin-bottom:0;}
.popup span{color:#db0011;}
.popup a{color:#555;text-decoration:underline;word-break:break-all;word-wrap:break-word;}
.popup p.title a{color:#555;}