mjlogistics/assets/scss/media.scss

@media(max-width: 1800px){
  .container{
    .image--section{
      .section--container{
        .contact--wrap{
          .contact--form{
            padding: 40px 50px;
            .contact--tit{
              h3{
                font-size: 28px;
                margin-bottom: 10px;
              }
            }
            .contact--cont{
              gap: 20px;
              height: calc(100% - 100px);
              .input--wrap{
                gap: 10px;
                select{
                  padding: 15px;
                }
                input{
                  padding: 15px;
                }
                textarea{
                  padding: 15px;
                }
              }
            }
          }
        }
      }
    }
  }
}

@media(max-width: 1600px){
  .header--wrap{
    .header--inner{
      padding: 0 20px;
      .header--nav{
        >ul{
          >li{
            >a{
              padding: 30px 50px;
            }
          }
        }
      }
    }
  }
  .container{
    .image--section {
      .main--swiper {
        .swiper-slide {
          .txt--wrap{
            padding: 0 20px;
          }
        }
        .main--swiper--tab{
          .tab--wrap{
            padding: 50px 20px 30px;
            .tab--inner{
              dt{
                font-size: 16px;
              }
            }
          }
        }
      }
      .section--container{
        .text--wrap{
          padding: 0 20px;
        }
        .contact--wrap{
          padding: 0 20px;
          .contact--form{
            padding: 40px;
          }
          .location--group{
            width: 55%;
          }
          .contact--form{
            width: calc(45% - 30px);
          }
        }
      }
    }
  }
  main{
    .sub--visual--wrap{
      .visual--txt--wrap{
        bottom: -7px;
        padding: 0 20px;
        h2{
          font-size: 72px;
        }
      }
    }
    .sub--menu--wrap{
      padding: 80px 20px;
      p{
        font-size: 14px;
      }
    }
    .sub--container{
      padding: 0 20px;
      .sub--title--wrap{
        .sub--title{
          &.type--2{
            font-size: 36px;
          }
        }
      }
      .sub--cont--wrap{
        margin-bottom: 80px;
        .sub--point{
          margin-top: 80px;
        }
        .sub--desc{
          br{
            display: none;
          }
        }
      }
      .org--wrap{
        .org--cont{
          .org--mid{
            .org--group--box{
              width: 100%;
              margin-bottom: 20px;
            }
            .org--group{
              &:nth-of-type(2){
                margin-left: 20px;
              }
            }
            .org--group{
              .org--line{
                &.none--circle{
                  &::before{
                    display: block;
                  }
                  &::after{
                    display: block;
                    left: -12px;
                  }
                }
              }
            }
            .org--line{
              &::before{
                left: 0;
                right: auto;
              }
              &::after{
                left: -12px;
                right: auto;
              }
              &.type--1{
                display: none;
              }
              &.bottom--type{
                display: none;
              }
            }
          }
        }
      }
    }
    .quick--menu--wrap{
      right: 20px;
    }
  }
}

@media(max-width: 1264px){
  .container{
    .image--section{
      .section--container{
        .map--wrap{
          justify-content: center;
          .map--img{
            img{
              width: auto;
            }
          }
        }
      }
    }
  }
}

