@charset "UTF-8";

.detail_horz_list{margin-bottom:5px;}
.dethorztoon_li{position:relative;border-top:1px solid var(--main-line-color);-webkit-align-items:center;align-items:center;transition:background-color 0.2s;}
.dethorztoon_li:first-child{border-top:0 none;}
.dethorztoon_con{position:relative;padding:15px 10px;gap:10px 30px;-webkit-flex:1 1 auto;flex:1 1 auto;}
.dethorztoon_img_box{position:relative;width:360px;height:175px;border:1px solid var(--main-line-color);border-radius:5px;background-color:var(--sub-bg-color);-webkit-flex-shrink:0;flex-shrink:0;}
.dethorztoon_img_box .novel_img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:4px;}
.dethorztoon_img_box .xtg_detail_mark{padding-bottom:27px;}
.dethorztoon_txt_box{-webkit-flex:1 1 auto;flex:1 1 auto;color:var(--sub2-ft-color);}
.dethorztoon_seq, .dethorztoon_title{-webkit-align-items:center;align-items:center;gap:6px;}
.dethorztoon_seq{flex-wrap:wrap;gap:6px 8px;}
.dethorztoon_seq .seq_num{font-size:15px;color:var(--sub-ft-color);}
.dethorztoon_seq + .dethorztoon_title{margin:12px 0;}
.dethorztoon_title .sub_title{font-size:16px;}
.dethorztoon_title .icon_19_patch{height:16px;vertical-align:-2px;flex-shrink:0;}
.dethorztoon_btn{-webkit-flex-direction:column;flex-direction:column;-webkit-flex-shrink:0;flex-shrink:0;cursor:pointer;margin-left:5px;margin-right:15px;}
.detail_horz_list .list_btn{display:-webkit-flex;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;width:142px;height:42px;border:1px solid var(--main-line2-color);border-radius:5px;background-color:var(--sub-bg-color);font-size:15px;color:var(--main-ft-fc-color);text-align:center;box-sizing:border-box;transition:border-color 0.2s;}
.detail_horz_list .list_btn.free_btn, .detail_horz_list .list_btn.coin_btn{gap:5px 7px;}
.detail_horz_list .list_btn.free_btn span:not(.coin_sale), .detail_horz_list .list_btn.coin_btn span:not(.coin_sale){padding-left:20px;background-size:auto 15px;background-repeat:no-repeat;background-position:0 center;}
.detail_horz_list .list_btn.free_btn span:not(.coin_sale){background-image:url("https://cdn.metoon.co.kr/mimg/gtoon/detail_free_icon.svg");}
.detail_horz_list .list_btn.coin_btn span:not(.coin_sale){background-image:url("https://cdn.metoon.co.kr/mimg/ht_coin_gold.svg");}
/* .detail_horz_list .free_btn:before, .detail_horz_list .coin_btn:before{content:"";display:inline-block;height:1em;background-size:auto 100%;background-repeat:no-repeat;background-position:center;flex-shrink:0;}
.detail_horz_list .free_btn:before{width:16px;width:calc(1em + 1px);background-image:url("https://cdn.metoon.co.kr/mimg/gtoon/detail_free_icon.svg");margin-bottom:2px;}
.detail_horz_list .coin_btn:before{width:1em;background-image:url("https://cdn.metoon.co.kr/mimg/ht_coin_gold.svg");} */
.detail_horz_list .list_btn .coin_sale{position:relative;padding:0 10px 0 5px;font-size:0.8em;color:var(--sub2-ft-color);}
.dethorztoon_btn:has(.memvip_btn):after{content:"이용권 사용 가능";display:inline-block;display:inline-flex;align-items:center;justify-content:center;padding:1px 10px 0;width:98%;height:26px;border:1px solid var(--bg-fc-color);border-radius:4px;background-color:var(--bg-fc-color);font-size:13px;color:var(--main-ft-color);text-align:center;box-sizing:border-box;margin-top:10px;margin-bottom:-36px;}

