/*活動用*/ 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_allbg.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{ position: absolute; right: 145px; opacity: 0;} #content_pc .headerCon ul.btn_team 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 li:hover{ background: #FFFFFF; box-shadow: 0 0 10px rgba(0,0,0,0.5); } #content_pc .headerCon ul.btn_team 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 li:hover a{ color:#ca7e48; } #content_pc .headerCon ul.btn_team li .kv_btn1{ padding-top: 82px; } #content_pc .headerCon ul.btn_team li.here { background: #FFFFFF; box-shadow: 0 0 10px rgba(0,0,0,0.5); } #content_pc .headerCon ul.btn_team li.here a{ color:#ca7e48; } /* HeaderCon PC End */ /* contentCon PC */ #content_pc .contentCon { width: 1200px; position: relative; text-align: center; overflow: hidden;} #content_pc .contentCon .item01{ position: relative; margin: 0; padding:0; width: 100%; } #content_pc .contentCon .item01 .point{ font-size: 0; } #content_pc .contentCon .item01 h2{ width: 1200px; height: 100px; margin: 20px 0 0 0; font-size: 0; position: relative; background:url(../images/pc/2017GHA_post_h2.png) no-repeat; } #content_pc .contentCon .item01 ul{ position: relative; width: 100%; height: 810px; padding: 20px 0 0 40px; margin:0 auto; } #content_pc .contentCon .item01 ul li{ float: left; width: 358px; height: 244px; margin:0 20px 30px 0; position: relative; } #content_pc .contentCon .item01 ul li a{ display: block; width: 100%; height: 100%; background:url(../images/pc/2017GHA_postbg.png) no-repeat; background-size: 358px 244px; padding: 10px 10px 30px 10px; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; } #content_pc .contentCon .item01 ul li a:hover{ background:url(../images/pc/2017GHA_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_pc .contentCon .item01 ul li a img{ display: block; width: 100%; height: 100%; } #content_pc .contentCon .item01 ul li a .mask{ width: 338px; height: 30px; line-height: 30px; 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_pc .contentCon .item01 ul 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 .contentCon .item01 ul 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 .contentCon .item01 ul 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 .contentCon .item01 ul 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 .contentCon .item01 ul 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 .contentCon .item01 ul 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 .contentCon .item01 ul 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 .contentCon .item01 ul 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 .contentCon .item01 ul 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; } #content_pc .contentCon .item01 ul li a .tag4{ width: 104px; height: 104px; padding-top: 38px;background: url(../images/pc/2017GHA_post_tag4.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 .contentCon .item01 ul li a .tag4_4{ width: 104px; height: 104px; line-height: 18px; padding-top: 26px; background: url(../images/pc/2017GHA_post_tag4.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 .contentCon .item01 .icon{ position: relative; width: 100%; height: 250px; padding: 0; margin:30px auto 20px; font-size: 0; background: url(../images/pc/2017GHA_posticon.png) no-repeat;} /***手機版***/ /***手機版***/ /***手機版***/ @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; background-color: #caa68e; } /* HeaderCon PC */ #content_m .headerCon {width: 640px; height: 695px; position: relative; background: url(../images/pc/2017GHA_allbg.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: 610px; font-size: 0; margin: 0 auto; padding: 20px 0; 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{ 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{ 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{ position: absolute; right: 59px; opacity: 0;} #content_m .headerCon ul li { float: left; margin-left:52px; width: 140px; height: 140px; background:#ca7e48; transform:translate(0) rotate(45deg) scale(0.9); } #content_m .headerCon ul li:hover{ background: #FFFFFF; box-shadow: 0 0 10px rgba(0,0,0,0.5); } #content_m .headerCon ul 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 li:hover a{ color:#ca7e48; } #content_m .headerCon ul li .kv_btn1{ padding-top: 82px; } /* 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; } #content_m .contentCon .item01 ul{ position: relative; width: 100%; height: 3400px; padding: 0px 30px 0 30px; margin:0 auto; } #content_m .contentCon .item01 ul li{ float: left; width: 580px; height: 395px; margin:0 0 30px 0; position: relative; } #content_m .contentCon .item01 ul li:nth-child(1) a{ background:url(../images/pc/2017GHA_postbg_hover.png) no-repeat; } #content_m .contentCon .item01 ul li a{ display: block; width: 100%; height: 100%; background:url(../images/pc/2017GHA_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_m .contentCon .item01 ul li a.postbg2{ display: block; width: 100%; height: 100%; background:url(../images/pc/2017GHA_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_m .contentCon .item01 ul li a img{ display: block; width: 100%; height: 100%; } #content_m .contentCon .item01 ul li a .mask{ width: 560px; height: 50px; line-height: 50px; background:rgba(0,0,0,0.8); position: absolute; bottom:39px; left:10px; 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 .contentCon .item01 ul 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 .contentCon .item01 ul 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 .contentCon .item01 ul 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 .contentCon .item01 ul 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 .contentCon .item01 ul 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 .contentCon .item01 ul 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 .contentCon .item01 ul 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 .contentCon .item01 ul 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; } #content_m .contentCon .item01 .icon{ position: relative; width: 100%; height: 250px; padding: 0; margin:30px auto 20px; font-size: 0; background: url(../images/pc/2017GHA_posticon.png) no-repeat; background-position: -60px 0;} }/*手機版end*/