@charset "ISO-8859-1";

/* Control HomeScreen */
@media screen and (max-width:1560px){
    .wrap.home{background-size: 100% 350px;}
    .wrap.home .containers{grid-template-rows:350px calc(100vh - 400px) 50px;}

    .item_box{height:160px;width:calc(90%);margin:20px auto;}
    .item_box .item .progress_wrap{width:112px;height:112px;}
    .item_box .item .progress_wrap .progress_box{width:110px;height:110px;}
    .item_box .item .progress_wrap .progress_box .progress_bg{width:110px;height:110px;}
    .item_box .item .progress_wrap .progress_box .progress_mask{width:56px;height:110px;overflow:hidden;}

    .item_box .item .item_desc{padding:8px 0 0;}
    .item_box .item .item_desc .balance li{padding:0 20px 0 40px;}
    .item_box .item .item_desc .balance li::before{width:6px;height:22px;border-radius:3px;}

    /* logo_security_digital_badges */
    .logo_sec_wrap p{display:block;margin:0;padding:0;font-size:12px;color:#fff;text-align:center;text-shadow:3px 3px 3px #000;}
    .logo_sec_wrap .logo_sec{margin:5px 0 10px;}
    .logo_sec_wrap .logo_sec > img{display:block;height:40px;}

    /* Search_wrap */
    .search_wrap .search_box{max-width:380px;}

    /* .component_wrap */
    .component_wrap > ul > li.wid120-mb-100 .ac_form{width:100%;}
    .component_wrap > ul > li.wid180-mb-100 .ac_form{width:100%;}
    /* //.component_wrap */

    /* User Setting */
    .user_setting{top:calc(350px - 150px);height:150px;padding:105px 15px 0;}
    .user_setting .user_prof_box{top:-90px;width:180px;height:180px;}
    /* //User Setting */

    /* card */
    .card .card-body .form_lst > ul > li > div{grid-template-columns:200px auto;}
    /* //card */

    /* footer */
    .footer_wrap .quick_task .quick_task_inner > ul > li > a{padding-right:10px;}
    .footer_wrap .quick_task .quick_task_inner > ul > li > a span{max-width:120px;}
    .footer_wrap .quick_task .quick_task_inner > .dropdown .btn_qt_add{max-width:120px;}
}

/* Ipad Pro 12.9 */
@media screen and (max-width:1366px){
 
    .wrap{background-size: 100% 160px;}
    .wrap .containers{grid-template-rows:160px calc(100vh - 160px) 0;}

    .wrap.home{background-size: 100% 350px;}
    .wrap.home .containers{grid-template-rows:350px calc(100vh - 350px) 0;}

    .wrap .footer_wrap .quick_task .btn_qt_setting{top:auto;bottom:45px;right:20px;}

    /* Button_wrap Ipad Screen */
    .btn_wrap.ipad{display:block;}
    /* //Button_wrap Ipad Screen */

    /* .component_wrap */
    .component_wrap.responsive{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);display:none;max-width:350px;z-index:9999;background-color:#fff;border-radius:10px;
        margin:0;padding:0;-webkit-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.25);-moz-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.25);box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.25);border:0;
    }
    .component_wrap.responsive.on{display:block;}
    .component_wrap.responsive ul.home_authorize{padding:20px 20px 0;}
    .component_wrap.responsive ul.home_authorize > li{padding:0 0 15px;width:100%;max-width:100% !important;}
    .component_wrap.responsive ul.home_authorize > li.wid120-mb-100 .ac_form{width:100%;}
    .component_wrap.responsive ul.home_authorize > li.wid180-mb-100{max-width:100%;}
    .component_wrap.responsive ul.home_authorize > li.wid180-mb-100 .ac_form{width:100%;}
        
    .component_wrap.responsive .component_title{display:block;background-color:#274D7B;border-radius:10px 10px 0 0;}
    .component_wrap.responsive .component_title > h5{display:block;margin:0;padding:0;height:42px;color:#fff;font-size:16px;text-align:center;line-height:38px;font-weight:500;}
    .component_wrap.responsive .btn_wrap{display:block;padding:0 20px 20px;}
    .component_wrap.responsive .btn_wrap .btn_inner{display:flex;}
    .component_wrap.responsive .btn_wrap .btn_inner .btn{width:100%;}

    .top_up_wrap .component_wrap.two_column > ul{display:grid;grid-template-columns:100%;padding-right:0;}
    .top_up_wrap .component_wrap.two_column > ul > li{padding-left:0;padding-right:0;margin-bottom: 10px;}
    .top_up_wrap .component_wrap.two_column > ul > li.full_width{width:100%;}
 
    /* card */
    .card .card-body{display:block;overflow: auto;}
    .card .card-body .card_body_inner{width:1070px;}
    .card .card-body .card_body_inner .form_lst > ul > li > div{grid-template-columns:150px auto;}
    /* //card */

     /* Content */
    .item_box .item .item_desc .balance li > div > span{font-size:15px;}

    /* footer */
    .footer_wrap{position:static;padding:0;height:0px;}
    .footer_wrap .note_time{display:none;}
    .footer_wrap .quick_task .quick_task_inner{position:absolute;bottom:85px;right:15px;display:none;z-index:900;max-width:240px;}
    .footer_wrap .quick_task .quick_task_inner ul li{width:100%;}
    .footer_wrap .quick_task .quick_task_inner ul li > a{background-color:transparent;border-radius:0;}
    .footer_wrap .quick_task .quick_task_inner ul li > a > span{max-width:100%;color:var(--bg-primary);}
    .footer_wrap .quick_task .dropdown-menu{display:none;transform:none;}
    .footer_wrap .quick_task .dropdown-menu.show{display:block;}
    .footer_wrap .quick_task .quick_task_inner > ul{padding:10px 15px;background-color:#fff;-webkit-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.25);-moz-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.25);box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.25);border-radius:5px;}
        .quick_task .quick_task_inner > ul > li{width:100%;padding:0 0 0 4px;border-bottom:1px solid #F0F0F0;}
        .quick_task .quick_task_inner > ul > li:last-child{border-bottom:0;}
        .quick_task .quick_task_inner > ul > li > a{height:36px;margin:0;padding:0;background-color:transparent;border-radius:0;}
        .quick_task .quick_task_inner > ul > li > a span{display:block;max-width:100%;width:210px;padding-left:28px;color:#274D7B;line-height:34px;background-size:18px auto;}
        .quick_task .quick_task_inner > ul > li.I001 > a span{background-image:url(../img/icon/QT_I001.png);} /* Account Services */
        .quick_task .quick_task_inner > ul > li.I002 > a span{background-image:url(../img/icon/QT_I002.png);} /* Local Fund Transfer */
        .quick_task .quick_task_inner > ul > li.I003 > a span{background-image:url(../img/icon/QT_I003.png);} /* Payment Services */
        .quick_task .quick_task_inner > ul > li.I004 > a span{background-image:url(../img/icon/QT_I004.png);} /* Mobile Phone Top Up */
        .quick_task .quick_task_inner > ul > li.I005 > a span{background-image:url(../img/icon/QT_I005.png);} /* Request Services */
        .quick_task .quick_task_inner > ul > li.I006 > a span{background-image:url(../img/icon/QT_Home.png);} /* User Administrations */
        .quick_task .quick_task_inner > ul > li.I007 > a span{background-image:url(../img/icon/QT_I007.png);} /* Reports */
        .quick_task .quick_task_inner > ul > li.I009 > a span{background-image:url(../img/icon/QT_I009.png);} /* Bill Payment */
        .quick_task .quick_task_inner > ul > li.I010 > a span{background-image:url(../img/icon/QT_I010.png);} /* Overseas Fund Transfer */
        .quick_task .quick_task_inner > ul > li.I011 > a span{background-image:url(../img/icon/QT_I011.png);} /* Standing Order */
        .quick_task .quick_task_inner > ul > li.I012 > a span{background-image:url(../img/icon/QT_I012.png);} /* Cheque Services */
        .quick_task .quick_task_inner > ul > li.I013 > a span{background-image:url(../img/icon/QT_I013.png);} /* Messages */
        .quick_task .quick_task_inner > ul > li.I014 > a span{background-image:url(../img/icon/QT_I014.png);} /* FX Trading */
        .quick_task .quick_task_inner > ul > li.I015 > a span{background-image:url(../img/icon/QT_I015.png);} /* Loan Service */
        .quick_task .quick_task_inner > ul > li.I016 > a span{background-image:url(../img/icon/QT_I016.png);} /* Term Deposit */
        .quick_task .quick_task_inner > ul > li.I017 > a span{background-image:url(../img/icon/QT_I017.png);} /* Tax Payment */
        .quick_task .quick_task_inner > ul > li.I021 > a span{background-image:url(../img/icon/QT_I021.png);} /* Bank Confirmation */
        .quick_task .quick_task_inner > ul > li.I022 > a span{background-image:url(../img/icon/QT_I022.png);} /* Account Summary */
        .quick_task .quick_task_inner > ul > li.I023 > a span{background-image:url(../img/icon/QT_I023.png);} /* Bill 24 */
        .quick_task .quick_task_inner > ul > li.I024 > a span{background-image:url(../img/icon/QT_I024.png);} /* Cheque Services */

    .footer_wrap .quick_task .quick_task_inner > div.dropdown{width:100%;}
    .footer_wrap .quick_task .btn_qt_add{display:block;height:40px;margin:10px 0 5px;padding:0 15px 0 20px;background-color:#fff;-webkit-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.25);-moz-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.25);box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.25);border-radius:5px;border:0;}
    .footer_wrap .quick_task .btn_qt_add > span{display:block;height:100%;color:#274D7B;line-height:40px;background-size:18px auto;}
    .footer_wrap .quick_task .btn_qt_setting{position:fixed;display:inline-block;width:40px;height:40px;z-index:9999;}
    

    /* component_wrap */
    .component_wrap > ul{padding-right:40%;}
    .component_wrap.two_column > ul{display:grid;grid-template-columns:50% 50%;padding-right:0;}
    .component_wrap.two_column > ul > li:nth-child(2n+1){padding-left:0;}
    .component_wrap.two_column > ul > li:nth-child(2n+2){padding-right:0;}
}

@media screen and (max-width:1100px){
    /* Search_wrap */
    .search_wrap .search_box.style2{max-width:500px;}
}

@media screen and (max-width:1024px){
    .wrap{grid-template-columns:100% !important;background-size:100% 210px;}
    /* .wrap .containers{grid-template-rows:160px auto;} */
    
    .wrap.home{background-size:100% 337px;}
    /* .wrap.home .containers{grid-template-rows:337px auto;} */
    .wrap.home .containers .header_wrap{height:337px;}
    .wrap .containers .header_wrap{height:160px;}
    .wrap.collapseUp .containers .header_wrap{height:160px;}

    /* Left Navigation Bar */
    .lnb_wrap{position:absolute;top:0;left:0;width:0px;padding:0;transition:width 0.5s;z-index:9990;}
    .lnb_wrap .logo_wrap .btn_toggle_menu{display:none;}
    .wrap.toggleLnbMB .lnb_wrap{position:fixed;top:0;left:0;display:grid;width:360px;height:100vh;padding:15px 15px 0;z-index:9992;}
    .wrap.toggleLnbMB .logo_wrap .btn_toggle_menu{display:block;}
    .wrap.toggleLnbMB .lnb_wrap .logo_wrap .btn_toggle_menu > label{transform:rotate(0deg);}
    
    .logo_mobile_wrap{display:block;}
    .lnb_wrap .logo_wrap{margin-bottom:10px;}
    .logo_mobile_wrap h1{margin:2px 0 0;}
    .logo_mobile_wrap h1 > a > img{display:block;height:40px;}

    /* Menu Wrap */
    .menu_wrap{height:100%;}
    
    /* Session Header */
    .header_wrap{padding-top:80px;grid-template-rows:70px auto;}
    .header_wrap .btn.btn_collapse{display:none;}
    .header_inner{position:fixed;top:0;left:0;width:100%;padding:17px 25px 0 0;height:80px;background-color:#1F426C;z-index:998;}
    .header_inner .header_profile > a{height:44px;margin-top:2px;padding:0 45px 0 25px;border-radius:27px;border:0;}
    .header_inner .header_profile > a img{top:0;left:0;height:44px;border:4px solid rgba(255, 255, 255, 0.4);border-radius:50%;}
    .header_inner .header_profile > a p{display:none;}
    .header_inner .header_profile > a span{display:none;}

    .item_box{width:calc(60%);}
    .item_box .item{height:100%;width:100%;}
    .item_box.carousel .carousel-inner .carousel-item{display:none;height:100%;}
    .item_box.carousel .carousel-inner .carousel-item.active{display:block;}
    .carousel .carousel-inner .carousel-item:nth-child(1){padding-right:0;}
    .carousel .carousel-inner .carousel-item:nth-child(2){padding-left:0;}
        .carousel-indicators{display:block;}

        /* logo_security_digital_badges */
        .logo_sec_wrap{display:flex;flex-direction:row;bottom:15px;}
        .logo_sec_wrap p{display:block;margin:20px 15px 0;padding:0;font-size:12px;color:#fff;text-align:center;text-shadow:3px 3px 3px #000;}
        .logo_sec_wrap .logo_sec{display:flex;margin:10px 0;gap:10px;}
        .logo_sec_wrap .logo_sec > img{display:block;height:40px;}    
    /* //Session Header */

    /* Containers */
    .containers{display:block;width:100%;padding:0;}
    .cnt_wrap{height:auto;margin:0;padding:0;}
    .cnt_wrap .content{display:block;padding:0;}
    /* .cnt_wrap .content .cnt_inner{grid-template-rows:none;border-radius:0;} */
    .cnt_wrap .content .cnt_inner{display:block;height:auto;grid-template-rows:none;border-radius:0;}
    .cnt_wrap .content .cnt_inner .cnt_box{display:block;height:auto;}
    /* .cnt_wrap .content .cnt_inner .cnt_box{overflow:visible;} */

    /* Session Header */
    .header_inner{padding:12px 20px 0 0;height:70px;}
    .header_inner .header_profile > a{height:40px;margin-top:4px;padding:0 20px 0 20px;}
    .header_inner .header_profile > a::before{background:none;}
    .header_inner .header_profile > a img{height:40px;}
    .header_inner .header_profile .profile_box{width:280px;left:auto !important;right:0 !important;margin-top:5px !important;padding-top:10px;border-radius:27px;}
    .header_inner .header_profile .profile_box .profile_mobile{display:block;}
    .header_inner .header_profile .profile_box .profile_acc.info{border-top:1px dashed #CACACA;}
    /* //Session Header */

    /* Title_wrap */
    .title_wrap{top:86px;height:42px;margin:0;padding:5px 25px 3px 15px;border-radius:0 21px 21px 0;z-index:996;}
    .title_wrap > h2{font-size:16px;line-height:28px;}
    .title_wrap.header{display:none;}

    /* Tab_wrap */ 
    .tab_wrap{position:relative;display:block;margin:-15px 0 0;padding:0;min-height:60px;background-color:#fff;border-bottom:1px solid #E5E5E5; border-radius:15px 15px 0 0;}
    .tab_wrap .tab_inner{position:absolute;top:0;left:0;right:0;display:block;padding:10px 15px 0;overflow-x:auto;white-space:nowrap;scrollbar-width:thin;scrollbar-color:#888 #f1f1f1;scroll-snap-type:x mandatory;}
    .tab_wrap .tab_inner ul li{width:auto;padding:0;scroll-snap-align:start;}
    .tab_wrap .tab_inner ul li a,
    .tab_wrap .tab_inner ul li p{height:38px;margin:0;padding:0;border-radius:0;}
    .tab_wrap .tab_inner ul li a > span,
    .tab_wrap .tab_inner ul li p > span{color:#274D7B;line-height:38px;border-radius:19px;background-color:transparent;}
    .tab_wrap .tab_inner ul li.on a,
    .tab_wrap .tab_inner ul li.on p{position:relative;height:38px;}
    .tab_wrap .tab_inner ul li.on a > span,
    .tab_wrap .tab_inner ul li.on p > span{color:var(--text-white);line-height:38px;background-color:var(--bg-primary);}
    .tab_wrap .tab_inner ul li.on a span::before,
    .tab_wrap .tab_inner ul li.on p span::before{height:0;}
    
    /* User Setting */
    .user_setting{top:calc(350px - 128px);height:115px;left:0;right:0;}
    .user_setting .user_prof_box{top:-70px;width:140px;height:140px;overflow:hidden;z-index:990;}
    .user_setting .tab_wrap{height:38px;min-height:38px;margin-top:-28px;padding:0;}

    .user_setting .tab_wrap .tab_inner{height:auto;padding:0;}
    .user_setting .tab_wrap .tab_inner ul li a,
    .user_setting .tab_wrap .tab_inner ul li p{height:38px;padding:0;}
    .user_setting .tab_wrap .tab_inner ul li a > span,
    .user_setting .tab_wrap .tab_inner ul li p > span{height:38px;line-height:36px;}
    .user_setting .tab_wrap .tab_inner li.on a,
    .user_setting .tab_wrap .tab_inner li.on p{height:calc(100% + 2px);}
    .user_setting .tab_wrap .tab_inner li.on a span,
    .user_setting .tab_wrap .tab_inner li.on p span{border-radius:0;background-color:transparent;}
    
    /* //User Setting */

    /* Search_wrap */
    .search_wrap{position:sticky;top:70px;padding:15px 0 15px;z-index:997;background-color:#fff;}
    .search_wrap .search_box.style1{max-width:400px;}

    
    /* button wrap */
    .btn_wrap .btn.ipad{display:none !important;}

    /* Notification */
    .wrap .alert_wrap{top:85px;left:50%;transform:translateX(-50%);}

    /* Manage Favorite */
    .mana_favo_wrap > ul li{width:50%;}

    /* pagination */
    .pagination_wrap{position:sticky;bottom:0;width:auto;margin:0 -15px;}

    /* pagination */
    /* .pagination_wrap{position:fixed;left:15px;right:15px;bottom:0;width:auto;z-index:9990;} */
    /* pagination */
}