.blog-guide-page .blog-list {
margin: 50px 0;
}
.blog-guide-page .blog-list li {
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
margin: 50px auto;
}
.blog-guide-page .blog-list li .featured-img img {
margin-right: 20px;
width: 100%;
max-width: 480px;
flex-shrink: 0;
border-radius: 30px;
}
.blog-guide-page .post-content {
width: 60%;
padding: 20px;
}
.blog-guide-page .post-content .post-title {
font-weight: 700;
}
.blog-guide-page .post-content .post-info {
padding: 20px 0;
font-weight: 400;
font-size: 12px;
color: var(--text-sub-500);
}
.blog-guide-page .post-content .detail-content p {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
color: var(--text-sub-500);
font-size: 18px;
margin-bottom: 20px;
}
.blog-guide-page .post-content .detail-content a{
color: var(--text-sub-500);
}
.blog-guide-page .post-content .detail-content .more-link {
display: none;
}
table {
font-size: 18px;
}
.tablepress>:where(tbody)>tr>* {
border: 1px solid var(--text-sub-500) !important;
}
.tablepress-table-name {
font-size: 18px;
font-weight: 700;
color: var(--txt-primary-color);
margin-bottom: 10px;
}
.blog-guide-content {
margin: 80px auto;
width: 62%;
font-size: 18px;
color: var(--text-sub-500);
}
.blog-guide-content img {
width: auto;
height: auto;
}
.blog-guide-content p {
margin-bottom: 20px;
}
.blog-guide-content a {
color: var(--txt-sub-500);
text-decoration: underline;
}
.blog-guide-content ul,
.blog-guide-content li {
list-style: disc;
margin-bottom: 10px;
margin-left: 20px;
}
.blog-guide-content .download-box {
display: flex;
align-items: center;
border: 1px solid var(--text-sub-500);
border-radius: 20px;
padding: 20px;
margin-bottom: 20px;
text-decoration: none;
}
.blog-guide-content .download-box:hover {
border: 1px solid #09add3;
}
.blog-guide-content .download-box .file-info {
flex: 1;
margin-left: 10px;
}
.blog-guide-content .post-tags {
display: flex;
flex-wrap: wrap;
margin: 0;
}
.blog-guide-content .post-tags li {
list-style: none;
border: 1px solid var(--menu-color);
padding: 10px;
margin-left: 0;
margin-right: 10px;
border-radius: 30px;
}
.blog-guide-content .post-tags li:hover {
border: 1px solid #09add3;
}
.blog-guide-content .post-tags a {
text-decoration: none;
}
.blog-guide-content h6 {
margin-bottom: 20px;
}
.guide-section {
display: flex;
gap: 40px;
}
.guide-section .left-col {
width: 23%;
position: sticky;
top: 120px;
margin: 80px 0;
}
.guide-section .left-col .content-anchor {
background-color: var(--bg-weak-color);
border: 1px solid var(--stroke-sub-300);
padding: 24px;
border-radius: 30px;
height: fit-content;
}
.guide-section .left-col .schedule-col p {
margin: 30px 0;
font-size: 24px;
}
.guide-section .blog-guide-content {
width: 70%;
}
.toc-box h6 {
font-size: 24px;
padding-bottom: 20px;
}
.toc-list li {
margin-bottom: 10px;
display: flex;
align-items: start;
position: relative;
}
.toc-list li::before {
position: absolute;
content: "";
background: url(//www.scm-legal.com/wp-content/themes/scm/assets/img/ico_arr.svg) no-repeat center / cover;
width: 12px;
height: 12px;
top: 25%;
transform: translateY(-50%);
left: 0;
filter: invert(0.8);
}
.toc-list li a {
font-size: 18px;
color: var(--text-sub-500);
margin-bottom: 10px;
margin-left: 20px;
} @media only screen and (min-width: 768px) and (max-width: 1280px) { .blog-guide-page .blog-list {
margin: 3.906vw 0;
}
.blog-guide-page .blog-list li {
margin: 3.906vw auto;
}
.blog-guide-page .blog-list li .featured-img img {
margin-right: 1.563vw;
max-width: 37.5vw;
border-radius: 2.344vw;
}
.blog-guide-page .post-content {
padding: 1.563vw;
}
.blog-guide-page .post-content .post-info {
padding: 1.563vw 0;
font-size: 0.938vw;
}
.blog-guide-page .post-content .detail-content p {
font-size: 1.406vw;
}
.blog-guide-content {
margin: 6.25vw auto;
font-size: 1.406vw;
}
.blog-guide-content p {
margin-bottom: 1.563vw;
}
.blog-guide-content ul,
.blog-guide-content li {
margin-bottom: 0.781vw;
margin-left: 1.563vw;
}
.blog-guide-content h6 {
margin-bottom: 1.563vw;
}
.guide-section {
gap: 3.125vw;
}
.guide-section .left-col {
width: 23%;
top: 9.375vw;
margin: 6.25vw 0;
}
.guide-section .left-col .content-anchor {
padding: 1.875vw;
border-radius: 2.344vw;
}
.guide-section .left-col .schedule-col p {
margin: 2.344vw 0;
font-size: 1.875vw;
}
.toc-box h6 {
font-size: 1.875vw;
padding-bottom: 1.563vw;
}
.toc-list li {
margin-bottom: 0.781vw;
}
.toc-list li::before {
width: 0.938vw;
height: 0.938vw;
}
.toc-list li a {
font-size: 1.406vw;
margin-bottom: 0.781vw;
margin-left: 1.563vw;
}
} @media all and (max-width: 767.9px) { .blog-guide-page .blog-list {
margin: 13.333vw 0 0 0;
}
.blog-guide-page .blog-list li {
flex-direction: column;
margin: 13.333vw auto;
}
.blog-guide-page .blog-list li .featured-img img {
margin-right: 0;
max-width: 128vw;
border-radius: 8vw;
}
.blog-guide-page .post-content {
width: 100%;
padding: 5.333vw;
}
.blog-guide-page .post-content .post-info {
padding: 5.333vw 0;
font-size: 3.2vw;
}
.blog-guide-page .post-content .detail-content p {
font-size: 4.8vw;
}
.blog-guide-content {
margin: 10.667vw auto;
font-size: 3.733vw;
width: 90%;
}
.blog-guide-content p {
margin-bottom: 5.333vw;
}
.blog-guide-content ul,
.blog-guide-content li {
margin-bottom: 2.667vw;
margin-left: 5.333vw;
}
.blog-guide-content h6 {
font-size: 6.933vw;
margin-bottom: 5.333vw;
}
.guide-section {
flex-direction: column;
gap: 10.667vw;
}
.guide-section .left-col {
width: 100%;
position: unset;
top: 32vw;
margin: 21.333vw 0 0;
}
.guide-section .left-col .content-anchor {
padding: 6.4vw;
border-radius: 8vw;
}
.guide-section .left-col .schedule-col p {
margin: 8vw 0;
font-size: 6.4vw;
}
.guide-section .blog-guide-content {
width: 90%;
}
.toc-box h6 {
font-size: 6.4vw;
padding-bottom: 5.333vw;
}
.toc-list li {
margin-bottom: 2.667vw;
}
.toc-list li::before {
width: 3.2vw;
height: 3.2vw;
}
.toc-list li a {
font-size: 4.8vw;
margin-bottom: 2.667vw;
margin-left: 5.333vw;
}
}