@charset "UTF-8";:root {
    --CPT-THM-R: 255;
    --CPT-THM-G: 255;
    --CPT-THM-B: 255;
    --CPT-THM-H: 0;
    --CPT-THM-S: 100%;
    --CPT-THM-L: 100%
}

html[lang^=ar] {
    direction: rtl
}

body {
    --VHX: calc(var(--VH) * 1px);
    --VHeight: var(--VHX, 100vh);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-width: 320px;
    min-height: var(--VHeight);
    font-size: clamp(12px,1.3671875vw,16px);
    --PageSpacing: clamp(24px,3.333334vw,48px);
    --ContentWidth: 80em;
}

menu,ol,ul {
    margin: 0;
    padding: 0
}

@media only screen and (max-width: 1000px) {
    body {
        --ContentWidth:60em
    }
}

body.landing_mask_activated {
    overflow: hidden
}

#landing_mask {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset: 0;
    z-index: 999;
    background: var(--mask-background,#222);
    transition: .3s
}

#landing_mask.hide {
    visibility: hidden;
    opacity: 0;
    transform: scale(1.2)
}

#landing_mask:not(.hide)~* {
    opacity: 0
}

#LogoGradient_wrp {
    --size: 12em;
    width: var(--size);
    height: var(--size);
    position: relative
}

#LogoGradient_mask {
    display: block!important;
    vertical-align: top;
    width: 50%;
    height: auto;
    position: absolute;
    inset: 0;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    fill: var(--mask-background,#222)
}

#LogoGradient {
    width: 100%;
    height: 100%;
    /* background: conic-gradient(var(--CPT-THM-HEX) 00 40%, var(--CPT-THM-HEX) 4d 99%, var(--CPT-THM-HEX) cc 99% 100%); */
    background: conic-gradient(var(--CPT-THM-HEX-0) 40%, var(--CPT-THM-HEX-30) 99%, var(--CPT-THM-HEX-80) 100%);
    /* background: conic-gradient(hsl(var(--CPT-THM-H,0) var(--CPT-THM-S,100%) var(--CPT-THM-L,100%)/0%) 40%,hsl(var(--CPT-THM-H,0) var(--CPT-THM-S,100%) var(--CPT-THM-L,100%)/30%) 99%,hsl(var(--CPT-THM-H,0) var(--CPT-THM-S,100%) var(--CPT-THM-L,100%)/80%) 99% 100%); */
    animation: logo_rotate linear 1.7s infinite;
    border-radius: 100%
}

@keyframes logo_rotate {
    100% {
        transform: rotate(360deg)
    }
}

body.landing_popup_activated {
    overflow: hidden
}

#landing_lang_popup {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: rgba(0 0 0/50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--PageSpacing);
    -webkit-backdrop-filter: blur(1em);
    -moz-backdrop-filter: blur(1em);
    backdrop-filter: blur(1em);
    visibility: hidden;
    opacity: 0;
    transition: .3s
}

#landing_lang_popup.show {
    visibility: visible;
    opacity: 1
}

#landing_lang_popup>.lang_ctrl_off {
    position: absolute;
    inset: 0;
    z-index: 0
}

#landing_lang_popup>.inner {
    position: relative
}

#lang_popup {
    background: #fff;
    color: #000;
    overflow: hidden;
    position: relative;
    width: min(40em,calc(var(--VWidth) - var(--PageSpacing) * 2));
    box-sizing: border-box;
    border-radius: 1em
}

#lang_popup .title {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1em;
    align-items: center;
    margin: 2em
}

#lang_popup .title h3 {
    font-size: 1em;
    font-weight: 800;
    text-transform: uppercase;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1em;
    align-items: center;
    opacity: .5
}

#lang_popup .title h3::before {
    content: attr(icon);
    display: block;
    font-size: 2em;
    width: 1em;
    height: 1em;
    line-height: 1;
    overflow: hidden
}

#lang_popup .title .lang_ctrl_off:not(:hover) {
    opacity: .5
}

#lang_popup .lang_list {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    margin: 2em;
    max-height: calc(var(--VHeight) - 12em);
    overflow: hidden;
    overflow-y: auto
}

