/* BASIC css start */
#contentWrap {width: 100%; }
.item-wrap  {width: 100%; margin:0 auto!important;overflow:inherit;} 
.item-wrap .item-cont {width: 1500px; margin:0 auto!important;overflow:inherit;} 
.item-cont .cate11 {width:73.5%; margin: 10px 0px; padding: 10px 0px; font-weight: bold; font-size: 17px; text-align:center;color:#00b1ff;}
.item-wrap .item-cont .item-list {padding-right:30px!important; margin:0 auto;} 

#productPlan #top{padding-left: 52px;}

/* page-body */
#productPlan .page-body .visual { margin-top:40px; background-color:#BE90EC; width: 1800px; margin: 0 auto;} /* width: 1500px; margin: 0 auto; */
#productPlan .page-body .pick { margin-top:30px; text-align:center }
#productPlan .page-body .pick select { width:588px; height:38px; font-size:15px; color:#555; text-align:center }
#productPlan .page-body .clst { zoom: 1.3; overflow: hidden; margin-top: 10px; padding: 10px 30px 7px; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; }
#productPlan .page-body .clst li { float: left; margin-right: 15px; padding-left: 10px; background: url(/images/d3/modern_simple/common/bull_h2_sqr_gray.gif) no-repeat 0 45%; display: inline-block; text-align:center; }
#productPlan .page-body .clst li a { display: block; white-space: nowrap; }
#productPlan .page-body .p-hd { position: relative; margin-top: 70px; padding: 0 10px 5px; border-bottom: 2px solid #5c5c5c; }
#productPlan .page-body .p-hd.mt-35 { margin-top: 35px; }
#productPlan .page-body .p-hd h3 { color: #5c5c5c; font-size: 14px; font-weight: bold; letter-spacing: -1px; }
#productPlan .page-body .p-hd .top { position: absolute; top: 0; right: 5px; color: #5c5c5c; }
#productPlan .page-body .plst { zoom: 1; overflow: hidden; margin: 25px auto 0; }
#productPlan .page-body .item-wrap { padding-top:50px }

#page{width:800px;margin: 0 auto;margin-top:100px;}
#page h1{
    text-align:center;
    display:block;
    font-size:20px;
    font-weight:800;
}

.clearfix {
    clear: both;
}

.button {position: absolute;
    left: 37%;
    top: 33.9%;}

/*
 * flipclock
 * Version: 1.0.0 
 * Authors: @gokercebeci
 * Licensed under the MIT license
 * Demo: http://
*/

/*==============================================================================
    FLIP CLOCK
==============================================================================*/
/*.flipclock {
}
.flipclock hr {
    position: absolute;
    left: 0;
    top: 65px;
    width: 100%;
    height: 3px;
    border: 0;
    background: #000;
    z-index: 10;
    opacity: 0;
}
ul.flip {
    position: relative;
    float: left;
    margin: 10px;
    padding: 0;
    width: 180px;
    height: 130px;
    font-size: 120px;
    font-weight: bold;
    line-height: 127px;
}

ul.flip li {
    float: left;
    margin: 0;
    padding: 0;
    width: 49%;
    height: 100%;
    -webkit-perspective: 200px;
    list-style: none;
}

ul.flip li.d1 {
    float: right;
}

ul.flip li section {
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

}

ul.flip li section:first-child {
    z-index: 2;
}

ul.flip li div {
    z-index: 1;
    position: absolute;
    left: 0;
    width: 100%;
    height: 49%;
    overflow: hidden;
}

ul.flip li div .shadow {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
}

ul.flip li div.up {
    -webkit-transform-origin: 50% 100%;
    top: 0;
}

ul.flip li div.down {
    -webkit-transform-origin: 50% 0%;
    bottom: 0;
}

ul.flip li div div.inn {
    position: absolute;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 200%;
    color: #fff;
    text-shadow: 0 0 2px #fff;
    text-align: center;
    background-color: #000;
    border-radius: 6px;
}

ul.flip li div.up div.inn {
    top: 0;

}

ul.flip li div.down div.inn {
    bottom: 0;
}

.flipclock ul.year{display:none!important;}
.flipclock ul.month{display:none!important;}
.flipclock ul.day{display:none!important;}
/*--------------------------------------
 PLAY
--------------------------------------*/

body.play ul section.ready {
    z-index: 3;
}

body.play ul section.active {
    -webkit-animation: index .5s .5s linear both;
    z-index: 2;
}

@-webkit-keyframes index {
    0% {
        z-index: 2;
    }
    5% {
        z-index: 4;
    }
    100% {
        z-index: 4;
    }
}

