@import "common.css";

/** 멀티오더 페이지 *******************************************************/
.multi-wrap{
}

/** Section 1 - 상단 배너 *******************************************************/
.multi-wrap .multi-section1{
  background: linear-gradient(to top, #FFFFFF 0%, #FFE5EA 100%);
  padding: 102px 0;
}
.multi-wrap .multi-section1 .com-center{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:118px;
}
.multi-wrap .multi-section1 .img-box{
  position:relative;
  flex-shrink:0;
  width:568px;
  height:288px;
}
.multi-wrap .multi-section1 .img-box img{
  position:absolute;
  max-width:none;
}
.multi-wrap .multi-section1 .img-box .bg-shape{
  width:687.5px;
  height:498.3px;
  left:-68.25px;
  top:-79px;
  z-index:0;
}
.multi-wrap .multi-section1 .img-box .img-mockup{
  width:263px;
  height:408px;
  left:32px;
  top:-48px;
  z-index:1;
  object-fit:contain;
}
.multi-wrap .multi-section1 .img-box .img-perspective{
  width:255.144px;
  height:351.278px;
  left:249px;
  top:-8px;
  z-index:2;
  object-fit:contain;
}
.multi-wrap .multi-section1 .text-box{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  height:288px;
  width:434px;
}
.multi-wrap .multi-section1 .text-box .title{
  font-family:'Pretendard', sans-serif;
  font-size:52px;
  font-weight:800;
  color:#11151D;
  line-height:1.25;
  letter-spacing:-1.04px;
  margin:0;
  word-break:keep-all;
}
.multi-wrap .multi-section1 .text-box .title .tab-only{
  display:none;
}
.multi-wrap .multi-section1 .text-box .desc{
  margin:0;
  margin-top:12px;
  font-family:'Pretendard', sans-serif;
  font-size:22px;
  font-weight:600;
  color:#606C85;
  line-height:1.5;
  letter-spacing:-0.44px;
}
.multi-wrap .multi-section1 .text-box .cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:40px;
  padding:18px 28px;
  background:var(--torder-red-500);
  color:#FFFFFF;
  font-family:'Pretendard', sans-serif;
  font-size:18px;
  font-weight:600;
  line-height:1;
  letter-spacing:-0.36px;
  border:none;
  border-radius:8px;
  cursor:pointer;
  transition:opacity 0.2s;
  -o-transition:opacity 0.2s;
  -webkit-transition:opacity 0.2s;
}
.multi-wrap .multi-section1 .text-box .cta-btn:hover{
  opacity:0.9;
}

@media screen and (max-width:1199px) {
  .multi-wrap .multi-section1{
    padding:80px 0;
  }
  .multi-wrap .multi-section1 .com-center{
    gap:60px;
  }
  .multi-wrap .multi-section1 .img-box{
    width:323px;
    height:163.775px;
  }
  .multi-wrap .multi-section1 .img-box .bg-shape{
    width:473.056px;
    height:342.871px;
    left:-61.55px;
    top:-80.68px;
  }
  .multi-wrap .multi-section1 .img-box .img-mockup{
    width:180.542px;
    height:280.737px;
    left:25.31px;
    top:-59.35px;
  }
  .multi-wrap .multi-section1 .img-box .img-perspective{
    width:175.56px;
    height:241.708px;
    left:174.63px;
    top:-31.82px;
  }
  .multi-wrap .multi-section1 .text-box{
    width:260px;
    height:auto;
  }
  .multi-wrap .multi-section1 .text-box .title{
    font-size:48px;
    color:#262831;
    letter-spacing:-0.96px;
  }
  .multi-wrap .multi-section1 .text-box .title .tab-only{
    display:inline;
  }
  .multi-wrap .multi-section1 .text-box .desc{
    margin-top:14px;
    font-size:18px;
    font-weight:500;
    color:#898EA4;
    letter-spacing:-0.36px;
  }
  .multi-wrap .multi-section1 .text-box .cta-btn{
    margin-top:30px;
  }
}

