<html lang="ko"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>프로모션 MO</title>
    </head>
    
    <body style="margin: 0">
    
    <style>
    </style>
    <style>
        html { scroll-behavior: smooth; }
        .rel{position: relative;}
        .abs{position: absolute;}
        .new-wpb-container * {font-family: "Noto Sans KR";margin: 0;padding: 0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing: border-box;}
        .new-wpb-container img {width:100%;border:none ; line-height: 0;display: block;}
        .new-wpb-container a {display: inline-block;text-decoration: none; border:none}
        .new-wpb-container li, .new-wpb-container ol {list-style: none;}
        /* layout */
        .new-wpb-container{ max-width:500px; width:100%; margin: 0 auto; }
        .new-wpb-container .space-top{padding-top:15%}
        .new-wpb-container .space-bot{padding-bottom:15%}  
        .new-wpb-container .space-set{padding:15% 0 }
        .new-wpb-container .space{margin:0 5%}
        .new-wpb-container .space-l{margin-left:5%}
        .new-wpb-container .center{display: flex;justify-content: center;}
        /*유의사항*/
        .new-wpb-container .pb-img-st2 {padding-left:5%;padding-right: 5%;}
        .new-wpb-container .pb-notice-cont{color: #fff;}
        .new-wpb-container .pb-notice-cont .not-tit{font-size: 22px;}
        .new-wpb-container .pb-notice-cont ul{padding-top:4%;line-height: 1.3;}
        .new-wpb-container .pb-notice-cont li{position: relative;padding-top: 10px; padding-left:14px ;font-weight: 100;}
        .new-wpb-container .pb-notice-cont li::before{content: ''; display: block;  position: absolute;  left:0px; top: 20px; width:4px ;height: 4px ; border-radius: 50%; background-color: #fff;} 
        @media all and (max-width:420px){
            .new-wpb-container .pb-banefit-tit{font-size:32px; }
            .new-wpb-container .pb-notice-cont .not-tit{font-size: 17px;}
            .new-wpb-container .pb-notice-cont li{font-size: 13px; padding-left:10px ;}
            .new-wpb-container .pb-notice-cont li::before{top:18px;width:3px ;height: 3px ;}
        }
        /*모션*/
        .new-wpb-container .motion{position: absolute;animation-fill-mode: forwards !important; opacity: 0;}
        .new-wpb-container .section.active .delay_1{animation-delay:0.8s !important;}
        .new-wpb-container .section.active .delay_2{animation-delay:1.1s  !important;}
        .new-wpb-container .section{position: relative; width:100%;text-align:center;}
        .new-wpb-container .section .fade-txt{position: absolute; }
        .new-wpb-container .section.active .fade-txt{ animation: fadein 1.5s; -moz-animation: fadein 1.5s; -webkit-animation: fadein 1.5s;-o-animation: fadein 1.5s;animation-fill-mode: forwards ;   }   
        .new-wpb-container .section .fade-hand{position: absolute; right:0; top:49%; width: 64.5%;}
        .new-wpb-container .section.active .fade-hand{animation: hand_motion 1s; -moz-animation: hand_motion 1s; -webkit-animation: hand_motion 1s;-o-animation: hand_motion 1s;animation-fill-mode: forwards;}   
        .new-wpb-container .section .fade-card{position: absolute; opacity: 1;}
        .new-wpb-container .section .fade-card::before{content: '';display: block;width: 1px;  height: calc(100% - 7px);position: absolute;top:0; background-color: rgba(0, 0, 0, 0.7);}
        .new-wpb-container .section.active .fade-card{ animation: fade_card 1s; -moz-animation: fade_card 1s; -webkit-animation: fade_card 1s;-o-animation: fade_card 1s; animation-fill-mode: forwards ;   }
        @keyframes fadein {
            from {
                opacity: 0;
                margin-top:4%;
            }
            to {
                opacity: 1;
                margin-top:0;
            }
        }
        @keyframes hand_motion {
            0% {
                top:55%;
                opacity: 0;
            }
            100% {
                top:49%;
                opacity: 1;
            }
        }
        @keyframes fade_card {
            from {
                padding-top:0;  opacity: 1;
            }
            to {
                padding-top:12.2%; opacity: 1;
            }
        }
    </style>
    <div class="new-wpb-container">
        <div class="pb-img-st1">
            <img src="https://cdns.tourvis.com/promotion/202301/52876/img_01_230210.jpg" alt="">
        </div>
        <div class="pb-img-st1 rel">
            <img src="https://cdns.tourvis.com/upload/image/banner/2023/03/29/_53642img_coupon_230329_20230329165455.png" alt="">
            
            <a href="#" data-modify onclick="couponDownloadAll(['amanekbeppu']); return false;"  style="position: absolute; left:5%; top:73%; width:90% ; height:13.5%;text-indent: -9999px;">1초만에 쿠폰받기</a>
            
        </div>
        <div class="pb-img-st1 rel">
            <img src="https://cdns.tourvis.com/promotion/202301/52876/img_09_230210.jpg" alt="">
            <a href="https://hotel.tourvis.com/hotels/716155?id=716155&guests=2&in=20230320&out=20230321&type=HOTEL&keyword=%25EC%2595%2584%25EB%25A7%2588%25EB%2584%25A5%2520%25EB%25B2%25B3%25ED%2591%25B8%2520%25EC%259C%25A0%25EB%259D%25BC-%25EB%25A0%2588%2C%2520%25EB%25B2%25B3%25EB%25B6%2580%2C%2520%25EC%259D%25BC%25EB%25B3%25B8&division=hotel&sortType=RC" style="position: absolute; left:5%; top:40.35%; width:90% ; height: 4.6%;text-indent: -9999px;"></a>
            <a href="https://hotel.tourvis.com/hotels/716155?id=716155&guests=2&in=20230320&out=20230321&type=HOTEL&keyword=%25EC%2595%2584%25EB%25A7%2588%25EB%2584%25A5%2520%25EB%25B2%25B3%25ED%2591%25B8%2520%25EC%259C%25A0%25EB%259D%25BC-%25EB%25A0%2588%2C%2520%25EB%25B2%25B3%25EB%25B6%2580%2C%2520%25EC%259D%25BC%25EB%25B3%25B8&division=hotel&sortType=RC"  style="position: absolute; left:5%; top:84%; width:90% ; height:4.6%;text-indent: -9999px;">1초만에 쿠폰받기</a>
        </div>
        <div id="section02" class="section ">
            <img src="https://cdns.tourvis.com/promotion/202301/52876/img_02_new.jpg" alt="">
            <div class="motion fade-card" style="width:7.5%; top:17%; left:50%">
                <img src="https://cdns.tourvis.com/promotion/202301/52876/img_02_01.png" alt="">
            </div>
        </div>
        <div id="section03" class="section center">
            <img src="https://cdns.tourvis.com/promotion/202301/52876/img_03.jpg" alt="">
            <div class="motion fade-txt"style="width:85.5%; top:25.5%; left:10%">
                <img src="https://cdns.tourvis.com/promotion/202301/52876/img_03_01.png" alt="" >
            </div>
            <div class="motion fade-txt delay_1"style="width:56.62%;top:52.5%; ">
                <img src="https://cdns.tourvis.com/promotion/202301/52876/img_03_02.png" alt="" >
            </div>
            <div class="motion fade-txt delay_2" style="width:85.5%; top:62.5%; right:10%;">
                <img src="https://cdns.tourvis.com/promotion/202301/52876/img_03_03.png" alt="">
            </div>
        </div>
        <div id="section04" class="section">
            <img src="https://cdns.tourvis.com/promotion/202301/52876/img_04.jpg" alt="">
            <div class="motion fade-txt space"style="width:62.3%; top:5%">
                <img src="https://cdns.tourvis.com/promotion/202301/52876/img_04_01.png" alt="" >
            </div>
            <div class="space-l" style="position: absolute; top:34%; width: 95%;">
                <img src="https://cdns.tourvis.com/promotion/202301/52876/img_04_02.jpg" alt="" >
                <img src="https://cdns.tourvis.com/promotion/202301/52876/img_04_03.jpg" alt="" style="margin-top:5%">
            </div>
        </div>
        <div id="section05" class="section" style="padding-top:20%;background-color:#624e46">
            <img src="https://cdns.tourvis.com/promotion/202301/52876/img_05.jpg" alt="">
            <div class="motion fade-txt space" style="width:66.6%; top:5%">
                <img src="https://cdns.tourvis.com/promotion/202301/52876/img_05_01_230210.png" alt="">
            </div>
            <div class="motion fade-txt delay_1" style="width:9.25%;top:16.3%; right:5%; ">
                <img src="https://cdns.tourvis.com/promotion/202301/52876/img_05_02.png" alt="">
            </div>
            <div class="motion fade-hand delay_2">
                <img src="https://cdns.tourvis.com/promotion/202301/52876/card.png" alt="">
            </div>
        </div>
        
        <div id="section06" class="section" style="padding-bottom: 5%; background-color:#fef3ef;">
            <img src="https://cdns.tourvis.com/promotion/202301/52876/img_06.jpg" alt="">
        </div>
        <div id="section07" class="section center" style="padding-bottom: 5%; background-color:#624e47;">
            <img src="https://cdns.tourvis.com/promotion/202301/52876/img_07.jpg" alt="">
            <div class="motion fade-txt space" style="width:54.3%; top:25%">
                <img src="https://cdns.tourvis.com/promotion/202301/52876/img_07_01.png" alt="">
            </div>
            <div class="motion fade-txt delay_1" style="width:68%; top:33%">
                <img src="https://cdns.tourvis.com/promotion/202301/52876/img_07_02.png" alt="">
            </div>
        </div>
        <div id="section08" class="section center" style="padding-bottom: 38%; background-color:#332722">
            <img src="https://cdns.tourvis.com/promotion/202301/52876/img_08.jpg" alt="">
            <div class="motion fade-txt space"style="width:49%; top:17%">
                <img src="https://devcdns.tourvis.com/upload/image/banner/2023/02/10/qptvn_20230210133413.png" alt="" >
            </div>
            <div class="motion fade-txt delay_1"style="width:29%; top:27.7%">
                <img src="https://cdns.tourvis.com/promotion/202301/52876/img_08_02.png" alt="" >
            </div>
            <div class="motion fade-txt delay_1"style="width:80%; top:35.7%">
                <img src="https://cdns.tourvis.com/promotion/202301/52876/img_08_03.png" alt="" >
            </div>
            <div class="motion fade-txt delay_1"style="width:100%; top:87.3%">
                <img src="https://cdns.tourvis.com/promotion/202301/52876/img_08_btn_230210.jpg" alt="" style="width:100%">
                <a href="https://hotel.tourvis.com/hotels/716155?id=716155&guests=2&in=20230320&out=20230321&type=HOTEL&keyword=%25EC%2595%2584%25EB%25A7%2588%25EB%2584%25A5%2520%25EB%25B2%25B3%25ED%2591%25B8%2520%25EC%259C%25A0%25EB%259D%25BC-%25EB%25A0%2588%2C%2520%25EB%25B2%25B3%25EB%25B6%2580%2C%2520%25EC%259D%25BC%25EB%25B3%25B8&division=hotel&sortType=RC"  style="position: absolute; left:5%; bottom:0%; width:90% ; height:100%;text-indent: -9999px;">예약하러가기</a>
            </div>
        </div>
        
        <div class="pb-img-st2 space-set rel"  style="background-color: #000;">
            <div class="pb-notice-cont">
                <p class="not-tit">유의사항</p>
                <ul>
                    <li>본 기획전은 당사 사정에 의해 예고없이 변경 또는 조기 종료될 수 있습니다.</li>
                    <li>일부 숙소는 할인쿠폰 사용이 불가합니다.</li>
                    <li>객실 요금은 호텔 사정에 의해 실시간으로 변경될 수 있습니다.</li>
                </ul>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="https://devcdns.tourvis.com/new/mo/js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        setTimeout(function() {
            var section = $('.section');
            $(window).on('scroll', function(){
                var scroll_top = $(this).scrollTop();
                section.each(function(){
                    var top=$(this).offset().top - 350,
                        bottom=top + $(this).outerHeight();
                    if(top<=scroll_top && scroll_top<= bottom){
                        var _this_section = $(this);
                        var getId = $(this).attr('id');
                        _this_section.addClass('active');
        
                    }
        
                })
            });
        }, 500);
    </script>
    
    
    </body></html>