/* Font Face */

@font-face {
    font-family: 'Gotham';
    src: url('../font/Gotham-Book.woff2') format('woff2'), url('../font/Gotham-Book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('../font/Gotham-Bold.woff2') format('woff2'), url('../font/Gotham-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('../font/Gotham-Black.woff2') format('woff2'), url('../font/Gotham-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('../font/Gotham-Thin.woff2') format('woff2'), url('../font/Gotham-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('../font/Gotham-Light.woff2') format('woff2'), url('../font/Gotham-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}


@supports not (aspect-ratio: 1/1) {
    .element::before {
      float: left;
      padding-top: 100%;
      content: "";
    }
  
    .element::after {
      display: block;
      content: "";
      clear: both;
    }
  }
  
/* Font Style */

.Gotham-Black {
    font-family: 'Gotham';
    font-weight: 900;
    font-style: normal;
}

.Gotham-Bold {
    font-family: 'Gotham';
    font-weight: bold;
    font-style: normal;
}

.Gotham-Thin {
    font-family: 'Gotham';
    font-weight: 100;
    font-style: normal;
}

.Gotham-Book {
    font-family: 'Gotham';
    font-weight: normal;
    font-style: normal;
}

.Gotham-Light {
    font-family: 'Gotham';
    font-weight: 300;
    font-style: normal;
}

.bold {
    font-weight: bold;
}

#navbar-search-input {
    border-radius: 5px;
    /*height: unset;*/
    font-size: 12px;
    background-image: url('../img/icon/search.png');
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: left+5px center;
    padding-left: 30px;
}

@media (min-width: 768px) {
    #navbar-search-input {
        border-radius: 55px;
        width: 140px;
    }
}

@media (min-width: 900px) {
    #navbar-search-input {
        border-radius: 55px;
        width: 230px;
    }
}

#navbar-search-input::placeholder {
    color: #565656;
}


/*.navbar {*/


/*    padding-top: 1.5rem;*/


/*    padding-bottom: 1.5rem;*/


/*}*/

a {
    color: #000000;
}

.pointer {
    cursor: pointer;
}

.section-exclusive-brands-mobile .separator-with-text{
    justify-content: center;
}

.separator-with-text {
    display: flex;
    align-items: center;
    text-align: center;
    color: #235C9F;
    font-size: 27px;
}

.separator-with-text::before,
.separator-with-text::after {
    content: '';
    flex: 1;
    border-bottom: 5px solid #235C9F;
}

.separator-with-text:not(:empty)::before {
    margin-right: .25em;
}

.separator-with-text:not(:empty)::after {
    margin-left: .25em;
}

#section-top-image {
    /* height: 600px; */
    width: 100%;
    /* background-image: url("../img/image/Video_Background.jpg"); */
    background-color: #000000;
    background-size: contain;
    position: relative;
}

#section-top-image video {
    width: auto;
    left: 50%;
    transform: translateX(-50%);
}

.top-video{
    width: auto;
    height: 100%;
    max-width: 1600px;
    margin: 0 10vw 0 10vw;
}

.top-video-overlay{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    text-align:center;
}

@media (min-width: 768px) {
    #section-top-image {
        height: unset;
        width: 100%;
    }
    #section-top-image video {
        width: 100%;
        left: unset;
        transform: unset;
    }
    .separator-with-text:not(:empty)::before {
        margin-right: 5vw;
    }
    
    .separator-with-text:not(:empty)::after {
        margin-left: 5vw;
    }
}

#section-exclusive-brands {
    margin: 0 10vw 0 10vw;
    max-width: 1600px;
}


/* #section-exclusive-brands,
.separator-with-text:not(:empty)::before,
.separator-with-text:not(:empty)::after {
    margin: 0 10vw 0 10vw;
    max-width: 1600px;
} */

@media screen and (max-width: 400px) {
    .top-video{
        margin: unset;
    }
}

@media (min-width: 1800px) {
    #section-exclusive-brands{
        margin: auto;
    }
    .top-video{
        margin: auto;
    }
    #section-banner {
        margin: auto !important;
        max-width: 1600px;
    }
}

@media screen and (min-width: 768px) {
    #section-banner {
        margin: 0 10vw;
    }
}

#section-best-selling-toys {
    display: none;
}

#section-best-selling-toys-mobile {
    display: block;
}

#section-vip-slider {
    display: none;
}

#section-vip-slider-mobile {
    display: block;
    padding-bottom: 45px;
}


@media (min-width: 768px) {
    #section-best-selling-toys {
        display: block;
        max-width: 1600px;
        margin: 0 10vw 0 10vw;
    }
    #section-best-selling-toys-mobile {
        display: none;
    }
    #section-vip-slider {
        display: block;
        max-width: 1600px;
        margin: 0 10vw 0 10vw;
    }
    #section-vip-slider-mobile {
        display: none;
    }
}

@media (min-width: 1800px) {
    #section-best-selling-toys {
        margin: auto;
    }
    #section-vip-slider {
        margin: auto;
    }
}

.banner-title{
    color: #FFFFFF;
    font-size: 46px;
}

.banner-description{
    color: #FFFFFF;
    font-size: 16px;
}

.banner-view-more{
    margin-top: 20px;
    color: #FFFFFF;
    font-size: 16px;
    border: #FFFFFF 1px solid;
    padding: 10px 30px;
}

.banner-mobile-overlay{
    background-color: #000000;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0.3;
}

.banner-mobile-banner{
    height: 600px;
    width: 100%;
    background-size: cover;
    background-position: center;
}

.banner-mobile-detail{
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.best-selling-toys-mobile-header {
    background-color: #235C9F;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    position: relative;
    bottom: 25px;
}

.best-selling-toys-mobile-header .underline {
    text-decoration: none; 
    position: relative; 
}   

.best-selling-toys-mobile-header .underline:after {
    position: absolute;
    content: '';
    height: 6px;
    bottom: -12px; 
    margin: 0 auto;
    left: 0;
    right: 0;
    width: 30%;
    background: #FFFFFF;
}
  
.best-selling-toys-mobile-header-container {
    max-width: 50%;
}

.best-selling-toys-mobile-header .title {
    font-size: 25px;
    color: #FFFFFF;
    word-break: break-word;
}

.best-selling-toys-mobile-header .desc {
    font-size: 15px;
    color: #FFFFFF;
    word-break: break-word;
}

.best-selling-toys-mobile-header .visit-more {
    font-size: 15px;
    background-color: #FFFFFF;
    color: #235C9F;
    padding: 0.5rem 1.5rem;
}


/*.splide__arrow--prev{*/


/*    left: -5em !important;*/


/*}*/


/*.splide__arrow--next{*/


/*    right: -5em !important;*/


/*}*/

.container-exclusive-brands {
    flex-flow: row nowrap;
    display: flex;
    width: 100%;
    height: 900px;
}

.flex-th,
.flex-td {
    height: 50%;
    /*border: 1px solid black;*/
    margin: 10px 0;
    text-align: center;
    position: relative;
}

.flex-th.border,
.flex-td.border {
    border: 2px solid #383838;
}

.flex-col {
    display: flex;
    flex-flow: column nowrap;
    flex-grow: 1;
}

.flex-th img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.section-break {
    height: 5vh;
}

.splide__slide img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    /*height: auto;*/
    top: 0;
    left: 0;
    right: 0;
    /*margin: auto;*/
}

.slider-product-image-div {
    /* aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center; */
    width: 100%;
    height: 200px;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* .slider-product-image-div img {
    width: auto;
    height: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
} */

.slider-product-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    flex-shrink: 0;
}

