210723 | CSS | naver_webtoon_main_left

[jjjeongmin]

.webtoon_border{
border: solid 1px #ced2d2;
}

.webtoon_container{
width: 960px;
margin: 0 auto;
}

#webtoon_header .webtoon_header_top .webtoon_container{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}

#webtoon_header{
background-color: #ffffff;
}

#webtoon_header .webtoon_header_top{
padding: 10px 0 8px 0;
border-bottom:solid 1px #f2f2f2;
background-color: #ffffff;
}

#webtoon_header .webtoon_header_top .webtoon_header_left{
display: flex;
flex-wrap: wrap;
align-items: center;

width: 550px;

}

#webtoon_header .webtoon_header_top .webtoon_header_left h2{
font-size: 20px;
}

#webtoon_header .webtoon_header_top .webtoon_header_left .bar{
width: 1px;
height: 13px;
background-color: #d2d2d2;

margin: 0 10px 0 8px;

}

#webtoon_header .webtoon_header_top .webtoon_header_left h3{
margin-right: 30px;

font-size: 16px;

}
#webtoon_header .webtoon_header_top .webtoon_header_left h3 a{
color: grey;
}

#webtoon_header .webtoon_header_top .webtoon_header_left .webtoon_haeder_input_wrap{
display: flex;
flex-wrap: wrap;
align-items: center;

width: 315px;
height: 37px;
border: solid 1px #e5e5e5;

}

#webtoon_header .webtoon_header_top .webtoon_header_left .webtoon_haeder_input_wrap input{
width: calc(100% - 35px);
height: 100%;
border: none;

padding: 0 10px;

}

#webtoon_header .webtoon_header_top .webtoon_header_left .webtoon_haeder_input_wrap input:focus{
outline: none;
}

#webtoon_header .webtoon_header_top .webtoon_header_left .webtoon_haeder_input_wrap .btn_search{
width: 35px;
height: 100%;
background-color: #00d564;
}

#webtoon_header .webtoon_header_top .webtoon_header_right{
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
}

#webtoon_header .webtoon_header_top .webtoon_header_right .btn_login{
border: solid 1px #000000;

padding: 2px 4px;
margin-right: 20px;

font-size: 12px;

}

#webtoon_header .webtoon_header_top .webtoon_header_right .btn_menu{
width: 16px;
height: 16px;
background-color: blue;
}

#webtoon_header .webtoon_header_nav{
border-bottom: solid 1px #e5e5e5;

}

#webtoon_header .webtoon_container{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}

#webtoon_header .webtoon_header_nav nav{

}

#webtoon_header .webtoon_header_nav nav ul{
display: flex;
flex-wrap: wrap;
align-items: center;
}

#webtoon_header .webtoon_header_nav nav ul li{
width: auto;
height: 40px;
}

#webtoon_header .webtoon_header_nav nav ul li.on a{
background-color: #00d564;
color: #ffffff;

}

#webtoon_header .webtoon_header_nav nav ul li a{
display: block;
width: 100%;
height: 100%;
padding: 0 15px;

font-size: 14px;

line-height: 40px;

}

#webtoon_header .webtoon_header_link_wrap {

}

#webtoon_header .webtoon_header_link_wrap .icon_ex_mark{
display: inline-block;
width: 16px;
height: 14px;
background-color: #000000;
vertical-align: middle;
}

#webtoon_header .webtoon_header_link_wrap a{
vertical-align: middle;

font-size: 12px;
color: #606060;

}

#webtoon_header .webtoon_header_link_wrap a:hover{
text-decoration: underline;
}

/홈, 웹툰 header 영역 끝/

/홈 메인/

#webtoon_main .webtoon_container{
overflow: hidden;
}

#webtoon_main .webtoon_main_left {
float: left;

width: 694px;

}

#webtoon_main .webtoon_main_left .webtoon_content{
background-color: #ffffff;
}

#webtoon_main .webtoon_main_left .webtoon_carousel{
overflow: hidden;

width: 694px;
height: 252px;

