@media (max-width:1460px) {
    .header-main {padding: 30px 20px;}
    .top-section {padding-top: 200px;}
    .top-section h1{font-size: 50px; margin: 0 0 30px 0; line-height: 50px;}
    .about-section h2{max-width: 460px}
    .project-list-section{padding-bottom: 220px;}
    .contact-page .inner-area h3{font-size: 60px; line-height: 60px;}

    .mainproject-section .project-photo{height: auto}
    .mainproject-section .content-right h2{font-size: 32px; line-height: 32px; margin: 0 0 110px 0;}
    .studio-top-section .inner-area h2,
    .studio-top-section .content-area .lefttitle,
    .studio-top-section .content-area p{font-size: 18px}
    .studio-top-section .inner-area h1{font-size: 50px; line-height: 50px}

    .service-section .service-block .number{font-size: 120px}
    .service-section .service-block p{font-size: 18px}
    .service-section .service-block h3{font-size: 18px}
    .service-section .service-block li{font-size: 18px}
    .service-section .service-block .service-content .service-photo{height: 460px;margin-top: 120px;}
    .service-section .service-block li ol li{font-size: 18px}
}

@media (min-width: 768px) and (max-width: 1024px){

    .o-scroll{overflow: scroll;}
    .header-main {padding: 30px 20px;}
    .top-section {padding-top: 200px;}
    .top-section h1{font-size: 50px; margin: 0 0 30px 0;}
    .about-section h2{max-width: 460px}
    .project-list-section{padding-bottom: 220px;}
    .project-block {margin-bottom: 80px;}
    .project-block h2{font-size: 16px}

    .about-section .content-area{display: block;}
    .about-section .half{width: 100%; margin: 0 0 150px 0}
    .about-section p{margin: 0 0 150px 0}

    .contact-page{margin: 100px 0 0 0}
    .contact-page .inner-area{flex-wrap: wrap;}
    .contact-page .inner-area .small-part{width: 50%; margin-bottom: 80px}
    .contact-page .inner-area .large-part{width: 100%}
    .contact-page .inner-area h3{font-size: 40px; line-height: 40px}
    .contact-page .inner-area ul.link{margin: 0 0 200px 0}


    .awards-section{margin: 0 0 125px 0}
    .awards-section h2{font-size: 32px;  margin: 0 0 40px 0}
    .awards-section .awards-list-1 .awrd-logo img{width: 160px; height: 50px; }

    .awards-section h3{font-size: 16px; margin: 40px 0 50px 0}
    .awards-section .awards-list-2{flex-wrap: wrap; align-items: center; row-gap: 50px;}
    .awards-section .awards-list-2 .awrd-logo img{width: 140px; height: 50px;}

    .studio-top-section{margin: 80px 0 60px 0}
    .studio-top-section .inner-area {display: block; border-top: none; padding-top: 0; padding-bottom: 60px;}
    .studio-top-section .inner-area .small-part{width: 100%; margin-bottom: 46px; width: 134px}
    .studio-top-section .inner-area .large-part{width: 100%; border-top: #666666 1px solid; padding-top: 14px}
    .studio-top-section .inner-area h2{font-size: 16px}
    .studio-top-section .content-area p{font-size: 16px; width: 90%}

    .studio-top-section .content-area{display: block; padding-bottom: 70px;}
    .studio-top-section .content-area .rightside{width: 100%; padding-left: 50px}
    .studio-top-section .content-area .lefttitle{width: 100%; font-size: 16px; padding-left: 50px; margin-bottom: 35px}

    .mainproject-section .d-flex{display: block !important; padding-top: 15px; padding-bottom: 160px; border-bottom:none}
    .mainproject-section .project-photo{width: 100%; height: 400px; margin: 0 0 20px 0}
    .mainproject-section .content-right{width: 100%; padding: 0px}
    .mainproject-section .content-right h2 {font-size: 32px; line-height: 32px; margin: 0 0 50px 0;}
    .mainproject-section .content-right a{font-size: 16px}

    .service-section h2{font-size: 16px; margin: 0px 0 8px 0}
    .service-section .service-block:first-child {border-top: #666666 1px solid; flex-wrap: wrap;}
    .service-section .service-block{border-top: #666666 1px solid; flex-wrap: wrap;}
    .service-section .service-block{padding-top: 35px !important; padding-bottom: 130px}
    .service-section .service-block .number{font-size: 58px; width: 40%}
    .service-section .service-block .service-highlight{width: 60%}
    .service-section .service-block h3{font-size: 16px;}
    .service-section .service-block li{font-size: 16px;}
    .service-section .service-block li ol{padding-left: 18px}
    .service-section .service-block li ol li{font-size: 16px;}
    .service-section .service-block .service-content{width: 100%; padding-top: 50px}
    .service-section .service-block p {font-size: 16px; width: 100%}
    .service-section .service-block .service-content .service-photo{margin-top: 20px; height: 400px}
    .service-section .service-block a.link{font-size: 16px}
    .service-section .service-block a.link .icon{width: 12px}
    .mainproject-section .content-right a {position: relative; }
}

@media (max-width: 767px) {
    .o-scroll{overflow: scroll;}
    .dl-sections{padding: 0 10px}
    .header-main {padding: 30px 20px 30px 10px;}
    .header-main ul.main-menu li{margin-left: 30px;}
    .header-main ul.main-menu li a{font-size: 12px}
    .header-main .logo{width: 130px;}
    .header-main .logo a{display: block;}
    .header-main .logo img{width: 100%; display: block;}

    .top-section {padding-top: 30px;}
    .top-section h1{font-size: 28px; margin: 0 0 25px 0; line-height: 30px;}
    .top-section .img-area{height: auto}
    .about-section{margin: 50px 0 0 0}
    .about-section h2{max-width: 460px; font-size: 14px;}

    .project-list-section{padding-bottom: 180px;}
    .project-list-section ul.list-area li {width: 100%;}
    .project-list-section ul.list-area li.full .project-block .project-img{height: auto}
    .project-block {margin-bottom: 60px;}
    .project-block .project-img{height: auto}
    .project-block .project-img img{position: relative;}
    .project-block h2{font-size: 14px}


    .about-section .content-area{display: block; padding-bottom: 0px}
    .about-section .half{width: 100%; margin: 0 0 150px 0}
    .about-section p{margin: 0 0 100px 0; font-size: 14px}

    .contact-section h2{padding-top: 16px; padding-bottom: 114px; font-size: 16px}
    .contact-info{padding-bottom: 30px}
    .contact-info .d-flex{border-bottom: none; margin-bottom: 0; padding-bottom: 300px}
    .contact-info .d-flex .leftside{display: block; width: 60%}
    .contact-info .first-part{width: 100%; margin-bottom: 120px}
    .contact-info .second-part{width: 100%}
    .contact-info h2{font-size: 14px}
    .contact-info p{font-size: 14px}
    .contact-info a{font-size: 14px}

    .contact-page{margin: 130px 0 0 0}
    .contact-page .inner-area{flex-wrap: wrap;}
    .contact-page .inner-area .small-part{width: 100%; margin-bottom: 60px}
    .contact-page .inner-area .large-part{width: 100%}
    .contact-page .inner-area h3{font-size: 28px; line-height: 28px; margin: 0px 0px 80px 0px}
    .contact-page .inner-area ul.link{margin: 0 0 200px 0}
    .contact-page .inner-area h2{font-size: 14px; line-height: 16px}
    .contact-page .inner-area a{font-size: 14px; line-height: 20px}
    .contact-page .inner-area h4{font-size: 14px;}
    .contact-page .inner-area ul.link li a{font-size: 14px}

    .studio-top-section{margin: 80px 0 60px 0}
    .studio-top-section .inner-area {display: block; border-top: none; padding-top: 0; padding-bottom: 60px;}
    .studio-top-section .inner-area .small-part{width: 100%; margin-bottom: 46px; width: 134px}
    .studio-top-section .inner-area .large-part{width: 100%; border-top: #666666 1px solid; padding-top: 14px}
    .studio-top-section .inner-area h2{font-size: 14px}
    .studio-top-section .content-area p{font-size: 14px; width: 90%}

    .studio-top-section .content-area{display: block; padding-bottom: 70px;}
    .studio-top-section .content-area .rightside{width: 100%; padding-left: 0px}
    .studio-top-section .content-area .lefttitle{width: 100%; font-size: 14px; padding-left: 0px; margin-bottom: 35px}

    .awards-section{margin: 0 0 125px 0}
    .awards-section h2{font-size: 28px;  margin: 0 0 40px 0}
    .awards-section .awards-list-1{ flex-direction: column; row-gap: 50px;}
    .awards-section .awards-list-1 .awrd-logo{width: 100%;  text-align: left;}
    .awards-section .awards-list-1 .awrd-logo img{width: 200px; height: 50px;  object-position: left;}

    .awards-section h3{font-size: 14px; margin: 40px 0 50px 0}
    .awards-section .awards-list-2{flex-wrap: wrap; align-items: center; row-gap: 50px;}
    .awards-section .awards-list-2 .awrd-logo{width: 50%;  text-align: center;}
    .awards-section .awards-list-2 .awrd-logo img{width: 120px; height: 50px; object-position: left;}

    .mainproject-section .d-flex{display: block !important; padding-top: 15px; padding-bottom: 160px; border-bottom:none}
    .mainproject-section .project-photo{width: 100%; margin: 0 0 20px 0}
    .mainproject-section .content-right{width: 100%; padding: 0px}
    .mainproject-section .content-right h2 {font-size: 28px; line-height: 28px; margin: 0 0 50px 0;}
    .mainproject-section .content-right a{font-size: 16px}

    .privacy-page{margin: 80px 0 0px 0;}
    .privacy-page .inner-area{display: block;}
    .privacy-page .inner-area .leftside{width: 100%}
    .privacy-page .inner-area .rightside{width: 100%; padding: 0px}
    .privacy-page .inner-area .point-area ul li{width: 100%; font-size: 14px}
    .privacy-page .inner-area .leftside h1{font-size: 28px; margin: 0 0 50px 0}
    .privacy-page .inner-area .rightside p{font-size: 14px}
    .privacy-page .inner-area .full-info-area p{font-size: 14px; margin-bottom: 20px;}
    .privacy-page .inner-area .full-info-area p span{margin-bottom: 20px;}
    .privacy-page .inner-area .point-area h3{font-size: 14px; margin-bottom: 20px}
    .privacy-page .inner-area .last-section h3{font-size: 14px; margin-bottom: 20px}
    .privacy-page .inner-area .last-section p{font-size: 14px}

    .service-section h2{font-size: 16px; margin: 0px 0 8px 0}
    .service-section .service-block:first-child {border-top: #666666 1px solid; flex-wrap: wrap;}
    .service-section .service-block{border-top: #666666 1px solid; flex-wrap: wrap;}
    .service-section .service-block{padding-top: 35px !important; padding-bottom: 130px}
    .service-section .service-block .number{font-size: 60px; width: 40%}
    .service-section .service-block .service-highlight{width: 60%}
    .service-section .service-block h3{font-size: 14px;}
    .service-section .service-block li{font-size: 14px;}
    .service-section .service-block li ol{padding-left: 18px}
    .service-section .service-block li ol li{font-size: 14px;}
    .service-section .service-block .service-content{width: 100%; padding-top: 50px}
    .service-section .service-block p {font-size: 14px; width: 100%}
    .service-section .service-block .service-content .service-photo{margin-top: 20px; height: 220px}
    .service-section .service-block a.link{font-size: 14px}
    .service-section .service-block a.link .icon{width: 12px}
    .studio-top-section .inner-area h1{font-size: 28px; line-height: 28px}
    .mainproject-section .content-right a {position: relative; }
    .contact-page .inner-area p {font-size: 14px;}
    .hide_in_mobile{display: none !important;}
    .show_in_mobile{display: block !important;}
    .contact-page .inner-area .small-part.nopad {margin-bottom: 0px;}
    section#footer_sec {margin-top: 400px;}
    section.dl-sections.project-info-section .d-flex {
        display: inline-block !important;
    }
    .project-info-section h2 {
        font-size: 28px;
        line-height: 30px;
        margin: 30px 0 30px 0;
    }
    .project-info-section .lefside {
        width: 100%;
        margin-bottom: 30px;
    }
    .project-info-section .rightside {
        width: 100%;
        display: inline-block;
        justify-content: flex-end;
    }
    .project-info-section .client-area {
        width: 49%;
        display: inline-block;
        vertical-align: top;
    }
    .project-info-section .info-area,
    .project-info-section .info-area ul li,
    .project-info-section p,
    .challenge-section h2,
    .challenge-section p
    {
        font-size: 14px;
    }
    section.dl-sections.challenge-section .d-flex {
        padding-top: 50px;
        padding-bottom: 50px;
        display: inline-block !important;
    }
    .single-projects .work-top-section {
        padding: 0px !important;
    }
    .challenge-section .rightside,
    .challenge-section .lefside
    {
        width: 100%; 
    }
    .challenge-section h2 {
        margin: 0 0 45px 0;
    }
    .iframe-wrapper.landscape {
        padding-top: 60.35%;
    }
    .browse-more-section ul.project-list li {
        width: 100%;
    }
    .browse-more-section ul.project-list li .project-img {
        width: 100%;
        height: inherit;
        overflow: auto;
        position: relative;
    }
    .browse-more-section ul.project-list li .project-img img {
        position: relative;
    }
    .browse-more-section h2 {
        margin: 200px 0 65px 0;
    }
    body.white-page .contact-info .d-flex {
        border-bottom: none;
    }
    .cursor {display: none !important;}
}