@media only screen and (max-width: 1319px) {
    h1, .h1 {
        font-size: 40px !important;
    }
    h2,.h2{
        font-size: 36px !important;
    }
    h3,.h3{
        font-size: 32px !important;
    }
    h4,.h4{
        font-size: 26px !important;
    }
    h5,.h5{
        font-size: 22px !important;
    }
    h6,.h6{
        font-size: 18px !important;
    }
    .blog-banner {
        padding-top: 60px;
    }
    .blog-banner .blog-banner-inner{
        min-height: 134px;
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .blog-list {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .blog-list .blog-list-inner{
        padding-bottom: 60px;
    }
    .ttee {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .bds {
        width: 100%;
        padding-top: calc(var(--header-height) + 60px);
        padding-bottom: 60px;
    }
    .bds .bds-date {
        font-size: 28px;
    }
    .bds .bds-title{
        padding-top: 60px;
    }
    .bds .bds-table-of-contnet{
        aspect-ratio: 407/535.13;
    }

    .main-header .header-nav{
        gap: 10px;
    }

    .main-header .main-header-inner{
        gap: 10px;
    }
    .main-header .header-left{
        max-width: 220px;
    }
    .main-header .header-right{
        max-width: calc(100% - 220px - 10px);
        gap: 10px;
    }
    .main-header .header-work{
        width: 67px;
    }
    .main-header .header-nav{
        max-width: calc(100% - 67px - 10px);
    }
    .main-header .header-cta a{
        font-size: 12px;
        padding: 8px 10px;
    }
    .main-header .header-menu > ul > li > a {
        padding: 4px 8px;
        font-size: 14px;
    }

    footer .footer-info-left{
        max-width: calc(100% - 670px - 30px);
    }
    footer .footer-info-right{
        max-width: 670px;
    }
    footer .footer-links-left{
        max-width: calc(100% - 750px - 30px);
    }
    footer .footer-links-right{
        max-width: 750px;
    }
}
@media only screen and (max-width: 1200px) {
    .main-header .header-menu > ul > li > a {
        padding: 4px 7px;
        font-size: 13px;
    }
    footer .footer-links-left{
        max-width: calc(100% - 650px - 30px);
    }
    footer .footer-links-right{
        max-width: 650px;
        gap: 20px;
    }
}
@media only screen and (max-width: 1024px) {
    body {
        font-size: 18px !important;
    }
    h1, .h1 {
        font-size: 36px !important;
    }
    h2,.h2{
        font-size: 32px !important;
    }
    h3,.h3{
        font-size: 28px !important;
    }
    h4,.h4{
        font-size: 24px !important;
    }
    h5,.h5{
        font-size: 20px !important;
    }
    h6,.h6{
        font-size: 18px !important;
    }
    
    .main-header .mobile-nav-wrap{
        display: flex;
    }

    .blog-banner {
        padding-top: 40px;
    }
    .blog-banner .blog-banner-inner{
        min-height: 120px;
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .blog-list {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .blog-list .blog-list-inner{
        gap: 30px;
        padding-bottom: 50px;
    }
    .blog-list .blog-list-single{
        max-width: calc(50% - 15px);
    }
    .blog-list .blog-list-single-content{
        padding: 20px;
    }
    .blog-list .pagination .prev, 
    .blog-list .pagination .next{
        font-size: 14px;
    }
    .blog-list .pagination .prev{
        padding-left: 40px;
    }
    .blog-list .pagination .next{
        padding-right: 40px;
    }
    .blog-list .pagination .prev::before{
        width: 10px;
        height: 10px;
        left: 12px;
    }
    .blog-list .pagination .next::before{
        width: 10px;
        height: 10px;
        right: 20px;
    }
    .blog-list .pagination .page-numbers-wrap{
        gap: 12px;
    }
    .blog-list .pagination .page-numbers-wrap .page-numbers:not(.dots){
        font-size: 14px;
        padding: 6px 10px 4px 10px;
    }
    .blog-list .pagination .page-numbers-wrap .page-numbers.dots{
        font-size: 44px;
        padding-top: 8px;
    }

    .ttee {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .ttee .ttee-left{
        max-width: calc(100% - 400px - 30px);
    }
    .ttee .ttee-left-list ul li{
        padding: 2px 0 2px 40px;
    }
    .ttee .ttee-left-list ul li::before{
        width: 30px;
        height: 30px;
    }
    .ttee .ttee-left-label{
        padding-top: 40px;
        font-size: 18px;
    }
    .ttee .ttee-right{
        max-width: 400px;
    }

    .bds {
        padding-top: calc(var(--header-height) + 40px);
        padding-bottom: 40px;
    }
    .bds .bds-date {
        font-size: 24px;
    }
    .bds .bds-social-share {
        gap: 10px;
    }
    .bds .bds-social-share a {
        width: 34px;
        height: 34px;
    }
    .bds .bds-title {
        padding-top: 50px;
    }
    .bds .bds-banner{
        gap: 30px;
    }
    .bds .bds-banner-image {
        max-width: calc(65.44% - 15px);
    }
    .bds .bds-table-of-contnet{
        max-width: calc(34.56% - 15px);
        aspect-ratio: 318.16/418.31;
    }
    .bds .bds-table-of-contnet .ez-toc-title-container{
        font-size: 14px;
    }
    .bds .bds-table-of-contnet nav ul li a{
        padding: 10px 0px;
        font-size: 12px !important;
    }
    .bds .bds-content {
        padding-top: 30px;
    }
    .bds .bds-content ul li {
        padding: 10px 0 10px 44px;
    }
    .bds .bds-content ul li::before {
        top: 6px;
        width: 34px;
        height: 34px;
    }

    .main-header .main-header-inner{
        height: 67px;
    }
    .main-header .header-menu{
        display: none;
    }
    .main-header .header-cta{
        display: none;
    }

    footer .footer-info{
        padding-top: 60px;
    }
    footer .site-main-footer-top {
        padding-bottom: 60px;
    }
    footer .footer-info-left {
        max-width: 100%;
    }
    footer .footer-info-right {
        max-width: 100%;
    }
    footer .footer-links-left{
        max-width: 100%;
    }
    footer .footer-links-right{
        max-width: 100%;
        gap: 40px;
    }
}
@media only screen and (max-width: 768px) {
    h1, .h1 {
        font-size: 34px !important;
    }
    h2,.h2{
        font-size: 30px !important;
    }
    h3,.h3{
        font-size: 26px !important;
    }
    h4,.h4{
        font-size: 23px !important;
    }
    h5,.h5{
        font-size: 19px !important;
    }
    h6,.h6{
        font-size: 17px !important;
    }
    .container{
        padding-left: 18px;
        padding-right: 18px;
    }
    .blog-banner .blog-banner-inner{
        min-height: 100px;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .blog-list {
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .blog-list .blog-list-inner{
        padding-bottom: 40px;
    }
    .blog-list .blog-list-single-meta{
        font-size: 14px;
    }
    .blog-list .blog-list-single-cta a{
        font-size: 14px;
    }
    .blog-list .blog-list-pagination{
        padding-top: 40px;
    }
    .blog-list .pagination{
        flex-wrap: wrap;
    }
    .blog-list .pagination .prev{
        order: 1;
        width: 100%;
        max-width: calc(50% - 10px);
        justify-content: flex-start;
    }
    .blog-list .pagination .next{
        order: 2;
        width: 100%;
        max-width: calc(50% - 10px);
        justify-content: flex-end;
    }
    .blog-list .pagination .page-numbers-wrap{
        order: 3;
        width: 100%;
    }

    .ttee .ttee-left {
        max-width: 100%;
    }
    .ttee .ttee-right {
        max-width: 100%;
    }

    .bds .bds-date {
        font-size: 20px;
    }
    .bds .bds-title {
        padding-top: 40px;
    }
    .bds .bds-title .h1 {
        font-size: 30px !important;
    }
    .bds .bds-banner {
        padding-top: 20px;
        gap: 18px;
    }
    .bds .bds-banner-image {
        max-width: calc(65.44% - 10px);
    }
    .bds .bds-table-of-contnet {
        max-width: calc(34.56% - 10px);
    }
    .bds .bds-content ul {
        padding: 0px 0 20px 0;
    }
    .bds .bds-content ul li {
        padding: 6px 0 6px 38px;
    }
    .bds .bds-content ul li::before {
        top: 4px;
        width: 30px;
        height: 30px;
    }
    footer .footer-links-right{
        flex-wrap: wrap;
    }
    footer .footer-links-list{
        width: 100%;
        max-width: calc(50% - 20px);
        min-width: unset !important;
    }

    footer .site-main-footer-bottom-inner{
        padding: 20px;
        flex-direction: column;
        align-items: center;
        gap: 14px;
    }
}
@media only screen and (max-width: 640px) {
    body {
        font-size: 16px !important;
    }
    h1, .h1 {
        font-size: 34px !important;
        line-height: 1.2 !important;
    }
    h2,.h2{
        font-size: 30px !important;
    }
    h3,.h3{
        font-size: 26px !important;
    }
    h4,.h4{
        font-size: 22px !important;
    }
    h5,.h5{
        font-size: 18px !important;
    }
    h6,.h6{
        font-size: 16px !important;
    }

    .blog-list .blog-list-single{
        max-width: 100%;
    }
    .blog-list .pagination .page-numbers-wrap{
        gap: 6px;
    }
    .blog-list .pagination .page-numbers-wrap .page-numbers:not(.dots){
        padding: 6px 8px 4px 8px;
        font-size: 12px;
    }
    .blog-list .pagination .page-numbers-wrap .page-numbers.dots {
        font-size: 30px;
        padding-top: 13px;
    }

    .bds {
        padding-top: calc(var(--header-height) + 20px);
    }
    .bds .bds-date {
        font-size: 18px;
    }
    .bds .bds-social-share a {
        width: 30px;
        height: 30px;
    }
    .bds .bds-title {
        padding-top: 30px;
    }
    .bds .bds-title .h1 {
        font-size: 26px !important;
    }
    .bds .bds-banner-image {
        max-width: 100%;
    }
    .bds .bds-table-of-contnet {
        max-width: 100%;
        aspect-ratio: unset;
        max-height: 54vw;
    }
    .bds .bds-table-of-contnet .ez-toc-title-container {
        font-size: 18px;
    }
    .bds .bds-table-of-contnet nav ul li a {
        font-size: 16px !important;
    }
    .bds .bds-content ul li {
        padding: 4px 0 4px 34px;
    }
    .bds .bds-content ul li::before {
        top: 3px;
        width: 26px;
        height: 26px;
    }

    footer .footer-info{
        padding-top: 30px;
    }
    footer .site-main-footer-top {
        padding-bottom: 30px;
    }
    .main-header .header-work{
        display: none;
    }
    footer .footer-address{
        max-width: 100%;
    }
    footer .footer-links-right {
        gap: 20px;
    }
    footer .footer-links-list{
        max-width: 100%;
    }
    footer .site-main-footer-bottom-left p,
    footer .site-main-footer-bottom-right ul li a{
        font-size: 12px;
    }
}