/*活動用*/ body{ margin:0; padding: 0; background: #eeeeee;} .full-width{width: 100%;} .fixed-width{ width: 1200px; margin: auto; } /*額外設定大小網*/ .only_pc{ display: block; } .only_m{ display: none; } /*額外設定大小網*/ /***PC版***/ #container { } #content_all { min-width: 1200px; color:#FFFFFF; position: relative; background: url(../images/pc/site_bg1.jpg)no-repeat center top; background-size: 100% 4579px; background-color: #000000;} #content_all a{text-decoration: none;} /* HeaderCon PC */ /*#content_all .headerCon { width: 1200px; height: 550px; position: relative;background: #fa0; }*/ #content_all .headerCon { width: 992px; height: 500px; position: relative; margin:0 auto; } #content_all .headerCon .catchlogo{ position: absolute;width: 992px;height: 430px;top:10px;left:0px;z-index: 9999;} #content_all .headerCon nav{ position: absolute; top:450px; right:0px;width: 992px; z-index: 9000;} #content_all .headerCon nav ul{position: relative;} #content_all .headerCon nav ul li{ width: 230px; height: 40px; float: left; position: relative;} #content_all .headerCon nav ul li a{ display: block; width: 230px; height: 40px; background: url(../images/pc/header/menu_pc.png)no-repeat; 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_all .headerCon nav ul li a:hover{ display: block; -webkit-transform: translate(0, -5px); -moz-transform: translate(0, -5px);-o-transform: translate(0, -5px);transform: translate(0, -5px);} #content_all .headerCon nav ul li a.nav01{ background-position: 0px 0px;} #content_all .headerCon nav ul li a.nav02{ background-position: 0px -40px;} #content_all .headerCon nav ul li a.nav03{ background-position: 0px -80px;} #content_all .headerCon nav ul li a.nav04{ background-position: 0px -120px;} #content_all .headerCon nav ul li.li01{ position: absolute; left:40px; top:0;} #content_all .headerCon nav ul li.li02{ position: absolute; left:245px; top:0;} #content_all .headerCon nav ul li.li03{ position: absolute; right:290px; top:0;} #content_all .headerCon nav ul li.li04{ position: absolute; right:30px; top:0;} #content_all .headerCon .aw1{position: absolute; right:30px; top:12px;} #content_all .headerCon .aw2{position: absolute; right:10px; top:12px;} #content_all .headerCon .aw3{position: absolute; right:-25px; top:12px;} #content_all .headerCon .fbBtn { display: block; position: absolute; top: 15px; right:30px;z-index: 100;} #content_all .headerCon > h1,#content_all .headerCon > h2,#content_all .headerCon > p,#content_all .headerCon > i,#content_all .headerCon > b{ width: 0; height: 0; font-size: 0; position: absolute; } /* HeaderCon PC End */ #point1{ position: absolute; top:-10px; } #point2{ position: absolute; top:70px; } #point3{ position: absolute; top:30px; } #point4{ position: absolute; top:50px; } /* contentCon PC */ #content_all .contentCon { position: relative; text-align: center; margin: 0 auto; } #content_all .contentCon a{ display: block; color:#FFFFFF; text-decoration: none; } #content_all .contentCon .item01{ width: 1200px; position: relative; margin:0 auto; } #content_all .contentCon .item02{ width: 1200px; padding-top:70px; position: relative; margin:0 auto;} #content_all .contentCon .item03{ width: 1200px; padding-top: 30px; position: relative; margin:0 auto;} #content_all .contentCon .item04{ width: 1200px; padding-top: 46px; padding-bottom: 70px; position: relative; margin:0 auto;} #content_all .contentCon .ban{ position: relative; margin:0 auto; overflow: hidden; } #content_all .contentCon h3{ width: 730px; height: 60px; background:url(../images/pc/title1.png) no-repeat; margin:15px auto; } #content_all .contentCon .item01 h3{ background-position: 0 0;} #content_all .contentCon .item02 h3{ background-position: 0 -60px;} #content_all .contentCon .item03 h3{ background-position: 0 -120px;} #content_all .contentCon .item04 h3{ background-position: 0 -180px;} #content_all .contentCon h4{ margin:15px auto; } #content_all .contentCon .item01 h4{ width: 670px; height: 90px; background:url(../images/pc/title1_2.png) no-repeat;} #content_all .contentCon .item02 h4{ width: 670px; height: 130px; background:url(../images/pc/title2_2.png) no-repeat;} #content_all .contentCon .item03 h4{ width: 670px; height: 130px; background:url(../images/pc/title3_2.png) no-repeat;} #content_all .contentCon .item04 h4{ width: 690px; height: 80px; background:url(../images/pc/title4_2.png) no-repeat;} #content_all .contentCon h5{ margin:50px auto 5px; width: 140px; height: 36px; background:url(../images/pc/title1_3.png) no-repeat;} #content_all .contentCon .item02 h5{ margin-top: 20px; } #content_all .contentCon .item03 h5{ margin-top: 20px;} #content_all .contentCon .item04 h5{ margin-top: 20px;} #content_all .contentCon .box{ width: 642px; height: 367px; margin:0 auto; font-size: 25px; } #content_all .box a{ text-decoration: none; position: relative;} #content_all .box .opacity{opacity: 1;transition:all 0.5s;-ms-transition:all 0.5s;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;} #content_all .box span{z-index: 999; position: absolute; display: block;opacity: 0;text-align: center; color:#FFFFFF;text-shadow: 1px 1px 1px rgba(0%,0%,0%,1); transition:all 0.5s;-ms-transition:all 0.5s;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;} #content_all .box span:hover{opacity: 0.8;transition:all 0.5s;-ms-transition:all 0.5s;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;} #content_all .item01 .hd_01{position: absolute;top:0;left:5px;width: 313px;height: 215px;background-color: #000000;border: 1px solid #de2304;background: url(../images/post/pic1_1.jpg) no-repeat;} #content_all .item01 .hd_01_1{position: absolute;top:0;left:5px;width: 313px;height: 215px;background-color: #000000;padding-top: 95px;} #content_all .item01 .hd_02{position: absolute;top:0;left:323px;width: 313px;height: 142px;background-color: #000000;border: 1px solid #de2304; background: url(../images/post/pic1_2.jpg) no-repeat;} #content_all .item01 .hd_02_1{position: absolute;top:0;left:323px;width: 313px;height: 142px;background-color: #000000;padding-top: 55px;} #content_all .item01 .hd_03{position: absolute;top:220px;left:5px;width: 313px;height: 142px;background-color: #000000;border: 1px solid #de2304;background: url(../images/post/pic1_3.jpg) no-repeat;} #content_all .item01 .hd_03_1{position: absolute;top:220px;left:5px;width: 313px;height: 142px;background-color: #000000;padding-top: 55px;} #content_all .item01 .hd_04{position: absolute;top:148px;left:323px;width: 313px;height: 215px;background-color: #000000;border: 1px solid #de2304; background: url(../images/post/pic1_4.jpg) no-repeat;} #content_all .item01 .hd_04_1{position: absolute;top:148px;left:323px;width: 313px;height: 215px;background-color: #000000;padding-top: 95px;} #content_all .item02 .hd_01{position: absolute;top:0;left:5px;width: 313px;height: 215px;background-color: #000000;border: 1px solid #de2304;background: url(../images/post/pic2_1.jpg) no-repeat;} #content_all .item02 .hd_01_1{position: absolute;top:0;left:5px;width: 313px;height: 215px;background-color: #000000;padding-top: 95px;} #content_all .item02 .hd_02{position: absolute;top:0;left:323px;width: 313px;height: 142px;background-color: #000000;border: 1px solid #de2304; background: url(../images/post/pic2_2.jpg) no-repeat;} #content_all .item02 .hd_02_1{position: absolute;top:0;left:323px;width: 313px;height: 142px;background-color: #000000;padding-top: 55px;} #content_all .item02 .hd_03{position: absolute;top:220px;left:5px;width: 313px;height: 142px;background-color: #000000;border: 1px solid #de2304;background: url(../images/post/pic2_3.jpg) no-repeat;} #content_all .item02 .hd_03_1{position: absolute;top:220px;left:5px;width: 313px;height: 142px;background-color: #000000;padding-top: 55px;} #content_all .item02 .hd_04{position: absolute;top:148px;left:323px;width: 313px;height: 215px;background-color: #000000;border: 1px solid #de2304; background: url(../images/post/pic2_4.jpg) no-repeat;} #content_all .item02 .hd_04_1{position: absolute;top:148px;left:323px;width: 313px;height: 215px;background-color: #000000;padding-top: 95px;} #content_all .item03 .hd_01{position: absolute;top:0;left:5px;width: 313px;height: 215px;background-color: #000000;border: 1px solid #de2304;background: url(../images/post/pic3_1.jpg) no-repeat;} #content_all .item03 .hd_01_1{position: absolute;top:0;left:5px;width: 313px;height: 215px;background-color: #000000;padding-top: 95px;} #content_all .item03 .hd_02{position: absolute;top:0;left:323px;width: 313px;height: 142px;background-color: #000000;border: 1px solid #de2304; background: url(../images/post/pic3_2.jpg) no-repeat;} #content_all .item03 .hd_02_1{position: absolute;top:0;left:323px;width: 313px;height: 142px;background-color: #000000;padding-top: 55px;} #content_all .item03 .hd_03{position: absolute;top:220px;left:5px;width: 313px;height: 142px;background-color: #000000;border: 1px solid #de2304;background: url(../images/post/pic3_3.jpg) no-repeat;} #content_all .item03 .hd_03_1{position: absolute;top:220px;left:5px;width: 313px;height: 142px;background-color: #000000;padding-top: 55px;} #content_all .item03 .hd_04{position: absolute;top:148px;left:323px;width: 313px;height: 215px;background-color: #000000;border: 1px solid #de2304; background: url(../images/post/pic3_4.jpg) no-repeat;} #content_all .item03 .hd_04_1{position: absolute;top:148px;left:323px;width: 313px;height: 215px;background-color: #000000;padding-top: 95px;} #content_all .item04 .hd_01{position: absolute;top:0;left:5px;width: 313px;height: 215px;background-color: #000000;border: 1px solid #de2304;background: url(../images/post/pic4_1.jpg) no-repeat;} #content_all .item04 .hd_01_1{position: absolute;top:0;left:5px;width: 313px;height: 215px;background-color: #000000;padding-top: 95px;} #content_all .item04 .hd_02{position: absolute;top:0;left:323px;width: 313px;height: 142px;background-color: #000000;border: 1px solid #de2304; background: url(../images/post/pic4_2.jpg) no-repeat;} #content_all .item04 .hd_02_1{position: absolute;top:0;left:323px;width: 313px;height: 142px;background-color: #000000;padding-top: 55px;} #content_all .item04 .hd_03{position: absolute;top:220px;left:5px;width: 313px;height: 142px;background-color: #000000;border: 1px solid #de2304;background: url(../images/post/pic4_3.jpg) no-repeat;} #content_all .item04 .hd_03_1{position: absolute;top:220px;left:5px;width: 313px;height: 142px;background-color: #000000;padding-top: 55px;} #content_all .item04 .hd_04{position: absolute;top:148px;left:323px;width: 313px;height: 215px;background-color: #000000;border: 1px solid #de2304; background: url(../images/post/pic4_4.jpg) no-repeat;} #content_all .item04 .hd_04_1{position: absolute;top:148px;left:323px;width: 313px;height: 215px;background-color: #000000;padding-top: 95px;} #content_all .post_team { width: 992px; height: 228px; margin:0 auto; position: relative; } #content_all .post_team2{ margin-top: 60px; } #content_all .post_team p{ color:#FFFFFF; font-size: 17px; line-height: 20px; text-align: justify;} #content_all .post_team .post{width: 162px;height: 228px; float: left; border: 1px solid #FFFFFF; margin:0 1px;} #content_all .post_team .post:hover .introBox_a{opacity: 1} #content_all .post_team div .img{position: absolute;width: 160px;height: 226px;} #content_all .post_team div .introBox_a{position: absolute; background:rgba(0,0,0,0.9); opacity:0; padding: 35px 20px 0 20px; width: 160px;height: 226px;transition:all 0.5s;-ms-transition:all 0.5s;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;} #content_all .post_team .shadow{position: absolute;box-shadow: 0px 0px 3px rgba(255%,255%,255%,0.5); width: 163px;height: 228px;/*background: #fa0;*/} #content_all .post_team .movie_btn{position: absolute; left: 50px; bottom: 30px;} #content_all .item01 .post_team .post1 .img{background:url(../images/post/post1_1.jpg);background-size: 163px 228px;} #content_all .item01 .post_team .post2 .img{background:url(../images/post/post1_2.jpg);background-size: 163px 228px;} #content_all .item01 .post_team .post3 .img{background:url(../images/post/post1_3.jpg);background-size: 163px 228px;} #content_all .item01 .post_team .post4 .img{background:url(../images/post/post1_4.jpg);background-size: 163px 228px;} #content_all .item01 .post_team .post5 .img{background:url(../images/post/post1_5.jpg);background-size: 163px 228px;} #content_all .item01 .post_team .post6 .img{background:url(../images/post/post1_6.jpg);background-size: 163px 228px;} #content_all .item02 .post_team .post1 .img{background:url(../images/post/post2_1.jpg);background-size: 163px 228px;} #content_all .item02 .post_team .post2 .img{background:url(../images/post/post2_2.jpg);background-size: 163px 228px;} #content_all .item02 .post_team .post3 .img{background:url(../images/post/post2_3.jpg);background-size: 163px 228px;} #content_all .item02 .post_team .post4 .img{background:url(../images/post/post2_4.jpg);background-size: 163px 228px;} #content_all .item02 .post_team .post5 .img{background:url(../images/post/post2_5.jpg);background-size: 163px 228px;} #content_all .item02 .post_team .post6 .img{background:url(../images/post/post2_6.jpg);background-size: 163px 228px;} #content_all .item03 .post_team .post1 .img{background:url(../images/post/post3_1.jpg);background-size: 163px 228px;} #content_all .item03 .post_team .post2 .img{background:url(../images/post/post3_2.jpg);background-size: 163px 228px;} #content_all .item03 .post_team .post3 .img{background:url(../images/post/post3_3.jpg);background-size: 163px 228px;} #content_all .item03 .post_team .post4 .img{background:url(../images/post/post3_4.jpg);background-size: 163px 228px;} #content_all .item03 .post_team .post5 .img{background:url(../images/post/post3_5.jpg);background-size: 163px 228px;} #content_all .item03 .post_team .post6 .img{background:url(../images/post/post3_6.jpg);background-size: 163px 228px;} #content_all .item04 .post_team .post1 .img{background:url(../images/post/post4_1.jpg);background-size: 163px 228px;} #content_all .item04 .post_team .post2 .img{background:url(../images/post/post4_2.jpg);background-size: 163px 228px;} #content_all .item04 .post_team .post3 .img{background:url(../images/post/post4_3.jpg);background-size: 163px 228px;} #content_all .item04 .post_team .post4 .img{background:url(../images/post/post4_4.jpg);background-size: 163px 228px;} #content_all .item04 .post_team .post5 .img{background:url(../images/post/post4_5.jpg);background-size: 163px 228px;} #content_all .item04 .post_team .post6 .img{background:url(../images/post/post4_6.jpg);background-size: 163px 228px;} #content_all .item04 .post_team .post7 .img{background:url(../images/post/post4_7.jpg);background-size: 163px 228px;} #content_all .item04 .post_team .post8 .img{background:url(../images/post/post4_8.jpg);background-size: 163px 228px;} #content_all .item04 .post_team .post9 .img{background:url(../images/post/post4_9.jpg);background-size: 163px 228px;} #content_all .item04 .post_team .post10 .img{background:url(../images/post/post4_10.jpg);background-size: 163px 228px;} #content_all .item04 .post_team .post11 .img{background:url(../images/post/post4_11.jpg);background-size: 163px 228px;} #content_all .contentCon .appbtn{display: block;margin: 160px auto 0 auto;background: url(../images/pc/appbtn.png)no-repeat;width: 630px;height: 260px;transition:all 0.3s;-ms-transition:all 0.5s;-moz-transition:all 0.5s;-webkit-transition:all 0.5s; -o-transition:all 0.5s;} #content_all .contentCon .appbtn:hover{background: url(../images/pc/appbtn_c.png)no-repeat;transition:all 0.3s;-ms-transition:all 0.5s;-moz-transition:all 0.5s;-webkit-transition:all 0.5s; -o-transition:all 0.5s;} /*鬼動態*/ .ghost_out{position: absolute; left:-80px; top:0px;z-index: 99;} .ghost_out> img{position:absolute; left:6px; top:1px; z-index: 0;} .header_mainimage1{width:400px;margin:0 auto;position:relative;} .header_mainimage1 img{animation-delay:1s;animation:bounce ease-in-out 3s infinite alternate;animation:Move 2s infinite alternate;animation-fill-mode: both;position:absolute;left:5px;z-index:1;top:1px;} @keyframes Move{from {right:0px; bottom:0px; height:0px; opacity:0;}to {right:5px; bottom:5px; opacity:1;}} /*樓梯動態*/ .ghost_out2{position: absolute; right:-80px; top:10px; } .ghost_out2 > img{margin:1px 0 0 5px; position: absolute;left: 0; top:0;} .header_mainimage2{width:400px; height:380px;} .header_mainimage2 img{ animation-delay:5s; animation:bounce ease-in-out 10s infinite alternate;animation:Move2 10s infinite alternate;animation-fill-mode: both;position:absolute;left:5px;z-index:1;top:1px;} @keyframes Move2{from {right:0px; bottom:0px; height:0px; opacity:0;}to {right:0px; bottom:0px; opacity:1;}} /*井動態*/ .ghost_out3{position: absolute; left:-80px; top:180px;} .ghost_out3> img{ position:absolute; left:6px; top:1px; } .header_mainimage3{ width:340px; height:280px; } .header_mainimage3 img{animation-delay:5s;animation:bounce ease-in-out 10s infinite alternate;animation:Move3 10s infinite alternate;animation-fill-mode: both;position:absolute;left:5px;z-index:1;top:1px;} @keyframes Move3{from {right:0px; bottom:0px; height:0px; opacity:0;}to {right:0px; bottom:0px; opacity:1;}} /*符動態*/ .ghost_out4{position: absolute; left:80px; top:130px; } .ghost_out4 > img{ position:absolute; left:6px; top:1px; z-index: 0;} .header_mainimage4{width:67px; height:163px;} .header_mainimage4 img{animation-delay:3s;animation:bounce ease-in-out 3s infinite alternate;animation:Move4 3s infinite alternate;animation-fill-mode: both;position:absolute;left:5px;z-index:1;top:1px;} @keyframes Move4{from {right:0px; bottom:0px; height:0px; opacity:0;}to {right:0px; bottom:0px; opacity:1;}} /*其他小物*/ .ghost_out5{position: absolute; top:240px; left:10px; width: 100px; height:100px; z-index: 100;} .ghost_out6{position: absolute; top:400px; right:90px; width: 47px; height:274px; transform:rotate(45deg);z-index: 100;} .ghost_out7{position: absolute; top:500px; left:50px; width: 135px; height:128px; z-index: 100; } .ghost_out8{position: absolute; top:480px; right:10px; width: 178px; height:157px; z-index: 100; } /*煙動態*/ #bg_out{ width:100%; height: 100%; position: absolute; left:0; top:0; } .ghost_bg0{position: absolute; top:100px; left:-380px; width: 643px; height:690px; background: url(../images/pc/bg0.png); z-index: 20;} .ghost_bg0{visibility: visible; animation-duration: 6s; animation-delay: 0.5s; animation-iteration-count: infinite; animation-name: pulse;} .ghost_bg00{position: absolute; top:0px; right:-250px; width: 643px; height:690px; background: url(../images/pc/bg0.png); } .ghost_bg00{visibility: visible; animation-duration: 6s; animation-delay: 0.5s; animation-iteration-count: infinite; animation-name: pulse;} .ghost_bg1{position: absolute; top:30px; left:-400px; width: 1990px; height:684px; background: url(../images/pc/bg1.png); z-index: 0;} .ghost_bg1{visibility: visible; animation-duration: 10s; animation-delay: 0.5s; animation-iteration-count: infinite; animation-name: pulse;} .ghost_bg2{position: absolute; top:-20px; left:-520px; width: 1990px; height:684px; background: url(../images/pc/bg2.png); z-index: 0; } .ghost_bg2{visibility: visible; animation-duration: 10s; animation-delay: 0.5s; animation-iteration-count: infinite; animation-name: pulse;} .ghost_bg3{position: absolute; top:-20px; left:-400px; width: 1990px; height:684px; background: url(../images/pc/bg3.png); z-index: 0; } .ghost_bg3{visibility: visible; animation-duration: 10s; animation-delay: 0.5s; animation-iteration-count: infinite; animation-name: pulse;} /***手機版***/ /***手機版***/ /***手機版***/ @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; color:#FFFFFF; padding: 0; background: none; background-color: #000000;} /* HeaderCon_m */ #content_all .headerCon{ position: relative; width: 100%; height: 488px; margin: 0 auto; padding-top: 0; background:url(../images/mobile/header_bg_m.jpg)no-repeat center top; background-size: 100% 500px;} #content_all .head_bg{background: url(../images/mobile/header_m_logo.png) no-repeat center top; position: relative; height: 488px; width: 100%; margin:0 auto;} #content_all .catchlogo{ width: 640px; height: 428px;} #content_all a.fb_share_m{ position: absolute; top:47px; right: 20px; } #content_all a.line_share{ position: absolute; top:108px; right: 20px; } /*menu*/ #m_menus{ position:absolute; left:0px; top:0px; z-index:1000; } #m_menus_bg{position:absolute; left:0px; top:65px; z-index:9999; height:640px; width:640px; display:none;} #m_menus_bg ul{ position:absolute; border:1px solid #FFFFFF; margin-top:0px;} #m_menus_bg ul li{ border-bottom: 1px solid #FFFFFF; height: 60px; text-indent: -9999px; display:block; overflow:hidden;} #m_menus_bg ul li a{ display: block; width: 320px; height: 60px; background:url(../images/mobile/header/menu_m.jpg) no-repeat center; position: relative; top:0;} #m_menus_bg ul li #m_menus_bg ul li a.here{ background:url(../images/mobile/header/menu_m_h.jpg) no-repeat center; position: relative;} #m_menus_bg ul li a.menu_m1{ background-position: 0 0;} #m_menus_bg ul li a.menu_m2{ background-position: 0 -60px;} #m_menus_bg ul li a.menu_m3{ background-position: 0 -120px;} #m_menus_bg ul li a.menu_m4{ background-position: 0 -180px;} #m_menus_bg ul .menu_close{ position: absolute; top:-55px; left:0; display:block; width: 55px;height: 54px;} /* HeaderCon_m END */ #point1_m{ position: absolute; top:-70px; } #point2_m{ position: absolute; top:70px; } #point3_m{ position: absolute; top:30px; } #point4_m{ position: absolute; top:50px; } /*主要內容 #main_m */ #content_all .contentCon { width: 100%; height: 100%; position: relative; text-align: center; overflow: hidden; margin: 0 auto; background: url(../images/mobile/body_m.jpg) no-repeat center top; } #content_all a:hover{ text-decoration: none;} #content_all .contentCon { position: relative; text-align: center; margin: 0 auto;} #content_all .contentCon a{ display: block; color:#FFFFFF; text-decoration: none; } #content_all .contentCon .item01{ position: relative; width:600px; height: 1860px; margin-top:20px; padding-top: 530px; } #content_all .contentCon .item02{ position: relative; width:600px; height: 1920px; margin-top:0px; padding-top: 590px;} #content_all .contentCon .item03{ position: relative; width:600px; height: 1900px; margin-top:40px; padding-top: 570px;} #content_all .contentCon .item04{ position: relative; width:600px; margin-top:30px; padding-top: 600px;} #content_all .contentCon .ban{ position: relative; width:640px; margin: 50px auto;} #content_all .contentCon .letter_sp{letter-spacing:-1px} #content_all .contentCon .post{ margin-bottom: 15px; width: 290px; height: 431px; border: 1px solid #FFFFFF; position: relative; float: left; } #content_all .contentCon .post:nth-child(2n) { margin-left: 0; margin-right: 20px; } #content_all .contentCon .post img{ width: 100%; height: 100%; position: absolute; left: 0; top:0;} #content_all .contentCon .post h4{ width: 100%; height: 50px; line-height: 50px; font-size: 27px; color:#FFFFFF; background: rgba(0,0,0,0.8); font-weight: 100; text-align: center; position: absolute; left: 0; bottom:0; margin:0; } #content_all .contentCon .post a{ color:#666666; font-weight: 500;} #content_all .contentCon .post a:hover{ color:#0E0E0E; font-weight: bold; } #content_all .contentCon .item01 .box { position: absolute; width: 600px; height: 334px; top: 46px; } #content_all .contentCon .item01 .box a{ display: block; width: 300px; font-size: 0; float: left; position: absolute; } #content_all .contentCon .item01 .box a:nth-of-type(1) { height: 200px; left: 0; top:0; } #content_all .contentCon .item01 .box a:nth-of-type(2) { height: 130px; right: 0; top:0; } #content_all .contentCon .item01 .box a:nth-of-type(3) { height: 130px; left:0; bottom: 0; } #content_all .contentCon .item01 .box a:nth-of-type(4) { height: 200px; right: 0; bottom: 0; } #content_all .contentCon .item02 .box { position: absolute; width: 600px; height: 334px; top: 83px; } #content_all .contentCon .item02 .box a{ display: block; width: 300px; font-size: 0; float: left; position: absolute; } #content_all .contentCon .item02 .box a:nth-of-type(1) { height: 200px; left: 0; top:0; } #content_all .contentCon .item02 .box a:nth-of-type(2) { height: 130px; right: 0; top:0; } #content_all .contentCon .item02 .box a:nth-of-type(3) { height: 130px; left:0; bottom: 0; } #content_all .contentCon .item02 .box a:nth-of-type(4) { height: 200px; right: 0; bottom: 0; } #content_all .contentCon .item03 .box { position: absolute; width: 600px; height: 334px; top: 50px; } #content_all .contentCon .item03 .box a{ display: block; width: 300px; font-size: 0; float: left; position: absolute; } #content_all .contentCon .item03 .box a:nth-of-type(1) { height: 200px; left: 0; top:0; } #content_all .contentCon .item03 .box a:nth-of-type(2) { height: 130px; right: 0; top:0; } #content_all .contentCon .item03 .box a:nth-of-type(3) { height: 130px; left:0; bottom: 0; } #content_all .contentCon .item03 .box a:nth-of-type(4) { height: 200px; right: 0; bottom: 0; } #content_all .contentCon .item04 .box { position: absolute; width: 600px; height: 334px; top: 60px; } #content_all .contentCon .item04 .box a{ display: block; width: 300px; font-size: 0; float: left; position: absolute; } #content_all .contentCon .item04 .box a:nth-of-type(1) { height: 200px; left: 0; top:0; } #content_all .contentCon .item04 .box a:nth-of-type(2) { height: 130px; right: 0; top:0; } #content_all .contentCon .item04 .box a:nth-of-type(3) { height: 130px; left:0; bottom: 0; } #content_all .contentCon .item04 .box a:nth-of-type(4) { height: 200px; right: 0; bottom: 0; } }/*手機版end*/