@charset "UTF-8";

.sub_page_title_wrap{position:relative;}
.layout_tgg_cont{/* padding:0 10px;margin:10px auto 12px; */align-self:center;gap:10px;margin-left:auto;}
.list_layout_toggle{position:relative;/* position:absolute;top:0;right:0;margin-top:1px; */padding:4px 6px;border:1px solid var(--main-line2-color);border-radius:3px;background-color:var(--opt-bg-color);gap:5px 14px;/* transform:translateY(-50%); */align-self:center;margin-left:auto;}
.list_layout_toggle svg{position:relative;width:12px;height:12px;fill:var(--sub-ft-color);z-index:1;}
.list_layout_toggle .active_disp{position:absolute;top:50%;right:0;width:25px;height:22px;border-radius:0 3px 3px 0;background-color:var(--main-ft-fc-color);margin-top:-11px;transition:0.2s;}
.list_layout_toggle.type_list .active_disp{right:50%;border-radius:3px 0 0 3px;}
.list_layout_toggle:not(.type_list) .svg_ly_rect2, .list_layout_toggle.type_list .svg_ly_rect1{fill:var(--opt-bg-color);}

.subpg_cmm_select{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:2px 24px 2px 10px;border:1px solid var(--main-line2-color);border-radius:0;background:url("https://cdn.metoon.co.kr/img/menv/ico_select_arr_down24x.png") no-repeat 97% center, var(--opt-bg-color);background-position-x:calc(100% - 7px);background-size:10px auto;font-size:12px;color:var(--sub2-ft-color);}

.prc100w_chkbox{position:relative;padding:1px 6px 2px;border:1px solid var(--sub-ft-color);border-radius:3px;background-color:var(--opt-bg-color);font-size:11px;font-weight:400;color:var(--sub2-ft-color);line-height:1;flex-shrink:0;opacity:0.45;transition:opacity 0.2s;}
.prc100w_chkbox .chk_ico{width:0.9em;fill:var(--sub2-ft-color);opacity:0.7;margin-right:0.35em;margin-top:1px;}
.prc100w_chkbox:has(input:checked){opacity:1;border-color:var(--main-ft-fc-color);background-color:var(--opt-bg-color);font-weight:500;color:var(--main-ft-fc-color);}
.prc100w_chkbox input:checked ~ .chk_ico{fill:var(--main-ft-fc-color);opacity:1;}