#lang_popup .lang_list>a {
    flex: none;
    display: block;
    color: currentColor;
    padding: .75em 1.5em;
    padding-inline-end:1.5em;border-radius: 3em;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 800;
    white-space: nowrap;
    box-sizing: border-box
}

#lang_popup .lang_list>a:hover {
    background: rgba(0 0 0/5%)
}

#lang_popup .lang_list>a.on {
    background: rgba(0 0 0/5%)
}

@media only screen and (max-width: 480px) {
    #lang_popup .lang_list {
        display:block
    }

    #lang_popup .lang_list>a {
        padding: .75em 3em
    }
}

#landing_share_popup {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: rgba(0 0 0/50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--PageSpacing);
    -webkit-backdrop-filter: blur(1em);
    -moz-backdrop-filter: blur(1em);
    backdrop-filter: blur(1em);
    visibility: hidden;
    opacity: 0;
    transition: .3s
}

#landing_share_popup.show {
    visibility: visible;
    opacity: 1
}

#landing_share_popup>.share_ctrl_off {
    position: absolute;
    inset: 0;
    z-index: 0
}

#landing_share_popup>.inner {
    position: relative
}

#share_popup {
    background: #fff;
    color: #000;
    overflow: hidden;
    position: relative;
    width: min(600px,calc(var(--VWidth) - var(--PageSpacing) * 2));
    box-sizing: border-box;
    border-radius: 1em
}

#share_popup .title {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1em;
    align-items: center;
    margin: 1em 2em
}

#share_popup .title h3 {
    font-size: 1em;
    font-weight: 800;
    text-transform: uppercase;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1em;
    align-items: center;
    opacity: .5
}

#share_popup .title h3::before {
    content: attr(icon);
    display: block;
    font-size: 2em;
    width: 1em;
    height: 1em;
    line-height: 1;
    overflow: hidden
}

#share_popup .title .share_ctrl_off {
    margin-inline-end:-1em}

#share_popup .title .share_ctrl_off:not(:hover) {
    opacity: .5
}

#share_popup .share_content {
    background: rgba(0 0 0/5%);
    overflow: hidden;
    box-shadow: rgb(0 0 0 / 5%) 0 0 0 1px
}

#share_popup .share_content .img {
    position: relative;
    overflow: hidden;
    background: rgba(0 0 0/5%)
}

#share_popup .share_content .img::before {
    content: '';
    display: block;
    padding-top: 52.5%
}

#share_popup .share_content .img img {
    vertical-align: top;
    width: 100%;
    height: auto;
    position: absolute;
    inset: 0;
    z-index: 1;
    margin: auto
}

#share_popup .share_content .info {
    margin: 1.5em 2em
}

#share_popup .share_content .info h3 {
    font-size: 1em;
    font-weight: 800
}

#share_popup .share_content .info h4 {
    font-size: .8em;
    font-weight: inherit;
    opacity: .5
}

#share_popup .share_content .info h3~h4 {
    margin-top: .5em
}

#share_popup .share_btc {
    margin: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2em;
    flex-wrap: wrap;
    text-transform: uppercase
}

.btw2 {
    --CPT-FF: "Manrope", "Arial", "PingFang", system-ui, sans-serif;
    font-size: var(--CPT-FS, 1em);
    font-family: var(--font-family, var(--CPT-FF));
    font-weight: var(--font-weight, 800);
}


#share_popup .share_btc .btw>span {
    padding-inline-start:1em;padding-inline-end:1.5em}

#landing_header {
    --body-theme-color: hsl(357 88% 48%);
    background-color: rgba(0 0 0/80%);
    color: var(--body-theme-color,#fff);
    -webkit-backdrop-filter: blur(2em);
    -moz-backdrop-filter: blur(2em);
    backdrop-filter: blur(2em);
    position: sticky;
    top: 0;
    z-index: 9;
    width: 100%;
}

#landing_header>.inner {
    max-width: 120em;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2em;
    padding: calc(var(--PageSpacing)/ 2) var(--PageSpacing);
    box-sizing: border-box
}

