:root {
    --mainRed:#d72333;
    --darkRed:#af3842;
    --lightRed:#f70034;
    --mainDark:#3c3c3c;
    --dark:#000;
    --light:#fff;
    --lightGreen:#c5ff52;
    --selectGreen:#dbff67;
    --lightboxGreen:rgb(229 247 201);
    --lightboxPurple:#7d2eff;
    --lightboxbgPurple:#f4eeff;
    --lightPurple:#ebdefd;
    --borderPurple:#d1b4ff;
    --selectPurple:#f1e6ff;
    --weekSelect:#fefffa;
    --more-lightgreen:#fefffa;
    --more-lightpurple:#fbf8ff;
    --lightGray:#f5f5f7;
    --green-gradient: linear-gradient(to right, #b1ff29 60%, #fdfe44);
    --scrollbar:#d2d2d2;
    --scrollbarHover:#aeaeae;
    --header:#f7f7f7;
    --top1: linear-gradient(to right, #fde4a0 30%, #fdf7cf 80%);
    --top2: linear-gradient(to right, #c9cee4 30%, #f6f9ff 80%);
    --top3: linear-gradient(to right, #f7d3ba 30%, #fff7ee 80%);
    --top3-inf: linear-gradient(to top, #515151 0%, #b6b6b6 100%);
    --list-background: #f9f9fc;
    --hide-area-bac:#dbdbdb;
    --input-border:#6e6e6e;
    --symbol:22px;
}


/* -----SCROLL_BAR----- */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

/* Track */
::-webkit-scrollbar-track {
    background: rgb(204 204 204 / 0%);
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--scrollbar);
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbarHover);
    cursor: pointer;
}

@media screen and (max-width:767px){
    ::-webkit-scrollbar {
        width: 3px;
        height: 3px;
    }
    
    ::-webkit-scrollbar-thumb,
    ::-webkit-scrollbar-thumb:hover{
        background: #cdcdcd69;
    }
}



/* ----- BOX ----- */

.box-1440{
    width: clamp(1100px, 90dvw, 1380px);
    margin: 0 auto;
}

@media screen and (max-width:1200px){
    .box-1440{
        width:100%
    }
}

.box-1165{
    width: clamp(1160px, 90dvw, 1165px);
    margin: 0 auto;
}

.d-block{
    display: block;
}

.flex-center{
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox; 
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.flex-start{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: start;
}

.flex-end{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; 
    justify-content: flex-end;

}

.flex-column{
    -webkit-box-orient: vertical;
    flex-direction: column;
        -webkit-flex-direction: column; 
            -ms-flex-direction: column; 
                -moz-flex-direction: column; 
                    -o-flex-direction: column; 

}

.flex-row {
    -webkit-box-orient: vertical; 
    flex-direction: row;
        -webkit-flex-direction: row; 
            -ms-flex-direction: row; 
                -moz-flex-direction: row; 
                    -o-flex-direction: row; 
}


/* ----- HEADER ----- */

.logo{
    width: 122px;
    display: flex;
    align-items: center;
    z-index: 10;
}

@media screen and (max-width:1200px){
    .logo{
        width: 100px;
    }
}

.header{
    height: 100%;
    margin: 0 auto;
}

.link_esb{
    z-index:1
}

.header-top{
    height: 84px;
    display: grid;
    grid-template-columns: 1fr 6fr;
    z-index: 2;
    position: relative;
}

@media screen and (max-width:1200px){
    .header-top-btn,
    .nav-btn{
        display:none
    }

    .header-top{
        height:60px;
        width: 90dvw;
    }
}

.top-btn-wrap{
    display: flex;
}

.btn-icon,
.logout-btn{
    text-align: center;
    cursor: pointer;
    position: relative;
}

.icon{
    position:relative
}

.link-wrap a{
    font-size:1.125rem;
    color:var(--dark);
    padding: 0 8px;
    margin-right: 1.25rem;
    position:relative;
    display: flex;
    align-items: center;
    z-index: 0;
    inset: 0;
    transition:all .2s;
}

@media screen and (max-width:1240px){
    .link-wrap a{
        margin-right: 1rem;
    } 
}

.link-wrap a:last-child{
    margin-right: 2rem;
}

.link-wrap p{
    z-index:1
}

.link-wrap .top-btn::before{
    margin-right:6px;
    z-index: 1;
}

.link-wrap .login-btn::before,
.login-mobile .login-btn::before{
    content:url('../images/public/login.webp');
}

.link-wrap .logout-btn::before{
    content:url('../images/public/logout.webp');
}

.link-wrap .register::before,
.login-mobile .register::before{
    content:url('../images/public/register.webp');
}

.link-wrap .service::before{
    content:url('../images/public/service.webp');
}

.top-btn.hovering::after{ 
    opacity:1; 
}

#nav{
    position: relative;
}

#nav::before {
    content:"";
    position:absolute;
    left:0;
    top:50%;
    width:var(--w);
    height: 34px;
    transform:translate(var(--tx), -50%);
    border-radius:999px;
    background-image: linear-gradient(90deg, #b1ff29 0%,#fdfe44 30%, #b1ff29 100%);
    transition:transform .42s cubic-bezier(.22,1,.36,1),
                width .42s cubic-bezier(.22,1,.36,1),
                opacity .2s ease;
    z-index:0;
    opacity:0;
    pointer-events:none;
    animation: slidebg 5s linear infinite alternate;
}

#nav.hovering::before {
    opacity: 1;
}

@keyframes slidebg {
     to {
        background-position:15vw;
      }
}

.mobile{
    display:none
}

@media (max-width: 1200px) {
    .mobile {
        display:block;
    }
}

.d-flex{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.page-wrap a p{
    margin:0 4px
}

.page-wrap{
    margin-right: 2rem;
}

.page-wrap-box{
    display: flex;
    align-items: center;
    border-radius: 30px;
    border: 1px solid #8b8b8b;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 3px 5px rgb(0 0 0 / 25%)
}

.page-highlight{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:0;
    border-radius:30px;
    background-image: linear-gradient(90deg, #b1ff29 0%,#fdfe44 30%, #b1ff29 100%);
    background-position: right center;
    border:2px solid #baf101;
    transition: 
        left .42s cubic-bezier(.22,1,.36,1),
        width .42s cubic-bezier(.22,1,.36,1),
        background-position .42s cubic-bezier(.22,1,.36,1),
        opacity .25s ease;
    opacity:0;
    z-index:0;
    animation: slidebg 5s linear infinite alternate;
}

.page-wrap-box.is-hover .page-highlight{
    opacity:1;
}

.page-btn {
    width: 228px;
    border-radius:30px;
    font-size: 1.25rem;
    display:flex;
    align-items:center;
    justify-content: center;
    line-height: 43px;
    position: relative;
    padding: 0px 18px;
    white-space: nowrap;
    cursor: pointer;
    color: #999;
    font-weight: 600;
    z-index: 1;
    text-decoration: none;
    transition: color .2s ease;
}

.page-wrap-box.is-hover .page-btn.is-on,
.page-btn.is-on.active{
    color:#111;
}

.page-btn.is-on:not(.active) {
    color: #999;
}

.page-wrap-box.is-hover::before{
    width: var(--w);
    opacity: 1;
}

.page-rank::before,
.page-rank.page-btn.active:not(.is-on)::before{
    content:url('../images/public/trophy-n.webp')
}

.page-rank:hover::before,
.page-rank.active::before{
    content:url('../images/public/trophy-h.webp')
}

.page-game::before,
.page-game.page-btn.active:not(.is-on)::before{
    content:url('../images/public/3d-n.webp')
}

.page-game:hover::before,
.page-game.active::before{
    content:url('../images/public/3d-h.webp')
}

.page-rank:hover::after,
.page-game:hover::after{
    opacity:0
}


/* -----mobile----- */

.mobile_buger{
    width: 30px;
    height: 30px;
    position: absolute;
    right: 21px;
    top: 20px;
    bottom: 0;
    left: inherit;
    cursor: pointer;
    border: 3px solid #d6282600;
}

.mobile_buger.active{
    top: 15px;
}

.mobile_buger li{
    width: 26px;
    height:3px;
    background-color:var(--mainDark);
    transition:all .5s;
    position: absolute;
    right: 0;
    left: 0;
    border-radius:10px
}

.mobile_buger li:nth-child(2){
    top: 8px;
}

.mobile_buger li:nth-child(3){
    top: 16px;
}

.mobile_buger.active li:nth-child(1){
    
    transform:rotate(45deg);
    top: 11px;
    left: 4px;
}

.mobile_buger.active li:nth-child(2){
    opacity:0;
    display:none
}

.mobile_buger.active li:nth-child(3){
   
   transform:rotate(-45deg);
   top: 11px;
   left: 4px;
}

.mobile_btn{
    position: absolute;
    width:100%;
    height: calc( 100dvh - 60px );
    top: 60px;
    background: rgb(0 0 0 / 75%);
    display: flex;
    justify-content: flex-end;
    overflow: hidden;
    opacity:0;
    visibility:hidden;
    transition: all .2s;
}

.mobile_btn.active{
    opacity:1;
    visibility:visible
}

.mobile-link{
    min-width: 270px;
    width: 40dvw;
    height: 100%;
    background-color:var(--header);
    transform: translateX(40dvw);
    transition: all .3s;
    padding: 20px 1rem 65px 1rem;
    overflow-y: auto;
    overflow-x: hidden;
    -ms-overflow-style: none;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.mobile_btn.active .mobile-link{
     transform: translateX(0px);
}

.mobile_btn::-webkit-scrollbar{
    width:0
}

.mobile_nav{
    display:none;
}

.mobile_btn img{
    width:20px;
    margin: 0 5px;
}

.mobile_btn a{
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    color: var(--mainDark);
    line-height: 50px;
    font-weight: 600;
    font-size: 17px;
    background-color: #fff;
    border-radius: 10px;
    margin-bottom: 5px;
}

.mobile_btn a::before{
    content: "";
    position: relative;
    display: block;
    z-index: 1;
    margin-right: 5px;
    background-repeat: no-repeat;
}

.mobile_btn .service_link::before{
    content:url('../images/public/service.webp');
}

.mobile_btn .service_spare_link::before{
    content:url('../images/public/service-spare.webp');
}

.mobile_btn .tg_e_link::before{
    content:url('../images/public/tg-e-link.webp');
}

.mobile_btn .app_link::before{
    content:url('../images/public/app-link.webp');
}

.mobile_btn .five-leagues::before{
    content:url('../images/public/five-leagues.webp');
}

.mobile_btn .duogold-ranking::before{
    content:url('../images/public/trophy-h.webp')
}

.mobile_btn .duogold-game::before{
    content:url('../images/public/3d-m.webp')
}

.mobile_btn .point-center::before{
    content:url('../images/public/point-center.webp')
}

.mobile_btn .link_esb::before{
    content:url('../images/public/3d-h.webp')
}

.mobile_btn .logout-btn::before{
    content:url('../images/public/logout.webp')
}

.mobile_btn .login-btn::before{
    content:url('../images/public/login.webp')
}

.mobile_btn .register::before{
    content:url('../images/public/register.webp')
}

.mobile_btn .login-btn,
.mobile_btn .register{
    background: linear-gradient(90deg, #b1ff29 0%,#fdfe44 30%, #b1ff29 100%);
    background-position: left right;
    opacity:1;
    z-index:0;
    animation: slidebg 2s linear infinite alternate;   
}

.mobile_btn .logout-btn{
    background:#d7d7d7
}


/* ----- fix-menu ----- */

.fix-menu {
    max-width: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top:35%;
    right: 5px;
    z-index: 1;
    flex-wrap: wrap;
}

.fix-menu > ul > li {
    margin-bottom: 7px;
    position: relative;
}

.fix-menu > ul > li > a {
    border-radius: 10px;
    width: 70px;
    height: 70px;
    background: #4D4D4D;
    background: radial-gradient(circle, rgb(69 69 69) 0%, rgb(135 135 135) 100%);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    font-weight: bold;
}

.fix-menu > ul > li > a p {
    font-size: 0.8em;
}

.fix-menu > ul > li:hover p {
    color:var(--lightGreen)
}

.fix-menu > ul > li:hover .drop-menu p {
    color:var(--dark)
}

.fix-menu > ul > li .drop-menu p:hover  {
    color:#7baf0a
}

.fix-menu > ul > li .drop-menu {
    display: none;
    padding: 0 28px 100px 0;
    position: absolute;
    top: 0;
    right: 52px;
}

.fix-menu > ul > li .drop-menu ul {
    border-radius: 5px;
    border: 2px var(--lightGreen) solid;
    background: #f5f5f7;
    min-width: 183px;
    display: flex;
    flex-direction: column;
    grid-gap: 15px;
    padding: 15px;
}

.fix-menu > ul > li .drop-menu ul li {
    font-size: 13px;
}

.fix-menu > ul > li .drop-menu ul li a {
    display: flex;
    color: #535353;
    align-items: center;
    grid-gap: 8px;
}

.fix-menu > ul > li .drop-menu ul li a img{
    width:20px
}

.fix-menu > ul > li .drop-menu ul li .qr {
    display: none;
    padding: 5px 0 0 23px;
    position: relative;
}

.fix-menu > ul > li .drop-menu ul li .qr p {
    color: white;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.fix-menu > ul > li .drop-menu ul li:hover .qr {
    display: block;
}

.fix-menu > ul > li .drop-menu:before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5.5px 0 5.5px 8px;
    border-color: transparent transparent transparent var(--lightGreen);
    display: block;
    position: absolute;
    top: 30px;
    right: 20px;
}

.fix-menu > ul > li:hover .drop-menu {
    display: block;
}

.fix-menu .service::after{
    content:url('../images/public/right_m_icon01_h.png');
    display:none;
}

.fix-menu .promotion::after{
    content:url('../images/public/right_m_icon06_h.png');
    display:none;
}

.fix-menu .link-discount::after{
    content:url('../images/public/right_m_icon02_h.png');
    display:none;
}

.fix-menu .app-icon::after{
    content:url('../images/public/right_m_icon03_h.png');
    display:none
}

.fix-menu .collect::after{
    content:url('../images/public/right_m_icon04_h.png');
    display:none
}

.fix-menu > ul > li:hover ::after{
    display:block
}

.fix-menu > ul > li:hover a.main-btn img{
    display:none
}

.mobile-home{
    display:none
}

@media screen and (max-width:1200px){

    .fix-menu > ul {
        display: none;
    }

    .fix-menu{
        top: initial;
        bottom: 80px;
    }

    header{
        height: 60px;
    }

    .pc_nav{
        display: none;
    }
    
    .mobile_nav{
        width: 100vw;
        height: 60px;
        position: fixed;
        right: 0;
        font-size: 17px;
        display: flex;
        top: 0;
        border-bottom: 1px solid var(--body);
        z-index: 7;
        justify-content: flex-end;
    }

    .mobile-home{
        display:flex;
        width: 35px;
        margin-right:64px
    }

    .pc{
        display:none
    }
}