body.play ul section.active .down {
    z-index: 2;
    -webkit-animation: flipdown .5s .5s linear both;
}

@-webkit-keyframes flipdown {
    0% {
        -webkit-transform: rotateX(90deg);
    }  
    80% {
        -webkit-transform: rotateX(5deg);
    } 
    90% {
        -webkit-transform: rotateX(15deg);
    }
    100% {
        -webkit-transform: rotateX(0deg);
    }
}

body.play ul section.ready .up {
    z-index: 2;
    -webkit-animation: flipup .5s linear both;
}

@-webkit-keyframes flipup {
    0% {
        -webkit-transform: rotateX(0deg);
    }  
    90% {
        -webkit-transform: rotateX(0deg);
    }
    100% {
        -webkit-transform: rotateX(-90deg);
    }
}

.footer_section {display : none;}

/*--------------------------------------
 SHADOW
--------------------------------------*/
#mask {position:absolute;top:600px; left:650px;}
body.play ul section.ready .up .shadow {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, .1)), color-stop(100%, rgba(0, 0, 0, 1)));
    background: linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
    -webkit-animation: show .5s linear both;
}

body.play ul section.active .up .shadow {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, .1)), color-stop(100%, rgba(0, 0, 0, 1)));
    background: linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
    -webkit-animation: hide .5s .3s linear both;
}

/*DOWN*/

body.play ul section.ready .down .shadow {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 1)), color-stop(100%, rgba(0, 0, 0, .1)));
    background: linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
    -webkit-animation: show .5s linear both;
}

body.play ul section.active .down .shadow {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 1)), color-stop(100%, rgba(0, 0, 0, .1)));
    background: linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
    -webkit-animation: hide .5s .3s linear both;
}

@-webkit-keyframes show {
    0% {
        opacity: 0;
    }
    90% {
        opacity: .10;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes hide {
    0% {
        opacity: 1;
    }  
    80% {
        opacity: .20;
    }
    100% {
        opacity: 0;
    }
} */

@import url(https://fonts.googleapis.com/css?family=Lato:100,400);
#the-final-countdown {
  background: #333;
  font-family: 'Lato', sans-serif;
  text-align: center;
  color: #eee;
  text-shadow: 1px 1px 5px black;
  padding: 1rem 0;
  font-size: 3rem;
  border: 1px solid #000;
}
#the-final-countdown p{
position: absolute;
  top:730px; left:800px;
  font-size:80px;
    font-weight:800;}
    
    .optionPreview{
    position:relative;
    margin-top:10px;
    width: 200px;
    margin: 10px auto 0;
}
.optionPreview{
    position:relative;
    margin-top:10px;
    width: 200px;
    margin: 10px auto 0;
}
.optionPreview .mk_opt_oneclick{display:none!important;}
.optionPreview *{
    box-sizing:border-box;
}

.optionPreview > img{
    display:none;
}

.optionPreview .prevOptionBtn{
    position:relative;
    display:block;
    line-height:30px;
    border:1px solid #cfcfcf;
    border-radius:5px;
    cursor:pointer;
}

.optionPreview .prevOptionBtn img{
    position:absolute;
    top:12.5px;
    right:30px;
}

.optionPreview #MK_opt_preview{
    top:28px !important;
    left:50% !important;
    margin-left:-100px;
    border-radius:5px;
}

.optionPreview #MK_opt_preview .mk_prd_option_list{
    width: 200px;
    padding: 10px 0 0;
    border: 1px solid #cfcfcf;
    border-top: none;
    border-radius: 0 0 5px 5px;
}

.optionPreview #MK_opt_preview .mk_prd_option_list li{
    margin:5px 10px;
    padding-left:10px;
    border-radius:5px;
}

.optionPreview #MK_opt_preview .mk_prd_option_list li:hover{
    background:#f4f4f4;
}

.optionPreview #MK_opt_preview .mk_prd_option_list li.mk_opt_top,
.optionPreview #MK_opt_preview .mk_prd_option_list h5.option-name,
.optionPreview #MK_opt_preview .mk_prd_option_list li.mk_bt_opt_close{
    display:none;
}

.optionPreview #MK_opt_preview .mk_prd_option_list li p{
    display:inline-block;
    font-size:12px;
    color:#242424;
    line-height:22px;
}

