/* 2016 ----------------------------------------------- */ .overImg{ position:absolute; top:0; left:-150px;z-index:10;} .tvArea{ position:relative; z-index:50;} .tvArea .tv{ height:641px;position:relative;} .tvArea .tv .frame{ position:relative; z-index:10;height:641px; background:url(../../../img/mov/frame.png) no-repeat;} .tvArea .tv .frame a{ display:block; width:600px; height:336px; position:absolute; top:138px; left:136px; z-index:15; -moz-transition: -moz-transform 0.1s linear; -webkit-transition: -webkit-transform 0.1s linear; -o-transition: -o-transform 0.1s linear; -ms-transition: -ms-transform 0.1s linear; transition: transform 0.1s linear; background:url(../../../img/mov/btn_play.png) center center no-repeat; background-size:100%; } .tvArea .tv .frame a:hover{ -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } /* top ----------------------------------------------- */ #mainSlideArea { width:100% !important; overflow:hidden; position:relative;} #mainSlideArea.out{ -webkit-filter: brightness(1000%); -moz-filter: brightness(1000%); -o-filter: brightness(1000%); -ms-filter: brightness(1000%); filter: brightness(1000%); opacity:0; } #mainSlideArea.in{ -moz-transition: -moz-all 1000ms cubic-bezier(0,1.13,.21,.96); -webkit-transition: -webkit-all 1000ms cubic-bezier(0,1.13,.21,.96); -o-transition: -o-all 1000mss cubic-bezier(0,1.13,.21,.96); -ms-transition: -ms-all 1000ms cubic-bezier(0,1.13,.21,.96); transition: all 1000ms cubic-bezier(0,1.13,.21,.96); -webkit-filter: brightness(1); -moz-filter: brightness(1); -o-filter: brightness(1); -ms-filter: brightness(1); filter: brightness(1); opacity:1; } #mainSlideArea li{ width:100%;} #mainSlideArea img{ width:100% !important;} #slideTitle{ width:100%; height:100%; position:absolute !important; top:0; left:0; z-index:11; opacity:0; -moz-transition: -moz-all 1000ms linear; -webkit-transition: -webkit-all 1000ms linear; -o-transition: -o-all 1000ms linear; -ms-transition: -ms-all 1000ms linear; transition: all 1000ms linear; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -o-transform: scale(0.8); -ms-transform: scale(0.8) ; transform: scale(0.8); } #slideTitle.hidden{ opacity:0; -moz-transition: -moz-all 1000ms linear; -webkit-transition: -webkit-all 1000ms linear; -o-transition: -o-all 1000ms linear; -ms-transition: -ms-all 1000ms linear; transition: all 1000ms linear; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1) ; transform: scale(1); } #slideTitle.hidden2{ opacity:0; -moz-transition: -moz-all 100ms linear; -webkit-transition: -webkit-all 100ms linear; -o-transition: -o-all 100ms linear; -ms-transition: -ms-all 100ms linear; transition: all 100ms linear; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -o-transform: scale(0.8); -ms-transform: scale(0.8) ; transform: scale(0.8); } #slideTitle.titleout { opacity:1; -moz-transition: -moz-all 1500ms linear; -webkit-transition: -webkit-all 1500ms linear; -o-transition: -o-all 1500ms linear; -ms-transition: -ms-all 1500ms linear; transition: all 1500ms linear; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -o-transform: scale(0.8); -ms-transform: scale(0.8) ; transform: scale(0.8); } #slideTitle.titleoutZoom { -moz-transition: -moz-all 6000ms linear; -webkit-transition: -webkit-all 6000ms linear; -o-transition: -o-all 6000ms linear; -ms-transition: -ms-all 6000ms linear; transition: all 6000ms linear; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1) ; transform: scale(1); } #slideTitle.titleout2 { -webkit-animation: titleout2 7000ms; animation: titleout2 7000ms; -webkit-animation-timing-function: linear; animation-timing-function: linear; } @-webkit-keyframes titleout2 { 0% {-webkit-transform: scale(0.8);} 3% {-webkit-transform: scale(0.8);} 90% {} 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1) ; transform: scale(1); } } @keyframes titleout2 { 0% {transform: scale(0.8);} 3% {transform: scale(0.8);} 90% {} 100% {-webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1) ; transform: scale(1); } } #main .slideArea{width:100% !important; overflow:hidden;} #main .slide{ width:100%; height:500px; position:absolute; top:0; left:0; -webkit-transform: scale(1) ; -moz-transform: scale(1) ; -o-transform: scale(1) ; -ms-transform: scale(1) ; transform: scale(1); } #main .slideArea .flash{ -webkit-filter: brightness(1000%); -moz-filter: brightness(1000%); -o-filter: brightness(1000%); -ms-filter: brightness(1000%); filter: brightness(1000%); opacity:0; -webkit-transform: scale(1.6); -moz-transform: scale(1.6); -o-transform: scale(1.6); -ms-transform: scale(1.6) ; transform: scale(1.6); } #main .zoomOut{ -moz-transition: -moz-all 500ms cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transition: -webkit-all 500ms cubic-bezier(0.215, 0.61, 0.355, 1); -o-transition: -o-all 500ms cubic-bezier(0.215, 0.61, 0.355, 1); -ms-transition: -ms-all 500ms ubic-bezier(0.215, 0.61, 0.355, 1); transition: all 500ms cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1) ; transform: scale(1.1); } #main .zoomOut2{ -moz-transition: -moz-all 10000ms linear; -webkit-transition: -webkit-all 10000ms linear; -o-transition: -o-all 10000ms linear; -ms-transition: -ms-all 10000ms linear; transition: all 10000ms linear; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1) ; transform: scale(1); } #main .zoomOut2resize{ -moz-transition: -moz-all 0ms linear; -webkit-transition: -webkit-all 0ms linear; -o-transition: -o-all 0ms linear; -ms-transition: -ms-all 0ms linear; transition: all 0ms linear; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1) ; transform: scale(1); } #main .zoomIn{ -moz-transition: -moz-all 300ms linear; -webkit-transition: -webkit-all 300ms linear; -o-transition: -o-all 300ms linear; -ms-transition: -ms-all 300ms linear; transition: all 300ms linear; -webkit-transform: scale(1.6); -moz-transform: scale(1.6); -o-transform: scale(1.6); -ms-transform: scale(1.6) ; transform: scale(1.6); } #main .slideArea .slideOut{ -moz-transition: -moz-all 3000ms cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-transition: -webkit-all 3000ms cubic-bezier(0.175, 0.885, 0.32, 1.275); -o-transition: -o-all 3000ms cubic-bezier(0.175, 0.885, 0.32, 1.275); -ms-transition: -ms-all 3000ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: all 3000ms cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-filter: brightness(500%); -moz-filter: brightness(500%); -o-filter: brightness(500%); -ms-filter: brightness(500%); filter: brightness(500%); } #main .slideArea .slideIn{ -moz-transition: -moz-all 1000ms cubic-bezier(0,1.13,.21,.96); -webkit-transition: -webkit-all 1000ms cubic-bezier(0,1.13,.21,.96); -o-transition: -o-all 1000mss cubic-bezier(0,1.13,.21,.96); -ms-transition: -ms-all 1000ms cubic-bezier(0,1.13,.21,.96); transition: all 1000ms cubic-bezier(0,1.13,.21,.96); -webkit-filter: brightness(1); -moz-filter: brightness(1); -o-filter: brightness(1); -ms-filter: brightness(1); filter: brightness(1); opacity:1; } #main .slideArea dl.data{ width:250px; background:url(../../../inc/img/white_80.png); padding:20px; position:absolute; bottom:40px; left:40px;} #main .slideArea dl.data dt{ font-size:8px; color:#ff484b;} #main .slideArea dl.data dd{ font-size:10px; line-height:12px; margin-bottom:10px;} #main .coverBG{ width:100%; position:absolute; top:0; left:0; z-index:4;display:none; background-color:#fff;} #main .navi{ width:100%; max-width:1280px; margin:auto; position:absolute; top:0; left:0; z-index:12; display:none;} #main .btn{ background-color:#ff484b; color:#fff;} #main .logo{ display:none; position:absolute; top:40px; left:40px; width:260px; height:93px; z-index:12; background:url(../../../img/common/logo/red.png) no-repeat; background-size:contain;} #main .navi .prev{ position:absolute; top:49%; left:40px; width:80px; height:80px; background:url(../../../img/common/btn_prev.png) no-repeat; cursor:pointer; display:none; -moz-transition: -moz-all 200ms ease-in-out; -webkit-transition: -webkit-all 200ms ease-in-out; -o-transition: -o-all 200ms ease-in-out; -ms-transition: -ms-all 200ms ease-in-out; transition: all 200ms ease-in-out; } #main .navi .prev:hover{ left:30px;} #main .navi .next{ position:absolute; top:49%; right:40px; width:80px; height:80px; background:url(../../../img/common/btn_next.png) no-repeat; cursor:pointer; -moz-transition: -moz-all 200ms ease-in-out; -webkit-transition: -webkit-all 200ms ease-in-out; -o-transition: -o-all 200ms ease-in-out; -ms-transition: -ms-all 200ms ease-in-out; transition: all 200ms ease-in-out; } #main .navi .next:hover{ right:30px;} body.modeRed #main .navi .prev { background:url(../../../img/common/pager/prev/red.png) no-repeat; background-size:contain;} body.modeOrange #main .navi .prev { background:url(../../../img/common/pager/prev/orange.png) no-repeat; background-size:contain;} body.modeYellow #main .navi .prev { background:url(../../../img/common/pager/prev/yellow.png) no-repeat; background-size:contain;} body.modeGreen #main .navi .prev { background:url(../../../img/common/pager/prev/green.png) no-repeat; background-size:contain;} body.modeSky #main .navi .prev { background:url(../../../img/common/pager/prev/sky.png) no-repeat; background-size:contain;} body.modeBlue #main .navi .prev { background:url(../../../img/common/pager/prev/blue.png) no-repeat; background-size:contain;} body.modePurple #main .navi .prev { background:url(../../../img/common/pager/prev/purple.png) no-repeat; background-size:contain;} body.modeRed #main .navi .next { background:url(../../../img/common/pager/next/red.png) no-repeat; background-size:contain;} body.modeOrange #main .navi .next { background:url(../../../img/common/pager/next/orange.png) no-repeat; background-size:contain;} body.modeYellow #main .navi .next { background:url(../../../img/common/pager/next/yellow.png) no-repeat; background-size:contain;} body.modeGreen #main .navi .next { background:url(../../../img/common/pager/next/green.png) no-repeat; background-size:contain;} body.modeSky #main .navi .next { background:url(../../../img/common/pager/next/sky.png) no-repeat; background-size:contain;} body.modeBlue #main .navi .next { background:url(../../../img/common/pager/next/blue.png) no-repeat; background-size:contain;} body.modePurple #main .navi .next { background:url(../../../img/common/pager/next/logo/purple.png) no-repeat; background-size:contain;} #main .navi .scrollDown{ display:none; position:absolute; bottom:20px; left:50%; margin-left:-66px; width:133px; height:67px; background:url(../../../img/common/scrolldown/red.png) no-repeat;cursor:pointer; -moz-transition: -moz-all 200ms ease-in-out; -webkit-transition: -webkit-all 200ms ease-in-out; -o-transition: -o-all 200ms ease-in-out; -ms-transition: -ms-all 200ms ease-in-out; transition: all 200ms ease-in-out; } #main .navi .scrollDown:hover{ bottom:10px;} body.modeRed #main .navi .scrollDown { background:url(../../../img/common/scrolldown/red.png) no-repeat; background-size:contain;} body.modeOrange #main .navi .scrollDown { background:url(../../../img/common/scrolldown/orange.png) no-repeat; background-size:contain;} body.modeYellow #main .navi .scrollDown { background:url(../../../img/common/scrolldown/yellow.png) no-repeat; background-size:contain;} body.modeGreen #main .navi .scrollDown { background:url(../../../img/common/scrolldown/green.png) no-repeat; background-size:contain;} body.modeSky #main .navi .scrollDown { background:url(../../../img/common/scrolldown/sky.png) no-repeat; background-size:contain;} body.modeBlue #main .navi .scrollDown { background:url(../../../img/common/scrolldown/blue.png) no-repeat; background-size:contain;} body.modePurple #main .navi .scrollDown { background:url(../../../img/common/scrolldown/logo/purple.png) no-repeat; background-size:contain;} #main .visualBanner{ position:absolute; bottom:20px; left:50%; z-index:13;width:500px; height:106px; margin-left:-250px;ursor:pointer; } #main .visualBanner a{ -moz-transition: -moz-all 200ms ease-in-out; -webkit-transition: -webkit-all 200ms ease-in-out; -o-transition: -o-all 200ms ease-in-out; -ms-transition: -ms-all 200ms ease-in-out; transition: all 200ms ease-in-out; -webkit-transform: scale(0.98); -moz-transform: scale(0.98); -o-transform: scale(0.98); -ms-transform: scale(0.98) ; transform: scale(0.98); } #main .visualBanner:hover a{ -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1) ; transform: scale(1); } #main .visualBanner a{ display:block; height:106px; background-color:#000;} #main .visualBanner a img{} body.modeRed #main .visualBanner a { background:url(../../../img/top/banner_visual/red.png) no-repeat #000; background-size:contain;} body.modeOrange #main .visualBanner a { background:url(../../../img/top/banner_visual/orange.png) no-repeat #000; background-size:contain;} body.modeYellow #main .visualBanner a { background:url(../../../img/top/banner_visual/yellow.png) no-repeat #000; background-size:contain;} body.modeGreen #main .visualBanner a { background:url(../../../img/top/banner_visual/green.png) no-repeat #000; background-size:contain;} body.modeSky #main .visualBanner a { background:url(../../../img/top/banner_visual/sky.png) no-repeat #000; background-size:contain;} body.modeBlue #main .visualBanner a { background:url(../../../img/top/banner_visual/blue.png) no-repeat #000; background-size:contain;} body.modePurple #main .visualBanner a { background:url(../../../img/top/banner_visual/purple.png) no-repeat #000; background-size:contain;} #main .navi .zoom{ position:absolute; bottom:20px; right:20px; width:100px; height:100px; border: solid 3px #ccc; overflow:hidden; cursor:pointer;} #main .navi .zoom a{ display:block; height:100px; position:relative; -moz-transition: -moz-transform 500ms cubic-bezier(0,.58,.52,.98); -webkit-transition: -webkit-transform 500ms cubic-bezier(0,.58,.52,.98); -o-transition: -o-transform 500ms cubic-bezier(0,.58,.52,.98); -ms-transition: -ms-transform 500ms cubic-bezier(0,.58,.52,.98); transition: transform 500ms cubic-bezier(0,.58,.52,.98); } #main .navi .zoom:hover a{ -webkit-transform: scale(1.2) rotate(5deg); -moz-transform: scale(1.2) rotate(5deg); -o-transform: scale(1.2) rotate(5deg); -ms-transform: scale(1.2) rotate(5deg); transform: scale(1.2) rotate(5deg); } #main .navi .zoom span{ display:block; width:100px; height:100px; position:absolute; top:0; left:0;} body.modeRed #main .navi .zoom { border-color:#ff484b !important;background-color:#ff484b !important;} body.modeOrange #main .navi .zoom { border-color:#ffa500 !important;background-color:#ffa500 !important;} body.modeYellow #main .navi .zoom { border-color:#ffed00 !important;background-color:#ffed00 !important;} body.modeGreen #main .navi .zoom { border-color:#26ff4f !important;background-color:#26ff4f !important;} body.modeSky #main .navi .zoom { border-color:#00dfff !important;background-color:#00dfff !important;} body.modeBlue #main .navi .zoom { border-color:#0080ff !important;background-color:#0080ff !important;} body.modePurple #main .navi .zoom { border-color:#b800ff !important;background-color:#b800ff !important;} body.modeRed #main .navi .zoom span { background:url(../../../img/top/zoom/red.png) no-repeat; background-size:contain;} body.modeOrange #main .navi .zoom span{ background:url(../../../img/top/zoom/orange.png) no-repeat; background-size:contain;} body.modeYellow #main .navi .zoom span{ background:url(../../../img/top/zoom/yellow.png) no-repeat; background-size:contain;} body.modeGreen #main .navi .zoom span { background:url(../../../img/top/zoom/green.png) no-repeat; background-size:contain;} body.modeSky #main .navi .zoom span { background:url(../../../img/top/zoom/sky.png) no-repeat; background-size:contain;} body.modeBlue #main .navi .zoom span { background:url(../../../img/top/zoom/blue.png) no-repeat; background-size:contain;} body.modePurple #main .navi .zoom span{ background:url(../../../img/top/zoom/purple.png) no-repeat; background-size:contain;} #conseptWord{ width:100% !important; height:100%; background:#fff; background-size:contain;position:absolute; top:0; left:0; z-index:11;} #conseptWord.in{ } #conseptWord.stay{ -moz-transition: -moz-all 7000ms linear; -webkit-transition: -webkit-all 7000ms linear; -o-transition: -o-all 7000ms linear; -ms-transition: -ms-all 7000ms linear; transition: all 7000ms linear; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1) ; transform: scale(1); } #conseptWord.out{ -moz-transition: -moz-all 800ms cubic-bezier(.41,.57,.53,.98) ; -webkit-transition: -webkit-all 800ms cubic-bezier(.41,.57,.53,.98); -o-transition: -o-all 800ms cubic-bezier(.41,.57,.53,.98); -ms-transition: -ms-all 800ms cubic-bezier(.41,.57,.53,.98); transition: all 800ms cubic-bezier(.41,.57,.53,.98); -webkit-transform: scale(1.7); -moz-transform: scale(1.7); -o-transform: scale(1.7); -ms-transform: scale(1.7) ; transform: scale(1.7); opacity:0; } #conseptWord.hide{ opacity:0; } #headLine{ padding:40px 0; position:relative; height:750px; z-index:10; } #headLine #frontpage{ width:500px; height:auto; background-color:#666; position:absolute; top:40px; left:0;} #headLine #frontpage img{ width:100%; height:auto; vertical-align:bottom;} #headLine .contents{ padding-left:520px;} #headLine .title{ width:50%; height:130px; float:left; position:relative; margin-bottom:30px;} #headLine .read{width:130px; height:130px; color:#fff; position:absolute; top:0px; left:0;vertical-align:middle; text-align:center; display:table-cell; font-size:2em; line-height:130px;} #headLine .no{ padding-left:140px; font-weight:bold;} #headLine .month{ height:130px; vertical-align:middle; display:table-cell; font-size:2em; line-height:1em;} #headLine .month strong{ font-size:2em;} #headLine .date{ padding-top:5px;font-size:0.6em; line-height:1.6em; font-weight:normal;} #headLine .linkList{ width:50%; height:130px; float:right;} #headLine .linkList .link{ height:60px; background-color:#fff; margin-bottom:10px;} #headLine .linkList .link a{ display:block;background-color:#000; height:60px; line-height:60px; overflow:hidden; text-indent:70px; text-decoration:none; font-size:1.2em;} #headLine .linkList .link a:hover{} #headLine .linkList .link.nolink a{ opacity:0.2} #headLine .newsList{ overflow:hidden; clear:both;} @media screen and (max-width: 1300px) { #headLine .title{ width:100% !important; height:130px; float:left; position:relative; margin-bottom:20px !important;} #headLine .linkList{ width:100% !important; height:130px; float:none; clear:both; margin-bottom:20px !important;} } @media screen and (max-width: 1040px) { #headLine{ height:auto !important; padding-top:40px; } #headLine #frontpage{ width:100% !important; position:relative !important; top:0px !important; left:0; margin-bottom:20px;} #headLine .contents{ padding:0px !important;} #headLine .title{ width:100%; height:130px; float:left; position:relative; margin-bottom:30px;} #headLine .linkList{ width:50%; height:130px; float:right;} } .snsLink{} .snsLink ul{ overflow:hidden;} .snsLink ul li{ height:60px; width:49%; -moz-transition: -moz-all 200ms ease-in-out; -webkit-transition: -webkit-all 200ms ease-in-out; -o-transition: -o-all 200ms ease-in-out; -ms-transition: -ms-all 200ms ease-in-out; transition: all 200ms ease-in-out;} .snsLink ul li a, .snsLink ul li a:link, .snsLink ul li a:visited{ display:block; height:60px; line-height:60px; text-align:left; font-size:1.6em; color:#fff !important; text-decoration:none;} .snsLink ul li.facebook{ float:left;background:url(../../../img/share/icon_official_facebook.png) 20px center no-repeat #3c599f;} .snsLink ul li.twitter{ float:right;background:url(../../../img/share/icon_official_twitter.png) 20px center no-repeat #2ca7e0;} .snsLink ul li.facebook:hover, .snsLink ul li.twitter:hover{ background-color:#000;} .snsLink ul li.facebook a{ text-indent:57px;} .snsLink ul li.twitter a{ text-indent:74px;} .panelWrap { position:relative; border-bottom:solid 1px #000000; margin-bottom:20px;} .panelWrap h3{border-bottom:solid 1px #000000;} #twitter-ticker iframe{ height:440px; } @media screen and (max-width: 1300px) { #twitter-ticker iframe{ height:302px;} } @media screen and (max-width: 1040px) { } .officialTwitter{ background-color:#000; margin:0 auto 0px auto; width:48%; height:80px; float:left;} .officialTwitter a{display:block; width:100%; height:80px; background:url(../../../img/top/btn_official_twitter.png) center center no-repeat #000; -moz-transition: -moz-all 200ms ease-in-out; -webkit-transition: -webkit-all 200ms ease-in-out; -o-transition: -o-all 200ms ease-in-out; -ms-transition: -ms-all 200ms ease-in-out; transition: all 200ms ease-in-out; } .officialTwitter a:hover{background:url(../../../img/top/btn_official_twitter_on.png) center center no-repeat #2ca7e0;} .officialFacebook{ background-color:#000; margin:0 auto 0px auto; width:48%; height:80px; float:right;} .officialFacebook a{display:block; width:100%; height:80px; background:url(../../../img/top/btn_official_twitter.png) center center no-repeat #000; -moz-transition: -moz-all 200ms ease-in-out; -webkit-transition: -webkit-all 200ms ease-in-out; -o-transition: -o-all 200ms ease-in-out; -ms-transition: -ms-all 200ms ease-in-out; transition: all 200ms ease-in-out; } .officialFacebook a:hover{background:url(../../../img/top/btn_official_twitter_on.png) center center no-repeat #2ca7e0;} ul.shareApi{ overflow:hidden;} ul.shareApi li{ margin-bottom:10px; width:48%; height:80px; position:relative;} .middle ul.shareApi li, .sp ul.shareApi li{ margin-bottom:10px; width:100%;} @media screen and (max-width: 1300px) { ul.shareApi li{ margin-bottom:10px; width:100%;} } @media screen and (max-width: 1040px) { ul.shareApi li{ margin-bottom:10px; width:100%;} } ul.shareApi li.fb{ float:left;} ul.shareApi li.tw{float:right;} ul.shareApi li a{ display:block; width:100%; height:80px; -moz-transition: -moz-all 200ms ease-in-out; -webkit-transition: -webkit-all 200ms ease-in-out; -o-transition: -o-all 200ms ease-in-out; -ms-transition: -ms-all 200ms ease-in-out; transition: all 200ms ease-in-out; } ul.shareApi li.fb a{ background:url(../../../img/share/fb_area.png) left center no-repeat;background-color:#3c599f;} ul.shareApi li.tw a{ background:url(../../../img/share/tw_area.png) left center no-repeat;background-color:#2ca7e0; } ul.shareApi li.fb a:hover{ background:url(../../../img/share/fb_area.png) no-repeat;background-color:#000; } ul.shareApi li.tw a:hover{ background:url(../../../img/share/tw_area.png) no-repeat;background-color:#000; } ul.shareApi li .sub{ position:absolute; top:25px; right:40px; width:200px; height:32px;} ul.shareApi li .sub .count{ text-align:right; display:block; line-height:10px; vertical-align:bottom;} ul.shareApi li .sub .count img{ margin-right:2px; height:32px; width:auto;} #social{ padding:80px 0;} #bannerArea{ padding:0px 0; margin-bottom:0px;position:relative; z-index:10; } #bannerArea ul.banner{ overflow:hidden; text-align:center; width:100%;} #bannerArea ul.banner li{ width:32%; margin:0 2% 2% 0; display:inline-block;background-color:#000;} #bannerArea ul.fullBanner li{ width:100% !important; margin:0 0 2% 0 !important;} #bannerArea ul.fullBanner li img.pcItem{ display:block;} #bannerArea ul.fullBanner li img.spItem{ display:none;} #bannerArea ul.banner li:nth-child(3n) { margin-right:0; } #bannerArea ul.banner li a{ display:block;} #bannerArea ul.banner li a:hover{} #bannerArea ul.banner li img{ width:100%; height:auto;} @media screen and (max-width: 1040px) { #bannerArea ul.fullBanner li{ width:100%; margin:0 0 2% 0; float:none;} #bannerArea ul.fullBanner li img.pcItem{ display:none;} #bannerArea ul.fullBanner li img.spItem{ display:block;} #bannerArea ul.banner li{ width:100%; margin:0 0 2% 0; float:none;} } #comicsArea{ padding:60px 0;position:relative; z-index:10;} #comicsArea h4{ margin-bottom:20px; background-color:#000; color:#fff; text-align:center; padding:10px; font-size:1.5em;} #comicsArea ul.comics{ overflow:hidden;} #comicsArea ul.comics li{ width:230px; height:560px; overflow:hidden; border-top:solid 5px #000; padding:0 5px 5px 5px; margin:0 20px 20px 0; float:left; background-color:#fff;} #comicsArea ul.comics li:nth-child(5n) { margin-right:0; } #comicsArea ul.comics li span{ display:block; } #comicsArea ul.comics li span.title{ padding:25px 15px 0 15px; height:60px; overflow:hidden; display:block; font-size:1.4em; font-weight:bold;} #comicsArea ul.comics li span.author{ height:65px;padding:0px 15px 0 15px; margin-bottom:5px; text-align:right; overflow:hidden; display:block; vertical-align:middle;} #comicsArea ul.comics li span.read{ height:90px;padding:0px 15px 0 15px; margin-bottom:5px; overflow:hidden; display:block;} #comicsArea ul.comics li span.thumb{ height:230px; width:230px; margin-bottom:5px; overflow:hidden;} #comicsArea ul.comics li span.thumb a{ display:block; height:230px; } #comicsArea ul.comics li span.thumb a div.thumImg{ display:block; height:230px; position:relative; -moz-transition: -moz-transform 500ms cubic-bezier(0,.58,.52,.98); -webkit-transition: -webkit-transform 500ms cubic-bezier(0,.58,.52,.98); -o-transition: -o-transform 500ms cubic-bezier(0,.58,.52,.98); -ms-transition: -ms-transform 500ms cubic-bezier(0,.58,.52,.98); transition: transform 500ms cubic-bezier(0,.58,.52,.98); } #comicsArea ul.comics li span.thumb a:hover div.thumImg{ -webkit-transform: scale(1.1) rotate(5deg); -moz-transform: scale(1.1) rotate(5deg); -o-transform: scale(1.1) rotate(5deg); -ms-transform: scale(1.1) rotate(5deg); transform: scale(1.1) rotate(5deg); } #comicsArea ul.comics li span.thumb img{ width:100%; height:auto;} #comicsArea ul.comics li span.linkList{ } #comicsArea ul.comics li span.sample{ margin-bottom:5px;} #comicsArea ul.comics li span.buy{} #comicsArea ul.comics li span.sample a, #comicsArea ul.comics li span.buy a{ display:block; background-color:#000; height:40px; line-height:40px; text-indent:65px; text-decoration:none; background-size:22px 22px;} #comicsArea ul.comics li span.sample a.cssAnim:hover, #comicsArea ul.comics li span.buy a.cssAnim:hover{ background-color:#333;} #comicsArea ul.comics li span.nolink a{ opacity:0.2;} @media screen and (max-width: 1300px) { #comicsArea ul.comics li:nth-child(5n) { margin-right:20px; } #comicsArea ul.comics li:nth-child(4n) { margin-right:0; } } @media screen and (max-width: 1040px) { #comicsArea ul.comics li{ width:345px; height:685px;} #comicsArea ul.comics li:nth-child(2n) { margin-right:0; } #comicsArea ul.comics li span.thumb{ height:345px; width:345px; margin-bottom:5px; overflow:hidden;} #comicsArea ul.comics li span.thumb a{ display:block; height:345px; } #header .innerBase{ position:relative; z-index:1000;} #social{ position:relative; z-index:10;} #footer .innerBase{position:relative; z-index:10;} #bg-canvas{ z-index:5;} .shareArea{ overflow:hidden; margin-bottom:100px;position:relative; z-index:10;}