<!DOCTYPE html>
<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;}
    .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;}
    .wpb-container img {width:100%;border:none ; line-height: 0;display: block;}
    .wpb-container a {display: inline-block;text-decoration: none; border:none}
    .wpb-container li, .wpb-container ol {list-style: none;line-height: 0;}
    .fix{position:fixed !important ; top:0; left:50%; transform:translateX(-50%); z-index:1; width:100%; max-width:500px;}
    .promotion_view_wrap .fix {max-width: 750px;}
    .new-wrap-500 .fix {max-width: 500px;}
    .new-wrap-500 .promotion_view_wrap .fix {max-width: 500px;}
    /* layout */
    .wpb-container{	max-width:500px; width:100%; margin: 0 auto; }
    /*유의사항*/
    .wpb-container .space-set { padding: 15% 0;}
    .wpb-container .pb-img-st2 {padding-left:5%;padding-right: 5%;}
    .wpb-container .pb-notice-cont{color: #fff;}
    .wpb-container .pb-notice-cont .not-tit{font-size: 22px;}
    .wpb-container .pb-notice-cont ul{padding-top:4%;line-height: 1.3;}
    .wpb-container .pb-notice-cont li{position: relative;padding-top: 10px; padding-left:14px ;font-weight: 100;line-height: 1.6;}
    .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;} 
    /* swiper */
    .wpb-container .swiper { width: 100%; height: 100%; padding: 0 5.0%; line-height: normal; box-sizing: border-box;  margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; z-index: 1}
    .wpb-container .swiper.no-pad { padding: 0;}
    .wpb-container .swiper-wrapper {padding: 0; margin: 0; list-style: none; position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; box-sizing: content-box}
    .wpb-container .swiper-slide { width: 48%; flex-shrink: 0; height: 100%; position: relative; transition-property: transform}
    .wpb-container .event-visual .swiper-slide { width: 100%; }
    .wpb-container .swiper-slide img {display: block; width: 100%; height: 100%; object-fit: cover;}
    .wpb-container .swiper-fade.swiper-free-mode .swiper-slide {transition-timing-function: ease-out}
    .wpb-container .swiper-fade .swiper-slide {  pointer-events: none; transition-property: opacity}
    .wpb-container .swiper-fade .swiper-slide .swiper-slide {  pointer-events: none}
    .wpb-container .swiper-fade .swiper-slide-active, .wpb-container .swiper-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto}
    @media all and (max-width:420px){
        .wpb-container .pb-banefit-tit{font-size:32px; }
        .wpb-container .pb-notice-cont .not-tit{font-size: 17px;}
        .wpb-container .pb-notice-cont li{font-size: 13px; padding-left:10px ;}
        .wpb-container .pb-notice-cont li::before{top:18px;width:3px ;height: 3px ;}
    }
    </style>
    <div class="wpb-container " >
        <div class="pb-container">
            <div class="pb-cont">
                <div class="event-visual" style="position: relative;">
                    <div style="position: absolute;z-index: 9;margin-top:7%;"><img src="https://cdns.tourvis.com/promotion/202303/53363/tit.png" alt="" style="width:56%;margin: 0 auto;"></div>
                    <div class="swiper-container swiper-visual" style="overflow-x: hidden; position: relative;background: #A05C1D;">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div style="position:relative">
                                    <img src="https://cdns.tourvis.com/promotion/202303/53363/visual01.jpg" alt="" >
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div style="position:relative">
                                    <img src="https://cdns.tourvis.com/promotion/202303/53363/visual02.jpg" alt="" >
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div style="position:relative">
                                    <img src="https://cdns.tourvis.com/promotion/202303/53363/visual03.jpg" alt="" >
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="pb-img-st1 rel">
                    <img src="https://cdns.tourvis.com/promotion/202303/53363/img01.jpg" alt="">
                    <a href="#" data-modify onclick="couponDownloadAll(['2023hotel7_nolimit']); return false;" style="width:90%;height: 7%;top: 37.4%;right: 5%;; position: absolute;text-indent: -9999px;" ></a>
                    <a href="https://m.tourvis.com/m/promotion/565" style="width:90%;height: 7%;top:86.2%;right: 5%;; position: absolute;text-indent: -9999px;" ></a>
                </div>
                
                
                <div id="a" class="tab-area">
                    <div id="menu" class="tab-box" style="position: relative; z-index: 5;background-color: #fff;">
                        <ul class="on-off" style="display:flex; justify-content: space-between; width:100%;max-width:100%;margin:0;padding: 0;box-sizing:border-box;list-style:none;">
                            <li class="on" style="width:50%;">
                                <a href="#a" class="tab-btn" onclick="btnClickAction(this)"><img src="https://cdns.tourvis.com/promotion/202303/53363/tab01_on.jpg" style="max-width:100%;" alt=""></a>
                            </li>
                            <li style="width: 50%;">
                                <a href="#b" class="tab-btn" onclick="btnClickAction(this)"><img src="https://cdns.tourvis.com/promotion/202303/53363/tab02_off.jpg" style="max-width:100%;" alt=""></a>
                            </li>
                        </ul>
                    </div>
                    <div class="pb-img-st1 rel" >
                        <img src="https://cdns.tourvis.com/promotion/202303/53363/img_tab01_1.jpg" alt="" >
                        <a href="https://m.tourvis.com/activity/product/PRD3000215716" style="width:90%;height: 3.25%;top: 51.2%;right: 5%;; position: absolute;text-indent: -9999px;" ></a>
                    </div>
                    <div class="pb-img-st1 rel" >
                        <img src="https://cdns.tourvis.com/promotion/202303/53363/img_tab01_2.jpg" alt="" >
                        <a href="https://hotel.tourvis.com/hotels/31935?id=31935&guests=2&in=20230517&out=20230518&type=HOTEL&keyword=%25EC%25A0%259C%25EC%259D%25B4%25ED%258C%258C%25ED%2581%25AC%2520%25EC%2595%2584%25EC%259D%25BC%25EB%259E%259C%25EB%2593%259C%2520%25EB%25A6%25AC%25EC%25A1%25B0%25ED%258A%25B8%2520%26%2520%25EC%259B%258C%25ED%2584%25B0%25ED%258C%258C%25ED%2581%25AC%2C%2520%25EC%2584%25B8%25EB%25B6%2580%2C%2520%25ED%2595%2584%25EB%25A6%25AC%25ED%2595%2580&division=hotel	" style="width:90%;height: 2.1%;top: 27.5%;right: 5%;; position: absolute;text-indent: -9999px;" ></a>
                        <a href="https://hotel.tourvis.com/hotels/66843?id=66843&guests=2&in=20230523&out=20230524&type=HOTEL&keyword=%25EC%2583%25B9%25EA%25B7%25B8%25EB%25A6%25B4%25EB%259D%25BC%25EC%258A%25A4%2520%25EB%25A7%2589%25ED%2583%2584%2520%25EB%25A6%25AC%25EC%25A1%25B0%25ED%258A%25B8%2520%26%2520%25EC%258A%25A4%25ED%258C%258C%2C%2520%25EC%2584%25B8%25EB%25B6%2580%2C%2520%25ED%2595%2584%25EB%25A6%25AC%25ED%2595%2580&division=hotel	" style="width:90%;height: 2.1%;top: 48.5%;right: 5%;; position: absolute;text-indent: -9999px;" ></a>
                        <a href="https://hotel.tourvis.com/hotels/182015?type=HOTEL&keyword=%25EB%2591%2590%25EC%25A7%2593%2520%25ED%2583%2580%25EB%258B%2588%2520%25EB%25A7%2589%25ED%2583%2584%2520%25EC%2584%25B8%25EB%25B6%2580%2520%25EB%25A6%25AC%25EC%25A1%25B0%25ED%258A%25B8%2C%2520%25EC%2584%25B8%25EB%25B6%2580%2C%2520%25ED%2595%2584%25EB%25A6%25AC%25ED%2595%2580&id=182015&in=20230523&out=20230524&guests=2&division=hotel	" style="width:90%;height: 2.1%;top: 69.45%;right: 5%;; position: absolute;text-indent: -9999px;" ></a>
                        <a href="https://hotel.tourvis.com/hotels/804734?id=804734&guests=2&in=20230425&out=20230426&type=HOTEL&keyword=%25EC%2589%2590%25EB%259D%25BC%25ED%2586%25A4%2520%25EC%2584%25B8%25EB%25B6%2580%2520%25EB%25A7%2589%25ED%2583%2584%2520%25EB%25A6%25AC%25EC%25A1%25B0%25ED%258A%25B8%2C%2520%25EC%2584%25B8%25EB%25B6%2580%2C%2520%25ED%2595%2584%25EB%25A6%25AC%25ED%2595%2580&division=hotel	" style="width:90%;height: 2.1%;top: 90.45%;right: 5%;; position: absolute;text-indent: -9999px;" ></a>
                        <a href="https://hotel.tourvis.com/hotels?type=CITY&keyword=%25EC%2584%25B8%25EB%25B6%2580%2C%2520%25ED%2595%2584%25EB%25A6%25AC%25ED%2595%2580&division=city&id=8485&in=20230516&out=20230517&guests=2	" style="width:90%;height: 4.8%;top: 93.2%;right: 5%;; position: absolute;text-indent: -9999px;" ></a>
                    </div>
                </div>
                
                
                <div id="b" class="tab-area">
                    <div id="menu" class="tab-box" style="position: relative; z-index: 5;background-color: #fff;">
                        <ul class="on-off" style="display:flex; justify-content: space-between; width:100%;max-width:100%;margin:0;padding: 0;box-sizing:border-box;list-style:none;">
                            <li class="on" style="width:50%;">
                                <a href="#a" class="tab-btn" onclick="btnClickAction(this)"><img src="https://cdns.tourvis.com/promotion/202303/53363/tab01_off.jpg" style="max-width:100%;" alt=""></a>
                            </li>
                            <li style="width: 50%;">
                                <a href="#b" class="tab-btn" onclick="btnClickAction(this)"><img src="https://cdns.tourvis.com/promotion/202303/53363/tab02_on.jpg" style="max-width:100%;" alt=""></a>
                            </li>
                        </ul>
                    </div>
                    <div class="pb-img-st1 rel" >
                        <img src="https://cdns.tourvis.com/promotion/202303/53363/img_tab02_1.jpg" alt="" >
                        <a href="https://m.tourvis.com/activity/product/PRD3000246251" style="width:90%;height: 2.75%;top: 33.35%;right: 5%;; position: absolute;text-indent: -9999px;" ></a>
                    </div>
                    <div class="pb-img-st1 rel" >
                        <img src="https://cdns.tourvis.com/promotion/202303/53363/img_tab02_2.jpg" alt="" >
                        <a href="https://hotel.tourvis.com/hotels/143011?id=143011&guests=2&in=20230509&out=20230510&type=HOTEL&keyword=%25ED%2597%25A4%25EB%2582%259C%2520%25ED%2581%25AC%25EB%25A6%25AC%25EC%258A%25A4%25ED%2583%2588%2520%25EC%2583%258C%25EC%25A6%2588%2520%25EB%25A6%25AC%25EC%25A1%25B0%25ED%258A%25B8%2C%2520%25EB%25B3%25B4%25EB%259D%25BC%25EC%25B9%25B4%25EC%259D%25B4%2C%2520%25ED%2595%2584%25EB%25A6%25AC%25ED%2595%2580&division=hotel	" style="width:90%;height: 2.1%;top: 27.5%;right: 5%;; position: absolute;text-indent: -9999px;" ></a>
                        <a href="https://hotel.tourvis.com/hotels/151248?id=151248&guests=2&in=20230516&out=20230517&type=HOTEL&keyword=%25ED%2581%25AC%25EB%25A6%25BC%25EC%258A%25A8%2520%25EB%25A6%25AC%25EC%25A1%25B0%25ED%258A%25B8%2520%26%2520%25EC%258A%25A4%25ED%258C%258C%2520%25EB%25B3%25B4%25EB%259D%25BC%25EC%25B9%25B4%25EC%259D%25B4%2C%2520%25EB%25B3%25B4%25EB%259D%25BC%25EC%25B9%25B4%25EC%259D%25B4%2C%2520%25ED%2595%2584%25EB%25A6%25AC%25ED%2595%2580&division=hotel	" style="width:90%;height: 2.1%;top: 48.5%;right: 5%;; position: absolute;text-indent: -9999px;" ></a>
                        <a href="https://hotel.tourvis.com/hotels/66955?id=66955&guests=2&in=20230516&out=20230517&type=HOTEL&keyword=%25EB%258D%2594%2520%25EB%25A6%25B0%25EB%2593%259C%2520%25EB%25B3%25B4%25EB%259D%25BC%25EC%25B9%25B4%25EC%259D%25B4%2C%2520%25EB%25B3%25B4%25EB%259D%25BC%25EC%25B9%25B4%25EC%259D%25B4%2C%2520%25ED%2595%2584%25EB%25A6%25AC%25ED%2595%2580&division=hotel	" style="width:90%;height: 2.1%;top: 69.45%;right: 5%;; position: absolute;text-indent: -9999px;" ></a>
                        <a href="https://hotel.tourvis.com/hotels/22781?id=22781&guests=2&in=20230516&out=20230517&type=HOTEL&keyword=%25ED%2597%25A4%25EB%2582%259C%2520%25ED%2594%2584%25EB%259D%25BC%25EC%259E%2584%2520%25EB%25B9%2584%25EC%25B9%2598%2520%25EB%25A6%25AC%25EC%25A1%25B0%25ED%258A%25B8%2C%2520%25EB%25B3%25B4%25EB%259D%25BC%25EC%25B9%25B4%25EC%259D%25B4%2C%2520%25ED%2595%2584%25EB%25A6%25AC%25ED%2595%2580&division=hotel	" style="width:90%;height: 2.1%;top: 90.45%;right: 5%;; position: absolute;text-indent: -9999px;" ></a>
                        <a href="https://hotel.tourvis.com/hotels?type=CITY&keyword=%25EB%25B3%25B4%25EB%259D%25BC%25EC%25B9%25B4%25EC%259D%25B4%2C%2520%25ED%2595%2584%25EB%25A6%25AC%25ED%2595%2580&division=city&id=12533&in=20230516&out=20230517&guests=2	" style="width:90%;height: 4.8%;top: 93.2%;right: 5%;; position: absolute;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>
                            <li>본 기획전은 당사 사정에 의해 예고 없이 변동 또는 조기 종료될 수 있습니다.</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdns.tourvis.com/hotel/dist/js/swiper-bundle.min.js"></script>
    <script src="https://cdns.tourvis.com/hotel/dist/js/jquery-3.5.1.min.js"></script>
    <script>
            setTimeout(function() {
                //swiper
                var mySwiper = new Swiper(".wpb-container .swiper-visual", {		
                    grabCursor: true,
                    effect: "fade",
                    speed:2000,
                    loop: true,
                    autoplay:{
                        delay: 2000,
                    }
                });
                // 상위 dom 반환
                function closest(el, selector) {
                    var matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;

                    while (el) {
                        if (matchesSelector.call(el, selector)) {
                            return el;
                        } else {
                            el = el.parentElement;
                        }
                    }
                    return null;
                }
                
                // 버튼 클릭
                function btnClickAction(obj) {
                    event.preventDefault();
                    
                    var _header = document.querySelector('header');
                    var _tab = closest(obj, '.tab-box');
                    var href = obj.getAttribute('href');
                    var _target = document.querySelector(href);
                    var targetPosition = window.pageYOffset + _target.getBoundingClientRect().top;

                    var headerHeight;
                    if (_header != null) {                
                        var moChk = _header.classList.contains('sub_base_header');
                        moChk ? headerHeight = 0 : headerHeight = _header.children[0].clientHeight;
                    } else {
                        // 호텔 까지?
                        var _mkHeader = document.querySelector('.n-header.fix-item');
                        if (_mkHeader != null) {
                            var _proTop = document.querySelector('.promotion-top');
                            headerHeight = _mkHeader.children[0].clientHeight + _proTop.clientHeight;
                        } else {
                            headerHeight = 0;
                        }

                        // headerHeight = 0;
                    }

                    var addTop;
                    if (_target.querySelector('.tab-area-top')) {
                        addTop = _target.querySelector('.tab-area-top').clientHeight;
                    } else {
                        addTop = 0;
                    }
                    
                    var result = targetPosition - headerHeight + addTop;
                    window.scrollTo(0, result);
                }

                // on off
                function onOff(obj) {
                    var _box = closest(obj, '.tab-box');
                    var _ulAll = _box.querySelectorAll('ul');
                    for(var h = 0; h < _ulAll.length; h++) {
                        if (_ulAll[h].classList.contains('on-off')) {
                            var _li = _ulAll[h].querySelectorAll('li');
                            for (var i = 0; i < _li.length; i++) {
                                if (_li[i].classList.contains('on')) {
                                    _li[i].classList.remove('on');
                                }

                                var _liImg = _li[i].querySelector('img');
                                var _liImgSrc = _liImg.getAttribute('src');
                                var imgSplit = _liImgSrc.split('_');
                                var exten = _liImgSrc.split('.').pop();
                                _liImg.src = imgSplit[0] + '_off.' + exten;
                            }
                            
                            obj.parentNode.classList.add('on');
                            var _thisImg = obj.querySelector('img');
                            var thisImgSrc = _thisImg.getAttribute('src');
                            var thisImgSplit = thisImgSrc.split('_');
                            var thisExten = thisImgSrc.split('.').pop();
                            _thisImg.src = thisImgSplit[0] + '_on.' + thisExten;
                        }
                    }
                }
        }, 500);
    </script> 
    
</body>
</html>