naver blog | style.css

.blog_container {
	width: 1080px;
	margin: 0 auto;
}

#blog_header .blog_header_top{
	height: 60px;
	background-color: #00c73c;
	border-bottom: solid 1px #51b036;
}

#blog_header .blog_header_top .blog_container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

#blog_header .blog_header_top .blog_header_left {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}

#blog_header .blog_header_top .blog_header_left h2 {
	font-size: 20px;
	margin-right: 20px;
}

#blog_header .blog_header_top .blog_header_left h2 a {
	color: #ffffff;
	font-weight: 700;
}


#blog_header .blog_header_top .blog_header_input_wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

#blog_header .blog_header_top .blog_header_input_wrap .blog_search_wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	

	width: 325px;
    height: 40px;
    background-color: #ffffff;

    margin-right: 5px;
}

#blog_header .blog_header_top .blog_header_input_wrap .blog_search_wrap input {
	width: calc(100% - 40px);
	height: 40px;
	background-color: #ffffff;
	
	border: solid 1px #4da733;

	padding: 0 15px;

}

#blog_header .blog_header_top .blog_header_input_wrap .blog_search_wrap input:focus{
	outline: none;
}
 
#blog_header .blog_header_top .blog_header_input_wrap .blog_search_wrap .btn_search {
	width: 40px;
	height: 40px;
	background-color: #29a93a;
	border: solid 1px #239e36;
}

#blog_header .blog_header_top .blog_header_input_wrap .btn_total_serach {
	width: auto;
	height: 40px;
	background-color: #29a93a;
	border: solid 1px #239e36;

	padding: 0 5px;

	line-height: 40px;

	color: #ffffff;
}

#blog_header .blog_header_top .blog_header_right {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;

}

#blog_header .blog_header_top .blog_header_right .btn_login {
	display: inline-block;
	border-left: solid 1px #239e36;

	font-size: 12px;

	padding: 2px 5px;

	color: #ffffff;

	margin-right: 20px;
}

#blog_header .blog_header_top .blog_header_right .btn_menu {
	width: 60px;
	height: 60px;
	border-left: solid 1px #239e36;
	border-right: solid 1px #239e36;

	background-color: #00c73c;

	cursor: pointer;

}

#blog_header .blog_header_nav{
	height: 40px;
	border-bottom: solid 1px #e5e5e5;

	background-color: #ffffff;
}

#blog_header .blog_header_nav .blog_container{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

#blog_header .blog_header_nav .nav_left{
}

#blog_header .blog_header_nav .nav_left ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

#blog_header .blog_header_nav .nav_left ul li {
	height: 40px;
	margin-right: 16px;
	border-bottom: solid 2px transparent;
	/*border-bottom: solid 2px #00ab33;*/
}

#blog_header .blog_header_nav .nav_left ul li.on{
	border-bottom: solid 2px #00ab33;
}

#blog_header .blog_header_nav .nav_left li a {
	display: block;

	width: 100%;
	height: 100%;
	line-height: 40px;

	font-size: 13px;
}

#blog_header .blog_header_nav .nav_right ul{
	display: flex;
	flex-wrap: wrap;
	align-items: center;

}


#blog_header .blog_header_nav .nav_right li {
	width: auto;
	height: 26px;

	margin-left: 8px;
}

#blog_header .blog_header_nav .nav_right li.on a{
	background-color: #00c73c;
	border: solid 1px rgba(0, 0, 0, 0.07);
	color: #ffffff;
}

#blog_header .blog_header_nav .nav_right li a{
	display: block;
	width: 100%;
	height: 100%;
	background-color: #ffffff;
	border: 1px solid #cecece;

	line-height: 26px;
	padding: 0 10px;

	font-size: 13px;
}


.blog_main #hot_topic{
	height: 305px;
	background-color: #f5f5f6;
	padding: 20px 0 15px;
}

.blog_main #hot_topic .blog_container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.blog_main #hot_topic .hot_topic_left {
	position: relative;
	width: 770px;
}

.blog_main #hot_topic .hot_topic_left .topic_heading {
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	margin-bottom: 11px;
}

.blog_main #hot_topic .hot_topic_left .topic_heading h3 {
	font-size: 16px;
	font-weight: 600;
	color: #e55e5e;
}