background-color: #ffffff;
margin-bottom: 20px;

}

/carousel_left/

#webtoon_main .webtoon_main_left .webtoon_carousel .webtoon_carousel_left{
float: left;
width: 112px;

padding: 20px 5px 0 15px;

}

#webtoon_main .webtoon_main_left .webtoon_carousel .webtoon_carousel_left h2{
font-size: 20px;
margin-bottom: 13px;
}

#webtoon_main .webtoon_main_left .webtoon_carousel .webtoon_carousel_left span{
color: #005d64;
}

#webtoon_main .webtoon_main_left .webtoon_carousel .webtoon_carousel_left p{
font-size: 12px;
color: #808285;
}

#webtoon_main .webtoon_main_left .webtoon_carousel .webtoon_carousel_left ul{
margin-top: 48px;
}

#webtoon_main .webtoon_main_left .webtoon_carousel .webtoon_carousel_left li{
font-size: 12px;
margin-bottom: 10px;
}

#webtoon_main .webtoon_main_left .webtoon_carousel .webtoon_carousel_left li.on a{
color: #00d564;

}

#webtoon_main .webtoon_main_left .webtoon_carousel .webtoon_carousel_left li:last-child{
margin-bottom: none;
}

/carousel_right/

#webtoon_main .webtoon_main_left .webtoon_carousel .webtoon_carousel_right{
float: right;
width: calc(100% - 112px);
}

#webtoon_main .webtoon_main_left .webtoon_carousel .webtoon_carousel_right .webtoon_carousel_banner{
width: 582px;
height: 195px;
}

#webtoon_main .webtoon_main_left .webtoon_carousel .webtoon_carousel_right .webtoon_carousel_banner img{
width: 100%;
height: 100%;
}

#webtoon_main .webtoon_main_left .webtoon_carousel .webtoon_carousel_right .webtoon_carousel_banner_nav{
position: relative;
}

#webtoon_main .webtoon_main_left .webtoon_carousel .webtoon_carousel_right .webtoon_carousel_banner_nav ul{
display: flex;
flex-wrap: wrap;
align-items: center;

width: 540px;
margin: 0 auto;

}

#webtoon_main .webtoon_main_left .webtoon_carousel .webtoon_carousel_right .webtoon_carousel_banner_nav ul li{
width: 135px;
height: 57px;
border-left: solid 1px #e5e5e5;
border-right: solid 1px #e5e5e5;
}

#webtoon_main .webtoon_main_left .webtoon_carousel .webtoon_carousel_right .webtoon_carousel_banner_nav ul li:first-child{
border-left: none;
}

#webtoon_main .webtoon_main_left .webtoon_carousel .webtoon_carousel_right .webtoon_carousel_banner_nav ul li:last-child{
border-right: none;
}

#webtoon_main .webtoon_main_left .webtoon_carousel .webtoon_carousel_right .webtoon_carousel_banner_nav ul li img{
width: 100%;
height: 100%;
}

#webtoon_main .webtoon_main_left .webtoon_carousel .webtoon_carousel_right .webtoon_carousel_banner_nav .btn{
position: absolute;
width: 19px;
height: 57px;

}

#webtoon_main .webtoon_main_left .webtoon_carousel .webtoon_carousel_right .webtoon_carousel_banner_nav .btn.btn_prev{
left: 0;
top: 0;
background-color: hotpink;
}

#webtoon_main .webtoon_main_left .webtoon_carousel .webtoon_carousel_right .webtoon_carousel_banner_nav .btn.btn_next{
right: 0;
top: 0;
background-color: purple;
}

#webtoon_main .webtoon_main_left .webtoon_banner{
width: 100%;
height: 88px;
background-color: #000000;
}

#webtoon_main .webtoon_main_left .webtoon_content .webtoon_content_header{
position: relative;
border-bottom: solid 1px #e5e5e5;
padding: 26px 0 10px;
}
#webtoon_main .webtoon_main_left .webtoon_content .webtoon_content_header.webtoon_content_header_recommend{
padding-bottom: 0;
}

