@charset "UTF-8";



/* ==========================================================================
   movie
========================================================================== */
.wrapper {
    background: url(../img/movie/movie_bg.jpg) center top repeat;
}



/*------------------------------------------------------------
    title
------------------------------------------------------------*/
.title_section {
    position: relative;
    width: 960px;
    height: 209px;
    margin: 0 auto;
}
.movie_title {
    position: absolute;
    top: 90px;
    left: 214px;
}



/*------------------------------------------------------------
    movie
------------------------------------------------------------*/
.movie_section {
    position: relative;
    width: 960px;
    margin: 0 auto;
}
.movie_stitle {
    position: relative;
    height: 87px;
    margin-bottom: 21px;
    text-align: center;
}
.movie_stitle:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 10px;
    left: 50%;
    width: 378px;
    height: 36px;
    margin-left: -190px;
    background: url(../img/movie/movie_stitle_bg.png) 0 0 no-repeat;
}
.movie_contents {
    position: relative;
    width: 928px;
    height: 543px;
    margin: 0 auto;
    background: url(../img/movie/movie_frame_01.png) 0 0 no-repeat;
}
.movie_player {
    position: absolute;
    top: 24px;
    left: 24px;
    width: 880px;
    height: 495px;
    background-color: #451d22;
    cursor: pointer;
}
.movie_player iframe {
    width: 100%;
    height: 100%;
}
.movie_img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.playing .movie_img,
.ua-wiiu .movie_img {
    display: none;
}
.movie_img img {
    max-width: 100%;
    height: auto;
}
.movie_icon {
    display: block;
    position: absolute;
    top: 186px;
    left: 378px;
    width: 125px;
    height: 124px;
    background: url(../img/movie/movie_icon_play.png) 0 0 no-repeat;
}
.playing .movie_icon,
.ua-wiiu .movie_icon {
    display: none;
}
.movie_thumb {
    margin-bottom: 129px;
    padding-top: 61px;
    text-align: center;
}
.movie_thumb .movie_thumb_list{
    margin-bottom: 25px;
    position: relative;
    height: 340px;
}
.movie_thumb_item {
    position: relative;
    display: inline-block;
    width: 206px;
    height: 177px;
    margin: 0 11px;
}
.movie_new:before {
  content: url(../img/top/movie_new.png);
  position: absolute;
  top: -4px;
  left: -4px;
  z-index: 2;
}
.movie_thumb_item a {
    display: block;
    position: relative;
    height: 100%;
    background: url(../img/movie/movie_thumb_bg.png) 0 0 no-repeat;
}
.movie_thumb_item.current a:before {
    content: "";
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/movie/movie_thumb_bg_ov.png) 0 0 no-repeat;
}
.movie_thumb_img {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 178px;
    height: auto;
    overflow: hidden;
    border-radius: 2px 2px 0 0;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.3) inset;
}
.movie_thumb_title {
    position: absolute;
    top: 124px;
    left: 14px;
}
.movie_thumb_item.introduction{
    position: absolute;
    top: 0px;
    left: 255px;
}
.movie_thumb_item.world{
    position: absolute;
    top: 0px;
    left: 358px;
}
.movie_thumb_item.field{
    position: absolute;
    top: 0px;
    left: 490px;
}


/*------------------------------------------------------------
  hover
------------------------------------------------------------*/
.no-touchevents .movie_icon,
.no-touchevents .movie_thumb_item a .movie_thumb_img,
.no-touchevents .movie_thumb_item a .movie_thumb_title {
    transition: opacity 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.no-touchevents .movie_player:hover .movie_icon,
.no-touchevents .movie_thumb_item a:hover .movie_thumb_img,
.no-touchevents .movie_thumb_item a:hover .movie_thumb_title {
    opacity: 0.8;
}