@font-face{font-family:'MHeiPRCforHSBC';src:url("./fonts/MHeiPRCforHSBC/MHeiPRCforHSBC-Medium.OTF")}@font-face{font-family:'MHeiPRCforHSBC-BOLD';src:url("./fonts/MHeiPRCforHSBC/MHeiPRCforHSBC-Bold.OTF")}@font-face{font-family:'MHeiPRCforHSBC-EN';src:url("./fonts/UniversNextforHSBC-EN/UniversNextforHSBC-Medium.OTF")}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,dl,dt,dd,ol,ul,li,fieldset,form,input,textarea,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-style:normal;vertical-align:baseline;font-family:"MHeiPRCforHSBC", "MHeiPRCforHSBC-EN", "PingFang SC", "HiraginoSansGB-W3", "STHeitiSC-Light", "Microsoft YaHei", SimHei, "Helvetica Neue", Helvetica, Arial, sans-serif;-webkit-font-smoothing:antialiased;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-tap-highlight-color:transparent !important;-webkit-touch-callout:none;-webkit-user-drag:none;-webkit-appearance:none !important}html{font-size:100px}body{font-size:0.14rem;background:#fff}ul,li{list-style:none}a{color:#333;text-decoration:none}.clearfix{*zoom:1}.clearfix{display:inline-block}* html .clearfix{height:1%}.clearfix{display:block}.clearfix:after{visibility:hidden;display:block;font-size:0;content:".";clear:both;height:0}.page{padding:30px;margin:0 auto}.page .topic img{display:block;width:100%}.page .intro{padding:3vw;font-size:1.2em}.page .intro p{color:#666;line-height:1.6}.page .intro ul{padding:1em 0;color:#000}.page .intro ul li{position:relative;padding:0.5em 0 0.5em 1em}.page .intro ul li:before{content:'';position:absolute;left:0;top:50%;margin-top:-0.2em;width:0.4em;height:0.4em;background:#000;border-radius:50%;overflow:hidden}.page .story{margin:0 3vw 2vw;padding-left:0.4em;font-size:2em;font-family:'MHeiPRCforHSBC-BOLD';border-left:3px solid #DB0011;line-height:1}.page .story-list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-wrap:wrap;flex-wrap:wrap}.page .story-list .item{margin-bottom:30px;width:calc(50vw - 50px)}.page .story-list .item .thumb{position:relative;cursor:pointer}.page .story-list .item .thumb img{display:block;width:100%}.page .story-list .item .thumb .name{position:absolute;left:0;top:0;right:0;padding:0 3% 20px;height:70px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#fff;background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.9)), to(transparent));background-image:linear-gradient(rgba(0,0,0,0.9), transparent);z-index:3}.page .story-list .item .thumb:before{content:'';position:absolute;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,0.3) url("./images/icon_play@2x.png") no-repeat center center;background-size:10%;-webkit-transition:all 0.2s;transition:all 0.2s;z-index:2}.page .story-list .item .desc{padding-top:15px;line-height:1.6;color:#333;font-size:1.2em;cursor:pointer}.page .story-list .item:hover .thumb:before{background-color:transparent;background-size:15%}.page .footer{margin:3vw 3vw 2vw}.page .footer .welcome{font-size:2em;font-weight:400;color:#333333;line-height:3em}.page .footer .link{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:10em;height:4em;color:#fff;background:#DB0011}.layer-video{position:fixed;top:0;left:0;right:0;bottom:0;display:none;background:#fff;z-index:9}.layer-video.active{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.layer-video .inner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.layer-video .inner .title{margin:0 3vw 2vw;padding-left:0.4em;font-size:1.5em;font-family:'MHeiPRCforHSBC-BOLD';border-left:3px solid #DB0011;line-height:1}.layer-video .inner .video-box{width:60vw;height:40vw}.layer-video .inner .video-box video{display:block;width:60vw;height:40vw;background:#000}.layer-video .inner .desc{padding-top:15px;line-height:1.6;color:#333;font-size:1.2em;cursor:pointer}.layer-video .close{position:absolute;right:30px;top:30px;width:40px;height:40px;background:url("./images/close.png") no-repeat center center;background-size:100%;-webkit-transition:all 0.3s;transition:all 0.3s;cursor:pointer}.layer-video .close:hover{-webkit-transform:rotate(360deg);transform:rotate(360deg)}@media screen and (max-width: 750px){.page{padding:15px;font-size:3vw}.page .intro{margin-bottom:10vw;padding:3vw 0;font-size:3vw}.page .intro ul li:before{top:0;margin-top:1em}.page .story{margin:0 0 5vw;font-size:1.8em}.page .story-list .item{margin-bottom:2em;width:100%}.page .story-list .item .thumb .name{padding:0 5% 20px;font-size:1.1em}.page .story-list .item .desc{padding-top:0.6em}.page .footer{margin:0}.page .footer .welcome{font-size:1.5em}.page .footer .link{font-size:1.2em;height:3em}.layer-video .inner .title{margin-bottom:3vh}.layer-video .inner .video-box{width:100vw;height:80vw}.layer-video .inner .video-box video{width:100vw;height:80vw}.layer-video .inner .desc{padding:15px;font-size:1em}.layer-video .close{right:50%;margin-right:-20px;top:auto;bottom:30px}}