/* CSS Log - 2024/05/14 js-version.0.11.2 rev.0 */
:root {
scroll-behavior: auto !important;
--color-primary: #00A94F;
--color-secondary: #18A94F;
--color-light: #ffffff;
--color-gray: #BCBCBC;
--color-dark: #666666;
--color-green2: #00EA6D;
--color-green3: #7DAC92;
--bg-primary: #E5F6ED;
--bg-secondary: #F8F8FA;
--bg-green: #005A2A;
--color-border: #E6E6E6;
--margin-standard: 10px;
--transition: .3s ease-in-out;
--delay: .2s;
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-family: "kurious-looped";
font-size: 10px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
padding: 0;
font-family: "kurious-looped";
font-weight: 500;
font-size: 16px;
line-height: 1.4;
color: var(--color-dark);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
footer,
header,
hgroup,
main,
menu,
nav {
display: block;
}
img {
border: 0;
max-width: 100%;
vertical-align: middle;
}
a {
color: inherit;
text-decoration: none;
border: 0;
outline: none;
cursor: pointer;
-webkit-transition: color ease-in-out .2s;
-o-transition: color ease-in-out .2s;
transition: color ease-in-out .2s;
}
a:hover,
a:focus {
color: inherit;
text-decoration: none;
outline: 0;
outline-offset: 0;
}
.action-keyword-search {
padding-left: 24px;
}
.action-keyword-search button {
margin-top: 3px !important;
}
#navigation-header,
#navigation-footer {
font-family: "kurious-looped";
font-weight: 500;
font-size: 16px;
line-height: 1.5;
color: var(--color-dark);
display: block;
width: 100%;
z-index: 1900;
}
#navigation-footer {
overflow: hidden;
}
#navigation-header.sticky-top,
#navigation-footer.sticky-top {
position: sticky;
top: 0
}
#navigation-header .a-center,
#navigation-footer .a-center {
text-align: center;
}
#navigation-header .a-right,
#navigation-footer .a-right {
text-align: right;
}
#navigation-header .a-left,
#navigation-footer .a-left {
text-align: left;
}
#navigation-header .txt-number,
#navigation-footer .txt-number {
font-size: 48px;
line-height: 0.9;
font-weight: 500;
}
#navigation-header .panel-menu-list i,
#navigation-header .footer-contact > div i,
#navigation-footer .panel-menu-list i {
font-size: 24px;
font-weight: 500;
}
#navigation-header .panel-menu-list,
#navigation-footer .footer-contact > div i {
font-size: 18px;
line-height: 1.4;
/* font-weight: 500; */
}
#navigation-header .panel-footer-inner .panel-menu-list {
font-size: 16px;
font-weight: 500;
padding: 9px 16px;
}
#navigation-header .panel-footer-inner .panel-menu-list.link-to {
display: block;
}
#navigation-header .panel-footer-inner .panel-menu-list.link-go {
display: block;
}
#navigation-header .panel-menu-list-lv2 a,
#navigation-header .txt-tel,
#navigation-footer .txt-tel {
font-size: 16px;
font-weight: 500;
}
#navigation-header .footer-contact-lang a,
#navigation-footer .footer-contact-lang a,
#navigation-header .btn-login {
font-size: 14px;
font-weight: 500;
}
#navigation-header .topbar-menu-inner {
font-size: 13px;
line-height: 1;
font-weight: 500;
}
.show{
display: block!important;
}
@media screen and (min-width: 200px) {
#navigation-header .panel-tab-menu a {
font-size: 16px;
}
.slick-slide img.hidden-mobile {
display: none;
}
.slick-slide img.visible-mobile {
display: block;
}
.slick-slide img.visible-tablet {
display: none;
}
.hidden-mobile {
display: none;
}
.hidden-desktop {
display: none;
}
.visible-mobile {
display: block;
}
#navigation-header .menu-logo-lv2 a:hover img {
transform: scale(1);
transition: transform 300ms;
}
/*header*/
#navigation-header,
.header {
position: sticky;
left: 0;
top: 0;
}
#navigation-header .header-mobile {
position: relative;
width: 100%;
z-index: 105;
transition: var(--transition);
left: 0;
top: 0;
}
#navigation-header .header-mobile.hide {
left: 0%;
display: block !important;
}
#navigation-header .header-inner {
display: flex;
z-index: 1;
align-items: center;
height: 60px;
padding: 0 16px;
justify-content: space-between;
}
#navigation-header .header-inner > div {
display: inline-flex;
}
#navigation-header .logo-kbank {
width: 125px;
}
#navigation-header .logo-kbank .logo1 {
display: block;
}
#navigation-header .logo-kbank .logo2 {
display: none;
}
#navigation-header .header-mobile {
border-bottom: 1px solid #F1F1F1;
background-color: var(--color-light);
}
#navigation-header .logo-kbank .logo1 {
display: none;
}
#navigation-header .logo-kbank .logo2 {
display: block;
}
#navigation-header .header-right a {
color: var(--color-dark);
}
#navigation-header .icw-bar {
background: var(--color-dark);
}
#navigation-header.fixed-bar .header-mobile {
border-bottom: 1px solid #F1F1F1;
background-color: var(--color-light);
}
#navigation-header.fixed-bar .logo-kbank .logo1 {
display: none;
}
#navigation-header.fixed-bar .logo-kbank .logo2 {
display: block;
}
#navigation-header.fixed-bar .header-right a {
color: var(--color-dark);
}
#navigation-header.fixed-bar .icw-bar {
background: var(--color-dark);
}
#navigation-header.fixed:not(.tiny) {
background: none;
box-shadow: none;
}
#navigation-header.fixed:not(.tiny) .header-mobile {
background: none;
border: none;
}
#navigation-header.fixed:not(.tiny) .logo1 {
display: block;
}
#navigation-header.fixed:not(.tiny) .logo2 {
display: none;
}
#navigation-header.fixed:not(.tiny) .header-right a {
color: var(--color-light);
}
#navigation-header.fixed:not(.tiny) .icw-bar {
background: var(--color-light);
}
@media screen and (min-width: 200px) {
#navigation-header.fixed:not(.tiny) .header-mobile {
background: none;
border: none;
}
}
.panel-open {
pointer-events: none;
touch-action: none;
overflow: hidden;
}
.panel-open #navigation-header {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--color-light);
}
.panel-open #navigation-header .header-mobile {
background-color: var(--color-light);
border-bottom: none;
pointer-events: visible;
}
.panel-open #navigation-header .logo-kbank .logo1 {
display: none;
}
.panel-open #navigation-header .logo-kbank .logo2 {
display: block;
}
.panel-open #navigation-header .header-right a {
color: var(--color-dark);
}
/*menu*/
#navigation-header .bottombar-nav-list i.ic-nvg.ic-bookbank1,
#navigation-header .bottombar-nav-list i.ic-nvg.ic-credit-card {
font-size: 16px;
}
#navigation-header .button-menu {
width: 45px;
}
#navigation-header .mnu-btn {
cursor: pointer;
position: relative;
z-index: 99;
width: 22px;
height: 20px;
margin: 5px 0 0 0px;
transition: var(--transition);
}
#navigation-header .icw-bar {
display: block;
position: absolute;
width: 100%;
height: 2px;
opacity: 1;
border-radius: 8px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
}
#navigation-header .mnu-btn span:nth-child(1) {
top: 0;
}
#navigation-header .mnu-btn span:nth-child(2) {
top: 8px;
}
#navigation-header .mnu-btn span:nth-child(3) {
top: 16px;
}
#navigation-header .mnu-btn.active .bar-top,
#navigation-header .mnu-btn.active .bar-middle,
#navigation-header .mnu-btn.active .bar-bottom {
background-color: var(--color-dark);
}
#navigation-header .mnu-btn.active .bar-top {
top: -3px;
transform: translateY(12px) rotate(45deg);
-webkit-transform: translateY(12px) rotate(45deg);
-moz-transform: translateY(12px) rotate(45deg);
}
#navigation-header .mnu-btn.active .bar-middle {
opacity: 0;
}
#navigation-header .mnu-btn.active .bar-bottom {
top: 21px;
transform: translateY(-12px) rotate(-45deg);
-moz-transform: translateY(-12px) rotate(-45deg);
-webkit-transform: translateY(-12px) rotate(-45deg);
}
#navigation-header .header-inner > div.header-right {
color: var(--color-light);
font-size: 22px;
margin-top: 6px;
}
#navigation-header .header-right a {
display: inline-block;
width: 22px;
margin-right: 21px;
}
#navigation-header .header-right a.main_nav_header i{font-size: 28px;}
#navigation-header .header-right a.link-login i{font-size: 26px;position: relative; top: 1px;}
#navigation-header .header-right a.btn {
font-size: 22px;
}
/* #navigation-header .header-right a[title="à ¸„à ¹‰à ¸™à ¸«à ¸²"] {
display: none;
} */
/* Panel Nav */
.panel-open #navigation-header .panel-nav {
height: 100vh;
visibility: visible;
opacity: 1;
background-color: var(---color-light);
}
.panel-open #navigation-header .panel-switch > div {
pointer-events: visible;
}
.panel-open #navigation-header .header {
z-index: 105;
}
.panel-open #navigation-header .header .header-inner {
box-shadow: none;
}
#navigation-header .panel-nav {
width: 100%;
height: 0;
position: fixed;
top: 0;
left: 0;
bottom: 0;
opacity: 0;
z-index: 104;
visibility: hidden;
pointer-events: none;
transition: var(--transition);
}
#navigation-header .panel-switch > div {
padding-left: 16px;
padding-right: 16px;
pointer-events: none;
}
#navigation-header .panel-body-inner {
background-color: var(--color-light);
padding-bottom: 24px;
}
#navigation-header .panel-footer-inner {
background-color: var(---color-light);
position: relative;
padding-top: 24px;
padding-bottom: 24px;
}
#navigation-header .panel-footer-inner:before {
content: '';
position: absolute;
top: 0;
left: 15px;
right: 15px;
height: 1px;
background-color: var(--color-border);
}
#navigation-header .panel-footer-inner .panel-menu-product + .panel-menu-product {
margin-top: 0;
}
#navigation-header .panel-footer-product {
display: none;
}
#navigation-header .panel-footer-product.active {
display: block;
}
/*level 1*/
#navigation-header .panel-menu-product + .panel-menu-product {
margin-top: 8px;
}
#navigation-header .panel-menu-list {
padding: 13px 16px 10px;
position: relative;
z-index: 2;
}
#navigation-header .panel-menu-list i {
margin-right: var(--margin-standard);
vertical-align: middle;
width: 25px;
display: inline-block;
text-align: center;
position: relative;
top: -3px;
z-index: 1;
}
#navigation-header .panel-menu-list:after {
font-family: 'iconavigation';
content: "\e906";
font-size: 10px;
position: absolute;
right: 18px;
top: calc(50% - 6px);
color: var(--color-dark);
}
#navigation-header #menu-3.panel-menu-list.active {
border-bottom: 0px solid var(--color-dark);
}
#navigation-header .panel-menu-list.active {
color: var(--color-primary);
background-color: var(--bg-primary);
font-weight: bold;
border-radius: 8px 8px 0 0;
}
#navigation-header .panel-menu-list.active:after {
color: var(--color-primary);
content: "\e907";
top: calc(50% - 5px);
}
/*level 2*/
#navigation-header .panel-menu-list-lv2 {
display: none;
font-size: 0;
border-radius: 0 0 8px 8px;
background-color: var(--bg-secondary);
}
#navigation-header .panel-menu-list-lv2 ul {
padding: 18px 16px;
}
#navigation-header .panel-menu-list-lv2 ul li {
list-style: none;
margin-bottom: 18px;
}
#navigation-header .panel-menu-list-lv2 ul li:last-child {
margin-bottom: 0px;
}
#navigation-header hr.line-memu {
margin: 0 16px;
border-left: 0;
border-right: 0;
border-bottom: 0;
border-top: 1px solid #EBEBEB;
}
#navigation-header .panel-menu-list-lv2 ul li a {
display: block;
padding: 0 0;
position: relative;
}
#navigation-header .panel-menu-list-lv2 i {
font-size: 16px;
color: var(--color-primary);
width: 32px;
height: 32px;
border-radius: 100%;
background-color: var(--color-primary);
margin-right: 8px;
padding: 8px 0;
display: inline-block;
text-align: center;
}
#navigation-header .panel-menu-list-lv2 i.ic-nvg.ic-bookbank1,
#navigation-header .panel-menu-list-lv2 i.ic-nvg.ic-credit-card {
font-size: 14px;
}
#navigation-header i.ic-nvg.ic-line2 {
font-size: 13px;
position: relative;
top: -1px;
}
#navigation-footer .footer-contact > div i.ic-nvg.ic-line2 {
font-size: 13px;
position: relative;
top: -3px;
}
#navigation-header .panel-menu-list-lv2 ul.menu-list-lv2 li a:after,
#navigation-header .panel-menu-list-lv2 ul.menu-logo-lv2 li a span:after {
font-family: "iconavigation";
content: "\e900";
font-size: 10px;
position: absolute;
right: 3px;
top: calc(50% - 6px);
color: var(--color-dark);
}
#navigation-header .panel-menu-list-lv2 ul.menu-list-lv2 li.no-sub a:after {
display: none;
}
#navigation-header .panel-menu-list-lv2 ul.menu-logo-lv2 {
padding: 18px 16px;
}
#navigation-header .panel-menu-list-lv2 ul.menu-logo-lv2 img {
border-radius: 10px;
overflow: hidden;
}
#navigation-header .panel-footer-inner .panel-menu-list:before {
display: none;
}
#navigation-header .panel-footer-inner .panel-menu-list:after {
font-family: "iconavigation";
content: "\e900";
}
#navigation-header .panel-menu-list-lv2 ul.menu-logo-lv2 li a span {
display: none;
}
/*#navigation-header .panel-menu-list-lv2 ul.menu-logo-lv2.n2 {padding-bottom: 10px; margin-bottom: 0;}*/
#navigation-header .panel-tab-menu {
border-radius: 25px;
background-color: var(--color-primary);
text-align: center;
font-size: 0;
}
#navigation-header .panel-tab-menu a {
width: calc(100% / 3 - 2px);
display: inline-block;
line-height: 37px;
margin: 3px 0;
font-weight: bold;
color: var(--color-light);
padding: 0;
border-radius: 20px;
}
#navigation-header .panel-tab-menu a.active {
background-color: var(--color-light);
box-shadow: 0 0 16px rgb(0 255 121 / 64%);
color: var(--color-primary);
}
#navigation-header .tab-content {
display: none;
}
#navigation-header .tab-content.active {
display: block;
}
#navigation-header .panel-title {
font-size: 20px;
font-weight: bold;
line-height: 1.5;
color: var(--color-dark);
text-align: center;
padding-top: 24px;
padding-bottom: 16px;
}
#navigation-header .slick-type {
padding-bottom: 48px;
margin-left: -15px;
margin-right: -15px;
}
#navigation-header .slick-list {
overflow: visible;
}
#navigation-header .list-type {
width: 236px;
transform: scale(.85);
transition: var(--transition);
}
#navigation-header .list-type.slick-center {
transform: scale(1);
}
#navigation-header .list-wrapper {
border-radius: 8px;
overflow: hidden;
position: relative;
display: block;
transition: var(--transition);
}
#navigation-header .list-wrapper:before {
content: '';
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%);
z-index: 1;
pointer-events: none;
}
#navigation-header .list-title {
font-size: 20px;
font-weight: bold;
line-height: 1.5;
position: absolute;
z-index: 1;
top: 0;
left: 0;
right: 0;
padding: 16px;
color: var(--color-dark);
}
#navigation-header .list-thumb {
position: relative;
overflow: hidden;
border-radius: 8px;
}
#navigation-header .list-thumb img {
transition: var(--transition);
}
#navigation-header .list-content {
position: absolute;
z-index: 1;
left: 0;
right: 0;
bottom: 0;
padding: 16px;
font-size: 14px;
line-height: 1.2;
color: var(--color-light);
}
#navigation-header .list-content strong {
font-weight: bold;
}
#navigation-header .list-number {
font-family: "kurious-looped";
font-size: 72px;
line-height: 0.5;
}
#navigation-header .list-arrow {
background-color: var(--color-primary);
border: 1px solid var(--color-primary);
opacity: 0;
display: inline-block;
width: 24px;
height: 24px;
line-height: 20px;
text-align: center;
right: 16px;
bottom: 24px;
border-radius: 100%;
position: absolute;
z-index: 2;
transition: var(--transition);
}
#navigation-header .list-arrow:after {
font-family: "iconavigation" !important;
content: "\e900";
font-size: 10px;
color: var(--color-light);
}
#navigation-header .slick-center .list-wrapper {
box-shadow: 0 0 12px rgba(0, 0, 0, 0.32);
}
#navigation-header .slick-center .list-arrow {
opacity: 1;
}
#navigation-header ul.slick-dots {
margin: 32px 0 0;
padding: 0;
text-align: center;
}
#navigation-header ul.slick-dots > li {
margin-bottom: 0;
margin-left: 4px;
margin-right: 4px;
display: inline-block;
vertical-align: middle;
}
#navigation-header ul.slick-dots button {
width: 8px;
height: 8px;
border-radius: 50%;
display: block;
font-size: 0;
padding: 0;
text-shadow: none;
border: 0;
background-color: var(--color-dark);
}
#navigation-header ul.slick-dots .slick-active button {
background-color: var(--color-primary);
}
/*level 3*/
#navigation-header ul.panel-list {
margin: -8px;
padding: 0 20px 48px;
}
#navigation-header ul.panel-list:after {
content: '';
display: table;
clear: both;
}
#navigation-header ul.panel-list > li {
list-style: none;
width: calc(100% / 2);
padding: 8px;
float: left;
}
#navigation-header .panel-list-wrapper {
border-radius: 8px;
overflow: hidden;
position: relative;
display: block;
transition: var(--transition);
}
#navigation-header .panel-list-wrapper:before {
content: '';
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%);
z-index: 1;
pointer-events: none;
border-radius: 0 0 8px 8px;
overflow: hidden;
}
#navigation-header .panel-list-thumb {
position: relative;
overflow: hidden;
border-radius: 8px;
}
#navigation-header .panel-list-thumb img {
transition: var(--transition);
object-fit: cover;
}
#navigation-header .panel-list-content {
font-size: 16px;
font-weight: bold;
color: var(--color-light);
text-align: center;
position: absolute;
z-index: 1;
left: 0;
right: 0;
bottom: 0;
padding: 16px;
}
#navigation-header .panel-list-content:after {
font-family: "iconavigation" !important;
content: "\e900";
margin-left: 8px;
display: inline-block;
vertical-align: middle;
font-size: 10px;
}
#navigation-header .panel-switch {
position: relative;
left: 0;
-webkit-box-flex: 0;
flex: 0 0 100%;
max-width: 100%;
width: 100vw;
transition: var(--transition);
background-color: var(--color-light);
top: 60px;
overflow: auto;
pointer-events: visible;
display: flex;
flex-direction: column;
height: calc(var(--vh, 1dvh) * 100 - 60px);
justify-content: space-between;
}
#navigation-header .panel-switch.hide {
left: -100vw;
display: block !important;
}
#navigation-header .panel-submenu {
position: fixed;
left: 100%;
top: 60px;
/* height: calc(var(--vh, 1vh) * 100 - 60px); */
height: calc(100dvh - 60px);
width: 100vw;
overflow: hidden;
pointer-events: none;
transition: var(--transition);
-webkit-box-flex: 0;
flex: 0 0 100%;
max-width: 100%;
}
#navigation-header .panel-submenu.active {
left: 0;
overflow: auto;
pointer-events: visible;
background-color: var(--color-light);
}
#navigation-header .panel-sub-header {
display: flex;
align-items: center;
height: 48px;
padding: 0 16px;
justify-content: space-between;
width: 100%;
flex-wrap: nowrap;
background-color: var(--bg-primary);
/*margin-top: 60px;*/
}
#navigation-header .panel-sub-header .col {
flex-basis: 0;
-webkit-box-flex: 1;
flex-grow: 1;
max-width: 100%;
}
#navigation-header .panel-sub-header .btn-back {
font-size: 16px;
line-height: 1;
color: var(--color-primary);
}
#navigation-header .panel-sub-header .btn-back:before {
font-family: "iconavigation" !important;
content: "\e900";
font-size: 10px;
display: inline-block;
vertical-align: middle;
margin-right: 8px;
margin-top: -2px;
transform: rotate(180deg);
}
/*#navigation-header .panel-sub-header .h-title{text-align: right; font-size: 20px; font-weight: bold; line-height: 1.5; color: var(--color-light);}
#navigation-header .panel-sub-header .h-title .ic-nvg{margin-right: 10px; font-size: 24px; position: relative; bottom: -5px;}*/
#navigation-header .panel-sub-body {
padding: 0;
min-height: calc(var(--vh, 1vh) * 100 - 200px);
background-color: var(--color-light);
}
#navigation-header .panel-sub-info {
padding: 0 16px;
}
#navigation-header .panel-sub-top {
display: flex;
align-items: center;
height: 80px;
position: relative;
border-bottom: 1px solid var(--color-dark);
color: var(--color-dark);
font-size: 20px;
font-weight: bold;
}
#navigation-header .panel-sub-top .ic-nvg {
color: var(--color-light);
font-size: 24px;
border-radius: 100%;
overflow: hidden;
background-color: var(--color-primary);
width: 48px;
height: 48px;
line-height: 48px;
text-align: center;
margin-right: 10px;
}
#navigation-header .panel-sub-top .arrow {
position: absolute;
width: 24px;
height: 24px;
text-align: center;
line-height: 18px;
border-radius: 100%;
border: 1px solid var(--color-primary);
background-color: var(--color-primary);
right: 5px;
top: 0;
bottom: 0;
margin: auto;
}
#navigation-header .panel-sub-top .arrow:before {
font-family: "iconavigation" !important;
content: "\e900";
color: var(--color-light);
margin-left: 2px;
font-size: 10px;
}
#navigation-header .panel-sub-content {
padding: 30px 0 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: calc(var(--vh, 1vh) * 100 - 162px);
}
#navigation-header .panel-sub-content .panel-sub-content-info {
padding: 0 16px;
}
#navigation-header .panel-sub-content .txt {
color: #333;
font-size: 13px;
font-weight: bold;
padding-bottom: 12px;
position: relative;
}
#navigation-header .panel-sub-content .txt:before {
content: '';
position: absolute;
left: 0;
right: 0;
background-color: var(--color-border);
bottom: -3px;
height: 1px;
}
#navigation-header .panel-sub-content a.txt {
color: var(--color-primary);
}
#navigation-header .panel-sub-content a.txt .ic-arrow-menu {
position: relative;
width: 16px;
height: 16px;
border-radius: 100%;
border: 1px solid var(--color-primary);
background-color: var(--color-primary);
line-height: 12px;
text-align: center;
display: inline-block;
vertical-align: middle;
margin-left: 5px;
margin-top: -2px;
padding-left: 1px;;
}
#navigation-header .panel-sub-content a.txt .ic-arrow-menu:after {
font-family: "iconavigation" !important;
content: "\e900";
font-size: 7px;
color: var(--color-light);
}
#navigation-header .panel-sub-content .txt + .list-txt {
margin-top: 16px;
}
#navigation-header .panel-sub-content .list-txt {
font-size: 16px;
color: var(--color-dark);
margin: 0 0 24px;
padding-left: 0;
list-style: none;
}
#navigation-header .panel-sub-content .list-txt li + li {
margin-top: 16px;
}
#navigation-header .panel-sub-content .list-txt + .txt {
margin-top: 30px;
}
#navigation-header .panel-sub-content .action {
text-align: center;
margin-top: 36px;
padding: 16px;
border-radius: 8px;
background-color: #FCFCFD;
}
#navigation-header .panel-sub-content .action .btn-button {
width: 100%;
height: 48px;
line-height: 46px;
border: 1px solid var(--color-primary);
color: var(--color-primary);
font-size: 18px;
font-weight: bold;
padding: 0 16px;
text-align: center;
display: inline-block;
vertical-align: middle;
border-radius: 8px;
background-color: var(--color-light);
}
#navigation-header .panel-sub-content .action .btn-button + .btn-button {
margin-top: 16px;
}
#navigation-header .panel-footer-inner .footer-contact {
padding: 18px 16px 24px;
border-radius: 8px;
background-color: var(--bg-secondary);
display: flex;
align-items: flex-end;
}
#navigation-header .panel-footer-inner .footer-contact.hide{display: none !important;}
#navigation-header .panel-footer-inner .footer-contact-space {
height: 66px;
}
#navigation-header .panel-footer-inner .footer-contact-tel {
flex-basis: 0;
-webkit-box-flex: 1;
flex-grow: 1;
max-width: 100%;
}
#navigation-header .panel-footer-inner .footer-contact-lang {
-webkit-box-flex: 0;
flex: 0 0 auto;
width: auto;
max-width: none;
padding-left: 18px;
border-left: 1px solid var(--color-border);
}
#navigation-header .panel-footer-inner .footer-contact-social {
height: 16px; height: auto;
display: flex; flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
margin-top: 19px;
/* padding: 0 8px; */
}
#navigation-header .panel-footer-inner .footer-contact-social.hide{display: none !important;}
#navigation-header .footer-contact-tel a {
width: 32px;
height: 32px;
background: var(--color-secondary);
display: inline-block;
border-radius: 20px;
margin-right: 8px;
text-align: center;
}
#navigation-header .footer-contact-tel a:last-child {
margin-right: 0;
}
#navigation-header .footer-contact-tel a i {
font-size: 14px;
line-height: 32px;
color: var(--color-light);
}
/*footer*/
#navigation-footer {
background-color: var(--color-light);
}
#navigation-header .footer-shotlink,
#navigation-footer .footer-shotlink {
font-size: 16px;
line-height: 1;
text-align: center;
padding: 6px 16px;
}
#navigation-footer .footer-shotlink {
background-color: var(--color-primary);
}
#navigation-header .txt-tel {
font-size: 16px;
margin-bottom: 8px;
}
#navigation-header .footer-shotlink ul,
#navigation-footer .footer-shotlink ul {
padding: 0;
margin: 0;
}
#navigation-header .footer-shotlink ul li,
#navigation-footer .footer-shotlink ul li {
padding: 0 16px;
display: inline-block;
color: var(--color-light);
border-right: 1px solid rgba(255, 255, 255, 0.2);
}
#navigation-header .footer-shotlink ul li.hidden-mobile,
#navigation-footer .footer-shotlink ul li.hidden-mobile {
display: none;
}
#navigation-footer .footer-shotlink ul li a {
transition: var(--transition);
font-size: 13px;
line-height: 1.5;
display: block;
}
#navigation-footer .footer-shotlink ul li a:hover {
opacity: 1;
}
#navigation-header .footer-shotlink ul li:last-child,
#navigation-footer .footer-shotlink ul li:last-child {
border-right: 0;
padding-right: 0;
}
#navigation-header .footer-contact,
#navigation-footer .footer-contact {
font-size: 0;
color: var(--color-dark);
padding: 16px 15px 0;
}
#navigation-header .footer-contact > div {
display: inline-block;
vertical-align: middle;
width: calc(100% / 3);
}
#navigation-footer .footer-contact > div {
display: inline-block;
vertical-align: middle;
width: 100%;
text-align: center;
}
#navigation-header .link-social,
#navigation-footer .link-social {
margin:5px 0;
opacity: 0.65;
-webkit-box-flex: 0;
flex: 0 0 33.333333%;
max-width: 33.333333%;
text-align: left;
padding: 0 8px;
}
#navigation-header .link-social > i,
#navigation-footer .link-social > i{font-size: 18px;}
#navigation-header .footer-contact-lang {
position: relative;
top: 1px;
}
#navigation-header .footer-contact-lang .switch-lang {
position: relative;
/*padding-right: 18px;*/
height: 32px;
line-height: 28px;
display: inline-block;
vertical-align: middle;
}
/*#navigation-header .footer-contact-lang .switch-lang:after{content: "\e900";font-family: "iconavigation"; transform: rotate(90deg);
font-size: 10px; color: var(--color-dark); position: absolute; right: 0; transition: var(--transition);
}*/
#navigation-header .footer-contact-lang .switch-lang img {
width: 32px;
height: 32px;
border-radius: 50%;
border: 2px solid var(--color-light);
}
#navigation-header .footer-contact-lang.-th .switch-lang .en {
display: none;
}
#navigation-header .footer-contact-lang.-en .switch-lang .th {
display: none;
}
#navigation-header .footer-contact-lang.active .switch-lang:after {
transform: rotate(-90deg);
}
#navigation-header .footer-contact-lang .switch-lang-change {
position: absolute;
top: 130%;
left: 0;
right: 0;
padding: 5px;
border-radius: 8px;
transition: var(--transition);
opacity: 0;
pointer-events: none;
border: 1px solid var(--color-border);
background-color: var(--color-light);
min-width: 6.7rem;
}
#navigation-header .footer-contact-lang .switch-lang-change:before {
content: "";
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
right: 0;
z-index: +1;
top: -15px;
border-width: 8px;
margin-right: 24px;
border-bottom-color: var(--color-light);
}
#navigation-header .footer-contact-lang .switch-lang-change:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
right: 0;
z-index: 0;
top: -17px;
border-width: 8px;
margin-right: 24px;
border-bottom-color: var(--color-border);
}
#navigation-header .footer-contact-lang .switch-lang-change.active {
top: 120%;
opacity: 1;
pointer-events: visible;
}
#navigation-header .footer-contact-lang .switch-lang-change a {
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
line-height: 26px;
color: var(--color-dark);
}
#navigation-header .footer-contact-lang .switch-lang-change a img {
width: 26px;
height: 26px;
border-radius: 50%;
margin-right: 5px;
}
#navigation-header .footer-contact-lang.-th .switch-lang-change a.th {
display: none;
}
#navigation-header .footer-contact-lang.-en .switch-lang-change a.en {
display: none;
}
#navigation-header .footer-slogan,
#navigation-footer .footer-slogan {
text-align: center;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
}
#navigation-header .footer-slogan img,
#navigation-footer .footer-slogan img {
width: 176px;
margin: 0 auto;
}
#navigation-header .topbar-menu {
background-color: var(--color-primary);
color: rgba(255, 255, 255, .6);
}
#navigation-header .inner,
#navigation-footer .inner {
width: 100%;
max-width: 1170px;
margin: 0 auto;
padding-left: 16px;
padding-right: 16px;
}
#navigation-header .topbar-menu-inner {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 0;
padding-right: 0;
}
#navigation-header .topbar-menu-inner,
#navigation-header .midbar-menu-inner {
display: flex;
justify-content: space-between;
align-items: center;
color: var(--color-light);
}
#navigation-header .topbar-menu-inner .main_nav_header i {
position: relative;
top: 1px;
margin-right: 2px;
}
#navigation-header .topbar-menu-inner .main_nav_header.search i {
top: 2px;
}
#navigation-header .topbar-menu-inner .main_nav_header {
padding: 0 15px;
display: inline-block;
}
#navigation-header .topbar-menu-inner .main_nav_header:first-child,
#navigation-header .topbar-menu-inner .main_nav_header.search {
padding-left: 0;
}
#navigation-header .topbar-menu-inner .main_nav_header:last-child {
padding-right: 0;
}
#navigation-header .topbar-menu-inner .main_nav_header.icon-k {
position: relative;
padding-right: 24px;
height: 24px;
display: flex;
align-items: center;
opacity: 1;
/* border-right: 1px solid rgba(185, 185, 185, 0.4); */
top: -1px;
}
#navigation-header .topbar-menu-inner .main_nav_header.icon-k:before {
display: none;
}
#navigation-header .topbar-menu-inner .main_nav_header.icon-k > img {
width: 24px;
}
#navigation-header .topbar-menu-inner .main_nav_header.icon-k .logo1 {
display: block;
}
#navigation-header .topbar-menu-inner .main_nav_header.icon-k .logo2 {
display: none;
}
#navigation-header .topbar-menu-inner .main_nav_header.icon-k .logo3 {
display: none;
}
#navigation-header .action-login {
position: relative;
display: flex;
}
#navigation-header .action-login .box-login {
transition: var(--transition);
width: 240px;
position: absolute;
top: 10px;
right: 0;
margin-right: 0;
margin-top: 20px;
z-index: +1;
opacity: 0;
visibility: hidden;
}
#navigation-header .action-login.active .box-login {
top: 20px;
opacity: 1;
visibility: visible;
}
#navigation-header .box-login:before {
content: "";
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
right: 0;
z-index: 10000;
}
#navigation-header .box-login:before {
top: -15px;
border-width: 8px;
margin-right: 45px;
border-bottom-color: var(--color-light);
}
#navigation-header .box-login ul {
padding: 14px 24px;
margin: 0;
background-color: var(--color-light);
border-radius: 8px;
box-shadow: 0px 4px 12px rgb(0 0 0 / 50%);
}
#navigation-header .box-login li {
width: 100%;
list-style: none;
}
#navigation-header .box-login li + li {
border-top: 1px solid rgba(115, 116, 139, 0.6);
}
#navigation-header .box-login a {
display: block;
width: 100%;
padding: 10px 0;
white-space: nowrap;
line-height: 1.5;
font-size: 13px;
color: var(--color-dark);
text-align: left;
font-weight: 500;
}
#navigation-header .box-login a:hover {
color: var(--color-primary);
}
#navigation-header + main.main {
padding-top: 0;
}
#navigation-header.fixed-bar + main.main {
padding-top: 60px;
}
#navigation-footer .footer-midber-inner .a-right {
text-align: center;
}
#navigation-header .panel-tab-control {
height: 48px;
padding: 0 16px;
background-color: var(--bg-secondary);
}
#navigation-header .panel-tab-control .tab {
position: relative;
z-index: 2;
overflow: auto;
}
#navigation-header .panel-tab-control .tab .control {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}
#navigation-header .panel-tab-control .tab .control:after {
content: '';
display: table;
clear: both;
}
#navigation-header .panel-tab-control .tab .control a {
display: flex;
justify-content: center;
align-items: center;
height: 48px;
line-height: 1.4;
font-size: 14px;
color: var(--color-dark);
text-align: center;
position: relative;
z-index: 1;
-webkit-box-flex: 0;
flex: 0 0 auto;
width: auto;
max-width: none;
white-space: nowrap;
border-bottom: 2px solid transparent;
margin-right: 30px;
}
#navigation-header .panel-tab-control .tab .control a.active {
color: var(--color-primary);
border-bottom-color: var(--color-primary);
border-bottom-width: 3px;
font-weight: bold;
}
}
@media screen and (min-width: 375px) {
#navigation-header .panel-tab-menu a {
font-size: 18px;
}
}
@media screen and (min-width: 768px) {
.slick-slide img.hidden-mobile,
.slick-slide img.visible-mobile,
.slick-slide img.hidden-tablet {
display: none;
}
.slick-slide img.visible-tablet {
display: block;
}
.hidden-tablet {
display: none;
}
.visible-tablet {
display: block;
}
#navigation-header .panel-submenu {
height: 100vh;
}
#navigation-header .panel-menu-list-lv2 ul.menu-logo-lv2 {
display: inline-block;
width: calc(100% - 25% - 14px);
padding: 0;
font-size: 0;
margin: 16px 0 16px 6px;
}
#navigation-header .panel-menu-list-lv2 ul.menu-logo-lv2 li {
display: inline-block;
width: calc(100% / 3);
padding: 0 10px;
font-weight: bold;
text-align: center;
vertical-align: top;
margin-bottom: 0;
}
#navigation-header .panel-menu-list-lv2 ul.menu-logo-lv2.n2 {
width: calc(25% - 3.33px);
display: inline-block;
position: relative;
margin: 16px 6px 16px 5px;
}
#navigation-header .panel-menu-list-lv2 ul.menu-logo-lv2.n2:before {
content: '';
width: 1px;
height: calc(100% - 15px);
position: absolute;
background-color: var(--color-border);
top: 5px;
left: 0;
}
#navigation-header .panel-menu-list-lv2 ul.menu-logo-lv2.n2 li {
width: 100%;
margin-left: 5px;
}
#navigation-header .panel-menu-list-lv2 ul.menu-logo-lv2 li a {
font-size: 14px;
}
#navigation-header .panel-menu-list-lv2 ul.menu-logo-lv2 li a span {
margin-top: 20px;
display: block;
}
#navigation-header .panel-menu-list-lv2 ul.menu-logo-lv2 li a span:after {
position: relative;
right: 0;
margin-left: 5px;
}
#navigation-header ul.panel-list > li {
width: calc(100% / 3);
}
}
@media screen and (min-width: 992px) {
#navigation-header .slick-type .slick-track {
margin: 0 auto;
}
#navigation-header ul.panel-list > li {
width: calc(100% / 4);
}
}
/*@media screen and (min-width: 1025px) {*/
@media screen and (min-width: 1140px) {
.visible-mobile,
.visible-tablet,
.hidden-mobile,
.hidden-tablet {
display: none;
}
.visible-desktop {
display: block;
}
.slick-slide img.hidden-mobile,
.slick-slide img.visible-mobile,
.slick-slide img.hidden-tablet,
.slick-slide img.visible-tablet {
display: none;
}
.header-inner {
height: 80px;
}
/*footer*/
#navigation-footer .footer-breadcrumbs .txt {
cursor: pointer;
font-size: 13px;
font-weight: bold;
transition: var(--transition);
opacity: 1;
position: relative;
}
#navigation-footer .footer-breadcrumbs .txt:after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 2px;
background-color: var(--color-light);
transition: var(--transition);
opacity: 0;
width: 0px;
}
#navigation-footer .footer-breadcrumbs .txt i {
margin: 0 0 0 10px;
font-size: 12px;
position: relative;
top: 2px;
font-family: 'iconavigation';
color: var(--color-light);
font-style: normal;
}
#navigation-footer .footer-breadcrumbs .txt:hover {
opacity: 1;
}
#navigation-footer .footer-breadcrumbs .txt i:before {
content: "\e906";
}
#navigation-footer .footer-breadcrumbs .txt.show {
opacity: 1;
}
#navigation-footer .footer-breadcrumbs .txt.show i:before {
content: "\e907";
}
#navigation-footer .footer-breadcrumbs .nav-list {
padding: 0;
margin: 0;
}
#navigation-footer .footer-breadcrumbs .nav-list:after {
content: '';
display: table;
clear: both;
}
#navigation-footer .footer-breadcrumbs .nav-list > li {
float: left;
list-style: none;
position: relative;
}
#navigation-footer .footer-breadcrumbs .nav-list > li + li {
padding-left: 7px;
}
#navigation-footer .footer-breadcrumbs .nav-list > li + li:before {
content: '';
position: absolute;
left: 0;
top: 2px;
bottom: 0;
transform: rotate(-45deg);
margin: auto;
width: 8px;
height: 8px;
border-bottom: 1px solid var(--color-primary);
border-right: 1px solid var(--color-primary);
}
#navigation-footer .footer-breadcrumbs .nav-list > li + li .link {
padding-left: 16px;
}
#navigation-footer .footer-breadcrumbs .link {
font-size: 14px;
color: var(--color-primary);
padding-right: 16px;
}
#navigation-footer .footer-breadcrumbs .link .ic-nvg {
margin-right: 5px;
position: relative;
top: 1px;
}
#navigation-footer .footer-breadcrumbs .current .link {
font-weight: bold;
}
#navigation-footer .footer-sitemap {
background-color: var(--bg-green);
background-repeat: no-repeat;
background-size: 840px;
background-position: right bottom;
/*background-image: url(../img/bg_footer_kasikorn-building.png);*/
background-image: url(../img/bg_footer_kasikorn-building2.png);
}
#navigation-footer .footer-sitemap .inner {
padding: 24px 15px 36px;
}
#navigation-footer .footer-sitemap .row-flex {
display: flex;
flex-wrap: wrap;
margin-right: -20px;
margin-left: -20px;
}
#navigation-footer .footer-sitemap .row-flex + .row-flex {
margin-top: 32px;
}
#navigation-footer .footer-sitemap .row-flex > div {
padding-left: 20px;
padding-right: 20px;
}
#navigation-footer .footer-sitemap .col-6 {
-webkit-box-flex: 0;
flex: 0 0 50%;
max-width: 50%;
}
#navigation-footer .footer-sitemap .col-3 {
-webkit-box-flex: 0;
flex: 0 0 25%;
max-width: 25%;
}
#navigation-footer .footer-sitemap .head {
position: relative;
}
#navigation-footer .footer-sitemap .head .txt {
font-weight: bold;
font-size: 16px;
line-height: 1.5;
color: var(--color-light);
}
#navigation-footer .footer-sitemap .head .link {
display: inline;
text-decoration: none;
position: relative;
}
#navigation-footer .footer-sitemap .head .link:after {
font-family: "iconavigation";
content: "\e900";
font-size: 10px;
position: absolute;
right: -15px;
top: 5px;
}
#navigation-footer .footer-sitemap .head .link:hover {
color: var(--color-green2);
}
#navigation-footer .footer-sitemap .body {
padding-top: 16px;
}
#navigation-footer .footer-sitemap .body .title {
font-size: 16px;
font-weight: bold;
line-height: 1.5;
color: var(--color-light);
opacity: 0.6;
margin-bottom: 16px;
}
#navigation-footer .footer-sitemap ul {
padding: 0;
margin: 0;
}
#navigation-footer .footer-sitemap ul:after {
content: '';
display: table;
clear: both;
}
#navigation-footer .footer-sitemap ul a {
position: relative;
display: inline-block;
}
#navigation-footer .footer-sitemap ul a:after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 2px;
background-color: var(--color-green2);
transition: var(--transition);
opacity: 0;
width: 0px;
}
#navigation-footer .footer-sitemap ul a:hover:after {
opacity: 1;
width: 100%;
}
#navigation-footer .footer-sitemap li {
float: left;
width: 100%;
list-style: none;
}
#navigation-footer .footer-sitemap li + li {
margin-top: 12px;
}
#navigation-footer .footer-sitemap a {
font-size: 13px;
font-weight: 500;
line-height: 1.5;
color: var(--color-light);
}
#navigation-footer .footer-sitemap a:hover {
color: var(--color-green2);
}
#navigation-footer .footer-slogan img {
width: 220.5px;
}
#navigation-footer .footer-shotlink {
text-align: right;
font-size: 14px;
padding: 18px 0;
}
#navigation-footer .footer-shotlink ul li.visible-desktop {
display: inline-block;
}
#navigation-footer .footer-shotlink ul li a {
opacity: 1;
font-size: 13px;
font-weight: 500;
transition: var(--transition);
position: relative;
}
#navigation-footer .footer-shotlink ul li a:after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 2px;
background-color: var(--color-light);
transition: var(--transition);
opacity: 0;
width: 0px;
}
#navigation-footer .footer-shotlink ul li a:hover:after {
opacity: 1;
width: 100%;
}
#navigation-footer .footer-shotlink ul li a:hover {
opacity: 1;
}
#navigation-footer .footer-contact {
padding: 0;
}
#navigation-footer .footer-contact > div {
text-align: left;
}
#navigation-footer .footer-contact-center {
padding-top: 72px;
}
#navigation-footer .footer-contact-center .txt {
font-size: 13px;
font-weight: 500;
line-height: 1;
color: var(--color-green3);
display: block;
}
#navigation-footer .footer-contact-center .link {
font-size: 33px;
line-height: 1.5;
color: var(--color-light);
}
#navigation-footer .footer-contact-social {
padding-top: 12px;
}
#navigation-footer .link-social {
margin: 0;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 1;
transition: var(--transition);
padding: 0;
}
#navigation-footer .link-social + .link-social {
margin-left: 16px;
}
#navigation-footer .txt-tel {
font-size: 16px;
opacity: 0.6;
}
#navigation-footer .txt-number {
font-size: 40px;
}
#navigation-footer .footer-slogan {
height: 64px;
}
/* #navigation-footer .footer-contact-social:hover .link-social {
opacity: 0.6;
} */
#navigation-footer .footer-contact-social:hover .link-social:hover {
opacity: 1;
}
#navigation-footer .footer-sitemap .row-flex:last-child{position: relative; padding-bottom: 100px;}
#navigation-footer .footer-contact { padding: 0 20px; position: absolute; left: 0; right: 0; bottom: 0;
display: flex; align-items: flex-end;
}
#navigation-footer .footer-contact > div{-webkit-box-flex: 0; flex: 0 0 50%; max-width: 50%;}
#navigation-footer .footer-contact-center{padding-top: 0; order: 2; padding-left: 295px;}
#navigation-footer .footer-contact-center .txt{padding-left: 20px;}
#navigation-footer .footer-contact-center .link{padding-left: 20px; text-decoration: none;}
#navigation-footer .footer-contact-social {padding-top: 0; order: 1; padding-bottom: 10px;}
/* header */
#navigation-header,
.header {
position: sticky;
z-index: 101;
top: 0;
left: 0;
transition: var(--transition), 0s transform;
background-color: transparent;
pointer-events: none;
overflow: visible;
max-height: 130px;
transition: transform .25s;
box-shadow: none;
}
#navigation-header .header-desktop {
pointer-events: visible;
max-height: 100vh;
pointer-events: none;
padding-bottom: 15px;
}
#navigation-header .midbar-menu:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 60px;
background-color: var(--color-primary);
transition: var(--transition);
opacity: 0;
z-index: -1;
}
#navigation-header.fixed-bar .header-desktop {
background-color: var(--color-light);
}
#navigation-header.fixed-bar .header-desktop .topbar-menu {
background-color: var(--color-light);
}
#navigation-header.fixed-bar .logo-kbank .logo1 {
display: none;
}
#navigation-header.fixed-bar .logo-kbank .logo2 {
display: block;
}
#navigation-header.fixed-bar .topbar-menu-inner,
#navigation-header.fixed-bar .midbar-menu-inner {
color: var(--color-dark);
}
#navigation-header.fixed-bar .topbar-menu-inner .main_nav_header:before,
#navigation-header.fixed-bar .btn-login:before {
background-color: var(--color-dark);
}
#navigation-header.tiny .logo-kbank .logo1 {
display: block;
}
#navigation-header.tiny .logo-kbank .logo2 {
display: none;
}
/*#navigation-header.tiny .topbar-menu{top: -80px;}
#navigation-header.tiny .midbar-menu{top: 0px;}
#navigation-header.tiny .midbar-menu:before{opacity: 1;}
#navigation-header.tiny .bottombar-menu{margin-top: 64px}
#navigation-header.tiny .logo-kbank{top: 78px;}
#navigation-header.tiny .midbar-menu-inner,
#navigation-header.tiny .midbar-menu-inner .nav-list{border-radius: 0;}
#navigation-header.tiny .midbar-menu-inner .nav-list.active{justify-content: flex-end; padding: 0;}
#navigation-header.tiny .midbar-menu-inner .nav-list .bottombar-nav-list a{line-height: 57px; padding-top: 3px;}
#navigation-header.tiny .midbar-menu-inner .nav-list .bottombar-nav-list a{padding-left:12px; padding-right: 12px;}
#navigation-header.tiny .midbar-menu-inner .nav-list .bottombar-nav-list:first-child li:first-child a{padding-left: 13px;}
#navigation-header.tiny .midbar-menu-inner .nav-list .bottombar-nav-list:last-child li:last-child a{padding-right: 13px;}
#navigation-header.tiny .midbar-menu-inner .nav-list[data-nav="personal"] .bottombar-nav-list + .bottombar-nav-list{margin-left: 0px;}
#navigation-header.tiny .midbar-menu-inner .nav-list[data-nav="business"] .bottombar-nav-list + .bottombar-nav-list{margin-left: 0px;}
#navigation-header.tiny .midbar-menu-inner .nav-list[data-nav="wealth"] .bottombar-nav-list + .bottombar-nav-list{margin-left: 0px;}
#navigation-header.tiny .midbar-menu-inner .nav-list[data-nav="investor"] .bottombar-nav-list{margin-right: 0px;}*/
#navigation-header .topbar-menu {
position: relative;
z-index: 2;
transition: var(--transition);
background-color: rgba(0, 0, 0, 0.7);
}
#navigation-header .logo-kbank {
display: inline-block;
vertical-align: middle;
width: auto;
transition: var(--transition);
position: relative;
top: 0;
}
#navigation-header .logo-kbank a {
display: block;
}
#navigation-header .logo-kbank a img {
min-width: 140px;
}
#navigation-header .logo-kbank .logo1 {
display: block;
}
#navigation-header .logo-kbank .logo2 {
display: none;
}
#navigation-header .topbar-menu-inner .nav-list {
display: inline-block;
vertical-align: middle;
padding-left: 25px;
position: relative;
top: -2px;
}
#navigation-header .action-menu {
/*padding-left: 16px; padding-right: 16px;*/
height: 24px;
align-items: center;
display: flex;
}
/*#navigation-header .topbar-menu-inner .action-menu .main_nav_header{opacity: 1;}*/
#navigation-header .action-search {
position: relative;
padding-left: 24px;
padding-right: 24px;
height: 24px;
align-items: center;
display: flex;
/*border-left: 1px solid rgba(255, 255, 255, 0.3); */
top: -3px;
}
#navigation-header .action-search .header-contact-search {
padding-right: 14px;
}
#navigation-header .footer-contact-lang .switch-lang {
padding-right: 0;
height: 26px;
line-height: 26px;
}
#navigation-header .footer-contact-lang .switch-lang img {
width: 26px;
height: 26px;
}
#navigation-header .footer-contact-lang .switch-lang:after {
display: none;
}
#navigation-header .footer-contact-lang .switch-lang-change {
left: auto;
width: 70px;
right: -20px;
}
#navigation-header .footer-contact-lang .switch-lang-change.active {
top: 140%;
}
#navigation-header .btn-login {
line-height: 1;
display: block;
font-size: 13px;
font-weight: 500;
transition: var(--transition);
opacity: 1;
position: relative;
background-color: transparent;
}
#navigation-header .btn-login:before {
content: '';
position: absolute;
left: 0;
right: auto;
bottom: -5px;
height: 1px;
background-color: var(--color-light);
transition: var(--transition);
opacity: 0;
width: 0px;
margin: auto;
}
#navigation-header .btn-login:hover:before {
opacity: 1;
width: 100%;
}
#navigation-header .action-login.active .btn-login {
opacity: 1;
}
#navigation-header .action-login {
position: relative;
height: 24px;
align-items: center;
/*border-left: 1px solid rgba(255, 255, 255, 0.3); padding-left: 16px;*/
}
#navigation-header .action-login .box-login {
transition: var(--transition);
width: 240px;
position: absolute;
top: 18px;
right: 0;
margin-right: 0;
margin-top: 10px;
z-index: +1;
opacity: 0;
visibility: hidden;
}
#navigation-header .action-login.active .box-login {
top: 20px;
opacity: 1;
visibility: visible;
}
#navigation-header .box-login:before {
content: "";
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
right: 0;
z-index: 10000;
}
#navigation-header .box-login:before {
top: -15px;
border-width: 8px;
margin-right: 18px;
border-bottom-color: var(--color-light);
}
#navigation-header .box-login ul {
padding: 14px 24px;
margin: 0;
background-color: var(--color-light);
border-radius: 8px;
}
#navigation-header .box-login li {
width: 100%;
list-style: none;
}
#navigation-header .box-login li + li {
border-top: 1px solid rgba(115, 116, 139, 0.6);
}
#navigation-header .box-login a {
display: block;
width: 100%;
padding: 10px 0;
white-space: nowrap;
line-height: 1.5;
font-size: 13px;
color: var(--color-dark);
text-align: left;
}
#navigation-header .box-login a:hover {
color: var(--color-primary);
}
#navigation-header .topbar-menu-inner {
height: 55px;
pointer-events: visible;
font-weight: 500;
padding-left: 5px;
padding-right: 5px;
max-width: 1140px;
}
#navigation-header .topbar-menu-inner .a-right {
display: flex;
position: relative;
top: 2px;
}
#navigation-header .topbar-menu-inner .main_nav_header {
position: relative;
transition: var(--transition);
cursor: pointer;
opacity: 1;
padding: 0;
text-shadow: 1px 1px 1px #000;
}
#navigation-header .topbar-menu-inner .main_nav_header:before {
content: '';
position: absolute;
left: 0;
right: auto;
bottom: -5px;
height: 1px;
background-color: var(--color-light);
transition: var(--transition);
opacity: 0;
width: 0px;
margin: auto;
}
#navigation-header .topbar-menu-inner .main_nav_header + .main_nav_header {
margin-left: 22px;
}
#navigation-header .topbar-menu-inner .main_nav_header:hover:before {
opacity: 1;
width: 100%;
}
#navigation-header .topbar-menu-inner .main_nav_header.active {
color: var(--color-light);
opacity: 1;
font-weight: bold;
}
#navigation-header .topbar-menu-inner .main_nav_header.search {
opacity: 1;
display: block;
}
#navigation-header .topbar-menu-inner .main_nav_header.search i {
font-size: 20px;
margin-right: 0;
}
#navigation-header .topbar-menu-inner .main_nav_header i {
margin-right: 6px;
top: 4px;
font-size: 18px;
}
#navigation-header .midbar-menu {
position: relative;
z-index: 1;
transition: var(--transition);
background-color: transparent;
pointer-events: none;
margin-top: 10px;
}
#navigation-header .midbar-menu .main_nav_header.search {
margin: 0 15px;
padding: 9px 5px 4px;
}
#navigation-header .midbar-menu .main_nav_header.search i {
font-size: 22px;
}
#navigation-header .midbar-menu-inner {
transition: var(--transition);
border-radius: 8px 8px 8px 8px;
max-width: 1140px;
flex-wrap: wrap;
padding-left: 0;
padding-right: 0;
overflow: hidden;
pointer-events: visible;
/*box-shadow: 0px 3px 8px 2px rgba(0, 0, 0, 0.3);*/
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
#navigation-header .midbar-menu-inner .col {
-webkit-box-flex: 0;
flex: 0 0 100%;
max-width: 100%;
padding: 0;
}
#navigation-header .midbar-menu-inner .nav-list {
margin: 0 0.2px 0 0;
display: none;
padding: 0;
overflow: hidden;
background-color: var(--color-primary);
border-radius: 0 0 0 0;
transition: var(--transition);
}
#navigation-header .midbar-menu-inner .nav-list.active {
display: flex;
justify-content: space-between;
width: 100%;
padding: 0 32px;
}
#navigation-header .midbar-menu-inner .nav-list .bottombar-nav-list {
flex-basis: 0;
-webkit-box-flex: 1;
flex-grow: 1;
max-width: 100%;
display: flex;
justify-content: space-between;
}
#navigation-header .midbar-menu-inner .nav-sub-link {
font-size: 16px;
font-weight: bold;
line-height: 40px;
color: var(--color-light);
padding: 4px 0;
margin: 0 16px;
border-radius: 20px;
background-color: transparent;
display: block;
transition: var(--transition);
position: relative;
}
#navigation-header .midbar-menu-inner li a {
position: relative;
}
#navigation-header .midbar-menu-inner .header-contact-lang a {
font-size: 14px;
display: inline-block;
font-weight: bold;
width: 40px;
height: auto;
line-height: 30px;
text-align: center;
margin: 5px 0;
padding: 0 10px;
position: relative;
color: rgb(255 255 255 / 60%);
}
#navigation-header .midbar-menu-inner .header-contact-lang a:nth-child(2) {
display: none;
}
#navigation-header .midbar-menu-inner .header-contact-lang a.active {
color: #fff;
}
#navigation-header .bottombar-menu {
position: relative;
overflow: auto;
box-shadow: 0 0 12px rgb(0 0 0 / 12%);
z-index: 0;
margin-top: 70px;
transition: var(--transition);
pointer-events: none;
}
#navigation-header .bottombar-menu .content {
height: 0;
opacity: 0;
pointer-events: none;
transition: var(--transition);
position: relative;
}
#navigation-header .bottombar-menu .content > div {
height: 0;
overflow: hidden;
}
#navigation-header .bottombar-menu .content.active {
height: 100%;
opacity: 1;
overflow-y: auto;
}
#navigation-header .bottombar-menu .content.active > div {
height: auto;
overflow: visible;
}
#navigation-header .bottombar-menu .inner {
position: relative;
z-index: 1;
pointer-events: visible;
background-color: var(--bg-secondary);
border-radius: 8px;
}
#navigation-header .bottombar-blog {
padding: 24px 0;
}
#navigation-header .bottombar-blog.row-flex {
display: flex;
flex-wrap: wrap;
}
#navigation-header .bottombar-blog.row-flex > .col {
flex-basis: 0;
-webkit-box-flex: 1;
flex-grow: 1;
max-width: 100%;
padding-left: 24px;
}
#navigation-header .bottombar-blog.row-flex > .col-auto {
-webkit-box-flex: 0;
flex: 0 0 auto;
width: auto;
max-width: none;
padding-right: 24px;
border-right: 1px solid var(--color-dark);
}
#navigation-header .bottombar-wealth-list {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
justify-content: center;
}
#navigation-header .bottombar-wealth-list .col {
flex-basis: 0;
-webkit-box-flex: 1;
flex-grow: 1;
max-width: 100%;
}
#navigation-header .bottombar-wealth-list .col-auto {
-webkit-box-flex: 0;
flex: 0 0 auto;
max-width: 100%;
}
#navigation-header .bottombar-wealth-list > ul + ul {
border-left: 1px solid var(--color-border);
}
#navigation-header .bottombar-wealth-list ul {
padding: 0 16px;
margin: 0;
}
#navigation-header .bottombar-wealth-list ul:after {
content: '';
display: table;
clear: both;
}
#navigation-header .bottombar-wealth-list li {
padding: 0 16px;
float: left;
list-style: none;
}
#navigation-header .bottombar-wealth-list a {
display: block;
}
#navigation-header .bottombar-wealth-list .thumb {
max-width: 180px;
border-radius: 8px;
margin-bottom: 16px;
overflow: hidden;
}
#navigation-header .bottombar-wealth-list img {
transform: scale(1.0);
transition: var(--transition);
}
#navigation-header .bottombar-wealth-list span {
display: block;
text-align: center;
font-size: 16px;
font-weight: bold;
line-height: 1.5;
color: var(--color-dark);
}
#navigation-header .bottombar-wealth-list span:after {
content: "\e900";
font-size: 10px;
margin-left: 5px;
font-family: "iconavigation" !important;
}
#navigation-header .bottombar-wealth-list a:hover img {
transform: scale(1.1);
}
#navigation-header .bottombar-wealth-list a:hover span {
color: var(--color-primary);
}
#navigation-header .panel-title {
padding-top: 0;
color: var(--color-primary);
}
#navigation-header ul.panel-list {
padding: 0;
font-size: 0;
text-align: center;
}
#navigation-header ul.panel-list > li {
width: calc(100% / 5);
float: none;
display: inline-block;
}
#navigation-header .panel-list-wrapper:before {
display: none;
}
#navigation-header .panel-list-thumb img {
transform: scale(1.0);
}
#navigation-header .panel-list-content {
color: var(--color-dark);
padding: 8px 0 0;
position: relative;
transition: var(--transition);
}
#navigation-header .panel-list-wrapper:hover .panel-list-thumb img {
transform: scale(1.1);
}
#navigation-header .panel-list-wrapper:hover .panel-list-content {
color: var(--color-primary);
}
#navigation-header .slick-type {
padding-bottom: 0;
margin-left: -8px;
margin-right: -8px;
}
#navigation-header .slick-list {
overflow: hidden;
}
#navigation-header .slick-track {
margin: 0 auto;
}
#navigation-header ul.slick-dots {
margin: 16px 0 0;
}
#navigation-header .list-type {
width: auto;
transform: scale(1);
padding: 0 8px;
}
#navigation-header .list-wrapper:before {
display: none;
}
#navigation-header .list-title {
font-size: 16px;
position: relative;
padding: 10px 5px 0;
color: var(--color-dark);
text-align: center;
transition: var(--transition);
}
#navigation-header .list-title:after {
content: "\e900";
font-size: 10px;
margin-left: 5px;
font-family: "iconavigation" !important;
}
#navigation-header .list-thumb:before {
content: "";
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%);
z-index: 1;
pointer-events: none;
}
#navigation-header .list-thumb img {
transform: scale(1.0);
}
#navigation-header .list-content {
text-align: center;
z-index: +1;
}
#navigation-header .list-number {
font-size: 49px;
line-height: 0.7;
}
#navigation-header .list-wrapper:hover .list-thumb img {
transform: scale(1.1);
}
#navigation-header .list-wrapper:hover .list-title {
color: var(--color-primary);
}
#navigation-header .bottombar-nav-list {
padding: 0;
margin: 0;
position: relative;
transition: var(--transition);
flex-wrap: wrap;
}
#navigation-header .midbar-menu-inner .nav-list .bottombar-nav-list + .bottombar-nav-list {
margin-left: 1px;
-webkit-box-flex: 0;
flex: 0 0 auto;
width: auto;
max-width: none;
}
#navigation-header .bottombar-nav-list:after {
content: '';
display: table;
clear: both;
}
#navigation-header .bottombar-nav-list+.bottombar-nav-list:before {
content: '';
background-color: rgba(255, 255, 255, 0.4);
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: -1px;
width: 1px;
height: 25px;
margin: auto;
}
#navigation-header .bottombar-nav-list li {
list-style: none;
float: none;
position: relative;
overflow: hidden;
transition: var(--transition);
text-align: center;
/*flex-basis: 0;
-webkit-box-flex: 1;
flex-grow: 1;
max-width: 100%;*/
-webkit-box-flex: 0;
flex: 0 0 auto;
width: auto;
max-width: none;
}
#navigation-header .bottombar-nav-list a {
display: block;
position: relative;
font-size: 13px;
font-weight: 500;
overflow: hidden;
line-height: 1.2;
color: var(--color-light);
line-height: 50px;
transition: var(--transition);
/*background-color: var(--color-secondary);*/
}
#navigation-header .midbar-menu-inner .bottombar-nav-list a {
padding-left: 8px;
padding-right: 8px;
position: relative;
}
/*#navigation-header .midbar-menu-inner .nav-list{padding: 0px 25px;}*/
/*#navigation-header .midbar-menu-inner .bottombar-nav-list .active a:before{opacity: 1;}*/
/*#navigation-header .midbar-menu-inner .bottombar-nav-list:first-child li:first-child a{padding-left: 31px;}*/
/*#navigation-header .midbar-menu-inner .bottombar-nav-list:last-child li:last-child a{padding-right: 31px;}*/
/*
#navigation-header .midbar-menu-inner .nav-list[data-nav="personal"] .bottombar-nav-list + .bottombar-nav-list{margin-left: 355px;}
#navigation-header .midbar-menu-inner .nav-list[data-nav="business"] .bottombar-nav-list + .bottombar-nav-list{margin-left: 7px;}
#navigation-header .midbar-menu-inner .nav-list[data-nav="wealth"] .bottombar-nav-list + .bottombar-nav-list{margin-left: 524px;}
#navigation-header .midbar-menu-inner .nav-list[data-nav="investor"] .bottombar-nav-list{margin-right: 470px;}
*/
#navigation-header .midbar-menu-inner .nav-list[data-nav="personal"] .bottombar-nav-list + .bottombar-nav-list{padding-left: 15px;}
#navigation-header .midbar-menu-inner .nav-list[data-nav="business"] .bottombar-nav-list + .bottombar-nav-list{padding-left: 15px;}
#navigation-header .midbar-menu-inner .nav-list[data-nav="wealth"] .bottombar-nav-list + .bottombar-nav-list{padding-left: 40px;}
#navigation-header .midbar-menu-inner .nav-list[data-nav="personal"] .bottombar-nav-list + .bottombar-nav-list li + li {
margin-left: 32px;
}
/*#navigation-header .midbar-menu-inner .nav-list[data-nav="personal"] .bottombar-nav-list li:nth-child(6),
#navigation-header .midbar-menu-inner .nav-list[data-nav="personal"] .bottombar-nav-list li:nth-child(7) {
-webkit-box-flex: 0;
flex: 0 0 auto;
width: auto;
max-width: none;
}*/
/*#navigation-header .midbar-menu-inner .nav-list[data-nav="personal"] .bottombar-nav-list+.bottombar-nav-list {
width: 24%;
}*/
/*#navigation-header .midbar-menu-inner .nav-list[data-nav="business"] .bottombar-nav-list li:nth-child(2),
#navigation-header .midbar-menu-inner .nav-list[data-nav="business"] .bottombar-nav-list li:nth-child(4),
#navigation-header .midbar-menu-inner .nav-list[data-nav="business"] .bottombar-nav-list li:nth-child(5),
#navigation-header .midbar-menu-inner .nav-list[data-nav="business"] .bottombar-nav-list li:nth-child(6),
#navigation-header .midbar-menu-inner .nav-list[data-nav="business"] .bottombar-nav-list li:nth-child(7){
-webkit-box-flex: 0;
flex: 0 0 auto;
width: auto;
max-width: none;
}*/
/*#navigation-header .midbar-menu-inner .nav-list[data-nav="wealth"] .bottombar-nav-list {
width: 75%
}
#navigation-header .midbar-menu-inner .nav-list[data-nav="wealth"] .bottombar-nav-list+.bottombar-nav-list {
width: 25%;
}
#navigation-header .midbar-menu-inner .nav-list[data-nav="investor"] .bottombar-nav-list {
width: 100%;
}*/
#navigation-header .midbar-menu-inner .nav-list[data-nav="investor"] .bottombar-nav-list:after {
display: none;
}
/*
#navigation-header .midbar-menu-inner .nav-list[data-nav="personal"] .bottombar-nav-list + .bottombar-nav-list{margin-left: auto;}
#navigation-header .midbar-menu-inner .nav-list[data-nav="business"] .bottombar-nav-list + .bottombar-nav-list{margin-left: auto;}
#navigation-header .midbar-menu-inner .nav-list[data-nav="wealth"] .bottombar-nav-list + .bottombar-nav-list{margin-left: auto;}
#navigation-header .midbar-menu-inner .nav-list[data-nav="investor"] .bottombar-nav-list{margin-right: auto;}
*/
#navigation-header .bottombar-nav-list i {
font-size: 20px;
width: 24px;
height: 24px;
margin-right: 8px;
display: inline-block;
text-align: center;
position: relative;
top: 2px;
}
#navigation-header .bottombar-nav-list li:after {
content: '';
position: absolute;
top: -160px;
left: -50%;
width: 0px;
right: -50%;
border-radius: 50%;
height: 120px;
background-color: rgba(42, 253, 101, 0.55);
transition: var(--transition);
display: none;
box-shadow: 0px 0px 25px 5px rgba(42, 253, 101, 0.55);
margin: auto;
transition-delay: var(--delay);
}
#navigation-header .bottombar-nav-list li:before {
content: '';
position: absolute;
top: -100%;
left: 0;
right: 0;
height: 100%;
background-color: rgba(0, 90, 42, 0.99);
width: 100%;
transition: var(--transition);
display: none;
}
#navigation-header .bottombar-nav-list li a:after {
content: '';
position: absolute;
bottom: 0;
left: 8px;
right: 8px;
height: 2px;
width: 0;
background-color: var(--color-light);
transition: var(--transition);
}
#navigation-header .bottombar-nav-list li:hover a:after,
#navigation-header .bottombar-nav-list li.active a:after {
width: calc(100% - 16px);
}
#navigation-header .bottombar-nav-list li:hover a,
#navigation-header .bottombar-nav-list li.active a {
color: var(--color-light);
background-color: transparent;
}
/*#navigation-header .bottombar-nav-list li:hover,
#navigation-header .bottombar-nav-list li.active {
background-color: rgba(0, 90, 42, 0.99);
}*/
#navigation-header .bottombar-nav-list li.active:after,
#navigation-header .bottombar-nav-list li:hover:after {
width: 200%;
top: -120px
}
#navigation-header .bottombar-nav-list li:hover:before {
top: 0;
}
#navigation-header .bottombar-content {
width: 100%;
opacity: 0;
height: 0;
pointer-events: none;
visibility: hidden;
overflow: hidden;
transition: var(--transition);
background-color: rgba(0, 90, 42, 0.99);
}
#navigation-header .bottombar-content.active {
height: auto;
opacity: 1;
pointer-events: visible;
visibility: visible;
display: flex;
flex-wrap: wrap;
max-height: calc(100vh - 140px);
overflow: auto;
}
#navigation-header .bottombar-content > .col {
flex-basis: 0;
-webkit-box-flex: 1;
flex-grow: 1;
max-width: 100%;
}
#navigation-header .bottombar-content > .col-auto {
-webkit-box-flex: 0;
flex: 0 0 auto;
width: auto;
max-width: none;
}
#navigation-header .bottombar-content .ic-arrow {
width: 16px;
height: 16px;
line-height: 16px;
text-align: center;
margin-left: 1px;
border-radius: 50%;
color: var(--color-light);
background-color: var(--color-primary);
vertical-align: middle;
display: inline-block;
transition: var(--transition);
position: relative;
right: 0;
}
#navigation-header .bottombar-content .ic-arrow:before {
content: '';
position: absolute;
top: -1px;
right: 0;
left: -1px;
bottom: 0;
margin: auto;
width: 5px;
height: 5px;
border-left: 1px solid var(--color-light);
border-bottom: 1px solid var(--color-light);
transform: rotate(-135deg);
}
#navigation-header .bottombar-content a:hover .ic-arrow {
right: -3px;
}
#navigation-header .bottombar-content .inner {
width: auto;
max-width: inherit;
margin: 0;
}
#navigation-header .bottombar-content > .col > .inner {
padding: 40px 40px;
}
#navigation-header .bottombar-content > .col-auto {
background-color: rgba(0, 169, 79, 0.15);
}
#navigation-header .bottombar-content > .col-auto > .inner {
padding: 40px 40px;
width: 289px;
}
#navigation-header .bottombar-content > .col-auto .action {
position: relative;
}
#navigation-header .bottombar-content > .col-auto .action .btn {
width: 100%;
height: 40px;
border-radius: 8px;
border: 1px solid var(--color-light);
font-size: 13px;
font-weight: bold;
line-height: 38px;
color: var(--color-light) !important;
text-align: center;
display: inline-block;
transition: var(--transition);
overflow: hidden;
position: relative;
z-index: +1;
font-family: "kurious-looped";
font-weight: 500;
padding: 0;
background-color: transparent;
min-width: inherit;
}
#navigation-header .bottombar-content > .col-auto .action .btn:before {
content: '';
position: absolute;
z-index: -1;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background-color: var(--bg-green);
transition: var(--transition);
opacity: 0;
}
#navigation-header .bottombar-content .col-auto .action .btn:hover {
color: var(--color-green2) !important;
border-color: var(--color-green2) !important;
}
#navigation-header .bottombar-content .col-auto .action .btn:hover:before {
left: 0;
opacity: 1;
}
#navigation-header .bottombar-content .col-auto .action .btn + .btn {
margin-top: 19px;
}
#navigation-header .bottombar-content-head {
padding-bottom: 16px;
}
#navigation-header .bottombar-content-head .txt {
font-size: 20px;
font-weight: bold;
line-height: 1.5;
color: var(--color-light);
}
#navigation-header .bottombar-content-head .txt .ic-arrow {
display: none;
}
#navigation-header .bottombar-content-head a.txt .ic-arrow {
display: inline-block;
}
#navigation-header .bottombar-content-head a.txt:hover {
color: var(--color-primary);
}
/*#navigation-header [data-tag="personal"] .bottombar-content-head+.bottombar-content-body {
height: calc(430px);
}*/
#navigation-header [data-tag="personal"] .bottombar-content-body {
min-height: calc(316px);
}
/*#navigation-header [data-tag="business"] .bottombar-content-head+.bottombar-content-body {
height: calc(430px);
}*/
#navigation-header [data-tag="business"] .bottombar-content-body {
min-height: calc(416px);
}
#navigation-header .bottombar-content-body > .row-flex {
display: flex;
margin-left: -8px;
margin-right: -8px;
flex-wrap: nowrap;
}
#navigation-header .bottombar-content-body > .row-flex > div {
padding-left: 8px;
padding-right: 8px;
}
#navigation-header .bottombar-content-body > .row-flex > .col {
flex-basis: 0;
-webkit-box-flex: 1;
flex-grow: 1;
max-width: 100%;
}
#navigation-header .bottombar-content-body > .row-flex > .col-auto {
-webkit-box-flex: 0;
flex: 0 0 auto;
width: auto;
max-width: none;
}
#navigation-header .bottombar-content-body > .row-flex > .col-3 {
-webkit-box-flex: 0;
flex: 0 0 25%;
max-width: 25%;
}
#navigation-header .bottombar-content-body > .row-flex > .col-4 {
-webkit-box-flex: 0;
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
#navigation-header .bottombar-content-body > .row-flex > .col-5 {
-webkit-box-flex: 0;
flex: 0 0 41.666667%;
max-width: 41.666667%;
}
#navigation-header .bottombar-content-body > .row-flex > .col-6 {
-webkit-box-flex: 0;
flex: 0 0 50%;
max-width: 50%;
}
#navigation-header .bottombar-content-body > .row-flex > .col-12 {
-webkit-box-flex: 0;
flex: 0 0 100%;
max-width: 100%;
}
#navigation-header .bottombar-content-body > .-up {
margin-top: 40px;
}
#navigation-header .bottombar-content-body .txt {
margin-bottom: 24px;
font-size: 16px;
font-weight: 500;
color: var(--color-green3);
}
#navigation-header .bottombar-content-body .txt .ic-arrow {
display: none;
}
#navigation-header .bottombar-content-body a.txt {
color: var(--color-green2);
display: inline-block;
}
#navigation-header .bottombar-content-body a.txt .ic-arrow {
display: inline-block;
top: -2px;
}
#navigation-header .bottombar-content-body .list-txt {
padding: 0;
margin: 0;
}
#navigation-header .bottombar-content-body .list-txt li {
list-style: none;
}
#navigation-header .bottombar-content-body .list-txt li + li {
margin-top: 16px;
}
#navigation-header .bottombar-content-body .list-txt a {
font-size: 13px;
font-weight: 500;
display: inline-block;
line-height: 1.4;
color: var(--color-light);
position: relative;
}
#navigation-header .bottombar-content-body .list-txt a:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 2px;
background-color: var(--color-green2);
transition: var(--transition);
opacity: 0;
}
#navigation-header .bottombar-content-body .list-txt a:hover {
color: var(--color-green2);
}
#navigation-header .bottombar-content-body .list-txt a:hover:after {
opacity: 1;
width: 100%;
}
#navigation-header .bottombar-content-body a.link-card {
display: block;
overflow: hidden;
border-radius: 10px;
}
#navigation-header .bottombar-content-body a.link-card img {
border-radius: 10px;
width: 100%;
max-width: 272px;
transition: var(--transition);
}
#navigation-header .bottombar-content-body a.link-card:hover img {
transform: scale(1.05);
}
#navigation-header .bottombar-content-body .action {
position: absolute;
left: 0;
bottom: 0;
}
#navigation-header .bottombar-content-body .action .btn-button {
width: 100%;
height: 48px;
line-height: 46px;
border: 1px solid var(--color-primary);
color: var(--color-light);
font-size: 18px;
font-weight: bold;
padding: 0 27px;
text-align: center;
display: inline-block;
vertical-align: middle;
border-radius: 24px;
background-color: var(--color-primary);
transition: var(--transition);
}
#navigation-header .bottombar-content-body .action .btn-button#navigation-header .list-title:after {
content: "\e900";
font-size: 10px;
margin-left: 5px;
font-family: "iconavigation" !important;
}
#navigation-header .bottombar-content-body .action .btn-button:hover {
color: var(--color-primary);
background-color: var(--color-light);
}
#navigation-footer .footer-midber-inner i {
margin-right: 10px;
}
#navigation-footer .footer-midber-inner {
display: flex;
justify-content: space-between;
align-items: center;
color: var(--color-light);
}
#navigation-footer .footer-midber-inner .a-right {
text-align: right;
}
/*main*/
#navigation-header.fixed-bar + main.main {
padding-top: 105px;
}
}
#navigation-header.fixed,
.header-fixed {
position: fixed;
width: 100%;
}
@media screen and (max-width: 1024px) {
#maincontentBox {
padding-top: 0px !important;
}
#navigation-header .panel-menu-list-lv2 ul.menu-list-lv2:first-child li:first-child a:after,
#navigation-header #menu-3.panel-menu-list-lv2 li a:after {
content: "";
}
.panel-tab-control .control a[data-id="main"] {
display: none !important;
}
}
.ms-core-overlay {
overflow: initial !important;
}
/* Patch : overlapped Header in Header */
/* Patch : parent overlow */
#page {
overflow: initial !important;
}
/* Patch : sc-floating-apply */
.sc-floating-apply {
position: sticky !important;
top: 130px !important;
transition: none;
}
.sc-floating-apply.active {
top: 0 !important;
}
@media (min-width: 1140px) {
.sc-product-detail {
padding-top: 190px;
}
}
@media (max-width: 1139px) {
.sc-product-detail {
padding-top: 60px;
}
.sc-floating-apply {
top: 60px !important;
}
}
@media (max-width: 767px) {
.sc-product-detail {
padding-top: 50px;
}
}
#navigation-header.header-top::before {
content: none;
}
/* ====== Floating Navigation Bar ====== */
.mq-1140 #navigation-header.shrink {
transform: translateY(-130px);
transition-duration: 360ms;
/* transition: none;
transition-timing-function: unset; */
}
.stickyNav-anchor {
visibility: hidden;
height: 0px !important;
}
#navigation-page-sticky.stickyNav {
display: grid;
width: 100%;
max-height: calc(100vh - 80px);
position: fixed;
bottom: 0px;
left: 0px;
grid-template-columns: 100%;
grid-template-rows: auto 56px;
grid-template-areas:
"list"
"widgets";
box-sizing: border-box;
overflow: hidden;
box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.05);
font-family: "kurious-looped";
font-size: 16px;
color: #666;
overflow: visible;
z-index: 1000;
}
#navigation-page-sticky.stickyNav.cloak {
display: none;
visibility: hidden;
}
#navigation-page-sticky .stickyNav-panelList {
position: relative;
bottom: 0px;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
grid-area: list;
background: #fff;
max-height: 0vh;
z-index: 3;
transition-duration: 320ms;
}
#navigation-page-sticky .blank-list {
height: 56px;
}
#navigation-page-sticky.stickyNav > .overlay {
display: none;
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
z-index: 1;
cursor: default;
background-color: transparent;
}
#navigation-page-sticky.stickyNav.expand > .overlay {
display: block;
}
#navigation-page-sticky.stickyNav.expand .stickyNav-panelList {
max-height: calc(100vh - 80px);
}
#navigation-page-sticky .stickyNav-wrapper {
width: 100%;
padding: 32px 16px;
}
#navigation-page-sticky .stickyNav-panelList li {
border-bottom: 1px solid #EBEBEB;
}
#navigation-page-sticky .stickyNav-panelList li:last-child {
border-bottom: none;
}
#navigation-page-sticky a.sticky-anchor {
display: block;
position: relative;
padding: 16px 0px;
font-weight: 600;
}
.mq-1140 #navigation-page-sticky a.sticky-anchor::after {
content: '';
display: block;
position: absolute;
width: 0%;
height: 3px;
background-color: #00A94F;
bottom: 0px;
transition-property: width;
transition-duration: 320ms;
transition-delay: 240ms;
}
#navigation-page-sticky a.sticky-anchor i {
margin-right: 8px;
}
#navigation-page-sticky a.sticky-anchor > i::after {
display: inline-block;
width: 18px;
height: 18px;
}
#navigation-page-sticky a.sticky-anchor.active,
#navigation-page-sticky a.sticky-anchor > i::after {
color: #00A94F;
}
#navigation-page-sticky .stickyNav-panelList .box-cta {
display: none;
}
#navigation-page-sticky .stickyNav-panelWidgets {
display: grid;
height: 56px;
position: relative;
grid-template-columns: 40px auto 40px;
grid-template-rows: 100%;
align-items: center;
grid-area: widgets;
background: #fff;
gap: 8px;
padding: 8px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
z-index: 7;
}
#navigation-page-sticky.no-list .stickyNav-panelWidgets {
grid-template-columns: auto 40px;
}
#navigation-page-sticky.no-widgets .stickyNav-panelWidgets {
grid-template-columns: 40px auto;
}
#navigation-page-sticky.no-list.no-widgets .stickyNav-panelWidgets {
grid-template-columns: auto;
}
#navigation-page-sticky .stickyNav-panelWidgets > [class^='box-'] {
display: flex;
height: 100%;
position: relative;
justify-content: flex-end;
}
#navigation-widgets.single-gadget .group-widgets {
position: relative;
opacity: 1;
bottom: 0px;
padding: 0px;
transform: none;
transition: none;
visibility: visible;
margin: 0;
}
#navigation-page-sticky .box-toggleMenu {
height: 100%;
}
#navigation-page-sticky.expand .box-toggleMenu {
background-color: #EAEAEA;
}
#navigation-page-sticky .icon-toggleMenu,
#navigation-widgets .icon-line {
width: auto;
height: 100%;
}
#navigation-page-sticky:not(.no-list) .box-cta::before {
content: '';
position: absolute;
width: 1px;
height: 40px;
top: 0;
left: -1px;
background-color: #666;
opacity: 0.2;
}
#navigation-page-sticky .box-cta .btn {
display: flex;
width: 100%;
height: 100%;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
align-items: center;
justify-content: center;
line-height: 1em;
}
#navigation-page-sticky:not(.no-list) .stickyNav-panelWidgets .box-cta .btn {
width: calc(100% - 9px);
}
#navigation-page-sticky.stickyNav .stickyNav-btnClose {
display: flex;
position: absolute;
top: 16px;
right: 16px;
width: 40px;
height: 40px;
color: #00A94F;
font-size: 24px;
justify-content: center;
align-items: center;
border-radius: 50%;
overflow: hidden;
background: #E5F6ED;
z-index: 5;
}
#navigation-page-sticky.stickyNav .h4 {
font-family: inherit;
font-size: 20px;
font-weight: 700;
line-height: 28px;
color: #333;
margin-bottom: 24px;
}
#navigation-page-sticky .icon-close {
font-size: 18px;
font-style: normal;
}
#navigation-page-sticky .btn-badge,
#navigation-widgets .btn-badge {
display: inline-flex;
position: relative;
width: 40px;
height: 40px;
/* overflow: hidden; */
border-radius: 50%;
background-color: #20C65A;
color: #FFF;
justify-content: center;
align-items: center;
}
#navigation-page-sticky .btn-badge > i::before,
#navigation-widgets .btn-badge > i::before {
display: inline-block;
font-size: 18px;
width: 18px;
height: 18px;
}
#navigation-widgets .btn-badge > img {
width: auto;
height: 100%;
}
#navigation-widgets [data-tooltip]::before {
content: attr(data-tooltip);
position: absolute;
right: calc(100% + 14px);
white-space: nowrap;
height: 40px;
top: 0px;
display: flex;
align-items: center;
justify-content: flex-end;
font-size: 13px;
font-weight: 700;
color: #333;
background-color: #FFF;
box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
padding: 0px 22px;
border-radius: 8px;
}
#navigation-widgets [data-tooltip]::after {
content: '';
position: absolute;
width: 8px;
height: 8px;
right: calc(100% + 6px);
top: 20px;
transform: translate(-50%, -50%) rotate(-45deg);
background-color: #FFF;
box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.1);
}
#navigation-widgets.single-gadget [data-tooltip]::before,
#navigation-widgets.single-gadget [data-tooltip]::after,
#navigation-widgets.single-gadget .hasTooltip .box-widgets-tooltip {
transition-duration: 360ms;
transition-property: opacity, visibility;
visibility: hidden;
opacity: 0;
}
#navigation-widgets.single-gadget [data-tooltip]:hover::before,
#navigation-widgets.single-gadget [data-tooltip]:hover::after,
#navigation-widgets.single-gadget .hasTooltip:hover .box-widgets-tooltip {
visibility: visible;
opacity: 1;
}
#actionGadgets {
display: flex;
justify-content: center;
align-items: center;
color: #6B9E77;
}
#actionGadgets .icon-close,
.box-widgets.expand .icon-gadgets {
display: none;
color: #6B9E77;
}
.box-widgets.expand #actionGadgets {
background-color: #EAEAEA;
}
.box-widgets.expand #actionGadgets .icon-close {
display: inline-block;
}
/* Widgets */
#navigation-widgets .widget-overlay {
display: none;
position: fixed;
width: 100vw;
height: 100vh;
top: 0px;
left: 0px;
}
#navigation-widgets.expand .widget-overlay {
display: block;
}
#navigation-widgets .group-widgets {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
position: absolute;
bottom: 56px;
left: -2px;
background-color: #FFF;
padding: 2px;
box-sizing: content-box;
border-radius: 26px;
row-gap: 12px;
box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.08);
transition-duration: 320ms;
transition-property: opacity, transform, visibility;
opacity: 0;
transform: translateY(8px);
visibility: hidden;
}
#navigation-widgets.expand .group-widgets {
opacity: 1;
transform: translateY(0px);
visibility: visible;
}
#navigation-widgets .wrap-badge {
position: relative; list-style: none;
}
#navigation-widgets .box-widgets-tooltip {
display: block;
position: absolute;
max-width: 272px;
width: 65vw;
right: calc(100% + 14px);
bottom: -12px;
border-radius: 6px;
font-size: 14px;
box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
}
#navigation-widgets .box-widgets-tooltip::before {
content: '';
display: inline-block;
position: absolute;
width: 8px;
height: 8px;
right: -8px;
bottom: 24px;
transform: translate(-50%, -50%) rotate(-45deg);
background-color: #FFF;
box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
z-index: 0;
}
#navigation-widgets .box-widgets-tooltip-wrapper {
position: relative;
overflow: hidden;
border-radius: 8px;
z-index: 1;
}
/* SAMPLE */
[v-cloak] {
display: none;
}
.sample-tooltip {
position: relative;
width: 100%;
font-family: 'Kurious Looped';
font-size: 13px;
background-color: #FFF;
padding: 6px 16px 8px 16px;
color: #333;
}
.sample-tooltip h6.tt1 {
display: flex;
width: calc(100% + 32px);
font-family: 'kurious-looped';
font-weight: 700;
font-size: inherit;
align-items: center;
margin-bottom: 15px;
background-color: #F0F8F6;
margin: -8px -16px 8px -16px;
padding: 8px 16px;
line-height: 24px;
}
.d-circle {
display: inline-block;
width: 24px;
height: 24px;
overflow: hidden;
border-radius: 50%;
margin-right: 10px;
font-size: 0px;
}
.d-circle img {
width: 100%;
height: auto;
}
#navigation-widgets #sample-01 .box-widgets-tooltip::before {
background-color: #EAEAEA;
}
/* Stand Alone */
#navigation-widgets.box-widgets.stand-alone {
display: flex;
width: 40px;
height: auto;
position: fixed;
bottom: 8px;
right: 8px;
z-index: 998;
}
/* Sticky Icons */
:root {
--scale-widget-icon: 1.48;
}
#navigation-page-sticky .ic-menu::before {
transform: scale(var(--scale-widget-icon));
}
#navigation-widgets i.ic-nvg::before {
transform: scale(var(--scale-widget-icon));
}
#navigation-widgets i.ic-nav-icon_contact-tel::before {
transform: scale(1.2);
}
#navigation-widgets i.icon-close::before {
transform: scale(1.0);
}
#navigation-widgets .ic-video::before {
content: "\e922";
}
/**/
@media screen and (min-width: 1140px) {
#navigation-page-sticky.stickyNav {
position: sticky;
height: 56px;
width: 100%;
top: 0px;
bottom: initial;
grid-template-columns: 100%;
grid-template-rows: 56px 0px 0px;
grid-template-areas:
"list";
}
#navigation-page-sticky .stickyNav-wrapper {
width: 1140px;
height: 56px;
padding: 0px 15px;
margin: 0 auto;
display: grid;
justify-content: space-between;
grid-template-columns: calc(100% - 300px) 220px;
grid-template-rows: 100%;
grid-gap: 0 80px;
}
/**/
#navigation-page-sticky .stickyNav-panelList {
max-height: initial;
border-radius: 0px;
}
#navigation-page-sticky .stickyNav-panelList ul {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
column-gap: 16px;
overflow: hidden;
}
#navigation-page-sticky .stickyNav-panelList li {
display: inline-block;
border-bottom: none;
}
#navigation-page-sticky .stickyNav-panelList li i {
display: none;
}
#navigation-page-sticky .stickyNav-list a:hover,
#navigation-page-sticky .stickyNav-list a.active {
color: #00A94F;
}
.mq-1140 #navigation-page-sticky .stickyNav-panelList .stickyNav-list a.active:after {
width: 100%;
}
#navigation-page-sticky .sticky-anchor {
white-space: nowrap;
}
#navigation-page-sticky .stickyNav-panelList .box-cta {
display: inline-block;
padding: 8px 0;
}
#navigation-page-sticky.stickyNav .h4,
#navigation-page-sticky .box-toggleMenu,
#navigation-widgets.box-widgets,
#navigation-page-sticky.stickyNav .stickyNav-btnClose {
display: none;
}
#navigation-page-sticky .stickyNav-panelWidgets {
position: absolute;
width: 0px;
height: 0px;
padding: 0px;
}
#navigation-page-sticky .stickyNav-panelWidgets > [class^='box-'] {
display: none;
}
#navigation-page-sticky .btn-badge,
#navigation-widgets .btn-badge {
width: 48px;
height: 48px;
}
#navigation-widgets.box-widgets.norm {
display: flex;
width: 48px;
height: auto;
position: fixed;
bottom: 32px;
right: 48px;
z-index: 1200;
}
#navigation-widgets .group-widgets {
left: -3px;
}
#navigation-widgets.single-gadget .group-widgets {
padding: 2px;
}
#navigation-widgets [data-tooltip]::before {
top: 4px;
}
#navigation-widgets [data-tooltip]::after {
top: 24px;
}
#navigation-widgets .box-widgets-tooltip::before {
bottom: 28px;
}
#actionGadgets i.icon-gadgets::before,
#actionGadgets i.icon-close::before {
transition-duration: 360ms;
transition-property: transform;
transition-timing-function: cubic-bezier(0.095, 0.900, 0.620, 1.650);
}
#actionGadgets:hover i.icon-gadgets::before {
transform: scale(2.2);
}
#actionGadgets:hover i.icon-close::before {
transform: scale(1.3);
}
/* Custom Features */
#navigation-page-sticky.stickyNav.stalker {
position: fixed;
visibility: hidden;
opacity: 0;
transition-property: opacity;
transition-duration: 240ms;
}
.sticky-shrink #navigation-page-sticky.stickyNav.stalker {
visibility: visible;
opacity: 1;
}
/* Sticky Icons */
:root {
--scale-widget-icon: 1.8;
}
#navigation-widgets .ic-nav-icon_contact-tel::before {
transform: scale(1.52);
}
}
/**/
@media screen and (min-width: 1170px) {
#navigation-page-sticky .stickyNav-wrapper {
box-sizing: content-box;
}
}
/* Nav Colors */
#navigation-page-sticky .btn-green {
background-color: #00a950;
color: #FFF;
}
/* Fixed */
.main {
position: relative;
z-index: 1;
}
#navigation-header a,
#navigation-footer a {
font-family: "kurious-looped";
}
.mode-mobile #navigation-header.fixed.not-top-page .header-mobile,
.mode-mobile #navigation-header.fixed.force-mobile-header .header-mobile {
border-bottom: 1px solid #F1F1F1;
background-color: var(--color-light);
}
.mode-mobile #navigation-header.fixed.not-top-page .header-right a,
.mode-mobile #navigation-header.fixed.force-mobile-header .header-right a {
color: var(--color-dark);
}
.mode-mobile #navigation-header.fixed.not-top-page .logo-kbank .logo1,
.mode-mobile #navigation-header.fixed.force-mobile-header .logo-kbank .logo1 {
display: none;
}
.mode-mobile #navigation-header.fixed.not-top-page .logo-kbank .logo2,
.mode-mobile #navigation-header.fixed.force-mobile-header .logo-kbank .logo2 {
display: inline-block;
}
.mode-mobile #navigation-header.fixed.not-top-page .header-right a,
.mode-mobile #navigation-header.fixed.force-mobile-header .header-right a,
.mode-mobile #navigation-header.fixed .header-right .box-login a {
color: var(--color-dark);
}
.mode-mobile #navigation-header.fixed.not-top-page .icw-bar,
.mode-mobile #navigation-header.fixed.force-mobile-header .icw-bar {
background: var(--color-dark);
}
#navigation-header .tab .control {
width: initial;
border: none;
line-height: 1.4;
font-size: inherit;
height: initial;
}
#navigation-header .tab .control a {
background: none;
border-radius: 0px;
transition: color ease-in-out .2s;
}
/* ######### g-search ######### */
#g-nav-search .visible-w767 {
display: block;
}
#g-nav-search .hidden-w767 {
display: none;
}
#g-nav-search .hide {
display: none !important;
}
button.g-to-search {
color: var(--color-dark) !important;
margin-right: 16px !important;
font-size: 22px;
padding: 0;
border: unset;
background: transparent;
}
#g-nav-search {
position: fixed;
left: 0;
top: 0;
right: 0;
background: url(../../search-navigation/img/bg-search.jpg) center center;
background-size: cover;
height: 100%;
z-index: 1000;
font-family: "kurious-looped";
opacity: 0;
visibility: hidden;
height: 0;
z-index: 2147483646;
}
#g-nav-search.open {
opacity: 1;
visibility: visible;
height: 100%;
}
.g-container {
padding: 24px 16px;
}
.g-wrapper-back {
position: relative;
width: 100%;
}
.g-nav-back {
width: 20px;
height: 16px;
position: relative;
display: inline-block;
margin-bottom: 24px;
}
.g-nav-back::after {
font-family: "iconavigation";
content: "\e900";
font-size: 16px;
color: #FFF;
transform: rotate(-180deg);
position: absolute;
}
.g-nav-close {
position: absolute;
right: 16px;
display: none;
}
.g-nav-close::after {
font-family: 'iconavigation';
content: "\e906";
font-size: 16px;
color: #FFF;
transform: rotate(45deg);
position: absolute;
top: -16px;
}
.g-nav-close::marker {
display: none;
}
.g-row {
display: flex;
}
.g-row.line {
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
padding-bottom: 16px;
}
.g-input {
width: 100%;
position: relative;
}
.g-input.white {
background-color: #FFF;
}
.g-input.white i {
color: var(--g-green);
}
.g-input i {
color: #FFF;
position: absolute;
font-size: 16px;
bottom: 50%;
margin-bottom: -8px;
left: 16px;
cursor: pointer;
}
.g-input input {
background-color: rgba(0, 0, 0, 0.15) !important;
border: none !important;
height: 48px !important;
color: #FFF!important;
padding: 8px 16px 8px 40px !important;
border-radius: 100px !important;
width: 100%;
font-family: "kurious-looped" !important;
font-size: 16px;
font-weight: 600;
}
.g-input input.valid {
border: 1px solid #FFF !important;
}
.g-input input:focus-visible {
border: 1px solid var(--g-grey) !important;
outline: unset;
}
.g-input.white input {
background-color:#FFF !important;
border: 1px solid var(--g-grey) !important;
color: var(--g-dark) !important;
font-weight: 600;
}
.g-input.white input::-webkit-input-placeholder {
color: rgba(102, 102, 102, 0.3) !important;
font-weight: 600;
}
.g-input.white input::-moz-placeholder {
color: rgba(102, 102, 102, 0.3) !important;
font-weight: 600;
}
.g-input.white input::-ms-input-placeholder {
color: rgba(102, 102, 102, 0.3) !important;
font-weight: 600;
}
.g-input.white input::placeholder {
color: rgba(102, 102, 102, 0.3) !important;
font-weight: 600;
}
.g-input.white .g-clear-input {
background-color: var(--g-grey) !important;
font-weight: 600;
}
.g-clear-input {
min-width: 24px;
width: 24px;
height: 24px;
border-radius: 100% !important;
background-color: rgba(255, 255, 255, 0.3) !important;
position: absolute;
top: 50%;
right: 16px;
margin-top: -12px !important;
display: inline-block;
border: unset;
cursor: pointer;
}
#g-nav-search .g-clear-input::after {
font-family: 'iconavigation';
content: "\e906";
font-size: 13px;
color: #FFF;
transform: rotate(45deg);
position: absolute;
top: 5px;
left: 5px;
}
/* Fix Placeholder CSS */
#g-nav-search input::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.6) !important;
}
#g-nav-search input::-moz-placeholder {
color: rgba(255, 255, 255, 0.6) !important;
opacity: 1;
}
#g-nav-search input::-ms-input-placeholder {
color: rgba(255, 255, 255, 0.6) !important;
}
#g-nav-search input::-ms-input-placeholder {
color: rgba(255, 255, 255, 0.6) !important;
}
#g-nav-search input::placeholder {
color: rgba(255, 255, 255, 0.6) !important;
}
.g-mic {
width: 48px;
min-width: 48px !important;
height: 48px;
border-radius: 100% !important;
background: rgba(255, 255, 255, 0.3) !important;
display: inline-block;
margin-left: 16px !important;
cursor: pointer !important;
text-align: center !important;
border: unset;
}
#g-nav-search .g-mic i {
color: #FFF;
font-size: 24px;
margin-top: 1px;
display: inline-block;
}
.line-realbox {
}
.realbox-head {
font-weight: 500;
color: var(--g-dark-2);
font-size: 13px;
line-height: 20px;
padding: 16px 8px 8px 16px;
position: relative;
}
.realbox-head:after {
content: '';
position: absolute;
top: 0;
left: 16px;
right: 16px;
background: var(--g-grey);
height: 1px;
}
.g-input.open ._inner {
z-index: 100;
position: relative;
}
.g-input.open input {
border: none !important;
border-radius: unset !important;
border-top-right-radius: 24px !important;
border-top-left-radius: 24px !important;
}
.g-input.open .realbox-dropdown {
border: 1px solid var(--g-green);
display: block;
}
.realbox-dropdown {
position: absolute;
left: -1px;
right: -1px;
top: -1px;
z-index: 99;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16);
background: #FFF;
border-radius: 24px;
border: 1px solid var(--grey);
max-height: 300px;
overflow-y: scroll;
padding-top: 48px;
display: none;
overflow: hidden;
}
.realbox-option {
color: var(--g-dark-2);
cursor: pointer;
padding: 0 15px;
font-weight: 600;
line-height: 24px;
padding: 8px 16px;
display: block;
}
.realbox-option:hover {
background-color: var(--g-green);
color: #FFF;
}
.g-mic.green {
background-color: var(--g-green) !important;
color: #FFF;
font-size: 27px;
}
.g-mic.green i {
padding-top: 10px;
display: inline-block;
}
.g-tooltip {
display: none;
}
#g-defult-result {
padding-top: 14px;
}
.g-wrapper {
height: calc(100vh - 129px);
overflow-y: auto;
position: relative;
padding-bottom: 40px;
}
.g-popular-header {
color: #FFF;
font-size: 13px;
font-weight: 500;
margin-top: 32px;
}
.g-list-popular {
font-size: 16px;
line-height: 24px;
font-weight: 600;
color: #FFF;
}
.g-list-popular a {
display: block;
margin-top: 16px;
color: #FFF;
}
.g-list-popular a:hover {
text-decoration: underline;
}
.g-recommend {
margin-top: 56px;
overflow: hidden;
}
.g-recommend-header {
color: #FFF;
font-size: 13px;
font-weight: 500;
margin-bottom: 16px;
}
.g-list-recommend {
display: flex;
flex-flow: wrap;
margin-right: -7px;
margin-left: -7px;
}
.g-list-recommend a {
text-align: right;
display: inline-block;
background: #FFF;
padding-top: 16px;
padding-left: 16px;
border-radius: 8px;
width: calc(50% - 14px);
margin-right: 7px;
margin-left: 7px;
margin-bottom: 14px;
overflow: hidden;
}
.g-list-recommend span {
font-size: 16px;
line-height: 14px;
font-weight: 700;
color: var(--g-dark);
display: block;
margin-bottom: 16px;
text-align: left;
}
.g-list-recommend img {
margin-left: auto;
}
.g-autosuggest {
font-size: 16px;
line-height: 24px;
font-weight: 600;
color: #FFF;
}
.g-autosuggest a {
display: block;
margin-top: 16px;
font-size: 16px;
line-height: 24px;
font-weight: 600;
color: #FFF;
}
.g-recorder {
position: absolute;
top: 50%;
transform: translateY(-100%);
left: 0;
right: 0;
}
.g-wrapper-mic {
text-align: center;
position: relative;
}
.icw button.btn-record-agin {
background-color: var(--g-green);
border-radius: 8px;
color: #FFF;
display: block;
width: 100%;
text-align: center;
font-size: 16px;
line-height: 40px;
cursor: pointer;
font-weight: 600;
position: absolute;
bottom: 24px;
border: unset;
background: transparent;
}
.icw button.btn-record-agin i,
.icw button.btn-record-agin span {
display: inline-block;
vertical-align: middle;
border: unset;
background: transparent;
}
.icw button.btn-record-agin.mb {
display: block;
background-color: var(--g-green);
}
#g-nav-search .btn-record-agin.mb {
background-color: var(--g-green);
}
.icw button.btn-record-agin.dt {
display: none;
}
.g-wrapper-mic i {
background-color: rgba(255, 255, 255, 0.3);
width: 80px;
height: 80px;
border-radius: 100%;
display: inline-block;
vertical-align: middle;
font-size: 40px;
color: #FFF;
padding-top: 17px;
}
.g-pulse-ring {
display: block;
content: '';
width: 100px;
height: 100px;
background: transparent;
border: 1px solid #fff;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
animation: pulsate infinite 1.5s;
}
@-webkit-keyframes pulsate {
0% {
-webkit-transform: scale(1, 1);
opacity: 1;
background: transparent;
}
100% {
-webkit-transform: scale(1.3, 1.3);
opacity: 0;
background: #fff;
}
}
.g-text-start {
font-size: 20px;
line-height: 30px;
font-weight: 600;
color: #FFF;
text-align: center;
margin-top: 32px;
}
/* ####################### wave sound ####################### */
.g-sound-wave {
display: flex;
align-items: center;
justify-content: center;
margin-top: 50px;
}
.g-sound-wave span {
width: 2px;
height: 10px;
background-color: #fff;
margin: 0 1.35px;
}
.g-sound-wave span:nth-child(1) {
height: 18px;
}
.g-sound-wave span:nth-child(2) {
height: 33px;
}
.g-sound-wave span:nth-child(3) {
height: 10px;
}
.g-sound-wave span:nth-child(4) {
height: 11px;
}
.g-sound-wave span:nth-child(5) {
height: 16px;
}
.g-sound-wave span:nth-child(6) {
height: 20px;
}
.g-sound-wave span:nth-child(7) {
height: 12px;
}
.g-sound-wave span:nth-child(8) {
height: 27px;
}
.g-sound-wave span:nth-child(9) {
height: 28px;
}
.g-sound-wave span:nth-child(10) {
height: 13px;
}
.g-sound-wave span:nth-child(11) {
height: 10px;
}
.g-sound-wave span:nth-child(12) {
height: 14px;
}
.g-sound-wave span:nth-child(13) {
height: 13px;
}
.g-sound-wave span:nth-child(14) {
height: 12px;
}
.g-sound-wave span:nth-child(15) {
height: 10px;
}
.g-sound-wave span:nth-child(16) {
height: 42px;
}
.g-sound-wave span:nth-child(17) {
height: 30px;
}
.g-sound-wave span:nth-child(18) {
height: 17px;
}
.g-sound-wave span:nth-child(19) {
height: 11px;
}
.g-sound-wave span:nth-child(20) {
height: 16px;
}
.g-sound-wave span:nth-child(21) {
height: 16px;
}
.g-sound-wave span:nth-child(21) {
height: 27px;
}
.g-sound-wave span:nth-child(22) {
height: 48px;
}
.g-sound-wave span:nth-child(23) {
height: 13px;
}
.g-sound-wave span:nth-child(24) {
height: 13px;
}
.g-sound-wave span:nth-child(25) {
height: 20px;
}
.g-sound-wave span:nth-child(25) {
height: 24px;
}
.g-sound-wave span:nth-child(26) {
height: 14px;
}
.g-sound-wave span:nth-child(27) {
height: 30px;
}
.g-sound-wave span:nth-child(28) {
height: 29px;
}
.g-sound-wave span:nth-child(29) {
height: 13px;
}
.g-sound-wave span:nth-child(30) {
height: 10px;
}
.g-sound-wave span:nth-child(31) {
height: 13px;
}
.g-sound-wave span:nth-child(32) {
height: 12px;
}
.g-sound-wave span:nth-child(33) {
height: 10px;
}
.g-sound-wave span:nth-child(34) {
height: 9px;
}
.g-sound-wave span:nth-child(35) {
height: 34px;
}
.g-sound-wave span:nth-child(36) {
height: 24px;
}
.g-sound-wave span:nth-child(37) {
height: 13px;
}
.g-sound-wave span:nth-child(38) {
height: 8px;
}
.g-sound-wave span:nth-child(39) {
height: 11px;
}
.g-sound-wave span:nth-child(40) {
height: 10px;
}
@keyframes scale1 {
0% {
-webkit-transform: scaleY(0.6);
-moz-transform: scaleY(0.6);
-ms-transform: scaleY(0.6);
-o-transform: scaleY(0.6);
transform: scaleY(0.6);
}
40% {
-webkit-transform: scaleY(1.2);
-moz-transform: scaleY(1.2);
-ms-transform: scaleY(1.2);
-o-transform: scaleY(1.2);
transform: scaleY(1.2);
}
100% {
-webkit-transform: scaleY(0.6);
-moz-transform: scaleY(0.6);
-ms-transform: scaleY(0.6);
-o-transform: scaleY(0.6);
transform: scaleY(0.6);
}
}
.bar-scale1 {
-webkit-animation: scale1 0.6s infinite;
animation: scale1 0.6s infinite;
-webkit-transform-origin: center;
-moz-transform-origin: center;
-ms-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
}
@keyframes scale2 {
0% {
-webkit-transform: scaleY(0.5);
-moz-transform: scaleY(0.5);
-ms-transform: scaleY(0.5);
-o-transform: scaleY(0.5);
transform: scaleY(0.5);
}
30% {
-webkit-transform: scaleY(1.6);
-moz-transform: scaleY(1.6);
-ms-transform: scaleY(1.6);
-o-transform: scaleY(1.6);
transform: scaleY(1.6);
}
100% {
-webkit-transform: scaleY(0.5);
-moz-transform: scaleY(0.5);
-ms-transform: scaleY(0.5);
-o-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
.bar-scale2 {
-webkit-animation: scale2 0.6s infinite;
animation: scale2 0.6s infinite;
-webkit-transform-origin: center;
-moz-transform-origin: center;
-ms-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
}
@keyframes scale3 {
0% {
-webkit-transform: scaleY(1.5);
-moz-transform: scaleY(1.5);
-ms-transform: scaleY(1.5);
-o-transform: scaleY(1.5);
transform: scaleY(1.5);
}
70% {
-webkit-transform: scaleY(0.5);
-moz-transform: scaleY(0.5);
-ms-transform: scaleY(0.5);
-o-transform: scaleY(0.5);
transform: scaleY(0.5);
}
100% {
-webkit-transform: scaleY(1.5);
-moz-transform: scaleY(1.5);
-ms-transform: scaleY(1.5);
-o-transform: scaleY(1.5);
transform: scaleY(1.5);
}
}
.bar-scale3 {
-webkit-animation: scale3 0.6s infinite;
animation: scale3 0.6s infinite;
-webkit-transform-origin: center;
-moz-transform-origin: center;
-ms-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
}
.stop-animation {
-webkit-animation-duration: 0s;
animation-duration: 0s;
}
/* ####################### wave sound ####################### */
@media screen and (min-width: 768px) {
button.g-to-search {
color: #FFF !important;
margin-right: 0 !important;
background: unset;
border: unset;
cursor: pointer;
font-size: 16px;
}
#g-nav-search .visible-w767 {
display: none;
}
#g-nav-search .hidden-w767 {
display: block;
}
#g-nav-search {
background: url(../../search-navigation/img/bg-search.jpg) center center;
background-size: cover;
}
.g-wrapper-back {
text-align: right;
margin-bottom: 16px;
}
.g-nav-back {
display: none;
}
.g-row.line {
border-top: 1px solid rgba(255, 255, 255, 0.3);
border-bottom: unset;
padding-top: 16px;
}
.g-nav-close {
position: relative;
display: inline-block;
}
.g-container {
max-width: 1172px;
margin: 0 auto;
padding: 50px 16px 100px;
}
.icw button.btn-record-agin.mb {
display: none;
}
.icw button.btn-record-agin {
position: relative;
}
.icw button.btn-record-agin.dt {
display: inline-block;
width: auto;
padding: 0 90px;
bottom: unset;
margin-top: 32px;
background-color: var(--g-green);
}
.g-recorder {
text-align: center;
transform: translateY(-50%);
}
.g-mic {
position: relative;
}
.g-tooltip {
font-size: 13px;
line-height: 18px;
color: var(--g-dark-2);
padding: 0 8px;
border-radius: 8px;
background-color: #FFF;
white-space: nowrap;
position: absolute;
top: -18px;
left: 50%;
margin-left: -54px;
display: none;
border: 1px solid var(--g-grey);
font-family: "kurious-looped";
}
.g-tooltip::after {
content: '';
position: absolute;
bottom: -6px;
left: 50%;
width: 10px;
height: 10px;
background: #FFF;
display: inline-block;
transform: rotate(45deg);
border-right: 1px solid var(--g-grey);
border-bottom: 1px solid var(--g-grey);
}
.g-mic:hover .g-tooltip {
display: block;
}
.g-flex-row {
display: flex;
align-items: baseline;
justify-content: space-between;
}
.g-recommend {
margin-top: 0;
width: 75%;
}
.g-list-recommend a {
width: calc(33.33% - 20px);
margin-right: 10px;
margin-left: 10px;
height: 162px;
}
.g-list-recommend a img {
margin-left: auto;
}
.g-list-recommend {
margin-right: -10px;
margin-left: -10px;
justify-content: end;
}
.g-list-recommend span {
margin-bottom: 0;
}
}
/* ######### search ######### */
/* ######### fx-showConsent + panel-open ######### */
.fx-showConsent.panel-open #navigation-header{position: absolute;}
@media screen and (max-width: 1140px) {
.fx-showConsent #navigation-header .panel-switch {height: calc(100dvh - 160px); }
.fx-showConsent #navigation-header .panel-submenu {top: 180px; height: calc(100dvh - 180px); }
.fx-showConsent #navigation-header .panel-sub-body {min-height: calc(100dvh - 228px);}
.fx-showConsent #navigation-header .panel-sub-content {min-height: calc(100dvh - 276px);}
.fx-showConsent.panel-open #navigation-header .panel-nav{top: 100px; height: calc(100dvh - 100px);}
.fx-showConsent.panel-open #fx-wrapCK{pointer-events: visible;}
}
@media screen and (max-width: 991px) {
.fx-showConsent #navigation-header .panel-switch {height: calc(100dvh - 180px); }
.fx-showConsent #navigation-header .panel-submenu {top: 180px; height: calc(100dvh - 180px); }
.fx-showConsent #navigation-header .panel-sub-body {min-height: calc(100dvh - 228px);}
.fx-showConsent #navigation-header .panel-sub-content {min-height: calc(100dvh - 276px);}
.fx-showConsent.panel-open #navigation-header .panel-nav {top: 120px; height: calc(100dvh - 120px);}
}
@media screen and (max-width: 767px) {
.fx-showConsent #PolicyCookies p{min-height: 130px}
.fx-showConsent #navigation-header .panel-switch {height: calc(100dvh - 280px); }
.fx-showConsent #navigation-header .panel-submenu {top: 280px; height: calc(100dvh - 280px); }
.fx-showConsent #navigation-header .panel-sub-body {min-height: calc(100dvh - 328px);}
.fx-showConsent #navigation-header .panel-sub-content {min-height: calc(100dvh - 376px);}
.fx-showConsent.panel-open #navigation-header .panel-nav{top: 220px; height: calc(100dvh - 220px);}
}
/* ######### fx-showConsent + panel-open ######### */