@media (max-width:1600px){
    .container{
        max-width: 90%;
        margin: auto;
    }
}
@media (max-width:1440px){
    .container{
        max-width: 87%;
        margin: auto;
    }
}
@media (max-width:1280px){
.nav-links{
        gap:16px
    }
     .nav-dropdown-mega{
        width:100%;
        padding:18px 0 16px
    }
     .nav-mega-grid{
        width:min(1400px,calc(100vw - 40px));
        gap:12px 8px
    }
     .nav-mega-thumb{
        max-width:122px
    }
     .nav-mega-name{
        font-size:13px
    }
.auto-container{
        padding:0 20px
    }
     .list_faq .page_content>.auto-container,.list_news .page_content>.auto-container,.list_products .page_content>.auto-container{
        grid-template-columns:minmax(0,1fr) 280px;
        gap:26px
    }
     .show_product_detail_area>.auto-container{
        grid-template-columns:minmax(0,1fr) 280px;
        gap:26px
    }
     .show_products_detail .show_product_summary>.auto-container{
        grid-template-columns:minmax(0,1fr) 420px;
        gap:32px
    }
     .list_products .list_products_box{
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
     .news_item{
        grid-template-columns:220px minmax(0,1fr)
    }
     .about_intro_grid{
        grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
        gap:36px
    }
     .about_service_grid{
        width:calc(100% - 40px)
    }
     .factory_process_steps{
        gap:22px;
        padding-left:0;
        padding-right:0
    }
     .contact_info_grid{
        grid-template-columns:repeat(3,minmax(0,1fr))
    }
     .contact_form_grid{
        grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr)
    }
     .contact_branch_item{
        grid-template-columns:180px minmax(0,1fr);
        gap:20px
    }
     .contact_social_grid{
        grid-template-columns:repeat(3,minmax(0,1fr))
    }
}

