.blog_detail_title { font-weight: 600; } .blog-pr-0 { padding-right: 0px; } .blog-divider { width: 100px; height: 5px; background-color: #1e306e; margin-bottom: 50px; } .related-divider { width: 100px; height: 5px; background-color: #1e306e; margin-bottom: 50px; } .verticle-divider { width: 1px; height: 20px; background-color: black; margin-right: 20px; } .date-cat { display: flex; flex-wrap: nowrap; flex-direction: row; padding: 0px; color: #707070; position: relative; } .date-cat li { margin-right: 20px; } ul .date-cat li.before { padding-left: 15px; } .date { list-style: none; } .date-cat .cat { color: #1e306e !important; font-weight: 500; } .blog-image img { width: 100%; height: auto; object-fit: cover; } .blog-sidebar { position: relative; display: flex; justify-content: center; align-items: start; } .blog-sidebar-social-button { position: relative; display: flex; flex-direction: column; justify-content: center; } .blog-social-button { margin-bottom: 12px; width: 40px; height: 40px; background: white; border-radius: 50%; } .blog-social-button svg { transition: all 0.3s; width: 100%; height: 100%; } .blog-social-button svg:hover { transform: scale(1.2); } .share_box { display: flex; justify-content: space-between; align-items: center; } .share_box ul { padding: 0px; display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; align-items: center; justify-content: flex-start; margin-bottom: 0px; } .share_box ul li { margin-right: 15px; } .share-icon-color { color: #1e306e !important; } #relate_post { margin-top: 20px; padding: 40px 0; border-top: 1px solid #ccc; } #relate_post h2 { margin-bottom: 20px; font-weight: bold; font-size: 40px; } #relate_post .home-latest-blog { line-height: 1.25; } #relate_post .wrap_img { overflow: hidden; display: block; margin-bottom: 20px; width: 100%; object-fit: cover; } #relate_post .blogs_content { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; } #relate_post img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; height: 200px; object-fit: cover; } #relate_post img:hover { -webkit-transform: scale(1.3); transform: scale(1.3); } #relate_post h3 a { color: #1e306e; position: relative; display: block; font-size: 18px; font-weight: 700; } #relate_post h3 a:before { content: ""; display: block; position: absolute; bottom: 0px; height: 1px; width: 0px; background: #1e306e; transition: all 0.5s; } #relate_post h3 a:hover:before { width: 100%; } #relate_product { margin-top: 20px; padding: 40px 0; } #relate_product h2 { margin-bottom: 20px; font-weight: bold; font-size: 40px; } #relate_post .home-latest-blog { font-size: 3rem; font-weight: 500; } #relate_product .wrap_img { overflow: hidden; display: block; margin-bottom: 20px; width: 100%; object-fit: cover; } #relate_product .blogs_content { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; } #relate_product img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; height: 100%; object-fit: cover; } #relate_product img:hover { -webkit-transform: scale(1.3); transform: scale(1.3); } #relate_product h3 a { color: #1e306e; position: relative; display: block; font-size: 18px; font-weight: 700; text-align: center; } #relate_product h3 a:hover { color: #e997b9; } .smartphone { display: none; } .hide-sp { display: block; } .blog-content p span{ font-size: 1.125rem !important; font-family: inherit !important; } .view-count { margin-right: 0 !important; } .download-btn { display: flex; width: 120px; height: 50px; border-radius: 8px; background: #e997b9; color: #fff; justify-content: center; align-items: center; transition: all .4s; } .download-btn:hover { color: #fff; background: #e997b9c9; } #latest_section { background-color: #ebf6fb; } #latest_section #relate_post { border-top: 0; } #latest_section #relate_post .wrap_img { margin-bottom: 0; } #latest_section #relate_post img { border-top-left-radius: 12px; border-top-right-radius: 12px; } .latest-blog-content { background: #fff; min-height: 125px; padding: 25px 16px; } @media only screen and (max-width: 1024px) { .blog-sidebar { position: relative; display: flex; justify-content: center; align-items: start; } #relate_post .home-latest-blog { font-size: 2.5rem; } } @media only screen and (max-width: 992px) { .date-cat { flex-wrap: wrap; } .hide-tablet { display: none; } } @media only screen and (max-width: 768px) { .blog-sidebar-social-button { position: relative; left: auto; display: flex; flex-direction: column; justify-content: center; } #relate_post .home-latest-blog { font-size: 1.875rem; } #latest_section { padding: 20px; } #latest_section #relate_post { padding-bottom: 0; } .blog-social-button { margin-bottom: 12px; width: 40px; height: 40px; background: white; border-radius: 50%; } #relate_post img { height: 180px !important; } .smartphone { display: block !important; } .hide-sp { display: none !important; } .hide-tablet { display: block; } } @media only screen and (max-width: 480px) { #relate_post img { height: 160px !important; } #relate_post .home-latest-blog { font-size: 1.875rem; } .blog_detail_title, .related_title_sp { font-size: 1.5rem !important; font-weight: 600; } .blog-divider { width: 80px; height: 5px; background-color: #1e306e; margin-bottom: 50px; } .date-cat { padding: 5px 0; } .related-divider { width: 80px; height: 5px; background-color: #1e306e; margin-bottom: 30px; } .blog-sidebar { display: none !important; } .blog-pr-0 { padding: 0px !important; } .blog-sidebar-social-button { position: relative; display: flex; flex-direction: column; justify-content: center; } .blog-social-button { margin-bottom: 12px; width: 30px !important; height: 30px !important; background: white; border-radius: 50%; } .blog-social-button img { vertical-align: unset; } }