@font-face {
    font-family:'Lato';src:url("/hk/diamond/themes/unionpay/css/fonts/Lato-Thin.eot");src:url("/hk/diamond/themes/unionpay/css/fonts/Lato-Thind41d.eot") format("embedded-opentype"),url("/hk/diamond/themes/unionpay/css/fonts/Lato-Thin.woff") format("woff"),url("/hk/diamond/themes/unionpay/css/fonts/Lato-Thin.ttf") format("truetype"),url("/hk/diamond/themes/unionpay/css/fonts/Lato-Thin.svg") format("svg");font-weight:100;font-style:normal
}

@font-face {
    font-family:'Lato';src:url("/hk/diamond/themes/unionpay/css/fonts/Lato-Light.eot");src:url("/hk/diamond/themes/unionpay/css/fonts/Lato-Lightd41d.eot") format("embedded-opentype"),url("/hk/diamond/themes/unionpay/css/fonts/Lato-Light.woff") format("woff"),url("/hk/diamond/themes/unionpay/css/fonts/Lato-Light.ttf") format("truetype"),url("/hk/diamond/themes/unionpay/css/fonts/Lato-Light.svg") format("svg");font-weight:300;font-style:normal
}

@font-face {
    font-family:'Lato';src:url("/hk/diamond/themes/unionpay/css/fonts/Lato-Regular.eot");src:url("/hk/diamond/themes/unionpay/css/fonts/Lato-Regulard41d.eot") format("embedded-opentype"),url("/hk/diamond/themes/unionpay/css/fonts/Lato-Regular.woff") format("woff"),url("/hk/diamond/themes/unionpay/css/fonts/Lato-Regular.ttf") format("truetype"),url("/hk/diamond/themes/unionpay/css/fonts/Lato-Regular.svg") format("svg");font-weight:400;font-style:normal
}

@font-face {
    font-family:'Lato';src:url("/hk/diamond/themes/unionpay/css/fonts/Lato-Bold.eot");src:url("/hk/diamond/themes/unionpay/css/fonts/Lato-Boldd41d.eot") format("embedded-opentype"),url("/hk/diamond/themes/unionpay/css/fonts/Lato-Bold.woff") format("woff"),url("/hk/diamond/themes/unionpay/css/fonts/Lato-Bold.ttf") format("truetype"),url("/hk/diamond/themes/unionpay/css/fonts/Lato-Bold.svg") format("svg");font-weight:bold;font-style:normal
}

@font-face {
    font-family:'icomoon';src:url("/hk/diamond/themes/unionpay/css/fonts/icomoon6a2b.eot");src:url("/hk/diamond/themes/unionpay/css/fonts/icomoon6a2b.eot") format("embedded-opentype"),url("/hk/diamond/themes/unionpay/css/fonts/icomoon6a2b.ttf") format("truetype"),url("/hk/diamond/themes/unionpay/css/fonts/icomoon6a2b.woff") format("woff"),url("/hk/diamond/themes/unionpay/css/fonts/icomoon6a2b.svg") format("svg");font-weight:normal;font-style:normal
}[class^="icon-"],[class*=" icon-"] {
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}[data-icon]:before {
     font-family: "icomoon" !important;
     content: attr(data-icon);
     font-style: normal !important;
     font-weight: normal !important;
     font-variant: normal !important;
     text-transform: none !important;
     speak: none;
     line-height: 1;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale
 }[class^="icon-"]:before,[class*=" icon-"]:before {
      font-family: "icomoon" !important;
      font-style: normal !important;
      font-weight: normal !important;
      font-variant: normal !important;
      text-transform: none !important;
      speak: none;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale
  }

.icon-art:before {
    content: "\61"
}

.icon-dining:before {
    content: "\62"
}

.icon-entertainment:before {
    content: "\63"
}

.icon-facebook:before {
    content: "\64"
}

.icon-home:before {
    content: "\65"
}

.icon-living:before {
    content: "\66"
}

.icon-shopping:before {
    content: "\68"
}

.icon-travel:before {
    content: "\69"
}

.icon-wellness:before {
    content: "\6a"
}

.icon-rewards:before {
    content: "\67"
}

.icon-bank-list:before {
    content: "\6b"
}

.section {
    background-color: #edede5
}

.m_floatingBox {
    display: none
}

#section-home .content {
    overflow: hidden
}

#section-home .content::before,#section-home .content::after {
    z-index: 1002;
    content: " ";
    position: absolute;
    display: block;
    top: 0px;
    left: -80px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 320px 80px 0 80px;
    border-color: #edede3 transparent transparent transparent
}

#section-home .content::after {
    top: auto;
    bottom: 0px;
    left: auto;
    right: 0px;
    border-width: 0 0px 250px 62px;
    border-color: transparent transparent #edede3 transparent
}

#section-home .content .prevBtn,#section-home .content .nextBtn {
    z-index: 1002;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    position: absolute;
    top: 45%;
    width: 160px;
    height: 90px;
    background: #ffffff;
    -webkit-box-shadow: 5px 5px 20px rgba(0,0,0,0.2);
    box-shadow: 5px 5px 20px rgba(0,0,0,0.2);
    cursor: pointer
}

#section-home .content .prevBtn img,#section-home .content .nextBtn img {
    position: absolute;
    top: 9px;
    left: 77px;
    width: 72px;
    height: 72px
}

#section-home .content .prevBtn .icon-left,#section-home .content .prevBtn .icon-right,#section-home .content .nextBtn .icon-left,#section-home .content .nextBtn .icon-right {
    position: absolute;
    width: 20px;
    height: 45px
}

#section-home .content .prevBtn .icon-left,#section-home .content .nextBtn .icon-left {
    top: 11px;
    left: 27px;
    background-image: url("/hk/diamond/themes/unionpay/images/arrow_prev.jpg")
}

#section-home .content .prevBtn .icon-left::after,#section-home .content .nextBtn .icon-left::after {
    font-family: "Lato",Arial,sans-serif,Verdana,Helvetica;
    content: attr(data-text);
    font-size: 12px;
    color: #ccc;
    position: absolute;
    top: 58px;
    left: -18px;
    width: 60px;
    text-align: center
}

#section-home .content .prevBtn .icon-right,#section-home .content .nextBtn .icon-right {
    top: 11px;
    right: 27px;
    background-image: url("/hk/diamond/themes/unionpay/images/arrow_next.jpg")
}

