/* 공통 */
h2{font-family: 'HakgyoansimDunggeunmisoTTF-B';}
.sub-bg{
  position: relative;
  background-color: #ff799c;
  height: 400px;
  width: 100%;
  background: url(/public/_img/main-bg.png) no-repeat center / cover;
}
.sub-bg h2{
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 5rem;
  color: #fff;
  font-weight:  400;
}
.sub-bg h2 p{
  font-family: 'Pretendard Variable';
  font-size: 1rem;
  margin-top: 20px;
  font-weight: 300;
}
.wrap{
  overflow-x: hidden;
}
section h3{
  font-size: 3.2rem;
  margin-bottom: 3rem;
}
section h5{
  font-size: 1.2rem;
  color: #666;
  margin-bottom: 50px;
}
.video-main{height: 100vh; overflow: hidden;}
.video-main video{width: 100%; margin: auto;}


/* 브랜드 */
#pageMenu a span{
  font-family: 'Pretendard Variable';
  font-weight: 700;
}
.section{height: 100%; overflow: hidden;}
.container{
  margin: auto;
  overflow: hidden;
  height: 100vh;
}
.about-box{
  margin: auto;
  margin-top: 110px;
  display: grid;
  grid-template-columns: 5fr 4fr;
  gap: 70px 90px;
  text-align: left;
  align-items: center;
  width: 75vw;
}
.about-txt h3{
  margin-bottom: 40px;
}
.about-txt h4{
  border-bottom: 2px solid #e81e75;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.about-txt p{
  font-size: 1.25rem;
}
.about-img{
  position: relative;
}
.about-b1{
  border-radius: 20px;
  width: 100%;
}
.b1-pop1,.b1-pop2{
  position: absolute;
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.2);
  font-size: 1rem;
  font-weight: 600;
  padding: 5px 10px;
}
.b1-pop1{
  bottom: 20px;
  left: -30px;
}
.b1-pop2{
  right: -50px;
  top: 40px;
  animation-delay: 0.5s;
}
.b1-pop1 i,.b1-pop2 i{
  font-style: normal;
  vertical-align: 90%;
  padding-left: 7px;
}
.about-list{
  grid-column: 1 / 3;
  display: flex;
  gap: 30px;
}
.about-list li{
  width: 25%;
}
.about-list b{
  display: block;
  font-size: 1.5rem;
  width: 80%;
  margin: 13px 0;
}
.about-list span{
  font-size: 1.1rem;
  display: block;
  width: 80%;
}
.about-list li i{
  background-color: #ffd6e8;
  color: #e81e75;
  font-style: normal;
  font-size: 15px;
  padding: 1px 8px;
  border-radius: 4px;
  margin-right: 7px;
  margin-top: 12px;
  display: inline-block;
  letter-spacing: -0.5px;
}

#section2 .container{
  background-color: #fffefa;
  padding-top: 120px;
}

#section2 .container h5{
  font-size: 1.4rem;
  width: 30%;
  margin: auto;
  margin-top:2rem;
}
.timeline-box{
  position: relative;
  width: 70vw;
  min-width: 1200px;
  margin: 80px auto;
}
.time-line{
  position: absolute;
  width: 100%;
  height: 5px;
  background-color: #e81e75;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.time-dots{
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  text-align: left;
  z-index: 2;
}
.time-dots li{
  float: left;
  width: 20%;
  margin-left: -1rem;
  margin-right: 1rem;
}
.time-dots li>img{
  width: 2rem;
  background-color: #fffefa;
}
.timeline-list{
  display: grid;
  grid-template-columns: repeat(5,1fr);
  align-items: start;
}
.timeline-list dl{
  border-left: 1px dashed #f38eb8;
  text-align: left;
  padding: 30px 15px ;
  height: 220px;
  position: relative;
}
.timeline-list dl::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  background-color: #f38eb8;
  border-radius: 50%;
}
.timeline-list dl:nth-child(n+4):before{
  top: auto;
  bottom: 0;
}
.timeline-list dt{
  font-size: 1.5rem;
  font-weight: 700;
  color: #e81e75;
  padding-bottom: 10px;
}
.timeline-list dl:nth-child(2){
  grid-column: 3 / 5;
}
.timeline-list dl:nth-child(4){
  grid-column: 2 / 4;
}
.timeline-list dd{
  margin-bottom: 6px;
  color: #666;
}
.m-timebox{
  display: none;
  text-align: left;
  margin: 60px 0 30px 0;
}
.m-timebox dl{
  border-left: 4px solid #e81e75;
  margin-left: 8vw;
}
.m-timebox dt{
  color: #e81e75;
  font-size: 1.7rem;
  font-weight: 600;
  margin-bottom: 20px;
  padding-top: 20px;
}
.m-timebox dt>img{
  background-color: #fffefa;
  transform: translateX(-0.9rem);
  width: 1.5rem;
}
.m-timebox dd{
  padding-bottom: 1rem;
  margin-left: 4rem;
}
#section3 h3{
  margin-top: 120px;
}
#section4 h3{
  margin-top: 120px;
}
.equip-slide{
  margin-bottom: 100px;
  width:40vw;
  margin: 50px auto;
  padding-bottom: 30px;
}
.equip-slide .equip-li{
  position: relative;
  padding: 50px;
}
.equip-slide li img:first-of-type{
  position: absolute;
  top: 2%;
  left: 2%;
}
.equip-slide li img:last-of-type{
  position: absolute;
  bottom: 0;
  right: 2%;
  animation-delay: 0.3s;
}
.equip-slide h6{
  font-size: 1.5rem;
  margin-bottom: 15px;
  font-weight: 700;
}
.equip-slide p{
  line-height: 25px;
  color: #666;
}
.equip-slide-dots{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.equip-slide-dots li{
  display: inline-block;
}
.equip-slide-dots li button{
  font-size: 0;
  width: 10px;
  height: 10px;
  border-radius: 50px;
  margin: 0 4px;
  background-color: #f38eb8;
  transition: 0.3s;
}
.equip-slide-dots li.slick-active button{
  background-color: #e81e75;
  width: 25px;
}
.equip-img{
  display: flex;
  justify-content: center;
  gap: 30px;
}
.equip-img img{
  border-radius: 20px;
  width: 30vw;
  transition: 0.3s;
}
.equip-img img:hover{
  scale: 1.02;
}

#section5 h3{
  margin-top: 100px;
}
.brand-map{
  margin: 40px auto !important;
}
.root_daum_roughmap .cont{display: none;}
.map-txt{
  text-align: left;
  margin-left: 10vw;
}
.map-txt h5{
  font-weight: 700;
}
.map-txt p{
  font-size: 1.1rem;
  line-height: 28px;
  color: #666;
}
#section6 .container{
  background-color: #fffafc ;
}

.sns-tab{
  width: 72vw;
  margin: 50px auto 30px auto;
}
.sns-tab li{
  display: inline-block;
  font-size: 1.9rem;
  font-weight: 500;
  border-bottom: 2px solid #ddd;
  width: 32%;
  padding-bottom: 20px;
  cursor: pointer;
  transition: 0.3s;
}
.sns-tab li:hover{
  border-bottom: 2px solid #e81e75;
}
.sns-tab li.active{
  border-bottom: 2px solid #e81e75;
}
.sns-cate{
  margin-bottom: 30px;
  font-size: 1.2rem;
}
.sns-cate li{
  display: inline-block;
  padding: 0.6rem 2rem;
  background-color: #222;
  color: #fff;
  border-radius: 50px;
  cursor: pointer;
  transition: 0.3s;
  margin: 0 0.2rem;
}
.sns-cate li.active{
  background-color: #e81e75;
}
.sns-cate li:hover{
  background-color: #e81e75;
}
.sns-list{
  display: none;
  grid-template-columns: repeat(4,1fr);
  gap: 1rem;
  width: 70vw;
  margin: auto;
  margin-bottom: 50px;
}
.sns-list.active{
  display: grid;
}
.sns-list li{
  border: 1px solid #ccc;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
}
.sns-list li img{
  width: 100%;
  transition: 0.2s;
}
.sns-list li img:hover{
  scale: 1.03;
}
.sns-list li small{
  color: #666;
  display: inline-block;
  margin: 1rem 0;
}
.sns-list li h4{
  color: #222;
  font-size: 1.3rem;
  margin-bottom: 1.8rem;
}
.mg-box{
  width: 60vw;
  min-width: 900px;
  margin: auto;
  margin-bottom: 70px;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  align-items: center;
  gap: 0 4rem;
}
.mg-card{
  text-align: left;
}
.mg-card img{
  border-radius: 20px;
  width: 100%;
}
.mg-card h4{
  font-size: 2.5rem;
  border-bottom: 2px solid #e81e75;
  padding: 1rem 0 0.5rem 0;
  
}
.mg-card p{
  color: #3f3f3f;
  font-size: 1.2em;
  padding: 1rem 0 1.5rem 0;
  line-height: 1.7rem;
}
.mg-card .btn2{
  font-size: 1.4rem;
  font-weight: 600;
  padding: 8px 26px;
}
.mg-page{
  width: 70vw;
  margin: auto;
}
.mg-page img{
  width: 100%;
}

/* 업소용 */
.busi-main{
  background-color: #05a9f1;
  background: url(/public/_img/business/business-main.png) no-repeat center / cover;
  padding-top: 30px;
  height: 940px;
  margin-bottom: 45px;
  position: relative;
}
.busi-title{
  width: 40vw;
  max-width: 940px;
  margin-top: -2rem;
  margin-bottom: 3rem;
}
.busi-slide{
  width: 26vw;
  max-width: 520px;
  margin: auto;
}
.busi-img img{
  position: absolute;
}
.busi-drink1{
  top: 52%;
  left: 27%;
  width: 9vw;
  max-width: 210px;
}
.busi-drink2{
  top: 56%;
  left: 20%;
  width: 9vw;
  max-width: 210px;
}
.busi-cap{
  top: 70%;
  right: 24%;
  width: 11vw;
  max-width: 245px;
}
.busi-deco1{
  top: 20%;
  left: 10%;
  width: 14vw;
  max-width: 280px;
}
.busi-deco2{
  top: 15%;
  right: 14%;
  width: 10vw;
  max-width: 200px;
  animation-delay: 0.4s;
}
.busi-deco3{
  top: 46%;
  right: 23%;
  width: 7vw;
  max-width: 135px;
}
.busi-deco4{
  top: 60%;
  left: 10%;
  width: 7vw;
  max-width: 135px;
}
.busi-deco5{
  top: 60%;
  right: 12%;
  width: 6.3vw;
  max-width: 130px;
}


.busi-group .new-box{
  gap: 6rem;
  margin-bottom: 100px;
}
.busi-group .new-txt{
  width: 47%;
}
.busi-group .new-txt b{
  color: #222;
  display: block;
  margin-bottom: 0.4rem;
}
.new-img{
  width: 53%;
}
.new-img img{
  width: 100%;
}

.chart-box{
  background-color: #00abf3;
  background: url(/public/_img/business/bg-check1.png) no-repeat center / cover;
  padding-top: 8rem;
}
.chart-grid{
  display: grid;
  grid-template-columns: 2fr 3fr;
  width: 70vw;
  min-width: 1200px;
  margin: auto;
  align-items: end;
  position: relative;
}
.chart-title{
  text-align: left;
  margin-left: 1rem;
}
.chart-title h2{
  font-size: 3rem;
  line-height: 4rem;
  color: #fff;
  -webkit-text-stroke: 0.35rem #222;
  paint-order: stroke;
  /* white-space: nowrap; */
}
.chart-title p{
  font-weight: 800;
  font-size: 1.5rem;
  margin-top: 1.4rem;
}
.chart-title img{
  margin-top: 10vw;
  width: 380px;
  transform: translateY(30px);
}
.chart-up{
  display: flex;
  align-items: end;
  justify-content: space-around;
}

.chart-arrow img{
  position: absolute;
  top: 53%;
  left: 65%;
  transform: translate(-50%,-50%);
}
.chart-arrow img:first-child{
  width: 270px;
}
.chart-arrow img:last-child{
  width: 140px;
}
.graph1{
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 25px 25px 0 0;
  width: 200px;
  height: 100px;
}
.graph2 strong{
  display: inline-block;
  font-size: 2.2rem; 
  color: #fff;
  -webkit-text-stroke: 0.35rem #222;
  paint-order: stroke;
  margin-bottom: 1.5rem;
  position: relative;
}
.graph2 strong::before{
  content: url(/public/_img/business/chart-deco.png);
  position: absolute;
  margin-left: -60px;
  margin-top: -50px;
}
.graph2 strong::after{
  content: url(/public/_img/business/chart-deco.png);
  position: absolute;
  margin-top: -50px;
}
.graph2 div{
  background-color: rgb(255, 255, 255);
  border-radius: 25px 25px 0 0;
  width: 200px;
  height: 100px;
  transition: 0.4s;
}
.graph2 div.show{
  height: 580px;
}
.chart-bottom{
  background-color: #efefef;
  height: 80px;
  display: grid;
  grid-template-columns: 2fr 1.5fr 1.5fr;
  padding: 15px 15vw;
}
.chart-bottom b{
  font-size: 1.3rem;
  line-height: 1.3rem;
}
.chart-bottom u{
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
}
.chain-box{
  display: grid;
  grid-template-columns: 5fr 4fr;
  width: 70vw;
  min-width: 1200px;
  margin: auto;
  text-align: left;
  padding-bottom: 100px;
  gap: 4rem;
  align-items: center;
}
.chain-txt{
  margin-left: 1rem;
}
.chain-txt h1{
  font-size: 2.2rem;
}
.chain-txt h2{
  color: #ff0f7b;
  font-size: 3.4rem;
  margin: 1rem 0 2.5rem 0;
}
.chain-txt i{
  color: #666;
  font-style: normal;
  font-weight: 500;
  font-size: 1rem;
}
.chain-txt img{
  width: 380px;
  margin-top: 5vw;
}
.chain-map{
  position: relative;
}
.chain-map .map-gray{
  width:100%;
  height: auto;
}
.chain-map .pin{
  position: absolute;
  /* margin: auto; */
}
.chain-map .pin p{
  font-weight: 800;
  font-size: 1.4rem;
  -webkit-text-stroke: 0.4rem #fff;
  paint-order: stroke;
  /* margin: auto; */
  text-align: center;
}
.chain-map .pin img{
  display: block;
  width: 80%;   
  margin: auto;
}
.chain-map .pin:nth-of-type(1){
  top: 5%;
  left: 28%;
}
.chain-map .pin:nth-of-type(2){
  top: 12%;
  right: 17%;
}
.chain-map .pin:nth-of-type(3){
  top: 25%;
  left: 32%;
}
.chain-map .pin:nth-of-type(4){
  top: 31%;
  right: 33%;
}
.chain-map .pin:nth-of-type(5){
  top: 45%;
  right: 15%;
}
.chain-map .pin:nth-of-type(6){
  top: 55%;
  left: 21%;
}
.chain-map .pin:nth-of-type(7){
  bottom: 3%;
  left: 3%;
}

