@import url('fonts/fonts.css');
body {
    font-family: 'UTM God Word', sans-serif;
    font-weight: 400;
}
html,body{
    overflow-x: hidden;
}
*{
    outline: none;
    box-sizing: border-box;
}
.uk-container {
    max-width: 1607px;
}
header#header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 333;
}
#headerPC{
    padding: 45px 0;
    text-align: right;
}

.logo{
    position: absolute;
    top: -45px;
    left: 21px;
}

#banner {
    position: relative;
    /*height: 100vh;*/
    background: url(images/F1.webp) no-repeat center center/cover;
}

#videoBG {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.banner-content{
    position: absolute;
    left: 0;
    bottom: 57px;
    width: 100%;
}
.banner-group-cta {
    box-sizing: border-box;
    position: relative;
    padding: 0 90px;
    
}
.banner-group-cta-inner{
    max-width: 525px;
}


/*.banner-group-cta-register{
    width: 266px;
    height: 83px;
}*/

.button_hover_style{
    position: relative;
    display: inline-block;
    width: 259px;
    height: 72px;
    /*aspect-ratio: 234/65;*/
}

.button_hover_style img {
    position: absolute;
    top: 0;
    left: 0;
    transition: all .3s ease-out;
}
.button_hover_style img.hover {
    opacity: 0;
    visibility: hidden;
}
.button_hover_style:hover img.hover {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.main-header{
    padding: 0 105px;
}
.main-header-menu{
    list-style: none;
    padding: 0;
    margin: 0;
}
.main-header-menu li{
    padding: 0 15px;
    line-height: 1;
    position: relative;
    text-transform: uppercase;
}
.main-header-menu li:before{
    content: '';
    display: inline-block;
    width: 49px;
    height: 9px;
    background: transparent;
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
}
.main-header-menu li.active:before{
    background: url(images/menu_line.webp) no-repeat center center/contain;
}
.main-header-menu a{
    font-weight: 400;
    color: #FFF;
    font-size: 16px;
    letter-spacing: 0.025em;
}
.main-header-menu li.active a, .main-header-menu li:hover a{
    color: #fef6bf;
    text-decoration: none;
}

.f2{
    padding-top: 35px;
    background: url(images/bg_f2.webp) no-repeat top center;
    background-size: 100% 100%;
    box-sizing: border-box;

}
.f2 .uk-container{
    max-width: 1607px;
}
.f2-inner{
    padding-left: 403px;
    min-height: 794px;
    /*display: flex;
    align-items: flex-end;
    flex-wrap: wrap;*/
}

.relative{
    position: relative;
}
.characters{
    width: 100%;
    max-width: 653px;
    position: absolute;
    left: -55px;
    bottom: 0;
    /*padding-bottom: 158px;*/
}
.galleries{
    width: 100%;
    height: 800px;
    /*background: url(images/F2/gallery/khung.webp) top center;*/
    padding-left: 210px;
    padding-right: 140px;
    padding-top: 71px;
}
img.galleries-frame {
    position: absolute;
    top: 0;
    left: 0;
    max-width: max-content;
}
/*.galleries:before{
    content: '';
    width: max-content;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url(images/F2/gallery/khung1.webp) top center;
}*/
.character-char{
    transition: all .5s ease-in-out;
    transform: scale(0.3);
    position: absolute;
    bottom: var(--bot,0);
    left: var(--left,0);
    max-width: max-content;
}
.slick-current.slick-active .character-char{
    transform: scale(1);
}
.character-slider .slick-list{
    z-index: 333;
}
.character-item {
    height: 848px;
    display: flex;
    align-items: flex-end;
    position: relative;
}

.character-item img.character-title{
    position: absolute;
    top: var(--top,0);
    left: var(--left,0);
}

.f2_char img {
    max-width: max-content;
}
.gallery-slider {
    position: relative;
}

.f2-note {
    position: absolute;
    bottom: -19px;
    left: 42.5%;
    transform: translateX(-50%);
    width: max-content;
}
img.char_bottom {
    position: absolute;
    bottom: 20px;
    left: 20px;
}
img.f2-note-hand {
    position: absolute;
    top: 67px;
    left: 71px;
    animation: shake-hand 2s ease-in-out infinite;
    transform-origin: center bottom;
}
@keyframes shake-hand {
    0% { transform: rotate(0deg) translateX(0); }
    20% { transform: rotate(10deg) translateX(3px); }
    40% { transform: rotate(-10deg) translateX(-3px); }
    60% { transform: rotate(8deg) translateX(2px); }
    80% { transform: rotate(-8deg) translateX(-2px); }
    100% { transform: rotate(0deg) translateX(0); }
}
.fire{
    position: absolute;
    bottom: 0;
    right: -208px;
    animation: tada 5s ease-in-out infinite;
    filter: brightness(1) blur(0px);
    transform-origin: center;
}
.fire2{
    position: absolute;
    top: 26%;
    right: -195px;
    /* animation: fire-glow 1.2s ease-in-out infinite; */
    filter: brightness(1) blur(0px);
    transform-origin: center;
}
@keyframes fire-glow {
    0% { filter: brightness(1) blur(0px); }
    25% { filter: brightness(1.3) blur(1px); }
    50% { filter: brightness(1.1) blur(0.5px); }
    75% { filter: brightness(1.4) blur(1.2px); }
    100% { filter: brightness(1) blur(0px); }
}

.uk-tooltip {
    width: 470px;
    max-width: 470px;
    height: 188px !important;
    padding: 15px;
    background: url(images/bg_tooltip.webp) no-repeat center center;
    background-size: 100% 100%;
    border-radius: 0px;
    color: #fff;
    text-align: center;
    top: -220px !important;
    left: -175px !important;
}
.uk-tooltip ul{
    list-style: none;
    text-align: center;
    padding: 0;
    margin: 0;
}
.uk-tooltip ul li{
    font-family: 'UTM Facebook K&T';
    font-size: 23px;
    line-height: normal;
}




@-webkit-keyframes zoomLittle{
    0%{
        -webkit-transform: scale(0.3);
                transform: scale(0.3);
    }
    100%{
        -webkit-transform: scale(1);
                transform: scale(1);
    }
}
@keyframes zoomLittle{
    0%{
        -webkit-transform: scale(0.3);
                transform: scale(0.3);
    }
    100%{
        -webkit-transform: scale(1);
                transform: scale(1);
    }
}

/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

@-webkit-keyframes ani {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes ani {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes ic-arrow {
    50% {
        -webkit-transform: translateY(7px);
                transform: translateY(7px);
    }
}
@keyframes ic-arrow {
    50% {
        -webkit-transform: translateY(7px);
                transform: translateY(7px);
    }
}
.slick-arrow {
    position: absolute;
    top: 48.5%;
    left: -70px;
    transform: translateY(-50%);
    width: 74px;
    height: 78px;
    padding: 0;
    font-size: 0;
    outline: none;
    border: none;
    cursor: pointer;
    z-index: 999;
    background: url(images/Pre.webp) no-repeat center center/contain;
}
button.slick-next.slick-arrow{
    left: auto;
    right: -71px;
    background: url(images/Next.webp) no-repeat center center/contain;
}

.character-slider .slick-arrow{
    background: url(images/Pre1.webp) no-repeat center center/contain;
    width: 226px;
    height: 217px;
    top: auto;
    bottom: 18%;
    transform: none;
    left: -69px;
}
.character-slider button.slick-next.slick-arrow{
    left: auto;
    right: 17px;
    background: url(images/Next1.webp) no-repeat center center/contain;
}

#gallery{
    padding: 88px 0 90px;
    margin-top: -57px;
    position: relative;
    background: url(images/bg_f3.webp) no-repeat top center/100% 100%;
    overflow-x: hidden;
}


.shake{
    -webkit-animation: tranUpDown 4s infinite;
    animation: tranUpDown 4s infinite;
}

ul.slick-dots:before,ul.slick-dots:after{
    content: '';
    display: inline-block;
    width: 128px;
    height: 9px;
    background: url(images/dot_before.webp) no-repeat center center/contain;
    position: relative;
    top: 4px;
}
ul.slick-dots:after{
    background-image: url(images/dot_after.webp);
}
ul.slick-dots li {
    display: inline-block;
    margin: 0 5px;
}
ul.slick-dots li button{
    font-size: 0;
    outline: none;
    width: 61px;
    height: 61px;
    background: url(images/dot.webp) no-repeat center center/contain;
    border: none;
    cursor: pointer;

}
ul.slick-dots li.slick-active button{
    background: url(images/dot_active.webp) no-repeat center center/contain;
}
ul.slick-dots {
    text-align: center;
    padding-left: 0;
    margin: 0px 0px 0px;
    z-index: 99999;
    position: absolute;
    bottom: -28.5%;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
}

#footer{
    padding: 56px 0 50px;
    background: #1d1312;
    position: relative;
}
.footer-logo{
    margin-bottom: 17px;
}
#footer p{
    font-size: 33px;
    line-height: 33px;
    letter-spacing: 0.025em;
    color: #FFF;
    margin: 0;
    font-family: 'DB Helvethaica X Med',sans-serif;
}
.footer_line{
    margin-bottom: 10px;
}
#footer h2{
    font-weight: bold;
    color: #ffe8bd;
    text-transform: capitalize;
    font-family: 'DB Helvethaica X Med',sans-serif;
    margin: 0 0 10px;
    font-size: 44px;
    line-height: 1.286;
}
#footer h2 span{
    display: inline-block;
    width: 11px;
    height: 11px;
    background: url(images/dot_footer.webp) no-repeat center center/contain;
    margin: 0 10px;
}
#footer p span{
    color: #fff08c;
}
#footer p b{
    font-weight: 900;
}