#section-home .content .prevBtn .icon-right::after,#section-home .content .nextBtn .icon-right::after {
    font-family: "Lato",Arial,sans-serif,Verdana,Helvetica;
    content: attr(data-text);
    font-size: 12px;
    color: #ccc;
    position: absolute;
    top: 58px;
    left: -18px;
    width: 60px;
    text-align: center
}

#section-home .content .prevBtn {
    left: 0px
}

#section-home .content .prevBtn:hover {
    left: -10px !important
}

#section-home .content .nextBtn {
    left: auto;
    right: 0px;
    -webkit-box-shadow: -5px 5px 20px rgba(0,0,0,0.2);
    box-shadow: -5px 5px 20px rgba(0,0,0,0.2)
}

#section-home .content .nextBtn img {
    position: absolute;
    top: 9px;
    left: 11px;
    width: 72px;
    height: 72px
}

#section-home .content .nextBtn:hover {
    right: -10px !important
}

#section-home .content .m_prevBtn,#section-home .content .m_nextBtn {
    cursor: pointer;
    display: none
}

#section-home .content #mainSlider {
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease
}

#section-home .content #mainSlider .slick-list {
    height: 100%;
    position: relative;
    overflow: hidden
}

#section-home .content #mainSlider .slick-list .slick-track {
    height: 100%;
    position: relative;
    overflow: hidden
}

#section-home .content #mainSlider .slick-list .item {
    width: 100%;
    height: 100%;
    overflow: hidden
}

#section-home .content #mainSlider .slick-list .item .banner {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-position: center center;
    background-size: cover
}

#section-home .content #mainSlider .slick-list .item .banner img {
    width: 1920px;
    max-width: 1920px;
    height: 1080px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -960px;
    margin-top: -540px
}

#section-home .content #mainSlider .slick-dots {
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    bottom: 13%
}

#section-home .content #mainSlider .slick-dots li {
    margin: 0 10px
}

#section-home .content #mainSlider .slick-dots li button:before {
    color: white;
    font-size: 12px;
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

#section-home .content #mainSlider .slick-dots li.slick-active button:before {
    opacity: 1
}

#section-home .content #mainSlider .slick-prev,#section-home .content #mainSlider .slick-next {
    display: none !important
}

#section-home .content .black {
    width: 100%;
    position: absolute;
    height: 170px;
    bottom: 0px;
    left: 0px;
    background-image: url("/hk/diamond/themes/unionpay/images/overlay_bottom.png")
}

@media (max-width: 991px) {
    #section-home .content .black {
        display: none
    }
}

#section-home .content .slogan {
    width: 100%;
    position: absolute;
    top: 50%;
    right: 50%;
    -webkit-transform: translate(50%, -50%);
    transform: translate(50%, -50%);
    z-index: 2;
    letter-spacing: -0.05em;
    font-size: 4em
}

#section-home .content .slogan .title {
    width: 100%;
    color: #ffffff;
    position: relative;
    text-align: center;
    font-weight: 300;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out
}

#section-home .content .slogan .title em {
    font-style: normal;
    font-weight: bold;
    margin-left: 7px
}

#section-home .content .slogan.color-white .title,#section-home .content .slogan.color-white .desc {
    color: #ffffff
}

#section-home .content .slogan.color-black .title,#section-home .content .slogan.color-black .desc {
    color: #000000
}

#section-home .content .slogan.color-gold .title,#section-home .content .slogan.color-gold .desc {
    color: #A57743
}

#section-home .content .slogan.color-entertainment .title,#section-home .content .slogan.color-entertainment .desc {
    color: #0d928d
}

#section-home .content .slogan.color-travel .title,#section-home .content .slogan.color-travel .desc {
    color: #2c5c9e
}

#section-home .content .slogan.color-wellness .title,#section-home .content .slogan.color-wellness .desc {
    color: #5597D1
}

#section-home .content .slogan.color-living .title,#section-home .content .slogan.color-living .desc {
    color: #5dc3ad
}

#section-home .content .slogan.color-shopping .title,#section-home .content .slogan.color-shopping .desc {
    color: #ed1a3b
}

#section-home .content .slogan.color-shopping .title,#section-home .content .slogan.color-shopping .desc {
    color: #ed1a3b
}

#section-home .content .slogan.color-dining .title,#section-home .content .slogan.color-dining .desc {
    color: #f58472
}

#section-home .content .slogan.color-rewards .title,#section-home .content .slogan.color-rewards .desc {
    color: #A57743
}

#section-home .content .slogan.color-home .title,#section-home .content .slogan.color-home .desc {
    color: #9C7141
}

#section-home .content .slogan .desc {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    font-size: 0.6em;
    color: #ffffff;
    position: relative;
    text-align: center;
    font-weight: 300;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out
}

#section-home .content .floatingBox {
    bottom: 3%;
    left: 4%;
    color: #ab6e30;
    font-weight: 100;
    position: absolute;
    display: inline-block
}

#section-home .content .floatingBox img {
    float: left
}

#section-home .content .floatingBox .text {
    float: left;
    height: 86px;
    padding: 8px 20px;
    background-color: #ffffff
}

#section-home .content .floatingBox .text .title {
    margin-bottom: 6px
}

#section-home .content .floatingBox .text .title span {
    display: block
}

#section-home .content .floatingBox .text .square-button {
    font-size: 12px;
    color: #ab6e30;
    border: solid #ab6e30 1px;
    height: 27px;
    bottom: 1px;
    line-height: 18px;
    left: auto;
    width: 82px;
    font-weight: 400;
    position: relative
}

#section-home .content .floatingBox .text .square-button a {
    color: #ab6e30
}

#section-home .content .floatingBox .text .square-button.button--wayra::before {
    background: #a57743
}

#section-home .content .floatingBox .close {
    width: 37px;
    height: 86px;
    float: right;
    background-image: url("/hk/diamond/themes/unionpay/images/banner/thumb_floatimg_bg.png")
}

#section-home .content .floatingBox .close .close-btn {
    cursor: pointer;
    position: absolute;
    right: 14px;
    top: 12px;
    width: 16px;
    height: 16px;
    opacity: 0.5
}

#section-home .content .floatingBox .close .close-btn:hover {
    opacity: 1
}

#section-home .content .floatingBox .close .close-btn::before,#section-home .content .floatingBox .close .close-btn::after {
    position: absolute;
    left: 5px;
    content: ' ';
    height: 18px;
    width: 1px;
    background-color: #565656
}

#section-home .content .floatingBox .close .close-btn::before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