#banner-slider .splide__pagination {
    margin-top: -30px;
    position: unset !important;
}

.splide__pagination {
    margin-top: 15px;
    position: unset !important;
}

.splide__pagination .is-active {
    background: #235C9F !important;
}

.splide--nav>.splide__track>.splide__list>.splide__slide.is-active {
    border: none !important;
}

.slider-break {
    height: 30px;
}


/* .splide__arrows {
    position: relative;
} */

.custom-arrow-prev {
    height: 43px;
    width: 43px;
    border-radius: 50%;
    background-color: #C9C9C9;
    position: sticky;
    /* top: 50%; */
}

.toys-title {
    text-align: center;
    margin: 10px 0;
    font-family: 'Gotham';
    font-weight: normal;
    font-style: normal;
    font-size: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* number of lines to show */
    line-height: 18px;
    /* fallback */
    max-height: 36px;
    height: 36px;
    /* fallback */
}

.toys-desc {
    display: none;
}

.toy_menu_item_img_container {
    width: 100%;
    aspect-ratio: 1/1;
    position: relative;
}

.toy_menu_item_img_container img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.toy_menu_item_title {
    text-align: start;
    color: #000000;
    margin-top: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    /* number of lines to show */
    line-height: 16px;
    /* fallback */
    max-height: 16px;
    /* fallback */
}

.toy_menu_item_desc {
    text-align: start;
    color: #000000;
    margin-top: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* number of lines to show */
    line-height: 16px;
    /* fallback */
    max-height: 32px;
    height: 32px;
    /* fallback */
}

@media (min-width: 768px) {
    .toys-desc {
        margin: 10px 0px;
        text-align: center;
        font-size: small;
        font-family: 'Gotham';
        font-weight: 300;
        font-style: normal;
        font-size: 12px;
        word-break: break-all;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        /* number of lines to show */
        line-height: 12px;
        /* fallback */
        max-height: 24px;
        height: 24px;
        /* fallback */
    }
}

.toys-btn {
    text-align: center;
    font-family: 'Gotham';
    font-weight: normal;
    font-style: normal;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    cursor: pointer;
    color: #5B5B5B;
}

.toys-btn a {
    color: #000000 !important;
}

.toys-btn div {
    color: #083460 !important;
}

.toys-btn .visit_now_arrow {
    color: #083460 !important;
    float: right;
    margin-left: 5px;
}

.view-more-arrow {
    height: 10px;
    width: auto !important;
    margin-left: 13px;
}

@media screen and (max-width: 768px) {
    footer {
        margin-bottom: 80px;
    }
}

.footer-desc {
    flex: 1;
    /* margin-left: 5vw; */
    max-width: 700px;
    align-self: center;
}

.footer-img-section {
    display: none;
}

@media (min-width: 768px) {
    .footer-desc {
        flex: 1;
        /* margin-left: 5vw; */
        max-width: 700px;
        align-self: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .footer-img-section {
        flex: 1;
        display: flex;
        flex-direction: row;
        background-repeat: no-repeat;
        background-position: right;
        background-size: auto 100%;
        opacity: 0.5;
    }
}

#dropdown_area_toy,
#dropdown_area_baby{
    /* overscroll-behavior: contain;
    overflow-y: scroll;
    max-height: calc((100vh - 4rem) - 48px);
    top: calc(4rem + 48px);
    margin-top: 0px; */
    /* min-height: 30em; */
    min-width: calc(100% + 3rem);
    width: 100%;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    margin-bottom: -1.5rem;
    margin-top: 1.5rem;
    display: none;
    background-color: white;
    /* position: fixed;
    top: 5rem; */
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

#toy_drop_down_list{
    overscroll-behavior: contain;
    overflow-y: scroll;
    max-height: calc((100vh - 4rem));
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

#toy_drop_down_list::-webkit-scrollbar {
    display: none;
}

#baby_drop_down_list{
    overscroll-behavior: contain;
    overflow-y: scroll;
    max-height: calc((100vh - 4rem));
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

#baby_drop_down_list::-webkit-scrollbar {
    display: none;
}

#dropdown_map_area {
    min-height: 30em;
    min-width: calc(100% + 3rem);
    width: 100%;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    margin-bottom: -1.5rem;
    margin-top: 1.5rem;
    display: none;
    background-color: white;
    /* position: fixed;
    top: 5rem; */
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.dropdown_menu_inner {
    display: flex;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    /*align-items: center;*/
    justify-content: center;
}

.dropdown_list_div {
    /* flex: 1; */
    width: 20%;
    max-width: 200px;
    margin-left: 3vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dropdown_map {
    flex: 3;
    width: 70%;
    margin-left: 3vw;
    text-align: -webkit-center;
    align-self: center;
}

.map-container {
    width: 400px;
    /* width: 65%; */
    height: 100%;
    min-height: 30em;
    position: relative;
    margin-top: 30px;
    left: -80px;
}

div#vmap { 
    width:600px;
    height:300px; 
    margin: auto;
    position: relative;
    right: 100px;
}

@media (min-width: 940px) {
    div#vmap { 
        width:650px;
        height:325px; 
        margin: auto;
        position: relative;
        right: 200px;
    }
}

@media (min-width: 1200px) {
    div#vmap { 
        width: 800px;
        height: 400px; 
        margin: auto;
        position: relative;
        right: 300px;
    }
}

@media (min-width: 1366px) {
    div#vmap { 
        width: 900px;
        height: 450px; 
        margin:  auto;
        position: relative;
        right: 400px;
    }
}

@media (min-width: 1600px) {
    div#vmap { 
        width: 1000px;
        height: 500px; 
        margin: auto;
        position: relative;
        right: 500px;
    }
}

@media (min-width: 1920px) {
    div#vmap { 
        width: 1100px;
        height: 550px; 
        margin: auto;
        position: relative;
        right: 600px;
    }
}

/* #vmap {
    /* position: absolute !important;
    left: -100%;
    right: -100%;
    margin: auto;
    width: 100%;
    height: 100%;
    margin: auto;
} */

.dropdown_list_ul {
    list-style-type: none;
    text-align: center;
    padding: 0 10px;
    width: 100%;
}

.dropdown_list_ul_map {
    width: 70%;
    /* max-width: 150px; */
}

.dropdown_list_ul_map span {
    color: #083460;
}

.map_list_container {
    display: flex;
    width: 100%;
    justify-content: space-around;
}

.dropdown_latest_product {
    width: 80%;
    /* flex: 5; */
    margin-right: 3vw;
    word-break: break-word;
    overscroll-behavior: contain;
    overflow: scroll;
    max-height: calc((100vh - 4rem));
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.dropdown_latest_product::-webkit-scrollbar {
    display: none;
}

.dropdown_map_list {
    width: 28%;
    min-width: 450px;
    /* flex: 2; */
    /* margin-right: 5vw; */
    word-break: break-word;
    display: flex;
    justify-content: center;
    /* justify-content: center; */
    align-items: center;
    flex-direction: column;
}

.map_li a {
    color: black;
}

.map_link_btn{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    /* justify-content: space-evenly; */
    align-items: center;
    width: 100%;
    pointer-events: none;
}

.map_bold{
    font-weight: bold;
}

.map_bold a{
    color: #F39300;
}

.dropdown_map_top_box_mobile {
    display: flex;
    justify-content: center;
    align-items: center;
    /* height: 80px; */
    background-color: #2f5da1;
    color: #ffffff;
    width: 100%;
    /* margin: 30px 30px 0 30px; */
    margin-top: 50px;
    text-align: center;
    font-size: 18px;
    padding: 30px;
}

.dropdown_map_mobile_text a {
    font-size: 0.8rem;
    color: #2f5da1;
}

.dropdown_map_mobile_text a div {
    margin-bottom: 20px;
}

.dropdown_map_top_box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
    background-color: #F39300;
    color: white;
    width: 100%;
    margin: 0 30px 0 30px;
    text-align: center;
}

