greenwhale/app/assets/scss/media.scss

@media(max-width: 1280px){
  .header--wrap{
    .header--container{
      padding: 0 20px;
    }
  }
  main{
    .main--visual--wrap{
      .main--swiper--wrap{
        .main--swiper{
          .visual--img{
            .txt--wrap{
              h2{
                font-size: 40px;
              }
            }
            .img--wrap{
              img{
                height: 80vh;
              }
            }
          }
        }
      }
    }
    .main--content--wrap{
      .swiper--container{
        .title--wrap{
          >h2{
            font-size: 30px;
          }
        }
      }
      .main--container{
        padding-left: 20px!important;
        padding-right: 20px!important;
        .title--wrap{
          >h2{
            font-size: 30px;
          }
        }
        .content--wrap{
          .img--card--wrap{
            gap: 16px;
            .card{
              width: 33%;
            }
          }
          .square--card--wrap{
            gap: 16px;
            .card{
              width: calc((100% - 32px) / 3);
              dt{
                font-size: 20px;
              }
            }
          }
          .number--card--wrap{
            .card{
              padding: 0;
              .card--title{
                .number--wrap{
                  .number{
                    font-size: 50px;
                  }
                }
              }
            }
          }
        }
      }
    }
    section{
      .sub--container{
        &.type3{
          padding: 100px 20px 120px;
        }
        .partners--wrap{
          gap: 12px;
          .partners{
            width: calc((100% - 36px) / 4);
          }
        }
      }
    }
  }
  .footer--wrap{
    .footer--container{
      padding: 40px 20px 60px;
    }
  }
}

