/*活動用*/ body{ margin:0; padding: 0; background: #eeeeee;} .full-width{width: 100%;} .fixed-width{ width: 1300px; margin: auto; } /*額外設定大小網*/ .only_pc{ display: block; } .only_m{ display: none; } /*額外設定大小網*/ /* 貼心小叮嚀 */ .note{width: 100%;margin: 0px auto; float: left; background-color: #cccc99;} #btn_note{ margin:0 auto; width:100%; height: 45px; display: block;cursor: pointer; background:url(../images/noticeh2.png) no-repeat center top; font-size: 0; } .note_box{ width: 910px; margin: 0px auto; padding: 5px 0 20px; display: none; font-size:15px; font-weight:normal; list-style-position: outside; } .note_box ul{ margin: 5px 20px; } .note_box ul li{ font-size: 16px; line-height: 20px; color:#4e4e4e; text-align:left; font-weight:normal; line-height:28px; list-style-position: outside;list-style-type: decimal; text-align:left} .note_box ul a{ color:#4e4e4e; text-decoration: underline;} .note_box ul li ul li{ margin-left:20px; list-style-type: upper-roman; } .note_box ul li ul li ul li{ margin-left:20px; list-style-type:square; } /* 貼心小叮嚀 */ /* 焦點影展 */ #AdBanners{ width: 100%; background:#96aec8; float:left; padding:30px 0px; } #AdBanners h3{ width: 100%; height: 40px; display: block; font-size: 0; margin:0 0 20px 0; text-align: center; background: url(../images/focush2.png)no-repeat center top; } /*banner*/ #Banners{ display: block; position: relative; width: 800px; margin: 5px auto 0px auto;} #left, #right{ background:url("https://video.friday.tw/eventcom/images/arw.png") no-repeat 0 16px; display:block; height: 70px; width: 20px; float:left; cursor: pointer; position: absolute; left:0px; top: 0px;} #Banners #right{ background-position: -30px 16px; position: absolute; left: 800px; top: 0px; float:right;} #Banners .banner_In{ margin: 0 auto; overflow: hidden; position: relative; width: 97%; height: 80px; padding: 0px; left: 8px; } #Banners ul{ position: absolute; width: 2000px; } #Banners ul li{ float: left; width: 236px; height: 74px; position: relative; margin-right: 18px; } #Banners ul li a{ display: block; width: 100%; height: 100%; } #Banners ul li img{ width: auto; border: 2px solid #FFFFFF; width: 100%; height: 100%; } #Banners{ display: block; } #Banners_m{ display: none; } /* 焦點影展 */ /*額外加合作廠商logo*/ .ftr_logosA { margin:0 auto 15px; text-align: center; height: 85px;} .ftr_logosA a{ display: inline-block; margin: 0 15px;} .ftr_logosA a:nth-child(2) { height: 100px; } .ftr_logosA a img{ display: block; width: 100%; height: 100%; } .ftr_logosA a:nth-child(1) img{ display: block; width: 200px; margin:25px 0; } /*額外加合作廠商logo*/ a:link{ border-bottom: none; } /***PC版***/ #container { min-width: 1300px; } /*一定要設*/ #content_all { min-width: 1300px; color:#FFFFFF; position: relative; padding-top:68px; } #content_all a{ text-decoration: none; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; } #content_all p{ color:#080404; font-weight: normal; text-align: justify; } #content_all h1,h2,h3,h4,h5,h6{ color:#080404; } #content_all .menutop{ display: block; width: 100%; height: 68px; position: absolute; left: 0; top:0; z-index: 1; background: #FFFFFF; } #content_all .menutop .topbox { width: 1300px; height: 68px; margin:0 auto; padding: 0; position: relative; } #content_all .menutop .topbox .time { float: left; width: 600px; height: 68px; background: url(../images/pc/kv_time_img_4.png)no-repeat 7px 2px; position: relative; } #content_all .menutop .topbox .time #clock{ position: absolute; left:127px; bottom: 7px; color:#09151b; } #content_all .menutop .topbox .time #clock .timemnum{ width: 62px; height: 42px; line-height: 50px; padding: 0px 0 0 7px; letter-spacing: 12px; background: url(../images/pc/TGH_clock_bg.png)no-repeat 0px 0px; background-size: 62px 42px; float: left; position: relative; } #content_all .menutop .topbox .time #clock .timemnum span{ display: block; width: 62px; height: 42px; padding:0; background: url(../images/pc/TGH_clock_bg2.png)no-repeat 0 0px; background-size: 62px 42px; position: absolute; left: 0; top:2px; z-index: 1; } #content_all .menutop .topbox .time #clock .timemnum:nth-child(1){ font-size: 33px; } #content_all .menutop .topbox .time #clock .timemnum:nth-child(2){ font-size: 12px; background: none; padding-left:3px; } #content_all .menutop .topbox .time #clock .timemnum:nth-child(3){ font-size: 33px; } #content_all .menutop .topbox .time #clock .timemnum:nth-child(4){ font-size: 12px; background: none; padding-left:3px; } #content_all .menutop .topbox .time #clock .timemnum:nth-child(5){ font-size: 33px; } #content_all .menutop .topbox .time #clock .timemnum:nth-child(6){ font-size: 12px; background: none; padding-left:3px; } #content_all .menutop .topbox .time #clock .text{ width: 16px; height: 16px; padding: 0; margin: 23px 0 0 5px; float: left; } #content_all .menutop .topbox .time a { display: block; width: 180px; height: 32px; font-size: 0; background: url(../images/pc/kv_goback_btn.png)no-repeat center 0; position: absolute; left: 214px; top:29px; } #content_all .menutop .topbox .time a:hover { background: url(../images/pc/kv_goback_btn.png)no-repeat center -32px; transition: 0; } #content_all .menutop .topbox nav{ float: right; } #content_all .menutop .topbox nav li{ float: left; width: 113px; height: 68px; line-height: 100px; text-align: center; margin-left:1px; list-style-type: none; background: url(../images/pc/TGH_movie_menu.png)no-repeat; background-position: 0 0; background-color:#f1f1f1; color: #2c383b; font-size:0 ; font-weight: 400; cursor: pointer; } #content_all .menutop .topbox nav li:nth-child(1),#content_all .menutop .topbox nav li:nth-child(1):hover{ background-position: 0 -0px; } #content_all .menutop .topbox nav li:nth-child(2),#content_all .menutop .topbox nav li:nth-child(2):hover{ background-position: 0 -136px; } #content_all .menutop .topbox nav li:nth-child(3),#content_all .menutop .topbox nav li:nth-child(3):hover{ background-position: 0 -68px; } #content_all .menutop .topbox nav li:nth-child(4),#content_all .menutop .topbox nav li:nth-child(4):hover{ background-position: 0 -204px; } #content_all .menutop .topbox nav li:hover,#content_all .menutop .topbox nav li.is-checked{ font-weight: 400; background: url(../images/pc/TGH_movie_menu.png)no-repeat; background-color: #e2d0a6; } #content_all .menutop .topbox nav li a{ width: 100%; height: 100%; display: block; } /* HeaderCon PC */ #content_all .headerCon { width: 100%; height: 590px; position: relative; overflow: hidden; } #content_all .headerCon .camerabox{ width: 100%; height: 590px; margin:0 auto; } #content_all .headerCon .camerabox .camera_wrap{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; } #content_all .headerCon .camerabox .kvbox { width: 1300px; height: 590px; margin:0 auto; padding: 0; position: relative; overflow: hidden; animation-delay:0s; } #content_all .headerCon .camerabox .kvbox>.kvicon{ width: 146px; height: 186px; background: url(../images/pc/TGH_movie_kv_icon1.png)no-repeat center top; position: absolute; left: 30px; top:30px; } #content_all .headerCon .camerabox .kvbox>h1{ width: 370px; height: 340px; font-size: 0px; background:url(../images/pc/TGH_movie_kv_h1.png)no-repeat center top; background-size: 370px 340px; animation-delay:0s; position: absolute; right: 60px; top:40px; } #content_all .headerCon .camerabox .kvbox>h2{ height: 0; font-size: 0; } #content_all .headerCon .camerabox .kvbox>p{ width: 100%; height: 0; font-size: 0; } #content_all .headerCon .camerabox .kvbox a{ display: block; width: 346px; height: 90px; line-height: 90px; text-align: center; font-size: 0px; background: url(../images/pc/TGH_movie_kvbtn.png)no-repeat; position: absolute; right: 60px; top:400px; } #content_all .headerCon .camerabox .kvbox a:hover{ background: url(../images/pc/TGH_movie_kvbtn_h.png)no-repeat; } #content_all .headerCon .camerabox .txtbox{ width: 0; height: 46px; padding: 0; border-bottom:1px solid #e2d0a6; position: absolute; left: 0; bottom:20px; overflow: hidden; animation:pcopen 2s ease 0.5s 1 forwards; } #content_all .headerCon .camerabox .txtbox p{ width: 1300px; height: 100%; font-size: 0; background: url(../images/pc/TGH_movie_txt.png)no-repeat 30px 0; background-size: 356px 34px; margin: 0 auto; animation:pcopen02 1s ease 2.5s 1 forwards; opacity: 0; } #content_all .keyword { width: 100%; position: relative; background:#f1f1f1; } #content_all .keyword .kwbox { width: 1300px; height: 70px; line-height: 70px; margin:0 auto; padding: 0; position: relative; } #content_all .keyword .kwbox h2 { width: 100px; font-size: 16px; font-weight: 200; color: #2c383b; float: left; margin-left: 135px; } #content_all .keyword .kwbox a { display: block; height: 30px; line-height: 30px; border-bottom: 1px solid #2c383b; font-size: 18px; font-weight: 200; color: #2c383b; margin: 18px 12px 0; float: left; } #content_all .keyword .kwbox a:hover{ opacity: 0.7; } /* HeaderCon PC End */ /* contentCon PC */ #content_all .contentCon { position: relative; text-align: center; margin: 0 auto;} #content_all .contentCon a{ display: block; color:#FFFFFF; text-decoration: none; border: none; } #content_all .contentCon h2 { width: 100%; height: 50px; font-size: 0px; background: url(../images/pc/TGH_movie_h2.png)no-repeat; margin: 50px 0 35px; } #content_all .contentCon .item01,#content_all .contentCon .item02{ position: relative; margin:0 auto; width: 100%; overflow: hidden; } #content_all .contentCon .itembox{ width: 1300px; height: 100%; margin:0 auto; position: relative; } #content_all .contentCon .point_movie{ position: absolute; left: 0; top:-68px; height: 0; } #content_all .contentCon .item01{ background: url(../images/pc/TGH_movie_item01bg.jpg) repeat; background-size: 100% 1470px; } #content_all .contentCon .item01 h2{ background-position: center 0; } #content_all .contentCon .item01 .itembox{ height: 1470px; overflow: hidden; } #content_all .contentCon .item01 .itembox .director { width: 325px; height: 1470px; float: left; } #content_all .contentCon .item01 .itembox .director .peo { width: 100%; height: 538px; background-color: #FFFFFF; font-size: 0; } #content_all .contentCon .item01 .itembox .director .peo:hover { opacity: 0.8; } #content_all .contentCon .item01 .itembox .director .more { width: 100%; height: 40px; line-height: 40px; color: #e2d0a6; text-decoration: underline; background: url(../images/pc/TGH_movie_moreicon.png)no-repeat 106px 10px; background-size: 20px; } #content_all .contentCon .item01 .itembox .director .more:hover { opacity: 0.8; } #content_all .contentCon .item01 .itembox .director .movie1997 { display: block; width: 100%; height: 260px; margin-top: 110px; position: relative; } #content_all .contentCon .item01 .itembox .director .movie2017 { display: block; width: 100%; height: 260px; margin-top: 90px; position: relative; } #content_all .contentCon .item01 .itembox .director h6 { width: 100%; height: 40px; line-height: 40px; font-size: 15px; font-weight: 400; letter-spacing: 3px; text-align: center; color: #e2d0a6; text-decoration: underline; position: absolute; left: 0; bottom: 0; } #content_all .contentCon .item01 .itembox .director:hover h6 { opacity: 0.8; } #content_all .contentCon .item01 .itembox #moviepoint { width: 100%; height: 0; position: absolute; left: 0; bottom: 994px; } #content_all .contentCon .item01 .itembox .director:nth-of-type(1) { border-left: 1px solid #e2d0a6; } #content_all .contentCon .item01 .itembox .director:nth-of-type(1) .peo{ background: url(../images/pc/TGH_movie_director1.jpg)no-repeat center top; background-size: 100%; } #content_all .contentCon .item01 .itembox .director:nth-of-type(1) .movie1997 { background: url(../images/pc/TGH_movie_movie1997_1.jpg)no-repeat center top; background-size: 100%; } #content_all .contentCon .item01 .itembox .director:nth-of-type(1) .movie1997:hover { background: url(../images/pc/TGH_movie_movie1997_1.gif)no-repeat center top; background-size: 100%; } #content_all .contentCon .item01 .itembox .director:nth-of-type(1) .movie2017 { background: url(../images/pc/TGH_movie_movie2017_1.jpg)no-repeat center top; background-size: 100%; } #content_all .contentCon .item01 .itembox .director:nth-of-type(2) { border-left: 1px solid #e2d0a6; border-right: 2px solid #e2d0a6; } #content_all .contentCon .item01 .itembox .director:nth-of-type(2) .peo{ background: url(../images/pc/TGH_movie_director2.jpg)no-repeat center top; background-size: 100%; } #content_all .contentCon .item01 .itembox .director:nth-of-type(2) .movie1997 { background: url(../images/pc/TGH_movie_movie1997_2.jpg)no-repeat center top; background-size: 100%; } #content_all .contentCon .item01 .itembox .director:nth-of-type(2) .movie1997:hover { background: url(../images/pc/TGH_movie_movie1997_2.gif)no-repeat center top; background-size: 100%; } #content_all .contentCon .item01 .itembox .director:nth-of-type(2) .movie2017 { background: url(../images/pc/TGH_movie_movie2017_2.jpg)no-repeat center top; background-size: 100%; } #content_all .contentCon .item01 .itembox .director:nth-of-type(3) { border-right: 1px solid #e2d0a6; border-left: 2px solid #e2d0a6; } #content_all .contentCon .item01 .itembox .director:nth-of-type(3) .peo{ background: url(../images/pc/TGH_movie_director3.jpg)no-repeat center top; background-size: 100%; } #content_all .contentCon .item01 .itembox .director:nth-of-type(3) .movie1997 { background: url(../images/pc/TGH_movie_movie1997_3.jpg)no-repeat center top; background-size: 100%; } #content_all .contentCon .item01 .itembox .director:nth-of-type(3) .movie2017 { background: url(../images/pc/TGH_movie_movie2017_3.jpg)no-repeat center top; background-size: 100%; } #content_all .contentCon .item01 .itembox .director:nth-of-type(3) .movie2017:hover { background: url(../images/pc/TGH_movie_movie2017_3.gif)no-repeat center top; background-size: 100%; } #content_all .contentCon .item01 .itembox .director:nth-of-type(3) .movie1997 h6 { text-decoration: none; } #content_all .contentCon .item01 .itembox .director:nth-of-type(4) { border-right: 1px solid #e2d0a6; } #content_all .contentCon .item01 .itembox .director:nth-of-type(4) .peo{ background: url(../images/pc/TGH_movie_director4.jpg)no-repeat center top; background-size: 100%; } #content_all .contentCon .item01 .itembox .director:nth-of-type(4) .movie1997 { background: url(../images/pc/TGH_movie_movie1997_4.jpg)no-repeat center top; background-size: 100%; } #content_all .contentCon .item01 .itembox .director:nth-of-type(4) .movie2017 { background: url(../images/pc/TGH_movie_movie2017_4.jpg)no-repeat center top; background-size: 100%; } #content_all .contentCon .item01 .itembox .director:nth-of-type(4) .movie2017:hover { background: url(../images/pc/TGH_movie_movie2017_4.gif)no-repeat center top; background-size: 100%; } #content_all .contentCon .item01 .itembox .director:nth-of-type(4) .movie1997 h6 { text-decoration: none; } #content_all .contentCon .item01 .itembox .year { width: 150px; height: 390px; } #content_all .contentCon .item01 .itembox .year h5:nth-of-type(1) { width: 150px; height: 42px; font-size: 0; background: url(../images/pc/TGH_movie_year.jpg)no-repeat 0 0; position: absolute; left: 576px; top:750px; } #content_all .contentCon .item01 .itembox .year h5:nth-of-type(2) { width: 150px; height: 42px; font-size: 0; background: url(../images/pc/TGH_movie_year.jpg)no-repeat 0 -42px; position: absolute; left: 576px; top:1100px; } #content_all .contentCon .item02 { background: #e2d0a6; } #content_all .contentCon .item02 h2 { background-position: center -50px; } #content_all .contentCon .item02 .itembox { height: 550px; overflow: hidden; } #content_all .contentCon .item02 .itembox .postteama { width: 1090px; height: 336px; margin:0 auto; } #content_all .contentCon .item02 .itembox .postteama .post h6 { width: 214px; height: 30px; line-height: 30px; font-size: 18px; font-weight: 400; background: url(../images/pc/TGH_movie_tagbg.jpg)no-repeat center top; } #content_all .contentCon .item02 .itembox .postteama .post .mask p { color:#12242a; text-align: center; font-size: 20px; } #content_all .contentCon .item02 .itembox .postteama .post .mask a { display: block; width: 140px; height: 40px; line-height: 36px; font-size: 20px; font-weight: 500; color:#12242a; border: 2px solid #12242a; position: absolute; left: 36px; bottom: 60px; } #content_all .contentCon .item02 .itembox .postteama .post .mask a:hover { color:#FFFFFF; background: #12242a; } #content_all .contentCon .item02 .slick-prev,#content_all .contentCon .item02 .slick-next{ width: 50px; height: 50px; top:40%; background: url(../images/arw.png)no-repeat; opacity: 0.7;} #content_all .contentCon .item02 .slick-prev { left: -50px; background-position: 0 0; } #content_all .contentCon .item02 .slick-next { right: -50px; background-position: -50px 0; } #content_all .contentCon .item02 .slick-prev:hover,#content_all .contentCon .item02 .slick-next:hover{ opacity: 1; } #content_all .contentCon .item02 .movebox { position: relative; margin:0 auto; width: 1920px; height: 180px; overflow: hidden; } #content_all .contentCon .item02 .movebox .move { width: 4400px; height: 100%; position: absolute; left:0; top:0; background: url(../images/pc/TGH_movie_item02_stillbg.png)repeat-x ; animation: pcopen03 100s linear 0s infinite normal; } #content_all .contentCon .item02 .movebox .move .stills { width: 210px; height: 128px; font-size: 20px; line-height: 20px; color:#000; margin:26px 4px 0; background: #FFFFFF; float: left; position: relative; } #content_all .contentCon .item02 .movebox .move .stills:nth-of-type(10) { background: #fa0; } #content_all .contentCon .item02 .movebox .move .stills img { display: block; width: 100%; height: 100%; } #content_all .contentCon .item02 .movebox .move .stills:hover .mask { display: block; width: 100%; height: 100%; background: url(../images/pc/TGH_movie_movepost_bg.png)no-repeat center top; background-color: rgba(0,0,0,0.7); position: absolute; left: 0; top:0; -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_all .contentCon .item02 .movebox .move .stills:hover .mask h6 { display: block; width: 100%; height: 30px; line-height: 30px; font-size: 18px; font-weight: 100; letter-spacing: 2px; color: #FFFFFF; margin-top:90px; } #content_all .contentCon .item02 .movebox .move .stills .mask h6{ display: none; } #content_all .contentCon .item03 { background: url(../images/pc/TGH_movie_item03bg.jpg)no-repeat center top; background-size: 100% 690px; position: relative; } #content_all .contentCon .item03 h2 { background-position: center -100px; } #content_all .contentCon .item03 .itembox { height: 650px; overflow: hidden; padding-top: 20px;r} #content_all .contentCon .item03 .itembox .postteama { width: 1090px; height: 306px; margin:0 auto; } #content_all .contentCon .item03 .itembox .postteama .post { display: block; height: 306px; } #content_all .contentCon .item03 .itembox .postteama .post .mask p { color:#12242a; text-align: center; font-size: 20px; } #content_all .contentCon .item03 .itembox .postteama .post .mask a { display: block; width: 140px; height: 40px; line-height: 36px; font-size: 20px; font-weight: 500; color:#12242a; border: 2px solid #12242a; position: absolute; left: 36px; bottom: 60px; } #content_all .contentCon .item03 .itembox .postteama .post .mask a:hover { color:#FFFFFF; background: #12242a; } #content_all .contentCon .item03 .slick-prev,#content_all .contentCon .item03 .slick-next{ width: 50px; height: 50px; top:40%; background: url(../images/arw_b.png)no-repeat; opacity: 0.7;} #content_all .contentCon .item03 .slick-prev { left: -50px; background-position: 0 0; } #content_all .contentCon .item03 .slick-next { right: -50px; background-position: -50px 0; } #content_all .contentCon .item03 .slick-prev:hover,#content_all .contentCon .item03 .slick-next:hover{ opacity: 1; } #content_all .contentCon .item03 .txtbox{ width: 0; height: 46px; padding: 0; border-bottom:1px solid #e2d0a6; position: absolute; left: 0; bottom:20px; overflow: hidden; animation:pcopen 2s ease 0.5s 1 forwards; } #content_all .contentCon .item03 .txtbox p{ width: 1300px; height: 100%; font-size: 0; background: url(../images/pc/TGH_movie_txt2.png)no-repeat center 0; background-size: 1300px 34px; margin: 0 auto; animation:pcopen02 1s ease 2.5s 1 forwards; opacity: 0; } /*片單動畫*/ .post{ display: block; width: 214px; height: 336px; float: left; position: relative; } .post img { display: block; width: 214px; height: 306px; position: absolute; left: 0; bottom: 0; } .post .mask{ width: 214px; height: 306px; z-index:99; position:absolute; left: 0; bottom: 0; opacity:0 ; transition: opacity 0.8s; } .post:hover .mask{ opacity:1 ; transition: opacity 0.8s;} .post .mask p{ height: 100%; font-size: 20px; font-weight: 500; text-align: center; line-height: 30px; padding: 40px 30px 30px 30px; letter-spacing: 1px; opacity:0 ; transition: opacity 0.8s; } .post:hover .mask p{ animation:copyFade1 0.8s ease 1 forwards; } /*片單動畫 底色*/ .item02 .post .mask{background-color:rgba(255, 249, 243, 0.9)} .item03 .post .mask{background-color:rgba(255, 249, 243, 0.9)} @keyframes copyFade1 { 0% { opacity: 0; -moz-transform: translateY(30px); -ms-transform: translateY(30px); -webkit-transform: translateY(30px); transform: translateY(30px); } 100% { opacity: 1; -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } } /*片單動畫 end*/ @keyframes pcopen { 0% { -moz-transform: translateX(0px); -ms-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); } 100% { width:100%; } } @keyframes pcopen02 { 0% { opacity: 0; -moz-transform: translateX(0px); -ms-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); } 100% { opacity: 1; } } @keyframes pcopen03 { 0% { left:0px; } 100% { left:-2181px; } } /***手機版***/ /***手機版***/ /***手機版***/ @media screen and (max-width: 1100px) { /*額外設定大小網*/ .only_pc{ display: none; } .only_m{ display: block; } /*額外設定大小網*/ /* 貼心小叮嚀 */ #btn_note{ margin:0 auto; width:100%; height: 50px; display: block; cursor: pointer; background:url(../images/noticeh2.png) no-repeat center 3px; font-size: 0; } .note_box{ width: 640px; margin: 0px auto; padding:5px 0; display: none; font-size:25px; list-style-position: outside;} .note_box ul li{ font-size: 25px; line-height: 40px; text-align:left; font-weight:normal; list-style-position: outside; list-style-type: decimal; text-align:justify; margin: 0 0 10px 50px; padding-right: 20px;} /* 貼心小叮嚀 */ /* 焦點影展 */ #Banners{ display: none; } #AdBanners{ width: 100%; background:#894647; float:left; padding:30px 0px 0px; } #AdBanners h3{ } #Banners_m{ display: block; position: relative; width: 550px; height: 75px; margin: 5px auto 40px auto; overflow: hidden;} #left_m, #right_m{ background:url(https://video.friday.tw/eventcom/images/arw.png) no-repeat 8px 16px; display:block; height: 70px; width: 30px; float:left; cursor: pointer; position: absolute; left:-5px; top: 0px; z-index: 1;} #Banners_m #right_m{ background-position: -33px 16px; position: absolute; left: 530px; top: 0px; float:right;} .banner_In_m{ margin: 0 auto;overflow: hidden; position: relative; width: 515px; height: 80px; padding: 0px; margin-left: 10px;} #Banners_m ul{ position: absolute; width: 1500px; } #Banners_m ul li{ float: left; width: 236px; height: 80px; position: relative; margin-right: 20px; } #Banners_m ul li img{ border: 2px solid #FFFFFF; width: 100%; height: 74px; } /* 焦點影展 */ /*額外加合作廠商logo*/ .ftr_logos_m { margin:0 auto 15px; text-align: center;} .ftr_logos_m a{ display: inline-block; margin:0 20px;} .ftr_logos_m a:nth-child(1) { height: 100px; } .ftr_logos_m a:nth-child(2) { height: 100px; } .ftr_logos_m a img{ display: block; width: 100%; height: 100%; } .ftr_logos_m a:nth-child(1) img{ display: block; width: 215px; height:50px; margin:25px 0; } /*額外加合作廠商logo*/ #container { min-width: 100%; } /*一定要設*/ #content_all{ font-size:30px; font-weight: bold; text-align: center; position: relative; width: 100%; max-width: 1100px; min-width: 640px; height: 100%; padding-top: 190px; } #content_all .menutop{ display: block; width: 100%; height: 190px; position: absolute; left: 0; top:0; z-index: 1; background: #f8f5f0; } #content_all .menutop .topbox { width: 100%; height: 100%; margin:0 auto; padding: 0; position: relative; z-index: 9999; } /*#content_all .menutop .topbox .time { float: left; width: 100%; height: 140px; background: url(../images/mo/kv_time_img_m.png)no-repeat center top; position: relative; } #content_all .menutop .topbox .time #clock{ position: absolute; left:183px; bottom: 30px; color:#09151b; font-size: 34px; }*/ #content_all .menutop .topbox .time { float: none; width: 560px; height: 90px; background: url(../images/mo/kv_time_img_m.png)no-repeat -170px top; position: relative; margin: 0 auto; } #content_all .menutop .topbox .time #clock{ position: absolute; left:230px; bottom: 28px; color:#09151b; font-size: 34px; font-weight: 500; } /*#content_all .menutop .topbox .time #clock{ position: absolute; left:266px; bottom: 30px; color:#09151b; font-size: 34px; font-weight: 500; }*/ #content_all .menutop .topbox .time #clock .timemnum{ width: 62px; height: 42px; line-height: 48px; padding: 4px 0 0 7px; letter-spacing: 12px; background: none; background-size: 62px 42px; float: left; position: relative; } #content_all .menutop .topbox .time #clock .timemnum span{ display: block; width: 62px; height: 42px; padding:0; background: none; background-size: 62px 42px; position: absolute; left: 0; top:2px; z-index: 1; } #content_all .menutop .topbox .time #clock .timemnum:nth-child(1){ font-size: 34px; } #content_all .menutop .topbox .time #clock .timemnum:nth-child(2){ font-size: 12px; background: none; padding-left:3px; } #content_all .menutop .topbox .time #clock .timemnum:nth-child(3){ font-size: 34px; } #content_all .menutop .topbox .time #clock .timemnum:nth-child(4){ font-size: 12px; background: none; padding-left:3px; } #content_all .menutop .topbox .time #clock .timemnum:nth-child(5){ font-size: 34px; } #content_all .menutop .topbox .time #clock .timemnum:nth-child(6){ font-size: 12px; background: none; padding-left:3px; } #content_all .menutop .topbox .time #clock .text{ width: 16px; height: 16px; font-size: 22px; padding: 0; margin: 16px 0 0 5px; float: left; } #content_all .menutop .topbox .time a { display: block; width: 240px; height: 65px; font-size: 0; background: url(../images/mo/kv_goback_btn_m.png)no-repeat center 0; background-size: 240px 130px; position: absolute; left: 350px; top:12px; } #content_all .menutop .topbox .time a:hover { background: url(../images/mo/kv_goback_btn_m.png)no-repeat center -64px; transition: 0; } #content_all .menutop .topbox nav{ float: left; width: 100%; } #content_all .menutop .topbox nav li{ float: left; width: 33.1%; height: 100px; line-height: 100px; text-align: center; margin-left:0.2%; list-style-type: none; color: #2c383b; font-size:0 ; font-weight: 400; cursor: pointer; } #content_all .menutop .topbox nav li:nth-child(1){ background: url(../images/mo/TGH_movie_menu_m1.png)no-repeat center top; background-color:#ececec;} #content_all .menutop .topbox nav li:nth-child(2){ background: url(../images/mo/TGH_movie_menu_m2.png)no-repeat center top; background-color:#ececec;} #content_all .menutop .topbox nav li:nth-child(3){ background: url(../images/mo/TGH_movie_menu_m3.png)no-repeat center top; background-color:#ececec;} #content_all .menutop .topbox nav li:nth-child(1):hover{ background: url(../images/mo/TGH_movie_menu_m1.png)no-repeat center top; background-color: #e2d0a6; } #content_all .menutop .topbox nav li:nth-child(2):hover{ background: url(../images/mo/TGH_movie_menu_m2.png)no-repeat center top; background-color: #e2d0a6; } #content_all .menutop .topbox nav li:nth-child(3):hover{ background: url(../images/mo/TGH_movie_menu_m3.png)no-repeat center top; background-color: #e2d0a6; } #content_all .menutop .topbox nav li a{ width: 100%; height: 100%; display: block; font-size: 0; } /* HeaderCon PC */ #content_all .headerCon { width: 100%; height: 400px; position: relative; overflow: hidden; } #content_all .headerCon .camerabox{ width: 100%; height: 400px; margin:0 auto; } #content_all .headerCon .camerabox .camera_wrap{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; } #content_all .headerCon .camerabox #camera_wrap_2 { width: 100%; height: 100%; background: url(../images/mo/TGH_movie_kvbg.jpg)no-repeat center top; background-size: 1100px 400px; position: absolute; left: 0; top: 0; z-index: -1; } #content_all .headerCon .camerabox .kvbox { width: 640px; height: 400px; margin:0 auto; padding: 0; position: relative; overflow: hidden; animation-delay:0s; } #content_all .headerCon .camerabox .kvbox>.kvicon{ display: none; } #content_all .headerCon .camerabox .kvbox>h1{ width: 510px; height: 144px; font-size: 0px; background:url(../images/mo/TGH_movie_kv_h1_m.png)no-repeat center top; background-size: 510px 144px; animation-delay:0s; position: absolute; right: 60px; top:0px; } #content_all .headerCon .camerabox .kvbox>p{ width: 100%; height: 0; font-size: 0; } #content_all .headerCon .camerabox .kvbox a{ display: block; width: 277px; height: 56px; line-height: 52px; text-align: center; font-size: 0px; background: url(../images/pc/TGH_movie_kvbtn_h.png)no-repeat; background-size: 100%; position: absolute; right: 180px; top:150px; } #content_all .headerCon .camerabox .kvbox a:hover{ background: url(../images/pc/TGH_movie_kvbtn_h.png)no-repeat; background-size: 100%; } #content_all .headerCon .camerabox .txtbox{ width: 0; height: 46px; padding: 0; border-bottom:3px solid #e2d0a6; position: absolute; left: 0; bottom:6px; overflow: hidden; animation:pcopen 2s ease 0.5s 1 forwards; } #content_all .headerCon .camerabox .txtbox p{ width: 640px; height: 100%; font-size: 0; background: url(../images/pc/TGH_movie_txt.png)no-repeat center 0; background-size: 356px 34px; margin: 0 auto; animation:pcopen02 1s ease 2.5s 1 forwards; opacity: 0; } #content_all .keyword { width: 100%; position: relative; background:#f1f1f1; } #content_all .keyword .kwbox { width: 640px; height: 70px; line-height: 70px; margin:0 auto; padding: 0; position: relative; } #content_all .keyword .kwbox h2 { width: 100px; font-size: 16px; font-weight: 200; color: #2c383b; float: left; margin-left: 135px; } #content_all .keyword .kwbox a { display: block; height: 30px; line-height: 30px; border-bottom: 1px solid #2c383b; font-size: 18px; font-weight: 200; color: #2c383b; margin: 18px 12px 0; float: left; } #content_all .keyword .kwbox a:hover{ opacity: 0.7; } /* HeaderCon PC End */ /*主要內容 #main_m */ #content_all .contentCon { width: 640px; height: 100%; position: relative; text-align: center; margin: 0 auto; } #content_all a:hover{ text-decoration: none;} #content_all .contentCon { width: 100%; position: relative; text-align: center; margin: 0 auto; background: #FFFFFF; } #content_all .contentCon a{ display: block; color:#FFFFFF; text-decoration: none; } #content_all .contentCon h2 { width: 100%; height: 80px; font-size: 0px; background: url(../images/mo/TGH_movie_h2_m.png); margin:0; margin: 20px auto 10px; } #content_all .contentCon .item01,#content_all .contentCon .item02{ position: relative; margin:0 auto; width: 100%; overflow: hidden; } #content_all .contentCon .itembox{ width: 640px; height: 100%; margin:0 auto; padding:0; } #content_all .contentCon .point_movie{ position: absolute; left: 0; top:-190px; height: 0; } #content_all .contentCon .item01{ background: #e2d0a6; position: relative; } #content_all .contentCon .item01 h2{ background-position: center 0; } #content_all .contentCon .item01 .itembox { height: 1936px; overflow: hidden; } #content_all .contentCon .item01 .itembox p { width: 100%; font-size: 24px; line-height: 32px; text-align: center; margin:30px auto; } #content_all .contentCon .item01 .itembox .director:nth-of-type(n) { width: 640px; height: 420px; margin-bottom: 10px; float: left; border: none; } #content_all .contentCon .item01 .itembox .director .peo { width: 640px; height: 420px; background-color: #FFFFFF; font-size: 0; } #content_all .contentCon .item01 .itembox .director .peo:hover { opacity: 1; } #content_all .contentCon .item01 .itembox .director:nth-of-type(1) .peo{ background: url(../images/mo/TGH_movie_director_m1.jpg)no-repeat center top; background-size: 100%; } #content_all .contentCon .item01 .itembox .director:nth-of-type(2) .peo{ background: url(../images/mo/TGH_movie_director_m2.jpg)no-repeat center top; background-size: 100%; } #content_all .contentCon .item01 .itembox .director:nth-of-type(3) .peo{ background: url(../images/mo/TGH_movie_director_m3.jpg)no-repeat center top; background-size: 100%; } #content_all .contentCon .item01 .itembox .director:nth-of-type(4) .peo{ background: url(../images/mo/TGH_movie_director_m4.jpg)no-repeat center top; background-size: 100%; } #content_all .contentCon .item01 .itembox .director .more { display: none; } #content_all .contentCon .item01 .itembox .director .movie1997 { display: none; } #content_all .contentCon .item01 .itembox .director .movie2017 { display: none; } #content_all .contentCon .item01 .itembox .year { display: none; } .slick-dots{ left: 0px; bottom: 10px; width: 110px; height: 20px; } .slick-dots li { width: 10px; height: 10px; margin:0 8px; } .slick-dots li button:before{ font-size: 0; opacity: 0.4; background: #FFFFFF; border-radius: 10px;} .slick-dots li button:hover:before, .slick-dots li.slick-active button:before { opacity: 1; color: #FFFFFF; } #content_all .contentCon .item01 .itembox #moviepoint { width: 100%; height: 0; position: absolute; left: 0; bottom: 610px; } #content_all .contentCon .item02 { background: #e2d0a6; } #content_all .contentCon .item02 h2 { background-position: center -80px; } #content_all .contentCon .item02 .itembox { height: 580px; overflow: hidden; } #content_all .contentCon .item02 .itembox .postteama_m { width: 549px; height: 420px; margin:0 auto; } #content_all .contentCon .item02 .itembox .postteama_m .post h6 { width: 270px; height: 34px; line-height: 34px; font-size: 22px; font-weight: 500; background: url(../images/pc/TGH_movie_tagbg.jpg)no-repeat center top; background-size: 270px 40px; } #content_all .contentCon .item02 .itembox .postteama_m .post { display: block; height: 420px; } #content_all .contentCon .item02 .itembox .postteama_m .post .mask { display: none; } #content_all .contentCon .item02 .itembox .postteama_m .post:hover .mask { display: block; } #content_all .contentCon .item02 .itembox .postteama_m .post .mask p { color:#12242a; text-align: center; font-size: 25px; } #content_all .contentCon .item02 .itembox .postteama_m .post .mask:hover a { display: block; width: 195px; height: 60px; line-height: 56px; font-size: 27px; font-weight: 700; color:#12242a; border: 2px solid #12242a; position: absolute; left: 36px; bottom: 70px; } #content_all .contentCon .item02 .itembox .postteama_m .post .mask:hover a:hover { color:#FFFFFF; background: #12242a; } #content_all .contentCon .item02 .slick-prev,#content_all .contentCon .item02 .slick-next{ width: 50px; height: 50px; top:40%; background: url(../images/arw.png)no-repeat; opacity: 0.7;} #content_all .contentCon .item02 .slick-prev { left: -50px; background-position: 0 0; z-index: 9000; } #content_all .contentCon .item02 .slick-next { right: -50px; background-position: -50px 0; z-index: 9000; } #content_all .contentCon .item02 .slick-prev:hover,#content_all .contentCon .item02 .slick-next:hover{ opacity: 1; } #content_all .contentCon .item02 .movebox { display: none; } #content_all .contentCon .item02 .post{ display: block; width: 270px; height: 420px; float: left; position: relative; } #content_all .contentCon .item02 .post img { display: block; width: 270px; height: 386px; position: absolute; left: 0; bottom: 0; } #content_all .contentCon .item02 .post .mask{ width: 270px; height: 386px; z-index:99; position:absolute; left: 0; bottom: 0; opacity:0 ; transition: opacity 0.8s; } #content_all .contentCon .item02 .post:hover .mask{ opacity:1 ; transition: opacity 0.8s;} #content_all .contentCon .item02 .post .mask p{ height: 100%; font-size: 24px; font-weight: 500; line-height: 35px; padding: 50px 40px 40px; letter-spacing: 1px; opacity:0 ; transition: opacity 0.8s; } #content_all .contentCon .item02 .post:hover .mask p{ animation:copyFade1 0.8s ease 1 forwards; } #content_all .contentCon .item03 { background: url(../images/pc/TGH_movie_item03bg.jpg)no-repeat center top; background-size: 100% 690px; position: relative; } #content_all .contentCon .item03 h2 { height: 114px; background-position: center -160px; } #content_all .contentCon .item03 .itembox { height: 680px; overflow: hidden; padding-top: 0px; } #content_all .contentCon .item03 .itembox .postteama_m { width: 549px; height: 386px; margin:0 auto; } #content_all .contentCon .item03 .itembox .postteama_m .post { display: block; height: 386px; } #content_all .contentCon .item03 .itembox .postteama_m .post .mask{ display: none; } #content_all .contentCon .item03 .itembox .postteama_m .post:hover .mask{ display: block; } #content_all .contentCon .item03 .itembox .postteama_m .post .mask p { color:#000000; text-align: center; font-size: 25px; } #content_all .contentCon .item03 .itembox .postteama_m .post .mask a { display: block; width: 195px; height: 60px; line-height: 56px; font-size: 27px; font-weight: 700; color:#12242a; border: 2px solid #12242a; position: absolute; left: 36px; bottom: 70px; } #content_all .contentCon .item03 .itembox .postteama_m .post .mask a:hover { color:#FFFFFF; background: #12242a; } #content_all .contentCon .item03 .slick-prev,#content_all .contentCon .item03 .slick-next{ width: 50px; height: 50px; top:40%; background: url(../images/arw_b.png)no-repeat; opacity: 0.7;} #content_all .contentCon .item03 .slick-prev { left: -50px; background-position: 0 0; z-index: 9000; } #content_all .contentCon .item03 .slick-next { right: -50px; background-position: -50px 0; z-index: 9000; } #content_all .contentCon .item03 .slick-prev:hover,#content_all .contentCon .item03 .slick-next:hover{ opacity: 1; } #content_all .contentCon .item03 .txtbox{ width: 0; height: 70px; padding: 0; border-bottom:3px solid #e2d0a6; position: absolute; left: 0; bottom:20px; overflow: hidden; animation:pcopen 2s ease 0.5s 1 forwards; } #content_all .contentCon .item03 .txtbox p{ width: 100%; height: 100%; font-size: 0; background: url(../images/mo/TGH_movie_txt2_m.png)no-repeat center 0; background-size: 408px 60px; margin: 0 auto; animation:pcopen02 1s ease 2.5s 1 forwards; opacity: 0; } #content_all .contentCon .item03 .post{ display: block; width: 270px; height: 420px; float: left; position: relative; } #content_all .contentCon .item03 .post img { display: block; width: 270px; height: 386px; position: absolute; left: 0; bottom: 0; } #content_all .contentCon .item03 .post .mask{ width: 270px; height: 386px; z-index:99; position:absolute; left: 0; bottom: 0; opacity:0 ; transition: opacity 0.8s; } #content_all .contentCon .item03 .post:hover .mask{ opacity:1 ; transition: opacity 0.8s;} #content_all .contentCon .item03 .post .mask p{ height: 100%; font-size: 24px; font-weight: 500; line-height: 35px; padding: 80px 40px 40px 40px; letter-spacing: 1px; opacity:0; transition: opacity 0.8s; } #content_all .contentCon .item03 .post:hover .mask p{ animation:copyFade1 0.8s ease 1 forwards; } }/*手機版end