@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

@font-face {

  font-family: 'MaplestoryOTFBold';

  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/MaplestoryOTFBold.woff') format('woff');

  font-weight: normal;

  font-style: normal;

}



:root{

  --text-color: #f0f4f5;

  --background-color: #263343;

  --accent-color:#d49466;

}



body, html {

  color: #111;

  font-family: 'Pretendard';

  font-weight: 500;

}

.font-maple {

  font-family: 'MaplestoryOTFBold';

}

a:hover {text-decoration: none;}



/* common */

.wrapper .inner-layout {

  width: 100%;

  max-width: 1440px;

  margin: 0 auto;

}

.g-cta {

  padding: 8px 14px !important;

  color: #fff !important;

  font-size: 14px !important;

  border-radius: 2rem;

  background: #111;

  transition: background .3s;

  overflow: hidden;

}

.g-cta:hover {

  opacity: 0.7;

}

.content--canvas {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100vh;

}

.flex-c {

  display: flex;

  align-items: center;

  justify-content: center;

}

.navbar {

  /* z-index: 99999; */

}



/* main */

.kv-wrap {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  height: 100%;

  text-align: center;

}

.main-section {

  position: relative;

  background-color: #fff;

}



.kv-title {

  background: linear-gradient(

    to right,

    #e86c9a 20%,

    #00affa 30%,

    #0190cd 70%,

    #c92e4d 80%

  );

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;

  text-fill-color: transparent;

  background-size: 500% auto;

  animation: textShine 5s ease-in-out infinite alternate;

}



@keyframes textShine {

  0% {

      background-position: 0% 50%;

  }

  100% {

      background-position: 100% 50%;

  }

}



.content-wrapper {
  position: relative;
  width: 100%;
  background: #fff;
  overflow: hidden;
}



/* content-1 */

.content-1 {

  position: relative;

  text-align: center;

}

.content-1 .bg-wrap {



}

.content-1 .text-wrap {

  padding: 7rem 0;

}

.content-1 .text-wrap .info p {

  margin-top: 30px;

}

.content-1 .image-info {

  position: relative;

  color: #fff;

}

.content-1 .image-info + .image-info {

  margin-top: 50px;

}

.content-1 .image-info .box {

  position: relative;

  height: 450px;

}

.content-1 .image-info .box.item-1 {

  background: url(../img/main_bg_1.jpg) 50% 50% no-repeat;

  background-size: cover;

}

.content-1 .image-info .box.item-2 {

  background: url(../img/main_bg_2.jpg) 50% 50% no-repeat;

  background-size: cover;

}

.content-1 .image-info .box.item-3 {

  background: url(../img/main_bg_3.jpg) 50% 50% no-repeat;

  background-size: cover;

}

.content-1 .image-info .dim {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.7);

  transition: all .5s;

}

.content-1 .image-info .box:hover .dim {

  background-color: rgba(0, 0, 0, 0.5);

}

.content-1 .image-info .product-item {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: space-between;

  height: 100%;

}

.content-1 .image-info .product-item > div {

  width: 50%;

}

.content-1 .image-info .product-item h3 {

  font-size: 36px;

}

.content-1 .image-info .product-item .swiper-container-2 .swiper-slide,

.content-1 .image-info .product-item .swiper-container-3 .swiper-slide {

  width: 300px;

  height: 250px;

}

.content-1 .image-info .product-item .prod-img {

  width: 50%;

  margin: 0 auto;

  border-radius: 20px;

  overflow: hidden;

}

.content-1 .image-info .product-item .prod-img img {

  width: 100%;

  height: 100%;

  border-radius: 20px;

  object-fit: cover;

}

.content-1 .swiper-scrollbar {

  left: 50%;

  bottom: -7%;

  width: 50%;

  height: 2px;

  background: rgba(255,255,255,.5);

  transform: translateX(-50%);

}

.content-1 .swiper-scrollbar-drag {

  background: #fff;

}



/* content-2 */

