#content_pc {position: relative;} #content_m {position: relative;} #pckeyvew >a{ color:#000000;} #pckeyvew >a:hover{ color:#000000;text-decoration: none;} #content_m >a{ color:#000000; font-size: 18px; right:5px;} #pckeyvew >a:hover{ color:#000000;text-decoration: none;} /*活動用*/ #pckeyvew{background-image: url(../images/pc/LUCKY2017_keyview.jpg); width:910px; height:435px; background-size: 910px 435px; position: relative; left: 0; top: 0; z-index: 100; overflow: hidden;} #pckeyvew a.btn{ font-size: 0; background:url(../images/pc/LUCKY2017_topbtn.gif)no-repeat; width: 257px; height: 180px; position: absolute; right:110px; bottom:-30px; transition:all 0.1s; -ms-transition:all 0.1s; -moz-transition:all 0.1s; -webkit-transition:all 0.1s; -o-transition:all 0.1s;} #pckeyvew a.btn:hover{ bottom:-10px; transition:all 0.1s; -ms-transition:all 0.1s; -moz-transition:all 0.1s; -webkit-transition:all 0.1s; -o-transition:all 0.1s;} #pckeyvew div.word01{ position: relative;} #pckeyvew div.word01 h1{ font-size: 0; background:url(../images/pc/LUCKY2017_h1.png)no-repeat; width: 425px; height: 180px; position: absolute; right:10px; top:80px; } #pckeyvew div.word01 p.p1{ font-size: 0; background:url(../images/pc/LUCKY2017_p.png)no-repeat; width: 300px; height: 150px; position: absolute; left: 87px; top: 234px;} #pckeyvew div.word01 p.p1 a{ display: block; width: 100%; height: 100%;} #pckeyvew div.word01 p.p2{ font-size: 47px; line-height: 50px; color:#ff0300; position: absolute; left: 108px; top: 307px;} #pckeyvew div.word01 a.why199{ text-indent:-99999px;width: 165px; height: 35px; display: block; background: url(../images/pc/LUCKY2017_tag.png)no-repeat; position: absolute; right: 0; top: 0; } #content_pc .body_bg { position: relative; background:url(../images/pc/LUCKY2017_bodybg_m2.jpg)no-repeat; width: 910px; height: 1600px;} #content_pc .body_bg1 { position: absolute; background:url(../images/pc/LUCKY2017_bodybg_m.png)no-repeat; width: 910px; height: 12px; left: 0; bottom: 0px; z-index: 10;} #content_pc .btntop {display: block; position: absolute; background:url(../images/pc/LUCKY2017_topbtn2.png)no-repeat; width: 260px; height: 98px; right:102px; bottom: 0px; z-index: 5;} #content_pc .star{ position: absolute; display; right:20px; top:290px; background: url(../images/pc/LUCKY2017_star.gif) no-repeat; background-size:15px 15px; width:15px; height:15px; transition:all 0.1s; -ms-transition:all 0.1s; -moz-transition:all 0.1s; -webkit-transition:all 0.1s; -o-transition:all 0.1s;} #content_pc .star2{ position: absolute; display; right:60px; top:265px; background: url(../images/pc/LUCKY2017_star.gif) no-repeat; background-size:20px 20px; width:20px; height:20px; transition:all 0.1s; -ms-transition:all 0.1s; -moz-transition:all 0.1s; -webkit-transition:all 0.1s; -o-transition:all 0.1s;} #content_pc .toppost1{ position: absolute; display; left:12px; top:-25px; background: url(../images/pc/LUCKY2017_toppost1.png) no-repeat; width: 106px; height: 190px; transition:all 0.1s; -ms-transition:all 0.1s; -moz-transition:all 0.1s; -webkit-transition:all 0.1s; -o-transition:all 0.1s;} #content_pc .toppost2{ position: absolute; display; left:343px; top:-5px; background: url(../images/pc/LUCKY2017_toppost2.png) no-repeat; width: 106px; height: 190px; transition:all 0.1s; -ms-transition:all 0.1s; -moz-transition:all 0.1s; -webkit-transition:all 0.1s; -o-transition:all 0.1s;} #content_pc .toppost3{ position: absolute; display; left:467px; top:-43px; background: url(../images/pc/LUCKY2017_toppost3.png) no-repeat; width: 106px; height: 190px; transition:all 0.1s; -ms-transition:all 0.1s; -moz-transition:all 0.1s; -webkit-transition:all 0.1s; -o-transition:all 0.1s;} #content_pc .toppost1:hover{ top:-20px; } #content_pc .toppost2:hover{ top:0px; } #content_pc .toppost3:hover{ top:-40px; } /*串場動畫*/ .da-thumbs { list-style: none; width: 910px; height:892px; position: relative; margin: 0; padding: 0;} .da-thumbs li { float: left; margin: 5px; background: #fff; padding: 0; position: relative; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .da-thumbs li h2,.da-thumbs li h2 img { display: block; position: relative; width: 100%; height: 100%;font-weight: normal; font-size: 16px; text-align: center; color: rgba(255,255,255,0.9); text-shadow: 1px 1px 1px rgba(0,0,0,0.2);} .da-thumbs li h2 { overflow: hidden; } .da-thumbs li h2 div { position: absolute; background: #ff0b14; background: rgba(255,255,255,0.9); width: 100%; height: 100%; } .da-thumbs li h2 div span { position: relative; height: 100%; display: block; padding: 5px 0; margin: 10px; font-size: 16px; text-align: justify; line-height: 22px; text-transform: uppercase; font-weight: normal; color: rgba(0,0,0,0.9);/* text-shadow: 1px 1px 1px rgba(255,255,255,255.2); */} .da-thumbs li h2 div span a { opacity: 0.7; position: absolute; width: 100%; display: block; padding: 5px; margin: 0; font-size: 18px; font-weight: bold; text-align: center; line-height: 22px; text-transform: uppercase; color: rgba(255,255,255,0.9); background: #d0362c; border-radius: 5px; text-decoration: none; letter-spacing: 1px; text-shadow: none;} .da-thumbs li h2 div span a:hover { opacity: 1; background: #b10b00; } .da-thumbs li h2 div span a.link1 { left:0; bottom:65px; opacity: 1;} .da-thumbs li h2 div span a.link2 { left:0; bottom:25px;} /*串場動畫*/ #content_pc section .post{ position: absolute; width: 158px; height: 236px; margin: 1px; float: left;} #content_pc section li.post1 { left:65px; top:105px; } #content_pc section li.post2 { left:254px; top:105px } #content_pc section li.post3 { left:65px; top:375px; } #content_pc section li.post4 { left:254px; top:375px; } #content_pc section li.post5 { left:65px; top:645px; } #content_pc section li.post6 { left:254px; top:645px; } #content_pc section li.post7 { left:65px; top:915px; } #content_pc section li.post8 { left:254px; top:915px; } #content_pc section li.post9 { left:65px; top:1185px; } #content_pc section li.post10 { left:254px; top:1185px; } #content_pc section li.post11 { right:247px; top:105px; } #content_pc section li.post12 { right:56px; top:105px; } #content_pc section li.post13 { right:247px; top:375px; } #content_pc section li.post14 { right:56px; top:375px; } #content_pc section li.post15 { right:247px; top:645px; } #content_pc section li.post16 { right:56px; top:645px; } #content_pc section li.post17 { right:247px; top:915px; } #content_pc section li.post18 { right:56px; top:915px; } #content_pc section li.post19 { right:247px; top:1185px; } #content_pc section li.post20 { right:56px; top:1185px; } /*.da-thumbs li.post1 h2 div { position: absolute; background: #4e60c7; background: rgba(78,96,199,0.8); width: 100%; height: 100%; } .da-thumbs li.post7 h2 div { position: absolute; background: #c3319e; background: rgba(195,49,158,0.8); width: 100%; height: 100%; } .da-thumbs li.post11 h2 div { position: absolute; background: #be8a21; background: rgba(190,138,33,0.8); width: 100%; height: 100%; } .da-thumbs li.post15 h2 div { position: absolute; background: #7dad38; background: rgba(125,173,56,0.8); width: 100%; height: 100%; } */ /***手機版***/ /***手機版***/ /***手機版***/ @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;} #content_m div.word01{ } #content_m div.word01 a.tag1{ width: 164px; height: 40px; display: block; background: url(../images/mo/LUCKY2017_tag_m.png)no-repeat; position: absolute; right: 0; top: 0;} #content_m div.word01 h1{ font-size: 0; background: url(../images/mo/LUCKY2017_kvh2_m.png)no-repeat;width: 640px; height: 240px; position: absolute; left: 0; top:50px;} #content_m div.word01 a.p1{display: block; font-size: 0; background: url(../images/mo/LUCKY2017_kvp_m.png)no-repeat;width: 286px; height: 140px; position: absolute; left: 30px; bottom:20px;} #content_m #mokv01 a.btn{ display: block; font-size: 0; background: url(../images/mo/LUCKY2017_kvbtn_m.png)no-repeat; width: 330px; height: 130px; position: absolute; right: 30px; top:290px; } #content_m #mokv01 a:hover{ } #mokv01{background: url(../images/mo/LUCKY2017_keyview_m.jpg)no-repeat; width:100%; height:622px; position: relative; } .mo_moverword{position:absolute;font-family: Arial,Helvetica, heiti tc, SimHei, 微軟正黑體,Microsoft JhengHei,serif; font-size:22px; text-align: center; width:640px; color:#fff; margin:275px 0px 0px 0px; line-height:32px} .mo_moversale01{position:absolute; text-align:center; width:640px; margin: 0px; padding: 0px;} .mo_moversale01 a, .mo_moversale02 a{ } .mo_moversale01 a.watch{ float:left; position: absolute;display: block;width: 200px;height: 47px;top: 22px; left: 71px; background: url(../images/pc/watchtv01.png)no-repeat; transition:all 0.3s; -ms-transition:all 0.3s; -moz-transition:all 0.3s; -webkit-transition:all 0.3s; -o-transition:all 0.3s; } #tag1_m{position: absolute;left: 285px; top:22px;} .tag1:hover{ -webkit-transform: translate(0px, 0); -moz-transform: translate(0px, 0);-o-transform: translate(0px, 0);transform: translate(0px, 0);} #menu_pad_m {background-color:#00afc7; height: 315px; width: 640px; padding:10px 0 0 10px;} #menu_pad_m ul li{width: 304px; height: 141px; float: left; margin:0 10px 10px 0;} #menu_pad_m ul li.menu01_m a{ display: block; background:url(../images/mo/bookmenu_m.jpg); background-position: 0 0; width: 304px;height: 141px;} #menu_pad_m ul li.menu02_m a{ display: block; background:url(../images/mo/bookmenu_m.jpg); background-position: 0 423px; width: 304px;height: 141px;} #menu_pad_m ul li.menu03_m a{ display: block; background:url(../images/mo/bookmenu_m.jpg); background-position: 0 282px; width: 304px;height: 141px;} #menu_pad_m ul li.menu04_m a{ display: block; background:url(../images/mo/bookmenu_m.jpg); background-position: 0 141px; width: 304px;height: 141px;} /*主要內容 #main_m */ #content_m {width: 640px; height: 100%; position: relative; overflow: hidden; background: url(../images/mo/LUCKY2017_bodybg_m2_m.jpg)no-repeat; } #content_m a:hover{ text-decoration: none;} #content_m .mct_area1,.mct_area2,.mct_area3,.mct_area4{ width:640px;position: relative;padding-top: 170px;} #content_m .content-wrap a.left_btn{ position: absolute; left:224px; top:-120px; background:url(../images/pc/moremoive_btn.jpg); background-position: 0 0; width: 207px; height: 77px; } #content_m .content-wrap a.right_btn{ position: absolute; left:492px; top:-120px; background:url(../images/pc/moremoive_btn.jpg); background-position: 0 77px; width: 207px; height: 77px; } #content_m .link2{ opacity: 0.7; } #mo_zoneall01{background-color: #fff; position:absolute;z-index:-99;opacity:1;} .mo_moversale02{ text-align:center; width:640px;height: 63px;margin:0px 0px 30px 0px} #content_m .mo_moversale02 a{ float: left; width: 200px; height: 60px; font-size: 22px; line-height: 60px; font-weight: bold; text-decoration: none; transition:all 0.3s; -ms-transition:all 0.3s; -moz-transition:all 0.3s; -webkit-transition:all 0.3s; -o-transition:all 0.3s;} #content_m .mo_moversale02 a.left_btn{ margin: 0; background: #9a9a9a; color:#FFFFFF; } #content_m .mo_moversale02 a.right_btn{ background: #1c95ff; color:#FFFFFF; } }/*手機版結尾*/