.blog_main #hot_topic .hot_topic_left .topic_heading i {
	display: block;

	width: 8px;
	height: 13px;
	margin: 0 8px;

	background-color: grey;

	margin: 0 8px;
}

.blog_main #hot_topic .hot_topic_left .topic_heading a {
	font-size: 16px;
}

.blog_main #hot_topic .hot_topic_left .topic_lists {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.blog_main #hot_topic .hot_topic_left .topic_lists li {
	position: relative;
	width: 252px;
	height: 240px;
}

.blog_main #hot_topic .hot_topic_left .topic_lists img {
	position: absolute;
	width: 100%;
	height: 100%;
}

.blog_main #hot_topic .hot_topic_left .topic_lists p {
	position: absolute;
	width: 100%;
	background-color: rgba(55, 66, 87, 0.9);

	padding: 20px 0;
	bottom: 0;

	color: #ffffff;

	text-align: center;
}


.blog_main #hot_topic .pagination_wrap{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;

	position: absolute;
	top: 0;
	right: 0;
}

.blog_main #hot_topic .pagination_wrap a {
	display: block;
	width: 20px;
	height: 20px;
	margin-left: 4px;
	border: solid 1px rgba(221, 221, 223, 0.9);

	background-color: #f6f6f7;
	color: #888;

	font-size: 12px;
	text-align: center;
	line-height: 20px;
}



.blog_main #hot_topic .hot_topic_right {
	width: 280px;

	position: relative;

	padding-top: 30px;
}


.blog_main #hot_topic .hot_topic_right .topic_banner{
	width: 280px;
	height: 240px;
	background-color: black;
}


.blog_main #blog_main_content {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.blog_main #blog_main_content .blog_main_left {
	width: 770px;
	}

.blog_main #blog_main_content .blog_main_left #blog_main_notification{
	background-color: #ffffff;
	text-align: center;
	padding: 54px 0;
}

.blog_main #blog_main_content .blog_main_left #blog_main_notification p {
	font-size: 16px;

	line-height: 30px;
}

.blog_main #blog_main_content .blog_main_left #blog_article .blog_article_nav {
	background-color: #ffffff;
	border-top: solid 1px #999999;
	border-bottom: solid 1px #999999;

	padding: 10px 0;

	font-size: 14px;
}

.blog_main #blog_main_content .blog_main_left #blog_article .blog_article_nav ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.blog_main #blog_main_content .blog_main_left #blog_article .blog_article_nav li {
	margin-right: 22px;
}

.blog_main #blog_main_content .blog_main_left #blog_article .blog_article_nav a{

}

.blog_main #blog_main_content .blog_main_left .blog_article_lists {

}

.blog_main #blog_main_content .blog_article_lists li {
	width: 100%;
	border-bottom: solid 1px #eeeeef;

	padding: 25px 0 23px;
}

.blog_main #blog_main_content .blog_article_lists li a {
	display: block;

	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	width: 100%;
	height: 100%;
}

.blog_main #blog_main_content .blog_article_lists .blog_article_info {
	width: 573px;
}

.blog_main #blog_main_content .blog_article_lists .blog_article_profile_wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}

.blog_main #blog_main_content .blog_article_lists .blog_article_profile_wrap img {
	width: 32px;
	height: 32px;
	border-radius: 50%;

	margin-right: 10px;
}

.blog_main #blog_main_content .blog_article_lists .blog_article_profile_info

.blog_main #blog_main_content .blog_article_lists .blog_article_profile_info h3 {
	font-size: 14px;
	margin-bottom: 3px;
}

.blog_main #blog_main_content .blog_article_lists .blog_article_profile_info p {
	font-size: 11px;
	color: #959595;
}

.blog_main #blog_main_content .blog_article_lists h2 {
	
	font-size: 17px;

	margin-top: 16px;
}

.blog_main #blog_main_content .blog_article_lists .paragraph {
	font-size: 13px;
	color: #666666;
	margin-top: 10px;
}

.blog_main #blog_main_content .blog_article_lists .comments{
	font-size: 12px;
	color: #959595;

	margin-top: 14px;
}

.blog_main #blog_main_content .blog_article_lists .comments span {
	margin-right: 9px;
}

.blog_main #blog_main_content .blog_article_lists .comments span em {
	font-style: normal;
}