@keyframes Start{ 
from{visibility:hidden}
to{ visibility:visible }
}
@keyframes Preloader{ 
100%{transform:rotate(360deg);}
}

@keyframes Rotate{
from{transform:rotate(0deg) translateZ(0);}
to{transform:rotate(360deg) translateZ(0);}
}

@keyframes fadeIn{
0%{ opacity:0;}
100%{ opacity:1;}
}
@keyframes fadeOut{
0%{ opacity:1;}
100%{ opacity:0;}
}

@keyframes Blur{
0%{ filter:none;}
100%{filter:blur(10px);}
}

@keyframes fadeInUp{
0%{opacity:0;transform:translate3d(0, 100%, 0);}
100%{opacity:1;transform:translate3d(0, 0, 0);}
}

@keyframes fadeInUp2{
0%{opacity:0;transform:translate3d(0, 250px, 0);}
100%{opacity:1;transform:translate3d(0, 0, 0);}
}

@keyframes fadeLeft{
0%{transform:translate3d(100%, 0, 0);}
100%{transform:translate3d(0, 0, 0);}
}

@keyframes outLeft{
0%{transform:translate3d(0, 0, 0);}
100%{transform:translate3d(100%, 0, 0);}
}

@keyframes outRight{
0%{transform:translate3d(0, 0, 0);}
100%{transform:translate3d(-100%, 0, 0);}
}

@keyframes flipInY{
0%{transform:scale(2);filter:blur(10px);opacity:0;}
100%{transform:scale(1);filter:blur(0px);opacity:1;}
}

@keyframes goRight{
0%{opacity:0;transform:translateX(-200px)}
100%{opacity:1;transform:translateX(0)}
}

@keyframes goRight2{
0%{opacity:0;transform:translateX(-100%)}
100%{opacity:1;transform:translateX(0)}
}

@keyframes goLeft{
0%{opacity:0;transform:translateX(200px)}
100%{opacity:1;transform:translateX(0)}
}

@keyframes Bg-ZoomIn{
0%{ transform:scale3d(1, 1, 1) ;}
50%{transform:scale3d(1.2, 1.5, 1.2);}
100%{transform:scale3d(1, 1, 1);}
}

@keyframes TransWidth{
from{opacity:0;transform:scaleX(0)}
to{opacity:1;transform:scaleX(1)}
}

@keyframes flipInX{
0%{transform:perspective(400px) rotateX(30deg) scale(0.8);opacity:0;}
100%{transform:perspective(400px) rotateX(0deg) scale(1);opacity:1;}
}

@keyframes Move-Arrow{  
25%{opacity:1;}
33.3%{opacity:1;transform:translateY(7px);}
66.6%{opacity:1;transform:translateY(14px);}
100%{opacity:0;transform:translateY(21px) scale(0.7);}
}


@keyframes trackBallSlide{
0%{ opacity:1;transform:translateY(-6px);}
15%{ opacity:0;transform:translateY(4px);}
30%{ opacity:1;transform:translateY(-6px);}
50%{ opacity:0;transform:translateY(4px);}
60%{ opacity:1;transform:translateY(-6px);}
100%{ opacity:1;transform:translateY(-6px);}
}

@keyframes ShakeAni{
0%{transform:translate3d(0, 0, 0) rotateZ(0deg);}
15%{transform:translate3d(-10px, 0, 0) rotateZ(5deg);}
30%{transform:translate3d(10px, 0, 0) rotateZ(-10deg);}
45%{transform:translate3d(-10px, 0, 0) rotateZ(10deg);}
70%{transform:translate3d(0, 0, 0) rotateZ(0deg);}
}

/*ANIMATION*/
.fadein{animation-name:fadeIn;animation-duration:1s;animation-fill-mode:forwards;}
.fadeout{animation-name:fadeOut;animation-duration:1s;animation-fill-mode:forwards;}
.fadeinup{animation-name:fadeInUp;animation-duration:1s;animation-fill-mode:forwards;}
.blur{animation-name:Blur;animation-duration:1s;animation-fill-mode:forwards;}
.goright{animation-name:goRight;animation-duration:1s;animation-fill-mode:forwards;}
.goleft{animation-name:goLeft;animation-duration:1s;animation-fill-mode:forwards;}


