@charset "UTF-8";
/* CSS Document */
.ml10 {
    margin-left: 10px!important;
}
.ml30 {
    margin-left: 30px!important;
}
.remark-table tr,
.remark-table tr td {
    margin: 0;
    padding: 0;
}

.atmBanner { background-position: 0 -26px; min-height: 200px;}
table.offer-table3 {
    border-width: 0 0 1px 1px;
    border-spacing: 0;
    border-collapse: collapse;
    border-style: solid;
    border-color: #999999;
    margin: 6px 0;
    font-size: 10px;
    color: #666666;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
table.offer-table3 .head {
    background-color: #666666;
    color: #ffffff;
}
table.offer-table3 tr td {
    text-align: center;
    vertical-align: middle;
}
table.offer-table3 tr td {
    background-color: #ffffff;
    color: #666666;
}
table.offer-table3 td.head {
    font-weight: bold;
}
table.offer-table3 td, th {
    margin: 0;
    padding: 5px;
    border-width: 1px 1px 0 0;
    border-style: solid;
    border-color: #999999;
    background-color: #ffffff;
}

.cblcCallInfo {
    background-color: #f9f9f9;
    padding: 10px 20px 0 0;
}
.promotxtHidden {
    visibility: hidden;
}
.promoAdjust {
    background-size: 100%;
    background-repeat: no-repeat;
    
}
.promoHeight{
    min-height: 525px;
}
.bannerH370 {
    min-height: 370px!important; 
}
.bannerH570 {
    min-height: 570px!important; 
}
.bannerH570 {
    min-height: 470px!important; 
}
.tableFrame {
    border: solid 1px #ccc;
    border-radius: 5px;
    padding: 5px;
    box-sizing: border-box;
    margin: 20px 0; 
    box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.3);
    width: 98%;
    min-width: 720px;
}
body.large-font-size .tableFrame {
    border: solid 1px #ccc;
    border-radius: 5px;
    padding: 5px;
    box-sizing: border-box;
    margin: 20px 0; 
    box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.3);
    width: 98%;
    min-width: 1000px;
}
.subtag-nonhk {
    color: #fff;
    font-size: 24px;
    padding-left: 15px;
    padding-top: 10px;
    text-shadow: 3px 3px 5px 0px rgba(0,0,0,0.3);
    text-shadow: 2px 2px 3px rgba(0,0,0,0.3);
}
.tableFrameInner {
    background-color: #fefefe;
     padding: 5px;
     box-sizing: border-box;
}
.activate01 {
    background: url("../../../../hongkong/promotions/accounts/images/1301overseastrans/icon_promo_phone.png") no-repeat;
}
.activate02 {
    background: url("../../../../hongkong/promotions/accounts/images/1301overseastrans/icon_promo_branch.png") no-repeat;
}
.activate03 {
    background: url("../../../../hongkong/promotions/accounts/images/1301overseastrans/icon_promo_online.png") no-repeat;
}
.activate04 {
    background: url("../../../../hongkong/promotions/accounts/images/1301overseastrans/icon_promo_atm.png") no-repeat;
}
.availableCheck {
    background: url("../../../../hongkong/promotions/accounts/images/1301overseastrans/icon_promo_check.png") no-repeat;
}
.activate01,
.activate02 { 
    min-height: 63px;
    padding-left: 44px; 
    background-size: 34px auto;
    margin: 0 8px 15px;
    display: inline-block;  
    min-width: 169px;
    vertical-align: top; 
}

