/* 隲ｸ陦檎┌蟶ｸ 譏ｯ逕滓ｻ�ｳ� 逕滓ｻ�ｻ�ｷｲ 蟇よｻ�梓讓� */


/* ### global ### */

#mobile_menu {
background-color:#000;
color:#FFF;
padding:20px;
width:100%;
max-width:300px;
position:fixed;
top:0;
right:0;
box-sizing:border-box;
z-index:100000;
overflow:auto;
max-height:100%;
}
#mobile_menu i.closebtn {
width:24px;
height:24px;
cursor:pointer;
position:absolute;
top:0;
right:0;
padding:10px;
}
#mobile_menu i.closebtn:hover {
background-color:#D33;
}
#mobile_menu i.closebtn svg {
width:24px;
height:24px;
fill:#FFF;
}
#mobile_menu a {
display:block;
line-height:3;
font-size:15px;
color:#FFF;
padding:0 1em;
}
#mobile_menu a:hover {
background-color:rgba(255,255,255,0.2);
}
#mobile_menu span.closebtn {
display:block;
font-size:30px;
float:right;
cursor:pointer;
}
#mobile_menu hr {
border-style:none;
border-top:1px solid #888;
}





#HEADBAR {
height:40px;
width:100%;
z-index:10;
background-color:#FFF;
}

#HEADBAR a {
float:left;
}
#HEADBAR a.btn {
padding:0 8px;
margin:0 2px;
}
#HEADBAR .btn {
display:inline-block;
height:40px;
cursor:pointer;
}
#HEADBAR .btn span {
display:inline-block;
height:40px;
line-height:40px;
color:#333;
vertical-align:top;
font-size:14px;
}
#HEADBAR .btn:hover {
background-color:rgba(0,0,0,0.05);
color:#000;
}
#HEADBAR .btn i {
vertical-align:top;
width:18px;
height:18px;
margin:11px 5px 11px 0;
}
#HEADBAR .btn i svg {
width:18px;
height:18px;
fill:#000;
}
#HEADBAR span.btn i {
width:20px;
height:20px;
margin:10px;
}
#HEADBAR span.btn i svg {
width:20px;
height:20px;
}
#HEADBAR .btn_on {
background:linear-gradient(to bottom,rgba(255,10,54,0) 0,rgba(255,10,54,0) 36px,rgba(255,10,54,1) 36px,rgba(255,10,54,1) 40px);
}
#HEADBAR .btn_on span {
color:#000;
font-weight:bold;
}
#HEADBAR .btn_on i svg {
fill:#FF0A36;
}
@media screen and (max-width:700px) {
#HEADBAR a.btn {
padding:0;
margin:0 1px;
}
#HEADBAR a.btn span {
display:none;
}
#HEADBAR a.btn i {
margin:11px 10px;
}
}


#body_outer {
padding-top:45px;
}
#hlogo {
color:#000;
float:left;
width:auto;
display:inline-block;
height:40px;
line-height:40px;
padding:0 10px 0 4px;
font-size:16px;
}
#hlogo:visited {
color:#000;
}
#hlogo:hover {
color:#000;
}
#hlogo img {
width:34px;
height:34px;
vertical-align:-13px;
margin:0 3px 0 0;
}
#hlogo span {
vertical-align:top;
display:inline-block;
height:40px;
line-height:40px;
font-size:15px;
margin-left:3px;
}
@media screen and (max-width:500px) {
#hlogo {
padding:0 8px 0 3px;
font-size:18px;
}
#hlogo img {
vertical-align:-12px;
width:32px;
height:32px;
}
#hlogo span {
display:none;
}
}

#FOOT {
border-top:1px solid #DDD;
padding:12px 0 30px 0;
text-align:center;
color:#999;
line-height:2;
}
#FOOT a {
margin:0 8px;
display:inline-block;
color:#666;
}
#FOOT em {
color:#333;
}
p.sitemenu {
padding:0 15px;
max-width:900px;
margin:0 auto;
}

#copyrights {
color:#888;
}
#copyrights a {
margin:0 3px;
color:#666;
}
#copyrights a:hover {
color:#333;
}
#copyrights a:visited {
color:#666;
}

.cc {
color:#BBB;
float:left;
width:auto;
display:inline-block;
height:40px;
line-height:40px;
padding:0 0 0 4px;
font-size:11px;
}


#HEAD6 {
height:40px;
}
#HEAD6 img {
vertical-align:middle;
margin-right:5px;
border:0;
width:30px;
}
#HEAD6 a.logo {
display:inline-block;
height:40px;
line-height:40px;
color:#000;
font-size:15px;
width:auto;
padding:0 6px;
}
#HEAD6 a.menu {
margin-left:5px;
}

@media screen and (max-width:900px) {
.headgirl {
display:none;
}
}
#msgbox_outer {
border-top:1px solid #DDD;
}
#msgbox_cont {
margin:0 auto;
max-width:800px;
border-left:1px solid #DDD;
border-right:1px solid #DDD;
padding:40px;
}

@media screen and (max-width:900px) {
#msgbox_cont {
border:0;
padding:30px;
}
}
@media screen and (max-width:600px) {
#msgbox_cont {
padding:20px;
}
}
@media screen and (max-width:400px) {
#msgbox_cont {
padding:15px;
}
}
#home_header {
padding:0 1vw 5px 1vw;
}
@media screen and (max-width:500px) {
#home_header {
padding:0 0 5px 0;
}
}
#cont_outer {
padding:0 1vw 15px 1vw;
}
@media screen and (max-width:500px) {
#cont_outer {
padding:0 0 5px 0;
}
}
.cont_outer_detail_page {
padding:0 !important;
margin:0 auto;
max-width:950px;
border-left:1px solid #DDD;
border-right:1px solid #DDD;
}
@media screen and (max-width:1050px) {
.cont_outer_detail_page {
border:0;
}
}
#main_cont {
margin:0 auto;
max-width:1200px;
container:gridframe / inline-size;
}

.cont_doc {
padding:15px 1vw;
}
.cont_doc_detail_page {
padding:25px;
}
@media screen and (max-width:800px) {
.cont_doc_detail_page {
padding:20px;
}
}
@media screen and (max-width:500px) {
.cont_doc {
padding:15px 8px 12px 8px;
}
.cont_doc_detail_page {
padding:15px 8px 12px 8px;
}
.cbox {
margin:2vh 0;
}
}
.cont_doc_detail_page h1 a {
color:#000;
}

.text_body {
font-size:14px;
line-height:1.6;
white-space:break-spaces;
}


#guest_intro_box {
background:linear-gradient(105deg,#F93,#FF0A36 10%,#9130FD 90%,#3CF);
position:relative;
padding-right:50px;
overflow:hidden;
}
@media screen and (max-width:500px) {
#guest_intro_box {
padding:0 8px;
}
}
#guest_intro_box .iconbg {
transform:rotate(45deg);
width:150px;
position:absolute;
right:10px;
top:-20px;
z-index:1;
aspect-ratio:1;
}
#guest_intro_box .iconbg svg {
fill:rgba(255,255,255,0.4);
width:100%;
height:100%;
}
#guest_intro_box .iconbg-l svg {
fill:rgba(255,255,255,0.3);
}
#guest_intro_box .iconbg-d svg {
fill:rgba(255,255,255,0.5);
}
@media screen and (max-width:500px) {
#guest_intro_box .iconbg-mhide {
display:none;
}
}
#guest_intro_box .guest_intro_box_inner {
max-width:900px;
margin:0 auto;
line-height:1.5;
font-size:15px;
z-index:10;
}
#guest_intro_box .guest_intro_box_inner .cont {
flex:1;
padding:15px 0;
color:rgba(255,255,255,0.9);
}
#guest_intro_box .guest_intro_box_inner .cont em {
font-size:1.3em;
color:rgba(255,255,255,0.9);
}
@media screen and (max-width:700px) {
#guest_intro_box .guest_intro_box_inner {
font-size:14px;
}
}
#guest_intro_box i.closebtn {
width:14px;
height:14px;
padding:8px;
background-color:rgba(0,0,0,0.3);
cursor:pointer;
border-radius:50%;
position:absolute;
right:5px;
top:0;
bottom:0;
margin: auto 0;
z-index:15;
}
#guest_intro_box i.closebtn svg {
width:14px;
height:14px;
fill:rgba(255,255,255,0.8);
}
#guest_intro_box i.closebtn:hover {
background-color:rgba(0,0,0,0.8);
}
#guest_intro_box i.closebtn:hover svg {
fill:#FFF;
}
@media (hover:none) {
#guest_intro_box i.closebtn {
background-color:rgba(0,0,0,0.5);
}
}


#overlay3 {
position:fixed;
top:0;
left:0;
z-index:90;
width:100%;
height:100%;
background-image:url(/i/overlay.png);
}





/* ### sml parts ### */
.favstar {
display:inline-block;
width:15px;
height:15px;
cursor:pointer;
}
.favstar span.loader {
width:60%;
height:60%;
margin:20%;
vertical-align:top;
}
.favstar i {
width:100%;
height:100%;
vertical-align:top;
}
.favstar i svg {
width:100%;
height:100%;
fill:#999;
}
.favstar:hover i svg {
fill:#FBBC04;
}
.favstar_faved i svg {
fill:#FBBC04;
}

img.i16 {
width:16px;
height:16px;
border-radius:50%;
vertical-align:middle;
margin-right:3px;
}

i.verifiedimg {
width:15px;
height:15px;
margin-left:2px;
vertical-align:middle;
}
i.verifiedimg svg {
width:15px;
height:15px;
fill:#1D9BF0;
}





a.morebtn {
display:inline-block;
color:#666;
height:28px;
line-height:28px;
padding:0 8px 0 9px;
border:1px solid #BBB;
border-radius:15px;
margin-top:0.5em;
}
a.morebtn::after {
content:"";
display:inline-block;
border-right:2px solid #888;
border-top:2px solid #888;
border-radius:1px;
margin:0 0 0 2px;
height:7px;
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
width:7px;
}

a.morebtn:visited {
color:#666;
}
a.morebtn:hover {
color:#333;
border-color:#888;
background-color:#F4F4F4;
}
a.morebtn:hover::after {
border-color:#666;
}



div.moreload {
border:1px solid #666;
cursor:pointer;
color:#333;
border-radius:20px;
height:38px;
line-height:38px;
font-size:14px;
text-align:center;
margin:15px auto 10px auto;
max-width:500px;
}
div.moreload:hover {
color:#000;
border-color:#000;
background-color:#F6F6F6;
}
div.moreload .loader {
vertical-align:-1px;
margin-right:3px;
}



i.twitterimg {
width:14px;
height:14px;
margin-right:2px;
vertical-align:middle;
}
i.twitterimg svg {
width:14px;
height:14px;
fill:#1D9BF0;
}




span.dotspace {
}
span.dotspace::after {
content:"\30FB";
display:inline;
color:#AAA;
margin:0 1px;
}





a.b1 {
border-radius:4px;
color:#FFF;
background-color:#FF0A36;
display:inline-block;
padding:10px 20px;
text-align:center;
transition:background-color 0.1s;
}
a.b1:hover {
background-color:#FF3B5E;
text-decoration:none;
}
a.b1:active {
box-shadow:0 3px 4px rgba(0,0,0,0.2) inset;
background-color:#CC082B;
text-decoration:none;
}
a.b2 {
border-radius:3px;
color:#333;
background-color:#EEE;
display:inline-block;
padding:5px 10px;
text-align:center;
transition:background-color 0.1s;
border:1px solid #DDD;
}
a.b2:hover {
background-color:#F6F6F6;
color:#000;
text-decoration:none;
}
a.b2:active {
box-shadow:0 2px 3px rgba(0,0,0,0.2) inset;
background-color:#DDD;
text-decoration:none;
border-color:#CCC;
}
.mcn0 {
border-left:4px solid transparent;
}
.mcn1 {
border-left:4px solid #27C7FE;
}
.mcn2 {
border-left:4px solid #616AFF;
}
.mcn3 {
border-left:4px solid #39ABE0;
}
.mcn4 {
border-left:4px solid #F86410;
}
.mcn5 {
border-left:4px solid #A0B;
}
.mcn6 {
border-left:4px solid #D60;
}
.mcn7 {
border-left:4px solid #FF3278;
}

span.mcnmark {
display:inline-block;
height:13px;
line-height:13px;
border-radius:6px;
margin-left:3px;
color:#FFF;
padding:0 3px;
font-size:10px;
}
.mcnbg0 {background-color:transparent;}
.mcnbg1 {background-color:#27C7FE;}
.mcnbg2 {background-color:#616AFF;}
.mcnbg3 {background-color:#39ABE0;}
.mcnbg4 {background-color:#F86410;}
.mcnbg5 {background-color:#A0B;}
.mcnbg6 {background-color:#D60;}
.mcnbg7 {background-color:#FF3278;}



a.metrics i {
width:12px;
height:12px;
}
a.metrics i svg {
width:12px;
height:12px;
fill:#888;
}
a.metrics:hover svg {
fill:#000;
}


a.sns_followers {
display:inline-block;
height:18px;
line-height:18px;
border-radius:9px;
color:#FFF;
padding:0 6px;
font-size:12px;
vertical-align:middle;
}
a.sns_followers_youtube {
background-color:#F00;
}
a.sns_followers_twitter {
background-color:#1D9BF0;
}
a.sns_followers i {
width:12px;
height:12px;
vertical-align:-3px;
margin-right:2px;
}
a.sns_followers i svg {
width:12px;
height:12px;
fill:#FFF;
}

a.share_twitter {
border-radius:50%;
background-color:#BBB;
display:inline-block;
width:15px;
height:15px;
padding:6px;
}
a.share_twitter:hover {
background-color:#1D9BF0;
}
a.share_twitter i {
width:15px;
height:15px;
}
a.share_twitter i svg {
width:15px;
height:15px;
fill:#FFF;
}
a.open_site {
display:inline-block;
width:32px;
height:32px;
}
a.open_site img {
width:32px;
height:32px;
}


div.icon .adminbtn,div.uicon .adminbtn {
position:absolute;
top:0;
left:0;
}
div.icon .adminbtn a,div.uicon .adminbtn a {
color:#CCC;
}

a.reviewbtn {
display:inline-block;
padding:8px 15px;
height:16px;
line-height:16px;
border-radius:16px;
color:rgba(255,255,255,0.9);
background-color:#333;
}
.reviewbtn:hover {
background-color:#000;
color:#FFF;
}
.reviewbtn i {
width:16px;
height:16px;
vertical-align:1px;
margin-right:3px;
}
.reviewbtn i svg {
width:16px;
height:16px;
fill:rgba(255,255,255,0.9);
}
.reviewbtn:hover i svg {
fill:#FFF;
}
.reviewbtn_box {
margin-top:10px;
background-color:#F6F6F6;
border-radius:10px;
padding:12px;
}

i.deled {
background-color:#999;
color:#EEE;
padding:2px;
font-size:10px;
border-radius:2px;
margin-right:2px;
display:inline-block;
line-height:1;
vertical-align:1px;
}

i.close_ctgbtn {
padding:4px;
border-radius:50%;
width:13px;
height:13px;
background-color:#999;
margin-left:4px;
cursor:pointer;
}
i.close_ctgbtn svg {
width:13px;
height:13px;
fill:#FFF;
}
i.close_ctgbtn:hover {
background-color:#D33;
}
.page_form_box {
display:flex;
flex-wrap:wrap;
align-content:flex-start;
align-items:center;
justify-content:start;
margin:2px 0;
}
.page_form_box > form,.page_form_box > div {
margin:3px;
}


span.livestat_mark {
background-color:#D00;
color:#FFF;
padding:0 3px;
border-radius:3px;
display:inline-block;
font-size:11px;
line-height:15px;
vertical-align:1px;
margin-right:2px;
}
span.livestat_mark_sd {
background-color:#00D;
}
span.livestat_mark_end {
background-color:#777;
}



.review_colorstar span.review_star {
color:#FC0;
}


i.delbtn {
background-color:#BBB;
padding:3px;
width:9px;
height:9px;
cursor:pointer;
border-radius:50%;
vertical-align:middle;
}
i.delbtn svg {
width:9px;
height:9px;
fill:rgba(255,255,255,0.7);
}
i.delbtn:hover {
background-color:#D33;
}
i.delbtn:hover svg {
fill:#FFF;
}

img.user {
width:24px;
height:24px;
border-radius:50%;
vertical-align:middle;
}


/* ### ctg color ### */

[data-ctgtype="all"]::before {
background-color:#999;
}
[data-ctgtype="youtube"]::before {
background-color:#F00;
}
[data-ctgtype="twitch"]::before {
background-color:#9146FF;
}
[data-ctgtype="vtuber"]::before {
background-color:#0C0;
}
[data-ctgtype="hololive"]::before {
background-color:#0FF;
}
[data-ctgtype="holostars"]::before {
background:linear-gradient(to top,#6D1FFF,#60D6FF);
}
[data-ctgtype="hololive_en"]::before {
background-color:#0DE;
}
[data-ctgtype="nijisanji"]::before {
background:linear-gradient(to top,#2D4B70,#009B4D,#F2EA1A,#EE7A00,#DB062C);
}
[data-ctgtype="nijisanji_en"]::before {
background:linear-gradient(to bottom,#2D4B70,#009B4D,#F2EA1A,#EE7A00,#DB062C);
}
[data-ctgtype="vspo"]::before {
background:linear-gradient(to top,#7264D0,#FF6EA2);
}
[data-ctgtype="774inc"]::before {
background:linear-gradient(to top,#FF3278,#0050FF);
}
[data-ctgtype="neo"]::before {
background:#040000;
}
[data-ctgtype="aogiri"]::before {
background:linear-gradient(to top,#3976CC 0,#3976CC 50%,#2CBEDB 50%,#2CBEDB 100%);
}
[data-ctgtype="react"]::before {
background:linear-gradient(to top,#FF4339,#FFA50A);
}





/* ### image ### */



/* ### UI ### */
p.pagenavi {
text-align:center;
padding:2vh 0;
}
p.pagenavi span.nopage {
color:#CCC;
margin:0 2em;
}
p.pagenavi a {
margin:0 2em;
}
a.pagenavi {
display:inline-block;
border-radius:1.5em;
padding:0 1.5em;
height:3em;
line-height:3em;
border:1px solid #666;
color:#333;
}
a.pagenavi:hover {
background-color:#F6F6F6;
border-color:#000;
color:#000;
}

#hnavi {
z-index:100;
white-space:nowrap;
background-color:#F6F6F6;
width:100%;
position:fixed;
bottom:0;
left:0;
height:44px;
display:flex;
flex-wrap:wrap;
align-content:flex-start;
align-items:center;
justify-content:center;
}
#hnavi::-webkit-scrollbar {
display:none;
}
#hnavi a {
box-sizing:border-box;
font-size:11px;
height:44px;
padding-top:6px;
color:#333;
width:28%;
max-width:200px;
}
#hnavi a:hover {
color:#000;
}
#hnavi a i {
width:18px;
height:18px;
margin-bottom:3px;
}
#hnavi a i svg {
width:18px;
height:18px;
fill:#333;
}
#hnavi a:hover i svg {
fill:#000;
}
#hnavi a.this {
font-weight:bold;
}
#hnavi a.this i svg {
fill:#FF0A36;
}



#localhmenu {}
@media screen and (max-width:500px) {
#localhmenu {margin:0 5px;}
.channel_list_page {padding:5px 0;}
}

#localhead {
margin:0 0 1.5vh 0;
}
@media screen and (max-width:500px) {
#localhead {margin:5px 5px;}
}

#footmsg {
margin:5px 0;
}
@media screen and (max-width:500px) {
#footmsg {margin:5px 5px;}
}

#channel_sort_selecter {
float:left;
margin:0 3px 0 0;
}
@media screen and (max-width:500px) {
#channel_sort_selecter {
float:unset;
margin:5px 0 5px 0;
}
}

#myaccount_menu {
height:40px;
width:40px;
float:right;
display:inline-block;
}
#myaccount_menu:hover {
background-color:rgba(255,255,255,0.15);
}
#myaccount_menu img {
width:24px;
height:24px;
margin:8px;
border-radius:50%;
}

