/* 메인 */
.section{height: 100%; overflow: hidden;}

.container{
  margin: auto;
  overflow: hidden;
  height: 100vh;
}

/* main */
.main-bg{
  position: relative;
  /* background: url(/public/_img/main-bg.png) no-repeat center / cover; */
  height: 100vh;
}
.main-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(/public/_img/main-bg.png) no-repeat center / cover;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  z-index: -1;
}
.main-bg.bg-loaded::before {
  opacity: 1;
}
.main-box{
  padding-top: 150px;
  width: 60vw;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 3.5fr 1fr 1fr;
  align-items: end;
  justify-content: center;
  padding-right: 30px;
}
.main-cap2{
  grid-column: 5 / span 1;
}
.main-box img{
  width: 120%;
}
.main-drink2,.main-drink4{
  z-index: 2;
}
.main-drink3{
  animation-delay: 0.2s;
}
.main-machine{
  margin-left: -30px;
  transition: 0.5s;
}
.main-machine:hover{
  scale: 1.03;
}
.main-cap1{
  z-index: 2;
  transform: translate(-70%,10%);
}
.main-cap2{
  z-index: 2;
  transform: translate(60%,-50%);
}
.main-box img:nth-of-type(5){
  width: 130%;
}
.main-deco img{
  position: absolute;
}
.main-deco1{
  bottom: 22%;
  left: 8%;
  width: 7%;
}
.main-deco2{
  top: 11%;
  right: 34%;
  width: 3.4%;
}
.main-deco3{
  bottom: 8%;
  right: 20%;
  width: 7%;
}
.main-deco4{
  top: 50%;
  left: 17%;
  width: 5.3%;
}
.main-deco5{
  top: 40%;
  right: 16%;
  width: 8%;
  animation-delay: 0.5s;
}
.main-txt1{
  top: 22%;
  left: 13%;
  width: 16vw;
  animation-delay: 1s;
}
.main-txt2{
  top: 29%;
  right: 26%;
  width: 10vw;
}
.main-txt3{
  top: 17%;
  right: 14%;
  width: 9vw;
}
h1.main-title{
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'HakgyoansimDunggeunmisoTTF-B';
  color:#f46e91;
  font-size: 10.6rem;
  font-weight: normal;
  line-height: 40px;
  transition: 1.5s ease-in-out;
}
.main-title i{
  font-family: 'Cafe24Lovingu';
  color: #e81e75;
  font-size: 6.9rem;
  font-style: normal;
  letter-spacing: -5px;
}
.main-title.bg-loaded{
  color: #fff;
}
.mouse{
  position: absolute;
  bottom: 3%;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  animation: mouse 1.5s ease-in-out infinite;
}
.mouse img{
  margin-bottom: 0.3rem;
}
@keyframes mouse {
  0% {transform: translate(-50%,0); opacity: 0.6;}
  50% {transform: translate(-50%,10px); opacity: 0.9;}
  100% {transform: translate(-50%,0); opacity: 0.6;}
}
/* menu */
.new-slide{
  margin: auto;
  margin-top: 100px;
  width: 75vw;
}
.new-box{
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 50px;
  margin-top: 30px;
  border: none;
}
.new-txt{
  text-align: left;
  width: 48%;
}
.new-txt h5{
  margin-bottom: 10px;
}
.new-txt h3{
  margin-bottom: 50px;
}
.new-txt h4{
  border-bottom: 2px solid #e81e75;
  padding-bottom: 15px;
  margin-bottom: 20px;
}
.new-txt p{
  color: #666;
  font-size: 1.25rem;
  margin-bottom: 60px;
}