#landing_header .logo {
    margin-inline-end:auto}

#landing_header .logo a {
    display: block;
    --height: 1.5em;
    height: var(--height);
    width: calc(91 / 21 * var(--height));
    color: currentColor
}

#landing_header .logo svg {
    vertical-align: top;
    width: 100%;
    height: 100%
}

#landing_header .logo div {
    display: none
}

#landing_header .share {
    position: relative
}

#landing_header .lang>.btw,#landing_header .share>.btw {
    text-transform: uppercase
}

@media only screen and (max-width: 1000px) {
    #landing_header .lang>.btw>span,#landing_header .share>.btw>span {
        display:block;
        width: 3em;
        height: 3em;
        overflow: hidden
    }
}

@media only screen and (max-width: 480px) {
    #landing_header>.inner {
        gap:1em
    }

    #landing_header .logo a {
        --height: 1.25em
    }
}

#landing_footer>.inner {
    max-width: calc(var(--ContentWidth) + var(--PageSpacing) * 2);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--PageSpacing);
    padding: var(--PageSpacing);
    box-sizing: border-box
}

#landing_footer .trustpilot {
    font-size: 12px;
    margin-inline-end:auto}

#landing_footer .trustpilot-widget {
    --box-shadow-trust: #ffffff80;
    --color-fill-trust: #ffffff1a;
    border-radius: .5em;
    box-shadow: var(--box-shadow-trust) 0 0 0 2px inset;
    background-color: var(--color-fill-trust);
    padding: 1em 0
}

#landing_footer .info {
    text-align: center
}

#landing_footer .sns_list {
    --color-trust: #ffffff;
    font-size: 12px;
    display: flex;
    justify-content: center;
    color: var(--color-trust);
    gap: 4px;
}

/* #landing_footer .sns_list .btw:not(:hover) {
    opacity: .7
} */

#landing_footer .sns_list .btw:hover {
    text-shadow: currentColor 0 0 .25em
}

#landing_footer .copyright {
    font: var(--SiteFS, 12px) / 1.5 var(--SiteFF2), Arial, sans-serif;
    font-size: 14px;
    color: var(--color-trust);
    padding-top: 8px;
}

@media only screen and (max-width: 800px) {
    #landing_footer>.inner {
        grid-template-columns:1fr;
        padding: calc(var(--PageSpacing) * 2) var(--PageSpacing)
    }

    #landing_footer .trustpilot {
        margin: 0 auto
    }
}

#landing_content {
    flex: auto;
}

#landing_content>.content>.inner {
    max-width: 120em;
    margin: 0 auto;
    padding: var(--PageSpacing);
    box-sizing: border-box
}

#landing_content_intro>.inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: min(calc(var(--VHeight) - var(--PageSpacing) - 3em),1080px);
    padding: calc(var(--PageSpacing) * 2) var(--PageSpacing)!important
}

#landing_content_intro hgroup {
    width: 100%;
    max-width: var(--ContentWidth)
}

#landing_content_intro .intro {
    width: 100%;
    max-width: var(--ContentWidth)
}

#landing_content_intro hgroup h1 {
    font-size: 2.5em;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0.5em 0;
    color: #FFFFFF;
}

#landing_content_intro hgroup h2 {
    color: #FFFFFF;
}

#landing_content_intro hgroup h2 {
    font-size: 1.5em;
    font-weight: 800;
    text-transform: uppercase;
    margin: 1em 0
}

#landing_content_intro .intro p {
    opacity: .8;
    font-size: 18px;
    color: #ffffff;
}

#landing_content_intro hgroup, #landing_content_intro .intro {
    max-width: 60em;
}

@media only screen and (max-width: 480px) {
    #landing_content_intro>.inner {
        min-height:unset
    }

    #landing_content_intro hgroup h1 {
        font-size: 1.5em;
        margin: 1em 0
    }

    #landing_content_intro hgroup h2 {
        font-size: 1em;
    }
}

#ItemList_wrp {
    max-width: var(--ContentWidth);
    margin: 0 auto
}

#ItemList_wrp>h3 {
    font-size: 1.5em;
    font-weight: 800;
    margin: 2em 0;
    color: #FFFFFF;
}

