:root {
    --wp--preset--aspect-ratio--square: 1;
    --wp--preset--aspect-ratio--4-3: 4/3;
    --wp--preset--aspect-ratio--3-4: 3/4;
    --wp--preset--aspect-ratio--3-2: 3/2;
    --wp--preset--aspect-ratio--2-3: 2/3;
    --wp--preset--aspect-ratio--16-9: 16/9;
    --wp--preset--aspect-ratio--9-16: 9/16;
    --wp--preset--color--black: #000000;
    --wp--preset--color--cyan-bluish-gray: #abb8c3;
    --wp--preset--color--white: #ffffff;
    --wp--preset--color--pale-pink: #f78da7;
    --wp--preset--color--vivid-red: #cf2e2e;
    --wp--preset--color--luminous-vivid-orange: #ff6900;
    --wp--preset--color--luminous-vivid-amber: #fcb900;
    --wp--preset--color--light-green-cyan: #7bdcb5;
    --wp--preset--color--vivid-green-cyan: #00d084;
    --wp--preset--color--pale-cyan-blue: #8ed1fc;
    --wp--preset--color--vivid-cyan-blue: #0693e3;
    --wp--preset--color--vivid-purple: #9b51e0;
    --wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg, rgb(6, 147, 227) 0%, rgb(155, 81, 224) 100%);
    --wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg, rgb(122, 220, 180) 0%, rgb(0, 208, 130) 100%);
    --wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg, rgb(252, 185, 0) 0%, rgb(255, 105, 0) 100%);
    --wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg, rgb(255, 105, 0) 0%, rgb(207, 46, 46) 100%);
    --wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg, rgb(238, 238, 238) 0%, rgb(169, 184, 195) 100%);
    --wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg, rgb(74, 234, 220) 0%, rgb(151, 120, 209) 20%, rgb(207, 42, 186) 40%, rgb(238, 44, 130) 60%, rgb(251, 105, 98) 80%, rgb(254, 248, 76) 100%);
    --wp--preset--gradient--blush-light-purple: linear-gradient(135deg, rgb(255, 206, 236) 0%, rgb(152, 150, 240) 100%);
    --wp--preset--gradient--blush-bordeaux: linear-gradient(135deg, rgb(254, 205, 165) 0%, rgb(254, 45, 45) 50%, rgb(107, 0, 62) 100%);
    --wp--preset--gradient--luminous-dusk: linear-gradient(135deg, rgb(255, 203, 112) 0%, rgb(199, 81, 192) 50%, rgb(65, 88, 208) 100%);
    --wp--preset--gradient--pale-ocean: linear-gradient(135deg, rgb(255, 245, 203) 0%, rgb(182, 227, 212) 50%, rgb(51, 167, 181) 100%);
    --wp--preset--gradient--electric-grass: linear-gradient(135deg, rgb(202, 248, 128) 0%, rgb(113, 206, 126) 100%);
    --wp--preset--gradient--midnight: linear-gradient(135deg, rgb(2, 3, 129) 0%, rgb(40, 116, 252) 100%);
    --wp--preset--font-size--small: 13px;
    --wp--preset--font-size--medium: 20px;
    --wp--preset--font-size--large: 36px;
    --wp--preset--font-size--x-large: 42px;
    --wp--preset--spacing--20: 0.44rem;
    --wp--preset--spacing--30: 0.67rem;
    --wp--preset--spacing--40: 1rem;
    --wp--preset--spacing--50: 1.5rem;
    --wp--preset--spacing--60: 2.25rem;
    --wp--preset--spacing--70: 3.38rem;
    --wp--preset--spacing--80: 5.06rem;
    --wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
    --wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
    --wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
    --wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);
    --wp--preset--shadow--crisp: 6px 6px 0px rgb(0, 0, 0);
}

:root {
    --wp--style--global--content-size: 823px;
    --wp--style--global--wide-size: 1080px;
}

:where(body) {
    margin: 0;
}

body {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
}