.dropdown_list_ul li {
    padding-top: 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
}

.dropdown_list_ul li a {
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 16px;
}

.dropdown_list_ul button {
    margin-top: 10px;
    width: 100%;
}

.latest_product,
.latest_product_tomica,
.latest_product_palrail,
.latest_product_licca {
    width: 100%;
}

.latest_product,
.latest_product_tomica,
.latest_product_palrail,
.latest_product_licca {
    width: 100%;
    height: 100%;
    display: none;
}

.latest_product {
    background-color: #FFFFFF;
    display: none;
}

.dropdown_latest_product img {
    width: auto;
    height: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.latest_product_tomica {
    background-color: #FFFFFF;
}

.latest_product_palrail {
    background-color: #FFFFFF;
}

.latest_product_licca {
    background-color: #FFFFFF;
}

.series-name{
    width: 33%;
    display: flex;
    align-items: center;
}

.series-name .series-icon{
    width: 150px;
    height: 150px;
    display: flex;
}

.series-name .series-text{
    margin-left: 5px;
    color: #235C9F;
    flex: 1;
    font-size: 18px;
}

/*.latest_product_area{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}
*/

.latest_product_item {
    display: flex;
    flex-direction: column;
    text-align: center;
    /* flex: 1; */
    width: 20%;
    padding-right: 5px;
    padding-left: 5px;
}

.footer-links {
    text-align: left;
    margin: 0 5vw;
    max-width: 1600px;
}

.footer-links .footer-details a {
    color: #235C9F;
    font-size: small;
}

.footer-title {
    color: #235C9F;
    margin-bottom: 10px;
}

.footer-copyright {
    color: #235C9F;
    font-size: x-small;
    text-align: left;
    padding: 30px 0;
}

@media (min-width: 768px) {
    .footer-copyright {
        color: #235C9F;
        font-size: x-small;
        text-align: center;
        padding: 30px 0;
    }
    .footer-links {
        margin: 0 10vw 0 10vw;
    }
}

@media (min-width: 1800px) {
    .footer-links {
        margin: auto;
    }
}

.mobile-footer {
    /* margin-top: 20px; */
}

.mobile-footer-panel .dropdown{
    padding-left: 20px;
}

.mobile-footer-panel {
    padding-top: 30px;
}

.mobile-footer-panel .title button {
    font-size: 20px;
    line-height: 50px;
    color: #235C9F;
    font-weight: 300 !important;
    padding: 0 !important;
}

.mobile-footer-panel .title a {
    font-size: 20px;
    line-height: 50px;
    color: #235C9F;
}

.mobile-footer-panel .dropdown .panel-collapse {
    padding-left: 20px;
}

.mobile-footer-dropdown::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
    float: right;
    margin-top: 18px;
}

#section-exclusive-brands-mobile {
    display: none;
}

@media screen and (max-width: 768px) {
    #section-exclusive-brands-mobile {
        display: block;
        /* /padding: 0rem 2rem; */
    }
    #section-exclusive-brands {
        display: none;
    }
}

.mobile-main-slider-img {
    width: 100%;
    padding: 0rem 1rem;
}

.mobile-thumbnail-slider {
    padding: 0rem 1rem;
}

main {
    /* margin-top: 7rem; */
}


/* Nav bar */

.navbar {
    transition: all 0.4s;
    padding-left: 5rem;
    padding-right: 5rem;
    font-size: 27px;
    position: fixed;
    /* Set the navbar to fixed position */
    top: 0;
    /* Position the navbar at the top of the page */
    width: 100%;
    /* Full width */
    z-index: 9999;
}

.nav-item a {
    color: #FFFFFF;
}

.solid-nav {
    margin-top: 6rem;
}

@media (min-width: 768px) {
    .solid-nav {
        margin-top: 10rem;
    }
}

.navbar-inner {
    height: 4rem;
    max-width: 1600px;
    padding: unset;
}

#navbar-toggler-button {
    position: absolute;
    right: 1.5rem;
    top: 32px;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    z-index: 1;
}

.nav-shop-button-mobile{
    display: none !important;
}

.mobile-active .nav-shop-button-mobile{
    display: block !important;
}

@media (min-width: 768px) {
    .nav-shop-button-mobile{
        display: none !important;
    }
    .mobile-active .nav-shop-button-mobile{
        display: none !important;
    }
}


.nav-shop-button {
    position: absolute;
    right: 65px;
    top: 32px;
}

.nav-shop-button img{
    height: 45px;
    width: auto;
    position: relative;
    top: -5px;
    left: 5px;
}

.dropdown-toggle::after {
    float: right;
    margin-top: 14px;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu a::after {
    /* transform: rotate(-90deg); */
    position: absolute;
    right: 0px;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-left: .1rem;
    margin-right: .1rem;
}

.dropdown-submenu .dropdown-item {
    color: #2f5da1;
    text-decoration: none;
    background-color: transparent;
}

.dropdown-submenu .dropdown-menu .dropdown-item {
    margin-right: 1.5rem;
    margin-left: 1.5rem;
}

.navbar-collapse {
    padding-top: 50px;
}

.navbar-collapse .dropdown-item {
    line-height: 32px;
}

@media (min-width: 768px) {
    .navbar {
        font-size: 12px;
        padding: 1.5rem 0 1.5rem 0 !important;
    }
    .navbar-inner {
        padding: 0 1.5rem !important;
    }
    .nav-shop-button {
        position: unset;
        position: static;
    }
    .nav-shop-button img{
        height: 50px;
        width: auto;
        left: 10px;
        position: relative;
        top: unset;
    }
    .dropdown-toggle::after {
        float: unset;
        margin-top: unset;
    }
    .navbar-collapse {
        padding-top: 0px;
    }
    .nav-item a {
        color: #000000;
    }
}

@media (min-width: 1050px) {
    .navbar-inner {
        padding: 0 10vw 0 10vw !important;
    }
}

@media (min-width: 1800px) {
    .navbar-inner {
        padding: 0 !important;
    }
}

@media (min-width: 815px) {
    .navbar-nav {
        gap: 0.5vw;
    }
}
@media (min-width: 1200px) {
    .navbar-nav {
        gap: 1vw;
    }
}

.navbar .nav-link {
    color: #fff;
    font-weight: 600;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: #fff;
    text-decoration: none;
}

.navbar .navbar-brand {
    color: #fff;
}

.navbar-toggler-icon {
/*    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");*/
}

@media (max-width: 767.99px) {
    .mobile-active {
        height: 100vh;
        overflow: scroll;
    }
}


/* Change mobile menu bar hamburger to cross when open */

.navbar-toggler span {
    display: block;
    background-color: #2f5da1;
    height: 3px;
    width: 25px;
    margin-top: 5px;
    margin-bottom: 5px;
    position: relative;
    left: 0;
    opacity: 1;
    transition: all 0.2s ease-out;
    transform-origin: center left;
}

.navbar-toggler span:nth-child(1) {
    margin-top: 0.3em;
}

.navbar-toggler:not(.collapsed) span:nth-child(1) {
    transform: translate(15%, -33%) rotate(45deg);
}

.navbar-toggler:not(.collapsed) span:nth-child(2) {
    opacity: 0;
}

.navbar-toggler:not(.collapsed) span:nth-child(3) {
    transform: translate(15%, 33%) rotate(-45deg);
}

.navbar-toggler span:nth-child(1) {
    transform: translate(0%, 0%) rotate(0deg);
}

.navbar-toggler span:nth-child(2) {
    opacity: 1;
}

.navbar-toggler span:nth-child(3) {
    transform: translate(0%, 0%) rotate(0deg);
}

#btn_see_all_brands {
    background-color: #FFFFFF !important;
}