.new-img{
  border-radius: 20px;
  overflow: hidden;
  width: 52%;
}
.new-img img{
  width: 100%;
}
.new-slide-dots{
  position: absolute;
  bottom: 2%;
  right: 22%;
}
.new-slide-dots li{
  display: inline-block;
}
.new-slide-dots li button{
  font-size: 0;
  width: 10px;
  height: 10px;
  border-radius: 50px;
  margin: 0 3px;
  background-color: rgba(255, 255, 255, 0.5);
  transition: 0.3s;
}
.new-slide-dots li.slick-active button{
  background-color: #fff;
  width: 25px;
}
/* demonstration */
#section3 .container{  
  background-image: linear-gradient(to bottom, #ff5a85 82%, #f5f5f5 18%);

}
.demon-box{
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 50px;
  margin: auto;
  margin-top: 150px;
  border: none;  
  width: 75vw;
}
.demon-txt{
  text-align: left;
  width: 50%;
  color: #fff;
  position: relative;
}
.demon-txt h3{
  margin-bottom: 50px;
}
.demon-txt p{
  font-size: 1.6rem;
  line-height: 36px;
  margin-bottom: 60px;
}
.demon-txt button{
  border: 2px solid #fff;
  color: #fff;
  margin-right: 20px;
}
.demon-txt button:hover{
  background-color: #fff;
  color: #ff5a85;
}
.demon-deco img{
  position: absolute;
}
.demon-deco1{
  width: 19%;
  top: -35%;
  left: -12%;
  animation-delay: 0.3s;
}
.demon-deco2{
  width: 7%;
  bottom: -30%;
  right: 15%;
}
.demon-deco3{
  width: 21%;
  top: 30%;
  right: 0;
}
.demon-deco4{
  width: 19%;
  top: -50%;
  right: -5rem;
  z-index: 1;
}
.demon-slide{
  border-radius: 20px;
  overflow: hidden;
  width: 50%;
}
.demon-slide img{
  width: 100%;
}
.demon-slide-dots{
  position: absolute;
  bottom: 2%;
  right: 45%;
}
.demon-slide-dots li{
  display: inline-block;
}
.demon-slide-dots li button{
  font-size: 0;
  width: 10px;
  height: 10px;
  border-radius: 50px;
  margin: 0 3px;
  background-color: rgba(255, 255, 255, 0.5);
  transition: 0.3s;
}
.demon-slide-dots li.slick-active button{
  background-color: #fff;
  width: 25px;
}

/* startup story */
#section4 .container{
  background-color: #fdf2e7;
}
.story-box{
  margin-top: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}
.story-txt{
  text-align: left;
  margin-left: 12vw;
  /* width: 40vw; */
}
.story-txt p{
  color: #666;
  font-size: 1.25rem;
  margin-top: 40px;
  margin-bottom: 60px;
}
.story-img{
  position: relative;
  height: calc( 100vh - 100px);
}
.story-bg{
  height: 90vh;
  width: 52vw;
}
.story-slide{
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%,-50%);
  margin: auto;
  width: 65%;
}
.story-deco img:nth-child(n+2){
  position: absolute;
}
.story-drink1{
  bottom: 9%;
  left: -3%;
  width: 19%;
}
.story-drink2{
  bottom:5%;
  left: 9%;
  width: 19%;
  animation-delay: 0.3s;
}
.story-cap{
  bottom: 3%;
  left: -9%;
  width: 15%;
}
.story-bean{
  width: 25%;
  right: 5%;
  bottom: 5%;
}


/* unmanned cafe */
.cafe-box{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
}
.cafe-txt{
  text-align: left;
  margin-left: 12vw;
}
.cafe-txt h3{
  width: 80%;
}
.cafe-txt p{
  color: #666;
  font-size: 1.25rem;
  margin-top: 40px;
  margin-bottom: 60px;
}
.cafe-img{
  width: 50vw;
  position: relative;
}
.cafe-img img{
  height: 100vh;
}
.cafe-deco img{
  position: absolute;
  height: auto;
}
.cafe-deco img:nth-child(1){
  width: 11%;
  top: 100px;
  left: 8vw;
}
.cafe-deco img:nth-child(2){
  width: 9%;
  top: 45%;
  right: 7vw;
  animation-delay: 0.2s;
}
.cafe-deco img:nth-child(3){
  width: 7%;
  bottom: 120px;
  left: 6vw;
}