#search_form {
display:flex;
flex-wrap:nowrap;
align-content:flex-start;
align-items:center;
}
span.home_ctrl {
width:16px;
height:16px;
padding:7px;
border-radius:50%;
margin:4px 3px;
background-color:#EEE;
cursor:pointer;
display:inline-block;
}
span.home_ctrl i {
width:16px;
height:16px;
}
span.home_ctrl svg {
width:16px;
height:16px;
fill:#333;
}
span.home_ctrl:hover {
background-color:#DDD;
}
i.home_ctrl:hover svg {
fill:#000;
}
span.home_ctrl_on i svg {
fill:#FF0A36;
}



#home_live_poster {
box-sizing:border-box;
border:1px solid rgba(255,255,255,0.7);
padding:1px;
background-color:#000;
position:absolute;
object-fit:cover;
z-index:5;
transition:opacity 0.15s ease;
aspect-ratio:16/9;
background-clip:padding-box;
}
#switch_poster {
position:fixed;
width:16px;
height:16px;
background-color:#09F;
padding:9px;
border-radius:50%;
box-shadow:0 1px 3px rgba(0,0,0,0.3);
right:10px;
top:50px;
cursor:pointer;
z-index:20;
}
#switch_poster:hover {
background-color:#1AF;
}
#switch_poster[data-type="cover"] {
background-color:#F90 !important;
}
#switch_poster[data-type="cover"]:hover {
background-color:#FA1 !important;
}
#switch_poster i {
width:16px;
height:16px;
}
#switch_poster i svg {
width:16px;
height:16px;
fill:#EEE;
}
#switch_poster:hover i svg {
fill:#FFF;
}

@media screen and (max-width:500px) {
#switch_poster {
right:5px;
top:45px;
}
}


#search_filter {
width:30vw;
max-width:200px;
min-width:100px;
height:28px;
box-sizing:border-box;
padding:4px 8px;
border-top-left-radius:14px;
border-bottom-left-radius:14px;
border-right:0;
}


.searchbtn {
box-sizing:border-box;
width:28px;
height:28px;
background-color:#333;
padding:7px;
display:inline-block;
border:0;
border-top-right-radius:14px;
border-bottom-right-radius:14px;
}
.searchbtn:hover {
background-color:#000;
}
.searchbtn i {
width:14px;
height:14px;
}
.searchbtn i svg {
width:14px;
height:14px;
fill:rgba(255,255,255,0.9);
}
.searchbtn:hover i svg {
fill:#FFF;
}



#FOOT {
margin-bottom:50px;
}

input[name="comment_delkey"] {
background-color:#DDD;
color:#DDD;
}
input[name="comment_delkey"]:focus {
background-color:#FFF;
color:#000;
}




#hidden_pagebody {
max-height:100px;
overflow:hidden;
position:relative;
}
#hidden_pagebody_mask {
width:100%;
height:100px;
position:absolute;
top:0;
left:0;
background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,1));
}
#hidden_pagebody_togglebtn {
position:absolute;
cursor:pointer;
color:#333;
height:20px;
line-height:20px;
text-align:center;
width:100%;
bottom:0;
left:0;
}
#hidden_pagebody_togglebtn:hover {
color:#000;
background-color:#EEE;
}
h1#pagedetail_title {
font-size:20px;
}
@media screen and (max-width:800px) {
h1#pagedetail_title {
font-size:18px;
}
}
@media screen and (max-width:500px) {
h1#pagedetail_title {
font-size:15px;
}
}

h1#category_title {
color:#666;
font-weight:bold;
margin:10px 0;
}
@media screen and (max-width:500px) {
h1#category_title {
margin:6px 0;
}
}




.lightboxcont_dark {
background-color:rgba(0,0,0,0.9);
position:relative;
color:rgba(255,255,255,0.95);
}
.lightboxcont_dark > div {
overflow:auto;
}
.lightboxcont_dark a {
color:#38E;
}
.lightboxcont_dark .weak {
color:#999;
}
.lightboxcont_dark .notfound {
color:#999;
}
.lightboxcont_dark i.closebtn {
width:13px;
height:13px;
padding:7px;
background-color:#666;
cursor:pointer;
position:absolute;
top:0;
right:0;
z-index:10;
}
.lightboxcont_dark i.closebtn svg {
width:13px;
height:13px;
fill:#EEE;
}
.lightboxcont_dark i.closebtn:hover {
background-color:#D33;
}
.lightboxcont_dark i.closebtn:hover svg {
fill:#FFF;
}




/* ### livelist ### */


div.channel_livelist {
padding:10px;
background-color:#F8F8F8;
border-radius:5px;
}
div.channel_livelist h3.title {
overflow:hidden;
display:block;
-webkit-line-clamp:1;
display:box;
display:-webkit-box;
-webkit-box-orient:vertical;
text-overflow:ellipsis;
word-break:break-all;
overflow-wrap:anywhere;
line-height:1.3;
}
div.channel_livelist h3.title a {
}
div.channel_livelist p.date {
color:#666;
line-height:1.3;
}
div.channel_livelist p.date a {
color:#000;
}
div.channel_livelist h2 {
margin-bottom:5px;
color:#666;
}
div.userlist div.channel_livelist {
padding:6px;
}
@media screen and (max-width:500px) {
div.channel_livelist {
padding:6px;
}
}
#homelive_sortmenu {
}
#homelive_sortmenu .this {
font-weight:bold;
color:#000;
}
#livecount {
margin:0 0 0.5vh 0;
}
@media screen and (max-width:500px) {
#livecount {margin:8px 5px 5px 5px;}
}
#hometype_menubar_outer {
width:100%;
height:33px;
position:relative;
}
#hometype_menubar_outer::after {
content:'';
display:block;
border-top:1px solid #888;
width:100%;
bottom:0;
left:0;
position:absolute;
z-index:2;
}
@media screen and (max-width:500px) {
#hometype_menubar_outer {
margin:3px 3px -3px 3px;
width:auto;
}
}
#hometype_menubar {
display:flex;
flex-wrap:wrap;
align-content:flex-start;
align-items:end;
justify-content:start;
}
span.hometype {
line-height:29px;
height:29px;
color:#444;
cursor:pointer;
font-size:15px;
flex:1;
text-align:center;
border:1px solid #AAA;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-color:#888;
padding-top:1px;
margin-top:1px;
max-width:200px;
z-index:1;
}
#hometype_fav {
margin:0 2px;
}
span.hometype i {
width:15px;
height:15px;
vertical-align:-6px;
margin-right:3px;
}
span.hometype i svg {
width:15px;
height:15px;
fill:#444;
}
span.hometype:hover {
background-color:#F4F4F4;
color:#333;
border-top-color:#999;
border-left-color:#999;
border-right-color:#999;
}
span.hometype:hover i svg {
fill:#000;
}
span.hometype_on {
z-index:3;
padding-bottom:1px;
margin-top:0;
border-color:#888;
border-bottom-color:#FFF;
color:#000;
font-weight:bold;
}
span.hometype_on i svg {
fill:#000;
}
span.hometype_on:hover {
background-color:#FFF;
color:#000;
}
a.hometype_on:hover i svg {
fill:#000;
}





div.chatline_box_outer {
margin:2px 0 0 0;
position:relative;
height:20px;
z-index:7;
cursor:pointer;
background-color:#F2F2F2;
border-radius:3px;
}
div.chatline_box_outer:hover {
background-color:#E8E8E8;
}
div.chatline_box_part {
box-sizing:border-box;
position:absolute;
width:100%;
padding:1px 0;
display:flex;
flex-wrap:nowrap;
align-content:flex-start;
align-items:center;
justify-content:start;
color:#333;
height:20px;
font-size:12px;
padding:0 4px;
}
div.chatline_box_part:hover {
color:#000;
}
div.chatline_box_part i.hot {
margin-right:3px;
}
div.chatline_box_part i.hot3 {
width:14px;
height:14px;
}
div.chatline_box_part i.hot3 svg {
width:14px;
height:14px;
fill:#E00;
}
div.chatline_box_part i.hot2 {
width:13px;
height:13px;
}
div.chatline_box_part i.hot2 svg {
width:13px;
height:13px;
fill:#E31;
}
div.chatline_box_part i.hot1 {
width:12px;
height:12px;
}
div.chatline_box_part i.hot1 svg {
width:12px;
height:12px;
fill:#E63;
}
div.chatline_box_part i.hot0 {
width:11px;
height:11px;
}
div.chatline_box_part i.hot0 svg {
width:11px;
height:11px;
fill:#E95;
}
div.chatline_box_part div.chatline_box_part_text {
flex:1;
position:relative;
height:18px;
overflow:hidden;
}
div.chatline_box_part div.chatline_box_part_text div.chatline_box_part_text_cover {
position:absolute;
top:0;
left:0;
overflow:hidden;
line-height:16px;
text-overflow:ellipsis;
white-space:nowrap;
height:18px;
width:100%;
}
div.chatline_box_part div.chatline_box_part_text div.chatline_box_part_text_swap {
transition:transform 1s ease;
height:32px;
position:absolute;
top:0;
left:0;
width:100%;
}
div.chatline_box_part div.chatline_box_part_text div.chatline_box_part_text_swap > div {
overflow:hidden;
line-height:16px;
text-overflow:ellipsis;
white-space:nowrap;
height:16px;
}

div.chatline_box {
box-sizing:border-box;
position:absolute;
width:100%;
border-radius:5px;
padding:3px 4px;
color:#333;
display:none;
border-radius:3px;
border:1px solid #DDD;
background-color:#FFF;
}

div.chatline_box:hover {
border-color:#CCC;
color:#000;
}
div.chatline_box div.chatline_box_cont {
overflow:hidden;
display:block;
-webkit-line-clamp:2;
display:-webkit-box;
-webkit-box-orient:vertical;
text-overflow:ellipsis;
word-break:break-all;
overflow-wrap:anywhere;
line-height:1.3;
}
div.chatline_box span.chatspeed {
margin-right:5px;
color:#FFF;
font-size:11px;
background-color:#999;
padding:2px 4px;
border-radius:5px;
line-height:1;
font-weight:bold;
display:inline-block;
}
/*
@media (hover:hover) {
div.chatline_box_outer:hover div.chatline_box_part {
display:none;
}
div.chatline_box_outer:hover div.chatline_box {
display:unset;
}
div.chatline_box_outer:hover div.chatline_box_cont {
display:block;
line-height:1.4;
max-height:100px;
overflow-y:auto;
padding-right:2px;
}
div.chatline_box_outer div.chatline_box_cont::-webkit-scrollbar {
width:8px;
}
div.chatline_box_outer div.chatline_box_cont::-webkit-scrollbar-track {
background-color:#EEE;
border-radius:4px;
}
div.chatline_box_outer div.chatline_box_cont::-webkit-scrollbar-thumb {
background-color:#CCC;
border-radius:4px;
}
div.chatline_box_outer div.chatline_box_cont::-webkit-scrollbar-thumb:hover {
background-color:#999;
}
}
*/




/*
#homebox {
margin:5px auto 10px auto;
max-width:1300px;
display:flex;
flex-wrap:wrap;
align-content:flex-start;
align-items:stretch;
}
#home_cont_box {
container:homecont / inline-size;
margin-right:5px;
flex:1;
}
#home_sidectg_box {
width:220px;
padding:0 15px 10px 0;
}
#home_sideinfo_box {
width:320px;
box-sizing:border-box;
background-color:#EEE;
position:fixed;
top:40px;
right:0;
height:calc(100vh - 40px);
}
body[data-home] {
padding-right:320px;
}
#home_sideinfo_cont {
padding:10px;
overflow-y:auto;
box-sizing:border-box;
}
@media screen and (max-width:1250px) {
#home_sidectg_box {
width:205px;
padding:0 14px 8px 8px;
}
#home_sideinfo_box {
width:300px;
}
#home_sideinfo_cont {
padding:8px;
}
body[data-home] {
padding-right:300px;
}
}
@media screen and (max-width:1100px) {
#home_sidectg_box {
width:190px;
padding:0 10px 5px 5px;
}
#home_sideinfo_box {
width:280px;
}
#home_sideinfo_cont {
padding:5px;
}
body[data-home] {
padding-right:280px;
}
}
@media screen and (max-width:1000px) {
#home_sidectg_box {
width:100%;
padding:0;
}
}
@media screen and (max-width:800px) {
#home_sideinfo_box {
display:none;
}
body[data-home] {
padding-right:0;
}
}

#side_box_player_yt_outer,#side_box_player_twitch {
width:100%;
aspect-ratio:16/9;
}
#side_box_player_yt_outer iframe,#side_box_player_twitch iframe {
width:100%;
height:100%;
}


@media (hover:hover) {
#home_sideinfo_cont::-webkit-scrollbar {
width:8px;
}
#home_sideinfo_cont::-webkit-scrollbar-track {
background-color:#E8E8E8;
}
#home_sideinfo_cont::-webkit-scrollbar-thumb {
background-color:#CCC;
border-radius:4px;
}
#home_sideinfo_cont:hover::-webkit-scrollbar-thumb {
background-color:#999;
}
#home_sideinfo_cont::-webkit-scrollbar-thumb:hover {
background-color:#666;
}
}
#home_sideinfo_cont div.navi {
display:flex;
flex-wrap:wrap;
align-content:flex-start;
align-items:stretch;
width:calc(100% + 10px);
margin:-5px -5px 10px -5px;
}
#home_sideinfo_cont div.navi span {
height:24px;
line-height:24px;
text-align:center;
color:#666;
cursor:pointer;
flex:1;
}
#home_sideinfo_cont div.navi span:hover {
background-color:#DDD;
color:#000;
}
#home_sideinfo_cont div.navi span.this {
background-color:#FFF;
color:#000;
font-weight:bold;
}
#home_sideinfo_cont div.mcn {
height:20px;
line-height:20px;
color:#FFF;
text-align:center;
font-size:12px;
margin-bottom:2px;
}
#home_sideinfo_cont h3 {
font-size:11px;
color:#333;
margin:5px 0;
text-align:center;
line-height:15px;
background:linear-gradient(to bottom,transparent 0px,transparent 7px,#BBB 7px,#BBB 8px,transparent 8px,transparent);
}
#home_sideinfo_cont h3 span {
line-height:15px;
padding:0 5px;
background-color:#EEE;
display:inline-block;
}
#home_sideinfo_cont div.chatline_box_cont {
-webkit-line-clamp:2;
}
#home_sideinfo_cont p.date {
color:#333;
font-size:11px;
margin:5px 0;
}
#home_sideinfo_cont div.ss {
position:relative;
margin-bottom:2px;
}
#home_sideinfo_cont div.ss img {
width:100%;
aspect-ratio:16/9;
object-fit:cover;
}
#home_sideinfo_cont div.ss span.ssnote {
position:absolute;
z-index:5;
right:4px;
bottom:4px;
background-color:rgba(0,0,0,0.7);
color:rgba(255,255,255,0.8);
display:inline-block;
border-radius:3px;
padding:2px 3px;
font-size:12px;
}
#home_sideinfo_cont span.btn_play {
z-index:10;
}
#home_sideinfo_cont h2.cname {
display:flex;
flex-wrap:nowrap;
align-content:flex-start;
align-items:center;
margin-bottom:3px;
}
#home_sideinfo_cont h2.cname img.uicon {
width:20px;
height:20px;
margin-right:3px;
border-radius:50%;
}
#home_sideinfo_cont h2.cname a.cname {
overflow:hidden;
display:block;
-webkit-line-clamp:1;
display:-webkit-box;
-webkit-box-orient:vertical;
text-overflow:ellipsis;
word-break:break-all;
overflow-wrap:anywhere;
line-height:18px;
color:#333;
flex:1;
}
#home_sideinfo_cont h2.cname a.cname:hover {
color:#000;
}
#home_sideinfo_cont h2.cname i.btn {
width:13px;
height:13px;
padding:5px;
margin-left:3px;
cursor:pointer;
border-radius:50%;
background-color:#AAA;
}
#home_sideinfo_cont h2.cname i.btn svg {
width:13px;
height:13px;
fill:#FFF;
}
#home_sideinfo_cont h2.cname i.btn:hover {
background-color:#09F;
}
#home_sideinfo_cont h2.cname i.btn:hover svg {
fill:#FFF;
}
#home_sideinfo_cont a.title {
overflow:hidden;
display:block;
-webkit-line-clamp:2;
display:-webkit-box;
-webkit-box-orient:vertical;
text-overflow:ellipsis;
word-break:break-all;
overflow-wrap:anywhere;
line-height:1.25;
font-size:11px;
color:#555;
flex:1;
}
#home_sideinfo_cont h2.cname a.cname:hover {
color:#000;
}
#home_sideinfo_cont div.ssmore {
margin-top:2px;
background-color:#DDD;
padding:6px 0;
color:#000;
text-align:center;
cursor:pointer;
font-size:12px;
}
#home_sideinfo_cont div.ssmore:hover {
background-color:#CCC;
}

*/

/*
@container gridframe (max-width:210px) {
container:poster / inline-size;
*/


div.rankgrid_outer {
display:flex;
flex-wrap:wrap;
align-content:flex-start;
align-items:start;
justify-content:start;
}
@media screen and (max-width:500px) {
div.rankgrid_outer {
}
}
div.rankgrid_outer_lrg {
grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr;
column-gap:8px;
row-gap:16px;
}
@container gridframe (max-width:1500px) {
div.rankgrid_outer_lrg {
grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;
}
}
@container gridframe (max-width:1350px) {
div.rankgrid_outer_lrg {
grid-template-columns:1fr 1fr 1fr 1fr 1fr;
}
}
@container gridframe (max-width:1120px) {
div.rankgrid_outer_lrg {
grid-template-columns:1fr 1fr 1fr 1fr;
}
}
@container gridframe (max-width:850px) {
div.rankgrid_outer_lrg {
grid-template-columns:1fr 1fr 1fr;
}
}
@container gridframe (max-width:600px) {
div.rankgrid_outer {
grid-template-columns:1fr 1fr;
}
}


#homeranking {
margin:25px 0 20px 0;
padding-bottom:20px;
border-bottom:1px solid #CCC;
}
@media screen and (max-width:500px) {
#homeranking {
padding:0 4px;
}
}
#homeranking > h2 a {
color:#000;
}