#section-home .content .floatingBox .close .close-btn::after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

#section-home .content .phoneBox {
    display: none;
    position: absolute;
    color: #ffffff;
    right: 8%;
    bottom: 3%;
    text-shadow: 0px 0px 6px #212121
}

#section-home .content .phoneBox .title {
    text-align: right
}

#section-home .content .phoneBox .title img {
    display: inline-block;
    margin-right: 10px
}

#section-home .content .phoneBox span {
    font-size: 36px;
    font-weight: 100;
    float: right
}

#section-home .content #arrowDown {
    z-index: 1002;
    -webkit-animation: MoveUpDown 2s linear infinite;
    animation: MoveUpDown 2s linear infinite;
    width: 208px;
    height: 41px;
    position: absolute;
    bottom: 6%;
    left: 50%;
    margin-left: -104px;
    background-image: url("/hk/diamond/themes/unionpay/images/arrow_down.png")
}

.zh #section-home .content #arrowDown {
    background-image: url("/hk/diamond/themes/unionpay/images/arrow_down_zh.png")
}

.zh #section-home .content .floatingBox .text .square-button a {
    line-height: 25px
}

#section-home .content .floatingBox .text .square-button a {
    line-height: 25px
}

#section-bank-list {
    background-color: #F7FAF7
}

#section-bank-list .content {
    position: relative;
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    max-width: 1200px;
    margin: 0 auto;
    height: 100%
}

#section-bank-list .content .title {
    width: 100%;
    height: auto;
    margin-top: 5%;
    padding-top: 70px;
    font-size: 36px;
    color: #A57743;
    display: inline-block;
    line-height: 21px;
    margin-bottom: 10px;
    font-weight: 300
}

#section-bank-list .content .title em {
    font-style: normal;
    font-size: 16px;
    display: inline-block;
    color: #878787;
    width: 100%;
    font-weight: 400
}

#section-bank-list .content .list-content {
    width: 100%;
    height: auto;
    color: #CEBFB3;
    font-size: 24px;
    font-weight: 100
}

#section-bank-list .content .list-content span {
    width: 70%;
    display: inline-block
}

#section-bank-list .content .square-button {
    width: 20%;
    position: absolute;
    top: 14%;
    right: 0px;
    left: auto;
    padding: 32px 0px;
    text-align: center;
    border-color: #956330;
    border: 1px solid #956330
}

#section-bank-list .content .square-button:hover span {
    color: #ffffff
}

#section-bank-list .content .square-button span {
    font-size: 16px;
    font-weight: 400;
    color: #956330;
    line-height: 64px;
    width: 100%
}

#section-bank-list .content .square-button::before {
    background: #956330
}

#section-bank-list .content .card-content {
    width: 100%;
    margin-top: 60px;
    height: 420px
}

#section-bank-list .content .card-content .nano-content {
    width: 105%;
    height: 420px
}

#section-bank-list .content .card-content .nano-content .content {
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
    padding-right: 10px;
    right: -17px
}

#section-bank-list .content .card-content .left,#section-bank-list .content .card-content .right {
    float: left;
    width: 45%;
    margin-right: 5%
}

#section-bank-list .content .card-content .card .cardTitle {
    width: 100%;
    float: left;
    font-size: 32px;
    font-weight: 300;
    color: #AC7438
}

#section-bank-list .content .card-content .card .imageBox {
    width: 100%;
    float: left;
    margin-top: 20px
}

#section-bank-list .content .card-content .card .imageBox img {
    width: 135px;
    height: 150px
}

#section-bank-list .content .card-content .card .listBox {
    width: 100%
}

#section-bank-list .content .card-content .card .listBox .col {
    width: 40%;
    margin-right: 10%;
    float: left
}

#section-bank-list .content .card-content .card .listBox .col .title {
    padding-top: 10px;
    margin-top: 0%;
    width: 100%;
    color: #545454;
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 20px
}

#section-bank-list .content .card-content .card .listBox .col ul li {
    color: #878787;
    font-size: 14px;
    margin-bottom: 5px
}

#section-bank-list .content .card-content .card .listBox .col p {
    color: #878787;
    font-size: 14px;
    margin-bottom: 5px
}

.sub-section .content .sub-header {
    margin-top: 0%;
    width: 100%;
    position: relative;
    max-height: 330px
}

.sub-section .content .sub-header .bg {
    width: 100%
}

.sub-section .content .sub-header .bg img {
    display: block;
    margin: 0 auto
}

.sub-section .content .sub-header .image {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    margin-top: 2.5%
}

.sub-section .content .sub-header .image img {
    display: block;
    margin: 0 auto
}

.sub-section .content .subSlider {
    margin: 0 auto;
    margin-top: 0%;
    display: block;
    width: 90%;
    max-width: 1200px
}

.sub-section .content .subSlider .slick-prev {
    height: 60px;
    width: 23px;
    overflow: hidden
}

.sub-section .content .subSlider .slick-prev::before {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 1
}

.sub-section .content .subSlider .slick-prev:hover::before {
    top: -60px
}

.sub-section .content .subSlider .slick-next {
    height: 60px;
    width: 23px;
    overflow: hidden
}

.sub-section .content .subSlider .slick-next::before {
    position: absolute;
    right: 0;
    top: 0;
    opacity: 1
}

.sub-section .content .subSlider .slick-next:hover::before {
    top: -60px
}

.sub-section .content .subSlider .slick-list {
    padding: 0 20px;
    position: relative
}