/* coffee truck */
#section6 .container{
  background-color: #000;
  background: linear-gradient(90deg,rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 50%) , url(/public/_img/truck-bg.jpg) no-repeat bottom / cover;
  display: flex;
  align-items: center;
  position: relative;
}
.truck-box{
  color: #fff;
  text-align: left;
  width: 76vw;
  margin: auto;
  position: relative;
}
.truck-box p{
  font-size: 1.25rem;
  margin-top: 60px;
  margin-bottom: 60px;
}
.truck-box span{
  display: block;
  width: 420px;
  height: 20px;
  background-color: #e81e75;
  margin-top: -24px;
}
.truck-box .btn2{
  border: 2px solid #fff;
  color: #fff;
}
.truck-box .btn2:hover{
  background-color: #fff;
  color: #e81e75;
}
.truck-deco img{position: absolute;}
.truck-deco img:nth-child(1){
  left: 45%;
  top: 20%;
}
.truck-deco img:nth-child(2){
  left: 57%;
  top: 0;
}
.truck-deco img:nth-child(3){
  right: 3%;
  top: 10%;
}
/* sns */
#section7 h3{
  margin-top: 100px;
}
.sns-menu{
  margin: 45px auto 25px auto;
}
.sns-menu li{
  display: inline-block;
  font-size: 1.9rem;
  font-weight: 500;
  border-bottom: 2px solid #ddd;
  width: 25vw;
  padding-bottom: 20px;
  cursor: pointer;
  transition: 0.3s;
}
.sns-menu li:hover{
  border-bottom: 2px solid #e81e75;
}
.sns-menu li.active{
  border-bottom: 2px solid #e81e75;
}
.sns-slide{
  position: relative;
  width: 120vw;
  margin-left: -10vw;
}
.sns-slide img{
  transition: 0.3s;
}
.sns-slide img:hover{
  scale: 1.07;
}
.sns-slide::before{
  content: ' ';
  position: absolute;
  top: 0;
  left: 10vw;
  z-index: 2;
  background-color: rgba(255, 255, 255, 0.4);
  width: 13.8vw;
  height: 100%;
}
.sns-slide::after{
  content: ' ';
  position: absolute;
  top: 0;
  right: 10vw;
  z-index: 2;
  background-color: rgba(255, 255, 255, 0.4);
  width: 13.8vw;
  height: 100%;
}
/* 슬라이드 화살표 */
.sns-slide .slick-arrow{
  z-index: 2;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  border: 2px solid #fff;
  font-size: 0;
  color: #fff;
}
.sns-slide .slick-prev{
  position: absolute;
  top: 50%;
  left: 25vw;
  transform: translateY(-50%);
}
.sns-slide .slick-prev::before{
  content: url('/public/_img/icon/angle-left.svg');
}
.sns-slide .slick-next{
  position: absolute;
  top: 50%;
  right: 25vw;
  transform: translateY(-50%);
}
.sns-slide .slick-next::before{
  content: url('/public/_img/icon/angle-right.svg');
}
.insta-slide li{
  margin: 0 10px; 
  overflow: hidden; 
}
.insta-slide li img{
  width: 100%;
}
.blog-slide li{
  border-radius: 20px;
  overflow: hidden;
  text-align: left;
  border: 1px solid #e2e2e2;
  margin: 0 10px;
}
.blog-slide li img{
  width: 100%;
}
.blog-slide li p{
  font-size: 1.4rem;
  font-weight: 500;
  padding: 20px;
}
.blog-slide li small{
  display: block;
  padding: 20px;
  font-weight: 500;
  font-size: 1rem;
}
.youtube-list ul{
  display: flex;
  justify-content: center;
  gap: 30px;
}
.youtube-list li{
  width: 36vw;
  border-radius: 30px;
  overflow: hidden;
}
.youtube-list li img{
  width: 100%;
}
.youtube-list .btn2{
  padding: 10px 80px;
  margin-top: 50px;
}
.sns-slide.youtube-list:before,  .sns-slide.youtube-list:after{display: none;}

/* 순서중요 */
.sns-slide{
  opacity: 0;
  height: 0;
}
.sns-slide.active{
  opacity: 1;
  height: 100%;
}

/* kakaotalk */
#section8 .container{
  background-color: #fffafc ;
}