.tc .activate02,
.sc .activate02 {  
    padding-left: 44px; 
    background-size: 34px auto;
    margin: 0 8px 15px;
    display: inline-block;  
    min-width: 169px;
    vertical-align: top; 
    min-height: 60px;
    padding-top: 16px;
    background-position: left 8px;
}
.activate03 { 
    min-height: 63px;
    padding-left: 44px; 
    padding-top: 15px;
    background-size: 30px auto;
    margin: 0 8px 15px;
    display: inline-block;  
    min-width: 169px;
    vertical-align: top;  
}
.activate04{ 
    min-height: 63px;
    padding-left: 44px; 
    padding-top: 15px;
    background-size: 34px auto;
    margin: 0 8px 15px;
    display: inline-block;  
    min-width: 169px;
    vertical-align: top; 
}
.available {
    background: url("../../../../hongkong/promotions/accounts/images/1301overseastrans/icon_promo_check.png") no-repeat;
    background-size: 32px;
    padding-left: 40px; 
    display: inline-block;
    min-height: 45px; 
    padding-top: 5px;
}
h2.darkOrange {
    font-size: 1.2rem;
    font-weight: bold;
    color: #d64405;
}
.darkOrange {
    font-size: 1.2rem;
    font-weight: bold;
    color: #d64405;
}
.darkOrange_normal {
    font-size: 1rem;
    font-weight: bold;
    color: #d64405;
}
h2.pink {
    font-size: 1.2rem;
    font-weight: bold;
    color: #f04e6e;
}
.pink {
    font-size: 1.2rem;
    font-weight: bold;
    color: #f04e6e;
}
.pink_normal {
    font-size: 1rem;
    font-weight: bold;
    color: #f04e6e;
}
table.atmList tr td {
    padding: 10px 0; 
}
tr.thead-green td{
    background-color: #357787;
    color: #fff;
    padding: 10px;
}
.btnControl {
    width: 100%;
    max-width: 350px;
    margin-bottom: 10px;
}
.note {
    font-size: 0.8em;
    padding: 15px;
    margin-bottom: 20px;
    color: #000;
    border: #000 solid 1px;
}
.list-disc li{
    list-style-type: disc;
}
.blockBox_green,
.blockBox_green02, 
.blockBox_green03 {
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-top: 20px;
}
.blockBox_green.rightAngle,
.blockBox_green02.rightAngle,
.blockBox_green03.rightAngle {
    border-radius: 0;
}
.blockBox_green h2,
.blockBox_green02 h2,
.blockBox_green03 h2{ 
    background: #38984b; 
    color: #fff; 
    font-size: 1.5em; 
    font-weight: bold; 
    padding: 10px; 
    text-align:center; 
    border-top-left-radius: 5px; 
    border-top-right-radius: 5px;
}
.blockBox_green02 h2 {
   background: #146f2f!important; 
}
.blockBox_green03 h2 {
   background: #79a521!important;
}
.blockBox_green-content,
.blockBox_green02-content,
.blockBox_green03-content{
    padding: 20px;
    text-align: center;
}
.blockBox_green-content hr,
.blockBox_green02-content hr,
.blockBox_green03-content hr {
    border-top: 1px solid #cccccc; 
    margin: 20px 0;
}

.blockBox_orange,
.blockBox_orange02, 
.blockBox_orange03 {
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-top: 20px;
}
.blockBox_orange.rightAngle,
.blockBox_orange02.rightAngle,
.blockBox_orange03.rightAngle {
    border-radius: 0;
}
.blockBox_orange h2,
.blockBox_orange02 h2,
.blockBox_orange03 h2{ 
    background: #e76100; 
    color: #fff; 
    font-size: 1.5em; 
    font-weight: bold; 
    padding: 10px; 
    text-align:center; 
    border-top-left-radius: 5px; 
    border-top-right-radius: 5px;
}
.blockBox_orange02 h2 {
   background:  #6063a6!important; 
}
.blockBox_orange03 h2 {
   background: #23b0bb!important;
}
.blockBox_orange-content,
.blockBox_orange02-content,
.blockBox_orange03-content{
    padding: 20px;
    text-align: center;
}
.blockBox_orange-content hr,
.blockBox_orange02-content hr,
.blockBox_orange03-content hr {
    border-top: 1px solid #cccccc; 
    margin: 20px 0;
}

.privil03 {
    position: relative; 
    bottom: -54px; 
    right: 0;
    display: block;
    width: 100%;
    margin-top: 20px;
    text-align: right;
}
.highlight--md {
    font-size: 1.30em;
}

.highlight2 {
    font-weight: bold;
    color: #38984b;
}
.highlight4 {
    font-weight: bold;
    color: #146f2f;
}
    .section-table {
        border-radius: 5px;
        border-width: 1px;
        border-style: solid;
        border-color: #cccccc;
        margin: 0;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px; 
        position: relative;
    }

    .section-table>tbody>tr>td,
    .section-table>tbody>tr>th {
        padding: 10px 20px;
    }

    .section-table .head {
        font-weight: 400;
        border-top-right-radius: 5px;
        border-top-left-radius: 5px;
        padding: 8px 0;
        background-color: #054c9b;
    }

    .section-table--border {
        border-width: 0 0 1px 1px
    }

    .section-table--border>tbody>tr>td,
    .section-table--border>tbody>tr>th {
        margin: 0; 
        border-width: 1px 1px 0 0;
        border-style: solid;
        border-color: #cccccc;
        font-size: 0.9rem;
        vertical-align: middle;
    }
 
    #bottom_call .bottom_button:hover {
        background-position: 570px center;
    }

    #bottom_call .bottom_button {
        width: 600px;
    }

   /* .arrow {
        display: block;
        z-index: 97;
        position: absolute;
        margin-left: 290px;
        margin-top: -40px;
    }*/
 
    .clear {
        clear: both;
        display: block;
    }

    .underline {
        border-bottom: solid 1px #333;
    }