@media (max-width:1080px){
.list_faq .page_content>.auto-container,.list_news .page_content>.auto-container,.list_products .page_content>.auto-container{
        grid-template-columns:1fr
    }
     .show_product_detail_area>.auto-container,.show_products_detail .show_product_summary>.auto-container{
        grid-template-columns:1fr
    }
     .sidebar{
        position:static
    }
     .sidebar .sidebar_box{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:18px
    }
     .left_contact{
        grid-column:1/-1
    }
     .sidebar_search_box{
        grid-column:1/-1
    }
     .news_featured{
        grid-template-columns:1fr
    }
     .news_featured_side{
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
     .contact_branch_grid,.contact_form_grid{
        grid-template-columns:1fr
    }
     .contact_map_visual{
        min-height:480px
    }
     .contact_map_info{
        top:auto;
        right:20px;
        bottom:20px;
        width:min(420px,calc(100% - 40px))
    }
     .contact_cta_inner{
        grid-template-columns:86px minmax(0,1fr);
        padding:34px;
        gap:22px
    }
     .contact_cta_inner>a{
        grid-column:2;
        justify-self:start
    }
     .about_culture_grid,.about_intro_grid{
        grid-template-columns:1fr
    }
     .about_service_grid{
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
     .factory_base_grid{
        grid-template-columns:1fr;
        gap:28px
    }
     .factory_process_steps{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:28px
    }
     .factory_process_item::after,.factory_process_item::before{
        display:none
    }
     .factory_support_card{
        grid-template-columns:minmax(220px,.65fr) minmax(0,1.35fr)
    }
     .factory_support_card.delivery{
        grid-template-columns:minmax(0,1.35fr) minmax(220px,.65fr)
    }
     .factory_capacity_grid{
        grid-template-columns:repeat(3,minmax(0,1fr))
    }
}

@media (max-width:1024px){
.pcat-card{
        flex:0 0 calc((100% - 3 * 20px)/ 4)
    }
     .products-promo{
        min-height:220px
    }
     .products-promo-overlay{
        right:32px;
        width:min(560px,48%);
        padding:24px 28px
    }
     .about-layout{
        grid-template-columns:1fr;
        gap:48px
    }
     .footer-top{
        grid-template-columns:1fr 1fr;
        gap:32px
    }
}

@media (max-width:960px){
.fac-showcase-layout{
        grid-template-columns:1fr;
        gap:48px
    }
     .fac-photo-grid{
        height:360px
    }
     .fac-photo-grid-bottom .fac-photo{
        height:160px
    }
}

@media (max-width:900px){
.adv-cols{
        gap:0 32px
    }
     .cp-steps{
        flex-direction:column;
        align-items:center;
        gap:0
    }
     .cp-step{
        max-width:100%;
        width:100%;
        flex-direction:row;
        text-align:left;
        gap:20px;
        padding-bottom:24px
    }
     .cp-step-text{
        flex:1
    }
     .cp-circle{
        width:72px;
        height:72px;
        flex-shrink:0;
        margin-bottom:0
    }
     .cp-arrow{
        display:none
    }
     .blog-slider{
        grid-template-columns:repeat(2,1fr)
    }
     .inq-inner{
        padding:40px 20px
    }
     .inq-form-col{
        padding:0
    }
     .common_from .input{
        grid-template-columns:1fr
    }
     .footer-top{
        grid-template-columns:1fr 1fr;
        gap:32px
    }
}

@media (max-width:820px){
.tc-panel{
        grid-template-columns:1fr
    }
     .tc-panel-img{
        min-height:220px;
        height:220px
    }
     .tc-panel-body{
        padding:32px 24px;
        border-left:none;
        border-top:1px solid #f5f5f5
    }
    .tc-panel-title{
    font-size: 22px;
}
}

@media (max-width:768px){
.hp-prev,.hp-next{
        display: none;
    }
     .adv-cols{
        grid-template-columns:1fr;
        gap:0;
        padding-bottom:56px
    }
    .adv-col{
    margin-bottom: 10px;
}
    .adv-item{
    padding: 0;
    gap: 15px;
}
     #advantages .section-title{
        font-size:29px
    }
     #sidebar-contacts{
        /* display:none; */
        top: 65%;
        right: 0;
    }
     section{
        padding: 60px 0;
    }
     .nav-inner{
        padding:0 16px
    }
     .nav-brand{
        max-width:calc(100% - 92px)
    }
     .nav-logo img{
        height:48px;
        padding:0
    }
     .nav-tools{
        gap:8px
    }
     .nav-links,.nav-tagline{
        display:none
    }
     .nav-dropdown{
        display:none
    }
     .header-search{
        min-width:40px;
        min-height:40px
    }
     .search-toggle{
        width:40px;
        height:40px
    }
     .search-panel{
        right:48px
    }
     #navbar.search-open .search-panel{
        width:min(260px,calc(100vw - 92px))
    }
     .search-field{
        min-height:40px;
        padding:0 10px;
        gap:8px
    }
     .search-field .search_btn{
        width:32px;
        height:32px;
        min-width:32px
    }
     .container{
        max-width: 100%;
        padding:0 10px
    }
     .hamburger{
        width:40px;
        height:40px;
        display:flex
    }
     .hero-panel{
        max-width:100%
    }
     .hero-title{
        font-size:clamp(32px,11vw,45px);
        line-height:1.08
    }
     .hero-arrow{
        display:none
    }
     .hero-desc{
        font-size:16px;
        max-width:none
    }
     .footer-top {
        grid-template-columns:1fr
    }
     .footer-col:nth-child(2),.footer-col:nth-child(3),.footer-col:nth-child(4){
        display:none
    }
     .pcat-wrap .carousel-arrow{
        display:none
    }
     .hp-tabs{
        display:flex;
        gap:9px
    }
     .hp-tab{
        font-size:14px;
        padding:10px
    }
     .hp-swiper{
        padding-bottom:50px
    }
     #coop-process,#factory-showcase,#global-cert{
        padding:50px 0
    }
