/* ================================================
Global Styles
================================================ */

@import 'reset.css';
@import 'aos.css';
@import 'freelancer.css';
@import url('https://fonts.googleapis.com/css?family=Playfair+Display');
@import url('https://fonts.googleapis.com/css?family=Oswald:300,400,700');

*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


a,
a:hover {
text-decoration: none;
 outline: none; /* for Firefox */
behavior:expression(this.onFocus=this.blur()); /* for IE */
}

body, html {
    height: 100%;/*大背景一定要設高度100%*/
    padding: 0;
    margin: 0;
    font-size: 15px;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
     background-color:#000;
}
.clear{ clear:both} 
a, a:active, a:visited, li a:visited {text-decoration: none;}
.img-responsive{width: 100%;}
.eng{font-family: 'Oswald', sans-serif;}
.mob{display: none;}
.pc{display: block;}

section.no-fluid{padding: 0 0 120px 0;}
.wording{color: #fff;margin-top: 50px;}
.wording h5{font-size: 18px;font-weight: bold;line-height: 32px;}
.wording p{font-size: 16px;line-height: 32px;color: #fff;text-align: justify;padding: 15px 0;}

#ttlHEAD{padding: 120px 0 0 0;}
a.butn{text-align: center;border: 2px solid #fff; color: #fff; display: block; font-size: 16px; line-height: 50px; width: 210px; height: 50px;font-weight: bold;margin: 20px auto;}
a.butn_b{text-align: center;border: 2px solid #fff; color: #fff; display: block; font-size: 16px; line-height: 50px; width: 280px; height: 50px;font-weight: bold;margin: 20px auto;}
a.butn:hover, a.butn_b:hover{background-color: rgba(255,255,255,1); color: #000;}
a.butn_d{text-align: center;border: 2px solid #000; color: #000; display: block; font-size: 13px; line-height: 36px; width:150px; height: 40px;margin: 20px auto;font-family: 'Oswald';}
a.butn_d:hover{background-color: rgba(0,0,0,1); color: #fff;}
a.butn_d2{text-align: center; background-color: rgba(0,0,0,1);color: #FFF; display: block; font-size: 13px; line-height: 36px; width:150px; height: 40px;margin: 20px auto;font-family: 'Oswald';}
a.butn_d2:hover{background-color: rgba(0,0,0,0);border: 2px solid #000;color: #000;}
.clbtn{border-radius: 0;padding: 10px 40px;color: #000; border:1px solid #000;width: 180px;margin:15px 0;}
.fwb{font-weight: bold;}
.big{font-size: 18px; font-weight: bold;}
ul.hori_list li {display: inline-block;}


/* ============= share ================= */
.share {
    position: relative;
}
.share-button, .share-toggle-button {
    position: absolute;
    display: inline-block;
    right: 30px;
    top: 35px;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    line-height: 28px;
    margin-left: -25px;
    margin-top: -25px;
    background: #fff;
    text-align: center;
    color: #000;
    border: none;
    outline: none;
}
.share-button:hover, .share-toggle-button:hover {
    color: #000;
}
.share-button {
    font-size: 1.8em;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    color: #000;
    line-height: 36px;
}
a.share-button {
    color: #000;
}
a.share-button:hover, a.share-button:focus {
    color: #000;
}
.share-toggle-button {
    z-index: 9;
     color: #000;
    font-size: 20px;
}
.share-items {
    list-style-type: none;
    padding: 0;
    margin: 0;

}
.share-item {
    display: inline-block;
}
.share-item .share-button{
    background: none;
    color: #fff;
    border: solid 1px #fff;
}
.share-item .share-button:hover{
     color: #fff;
}
.share-item .share-button .fab{
    font-size: 0.75em;
}
.share-item .share-button .fas{
    font-size: 0.75em;
}


@media screen and (max-width: 590px) {
   .share-button, .share-toggle-button {
    right: 10px;
    top: 35px;} 
}
/*====================== MENU ======================*/

header{width: 100%;position: fixed; z-index: 99;}
.menu-wrap {
    background-color:rgba(0,0,0,.9);
    position: fixed;
    top: 0;
    height: 100%;
    width: 250px;
    margin-left: -280px;
    overflow: auto;
    font-weight: bold;
    transition: .25s;
    z-index: 10;
}
.menu-show {
    margin-left: 0;
}
.menu-sidebar {
    margin: 75px 0 80px 10px;
    position: relative;
    top: 70px;
}
.menu-sidebar li {
    padding: 25px 22px 0;
    line-height: 30px;
}
.menu-sidebar li > a {
    color: #f3f3f3;
    font-size: 16px;
    position: relative;
}

.menu-sidebar li > a::after {
    content: "";
    display: block;
    height: 3px;
    position: absolute;
    top: 100%;
    width: 100%;
    left: 50%;
    transform: translate(-50%);
    background-image: linear-gradient(to right, transparent 50.3%, #770010 50.3%);
    transition: background-position .2s .1s ease-out;
    background-size: 200% auto;
}
.menu-sidebar li > a:hover::after {
    background-position: -100% 0;
}
.menu-sidebar .menu-item-has-children {
    position: relative;
}
.menu-sidebar .menu-item-has-children .sub-menu {
    display: none;
}
.sidebar-menu-arrow::after {
    content: "\f107";
    font-family: 'FontAwesome';
    padding: 10px;
    color: #FFFA3B;
    position: relative;
}
.sidebar-menu-arrow:hover::after {
    cursor: pointer;
    color: #fff;
}
.sidebar-menu-arrow:active::after {
    top: 2px;
}


/*Hamburger Button*/
header h1 a{display:block;width: 160px;height: 53px;background:url('../images/header_h1.png');font-size: 0;position: fixed; top: 8px; left: 85px;}
.toggle-button {
    position: fixed;
    width: 44px;
    height: 40px;
    top: 20px;
    left: 30px;
    padding: 4px;
    transition: .25s;
    z-index: 15;
}

.toggle-button:hover {
    cursor: pointer;
}
.toggle-button .menu-bar {
    position: absolute;
    border-radius: 2px;
    width: 80%;
    transition: .5s;
}
.toggle-button .menu-bar-top {
    border: 2px solid #fff;
    border-bottom: none;
    top: 0;
}
.toggle-button .menu-bar-middle {
    height: 2px;
    background-color: #fff;
    margin-top: 7px;
    margin-bottom: 7px;
    top: 4px;
}
.toggle-button .menu-bar-bottom {
    border: 2px solid #fff;
    border-top: none;
    top: 22px;
}
.button-open {
    left: 25px;
}
.button-open .menu-bar-top {
    border-color: #fff;
    transform: rotate(45deg) translate(8px, 8px);
    transition: .5s;
}
.button-open .menu-bar-middle {
    background-color: #fff;
    transform: translate(230px);
    transition: .1s ease-in;
    opacity: 0;
}
.button-open .menu-bar-bottom {
    border-color: #fff;
    transform: rotate(-45deg) translate(7px, -7px);
    transition: .5s;
}

@media screen and (max-width: 790px) {

header{ width:100%; height:65px;background-color:rgba(0,0,0,.3);}

}


@media screen and (max-width: 590px) {
.menu-sidebar {
    margin: 35px 0 80px 10px;
    position: relative;
    top: 50px;
}
.menu-sidebar li {
    padding: 20px 22px 0;
    line-height: 28px;
}
.menu-sidebar li > a {
    color: #f3f3f3;
    font-size: 15px;
    position: relative;
}

header h1 a{display:block;top: 15px; left: 65px;width: 100px;height: 33px;background-size: cover;}

.toggle-button {
    top: 20px;
    left: 10px;
}

}


/*==================== KV ==========================*/
#KV{height: 100vh; width: 100%; position: relative; background:url('../images/kv_bg.jpg') center center; -webkit-background-size: cover; background-size: cover;overflow: hidden;}
#KV .left_curtain{-webkit-background-size: cover; background-size: cover;height: 100%;width: 430px;background:url('../images/curtain_left.png') center center;position: absolute;top:0;left:-220px;-webkit-animation: fadeInLeft 3s 1s;-o-animation: fadeInLeft 3s 1s; animation: fadeInLeft 3s 1s;}
#KV .right_curtain{-webkit-background-size: cover; background-size: cover;height: 100%;width: 430px;background:url('../images/curtain_right.png') center center;position: absolute;top:0;right:-220px;-webkit-animation: fadeInRight 3s 1s;-o-animation: fadeInRight 3s 1s; animation: fadeInRight 3s 1s;}
#KV .main_kv{padding: 15% 0;}
#KV .main_kv h1{width: 776px;height: 157px;background:url('../images/kv_h1.png'); font-size: 0;text-align: center;
position: relative;margin: 0 auto}
#KV .main_kv h1 .lfwheel{width: 120px;height: 120px;background:url('../images/left_wheel.png') center center;-webkit-background-size: cover; background-size:cover;position: absolute;left: 35%;top:-70%;-webkit-animation: spin 10s infinite;-o-animation: spin 10s infinite; animation: spin 10s infinite;}
#KV .main_kv h1 .rtwheel{width: 100px;height: 100px;background:url('../images/right_wheel.png') center center;-webkit-background-size: cover; background-size:cover;position: absolute;right:35%; top:-60%;-webkit-animation: spin 15s infinite;-o-animation: spin2 15s infinite; animation: spin2 10s infinite;}
#KV .main_kv h2{width: 551px;height: 101px;background:url('../images/kv_h2.png'); font-size: 0;margin: 0 auto;}
/*#KV .main_kv h3{width: 551px;height: 70px;background:url('../images/kv_h3.png'); font-size: 0;margin: 0 auto;}*/
#KV .main_kv h3.m03{width: 551px;height: 70px;background:url('../images/kv_h3_03.png'); font-size: 0;margin: 0 auto;}
#KV .ani{animation: floating 1s infinite;position: absolute;bottom: 2%;left: 50%;margin-left: -29px;}
#KV .ani a.arrow{display: block; width: 59px;height: 51px;background:url('../images/kv_arrow.png');font-size: 0;}

#KV .kv_menu{padding-top: 20px;width: 420px;margin: 0 auto;}
#KV .kv_menu li{margin-right: -4px;text-align: center; }
#KV .kv_menu li a {border: 2px solid #fff; color: #fff; display: block; font-size: 16px; line-height: 60px; width: 210px; height: 60px;font-weight: bold;} 
#KV .kv_menu li:hover a {background-color: rgba(191,30,46,.90);}
#KV .kv_menu li:nth-child(1) a {border-right: none;}
#KV .kv_menu li:nth-child(3) a {border-left: none;}
#KV .kv_menu li:hover a {background-color: rgba(255,255,255,1); color: #000;}
#KV .kv_menu li:nth-child(2):hover a .show, .cta-menu li:nth-child(3):hover a .show {display: none}
#KV .kv_menu li:nth-child(2):hover a .hide, .cta-menu li:nth-child(3):hover a .hide {display: inline;}


@media screen and (max-width: 1149px) {
#KV .left_curtain{left:-300px;}
#KV .right_curtain{right:-300px;}
}

@media screen and (max-width: 991px) { 
#KV .main_kv{padding: 25% 0;}
#KV .left_curtain{left:-350px;}
#KV .right_curtain{right:-350px;}
} 
@media screen and (max-width: 790px) {  
#KV .main_kv{padding: 28% 0;}
#KV{background:url('../images/kv_bg.jpg') bottom center; -webkit-background-size: 1700px auto; background-size:1700px auto;}
#KV .main_kv h1{width: 550px;height: 111px;background:url('../images/kv_h1m.png'); margin: 0 auto;-webkit-background-size: cover; background-size:cover;}
#KV .main_kv h1 .lfwheel{width: 100px;height: 100px;left: 30%;top:-85%;}
#KV .main_kv h1 .rtwheel{width: 80px;height: 80px;right:35%; top:-70%;}
#KV .main_kv h2{width: 450px;height: 82px; margin: 0 auto;-webkit-background-size: cover; background-size:cover;}
#KV .main_kv h3.m03{width:  450px;height: 57px; margin: 0 auto;-webkit-background-size: cover; background-size:cover;}
#KV .main_kv h3.m02{width:  450px;height: 57px; margin: 0 auto;-webkit-background-size: cover; background-size:cover;}
}

@media screen and (max-width: 590px) {
#KV .main_kv{padding: 45% 0;}
#KV .main_kv h1{width: 420px;height: 103px;margin: 0 auto;background:url('../images/kv_h1m.png');-webkit-background-size: cover; background-size:cover;}
#KV .main_kv h1 .lfwheel{width: 80px;height: 80px;left: 30%;top:-90%;}
#KV .main_kv h1 .rtwheel{width: 60px;height: 60px;right:35%; top:-70%;}
#KV .main_kv h2{width: 300px;height: 55px; margin: 0 auto;}
#KV .main_kv h3{width:  300px;height: 38px; margin: 0 auto;}
#KV .main_kv h3.m03{width:  300px;height: 38px; margin: 0 auto;}
#KV .kv_menu{padding-top: 40px;width: 340px;margin: 0 auto;}
#KV .kv_menu li a {border: 2px solid #fff; color: #fff; display: block; font-size: 15px; line-height: 60px; width: 170px; height: 60px;font-weight: bold;} 
}

@media screen and (max-width: 414px) {
#KV .kv_menu{padding-top: 40px;width: 300px;margin: 0 auto;}
#KV .kv_menu li a {border: 2px solid #fff; color: #fff; display: block; font-size: 15px; line-height: 60px; width: 150px; height: 60px;font-weight: bold;} 
#KV .main_kv{padding: 45% 0;}
#KV .main_kv h1{width: 310px;height: 76px;margin: 0 auto;-webkit-background-size: cover; background-size:cover;}
#KV .main_kv h1 .lfwheel{width: 60px;height: 60px;left: 30%;top:-80%;}
#KV .main_kv h1 .rtwheel{width: 40px;height: 40px;right:37%; top:-50%;}
}

/*==================== 關於 ==========================*/
#ABOUT{min-height:788px; overflow: hidden;background-color: #000;}
#ABOUT .LFblock{background-color: #111;min-height:788px;}
#ABOUT .LFblock .img_up, #ABOUT .LFblock .img_bottom {height: 394px}
#ABOUT .LFblock .img_up div, #ABOUT .LFblock .img_bottom div{display: inline-block;margin-right: -4px;height: 394px;}
#ABOUT .LFblock .img_up .lf{width: 60%;background:url('../images/img_up_lf.jpg')center center;background-size: cover;}
#ABOUT .LFblock .img_up .rt{width: 39.99999%;background:url('../images/img_up_rt.jpg')center center;background-size: cover;}
#ABOUT .LFblock .img_bottom div{width: 33.333333%;}
#ABOUT .LFblock .img_bottom .lf{background:url('../images/img_bottom_lf.jpg')center center;background-size: cover;}
#ABOUT .LFblock .img_bottom .mid{background:url('../images/img_bottom_mid.jpg')center center;background-size: cover;}
#ABOUT .LFblock .img_bottom .rt{background:url('../images/img_bottom_rt.jpg')center center;background-size: cover;}


#ABOUT .RTblock{padding:0 5%;background-color: #000;min-height:788px;background:url('../images/about_bg.jpg')center center;background-size: cover;}
#ABOUT #ttlHEAD h4{width: 379px;height: 150px;background:url('../images/about_ttl.png');font-size: 0;margin: 0 auto;}

@media screen and (max-width:1149px) { 

}

@media screen and (max-width: 790px) {
#ABOUT .RTblock{background-size: 800px auto;}
}

@media screen and (max-width: 590px) {
#ABOUT .RTblock{height:auto; padding:0 0 15% 0;} 
#ABOUT .RTblock .wording{padding: 0 5%;}
#ABOUT #ttlHEAD h4{width: 300px;height: 119px;margin: 0 auto;background-size: cover;}

}








/*==================== 本月放映資訊==========================*/
#MONTH{background: #10141f;}
#MONTH #ttlHEAD h4{width: 379px;height: 150px;background:url('../images/months_ttl.png');font-size: 0;margin: 0 auto;}
#MONTH .monthbox{border: 2px solid #fff;padding: 60px 0;}
#MONTH .monthbox2{border: 2px solid #fff;padding: 0;}

/*本月放映*/
#MONTH .thismonth {margin-top: 50px;}
#MONTH .thismonth .RTblock {border-left: 2px solid #fff;color: #fff;font-size: 16px;line-height: 32px;}
#MONTH .thismonth .RTblock .topbox{padding:5% 3% 0 3%;}
#MONTH .thismonth .RTblock .btbox{padding:2% 3%;}
#MONTH .thismonth .RTblock ul.keyword {border: 2px solid #fff;height: 43px;}
#MONTH .thismonth .RTblock ul.keyword li{float: left;}
#MONTH .thismonth .RTblock ul.keyword li.ttl{width: 197px;height: 41px;background:url('../images/month_thismonth_ttl.jpg');text-indent: -99999px;}
#MONTH .thismonth .RTblock ul.keyword li.search{position:relative;padding: 0;border-left: none;margin-left:-4px; height: 41px;line-height: 41px;padding-left: 50px;color: #fff; font-weight: bold;}
#MONTH .thismonth .RTblock ul.keyword li.search:before {font-family: FontAwesome; content: "\f002";position: absolute;left: 20px;top:-5%;}
#MONTH .thismonth .RTblock .midbox ul{border-top:1px solid #666970;border-bottom:1px solid #666970; }
#MONTH .thismonth .RTblock .midbox ul li{display: inline-block;padding: 20px;margin-left: 20px}
#MONTH .thismonth .RTblock .midbox ul li.calender{padding-left: 75px;background:url('../images/icon_ca.jpg') 0px 20px no-repeat;}
#MONTH .thismonth .RTblock .midbox ul li.location{padding-left: 75px;background:url('../images/icon_map.jpg') 0px 20px no-repeat;}
#MONTH .thismonth .RTblock .midbox ul li:nth-child(2){border-left:1px solid #666970;}
#MONTH .thismonth .RTblock .left, #MONTH .thismonth .RTblock .right {float: left;}
#MONTH .thismonth .RTblock .left{width: 55%;}
#MONTH .thismonth .RTblock .right{width: 45%;}
#MONTH .thismonth .RTblock a.ticket{display: block;width: 530px;height: 118px;background:url('../images/ticket.gif');font-size: 0;margin: 10px auto;}
#MONTH .thismonth .RTblock a.figi{display: block; width: 150px; height: 30px;line-height: 30px; font-size: 13px; color: #fff; text-align: center;margin: 20px auto; border: 1px solid #fff;}



/*電影1+1*/
#MONTH .onefree .LFblock{padding: 0 8%;}
#MONTH .onefree h4{width: 326px;height:70px;background:url('../images/month_onefree_ttl.png');font-size: 0;margin: 0 auto;}
#MONTH .onefree .film .RTblock{color: #fff;margin-top: 30px;}
#MONTH .onefree .film .RTblock h3{font-size: 25px;font-weight: bold;line-height:60px;font-weight: normal;}
#MONTH .onefree .film .RTblock h5{font-size: 18px;font-weight: bold;line-height: 32px;}
#MONTH .onefree .film .RTblock p{font-size: 16px;line-height: 32px;color: #fff;text-align: justify;padding: 10px 10% 10px 0 ;}
#MONTH .onefree .film .RTblock ul li{font-size: 14px;line-height: 22px;color: #999;}
#MONTH .onefree .film .RTblock .sampleBox { position:relative; border:1px solid #fff; margin:30px 0; margin-right: 10%;}
#MONTH .onefree .film .RTblock .sampleBox > h6 {   position:absolute; top:-17px; left:10px; width:150px;padding: 5px 5px; border-radius:20px; border:1px solid #FFF; background-color:#10141f; color:#fff; text-align:center;font-size: 16px; }
#MONTH .onefree .film .RTblock .sampleBox {padding: 10px 0 0 10px ;}


/*FRIDAY影音*/
#MONTH .friday .wording{margin-top: 20px;}
#MONTH .friday .wording, #MONTH .friday .wording p {text-align: center;}
#MONTH .friday h4{width: 326px;height: 102px;background:url('../images/month_firday_ttl.png');font-size: 0;margin: 0 auto;}
#MONTH .friday h6{width: 100%;height: 42px;background:url('../images/month_firday_m01h6.png') center center no-repeat;font-size: 0;border-top:1px solid #fff;border-bottom:1px solid #fff;margin: 20px 0;  }
#MONTH .friday h6.mon2{width: 100%;height: 42px;background:url('../images/month_firday_m02h6.png') center center no-repeat;font-size: 0;border-top:1px solid #fff;border-bottom:1px solid #fff;margin: 20px 0;  }
#MONTH .friday .three{padding: 0 2%;margin-top: 50px;}
#MONTH .friday .owl-carousel .item {padding: 0 5%;}
#MONTH .friday .owl-carousel .item img{width: 100%;}
#MONTH .friday  a.butn_b{margin: 50px auto 0 auto;}

@media screen and (max-width: 1149px) {
   #MONTH .thismonth .LFblock img {display: block; margin-top: 50px;}
    #MONTH .thismonth .RTblock .midbox ul li:nth-child(2){border-left:none;}
}

@media screen and (max-width: 990px) {
    #MONTH .thismonth .LFblock img {display: block; margin-top: 0px;border-bottom: 2px solid #fff;}
    #MONTH .onefree .LFblock{padding: 5% 8%;}
    #MONTH .onefree .film .RTblock .sampleBox { margin-left: 5%;}
    #MONTH .onefree .film .RTblock h3, #MONTH .onefree .film .RTblock h5, #MONTH .onefree .film .RTblock ul li{padding: 0 5%;}
    #MONTH .onefree .film .RTblock p{text-align: justify;padding: 15px 5% 15px 5% ;}

}

@media screen and (max-width: 790px) {
    #MONTH{padding: 0 20px;}
    #MONTH .onefree .LFblock{padding: 5% 15%;}
    #MONTH .onefree .film .RTblock h3, #MONTH .onefree .film .RTblock h5, #MONTH .onefree .film .RTblock ul li{padding: 0 5%;}
    #MONTH .onefree .film .RTblock p{text-align: justify;padding: 15px 5% 15px 5% ;}
    #MONTH .friday .wording, #MONTH .friday .wording p {text-align: left;}
    #MONTH .friday h5,#MONTH .friday p{padding: 0 20px;}
    #MONTH .thismonth .RTblock .btbox{padding:2% 5%;}
    #MONTH .thismonth .RTblock a.ticket{display: block;width: 430px;height: 96px;margin: 10px auto;background-size: cover;}
#MONTH .thismonth .RTblock .left{width:100%;}
#MONTH .thismonth .RTblock .right{display: none;}
#MONTH .onefree .LFblock img{padding: 0 22%;}
}


@media screen and (max-width: 590px) {
   #MONTH {padding: 0 0px;} 
   #MONTH .thismonth .RTblock {border-left: none;}
   #MONTH .thismonth .LFblock img {display: block; margin-top: 0px;border-top: 2px solid #fff;border-bottom: 2px solid #fff;}
   #MONTH .monthbox, #MONTH .monthbox2{border:none;}
   #MONTH #ttlHEAD h4{width: 300px;height: 119px;margin: 0 auto;background-size: cover;}
   #MONTH .onefree .LFblock{padding: 5% 8%;}
   #MONTH .onefree h4{width:260px;height:55px;background-size: cover;}
   #MONTH .friday h4{width:260px;height:81px;background-size: cover;} 
   #MONTH .friday .wording, #MONTH .friday .wording p {text-align: left;}
   #MONTH .thismonth .RTblock a.ticket{display: block;width: 300px;height: 75px;background:url('../images/ticket_m.gif');font-size: 0;margin: 20px auto;}
   #MONTH .thismonth .RTblock ul.keyword {border:none;}
   #MONTH .thismonth .RTblock ul.keyword li{float: none;}
   #MONTH .thismonth .RTblock ul.keyword li.ttl{width:150px;height:31px;background-size: cover;margin:0 auto;}
   #MONTH .thismonth .RTblock ul.keyword li.search{text-align: center;padding-left: 0;}
   #MONTH .thismonth .RTblock ul.keyword li.search:before {display: none;}
#MONTH .thismonth .RTblock .left, #MONTH .thismonth .RTblock .right {float: none;}
#MONTH .thismonth .RTblock .left{width:100%;}
#MONTH .thismonth .RTblock .right{width: 100%;}
#MONTH .onefree .LFblock img{padding: 0 12%;}
}

@media screen and (max-width: 414px) {
#MONTH .monthbox{border:none;}
   #MONTH .thismonth .RTblock a.ticket{display: block;width: 300px;height: 75px;background:url('../images/ticket_m.gif');font-size: 0;margin: 20px auto;}
}

/*==================== 玩美點點名 ======================*/

#MEMBER{background: #180d16;}
#MEMBER #ttlHEAD h4{width: 379px;height: 150px;background:url('../images/member_ttl.png');font-size: 0;margin: 0 auto;}
#MEMBER .wording p, #MEMBER .wording h5{text-align: center;}
#MEMBER .owl-carousel .item {padding: 0 5%;}
#MEMBER .owl-carousel .item img{width: 100%;}
#MEMBER .owl-carousel .caption{text-align: center; font-size: 15px;line-height: 28px;padding: 20px 0;color: #fff;}


@media screen and (max-width: 590px) {
#MEMBER #ttlHEAD  h4{width: 300px;height: 119px;margin: 0 auto;background-size: cover;}

}



/*==================== 歷史片單 ======================*/
#HISTORY{min-height:1036px;background:url('../images/histroy_bg.jpg') center center; -webkit-background-size: cover; background-size: cover;overflow: hidden;}
#HISTORY #ttlHEAD h4{width: 379px;height: 150px;background:url('../images/history_ttl.png')center center;font-size: 0;margin: 0 auto;}
#HISTORY .owl-carousel{color: #fff; margin-top: 40px;}
#HISTORY .owl-carousel h5{font-size: 25px;line-height: 50px;padding: 15px 0;}
#HISTORY .owl-carousel p{font-size: 16px;line-height: 32px;padding-right: 8%;text-align: justify;}
#HISTORY .owl-carousel .film .LFblock img{padding:5% 20% 0 15% ;}
#HISTORY .owl-carousel .film .RTblock{padding:5% 0;}
#HISTORY img.mttl {padding: 0 25%;}


@media screen and (max-width: 991px) {
#HISTORY{height:auto;background:url('../images/histroy_bg_m.jpg') top center no-repeat #000;-webkit-background-size: 1000px auto; background-size: 1000px auto;}
#HISTORY .owl-carousel .film .LFblock img{padding:5% 30% 0 30%;}
#HISTORY .owl-carousel p{padding-right: 0%;}

}
@media screen and (max-width: 790px) {
#HISTORY .owl-carousel .film .LFblock img{padding:5% 30% 0 30%;}
}

@media screen and (max-width: 590px) {
#HISTORY .owl-carousel .film .LFblock img{padding:5% 20% 0 20%;}
#HISTORY #ttlHEAD h4{width: 300px;height: 119px;margin: 0 auto;background-size: cover;}
#HISTORY img.mttl {padding: 0 15%;}
#HISTORY .owl-carousel h5{font-size: 22px;line-height: 35px;padding: 15px 0;}
}

/*==================== 精選觀影心得 =======================*/
#REVIEWS{min-height:710px; overflow: hidden;background-color: #000;}
#REVIEWS #ttlHEAD h4{width: 379px;height: 150px;background:url('../images/reviews_ttl.png')center center;font-size: 0;margin: 0 auto;}
#REVIEWS .LFblock{min-height:710px;background-color:#201b15;padding:0 5% 120px 5%;}
#REVIEWS .LFblock img{padding: 20px 2% 40px 2%;}
#REVIEWS .LFblock ul{padding-top: 20px;width: 430px;margin: 0 auto;}
#REVIEWS .LFblock li{display: inline-block;}
#REVIEWS .RTblock{min-height:710px;background:url('../images/review_bg.jpg')center center;-webkit-background-size: cover;background-size: cover;}


@media screen and (max-width: 1143px) {
 #REVIEWS .RTblock{height:830px;-webkit-background-size: cover;background-size: cover;}
 #REVIEWS .LFblock {height:830px;background-color:#201b15;padding:0 3% 120px 3%;}
 #REVIEWS .LFblock ul{padding-top: 20px;width: 200px;margin: 0 auto;} 
 #REVIEWS .LFblock li{display: inline-block;padding: 0 0;width: 100px; margin: 0 auto;} 
}

@media screen and (max-width: 990px) {
 #REVIEWS .RTblock{height:830px;-webkit-background-size: cover;background-size: cover;}
 #REVIEWS .LFblock{height: auto;}
 #REVIEWS .LFblock .mob{display: block;}
 #REVIEWS .LFblock ul{padding-top: 20px;width: 430px;margin: 0 auto;} 
 #REVIEWS .LFblock li{display: inline-block;padding: 0 0;width: 210px; margin: 0 auto;} 

}

@media screen and (max-width: 790px) {
   #REVIEWS .LFblock ul{padding-top: 20px;width: 100%;margin: 0 auto;} 
   #REVIEWS .LFblock li{display: table;padding: 0 0;width: 210px; margin: 0 auto;} 

}

@media screen and (max-width: 590px) {
   #REVIEWS #ttlHEAD h4{width: 300px;height: 119px;margin: 0 auto;background-size: cover;}
}




/*---------------------signup_fix---------------------*/
.signup_fix { position:fixed; bottom:0px; left:0; z-index:70; width:100%; padding: 10px 0; background-color: rgba(255,255,255,0.1); }
.signup_fix a { display:block; margin:auto; width:400px; padding:10px 0; border:1px solid #ad892d; background-color: #ad892d;  color:#FFF; text-align:center; font-size:16px; letter-spacing: 1px;border-radius: 10em;}
.signup_fix a:hover { background-color:#FFF; color:#ad892d;}
.signup_fix a:focus{text-decoration: none;}

@media screen and (max-width: 790px) {
.signup_fix { position:fixed; bottom:-100px;  padding: 0px 0; background-color: rgba(255,255,255,0.5); }
.signup_fix a { display:block; margin:auto; width:100%;padding:15px 0; border:1px solid #ad892d; border-radius: 0em;}
}






/*==================== 心得子頁面 =======================*/
#HEADER{min-height:588px;width: 100%; position: relative; background:url('../images/header_bg.jpg') center center; -webkit-background-size: cover; background-size: cover;overflow: hidden;}
#HEADER .main_kv{padding: 8% 0 0 0;}
#HEADER .main_kv h1{width: 776px;height: 157px;background:url('../images/kv_h1.png'); font-size: 0;text-align: center;
position: relative;margin: 0 auto}
#HEADER .main_kv h1 .lfwheel{width: 120px;height: 120px;background:url('../images/left_wheel.png') center center;-webkit-background-size: cover; background-size:cover;position: absolute;left: 35%;top:-70%;-webkit-animation: spin 10s infinite;-o-animation: spin 10s infinite; animation: spin 10s infinite;}
#HEADER .main_kv h1 .rtwheel{width: 100px;height: 100px;background:url('../images/right_wheel.png') center center;-webkit-background-size: cover; background-size:cover;position: absolute;right:35%; top:-60%;-webkit-animation: spin 15s infinite;-o-animation: spin2 15s infinite; animation: spin2 10s infinite;}
#HEADER .main_kv h2{width: 551px;height: 101px;background:url('../images/kv_h2.png'); font-size: 0;margin: 0 auto;}
#HEADER .main_kv h3{width: 551px;height: 70px;background:url('../images/kv_h3.png'); font-size: 0;margin: 0 auto;}

#HEADER .kv_menu{padding-top: 20px;width: 420px;margin: 0 auto;}
#HEADER .kv_menu li{margin-right: -4px;text-align: center; }
#HEADER .kv_menu li a {border: 2px solid #fff; color: #fff; display: block; font-size: 16px; line-height: 60px; width: 210px; height: 60px;font-weight: bold;} 
#HEADER .kv_menu li:hover a {background-color: rgba(191,30,46,.90);}
#HEADER .kv_menu li:nth-child(1) a {border-right: none;}
#HEADER .kv_menu li:nth-child(3) a {border-left: none;}
#HEADER .kv_menu li:hover a {background-color: rgba(255,255,255,1); color: #000;}
#HEADER .kv_menu li:nth-child(2):hover a .show, .cta-menu li:nth-child(3):hover a .show {display: none}
#HEADER .kv_menu li:nth-child(2):hover a .hide, .cta-menu li:nth-child(3):hover a .hide {display: inline;}

#REVIEWS_ALL{ overflow: hidden;background-color: #000;background:url('../images/review_all_bg.jpg') top center fixed; -webkit-background-size: cover; background-size: cover;}
#REVIEWS_ALL #ttlHEAD h4{width: 379px;height: 150px;background:url('../images/reviews_ttl.png')center center;font-size: 0;margin: 0 auto;}

#REVIEWS_ALL .cbp-item{border: 1px solid #fff;}
#REVIEWS_ALL .cbp-item .userReview{border: 2px solid #000;}

#REVIEWS_ALL .cbp-item .userReview .inner{padding:8%;text-align: justify;}
#REVIEWS_ALL .cbp-item .userReview .inner ul li.ttl{font-size: 18px;line-height: 30px;font-weight: bold;}
#REVIEWS_ALL .cbp-item .userReview .inner ul li.fa-user-circle-o{font-size: 22px;margin-bottom: 10px;}
#REVIEWS_ALL .cbp-item .userReview .inner ul li span.user {font-size: 16px; padding-left: 5px;font-family: 'microsoft jhenghei';}
#REVIEWS_ALL .cbp-item .userReview .inner p{font-size: 15px;line-height: 24px;}
.inlin-review{color: #fff;}
.inlin-review p{font-size: 16px;line-height: 28px; }
.inlin-review ul li.ttl{font-size: 22px;line-height: 50px;font-weight: bold;}
.inlin-review ul li.fa-user-circle-o{font-size: 30px;margin-bottom: 20px;}
.inlin-review ul li span.user {font-size: 20px; padding-left: 5px;font-family: 'microsoft jhenghei';}




@media screen and (max-width: 1430px) {
 #HEADER .main_kv{padding: 12% 0 0 0;}   
}

@media screen and (max-width: 1149px) {
 #HEADER .main_kv{padding: 15% 0;}   
}

@media screen and (max-width: 990px) {
#HEADER .main_kv{padding: 25% 0;}
}

@media screen and (max-width: 790px) {
#HEADER .main_kv{padding: 28% 0;}
#HEADER .main_kv h1{width: 550px;height: 111px;background:url('../images/kv_h1m.png'); margin: 0 auto;-webkit-background-size: cover; background-size:cover;}
#HEADER .main_kv h1 .lfwheel{width: 100px;height: 100px;left: 30%;top:-85%;}
#HEADER .main_kv h1 .rtwheel{width: 80px;height: 80px;right:35%; top:-70%;}
#HEADER .main_kv h2{width: 450px;height: 82px; margin: 0 auto;-webkit-background-size: cover; background-size:cover;}
#HEADER .main_kv h3{width:  450px;height: 57px; margin: 0 auto;-webkit-background-size: cover; background-size:cover;}

}



@media screen and (max-width: 590px) {
#REVIEWS_ALL #ttlHEAD h4{width: 300px;height: 119px;margin: 0 auto;background-size: cover;}
#HEADER .main_kv{padding: 45% 0;}
#HEADER .main_kv h1{width: 420px;height: 103px;margin: 0 auto;background:url('../images/kv_h1m.png');-webkit-background-size: cover; background-size:cover;}
#HEADER .main_kv h1 .lfwheel{width: 80px;height: 80px;left: 30%;top:-80%;}
#HEADER .main_kv h1 .rtwheel{width: 60px;height: 60px;right:35%; top:-60%;}
#HEADER .main_kv h2{width: 300px;height: 55px; margin: 0 auto;}
#HEADER .main_kv h3{width:  300px;height: 38px; margin: 0 auto;}
#HEADER .main_kv .kv_menu{padding-top: 40px;width: 340px;margin: 0 auto;}
#HEADER .main_kv .kv_menu li a {border: 2px solid #fff; color: #fff; display: block; font-size: 15px; line-height: 60px; width: 170px; height: 60px;font-weight: bold;} 

}


@media screen and (max-width: 414px) {
#HEADER .main_kv li a {border: 2px solid #fff; color: #fff; display: block; font-size: 15px; line-height: 60px; width: 150px; height: 60px;font-weight: bold;} 
#HEADER .main_kv h1{width: 310px;height: 76px;margin: 0 auto;-webkit-background-size: cover; background-size:cover;}
#HEADER .main_kv h1 .lfwheel{width: 60px;height: 60px;left: 30%;top:-80%;}
#HEADER .main_kv h1 .rtwheel{width: 40px;height: 40px;right:37%; top:-50%;}
#HEADER .main_kv .kv_menu{padding-top: 40px;width: 300px;margin: 0 auto;}
#HEADER .main_kv .kv_menu li a {border: 2px solid #fff; color: #fff; display: block; font-size: 15px; line-height: 60px; width: 150px; height: 60px;font-weight: bold;} 
}








/*==================== SPONSER =======================*/
#SPONSER{background-color: #bebebe;padding: 60px 0;}
#SPONSER h5{font-size: 20px; text-align: center;color: #222;text-decoration: underline;}


footer{ width:100%;position:relative; z-index:99;background-color: #000; color: #fff; font-size: 11px;height: 50px;text-align: center;}
footer #container{width: 1200px;margin: 0 auto;}
footer img{vertical-align:middle; }

@media screen and (max-width: 1439px) {
    footer #container{width:100%;}
}















/*===================動畫==================*/
@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}

@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}




@-ms-keyframes spin2 {
    from { -ms-transform: rotate(360deg); }
    to { -ms-transform: rotate(0deg); }
}

@-moz-keyframes spin2 {
    from { -moz-transform: rotate(360deg); }
    to { -moz-transform: rotate(0deg); }
}
@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(360deg); }
    to { -webkit-transform: rotate(0deg); }
}
@keyframes spin2 {
    from {
        transform:rotate(360deg);
    }
    to {
        transform:rotate(0deg);
    }
}




@keyframes fadeInLeft {
  from {
    opacity: 0;
    left:100px;
  }

  to {
    opacity: 1;
    left:-220px;
  }
}

.fadeInLeft {
  animation-duration: 5s;
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}



@keyframes fadeInRight {
  from {
    opacity: 0;
    right:100px;
  }

  to {
    opacity: 1;
    right:-220px;
  }
}

.fadeInRight {
 animation-duration: 5s;
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}



.floating{
  animation-name: floating;
  -webkit-animation-name: floating;

  animation-duration: 1.5s; 
  -webkit-animation-duration: 1.5s;

  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@keyframes floating {
  0% {
    transform: translateY(0%);  
  }
  50% {
    transform: translateY(8%);  
  } 
  100% {
    transform: translateY(0%);
  }     
}

@-webkit-keyframes floating {
  0% {
    -webkit-transform: translateY(0%);  
  }
  50% {
    -webkit-transform: translateY(8%);  
  } 
  100% {
    -webkit-transform: translateY(0%);
  }     
}