a, abbr, acronym, address, applet, b, big, blockquote, body, center, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, tt, u, ul, var {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    vertical-align: baseline;
    background: transparent
}

body {
    line-height: 1
}

ol, ul {
    list-style: none
}

blockquote, q {
    quotes: none
}

blockquote {
    margin: 20px 0 30px;
    border-left: 5px solid;
    padding-left: 20px
}

:focus {
    outline: 0
}

del {
    text-decoration: line-through
}

pre {
    overflow: auto;
    padding: 10px
}

figure {
    margin: 0
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

article, aside, footer, header, hgroup, nav, section {
    display: block
}

body {
    font-family: Open Sans, Arial, sans-serif;
    font-size: 14px;
    color: #666;
    background-color: #fff;
    line-height: 1.7em;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

body.page-template-page-template-blank-php #page-container {
    padding-top: 0 !important
}

a {
    color: #2ea3f2
}

a, a:hover {
    text-decoration: none
}

p {
    padding-bottom: 1em
}

strong {
    font-weight: 700
}

cite, em, i {
    font-style: italic
}

code, pre {
    font-family: Courier New, monospace;
    margin-bottom: 10px
}

ins {
    text-decoration: none
}

sub, sup {
    height: 0;
    line-height: 1;
    position: relative;
    vertical-align: baseline
}

sup {
    bottom: .8em
}

sub {
    top: .3em
}

dl {
    margin: 0 0 1.5em
}

dl dt {
    font-weight: 700
}

dd {
    margin-left: 1.5em
}

blockquote p {
    padding-bottom: 0
}

embed, iframe, object, video {
    max-width: 100%
}

h1, h2, h3, h4, h5, h6 {
    color: #333;
    padding-bottom: 10px;
    line-height: 1em;
    font-weight: 500
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: inherit
}

h1 {
    font-size: 30px
}

h2 {
    font-size: 26px
}

h3 {
    font-size: 22px
}

h4 {
    font-size: 18px
}

h5 {
    font-size: 16px
}

h6 {
    font-size: 14px
}

input {
    -webkit-appearance: none
}

input[type=checkbox] {
    -webkit-appearance: checkbox
}

input[type=radio] {
    -webkit-appearance: radio
}

input[type=email], input[type=password], input[type=tel], input[type=text], select, textarea {
    background-color: #fff;
    border: 1px solid #bbb;
    padding: 2px;
    color: #4e4e4e
}

input[type=text]:focus, select:focus, textarea:focus {
    border-color: #2d3940;
    color: #3e3e3e
}

input[type=text], select, textarea {
    margin: 0
}

#search_icon:before, .mobile_menu_bar:before {
    font-family: ETmodules !important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    -webkit-font-feature-settings: normal;
    font-feature-settings: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: 0 0;
    direction: ltr;
}

textarea {
    padding: 4px
}

button, input, select, textarea {
    font-family: inherit
}

img {
    max-width: 100%;
    height: auto
}

#search_icon:hover {
    color: #2ea3f2
}

.et-search-form, blockquote {
    border-color: #2ea3f2
}

.container {
    width: 90%;
    max-width: 1080px;
    margin: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
}

@media (max-width: 980px) {
    #page-container {
        padding-top: 80px
    }
}

@media print {
    #page-container {
        padding-top: 0 !important
    }
}

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}


@font-face {
    font-family: ETmodules;
    font-display: block;
    src: url(/css/game_95/fonts/modules.eot);
    src: url(/css/game_95/fonts/modules.eot?#iefix) format("embedded-opentype"), url(/css/game_95/fonts/modules.woff) format("woff"), url(/css/game_95/fonts/modules.ttf) format("truetype"), url(/css/game_95/fonts/modules.svg#ETmodules) format("svg");
    font-weight: 400;
    font-style: normal
}


.mobile_menu_bar:before, .mobile_menu_bar:after, #top-menu li.current-menu-ancestor > a, #top-menu li.current-menu-item > a {
    color: #2EA3F2
}

.main-header.et-disabled-animations * {
    -webkit-transition-duration: 0s !important;
    transition-duration: 0s !important
}