.auto-container{
        padding:0 10px
    }
     .inside_banner{
        min-height:260px
    }
     .inside_banner_content{
        width:calc(100% - 24px);
        padding-top:58px
    }
     .inside_banner_content p{
        font-size: 15px !important;
    }
     .page_inside .auto-container{
        min-height:46px;
        font-size:13px;
        flex-wrap:wrap
    }
     .list_faq .page_content,.list_news .page_content,.list_products .page_content{
        padding:44px 0
    }
     .list_products .list_products_box{
        grid-template-columns:1fr;
        gap:18px
    }
     .faq_panel{
        /* padding:24px 16px 0; */
    }
     .faq_item summary{
        min-height:52px;
        padding: 10px 14px;
        font-size: 16px;
    }
     .faq_answer{
        margin:0 10px 10px;
        padding:15px;
        font-size: 16px;
    }
     .contact_bottom_cta,.contact_branch_section,.contact_cards_section,.contact_follow_section,.contact_form_section,.contact_map_section{
        padding: 50px 0;
    }
    #inquiry-form-section,.contact_branch_section{
    /* padding-bottom: 0; */
}
     .contact_form_fields,.contact_info_grid,.contact_social_grid{
        grid-template-columns:1fr
    }
    .contact_social_grid{
    grid-template-columns: 1fr 1fr;
}
     .contact_info_card{
        min-height:auto;
        padding:26px 18px
    }
     .contact_branch_card,.contact_form_card,.contact_map_card,.contact_person_card{
        padding:20px
    }
    .contact_map_card,.contact_branch_card{
    padding: 0;
}
     .contact_block_title{
        align-items:flex-start;
        margin-bottom:20px
    }
    .contact_person_swiper{
    padding-bottom: 80px;
}
     .contact_block_title h2,.contact_follow_head h2{
        font-size:24px
    }
     .contact_person_list p{
        grid-template-columns:30px 78px minmax(0,1fr);
        gap:9px;
        /* font-size:13px; */
    }
     .contact_response_box{
        padding:18px;
        gap:14px
    }
     .contact_map_visual{
        min-height:520px
    }
     .contact_map_info{
        left:14px;
        right:14px;
        bottom:14px;
        width:auto;
        padding:20px
    }
     .contact_map_info>div{
        flex-direction:column
    }
     .contact_branch_item{
        grid-template-columns:1fr;
        /* padding:16px; */
    }
     .contact_branch_item>img{
        aspect-ratio:16/10
    }
     .contact_branch_item h3 span{
        margin:8px 0 0;
        width:max-content
    }
     .contact_cta_inner{
        grid-template-columns:1fr;
        min-height:auto;
        padding:30px 20px;
        text-align:center;
        justify-items:center
    }
     .contact_cta_icon{
        width:72px;
        height:72px
    }
     .contact_cta_icon svg{
        width:38px;
        height:38px
    }
     .contact_cta_text h2{
        font-size:25px
    }
     .contact_cta_text p{
        font-size:15px
    }
     .contact_cta_inner>a{
        grid-column:auto;
        justify-self:stretch;
        min-width:0;
        width:100%;
        height:54px
    }
     .show_product_detail_area,.show_products_detail .show_product_summary,.show_recommend_products{
        padding:50px 0
    }
    .show_recommend_products{
        padding-bottom: 0;
    }
     .show_product_info h1,.show_recommend_head h2{
        font-size:26px
    }
     .show_product_detail_area .page_content_box{
        padding:22px
    }
     .show_product_attrs li{
        grid-template-columns: 100px minmax(0,1fr);
        gap: 5px;
    }
     .show_gallery_main .swiper-slide{
        aspect-ratio:1/1.08
    }
     .show_gallery_thumbs_wrap{
        grid-template-columns:36px minmax(0,1fr) 36px
    }
     .show_recommend_next,.show_recommend_prev,.show_thumb_next,.show_thumb_prev{
        width:36px;
        height:36px
    }
     .show_recommend_wrap{
        display:block
    }
    .show_recommend_swiper{
    padding-bottom: 40px;
}
     .show_recommend_next,.show_recommend_prev{
        display:none
    }
     .show_recommend_pagination{
        display:flex;
        justify-content:center;
        margin-top:20px
    }
     .sidebar .sidebar_box{
        grid-template-columns:1fr
    }
     .left_contact{
        grid-column:auto
    }
     .list_products_editor{
        padding:44px 0;
        padding-bottom: 0;
    }
     .list_products_editor .product_show_content>div{
        display:block!important
    }
     .list_products_editor .product_show_content>div>div{
        width:100%!important
    }
     .news_featured_side{
        grid-template-columns:1fr
    }
     .news_featured_big strong{
        font-size:22px
    }
     .news_item{
        grid-template-columns:1fr;
        padding:14px
    }
     .news_info h3{
        font-size:20px
    }
     .about_intro_section{
        padding: 45px 0;
    }
     .page_about .about_section_head{
        width:calc(100% - 24px);
        margin-bottom:24px
    }
     .about_intro_text h1,.page_about .about_section_head h2{
        font-size:30px
    }
     .about_intro_text p,.page_about .about_section_head p{
        font-size:15px
    }
     .about_intro_visual img{
        height: 360px;
    }
     .about_video_play{
        width:60px;
        height:60px
    }
     .about_video_play svg{
        width:26px;
        height:26px
    }
     .about_cert_section,.about_culture_section,.about_services_section{
        padding: 0 0 45px;
    }
    .about_services_section,.about_cert_section{
    padding-top: 45px;
}
     .about_history_section{
        padding: 45px 0 0px;
    }
     .services_cta_content h2{
        font-size:30px;
        line-height: 1.35;
    }
     .services_cta_content p{
        font-size:15px
    }
     .services_cta_section{
        min-height:260px
    }
     .services_cta_bg::after{
        background:linear-gradient(90deg,rgba(0,71,142,.94),rgba(0,71,142,.76))
    }
     .services_cta_content{
        padding:38px 0
    }
     .services_cta_actions{
        align-items:stretch;
        flex-wrap: nowrap;
    }
     .services_cta_primary,.services_cta_secondary{
        width:100%;
        gap:6px;
    }
     .factory_cta_section,.factory_overview_section,.factory_process_section,.factory_support_section,.factory_workshop_section{
        padding: 50px 0;
    }
    .factory_overview_section,.factory_process_section,.factory_workshop_section{
        padding-bottom: 0;
    }
    .factory_support_text{
        padding: 0;
    }
    .factory_section_head{
    margin-bottom: 20px;
}
     .factory_support_card,.factory_support_card.delivery{
        grid-template-columns:1fr;
        gap: 20px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column-reverse;
    }
    .factory_support_grid{
    gap: 40px;
}
     .factory_support_card.delivery{
    flex-direction: column;
}
    .factory_support_card.quality{
        /* padding:22px; */
    }
     .factory_support_card.delivery .factory_support_image,.factory_support_card.delivery .factory_support_text{
        order:initial
    }
     .factory_support_image img{
        min-height:190px
    }
     .factory_support_card.delivery .factory_support_text li{
        flex-wrap:wrap;
        gap:4px 10px
    }
     .factory_support_card.delivery .factory_support_text li p{
        white-space:normal
    }
     .factory_dual_card{
        /* padding:26px 20px 30px; */
    }
     .factory_dual_card>h2{
        font-size:26px;
        margin-bottom:20px
    }
     .factory_base_card>img{
        height:205px
    }
     .factory_base_content{
        padding: 20px 0;
    }
     .factory_base_card h3{
        font-size:21px
    }
     .factory_base_info p:first-child{
        flex-wrap:wrap;
        gap:10px 14px
    }
     .factory_base_info strong{
        font-size:15px
    }
     .factory_process_head{
        align-items:center;
        justify-content:center;
        text-align:center
    }
     .factory_process_head span{
        font-size:32px
    }
     .factory_process_head h2{
        font-size:20px
    }
     .factory_process_steps{
        grid-template-columns:1fr;
        padding-bottom:20px
    }
     .factory_process_item{
        display:grid;
        grid-template-columns:78px minmax(0,1fr);
        gap:2px 18px;
        text-align:left
    }
     .process_icon{
        grid-row:1/span 4;
        width:70px;
        height:70px;
        margin:0;
        padding:19px
    }
     .factory_process_item p{
        max-width:none;
        margin:0
    }
     .factory_workshop_wrap{
        grid-template-columns:1fr;
        padding:12px
    }
     .factory_workshop_arrow{
        display:none
    }
     .factory_workshop_swiper{
        padding-bottom:32px
    }
     .factory_section_head h2{
        font-size:28px
    }
     .factory_capacity_section{
        width:100%;
        padding:48px 0;
        padding-bottom: 0;
    }
     .factory_capacity_section h2{
        font-size:24px
    }
     .factory_capacity_grid{
        grid-template-columns:1fr 1fr
    }
     .capacity_item{
        min-height:104px;
        padding:18px 10px
    }
     .capacity_item strong{
        font-size:25px
    }
     .capacity_item span{
        font-size:13px
    }
     .factory_cta_section .auto-container{
        min-height:210px;
        padding:32px 18px;
        border-radius: 0;
    }
     .factory_cta_section h2{
        font-size:26px
    }
     .culture_photo img,.culture_photo_wide img{
        height:210px
    }
     .culture_card{
        grid-template-columns:56px minmax(0,1fr);
        gap:16px;
        min-height:auto
    }
     .culture_icon{
        width:56px;
        height:56px
    }
     .culture_icon svg{
        width:27px;
        height:27px
    }
     .about_service_grid{
        grid-template-columns:1fr;
        width:calc(100% - 20px)
    }
     .about_service_card img{
        height:220px
    }
     .about_cert_wrap{
        grid-template-columns:1fr;
        width:calc(100% - 24px)
    }
     .about_cert_arrow{
        display:none
    }
     .about_history_wrap{
        grid-template-columns:1fr;
        width:calc(100% - 24px)
    }
     .about_history_arrow{
        display:none
    }
     .about_history_swiper{
        padding-bottom:42px
    }
     .about_history_swiper::before{
        display:none
    }
     .timeline_item{
        display:grid;
        grid-template-columns:96px minmax(0,1fr);
        gap:4px 16px;
        text-align:left;
        align-items:start;
        padding:18px;
        border:1px solid #eee;
        border-radius:8px;
        background:#fff
    }
     .timeline_item::before{
        display:none
    }
     .timeline_year{
        grid-row:1/span 3;
        font-size:22px
    }
     .timeline_item h3,.timeline_item p{
        min-height:0
    }
     .timeline_item h3{
        margin:0 0 4px
    }
     .timeline_item p{
        margin:0 0 10px
    }
     .timeline_item img{
        grid-column:2;
        max-height:150px
    }