@media(max-width: 1060px){
  #top--visual{
    height: 300px;
    .inner--content{
      max-height: 300px;
      min-height: 300px;
      >h1{
        font-size: 36px;
      }
    }
  }
  .header--wrap{
    .header--container{
      height: 60px;
      .logo--wrap{
        width: 123px;
        height: 32px;
      }
      .menu--wrap{
        display: none;
      }
      .lang--wrap{
        display: none;
      }
      .ham--wrap{
        display: block;
      }
    }
  }
  main{
    section{
      &.mission--section{
        .title--wrap{
          .mission--title{
            font-size: 30px;
          }
          .mission--desc{
            font-size: 20px;
          }
        }
      }
      &.notice--section{
        .sub--container{
          .title--wrap{
            .title{
              font-size: 36px;
            }
          }
        }
      }
      .sub--container{
        padding-left: 20px!important;
        padding-right: 20px!important;
        .title--wrap{
          .logo--wrap{
            img{
              width: 146px;
            }
          }
          .title{
            font-size: 30px;
          }
          .sub--title{
            font-size: 20px;
          }
        }
        .vision--wrap{
          >p{
            font-size: 30px;
          }
        }
        .values--card--wrap{
          .card{
            dt{
              font-size: 20px;
            }
          }
        }
        .history--desc--wrap{
          .history--desc{
            &.left--type{
              padding-right: 0;
            }
            &.left--type2{
              padding-right: 0;
            }
            &.right--type{
              padding-left: 0;
            }
            .desc--wrap{
              >p{
                font-size: 18px!important;
              }
            }
            .desc--box--wrap{
              .desc--wrap{
                >div{
                  font-size: 20px;
                }
              }
            }
          }
        }
        .history--graph--wrap{
          .txt--wrap{
            width: 35%;
            min-width: 200px;
            font-size: 30px;
          }
          .graph--wrap{
            width: 65%;

          }
        }
        .catalog--wrap{
          gap: 40px;
          .catalog{
            gap: 40px;
            .img--wrap{
              width: 50%;
              min-width: 0;
            }
            .download--wrap{
              width: 50%;
              gap: 18px;
              >p{
                font-size: 24px;
              }
            }
          }
        }
        .materials--wrap{
          .materials--box{
            gap: 40px;
            .img--wrap{
              width: 40%;
              min-width: 0;
              img{
                width: 100%;
                height: 100%;
                object-fit: cover;
              }
            }
            .desc--wrap{
              width: 60%;
              gap: 12px;
              >h4{
                font-size: 24px;
              }
              >h5{
                font-size: 18px;
              }
              >ul{
                >li{
                  font-size: 15px;
                }
              }
            }
          }
        }
        .life--cycle--wrap{
          gap: 16px;
          .cycle{
            gap: 16px;
            .img--wrap{
              .txt{
                padding: 16px;
                span{
                  font-size: 16px;
                }
                p{
                  font-size: 16px;
                }
              }
            }
          }
        }
        .patents--wrap{
          .patents--list{
            column-gap: 16px;
            .patents{
              gap: 12px;
              width: calc((100% - 48px) / 4);
              .img--wrap{
                height: 300px;
              }
            }
          }
        }
        .news--wrap{
          >h3{
            font-size: 24px;
          }
          .news--list{
            .news{
              gap: 20px;
              .news--title--wrap{
                h4{
                  font-size: 18px;
                }
                span{
                  font-size: 15px;
                }
              }
            }
          }
        }
        .sns--wrap{
          >h3{
            font-size: 24px;
          }
          .sns--list{
            gap: 16px;
            .sns{
              width: calc((100% - 48px) / 4);
              .txt--wrap{
                >h4{
                  font-size: 16px;
                }
              }
              &:hover{
                .txt--wrap{
                  min-height: 110px;
                }
              }
            }
          }
        }
        .notice--wrap{
          .notice--list{
            .notice{
              gap: 40px;
              padding: 20px;
              h4{
                font-size: 18px;
                width: calc(100% - 180px);
              }
              .news--index{
                font-size: 15px;
              }
              .news--date{
                font-size: 15px;
              }
            }
          }
        }
        .faq--wrap{
          .border-default{
            .flex{
              >button{
                padding: 20px;
                .text-start{
                  font-size: 18px;
                  &::before{
                    font-size: 20px;
                  }
                }
              }
            }
            .overflow-hidden{
              padding: 20px 60px 20px 20px;
              .text-sm{
                font-size: 16px;
                &::before{
                  font-size: 20px;
                }
              }
            }
          }
        }
        .location--wrap{
          h4{
            font-size: 24px;
          }
          .map{
            font-size: 15px;
          }
          .call{
            font-size: 15px;
          }
          .location--map{
            height: 300px;
          }
        }
        .view--wrap {
          .view--title{
            >h3{
              font-size: 28px;
            }
          }
          .link--wrap{
            .link{
              >h5{
                width: calc(100% - 200px);
              }
            }
          }
        }
      }
    }
  }
  #out--container{
    .out--container{
      padding: 0 20px;
      .m--title{
        font-size: 36px;
      }
      .form--contents--wrap{
        .form--contents{
          h3{
            &.privacy--title{
              font-size: 20px;
            }
          }
        }
      }
    }
  }
  .footer--wrap{
    .footer--container{
      .footer--top{
        .menu--wrap{
          display: none;
        }
      }
      .footer--bot{
        margin-top: 20px;
        .info--list{
          row-gap: 4px;
          li{
            font-size: 13px;
            &:nth-of-type(1), &:nth-of-type(2){
              width: 100%;
            }
          }
          .bar{
            display: none;
            &.mobile{
              display: inline-block;
            }
          }
        }
        .copyright{
          flex-direction: column;
          align-items: start;
          span{
            font-size: 13px;
          }
          a{
            font-size: 13px;
          }
          .bar{
            display: none;
          }
        }
      }
    }
  }
}

