/**************************/
/* BELOW 1200px (Landscape Tablets) */
/**************************/

@media (max-width: 75em) {
    html {
        /* 9px / 16px  */
        font-size: 56.25%;
    }

    .main-nav-list {
        gap: 2rem;
        font-size: 2rem;
    }

    .logo-text {
        font-size: 1rem;
        padding-left: 1rem;
    }

    .value .content .inside{
        padding: 0 0;
    }

}

/**************************/
/* BELOW 944px (Tablets) */
/**************************/
@media (max-width: 59em) {
    html {
        /* 8px / 16px = 0.5 = 50% */
        font-size: 50%;
    }
    .header a img{
        animation: none;
    }
    /* MOBILE NAVIGATION */
    .btn-mobile-nav {
        display: block;
        z-index: 9999;
    }

    .main-nav {
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(10px);
        position: absolute;
        top: 0;
        right: 0;
        width: 40vw;
        height: 100vh;
        transform: translateX(100%);

        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.5s ease-in;

        /* Hide navigation */
        /* Allows NO transitions at all */
        /* display: none; */

        /* 1) Hide it visually */
        opacity: 0;

        /* 2) Make it unaccessible to mouse and keyboard */
        pointer-events: none;

        /* 3) Hide it from screen readers */
        visibility: hidden;
    }

    .nav-open .main-nav {
        opacity: 1;
        background-color: #222222;
        pointer-events: auto;
        visibility: visible;
        transform: translateX(0);
    }

    .nav-open .icon-mobile-nav[name="close-outline"] {
        display: block;
    }

    .nav-open .icon-mobile-nav[name="menu-outline"] {
        display: none;
    }

    .main-nav-list {
        flex-direction: column;
        gap: 4.8rem;
    }

    .main-nav-link:link,
    .main-nav-link:visited {
        font-size: 2rem;
    }

    .slogan .slogan-content {
        font-size: 3rem;
    }

    .about .about-content {
        flex-direction: column;
        text-align: left;
        height: 42rem;
        overflow: hidden;
    }

    .about .about-content .about-company {
        margin: 2rem 0;
        flex: 1;
        width: auto;
        height: auto;
    }

    .about .about-content h1 {
        text-align: center;
    }
    .about .about-content p{
        text-indent: 3.2rem;
    }

    /*    */
    .diagnosis{
        padding-left: 0;
        padding-right: 0;
    }
    .value {
        padding-left: 0;
        padding-right: 0;
    }

    .value .content .left,
    .value .content .middle,
    .value .content .right {
        width: 100%;
        margin-bottom: 3rem;
    }

    .solve,.pattern,.advantage {
        gap: 3rem;
        margin: 0 0;
        padding-left: 0;
        padding-right: 0;
        flex-direction:  column-reverse;
    }
    .solve .solve-content,.pattern .pattern-content,.advantage .advantage-content{
        width: 80%;
        margin: 0 auto;
    }
    .solve .solve-content h1,.pattern .pattern-content h1,.advantage .advantage-content h1{
        width: 100%;
        text-align: center;
    }




}


/**************************/
/* BELOW 704px (Smaller tablets) */
/**************************/
@media (max-width: 44em) {
    .about .about-content {
        height: 50rem;
    }

    .about .about-content .about-company {
        flex: 1;
        width: auto;
        height: auto;
    }

    .footer .copyright span {
        display: block;
        text-align: center;
    }

    .about .about-content {
        width: 60%;
        height: 45rem;
    }

    .value > .content {
        flex-direction: column;
        width: 60%;
    }
    .solve,.pattern,.advantage {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    .solve .solve-content,.pattern .pattern-content,.advantage .advantage-content{
        width: 100%;
    }
    .scene-inside .scene-item {
         margin: 1rem 1rem;
    }

    .process .process-inside {
        flex-direction: column;
        gap: 0;
        width: 90%;
    }
    .process .process-inside .process-item{
        margin: 1rem 0;
    }
    .process .download-example{
        margin-top: 5rem;
    }
    .footer .footer-wrap {
        width: 100%;
    }
    .footer-logo a {
        font-size: 2rem;
        justify-content: center;
    }
    .footer-logo a span {
        margin-left: 1rem;
    }
    .footer-content {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .footer-content .footer-item{
        width: 80%;
        margin: 1rem 0;
    }
    .footer-content .footer-item:nth-child(1){
        flex-basis: 100%;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }
    .footer-content .footer-item h2{
        flex-basis: 100%;
        text-align: center;
    }
    .footer-content .footer-item a{
        flex-basis: 50%;
        text-align: center;
    }
    .footer-content .footer-item a:nth-child(4){
        display: none;
    }
    .footer-content .footer-item:nth-child(2),.footer-content .footer-item:nth-child(3){
        flex-basis: 50%;
    }
    .footer-content .footer-item:nth-child(1),.footer-item:nth-child(2) {
        border-right: none;
    }
    .footer-content .footer-item:first-child h2,.footer-item:first-child a {
        /*align-self: center;*/
    }
    .foot-copyright a span{
        display: block;
        text-align: center;
        margin-top: 1rem;
    }

}

/**************************/
/* BELOW 544px (Phones) */
/**************************/
@media (max-width: 34em) {
    .logo-text {
        display: none;
    }

    .introduce .introduce_diagnosis {
        width: 80%;
    }

    .introduce .introduce-title {
        font-size: 2rem;
    }

    .slogan .slogan-content {
        font-size: 2rem;
    }

    .about .about-title {
        font-size: 2rem;
    }

    .about .about-content h1 {
        font-size: 2rem;
        text-align: center;
    }

    .about .about-content {
        width: 80%;
        height: 50rem;
    }

    .about .about-content .about-company {
        flex: 1;
        width: auto;
        height: auto;
    }

    .footer .copyright span:last-child {
        display: none;
    }

    .solve ,.pattern ,.advantage{
        width: 100%;
    }


    /* news */
    .news-container .news-list .news-item dl{
        flex-direction: column;
        height: 20rem;
    }
    .news-list .news-item dl dt {
        width: 100%;
        flex-direction: row-reverse;
        height: 5rem;
    }
    .news-list .news-item dl dt span {
        font-size: 2rem;
    }
    .news-list .news-item dl dt span:first-child:before{
        content: "-";
    }
    .pagination-link {
        padding: 0.5rem 1rem;
    }


    /* about */
    .about-container{

    }
    .about-container .about-content {
        width: 90%;

    }
    .about-container  .about-content  .about-company-name{
        font-size: 2rem;
    }
    .about-container .about-company-content{
        flex-direction: column;
        align-items: center;

    }

    .about-container .about-company-content img{
        position: relative;
        width: 50%;
        height: 50%;
    }

    .about-container .about-company-content span{
        font-size: 1.6rem;
    }


}