/************************************************************************************/
/************************************* Colors *************************************/
/************************************************************************************/
/* absolute-center */
/* transition */
/* popup */
.popup-wrap {
  max-width: 500px;
  display: none;
  position: absolute;
  top: 0;
  left: 1em;
  z-index: 99;
}
.popup-wrap .slick-dots {
  bottom: 5px;
}
.popup-wrap .slick-dots li {
  margin: 0;
}
.popup-wrap .slick-dots li button::before {
  font-size: 10px;
}
.popup-wrap .slick-dotted.slick-slider {
  margin-bottom: unset;
}
.popup-wrap .popup-bottom {
  font-size: 0.85em;
  color: #fff;
  background: #333;
  padding: 0.5em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.popup-wrap .slick-next {
  right: 5px;
}
.popup-wrap .slick-prev {
  left: 5px;
  z-index: 10;
}

/* common */
.main-inner {
  width: 95.3125%;
  max-width: 1800px;
  padding-left: 8em;
  margin: 0 auto;
  position: relative;
}
.main-inner figure {
  position: relative;
  overflow: hidden;
}
.main-inner figure img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.4s ease;
}
.main-inner .main-section-title {
  font-family: "GmarketSansMedium", sans-serif;
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  transform: rotate(90deg) translateY(-100%);
}
.main-inner .main-section-title::after {
  content: "";
  width: 10rem;
  height: 1px;
  border-bottom: 1px solid #000;
  margin-left: 1rem;
  display: block;
}
.main-inner .main-section-title h2 {
  margin-bottom: 0;
}
.main-inner h3 {
  font-size: 2.8rem;
  font-weight: 700;
  word-break: keep-all;
  padding: 3rem 1.5rem;
}

.margin-B {
  margin-bottom: 10rem;
}

/* visual */
.visual-wrap {
  max-width: 1440px;
  padding: 5rem 2rem 0 2rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.visual-wrap h1 {
  font-family: "GmarketSansMedium", sans-serif;
  font-size: 3.5em;
  font-weight: 700;
  letter-spacing: -5px;
  line-height: 120%;
}
.visual-wrap h1 span {
  font-size: 0.5em;
  font-weight: 400;
  letter-spacing: -3px;
  padding-left: 1rem;
  display: block;
}
.visual-wrap .cover {
  max-width: 370px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  background: #aae0fa;
}

/* Innovate x Evolve */
.section01 {
  padding: 13em 0;
  position: relative;
}
.section01::before {
  content: "";
  width: 80%;
  height: 100%;
  border-radius: 500px 0 0 500px;
  background: #efefef;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
}
.section01 .theme {
  position: absolute;
  top: 0;
  left: 0;
}
.section01 .main-inner {
  width: calc(100% - ((100% - 1800px) / 2));
  max-width: none;
  margin: 0 0 0 auto;
}
@media screen and (max-width: 1800px) {
  .section01 .main-inner {
    width: 100%;
  }
}
.section01 .section01-slider-wrap {
  padding-top: 5rem;
}
.section01 .section01-slider-wrap figure {
  padding-top: 62.962962963%;
  background: #efefef;
  display: block;
  position: relative;
}
.section01 .section01-slider-wrap figure figcaption {
  position: absolute;
  top: 0;
  left: 0;
}
.section01 .section01-slider-wrap .slick-slide {
  margin-right: 6rem;
}
.section01 .section01-slider-wrap .slick-slide:hover figure img {
  transform: translate(-50%, -50%) scale(1.2);
}
.section01 .section01-slider-wrap .slick-arrow {
  width: 25px;
  height: 25px;
  top: 15px;
}
.section01 .section01-slider-wrap .slick-arrow::before {
  display: none;
}
.section01 .section01-slider-wrap .slick-arrow.slick-next {
  background: url("../../images/main/arrow_next.png") no-repeat center;
  right: auto;
  left: 105px;
}
.section01 .section01-slider-wrap .slick-arrow.slick-prev {
  background: url("../../images/main/arrow_prev.png") no-repeat center;
  left: 0;
}
.section01 .slider-num {
  color: #777;
  position: absolute;
  top: 0;
  left: 194px;
}
.section01 .slider-num .current {
  font-weight: 600;
  color: #000;
}

/* Performance x Profits */
.section02 .theme {
  padding: 0;
  margin-bottom: 0.5em;
}
.section02 .col-2 {
  display: flex;
  flex-wrap: wrap;
}
.section02 .col-2 > div {
  width: calc(50% - 4.5rem);
  margin-bottom: 6rem;
  display: flex;
  align-items: center;
}
.section02 .col-2 > div:nth-child(odd) {
  margin-right: 9rem;
}
.section02 .col-2 > div:hover figure img {
  transform: translate(-50%, -50%) scale(1.2);
}
.section02 .col-2 > div .img-wrap {
  position: relative;
  width: 30%;
  background: #efefef;
  margin-right: 3rem;
  display: block;
}
.section02 .col-2 > div .img-wrap:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 100%;
}
.section02 .col-2 > div .img-wrap > .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.section02 .col-2 > div header {
  width: calc(70% - 3rem);
  padding: 3rem 1.5rem;
}
.section02 .col-2 > div header span {
  margin-bottom: 2rem;
  display: block;
}
.section02 .col-2 > div header h3 {
  padding: 0;
}

