@charset "utf-8";
@import url(//fonts.googleapis.com/css?family=Acme);

/* .mov-topimg
================================================== */
.mov-topimg {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 500px;
  overflow:hidden;
}

@media screen and (max-width: 810px) {
.mov-topimg {
  min-height: initial;
  height: 650px;
}
}

@media screen and (max-width: 568px) {
.mov-topimg {
  height: 350px;
}
}

.mov-topimg img {
  width:100%;
  height:auto;
}


#vdo {
  width: 100%;
  height: auto;
  margin:auto;
}

@media screen and (max-width: 810px) {
#vdo {
  width: 120%;
  margin:0 0 0 -10%;
}
}


@media screen and (max-width: 568px) {
#vdo {
  width: 140%;
  margin:0 0 0 -20%;
}
}

#video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width:100%;
  height:100%;
  z-index:1;
  display:block;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../images/topimg.jpg);
}

#player {
  width: 100%;
  height: auto;
  margin:-3.5% auto 0;
  transition: .5s;
}

@media screen and (max-width: 1900px) {
#player {
  margin:auto;
}
}

@media screen and (max-width: 810px) {
#player {
  width: 120%;
  margin:0 0 0 -10%;
}
}

@media screen and (max-width: 568px) {
#player {
  width: 140%;
  margin:0 0 0 -20%;
}
}

/* .sub-contents
================================================== */
.sub-contents {
  width: 100%;
  margin:0 auto 5%;
  padding:1% 2%;
  box-sizing: border-box;
}

@media screen and (max-width: 568px) {
.sub-contents {
  padding:0 2%;
}
}

/* .rental-top
================================================== */
.rental-top{
  width: 100%;
  box-sizing: border-box;
  padding:1.5% 2% 5%;
  text-align: center;
}

@media screen and (max-width: 818px) {
.rental-top{
  padding:3% 0 5%;
}
}

@media screen and (max-width: 568px) {
.rental-top{
  padding:5% 5% 10%;
  text-align: left;
}
}

.rental-top h2{
  font-family: 'Noto Sans TC', sans-serif;
  font-weight:400;
  font-size:1.2em;
  color:#6A6A36;
  line-height:1.8;
  letter-spacing: 0em;
}

@media screen and (max-width: 810px) {
.rental-top h2{
  font-size:1.1em;
}
}

@media screen and (max-width: 568px) {
.rental-top h2{
  font-size:1em;
  line-height:1.6;
}
}

@media screen and (max-width: 325px) {
.rental-top h2{
  font-size:1em;
  letter-spacing: 0em;
}
}

/* .sub-top
================================================== */
.sub-top {
  width: 100%;
  padding:0 0;
}


@media screen and (max-width: 568px) {
.sub-top {
  width: 100%;
}
}

.sub-title {
  width: 100%;
  text-align: center;
  margin:0 auto 1%;
}

.sub-title p{
  font-family: 'Arial Black','Arial-BoldMT', sans-serif;
  letter-spacing:.01em;
  font-weight:500;
  text-transform: uppercase;
  font-size:2em;
  line-height:1;
  color:#FFD900;
  margin-bottom:5px;
}

@media screen and (max-width: 568px) {
.sub-title p{
  font-size:1.5em;
  margin-bottom:3px;
}
}

.sub-title h3{
  color:#6A6A36;
  font-size:1.8em;
  font-family: 'Noto Sans TC', sans-serif;
  font-weight:500;
  letter-spacing: 0.05em;
  margin-bottom:12px;
}

@media screen and (max-width: 568px) {
.sub-title h3{
  font-size:1.45em;
  margin-bottom:5px;
}
}

.udln{
  border-bottom:1px solid #B5B5B5;
  height:1px;
  width:70px;
  margin: 0 auto;
}


@media screen and (max-width: 568px) {
.udln{
  margin: 0 auto 15px;
}
}

/* .car-lst
================================================== */
.car-lst {
  display:block;
  width: 100%;
  margin:0;
  text-align: center;
}

