@media(max-width: 1440px) {
    


    .header-nav {
        width: 100%;
        padding: 30px;
    }

    .mobile-menu-toggle {
        display: block;
    }

    .open-search {
        display: block;
        right: 130px;
        border: none;
        color: var(--wht);
        border-radius: 0;
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: space-around;
        cursor: pointer;
        font-size: 30px;

    }

    .m-search {
        opacity: 0;
    }

    .nav-btns a {
        font-size: 30px;
    }


    .navbar.active {
        display: flex;
        transition: 0.5s linear;
    }



    .navbar {
        display: none;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        background-color: var(--color);
        justify-content: space-around;
        position: absolute;
        top: 107px;
        left: -199px;
        width: 30%;
        z-index: 1100;
        padding: 20px 0px;
        height: 500px;
        font-size: 24px;
    }

    .close-btn {
        display: block;
        top: 0px;
        left: 320px;
        z-index: 1200;
    }


    .main-container {
        height: 917px;
        width: 600px;
    }

    .title {
        width: 70%;
        top: 310px;
    }

    .user-img-box {
        display: flex;
        flex-wrap: nowrap;
        gap: 0px;
    }

    .by-user-container {
        flex-wrap: wrap
    }

    .mens,
    .kids,
    .womens {
        width: 90%;

    }

    .mens-txt,
    .kids-txt,
    .womens-txt {
        font-size: 40px;
    }
    .our-impact {
        width: 100%;
        height: 2200px;
    }

    .impact-img1 {
        top: 290px;
        left: 40px;
    }

    .impt-img1-txt {
        top: 770px;
        left: 60px;
    }

    .impt-img2-txt {
        top: 683px;
        left: 340px;
    }

    .impact-img2 {
        top: 780px;
        left: 550px;
    }

    .with-us {
        position: relative;
    }

    .withus-pic {
        position: absolute;
        top: 220px;

    }

    .withus-pic1,
    .withus-pic2 {
        flex-wrap: wrap;
        flex-direction: column;
    }

    #top10-next {
        top: 285px;
        left: 1183px;
    }
    .hoka-massage {
        margin-top: 900px;
    }

    .footer1,
    .footer2,
    .footer3,
    .footer4,
    .footer5 {
        margin-right: 38px;
    }
    .footer-section {
        margin-bottom: 15px;
      }
      .footer1{
        display: flex;
        flex-wrap: wrap;
      }
      .f-txt1{
        margin-right: 30px;
      }
      .footer-pc{
        display: none;
      }
      .accordion-footer{
        display: block;

      }
      footer {
        height: 530px;
        width: 100%;
        display: flex;
        position: relative;
        justify-content: left;
        margin-top: 85px;
      }


    
}







