210726 webtoon_main_right | css

[jjjeongmin]

#webtoon_main .webtoon_main_right .webtoon_challenge_wrap{
width: 100%;
height: 252px;
background-color: #f9f9fc;

padding: 20px 18px;
margin-bottom: 20px;

}

#webtoon_main .webtoon_main_right .webtoon_challenge_wrap h3{
font-size: 18px;
margin-bottom: 11px;
}

#webtoon_main .webtoon_main_right .webtoon_challenge_wrap h3 span{
color: #00d564;

}

#webtoon_main .webtoon_main_right .webtoon_challenge_wrap img {
width: 100%;
height: 110px;

margin-bottom: 18px;

}

#webtoon_main .webtoon_main_right .webtoon_challenge_wrap .webtoon_info{

}

#webtoon_main .webtoon_main_right .webtoon_challenge_wrap .webtoon_info .webtoon_title_wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;

margin-bottom: 5px;

}

#webtoon_main .webtoon_main_right .webtoon_challenge_wrap .webtoon_info .webtoon_title_wrap h4{
font-size: 16px;
}

#webtoon_main .webtoon_main_right .webtoon_challenge_wrap .webtoon_info a:hover{
text-decoration: underline;

}

#webtoon_main .webtoon_main_right .webtoon_challenge_wrap .webtoon_info .webtoon_title_wrap a{
font-size: 12px;
}

#webtoon_main .webtoon_main_right .webtoon_challenge_wrap .webtoon_info p{
font-size: 14px;

}

#webtoon_main .webtoon_main_right .webtoon_challenge_wrap .webtoon_info p a{
color: grey;
}

#webtoon_main .webtoon_main_right .webtoon_baneer_type_1,
#webtoon_main .webtoon_main_right .webtoon_baneer_type_2{
margin-bottom: 8px;
}

#webtoon_main .webtoon_main_right .webtoon_baneer_type_1 {
width: 100%;
height: 240px;
background-color: yellow;

}

#webtoon_main .webtoon_main_right .webtoon_banner_type_2 {
width: 100%;
height: 86px;
background-color: pink;
}

#webtoon_main .webtoon_main_right .webtoon_popular{
background-color: #ffffff;

margin-bottom: 8px;

}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_header{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;

padding: 9px 12px;

}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_header h2{
font-size: 14px;
}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_tabs {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;

border-top: solid 1px #e1e1e1;

}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_tabs .tab{
width: 50%;
height: 30px;
border-bottom: solid 1px #e1e1e1;

text-align: center;

}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_tabs .tab:first-child{
border-right: solid 1px #e1e1e1;
}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_tabs .tab.active{
border-bottom: solid 1px #ffffff;
}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_tabs .tab span{
display: block;
width: 100%;
height: 100%;
line-height: 30px;

font-size: 12px;

}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_ranking{
width: 100%;
background-color: #ffffff;

padding: 15px 0 7px;

}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_ranking {

}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_ranking ol{
}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_ranking li {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;

font-size: 12px;

padding: 0 13px;
margin-bottom: 7px;

}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_ranking .rank_contents{
display: flex;
flex-wrap: wrap;
align-items: center;
}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_ranking .rank_contents a {
display: inline-block;
overflow: hidden;
width: 140px;
white-space: nowrap;
text-overflow: ellipsis;

}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_ranking .rank_contents .rank{
margin-right: 5px;
}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_ranking .rank_box{
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;

width: 30px;
height: 12px;

top: -3px;

}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_ranking .rank_box .status {
width: 12px;
height: 12px;
}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_ranking .rank_box .status.status_stay {
background-color: black;
}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_ranking .rank_box .status .number {

}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_ranking .status.status_up {
background-color: red;
}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_ranking .status.status_down {
background-color: blue;
}

/썸네일 이미지가 포함된 랭킹/
#webtoon_main .webtoon_main_right .webtoon_popular_ranking .rank_contents .rank_custom{
position: relative;
top: -10px;
}
#webtoon_main .webtoon_main_right .webtoon_popular_ranking .image_wrap {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;

width: 140px;

}

#webtoon_main .webtoon_main_right .webtoon_popular_ranking .image_wrap img{
width: 30px;
height: 33px;
margin-right: 5px;
}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_ranking .image_wrap .webtoon_info{
/background-color: yellow;/
}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_ranking .image_wrap .webtoon_info a{
width: 100px;
}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_ranking .image_wrap .webtoon_info .author{
display: block;
}