#homeranking #homeranklists {
margin-top:5px;
display:grid;
box-sizing:border-box;
grid-auto-flow:column;
grid-template-rows:repeat(3,auto);
overflow-x:auto;
column-gap:4px;
row-gap:4px;
}
@media (hover:hover) {
#homeranking #homeranklists {
padding-bottom:4px;
}
#homeranking #homeranklists::-webkit-scrollbar {
height:12px;
}
#homeranking #homeranklists::-webkit-scrollbar-track {
background-color:#EEE;
border-radius:6px;
}
#homeranking #homeranklists::-webkit-scrollbar-thumb {
background-color:#CCC;
border-radius:6px;
}
#homeranking #homeranklists::-webkit-scrollbar-thumb:hover {
background-color:#999;
}
}
div.ranklist_loading {
display:block;
}
div.homeranklist {
display:flex;
flex-wrap:wrap;
align-content:flex-start;
align-items:center;
justify-content:start;
border:1px solid #DDD;
padding:4px;
position:relative;
width:80vw;
max-width:350px;
}
@container gridframe (max-width:650px) {
}
div.homeranklist:hover {
background-color:#F8F8F8;
border-color:#CCC;
}
div.homeranklist div.icon {
width:32px;
height:32px;
position:relative;
margin-right:6px;
}
div.homeranklist div.icon .uicon {
width:32px;
height:32px;
border-radius:50%;
}
div.homeranklist div.icon .mcn {
width:10px;
height:10px;
position:absolute;
right:-3px;
bottom:-2px;
}
div.homeranklist div.cont {
flex:1;
}
div.homeranklist div.cont h3 {
overflow:hidden;
display:block;
-webkit-line-clamp:1;
display:-webkit-box;
-webkit-box-orient:vertical;
text-overflow:ellipsis;
word-break:break-all;
overflow-wrap:anywhere;
line-height:17px;
font-size:13px;
}
div.homeranklist div.cont h3 a {
color:#000;
font-weight:bold;
}
div.homeranklist div.cont p.title {
overflow:hidden;
display:block;
-webkit-line-clamp:1;
display:-webkit-box;
-webkit-box-orient:vertical;
text-overflow:ellipsis;
word-break:break-all;
overflow-wrap:anywhere;
line-height:17px;
font-size:13px;
margin:0;
}
div.homeranklist div.cont p.title a {
color:#000;
}
div.homeranklist div.count {
color:#333;
font-size:12px;
line-height:16px;
white-space:nowrap;
text-align:right;
margin-left:5px;
}
div.homeranklist div.count span.no {
display:inline-block;
width:15px;
height:15px;
color:#FFF;
background-color:#AAA;
text-align:center;
margin-right:3px;
border-radius:50%;
font-size:10px;
vertical-align:1px;
}
div.homeranklist div.count span.no1 {
background-color:#DC2;
}
div.homeranklist div.count span.no2 {
background-color:#8BB;
}
div.homeranklist div.count span.no3 {
background-color:#D88;
}
div.homeranklist div.count a {
color:#000;
}
div.homeranklist div.count em {
font-size:14px;
}
div.homeranklist div.count span.live {
color:#D00;
}
div.homeranklist div.count span.end {
color:#777;
font-size:11px;
}
div.homeranklist div.count a.viewers {
color:#F00;
}
div.homeranklist div.count a.end_viewers {
color:#777;
}
div.homeranklist div.count a.sd {
color:#00D;
}
div.homeranklist .poster {
position:relative;
margin-left:3px;
}
div.homeranklist div.poster img.yimg {
height:50px;
aspect-ratio:16/9;
object-fit:cover;
cursor:pointer;
}
div.homeranklist .poster img.site {
max-width:20px;
height:16px;
right:3px;
top:3px;
position:absolute;
z-index:5;
}
#homeranking_tab {
background:linear-gradient(to top,#666,#666 1px,transparent 1px);
height:29px;
margin:7px 0;
}
#homeranking_tab span {
border-top-left-radius:5px;
border-top-right-radius:5px;
height:28px;
line-height:28px;
color:#444;
display:inline-block;
cursor:pointer;
border-top:solid 1px #AAA;
border-left:solid 1px #AAA;
border-right:solid 1px #AAA;
padding:0 10px;
float:left;
margin-left:3px;
}
#homeranking_tab span:hover {
border-color:#666;
color:#000;
}
#homeranking_tab span.this {
border-color:#666;
background-color:#FFF;
color:#000;
font-weight:bold;
}

#home_vsummary {
display:grid;
box-sizing:border-box;
grid-template-columns:1fr 1fr 1fr;
column-gap:1.5vw;
row-gap:10px;
margin-top:20px;
}
@media screen and (max-width:1000px) {
#home_vsummary {
grid-template-columns:1fr 1fr;
}
}
@media screen and (max-width:600px) {
#home_vsummary {
grid-template-columns:1fr;
}
}
#home_vsummary > div.lists {
}
#home_vsummary > div.lists > h3 {
font-weight:bold;
font-size:16px;
margin-bottom:5px;
}
#home_vsummary > div.lists > h3 a {
color:#000;
}
#home_vsummary > div.lists h3 .count {
font-weight:normal;
color:#333;
font-size:13px;
}

#home_vsummary div.homeranklist {
border:0;
border-top:1px solid #DDD;
padding:4px 0;
width:auto;
max-width:unset;
}
#home_vsummary div.homeranklist:first-child {
border-top:0;
}




div.rankgrid_outer > h2 {
font-size:20px;
font-weight:bold;
margin-top:15px;
width:100%;
margin-bottom:10px;
}
@media screen and (max-width:500px) {
div.rankgrid_outer > h2 {
margin-bottom:5px;
}
}
div.rankgrid_outer > h2:first-child {
margin-top:10px;
}
div.rankgrid_outer > h2 a {
color:#000;
}
div.rankgrid_outer > h2 a:hover {
}
div.rankgrid_outer > h2 span.count {
font-size:13px;
font-weight:normal;
color:#666;
}
@media screen and (max-width:500px) {
div.rankgrid_outer > h2 {
font-size:15px;
}
}
div.rankgrid_outer > h2.stat {
font-size:13px;
font-weight:normal;
}
div.rankgrid_outer > h2.stat span {
display:inline-block;
border-radius:5px;
color:#FFF;
padding:4px 6px;
}
div.rankgrid_outer > h2.sd span {
background-color:#00D;
}
div.rankgrid_outer > h2.live span {
background-color:#D00;
}
div.rankgrid_outer > h2.end span {
background-color:#888;
}
div.rankgrid_outer > div div.hometop_morebar {
background-color:#EEE;
color:#888;
text-align:center;
aspect-ratio:16/9;
display:flex;
flex-wrap:nowrap;
align-content:flex-start;
align-items:center;
justify-content:center;
cursor:pointer;
font-size:15px;
}
div.rankgrid_outer > div div.hometop_morebar:hover {
background-color:#DDD;
color:#000;
}


div.rankgrid {
box-sizing:border-box;
position:relative;
width:200px;
margin:3px 3px 12px 3px;
container:grid / inline-size;
}

div.rankgrid {
}
div.rankgrid_hover {
position:absolute;
width:100%;
padding:5px;
top:-5px;
left:-5px;
background-color:#FFF;
border-radius:5px;
box-shadow:0 1px 1px rgba(0,0,0,0.1);
z-index:2;
transition:width 0.15s ease,top 0.15s ease,left 0.15s ease;
}
div.rankgrid_hover_trans {
width:calc(100% + 34px);
top:-14px;
left:-22px;
box-shadow:0 2px 6px rgba(0,0,0,0.3);
}
div.rankgrid > p.title {
overflow:hidden;
display:block;
-webkit-line-clamp:2;
display:-webkit-box;
-webkit-box-orient:vertical;
text-overflow:ellipsis;
word-break:break-all;
overflow-wrap:anywhere;
line-height:20px;
font-size:14px;
margin:0;
}
div.rankgrid_hover > p.title {
-webkit-line-clamp:1;
}
div.rankgrid > p.title a {
color:#000;
}
div.rankgrid > p.title a:hover {
color:#000;
}
div.rankgrid > p.rank_transition {
margin:3px 0 0 0;
overflow:hidden;
display:block;
-webkit-line-clamp:1;
display:-webkit-box;
-webkit-box-orient:vertical;
text-overflow:ellipsis;
word-break:break-all;
overflow-wrap:anywhere;
line-height:15px;
font-size:11px;
color:#444;
}
div.rankgrid > p.rank_transition span.arrow {
color:#999;
margin:0 1px;
font-size:10px;
}
div.rankgrid > div.icon {
width:46px;
height:46px;
margin:-22px 4px 0 0;
position:relative;
float:left;
}
div.rankgrid > div.icon .uicon {
width:42px;
height:42px;
border-radius:50%;
border:2px solid #FFF;
}
div.rankgrid > div.icon .mcn {
width:11px;
height:11px;
position:absolute;
right:-1px;
bottom:-1px;
}
div.rankgrid > div.name {
margin-top:1px;
display:flex;
flex-wrap:nowrap;
align-content:flex-start;
align-items:center;
justify-content:center;
}
div.rankgrid > div.name div.icon {
width:22px;
height:22px;
margin-right:4px;
position:relative;
}
div.rankgrid > div.name div.icon .uicon {
width:22px;
height:22px;
border-radius:50%;
}
div.rankgrid > div.name div.icon .mcn {
width:10px;
height:10px;
position:absolute;
right:-3px;
bottom:-2px;
}
div.rankgrid > div.name h3 {
flex:1;
}
div.rankgrid > div.name h3 a {
overflow:hidden;
display:block;
-webkit-line-clamp:1;
display:-webkit-box;
-webkit-box-orient:vertical;
text-overflow:ellipsis;
word-break:break-all;
overflow-wrap:anywhere;
line-height:24px;
color:#333;
font-weight:bold;
}
div.rankgrid > div.name h3 a:hover {
color:#000;
}
div.rankgrid > div.name .favstar {
width:13px;
height:13px;
margin-left:3px;
}
div.rankgrid > div.name .favstar i svg {
width:13px;
height:13px;
}
div.rankgrid > div.name i.btn {
width:14px;
height:14px;
margin-left:3px;
padding:5px;
border-radius:50%;
cursor:pointer;
}
@media (hover:hover) {
div.rankgrid > div.name i.btn {
}
}
div.rankgrid > div.name i.btn svg {
width:14px;
height:14px;
fill:#777;
}
div.rankgrid > div.name i.btn:hover {
background-color:#EEE;
}
div.rankgrid > div.name i.btn:hover svg {
fill:#000;
}
div.rankgrid_hover > div.name i.btn {
display:unset;
}
div.rankgrid > div.viewtime {
overflow:hidden;
color:#666;
display:flex;
flex-wrap:nowrap;
align-content:flex-start;
align-items:center;
justify-content:start;
height:25px;
line-height:25px;
border-bottom:1px solid #E0E0E0;
margin-bottom:3px;
}
div.rankgrid[data-is-faved]  > div.viewtime {
}
div.rankgrid[data-livestat="end"]  > div.viewtime {
}
div.rankgrid[data-livestat="sd"]  > div.viewtime {
}
div.rankgrid > div.viewtime > span {
flex:1;
text-align:center;
white-space:nowrap;
overflow:hidden;
}
div.rankgrid > div.viewtime > a {
flex:1;
color:#000;
text-align:center;
white-space:nowrap;
box-sizing:border-box;
}
div.rankgrid > div.viewtime > span.count {
flex:unset;
text-align:center;
display:block;
padding:2px 0;
height:18px;
line-height:18px;
}
div.rankgrid > div.viewtime > span.count span {
padding:0 4px 0 2px;
font-size:13px;
font-weight:bold;
border-right:1px solid #DDD;
display:inline-block;
min-width:15px;
text-align:center;
line-height:18px;
}
div.rankgrid > div.viewtime a.viewers {
color:#666;
font-size:14px;
}
div.rankgrid[data-livestat="end"]  > div.viewtime a.viewers i {
display:none;
}
div.rankgrid[data-livestat="live"]  > div.viewtime a.viewers {
font-weight:bold;
color:#F00;
font-size:16px;
}
div.rankgrid[data-livestat="live"]  > div.viewtime a.viewers span.arrow {
display:inline-block;
width:12px;
height:12px;
margin-right:3px;
vertical-align:-6px;
}
div.rankgrid[data-livestat="live"]  > div.viewtime a.viewers span.arrow i {
width:12px;
height:12px;
}
div.rankgrid[data-livestat="live"]  > div.viewtime a.viewers span.arrow i svg {
width:12px;
height:12px;
}
div.rankgrid[data-livestat="live"]  > div.viewtime a.viewers span.arrow i.up svg {
fill:#D00;
}
div.rankgrid[data-livestat="live"]  > div.viewtime a.viewers span.arrow i.same svg {
fill:#0A0;
}
div.rankgrid[data-livestat="live"]  > div.viewtime a.viewers span.arrow i.down svg {
fill:#00D;
}
div.rankgrid[data-livestat="live"]  > div.viewtime a.viewers_live.over5000 {
}
div.rankgrid[data-livestat="live"]  > div.viewtime a.viewers_live.over10000 {
}
div.rankgrid[data-twitch-loginid][data-livestat="live"]  > div.viewtime a.viewers_live {
color:#823FE5;
}
div.rankgrid > div.viewtime a.livetime {
color:#333;
font-size:13px;
}
div.rankgrid > div.viewtime a.livetime {
color:#000;
}
div.rankgrid[data-livestat="sd"]  > div.viewtime a.sddate {
color:#00C;
font-weight:bold;
font-size:16px;
}
div.rankgrid[data-livestat="sd"]  > div.viewtime span.viewers {
color:#666;
font-size:12px;
}
div.rankgrid[data-livestat="end"]  > div.viewtime a.livetime {
color:#666;
}
div.rankgrid > div.viewtime i.livemenu {
flex:unset;
width:12px;
height:12px;
padding:6px;
cursor:pointer;
margin-left:3px;
}
div.rankgrid > div.viewtime i.livemenu svg {
width:12px;
height:12px;
fill:#888;
}
div.rankgrid > div.viewtime i.livemenu:hover {
background-color:#999;
}
div.rankgrid > div.viewtime i.livemenu:hover svg {
fill:#FFF;
}
@container grid (max-width:250px) {
div.rankgrid {
margin-bottom:10px;
}
div.rankgrid > p.title {
font-size:13px;
padding-right:4px;
}
div.rankgrid > div.icon {
width:46px;
height:46px;
margin:-22px 4px 0 0;
}
div.rankgrid > div.icon .uicon {
width:42px;
height:42px;
}
div.rankgrid[data-livestat="live"]  > div.viewtime a.viewers {
font-size:15px;
}
div.rankgrid > div.viewtime a.livetime {
font-size:12px;
}
div.rankgrid[data-livestat="sd"]  > div.viewtime a.sddate {
font-size:15px;
}
div.rankgrid > div.viewtime {
height:24px;
line-height:24px;
}
div.rankgrid > div.viewtime > span.count span {
font-size:12px;
}
}
@container grid (max-width:200px) {
div.rankgrid {
margin-bottom:8px;
}
div.rankgrid > p.title {
padding-right:3px;
}
div.rankgrid > div.icon {
width:43px;
height:43px;
margin:-20px 4px 0 0;
}
div.rankgrid > div.icon .uicon {
width:39px;
height:39px;
}
div.rankgrid > div.icon .mcn {
width:10px;
height:10px;
}
}

div.rankgrid > h3 img.site {
width:13px;
height:13px;
margin-right:2px;
}
div.rankgrid > p.review {
margin:3px 0 0 0;
color:#666;
font-size:12px;
}
div.rankgrid > p.review a {
color:#333;
}
div.rankgrid > p.review a:hover {
color:#000;
}


div.rankgrid > p.date {
margin:3px 2px 0 2px;
color:#666;
font-size:11px;
line-height:1.2;
}
div.rankgrid > p.date a {
color:#333;
}
div.rankgrid > p.date a:hover {
color:#000;
}

div.rankgrid > div.thumbs {
margin-top:1px;
overflow:auto;
user-select:none;
}
div.rankgrid > div.thumbs > div.thumblist {
white-space:nowrap;
}
div.rankgrid > div.thumbs > div.thumblist span {
padding-left:1px;
box-sizing:border-box;
display:inline-block;
}
div.rankgrid > div.thumbs > div.thumblist span img {
width:100%;
aspect-ratio:16/9;
object-fit:cover;
overflow-clip-margin:unset;
}
div.rankgrid > div.thumbs > div.thumblist span:first-child {
padding-left:0;
}
/*
[data-thumbs-fulllist] div.thumbs > div.thumblist span {
flex:unset !important;
}
*/
@media (hover:hover) {
div.rankgrid > div.thumbs {
overflow:hidden;
}
}

div.rankgrid > div.btns {
margin:2px;
display:flex;
flex-wrap:nowrap;
align-content:flex-start;
align-items:center;
justify-content:end;
}

div.rankgrid > div.btns .favstar {
margin-right:4px;
}
div.rankgrid > div.btns .site {
flex:1;
}
div.rankgrid > div.btns .site img {
max-width:20px;
height:16px;
}
div.rankgrid > div.btns > i {
display:inline-block;
width:18px;
height:18px;
padding:3px;
margin-left:5px;
cursor:pointer;
border-radius:3px;
}
div.rankgrid > div.btns > i svg {
width:18px;
height:18px;
fill:#888;
}
div.rankgrid > div.btns > i:hover {
background-color:#39F;
}
div.rankgrid > div.btns > i.liveplay:hover {
background-color:#F00;
}
[data-twitch-loginid].rankgrid > div.btns > i.liveplay:hover {
background-color:#9146FF;
}
div.rankgrid > div.btns > i:hover svg {
fill:#FFF;
}
div.rankgrid > div.btns > i.comments {
width:auto;
}
div.rankgrid > div.btns > i.comments span {
font-size:11px;
color:#555;
margin-left:4px;
vertical-align:-3px;
}
div.rankgrid > div.btns > i.comments i {
width:18px;
height:18px;
vertical-align:top;
}
div.rankgrid > div.btns > i.comments:hover span {
color:#FFF;
}
div.rankgrid > div.btns > i.x {
width:15px;
height:15px;
padding:4px 5px 5px 5px;
}
div.rankgrid > div.btns > i.x svg {
width:15px;
height:15px;
}

div.rankgrid > div.poster {
container:poster / inline-size;
position:relative;
overflow:hidden;
}
div.rankgrid > div.poster span.btn_play {
z-index:6;
}
div.rankgrid > div.poster img.yimg {
width:100%;
aspect-ratio:16/9;
object-fit:cover;
cursor:pointer;
}
@keyframes poster_swap_loop {
0% {opacity:0;}
40% {opacity:0;}
50% {opacity:1;}
90% {opacity:1;}
100% {opacity:0;}
}
div.rankgrid > div.poster img.cover {
left:0;
top:0;
position:absolute;
width:100%;
height:100%;
object-fit:cover;
cursor:pointer;
z-index:2;
transition:opacity 1.5s ease;
}
div.rankgrid > div.poster div.cover {
left:0;
top:0;
position:absolute;
width:100%;
height:100%;
cursor:pointer;
z-index:2;
transition:opacity 1.5s ease;
}
div.rankgrid > div.poster div.cover img.img1 {
border-radius:3px;
left:0;
top:0;
position:absolute;
width:100%;
height:100%;
object-fit:cover;
cursor:pointer;
}
div.rankgrid > div.poster div.cover img.img2 {
right:0;
top:0;
position:absolute;
width:50%;
height:100%;
object-fit:cover;
cursor:pointer;
}
@media (hover:hover) {
div.rankgrid > div.poster:hover img.cover {
z-index:-1;
}
div.rankgrid > div.poster:hover div.cover {
z-index:-1;
}
}
div.rankgrid[data-livestat="end"] > div.poster img.yimg {
filter:brightness(0.95);
}
div.rankgrid[data-livestat="end"]:hover > div.poster img.yimg {
filter:brightness(1);
}
div.rankgrid > div.poster canvas {
right:5px;
bottom:5px;
position:absolute;
z-index:5;
cursor:pointer;
}
div.rankgrid > div.poster img.site {
z-index:4;
position:absolute;
left:5px;
top:5px;
height:16px;
}

div.rankgrid > div.poster a.icon {
top:0;
left:0;
position:absolute;
width:32px;
height:32px;
display:inline-block;
z-index:4;
padding:0 1px 1px 0;
background-color:rgba(255,255,255,1);
}
div.rankgrid > div.poster a.icon img {
width:32px;
height:32px;
}
div.rankgrid > div.poster a.mcn {
left:24px;
top:24px;
position:absolute;
width:13px;
height:13px;
z-index:5;
cursor:pointer;
display:inline-block;
}
div.rankgrid > div.poster a.mcn img {
width:13px;
height:13px;
vertical-align:0;
}