.highlight2-pink {
    font-weight: bold;
    color: #f04e6e;
}
.highlight2-orange {
    font-weight: bold;
    color: #e76100;
}
    .highlight {
        font-weight: bold;
        color: #d64405;
    }
    .highlight2 {
        font-weight: bold;
        color: #38984b;
    }
    .highlight3 {
        font-weight: bold;
        color: #005ca8;
    }
  .highlight3-violet {
        font-weight: bold;
        color: #6063a6;
    }
    .highlight4 {
        font-weight: bold;
        color: #146f2f;
    }
.highlight4-violet {
        font-weight: bold;
        color: #6063a6;
    }
    .highlight5 {
        font-weight: bold;
        color: #79a521;
    }
 .highlight4-tiffany,
 .highlight5-tiffany{
        font-weight: bold;
        color: #23b0bb;
    }

    .highlight--lg {
        font-size: 1.75rem;
    }
    .highlight--sm {
        font-size: 1.20rem;
    }
    .highlight--md {
        font-size: 1.30rem;
    }

    .mobile .highlight--lg {
        font-size: 0.75rem;
    }
    .mobile .highlight--sm {
        font-size: 0.6rem;
    }
    .mobile .highlight--md {
        font-size: 0.7rem;
    }

    .visual .txt {
        top: 10px;
    }
    .visual .head {
        font-size: 42px;
        color: #054c9b;
    }
    .mobile .visual .txt {
        top: 0.125rem;
    }

    .text-left {
        text-align: left;
    }

    .text-center {
        text-align: center;
    }

    .contentNormal {
        padding-top: 20px;
    }
    .mobile .contentNormal {
        padding-top: 0.25rem;
    }

    .p-row {
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .mobile .p-row {
        margin-top: 0.125rem;
        margin-bottom: 0.125rem;
    } 

    .mobile .styled-border {
        background: linear-gradient(180deg, #f1c2d7, #ffffff, #f1c2d7);
        position: relative;
        padding:4px;
        margin-left: 0;
        border-radius: 5px;
    }
    .mobile .styled-border__inner {
        background-color: #ffffff;
        padding: 0.5rem;
    }

    .list-decimal, .list-upper-roman, .list-lower-roman, .list-lower-alpha, .list-disc{
        margin: 0 0 0.25em 0;
        padding-left: 0.5em;
    }
    .list-decimal>li, .list-upper-roman>li, .list-lower-roman>li, .list-lower-alpha>li, .list-disc>li{
        margin: 0.25em 0;
        padding-left: 0.25em;
        position: relative;
    }


    .mobile .list-decimal, 
    .mobile .list-upper-roman, 
    .mobile .list-lower-roman, 
    .mobile .list-lower-alpha, .list-disc{
        margin: 0 0 0.32rem 0;
        padding-left: 0.64rem;
    }
    .mobile .list-decimal>li, 
    .mobile .list-upper-roman>li, 
    .mobile .list-lower-roman>li, 
    .mobile .list-lower-alpha>li, 
    .mobile .list-disc>li{
        margin: 0.34133333rem 0rem;
        padding-left: 0.168rem;
        position: relative;
    }

    .list-disc{
        list-style-type: disc;
    }
    .list-disc>li{
        list-style: disc;
    }

    .list-decimal{
        list-style-type: decimal;
    }
    .list-decimal>li{
        list-style: decimal;
    }

    .list-upper-roman{
        list-style-type: upper-roman;
    }
    .list-upper-roman>li{
        list-style: upper-roman;
    }

    .list-lower-roman{
        list-style-type: lower-roman;
    }
    .list-lower-roman>li{
        list-style: lower-roman;
    }

    .list-lower-alpha{
        list-style-type: lower-alpha;
    }
    .list-lower-alpha>li{
        list-style: lower-alpha;
    }
    .remark>li{
        color:#999; 
    }
.nopad>tbody>tr>td {
    margin: 0;
    padding: 0;
}
    .remark-table>tbody>tr>td,
    .nopad>tbody>tr>td {
        padding-bottom: 0.5em;
        color:#666;
        line-height: 120%;
        border-bottom: none;
    }
    .remark-table>tbody>tr>td>sup{
        padding-right: 0.25em;
    }

    .mobile .remark-table>tbody>tr>td{
        padding-bottom: 0.25rem;
        color:#999;
        line-height: 120%;
    }
    .mobile .remark-table>tbody>tr>td>sup{
        padding-right: 0.25rem;
    }

    .mobile #tncContent{
        padding: 0.222rem;
    }

   
        #tncContent ul li, #tncContent ol li, #tncContent .row, #tncContent p{
            margin-bottom:0.25rem;
            padding-bottom:0;
            padding-top:0;
            margin-top:0;
        }
        #tncContent ul, #tncContent ol{
            margin-top: 0.25rem;
            padding-left: 0.75rem;
            margin-left:0;
        }

        .as-table{
            display:table;
            border:0;
            border-collapse: collapse;
        }
        .as-table__cell{
            display:table-cell;
            border:0;
        }

        .as-table__cell--bullet{
            width:0.75rem;
        }



        table.lesspadding td{
            padding:5px !important;
        }

        table.nopadding td{
            padding:0px;
        }

        table.noborder, table.noborder td{
            border:0;
        }

        .text-bold {
            font-weight: bold !important;
        }

        td.head{
            font-weight: bold;
        }

        .border-color, .offer-table1.border-color td, .offer-table1.border-color th{
            border-color: #666666;
        }

        .bg-white, .contentNormal .bg-white{
            background-color: #ffffff;
        }
        .bg-sliver {
            background-color: #f2f1f0;
        }
        .bg-blue, td.bg-blue {
            background-color: #e1f3fc;
        }
        .bg-grey,  td.bg-grey {
            background-color: #F2F1F0;
        }
        .bg-purple, td.bg-purple{
            background-color: #d5c8e3;
        }
        .above_visual .note li{
            margin: 0.34133333rem 0rem;
        }
        .bg-orange, td.bg-orange {
            background-color: #EEB48D;
            color: #000;
        }

        .dot-table>tbody>tr>td {
         vertical-align: top;
         text-align: left;
         padding:0.25rem 0.25rem;
         background-repeat: no-repeat;

         background-position: 0 0.45rem;
         background-image:none ;
     }

     ul.styled li {
        margin: 0;
        padding-left: 32px;
        padding-top: 6px;
        background-repeat: no-repeat;
        background-image:none ;
    }


    sup{
        padding-right: 0.1em;
        padding-left: 0.1em;
    }
    sup.sup{
        vertical-align: bottom;
        position: relative;
    }
    sup.sup>span{
        top: 0.25em;
        font-size:2em;
        position: relative;
        margin-right: 0.25em;
    }
    .supscript{  
        font-weight: normal;
        transform: scale(0.83);
        -webkit-transform: scale(0.83);
    }
    .seperate-head {
        position: relative;
        overflow: hidden;
    }
    .seperate-head strong:first-child{
        position: absolute;
        bottom: 2px;
        left: 5px;
    }

    .seperate-head strong:last-child{
        position: absolute;
        top: 2px;
        right: 5px;
    }
    .seperate-head:after {
        content: '';
        position: absolute;
        top: 50%;
        left: 0px;
        width: 100%;
        height: 1px;
        background-color: #ccc;
        transform: rotate(6deg);
    }
    .offer-table3 .seperate-head:after {
        background-color: #999;
        transform: rotate(20deg);
    }