.car-lst li{
  width: 47%;
  margin:1.5%;
  display:inline-block;
  vertical-align: top;
  position: relative;
}

@media screen and (max-width: 810px) {
.car-lst li{
  width: 50%;
  margin:0;
  padding:5% 3% 3%;
}
}

@media screen and (max-width: 568px) {
.car-lst li{
  width: 100%;
  display:block;
  margin:0 0 5%;
  box-sizing: border-box;
  padding:2.5% 5% 5%;
}
}

.car-lst li img{
  width: 100%;
  height:auto;
  margin:0 auto 15px;
}

.car-lst li a:hover img {
  opacity: 0.7;
}

.ce-name{
  font-family: 'Arial Black','Arial-BoldMT', sans-serif;
  letter-spacing:.01em;
  font-weight:500;
  text-transform: uppercase;
  font-size:1.3em;
  line-height:1;
  color:#FFD900;
  margin-bottom:5px;
}

@media screen and (max-width: 810px) {
.ce-name{
  font-size:1.2em;
}
}

.cj-name{
  color:#6A6A36;
  font-size:1.4em;
  font-family: 'Noto Sans TC', sans-serif;
  font-weight:600;
  margin-bottom:3px;
}

@media only screen and  (max-width: 810px) {
.cj-name{
  font-size:1.3em;
}
}

@media only screen and  (max-width: 568px) {
.cj-name{
  font-size:1.1em;
}
}

.cj-prs{
  color:#6A6A36;
  font-size:1.05em;
  font-family: 'Noto Sans TC', sans-serif;
  font-weight:500;
  margin-bottom:10px;
}

.cex-tx{
  text-align: left;
  font-family: 'Noto Sans TC', sans-serif;
  font-weight:400;
  font-size:0.9em;
  color:#6A6A36;
  line-height:1.8;
  padding:0 5px;
}

@media only screen and  (max-width: 810px) {
.cex-tx{
  font-size:0.95em;
  padding:0;
}
}

.cex-tx a{
  color:#6A6A36;
  text-decoration: underline;
}

.cex-tx a:hover{
  color:#6A6A36;
  text-decoration: none;
}

.rental-btn-box {
  display:block;
  width: 100%;
  margin: 2% auto;
  text-align: left;
}

@media screen and (max-width: 810px) {
.rental-btn-box {
  box-sizing: border-box;
  padding:0 3%;
  margin: 2% auto 35px;
}
}

@media screen and (max-width: 568px) {
.rental-btn-box {
  padding:0 5%;
  margin: 0 auto 35px;
}
}
.rental-btn-box ul{
  margin-bottom:3%;
}

.rental-btn-box li{
  width: 48%;
  display:inline-block;
  vertical-align: middle;
  text-align: center;
  font-family: 'Noto Sans TC', sans-serif;
  font-weight:500;
  font-size:1.3em;
}

@media screen and (max-width: 810px) {
.rental-btn-box li{
  width: 100%;
  display:block;
  font-size:1.2em;
}
}

.rental-btn-box p{
  display:block;
  text-align: center;
  font-family: Roboto,sans-serif;
  font-weight:500;
  color:#6A6A36;
  font-size:1.3em;
  padding:5px 1%;
}

@media screen and (max-width: 810px) {
.rental-btn-box p{
  font-size:1.2em;
}
}