@media screen and (max-width:767px) {
  .multi-wrap .multi-section1{
    padding:60px 20px;
  }
  .multi-wrap .multi-section1 .com-center{
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:44px;
  }
  .multi-wrap .multi-section1 .img-box{
    width:233.043px;
    height:134px;
  }
  .multi-wrap .multi-section1 .img-box .bg-shape{
    width:320.435px;
    height:232.251px;
    left:-45.21px;
    top:-53.82px;
  }
  .multi-wrap .multi-section1 .img-box .img-mockup{
    width:122.294px;
    height:190.163px;
    left:7.68px;
    top:-22.37px;
  }
  .multi-wrap .multi-section1 .img-box .img-perspective{
    width:118.919px;
    height:163.726px;
    left:108.82px;
    top:-3.73px;
  }
  .multi-wrap .multi-section1 .text-box{
    width:100%;
    height:auto;
    align-items:center;
    text-align:center;
  }
  .multi-wrap .multi-section1 .text-box .title{
    font-size:32px;
    letter-spacing:-0.64px;
  }
  .multi-wrap .multi-section1 .text-box .title .tab-only{
    display:none;
  }
  .multi-wrap .multi-section1 .text-box .desc{
    margin-top:8px;
    font-size:16px;
    letter-spacing:-0.32px;
    text-align:center;
  }
  .multi-wrap .multi-section1 .text-box .cta-btn{
    margin-top:20px;
    padding:14px 20px;
    font-size:16px;
    letter-spacing:-0.32px;
  }
}

/** Section 2 - 업계 최초 태블릿 모바일 동시 주문 *******************************************************/
.multi-wrap .multi-section2{
  background:#FFFFFF;
  padding:180px 0;
}
.multi-wrap .multi-section2 .com-center{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:48px;
  max-width:none;
  width:100%;
}
.multi-wrap .multi-section2 .head{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  width:100%;
  max-width:1120px;
  text-align:center;
}
.multi-wrap .multi-section2 .head .title{
  margin:0;
  font-family:'Pretendard', sans-serif;
  font-size:44px;
  font-weight:800;
  line-height:1.25;
  letter-spacing:-0.88px;
  color:#202632;
  word-break:keep-all;
}
.multi-wrap .multi-section2 .head .title .title-1{
  color:#202632;
}
.multi-wrap .multi-section2 .head .title .title-2{
  color:#FF193F;
}
.multi-wrap .multi-section2 .head .title .tab-mo-only{
  display:none;
}
.multi-wrap .multi-section2 .head .sub{
  margin:0;
  font-family:'Pretendard', sans-serif;
  font-size:22px;
  font-weight:600;
  line-height:1.5;
  letter-spacing:-0.44px;
  color:#898EA3;
}
.multi-wrap .multi-section2 .head .sub .pc-only{
  display:inline;
}
.multi-wrap .multi-section2 .head .sub .tab-only,
.multi-wrap .multi-section2 .head .sub .mo-only{
  display:none;
}
.multi-wrap .multi-section2 .video-box{
  width:1280px;
  height:720px;
  border-radius:36px;
  overflow:hidden;
}
.multi-wrap .multi-section2 .video-box video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

@media screen and (max-width:1199px) {
  .multi-wrap .multi-section2{
    padding:120px 0;
  }
  .multi-wrap .multi-section2 .head{
    gap:20px;
  }
  .multi-wrap .multi-section2 .head .title{
    font-size:40px;
    letter-spacing:-0.8px;
  }
  .multi-wrap .multi-section2 .head .title .title-2{
    margin-left:0;
  }
  .multi-wrap .multi-section2 .head .title .tab-mo-only{
    display:inline;
  }
  .multi-wrap .multi-section2 .head .sub{
    font-size:18px;
    font-weight:500;
    color:#606C85;
    letter-spacing:-0.36px;
  }
  .multi-wrap .multi-section2 .head .sub .pc-only,
  .multi-wrap .multi-section2 .head .sub .mo-only{
    display:none;
  }
  .multi-wrap .multi-section2 .head .sub .tab-only{
    display:inline;
  }
  .multi-wrap .multi-section2 .video-box{
    width:640px;
    height:360px;
    border-radius:18px;
  }
}

@media screen and (max-width:767px) {
  .multi-wrap .multi-section2{
    padding:60px 0;
  }
  .multi-wrap .multi-section2 .com-center{
    gap:32px;
  }
  .multi-wrap .multi-section2 .head{
    gap:8px;
  }
  .multi-wrap .multi-section2 .head .title{
    font-size:32px;
    letter-spacing:-0.64px;
    color:#131419;
  }
  .multi-wrap .multi-section2 .head .title .title-1{
    color:#131419;
  }
  .multi-wrap .multi-section2 .head .sub{
    font-size:16px;
    font-weight:500;
    color:#606C85;
    letter-spacing:-0.32px;
  }
  .multi-wrap .multi-section2 .head .sub .pc-only,
  .multi-wrap .multi-section2 .head .sub .tab-only{
    display:none;
  }
  .multi-wrap .multi-section2 .head .sub .mo-only{
    display:inline;
  }
  .multi-wrap .multi-section2 .video-box{
    width:100%;
    max-width:320px;
    height:180px;
    border-radius:12px;
  }
}

