/* 2024 신규 모바일*/

html, body{
    min-width:320px;
}
.section{max-width:720px;margin:0 auto;}

.pdb-12 {padding-bottom: 12%;}
.pdb-50 {padding-bottom: 50%;}

.bg-st1 {background: #fff4f8;}
.bg-st2 {background: #effaff;}
.bg-st3 {background: #535455;}
.bg-st4 {background: #ffe6ef;}

.cats-area {max-width: 720px;position:relative;display:block;}
.cats-btn {position:absolute;top:19%;right:8%;width:25%;}

.video-wrap {max-width: 720px;padding:0 6% 10%;background:#e6f4ff;background-size : contain;}
.video-wrap .video-box video {width:100%;object-fit: cover;border: 5px solid #fff;border-radius: 20px;box-shadow: 0px 4px rgba(0, 0, 0, 0.1);}
.video-wrap.st1 {background:#fff;}
.video-wrap.st2 {background:#fff4f9;}
.video-wrap.st3 {background:#effaff;}

.video-wrap2 {max-width: 720px;padding:0 5% 5%;background: url('https://s.wink.co.kr/marketing/events/images/newLD/newLD_t102_img2.jpg');background-size : contain;}
.video-wrap2 .video-box video {width:100%;object-fit: cover;border: 5px solid #fff;border-radius: 20px;box-shadow: 0px 4px rgba(0, 0, 0, 0.1);}
.video-wrap2 .gift-img {position:absolute;width:35%;top:35%;left:3%;z-index:10;}

.video-wrap3 {max-width: 720px;padding:0 6% 10%;background:#e6f4ff;background: url('https://s.wink.co.kr/marketing/events/images/2024/newLD/newLD_t7_img2.jpg'); background-size :  cover;}
.video-wrap3 .video-box video {width:100%;object-fit: cover;border: 5px solid #fff;border-radius: 20px;box-shadow: 0px 4px rgba(0, 0, 0, 0.1);}

.video-wrap4 {max-width: 720px;padding:0;background:#0fb435;background-size :  cover;}
.video-wrap4 .video-box video {width:100%;object-fit: cover;}


.gif-wrap {max-width: 720px;padding:0 6% 10%;background-size : contain;}
.gif-wrap.st1 {background: #f5f5f5;}
.gif-wrap.st2 {padding:0 9% 0%;}
.gif-wrap.st3 {padding:0 9% 10%;}
.gif-wrap.st4 {background: #edebe7;}
.gif-wrap.st5 {padding:0% 9%;background: #effaff;}
.gif-wrap.library {position:absolute;bottom:1%;}
.gif-wrap .gift {position:absolute;bottom:3%;right:5%;width:30%;}
.gif-wrap .gift2 {position:absolute;top:3%;right:5%;width:30%;}
.gif-wrap .gift3 {position:absolute;bottom:1%;right:5%;width:30%;}
.gif-wrap2 {position: relative;max-width: 720px;background-size : contain;}

.gif-box {width:100%;object-fit: cover;}
.gif-box img {object-fit: cover;border-radius: 20px;}
.gif-box.st1 {border: 3px solid #e4e4e4;border-radius: 22px;box-shadow: 0px 4px rgba(211, 211, 211, 0.8);}
.gif-box.st2 {position:absolute;top:33%;left:12%;width:76%;}
.gif-box.st3 {position:absolute;top:68%;left:12%;width:76%;}
.gif-box.st4 {border: 4px solid #fff;border-radius: 21px;box-shadow: 0px 4px rgba(211, 211, 211, 0.8);}
/* 202312 예전랜딩
.gif-box.st5 {position:absolute;top:48%;right:11.3%;width:39%;}
.gif-box.st5 img {border-radius: 4px;}
*/
.gif-box.st5 {position:absolute;top:55.2%;right:11.3%;width:39%;}
.gif-box.st5 img {border-radius: 4px;}
.gif-box.st6 {position:absolute;top:45.2%;right:11.3%;width:39%;}
.gif-box.st6 img {border-radius: 4px;}
.gif-box.st7 {position:absolute;top:55.2%;right:11.3%;width:39%;}
.gif-box.st7 img {border-radius: 4px;}
.gif-box.st8 {position:absolute;top:49.2%;right:11.5%;width:39%;}
.gif-box.st8 img {border-radius: 4px;}

.mySwiper .swiper-slide {max-width: 120px !important; width: 100px !important; height: 80%;background-color: #dddddd;color: #5d5d5d;border-radius:15px;padding:6px 4px;margin:0 5px 5px 0; font-weight: bold;font-size: 0.9em;}
.mySwiper .swiper-slide-thumb-active {background-color: #16b73b;color: #fff;}
.mySwiper2 {background:url('https://s.wink.co.kr/marketing/events/images/newLD/newLD_t107_img16.jpg') 52% 80% no-repeat; background-size: 75%;}
@media (max-width: 720px) {
  .mySwiper2 {background:url('https://s.wink.co.kr/marketing/events/images/newLD/newLD_t107_img16.jpg') 54% 70% no-repeat; background-size: 75%;}
}
.mySwiper3 {margin-left:8%;}
.mySwiper4 {background:#535455;padding:10% 1% 10% 3%;}
.mySwiper5 {margin-left:8%;}

.swiper-pagination {position: relative;margin-top: 8%;}
@media (max-width: 720px){
  .swiper-pagination {position: relative;margin-top: 10%;}
}
.swiper-pagination-bullet-active {background-color:#16b73b;}

.swiper-button-next:after {
  content: "";position: absolute;top:120%; right:180%;
  background: url('https://us.wink.co.kr/mobile/1.1.0/renewalV2/common/arrow-indigo-right-gray.png') no-repeat;
  background-size:contain;width: 7vw;height: 7vw; min-width: 34px;min-height: 34px;max-width: 60px; max-height: 60px;}
@media (max-width: 720px){
  .swiper-button-next:after  {position: absolute;top:70%; right:70%;min-width: 33px;min-height: 33px;}
}
.swiper-button-prev:after{
  content: "";position: absolute;top:120%; left:220%;
  background: url('https://us.wink.co.kr/mobile/1.1.0/renewalV2/common/arrow-indigo-left-gray.png') no-repeat;
  background-size:contain;width: 7vw;height: 7vw; min-width: 34px;min-height: 34px;max-width: 60px; max-height: 60px;
}
@media (max-width: 720px){
  .swiper-button-prev:after  {position: absolute;top:70%; left:100%;min-width: 33px;min-height: 33px;}
}

.swiper-wrapper.tab-area {width:100% !important;flex-wrap:wrap;flex-direction: row; padding: 0 4% 8%;}
.swiper-wrapper.tab-area .swiper-slide {border-radius: 40px;max-width: 26% !important;width: 90% !important;font-size:1.7em;letter-spacing:-0.5px;padding: 0.7em; margin:0 0.7em 0.7em 0; text-align:center;color:#fff;font-weight: bold;}
@media (max-width: 720px) {
  .swiper-wrapper.tab-area .swiper-slide {border-radius: 20px;font-size:0.9em;}
}
.swiper-wrapper.tab-cont {padding-top: 0px;}
.swiper-wrapper.tab-cont .swiper-slide img { border:4px solid #fff;}

.button-container {display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: -130%;padding-bottom: 30px;}
.button-container img {max-width: 100%; width: 77%; display: block; margin: 0 auto;}

.floating-banner {position: fixed;bottom: 0;  left: 50%;transform: translateX(-50%);z-index: 9999;max-width: 720px;background:none;padding:0;width:100%;}
.floating-banner img {width: 100%; height: auto; display: block; margin: 0 auto;}

.company-info li {width: 100%;}
.company-info .link {padding: 5px 0;}

footer {padding-bottom:60px; border-top:1px solid #e1e1e1;}

/* 유튜브 움직이는 텍스트 랜딩 */
.ani-area {padding:13% 0 20%; background:#33bcff; background: url('https://s.wink.co.kr/marketing/events/images/2024/youtube/youtube_t1_img2.jpg'); background-size :  cover;}
.ani-area img {display:block; margin: auto;}
.ani-area .ani1 {width: 56%;}
.ani-area .ani2 {width: 86%;}
.tit-no1 {position: absolute; top: 55%; left: 33.5%;width: 22%;}
.ani1, .ani2, .ani3 {opacity: 0;transform: translateY(50px);transition: opacity 0.5s ease, transform 0.5s ease;}
.animated {opacity: 1; transform: translateY(0);}