.rental-btn-box p a{color:#C93710;text-decoration:underline!important;}
.rental-btn-box p a:hover{color:#C93710!important;text-decoration:none!important;}

.rental-btn-box .rgt2{
  margin-right:2%;
}

.rental-btn-box .lft2{
  margin-left:2%;
}

@media screen and (max-width: 810px) {
.rental-btn-box .rgt2{
  margin-right:0%;
  margin-bottom:20px;
}

.rental-btn-box .lft2{
  margin-left:0%;
}
}

.rental-btn-box .rgt2 a{color:#6A6A36;display:block;padding:10px 20px 12px;background-color:#F4F4CC;text-decoration:none;}
.rental-btn-box .rgt2 a:hover{color:#6A6A36;text-decoration:none;background-color:#D9D99C;}

.rental-btn-box .lft2 a{color:#FFF;display:block;padding:10px 20px 12px;background-color:#C93710;text-decoration:none;}
.rental-btn-box .lft2 a:hover{color:#FFF;text-decoration:none;background-color:#8D2206;}


/* .special-lst
================================================== */
.special-lst {
  display:block;
  width: 100%;
  margin:0;
  text-align: center;
}

.special-lst li{
  width: 30.3333%;
  margin:1.5%;
  display:inline-block;
  vertical-align: top;
  position: relative;
}

@media screen and (max-width: 810px) {
.special-lst li{
  width: 50%;
  margin:0;
  padding:5% 3% 3%;
}
}

@media screen and (max-width: 568px) {
.special-lst li{
  width: 100%;
  display:block;
  margin:0 0 5%;
  box-sizing: border-box;
  padding:2.5% 5%;
}
}

.special-lst li img{
  width: 100%;
  height:auto;
  margin:0 auto 15px;
}

.special-lst li a:hover img {
  opacity: 0.7;
}

.spen-name{
  font-family: 'Arial Black','Arial-BoldMT', sans-serif;
  letter-spacing:.01em;
  font-weight:500;
  text-transform: uppercase;
  font-size:1.2em;
  line-height:1;
  color:#FFD900;
  margin-bottom:5px;
}

@media screen and (max-width: 810px) {
.spen-name{
  font-size:1.2em;
}
}

.spej-name{
  color:#6A6A36;
  font-size:1.15em;
  font-family: 'Noto Sans TC', sans-serif;
  font-weight:600;
  margin-bottom:3px;
}

.spej-namew{
  color:#FFF;
  font-size:1.15em;
  font-family: 'Noto Sans TC', sans-serif;
  font-weight:600;
  margin-bottom:3px;
}

/* movie-box
================================================== */
.movie-box{
  margin:4% auto 0;
  width:100%;
  max-width:1000px;
  text-align: center;
}

.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.youtube iframe {
  width: 100%;
  height: 100%;
}

/* panf-bx
================================================== */
.panf-bx{
  margin:2% auto 4%;
  width:100%;
  max-width:250px;
  text-align: center;
  position: relative;
  padding:10px 0 8px;
  background: #6A6A36;
}

@media screen and (max-width: 568px) {
.panf-bx{
  margin:2% auto 8%;
}
}

.panf-bx a{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-indent: 100%;
  display:block;
}

.panf-bx a:hover {
  background-color: #fff;
   opacity: 0.3;
}

.panf-bx p {
  display: inline-block;
  vertical-align: middle;
  padding:0 7px;
}

/* cation-box
================================================== */
.cation-box {
  display:block;
  width: 100%;
  margin: 2% auto 4%;
  text-align: left;
  box-sizing: border-box;
  padding:2% 3%;
}

@media screen and (max-width: 810px) {
.cation-box {
  box-sizing: border-box;
  padding:3% 4%;
  width: 94%;
  margin: 0 auto 5%;
}
}

@media screen and (max-width: 568px) {
.cation-box {
  width: 90%;
}
}

.cation-box p{
  display:block;
  text-align: center;
  font-family: Roboto,sans-serif;
  font-weight:500;
  color:#6A6A36;
  font-size:1.3em;
  padding:5px 1%;
}

@media screen and (max-width: 810px) {
.cation-box p{
  font-size:1.2em;
}
}

.cation-box p a{color:#C93710;text-decoration:underline!important;}
.cation-box p a:hover{color:#C93710!important;text-decoration:none!important;}

.bckf {
  animation: bckfAnime 1.5s infinite alternate;
}
@keyframes bckfAnime{
   0% { background-color:#F7EBD1; }
 100% { background-color:#F7EBD1; }
}