@charset "utf-8";
/* CSS Document */
.ja-ss-slideshow { position:relative; height:309px }
.ja-ss-loading:before { content:""; display:block; background:url("../images/slideloading.gif") no-repeat center center; width:100%; position:absolute; left:0; top:0; z-index:5 }
.ja-ss-wrap { overflow:hidden; position:relative; width:100% }
.ja-ss-items { width:100% }
.ja-ss-item { display:block; float:left; margin:0; overflow:hidden; position:absolute; right:0; left:0; width:100%; z-index:1; backface-visibility:hidden; -moz-backface-visibility:hidden; -webkit-backface-visibility:hidden }
.ja-ss-thumbs-wrap { height:30px; width:100%; text-align:center; clear:both; position:relative; bottom:0px; overflow:hidden; z-index:9; }
/*===============================
/templates/ja_sugite/css/mod_jaslideshowlite-custom.css
================================================================================*/
.ja-slideshow .container { position:absolute; left:50%; top:0; }
@media (min-width:768px) {
.ja-slideshow .container {
margin-left:-340px;
width:680px
}
}
@media (min-width:992px) {
.ja-slideshow .container {
margin-left:-470px;
width:940px
}
}
@media (min-width:1200px) {
.ja-slideshow .container {
margin-left:-570px;
width:1140px
}
}
.ja-ss-sprite img { width:auto; background:none; display:inline-block }
.ja-ss-sprite.first img { max-width:100%; width:auto; -webkit-transition:width 300ms ease-in-out; transition:width 300ms ease-in-out }
@media (max-width:1199px) {
.ja-ss-sprite.first img {
max-width:70%
}
}
.ja-ss-item-bg { position:relative; z-index:1 }
.ja-ss-sprite, .ja-ss-desc { position:absolute; z-index:2; opacity:0 }
.leftright .ja-ss-sprite.first { bottom:10%; left:-10% }
.leftright .ja-ss-sprite.second { bottom:10%; left:110% }
.active.leftright .ja-ss-sprite.first { left:40% }
.active.leftright .ja-ss-sprite.second { left:60% }
.leftleft .ja-ss-sprite.first, .leftleft .ja-ss-sprite.second { bottom:20%; left:-10% }
.active.leftleft .ja-ss-sprite.first { left:40% }
.active.leftleft .ja-ss-sprite.second { left:60% }
.rightright .ja-ss-sprite.first, .rightright .ja-ss-sprite.second { bottom:auto; top:180px; right:-110%; left:auto }
@media (max-width:1200px) {
.rightright .ja-ss-sprite.first, .rightright .ja-ss-sprite.second {
width:50%
}
}
.rightright .ja-ss-desc { top:30%; width:50% }
.rightright.active .ja-ss-sprite.first { right:0 }
.rightright.active .ja-ss-sprite.second { left:60% }
.rightright.active .ja-ss-desc { width:50%; left:0 }
.updown .ja-ss-sprite.first { left:0; bottom:-10% }
.updown .ja-ss-sprite.second { left:60%; bottom:110% }
.updown .ja-ss-desc { top:auto; left:auto; right:-50%; bottom:18% }
.updown.active .ja-ss-desc { right:0; bottom:18%; top:auto; width:50%; left:auto; padding-left:28px }
.updown.active .ja-ss-sprite.first { bottom:0; left:0 }
.updown.active .ja-ss-sprite.second { bottom:20% }
.downdown .ja-ss-sprite.first { left:40%; bottom:110% }
.downdown .ja-ss-sprite.second { left:60%; bottom:110% }
.downdown .ja-ss-desc { width:100%; text-align:center; left:0; right:0; top:-30px }
.downdown.active .ja-ss-desc { top:30%; left:0 }
.active.downdown .ja-ss-sprite.first { bottom:20% }
.active.downdown .ja-ss-sprite.second { bottom:20% }
.rupdown .ja-ss-sprite.first { -webkit-transform-origin:-200% 70%; -moz-transform-origin:-200% 70%; -o-transform-origin:-200% 70%; transform-origin:-200% 70%; -webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg); -o-transform:rotate(-90deg); transform:rotate(-90deg); left:40%; bottom:20% }
.rupdown .ja-ss-sprite.second { -webkit-transform-origin:200% 70%; -moz-transform-origin:200% 70%; -o-transform-origin:200% 70%; transform-origin:200% 70%; -webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg); -o-transform:rotate(-90deg); transform:rotate(-90deg); left:60%; bottom:20% }
.active.rupdown .ja-ss-sprite.first, .active.rupdown .ja-ss-sprite.second { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg) }
.rupup .ja-ss-sprite.first { -webkit-transform-origin:-200% 70%; -moz-transform-origin:-200% 70%; -o-transform-origin:-200% 70%; transform-origin:-200% 70%; -webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg); -o-transform:rotate(-90deg); transform:rotate(-90deg); left:40%; bottom:20% }
.rupup .ja-ss-sprite.second { -webkit-transform-origin:200% 70%; -moz-transform-origin:200% 70%; -o-transform-origin:200% 70%; transform-origin:200% 70%; -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -o-transform:rotate(90deg); transform:rotate(90deg); left:60%; bottom:20% }
.active.rupup .ja-ss-sprite.first, .active.rupup .ja-ss-sprite.second { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg) }
.active .ja-ss-sprite { opacity:1 }
.ja-ss-desc { top:30%; left:-20%; opacity:0; color:rgba(255, 255, 255, 0.8); width:540px; font-size:16px; line-height:1.75; padding:0; font-weight:300; background:none }
@media (min-width:1200px) {
.ja-ss-desc {
font-size:24px
}
}
.ja-ss-desc h3 { font-size:34px; font-weight:300; line-height:1.7; color:#ffffff }
@media (min-width:1200px) {
.ja-ss-desc h3 {
font-size:50px
}
}
.ja-ss-desc .btn { margin-top:0 }
@media (min-width:1200px) {
.ja-ss-desc .btn {
margin-top:14px
}
}
.active .ja-ss-desc { left:20% }
.active .ja-ss-desc { opacity:1 }
.ja-ss-thumbs-wrap { background:none; position:absolute; bottom:0; z-index:999 }
.ja-ss-thumbs { width:200px; text-align:center; position:absolute; left:50%; margin-left:-100px }