@charset "UTF-8";

._fnctWrap {line-height:1.5;}

/* Photo */
.wrap-photo {overflow: hidden;}
.wrap-photo .container {position: relative; padding-left: 38.5%;}
.wrap-photo .title {padding-top: 17px; padding-bottom: 27px; font-family: 'Dream Medium'; font-size: 30px; color: #383838;}
.wrap-photo .slider {position: relative; right: -16.5%; margin-bottom: 70px; padding-left: 60px;}
.wrap-photo .slider li {padding: 0 5px 0 6px; text-align: center;}
.wrap-photo .slider li.ani {bottom: -100px;}
.ani-on .wrap-photo .slider li.ani {bottom: 0;}
.ani-on .wrap-photo .slider li.ani1 {transition-delay: 0.0s;}
.ani-on .wrap-photo .slider li.ani2 {transition-delay: 0.2s;}
.ani-on .wrap-photo .slider li.ani3 {transition-delay: 0.4s;}
.ani-on .wrap-photo .slider li.ani4 {transition-delay: 0.6s;}
.ani-on .wrap-photo .slider li.ani5 {transition-delay: 0.8s;}
.wrap-photo .slider .thumb {position: relative; overflow: hidden; border-radius: 13px;}
.wrap-photo .slider .thumb a {display: block;}
.wrap-photo .slider .thumb img {display: inline-block; width: 100%;}
.wrap-photo .slider .desc {overflow: hidden; position: absolute; left: 0; bottom: 0; width: 100%; padding: 22px 20px; background: rgba(0,0,0,.6); font-family: 'Dream Regular'; font-size: 18px; text-align: center; white-space: nowrap; text-overflow: ellipsis;  color: #fff;}
.wrap-photo .slider .desc span { position: relative;}
.wrap-photo .slider .desc span::after {content: ''; position: absolute; left: 0; bottom: -3px;  width: 0; height: 1px; background: #fff; transition: 1s;}
.wrap-photo .slider a:hover .desc span::after {width: 100%;}
.wrap-photo .control {position: absolute; right: 0; top: 10px;}
.wrap-photo .control button {display: inline-block; width: 60px; height: 60px; vertical-align: middle; text-indent: -99999px; transition: 1s;}
.wrap-photo .control button:hover {background-color: rgba(0,0,0,.8)}
.wrap-photo .control .prev {background: rgba(0,0,0,.5) url('../images/btn-photo-prev.png') no-repeat center center;}
.wrap-photo .control .next {background: rgba(0,0,0,.5) url('../images/btn-photo-next.png') no-repeat center center;}
.wrap-photo .control .stop {display: none; background: rgba(0,0,0,.5) url('../images/btn-photo-stop.png') no-repeat center center;}
.wrap-photo .control .play {display: none; background: rgba(0,0,0,.5) url('../images/btn-photo-play.png') no-repeat center center;}
.wrap-photo .control .stop.on,
.wrap-photo .control .play.on {display: inline-block;}

@media all and (max-width: 1820px) {
    .wrap-photo .control {right: 20px;}
}

@media all and (max-width: 1000px) {
    .wrap-photo .container {padding-left: 15%;}
    .wrap-photo .slider {right: 0;}
}

@media all and (max-width: 900px) {
    .wrap-photo .container {padding-left: 45%;}
    .wrap-photo .slider {right: 0; margin-bottom: 50px; padding-right: 10px; padding-left: 154px;}
    .wrap-photo .slider li {padding: 0 10px;}
    .wrap-photo .control {right: 20px;}
}

@media all and (max-width: 800px) {
    .wrap-photo .container {padding-left: 28%;}
    .wrap-photo .slider {padding-left: 50px;}
    .wrap-photo .control {top: 17px;}
    .wrap-photo .control button {width: 45px; height: 45px;}
}

@media all and (max-width: 585px) {
    .wrap-photo .container {padding-left: 20px;}
    .wrap-photo .slider {padding-left: 20px;}
}

@media all and (max-width: 500px) {
    .wrap-photo .container {padding-left: 20px;}
    .wrap-photo .title {padding-top: 25px; padding-bottom: 25px; font-size: 25px;}
    .wrap-photo .control {right: 0; top: 12px;}
    .wrap-photo .control button {width: 60px; height: 60px;}
    .wrap-photo .slider {margin-bottom: 40px; padding-right: 0; padding-left: 0;}
    .wrap-photo .slider .desc {padding: 13px; font-size: 16px;}
}