div.rankgrid > div.poster a.site {
z-index:4;
position:absolute;
left:0;
top:0;
width:32px;
height:16px;
padding:5px 0;
text-align:center;
display:inline-block;
}
div.rankgrid > div.poster a.site:hover {
}
div.rankgrid > div.poster a.site img {
height:16px;
vertical-align:0;
}
div.rankgrid > div.poster i.quickplay {
z-index:4;
position:absolute;
right:0;
bottom:0;
display:inline-block;
width:13px;
height:13px;
padding:7px;
cursor:pointer;
background-color:rgba(0,0,0,0.15);
transition:background-color 0.1s ease;
border-bottom-right-radius:3px;
}
div.rankgrid > div.poster i.quickplay svg {
width:13px;
height:13px;
fill:rgba(255,255,255,0.7);
}
@media (hover:hover) {
div.rankgrid > div.poster:hover i.quickplay {
background-color:rgba(0,0,0,0.3);
}
div.rankgrid > div.poster:hover i.quickplay svg {
fill:rgba(255,255,255,0.9);
}
}
div.rankgrid > div.poster i.quickplay:hover {
background-color:#F00;
}
div.rankgrid > div.poster i.quickplay:hover svg {
fill:#FFF;
}
[data-twitch-loginid].rankgrid > div.poster i.quickplay:hover {
background-color:#9146FF;
}
div.rankgrid > div.poster div.titlebox {
width:100%;
z-index:2;
position:absolute;
left:0;
top:0;
height:30px;
padding:2px 0 9px 0;
background:linear-gradient(to bottom,rgba(0,0,0,0.8),rgba(0,0,0,0));
border-top-left-radius:3px;
border-top-right-radius:3px;
}
div.rankgrid > div.poster div.titlebox a {
margin-left:35px;
overflow:hidden;
display:block;
-webkit-line-clamp:1;
display:-webkit-box;
-webkit-box-orient:vertical;
text-overflow:ellipsis;
word-break:break-all;
overflow-wrap:anywhere;
line-height:15px;
font-size:11px;
color:rgba(255,255,255,0.82);
padding:0 3px;
border-radius:2px;
}
div.rankgrid > div.poster div.titlebox a:hover {
color:#FFF;
}
div.rankgrid:hover > div.poster div.titlebox {
background:linear-gradient(to bottom,rgba(0,0,0,1),rgba(0,0,0,0));
}
div.rankgrid:hover > div.poster div.titlebox a {
color:rgba(255,255,255,1);
}

div.rankgrid > div.poster i.livectrlbtn {
z-index:4;
position:absolute;
right:2px;
bottom:2px;
display:inline-block;
width:16px;
height:16px;
padding:5px;
cursor:pointer;
border-radius:2px;
transition:background-color 0.1s ease;
}
div.rankgrid > div.poster i.livectrlbtn svg {
width:16px;
height:16px;
fill:rgba(255,255,255,0.6);
}
div.rankgrid > div.poster i.livectrlbtn-chat {
right:32px;
}
@media (hover:hover) {
div.rankgrid > div.poster:hover i.livectrlbtn {
background-color:rgba(0,0,0,0.5);
}
div.rankgrid > div.poster:hover i.livectrlbtn svg {
fill:rgba(255,255,255,1);
}
}
div.rankgrid > div.poster i.livectrlbtn:hover {
background-color:#09F;
}
div.rankgrid > div.poster i.livectrlbtn-chat:hover {
background-color:#F70;
}
div.rankgrid > div.poster i.livectrlbtn:hover svg {
fill:rgba(255,255,255,1);
}
@media (hover:none) {
div.rankgrid > div.poster i.livectrlbtn {
background-color:rgba(0,0,0,0.2);
}
div.rankgrid > div.poster i.livectrlbtn svg {
fill:rgba(255,255,255,0.9);
}
}
div.rankgrid > div.poster .livecomments {
z-index:3;
right:3px;
top:3px;
padding:3px 4px;
position:absolute;
height:12px;
cursor:pointer;
color:rgba(255,255,255,0.7);
background:rgba(0,0,0,0.4);
border-radius:3px;
font-size:12px;
}
div.rankgrid > div.poster .livecomments svg {
fill:rgba(255,255,255,0.7);
width:12px;
height:12px;
}
div.rankgrid > div.poster .livecomments:hover {
color:rgba(255,255,255,1);
background:rgba(0,0,0,0.7);
}
div.rankgrid > div.poster .livecomments:hover svg {
fill:rgba(255,255,255,1);
}
div.rankgrid > div.poster .livecomments .num {
margin-left:3px;
}
div.rankgrid > div.poster .favstar {
z-index:3;
left:2px;
top:2px;
padding:5px;
position:absolute;
width:13px;
height:13px;
}
div.rankgrid > div.poster .favstar i svg {
fill:rgba(255,255,255,0.6);
width:13px;
height:13px;
}
@media (hover:hover) {
div.rankgrid > div.poster .favstar i svg {
fill:rgba(255,255,255,0);
}
div.rankgrid > div.poster:hover .favstar i svg {
fill:rgba(255,255,255,0.6);
}
div.rankgrid > div.poster:hover .favstar_faved i svg {
fill:#FBBC04;
}
}
div.rankgrid > div.poster .favstar:hover i svg {
fill:#FBBC04;
}
div.rankgrid > div.poster .favstar_faved i svg {
fill:#FBBC04;
}
div.rankgrid > div.poster i.reactions {
z-index:3;
right:2px;
top:25px;
padding:3px;
position:absolute;
width:12px;
height:12px;
}
div.rankgrid > div.poster i.reactions svg {
fill:rgba(255,255,255,0.6);
width:12px;
height:12px;
}
div.rankgrid > div.poster:hover i.reactions svg {
fill:rgba(255,255,255,0.8);
}
div.rankgrid > div.poster i.reactions:hover svg {
fill:rgba(255,255,255,1);
}
div.rankgrid > div.poster i.reactions_on svg {
fill:rgba(255,255,255,0.9);
}
div.rankgrid > div.poster i.reactions_on:hover svg {
fill:rgba(255,255,255,1);
}
div.rankgrid > div.poster .toprightitems {
right:3px;
top:3px;
position:absolute;
z-index:5;
display:flex;
flex-wrap:nowrap;
align-content:flex-start;
align-items:center;
justify-content:start;
}
div.rankgrid > div.poster .toprightitems .mcn {
width:11px;
height:11px;
margin-right:3px;
}
div.rankgrid > div.poster .count {
display:inline-block;
left:3px;
top:3px;
position:absolute;
z-index:5;
font-size:11px;
color:rgba(255,255,255,0.6);
background-color:rgba(102,102,102,0.6);
padding:2px;
border-radius:2px;
display:none;
}
div.rankgrid > div.poster .sdafter {
display:inline-block;
right:2px;
top:2px;
position:absolute;
z-index:5;
color:#FFF;
background-color:#00C;
padding:3px;
font-size:13px;
border-radius:2px;
}
div.rankgrid > div.poster .viewers {
right:3px;
top:3px;
position:absolute;
z-index:5;
color:rgba(255,255,255,0.9);
background-color:#888;
padding:3px;
border-left:4px solid #F00;
font-size:14px;
border-radius:3px;
}
[data-twitch-loginid].rankgrid > div.poster .viewers {
border-color:#823FE5;
}
div.rankgrid > div.poster .viewers i {
width:12px;
height:12px;
margin-right:1px;
vertical-align:0;
}
div.rankgrid > div.poster .viewers i svg {
width:12px;
height:12px;
fill:rgba(255,255,255,0.8);
}
div.rankgrid[data-livestat="live"] > div.poster .viewers {
color:#FFF;
background-color:#F00;
border:0;
}
div.rankgrid[data-livestat="live"][data-twitch-loginid] > div.poster .viewers {
background-color:#823FE5;
}
div.rankgrid > div.poster .sdviewers {
position:absolute;
left:3px;
bottom:3px;
color:rgba(255,255,255,0.7);
background-color:rgba(0,0,0,0.6);
font-size:12px;
padding:3px;
z-index:4;
border:0;
border-top-right-radius:3px;
border-radius:2px;
}
div.rankgrid > div.poster .sddate {
right:3px;
top:3px;
position:absolute;
z-index:5;
color:#FFF;
background-color:#00D;
padding:3px;
font-size:14px;
border-radius:3px;
}
div.rankgrid > div.poster .endmark {
right:3px;
top:3px;
position:absolute;
z-index:5;
color:rgba(255,255,255,0.9);
background-color:#666;
padding:3px;
font-size:12px;
border-radius:3px;
}
div.rankgrid > div.poster .livetime {
left:3px;
bottom:3px;
position:absolute;
color:rgba(255,255,255,0.75);
background-color:rgba(0,0,0,0.6);
font-size:12px;
padding:3px;
z-index:5;
border-radius:2px;
}
div.rankgrid:hover > div.poster .livetime {
background-color:rgba(0,0,0,0.7);
color:rgba(255,255,255,0.9);
}
div.rankgrid > div.poster .livetime:hover {
background-color:rgba(0,0,0,0.9);
color:rgba(255,255,255,0.95);
}
div.rankgrid > div.poster .ssnavi_alt {
position:absolute;
left:0;
right:0;
bottom:4px;
margin:0 auto;
display:inline-block;
width:100px;
text-align:center;
}
div.rankgrid > div.poster .ssnavi_alt span {
border-radius:3px;
padding:4px;
background-color:rgba(0,0,0,0.55);
color:rgba(255,255,255,0.8);
display:inline-block;
font-size:11px;
}
div.rankgrid > div.poster .ssnavi_bar {
position:absolute;
right:0;
bottom:0;
display:block;
width:100%;
height:4px;
background-color:#F00;
z-index:6;
}
div.rankgrid[data-twitch-loginid] > div.poster .ssnavi_bar {
background-color:#9146FF;
}



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

#sshistory_box {
position:absolute;
background-color:rgba(0,0,0,0.9);
overflow:auto;
z-index:9;
}
@media (hover:hover) {
#sshistory_box::-webkit-scrollbar {
height:12px;
}
#sshistory_box::-webkit-scrollbar-track {
background-color:#000;
border-radius:6px;
}
#sshistory_box::-webkit-scrollbar-thumb {
background-color:#333;
border-radius:6px;
}
#sshistory_box::-webkit-scrollbar-thumb:hover {
background-color:#666;
}
}
#sshistory_ctrl {
position:absolute;
width:150px;
height:50px;
display:flex;
flex-wrap:nowrap;
align-content:flex-start;
align-items:center;
justify-content:start;
z-index:9;
}
#sshistory_ctrl i {
width:16px;
height:16px;
padding:12px;
margin:5px;
border-radius:50%;
background-color:#888;
box-shadow:0 1px 3px rgba(0,0,0,0.3);
cursor:pointer;
}
#sshistory_ctrl i svg {
width:16px;
height:16px;
fill:#EEE;
}
#sshistory_ctrl i:hover {
background-color:#39F;
}
#sshistory_ctrl i.close:hover {
background-color:#D33;
}
#sshistory_ctrl i:hover svg {
fill:#FFF;
}
#sshistory_ctrl i.disabled {
background-color:rgba(153,153,153,0.5) !important;
cursor:default !important;
box-shadow:unset !important;
}
#sshistory_ctrl i.disabled svg {
fill:rgba(255,255,255,0.5) !important;
}
#sshistory_ctrl i.disabled:hover {
background-color:rgba(153,153,153,0.5) !important;
}
#sshistory_box_inner {
cursor:grab;
}
div.sshistory_list {
display:flex;
flex-wrap:nowrap;
align-content:flex-start;
align-items:start;
justify-content:start;
}
div.sshistory_list div {
width:400px;
padding:5px;
flex-shrink:0;
}
div.sshistory_list div img {
width:100%;
aspect-ratio:16/9;
object-fit:cover;
}
div.sshistory_list div p {
text-align:center;
font-size:12px;
color:#CCC;
padding:4px 0 0 0;
}

@media screen and (max-width:500px) {
div.sshistory_list div {
width:350px;
}
}
@media screen and (max-width:400px) {
div.sshistory_list div {
width:300px;
}
}

#livemenu {
z-index:110;
position:absolute;
background-color:rgba(0,0,0,0.9);
color:#EEE;
width:250px;
}
#livemenu > div {
padding:0 10px;
font-size:14px;
cursor:pointer;
height:34px;
line-height:34px;
overflow:hidden;
}
#livemenu > div:hover {
color:#FFF;
background-color:#333;
}
#livemenu > div > span.info {
white-space:nowrap;
font-size:11px;
color:#CCC;
margin-left:3px;
float:right;
display:inline-block;
}
#livemenu > div i {
width:15px;
height:15px;
vertical-align:-9px;
margin-right:5px;
}
#livemenu > div i svg {
width:15px;
height:15px;
fill:#CCC;
}
#livemenu > div:hover i svg {
fill:#FFF;
}
#livemenu > hr {
border-style:none;
border-top:1px solid #666;
}
#livemenu > p.cname {
font-size:12px;
line-height:1.2;
color:#CCC;
padding:5px;
}
#livemenu > p.cname img.site {
margin-left:3px;
height:18px;
float:right;
}
#livemenu > p.cname a {
line-height:18px;
color:#CCC;
}
#home_livenote {
z-index:10;
position:absolute;
background-color:rgba(0,0,0,0.9);
color:rgba(255,255,255,0.9);
border-radius:5px;
padding:3px 6px;
}
#home_livenote > div {
overflow:hidden;
display:block;
-webkit-line-clamp:2;
display:-webkit-box;
-webkit-box-orient:vertical;
text-overflow:ellipsis;
word-break:break-all;
overflow-wrap:anywhere;
line-height:16px;
max-height:36px;
font-size:12px;
}

div.livevote_box {
margin:3px 2px 0 2px;
box-sizing:border-box;
}
.ranklist div.livevote_box {
max-width:200px;
}
div.livevote_box div.cont {
font-size:12px;
}
div.livevote_box div.cont i {
width:16px;
height:16px;
padding:2px;
cursor:pointer;
}
div.livevote_box div.cont i svg {
width:16px;
height:16px;
fill:#999;
}
div.livevote_box div.cont i.voting svg {
animation:spin 1s linear infinite;
}
@keyframes ani_voted {
0% {transform:scale(1,1);}
50% {transform:scale(1.4,1.4);}
100% {transform:scale(1,1);}
}
div.livevote_box div.cont i.voted {
animation:ani_voted 0.3s ease 0s 1 forwards;
}
div.livevote_box div.cont i.dislike {
margin-left:7px;
}
div.livevote_box div.cont i.liked svg {
fill:#F47;
}
div.livevote_box div.cont i.disliked {
}
div.livevote_box div.cont i.disliked svg {
fill:#47F;
}
div.livevote_box div.cont i.like:hover svg {
fill:#F36;
}
div.livevote_box div.cont i.dislike:hover svg {
fill:#36F;
}
div.livevote_box div.cont i:hover svg {
}
div.livevote_box div.cont span.votes {
color:#666;
padding-left:3px;
vertical-align:-2px;
}
div.livevote_box div.cont .comments {
margin-left:6px;
color:#666;
vertical-align:-2px;
}
div.livevote_box div.cont .comments i {
width:13px;
height:13px;
margin-right:2px;
vertical-align:0;
}
div.livevote_box div.cont .comments i svg {
width:13px;
height:13px;
fill:#AAA;
}
div.livevote_box div.cont .comments:hover {
color:#000;
}
div.livevote_box div.cont .comments:hover svg {
fill:#000;
}
div.livevote_box_compact {
width:100%;
margin:3px auto 0 auto;
}
div.livevote_box_compact div.cont {
display:flex;
flex-wrap:nowrap;
align-content:flex-start;
align-items:center;
justify-content:end;
width:100%;
font-size:12px;
}
div.livevote_box_compact div.cont span.votebtn {
height:13px;
padding:2px 5px 2px 3px;
border-radius:8px;
cursor:pointer;
background-color:#AAA;
margin-left:4px;
color:rgba(255,255,255,0.8);
}
div.livevote_box_compact div.cont span.votebtn i {
vertical-align:1px;
}
div.livevote_box_compact div.cont span.votebtn svg {
width:13px;
height:13px;
fill:rgba(255,255,255,0.9);
}
div.livevote_box_compact div.cont span.voting svg {
animation:spin 1s linear infinite;
}
div.livevote_box_compact div.cont span.voted {
animation:ani_voted 0.3s ease 0s 1 forwards;
}
div.livevote_box_compact div.cont span.votebtn-liked {
background-color:#F47;
}
div.livevote_box_compact div.cont span.votebtn-disliked {
background-color:#47F;
}
div.livevote_box_compact div.cont span.votebtn-like:hover {
background-color:#E36;
color:rgba(255,255,255,1);
}
div.livevote_box_compact div.cont span.votebtn-dislike:hover {
background-color:#36E;
color:rgba(255,255,255,1);
}
div.livevote_box_compact div.cont i:hover svg {
fill:#FFF;
}
div.livevote_box_compact div.cont span.votebtn span.votes {
white-space:nowrap;
padding-left:2px;
}

div.livevote_box_compact div.cont .comments {
padding:2px;
color:#333;
}
div.livevote_box_compact div.cont .comments:hover {
color:#333;
}
div.livevote_box_compact div.cont .comments i {
width:12px;
height:12px;
margin-right:2px;
vertical-align:0;
}
div.livevote_box_compact div.cont .comments i svg {
width:12px;
height:12px;
fill:#999;
}
div.livevote_box_compact div.cont .comments:hover i svg {
fill:#333;
}
span.livevote_mark {
height:21px;
line-height:21px;
padding:0 6px;
border-radius:10.5px;
background-color:#F47;
display:inline-block;
color:#FFF;
margin-right:2px;
}
span.livevote_mark i {
width:13px;
height:13px;
vertical-align:-4px;
margin-right:2px;
}
span.livevote_mark svg {
width:13px;
height:13px;
fill:#FFF;
}
span.livevote_mark_dislike {
background-color:#47F !important;
}




#voted_msg {
position:absolute;
z-index:92;
width:250px;
top:100px;
left:0;
border-radius:4px;
background-color:#F47;
padding:7px;
box-shadow:0 2px 3px rgba(0,0,0,0.3);
color:#FFF;
transition:opacity 0.3s ease;
box-sizing:border-box;
}
#voted_msg span.cbtn {
color:#F47;
display:inline-block;
border-radius:10px;
height:20px;
line-height:20px;
padding:0 10px;
background-color:#FFF;
cursor:pointer;
}
#voted_msg span.cbtn:hover {
text-decoration:underline;
background-color:rgba(255,255,255,0.85);
}
#voted_msg i.say {
background-color:#F47;
position:absolute;
top:-4px;
right:9px;
display:inline-block;
height:7px;
width:7px;
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
display:none;
}
#voted_msg i.closebtn {
background-color:#FFF;
position:absolute;
top:3px;
right:4px;
display:inline-block;
height:7px;
width:7px;
border-radius:50%;
padding:4px;
cursor:pointer;
}
#voted_msg i.closebtn:hover {
background-color:rgba(255,255,255,0.85);
}
#voted_msg i.closebtn svg {
width:7px;
height:7px;
fill:#F47;
}
.voted_msg_dislike {
background-color:#47F !important;
}
.voted_msg_dislike i.say {
background-color:#47F !important;
right:unset;
left:9px;
}
.voted_msg_dislike i.closebtn svg {
fill:#47F !important;
}
.voted_msg_dislike span.cbtn {
color:#47F !important;
}

i.live_thumbs_navi {
position:absolute;
width:12px;
height:12px;
background-color:#DDD;
border-radius:50%;
padding:6px;
box-shadow:0 1px 3px rgba(0,0,0,0.15);
user-select:none;
}
i.live_thumbs_navi svg {
width:12px;
height:12px;
fill:#333;
}
i.live_thumbs_navi:hover {
background-color:#09F;
}
i.live_thumbs_navi:hover svg {
fill:#FFF;
}








