/*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; } /*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; } /**Blog***/ .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; } .share_list { padding: 1.875rem; } .share_box { width: 25rem; position: fixed; top: 130px; right: calc((100% - 75%) / 2); z-index: 10; } .blog_title { margin: 2.5rem; border-bottom: 1px solid #e8e8e8; padding-bottom: 2.5rem; } .blog_content { margin: 2.5rem; } .blog_content img { max-width: 100%; } .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 p { font-size: 0.875rem; font-weight: 400; line-height: 1.75rem; color: #252525; margin-bottom: 0.625rem; } .blog_content div { word-break: break-word; word-break: break-all; } .blog_content span { word-break: break-word; word-break: break-all; } .blog_share { width: 100%; height: auto; background: #ffffff; border: 1px solid #e8e8e8; float: left; } .repply { width: 100%; height: auto; background: #ffffff; border: 1px solid #e8e8e8; float: left; margin-top: 1.25rem; } .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 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 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: 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; } .submiss-content { margin: auto; width: 100%; text-align: center; }