/* Change navbar styling on scroll */

.navbar.active {
    background: #ffffff;
    box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar.active .nav-link {
    color: #2f5da1;
    font-size: 16px;
}

.navbar.active .nav-link:hover,
.navbar.active .nav-link:focus {
    color: #2f5da1;
    text-decoration: none;
}

.navbar.active .navbar-brand {
    color: #2f5da1;
}

.navbar-brand img {
    height: auto;
    width: 90px;
}

.shop-icon {
    height: 30px;
    width: 30px;
}

.dropdown-menu {
    margin-top: 0 !important;
    border-radius: unset !important;
    border: 0 !important;
    background-color: #ffffff;
}

@media (min-width: 768px) {
    .dropdown-menu {
        display: none !important;
    }
    .navbar-brand img {
        height: 54px;
        width: auto;
    }
    .navbar.active .nav-link {
        color: #2f5da1;
        font-size: 18px;
    }
}

.dropdown-item {
    color: #FFFFFF;
    font-family: 'Gotham';
    font-weight: normal;
    font-style: normal;
}

.navbar-follow-us {
    font-size: 18px;
    color: #2f5da1;
}

.navbar-sns {
    height: 40px;
    width: auto;
}

.navbar-text {
    font-size: 15px;
    line-height: 21px;
    color: #2f5da1;
}


/*follow us*/

.follow-us-container {
    background-color: #235C9F;
}

.follow-us {
    display: flex;
    background-color: #235C9F;
    color: #FEFFFF;
    font-size: 15px;
    line-height: 24px;
    max-width: 1600px;
    margin: auto;
    /* height: 30em; */
    padding: 4rem 1.5rem;
}

.follow-us-img {
    background-size: 100% auto;
    opacity: 0.5;
    flex: 1;
    background-repeat: no-repeat;
}

.follow-us-title {
    font-size: 25px;
}

.follow-us-content {
    margin-top: 50px;
    margin-bottom: 50px;
    font-size: 15px;
    line-height: 18px;
}

.follow-us-sns-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 5px;
}

.follow-us-sns-icon {
    height: 37px;
    width: auto;
}

.follow-us-sns {
    /* float: right; */
    display: flex;
    align-items: center;
}

.follow-us-sns div{
    margin-right: 1rem;
    height: 37px;
    line-height: 37px;
    font-size: 16px;
}

.follow-us-sns .babyDiv{
    border-left: 2px white solid;
    margin-left: 1rem;
    padding-left: 1rem;
    margin-right: 0 !important;
}

@media (max-width: 380px) { 
    .follow-us-sns-container {
        display: flex;
        align-items: start;
        flex-direction: column;
        row-gap: 0;
    }
    .follow-us-sns-container .second-row{
        margin-top: 20px;
    }
    .follow-us-sns .babyDiv{
        border-left: unset !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        margin-right: 0 !important;
    }

}

@media (min-width: 768px) {
    .follow-us {
        display: flex;
        background-color: #235C9F;
        color: #FEFFFF;
        font-size: 15px;
        line-height: 24px;
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 50px;
        padding-bottom: 50px;
        justify-content: center;
        text-align: center;
    }

    .follow-us a{
        color: #FEFFFF;
    }

    .follow-us div{
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .follow-us .underline{
        border: rgba(255, 255, 255, 0.5) 2px solid;
        width: 80vw;
        min-width: 700px;
    }
    .follow-us-img {
        background-size: 100% auto;
        opacity: 0.5;
        flex: 1;
        background-repeat: no-repeat;
    }
    .follow-us-title {
        font-size: 35px;
        /*margin-top: 5rem;*/
    }
    .follow-us-content {
        margin-top: 0px;
        margin-bottom: 0px;
        font-size: 24px;
        line-height: 28px;
        /* width: 80%; */
    }
    .follow-us-sns-container {
        float: left;
        min-width: 80vw;
        justify-content: center;
    }
    .follow-us-sns-icon {
        height: 37px;
        width: auto;
    }
    .follow-us-sns {
        float: left;
    }
}

@media (min-width: 1800px) {
    .follow-us {
        margin: auto;
    }
}


/* about us */

#section-about-tomy,
#section-philosophy,
#section-company-info {
    width: 100%;
}

#section-about-tomy,
#section-company-info {
    background-color: #235C9F;
}

.about-us-about-tomy {
    background-color: #235C9F;
    padding: 8rem 2rem;
    max-width: 1600px;
    margin: auto;
}

.about-tomy-header {
    opacity: 50%;
    color: #FFFFFF;
    font-size: 2rem;
    text-align: center;
}

.about-tomy-underline {
    flex-grow: 1;
    border-bottom: 5px solid #FFFFFF;
    margin-bottom: 30px;
    margin-top: 20px;
    opacity: 50%;
}

.about-tomy-text {
    margin-top: 60px;
    color: #FFFFFF;
    font-size: 18px;
    line-height: 46px;
}

.about-us-philosophy {
    background-color: #FFFFFF;
    padding: 5rem 2rem;
    max-width: 1600px;
    margin: auto;
}

.philosophy-header {
    color: #235C9F;
    font-size: 2rem;
    text-align: center;
}

.philosophy-text {
    margin-top: 70px;
    color: #235C9F;
    font-size: 18px;
    line-height: 48px;
}

.about-us-company-info {
    background-color: #235C9F;
    padding: 5rem 2rem;
    display: none;
}

.about-us-company-info-mobile {
    background-color: #235C9F;
    padding: 5rem 1rem;
    display: block;
}

.about-us-company-info-mobile .splide__pagination .is-active {
    background: #FFFFFF !important;
}

.company-info-header {
    color: #FFFFFF;
    font-size: 30px;
}

.company-info-table-div {
    background-color: #FFFFFF;
    padding: 20px 20px;
    margin: 20px;
    height: 100%;
}

.company-info-table-header {
    background-color: #235C9F;
    font-size: 18px;
    color: #FFFFFF;
    line-height: 50px;
}

.company-info-table {
    width: 100%;
    font-size: 12px;
    color: #000000;
    margin-top: 0px;
    table-layout: fixed;
    line-height: 30px;
    border-collapse: separate;
    border-spacing: 0 15px;
}

.company-info-table-left {
    text-align: center;
    vertical-align: top;
}

.company-info-table-right {
    word-break: break-all;
}