/** Section 3 - 이런 매장이라면 멀티오더를 추천해요 *******************************************************/
.multi-wrap .multi-section3{
  background:#F0F6FF;
  padding:180px 0;
}
.multi-wrap .multi-section3 .com-center{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:48px;
}
.multi-wrap .multi-section3 .title-box{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.multi-wrap .multi-section3 .title-box .title{
  margin:0;
  font-family:'Pretendard', sans-serif;
  font-size:44px;
  font-weight:800;
  line-height:1.25;
  letter-spacing:-0.88px;
  color:#131419;
}
.multi-wrap .multi-section3 .title-box .title .hl{
  color:#FF193F;
}
.multi-wrap .multi-section3 .card-list{
  width:100%;
  max-width:1120px;
}
.multi-wrap .multi-section3 .swiper-wrapper{
  display:flex;
  gap:24px;
  justify-content:center;
}
.multi-wrap .multi-section3 .card{
  position:relative;
  flex-shrink:0;
  width:357px;
  height:360px;
  border-radius:20px;
  overflow:hidden;
  background:#E1E7F0;
}
.multi-wrap .multi-section3 .card .card-img{
  position:absolute;
  max-width:none;
  display:block;
  object-fit:cover;
}
.multi-wrap .multi-section3 .card-1 .card-img{
  width:421px;
  height:369px;
  left:-34.5px;
  top:-132px;
}
.multi-wrap .multi-section3 .card-2 .card-img{
  width:640px;
  height:341px;
  left:-71.5px;
  top:-112px;
}
.multi-wrap .multi-section3 .card-3 .card-img{
  width:515.489px;
  height:343.701px;
  left:-135.56px;
  top:-59.22px;
  transform:rotate(1.42deg);
}
.multi-wrap .multi-section3 .card .info{
  position:absolute;
  z-index:1;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:360px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:32px 0;
  background:#FFFFFF;
  text-align:center;
}
.multi-wrap .multi-section3 .card .info .tit{
  display:block;
  font-family:'Pretendard', sans-serif;
  font-size:28px;
  font-weight:700;
  line-height:1.25;
  letter-spacing:-0.56px;
  color:#252730;
  white-space:nowrap;
}
.multi-wrap .multi-section3 .card .info .sub{
  margin:0;
  font-family:'Pretendard', sans-serif;
  font-size:18px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:-0.36px;
  color:#898EA3;
}

@media screen and (max-width:1199px) {
  .multi-wrap .multi-section3{
    padding:120px 0;
  }
  .multi-wrap .multi-section3 .com-center{
    gap:48px;
  }
  .multi-wrap .multi-section3 .title-box .title{
    font-size:40px;
    color:#202632;
    letter-spacing:-0.8px;
  }
  .multi-wrap .multi-section3 .card-list{
    overflow:visible;
    max-width:none;
  }
  .multi-wrap .multi-section3 .swiper-wrapper{
    display:flex;
    gap:0;
    justify-content:flex-start;
  }
  .multi-wrap .multi-section3 .card{
    width:648px;
    height:558.9px;
    border-radius:16px;
  }
  .multi-wrap .multi-section3 .card-1 .card-img{
    width:764.362px;
    height:669.782px;
    left:-62.62px;
    top:-239.6px;
  }
  .multi-wrap .multi-section3 .card-2 .card-img{
    width:1008.957px;
    height:884.112px;
    left:-91.77px;
    top:-427.76px;
  }
  .multi-wrap .multi-section3 .card-3 .card-img{
    width:1008.905px;
    height:672.685px;
    left:-256.78px;
    top:-133.78px;
  }
  .multi-wrap .multi-section3 .card .info{
    width:100%;
    gap:12px;
    padding:38px 0;
  }
}

@media screen and (max-width:767px) {
  .multi-wrap .multi-section3{
    padding:60px 0;
  }
  .multi-wrap .multi-section3 .com-center{
    gap:36px;
  }
  .multi-wrap .multi-section3 .title-box .title{
    font-size:32px;
    color:#202632;
    letter-spacing:-0.64px;
  }
  .multi-wrap .multi-section3 .card-list{
    overflow:visible;
    max-width:none;
  }
  .multi-wrap .multi-section3 .swiper-wrapper{
    flex-direction:column;
    gap:20px;
    justify-content:flex-start;
    align-items:center;
  }
  .multi-wrap .multi-section3 .card{
    width:320px;
    height:276px;
    border-radius:20px;
  }
  .multi-wrap .multi-section3 .card-1 .card-img{
    width:377.463px;
    height:330.756px;
    left:-30.92px;
    top:-118.32px;
  }
  .multi-wrap .multi-section3 .card-2 .card-img{
    width:498.251px;
    height:436.598px;
    left:-45.32px;
    top:-211.24px;
  }
  .multi-wrap .multi-section3 .card-3 .card-img{
    width:498.225px;
    height:332.19px;
    left:-126.81px;
    top:-66.06px;
  }
  .multi-wrap .multi-section3 .card .info{
    width:100%;
    gap:8px;
    padding:20px 0;
  }
  .multi-wrap .multi-section3 .card .info .tit{
    font-size:20px;
    letter-spacing:-0.4px;
  }
  .multi-wrap .multi-section3 .card .info .sub{
    font-size:14px;
    letter-spacing:-0.28px;
  }
}

/** Section 4 - 타사가 만든 QR오더 말고 멀티오더를 써야 하는 이유 *******************************************************/
.multi-wrap .multi-section4{
  background:#FFFFFF;
  padding:180px 0;
}
.multi-wrap .multi-section4 .com-center{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:80px;
}
.multi-wrap .multi-section4 .title{
  margin:0;
  font-family:'Pretendard', sans-serif;
  font-size:44px;
  font-weight:800;
  line-height:1.25;
  letter-spacing:-0.88px;
  color:#17191C;
  text-align:center;
}
.multi-wrap .multi-section4 .title .hl{
  color:#FF193F;
}
.multi-wrap .multi-section4 .title .mo-only{
  display:none;
}
.multi-wrap .multi-section4 .title .pc-tab-only{
  display:inline;
}
.multi-wrap .multi-section4 .text-box .tit .mo-only{
  display:none;
}
.multi-wrap .multi-section4 .text-box .tit .pc-tab-only{
  display:inline;
}
.multi-wrap .multi-section4 .card-list{
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:1120px;
  gap:120px;
}
.multi-wrap .multi-section4 .card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:60px;
  width:100%;
}
.multi-wrap .multi-section4 .card-2{
  flex-direction:row-reverse;
}
.multi-wrap .multi-section4 .text-box{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:20px;
  width:100%;
  max-width:512px;
  flex-shrink:0;
}
.multi-wrap .multi-section4 .text-box .tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:'Pretendard', sans-serif;
  font-size:24px;
  font-weight:600;
  line-height:1.5;
  letter-spacing:-0.48px;
  color:#FF193F;
}
.multi-wrap .multi-section4 .text-box .tag .tag-icon{
  width:24px;
  height:24px;
  flex-shrink:0;
  display:block;
}
.multi-wrap .multi-section4 .text-box .tit{
  display:block;
  font-family:'Pretendard', sans-serif;
  font-size:36px;
  font-weight:700;
  line-height:1.25;
  letter-spacing:-0.72px;
  color:#202632;
}
.multi-wrap .multi-section4 .text-box .desc{
  margin:0;
  font-family:'Pretendard', sans-serif;
  font-size:18px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:-0.36px;
  color:#424C5E;
}
.multi-wrap .multi-section4 .img-box{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  max-width:560px;
}
.multi-wrap .multi-section4 .img-box img{
  max-width:100%;
  height:auto;
  display:block;
  border-radius:20px;
}
.multi-wrap .multi-section4 .img-box.scroll-swap{
  position:relative;
}
.multi-wrap .multi-section4 .img-box.scroll-swap img{
  position:relative;
  will-change:opacity;
}
.multi-wrap .multi-section4 .img-box.scroll-swap .img-qr{
  position:relative;
}
.multi-wrap .multi-section4 .img-box.scroll-swap .img-nfc{
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  opacity:0;
}

