/*活動用*/ body{ margin:0; padding: 0;} .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/2017GHA_allbg2.jpg) no-repeat; background-size: 1920px 1986px; background-position: center top; position: relative; background-color: #c9a68d; overflow: hidden;} #content_pc { min-width: 1200px; color:#FFFFFF; } #content_pc a{text-decoration: none;} /*共用end*/ /* HeaderCon PC */ #content_pc .headerCon {width: 1200px; height: 629px; position: relative;} #content_pc .headerCon .catchlogo{ width: 624px; height: 134px; background:url(../images/pc/2017GHA_kvtitle.png) no-repeat; position: absolute; left:160px; z-index: 9; font-size: 0; opacity: 0; } #content_pc .headerCon .catchlogo a{ display: block; width: 100%; height: 100%; } #content_pc .headerCon .box{ position: relative; z-index: 0; width: 920px; font-size: 0; margin: 0 auto; padding: 20px; background:rgba(255,255,255,0.8); box-shadow: 0 0 10px rgba(0,0,0,0.2); opacity: 0; } #content_pc .headerCon .box h2{ width: 100%; font-size: 40px; line-height: 50px; margin: 0 auto 5px; color:#ca7e48; text-shadow: 1px 1px 0 #FFFFFF; } #content_pc .headerCon .box p{ width: 100%; font-size: 25px; font-weight: 100; line-height: 35px; z-index: 0; color:#322923; letter-spacing: 1px; text-shadow: 1px 1px 0 #FFFFFF; } #content_pc .headerCon .box p span{ font-size: 28px; font-weight: 500;} #content_pc .headerCon ul.btn_team_live{ position: absolute; right: 145px; opacity: 0;} #content_pc .headerCon ul.btn_team_live li { float: left; margin-left:60px; width: 140px; height: 140px; background:#ca7e48; transform:translate(0) rotate(45deg) scale(0.9); } #content_pc .headerCon ul.btn_team_live li:hover{ background: #FFFFFF; box-shadow: 0 0 10px rgba(0,0,0,0.5); } #content_pc .headerCon ul.btn_team_live li a{ position: absolute; top:-43px; left: -43px; width: 160%; height: 160%; padding-top: 66px; color:#ffffff; font-size: 22px; font-weight: 100; line-height: 30px; display: block; transform:translate(0) rotate(-45deg) scale(0.9); } #content_pc .headerCon ul.btn_team_live li:hover a{ color:#ca7e48; } #content_pc .headerCon ul.btn_team_live li .kv_btn1{ padding-top: 82px; } #content_pc .headerCon ul.btn_team_live li.here { background: #FFFFFF; box-shadow: 0 0 10px rgba(0,0,0,0.5); } #content_pc .headerCon ul.btn_team_live li.here a{ color:#ca7e48; } /* HeaderCon PC End */ #content_pc .headerCon{ position: relative; margin: 0; padding:0; width: 100%; height: 930px; } #content_pc .headerCon .point{ font-size: 0; } #content_pc .headerCon h2{ width: 1200px; margin: 20px 0 0 0; font-size: 0; position: relative; } #content_pc .headerCon ul.movie_post{ position: absolute; left: 140px; width: 920px; height: 260px; padding:0px; margin:0 auto; } #content_pc .headerCon ul.movie_post li{ float: left; width: 450px; height: 260px; margin:0 20px 30px 0; position: relative; border: 4px solid #FFFFFF; overflow: hidden; } #content_pc .headerCon ul.movie_post li:nth-child(2){ margin-right: 0;} #content_pc .headerCon ul.movie_post li a{ display: block; width: 100%; height: 100%; padding: 0; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; } #content_pc .headerCon ul.movie_post li a:hover{ transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; } #content_pc .headerCon ul.movie_post li a img{ display: block; width: 100%; height: 100%; } #content_pc .headerCon ul.movie_post li a .mask{ width: 100%; height: 40px; line-height: 40px; background:rgba(0,0,0,0.8); position: absolute; bottom:0px; left:0px; 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_pc .headerCon ul.movie_post li a .tagfree{ height: 40px; line-height: 40px; padding: 0 0px 0 10px; background:#ca7e48; position: absolute; bottom:40px; right:0px; 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_pc .headerCon ul.movie_post li a:hover .mask{font-size: 20px; position: absolute; opacity: 1; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; } #content_pc .headerCon ul.movie_post li a .tag0{ width: 104px; height: 104px; padding-top: 38px;background: url(../images/pc/2017GHA_post_tag0.png)no-repeat; background-size: 104px; position: absolute; left:-14px; top:-15px; color:#ffe774; font-size: 14px; text-shadow: 0 0 3px #000000; } #content_pc .headerCon ul.movie_post li a .tag0_2{ width: 104px; height: 104px; line-height: 18px; padding-top: 26px; background: url(../images/pc/2017GHA_post_tag0.png)no-repeat; background-size: 104px; position: absolute; left:-14px; top:-15px; color:#ffe774; font-size: 14px; text-shadow: 0 0 3px #000000; } #content_pc .headerCon ul.movie_post li a .tag1{ width: 104px; height: 104px; padding-top: 38px;background: url(../images/pc/2017GHA_post_tag1.png)no-repeat; background-size: 104px; position: absolute; left:-14px; top:-15px; color:#ffe774; font-size: 14px; text-shadow: 0 0 3px #000000; } #content_pc .headerCon ul.movie_post li a .tag1_2{ width: 104px; height: 104px; line-height: 18px; padding-top: 26px; background: url(../images/pc/2017GHA_post_tag1.png)no-repeat; background-size: 104px; position: absolute; left:-14px; top:-15px; color:#ffe774; font-size: 14px; text-shadow: 0 0 3px #000000; } #content_pc .headerCon ul.movie_post li a .tag2{ width: 104px; height: 104px; padding-top: 38px;background: url(../images/pc/2017GHA_post_tag2.png)no-repeat; background-size: 104px; position: absolute; left:-14px; top:-15px; color:#ffe774; font-size: 14px; text-shadow: 0 0 3px #000000; } #content_pc .headerCon ul.movie_post li a .tag2_2{ width: 104px; height: 104px; line-height: 18px; padding-top: 26px; background: url(../images/pc/2017GHA_post_tag2.png)no-repeat; background-size: 104px; position: absolute; left:-14px; top:-15px; color:#ffe774; font-size: 14px; text-shadow: 0 0 3px #000000; } #content_pc .headerCon ul.movie_post li a .tag3{ width: 104px; height: 104px; padding-top: 38px;background: url(../images/pc/2017GHA_post_tag3.png)no-repeat; background-size: 104px; position: absolute; left:-14px; top:-15px; color:#ffe774; font-size: 14px; text-shadow: 0 0 3px #000000; } #content_pc .headerCon ul.movie_post li a .tag3_3{ width: 104px; height: 104px; line-height: 18px; padding-top: 26px; background: url(../images/pc/2017GHA_post_tag3.png)no-repeat; background-size: 104px; position: absolute; left:-14px; top:-15px; color:#ffe774; font-size: 14px; text-shadow: 0 0 3px #000000; } /***手機版***/ /***手機版***/ /***手機版***/ @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; width: 640px; height: 100%; overflow: hidden; } /* HeaderCon PC */ #content_m .headerCon {width: 640px; height: 1450px; position: relative; background: url(../images/pc/2017GHA_allbg2.jpg)no-repeat; background-color: #faf3ee; background-position: -500px -52px;} #content_m .headerCon .catchlogo{ width: 624px; height: 134px; background:url(../images/pc/2017GHA_kvtitle.png) no-repeat; position: absolute; left:8px; z-index: 9; font-size: 0; opacity: 0; } #content_m .headerCon .catchlogo a{ display: block; width: 100%; height: 100%; } #content_m .headerCon .box{ position: relative; z-index: 0; width: 620px; font-size: 0; margin: 0 auto; padding: 20px 20px; background:rgba(255,255,255,0.8); box-shadow: 0 0 10px rgba(0,0,0,0.2); opacity: 0; } #content_m .headerCon .box h2{ text-align: center; width: 100%; font-size: 40px; line-height: 50px; margin: 0 auto 14px; color:#ca7e48; text-shadow: 1px 1px 0 #FFFFFF; } #content_m .headerCon .box p{ text-align: justify; width: 100%; font-size: 25px; font-weight: 100; line-height: 40px; z-index: 0; color:#322923; letter-spacing: 0px; text-shadow: 1px 1px 0 #FFFFFF; } #content_m .headerCon .box p span{ font-size: 28px; font-weight: 500;} #content_m .headerCon ul.btn_team_m_live{ position: absolute; right: 59px; opacity: 0;} #content_m .headerCon ul.btn_team_m_live li { float: left; margin-left:52px; width: 140px; height: 140px; background:#ca7e48; transform:translate(0) rotate(45deg) scale(0.9); } #content_m .headerCon ul.btn_team_m_live li:hover{ background: #FFFFFF; box-shadow: 0 0 10px rgba(0,0,0,0.5); } #content_m .headerCon ul.btn_team_m_live li a{ position: absolute; top:-43px; left: -43px; width: 160%; height: 160%; padding-top: 66px; color:#ffffff; font-size: 25px; font-weight: 100; line-height: 30px; display: block; transform:translate(0) rotate(-45deg) scale(0.9); } #content_m .headerCon ul.btn_team_m_live li:hover a{ color:#ca7e48; } #content_m .headerCon ul.btn_team_m_live li .kv_btn1{ padding-top: 82px; } #content_m .headerCon ul.movie_post_m{ position: relative; width: 100%; padding: 0px 10px; margin:0 auto; } #content_m .headerCon ul.movie_post_m li{ float: left; width: 620px; height: 353px; margin:10px 0; position: relative; border: 10px solid #FFFFFF; } #content_m .headerCon ul.movie_post_m li:nth-child(1) a{ } #content_m .headerCon ul.movie_post_m li a{ display: block; width: 100%; height: 100%; padding: 0; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; } #content_m .headerCon ul.movie_post_m li a.postbg2{ display: block; width: 100%; height: 100%; padding: 0; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; } #content_m .headerCon ul.movie_post_m li a img{ display: block; width: 100%; height: 100%; } #content_m .headerCon ul.movie_post_m li a .mask{ width: 600px; height: 50px; line-height: 50px; background: rgba(0,0,0,0.8); position: absolute; bottom:0px; left:0px; color:#FFFFFF; font-size: 28px; 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_m .headerCon ul.movie_post_m li a .tagfree{ height: 50px; line-height: 50px; padding: 0 0 0 10px; background:#ca7e48; position: absolute; bottom:50px; right:0px; color:#FFFFFF; font-size: 28px; 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_m .headerCon ul.movie_post_m li a .tag0{ width: 170px; height: 170px; padding-top: 60px;background: url(../images/pc/goodmovie_post_tag0.png)no-repeat; background-size: 170px; position: absolute; left:-14px; top:-15px; color:#ffe774; font-size: 25px; text-shadow: 0 0 3px #000000; } #content_m .headerCon ul.movie_post_m li a .tag0_2{ width: 170px; height: 170px; padding-top: 42px; line-height: 30px; background: url(../images/pc/goodmovie_post_tag0.png)no-repeat; background-size: 170px; position: absolute; left:-14px; top:-15px; color:#ffe774; font-size: 25px; text-shadow: 0 0 3px #000000; } #content_m .headerCon ul.movie_post_m li a .tag1{ width: 170px; height: 170px; padding-top: 60px;background: url(../images/pc/goodmovie_post_tag1.png)no-repeat; background-size: 170px; position: absolute; left:-14px; top:-15px; color:#ffe774; font-size: 25px; text-shadow: 0 0 3px #000000; } #content_m .headerCon ul.movie_post_m li a .tag1_2{ width: 170px; height: 170px; padding-top: 42px; line-height: 30px; background: url(../images/pc/goodmovie_post_tag1.png)no-repeat; background-size: 170px; position: absolute; left:-14px; top:-15px; color:#ffe774; font-size: 25px; text-shadow: 0 0 3px #000000; } #content_m .headerCon ul.movie_post_m li a .tag2{ width: 170px; height: 170px; padding-top: 60px;background: url(../images/pc/goodmovie_post_tag2.png)no-repeat; background-size: 170px; position: absolute; left:-14px; top:-15px; color:#ffe774; font-size: 25px; text-shadow: 0 0 3px #000000; } #content_m .headerCon ul.movie_post_m li a .tag2_2{ width: 170px; height: 170px; padding-top: 42px; line-height: 30px; background: url(../images/pc/goodmovie_post_tag2.png)no-repeat; background-size: 170px; position: absolute; left:-14px; top:-15px; color:#ffe774; font-size: 25px; text-shadow: 0 0 3px #000000; } #content_m .headerCon ul.movie_post_m li a .tag3{ width: 170px; height: 170px; padding-top: 60px;background: url(../images/pc/goodmovie_post_tag3.png)no-repeat; background-size: 170px; position: absolute; left:-14px; top:-15px; color:#ffe774; font-size: 25px; text-shadow: 0 0 3px #000000; } #content_m .headerCon ul.movie_post_m li a .tag3_3{ width: 170px; height: 170px; padding-top: 42px; line-height: 30px; background: url(../images/pc/goodmovie_post_tag3.png)no-repeat; background-size: 170px; position: absolute; left:-14px; top:-15px; color:#ffe774; font-size: 25px; text-shadow: 0 0 3px #000000; } /* HeaderCon PC End */ /* contentCon PC */ #content_m .contentCon{ width: 640px; position: relative; text-align: center; overflow: hidden; background: #c9a68d; } #content_m .contentCon .item01 h2{ position: relative; width: 100%; height: 120px; font-size: 0; margin:0px; background:url(../images/pc/2017GHA_post_h2.png) no-repeat; background-position: center top; background-size: 1440px 120px; } }/*手機版end*/