@media (hover:hover) and (pointer:fine){
	.dethorztoon_li:has(a:hover){background-color:rgba(255, 255, 255, 0.02);}
	.dethorztoon_li:has(a:hover) .list_btn{border-color:var(--main-ft-fc-color);}
}

@media screen and (min-width:700px){
	.detail_horz_list .txt_recent_icon, .detail_horz_list .ic_open_item{font-size:12px;padding:2px 5px;font-weight:400;margin:0;flex-shrink:0;}
}

@media screen and (max-width:1023px){
	.dethorztoon_img_box{width:220px;height:106px;}
	.dethorztoon_img_box .det_loadpre_logo{min-width:auto;width:36px;}
}

@media screen and (max-width:699px){
	.dethorztoon_con{gap:10px 15px;padding-top:10px;padding-bottom:10px;}
	.dethorztoon_img_box{width:160px;height:77px;border-radius:3px;}
	.dethorztoon_img_box .novel_img{border-radius:2px;}
	.dethorztoon_img_box .ic_prem_xtg.pos_abs{margin:3px;}
	.dethorztoon_img_box .xtg_detail_mark{padding-bottom:18px;}
	.dethorztoon_img_box .xtg_detail_mark img{max-width:60px;}
	.dethorztoon_seq{gap:6px;}
	.dethorztoon_seq .seq_num{font-size:13px;}
	.dethorztoon_seq + .dethorztoon_title{margin:6px 0;}
	.dethorztoon_title .sub_title{font-size:14px;}
	.detail_horz_list .list_btn{width:112px;height:auto;min-height:36px;padding:5px;font-size:13px;}
	.detail_horz_list .list_btn.free_btn, .detail_horz_list .list_btn.coin_btn{gap:2px 5px;}
	.detail_horz_list .list_btn.free_btn span:not(.coin_sale), .detail_horz_list .list_btn.coin_btn span:not(.coin_sale){background-size:auto 14px;}
	.dethorztoon_img_box .free_count_box img{margin:6px auto;width:26px !important;}
	.dethorztoon_img_box .free_count_box p{font-size:14px;}
	.dethorztoon_btn:has(.memvip_btn):after{width:auto;height:auto;padding:2px 10px 3px;font-size:11px;margin:5px 0 -10px;}
}

@media screen and (max-width:499px){
	.dethorztoon_con{padding:8px 5px 8px 8px;gap:10px;}
	.dethorztoon_img_box{width:120px;height:57px;}
	.dethorztoon_img_box .ic_prem_xtg.pos_abs{font-size:10px;font-size:8px;margin:2px;}
	.dethorztoon_img_box .free_count_box img{margin-top:9px;margin-bottom:2px;}
	.dethorztoon_img_box .free_count_box p{font-size:12px;}
	.dethorztoon_btn{margin:0 10px 0 0;}
	.detail_horz_list .list_btn{width:auto;height:auto;min-height:auto;padding:5px 10px 6px;font-size:12px;}
	.detail_horz_list .list_btn:has(span.coin_sale){max-width:80px;}
	.detail_horz_list .list_btn.free_btn span:not(.coin_sale), .detail_horz_list .list_btn.coin_btn span:not(.coin_sale){padding-left:14px;background-size:auto 10px;}
	.detail_horz_list .list_btn .coin_sale{font-size:0.9em;}
	.dethorztoon_btn:has(.memvip_btn):after{padding-left:5px;padding-right:5px;font-size:8px;line-height:1;margin:5px 0 -2px;}
	.dethorztoon_seq + .dethorztoon_title{margin:4px 0 0;}
	.dethorztoon_title .sub_title{font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.2;max-height:2.45em;text-overflow:ellipsis;overflow:hidden;white-space:normal;}
}

@media screen and (max-width:349px){
	.detail_horz_list .list_btn{max-width:70px;}
}