.sub-section .content .subSlider .slick-list::before {
    content: " ";
    position: absolute;
    height: 100%;
    width: 40px;
    z-index: 2001;
    left: -4px;
    background: rgba(255,255,255,0);
    background: -webkit-gradient(linear, right top, left top, from(rgba(255,255,255,0)),color-stop(70%, #edede5));
    background: linear-gradient(to left, rgba(255,255,255,0) 0%,#edede5 70%)
}

.sub-section .content .subSlider .slick-list::after {
    content: " ";
    position: absolute;
    height: 100%;
    width: 40px;
    z-index: 2001;
    right: -4px;
    top: 0px;
    background: rgba(255,255,255,0);
    background: -webkit-gradient(linear, left top, right top, from(rgba(255,255,255,0)),color-stop(80%, #edede5));
    background: linear-gradient(to right, rgba(255,255,255,0) 0%,#edede5 80%)
}

.sub-section .content .subSlider .slick-list .slick-track .subItem {
    width: 300px;
    margin-left: 20px;
    margin-right: 20px
}

.sub-section .content .subSlider .slick-list .slick-track .subItem a .slider-item .text,.sub-section .content .subSlider .slick-list .slick-track .subItem a .slider-item .description {
    color: #000000
}

.sub-section .content .subSlider .slick-list .slick-track .subItem .slider-item {
    position: relative;
    margin: 0 auto;
    width: 280px;
    max-width: 310px;
    background-color: #ffffff
}

.sub-section .content .subSlider .slick-list .slick-track .subItem .slider-item .text a .text-title {
    color: #000000
}

.sub-section .content .subSlider .slick-list .slick-track .subItem .slider-item .text a .description {
    color: #000000
}

.sub-section .content .subSlider .slick-list .slick-track .subItem .slider-item .imageBox {
    width: 100%;
    height: 235px;
    background-size: cover;
    background-position: center center
}

.sub-section .content .subSlider .slick-list .slick-track .subItem .slider-item .text {
    font-size: 16px;
    padding: 20px;
    min-height: 180px;
    color: #000000
}

.sub-section .content .subSlider .slick-list .slick-track .subItem .slider-item .text .text-title {
    font-weight: bold;
    padding-bottom: 10px;
    color: #000000
}

.sub-section .content .subSlider .slick-list .slick-track .subItem .slider-item .text .description {
    font-size: 0.9em;
    margin-bottom: 10px;
    min-height: 52px;
    max-height: 52px;
    overflow: hidden;
    color: #000000
}

.sub-section .content .subSlider .slick-list .slick-track .subItem .slider-item .text .button--wayra span {
    position: absolute !important
}

.sub-section .content .subSlider .slick-list .slick-track .slick-slide {
    outline: none
}

.sub-section .content .subSlider.shortSlider .slick-list::before {
    display: none
}

.sub-section .content .subSlider.shortSlider .slick-list::after {
    display: none
}

.sub-section .content .subSlider.centerSlide .slick-list .slick-track {
    text-align: center
}

.sub-section .content .subSlider.centerSlide .slick-list .slick-track .subItem {
    display: inline-block;
    float: none
}

.sub-section.color-travel .slider-item::after {
    z-index: 1002;
    content: " ";
    position: absolute;
    display: block;
    bottom: 0px;
    right: 0px;
    border-style: solid;
    border-width: 0 0 100px 15px;
    border-color: transparent transparent #185ca3 transparent
}

.sub-section.color-travel .slider-item .square-button {
    color: #185ca3;
    border: solid #185ca3 1px;
    border: none;
    border-radius: 0;
    text-decoration: none;
    margin-left: 0;
    margin-right: 0;
    width: 80px;
    height: 30px;
    padding: 0;
    outline: none;
    cursor: pointer;
    position: absolute;
    bottom: 20px;
    left: 20px
}

.sub-section.color-travel .slider-item .square-button::after {
    content: " ";
    border: solid #185ca3 1px;
    width: 79px !important;
    height: 30px !important;
    display: block;
    position: absolute;
    top: 0px;
    left: 1px;
    z-index: 0;
    pointer-events: none !important
}

.sub-section.color-travel .slider-item .square-button a {
    color: #185ca3;
    z-index: 1
}

.sub-section.color-travel .slider-item .button--wayra::before {
    background: #185ca3
}

.sub-section.color-travel .subSlider .slick-prev::after,.sub-section.color-travel .subSlider .slick-next::after {
    background-color: #185ca3;
    opacity: 0.6
}

.sub-section.color-travel .slick-dots li:hover button::before {
    content: "•";
    color: #185ca3;
    font-size: 12px;
    opacity: inherit
}

.sub-section.color-travel .slick-dots li button::before {
    content: "•";
    color: #fff;
    font-size: 12px;
    opacity: inherit
}

.sub-section.color-travel .slick-dots li.slick-active button::before {
    content: "•";
    color: #185ca3;
    font-size: 12px;
    opacity: inherit
}

.sub-section.color-travel .content .subSlider .slick-prev::before {
    content: url("/hk/diamond/themes/unionpay/images/travel_left_arrow.png")
}

.sub-section.color-travel .content .subSlider .slick-next::before {
    content: url("/hk/diamond/themes/unionpay/images/travel_right_arrow.png")
}

.sub-section.color-dining .slider-item::after {
    z-index: 1002;
    content: " ";
    position: absolute;
    display: block;
    bottom: 0px;
    right: 0px;
    border-style: solid;
    border-width: 0 0 100px 15px;
    border-color: transparent transparent #F58472 transparent
}

.sub-section.color-dining .slider-item .square-button {
    color: #F58472;
    border: solid #F58472 1px;
    border: none;
    border-radius: 0;
    text-decoration: none;
    margin-left: 0;
    margin-right: 0;
    width: 80px;
    height: 30px;
    padding: 0;
    outline: none;
    cursor: pointer;
    position: absolute;
    bottom: 20px;
    left: 20px
}

.sub-section.color-dining .slider-item .square-button::after {
    content: " ";
    border: solid #F58472 1px;
    width: 79px !important;
    height: 30px !important;
    display: block;
    position: absolute;
    top: 0px;
    left: 1px;
    z-index: 0;
    pointer-events: none !important
}

.sub-section.color-dining .slider-item .square-button a {
    color: #F58472;
    z-index: 1
}

.sub-section.color-dining .slider-item .button--wayra::before {
    background: #F58472
}

.sub-section.color-dining .subSlider .slick-prev::after,.sub-section.color-dining .subSlider .slick-next::after {
    background-color: #F58472;
    opacity: 0.6
}

.sub-section.color-dining .slick-dots li:hover button::before {
    content: "•";
    color: #F58472;
    font-size: 12px;
    opacity: inherit
}

.sub-section.color-dining .slick-dots li button::before {
    content: "•";
    color: #fff;
    font-size: 12px;
    opacity: inherit
}

.sub-section.color-dining .slick-dots li.slick-active button::before {
    content: "•";
    color: #F58472;
    font-size: 12px;
    opacity: inherit
}

.sub-section.color-dining .content .subSlider .slick-prev::before {
    content: url("/hk/diamond/themes/unionpay/images/dining_left_arrow.png")
}

.sub-section.color-dining .content .subSlider .slick-next::before {
    content: url("/hk/diamond/themes/unionpay/images/dining_right_arrow.png")
}

.sub-section.color-entertainment .slider-item::after {
    z-index: 1002;
    content: " ";
    position: absolute;
    display: block;
    bottom: 0px;
    right: 0px;
    border-style: solid;
    border-width: 0 0 100px 15px;
    border-color: transparent transparent #00958E transparent
}

.sub-section.color-entertainment .slider-item .square-button {
    color: #00958E;
    border: solid #00958E 1px;
    border: none;
    border-radius: 0;
    text-decoration: none;
    margin-left: 0;
    margin-right: 0;
    width: 80px;
    height: 30px;
    padding: 0;
    outline: none;
    cursor: pointer;
    position: absolute;
    bottom: 20px;
    left: 20px
}

.sub-section.color-entertainment .slider-item .square-button::after {
    content: " ";
    border: solid #00958E 1px;
    width: 79px !important;
    height: 30px !important;
    display: block;
    position: absolute;
    top: 0px;
    left: 1px;
    z-index: 0;
    pointer-events: none !important
}

.sub-section.color-entertainment .slider-item .square-button a {
    color: #00958E;
    z-index: 1
}

.sub-section.color-entertainment .slider-item .button--wayra::before {
    background: #00958E
}

.sub-section.color-entertainment .subSlider .slick-prev::after,.sub-section.color-entertainment .subSlider .slick-next::after {
    background-color: #00958E;
    opacity: 0.6
}

.sub-section.color-entertainment .slick-dots li:hover button::before {
    content: "•";
    color: #00958E;
    font-size: 12px;
    opacity: inherit
}

.sub-section.color-entertainment .slick-dots li button::before {
    content: "•";
    color: #fff;
    font-size: 12px;
    opacity: inherit
}

.sub-section.color-entertainment .slick-dots li.slick-active button::before {
    content: "•";
    color: #00958E;
    font-size: 12px;
    opacity: inherit
}

.sub-section.color-entertainment .content .subSlider .slick-prev::before {
    content: url("/hk/diamond/themes/unionpay/images/entertainment_left_arrow.png")
}

.sub-section.color-entertainment .content .subSlider .slick-next::before {
    content: url("/hk/diamond/themes/unionpay/images/entertainment_right_arrow.png")
}

.sub-section.color-shopping .slider-item::after {
    z-index: 1002;
    content: " ";
    position: absolute;
    display: block;
    bottom: 0px;
    right: 0px;
    border-style: solid;
    border-width: 0 0 100px 15px;
    border-color: transparent transparent #FF0031 transparent
}

.sub-section.color-shopping .slider-item .square-button {
    color: #FF0031;
    border: solid #FF0031 1px;
    border: none;
    border-radius: 0;
    text-decoration: none;
    margin-left: 0;
    margin-right: 0;
    width: 80px;
    height: 30px;
    padding: 0;
    outline: none;
    cursor: pointer;
    position: absolute;
    bottom: 20px;
    left: 20px
}

.sub-section.color-shopping .slider-item .square-button::after {
    content: " ";
    border: solid #FF0031 1px;
    width: 79px !important;
    height: 30px !important;
    display: block;
    position: absolute;
    top: 0px;
    left: 1px;
    z-index: 0;
    pointer-events: none !important
}

.sub-section.color-shopping .slider-item .square-button a {
    color: #FF0031;
    z-index: 1
}

.sub-section.color-shopping .slider-item .button--wayra::before {
    background: #FF0031
}

.sub-section.color-shopping .subSlider .slick-prev::after,.sub-section.color-shopping .subSlider .slick-next::after {
    background-color: #FF0031;
    opacity: 0.6
}

.sub-section.color-shopping .slick-dots li:hover button::before {
    content: "•";
    color: #FF0031;
    font-size: 12px;
    opacity: inherit
}

.sub-section.color-shopping .slick-dots li button::before {
    content: "•";
    color: #fff;
    font-size: 12px;
    opacity: inherit
}

.sub-section.color-shopping .slick-dots li.slick-active button::before {
    content: "•";
    color: #FF0031;
    font-size: 12px;
    opacity: inherit
}

.sub-section.color-shopping .content .subSlider .slick-prev::before {
    content: url("/hk/diamond/themes/unionpay/images/shopping_left_arrow.png")
}

.sub-section.color-shopping .content .subSlider .slick-next::before {
    content: url("/hk/diamond/themes/unionpay/images/shopping_right_arrow.png")
}

.sub-section.color-living .slider-item::after {
    z-index: 1002;
    content: " ";
    position: absolute;
    display: block;
    bottom: 0px;
    right: 0px;
    border-style: solid;
    border-width: 0 0 100px 15px;
    border-color: transparent transparent #1DC6AC transparent
}

.sub-section.color-living .slider-item .square-button {
    color: #1DC6AC;
    border: solid #1DC6AC 1px;
    border: none;
    border-radius: 0;
    text-decoration: none;
    margin-left: 0;
    margin-right: 0;
    width: 80px;
    height: 30px;
    padding: 0;
    outline: none;
    cursor: pointer;
    position: absolute;
    bottom: 20px;
    left: 20px
}

.sub-section.color-living .slider-item .square-button::after {
    content: " ";
    border: solid #1DC6AC 1px;
    width: 79px !important;
    height: 30px !important;
    display: block;
    position: absolute;
    top: 0px;
    left: 1px;
    z-index: 0;
    pointer-events: none !important
}

.sub-section.color-living .slider-item .square-button a {
    color: #1DC6AC;
    z-index: 1
}

.sub-section.color-living .slider-item .button--wayra::before {
    background: #1DC6AC
}

.sub-section.color-living .subSlider .slick-prev::after,.sub-section.color-living .subSlider .slick-next::after {
    background-color: #1DC6AC;
    opacity: 0.6
}

.sub-section.color-living .slick-dots li:hover button::before {
    content: "•";
    color: #1DC6AC;
    font-size: 12px;
    opacity: inherit
}

.sub-section.color-living .slick-dots li button::before {
    content: "•";
    color: #fff;
    font-size: 12px;
    opacity: inherit
}

.sub-section.color-living .slick-dots li.slick-active button::before {
    content: "•";
    color: #1DC6AC;
    font-size: 12px;
    opacity: inherit
}

.sub-section.color-living .content .subSlider .slick-prev::before {
    content: url("/hk/diamond/themes/unionpay/images/living_left_arrow.png")
}

.sub-section.color-living .content .subSlider .slick-next::before {
    content: url("/hk/diamond/themes/unionpay/images/living_right_arrow.png")
}

.sub-section.color-wellness .slider-item::after {
    z-index: 1002;
    content: " ";
    position: absolute;
    display: block;
    bottom: 0px;
    right: 0px;
    border-style: solid;
    border-width: 0 0 100px 15px;
    border-color: transparent transparent #3C98D6 transparent
}

.sub-section.color-wellness .slider-item .square-button {
    color: #3C98D6;
    border: solid #3C98D6 1px;
    border: none;
    border-radius: 0;
    text-decoration: none;
    margin-left: 0;
    margin-right: 0;
    width: 80px;
    height: 30px;
    padding: 0;
    outline: none;
    cursor: pointer;
    position: absolute;
    bottom: 20px;
    left: 20px
}

.sub-section.color-wellness .slider-item .square-button::after {
    content: " ";
    border: solid #3C98D6 1px;
    width: 79px !important;
    height: 30px !important;
    display: block;
    position: absolute;
    top: 0px;
    left: 1px;
    z-index: 0;
    pointer-events: none !important
}

.sub-section.color-wellness .slider-item .square-button a {
    color: #3C98D6;
    z-index: 1
}

.sub-section.color-wellness .slider-item .button--wayra::before {
    background: #3C98D6
}

.sub-section.color-wellness .subSlider .slick-prev::after,.sub-section.color-wellness .subSlider .slick-next::after {
    background-color: #3C98D6;
    opacity: 0.6
}

.sub-section.color-wellness .slick-dots li:hover button::before {
    content: "•";
    color: #3C98D6;
    font-size: 12px;
    opacity: inherit
}

.sub-section.color-wellness .slick-dots li button::before {
    content: "•";
    color: #fff;
    font-size: 12px;
    opacity: inherit
}

.sub-section.color-wellness .slick-dots li.slick-active button::before {
    content: "•";
    color: #3C98D6;
    font-size: 12px;
    opacity: inherit
}

.sub-section.color-wellness .content .subSlider .slick-prev::before {
    content: url("/hk/diamond/themes/unionpay/images/wellness_left_arrow.png")
}

.sub-section.color-wellness .content .subSlider .slick-next::before {
    content: url("/hk/diamond/themes/unionpay/images/wellness_right_arrow.png")
}

@media (max-width: 1200px) {
    .sub-section .content .subSlider .slick-list .slick-track .subItem .slider-item {
        width: 235px
    }

    .sub-section .content .subSlider {
        width: 85%
    }

    .sub-section .content .sub-header .image {
        margin-top: 4.5%
    }
}

@media (max-height: 768px) {
    .sub-section .content .sub-header .image {
        position: absolute;
        top: 0px;
        left: 50%;
        width: 690px;
        margin-left: -345px;
        margin-top: 3.5%
    }

    .sub-section .content .subSlider {
        margin-top: -2%
    }

    .nano-content .content {
        top: 0%;
        margin-top: 0px !important
    }
}

@media (max-height: 768px) and (max-width: 1400px) {
    .sub-section .content .sub-header .image {
        margin-top: 4.5%
    }
}

@media (max-height: 768px) and (max-width: 1100px) {
    .sub-section .content .sub-header .image {
        margin-top: 6.5%
    }
}

@media (max-width: 768px) and (max-height: 1024px) and (min-height: 1023px) {
    .sub-section .content .sub-header {
        margin-top: 9%
    }

    .sub-section .content .subSlider {
        margin-top: 7%
    }
}





@media (max-width: 1200px) {
    #section-home .content .slogan {
        font-size: 60px
    }
}

@media (max-width: 991px) {
    #section-home .content .slogan {
        font-size: 43px
    }

    #section-bank-list .content {
        position: relative;
        width: 90%;
        margin-left: 5%;
        margin-right: 5%
    }

    #section-bank-list .content .title {
        margin-top: 7%
    }

    #section-bank-list .content .card-content .nano-content .card .cardTitle {
        font-size: 27px
    }
}



@media (max-height: 768px) {
    .sub-section .content .subSlider .slick-list .slick-track .subItem .slider-item .text {
        min-height: 140px;
        padding: 15px 20px
    }

    .sub-section .content .subSlider .slick-list .slick-track .subItem .slider-item .text .text-title {
        font-size: 13px;
        padding-bottom: 6px
    }

    .sub-section .content .subSlider .slick-list .slick-track .subItem .slider-item .text .description {
        font-size: 12px
    }

    .sub-section .content .subSlider .slick-list .slick-track .subItem .slider-item .imageBox {
        height: 170px
    }
}

@media (max-height: 768px) and (max-width: 600px) {
    .sub-section .content .subSlider .slick-list .slick-track .subItem .slider-item .text .description {
        display: block
    }

    .sub-section .content .subSlider .slick-list .slick-track .subItem .slider-item .text {
        /*min-height: 190px*/
    }

}

@media (max-height: 720px) and (min-width: 1024px) {
    #section-bank-list .content {
        height: 720px;
        margin-top: -360px
    }
}




