/*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: 90%; height: 2rem; margin: 1rem 1.5rem; display: inline-block; clear: both; } .search-button-blog { border: none; font-size: 0.9rem; color: #fff; cursor: pointer; background: #0060ff; height: 2.5rem; border-radius: 20px; padding: 0 1rem; float: left; margin-left: 0.5rem; } .search_box .search { width: 65%; height: 2.5rem; line-height: 2.875rem; border: 1px solid #dbdbdb !important; border-radius: 1.5rem !important; text-indent: 0.5rem; float: left; -webkit-border-radius: 1.5rem !important; -moz-border-radius: 1.5rem !important; -ms-border-radius: 1.5rem !important; -o-border-radius: 1.5rem !important; } .search_box .search_icon { width: 1rem; height: 1rem; display: block; position: absolute; right: 1rem; top: 0.7rem; background: url(../images/blog/search.png); background-size: cover; cursor: pointer; } .blog_list ul { width: 90%; margin: 0 auto; } .blog_list ul li { float: left; width: calc((100% - 0.5rem) / 2); height: auto; margin-right: 0.5rem; margin-bottom: 1rem; } .blog_list ul li:nth-of-type(2n) { margin-right: 0; } .blog_list ul li img { width: 100%; height: auto; } .blog_list ul li h3 { color: #252525; font-size: 1rem; font-weight: bold; line-height: 1.25rem; margin: 0.5rem 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .blog_list ul li p { color: #929292; font-size: 0.875rem; font-weight: 400; line-height: 1rem; margin-bottom: 0.5rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .blog_list ul li span { color: #929292; font-size: 0.5rem; font-weight: 400; line-height: 1rem; margin-bottom: 0.5rem; } .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: 90%; margin: 2.5rem auto; } .blog_detail { height: auto; background: #ffffff; border: 1px solid #e8e8e8; } .blog_title { margin: 1rem; border-bottom: 1px solid #e8e8e8; padding-bottom: 1rem; } .blog_title h2 { font-size: 1rem; font-weight: bold; line-height: 1.25rem; color: #252525; margin-bottom: 0.5rem; } .blog_title p { color: #929292; font-size: 0.875rem; font-weight: 400; } .blog_content { margin: 1rem; } .blog_content img { max-width: 100%; } .blog_content p { font-size: 0.875rem; font-weight: 400; line-height: 1rem; color: #252525; margin-bottom: 0.625rem; overflow: hidden; max-width: 100%; } .blog_content p span { font-size: 0.875rem; line-height: 1rem; } .blog_content p img { width: 100%; height: auto; margin-bottom: 0.5rem; } .blog_content p video { width: 100%; height: auto; margin-bottom: 0.5rem; } .share_box { display: none; 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 auto; height: 1.5rem; width: 12rem; line-height: 1.5rem; background: #009fdf; color: #ffffff; text-align: center; cursor: pointer; display: block; font-size: 1rem; } .comment { background: #ffffff; width: 100%; margin-top: 1rem; padding-bottom: 1.875rem; border: 1px solid #e8e8e8; } .comment h3 { font-size: 1rem; line-height: 1rem; color: #959595; font-weight: bold; padding: 1rem 1.25rem; border-bottom: 1px solid #e8e8e8; } .comment_form { padding: 1rem 1.25rem; } .comment_form div { font-size: 0.625rem; font-weight: bold; color: #252525; float: left; width: 100%; } .comment_form > div input { width: 100%; height: 1.25rem; border: 1px solid #dbdbdb !important; margin-top: 0.5rem; } .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 { height: auto; margin: 0 auto; } .form_title { height: 1.875rem; line-height: 2rem; text-align: center; padding: 0.5rem 0; font-size: 1rem; font-weight: bold; color: #000000; } .apply_form p { color: #252525; font-size: 0.475rem; font-weight: bold; } .apply_form input { width: calc(100% - 1.25rem); height: 1.5rem; line-height: 1.5rem; 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.475rem; 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: 00 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: 100%; } .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%; } } .detail_form input { height: 2.75rem; line-height: 2.75rem; padding: 0 0.625rem; margin-top: 0.625rem; border: 1px solid #dbdbdb; display: inline-block; } .detail_form .input01 { height: 2.75rem; line-height: 2.75rem; padding: 0 0.625rem; margin-top: 0.625rem; border: 1px solid #dbdbdb; display: inline-block; width: 20%; } .detail_form select { height: 2.75rem; line-height: 2.75rem; padding: 0 0.625rem; margin-top: 0.625rem; border: 1px solid #dbdbdb; display: inline-block; } .detail_form textarea { padding: 0.225rem 0.5rem; margin-top: 0.625rem; border: 1px solid #dbdbdb; display: inline-block; } .apply_form textarea { padding: 0.225rem; margin-top: 0.625rem; border: 1px solid #dbdbdb; display: inline-block; } .detail-w { width: 20%; } .detail-w02 { width: 45%; } .detail-w01 { width: 90%; } .detail_form .name > div { float: left; width: calc((100% - 1.25rem) / 2); } /*odm*/ .email-odm-w { background: #fff; width: 62.5%; margin: auto; clear: both; padding: 0.05rem 0; } /*新品*/ .indexbox-list { width: 100%; height: auto; padding-bottom: 5%; padding-top: 4rem; background: #f1f1f1; } .daily { margin: 0.5rem 0; overflow: hidden; } .dailytext { } .datit { margin-bottom: 1rem; } .datit .da1 { font-size: 0.75rem; color: #333333; padding-left: 2%; text-align: left; } .daily .darh { width: 100% !important; } .daily .darh li { width: 47%; margin-right: 1rem; float: left; margin-bottom: 1rem; background-color: #fff; text-align: center; padding-top: 2rem; padding-bottom: 1rem; padding-left: 0.2rem; } .daily .darh li:nth-child(2n) { margin-right: 0; } @media (max-width: 320px) { .daily .darh li { width: 96%; margin: auto; margin-bottom: 2%; } } .daimg img { max-width: 100%; } .daily .darh li .datext .dat1 { font-size: 0.54rem; color: #333; margin-top: 1rem; overflow: hidden; min-height: 2rem; } .daily .darh li .datext .dat2 { font-size: 0.48rem; color: #666666; margin-top: 0.35rem; } .daily .darh li .newcp { width: 72px; height: 30px; background: #df2c39; font-size: 12px; color: #fff; text-align: center; line-height: 30px; position: absolute; top: 0px; left: 50%; transform: translate(-50%, 0%); display: none; /*隐藏新品*/ }