@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import 'reset.css';
*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: 'Noto Sans TC', sans-serif;
}
a,a:hover {text-decoration: none; outline: none; /* for Firefox */
 hlbr:expression(this.onFocus=this.blur()); /* for IE */
}
/* width */
::-webkit-scrollbar {
    width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #e7e7e7; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background: #c79f83; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

body, html {
    margin: 0;
    padding: 0;
    min-height: 100%;
    _height:100%;
    background:#14203a;
    background: url(../images/bg.jpg)center;
     color: #fff;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    background-attachment: fixed;

}
.snow{
  height: 4000px;
  position: absolute;
  width: 100%;
  z-index:150;
  pointer-events: none; }
#snow{z-index:150;}

.progress {
  background: #15213b;
  height: 100%;
  position: fixed;
  width: 100%;
  z-index: 9999999999;
  text-align: center;
  top: 0;
  color: #000; }

.bar {
  width: 280px;
  height: 2px;
  position: fixed;
  top: 50%;
  left: 50%;
  margin: 25px 0 0 -140px; }

.progress-bar {
  background: #fff;
  width: 0%;
  height: 1px;
  display: block;
  overflow: hidden;
  position: relative;
  top: -1px; }

.progress-bar2 {
  background: #3a3a3a;
  width: 100%;
  height: 1px;
  display: block;
  overflow: hidden; }

.progress-text {
  position: fixed;
  top: 50%;
  left: 0;
  width: 400px;
  text-align: center;
  font-size: 20px;
  font-family: 'Noto Sans TC', sans-serif; }

.loading {
  width: 400px;
  height: 80px;
  position: fixed;
  top: 50%;
  left: 50%;
  margin: -60px 0 0 -200px; }



#WRAP {  
    position:relative;
    width:100%;
    max-width:640px;
    min-width:300px;
    height:auto;
    margin:0 auto;
    overflow:hidden;
    background:#14203a;
}



.btn{width: 180px;line-height: 60px;background-color: none; color: #000;text-align: center;font-weight: 300;font-size: 21px;letter-spacing: 3px;cursor: pointer;
-webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;}
.btn:hover{background-color: #000000;color: #fff;}
.hover{   -moz-transition: all 0.1s linear;
   -o-transition: all 0.1s linear;
   -ms-transition: all 0.1s linear;
   transition: all 0.1s linear;}
.hover2{   -moz-transition: all 0.3s linear;
   -o-transition: all 0.3s linear;
   -ms-transition: all 0.3s linear;
   transition: all 0.3s linear;}


/*主視覺區塊*/
#KV{background: url(../images/0923_014.jpg)center bottom;position: relative;height: 865px;overflow: hidden;z-index: 99;}
#KV .logo{background: url(../images/logo.png);width: 480px;height: 68px;margin: 0 auto;margin-top: 90px;}
#KV h1{text-align: center;font-size: 36px;letter-spacing: 5px;line-height: 1.4;font-weight: 300;margin-top: 20px;}
#KV .chris{background: url(../images/christmas.png);width: 287px;height: 104px;left: 175px;top: 715px;position: absolute;}
#KV .kv-p{width: 465px;height: 410px;position: absolute;top: 320px;left:87px; }
#KV .kv-p .jewelry01{background: url(../images/jewelry01.png);width: 99px;height: 94px;position: absolute;left: 300px;top:110px;
animation-name: jewelry01;
  animation-duration: 25s;
  animation-delay: 0s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-iteration-count:infinite; }
#KV .kv-p .jewelry02{background: url(../images/jewelry02.png);width: 251px;height: 183px;position: absolute;left: 120px;top:110px;
  animation-name: jewelry02;
  animation-duration: 21s;
  animation-delay: 0s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-iteration-count:infinite;}
#KV .kv-p .jewelry03{background: url(../images/jewelry03.png);width: 99px;height: 94px;position: absolute;left: 80px;top:200px;
animation-name: jewelry03;
  animation-duration: 26s;
  animation-delay: 0s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-iteration-count:infinite;}
#KV .kv-p .snow01{background: url(../images/snow001.png);width: 402px;height: 403px;position: absolute;left: 30px;
animation-name: snow01;
  animation-duration: 30s;
  animation-delay: 0s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-iteration-count:infinite;}
#KV .kv-p .snow02{background: url(../images/snow002.png);width: 402px;height: 403px;position: absolute;left: 30px;
animation-name: snow01;
  animation-duration: 25s;
  animation-delay: 1.2s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-iteration-count:infinite;}
#KV .kv-p .snow03{background: url(../images/snow003.png);width: 402px;height: 403px;position: absolute;left: 30px;
animation-name: snow01;
  animation-duration: 19s;
  animation-delay: 0.5s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-iteration-count:infinite;}