.mya-ivory{
  background-color: #fdfdf3;
  background: url(/public/_img/business/bg-check2.png) no-repeat center / cover;
  position: relative;
}
.mya-bottom{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background-color: #fff;
}
.mya-ivory h5{
  padding-top: 10rem;
  margin-bottom: 1.5rem;
  color: #e81e75;
  font-weight: 700;
  font-size: 1.5rem;
}
.mya-ivory h3{
  margin-bottom: 3rem;
}
.mya-slide1{
  width: 34vw;
  margin: auto;
  z-index: 2;
}
.bubble b{
  position: absolute;
  color: #fff;
  font-size: 2rem;
  padding: 0.6rem 1rem;
  border-radius: 10px;
}
.bubble b::after{
  content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 0;
	border: 0.25em solid transparent;
	border-top-color: #ff1878;
	border-bottom: 0;
	margin-left: -0.25em;
	margin-bottom: -0.25em;
}
.bubble b:nth-of-type(even)::after{
	border-top-color: #222;
}
.bubble b:nth-of-type(1){top:37%; left:21%;}
.bubble b:nth-of-type(2){top:60%; left:18%;}
.bubble b:nth-of-type(3){top:65%; right:17%;}
.bubble b:nth-of-type(4){top:50%; right:20%;}
.mya-deco img{
  position: absolute;
  z-index: 2;
}
.mya-deco img:nth-of-type(1){top: 20%; left: 20%; width: 6vw; max-width: 120px;}
.mya-deco img:nth-of-type(2){top: 18%; right: 18%; width: 7vw; max-width: 150px;}
.mya-deco img:nth-of-type(3){top: 40%; left: 11%; width: 8vw; max-width: 168px;}
.mya-deco img:nth-of-type(4){top: 30%; right: 13%; width: 4vw; max-width: 90px;}
.new-cap{
  width: 30vw;
  margin: 6rem auto;
}
.new-deco b{
  color: #fff;
  font-size: 2rem;
  padding: 0.6rem 1rem;
  border-radius: 10px;
  display: inline-block;
  margin-bottom: 1rem;
  position: relative;
  transition: 0.1s;
  cursor: pointer;
}
.new-deco b::after{
  content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 0;
	border: 0.25em solid transparent;
	border-top-color: #ff1878;
	border-bottom: 0;
	margin-left: -0.25em;
	margin-bottom: -0.25em;
}
.new-deco b:nth-of-type(2)::after{
  border-top-color: #222;
}
.new-deco b:nth-of-type(2){
  transform: translateX(-40%);
}
.new-deco b:nth-of-type(3){
  transform: translate(30%,-30%);
}
.new-deco b:hover{scale: 1.03;}

.new-slide2{
  width: 80%;
  margin: auto;
  margin-top: 3rem;
}
.ocean-box{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12rem;
}
.ocean-txt{
  margin: 2rem auto 4rem auto;
}
.ocean-circle{
  border: 3px solid #222;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #fff;
  font-weight: 600;
}
.ocean-circle:first-of-type{
  background-color: #ffdeec;
  transform: translateX(3rem);
}
.ocean-circle:nth-of-type(2){
  background-color: #e6d2ff;
  z-index: 2;
  transition: 0.3s;
}
.ocean-circle:nth-of-type(2):hover{
  scale: 1.1;
}
.ocean-circle:last-of-type{
  background-color: #c6eeff;
  transform: translateX(-3rem);
}
.ocean-circle i{
  font-style: normal;
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}
.ocean-circle h2{
  font-size: 3.4rem;
  text-shadow: 
  3px 3px 0px #ffffff, /* 흰색 테두리 */
  -3px -3px 0px #ffffff, 
  3px -3px 0px #ffffff, 
  -3px 3px 0px #ffffff, 
  6px 6px 1px #222; /* 검정 그림자 효과 */
}
.ocean-circle h4{
  color: #222;
  font-size: 2rem;
  margin-top: 1.7rem;
  margin-bottom: 0.7rem;
  -webkit-text-stroke: 0.3rem #fff;
  paint-order: stroke;
}
.ocean-circle span{
  font-size: 1.3rem;
  line-height: 2rem;
  width: 50%;
  margin: 0 auto;
}
.mini-box{
  width: 70vw;
  min-width: 1200px;
  margin: auto;
  /* margin-bottom: 50px; */
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 30px;
}
.mini-box li{
  border: 2px solid #222;
  border-radius: 40px;
  overflow: hidden;
  background-color: #fffafc;
}
.mini-box li:hover{
  scale: 1.03;
  transition: 0.4s;
}
.mini-box li img{
  height: 80%;
}
.mini-box li p{
  font-weight: 600;
  font-size: 1.5rem;
  margin: 20px;
}
.mini-box li div{
  height: 350px;
  display: flex;
  align-items: end;
  justify-content: center;
}
.mini-box li:nth-of-type(1) div{
  background-color: #fddd8a;
}
.mini-box li:nth-of-type(2) div{
  background-color: #dcecfc;
}
.mini-box li:nth-of-type(3) div{
  background-color: #ffe5ef;
}
.bg-ocean{
  background-color: #2eb1fa;
  background: url(/public/_img/business/blue-bg.png) no-repeat center / cover;
  position: relative;
  padding-top: 10rem;
  padding-bottom: 5rem;
  color: #fff;
}
.bg-ocean h5{
  font-size: 1.4rem;
}

.blue-slide{
  width: 26vw;
  margin: 4rem auto;
}
.blue-img img{
  position: absolute;
}
.blue-drink1{
  bottom: 17%;
  left: 16%;
  width: 19vw;
  max-width: 400px;
}
.blue-drink2{
  bottom: 17%;
  right: 16%;
  width: 19vw;
  max-width: 400px;
}
.blue-cap{
  bottom: 18%;
  left: 30%;
  width: 9vw;
  max-width: 195px;
}
.blue-deco1{
  top: 25%;
  left: 12%;
  width: 6vw;
  max-width: 130px;
}
.blue-deco2{
  top: 20%;
  right: 23%;
  width: 3vw;
  max-width: 70px;
}
.blue-deco3{
  top: 40%;
  right: 12%;
  width: 4.5vw;
  max-width: 130px;
}

#menu1,#menu2,#menu3,#menu4,#menu5,#menu6{
  padding-top: 85px;
  margin-top: -85px;
}
.menu-slide{
  width: 70vw;
  min-width: 1200px;
  margin: auto;
  margin-bottom: 5rem;
}
.menu-slide .slick-arrow{
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
  font-size: 0;
  width: 35px;
  height: 35px;
  border-radius: 50px;
  background-color: #fff;
  box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.2);
  color: #e81e75;
}
.menu-slide .slick-prev{
  left: -2vw;
}
.menu-slide .slick-prev::before{
  content: url('/public/_img/icon/angle-left-pink.svg');
  font-size: 1.5rem;
}
.menu-slide .slick-next{
  right: -4.5vw;
}
.menu-slide .slick-next::before{
  content: url('/public/_img/icon/angle-right-pink.svg');
  font-size: 1.5rem;
}
.menu-card{
  margin: 0 10px;
  padding: 10px 0;
  position: relative;
  height: 400px;
}
.menu-card>img{
  margin: auto;
  transition: 0.3s;
  cursor: pointer;
  height: 230px;

}
.menu-card>img:hover{
  scale:1.05;
}
.menu-card p{
  margin-top: 20px;
  padding: 0 20px;
}
.menu-card h6{
  font-size: 1.4rem;
  font-weight: 500;
  border-bottom: 1px solid #666;
  padding: 10px 0;
}
.menu-card u{
  display: block;
  margin: 10px 0;
  text-decoration: none;
}
.menu-card small{
  display: inline-block;
  color: #fff;
  border-radius: 50px;
  padding: 4px 12px;
}
.menu-info{
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(232, 30, 117, 0.9);
  color: #fff;
  height: 390px;
  width:100%;
  border-radius: 20px;
  padding: 30px 20px 20px 20px;
  text-align: left;
  display: none;
}
.menu-info span{
  display: block;
  padding: 10px 2px;
  line-height: 1.6rem;
}
.menu-info span:nth-of-type(1){
  font-size: 1.3rem;
}
.menu-info span:nth-of-type(2){
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}
.menu-info span:nth-of-type(3){
  font-size: 0.9rem;
}
.menu-info button{
  background-color: #fff;
  color: #e81e75;
  font-size: 1.2rem;
  padding: 8px;
  border-radius: 30px;
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  width: 90%;
}
.menu-info button>img{width: 1.4rem; display: inline-block; vertical-align: -3px;}
.menu-info .x-btn{
  position: absolute;
  top: 20px;
  right: 20px;
  width: 30px;
  height: 30px;
  cursor: pointer;
}
/* 가정용 */
.house-main{
  background-color: #ffda55;
  background: url(/public/_img/house/house-main.png) no-repeat center / cover;
  padding-top: 70px;
  height: 940px;
  margin-bottom: 50px;
  position: relative;
}
.house-img p{
  position: absolute;
  top: 9%;
  left: 16%;
  font-size: 2.2rem;
  font-weight: 800;
}
.house-img p span{
  font-family: 'HakgyoansimDunggeunmisoTTF-B';
  -webkit-text-stroke: 0.3rem #fff;
  paint-order: stroke;
}
@keyframes house{
  50% {transform: scale(1.4);}
  100% {transform: scale(1);}
}
.house-t1{
  position: absolute;
  left: 16%;
  top: 16%;
  max-width: 600px;
  width: 25vw;
}
.house-t2{
  position: absolute;
  right: 18%;
  top: 65%;
  max-width: 600px;
  width: 24vw;
  animation: house 1.3s ease-in-out;
}
.house-machine{
  width: 25vw;
  margin-top: 7.5rem;
}
@media screen and (max-width: 1500px){
  .house-machine{
    width: 28vw;
    margin-top: 9rem;}
}
.house-drink1{
  position: absolute;
  left: 22%;
  top: 47%;
  max-width: 200px;
  width: 9.3vw;
}
.house-drink2{
  position: absolute;
  left: 30%;
  top: 44%;
  max-width: 200px;
  width: 9.3vw;
}
.house-cap{
  position: absolute;
  left: 16%;
  top: 72%;
  max-width: 240px;
  width: 10vw;
}
.house-deco1{
  position: absolute;
  left: 16%;
  top: 38%;
  max-width: 130px;
  width: 6vw;
}
.house-deco2{
  position: absolute;
  right: 35%;
  top: 10%;
  max-width: 70px;
  width: 4vw;
}
.house-deco3{
  position: absolute;
  right: 13%;
  bottom: 40%;
  max-width: 140px;
  width: 7vw;
}
.new-box{
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin: auto;
  margin-bottom: 5rem;
  border: none;
  width: 70vw;
  min-width: 1200px;
}
.new-txt{
  text-align: left;
  width: 50%;
}
.new-txt h1{
  margin-bottom: 16px;
  font-size: 1.8rem;
  font-weight: 500;
}
.new-txt h3{
  margin-bottom: 50px;
}
.new-txt h4{
  border-bottom: 2px solid #e81e75;
  padding-bottom: 15px;
  margin: 45px 0 20px 0;
}
.new-txt p{
  color: #666;
  font-size: 1.25rem;
  margin-bottom: 60px;
  line-height: 2rem;
}
.new-txt b{
  color: #222;
}
.new-slide{
  border-radius: 20px;
  overflow: hidden;
  width: 47%;
}
.new-slide img{
  width: 100%;
}
.new-slide-dots{
  position: absolute;
  bottom: 2%;
  left: 53%;
  transform: translateX(-50%);
}
.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;
}
.hhh{margin: 4rem auto;}
.pink-tape{
  width: 100vw;
  background-color: #e81e75;
  padding: 1rem;
  overflow: hidden;
}
.pink-tape p{
  color: #fff;
  font-size: 1.8rem;
  font-weight: 600;
  white-space: nowrap;
}
.house-txt{
  font-size: 1.4rem;
  color: #222;
  margin-bottom: 1rem;
}
.b-txt{
  width: 70vw;
  margin: 0 auto 3rem auto;
  position: relative;
}
.b-deco1{
  position: absolute;
  left: 3%;
  top: 30%;
  max-width: 140px;
  width: 5vw;
}
.b-deco2{
  position: absolute;
  right: 1%;
  top: -50%;
  max-width: 200px;
  width: 7vw;
}
.b-box{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  width: 70vw;
  min-width: 1200px;
  gap: 2rem;
  margin: auto;
  align-content:stretch
}
.b-box li{
  border-radius: 20px;
  background-color: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.b-box .color-bg{
  height: 340px;
  display: flex;
}
.b-box li:nth-child(1) .color-bg{
  background-color: #fde199;
}
.b-box li:nth-child(1) .color-bg:hover{
  background-color: #fcd77b;
}
.b-box li:nth-child(2) .color-bg{
  background-color: #dcecfc;
}
.b-box li:nth-child(2) .color-bg:hover{
  background-color: #c9e2fa;
}
.b-box li:nth-child(3) .color-bg{
  background-color: #d4efc4;
}
.b-box li:nth-child(3) .color-bg:hover{
  background-color: #c5eead;
}
.b-box li img{
  width: 76%;
  margin: auto;
}
.b-info strong{
  display: block;
  font-size: 1.8rem;
  margin: 1.2rem;
}
.b-info strong i{
  font-style: normal;
  color: #e81e75;
}
.b-info span{
  display: block;
  font-size: 1.2rem;
  margin: 0 1rem;
}
.b-info p{
  font-weight: 700;
  font-size: 1.4rem;
  background-color: #222;
  color: #fff;
  padding: 1rem 0;
  transition: 0.2s;
  margin-top: 1.2rem;
  cursor: pointer;
}
.b-info p:hover{
  background-color: #e81e75;
}
.b-info p>img{
  width: 1.5rem;
  vertical-align: top;
  margin: auto !important;
}
.point-title{
  font-size: 4.2rem;
  margin-bottom: 6rem;
}
.pp2{font-size: 3.4rem;}
.point-title span{
  color: #ff1878;
}
.point-box{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem 2rem;
  align-items: center;
  width: 70vw;
  min-width: 1200px;
  margin: auto;
  margin-bottom: 7rem;
  align-content: center;
}
.point-img{
  position: relative;
}
.point-img img:first-child{
  width: 100%;
  border-radius: 40px;
}
.point-img .pto{
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%,-50%);
  max-width: 100px;
  width: 4vw;
}
.point-txt{
  position: relative;
  text-align: left;
}
.point-txt h4{
  color: #222;
  font-size: 2.2rem;
  margin-bottom: 1rem;
}
.point-txt u{
  text-decoration: none;
  color: #ff1878;
}
.point-txt p{
width: 70%;
font-size: 1.3rem;
font-weight: 500;
line-height: 1.8rem;
}
.point-txt img{
  position: absolute;
}
.pt-deco1{
  top: -80%;
  left: 0;
}
.pt-deco2{
  top: -50%;
  right: 10%;
}
.pt-deco3{
  top: -40%;
  right: 20%;
}
.pt-deco4{
  top: 30%;
  right: 8%;
}
.pt-deco5{
  bottom: -50%;
  right: 10%;
}
.shop-box{
  background: url(/public/_img/house/myb-bg.png) no-repeat center / cover;
  position: relative;
}
.b-txt i{
  font-style: normal;
  color: #ffcc57;
  background-color: #222;
  padding: 0 0.5rem 0.3rem 0.5rem;
}
.myb-machine{
  max-width: 1150px;
  width: 52vw;
  margin: 20px auto;
}
.myb-deco1{
  position: absolute;
  top: 40%;
  left: 12%;
  max-width: 130px;
  width: 6vw;
}
.myb-deco2{
  position: absolute;
  top: 18%;
  right: 22%;
  max-width: 70px;
  width: 3vw;
}
.myb-deco3{
  position: absolute;
  bottom: 27%;
  right: 13%;
  max-width: 135px;
  width: 5vw;
}