.tableHead_tips {
     min-width: 720px;
    color: #fff;
}
.tableFont {
    font-size: 0.9em;
    width: 100%;
    margin-right: 0;
    padding: 0;
    min-width: 720px;
}
.hotline {
    color: #054c9b;
    font-size: 18px;
    font-weight: bold;
    padding: 1em 0;
}
ul.remarktxtSup {
    color: #666;
    font-size: 0.75em; 
    
}
ul.remarktxtSup li {
    margin-bottom: 10px; 
    line-height: 1.3;
}
ul.remarktxtSup li sup {
    display: inline-block;
    width: 1%;    
}
ul.remarktxtSup li p{
    display: inline-block;
    width: 98%;
     vertical-align: top;
}
@media all and (max-width:768px) {
     .privil03 img{
        width: 40%; 
         height: auto;
    }
    .atmBanner { background-position: 0 -26px; min-height: 50px!important; padding: 24% 0 0!important;}
}
@media all and (max-width:576px) {
    .atmBanner { background-position: 0; min-height: 200px;}
    .btn1, .btn2, .btn3, .btn4 {
        margin-bottom: 10px;
    }
    .promotxtHidden {
        visibility: visible;
    }
    .subtag-nonhk {
        position: absolute;
        left: 0;
        text-shadow: none;
        color: #333;
        font-size: 1.2em;
        top: calc(100% + 40px);
        padding: 0;
    }
    .bannerH570 {
        min-height: 290px!important;
        margin-bottom: 155px;
    }
    .tc .bannerH570,
    .sc .bannerH570{
        min-height: 290px!important;
        margin-bottom: 100px;
    }
    .bannerH470 {
        min-height: 290px!important;
    }
    .promoHeight{
        min-height: 190px;
        margin-bottom: 80px;
        padding: 35px 28px;
    }
}
@media all and (max-width:414px) {
    .blockBox_green03 h2 {
        padding-right: 70px;
    }
    .newCustomerRewardsBanner {
        margin-bottom: 123px;
    }
     .bannerH570 {
        min-height: 256px!important;
    }
}
@media all and (max-width:320px) {
      .bannerH570 {
        min-height: 216px!important;
    }
    .promoHeight{
        min-height: 160px;
    }
}