body {
    font-family: 'Montserrat', 'Prompt', sans-serif;
    overflow-x: hidden !important;
    background-color: #fffeea;
    color: #6A6A6A;
    position: relative;
    min-height: 100vh;
    font-size: 10pt;
}
h1, h3, h4 {
    margin: 0;
}
a {
    color: #fff;
    list-style: none;
}
a:hover {
    color: #E5B859;
}
a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
a:active {
    text-decoration: none;
}
p {
    margin: 0;
}
img {
    max-width: 100%;
}
.menu {
    position: fixed;
    top: 0;
    right: -250px;
    width: 250px;
    height: 100%;
    background-color: #dddacfc4;
    padding: 20px;
    transition: transform 0.3s ease-in-out;
}
.menu.open {
    transform: translateX(-250px);
    /* slide the menu back into view */
}
.menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.menu li {
    margin-bottom: 10px;
}
.menu a {
    display: block;
    text-decoration: none;
    color: #333;
    font-size: 20px;
    font-weight: bold;
}
.menu-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    font-size: 24px;
    cursor: pointer;
}
.close-button {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 24px;
    cursor: pointer;
}
/* -- Slideout Sidebar -- */
.slideout-sidebar {
    position: fixed;
    top: 0;
    right: -240px;
    z-index: 2001;
    width: 240px;
    height: 100%;
    padding: 20px;
    background-color: #fff4ccc2;
    transition: all 300ms ease-in-out;
    text-align: left;
    padding: 5% 1% 0 2%;
    text-transform: uppercase;
}
#menu-toggle:checked+.menu-icon {
    right: 240px;
    background-image: url(../images/element6.png);
}
.slideout-sidebar img {
    width: 130px;
}
.slideout-sidebar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.slideout-sidebar ul li {
    cursor: pointer;
    padding: 3px 0;
    color: #252525;
}
.slideout-sidebar ul li:last-child {
    border-bottom: 0;
}
.slideout-sidebar ul li:hover {
    color: rgba(244, 244, 244, 1);
}
.slideout-sidebar a {
    color: #252525;
}
.slideout-sidebar a:hover {
    color: #fff;
}
/* -- end Slideout Sidebar -- */
/* -- Menu Icon -- */
#menu-toggle {
    display: none;
    z-index: 2300;
}
#menu-toggle:checked+.menu-icon {
    right: 240px;
    background-image: url(../images/element7.png);
    z-index: 230;
}
.menu-icon {
    position: fixed;
    bottom: 25%;
    right: 30px;
    font-size: 24px;
    z-index: 2000;
    transition: all 300ms ease-in-out;
    background-image: url(../images/element6.png);
    width: 53px;
    height: 34px;
}
/*-- The Magic --*/
#menu-toggle:checked~.slideout-sidebar {
    right: 0px;
}
#menu-toggle:checked+.menu-icon {
    right: 250px;
}
#menu-toggle:checked~.content-container {
    padding-left: 190px;
}
.section01 {
    background: #fff url(../images/bg-01.jpg) bottom center no-repeat;
    background-size: cover;
    padding: 50px 20px 0 20px;
    overflow: hidden;
}
.section01 .box-center {
    width: 850px;
    padding: 0px 60px;
    font-size: 10pt;
    text-align: center;
    color: #34291a;
    margin: 0;
    z-index: 100;
    margin-right: -44px;
    overflow-x: hidden;
}
.section01 .container {
    max-width: 880px;
    padding-top: 70px;
}
.section01 .box-l {
    padding-bottom: 10px;
    position: relative;
    margin-right: 0;
    line-height: 16pt;
    font-size: 10pt;
    font-weight: 300;
    z-index: 200;
}
.box-l .box-menu {
    width: 270px;
    background: #13150b;
    color: #fff;
    padding: 20px 15px 80px 15px;
    text-align: center;
    position: relative;
}
.box-menu h5 {
    font-weight: 700;
    font-size: 1.8em;
}
.box-menu h6 {
    font-weight: 500;
    font-size: 1.3em;
    text-transform: uppercase;
}
.btn-yellow {
    background: #fff200;
    color: #13150b;
    font-size: 0.95em;
    padding: 5px 10px;
    border-radius: 15px;
    width: auto;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}
