.modal-container {position: fixed; top:0; left:0; width: 100%; display: flex; justify-content: center; align-items: center; height:100vh; z-index: 4; gap:1rem;}
.modal-container .modal {border:5px solid rgba(0,0,0,0.6); max-width: 100rem;}
.modal-container .modal>a {width: 100%; }
.modal-container .modal>a img {vertical-align: middle; max-width:300px; height: auto;}
.modal-container ul {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; background-color: #000;}
.modal-container ul>li {flex-basis: 50%; max-width: 50%; color:#fff; font-size:1.6rem; text-align: center; padding:1rem 0.6rem; cursor: pointer; transition: all 0.4s;}
.modal-container ul>li:hover {background-color: #222;}
.section {width:100%; height:100%;}
.animation-here {opacity: 0;}
.title-line {font-size:4.5rem; }


/*intro */
#intro-wrap {width:100%; height:100vh; background-color:#292E88; background-repeat: no-repeat; background-size:cover; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; text-align: center; position: relative; overflow: hidden;}
#intro-wrap .intro-page {width: 100%; max-width: 80rem; padding-left:1.6rem; padding-right:1.6rem; height: 80vh; position: relative; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
#intro-wrap .intro-page .container {width: 100%; margin-top:5rem;}
#intro-wrap .intro-page .intro-logo-type {width:100%; max-width: 45rem; margin: 0 auto;}
#intro-wrap .intro-page h3 {font-size:2rem; color:#fff; font-family: "Explora";letter-spacing: 5px; margin-bottom:10rem;}
#intro-wrap .lang-select {width:100%; margin-top:2rem; margin-bottom:3rem;}
#intro-wrap .lang-select>li {overflow: hidden;}
#intro-wrap .lang-select>li>p {font-size:2rem;}
#intro-wrap .lang-select>li:last-child>p {font-family: "Microsoft YaHei";}
#intro-wrap .lang-cont {display: flex; justify-content: space-around; align-items: flex-start; flex-wrap: wrap; width: 100%; max-width: 65rem; margin: 0 auto; margin-bottom:11rem;}
#intro-wrap .si-wrap {display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; width: 100%; max-width: 50rem; margin: 0 auto;  position: absolute; bottom:-34%; left:50%; transform: translate(-50%,-50%);}
#intro-wrap .si-wrap>div {flex-basis: 20%; max-width: 20%;}
#intro-wrap .si-wrap>div>img {width: 100%;}
#intro-wrap .lang-cont>li {flex-basis: 26%; max-width: 26%; font-size:1.3rem; color:#fff;}
#intro-wrap .lang-cont>li>a {color:#fff;}
#intro-wrap .lang-cont>li>a img {transition:  all 0.4s;}
#intro-wrap .lang-cont>li>a:hover img {transform: translateY(-1rem);}
#intro-wrap .lang-cont>li>a:hover p {background-color:#ffffff; color:#292E88; transition: all 0.4s;}
#intro-wrap .lang-cont>li a p {font-size:1.8rem; font-weight: bold; color:#ffffff; padding:0.25rem 1rem; border:1px solid #ffffff; border-radius: 3rem; margin-top:1rem; margin-bottom:1rem;}
#intro-wrap .lang-cont>li:last-child a p {font-family: "Microsoft YaHei";}
#intro-wrap .copyright {position: absolute; top:88%; left:50%; transform: translate(-50%,-50%); font-size:1.4rem; font-family: "Play"; text-align: center; width: 100%; color:rgba(0,0,0,0.8); z-index: 99;}
#intro-wrap .bottom {position: absolute; height:20vh; bottom:0; width:100%; background-color:#fff; z-index: 10; padding:10px;}


.slide-in-bottom{-webkit-animation:slide-in-bottom .5s cubic-bezier(.25,.46,.45,.94) both;animation:slide-in-bottom .5s cubic-bezier(.25,.46,.45,.94) both}
@-webkit-keyframes slide-in-bottom{0%{-webkit-transform:translateY(1000px);transform:translateY(1000px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes slide-in-bottom{0%{-webkit-transform:translateY(1000px);transform:translateY(1000px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}
/*크래프터 공통 버튼*/
.button {position: relative; display:flex; justify-content: space-between; align-items: center; color:#fff; font-size:1.6rem; width: 100%; max-width: 20rem; padding:1rem 2rem; border-bottom:1px solid #fff; transition: all 0.4s cubic-bezier(.23,1,.32,1); cursor: pointer;}
.button>p {font-weight: 600; transition: all 0.4s cubic-bezier(.23,1,.32,1);}
.button::before {content:''; position: absolute; left:0; top:0; width:0; height: 100%; background-color: #F45708; z-index: -1; transition: all 0.4s cubic-bezier(.23,1,.32,1);}
.button:hover {border-bottom:1px solid transparent;}
.button:hover::before {width: 100%;}



/*크래프터 메인배너*/
#main-banner-slide {width:100%; height: 96rem; background-color:#000; color:#fff; border-radius: 0 0 15rem 15rem; position: relative; overflow: hidden;}
#main-banner-slide .swiper-slide {display: flex; justify-content: flex-start; align-items: center; position: relative; }
#main-banner-slide .swiper-slide .boundary-1440 {display: flex; justify-content: flex-start; align-items: center; position: relative; z-index: 3;}
#main-banner-slide .swiper-slide .boundary-1440 .text-wrap {flex-basis: 50%; max-width: 60rem; }
#main-banner-slide .swiper-slide .boundary-1440 .text-wrap>img {width: 100%; max-width: 25rem;}
#main-banner-slide .swiper-slide .boundary-1440 .text-wrap>h2 {font-size:2.6rem; margin:2rem 0; line-height: 1.4; ; animation-delay: 0.5;}
#main-banner-slide .swiper-slide .boundary-1440 .text-wrap>p {font-size:1.8rem; font-weight: 300; margin-bottom: 2rem; animation-delay: 0.7s;}
#main-banner-slide .swiper-slide .banner-image {position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); z-index: -1; width: 100%; height: 100%;}
#main-banner-slide .button {animation-delay: 1s;}


#main-banner-slide .swiper-slide-active .boundary-1440 .text-wrap {	-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;}
#main-banner-slide .swiper-slide-active .boundary-1440 .text-wrap>img {	-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;}
#main-banner-slide .swiper-slide-active .boundary-1440 .text-wrap>h2 {	-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;}
#main-banner-slide .swiper-slide-active .boundary-1440 .text-wrap>p {	-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;}
 #main-banner-slide .swiper-slide-active .banner-image {	-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;}


#main-banner-slide .btn {position: absolute; top:50%; transform: translateY(-50%); width:5.5rem; height:5.5rem; border:1px solid rgba(255,255,255,0.3); display: flex; justify-content: center; align-items: center; z-index: 1; cursor: pointer; transition: all 0.4s;}
#main-banner-slide .btn.left {left:2rem;}
#main-banner-slide .btn.right {right:2rem; transform: translateY(-50%) rotate(180deg);}

#main-banner-slide .btn:hover {background-color: #F45708;}
#mobile-banner-slide{ display: none;}

.btn-scroll { display: inline-block; position: absolute; bottom: 75px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); padding: 12px; font-size: 12px; font-weight: 800; line-height: 15px; color: #fff; opacity: 0; z-index: 1;}
.btn-scroll:before {position: absolute; top: 100%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 2px; height: 75px; background-color: #fff; -webkit-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite; animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite; content: "";}
@keyframes elasticus {
  0% {
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: scaleY(0);
      transform: scaleY(0)
  }

  50% {
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: scale(1);
      transform: scale(1)
  }

  50.1% {
      -webkit-transform-origin: 0 100%;
      transform-origin: 0 100%;
      -webkit-transform: scale(1);
      transform: scale(1)
  }

  to {
      -webkit-transform-origin: 0 100%;
      transform-origin: 0 100%;
      -webkit-transform: scaleY(0);
      transform: scaleY(0)
  }
}

@-webkit-keyframes interaction {
  0% {
      width: 0;
      height: 0%
  }

  to {
      width: 100%;
      height: 100%
  }
}

@keyframes interaction {
  0% {
      width: 0;
      height: 0%
  }

  to {
      width: 100%;
      height: 100%
  }
}


.text-focus-in {
	-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2024-7-28 14:4:39
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation text-focus-in
 * ----------------------------------------
 */
 @-webkit-keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0.3;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0.3;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}


#section-02 {width: 100%; height: auto; background-image:url(../../../img/logo-symbol.svg); background-size: 40rem; background-position: center;  background-repeat: no-repeat; background-attachment: fixed;}
#section-02 .boundary-1440 {height: 100%;}
#section-02 .boundary-1440 .guitar-line {z-index: -1; position: absolute; top:0; left:0; width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: stretch;}
#section-02 .boundary-1440 .guitar-line>div {width: 1px; height: 100%; background: linear-gradient(to bottom, #DBDBDB, #f8f8f8);}
/* 웹킷 브라우저 지원 */
@-webkit-keyframes gradient {
  from { background: #DBDBDB; }
  to { background: #f8f8f8; }
}
#section-02 .boundary-1440 .guitar-line>div {
  background: -webkit-linear-gradient(top, #DBDBDB, #f8f8f8); /* 사파리/크롬 */
  background: -o-linear-gradient(bottom, #DBDBDB, #f8f8f8); /* 오페라 */
  background: -moz-linear-gradient(bottom, #DBDBDB, #f8f8f8); /* 파이어폭스 */
  background: linear-gradient(to bottom, #DBDBDB, #f8f8f8); /* 표준 */
}


#section-02 .boundary-1440 #overview.flex_2ea .content {padding:14.4rem 0rem; }
#section-02 .boundary-1440 #overview.flex_2ea .content>h2 { line-height: 1.2;}
#section-02 .boundary-1440 #overview.flex_2ea .content>h4 {font-weight: 300;}
#section-02 .boundary-1440 #overview.flex_2ea .content>h3 { font-weight: bold; line-height: 1.4; max-width: 60rem; margin-bottom: 2rem;}
#section-02 .boundary-1440 #overview.flex_2ea .content>p { line-height: 1.6; width: 100%; max-width: 60rem; margin-bottom: 3rem;}


#section-02 .boundary-1440 #core-value {align-items: start; justify-content: space-between; padding-bottom: 10rem;}
#section-02 .boundary-1440 #core-value .content {flex-basis: 46%; max-width: 46%; overflow-x: hidden;}
#section-02 .boundary-1440 #core-value .content .img-wrap {border-radius: 0.5rem; overflow: hidden; transition: all 0.4s cubic-bezier(.23,1,.32,1); }
#section-02 .boundary-1440 #core-value .content .img-wrap>img {width: 100%; height: 100%; vertical-align: middle;} 

/* #section-02 .boundary-1440 #core-value .content .img-wrap:hover {cursor: url('/INCONTRO/assets/images/cusor-view.svg'), auto; transition: all 0.4s cubic-bezier(.23,1,.32,1);} */
#section-02 .boundary-1440 #core-value .content .text-wrap {width: 100%; padding: 2rem 0;   }
#section-02 .boundary-1440 #core-value .content .text-wrap>h4 { margin-bottom: 1rem; }
#section-02 .boundary-1440 #core-value .content .text-wrap>p { line-height: 1.6; max-width: 58rem; margin-bottom: 1rem;}
#section-02 .boundary-1440 #core-value .content:nth-child(2n) {position: relative; top:50%; margin-top:12rem;}




.actionBtn15 {
  display: inline-block;
  position: relative;
  margin: auto;
   text-transform: uppercase;
  text-decoration: none;
}
.actionBtn15 .lb-box {
  display: block;
  padding: 1.1rem 1.5rem;
}
.actionBtn15 .lb-box:after {
 content: '';
  display: block;
  clear: both;
}
.actionBtn15 .lb {
  display: block;
  position: relative;
  z-index: 1;
  float: left;
  color:#222;
  font-size: 1.4rem;
  font-weight: bold;
  font-family: 'Montserrat', sans-serif;
}
.actionBtn15 .cir-lt, .actionBtn15 .cir-rt {
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  width: 4rem;
  height: 4rem;
  margin-left: 0;
  background: #f4570831;
  border-radius: 2rem;
  -webkit-border-radius: 2rem;
  -moz-border-radius: 2rem;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
.actionBtn15 .cir-lt {
  width: 40px;
  opacity: 1;
  transition: width .3s ease .3s, opacity 0s ease .3s;
  -webkit-transition: width .3s ease .3s, opacity 0s ease .3s;
  -moz-transition: width .3s ease .3s, opacity 0s ease .3s;
}
.actionBtn15 .cir-rt {
  width: 100%;
  opacity: 0;
  transition: width .3s ease 0s, opacity 0s ease .3s, left .3s ease 0s, margin-left .3s ease;
  -webkit-transition: width .3s ease 0s, opacity 0s ease .3s, left .3s ease 0s, margin-left .3s ease;
  -moz-transition: width .3s ease 0s, opacity 0s ease .3s, left .3s ease 0s, margin-left .3s ease;
}
.actionBtn15:hover .cir-lt {
  width: 100%;
  opacity: 0;
  transition: width .3s ease 0s, opacity 0s ease .3s;
  -webkit-transition: width .3s ease 0s, opacity 0s ease .3s;
  -moz-transition: width .3s ease 0s, opacity 0s ease .3s;
}
.actionBtn15:hover .cir-rt {
  left: 100%;
  margin-left: -4rem;
  width: 4rem;
  opacity: 1;
  transition: width .3s ease .3s, opacity 0s ease .3s, left .3s ease .3s, margin-left .3s ease .3s;
  -webkit-transition: width .3s ease .3s, opacity 0s ease .3s, left .3s ease .3s, margin-left .3s ease .3s;
  -moz-transition: width .3s ease .3s, opacity 0s ease .3s, left .3s ease .3s, margin-left .3s ease .3s;
}
.actionBtn15 .ico-plus {
  display: block;
  position: relative;
  z-index: 1;
  float: right;
  width: .9rem;
  height: .9rem;
  margin: 6px 0 0 25px;
  background: url('../../..//img/ico_cross_1.png') no-repeat;
  transition: transform .3s ease .15s;
  -webkit-transition: transform .3s ease .15s;
  -moz-transition: transform .3s ease .15s;
}
.actionBtn15:hover .ico-plus {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
}


#section-03 {width: 100%;}
#section-03 .boundary-1440 {width: 100%; display: flex; justify-content: space-between; align-items: center;}
#section-03 .boundary-1440 .product-navi {display: flex; justify-content: center; align-items: center; gap:1rem;}
#section-03 .boundary-1440 .product-navi .btn {border-radius: 50%;  background-color: transparent; border:1px solid #ddd; display: flex; justify-content: center; align-items: center; width: 5rem; height: 5rem; cursor: pointer;}
#section-03 .boundary-1440 .product-navi .btn:hover {background-color: #000;}
#section-03 .boundary-1440 .product-navi .btn:hover img {filter: invert(1);}
#section-03 .boundary-1440>h2 {font-size:4.5rem; font-weight: 800;}
#section-03 .boundary-1440>h2>span:not(.bold) {font-weight: 300;}

#section-03 .section-container .swiper-wrapper{ transition-timing-function: linear; }

#product-list {width: 100%; position: relative; padding-top:2rem; padding-bottom:10rem; padding-left:2rem; padding-right:2rem;}
#product-list::before {content:''; position: absolute; top:0; left:0; width:15rem; height:100%; background: linear-gradient(to right, #f8f8f8 0%, rgba(248, 248, 248, 0) 100%); z-index: 2; pointer-events:none;}
#product-list::before {
  background: -webkit-linear-gradient(left, #f8f8f8 0%, rgba(248, 248, 248, 0) 100%); /* 사파리/크롬 */
  background: -o-linear-gradient(right, #f8f8f8 0%, rgba(248, 248, 248, 0) 100%); /* 오페라 */
  background: -moz-linear-gradient(right, #f8f8f8 0%, rgba(248, 248, 248, 0) 100%); /* 파이어폭스 */
  background: linear-gradient(to right, #f8f8f8 0%, rgba(248, 248, 248, 0) 100%); /* 표준 */
}

 #product-list::after {content:''; position: absolute; top:0; right:0; width:15rem; height:100%; background: linear-gradient(to left, #f8f8f8 0%, rgba(248, 248, 248, 0) 100%); z-index: 2; pointer-events:none;}
 #product-list::after {
  background: -webkit-linear-gradient(right, #f8f8f8 0%, rgba(248, 248, 248, 0) 100%); /* 사파리/크롬 */
  background: -o-linear-gradient(left, #f8f8f8 0%, rgba(248, 248, 248, 0) 100%); /* 오페라 */
  background: -moz-linear-gradient(left, #f8f8f8 0%, rgba(248, 248, 248, 0) 100%); /* 파이어폭스 */
  background: linear-gradient(to left, #f8f8f8 0%, rgba(248, 248, 248, 0) 100%); /* 표준 */
}

#product-list {overflow: hidden;}
#product-list .swiper-wrapper .swiper-slide {width:100%; cursor: pointer; flex-direction: column; align-items: center; justify-content: center;}
#product-list .swiper-wrapper .swiper-slide:hover .img-wrap::before{height: 100%;}
#product-list .swiper-wrapper .swiper-slide:hover .text-wrap h4 {color:#F45708; transition: all 1.4s cubic-bezier(.23,1,.32,1);}

#product-list .swiper-wrapper .swiper-slide .img-wrap {margin:0 auto; width: 100%; max-width: 32rem;  height: auto; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; display: flex; justify-content: center; align-items: center; border-radius: 0.5rem; position: relative; background-color: #fff; overflow: hidden;}
#product-list .swiper-wrapper .swiper-slide.products-slide {min-height: 51.733rem;}

#product-list .swiper-wrapper .swiper-slide .img-wrap>img {z-index: 2;  display: block; margin: 0 auto;  object-fit: cover; position: absolute; top:0; left:0;}


/* #product-list .swiper-wrapper .swiper-slide .img-wrap::before {content:''; position: absolute; top:0; left:0; width: 100%; height:0%; background-color: #F45708; transition: all 1.4s cubic-bezier(.23,1,.32,1);} */
#product-list .swiper-wrapper .swiper-slide .img-wrap .style {position: absolute; top:1.6rem; left:1.6rem; border-radius: 0.3rem; padding:0.3rem 1.2rem; color:#fff; font-size:1.4rem; font-weight: bold;  z-index: 3; background-color: red; line-height: 1.3;}
#product-list .swiper-wrapper .swiper-slide .img-wrap .style.best {background-color: #1E3786;}
#product-list .swiper-wrapper .swiper-slide .img-wrap .style.hit {background-color: #ffa600;}
#product-list .swiper-wrapper .swiper-slide .text-wrap {text-align: center; padding:2rem;}
/* #product-list .swiper-wrapper .swiper-slide .text-wrap h4 {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} */
#product-list .swiper-wrapper .swiper-slide .text-wrap h4 {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 1.8rem;}
/* #product-list .swiper-wrapper .swiper-slide .text-wrap p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} */
#product-list .swiper-wrapper .swiper-slide .text-wrap p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.6rem;}
/* #product-list .swiper-wrapper .swiper-slide .text-wrap p { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 1.6rem;} */




/* #section-04 {height: 100vh !important;} */
#section-04 .section-container {width: 95%; height: calc(var(--vh, 1vh) * 100); margin:0 auto; background-image: url(../../../img/section-04-bg_11zon.webp); background-size:cover; background-attachment: fixed; top:0; left:0; background-position: center;  display: flex; justify-content: space-between; align-items: stretch; overflow: hidden; border-radius: 10rem; background-repeat: no-repeat; transition: all 0.4s cubic-bezier(.23,1,.32,1); flex-wrap: wrap;}
#section-04 .section-container.on {width: calc(100% - 4rem); margin:2rem auto; border-radius: 10rem;}
#section-04 .section-container .container {flex : 1; display: flex; flex-direction: column; padding:25rem 0; border-right:1px solid rgba(255,255,255,0.2); position: relative;}
#section-04 .section-container .container::before {content:''; position: absolute; top:0; left:0; width: 100%; height: 100%; background:inherit; filter: blur(0); -webkit-filter: blur(0); transition: filter 0.3s, -webkit-filter 0.3s; z-index: 1; opacity: 0;   transition: all 0.2s ease-in-out; }
#section-04 .section-container .container:hover::before {  background-color: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  transition: all 0.2s ease-in-out;
  opacity: 1;}
#section-04 .section-container .container:hover .img-wrap {background-color: #F45708;}
#section-04 .section-container .container:nth-child(4) {border-right:0;}
#section-04 .section-container .container .img-wrap {display: flex; justify-content: center; align-items: center; width: 8rem; height: 8rem; border-radius: 50%; background-color: transparent; margin: 0 auto;  position: relative; z-index: 2; transition: all 0.2s ease-in-out;}
#section-04 .section-container .container .title-wrap {color:#fff; text-align: center; position: relative; z-index: 2; padding-left:1.6rem; padding-right: 1.6rem;}
#section-04 .section-container .container .title-wrap>h3 {font-weight: 800;}
#section-04 .section-container .container .title-wrap>p {font-weight: 300;}
#section-04 .section-container .container .title-wrap>.arrow {margin-top:8.8rem;}



#section-05 {padding-top:10rem; padding-bottom: 10rem;}
#section-05 .instagram-wrap {width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; cursor: pointer;}
#section-05 .instagram-wrap>.item {flex-basis: 19%; max-width: 19%;  margin: 0.5%;  position: relative; overflow: hidden; }
#section-05 .instagram-wrap>.item:hover .insta-bg {transform: translate(-50%,-50%);}
#section-05 .instagram-wrap>.item .sub-text {visibility: hidden; opacity: 0; position: absolute; top:0; left:0;  width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); color:#fff; z-index: 2; transition: all 0.4s cubic-bezier(.23,1,.32,1); padding:3rem; overflow: hidden;}
#section-05 .instagram-wrap>.item .sub-text>p {  display: -webkit-box; -webkit-line-clamp: 5; /* 5줄로 제한 */ -webkit-box-orient: vertical;  overflow: hidden; text-overflow: ellipsis;  line-height: 1.4; /* 줄 높이를 1.4로 설정 */ max-height: calc(1.4em * 5); /* 줄 높이를 고려한 최대 높이 설정 */}
#section-05 .instagram-wrap>.item:hover .sub-text {visibility: visible; opacity: 1;}
#section-05 .instagram-wrap>.item::before {content:''; display: block; padding-top:100%;}
#section-05 .instagram-wrap>.item .insta-bg {width: 100%; height: 100%; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); transition: all 0.4s cubic-bezier(.23,1,.32,1); vertical-align: middle;}


.scroller {
  max-width: 100%;
  background-color: #F45708;
}

.scroller__inner {
  padding-block: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.scroller[data-animated="true"] {
  overflow: hidden;
}

.scroller[data-animated="true"] .scroller__inner {
  width: 100%;
  flex-wrap: nowrap;
  animation: scroll var(--_animation-duration, 40s)
    var(--_animation-direction, forwards) linear infinite;
}

.scroller[data-direction="right"] {
  --_animation-direction: reverse;
}

.scroller[data-direction="left"] {
  --_animation-direction: forwards;
}

.scroller[data-speed="fast"] {
  --_animation-duration: 20s;
}

.scroller[data-speed="slow"] {
  --_animation-duration: 60s;
}

@keyframes scroll {
  to {
    transform: translate(calc(-50% - 0.5rem));
  }
}

/* general styles */

.tag-list { margin: 0;  padding-inline: 0; list-style: none;}

.tag-list li {
  padding: 1rem 4rem; 
  color:#fff;
  font-size: 2rem; 
  font-weight: bold;
  border-radius: 0.5rem;
  position: relative;
  white-space: nowrap;
}
/* .tag-list li::before {content:''; position: absolute; top:50%; left:-2rem; width:1rem; height: 1rem; border-radius: 50%; transform: translateY(-50%); background-color: #fff;} */

/* for testing purposed to ensure the animation lined up correctly */
.test {
  background: red !important;
}


#section-06 {padding-bottom:25%; width:100%; height: 0; background-image: url(../../../img/section-06-bg_11zon.webp); background-size:auto; background-attachment: fixed; top:0; left:0; background-position: center; background-repeat: no-repeat;}





/*섹션 1*/
.section#main-banner {height:100vh; overflow: hidden; background-color:black; display: none;}
.section #main-slide {width:100%; height:100%; position: relative;}
.section #main-slide .swiper-wrapper {height:100%;}
.section #main-slide .swiper-wrapper .swiper-slide {height:100%; position: relative;}
.section #main-slide .swiper-wrapper .swiper-slide.swiper-slide-active>img {animation: zoomin 5s both;}

@-webkit-keyframes zoomin {
  0% {transform: translate(-50%,-50%) scale(1.2);}
  100% {transform: translate(-50%,-50%) scale(1.0);}
} 
@keyframes zoomin {
  0% {transform: translate(-50%,-50%) scale(1.2);}
  100% {transform: translate(-50%,-50%) scale(1.0);}
}
 @-moz-keyframes zoomin {
  0% {transform: translate(-50%,-50%) scale(1.2);}
  100% {transform: translate(-50%,-50%) scale(1.0);}
}


.section #main-slide .swiper-wrapper .swiper-slide .design-box {position: absolute; bottom:0; left:0; width:20rem; height:10rem; border-radius: 0 10rem 0 0; background-color:#1E3786; z-index: 1;}
.section #main-slide .swiper-wrapper .swiper-slide>img {position: absolute; top:50%; left:50%; transform: translate(-50%,-50%) scale(1.0); width:100%; height:100%; transition: 6s ease-out; display: block;}
.section #main-slide .swiper-wrapper .swiper-slide>.scroll-wrap {position: absolute; left:50%; bottom:0%; transform: translate(-50%,-50%);z-index: 1; background-color:black; width:10rem; height:10rem; border:1px solid rgba(255,255,255,0.5);  cursor: pointer;}
.section #main-slide .swiper-wrapper .swiper-slide>.scroll-wrap:hover {background-color:#1E3786;}
.section #main-slide .swiper-wrapper .swiper-slide>.scroll-wrap img {margin:0 auto; margin-bottom:1rem; animation: down 1.3s infinite alternate;  display: block;}
@keyframes down{
  to{
    transform: translateX(10rem);
  }
  from{
    transform: translateX(20rem);
  }

}
.section #main-slide .swiper-wrapper .swiper-slide>.scroll-wrap p {color:#fff; text-align: center; font-family: "Play"; font-size:1.2rem; line-height: 1;}

.section #main-slide .swiper-wrapper .swiper-slide>.boundary {position: relative; display: flex; justify-content: flex-start; align-items: center; width:100%; height: 100%; border-left:1px solid rgba(255,255,255,0.3); border-right:1px solid rgba(255,255,255,0.3); z-index: 1;}
.section #main-slide .swiper-wrapper .swiper-slide>.boundary>.btn-box {width:7.4rem; height:7.4rem; border:1px solid rgba(255,255,255,0.3); background-color:rgba(255,255,255,0.1); transition: all 0.4s; cursor: pointer;}
.section #main-slide .swiper-wrapper .swiper-slide>.boundary>.btn-box:hover {background-color:#1E3786;}
.section #main-slide .swiper-wrapper .swiper-slide>.boundary>.btn-box.left-btn {position: absolute; left:0; z-index: 99;}
.section #main-slide .swiper-wrapper .swiper-slide>.boundary>.btn-box.right-btn {position: absolute; right:0; z-index: 99;}
.section #main-slide .swiper-wrapper .swiper-slide>.boundary>.text-ment {position: relative; z-index: 1; padding-left:10rem; overflow: hidden; width: 100%;}
.section #main-slide .swiper-wrapper .swiper-slide>.boundary>.text-ment>li:first-child {margin-bottom:2rem;}
.section #main-slide .swiper-wrapper .swiper-slide>.boundary>.text-ment>li>div>h1 {font-size:9rem; font-family: "Play";  line-height: 1; color:#fff;}
.section #main-slide .swiper-wrapper .swiper-slide>.boundary>.text-ment>li>div>h1>span {-webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #fff; color:transparent;}
.section #main-slide .swiper-wrapper .swiper-slide>.boundary>.text-ment>li>div>p {font-size:2rem; line-height: 1.4; color:#fff;}
.section #main-slide .swiper-wrapper .swiper-slide>.boundary>.text-ment>li>div>p:last-child {margin-bottom:3rem;}

.section #main-slide .swiper-wrapper .swiper-slide>.boundary>.text-ment>li>.page-container {display: flex; justify-content: flex-start;}
.section #main-slide .swiper-wrapper .swiper-slide>.boundary>.text-ment>li>.page-container .page-line {width:100%; max-width: 20rem;; background-color:rgba(255,255,255,0.5); height:4px; position: relative;}
.section #main-slide .swiper-wrapper .swiper-slide>.boundary>.text-ment>li>.page-container .page-line>div {position: absolute; top:0; left:0; width:0%; height:4px; background-color:#fff; animation: line-animation 5s linear forwards;}




/*섹션2 회사개요*/
.section#section_01 {width:100%; text-align: center;}
.section#section_01 .gradation>img {margin: 0 auto; transform: rotate(180deg); position: relative;}
.main-ment {text-align: center;}
.main-ment h4 {font-size:1.6rem; font-weight: 300; margin-top:1rem;}
.main-ment h2 {font-size: 5rem;}
.main-ment h3 {font-size:2.4rem; font-weight: 500;}
.main-ment p {font-size:1.6rem; margin-top:2rem; color:rgba(0,0,0,0.5);}
.section#section_01 .main-ment .dmt-btn {margin-top:3rem;}


/*섹션3 제품라인*/
.section#section_02 {width:100%; position: relative; padding-top:5rem;}
.section#section_02 .boundary .about-wrap {width:100%; background-image: url(../../../img/section-02-bg.jpg); background-repeat: no-repeat; color:#fff; padding-top:20rem; padding-bottom:15rem; background-color:#1E3786; background-size:cover; background-position: center;}
.section#section_02 .boundary .about-wrap .inner-boundary {width:100%; max-width: 1560px; margin: 0 auto; overflow: hidden; display: flex; justify-content: flex-start; align-items: stretch;}
.section#section_02 .boundary .about-wrap .inner-boundary .text-wrap {flex-basis: 50%; max-width: 50%;}
.section#section_02 .boundary .about-wrap .inner-boundary .text-wrap>.sns-container {display: flex; justify-content: flex-start;  align-items: center; flex-wrap: wrap; margin-bottom:7rem;}
.section#section_02 .boundary .about-wrap .inner-boundary .text-wrap>.sns-container>ul {display: flex; justify-content: flex-start; align-content: center;}
.section#section_02 .boundary .about-wrap .inner-boundary .text-wrap>.sns-container>ul>li {margin-right:2rem;}
.section#section_02 .boundary .about-wrap .inner-boundary .text-wrap>.sns-container>ul>li>a>img:last-child {display: none;}
.section#section_02 .boundary .about-wrap .inner-boundary .text-wrap>.sns-container>ul>li>a:hover img:first-child {display: none;}
.section#section_02 .boundary .about-wrap .inner-boundary .text-wrap>.sns-container>ul>li>a:hover img:last-child {display: block;}
.section#section_02 .boundary .about-wrap .inner-boundary .text-wrap>li {overflow: hidden;}
.section#section_02 .boundary .about-wrap .inner-boundary .text-wrap>li>h3 {font-size:2.4rem; font-weight: 400; margin-bottom:0.3rem;}
.section#section_02 .boundary .about-wrap .inner-boundary .text-wrap>li>h1 {font-size:6.5rem; margin-bottom:3rem; line-height: 1;}
.section#section_02 .boundary .about-wrap .inner-boundary .text-wrap>li>h4 {font-size:2rem; margin-bottom:2rem;}
.section#section_02 .boundary .about-wrap .inner-boundary .text-wrap>li>p {font-size:1.6rem; font-weight: 400; overflow: hidden; }

.section#section_02 .boundary .about-wrap .inner-boundary .img-wrap {position: absolute; bottom:6rem; right:10rem;}



.section#section_03 .boundary>.inner_boundary {display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
.section#section_03 .boundary>.inner_boundary>.item_container {display: flex; justify-content: space-between; align-items: flex-start; flex-basis: 50%; max-width: 50%; position: relative;  z-index: 1; top:15.5rem;}  
.section#section_03 .boundary>.inner_boundary>.item_container:last-child { display: flex; justify-content: flex-start; align-items: stretch; position: sticky; top:15.5rem; transition: all 0.4s cubic-bezier(.23,1,.32,1); padding-bottom:15rem;}
.section#section_03 .boundary>.inner_boundary>.item_container>.title {color:#333333; font-family: "Play"; font-weight: bold; padding-left:10rem; transition: all 0.4s cubic-bezier(.23,1,.32,1); }
.section#section_03 .boundary>.inner_boundary>.item_container>.title.fixed {position: fixed; top:10rem; transition: all 0.4s cubic-bezier(.23,1,.32,1);}
.section#section_03 .boundary>.inner_boundary>.item_container>.title.absolute {position: absolute; top:auto; bottom: -128rem; transition: all 0.4s cubic-bezier(.23,1,.32,1);}
.section#section_03 .boundary>.inner_boundary>.item_container>.title>div>h2 {font-size:10rem; line-height: 0.9;}
.section#section_03 .boundary>.inner_boundary>.item_container>.title>div>p {font-size:1.8rem; font-family: "SCoreDream"; font-weight: 400; margin-top:2rem;}
.section#section_03 .boundary>.inner_boundary>.item_container>.title>ul {font-size:2rem;}
.section#section_03 .boundary>.inner_boundary>.item_container>.title>ul>li {line-height: 1.2;}
.section#section_03 .boundary>.inner_boundary>.item_container>.title>ul>li>b{font-size:8rem; margin-right:2rem; line-height:1;} 
.section#section_03 .boundary>.inner_boundary>.item_container>.title>.blue {color:#223F99;}
.section#section_03 .boundary>.inner_boundary>.item_container>.content {flex-basis: 48%; max-width: 48%;}
.section#section_03 .boundary>.inner_boundary>.item_container>.content:last-child {margin-top:13rem;}
.section#section_03 .boundary>.inner_boundary>.item_container>.content>.item {background-color:#fff; flex-basis: 100%; max-width: 100%; margin-bottom:4rem;  height:59rem; color:#fff; position: relative; overflow: hidden; cursor: pointer;} 
.section#section_03 .boundary>.inner_boundary>.item_container>.content>.item>img { position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); transition: all 0.4s cubic-bezier(.23,1,.32,1); transform-origin:center center; vertical-align: middle; width: 100%; height:100%;}
.section#section_03 .boundary>.inner_boundary>.item_container>.content>.item:hover>img {transform: translate(-50%,-50%) scale(1.05);}
/* .section#section_03 .boundary>.inner_boundary>.item_container>.content>.item:hover:not(img) {filter:blur(100);} */
.section#section_03 .boundary>.inner_boundary>.item_container>.content>.item#pd-01>a>img {position: absolute; bottom:0%; left:50%; transform: translate(-40%,-0%); max-width: 100%; z-index: 2;} 
.section#section_03 .boundary>.inner_boundary>.item_container>.content>.item#pd-02>a>img {position: absolute; bottom:0%; left:50%; transform: translate(-40%,-0%); max-width: 100%; z-index: 2;}
.section#section_03 .boundary>.inner_boundary>.item_container>.content>.item#pd-03>a>img {position: absolute; bottom:0%; left:50%; transform: translate(-40%,-0%); max-width: 100%; z-index: 2;}
.section#section_03 .boundary>.inner_boundary>.item_container>.content>.item>a {color:#fff; position: relative; width:100%; height:100%; padding:5rem 2rem; z-index: 2; position: relative;}
.section#section_03 .boundary>.inner_boundary>.item_container>.content>.item>a>h3 {font-size:3.2rem; line-height: 1.2; position: relative; z-index: 2;}
.section#section_03 .boundary>.inner_boundary>.item_container>.content>.item>a>p {font-size:1.6rem; font-family: "Play"; font-weight: bold; position: relative; z-index: 2;}
.section#section_03 .boundary>.inner_boundary>.item_container>.content>.item>a>img {transition: all 0.4s;}

.section#section_03 .boundary>.inner_boundary>.item_container>.content>.item:hover#pd-01>a>img {transform: translate(-50%,-0%);}
.section#section_03 .boundary>.inner_boundary>.item_container>.content>.item:hover#pd-02>a>img {transform: translate(-50%,-0%);}
.section#section_03 .boundary>.inner_boundary>.item_container>.content>.item:hover#pd-03>a>img {transform: translate(-50%,-0%);}



.section#section_04 {background-image:url(../../../img/section-04-bg.webp); width:100%; background-repeat: no-repeat; background-size: cover; padding-top:20rem; padding-bottom:15rem; position: relative; z-index: 1;}
.section#section_04 .title {text-align: right; color:#fff;}
.section#section_04 .title>div>p {font-size:3rem;}
.section#section_04 .title>div>h2 {font-family: "Play"; text-transform: uppercase; font-size:8rem; line-height: 1.1;}
.section#section_04 .news-container {position: absolute; top:100%; left:50%; transform: translate(-50%,-50%); right:1rem; z-index: 1; width: 100%; align-items: stretch; max-width: 1920px;}
.section#section_04 .news-container .pagenation {flex-basis: 37.5%; max-width: 37.5%; z-index: 1; position: relative; padding:4rem; padding-top:0;} 
.section#section_04 .news-container .pagenation .button-wrap {display: flex; justify-content: flex-end; margin-bottom:3.7rem;}
.section#section_04 .news-container .pagenation .button-wrap>.button {cursor: pointer;}
.section#section_04 .news-container .pagenation .button-wrap>.button:first-child:hover img{position: relative; transform: translateX(-0.4rem);}
.section#section_04 .news-container .pagenation .button-wrap>.button:last-child:hover img{position: relative; transform: translateX(0.4rem);}
.section#section_04 .news-container .pagenation .button-wrap>.button>img {transition: all 0.4s;}
.section#section_04 .news-container .pagenation .page-container {display: flex; justify-content: flex-end;}
.section#section_04 .news-container .pagenation .page-container .page-line {width:100%; max-width: 39rem;; background-color:rgba(255,255,255,0.5); height:4px; position: relative;}
.section#section_04 .news-container .pagenation .page-container .page-line>div {position: absolute; top:0; left:0; width:0%; height:4px; background-color:#fff; animation: line-animation 5s linear forwards;}

@-webkit-keyframes line-animation {
  from {
     width:0;
  }
  to {
    width:100%;
  }
}

.wrap #section_01 #slide-02 .content .item:first-child {flex-basis: 100%; max-width: 100%;}
.section#section_04 .news-container .pagenation .button-wrap .button {width:9rem; height:9rem; background-color:#fff;}
.section#section_04 .news-container .pagenation .button-wrap .button:last-child {margin-left:1rem;}
.section#section_04 .news-container #news-wrap {flex-basis: 62.5%; max-width: 62.5%; overflow: hidden; padding-right:1rem; }
.section#section_04 .news-container #news-wrap .swiper-wrapper {width: 100%;}
.section#section_04 .news-container #news-wrap .swiper-wrapper .swiper-slide {background-color:#fff; padding:2.5rem; width:100%;}
.section#section_04 .news-container #news-wrap .swiper-wrapper .swiper-slide:hover {background-color:#1E3786; color:#fff;}
.section#section_04 .news-container #news-wrap .swiper-wrapper .swiper-slide:hover .detail>li>p {color:rgba(255,255,255,0.7);}
.section#section_04 .news-container #news-wrap .swiper-wrapper .swiper-slide>.head {width:100%; margin-bottom:4rem;}
.section#section_04 .news-container #news-wrap .swiper-wrapper .swiper-slide>.head>.type {font-size:1.4rem; margin-right:2rem; padding:0.5rem 2rem; background-color:black; color:#fff; border-radius: 5rem; vertical-align: middle;} 
.section#section_04 .news-container #news-wrap .swiper-wrapper .swiper-slide>.head>.date {font-size:1.6rem;}
.section#section_04 .news-container #news-wrap .swiper-wrapper .swiper-slide>.body {margin-bottom:3rem;}
.section#section_04 .news-container #news-wrap .swiper-wrapper .swiper-slide>.body>li>h3 {font-size:2.4rem; line-height: 1.2;  width:100%; text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2;  -webkit-box-orient: vertical;}
.section#section_04 .news-container #news-wrap .swiper-wrapper .swiper-slide>.detail>li>p {font-size:1.6rem; line-height: 1.2; margin-bottom:2rem; width:100%; text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2;  -webkit-box-orient: vertical; color:rgba(0,0,0,0.6);}
.section#section_04 .news-container #news-wrap .swiper-wrapper .swiper-slide>.button {display: flex; justify-content: flex-end;}
.section#section_04 .news-container #news-wrap .swiper-wrapper .swiper-slide>.button>li{background-color:black; width:6rem; height:6rem;}
.section#section_04 .text-line {margin-bottom:20rem;}


/*섹션1*/
@keyframes down{
  from{
      top:-20%;
  }
  to{
      top:-25%;
  }
}

@keyframes down-02{
  from{
      top:50%;
  }
  to{
      top:55%;
  }
}



.popup-wraps {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 999;
  flex-wrap: wrap;
  /* display: none; */
}
.popup-wraps .content {
  width: 100%;
  height: auto;
  max-width: 400px;
  margin: 1%;
  transition: all 0.4s;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  border:1px solid rgba(255,255,255,0.5);
}

.popup-wraps .content .img-wraps {width:100%;}
.popup-wraps .content .img-wrap>a {vertical-align: middle;}

.popup-wraps .content .img-wraps img {
  width: 100%;
  background-color: #fff;
  vertical-align: middle;
}
.popup-wraps .content .text-wraps {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  color: #333333;
  background-color: #fafafa;
  width: 100%;
}
.popup-wraps .content .text-wraps div {
  flex-basis: 50%;
  max-width: 50%;
  text-align: center;
  transition: all 0.4s;
  cursor: pointer;
  /* border: 1px solid #ddd; */
  padding: 10px;
  background-color: #000000;
  font-size: 14px;
  color:#fff;
}
.popup-wraps .content .text-wraps div:first-child {border-right:1px solid rgba(255,255,255,0.1);}
.popup-wraps .content .text-wraps div:hover {
  opacity: 0.7;
}
.pop_none {
  display: none;
}

/* .animated {opacity: 0;} */