/* ### activity ### */








div.activity_list_outer {
max-width:1050px;
margin:0 auto;
padding-left:20px;
}
@media screen and (max-width:500px) {
div.activity_list_outer {
margin:0 3px;
padding-left:0;
}
}

div.activity_list_head {
display:flex;
flex-wrap:wrap;
align-content:flex-start;
align-items:stretch;
justify-content:start;
position:sticky;
top:0px;
z-index:10;
}
div.activity_list_head div {
box-sizing:border-box;
padding:4px 2px;
background-color:#EEE;
border-bottom:1px solid #CCC;
border-top:1px solid #CCC;
border-left:1px solid #CCC;
line-height:1.1;
text-align:center;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
div.activity_list_head div:first-child {
border-left:unset;
}
div.activity_list_head div.site {
width:22px;
}
div.activity_list_head div.mcn {
width:20px;
}
div.activity_list_head div.icon {
width:40px;
}
div.activity_list_head div.name {
width:170px;
}
div.activity_list_head div.total_viewtimes {
flex:1;
}
div.activity_list_head div.total_times {
flex:1;
}
div.activity_list_head div.total_views {
flex:1;
}
div.activity_list_head div.max_views {
flex:1;
}
div.activity_list_head div.avg_views {
flex:1;
}
div.activity_list_head div.streamings {
flex:1;
}
div.activity_list_head div.subs {
flex:1;
}
div.activity_list_head div.days {
flex:1;
}
div.activity_list_head div.breaker {
display:none;
width:0;
padding:0;
border:0;
}
@media screen and (max-width:1000px) {
div.activity_list_head div.name {
width:160px;
}
}
@media screen and (max-width:900px) {
div.activity_list_head div.name {
width:150px;
}
}
@media screen and (max-width:800px) {
div.activity_list_head div.site {
border-bottom:0;
}
div.activity_list_head div.mcn {
border-bottom:0;
}
div.activity_list_head div.icon {
border-bottom:0;
}
div.activity_list_head div.name {
width:140px;
border-bottom:0;
}
div.activity_list_head div.total_viewtimes {
border-bottom:0;
}
div.activity_list_head div.total_times {
border-bottom:0;
}
div.activity_list_head div.max_views {
border-left:0;
}
div.activity_list_head div.breaker {
display:block;
flex: 0 0 100%;
}
}



div.activity_list {
display:flex;
flex-wrap:wrap;
align-content:flex-start;
align-items:stretch;
justify-content:start;
position:relative;
}
div.activity_list:hover {
background-color:#F9F9F9;
}
div.activity_list > div {
box-sizing:border-box;
padding:2px 3px;
border-bottom:1px solid #DDD;
line-height:1.2;
word-break:break-all;
}
div.activity_list > div:first-child {
}
div.activity_list div.site {
width:22px;
justify-content:center;
display:flex;
align-items:center;
}
div.activity_list div.site img {
width:16px;
height:16px;
}
div.activity_list div.mcn {
width:20px;
justify-content:center;
display:flex;
align-items:center;
}
div.activity_list div.mcn img {
width:14px;
height:14px;
}
div.activity_list div.icon {
width:40px;
justify-content:center;
display:flex;
align-items:center;
}
div.activity_list div.icon img {
border-radius:50%;
width:32px;
height:32px;
}
div.activity_list div.name {
width:170px;
display:flex;
align-items:center;
}
div.activity_list div.name h3 {
overflow:hidden;
display:block;
-webkit-line-clamp:1;
display:-webkit-box;
-webkit-box-orient:vertical;
text-overflow:ellipsis;
word-break:break-all;
overflow-wrap:anywhere;
font-weight:bold;
}
div.activity_list div.total_viewtimes {
flex:1;
}
div.activity_list div.total_viewtimes p.v {
margin-top:5px;
}
div.activity_list div.total_viewtimes p.bar {
background-color:#F00;
height:5px;
margin:0;
}
div.activity_list[data-twitch-loginid] div.total_viewtimes p.bar {
background-color:#9146FF;
}
div.activity_list div.total_times {
display:flex;
align-items:center;
justify-content:right;
flex:1;
}
div.activity_list div.total_views {
display:flex;
align-items:center;
justify-content:right;
flex:1;
}
div.activity_list div.max_views {
display:flex;
align-items:center;
justify-content:right;
flex:1;
}
div.activity_list div.avg_views {
display:flex;
align-items:center;
justify-content:right;
flex:1;
}
div.activity_list div.streamings {
display:flex;
align-items:center;
justify-content:right;
flex:1;
}
div.activity_list div.subs {
display:flex;
align-items:center;
justify-content:right;
flex:1;
}
div.activity_list div.days {
display:flex;
align-items:center;
justify-content:right;
flex:1;
}
div.activity_list div.breaker {
display:none;
width:0;
padding:0;
border:0;
}
div.activity_list > .itemcount {
position:absolute;
font-size:10px;
color:#888;
left:-27px;
top:-4px;
width:23px;
text-align:right;
white-space:nowrap;
}
@media screen and (max-width:500px) {
div.activity_list > .itemcount {
display:none;
}
}
@media screen and (max-width:1000px) {
div.activity_list div.name {
width:160px;
}
}
@media screen and (max-width:900px) {
div.activity_list div.name {
width:150px;
}
}
@media screen and (max-width:800px) {
div.activity_list div.name {
width:140px;
}
div.activity_list div.breaker {
display:block;
flex: 0 0 100%;
}
}











/* ### timeline ### */


#timeline_outer {
max-width:950px;
margin:15px auto;
}
#timeline_outer tr.datehead {
}
#timeline_outer tr.datehead td {
background-color:#DDD;
padding:5px 0;
text-align:center;
}
@media screen and (max-width:500px) {
#timeline_outer {
margin:10px 0;
}
}
#timeline_outer td.datetime {
white-space:nowrap;
background-color:#F8F8F8;
text-align:center;
padding:0 6px;
}
#timeline_outer td.datetime_date {
background-color:#F0F0F0;
}
#timeline_outer td.datetime_hour {
background-color:#F4F4F4;
}
#timeline_outer td.poster {
padding:0;
position:relative;
}
#timeline_outer td.poster img.yimg {
height:44px;
aspect-ratio:16/9;
object-fit:cover;
}
#timeline_outer td.site {
padding-left:4px;
width:29px;
text-align:center;
}
#timeline_outer td.site img {
height:18px;
}
#timeline_outer td.icon {
padding:4px 5px;
}
#timeline_outer td.icon div {
width:36px;
height:36px;
position:relative;
}
#timeline_outer td.icon img.uicon {
width:36px;
height:36px;
border-radius:50%;
}
#timeline_outer td.icon .mcn {
width:11px;
height:11px;
opacity:0.9;
position:absolute;
bottom:-2px;
right:-2px;
}
@media screen and (max-width:500px) {
#timeline_outer td.poster {
display:none;
}
#timeline_outer td.datetime {
padding:0 2px;
}
#timeline_outer td.icon {
padding:2px 3px;
}
#timeline_outer td.icon div {
width:32px;
height:32px;
}
#timeline_outer td.icon img.uicon {
width:32px;
height:32px;
}
#timeline_outer td.icon img.site {
height:18px;
position:absolute;
top:-2px;
left:-3px;
}
}
#timeline_outer td.cont {
padding:3px 0;
}
#timeline_outer td.cont h3 {
overflow:hidden;
display:block;
-webkit-line-clamp:1;
display:-webkit-box;
-webkit-box-orient:vertical;
text-overflow:ellipsis;
word-break:break-all;
overflow-wrap:anywhere;
line-height:1.3;
}
#timeline_outer td.cont h3 a {
font-weight:bold;
color:#000;
}
#timeline_outer td.cont p.title {
overflow:hidden;
display:block;
-webkit-line-clamp:1;
display:-webkit-box;
-webkit-box-orient:vertical;
text-overflow:ellipsis;
word-break:break-all;
overflow-wrap:anywhere;
margin:3px 0 0 0;
line-height:1.3;
}
#timeline_outer td.cont p.title a {
}
#timeline_outer td.cont p.date {
height:16px;
line-height:16px;
overflow:hidden;
display:block;
-webkit-line-clamp:1;
display:-webkit-box;
-webkit-box-orient:vertical;
text-overflow:ellipsis;
word-break:break-all;
overflow-wrap:anywhere;
margin:2px 0 0 0;
font-size:12px;
color:#666;
}
#timeline_outer td.cont a.islive {
color:#D00;
}
#timeline_outer p.line_prev {
border-top:1px solid #D00;
}
#timeline_outer p.line_next {
border-bottom:1px solid #00D;
}

/* ### livelist_by_chat ### */

div.livelist_by_chat_outer {
margin:15px auto;
max-width:1100px;
}
@media screen and (max-width:500px) {
div.livelist_by_chat_outer {
margin:10px 3px;
}
}

div.livelist_by_chat {
container:livelist / inline-size;
display:flex;
flex-wrap:wrap;
align-content:flex-start;
align-items:center;
justify-content:start;
box-sizing:border-box;
border-top:1px solid #DDD;
}
div.livelist_by_chat:first-child {
border-top:unset;
margin-top:unset;
padding-top:unset;
}
div.livelist_by_chat:hover {
}
div.livelist_by_chat > div {
box-sizing:border-box;
}
div.livelist_by_chat > div.icon {
position:relative;
width:55px;
height:55px;
margin:0 10px;
}
div.livelist_by_chat > div.icon .uicon {
width:55px;
height:55px;
border-radius:50%;
}
div.livelist_by_chat > div.icon .mcn {
width:13px;
height:13px;
opacity:0.9;
position:absolute;
bottom:-2px;
right:-2px;
}
div.livelist_by_chat > div.cont {
padding:6px 0;
flex:1;
}
div.livelist_by_chat > div.cont > div.icon {
position:relative;
width:30px;
height:30px;
margin:2px 4px 0 0;
float:left;
}
div.livelist_by_chat > div.cont > div.icon .uicon {
width:30px;
height:30px;
border-radius:50%;
}
div.livelist_by_chat > div.cont > div.icon .mcn {
width:11px;
height:11px;
opacity:0.9;
position:absolute;
bottom:-2px;
right:-2px;
}
div.livelist_by_chat > div.cont p.title {
max-height:17px;
line-height:17px;
overflow:hidden;
display:block;
-webkit-line-clamp:1;
display:-webkit-box;
-webkit-box-orient:vertical;
text-overflow:ellipsis;
word-break:break-all;
overflow-wrap:anywhere;
margin:3px 0 0 0;
}
div.livelist_by_chat > div.cont p.title a {
color:#000;
}
div.livelist_by_chat > div.cont p.sd_title {
max-height:36px;
-webkit-line-clamp:2;
margin-bottom:0;
}
div.livelist_by_chat > div.cont h3 {
height:18px;
line-height:18px;
overflow:hidden;
display:block;
-webkit-line-clamp:1;
display:-webkit-box;
-webkit-box-orient:vertical;
text-overflow:ellipsis;
word-break:break-all;
overflow-wrap:anywhere;
}
div.livelist_by_chat > div.cont h3 a {
color:#000;
font-size:14px;
font-weight:bold;
}
div.livelist_by_chat > div.cont p.stats {
margin:3px 0 0 0;
height:18px;
line-height:18px;
overflow:hidden;
display:block;
-webkit-line-clamp:1;
display:-webkit-box;
-webkit-box-orient:vertical;
text-overflow:ellipsis;
word-break:break-all;
overflow-wrap:anywhere;
}
div.livelist_by_chat > div.cont p.stats a {
color:#333;
}
div.livelist_by_chat > div.cont div.chatline_box {
border-radius:4px;
margin:3px 0 0 0;
border:1px solid #BBB;
padding:2px 3px;
cursor:pointer;
color:#333;
}
div.livelist_by_chat > div.cont div.chatline_box:hover {
border-color:#999;
color:#000;
}
div.livelist_by_chat > div.cont div.chatline_box_cont {
overflow:hidden;
display:block;
-webkit-line-clamp:2;
display:-webkit-box;
-webkit-box-orient:vertical;
text-overflow:ellipsis;
word-break:break-all;
overflow-wrap:anywhere;
line-height:17px;
}

div.livelist_by_chat > div.poster {
width:170px;
position:relative;
container:poster / inline-size;
}
div.livelist_by_chat > div.poster a img.yimg {
width:170px;
aspect-ratio:16/9;
object-fit:cover;
}
div.livelist_by_chat > div.viewtime {
min-width:110px;
text-align:center;
white-space:nowrap;
overflow:hidden;
}
div.livelist_by_chat > div.viewtime a {
color:#000;
}
div.livelist_by_chat > div.viewtime a.viewers {
color:#000;
}
div.livelist_by_chat > div.viewtime a.viewers em {
font-size:17px;
}
div.livelist_by_chat > div.viewtime p.livetime {
margin-top:8px;
}
div.livelist_by_chat > div.viewtime p.livetime a {	
color:#333;
}
@media screen and (max-width:900px) {
div.livelist_by_chat > div.icon {
width:44px;
height:44px;
margin:0 6px;
}
div.livelist_by_chat > div.icon .uicon {
width:44px;
height:44px;
}
div.livelist_by_chat > div.icon .mcn {
width:12px;
height:12px;
}
div.livelist_by_chat > div.cont {
}
div.livelist_by_chat > div.cont p.title a {
font-size:13px;
}
div.livelist_by_chat > div.cont h3 a {
font-size:13px;
}
div.livelist_by_chat > div.poster {
width:140px;
}
div.livelist_by_chat > div.poster a img.yimg {
width:140px;
}
div.livelist_by_chat > div.viewtime {
min-width:100px;
}
div.livelist_by_chat > div.viewtime a.viewers em {
font-size:16px;
}
div.livelist_by_chat > div.viewtime a.sdtime {
font-size:16px;
}
}
@media screen and (max-width:600px) {
div.livelist_by_chat > div.cont {
padding:4px 0;
margin-left:5px;
}
div.livelist_by_chat > div.cont p.title {
max-height:16px;
line-height:16px;
margin:0;
font-size:12px;
}
div.livelist_by_chat > div.cont p.sd_title {
max-height:32px;
-webkit-line-clamp:2;
}
div.livelist_by_chat > div.cont h3 {
height:17px;
line-height:17px;
}
div.livelist_by_chat > div.cont h3 a {
font-size:13px;
}
div.livelist_by_chat > div.icon {
display:none;
}
div.livelist_by_chat > div.poster {
width:120px;
}
div.livelist_by_chat > div.poster a img.yimg {
width:120px;
}
div.livelist_by_chat > div.viewtime {
min-width:90px;
}
div.livelist_by_chat > div.viewtime a.viewers em {
font-size:14px;
}
div.livelist_by_chat > div.viewtime a.viewers {
margin-bottom:5px;
}
}

/* ### ranklist ### */

div.ranklist_outer {
max-width:980px;
margin:0 auto;
}
@media screen and (max-width:500px) {
div.ranklist_outer {
margin:0 3px;
}
}


