.channel_content { padding: 40px 0; background: #f8fafc; min-height: 80vh; } .social-shere.sticky-widget { margin: 0 auto 30px; padding: 15px 25px; max-width: var(--max-width); } .common_box { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: var(--max-width); margin: 0 auto; padding: 0 20px; } .common_box > div { background: white; border-radius: 12px; padding: 24px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; border: 1px solid #e2e8f0; } .common_box > div:hover { transform: translateY(-8px); box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1); } .common_box > div > a { color: #1e293b; text-decoration: none; font-size: 16px; font-weight: 500; display: block; padding-left: 12px; position: relative; transition: color 0.3s ease; } .common_box > div > a:hover { color: var(--second-color); } .common_box > div > a::after { content: "→"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); opacity: 0; transition: all 0.3s ease; font-size: 14px; } .common_box > div:hover > a::after { opacity: 1; right: -10px; } @media (max-width: 768px) { .channel_content { padding: 30px 0; } .common_box { grid-template-columns: 1fr; padding: 0 15px; gap: 16px; } .common_box > div { padding: 20px; } } h1 { font-size: var(-title-font-size); line-height: 1.2; margin-top: 40px; font-weight: bold; } h2 { margin-top: 30px !important; font-weight: bold; font-size: var(--subtitle-font-size); } .knowledge_container { text-align: left; color: #000; } .knowledge_container { display: grid; grid-template-columns: 1fr; gap: 40px; background: #ffffff; border-radius: 16px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06); } .faq_q { position: relative; padding-left: 20px; margin: 25px 0 15px; font-weight: bold; font-size: var(--subtitle-font-size); } .knowledge_container_right { position: sticky; top: 20px; background: #ffffff; border-radius: 12px; box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1); padding: 25px; } @media screen and (max-width: 789px) { .content-header { padding: 0 !important; } .knowledge_container { width: 100%; grid-template-columns: 1fr; padding: 20px; } }