@media(max-width: 768px) {
    body {
        overflow-x: hidden;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        font-size: 95%;
    }
    .inner {
        width: 100%;
      }
      
      .mobile-menu-toggle {
        display: block;
      }
    .navbar {
        width: 100vw;
    }

    .main-container {
        height: 917px;
        width: 400px;
        top: 260px;
        transform: rotate(90deg);

    }

    .title {
        width: 90%;
        left: -90px;
        top: 49%;
        text-align: center;
        transform: rotate(-90deg);
    }

    .main-txtbox h1 {
        font-size: 55px;
        left: 5%;
        top: 57%;
        transform: rotate(-90deg);
    }

    .main-txtbox p {
        font-size: 28px;
        right: 15%;
        top: 55%;
        text-align: center;
        transform: rotate(-90deg);
    }

    .main-button {
        width: 200px;
        height: 60px;
        font-size: 20px;
        position: absolute;
        left: 50%;
        top: 53%;
        color: var(--wht);
        transform: rotate(-90deg);
    }

    .category {
        padding-left: 30px;
        margin-top: 100px;
        margin-bottom: 100px;

        margin-left: 0;
    }

    .center-slider1 {
        margin-left: 0px;
    }

    #prev {
        left: 30px;
    }

    #next {
        left: 380px;
    }

    .slider-controls button {
        background: rgb(251, 97, 63, .8);

    }

    body .archive {
        margin-top: 0;
        margin-bottom: 100px;
        margin-left: 30px;
    }

    .archive-box img {
        width: 89%;
    }

    .detail {
        width: 440px;
        height: 90px;
        margin-right: 30px px;
        margin-top: -20px;
        margin-bottom: 30px;
    }

    .new-title {
        margin-left: 30px;

    }


    #new-prev {
        top: 285px;
        left: -270px;
    }

    #new-next {
        top: 285px;
        left: 90px;
    }

    .new-slider {
        left: -600px;
    }



    .by-user-container {
        width: 100%;
        height: 2100px;
        flex-wrap: wrap;
        align-items: center;

    }

    .new-title,
    .category-title {
        margin-left: -270px;
    }

    .user-img-box {
        width: 470px;
        display: flex;
        flex-wrap: wrap;
    }

    .mens,
    .kids,
    .womens {
        width: 470px;

    }

    .mens-txt {
        top: 40%;
        left: 39%;
    }

    .kids-txt {
        top: 45%;
        left: 42%;
    }

    .womens-txt {
        top: 45%;
        left: 32%;
    }

    .our-impact {
        width: 100%;
        height: 2630px;
    }

    .impact-title {
        left: 30px;
    }

    .impact-container::before {
        /*삼각형*/
        border-bottom: 1230px solid rgba(2, 119, 184, 0.05);
        border-left: 790px solid transparent;
        border-right: 750px solid transparent;
        top: 250px;
        right: -210px;
    }

    .impact-img1-1,
    .impact-img2-1 {
        width: 450px
    }

    .impact-img1 {

        top: 290px;
        left: 40px;
    }

    .impt-img1-txt {
        top: 750px;
        left: 10px;
    }

    .impact-img2 {

        top: 760px;
        left: 40px;
    }

    .impt-img2-txt {
        top: 420px;
        left: -260px;
    }


    .imp-txt1 {
        font-size: 16px;
        line-height: 22px;
        bottom: 360px;
        left: 50px;
    }

    .imp-txt2 {
        font-size: 16px;
        line-height: 22px;
        bottom: 46px;
        left: 475px;
    }

    .impact-img1 h2 {
        font-size: 30px;
        font-weight: 700;
        bottom: 410px;
        left: 46px;
    }

    .impact-bt1,
    .impact-bt2 {
        width: 102px;
        height: 48px;
        line-height: 48px;
    }

    .impact-bt1 {
        left: 50px;
        bottom: 460px;

    }

    .impact-bt2 {
        left: 550px;
        bottom: 106px;
    }

    .top10-slider {
        left: -2480px;
        width: 5500px;
    }

    #top10-prev {
        top: 285px;
        left: 30px;
    }

    #top10-next {
        top: 285px;
        left: 402px;
    }

    .withus-pic1,
    .withus-pic2 {
        flex-wrap: wrap;

    }

    .withus-pic img {
        margin: 0px;
        width: 230px;
    }

    .with-us-title {
        left: 30px;
    }

    .with-us-title p {
        font-size: 18px;

    }

    .hoka-massage {
        margin-top: 300px;
        height: 674px;
        position: relative;
    }

    .massage-box img {
        width: 118px;
    }

    .massage-box p {
        font-size: 18px;
        display: none;
    }

    .massage-logo {
        position: absolute;
        top: 420px;
        right: 0px;
        left: 0;

    }

    #massage-txtm {
        display: block;
        position: absolute;
        top: 500px;
        z-index: 100;
    }
    footer {
        height:100%;
        width: 100%;
        display: flex;
        position: relative;
        justify-content: flex-start;
        margin-top: 115px;
        
    }
    .footer1{
        margin-left: 30px;
    }

}