@media (max-width: 767px) {
    .sub-section .content .sub-header .bg{margin-bottom:20px}
    #page_container,footer{float:left}
    #section-home .content #mainSlider .slick-list .item .banner img{display:none}
    .m_floatingBox{display:block;top:-100px;left:0;color:#ab6e30;font-weight:100;position:fixed;z-index:5;display:inline-block;width:100%;height:86px}
    .m_floatingBox .imageBox{width:35%;height:86px;overflow:hidden;float:left;background-position:center center;background-size:cover}
    .m_floatingBox .text{width:58%;float:left;height:86px;padding:20px 30px;background-color:#fff;position:relative;font-size:18px}
    .m_floatingBox .text .title{width:100%;margin-bottom:6px}
    .m_floatingBox .text .title span{display:block}
    .m_floatingBox .text .square-button{font-size:16px;color:#ab6e30;border:none;height:40px;bottom:24px;line-height:38px!important;right:10px;left:auto;width:30%;font-weight:400;position:absolute}
    .m_floatingBox .text .square-button a{color:#ab6e30}
    .m_floatingBox .text .square-button.button--wayra::before{background:#a57743}
    .m_floatingBox .text .square-button.button--wayra::after{content:" ";border:solid #a57743 1px;width:99%;height:40px!important;display:block;position:absolute;top:0;left:1px;z-index:0;pointer-events:none!important}
    .m_floatingBox .close{width:7%;height:86px;float:right;background-image:url(/hk/diamond/themes/unionpay/images/banner/thumb_floatimg_bg.png);background-repeat:no-repeat;background-position:center right}
    .m_floatingBox .close:before{content:" ";width:4%;height:86px;display:block;position:absolute;background-color:#fff}
    .m_floatingBox .close .close-btn{cursor:pointer;position:absolute;right:14px;top:12px;width:16px;height:16px;opacity:.5}
    .m_floatingBox .close .close-btn:hover{opacity:1}
    .m_floatingBox .close .close-btn::after,.m_floatingBox .close .close-btn::before{position:absolute;left:5px;content:' ';height:18px;width:1px;background-color:#565656}
    .m_floatingBox .close .close-btn::before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}
    .m_floatingBox .close .close-btn::after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
    #section-home .content .slogan{font-size:27px;top:45%}
    #section-home .content .phoneBox{display:none}
    #arrowDown{display:none}
    #section-home .content::before{border-width:130px 50px 0 80px}
    #section-home .content::after{border-width:0 0 130px 52px}
    #section-home .content .m_nextBtn,#section-home .content .m_prevBtn{width:30px;height:100px;display:block;position:absolute;top:40%}
    #section-home .content .m_nextBtn img,#section-home .content .m_prevBtn img{width:100%;max-width:16px;position:absolute;top:20px;right:0}
    #section-home .content .m_prevBtn{left:25px;z-index:2}
    #section-home .content .m_prevBtn img{width:100%;max-width:16px;position:absolute;top:20px;right:auto;left:0}
    #section-home .content .m_nextBtn{right:25px;z-index:2}
    #section-home .nextBtn,#section-home .prevBtn{display:none}
    #section-bank-list .content .title{padding-top:5rem;margin-top:0;padding-bottom: 0}
    #section-bank-list .content .list-content{font-size:16px}
    #section-bank-list .content .list-content span{width:100%}
    .sub-section .content .sub-header .image{width:100%;margin-left:0;left:0}
    .sub-section .content .subSlider{margin-bottom:70px}
    .sub-section .content .subSlider .slick-dots li{margin:0 3px}
    .sub-section .content .subSlider .slick-dots li button::before{font-size:8px!important}
    .sub-section .content .subSlider .slick-dots li.slick-active button::before{font-size:8px!important}
    .sub-section.color-dining .content .sub-header{
        margin-top: 15%;
    }
    .sub-section .content .sub-header {
        margin-top: 15%;
    }
    #section-bank-list .content .card-content {
        margin-top: 10px;
        height: 100%;
    }
    #section-bank-list .content .title {
        font-size: 18px;
        margin-bottom: 0;
        line-height: 10px;
    }

    #section-bank-list .content .square-button {
        width: 35%;
        top: 4rem;
        padding: 15px 0px;
    }
    #section-bank-list .content .square-button span {
        font-size: 10px;
        line-height: 30px;
    }
    #section-bank-list .content .card-content .nano-content .card .cardTitle {
        font-size: 18px;
    }


    #section-bank-list .content {
        position: relative;
        width: 96%;
        margin-left: 2%;
        margin-right: 2%;
    }
    .nano>.nano-pane{
        display: none!important;
    }
    #section-bank-list .content .card-content .nano-content {
        height: 100%;
    }
    #section-bank-list .content .card-content .card .imageBox img {
        width: auto;
        height: 100px;
    }

    #section-bank-list .content .card-content .left, #section-bank-list .content .card-content .right {
        width: 48%;
        margin-right: 2%;
    }
    #section-bank-list .content .card-content .card .imageBox {
        margin-top: 10px;
    }

    #section-bank-list .content .card-content .card .listBox .col {
        width: 95%;
        margin-right: 5%;
    }


    #section-bank-list .content .card-content .card .listBox .col p {
        font-size: 13px;
        margin-bottom: 3px;
    }
    #section-bank-list .content .card-content .card .listBox .col .title {
        font-size: 14px;
        margin-bottom: 10px;
    }
    #section-bank-list .content .card-content .left .listBox .col{
        margin-right: 0;
    }
}
@media (max-width: 640px) {
    .sub-section .content .subSlider {
        margin-bottom: 40px
    }

    .sub-section .content .subSlider .slick-prev,
    .sub-section .content .subSlider .slick-next {
        /*display: none !important*/
    }
    .sub-section .content .subSlider .slick-next{
        right: 0 !important;
        background: url("/hk/diamond/themes/unionpay/images/right_arrow2.png") no-repeat center;
        background-size: 15px;
    }
    .sub-section .content .subSlider .slick-prev{
        left: 0 !important;
        background: url("/hk/diamond/themes/unionpay/images/left_arrow2.png") no-repeat center;
        background-size: 15px;
    }
    .sub-section.color-entertainment .content .subSlider .slick-next::before{
        opacity: 0;
    }
    .sub-section.color-entertainment .content .subSlider .slick-prev::before{
        opacity: 0;
    }
    .sub-section.color-travel .content .subSlider .slick-next::before,
    .sub-section.color-dining .content .subSlider .slick-next::before,
    .sub-section.color-living .content .subSlider .slick-next::before{
        opacity: 0;
    }
    .sub-section.color-travel .content .subSlider .slick-prev::before,
    .sub-section.color-dining .content .subSlider .slick-prev::before,
    .sub-section.color-living .content .subSlider .slick-prev::before{
        opacity: 0;
    }

    .sub-section .content .subSlider .slick-list .slick-track .subItem .slider-item {
        width: 90%
    }

    .sub-section .content .subSlider {
        width: 100%
    }
}
@media (max-width: 600px) {
    .m_floatingBox .text {
        padding: 20px 20px;
        font-size: 16px
    }

    .m_floatingBox .text .square-button {
        font-size: 14px;
        width: 40%
    }
}
@media (max-width: 500px) {
    .sub-section .content .subSlider .slick-list .slick-track .subItem .slider-item .text .description{
        min-height:46px;
        max-height:46px
    }
    .sub-section .content .sub-header .image{margin-top:1.5%}
    .sub-section .content .sub-header .bg{margin-bottom:10px}
    .sub-section .content{overflow:hidden}
    .sub-section .content .subSlider{width:80%}
    .sub-section .content .subSlider .slick-dots li{margin:0}
    .sub-section .content .subSlider .slick-list{padding:0;overflow:visible}
    .sub-section .content .subSlider .slick-list::after,.sub-section .content .subSlider .slick-list::before{display:none}
    .sub-section .content .subSlider .slick-list .slick-slide{opacity:1}
    .sub-section .content .subSlider .slick-list .slick-active{opacity:1}
    .sub-section .content .subSlider .slick-list .slick-track .subItem{margin-left:0;margin-right:0}
    .sub-section .content .subSlider .slick-list .slick-track .subItem .slider-item .imageBox{height:225px}
    #section-home .content .slogan{font-size:22px;top:48%}
    #section-home .content::before{border-width:100px 30px 0 80px}
    #section-home .content::after{border-width:0 0 100px 30px}
    #section-home .content .m_nextBtn,#section-home .content .m_prevBtn{width:15px;display:block;position:absolute}
    #section-home .content .m_nextBtn img,#section-home .content .m_prevBtn img{width:100%}
    #section-home .content .m_prevBtn{top:42%;left:15px;right:auto;z-index:2}
    #section-home .content .m_nextBtn{top:42%;right:15px;z-index:2}
    #section-home .content #mainSlider .slick-dots{bottom:6%}
    #section-home .content #mainSlider .slick-dots li{margin:0 3px}
    #section-home .content #mainSlider .slick-dots li button:before{font-size:9px}
    .m_floatingBox .text{padding:20px 10px;font-size:16px}
    .m_floatingBox .text .square-button{font-size:13px;width:40%}
}
@media (max-width: 360px){
    .sub-section .content .subSlider .slick-list .slick-track .subItem .slider-item .text {
        min-height: 100px;
    }
    .sub-section.color-dining .content .sub-header{
        margin-top: 18%;
    }
    .sub-section .content .sub-header {
        margin-top: 18%;
    }

    .sub-section .content .subSlider .slick-list .slick-track .subItem .slider-item .imageBox {
        height: 185px;
    }
    #section-bank-list .content .card-content .card .listBox .col p {
        font-size: 10px;
        margin-bottom: 0;
    }
}
@media (max-width: 375px) {
    .m_floatingBox .text {
        font-size: 13px;
        padding: 25px 10px
    }

    .m_floatingBox .text .square-button {
        font-size: 12px;
        width: 40%
    }
    .m_floatingBox .close .close-btn {
        right: 4px
    }
    #section-bank-list .content .card-content .card .listBox .col p {
        font-size: 10px;
        margin-bottom: 0;
    }
}
@media (max-width: 320px) {
    #section-bank-list .content .card-content .card .listBox .col p {
        font-size: 10px;
        margin-bottom: 0;
    }
}


