/* Reset */
.icw img.img-king { width: 100%; max-width: 480px; margin: 0 auto;}
.icw img.img-txt { width: 100%; max-width: 462px; margin: 20% 0 auto;}

.splash-page .btn-img { display: inline-block; vertical-align: top; line-height: 1;}

.splash-page .btn-img img { display: block; width: 164px; cursor: pointer;}

/* Splash */
#page.splash-page { width: 100%; height: 100%; min-height: 100vh; text-align: center;
    background-image: url(../img/king-birthday2023/frame-desktop.png),  url(../img/king-birthday2023/BG-desktop.jpg);
    background-repeat: no-repeat; background-position: center,center bottom; background-size: 100% 100%, cover;
}

.splash-wrap { display: table; table-layout: fixed; width: 100%; height: 100%; height: 100vh; min-height: 100vh;}
.splash-wrap .splash-inner { display: table-cell; width: 100%; height: 100%; vertical-align: middle; padding: 10px 0 30px;}
.splash-page .splash-heading { line-height: 1;}
.splash-page .splash-heading .br { display: block;}
.splash-page .action-bottom { margin-top: 20px;}
.splash-image img {display: block; margin: 0 auto;}

.btn-row { position: relative; margin: -5px -15px; font-size: 0;}
.btn-row .btn-col { display: inline-block; vertical-align: top; padding: 5px 15px; max-width: 50%;}
.btn-row .btn-col .btn { margin: 0;}
.btn-click { width: 191px; height: 47px; background-repeat: no-repeat; background-position: center; background-size: contain;
    -webkit-transition: color ease-in-out .2s;
    -o-transition: color ease-in-out .2s;
    transition: color ease-in-out .2s;
}

.btn-click.th { background-image: url('../img/king-birthday2023/button-th.png');}
.btn-click.en { background-image: url('../img/king-birthday2023/button-en.png');}

.btn-click.th2 { background-image: url('../img/king-birthday2023/button-th2.png');}
.btn-click.en2 {background-image: url('../img/king-birthday2023/button-en2.png');}


@media screen and (max-width:1024px) {
    #page.splash-page {
        background-image: url(../img/king-birthday2023/frame-ipad.png),  url(../img/king-birthday2023/BG-ipad.jpg);
        background-repeat: no-repeat; background-position: center, center bottom; background-size: 100% 100%, cover;
    }

    .splash-body .tb,
    .splash-body .tbcell { display: block;}

    .icw img.img-king {position: relative; right: -40px;}
    .icw img.img-txt{margin-top: -30px;}
}

@media screen and (max-width:767px) {
    #page.splash-page {
        background-image: url(../img/king-birthday2023/frame-mobile.png),  url(../img/king-birthday2023/BG-mobile.jpg);
        background-repeat: no-repeat; background-position: center, center bottom; background-size: 100% 100%, cover;
    }

    .splash-page .btn {min-width: 150px;}

    .btn-row { margin-left: -5px;margin-right: -5px;}
    .btn-row .btn-col { padding-left: 5px; padding-right: 5px;}

    .splash-wrap .splash-inner {padding: 20px 0 20px;}
    .splash-body .tb,
    .splash-body .tbcell {display: block;}

    .icw img.img-txt {margin: 0 auto;}
    .icw img.img-king { max-width: 248px; position: relative; right: -20px;}
    .icw img.img-txt { max-width: 256px;}

    .btn-row .btn-col {display: block;max-width: none;}
    .btn-click {width: 189px;}

    .splash-page .action-bottom {margin-top: 10px;}

}

@media screen and (min-width:1024px) {
    .btn-click.th:hover {background-image: url('../img/king-birthday2023/button-th2.png');}
    .btn-click.en:hover {background-image: url('../img/king-birthday2023/button-en2.png');}
    .btn-click.th2:hover {background-image: url('../img/king-birthday2023/button-th.png');}
    .btn-click.en2:hover {background-image: url('../img/king-birthday2023/button-en.png');}

}

@media screen and (min-width: 767px) and (max-width: 1024px) {
    .pd-img {padding-bottom: 50px;}
    .pd-text{padding-bottom: 30px;}
}

@media screen and (min-width: 321px) and (max-width: 414px) {
    .icw img.img-king {max-width: 210px;}
}

@media screen and (max-width: 321px) {
    .icw img.img-king {max-width: 170px;}
}