/*翻牌*/
#CARD{background: url(../images/0923_02.jpg);position: relative;height: 487px;overflow: hidden;}
#CARD .card-con{width: 640px;position: absolute;z-index: 188;}
#CARD .card01{position: absolute;top: 10px;left: 28px;}
#CARD .card01a{background: url(../images/card01.png);width: 284px;height: 225px;}
#CARD .card02{position: absolute;top: 10px;right: 28px;}
#CARD .card02a{background: url(../images/card02.png);width: 284px;height: 225px;}
#CARD .card03{position: absolute;top: 245px;left: 28px;}
#CARD .card03a{background: url(../images/card03.png);width: 284px;height: 225px;}
#CARD .card04{position: absolute;top: 245px;right: 28px;}
#CARD .card04a{background: url(../images/card04.png);width: 284px;height: 225px;}
#CARD .card{filter:brightness(1);cursor: pointer;width: 284px;height: 225px; }
#CARD .card:hover{filter:brightness(1.5);transform: translateY(-10px); }

/*文章*/
#ARTICLE{background: url(../images/0923_05.jpg);position: relative;height: 767px;overflow: hidden;}
#ARTICLE h1{text-align: center;font-size: 35px;letter-spacing: 5px;line-height: 1.6;font-weight: 400;margin-top: 20px;color: #c79f83;}
#ARTICLE .owl-carousel{clear: both; width: 640px;text-align: center;position: absolute;z-index: 181;height: 597px;top: 160px;}
#ARTICLE .owl-carousel .item{width: 640px;height: 580px;display: inline-block;}
#ARTICLE .owl-carousel .item .slide{width: 584px;height: 597px;margin: 0 auto;}
#ARTICLE .owl-carousel .item .slide img{position: relative;z-index: 9;}
#ARTICLE .owl-carousel .item .slide .white-box{position: relative;width: 520px;height:170px;background: #fff;color: #343434;text-align: center;padding: 21px;margin: 0 auto;margin-top: -20px;z-index: 10; }
#ARTICLE .owl-carousel .item .slide .white-box p{font-size: 27px;letter-spacing: 3px;line-height: 1.6;}
#ARTICLE .owl-carousel .item .slide .white-box .more{cursor: pointer; background: url(../images/more.png);width: 120px;height: 36px;margin: 0 auto;margin-top: 5px;}
#ARTICLE .owl-carousel .item .slide .white-box .more:hover{background: url(../images/more-a.png);}
#ARTICLE .owl-carousel .owl-nav{position: absolute;width: 100%;top: 20%;background: none;}
#ARTICLE .owl-carousel .owl-prev{background:url('../images/arrow.png') ;transform: rotate(180deg);background-size: cover; position: absolute; width: 65px;height: 150px;text-indent: -9999px;left: 10px;top: 2%;opacity: 1;margin: 0;}
#ARTICLE .owl-carousel .owl-next{background:url('../images/arrow.png') ;background-size: cover;position: absolute;width:65px;height: 150px;text-indent: -9999px;right: 10px;top: 2%;opacity: 1;margin: 0;}
#ARTICLE .owl-carousel .owl-dots{display: block;}
#ARTICLE .ribbon01{background: url(../images/ribbon.png);width: 161px;height: 137px;position: absolute;top: 0px;z-index: 181;}
#ARTICLE .ribbon02{background: url(../images/ribbon2.png);width: 640px;height: 250px;position: absolute;top: 490px;z-index: 181;pointer-events: none;}


/*填單區塊*/
#FORM{background: url(../images/0923_05.jpg);position: relative;height: 1150px;overflow: hidden;z-index: 99;}
#FORM .form-bg{background: url(../images/box.png);width: 640px;height: 1127px;margin:0 auto;margin-top: 40px;position: relative;overflow: hidden;}
#FORM h2{text-align: center;font-size: 35px;letter-spacing: 5px;line-height: 1.6;font-weight: 400;margin-top: 60px;color: #c79f83;}
#FORM .gift{background: url(../images/gift.jpg);width: 223px;height: 149px;transform: rotate(10deg);position: absolute;right: 25px;top: 200px;}
#FORM p{text-align: justify;font-size: 22px;line-height: 1.8;margin-top: 10px;letter-spacing: 1px;font-weight: 300;padding: 10px 280px 10px 80px;}
#FORM p span{font-size: 19px}
#FORM ul{width: 520px;margin: 0 auto;margin-top: 30px;}
#FORM li{font-size: 24px;font-weight: 300;margin-top: 20px;color: #000;}
#FORM li .check{float: left;color: #fff;}
#FORM li span{font-size: 17px;color: #fff;font-weight: 300;line-height: 17px;text-align: justify;width: 470px;float: right;margin-bottom: 40px;margin-right: 10px;letter-spacing: 2px;}
#FORM li span a{text-decoration: underline;color: #fff;}
#FORM input{color: #000; line-height:80px;height:80px;font-size:23px;padding-top:0px;width:490px;padding-left:20px;margin-left: 15px;font-weight: 300;border: 1px solid #aeaeae;outline: none; }
#FORM .go-btn{cursor: pointer; background:#d7b79e;color: #000;text-align: center;font-size: 24px;letter-spacing: 2px; width: 458px;line-height: 106px;margin: 0 auto;filter: brightness(100%);margin-top: 70px;-webkit-transition: all 0.1s linear;
   -moz-transition: all 0.1s linear;
   -o-transition: all 0.1s linear;
   -ms-transition: all 0.1s linear;
   transition: all 0.1s linear;}