#page-container {
    padding-top: 80px
}

#logo {
    width: 160px;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    margin-bottom: 0;
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translate3d(0, 0, 0)
}


.logo_container {
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out
}

#top-menu-nav, #top-menu {
    line-height: 0
}

nav#top-menu-nav, #top-menu {
    float: left
}

#top-menu li {
    display: inline-block;
    font-size: 14px;
    padding-right: 22px
}

#top-menu > li:last-child {
    padding-right: 0
}

#top-menu a {
    color: #f2f2f2;
    text-decoration: none;
    display: block;
    position: relative;
    -webkit-transition: opacity 0.4s ease-in-out, background-color 0.4s ease-in-out;
    transition: opacity 0.4s ease-in-out, background-color 0.4s ease-in-out
}

#top-menu-nav > ul > li > a:hover {
    opacity: 0.7;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out
}

#search_icon:before {
    content: "\55";
    font-size: 17px;
    left: 0;
    position: absolute;
    top: -3px
}

#search_icon:hover {
    cursor: pointer
}

#top_search {
    float: right;
    margin: 3px 0 0 22px;
    position: relative;
    display: block;
    width: 18px
}

.et-search-form {
    top: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 1000;
    width: 100%
}

.et-search-form input {
    width: 90%;
    border: none;
    color: #333;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 30px;
    margin: auto;
    background: transparent
}

.et-search-form .et-search-field::-ms-clear {
    width: 0;
    height: 0;
    display: none
}

.container.search_form_container {
    position: fixed;
    width: 100%;
    top: -100%;
    z-index: 10;
    opacity: 1;
    height: 80px;
    background: #352778;
    transition: top .5s;
}

.container.search_form_container.show {
    top: 0;
}

span.close_search {
    display: block;
    width: 30px;
    height: 30px;
    z-index: 99999;
    position: absolute;
    right: 10px;
    cursor: pointer;
    top: 0;
    bottom: 0;
    margin: auto
}

span.close_search:after {
    font-family: "ETmodules";
    content: "\4d";
    speak: none;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    font-size: 32px;
    display: inline-block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

form.et-search-form {
    background: rgba(0, 0, 0, 0) !important
}

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none
}

#top-menu li li {
    padding: 0 20px;
    margin: 0
}

#top-menu li li a {
    padding: 6px 20px;
    width: 200px
}

.nav li.et-touch-hover > ul {
    opacity: 1;
    visibility: visible
}

#top-menu .menu-item-has-children > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after {
    font-family: "ETmodules";
    content: "3";
    font-size: 16px;
    position: absolute;
    right: 0;
    top: 0;
    font-weight: 800
}

#top-menu .menu-item-has-children > a:first-child, #et-secondary-nav .menu-item-has-children > a:first-child {
    padding-right: 20px
}

#top-menu li .menu-item-has-children > a:first-child {
    padding-right: 40px
}

#top-menu li .menu-item-has-children > a:first-child:after {
    right: 20px;
    top: 6px
}

#mobile_nav_menu {
    float: right;
    display: none
}

.mobile_menu_bar {
    position: relative;
    display: block;
    line-height: 0
}

.mobile_menu_bar:before {
    content: "\61";
    font-size: 32px;
    left: 0;
    position: relative;
    top: 0;
    cursor: pointer
}

.mobile_nav .select_page {
    display: none
}


@media all and (max-width: 980px) {

    #top-menu {
        display: none
    }

    #top_search {
        margin: 0 35px 0 0;
        float: left
    }

    #search_icon:before {
        top: 7px
    }

    #mobile_nav_menu {
        display: block
    }
}

@media print {
    #top-header, .main-header {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important
    }
}

.main-header {
    line-height: 23px;
    font-weight: 500;
    top: 0;
    background-color: #352778;
    width: 100%;
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
    z-index: 99999;
    position: fixed;
}

.nav li li {
    padding: 0 20px;
    margin: 0
}

.et-menu li li a {
    padding: 6px 20px;
    width: 200px
}

.nav li {
    position: relative;
    line-height: 1em
}

