/*commom*/
body,ul,li,p,div,a,h1,h2,h3,img{margin:0; padding:0;}
.clearfix{*zoom:1;}
.clearfix:after{content: '';display:block; clear:both; height: 0; visibility:visible;}
li, ol{ list-style: none;}
input{outline: none;}
textarea{outline: none;}

/*blog_list*/
.search_box{ width: 67%; height: 3rem; margin: 76px auto; position: relative;}
.search_box .search{ width: 100%; height: 3rem; line-height: 2.875rem;border: 1px solid #DBDBDB!important; border-radius: 0.125rem!important; text-indent: 3.75rem;}
.search_box .search_icon{width: 1.25rem; height: 1.25rem; display: block; position: absolute; left: 1.875rem; top: 0.9375rem; background: url(../images/blog/search.png);}
.blog_list ul{ width: 75%; margin: 0 auto;}
.blog_list ul li{ float: left; width: calc( (100% - 5.625rem)/3); height:auto; margin-right: 2.8125rem; margin-bottom: 4.375rem;}
.blog_list ul li img{ width:100%; height: auto;}
.blog_list ul li h3{ color: #252525; font-size: 1.25rem; font-weight: bold; line-height: 1.875rem; margin: 0.75rem 0;overflow: hidden;
text-overflow: ellipsis;display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;}
.blog_list ul li p{color: #929292; font-size: 0.875rem; font-weight: 400; line-height: 1.5rem; margin-bottom: 0.75rem;overflow: hidden;
text-overflow: ellipsis;display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;}
.blog_list ul li span{color: #929292; font-size: 0.875rem; font-weight: 400; line-height: 1.5rem; margin-bottom: 0.75rem;}
.blue{color: #009FDF;}
.pagination{ width: 19.375rem; margin: 3.125rem auto 5.625rem; height: 1.5rem;}
.pagination span{ float: left; width: 2.125rem; height: 1.5rem; text-align: center; line-height: 1.5rem; cursor: pointer;}
.active{background: #252525; color: #ffffff;}
.pages{ float: left;}
.pages span{ margin-right: 0.3125rem;}
.pages span:hover{background: #252525; color: #ffffff;}
.pagination .prev{ width: 0.5rem; height: 0.75rem; display: block; background: url(../images/blog/prev.png); margin-top: 0.375rem; margin-right:0.625rem;}
.pagination .next{ width: 0.5rem; height: 0.75rem; display: block; background: url(../images/blog/next.png); margin-top: 0.375rem; margin-left:0.625rem;}

/*blog_detail*/
.content{ width: 75%; margin: 2.5rem auto 8.75rem;}
.blog_detail{ width: calc( 100% - 1.5rem - 25rem ); height: auto; background: #ffffff;border: 1px solid #E8E8E8; float: left; margin-right: 1.25rem;}
.blog_title{ margin: 2.5rem; border-bottom: 1px solid #E8E8E8; padding-bottom: 2.5rem;}
.blog_title h2{font-size: 1.5rem;font-weight: bold;line-height: 2.125rem;color: #252525; margin-bottom: 1.0625rem;}
.blog_title p{color: #929292; font-size: 0.875rem; line-height: 1.5rem; font-weight: 400;}
.blog_content{margin: 2.5rem;}
.blog_content p{ font-size: 0.875rem; font-weight: 400; line-height: 1.75rem;color: #252525; margin-bottom: 0.625rem;}
.blog_content img{ width: 100%; height: auto; margin-bottom: 0.625rem;}
.share_box{ width: 25rem; position: fixed; top: 2.5rem; right: calc( (100% - 75%)/2 ); z-index:10;}
.blog_share{ width: 100%; height: auto;background: #ffffff;border: 1px solid #E8E8E8; float: left;}
.blog_share h3{ font-size: 1rem; line-height:2.125rem; color: #959595; font-weight: bold; padding: 1.25rem 1.875rem; border-bottom: 1px solid #E8E8E8;}
.share_list{ padding: 1.875rem;}
.share_list li{ float: left; width: 2.75rem; height: 2.75rem; margin-right: 3.125rem;}
.share_list li:last-child{ float: left; width: 2.75rem; height: 2.75rem; margin-right: 0;}
.share_list li img{ width: 2.75rem; height: 2.75rem; margin: 0 auto; display: block;}
.repply{width:100%; height: auto;background: #ffffff;border: 1px solid #E8E8E8; float: left; margin-top: 1.25rem;}
.repply h3{font-size: 1rem; line-height:2.125rem; color: #959595; font-weight: bold; padding: 1.25rem 1.875rem; border-bottom: 1px solid #E8E8E8;}
.repply form{ width: auto; height: auto; padding: 1.25rem;}
.repply span{ font-size: 0.875rem; font-weight: bold;}
.repply input{ width: 98%; height: 2rem !important;border: 1px solid #DBDBDB !important; margin-top: 0.625rem;margin-bottom: 0.625rem;}
.comment_btn{ margin: 0 1.25rem 1.25rem; width: auto; height: 2.75rem; line-height: 2.75rem; background: #009FDF; color: #ffffff; text-align: center; cursor: pointer;}
.comment{ background: #ffffff; width: 100%; margin-top: 2.5rem;  padding-bottom: 1.875rem;border: 1px solid #E8E8E8;}
.comment h3{font-size: 1rem; line-height:2.125rem; color: #959595; font-weight: bold; padding: 1.25rem 2.5rem; border-bottom: 1px solid #E8E8E8;}
.comment_form{ padding: 1.875rem 2.5rem;}
.comment_form div{ font-size: 0.875rem; font-weight: bold; color: #252525; float: left; width: calc( (100% - 2.5rem)/2 );}
.comment_form>div input{ width: 100%; height: 2rem;border: 1px solid #DBDBDB !important; margin-top: 0.625rem;}
.comment_area{ width: 100% !important;}
.comment_area textarea{ width: 100%; margin-top: 0.625rem;}
.comment_list{ background: #ffffff; width: 100%; margin-top: 2.5rem;  padding-bottom: 1.875rem;border: 1px solid #E8E8E8;}
.comment_list h3{font-size: 1rem; line-height:2.125rem; color: #959595; font-weight: bold; padding: 1.25rem 2.5rem; border-bottom: 1px solid #E8E8E8;}
.comment_list ul{ padding: 1.875rem 2.5rem;}
.comment_list ul li{ margin-bottom: 3.125rem;}
.comment_list ul li:last-child{ margin-bottom: 0!important;}
.comment_list ul li>div{ float: left; display: block; font-size: 1rem;}
.comment_list ul li>div:first-child{ width: 3.125rem; height: auto; margin-right:1.25rem;}
.comment_list ul li>div:last-child{ width: calc( 100% - 3.125rem - 1.25rem ); height: auto;}


/*Become a Distributor*/
.apply_content{ width: 43.75rem; height: auto; margin: 0 auto;} 
.form_title{ width: 43.75rem; height:1.875rem; line-height: 2rem; text-align: center; padding: 3.125rem 0; font-size: 1.5rem; font-weight: bold; color: #000000;}
.apply_form p{ color: #252525; font-size: 0.875rem; font-weight: bold;}
.apply_form input{ width: calc( 100% - 1.25rem ); height: 2.75rem; line-height: 2.75rem; padding: 0 0.625rem; margin-top: 0.625rem; border: 1px solid #DBDBDB;}
.apply_form .name>div{ float: left; width: calc( (100% - 1.25rem)/2 );}
.check_boxs, .radio_box{ margin-top: 0.9375rem;}
.check_boxs ul li, .radio_box ul li{ color: #252525; font-size: 0.875rem; font-weight: 400; margin-bottom: 0.625rem; line-height: 1.25rem;}
.check_boxs ul li i{ display: block;z-index: 9; float: left; width: 1rem; height: 1rem; border: 1px solid #cccccc; border-radius: 0.125rem; margin-right: 0.625rem;}
.checked i::before{ background: url(../images/blog/check.png); width: 1rem; height: 1rem; display: block; content: '';}
.radio_box ul li i{ display: block; float: left; width: 1rem; height: 1rem; border: 1px solid #cccccc; border-radius: 50%; margin-right: 0.625rem;}
.submit_btn{ margin: 0 auto; width: 15rem; height: 2.5rem; line-height: 2.5rem; background: #009FDF; color: #ffffff; text-align: center; cursor: pointer; margin-bottom: 5.625rem;}
.radio i::before{ background: url(../images/blog/radio.png); width: 1rem; height: 1rem; display: block; content: '';}
.error{ border: 1px solid #FF4155!important;}
.error_text{color: #FF4155; font-size: 0.875rem;}
.hide{ display: none;}
.check_boxs label{ display: block; line-height: 1.25rem;}
.check_boxs input{ width: 1rem; height: 1rem; border: 1px solid #cccccc; border-radius: 0.125rem; margin-right: 0.625rem; margin: 0 0.625rem 0 0;}
.radio_box label{ display: block; line-height: 1.25rem;}
.radio_box input{ width: 1rem; height: 1rem; border: 1px solid #cccccc; border-radius: 0.125rem; margin-right: 0.625rem; margin: 0 0.625rem 0 0;}

@media screen and (min-width:1440px){
	.blog_list ul li:nth-of-type(3n){ margin-right: 0;}
}
@media screen and (min-width:1200px) and (max-width:1440px){
	.blog_detail{ width: 60%;}
	.blog_list ul li:nth-of-type(3n){ margin-right: 0;}
	.share_list li{ width: calc( (100% - 1.875rem)/4 ); height: auto; margin-right: 0.5rem;}
	.share_list li img{ width: 2.5rem; height: 2.5rem;}
	.share_box{ width: 28%; position: fixed; top: 2.5rem; right: calc( (100% - 75%)/2 );}
}
@media screen and (min-width:768px) and (max-width:1200px){
	.content{ width: 91%;}
	.blog_detail{ width: 60%;}
	.blog_list ul{ width: 75%; margin: 0 auto;}
	.blog_list ul li{ float: left; width: calc( ( 100% - 2.8125rem)/2 ); height:auto; margin-right: 2.8125rem;}
	.blog_list ul li:nth-of-type(even){ margin-right: 0;}
	.blog_list ul li img{ width: 100%; height: auto;}
	.share_box{ width: 34%; position: fixed; top: 2.5rem; right: calc( (100% - 60% - 28% - 1.25rem)/2 );}
	.blog_share{ width: 100%;}
	.share_list li{ width: calc( (100% - 1.875rem)/4 ); height: auto; margin-right: 0.5rem;}
	.share_list li img{ width: 2.5rem; height: 2.5rem;}
	.repply{width: 100%;}
}