@charset "utf-8";
body {margin:0; padding:0; font-family:Arial, Helvetica, '微軟正黑體', sans-serif; color:#fff;background: #000;}
.whitebg{background:#fff; color: #333;}
a{text-decoration:none; transition:.3s;}
#header, #footer, #defaultimg, .content, .innerhtml, .frm, .flexfrm, #banner{width:100%; height:auto; float:left;}
.flexfrm{display:flex;}
.page{width:100%; height:auto; position:relative; margin:auto auto; padding:auto auto; display:table; padding:0 2%;}
.rwdimg{width:100%; height:auto;}/*讓圖自適應用*/
*{box-sizing:border-box;}
figure{margin:0; padding:0;}
[class*="col-"] {
    float: left;
   
}

/*header*/
#header{position:fixed; z-index:200; top:0; left:0;}
#header .page{padding:0; width:100%;}
.logo{padding:1%; height:auto; line-height:0; background:linear-gradient(90deg,rgba(185,15,0,1) 220px,rgba(185,15,0,0) 220px);}
.logo img{max-width:100%; height:auto; transition:.3s;}
.logo a{padding-top:1%;}

/*mobile menu btn*/
.menu{width:40px; height:40px; padding:3px; position:relative; text-align:center;  float:right;  margin:0.5em; cursor:pointer; background: #333;}
.menu > div{width:60%; height:1px; position:absolute; top:45%; left:20%; background:#ccc;}
.menu > div::before{ content:""; width:100%; height:1px; position:absolute; top:-7px; left:0; background:#ccc;}
.menu > div::after{ content:""; width:100%; height:1px; position:absolute; top:7px; left:0; background:#ccc;}



/*subnav*/
#submenu{float:left; width:100%; overflow:hidden;}
.subnav ul{margin:0; padding:0; list-style:none;  font-size:16px;}
.subnav ul li{padding:0.4em 0;}
.subnav ul li a{border-radius:1.5em; background:#7096b9; color:#fff; padding:1em;}
.subnav ul li ul li a::before{content:"-"; margin-right:0.5em; color:#ccc;}
.subnav ul li ul li a{border:none; font-size:14px; color:#333; border-bottom:1px dotted #ccc; padding:0.4em 0 0.4em 1em; background:#f5f5f5;}
.subnav a:hover{color:#fff; background:#333;}
.subnav a{width:100%; color:#fff; display:block; padding-left:0.5em;}


/*footer*/
#footer{ color:#fff; padding:2em 0; background:#b90f00;  font-size:14px; line-height:1.5em;}
#footer a.col-2 img{max-width:40px;;}
#footer .footerr {text-align: right;}
#footer .footerr a{color:#232425; padding:0 0.2em 0.5em 0.2em;}
#footer .footerr a:hover{text-decoration:underline;}
#footer .col-5{text-align:right;}
#footer .col-5 a{color:#fff;}
#footer .footerr i{font-size:16px; border-radius: 1em; border:1px solid #fff; padding:0.5em; display:inline-block; margin:0.5em;}
/*defaultimg*/
#defaultimg{line-height:0; height: 90vh;}
.mainimg img{transition:.5s; opacity:1;}
.mainimg{position:fixed; top:0; width:100%; height:auto; z-index: -1; line-height: 0;}
.mainimg::before{content:""; width:100%; height:100%; position:absolute; background:linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0) 15%,rgba(0,0,0,0) 80%,rgba(0,0,0,1));}

/*default*/
.dcontent{text-align:center; min-height:50vh; background: linear-gradient(rgba(0,0,0,0) 10%,rgba(0,0,0,1) 25%); padding-bottom:2em;}
.dcontent.nav{background: linear-gradient(rgba(185,15,0,.7) 5%,rgba(0,0,0,1) 25%); display: none; padding-top:5vh; min-height:100vh; position:fixed; top:0; z-index: 300; color:#fff;}
.dcontent .col-3 h2{width:7em; height:7em; background:url(images/drama-h2bg.png) no-repeat center; text-align: center; border-radius: 100%; padding:3em 0; display: inline-block;}
.dcontent ul{list-style:none; margin:0; padding:0;}
.dcontent ul li{text-align:left; text-align: center; padding:0 0.5em;}
.dcontent ul li a{color:#999; width:100%; padding:0.5em; display: block;  border-bottom: 1px solid #000;}
.dcontent ul li a:hover{background:linear-gradient(90deg,rgba(0,0,0,0),#b90f00,rgba(0,0,0,0)); border-bottom: 1px solid #fff; color:#fff;}
.dcontent ul li ul{margin:0; padding:0; border-top:3px solid #000;}
.nav i{font-size:16px; border-radius: 1em; border:1px solid #fff; padding:0.5em; display:inline-block; margin:0.5em;}
.nav i span{font-size:16px; font-weight: normal; padding-left:1em;}
.closebtn{position:relative;}
.closebtn::before{content:""; width:1px; height:100%; transform:rotate(45deg); position:absolute; background:#fff;}
.closebtn::after{content:""; width:1px; height:100%; transform:rotate(-45deg); position:absolute; background:#fff;}
/*content*/
.content{padding:4em 0;}
.page, #header .nav .page{width:1200px;}
.innerhtml {line-height:2em;}
.innerhtml img{max-width:100%;}
.path{font-size:14px; font-weight:normal; color:#fff; text-align:right; border-bottom:1px solid rgba(185,15,0,1); padding:1em;}
.path a{color:#fff;}
.date{color:#666; font-size: 13px; margin:0;}
.rword{background:#4a0600; padding:5%; float:right; min-height: 95vh;}
/*actor*/
.actor .col-4{padding:1em;}
.actor .col-4 h3{margin-bottom:0;}
.actor .col-4 h3 span{font-size:16px;}
/*artist*/

.artistlist .col-4, .artistlist .ticket{padding:1em; }
.artistlist .ticket figure div{min-height:250px;}
.artistlist figure div{min-height: 280px; overflow: hidden;}
.artistlist figure{position:relative; background: #fff; cursor: pointer;}
.artistlist .top{position:absolute; top:0; left: 0; width:100%;}
.artistlist .top p:nth-child(1){display:inline-block; padding:0.7em; color:#fff; background:#6d3c78; margin: 0; border-radius:0 0 0.5em 0.5em;}
.artistlist .top p:nth-child(2){display:inline-block; position:absolute; right:0; top:0; margin:0;}
.artistlist .top p:nth-child(2) i{display:inline-block; background:rgba(185,15,0,0.6); color: #fff; border-radius: 100%; padding:0.7em; margin:0.2em; }
.artistlist figcaption{min-height: 180px; padding:1em; line-height: 1.8em; color:#000;}
.artistlist h3.subject{color:rgba(185,15,0,1); margin:0.5em 0 0.3em 0; font-size: 18px;}
.artistlist .more{text-align: right; margin:0;}
.artistlist .more a{border-radius:1.5em; color:#000; border:5px solid #ccc; padding:0.5em 1em; display:inline-block; margin:1em; font-size:14px;}
.artistlist .more a:hover,.artistlist figure:hover .more a{border:5px solid rgba(185,15,0,1); background:rgba(185,15,0,1); color:#fff;}
.artistlist .morec{text-align:center; margin:0;}
.artistlist .morec a{border-radius:1.5em; color:#fff; padding:0.5em 1.3em; display:inline-block; margin:0.5em 1em; background:#333;}
.artistlist .morec a:hover{background:rgba(185,15,0,1); color:#FFB600;}
.artistlist .morec a:hover,.artistlist figure:hover .morec a{background:rgba(185,15,0,1);}
h1.subject{margin-top:2em; color:rgba(185,15,0,1); }
/*tagbtn*/
.tagbtn{margin:0; padding:0; list-style:none; padding:1em 0;}
.tagbtn li{border-radius:0.5em 0.5em 0 0; border:1px solid #ccc; padding:1em; text-align: center; font-size: 20px; background: #f5f5f5; transition:.3s;}
.tagbtn li:hover{ padding-bottom:1.2em; margin-top:-0.2em; cursor: pointer;}
.tagbtn li.hit{background:#fff; border-bottom:none; color: #A40000; padding-bottom:1.2em; margin-top:-0.2em;  cursor:default;}
/*event*/
.event{margin:0; padding:0; list-style:none; padding:1em 0; position: relative;}
.event::before{content:""; width:1px; height: 100%; position: absolute; left:0; top:40px; background:#fff;}
.event li{position:relative; width:100%; height: auto; float: left; padding:1em;}
.event li::before{content:"";width:10px; height: 10px; background: #fff; border-radius: 100%; position:absolute; left:-5px; top:50%; transform:translateY(-50%);}
.event li.yy{font-weight:bold;}
.event li.yy::before{content:"";width:20px; height: 20px; background: #fff; border-radius: 100%; position:absolute; left:-10px; top:50%; transform:translateY(-50%);}
/*review*/
.review .col-12{border-bottom:1px solid #ccc; padding:1em;}
.review .col-10{position:relative; padding:0 2em; font-size: 18px; line-height: 1.5em;}
.review .col-10 ::before{content:"“"; font-size: 250%; color: #666; font-weight: bold; position:absolute; left:0; top:0;}
.review .col-10 ::after{content:"”"; font-size: 250%; color: #666; font-weight: bold; position:absolute; right:0; top:0;}
.review .name{font-style: italic; color: #666; text-align: right;}
.review img{width:80%; height: auto;}
/*youtube*/
.video-container {position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;}
.video-container iframe, .video-container object, .video-container embed {position: absolute; top: 0;left: 0; width: 100%; height: 100%;}
/*contact*/
.contact, .contactinfo{padding:0 1em;}
.contact p{margin-bottom:0; line-height:2em;}
.contact input{height:40px; width:100%; border:none; border:none; color:#333; color:#333; font-size:16px; padding:0.5em; border-radius:0.5em;}
.contact textarea{width:100%; border:none; color:#333; border-radius:0.5em; font-size:16px; padding:0.5em;}
select{height:auto; width:100%;}
input:focus, textarea:focus, select:focus{outline:none;}
/*contactinfo*/
.contactinfo p{ border-bottom:1px dashed #999; font-size:14px; line-height:2em;}
.contactinfo .subtit{color:#666; font-weight:bold;}
.contactinfo span{color:#ccc; padding:0 0.2em; font-size:13px;}

/*btn*/
p.btn{margin:2em 0;}
p.btn a{padding:0.5em 3em; background:#666; color:#fff; border-radius:0.3em; display:inline-block;}
p.btn a:hover{background:#333;}

/*Grid for all situation and >1200px*/
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media screen and (min-width:1200px){/*desktop*/
.BannerDivMobile{display:none;}
.hide-d{display:none !important;}

/*subnav*/
.subtoggle{display:none;}
/*content*/


}

@media screen and (max-width:1199px){/*desktop-small*/
.BannerDivMobile{display:none;}

.page, #header .nav .page{width:100%; padding:0 2%;}

/*subnav*/
.subtoggle{display:none;}
	
#defaultimg{height: 70vh;}
/*content*/
.side.contactinfo{width:40%;}
.main.contact{width:60%;}
.side{width:28%; padding:0em 1em 1em 1em; }
.main{width:72%; padding:0em 1em 1em 1em;}

/*Grid s size for desktop or landscape*/
.col-d1 {width: 8.33%;}
.col-d2 {width: 16.66%;}
.col-d3 {width: 25%;}
.col-d4 {width: 33.33%;}
.col-d5 {width: 41.66%;}
.col-d6 {width: 50%;}
.col-d7 {width: 58.33%;}
.col-d8 {width: 66.66%;}
.col-d9 {width: 75%;}
.col-d10 {width: 83.33%;}
.col-d11 {width: 91.66%;}
.col-d12 {width: 100%;}


}
@media screen and (max-width:1199px)and (min-width:960px){/*desktop-small*/.hide-ds{display:none !important;}}
@media screen and (max-width:959px)and (min-width:768px){/*pad*/.hide-p{display:none !important;}}
@media screen and (max-width:960px){/*pad*/
.BannerDivMobile{display:none;}

.page{width:100%; padding:0 2%;}
/*header*/
#header .page{display:table;}
/*nav*/

.nav span.line{margin:0 10px;}
/*subnav*/
.subtoggle{display:none;}
#banner{height:25vh;}
#banner div{font-size:200%;}
#defaultimg{height: 30vh;}
	
.dcontent .col-3 h2{width:6em; height:6em; background:url(images/drama-h2bg.png) no-repeat center; background-size: contain; text-align: center; border-radius: 100%; padding:2.5em 0; display: inline-block; font-size: 20px;}
/*content*/
.side.contactinfo{width:40%;}
.main.contact{width:60%;}
.side{width:28%; padding:0em 1em 1em 1em; }
.main{width:72%; padding:0em 1em 1em 1em;}
/*Grid s size for pad*/
.col-p1 {width: 8.33%;}
.col-p2 {width: 16.66%;}
.col-p3 {width: 25%;}
.col-p4 {width: 33.33%;}
.col-p5 {width: 41.66%;}
.col-p6 {width: 50%;}
.col-p7 {width: 58.33%;}
.col-p8 {width: 66.66%;}
.col-p9 {width: 75%;}
.col-p10 {width: 83.33%;}
.col-p11 {width: 91.66%;}
.col-p12 {width: 100%;}

}


@media screen and (max-width:767px) {/*mobile*/
.BannerDivPc{display:none;}
.hide-m{display:none !important;}
.page{width:100%; padding:0 1em;}
/*header*/

#header .page, #defaultimg .page{padding:0;}

.logo{background:none; padding:2%;}


/*subnav*/
#submenu{border:1px solid #ccc; float:left; width:100%; border-radius:5px; box-shadow:0 5px 15px rgba(0,0,0,0.2);}
.subtoggle{padding:15px; display:block;}
.subnav{display:none;}
.subnav ul li{padding:0;}
.subnav ul li a{border-bottom:1px dotted #ccc; line-height:160%; padding:0.5em 1em; background:none; border-radius:0; color:#666; font-size:15px;}

#banner{height:35vh;}
/*default*/
.mainimg{float:left; position:inherit; background:none;}
.mainimg::before{ position:inherit;}
.dcontent .col-3 h2{display:block; height: auto; background: none; padding:0; width:100%; text-align:left; padding:0.5em 0; margin:0.3em 0;}
.dcontent ul li{text-align:center; padding:0;}
.dcontent ul li a{padding:0.3em;}
.dcontent ul li ul li{text-align:left;}
.scroll{height:95vh; border-left:2px solid #fff; overflow: scroll; padding:0 0.3em;}
/*content*/
.content{padding:4em 0 2em 0;}
.side.contactinfo{width:100%;}
.main.contact{width:100%;}
.side{width:100%; padding:1em; }
.main{width:100%; padding:1em;}

.contact, .contactinfo{padding:1em 0;}
.contactinfo{float:right;}
	
.tagbtn li{font-size:14px; padding:1em 0;}
/*Grid s size for mobile*/
.col-m1 {width: 8.33%;}
.col-m2 {width: 16.66%;}
.col-m3 {width: 25%;}
.col-m4 {width: 33.33%;}
.col-m5 {width: 41.66%;}
.col-m6 {width: 50%;}
.col-m7 {width: 58.33%;}
.col-m8 {width: 66.66%;}
.col-m9 {width: 75%;}
.col-m10 {width: 83.33%;}
.col-m11 {width: 91.66%;}
.col-m12 {width: 100%;}

}