.LandingItemList .name {
    color: #FFFFFF;
}

@media only screen and (min-width: 1001px) {
    .LandingItemList {
        display:grid;
        grid-template-columns: repeat(auto-fill,minmax(16.666667em,1fr));
        gap: 2em 1em;
        margin: 2em 0
    }

    .LandingItemList a {
        display: grid;
        grid-template-columns: 120px 1fr;
        gap: 1em;
        color: currentColor;
        border-radius: 12px;
        transition: background .3s
    }

    .LandingItemList a:hover {
        --color-hover-item: #e60f1a1a;
        background-color: var(--color-hover-item);
    }

    .LandingItemList.card a:hover .img {
        transform: scale(.9)
    }

    .LandingItemList.topup a:hover .img {
        transform: scale(.85)
    }

    .LandingItemList a:hover .T {
        transform: scale(.85)
    }

    .LandingItemList .img {
        position: relative;
        background: rgba(255 255 255/5%);
        box-shadow: rgba(255 255 255/10%) 0 0 0 1px,rgba(0 0 0/5%) 0 0 1em;
        border-radius: 12px;
        overflow: hidden;
        transition: .3s
    }

    .LandingItemList.card .img {
        width: 120px;
        height: 160px;
        transform-origin: var(--inline-end,right) center
    }

    .LandingItemList.topup .img {
        width: 120px;
        height: 120px;
        transform-origin: center
    }

    .LandingItemList .img[region]::before {
        --h: 18px;
        position: absolute;
        inset-block-start: 0;
        inset-inline-end: 0;
        margin: 6px
    }

    .LandingItemList .img picture img {
        vertical-align: top
    }

    .LandingItemList .T {
        display: flex;
        flex-direction: column;
        padding: .25em 0;
        word-break: break-word;
        transition: .3s;
        transform-origin: var(--inline-start,left) center
    }

    .LandingItemList .name {
        font-weight: 800
    }

    .LandingItemList .info {
        opacity: .5;
        font-size: .8em;
        margin-top: 1em
    }

    .LandingItemList .info span[icon] {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: .5em
    }

    .LandingItemList .info span[icon]::before {
        content: attr(icon);
        display: block;
        font-size: 1.5em;
        width: 1em;
        height: 1em;
        line-height: 1;
        overflow: hidden
    }

    .LandingItemList .data {
        display: flex;
        flex-wrap: wrap;
        gap: 1em;
        opacity: .5;
        font-size: .8em;
        margin-top: auto
    }

    .LandingItemList .data span[icon] {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: .5em
    }

    .LandingItemList .data span[icon]::before {
        content: attr(icon);
        display: block;
        font-size: 1.5em;
        width: 1em;
        height: 1em;
        line-height: 1;
        overflow: hidden
    }

    .LandingItemList .data[data-sales="0"] {
        display: none
    }
}

@media only screen and (max-width: 1000px) {
    .LandingItemList {
        display:grid;
        grid-template-columns: repeat(auto-fill,minmax(15em,1fr));
        gap: 1em;
        margin: 2em 0
    }

    .LandingItemList a {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 1em;
        align-items: center;
        color: currentColor
    }

    .LandingItemList .img {
        width: 60px;
        height: 60px;
        background: rgba(255 255 255/10%);
        box-shadow: rgba(255 255 255/10%) 0 0 0 1px,rgba(0 0 0/5%) 0 0 1em;
        border-radius: 25%;
        overflow: hidden;
        align-self: flex-start
    }

    .LandingItemList .img[region]::before {
        content: none
    }

    .LandingItemList .img picture img {
        vertical-align: top;
        width: 100%;
        height: 100%
    }

    .LandingItemList .T {
        font-size: 12px
    }

    .LandingItemList .name {
        font-weight: 800
    }

    .LandingItemList .info {
        opacity: .5
    }

    .LandingItemList .data {
        display: none
    }
}

@media only screen and (max-width: 480px) {
    .LandingItemList .img {
        width:48px;
        height: 48px
    }
}

.LandingSkuList {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(16.666667em,1fr));
    gap: 2em;
    margin: 2em 0
}