.modal-control {
    text-align: center;
    margin-bottom: 36px;
}
.modal-control label {
    display: block;
    color: #af621e;
    font-family: 'MStiffHei HK';
    font-weight: bold;
    text-transform: uppercase;
    font-size: 27px;
    line-height: 30.08px;
    letter-spacing: -0.025em;
    margin-bottom: 15px;
}
.modal-control input {
    width: 100%;
    max-width: 440px;
    height: 77px;
    border: none;
    border-radius: 0;
    outline: none;
    background: #FFF;
    padding: 0 20px;
    font-family: 'UTM Facebook';
    font-size: 20px;
}
.modal-control2{
    margin-bottom: 21px;
}
.modal-submit {
    text-align: center;
}
.modal-submit button{
    outline: none;
    border: none;
    width: 273px;
    height: 81px;
    font-size: 0;
    background: url(images/btn_baodanh.webp) no-repeat center center/contain;
    cursor: pointer;
    transition: all .3s ease;
}
.modal-submit button:hover{
    filter: brightness(120%);
}
.uk-modal{
    padding: 4.557vw;
    background: rgba(0,0,0,.9);
    z-index: 9999999999;
}
.uk-modal-body {
    /*padding: 44px 122px;
    width: 683px;
    background: url(images/bg_modal.webp) no-repeat center center;
    background-size: 100% 100%;*/
    background: transparent;
    padding: 0;
}
a.audio-icon {
    position: absolute;
    top: 122px;
    right: 35px;
}
.hf1{
    transition: all .2s ease;
}
.hf1:hover{
    filter: brightness(120%);
}
.hf2{
    transition: all .2s ease;
}
.hf2:hover{
    filter: brightness(150%);
}
.show_mb{
    display: none !important;
}