@media(max-width: 1240px){
  .header--wrap{
    // &:hover{
    //   background-color: #101014;
    //   .header--inner{
    //     .header--logo{
    //       background-image: url(../img/logo--default.svg)!important;
    //     }
    //   }
    // }
    .header--inner{
      height: 80px;
      .header--nav{
        display: none;
      }
      .header--mob--btn{
        display: block;
      }
      .header--lang--btn{
        display: none;
      }
      .header--mob--lang--btn{
        display: block;
      }
    }
  }
  .footer--wrap{
    position: static;
    padding: 40px 20px;
    font-size: 13px;
  }
  .container{
    .image--section{
      height: auto;
      position: static;
      &.global--section{
        .section--container{
          display: flex;
          flex-direction: column-reverse;
        }
      }
      &.contact--section{
        background-image: url(../img/main--contact--mo.png);
        background-position: bottom;
        background-size: 100%;
        background-repeat: no-repeat;
        background-color: #15161a;
      }
      .main--swiper{
        .swiper-slide{
          .txt--wrap{
            >h2{
              font-size: 72px;
            }
          }
        }
        .main--swiper--tab{
          display: none;
        }
        .swiper--btn--wrap{
          display: block;
          .swiper-button-next,
          .swiper-button-prev{
            display: block;
          } 
        }
        .swiper--pag--wrap{
          display: block;
        }
      }
      .section--container{
        .map--wrap{
          position: static;
          padding-bottom: 80px;
          .map--img{
            width: 100%;
            display: flex;
            justify-content: center;
          }
          .map--dot--box{
            display: flex;
            align-items: center;
            .map--dots{
              padding: 20px;
              height: auto;
              display: flex;
              justify-content: center;
              align-items: center;
              flex-wrap: wrap;
              gap: 25px;
              .dot{
                position: static;
              }
            }
          }
        }
        .text--wrap{
          padding-top: 100px;
          padding-bottom: 70px;
          position: static;
          >h3{
            color: #fff;
            font-size: 40px;
            margin-bottom: 25px;
          }
          >h4{
            margin-bottom: 30px;
          }
          >p{
            margin-bottom: 50px;
          }
        }
        .contact--wrap{
          padding: 100px 20px 80px;
          flex-direction: column;
          align-items: start;
          color: #fff;
          .location--group{
            display: none;
          }
          .contact--tit--mo{
            word-break: keep-all;
            margin-bottom: 50px;
            display: block;
            >h3{
              font-size: 40px;
              margin-bottom: 25px;
              font-weight: 800;
              text-transform: uppercase;
              letter-spacing: -0.8px;
            }
            p{
              font-weight: 400;
              font-size: 17px;
              letter-spacing: -0.34px;
            }
          }
          .contact--form{
            width: 100%;
            padding: 35px 25px;
            margin-bottom: 30px;
            height: auto;
            .contact--tit{
              display: none;
            }
            .contact--cont{
              height: auto;
              gap: 35px;
              .input--wrap{
                gap: 18px;
                select{
                  padding: 20px;
                }
                input{
                  padding: 20px;
                }
                textarea{
                  padding: 20px;
                }
              }
            }
          }
          .contact--btn--mo{
            display: block;
            width: 100%;
            button{
              cursor: pointer;
              font-size: 18px;
              color: #fff;
              font-weight: 500;
              justify-content: center;
              align-items: center;
              display: flex;
              gap: 15px;
              border: none;
              border-radius: 15px;
              background-color: #EC3237;
              width: 100%;
              padding: 30px;
              .ico{
                width: 16px;
                height: 16px;
                background-repeat: no-repeat;
                display: block;
                background-image: url(../img/ico--contact.svg);
                background-position: center;
              }
            }
          }
        }
      }
    }
  }
  main{
    .sub--visual--wrap{
      .visual--wrap{
        height: 500px;
        img{
          height: 100%;
          object-fit: cover;
        }
      }
      .visual--txt--wrap{
        bottom: -9px;
        h2{
          font-size: 60px;
        }
      }
    }
    .sub--container{
      .sub--cont--wrap{
        .sub--desc{
          font-size: 15px;
        }
        .sub--point{
          .point--box{
            width: calc((100% - 60px) / 4);
            padding: 30px;
            .ico{
              margin-bottom: 20px;
            }
            h5{
              font-size: 18px;
              margin-bottom: 15px;
            }
            p{
              font-size: 14px;
            }
          }
        }
        .map--wrap{
          height: 400px;
        }
        .map--desc{
          margin-top: 40px;
          h4{
            font-size: 24px;
            margin-bottom: 30px;
          }
          ul{
            gap: 20px;
            li{
              font-size: 15px;
            }
          }
        }
      }
      .grt--wrap{
        margin-bottom: 80px;
        .grt--part{
          align-items: flex-start;
          .grt--title{
            .grt--year{
              width: 200px;
              .grt--txt{
                left: calc(100% + 20px);
                right: auto;;
              }
            }
            h4{
              font-size: 20px;
              text-align: center;
            }
          }
          .grt--desc{
            padding-left: 97px;
            width: 100%;
          }
        }
      }
      .org--wrap{
        .org--cont{
          .org--mid{
            .org--group{
              padding-bottom: 50px;
              width: calc(50% - 10px);
              padding-right: 0;
              &:nth-of-type(4){
                margin-left: 20px;
              }
            }
          }
        }
      }
    }
    .quick--menu--wrap{
      width: 60px;
      gap: 10px;
      >div{
        width: 60px;
        height: 60px;
        background-size: 26px 26px;
        background-color: rgba(255, 255, 255, 0.70);
        &.quick--contact{
          .contact--bubble{
            top: 5px;
          }
        }
        &.quick--global{
          .global--bubble{
            &::after{
              width: 60px;
              height: 60px;
            }
          }
        }
      }
      >button{
        margin-top: 10px;
        background-size: 20px 20px;
        width: 60px;
        height: 60px;
      }
    }
  }
}