.countdownWrapper1{
        margin: 0;
    position: absolute;
    top: 60.1%;
    left: 39%;
    display: flex align-items: center;
    justify-content: center;
    font-family: sans-serif;
    }
    .countdown {
      display: flex;
      gap: 16px;
    }
    .unit {
      text-align: center;
    }
    .label {
      display: block;
      font-size: 14px;
      color: white;
    }
    .flip-card {
      position: relative;
  width: 80px;
  height: 100px;
  perspective: 400px;
  overflow: hidden;                /* ★ 필수 */
  transform-style: preserve-3d;    /* 3D 컨텍스트 유지 */
  perspective-origin: center center;
    }
    .flip-card .top,
    .flip-card .bottom,
    .flip-card .flip {
      display: flex;                   
  justify-content: center;         /* 가로 중앙 */
  align-items: center;             /* 세로 중앙 */
  position: absolute;
  left: 0; width: 100%;
  backface-visibility: hidden;
  box-sizing: border-box;
  border: 1px solid #ddd;
  background: #f7f7f7;
  font-size: 42px;
  font-weight: bold;
  color: #333;
  overflow: hidden;
    }
    .flip-card .top {
      top: 0;
      z-index: 3;
      border-radius: 6px;
      width: 80px;
  height: 100px;
    }
    .flip-card .bottom {
      bottom: 0;
      border-radius: 6px;
      transform: translateY(-1px);
      visibility: hidden;
      z-index: 2;
    }
    .flip-card .flip {
      top: 0;
      transform-origin: bottom;
      border-radius: 6px;
      display: none;
      width: 80px;
  height: 100px;
    }
    .flip-card.flipping .flip {
      display: block;
      z-index: 4; 
      animation: foldHalf 0.5s ease-in forwards;
      width: 80px;
  height: 100px;padding-top:22px; 
    }
    .separator {
      font-size: 42px;
      font-weight: bold;
      color: white;
      line-height: 1;
          padding-top: 27px;
    }
    .flipping{      width: 80px;
  height: 100px;}
    @keyframes foldHalf {
      from { transform: rotateX(0deg); }
      to   { transform: rotateX(-90deg); }
    }


setInterval(function time(){
  var d = new Date();
  var hours = 17 - d.getHours();
  var min = 60 - d.getMinutes();
  if((min + '').length == 1){
    min = '0' + min;
  }
  var sec = 60 - d.getSeconds();
  if((sec + '').length == 1){
        sec = '0' + sec;
  }
  jQuery('#the-final-countdown p').html(hours+':'+min+':'+sec)
}, 1000);

$(function(){
    //미리보기
    $('.optionPreview').each(function(){
        var thisPreviewOptionFun = $(this).children('img').attr('onclick');
        $(this).find('.prevOptionBtn').attr('onclick', thisPreviewOptionFun)
    });
    
    
    $('.prevOptionBtn').on('click',function(){
        if($(this).hasClass('open')){
            prevOptionCloseFun();
        }else{
            prevOptionCloseFun();
            
            $(this).addClass('open');
            $(this).find('img').attr('style','transform:rotate(180deg)');
            $(this).parent().find('.optionPreviewListWrap').show();

            var PreviewOptionHtml = $('#MK_opt_preview').clone();
            $('#MK_opt_preview').remove();
            $(this).parent().find('.optionPreviewListWrap').append(PreviewOptionHtml);
        
        };
    });
});

function prevOptionCloseFun(){
    $('.prevOptionBtn').removeClass('open');
    $('.prevOptionBtn').find('img').attr('style','');
    $('.optionPreviewListWrap').hide();
}

const target = new Date('2025-05-22T10:00:00');

    function updateCard(card, value) {
      const top    = card.querySelector('.top');
      const bottom = card.querySelector('.bottom');
      const flip   = card.querySelector('.flip');
      const curr   = top.textContent;
      if (curr === value) return;

      bottom.textContent = value;
      flip.textContent   = curr;
      card.classList.add('flipping');

      flip.addEventListener('animationend', function done() {
        top.textContent = value;
        card.classList.remove('flipping');
        flip.removeEventListener('animationend', done);
      });
    }

    function tick() {
      const now  = Date.now();
      let diff   = Math.max(0, target - now);

      const d = String(Math.floor(diff / 86400000)).padStart(2,'0');
      diff %= 86400000;
      const h = String(Math.floor(diff / 3600000)).padStart(2,'0');
      diff %= 3600000;
      const m = String(Math.floor(diff / 60000)).padStart(2,'0');
      diff %= 60000;
      const s = String(Math.floor(diff / 1000)).padStart(2,'0');

      updateCard(document.getElementById('day'), d);
      updateCard(document.getElementById('hour'), h);
      updateCard(document.getElementById('min'),  m);
      updateCard(document.getElementById('sec'),  s);
    }

    tick();
    setInterval(tick, 1000);
/* BASIC css end */