.LandingSkuList .item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1em;
    color: currentColor
}

.LandingSkuList .img {
    width: 4.5em;
    height: 4.5em;
    border-radius: 25%;
    overflow: hidden;
    background: rgba(255 255 255/5%);
    box-shadow: rgba(255 255 255/10%) 0 0 0 1px,rgba(0 0 0/5%) 0 0 1em;
    align-self: start
}

.LandingSkuList .img>img {
    vertical-align: top;
    width: 100%;
    height: 100%
}

.LandingSkuList .sku {
    font-weight: 800
}

.LandingSkuList .name {
    opacity: .5
}

#GameList_wrp {
    max-width: var(--ContentWidth);
    margin: 0 auto
}

#GameList_wrp>h3 {
    font-size: 1.5em;
    font-weight: 800;
    margin: 2em 0
}

.LandingGameList {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(16.666667em,1fr));
    gap: 2em 1em;
    margin: 2em 0
}

.LandingGameList a {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1em;
    align-items: center;
    color: currentColor;
    border-radius: 12px
}

.LandingGameList .img {
    width: 4.5em;
    height: 4.5em;
    background: rgba(255 255 255/50%);
    box-shadow: rgba(255 255 255/10%) 0 0 0 1px,rgba(0 0 0/5%) 0 0 1em;
    border-radius: 12px;
    overflow: hidden;
    align-self: flex-start
}

.LandingGameList .img[region]::before {
    content: none
}

.LandingGameList .img img {
    vertical-align: top;
    width: 100%;
    height: 100%
}

.LandingGameList .name {
    font-weight: 800
}

.LandingGameList .info {
    opacity: .5;
    font-size: .8em;
    margin-top: .5em
}

.LandingGameList .info span {
    display: inline-block;
    vertical-align: top
}

.LandingGameList .info span~span::before {
    content: ' / ';
    opacity: .5
}

@media only screen and (max-width: 1000px) {
    .LandingGameList {
        grid-template-columns:repeat(auto-fill,minmax(15em,1fr));
        gap: 1em
    }
}

@media only screen and (max-width: 480px) {
    .LandingGameList .img {
        width:48px;
        height: 48px
    }
}

#ItemDescription {
    max-width: var(--ContentWidth);
    margin: 0 auto
}

#ItemDescription>.inner {
    padding-inline-start:3em}

#ItemDescription h3 {
    font-size: 1.5em;
    font-weight: 800;
    margin: 2em 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1em;
    color: #FFFFFF;
}

#ItemDescription h3::before {
    content: '';
    display: block;
    font-size: 1.5em;
    width: 1em;
    height: 1em;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+PHBhdGggZmlsbD0iI2ZmZiIgb3BhY2l0eT0iLjUiIGQ9Ik0zNS4xIDguNmMtOS41IDctMTMuMyAxMi4xLTYuMSAxMy41IDUuNCAxIDQuNyA0LjUgMS4zIDgtMi43IDIuNC04LjEgNS44LTE0LjEgOS4zbDEuNS45TDI0IDQ0bDYuMy0zLjZjNC42LTIuNyA5LTUuMiA5LTEzLjVWMTIuNGMtMS45LS41LTMuNC0xLjktNC4yLTMuOHpNMTUgMzguN2M0LjItNCA3LjMtNy41IDcuNC0xMC45IDAtMi43LTYuOC0uOS02LjMtNS4xLjktNiA5LjQtMTAuNCAxOC43LTE0LjdIMTMuMWMtLjYgMi4xLTIuMyAzLjgtNC40IDQuNHYxNC40YzAgNi43IDIuOCA5LjcgNi4zIDExLjl6Ii8+PC9zdmc+);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain
}

#ItemDescription h3~:not(h3) {
    margin-inline-start:calc(1.5em * 2.5)}

#ItemDescription p {
    margin: 1em 0;
    color: #FFFFFF;
}

#ItemDescription a {
    color: currentColor;
    font-weight: 700;
    text-decoration: underline
}

#ItemDescription b {
    font-weight: 800
}

#ItemDescription ul {
    margin: 1em 0
}