.box-menu .d-flex.justify-content-between {
    gap: 5px;
}
.hvr-rectangle-out:before {
    background: #ffb62d;
    border-radius: 15px;
    color: #000;
}
.monster {
    pointer-events: none;
}
.monster01 {
    width: 250px;
    position: absolute;
    bottom: 0;
    left: -200px;
    pointer-events: none;
}
.monster02 {
    width: 250px;
    position: absolute;
    bottom: 0;
    right: -230px;
    pointer-events: none;
}
.monster03 {
    width: 200px;
    position: absolute;
    bottom: -31px;
    left: -150px;
    pointer-events: none;
}
.monster04 {
    width: 100px;
    position: absolute;
    top: -100px;
    right: 20px;
    pointer-events: none;
    animation: 0.7s linear 0s infinite alternate moveup-slow4;
}
.section01 .box-r {
    padding: 75px 0;
    position: relative;
    margin-right: 0;
    line-height: 16pt;
    font-size: 10pt;
    font-weight: 300;
}
.box-r .box-menu {
    width: 260px;
    background: #13150b;
    color: #fff;
    padding: 50px 50px 100px 50px;
    position: relative;
}
.box-r .box-menu::after {
    content: ' ';
    position: absolute;
    bottom: 0;
    background: url(../images/shadow-boxmenu.png)no-repeat center;
    height: 50px;
    width: 100%;
    right: 0;
    bottom: -30px;
    background-size: 100%;
}
.list-group-item {
    background: transparent;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    padding: 5px 0;
    font-size: 1.5em;
}
.box-top {
    position: relative;
    width: 1000px;
    margin: 0 auto;
    display: block;
    text-align: center;
}
.main-menu a {
    margin: 10px 0;
    font-size: 16pt;
    font-weight: 800;
    text-decoration-line: underline;
    color: #34291a;
    letter-spacing: 1px;
}
.el01 {
    width: 303px;
    animation: 0.7s linear 0s infinite alternate moveup-slow3;
    position: absolute;
    right: 0;
    top: -41px;
}
.text-top {
    width: 548px;
    animation: 1s linear 0s infinite alternate moveup-slow1;
    margin-bottom: 46px;
}
.logo-retro {
    margin-top: -40px;
}
/* s news */
.s-news {
    background-color: #180808;
    position: relative;
    z-index: 300;
    padding-bottom: 50px;
}
.s-news .tag {
    position: absolute;
    top: -34px;
    width: 200px;
    left: 10px;
}
.s-news .container {
    width: 1200px;
    margin: 0 auto;
    position: relative;
    padding-top: 100px;
}
.btn-tab {
    background: url(../images/bg-navlink.png)center no-repeat !important;
    background-color: transparent;
    width: 116px;
    height: 50px;
    color: #7c7c7c;
    text-transform: uppercase;
    transition-property: all;
    transition-duration: 0.2s;
    font-weight: 600;
}
.nav-link {
    padding: 0;
}
.btn-tab:hover, .btn-tab:active, .btn-tab:focus, .btn-tab.active, .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background: url(../images/bg-navlink-hover.png)center no-repeat !important;
    background-color: transparent;
    width: 116px;
    height: 50px;
    color: #000;
    text-transform: uppercase;
}
.news-item {
    color: #6A6A6A;
    transition-duration: 0.4s;
    background-color: #080403;
    margin: 5px 0;
    border-radius: 10px;
    padding: 5px;
}
.s-news .container {
    transform-origin: top;
    transition: transform 0.26s ease;
}
.news-item:hover {
    color: #000000;
    background: #e5e5e5;
    margin: 5px 0;
}
.news-item .banner {
    width: 60%;
}
.news-item .banner img {
    border-radius: 10px;
}
.news-item .news-detail {
    font-size: 10pt;
    text-align: left;
}
.news-item .title {
    font-weight: 600;
    display: -webkit-box;
    max-width: 100%;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 1.2em;
    line-height: 1.3em;
    color: #6e017b;
}
.news-item .description {
    display: -webkit-box;
    max-width: 100%;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* end s-news */
/* s-wars */
.s-wars {
    background: url(../images/bg-wars.jpg) bottom center no-repeat;
    background-color: #fffdf2;
    background-size: cover;
    min-height: 800px;
}
.s-wars .top-menu {
    width: 700px;
    margin: 0 auto;
    height: 250px;
    margin-top: -40px;
    background: url(../images/bg-s-war-topmenu.png) bottom center no-repeat;
    background-size: 100%;
    position: relative;
    z-index: 800;
    padding: 153px 50px 0 50px;
    font-weight:600;
    animation: mymove 3s infinite;
    transform-origin: top center;
}
.s-wars .top-menu a {
    margin: 0 5px;
    color: #705b1d;
    text-transform: uppercase;
}
.wars-boxtop {
    width: 900px;
    margin: 0 auto;
    padding: 20px 50px 0 80px;
    position: relative;
}
.wars-detail {
    background: url(../images/bg-wars-detail.png)no-repeat center top;
    width: 1000px;
    margin: 0 auto;
    padding: 100px 0 100px 0;
    font-size: 11pt;
    margin-top: 50px;
}
.wars-detail .text-l {
    width: 400px;
}
.wars-detail .text-l span {
    color: #f2c94c;
}
.btn-wars {
    border: none;
    background: transparent;
}
.wars-boxtop::after {
    content: ' ';
    position: absolute;
    background: url(../images/icon-war-line.jpg);
    height: 4px;
    width: 70%;
    right: 0;
    position: absolute;
    top: 46% ;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
}
.wars-boxtop a {
    z-index: 400;
}
.box-vdo {
    border-radius: 40px;
    border: 3px solid #698a97;
    background: url(../images/thumbnail-vdo.jpg) center no-repeat;
    background-size: 100%;
    width: 350px;
    height: 220px;
    position: relative;
}
.box-vdo .btn-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.lity-iframe .lity-container, .lity-youtube .lity-container, .lity-vimeo .lity-container, .lity-facebookvideo .lity-container, .lity-googlemaps .lity-container {
    margin-top: 100px;
}
.s-item {
    background-size: contain;
    height: auto;
    background-color: #080403;
    padding: 30px 0 0 0;
}
.s-item>.container {
    width: 900px;
    background-color: transparent;
    border-radius: 50px;
    padding: 10px 0;
    position: relative;
    z-index: 0;
}
.s-item .tag {
    position: absolute;
    top: -60px;
    width: 200px;
    right: -50px;
}
.s-item .botton-section {
    background: url(../images/bg-botton-war.png) bottom center no-repeat;
    background-size: 1920px;
    height: 180px;
    z-index: 100;
    position: relative;
    margin-top: -25px;
}
.botton-section .container {
    width: 1190px;
    position: relative;
}
.botton-section img {
    position: absolute;
    width: 320px;
    top: -170px;
    left: 0;
}
.main-menu a {
    margin: 10px 0;
    font-size: 16pt;
    font-weight: 600;
    text-decoration-line: underline;
    color: #34291a;
    letter-spacing: 1px;
}
.fb-btn {
    width: 320px;
}
.box-text {
    background: #3E4F76;
    padding-bottom: 20px;
    font-weight: 700;
    line-height: 27pt;
    font-size: 16pt;
}
.logo-retro {
    margin-top: -40px;
}
/* s-wars */
video {
    height: 320px;
    margin-top: -24px;
    margin-bottom: -6px;
}
.wars-cbt-box {
    background: #1e2737;
    position: relative;
}
.wars-cbt-box img {
    margin-top: -30px;
}
.wars-cbt-banner {
    width: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.lity-container {
    width: 100%;
    height: 100vh;
}
#btn-war01 {
    width: 100%;
    height: 100vh;
}
#btn-war01 .war-box-l {
    background: url(../images/bg-btn-war01.jpg) bottom center no-repeat;
    background-size: cover;
}
#btn-war02 .war-box-l {
    background: url(../images/bg-btn-war02.jpg) bottom center no-repeat;
    background-size: cover;
}
#btn-war03 .war-box-l {
    background: url(../images/bg-btn-war03.jpg) bottom center no-repeat;
    background-size: cover;
    position: relative;
}
#btn-war04 .war-box-l {
    background: url(../images/bg-btn-war04.jpg) bottom center no-repeat;
    background-size: cover;
    position: relative;
}
#btn-war05 .war-box-l {
    background: url(../images/bg-btn-war05.jpg) bottom center no-repeat;
    background-size: cover;
    position: relative;
}
.war-box-l {
    height: 100vh;
    position: relative;
}
.logo-war {
    position: absolute;
    width: 300px;
    top: 50%;
    left: -150px;
    transform: translate(0%, -50%);
}
.war-box-r {
    height: 100vh;
    padding-left: 19%;
    position: relative;
    background: #fff;
}
.war-box-r img {
    max-height: 500px;
}
.lity-close, .lity-close:hover, .lity-close:focus, .lity-close:active, .lity-close:visited {
    color: #5d5d5d;
    right: 20px;
    top: 10px;
    font-size: 80px;
    width: 80px;
    height: 80px;
}
/* end s-wars */
/* All delay classes will take half the time to start */
:root {
    --animate-delay: 0.5s;
}
/* footer */
/*footer {
  font-size: 10pt;
  background: #191919;
  font-family: 'Kanit', sans-serif;
  width: 100%;
  bottom: 0;
  position: relative;
  z-index: 200;
}
footer ul{
  width: 150px;
  font-size: 1em;
  font-weight: 300;
  color: #fff;
}

footer .container {
  width: 900px;
  padding: 15px 0;
}

footer .text-bottom {
  background: #020202;
  padding: 20px 0;
  font-size: 1em;
  font-weight: 400;
}*/
footer {
    background-color: #191919;
    box-shadow: rgb(0 0 0) 0px 30px 90px;
}
footer a {
    color: #cccccc !important;
    font-size: 11px;
    transition: 0.4s;
}
footer a:hover {
    color: white;
    text-indent: 10px;
}
footer .text-bottom {
    padding: 35px 10px;
    background-color: #020202;
    color: white;
    font-size: 12px;
}
footer .footer-link {
    padding: 30px 0;
}
.box-sc {
    width: 100px;
    padding: 0 20px;
}
.cr-footer {
    width: 200px;
}
/* end footer */
@media(min-width:1600px) {
    .section01 .box-center {
        width: 1100px;
        padding: 0;
        margin-right: -150px;
        margin-top: 50px;
    }
    .main-menu a {
        font-size: 18pt;
    }
    video {
        height: 387px;
        margin-top: -30px;
        margin-bottom: -6px;
    }
    .main-banner {
        width: 541px;
    }
    .s-contact {
        height: 520px;
        width: 99%;
    }
}
@media(min-width:1800px) {
    .s-contact {
        height: 603px;
        width: 100%;
    }
    .s-contact .option {
        bottom: 150px;
    }
}
@media(min-width:1921px) {
    .section01 .box-center {
        width: 612px;
        height: 760px;
        padding: 132px 105px;
        font-size: 11pt;
    }
    .s-item .botton-section {
        background: url(../images/bg-botton-war-xl.png);
        background-size: cover;
        height: 224px;
        margin-top: -2.6%;
    }
    .botton-section img {
        width: 320px;
        top: -134px;
        left: -17px;
    }
    .main-menu a {
        font-size: 22pt;
        margin: 19px 0;
    }
    .s-contact {
        height: 681px;
    }
    .s-contact .option {
        bottom: 150px;
        width: 200px;
    }
    .main-menu a {
        font-size: 22pt;
        margin: 19px 0;
    }
    .box-top {
        position: relative;
        width: 1200px;
    }
    .text-top {
        width: 700px;
    }
}
#parallax {
    position: relative;
    width: 100%;
    height: 100vh;
    background-image: url(https://raw.githubusercontent.com/oscicen/oscicen.github.io/master/img/depth-3.png), url(https://raw.githubusercontent.com/oscicen/oscicen.github.io/master/img/depth-2.png), url(https://raw.githubusercontent.com/oscicen/oscicen.github.io/master/img/depth-1.png);
    background-repeat: no-repeat;
    background-position: center;
    background-position: 50% 50%;
}
* {
    box-sizing: border-box;
}
.confetti {
    width: 50px;
    height: 1rem;
    display: inline-block;
    position: absolute;
    top: -1rem;
    left: 0;
    z-index: 200;
}
.confetti .rotate {
    animation: driftyRotate 1s infinite both ease-in-out;
    perspective: 1000;
}
.confetti .askew {
    background: linear-gradient(var(--grad-direction, to bottom), hsl(63, 100%, 50%) 25%, hsl(23, 100%, 50%) 0% 66.667%, hsl(43, 100%, 100%) 0% 100%);
    transform: skewY(10deg);
    width: 2rem;
    height: 3.2rem;
    animation: drifty 1s infinite alternate both ease-in-out;
    perspective: 1000;
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}
.confetti:nth-of-type(7n) .askew {
    animation-delay: -.6s;
    animation-duration: 2.25s;
}
.confetti:nth-of-type(7n + 1) .askew {
    animation-delay: -.879s;
    animation-duration: 3.5s;
}
.confetti:nth-of-type(7n + 2) .askew {
    animation-delay: -.11s;
    animation-duration: 1.95s;
}
.confetti:nth-of-type(7n + 3) .askew {
    animation-delay: -.246s;
    animation-duration: .85s;
}
.confetti:nth-of-type(7n + 4) .askew {
    animation-delay: -.43s;
    animation-duration: 2.5s;
}
.confetti:nth-of-type(7n + 5) .askew {
    animation-delay: -.56s;
    animation-duration: 1.75s;
}
.confetti:nth-of-type(7n + 6) .askew {
    animation-delay: -.76s;
    animation-duration: 1.5s;
}
.confetti:nth-of-type(9n) .rotate {
    animation-duration: 2s;
}
.confetti:nth-of-type(9n + 1) .rotate {
    animation-duration: 2.3s;
}
.confetti:nth-of-type(9n + 2) .rotate {
    animation-duration: 1.1s;
}
.confetti:nth-of-type(9n + 3) .rotate {
    animation-duration: .75s;
}
.confetti:nth-of-type(9n + 4) .rotate {
    animation-duration: 4.3s;
}
.confetti:nth-of-type(9n + 5) .rotate {
    animation-duration: 3.05s;
}
.confetti:nth-of-type(9n + 6) .rotate {
    animation-duration: 2.76s;
}
.confetti:nth-of-type(9n + 7) .rotate {
    animation-duration: 7.6s;
}
.confetti:nth-of-type(9n + 8) .rotate {
    animation-duration: 1.78s;
}
@keyframes drifty {
    0% {
        transform: skewY(10deg) translate3d(-250%, 0, 0);
    }
    100% {
        transform: skewY(-12deg) translate3d(250%, 0, 0);
    }
}
@keyframes driftyRotate {
    0% {
        transform: rotateX(0);
    }
    100% {
        transform: rotateX(359deg);
    }
}
select {
    position: absolute;
    left: 1rem;
    top: 1rem;
    font-size: 1rem;
    z-index: 100;
    display: none;
}
[data-type=bookmarks] .confetti:nth-child(4n) {
    color: hsl(46, 76%, 50%);
}
[data-type=bookmarks] .confetti:nth-child(4n + 1) {
    color: hsl(103, 80%, 30%);
}
[data-type=bookmarks] .confetti:nth-child(4n + 2) {
    color: hsl(85, 60%, 45%);
}
[data-type=bookmarks] .confetti:nth-child(4n + 3) {
    color: hsl(92, 91%, 62%);
}
[data-type=bookmarks] .confetti .askew {
    background: currentColor linear-gradient(to right, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, .12) 0% 52%, rgba(0, 0, 0, 0) 92%);
    width: 9px;
    height: 29px;
    clip-path: polygon(50% 0%, 100% 20%, 80% 30%, 100% 45%, 74% 60%, 94% 80%, 82% 100%, 18% 100%, 6% 80%, 26% 60%, 0% 45%, 20% 30%, 0% 20%);
    clip-path: polygon(56% 0%, 56% 16%, 60% 20%, 85% 40%, 100% 60%, 85% 75%, 70% 90%, 50% 100%, 15% 75%, 0% 60%, 15% 40%, 40% 20%, 44% 16%, 44% 0%);
}
[data-type=snowflake] .confetti .askew {
    background: hsl(223, 40%, 96%);
    clip-path: polygon(evenodd, 20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%, 22% 2%, 78% 2%, 98% 22%, 98% 78%, 78% 98%, 22% 98%, 2% 78%, 2% 22%, 30% 10%, 70% 10%, 90% 30%, 90% 70%, 70% 90%, 30% 90%, 10% 70%, 10% 30%, 32% 12%, 68% 12%, 88% 32%, 88% 68%, 68% 88%, 32% 88%, 12% 68%, 12% 32%, 40% 20%, 60% 20%, 80% 40%, 80% 60%, 60% 80%, 40% 80%, 20% 60%, 20% 40%);
}
@keyframes moveup-slow1 {
    from {
        transform: translateY(0%);
    }
    to {
        transform: translateY(2%);
    }
}
@keyframes moveup-slow2 {
    from {
        transform: translateY(0%);
    }
    to {
        transform: translateY(3%);
    }
}
@keyframes moveup-slow3 {
    from {
        transform: translateY(0%);
    }
    to {
        transform: translateY(8%);
    }
}
@keyframes moveup-slow4 {
    from {
        transform: translateY(0%);
    }
    to {
        transform: translateY(20%);
    }
}
@keyframes mymove {
    0% {
        transform: rotate(2deg);
    }
    50% {
        transform: rotate(-2deg);
    }
    100% {
        transform: rotate(2deg);
    }
}
.news-item2 {
    color: #fff6dd;
}
.news-item2 .thumb {
    height: 180px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #000;
    -webkit-transition-property: -ms-transform, transform, -webkit-transform;
    -webkit-transition-duration: .5s;
    -webkit-transition-timing-function: ease;
    transition-property: -ms-transform, transform, -webkit-transform;
    transition-duration: .5s;
    transition-timing-function: ease;
    /*-webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 2px 2px 0px 0px rgb(24 22 1);
  -moz-box-shadow: 2px 2px 0px 0px rgb(24 22 1);
  box-shadow: 2px 2px 0px 0px rgb(24 22 1);*/
    border: 1px solid #000;
}
.news-item2 .banner {
    width: 650px;
}
.news-item2 .news-detail {
    font-size: 10pt;
    text-align: left;
}
.news-item2 .title {
    font-weight: 500;
    margin-bottom: 7px;
    text-align: left;
    color: #f2c94c;
}
.news-item2 .desc {
    font-size: 85%;
    text-align: left;
    color: #fff6dd;
}
.news-item2 .time {
    color: #c9a876;
    font-size: 85%;
    text-align: left;
}
a.news-item2:hover {
    color: #465372;
    transition: 0.2s;
}
/* STORY6 MOBILE FINAL DESIGN V3 */
@media (max-width:1024px) {
    html,body {
        width:100%!important;
        max-width:100%!important;
        overflow-x:hidden!important
    }
    body {
        background:#090b10!important
    }
    *,*:before,*:after {
        box-sizing:border-box
    }
    img,video,iframe {
        max-width:100%;
        height:auto
    }
    .section01 {
        width:100%!important;
        max-width:100%!important;
        min-height:auto!important;
        overflow:hidden!important;
        background-position:center top!important;
        background-size:cover!important;
        padding:0!important
    }
    .section01 .container {
        width:100%!important;
        max-width:100%!important;
        margin:0 auto!important;
        padding:28px 18px 34px!important
    }
    .section01 .container>.d-flex {
        display:block!important;
        width:100%!important;
        max-width:100%!important
    }
    .box-top {
        width:100%!important;
        max-width:100%!important;
        overflow:hidden!important
    }
    .text-top {
        display:block!important;
        width:min(760px,96vw)!important;
        max-width:96vw!important;
        margin:0 auto!important
    }
    .section01 .box-l {
        width:100%!important;
        max-width:520px!important;
        margin:0 auto!important;
        padding:0!important
    }
    .section01 .box-r {
        display:none!important
    }
    .box-l .box-menu {
        width:100%!important;
        max-width:420px!important;
        margin:0 auto!important
    }
    .s-news {
        width:100%!important;
        max-width:100%!important;
        overflow:hidden!important;
        padding:0 0 42px!important
    }
    .s-news .container {
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        margin:0 auto!important;
        padding:92px 18px 0!important
    }
    .s-news .tag {
        left:50%!important;
        transform:translateX(-50%)!important
    }
    .s-news .nav {
        width:100%!important;
        max-width:100%!important;
        flex-wrap:wrap!important;
        justify-content:center!important;
        gap:8px!important
    }
    .s-news [data-aos] {
        opacity:1!important;
        transform:none!important;
        visibility:visible!important
    }
    .s-wars,.s-wars .container,footer,footer .container {
        width:100%!important;
        max-width:100%!important;
        min-width:0!important
    }
}
@media (max-width:767px) {
    .section01 {
        background-position:50% top!important;
        background-size:auto 100%!important
    }
    .section01 .container {
        padding:20px 10px 30px!important
    }
    .section01 .box-l {
        max-width:360px!important
    }
    .box-l .box-menu {
        max-width:340px!important;
        padding-left:14px!important;
        padding-right:14px!important
    }
    .box-menu .d-flex.justify-content-between {
        gap:5px!important;
        flex-wrap:nowrap!important
    }
    .btn-yellow {
        padding:5px 8px!important;
        font-size:.80em!important;
        white-space:nowrap
    }
    .s-news .container {
        padding:80px 8px 0!important
    }
    .s-news .tag {
        width:145px!important;
        top:-30px!important
    }
    .s-news .nav {
        gap:4px!important;
        padding:0 2px!important
    }
    .s-news .btn-tab,.s-news .btn-tab:hover,.s-news .btn-tab:active,.s-news .btn-tab:focus,.s-news .btn-tab.active,.s-news .nav-pills .nav-link.active {
        width:92px!important;
        height:40px!important;
        min-width:0!important;
        padding:0 4px!important;
        background-size:100% 100%!important;
        font-size:9px!important;
        white-space:nowrap!important
    }
    footer {
        padding-top:32px!important
    }
    footer .container {
        padding-left:18px!important;
        padding-right:18px!important
    }
}
@media (max-width:430px) {
    .section01 .container {
        padding-left:7px!important;
        padding-right:7px!important
    }
    .s-news .container {
        padding-left:6px!important;
        padding-right:6px!important
    }
    .s-news .btn-tab,.s-news .btn-tab:hover,.s-news .btn-tab.active {
        width:86px!important;
        font-size:8px!important
    }
}
@media (min-width:768px) and (max-width:1024px) {
    .section01 .container {
        max-width:900px!important;
        padding:36px 28px 42px!important
    }
    .section01 .box-l {
        max-width:520px!important
    }
    .s-news .container {
        max-width:940px!important;
        padding-left:24px!important;
        padding-right:24px!important
    }
}
/* =========================================================
   STORY HERO VIDEO + MINIMAL WELCOME
   ========================================================= */