@media screen and (max-width:1199px) {
  .multi-wrap .multi-section4{
    padding:120px 0;
  }
  .multi-wrap .multi-section4 .com-center{
    gap:60px;
  }
  .multi-wrap .multi-section4 .title{
    font-size:40px;
    color:#202632;
    letter-spacing:-0.8px;
  }
  .multi-wrap .multi-section4 .card-list{
    gap:80px;
  }
  .multi-wrap .multi-section4 .card,
  .multi-wrap .multi-section4 .card-2{
    flex-direction:column;
    align-items:flex-start;
    gap:24px;
  }
  .multi-wrap .multi-section4 .text-box{
    width:100%;
    max-width:100%;
    gap:16px;
  }
  .multi-wrap .multi-section4 .text-box .tag{
    font-size:22px;
    letter-spacing:-0.44px;
  }
  .multi-wrap .multi-section4 .text-box .tag .tag-icon{
    width:22px;
    height:22px;
  }
  .multi-wrap .multi-section4 .text-box .tit{
    font-size:28px;
    letter-spacing:-0.56px;
  }
  .multi-wrap .multi-section4 .text-box .desc{
    font-size:18px;
    letter-spacing:-0.36px;
  }
  .multi-wrap .multi-section4 .img-box{
    width:100%;
    max-width:100%;
  }
  .multi-wrap .multi-section4 .img-box img{
    border-radius:23px;
  }
  .multi-wrap .multi-section4 .desc .pc-only,
  .multi-wrap .multi-section4 .title .pc-only,
  .multi-wrap .multi-section4 .tit .pc-only{
    display:none;
  }
}