@media (min-width: 768px) {
    .about-us-about-tomy {
        background-color: #235C9F;
        padding: 8rem 6rem;
    }
    .about-tomy-header {
        opacity: 50%;
        color: #FFFFFF;
        font-size: 4rem;
        white-space: nowrap;
    }
    .about-tomy-underline {
        flex-grow: 1;
        border-top: 5px solid rgba(255, 255, 255, 0.5);
        border-bottom: 0px !important;
        margin-bottom: 30px;
        margin-left: 20px;
        opacity: 50%;
        font-weight: 400;
        line-height: 48px;
        color: #FFFFFF;
        font-size: 24px;
        padding-top: 20px;
        margin-top: 4.2rem;
        opacity: 1;
    }
    .about-tomy-text {
        margin-top: 70px;
        color: #FFFFFF;
        font-size: 24px;
    }
    .about-us-philosophy {
        background-color: #FFFFFF;
        padding: 5rem 6rem;
    }
    .philosophy-header {
        color: #235C9F;
        font-size: 4rem;
    }
    .philosophy-text {
        margin-top: 70px;
        color: #235C9F;
        font-size: 24px;
        line-height: 48px;
    }
    .about-us-company-info {
        background-color: #235C9F;
        padding: 5rem 1.5rem;
        display: block;
        max-width: 1600px;
        margin: auto;
    }
    .about-us-company-info-mobile {
        display: none;
    }
    .company-info-header {
        color: #FFFFFF;
        font-size: 4rem;
    }
    .company-info-table-div {
        background-color: #FFFFFF;
        padding: 27px 36px;
        margin: 0px;
        height: 100%;
    }
    .company-info-table-header {
        background-color: #235C9F;
        font-size: 24px;
        color: #FFFFFF;
        line-height: 70px;
    }
    .company-info-table {
        width: 100%;
        font-size: 18px;
        color: #000000;
        margin-top: 40px;
        table-layout: fixed;
        line-height: 48px;
        border-collapse: separate;
        border-spacing: 0 15px;
    }
    .company-info-table-left {
        text-align: center;
        vertical-align: top;
    }
    .company-info-table-right {
        word-break: break-all;
    }
}

.swiper {
    width: 100%;
    height: auto;
    overflow: hidden;
}

.swiper-slide {
    width: 100%;
    height: auto;
}

.swiper-button-prev {
    background-color: #C9C9C9;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50%;
    left: 0px !important;
}

.swiper-button-next {
    background-color: #C9C9C9;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50%;
    right: 0px !important;
}

.toy-slider-container {
    position: relative;
}

.product-toy-slider-container{
    position: relative;
    margin-right: 60px;
    margin-left: 60px;
}

.toy-swiper-prev{
    left: -60px !important;
}

.toy-swiper-next{
    right: -60px !important;
}

.swiper-button-next::after {
    display: none;
}

.swiper-button-prev::after {
    display: none;
}

.swiper-pagination {
    bottom: 10px !important;
}

.swiper-pagination-bullet {
    background-color: #d3d3d3 !important;
    opacity: 1 !important;
}

.swiper-wrapper {
    align-items: center;
}


/* News */

.category-list-desktop {
    border-bottom: 6px solid #235C9F;
    margin: 0rem 5rem;
    font-size: 20px;
    line-height: 32px;
    max-width: 1600px;
}

.news-list-desktop, .instructions-list-desktop {
    max-width: 1600px;
}

.news-content {
    max-width: 1600px;
    margin: auto;
    word-break: break-all;
}

@media (min-width: 768px) {
    .category-list-desktop {
        margin: 0 10vw 0 10vw !important;
    }
    .news-list-desktop, .instructions-list-desktop {
        margin: 0 10vw 0 10vw !important;
    }
}

@media (min-width: 1800px) {
    .category-list-desktop {
        margin: auto !important;
    }
    .news-list-desktop, .instructions-list-desktop {
        margin: auto !important;
    }
}

.category-list-desktop .category {
    padding: 2rem 2rem 1rem 2rem;
    flex: 1;
}

.category-list-desktop .active {
    color: #FFFFFF;
    background-color: #235C9F;
}

.category-list-mobile .category {
    padding: 0.5rem 1rem;
}

.category-list-mobile .active {
    color: #FFFFFF;
    background-color: #235C9F;
    font-size: 25px;
}

.category-list-mobile .category-select {
    flex: 1;
    border-bottom: 3px solid #235C9F;
    /* background-color: DodgerBlue; */
}

.category-list-mobile .category-select select {
    /* Reset Select */
    width: 100px;
    text-overflow: ellipsis;
    appearance: none;
    outline: 0;
    border: 0;
    box-shadow: none;
    /* Personalize */
    flex: 1;
    padding: 0 1em;
    color: #2050A3;
    cursor: pointer;
    text-align: center;
    font-size: 25px;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    background-image: url("../img/icon/icon_blue_down_arrow.png");
    background-repeat: no-repeat;
    background-position-x: 100%;
    background-position-y: 12px;
}

.category-list-mobile .category-select select::-ms-expand {
    display: none;
}

.news, .instructions {
    /* max-width: 350px; */
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    width: 100%;
}

@media (min-width: 768px) {
    .news, .instructions {
        width: 25%;
        max-width: unset;
        padding-left: 0px;
        padding-right: 0px;
    }
    .news-image-div, .instructions-image-div {
        display: flex;
        justify-content: center;
        padding-bottom: 100%;
        background-size: cover;
        background-position: center;
        width: 100%;
    }
}

.news-image-div, .instructions-image-div {
    padding-bottom: 100%;
    background-size: cover;
    background-position: center;
    width: 100%;
}


.news-image-div img, .instructions-image-div img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    min-width: 1px;
    /*padding: 0 1.5rem;*/
    object-fit: cover;
}

.news-title, .instructions-title {
    padding: 20px 0px;
    text-align: center;
    font-size: 18px;
    color: #000000;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* number of lines to show */
    line-height: 20px;
    /* fallback */
    height: 40px;
    /* fallback */
    max-width: 350px;
    margin: 5px auto 0px auto;
}

.news-desc, .instructions-desc {
    text-align: center;
    font-size: 12px;
    word-break: break-all;
    display: block;
    text-align: center;
    color: #5B5B5B;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* number of lines to show */
    line-height: 16px;
    /* fallback */
    max-height: 32px;
    height: 32px;
    max-width: 350px;
    margin: 10px auto 0px auto;
}

.news-btn, .instructions-btn {
    text-align: center;
    font-family: 'Gotham';
    font-weight: normal;
    font-style: normal;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 15px 0px;
}

.news-grid, .instructions-grid {
    max-width: 1600px;
    margin: auto;
}

#section-news-brands-mobile {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/*Product Page*/

.products-list-desktop {
    max-width: 1600px;
}

@media (min-width: 768px) {
    .products-list-desktop {
        margin: 3rem 3rem 0rem 3rem !important;
    }
}

@media (min-width: 1800px) {
    .products-list-desktop {
        margin: 3rem auto 0 auto!important;
    }
}

.products-list-desktop .product {
    max-width: 350px;
    width: 100%;
    /* padding: 5px; */
}

@media (min-width: 768px) {
    .products-list-desktop .product {
        width: 23%;
    }
}


/*Product detail page*/

.product-detail {
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    min-height: 450px;
    justify-content: center;
}

.product-detail-img-container {
    width: 60%;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
}


/* .product-detail-img-container-mobile {
    width: 100%;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
} */

.product-detail-img-container img {
    width: 100%;
    padding: 0rem 1rem;
}

.product-detail-text-container {
    width: 40%;
}

.product-detail-text-container-mobile {
    width: 100%;
    padding: 0rem 1.5rem;
}

.product-detail-text-container .title {
    font-size: 40px;
    color: #235C9F;
}

.product-detail-text-container .detail {
    font-size: 20px;
    line-height: 40px;
    color: #5B5B5B;
}

.product-detail-text-container-mobile .title {
    font-size: 25px;
    color: #235C9F;
}

.product-detail-text-container-mobile .detail {
    font-size: 18px;
    line-height: 32px;
    color: #5B5B5B;
}

@media (min-width: 768px) {
    .product-detail-text-container-mobile .title {
        font-size: 40px;
        color: #235C9F;
    }
    
    .product-detail-text-container-mobile .detail {
        font-size: 26px;
        color: #5B5B5B;
    }
}

.product-img-slider-thumb-img {
    height: 50px;
}

.product-img-slider-thumb-img-div {
    height: 150px;
    width: 150px;
    flex-direction: column;
    display: flex;
    align-items: center;
}