@media(max-width: 1000px){
  main{
    .sub--container{
      .sub--title--wrap{
        .sub--title{
          font-size: 40px;
          &.type--2{
            font-size: 30px;
          }
        }
      }
      .sub--cont--wrap{
        .sub--point{
          margin-top: 50px;
          row-gap: 20px;
          .point--box{
            padding: 20px;
            width: calc(50% - 10px);
          }
        }
      }
    }
  }
}

@media(max-width: 767px){
  .container{
    .image--section{
      .section--container{
        .contact--wrap{
          .contact--form{
            .contact--cont{
              .input--type2--wrap{
                flex-direction: column;
                .input--wrap{
                  width: 100%;
                }
              }
            }
          }
        }
      }
      .main--swiper{
        .swiper-slide{
          .txt--wrap{
            top: 50%;
            transform: translate(-50%, -50%);
            >span{
              font-size: 16px;
              margin-bottom: 20px;
            }
            >h2{
              font-size: 55px;
              margin-bottom: 35px;
            }
          }
        }
      }
    }
  }
  main{
    .sub--visual--wrap{
      .visual--wrap{
        .op--65{
          object-position: 65%;
        }
      }
      .visual--txt--wrap{
        h2{
          .mo{
            display: block;
          }
        }
      }
    }
    .sub--menu--wrap{
      padding: 40px 20px;
    }
    .sub--container{
      .sub--title--wrap{
        flex-direction: column;
        align-items: center;
        margin-bottom: 30px;
        .sub--title{
          &.type--2{
            font-size: 28px;
            letter-spacing: -0.32px;
          }
          &.web{
            display: none;
          }
          &.mo{
            display: inline-block;
            width: fit-content;
          }
        }
      }
      .sub--cont--wrap{
        .map--desc{
          h4{
            font-size: 20px;
          }
          ul{
            li{
              width: 100%!important;
              .ico{
                background-size: 14px 14px;
                width: 30px;
                height: 30px;
                min-width: 30px;
              }
            }
          }
        }
      }
      .grt--wrap{
        .grt--part{
          margin-bottom: 70px;
          &:last-child{
            margin-bottom: 0;
          }
          .grt--title{
            margin: 0 auto;
            padding-bottom: 60px;
            .grt--year{
              padding: 25px 30px;
              width: auto;
              .grt--txt{
                transform: translateX(-50%);
                left: 50%;
                top: auto;
                bottom: -36px;
                font-weight: 700;
                font-size: 16px;
              }
              .title--line{
                display: none;
              }
            }
          }
          .grt--desc{
            padding-left: 0;
            .desc{
              .desc--txt{
                padding-left: 0px;
                padding-bottom: 50px;
                gap: 35px;
                .desc--year{
                  font-size: 22px;
                }
                ul{
                  li{
                    flex-direction: column;
                    gap: 20px;
                    &.active{
                      .circle{
                        background-color: #EC3237;
                      }
                    }
                    .circle{
                      display: inline-block;
                      background-color: #ccc;
                      transition: all 0.3s;
                      width: 8px;
                      margin-right: 15px;
                      height: 8px;
                      border-radius: 50%;
                      vertical-align: 2px;
                    }
                    >p{
                      padding-left: 24px;
                    }
                  }
                }
              }
              .desc--line{
                display: none;
              }
            }
          }
        }
      }
      .org--wrap{
        padding-top: 50px;
        >h3{
          font-size: 30px;
          font-weight: 700;
          margin-bottom: 40px;
        }
        .org--cont{
          .org--top{
            .ceo--circle{
              min-width: 120px;
              width: 120px;
              height: 120px;
            }
            .ceo--line{
              &.bottom--type{
                left: 60px;
              }
            }
          }
          .org--mid{
            .org--group{
              padding-bottom: 30px;
              width: 100%;
              margin-left: 20px!important;
              .org--list{
                &.w--240{
                  li{
                    width: 100%;
                  }
                }
                li{
                  width: 100%;
                }
              }
            }
          }
          .org--group--box{
            .org--box{
              width: 100%;
            }
          }
        }
      }
    }
    .quick--menu--wrap{
      >div{
        &.quick--contact{
          .contact--bubble{
            font-size: 15px;
            font-weight: 300;
          }
        }
        &.quick--global{
          .global--bubble{
            position: fixed;
            bottom: 0;
            width: 100%;
            top: auto;
            left: 0;
            height: 50vh;
            border-radius: 40px;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            padding: 45px 35px;
            &::after{
              display: none;
            }
            .global--title{
              margin-bottom: 30px;
            }
            .global--list{
              height: calc(50vh - 145px);
              a{
                font-size: 15px;
                font-weight: 300;
              }
            }
          }
        }
      }
    }
  }
}

