html{font-size:20px; font-family:'Noto Sans KR', sans-serif; -webkit-font-smoothing: subpixel-antialiased; -ms-font-smoothing: subpixel-antialiased; font-smoothing: antialiased}
body{font-size:1rem;}

.sportcs-toptoon-wp{max-width: 1024px; max-height: 1916px; width: 100%; margin:0 auto; overflow: hidden; box-sizing: border-box; letter-spacing: -0.72px;}

/*메인배너*/
.mainbanner-wp{max-width: 1024px; width: 100%; padding:17px 17px 0; box-sizing: border-box; position: relative;height: 0px;padding-bottom: 53% !important;}
.mainbanner-wp .mainbanner{max-width: 990px; width: 100%;}
.mainbanner-wp .mainbanner div a{display: block;}
.mainbanner-wp .mainbanner div a img{width: 100%;}
.mainbanner-wp .dot-icon{position: absolute; bottom:10%; left:7%; z-index: 5;}
.mainbanner-wp .dot-icon li{float: left; margin-right:7px;opacity: 1;}
.mainbanner-wp .dot-icon li a{display: block; width: 10px; height: 10px; background:#fff; border-radius: 50%;  opacity: 0.5;}
.mainbanner-wp .dot-icon li.active a{background: #e63740; opacity: 1;}
/*//메인배너*/

/*컨텐츠 공통적용*/
.content{max-width: 890px; width: 100%; margin: 0 auto; box-sizing: border-box;}
.content strong{font-family: 'Noto Sans KR';font-size: 1.6rem; font-weight: 500; display: inline-block; margin: 24px 0 14px;}
.content ul li a img{width: 100%; margin-bottom: 6px;}
.content ul li a{display: block;}
.content ul li a p{color:#333; font-weight: 500;  float: left; width: 64%; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.content ul li a span{color:#666; font-weight: 500; display: block; letter-spacing: -0.4px; float: right; width: 36%; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; text-align: right;}
/*//컨텐츠 공통적용*/

/*탑툰랭킹*/
.toptn-ranking ul{display: flex; flex-wrap: wrap;}
.toptn-ranking ul li{float: left; max-width: 430px; width: 50%; margin-bottom: 30px;}
.toptn-ranking ul li:nth-of-type(2n+1){margin-right: 3.3%;}
.toptn-ranking ul li:nth-of-type(3),.toptn-ranking ul li:nth-of-type(4){margin-bottom: 0px;}
.toptn-ranking ul li a p{font-size: 1.1rem; }
.toptn-ranking ul li a span{font-size: 0.9rem;}
/*//탑툰랭킹*/

/*무료웹툰*/
.free-webtoon ul li{display: none; max-width: 890px;}
.free-webtoon ul li.on{display: block;}
.free-webtoon ul li a img{width: 100%;}
/*//무료웹툰*/

/*추천웹툰*/
.rcmnd-list > p{display: inline-block; margin-left: 4px; color:#444; font-weight: 500; font-size: 1rem;}
.rcmnd-list > p:before{content: ''; width: 4px; height: 4px; background: #444; display: inline-block; border-radius: 50%; margin-bottom: .5ex; margin-right: 3px;}
.rcmnd-list ul{margin-bottom: 30px; display: flex; flex-wrap:wrap;}
.rcmnd-list ul li{float: left; margin-right: 10px; width: 24.25%; max-width: 215px;}
.rcmnd-list ul li:last-child{margin-right: 0;}
.rcmnd-list ul li a p{font-size: 0.9rem;}
.rcmnd-list ul li a span{font-size: 0.7rem;}
/*//추천웹툰*/

/* :::테블릿 버전::: */ 
@media (min-width:768px) and (max-width:1023px){  
	html{font-size:18px; font-family:'Noto Sans KR'}
	body{font-size:1rem; margin:0; padding:0}

	.sportcs-toptoon-wp{padding:0 10px; height:auto;}

	.mainbanner-wp{padding: 0; margin-top: 10px;}
	.mainbanner-wp .dot-icon{left:6%; bottom: 10%;}

	.content ul li a p{font-size: 1rem;}
	.content ul li a span{font-size: 0.8rem;}

	.toptn-ranking ul li{width: 49%;}
	.toptn-ranking ul li:nth-of-type(2n+1){margin-right: 2%;}

	.rcmnd-list ul li{margin-right: 1%;}
}

/* :::모바일 버전::: */   
@media (min-width:0) and (max-width:767px) {
	html {font-size: 16px;background: #fff; font-family:'Noto Sans KR';}
	body {font-size: 1rem; margin: 0; padding: 0}

	.sportcs-toptoon-wp{padding:0 10px; height:auto;}

	.mainbanner-wp{padding: 0; margin-top: 10px;}
	.mainbanner-wp .dot-icon{left:6%; bottom: 9%;}
	.mainbanner-wp .dot-icon li{margin-right: 5px; }
	.mainbanner-wp .dot-icon li a{width: 7px; height: 7px;}

	.content strong{font-size: 1.35rem; margin: 20px 0 10px;}
	.content ul li a p{margin-left: 2px; width: 100%;}
	.content ul li a span{width: 100%; float:left; font-size: 0.75rem; text-align: left;}

	.toptn-ranking ul li{margin-bottom: 16px; width: 49%;}
	.toptn-ranking ul li:nth-of-type(2n+1){margin-right: 2%;}
	.toptn-ranking ul li a p{font-size: 1rem;}
	.toptn-ranking ul li a span{margin: 4px 0 0 2px;}

	.rcmnd-list ul{margin-bottom: 24px;}
	.rcmnd-list ul li{margin-right: 1%;}
	.rcmnd-list ul li a p{font-size: 0.8rem; word-break: keep-all; line-height: 1.2; }
	.rcmnd-list ul li a span{margin: 3px 0 0 2px;}
}