html,body{
        overflow-x:hidden
    }
    img,video{
        max-width:100%
    }
    .inside_banner_content h1,.inside_banner_content .page_banner_title,.inside_banner_content p,.hero-title,.section-title,.factory_section_head h2,.show_product_info h1,.show_recommend_head h2{
        overflow-wrap:anywhere;
        font-size: 24px;
    }
    .list_products .hp-card-footer,.show_recommend_swiper .hp-card-footer{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:10px;
        padding:0 18px 18px
    }
    .list_products .hp-btn-more,.list_products .inquire,.show_recommend_swiper .hp-btn-more,.show_recommend_swiper .inquire{
        width:100%;
        min-width:0;
        min-height:38px;
        display:flex;
        align-items:center;
        justify-content:center;
        padding:0 10px;
        box-sizing:border-box;
        text-align:center
    }
    .show_color_list{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
    .show_color_option{
    width: 63px;
    height: 63px;
}
    .show_product_actions{
        display:grid;
        grid-template-columns:1fr 1fr;
        align-items:stretch
    }
    .show_contact_btn,.show_product_actions .quote-button{
        width:100%;
        min-width:0;
        height:46px;
        padding:0 12px;
        text-align:center
    }
    .show_product_contact a{
        align-items:flex-start;
        font-size:14px;
        line-height:1.55
    }
    .show_product_contact svg{
        margin-top:3px
    }
    .factory_support_text li p{
        color:#596273;
        font-weight:400;
        line-height:1.6
    }
    .factory_support_card.delivery .factory_support_text li{
        align-items:flex-start
    }
    .contact_form_card,.contact_person_card{
        min-width:0
    }
    .contact_person_card{
    gap: 20px;
}
    .contact_secure_note{
        align-items:flex-start;
        text-align:left
    }
    .contact_person_list p{
        grid-template-columns:28px 78px minmax(0,1fr);
        gap: 0 8px;
        align-items:center
    }
    .contact_person_list strong,.contact_person_list a,.contact_person_list em{
        grid-column:auto
    }
    .contact_person_list a,.contact_person_list em{
        white-space:normal
    }
    .timeline_item{
        grid-template-columns:1fr;
        gap:10px;
        text-align:left
    }
    .timeline_year{
        grid-row:auto;
        margin-bottom:8px;
        font-size:24px
    }
    .timeline_item img{
        grid-column:auto;
        width:100%
    }
}