@media(max-width: 500px){
  .container{
    .image--section{
      .section--container{
        .map--wrap{
          .map--dot--box{
            .map--dots{
              gap: 15px;
              .dot{
                width: 150px;
                height: 150px;
              }
            }
          }
        }
      }
    }
  }
  main{
    .sub--menu--wrap{
      &.web{
        display: none;
      }
      &.mo{
        display: block;
      }
    }
    .sub--visual--wrap{
      .visual--txt--wrap{
        bottom: -7px;
        h2{
          font-size: 48px;
        }
      }
    }
    .sub--container{
      .sub--cont--wrap{
        .sub--point{
          .point--box{
            width: 100%;
            padding: 30px;
          }
        }
      }
      .org--wrap{
        .org--cont{
          .org--top{
            margin-bottom: 170px;
            .ceo--line{
              &.right--type{
                top: 180px;
                position: absolute;
                width: 90px;
                left: 60px;
              }
              &.bottom--type{
                height: 170px;
              }
            }
            .ceo--circle{
              &.type--2{
                left: 150px;
                top: 120px;
                position: absolute;
              }
              &.type--3{
                top: 120px;
                position: absolute;
                left: 270px;
              }
            }
          }
          .org--mid{
            .org--group--box{
              .org--box{
                height: auto;
                padding: 25px 25px;
              }
            }
          }
        }
      }
    }
  }
}

@media(max-width: 420px){
  main{
    .sub--container{
      .org--wrap{
        .org--cont{
          .org--top{
            margin-bottom: 150px;
            .ceo--circle{
              height: 100px;
              min-width: 100px;
              width: 100px;
              &.type--2{
                top: 100px;
                left: 140px;
              }
              &.type--3{
                top: 100px;
                left: 240px;
              }
            }
            .ceo--line{
              &.bottom--type{
                height: 150px;
                left: 50px;
              }
              &.right--type{
                left: 50px;
                top: 150px;
              }
            }
          }
        }
      }
    }
  }
}