div.ranklist_box {
background-color:#FFF;
}
div.ranklist_ss_head {
background:linear-gradient(95deg,#03F,#F03 90%,#FF0);
padding:1px;
}
div.ranklist_ss_head > div {
padding:10px;
color:rgba(255,255,255,0.9);
font-size:20px;
border-top:1px solid rgba(255,255,255,0.4);
border-left:1px solid rgba(255,255,255,0.4);
border-bottom:1px solid rgba(0,0,0,0.3);
border-right:1px solid rgba(0,0,0,0.3);
}

div.ranklist_count {
display:flex;
flex-wrap:wrap;
align-content:flex-start;
align-items:center;
width:100%;
justify-content:start;
background-color:#F4F4F4;
border-top:1px solid #CCC;
position:relative;
}
div.ranklist_count > div {
height:24px;
line-height:24px;
box-sizing:border-box;
padding:0 1px;
}
div.ranklist_count > div.this {
background-color:#E8E8E8;
}
div.ranklist_count > .rankcount {
width:28px;
text-align:center;
font-size:12px;
color:#333;
background-color:#DDD;
}
div.ranklist_count > div.item {
flex:1;
text-align:center;
}
div.ranklist_count > div.item a {
color:#000;
}
div.ranklist_count > div.viewtime {
}
div.ranklist_count > div.viewtime em {
font-size:15px;
}
div.ranklist_count > div.lcount {
}
div.ranklist_count > .itemcount {
position:absolute;
font-size:10px;
color:#888;
left:-27px;
top:-4px;
width:23px;
text-align:right;
white-space:nowrap;
}
@media screen and (max-width:500px) {
div.ranklist_count > div {
}
div.ranklist_count > .itemcount {
display:none;
}
}

div.ranklist {
display:flex;
flex-wrap:wrap;
align-content:flex-start;
align-items:center;
width:100%;
justify-content:start;
box-sizing:border-box;
}
@media screen and (max-width:500px) {
div.ranklist {
padding:0;
}
}
div.ranklist > div {
box-sizing:border-box;
}
/*
div.ranklist {
border-left:4px solid #F00;
}
[data-twitch-loginid] div.ranklist {
border-left-color:#9146FF;
}
*/
div.ranklist > div.rank {
text-align:center;
white-space:nowrap;
width:40px;
}
div.ranklist > div.rank_top10 {
font-size:1.15em;
font-weight:bold;
}
div.ranklist > div.rank_under100 {
font-size:0.9em;
}
div.ranklist > div.rank img {
width:16px;
height:16px;
margin-bottom:5px;
}
div.ranklist > div.icon {
width:60px;
height:60px;
position:relative;
margin:0 3px 0 11px;
}
div.ranklist > div.icon .uicon {
width:60px;
height:60px;
border-radius:50%;
}
div.ranklist > div.icon .mcn {
width:13px;
height:13px;
opacity:0.9;
position:absolute;
bottom:-2px;
right:-2px;
}
div.ranklist > div.icon img.site {
height:18px;
position:absolute;
top:-5px;
left:-10px;
}
div.ranklist > div.site {
width:40px;
text-align:center;
}
div.ranklist > div.site img {
height:18px;
}
div.ranklist_by_channel div.icon {
width:64px;
height:64px;
margin:0 10px;
}
div.ranklist_by_channel div.icon .uicon {
width:64px;
height:64px;
}
div.ranklist > div.cont {
flex:1;
padding:8px;
}
div.ranklist > div.cont p.cname {
overflow:hidden;
display:block;
-webkit-line-clamp:1;
display:-webkit-box;
-webkit-box-orient:vertical;
text-overflow:ellipsis;
word-break:break-all;
overflow-wrap:anywhere;
line-height:1.3;
margin:4px 0;
}
div.ranklist > div.cont p.cname a {
color:#000;
}
div.ranklist > div.cont h3 {
overflow:hidden;
display:block;
-webkit-line-clamp:1;
display:-webkit-box;
-webkit-box-orient:vertical;
text-overflow:ellipsis;
word-break:break-all;
overflow-wrap:anywhere;
line-height:1.3;
font-size:14px;
}
div.ranklist > div.cont h3 a {
font-size:14px;
font-weight:bold;
color:#000;
}
div.ranklist > div.cont p.title {
overflow:hidden;
display:block;
-webkit-line-clamp:1;
display:-webkit-box;
-webkit-box-orient:vertical;
text-overflow:ellipsis;
word-break:break-all;
overflow-wrap:anywhere;
line-height:1.3;
margin:5px 0 5px 0;
font-size:14px;
}
div.ranklist > div.cont p.title a {
color:#000;
}
div.ranklist > div.cont p.description {
overflow:hidden;
display:block;
-webkit-line-clamp:2;
display:-webkit-box;
-webkit-box-orient:vertical;
text-overflow:ellipsis;
word-break:break-all;
overflow-wrap:anywhere;
line-height:18px;
margin:2px 0;
}
div.ranklist > div.cont p.description a {
color:#333;
}
div.ranklist > div.cont > div.date {
overflow:hidden;
display:block;
-webkit-line-clamp:1;
display:-webkit-box;
-webkit-box-orient:vertical;
text-overflow:ellipsis;
word-break:break-all;
overflow-wrap:anywhere;
margin:2px 0 0 0;
line-height:16px;
font-size:12px;
color:#666;
}
div.ranklist > div.cont > div.date a {
color:#666;
}





div.ranklist > div.poster {
height:92px;
aspect-ratio:16/9;
position:relative;
container:poster / inline-size;
}
div.ranklist > div.poster img.yimg {
height:92px;
aspect-ratio:16/9;
object-fit:cover;
}
div.ranklist > div.poster img.site {
z-index:4;
position:absolute;
left:5px;
top:5px;
height:18px;
}
div.ranklist > div.poster canvas {
right:2px;
bottom:5px;
position:absolute;
z-index:5;
cursor:pointer;
}


div.ranklist div.btns {
margin:0 4px;
padding-left:3px;
border-left:1px solid #DDD;
}
div.ranklist div.btns i.btn {
width:15px;
height:15px;
padding:5px;
cursor:pointer;
z-index:2;
display:block;
border-radius:3px;
margin:1px 0;
}
div.ranklist div.btns i.btn_sshistory {
margin-top:2px;
}
div.ranklist div.btns i.btn svg {
width:15px;
height:15px;
fill:#999;
}
div.ranklist div.btns i.btn:hover svg {
fill:#FFF;
}
div.ranklist div.btns i.btn:hover {
}
div.ranklist div.btns i.btn_info:hover {
background-color:#0C6;
}
div.ranklist div.btns i.btn_extract:hover {
background-color:#C0D;
}
div.ranklist div.btns i.btn_sshistory:hover {
background-color:#09F;
}
div.ranklist div.btns i.btn_comment:hover {
background-color:#F80;
}
div.ranklist_by_channel div.ranklist {
padding:5px 0;
}

div.ranklist_head {
border:unset;
background-color:#FFF;
font-size:12px;
box-sizing:border-box;
}
div.ranklist_head > div {
text-align:center;
height:28px;
line-height:28px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
div.ranklist_head > div.rank {
width:22px !important;
}
div.ranklist_head > div.rankcount {
background-color:#E8E8E8 !important;
}
div.ranklist_head > div.viewtime {
}
div.ranklist_head > div.times {
}
div.ranklist_head a {
}
div.ranklist_head > div:first-child {
}
div.ranklist_head > div:last-child {
}
div.ranklist_head > div.this {
background-color:#EEE !important;
}
div.ranklist_head > div.this a {
font-weight:bold;
}

@container gridframe (max-width:950px) {
div.ranklist > div.icon {
margin:0 2px 0 10px;
width:50px;
height:50px;
}
div.ranklist > div.icon .uicon {
width:50px;
height:50px;
}
div.ranklist_by_channel div.icon {
margin:0 8px;
}
div.ranklist > div.poster {
height:80px;
}
div.ranklist > div.poster img.yimg {
height:80px;
}
div.ranklist_count > div.viewtime em {
font-size:15px;
}
}
@container gridframe (max-width:750px) {
div.ranklist > div.icon {
width:44px;
height:44px;
}
div.ranklist > div.icon .uicon {
width:44px;
height:44px;
}
div.ranklist > div.icon .mcn {
width:11px;
height:11px;
bottom:-1px;
right:-1px;
}
div.ranklist_by_channel div.icon {
margin:0 6px;
}
div.ranklist > div.poster {
height:75px;
}
div.ranklist > div.poster img.yimg {
height:75px;
}
div.ranklist div.btns {
margin:0 3px;
}
div.ranklist_count > div.viewtime em {
font-size:14px;
}
div.ranklist_count span.unit {
font-size:12px;
}
div.ranklist > div.cont p.description {
margin:1px 0;
}
div.ranklist_by_channel div.ranklist {
margin:5px 0;
}
div.ranklist > div.cont p.title {
margin:3px 0 4px 0;
}
}
@media screen and (max-width:500px) {
div.ranklist {
}
div.ranklist > div.icon {
margin:0 3px 0 4px;
width:32px;
height:32px;
}
div.ranklist > div.icon .uicon {
width:32px;
height:32px;
}
div.ranklist_by_channel div.icon {
margin:0 5px;
width:44px;
height:44px;
}
div.ranklist_by_channel div.icon .uicon {
width:44px;
height:44px;
}
div.ranklist > div.poster {
height:70px;
}
div.ranklist > div.poster img.yimg {
height:70px;
}
div.ranklist_mobile > div.poster {
height:65px;
}
div.ranklist_mobile > div.poster img.yimg {
height:65px;
}
div.ranklist_mobile > div.cont p.cname {
margin:3px 0 0 0;
}
div.ranklist_mobile > div.cont p.title {
-webkit-line-clamp:2;
margin:2px 0 0 0;
}
div.ranklist > div.cont p.date {
height:15px;
line-height:15px;
font-size:11px;
}
div.ranklist > div.cont {
flex:1;
padding:4px 2px;
}
div.ranklist_count > div.avgviewers {
display:none;
}
div.ranklist_count span.unit {
font-size:11px;
}
div.ranklist_count > div.viewtime em {
font-size:13px;
}
div.ranklist div.btns i.btn {
padding:4px;
}
div.ranklist > div.site {
width:30px;
margin-left:2px;
}
}


div.ssmode {
max-width:620px;
padding-left:0;
padding:5px;
border:50px solid #F00;
}
div.ssmode div.ranklist_head {
position:unset;
}
div.ssmode .chatspeed {
display:none;
}
div.ssmode .btns {
display:none;
}
div.ssmode .comment_link {
display:none;
}
div.ssmode .itemcount {
display:none;
}
div.ssmode div.ranklist_count {
margin:0;
}
div.ssmode div.ranklist {
padding:0;
}
div.ssmode div.ranklist > div.icon {
margin:0 3px 0 4px;
width:50px;
height:50px;
}
div.ssmode div.ranklist > div.icon .uicon {
width:50px;
height:50px;
}
div.ssmode div.ranklist > div.poster {
height:74px;
margin:0;
}
div.ssmode div.ranklist > div.poster img.yimg {
height:74px;
}
div.lowerss div.ranklist > div.poster {
height:60px;
}
div.lowerss div.ranklist > div.poster img.yimg {
height:60px;
}
div.lowerss div.ranklist > div.icon {
width:44px;
height:44px;
}
div.lowerss div.ranklist > div.icon .uicon {
width:44px;
height:44px;
}
div.lowerss div.ranklist .statbox {
display:none;
}
div.ssmode div.ranklist > div.cont p.date {
height:15px;
line-height:15px;
font-size:11px;
}
div.ssmode div.ranklist > div.cont {
flex:1;
padding:4px 2px;
position:relative;
}
div.ssmode div.ranklist > div.cont canvas {
right:5px;
bottom:5px;
position:absolute;
z-index:5;
}
div.ssmode div.ranklist > div.cont::after {
content:'';
display:block;
background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,0.7),rgba(255,255,255,1) 95%);
width:120px;
height:40px;
bottom:0;
right:0;
position:absolute;
z-index:2;
}
div.ssmode div.ranklist p.title {
margin:3px 0;
}
div.ssmode div.ranklist_head > div {
height:24px;
line-height:24px;
}
div.ssmode div.ranklist_count > div.this {
background:linear-gradient(to bottom,#DDD,#FFF,#DDD);
}
div.lowerss div.ranklist_count > div.viewtime em {
font-size:16px;
}













/* ### comment list ### */
div.commentlist_outer {
max-width:950px;
margin:0 auto;
border:1px solid #DDD;
background-color:#FFF;
border-radius:5px;
}
@media screen and (max-width:950px) {
}
@media screen and (max-width:500px) {
div.commentlist_outer {
margin:0 3px;
}
}

div.commentlist {
display:flex;
flex-wrap:wrap;
align-content:flex-start;
align-items:center;
width:100%;
justify-content:start;
padding:3px 0;
border-top:1px solid #DDD;
cursor:pointer;
}
div.commentlist:hover {
background-color:#F6F6F6;
}
div.commentlist:first-child {
border-top:unset;
border-top-left-radius:4px;
border-top-right-radius:4px;
}
div.commentlist_outer > div:last-child {
border-bottom-left-radius:4px;
border-bottom-right-radius:4px;
}
div.commentlist > div {
box-sizing:border-box;
}
div.commentlist > div.icon {
width:28px;
height:28px;
position:relative;
}
div.commentlist > div.icon .uicon {
width:28px;
height:28px;
border-radius:50%;
}
div.commentlist > div.icon .mcn {
width:11px;
height:11px;
position:absolute;
bottom:-2px;
right:-2px;
}
div.commentlist > div.site {
width:50px;
text-align:center;
}
div.commentlist > div.site img {
height:16px;
}
div.commentlist > div.cont {
flex:1;
padding:5px;
margin-left:5px;
}
div.commentlist > div.cont h2 {
overflow:hidden;
display:block;
-webkit-line-clamp:1;
display:-webkit-box;
-webkit-box-orient:vertical;
text-overflow:ellipsis;
word-break:break-all;
overflow-wrap:anywhere;
line-height:1.3;
font-size:14px;
}

div.commentlist > div.ccount {
width:60px;
text-align:center;
}
div.commentlist > div.cupdate {
width:80px;
text-align:center;
}
div.commentlist > div.cupdate a {
color:#000;
}

@media screen and (max-width:500px) {
div.commentlist > div.site {
width:36px;
}
div.commentlist > div.ccount {
width:50px;
}
div.commentlist > div.cupdate {
width:70px;
}
}



div.commentlist div.btns {
margin:0 5px;
}
div.commentlist div.btns i.btn {
width:15px;
height:15px;
padding:5px;
cursor:pointer;
z-index:2;
display:block;
border-radius:3px;
}
div.commentlist div.btns i.btn_info {
margin-top:8px;
}
div.commentlist div.btns i.btn svg {
width:15px;
height:15px;
fill:#999;
}
div.commentlist div.btns i.btn:hover svg {
fill:#FFF;
}
div.commentlist div.btns i.btn:hover {
}
div.commentlist div.btns i.btn_info:hover {
background-color:#0C6;
}
div.commentlist div.btns i.btn_extract:hover {
background-color:#C0D;
}


/* ### livelist common ### */


.statbox {
display:flex;
flex-wrap:wrap;
align-content:flex-start;
align-items:center;
justify-content:start;
}
.statbox > div {
white-space:nowrap;
flex:1;
}
.statbox > div.comment_btn {
color:#666;
font-size:12px;
flex:1;
}
.statbox > div.comment_btn > span {
color:#666;
cursor:pointer;
}
.statbox > div.comment_btn > span:hover {
color:#000;
text-decoration:underline;
}
.statbox > div.date {
font-size:12px;
}
.statbox > div.date a {
color:#333;
}
.statbox > div.date .viewers_live {
color:#D00;
margin-right:4px;
}
.statbox > div.comment_link {
font-size:12px;
text-align:center;
flex:0.7;
}
.statbox > div.comment_link a {
display:inline-block;
color:#666;
border-radius:3px;
padding:5px;
}
.statbox > div.comment_link a svg {
fill:#999;
width:12px;
height:12px;
margin-right:3px;
}
.statbox > div.comment_link a:hover {
color:#000;
}
.statbox > div.comment_link a:hover svg {
fill:#000;
}
.statbox > div.livevote_box_statbox {
}
.statbox > div.livevote_box_statbox div.livevote_box {
min-width:200px;
margin:0;
}
.statbox > div.livevote_box_statbox div.livevote_box div.cont i.like {
margin-left:10px;
}
.statbox > div.livevote_box_statbox div.livevote_box div.cont .comments {
margin-left:9px;
}
.statbox > div.btn {
text-align:center;
flex:0.22;
}
.statbox > div.btn i {
width:14px;
height:14px;
}
.statbox > div.btn i svg {
width:14px;
height:14px;
fill:#888;
}
.statbox > div.btn i:hover svg {
fill:#000;
}
.statbox > div.btn span {
margin-left:3px;
font-size:11px;
color:#666;
vertical-align:-1px;
}
.statbox > ._break {
display:none;
}
@container gridframe (max-width:600px) {
.statbox > ._break {
display:block;
width:100%;
padding-top:5px;
flex:unset;
}
.statbox > div.comment_link {
text-align:unset;
flex:unset;
}
}
.statbox_mobile {
box-sizing:border-box;
padding:3px 3px 7px 3px;
width:100%;
}
.statbox_mobile > div {
}
.statbox_mobile > div.comment_btn {
text-align:center;
flex:1;
}
.statbox_mobile > div.comment_btn > span {
color:#666;
cursor:pointer;
}
.statbox_mobile > div.comment_btn > span:hover {
color:#000;
text-decoration:underline;
}
.statbox_mobile > div.date .viewers_live {
display:none;
}

div.poster span.btn {
border-radius:50%;
z-index:6;
position:absolute;
width:15px;
height:15px;
padding:7px;
cursor:pointer;
background-color:rgba(0,0,0,0.2);
display:inline-block;
}
div.poster:hover span.btn {
background-color:rgba(0,0,0,0.7);
}
div.poster span.btn i {
width:15px;
height:15px;
}
div.poster span.btn i svg {
width:15px;
height:15px;
fill:rgba(255,255,255,0.7);
}
div.poster:hover span.btn i svg {
fill:rgba(255,255,255,0.9);
}
div.poster span.btn:hover {
background-color:rgba(0,0,0,0.9);
}
div.poster span.btn:hover i svg {
fill:#FFF;
}
div.poster span.info {
right:52px;
bottom:5px;
}
div.poster span.info:hover {
background-color:#0C6;
}
div.poster span.play {
border-radius:50%;
z-index:6;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
width:24px;
height:24px;
padding:12px;
cursor:pointer;
background-color:rgba(0,0,0,0.0);
display:inline-block;
transition:transform 0.2s ease;
position:absolute;
cursor:pointer;
}
div.poster:hover span.play {
background-color:rgba(0,0,0,0.5);
}
div.poster span.play i {
width:24px;
height:24px;
}
div.poster span.play i svg {
width:24px;
height:24px;
fill:rgba(255,255,255,0.0);
}
div.poster:hover span.play i svg {
fill:rgba(255,255,255,1);
}
div.poster:hover span.play {
transform:scale(1.3,1.3);
background-color:#F00;
}
[data-twitch-loginid] div.poster:hover span.play {
background-color:#9146FF;
}
div.homelive_playing div.poster span.play {
background-color:#F00;
}
div.homelive_playing div.poster span.play i svg {
fill:rgba(255,255,255,1);
}
div.homelive_playing [data-twitch-loginid] div.poster span.play {
background-color:#9146FF;
}
div.homelive_playing[data-twitch-loginid] div.poster span.play {
background-color:#9146FF;
}
@container poster (max-width:210px) {
div.poster span.play {
width:20px;
height:20px;
padding:10px;
}
div.poster span.play i {
width:20px;
height:20px;
}
div.poster span.play i svg {
width:20px;
height:20px;
}
}
@container poster (max-width:180px) {
div.poster span.play {
width:18px;
height:18px;
padding:9px;
}
div.poster span.play i {
width:18px;
height:18px;
}
div.poster span.play i svg {
width:18px;
height:18px;
}
}
@container poster (max-width:100px) {
div.poster span.play {
width:14px;
height:14px;
padding:7px;
}
div.poster span.play i {
width:14px;
height:14px;
}
div.poster span.play i svg {
width:14px;
height:14px;
}
}
@media (hover:none) {
div.poster span.btn {
background-color:rgba(0,0,0,0.5);
}
div.poster span.btn i svg {
fill:rgba(255,255,255,0.9);
}
}

div.poster span.review {
position:absolute;
right:3px;
top:3px;
height:10px;
padding:5px;
font-size:10px;
color:rgba(255,255,255,0.8);
border-radius:4px;
background-color:rgba(0,0,0,0.5);
cursor:pointer;
display:inline-block;
z-index:6;
}
div.poster span.review i {
width:10px;
height:10px;
margin:0 2px;
vertical-align:0;
}
div.poster span.review i svg {
width:10px;
height:10px;
fill:rgba(255,255,255,0.7);
}
div.poster:hover span.review {
color:rgba(255,255,255,0.9);
background-color:rgba(0,0,0,0.7);
}
div.poster:hover span.review i svg {
fill:rgba(255,255,255,0.9);
}
@media (hover:none) {
div.poster span.review {
color:rgba(255,255,255,0.9);
background-color:rgba(0,0,0,0.7);
}
div.poster span.review i svg {
fill:rgba(255,255,255,0.9);
}
}
div.poster span.review:hover {
background-color:#F60;
color:rgba(255,255,255,0.95);
}
div.poster span.review:hover i svg {
fill:rgba(255,255,255,0.95);
}

/* ### home, rank ### */

#reload_home {
width:16px;
height:16px;
border-radius:14px;
background-color:#EEE;
cursor:pointer;
padding:6px;
display:inline-block;
color:#333;
margin-left:5px;
}
#reload_home i {
width:16px;
height:16px;
}
#reload_home svg {
width:16px;
height:16px;
fill:#333;
}
#reload_home:hover {
background-color:#DDD;
color:#000;
}
#reload_home:hover svg {
fill:#000;
}

#home_mainmenu {
overflow:auto;
overflow-y:hidden;
width:100%;
background-color:#F8F8F8;
}
#home_mainmenu::-webkit-scrollbar {
display:none;
}
.home_mainmenu_fixed {
position:fixed;
left:0;
top:40px;
z-index:10;
}
#home_mainmenu_wrap {
height:40px;
}
div.rank_typemenu {
display:flex;
flex-wrap:wrap;
align-content:flex-start;
align-items:center;
justify-content:start;
}
#home_mainmenu > div.rank_typemenu {
justify-content:center;
}
@media (hover:none) and (max-width:900px) {
#home_mainmenu > div.rank_typemenu {
flex-wrap:nowrap;
justify-content:start;
}
}
div.rank_typemenu span.alink {
cursor:pointer;
}
div.rank_typemenu a,div.rank_typemenu span.alink {
margin:0 1px;
color:#333;
font-size:18px;
white-space:nowrap;
text-align:center;
text-decoration:none;
height:30px;
line-height:30px;
padding:0 5px;
border-top:3px solid transparent;
border-bottom:3px solid transparent;
min-width:50px;
}
div.rank_typemenu a:hover,div.rank_typemenu span.alink:hover {
background-color:#EEE;
color:#000;
}
div.rank_typemenu a.this,div.rank_typemenu span.this {
color:#000;
font-weight:bold;
border-bottom-color:#000;
}
div.rank_typemenu a .count {
font-size:14px;
font-weight:normal;
margin-left:1px;
color:#555;
}
div.rank_typemenu .count_sep {
color:#999;
font-size:12px;
font-weight:normal;
}
div.rank_typemenu .live_counts {
vertical-align:3px;
display:inline-block;
padding:3px;
margin-left:1px;
color:#FFF;
background-color:#D00;
font-size:11px;
min-width:11px;
font-weight:normal;
text-align:center;
border-radius:8.5px;
line-height:1;
}
div.rank_typemenu .sd_counts {
vertical-align:3px;
display:inline-block;
padding:3px;
margin-left:1px;
color:#FFF;
background-color:#00D;
font-size:11px;
min-width:11px;
font-weight:normal;
text-align:center;
border-radius:8.5px;
line-height:1;
}
div.rank_typemenu_sml a,div.rank_typemenu_sml span.alink {
font-size:14px;
height:24px;
line-height:24px;
padding:0 3px;
border-top:2px solid transparent;
border-bottom:2px solid transparent;
min-width:40px;
}
@media screen and (max-width:500px) {
div.rank_typemenu a,div.rank_typemenu span.alink {
height:26px;
line-height:26px;
font-size:15px;
min-width:unset;
}
div.rank_typemenu a .count {
font-size:12px;
}
div.rank_typemenu .live_counts {
vertical-align:1px;
}
div.rank_typemenu .sd_counts {
vertical-align:1px;
}
#home_mainmenu_wrap {
height:36px;
}
}


