/* ===== css_style.css ===== */ /*导航部分 start*/ header.header{position: relative;z-index:22;} .header-box{position: relative;width:100%;} .wrap-unionpay-nav{background:url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/header-bg.png") repeat-x;width:100%;height:85px;position: absolute;left:0;top:0;z-index:3;} .wrap-unionpay-nav .unionpay-nav{max-width:1280px;margin:0 auto;} .unionpay-nav .logo-box{width:167px;float: left;height:85px;} .unionpay-nav .logo-box a{display: block;margin-top:22px;} .unionpay-nav .logo-box a img{width:100%;height:auto;} .unionpay-nav .nav-box{width:869px;float: left;} .unionpay-nav .nav-box ul li{float: left;display: inline-block;*display: inline;height:85px;} .unionpay-nav .nav-box ul li a{display: block;height:85px;line-height:85px;padding:0 8px;color:#FFFFFF;font-size:12px;background:transparent;transition:all 0.3s;} .unionpay-nav .nav-box ul li a:hover, .unionpay-nav .nav-box ul li.on a, .unionpay-nav .nav-box ul li.active a{background:#3266b6;} .unionpay-nav .nav-box ul li.n0 a{padding-left:38px;background:url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/global-min-icon.png") no-repeat 8px center;} .unionpay-nav .nav-box ul li.n0 a:hover, .unionpay-nav .nav-box ul li.n0.on a{padding-left:38px;background:#3266b6 url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/global-min-icon.png") no-repeat 8px center;} .unionpay-nav .search-box{width:40px;height:85px;float:right;position: relative;} .unionpay-nav .search-box a{display: block;width:40px;height:85px;position: relative;} .unionpay-nav .search-box a img{display: block;width:26px;height:25px;position: absolute;left:50%;top:50%;margin:-12.5px 0 0 -13px;} .select-box{width:161px;height:85px;float:left;position: relative;} .select-box dl{width:100%;position: absolute;left:0;top:50%;height:24px;margin-top:-12px;} .select-box dl dt{padding-left:40px;} .select-box dl dt a{color:#FFFFFF;font-size:12px;} .select-box dl dt .icon{background:url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/select-icon.png") center no-repeat;width:10px;height:8px;display:inline-block;*display: inline;transition: all 0.3s;transform: rotate(0deg);} .select-box dl dt.open .icon{transform: rotate(180deg)} .select-box dl dd{background:#979997;border-bottom-left-radius:5px;border-bottom-right-radius:5px;display: none;position: absolute;left:0;top:24px;z-index: 99999;} .select-box dl dd a{display:block;color:#FFFFFF;padding:2px 8px 2px 8px;transition:all 0.6s;background:#979997;border-radius:5px;width: 167px;font-size:12px;} .select-box dl dd a:hover{background:#141516;} /*导航部分 end*/ /*搜索下拉 start*/ .input-warps{width:200px;float: left;} .input-warps .sb > .selected{font-size:14px;} .input-warps .sb .sb_icon{width:18px;height:12px;background:url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/select-input-icon.png") no-repeat center;transition: all 0.6s;transform:rotate(0);} .input-warps .sb.sb_active .sb_icon{transform:rotate(90deg);} /*搜索下拉 end*/ /*轮播 start*/ .wrap-banner{position: relative;z-index:1;} .banner { max-width: 1920px; margin: 0 auto; position: relative; z-index: 2; background: #000;overflow: hidden;} .banner-ul { position: relative; height: 767px; overflow: hidden; z-index: 100; } .header-banner .banner-ul{height:768px;} .banner-ul li { width: 100%; position: absolute; height: 100%; left: 0; top: 0; z-index: 2; opacity: 0; filter: alpha(opacity=0); } .banner-ul li.i0 {z-index: 10; opacity: 1; filter: alpha(opacity=100); } .banner-ul li .bg {position: absolute; width: 100%;height:auto; left: 0; top: 0; z-index: 1; } .banner-button { text-align: center; position: absolute; z-index: 200; cursor: default;left:38%;top:210px;} .header-banner .banner-button{top:210px;} .banner-button span {display: inline-block;margin: 0 2px; outline: 0 none; position: relative;text-align:left;cursor: pointer; width:42px;height:42px;background:#aeb9c0;transition:all 1.5s;position: relative;float: left;} .banner-button span .img-box{left:42px;top:42px;position: absolute;width:0;height:126px;overflow: hidden;transition: all 1s;} .banner-button span.on .img-box{width:705px;} .country .banner-button span.on .img-box{width:614px;} .banner-button span:nth-child(1).on{margin-right:703px;} .banner-button span:nth-child(2).on{margin-right:703px;} .banner-button span:nth-child(3).on{margin-right:703px;} .banner-button span:nth-child(4).on{margin-right:703px;} .banner-button span:nth-child(5).on{margin-right:703px;} .country .banner-button span:nth-child(1).on{margin-right:614px;} .country .banner-button span:nth-child(2).on{margin-right:614px;} .country .banner-button span:nth-child(3).on{margin-right:614px;} .country .banner-button span:nth-child(4).on{margin-right:614px;} .country .banner-button span:nth-child(5).on{margin-right:614px;} .country .banner-button span .img-box{left:52px;top:52px;position: absolute;width:0;height:153px;overflow: hidden;transition: all 1s;} .banner-button span i{font-size:12px;color:#ffffff;display: inline-block;*display: inline;padding:5px;transition:all 0.3s;} .banner-button span.on, .banner-button span:hover {background:#fcfdfd;} .banner-button span.on i, .banner-button span:hover i{color:#aeb8c0;} /*轮播 end*/ /*银联卡在全球 start*/ .service-box.n0{background:url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/global-icon.png") repeat;width:100%;height:657px;position: absolute;left:0;top:85px;z-index:22;display: none;} .service-box.n0 .global-inner{width:1000px;margin:0 auto;padding:60px 140px 0;position: relative;height:597px;} .global-inner .card-global{margin-left:10px;} .global-inner .card-global .img-card{float: left;width:87px;height:72px;} .global-inner .card-global .img-card-tips{width:510px;float: left;margin-left:10px;color:#FFFFFF;} .card-global .img-card-tips .size-16{font-size:16px;margin-top:4px;} .card-global .img-card-tips .size-18{font-size:18px;} .service-box.n0 .global-inner .map-box{width:682px;height:439px;position: relative;margin-top:40px;} .global-inner .map-box .maps{width:682px;height:439px;position: relative;z-index:1;} .map-box .name-font{position:absolute;z-index:2;left:0;top:0;} .map-box .name-font span{display: inline-block;*display: inline;position: absolute;left:0;top:0;font-size:12px;color:#FFFFFF;z-index:2;width:55px;text-align: center;} .map-box .name-font span.meizhou{left:77px;top:117px;} .map-box .name-font span.ouzhou{left:418px;top:97px;} .map-box .name-font span.yazhou{left:492px;top:168px;} .map-box .name-font span.feizhou{left:333px;top:238px;} .map-box .name-font span.dayangzhou{left:560px;top:325px;width:60px;} .global-inner .global-menu{width:144px;position: absolute;left:790px;top:60px;} .global-inner .global-menu ul li{margin-bottom:5px;} .global-inner .global-menu ul li.on a{background:#3e65a1;color:#FFFFFF;} .global-inner .global-menu ul li a{background:url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/global-li-bg.png") repeat;width:100%;display: block;height:30px;line-height:30px;text-align: center;color:#bdbdbd;font-size:16px;} .global-inner .global-list{width:200px;background:url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/global-li-bg.png") repeat;position: absolute;right:78px;top:60px;padding:30px 25px;} .global-inner .global-list dl dd{height:17px;line-height:17px;padding-left:10px;background:url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/dot-ccc.png") no-repeat left center;line-height:17px;font-size:13px;margin:2px 0;transition: all 0.3s;} .global-inner .global-list dl dd a{display: block;color:#FFFFFF;transition: all 0.3s;height:17px;padding-left:3px;} .global-inner .global-list dl dd:hover{background:url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/dot-blue.png") no-repeat left center;} .global-inner .global-list dl dd:hover a{background:#4f7bb3;} .global-inner .global-list .scroll-box{height:401px;overflow: hidden;} .global-list ul li{display: none;} .global-inner .global-close{width:27px;height:15px;position: absolute;left:50%;bottom:27px;margin-left:-13.5px;} .global-inner .global-close a{display: block;} .global-inner .global-close a img{width:27px;height:15px;} /*银联卡在全球 end*/ /*服务与产品 start*/ .service-box{background:url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/global-icon.png") repeat;width:100%;position: absolute;left:0;top:85px;z-index:2;display: none;} .service-box .service-inner{width:1000px;margin:0 auto;padding:60px 140px;position: relative;} .service-box .service-inner .service-nav{width:890px;margin:0 auto;} .service-inner .service-nav .nav-left{width:409px;float: left;margin-left:50px;} .service-inner .service-nav .nav-left:first-child{margin-left:0;} .service-nav .nav-tit{border-bottom:1px solid #979896;padding:10px 0;} .service-nav .nav-tit h6{display: inline-block;*display: inline;color:#75bad5;font-size:20px;padding-right:25px;background:url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/nav-slider-hot.png") no-repeat right center;font-weight:500;height:30px;line-height:30px;} .service-nav .nav-tit h6 a{color:#75bad5;} .service-nav .nav-list-li{margin-top:5px;} .service-nav .nav-list-li ul li{padding:5px 0;} .service-nav .nav-list-li.left ul li{width:100%;float: left;} .service-nav .nav-list-li-left{width:50%;float: left;} .service-nav .nav-list-li-right{width:50%;float: left;} .nav-list-li ul li dt a{color:#FFFFFF;transition: all 0.3s;} .nav-list-li ul li dt span{color:#FFFFFF;} .nav-list-li ul li dd a{display: inline-block;*display: inline;color:#a5a5a5;font-size:12px;transition:all 0.3s;} .nav-list-li ul li dd a:hover{color:#FFFFFF;} .nav-list-li ul li dt a:hover{color:#CCCCCC;} /*服务与产品 end*/ /*帮助中心 start*/ .n3 .service-inner .service-nav .nav-left{width:100%;float: left;} .n3 .service-nav .nav-list-li{width:409px;} /*帮助中心 end*/ /*媒体中心 start*/ .n4 .service-inner .service-nav .nav-left{width:276px;float: left;margin-left:30px;} .n4 .service-inner .service-nav .nav-left:first-child{margin-left:0;} /*媒体中心 end*/ /*关于银联国际 start*/ .n5 .service-inner .service-nav .nav-left{width:185px;float: left;margin-left:30px;} .n5 .service-inner .service-nav .nav-left:first-child{margin-left:0;} /*关于银联国际 end*/ /*搜索弹出框 start*/ .search-slide{background:url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/global-icon.png") repeat;width:100%;position: absolute;left:0;top:85px;z-index:2;display: none;} .search-slide .search-slide-inner{width:1000px;margin:0 auto;padding:60px 140px;position: relative;} .search-slide-inner .search-input{width:880px;margin:0 auto;} .search-slide-inner .search-input .text{width:510px;height:50px;padding:0 20px;line-height:50px;border:1px solid #adb8bf;display: block;float: left;margin-left:10px;} .search-slide-inner .search-input .submit{width:110px;height:50px;text-align: center;line-height:50px;border:1px solid #ADB8BF;color:#000000;margin-top:1px;display: block;float: right;} /*搜索弹出框 end*/ /*右侧导航 start*/ .right-fixed{width:52px;position: fixed;z-index:889;right:-52px;top:50%;height:479px;margin-top:-292px;} .right-fixed .right-fixed-content{padding:5px 10px;background:url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/right-repeat-icon.png") repeat-y;} /*.right-fixed .right-fixed-content .right-fixed-navtop{} .right-fixed .right-fixed-content .right-fixed-navbottom{}*/ .right-fixed-content .right-close{width:36px;height:101px;background:url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/right-close-icon.png") no-repeat center;left:-27px;top:50%;margin-top:-50px;position: absolute;} .right-fixed-content .right-close a{width:21px;height:64px;position: absolute;left:5px;top:18px;} .right-fixed-content .right-close a i{display: block;background:url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/right-close-a.png") 0 0 no-repeat;width:12px;height:18px;position: absolute;left:69%;top:53%;margin:-9px 0 0 -6px;transition: all 0.3s;} .right-fixed-content .right-close a.on i{background:url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/right-close-a.png") -12px 0 no-repeat;} .right-fixed-content .right-fixed-navtop ul li{margin-bottom:20px;;position: relative;} .right-fixed-content .right-fixed-navtop ul li a{display: block;} .right-fixed-content .right-fixed-navbottom ul li{margin-bottom:20px;position: relative;} .right-fixed-content .right-fixed-navbottom ul li:first-child{margin-top:25px;} .right-fixed-content .right-fixed-navbottom ul li a{display: block;} .right-fixed-content .pop-tips{width:190px;height:39px;position: absolute;left:-130px;top:0;background:#b2b2b2;text-align: center;line-height:39px;color:#FFFFFF;border-radius:5px;z-index:2;display:none;opacity:0;} .right-fixed-content .pop-tips i{display: block;width:7px;height:9px;background:url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/triangle-icon.png") no-repeat center;position: absolute;right:-7px;top:50%;margin-top:-4.5px;} .right-fixed-content .pop-share{width:200px;height:35px;position: absolute;left:-230px;top:0;background:#b2b2b2;text-align: center;line-height:39px;color:#FFFFFF;border-radius:5px;z-index:2;padding-top:4px;display:none;opacity:0;} .right-fixed-content .pop-share .jtico{width:29px;height:27px;padding-left:0 !important;margin:0 10px;} .right-fixed-content .pop-share .jtico_tsina{background:url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/sina-01.png") no-repeat center;} .right-fixed-content .pop-share .jtico_weixin{background:url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/wechat-01.png") no-repeat center;} .right-fixed-content .pop-share .jtico_fb{background:url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/facebook-01.png") no-repeat center;} .right-fixed-content .pop-share .jtico_twitter{background:url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/twitter-01.png") no-repeat center;} .right-fixed-content .pop-share i{display: block;width:7px;height:9px;background:url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/triangle-icon.png") no-repeat center;position: absolute;right:-7px;top:50%;margin-top:-4.5px;} .right-fixed .right-fixed-top{width:69px;height:17px;background:url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/right-top-icon.png") no-repeat center;} .right-fixed .right-fixed-bottom{width:69px;height:19px;background:url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/right-bottom-icon.png") no-repeat center;} .right-fixed .right-fixed-share{position: relative;margin-top:20px;} /*右侧导航 end*/ /*首页主体部分 start*/ .main.index{background:#f4f2f1;} .main .main-box{width:1280px;margin:0 auto;} .main-box .index-menu{padding:90px 0;} .main-box .index-menu ul li{width:400px;float:left;margin-left:40px;} .main-box .index-menu ul li:first-child{margin-left:0;} .main-box .index-menu ul li a{display: block;} .main-box .index-menu .li-tit{background:#ffffff;height:120px;position: relative;width:100%;} .main-box .index-menu .li-tit:hover{background:#313030;} .main-box .index-menu .li-tit:hover .li-tit-text{color:#FFFFFF;} .li-tit:hover .li-tit-text .en i{display:none;} .li-tit:hover .li-tit-text .en span{background:none;} .index-menu .li-tit .img-box{width:340px;position: absolute;height:80px;position: absolute;left:50%;margin-left:-170px;top:-40px;} .index-menu .li-tit .img-box img{width:100%;height:auto;} .index-menu .li-tit .li-tit-text{position: absolute;left:0;bottom:0;height:62px;width:340px;text-align: center;padding:18px 30px 0;color:#737373;} .li-tit .li-tit-text .cn{font-weight:normal;font-size:16px;} .li-tit .li-tit-text .en{font-weight:normal;position: relative;} .li-tit .li-tit-text .en i{display: block;width:100%;height:1px;background:#dedede;position: absolute;left:0;top:50%;z-index:1;} .li-tit .li-tit-text .en span{background:#FFFFFF;display: inline-block;*display: inline;position:relative;z-index:2;padding:0 2px;} .main-box .index-menu .li-hot{padding:25px 0; display: none;} .index-menu .li-hot .li-hot-tit{margin-bottom:5px;} .index-menu .li-hot .li-hot-tit a{font-size:15px;color:#6e6d6d;font-weight: bold;transition: all 0.3s;display: block;overflow: hidden;ellipsis;white-space:nowrap;text-overflow: ellipsis;} .index-menu .li-hot .li-hot-tit a:hover{color:#868585;} .index-menu .li-hot .li-hot-tips{color:#868585;font-size:13px; height: 40px; overflow: hidden;line-height:20px;} .index-menu .li-hot .li-hot-tips a{color:#868585} .index-menu .return{ } .index-menu .return {display: inline;*display: inline-block;zoom: 1; float: right; margin-top: 36px; border: 1px solid #004c86; text-align: center; padding: 7px 20px;} .index-menu .return img{margin-top: 4px;} .index-menu .return i{ font-size: 14px; color: #777777;} /*首页主体部分 end*/ /*底部 start*/ footer.footer{background:url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/footer-bg.jpg") repeat-x;width:100%;height:124px;} .footer-box{width:1280px;margin:0 auto;} .footer-box .footer-fixed{padding:30px 0 10px;position: relative;} .footer-box .footer-fixed .abroad-box{float: left;width:98px;} .footer-fixed .abroad-box img{width:100%;height:auto;} .footer-fixed .footer-nav{float: left;width:488px;margin-left:30px;margin-top:30px;} .footer-fixed .footer-nav ul li{float: left;display: inline-block;*display: inline;padding:0 10px 0 12px;background:url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/footer-nav-li-bg.png") no-repeat left center;} .footer-fixed .footer-nav ul li a{color:#c9caca;transition:all 0.3s; font-size: 12px;} .footer-fixed .footer-nav ul li a:hover{color:#FFFFFF;} .footer-fixed .footer-nav ul li:first-child{background:none;} .footer-fixed .reprint-box{width:370px;float: left;margin-left:35px;color:#dfdfdf;margin-top:30px; font-size: 12px;} .footer-fixed .reprint-box a{color:#DFDFDF;transition: all 0.3s;} .footer-fixed .reprint-box a:hover{color:#FFFFFF;} .footer-fixed .reprint-box span{font-size:12px;} .footer-fixed .share-box{width:200px;float: right;margin-top:20px;} .footer-fixed .share-box .jtico{width:29px;height:27px;padding-left:0 !important;margin:0 10px;} .footer-fixed .share-box .jtico_tsina{background:url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/sina.png") no-repeat center;} .footer-fixed .share-box .jtico_weixin{background:url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/wechat.png") no-repeat center;} .footer-fixed .share-box .jtico_fb{background:url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/facebook.png") no-repeat center;} .footer-fixed .share-box .jtico_twitter{background:url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/twitter.png") no-repeat center;} .web-tips{text-align: center;font-size:12px;} /*底部 end*/ /*分页 start*/ .page{padding:25px;} .page .page-inner{text-align: center;} .ie7 .page .page-inner{padding:5px 0;} .page .page-inner a{display: inline-block;*display: inline;color:#424242;vertical-align: top;} .page .page-inner a:hover{color:#000000;} .page .page-inner a.first{width:100px;height:29px;text-align: center;line-height:29px;border:1px solid #dddddd;} .page .page-inner a.last{width:100px;height:29px;text-align: center;line-height:29px;border:1px solid #dddddd;} .ie7 .page .page-inner a.first, .ie7 .page .page-inner a.last{padding:4px 10px;} .ie7 .page .page-inner .page-tips{margin-top:-5px;} .page .page-inner .page-tips{display: inline-block;*display: inline;width:170px;height:30px;margin:1px 24px 0;} .page .page-inner .page-tips a{float: left;} .page .page-inner .page-tips span{width:100px;height:28px;border-top:1px solid #DDDDDD;border-bottom:1px solid #DDDDDD;display: inline-block;*display: inline;float: left;line-height:28px;font-size:12px;text-align: center;} /*分页 end*/ /*banner图轮播设置*/ @media only screen and (max-width: 1700px) { .banner-ul{height:671px;} .banner-button{left:30%;} } @media only screen and (max-width: 1679px) { .banner-ul{height:639px;} } @media only screen and (max-width: 1500px) { .banner-ul{height:575px;} .banner-button{left:20%;} } @media only screen and (max-width: 1400px) { .banner-ul{height:546px;} .right-fixed{width:52px;position: fixed;z-index:99998;top:150px;height:479px;margin-top:auto;} } @media only screen and (max-width: 1300px) { .banner-ul{height:511px;} .banner-button{left:15%;} .main .main-box{width:1240px;} .main-box .index-menu ul li{margin-left:20px;} .footer-box{width:1240px;} .wrap-unionpay-nav .unionpay-nav{max-width:1240px;} .global-box .global-inner{padding:60px 120px 0;width:1000px;} .global-inner .global-list{right:92px;} .service-box .service-inner{padding:60px 120px;} } /*站点切换*/ .lang{background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/lang.png") no-repeat left 49%;} .lang-warp{width: 100%;height: 100%;position: absolute;left: 0;top: 0px;padding-bottom:85px;z-index: 21;background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/png-bg.png");display: none;transition: all 0.5s;} .lang-warp.on{display: block;} .lang-box{width: 900px;height: 526px;background: #000;left: 50%;margin-left: -450px;top: 0;margin-top: -263px;position: fixed;display: none;z-index: 666;} .lang-box .lang-close{width: 65px;height: 65px;position: absolute;top: 0;right: 0;display: block;background: #161616 url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/lang-clo.png") no-repeat center center;} .lang-box .lang-tit{padding: 30px 0;text-align: center;font-size: 30px;color: #fff;} .lang-box .lang-nav{padding: 0 30px;} .lang-box .lang-nav li{float: left;margin: 10px 60px;font-size: 18px;width: 300px;text-align: center;} .lang-box .lang-nav li a{color: #999999;padding: 10px 20px;transition: all 0.2s;} .lang-box .lang-nav li a:hover{border: 1px solid #fff;color: #fff;} /*站点切换*/ /* ===== styles_reset.css ===== */ 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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { font-weight: inherit; font-style: inherit; font-size: 100%; vertical-align: baseline; margin: 0; padding: 0; border: 0; outline: 0; } @font-face { font-family: 'SourceHanSansCN-Bold'; src: url("https://www.unionpayintl.com/imp_file/hk/hk/static/font/SourceHanSansCN-Bold.otf"); } ul, ol { list-style-type: none; } a { text-decoration: none; color: #000000; } a:hover { text-decoration: none; } a:focus { outline: none; } li:focus { outline: none; } fieldset, img { border: 0; } img { display: block; } q, blockquote { quotes: "" ""; } q:before, q:after, blockquote:before, blockquote:after { content: ""; } del { text-decoration: line-through; } ins { text-decoration: underline; } sup { vertical-align: super; } sub { vertical-align: sub; } cite, em, dfn { font-style: normal; } table { border-collapse: collapse; border-spacing: 0; empty-cells: show; } caption, th, td { font-weight: normal; text-align: left; } input, textarea, select, button { font-size: 100%; font-family: inherit; margin: 0; padding: 0; } label, button { cursor: pointer; } textarea { white-space: pre; resize: none; border: 1px solid #ececec; } button, input, select, textarea { font-size: 100%; } article, aside, canvas, details, figcaption, figure, footer, header, menu, nav, section, summary { margin: 0; padding: 0; display: block; border: 0; font-size: 100%; } .clearfix { /* For IE 6/7 only Include this rule to trigger hasLayout and contain floats. */ *zoom: 1; } .clearfix:before, .clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ } .clearfix:after { clear: both; } /* ===== styles_common.css ===== */ @charset "UTF-8"; /* reset */ html { height: 100%; } body { min-height: 100%; min-width: 1200px; } body { _height: 100%; } body, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, iframe, pre, code, fieldset, legend, form, input, select, textarea, button, p, blockquote, th, td, figure { margin: 0; padding: 0; } body, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, iframe, pre, code, fieldset, legend, form, p, blockquote, figure, header, footer, nav, article, section, aside, address, figcaption { *zoom: 1; } li { list-style-type: none; } h1, h2, h3, h4, h5, h6 { font-size: 100%; } iframe, frame, fieldset, img { border: 0 none; } img { vertical-align: top; } input[type=button], input[type=submit], input[type=reset] { cursor: pointer; } button { cursor: pointer; } input, textarea, button { -webkit-border-radius: 0; -webkit-appearance: none; } input[type=radio] { -webkit-border-radius: 100%; -webkit-appearance: radio; } input[type=checkbox] { -webkit-appearance: checkbox; } input[type=search] { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; -ms-box-sizing: content-box; -o-box-sizing: content-box; box-sizing: content-box; } textarea { overflow: auto; resize: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; } caption, th { text-align: left; } th { font-weight: normal; } em, cite, address, i { font-style: normal; } sup { vertical-align: text-top; } sub { vertical-align: text-bottom; } /*body, input, select, button, textarea { font-size: 14px; font-family:"Microsoft Yahei","微软雅黑",arial,"\5b8b\4f53";color:#898989;}*/ body, input, select, button, textarea { font-size: 14px; font-family: arial,"Noto Sans","Neue Helvetica","Sans-serif","Microsoft Yahei","微软雅黑","Hiragino Sans","Gulim","\5b8b\4f53"; color: #898989; } body { line-height: 1.5; } a { text-decoration: none; } a { blr: expression(this.onFocus=this.blur()); color: #333; } a * { *cursor: pointer; } :focus { outline: none; } /*所有后台编辑器区域都要引用 edit_con_original 类名*/ .edit_con_original { line-height: 1.8; padding: 0 0; color: #333; } .edit_con_original ul { margin: inherit; padding: inherit; } .edit_con_original ul li { list-style-type: disc; margin: auto; } .edit_con_original ol { margin: inherit; padding: inherit; } .edit_con_original ol li { list-style-type: decimal; margin: auto; } .edit_con_original h1 { font-size: 2em; font-weight: bold; } .edit_con_original h2 { font-size: 1.5em; font-weight: bold; } .edit_con_original h3 { font-size: 1.17em; font-weight: bold; } .edit_con_original h4 { font-size: 1em; font-weight: bold; } .edit_con_original h5 { font-size: 0.83em; font-weight: bold; } .edit_con_original h6 { font-size: 0.67em; font-weight: bold; } .edit_con_original em { font-style: italic; } .edit_con_original cite { font-style: italic; } .edit_con_original address { font-style: italic; } .edit_con_original i { font-style: italic; } .edit_con_original table { border-collapse: separate; border-spacing: 2px; } .edit_con_original img { max-width: 100%; height: auto; } /*所有后台编辑器区域都要引用 edit_con_original 类名*/ /* clear 页头，页脚，内容区都不用再加清除样式 */ .fixed:before, .clearfix:before, .cf:before, body:before, .header:before, .main:before, .footer:before { display: table; } .fixed:after, .clearfix:after, .cf:after, after, .header:after, .main:after, .footer:after { content: ''; display: table; clear: both; } .fixed, .clearfix, .cf, .header, .main, .footer { *zoom: 1; } .clear, .cl { display: block !important; float: none !important; clear: both; width: auto !important; max-width: none !important; min-width: 0 !important; max-height: none !important; min-height: 0 !important; overflow: hidden; margin: 0 !important; padding: 0 !important; border: 0 none !important; font-size: 0 !important; line-height: 0 !important; } /*公用样式end*/ .z-reprint-box { float: left; color: #dfdfdf; margin-top: 11px; font-size: 12px; width: 250px; text-align: left; } @media only screen and (max-width: 1280px) { .z-reprint-box { width: 200px; } } /* ===== styles_plugins_swiper-3.4.0.min.css ===== */ /** * Swiper 3.4.0 * Most modern mobile touch slider and framework with hardware accelerated transitions * * http://www.idangero.us/swiper/ * * Copyright 2016, Vladimir Kharlampidi * The iDangero.us * http://www.idangero.us/ * * Licensed under MIT * * Released on: October 16, 2016 */ .swiper-container{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;z-index:1}.swiper-container-no-flexbox .swiper-slide{float:left}.swiper-container-vertical>.swiper-wrapper{-webkit-box-orient:vertical;-moz-box-orient:vertical;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-transition-property:-webkit-transform;-moz-transition-property:-moz-transform;-o-transition-property:-o-transform;-ms-transition-property:-ms-transform;transition-property:transform;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-o-transform:translate(0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.swiper-container-multirow>.swiper-wrapper{-webkit-box-lines:multiple;-moz-box-lines:multiple;-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap}.swiper-container-free-mode>.swiper-wrapper{-webkit-transition-timing-function:ease-out;-moz-transition-timing-function:ease-out;-ms-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out;margin:0 auto}.swiper-slide{-webkit-flex-shrink:0;-ms-flex:0 0 auto;flex-shrink:0;width:100%;height:100%;position:relative}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{-webkit-box-align:start;-ms-flex-align:start;-webkit-align-items:flex-start;align-items:flex-start;-webkit-transition-property:-webkit-transform,height;-moz-transition-property:-moz-transform;-o-transition-property:-o-transform;-ms-transition-property:-ms-transform;transition-property:transform,height}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-wp8-horizontal{-ms-touch-action:pan-y;touch-action:pan-y}.swiper-wp8-vertical{-ms-touch-action:pan-x;touch-action:pan-x}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:27px;height:44px;margin-top:-22px;z-index:10;cursor:pointer;-moz-background-size:27px 44px;-webkit-background-size:27px 44px;background-size:27px 44px;background-position:center;background-repeat:no-repeat}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");left:10px;right:auto}.swiper-button-prev.swiper-button-black,.swiper-container-rtl .swiper-button-next.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-prev.swiper-button-white,.swiper-container-rtl .swiper-button-next.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");right:10px;left:auto}.swiper-button-next.swiper-button-black,.swiper-container-rtl .swiper-button-prev.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next.swiper-button-white,.swiper-container-rtl .swiper-button-prev.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-pagination{position:absolute;text-align:center;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;transition:.3s;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:100%;background:#000;opacity:.2}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-moz-appearance:none;-ms-appearance:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-white .swiper-pagination-bullet{background:#fff}.swiper-pagination-bullet-active{opacity:1;background:#007aff}.swiper-pagination-white .swiper-pagination-bullet-active{background:#fff}.swiper-pagination-black .swiper-pagination-bullet-active{background:#000}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;-webkit-transform:translate3d(0,-50%,0);-moz-transform:translate3d(0,-50%,0);-o-transform:translate(0,-50%);-ms-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:5px 0;display:block}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 5px}.swiper-pagination-progress{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progress .swiper-pagination-progressbar{background:#007aff;position:absolute;left:0;top:0;width:100%;height:100%;-webkit-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0);-webkit-transform-origin:left top;-moz-transform-origin:left top;-ms-transform-origin:left top;-o-transform-origin:left top;transform-origin:left top}.swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar{-webkit-transform-origin:right top;-moz-transform-origin:right top;-ms-transform-origin:right top;-o-transform-origin:right top;transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progress{width:100%;height:4px;left:0;top:0}.swiper-container-vertical>.swiper-pagination-progress{width:4px;height:100%;left:0;top:0}.swiper-pagination-progress.swiper-pagination-white{background:rgba(255,255,255,.5)}.swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar{background:#fff}.swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar{background:#000}.swiper-container-3d{-webkit-perspective:1200px;-moz-perspective:1200px;-o-perspective:1200px;perspective:1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d}.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-container-3d .swiper-slide-shadow-left{background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-moz-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{background-image:-webkit-gradient(linear,right top,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-moz-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-moz-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-moz-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-coverflow .swiper-wrapper,.swiper-container-flip .swiper-wrapper{-ms-perspective:1200px}.swiper-container-cube,.swiper-container-flip{overflow:visible}.swiper-container-cube .swiper-slide,.swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-container-cube .swiper-slide .swiper-slide,.swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active,.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top,.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-cube .swiper-slide{visibility:hidden;-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;width:100%;height:100%}.swiper-container-cube.swiper-container-rtl .swiper-slide{-webkit-transform-origin:100% 0;-moz-transform-origin:100% 0;-ms-transform-origin:100% 0;transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0;width:100%;height:100%;background:#000;opacity:.6;-webkit-filter:blur(50px);filter:blur(50px);z-index:0}.swiper-container-fade.swiper-container-free-mode .swiper-slide{-webkit-transition-timing-function:ease-out;-moz-transition-timing-function:ease-out;-ms-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;-webkit-transition-property:opacity;-moz-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-zoom-container{width:100%;height:100%;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-moz-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;-webkit-transform-origin:50%;-moz-transform-origin:50%;transform-origin:50%;-webkit-animation:swiper-preloader-spin 1s steps(12,end) infinite;-moz-animation:swiper-preloader-spin 1s steps(12,end) infinite;animation:swiper-preloader-spin 1s steps(12,end) infinite}.swiper-lazy-preloader:after{display:block;content:"";width:100%;height:100%;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-position:50%;-webkit-background-size:100%;background-size:100%;background-repeat:no-repeat}.swiper-lazy-preloader-white:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}@-webkit-keyframes swiper-preloader-spin{100%{-webkit-transform:rotate(360deg)}}@keyframes swiper-preloader-spin{100%{transform:rotate(360deg)}} /* ===== styles_index.css ===== */ @charset "UTF-8"; .home-banner { position: relative; margin-top: 81px;} .home-banner .swiper-slide { overflow: hidden; } .home-banner .swiper-slide img { width: 1920px; position: relative; left: 50%; margin-left: -960px; } .home-banner .swiper-pagination { bottom: 56px; } .home-banner .swiper-pagination span { width: 28px; height: 3px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; opacity: 1; background: rgba(0, 0, 0, 0.3); position: relative; -webkit-transition: all 0.3s; -o-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .home-banner .swiper-pagination span.swiper-pagination-bullet-active { width: 35px; background: black; } .l-fixed { position: absolute; top: 50%; left: 0; margin-top: -156px; z-index: 6; } .l-fixed ul li { position: relative; } .l-fixed ul li:hover > a { color: #333; } .l-fixed ul li:hover > a img { opacity: 1; } .l-fixed ul li:hover dl { left: 100%; } .l-fixed ul li > a { display: block; width: 116px; font-size: 14px; color: #999; font-weight: bold; padding: 12px 0; text-align: center; background: #fff; margin-bottom: 2px; position: relative; z-index: 2; } .l-fixed ul li > a img { width: 30px; opacity: 0.5; margin: 0 auto 6px; } .l-fixed ul li dl { position: absolute; top: 0; left: -645px; width: 270px; height: 100%; padding: 15px; -webkit-transition: all 0.3s; -o-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; background: #f5f5f5 url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/yl-jt.png") no-repeat right 10px center; overflow: hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .l-fixed ul li dl dd { float: left; width: 50%; line-height: 26px; } .l-fixed ul li dl dd:hover a { color: #333; font-weight: bold; } .l-fixed ul li dl dd a { font-size: 14px; color: #666; } .home-unionPay { background: #fff; position: relative; } .home-unionPay .bgColor { width: 50%; height: 100%; background: #f4faff; position: absolute; top: 0; right: 0; } .home-unionPay .unionPay-global { float: left; width: 50%; padding: 50px 35px 50px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; } .home-unionPay .unionPay-global .destination-search { width: 265px; height: 30px; border: 1px solid #f3f3f3; position: absolute; top: 60px; right: 30px; } .home-unionPay .unionPay-global .destination-search input { border: none; outline: none; } .home-unionPay .unionPay-global .destination-search input.d-int { width: 100%; height: 30px; line-height: 30px; text-indent: 1em; padding-right: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .home-unionPay .unionPay-global .destination-search input.d-btn { width: 30px; height: 30px; background: #f3f3f3 url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/search2.png") no-repeat center; position: absolute; top: 0; right: 0; } .home-unionPay .unionPay-global .unionPay-map { height: 368px; margin: 30px 0 30px; position: relative; } .home-unionPay .unionPay-global .unionPay-map .unionPay-map-con img { width: 100%; } .home-unionPay .unionPay-global .unionPay-map .unionPay-map-con .unionPay-map-txt { display: none; position: absolute; z-index: 3; opacity: 0; -webkit-transition: all 0.3s; -o-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .home-unionPay .unionPay-global .unionPay-map .unionPay-map-con .unionPay-map-txt.active { display: block; opacity: 1; } .home-unionPay .unionPay-global .unionPay-map .unionPay-map-con .unionPay-map-txt .u_m_con { width: 220px; text-align: left; padding: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; background: white; border: 1px solid #c1d7f3; } .home-unionPay .unionPay-global .unionPay-map .unionPay-map-con .unionPay-map-txt .u_m_con:before { content: ''; width: 15px; height: 22px; background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/sj.png") no-repeat center; position: absolute; top: 50%; right: -15px; margin-top: -11px; } .home-unionPay .unionPay-global .unionPay-map .unionPay-map-con .unionPay-map-txt .u_m_con span { display: inline-block; font-size: 16px; color: #333; font-weight: bold; line-height: 16px; padding-left: 12px; border-left: 3px solid #333; } .home-unionPay .unionPay-global .unionPay-map .unionPay-map-con .unionPay-map-txt .u_m_con p { font-size: 14px; color: #999; text-align: left; margin-top: 10px; } .home-unionPay .unionPay-global .unionPay-map .unionPay-map-con .unionPay-map-txt .u_m_con p a { display: inline-block; } .home-unionPay .unionPay-global .unionPay-map .unionPay-map-con .unionPay-map-txt#GangAo { top: 82px; right: 122px; } .home-unionPay .unionPay-global .unionPay-map .unionPay-map-con .unionPay-map-txt#XinJiaPo { top: 142px; right: 140px; } .home-unionPay .unionPay-global .unionPay-map .unionPay-map-con .unionPay-map-txt#YingGuo { top: 39px; left: 279px; } .home-unionPay .unionPay-global .unionPay-map .unionPay-map-con .unionPay-map-txt#YingGuo .u_m_con:before { right: inherit; left: -14px; background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/sj2.png") no-repeat center; } .home-unionPay .unionPay-global .unionPay-map .unionPay-map-con .unionPay-map-txt#AoDaLiYa { top: 178px; right: 125px; } .home-unionPay .unionPay-global .unionPay-map .unionPay-map-con .unionPay-map-txt#JiaNaDa { top: 11px; left: 150px; } .home-unionPay .unionPay-global .unionPay-map .unionPay-map-con .unionPay-map-txt#JiaNaDa .u_m_con:before { right: inherit; left: -14px; background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/sj2.png") no-repeat center; } .home-unionPay .unionPay-global .unionPay-map .unionPay-map-con .unionPay-map-txt#BaXi { top: 165px; left: 209px; } .home-unionPay .unionPay-global .unionPay-map .unionPay-map-con .unionPay-map-txt#BaXi .u_m_con:before { right: inherit; left: -14px; background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/sj2.png") no-repeat center; } .home-unionPay .unionPay-global .unionPay-map .unionPay-map-con .unionPay-map-txt#HanGuo { top: 84px; left: 233px; } .home-unionPay .unionPay-global .unionPay-map .unionPay-map-con .unionPay-map-txt#RiBen { top: 56px; left: 250px; } .home-unionPay .unionPay-global .unionPay-map .unionPay-map-con .unionPay-map-txt#CHNTaiWan { top: 98px; left: 230px; } .home-unionPay .unionPay-global .unionPay-map .unionPay-map-con .unionPay-map-txt#ELuoSi { top: 15px; left: 180px; } .home-unionPay .unionPay-global .unionPay-map .unionPay-map-con .unionPay-map-txt#ALianQiu { top: 97px; left: 114px; } .home-unionPay .unionPay-global .unionPay-map .unionPay-map-con .unionPay-map-txt#AiJi { top: 70px; left: 109px; } .home-unionPay .unionPay-global .unionPay-map .unionPay-map-con .unionPay-map-txt#HaSaKeSiTan { top: 40px; left: 127px; } .home-unionPay .unionPay-global .unionPay-map .unionPay-map-con .unionPay-map-txt#MenJiaLa { top: 117px; left: 179px; } .home-unionPay .unionPay-global .unionPay-map .unionPay-map-con > a { display: block; position: absolute; } .home-unionPay .unionPay-global .unionPay-map .unionPay-map-con > a.m-chn { width: 63px; height: 50px; top: 112px; right: 99px; } .home-unionPay .unionPay-global .unionPay-map .unionPay-map-con > a.m-xg { width: 10px; height: 10px; top: 163px; right: 102px; } .home-unionPay .unionPay-global .unionPay-map .unionPay-map-con > a.m-dny { width: 62px; height: 30px; top: 195px; right: 61px; } .home-unionPay .unionPay-global .unionPay-map .unionPay-map-con > a.m-oz { width: 66px; height: 74px; top: 66px; right: 248px; } .home-unionPay .unionPay-global .unionPay-map .unionPay-map-con > a.m-nt { width: 58px; height: 52px; top: 228px; right: 50px; } .home-unionPay .unionPay-global .unionPay-map .unionPay-map-con > a.m-bm { width: 240px; height: 120px; top: 0; left: 0; } .home-unionPay .unionPay-global .unionPay-map .unionPay-map-con > a.m-lm { width: 40px; height: 40px; top: 127px; left: 77px; } .home-unionPay .unionPay-global .unionPay-map .unionPay-map-con > a.m-hg { width: 10px; height: 10px; top: 137px; right: 87px; } .home-unionPay .unionPay-global .unionPay-map .unionPay-map-con > a.m-rb { width: 14px; height: 30px; top: 116px; right: 67px; } .home-unionPay .unionPay-global .unionPay-map .unionPay-map-con > a.m-tw { width: 10px; height: 10px; top: 161px; right: 93px; } .home-unionPay .unionPay-global .unionPay-map .unionPay-map-con > a.m-els { width: 200px; height: 87px; top: 20px; right: 47px; } .home-unionPay .unionPay-global .unionPay-map .unionPay-map-con > a.m-zd { width: 83px; height: 49px; top: 129px; right: 179px; } .home-unionPay .unionPay-global .unionPay-map .unionPay-map-con > a.m-fz { width: 83px; height: 116px; top: 151px; right: 232px; } .home-unionPay .unionPay-global .unionPay-map .unionPay-map-con > a.m-zy { width: 56px; height: 28px; top: 105px; right: 162px; } .home-unionPay .unionPay-global .unionPay-map .unionPay-map-link { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .home-unionPay .unionPay-global .unionPay-data { width: 565px; position: absolute; left: 0; bottom: 45px; } .home-unionPay .unionPay-global .unionPay-data .unionPay-data-item { position: absolute; top: 0; height: 0; overflow: hidden; } .home-unionPay .unionPay-global .unionPay-data .unionPay-data-item.active { position: relative; height: auto; } .home-unionPay .unionPay-global .unionPay-data .unionPay-data-item .txt-left { padding: 14px 0 14px 0; position: relative; } .home-unionPay .unionPay-global .unionPay-data .unionPay-data-item .txt-left p { display: inline-block; font-size: 12px; color: #fff; padding: 2px 6px; background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/bg-sk3.png") no-repeat center; -moz-background-size: 100% 100%; background-size: 100% 100%; } .home-unionPay .unionPay-global .unionPay-data .unionPay-data-item .txt-left .bd { padding: 10px 15px; background: #f5f5f5; } .home-unionPay .unionPay-global .unionPay-data .unionPay-data-item .txt-left .bd .tempWrap { width: auto !important; } .home-unionPay .unionPay-global .unionPay-data .unionPay-data-item .txt-left .bd ul li { display: none; width: auto !important; margin-right: 20px; } .home-unionPay .unionPay-global .unionPay-data .unionPay-data-item .txt-left .bd ul li.active { display: block; } .home-unionPay .unionPay-global .unionPay-data .unionPay-data-item .txt-left .bd ul li a { color: #666; } .home-unionPay .unionPay-global .unionPay-data .unionPay-data-item .txt-left .bd ul li a:hover { color: #333; } .home-unionPay .unionPay-global .unionPay-data .unionPay-data-item .txt-left .bd ul li a span { padding-left: 10px; position: relative; } .home-unionPay .unionPay-global .unionPay-data .unionPay-data-item .txt-left .bd ul li a span:before { content: ''; display: block; width: 5px; height: 5px; background: #999; position: absolute; left: 0; top: 5px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .home-unionPay .unionPay-global .unionPay-data .unionPay-data-item .txt-left .bd ul li a img{ width: 2%;display: inline-block;margin-top: 30px; margin-right: 10px;} .home-unionPay .unionPay-global .unionPay-data .unionPay-data-item .txt-left .bd ul li a em{ width: 90%;display: inline-block;} .home-unionPay .unionPay-offers { float: left; width: 50%; padding: 50px 0 50px 35px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; } .home-unionPay .unionPay-offers .yl-Tit .t-ch span { font-size: 16px; color: #333; font-weight: bold; margin-left: 20px; } .home-unionPay .unionPay-offers .unionPay-more { position: absolute; top: 65px; right: 0; } .home-unionPay .unionPay-offers .unionPay-more a { font-size: 12px; color: #666; font-style: italic; } .home-unionPay .unionPay-offers .unionPay-swiper { height: 260px; margin: 30px 0 30px; } .home-unionPay .unionPay-offers .unionPay-swiper h4 { font-size: 16px; color: #666; font-weight: bold; text-align: center; margin-bottom: 20px; } .home-unionPay .unionPay-offers .unionPay-swiper .swiper-slide img { width: 100%; } .home-unionPay .unionPay-offers .unionPay-swiper .swiper-button-next { margin-top: -12px; right: 0; width: 24px; height: 24px; background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/Btn-r2.png") no-repeat center; } .home-unionPay .unionPay-offers .unionPay-swiper .swiper-button-prev { margin-top: -12px; left: 0; width: 24px; height: 24px; background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/Btn-l2.png") no-repeat center; } .home-unionPay .unionPay-offers .unionPay-link ul li { float: left; width: 32.33%; margin-right: 1.5%; line-height: 70px; text-align: center; position: relative; } .home-unionPay .unionPay-offers .unionPay-link ul li:last-child { margin-right: 0; } .home-unionPay .unionPay-offers .unionPay-link ul li a { display: block; position: relative; } .home-unionPay .unionPay-offers .unionPay-link ul li a span { display: block; font-size: 16px; color: #fff; line-height: 36px; background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/bg-sk4.png") no-repeat center; -moz-background-size: 100%; background-size: 100%; width: 100%; position: absolute; top: 50%; left: 0; margin-top: -18px; } .home-newsCenter { padding: 50px 0; background: #f5f5f5; } .home-newsCenter .newsCenter-con { margin-top: 40px; position: relative; } .home-newsCenter .newsCenter-con .news-Img { float: left; width: 42%; height: 410px; } .home-newsCenter .newsCenter-con .news-Img .swiper-slide { overflow: hidden; } .home-newsCenter .newsCenter-con .news-Img .swiper-slide img { width: 100%; height: 410px; } .home-newsCenter .newsCenter-con .news-Img .swiper-pagination span { opacity: 1; background: #fff; } .home-newsCenter .newsCenter-con .news-Img .swiper-pagination span.swiper-pagination-bullet-active { background: #df0427; } .home-newsCenter .newsCenter-con .news-List { float: left; width: 58%; height: 410px; background: #fff; position: relative; z-index: 2; } .home-newsCenter .newsCenter-con .news-List ul li { width: 100%; padding: 10px 0; line-height: 50px; background: #fff url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/yl-jt3.png") no-repeat center right -30px; position: relative; right: 0; } .home-newsCenter .newsCenter-con .news-List ul li:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); background: #ededed url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/yl-jt3.png") no-repeat center right 15px; z-index: 2; right: 34px; -webkit-transition: all 0.2s; -o-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; } .home-newsCenter .newsCenter-con .news-List ul li:hover a span { color: #333; } .home-newsCenter .newsCenter-con .news-List ul li a { display: block; font-size: 16px; color: #333; margin: 0 35px; padding-right: 110px; position: relative; -webkit-transition: all 0.2s; -o-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .home-newsCenter .newsCenter-con .news-List ul li a span { display: block; color: #999; position: absolute; top: 0; right: 0; } .home-newsCenter .newsCenter-con .news-List .listMore { position: absolute; left: 0; bottom: 0; padding: 0 35px; } .home-newsCenter .newsCenter-con .news-List .listMore a { font-size: 14px; color: #999; line-height: 50px; } .home-with { position: relative; } .home-with .bgColor { width: 50%; height: 100%; position: absolute; top: 0; left: 0; background: #f4faff; } .home-with .h-pay { float: left; width: 50%; padding: 50px 35px 50px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; } .home-with .h-pay .h-pay-con { margin-top: 40px; overflow: hidden; position: relative; } .home-with .h-pay .h-pay-con ul { float: left; width: 18%; height: 100%; position: absolute; top: 0; left: 0; border-right: 1px solid #c6c9cc; } .home-with .h-pay .h-pay-con ul li { height: 33.33%; text-align: center; position: relative; opacity: 0.6; } .home-with .h-pay .h-pay-con ul li.active { opacity: 1; } .home-with .h-pay .h-pay-con ul li.active:before { content: ''; display: block; width: 2px; height: 100%; position: absolute; top: 0; right: -1px; background: #333; } .home-with .h-pay .h-pay-con ul li a { display: block; font-size: 16px; font-weight: bold; padding: 35px 0; } .home-with .h-pay .h-pay-con ul li a img { margin: 0 auto 6px; } .home-with .h-pay .h-pay-con .h-pay-img { float: right; width: 78%; } .home-with .h-pay .h-pay-con .h-pay-img .h-pay-img-item { display: none; position: relative; } .home-with .h-pay .h-pay-con .h-pay-img .h-pay-img-item.active { display: block; } .home-with .h-pay .h-pay-con .h-pay-img .h-pay-img-item .h-pay-link { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 20px; } .home-with .h-pay .h-pay-con .h-pay-img .h-pay-img-item .h-pay-link.h-pay-link2 ol li { float: left; } .home-with .h-pay .h-pay-con .h-pay-img .h-pay-img-item .h-pay-link ol li { width: 80%; margin: 5px 30px 5px 0; } .home-with .h-pay .h-pay-con .h-pay-img .h-pay-img-item .h-pay-link ol li a { display: block; font-size: 14px; color: #fff; padding: 8px 0; background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/Btn-r-on.png") no-repeat right center; -moz-background-size: 7px; background-size: 7px; border-bottom: 1px solid #fff; } .home-with .h-pay .h-pay-con .h-pay-img .h-pay-img-item .h-pay-link ol li a:hover { font-weight: bold; } .home-with .h-pay .h-pay-con .h-pay-img .h-pay-img-item .h-pay-link p { font-size: 14px; color: #fff; margin-top: 20px; } .home-with .h-pay .h-pay-con .h-pay-img .h-pay-img-item .h-pay-link p img { width: 70px; margin-bottom: 5px; } .home-with .h-pay .h-pay-con .h-pay-img img { width: 100%; } .home-with .h-solution { float: left; width: 50%; padding: 50px 0 50px 35px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .home-with .h-solution .h-solution-con { margin-top: 40px; position: relative; } .home-with .h-solution .h-solution-con img { width: 100%; } .home-with .h-solution .h-solution-con ul { width: 100.1%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.2); overflow: hidden; } .home-with .h-solution .h-solution-con ul li { float: left; width: 16.666%; height: 100%; position: relative; } .home-with .h-solution .h-solution-con ul li:nth-child(odd) a span { display: block; position: absolute; top: 40px; left: 0; } .home-with .h-solution .h-solution-con ul li:nth-child(odd) a:before { content: ''; width: 100%; height: 100%; background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/s-op-bg2.png") no-repeat center; -moz-background-size: 100% auto; background-size: 100% auto; -webkit-transition: all 0.3s; -o-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; position: absolute; left: 0; top: -100%; } .home-with .h-solution .h-solution-con ul li:nth-child(odd) a:hover:before { top: -10px; } .home-with .h-solution .h-solution-con ul li:nth-child(even) a span { display: block; position: absolute; bottom: 40px; left: 0; } .home-with .h-solution .h-solution-con ul li:nth-child(even) a:before { content: ''; width: 100%; height: 100%; background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/s-op-bg.png") no-repeat center; -moz-background-size: 100% auto; background-size: 100% auto; -webkit-transition: all 0.3s; -o-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; position: absolute; left: 0; bottom: -100%; } .home-with .h-solution .h-solution-con ul li:nth-child(even) a:hover:before { bottom: -10px; } .home-with .h-solution .h-solution-con ul li a { display: block; height: 100%; padding: 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; border-right: 1px solid rgba(255, 255, 255, 0.4); } .home-with .h-solution .h-solution-con ul li a span { font-size: 16px; color: #fff; margin: 0 12px; position: relative; } .home-with .h-solution .h-solution-con ul li a span:before { content: ''; display: block; width: 25px; height: 2px; background: #fff; position: absolute; left: 0; bottom: -6px; } .home-with .h-solution .h-solution-con ul li a span em { display: block; font-size: 28px; font-weight: bold; } /*Plugin CSS*/ .str_wrap { overflow: hidden; width: 100%; font-size: 12px; line-height: 16px; position: relative; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; white-space: nowrap; } .str_move { white-space: nowrap; position: absolute; top: 0; left: 0; cursor: move; } .str_move_clone { display: inline-block; vertical-align: top; position: absolute; left: 100%; top: 0; } .str_vertical .str_move_clone { left: 0; top: 100%; } .str_down .str_move_clone { left: 0; bottom: 100%; } .str_vertical .str_move, .str_down .str_move { white-space: normal; width: 100%; } .str_static .str_move, .no_drag .str_move, .noStop .str_move { cursor: inherit; } .str_wrap img { max-width: none !important; } .home-news { background: #fff; padding-top: 40px;} .home-news .yl-Tit{text-align: center;} .home-news ul { padding: 30px 0; } .home-news ul li { float: left; width: 50%; padding: 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; } .home-news ul li:hover { border: 1px solid #456fba !important; -webkit-box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.3); -moz-box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.3); box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.3); } .home-news ul li:hover a { position: relative; padding-right: 50px; } .home-news ul li:hover a:before { content: '|'; display: block; padding-right: 40px; background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/en/jt1.png") no-repeat bottom 5px right; position: absolute; right: 0; bottom: 0; } .home-news ul li:hover a span { color: #fff; background: #32538e; } .home-news ul li:hover a .news-div h4 { color: #456fba; } .home-news ul li:hover a .news-div p { color: #456fba; } .home-news ul li:nth-child(1) { border-bottom: 1px solid rgba(0, 0, 0, 0.2); border-right: 1px solid rgba(0, 0, 0, 0.2); border-top: 1px solid transparent; border-left: 1px solid transparent; } .home-news ul li:nth-child(2) { border-bottom: 1px solid rgba(0, 0, 0, 0.2); border-top: 1px solid transparent; border-left: 1px solid transparent; border-right: 1px solid transparent; } .home-news ul li:nth-child(3) { border-right: 1px solid rgba(0, 0, 0, 0.2); border-top: 1px solid transparent; border-left: 1px solid transparent; border-bottom: 1px solid transparent; } .home-news ul li:nth-child(4) { border-right: 1px solid transparent; border-top: 1px solid transparent; border-left: 1px solid transparent; border-bottom: 1px solid transparent; } .home-news ul li a { display: block; padding-left: 60px; position: relative; } .home-news ul li a span { display: inline-block; font-size: 14px; color: #999; background: #ededed; padding: 3px 5px; position: absolute; top: 0; left: 0;transform:skew(-24deg,0deg );} .home-news ul li a span em{display: block; transform: skew(22deg,0deg);} .home-news ul li a .news-div h4 { font-size: 14px; color: #333; font-weight: bold; line-height: 28px; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .home-news ul li a .news-div p { font-size: 14px; color: #666; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .home-news ul li:hover a:before { content: '|'; display: block; padding-right: 40px; background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/jt1.png") no-repeat bottom 5px right; position: absolute; right: 0; bottom: 0; } .home-overview{ background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/overview-bg.png") no-repeat top center; background-size:cover; padding-top: 40px; } .home-overview .container .yl-Tit{text-align: center;} .home-unionPay .unionPay-offers { float: left; width: 50%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .home-overview .unionPay-offers ul { padding-left: 50px; } .home-overview .unionPay-offers ul li { margin: 50px 0; line-height: 50px; padding-left: 70px; background-repeat: no-repeat; background-position: center left; display: inline-block;width: 43%;} .home-overview .unionPay-offers ul li p { font-size: 14px; color: #333; } .home-overview .unionPay-offers ul li p span { display: inline-block; font-size: 36px; color: #333; font-weight: bold; margin: 0 5px; } .home-upis{padding: 40px 0;background: #f5f5f5;} .home-upis .yl-Tit{text-align: center;} .home-upis ul{margin-top: 40px;} .home-upis ul li{display: inline-block;margin-right: 10px;margin-bottom: 10px;} /* ===== styles_util.css ===== */ .container { width: 1200px; margin: 0 auto; } .yl-Tit .t-ch { font-size: 24px; color: #333; } .yl-Tit .t-en { font-size: 12px; color: #999; } .rightFixed { position: fixed; top: 15%; right: 0; z-index: 99; -webkit-transition: all 0.2s; -o-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; background: #fff; -webkit-box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.4); -moz-box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.4); box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.4); } .rightFixed.on { right: -82px; } .rightFixed.on .btn { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .rightFixed .btn { display: block; width: 25px; height: 42px; background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/yl-jt2.png") no-repeat center; position: absolute; left: -25px; top: 50%; margin-top: -21px; } .rightFixed ul li { padding: 0 5px; } .rightFixed ul li a { display: block; font-size: 14px; color: #333; width: 72px; padding: 12px 0; text-align: center; border-bottom: 1px solid rgba(0, 0, 0, 0.2); opacity: 0.6; } .rightFixed ul li a img { width: 26px; margin: 0 auto 5px; } .rightFixed ul li a:hover { opacity: 1; } .YL-header { position: fixed; top: 0; left: 0; width: 100%; background: #fff; -webkit-box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1); box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1); z-index: 100; } .YL-header .header-con { width: 1200px; margin: 0 auto; } .YL-header .header-con .yl-logo { float: left; padding: 20px 0; } .YL-header .header-con .yl-logo a { display: block; } .YL-header .header-con .yl-nav { float: left; } .YL-header .header-con .yl-nav ul li { float: left; margin: 0; } .YL-header .header-con .yl-nav ul li > a { display: block; font-size: 12px; color: #333; line-height: 20px; padding: 30.5px 20px; position: relative; } .YL-header .header-con .yl-nav ul li.on > a { font-weight: bold; } .YL-header .header-con .yl-nav ul li.on > a:before { content: ''; width: 30px; height: 3px; background: #333; position: absolute; bottom: 0; left: 50%; margin-left: -15px; } .YL-header .header-con .yl-nav ul li:hover > a { font-weight: bold; } .YL-header .header-con .yl-nav ul li:hover > a:before { content: ''; width: 30px; height: 3px; background: #333; position: absolute; bottom: 0; left: 50%; margin-left: -15px; } .YL-header .header-con .yl-nav ul li:hover .navChild { opacity: 1; height: auto; z-index: 1; } .YL-header .header-con .yl-nav ul li .navChild { width: 100%; height: 0; position: absolute; top: 100%; left: 0; background: #f2f2f2; -webkit-box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2); -moz-box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2); box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2); overflow: hidden; -webkit-transition: all 0.5s; -o-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; opacity: 0; z-index: -1; } .YL-header .header-con .yl-nav ul li .navChild.dl_1 .navChild-con dl { width: 100%; } .YL-header .header-con .yl-nav ul li .navChild.dl_2 .navChild-con dl { width: 49%; margin-right: 2%; } .YL-header .header-con .yl-nav ul li .navChild.dl_3 .navChild-con dl { width: 31.33%; margin-right: 3%; } .YL-header .header-con .yl-nav ul li .navChild.dl_4 .navChild-con dl { width: 23.5%; margin-right: 2%; } .YL-header .header-con .yl-nav ul li .navChild.dl_5 .navChild-con dl { width: 18.5%; margin-right: 1.875%; } .YL-header .header-con .yl-nav ul li .navChild .navChild-con { width: 1200px; margin: 0 auto; } .YL-header .header-con .yl-nav ul li .navChild .navChild-con dl { float: left; width: 14.666%; margin-right: 2%; padding: 10px 0 30px 0; } .YL-header .header-con .yl-nav ul li .navChild .navChild-con dl:last-child { margin-right: 0; } .YL-header .header-con .yl-nav ul li .navChild .navChild-con dl dt { padding: 18px 0; border-bottom: 1px solid #e5e5e5; background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/nav-jt.png") no-repeat center right; } .YL-header .header-con .yl-nav ul li .navChild .navChild-con dl dt span { display: block; font-size: 18px; color: #333; font-weight: bold; padding-left: 35px; line-height: 26px; background-repeat: no-repeat; background-position: left center; } .YL-header .header-con .yl-nav ul li .navChild .navChild-con dl dt span a { display: block; color: #333; } .YL-header .header-con .yl-nav ul li .navChild .navChild-con dl dd { margin: 10px 0; padding-left: 15px; position: relative; } .YL-header .header-con .yl-nav ul li .navChild .navChild-con dl dd:before { content: ''; width: 6px; height: 6px; background: #999; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; position: absolute; top: 50%; left: 0; margin-top: -2.5px; } .YL-header .header-con .yl-nav ul li .navChild .navChild-con dl dd a { display: inline-block; color: #333; } .YL-header .header-con .yl-nav ul li .navChild.f-world { text-align: center; } .YL-header .header-con .yl-nav ul li .navChild.f-world .navChild-con { padding: 40px 0; } .YL-header .header-con .yl-nav ul li .navChild.f-world p { display: inline-block; font-size: 18px; color: #333; font-weight: bold; line-height: 66px; padding-left: 135px; background-repeat: no-repeat; background-position: center left; -moz-background-size: 104px; background-size: 104px; } .YL-header .header-con .yl-nav ul li .navChild.f-world p span { display: inline-block; color: #999; margin-left: 20px; } .YL-header .header-con .yl-nav ul li .navChild.f-world p a { display: inline-block; width: 85px; height: 39px; font-size: 12px; font-weight: normal; color: #fff; line-height: 39px; text-align: center; margin-left: 20px; background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/bg-color.png") no-repeat center; -moz-background-size: 100%; background-size: 100%; } .YL-header .header-con .yl-nav ul li .navChild.f-world .navMap { margin: 10px auto 0; padding: 45px 115px 0; border-top: 1px solid #e5e5e5; } .YL-header .header-con .yl-nav ul li .navChild.f-world .navMap .navMap-link { float: left; width: 370px; position: relative; } .YL-header .header-con .yl-nav ul li .navChild.f-world .navMap .navMap-link ol { width: 110px; height: 328px; } .YL-header .header-con .yl-nav ul li .navChild.f-world .navMap .navMap-link ol li { width: 100%; margin: 0; background: #e2e2e2; } .YL-header .header-con .yl-nav ul li .navChild.f-world .navMap .navMap-link ol li:last-child { background: #333; } .YL-header .header-con .yl-nav ul li .navChild.f-world .navMap .navMap-link ol li:last-child a { color: #fff; border: none; background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/Btn-r-on.png") no-repeat center right 10px; -moz-background-size: 7px; background-size: 7px; } .YL-header .header-con .yl-nav ul li .navChild.f-world .navMap .navMap-link ol li.active { background: #fff; } .YL-header .header-con .yl-nav ul li .navChild.f-world .navMap .navMap-link ol li a { display: block; font-size: 14px; font-weight: bold; padding: 11px 0; border-bottom: 1px solid #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .YL-header .header-con .yl-nav ul li .navChild.f-world .navMap .navMap-link ol li a:hover:before { display: none; } .YL-header .header-con .yl-nav ul li .navChild.f-world .navMap .navMap-link .navMap-link-con { float: left; width: 260px; height: 100%; position: absolute; top: 0; right: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .YL-header .header-con .yl-nav ul li .navChild.f-world .navMap .navMap-link .navMap-link-con .navMap-link-item { display: block; width: 100%; height: 100%; overflow: hidden; background: #fff; position: absolute; top: 0; left: 0; opacity: 0; padding: 20px 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .YL-header .header-con .yl-nav ul li .navChild.f-world .navMap .navMap-link .navMap-link-con .navMap-link-item.active { opacity: 1; z-index: 6; } .YL-header .header-con .yl-nav ul li .navChild.f-world .navMap .navMap-link .navMap-link-con .navMap-link-item dl { float: none; width: 100% !important; margin-right: 0; padding: 0 20px; text-align: left; } .YL-header .header-con .yl-nav ul li .navChild.f-world .navMap .navMap-link .navMap-link-con .navMap-link-item dl dd { margin: 5px 0; } .YL-header .header-con .yl-nav ul li .navChild.f-world .navMap .navMap-link .navMap-link-con .navMap-link-item dl dd:hover { background: #e2e2e2; } .YL-header .header-con .yl-nav ul li .navChild.f-world .navMap .navMap-img { float: left; width: 600px; } .YL-header .header-con .yl-nav ul li .navChild.f-world .navMap .navMap-img img { width: 100%; } .YL-header .header-con .yl-lang { float: right; } .YL-header .header-con .yl-lang ul li { float: left; padding-left: 11px; } .YL-header .header-con .yl-lang ul li > a { display: inline-block; font-size: 12px; color: #333; } .YL-header .header-con .yl-lang ul li.chn > a { line-height: 20px; margin: 30.5px 0; position: relative; } .YL-header .header-con .yl-lang ul li.chn > a:before { content: '|'; color: #333; position: absolute; left: -18px; top: -1px; } .YL-header .header-con .yl-lang ul li.search > a { display: block; width: 28px; height: 39px; margin: 21px 0; background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/search2.png") no-repeat center; } .YL-header .header-con .yl-lang ul li.search .search-popup { position: absolute; top: 100%; left: 0; width: 100%; height: 0; overflow: hidden; background: #f2f2f2; -webkit-box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2); -moz-box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2); box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2); opacity: 0; z-index: 1; -webkit-transition: all 0.5s; -o-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; } .YL-header .header-con .yl-lang ul li.search .search-popup.on { opacity: 1; height: auto; z-index: 1; } .YL-header .header-con .yl-lang ul li.search .search-popup .search-popup-con { width: 660px; margin: 30px auto 30px; } .YL-header .header-con .yl-lang ul li.search .search-popup .search-popup-con .s-p-select { float: left; width: 200px; margin-right: 20px; position: relative; } .YL-header .header-con .yl-lang ul li.search .search-popup .search-popup-con .s-p-select.on:before { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .YL-header .header-con .yl-lang ul li.search .search-popup .search-popup-con .s-p-select.on dl { display: block; } .YL-header .header-con .yl-lang ul li.search .search-popup .search-popup-con .s-p-select:before { content: ''; display: block; width: 24px; height: 24px; background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/s-p-jt.png") no-repeat center; position: absolute; top: 10px; right: 0; -webkit-transition: all 0.2s; -o-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; } .YL-header .header-con .yl-lang ul li.search .search-popup .search-popup-con .s-p-select input { display: block; width: 100%; border: none; text-align: center; height: 46px; line-height: 46px; background: #f2f2f2; border-bottom: 2px solid #cecece; outline: none; cursor: pointer; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .YL-header .header-con .yl-lang ul li.search .search-popup .search-popup-con .s-p-select dl { display: none; padding-top: 10px; } .YL-header .header-con .yl-lang ul li.search .search-popup .search-popup-con .s-p-select dl dd { text-align: left; padding-left: 15px; position: relative; margin-left: 64px; margin-top: 5px; margin-bottom: 5px; cursor: pointer; } .YL-header .header-con .yl-lang ul li.search .search-popup .search-popup-con .s-p-select dl dd a { font-size: 14px; color: #333; } .YL-header .header-con .yl-lang ul li.search .search-popup .search-popup-con .s-p-select dl dd:before { content: ''; width: 6px; height: 6px; background: #999; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; position: absolute; top: 50%; left: 0; margin-top: -2.5px; } .YL-header .header-con .yl-lang ul li.search .search-popup .search-popup-con .s-p-int { float: left; width: 440px; position: relative; } .YL-header .header-con .yl-lang ul li.search .search-popup .search-popup-con .s-p-int input.t { display: block; width: 100%; border: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: center; height: 46px; line-height: 46px; padding-right: 50px; background: #f2f2f2; border-bottom: 2px solid #cecece; outline: none; } .YL-header .header-con .yl-lang ul li.search .search-popup .search-popup-con .s-p-int .b { display: block; width: 46px; height: 46px; background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/s-p-search.png") no-repeat center; border: none; position: absolute; top: 0; right: 0; } .YL-header .header-con .yl-lang ul li.language > a { display: block; font-size: 12px; color: #333; padding: 31.5px 0 31.5px 20px; background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/loca.png") no-repeat center left; } .YL-header .header-con .yl-lang ul li.language:hover .lang-popup { opacity: 1; height: auto; z-index: 1; } .YL-header .header-con .yl-lang ul li.language .lang-popup { position: absolute; top: 100%; left: 0; width: 100%; height: 0; overflow: hidden; background: #f2f2f2; -webkit-box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2); -moz-box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2); box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2); z-index: 2; opacity: 0; -webkit-transition: all 0.5s; -o-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; } .YL-header .header-con .yl-lang ul li.language .lang-popup .lang-popup-con { width: 1200px; margin: 0 auto; padding: 10px 0 30px 0; text-align: center; } .YL-header .header-con .yl-lang ul li.language .lang-popup .lang-popup-con span { display: block; font-size: 18px; color: #333; font-weight: bold; padding: 10px 0; border-bottom: 1px solid #e5e5e5; } .YL-header .header-con .yl-lang ul li.language .lang-popup .lang-popup-con dl { width: 80%; margin: 20px auto 0; } .YL-header .header-con .yl-lang ul li.language .lang-popup .lang-popup-con dl dd { float: left; width: 25%; height: 24px; line-height: 24px; text-align: left; margin: 6px 0; } .YL-header .header-con .yl-lang ul li.language .lang-popup .lang-popup-con dl dd a { display: inline-block; font-size: 14px; color: #333; padding-left: 15px; position: relative; } .YL-header .header-con .yl-lang ul li.language .lang-popup .lang-popup-con dl dd a:before { content: ''; width: 6px; height: 6px; background: #999; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; position: absolute; top: 50%; left: 0; margin-top: -2.5px; } .YL-header .header-con .yl-lang ul li.open > a { width: 85px; height: 39px; color: #fff; line-height: 39px; text-align: center; margin: 20px 0; background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/bg-color.png") no-repeat center; -moz-background-size: 100%; background-size: 100%; } .fixed .footer {background: #fff;} .footer { background: #2c323b; } .footer .footer-con { width: 1200px; margin: 0 auto; } .footer .footer-con .footer-top { padding: 25px 0 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .footer .footer-con .footer-top .footer-top-l { float: left; } .footer .footer-con .footer-top .footer-top-l p a { font-size: 26px; color: #fff; font-weight: bold; font-style: italic; padding-left: 40px; background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/phoneIcon.png") no-repeat left center; } .footer .footer-con .footer-top .footer-top-l ul { margin-top: 10px; } .footer .footer-con .footer-top .footer-top-l ul li { float: left; margin-right: 40px; } .footer .footer-con .footer-top .footer-top-l ul li a { display: block; font-size: 14px; color: #fff; } .footer .footer-con .footer-top .footer-top-r { float: right; } .footer .footer-con .footer-top .footer-top-r .qr-img { float: left; } .footer .footer-con .footer-top .footer-top-r .qr-img span { display: block; float: left; font-size: 14px; color: #fff; margin: 0 4px; text-align: center; } .footer .footer-con .footer-top .footer-top-r .qr-img span img { width: 70px; margin: 0 0 4px; } .footer .footer-con .footer-top .footer-top-r .f-share { float: left; padding-top: 30px; } .footer .footer-con .footer-top .footer-top-r .f-share a {opacity: 0.5; display: inline-block; float: left; width: 34px; height: 34px; -webkit-border-radius: 17px; -moz-border-radius: 17px; border-radius: 17px; margin: 0 5px; } .footer .footer-con .footer-top .footer-top-r .f-share a:hover{opacity: 1;} .footer .footer-con .footer-top .footer-top-r .f-share a.share-f { background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/en/share-f.png") no-repeat center; } .footer .footer-con .footer-top .footer-top-r .f-share a.share-wechat { background: rgba(255, 255, 255, 0.2) url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/share-wechat.png") no-repeat center; } .footer .footer-con .footer-top .footer-top-r .f-share a.share-wechat:hover { background: white url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/share-wechat-on.png") no-repeat center; } .footer .footer-con .footer-top .footer-top-r .f-share a.share-weibo { background: rgba(255, 255, 255, 0.2) url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/share-weibo.png") no-repeat center; } .footer .footer-con .footer-top .footer-top-r .f-share a.share-weibo:hover { background: white url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/share-weibo-on.png") no-repeat center; } .footer .footer-con .footer-top .footer-top-r .f-share a.share-douyin { background: rgba(255, 255, 255, 0.2) url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/share-douyin.png") no-repeat center; } .footer .footer-con .footer-top .footer-top-r .f-share a.share-douyin:hover { background: white url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/share-douyin-on.png") no-repeat center; } .footer .footer-con .footer-top .footer-top-r .f-share a.share-sf { background: rgba(255, 255, 255, 0.2) url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/share-sf.png") no-repeat center; } .footer .footer-con .footer-top .footer-top-r .f-share a.share-sf:hover { background: white url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/share-sf-on.png") no-repeat center; } .footer .footer-con .footer-bot { padding: 12px 0; overflow: hidden; } .footer .footer-con .footer-bot p { font-size: 12px; color: #999; opacity: 0.8; float: right; } .footer .footer-con .footer-bot p:first-child { float: left; } .mCSB_container { width: auto; margin-right: 4px; overflow: hidden; } .mCSB_container.mCS_no_scrollbar { margin-right: 0; } .mCS_disabled > .mCustomScrollBox > .mCSB_container.mCS_no_scrollbar, .mCS_destroyed > .mCustomScrollBox > .mCSB_container.mCS_no_scrollbar { margin-right: 30px; } .mCustomScrollBox > .mCSB_scrollTools { width: 10px; height: 100%; top: 0; right: 0; background: white; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } .mCSB_scrollTools .mCSB_draggerContainer { position: absolute; top: 0; left: 0; bottom: 0; right: 0; height: auto; } .mCSB_scrollTools a + .mCSB_draggerContainer { margin: 20px 0; } .mCSB_scrollTools .mCSB_draggerRail { width: 2px; height: 100%; margin: 0 auto; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .mCSB_scrollTools .mCSB_dragger { cursor: pointer; width: 100%; height: 30px; } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 6px; height: 100%; margin: 0 auto; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; text-align: center; } .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown { display: block; position: relative; height: 20px; overflow: hidden; margin: 0 auto; cursor: pointer; } .mCSB_scrollTools .mCSB_buttonDown { top: 100%; margin-top: -40px; } /* horizontal scrollbar */ .mCSB_horizontal > .mCSB_container { height: auto; margin-right: 0; overflow: hidden; } .mCSB_horizontal > .mCSB_container.mCS_no_scrollbar { margin-bottom: 0; } .mCS_disabled > .mCSB_horizontal > .mCSB_container.mCS_no_scrollbar, .mCS_destroyed > .mCSB_horizontal > .mCSB_container.mCS_no_scrollbar { margin-right: 0; margin-bottom: 30px; } .mCSB_horizontal.mCustomScrollBox > .mCSB_scrollTools { width: 100%; height: 16px; top: auto; right: auto; bottom: 0; left: 0; overflow: hidden; } .mCSB_horizontal > .mCSB_scrollTools a + .mCSB_draggerContainer { margin: 0 20px; } .mCSB_horizontal > .mCSB_scrollTools .mCSB_draggerRail { width: 100%; height: 2px; margin: 7px 0; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .mCSB_horizontal > .mCSB_scrollTools .mCSB_dragger { width: 30px; height: 100%; } .mCSB_horizontal > .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 100%; height: 4px; margin: 6px auto; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .mCSB_horizontal > .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_horizontal > .mCSB_scrollTools .mCSB_buttonRight { display: block; position: relative; width: 20px; height: 100%; overflow: hidden; margin: 0 auto; cursor: pointer; float: left; } .mCSB_horizontal > .mCSB_scrollTools .mCSB_buttonRight { margin-left: -40px; float: right; } .mCustomScrollBox { -ms-touch-action: none; /*MSPointer events - direct all pointer events to js*/ } /* default scrollbar colors and backgrounds (default theme) */ .mCustomScrollBox > .mCSB_scrollTools { filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; /* old ie */ } .mCSB_scrollTools .mCSB_draggerRail { background: #545656; /* rgba fallback */ filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; /* old ie */ } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background: #666; /* rgba fallback */ filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; /* old ie */ } .mCSB_scrollTools .mCSB_buttonUp { background-position: 0 0; /* sprites locations are 0 0/-16px 0/-32px 0/-48px 0 (light) and -80px 0/-96px 0/-112px 0/-128px 0 (dark) */ } .mCSB_scrollTools .mCSB_buttonDown { background-position: 0 -20px; /* sprites locations are 0 -20px/-16px -20px/-32px -20px/-48px -20px (light) and -80px -20px/-96px -20px/-112px -20px/-128px -20px (dark) */ } .mCSB_scrollTools .mCSB_buttonLeft { background-position: 0 -40px; /* sprites locations are 0 -40px/-20px -40px/-40px -40px/-60px -40px (light) and -80px -40px/-100px -40px/-120px -40px/-140px -40px (dark) */ } .mCSB_scrollTools .mCSB_buttonRight { background-position: 0 -56px; /* sprites locations are 0 -56px/-20px -56px/-40px -56px/-60px -56px (light) and -80px -56px/-100px -56px/-120px -56px/-140px -56px (dark) */ } .mCSB_scrollTools .mCSB_buttonUp:active, .mCSB_scrollTools .mCSB_buttonDown:active, .mCSB_scrollTools .mCSB_buttonLeft:active, .mCSB_scrollTools .mCSB_buttonRight:active { opacity: 0.9; filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; /* old ie */ } /*scrollbar themes*/ /*dark (dark colored scrollbar)*/ .mCS-dark > .mCSB_scrollTools .mCSB_draggerRail { background: #000; /* rgba fallback */ background: rgba(0, 0, 0, 0.15); } .mCS-dark > .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background: #000; /* rgba fallback */ background: rgba(0, 0, 0, 0.75); } .mCS-dark > .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark > .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background: rgba(0, 0, 0, 0.9); } .mCS-dark > .mCSB_scrollTools .mCSB_buttonUp { background-position: -80px 0; } .mCS-dark > .mCSB_scrollTools .mCSB_buttonDown { background-position: -80px -20px; } .mCS-dark > .mCSB_scrollTools .mCSB_buttonLeft { background-position: -80px -40px; } .mCS-dark > .mCSB_scrollTools .mCSB_buttonRight { background-position: -80px -56px; } /*light-2*/ .mCS-light-2 > .mCSB_scrollTools .mCSB_draggerRail { width: 4px; background: #fff; /* rgba fallback */ background: rgba(255, 255, 255, 0.1); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-light-2 > .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 4px; background: #fff; /* rgba fallback */ background: rgba(255, 255, 255, 0.75); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-light-2.mCSB_horizontal > .mCSB_scrollTools .mCSB_draggerRail { width: 100%; height: 4px; margin: 6px 0; } .mCS-light-2.mCSB_horizontal > .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 100%; height: 4px; margin: 6px auto; } .mCS-light-2 > .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-light-2 > .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background: rgba(255, 255, 255, 0.9); } .mCS-light-2 > .mCSB_scrollTools .mCSB_buttonUp { background-position: -32px 0; } .mCS-light-2 > .mCSB_scrollTools .mCSB_buttonDown { background-position: -32px -20px; } .mCS-light-2 > .mCSB_scrollTools .mCSB_buttonLeft { background-position: -40px -40px; } .mCS-light-2 > .mCSB_scrollTools .mCSB_buttonRight { background-position: -40px -56px; } /*dark-2*/ .mCS-dark-2 > .mCSB_scrollTools .mCSB_draggerRail { width: 4px; background: #000; /* rgba fallback */ background: rgba(0, 0, 0, 0.1); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-dark-2 > .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 4px; background: #000; /* rgba fallback */ background: rgba(0, 0, 0, 0.75); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-dark-2.mCSB_horizontal > .mCSB_scrollTools .mCSB_draggerRail { width: 100%; height: 4px; margin: 6px 0; } .mCS-dark-2.mCSB_horizontal > .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 100%; height: 4px; margin: 6px auto; } .mCS-dark-2 > .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-2 > .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background: rgba(0, 0, 0, 0.9); } .mCS-dark-2 > .mCSB_scrollTools .mCSB_buttonUp { background-position: -112px 0; } .mCS-dark-2 > .mCSB_scrollTools .mCSB_buttonDown { background-position: -112px -20px; } .mCS-dark-2 > .mCSB_scrollTools .mCSB_buttonLeft { background-position: -120px -40px; } .mCS-dark-2 > .mCSB_scrollTools .mCSB_buttonRight { background-position: -120px -56px; } /*light-thick*/ .mCS-light-thick > .mCSB_scrollTools .mCSB_draggerRail { width: 4px; background: #fff; /* rgba fallback */ background: rgba(255, 255, 255, 0.1); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-light-thick > .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 6px; background: #fff; /* rgba fallback */ background: rgba(255, 255, 255, 0.75); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-light-thick.mCSB_horizontal > .mCSB_scrollTools .mCSB_draggerRail { width: 100%; height: 4px; margin: 6px 0; } .mCS-light-thick.mCSB_horizontal > .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 100%; height: 6px; margin: 5px auto; } .mCS-light-thick > .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-light-thick > .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background: rgba(255, 255, 255, 0.9); } .mCS-light-thick > .mCSB_scrollTools .mCSB_buttonUp { background-position: -16px 0; } .mCS-light-thick > .mCSB_scrollTools .mCSB_buttonDown { background-position: -16px -20px; } .mCS-light-thick > .mCSB_scrollTools .mCSB_buttonLeft { background-position: -20px -40px; } .mCS-light-thick > .mCSB_scrollTools .mCSB_buttonRight { background-position: -20px -56px; } /*dark-thick*/ .mCS-dark-thick > .mCSB_scrollTools .mCSB_draggerRail { width: 4px; background: #000; /* rgba fallback */ background: rgba(0, 0, 0, 0.1); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-dark-thick > .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 6px; background: #000; /* rgba fallback */ background: rgba(0, 0, 0, 0.75); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-dark-thick.mCSB_horizontal > .mCSB_scrollTools .mCSB_draggerRail { width: 100%; height: 4px; margin: 6px 0; } .mCS-dark-thick.mCSB_horizontal > .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 100%; height: 6px; margin: 5px auto; } .mCS-dark-thick > .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-thick > .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background: rgba(0, 0, 0, 0.9); } .mCS-dark-thick > .mCSB_scrollTools .mCSB_buttonUp { background-position: -96px 0; } .mCS-dark-thick > .mCSB_scrollTools .mCSB_buttonDown { background-position: -96px -20px; } .mCS-dark-thick > .mCSB_scrollTools .mCSB_buttonLeft { background-position: -100px -40px; } .mCS-dark-thick > .mCSB_scrollTools .mCSB_buttonRight { background-position: -100px -56px; } /*light-thin*/ .mCS-light-thin > .mCSB_scrollTools .mCSB_draggerRail { background: #fff; /* rgba fallback */ background: rgba(255, 255, 255, 0.1); } .mCS-light-thin > .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 2px; } .mCS-light-thin.mCSB_horizontal > .mCSB_scrollTools .mCSB_draggerRail { width: 100%; } .mCS-light-thin.mCSB_horizontal > .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 100%; height: 2px; margin: 7px auto; } /*dark-thin*/ .mCS-dark-thin > .mCSB_scrollTools .mCSB_draggerRail { background: none; /* rgba fallback */ } .mCS-dark-thin > .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 2px; background: #000; /* rgba fallback */ background: rgba(0, 0, 0, 0.75); } .mCS-dark-thin.mCSB_horizontal > .mCSB_scrollTools .mCSB_draggerRail { width: 100%; } .mCS-dark-thin.mCSB_horizontal > .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 100%; height: 2px; margin: 7px auto; } .mCS-dark-thin > .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-thin > .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background: rgba(0, 0, 0, 0.9); } .mCS-dark-thin > .mCSB_scrollTools .mCSB_buttonUp { background-position: -80px 0; } .mCS-dark-thin > .mCSB_scrollTools .mCSB_buttonDown { background-position: -80px -20px; } .mCS-dark-thin > .mCSB_scrollTools .mCSB_buttonLeft { background-position: -80px -40px; } .mCS-dark-thin > .mCSB_scrollTools .mCSB_buttonRight { background-position: -80px -56px; } /* ===== styles_content.css ===== */ .display-table { display: table; width: 100%; height: 100%; -webkit-transition: all 0.2s; -o-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; } .display-table .display-tableCell { display: table-cell; width: 100%; height: 100%; vertical-align: middle; -webkit-transition: all 0.2s; -o-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; } .bg-ff { background: #fff !important; } .bg-f5 { background: #f5f5f5 !important; } .sub-banner { width: 100%; margin-top: 81px; position: relative; } .sub-banner img { width: 100%; } .sub-banner .sub-bannerTxt { position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; } .sub-banner .sub-bannerTxt .display-table { width: 1200px; margin: 0 auto; } .sub-banner .sub-bannerTxt h4 { font-size: 30px; color: #fff; line-height: 47px; } .sub-banner .sub-bannerTxt p { font-size: 20px; color: #fff; margin-top: 10px; } .sub-banner .sub-bannerTxt.txtLeft { text-align: left; } .sub-banner .sub-bannerTxt.black h4 { color: #333; font-style: italic; } .sub-banner .sub-bannerTxt.black h4 span { width: 85px; display: inline-block; color: #fff; text-align: center; background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/pay-bg.png") no-repeat center; -moz-background-size: 100%; background-size: 100%; } .sub-banner .sub-bannerTxt.black p { font-size: 16px; color: #333; font-style: italic; font-weight: bold; } .sub-banner .sub-bannerTxt.special-er h4 { text-align: right; color: #333; } .sub-banner .sub-bannerTxt.zf h4 { position: relative; padding-bottom: 20px; } .sub-banner .sub-bannerTxt.sf p { font-size: 20px; color: #fff; font-style: italic; } .sub-banner .sub-bannerTxt.qr { text-align: left; } .sub-banner .sub-bannerTxt.qr .display-table { padding-left: 515px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .sub-banner .sub-bannerTxt.qr .display-table p { font-style: italic; } .YL-crumbs { line-height: 65px; background: #f8f8f8; border-bottom: 1px solid #e8e8e8; } .YL-crumbs ul li { float: left; font-size: 14px; color: #999; margin-right: 10px; } .YL-crumbs ul li:last-child a { color: #333; } .YL-crumbs ul li a { display: inline-block; font-size: 14px; color: #999; } .YL-crumbs ul li a.homeLink { padding-left: 25px; background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/home-icon.png") no-repeat center left; -moz-background-size: 18px; background-size: 18px; } .sub-tit { font-size: 24px; color: #333; font-weight: bold; text-align: center; padding: 50px 0 40px; } .sub-txt { background: #f5f5f5; } .sub-txt p { font-size: 18px; color: #333; padding: 50px 100px; background: #fff; position: relative; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .sub-txt p:after { content: ''; display: block; width: 40px; height: 32px; background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/yh01.png"); position: absolute; top: 15px; left: 15px; } .sub-txt p:before { content: ''; display: block; width: 40px; height: 32px; background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/yh02.png"); position: absolute; bottom: 15px; right: 15px; } .wq-txt { overflow: hidden; } .wq-txt .wq-txt-t { border-bottom: 1px solid #dbdbdb; } .wq-txt p { font-size: 18px; color: #333; letter-spacing: 3px; } .wq-txt .wq-txt-tab { margin-top: 55px; text-align: center; position: relative; } .wq-txt .wq-txt-tab:after { content: ''; display: block; width: 3000px; height: 1px; background: #dbdbdb; position: absolute; bottom: 1px; left: -1000px; } .wq-txt .wq-txt-tab span { display: inline-block; font-size: 18px; color: #333; line-height: 22px; margin: 0 80px; cursor: pointer; padding-bottom: 28px; border-bottom: 2px solid #fff; } .wq-txt .wq-txt-tab span.active { font-size: 24px; font-weight: bold; border-bottom: 2px solid #333; } .wq-txt ul { text-align: center; padding: 50px 0; } .wq-txt ul li { display: none; } .wq-txt ul li.active { display: block; overflow: hidden; } .wq-txt ul li .wq-s-item { display: inline-block; max-width: 438px; padding: 0 100px; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .wq-txt ul li .wq-s-item:first-child:before { content: ''; display: block; width: 1px; height: 60%; background: #dbdbdb; position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .wq-txt ul li .wq-s-item:last-child:before { display: none; } .wq-txt ul li .wq-s-item img { width: 80px; margin: 0 auto; } .wq-txt ul li .wq-s-item span { display: block; font-size: 16px; color: #333; text-align: center; margin: 40px 0 30px; } .wq-txt ul li .wq-s-item p { font-size: 16px; color: #999; text-align: center; } .wq-card { padding: 60px 0; background: #f5f5f5 url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/d-bg.png") no-repeat center bottom; -moz-background-size: 100%; background-size: 100%; } .wq-card .wq-card-con .wq-card-txt { float: left; width: 46%; margin-right: 5%; } .wq-card .wq-card-con .wq-card-txt p { font-size: 18px; color: #333; line-height: 28px; } .wq-card .wq-card-con .wq-card-img { float: left; width: 49%; } .wq-card .wq-card-con .wq-card-img img { width: 100%; } .wq-service { padding: 0 0 50px; } .wq-service p { font-size: 18px; color: #333; } .wq-service ul { margin-top: 50px; } .wq-service ul li { float: left; width: 48%; background: #f5f5f5; text-align: center; padding-bottom: 20px; } .wq-service ul li:first-child { margin-right: 4%; } .wq-service ul li .wq-service-img { position: relative; } .wq-service ul li .wq-service-img:before { content: ''; width: 100%; height: 50%; background: #fff; position: absolute; top: 0; left: 0; } .wq-service ul li .wq-service-img img { width: 355px; margin: 0 auto; position: relative; } .wq-service ul li span { display: block; font-size: 18px; color: #333; font-weight: bold; text-align: center; margin: 25px 0; } .wq-service ul li a { display: inline-block; font-size: 14px; color: #df3232; line-height: 38px; padding: 0 25px; border: 1px solid #df3232; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } .wq-service ul li a:hover { color: #fff; background: #df3232; } .wq-ability { padding-bottom: 50px; background: #f5f5f5; } .wq-ability p { font-size: 18px; color: #333; text-align: center; } .wq-ability ul { width: 101%; margin-left: -0.5%; margin-top: 40px; } .wq-ability ul li { float: left; width: 32.33%; margin: 0 0.5%; padding-bottom: 30px; background: #fff; text-align: left; position: relative; } .wq-ability ul li img { width: 100%; } .wq-ability ul li span { display: block; font-size: 16px; color: #333; font-weight: bold; margin: 20px; } .wq-ability ul li p { height: 174px; font-size: 16px; color: #999; margin: 0 20px; text-align: left; overflow: hidden; } .wq-ability ul li a { display: inline-block; font-size: 14px; color: #df3232; line-height: 38px; padding: 0 25px; border: 1px solid #df3232; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; position: absolute; left: 50%; bottom: 30px; margin-left: -54px; } .wq-ability ul li a:hover { color: #fff; background: #df3232; } .YL-solution .YL-solution-con .solution-tab ul { padding: 0 50px; border-bottom: 1px solid #ebebeb; } .YL-solution .YL-solution-con .solution-tab ul li { float: left; width: 16.666%; text-align: center; } .YL-solution .YL-solution-con .solution-tab ul li.active a { font-size: 24px; color: #333; font-weight: bold; border-bottom: 2px solid #333; } .YL-solution .YL-solution-con .solution-tab ul li a { display: inline-block; font-size: 16px; color: #666; line-height: 24px; padding: 40px 0; } .YL-solution .YL-solution-con .solution-switch .solution-switch-item { padding-bottom: 40px; border-bottom: 1px solid #ebebeb; } .YL-solution .YL-solution-con .solution-switch .solution-switch-item dl { width: 102%; margin-left: -1%; } .YL-solution .YL-solution-con .solution-switch .solution-switch-item dl dd { float: left; width: 31.33%; margin: 0 1% 1% 1%; } .YL-solution .YL-solution-con .solution-switch .solution-switch-item dl dd a { display: block; height: 78px; line-height: 78px; text-align: center; background: #f8f8f8; position: relative; } .YL-solution .YL-solution-con .solution-switch .solution-switch-item dl dd a:hover { background: #fff; -webkit-box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2); -moz-box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2); box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2); } .YL-solution .YL-solution-con .solution-switch .solution-switch-item dl dd a:hover span { font-size: 18px; font-weight: bold; } .YL-solution .YL-solution-con .solution-switch .solution-switch-item dl dd a:hover:before { content: ''; width: 100%; height: 2px; background: #333; position: absolute; left: 0; bottom: 0; } .YL-solution .YL-solution-con .solution-switch .solution-switch-item dl dd a span { display: inline-block; font-size: 14px; color: #333; padding-left: 32px; -webkit-transition: all 0.2s; -o-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; background-repeat: no-repeat; background-position: left center; -moz-background-size: 24px; background-size: 24px; } .YL-solution .solution-kh-txt { padding-bottom: 50px; background: #f5f5f5; } .YL-solution .solution-kh-txt p { font-size: 14px; color: #333; line-height: 28px; } .YL-solution .solution-kh-condition .condition-tit { font-size: 18px; color: #333; font-weight: bold; } .YL-solution .solution-kh-condition ul { width: 102%; margin-left: -1%; margin-bottom: 40px; } .YL-solution .solution-kh-condition ul li { float: left; width: 23%; margin: 0 1% 2%; padding: 20px; background: #f8f8f8; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .YL-solution .solution-kh-condition ul li .kh-c-img { width: 60px; height: 60px; background: #fff; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .YL-solution .solution-kh-condition ul li span { display: block; font-size: 18px; color: #333; font-weight: bold; margin: 20px 0; } .YL-solution .solution-kh-condition ul li p { font-size: 14px; color: #999; height: 63px; overflow: hidden; } .YL-solution .solution-kh-condition ul.li_3 li { width: 31.33%; } .YL-solution .solution-kh-scene { padding-bottom: 50px; background: #f5f5f5; } .YL-solution .solution-kh-scene .scene-tit { font-size: 18px; color: #333; font-weight: bold; } .YL-solution .solution-kh-scene .scene-con { margin-bottom: 40px; margin-top: 20px; } .YL-solution .solution-kh-scene .scene-con .scene-con-img { float: left; width: 48%; margin-right: 4%; } .YL-solution .solution-kh-scene .scene-con .scene-con-img img { width: 100%; } .YL-solution .solution-kh-scene .scene-con .scene-con-txt { float: left; width: 48%; } .YL-solution .solution-kh-scene .scene-con .scene-con-txt p { font-size: 14px; color: #999; margin: 30px 0; } .YL-solution .solution-kh-scene .scene-con .scene-con-txt p span { display: block; font-size: 18px; color: #333; font-weight: bold; margin-bottom: 10px; } .YL-solution .solution-kh-process { padding-bottom: 50px; } .YL-solution .solution-kh-process img { width: 98%; margin: 0 auto; } .YL-solution .solution-kh-case { padding-bottom: 50px; background: #f5f5f5; } .YL-solution .solution-kh-case ul li { float: left; width: 48%; padding: 40px 0; background: #fff; text-align: center; } .YL-solution .solution-kh-case ul li:first-child { margin-right: 4%; } .YL-solution .solution-kh-case ul li .zf-icon { width: 60px; height: 60px; margin: 0 auto; background: #f5f5f5; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .YL-solution .solution-kh-case ul li span { display: block; font-size: 18px; color: #333; font-weight: bold; margin: 20px 0; } .YL-solution .solution-kh-case ul li p { font-size: 14px; color: #666; margin: 0 30px; height: 42px; overflow: hidden; } .YL-solution .solution-kh-case .case-swiper .case-swiper-tit { font-size: 18px; color: #333; font-weight: bold; margin-bottom: 20px; } .YL-solution .solution-kh-case .case-swiper .case-swiper-l { float: left; width: 48%; margin-right: 4%; position: relative; } .YL-solution .solution-kh-case .case-swiper .case-swiper-l:before { content: ''; width: 1px; height: 15px; background: #999; position: absolute; right: 39.5px; bottom: 12px; z-index: 20; } .YL-solution .solution-kh-case .case-swiper .case-swiper-r { float: left; width: 48%; position: relative; } .YL-solution .solution-kh-case .case-swiper .case-swiper-r:before { content: ''; width: 1px; height: 15px; background: #999; position: absolute; right: 39.5px; bottom: 12px; z-index: 20; } .YL-solution .solution-kh-case .case-swiper .swiper-slide { position: relative; } .YL-solution .solution-kh-case .case-swiper .swiper-slide img { width: 100%; } .YL-solution .solution-kh-case .case-swiper .swiper-slide span { display: block; width: 100%; position: absolute; left: 0; bottom: 0; font-size: 14px; color: #fff; line-height: 40px; padding: 0 30px; background: rgba(0, 0, 0, 0.4); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .YL-solution .solution-kh-case .case-swiper .swiper-button-prev { width: 40px; height: 40px; background: #fff url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/jj-btn-l.png") no-repeat center; left: inherit; right: 40px; top: inherit; bottom: 0; z-index: 15; } .YL-solution .solution-kh-case .case-swiper .swiper-button-prev:hover { background: #dbdbdb url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/jj-btn-l.png") no-repeat center; } .YL-solution .solution-kh-case .case-swiper .swiper-button-next { width: 40px; height: 40px; background: #fff url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/jj-btn-r.png") no-repeat center; left: inherit; right: 0; top: inherit; bottom: 0; z-index: 15; } .YL-solution .solution-kh-case .case-swiper .swiper-button-next:hover { background: #dbdbdb url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/jj-btn-r.png") no-repeat center; } .YL-solution .solution-kh-case .case-swiper .swiper-pagination { width: 50px; line-height: 40px; text-align: right; left: inherit; right: 90px; color: #fff; bottom: 0; } .YL-solution .solution-kh-case .case-swiper .swiper-pagination span { font-size: 14px; color: #fff; } .YL-solution .solution-kh-case .case-swiper .swiper-pagination span.swiper-pagination-current { font-size: 20px; } .YL-solution .solution-kh-characteristic { padding-bottom: 50px; } .YL-solution .solution-kh-characteristic ul { width: 102%; margin-left: -1%; } .YL-solution .solution-kh-characteristic ul li { float: left; width: 31.33%; margin: 0 1%; text-align: center; padding: 25px 0; border: 1px solid #dedede; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; } .YL-solution .solution-kh-characteristic ul li span { display: block; font-size: 20px; color: #333; font-weight: bold; } .YL-solution .solution-kh-characteristic ul li span.en { width: 100%; font-size: 26px; position: absolute; top: 24px; opacity: 0.1; } .YL-solution .solution-kh-characteristic ul li p { font-size: 14px; color: #333; margin-top: 10px; } .YL-solution .solution-condition-txt { padding-bottom: 50px; } .YL-solution .solution-condition-txt p { font-size: 14px; color: #333; text-align: center; line-height: 28px; padding: 20px 0; background: #f5f5f5; } .YL-solution .solution-condition-txt p img { display: inline-block; margin-right: 20px; } .YL-solution .solution-condition-txt dl.ds-dl { margin: 0 100px; } .YL-solution .solution-condition-txt dl.ds-dl dd { float: left; width: 33.33%; text-align: center; } .YL-solution .solution-condition-txt dl.ds-dl dd .ds-tj-img { width: 75px; height: 75px; margin: 0 auto; background: #f5f5f5; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .YL-solution .solution-condition-txt dl.ds-dl dd .ds-tj-img img { margin: 0 auto; } .YL-solution .solution-condition-txt dl.ds-dl dd span { display: block; font-size: 18px; color: #333; font-weight: bold; line-height: 40px; margin-top: 20px; } .YL-solution .solution-case { padding-bottom: 50px; background: #f5f5f5; } .YL-solution .solution-case ul { width: 102%; margin-left: -1%; } .YL-solution .solution-case ul li { float: left; width: 31.33%; height: 420px; margin: 0 1%; background-repeat: no-repeat; background-position: center; -moz-background-size: 100% 100%; background-size: 100% 100%; -webkit-transition: all 0.2s; -o-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; overflow: hidden; } .YL-solution .solution-case ul li:hover { -moz-background-size: 110% 110%; background-size: 110% 110%; } .YL-solution .solution-case ul li .display-table { background: rgba(0, 0, 0, 0.4); text-align: center; } .YL-solution .solution-case ul li .display-table img { margin: 0 auto; } .YL-solution .solution-case ul li .display-table span { display: block; font-size: 18px; color: #fff; font-weight: bold; line-height: 40px; padding-top: 25px; margin-top: 25px; position: relative; } .YL-solution .solution-case ul li .display-table span:before { content: ''; width: 20px; height: 2px; background: #fff; position: absolute; top: 0; left: 50%; margin-left: -10px; } .YL-solution .solution-case ul li .display-table p { height: 0; padding: 0 20px; font-size: 14px; color: #fff; overflow: hidden; -webkit-transition: all 0.2s; -o-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; } .YL-solution .solution-case ul.li_2 li { width: 48%; } .YL-solution .solution-ct-case ul li:hover .display-table p { height: 63px !important; } .YL-solution .solution-characteristic { padding-bottom: 50px; } .YL-solution .solution-characteristic ul { width: 102%; margin-left: -1%; margin-bottom: 40px; } .YL-solution .solution-characteristic ul li { float: left; width: 31.33%; margin: 1%; padding: 20px 20px 50px 20px; background: #f8f8f8; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; } .YL-solution .solution-characteristic ul li:before { content: ''; width: 80px; height: 1px; background: #c7c7c7; position: absolute; left: 20px; bottom: 40px; } .YL-solution .solution-characteristic ul li .kh-c-img { width: 60px; height: 60px; background: #fff; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .YL-solution .solution-characteristic ul li span { display: block; font-size: 18px; color: #333; font-weight: bold; margin: 20px 0; } .YL-solution .solution-characteristic ul li p { font-size: 14px; color: #333; line-height: 24px; height: 96px; overflow: hidden; } .YL-solution .solution-characteristic ul.li_2 li { width: 48%; } .YL-payment .YL-payment-mobile { padding-bottom: 50px; background: #fff; } .YL-payment .YL-payment-mobile .mobile-list { width: 102%; margin-left: -1%; } .YL-payment .YL-payment-mobile .mobile-list .m-item { float: left; width: 31.33%; margin: 0 1%; position: relative; } .YL-payment .YL-payment-mobile .mobile-list .m-item > img { width: 100%; } .YL-payment .YL-payment-mobile .mobile-list .m-item .m-item-tit { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 35px; -webkit-transition: all 0.2s; -o-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; background: rgba(0, 0, 0, 0.2); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .YL-payment .YL-payment-mobile .mobile-list .m-item .m-item-tit img { margin: 0 auto; } .YL-payment .YL-payment-mobile .mobile-list .m-item .m-item-tit span { display: block; font-size: 18px; color: #fff; font-weight: bold; text-align: center; margin: 30px 0; padding: 30px 0; position: relative; } .YL-payment .YL-payment-mobile .mobile-list .m-item .m-item-tit span:before { content: ''; width: 20px; height: 3px; background: #fff; position: absolute; top: 0; left: 50%; margin-left: -10px; } .YL-payment .YL-payment-mobile .mobile-list .m-item .m-item-tit p { display: none; font-size: 14px; color: #666; } .YL-payment .YL-payment-mobile .mobile-list .m-item .m-item-tit a { display: none; font-size: 14px; color: #333; line-height: 38px; padding: 0 30px; margin-top: 40px; border: 1px solid #333; } .YL-payment .YL-payment-mobile .mobile-list .m-item .m-item-tit a:hover { color: #fff; background: #333; } .YL-payment .YL-payment-mobile .mobile-list .m-item:hover .m-item-tit { background: #f8f8f8; } .YL-payment .YL-payment-mobile .mobile-list .m-item:hover .m-item-tit img { display: none; } .YL-payment .YL-payment-mobile .mobile-list .m-item:hover .m-item-tit span { color: #333; text-align: left; margin: 0 0 30px; padding: 0 0 30px; } .YL-payment .YL-payment-mobile .mobile-list .m-item:hover .m-item-tit span:before { display: none; } .YL-payment .YL-payment-mobile .mobile-list .m-item:hover .m-item-tit span:after { content: ''; width: 20px; height: 3px; background: #333; position: absolute; bottom: 0; left: 0; } .YL-payment .YL-payment-mobile .mobile-list .m-item:hover .m-item-tit p { display: block; } .YL-payment .YL-payment-mobile .mobile-list .m-item:hover .m-item-tit a { display: inline-block; } .YL-payment .YL-payment-card { padding-bottom: 30px; background: #f5f5f5; } .YL-payment .YL-payment-card .card-list { width: 102%; margin-left: -1%; } .YL-payment .YL-payment-card .card-list .card-list-item { float: left; width: 31.33%; margin: 0 1% 2% 1%; background: #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; } .YL-payment .YL-payment-card .card-list .card-list-item:hover { -webkit-box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2); -moz-box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2); box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2); } .YL-payment .YL-payment-card .card-list .card-list-item:hover:before { content: ''; width: 100%; height: 3px; background: #333; position: absolute; left: 0; bottom: 0; } .YL-payment .YL-payment-card .card-list .card-list-item:hover img { width: 55%; } .YL-payment .YL-payment-card .card-list .card-list-item a { display: block; padding: 20px; } .YL-payment .YL-payment-card .card-list .card-list-item span { display: block; } .YL-payment .YL-payment-card .card-list .card-list-item span.c_name { font-size: 18px; color: #333; font-weight: bold; padding-bottom: 15px; position: relative; } .YL-payment .YL-payment-card .card-list .card-list-item span.c_name:after { content: ''; width: 30px; height: 3px; background: #333; position: absolute; left: 0; bottom: 0; } .YL-payment .YL-payment-card .card-list .card-list-item span.c_num { font-size: 26px; color: #333; font-weight: bold; margin-top: 30px; } .YL-payment .YL-payment-card .card-list .card-list-item p { font-size: 14px; color: #999; } .YL-payment .YL-payment-card .card-list .card-list-item img { width: 50%; position: absolute; right: 20px; bottom: 20px; -webkit-transition: all 0.2s; -o-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; } .YL-payment .YL-payment-service { padding-bottom: 50px; } .YL-payment .YL-payment-service ul li { float: left; width: 23%; margin: 1%; background: #f8f8f8; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; } .YL-payment .YL-payment-service ul li a { display: block; padding: 30px; } .YL-payment .YL-payment-service ul li:hover { background: #fff; -webkit-box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2); -moz-box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2); box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2); } .YL-payment .YL-payment-service ul li:hover:before { content: ''; width: 100%; height: 3px; background: #333; position: absolute; left: 0; bottom: 0; } .YL-payment .YL-payment-service ul li:hover .p-service-img { background: #f0f0f0; } .YL-payment .YL-payment-service ul li .p-service-img { width: 60px; height: 60px; background: #fff; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .YL-payment .YL-payment-service ul li span { display: block; height: 54px; font-size: 18px; color: #333; font-weight: bold; margin: 20px 0; overflow: hidden; } .YL-payment .YL-payment-service ul li p { font-size: 14px; color: #999; height: 39px; word-break: break-all; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .YL-payment .YL-payment-service ul li em { display: inline-block; min-width: 70px; font-size: 14px; color: #666; height: 22px; line-height: 22px; margin-top: 30px; border-bottom: 1px solid #999; cursor: pointer; } .YL-payment .YL-payment-service ul li em:hover { color: transparent; border-bottom: 1px solid #fff; background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/pay-jt.png") no-repeat center; } .MPay-Topic { overflow: hidden; } .MPay-Topic .Topic-video { padding: 50px 0; background: #f5f5f5; } .MPay-Topic .Topic-video .Topic-video-txt { float: left; width: 42%; height: 200px; margin-right: 4%; padding-top: 30px; } .MPay-Topic .Topic-video .Topic-video-txt h4 { font-size: 24px; color: #333; font-weight: bold; } .MPay-Topic .Topic-video .Topic-video-txt p { font-size: 16px; color: #333; margin-top: 20px; } .MPay-Topic .Topic-video .Topic-video-v { float: left; width: 54%; height: 400px; } .MPay-Topic .Topic-video .Topic-video-v .video-js { width: 100%; height: 100%; } .MPay-Topic .Topic-video .Topic-video-v .video-js .vjs-poster { width: 100%; height: 100%; -moz-background-size: cover; background-size: cover; } .MPay-Topic .Topic-video .Topic-video-v .video-js .vjs-big-play-button { width: 72px; height: 72px; line-height: 64px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; border: 4px solid #fff; background-color: transparent; top: 50%; left: 50%; margin: -32px 0 0 -32px; } .MPay-Topic .Topic-video .Topic-video-v video { width: 100%; height: 100%; } .MPay-Topic .Topic-advantage { padding-bottom: 50px; } .MPay-Topic .Topic-advantage .sub-tit { padding: 50px 0 10px; } .MPay-Topic .Topic-advantage .sub-txt { font-size: 14px; text-align: center; letter-spacing: 3px; background: none; } .MPay-Topic .Topic-advantage ul { margin-top: 40px; } .MPay-Topic .Topic-advantage ul li { float: left; width: 20%; padding: 0 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: center; } .MPay-Topic .Topic-advantage ul li img { margin: 0 auto; } .MPay-Topic .Topic-advantage ul li span { display: block; font-size: 18px; color: #333; font-weight: bold; margin: 20px 0; } .MPay-Topic .Topic-advantage ul li p { font-size: 14px; color: #999; line-height: 24px; } .MPay-Topic .Topic-mode { padding-bottom: 50px; background: #f5f5f5; } .MPay-Topic .Topic-mode .sub-tit { padding: 50px 0 10px; } .MPay-Topic .Topic-mode .sub-txt { font-size: 14px; text-align: center; letter-spacing: 3px; background: none; } .MPay-Topic .Topic-mode .Topic-mode-list { width: 102%; margin-top: 40px; margin-left: -1%; } .MPay-Topic .Topic-mode .Topic-mode-list .Topic-mode-item { float: left; width: 31.33%; margin: 0 1%; padding: 20px; background: #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; } .MPay-Topic .Topic-mode .Topic-mode-list .Topic-mode-item .Topic-mode-tit { padding-bottom: 15px; position: relative; overflow: hidden; } .MPay-Topic .Topic-mode .Topic-mode-list .Topic-mode-item .Topic-mode-tit span { display: block; font-size: 18px; color: #333; font-weight: bold; line-height: 40px; } .MPay-Topic .Topic-mode .Topic-mode-list .Topic-mode-item .Topic-mode-tit span em { width: 56px; display: inline-block; font-size: 36px; margin-left: -56px; -webkit-transition: all 0.3s; -o-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; overflow: hidden; position: relative; top: 10px; } .MPay-Topic .Topic-mode .Topic-mode-list .Topic-mode-item .Topic-mode-tit:before { content: ''; width: 30px; height: 2px; background: #333; position: absolute; left: 0; bottom: 0; -webkit-transition: all 0.3s; -o-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .MPay-Topic .Topic-mode .Topic-mode-list .Topic-mode-item p { width: 118px; font-size: 14px; color: #999; line-height: 24px; margin-top: 20px; opacity: 0; -webkit-transition: all 0.3s; -o-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .MPay-Topic .Topic-mode .Topic-mode-list .Topic-mode-item strong { font-size: 36px; color: #333; font-weight: bold; position: absolute; left: 20px; bottom: 20px; -webkit-transition: all 0.2s; -o-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; } .MPay-Topic .Topic-mode .Topic-mode-list .Topic-mode-item img { width: 62px; position: absolute; right: 20px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.3s; -o-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .MPay-Topic .Topic-mode .Topic-mode-list .Topic-mode-item:hover .Topic-mode-tit span em { margin-left: 0; } .MPay-Topic .Topic-mode .Topic-mode-list .Topic-mode-item:hover .Topic-mode-tit:before { width: 160px; } .MPay-Topic .Topic-mode .Topic-mode-list .Topic-mode-item:hover p { opacity: 1; } .MPay-Topic .Topic-mode .Topic-mode-list .Topic-mode-item:hover strong { opacity: 0; } .MPay-Topic .Topic-mode .Topic-mode-list .Topic-mode-item:hover img { width: 140px; } .MPay-Topic .Topic-Oneness { padding-bottom: 50px; } .MPay-Topic .Topic-Oneness .sub-tit { padding: 50px 0 10px; } .MPay-Topic .Topic-Oneness .sub-txt { font-size: 14px; text-align: center; letter-spacing: 3px; background: none; } .MPay-Topic .Topic-Oneness .Topic-Oneness-con { margin-top: 40px; } .MPay-Topic .Topic-Oneness .Topic-Oneness-con p { font-size: 16px; color: #333; } .MPay-Topic .Topic-Oneness .Topic-Oneness-con .Topic-Oneness-b { margin-top: 40px; overflow: hidden; } .MPay-Topic .Topic-Oneness .Topic-Oneness-con .Topic-Oneness-b .Topic-Oneness-img { float: left; width: 34%; margin-right: 5%; } .MPay-Topic .Topic-Oneness .Topic-Oneness-con .Topic-Oneness-b .Topic-Oneness-img img { width: 100%; } .MPay-Topic .Topic-Oneness .Topic-Oneness-con .Topic-Oneness-b .Topic-Oneness-txt { float: left; width: 61%; padding-top: 60px; } .MPay-Topic .Topic-Oneness .Topic-Oneness-con .Topic-Oneness-b .Topic-Oneness-txt dl dd { font-size: 16px; color: #333; } .MPay-Topic .Topic-Oneness .Topic-Oneness-con .Topic-Oneness-b .Topic-Oneness-txt span { display: block; font-size: 18px; color: #333; font-weight: bold; margin-top: 40px; margin-bottom: 20px; } .MPay-Topic .Topic-Range { padding-bottom: 50px; background: #f5f5f5; } .MPay-Topic .Topic-Range p { font-size: 16px; color: #333; } .MPay-Topic .Topic-Range dl { margin-top: 40px; text-align: center; background: #fff; } .MPay-Topic .Topic-Range dl dt { font-size: 18px; color: #333; font-weight: bold; line-height: 70px; background: #dbdbdb; } .MPay-Topic .Topic-Range dl dd { font-size: 16px; color: #333; font-weight: bold; line-height: 60px; border-bottom: 1px solid #dbdbdb; } .MPay-Topic .Topic-Range dl dd:last-child { border: none; } .MPay-Topic .Topic-Pay { padding-bottom: 50px; background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/MP-bg.jpg") no-repeat center; -moz-background-size: cover; background-size: cover; } .MPay-Topic .Topic-Pay p { font-size: 16px; color: #333; } .MPay-Topic .Topic-Pay .Topic-Pay-tab { margin-top: 40px; text-align: center; position: relative; } .MPay-Topic .Topic-Pay .Topic-Pay-tab:before { content: ''; width: 4000px; height: 1px; background: #dbdbdb; position: absolute; left: -1000px; bottom: 0; } .MPay-Topic .Topic-Pay .Topic-Pay-tab span { display: inline-block; font-size: 24px; color: #333; font-weight: bold; text-align: center; margin: 0 60px; padding-bottom: 25px; cursor: pointer; } .MPay-Topic .Topic-Pay .Topic-Pay-tab span.active { border-bottom: 3px solid #333; } .MPay-Topic .Topic-Pay .Topic-Pay-list { margin-top: 40px; } .MPay-Topic .Topic-Pay .Topic-Pay-list .Topic-Pay-item { display: none; } .MPay-Topic .Topic-Pay .Topic-Pay-list .Topic-Pay-item.active { display: block; } .MPay-Topic .Topic-Pay .Topic-Pay-list .Topic-Pay-item p { font-size: 16px; color: #333; } .MPay-Topic .Topic-Pay .Topic-Pay-list .Topic-Pay-item ul { width: 102%; margin-top: 40px; margin-left: -1%; } .MPay-Topic .Topic-Pay .Topic-Pay-list .Topic-Pay-item ul li { float: left; width: 23%; margin: 0 1%; } .MPay-Topic .Topic-Pay .Topic-Pay-list .Topic-Pay-item ul li img { margin: 0 auto; } .MPay-Topic .Topic-Pay .Topic-Pay-list .Topic-Pay-item ul li span { display: block; height: 42px; font-size: 14px; color: #666; margin: 20px 0; padding: 0 30px 30px; text-align: center; position: relative; } .MPay-Topic .Topic-Pay .Topic-Pay-list .Topic-Pay-item ul li span:before { content: ''; width: 80px; height: 2px; background: #c5c5c5; position: absolute; left: 50%; bottom: 0; margin-left: -40px; } .cloudPay-jy .jy-list { padding-bottom: 50px; } .cloudPay-jy .jy-list .sub-tit { padding: 50px 0 10px; } .cloudPay-jy .jy-list .sub-txt { font-size: 14px; text-align: center; letter-spacing: 3px; background: none; } .cloudPay-jy .jy-list ul { width: 102%; margin-top: 40px; margin-left: -1%; } .cloudPay-jy .jy-list ul li { float: left; width: 31.33%; height: 400px; margin: 0 1%; padding: 30px; background-repeat: no-repeat; background-position: center center; -moz-background-size: cover; background-size: cover; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .cloudPay-jy .jy-list ul li img { width: 60px; } .cloudPay-jy .jy-list ul li span { display: block; font-size: 18px; color: #fff; font-weight: bold; line-height: 40px; margin-top: 25px; } .cloudPay-jy .jy-list ul li p { font-size: 14px; color: #fff; margin-top: 20px; height: 63px; padding-bottom: 60px; position: relative; } .cloudPay-jy .jy-list ul li p:before { content: ''; width: 80px; height: 1px; background: #fff; position: absolute; left: 0; bottom: 0; } .cloudPay-step { padding-bottom: 50px; background: #f5f5f5; } .cloudPay-step .sub-tit { padding: 50px 0 10px; } .cloudPay-step .sub-txt { font-size: 14px; text-align: center; letter-spacing: 3px; background: none; } .cloudPay-step .step-list .step-item { position: relative; padding: 70px 0; margin: 60px 0; border: 1px solid #333; } .cloudPay-step .step-list .step-item:last-child { margin: 60px auto 0; } .cloudPay-step .step-list .step-item .step-item-tit { font-size: 18px; color: #333; line-height: 40px; padding: 0 20px; background: #f5f5f5; position: absolute; top: -20px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .cloudPay-step .step-list .step-item .step-item-tit span { float: left; font-size: 40px; color: #333; font-style: italic; margin-right: 40px; } .cloudPay-step .step-list .step-item img { margin: 0 auto; } .cloudPay-step .step-list .step-item ul { width: 102%; padding: 0 30px; margin-left: -1%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .cloudPay-step .step-list .step-item ul li { float: left; width: 21%; margin: 0 2%; text-align: center; } .cloudPay-step .step-list .step-item ul li .step2-img { position: relative; } .cloudPay-step .step-list .step-item ul li img { width: 100%; } .cloudPay-step .step-list .step-item ul li img.step-y { width: 136px; position: absolute; } .cloudPay-step .step-list .step-item ul li p { display: inline-block; max-width: 70%; font-size: 14px; color: #333; text-align: left; padding-left: 50px; margin: 40px auto 0; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .cloudPay-step .step-list .step-item ul li p strong { display: block; width: 30px; height: 30px; font-size: 16px; color: #fff; font-weight: bold; text-align: center; line-height: 30px; background: #dc0117; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; position: absolute; top: 0; left: 0; } .cloudPay-step .step-list .step-item ul.step2-ul li:nth-child(1) .step-y { right: -51px; bottom: -50px; } .cloudPay-step .step-list .step-item ul.step2-ul li:nth-child(2) .step-y { top: -40px; right: -30px; } .cloudPay-step .step-list .step-item ul.step2-ul li:nth-child(3) .step-y { top: 24px; left: -30px; } .cloudPay-step .step-list .step-item ul.step2-ul li:nth-child(4) .step-y { bottom: -50px; left: 60px; } .cloudPay-step .step-list .step-item ul.step3-ul li:nth-child(1) .step-y { right: 51px; bottom: 20px; } .cloudPay-step .step-list .step-item ul.step3-ul li:nth-child(2) .step-y { top: 90px; left: -20px; } .cloudPay-step .step-list .step-item ul.step3-ul li:nth-child(3) .step-y { top: 24px; left: -30px; } .cloudPay-step .step-list .step-item ul.step3-ul li:nth-child(4) .step-y { top: 10px; left: 60px; } .cloudPay-fw { padding: 50px 0; } .cloudPay-fw .fw-img { float: left; width: 54%; } .cloudPay-fw .fw-img img { width: 100%; } .cloudPay-fw .fw-txt { float: left; width: 42%; margin-left: 4%; padding-top: 80px; } .cloudPay-fw .fw-txt h4 { font-size: 24px; color: #333; font-weight: bold; } .cloudPay-fw .fw-txt p { font-size: 16px; color: #333; margin-top: 20px; } .cloudPay-jy2 { background: #f5f5f5; } .cloudPay-jy2 .sub-tit { padding: 50px 0 40px !important; } .cloudPay-jy2 .cloudPay-p { font-size: 16px; color: #333; } .cloudPay-quick { padding-bottom: 50px; } .cloudPay-quick .cloudPay-quick-list .cloudPay-quick-item { overflow: hidden; } .cloudPay-quick .cloudPay-quick-list .cloudPay-quick-item .quick-txt { float: left; width: 50%; height: 400px; padding: 0 100px 0 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; } .cloudPay-quick .cloudPay-quick-list .cloudPay-quick-item .quick-txt:before { content: ''; width: 24px; height: 36px; background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/cloud-sj-r.png") no-repeat center; position: absolute; top: 50%; right: -24px; margin-top: -18px; } .cloudPay-quick .cloudPay-quick-list .cloudPay-quick-item .quick-txt h4 { font-size: 24px; color: #333; font-weight: bold; } .cloudPay-quick .cloudPay-quick-list .cloudPay-quick-item .quick-txt p { font-size: 16px; color: #333; margin-top: 20px; } .cloudPay-quick .cloudPay-quick-list .cloudPay-quick-item .quick-img { float: left; width: 50%; } .cloudPay-quick .cloudPay-quick-list .cloudPay-quick-item .quick-img img { width: 100%; height: 400px; } .cloudPay-quick .cloudPay-quick-list .cloudPay-quick-item:nth-child(even) .quick-txt { float: right; padding: 0 0 0 100px; } .cloudPay-quick .cloudPay-quick-list .cloudPay-quick-item:nth-child(even) .quick-txt:before { content: ''; width: 24px; height: 36px; background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/cloud-sj-l.png") no-repeat center; position: absolute; top: 50%; left: -24px; margin-top: -18px; } .cloudPay-link { text-align: center; padding: 50px 0 10px; background: #f5f5f5; } .cloudPay-link a { display: inline-block; font-size: 14px; color: #fff; width: 600px; height: 157px; background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/cloud-btn.png") no-repeat center; } .cloudPay-link a span { display: block; font-size: 28px; color: #fff; margin-top: 28px; } .QR-method { padding-bottom: 50px; } .QR-method .sub-tit { padding: 50px 0 10px; } .QR-method .sub-txt { font-size: 14px; text-align: center; letter-spacing: 3px; background: none; } .QR-method dl { margin-top: 50px; } .QR-method dl dt { display: block; font-size: 18px; color: #333; font-weight: bold; text-align: center; margin-bottom: 50px; } .QR-method dl dd { float: left; width: 25%; } .QR-method dl dd img { margin: 0 auto; } .QR-method dl dd span { display: block; font-size: 16px; color: #333; text-align: center; margin-top: 30px; } .QR-characteristic { padding-bottom: 50px; background: #f5f5f5; } .QR-characteristic ul { width: 102%; margin-left: -1%; height: 400px; overflow: hidden; } .QR-characteristic ul li { float: left; width: 19%; height: 400px; margin: 0 0.5%; -webkit-transition: all 0.2s; -o-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; background-repeat: no-repeat; background-position: center; -moz-background-size: cover; background-size: cover; } .QR-characteristic ul li.active .display-table .display-tableCell { vertical-align: middle; } .QR-characteristic ul li.active p { height: 147px; } .QR-characteristic ul li .display-table { padding: 25px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: rgba(0, 0, 0, 0.4); } .QR-characteristic ul li .display-table .display-tableCell { -webkit-transition: all 0.2s; -o-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; vertical-align: bottom; } .QR-characteristic ul li span { display: block; font-size: 18px; color: #fff; font-weight: bold; margin-top: 15px; margin-bottom: 20px; } .QR-characteristic ul li p { display: block; height: 0; overflow: hidden; font-size: 14px; color: #fff; -webkit-transition: all 0.2s; -o-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; } .QR-Range { padding-bottom: 50px; } .QR-Range .sub-tit { padding: 50px 0 10px; } .QR-Range .sub-txt { font-size: 14px; text-align: center; letter-spacing: 3px; background: none; } .QR-Range .QR-Range-list { margin-top: 40px; } .QR-Range .QR-Range-list ul { overflow: hidden; background: #f1f3f4; border-bottom: 1px solid #e8ebee; } .QR-Range .QR-Range-list ul li { float: left; height: 60px; line-height: 60px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-left: 20px; } .QR-Range .QR-Range-list ul li span { display: block; font-size: 14px; color: #666; font-weight: bold; border-right: 1px solid #e8ebee; } .QR-Range .QR-Range-list ul li:nth-child(1) { width: 10%; } .QR-Range .QR-Range-list ul li:nth-child(2) { width: 10%; } .QR-Range .QR-Range-list ul li:nth-child(3) { width: 80%; } .QR-Range .QR-Range-list ul li:nth-child(3) span { border: none; } .QR-Range .QR-Range-list .QR-Range-table { height: 705px; margin-top: -1px; } .QR-Range .QR-Range-list .QR-Range-table table { width: 100%; border: 1px solid #e8ebee; } .QR-Range .QR-Range-list .QR-Range-table table tr td { font-size: 14px; color: #666; padding: 20px; border: 1px solid #e8ebee; vertical-align: middle; } .QR-Range .QR-Range-list .QR-Range-table table tr td strong { font-weight: bold; } .QR-Range .QR-Range-list .QR-Range-table .mCustomScrollBox .mCSB_scrollTools { width: 16px; background: #f1f3f4; border: 1px solid #e8ebee; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .QR-Range .QR-Range-list .QR-Range-table .mCustomScrollBox .mCSB_scrollTools .mCSB_draggerRail { opacity: 0; } .QR-Range .QR-Range-list .QR-Range-table .mCustomScrollBox .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background: #999; } .QR-appList { padding-bottom: 50px; background: #f5f5f5; } .QR-appList p { font-size: 16px; color: #333; text-align: center; } .QR-appList ul { padding: 0 20px; margin-top: 40px; } .QR-appList ul li { float: left; width: 25%; margin: 25px 0; } .QR-appList ul li img { float: left; width: 56px; margin-right: 20px; } .QR-appList ul li span { float: left; font-size: 16px; color: #007f89; padding-top: 5px; } .QR-appList ul li span em { display: block; font-size: 14px; color: #333; margin-top: 5px; } .pay-lc { overflow: hidden; } .pay-lc .pay-lc-table { text-align: center; position: relative; } .pay-lc .pay-lc-table:before { content: ''; width: 4000px; height: 1px; background: #dbdbdb; position: absolute; left: -1000px; bottom: 0; } .pay-lc .pay-lc-table span { display: inline-block; font-size: 16px; color: #333; font-weight: bold; text-align: center; margin: 0 60px; padding-bottom: 25px; cursor: pointer; position: relative; } .pay-lc .pay-lc-table span.active { font-size: 24px; } .pay-lc .pay-lc-table span.active:before { content: ''; width: 60px; height: 3px; background: #333; position: absolute; left: 50%; bottom: 0; margin-left: -30px; } .pay-lc .pay-lc-list { margin-top: 20px; } .pay-lc .pay-lc-list .pay-list-item { display: none; } .pay-lc .pay-lc-list .pay-list-item.active { display: block; } .pay-lc .pay-lc-list .pay-list-item ul.ul_3 li { width: 33.33%; } .pay-lc .pay-lc-list .pay-list-item ul.ul_4 li { width: 25%; } .pay-lc .pay-lc-list .pay-list-item ul.ul_5 li { width: 20%; } .pay-lc .pay-lc-list .pay-list-item ul li { float: left; padding: 150px 0 150px; position: relative; } .pay-lc .pay-lc-list .pay-list-item ul li:nth-child(1) span:after { background-image: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/fk-bg01.png"); } .pay-lc .pay-lc-list .pay-list-item ul li:nth-child(2) span:after { background-image: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/fk-bg02.png"); } .pay-lc .pay-lc-list .pay-list-item ul li:nth-child(3) span:after { background-image: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/fk-bg03.png"); } .pay-lc .pay-lc-list .pay-list-item ul li:nth-child(4) span:after { background-image: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/fk-bg04.png"); } .pay-lc .pay-lc-list .pay-list-item ul li:nth-child(5) span:after { background-image: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/fk-bg05.png"); } .pay-lc .pay-lc-list .pay-list-item ul li:nth-child(odd) p { position: absolute; left: 0; bottom: 260px; } .pay-lc .pay-lc-list .pay-list-item ul li:nth-child(odd) img { bottom: 23px; } .pay-lc .pay-lc-list .pay-list-item ul li:nth-child(even) p { position: absolute; left: 0; top: 260px; } .pay-lc .pay-lc-list .pay-list-item ul li:nth-child(even) img { top: 23px; } .pay-lc .pay-lc-list .pay-list-item ul li p { font-size: 14px; color: #333; padding: 0 50px; } .pay-lc .pay-lc-list .pay-list-item ul li span { display: block; font-size: 16px; color: #333; text-align: center; height: 80px; line-height: 80px; position: relative; } .pay-lc .pay-lc-list .pay-list-item ul li span:after { content: ''; width: 108%; height: 100%; -moz-background-size: 100% 80px; background-size: 100% 80px; background-repeat: no-repeat; background-position: left center; position: absolute; top: 0; left: 4%; margin-left: -8%; } .pay-lc .pay-lc-list .pay-list-item ul li span em { position: relative; z-index: 2; } .pay-lc .pay-lc-list .pay-list-item ul li img { width: 90px; position: absolute; left: 50%; margin-left: -45px; } .pay-anli { padding-bottom: 50px; background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/fk-bg.jpg") no-repeat center; -moz-background-size: cover; background-size: cover; } .pay-anli ul { background: #fff; position: relative; } .pay-anli ul:before { display: block; content: ''; width: 1px; height: 60%; background: #dbdbdb; position: absolute; left: 50%; top: 20%; } .pay-anli ul li { float: left; width: 50%; padding: 50px 120px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .pay-anli ul li .p-al-img { width: 60px; height: 60px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; background: #f5f5f5; padding: 6px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .pay-anli ul li .p-al-img img { width: 100%; } .pay-anli ul li span { display: block; font-size: 18px; color: #333; font-weight: bold; line-height: 40px; margin: 20px 0; } .pay-anli ul li p { font-size: 14px; color: #999; } .pay-ts { background: #fff !important; } .pay-ts ul li:hover .pay-ts-img { background: #fff; } .pay-ts ul li:hover .pay-ts-img img { display: none; } .pay-ts ul li:hover .pay-ts-img img.i2 { display: block; } .pay-ts ul li:hover p { height: 63px !important; } .pay-ts ul li .pay-ts-img { width: 75px; height: 75px; margin: 0 auto; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; -webkit-transition: all 0.2s; -o-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; } .pay-ts ul li .pay-ts-img img { -webkit-transition: all 0.2s; -o-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; } .pay-ts ul li .pay-ts-img img.i2 { display: none; } .wallet-lc { padding-bottom: 50px; } .wallet-lc .sub-tit { padding: 50px 0 10px; } .wallet-lc .sub-txt { font-size: 14px; text-align: center; letter-spacing: 3px; background: none; } .wallet-lc ul li { float: left; width: 45%; } .wallet-lc ul li:nth-child(1) { margin-right: 10%; } .wallet-lc ul li:nth-child(1) a { background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/wallet-btn01.png") no-repeat center; } .wallet-lc ul li:nth-child(2) a { background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/wallet-btn02.png") no-repeat center; } .wallet-lc ul li a { display: block; height: 119px; position: relative; } .wallet-lc ul li a:after { content: ''; width: 100%; height: 37px; background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/wallet-btnBg.png") no-repeat center; -moz-background-size: 100%; background-size: 100%; position: absolute; left: 0; bottom: -37px; } .wallet-lc ul li a span { display: block; color: #fff; text-align: center; } .wallet-lc ul li a span.ch { font-size: 28px; font-weight: bold; padding-top: 26px; } .wallet-lc .wallet-lc-img { margin-top: 40px; } .wallet-lc .wallet-lc-img img { max-width: 100%; margin: 0 auto; } .wallet-condition { padding-bottom: 10px; background: #f5f5f5; } .wallet-condition ul li { background: #fff !important; } .wallet-condition ul li .kh-c-img { background: #f5f5f5 !important; } .express-lc { padding-bottom: 50px; background: #f5f5f5; } .express-lc ul { position: relative; } .express-lc ul:before { content: ''; width: 100%; height: 2px; border-top: 1px dashed #cecece; position: absolute; top: 38px; } .express-lc ul li { float: left; width: 23%; margin: 0 1%; position: relative; } .express-lc ul li span { display: block; width: 140px; font-size: 14px; color: #333; text-align: center; margin: 0 auto; padding: 15px 0; background: #fff; -webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px; } .express-lc ul li span em { display: block; font-size: 16px; font-weight: bold; } .express-lc ul li p { font-size: 14px; color: #333; height: 42px; padding: 20px; margin-top: 20px; background: #fff; } .express-case { padding-bottom: 50px; } .express-case dl { width: 60%; margin: 0 auto; } .express-case dl dd { float: left; width: 50%; text-align: center; } .express-case dl dd img { margin: 0 auto; } .express-case dl dd span { display: block; font-size: 16px; color: #333; font-weight: bold; margin-top: 20px; } .express-case dl.dl_3 { width: 100%; } .express-case dl.dl_3 dd { width: 33.33%; } .express-tese { background: #f5f5f5; } .express-tese p { background: #fff !important; } .express-cj { padding-bottom: 50px; background: #f5f5f5; } .express-cj .express-cj-list { height: 270px; background: #f5f5f5; position: relative; } .express-cj .express-cj-list .express-cj-item { width: 33.33%; height: 100%; -moz-background-size: cover; background-size: cover; background-repeat: no-repeat; } .express-cj .express-cj-list .express-cj-item .display-table { text-align: center; } .express-cj .express-cj-list .express-cj-item .display-table span { font-size: 18px; color: #fff; font-weight: bold; } .express-cj .express-cj-list ul { width: 74%; height: 100%; padding: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: absolute; top: 0; right: 0; } .express-cj .express-cj-list ul li { float: left; width: 33.33%; height: 100%; text-align: center; background: #fff; position: relative; } .express-cj .express-cj-list ul li:last-child:after { display: none; } .express-cj .express-cj-list ul li:after { content: ''; width: 1px; height: 70%; background: #e5e5e5; position: absolute; top: 15%; right: 0; } .express-cj .express-cj-list ul li .express-cj-img { width: 75px; height: 75px; margin: 0 auto; background: #f5f5f5; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .express-cj .express-cj-list ul li span { display: block; font-size: 16px; color: #333; font-weight: bold; margin-top: 20px; } .inapp-switch .inapp-switch-tit { text-align: center; } .inapp-switch .inapp-switch-tit span { display: inline-block; font-size: 16px; color: #333; font-weight: bold; text-align: center; margin: 0 60px; padding-bottom: 25px; cursor: pointer; position: relative; } .inapp-switch .inapp-switch-tit span.active { font-size: 24px; } .inapp-switch .inapp-switch-tit span.active:before { content: ''; width: 60px; height: 3px; background: #333; position: absolute; left: 50%; bottom: 0; margin-left: -30px; } .inapp-switch .inapp-list .inapp-list-item { display: none; background: #f5f5f5; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 60px; overflow: hidden; } .inapp-switch .inapp-list .inapp-list-item.active { display: block; } .inapp-switch .inapp-list .inapp-list-item p { float: left; text-align: center; } .inapp-switch .inapp-list .inapp-list-item p img { margin: 0 auto; } .inapp-switch .inapp-list .inapp-list-item p span { display: block; font-size: 16px; color: #999; margin-top: 20px; } .inapp-cj ul li .display-table p { height: 63px !important; } .paybylink-cj { padding-bottom: 50px; background: #f5f5f5; } .paybylink-cj .sub-tit { padding: 50px 0 10px; } .paybylink-cj .sub-txt { font-size: 14px; text-align: center; letter-spacing: 3px; background: none; } .paybylink-cj ul { margin-top: 40px; padding: 50px 0; background: #fff; } .paybylink-cj ul li { float: left; width: 20%; text-align: center; position: relative; } .paybylink-cj ul li:last-child:after { display: none; } .paybylink-cj ul li:after { content: ''; width: 1px; height: 80%; background: #e5e5e5; position: absolute; top: 10%; right: 0; } .paybylink-cj ul li .paybylink-cj-icon { width: 75px; height: 75px; background: #f5f5f5; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; margin: 0 auto; } .paybylink-cj ul li span { display: block; font-size: 18px; color: #333; font-weight: bold; margin: 20px 0; } .paybylink-lc { padding-bottom: 50px; } .paybylink-lc .sub-tit { padding: 50px 0 10px; } .paybylink-lc .sub-txt { font-size: 14px; text-align: center; letter-spacing: 3px; background: none; } .paybylink-lc ul { margin-top: 20px; } .paybylink-lc ul li { padding: 30px 0; border-bottom: 1px solid #dbdbdb; } .paybylink-lc ul li:last-child { border: none; padding: 35px 0 0; } .paybylink-lc ul li .paybylink-txt { font-size: 16px; color: #333; padding-left: 20px; position: relative; } .paybylink-lc ul li .paybylink-txt span { display: block; font-size: 18px; color: #333; font-weight: bold; width: 10px; height: 10px; line-height: 46px; text-align: center; background: #333; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; position: absolute; left: 0; top: 50%; margin-top: -5px; overflow: hidden; } .paybylink-lc ul li .dl1 { margin-top: 40px; } .paybylink-lc ul li .dl1 dd { float: left; width: 32.33%; margin: 0.5%; padding: 10px; background: #f5f5f5; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .paybylink-lc ul li .dl1 dd img { width: 100%; } .paybylink-lc ul li .dl1 dd span { display: block; height: 42px; font-size: 14px; color: #666; padding-left: 30px; margin: 20px 0 2px; position: relative; } .paybylink-lc ul li .dl1 dd span em { display: inline-block; font-size: 14px; color: #fff; width: 20px; height: 20px; text-align: center; background: #999; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; position: absolute; left: 0; top: 1px; } .paybylink-lc ul li .paybylink-lc-switch { margin-top: 40px; } .paybylink-lc ul li .paybylink-lc-switch .p-lc-sp { text-align: center; } .paybylink-lc ul li .paybylink-lc-switch .p-lc-sp span { display: inline-block; font-size: 16px; color: #333; font-weight: bold; text-align: center; margin: 0 60px; padding-bottom: 25px; cursor: pointer; position: relative; } .paybylink-lc ul li .paybylink-lc-switch .p-lc-sp span.active { font-size: 18px; } .paybylink-lc ul li .paybylink-lc-switch .p-lc-sp span.active:before { content: ''; width: 60px; height: 3px; background: #333; position: absolute; left: 50%; bottom: 0; margin-left: -30px; } .paybylink-lc ul li .paybylink-lc-switch .p-lc-list { background: #f5f5f5; padding: 50px; } .paybylink-lc ul li .paybylink-lc-switch .p-lc-list .p-lc-item { display: none; } .paybylink-lc ul li .paybylink-lc-switch .p-lc-list .p-lc-item.active { display: block; } .paybylink-lc ul li .paybylink-lc-switch .p-lc-list .p-lc-item .p-lc-img img { margin: 0 auto; } .paybylink-lc ul li .paybylink-lc-switch .p-lc-list .p-lc-item p { font-size: 16px; color: #333; font-weight: bold; text-align: center; margin: 40px 0; } .paybylink-case { padding-bottom: 50px; background: #f5f5f5; } .paybylink-case .sub-tit { padding: 50px 0 10px; } .paybylink-case .sub-txt { font-size: 14px; text-align: center; letter-spacing: 3px; background: none; } .paybylink-case img { max-width: 100%; margin-top: 50px; } .installment-tj { background: none; } .installment-tj ul { border: 1px solid #d6d6d6; } .installment-tj ul li .p-al-img { width: 75px; height: 75px; border: 1px solid #d6d6d6; background: none; } .installment-cj ul li .p-al-img { width: 75px; height: 75px; } .installment-zflc { padding-bottom: 20px; } .installment-zflc .pay-lc-list .pay-list-item ul.ul_4 li p { padding: 0 30px; } .installment-zflc .pay-lc-list .pay-list-item ul.ul_5 li:nth-child(odd) p { position: absolute; left: 0; top: 260px; bottom: inherit; } .installment-zflc .pay-lc-list .pay-list-item ul.ul_5 li:nth-child(odd) img { top: 23px; bottom: inherit; } .installment-zflc .pay-lc-list .pay-list-item ul.ul_5 li:nth-child(even) p { position: absolute; left: 0; bottom: 260px; top: inherit; } .installment-zflc .pay-lc-list .pay-list-item ul.ul_5 li:nth-child(even) img { bottom: 23px; top: inherit; } .installment-zflc .pay-lc-list .pay-list-item ul.ul_5 li p { padding: 0 20px; } .installment-case { padding-bottom: 50px; background: #f5f5f5; } .installment-case .sub-tit { padding: 50px 0 10px; } .installment-case .sub-txt { font-size: 14px; text-align: center; letter-spacing: 3px; background: none; } .installment-case ul { width: 102%; margin-top: 50px; margin-left: -1%; } .installment-case ul li { float: left; width: 48%; margin: 1% 1% 40px; text-align: center; padding: 40px 30px; border: 1px solid #333; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; } .installment-case ul li:nth-child(1) { height: 350px; } .installment-case ul li:nth-child(2) { height: 350px; } .installment-case ul li:nth-child(3) { height: 500px; } .installment-case ul li:nth-child(4) { height: 500px; } .installment-case ul li span { display: inline-block; font-size: 20px; color: #333; line-height: 40px; font-weight: bold; font-style: italic; padding: 0 20px; background: #f5f5f5; position: absolute; top: -20px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .installment-case ul li span strong { float: right; display: inline-block; font-size: 38px; margin-left: 10px; } .installment-case ul li p { font-size: 14px; color: #333; } .installment-case ul li img { margin: 20px auto 0; } .installment-ts { padding-bottom: 50px; } .installment-ts ul li { float: left; width: 19%; height: 360px; margin: 0 0.5%; padding: 40px 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #dbdbdb; } .installment-ts ul li .ins-ts-img { width: 100px; height: 100px; margin: 0 auto; background: #f5f5f5; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .installment-ts ul li span { display: block; font-size: 18px; color: #333; text-align: center; font-weight: bold; line-height: 40px; margin: 20px 0; } .installment-ts ul li p { font-size: 14px; color: #999; } .atm-tj { padding-bottom: 50px; } .atm-tj ul { width: 102%; margin-left: -1%; } .atm-tj ul li { float: left; width: 48%; margin: 0 1%; padding: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: #f5f5f5; } .atm-tj ul li span { display: block; font-size: 18px; color: #333; font-weight: bold; } .atm-tj ul li p { font-size: 14px; color: #333; margin-top: 20px; height: 42px; overflow: hidden; } .atm-cj { padding-bottom: 50px; background: #f5f5f5; } .atm-cj p { font-size: 16px; color: #333; text-align: center; line-height: 28px; padding: 20px 0; background: #fff; } .atm-lc { padding-bottom: 50px; } .atm-lc ul { position: relative; } .atm-lc ul:before { display: block; content: ''; width: 1px; height: 100%; border-left: 1px dashed #ccc; position: absolute; top: 0; left: 12px; } .atm-lc ul li { font-size: 14px; color: #333; line-height: 24px; padding-left: 60px; margin-bottom: 40px; position: relative; } .atm-lc ul li:last-child { margin-bottom: inherit; } .atm-lc ul li span { display: block; font-size: 14px; color: #fff; width: 24px; height: 24px; text-align: center; line-height: 24px; background: #000; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; position: absolute; top: 0; left: 0; } .atm-lc dl { margin-top: 50px; } .atm-lc dl dd { float: left; width: 19%; height: 270px; margin: 0 0.5%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #d2d2d2; position: relative; } .atm-lc dl dd:last-child:after { display: none; } .atm-lc dl dd:after { content: '>'; font-size: 16px; color: #999; font-weight: bold; position: absolute; top: 49%; right: -12px; } .atm-lc dl dd img { margin: 0 auto; padding-top: 120px; } .atm-lc dl dd span { display: block; font-size: 14px; color: #fff; width: 24px; height: 24px; text-align: center; line-height: 24px; background: #000; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; position: absolute; top: 40px; left: 50%; margin-left: -12px; } .atm-pro { padding-bottom: 50px; } .atm-pro ul li { float: left; width: 12%; margin: 0 4%; text-align: center; } .atm-pro ul li .atm-pro-icon { width: 75px; height: 75px; margin: 0 auto; background: #f5f5f5; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .atm-pro ul li p { font-size: 14px; color: #333; margin-top: 20px; } .service-tj { padding-bottom: 50px; } .service-tj ul { width: 102%; margin-left: -1%; } .service-tj ul li { float: left; width: 48%; margin: 0 1%; padding: 50px 0; text-align: center; background: #f5f5f5; } .service-tj ul li .service-tj-icon { width: 75px; height: 75px; margin: 0 auto; background: #fff; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .service-tj ul li span { display: block; font-size: 18px; color: #333; font-weight: bold; margin: 20px 0; } .service-tj ul li p { font-size: 14px; color: #999; margin-top: 20px; } .service-tj.bg-f5 ul li { background: #fff; } .service-lc { padding-bottom: 50px; } .service-lc ul li { float: left; width: 24%; margin: 0 0.5%; text-align: center; } .service-lc ul li:last-child span:after { display: none; } .service-lc ul li span { display: block; font-size: 18px; color: #333; font-weight: bold; position: relative; } .service-lc ul li span:after { content: ''; width: 16px; height: 10px; background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/jt.png") no-repeat center; position: absolute; top: 50%; right: -10px; margin-top: -5px; } .service-lc ul li p { font-size: 14px; color: #666; margin-top: 30px; } .service-lc ul li .service-lc-img { height: 360px; margin-top: 20px; padding: 30px 0; background: #f5f5f5; } .service-lc ul li .service-lc-img img { margin: 0 auto; } .service-case { padding-bottom: 50px; background: #f5f5f5; } .service-case .service-case-img { float: left; width: 48%; } .service-case .service-case-img img { width: 100%; } .service-case .service-case-txt { float: left; width: 48%; padding-left: 4%; position: relative; } .service-case .service-case-txt:before { content: ''; width: 25px; height: 28px; background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/sj3.png") no-repeat center; position: absolute; left: -24px; top: 50%; margin-top: -14px; } .service-case .service-case-txt span { display: block; font-size: 18px; color: #333; font-weight: bold; } .service-case .service-case-txt p { font-size: 14px; color: #333; margin: 30px 0; } .service-case .service-case-txt p strong { font-weight: bold; } .service-tese { padding-bottom: 50px; } .service-tese ul { width: 102%; margin-left: -1%; } .service-tese ul li { float: left; width: 31.33%; margin: 1%; padding: 60px 25px 20px; background: #f5f5f5; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; } .service-tese ul li span { display: block; font-size: 18px; color: #333; font-weight: bold; margin-bottom: 20px; } .service-tese ul li p { font-size: 14px; color: #333; height: 84px; overflow: hidden; } .service-tese ul li em { display: block; font-size: 18px; color: #333; font-weight: bold; position: absolute; top: 20px; left: 25px; } .service-tese ul.ul_2 li { width: 48%; } .equity-cj { padding-bottom: 50px; position: relative; } .equity-cj:after { content: ''; width: 100%; height: 100px; background: #f5f5f5; position: absolute; left: 0; bottom: 0; } .equity-cj ul { width: 102%; margin-left: -1%; position: relative; z-index: 2; } .equity-cj ul li { float: left; width: 31.33%; margin: 0 1%; padding: 40px 0 30px; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #dadada; background: #fff; } .equity-cj ul li .equity-cj-icon { width: 75px; height: 75px; margin: 0 auto; } .equity-cj ul li p { font-size: 14px; color: #333; margin-top: 20px; height: 42px; overflow: hidden; } .service-lc_2 ul li p { height: 63px; } .service-lc_3 .sub-tit { padding: 50px 0 2px; } .service-lc_3 .pattern-tit { font-size: 18px; color: #333; font-weight: bold; text-align: center; width: 390px; height: 45px; line-height: 45px; margin: 40px auto 40px; background: #f5f5f5; -webkit-border-top-left-radius: 20px; -moz-border-radius-topleft: 20px; border-top-left-radius: 20px; -webkit-border-top-right-radius: 20px; -moz-border-radius-topright: 20px; border-top-right-radius: 20px; } .service-lc_3 ul li p { height: 42px; } .service-lc_3 ul li .service-lc-img { height: 100px; background: none; border: 1px solid #d2d2d2; } .service-lc_4 .sub-tit { padding: 50px 0; } .service-lc_4 ul li p { height: 42px; } .service-lc_4 ul li .service-lc-img { height: 100px; background: none; border: 1px solid #d2d2d2; } .offlineQR-cj { padding-bottom: 50px; background: #f5f5f5; } .offlineQR-cj ul { width: 102%; margin-left: -1%; } .offlineQR-cj ul li { float: left; width: 48%; margin: 0 1%; padding: 40px 0 60px; background: #fff; position: relative; } .offlineQR-cj ul li:after { content: ''; width: 100px; height: 1px; background: #b2b2b2; position: absolute; left: 50%; bottom: 40px; margin-left: -50px; } .offlineQR-cj ul li .offline-icon { width: 75px; height: 75px; background: #f5f5f5; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; margin: 0 auto; } .offlineQR-cj ul li p { height: 42px; font-size: 14px; color: #333; text-align: center; margin-top: 30px; } .offline-case { background: #f5f5f5; padding-bottom: 10px; } .offline-case .offline-case-tit { font-size: 18px; color: #333; font-weight: bold; text-align: center; margin-bottom: 40px; } .offline-case ul { width: 102%; margin-left: -1%; margin-bottom: 40px; } .offline-case ul li { float: left; width: 48%; margin: 1%; padding: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: #fff; } .offline-case ul li img { width: 100%; } .offline-case ul li span { display: block; font-size: 14px; color: #333; line-height: 24px; text-align: center; margin-top: 15px; } .program-cj { padding-bottom: 50px; background: #f5f5f5; } .program-cj .program-cj-con .program-cj-img { float: left; width: 50%; } .program-cj .program-cj-con .program-cj-img img { width: 100%; } .program-cj .program-cj-con .program-cj-txt { float: left; width: 50%; padding: 0 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: #fff; } .program-cj .program-cj-con .program-cj-txt p { font-size: 14px; color: #333; } .program-lc { padding-bottom: 50px; } .program-lc .program-lc-img { margin-top: 40px; } .program-lc .program-lc-img img { max-width: 94%; margin: 0 auto; } .program-lc ul { margin-top: 50px; position: relative; } .program-lc ul:before { content: ''; width: 100%; height: 1px; border-top: 1px dashed #d6d6d6; position: absolute; top: 38px; } .program-lc ul li { float: left; width: 19%; margin: 0 0.5%; position: relative; } .program-lc ul li span { width: 60%; display: block; font-size: 14px; color: #333; text-align: center; padding: 15px 0; margin: 0 auto; background: #f5f5f5; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } .program-lc ul li span strong { display: block; font-size: 16px; font-weight: bold; } .program-lc ul li p { font-size: 14px; color: #333; height: 82px; margin-top: 20px; padding: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: #f5f5f5; } .program-case { padding-bottom: 50px; background: #f5f5f5; } .program-case .program-case-tit span { float: left; width: 50%; font-size: 16px; color: #2d5194; font-weight: bold; text-align: center; padding-bottom: 10px; position: relative; } .program-case .program-case-tit span:nth-child(1):after { content: ''; width: 100%; height: 9px; background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/program-line01.png") no-repeat center; -moz-background-size: 100%; background-size: 100%; position: absolute; left: 0; bottom: -10px; } .program-case .program-case-tit span:nth-child(2):after { content: ''; width: 100%; height: 9px; background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/program-line02.png") no-repeat center; -moz-background-size: 100%; background-size: 100%; position: absolute; left: 0; bottom: -10px; } .program-case .program-case-img { margin-top: 40px; } .program-case .program-case-img img { margin: 0 auto; } .program-case dl { width: 84%; margin: 20px auto 0; } .program-case dl dd { float: left; width: 20%; font-size: 14px; color: #2d5194; text-align: center; margin-right: 6.66%; } .program-case dl dd:last-child { margin-right: 0; } .saas-case .saas-case-top { padding: 20px 30px; background: #4572c4; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .saas-case .saas-case-top p { font-size: 16px; color: #fff; overflow: hidden; } .saas-case .saas-case-top p img { float: left; margin-right: 20px; } .saas-case .saas-case-top p span { display: block; font-size: 20px; line-height: 90px; } .saas-case .saas-case-con { background: #f5f5f5; } .saas-case .saas-case-con .saas-case-img { float: left; width: 394px; } .saas-case .saas-case-con .saas-case-img img { width: 100%; } .saas-case .saas-case-con .saas-case-txt { float: left; width: 806px; padding: 25px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .saas-case .saas-case-con .saas-case-txt p { font-size: 16px; color: #666; margin: 20px 0; } .saas-case .saas-case-con .saas-case-txt p strong { color: #333; } .saas-case .saas-case-con .saas-case-txt a { display: inline-block; font-size: 14px; color: #333; line-height: 28px; padding: 0 10px; border: 1px solid #5072be; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .saas-case .saas-case-con .saas-case-txt a:hover { color: #fff; background: #5072be; } .saas-case .saas-case-bot { padding: 20px 0 50px; } .saas-case .saas-case-bot p { font-size: 16px; color: #333; line-height: 26px; } .saas-tese { padding-bottom: 50px; background: #f5f5f5; } .saas-tese ul { width: 102%; margin-left: -1%; } .saas-tese ul li { float: left; width: 48%; height: 260px; margin: 0 1%; padding: 50px; background-repeat: no-repeat; -moz-background-size: cover; background-size: cover; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .saas-tese ul li .kh-c-img { width: 60px; height: 60px; background: #f5f5f5; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .saas-tese ul li span { display: block; font-size: 18px; color: #333; font-weight: bold; margin-top: 30px; position: relative; } .saas-tese ul li span:after { content: ''; width: 80px; height: 1px; background: #c6c4c3; position: absolute; left: 0; bottom: -50px; } .scan-tj ul li { width: 48%; padding: 60px 25px 0px; } .scan-cj { padding-bottom: 50px; background: #f5f5f5; } .scan-cj ul { width: 102%; margin-left: -1%; } .scan-cj ul li { float: left; width: 31.33%; height: 230px; margin: 0 1%; text-align: center; background: #fff; } .scan-cj ul li img { margin: 0 auto; } .scan-cj ul li span { display: block; font-size: 18px; color: #333; font-weight: bold; margin: 20px 0 0; } .scan-case { padding-bottom: 50px; background: #f5f5f5; } .scan-case ul li { height: 240px; padding: 80px; background-repeat: no-repeat; -moz-background-size: cover; background-size: cover; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .scan-case ul li p { font-size: 16px; color: #333; font-weight: bold; padding-top: 50px; position: relative; } .scan-case ul li p:before { content: ''; width: 40px; height: 4px; background: #333; position: absolute; left: 0; top: 0; } .scan-tese { padding-bottom: 50px; } .scan-tese ul li { float: left; width: 33.33%; padding: 0 30px; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .scan-tese ul li .kh-c-img { width: 75px; height: 75px; background: #f5f5f5; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; margin: 0 auto; } .scan-tese ul li span { display: block; font-size: 14px; color: #666; margin-top: 20px; } .payment-sp { padding-top: 40px; text-align: center; position: relative; overflow: hidden; } .payment-sp:after { content: ''; width: 4000px; height: 1px; background: #dbdbdb; position: absolute; left: -1000px; bottom: 0; } .payment-sp span { width: 200px; display: inline-block; font-size: 16px; color: #333; font-weight: bold; text-align: center; padding-bottom: 25px; cursor: pointer; position: relative; } .payment-sp span.active { font-size: 24px; } .payment-sp span.active:before { content: ''; width: 60px; height: 3px; background: #333; position: absolute; left: 50%; bottom: 0; margin-left: -30px; } .payment-cj ul li .p-al-img { width: 75px; height: 75px; } .payment-cj ul li p { font-size: 14px; color: #333; height: 42px; margin-top: 20px; padding-bottom: 40px; position: relative; } .payment-cj ul li p:after { content: ''; width: 100px; height: 1px; background: #b2b2b2; position: absolute; left: 0; bottom: 0; } .payment-cj .payment-cj-txt { font-size: 16px; color: #333; text-align: center; line-height: 28px; padding: 20px 0; background: #f5f5f5; } .payment-list .payment-item { display: none; } .payment-list .payment-item.active { display: block; } .payment-lc .sub-tit { padding: 50px 0 0px; } .payment-lc .pattern-tit { font-size: 18px; color: #333; font-weight: bold; text-align: center; width: 390px; height: 45px; line-height: 45px; margin: 40px auto 40px; background: #f5f5f5; -webkit-border-top-left-radius: 20px; -moz-border-radius-topleft: 20px; border-top-left-radius: 20px; -webkit-border-top-right-radius: 20px; -moz-border-radius-topright: 20px; border-top-right-radius: 20px; } .payment-lc ul { width: 101%; margin-left: -0.5%; } .payment-lc ul.ul_5 li { width: 19%; } .payment-lc ul.ul_3 li { width: 32.33%; } .payment-lc ul.ul_t { padding: 30px; background: #f5f5f5; } .payment-lc ul.ul_t li:last-child p:after { display: none; } .payment-lc ul.ul_t li p { position: relative; } .payment-lc ul.ul_t li p:after { content: ''; width: 1px; height: 100%; background: #dcdcdc; position: absolute; top: 0; right: 0; } .payment-lc ul li p { height: 42px; } .payment-lc ul li .service-lc-img { height: auto; } .payment-lc ul li .service-lc-img img { max-width: 100%; } .payment-lc2 ul li p { height: 42px; } .payment-lc2 ul li .service-lc-img { height: 120px; background: none; border: 1px solid #d2d2d2; } .payment-case { padding-bottom: 50px; background: #f5f5f5; } .payment-case p { font-size: 16px; color: #333; text-align: center; } .payment-case ul { width: 101%; margin-left: -0.5%; margin-top: 40px; } .payment-case ul li { float: left; width: 19%; height: 100px; margin: 0 0.5%; background: #fff; } .payment-case ul li img { max-width: 100%; margin: 0 auto; } .payment-anli { background: #f5f5f5; } .payment-anli ul li { background: #fff; } .payment-anli ul li .service-tj-icon { background: #f5f5f5; } .payment-tese { background: #fff; } .payment-tese ul.ul_3 li { width: 31.33%; } .payment-tese ul li { width: 23%; } .points-case { padding-bottom: 50px; } .points-case ul li { text-align: center; padding: 40px 0; border-bottom: 1px solid #dbdbdb; } .points-case ul li:first-child { padding: 0 0 40px; } .points-case ul li:last-child { padding: 40px 0 0; border: none; } .points-case ul li span { display: inline-block; font-size: 16px; color: #fff; font-weight: bold; letter-spacing: 2px; background: #333; line-height: 50px; padding: 0 20px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; } .points-case ul li p { font-size: 14px; color: #333; margin-top: 30px; text-align: left; } .points-case ul li img { max-width: 100%; margin: 30px auto 0; } .global-bz ul li { width: 49%; } .global-bz ul li span { width: 40%; } .global-bz ul li p { font-size: 14px !important; width: 80%; height: 124px; padding: 20px !important; margin: 20px auto 0; text-align: left !important; } .global-lc { padding-bottom: 50px; } .global-lc img { max-width: 100%; margin: 10px auto 0; } .global-case .service-case-con .service-case-item .service-case-txt { width: 50%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .global-case .service-case-con .service-case-item .service-case-img { width: 50%; } .global-case .service-case-con .service-case-item:nth-child(odd) .service-case-txt { float: left; padding-left: inherit; padding-right: 4%; } .global-case .service-case-con .service-case-item:nth-child(odd) .service-case-txt:before { left: inherit; right: -24px; background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/sj4.png") no-repeat center; } .global-case .service-case-con .service-case-item:nth-child(odd) .service-case-img { float: right; } .global-tese .ul_7 li { width: 23% !important; } .global-tese .ul_7 li span { height: 48px; font-size: 16px !important; } .sense-tj { padding-bottom: 0; } .sense-tj ul { margin-top: 0; } .sense-tj ul li { width: 49%; } .sense-tj ul li span { width: 30%; } .sense-tj ul li p { width: 50%; font-size: 14px !important; text-align: left !important; padding: 20px !important; margin: 20px auto 0; } .sense-lc .program-lc-img { margin-top: 0; } .sense-lc ul li p { height: 124px; } .sense-case { padding-bottom: 50px; background: #f5f5f5; } .sense-case .sense-case-txt { font-size: 16px; color: #333; text-align: center; } .sense-case .sense-case-con { margin-top: 40px; } .sense-case .sense-case-con span { display: block; font-size: 16px; color: #333; font-weight: bold; text-align: center; letter-spacing: 3px; } .sense-case .sense-case-con ul { margin-top: 40px; } .sense-case .sense-case-con ul li { float: left; width: 20%; padding: 0 40px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .sense-case .sense-case-con ul li img { max-width: 100%; margin: 0 auto; } .sense-case .sense-case-con ul li em { display: block; font-size: 14px; color: #fff; font-weight: bold; text-align: center; width: 30px; height: 30px; line-height: 30px; margin: 20px auto; background: #bd3b32; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .sense-case .sense-case-con ul li p { font-size: 14px; color: #333; } .taxrefund-lc ul li { width: 49%; } .taxrefund-lc ul li span { width: 40%; } .taxrefund-lc ul li p { width: 80%; height: 94px; font-size: 14px !important; text-align: left !important; padding: 20px !important; margin: 20px auto 0; } .taxrefund-cj { padding-bottom: 50px; background: #f5f5f5; } .taxrefund-cj img { max-width: 100%; margin-bottom: 30px; } .taxrefund-cj p { font-size: 14px; color: #333; } .taxrefund-case { padding-bottom: 50px; background: #f5f5f5; } .taxrefund-case .taxrefund-case-con span { display: block; font-size: 16px; color: #333; font-weight: bold; text-align: center; letter-spacing: 3px; } .taxrefund-case .taxrefund-case-con .taxrefund-case-txt { font-size: 16px; color: #333; margin-top: 30px; } .taxrefund-case .taxrefund-case-con ul { margin-top: 30px; } .taxrefund-case .taxrefund-case-con ul li { float: left; width: 25%; padding: 0 60px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .taxrefund-case .taxrefund-case-con ul li img { max-width: 100%; } .taxrefund-case .taxrefund-case-con ul li p { font-size: 14px; color: #333; margin-top: 20px; } .taxrefund-tese p { padding: 20px 30px !important; letter-spacing: 1px; text-align: left !important; } .taxrebate-tj { padding-bottom: 50px; } .taxrebate-tj .taxrebate-tj-con { background: #f5f5f5; } .taxrebate-tj .taxrebate-tj-con .taxrebate-tj-img { float: left; width: 50%; } .taxrebate-tj .taxrebate-tj-con .taxrebate-tj-txt { float: left; width: 50%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 50px; position: relative; } .taxrebate-tj .taxrebate-tj-con .taxrebate-tj-txt:before { content: ''; width: 25px; height: 28px; background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/sj3.png") no-repeat center; position: absolute; left: -23px; top: 50%; margin-top: -14px; } .taxrebate-tj .taxrebate-tj-con .taxrebate-tj-txt p { font-size: 14px; color: #333; } .taxrebate-tj.tj2 { background: #f5f5f5; } .taxrebate-tj.tj2 .taxrebate-tj-con { background: #fff; } .taxrebate-tj.tj2 .taxrebate-tj-con .taxrebate-tj-img { float: right; } .taxrebate-tj.tj2 .taxrebate-tj-con .taxrebate-tj-txt:before { content: ''; width: 25px; height: 28px; background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/sj4.png") no-repeat center; position: absolute; left: inherit; right: -23px; top: 50%; margin-top: -14px; } .taxrebate-zf { padding-bottom: 50px; } .taxrebate-zf .taxrebate-lc-img { padding-bottom: 30px; border-bottom: 1px dashed #ebebeb; } .taxrebate-zf .taxrebate-lc-img img { max-width: 100%; margin: 0 auto; } .taxrebate-zf .taxrebate-txt { margin-top: 30px; overflow: hidden; } .taxrebate-zf .taxrebate-txt span { display: block; font-size: 16px; color: #333; font-weight: bold; text-align: center; margin-bottom: 20px; } .taxrebate-zf .taxrebate-txt p { float: left; width: 48%; font-size: 14px; color: #666; text-align: center; } .taxrebate-zf .taxrebate-txt p:last-child { margin-left: 4%; } .taxrebate-zf .taxrebate-txt p a { color: #666; text-decoration: underline; } .b2b-txt { padding-top: 50px; } .b2b-jj p { font-size: 14px; color: #333; text-align: center; padding: 20px; background: #fff; } .b2b-lc { padding-bottom: 50px; } .b2b-lc ul { width: 101%; margin-left: -0.5%; position: relative; } .b2b-lc ul.ul_6 li { width: 15.66%; } .b2b-lc ul:before { content: ''; width: 100%; height: 1px; border-top: 1px dashed #ccc; position: absolute; left: 0; top: 11px; } .b2b-lc ul li { float: left; width: 19%; margin: 0 0.5%; position: relative; } .b2b-lc ul li:last-child .b2b-lc-img:after { display: none; } .b2b-lc ul li span { display: block; font-size: 14px; color: #fff; text-align: center; line-height: 24px; margin: 0 auto; width: 24px; height: 24px; background: #000; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .b2b-lc ul li p { font-size: 14px; color: #666; text-align: center; height: 42px; margin-top: 30px; overflow: hidden; } .b2b-lc ul li .b2b-lc-img { margin-top: 20px; padding: 30px 0; border: 1px solid #d2d2d2; position: relative; } .b2b-lc ul li .b2b-lc-img:after { content: '>'; font-size: 14px; color: #999; font-weight: bold; position: absolute; right: -11px; top: 50%; margin-top: -6px; } .b2b-lc ul li .b2b-lc-img img { margin: 0 auto; } .b2b-ys { background: #f5f5f5; padding-bottom: 50px; } .b2b-ys ul { width: 101%; margin-left: -0.5%; } .b2b-ys ul li { float: left; width: 24%; height: 320px; margin: 0 0.5%; background-repeat: no-repeat; background-position: center; -moz-background-size: 100% 100%; background-size: 100% 100%; -webkit-transition: all 0.2s; -o-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; } .b2b-ys ul li:hover { -moz-background-size: 110% 110%; background-size: 110% 110%; } .b2b-ys ul li .display-table { padding: 30px; background: rgba(0, 0, 0, 0.4); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .b2b-ys ul li span { display: block; font-size: 18px; color: #fff; text-align: center; font-weight: bold; line-height: 40px; position: relative; } .b2b-ys ul li p { font-size: 14px; color: #fff; margin-top: 20px; } .b2b-ys-list { background: #f5f5f5; padding-bottom: 50px; } .b2b-ys-list ul { width: 102%; margin-left: -1%; } .b2b-ys-list ul li { float: left; width: 31.33%; height: 230px; margin: 1%; background: #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .b2b-ys-list ul li .b2b-ys-icon { width: 80px; height: 80px; background: #f5f5f5; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; margin: 45px auto 0; } .b2b-ys-list ul li p { font-size: 16px; color: #333; font-weight: bold; text-align: center; margin-top: 20px; } .b2b-zf { padding: 50px 0; } .b2b-zf .b2b-zf-con { width: 102%; margin-left: -1%; } .b2b-zf .b2b-zf-con .b2b-zf-item { float: left; width: 48%; margin: 0 1%; padding: 50px 20px 20px; background: #f5f5f5; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .b2b-zf .b2b-zf-con .b2b-zf-item span { display: block; font-size: 18px; color: #333; font-weight: bold; text-align: center; } .b2b-zf .b2b-zf-con .b2b-zf-item p { font-size: 14px; color: #333; text-align: center; margin-top: 20px; } .b2b-zf .b2b-zf-con .b2b-zf-item ul { padding: 10px 0 30px; margin-top: 40px; background: #fff; } .b2b-zf .b2b-zf-con .b2b-zf-item ul.ul_3 li { width: 31.33%; } .b2b-zf .b2b-zf-con .b2b-zf-item ul.ul_4 li { width: 23%; } .b2b-zf .b2b-zf-con .b2b-zf-item ul li { float: left; margin: 0 1%; padding: 0 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .b2b-zf .b2b-zf-con .b2b-zf-item ul li:last-child .b2b-zf-icon:after { display: none; } .b2b-zf .b2b-zf-con .b2b-zf-item ul li p { font-size: 12px; color: #333; text-align: center; height: 35px; overflow: hidden; } .b2b-zf .b2b-zf-con .b2b-zf-item ul li .b2b-zf-icon { margin-top: 30px; position: relative; } .b2b-zf .b2b-zf-con .b2b-zf-item ul li .b2b-zf-icon:after { content: ''; width: 16px; height: 10px; background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/jt.png") no-repeat center; position: absolute; top: 50%; right: -11px; margin-top: -5px; } .b2b-zf .b2b-zf-con .b2b-zf-item ul li .b2b-zf-icon img { margin: 0 auto; } .special-wrap { padding: 70px 0; background: #f8f8f8; } .special-wrap .special-con { margin: 40px 0; } .special-wrap .special-con h4 { font-size: 18px; color: #333; font-weight: bold; margin-bottom: 30px; border-left: 6px solid #dab68e; } .special-wrap .special-con .special-item { position: relative; background: #fff; -webkit-box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2); -moz-box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2); box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2); } .special-wrap .special-con .special-item .special-item-swiper { float: left; width: 480px; } .special-wrap .special-con .special-item .special-item-swiper .swiper-slide img { width: 100%; } .special-wrap .special-con .special-item .special-item-swiper .swiper-pagination { display: inline-block; width: auto; color: #fff; padding: 5px 20px; background: #d3ac80; -webkit-border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; border-top-left-radius: 10px; right: 0; left: inherit; bottom: 0; } .special-wrap .special-con .special-item .special-item-swiper .swiper-pagination span { color: #fff; } .special-wrap .special-con .special-item .special-item-swiper .swiper-pagination span.swiper-pagination-current { font-size: 18px; } .special-wrap .special-con .special-item .special-item-hs { float: left; width: 720px; height: 100%; padding: 0 50px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: absolute; top: 0; right: 0; } .special-wrap .special-con .special-item .special-item-hs ul li { padding: 10px 0; border-top: 1px solid #f5f5f5; } .special-wrap .special-con .special-item .special-item-hs ul li:first-child { border: none; } .special-wrap .special-con .special-item .special-item-hs ul li img { float: left; width: 116px; margin-right: 30px; } .special-wrap .special-con .special-item .special-item-hs ul li .s-hl { float: left; font-size: 18px; color: #333; font-weight: bold; padding-top: 10px; } .special-wrap .special-con .special-item .special-item-hs ul li .s-hl span { display: block; font-size: 14px; color: #999; font-weight: normal; } .special-wrap .special-con .special-item .special-item-hs ul li .s-s-d { float: left; font-size: 26px; color: #e0bd99; margin: 0 60px; padding-top: 15px; } .special-wrap .special-con .special-item .special-item-hs ul li .s-hl { float: left; font-size: 18px; color: #333; font-weight: bold; } .special-wrap .special-con .special-item .special-item-hs ul li .s-hl em { font-size: 14px; } .special-wrap .special-con .special-item .special-item-hs ul li .s-hl span { display: block; font-size: 14px; color: #999; font-weight: normal; } .special-wrap .special-con .special-link { margin-top: 20px; } .special-wrap .special-con .special-link a { display: inline-block; font-size: 16px; color: #333; font-weight: bold; padding-right: 60px; background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/special-link.png") no-repeat center right; -moz-background-size: 42px; background-size: 42px; } .special-wrap .special-sm { padding: 30px; margin-top: 80px; background: #fff; } .special-wrap .special-sm h4 { font-size: 18px; color: #333; font-weight: bold; margin-bottom: 30px; text-indent: 10px; border-left: 6px solid #dab68e; } .special-wrap .special-sm span { display: block; font-size: 16px; color: #333; font-weight: bold; margin-bottom: 20px; } .special-wrap .special-sm p { font-size: 14px; color: #333; margin: 5px 0; } .special-wrap .special-sm .ts { font-size: 14px; color: #c79f6b; margin: 5px 0; } .special-wrap .special-sm .ck { font-size: 14px; color: #999; margin: 5px 0; } .special-wrap .special-no { margin: 100px 0; } .special-wrap .special-no img { margin: 0 auto; } /*han*/ .han-sub-banner { width: 100%; margin-top: 81px; position: relative; } .han-sub-banner img { width: 100%; } .han-crumbs { width: 100%; height: 45px; background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/han/crumbs-bg.png") no-repeat center; position: absolute; left: 0; bottom: 50px; } .han-crumbs ul { padding: 0 150px; } .han-crumbs ul li { float: left; font-size: 14px; color: #999; margin-right: 10px; } .han-crumbs ul li:last-child a { color: #333; } .han-crumbs ul li a { display: inline-block; font-size: 14px; color: #999; } .han-crumbs ul li a.homeLink { padding-left: 25px; background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/home-icon.png") no-repeat center left; -moz-background-size: 18px; background-size: 18px; } .han-wrap .han-item { margin: 80px 0; } .han-wrap .han-title { font-size: 16px; color: #333; font-weight: bold; text-align: center; line-height: 46px; margin-bottom: 60px; background: #e5e5e5; } .han-wrap .han-item-con .han-item-l { float: left; width: 320px; margin-right: 30px; } .han-wrap .han-item-con .han-item-l img { width: 100%; } .han-wrap .han-item-con .han-item-l .han-video { width: 100%; height: 473px; } .han-wrap .han-item-con .han-item-l .han-video .video-js { width: 100%; height: 100%; background: #fff !important; } .han-wrap .han-item-con .han-item-l .han-video .video-js .vjs-big-play-button { width: 72px; height: 72px; line-height: 64px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; border: 4px solid #fff; background-color: transparent; top: 50%; left: 50%; margin: -32px 0 0 -32px; } .han-wrap .han-item-con .han-item-l .han-video .video-js .vjs-poster { -moz-background-size: 100% !important; background-size: 100% !important; } .han-wrap .han-item-con .han-item-r { float: left; width: 850px; } .han-wrap .han-item-con .han-item-r .t-p-txt { font-size: 14px; color: #333; margin-bottom: 40px; } .han-wrap .han-item-con .han-item-r h4 { font-size: 16px; color: #333; font-weight: bold; } .han-wrap .han-item-con .han-item-r p { font-size: 14px; color: #333; } .han-wrap .han-item-con .han-item-r .ul-img { width: 102%; margin-top: 80px; margin-left: -1%; } .han-wrap .han-item-con .han-item-r .ul-img li { float: left; width: 31.33%; margin: 0 1%; } .han-wrap .han-item-con .han-item-r .ul-img li img { width: 100%; } .han-wrap .han-item-con .han-item-r .li-b-txt { font-size: 16px; color: #333; font-weight: bold; text-align: center; margin-top: 15px; } .han-wrap .han-item-con .han-item-r .han-link a { display: inline-block; width: 285px; height: 50px; font-size: 16px; color: #fff; font-weight: bold; text-align: center; line-height: 50px; background: #424242; margin-top: 40px; } .han-jsCon { margin-top: 80px; } .han-jsCon .han-crumbs { position: inherit; left: inherit; bottom: inherit; padding-top: 15px; } .han-jsCon .han-crumbs ul { padding-left: 0; } .han-jsCon .h-js-top { margin-bottom: 40px; } .han-jsCon .h-js-top .h-js-title { font-size: 20px; color: #333; font-weight: bold; margin-bottom: 50px; } .han-jsCon .h-js-top h2 { font-size: 20px; color: #333; font-weight: bold; border-bottom: 1px solid #333; padding-bottom: 5px; } .han-jsCon .h-js-top .h-js-item { margin-top: 50px; } .han-jsCon .h-js-top .h-js-item .h-js-img { float: left; width: 320px; } .han-jsCon .h-js-top .h-js-item .h-js-img img { width: 100%; } .han-jsCon .h-js-top .h-js-item .h-js-txt { float: left; width: 830px; margin-left: 50px; } .han-jsCon .h-js-top .h-js-item .h-js-txt p { font-size: 14px; color: #333; font-weight: bold; margin-bottom: 20px; } .han-jsCon .h-js-top .h-a-md { margin-top: 40px; } .han-jsCon .h-js-top .h-a-md ul li { float: left; width: 190px; margin-right: 12px; } .han-jsCon .h-js-top .h-a-md ul li:last-child { margin: 0; } .han-jsCon .h-js-top .h-a-md ul li a { display: block; } .han-jsCon .h-js-top .h-a-md ul li a img { width: 100%; } .han-jsCon .h-js-bot { padding-bottom: 50px; margin-top: 50px; } .han-jsCon .h-js-bot.h-js-bot-a table tbody tr:nth-child(5) { border-bottom: none; } .han-jsCon .h-js-bot.h-js-bot-a table tbody tr:nth-child(5) td:nth-child(1) { vertical-align: top; padding-top: 150px; } .han-jsCon .h-js-bot.h-js-bot-a table tbody tr:nth-child(5) td:nth-child(2) { vertical-align: top; padding-top: 80px; } .han-jsCon .h-js-bot.h-js-bot-a table tbody tr:nth-child(6) { border-bottom: none; } .han-jsCon .h-js-bot.h-js-bot-a table tbody tr:nth-child(6) td:nth-child(2) { vertical-align: top; padding-top: 140px; } .han-jsCon .h-js-bot.h-js-bot-a table tbody tr:nth-child(6) td:nth-child(3) { border-top: 2px solid #a6a6a6; } .han-jsCon .h-js-bot.h-js-bot-b table tbody tr:last-child { border-bottom: none; } .han-jsCon .h-js-bot.h-js-bot-b table tbody tr:last-child td:nth-child(1) { vertical-align: top; padding-top: 150px; } .han-jsCon .h-js-bot.h-js-bot-b table tbody tr:last-child td:nth-child(2) { vertical-align: top; padding-top: 80px; } .han-jsCon .h-js-bot h2 { font-size: 18px; color: #333; font-weight: bold; border-bottom: 1px solid #333; padding-bottom: 5px; } .han-jsCon .h-js-bot table { width: 100%; margin-top: 30px; } .han-jsCon .h-js-bot table thead tr th { font-size: 14px; color: #004b82; text-align: center; font-weight: bold; line-height: 55px; background: #ebebeb; } .han-jsCon .h-js-bot table tbody tr { border-bottom: 1px solid #a6a6a6; } .han-jsCon .h-js-bot table tbody tr td { padding: 40px 0; vertical-align: middle; } .han-jsCon .h-js-bot table tbody tr td:last-child img { margin: inherit; } .han-jsCon .h-js-bot table tbody tr td img { max-width: 100%; margin: 0 auto; } .han-jsCon .h-js-bot table tbody tr td img.img2 { margin: 40px 0 0; } .han-jsCon .h-js-bot table tbody tr td span { display: block; } .han-jsCon .h-js-bot table tbody tr td span a { display: inline-block; font-size: 14px; color: #999; font-weight: bold; line-height: 40px; padding-left: 55px; background: url("https://www.unionpayintl.com/imp_file/hk/hk/static/images/han/han-add.png") no-repeat center left; } .han-jsCon .h-js-bot table tbody tr td .l { display: inline-block; width: 106px; height: 45px; line-height: 45px; font-size: 16px; color: #fff; font-weight: bold; text-align: center; background: #004a82; } /*han end*/ /* ===== css_pop_up.css ===== */ .pop_back { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, .5); z-index: 1000; } .pop_up { position: fixed; top: 30%; left: 50%; transform: translateX(-50%); background-color: #fff; width: 510px; height: auto; border-radius: 12px; } .pop_up .pop_close { display: flex; justify-content: flex-end; margin-right: 14px; margin-top: 14px; cursor: pointer; } .pop_up .pop_close img { display: block; } .pop_up p { font-size: 16px; color: #222; line-height: 30px; padding: 10px 40px 30px; margin: 0; } .pop_up p a { font-size: 16px; margin: 0; color: blue; } .pop_up>h5 { font-size: 26px; font-weight: bold; color: red; text-align: center; margin: 5px 0 0 0; }