/*活動用*/ body{ margin:0; padding: 0; background: #eeeeee;} .full-width{width: 100%;} .fixed-width{ width: 1366px; margin: auto; } /*額外設定大小網*/ .only_pc{ display: block; } .only_m{ display: none; } /*額外設定大小網*/ /***PC版***/ /*** container ***/ #container { margin: 0 auto; background-color:#FFFFFF; position: relative; overflow: hidden; } #content_all { min-width: 1366px; color:#FFFFFF; position: relative; background: url(../images/pc/q&a_kv_bg2.jpg) repeat-x top; } #content_all a{text-decoration: none;} /*** container END ***/ /* HeaderCon PC */ #content_all .headerCon {width: 100%; height: 680px; position: relative; margin:0 auto; background: url(../images/pc/q&a_kv_bg.jpg) no-repeat center top; overflow: hidden; } #content_all .headerCon .catchlogo{ width: 100%; height: 200px; background:url(../images/pc/q&a_kvlogo.png) no-repeat center top; position: absolute; left:0; z-index: 0; font-size: 0; opacity: 0; } #content_all .headerCon p{ height: 0; position: absolute; font-size: 0; z-index: 10; opacity: 0;} #content_all .headerCon .iconbox{ width: 790px; height: 196px; margin:0 auto; overflow: hidden; } #content_all .headerCon .iconbox .lefticon{ width: 236px; height: 200px; position: relative; float: left; } #content_all .headerCon .iconbox .lefticon .lefticon_1{ position: absolute; left: 0; top:0; z-index: 1; } #content_all .headerCon .iconbox .lefticon .lefticon_2{ position: absolute; left: -5px; top: 28px; z-index: 1; } #content_all .headerCon .iconbox .lefticon .lefticon_3{ position: absolute; right: 15px; top: -2px; z-index: 1; } #content_all .headerCon .iconbox .lefticon .lefticon_4{ position: absolute; left: 67px; top: 0px; z-index: 1; } #content_all .headerCon .iconbox .lefticon .lefticon_5{ position: absolute; left: 108px; top: 60px; z-index: 1; } #content_all .headerCon .iconbox .righticon{ width: 194px; height: 200px; position: relative; background: url(../images/pc/q&a_kvlogo_right_icon.png)no-repeat center top; float: right; } #content_all .headerCon .box{ width: 790px; height: 454px; margin:0 auto; padding: 10px; font-size: 0; background: #181818; position: relative; } #content_all .headerCon .box iframe{ width: 100%; height: 100%; z-index: 1; } #content_all .headerCon .box .left_camela{ width: 260px; height: 620px; background: url(../images/pc/q&a_kv_iconcamela.png)no-repeat 0 0; position: absolute; left: -270px; top:-125px; } #content_all .headerCon .box .right_camela{ width: 388px; height: 620px; background: url(../images/pc/q&a_kv_iconcamela.png)no-repeat -260px 0; position: absolute; right: -250px; top:-125px; z-index: 0; } /* HeaderCon PC End */ /* contentCon PC */ #content_all .contentCon { position: relative; text-align: center; } #content_all .contentCon { position: relative; margin: 0 auto; } #content_all .contentCon a{ display: block; color:#FFFFFF; text-decoration: none; } #content_all .contentCon .item01{ position: relative; margin: 0 auto; padding:0; width: 1114px; } #content_all .contentCon .item01 .point{ font-size: 0; } #content_all .contentCon .item01 ul{ position: relative; width: 100%; float: left; padding: 30px 0 0 0; margin:0 auto; } #content_all .contentCon .item01 ul li{ float: left; width: 358px; height: 244px; margin:0 20px 30px 0; position: relative; } #content_all .contentCon .item01 ul li:nth-child(3n){ margin:0 0 30px 0; } #content_all .contentCon .item01 ul li a{ display: block; width: 100%; height: 100%; background:url(../images/pc/q&a_postbg.png) no-repeat; background-size: 358px 244px; padding: 10px 10px 30px 10px; font-weight: bold; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; } #content_all .contentCon .item01 ul li a:hover{ background:url(../images/pc/q&a_postbg_hover.png) no-repeat; background-size: 358px 244px; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; } #content_all .contentCon .item01 ul li a img{ display: block; width: 100%; height: 100%; } #content_all .contentCon .item01 ul li a .mask{ width: 338px; height: 50px; line-height: 22px; padding-top: 4px; background:rgba(0,0,0,0.8); position: absolute; bottom:30px; left:10px; color:#FFFFFF; font-size: 18px; font-weight: 100; opacity: 1; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; } #content_all .contentCon .item01 ul li a h5{ width: 338px; font-size: 14px; text-align: center; position: absolute; bottom:35px; left:10px; } #content_all .contentCon .item01 ul li a:hover .mask{ position: absolute; opacity: 1; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; } /* contentCon PC */ /***手機版***/ /***手機版***/ /***手機版***/ @media screen and (max-width: 1100px) { /*額外設定大小網*/ .only_pc{ display: none; } .only_m{ display: block; } /*額外設定大小網*/ #container { } #content_all{ font-size:30px; font-weight: bold; text-align: center; position: relative; width: 100%; max-width: 1100px; min-width: 640px; height: 100%; } #container .kv_bg2{ width: 100%; height: 535px; position: absolute; top:53px; left:0; font-size: 0; background: url(../images/mo/goodmovie_kvbg_m.png) no-repeat center top; z-index: 5;} /* HeaderCon PC */ #content_all .headerCon{ position: relative; width: 100%; height: 535px; margin: 0 auto; padding-top: 0; } #content_all .headerCon .catchlogo{ width: 100%; height: 200px; background:url(../images/pc/q&a_kvlogo.png) no-repeat center top; font-size: 0; position: absolute; left: 0px; z-index: 0; opacity: 0;} #content_all .headerCon p{ position: absolute; width: 640px; height: 0px; font-size: 0; z-index: 10; opacity: 0; left: 0px; top:110px; } #content_all .headerCon .iconbox{ width:640px; height: 196px; margin:0 auto; overflow: hidden; } #content_all .headerCon .iconbox .lefticon{ width: 148px; height: 128px; position: relative; float: left; } #content_all .headerCon .iconbox .lefticon .lefticon_1{ width: 148px; height: 128px; position: absolute; left: 0; top:0; z-index: 1; } #content_all .headerCon .iconbox .lefticon .lefticon_2{ position: absolute; left: -5px; top: 28px; z-index: 1; display: none; } #content_all .headerCon .iconbox .lefticon .lefticon_3{ position: absolute; right: 15px; top: -2px; z-index: 1; } #content_all .headerCon .iconbox .lefticon .lefticon_4{ position: absolute; left: 67px; top: 0px; z-index: 1; display: none; } #content_all .headerCon .iconbox .lefticon .lefticon_5{ position: absolute; left: 76px; top: 60px; z-index: 1; } #content_all .headerCon .iconbox .righticon{ width: 125px; height: 200px; position: relative; background: url(../images/pc/q&a_kvlogo_right_icon.png)no-repeat center bottom; background-size: 125px 129px; float: right; } #content_all .headerCon .box{ width: 580px; height: 326px; margin:0 auto; padding: 10px; font-size: 0; background: #181818; position: relative; } #content_all .headerCon .box iframe{ width: 100%; height: 100%; z-index: 1; } #content_all .headerCon .box .left_camela{ width: 216px; height: 490px; background: url(../images/pc/q&a_kv_iconcamela.png)no-repeat 0 0; background-size: 512px 490px; position: absolute; left: -230px; top:-140px; } #content_all .headerCon .box .right_camela{ width: 296px; height: 490px; background: url(../images/pc/q&a_kv_iconcamela.png)no-repeat -216px 0; background-size: 512px 490px; position: absolute; right: -230px; top:-140px; z-index: 0; } /* HeaderCon PC End */ /* contentCon PC */ #content_all .contentCon { position: relative; margin: 0 auto; } #content_all .contentCon a{ display: block; color:#FFFFFF; text-decoration: none; } #content_all .contentCon .item01{ position: relative; margin: 0 auto; padding:0; width: 640px; } #content_all .contentCon .item01 .point{ font-size: 0; } #content_all .contentCon .item01 ul{ position: relative; width: 100%; padding: 30px 30px 0 30px; margin:0 auto; float: left; } #content_all .contentCon .item01 ul li{ float: left; width: 580px; height: 395px; margin:0 0 30px 0; position: relative; } #content_all .contentCon .item01 ul li a{ display: block; width: 100%; height: 100%; background:url(../images/pc/q&a_postbg.png) no-repeat; background-size: 580px 395px; padding: 10px 10px 40px 10px; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; } #content_all .contentCon .item01 ul li a:hover{ display: block; width: 100%; height: 100%; background:url(../images/pc/q&a_postbg.png) no-repeat; background-size: 580px 395px; padding: 10px 10px 40px 10px; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; } #content_all .contentCon .item01 ul li a.postbg2{ display: block; width: 100%; height: 100%; background:url(../images/pc/q&a_postbg_hover.png) no-repeat; background-size: 580px 395px; padding: 10px 10px 40px 10px; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; } #content_all .contentCon .item01 ul li a img{ display: block; width: 100%; height: 100%; } #content_all .contentCon .item01 ul li a .mask{ width: 560px; height: 90px; line-height: 40px; background:rgba(0,0,0,0.8); padding-top:10px; position: absolute; bottom:39px; left:10px; color:#FFFFFF; font-size: 27px; font-weight: 100; letter-spacing: -1px; opacity: 1; overflow: hidden; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; } #content_all .contentCon .item01 ul li a:hover .mask{ width: 560px; height: 90px; line-height: 40px; background:rgba(0,0,0,0.8); padding-top:10px; position: absolute; bottom:39px; left:10px; color:#FFFFFF; font-size: 27px; font-weight: 100; letter-spacing: -1px; opacity: 1; overflow: hidden; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; } #content_all .contentCon .item01 ul li a h5{ width: 100%; font-size: 23px; text-align: center; position: absolute; bottom:49px; left:0px; } /* contentCon PC */ }/*手機版end*/