body{margin:0;padding: 0;/*background-color: #FFF4F4;*/}
.full-width{width: 100%;}
.fixed-width{width: 1000px;margin: auto; }


.pull-left { float: left; }
.pull-right { float: right; }
.clear-float { clear: both;}
.pull-center{ margin:0 30px;}
.pull-center2{ margin: 0 auto;}
.letter-spacing{  letter-spacing :2px;}
.letter-spacing2{  letter-spacing :2px;}
.ls_2{letter-spacing :-2px;}

/***PC版***/

#container_pc{ min-width: 1000px; margin: 0 auto; background:url(../images/pc/TGH_movie_site_bg.jpg) no-repeat; background-size: 100% 3324px; position: relative; overflow: hidden;}

#content_pc {
    min-width: 1000px;
    color:#FFFFFF;
}
#content_pc a{text-decoration: none;}
/*共用end*/


/* HeaderCon PC */
#content_pc .headerCon {width: 1000px; height: 715px; position: relative;}
#content_pc .headerCon .catchlogo{ position: absolute;width: 660px;height: 70px; top:40px; left:180px; z-index: 100; background:url(../images/pc/TGH_movie_catch.png) no-repeat; font-size: 0; }
#content_pc .headerCon .catchlogo2{position: absolute; width: 1000px; height: 470px; left:0px; top:137px; }
#content_pc .headerCon .catchpen{position: absolute; width: 250px; height: 320px; left:-165px; bottom:50px; background:url(../images/pc/TGH_movie_pen.png) no-repeat; }
#content_pc .headerCon p{position: absolute; width: 905px; height: 60px; right:10px; bottom:35px; background:url(../images/pc/TGH_movie_p1.png) no-repeat; font-size: 0; }

#content_pc nav{ position: relative; left:-6px; top: 2px; width: 1016px; height: 60px; }
#content_pc nav ul{ width: 1016px; height: 60px; overflow: hidden; margin: 0; padding: 0; border:0; }
#content_pc nav ul li{ width: 250px; height: 60px; list-style-type: none; float: left; margin: 0 4px 0 0; padding: 0; background:url(../images/pc/TGH_movie_menu.jpg);  }
#content_pc nav ul li:nth-of-type(1){ background-position: 0 0 ; }
#content_pc nav ul li:nth-of-type(2){ background-position: 0 -60px ; }
#content_pc nav ul li:nth-of-type(3){ background-position: 0 -120px ; }
#content_pc nav ul li:nth-of-type(4){ background-position: 0 -180px ; }
#content_pc nav ul li:nth-of-type(1):hover { background-position: -250px 0 ; }
#content_pc nav ul li:nth-of-type(2):hover { background-position: -250px -60px ; }
#content_pc nav ul li:nth-of-type(3):hover { background-position: -250px -120px ; }
#content_pc nav ul li:nth-of-type(4):hover { background-position: -250px -180px ; }
#content_pc nav ul li a{ display: block; width: 100%; height: 100%; }
/* HeaderCon PC End */


/* contentCon PC */
#content_pc .contentCon { width: 1000px; position: relative;text-align: center;}
#content_pc .contentCon .item01{ position: relative; margin: 12px 0 0 0; padding-top: 20px;}
#content_pc .contentCon .item02{ position: relative; margin: 0px; padding-top: 20px;}
#content_pc .contentCon .item03{ position: relative; margin: 0px; padding-top: 20px;}
#content_pc .contentCon .item04{ position: relative; margin: 0px; padding-top: 20px;}


#content_pc .contentCon .item01 h2{ position: relative; width: 500px; height: 80px; line-height: 80px; font-size: 0;  background:url(../images/pc/TGH_movie_h2.png) no-repeat; background-position: 0 0; font-weight: 100;  margin:0px auto 15px; }
    .item01 p{ width: 1000px; height: 25px; line-height: 25px; font-size: 0; background:url(../images/pc/TGH_movie_p2.png) no-repeat; background-position: 0 0; font-weight: 100;  margin: 0px auto 15px;}
    .item01 .book_out{ position: relative; width: 100%; height: 733px; margin: 0;}
    .item01 .book_out ul{ position: absolute; left:-15px; top:0; width: 1030px; height: 710px; padding: 25px 0 0 35px; background:url(../images/pc/TGH_movie_book.jpg) no-repeat; }
    .item01 .book_out ul li{ width: 228px; height: 324px; float: left; margin: 0 5px 5px 0;}
    .item01 .book_out ul li:nth-of-type(2){ margin-right: 35px; }
    .item01 .book_out ul li:nth-of-type(6){ margin-right: 35px; }