@media screen and (max-width:767px) {
  .multi-wrap .multi-section4{
    padding:60px 0;
  }
  .multi-wrap .multi-section4 .com-center{
    gap:40px;
  }
  .multi-wrap .multi-section4 .title{
    font-size:32px;
    color:#131419;
    letter-spacing:-0.64px;
  }
  .multi-wrap .multi-section4 .title .mo-only{
    display:inline;
  }
  .multi-wrap .multi-section4 .title .pc-tab-only{
    display:none;
  }
  .multi-wrap .multi-section4 .text-box .tit .mo-only{
    display:inline;
  }
  .multi-wrap .multi-section4 .text-box .tit .pc-tab-only{
    display:none;
  }
  .multi-wrap .multi-section4 .card-list{
    gap:60px;
  }
  .multi-wrap .multi-section4 .card,
  .multi-wrap .multi-section4 .card-2{
    flex-direction:column;
    gap:24px;
    align-items:flex-start;
    text-align:left;
  }
  .multi-wrap .multi-section4 .text-box{
    width:100%;
    max-width:100%;
    align-items:flex-start;
    text-align:left;
    gap:12px;
  }
  .multi-wrap .multi-section4 .text-box .tag{
    font-size:16px;
    font-weight:700;
    letter-spacing:-0.32px;
    gap:6px;
  }
  .multi-wrap .multi-section4 .text-box .tag .tag-icon{
    width:18px;
    height:18px;
  }
  .multi-wrap .multi-section4 .text-box .tit{
    font-size:20px;
    letter-spacing:-0.4px;
  }
  .multi-wrap .multi-section4 .text-box .desc{
    font-size:16px;
    letter-spacing:-0.32px;
  }
  .multi-wrap .multi-section4 .img-box{
    width:100%;
    max-width:100%;
  }
  .multi-wrap .multi-section4 .img-box img{
    border-radius:12px;
  }
}