.product-img-slider-img-div {
    width: 100%;
    height: 450px;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.product-img-slider-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    flex-shrink: 0;
}


/* test */

.gallery-container {
    position: relative;
    width: 60%;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
}

.gallery-container-mobile {
    position: relative;
    width: 100%;
    /* max-height: 300px;
    max-width: 700px; */
    display: flex;
    justify-content: space-between;
    overflow: hidden;
}

#product-img-slider {
    width: 70%;
    height: 100%;
    text-align: center;
}

#product-img-thumbnail-slider-mobile {
    margin: 0.5rem 1rem;
    overflow: hidden;
}

#product-img-slider-mobile {
    overflow: hidden;
}

#product-img-slider-mobile img {
    padding: 0rem 3rem;
}

#product-img-slider img {
    width: 80%;
    height: auto;
    padding: 0rem 1rem;
}

#product-img-slider .swiper-slide {
    height: unset !important;
}

#product-img-thumbnail-slider-mobile img {
    width: auto;
    /* height: 100px; */
    padding: 0rem 1rem;
}

#product-img-thumbnail-slider img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    padding: 0rem 1rem;
    flex-shrink: 0;
}

#product-img-thumbnail-slider .swiper-slide-thumb-active .product-img-slider-thumb-img-div{
    border: 3px #245c9f solid;
}

#product-img-slider .swiper-button-prev {
    position: absolute;
    bottom: 0;
    right: 0;
    left: auto;
    height: 75px;
    width: 40px;
    right: 40px;
}

#product-img-slider .swiper-button-next {
    position: absolute;
    bottom: 0;
    /* right: 30% !important; */
    left: auto;
    height: 75px;
    width: 40px;
}

#product-img-slider-mobile .swiper-button-prev {
    position: absolute;
    bottom: 0;
    right: 0;
    left: auto;
    height: 75px;
    width: 40px;
    right: 40px;
}

#product-img-slider-mobile .swiper-button-next {
    position: absolute;
    bottom: 0 !important;
    right: 0 !important;
    left: auto;
    height: 75px;
    width: 40px;
}

#product-img-thumbnail-slider {
    order: 1;
    width: 30%;
    height: 460px;
    margin-right: 15px;
    padding-left: 15px;
}

#section-product-description {
    padding: 1.5rem;
}

#section-product-detail {
    display: none;
}

@media (min-width: 768px) {
    #section-product-description {
        background-image: url('../img/image/product_background.png');
        padding: 6rem;
    }
    #section-product-description .title {
        background-image: unset;
        font-size: 40px;
        color: #235C9F;
        display: block !important;
    }
    .product-description-mobile-title {
        display: none;
    }
    .related-products-mobile-title {
        display: none;
    }
    #section-product-detail-mobile {
        display: none;
    }
    #section-product-detail {
        padding: 3rem;
        display: block;
    }
    .product-detail {
        max-width: 1600px;
        margin: auto;
    }
}

#section-product-description .title {
    display: none;
}

.product-description-mobile-title {
    font-size: 40px;
    color: #235C9F;
    background-image: url('../img/image/product_background.png');
}

.related-products-mobile-title {
    padding: 25px 0;
    font-size: 40px;
    color: #235C9F;
    background-image: url('../img/image/product_background.png');
}

#section-product-description .video {
    padding: 2rem;
    overflow: hidden;
    position: relative;
    width: 100%;
    flex: 0 0 60%;
}

#section-product-description .video::after {
    padding-top: 56.25%;
    display: block;
    content: '';
}

#section-product-description .video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#section-product-description .description {
    font-size: 20px;
    color: #000000;
    padding: 2rem;
    flex: 0 0 40%;
}

#section-related-products {
    padding: 3rem;
    display: none;
}

#section-related-products .title {
    color: #235C9F;
    font-size: 40px;
}

#section-related-products-mobile {
    display: block;
    padding: 2rem 0rem 2rem 0rem;
}

#section-related-products-mobile .title {
    color: #235C9F;
    font-size: 30px;
}

#section-web-path {
    padding: 3rem 1rem;
    margin-top: 100px;
}

#section-web-path .path {
    font-size: 18px;
    max-width: 1600px;
    margin: auto;
}

#section-web-path .path a {
    color: #000000;
}

@media (min-width: 768px) {
    #section-related-products {
        display: block;
        padding: 3rem;
        max-width: 1600px;
        margin: auto;
    }
    #section-related-products-mobile {
        display: none;
    }
    #section-web-path {
        padding: 0rem 3rem;
    }
}

.related-products-title {
    font-size: 20px;
    color: #235C9F;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* number of lines to show */
    line-height: 20px;
    /* fallback */
    height: 40px;
    /* fallback */
}

.related-products-title a {
    color: #235C9F;
}

.related-products-btn {
    background-color: #235C9F;
    padding: 1rem;
    border-radius: 10px;
    color: #FFFFFF;
    margin-top: 40px;
}

.related-products-btn a {
    color: #FFFFFF;
}

.buy-now-btn {
    background-color: #235C9F;
    padding: 1rem;
    border-radius: 10px;
    color: #FFFFFF;
    margin-top: 40px;
    cursor: pointer;
}

.export-btn {
    background-color: yellow;
    padding: 1rem;
    border-radius: 10px;
    color: #000;
    margin-top: 40px;
    cursor: pointer;
}

@media (min-width: 768px) {
    .buy-now-btn, .export-btn {
        font-size: 18px;
    }
}
.related-products-div {
    padding: 1rem;
    border: 1px solid #C1C1C1;
}

.special-product-banner {
    width: 100%;
}


/* brand */

#section-top-image-brand {
    /* background-image: url('../img/image/brand.png'); */
    background-position-x: center;
    background-position-y: center;
    background-size: cover;
    width: 100%;
    height: 600px;
}

.brand-top-image {
    width: 100%;
    /* background-image: url('../img/image/brand_2.jpeg'); */
    background-size: cover;
    background-position: center center;
    /* min-height: 500px; */
    background-size: cover;
}

.brand-top-image .inner-box {
    padding: 5rem 10rem 5rem 4rem;
    width: 40%;
    /* width: 600px; */
    min-width: 600px;
    max-width: 1000px;
}

.brand-top-image .inner-box .title {
    color: #FFFFFF;
    padding-top: 2rem;
    font-size: 40px;
}

.brand-top-image .inner-box .desc {
    color: #FFFFFF;
    padding-top: 2rem;
    font-size: 24px;
    max-width: 600px;
}

.brand-sort-div {
    justify-content: space-around;
    border: 1px solid #C1C1C1;
    margin: 3rem 3rem 0rem 3rem;
    max-width: 1600px;
}

.sort-item-mobile {
    color: #0059AD;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    font-size: 10px;
    position: relative;
}
.sort-item-mobile-select::after {
    height: 5px;
    background-color: #0059AD;
    content: '';
    position: absolute;
    bottom: 5px;
    width: 100%;
    display: block;
}

@media (min-width: 1800px) {
    .brand-sort-div {
        margin: 3rem auto auto;
    }
}

.brand-sort {
    padding: 1.5rem;
}

.brand-sort-option {
    padding: 1.5rem;
    cursor: pointer;
}

.brand-sort-option-active {
    padding: 1.5rem;
    border-bottom: 5px solid #0059AD;
    cursor: pointer;
}

#brand-product-section {
    /* padding: 3rem 3rem 0 3rem; */
}

.brand-product-div {
    width: 100%;
    max-width: 1600px;
    display: flex;
    justify-content: space-around;
    background-image: url('../img/image/brand_product_background.png');
    background-size: cover;
    padding: 1.5rem;
    align-items: center;
    margin: 0 auto 65px auto;
}