#content_pc .contentCon .item02 h2{ position: relative; width: 500px; height: 80px; line-height: 80px; font-size: 0;  background:url(../images/pc/TGH_movie_h2.png) no-repeat; background-position: 0 -80px; font-weight: 100;  margin: 0px auto 15px;}
    .item02 p{ width: 1000px; height: 25px; line-height: 25px; font-size: 0; background:url(../images/pc/TGH_movie_p2.png) no-repeat; background-position: 0 -25px; font-weight: 100;  margin: 0px auto 15px;}
    .item02 ul{ position: relative; width: 100%; height: 343px; padding: 5px 0 0 15px;}
    .item02 ul li{ width: 228px; height: 324px; }
    /*.item02 ul div {margin-right: 3px;}*/

#content_pc .contentCon .item03 h2{ position: relative; width: 500px; height: 80px; line-height: 80px; font-size: 0;  background:url(../images/pc/TGH_movie_h2.png) no-repeat; background-position: 0 -160px; font-weight: 100;  margin: 0px auto 15px;}
    .item03 p{ width: 1000px; height: 25px; line-height: 25px; font-size: 0; background:url(../images/pc/TGH_movie_p2.png) no-repeat; background-position: 0 -50px; font-weight: 100;  margin: 0px auto 15px;}
    .item03 ul{ position: relative; width: 100%; height: 342px; padding: 5px 0 0 15px;}
    .item03 ul li{ width: 228px; height: 324px; }

#content_pc .contentCon .item04 h2{ position: relative; width: 500px; height: 80px; line-height: 80px; font-size: 0;  background:url(../images/pc/TGH_movie_h2.png) no-repeat; background-position: 0 -240px; font-weight: 100;  margin: 0px auto 15px;}
    .item04 p{ width: 1000px; height: 25px; line-height: 25px; font-size: 0; background:url(../images/pc/TGH_movie_p2.png) no-repeat; background-position: 0 -75px; font-weight: 100;  margin: 0px auto 15px;}
    .item04 ul{ position: relative; width: 100%; height: 370px; padding: 5px 0 0 15px;}
    .item04 ul li{ width: 228px; height: 324px; }



#content_pc .contentCon .item01 .slick-track { margin-left: 225px;}
#content_pc .contentCon .item02 .slick-track { margin-left: 225px;}
#content_pc .contentCon .item03 .slick-track { margin-left: 225px;}
#content_pc .contentCon .item04 .slick-track { margin-left: 225px;}

/* 聚光燈 */
.box ,.box2{ width:100%; float:left;position:relative; height:100%;}
.box a,.box2 a{ float:left; display: block; width: 200px; height: 155px; cursor: pointer;}



.floor_maskItem{ position:absolute; }
.floor_maskItem img{ width: 100%; height: 100%;}