.nav li li {
    position: relative;
    line-height: 2em
}

.nav li ul {
    position: absolute;
    padding: 20px 0;
    z-index: 9999;
    width: 240px;
    background: #fff;
    visibility: hidden;
    opacity: 0;
    border-top: 3px solid #2ea3f2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
    -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
    -webkit-transform: translateZ(0);
    text-align: left
}

.nav li:hover {
    visibility: inherit
}

.mobile_menu li a, .nav li li a {
    font-size: 14px;
    -webkit-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
    transition: opacity .2s ease-in-out, background-color .2s ease-in-out
}

.mobile_menu li a:hover, .nav ul li a:hover {
    background-color: rgba(0, 0, 0, .03);
    opacity: .7
}

.et-menu .menu-item-has-children > a:first-child:after {
    font-family: ETmodules;
    content: "3";
    font-size: 16px;
    position: absolute;
    right: 0;
    top: 0;
    font-weight: 800
}

.mobile_menu {
    position: absolute;
    left: 0;
    top: 80px;
    padding: 5%;
    background: #352778;
    width: 100%;
    visibility: visible;
    opacity: 1;
    display: none;
    z-index: 9999;
    border-top: 3px solid #2ea3f2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
    -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
    overflow: hidden;
    max-height: 0;
}

.main-header .mobile_menu li ul {
    visibility: visible !important;
    display: block !important;
    padding-left: 10px
}

.mobile_menu li li {
    padding-left: 5%
}

.mobile_menu li a {
    border-bottom: 1px solid rgba(0, 0, 0, .03);
    color: #f2f2f2;
    padding: 10px 5%;
    display: block
}

.mobile_menu_bar {
    position: relative;
    display: block;
    line-height: 0
}

.mobile_menu_bar:before {
    content: "a";
    font-size: 32px;
    position: relative;
    left: 0;
    top: 0;
    cursor: pointer
}

body {
    color: #3a3a3a
}

h1, h2, h3, h4, h5, h6 {
    color: #f2f2f2
}

a {
    color: rgba(242, 242, 242, 0.15)
}

#search_icon:before, .search_form_container input, span.close_search:after {
    color: #f2f2f2
}

.search_form_container input::-moz-placeholder {
    color: #f2f2f2
}

.search_form_container input::-webkit-input-placeholder {
    color: #f2f2f2
}

.search_form_container input:-ms-input-placeholder {
    color: #f2f2f2
}

#top-menu li a {
    font-size: 16px
}

#top-menu li a, .search_form_container input {
    font-weight: bold;
    font-style: normal;
    text-transform: none;
    text-decoration: none
}

.search_form_container input::-moz-placeholder {
    font-weight: bold;
    font-style: normal;
    text-transform: none;
    text-decoration: none
}

.search_form_container input::-webkit-input-placeholder {
    font-weight: bold;
    font-style: normal;
    text-transform: none;
    text-decoration: none
}

.search_form_container input:-ms-input-placeholder {
    font-weight: bold;
    font-style: normal;
    text-transform: none;
    text-decoration: none
}

#footer-widgets .footer-widget li:before {
    top: 10.6px
}

#et-footer-nav .bottom-nav li.current-menu-item a {
    color: #2ea3f2
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    font-style: normal;
    text-transform: none;
    text-decoration: none
}

h1 {
    font-size: 29px
}

h2 {
    font-size: 24px
}

h3 {
    font-size: 21px
}

h5 {
    font-size: 15px
}

h6 {
    font-size: 13px
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Barlow", Helvetica, Arial, Lucida, sans-serif
}

body, input, textarea, select {
    font-family: "Lato", Helvetica, Arial, Lucida, sans-serif
}

.main-header {
    font-family: "Barlow", Helvetica, Arial, Lucida, sans-serif
}

.mobile_menu_bar:before, .mobile_menu_bar:after, #top-menu li.current-menu-ancestor > a, #top-menu li.current-menu-item > a {
    color: white
}

.mobile_menu {
    border-top: 2px solid #ff6d01
}

