@charset "utf-8";

#container {overflow:hidden; position:relative;}
#main-visual {width:67.38589211618257%; margin:0.6639004149377593% 0.5%/*8px*/; position:absolute; left:16.30705394190872%;}
#main-visual ul.main-visual-imgs {position:relative;overflow:hidden; width:100%;height:0;padding-top:50%; }
#main-visual ul.main-visual-imgs li {float:left; width:100%; position:absolute; top:0; left:0;}
#main-visual ul.main-visual-imgs li a {display:block; width:100%; height:0; padding-top:50%;}
#main-visual .upper-banner1 {background:url(../img/toon/action/banner.png) left bottom no-repeat; background-size:contain; animation:mv1 24s linear infinite;-moz-animation:mv1 24s linear infinite;-webkit-animation:mv1 24s linear infinite;}
@keyframes mv1 {
	0% {margin-left:0;}
	11% {margin-left:0;}
	16% {margin-left:-100%;}
	100% {margin-left:-100%;}
}
@-moz-keyframes mv1 {
	0% {margin-left:0;}
	11% {margin-left:0;}
	16% {margin-left:-100%;}
	100% {margin-left:-100%;}
}
@-webkit-keyframes mv1 {
	0% {margin-left:0;}
	11% {margin-left:0;}
	16% {margin-left:-100%;}
	100% {margin-left:-100%;}
}
#main-visual .upper-banner2 {background:url(../img/toon/bl/banner.png) 0 0 no-repeat; background-size:cover;margin-left:100%;animation:mv2 24s linear infinite;-moz-animation:mv2 24s linear infinite;-webkit-animation:mv2 24s linear infinite;}
@keyframes mv2 {
	0% {margin-left:100%;}
	11% {margin-left:100%;}
	16% {margin-left:0%;}
	27% {margin-left:0%;}
	32% {margin-left:-100%;}
	100% {margin-left:-100%;}
}
@-moz-keyframes mv2 {
	0% {margin-left:100%;}
	11% {margin-left:100%;}
	16% {margin-left:0%;}
	27% {margin-left:0%;}
	32% {margin-left:-100%;}
	100% {margin-left:-100%;}
}
@-webkit-keyframes mv2 {
	0% {margin-left:100%;}
	11% {margin-left:100%;}
	16% {margin-left:0%;}
	27% {margin-left:0%;}
	32% {margin-left:-100%;}
	100% {margin-left:-100%;}
}
#main-visual .upper-banner3 {background:url(../img/toon/drama/banner.png) 0 0 no-repeat; background-size:cover;margin-left:100%;animation:mv3 24s linear infinite;-moz-animation:mv3 24s linear infinite;-webkit-animation:mv3 24s linear infinite;}
@keyframes mv3 {
	0% {margin-left:100%;}
	27% {margin-left:100%;}
	32% {margin-left:0%;}
	43% {margin-left:0%;}
	48% {margin-left:-100%;}
	100%{margin-left:-100%;}
}
@-moz-keyframes mv3 {
	0% {margin-left:100%;}
	27% {margin-left:100%;}
	32% {margin-left:0%;}
	43% {margin-left:0%;}
	48% {margin-left:-100%;}
	100%{margin-left:-100%;}
}
@-webkit-keyframes mv3 {
	0% {margin-left:100%;}
	27% {margin-left:100%;}
	32% {margin-left:0%;}
	43% {margin-left:0%;}
	48% {margin-left:-100%;}
	100%{margin-left:-100%;}
}
#main-visual .upper-banner4 {background:url(../img/toon/lov/banner.png) 0 0 no-repeat; background-size:cover;margin-left:100%;animation:mv4 24s linear infinite;-moz-animation:mv4 24s linear infinite;-webkit-animation:mv4 24s linear infinite;}
@keyframes mv4 {
	0% {margin-left:100%;}
	43% {margin-left:100%;}
	48% {margin-left:0%;}
	59% {margin-left:0%;}
	64% {margin-left:-100%;}
	100%{margin-left:-100%;}
}
@-moz-keyframes mv4 {
	0% {margin-left:100%;}
	43% {margin-left:100%;}
	48% {margin-left:0%;}
	59% {margin-left:0%;}
	64% {margin-left:-100%;}
	100%{margin-left:-100%;}
}
@-webkit-keyframes mv4 {
	0% {margin-left:100%;}
	43% {margin-left:100%;}
	48% {margin-left:0%;}
	59% {margin-left:0%;}
	64% {margin-left:-100%;}
	100%{margin-left:-100%;}
}
#main-visual .upper-banner5 {background:url(../img/toon/web/banner.png) 0 0 no-repeat; background-size:cover;margin-left:100%;animation:mv5 24s linear infinite;-moz-animation:mv5 24s linear infinite;-webkit-animation:mv5 24s linear infinite;}
@keyframes mv5 {
	0% {margin-left:100%;}
	59% {margin-left:100%;}
	64% {margin-left:0%;}
	75% {margin-left:0%;}
	80% {margin-left:-100%;}
	100%{margin-left:-100%;}
}
@-moz-keyframes mv5 {
	0% {margin-left:100%;}
	59% {margin-left:100%;}
	64% {margin-left:0%;}
	75% {margin-left:0%;}
	80% {margin-left:-100%;}
	100%{margin-left:-100%;}
}
@-webkit-keyframes mv5 {
	0% {margin-left:100%;}
	59% {margin-left:100%;}
	64% {margin-left:0%;}
	75% {margin-left:0%;}
	80% {margin-left:-100%;}
	100%{margin-left:-100%;}
}
#main-visual .upper-banner6 {background:url(../img/toon/young/banner.png) 0 0 no-repeat; background-size:cover;margin-left:100%;animation:mv6 24s linear infinite;-moz-animation:mv6 24s linear infinite;-webkit-animation:mv6 24s linear infinite;}
@keyframes mv6 {
	0% {margin-left:100%;}
	75% {margin-left:100%;}
	80% {margin-left:0%;}
	91% {margin-left:0%;}
	96% {margin-left:-100%;}
	100%{margin-left:-100%;}
}
@-moz-keyframes mv6 {
	0% {margin-left:100%;}
	75% {margin-left:100%;}
	80% {margin-left:0%;}
	91% {margin-left:0%;}
	96% {margin-left:-100%;}
	100%{margin-left:-100%;}
}
@-webkit-keyframes mv6 {
	0% {margin-left:100%;}
	75% {margin-left:100%;}
	80% {margin-left:0%;}
	91% {margin-left:0%;}
	96% {margin-left:-100%;}
	100%{margin-left:-100%;}
}
#main-visual .upper-banner7 {background:url(../img/toon/action/banner.png) left bottom no-repeat; background-size:cover; animation:mv7 24s linear infinite;-moz-animation:mv7 24s linear infinite;-webkit-animation:mv7 24s linear infinite;}
@keyframes mv7 {
	0% {margin-left:100%;}
	91% {margin-left:100%;}
	96% {margin-left:0%;}
	100% {margin-left:0%;}
}
@-moz-keyframes mv7 {
	0% {margin-left:100%;}
	91% {margin-left:100%;}
	96% {margin-left:0%;}
	100% {margin-left:0%;}
}
@-webkit-keyframes mv7 {
	0% {margin-left:100%;}
	91% {margin-left:100%;}
	96% {margin-left:0%;}
	100% {margin-left:0%;}
}