@media (max-width:640px){
.pcat-card{
        flex:0 0 calc((100% - 20px)/ 2)
    }
     .pcat-wrap{
        padding:0
    }
     .products-promo{
        min-height:200px;
        background-position:center
    }
     .products-promo-overlay{
        left:18px;
        right:18px;
        top:auto;
        bottom:18px;
        transform:none;
        width:auto;
        padding:18px 20px
    }
     .products-promo-overlay h3{
        font-size:22px;
        margin-bottom:8px
    }
     .products-promo-overlay p{
        font-size:15px;
        line-height:1.55
    }
}

@media (max-width:600px){
.fac-photo-grid{
        height:260px;
        gap:8px
    }
     .fac-photo-grid-bottom{
        gap:8px
    }
     .fac-photo-grid-bottom .fac-photo{
        height:120px
    }
     .fac-showcase-info .fac-title{
        font-size:24px
    }
}

@media (max-width:540px){
.tc-tabs{
        gap:7px
    }
     .tc-tab{
        padding:8px 16px;
        font-size:14px
    }
     .blog-slider,.footer-top{
        grid-template-columns:1fr
    }
     .footer-bottom{
        flex-direction:column;
        align-items:flex-start
    }
}

@media (max-width:480px){ 
.inside_banner_content h1,
.inside_banner_content .page_banner_title{
        font-size: 30px;
        font-weight: 600;
    }
     .inside-pagination li a{
        min-width:36px;
        height:36px;
        padding:0 10px;
        font-size:14px
    }
     .sidebar .sidebar_box>div{
        padding:18px
    }
     .contact_upload_box{
        min-height:78px;
        align-items:center;
        padding:12px;
        text-align:left
    }
     .contact_person_list p{
        grid-template-columns:28px minmax(0,1fr);
        /* align-items:start; */
    }
     .contact_person_list strong{
        grid-column:2
    }
     .contact_person_list a,.contact_person_list em{
        grid-column:2;
        white-space:normal
    }
}