.mask{ position:absolute; left:0; top:0;background:#000000;  width:100%; height:100%; opacity:0; filter:alpha(opacity=0);}
.hover .mask{ background:#000000; opacity:0.5; filter:alpha(opacity=50); cursor:pointer;}
.hover .qq .mask{ opacity:0; filter:alpha(opacity=0); }

.box a:nth-of-type(1) { left:0; top:0; }
.box a:nth-of-type(2) { left: 200px; top:0; }
.box a:nth-of-type(3) { left: 400px; top:0; }
.box a:nth-of-type(4) { left: 600px; top:0; }
.box a:nth-of-type(5) { left: 800px; top:0; }
.box a:nth-of-type(6) { left: 0px; top:155px; width: 100px; }
.box a:nth-of-type(7) { left: 100px; top:155px; }
.box a:nth-of-type(8) { left: 300px; top:155px; }
.box a:nth-of-type(9) { left: 500px; top:155px; }
.box a:nth-of-type(10) { left: 700px; top:155px; }
.box a:nth-of-type(11) { left: 900px; top:155px; width: 100px;}
.box a:nth-of-type(12) { left: 0px; top:310px; }
.box a:nth-of-type(13) { left: 200px; top:310px; }
.box a:nth-of-type(14) { left: 400px; top:310px; }
.box a:nth-of-type(15) { left: 600px; top:310px; }
.box a:nth-of-type(16) { left: 800px; top:310px; }



/* 聚光燈 */


/*片單滑過特效*/
#content_pc .view {width: 100%;height: 100%; float: left;overflow: hidden;position: relative;text-align: center;box-shadow: 0px 0px 5px #aaa;cursor: default;}
#content_pc .view .mask{width: 100%;height: 100%;position: absolute;overflow: hidden;top: 0;left: 0;}
#content_pc .view img {display: block;position: relative; width: 228px; height: 324px;}
#content_pc .view a.info {display: inline-block;text-decoration: none;padding:0;width:230px;height:324px;font-size: 20px;line-height: 24px;padding: 40px 20px 50px 20px; overflow: hidden;color:#12242a;text-align: left; position:absolute; left: 0; top: 0; opacity:0;-moz-transform:scale(0,0);-webkit-transform:scale(0,0);-o-transform:scale(0,0);-ms-transform:scale(0,0);transform:scale(0,0);-webkit-transition: -webkit-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;-moz-transition: -moz-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;-o-transition: -o-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;-ms-transition: -ms-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;transition: transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;}
#content_pc .second-effect .mask {opacity: 0;overflow:visible;border:0px solid rgba(255,255,255,0.85);-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
#content_pc .second-effect:hover .mask {opacity: 1;border:120px solid rgba(255,255,255,0.85);}
#content_pc .second-effect:hover a.info { border:15px solid rgba(196,186,172,.7); top:-120px; left:-120px; opacity:1; -moz-transform:scale(1,1); -webkit-transform:scale(1,1); -o-transform:scale(1,1); -ms-transform:scale(1,1); transform:scale(1,1); -moz-transition-delay:0.2s; -webkit-transition-delay:0.2s; -o-transition-delay:0.2s; -ms-transition-delay:0.2s; transition-delay:0.2s;}
#content_pc .second-effect a.info h4{ width: 160px; height: 40px; line-height: 40px; font-size: 20px; font-weight: 100; border:1px solid #12242a; padding: 0 10px; text-align: center; position: absolute; left: 20px; bottom: 50px;}
#content_pc .second-effect a.info h4:hover{ background-color: #12242a; color:#FFFFFF; font-weight: 100;}
/*片單滑過特效*/


/*箭頭下-邊框*/
.second-effect a.info h4 .arrow_r_out{ position: absolute; width:0px; height:0px; border-width:8px; border-style:solid; border-color: transparent transparent transparent #12242a; position:absolute; bottom:10px; left:130px; }
.second-effect a.info h4:hover .arrow_r_out{ position: absolute; width:0px; height:0px; border-width:8px; border-style:solid; border-color: transparent transparent transparent #FFFFFF; position:absolute; bottom:10px; left:130px; }
/*箭頭下-邊框*/


/*banner的箭頭按鈕*/
.slick-prev:before {display: block;width: 30px;height: 40px;background:url(../images/arw2.png) no-repeat;background-position: 0 0;content: '';position: absolute;opacity: .25;left: -10px; }
.slick-next:before {display: block;width: 30px;height: 40px;background:url(../images/arw2.png) no-repeat;background-position: -30px 0;content: ''; }
.slick-prev:before, .slick-next:before {font-family: 'slick';font-size: 20px;line-height: 1;opacity: .9;color: white;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; }
/*banner的箭頭按鈕*/



/******************************************/
/******************************************/
/******************************************/
/******************************************/





/***手機版***/
@media screen and (max-width: 640px) {

#container_m{ width: 640px; height: 100%; /*background: url(../images/mo/TGH_movie_site_bg_m.jpg) no-repeat; background-position: 0 53px; */position: relative; display: block; float: none; font-weight: normal; overflow: hidden;}	
#container_m .headerCon{ position: relative; width: 640px; height: 460px; background: url(../images/mo/TGH_movie_site_bg_m1.jpg) no-repeat;}
#container_m .headerCon h1.catchlogo{ width: 558px; height: 59px; margin:20px 40px 20px 40px; background:url(../images/pc/TGH_movie_catch.png) no-repeat; background-size: 558px 59px; font-size: 0; float:left;}
#container_m .headerCon div.catchlogo2{ width: 580px; height: 274px; margin: 0 30px; background:url(../images/mo/TGH_movie_catch2_m.png) no-repeat; background-size: 580px 274px; font-size: 0; float:left;}
#container_m .headerCon p{ width: 640px; height: 60px; margin: 13px 0 13px; background: url(../images/mo/TGH_movie_p1_m.png)no-repeat; font-size: 0px;  float:left;}
#container_m a.fb_share_m{ position: absolute; top:47px; right: 20px; }

#container_m nav{ position: relative; width: 100%; height: 146px; background: #12232a; }
#container_m nav ul{ width: 100%; height: 100%; overflow: hidden; margin: 0; padding: 8px 66px; border:0; }
#container_m nav ul li{ width: 250px; height: 62px; list-style-type: none; float: left; margin: 0 4px 0 0; padding: 0; background:url(../images/mo/TGH_movie_menu_m.png);  }
#container_m nav ul li:nth-of-type(1){ background-position: 0 0 ; margin-bottom: 5px;}
#container_m nav ul li:nth-of-type(2){ background-position: 0 -62px ; margin-bottom: 5px;}
#container_m nav ul li:nth-of-type(3){ background-position: 0 -124px ; }
#container_m nav ul li:nth-of-type(4){ background-position: 0 -186px ; }
#container_m nav ul li a{ display: block; width: 100%; height: 100%; }


/*主要內容 #main_m */
#content_m{ width: 640px; height: 3428px; background: url(../images/mo/TGH_movie_site_bg_m2.jpg) no-repeat; position: relative; color:#000000; padding: 0px; font-weight: 100; }
#content_m a:hover{ text-decoration: none;}

#content_m .mct_area1{ width:100%; height: 1700px; position: relative;}
#content_m .mct_area2{ width:100%; height: 570px; position: relative; }
#content_m .mct_area3{ width:100%; height: 566px; position: relative; }
#content_m .mct_area4{ width:100%; height: 592px; position: relative;}


h2{ position: relative; width: 100%; height: 80px; line-height: 80px;  font-weight: 100;  margin:0px auto 15px; }
    .item01 p{ width: 1000px; height: 25px; line-height: 25px; font-size: 0; background:url(../images/pc/TGH_movie_p2.png) no-repeat; background-position: 0 0; font-weight: 100;  margin: 0px auto 15px;}

#content_m h2{position: relative; width: 500px; height: 80px; line-height: 80px; background:url(../images/pc/TGH_movie_h2.png) no-repeat; margin:0px auto; text-align: center; font-size: 0px; }
#content_m .mct_area1 h2{ background-position: 0 0;}
#content_m .mct_area2 h2{ background-position: 0 -80px; }
#content_m .mct_area3 h2{ background-position: 0 -160px; }
#content_m .mct_area4 h2{ background-position: 0 -240px; }

#content_m  p{ width: 520px; height: 60px; line-height: 25px; font-size: 0; background:url(../images/mo/TGH_movie_p2_m.png) no-repeat; background-position: 0 0; font-weight: 100;  margin: 0px auto 15px;}
#content_m .mct_area1 p{ background-position: 0 0px; }
#content_m .mct_area2 p{ background-position: 0 -60px; }
#content_m .mct_area3 p{ background-position: 0 -120px; }
#content_m .mct_area4 p{ width: 520px; height: 80px; line-height: 25px; font-size: 0; background:url(../images/mo/TGH_movie_p3_m.png) no-repeat; background-position: 0 0; font-weight: 100;  margin: 0px auto 15px;}


#content_m .mct_area1 .book_out{ position: absolute; width: 540px; height: 1545px; margin: 0; left:50px; top: 155px;}
#content_m .mct_area1 .book_out ul{ position: relative; left:0; top:0; width: 100%; height: 100%; padding: 0;}

#content_m .mct_area1 .book_out ul .slick-list {height: 1545px;}
#content_m .mct_area1 .book_out ul #post1_1{  width: 258px; height: 367px; position: absolute; left: 0; top: 0; }
#content_m .mct_area1 .book_out ul #post1_2{  width: 258px; height: 367px; position: absolute; left: 283px; top: 0; }
#content_m .mct_area1 .book_out ul #post1_3{  width: 258px; height: 367px; position: absolute; left: 0; top: 375px; }
#content_m .mct_area1 .book_out ul #post1_4{  width: 258px; height: 367px; position: absolute; left: 283px; top: 375px; }
#content_m .mct_area1 .book_out ul #post1_5{  width: 258px; height: 367px; position: absolute; left: 0; top: 750px; }
#content_m .mct_area1 .book_out ul #post1_6{  width: 258px; height: 367px; position: absolute; left: 283px; top: 750px;  }
#content_m .mct_area1 .book_out ul #post1_7{  width: 258px; height: 367px; position: absolute; left: 0; top: 1125px; }
#content_m .mct_area1 .book_out ul #post1_8{  width: 258px; height: 367px; position: absolute; left: 283px; top: 1125px; }
/*#content_m .mct_area1 .book_out ul div{ float:left; width: 540px; height: 367px;}*/


#content_m .TGH_movie_posttop_m .slick-slide { }

#content_m .TGH_movie_post1_m>div{ }
#content_m .TGH_movie_post1_m img{ width: 255px; height: 367px; }

#content_m .mct_area2 ul{ position: relative; width: 100%; height: 367px; padding: 5px 0 0 5px; margin-bottom: 49px;}
#content_m .mct_area2 ul li{ width: 255px; height: 367px; }

#content_m .mct_area3 ul{ position: relative; width: 100%; height: 367px; padding: 5px 0 0 5px; margin-bottom: 42px;}
#content_m .mct_area3 ul li{ width: 255px; height: 367px; }

#content_m .mct_area4 ul{ position: relative; width: 100%; height: 367px; padding: 5px 0 0 5px; margin-bottom: 49px;}
#content_m .mct_area4 ul li{ width: 255px; height: 367px; }
.view2{width: 100%;height: 100%; float: left;overflow: hidden;position: relative;text-align: center;box-shadow: 0px 0px 5px #aaa;cursor: default;}
.view2 a{ display:block; width: 100%; height: 100%;}
.view2 a img{width: 100%; height: 100%;}

/* 小網片單滑過特效*/
.view {width: 255px; height: 100%; float: left;overflow: hidden;position: relative;text-align: center;box-shadow: 0px 0px 5px #aaa;cursor: default;}
.view .mask{width: 100%;height: 100%;position: absolute;overflow: hidden;top: 0;left: 0;}
.view img {display: block;position: relative; width:255px;height:367px;}
.view a.info {display: inline-block;text-decoration: none;padding:0;width:255px;height:367px;font-size: 25px;line-height: 30px;padding: 40px 20px 50px 20px; overflow: hidden;color:#12242a;text-align: justify; position:absolute; left: 0; top: 0; opacity:0;-moz-transform:scale(0,0);-webkit-transform:scale(0,0);-o-transform:scale(0,0);-ms-transform:scale(0,0);transform:scale(0,0);-webkit-transition: -webkit-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;-moz-transition: -moz-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;-o-transition: -o-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;-ms-transition: -ms-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;transition: transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;}
.second-effect .mask {opacity: 0;overflow:visible;border:0px solid rgba(255,255,255,0.85);-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
.second-effect:hover .mask {opacity: 1;border:130px solid rgba(255,255,255,0.85);}
.second-effect:hover a.info {  border:15px solid rgba(196,186,172,.7); top:-130px; left:-130px; opacity:1; -moz-transform:scale(1,1); -webkit-transform:scale(1,1); -o-transform:scale(1,1); -ms-transform:scale(1,1); transform:scale(1,1); -moz-transition-delay:0.2s; -webkit-transition-delay:0.2s; -o-transition-delay:0.2s; -ms-transition-delay:0.2s; transition-delay:0.2s;}
.second-effect a.info h4{ width: 160px; height: 40px; line-height: 40px; font-size: 25px; font-weight: 100; border:1px solid #12242a; padding: 0 10px; text-align: center; position: absolute; margin-left: 15px; bottom: 50px;}
.second-effect a.info h4:hover{ background-color: #12242a; color:#FFFFFF; font-weight: 100;}
/* 小網片單滑過特效*/



}/*** 手機版 END ***/