#home_tool_panel {
padding:3px 0;
margin-top:6px;
}
#home_tool_panel span.ctg_select {
flex:1;
}
#home_tool_panel span.ctg_select select {
font-size:1.1em;
}
#home_tool_panel a,#home_tool_panel span.alink {
height:24px;
line-height:24px;
font-size:14px;
border:0;
min-width:unset;
}
#livecounts {
font-size:11px;
text-align:right;
margin:5px 10px 0 10px;
color:#333;
}
@media screen and (max-width:500px) {
#home_tool_panel {
margin:6px 5px 0 5px;
}
#livecounts {
margin:5px 5px 0 5px;
}
}


#category_menu {
color:#333;
padding:0 10px;
border:1px solid #666;
border-radius:5px;
height:26px;
line-height:26px;
display:inline-block;
background-color:#FFF;
cursor:pointer;
max-width:180px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
#category_menu:hover {
color:#000;
border-color:#333;
background-color:#EEE;
}

#category_menu i {
width:14px;
height:14px;
vertical-align:-5px;
margin-right:3px;
}
#category_menu i svg {
width:14px;
height:14px;
fill:#333;
}
#category_menu:hover i svg {
fill:#000;
}
#category_menu_box {
background-color:#ECECEC;
position:absolute;
transition:height 0.1s ease;
top:0;
left:0;
overflow:hidden;
}
#category_menu_box > div {
padding:15px;
}
#category_menu_box h3 {
margin:15px 0 10px 0;
font-size:11px;
font-weight:bold;
color:#666;
}
#category_menu_box span.item {
color:#333;
padding:0 15px;
border:1px solid #999;
border-radius:7px;
height:34px;
line-height:34px;
display:inline-block;
background-color:#FFF;
cursor:pointer;
font-size:15px;
margin:2px 0;
}
#category_menu_box span.item:hover {
color:#000;
border-color:#666;
background-color:#EEE;
}
#category_menu_box span.this {
color:#FFF;
border-color:#000;
background-color:#000;
font-weight:bold;
}
#category_menu_box span.this:hover {
color:#FFF;
border-color:#000;
background-color:#000;
}
#category_menu_box span.item i {
width:16px;
height:16px;
vertical-align:-8px;
margin-right:3px;
}
#category_menu_box span.item i svg {
width:16px;
height:16px;
fill:#333;
}
#category_menu_box span.item:hover i svg {
fill:#000;
}
#category_menu_box span.this i svg {
fill:#FFF;
}
#category_menu_box span.this i:hover svg {
fill:#FFF;
}
#category_menu_box span.item img {
width:16px;
height:16px;
vertical-align:-3px;
margin-right:3px;
}
@media screen and (max-width:500px) {
#category_menu_box > div  {
padding:10px;
}
}



#exp_poster {
box-sizing:border-box;
border:1px solid #666;
width:160px;
height:90px;
object-fit:cover;
position:absolute;
top:0;
left:0;
}
#popup_mylive_box {
position:absolute;
top:0;
left:0;
width:350px;
background-color:#FFF;
padding:5px 10px;
box-shadow:0 1px 4px rgba(0,0,0,0.2);
box-sizing:border-box;
overflow-y:auto;
z-index:21;
}
#popup_mylive_box > div.list {
display:flex;
flex-wrap:wrap;
align-content:flex-start;
align-items:center;
justify-content:start;
width:100%;
margin:5px 0;
}
#popup_mylive_box > div.list > div.site {
width:29px;
text-align:center;
margin-right:6px;
}
#popup_mylive_box > div.list > div.site img {
height:18px;
}
#popup_mylive_box > div.list > div.icon {
width:44px;
height:44px;
margin-right:6px;
position:relative;
}
#popup_mylive_box > div.list > div.icon .uicon {
width:44px;
height:44px;
border-radius:50%;
}
#popup_mylive_box > div.list > div.cont {
flex:1;
}
#popup_mylive_box > div.list > div.cont h3 {
height:17px;
line-height:17px;
overflow:hidden;
display:block;
-webkit-line-clamp:1;
display:-webkit-box;
-webkit-box-orient:vertical;
text-overflow:ellipsis;
word-break:break-all;
overflow-wrap:anywhere;
font-weight:bold;
}
#popup_mylive_box > div.list > div.cont h3 a {
color:#000;
font-weight:bold;
}
#popup_mylive_box > div.list > div.cont p.title {
height:17px;
line-height:17px;
overflow:hidden;
display:block;
-webkit-line-clamp:1;
display:-webkit-box;
-webkit-box-orient:vertical;
text-overflow:ellipsis;
word-break:break-all;
overflow-wrap:anywhere;
margin:1px 0;
}
#popup_mylive_box > div.list > div.cont p.title a {
}
#popup_mylive_box > div.list > div.cont p.date {
margin:1px 0;
}
#popup_mylive_box > div.list > div.cont p.date a.sddate {
color:#00D;
font-weight:bold;
}
#popup_mylive_box > div.list > div.cont p.date a.viewers {
color:#D00;
}
#popup_mylive_box > div.list > div.cont p.date a.livetime {
color:#000;
}
#lastplaylive {
width:100px;
padding:5px;
box-shadow:0 1px 4px rgba(0,0,0,0.2);
border-radius:5px;
cursor:pointer;
margin:3px auto 8px auto;
}
#lastplaylive:hover {
box-shadow:0 1px 4px rgba(0,0,0,0.3);
background-color:#F8F8F8;
}
#lastplaylive > div.list {
display:flex;
flex-wrap:nowrap;
align-content:flex-start;
align-items:center;
justify-content:start;
width:100%;
}
#lastplaylive > div.list > div.poster {
position:relative;
margin-right:6px;
}
#lastplaylive > div.list > div.poster img {
width:100px;
cursor:pointer;
aspect-ratio:16/9;
object-fit:cover;
}
#lastplaylive div.poster i.playing {
border-radius:50%;
background-color:rgba(0,0,0,0.3);
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
width:16px;
height:16px;
position:absolute;
padding:7px;
}
#lastplaylive div.poster i.playing svg {
width:16px;
height:16px;
fill:rgba(255,255,255,0.9);
}
#lastplaylive:hover div.poster i.playing {
background-color:#FF0A36;
}
#lastplaylive:hover div.poster i.playing svg {
fill:#FFF;
}
#lastplaylive div.poster i.statmark {
border-radius:50%;
position:absolute;
width:10px;
height:10px;
top:3px;
right:3px;
display:inline-block;
}
#lastplaylive div.poster i.statmark_live {
background-color:#D00;
}
#lastplaylive div.poster i.statmark_sd {
background-color:#00D;
}
#lastplaylive div.poster i.statmark_end {
background-color:#666;
}
#lastplaylive div.poster span.viewers {
position:absolute;
bottom:2px;
right:2px;
display:inline-block;
background-color:rgba(0,0,0,0.7);
color:rgba(255,255,255,0.9);
padding:2px;
font-size:10px;
}
#lastplaylive > div.list > div.cont {
flex:1;
}
#lastplaylive > div.list > div.cont h3 {
height:17px;
line-height:17px;
overflow:hidden;
display:block;
-webkit-line-clamp:1;
display:-webkit-box;
-webkit-box-orient:vertical;
text-overflow:ellipsis;
word-break:break-all;
overflow-wrap:anywhere;
font-weight:bold;
font-weight:bold;
}
#lastplaylive > div.list > div.cont p.title {
height:17px;
line-height:17px;
overflow:hidden;
display:block;
-webkit-line-clamp:1;
display:-webkit-box;
-webkit-box-orient:vertical;
text-overflow:ellipsis;
word-break:break-all;
overflow-wrap:anywhere;
margin:1px 0;
}
#home_mcnsel {
display:flex;
flex-wrap:nowrap;
align-content:flex-start;
align-items:center;
justify-content:start;
}
#home_mcnsel a {
display:block;
width:20px;
height:20px;
overflow:hidden;
color:transparent;
margin:0 3px;
padding:5px;
border-radius:3px;
text-decoration:none;
}
#home_mcnsel a i {
width:20px;
height:20px;
display:block;
}
#home_mcnsel a i img {
width:20px;
height:20px;
opacity:0.9;
}
#home_mcnsel a:hover {
background-color:#EEE;
}
#home_mcnsel a:hover img {
opacity:1;
}
#home_mcnsel a.seled {
outline:2px solid rgba(255,10,54,1);
}
#home_mcnsel a.seled img{
opacity:1;
}
#home_mcnsel a.seled:hover img {
opacity:1;
}
@media screen and (max-width:500px) {
#home_mcnsel a {
display:block;
width:20px;
height:20px;
overflow:hidden;
color:transparent;
margin:0 2px;
cursor:pointer;
padding:4px;
border-radius:3px;
}
}
#groupbox {
background-color:#F6F6F6;
padding:8px;
border-radius:8px;
margin:0 10px 0 0;
}
#groupbox p.ope {
margin-top:8px;
color:#888;
text-align:right;
line-height:1.2;
}
#groupbox span.mark {
border-radius:6px;
display:inline-block;
background-color:#333;
padding:3px 4px;
margin-left:4px;
color:#FFF;
font-size:10px;
vertical-align:middle;
}
@media screen and (max-width:800px) {
#groupbox {
margin:0 0 10px 0;
}
}
@media screen and (max-width:500px) {
#groupbox {
margin:5px;
}
#groupbox p.ope {
text-align:left;
}
}

#group_channel_manage {
display:flex;
flex-wrap:wrap;
align-content:flex-start;
align-items:start;
justify-content:space-around;
margin:10px auto;
max-width:1100px;
}
#group_channel_manage_candidate {
border:1px solid #DDD;
flex:1;
padding:15px;
margin:10px;
min-width:300px;
max-width:450px;
}
#group_channel_manage_entried {
border:1px solid #DDD;
flex:1;
padding:15px;
margin:10px;
min-width:300px;
max-width:450px;
}
#group_channel_manage #search_filter {
max-width:150px;
min-width:100px;
}

.group_channel_manage_list {
margin-top:10px;
}
.group_channel_manage_list > div.item {
display:flex;
flex-wrap:wrap;
align-content:flex-start;
align-items:center;
justify-content:start;
padding:6px;
}
.group_channel_manage_list > div.item:hover {
background-color:#F6F6F6;
}
.group_channel_manage_list > div.item[data-entried] {
background-color:#F0FFF0;
}
.group_channel_manage_list > div.item[data-entried]:hover {
background-color:#E8FFE8;
}
.group_channel_manage_list > div.item[data-manage-list-hover] {
padding:4px;
border:2px solid #FF0A36;
}
.group_channel_manage_list > div.item a.icon img {
width:32px;
height:32px;
margin-right:10px;
border-radius:50%;
}
.group_channel_manage_list > div.item div.name {
flex:1;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
margin-right:10px;
}
.group_channel_manage_list > div.item div.name a {
color:#000;
}
.group_channel_manage_list > div.item[data-entried] div.name a {
font-weight:bold;
}
.group_channel_manage_list > div.item div.site {
margin-right:10px;
width:29px;
text-align:center;
}
.group_channel_manage_list > div.item div.site img {
height:20px;
}
.group_channel_manage_list > div.item div.btn {
}
.group_channel_manage_list > div.item div.btn i {
background-color:#AAA;
padding:5px;
width:13px;
height:13px;
z-index:11;
cursor:pointer;
border-radius:50%;
}
.group_channel_manage_list > div.item div.btn i svg {
width:13px;
height:13px;
fill:rgba(255,255,255,0.7);
}
.group_channel_manage_list > div.item div.btn:hover i {
background-color:#D33;
}
.group_channel_manage_list > div.item div.btn:hover i svg {
fill:#FFF;
}
@media (hover:hover) {
.group_channel_manage_list > div.item:hover div.btn_check i {
background-color:#0C0 !important;
}
.group_channel_manage_list > div.item:hover div.btn_check i svg {
fill:#FFF !important;
}
}
.group_channel_manage_list > div.item[data-entried] div.btn_check i {
background-color:#0C0 !important;
}
.group_channel_manage_list > div.item[data-entried] div.btn_check i svg {
fill:#FFF !important;
}


.groupaddmenu {
display:flex;
flex-wrap:nowrap;
align-content:flex-start;
align-items:center;
justify-content:start;
cursor:pointer;
padding:8px;
}
.groupaddmenu span.name {
flex:1;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}
.groupaddmenu span.num {
margin-left:5px;
white-space:nowrap;
}
.groupaddmenu:hover {
background-color:#EEE;
}




#home_chat_explorer {
margin-left:3px;
width:20px;
height:20px;
padding:1px;
display:inline-block;
cursor:pointer;
}
#home_chat_explorer svg {
width:20px;
height:20px;
fill:#333;
}
#home_chat_explorer:hover svg {
fill:#000;
}



#home_setting {
margin-left:3px;
width:13px;
height:13px;
padding:3px;
cursor:pointer;
}
#home_setting svg {
width:13px;
height:13px;
fill:#888;
}
#home_setting:hover svg {
fill:#000;
}


#home_search_box {
}
@media screen and (max-width:500px) {
#home_search_box {
margin:0 4px 0 4px;
}
}

.home_side_title {
margin-top:20px;
margin-bottom:10px;
font-weight:bold;
color:#333;
}
#home_ctgmenu_wrap {
margin:5px 0 5px 0;
}
@media screen and (max-width:500px) {
#home_ctgmenu_wrap {
margin:5px 2px 2px 2px;
}
}
@media screen and (max-width:1000px) {
.home_side_title {
display:none;
}
}
#home_ctgmenu_box {
overflow:auto;
overflow-y:hidden;
width:100%;
}
#home_ctgmenu_box::-webkit-scrollbar {
display:none;
}
@media (hover:none) and (max-width:1000px) {
#home_ctgmenu_box > #home_ctgmenu_cont {
flex-wrap:nowrap;
}
}
#home_ctgmenu_cont {
display:flex;
flex-wrap:wrap;
align-content:flex-start;
align-items:center;
justify-content:start;
}
#home_ctgmenu_cont a {
margin-right:3px;
color:#000;
white-space:nowrap;
text-decoration:none;
height:31px;
line-height:31px;
padding:0 5px;
border-radius:5px;
margin:2px 3px 3px 2px;
background-color:#F4F4F4;
background-clip:padding-box;
font-size:15px;
box-shadow:0 1px 1px rgba(0,0,0,0.15);
}
#home_ctgmenu_cont a:hover {
background-color:#E4E4E4;
color:#000;
box-shadow:0 1px 1px rgba(0,0,0,0.25);
}
#home_ctgmenu_cont a:first-child {
}
#home_ctgmenu_cont a.this {
border-color:#000;
color:#FFF;
font-weight:bold;
background-color:#000;
box-shadow:none;
}
#home_ctgmenu_cont a.this:hover {
background-color:#000;
}
#home_ctgmenu_cont a span.name {
display:inline-block;
height:14px;
line-height:14px;
}
#home_ctgmenu_cont a span.num {
font-size:11px;
margin-left:1px;
color:#666;
}
#home_ctgmenu_cont a.this span.num {
color:#CCC;
}
#home_ctgmenu_cont a img.mcn {
width:13px;
height:13px;
margin-right:2px;
vertical-align:middle;
}

@media screen and (max-width:500px) {
#home_ctgmenu_cont a {
padding:0 5px;
height:26px;
line-height:26px;
}
#home_ctgmenu_cont a:first-child {
}
}


#home_group_wrap {
margin:0 0 8px 0;
}
@media screen and (max-width:500px) {
#home_group_wrap {
margin:0 2px 8px 2px;
}
}
#home_group_box {
overflow:auto;
overflow-y:hidden;
width:100%;
}
#home_group_box::-webkit-scrollbar {
display:none;
}
@media (hover:none) and (max-width:1000px) {
#home_group_box > #home_group_cont {
flex-wrap:nowrap;
}
}

#home_group_cont {
display:flex;
flex-wrap:wrap;
align-content:flex-start;
align-items:center;
justify-content:start;
}
#home_group_cont > form {
margin:0 0 3px 0;
}
@media (hover:none) and (max-width:1000px) {
#home_group_cont > form {
margin:2px;
}
}
#home_group_cont > .gp {
height:30px;
line-height:30px;
padding:0 8px;
border-radius:16px;
cursor:pointer;
display:inline-block;
color:#333;
border:1px solid #666;
margin:2px;
white-space:nowrap;
background-clip:padding-box;
}
#home_group_cont > .gp:hover {
border-color:#000;
background-color:#EEE;
color:#000;
}
#home_group_cont > .gp.this {
border-color:#000;
background-color:#000;
color:#FFF;
}
#home_group_cont > .gp.this:hover {
background-color:#000;
color:#FFF;
}
#home_group_cont > .newbtn {
border-color:#FF0A36;
background-color:#FF0A36;
color:#FFF;
}
#home_group_cont > .newbtn:hover {
border-color:#FF0A36;
background-color:#FF0A36;
color:#FFF;
}

@media screen and (max-width:500px) {
#home_group_cont > .gp {
padding:0 6px;
height:28px;
line-height:28px;
border-radius:15px;
}
}


#homeloader {
padding:30px 0;
}



#popup_infobox_box {
padding:4px;
width:350px;
position:absolute;
box-sizing:border-box;
border:1px solid #CCC;
background-color:#FFF;
border-radius:5px;
z-index:9;
}

@media (hover:hover) {
#popup_infobox_box > div::-webkit-scrollbar {
width:10px;
}
#popup_infobox_box > div::-webkit-scrollbar-track {
background-color:#EEE;
border-radius:5px;
}
#popup_infobox_box > div::-webkit-scrollbar-thumb {
background-color:#CCC;
border-radius:5px;
}
#popup_infobox_box > div::-webkit-scrollbar-thumb:hover {
background-color:#999;
}
}

#sharesns_box {
}
#sharesns_box a {
display:block;
border:1px solid #06C;
background-color:#39F;
width:250px;
height:40px;
line-height:40px;
color:rgba(255,255,255,0.9);
border-radius:6px;
margin:12px auto;
font-size:15px;
padding:0 5px 0 10px;
font-weight:bold;
}
#sharesns_box a:hover {
background-color:#4AF;
color:rgba(255,255,255,1);
border-color:#07D;
}
#sharesns_box a:visited {
color:rgba(255,255,255,1);
}
#sharesns_box a i {
height:26px;
width:26px;
vertical-align:-7px;
margin-right:8px;
}
#sharesns_box a i svg {
height:26px;
width:26px;
fill:rgba(255,255,255,0.9);
}
#sharesns_box a:hover i svg {
fill:rgba(255,255,255,1);
}

#popup_livetitle_box {
position:absolute;
width:350px;
top:0;
left:0;
z-index:20;
background-color:rgba(0,0,0,0.8);
box-shadow:0 2px 5px rgba(0,0,0,0.25);
border-radius:5px;
padding:5px;
box-sizing:border-box;
}
#popup_livetitle_box > p {
margin:0;
overflow:hidden;
display:block;
-webkit-line-clamp:3;
display:-webkit-box;
-webkit-box-orient:vertical;
text-overflow:ellipsis;
word-break:break-all;
overflow-wrap:anywhere;
color:rgba(255,255,255,0.95);
line-height:1.5;
}
#popup_livetitle_box span.sep {
width:1px;
height:11px;
border-left:1px dotted #AAA;
margin:0 8px;
display:inline-block;
vertical-align:-1px;
}


/* ### fav&ng list ### */