@media (max-width:1080px){
    .quotation-layout{
        grid-template-columns:1fr
    }
}

@media (max-width:768px){
    .quotation-page .contact-shell{
        width:calc(100% - 24px);
        padding:48px 0 64px
    }
    .quotation-intro{
        margin-bottom:28px
    }
    .quotation-intro h1{
        font-size:30px
    }
    .quotation-intro p{
        font-size:14px
    }
    .quote-selection-card,.quotation-page .form-card{
        padding:24px 20px
    }
    .quote-card-head{
        align-items:flex-start;
        flex-direction:column
    }
    .quotation-page .form-grid{
        grid-template-columns:1fr
    }
    .quotation-submit{
        align-items:stretch;
        flex-direction:column
    }
    .quotation-page .btn-submit,.quotation-page .btn-continue,.quotation-page .btn-cta{
        width:100%
    }
}

@media (max-width:480px){
    .quotation-intro h1{
        font-size:25px
    }
    .quotation-layout{
        gap:18px
    }
    .quote-selection-card,.quotation-page .form-card{
        padding:21px 16px
    }
    .quote-card-head h2,.quotation-page .form-card-header h2{
        font-size:20px
    }
    .quote-list-actions{
        width:100%
    }
    .quote-list-actions button{
        flex:1
    }
    .quote-product-item{
        grid-template-columns:64px minmax(0,1fr);
        gap:11px
    }
    .quote-product-media{
        width:64px;
        height:64px
    }
}