/* 반응형 */
@media screen and (max-width: 1280px){
  .main-box{padding-top: 130px; width: 70vw;}
  .main-deco1{bottom: 28%; left: 2%;}
  .main-deco2{top: 13%;}
  .main-deco3{bottom: 7%; right: 10%; z-index: 2; width: 9%;}
  .main-deco4{left: 12%;}
  .main-deco5{right: 11%;}
  .main-txt1{left: 11%; width: 18vw;}
  .main-txt2{right: 22%; width: 12vw;}
  .main-txt3{right: 11%; width: 10vw;}
  h1.main-title{font-size: 9rem;}
  .main-title i{font-size: 6rem;}
  .mouse img{width: 28px;}
  .new-slide{width: 90vw;}
  .new-txt{width: 50%;}
  .new-txt p{font-size: 1.2rem;}
  .new-img{width: 50%;}
  .demon-box{width: 90vw;}
  .demon-deco1{top: -42%; left: -4%;}
  .demon-deco3{top: 16%;}
  .demon-deco4{top: -38%;}
  .demon-txt p{font-size: 1.3rem; line-height: 30px;}

  .story-img{margin-right: -50px;}
  .story-bg{width: 64vw;}
  .story-txt{margin-left: 6vw;}
  .cafe-txt{margin-left: 9vw;}
  .cafe-img{width: 49vw;}
  .cafe-img img{transform: translateX(-3vw);}
  .cafe-txt h3{width: 90%;}
  .cafe-txt p{margin-bottom: 30px;}
  .cafe-deco img:nth-child(2){right: 7%;}
  .truck-box{margin-left: 6vw;}
  .truck-box p{font-size: 1.2rem;}
  .truck-box span{width: 340px;}
  .truck-deco img:nth-child(1){width: 7vw; left: 52%; top: 100%;}
  .truck-deco img:nth-child(2){width: 3vw; left: 62%; top: 34%;}
  .truck-deco img:nth-child(3){width: 6vw; right: -11%;}
  .sns-menu li{width: 30vw; font-size: 1.7rem;}
  .sns-slide::before{width: 19vw;}
  .sns-slide::after{width: 19vw;}
  .sns-slide .slick-arrow{width: 34px; height: 34px;}
  .blog-slide li p{font-size: 1.2rem;}
  .youtube-list li{width: 43vw;}
}

/* 가로>세로일때만 적용 */
@media screen and (max-width: 1023px){
  .container{height: auto;}
  .main-bg{min-height: 650px; max-height: 730px;}
  h1.main-title{font-size: 8rem;}
  .mouse{display: none;}
  .new-slide{margin-bottom: 100px;}
  .new-txt p{font-size: 1.1rem;}
  .new-box{gap: 30px;}
  .demon-box{margin-top: 120px; margin-bottom: 120px;}
  .demon-txt p{font-size: 1.1rem;}
  .demon-txt button{margin-right: 5px; padding: 8px 30px;}
  .story-bg{height: 86vh;}
  .story-txt p{font-size: 1.1rem;}
  .cafe-txt{margin-left: 6vw;}
  .cafe-txt p{font-size: 1.1rem;}
  .cafe-img img{height: auto; width: 140%; transform: translateX(-8vw);}
  
  #section6 .container{height: 100vh; min-height: 600px;}

  .sns-menu li{font-size: 1.5rem; padding-bottom: 14px;}
  .sns-box{margin-bottom: 100px;}
  .sns-slide .slick-arrow{width: 30px; height: 30px;}
}

@media screen and (max-width: 820px){
  .main-bg{min-height: 580px; max-height: 650px;}
  .main-box{width: 75vw;}
  .main-deco4{left: 10%;}
  .main-deco5{right: 9%;}
  h1.main-title{font-size: 7rem;}
  .main-title i{font-size: 5rem;}
  .demon-txt button{padding: 8px 12px;}
}


@media screen and (max-width: 680px){
  .main-bg{min-height: 520px; max-height: 580px;}
    h1.main-title{font-size: 6rem;}
  .main-title i{font-size: 4rem;}
}