@charset "utf-8";


/*공통*/
.section .titset {
  display: flex;
  flex-direction: column;
  gap: 6px 0;
  margin: 50px 0 30px;
}
.section .titset .cg{
  font-size: 20px;
  letter-spacing: -1.5px;
  margin-left: 5px;
}
.en .section .titset .cg{
  letter-spacing: -.5px;
}
.section .hd4 {
  color: #111;
  line-height: 1.25;
  overflow: hidden;
}
.section .titset .cg + .hd3{
  margin-top: 15px;
}


/*fullpage*/
.fullpage .section{
  width: 100%;
  overflow: hidden;
}

/*fullpage nav*/
#fp-nav{
  display: none;
}

/*banner*/
.curve{
  z-index: 1;
  height: 500px;
  background-color: #fff;
  width: 160%;
  border-radius: 50%;
  position: absolute;
  left:50%;
  bottom: -445px;
  transform: translate(-50%, 0);
  margin: 0 auto;
}

.main-banner .banner-ot{
  height: 100%;
}
.main-banner .banner-inner{
  height: 100%;
}
.main-banner .banner-inner .banner{
  width: 100%;
  height: 100%;
  position: relative;
}
.main-banner .banner-inner .banner .titset{
  position: absolute;
  top:50%;
  /*left: 50%;*/
  transform: translate(0, -50%);
  z-index: 1;
  text-align: center;
  width: 100%;
  display: inline-block;
}
.main-banner .banner-inner .banner .titset .hd2{
  color:#fff;
  font-family: 'Montserrat', sans-serif;
  white-space : nowrap
}
.main-banner .banner-inner .banner .titset .mtxt{
  font-size: 20px;
  color:#fff;
  margin-top: 30px;
  font-weight: 300;
}
.main-banner .banner-inner .banner .banner-bg{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.main-banner .banner-inner .banner.ty1 .banner-bg{
  background: url(../img/main/main-banner-01.jpg)no-repeat center/cover;
  height: 100%;
  filter: brightness(50%);
}
.main-banner .banner-inner .banner.ty2 .banner-bg{
  background: url(../img/main/main-banner-02.jpg)no-repeat center/cover;
  height: 100%;
}
.main-banner .banner-inner .banner.ty3 .banner-bg{
  background: url(../img/main/main-banner-03.jpg)no-repeat center/cover;
  height: 100%;
}
.main-banner .banner-inner .banner.ty4 .banner-bg{
  background: url(../img/main/main-banner-04.jpg)no-repeat center/cover;
  height: 100%;
}

.banner-inner .slick-active .banner-bg {
  width: 100%;
  animation: scaleAni 4s ease-out;
}
@keyframes scaleAni { 
0% {transform:scale(1.05)}
100% {transform:scale(1)}
}
.slick-dots li.slick-active button:before,
.slick-dots li.slick-active button{
    opacity:1
}

.slick-list, .slick-track, .slick-slide > div{
  height: 100%;
}

/*dot*/
.pagination {
  position: absolute; 
  left: 50%;
  transform: translate(-50%, 0); 
  bottom:28%; 
  height: auto;
   z-index:10;
  }
.pagination .inner {
  margin: 0 auto;
}
.slick-dots {
  display: flex;
}
.slick-dots li {
  position: relative;  
  display: flex; 
  justify-content: center;
  align-items: center;
}
.slick-dots li + li {
  margin-left: 12px;
}
.slick-dots li button {
  opacity:.5; 
  display: block; 
  width: 9px; 
  height: 9px; 
  padding: 0; 
  border: none;  
  border-radius: 100%;
  background-color: #fff; 
  text-indent: -9999px; 
  cursor: pointer;
  transition: .3s;
}
.slick-dots li.slick-active  button{
  width: 30px;
  border-radius: 10px;
}
.slick-dots li button:hover,
.slick-dots li button:focus {
  outline: none; 
}

.section.main-banner .titset{
  margin: 0;
}


/*section2 prd*/
.title-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 26.04vw;
  height: 26.04vw;
  /*position: absolute;
  top: 0;
  left: 0;
  z-index: 200;*/
}

.title-wrap .inner {
  padding: 0 50px 40px;
  overflow: hidden;
}

.title-wrap .inner .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 20px;
  font-size: 30px;
  color: #fff;
}