@media(max-width: 768px){
  br{
    &.mobile{
      display: block!important;
    }
  }

  #top--visual {
    .inner--content {
      >h1 {
        font-size: 24px;
      }
      nav {
        >ul{
          >li{
            margin-right: 41px;
            padding: 20px 0;
            &::after{
              right: -21px;
            }
            a{
              font-size: 13px;
            }
          }
        }
      }
    }
  }

  main {
    .main--visual--wrap{
      .main--swiper--wrap{
        .main--swiper{
          .visual--img{
            .txt--wrap{
              h2{
                font-size: 32px;
              }
            }
            .img--wrap{
              img{
                height: 520px;
              }
            }
          }
        }
        .swiper--control--wrap{
          .pagination--wrap{
            .current{
              font-size: 13px;
            }
            .total{
              font-size: 13px;
            }
          }
          .swiper--btn--wrap{
            .swiper--btn--prev{
              display: none;
            }
            .swiper--btn--next{
              display: none;
            }
          }
        }
      }
    }
    .main--content--wrap{
      .main--container{
        padding: 50px 20px;
        .title--wrap{
          .green--title{
            font-size: 16px;
          }
          .sub--title{
            font-size: 16px;
          }
          >h2{
            font-size: 22px;
          }
        }
        .content--wrap{
          .img--card--wrap{
            gap: 12px;
            flex-direction: column;
            .card{
              width: 100%;
            }
          }
          .square--card--wrap{
            gap: 12px;
            .card{
              width: 100%;
              padding: 16px 20px;
              min-height: 120px;
              dt{
                font-size: 18px;
              }
              dd{
                font-size: 14px;
              }
            }
          }
          .number--card--wrap{
            gap: 40px;
            flex-direction: column;
            .card{
              width: 100%;
              gap: 20px;
              .ico{
                width: 40px;
                height: 40px;
                background-size: 100%;
              }
              .card--title{
                gap: 4px;
                .circle{
                  font-size: 14px;
                  padding: 3px 8px;
                }
                .number--wrap{
                  .number{
                    font-size: 40px;
                  }
                  .percent{
                    font-size: 40px;
                  }
                }
                .sub--txt{
                  font-size: 16px;
                }
              }
              .card--desc{
                li{
                  .nation{
                    font-size: 13px;
                    line-height: 1.8;
                  }
                }
              }
            }
          }
          .news--card--wrap{
            flex-direction: column;
            .news{
              width: 100%;
              gap: 12px;
              padding-top: 12px;
              .news--title{
                font-size: 18px;
              }
              .news--cont{
                font-size: 14px;
              }
              .news--date{
                font-size: 14px;
              }
            }
          }
        }
      }
      .swiper--container{
        padding: 50px 0;
        .title--wrap{
          .green--title {
            font-size: 16px;
          }
        
          .sub--title {
            font-size: 16px;
          }
        
          >h2 {
            font-size: 22px;
            padding: 0 20px;
          }
        }
        .item--swiper--wrap{
          .item--swiper{
            .item--img{
              gap: 8px;
            }
          }
        }
        .marquee--wrap{
          .marquee{
            gap: 20px;
            .logo--wrap{
              width: 140px;
              height: 84px;
            }
          }
        }
      }
      .black--btn--wrap{
        .black--btn{
          width: 108px;
          height: 40px;
          line-height: 40px;
          font-size: 14px;
        }
      }
    }
    section {
      &.map--section{
        padding: 0;
      }
      &.vision--section{
        background-attachment: scroll;
        .sub--container{
          padding: 50px 0 77px;
        }
      }
      &.mission--section {
        gap: 40px;
        padding: 50px 20px 0;
        .title--wrap {
          flex-direction: column;
          align-items: center;
          gap: 16px;
          text-align: center;
          .mission--title {
            font-size: 22px;
          }

          .mission--desc {
            font-size: 18px;
          }
        }
        .mission--img--wrap{
          gap: 8px;
          margin-left: 0;
          flex-wrap: wrap;
          width: 100%;
          .img--wrap{
            width: calc(50% - 4px);
          }
        }
      }

      &.notice--section {
        .sub--container {
          .title--wrap {
            .title {
              font-size: 24px;
            }
          }
        }
      }
      &.values--section{
        .sub--container{
          padding: 50px 0;
        }
      }

      .sub--container {
        padding: 50px 20px;

        &.type2{
          padding: 50px 20px 60px;
        }
        &.type3{
          padding: 50px 20px 60px;
        }
        &.type4{
          padding: 80px 20px 60px;
        }

        .pagination--wrap{
          margin-top: 30px;
          >button{
            width: 24px;
            height: 24px;
            background-position: center;
            background-size: 100%;
          }
          .numbs{
            button{
              font-size: 14px;
            }
          }
        }

        .tab--wrap{
          gap: 8px;
          margin: 28px 0 40px;
          a{
            padding: 11px 24px;
            font-size: 14px;
          }
        }

        .title--wrap {
          .logo--wrap {
            margin-bottom: 28px;
          }

          .title {
            font-size: 22px;
          }

          .sub--title {
            margin-top: 20px;
            font-size: 16px;
          }

          .sub--title2{
            font-size: 16px;
          }
        }

        .vision--wrap {
          gap: 16px;
          >span{
            font-size: 16px;
          }
          >p {
            font-size: 22px;
          }
        }

        .product--img--wrap{
          &.web{
            display: none;
          }
          &.mobile{
            display: flex;
          }
          gap: 12px;
          .img--top{
            gap: 12px;
            flex-direction: column;
            width: 100%;
            img{
              width: 100%;
            }
          }
          .img--bot{
            gap: 12px;
            flex-direction: column;
            width: 100%;
            img{
              width: 100%;
            }
          }
        }

        .values--card--wrap {
          flex-direction: column;
          gap: 12px;
          .card {
            width: 100%;
            padding: 20px;
            min-height: 172px;
            .ico{
              width: 36px;
              height: 36px;
              margin-bottom: 12px;
              background-size: 100%;
            }
            dt {
              font-size: 18px;
              margin-bottom: 4px;
            }
            dd{
              font-size: 14px;
            }
          }
        }

        .history--desc--wrap {
          margin-top: 40px;
          .history--desc {
            flex-direction: column;
            margin-bottom: 40px;
            gap: 20px;
            &.right--type{
              flex-direction: column-reverse;
            }
            .desc--box--wrap{
              flex-direction: column;
              gap: 20px;
              .desc--wrap{
                width: 100%;
              }
            }

            .img--wrap{
              min-width: 0!important;
              width: 100%;
              img{
                width: 100%;
              }
            }

            .desc--wrap {
              gap: 16px;
              >p {
                font-size: 16px !important;
              }
            }

            .desc--box--wrap {
              .desc--wrap {
                >div {
                  font-size: 18px;
                }
              }
            }
          }
        }

        .history--graph--wrap {
          flex-direction: column;
          gap: 40px;
          .txt--wrap {
            width: 100%;
            text-align: center;
            min-width: 100%;
            font-size: 22px;
          }

          .graph--wrap {
            width: 100%;
            .graph--box{
              gap: 20px;
              .deco--box{
                .dot{
                  top: 9px;
                }
              }
              .history--box{
                padding-bottom: 40px;
                width: calc(100% - 27px);
                gap: 24px;
                >ul{
                  gap: 0px;
                  >li{
                    gap: 0;
                    margin-top: 24px;
                    &:first-child{
                      margin-top: 0;
                    }
                    >div{
                      flex-direction: column;
                      gap: 8px;
                      >span{
                      }
                      >p{
                        width: 100%;
                      }
                    }
                  }
                }
                .year{
                  font-size: 20px;
                }
              }
            }
          }
        }

        .partners--wrap{
          gap: 8px;
          margin-top: 40px;
          .partners{
            width: calc(50% - 4px);
          }
        }

        .catalog--wrap {
          margin-top: 40px;
          .catalog {
            gap: 28px;
            flex-direction: column;

            .img--wrap {
              width: 100%;
              img{
                width: 100%;
              }
            }

            .download--wrap {
              width: 100%;

              >p {
                font-size: 20px;
              }
            }
          }
        }

        .materials--wrap {
          gap: 40px;
          .materials--box {
            gap: 20px;
            flex-direction: column;

            &.reverse{
              flex-direction: column-reverse;
            }

            .img--wrap {
              width: 100%;
              min-width: 0;
            }

            .desc--wrap {
              width: 100%;

              >h4 {
                font-size: 20px;
              }

              >h5 {
                font-size: 16px;
              }

              >ul {
                >li {
                  font-size: 14px;
                }
              }
            }
          }
        }

        .life--cycle--wrap {
          margin-top: 40px;
          .mobile--cycle{
            display: flex;
            flex-direction: column;
            gap: 12px;
            .img--wrap {
              width: 100%;
              position: relative;
              img{
                width: 100%;
              }
              .txt {
                position: absolute;
                color: #fff;
                display: flex;
                flex-direction: column;
                gap: 4px;
                bottom: 0;
                left: 0;
                width: 100%;
                padding: 16px;
                span {
                  font-size: 16px;
                  font-weight: 800;
                }
  
                p {
                  font-weight: 700;
                  font-size: 16px;
                }
              }
            }
          }
          .cycle {
            display: none;
          }
        }

        .patents--wrap {
          .patents--list {
            .patents {
              h4{
                font-size: 14px;
              }
              .img--wrap {
                height: 210px;
              }
            }
          }
        }

        .news--wrap {
          >h3{
            font-size: 20px;
            margin-bottom: 12px;
          }
          margin-top: 40px;
          .news--list {
            .news {
              gap: 20px;

              .news--title--wrap {
                justify-content: space-between;
                h4 {
                  font-size: 16px;
                }

                span {
                  font-size: 14px;
                }
              }
              .news--thumb--wrap{
                width: 80px;
                height: 80px;
                min-width: 80px;
              }
            }
          }
        }

        .sns--wrap {
          margin-top: 40px;
          >h3{
            margin-bottom: 12px;
            font-size: 20px;
          }
          .sns--list {
            gap: 12px;

            .sns {
              width: calc((100% - 36px) / 4);

              .txt--wrap {
                padding: 12px;
                >h4 {
                  font-size: 14px;
                }
              }

              &:hover {
                .txt--wrap {
                  min-height: 100px;
                }
              }
            }
          }
        }

        .search--wrap{
          margin: 32px 0 20px;
          >button{
            width: 108px;
            padding-left: 12px;
            padding-right: 40px;
            font-size: 15px;
          }
          >div{
            &.inline-flex{
              width: calc(100% - 116px);
              input{
                width: 100%;
                font-size: 15px;
                padding-left: 12px;
                padding-right: 40px;
                &::placeholder{
                  font-size: 15px;
                }
              }
            }
          }
        }

        .notice--wrap {
          .notice--list {
            .notice {
              gap: 12px;
              flex-direction: column;
              padding: 12px 0;
              align-items: start;
              h4 {
                font-size: 16px;
                width: 100%;
              }

              .news--index {
                display: none;
              }

              .news--date {
                font-size: 14px;
              }
            }
          }
        }

        .faq--wrap {
          margin-top: 40px;
          .border-default {
            .flex {
              >button {
                padding: 20px 8px;

                .iconify{
                  width: 24px;
                  height: 24px;
                  background-size: 100%;
                }

                .text-start {
                  font-size: 16px;
                  padding-left: 28px;

                  &::before {
                    font-size: 18px;
                  }
                }
              }
            }

            .overflow-hidden {
              padding: 20px 40px 20px 8px;

              .text-sm {
                font-size: 14px;
                padding-left: 28px;
                &::before {
                  font-size: 18px;
                }
              }
            }
          }
        }

        .location--wrap {
          margin-bottom: 40px;
          h4 {
            font-size: 20px;
            margin-bottom: 8px;
          }

          .map {
            font-size: 14px;
            .ico{
              width: 16px;
              height: 16px;
              background-size: 100%;
            }
          }

          .call {
            font-size: 14px;
            margin-top: 8px;
            .ico {
              width: 16px;
              background-size: 100%;
              height: 16px;
            }
          }

          .location--map {
            height: 200px;
            margin-top: 20px;
          }
        }

        .view--wrap {
          .view--title {
            padding-bottom: 28px;
            >h3 {
              font-size: 24px;
              margin-bottom: 12px;
            }
            .view--info{
              flex-wrap: wrap;
              row-gap: 4px;
              .mobile{
                display: none;
              }
              .bar{
                margin: 0 8px;
              }
              >p{
                font-size: 14px;
                &:first-child{
                  width: 100%;
                }
              }
            }
          }
          .view--cont{
            p{
              font-size: 16px;
            }
          }

          .view--cont{
            margin-bottom: 28px;
            padding: 28px 0;
          }
        
          .link--wrap {
            display: none;
          }
          .btn--wrap {
            >a {
              font-size: 14px;
              width: 108px;
              height: 40px;
            }
          }
        }
      }
    }
  }

  #out--container {
    padding-top: 50px;
    padding-bottom: 60px;
    .out--container {
      .m--title {
        font-size: 24px;
        margin-bottom: 30px;
      }

      .form--contents--wrap {
        margin-top: 0;
        padding-top: 28px;
        gap: 20px;
        .contact-form{
          gap: 28px;
        }
        .form--contents {
          margin-bottom: 0;
          input[type="text"], input[type="email"]{
            font-size: 15px;
          }
          &.half--cont{
            width: 100%;
            max-width: 100%;
          }
          h3 {
            font-size: 15px;
            &.privacy--title {
              margin-bottom: 16px!important;
            }
          }
          .qna--radio--group{
            fieldset{
              >div{
                >div{
                  &:nth-of-type(2){
                    label{
                      font-size: 15px;
                    }
                  }
                }
              }
            }
          }
        }
      }
      .tel-group{
        button{
          padding-left: 12px;
          font-size: 15px;
        }
      }
      .note-placeholder{
        font-size: 15px;
      }
      .privacy-box{
        .privacy-content{
          padding: 16px 24px 16px 16px;
          height: 240px;
          font-size: 14px;
          margin-bottom: 16px;
        }
        .agree-check{
          flex-direction: column;
          gap: 12px;
          align-items: start;
        }
      }
    }
  }
}

@media(max-width: 540px){
  main{
    section{
      .sub--container{
        .tab--wrap{
          &.patents{
            width: calc(100% + 20px);
            justify-content: start;
            overflow-x: auto;
          }
        }
        .patents--wrap{
          .patents--list{
            .patents{
              width: calc(50% - 8px);
            }
          }
        }
        .sns--wrap{
          .sns--list{
            width: calc(100% + 20px);
            overflow-x: auto;
            .sns{
              min-width: 128px;
              width: 128px;
            }
          }
        }
      }
    }
  }
}