.games-menu a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 10px 16px !important;
    background-color: #ff6d01;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    border-radius: 20px;
    box-shadow: 0 4px #CC5700;
    font-family: 'Barlow', sans-serif;
    line-height: 1
}

li.games-menu {
    padding-bottom: 24px
}

@media screen and (min-width: 980px) {
    #top_search {
        margin: 16px 0 0 22px
    }
}

.footer-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.common-main, .cate-list, .more-list {
    max-width: 1080px;
    margin: auto;
    position: relative;
    padding: 0 15px;
}

.content-one {
    background: #5e4dc0;
    padding: 1rem 0 2rem;
}

.content-title h1 {
    margin: 1.5rem 0;
    font-size: 3rem;
    text-align: center;
}

.new-list {
    display: grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap: 1rem 1.5rem;
}

.new-item {
    display: flex;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 12px;
    position: relative;
}

.new-image {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 12px;
}

.new-title {
    width: 100%;
    opacity: 0;
    transition: opacity .3s;

    position: absolute;
    bottom: 0;
    text-align: center;
    padding: 10px 0;
    border-radius: 0 0 12px 12px;

    background: rgb(0 0 0 / 30%);
    font-size: 20px;
    font-weight: bold;
    color: #f2f2f2;
}

.new-item:hover .new-title {
    opacity: 1;
}

.content-two {
    padding: 1rem 0 2rem;
    background: #4d94c0 !important;
}