/* 스와이퍼 커스텀 */
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  border: 1px solid #e4e4e4;
  box-sizing: border-box;
  overflow: hidden;
}

.swiper-slide .simg{
  width: 100%;
  height: 100%;
}

.swiper-slide img {
  width: 100%;
  object-fit: contain;
  height: 100%;
  max-width: 100%;
}

.swiper-button-next, .swiper-button-prev {
  width: 50px;
  height: 50px;
  background: none;
}

.swiper-button-next::before, .swiper-button-next::after, .swiper-button-prev::before, .swiper-button-prev::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  background-color: #fff;
}

.swiper-button-next::before, .swiper-button-prev::before {
  transform: translateY(12px) rotate(45deg);
}

.swiper-button-next::after, .swiper-button-prev::after {
  transform: translateY(34px) rotate(-45deg);
}

.swiper-button-next {
  right: -70px;
}

.swiper-button-prev {
  left: -70px;
  transform: rotate(180deg);
}

/* 메인 슬라이더 & 썸네일 */
.slider-wrap {
  height: 660px;
  margin: 0 auto;
}

.slider-wrap .swiper-container {
  width: 100%;
  max-width: 400px;
}

.slider-wrap .swiper-container.slider {
  /* 메인 슬라이더 */
  height: 492px;
}

.slider-wrap .swiper-container.slider .swiper-button-next, 
.slider-wrap .swiper-container.slider .swiper-button-prev {
  width: 30px;
}

.slider-wrap .swiper-container.slider .swiper-button-next::before, 
.slider-wrap .swiper-container.slider .swiper-button-next::after, 
.slider-wrap .swiper-container.slider .swiper-button-prev::before, 
.slider-wrap .swiper-container.slider .swiper-button-prev::after {
  width: 26px;
}

.slider-wrap .swiper-container.slider .swiper-button-next::before, 
.slider-wrap .swiper-container.slider .swiper-button-prev::before {
  transform: translateY(14px) rotate(45deg);
}

.slider-wrap .swiper-container.slider .swiper-button-next::after, 
.slider-wrap .swiper-container.slider .swiper-button-prev::after {
  transform: translateY(30px) rotate(-45deg);
}

.slider-wrap .swiper-container.slider .swiper-button-next {
  right: 0;
}

.slider-wrap .swiper-container.slider .swiper-button-prev {
  left: 0;
}

.slider-wrap .swiper-container.slider-thumbnail {
  /* 썸네일 슬라이더  */
  height: 160px;
  margin-top: 4px;
}

.slider-wrap .swiper-container.slider-thumbnail .swiper-slide {
  opacity: 0.5;
  overflow: hidden;
}

.slider-wrap .swiper-container.slider-thumbnail .swiper-slide-thumb-active {
  opacity: 1;
}

.title-wrap .slider-title .swiper-slide {
  border: 0;
}

.title-wrap .slider-title .swiper-slide img {
  border: 5px solid #fff;
  box-sizing: border-box;
}

.title-wrap .slider-title .swiper-pagination {
  bottom: -36px;
}

.title-wrap .slider-title .swiper-pagination-bullet {
  opacity: 1;
  background: #7f7f7f;
}

.title-wrap .slider-title .swiper-pagination-bullet-active {
  background: #fff;
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
  opacity: 0;
}





/**/

.main-prd{
  background: url(../img/main/prd-bg.jpg)no-repeat;
  background-position: bottom;
  background-size: 100%;
  padding-left: 100px;
}
.main-prd .prd-ot{
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, 1fr);
}
.main-prd .slider-wrap, 
.main-prd .slider-wrap .swiper-container.slider{
  height: 100%;
}
.main-prd .swiper-slide{
  border: 0;
}


/*title*/
.main-prd .slider-title{
  align-self : end;
}
.main-prd .title-wrap{
  background: transparent;
  height: 100%;
}
 .title-wrap .inner{
  padding: 0;
}
.main-prd .slider-title .swiper-slide{
  justify-content: flex-start;
}
.main-prd .titset{
  margin: 100px 0 0;
}