.strmlivtc_wrap{margin:10px auto 20px;}
.strmlivtc_head{/* max-width:calc(100% - 10px); */padding:0 10px;background-color:var(--sub-bg-color);margin:0 auto 5px;}
[color-theme="light"] .strmlivtc_head{background-color:#F4F4F4;}
.strmlivtc_hd_th{padding:10px;padding-top:9px;font-size:14px;font-weight:500;color:var(--main-ft-fc-color);text-align:center;}
.strmlivtc_hd_th.title{flex:1 1 auto;}
.strmlivtc_hd_th.coins, .strmlivtc_hd_th.prt_name{width:120px;flex-shrink:0;}

.strmlivtc_item{position:relative;border-top:1px solid #040404;}
.strmlivtc_cons{position:relative;border-top:1px solid #242424;min-width:0;padding:6px 10px;align-items:center;gap:15px;}
[color-theme="light"] .strmlivtc_item{border-top:0 none;}
[color-theme="light"] .strmlivtc_cons{border-top-color:var(--main-line-color);}
.strmlivtc_item:first-child, .strmlivtc_item:first-child .strmlivtc_cons{border-top:0 none;}
.strmlivtc_thumbnail{position:relative;width:64px;height:38px;background:url("https://cdn.metoon.co.kr/mimg/xtagram_logo_5_mini.svg") no-repeat center, var(--sub-bg-color);background-size:auto 20px;flex-shrink:0;}
.strmlivtc_thumbimg{display:block;width:100%;height:100%;border:1px solid var(--main-line-color);border-radius:3px;box-sizing:border-box;object-fit:cover;}
.strmlivtc_summ{min-width:0;flex:1 1 auto;}
.strmlivtc_title{font-size:16px;}
.strmlivtc_title .icon_19_patch{height:1em;vertical-align:-1px;margin-right:4px;}
.strmlivtc_summ .svd_title_lbs{margin-left:0;}
.strmlivtc_prt_name{color:var(--main-ft-fc-color);}

.strmlivtc_infos{color:var(--sub2-ft-color);}
.strmlivtc_coins{flex-shrink:0;}
.strmlivtc_coins .fillCoinIco{height:1.05em;flex-shrink:0;align-self:center;margin-right:4px;}
.strmlivtc_prt_name{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}

.strmlivtc_thumb_ly{position:absolute;top:0;left:100%;width:max-content;max-width:calc(100vw - 165px);padding:6px;border:1px solid var(--main-line-color);border-radius:5px;background-color:var(--opt-bg-color);gap:10px;flex-wrap:wrap;z-index:9;margin-left:5px;}
.strmlivtc_thumb_ly:before{content:"";display:block;position:absolute;top:0;right:100%;width:6px;height:100%;}
.strmlivtc_thumb_ly:not(.active){display:none;}
.strmlivtc_thumb_ly img{height:80px;flex-shrink:0;}

@media (hover:hover) and (pointer:fine){
	.strmlivtc_cons{transition:background-color 0.2s;}
	.strmlivtc_cons:hover{background-color:rgba(255, 255, 255, 0.03);}
}

@media screen and (min-width:768px){
	.sub_vd_cont:has(.strmlivtc_wrap){padding-left:10px;padding-right:10px;}
	.strmlivtc_title.bold{font-weight:700;}
	.strmlivtc_title.co_blue{color:#4AACD7;}
	.strmlivtc_title.co_red{color:var(--bg-fc-color);}
	.strmlivtc_title.co_yellow{color:#D0D52A;}
	.strmlivtc_title.co_green{color:#31BB31;}
	.strmlivtc_title.co_purple{color:#C247C2;}
	.strmlivtc_summ{align-items:center;}
	.strmlivtc_summ .svd_title_lbs{align-self:center;margin-left:10px;}
	.strmlivtc_infos{padding-left:10px;padding-right:5px;font-size:14px;margin-left:auto;}
	.strmlivtc_coins, .strmlivtc_prt_name{width:120px;}
	.strmlivtc_prt_name{text-align:center;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;text-overflow:ellipsis;overflow:hidden;white-space:normal;word-break:break-all;}
}

@media screen and (min-width:1000px){
	.strmlivtc_wrap{margin-top:20px;}
	.strmlivtc_wrap.mgt15{margin-top:15px;}
	.subpg_tab_menu_wrap ~ .sub_vd_cont{margin-top:20px;}
	.layout_tgg_cont ~ .strmlivtc_wrap{margin-top:0;}
}

@media screen and (max-width:999px) and (min-width:768px){
	.subpg_tab_menu_wrap ~ .sub_vd_cont{margin-top:15px;}
}

@media screen and (max-width:767px){
	.sub_page_title_wrap{display:flex;}
	.layout_tgg_cont{gap:5px;}
	/* .list_layout_toggle{position:relative;top:auto;right:auto;margin-left:auto;margin-top:10px;} */
	.prc100w_chkbox{padding-top:2px;font-size:10px;}
	.prc100w_chkbox .chk_ico{font-size:0.8em;}
	.list_layout_toggle{padding:3px 5px;gap:5px 10px;}
	.list_layout_toggle svg{width:10px;height:10px;}
	.list_layout_toggle .active_disp{width:20px;height:18px;margin-top:-9px;}
	.subpg_cmm_select{padding:0 11px 1px 6px;background-size:8px auto;background-position-x:calc(100% - 3px);font-size:10px;}
	.strmlivtc_wrap{margin-top:0;}
	.strmlivtc_head, .strmlivtc_thumb_ly{display:none !important;}
	.strmlivtc_cons{padding:10px;border-color:#1F1F1F;}
	.strmlivtc_thumbnail{width:142px;height:81px;background-size:auto 30px;}
	.strmlivtc_summ{-webkit-flex-direction:column;flex-direction:column;gap:5px;}
	.strmlivtc_title{font-size:14px;font-weight:500;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;max-height:2.62em;}
	.strmlivtc_title.bold{font-weight:700;}
	.strmlivtc_summ .wr_text_tag{font-size:10px;}
	.strmlivtc_summ .svd_title_lbs{height:15px;flex-wrap:wrap;overflow:hidden;-webkit-order:2;order:2;margin-top:3px;}
	.strmlivtc_infos{font-size:12px;gap:5px 0;}
	.strmlivtc_infos div ~ div:before{content:"/";display:inline-block;color:var(--sub-ft-color);font-size:0.9em;margin:0 6px;}
	.strmlivtc_coins .fillCoinIco{height:1em;}
}

@media screen and (max-width:359px){
	.strmlivtc_cons{gap:12px;}
	.strmlivtc_thumbnail{width:100px;height:57px;height:57.2px;align-self:flex-start;}
	.strmlivtc_summ{gap:3px;}
}