.show-mb-inline{
    display: none !important;
}
.show-md-inline{
    display: none !important;
}
.btn-sweep{
    position: relative;
}
.btn-sweep:before{
    top: 0;
    bottom: 0;
    left: 0;
    background: #1110 -webkit-linear-gradient(left, #1110, #ffffff52) no-repeat 0 0 / 30px;
    background-clip: text;
    -webkit-text-fill-color: rgba(255, 255, 255, .3);
    -webkit-animation: sweep 2.5s ease infinite;
    animation: sweep 2.5s ease infinite;
    content: "";
    position: absolute;
    right: 0;
}
.section1-code-item img {
    -webkit-animation-name: tada;
    animation-name: tada;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    -ms-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes tada {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    -ms-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@-webkit-keyframes sweep {
    0% {
        background-position: 0 0;
    }
  
    100% {
        background-position: 100% 100%;
    }
}
@keyframes sweep {
    0% {
        background-position: 0 0;
    }
  
    100% {
        background-position: 100% 100%;
    }
}

/* Gentle sway animation for character 1 */
@-webkit-keyframes gentleSway {
    0%, 100% {
        -webkit-transform: translateY(0px) rotate(0deg);
        transform: translateY(0px) rotate(0deg);
    }
    25% {
        -webkit-transform: translateY(-8px) rotate(1deg);
        transform: translateY(-8px) rotate(1deg);
    }
    50% {
        -webkit-transform: translateY(-12px) rotate(0deg);
        transform: translateY(-12px) rotate(0deg);
    }
    75% {
        -webkit-transform: translateY(-8px) rotate(-1deg);
        transform: translateY(-8px) rotate(-1deg);
    }
}

@keyframes gentleSway {
    0%, 100% {
        -webkit-transform: translateY(0px) rotate(0deg);
        transform: translateY(0px) rotate(0deg);
    }
    25% {
        -webkit-transform: translateY(-8px) rotate(1deg);
        transform: translateY(-8px) rotate(1deg);
    }
    50% {
        -webkit-transform: translateY(-12px) rotate(0deg);
        transform: translateY(-12px) rotate(0deg);
    }
    75% {
        -webkit-transform: translateY(-8px) rotate(-1deg);
        transform: translateY(-8px) rotate(-1deg);
    }
}

/* Gentle sway animation for character 2 (slightly different timing) */
@-webkit-keyframes gentleSway2 {
    0%, 100% {
        -webkit-transform: translateY(0px) rotate(0deg);
        transform: translateY(0px) rotate(0deg);
    }
    30% {
        -webkit-transform: translateY(-6px) rotate(-0.8deg);
        transform: translateY(-6px) rotate(-0.8deg);
    }
    60% {
        -webkit-transform: translateY(-10px) rotate(0deg);
        transform: translateY(-10px) rotate(0deg);
    }
    80% {
        -webkit-transform: translateY(-6px) rotate(0.8deg);
        transform: translateY(-6px) rotate(0.8deg);
    }
}

@keyframes gentleSway2 {
    0%, 100% {
        -webkit-transform: translateY(0px) rotate(0deg);
        transform: translateY(0px) rotate(0deg);
    }
    30% {
        -webkit-transform: translateY(-6px) rotate(-0.8deg);
        transform: translateY(-6px) rotate(-0.8deg);
    }
    60% {
        -webkit-transform: translateY(-10px) rotate(0deg);
        transform: translateY(-10px) rotate(0deg);
    }
    80% {
        -webkit-transform: translateY(-6px) rotate(0.8deg);
        transform: translateY(-6px) rotate(0.8deg);
    }
}
@-webkit-keyframes tranUpDown {
  0%,100% {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
  }
  50% {
    -webkit-transform: translateY(5px);
            transform: translateY(5px);
  }
}
@keyframes tranUpDown {
  0%,100% {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
  }
  50% {
    -webkit-transform: translateY(5px);
            transform: translateY(5px);
  }
}

.uk-close{
    width: 51px;
    height: 48px;
    padding: 0;
    background: url(images/popup_close.webp) no-repeat center center/contain;
    top: -26px;
    right: 20px;
}

@media (min-width: 640px) {
    .uk-modal-page {
        overflow: visible;
    }
}
@media (max-width: 1636px){
    img.galleries-frame{
        max-width: 77vw;
    }
    .gallery-slider{
        max-width: 45vw;
    }
}
@media (max-width: 1530px){
    .button_hover_style{
        max-width: var(--max-width);
    }
    /*a.banner-group-cta-register.button_hover_style{
        position: relative;
        bottom: -0.25vw;
    }*/
    /*.banner-group-cta-inner{
        min-height: 135px;
    }*/
    .characters{
        zoom: 0.75;
        left: 0;
    }
    .f2-inner{
        min-height: 650px;
    }
    .galleries{
        height: 650px;
    }
    ul.slick-dots{
        bottom: -41.5%;
    }
    .galleries{
        padding-left: 170px;
        padding-right: 87px;
        padding-top: 59px;
    }
}
@media (max-width: 1300px){
    .characters{
        zoom: 0.6;
    }
    
    .f2-inner{
        min-height: 550px;
    }
    ul.slick-dots {
        bottom: -53.5%;
    }
    .galleries {
        height: 550px;
    }
    /*.gallery-slider {
        max-width: 40vw;
    }*/
    img.galleries-frame {
        max-width: 73vw;
    }
    .galleries {
        padding-left: 142px;
        padding-right: 55px;
        padding-top: 52px;
    }
}
@media (max-width: 1200px){
    html,body{
        overflow-x: hidden;
    }
    /*.slick-arrow{
        left: 0;
    }
    button.slick-next.slick-arrow{
        right: 0;
    }*/
    #FixedNav{
        display: none;
    }
}
@media (max-width: 1100px){
    .show-md-inline{
        display: inline-block !important;
    }
    .banner-content{
        display: none;
    }
    .banner-group-buttons .hide-mb {
        display: none !important;
    }
    .characters {
        zoom: 1;
        position: relative;
    }
    .f2 .uk-container{
        padding: 0;
    }
    .f2-header.uk-text-right {
        text-align: center !important;
    }
    .f2-inner{
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    img.char_bottom{
        left: 50%;
        transform: translateX(-50%);
    }
    .f2-note{
        left: 50%;
        z-index: 2222;
        bottom: 11px;
    }
    .banner-group-cta {
        padding-right: 0;
        padding-left: 380px;
        background: url(images/F1/bg_cta_box_mb.webp) no-repeat center center/100% 100%;
        min-height: 115px;
        padding-top: 22px;
    }
    .banner-group-counting{
        left: 54px;
    }
    .banner-group-cta-inner{
        min-height: auto;
        padding: 0;
        background: none;
    }
    .banner-content .uk-container {
        max-width: 747px;
        padding-left: 10px;
        padding-right: 10px;
    }
    .button_hover_style.show_mb {
        display: block !important;
        width: 331px;
        height: 80px;
        aspect-ratio: unset;
    }
    #header{
        position: static !important;
    }
    #headerPC{
        display: none;
    }
    .main-header-mobile {
        display: flex !important;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;
        padding: 25px 14px 25px;
        box-sizing: border-box;
        background: #110507;
        height: 118px;
    }
    a.ic_home {
        position: absolute;
        top: 10px;
        left: 22px;
    }
    a.ic_account {
        margin-left: 24px;
        margin-right: 34px;
    }
    /*.menu-humburgur-icon-active {
        display: none;
    }
    span.menu-humburgur-icon.open .menu-humburgur-icon-active {
        display: inline-block;
    }
    span.menu-humburgur-icon.open .menu-humburgur-icon-n {
        display: none;
    }*/
    .menu-main {
        position: fixed;
        top: 131px;
        right: 10px;
        width: 273px;
        background: rgb(7 1 1 / 82%);
        text-align: center;
        padding: 20px 0 50px;
        z-index: 999999;
        border: 1px solid #96833a;
    }
    ul#menu-main-mobile {
        list-style: none;
        padding-left: 0;
    }
    li.menu-item{
        font-size: 20px;
        line-height: 3;
        text-transform: uppercase;
        text-align: left;
        position: relative;
    }
    li.menu-item.active:before{
        content: '';
        display: inline-block;
        width: 7px;
        height: 14px;
        background: url(images/icon_menu_item.webp) no-repeat center center/contain;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: -23px;
    }
    li.menu-item a{
        color: #FFF;
    }
    
    .nav-right a:not(:last-child){
        margin-right: 23px;
    }
    .menu-main-content {
        padding-left: 88px;
    }
    a.audio-icon{
        top: 98px;
        right: 10px;
    }
    #videoBG{
        display: none;
    }
    main#site-main {
        padding-top: 118px;
    }
    .f2_char{
        display: none;
    }
    #banner{
        height: 882px;
        background-image: url(images/section1-bg_mb.webp);
        background-size: 100% 100%;
    }
    
    .banner-group-cta{
        left: 50%;
        transform: translateX(-50%);
    }
    .galleries-frame:not(.show-md-inline){
        display: none !important;
    }
    
    img.galleries-frame {
        max-width: 100vw;
    }
    .galleries{
        max-width: 768px;
        margin: auto;
        padding-left: 81px;
        padding-right: 89px;
        padding-top: 49px;
    }
    .gallery-slider {
        max-width: 602px;
    }
    .galleries {
        height: 552px;
    }
    ul.slick-dots{
        margin: 0px;
        bottom: -111px;
    }
    .f2{
        background-image: url(images/bg_f2_mb.webp);
        background-size: 100% 100%;
        margin-top: -101px;
        padding-top: 138px;
    }
    .slick-current.slick-active .character-char {
        transform: scale(1) translateX(50px);
    }
    .character-slider .slick-arrow{
        left: -28px;
    }
    .character-slider button.slick-next.slick-arrow{
        right: -28px;
    }
    
}
@media(max-width: 768px){
    .slick-current.slick-active .character-char {
        transform: scale(1);
    }
    .hide-mb{
        display: none !important;
    }
    .show_mb{
        display: block !important;
    }

    .show-mb-inline{
        display: inline-block !important;
    }
    .main-header-mobile{
        padding: 3.255vw 1.823vw;
        height: 15.365vw;
    }
    main#site-main{
        padding-top: 15.365vw;
    }
    #banner {
        height: 114.844vw;
        min-height: auto !important;
    }
    .banner-content .uk-container{
        padding-left: 1.302vw;
        padding-right: 1.302vw;
    }
    .banner-group-cta{
        padding-left: 49.479vw;
        padding-top: 3.865vw;
        min-height: 14.974vw;
    }
    .banner-group-counting {
        left: 7.031vw;
    }
    .banner-group-counting img{
        max-width: 47.656vw;
    }
    .button_hover_style.show_mb{
        width: 43.099vw;
        height: 10.417vw;
    }
    #counter {
        top: 10.938vw;
        left: 17.578vw;
        font-size: 7.871vw;
    }
    .f2-content.uk-container {
        padding: 0;
    }
    .galleries {
        height: 71.875vw;
    }
    .galleries{
        max-width: 100vw;
        padding-left: 10.547vw;
        padding-right: 11.589vw;
        padding-top: 6.38vw;
    }
    .characters{
        max-width: 100%;
    }
    .character-item{
        height: 65.406vw;
    }
    a.ic_home {
        position: absolute;
        top: 2.995vw;
        left: 3.255vw;
    }
    a.ic_home img{
        max-width: 20.313vw;
    }
    a.ic_account {
        margin-left: 0;
        margin-right: 2.474vw;
    }
    .ic_mb img{
        max-width: 32.031vw;
    }
    span.menu-humburgur-icon {
        line-height: 0;
    }
    span.menu-humburgur-icon img{
        max-width: 5.078vw;
    }
    .menu-main{
        top: 17.057vw;
        padding: 2.604vw 0 6.51vw;
        width: 35.286vw;
    }
    .menu-main-content {
        padding-left: 8.854vw;
    }
    li.menu-item{
        font-size: 2.344vw;
    }
    li.menu-item.active:before{
        width: 0.911vw;
        height: 1.823vw;
        left: -2.995vw;
    }
    .banner-group-cta-register {
        width: 19.01vw;
        height: 20.443vw;
    }
    .banner-group-cta{
        /*padding: 0;
        background: none;
        max-width: 77.083vw;
        bottom: 9.766vw;*/
    }
    .banner-group-cta-support {
        width: 19.01vw;
        height: 20.052vw;
    }
    .banner-group-cta-right a {
        width: 35.026vw;
        height: 9.115vw;
    }
    #section2 {
        /*margin-top: -9.505vw;
        padding-top: 10.807vw;*/
    }
    /*.f2{
        background-image: url(images/bg_f2_mb.webp);
        padding-top: 1.563vw;
    }
    .f2 .uk-container{
        padding: 0;
    }*/
    /*.galleries{
        margin-top: -1.172vw;
    }*/
    img.char_bottom{
        bottom: -6.38vw;
        max-width: 45.313vw;
    }
    .character-char{
        max-width: var(--mw);
        bottom: var(--bot);
    }
    .character-item img.character-title{
        max-width: var(--mw);
    }
    .character-slider .slick-arrow{
        background-image: url(images/Pre1_mb.webp) !important;
        width: 23.307vw;
        height: 22.526vw;
        bottom: 6%;
        left: 16.927vw;
    }
    .character-slider button.slick-next.slick-arrow{
        background-image: url(images/Next1_mb.webp) !important;
        left: auto;
        right: 16.797vw;
    }
    .f2{
        margin-top: -13.151vw;
        padding-top: 17.969vw;
    }
    .f2-note{
        bottom: -8px;
        left: 50%;
    }
    img.f2-note-text {
        max-width: 48.568vw;
    }
    img.f2-note-hand {
        max-width: 3.125vw;
        top: 5.99vw;
        left: 6.51vw;
    }
    .f2-inner{
        min-height: auto;
    }
    ul.slick-dots{
        margin: 0;
        bottom: -14.453vw;
        line-height: 0;
    }
    .slick-arrow{
        width: 7.682vw;
        height: 7.031vw;
        left: -9.115vw;
    }
    button.slick-next.slick-arrow{
        right: -9.245vw;
    }
    #footer {
        padding: 5.729vw 0;
        margin-top: 0;
    }
    #footer h2{
        font-size: 5.729vw;
        margin: 0 0 1.302vw;
    }
    .footer_line {
        margin-bottom: 1.302vw;
    }
    .footer_line img {
        max-width: 55.469vw;
    }
    #footer h2 span{
        width: 1.432vw;
        height: 1.432vw;
        margin: 0 1.302vw;
    }
    #footer p{
        font-size: 4.297vw;
        line-height: 1.3;
        letter-spacing: 0.025em;
    }
    #footer .uk-container{
        padding: 0;
    }
    .footer-text {
        padding: 0 3.906vw;
    }
    
   
    ul.slick-dots li button{
        width: 5.599vw;
        height: 5.599vw;
    }
     ul.slick-dots li.slick-active button{
        width: 5.599vw;
        height: 5.599vw;
     }
    ul.slick-dots li{
        margin: 0 0.521vw;
    }
    
    .uk-modal-body {
        /*padding: 5.729vw 15.885vw;
        width: 88.932vw;*/
    }
    .modal-control label{
        font-size: 3.516vw;
        line-height: 30.08px;
        margin-bottom: 3.917vw;
    }
    .modal-control input{
        max-width: 57.292vw;
        height: 10.026vw;
        padding: 0 2.604vw;
        font-size: 2.604vw;
    }
    .modal-control {
        text-align: center;
        margin-bottom: 4.688vw;
    }
    .modal-control2 {
        margin-bottom: 2.734vw;
    }
    .modal-submit button{
        width: 35.547vw;
        height: 10.547vw;
    }

    .uk-close{
        width: 6.641vw;
        height: 6.25vw;
        padding: 0;
        background: url(images/popup_close.webp) no-repeat center center/contain;
        top: -3.385vw;
        right: 2.604vw;
    }
    
    a.audio-icon {
        top: 12.760vw;
        right: 1.302vw;;
        z-index: 333;
    }
    a.audio-icon img{
        max-width: 4.297vw;
    }
    .uk-tooltip {
        width: 61.198vw;
        max-width: 61.198vw;
        height: 24.479vw !important;
        padding: 1.953vw;
        background-size: 100% 100%;
        border-radius: 0px;
        color: #fff;
        text-align: center;
        top: 90vw !important;
        left: 22.786vw !important;
        z-index: 999999999;
    }
    .uk-tooltip ul li{
        font-size: 2.995vw;
        line-height: normal;
    }
    ul.slick-dots:before, ul.slick-dots:after{
        width: 16.667vw;
        height: 1.172vw;
        top: 0.521vw;
    }
    #notifyPopup img {
        max-width: 90.885vw;
    }
    .fire{
        right: 0;
        bottom: 2.604vw;
        max-width: 27.214vw;
    }

}