#webtoon_main .webtoon_main_left .webtoon_content .webtoon_content_header h2{
font-size: 20px;
}

#webtoon_main .webtoon_main_left .webtoon_content .webtoon_content_header h2 span{
color: #00d564;
}

#webtoon_main .webtoon_main_left .webtoon_content .webtoon_content_header nav{
margin-top: 20px;

}

#webtoon_main .webtoon_main_left .webtoon_content .webtoon_content_header ul{
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;

}

#webtoon_main .webtoon_main_left .webtoon_content .webtoon_content_header ul li{
width: auto;
height: 22px;

margin-right: 15px;

}

#webtoon_main .webtoon_main_left .webtoon_content .webtoon_content_header ul li.on{
border-bottom: solid 2px #00d564;
margin-bottom: -1px;
}

#webtoon_main .webtoon_main_left .webtoon_content .webtoon_content_header ul li a{
display: block;
padding-bottom: 6px;

font-size: 13px;
color: #7373737;

}

#webtoon_main .webtoon_main_left .webtoon_content .webtoon_content_body nav{
padding: 12px;
}

#webtoon_main .webtoon_main_left .webtoon_content .webtoon_content_body nav ul{
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
}

#webtoon_main .webtoon_main_left .webtoon_content .webtoon_content_body nav ul li{
margin-right: 8px;
font-size: 12px;

}

#webtoon_main .webtoon_main_left .webtoon_content .webtoon_content_body nav ul li a{
color: grey;
}

#webtoon_main .webtoon_main_left .webtoon_content .webtoon_content_body .webtoon_content_col_3 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;

}

#webtoon_main .webtoon_main_left .webtoon_content .webtoon_content_body .webtoon_content_col_3 .webtoon_content_col_type_1{
width: 210px;
height: 196px;
font-size: 12px;
}

#webtoon_main .webtoon_main_left .webtoon_content_col_3 .webtoon_content_col_type_1 img{
margin-bottom: 10px;
}

#webtoon_main .webtoon_main_left .webtoon_content_col_3 .webtoon_content_col_type_1 .webtoon_content_col_3_info h4{
margin-bottom: 5px;
}

#webtoon_main .webtoon_main_left .webtoon_content .webtoon_content_body .webtoon_content_col_3 .webtoon_content_col_type_1 .webtoon_content_col_3_info span{
color: grey;
}

#webtoon_main .webtoon_main_left .webtoon_content .webtoon_content_body .webtoon_content_col_3 .webtoon_content_col_type_1 .webtoon_content_col_3_info p{
margin-bottom: 5px;
}

#webtoon_main .webtoon_main_left .webtoon_content_col_type_2{
width: 210px;
font-size: 12px;

margin-top: 14px;

}

#webtoon_main .webtoon_main_left .webtoon_content_col_type_2 h3{
font-size: 14px;
color: grey;
margin-bottom: 10px;
}

#webtoon_main .webtoon_main_left .webtoon_content_col_type_2 .webtoon_lists li{
display: flex;
flex-wrap: wrap;
align-items: center;

height: 90px;

margin-bottom: 20px;

}

#webtoon_main .webtoon_main_left .webtoon_content_col_type_2 .webtoon_lists li img{
margin-right: 10px;
}

#webtoon_main .webtoon_main_left .webtoon_content_col_type_2 .webtoon_lists li .webtoon_content_col_info_right .webtoon_content_rating{
margin-top: 15px;
}

#webtoon_main .webtoon_main_left .webtoon_content_col_type_2 .webtoon_lists li .webtoon_content_col_info_right .webtoon_content_rating .star{
display: inline-block;

width: 60px;
height: 14px;
background-color: red;

vertical-align: middle;

}

#webtoon_main .webtoon_main_left .webtoon_content_col_type_2 .webtoon_lists li .webtoon_content_col_info_right .webtoon_content_rating .score{
font-size: 12px;
color: grey;

vertical-align: middle;

}