greenwhale/app/assets/scss/media.scss

@media(max-width: 1280px){
  .header--wrap{
    .header--container{
      padding: 0 20px;
    }
  }
  main{
    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{
            .patents{
              gap: 12px;
              .img--wrap{
                height: 300px;
              }
            }
          }
        }
        .news--wrap{
          .news--list{
            .news{
              gap: 20px;
              .news--title--wrap{
                h4{
                  font-size: 18px;
                }
                span{
                  font-size: 15px;
                }
              }
            }
          }
        }
        .sns--wrap{
          .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;
          }
        }
      }
    }
  }
  #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){
  #top--visual {
    .inner--content {
      >h1 {
        font-size: 24px;
      }
      nav {
        >ul{
          >li{
            a{
              font-size: 13px;
            }
          }
        }
      }
    }
  }

  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 {
            .patents {
              gap: 12px;

              .img--wrap {
                height: 300px;
              }
            }
          }
        }

        .news--wrap {
          .news--list {
            .news {
              gap: 20px;

              .news--title--wrap {
                h4 {
                  font-size: 18px;
                }

                span {
                  font-size: 15px;
                }
              }
            }
          }
        }

        .sns--wrap {
          .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;
          }
        }
      }
    }
  }

  #out--container {
    .out--container {
      .m--title {
        font-size: 36px;
      }

      .form--contents--wrap {
        .form--contents {
          h3 {
            &.privacy--title {
              font-size: 20px;
            }
          }
        }
      }
    }
  }
}