@media screen and (min-width:1100px){
.ani-item{opacity:0}
.ani-item.on-show{animation:fadeInUp 1s ease forwards;}
.title-main.ani-item.on-show{animation:fadeIn 1s ease forwards;}
.footer-end.ani-item{opacity:1}

/*CUSTOMERCARE*/
.circle-background.ani-item{opacity:0;animation:none}
.circle-background.on-show{animation:goRight2 2s ease 0.5s forwards}

/*CUSTOMERCARE-EXPECT*/
.box-expect.ani-item{opacity:0;animation:none}
.box-expect:nth-child(5).on-show{animation:goRight 1s ease forwards}
.box-expect:nth-child(4).on-show{animation:goRight 1s ease 0.15s forwards}
.box-expect:nth-child(3).on-show{animation:goRight 1s ease 0.3s forwards}
.box-expect:nth-child(2).on-show{animation:goRight 1s ease 0.45s forwards}
.box-expect:nth-child(1).on-show{animation:goRight 1s ease 0.6s forwards}

/*BOX-DIRECT-CHILD(1,2,3,4,5)*/
.box-direct:nth-child(1){margin:10px 30%;}
.box-direct:nth-child(2){margin:10px 10px 10px 15%;}
.box-direct:nth-child(3){margin:10px 15% 10px 10px;}

}


@media screen and (min-width:1100px) and (max-width:1500px){
/*BOX-DIRECT-CHILD(1,2,3,4,5)*/
.box-direct:nth-child(1){margin:8px 30%;}
.box-direct:nth-child(2){margin:8px 8px 8px 15%;}
.box-direct:nth-child(3){margin:8px 15% 8px 8px;}

.total-child{max-height:calc(100vh - 135px);overflow-x:hidden;overflow-y:auto;}
.list-direct-last .box-direct:nth-child(2){margin: 0px 10px 0px 0px;}
.list-direct-last .box-direct:nth-child(3){margin: 0px;}
}

