/*活動用*/ .only_pc{ display: block; } .only_m{ display: none; } a{ cursor: pointer; } body{ margin:0; padding: 0; background: #000000;} .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版***/ #wrap{display: block; min-width: 1200px; overflow: hidden;} #container_pc{ min-width: 1200px; margin: 0 auto; position: relative; overflow: hidden; background: url(https://video.friday.tw/eventcom/images/header_top.jpg) repeat-x top;} #content_pc { min-width: 1200px; color:#FFFFFF; } #content_pc a{text-decoration: none;} #header_m{ display: none; } #footer_mB{ display: none; } /*共用end*/ /* HeaderCon PC */ #wrap .menu_out{ display: none; width: 100%; height: 100%; position: absolute; right: 0; top: 0; z-index: 0; } #content_pc .headerCon { width: 1200px; height: 550px; position: relative; overflow: hidden; background:url(../images/post/marvel_kv_pc.jpg)no-repeat; } #content_pc .headerCon a { width: 100%; height: 490px; display: block; } #content_pc .headerCon a:nth-of-type(1){ display: block; } #content_pc .headerCon a:nth-of-type(2){ display: none; } #content_pc .headerCon h1,#content_pc .headerCon h2,#content_pc .headerCon p,#content_pc .headerCon b,#content_pc .headerCon i{ width: 0; height: 0; font-size: 0; margin: 0; padding: 0; line-height: 0; } #content_pc .headerCon .slick-list{ height: 550px; } #content_pc .headerCon .slick-prev{ left: 0px; width: 50px; height: 50px; background: url(../images/pc/marvel_slick.png) no-repeat 0 top; background-color: rgba(0,0,0,1); z-index: 1; opacity: 0.5; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; } #content_pc .headerCon .slick-next{ right: 0px; width: 50px; height: 50px; background: url(../images/pc/marvel_slick.png) no-repeat -50px top; background-color: rgba(0,0,0,1); z-index: 1; opacity: 0.5; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; } #content_pc .headerCon .slick-prev:hover,#content_pc .headerCon .slick-next:hover{ opacity: 0.8; } #content_pc .headerCon .slick-dots{ bottom: 10px; right:5px; text-align: right; } #content_pc .headerCon .slick-dots > li{ width: 200px; height: 110px; background: #000000; list-style-type: none; border: 1px solid #ffffff;} #content_pc .headerCon .slick-dots > li button{ display: none; } #content_pc .headerCon .slick-dots > li:nth-child(1){ background: url(../images/post/marvel_kv_pc.jpg) no-repeat; background-size: 240px 110px; background-position: center top; opacity: 0.5; } #content_pc .headerCon .slick-dots > li.slick-active{ opacity: 1; } #content_pc .headerCon .menu-btn{ display: none; } #content_pc .headerCon .logo{ width: 185px; height: 60px; position: absolute; left: 0; top:0; background: url(../images/pc/marvel_kv_logo.jpg)no-repeat; background-size: 100%; z-index: 3; font-size: 0; } #content_pc .headerCon ul.movie_postteam{ position: relative; width: 100%; height: 100%; padding: 0px; margin: 0; cursor: pointer;} #content_pc .headerCon ul.movie_postteam > div li{ width: 100%; height: 490px; background: url(../images/post/marvel_kv_pc.jpg) no-repeat; } #content_pc .headerCon ul.movie_postteam > div li:focus{ border: 0; } #content_pc .headerCon ul.movie_postteam .slick-track { margin-left: 220px;} #content_pc .headerCon ul.movie_postteam > div li a:nth-of-type(1){ display:block; text-decoration: none; width: 214px; height: 47px; font-size: 0; position: absolute; left: 35px; top:350px; } #content_pc .headerCon ul.movie_postteam > div li a:nth-of-type(2){ display:block; text-decoration: none; width: 214px; height: 47px; font-size: 0; position: absolute; left: 270px; top:350px; } #content_pc .headerCon ul.movie_postteam > div li a img{ display:block; width: 100%; height: 100%; } #content_pc .headerCon ul.movie_postteam > div li a .title{ width: 1200px; height: 130px; position: absolute; bottom: 0; left: 0; background: rgba(0,0,0,0.75); color:#FFFFFF; padding:10px 30px;} #content_pc .headerCon ul.movie_postteam > div li a .title h1{ width: 100%; font-size: 33px; padding:0; text-align: left; font-weight: 100; float: left; } #content_pc .headerCon ul.movie_postteam > div li a .title .type1{ text-align: left; font-size: 14px; width: 100%; line-height: 30px; padding:0; color:#FFFFFF; font-weight: 100; float: left; } #content_pc .headerCon ul.movie_postteam > div li a .title .type2{ text-align: left; font-size: 18px; width: 100%; line-height: 24px; padding:0; color:#FFFFFF; font-weight: 100; float: left; } #content_pc .headerCon ul.menu{ position: absolute; width: 100%; height: 44px; line-height: 44px; padding-left: 280px; margin: 0; left: 0; top: 0; z-index: 1; background: rgba(0,0,0,0.75); } #content_pc .headerCon ul.menu li{ width: 120px; height: 32px; line-height: 32px; margin: 6px 5px; float: left; color:#ea2328; border-radius: 25px; } #content_pc .headerCon ul.menu li:hover{ background: #464c4f; } #content_pc .headerCon ul.menu li a{ width: 100%; height: 100%; display: block; } #content_pc .headerCon ul.menu li span{ display: block; width: 100%; color:#FFFFFF; background: url(../images/pc/marvel_kv_list.png) no-repeat; background-position: 10px top; text-shadow: 1px 1px 0 #000000; } #content_pc .headerCon ul.menu li:nth-child(3) span{ display: block; width: 100%; color:#FFFFFF; background: url(../images/pc/marvel_kv_list.png) no-repeat; background-position: 16px top; } #content_pc .headerCon ul.menu li:nth-child(4) span{ display: block; width: 100%; color:#FFFFFF; background: url(../images/pc/marvel_kv_list.png) no-repeat; background-position: 2px top; } #content_pc .headerCon ul.menu li:nth-child(6) span{ display: block; width: 100%; color:#FFFFFF; background: url(../images/pc/marvel_kv_list.png) no-repeat; background-position: 25px top; } #content_pc .headerCon ul.menu li:nth-child(7) span{ display: block; width: 100%; color:#FFFFFF; background: url(../images/pc/marvel_kv_list.png) no-repeat; background-position: 2px top; } #content_pc .headerCon ul.menu li img{ display: block; width: 15px; height: 34px; float: left; } #content_pc .tip .btn { cursor: pointer; position: relative; width: 640px; padding: 0px; margin: 0;} #content_pc .tip .content { display: none; background-color:#0a0a0a; padding: 30px 90px; } #content_pc .tip .content ol > li { line-height: 1.6em; font-size: 14px; color:#fff; font-weight: normal; margin: 0; text-align: left; list-style-type: decimal; } #content_pc .tip .content ol > li a{ color:#fff;} #content_pc .contentCon { width: 1200px; position: relative; text-align: center; overflow: hidden; padding: 0;} #content_pc .contentCon .item01{ position: relative; margin: 0; padding:0; width: 100%; height: 100%; } #content_pc .contentCon .item01 ul{ position: relative; width:100%; height: 100%; margin: 5px 0 0 80px; padding: 0px; box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5); } #content_pc .contentCon .item01 ul li{ width: 235px; height: 360px; overflow: hidden; float:left; margin:0px 30px 50px 0px; border: 1px solid #ffffff; box-shadow:6px 4px 0px #3f3f3f; -webkit-transition: all 0.1s; -moz-transition: all 0.1s; -o-transition: all 0.1s; -ms-transition: all 0.1s; transition: all 0.1s;} #content_pc .contentCon .item01 ul li:hover{ border: 5px solid #ffffff; -webkit-transition: all 0.1s; -moz-transition: all 0.1s; -o-transition: all 0.1s; -ms-transition: all 0.1s; transition: all 0.1s;} #content_pc .contentCon .item01 ul li .view {width: 235px;height: 360px; margin: 0px; float: left; border: 0px; overflow: hidden; position: relative; text-align: center; } #content_pc .contentCon .item01 ul li .view .mask, .view .content { width: 235px; height: 360px; position: absolute; overflow: hidden; top: 0; left: 0; opacity: 0;} #content_pc .contentCon .item01 ul li .view:hover .mask{ opacity: 1; } #content_pc .contentCon .item01 ul li .view img { display: block; position: relative; width: 100%; height: 100%;} #content_pc .contentCon .item01 ul li .view h2 { text-transform: uppercase; color: #fcc32e; font-weight:normal; text-align: center; position: absolute; font-size: 22px; line-height: 33px; bottom:240px; width:100%; padding-bottom:11px; border-bottom:1px #ffc328 solid} #content_pc .contentCon .item01 ul li .view h2 span{ font-size: 18px; line-height: 30px; } #content_pc .contentCon .item01 ul li .view h3 {font-size: 18px; position: absolute;color: #fff;padding: 0px 18px;text-align:center; width:100%; top:142px; font-weight: 100;} #content_pc .contentCon .item01 ul li .view h3:after{content: "・";} #content_pc .contentCon .item01 ul li .view h3:before{content: "・";} #content_pc .contentCon .item01 ul li .view p {font-size: 16px; position: absolute;color: #fff; font-weight:normal;padding: 0px 18px;text-align: center; width:100%; top:172px; line-height:22px; text-align:justify;} #content_pc .contentCon .item01 ul li .view a.info {display: inline-block; text-decoration: none;padding: 7px 14px;background: #000;color: #fff;text-transform: uppercase;box-shadow: 0 0 1px #000;} #content_pc .contentCon .item01 ul li .view a.info: hover {box-shadow: 0 0 5px #000;} #content_pc .contentCon .pc{ display: block; } #content_pc .contentCon .mo{ display: none; } .view-first img { -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;} .view-first .mask { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; background-color: rgba(0,0,0, 0.7); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;} .view-first .mask01 { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; background-color: rgba(0,0,0, 1); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;} .view-first h2 { -webkit-transform: translateY(-100px); -moz-transform: translateY(-100px); -o-transform: translateY(-100px); -ms-transform: translateY(-100px); transform: translateY(-100px); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -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;} .view-first h3 { -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -o-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;} .view-first p { -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -o-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;} .view-first:hover img { -webkit-transform: scale(1.65,1.65); -moz-transform: scale(1.65,1.65); -o-transform: scale(1.65,1.65); -ms-transform: scale(1.65,1.65); transform: scale(1.65,1.65);} .view-first a.info { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -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;} .view-first:hover .mask { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1;} .view-first:hover .mask01 { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1;} .view-first:hover h2,.view-first:hover h3,.view-first:hover p,.view-first:hover a.info { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px);} .view-first:hover p { -webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; -o-transition-delay: 0.1s; -ms-transition-delay: 0.1s; transition-delay: 0.1s;} .view-first:hover a.info { -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -ms-transition-delay: 0.2s; transition-delay: 0.2s;} /***手機版***/ /***手機版***/ /***手機版***/ @media screen and (max-width: 640px) { .only_pc{ display: none; } .only_m{ display: block; } .fixed-width{width: 640px; margin: auto; } #wrap{display: block; width:100%; max-width: 640px; min-width: 320px; margin: 0 auto; background:url(https://video.friday.tw/eventcom/images/header_top.jpg) repeat-x top; background-color: #0a0a0a; position: relative; overflow: hidden;} #container_pc{ display: block; width: 100%; max-width: 640px; min-width: 320px; position: relative; overflow: hidden;} #content_pc { max-width: 640px; min-width: 320px; color:#FFFFFF; } #header_pc{ display: none; } #footer_pcbg{ display: none; } #header_m{ display:block; width: 100%; height: 53px; padding: 16px 10px;} #footer_mB{ display: block; } #content_pc .contentCon .pc{ display: none; } #content_pc .contentCon .mo{ display: block; } /* HeaderCon PC */ #content_pc .headerCon { width: 640px; height: 761px; position: relative; background:url(../images/post/marvel_kv_m.jpg)no-repeat; } #content_pc .headerCon a { width: 100%; height: 701px; display: block; } #content_pc .headerCon a:nth-of-type(1){ display: none; } #content_pc .headerCon a:nth-of-type(2){ display: block; } #content_pc .headerCon .slick-list{ height: 701px; } #content_pc .headerCon .slick-prev{ left: 20px; margin-top: 88px; width: 0px; height: 0px; background: url(../images/pc/marvel_slick.png) no-repeat 0 top; background-size: 140px 70px; background-color: rgba(0,0,0,1); z-index: 1; opacity: 0.5; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; } #content_pc .headerCon .slick-next{ right: 20px; margin-top: 88px; width: 0px; height: 0px; background: url(../images/pc/marvel_slick.png) no-repeat -70px top; background-size: 140px 70px; background-color: rgba(0,0,0,1); z-index: 1; opacity: 0.5; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; } #content_pc .headerCon .slick-dots{ bottom: 70px; left:5px; text-align: left; /*padding-left: 100px;*/ } #content_pc .headerCon .slick-dots > li{ width: 200px; height: 110px; background: #000000; list-style-type: none; border: 1px solid #ffffff;} #content_pc .headerCon .slick-dots > li button{ display: none; } #content_pc .headerCon .slick-dots > li:nth-child(1){ background: url(../images/post/marvel_kv_img2.jpg) no-repeat; background-size: 240px 110px; background-position: center top; opacity: 0.5; } #content_pc .headerCon .slick-dots > li:nth-child(2){ background: url(../images/post/marvel_kv_img3.jpg) no-repeat; background-size: 240px 110px; background-position: center top; opacity: 0.5; } #content_pc .headerCon .slick-dots > li:nth-child(3){ background: url(../images/post/marvel_kv_img1.jpg) no-repeat; background-size: 240px 110px; background-position: center top; opacity: 0.5; } #content_pc .headerCon .slick-dots > li.slick-active{ opacity: 1; } #content_pc .headerCon ul.movie_postteam > div li a:nth-of-type(1){ display:block; text-decoration: none; width: 200px; height: 60px; font-size: 0; position: absolute; left: 103px; top:615px; } #content_pc .headerCon ul.movie_postteam > div li a:nth-of-type(2){ display:block; text-decoration: none; width: 200px; height: 60px; font-size: 0; position: absolute; left: 338px; top:615px; } #content_pc .headerCon .menu-btn{ display: block; } #content_pc .headerCon .menu-btn{ display: block; position: absolute; top: 0; right: 0; z-index: 2; opacity: 1; width: 100%; height: 60px; background-color: rgba(0,0,0,0.8); } #content_pc .headerCon .menu-btn:hover{ opacity:1; } #content_pc .headerCon .menu-btn img{ height: 100%; float: right; margin-right: 20px;} #wrap .menu_out{ display: block; width: 100%; height: 100%; position: fixed; right: 0; top: 0; z-index: 0; } #wrap .menu_out a.btn_close{ position: absolute; display: block; width: 100px; height: 100px; background:url(../images/pc/marvel_menu_close.png) no-repeat; background-size: 100px; right: 20px; top: -120px; opacity: ; cursor: pointer;} #wrap .menu_out a.btn_close:hover{ opacity:1;} #wrap .menu_out #menu_m{ position: absolute; top: 0px; z-index:999; background-color:#ea2328; padding-top: 140px; } #wrap .menu_out #menu_m h3{ position: relative; font-size: 0; width: 350px; height: 114px; background: url(../images/pc/marvel_kv_logo.jpg)no-repeat; background-size: 350px 114px;} #wrap .menu_out #menu_m ul{ padding-bottom: 3px; background:rgba(0,0,0,0.9); height: 945px; } #wrap .menu_out #menu_m ul li{ border-bottom: 2px solid #FFFFFF; width: 350px; height: 135px; color:#ea2328; display:block; overflow:hidden; position: relative; cursor: pointer;} #wrap .menu_out #menu_m ul li:last-child{ border-bottom: 2px solid #FFFFFF; padding-bottom:2px;} #wrap .menu_out #menu_m ul li a{ display: block; width: 100%; height: 100%; background-image: none; } #wrap .menu_out #menu_m ul li span{ display: block; width: 100%; height: 100%; font-size: 50px; line-height: 135px; text-align: center; color:#fcc32e; text-shadow: 1px 1px 0 #000000; } #content_pc .headerCon .logo{ width: 185px; height: 60px; position: absolute; left: 0; top:0; background: url(../images/pc/marvel_kv_logo.jpg)no-repeat; background-size: 185px 60px; z-index: 3; font-size: 0; } #content_pc .headerCon ul.movie_postteam{ position: relative; width: 100%; height: 100%; padding: 0px; margin: 0px 0 0 0; } #content_pc .headerCon ul.movie_postteam > div li{ width: 100%; height: 701px; margin-top: 0px; z-index:1; background: url(../images/post/marvel_kv_m.jpg) no-repeat; } #content_pc .headerCon ul.movie_postteam .slick-track { margin-left: 220px;} #content_pc .headerCon ul.movie_postteam > div li a{ display:block; text-decoration: none; height: 701px; position: relative;} #content_pc .headerCon ul.movie_postteam > div li a img{ display:block; width: 100%; height: 293px; } #content_pc .headerCon ul.movie_postteam > div li a .title{ width: 640px; height: 55px; line-height: 55px; position: absolute; bottom: 0; left: 0; background: rgba(0,0,0,0.75); color:#FFFFFF; padding:0px 30px;} #content_pc .headerCon ul.movie_postteam > div li a .title h1{ width: 100%; font-size: 33px; padding:0; text-align: left; font-weight: 100; float: left; } #content_pc .headerCon ul.movie_postteam > div li a .title .type1{ display: none; text-align: left; font-size: 14px; width: 100%; line-height: 30px; padding:0; color:#FFFFFF; font-weight: 100; float: left; } #content_pc .headerCon ul.movie_postteam > div li a .title .type2{ display: none; text-align: left; font-size: 18px; width: 100%; line-height: 24px; padding:0; color:#FFFFFF; font-weight: 100; float: left; } #content_pc .tip .content { display: none; background-color:#0a0a0a; padding: 30px 50px; } #content_pc .tip .content ol > li { line-height: 1.6em; font-size: 16px; font-weight: normal; margin: 0; text-align:justify; list-style-type: decimal; color: #fff; } #content_pc .headerCon ul.menu{ display: none; position: absolute; width: 100%; height: 60px; line-height: 60px; padding-left: 470px; margin: 0; left: 0; top: 0; z-index: 1; background: rgba(0,0,0,0.75); } #content_pc .headerCon ul.menu li{ width: 135px; height: 32px; line-height: 32px; margin: 6px 5px; float: left; color:#ea2328; border-radius: 25px; } #content_pc .headerCon ul.menu li:hover{ background: #464c4f; } #content_pc .headerCon ul.menu li a{ width: 100%; height: 100%; display: block; } #content_pc .headerCon ul.menu li span{ display: block; width: 100%; color:#FFFFFF; background: url(../images/pc/marvel_kv_list.png) no-repeat; background-position: 19px top; text-shadow: 1px 1px 0 #000000; } #content_pc .headerCon ul.menu li:nth-child(3) span{ display: block; width: 100%; color:#FFFFFF; background: url(../images/pc/marvel_kv_list.png) no-repeat; background-position: 26px top; } #content_pc .headerCon ul.menu li:nth-child(4) span{ display: block; width: 100%; color:#FFFFFF; background: url(../images/pc/marvel_kv_list.png) no-repeat; background-position: 14px top; padding-left: 10px;} #content_pc .headerCon ul.menu li img{ display: block; width: 15px; height: 34px; float: left; } /* HeaderCon PC End */ /* contentCon PC */ #content_pc .contentCon { width: 640px; position: relative; text-align: center; overflow: hidden; } #content_pc .contentCon .item01{ position: relative; margin: 0; padding:0; width: 100%; height: 100%; } #content_pc .contentCon .item01 ul{ position: relative; width:100%; height: 100%; margin: 5px 0 0 20px; padding: 0px; box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5); } #content_pc .contentCon .item01 ul li{ width: 280px; height: 429px; overflow: hidden; float:left; margin:0px 30px 50px 0px; border: 1px solid #ffffff; box-shadow:6px 4px 0px #000000; -webkit-transition: all 0.1s; -moz-transition: all 0.1s; -o-transition: all 0.1s; -ms-transition: all 0.1s; transition: all 0.1s;} #content_pc .contentCon .item01 ul li:nth-child(1) .view .mask, .view .content{ width: 280px; height: 55px; position: absolute; overflow: hidden; top: 372px; left: 0; opacity: 1; } #content_pc .contentCon .item01 ul li:nth-child(9) .view .mask{ width: 280px; height: 90px; position: absolute; overflow: hidden; top: 340px; left: 0; opacity: 1; } #content_pc .contentCon .item01 ul li:nth-child(9){ margin-left: 0; } #content_pc .contentCon .item01 ul li:hover{ border: 1px solid #ffffff; -webkit-transition: all 0.1s; -moz-transition: all 0.1s; -o-transition: all 0.1s; -ms-transition: all 0.1s; transition: all 0.1s;} #content_pc .contentCon .item01 ul li .view { width: 280px; height: 429px; margin: 0px; float: left; border: 0px; overflow: hidden; position: relative; text-align: center; } #content_pc .contentCon .item01 ul li .view .mask, .view .content { width: 280px; height: 55px; position: absolute; overflow: hidden; top: 372px; left: 0; opacity: 1;} #content_pc .contentCon .item01 ul li .view:hover .mask{ opacity: 1; } #content_pc .contentCon .item01 ul li .view img { display: block; position: relative; width: 100%; height: 100%;} #content_pc .contentCon .item01 ul li .view h2 { text-transform: uppercase; color: #fcc32e; font-weight:normal; text-align: center; position: absolute; font-size: 27px; bottom:0px; width:100%; padding-bottom:11px; border-bottom:0px; } #content_pc .contentCon .item01 ul li .view h2 span { font-size: 22px; } #content_pc .contentCon .item01 ul li .view h3 { display: none; font-size: 18px; position: absolute;color: #fff;padding: 0px 18px;text-align:center; width:100%; top:142px} #content_pc .contentCon .item01 ul li .view h3:after{content: "・";} #content_pc .contentCon .item01 ul li .view h3:before{content: "・";} #content_pc .contentCon .item01 ul li .view p { display: none; font-size: 16px; position: absolute;color: #fff; font-weight:normal;padding: 0px 18px;text-align: center; width:100%; top:172px; line-height:22px; text-align:justify;} #content_pc .contentCon .item01 ul li .view a.info {display: inline-block; text-decoration: none;padding: 7px 14px;background: #000;color: #fff;text-transform: uppercase;box-shadow: 0 0 1px #000;} #content_pc .contentCon .item01 ul li .view a.info: hover {box-shadow: 0 0 5px #000;} /*#content_pc .contentCon .item01 ul li:nth-child(13){ display: none; }*/ .view-first img { -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;} .view-first .mask { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; background-color: rgba(0,0,0, 0.7); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;} .view-first .mask01 { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; background-color: rgba(0,0,0, 1); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;} .view-first h2 { -webkit-transform: translateY(-100px); -moz-transform: translateY(-100px); -o-transform: translateY(-100px); -ms-transform: translateY(-100px); transform: translateY(-100px); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -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;} .view-first h3 { -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -o-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;} .view-first p { -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -o-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;} .view-first:hover img { -webkit-transform: scale(1,1); -moz-transform: scale(1,1); -o-transform: scale(1,1); -ms-transform: scale(1,1); transform: scale(1,1);} .view-first a.info { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -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;} .view-first:hover .mask { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1;} .view-first:hover .mask01 { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1;} .view-first:hover h2,.view-first:hover h3,.view-first:hover p,.view-first:hover a.info { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px);} .view-first:hover p { -webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; -o-transition-delay: 0.1s; -ms-transition-delay: 0.1s; transition-delay: 0.1s;} .view-first:hover a.info { -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -ms-transition-delay: 0.2s; transition-delay: 0.2s;} .view-first img { -webkit-transform: scale(1,1); -moz-transform: scale(1,1); -o-transform: scale(1,1); -ms-transform: scale(1,1); transform: scale(1,1);} .view-first .mask { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1;} .view-first .mask01 { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1;} .view-first h2,.view-first h3,.view-first p,.view-first a.info { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px);} .view-first p { -webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; -o-transition-delay: 0.1s; -ms-transition-delay: 0.1s; transition-delay: 0.1s;} .view-first a.info { -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -ms-transition-delay: 0.2s; transition-delay: 0.2s;} }/*手機版end*/