.brand-gallery-container {
    position: relative;
    width: 50%;
    max-height: 400px;
    max-width: 400px;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.brand-product-detail-text-container {
    width: 50%;
    margin-left: 1.5rem;
}

.brand-swiper-container {
    width: 90%;
    height: auto;
    text-align: center;
}

.brand-swiper-container img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    padding: 0rem 1rem;
}

.brand-swiper-container .swiper-button-prev {
    position: absolute;
    bottom: 0;
    right: 0;
    left: auto;
    height: 75px;
    width: 40px;
    right: 40px;
}

.brand-swiper-container .swiper-button-next {
    position: absolute;
    bottom: 0;
    /* right: 30% !important; */
    left: auto;
    height: 75px;
    width: 40px;
}

.brand-swiper-container .swiper-slide {
    display: flex;
    align-items: center;
}

.brand-product-detail-text-container .title {
    color: #235C9F;
    font-size: 30px;
    margin-bottom: 10px;
}

.brand-product-detail-text-container .detail {
    color: #5B5B5B;
    font-size: 18px;
}

.mobile-brand-desc {
    padding: 1.5rem;
}
.mobile-brand-desc .brand-logo {
    width: 150px;
    /* height: 150px; */
}
.mobile-brand-desc .brand-logo img{
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
}
.mobile-brand-desc .title {
    font-size: 1.5rem;
    margin-left: 15px;
}

.mobile-brand-desc .desc {
    font-size: 1rem;
    margin-top: 30px;
}

.mobile-brand-desc .image {
    margin-top: 30px;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
}

.mobile-sort-div {
    /* border-top: 1px solid #606060;
    border-bottom: 1px solid #606060; */
    padding: 0.5rem 1rem;
    justify-content: start;
    align-items: center;
}

.mobile-sort-item-div{
    padding: 0.5rem 1rem;
}

.mobile-sort-icon {
    height: 30px;
    width: auto;
    margin-left: 10px;
}

.mobile-sort-icon img {
    height: 30px;
    width: auto;
}

.mobile-sort-text {
    font-size: 24px;
    color: #235C9F;
}

.brand-product-div-mobile {
    text-align: center;
    background-color: #FFFFFF;
    margin: 1px;
    width: 50%
}

.brand-product-div-mobile .title {
    font-size: 16px;
    color: #235C9F;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* number of lines to show */
    line-height: 20px;
    /* fallback */
    height: 40px;
    /* fallback */
}

.brand-product-div-mobile .btn {
    text-align: center;
    font-family: 'Gotham';
    font-weight: normal;
    font-style: normal;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    cursor: pointer;
    color: #5B5B5B;
}

#brand-product-section-mobile {
    background-color: #E8E8E8;
    padding-top: 20px;
}


/* Search */

#section-search-result-text {
    margin-top: 150px;
    color: #083460;
    text-align: center;
    font-size: 30px;
}

@media (min-width: 768px) {
    #section-search-result-text {
        font-size: 40px;
    }
}

.dropdown_list_ul li.nav-item-hide {
    display: none;
}


/* Error */

.error_page_div {
    margin-top: 10rem;
    margin-bottom: 4rem;
    text-align: center;
    font-size: 40px;
    color: #235C9F;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}


/* Image collage */

.grid {
    display: flex;
    margin-top: 1rem;
    justify-content: center;
}

.grid-no-margin {
    display: flex;
    justify-content: center;
}

.grid-item {
    margin: 3px;
    display: flex;
    display: inline;
    align-items: center;
    position: relative;
}

.grid-item-mobile {
    margin: 5px;
    display: flex;
    align-items: center;
    position: relative;
    flex: 1;
    background-size: cover;
    background-position: center;
    padding-bottom: 100%;
}

.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.grid-item-mobile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.grid-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.grid-column .half {
    height: 50%;
    padding-bottom: 50% !important;
}

.grid-column .middle-right-top {
    height: 65%;
}

.grid .big-square {
    width: calc(16vw - 10px);
    height: calc(16vw - 10px);
}

.grid .small-square {
    width: calc(12vw - 5px);
    height: calc(12vw - 10px);
}

.grid .middle-top {
    width: calc(24vw - 10px);
    height: calc(8vw - 10px);
}

.grid .middle-bottom {
    width: calc(24vw - 10px);
    height: calc(24vw - 10px);
}

.grid .right-bottom {
    /* width: calc(25vw - 10px); */
    width: 100%;
    height: calc(20vw - 10px);
}

@media (min-width: 1800px)  {
    .grid .big-square {
        width: calc(1600px * 0.2 - 10px);
        height: calc(1600px * 0.2 - 10px);
    }

    .grid .small-square {
        width: calc(1600px * 0.15  - 5px);
        height: calc(1600px * 0.15  - 10px);
    }

    .grid .middle-top {
        width: calc(1600px * 0.3  - 10px);
        height: calc(1600px * 0.1  - 10px);
    }

    .grid .middle-bottom {
        width: calc(1600px * 0.3  - 10px);
        height: calc(1600px * 0.3  - 10px);
    }

    .grid .right-bottom {
        /* width: calc(1600px * 0.3  - 20px); */
        width: 100%;
        height: calc(1600px * 0.25  - 10px);
    }
}

.section-exclusive-brands-image {
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
}

.section-exclusive-brands-image-mobile {
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
    aspect-ratio: 1/1;
}


.banner-slider-pagination{
    position: relative !important;
    bottom: 25px !important;
}

.banner-slider-pagination .swiper-pagination-bullet-active{
    background-color: #235C9F !important;
}
/* 
.section-exclusive-brands-overlay {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: #008CBA;
} */

.section-exclusive-brands-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #D3D3D3;
}


/* .container:hover .overlay {
    opacity: 1;
}

.grid-item:hover .section-exclusive-brands-image {
    opacity: 0.3;
} */

.grid-item:hover .section-exclusive-brands-overlay {
    opacity: 0.5;
}

.grid-item-mobile:hover .section-exclusive-brands-overlay {
    opacity: 0.5;
}

.section-exclusive-brands-overlay-2 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: 1s ease;
}


/* .container:hover .overlay {
    opacity: 1;
}

.grid-item:hover .section-exclusive-brands-image {
    opacity: 0.3;
} */

.grid-item:hover .section-exclusive-brands-overlay-2 {
    opacity: 1;
}

.grid-item-mobile:hover .section-exclusive-brands-overlay-2 {
    opacity: 1;
}

.news-big-img {
    height: 100%;
    padding-bottom: 100%;
    background-position: center;
    background-size: cover;
}

.news-mid-img{
    height: 50%;
    padding-bottom: 50%;
    width: 100%;
    background-position: center;
    background-size: cover;
}

.news-small-img{
    height: 50%;
    padding-bottom: 50%;
    width: 50%;
    background-position: center;
    background-size: cover;
}
/*!
* pagination
*/

.pagination-container {
    display: flex;
    justify-content: center;
}

.pagination-container td {
    display: inline-flex;
}

.pagination {
    /*margin-top: 10px;*/
    /*margin-bottom: 10px;*/
    /*-webkit-box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);*/
    /*box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);*/
    display: inline-flex;
}

.pagination>li>a {
    color: #333333;
}

.pagination>li>a,
.pagination>li>span,
.pagination>.disabled>span,
.pagination>.disabled>span:hover,
.pagination>.disabled>span:focus,
.pagination>.disabled>a,
.pagination>.disabled>a:hover,
.pagination>.disabled>a:focus {
    border-color: #B1B1B1;
}