/** Section 5 - 업계 1위의 노하우가 담긴 멀티오더의 유용한 기능 *******************************************************/
.multi-wrap .multi-section5{
  background:#FFF5F7;
  padding:180px 0;
}
.multi-wrap .multi-section5 .com-center{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:80px;
}
.multi-wrap .multi-section5 .title{
  margin:0;
  font-family:'Pretendard', sans-serif;
  font-size:44px;
  font-weight:800;
  line-height:1.25;
  letter-spacing:-0.88px;
  color:var(--torderGray-900, #202632);
  text-align:center;
}
.multi-wrap .multi-section5 .title .hl{
  color:#FF193F;
}
.multi-wrap .multi-section5 .card-list{
  display:flex;
  flex-direction:row;
  gap:24px;
  width:100%;
  max-width:1120px;
}
.multi-wrap .multi-section5 .card{
  position:relative;
  flex:1 1 0;
  min-width:0;
  height:402px;
  background:var(--torder-Red-100, #FFC7D3);
  border-radius:20px;
  overflow:hidden;
}
.multi-wrap .multi-section5 .card .text-box{
  position:absolute;
  top:32px;
  left:32px;
  width:293px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  z-index:1;
}
.multi-wrap .multi-section5 .card .tit{
  display:block;
  font-family:'Pretendard', sans-serif;
  font-size:28px;
  font-weight:700;
  line-height:1.25;
  letter-spacing:-0.56px;
  color:var(--torderGray-900, #202632);
}
.multi-wrap .multi-section5 .card .desc{
  margin:0;
  font-family:'Pretendard', sans-serif;
  font-size:18px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:-0.36px;
  color:var(--torderGray-700, #424C5E);
}
.multi-wrap .multi-section5 .card .desc .mo-only{
  display:none;
}
.multi-wrap .multi-section5 .card .img-box{
  position:absolute;
  top:150px;
  left:97px;
  width:220px;
}
.multi-wrap .multi-section5 .card-3 .img-box{
  left:104px;
}
.multi-wrap .multi-section5 .card .img-box img{
  width:100%;
  height:auto;
  display:block;
}

@media screen and (max-width:1199px) {
  .multi-wrap .multi-section5{
    padding:120px 0;
  }
  .multi-wrap .multi-section5 .com-center{
    gap:60px;
  }
  .multi-wrap .multi-section5 .title{
    font-size:40px;
    letter-spacing:-0.8px;
  }
  .multi-wrap .multi-section5 .card-list{
    flex-direction:column;
    gap:20px;
    max-width:none;
  }
  .multi-wrap .multi-section5 .card{
    position:relative;
    flex:none;
    width:100%;
    height:306px;
    padding:0;
    overflow:hidden;
  }
  .multi-wrap .multi-section5 .card .text-box{
    position:absolute;
    top:40px;
    left:40px;
    width:534px;
    gap:12px;
    z-index:1;
  }
  .multi-wrap .multi-section5 .card .tit{
    font-size:28px;
    letter-spacing:-0.56px;
  }
  .multi-wrap .multi-section5 .card .img-box,
  .multi-wrap .multi-section5 .card-3 .img-box{
    position:absolute;
    top:auto;
    left:auto;
    right:30px;
    bottom:0;
    transform:none;
    width:220px;
    flex:none;
  }
  .multi-wrap .multi-section5 .desc .pc-only{
    display:none;
  }
}

@media screen and (max-width:767px) {
  .multi-wrap .multi-section5{
    padding:80px 0;
  }
  .multi-wrap .multi-section5 .com-center{
    gap:36px;
  }
  .multi-wrap .multi-section5 .title{
    font-size:32px;
    letter-spacing:-0.64px;
    color:var(--torderGray-950, #11151D);
  }
  .multi-wrap .multi-section5 .card{
    position:relative;
    flex:none;
    width:100%;
    height:360px;
    display:block;
    padding:0;
    overflow:hidden;
  }
  .multi-wrap .multi-section5 .card .text-box{
    position:absolute;
    top:32px;
    left:32px;
    width:calc(100% - 64px);
    gap:8px;
    z-index:1;
  }
  .multi-wrap .multi-section5 .card .tit{
    font-size:20px;
    letter-spacing:-0.4px;
    color:#202632;
  }
  .multi-wrap .multi-section5 .card .desc{
    font-size:16px;
    letter-spacing:-0.32px;
  }
  .multi-wrap .multi-section5 .card .img-box,
  .multi-wrap .multi-section5 .card-3 .img-box{
    position:absolute;
    top:130px;
    right:30px;
    left:auto;
    transform:none;
    width:197px;
    flex:none;
  }
  .multi-wrap .multi-section5 .card .desc .mo-only{
    display:inline;
  }
}

/** Section 6 - 멀티오더는 35개 이상의 포스에서 쓸 수 있어요 *******************************************************/
.multi-wrap .multi-section6{
  background:#FFFFFF;
  padding:180px 0;
  overflow:hidden;
}
.multi-wrap .multi-section6 .head{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  text-align:center;
  margin-bottom:52px;
  padding:0 20px;
}
.multi-wrap .multi-section6 .head .title{
  margin:0;
  font-family:'Pretendard', sans-serif;
  font-size:44px;
  font-weight:800;
  line-height:1.25;
  letter-spacing:-0.88px;
  color:var(--torderGray-900, #202632);
}
.multi-wrap .multi-section6 .head .title .mo-only{
  display:none;
}
.multi-wrap .multi-section6 .head .title .pc-tab-only{
  display:inline;
}
.multi-wrap .multi-section6 .head .sub{
  margin:0;
  font-family:'Pretendard', sans-serif;
  font-size:22px;
  font-weight:600;
  line-height:1.5;
  letter-spacing:-0.44px;
  color:#898EA4;
}
.multi-wrap .multi-section6 .logo-swiper{
  width:100%;
  overflow:visible;
}
.multi-wrap .multi-section6 .logo-swiper .swiper-wrapper{
  transition-timing-function:linear;
  -o-transition-timing-function:linear;
  -webkit-transition-timing-function:linear;
}
.multi-wrap .multi-section6 .logo-swiper .swiper-slide{
  width:auto;
  margin:0 10px;
}
.multi-wrap .multi-section6 #multiSection6Bottom{
  margin-top:20px;
}
.multi-wrap .multi-section6 .logo-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:260px;
  height:120px;
  background:var(--torder-Gray-5, #F7F8F9);
  border-radius:16px;
  padding:8px 0;
  gap:0;
}
.multi-wrap .multi-section6 .logo-card .logo-area{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:52px;
}
.multi-wrap .multi-section6 .logo-card .logo-area img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.multi-wrap .multi-section6 .logo-card .label{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:52px;
  font-family:'Pretendard', sans-serif;
  font-size:18px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:-0.36px;
  color:#606C85;
  text-align:center;
  white-space:nowrap;
}
/* dir rtl 카드 텍스트 정상화 */
.multi-wrap .multi-section6 #multiSection6Bottom .logo-card,
.multi-wrap .multi-section6 #multiSection6Mo2 .logo-card,
.multi-wrap .multi-section6 #multiSection6Mo4 .logo-card{
  direction:ltr;
}
.multi-wrap .multi-section6 .mo-swipers{
  display:none;
}
.multi-wrap .multi-section6 .mo-swipers .logo-swiper + .logo-swiper{
  margin-top:8px;
}

@media screen and (max-width:1199px) {
  .multi-wrap .multi-section6{
    padding:120px 0;
  }
  .multi-wrap .multi-section6 .head{
    max-width:648px;
    margin:0 auto 48px;
    gap:20px;
  }
  .multi-wrap .multi-section6 .head .title{
    font-size:40px;
    letter-spacing:-0.8px;
  }
  .multi-wrap .multi-section6 .head .sub{
    font-size:18px;
    font-weight:500;
    letter-spacing:-0.36px;
  }
  .multi-wrap .multi-section6 .logo-card{
    width:220px;
    height:100px;
  }
  .multi-wrap .multi-section6 .logo-card .logo-area,
  .multi-wrap .multi-section6 .logo-card .label{
    height:42px;
  }
  .multi-wrap .multi-section6 .logo-card .logo-area img{
    width:100%;
    height:100%;
  }
  .multi-wrap .multi-section6 .logo-card .label{
    font-size:16px;
    letter-spacing:-0.32px;
  }
}

@media screen and (max-width:767px) {
  .multi-wrap .multi-section6{
    padding:80px 0;
  }
  .multi-wrap .multi-section6 .head{
    margin-bottom:36px;
    gap:8px;
  }
  .multi-wrap .multi-section6 .head .title{
    font-size:32px;
    letter-spacing:-0.64px;
    color:var(--torderGray-950, #11151D);
  }
  .multi-wrap .multi-section6 .head .title .mo-only{
    display:inline;
  }
  .multi-wrap .multi-section6 .head .title .pc-tab-only{
    display:none;
  }
  .multi-wrap .multi-section6 .head .sub{
    font-size:16px;
    letter-spacing:-0.32px;
  }
  .multi-wrap .multi-section6 #multiSection6Top,
  .multi-wrap .multi-section6 #multiSection6Bottom{
    display:none;
  }
  .multi-wrap .multi-section6 .mo-swipers{
    display:block;
  }
  .multi-wrap .multi-section6 .logo-swiper .swiper-slide{
    margin:0 4px;
  }
  .multi-wrap .multi-section6 .logo-card{
    width:146px;
    height:67.5px;
    border-radius:12px;
    padding:4.5px 0;
    gap:0;
  }
  .multi-wrap .multi-section6 .logo-card .logo-area,
  .multi-wrap .multi-section6 .logo-card .label{
    height:29.25px;
  }
  .multi-wrap .multi-section6 .logo-card .logo-area img{
    width:100%;
    height:100%;
  }
  .multi-wrap .multi-section6 .logo-card .label{
    font-size:10px;
    letter-spacing:-0.2px;
  }
}

/** Section 7 - 3단계면 끝나는 멀티오더 사용 방법 *******************************************************/
.multi-wrap .multi-section7{
  background:#F5F9FF;
  padding:180px 0;
}
.multi-wrap .multi-section7 .com-center{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:60px;
}
.multi-wrap .multi-section7 .head{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  text-align:center;
}
.multi-wrap .multi-section7 .title{
  margin:0;
  font-family:'Pretendard', sans-serif;
  font-size:44px;
  font-weight:800;
  line-height:1.25;
  letter-spacing:-0.88px;
  color:var(--torderGray-900, #202632);
}
.multi-wrap .multi-section7 .title .hl{
  color:#FF193F;
}
.multi-wrap .multi-section7 .title .tab-mo-only{
  display:none;
}
.multi-wrap .multi-section7 .title .pc-only{
  display:inline;
}
.multi-wrap .multi-section7 .sub{
  margin:0;
  font-family:'Pretendard', sans-serif;
  font-size:22px;
  font-weight:600;
  line-height:1.5;
  letter-spacing:-0.44px;
  color:#898EA3;
}
.multi-wrap .multi-section7 .step-list{
  display:flex;
  flex-direction:row;
  gap:24px;
  width:100%;
  max-width:1120px;
}
.multi-wrap .multi-section7 .step{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}
.multi-wrap .multi-section7 .step-tit{
  display:block;
  font-family:'Pretendard', sans-serif;
  font-size:24px;
  font-weight:700;
  line-height:1.25;
  letter-spacing:-0.48px;
  color:var(--torderGray-900, #202632);
}
.multi-wrap .multi-section7 .step-desc{
  margin:0 0 24px;
  font-family:'Pretendard', sans-serif;
  font-size:18px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:-0.36px;
  color:#898EA3;
}
.multi-wrap .multi-section7 .step-img{
  display:block;
  width:100%;
}
.multi-wrap .multi-section7 .step-img img{
  display:block;
  width:100%;
  height:auto;
  border-radius:12px;
}
.multi-wrap .multi-section7 .cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:18px 40px;
  border:none;
  border-radius:100px;
  font-family:'Pretendard', sans-serif;
  font-size:22px;
  font-weight:600;
  line-height:1;
  letter-spacing:-0.44px;
  color:#FFFFFF;
  background:linear-gradient(135deg, #FF193F 0%, #FF5C7B 100%);
  cursor:pointer;
  transition:opacity 0.2s;
  -o-transition:opacity 0.2s;
  -webkit-transition:opacity 0.2s;
}
.multi-wrap .multi-section7 .cta-btn:hover{
  opacity:0.9;
}

@media screen and (max-width:1199px) {
  .multi-wrap .multi-section7{
    padding:120px 0;
  }
  .multi-wrap .multi-section7 .com-center{
    gap:48px;
  }
  .multi-wrap .multi-section7 .head{
    gap:8px;
  }
  .multi-wrap .multi-section7 .title{
    font-size:40px;
    letter-spacing:-0.8px;
  }
  .multi-wrap .multi-section7 .title .pc-only{
    display:none;
  }
  .multi-wrap .multi-section7 .title .tab-mo-only{
    display:inline;
  }
  .multi-wrap .multi-section7 .sub.pc-only{
    display:none;
  }
  .multi-wrap .multi-section7 .step-list{
    flex-direction:column;
    gap:48px;
    max-width:none;
  }
  .multi-wrap .multi-section7 .step{
    width:100%;
  }
  .multi-wrap .multi-section7 .step-tit{
    font-size:28px;
    letter-spacing:-0.56px;
    color:#252730;
  }
  .multi-wrap .multi-section7 .step-desc{
    font-size:18px;
    letter-spacing:-0.36px;
    margin:0 0 8px;
  }
  .multi-wrap .multi-section7 .step-desc .pc-only{
    display:none;
  }
  .multi-wrap .multi-section7 .cta-btn{
    font-size:22px;
    padding:16px 32px;
    letter-spacing:-0.44px;
  }
}

@media screen and (max-width:767px) {
  .multi-wrap .multi-section7{
    padding:80px 0;
  }
  .multi-wrap .multi-section7 .com-center{
    gap:32px;
  }
  .multi-wrap .multi-section7 .title{
    font-size:32px;
    color:#131419;
    letter-spacing:-0.64px;
  }
  .multi-wrap .multi-section7 .step-list{
    gap:32px;
  }
  .multi-wrap .multi-section7 .step{
    gap:6px;
  }
  .multi-wrap .multi-section7 .step-tit{
    font-size:20px;
    letter-spacing:-0.4px;
    color:#252730;
  }
  .multi-wrap .multi-section7 .step-desc{
    margin-bottom:16px;
    font-size:14px;
    letter-spacing:-0.28px;
  }
  .multi-wrap .multi-section7 .cta-btn{
    padding:14px 24px;
    font-size:16px;
    letter-spacing:-0.32px;
  }
}

/** Section 8 - 자주 묻는 질문 FAQ (다크 모드) *******************************************************/
.multi-wrap .multi-section8{
  position:relative;
  width:100%;
  padding:180px 0;
  background:#252730;
}
.multi-wrap .multi-section8 .com-center{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.multi-wrap .multi-section8-head{
  margin-bottom:48px;
}
.multi-wrap .multi-section8-title{
  margin:0;
  font-size:var(--font-size-h4);
  font-weight:800;
  color:var(--color-white);
  text-align:center;
}
.multi-wrap .multi-section8 .com-faq-list{
  width:100%;
  max-width:1120px;
}

@media screen and (max-width:1199px){
  .multi-wrap .multi-section8{ padding:120px 0; }
  .multi-wrap .multi-section8-head{ margin-bottom:40px; }
  .multi-wrap .multi-section8-title{ font-size:var(--font-size-h5); }
}

@media screen and (max-width:599px){
  .multi-wrap .multi-section8{ padding:80px 0; }
  .multi-wrap .multi-section8-head{ margin-bottom:32px; }
  .multi-wrap .multi-section8-title{ font-size:var(--font-size-h6); }
}