/*img*/
.img-wrap.prd-img{
  grid-row: 1/3;
  grid-column: 2/4;
  align-self: end;
  justify-self: end;
  margin-bottom: -50px;
  width: 100%;
  height: 100%;
}
.img-wrap.prd-img .case1{
  height: 100%;
}
.img-wrap.prd-img .case1 .slider-wrap{
  position: relative;
}
.img-wrap.prd-img .case1 .slider-wrap .swiper-container{
  max-width: inherit;
  position: absolute;
  top: 0;
  left: 0
}

/*tuumb*/
.img-wrap.thumb{
  display: flex;
  align-items: center;
  width: 100%;
}
.slider-wrap .swiper-container.slider-thumbnail{
  max-width: 22.71vw;
  height: 5.21vw;
  position: relative;
}
.slider-thumbnail .swiper-wrapper .swiper-slide{
  background: #F5E5E6;
  cursor: pointer;
}

/*bullets*/
.swiper-pagination-fraction, 
.swiper-pagination-custom, 
.swiper-horizontal > .swiper-pagination-bullets, 
.swiper-pagination-bullets.swiper-pagination-horizontal{
  bottom: inherit;
  left: inherit;
}
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, 
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
  width: 33.3%;
  height: 5px;
  border-radius: 0;
  margin: 0;
  z-index: 100;
  background: #fff;
}
.swiper-pagination{
  position: inherit;
  margin-top: 10px;
}

.prd-img .swiper-slide > img{
  margin-bottom: -50px;
}
.prd-img .swiper-slide:nth-child(3) > img{
  margin-bottom: -100px;
}
.slider-thumbnail .swiper-wrapper .swiper-slide:nth-child(1) .thumb-set,
.slider-thumbnail .swiper-wrapper .swiper-slide:nth-child(3) .thumb-set{
  margin-bottom: -13px;
}



/*about*/
.main-about{
  background: url(../img/main/about-bg.jpg)no-repeat center/cover;
}
.main-about .about-ot {
  flex-direction: column;
  text-align: center;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2%;
}
.main-about .about-ot .logo {
  width: 300px;
  position: relative;
  top: 50%;
  margin: 0 auto;
}
.main-about .about-ot .logo.on {
  width: 142px;
  top: 0;
}
.main-about .about-ot .logo > img{
  width: 100%;
}
.main-about .about-ot .box {
  width: 100%;
  padding: 0 20px;
}
.main-about .about-ot p {
  color: #777;
  font-weight: 500;
  line-height: 1.4;
}










/*global*/

.main-global .box {
  padding: 0;
}
.main-global .box,
.main-global .titbox-ot,
.main-global .itembox-ot {
  width: 100%;
  height: 100%;
}
.main-global .bg {
  width: 240px;
  height: 240px;
  border-radius: 30px;
  overflow: hidden;
  position: absolute;
  right: 100px;
  bottom: 60px;
  z-index: 1;
  -webkit-transition: all 1.0s;
  transition: all 1.0s;
}