.pagination>.active>a,
.pagination>.active>span,
.pagination>.active>a:hover,
.pagination>.active>span:hover,
.pagination>.active>a:focus,
.pagination>.active>span:focus {
    background-color: #5F5F5F;
    border-color: #5F5F5F;
    border-radius: 3px;
}

.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
}

.pagination>li {
    display: inline;
}

.pagination>li>a,
.pagination>li>span {
    position: relative;
    float: left;
    padding: 6px 14px;
    margin-left: -1px;
    line-height: 1.428571429;
    text-decoration: none;
    background-color: #fff;
    /* border: 1px solid #ddd; */
}

.pagination>li:first-child>a,
.pagination>li:first-child>span {
    margin-left: 0;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
}

.pagination>li:last-child>a,
.pagination>li:last-child>span {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.pagination>li>a:hover,
.pagination>li>span:hover,
.pagination>li>a:focus,
.pagination>li>span:focus {
    background-color: #eee;
}

.pagination>.active>a,
.pagination>.active>span,
.pagination>.active>a:hover,
.pagination>.active>span:hover,
.pagination>.active>a:focus,
.pagination>.active>span:focus {
    z-index: 2;
    color: #fff;
    cursor: default;
    background-color: #235C9F;
    border-color: #235C9F;
    border-radius: 3px;
}

.pagination>.disabled>span,
.pagination>.disabled>span:hover,
.pagination>.disabled>span:focus,
.pagination>.disabled>a,
.pagination>.disabled>a:hover,
.pagination>.disabled>a:focus {
    color: #999;
    cursor: not-allowed;
    background-color: #fff;
    border-color: #ddd;
}

.pagination-lg>li>a,
.pagination-lg>li>span {
    padding: 10px 16px;
    font-size: 18px;
}

.pagination-lg>li:first-child>a,
.pagination-lg>li:first-child>span {
    border-bottom-left-radius: 6px;
    border-top-left-radius: 6px;
}

.pagination-lg>li:last-child>a,
.pagination-lg>li:last-child>span {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.pagination-sm>li>a,
.pagination-sm>li>span {
    padding: 5px 10px;
    font-size: 12px;
}

.pagination-sm>li:first-child>a,
.pagination-sm>li:first-child>span {
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
}

.pagination-sm>li:last-child>a,
.pagination-sm>li:last-child>span {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

#pagination_page_size {
    border-radius: 3px !important;
}

#pagination {
    margin-bottom: 1.5rem;
}


/*!
* pagination end
*/

/* Plarail VIP */
.plarail-card{
    margin-bottom: 20px;
    border: 0px !important;
    border-radius: 0 !important;
    background-color: transparent;
}

.plarail-card .collapse {
    background-color: transparent;
}

.plarail-card .level-header{
    display: flex;
    align-items: center;
    justify-content: center;
}

.plarail-card .level-header .header-text{
    letter-spacing: 3px;
    margin-left: 10px;
    width: 420px;
    text-align: left;
    font-size: 14px;
}

@media (min-width: 768px) {
    .plarail-card .level-header .header-text{
        letter-spacing: 3px;
        margin-left: 10px;
        width: 420px;
        text-align: left;
        font-size: 16px;
    }
}

.plarail-card .level-icon{
    width: 75px;
    height: auto;
}

.plarail-card .card-header{
    padding: 0 !important;
    border: 0 !important;
}

.plarail-card-body{
    display: flex;
    align-items: center;
    flex-direction: column;
    max-width: 800px;
    margin: auto;
}

.plarail-card-body .header{
    text-align: center;
}

.plarail-card-body .header img{
    height: 100px;
}

.plarail-card-body .slide-img{
    max-width: 1600px;
    margin: auto;
    padding: 0 50px;
}

.plarail-card-body .slide-video{
    max-width: 1600px;
    margin: auto;
}

.plarail-card-body .slide-desc{
    text-align: center;
}

.plarail-card-body .slide-img img{
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    display: block;
}

.plarail-card-body .slide-video{
    width: calc(100% - 100px) !important;
    border: 10px #FFFFFF solid;
}

.plarail-card-body .slider{
    /* display: inline; */
    display: contents;
}

#plarail-footer{
    width: 100%;
    max-width: 1600px;
    margin: auto;
}

#plarail-footer img{
    width: 100%;
    height: auto;
    max-width: 1600px;
    margin: auto;
}

.plarail-card-body .swiper-pagination{
    bottom: 0px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.plarail-card-body .swiper-pagination .swiper-pagination-bullet {
    background-color: #02A89F !important;
    opacity: 1 !important;
}

.plarail-card-body .swiper-pagination .swiper-pagination-bullet-active{
    background-color: transparent !important;
    border: #02A89F 2px solid;
    padding: 5px;
}

.plarail-card-body .swiper-button-prev{
    background-color: #02A89F;
    width: 30px !important;
    height: 50px !important;
    left: 0px !important;
    border-radius: 0 !important;
    opacity: 1 !important;
}

.plarail-card-body .swiper-button-next{
    background-color: #02A89F;
    width: 30px !important;
    height: 50px !important;
    border-radius: 0 !important;
    right: 0px !important;
    opacity: 1 !important;
}

.plarail-card-body .swiper-button-prev svg,
.plarail-card-body .swiper-button-next svg
{
    width: 15px;
}

.plarail-vip-container{
    background-image: url('/img/plarail_vip/Vertical_Banner_Index_Header.jpg');
}

.plarail-vip-top {
    max-width: 1600px;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1.5rem;
}

.plarail-vip-top img{
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
}

.plarail-vip-top .logo{
    width: 50%;
    height: 100%;
    max-width: 240px;
}
.plarail-vip-top .challenge{
    width: 60%;
    height: 100%;
    max-width: 630px;
    margin-top: 30px;
}
.plarail-vip-top .video-top{
    width: 60%;
    height: 100%;
    max-width: 830px;
}
.plarail-vip-top .video{
    max-width: 1250px;
    border: 10px #FFCA05 solid;
}
.plarail-vip-top .scroll-down{
    width: 10%;
    height: 100%;
    margin-top: 4rem;
    max-width: 240px;
    min-width: 100px;
}

/* Terms */
.terms-container{
    margin: 0 10vw 0 10vw;
    padding: 80px 0px;
}

.terms-container hr{
    margin-top: 0px !important;
}

.terms-date{
    color: #0051b4;
    margin-bottom: 15px;
}

.terms-header {
    font-size: 32px;
    margin-bottom: 15px;
    color: #000000;
}

.terms-title {
    color: #444444;
}

.terms-content {
    color: #444444;
}

.light_content_text {
    color: #FFFFFF;
}

.vip-slide-div {
    border: 4px double lightgrey;
    border-radius: 15px;
    display: flex;
    width: 100%;
}

@media (min-width: 768px) {
    .vip-slide-div {
        height: 200px;
        border: 4px double lightgrey;
        border-radius: 15px;
        display: flex;
    }
}

@media (min-width: 1300px) {
    .vip-slide-div {
        height: 250px;
    }
}

@media (min-width: 1700px) {
    .vip-slide-div {
        height: 380px;
    }
}

.vip-slide-div-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    margin: auto;
    border-radius: 10px;
}

@media (min-width: 768px) {
    .vip-container{
        max-width: 50vw; 
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none), (max-width: 768px) {  
   /* IE10+ specific styles go here */  
   .iefooterfix {
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: center;
   }
}

.custom-object-fit {
    background-position: center center;
    background-attachment: scroll;
    background-size: contain;
    -webkit-background-size: contain;
    background-repeat: no-repeat;
}

.tomica-diy-vip-container img{
    flex-shrink: 0;
}