#ItemDescription ul>li {
    margin: 1em 0;
    list-style: disc outside
}

#ItemDescription ol {
    margin: 1em 0
}

#ItemDescription ol>li {
    margin: 1em 0;
    list-style: decimal outside
}

#ItemDescription .img {
    margin-top: 1em;
    margin-bottom: 1em
}

#ItemDescription .img img {
    vertical-align: top;
    min-width: 10em;
    max-width: min(50em,100%);
    max-height: 40em;
    border-radius: 1em;
    background: rgba(255 255 255/50%);
    box-shadow: rgba(255 255 255/10%) 0 0 0 1px,rgba(0 0 0/5%) 0 0 1em
}

@media only screen and (max-width: 480px) {
    #ItemDescription h3 {
        grid-template-columns:1fr;
        margin: 1.5em 0;
        font-size: 18px;
    }

    #ItemDescription h3~:not(h3) {
        margin-inline-start:0;
        font-size: 14px;
    }

    #landing_content_intro .intro p {
        font-size: 12px;
    }

    #ItemDescription ol>li,#ItemDescription ul>li {
        margin-inline-start:1.5em}
}

.ItemDescription_swiper {
    margin-top: 2em;
    margin-bottom: 2em;
    position: relative
}

.ItemDescription_swiper>.swiper {
    touch-action: pan-y;
    overflow: hidden
}

.ItemDescription_swiper .swiper-wrapper {
    display: flex;
    align-items: flex-start
}

.ItemDescription_swiper .swiper-slide {
    flex: none;
    max-width: min(40em,100%)
}

.ItemDescription_swiper .img {
    margin: 0!important
}

.ItemDescription_swiper .img>img {
    vertical-align: top;
    max-width: 100%;
    height: auto
}

.ItemDescription_swiper p {
    margin: 1em!important;
    opacity: .5
}

.ItemDescription_swiper .swiper-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    inset-inline: 0;
    inset-block-start: 50%;
    z-index: 1;
    height: 0;
    margin: -1.5em
}

html[lang^=ar] [icon-only=navigate_before]::before,html[lang^=ar] [icon-only=navigate_next]::before {
    transform: scaleX(-1)
}

#ItemNews {
    max-width: var(--ContentWidth);
    margin: 2em auto
}

#ItemNews>h3 {
    font-size: 1.5em;
    font-weight: 800;
    margin: 2em 0;
    color: #FFFFFF;
}

#ItemNews ul {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(18em,1fr));
    gap: 1.5em
}

#ItemNews ul a {
    display: block;
    color: currentColor
}

#ItemNews ul a:hover .img img {
    transform: scale(calc(1 / .95))
}

#ItemNews .img {
    overflow: hidden;
    border-radius: 1em
}

#ItemNews .title {
    font-size: 18px;
}

#ItemNews .img img {
    vertical-align: top;
    width: 100%;
    height: 100%;
    aspect-ratio: 2/1;
    object-fit: cover;
    transition: transform .3s
}

#ItemNews .title {
    margin: 1em 0;
    color: #FFFFFF;
}

@media only screen and (max-width: 480px) {
    #ItemNews {
        margin:0
    }

    #ItemNews>h3 {
        margin: 1em 0;
        font-size: 18px;
    }

    #ItemNews .title {
        font-size: 14px;
    }

    #ItemNews ul {
        display: flex;
        overflow: hidden;
        overflow-x: auto;
        margin: 0 calc(var(--PageSpacing) * -1);
        padding: 0 var(--PageSpacing);
        gap: var(--PageSpacing);
        -webkit-overflow-scrolling: touch;
        scrollbar-color: transparent;
        scrollbar-width: none;
        scroll-snap-type: x mandatory
    }

    #ItemNews ul::-webkit-scrollbar {
        height: 0;
        width: 0;
        display: none
    }

    #ItemNews ul>li {
        flex: none;
        width: min(30em,calc(var(--VWidth) - var(--PageSpacing) * 4));
        scroll-snap-align: center
    }
}
.tp-logo__text {
    --color-trust: #ffffff;
    color: var(--color-trust);
}