div.clist {
display:flex;
flex-wrap:nowrap;
align-content:flex-start;
align-items:center;
justify-content:start;
margin:10px;
}
div.clist > div {
box-sizing:border-box;
}
div.clist > div.icon {
width:44px;
height:44px;
margin-right:10px;
position:relative;
}
div.clist > div.icon img.uicon {
width:44px;
height:44px;
border-radius:50%;
}
div.clist > div.cont {
flex:1;
max-width:300px;
margin-right:10px;
}
div.clist > div.cont p.cname {
overflow:hidden;
display:block;
-webkit-line-clamp:1;
display:-webkit-box;
-webkit-box-orient:vertical;
text-overflow:ellipsis;
word-break:break-all;
overflow-wrap:anywhere;
color:#000;
font-size:14px;
line-height:1.3;
}
div.clist > div.cont p.cname a {
color:#000;
}
div.clist > div.cont p.date {
margin:6px 0 0 0;
color:#888;
font-size:11px;
}
div.clist > div.cont p.date a {
color:#888;
}
div.clist > div.site {
margin-right:15px;
width:30px;
text-align:center;
}
div.clist > div.site img {
height:18px;
}
div.clist > div.btn {
}
div.clist > div.btn i {
background-color:#999;
padding:4px;
width:11px;
height:11px;
z-index:11;
cursor:pointer;
border-radius:50%;
}
div.clist > div.btn i svg {
width:11px;
height:11px;
fill:rgba(255,255,255,0.7);
}
div.clist > div.btn i:hover {
background-color:#D33;
}
div.clist > div.btn i:hover svg {
fill:#FFF;
}




/* ### comment### */

div.comment {
padding:10px 5px;
border-top:1px solid #E8E8E8;
}
div.comment:first-child {
border-top:unset;
}
div.comment p.body {
line-height:1.5;
font-size:14px;
white-space:break-spaces;
margin:10px 0;
}
div.comment p.date {
line-height:1.2;
color:#666;
font-size:12px;
}
div.comment p.date a.date {
color:#333;
}
div.comment span.date {
color:#888;
font-size:11px;
}
div.comment h2 {
line-height:1.2;
}
.review_stars {
color:#FC9;
}
.review_stars em {
color:#FC0;
}
div.comment_chat {
line-height:1.4;
}
div.comment_chat span.body {
font-size:14px;
}




a.review_line {
height:20px;
line-height:20px;
overflow:hidden;
display:block;
-webkit-line-clamp:1;
display:-webkit-box;
-webkit-box-orient:vertical;
text-overflow:ellipsis;
word-break:break-all;
overflow-wrap:anywhere;
margin:4px 0 0 0;
font-size:12px;
color:rgba(0,0,0,0.85);
padding:0 5px;
border:1px solid #FFDBAB;
border-radius:3px;
background-color:#FFFCF7;
}
a.review_line:hover {
color:rgba(0,0,0,1);
border-color:#FC8;
background-color:#FFFCF4;
}
a.review_line span.review_star {
color:#FC0;
}
.inline_comment_review {
background-color:#FFF;
}
.inline_comment_review h3.title {
background-color:#EEE;
padding-left:6px;
font-weight:bold;
height:25px;
line-height:25px;
}
.inline_comment_review h3.title a {
font-weight:normal;
font-size:12px;
color:#333;
}
.inline_comment_review h3.title i.closebtn {
width:13px;
height:13px;
padding:6px;
background-color:#999;
cursor:pointer;
float:right;
}
.inline_comment_review h3.title i.closebtn svg {
width:13px;
height:13px;
fill:#EEE;
}
.inline_comment_review h3.title i.closebtn:hover {
background-color:#D33;
}
.inline_comment_review h3.title i.closebtn:hover svg {
fill:#FFF;
}
.inline_comment_review_box {
padding:15px 0;
margin:0 auto;
max-width:800px;
}
.inline_comment_review_inner {
padding:5px;
}
.comments_cont {
margin:15px 0;
}
@media screen and (max-width:500px) {
.inline_comment_review_box {
margin:5px auto;
padding:5px 0;
}
.comments_cont {
margin:10px 0;
}
}
.commentform_btns {
display:flex;
flex-wrap:nowrap;
align-content:flex-start;
align-items:center;
justify-content:start;
margin:3px 0;
}
.commentform_btns .post_loader {
display:inline-block;
width:16px;
height:16px;
vertical-align:4px;
}
.commentform_btns span {
margin:0 3px;
}

div.commentform_namebox {
display:flex;
flex-wrap:wrap;
align-content:flex-start;
align-items:center;
justify-content:start;
}
div.commentform_namebox > * {
margin-right:3px;
}
span.commentform_profbox {
height:24px;
line-height:24px;
max-width:150px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
margin-right:5px;
}
form[name="comment_form"] input[name="comment_name"] {
width:180px;
}
form[name="comment_form"] input[name="comment_delkey"] {
width:100px;
}
@media screen and (max-width:500px) {
form[name="comment_form"] input[name="comment_name"] {
width:120px;
}
form[name="comment_form"] input[name="comment_delkey"] {
width:80px;
}
}


.comment_reloadbtn {
display:inline-block;
width:16px;
height:16px;
cursor:pointer;
border-radius:50%;
padding:6px;
color:#333;
background-color:#ECECEC;
}
.comment_reloadbtn:hover {
color:#000;
background-color:#DDD;
}
.comment_reloadbtn i {
width:16px;
height:16px;
}
.comment_reloadbtn i svg {
width:16px;
height:16px;
fill:#666;
}
.comment_reloadbtn:hover i svg {
fill:#000;
}

div.comment_more_btn {
text-align:center;
background-color:#F8F8F8;
margin-top:10px;
cursor:pointer;
padding:4px;
color:#333;
}
div.comment_more_btn:hover {
background-color:#E8E8E8;
color:#000;
text-decoration:underline;
}
div.comment_form_head {
display:flex;
flex-wrap:nowrap;
align-content:flex-start;
align-items:center;
justify-content:end;
margin:3px 0;
}

.review_comment_btn {
display:inline-block;
height:20px;
line-height:20px;
cursor:pointer;
border-radius:5px;
padding:0 4px;
color:#333;
border:1px solid #CCC;
}
.review_comment_btn i {
width:13px;
height:13px;
vertical-align:-3px;
margin-right:2px;
}
.review_comment_btn i svg {
width:13px;
height:13px;
fill:#333;
}
.review_comment_btn:hover i svg {
fill:#000;
}
.review_comment_btn:hover {
color:#000;
background-color:#F4F4F4;
}
.review_comment_btn[data-niced="1"] {
color:#FFF;
background-color:#000;
}
.review_comment_btn[data-niced="1"] i svg {
fill:#FFF;
}
.review_comment_btn[data-niced="1"]:hover {
color:#FFF;
background-color:#000;
}
.review_comment_btn[data-niced="1"]:hover i svg {
fill:#FFF;
}


#sticky_live {
position:fixed;
width:350px;
top:40px;
left:0;
display:flex;
flex-wrap:wrap;
align-content:flex-start;
align-items:center;
justify-content:start;
margin:0 auto;
background-color:#FFF;
box-shadow:0 2px 5px rgba(0,0,0,0.25);
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
#sticky_live > div {
box-sizing:border-box;
}
#sticky_live > div.poster {
width:80px;
}
#sticky_live > div.poster img {
width:80px;
aspect-ratio:16/9;
object-fit:cover;
border-bottom-left-radius:5px;
}
#sticky_live > div.cont {
margin:0 5px;
flex:1;
font-size:12px;
}
#sticky_live > div.cont p.cname {
overflow:hidden;
display:block;
-webkit-line-clamp:1;
display:-webkit-box;
-webkit-box-orient:vertical;
text-overflow:ellipsis;
word-break:break-all;
overflow-wrap:anywhere;
line-height:1.3;
}
#sticky_live > div.cont h3 {
overflow:hidden;
display:block;
-webkit-line-clamp:1;
display:-webkit-box;
-webkit-box-orient:vertical;
text-overflow:ellipsis;
word-break:break-all;
overflow-wrap:anywhere;
font-weight:bold;
line-height:1.3;
}

.review_comment_box {
margin:15px;
}
@media screen and (max-width:500px) {
.review_comment_box {
margin:10px 5px;
}
}

.livepage_review_box {
max-width:850px;
margin:0 auto -15px auto;
border-left:1px solid #DDD;
border-right:1px solid #DDD;
}
.livepage_review_box > div.cont{
padding:25px;
}
@media screen and (max-width:850px) {
.livepage_review_box {
border:0;
}
}
@media screen and (max-width:500px) {
.livepage_review_box {
margin:0 auto 0 auto;
}
.livepage_review_box > div.cont{
padding:15px 10px;
}
}
.livepage_review_head {
display:flex;
flex-wrap:wrap;
align-content:flex-start;
align-items:center;
justify-content:start;
}
.livepage_review_head i {
padding:8px;
width:20px;
height:20px;
background-color:#333;
}
.livepage_review_head i svg {
width:20px;
height:20px;
fill:#FFF;
}
.livepage_review_head h2 {
line-height:36px;
height:36px;
background-color:#F8F8F8;
padding:0 10px;
flex:1;
}

.reviewlist_outer {
max-width:820px;
margin:10px auto;
}
.reviewlist_outer > div.comment {
border-radius:10px;
padding:15px;
border:1px solid #DDD;
margin-bottom:12px;
}
@media screen and (max-width:500px) {
.reviewlist_outer > div.comment {
padding:10px;
margin:0 5px 10px 5px;
}
}



/* ### 繝ｦ繝ｼ繧ｶ繝ｼ ### */

div.channel_page_head {
display:flex;
flex-wrap:nowrap;
align-content:flex-start;
align-items:center;
width:100%;
justify-content:start;
}
div.channel_page_head > div.uicon {
box-sizing:border-box;
width:88px;
height:88px;
position:relative;
margin-right:15px;
}
div.channel_page_head > div.uicon img.uicon {
width:88px;
height:88px;
border-radius:50%;
}
div.channel_page_head > div.uicon a.zoomphoto {
width:12px;
height:12px;
position:absolute;
bottom:-4px;
right:-1px;
padding:4px;
display:inline-block;
border-radius:50%;
background-color:rgba(160,160,160,0.7);
}
div.channel_page_head > div.uicon a.zoomphoto:hover {
background-color:#0C6;
}
div.channel_page_head > div.uicon a.zoomphoto i {
width:12px;
height:12px;
}
div.channel_page_head > div.uicon a.zoomphoto i svg {
width:12px;
height:12px;
fill:rgba(255,255,255,0.9);
}
div.channel_page_head > div.uicon a.zoomphoto:hover i svg {
fill:#FFF;
}
div.channel_page_head > div.cont {
flex:1;
}
div.channel_page_head .favstar {
width:22px;
height:22px;
margin-left:8px;
vertical-align:0px;
}
@media screen and (max-width:500px) {
div.channel_page_head > div.uicon {
width:50px;
height:50px;
margin-right:6px;
}
div.channel_page_head > div.uicon img.uicon {
width:50px;
height:50px;
}
div.channel_page_head .favstar {
width:18px;
height:18px;
vertical-align:1px;
}
}


div.userlist {
display:grid;
grid-template-columns:1fr 1fr 1fr;
column-gap:10px;
row-gap:10px;
}
div.userlist > div.col {
box-sizing:border-box;
padding:12px;
border-radius:15px;
background-color:#FFF;
transition:border-color 0.2s ease;
border:1px solid #DDD;
}
div.userlist > div.col:hover {
border-color:#CCC;
}
div.userlist > div.col div.uicon {
width:68px;
height:68px;
float:left;
text-align:center;
position:relative;
}
div.userlist > div.col img.uicon {
width:68px;
height:68px;
border-radius:50%;
}
div.userlist > div.col div.uicon div.site {
margin-top:8px;
text-align:center;
}
div.userlist > div.col div.uicon div.site img {
height:18px;
}
div.userlist > div.col a.zoomphoto {
width:12px;
height:12px;
position:absolute;
bottom:-4px;
right:-1px;
padding:4px;
display:inline-block;
border-radius:50%;
background-color:rgba(160,160,160,0.7);
}
div.userlist > div.col a.zoomphoto:hover {
background-color:#0C6;
}
div.userlist > div.col a.zoomphoto i {
width:12px;
height:12px;
}
div.userlist > div.col a.zoomphoto i svg {
width:12px;
height:12px;
fill:rgba(255,255,255,0.9);
}
div.userlist > div.col a.zoomphoto:hover i svg {
fill:#FFF;
}
div.userlist > div.col div.ucont {
margin-left:75px;
line-height:1.2;
}
div.userlist > div.col div.ucont p.body {
line-height:1.5;
word-break:break-all;
overflow-wrap:anywhere;
font-size:14px;
}
div.userlist > div.col div.ucont h2 em {
font-size:15px;
}
div.userlist > div.col div.ucont h2 a {
color:#000;
}
@media screen and (max-width:1000px) {
div.userlist {
grid-template-columns:1fr 1fr;
column-gap:8px;
row-gap:8px;
}
div.userlist > div.col {
padding:10px;
border-radius:12px;
}
div.userlist > div.col div.uicon {
width:60px;
height:60px;
}
div.userlist > div.col img.uicon {
width:60px;
height:60px;
}
div.userlist > div.col div.ucont {
margin-left:70px;
}
div.userlist > div.col div.ucont p.body {
font-size:13px;
}
div.userlist > div.col div.ucont h2 em {
font-size:14px;
}
}
@media screen and (max-width:700px) {
div.userlist {
grid-template-columns:1fr;
column-gap:3px;
row-gap:6px;
margin:3px;
}
}

a.goto_service {
color:#666;
}
a.goto_service:hover {
color:#000;
}
a.goto_service i {
width:1.1em;
height:1.1em;
margin-right:0.2em;
vertical-align:0.1em;
}
a.goto_service i svg {
width:1.1em;
height:1.1em;
fill:#AAA;
}
a.goto_service_twitter:hover i svg {
fill:#1D9BF0;
}
a.goto_service_youtube:hover i svg {
fill:#F00;
}





div.channel_page_head img.mcn {
width:14px;
height:14px;
vertical-align:0;
margin-left:2px;
}

div.userlist img.mcn {
width:13px;
height:13px;
vertical-align:-1px;
margin-left:2px;
}
p.channel img.mcn {
width:13px;
height:13px;
vertical-align:-1px;
margin-left:2px;
}
p.channel .favstar {
vertical-align:3px;
margin-left:5px;
}
p.site img.site {
height:18px;
vertical-align:-6px;
margin-right:3px;
}

/* ### tag ### */














/* ### player ### */


#youtube_player_chat_box {
}
#youtube_player_chat_box div.player {
width:62%;
float:left;
}
#youtube_player_chat_box div.playerbox {
width:100%;
aspect-ratio:16/9;
}
#youtube_player_chat_box div.playerbox > iframe {
width:100%;
height:100%;
}
#youtube_player_chat_box div.chat {
width:38%;
float:right;
}
#youtube_player_chat_box div.chat > iframe {
width:100%;
height:100%;
}

@media screen and (max-width:700px) {
#youtube_player_chat_box div.player {
width:100%;
}
#youtube_player_chat_box div.chat {
width:100%;
}
}

div.yt_popup_box {
position:absolute;
}
#yt_popup_player {
z-index:10;
background-color:#000;
}
div.yt_popup_box > iframe {
width:100%;
height:100%;
}
div.yt_popup_box #yt_popup_box_player_twitch {
width:100%;
height:100%;
}
div.yt_popup_box #yt_popup_box_player_twitch iframe {
width:100%;
height:100%;
}
div.yt_popup_box i.quickplay_stop {
z-index:4;
position:absolute;
right:0;
bottom:0;
display:inline-block;
width:15px;
height:15px;
padding:7px;
cursor:pointer;
background-color:rgba(0,0,0,0.15);
}
div.yt_popup_box i.quickplay_stop svg {
width:15px;
height:15px;
fill:rgba(255,255,255,0.7);
}
div.yt_popup_box i.quickplay_stop:hover {
background-color:#F00;
}
div.yt_popup_box i.quickplay_stop:hover svg {
fill:#FFF;
}
div.yt_popup_box i.quickplay_stop_twitch:hover {
background-color:#9146FF;
}



#homeinfo_box {
position:sticky;
top:0px;
z-index:10;
background-color:#EEE;
display:flex;
flex-wrap:nowrap;
align-content:flex-start;
align-items:start;
justify-content:center;
width:100%;
margin-bottom:15px;
}
#homeinfo_head {
background-color:#FFF;
display:flex;
flex-wrap:wrap;
align-content:flex-start;
align-items:center;
justify-content:start;
}
#homeinfo_head a.uicon {
margin-left:3px;
width:28px;
height:28px;
position:relative;
}
#homeinfo_head a.uicon img {
width:28px;
height:28px;
border-radius:50%;
border-top-left-radius:9px;
}
#homeinfo_head a.uicon img.mcn {
position:absolute;
width:12px;
height:12px;
right:-2px;
bottom:-2px;
}
#homeinfo_head a.name {
flex:1;
margin:0 5px;
overflow:hidden;
display:block;
-webkit-line-clamp:1;
display:-webkit-box;
-webkit-box-orient:vertical;
text-overflow:ellipsis;
word-break:break-all;
overflow-wrap:anywhere;
color:#000;
font-size:13px;
line-height:1.3;
}
#homeinfo_head .favstar {
margin-right:5px;
}
i.homeinfo_closebtn {
background-color:#AAA;
padding:7px;
width:14px;
height:14px;
cursor:pointer;
margin:3px;
border-radius:50%;
}
i.homeinfo_closebtn svg {
width:14px;
height:14px;
fill:rgba(255,255,255,0.8);
}
i.homeinfo_closebtn:hover {
background-color:#D33;
}
i.homeinfo_closebtn:hover svg {
fill:rgba(255,255,255,1);
}
#homeinfo_box_infochat {
background-color:#FFF;
}
#liveinfobox_cont {
margin:4px;
}
#liveinfobox_cont .cbox {
margin:15px;
}
@media (hover:hover) {
#liveinfobox_cont::-webkit-scrollbar {
width:10px;
}
#liveinfobox_cont::-webkit-scrollbar-track {
background-color:#EEE;
border-radius:5px;
}
#liveinfobox_cont::-webkit-scrollbar-thumb {
background-color:#CCC;
border-radius:5px;
}
#liveinfobox_cont::-webkit-scrollbar-thumb:hover {
background-color:#999;
}
}
#main_chat_box {
padding:0 12px;
}
#main_chat_box iframe {
width:100%;
height:100%;
}
#homeinfo_navi {
display:flex;
flex-wrap:wrap;
align-content:flex-start;
align-items:center;
justify-content:start;
}
#homeinfo_navi span {
height:24px;
line-height:24px;
text-align:center;
color:#444;
flex:1;
cursor:pointer;
}
#homeinfo_navi span:hover {
color:#000;
background-color:#EEE;
}
#homeinfo_navi span.this {
color:#FFF;
background-color:#000;
}
#homeinfo_navi span.this:hover {
color:#FFF;
background-color:#000;
}
#homeinfo_navi span[data-type="togglebtn"] {
width:40px;
flex:unset;
}
.homeinfo_navi_cont_closed {
}
.homeinfo_navi_cont_closed span[data-type="info"] {
border-bottom-left-radius:12px;
}
.homeinfo_navi_cont_closed span[data-type="togglebtn"] {
border-bottom-right-radius:12px;
}

#home_player_outer {
width:100%;
aspect-ratio:16/9;
}
#home_player_outer iframe {
width:100%;
height:100%;
}
#home_player_outer > div {
width:100%;
height:100%;
}

#herebox {
position:absolute;
z-index:8;
aspect-ratio:16/9;
}
#herebox iframe {
width:100%;
height:100%;
}
#herebox > div {
width:100%;
height:100%;
}