.content-2 {

  margin-top: 150px;

  padding: 200px 24px;

  text-align: center;

  color: #fff;

}

.bg-blue {

  background-color: #2c7ad2;

  background-image: radial-gradient( circle at 47% 14%, rgba(205, 205, 205, 0.04) 0%, rgba(205, 205, 205, 0.04) 43%, transparent 43%, transparent 100% ), radial-gradient( circle at 35% 12%, rgba(215, 215, 215, 0.04) 0%, rgba(215, 215, 215, 0.04) 4%, transparent 4%, transparent 100% ), radial-gradient( circle at 1% 35%, rgba(24, 24, 24, 0.04) 0%, rgba(24, 24, 24, 0.04) 37%, transparent 37%, transparent 100% ), radial-gradient( circle at 21% 1%, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 26%, transparent 26%, transparent 100% ), radial-gradient( circle at 23% 82%, rgba(249, 249, 249, 0.04) 0%, rgba(249, 249, 249, 0.04) 60%, transparent 60%, transparent 100% ), radial-gradient( circle at 11% 54%, rgba(251, 251, 251, 0.04) 0%, rgba(251, 251, 251, 0.04) 23%, transparent 23%, transparent 100% ), radial-gradient( circle at 69% 68%, rgba(234, 234, 234, 0.04) 0%, rgba(234, 234, 234, 0.04) 10%, transparent 10%, transparent 100% ), linear-gradient(90deg, #2c7ad2, #1568c6);

}

.content-2 .desc {margin-top: 30px;}



/* content-3 */

.content-3 {

  padding: 150px 24px 200px;

  text-align: center;

}
.content-3.agency {
  margin-top: 150px;
}

.s-title {

  padding: 0 24px;

  font-size: 30px;

}

.s-desc {

  padding: 0 24px;

  margin-top: 30px;

}



@-webkit-keyframes text-pop-up-top {

  0% {

    -webkit-transform: translateY(0);

            transform: translateY(0);

    -webkit-transform-origin: 50% 50%;

            transform-origin: 50% 50%;

    text-shadow: none;

  }

  100% {

    -webkit-transform: translateY(-50px);

            transform: translateY(-50px);

    -webkit-transform-origin: 50% 50%;

            transform-origin: 50% 50%;

    text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);

  }

}

@keyframes text-pop-up-top {

  0% {

    -webkit-transform: translateY(0);

            transform: translateY(0);

    -webkit-transform-origin: 50% 50%;

            transform-origin: 50% 50%;

    text-shadow: none;

  }

  100% {

    -webkit-transform: translateY(-50px);

            transform: translateY(-50px);

    -webkit-transform-origin: 50% 50%;

            transform-origin: 50% 50%;

    text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);

  }

}



.content-3 .text {

  -webkit-animation: text-pop-up-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940)   both;

  animation: text-pop-up-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940)   both;

  color: #fff;

  font: 100px/1 'TeXGyreAdventorBold';

  text-transform: none;

  text-align: center;     

}

.content-3 .map-area {

  margin-top: 100px;

}



/* footer */

.footer {

  padding: 50px 24px;

  color: #eee;

  text-align: center;

  line-height: 1.7;

  background-color: #111;

}



/*  */
@media screen and (max-width: 1024px) {


}
/*  */

@media screen and (max-width: 768px) {

  .content-1 .image-info .product-item {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    height: 100%;

  }

  .content-1 .image-info .product-item > div {

    width: 90%;

  }

  .content-1 .image-info .product-item .prod-img {

    width: 70%;

  }

  .content-1 .image-info .item-2 .text {

    margin-top: 50px;

  }

}



.cta-shop {

  margin-top: 50px;

}

.cta-link {

  display: inline-block;

  background: #e43c5c;

  margin: 0 auto;

  padding: 10px 28px;

  border: 0;

  color: #fff;

  transition: 0.4s;

  border-radius: 50px;

}

.cta-link:hover {

  color: #fff;

  opacity: 0.7;

}