#main-visual:hover .upper-banner1,#main-visual:hover .upper-banner2,#main-visual:hover .upper-banner3,#main-visual:hover .upper-banner4, #main-visual:hover .upper-banner5, #main-visual:hover .upper-banner6, #main-visual:hover .upper-banner7 {animation-play-state: paused;-webkit-animation-play-state: paused;-moz-animation-play-state: paused;}

#toon-cat {margin-top:36.09958506224066%; overflow-x:scroll;width:100%;}

#toon-cat h2 {background-color:#ffd200; text-align:center; font-size:30px; font-weight:bold; height:80px; line-height:80px}

#toon-cat > ul {width:700%; overflow:hidden;}
#toon-cat > ul > li {float:left; width:14.28571428571429%;}
#toon-cat > ul > li > ul {width:100%;}
#toon-cat > ul > li > ul > li {width:90%; margin:0 5%; padding:2.5% 0; border-bottom:1px solid #999;}
#toon-cat .top5 {border:none;}
#toon-cat li a {overflow:hidden; display:block;}
#toon-cat span {display:block; width:27.0544783010157%; float:left; position:relative;}
#toon-cat img {width:100%;}
#toon-cat p {width:72%; float:left;}
#toon-cat p span {display:block; width:100%; font-size:22px; font-weight:bold; margin-top:5.07380073800738%; margin-left:1.383763837638376%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#toon-cat p span ~ span {font-size:20px; font-weight:normal; margin-top:0;}
#toon-cat p span + span + span {margin-top: 2.767527675276753%;}
#toon-cat .wait:after {content:''; display:block; background:url(../img/toon/badge_time.png)0 0 no-repeat; width:17.06484641638225%; height:24.87562189054726%; position:absolute; top:0; left:0; background-size:cover;}
#toon-cat .webtoon:after {content:''; display:block; background:url(../img/toon/badge_KT.png)0 0 no-repeat; width:35.83617747440273%; height:24.87562189054726%; position:absolute; top:0; left:0; background-size:cover;}


@media (max-width:1023px) {
#container {margin-top:107px;}
#main-visual {width:100%; margin:0/*8px*/;left:0%; top:17px;}
#toon-cat {margin-top:36.09958506224066%; overflow-x:scroll;width:100%; padding-top:174px}
}

@media (max-width:767px) {
#toon-cat {padding-top:124px}
#toon-cat h2 {font-size:26px;height:60px; line-height:60px}
#toon-cat > ul > li > ul > li {width:100%; margin:0;}
#toon-cat p span {font-size:12px;}
#toon-cat p span ~ span {font-size:12px; }
}

@media (max-width:400px) {
#toon-cat p span {margin-top:2%}
#toon-cat p span + span + span {margin-top: 1%;}
}