.buy-box{
  background-color: #ffcc57;
  padding: 5rem 0;
}
.buy-card{
  width: 62vw;
  background-color: #fff;
  margin: auto;
  padding: 2rem;
  border-radius: 20px;
}
.buy-card img{
  width: 100%;
}
.shop-txt h1{
  margin: 2rem auto;
  font-size: 2rem;
  font-weight: 500;
}
.shop-txt h1>img{width: 2.5rem; vertical-align: -0.6rem;}
.shop-txt .btn1{
  width: 80%;
  padding: 1rem;
}
.shop-txt .btn1>img{width: 1.8rem; vertical-align: top;}
/* 자판기 */
.vending-main{
  height: 940px;
  background: url(/public/_img/vending/vending-main.png) no-repeat center / cover;
  overflow: hidden;
  text-align: left;
  padding-left: 12vw;
  padding-top: 100px;
  color: #fff;
  position: relative;
}
.vending-img img, .vending-deco img{position: absolute;}
.vending-img img:nth-child(1){
  right: 10%;
  bottom: 2%;
  width: 20vw;
  max-width: 385px;
}
.vending-img img:nth-child(2){
  right: 28%;
  bottom: 2%;
  width: 14vw;
  max-width: 285px;
}
.vending-img img:nth-child(3){
  left: 37%;
  bottom: 3%;
  width: 22vw;
  max-width: 460px;
}
.vending-img img:nth-child(4){
  left: 30%;
  bottom: 4%;
  width: 10vw;
  max-width: 250px;
  
}
.vending-img img:nth-child(5){
  left: 0;
  bottom: 0;
  width: 100vw;
}
.vending-deco img:nth-child(1){
  left: 12%;
  top: 58%;
  animation-delay: 0.5s;
}
.vending-deco img:nth-child(2){
  left: 22%;
  top: 68%;
}
.vending-deco img:nth-child(3){
  left: 32%;
  top: 56%;
}
.vending-deco img:nth-child(4){
  top: 25%;
  right: 40%;
  animation-delay: 0.4s;
}
.vending-deco img:nth-child(5){
  top: 16%;
  right: 22%;
}
.vending-deco img:nth-child(6){
  top: 10%;
  right: 12%;
  animation-delay: 0.3s;
}

.vending-main h1{
  margin: 2.5rem auto;
}
.vending-main h2{
  font-size: 6.4rem;
  -webkit-text-stroke: 1rem #222;
  paint-order: stroke;
  line-height: 8rem;
  position: inherit;
  z-index: 2;
}
.vending-main h2 b{
  color: #e81e75;
  -webkit-text-stroke: 1rem #fff;
  animation: house 1.3s ease-in-out;
  display: inline-block;
}

