/*活動用*/ body{ margin:0; padding: 0; background:url(../images/pc/cnymovie_bg3.jpg);} .full-width{width: 100%;} .fixed-width{width: 1200px;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: 1200px; margin: 0 auto; background:url(../images/pc/cnymovie_bg.jpg) no-repeat; background-size: 1920px 656px; background-position: center top; position: relative; overflow: hidden;} #container_pc .kv_bg2{ width: 100%; height: 606px; position: absolute; top:51px; left:0; font-size: 0; background: url(../images/pc/cnymovie_bg2.png) no-repeat; background-position: center top; z-index: 5;} #container_pc .kv_peo{ width: 100%; height: 606px; position: absolute; left:0; font-size: 0; background: url(../images/pc/cnymovie_peo.png) no-repeat; background-position: center top; z-index: 3; opacity: 0;} #container_pc nav.menu_mk{ width: 100%; height: 105px; margin: 0 auto; position: absolute; left: 0px; top:660px; background:url(../images/pc/cnymovie_nav_bg.png); z-index: 11; } #container_pc nav ul{width: 1111px; height: 30px; padding:0;} #container_pc nav ul li{ width: 184px; height: 105px; background:url(../images/pc/cnymovie_nav.png) no-repeat; background-position: 0 0; float: left; margin-right: 1px; } #container_pc nav ul li:nth-child(1){ background-position: 0 0; margin-left: 1px; transform: all 1s;} #container_pc nav ul li:nth-child(2){ background-position: 0 -105px; } #container_pc nav ul li:nth-child(3){ background-position: 0 -210px; } #container_pc nav ul li:nth-child(4){ background-position: 0 -315px; } #container_pc nav ul li:nth-child(5){ background-position: 0 -420px; } #container_pc nav ul li:nth-child(6){ background-position: 0 -525px; } #container_pc nav ul li:nth-child(1):hover{ background-position: -184px 0; transform: all 1s; } #container_pc nav ul li:nth-child(2):hover{ background-position: -184px -105px; } #container_pc nav ul li:nth-child(3):hover{ background-position: -184px -210px; } #container_pc nav ul li:nth-child(4):hover{ background-position: -184px -315px; } #container_pc nav ul li:nth-child(5):hover{ background-position: -184px -420px; } #container_pc nav ul li:nth-child(6):hover{ background-position: -184px -525px; } #container_pc nav ul li a{display: block; width: 100%; height: 100%; font-size: 0;} #content_pc { min-width: 1200px; color:#FFFFFF; } #content_pc a{text-decoration: none;} /*共用end*/ /* HeaderCon PC */ #content_pc .headerCon {width: 1200px; height: 606px; position: relative;} #content_pc .headerCon .catchlogo{ width: 700px; height: 315px; background:url(../images/pc/cnymovie_kvtitle.png) no-repeat; position: absolute; left:250px; z-index: 9; font-size: 0; opacity: 0; } #content_pc .headerCon .kv_icon1{ width:130px; height: 200px; background:url(../images/pc/cnymovie_icon1.png) no-repeat; position: absolute; top:370px; z-index: 10; font-size: 0; opacity: 0; } #content_pc .headerCon .kv_icon2{ width:200px; height: 190px; background:url(../images/pc/cnymovie_icon2.png) no-repeat; position: absolute; top:380px; z-index: 10; font-size: 0; opacity: 0; } #content_pc .headerCon p{ width: 356px; height: 74px; background:url(../images/pc/cnymovie_kv_p.png) no-repeat; position: absolute; left:400px; font-size: 0; z-index: 10; opacity: 0;} #content_pc .headerCon .go_cnygame{ width: 62px; height: 62px; background:url(../images/pc/cnymovie_kv_btn.png) no-repeat; position: absolute; right: 375px; font-size: 0; z-index: 10; opacity: 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 .headerCon .go_cnygame:hover{ } /* HeaderCon PC End */ /* contentCon PC */ #content_pc .contentCon { width: 1200px; height: 5056px; margin-top: 105px; position: relative; text-align: center; overflow: hidden;} #content_pc .contentCon .item01{ position: relative; height: 841px; margin: 0; padding:35px 0; width: 100%; } #content_pc .contentCon .item02{ position: relative; height: 841px; margin: 0; padding:35px 0; width: 100%; } #content_pc .contentCon .item03{ position: relative; height: 841px; margin: 0; padding:35px 0; width: 100%; } #content_pc .contentCon .item04{ position: relative; height: 841px; margin: 0; padding:35px 0; width: 100%; } #content_pc .contentCon .item05{ position: relative; height: 841px; margin: 0; padding:35px 0; width: 100%; } #content_pc .contentCon .item06{ position: relative; height: 841px; margin: 0; padding:35px 0; width: 100%; } #content_pc .contentCon .point{ position: absolute; top:-100px; left: 0; width: 100%; height: 0px; z-index: 11; font-size: 0;} #content_pc .contentCon .flower{ font-size: 0; width: 460px; height: 460px; position: absolute; bottom:-60px; left:-290px; background: url(../images/pc/cnymovie_flower.png) no-repeat; z-index: -1; } #content_pc .contentCon .flower2{ font-size: 0; width: 460px; height: 460px; position: absolute; bottom:-180px; right:-250px; background: url(../images/pc/cnymovie_flower.png) no-repeat; z-index: -1; } #content_pc .contentCon h2{ width: 1200px; height: 106px; margin:0 0 25px 0; font-size: 0; position: relative; background:url(../images/pc/cnymovie_bodytitle.png) no-repeat; } #content_pc .contentCon .item01 h2{ background-position: 0 0; } #content_pc .contentCon .item02 h2{ background-position: 0 -106px; } #content_pc .contentCon .item03 h2{ background-position: 0 -212px; } #content_pc .contentCon .item04 h2{ background-position: 0 -318px; } #content_pc .contentCon .item05 h2{ background-position: 0 -424px; } #content_pc .contentCon .item06 h2{ background-position: 0 -530px; } #content_pc .contentCon .love{ width: 110px; height: 25px; line-height: 25px; text-align: right; position: absolute; right: 10px; bottom:-35px; font-size: 13px; font-weight: 400; letter-spacing: 1px; background: url(../images/pc/cnymovie_post_love.png) no-repeat; background-size: 110px;} #content_pc .contentCon .love2{ width: 110px; height: 25px; line-height: 25px; text-align: right; position: absolute; right: 10px; bottom:-35px; font-size: 13px; font-weight: 400; letter-spacing: 1px; background: url(../images/pc/cnymovie_post_love2.png) no-repeat; background-size: 110px;} #content_pc .contentCon .love3{ width: 110px; height: 25px; line-height: 25px; text-align: right; position: absolute; right: 10px; bottom:-35px; font-size: 13px; font-weight: 400; letter-spacing: 1px; background: url(../images/pc/cnymovie_post_love3.png) no-repeat; background-size: 110px;} .item01 ul{ position: relative; width: 1075px; height: 320px; padding: 0; margin:0 auto;} .item01 ul li{ width: 202px; height: 272px; background:url(../images/pc/cnymovie_postbg.jpg) no-repeat; box-shadow: 0px 4px 5px rgba(0,0,0,0.75); padding: 10px; position: relative; } .item02 ul{ position: relative; width: 1075px; height: 310px; padding: 0; margin:5px auto 0;} .item02 ul li{ width: 202px; height: 272px; background:url(../images/pc/cnymovie_postbg.jpg) no-repeat; box-shadow: 0px 4px 5px rgba(0,0,0,0.75); padding: 10px; position: relative; } .item03 ul{ position: relative; width: 1075px; height: 310px; padding: 0; margin:0 auto;} .item03 ul li{ width: 202px; height: 272px; background:url(../images/pc/cnymovie_postbg.jpg) no-repeat; box-shadow: 0px 4px 5px rgba(0,0,0,0.75); padding: 10px; position: relative; } .item04 ul{ position: relative; width: 1075px; height: 310px; padding: 0; margin:0 auto;} .item04 ul li{ width: 202px; height: 272px; background:url(../images/pc/cnymovie_postbg.jpg) no-repeat; box-shadow: 0px 4px 5px rgba(0,0,0,0.75); padding: 10px; position: relative; } .item05 ul{ position: relative; width: 1075px; height: 310px; padding: 0; margin:0 auto;} .item05 ul li{ width: 202px; height: 272px; background:url(../images/pc/cnymovie_postbg.jpg) no-repeat; box-shadow: 0px 4px 5px rgba(0,0,0,0.75); padding: 10px; position: relative; } .item06 ul{ position: relative; width: 1075px; height: 310px; padding: 0; margin:0 auto;} .item06 ul li{ width: 202px; height: 272px; background:url(../images/pc/cnymovie_postbg.jpg) no-repeat; box-shadow: 0px 4px 5px rgba(0,0,0,0.75); padding: 10px; position: relative; } #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;} #content_pc .contentCon .item05 .slick-track { margin-left: 225px;} #content_pc .contentCon .item06 .slick-track { margin-left: 225px;} /*片單滑過特效*/ #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: 182px; height: 252px;} /*#content_pc .view img {display: block;position: relative; width: 228px; height: 324px;}*/ #content_pc .view .info {display: inline-block;text-decoration: none;padding:0;width:184px;height:252px;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.9);-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition: all 0.1s ease-in-out;-moz-transition: all 0.1s ease-in-out;-o-transition: all 0.1s ease-in-out;-ms-transition: all 0.1s ease-in-out;transition: all 0.1s ease-in-out;} #content_pc .second-effect:hover .mask {opacity: 1;border:120px solid rgba(255,255,255,0.9);} #content_pc .second-effect:hover .info { border:0px solid rgba(196,186,172,.7); top:-120px; left:-121px; 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.1s; -webkit-transition-delay:0.1s; -o-transition-delay:0.1s; -ms-transition-delay:0.1s; transition-delay:0.1s;} #content_pc .second-effect .info h3{ width: 184px; font-size: 19px; padding: 0 10px; margin: 0; color:#000000; font-weight: 100; text-align: center; position: absolute; left: 0px; top: 20px;} #content_pc .second-effect .info p{ width: 184px; line-height: 25px; font-size: 17px; padding: 0 20px; margin: 0; color:#000000; text-align: left; font-weight: 100; text-align: justify; position: absolute; left: 0px; top: 60px;} #content_pc .second-effect .info a.link1{ background-color: #12242a; color:#FFFFFF; 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: 70px;} #content_pc .second-effect .info a.link1:hover{ background-color: #12242a; color:#FFFFFF; font-weight: 100;} #content_pc .second-effect .info a.link2{ 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: 13px; bottom: 20px;} #content_pc .second-effect .info a.link2:hover{ background-color: #12242a; color:#FFFFFF; font-weight: 100;} /*片單滑過特效*/ /*箭頭下-邊框*/ .second-effect .info a .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 .info a: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_pc{ display: none;} #container_m{ display: block; width: 100%; max-width: 640px; min-width: 320px;} #header_m{ display:block; width: 100%; height: 53px; padding: 16px 5px;} #content_m{ font-size:30px; font-weight: bold; text-align: center; display:block; position: relative; background: url(../images/pc/cnymovie_bg3.jpg); width: 640px; height: 100%; overflow: hidden; } #mokv01{ background: url(../images/mo/cnymovie_kvbg_m.jpg) no-repeat; position: relative; width: 640px; height: 471px;} #mokv01 .kvlogo_m{ width: 640px; height: 315px; background:url(../images/mo/cnymovie_kvlogo_m.png) no-repeat; font-size: 0; position: absolute; left: 0px; z-index: 10; opacity: 0;} #mokv01 .text{ position: absolute; width: 430px; height: 80px; left:104px; background:url(../images/mo/cnymovie_kvbtn_m.png) no-repeat; font-size: 0; z-index: 10; opacity: 0;} #mokv01 .kvpeo_m{width: 640px; height: 471px; background: url(../images/mo/cnymovie_kvpeo_m.png) no-repeat; position: absolute; top: 0; left: 0; font-size: 0; z-index: 3;} #mokv01 .kvbg2_m{width: 640px; height: 471px; background: url(../images/mo/cnymovie_kvbg2_m.png) no-repeat; position: absolute; top: 0; left: 0; font-size: 0; z-index: 5;} .menu_pad_m {position: relative; width: 100%; height: 230px; padding: 0; } .menu_pad_m ul{ width: 100%; height: 100%; margin: 0; padding-left:5px; border:0; } .menu_pad_m ul li { width: 208px; height: 115px; list-style-type: none; float: left; margin:0 2px 1px 0; padding: 0; background:url(../images/mo/cnymovie_nav_m.jpg)no-repeat; } .menu_pad_m ul li:nth-child(1) { background-position: 0 0 ; } .menu_pad_m ul li:nth-child(2) { background-position: 0 -115px ; } .menu_pad_m ul li:nth-child(3) { background-position: 0 -230px ; } .menu_pad_m ul li:nth-child(4) { background-position: 0 -345px ; } .menu_pad_m ul li:nth-child(5) { background-position: 0 -460px ; } .menu_pad_m ul li:nth-child(6) { background-position: 0 -575px ; } .menu_pad_m ul li a{ display: block; width: 100%; height: 100%; font-size: 0;} /*主要內容 #main_m */ #content_m2 {width: 640px; height: 100%; position: relative; overflow: hidden; } #content_m a:hover{ text-decoration: none;} #content_m .mct_area1,.mct_area2,.mct_area3,.mct_area4,.mct_area5,.mct_area6{ width:640px; position: relative; padding-top: 30px; width: 640px; height: 8580px;}} #content_m h2{ position: relative; width: 100%; height: 84px; font-size: 0; margin:0px; background:url(../images/mo/cnymovie_title_m.png) no-repeat; } #content_m .mct_area1 h2{ background-position: 0 0px; } #content_m .mct_area2 h2{ background-position: 0 -84px; } #content_m .mct_area3 h2{ background-position: 0 -168px; } #content_m .mct_area4 h2{ background-position: 0 -252px; } #content_m .mct_area5 h2{ background-position: 0 -336px; } #content_m .mct_area6 h2{ background-position: 0 -420px; } #content_m2 ul{ position: relative; padding: 0; margin: 15px 0 0 30px;} #content_m2 ul li{ width: 580px; height: 782px; background: url(../images/pc/cnymovie_postbg.jpg)no-repeat; background-size: 100%; box-shadow: 0px 4px 5px rgba(0,0,0,0.75); padding: 20px; margin-bottom: 60px; position: relative; } #content_m2 ul li .love{ color:#f5eeda; width: 200px; height: 60px; line-height: 52px; text-align: right; position: absolute; right: 10px; bottom:-60px; font-size: 25px; font-weight: 400; letter-spacing: 1px; background: url(../images/pc/cnymovie_post_love.png) no-repeat; background-size: 220px; } #content_m2 ul li .love2{ color:#f5eeda; width: 200px; height: 60px; line-height: 52px; text-align: right; position: absolute; right: 10px; bottom:-60px; font-size: 25px; font-weight: 400; letter-spacing: 1px; background: url(../images/pc/cnymovie_post_love2.png) no-repeat; background-size: 220px; } #content_m2 ul li .love3{ color:#f5eeda; width: 200px; height: 60px; line-height: 52px; text-align: right; position: absolute; right: 10px; bottom:-60px; font-size: 25px; font-weight: 400; letter-spacing: 1px; background: url(../images/pc/cnymovie_post_love3.png) no-repeat; background-size: 220px; } #content_m2 ul li img{ width: 540px; height: 742px; display: block; } #content_m2 ul li .mask_m{ width: 540px; height: 120px; background-color: rgba(0,0,0,0.85); position: absolute; bottom: 20px;} #content_m2 ul li .mask_m h3{ height: 70px; line-height: 70px; font-size: 33px; color:#efe6c7; } #content_m2 ul li .mask_m p{ height: 50px; line-height: 30px; font-size: 26px; color:#FFFFFF; font-weight: 100; } #content_m2 ul li a{ display: block; width: 100%; height: 100%;} /*#content_m .TGH_movie_post1_m>div{ } #content_m .TGH_movie_post1_m img{ width: 520px; height: 740px; } #content_m .mct_area2 ul{ position: relative; width: 100%; height: 740px; padding: 5px 0 0 5px; margin-bottom: 49px;} #content_m .mct_area2 ul li{ width: 520px; height: 740px; } #content_m .mct_area3 ul{ position: relative; width: 100%; height: 740px; padding: 5px 0 0 5px; margin-bottom: 42px;} #content_m .mct_area3 ul li{ width: 520px; height: 740px; } #content_m .mct_area4 ul{ position: relative; width: 100%; height: 740px; padding: 5px 0 0 5px; margin-bottom: 49px;} #content_m .mct_area4 ul li{ width: 520px; height: 740px; } .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: 520px; height: 100%; float: left;overflow: hidden;position: relative;text-align: center; cursor: default; margin-left: 5px;} .view .mask{width: 100%;height: 100%;position: absolute;overflow: hidden;top: 0;left: 0;} .view img {display: block;position: relative; width: 520px; height: 740px;} .view .info {display: inline-block;text-decoration: none;padding:0; width: 520px; height: 740px;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.9);-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:260px solid rgba(255,255,255,0.9);} .second-effect:hover .info { top:-260px; left:-260px; 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 .info h3{ width: 520px; height: 50px; line-height: 50px; font-size:40px; padding: 0 10px; margin: 0; color:#000000; font-weight: 100; text-align: center; position: absolute; left: 0px; top: 50px;} .second-effect .info p{ width: 520px; line-height: 50px; font-size: 35px; padding: 0 20px; margin: 0; color: #000000; font-weight: 100; text-align: justify; position: absolute; left: 0px; top: 140px;} .second-effect .info a.link1{ width: 480px;height: 100px;line-height: 100px;font-size: 35px;font-weight: 100;border: 1px solid #12242a;padding: 0 10px;text-align: center;position: absolute;left: 20px;bottom: 230px;background-color: #12242a; color:#FFFFFF; } .second-effect .info a.link2{ width: 480px;height: 100px;line-height: 100px;font-size: 35px;font-weight: 100;border: 1px solid #12242a;padding: 0 10px;text-align: center;position: absolute;left: 20px;bottom: 80px; } *//*.second-effect .info a.link2{ width: 480px;height: 100px;line-height: 100px;font-size: 35px;font-weight: 100;border: 1px solid #12242a;padding: 0 10px;text-align: center;position: absolute;left: 20px;bottom: 120px; }*/ /* 小網片單滑過特效*/ }/*手機版end*/