#FORM .go-btn:hover{filter: brightness(110%);}
#FORM select#spot{width:490px;height:80px;margin-left: 15px;font-size:22px;padding-left:20px;}

#FORM h3{font-size: 20px;padding: 20px 80px;line-height: 1.8;letter-spacing: 2px;font-weight: 400;}

/*footer區塊*/
footer{background: url(../images/0911_06.jpg);position: relative;height: 89px;overflow: hidden;z-index: 99;}

.popp{ width: 552px;overflow-y: auto;overflow-x: hidden;min-height: 520px;height: 80vh;}
#pop01{background: url(../images/pop01.jpg);background-attachment:local;}
#pop02{background: url(../images/pop02.jpg);background-attachment:local;}
#pop03{background: url(../images/pop03.jpg);background-attachment:local;}
#pop04{background: url(../images/pop04.jpg);background-attachment:local;}

.popp .go-form{background: url(../images/go-form.jpg);width: 366px;height: 84px; filter: brightness(100%);cursor: pointer;margin: 20px auto 50px auto; }
#pop01 h1{background: url(../images/pop-h1.png);width: 552px;height: 95px;margin: 0 auto;margin-top: 50px;text-indent: -9999px;}
#pop02 h1{background: url(../images/pop-h2.png);width: 552px;height: 95px;margin: 0 auto;margin-top: 50px;text-indent: -9999px;}
#pop03 h1{background: url(../images/pop-h3.png);width: 552px;height: 95px;margin: 0 auto;margin-top: 50px;text-indent: -9999px;}
#pop04 h1{background: url(../images/pop-h4.png);width: 552px;height: 95px;margin: 0 auto;margin-top: 50px;text-indent: -9999px;}
.popp p{font-size: 21px;font-weight: 300;text-align: center;line-height: 1.8;width: 552px;margin-top: 15px;letter-spacing: 2px;}
.popp .owl-carousel{width: 552px;text-align: center;margin-top: 380px;position: relative;}
.popp .owl-carousel .item{background: url(../images/item-bg.png);width: 552px;height: 410px;display: inline-block;}
.popp .owl-carousel .item h2{font-size: 30px;text-align: center;color: #c79f83;letter-spacing: 2px;}
.popp .owl-carousel .item h3{font-size: 21px;text-align: center;color: #fff;letter-spacing: 2px;line-height: 1.8;font-weight: 300;margin-top: 10px;}
.popp .owl-carousel .item img{width: 428px;margin: 0 auto;margin-top: 10px;}
.popp .owl-carousel .owl-nav{position: absolute;width: 100%;top: 37%;background: none;}
.popp .owl-carousel .owl-dots{display: block;}
#pop01 .owl-carousel .owl-prev{background:url('../images/arrow-1.png') ;transform: rotate(180deg);background-size: cover; position: absolute; width: 65px;height: 150px;text-indent: -9999px;left: 10px;top: 2%;opacity: 1;margin: 0;}
#pop01 .owl-carousel .owl-next{background:url('../images/arrow-1.png') ;background-size: cover;position: absolute;width:65px;height: 150px;text-indent: -9999px;right: 10px;top: 2%;opacity: 1;margin: 0;}
#pop02 .owl-carousel .owl-prev{background:url('../images/arrow-1.png') ;transform: rotate(180deg);background-size: cover; position: absolute; width: 65px;height: 150px;text-indent: -9999px;left: 10px;top: 2%;opacity: 1;margin: 0;}
#pop02 .owl-carousel .owl-next{background:url('../images/arrow-1.png') ;background-size: cover;position: absolute;width:65px;height: 150px;text-indent: -9999px;right: 10px;top: 2%;opacity: 1;margin: 0;}
#pop03 .owl-carousel .owl-prev{background:url('../images/arrow-1.png') ;transform: rotate(180deg);background-size: cover; position: absolute; width: 65px;height: 150px;text-indent: -9999px;left: 10px;top: 2%;opacity: 1;margin: 0;}
#pop03 .owl-carousel .owl-next{background:url('../images/arrow-1.png') ;background-size: cover;position: absolute;width:65px;height: 150px;text-indent: -9999px;right: 10px;top: 2%;opacity: 1;margin: 0;}
#pop04 .owl-carousel .owl-prev{background:url('../images/arrow-1.png') ;transform: rotate(180deg);background-size: cover; position: absolute; width: 65px;height: 150px;text-indent: -9999px;left: 10px;top: 2%;opacity: 1;margin: 0;}
#pop04 .owl-carousel .owl-next{background:url('../images/arrow-1.png') ;background-size: cover;position: absolute;width:65px;height: 150px;text-indent: -9999px;right: 10px;top: 2%;opacity: 1;margin: 0;}







@keyframes jewelry01
{
0%{ transform:translate(0px,-30px) rotate(-50deg);}
25%{ transform:translate(-30px,-20px) rotate(90deg);}
50%{ transform:translate(-80px,-90px) rotate(180deg);}
75%{ transform:translate(-30px,-20px) rotate(90deg);}
100%{ transform:translate(0px,-30px) rotate(-50deg);}

}
@-webkit-keyframes jewelry01
{
0%{ transform:translate(10px,-30px) rotate(-50deg);}
25%{ transform:translate(-30px,-20px) rotate(90deg);}
50%{ transform:translate(-110px,-90px) rotate(180deg);}
75%{ transform:translate(-30px,-20px) rotate(90deg);}
100%{ transform:translate(10px,-30px) rotate(-50deg);}
}

@keyframes jewelry02
{
0%{ transform:translate(-60px,-50px) rotate(0deg);}
25%{ transform:translate(50px,50px) rotate(-10deg);}
50%{ transform:translate(75px,10px) rotate(10deg);}
75%{ transform:translate(30px,35px) rotate(-10deg);}
100%{transform:translate(-60px,-50px) rotate(0deg);}

}
@-webkit-keyframes jewelry02
{
0%{ transform:translate(-60px,-50px) rotate(0deg);}
25%{ transform:translate(50px,50px) rotate(-10deg);}
50%{ transform:translate(75px,10px) rotate(10deg);}
75%{ transform:translate(30px,35px) rotate(-10deg);}
100%{transform:translate(-60px,-50px) rotate(0deg);}
}

@keyframes jewelry03
{
0%{  transform:translate(-20px,-10px) rotate(-10deg);}
25%{ transform:translate(50px,-50px) rotate(-90deg);}
50%{ transform:translate(75px,10px) rotate(-200deg);}
75%{ transform:translate(30px,35px) rotate(-50deg);}
100%{  transform:translate(-20px,-10px) rotate(-10deg);}

}
@-webkit-keyframes jewelry03
{
0%{  transform:translate(-20px,-10px) rotate(-10deg);}
25%{ transform:translate(50px,-50px) rotate(-90deg);}
50%{ transform:translate(75px,10px) rotate(-200deg);}
75%{ transform:translate(30px,35px) rotate(-50deg);}
100%{  transform:translate(-20px,-10px) rotate(-10deg);}
}

@keyframes snow01
{
 to {
        transform: rotate(1turn);
    }

}
@-webkit-keyframes snow01
{
 to {
        transform: rotate(1turn);
    }
}

/*MOBILE-COUPON*/
#m-form1 {background-repeat: no-repeat;background-color: #fff;background-position: center top;background-image: url(../images/coupon.jpg);height: 1650px;width: 100%;}
.m-content1 {height: 100%;width: 640px;margin-top: 0px;margin-right: auto;margin-bottom: 0px;margin-left: auto;position: relative;}
#coup-name {
    font-size: 24px;
    color: #fff;
    position: absolute;
    left: 109px;
    top: 980px;
    font-family: "Adobe 繁黑體 Std B", "Noto Sans CJK TC Light", "Arial Unicode MS", iLiHei, "微軟正黑體";
}
#coup-phone {
    font-size: 24px;
    color: #fff;
    position: absolute;
    left: 105px;
    top:1062px;
    font-family: "Adobe 繁黑體 Std B", "Noto Sans CJK TC Light", "Arial Unicode MS", iLiHei, "微軟正黑體";
}
#coup-mail {
    font-size: 22px;
    color: #fff;
    position: absolute;
    left: 105px;
    top: 1143px;
    font-family: "Adobe 繁黑體 Std B", "Noto Sans CJK TC Light", "Arial Unicode MS", iLiHei, "微軟正黑體";
}
#coup-store {
    font-size: 22px;
    color: #fff;
    position: absolute;
    left: 105px;
    top: 1223px;
    font-family: "Adobe 繁黑體 Std B", "Noto Sans CJK TC Light", "Arial Unicode MS", iLiHei, "微軟正黑體";
}
#check-btn {
    position: absolute;
    height: 96px;
    width: 416px;
    left: 106px;
    top: 1350px;
}