@charset "UTF-8";
/* CSS Document */

.sec1 {
  width: 100%;
  height: 375px;
  position: relative;
  background: url(../images/common/other-top.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.sec1__h1 {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3.6rem;
  font-weight: 700;
  color: #FFFFFF;
  width: 100%;
  text-align: center;
}

@media (max-width: 1024px) {
  .sec1__h1 {
    font-size: 2.8rem;
  }
}

@media (max-width: 600px) {
  .sec1__h1 {
    font-size: 2rem;
  }
}





.sec2 {
  margin: 150px auto;
}

@media (max-width: 1024px) {
  .sec2 {
    margin: 125px auto;
  }
}

@media (max-width: 600px) {
  .sec2 {
    margin: 100px auto;
  }
}

.sec2__text {
  font-size: 3.4rem;
  line-height: 2;
  font-weight: 700;
  text-align: center;
  margin-bottom: -50px;
}

.sec2__ul {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.sec2__ul__li {
  padding-top: 150px;
}

@media (max-width: 1400px) {
  .sec2__ul__li {
    width: 95%;
  }
}

.sec2__ul__li__top {
  display: flex;
  gap: 50px;
}

.sec2__ul__li__top__left {
  width: 47.5%;
}

.sec2__ul__li__top__left img {
  max-height: 500px;
  object-fit: cover;
  object-position: center;
}

.sec2__ul__li__top__right {
  width: 47.5%;
  max-width: 600px;
}

.sec2__ul__li__top__right__strong {
  display: block;
  font-size: 2.8rem;
  font-weight: 700;
  letter-spacing: 0.2rem;
}

.sec2__ul__li:nth-child(2) .sec2__ul__li__top__right__strong {
  margin-bottom: 20px;
}

.sec2__ul__li__top__right__h2 {
  width: 60%;
  margin-bottom: 40px;
}

.sec2__ul__li__top__right__p1 {
  font-size: 2.2rem;
  letter-spacing: 0.25rem;
  font-weight: 700;
  margin-bottom: 30px;
}

.sec2__ul__li__top__right__p2 {
  font-weight: 400;
  margin-bottom: 40px;
}

.sec2__ul__li__top__right__a {
  max-width: 450px;
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 50px;
  border-radius: 100px;
  transition: 0.4s;
  transition-timing-function: ease-out;
  background: linear-gradient(90deg, #0c72b5, #0288d1, #0c72b5) 0 / 200% 100%;
  color: #FFFFFF;
}

.sec2__ul__li__top__right__a:hover {
  background-position: 100% 0;
}

.sec2__ul__li__top__right__a span {
  width: 11px;
  height: 11px;
  border-right: solid 1.2px #FFFFFF;
  border-bottom: solid 1.2px #FFFFFF;
  transform: rotate(-45deg);
  transition: 0.4s;
  transition-timing-function: ease-out;
}

.sec2__ul__li__top__right__a:hover span {
  transform: rotate(-45deg) translate(7px, 7px);
}

.sec2__ul__li__bottom {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 30px;
  width: 90%;
  max-width: 1200px;
  margin: 40px auto 0;
  padding: 26px 5%;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.15);
}

.sec2__ul__li__bottom__h3 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.br {
  display: none;
}


@media (max-width: 1024px) {
  .sec2__text {
    font-size: 2.9rem;
    width: 90%;
    margin: 0 auto -35px;
  }

  .sec2__ul__li {
    padding-top: 125px;
  }

  .sec2__ul__li__top__left img {
    position: sticky;
    top: 100px;
    left: 0;
  }

  .sec2__ul__li__top__right__strong {
    font-size: 2.6rem;
  }

  .sec2__ul__li__top__right__p1 {
    font-size: 2rem;
  }

  .sec2__ul__li__top__right__a {
    width: 100%;
  }

  .sec2__ul {
    gap: 125px;
  }

  .sec2__ul__li__bottom {
    flex-direction: column;
  }
}

@media (max-width: 600px) {

  .br {
    display: block;
  }

  .sec2__text {
    font-size: 2.4rem;
    margin-bottom: -20px;
  }

  .sec2__ul__li {
    padding-top: 100px;
  }

  .sec2__ul__li__top__right__strong {
    font-size: 2.4rem;
  }

  .sec2__ul__li__top__right__p1 {
    font-size: 1.8rem;
  }

  .sec2__ul__li__top {
    flex-direction: column;
  }

  .sec2__ul {
    gap: 100px;
  }

  .sec2__ul__li {
    width: 90%;
    margin: 0 auto;
  }

  .sec2__ul__li__top__left {
    width: 100%;
  }

  .sec2__ul__li__top__right {
    width: 100%;
    max-width: none;
  }

  .sec2__ul__li__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}





.sec3 {
  padding: 150px 0 200px;
  background-image: url(../images/work/sec3/bg.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.sec3__wapper {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
}

.sec3__wapper__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  margin-bottom: 50px;
}

.sec3__wapper__top__img {
  width: 40%;
}

.sec3__wapper__top__h2 {
  font-weight: 700;
  font-size: 1.8rem;
  font-weight: 700;
}

.sec3__wapper__text {
  max-width: 900px;
  margin: 0 auto 100px;
  font-weight: 400;
}

.sec3__wapper__h3 {
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 50px;
}

.sec3__wapper__ul {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 50px;
}

.sec3__wapper__ul__li {
  width: 30%;
  padding: 30px 2.5%;
  background: #FFFFFF;
  border-radius: 10px;
}

.sec3__wapper__ul__li__h4 {
  text-align: center;
  margin-bottom: 20px;
}

.sec3__wapper__ul__li__img {
  margin-bottom: 20px;
}

.sec3__wapper__ul__li__img img {
  display: block;
  width: 80px;
  height: 80px;
  margin: 0 auto;
}

.sec3__wapper__a {
  max-width: 450px;
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 50px;
  border-radius: 100px;
  transition: 0.4s;
  transition-timing-function: ease-out;
  background: linear-gradient(90deg, #0c72b5, #0288d1, #0c72b5) 0 / 200% 100%;
  color: #FFFFFF;
  margin: 0 auto;
  font-weight: 700;
}

.sec3__wapper__a:hover {
  background-position: 100% 0;
}

.sec3__wapper__a span {
  width: 11px;
  height: 11px;
  border-right: solid 1.2px #FFFFFF;
  border-bottom: solid 1.2px #FFFFFF;
  transform: rotate(-45deg);
  transition: 0.4s;
  transition-timing-function: ease-out;
}

.sec3__wapper__a:hover span {
  transform: rotate(-45deg) translate(7px, 7px);
}



@media (max-width: 1024px) {
  .sec3 {
    padding: 125px 0 175px;
  }

  .sec3__wapper__top {
    flex-direction: column;
  }

  .sec3__wapper__top__img {
    width: 75%;
    max-width: 400px;
  }
}

@media (max-width: 600px) {
  .sec3 {
    padding: 100px 0 150px;
  }

  .sec3__wapper__ul {
    flex-direction: column;
    gap: 50px;
  }

  .sec3__wapper__ul__li__h4 {
    margin-bottom: 10px;
  }

  .sec3__wapper__ul__li {
    width: 100%;
  }
}