@media screen and (min-width:1100px) and (hover:hover) and (any-pointer:fine){
.list-direct-last .box-direct:nth-child(2){margin: 0px 10px 0px 0px;}
.list-direct-last .box-direct:nth-child(3){margin: 0px;}
/*TRANSITRION ALL*/
.box-news,.input-but button, .social li a::after, .social li a, .apple-store a::before, .play-store a::before, .sub-nav li a, .info-email a, .company-info a, .control-but,.go-prev::after, .go-next::after{transition:all 0.3s ease-in-out;}
.foreground{transition:all 0.5s ease-in-out;}

/*TRANSITRION COLOR*/
.call-number a, .box-ultilities li, .view-more, .show-sub li, .copyright a, .info li a, .load-text a, .details-text a,.list-main-facilities li a, .box-answer a,.list-view li a{transition:color 0.3s ease-in-out;}

/*TRANSITRION BACKGROUND-COLOR*/
.group-left li,.group-right li, .main-menu li, .item-menu, .has-child, .item-menu-second, .view-more span, .go-top,.but, .list-month li{transition:background-color 0.3s ease-in-out;}


/*TRANSITRION FILLTER*/
.item-menu-second span, .has-child span{transition:filter 0.3s ease-in-out;}

/*TRANSITRION WIDTH*/
.view-more::before{transition:width 0.6s ease-in-out;}

/*CLOSE*/
.close::before,.close-video::before,.close-pics::before,.close-album::before,.close-popup::before,.close-details::before{transition:all 0.3s ease-in-out;}
.close:hover::before, .close-video:hover::before, .close-pics:hover::before, .close-album:hover::before, .close-popup:hover::before, .close-details:hover::before{transform:rotate(90deg);}

/*DATEPICKER*/
.ui-datepicker td span, .ui-datepicker td a{transition:all 0.2s ease-in-out;}
.ui-datepicker .ui-datepicker-prev span{transition:all 0.2s ease-in-out;}
.ui-datepicker .ui-datepicker-next span{transition:all 0.2s ease-in-out;}
.ui-datepicker .ui-datepicker-prev span:hover{opacity:0.5;transform:translateX(-2px)}
.ui-datepicker .ui-datepicker-next span:hover{opacity:0.5;transform:translateX(2px)}
.ui-widget-header .ui-state-default a:hover{background-color:#ec2028;}
.ui-datepicker-close{transition:all 0.3s ease-in-out;}
.ui-datepicker-close:hover{background-color:#ec2028!important}
.ui-datepicker-trigger:hover{opacity:0.5;}

/*HEADER*/
.nav-click:not(.active):hover .line-one{width:46px;}
.nav-click:not(.active):hover .line-two{width:36px;}
.nav-click:not(.active):hover .line-three{width:36px;}
.nav-click.active:hover{color:#ec2028}
.call-number a:hover{color:#1b4486}
.group-left li:hover, .group-right li:hover{background-color:#3864af;}
.main-menu li:hover{background-color:#3864af;}
.item-menu:hover{background-color:rgba(27,68,134,1);}
.item-menu-second:hover{background-color:#ec2028;}
.item-menu-second:hover > a span{filter:grayscale(1) brightness(600%);}
.has-child:hover{background-color:#ec2028;}
.has-child:hover > a span{filter:grayscale(1) brightness(600%);}
.item-menu-second:hover > .child-button span{filter:grayscale(1) brightness(600%);}
.has-child:hover > .child-button span{filter:grayscale(1) brightness(600%);}

/*LANGUAGE*/
.language:hover li.active{background-color:#e4e9f0;}
.language:hover li{ box-shadow:2px 8px 10px 0 rgba(0,0,0,0.1)}
.language:hover ul{height:120px}
.language:hover .arrow-click::after{border-color:#ec2028 transparent transparent transparent;}

/*SUB NAV*/
.sub-nav li:hover a{background-color:#ec2028;color:#fff;}

/*BUTTON AND TEXT LINK [A]*/
.input-but button:hover{background-color:#1b4486;box-shadow:5px 5px 15px rgba(0,0,0,0.08)}
.go-top:hover{background-color:#ec2028;box-shadow:0 20px 30px 0 rgba(0,0,0,0.2)}
.info-email a:hover{background-color:#ec2028;box-shadow:0 20px 30px 0 rgba(0,0,0,0.2)}
.company-info a:hover, .control-but:hover{color:#ec2028;}
.list-month li:hover{background-color:#ec2028;}
.but:hover{ background-color:#3864af}
.calculator .control-but:hover{background-color:#fff;box-shadow:0 10px 20px rgba(0,0,0,0.1)}
.go-prev:hover::after, .go-next:hover::after{ background-color:#ec2028}
.load-text a:hover{color:#ec2028}
.control::after{transition:background-color 0.3s ease-in-out;}
.control:hover::after{background-color:rgba(0,0,0,0.5);}
.control button{transition:all 0.3s ease-in-out;}
.control button:hover{opacity:0.5;}
.player-vid:hover{background-color:rgba(0,0,0,0.3);}
.details-text a:hover{color:#ec2028;}
.list-main-facilities li a:hover{color:#ec2028;}
.box-answer a:hover{color:#ec2028;}
.list-view li a:hover{color:#ec2028 !important;}

/*FOOTER*/
.show-sub li:hover, .copyright a:hover, .info li a:hover{color:#ec2028}
.apple-store a:hover::before, .play-store a:hover::before{ background-size:150% 150%;box-shadow:0 20px 30px 0 rgba(0,0,0,0.2)}

/*SOCIAL*/
.social li:hover .foreground{stroke-dashoffset:0;}
.social li:hover a{color:#ec2028}

/*HOME*/
.box-ultilities li:hover{color:#ec2028}
.box-news:hover{background-color:#3762ae;color:#fff}
.box-news:hover .view-more{color:#ec2028;}
.box-news:hover .view-more::before{width:0}
.box-news:hover .view-more span{background-color:#3762ae;}
.box-news:hover .date-thumb{color:#fff}

/*LIST CONTENT*/
.list-item:not(.active) .list-title:hover .list-arrow{color:#fff;}
.list-item:not(.active) .list-title:hover .list-arrow::after{transform:rotate(90deg);filter:grayscale(1) brightness(600%);}
.list-item:not(.active) .list-title:hover{background-color:#1b4486}
.list-item:not(.active) .list-title:hover h3{color:#fff}
.list-item:not(.active) .list-title:hover .list-num{color:#fff;border-color:#fff}

.list-item-group:not(.open-group) .list-title-group:hover{background-color:#6a84af}
.list-item-group:not(.open-group) .list-title-group:hover h3{color:#fff}


/*ABOUT-CHART*/
.zoom, .zoom::after{transition:all 0.3s ease-in-out;}
.zoom:hover{transform:scale(0.98)}
.zoom:hover::after{background:#ec2028 url(../images/zoom-white.svg) center center/contain;border-color:#fff}


/*ABOUT-MANAGER*/
.box-direct{cursor:pointer;}
.box-direct::after, .des-manager h3, .view-info-leader, .view-info-leader::after, .direct-pic, .list-title-manager::after{transition:all 0.3s ease-in-out;}
.box-direct:hover::after{background-color:#ec2028 !important;}
.list-title-manager::after{opacity:0.8}
.box-direct:hover .des-manager h3{color:#fff !important}
.box-direct:hover .view-info-leader{color:#fff !important}
.box-direct:hover .view-info-leader::after{background:url(../images/list-icon-white.svg) no-repeat center center/contain}
.pic-img{transition:all 0.4s ease-in-out}
.box-direct:hover .pic-img{transform:scale(1.05)}
.box-direct:hover .direct-pic{box-shadow:0px 10px 30px rgba(0 ,0 ,0 ,0.1);}
.list-title-manager:hover::after{opacity:1;transform:scale(1.05)}

/*ABOUT-SOCIAL*/
.news-item{cursor:pointer;}
.news-item, .txt-news h3, .news-item .view-more span, .date-thumb, .news-item p{transition:all 0.3s ease-in-out;}
.news-item:hover{background-color:#1b4486;box-shadow:5px 5px 15px rgba(255 ,255 ,255 ,0.1)}
.news-item:hover .txt-news h3{color:#fff}
.news-item:hover .view-more{color:#ec2028}
.news-item:hover .view-more span{color:#ec2028;background-color:#1b4486;padding:0 10px 0 10px}
.news-item:hover .date-thumb{background-color:#1b4486;color:#fff}
.news-item:hover .view-more::before{width:0;}
.news-item:hover p{color:#fff}
.wrap-view-more .input-but button:hover{background-color:#ec2028}
.view-more-text .input-but button:hover, .view-more-service .input-but button:hover{background-color:#ec2028}


/*PRINT-SHARE*/
.print-box > button, .print-box > button::before{transition:all 0.3s ease-in-out;}
.print-box > button:hover, .print-box > button.active{background-color:#ec2028;color:#fff}
.save-but:hover::before, .save-but.active::before{background:url(../images/icon-share/favorite-white.svg) no-repeat 50% / 80%;}
.print-but:hover::before, .print-but.active::before{background:url(../images/icon-share/print-white.svg) no-repeat 50% / 80%;}
.share-but:hover::before, .share-but.active::before{background:url(../images/icon-share/share-white.svg) no-repeat 50% / 80%;}
.share-item li a::after, .share-item li a::before{transition:all 0.3s ease-in-out;}
.share-item li a:hover::after{opacity:1}
.share-item li a:hover::before{opacity:0}
.share-item li:hover{color:#ec2028;border-color:#ec2028;transition-delay:0s !important}
.share-item li{transition:all 0.3s cubic-bezier(.44,.39,.34,1.03);}

/*NEWS-DETAILS-PAGE*/
.load-text.on-show{animation:fadeInUp2 1s ease forwards}

/*ABOUT-US*/
.more-text{transition:all 0.3s ease-in-out;}
.more-text:hover{color:#ec2028}
.more-text .wheel-submit span:after, .more-text .wheel-submit span:before{transition:all 0.3s ease-in-out;}
.more-text:hover .wheel-submit span:after, .more-text:hover .wheel-submit span:before{background-color:rgba(236, 32, 40, 0.8)}
.more-text:hover .wheel-submit span{animation-play-state:paused;}


/*INVESTOR-PAGE*/
.list-outer, .r-text p, .wrap-rlink p, .r-pdf, .r-num, .r-left::after{transition:all 0.3s ease-in-out;}
.list-box:hover .list-outer{background-color:#1b4486}
.list-box:hover .r-text p{color:#fff}
.list-box:hover .wrap-rlink p{color:#fff}
.list-box:hover .r-pdf{transform:translateY(-5px)}
.list-box:hover .r-num{color:#fff}
.list-box:hover .r-left::after{background-color:rgba(255, 255, 255, 0.6)}

/*CUSTOMERCARE*/
.list-customer-contact li a{transition:all 0.3s ease-in-out;}
.list-customer-contact li a:hover{color:#ec2028}
.bg-cover.on-show{animation:fadeIn 1.5s ease forwards}

/*CURSTOMERCARE-EXPECT*/
.box-expect h3{transition:all 0.3s ease-in-out}
.box-expect:hover .pic-img{filter:drop-shadow(0 0 20px rgba(255, 255, 255, 0.4));animation:ShakeAni 2s ease-out infinite;}
.box-expect:hover h3{color:#ec2028}

/*CUSTOMERCARE-REGIS*/
.button-style, .button-style::after{transition:all 0.3s ease-in-out}
.button-style:hover{background-color:#ec2028;box-shadow:0 10px 30px rgba(255 ,255 ,255 ,0.3);}
.red-button-style:hover{ background-color:#1b4486}
.button-style:hover::after{transform:rotate(90deg) scale(1.15)}

/*HAS-BODER-STYLE*/
.border-style{transition:all 0.3s ease-in-out}
.has-border-style:hover .border-style{border-color:#ffdbdc}


/*CUSTOMERCARE-FAQ*/
.sub-nav-ex li a{transition:all 0.3s ease-in-out}
.sub-nav-ex li{background-color:#d4def1;transition:all 0.3s ease-in-out;}
.sub-nav-ex li:hover{background-color:#ec2028}
.sub-nav-ex li:hover a{color:#fff}

/*CONTACT-DOWNLOAD*/
.items-children a{transition:all 0.3s ease-in-out;}
.items-children a:hover{color:#ec2028}

/*GOOGLE-MAP*/
.gm-style [title="Zoom in"], .gm-style [title="Zoom out"], .gm-fullscreen-control::after{transition:all 0.3s ease-in-out;}
.gm-style [title="Zoom in"]:hover ,.gm-style [title="Zoom out"]:hover{background-color:#ec2028 !important}
.gm-fullscreen-control:hover::after{background-color:#ec2028 !important}

/*NETWORD-BRANCH*/
.right-agen .email-agen,.right-agen .calendar-agen, .list-view li ,.list-view h3, .list-view p, .list-view a{transition:all 0.3s ease-in-out;}
.right-agen .email-agen:hover{background:#ec2028 url(../images/footer-icon/email-white.svg) no-repeat 50%/70%}
.right-agen .calendar-agen:hover{background:#ec2028 url(../images/footer-icon/calendar-white.svg) no-repeat 50%/70%}
.list-view li:hover{background-color:#1b4486}
.list-view li:hover p, .list-view li:hover h3, .list-view li:hover a{color:#fff}

/*NETWORK-SELECT*/
.network-input-select .input-select::after{transition:all 0.3s ease-in-out;}
.network-section .select2-container--flat .select2-selection--single .select2-selection__rendered:hover{color:#1b4486}
.network-input-select .input-select:hover .select2, .network-input-select .input-select .select2.select2-container--open{border-color:#1b4486}
.network-input-select .input-select:hover .select2::after, .network-input-select .input-select .select2.select2-container--open::after{background: url(../images/arrow-down-white.svg) no-repeat center center/contain;background-color: rgba(27, 68, 134, 1);}

/*VIEW-DETAILS*/
.view-details ,.view-details::after{transition:all 0.3s ease-in-out;}
.view-details:hover{color:#ec2028;}
.view-details:hover::after{background-color:#ec2028;width:70px;}

/*TIME-DEPOSIT*/
.box-deposit{cursor: pointer;}
.box-deposit, .title-personal h3, .text-deposit p, .wrap-box-deposit{transition:all 0.3s ease-in-out;}
.box-deposit:hover{background-color:#3762ae}
.box-deposit:hover .wrap-box-deposit{border-color:rgba(255, 255, 255, 0.6)}
.box-deposit:hover .title-personal h3, .box-deposit:hover .text-deposit p{color:#fff}
.box-deposit:hover .view-details{color:#ec2028}
.box-deposit:hover .view-details::after{background-color:#ec2028;width:70px;}

.box-deposit .button-style::before{transition:all 0.3s ease-in-out}
.box-deposit .button-style:hover::before{border-width:0}

/*PERSONAL-DETAILS-PAGE*/
.box-rel-products{transition:all 0.3s ease-in-out;cursor: pointer;}
.text-rel-products h3{transition:all 0.3s ease-in-out;}
.box-rel-products:hover{background-color:#3864af}
.box-rel-products:hover .text-rel-products h3{color:#fff}

/*SELECT-HEADER*/
.select-header, .select-header::after, .select-header h3{transition:all 0.3s ease-in-out;}
.select-header{cursor:pointer;}
.select-header:hover, .select-header.onclick{border-color:#1b4486}
.select-header:hover h3, .select-header.onclick h3{color:#1b4486}
.select-header:hover::after{background:url(../images/arrow-down-white.svg) no-repeat center center/contain;background-color:rgba(27, 68, 134, 1)}
.select-header.onclick::after{background:url(../images/arrow-down-white.svg) no-repeat center center/contain;background-color:rgba(27, 68, 134, 1);width:39px;height:39px;}
.select-box li{transition:all 0.3s ease-in-out}
.select-box li:hover{background-color:#ec2028}

/*CARD-LIST*/
.box-card{transition:all 0.3s ease-in-out;cursor: pointer;}
.box-card:hover{background-color:#ec2028}

/*MOBILE-BANKING*/
.box-download-pdf a{transition:all 0.3s ease-in-out;}
.box-download-pdf a:hover{color:#ec2028}

/*EXCHANGE-PAGE*/
.input-exchange::after{transition:all 0.3s ease-in-out;}
.input-exchange:hover::after{background: url(../images/arrow-down-white.svg) no-repeat center center/contain;background-color: rgba(27, 68, 134, 1);}

/*GOOGLE MAP*/
.gm-ui-hover-effect::after{transition:all 0.3s ease-in-out;}
.gm-ui-hover-effect:hover::after{background-color:#ed1c24}

/*BREADCRUMBS*/
.breadcrumbs li a{transition:all 0.3s ease-in-out;}
.breadcrumbs li a:hover{color:#ec2028}

/*LOOK-UP-PAGE*/
.view-details-pdf{transition:all 0.3s ease-in-out;}
.view-details-pdf:hover{color:#ec2028}

/*WALLET-PAGE*/
.wallet-box{transition:all 0.3s ease-in-out;cursor: pointer;}
.wallet-box h3{transition:all 0.3s ease-in-out;}
.wallet-box:hover h3{color:#ec2028}
.wallet-box:hover .pic-img{filter:drop-shadow(0 0 20px rgba(0, 0, 0, 0.2));transform:scale(1.07)}


}