body .t-moon{width:550px!important;height:auto;display:block;border-radius:0 15px 15px 0}
body .t-moon .layui-layer-content{background:url(/hk/diamond/themes/unionpay/images/vertical.png) left center no-repeat}
body .t-moon .layui-layer-content .z-attention{width:90%;height:auto;display:block;margin:0 auto;padding:30px 0}
body .t-moon .layui-layer-content .z-attention h2{width:100%;height:auto;display:block;font-size:30px;color:#000;font-weight:600;text-align:center}
body .t-moon .layui-layer-content .z-attention h3{width:100%;height:auto;display:block;font-size:26px;color:#000;font-weight:600;text-align:center}
body .t-moon .layui-layer-content .z-attention p{width:100%;height:auto;display:block;font-size:16px;text-decoration:none;color:#4c4c4c;text-align:left;padding-top:10px}
body .t-moon .layui-layer-content .z-attention a{color:#ab6e30}
body .t-moon .layui-layer-content .z-attention .zcz-btn{width:60%;height:50px;text-align:center;outline:0;position:relative;color:#ab6e30;border:solid #ab6e30 1px;display:block;margin:0 auto;margin-top:30px}
body .t-moon .layui-layer-content .z-attention .zcz-btn a{width:100%;height:50px;display:block;line-height:50px}
body .t-moon .layui-layer-content .z-attention .zcz-btn a span{width:100%;height:50px;display:block;font-size:18px;line-height:50px}
body .t-moon .layui-layer-content .z-attention .zcz-btn:hover span{color:#fff}
body .t-moon .layui-layer-content .z-attention .zcz-btn:hover::before{opacity:1;height:120%;background-color:#a57743;-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg);-webkit-transition-timing-function:cubic-bezier(.2,1,.3,1);transition-timing-function:cubic-bezier(.2,1,.3,1)}

body .t-moon .layui-layer-content .z-attention .z-time{
    text-align: right;
    padding-top: 15px;
}
@media only screen and (max-width: 767px) {
    body .t-moon{width:90%!important;display:block;border-radius:0 .5rem .5rem 0}
    body .t-moon .layui-layer-content{height:17.5rem}
    body .t-moon .layui-layer-content .z-attention h2{font-size:1.1rem}
    body .t-moon .layui-layer-content .z-attention h3{font-size:1rem;padding-top: 0.8rem}
    body .t-moon .layui-layer-content .z-attention p{font-size:.8rem;padding-top:.5rem}
    body .t-moon .layui-layer-content .z-attention .zcz-btn{height:2.5rem;margin-top:1.5rem}
    body .t-moon .layui-layer-content .z-attention .zcz-btn a{height:22.5rem;line-height:2.5rem}
    body .t-moon .layui-layer-content .z-attention .zcz-btn a span{height:2.5rem;font-size:.9rem;line-height:2.5rem}
    body .t-moon .layui-layer-content .z-attention {
        width: 90%;
        height: auto;
        display: block;
        margin: 0 auto;
        padding: 0.8rem 0;
    }
    body .t-moon .layui-layer-content .z-attention .z-time {
        padding-top: 0.4rem;
    }
}

.switchBtn{
    display: none;
    width: 40px;
    position: fixed;
    top: 20%;
    right: 0;
    z-index: 9;
    border-top-left-radius: 14px;
    border-bottom-left-radius: 14px;
    overflow: hidden;
}
.switchBtn a{
    display: inline-block;
    width: 40px;
    height: 70px;
    line-height: 70px;
    font-size: 14px;
    color: #fff;
    text-align: center;
    background: #b09066;
    /*margin: 33px 0;*/
}
.switchBtn a span{
    display: inline-block;
    transform: rotate(90deg);
}
#btnPrev span{
    padding-left:20px;
    background:url("/hk/diamond/themes/unionpay/images/prev-icon.png") no-repeat center left;
}
#btnNext{
    margin-top: 2px;
}
#btnNext span{
    padding-right:20px;
    background:url("/hk/diamond/themes/unionpay/images/next-icon.png") no-repeat center right;
}
@media screen and (max-width: 768px){
    .switchBtn{
        display: block;
    }
}