@media(max-width:1080px){
    .blog_detail_page .blog_detail_layout{grid-template-columns:1fr}
}

@media(max-width:768px){
	.thanks_page .thanks_scope{padding:56px 0}
	.thanks_page .thanks_panel{padding:40px 22px}
	.thanks_page .thanks_content h2{font-size:28px}
	.thanks_page .thanks_actions{flex-direction:column}
	.thanks_page .thanks_button{width:100%}
    :is(.page_default_detail,.blog_detail_page) .article_container{width:calc(100% - 20px)}
    :is(.page_default_detail,.blog_detail_page) .article_hero{padding:45px 0 0}
    :is(.page_default_detail,.blog_detail_page) .article_hero h1{max-width:100%;font-size:24px}
    :is(.page_default_detail,.blog_detail_page) .article_content{padding:42px 0 56px}
    :is(.page_default_detail,.blog_detail_page) .article_body{padding:0;background:transparent}
    :is(.page_default_detail,.blog_detail_page) .article_body h2{font-size:20px}
    :is(.page_default_detail,.blog_detail_page) .article_body h3{font-size:21px}
    .blog_detail_page .article_meta{gap:12px;font-size:14px}
    .blog_detail_page .sidebar{z-index:auto}
    .blog_detail_page .blog_detail_toc{
        position:fixed;
        left:16px;
        right:16px;
        bottom:78px;
        z-index:1202;
        max-height:min(66vh,460px);
        overflow:auto;
        transform:translateY(20px);
        opacity:0;
        pointer-events:none;
        transition:opacity .22s ease,transform .22s ease
    }
    .blog_detail_page .blog_detail_toc.open{transform:translateY(0);opacity:1;pointer-events:auto}
    .blog_detail_page .blog_detail_toc_mask{
        position:fixed;
        inset:0;
        z-index:1201;
        display:block;
        background:rgba(0,0,0,.35);
        opacity:0;
        pointer-events:none;
        transition:opacity .22s ease
    }
    .blog_detail_page .blog_detail_toc_mask.show{opacity:1;pointer-events:auto}
    .blog_detail_page .blog_detail_toc_btn{
        position:fixed;
        right: 0;
        top: 42.5%;
        z-index:1200;
        display:flex;
        align-items:center;
        justify-content:center;
        width: 44px;
        height: 44px;
        border:0;
        border-radius: 8px 0 0 8px;
        background:var(--accent);
        color:#fff
    }
    .blog_detail_page .blog_detail_toc_btn svg{width:22px;height:22px;stroke:currentColor;stroke-width:2;stroke-linecap:round}
    .blog_detail_page .blog_detail_nav{padding-bottom:60px}
    .blog_detail_page .blog_detail_nav_grid{grid-template-columns:1fr}
    .blog_detail_page .blog_detail_nav_item.next{text-align:left}
}