/* text */
.tx-ct{font-size:16px;font-weight:300;line-height:1.4;}
.tx-ft{font-size:12px;font-weight:300;line-height:1.2;}
.tx-center{text-align:center !important;}
.tx-left{text-align:left !important;}
.tx-right{text-align:right !important;}
.upercase{text-transform:uppercase;}
.indent{text-indent:5vw}
.tx-i{font-style: italic;}

.tx-black{color:#000}
.tx-white{color:#fff}

.topic-xxx{font-size:40px;font-size:clamp(46px, 4vw, 66px);}
.topic-xx{font-size:28px;font-size:clamp(30px, 3vw, 50px);}
.topic-xl{font-size:25px;font-size:clamp(26px, 3vw, 46px);}
.topic-x{font-size:22px;font-size:clamp(22px, 2vw, 34px);}
.topic-m{font-size:18px;font-size:clamp(16px, 1.2vw, 24px);}
.topic-s{font-size:16px;font-size:clamp(16px, 1.1vw, 18px);}

/* button color */
.btn-blue{background:var(--blue1) !important;}
.btn-green{background:var(--green1) !important;}
.btn-red{background:var(--red1) !important;}
.btn-yellow{background:var(--yellow1) !important;}
.btn-blue:hover,.btn-green:hover,.btn-red:hover,.btn-yellow:hover{background:var(--white1)!important;}

/* button */
.btn-1{width: auto;padding:5px .5rem;color:var(--white1);background:var(--tem8);border-radius:6px;font-size:.8rem;line-height: 1;font-weight:400;}
.btn-1:hover{color:var(--white1);background:var(--tem1);}

.btn-addline{width: auto;padding:.25rem .75rem;color:var(--white1);background:var(--bgline);border-radius:6px;font-size:1rem;line-height: 1;font-weight:400;border:1px solid var(--bgline);}
.btn-addline:hover{background:var(--bglineup);}

.btn-line{padding:.25rem .5rem;color:var(--white1);background:var(--bgline);border-radius:4px;font-size:.75rem;line-height: 1;font-weight:500;border:1px solid var(--bgline);}
.btn-line:hover{background:var(--bglineup);color:#1bc208;}
.btn-line2{padding:.5rem 1rem;color:var(--white1);background:var(--bgline);border-radius:4px;font-size:1.2rem;line-height: 1;font-weight:500;border:1px solid var(--bgline);text-align:center;}
.btn-line2:hover{background:var(--bglineup);color:#1bc208;}

.btn-fb{width: auto;padding:.25rem .75rem;color:var(--white1);background:var(--bgfb);border-radius:6px;font-size:1rem;line-height: 1;font-weight:400;border:1px solid var(--bgfb);}
.btn-fb:hover{background:var(--bgfbup);}

.btn-close{position:absolute;top:0;right:0;}
.btn-close:after{content:"X";display:flex;justify-content:center;align-items:center;width:24px;height:24px;text-align:center;line-height:16px;font-size:14px;background:#000;color:#fff;}

.btn-top-link{width: auto;padding:.25rem .75rem;color:var(--white1);background:var(--tem1);border-radius:2rem;font-size:1.1rem;line-height: 1;font-weight:400;}
.btn-top-link:hover{background:var(--tem5);color:var(--tem1);}

.season-container {
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 8px;
    background-color: #1a1a1a;
}

.season-header {
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    background-color: #1E90FF;
    padding: 12px;
    margin-bottom: 10px;
    border-radius: 5px;
    text-align: center;
}

.pgi-list-box {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.pgi-list-item {
    display: flex;
    align-items: center;
    padding: 10px;
    background: #2c2c2c;
    border-radius: 5px;
    color: #fff;
    text-decoration: none;
    transition: background 0.3s;
}

.pgi-list-item:hover {
    background: #3d3d3d;
}

.epi-list-item-num {
    font-weight: bold;
    margin-right: 8px;
    color: #1E90FF;
}

.epi-list-item-tx {
    flex-grow: 1;
}

.season-container {
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 8px;
    background-color: #1a1a1a;
}

.season-header {
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    background-color: #1E90FF;
    padding: 12px;
    margin-bottom: 10px;
    border-radius: 5px;
    text-align: center;
}

.ep-list-box {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.ep-list-btn {
    display: flex;
    align-items: center;
    padding: 10px;
    background: #2c2c2c;
    border-radius: 5px;
    color: #fff;
    text-decoration: none;
    transition: background 0.3s;
    cursor: pointer;
}

.ep-list-btn:hover {
    background: #3d3d3d;
}

.active-ep {
    background: #1bc208 !important;
    font-weight: bold;
}

/* section*/
.main-page{width:100%;max-width:100%;display:grid;grid-template-columns:1fr;padding:2rem;grid-gap:1rem;}
.maxcol{max-width:var(--maxcol);margin: auto;}

.section-area{display:grid;grid-gap:1rem;margin:0 auto;padding:1rem;}
.topic-sec{display:flex;justify-content:space-between;align-items:baseline;}
.section-ct{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;row-gap: 1rem;}


/* card item */
.card-item{display:grid;width:100%;max-width:clamp(180px, 16vw, 19%);grid-gap:8px;}
.card-item-in{display:grid;width:100%;}
.card-cover{display:grid;overflow:hidden;border-radius:8px;width:100%;background:var(--black1);margin:auto;}
.card-cover img{object-position: center;object-fit: cover;aspect-ratio:6 / 9;filter: grayscale(20%) brightness(95%);}
.bg-ft-card{width:100%;height:50%;position:absolute;left:0;bottom:0;background:var(--gar1);}
.card-info{width:100%;height:100%;display:grid;position:absolute;left:0;top:0;}
.tag-area{position:absolute;left:8px;top:8px;display:flex;flex-wrap:wrap;gap:8px;}
	.tag-card{display:flex;font-size:14px;color:white;background:var(--tem3);border-radius:16px;padding:3px 12px;line-height:1;}
	.tag-card:hover{color:white;background:var(--tem5);}
.sub-info{position:absolute;right:8px;bottom:8px;display:grid;grid-gap:4px;}
.sub-type{display:flex;font-size:14px;color:white;background:var(--black80);border-radius:3px;padding:3px;line-height:1;text-align:right;}
.info-year{display:grid;font-size:20px;font-size:var(--font-x);color:white;text-align:right;line-height:1;}
.info-year:before{content:"year";font-size:12px;}

.play-icon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;justify-content:center;align-items:center;width:0px;height:0px;opacity:0;-webkit-transition:all 0.3s;transition:all 0.3s;}
.card-item-in:hover .play-icon{width:80px;height:80px;opacity:1;}
.card-item-in:hover .card-cover img{filter: grayscale(0%) brightness(110%);}
.card-item-in:hover .card-cover{box-shadow:0 4px 16px rgb(8 45 120 / 35%);}

.card-name{font-size:14px;font-size:clamp(14px, 1vw, 20px);color:var(--tem3);display: -webkit-box;-webkit-line-clamp:2;-webkit-box-orient: vertical;overflow: hidden;line-height:1;}



/* section-rank */
.section-rank{width:100%;display:grid;grid-template-columns:1fr 1fr;grid-gap:1rem;}

.rank-card{display:grid;grid-template-columns:160px 1fr auto;align-items:center;padding:1rem;gap:8px;background:white;border-radius:8px;box-shadow:0 4px 16px rgb(8 45 120 / 10%);}
.rc-cover{display:grid;overflow:hidden;border-radius:8px;width:100%;background:var(--black1);margin:auto;}
.rc-cover img{object-position: center;object-fit: cover;aspect-ratio:6 / 9;filter: grayscale(20%) brightness(95%);}
.rc-info{width:100%;display:grid;grid-gap:8px;padding:1rem;border-right:1px solid #eaeaea;}
.rc-info p{font-size:16px;line-height:1.2;}
	.rc-name{font-size:14px;font-size:clamp(16px, 1.4vw, 30px);color:var(--black1);display: -webkit-box;-webkit-line-clamp:3;-webkit-box-orient: vertical;overflow: hidden;line-height:1;}
	.rc-sub-type{display:flex;max-width: fit-content;font-size:14px;color:white;background:var(--black80);border-radius:3px;padding:4px 6px;line-height:1;}
	.rc--year{display:flex;flex-wrap:wrap;font-size:20px;font-size:var(--font-s);color:var(--tem3);line-height:1;align-items:baseline;}
	.rc--year:before{content:"year";padding-right:4px;color:var(--tem2);}
	.rc-tag{display:flex;flex-wrap:wrap;gap:8px;}
.rc-btn{width:100%;display:grid;}
.btn-card-link{width:100%;display:grid;justify-content:center;justify-items:center;align-items:center;}

.rank-num{width:45px;height:45px;display:grid;justify-content:center;align-items:center;position:absolute;left:0px;top:0px;border-radius:3rem;background:gray;font-size:20px;text-align:center;font-weight:600;line-height:1;padding:4px;}
.section-rank .rank-card:nth-child(1) .rank-num{background:gold;}
.section-rank .rank-card:nth-child(2) .rank-num{background:silver;}
.section-rank .rank-card:nth-child(3) .rank-num{background:lightcoral;}
.section-rank .rank-card:nth-child(4) .rank-num{background:burlywood;}
.section-rank .rank-card:nth-child(5) .rank-num{background:aliceblue;}


/* page info */
.page-info-box1{width:100%;display:grid;grid-template-columns:35% 1fr;grid-gap:2rem;margin:auto;padding:2rem;}
.pg-info-cover{display:grid;overflow:hidden;border-radius:8px;width:100%;background:var(--black1);margin:auto;}
.pg-info-cover img{object-position: center;object-fit: cover;aspect-ratio:6 / 9;}
.pg-info-content{width:100%;display:grid;grid-gap:1rem;align-content:end;}
.pgi-btnplay{max-width: max-content;display:flex;padding:1rem;background:var(--tem3);align-items:center;justify-content:center;border-radius:8px;}
.pgi-btnplay span{font-size:26px;font-size:var(--font-xxx);color:#fff;}
.pgi-btnplay:hover{background:var(--tem5);}
.pgi-name{}
.pgi-tag{display:flex;flex-wrap:wrap;gap:8px;}
.pgi-story{width:100%;display:grid;padding:2rem;border-radius:16px;background:white;box-shadow:0 4px 16px rgb(8 45 120 / 10%);}
.pgi-story p{font-size:16px;}


.page-info-box2{width:100%;display:grid;grid-template-columns:1fr;grid-gap:8px;margin:auto;padding:2rem;}
.pgi-epi-topic{width:100%;display:flex;flex-wrap:wrap;}
	.pg-epi-topic1{font-size:20px;}
	.pg-epi-topic2{font-size:20px;font-weight:600;}
	.pg-epi-topic2:before{content:"จำนวน";padding-right:4px;font-weight:400;}
	.pg-epi-topic2:after{content:"ตอน";padding-left:4px;}

.pgi-list-box{width:100%;display:flex;flex-wrap:wrap;justify-content: center;grid-gap:8px;padding:1rem;background:var(--tem1);border-radius:8px;}
.pgi-list-item{width:max-content;display:grid;background:white;grid-template-columns:auto 1fr auto;align-items:center;}
.epi-list-item-num{display:grid;padding:8px;min-width:60px;color:white;background:var(--tem5);font-size:24px;text-align:center;font-weight:600;line-height:1;}
.epi-list-item-tx{padding:8px;color:var(--tem1);font-size:16px;}
.epi-list-item-icon{padding:3px 6px;}
.pgi-list-item:hover{background:var(--tem3);}
.pgi-list-item:hover .epi-list-item-num{background:var(--tem3);}
.pgi-list-item:hover .epi-list-item-tx{color:#fff;}

/* page navigation */
.pagination-row{width:100%;display:flex;}
.pagination {
	width:100%;
    display: flex;
    gap: 8px;
	justify-content:center;
	margin:2rem auto;
	padding: 2rem;
    border-top: 1px solid #ececec;
}

.pagination a {
    text-decoration: none;
    color: #1b3abc;
    font-weight: 500;
    padding: 4px 8px;
    transition: all 0.3s ease;
}

.pagination a:hover {
    background-color: #1E3A8A;
    color: white;
}

.pagination a.active {
    background-color: #1b3abc;
    color: white;
}

.pagination a.prev,
.pagination a.next {
    font-weight: bold;
}


/* breadcrumb */
.breadcrumb-box{width:100%;display:flex;padding:.5rem 1rem;border-bottom:1px solid #ececec;background:var(--white1);}
.breadcrumb {
    display: flex;
    align-items: center;
    font-size: 16px;
	margin:0 !important;
}

.breadcrumb a {
    text-decoration: none;
    color: #1E3A8A;
    font-weight: 500;
}

.breadcrumb a.active {
    color: #64748B;
}

.separator {
    width: 12px;
    height: 12px;
    stroke: #64748B;
    margin: 0 8px;
}


/* page Player */
.page-ct-box{width:100%;display:grid;grid-template-columns:1fr 250px;grid-gap:2rem;margin:1rem auto;}

.player-box{width:100%;display:grid;}
.video-fullsize{width:100%;display:grid;background:var(--black2);aspect-ratio: 16 / 9;}

.player-report{width:100%;display:flex;flex-wrap:wrap;gap:8px;padding:.5rem 1rem;background:#000;margin-bottom:2rem;justify-content: flex-end;}

.video-info{width:100%;display:grid;}

.video-info .rank-card{grid-template-columns: 250px 1fr auto;}

.my-video-dimensions{width: 100% !important;height: 100% !important;aspect-ratio: 16 / 9  !important;}


/* Video JS */
.video-js.vjs-1-1:not(.vjs-audio-only-mode), .video-js.vjs-16-9:not(.vjs-audio-only-mode), .video-js.vjs-4-3:not(.vjs-audio-only-mode), .video-js.vjs-9-16:not(.vjs-audio-only-mode), .video-js.vjs-fluid:not(.vjs-audio-only-mode){height:100% !important;}
.my-video-dimensions.vjs-fluid:not(.vjs-audio-only-mode){padding:0 !important;}
.video-js .vjs-tech {position: relative !important;top: auto !important;left: auto !important;width: 100% !important;height: auto !important;aspect-ratio: 16 / 9;}

.video-js .vjs-big-play-button .vjs-icon-placeholder:before, .video-js .vjs-modal-dialog, .vjs-button>.vjs-icon-placeholder:before, .vjs-modal-dialog .vjs-modal-dialog-content{position:relative !important;}

.video-js .vjs-big-play-button .vjs-icon-placeholder:before, .video-js .vjs-play-control .vjs-icon-placeholder, .vjs-icon-play,
.video-js .vjs-picture-in-picture-control .vjs-icon-placeholder, .vjs-icon-picture-in-picture-enter,
.video-js .vjs-fullscreen-control .vjs-icon-placeholder, .vjs-icon-fullscreen-enter,
.video-js .vjs-mute-control .vjs-icon-placeholder, .vjs-icon-volume-high
{font-family: VideoJS !important;}


/* side box */
.aside-box{width:100%;display:grid;grid-gap:1rem;align-content: start;}

.side-widget{width:100%;display:grid;grid-template-columns:1fr;grid-gap:8px;border-radius:4px;align-items:center;background:#fff;}
.widget-spons{width:100%;display:grid;margin:auto;max-width:300px;}

.ep-area{width:100%;display:grid;grid-gap:8px;margin:2rem auto;}
.ep-name{width:100%;display:flex;line-height:1.2;padding-bottom:.5rem;}
	.ep-side-list{display:flex;flex-wrap:wrap;width:100%;gap:8px;justify-content:center;padding:1rem 8px;border-radius:8px;background:var(--tem6);}
	.ep-list-btn{width:100%;max-width:clamp(40px, 2.5vw, 16%);padding:6px 3px;background:var(--tem3);color:#fff;justify-content:center;align-items:flex-start;font-size:14px;text-align:center;font-weight:600;line-height:1;}
	.ep-list-btn:hover{background:var(--tem5);}
	.ep-list-topic{width:100%;display:grid;color:#fff;font-size:16px;}


.side-popular{width:100%;display:grid;grid-gap:1rem;}
.side-list-rank{width:100%;display:grid;grid-template-columns:80px 1fr;grid-gap:8px;border-radius:4px;align-items:center;background:#fff;}
.srk-cover{width:100%;display:grid;overflow:hidden;border-radius:4px;background:#fff;box-shadow:0 4px 16px rgb(8 45 120 / 10%);}
.srk-cover img{object-position: center;object-fit: cover;aspect-ratio:6 / 8;}
.srk-info{width:100%;display:grid;}
.srk-name{font-size:14px;font-size:clamp(16px, .8vw, 18px);color:var(--black1);display: -webkit-box;-webkit-line-clamp:4;-webkit-box-orient: vertical;overflow: hidden;line-height:1;}

.side-rank{width:25px;height:25px;display:grid;justify-content:center;align-items:center;position:absolute;right:0px;top:-8px;border-radius:3rem;background:gray;font-size:12px;text-align:center;font-weight:600;line-height:1;padding:4px;}
.side-list-rank:nth-child(2) .side-rank{background:gold;}
.side-list-rank:nth-child(3) .side-rank{background:silver;}
.side-list-rank:nth-child(4) .side-rank{background:lightcoral;}
.side-list-rank:nth-child(5) .side-rank{background:burlywood;}
.side-list-rank:nth-child(6) .side-rank{background:aliceblue;}

.side-list-rank:hover{color:var(--tem1) !important;box-shadow:0 6px 16px rgb(50 99 151 / 18%);}
.side-list-rank:hover .srk-name{color:var(--tem3);}

/* button report */
.report-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background-color: #DC2626;
    color: #FFFFFF;
    font-weight: bold;
    text-decoration: none;
    font-size: 14px;
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 
                0 2px 4px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.report-btn svg {
    stroke: #FFFFFF;
}
.report-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 120%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 80%);
    transform: translateX(-50%) translateY(-80%);
    transition: transform 0.3s ease;
}
.report-btn:hover {
    background-color: #B91C1C;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 
                0 4px 6px rgba(0, 0, 0, 0.3);
}
.report-btn:hover::before {
    transform: translateX(-50%) translateY(0);
}





/* add fix */
.fixspot-left{z-index:801;height:calc(100%-80px);max-width:160px;position:fixed;left:0;top:50%;display:grid;align-items:center;overflow:hidden;transform: translateY(-50%);}
.fixspot-right{z-index:802;height:calc(100%-80px);max-width:160px;position:fixed;right:0;top:50%;display:grid;align-items:center;overflow:hidden;transform: translateY(-50%);}
.fixspot-left img,.fixspot-right img{width:100%;max-width:100%;display:grid;object-position: center;object-fit:scale-down;}

.fixspot-bottom{z-index:803;width:100vw;max-height:90px;max-width:728px;position:fixed;left:50%;bottom:0;display:grid;justify-items:center;overflow:hidden;transform: translateX(-50%);}
.fixspot-bottom img{width:100%;max-width:100%;display:grid;object-position:top;object-fit:scale-down;}

.fixspot-top{z-index:998;width:100vw;max-height:90px;max-width:728px;position:fixed;left:50%;top:0;display:grid;justify-items:center;overflow:hidden;transform: translateX(-50%);}
.fixspot-top img{width:100%;max-width:100%;display:grid;object-position:top;object-fit:scale-down;}


.fixspot-in{display:block;width:100%;}
.fixspot-left,.fixspot-right,.fixspot-bottom,.fixspot-top{display:grid !important;}




/* head */
.main-head{z-index:997;width:100%;padding:0;margin:0 auto;display:grid;grid-template-columns:1fr;-webkit-transition:all .5s ease-in;transition:all .5s ease-in;position:sticky;top:0;}
.head-r1{width:100%;display:grid;grid-template-columns:auto 1fr auto auto;align-items: center;padding:3px 1rem;grid-gap:1rem;background:var(--tem1);}

.h-logo{display:grid;justify-content:center;}
.h-name{margin:auto;display:flex;justify-content:center;padding:0.5rem;align-items:center;}
.h-name span{margin:auto;font-size:24px;font-size:clamp(20px, 2vw, 28px);font-weight:600;line-height:1;color:var(--white1);letter-spacing:0;}
.h-name b{color:var(--white1);font-weight:600;}
.main-logo{width:100%;max-width:260px;display:flex;align-items:center;justify-items:center;bottom:-2px;}
.main-logo img{width:100%;object-position: center;object-fit: cover;}

/* h link */
.h-link{display:flex;gap:8px;}
.live-button {
    display: inline-flex;
    align-items: center;
    color: #fff;
    padding: 0;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s;
}

.live-button svg {
    margin-right: 10px;
}

.live-button:hover {
    color: red;
}

/* search */
.h-search{width:100%;display:grid;justify-items:start;}
.h-search-area {
	width: 100%;max-width:800px;	
    display: flex;
    background: var(--tem2);
    border-radius: 30px;
    padding:0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	border: 1px solid #060e20;
}

.search-input {
    border: none;
    padding: 0 20px;
    border-radius: 30px;
    outline: none;
    width: 100%;
    font-size: 20px;color:#fff;
    background-color: transparent;
}
.search-input::placeholder{color:#cdcdcd;font-weight:300;font-size:14px;}
.search-button {
    display: flex;
    align-items: center;
    background-color: var(--tem3);
    color: #fff;
    border: none;
    padding: 0 1.5rem;
    margin-left: 10px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
}

.search-button svg {
    margin-right: 0;
}

.search-button:hover {
    background-color: var(--tem5);
}

.search-button:active {
    background-color: red;
}

/* mobile-search */
.mobile-search{display:none;width:100%;padding:1rem;}




/* menu mobile*/
.mobile-menu{display: grid;align-items: center;justify-content: end;}
.side-box{z-index:998;position:fixed;right:-200%;top:0;width:100%;max-width:220px;height:100vh;padding:40px 0;overflow-x:auto;box-sizing:border-box;text-align:center;align-items:center;align-content:center;-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;opacity: 0;background:var(--black1);box-shadow:3px 0 10px rgb(255 255 255 / 16%);}
#toggle{position:fixed;appearance:none;cursor:pointer;right:-1000px;top:0;}
#toggle + label{z-index:9999;display:grid;cursor:pointer;padding:0;margin:0;line-height:1em;font-size:1.8em;text-align:center;-webkit-font-smoothing:antialiased;color:var(--white1);background:transparent;border-radius:0 0 6px 6px;cursor:pointer;}
#toggle + label:hover{color:var(--tem4) !important;}
#toggle + label:after{content:"☰";padding:10px;;}
.container{transition:margin 0.5s cubic-bezier(0.17, 0.04, 0.03, 0.94);padding:0 1%;}
#toggle:checked ~ .side-box{right:0;opacity:1;}
#toggle:checked ~ .container{margin-left:0px;}
#toggle:checked + label{background:none;}
#toggle:checked + label:after{content:"X";}


.side-btn{background:transparent;}
.side-btn:hover{opacity:0.8;}

.menu-side{width:100%;display: grid;grid-template-columns:1fr;grid-gap:1rem;height: 100%;align-content: center;padding:2rem 0;}
.menu-side a{background:transparent;padding:1rem;}
.menu-side a:hover{background:#0a0a0a !important;}

.sub-list{width:100%;position:relative;padding:10px 0;margin:0 auto;display:flex;display:-webkit-flex;-webkit-justify-content:center;justify-content:center;justify-items:center;align-items:center;justify-items:center;flex-wrap:wrap;}
.li-menu-ss{width:100%;position:relative;display:grid;grid-template-columns:1fr;align-content:start;}
.li-menu-ss a:link,.sub-list li a:visited,.sub-list li a:active{width:100%;font-size:.9rem;line-height:1;padding:.5rem 1rem;margin:0 auto;color:var(--gray2);background:transparent;}
.li-menu-ss a:hover{color:var(--red1) !important;text-shadow:0 2px 3px rgb(0 0 0 / 32%);background:var(--tem1);}


/* footer */
.fix-bottom{z-index:996;width:100%;position:sticky;bottom:0;padding:0;margin:auto;justify-items:center;display:flex;justify-content:center;gap:.5rem;align-items:flex-end;overflow: hidden;background:var(--white1);box-shadow: 0 -2px 60px 20px rgb(0 0 0 / 6%);}
.fix-bt{padding:.5rem 0;display:grid;}
.area-ft{width:100%;display:block;margin:auto;padding:1rem;text-align:center;}
.tx-ft{font-size: 14px;font-weight: 300;line-height: 1.4;color:var(--tem8);}
.copyright{width:100%;display:grid;padding:1rem 5vw;color:var(--black3);}
.copyright span{font-size:14px;font-size:clamp(12px, .8vw, 14px);}


/* lazy */

img.yall-loaded img.yall-error{opacity: 1;}
img.slowloading,img.yall_lazy {visibility: hidden !important;opacity: 0;-webkit-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}
img.yall_loaded {visibility: visible !important;opacity: 1;}


/* to top */
#button-to-top {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: rgb(0 29 255 / 80%);
            color: white;
            border: none;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
            opacity: 0;
			pointer-events: none;
            transition: opacity 0.3s ease;
        }
#button-to-top:hover{background-color:var(--tem5);}
        #button-to-top.show {
            opacity: 1;
            pointer-events: auto;
        }


/* drop link */


/* responsive */
@media only screen and (max-width:1200px){

}

@media (max-width:1080px){
.h-link{display:none;}
.section-rank{grid-template-columns:1fr;}
.page-ct-box{grid-template-columns:1fr;}
}

@media (max-width:920px){
.page-info-box1{grid-template-columns:1fr;}
.pg-info-cover{max-width:260px;}
.pgi-btnplay{margin:auto;}
}

@media (max-width:720px){
.rank-card{grid-template-columns:1fr;}
.video-info .rank-card{grid-template-columns:1fr;}
.section-rank{grid-template-columns:1fr 1fr;}
.rc-cover{grid-column: 1 / 3;}
.rc-cover img{aspect-ratio: 6 / 7;}
.pgi-list-box{grid-template-columns:1fr 1fr;}
.h-search{display:none;}
.mobile-search{display:grid;}
}

@media (max-width:520px){
.section-rank{grid-template-columns:1fr;}
.rank-card{grid-template-columns:1fr;}
.rc-cover{    grid-row: 1 / 3;}
.rc-cover img{aspect-ratio: 4 / 3;}
.pgi-list-box{grid-template-columns:1fr;}
.rc-info{border:none;}
.rc-btn{position: absolute;bottom: 5%;right: 5%;max-width: max-content;}
.page-info-box1,.page-info-box2{padding:0;margin:1rem auto;}
}

@media (max-width:450px){
.section-ct{display:grid;grid-template-columns:1fr 1fr;}
}