.flag{display: flex; justify-content: center; gap: 1.5rem; margin-top: 3rem; padding-bottom: 2rem;}
.flag li{
  background-color: #ffe0ed;
  border-radius: 20px;
  display: flex;
  align-items: center;
  padding: 1rem 4rem 1rem 1.4rem;
  min-width: 345px;
}
.flag li img{margin-right: 1.7rem; width: 62px;}
.flag li p{
  font-weight: 700;
  font-size: 1.8rem;
  text-align: left;
  line-height: 2.3rem;
}
.mini-box2{
  width: 70vw;
  min-width: 1200px;
  margin: auto;
  margin-bottom: 50px;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 2rem;
}
.mini-box2 li{
  border: 2px solid #222;
  border-radius: 40px;
  overflow: hidden;
  background-color: #fffafc;
}
.mini-box2 li img{
  height: 80%;
}
.mini-box2 li p{
  font-size: 1.2rem;
  margin: 20px;
}
.mini-box2 li strong{
  display: block;
  font-size: 1.5rem;
  margin-bottom: 0.4rem;
}
.mini-box2 li div{
  height: 400px;
  display: flex;
  align-items: end;
  justify-content: center;
}
.mini-box2 li:nth-of-type(1) div{
  background-color: #ffe0ed;
}
.mini-box2 li:nth-of-type(2) div{
  background-color: #e1dfff;
}
.mini-box2 li:nth-of-type(3) div{
  background-color: #dcecfc;
}
.panel{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  width: 70vw;
  margin: auto;
  gap: 2rem;
}
.panel li{
  box-shadow: 0 0 8px 1px #ececec; 
  border-radius: 20px;
  padding: 1.5rem;
}
.panel li h1{
  margin-top: 1rem;
  margin-bottom: 0.4rem;
}
.panel li span{font-size: 1.1rem;}
.v-txt{margin-bottom: 1.4rem; font-size: 1.5rem; font-weight: 600; color: #222;}

.bg-azure h5.txt-left{margin-left: 15vw;}
.bg-azure h3.txt-left{margin-left: 15vw;}

.vg-deco{position: relative;}
.vg-deco img{position: absolute;}
.vg-deco img:nth-child(1){left: 6%;}
.vg-deco img:nth-child(2){bottom:0; right: 14%;}

.guest-slide{
  width: 70vw;
  min-width: 1200px;
  margin: auto;
  padding: 5rem 0;
}
.guest-list{
  background-color: #fff;
  display: grid !important;
  grid-template-columns: 1fr 2fr;
  margin: 1rem;
  padding: 2rem;
  border-radius: 40px 40px 0 40px;
  gap: 1rem;
}
.guest-slide .slick-track{padding: 20px 0 50px 0;}
.guest-slide .guest-list:nth-of-type(3n+2){
  transform: translateY(60px);
}
.guest-slide .guest-list:nth-of-type(3n){
  transform: translateY(-30px);
}

.guest-list h1{
  text-align: left;
  font-size: 1.7rem;
}
.guest-list b{
  display: block;
  font-size: 1.2rem;
  font-weight: 500;
  margin-top: 0.6rem;
}
.guest-list>img{width: 90%;}
.guest-slide-dots{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.guest-slide-dots li{
  display: inline-block;
}
.guest-slide-dots li button{
  font-size: 0;
  width: 10px;
  height: 10px;
  border-radius: 50px;
  margin: 0 4px;
  background-color: #88888f;
  transition: 0.3s;
}
.guest-slide-dots li.slick-active button{
  background-color: #222;
  width: 20px;
}
.vv-deco{position: relative;}
.vv-deco img{position: absolute;}
.vv-deco img:nth-child(1){bottom: 10px;left: 15%; width: 6vw;}
.vv-deco img:nth-child(2){bottom: 80px; left: 21%; width: 5vw;}
.vv-deco img:nth-child(3){bottom: 30px;right: 15%; width: 9vw;}

.v-box{
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 4rem;
}
.v-box li{
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  width: 35vw;
}
.v-box li img{
  width: 100%;

}
.v-box li b{
  position: absolute;
  top: 2rem;
  left: 2rem;
  text-align: left;
  font-size: 1.8rem;
}
.v-box li i{
  font-style: normal;
  font-size: 1.3rem;
  font-weight: 600;
}
.v-box li p{
  background-color: #222;
  color: #fff;
  margin-top: -4px;
  padding: 1rem;
  font-size: 1.4rem;
  cursor: pointer;
  transition: 0.3s;
}
.v-box li p>img{width: 1.5rem; vertical-align: -4px;}
.v-box li p:hover{
  background-color: #e81e75;
}

.pu-group{
  display: flex;
  width: 70vw;
  min-width: 1200px;
  margin:auto;
  justify-content: space-between;
  align-items: center;
  padding-top: 4rem;
}
.pu-txt{text-align: left;}
.pu-txt h6{
  font-size: 1.2rem;
  font-weight: 600;
}
.pu-txt h4{
  color: #222;
  margin-bottom: 1rem;
  font-size: 1.8rem;
}
.pu-txt strong{font-size: 1.3rem; line-height: 1.9rem; font-weight: 500;}
.pu-group .up-vending{position: relative;}
.pu-group .up-arrow{
  position: absolute;
  top: 4%;
  right: 12%;
  scale: 0;
  transition: 0.3s;
}
.pu-group .up-vending:hover .up-arrow{
  scale: 1;
}

.pu-box{
  display: flex;
  width: 70vw;
  min-width: 1200px;
  margin: 4rem auto;
  align-items: center;
  justify-content: space-between;

}
.pu-box li{
  background-color: #fff;
  border-radius: 1rem;
  padding: 1.5rem;
  width: 23.5%;
  transition:0.4s !important;
}
.pu-box li:hover{
  scale: 1.05;
}
.pu-box h1{
  font-size: 1.7rem;
  margin: 0.5rem auto;
}
.pu-box u{
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.5rem;
}
.pu-list{padding-bottom: 4rem;}
.pu-list li{
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.pu-deco1,.pu-deco2{position: relative;}
.pu-deco1 img,.pu-deco2 img{position: absolute;}
.pu-deco1 img:nth-child(1){left: 15%; bottom: 90px; width: 6vw;}
.pu-deco1 img:nth-child(2){left: 25%; bottom: 40px; width: 2vw;}
.pu-deco1 img:nth-child(3){right: 18%; bottom: 80px; width: 5vw;}
.pu-deco2 img:nth-child(1){left: 18%; bottom: 70px; width: 5vw;}
.pu-deco2 img:nth-child(2){right: 22%; bottom: 100px; width: 4vw;}
.pu-deco2 img:nth-child(3){right: 18%; bottom: 40px; width: 2vw;}

.bg-navy{
  background: url(/public/_img/vending/navy-bg.png) no-repeat center / cover;
  color: #fff;
  padding: 4rem 0;
  position: relative;
  overflow: hidden;
}
.bg-navy h6{
  font-size: 1.5rem;
  margin-bottom: 2rem;
  margin-top: 6rem;
}
.bg-navy i{
  font-style: normal;
  color: #1c1c41;
  background-color: #fff;
  padding: 0 0.3rem;
}
.bg-navy button{position: inherit; z-index: 2;}
.bg-navy button:hover{color: #fff;}
.navy-img{height: 500px;}
.navy-img img,.navy-deco img{position: absolute;}
.navy-img img:nth-child(1){
  left: 15%;
}
.navy-img img:nth-child(2){
  left: 30%;
  top: 55%;
}
.navy-img img:nth-child(3){
  right: 40%;
  top: 57%;
}
.navy-img img:nth-child(4){
  right: 18%;
  bottom: -1%;
}
.navy-deco img:nth-child(1){left: 10%; top: 17%; width: 8vw;}
.navy-deco img:nth-child(2){left: 23%; top: 9%; width: 5vw;}
.navy-deco img:nth-child(3){right: 20%; top: 10%; width: 2vw;}
.navy-deco img:nth-child(4){right: 22%; top: 23%; width: 6vw; transform: scaleX(-1);}
.navy-deco img:nth-child(5){right: 10%; top: 27%; width: 6vw;}

/* 포터필터 */
.porter-main{
  background-color: #13b867;
  background: url(/public/_img/porter/porter-main.png) no-repeat center / cover;
  padding-top: 70px;
  height: 940px;
  margin-bottom: 45px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  gap: 2rem;
}
.porter-main h1{color: #fff; margin-top: 3.5rem;}
.porter-title{width: 50vw;}
.porter-machine{ width: 40vw; min-width: 620px;}
.porter-img img,.porter-deco img{position: absolute;}
.porter-img img:nth-child(1){
  left: 15%;
  top: 55%;
  width: 14vw;
}
.porter-img img:nth-child(2){
  left: 50%;
  top: 70%;
  transform: translateX(-50%);
  width: 27vw;
}
.porter-img img:nth-child(3){
  right: 18%;
  top: 73%;
  width: 10vw;
}
.porter-deco img:nth-child(1){
  left: 10%;
  top: 20%;
}
.porter-deco img:nth-child(2){
  left: 10%;
  top: 40%;
}
.porter-deco img:nth-child(3){
  right: 12%;
  top: 12%;
}
.porter-deco img:nth-child(4){
  right: 15%;
  top: 48%;
}
.step-list{
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 200px;
  background-color: #f8f8f8;
  gap: 1rem;
  width: fit-content;
  padding: 1.5rem;
  margin: 1.5rem auto;
}
.step-list li{
  background-color: #fff;
  border-radius: 100px;
  width: 180px;
  height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 700;
}
.step-list>img{width: 2rem; filter: brightness(0.2);}
.step-list2{
  background-color: #fad2e3;
  border: 3px solid #e81e75;
  position: relative;
}
.step-list2::after{
  content: url(/public/_img/porter/p-deco6.png);
  position: absolute;
  right: -9%;
}
.step-box{position: relative;}
.step-box button{
  position: absolute;
  top: 49%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 1.8rem;
  background-color: #e81e75;
  font-weight: 600;
  color: #fff;
  border-radius: 100px;
  width: 4.8rem;
  height: 4.8rem;
  border: 3px solid #fff;
  z-index: 2;
}
.step-box>img:nth-of-type(1){
  position: absolute;
  top: -10%;
  left: 10%;
}
.step-box>img:nth-of-type(2){
  position: absolute;
  bottom: 0;
  right: 14%;
}
.panel2{grid-template-columns: repeat(4,1fr); margin-top: 5rem; position: relative;}
.panel2>img:nth-of-type(1){
  position: absolute;
  top: -200px;
  left: -5vw;
  width: 5vw;
}
.panel2>img:nth-of-type(2){
  position: absolute;
  bottom: -120px;
  right: -2vw;
  width: 3vw;
}
.mp-box{
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 70vw;
  min-width: 1200px;
  margin: auto;
  gap: 3rem;
}
.mp-txt{
  text-align: left;
}
.mp-txt h4{color: #222; margin-bottom: 1rem;}
.mp-txt h6{font-weight: 600;}
.mp-txt img{
  margin-top: 8rem;
  width: 100%;
}
.mp-con li{
  background-color: #fff;
  border-radius: 30px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
  padding: 3rem 2rem 2rem 2rem;
}
.mp-con li:last-child{
  margin-top: 3rem;
  background-color: #f6e2eb;
  border: 2px solid #e81e75;
}
.mp-con li h6{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%,-50%);
  background-color: #eee;
  color: #666;
  padding: 1rem 2.8rem;
  border-radius: 50px;
  font-size: 1.7rem;
  font-weight: 700;
  border: 2px solid #ccc;
  white-space: nowrap;
}
.mp-con li:last-child h6{
  color: #fff;
  background-color: #e81e75;
  border: 2px solid #e81e75;
}
.mp-con li small{
  display: block;
}
.mp-con .sqre{
  background-color: #666;
  color: #fff;
  border-radius: 20px;
  width: 60%;
  min-height: 220px;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.mp-con img{margin-bottom: 0.5rem;}
.mp-con li:first-child .sqre{
  font-size: 1.5rem;
  position: relative;
}
.mp-con li:first-child .sqre:after {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-right-color: #666;
	border-left: 0;
	margin-top: -10px;
	margin-left: -10px;
}
.mp-con li:last-child .sqre{background-color: #e81e75;}
.mp-con li:last-child .sqre::before{
  content: url(/public/_img/vending/plus.png);
  position: absolute;
  left: 33%;
  top: 50%;
  transform: translateY(-50%);
}
.filter-box1{
  position: relative;
}
.filter-box1>img{position: absolute;}
.filter-box1>img:nth-of-type(1){top: 3rem; right: 13rem; width: 80px; transform: rotate(90deg);}
.filter-box1>img:nth-of-type(2){top: 7rem; right: 18rem; width: 170px; transform: rotate(30deg);}
.filter-box1 h3{
  color: #fff;
  text-align: left;
  width: 70vw;
  min-width: 1200px;
  margin: auto;
  margin-bottom: 4rem;

}
.filter-floor{
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #fff;
  width: 100%;
  height: 200px;
}
.ballon{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem 1.4rem;
  width: 70vw;
  min-width: 1200px;
  margin: auto;
}
.ballon li{
  background-color: #fff;
  border-radius: 30px 30px 0 30px;
  text-align: left;
  padding: 2rem;
  z-index: 2;
}
.ballon li:last-child{
  grid-column:1 / 3;
  background-color: #222;
  color: #fff;
  border-radius: 30px;
}
.ballon h1{
  font-size: 1.8rem;
  font-weight: 800;
  margin-top: 1rem;
  margin-bottom: 0.4rem;
}
.ballon p{
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.8rem;
}

.filter-box2{
  margin-bottom: 9rem;
}
.filter-box2 h6{
  font-size: 1.2rem;
  font-weight: 700;
  width: 90vw;
  margin: auto;
  margin-top: 4rem;
  line-height: 2rem;
}

.match-box{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5rem;
}
.match-box dl{
  border: 2px solid #ccc;
  border-radius: 30px;
  padding: 2rem 2rem 0.5rem 2rem;
  position: relative;
}
.match-box dt{
  font-size: 1.7rem;
  font-weight: 700;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 50px;
  padding: 0.8rem 2rem;
  white-space: nowrap;
}
.match-box dd{
  font-size: 1.2rem;
  font-weight: 500;
  border-bottom: 1px solid #ccc;
  padding: 1.5rem;
}

.match-box .match1{
  width: 30vw;
  transform: translateX(50px);
}
.match-box .match1 dt{
  color: #666;
  background-color: #eee;
  border: 2px solid #ccc;
}
.match-box .match2{
  background-color: #222;
  padding: 0 1rem;
  border: 1px solid #222;
  z-index: 2;
}
.match-box .match2 dt{
  transform: translate(-50%,-100%);
}
.match-box .match2 dd{
  color: #fff;
  font-size: 1.6rem;
  padding: 2rem 6rem;
  border-bottom: 1px solid #fff;
}
.match-box .match3{
  width: 30vw;
  background-color: #fde8f1;
  border: 2px solid #e81e75;
  transform: translateX(-50px);
}
.match-box .match3 dt{
  color: #fff;
  background-color: #e81e75;
  border: 2px solid #e81e75;
}
.match-box .match3 dt::after{
  content: url(/public/_img/porter/p-deco6.png);
  position: absolute;
  bottom: 0;
  transform: scale(0.7);
}
.match-box .match3 dd{border-bottom: 1px solid #fff;}
.match-box .match3 .txt-pink{
  font-weight: 800;
}
.match-box dd:last-of-type{border: none;}

.bg-grass{
  background-color: #13b867;
  background: url(/public/_img/porter/bg-green.png) no-repeat center / cover;
  color: #fff;
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.grass-img img,.grass-deco img{
  position: absolute;
}
.grass-img img:nth-child(1){
  left: 10%;
  top: 52%;
  width: 14vw;
}
.grass-img img:nth-child(2){
  left: 50%;
  top: 65%;
  transform: translateX(-50%);
  width: 27vw;
}
.grass-img img:nth-child(3){
  right: 16%;
  top: 70%;
  width: 11vw;
}
.grass-deco img:nth-child(1){
  top: 8%;
  left: 20%;
}
.grass-deco img:nth-child(2){
  top: 30%;
  left: 10%;
}
.grass-deco img:nth-child(3){
  top: 16%;
  right: 17%;
  transform: scaleX(-1);
}
.grass-deco img:nth-child(4){
  top: 40%;
  right: 13%;
}
.bg-grass>img{max-width: 844px; width: 44vw;}
.bg-grass h3{
  margin-top: 5rem;
}
.bg-grass h3 i{
  color: #13b867;
  background-color: #fff;
  font-style: normal;
  padding: 0 0.2rem;
}
.bg-grass h6{
  font-size: 1.4rem;
  margin-bottom: 3rem;
}
.bg-grass .btn3{margin-top: 7rem;}

/* 무인카페 */
.cafe-main{background-color: #fffcf6; padding: 110px 0 80px 0;}
.ready-img{
  position: relative;
}
.ready-img img:nth-child(1){
  width: 40vw;
}
.ready-img img:nth-child(2){
  position: absolute;
  left: 16%;
  bottom: 0;
  width: 17vw;
}
.ready-img img:nth-child(3){
  position: absolute;
  bottom: 0;
  right: 16%;
  width: 17vw;
}
.ready-txt i {
  display: inline-block;
  color: #e81e75;
  font-size: 1.5rem;
  border: 2px solid #e81e75;
  font-style: normal;
  font-weight: 500;
  padding: 0.2rem 1rem;
  border-radius: 50px;
  margin-bottom: 20px;
  margin-top: 30px;
}

/* 커피트럭 */
.truck-main{
  background-color: #13b867;
  background: url(/public/_img/truck/truck-main.png) no-repeat center / cover;
  padding-top: 130px;
  height: 940px;
  margin-bottom: 45px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  gap: 3rem;
}
.truck-main h1{
  color: #fff;
  font-size: 2.2rem;
}
.truck-title{width: 53vw;}
.truck-car{width: 38vw; min-width: 580px;  animation: shaking3 5s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;}
@keyframes shaking3 {
  0%,50% {transform: translateY(0);}
  5%,15%,25%,35% {transform: translateY(-5px);}
  10%,20%,30% {transform: translateY(5px);}
  40% {transform: translateY(4px);}
  45% {transform: translateY(-4px);}
}

.truck-img img,.truck-deco img{position: absolute;}
.truck-img img:nth-child(1){
  left: 12%;
  top: 50%;
  width: 20vw;
  min-width: 320px;
}
.truck-img img:nth-child(2){
  right: 17%;
  top: 73%;
  width: 11vw;
  min-width: 176px;
}
.truck-deco img:nth-child(1){left: 9%; top: 14%;}
.truck-deco img:nth-child(2){left: 7%; top: 42%;}
.truck-deco img:nth-child(3){right: 13%; top: 11%;}
.truck-deco img:nth-child(4){right: 10%; top: 42%;}
.truck-deco img:nth-child(5){right: 19%; top: 54%;}

.new-txt2 p{font-weight: 600; color: #222;}
.new-txt2 p span{font-weight: 800;}
.new-txt2::before{
  content: url(/public/_img/porter/p-deco4.png);
  position: absolute;
  top: -36%;
  left: -5%;
  scale: 0.9;
}
.new-txt2::after{
  content: url(/public/_img/vending/eyes.png);
  position: absolute;
  bottom: -25%;
  right: 13%;
  scale: 0.9;
}
.half-box{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
}
.half-img{
  overflow: hidden;
  margin-bottom: -4px;
}
.half-img img{width: 100%;}
.half-txt{
  text-align: left;
  padding: 4rem;
}
.half-txt h6{font-size: 1.4rem; font-weight: 600; margin-bottom: 1rem;}
.half-txt p{font-size: 1.2rem; font-weight: 600; line-height: 1.9rem;}
.half-box2{position: relative;}
.half-box2::before{
  content: url(/public/_img/truck/garland.png);
  position: absolute;
  top: -0.5%;
  left: -0.5%;
  scale: 0.9;
}
.half-txt1{position: relative;}
.half-txt1::before{
  content: url(/public/_img/truck/cloud.png);
  position: absolute;
  top: -40%;
  left: 5%;
  scale: 0.9;
}
.half-txt1::after{
  content: url(/public/_img/truck/leaf.png);
  position: absolute;
  bottom: -20%;
  right: 35%;
    scale: 0.9;
}
.half-txt2{position: relative; margin-left: 24%;}
.half-txt2::before{
  content: url(/public/_img/truck/slate.png);
  position: absolute;
  top: -35%;
  left: 0;
  scale: 0.7;
}
.half-txt2::after{
  content: url(/public/_img/truck/firework.png);
  position: absolute;
  bottom: -17%;
  right: 20%;
  scale: 0.9;
}
.half-txt3{position: relative;}
.half-txt3::before{
  content: url(/public/_img/truck/t-deco1.png);
  position: absolute;
  top: -35%;
  left: 4%;
  scale: 0.8;
}
.half-txt3::after{
  content: url(/public/_img/vending/eyes.png);
  position: absolute;
  bottom: -25%;
  right: 30%;
  transform: scaleX(-1);
}

.detail-box{position: relative; margin: auto; width: 70vw; min-width: 1200px;}
.detail-box h6{font-size: 1.2rem; margin-bottom: 0.5rem;}
.detail-box .shaking2{position: absolute; bottom: 10%; left: 3%; width: 63px;}
.detail-box .pulsate{position: absolute; top: 10%; right: 5%; width: 72px;}
.dtab-btn{position: absolute; top: 50%; left: 0; transform: translateY(-50%); border-left: 1px solid #e4d47f; display: flex; flex-direction: column; gap: 3rem; padding-left: 1rem;}
.dtab-btn li{font-weight: 700; position: relative; cursor: pointer;}
.dtab-btn li::before{content: ""; position: absolute; width: 10px; height: 10px; background-color: #e4d47f; border-radius: 30px; top: 30%; left: calc(-1rem - 5.5px);}
.dtab-btn li.active::before {
  background: #ff0076;
  box-shadow: 0 0 0 5px #fda48a;
}
.detail-tab>div{display: none;}
.detail-tab>div.active{display: block;}


.tr-content a {display: none; height: 480px;}
.tr-content a img{height: 100%;}
.tr-content a.show {display: block;}
.detail-btn{display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 3rem;}
.detail-btn li{border: 2px solid #0d0c35; color: #0d0c35; border-radius: 50px; font-size: 1.1rem; padding: 12px 5px; width: 150px; cursor: pointer;}
.detail-btn li:hover{background-color: #0d0c35; color: #fff;}
.detail-btn li.show {background-color: #0d0c35; color: #fff;}


.mini-box3 li img{height: 68%; margin-bottom: 5%;}
.mini-box3 li:nth-of-type(1) div{background-color: #fffdc3;}
.mini-box3 li:nth-of-type(2) div{background-color: #defcdc;}
.mini-box3 li:nth-of-type(3) div{background-color: #ceecff;}
.mini-box3 li p{font-size: 1.2rem; line-height: 1.6rem;}
.mini-box3 li strong{display: block; font-weight: 800; font-size: 1.8rem; margin-bottom: 10px;}

.bg-orange h5.txt-left{color: #fff; width: 70vw; min-width: 1200px; margin: auto; margin-bottom: 1rem;}
.bg-orange h3.txt-left{color: #fff; width: 70vw; min-width: 1200px; margin: auto;}
.bg-orange{position: relative;}
.bg-orange>img:nth-of-type(1){position: absolute; bottom: 10%; left: 10%; width: 9vw;}
.bg-orange>img:nth-of-type(2){position: absolute; top: 12%; right: 15%; width: 7vw;}
.bg-orange .guest-slide-dots li button{background-color: #fff !important; opacity: 0.7;}
.bg-orange .guest-slide-dots li.slick-active button{opacity: 1;}

.bg-road{
  background-color: #ff7520;
  background: url(/public/_img/truck/bg-road.png) no-repeat center / cover;
  color: #fff;
  padding: 3rem 0;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bg-road h3{
  margin-top: 5rem;
  margin-bottom: 1.8rem;
}
.bg-road h3 i{
  color: #ff7520;
  background-color: #fff;
  font-style: normal;
  padding: 0 0.2rem;
}
.bg-road h6{
  font-size: 1.4rem;
  margin-bottom: 5rem;
}


.road-img img,.road-deco img{
  position: absolute;
}
.road-img img:nth-child(1){
  left: 10%;
  top: 53%;
  width: 15vw;
}
.road-img img:nth-child(2){
  right: 14%;
  top: 71%;
  width: 11vw;
}
.road-deco img:nth-child(1){
  left: 20%;
  top: 10%;
}
.road-deco img:nth-child(2){
  left: 10%;
  top: 25%;
}
.road-deco img:nth-child(3){
  right: 20%;
  top: 14%;
}
.road-deco img:nth-child(4){
  right: 15%;
  top: 35%;
}


/* 트럭 애니메이션 */

@keyframes car-body {
  from {transform: translateY(0);}
  50% {transform: translateY(4px);}
  to {transform: translateY(0);}
}
@keyframes car-tire {
  from {transform: rotate(0deg);}
  to {transform: rotate(350deg);}
}
@keyframes road {
  from {left: 0;}
  to {left: -51%;}
}

.driving-road{
  position: absolute;
  height: 22px;
  animation: road 2.5s linear infinite;
  width: 5000px;
  bottom: 15%;
  left: 0;
  background: repeating-linear-gradient(to right,#ccc2b9 5% 8%,#ffce5b 8% 15%);
}

.driving-car{position: relative; margin-bottom: 4rem;}
.driving-car .car-body{animation: car-body 1.2s linear infinite; width: 44vw;}
.driving-car .car-tire1{
  position: absolute;
  width: 6vw;
  bottom: 7%;
  right: 16%;
  animation: car-tire 0.5s linear infinite;
}
.driving-car .car-tire2{
  position: absolute;
  width: 5vw;
  bottom: 6%;
  left: 22%;
  animation: car-tire 0.5s linear infinite;
}

/* 패밀리 */
.tab-menu{
  width: 70vw;
  min-width: 1200px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5px;
}
.tab-menu li{
  width: 100%;
  padding: 1rem;
  font-size: 1.2rem;
  transition: 0.3s;
  border-bottom: 3px solid transparent;
  cursor: pointer;
}
.tab-menu li.active{
  font-weight: 700;
  color: #e81e75;
  border-bottom: 3px solid #e81e75;
}
.tab-menu li:hover{
  border-bottom: 3px solid #e81e75;
  color: #e81e75;
}
.family-map{
  position: relative;
  margin-bottom: 7rem;
}
.map-search-box{
  position: absolute;
  top: 30px;
  left: 60px;
  border-radius: 2rem;
  box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
  width: 400px;
  overflow: hidden;
  background-color: #fff;
  z-index: 2;
}
.map-search-box div{
  background-color: #222;
  color: #fff;
}
.map-search-box h1{
  font-size: 1.6rem; 
  border-bottom: 1px solid #fff;
  padding: 1rem 0;
}
.map-search-box div p{
  font-weight: 400;
  line-height: 1.6rem;
  padding: 1rem 2rem;
}
.map-search-box ul{
  height: 300px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin: 1.5rem 2rem;
  padding-right: 1rem;
}
.map-search-box ul::-webkit-scrollbar{
  width: 5px;
}
.map-search-box ul::-webkit-scrollbar-track{
  background-color: #eee;
  border-radius: 5px;
}
.map-search-box ul::-webkit-scrollbar-thumb{
  background-color: #222;
  border-radius: 5px;
}
.map-search-box ul li{
  font-size: 1.1rem;
  background-color: #eee;
  color: #666;
  border-radius: 0.4rem;
  line-height: 3rem;
  cursor: pointer;
  transition: 0.2s;
}
.map-search-box ul li:hover{background-color: #e81e75; color: #fff;}
.map-search-box input[type=search]{
  font-size: 1rem;
  padding: 0.6rem;
  border-radius: 6px;
  width: 85%;
  color: #222;
  margin-bottom: 2rem;
}
.map-search-box h6{display: none;}

.map-search-list{
  width: 70vw;
  min-width: 1200px;
  margin: auto;
  border-top: 2px solid #555;
}
.map-search-list li{
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  padding: 2rem;
  cursor: pointer;
}
.map-search-list li>img{
  background-color: #999;
  color: #fff;
  border-radius: 50px;
  font-size: 2rem;
  padding: 1rem;
  width:4rem;
}
.map-search-list p{
  text-align: left;
  margin-left: 2rem;
}
.map-search-list b{
  font-size: 1.8rem;
  font-weight: 500;
  display: block;
  margin-bottom: 0.8rem;
}
.map-search-list span{
  color: #666;
  font-size: 1.1rem;
}



/* 게시판 */
.tool-box{
  width: 70vw;
  min-width: 1200px;
  margin: 20px auto;
  display: flex;
  justify-content: end;
}
.tool-box li{
  margin-right: 10px;
}
.tool-box .btn1{
  font-size: 1.2rem;
  padding: 9px 24px;
}
.tool-box .search{
  border: 1px solid #070707;
  border-radius: 50px;
  padding: 9px 15px;
}
.search>img{float: right; width: 1.4rem;}
.search input[type="search"]{
  font-size: 1rem;
}
.board{
  width: 70vw;
  min-width: 1200px;
  margin: auto;
  border-top: 2px solid #ccc;
  font-size: 1.2rem;
}
.board tr{
  border-bottom: 1px solid #ccc;
  cursor: pointer;
}
.board th{
  padding: 0.7rem;
}
.board td{
  padding: 0.7rem;
}
.board_pin{
  background-color: rgb(232, 30, 117, 0.05);
}
.board_pin td:first-of-type{
  color: #e81e75;
  font-weight: 600;
}
.board .lock-icon{
  width: 11px;
  margin-left: 10px;
}
.paging{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin-top: 40px;
}
.paging li{
  font-size: 1.1rem;
  width: 32px;
  height: 32px;
  padding: 5px 0;
  background-color: #eee;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.2s;
}
.paging li:hover{
  background-color: #ddd;
}
.paging li.now{
  background-color: #e81e75;
  color: #fff;
}
.page-arrow{
  background-color: transparent !important;
  color: #ccc;
  width: 20px !important;
}
.page-arrow img{
  transition: 0.1s;
}
.page-arrow img:hover{filter: brightness(0.8);}
.post{
  width: 70vw;
  min-width: 1200px;
  margin: auto;
  text-align: left;
  margin-bottom: 50px;
  font-size: 1.1rem;
}
.post-h{
  display: grid;
  grid-template-columns: 6fr 1fr 1fr 1fr;
  gap: 15px 10px;
  padding: 1rem;
  border-top: 2px solid #ccc;
  border-bottom: 2px solid #ccc;
}
.post-h h6{
  grid-column: 1 / 5;
  font-size: 1.8rem;
  font-weight: 700;
}
.post-h p{
  color: #666;
  font-weight: 500;
  white-space: nowrap;
}
.post-h p:first-of-type{
  grid-column: 2 / 3;
}
.post-b{
  padding: 2.5rem 1rem;
  border-bottom: 1px solid #ccc;
}
.post-b p{
  line-height: 2rem;
}
.post-f p{
  display: grid;
  grid-template-columns: 1fr 5fr 1fr 2fr 1fr;
  gap: 10px;
  padding: 1rem;
  border-bottom: 1px solid #ccc;
}

sub{
  color: #e81e75;
  display: block;
  width: 70vw;
  min-width: 1200px;
  text-align: right;
  margin: auto;
  margin-bottom: 10px;
  font-size: 0.9rem;
}
.write{
  width: 70vw;
  min-width: 1200px;
  margin: auto;
  border-top: 2px solid #ccc;
  border-bottom: 2px solid #ccc;
  font-size: 1.1rem;
  text-align: left;
  margin-bottom: 50px;
}
.write tbody td{
  border-bottom: 1px solid #ccc;
}
.write th{
  padding: 1rem 0.7rem;
  font-size: 1.1rem;
  white-space: nowrap;
}
.write td{
  padding: 1rem 0.7rem;
}
.write sup{
  color: #e81e75;
}
.write input[type="text"],.write input[type="password"],input[type="tel"]{
  font-size: 1rem;
  /* border: 1px solid #000; */
  width: 100%;
  padding: 5px;
}
.write textarea{
  resize: none;
  width: 100%;
  font-size: 1rem;
}
.write input[type=file]::file-selector-button{
  border: 1px solid #222;
  background-color: #fff;
  padding: 10px 30px;
  border-radius: 20px;
}
.write label{
  padding: 0 6px 0 3px;
}
.write select{padding: 6px; font-family: inherit; font-size: 1rem; outline: none;}

.write input[type="button"]{
  background-color: #666;
  color: #fff;
  border-radius: 4px;
  padding: 4px 14px;
  margin-right: 20px;
}
.agree-box{
  border: 1px solid #ccc;
}
.agree-box h6{
  padding: 1.5rem;
}
.agree-box h6>img{
  float: right;
  cursor: pointer;
  width: 1.4rem;
}
.agree-box .gray-bg{
  color: #666;
  background-color: #f5f5f5;
  font-size: 1rem;
  padding: 1.5rem;
  line-height: 1.4rem;
  border-top: 1px solid #ccc;
  display: none;
}
.txt-box{
  text-align: left;
  width: 70vw;
  margin: auto;
  font-size: 1.1rem;
}
.txt-box h4{
  color: #222;
  margin: 2rem 0 0.4rem 0;
}
.txt-box p{
  line-height: 1.6rem;
  font-weight: 600;
}
.txt-box p span{
  display: inline-block;
  border-radius: 20px;
  color: #fff;
  padding: 3px 10px;
  margin: 5px 5px 5px 0;
  font-weight: 500;
}

/* 반응형 */
@media screen and (max-width: 1280px){
  .sub-bg{height: 350px;}
  .sub-bg h2{font-size: 4rem;}
  .sub-bg h2 p{margin-top: 10px;}
  section h3{font-size: 2.8rem;}

  /* 브랜드 */
  .about-box{grid-template-columns: 1fr 1fr; gap: 50px; width: 90vw; margin-top: 100px;}
  .about-txt p{font-size: 1.1rem;}
  .about-list li b{font-size: 1.2rem; margin: 15px 0;}
  .about-list span{font-size: 1rem;}
  #section2 .container h5{width: 80%;}
  #section3 h3{margin-top: 100px;}
  #section4 h3{margin-top: 100px;}
  .timeline-box{width: 90vw; min-width: auto;}
  .equip-slide{width: 65vw;}
  .equip-slide .equip-li{padding: 30px;}
  .equip-img img{width: 38vw;}
  .map-txt p{font-size: 1rem;}
  .sns-tab{width: 92vw;}
  .sns-list{grid-template-columns: repeat(3,1fr); width: 90vw; gap: 1.5rem;}
  .mg-page{width: 90vw;}

  /* 업소용 */
  .busi-main{margin-bottom: 0;}
  .busi-title{width: 45vw;}
  .busi-slide{width: 33vw;}
  .busi-drink1{left: 24%;}
  .busi-drink2{top: 54%; left: 16%;}
  .busi-cap{width: 12vw; right: 20%;}
  .busi-deco1{width: 16vw; left: 6%;}
  .busi-deco2{width: 12vw; right: 8%;}
  .busi-deco3{width: 8vw; right: 16%;}
  .busi-deco4{width: 8vw; left: 6%;}
  .busi-deco5{width: 9vw; right: 9%;}
  .chart-grid{min-width: auto; width: 90vw; grid-template-columns: 4fr 5fr;}
  .chart-title{margin-left: 0;}
  .chart-title h2{font-size: 2.5rem;line-height: 3.3rem;}
  .chart-title img{width: 28vw;}
  .chart-arrow img:first-child{width: 230px;}
  .chart-arrow img:last-child{width: 120px;}
  .graph1{width: 150px; height: 80px;}
  .graph2 div{width: 150px; height: 80px;}
  .graph2 div.show{height: 460px;}
  .graph2 strong{font-size: 1.7rem;}
  .chart-bottom{padding: 15px 5vw;}
  .chain-box{grid-template-columns: 1fr 1fr; min-width: auto; width: 90vw; gap: 3rem;}
  .chain-txt h2{font-size: 3rem;}
  .chain-txt img{width: 30vw;}
  .chain-map .pin p{font-size: 1.2rem;}
  .chain-map .pin img{width: 70%;}
  .mya-slide1{width: 40vw;}
  .mya-deco img:nth-of-type(1){left: 15%;}
  .mya-deco img:nth-of-type(2){right: 12%;}
  .bubble b{font-size: 1.5rem; padding: 0.3rem 0.8rem;}
  .bubble b:nth-of-type(1){left:17%;}
  .bubble b:nth-of-type(2){left:14%;}
  .bubble b:nth-of-type(3){right:13%;}
  .bubble b:nth-of-type(4){right:16%;}

  .new-deco b{font-size: 1.6rem;}
  .ocean-circle{width: 32vw; height: 32vw;}
  .ocean-circle h2{font-size: 2.4rem;}
  .ocean-circle h4{font-size: 1.6rem;}
  .ocean-circle i{font-size: 1.1rem;}
  .ocean-circle span{font-size: 1rem; line-height: 1.5rem;}
  .mini-box{min-width: auto; width: 90vw;}
  .mini-box li div{height: 290px;}
  .mini-box li p{font-size: 1.2rem;}
  .blue-slide{width: 32vw;}
  .blue-drink1{width: 22vw; left: 11%;}
  .blue-drink2{width: 22vw; right: 11%;}
  .blue-deco1{width: 8vw;}
  .blue-deco2{width: 4vw;}
  .blue-deco3{width: 7vw;}

  .menu-slide{min-width: auto; width: 86vw;}
  .menu-slide .slick-arrow{width: 30px; height: 30px;}
  .menu-slide .slick-prev::before{font-size: 1.2rem;}
  .menu-slide .slick-next::before{font-size: 1.2rem;}
  .mg-box{width: 80vw; min-width: auto; gap: 0 3rem;}
  .mg-card h4{font-size: 2.3rem;}

  /* 가정용 */
  .house-main{margin-bottom: 0;}
  .house-machine{width: 33vw; margin-top: 8rem;}
  .house-img p{left: 8%; font-size: 2rem; top: 11%;}
  .house-t1{left: 8%; width: 29vw; top: 16%;}
  .house-t2{right: 10%; width: 27vw; top: 60%;}
  .house-cap{width: 12vw; left: 7%; top: 68%;}
  .house-drink1{width: 12vw; left: 14%; }
  .house-drink2{width: 12vw; left: 24%;}
  .house-deco1{width: 9vw; left: 8%;}
  .house-deco2{right: 28%; width: 5vw;}
  .house-deco3{width: 10vw; bottom: 50%;}
  .new-box{min-width: auto;width: 90vw;}
  .new-txt{width: 54%;}
  .new-txt h1{font-size: 1.5rem;}
  .new-txt h3{font-size: 2.5rem;}
  .new-slide{width: 46%;}
  .pink-tape p{font-size: 1.7rem;}
  .b-box{min-width: auto;width: 90vw; gap: 1rem;}
  .b-txt{width: 90vw;}
  .b-deco1{width: 7vw;}
  .b-deco2{width: 10vw;}
  .b-box .color-bg{height: 330px;}
  .b-box li strong{font-size: 1.6rem;}
  .b-box li span{font-size: 1.1rem;}
  .b-box li p{font-size: 1.2rem;}
  .pink-tape p{font-size: 1.5rem;}
  .point-title{font-size: 3rem;}
  .point-box{min-width: auto;width: 85vw; gap: 3rem 2rem;}
  .point-txt h4{width: 80%;font-size: 1.8rem;}
  .point-txt p{font-size: 1.2rem;width: 100%;}
  .point-img img:first-child{border-radius: 25px;}
  .point-img .pto{width: 6vw;}
  .pt-deco1{width: 6vw;}
  .pt-deco2{width: 5vw;}
  .pt-deco3{width: 4vw;}
  .pt-deco4{width: 4vw;}
  .pt-deco5{width: 6vw;}
  
  .myb-machine{width: 55vw;}
  .myb-deco1{width: 8vw; left: 5%;}
  .myb-deco2{width: 4vw; right: 16%;}
  .myb-deco3{width: 8vw; right: 6%;}
  .buy-card{width: 80vw;}
  .shop-txt h1{font-size: 1.8rem;}
  

  /* 자판기 */
  .vending-main{height: 860px; padding-left:5vw}
  .vending-main h2{font-size: 5rem; line-height: 6rem;}
  .vending-img img:nth-child(1){width: 30vw; right: 5%;}
  .vending-img img:nth-child(2){width: 19vw; right: 30%;}
  .vending-img img:nth-child(3){width: 25vw; left: 32%;}
  .vending-img img:nth-child(4){width: 12vw; left: 25%;}
  .vending-deco img:nth-child(1){left: 5%; top: 54%; width: 10vw;}
  .vending-deco img:nth-child(2){left: 16%; width: 9vw;}
  .vending-deco img:nth-child(3){width: 4vw;}
  .vending-deco img:nth-child(4){width: 8vw;}
  .vending-deco img:nth-child(5){width: 12vw;}
  .vending-deco img:nth-child(6){right: 5%; width: 5vw;}

  .panel{min-width: auto; width: 90vw; gap: 1.5rem;}
  .panel li h1{font-size: 1.8rem;}
  .flag{gap: 1rem;}
  .flag li{padding: 1rem 3rem 1rem 1.4rem; min-width: 320px;}
  .flag li img{margin-right: 1.3rem;}
  .flag li p{font-size: 1.6rem;}
  .bg-azure h5.txt-left,.bg-azure h3.txt-left{margin-left: 5vw;}
  .mini-box2{width: 90vw; min-width: auto; gap:1.5rem;}
  .mini-box2 li div{height: 320px;}
  .mini-box2 li p{font-size: 1.1rem;}
  .mini-box2 li strong{font-size: 1.3rem;}
  
  .vg-deco img:nth-child(1){left: 80%; top: -140px; width: 10vw;}
  .vg-deco img:nth-child(2){display: none;}
  .guest-slide{min-width: auto; width: 90vw;}
  .guest-list{padding: 2rem 1.2rem; margin: 0.5rem;}
  .guest-list h1{font-size: 1.4rem;}
  .guest-list b{font-size: 1rem;}
  .v-box li{width: 43vw;}
  .vv-deco img:nth-child(1){width: 8vw; left: 5%;}
  .vv-deco img:nth-child(2){width: 6vw; left: 15%;}
  .vv-deco img:nth-child(3){width: 11vw; right: 7%;}
  .v-box li b{font-size: 1.4rem;}
  .v-box li i{font-size: 1.1rem;}

  .pu-group{min-width: auto; width: 90vw;}
  .pu-group>img{width: 46vw;}
  .pu-box{min-width: auto; width: 90vw;}
  .pu-box li{padding: 1rem;}
  .pu-box h1{font-size: 1.2rem;}
  .pu-box u{font-size: 1rem;}
  .pu-list{width: 90vw; margin: auto;}
  .up-vending img:first-of-type{width: 46vw;}
  .pu-deco1, .pu-deco2{display: none;}

  .bg-navy h6{margin-top: 5rem;}
  .navy-img{height: 32vw;}
  .navy-img img:nth-child(1){left: 5%; width: 19vw; bottom: 12%;}
  .navy-img img:nth-child(2){left: 25%; width: 19vw; top: 60%;}
  .navy-img img:nth-child(3){right: 35%; width: 19vw; top: 62%;}
  .navy-img img:nth-child(4){right: 5%; width: 27vw;}

  /* 포터필터 */
  .porter-main{padding-top: 50px; margin-bottom: 0;}
  .porter-title{width: 60vw;}
  .porter-machine{ width: 56vw; min-width: auto;}
  .porter-img img:nth-child(1){left: 5%; width: 16vw;}
  .porter-img img:nth-child(2){width: 40vw; top: 65%;}
  .porter-img img:nth-child(3){right: 10%; width: 13vw;}
  .porter-deco img:nth-child(1){left: 2%; top: 12%; width: 13vw;}
  .porter-deco img:nth-child(2){left: 6%; width: 8vw;}
  .porter-deco img:nth-child(3){right: 5%; width: 5.4vw;}
  .porter-deco img:nth-child(4){right: 7%; width: 10vw;}
  .step-box>img:nth-of-type(1){top: -50%;}
  .step-box>img:nth-of-type(2){right: 7%;}
  .step-list{padding: 1.2rem; gap: 0.4rem;}
  .step-list li{width: 160px; height: 160px; font-size: 1.2rem;}
  .step-list2::after{right: -12%;}
  .mp-box{min-width: auto; width: 90vw; gap: 2rem;}
  .mp-con li h6{font-size: 1.5rem;}
  .panel2>img:nth-of-type(1){left: 0; width: 7vw;}
  .panel2>img:nth-of-type(2){right: 0; width: 5vw;}
  .filter-box1 h3{min-width: auto; width: 90vw;}
  .filter-box1>img{display: none;}
  .ballon{min-width: auto; width: 90vw;}

  .match-box .match1{width: 40vw;}
  .match-box .match3{width: 40vw;}
  .grass-img img:nth-child(1){width: 15vw; left: 5%;}
  .grass-img img:nth-child(2){width: 40vw;}
  .grass-img img:nth-child(3){width: 12vw; right: 10%;}
  .grass-deco img:nth-child(1){width: 9vw; left: 15%;}
  .grass-deco img:nth-child(2){width: 9vw; left: 6%;}
  .grass-deco img:nth-child(3){width: 10vw; right: 11%;}
  .grass-deco img:nth-child(4){width: 5vw; right: 7%;}
  .bg-grass>img{width: 50vw;}
  .bg-grass .btn3{margin-top: 8rem;}


  /* 무인카페 */
  .cafe-main{padding: 70px 0 60px 0;}
  .ready-img img:nth-child(1){width: 43vw;}
  .ready-img img:nth-child(2){left: 14%;width: 18vw;}
  .ready-img img:nth-child(3){right: 14%;width: 18vw;}
  .ready-txt i{font-size: 1.3rem;}

  /* 커피트럭 */
  .truck-main{margin-bottom: 0;}
  .truck-title{width: 70vw;}
  .truck-car{min-width: auto; width: 55vw;}
  .truck-img img:nth-child(1){left: 4%; top: 57%; min-width: auto; width: 24vw;}
  .truck-img img:nth-child(2){right: 8%; min-width: auto; width: 15vw;}
  .truck-deco img:nth-child(1){width: 14vw; left: 2%; top: 10%;}
  .truck-deco img:nth-child(2){width: 8vw;}
  .truck-deco img:nth-child(3){width: 10vw; right: 5%;}
  .truck-deco img:nth-child(4){width: 14vw; right: 3%;}
  .truck-deco img:nth-child(5){width: 5vw; right: 10%; top: 58%;}
  .new-txt2::before{left: 0; scale: 0.8;}
  .new-txt2::after{scale: 0.7; bottom: -20%;}
  .half-box2::before{top: -3%; left: -4%;scale: 0.7;}
  .half-txt h6{font-size: 1.3rem; margin-bottom:0.7rem}
  .half-txt h3{font-size: 2.5rem; margin-bottom: 2rem;}
  .half-txt p{font-size: 1.1rem;}
  .half-txt1::before{scale: 0.7;}
  .half-txt1::after{scale: 0.7; right: 15%;}
  .half-txt2{margin-left: 12%;}
  .half-txt2::before{display: none;}
  .half-txt2::after{scale: 0.8;}
  .half-txt3::before{scale: 0.7; top: -15%;}
  .half-txt3::after{scale: 0.7; bottom: -15%; right: 10%;}
  .detail-box{width: 90vw; min-width: auto;}
  .detail-box .shaking2{width: 55px;}
  .detail-box .pulsate{width: 65px;}
  .tr-content a{height: 430px;}
  .detail-btn{gap: 12px;}
  .mini-box3 li strong{font-size: 1.6rem;}
  .mini-box li p{font-size: 1.1rem;}
  .bg-orange h5.txt-left{width: 90vw; min-width: auto;}
  .bg-orange h3.txt-left{width: 90vw; min-width: auto;}
  .bg-orange>img:nth-of-type(1){width: 11vw;}
  .bg-orange>img:nth-of-type(2){width: 9.5vw;}

  .bg-road h3{margin-top: 4rem;}
  .driving-road{height: 19px;}
  .driving-car .car-body{width: 55vw;}
  .driving-car .car-tire1{width: 7.7vw;}
  .driving-car .car-tire2{width: 6.4vw;}
  .road-img img:nth-child(1){width: 20vw; left: 4%;}
  .road-img img:nth-child(2){width: 14vw; right: 8%;}
  .road-deco img:nth-child(1){left: 4%; top: 6%; width: 8vw;}
  .road-deco img:nth-child(2){width: 11vw;}
  .road-deco img:nth-child(3){right: 13%; width: 12vw;}
  .road-deco img:nth-child(4){right: 8%; width: 6vw;}

  /* 패밀리 */
  .tab-menu{width: 100%; min-width: auto;}
  .map-search-box{width: 320px; left: 36px;}
  .map-search-box h1{font-size: 1.4rem;}
  .map-search-box ul{height: 250px; margin:1.5rem;}
  .map-search-box ul li{font-size: 1rem; line-height: 2.5rem;}
  .map-search-list{min-width: auto; width: 90vw;}
  .map-search-list b{font-size: 1.7rem;}

  /* 게시판 */
  .tool-box{width: 90vw; min-width: auto;}
  .board{width: 90vw; min-width: auto; font-size: 1.1rem; }
  .post{width: 90vw; min-width: auto;}
  .post-h{grid-template-columns: 5fr 1fr 1fr 1fr;}
  .write{width: 90vw; min-width: auto;}
  sub{width: 90vw; min-width: auto;}
}


@media screen and (max-width: 1024px){
  section h3{font-size: 2.6rem;}
  section h5{font-size: 1.1rem;}

  .video-main{height: auto; overflow: hidden; padding-top: 60px;}

  /* 브랜드 */
  .container{height: auto;}
  .about-box{margin-bottom: 50px;}
  .about-txt{grid-column: 1 / 3;order: 2;}
  .about-img{order: 1;grid-column: 1 / 3;}
  .b1-pop1{left: -10px;}
  .b1-pop2{right: -10px;}
  .about-list{order: 3;flex-wrap:wrap;gap: 25px;}
  .about-list li{width: 47%; box-shadow: 1px 1px 5px 1px #eee; padding: 1.2rem; border-radius: 30px;}
  .about-list b{width: 100%;}
  .about-list span{width: 100%;}
  #section2 .container{padding-top: 50px;padding-bottom: 50px;}
  #section3 h3{margin-top: 50px;}
  #section4 h3{margin-top: 100px;}
  .equip-slide{width: 90vw; margin: 35px auto 50px auto;}
  .equip-img{gap: 10px;}
  .equip-img img{width: 45vw;}
  #section5 h3{margin-top: 80px;}

  .map-txt{margin-left: 4vw; margin-bottom: 60px;}
  .mg-box{width: 90vw;}
  .mg-card p{font-size: 1.1rem;}
  .mg-card .btn2{font-size: 1.2rem;}
  .sns-cate li{font-size: 1.1rem; padding: 0.5rem 1.8rem;}

  /* 업소용 */
  .busi-title{width: 54vw;}
  .busi-slide{width: 48vw;}
  .busi-drink1{left: 16%; width: 12vw; top: 56%;}
  .busi-drink2{left: 6%; width: 12vw; top: 59%;}
  .busi-cap{right: 12%; width: 15vw;}
  .busi-deco1{left: 1%; width: 20vw;}
  .busi-deco2{right: 4%; width: 14vw;}
  .busi-deco3{right: 12%; top: 36%; width: 10vw;}
  .busi-deco4{top: 45%;}
  .busi-deco5{top: 52%;}

  .chart-grid{width: 86vw; grid-template-columns: 1fr 1fr;}
  .chart-up{justify-content: space-between;}
  .chart-title h2{font-size: 2.3rem;}
  .chart-title p{font-size: 1.3rem; margin-top: 0.6rem;}
  .graph1{width: 120px;}
  .graph2 div{width: 120px;}
  .graph2 div.show{height: 440px;}
  .graph2 strong{font-size: 1.4rem; font-weight: 600;}
  .graph2 strong::before,.graph2 strong::after{display: none;}
  .chart-arrow img{left: 70%; top: 50%;}
  .chart-arrow img:first-child{width: 200px;}
  .chart-arrow img:last-child{width: 100px;}
  .chain-txt{margin-left: 0; margin-top: 1rem;}
  .chain-txt h1{font-size: 1.5rem;}
  .chain-txt h2{font-size: 2.6rem;}
  .chain-map .pin img{width: 60%;}

  .bubble b{font-size: 1.2rem;}
  .bubble b:nth-of-type(1){left:14%;}
  .bubble b:nth-of-type(2){left:11%;}
  .bubble b:nth-of-type(3){right:10%;}
  .bubble b:nth-of-type(4){right:13%;}

  .ocean-circle h2{font-size: 2rem;}
  .ocean-circle h4{font-size: 1.3rem;}
  .mini-box{gap: 20px;}
  .mini-box li div{height: 240px;}
  .blue-slide{width: 36vw;}
  .blue-drink1{width: 25vw; left: 5%;}
  .blue-drink2{width: 25vw; right: 5%;}
  .blue-cap{width: 12vw;}
  .blue-deco1{width: 10vw; left: 5%;}
  .blue-deco2{width: 5vw; right: 6%;}
  .blue-deco3{width: 9vw;}
  .new-txt p{font-size: 1.1rem; line-height: 1.5rem;}
  .busi-group .new-txt h3{margin-bottom: 0;}
  .busi-group .new-txt h4{margin: 30px 0 20px 0;}

  .bg-ocean{padding-top: 7rem; padding-bottom: 4rem;}


  /* 가정용 */
  .house-img p{left: 6%;}
  .house-machine{width: 42vw; margin-top: 9rem;}
  .house-t1{left: 6%;width: 35vw;}
  .house-t2{right: 7%;width: 33vw; top: 63%;}
  .house-cap{display: none;}
  .house-drink1{width: 14vw; left: 5%; top: 52%;}
  .house-drink2{width: 14vw; left: 16%; top: 50%;}
  .house-txt{font-size: 1.2rem;}
  .new-txt h3{font-size: 2rem;}
  .b-box li strong{font-size: 1.4rem;}
  .b-box li span{font-size: 1rem;}
  .b-box li p{font-size: 1rem;}
  .b-box li p svg{font-size: 1rem;}
  .b-box .color-bg{height: 300px;}
  .point-box{gap: 2rem;}
  .point-txt h4{font-size: 1.6rem;}
  .point-txt p{font-size: 1rem; line-height: 1.5rem;}
  .shop-txt h1{font-size: 1.6rem;}

  /* 자판기 */
  .vending-main{height: 820px;}
  .vending-main h2{font-size: 4rem; line-height: 5rem;}
  .vending-img img:nth-child(1){width: 39vw;}
  .vending-img img:nth-child(2){width: 23vw; right: 36%;}
  .vending-img img:nth-child(3){width: 30vw; left: 19%;}
  .vending-img img:nth-child(4){width: 15vw; left: 7%;}
  .vending-img img:nth-child(5){width: 180vw;}
  .vending-deco img:nth-child(2n){display: none;}
  .vending-deco img:nth-child(1){top: 62%;}
  .vending-deco img:nth-child(5){top: 11%; right: 7%;}
  .v-txt{font-size: 1.3rem;}
  .flag{flex-direction: column; width: 60vw; margin: auto;}
  .flag li{padding: 1.5rem 2rem;}
  .mini-box2{gap: 0.7rem;}
  .mini-box2 li div{height: 30vw;}
  .mini-box2 li img{height: 90%;}
  .mini-box2 li p{font-size: 1rem; margin: 20px 10px;}
  .mini-box2 li strong{font-size: 1.2rem; }
  .v-box{gap: 1rem;}
  .v-box li b{font-size: 1.4rem;}
  .v-box li i{font-size: 1.2rem;}
  .v-box li p{font-size: 1.3rem;}
  .pu-box {flex-wrap: wrap; gap: 1.5rem 0;}
  .pu-box li{width: 48%;}
  .pu-txt h4{font-size: 1.5rem;}
  .pu-txt strong{font-size: 1rem; line-height: 1.4rem;}

  .bg-navy h6{margin-top: 4rem;}
  .navy-img{height: 40vw;}
  .navy-img img:nth-child(1){width: 22vw;}
  .navy-img img:nth-child(2){width: 21vw;}
  .navy-img img:nth-child(3){width: 21vw; z-index: 2;}
  .navy-img img:nth-child(4){width: 32vw;}
  .navy-deco img:nth-child(1){left: 5%; width: 11vw;}
  .navy-deco img:nth-child(2){left: 18%; width: 7vw;}
  .navy-deco img:nth-child(3){display: none;}
  .navy-deco img:nth-child(4){right: 15%; top: 10%; width: 8vw;}
  .navy-deco img:nth-child(5){right: 5%; top: 24%; width: 9vw;}
  
  /* 포터필터 */
  .porter-main{gap: 2.5rem;}
  .porter-title{width: 68vw;}
  .porter-machine{width: 60vw;}
  .porter-img img:nth-child(1){width: 18vw; left: 3%;}
  .porter-img img:nth-child(2){width: 50vw;}
  .porter-img img:nth-child(3){width: 15vw; right: 4%;}
  .step-list{gap: 0.2rem; padding: 1rem;}
  .step-list li{width: 15.4vw; height: 15.4vw;}
  .mp-con li:first-child .sqre{font-size: 1.3rem;}

  .panel li h1{font-size: 1.6rem;}
  .ballon h1{font-size: 1.6rem;}
  .ballon p{font-size: 1.1rem;}
  .mp-box{grid-template-columns: 1fr;}
  .mp-txt img{display: none;}
  .mp-txt h6{margin-bottom: 3rem;}
  .mp-con{display: flex;justify-content: space-between;align-items: center; gap: 2rem;}
  .mp-con li{padding: 2.4rem 1.4rem 1.4rem 1.4rem; width: 100%; border: 2px solid #fff; height: 100%;}
  .mp-con li h6{padding: 0.6rem 2rem; font-size: 1.4rem;}
  .mp-con li:last-child{margin-top: 0;}
  .match-box dt{font-size: 1.5rem;}
  .match-box dd{padding: 1.3rem; font-size: 1.1rem;}
  .match-box .match2 dd{padding: 2rem 3rem;}
  .bg-grass>img{width: 55vw;}
  .grass-img img:nth-child(1){width: 17vw;}
  .grass-img img:nth-child(2){width: 45vw;}
  .grass-img img:nth-child(3){width: 14vw; right: 7%;}

  /* 커피트럭 */
  .truck-main{gap: 4rem;}
  .truck-main h1{font-size: 2rem;}
  .truck-title{width: 80vw;}
  .truck-car{width: 68vw;}
  .truck-img img:nth-child(1){left: 2%; top: 62%;}
  .new-txt2::before{scale: 0.6;}
  .new-txt2::after{scale: 0.55;}
  .half-txt h3{font-size: 2.3rem;}
  .half-txt p{font-size: 1rem; line-height: 1.6rem;}
  .half-txt1::before{scale: 0.5;}
  .half-txt1::after{scale: 0.6;}
  .half-txt2{margin-left: 0;}
  .half-box2::before{scale: 0.52; top: -6%; left: -7%;}
  .half-txt2::after{scale: 0.6; right: 8%;}
  .half-txt3::before{scale: 0.6;}
  .half-txt3::after{scale: 0.6;}
  .detail-box .shaking2{left: 0; width: 42px;}
  .detail-box .pulsate{right: 0; width: 52px;}
  .tr-content a{height: 380px;}
  .detail-btn li{font-size: 1rem; width: 130px; padding: 9px 3px;}
  .mini-box3 li strong{font-size: 1.4rem;}
  .mini-box li p{font-size: 1rem;}
  .bg-orange>img:nth-of-type(1){width: 13vw;}
  .bg-orange>img:nth-of-type(2){width: 12vw;}

  .driving-car .car-body{width: 62vw;}
  .driving-car .car-tire1{width: 8.8vw;}
  .driving-car .car-tire2{width: 7.2vw;}
  .road-img img:nth-child(1){width: 20vw; left: 4%;}
  .road-img img:nth-child(2){width: 14vw; right: 8%;}
  .road-deco img:nth-child(1){left: 4%; top: 6%; width: 8vw;}
  .road-deco img:nth-child(2){width: 11vw;}
  .road-deco img:nth-child(3){right: 13%; width: 12vw;}
  .road-deco img:nth-child(4){right: 8%; width: 6vw;}

  /* 패밀리 */
  .tab-menu li{font-size: 1.1rem; padding: 0.85rem;}
  .map-search-box{width: 300px;}
  .map-search-box h1{font-size: 1.3rem;}
  .map-search-box ul{height: 220px;}
  .map-search-box ul li{line-height: 2rem;}
  .map-search-list li{padding: 1.6rem;}
  .map-search-list b{font-size: 1.5rem;}
  /* .map-search-list svg{padding: 1rem 0.8rem; font-size: 1.8rem;} */
  
  /* 게시판 */
  .board{font-size: 1rem;}
  .tool-box .btn1{font-size: 1rem;}
  .tool-box .search{padding: 7px 15px;}
  .post-h{gap: 15px 20px;}
  .post-f p{grid-template-columns: 1fr 4fr 2fr;}
  .write th{padding: 0.8rem 0.5rem;font-size: 1rem;}
  .write td{padding: 0.8rem 0.5rem;font-size: 1rem;}
  .paging li{font-size: 1rem;width: 30px;height: 30px;}
  .txt-box{width: 90vw;}
}

@media screen and (max-width: 820px){
  section h3{font-size: 2rem;}
  .pc_only{display: none;}
  .timeline-box{display: none;}
  .m-timebox{display: block;}
  .mg-box{gap: 0 1.5rem;}
  .mg-card h4{font-size: 2.1rem;}
  .menu-slide{width: 80vw;}
  .sns-list{grid-template-columns: repeat(2,1fr);}

  /* 업소용 */
  .busi-title{width: 65vw;}
  .busi-slide{width: 50vw; min-width: 380px;}
  .busi-drink1{left: 15%; width: 14vw;}
  .busi-drink2{left: 5%; width: 14vw;}
  .busi-cap{right: 11%; width: 17vw;}
  .busi-deco1{width: 22vw; top: 9%;}
  .busi-deco2{top: 12%; width: 16vw;}
  .busi-deco3{right: 82%; top: 45%; width: 11vw;}
  .busi-deco4{display: none;}
  .busi-deco5{top:45%; width: 12vw;}
  .busi-group .new-box{margin-bottom: 80px;}
  .busi-group .new-box:nth-of-type(2){flex-direction: column;}
  .busi-group .new-txt{width: 100%;}
  .busi-group .new-img img{width: 90%;}

  .chart-grid{width: 86vw; grid-template-columns: 1fr;}
  .chart-title{margin-bottom: 2rem;}
  .chart-title img{display: none;}
  .chart-bottom{grid-template-columns: 0 1fr 1fr;}
  .chart-box{padding-top: 50px;}
  .chart-up{justify-content: space-around; min-height: 450px;}
  .graph1{width: 150px;}
  .graph2 div{width: 150px;}
  .graph2 div.show{height: 420px;}
  .chart-arrow img{top: 60%; left: 46%;}

  .chain-box{grid-template-columns: 1fr; padding-bottom: 50px;}
  .chain-txt{order: 2; display: flex; justify-content: space-between;}
  .chain-txt img{width: 36vw;}
  .chain-map{order: 1; width: 80%; margin: auto;}
  .mya-ivory h5{padding-top: 5rem; margin: 0 5vw 1rem 5vw;}
  .mya-slide1{width: 60vw;}
  .mya-deco{display: none;}
  .bubble b:nth-of-type(1){left:7%;}
  .bubble b:nth-of-type(2){left:4%;}
  .bubble b:nth-of-type(3){right:3%;}
  .bubble b:nth-of-type(4){right:6%;}
  .new-cap{width: 60vw; margin: 2rem;}
  .ocean-txt{margin: 2rem auto;}
  .ocean-box{flex-direction: column; margin-bottom: 6rem; gap: 1.3rem;}
  .ocean-circle{width: 90vw; height: auto; border: none; border-radius: 30px; padding: 1.2rem;}
  .ocean-circle:first-of-type{transform: translate(0,0)}
  .ocean-circle:last-of-type{transform: translate(0,0)}
  .ocean-circle i{font-size: 1.3rem;}
  .ocean-circle h2{font-size: 2.4rem;}
  .ocean-circle h4{font-size: 1.6rem;}
  .ocean-circle span{font-size: 1.3rem; line-height: 1.8rem; width: 100%;}
  .point-title{margin-bottom: 3rem;}
  .mini-box{grid-template-columns: 1fr;}
  .mini-box li div{height: auto; padding-top: 2rem;}
  .mini-box3 li strong{font-size: 1.5rem;}
  .mini-box li p{font-size: 1.2rem;}
  .blue-slide{width: 46vw;}
  .bg-blue .btn1{width: 80vw;}

  /* 가정용 */
  .house-machine{width: 47vw; margin-top: 11rem;}
  .house-img p{font-size: 1.6rem; top: 12%;}
  .house-t1{width: 38vw;}
  .house-t2{width: 37vw; top: 67%;}
  .house-cap{display: none;}
  .house-drink1{width: 16vw; left: 3%; top: 52%;}
  .house-drink2{width: 16vw; left: 16%; top: 50%;}
  .house-deco1{width: 11vw; left: 8%;}
  .house-deco2{right: 28%; width: 6vw;}
  .house-deco3{width: 12vw; right: 6%;}

  .new-box{flex-direction: column-reverse; gap: 3rem;  box-shadow: 1px 1px 8px 1px #ececec; border-radius: 20px; padding: 30px;}
  .new-slide{width: 100%;}
  .new-img{width: 80vw; height: auto; margin-top: 30px;}
  .new-txt{width: 100%;}
  .new-txt h1{font-size: 1.4rem;}
  .new-txt h4{padding-bottom: 10px; margin: 25px 0 20px 0; font-size: 1.4rem;}
  .new-txt h3{margin-bottom: 40px;}
  .new-txt p{margin-bottom: 10px; font-size: 1.2rem;}

  .house-txt{font-size: 1.4rem;}
  .hhh{gap: 0;}
  .hhh .new-txt h3{margin-bottom: 0;}
  .pink-tape p{font-size: 1.4rem;}
  .b-box{grid-template-columns: 1fr; gap: 2rem;}
  .b-box .color-bg{height: 520px;}
  .b-deco1,.b-deco2{display: none;}
  .b-box li strong{font-size: 1.6rem;}
  .b-box li span{font-size: 1.2rem;}
  .b-box li p{font-size: 1.2rem;}

  .point-title{font-size: 2.5rem;}
  .point-box{grid-template-columns: 1fr; gap: 2rem; margin-bottom: 1rem;}
  .point-box div:nth-of-type(1){order: 2;}
  .point-box div:nth-of-type(2){order: 1;}
  .point-box div:nth-of-type(3){order: 3;}
  .point-box div:nth-of-type(4){order: 4;}
  .point-box div:nth-of-type(5){order: 6;}
  .point-box div:nth-of-type(6){order: 5;}
  .point-box div:nth-of-type(7){order: 7;}
  .point-box div:nth-of-type(8){order: 8;}
  .point-box div:nth-of-type(9){order: 10;}
  .point-box div:nth-of-type(10){order: 9;}

  .point-img img:first-child{border-radius: 20px;}
  .point-img .pto{width: 10vw;}
  .point-txt{margin-bottom: 2rem;}
  .point-txt h4{width: 100%; font-size: 1.5rem;}
  .point-txt img{display: none;}
  .point-txt p{font-size: 1.2rem;}

  .myb-machine{width: 90vw;}
  .myb-deco1{top: 17%; left: 7%; width: 9vw;}
  .myb-deco2{top: 10%; right: 8%; width: 5vw;}
  .myb-deco3{display: none;}
  .b-txt{font-size: 2.4rem;}
  .buy-card{width: 90vw;}
  .shop-txt h1{font-size: 1.4rem;}


  /* 자판기 */
  .vending-main{height: 800px;}
  .flag{width: 70vw;}
  .flag li{padding: 1rem 1.5rem;}
  .flag li p{font-size: 1.4rem;}
  .flag li img{width: 50px;}
  .mini-box2{grid-template-columns: 1fr;}
  .mini-box2 li div{height: 45vw;}
  .mini-box2 li img{height: 95%;}
  .mini-box2 li strong{font-size: 1.5rem;}
  .mini-box2 li p{font-size: 1.2rem;}
  .panel{grid-template-columns: repeat(2,1fr);}
  .panel li h1{font-size: 1.3rem;}
  .panel li span{font-size: 1rem;}
  .v-txt{font-size: 1.4rem;}
  .v-box{flex-wrap: wrap; gap: 2rem;}
  .v-box li{width: 84vw;}
  .v-box li b{font-size: 1.7rem;}
  .v-box li i{font-size: 1.4rem;}
  .v-box li p{font-size: 1.4rem;}
  .pu-group .up-arrow{display: none;}
  .navy-img img:nth-child(4){width: 35vw;}
  .vg-deco img:nth-child(1){width: 13vw;}
  .guest-slide{padding: 2rem 0;}
  .guest-slide .guest-list:nth-of-type(3n){transform: translateY(-20px);}
  .guest-slide .guest-list:nth-of-type(3n+2){transform: translateY(30px);}

  /* 포터필터 */
  .porter-title{width: 78vw; padding-top: 20px;}
  .porter-machine{width: 70vw;}
  .porter-img img:nth-child(2){width: 60vw;}
  .porter-img img:nth-child(3){top: 63%;}
  .porter-deco img:nth-child(1){left: 4%; width: 16vw;}
  .porter-deco img:nth-child(2){width: 9vw;}
  .porter-deco img:nth-child(4){width: 11vw;}
  .step-list{flex-wrap: wrap; border-radius: 100px; max-width: 90vw;}
  .step-list li{width: 22vw; height: 22vw;}
  .step-list2::after{display: none;}
  .step-box>img{display: none;}
  .step-box button{top: 63%;}
  .mp-con{flex-wrap: wrap;}
  .mp-con li{height: auto; padding: 3rem 2rem 2rem 2rem;}
  .mp-con .sqre{width: 70%;}
  .mp-con li:last-child .sqre::before{left: 26%;}


  .panel2{grid-template-columns: repeat(2,1fr);}
  .panel2>img:nth-of-type(1){width: 10vw;}
  .panel2>img:nth-of-type(2){width: 8vw;}
  .ballon{gap: 2rem 1.2rem;}
  .ballon li{padding: 1.5rem;}
  .ballon h1{font-size: 1.4rem; margin-bottom: 0.6rem;}
  .panel2>img:nth-of-type(1){top: -130px;}
  .panel2>img:nth-of-type(2){bottom: -70px;}

  .filter-box2{margin-bottom: 6rem;}
  .match-box{flex-direction: column; width: 90vw; margin: auto; gap: 1rem;}

  .match-box .match1,.match-box .match3{transform: translate(0); width: 100%;}
  .match-box .match2{margin-bottom: 1.5rem;}
  .match-box .match2 dd{font-size: 1.3rem;display: inline-block; border-bottom: none; border-right: 1px solid #fff; padding: 1rem 4rem;}
  .match-box .match2 dd:last-of-type{border: none;}
  .match-box .match2 dt{display: none;}
  .match-box .match3 dt::after{display: none;}
  .bg-grass h3{font-size: 2.5rem; margin-top: 2rem;}
  .bg-grass>img{width: 60vw;}
  .grass-img img:nth-child(1){top: 59%;}
  .grass-img img:nth-child(2){width: 50vw;}
  .grass-img img:nth-child(3){top: 64%;}
  .grass-deco img:nth-child(1){left: 8%;}
  .grass-deco img:nth-child(2){left: 2%; top: 42%; width: 10vw;}
  .grass-deco img:nth-child(3){right: 6%;}
  .grass-deco img:nth-child(4){width: 6vw;}

  /* 무인카페 */
  .ready-txt i{font-size: 1.1rem;}

  /* 커피트럭 */
  .truck-main h1{font-size: 1.7rem;}
  .truck-title{width: 90vw;}
  .truck-car{width: 80vw;}
  .truck-img img:nth-child(1){width: 30vw;}
  .truck-img img:nth-child(2){width: 20vw;}
  .new-txt2::before{left: 80%; top: -5%;}
  .new-txt2::after{right: -3%; bottom: -18%;}
  .half-box{grid-template-columns: 1fr;}
  .half-txt{order: 1; padding: 5rem 2rem;}
  .half-box2::before{display: none;}
  .half-txt1::before{top: 5%; left: 70%; scale: 0.6;}
  .half-txt1::after{bottom: 5%; right: 7%;}
  .half-txt2::after{bottom: 15%;}
  .half-txt3::before{top: 0; left: 80%;}
  .half-txt3::after{bottom: 5%;}
  .detail-box .pulsate{top: 17%;}
  .detail-box .shaking2{bottom: 17%;}
  .tr-content a{height: 320px; margin-top: 100px;}
  .detail-box h6{font-size: 1.1rem;}
  .detail-btn{gap: 8px;}
  .detail-btn li{border-width: 1px;}
  .dtab-btn{top: 20%; left: 50%; transform: translateX(-50%); flex-direction: row; border-left: none;}
  .mini-box3{margin: 30px auto;}
  .mini-box3 li img{width: 70%; height: auto;}
  .vv-deco{display: none;}

  /* 패밀리 */
  .tab-menu li{font-size: 1rem; padding: 0.7rem;} 
  .map-search-list li{padding: 1.4rem;}
  .map-search-list b{font-size: 1.3rem;}
  .map-search-list span{font-size: 1rem;}
  /* .map-search-list svg{font-size: 1.5rem;} */

  /* 게시판 */
  .post{font-size: 1rem;}
  .post-h h6{font-size: 1.3rem;}
  .post-b p{line-height: 1.6rem;}
  .recom-btn{font-size: 1rem;}
  .tool-box .search{border-radius: 10px;}
  .tool-box .search input[type="search"]{width: 86%;}
}

@media screen and (max-width: 680px){
  .sub-bg{height: 220px;}
  .sub-bg h2{top: 60%;font-size: 2.5rem;}
  .sub-bg h2 p{font-size: 0.9rem;margin-top: 7px;}
  section h3{font-size:1.6rem;margin-bottom: 15px;}
  .video-main{padding-top: 50px;}
  .video-main video{width: 200%; transform: translateX(-25%);}

  /* 브랜드 */
  .about-list{gap: 1.4rem;}
  .about-list li{width: 100%; display: grid; gap: 0.5rem 1rem; grid-template-columns: 2fr 5fr; align-items: center;}
  .about-list li>p{grid-column: 1 / 3;}
  .about-list li img{grid-row: 1 / 3;width: 100%;}
  .about-list li b{margin: 0;font-size: 1.1rem;}
  .about-img button img{width: 34px;}
  .b1-pop1, .b1-pop2{border-radius: 10px;}
  .b1-pop1 i, .b1-pop2 i{vertical-align: 60%;}
  .m-timebox dd{margin-left: 2rem;}
  #section2 .container h5{font-size: 1.2rem;}
  #section3 h3{font-size: 1.8rem;}
  #section4 h3{font-size: 1.8rem;}
  .equip-slide{margin: 20px auto 50px auto;}
  .equip-slide .equip-li{padding: 40px 30px;}
  .equip-li img{width: 12%;}
  .equip-slide h6{font-size: 1.2rem }
  .equip-img{flex-wrap: wrap;}
  .equip-img img{width: 90vw;}
  .sns-tab{margin: 30px auto 15px auto;}
  .sns-tab li{font-size: 1.3rem;}
  .sns-list{grid-template-columns: 1fr; width: 90vw;  gap: 1.5rem;}
  .sns-cate{width: 90vw;  margin: 20px auto; overflow-x: auto; white-space: nowrap;}
  .sns-cate li{font-size: 1rem;  padding: 0.3rem 1.2rem;  margin: 0;}
  .sns-list li small{font-size: 0.9rem; margin: 0.6rem 0;}
  .mg-box{grid-template-columns: 1fr; gap: 2.5rem 0;}
  .mg-page{width: 95vw;}
  .mg-card .btn2{font-size: 1.1rem;}

  /* 업소용 */
  .busi-main{height: 800px; padding-top: 190px;}
  .round-txt{display: none;}
  .busi-title{width: 80vw; margin-bottom: 2rem;}
  .busi-slide{width: 75vw; min-width: auto;}
  .busi-drink1{left: 2%; top: 60%; width: 19vw;}
  .busi-drink2{display: none;}
  .busi-cap{right: 4%; width: 23vw; top: 72%;}
  .busi-deco1{width: 30vw; top: 9%;}
  .busi-deco2{top: 10%; width: 20vw;}
  .busi-deco3,.busi-deco4,.busi-deco5{display: none;}
  .new-txt h1{font-size: 1.1rem;}
  .new-txt h4{font-size: 1.1rem;}
  .new-txt h3{font-size: 1.4rem;}
  .new-txt p{font-size: 1rem;}
  .new-cap{width: 70vw;}
  .b-box .color-bg{height: auto;}
  .b-box li img{margin: 2.4rem auto;}
  .b-txt{margin-bottom: 3rem;}
  .busi-group .new-box{gap: 2.5rem; margin-bottom: 45px;}

  .chart-up{min-height: 450px;}
  .graph1{width: 90px;}
  .graph2 div{width: 90px;}
  .graph2 div.show{height: 360px;}
  .chart-arrow img{top: 68%; left: 46%;}
  .chart-arrow img:first-child{width: 160px;}
  .chart-arrow img:last-child{width: 80px;}
  .graph2 strong{font-size: 1.2rem;}

  .chain-box{padding-bottom: 10px;}
  .chain-map{width: 90%;}
  .chain-map .pin p{font-size: 1rem;}
  .chain-txt img{display: none;}

  .mya-slide1{width: 70vw;}
  .bubble{display: none;}
  .new-slide2{width: 90%;}
  .new-deco b{font-size: 1.3rem; margin-bottom: 0.6rem;}

  .ocean-txt{font-size: 1.4rem;}
  .ocean-circle i{font-size: 1rem;}
  .ocean-circle h2{font-size: 2rem;}
  .ocean-circle h4{font-size: 1.3rem; margin-top: 1.3rem;}
  .ocean-circle span{font-size: 1rem; line-height: 1.3rem;}

  .point-title{font-size: 1.8rem;}
  .point-box{gap: 1.5rem;}
  .point-txt h4{margin-bottom: 0.4rem; font-size: 1.3rem;}
  .point-img .pto{width: 12vw;}
  .pink-tape{padding: 0.6rem;}
  .pink-tape p{font-size: 1.1rem;}
  .mini-box li p{font-size: 1.2rem;}
  .bg-ocean{padding-top: 5rem;}
  .blue-slide{width: 70vw;}
  .blue-drink1,.blue-drink2,.blue-cap{display: none;}
  .blue-deco1{width: 16vw; top: 30%; left: 3%;}
  .blue-deco2{display: none;}
  .blue-deco3{width: 16vw; top: 71%; right: 3%;}

  /* 가정용 */
  .house-main{height: 800px;}
  .house-img p{font-size: 1.7rem;top: 12%;} 
  .house-machine{width: 60vw; margin-top: 11rem;}
  .house-t1{width: 46vw; top: 19%;}
  .house-t2{width: 43vw; top: 72%;}
  .house-drink1,.house-drink2{display: none;}
  .house-cap{display: block; width: 23vw; left: 4%; top: 75%;}

  .house-deco1{width: 14vw; left: 6%; top: 50%;}
  .house-deco2{right: 14%; width: 7vw;}
  .house-deco3{width: 14vw; right: 3%;}

  .new-box{padding: 25px 20px;}
  .house-txt{padding-top: 1rem; margin: 0 5vw 1rem 5vw; font-size: 1.1rem;}
  .b-txt{font-size: 1.6rem;}
  .b-box li strong{font-size: 1.4rem;}
  .b-box li span{font-size: 1rem;}
  .b-box li p{font-size: 1.1rem;}
  .myb-deco1,.myb-deco2{display: none;}
  .buy-card{padding: 1.4rem;}
  .shop-txt h1{font-size: 1.1rem; margin: 1rem auto;}
  .shop-txt h1>img{width: 1.5rem; vertical-align: -0.4rem;}
  .shop-txt .btn1{width: 100%; font-size: 1rem; padding: 0.8rem;}
  .shop-txt .btn1>img{width: 1.2rem;}
  .buy-box{padding: 3rem 0;}
  .point-img img:first-child{border-radius: 12px;}
  .point-txt p{font-size: 1rem;}


  .menu-info span:nth-of-type(1){font-size: 1.1rem;}
  .menu-info button{font-size: 1.1rem;}
  .menu-slide .slick-prev{left: -3vw;}
  .menu-slide .slick-next{right: -10vw;}
  .menu-card h6{font-size: 1.2rem;}



  /* 자판기 */
  .vending-main{height: 150vw; min-height: 680px; padding-top: 50px;}
  .vending-main h1{font-size: 1.8rem; margin: 2.2rem auto;}
  .vending-main h2{font-size: 2.8rem; line-height: 3.5rem; -webkit-text-stroke: 0.4rem #222}
  .vending-main h2 b{-webkit-text-stroke: 0.4rem #fff;}
  .vending-img img:nth-child(1){width: 50vw;}
  .vending-img img:nth-child(2){width: 35vw; right: 45%;}
  .vending-img img:nth-child(3){width: 37vw; left: 4%;}
  .vending-img img:nth-child(4){display: none;}
  .vending-img img:nth-child(5){width: 240vw;}
  .vending-deco img:nth-child(1){top: 52%; width: 18vw;}
  .vending-deco img:nth-child(3){display: none;}
  .vending-deco img:nth-child(5){width: 20vw; top: 25%; right: 3%;}

  .v-txt{font-size: 1.2rem; margin-bottom: 1rem;}
  .flag{width: 90vw; margin-top: 2rem;}
  .flag li img{width: 44px; margin-right: 0.8rem;}
  .flag li p{font-size: 1.3rem;}
  .mini-box2{margin-top: 2rem; margin-bottom: 10px;}
  .mini-box2 li div{height: 60vw;}
  .mini-box2 li strong{font-size: 1.3rem;}
  .mini-box2 li p{font-size: 1.1rem;}
  .panel{grid-template-columns: 1fr; margin-top: 3rem;}
  .guest-slide{padding: 0.5rem 0;}
  .guest-slide .guest-list:nth-of-type(3n+2){transform: translateY(0);}
  .guest-slide .guest-list:nth-of-type(3n){transform: translateY(0);}
  .guest-list{align-items: center;}
  .guest-list>img{width: 80%;}
  .guest-list h1{font-size: 1.3rem;}
  .guest-list b{font-size: 1rem;}
  .vg-deco img:nth-child(1){left: 75%; top: -90px; width: 16vw;}
  .v-box{gap: 1.5rem;}
  .v-box li{width: 90vw;}
  .v-box li b{top: 1rem; left: 1rem; font-size: 1.2rem;}
  .v-box li i{font-size: 1rem;}
  .v-box li p{font-size: 1.2rem;}
  .v-box li p>img{width: 1.3rem;}
  .pu-box li{width: 100%; padding: 1.3rem;}
  .pu-group{flex-wrap: wrap; gap: 2rem;}
  .pu-group>img{width: 100%;}
  .pu-list li{margin-bottom: 0.6rem; line-height: 1.4rem;}
  .up-vending img:first-of-type{width: 100%;}
  .pu-txt{order:1; width: 100%;}
  .pu-txt h4{margin-bottom: 0.4rem;}
  
  .bg-navy{padding: 2rem 0;}
  .bg-navy h6{margin-top: 2rem; font-size: 1.2rem; margin-bottom: 1rem;}
  .bg-navy h3{font-size: 2.1rem; margin-bottom: 26px;}
  .navy-img{height: 62vw;}
  .navy-img img:nth-child(1){width: 27vw; bottom: 8%;}
  .navy-img img:nth-child(2){display: none;}
  .navy-img img:nth-child(3){width: 27vw; right: 40%; top: 70%;}
  .navy-img img:nth-child(4){width: 45vw;}
  .navy-deco img{display: none;}

  /* 포터필터 */
  .porter-main{height: 180vw; max-height: 800px;}
  .porter-main h1{font-size: 1.8rem;}
  .porter-title{width: 86vw;}
  .porter-machine{width: 90vw;}
  .porter-img img:nth-child(1){width: 22vw;}
  .porter-img img:nth-child(2){width: 80vw;}
  .porter-img img:nth-child(3){width: 18vw;}
  .porter-deco img:nth-child(1){display: none;}
  .porter-deco img:nth-child(2){width: 12vw; top: 22%;}
  .porter-deco img:nth-child(3){top: 17%; width: 7vw;}
  .porter-deco img:nth-child(4){top: 80%;}

  .step-box{gap: 2rem;}
  .step-box button{width: 4.2rem; height: 4.2rem; top: 61.2%; font-size: 1.4rem;}
  .step-list{flex-direction: column; padding: 1.6rem; gap: 0.4rem; border-radius: 40px;}
  .step-list>img{transform: rotate(90deg);}
  .step-list li{width: 72vw; height: auto; display: inline-block; padding: 0.8rem;}
  .step-list li img{height: 40px; vertical-align: middle; margin-right: 10px;}
  .step-list li br{display: none;}

  .mp-con{gap: 3rem;}
  .mp-con li{justify-content: space-between; padding: 3rem 1rem 1rem 1rem;}
  .mp-con img{width: 16vw;}
  .mp-con li:last-child .sqre::before{scale: 0.8;}
  .ballon{grid-template-columns: 1fr; gap: 2rem;}
  .ballon p{font-size: 1rem; line-height: 1.5rem;}
  .ballon li:last-child{grid-column: auto;}

  .match-box{margin-top: 4rem; margin-bottom: 2rem;}
  .match-box dt{font-size: 1.3rem;}
  .match-box .match2 dd{padding: 1rem 1.7rem; font-size: 1.2rem;}
  .filter-floor{height: 150px; bottom: -1px;}
  .filter-box2 h6{font-size: 1.1rem; margin-top:0;}
  .bg-grass{padding: 4rem 0;}
  .bg-grass h3{font-size: 2.1rem;}
  .bg-grass h6{font-size: 1.1rem;}
  .bg-grass>img{width: 78vw;}
  .grass-img img:nth-child(1){width: 19vw;}
  .grass-img img:nth-child(2){width: 60vw;}
  .grass-img img:nth-child(3){width: 17vw;}
  .grass-deco img:nth-child(1){top: 3%; left: 5%; width: 14vw;}
  .grass-deco img:nth-child(2){width: 14vw;}
  .grass-deco img:nth-child(3){top: 4%; right: 5%; width: 13vw;}
  .grass-deco img:nth-child(4){width: 8vw;}

  /* 무인카페 */
  .cafe-main{padding: 100px 0 60px 0;}
  .ready-img{padding-bottom: 50px;}
  .ready-img img:nth-child(1){width: 73vw;}
  .ready-img img:nth-child(2){left: 5%;width: 32vw;}
  .ready-img img:nth-child(3){right: 5%;width: 32vw;}
  .ready-txt i{font-size: 1rem; border: 1px solid #e81e75;}

  /* 커피트럭 */
  .truck-main{height: 150vw; gap: 2.5rem; min-height: 670px; padding-top: 90px;}
  .truck-car{width: 88vw;}
  .truck-img img:nth-child(1){width: 36vw;}
  .truck-img img:nth-child(2){width: 25vw;}
  .truck-deco img:nth-child(1){width: 21vw; left: 26%; top: 75%;}
  .truck-deco img:nth-child(2){width: 12vw;}
  .truck-deco img:nth-child(3){display: none;}
  .truck-deco img:nth-child(4){width: 21vw;}
  .truck-deco img:nth-child(5){display: none;}
  .new-txt2::after{display: none;}
  .half-txt{padding: 3rem 5vw;}
  .half-txt h6{font-size: 1.1rem; margin-bottom: 0.3rem;}
  .half-txt h3{font-size: 1.6rem;}
  .half-txt1::before{display: none;}
  .half-txt1::after{display: none;}
  .half-txt2::after{display: none;}
  .half-txt3::before{display: none;}
  .half-txt3::after{display: none;}
  .tr-content a{height: auto; width: 100%;}
  .tr-content a img{width: 100%;} 
  .detail-btn{flex-wrap: wrap;}
  .detail-btn li{font-size: 0.9rem; padding: 8px 3px ; width: 110px;}
  .mini-box3 li strong{font-size: 1.2rem;}
  .mini-box3 li p{font-size: 1rem;}
  .bg-orange>img{display: none;}


  .bg-road h3{font-size: 2rem; margin-top: 3rem; margin-bottom: 1rem;}
  .driving-road{height: 14px; bottom: 18%;}
  .driving-car .car-body{width: 78vw;}
  .driving-car .car-tire1{width: 11.4vw;}
  .driving-car .car-tire2{width: 9.5vw;}
  .road-img img:nth-child(1){top: 60%; width: 24vw;}
  .road-img img:nth-child(2){right: 4%; width: 19vw;}
  .road-deco img:nth-child(1){display: none;}
  .road-deco img:nth-child(2){top: 5%; left: 5%;}
  .road-deco img:nth-child(3){top: 8%; right: 5%; width: 14vw;}
  .road-deco img:nth-child(4){top: 33%; right: 15%;}

  /* 패밀리 */
  .tab-menu{overflow-x: auto; white-space: nowrap;}

  .family-map{display: grid; grid-template-columns: 1fr;}
  .family-map .root_daum_roughmap{order: 2;}
  .map-search-box{position: unset; order: 1; box-shadow: none; margin-top: 10px; border-radius: 0; width: 100%; margin-bottom: 5px;}
  .map-search-box h1{display: none;}
  .map-search-box p{display: none;}
  .map-search-box input[type=search]{margin: 1.3rem auto;}
  .map-search-box ul{display: none; grid-template-columns: repeat(3,1fr); padding-right: 0.8rem;}
  .map-search-box ul.open{display: grid;}
  .map-search-box ul li{line-height: 2.3rem;}
  .map-search-box h6{display: block; box-shadow: 0 0 0 1px  rgba(0, 0, 0, 0.1);}
  .map-search-box h6>img{display: block; width: 2rem; margin: auto; cursor: pointer; background-color: #222; color: #fff; padding: 0 5px; border-radius: 0 0 4px 4px;}
  .map-search-list li{padding: 1.2rem;}
  .map-search-list p{margin-left: 1.2rem;}
  .map-search-list b{font-size: 1rem;}
  .map-search-list span{font-size: 0.9rem;}
  .map-search-list li>img{width: 2.5rem; padding: 0.5rem;}
}


@media screen and (max-width: 450px){
  .busi-main{height: 660px; padding-top: 165px;}
  .busi-deco1{width: 36vw;}
  .busi-deco2{width: 26vw;}
  .busi-title{width: 84vw;}
  .busi-slide{width: 80vw;}
  .busi-drink1{top: 63%;}
  .house-main{height: 700px;}
  .house-machine{width: 64vw; margin-top: 9rem;}
  .house-img p{font-size: 1.5rem;}
  .house-t1{width: 50vw;}
  .house-t2{width: 45vw; top: 75%;}
  .house-cap{width: 25vw;}
}