.hot-list {
    display: grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.hot-item {
    border: 1px solid #fff;
    border-radius: 15px;
}

.hot-img img {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 15px 15px 0 0;
}

.hot-info {
    padding: 1rem;
    background: #fff;
    border-radius: 0 0 12px 12px;
}

.hot-title {
    color: #191919 !important;
}

.hot-text {
    font-size: 16px;
    color: #666;
    padding: 0;
}

.cate-main {
    background-color: #352778 !important;
    padding: 2rem 0;
}

.cate-list {
    display: grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.more-list {
    display: flex;
    gap: 2rem;
    flex-direction: column;
}

.cate-item {
    padding: 1rem;
    border-radius: 16px;
    background-color: #5e4dc0;
}

.cate-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 1rem;
}

.cate-header-left {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: 'Barlow', Helvetica, Arial, Lucida, sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: #f2f2f2;
}

.cate-header-left img {
    width: 27px;
    height: 27px;
}

.cate-header-right {
    color: #f2f2f2;
    padding: .3em 1em !important;

    font-family: 'Barlow', Helvetica, Arial, Lucida, sans-serif;

    box-shadow: 0 4px 0 0 #CC5700;

    font-size: 16px;
    background-color: #ff6d01;
    border-width: 0 !important;
    border-radius: 50px;
    font-weight: bold;
    font-style: normal;
    text-transform: none;
    text-decoration: none;
    line-height: 1;

    transition: all 300ms ease 0ms;
}

.scroll-top {
    color: #f2f2f2;
    padding: .5em !important;
    font-family: 'Barlow', Helvetica, Arial, Lucida, sans-serif;
    box-shadow: 0 4px 0 0 #CC5700;
    font-size: 18px;
    background-color: #ff6d01;
    border-width: 0 !important;
    border-radius: 50px;
    font-weight: bold;
    font-style: normal;
    text-transform: none;
    text-decoration: none;
    line-height: 1;
    transition: all 300ms ease 0ms;
    position: fixed;
    right: 25px;
    bottom: 50px;
    z-index: 10001;

    display: none;
}

.scroll-top.show {
    display: flex;
}

.cate-game-list {
    display: grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.more-game-list {
    display: grid;
    grid-template-columns:repeat(6, minmax(0, 1fr));
    gap: 1rem;
}

.cate-game-item {
    width: 100%;
}

.cate-game-img {
    width: 100%;
    aspect-ratio: 1;
    /*margin-bottom: 10px;*/
    border-radius: 12px;
}

.cate-game-title {
    font-size: 14px !important;
    color: #ffffff !important;
    text-align: center !important;
    font-weight: bold;
    padding: 0;
}

.hot-img {
    display: flex;
}

.max-line-1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

.line-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.max-line-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.max-line-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

body {
    font-family: "Barlow", Helvetica, Arial, Lucida, sans-serif;
}

.footer {
    background-color: #ff6d01 !important;
}

.footer-list {
    display: flex;
    gap: 10px;
    color: #f2f2f2;
    font-weight: bold;
}

.footer-list a {
    color: #f2f2f2;
    font-weight: bold;
}

.copyright {
    color: #f2f2f2;
}

.menu-item a {
    font-weight: bold;
}

.game-info {
    padding: 1rem;
    background-color: #ffffff;
    border-radius: 16px 16px 16px 16px;
}

.game-guide {
    margin: 1rem 0 2rem;
}

.game-guide, .game-guide a, .game-guide p {
    font-weight: 600;
    font-size: 24px;
    font-family: 'Barlow', Helvetica, Arial, Lucida, sans-serif;
    color: #f2f2f2;
}

.game-guide a, .game-guide p {
    display: inline;
}


.game-cover {
    min-width: 250px;
    border-radius: 36px;
    width: 100%;
    max-width: 540px;
    margin: auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.5);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.game-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.game-cover:hover img {
    transform: scale(1.05);
}

.play-now-btn {
    background: linear-gradient(95deg, #FF416C, #FF4B2B);
    border: none;
    padding: 14px 30px;
    font-size: 1.2rem;
    font-weight: bold;
    border-radius: 50px;
    color: white;
    width: fit-content;
    cursor: pointer;
    transition: 0.25s;
    box-shadow: 0 8px 20px rgba(255, 75, 43, 0.4);
    margin: auto;
    position: absolute;
    z-index: 10;
}

.play-now-btn:hover {
    transform: scale(1.03);
    box-shadow: 0 15px 30px rgba(255, 65, 108, 0.6);
}

.desc-title {
    color: #000;
}

.detail-desc {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0;
}

.mt-2 {
    margin-bottom: 2rem;
}

@media screen and (min-width: 768px) {
    .detail-desc {
        -webkit-line-clamp: 2;
    }
}

.desc_btn {
    background: #0776de;
    padding: 10px 10px;
    border-radius: 5px;
    width: fit-content;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    margin: 1rem 0;
    line-height: 1;
}

.detail-info p, .detail-info li {
    font-size: 16px;
    color: #c7c7c7;
    margin-bottom: 15px;
    line-height: 1.3;
}

.light .detail-info p, .light .detail-info li, .light .detail-info h1, .light .detail-info h2, .light .detail-info h3, .light .detail-info h4, .light .detail-info h5, .light .detail-info h6 {
    color: #2a2a2a;
}

.detail-info li {
    list-style: disc;
}

.detail-info ul {
    padding-left: 30px;
    list-style: disc;
}

.detail-info h1, .detail-info h2, .detail-info h3, .detail-info h4, .detail-info h5, .detail-info h6 {
    color: #c7c7c7;
    margin: 10px 0;
    font-weight: bold;
    line-height: 1.3;
}

.detail-info h1 {
    font-size: 26px;
}

.detail-info h2 {
    font-size: 24px;
}

.detail-info h3 {
    font-size: 22px;
}

.detail-info h4 {
    font-size: 20px;
}

.detail-info h5, .detail-info h6 {
    font-size: 18px;
}

.detail-info a {
    color: #027aff;
    text-decoration: underline;
}


@media screen and (min-width: 568px) and (max-width: 968px) {
    .new-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hot-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (min-width: 568px) and (max-width: 768px) {
    .more-game-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media screen and (max-width: 568px) {
    .new-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hot-list {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .cate-game-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .more-game-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media screen and (max-width: 768px) {
    .cate-list {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .new-title {
        opacity: 1 !important;
    }

    .footer-main {
        flex-direction: column;
        gap: 1rem;
    }

    .content-title h1 {
        margin: 0 0 1rem;
    }
}