/* Support x Share */
.section03 {
  position: relative;
}
.section03 .section03-bg {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.section03 .section03-bg > div {
  background: #6eff4c;
}
.section03 .section03-bg > div:nth-child(1) {
  position: relative;
  border-radius: 100em 0 0 0;
}
.section03 .section03-bg > div:nth-child(1):before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 28.125%;
}
.section03 .section03-bg > div:nth-child(1) > .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.section03 .section03-bg > div:nth-child(2) {
  position: relative;
  width: 30%;
  border-radius: 50%;
  margin-left: auto;
  transform: translateY(-50%);
}
.section03 .section03-bg > div:nth-child(2):before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 100%;
}
.section03 .section03-bg > div:nth-child(2) > .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.section03 h3 {
  font-size: 2.4rem;
  padding: 0;
  margin-top: 1.5em;
}
.section03 .col-3 {
  padding-top: 10em;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.section03 .col-3 > div {
  width: calc((100% / 3) - (3vw * 2 / 3));
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.2);
  background: #fff;
  margin-bottom: 3vw;
  margin-right: 3vw;
}
.section03 .col-3 > div:nth-child(3n) {
  margin-right: 0;
}
.section03 .col-3 > div:hover figure img {
  transform: translate(-50%, -50%) scale(1.2);
}
.section03 .col-3 > div header {
  padding: 2em;
}
.section03 .col-3 > div:nth-child(2), .section03 .col-3 > div:nth-child(5), .section03 .col-3 > div:nth-child(8), .section03 .col-3 > div:nth-child(11) {
  margin-top: -7em;
}
.section03 .col-3 > div:has(.circle) {
  padding-bottom: 2em;
}
.section03 .col-3 .img-wrap {
  background: #000;
}
.section03 .col-3 .img-wrap.square {
  position: relative;
  border-radius: 0 5em 0 0;
}
.section03 .col-3 .img-wrap.square:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 73.3333333333%;
}
.section03 .col-3 .img-wrap.square > .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.section03 .col-3 .img-wrap.circle {
  position: relative;
  width: 70%;
  border-radius: 60%;
  margin: 2em auto 0 auto;
}
.section03 .col-3 .img-wrap.circle:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 100%;
}
.section03 .col-3 .img-wrap.circle > .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

@media screen and (max-width: 1800px) {
  .main-inner {
    width: 100%;
    padding-right: 2rem;
  }
}
@media screen and (max-width: 1300px) {
  /* visual */
  .visual-wrap {
    padding: 0 2rem;
    display: block;
  }
  .visual-wrap h1 {
    margin-bottom: 1em;
  }
  .visual-wrap .cover {
    margin-left: auto;
  }

  .section01 {
    padding: 10em 0;
  }
  .section01::before {
    width: 90%;
  }

  .section02 .col-2 {
    display: block;
  }
  .section02 .col-2 > div {
    width: 100%;
    margin-right: 0 !important;
  }
}
@media screen and (max-width: 1024px) {
  .main-inner {
    padding-left: 0;
    padding: 0 2rem;
  }
  .main-inner .main-section-title {
    margin-bottom: 2em;
    position: relative;
    transform: none;
  }

  .section01 {
    padding: 4em 0;
  }
  .section01 .section01-slider-wrap {
    padding-top: 0;
    padding-bottom: 5rem;
  }
  .section01 .section01-slider-wrap .slick-arrow {
    top: auto;
    bottom: 0;
  }
  .section01 .section01-slider-wrap.slick-next {
    left: 25px;
  }
  .section01 .section01-slider-wrap.slick-prev {
    left: 0;
  }
  .section01 .slider-num {
    top: auto;
    bottom: 13px;
    left: 72px;
  }
}
@media screen and (max-width: 840px) {
  .section03 .col-3 {
    padding-top: 0;
  }
  .section03 .col-3 > div {
    width: calc((100% / 2) - (3vw / 2));
    margin-top: 0 !important;
  }
  .section03 .col-3 > div:nth-child(3n) {
    margin-right: 3vw;
  }
  .section03 .col-3 > div:nth-child(even) {
    margin-right: 0;
  }
}
@media screen and (max-width: 767px) {
  .section01 .section01-slider-wrap .slick-slide {
    margin-right: 0;
  }
}
@media screen and (max-width: 640px) {
  .section03 .col-3 {
    display: block;
  }
  .section03 .col-3 > div {
    width: 100%;
    margin-right: 0 !important;
  }
}
@media screen and (max-width: 600px) {
  .popup-wrap {
    width: calc(100% - 2em);
    max-width: none;
  }

  .section02 .col-2 > div {
    display: block;
  }
  .section02 .col-2 > div .img-wrap {
    width: 100%;
    position: relative;
    margin-right: 0;
  }
  .section02 .col-2 > div .img-wrap:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 60%;
  }
  .section02 .col-2 > div .img-wrap > .content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .section02 .col-2 > div .img-wrap img {
    width: 100%;
  }
  .section02 .col-2 > div header {
    width: 100%;
  }
}
@media screen and (max-width: 480px) {
  .margin-B {
    margin-bottom: 4em;
  }

  .visual-wrap h1 {
    font-size: 2em;
  }
  .visual-wrap h1 span {
    padding-left: 0.2rem;
  }

  .main-inner h3 {
    font-size: 1.5em;
    padding: 3rem 0;
  }
  .main-inner .main-section-title img {
    height: 2rem;
  }

  .section01 {
    margin-bottom: 0;
  }
}