.main-global .bg .img-mb{
  display: none;
}
.main-global .bg::after {
  content: "";
  display: block;
  opacity: 0;
  -webkit-transition: all 0.8s;
  transition: all 0.8s;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.main-global .bg img {
  max-width: inherit;
  max-height: 100%;
  /* transform: translateX(-14%);*/
  transition: all 1.0s;
  height: 100%;
  object-fit: cover;
}
.main-global .bg.on {
  width: 100%;
  height: 100%;
  border-radius: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}
.main-global .bg.on::after {
  opacity: 1;
  transition-delay: 0.4s;
}
.main-global .bg.on img {
  min-width: 100%;
  min-height: 100%;
  transform: translateX(0);
}
.main-global .titbox-ot {
  flex-direction: column;
  background: #ffffff;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-global .titbox-ot .inner{
  position: relative;
}
.main-global .titbox-ot .inner .tit-box .titset .hd4{
  text-align: center;
  z-index: 1;
}
.main-global .titbox-ot .inner .tit-box .titset .hd4.mb{
  display: none;
}
.main-global .titbox-ot .inner .bgtxt-box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.main-global .titbox-ot .inner .bgtxt-box .bgtxt{
  color:#f5f5f5;
  font-size: 160px;
  font-weight: 800;
  line-height: 154px;
}
.main-global .titbox-ot .inner .bgtxt-box .bgtxt:nth-child(2){
  margin-left: 120px;
}
.main-global .itembox-ot{
  z-index: 3;
  transition: all 1s
}
.main-global .itembox-ot.on { 
  opacity: 1;
}
.main-global .itembox-ot .tit-box{
  opacity: 0;
}
.main-global .itembox-ot.on .tit-box{
  z-index: 3;
  position: absolute;
  top: 250px;
  left: 100px;
  transition: all 2s;
  opacity: 1;
}
/*.main-global .itembox-ot .tit-box *:not(span){
  transition: all 1s
}*/
.main-global .itembox-ot .tit-box .titset .cg{
  color:#ccc
}
.main-global .itembox-ot .tit-box .titset .hd3{
  color:#fff
}
.main-global .btnset > a{
  position: absolute;
  z-index: 999;
}








/*section count*/
.main-count{
  background: url(../img/main/count-bg.jpg)no-repeat center/cover;
}
.main-count .box{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
}
.main-count .box .inner .titset{
  text-align: center;
  margin: 60px 0 100px
}
.main-count .box .inner .titset .cg{
  color:#ccc;
  font-size: 22px;
}
.main-count .box .inner .titset .hd4{
  color: #fff;
  margin-top: 5px;
}
.main-count .box .inner .conset{
  display: flex;
  gap:100px;
  text-align: center;
}
.main-count .box .inner .conset .conbox{}
.main-count .box .inner .conset .conbox .cgset{}
.main-count .box .inner .conset .conbox .cgset .cg{
  color:#E10314;
  font-size: 22px;
}
.main-count .box .inner .conset .conbox .cgset .cg::before{
  content: "";
  display: inline-block;
  background: url(../img/main/count-icoset.png);
  background-size: cover;
  width: 24px;
  height: 24px;
  vertical-align: text-top;
  margin-right: 7px;
}
.main-count .box .inner .conset .conbox .cgset .cg.ty2::before{
  background-position: -97px;
}
.main-count .box .inner .conset .conbox .cgset .cg.ty3::before{
  background-position: -195px;
}
.main-count .box .inner .conset .conbox .countset{
  margin: 10px 0 20px;
}
.main-count .box .inner .conset .conbox .countset .count-num{
  color:#fff;
  font-size: 100px;
  letter-spacing: -2.7px;
}
.main-count .box .inner .conset .conbox .txtset .stxt{
  color:#ddd;
}



/*section main-media*/
.main-media{
  padding: 0 100px;
 
}
.main-media .inner{
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding-top: 100px;
}
.main-media .inner .titbox .titset{
  margin-top: 80px;
}
.main-media .inner .conbox{
  display: flex;
  flex-direction: column;
  gap:3.65vw;
  margin-top: 4.17vw;
}
.main-media .inner .conbox .box-in{}
.main-media .inner .conbox .box-in .tit-ot{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.main-media .inner .conbox .box-in .tit-ot .titset{
  margin: 0 0 20px;
  gap: 0;
}
.main-media .inner .conbox .box-in .tit-ot .titset .id{
  font-size: 16px;
  letter-spacing: -.3px;
  padding-left: 10px;
  font-weight: 500;
}
.main-media .inner .conbox .box-in .tit-ot .titset .stxt{
  font-size: 14px;
  color:#666
}
.main-media .inner .conbox .box-in .tit-ot .btnset{
  margin-top: inherit;
}
.main-media .inner .conbox .box-in .con-ot .conset{
  display: flex;
  gap: 5px;
}
.main-media .inner .conbox .box-in .con-ot .conset .video-con{
  flex: 1;
}
.main-media .inner .conbox .box-in .con-ot .conset .video-con > iframe{
  border-radius: 10px;
  width: 20vw;
  height: 10vw;
}
.my_instagram {
  list-style: none;
  padding: 0;
  margin: 0;
  display:flex;
  gap:5px
}

.my_instagram li {
  flex: 1;
  width: 11.9vw;
  height: 11.9vw;
  border: 1px solid #ebebeb;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;;
}

.my_instagram li img {
  max-width: 100%;
  object-fit: cover;
}

.my_instagram li a {
  display: block;
  position: relative;
}

.my_instagram li a::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  transition: all .5s;
}

.my_instagram li a:after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: url(../img/main/insta-ico.png) no-repeat 0 0;
  width: 60px;
  height: 25px;
  background-position: center;
  background-size: cover;
  opacity: 0;
  transition: all .5s;
}




/*en*/