.section01 {
    position:relative;
    isolation:isolate;
}
.story-hero-video {
    position:absolute;
    inset:0;
    z-index:-3;
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    pointer-events:none;
}
.story-hero-video-overlay {
    position:absolute;
    inset:0;
    z-index:-2;
    pointer-events:none;
    background:linear-gradient( to bottom, rgba(0,0,0,.06), rgba(0,0,0,.12) 65%, rgba(24,8,8,.32) );
}
.story-welcome {
    position:fixed;
    inset:0;
    z-index:100000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    opacity:1;
    visibility:visible;
    transition:opacity .4s ease,visibility .4s ease;
}
.story-welcome.is-hidden {
    opacity:0;
    visibility:hidden;
}
.story-welcome-backdrop {
    position:absolute;
    inset:0;
    background:rgba(7,5,4,.64);
    backdrop-filter:blur(5px);
}
.story-welcome-box {
    position:relative;
    z-index:1;
    width:100%;
    max-width:390px;
    padding:42px 30px 36px;
    border:1px solid rgba(232,187,74,.46);
    border-radius:18px;
    background:rgba(18,12,9,.88);
    box-shadow:0 24px 70px rgba(0,0,0,.42);
    text-align:center;
}
.story-welcome-kicker {
    display:block;
    margin-bottom:9px;
    color:#e7b94a;
    font-family:"Kanit",sans-serif;
    font-size:11px;
    font-weight:700;
    letter-spacing:2px;
}
.story-welcome-box h1 {
    margin:0;
    color:#fff6dc;
    font-family:"Kanit",sans-serif;
    font-size:29px;
    font-weight:400;
    line-height:1.3;
}
.story-welcome-box p {
    margin:8px 0 25px;
    color:#cbbda5;
    font-family:"Kanit",sans-serif;
    font-size:13px;
    font-weight:300;
}
#storyWelcomeEnter {
    min-width:150px;
    min-height:45px;
    padding:0 24px;
    border:1px solid #dfad32;
    border-radius:999px;
    background:transparent;
    color:#f2ca69;
    font-family:"Kanit",sans-serif;
    font-size:12px;
    font-weight:600;
    letter-spacing:1.5px;
    cursor:pointer;
    transition:background .18s ease,color .18s ease,transform .18s ease;
}
#storyWelcomeEnter:hover {
    transform:translateY(-2px);
    background:#dfad32;
    color:#21140b;
}
@media (prefers-reduced-motion: reduce) {
    .story-hero-video {
        display:none;
    }
    .story-welcome {
        transition:none;
    }
}
@media (max-width:767px) {
    .story-hero-video {
        object-position:center top;
    }
    .story-welcome-box {
        max-width:340px;
        padding:34px 22px 30px;
    }
    .story-welcome-box h1 {
        font-size:24px;
    }
}
.story-home-login-only {
    position:absolute;
    top:18px;
    right:24px;
    z-index:9990
}
.story-home-login-button {
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:42px;
    padding:0 17px;
    border:1px solid rgba(230,181,66,.7);
    border-radius:999px;
    background:rgba(15,10,7,.72);
    color:#f6d77e!important;
    font-family:"Kanit",sans-serif;
    font-size:12px;
    text-decoration:none!important
}
.story-hero-side-menu {
    position:absolute;
    top:50%;
    right:24px;
    z-index:800;
    display:flex;
    flex-direction:column;
    gap:10px;
    transform:translateY(-50%)
}
.story-side-action {
    display:flex;
    align-items:center;
    gap:10px;
    min-width:150px;
    min-height:46px;
    padding:0 14px;
    border:1px solid rgba(226,176,62,.55);
    border-radius:12px;
    background:rgba(16,10,7,.72);
    color:#f7df9b!important;
    font-family:"Kanit",sans-serif;
    font-size:12px;
    text-decoration:none!important
}
.story-side-action i {
    width:20px;
    text-align:center;
    color:#e8b84b;
    font-size:16px
}
.story-side-action:hover {
    transform:translateX(-4px);
    background:rgba(103,65,13,.88)
}
@media(max-width:767px) {
    .story-home-login-only {
        top:10px;
        right:10px
    }
    .story-home-login-button {
        min-height:38px;
        padding:0 12px;
        font-size:10px
    }
    .story-hero-side-menu {
        position:relative;
        top:auto;
        right:auto;
        width:100%;
        margin:16px auto 0;
        padding:0 8px 14px;
        transform:none;
        flex-direction:row;
        flex-wrap:wrap;
        justify-content:center
    }
    .story-side-action {
        flex:1 1 calc(50% - 6px);
        min-width:0;
        justify-content:center;
        min-height:42px;
        font-size:10px
    }
}