@charset "utf-8";
/*
  danny 202108
  1. $Reset
  2. $font
  3. $body,html
  4. $共用
  5. $Mobile
  6. $Pad
  7. $橫的版型
  8. $Pc
  9. $1025~1279
*/


/* $Mobile
--------------------------------------------------------------------------------------*/
html,body{  }
/* body.index{ background: #DBDBDB; } */

/* kv */
.kv-container{ width: 100vw; margin: 0 auto; box-sizing: border-box; padding: 60px 0 0 0; }
.subkv-container{ width: 96vw; margin: 10px auto; box-sizing: border-box; padding: 0 0 0 0; }
.kv-box{ width: 100%; /* height: 450px; background: url(../images/kv.jpg) center top no-repeat; background-size: cover;  */position: relative; }
.inpage .kv-box{ /* height: 270px; *//*  height: 450px; */ /* background: url(../images/kv.jpg) center center no-repeat; */ /* s */  }

.kv-box img{ width: 100%; }
.kv-box img.pc{ display: none; }
.kv-box a{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; line-height: 0; }

.kv-txt{ width: 96vw; margin: 0 auto; display: block; position: absolute; left: 50%; top: 20px; transform: translateX(-50%); padding: 0; font-size: 1.4rem; line-height: 1.5em; color: #000000; text-align: center; }
.inpage .kv-txt{ top: 20px; }
.kv-txt h3{ font-family: 'Noto Sans TC', sans-serif; font-weight: 300; font-size: 1.5rem; line-height: 1.8em; color: #bb163c; display: flex; justify-content: center; }
.kv-txt h2{ font-family: 'Noto Sans TC',  sans-serif; font-weight: 500;font-size: 3rem; line-height: 1.2em; color: #B80000; }
.kv-txt h2 span{ display: block; }
.kv-txt .txt--biger{ font-size: 2.4rem; font-weight:400; }
.kv-txt .txt--small{ font-size: 2rem; }
.kv-txt .txt--hlight{ font-weight: 500; color: #B80000; }
.kvevent-box{ width: 100%; position: relative; }
.kvevent-box img{ width: 100%; }
.eventinfo>span{ /* display: block; */ }

.index h4{ font-family: 'Noto Sans TC', sans-serif; font-weight: 300; font-size: 3rem; line-height: 1.2em; color: #980200; position: relative; z-index: 999; }
.index h4:before{ content: '/'; margin: 0 20px 0 0; }
.index h4:after{ content: '/'; margin: 0 0 0 20px; }

.banner{ width: 94vw; margin: 30px auto 0px; }
.banner img{ width: 100%; }

.banner-slider{ width: 100vw; margin: 20px auto 0px; }
.inpage .banner-slider{ width: 100vw; margin: 20px auto 0px; }
.banner-slider img{ width: 100%; }
.banner-slider .slick-slide{ position: relative; }
.banner-slider .slick-slide a{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.banner-slider .slick-dots{ display: flex; justify-content: center; margin: 15px 0 20px 0; }
.banner-slider .slick-dots li{ width: 10px; height: 10px; border-radius:50px; background: #ccc; cursor:pointer; }
.banner-slider .slick-dots li+li{ margin: 0 0 0 10px;}
.banner-slider .slick-dots li button{ display: none; }
.banner-slider .slick-dots li.slick-active{ background: #000; }

/* area */
.area-container{ width: 94vw; margin: 0 auto; box-sizing: border-box; padding: 30px 0 30px 0; }
.area-container h4{ color: #980200; margin: 0 0 30px 0; text-align: center; }
.area-box{ display: flex; flex-direction: column; box-sizing: border-box; padding: 0 0 0 0; }
.area-box li{ display: flex; position: relative; width: 100%; height: 400px; position: relative; }
.area-box li+li{ margin: 30px 0 0 0;  }
.area-box li h5{ min-width: 50%; height: 400px; font-family: 'Noto Sans TC'; font-size: 3rem; line-height: 1em; font-weight: 300; color: #fff; box-sizing: border-box; padding: 0px 1% 0 5%; }
.area-box li h5 p{ display: flex; align-items: center; height: 155px;  }
.area-box li:nth-child(1) h5{ background: #5b331a; }
.area-box li:nth-child(2) h5{ background: #3d5a5d; }
.area-box li:nth-child(3) h5{ background: #fdd8a2; }
.area-box li:nth-child(4) h5{ background: #b3b1be; }
.area-box li:nth-child(5) h5{ background: #3b3a37; }
.area-box li:nth-child(6) h5{ background: #9dd8ea; }
.area-txt{ min-width: calc(100% - 50%); height: 155px; display: flex; flex-direction: column;  justify-content: center; font-size: 1.4rem; line-height: 1.5em; color: #707070; box-sizing: border-box; padding: 0 0 0 20px; }
.area-img{ width: 90%; position: absolute; left: 10%; top: 155px; }
.area-img img{ width: 100%; }
.area-box li a{ display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }

/* event  */
.event-container{ background: #F0F0F0; box-sizing: border-box; padding: 30px 0; }
.activity-box{ width: 94vw; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.activity-box h4{ margin: 0 0 40px 0; }
.activity-box ul{ display: flex; flex-direction: column; align-items: center;  }
.activity-box ul li{ min-width: 88%; width: 70%; display: flex; flex-direction: column; align-items: center; }
.activity-box ul li+li{ margin: 40px 0 0 0; }
.activity-box .img-box{ width: 100%;  border-radius: 100%; overflow: hidden; margin: 0 0 5px 0; }
.activity-box .img-box img{ width: 100%; }
.activity-txt h5{ font-family: 'Noto Sans TC', sans-serif; font-weight: 300;font-size: 2.5rem; line-height: 1.2em; text-align: center; color: #000; margin: 0 0 5px 0; }
.activity-txt{ font-size: 1.6rem; line-height: 1.4em; text-align: center; color: #000;  }
.activity-box ul li a{ font-size: 2rem; color: #fff; margin: 10px 0 0 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 50px; border-radius: 30px; background: #bb163c; /* transition: all .4s cubic-bezier(.23,1,.32,1);  */ }
.activity-box ul li a:after{ content: '\e905'; margin: 0 0 0 5px; }

/* footer */
footer{ box-sizing: border-box; padding: 30px 0 20px 0; background:#DDA8A7 }
.inpage footer{ box-sizing: border-box; padding: 15px 0 15px 0; }
.footer-box{ width: 94vw; margin: 0 auto; display: block; }
.footer-info{ width: 100%; margin: 0 0 30px 0; }
.footer-img{ margin: 0 0 10px 0; }
.footer-img img{ width: 100%; }
.footer-txt{ font-size: 1.4rem; line-height: 1.5em; color: #fff; }
.footer-txt .tit{ font-size: 2.2rem; line-height: 1.2em; margin: 0 0 8px 0; color: #fff; }
.footer-copyright{ font-size: 1.4rem; color:#fff; text-align: center; margin: 30px 0 0 0; }
/* fb */
.fb-box{ width: 100%;  }
.fb-include{ width: 100%; height: 400px; }
/* line */
.footer-line{  margin: 20px 0 20px 0; }
.footer-line .tit{ font-size: 2rem; font-weight: 400; margin: 0 0 10px 0; display: flex; align-items: center; color: #fff; }
.footer-line .tit:before{ content:'\e906'; margin: 0 10px 0 0; font-size: 2.4rem; color: #fff; }
.footer-line .img-box{ width: 100%; }
.footer-line img{ width: 100%; max-width: 200px; display: block; margin: 0 auto; }

/* -- info -- */
.info-container{ width: 96vw; margin: 15px auto; font-size: 1.4rem; line-height: 1.5em; font-family: 'Noto Sans TC', sans-serif; font-weight: 200; color: #5A5A5A; box-sizing: border-box; padding: 0 10px; }
.info-container h4{ font-size: 2.5rem; line-height: 1.2em; color: #000; font-family: 'Noto Sans TC', sans-serif; font-weight: 400; margin: 0 0 10px 0;  }
.infolist{ font-size: 1.6rem; line-height: 1.6em; font-weight: 400; color: #000; }
.infolist li{ display: flex;  }
.infolist li span{ width: 85px; max-width: 85px; flex-shrink: 0; }
.info-container .tit{ font-size: 2rem; color: #000; font-weight: 400; margin: 0 0 10px 0; }
.info-container .subtit{ font-size: 1.6rem; color: #000; font-weight: 400; margin: 0 0 5px 0; }
.maplist{ list-style: decimal; margin: 0 0 10px 25px; }
.maplist_dot{ list-style: disc; margin: 0 0 10px 30px; }
.maplist02{ list-style: disc; margin: 0 0 10px 5px; }
.map-box{ width: 100%; height: 350px; margin: 0 auto 30px; }
.map-box iframe{ width: 100%; }
.flexboxwrap{ display: flex; flex-wrap: wrap }

/* -- reserve -- */
.reserve-container{  width: 96vw; margin: 25px auto 30px; font-size: 1.4rem; line-height: 1.6em; font-family: 'Noto Sans TC', sans-serif; font-weight: 200; color: #5A5A5A; box-sizing: border-box; padding: 0 10px; }
.event-txt{ font-size: 1.6rem; line-height: 1.6em; font-weight: 400; color: #000; }
.event-btn{ display: block; width: 168px; height: 60px; line-height: 60px; text-align: center; background: #980000; font-size: 2rem; font-weight: 400; color: #fff; margin: 30px auto;   }
.reserve-container h4{ font-size: 2.5rem; line-height: 2.5em; color: #000; font-family: 'Noto Sans TC', sans-serif; font-weight: 400; text-align: center; }
.reserve-container .gifttime{ font-size: 2rem; line-height: 2.5em; color: #000; font-family: 'Noto Sans TC', sans-serif; font-weight: 400;  }
.reserve-container .step-box{ /* display: flex;  */margin: 30px 0 30px 0; }
.reserve-container .step-box>li{ width: 100%; }
.reserve-container .step-box>li+li{ margin: 30px 0 0 0; }
.reserve-container .step_tit{ font-size: 2rem; font-weight: 400; color: #000; text-align: center; }
.reserve-container .step_tit>span{ color: #770000; font-weight: 600; }
.reserve-container .step_tit:after{ display: block;  content: ''; width: 100%;  border-bottom: 2px solid #333; margin: 12px auto; }
.dotlist{ list-style: disc; margin: 0 0 0 20px; }
.unmlist{ list-style: decimal; margin: 0 0 0 20px; }
.color--red{ color: #770000; }
.bgcolor--pink{ background: #DCCCDE; }
.bgcolor--blue{ background: #D4E0CA; }
/* form */
.form-box{ width: 96vw; margin: 0 auto; display: flex; flex-direction: column; justify-content: space-between; font-size: 1.6rem; color: #707070; box-sizing: border-box; padding: 20px 10px; border: 1px solid #CECECE; }
.form-box.success{ margin: 10px auto; padding: 20px 10px 30px; }
.form-txt{ font-size: 1.6rem; line-height: 1.5em;  }
.success .form-txt{ width: auto; }
.form-txt h3{ font-size: 3.6rem; text-align: center; color: #980200; font-weight: normal; }
.form-txt .note{ font-size: 1.3rem; }
.form-box .color-red{ color: #980200; }
.form-list{ margin: 20px 0 0; }

.form-list ul>li{ display: flex; flex-wrap: wrap;  align-items: center; font-size: 1.4rem; }
.form-list ul>li+li{ margin: 20px 0 0 0; }
.form-list label{ width: 100%; margin: 0 10px 0 0; }
.form-list input[type='text'],.form-list input[type='email']{ font-size: 1.4rem; width: 100%; height: 50px; background: #F2F2F2; box-sizing: border-box; padding: 5px 10px;}
.submitbtn{ justify-content: flex-end; }
.form-list input[type='submit']{ font-size: 1.6rem; color: #fff; width: 100%; height: 50px; background: #980200; box-sizing: border-box; padding: 0 30px;  }


/* -- sale -- */
.sale-container{  }
.sale-box{ width: 100%; margin: 0px auto 30px; }
.sale-box>img{ width: 100%; }
/*.saletit{ display: block; width: 96vw; margin: 24px auto; }
.sale-container{ width: 100%; max-width: 1260px; margin: 0 auto; }
.sale-box{ display: flex; flex-wrap: wrap; justify-content: center; }
.sale-box>li{ width: 290px; height: 410px; box-sizing: border-box; padding: 15px 15px 15px 15px; box-shadow: 1px 1px 10px #0000001A; margin: 0 0 24px 0 }
.sale-box>li h3{ font-size: 2.4rem; color: #000; font-weight: 400; margin: 10px 0 0 0; }
.sale-box>li h3:after{ content: ''; display: block; width: 100%; height: 1px; border-bottom: 1px solid #cecece; margin: 7px 0; }
.sale-box>li .price{ font-size: 1.7rem; color: #bfbfbf; text-decoration: line-through; }
.sale-box>li .saleprice{ font-size: 1.8rem; color: #000; text-align: right; }
.sale-box>li .hlight{ font-size: 3rem; color: #bc0000; font-weight: 600; }*/

/* pup */
.pup-container{ width:100vw; height: 100vh; background: rgba(0,0,0,.8); position: fixed; left: 0; top: 0; z-index: 9999; display: none;  }
.pup-box{ display: flex; flex-direction: column; align-items: center; width: 90vw; height: auto; background: rgba(255,255,255,1); font-size: 1.4rem; /* color: #000; */ color: #333; line-height: 1.8em; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); box-sizing: border-box; padding: 20px 20px; }
.pup-img{ width: 80%; }
.pup-img img{ width: 100%; }
.btn_go{ width: 100%; height: 40px; line-height: 40px; text-align: center; font-size: 2rem; font-weight: 600; background: #bc0000; color: #fff; margin: 30px auto 20px; }
.btn_go:after{ content: '\e908'; }
.pup-note{ font-size: 1.4rem; line-height: 1.5em; }
.btn_close{ font-size: 3rem; color: #fff; position: absolute; right: 0px; top: -40px; }
.btn_close>a{ display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }


/* info list */
.info-list{  }
.info-list li{ display: flex; }
.info-list li span{ width: 75px; max-width: 75px; flex-shrink: 0; }
.info-list li a{ display: flex; align-items: center; }


/* $Pad
--------------------------------------------------------------------------------------*/
@media screen and (min-width:600px) and (max-width:1024px){

.banner-slider{ width: 99.5vw; margin: 20px auto 0; }
.inpage .banner-slider{ width: 99.5vw; margin: 20px auto 0px; }
.banner-slider img{ width: 100%; }
.banner-slider .slick-slide{ position: relative; margin: 5px; }
.banner-slider .slick-slide a{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.banner-slider .slick-dots{ display: flex; justify-content: center; margin: 15px 0 60px 0; }
.banner-slider .slick-dots li{ width: 10px; height: 10px; border-radius:50px; background: #ccc; cursor:pointer; }
.banner-slider .slick-dots li+li{ margin: 0 0 0 10px;}
.banner-slider .slick-dots li button{ display: none; }
.banner-slider .slick-dots li.slick-active{ background: #000; }

/* -- info -- */
.info-container{  width: 100%; margin: 25px auto; font-size: 1.6rem; line-height: 1.5em; font-family: 'Noto Sans TC', sans-serif; font-weight: 200; color: #5A5A5A; box-sizing: border-box; padding: 0 10px; }
.info-container h4{ font-size: 3rem; line-height: 2.5em; color: #000; font-family: 'Noto Sans TC', sans-serif; font-weight: 400; /* margin: 0 0 5px 0; */  }
.infolist{ font-size: 1.6rem; line-height: 1.6em; font-weight: 400; color: #000; }
.info-container .tit{ font-size: 2rem; color: #000; font-weight: 400; margin: 0 0 10px 0; }
.info-container .subtit{ font-size: 1.6rem; color: #000; font-weight: 400; margin: 0 0 5px 0; }
.maplist{ list-style: decimal; margin: 0 0 10px 25px; }
.maplist02{ list-style: disc; margin: 0 0 10px 5px; }
.map-box{ width: 100%; height: 350px; margin: 0 auto 30px; }
.map-box iframe{ width: 100%; }

/* -- reserve -- */
.reserve-container{  width: 100%; margin: 25px auto 60px; font-size: 1.6rem; line-height: 1.6em; font-family: 'Noto Sans TC', sans-serif; font-weight: 200; color: #5A5A5A; box-sizing: border-box; padding: 0 10px; }
.event-txt{ font-size: 2rem; line-height: 1.6em; font-weight: 400; color: #000; }
.event-btn{ display: block; width: 168px; height: 60px; line-height: 60px; text-align: center; background: #980000; font-size: 2rem; font-weight: 400; color: #fff; margin: 30px auto;   }
.reserve-container h4{ font-size: 3rem; line-height: 2.5em; color: #000; font-family: 'Noto Sans TC', sans-serif; font-weight: 400; /* text-align: center; */ }
.reserve-container .gifttime{ font-size: 2rem; line-height: 2.5em; color: #000; font-family: 'Noto Sans TC', sans-serif; font-weight: 400;  }
.reserve-container .step-box{ display: flex; margin: 30px 0 30px 0; }
.reserve-container .step-box>li{ width: 30%; }
.reserve-container .step-box>li+li{ margin: 0 0 0 5%; }
.reserve-container .step_tit{ font-size: 2rem; font-weight: 400; color: #000; }
.reserve-container .step_tit>span{ color: #770000; font-weight: 600; }
.reserve-container .step_tit:after{ display: block;  content: ''; width: 100%;  border-bottom: 2px solid #333; margin: 12px auto; }
.dotlist{ list-style: disc; margin: 0 0 0 20px; }
.unmlist{ list-style: decimal; margin: 0 0 0 20px; }
.color--red{ color: #770000; }
.bgcolor--pink{ background: #DCCCDE; }
.bgcolor--blue{ background: #D4E0CA; }
/* form */
.form-box{ width: 100%; max-width: 1260px; margin: 0 auto; display: flex; flex-direction: row; justify-content: space-between; font-size: 2.0rem; color: #707070; box-sizing: border-box; padding: 40px 120px; border: 1px solid #CECECE; }
.form-txt{ width: 460px; font-size: 2.0rem; line-height: 1.5em;  }
.form-txt h3{ font-size: 4.0rem; color: #980200; font-weight: normal; }
.form-txt .note{ font-size: 1.5rem; }
.form-box .color-red{ color: #980200; }
.form-list ul>li{ display: flex; align-items: center; font-size: 2.0rem; }
.form-list ul>li+li{ margin: 20px 0 0 0; }
.form-list label{ width: 130px; text-align: right; margin: 0 10px 0 0; }
.form-list input[type='text']{ font-size: 2.0rem; width: 300px; height: 50px; background: #F2F2F2; box-sizing: border-box; padding: 5px 10px;}
.submitbtn{ justify-content: flex-end; }
.form-list input[type='submit']{ font-size: 2.0rem; color: #fff; height: 35px; background: #980200; box-sizing: border-box; padding: 0 30px;  }


/* pup */
.pup-container{ width:100vw; height: 100vh; background: rgba(0,0,0,.8); position: fixed; left: 0; top: 0; z-index: 999; }
.pup-box{ width: 380px; height: 380px; background: rgba(255,255,255,.8); font-size: 1.6rem; color: #000; line-height: 1.8em; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); /* box-sizing: border-box; padding: 40px 30px; */ }

}





/* $橫的版型 */
@media screen and (orientation:landscape){ 


}





/* $Pc
--------------------------------------------------------------------------------------*/
@media screen and (min-width: 1025px){

/* kv */
.kv-container{ width: 100%; margin: 0 auto; box-sizing: border-box; padding: 100px 0 0 0; }
/*.kv-container.voucher{ width: 100%; max-width: 1260px; margin: 0 auto; box-sizing: border-box; padding: 128px 0 0 0;}*/

.subkv-container{ width: 100%; max-width: 1260px; margin: 20px auto; box-sizing: border-box; padding: 0 0 0 0; }
.kv-box{ width: 100%; /* height: 500px; background: url(../images/kv.jpg) center top no-repeat; background-size: cover;  */position: relative; }
.kv-box img{ width: 100%; }
.kv-box img.pc{ display: block; }
.kv-box img.mobile{ display: none; }
.kv-box a{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; line-height: 0; }
.inpage .kv-box{ /* height: 300px; background: url(../images/kv.jpg) center 22% no-repeat; background-size: cover; */  }
.kv-txt{ width: 100%; max-width: 1440px; margin: 0 auto; display: block; position: absolute; left: 50%; top: 40px; transform: translateX(-50%); padding: 0; font-size: 1.8rem; line-height: 1.5em; color: #000000; text-align: center; }
.inpage .kv-txt{ top: 25px; }
.kv-txt h3{ font-family: 'Noto Sans TC', sans-serif; font-weight: 300; font-size: 4rem; line-height: 1.4em; color: #bb163c; }
.kv-txt h2{ font-family: 'Noto Sans TC',  sans-serif; font-weight: 500;font-size: 7rem; line-height: 1.2em; color: #B80000; }
.kv-txt h2 span{ display: inline-block; }
.inpage .kv-txt h2{ font-size: 6rem; }
.kv-txt .txt--biger{ font-size: 6rem; font-weight:400; }
.kv-txt .txt--small{ font-size: 2rem; }
.kv-txt .txt--hlight{ font-weight: 500; color: #B80000; }
.eventinfo>span{ display: inline-block; }

.index h4{ font-family: 'Noto Sans TC', sans-serif; font-weight: 300; font-size: 4.5rem; text-align: left; line-height: 1.2em; color: #980200; position: relative; z-index: 999; }
.index h4:before{ content: '/'; margin: 0 20px 0 0; }
.index h4:after{ content: '/'; margin: 0 0 0 20px; }

.banner{ width: 100%; max-width: 1440px; margin: 50px auto 20px; }
.banner img{ width: 100%; }

.banner-slider{ width: 100%; margin: 60px auto 0; }
.inpage .banner-slider{ width: 100%; margin: 60px auto 0; }
.banner-slider img{ width: 100%; }
.banner-slider .slick-slide{ position: relative; margin: 5px; }
.banner-slider .slick-slide a{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.banner-slider .slick-dots{ display: flex; justify-content: center; margin: 15px 0 60px 0; }
.banner-slider .slick-dots li{ width: 10px; height: 10px; border-radius:50px; background: #ccc; cursor:pointer; }
.banner-slider .slick-dots li+li{ margin: 0 0 0 10px;}
.banner-slider .slick-dots li button{ display: none; }
.banner-slider .slick-dots li.slick-active{ background: #000; }

/* area */
.area-container{ width: 100%; max-width: 1440px; margin: 0 auto; box-sizing: border-box; padding: 30px 2% 75px 2%; }
.area-container h4{ color: #980200; margin: 0 0 -54px 0; }
.area-box{ display: flex; flex-direction: row; flex-wrap: wrap; box-sizing: border-box; padding: 0 0 0 0; }
.area-box li{ display: flex; position: relative; width: 46%; height: 555px; position: relative; }
.area-box li:nth-child(even){ margin: 0 0 90px 8%; }
.area-box li:first-child{ margin: 115px 0 90px 0; }
.area-box li:nth-child(4){ margin: -90px 0 90px 8%; }
.area-box li:nth-child(5){ margin: 115px 0 90px 0; }
/* .area-box li:last-child{ margin: -90px 0 90px 8%; } */
.area-box li h5{ min-width: 52%; height: 500px; font-family: 'Noto Sans TC'; font-size: 4.8rem; line-height: 1em; font-weight: 300; color: #fff; box-sizing: border-box; /* padding: 40px 10px 0 8%; */ padding: 0px 10px 0 9%; }
.area-box li h5 p{ display: flex; align-items: center; height: 155px;  }
.area-box li:nth-child(1) h5{ background: #5b331a; }
.area-box li:nth-child(2) h5{ background: #3d5a5d; }
.area-box li:nth-child(3) h5{ background: #fdd8a2; }
.area-box li:nth-child(4) h5{ background: #b3b1be; }
.area-txt{ min-width: calc(100% - 52%); height: 155px; display: flex; flex-direction: column;  justify-content: center; font-size: 1.8rem; line-height: 1.5em; color: #707070; box-sizing: border-box; padding: 0 0 0 20px; }
.area-img{ width: 600px; width: 91%; position: absolute; left: 60px; top: 155px; overflow: hidden; }
.area-img img{ width: 100%; }
.area-box li a{ display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.area-box>li img{ transition: all 2s cubic-bezier(.23,1,.32,1);  }
.area-box>li:hover img{ transform:scale(1.05);  }

/* event  */
.event-container{ background: #F0F0F0; box-sizing: border-box; padding: 55px 2% 60px 2%; }
.activity-box{ width: 100%; max-width: 1440px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.activity-box h4{ margin: 0 0 40px 0; }
.activity-box ul{ display: flex; flex-direction: row; justify-content: center; align-items: flex-start;  }
.activity-box ul li{ min-width: 22%; width: 22%; display: flex; flex-direction: column; align-items: center;  }
.activity-box ul li+li{ margin: 0 0 0 8%; }
.activity-box .img-box{ width: 100%;  border-radius: 100%; overflow: hidden; margin: 0 0 10% 0; /*  margin: 0 0 45px 0; */ }
.activity-box .img-box img{ width: 100%; }
.activity-txt h5{ font-family: 'Noto Sans TC', sans-serif; font-weight: 300;font-size: 2.5rem; line-height: 1.5em; text-align: center; color: #000; margin: 0 0 15px 0; }
.activity-txt{ font-size: 1.8rem; line-height: 1.4em; text-align: center; color: #000; min-height: 150px; }
.activity-box ul li a{ font-size: 2rem; color: #fff; background: #bb163c; transition: all .4s cubic-bezier(.23,1,.32,1);  }
.activity-box ul li a:after{ content: '\e905'; margin: 0 0 0 5px; }
.activity-box ul li a:hover{ background: #ffa658; }

/* footer */
footer{ box-sizing: border-box; padding: 65px 20px 30px 20px; background:#DDA8A7; }
.inpage footer{ box-sizing: border-box; padding: 65px 0 30px 0; }
.footer-box{ width: 100%; max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; }
.footer-info{ max-width: 560px; margin: 0 20px 0 0; }
.footer-img{ margin: 0 0 30px 0; }
.footer-txt{ font-size: 1.8rem; line-height: 1.5em; color: #fff; }
.footer-txt .tit{ font-size: 2.5rem; margin: 0 0 8px 0; color: #fff; }
.footer-copyright{ font-size: 1.5rem; color: #fff; text-align: center; margin: 65px 0 0 0; }
/* fb */
.fb-box{ max-width: 400px;  }
.fb-include{ width: 100%; height: 500px; }
/* line */
.footer-line{ width: 160px; flex-shrink:0; margin: 0 20px 0 0; }
.footer-line .tit{ font-size: 2rem; font-weight: 400; margin: 0 0 10px 0; display: flex; align-items: center; color: #fff; }
.footer-line .tit:before{ content:'\e906'; margin: 0 10px 0 0; font-size: 2.4rem; color: #fff; }
.footer-line .img-box{ width: 100%; }
.footer-line img{ width: 100%; max-width: 160px; }


/* -- info -- */
.info-container{  width: 100%; max-width: 1260px; margin: 25px auto; font-size: 1.6rem; line-height: 1.5em; font-family: 'Noto Sans TC', sans-serif; font-weight: 200; color: #5A5A5A; box-sizing: border-box; padding: 0 10px; }
.info-container h4{ font-size: 3rem; line-height: 2.5em; color: #000; font-family: 'Noto Sans TC', sans-serif; font-weight: 400; /* margin: 0 0 5px 0; */  }
.infolist{ font-size: 1.6rem; line-height: 1.6em; font-weight: 400; color: #000; }
.infolist li{ display: flex; }
.infolist li span{ width: 80px; max-width: 80px; }
.info-container .tit{ font-size: 2rem; color: #000; font-weight: 400; margin: 0 0 20px 0; }
.info-container .subtit{ font-size: 1.6rem; color: #000; font-weight: 400; margin:  0 5px 0; }
.maplist{ list-style: decimal; margin: 0 0 10px 25px; }
.maplist02{ list-style: disc; margin: 0 0 10px 5px; }
.map-box{ width: 100%; height: 350px; margin: 0 auto 30px; }
.map-box iframe{ width: 100%; }

/* -- reserve -- */
.reserve-container{  width: 100%; max-width: 1260px; margin: 25px auto 60px; font-size: 1.6rem; line-height: 1.6em; font-family: 'Noto Sans TC', sans-serif; font-weight: 200; color: #5A5A5A; box-sizing: border-box; padding: 0 10px; }
.event-txt{ font-size: 2rem; line-height: 1.6em; font-weight: 400; color: #000; }
.event-btn{ display: block; width: 168px; height: 60px; line-height: 60px; text-align: center; background: #980000; font-size: 2rem; font-weight: 400; color: #fff; margin: 30px auto;   }
.reserve-container h4{ font-size: 3rem; line-height: 2.5em; color: #000; font-family: 'Noto Sans TC', sans-serif; font-weight: 400; /* text-align: center; */ }
.reserve-container .gifttime{ font-size: 2rem; line-height: 2.5em; color: #000; font-family: 'Noto Sans TC', sans-serif; font-weight: 400;  }
.reserve-container .step-box{ display: flex; margin: 30px 0 30px 0; }
.reserve-container .step-box>li{ width: 30%; }
.reserve-container .step-box>li+li{ margin: 0 0 0 5%; }
.reserve-container .step_tit{ font-size: 2rem; font-weight: 400; color: #000; }
.reserve-container .step_tit>span{ color: #770000; font-weight: 600; }
.reserve-container .step_tit:after{ display: block;  content: ''; width: 100%;  border-bottom: 2px solid #333; margin: 12px auto; }
.dotlist{ list-style: disc; margin: 0 0 0 20px; }
.unmlist{ list-style: decimal; margin: 0 0 0 20px; }
.color--red{ color: #7F1313; }
.bgcolor--pink{ background: #DCCCDE; }
.bgcolor--blue{ background: #D4E0CA; }
/* form */
.form-box{ width: 100%; max-width: 1260px; margin: 0 auto; display: flex; flex-direction: row; justify-content: space-between; font-size: 2.0rem; color: #707070; box-sizing: border-box; padding: 40px 120px; border: 1px solid #CECECE; }
.form-box.success{ margin: 20px auto; padding: 40px 120px 80px; }
.form-txt{ width: 460px; font-size: 2.0rem; line-height: 1.5em;  }
.success .form-txt{ width: auto; }
.form-txt h3{ font-size: 4.0rem; color: #980200; font-weight: normal; text-align: left; }
.form-txt .note{ font-size: 1.5rem; }
.form-box .color-red{ color: #980200; }
.form-list{ margin: 0; }
.form-list ul>li{ display: flex; align-items: center; font-size: 2.0rem; }
.form-list ul>li+li{ margin: 20px 0 0 0; }
.form-list label{ width: 130px; text-align: right; margin: 0 10px 0 0; }
.form-list input[type='text'],.form-list input[type='email']{ font-size: 2.0rem; width: 300px; height: 50px; background: #F2F2F2; box-sizing: border-box; padding: 5px 10px;}
.submitbtn{ justify-content: flex-end; }
.form-list input[type='submit']{ font-size: 2.0rem; color: #fff; width: auto; height: 35px; background: #980200; box-sizing: border-box; padding: 0 30px; cursor: pointer;  }
.form-list input[type='submit']:hover{ background: #bc0000;  }

/* sale */
.sale-container{  }
.sale-box{ width: 100%; max-width: 1260px; margin: -60px auto 100px; }
.sale-box>img{ width: 100%; }
/*.saletit{ width: auto; display: block; margin: 24px auto; }
.sale-container{ width: 100%; max-width: 1260px; margin: 0 auto; }
.sale-box{ display: flex; flex-wrap: wrap; justify-content: flex-start; }
.sale-box>li{ width: 290px; height: 410px; box-sizing: border-box; padding: 15px 15px 15px 15px; box-shadow: 1px 1px 10px #0000001A; margin: 0 calc( (100% - 290*4px)/8) calc( (100% - 290*4px)/4) calc( (100% - 290*4px)/8); }
.sale-box>li+li{  }
.sale-box>li h3{ font-size: 2.4rem; color: #000; font-weight: 400; margin: 10px 0 0 0; }
.sale-box>li h3:after{ content: ''; display: block; width: 100%; height: 1px; border-bottom: 1px solid #cecece; margin: 7px 0; }
.sale-box>li .price{ font-size: 1.7rem; color: #bfbfbf; text-decoration: line-through; }
.sale-box>li .saleprice{ font-size: 1.8rem; color: #000; text-align: right; }
.sale-box>li .hlight{ font-size: 3rem; color: #bc0000; font-weight: 600; }*/


/* pup */
.pup-container{ width:100vw; height: 100vh; background: rgba(0,0,0,.86); position: fixed; left: 0; top: 0; z-index: 9999;/*  display: none; */  }
.pup-box{ display: flex; flex-direction: column; align-items: center;  width: 380px; height: auto; background: rgba(255,255,255,1); font-size: 1.8rem; color: #333; line-height: 1.8em; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); box-sizing: border-box; padding: 30px 30px; }
.pup-img{ width: 80%; }
.pup-img img{ width: 100%; }
.btn_go{ width: 100%; height: 40px; line-height: 40px; text-align: center; font-size: 2rem; font-weight: 600; background: #bc0000; color: #fff; margin: 30px auto 20px; }
.btn_go:after{ content: '\e908'; }
.pup-note{ font-size: 1.4rem; line-height: 1.5em; }

.btn_close{ font-size: 3rem; color: #fff; position: absolute; right: -40px; top: -40px; }
.btn_close>a{ display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }

/* info list */
.info-list{  }
.info-list li{ display: flex; flex-shrink: 0; }
.info-list li span{ width: 90px; max-width: 90px; }

}





/* $1025~1320
--------------------------------------------------------------------------------------*/
@media screen and (min-width:1025px) and (max-width:1320px){

.area-box li h5{ font-size: 4rem; padding: 0px 5px 0 5%; }


}