@import url(common.css);

/* load_image */
.load_image {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%) scale(.9);
    opacity: .8;
    z-index: 9999;
    visibility: visible;
    animation: loading 2s infinite;
}
.load_image.active {
    visibility: hidden;
    opacity: 0;
    transform: translateX(-50%) translateY(-50%) scale(0);
}


/* header */
header {
    width: 150px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    opacity: 0;
    transition: 1s;
    visibility: hidden;
}
header.active {
    opacity: 1;
    z-index: 9999;
    visibility: visible;
}
.header__logo {
    position: absolute;
    left: 50%;
    top: 50px;
    transform: translateX(-50%);
}
.header__menu_button {
    position: absolute;
    left: 0;    
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    transition: 1s;
    z-index: 9999;
    opacity: .3;
}
.header__menu_button.flash {
    animation: flash 1s infinite;
}
.header__menu_button.active {
    transform: translateX(-80%) translateY(-50%);
}
.header__menu_button:hover {
    opacity: 1;
}
.header__pc_menus {
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateX(-105%) translateY(-50%);
    transition: 1s;
}
.header__pc_menus.active {
    transform: translateX(0) translateY(-50%);
}
.header__pc_menus li {
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    line-height: 8rem;
    opacity: .7;
    position: relative;
}
.header__pc_menus li:last-of-type {margin-bottom: 0;}
.header__pc_menus li::before {
    content: url(../img/호버시.png);
    position: absolute;
    left: 0;
    top: 1rem;
    transform: translateY(-0.5rem);
    z-index: -1;
    opacity: 0;
}
.header__pc_menus li:hover {
    cursor: pointer;
    opacity: 1;
}
.header__pc_menus li:hover::before {
    opacity: 1;
    transition: .5s;
}
.header__mobile {
    display: none;
}


/* section */
section {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    opacity: 0;
    position: absolute;
    transition: 1s;
    visibility: hidden;
}
section.active {
    opacity: 1;
    visibility: visible;
}
section h2 {
    font-size: 1.875rem;
    font-weight: 700;
    border-bottom: 1px solid #fff;
    position: absolute;
    right: 6%;
    top: 6%;
    opacity: 1;
}
section:nth-of-type(n).active {
    opacity: 1;
}

/* Home */
.home {   
    background-image: url("../img/Home.jpg");
    text-align: center;
    text-transform: uppercase;
    transition: 1s;
    opacity: 0;
}
.home h2 {
    display: none;
}
.home__director {
    letter-spacing: 0.6rem;
    opacity: 0;
    transition: 1s;
    margin-top: 2%;
}
.home__director.active {
    opacity: 1;
}
.home__director div {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
}
.home__director_title {
    padding: 2rem 0;
}
.home__director_title span {
    font-size: 0.9375rem;
    line-height: 4rem;
    position: absolute;
    left: 50%;
    top: 0%;
    transform: translateX(-50%) translateY(100%);
    transition: 1s;
}
.home__director_title span.active {
    transform: translateX(-50%) translateY(0);
}
.home__director_line {
    width: 48px;
    height: 1px;
    background: #fff;
    display: block;
    margin: 0 auto;
}
.home__director_name {
    padding: 2rem 0;
}
.home__director_name span {
    font-size: 1.125rem;
    line-height: 4rem;
    position: absolute;
    left: 50%;
    top: 0%;
    transform: translateX(-50%) translateY(-100%);
    transition: 1s 1s;
}
.home__director_name span.active {
    transform: translateX(-50%) translateY(0);
}
.home__title {
    font-size: 5rem;
    font-weight: 900;
    letter-spacing: 5rem;
    margin: 56vh 0 0 0;
    opacity: 0;
    transition: opacity 1s, letter-spacing 1s;
}
.home__title.active {
    opacity: 1;
    letter-spacing: 2rem;
}

/* Synopsis */
.synopsis {
    background-image: url("../img/Synopsis_00.jpg");
    text-align: center;
    display: flex;
    flex-direction: column-reverse;
    opacity: 0;
    transition: 1s;
}
.synopsis__chapters {
    position: absolute;
    left: 0;
    bottom: 5%;
    opacity: 0;
    transition: 1s;
    visibility: hidden;
}
.synopsis__chapters.active {
    visibility: visible;
    bottom: 0;
    opacity: 1;
}
.synopsis__chapters1 {
    margin: 0 0 12% 12%;
    text-align: start;
}
.synopsis__chapters2 {
    text-align: center;
    margin: 0 0 12% 0;
}
.synopsis__chapters3 {
    text-align: end;
    margin: 0 12% 12% 0;
}
.synopsis__chapters h3 {
    font-size: 2.5rem;
    font-weight: 700;
}
.synopsis__chapters2__lines span {
    width: 135px;
}
.synopsis__chapters__text {
    width: 70%;
    line-height: 2rem;
}
.synopsis__chapter2__text {
    text-align: center;
    margin: 0 auto;
}
.synopsis__chapter3__text {
    display: inline-block;
}
.synopsis__indicators {
    display: flex;
    justify-content: center;
    margin-bottom: 5%;
}
.synopsis__indicators li {
    width: 25px;
    height: 25px;
    border-radius: 100%;
    background: #fff;
    margin: 0 30px;
    opacity: .5;
    transition: .5s;
}
.synopsis__indicators li.active {
    background: #f00;
}
.synopsis__indicators li:hover {
    cursor: pointer;
    opacity: 1;
}

/* Casting */
.casting {
    background-image: url("../img/Casting_00.jpg");
}

.casting__control {
    display: flex;
    margin: 8% 0 0 12%;
    align-items: center;
}
.casting__trigger i {
    font-size: 2rem;
    opacity: .5;
    transition: 1s;
}
.casting__trigger.active i {
    transform: rotateY(180deg);
    opacity: 1;
}
.casting__trigger i:hover {
    cursor: pointer;
    opacity: 1;
}
.casting__indicators {
    display: flex;
    overflow: hidden;
}
.casting__indicators img {
    transform: translateX(-1100%);
    margin-left: 30px;
    cursor: pointer;
    opacity: .5;
    transition: opacity .5s, transform 2.5s;
}
.casting__indicators.active img {
    transform: translateX(0);
}
.casting__indicators img:hover {
    opacity: 1;
}
.casting article {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 50%;
    top: 50%;
    visibility: hidden;
}
.casting article.active {
    visibility: visible;
    transition: 1s;
}
.casting article h3 {
    display: none;
}
.casting__name {
    font-size: 3.5rem;
    font-weight: 900;
    transform: translateY(100%);
    opacity: 0;
}
.casting article.active .casting__name {
    transform: translateY(0);
    opacity: 1;
    transition: 1s 1s;
}
.casting__cast {
    font-size: 1.3rem;
    transform: translateY(50%);
    opacity: 0;
}
.casting article.active .casting__cast {
    transform: translateY(0);
    opacity: 1;
    transition: 1s 2s;
}
.casting__line {
    opacity: 0;
}
.casting article.active .casting__line {
    opacity: 1;
    transition: 2s;
}
.casting__text {
    width: 420px;
    line-height: 2rem;
    transform: translateY(-20%);
    opacity: 0;
}
.casting article.active .casting__text {
    transform: translateY(0);
    opacity: 1;
    transition: 1s 3s;
}
.casting__Sequence1 {
    transform: translateX(-30vw) translateY(-20vh)
}
.casting__Sequence2 {
    transform: translateX(-25vw) translateY(0)
}
.casting__Sequence3 {
    transform: translateX(20vw) translateY(5vh)
}
.casting__Sequence4 {
    transform: translateX(-30vw) translateY(-10vh)
}
.casting__Sequence5 {
    transform: translateX(15vw) translateY(-30vh)
}
.casting__Sequence6 {
    transform: translateX(-10vw) translateY(0)
}
.casting__Sequence7 {
    transform: translateX(-30vw) translateY(5vh);
}

/* Trailer */
.trailer {
    display: flex;
    justify-content: center;
    align-items: center;
}
.trailer::before {
    background-image: url("../img/Trailer_00.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    content: "";
    width: 100vw;
    height: 100vh;
    filter: blur(10px);
    position: absolute;
    left: 0;
    top: 0;
    opacity: .5;
    z-index: -1;
}
.trailer__control {
    width: 80%;
    display: flex;
    justify-content: space-between;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.trailer__control i {
    font-size: 2rem;
    opacity: 0.3;
    transition: opacity 1s, transform 1s;
}
.trailer__control i:hover {
    cursor: pointer;
    transform: scale(1.2);
    opacity: 1;
}
.trailer__prev {
    visibility: hidden;
}
.trailer__videos {
    width: 60vw;
    height: 50vh;
    position: relative;
    margin: 0 6%;
}
.trailer__video {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    text-align: center;
    opacity: 0;
    transition: 1s;
    visibility: hidden;
    transform: scale(.95);
}
.trailer__video.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}
.trailer__video_title {
    width: max-content;
    position: absolute;
    left: 50%;
    top: -15%;
    transform: translateX(-50%);
    font-size: 2rem;
    letter-spacing: .18rem;
}
.trailer__video iframe {
    width: 60vw;
    height: 50vh;
    border: 0;
}

/* Ost */
.ost {
    display: flex;
    justify-content: center;
    align-items: center;
}
.ost::before {
    background-image: url("../img/Ost_00.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    content: "";
    width: 100vw;
    height: 100vh;
    filter: blur(3px);
    position: absolute;
    left: 0;
    top: 0;
    opacity: .5;
    z-index: -1;
}
.ost__lists {
    display: flex;
    justify-content: center;
    align-items: center;
}
.ost__list {
    text-align: center;
}
.ost__list:nth-of-type(2) {
    margin: 0 12vw;
}
.ost__control {
    width: 241px;
    height: 241px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #fff;
    border-radius: 100%;
    position: relative;
}
.ost__control1 {
    background-image: url("../img/Ost_01.png");
}
.ost__control2 {
    background-image: url("../img/Ost_02.png");
}
.ost__control3 {
    background-image: url("../img/Ost_03.png");
}
.ost__control::after {
    content: "";
    width: 100%;
    height: 100%;
    border: 1px solid #fff;
    border-radius: 100%;
    z-index: -1;
    opacity: .7;
}
.ost__control.active::after {
    animation: bounce 1.5s infinite;
}
.ost__control i {
    font-size: 1.8rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    transition: .5s;
}
.ost__control i:hover {
    cursor: pointer;
}
.ost__stop {
    visibility: hidden;
    opacity: 0;
}
.ost__play.active {
    transform: translateX(-200%) translateY(-50%);
}
.ost__stop.active {
    transform: translateX(100%) translateY(-50%);
    visibility: visible;
    opacity: 1;
}
.ost__title,
.ost__play_time {
    font-size: 1.2rem;
    margin-top : 8%;
}
.ost__play_time {
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: 0.15rem;
}
.ost__time {
    font-size: 1.2rem;
}
.ost__length_time{
    display: flex;
    justify-content: center;
    align-items: center;
}
.ost__length_time::before {
    content: "";
    width: 40px;
    height: 1px;
    background: #fff;
    margin: 0 10px;
}
.ost__music {
    display: none;
}
.ost__slide {
    display: none;
}


/* Gallery */
.gallery__photos {
    width: 75%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    transition: 1s;
}
.gallery__photos img {
    width: 25%;
    cursor: pointer;
    opacity: .5;
    transition: .5s;
}
.gallery__photos img:hover {
    opacity: 1;
}
.gallery__view {
    width: 75%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: .5s;
}
.gallery__view.active {
    opacity: 1;
    visibility: visible;
}
.gallery__slide {
    width: 40px;
    position: absolute;
    left: 50%;
    bottom: 20%;
    animation: sideSlide 1s infinite ease-in-out;
    display: none;
    visibility: hidden;
    opacity: 0;
    transition: 1s;
}
.gallery__slide.active {
    visibility: visible;
    opacity: 1;
}


/* footer */
footer {
    position: fixed;
    right: 2%;
    bottom: 2%;
    opacity: 0;
    z-index: 9999;
    transition: 1s;
}
footer.active {
    opacity: 1;
}
.footer__music_player {
    position: fixed;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    display: flex;
    align-items: center;
    justify-self: center;
    cursor: pointer;
    opacity: 0;
    transition: 2s;
}
.footer__music_player.active {
    opacity: 1;
    transform: translateX(-50%) translateY(-50%);
}
.footer__music_icon {
    font-size: 1.5rem;
}
.footer__music_title {
    font-size: 1.2rem;
    padding-left: 10px;
}
.footer__sns a {
    opacity: .7;
    margin-left: 30px;
    transition: .5s;
}
.footer__sns a:first-of-type {
    margin-left: 0;
}
.footer__sns a:hover {
    opacity: 1;
}


/* loading_images */
.loading_images {
    display: none;
}


/* line */
.line {
    margin: 1.5% 0;
}
.line span {
    width: 270px;
    height: 2px;
    background: #fff;
}
.line img  {
    margin: 0 10px;
}


/* keyframes */
@keyframes loading {
    50%{
        opacity: 0;
    }
    100%{
        opacity: .8;
    }
}
@keyframes flash{
    50% {
        opacity: .8;
    }
    100% {
        opacity: .3;
    }
}
@keyframes bounce {
    100% {
        opacity: 0;
        visibility: hidden;
        transform: scale(1.5);
    }
}
@keyframes sideSlide {
    0% {
        transform: translate(-70%);
    }
    50% {
        transform: translate(-30%);
    }
    100% {
        transform: translate(-70%);
    }
}





/************************** width 1400px이하 **************************/





@media (max-width: 1400px) {
    /* start */
    .load_image {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%) scale(.9);
        opacity: .8;
        z-index: 9999;
        visibility: visible;
        animation: loading 2s infinite;
    }
    .load_image.active {
        visibility: hidden;
        opacity: 0;
        transform: translateX(-50%) translateY(-50%) scale(0);
    }


    /* header */
    header {
        width: 150px;
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: fixed;
        justify-content: space-between;
        opacity: 0;
        transition: 1s;
        visibility: hidden;
    }
    header.active {
        opacity: 1;
        z-index: 9999;
        visibility: visible;
    }
    .header__logo {
        position: absolute;
        left: 50%;
        top: 50px;
        transform: translateX(-50%);
    }
    .header__menu_button {
        position: absolute;
        left: 0;    
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        transition: 1s;
        z-index: 9999;
        opacity: .3;
    }
    .header__menu_button.flash {
        animation: flash 1s infinite;
    }
    .header__menu_button.active {
        transform: translateX(-80%) translateY(-50%);
    }
    .header__menu_button:hover {
        opacity: 1;
    }
    .header__pc_menus {
        width: 100%;
        position: absolute;
        top: 50%;
        transform: translateX(-105%) translateY(-50%);
        transition: 1s;
    }
    .header__pc_menus.active {
        transform: translateX(0) translateY(-50%);
    }
    .header__pc_menus li {
        width: 100%;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 0.1rem;
        line-height: 8rem;
        opacity: .7;
        position: relative;
    }
    .header__pc_menus li:last-of-type {margin-bottom: 0;}
    .header__pc_menus li::before {
        content: url(../img/호버시.png);
        position: absolute;
        left: 0;
        top: 1rem;
        transform: translateY(-0.5rem);
        z-index: -1;
        opacity: 0;
    }
    .header__pc_menus li:hover {
        cursor: pointer;
        opacity: 1;
    }
    .header__pc_menus li:hover::before {
        opacity: 1;
        transition: .5s;
    }
    .header__mobile {
        display: none;
    }


    /* section */
    section {
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        opacity: 0;
        position: absolute;
        transition: 1s;
        visibility: hidden;
    }
    section.active {
        opacity: 1;
        visibility: visible;
    }
    section h2 {
        font-size: 1.875rem;
        font-weight: 700;
        border-bottom: 1px solid #fff;
        position: absolute;
        right: 6%;
        top: 6%;
        opacity: 1;
    }
    section:nth-of-type(n).active {
        opacity: 1;
    }

    /* Home */
    .home {   
        background-image: url("../img/Home.jpg");
        text-align: center;
        text-transform: uppercase;
        transition: 1s;
        opacity: 0;
    }
    .home h2 {
        display: none;
    }
    .home__director {
        letter-spacing: 0.6rem;
        opacity: 0;
        transition: 1s;
        margin-top: 2%;
    }
    .home__director.active {
        opacity: 1;
    }
    .home__director div {
        position: relative;
        overflow: hidden;
        width: 100%;
        margin: 0 auto;
    }
    .home__director_title {
        padding: 2rem 0;
    }
    .home__director_title span {
        font-size: 0.9375rem;
        line-height: 4rem;
        position: absolute;
        left: 50%;
        top: 0%;
        transform: translateX(-50%) translateY(100%);
        transition: 1s;
    }
    .home__director_title span.active {
        transform: translateX(-50%) translateY(0);
    }
    .home__director_line {
        width: 48px;
        height: 1px;
        background: #fff;
        display: block;
        margin: 0 auto;
    }
    .home__director_name {
        padding: 2rem 0;
    }
    .home__director_name span {
        font-size: 1.125rem;
        line-height: 4rem;
        position: absolute;
        left: 50%;
        top: 0%;
        transform: translateX(-50%) translateY(-100%);
        transition: 1s 1s;
    }
    .home__director_name span.active {
        transform: translateX(-50%) translateY(0);
    }
    .home__title {
        font-size: 5rem;
        font-weight: 900;
        letter-spacing: 5rem;
        margin: 56vh 0 0 0;
        opacity: 0;
        transition: opacity 1s, letter-spacing 1s;
    }
    .home__title.active {
        opacity: 1;
        letter-spacing: 1.5rem;
    }

    /* Synopsis */
    .synopsis {
        background-image: url("../img/Synopsis_00.jpg");
        text-align: center;
        display: flex;
        flex-direction: column-reverse;
        opacity: 0;
        transition: 1s;
    }
    .synopsis__chapters {
        position: absolute;
        left: 0;
        bottom: 5%;
        opacity: 0;
        transition: 1s;
        visibility: hidden;
    }
    .synopsis__chapters.active {
        visibility: visible;
        bottom: 0;
        opacity: 1;
    }
    .synopsis__chapters1 {
        margin: 0 0 12% 12%;
        text-align: start;
    }
    .synopsis__chapters2 {
        text-align: center;
        margin: 0 0 12% 0;
    }
    .synopsis__chapters3 {
        text-align: end;
        margin: 0 12% 12% 0;
    }
    .synopsis__chapters h3 {
        font-size: 2.5rem;
        font-weight: 700;
    }
    .synopsis__chapters2__lines span {
        width: 135px;
    }
    .synopsis__chapters__text {
        width: 70%;
        line-height: 2rem;
    }
    .synopsis__chapter2__text {
        text-align: center;
        margin: 0 auto;
    }
    .synopsis__chapter3__text {
        display: inline-block;
    }
    .synopsis__indicators {
        display: flex;
        justify-content: center;
        margin-bottom: 5%;
    }
    .synopsis__indicators li {
        width: 25px;
        height: 25px;
        border-radius: 100%;
        background: #fff;
        margin: 0 30px;
        opacity: .5;
        transition: .5s;
    }
    .synopsis__indicators li.active {
        background: #f00;
    }
    .synopsis__indicators li:hover {
        cursor: pointer;
        opacity: 1;
    }

    /* Casting */
    .casting {
        background-image: url("../img/Casting_00.jpg");
    }

    .casting__control {
        display: flex;
        margin: 16% 0 0 16%;
        align-items: center;
    }
    .casting__trigger i {
        font-size: 2rem;
        opacity: .5;
        transition: 1s;
    }
    .casting__trigger.active i {
        transform: rotateY(180deg);
        opacity: 1;
    }
    .casting__trigger i:hover {
        cursor: pointer;
        opacity: 1;
    }
    .casting__indicators {
        display: flex;
        overflow: hidden;
    }
    .casting__indicators img {
        transform: translateX(-1100%);
        margin-left: 30px;
        cursor: pointer;
        opacity: .5;
        transition: opacity .5s, transform 2.5s;
    }
    .casting__indicators.active img {
        transform: translateX(0);
    }
    .casting__indicators img:hover {
        opacity: 1;
    }
    .casting article {
        display: flex;
        flex-direction: column;
        position: absolute;
        left: 50%;
        top: 50%;
        visibility: hidden;
    }
    .casting article.active {
        visibility: visible;
        transition: 1s;
    }
    .casting article h3 {
        display: none;
    }
    .casting__name {
        font-size: 3.5rem;
        font-weight: 900;
        transform: translateY(100%);
        opacity: 0;
    }
    .casting article.active .casting__name {
        transform: translateY(0);
        opacity: 1;
        transition: 1s 1s;
    }
    .casting__cast {
        font-size: 1.3rem;
        transform: translateY(50%);
        opacity: 0;
    }
    .casting article.active .casting__cast {
        transform: translateY(0);
        opacity: 1;
        transition: 1s 2s;
    }
    .casting__line {
        opacity: 0;
    }
    .casting article.active .casting__line {
        opacity: 1;
        transition: 2s;
    }
    .casting__text {
        width: 420px;
        line-height: 2rem;
        transform: translateY(-20%);
        opacity: 0;
    }
    .casting article.active .casting__text {
        transform: translateY(0);
        opacity: 1;
        transition: 1s 3s;
    }
    .casting__Sequence1 {
        transform: translateX(-30vw) translateY(-20vh)
    }
    .casting__Sequence2 {
        transform: translateX(-25vw) translateY(0)
    }
    .casting__Sequence3 {
        transform: translateX(-10vw) translateY(5vh)
    }
    .casting__Sequence4 {
        transform: translateX(-30vw) translateY(-10vh)
    }
    .casting__Sequence5 {
        transform: translateX(-30vw) translateY(0vh)
    }
    .casting__Sequence6 {
        transform: translateX(-10vw) translateY(0)
    }
    .casting article:nth-of-type(7){
        transform: translateX(-30vw) translateY(5vh);
    }

    /* Trailer */
    .trailer {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .trailer::before {
        background-image: url("../img/Trailer_00.jpg");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        content: "";
        width: 100vw;
        height: 100vh;
        filter: blur(10px);
        position: absolute;
        left: 0;
        top: 0;
        opacity: .5;
        z-index: -1;
    }
    .trailer i {
        font-size: 2rem;
        opacity: 0.3;
        transition: opacity 1s, transform 1s;
    }
    .trailer i:hover {
        cursor: pointer;
        transform: scale(1.2);
        opacity: 1;
    }
    .trailer__videos {
        width: 60vw;
        height: 50vh;
        position: relative;
        margin: 0 6%;
    }
    .trailer__video {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        text-align: center;
        opacity: 0;
        transition: 1s;
        visibility: hidden;
        transform: scale(.95);
    }
    .trailer__video.active {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
    }
    .trailer__video_title {
        width: max-content;
        position: absolute;
        left: 50%;
        top: -15%;
        transform: translateX(-50%);
        font-size: 2rem;
        letter-spacing: .18rem;
    }
    .trailer__video iframe {
        width: 60vw;
        height: 50vh;
        border: 0;
    }

    /* Ost */
    .ost {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .ost::before {
        background-image: url("../img/Ost_00.jpg");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        content: "";
        width: 100vw;
        height: 100vh;
        filter: blur(3px);
        position: absolute;
        left: 0;
        top: 0;
        opacity: .5;
        z-index: -1;
    }
    .ost__lists {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .ost__list {
        text-align: center;
    }
    .ost__list:nth-of-type(2) {
        margin: 0 6vw;
    }
    .ost__control {
        width: 241px;
        height: 241px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 2px solid #fff;
        border-radius: 100%;
    }
    .ost__control1 {
        background-image: url("../img/Ost_01.png");
    }
    .ost__control2 {
        background-image: url("../img/Ost_02.png");
    }
    .ost__control3 {
        background-image: url("../img/Ost_03.png");
    }
    .ost__control {
        position: relative;
    }
    .ost__control::after {
        content: "";
        width: 100%;
        height: 100%;
        border: 1px solid #fff;
        border-radius: 100%;
        z-index: -1;
        opacity: .7;
    }
    .ost__control.active::after {
        animation: bounce 1.5s infinite;
    }
    .ost__control i {
        font-size: 1.8rem;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        transition: .5s;
    }
    .ost__control i:hover {
        cursor: pointer;
    }
    .ost__stop {
        visibility: hidden;
        opacity: 0;
    }
    .ost__play.active {
        transform: translateX(-200%) translateY(-50%);
    }
    .ost__stop.active {
        transform: translateX(100%) translateY(-50%);
        visibility: visible;
        opacity: 1;
    }
    .ost__title,
    .ost__play_time {
        font-size: 1.2rem;
        margin-top : 8%;
    }
    .ost__play_time {
        display: flex;
        justify-content: center;
        align-items: center;
        letter-spacing: 0.15rem;
    }
    .ost__time {
        font-size: 1.2rem;
    }
    .ost__length_time{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .ost__length_time::before {
        content: "";
        width: 40px;
        height: 1px;
        background: #fff;
        margin: 0 10px;
    }
    .ost__music {
        display: none;
    }
    .ost__slide {
        display: none;
    }

    /* Gallery */
    .gallery__photos {
        width: 75%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        transition: 1s;
    }
    .gallery__photos img {
        width: 25%;
        cursor: pointer;
        opacity: .5;
        transition: .5s;
    }
    .gallery__photos img:hover {
        opacity: 1;
    }
    .gallery__view {
        width: 75%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        transition: .5s;
    }
    .gallery__view.active {
        opacity: 1;
        visibility: visible;
    }
    .gallery__slide {
        width: 40px;
        position: absolute;
        left: 50%;
        bottom: 20%;
        animation: sideSlide 1s infinite ease-in-out;
        display: none;
        visibility: hidden;
        opacity: 0;
        transition: 1s;
    }
    .gallery__slide.active {
        visibility: visible;
        opacity: 1;
    }


    /* footer */
    footer {
        position: fixed;
        right: 2%;
        bottom: 2%;
        opacity: 0;
        z-index: 9999;
        transition: 1s;
    }
    footer.active {
        opacity: 1;
    }
    .footer__music_player {
        position: fixed;
        left: 50%;
        transform: translateX(-50%) translateY(100%);
        display: flex;
        align-items: center;
        justify-self: center;
        cursor: pointer;
        opacity: 0;
        transition: 2s;
    }
    .footer__music_player.active {
        opacity: 1;
        transform: translateX(-50%) translateY(-50%);
    }
    .footer__music_icon {
        font-size: 1.5rem;
    }
    .footer__music_title {
        font-size: 1.2rem;
        padding-left: 10px;
    }
    .footer__sns a {
        opacity: .7;
        margin-left: 30px;
        transition: .5s;
    }
    .footer__sns a:first-of-type {
        margin-left: 0;
    }
    .footer__sns a:hover {
        opacity: 1;
    }


    /* loading_images */
    .loading_images {
        display: none;
    }


    /* line */
    .line {
        margin: 1.5% 0;
    }
    .line span {
        width: 270px;
        height: 2px;
        background: #fff;
    }
    .line img  {
        margin: 0 10px;
    }


    /* keyframes */
    @keyframes loading {
        50%{
            opacity: 0;
        }
        100%{
            opacity: .8;
        }
    }
    @keyframes flash{
        50% {
            opacity: .8;
        }
        100% {
            opacity: .3;
        }
    }
    @keyframes bounce {
        100% {
            opacity: 0;
            visibility: hidden;
            transform: scale(1.5);
        }
    }
}





/************************** width 1200px이하 **************************/





@media (max-width: 1200px) {
    /* start */
    .load_image {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%) scale(.9);
        opacity: .8;
        z-index: 9999;
        visibility: visible;
        animation: loading 2s infinite;
    }
    .load_image.active {
        visibility: hidden;
        opacity: 0;
        transform: translateX(-50%) translateY(-50%) scale(0);
    }


    /* header */
    header {
        width: 0;
        height: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        position: fixed;
        justify-content: space-between;
        opacity: 0;
        transition: 1s;
        visibility: hidden;
    }
    header.active {
        opacity: 1;
        z-index: 9999;
        visibility: visible;
    }
    .header__logo {
        position: absolute;
        left: 50%;
        top: 50px;
        transform: translateX(-50%);
        display: none;
    }
    .header__menu_button {
        position: absolute;
        left: 0;    
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        transition: 1s;
        z-index: 9999;
        opacity: .3;
        display: none;
    }
    .header__menu_button.flash {
        animation: flash 1s infinite;
    }
    .header__menu_button.active {
        transform: translateX(-80%) translateY(-50%);
    }
    .header__menu_button:hover {
        opacity: 1;
    }
    .header__pc_menus {
        width: 100%;
        position: absolute;
        top: 50%;
        transform: translateX(-105%) translateY(-50%);
        transition: 1s;
        display: none;
    }
    .header__pc_menus.active {
        transform: translateX(0) translateY(-50%);
    }
    .header__pc_menus li {
        width: 100%;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 0.1rem;
        line-height: 8rem;
        opacity: .7;
        position: relative;
    }
    .header__pc_menus li:last-of-type {margin-bottom: 0;}
    .header__pc_menus li::before {
        content: url(../img/호버시.png);
        position: absolute;
        left: 0;
        top: 1rem;
        transform: translateY(-0.5rem);
        z-index: -1;
        opacity: 0;
    }
    .header__pc_menus li:hover {
        cursor: pointer;
        opacity: 1;
    }
    .header__pc_menus li:hover::before {
        opacity: 1;
        transition: .5s;
    }
    .header__mobile {
        display: block;
        margin: 0;
    }
    .header__mobile_button {
        width: 40px;
        height: 30px;
        margin: 20px 0 0 20px;
        position: relative;
        z-index: 2;
    }
    .header__mobile_button span {
        width: 100%;
        height: 4px;
        background: #fff;
        border-radius: 4px;
        display: inline-block;
        position: absolute;
        left: 0;
        transition: .5s;        
    }
    .header__mobile_button span:nth-of-type(1) {
        top: 0;
    }
    .header__mobile_button span:nth-of-type(2) {
        top: 50%;
        transform: translateY(-50%);
    }
    .header__mobile_button span:nth-of-type(3) {
        bottom: 0;
    }
    .header__mobile_button.active span:nth-of-type(1) {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) rotate(135deg);
    }
    .header__mobile_button.active span:nth-of-type(2) {
        opacity: 0;
        visibility: hidden;
    }
    .header__mobile_button.active span:nth-of-type(3) {
        left: 50%;
        bottom: 50%;
        transform: translate(-50%, 50%) rotate(-135deg);
    }
    .header__mobile_menus {
        width: 100vw;
        cursor: pointer;
        position: absolute;
        left: 0;
        top: 0;
        transform: translateY(-2%);
        visibility: hidden;
        opacity: 0;
        transition: 1s;
    }
    .header__mobile_menus.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    .header__mobile_menus li {
        width: 100%;
        background: #000;
        text-transform: uppercase;
        line-height: 16.666666vh;
        text-align: center;
    }


    /* section */
    section {
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        opacity: 0;
        position: absolute;
        transition: 1s;
        visibility: hidden;
    }
    section.active {
        opacity: 1;
        visibility: visible;
    }
    section h2 {
        font-size: 1.875rem;
        font-weight: 700;
        border-bottom: 1px solid #fff;
        position: absolute;
        right: 6%;
        top: 6%;
        opacity: 1;
    }
    section:nth-of-type(n).active {
        opacity: 1;
    }

    /* Home */
    .home {
        background-image: url("../img/Home.jpg");
        text-align: center;
        text-transform: uppercase;
        transition: 1s;
        opacity: 0;
    }
    .home h2 {
        display: none;
    }
    .home__director {
        letter-spacing: 0.6rem;
        opacity: 0;
        transition: 1s;
        margin-top: 2%;
    }
    .home__director.active {
        opacity: 1;
    }
    .home__director div {
        position: relative;
        overflow: hidden;
        width: 100%;
        margin: 0 auto;
    }
    .home__director_title {
        padding: 2rem 0;
    }
    .home__director_title span {
        font-size: 0.9375rem;
        line-height: 4rem;
        position: absolute;
        left: 50%;
        top: 0%;
        transform: translateX(-50%) translateY(100%);
        transition: 1s;
    }
    .home__director_title span.active {
        transform: translateX(-50%) translateY(0);
    }
    .home__director_line {
        width: 48px;
        height: 1px;
        background: #fff;
        display: block;
        margin: 0 auto;
    }
    .home__director_name {
        padding: 2rem 0;
    }
    .home__director_name span {
        font-size: 1.125rem;
        line-height: 4rem;
        position: absolute;
        left: 50%;
        top: 0%;
        transform: translateX(-50%) translateY(-100%);
        transition: 1s 1s;
    }
    .home__director_name span.active {
        transform: translateX(-50%) translateY(0);
    }
    .home__title {
        font-size: 5rem;
        font-weight: 900;
        letter-spacing: 5rem;
        margin: 56vh 0 0 0;
        opacity: 0;
        transition: opacity 1s, letter-spacing 1s;
    }
    .home__title.active {
        opacity: 1;
        letter-spacing: 1.5rem;
    }

    /* Synopsis */
    .synopsis {
        background-image: url("../img/Synopsis_00.jpg");
        text-align: center;
        display: flex;
        flex-direction: column-reverse;
        opacity: 0;
        transition: 1s;
    }
    .synopsis__chapters {
        position: absolute;
        left: 0;
        bottom: 5%;
        opacity: 0;
        transition: 1s;
        visibility: hidden;
    }
    .synopsis__chapters.active {
        visibility: visible;
        bottom: 0;
        opacity: 1;
    }
    .synopsis__chapters1 {
        margin: 0 0 12% 12%;
        text-align: start;
    }
    .synopsis__chapters2 {
        text-align: center;
        margin: 0 0 12% 0;
    }
    .synopsis__chapters3 {
        text-align: end;
        margin: 0 12% 12% 0;
    }
    .synopsis__chapters h3 {
        font-size: 2.5rem;
        font-weight: 700;
    }
    .synopsis__chapters2__lines span {
        width: 135px;
    }
    .synopsis__chapters__text {
        width: 70%;
        line-height: 2rem;
    }
    .synopsis__chapter2__text {
        text-align: center;
        margin: 0 auto;
    }
    .synopsis__chapter3__text {
        display: inline-block;
    }
    .synopsis__indicators {
        display: flex;
        justify-content: center;
        margin-bottom: 5%;
    }
    .synopsis__indicators li {
        width: 25px;
        height: 25px;
        border-radius: 100%;
        background: #fff;
        margin: 0 30px;
        opacity: .5;
        transition: .5s;
    }
    .synopsis__indicators li.active {
        background: #f00;
    }
    .synopsis__indicators li:hover {
        cursor: pointer;
        opacity: 1;
    }

    /* Casting */
    .casting {
        background-image: url("../img/Casting_00.jpg");
    }

    .casting__control {
        display: flex;
        margin: 16% 0 0 16%;
        align-items: center;
    }
    .casting__trigger i {
        font-size: 2rem;
        opacity: .5;
        transition: 1s;
    }
    .casting__trigger.active i {
        transform: rotateY(180deg);
        opacity: 1;
    }
    .casting__trigger i:hover {
        cursor: pointer;
        opacity: 1;
    }
    .casting__indicators {
        display: flex;
        overflow: hidden;
    }
    .casting__indicators img {
        transform: translateX(-1100%);
        margin-left: 30px;
        cursor: pointer;
        opacity: .5;
        transition: opacity .5s, transform 2.5s;
    }
    .casting__indicators.active img {
        transform: translateX(0);
    }
    .casting__indicators img:hover {
        opacity: 1;
    }
    .casting article {
        display: flex;
        flex-direction: column;
        position: absolute;
        left: 50%;
        top: 50%;
        visibility: hidden;
    }
    .casting article.active {
        visibility: visible;
        transition: 1s;
    }
    .casting article h3 {
        display: none;
    }
    .casting__name {
        font-size: 3.5rem;
        font-weight: 900;
        transform: translateY(100%);
        opacity: 0;
    }
    .casting article.active .casting__name {
        transform: translateY(0);
        opacity: 1;
        transition: 1s 1s;
    }
    .casting__cast {
        font-size: 1.3rem;
        transform: translateY(50%);
        opacity: 0;
    }
    .casting article.active .casting__cast {
        transform: translateY(0);
        opacity: 1;
        transition: 1s 2s;
    }
    .casting__line {
        opacity: 0;
    }
    .casting article.active .casting__line {
        opacity: 1;
        transition: 2s;
    }
    .casting__text {
        width: 420px;
        line-height: 2rem;
        transform: translateY(-20%);
        opacity: 0;
    }
    .casting article.active .casting__text {
        transform: translateY(0);
        opacity: 1;
        transition: 1s 3s;
    }
    .casting__Sequence1 {
        transform: translateX(-30vw) translateY(-20vh)
    }
    .casting__Sequence2 {
        transform: translateX(-25vw) translateY(0)
    }
    .casting__Sequence3 {
        transform: translateX(-10vw) translateY(5vh)
    }
    .casting__Sequence4 {
        transform: translateX(-30vw) translateY(-10vh)
    }
    .casting__Sequence5 {
        transform: translateX(-30vw) translateY(0vh)
    }
    .casting__Sequence6 {
        transform: translateX(-10vw) translateY(0)
    }
    .casting article:nth-of-type(7){
        transform: translateX(-30vw) translateY(5vh);
    }

    /* Trailer */
    .trailer {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .trailer::before {
        background-image: url("../img/Trailer_00.jpg");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        content: "";
        width: 100vw;
        height: 100vh;
        filter: blur(10px);
        position: absolute;
        left: 0;
        top: 0;
        opacity: .5;
        z-index: -1;
    }
    .trailer i {
        font-size: 2rem;
        opacity: 0.3;
        transition: opacity 1s, transform 1s;
    }
    .trailer i:hover {
        cursor: pointer;
        transform: scale(1.2);
        opacity: 1;
    }
    .trailer__videos {
        width: 60vw;
        height: 50vh;
        position: relative;
        margin: 0 6%;
    }
    .trailer__video {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        text-align: center;
        opacity: 0;
        transition: 1s;
        visibility: hidden;
        transform: scale(.95);
    }
    .trailer__video.active {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
    }
    .trailer__video_title {
        width: max-content;
        position: absolute;
        left: 50%;
        top: -15%;
        transform: translateX(-50%);
        font-size: 2rem;
        letter-spacing: .18rem;
    }
    .trailer__video iframe {
        width: 60vw;
        height: 50vh;
        border: 0;
    }

    /* Ost */
    .ost {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .ost::before {
        background-image: url("../img/Ost_00.jpg");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        content: "";
        width: 100vw;
        height: 100vh;
        filter: blur(3px);
        position: absolute;
        left: 0;
        top: 0;
        opacity: .5;
        z-index: -1;
    }
    .ost__lists {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .ost__list {
        text-align: center;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        visibility: hidden;
        transition: .5s;
    }
    .ost__list.active {
        opacity: 1;
        visibility: visible;
    }
    .ost__list:nth-of-type(2) {
        margin: 0;
    }
    .ost__control {
        width: 241px;
        height: 241px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 2px solid #fff;
        border-radius: 100%;
    }
    .ost__control1 {
        background-image: url("../img/Ost_01.png");
    }
    .ost__control2 {
        background-image: url("../img/Ost_02.png");
    }
    .ost__control3 {
        background-image: url("../img/Ost_03.png");
    }
    .ost__control {
        position: relative;
    }
    .ost__control::after {
        content: "";
        width: 100%;
        height: 100%;
        border: 1px solid #fff;
        border-radius: 100%;
        z-index: -1;
        opacity: .7;
    }
    .ost__control.active::after {
        animation: bounce 1.5s infinite;
    }
    .ost__control i {
        font-size: 1.8rem;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        transition: .5s;
    }
    .ost__control i:hover {
        cursor: pointer;
    }
    .ost__stop {
        visibility: hidden;
        opacity: 0;
    }
    .ost__play.active {
        transform: translateX(-200%) translateY(-50%);
    }
    .ost__stop.active {
        transform: translateX(100%) translateY(-50%);
        visibility: visible;
        opacity: 1;
    }
    .ost__title,
    .ost__play_time {
        font-size: 1.2rem;
        margin-top : 8%;
    }
    .ost__play_time {
        display: flex;
        justify-content: center;
        align-items: center;
        letter-spacing: 0.15rem;
    }
    .ost__time {
        font-size: 1.2rem;
    }
    .ost__length_time{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .ost__length_time::before {
        content: "";
        width: 40px;
        height: 1px;
        background: #fff;
        margin: 0 10px;
    }
    .ost__music {
        display: none;
    }
    .ost__slide {
        width: 40px;
        position: absolute;
        left: 50%;
        bottom: 20%;
        animation: sideSlide 1s infinite ease-in-out;
        visibility: hidden;
        opacity: 0;
        transition: 1s;
        display: block;
    }
    .ost__slide.active {
        visibility: visible;
        opacity: 1;
    }

    /* Gallery */
    .gallery__photos {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        transition: 1s;
    }
    .gallery__photos img {
        width: 25%;
        cursor: pointer;
        opacity: .5;
        transition: .5s;
    }
    .gallery__photos img:hover {
        opacity: 1;
    }
    .gallery__view {
        width: 100%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        transition: .5s;
    }
    .gallery__view.active {
        opacity: 1;
        visibility: visible;
    }
    .gallery__slide {
        width: 40px;
        position: absolute;
        left: 50%;
        bottom: 20%;
        animation: sideSlide 1s infinite ease-in-out;
        display: block;
        visibility: hidden;
        opacity: 0;
        transition: 1s;
    }
    .gallery__slide.active {
        visibility: visible;
        opacity: 1;
    }


    /* footer */
    footer {
        position: fixed;
        right: 2%;
        bottom: 2%;
        opacity: 0;
        z-index: 9999;
        transition: 1s;
    }
    footer.active {
        opacity: 1;
    }
    .footer__music_player {
        position: fixed;
        left: 50%;
        transform: translateX(-50%) translateY(100%);
        display: flex;
        align-items: center;
        justify-self: center;
        cursor: pointer;
        opacity: 0;
        transition: 2s;
    }
    .footer__music_player.active {
        opacity: 1;
        transform: translateX(-50%) translateY(-50%);
    }
    .footer__music_icon {
        font-size: 1.5rem;
    }
    .footer__music_title {
        font-size: 1.2rem;
        padding-left: 10px;
    }
    .footer__sns a {
        opacity: .7;
        margin-left: 30px;
        transition: .5s;
    }
    .footer__sns a:first-of-type {
        margin-left: 0;
    }
    .footer__sns a:hover {
        opacity: 1;
    }


    /* loading_images */
    .loading_images {
        display: none;
    }


    /* line */
    .line {
        margin: 1.5% 0;
    }
    .line span {
        width: 270px;
        height: 2px;
        background: #fff;
    }
    .line img  {
        margin: 0 10px;
    }


    /* keyframes */
    @keyframes loading {
        50%{
            opacity: 0;
        }
        100%{
            opacity: .8;
        }
    }
    @keyframes flash{
        50% {
            opacity: .8;
        }
        100% {
            opacity: .3;
        }
    }
    @keyframes bounce {
        100% {
            opacity: 0;
            visibility: hidden;
            transform: scale(1.5);
        }
    }
}





/************************** width 800px이하 **************************/





@media (max-width: 800px) {
    /* start */
    .load_image {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%) scale(.9);
        opacity: .8;
        z-index: 9999;
        visibility: visible;
        animation: loading 2s infinite;
    }
    .load_image.active {
        visibility: hidden;
        opacity: 0;
        transform: translateX(-50%) translateY(-50%) scale(0);
    }


    /* header */
    header {
        width: 0;
        height: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        position: fixed;
        justify-content: space-between;
        opacity: 0;
        transition: 1s;
        visibility: hidden;
    }
    header.active {
        opacity: 1;
        z-index: 9999;
        visibility: visible;
    }
    .header__logo {
        position: absolute;
        left: 50%;
        top: 50px;
        transform: translateX(-50%);
        display: none;
    }
    .header__menu_button {
        position: absolute;
        left: 0;    
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        transition: 1s;
        z-index: 9999;
        opacity: .3;
        display: none;
    }
    .header__menu_button.flash {
        animation: flash 1s infinite;
    }
    .header__menu_button.active {
        transform: translateX(-80%) translateY(-50%);
    }
    .header__menu_button:hover {
        opacity: 1;
    }
    .header__pc_menus {
        width: 100%;
        position: absolute;
        top: 50%;
        transform: translateX(-105%) translateY(-50%);
        transition: 1s;
        display: none;
    }
    .header__pc_menus.active {
        transform: translateX(0) translateY(-50%);
    }
    .header__pc_menus li {
        width: 100%;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 0.1rem;
        line-height: 8rem;
        opacity: .7;
        position: relative;
    }
    .header__pc_menus li:last-of-type {margin-bottom: 0;}
    .header__pc_menus li::before {
        content: url(../img/호버시.png);
        position: absolute;
        left: 0;
        top: 1rem;
        transform: translateY(-0.5rem);
        z-index: -1;
        opacity: 0;
    }
    .header__pc_menus li:hover {
        cursor: pointer;
        opacity: 1;
    }
    .header__pc_menus li:hover::before {
        opacity: 1;
        transition: .5s;
    }
    .header__mobile {
        display: block;
        margin: 0;
    }
    .header__mobile_button {
        width: 40px;
        height: 30px;
        margin: 20px 0 0 20px;
        position: relative;
        z-index: 2;
    }
    .header__mobile_button span {
        width: 100%;
        height: 4px;
        background: #fff;
        border-radius: 4px;
        display: inline-block;
        position: absolute;
        left: 0;
        transition: .5s;
    }
    .header__mobile_button span:nth-of-type(1) {
        top: 0;
    }
    .header__mobile_button span:nth-of-type(2) {
        top: 50%;
        transform: translateY(-50%);
    }
    .header__mobile_button span:nth-of-type(3) {
        bottom: 0;
    }
    .header__mobile_button.active span:nth-of-type(1) {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) rotate(135deg);
    }
    .header__mobile_button.active span:nth-of-type(2) {
        opacity: 0;
        visibility: hidden;
    }
    .header__mobile_button.active span:nth-of-type(3) {
        left: 50%;
        bottom: 50%;
        transform: translate(-50%, 50%) rotate(-135deg);
    }
    .header__mobile_menus {
        width: 100vw;
        cursor: pointer;
        position: absolute;
        left: 0;
        top: 0;
        transform: translateY(-2%);
        visibility: hidden;
        opacity: 0;
        transition: 1s;
    }
    .header__mobile_menus.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    .header__mobile_menus li {
        width: 100%;
        background: #000;
        text-transform: uppercase;
        line-height: 16.666666vh;
        text-align: center;
    }


    /* section */
    section {
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        opacity: 0;
        position: absolute;
        transition: 1s;
        visibility: hidden;
    }
    section.active {
        opacity: 1;
        visibility: visible;
    }

    section h2 {
        font-size: 1.875rem;
        font-weight: 700;
        border-bottom: 1px solid #fff;
        position: absolute;
        right: 6%;
        top: 6%;
        opacity: 1;
    }
    section:nth-of-type(n).active {
        opacity: 1;
    }

    /* Home */
    .home {   
        background-image: url("../img/Home.jpg");
        text-align: center;
        text-transform: uppercase;
        transition: 1s;
        opacity: 0;
    }
    .home h2 {
        display: none;
    }
    .home__director {
        letter-spacing: 0.1rem;
        opacity: 0;
        transition: 1s;
        margin-top: 2%;
    }
    .home__director.active {
        opacity: 1;
    }
    .home__director div {
        position: relative;
        overflow: hidden;
        width: 100%;
        margin: 0 auto;
    }
    .home__director_title {
        padding: 2rem 0;
    }
    .home__director_title span {
        font-size: 0.9375rem;
        line-height: 4rem;
        position: absolute;
        left: 50%;
        top: 0%;
        transform: translateX(-50%) translateY(100%);
        transition: 1s;
    }
    .home__director_title span.active {
        transform: translateX(-50%) translateY(0);
    }
    .home__director_line {
        width: 48px;
        height: 1px;
        background: #fff;
        display: block;
        margin: 0 auto;
    }
    .home__director_name {
        padding: 2rem 0;
    }
    .home__director_name span {
        font-size: 1.125rem;
        line-height: 4rem;
        position: absolute;
        left: 50%;
        top: 0%;
        transform: translateX(-50%) translateY(-100%);
        transition: 1s 1s;
    }
    .home__director_name span.active {
        transform: translateX(-50%) translateY(0);
    }
    .home__title {
        font-size: 5rem;
        font-weight: 900;
        letter-spacing: 5rem;
        margin: 56vh 0 0 0;
        opacity: 0;
        transition: opacity 1s, letter-spacing 1s;
    }
    .home__title.active {
        opacity: 1;
        letter-spacing: 1.5rem;
    }

    /* Synopsis */
    .synopsis {
        background-image: url("../img/Synopsis_00.jpg");
        text-align: center;
        display: flex;
        flex-direction: column-reverse;
        opacity: 0;
        transition: 1s;
    }
    .synopsis__chapters {
        position: absolute;
        left: 0;
        bottom: 5%;
        opacity: 0;
        transition: 1s;
        visibility: hidden;
    }
    .synopsis__chapters.active {
        visibility: visible;
        bottom: 0;
        opacity: 1;
    }
    .synopsis__chapters1 {
        margin: 0 0 12% 12%;
        text-align: start;
    }
    .synopsis__chapters2 {
        text-align: center;
        margin: 0 0 12% 0;
    }
    .synopsis__chapters3 {
        text-align: end;
        margin: 0 12% 12% 0;
    }
    .synopsis__chapters h3 {
        font-size: 2.5rem;
        font-weight: 700;
    }
    .synopsis__chapters2__lines span {
        width: 135px;
    }
    .synopsis__chapters__text {
        width: 70%;
        line-height: 2rem;
    }
    .synopsis__chapter2__text {
        text-align: center;
        margin: 0 auto;
    }
    .synopsis__chapter3__text {
        display: inline-block;
    }
    .synopsis__indicators {
        display: flex;
        justify-content: center;
        margin-bottom: 5%;
    }
    .synopsis__indicators li {
        width: 25px;
        height: 25px;
        border-radius: 100%;
        background: #fff;
        margin: 0 30px;
        opacity: .5;
        transition: .5s;
    }
    .synopsis__indicators li.active {
        background: #f00;
    }
    .synopsis__indicators li:hover {
        cursor: pointer;
        opacity: 1;
    }

    /* Casting */
    .casting {
        background-image: url("../img/Casting_00.jpg");
    }

    .casting__control {
        display: flex;
        margin: 20% 0 0 0;
        align-items: center;
    }
    .casting__trigger i {
        font-size: 2rem;
        opacity: .5;
        transition: 1s;
        display: none;
    }
    .casting__trigger.active i {
        transform: rotateY(180deg);
        opacity: 1;
    }
    .casting__trigger i:hover {
        cursor: pointer;
        opacity: 1;
    }
    .casting__indicators {
        width: 100%;
        display: flex;
        justify-content: space-between;
        overflow: hidden;
    }
    .casting__indicators img {
        transform: translateX(-1100%);
        margin-left: 0;
        cursor: pointer;
        opacity: .5;
        transition: opacity .5s, transform 2.5s;
    }
    .casting__indicators.active img {
        transform: translateX(0);
    }
    .casting__indicators img:hover {
        opacity: 1;
    }
    .casting article {
        display: flex;
        flex-direction: column;
        position: absolute;
        left: 50%;
        top: 50%;
        visibility: hidden;
    }
    .casting article.active {
        visibility: visible;
        transition: 1s;
    }
    .casting article h3 {
        display: none;
    }
    .casting__name {
        font-size: 3.5rem;
        font-weight: 900;
        transform: translateY(100%);
        opacity: 0;
    }
    .casting article.active .casting__name {
        transform: translateY(0);
        opacity: 1;
        transition: 1s 1s;
    }
    .casting__cast {
        font-size: 1.3rem;
        transform: translateY(50%);
        opacity: 0;
    }
    .casting article.active .casting__cast {
        transform: translateY(0);
        opacity: 1;
        transition: 1s 2s;
    }
    .casting__line {
        opacity: 0;
    }
    .casting article.active .casting__line {
        opacity: 1;
        transition: 2s;
    }
    .casting__text {
        width: 420px;
        line-height: 2rem;
        transform: translateY(-20%);
        opacity: 0;
    }
    .casting article.active .casting__text {
        transform: translateY(0);
        opacity: 1;
        transition: 1s 3s;
    }
    .casting__Sequence1 {
        transform: translateX(-40vw) translateY(0)
    }
    .casting__Sequence2 {
        transform: translateX(-40vw) translateY(0)
    }
    .casting__Sequence3 {
        transform: translateX(-40vw) translateY(0)
    }
    .casting__Sequence4 {
        transform: translateX(-40vw) translateY(0)
    }
    .casting__Sequence5 {
        transform: translateX(-40vw) translateY(0)
    }
    .casting__Sequence6 {
        transform: translateX(-40vw) translateY(0)
    }
    .casting article:nth-of-type(7){
        transform: translateX(-40vw) translateY(0)
    }

    /* Trailer */
    .trailer {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .trailer::before {
        background-image: url("../img/Trailer_00.jpg");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        content: "";
        width: 100vw;
        height: 100vh;
        filter: blur(10px);
        position: absolute;
        left: 0;
        top: 0;
        opacity: .5;
        z-index: -1;
    }
    .trailer i {
        font-size: 2rem;
        opacity: 0.3;
        transition: opacity 1s, transform 1s;
    }
    .trailer i:hover {
        cursor: pointer;
        transform: scale(1.2);
        opacity: 1;
    }
    .trailer__videos {
        width: 60vw;
        height: 50vh;
        position: relative;
        margin: 0 6%;
    }
    .trailer__video {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        text-align: center;
        opacity: 0;
        transition: 1s;
        visibility: hidden;
        transform: scale(.95);
    }
    .trailer__video.active {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
    }
    .trailer__video_title {
        width: max-content;
        position: absolute;
        left: 50%;
        top: -15%;
        transform: translateX(-50%);
        font-size: 1.375rem;
        letter-spacing: .18rem;
    }
    .trailer__video iframe {
        width: 60vw;
        height: 50vh;
        border: 0;
    }

    /* Ost */
    .ost {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .ost::before {
        background-image: url("../img/Ost_00.jpg");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        content: "";
        width: 100vw;
        height: 100vh;
        filter: blur(3px);
        position: absolute;
        left: 0;
        top: 0;
        opacity: .5;
        z-index: -1;
    }
    .ost__lists {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .ost__list {
        text-align: center;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        visibility: hidden;
        transition: .5s;
    }
    .ost__list.active {
        opacity: 1;
        visibility: visible;
    }
    .ost__list:nth-of-type(2) {
        margin: 0;
    }
    .ost__control {
        width: 241px;
        height: 241px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 2px solid #fff;
        border-radius: 100%;
    }
    .ost__control1 {
        background-image: url("../img/Ost_01.png");
    }
    .ost__control2 {
        background-image: url("../img/Ost_02.png");
    }
    .ost__control3 {
        background-image: url("../img/Ost_03.png");
    }
    .ost__control {
        position: relative;
    }
    .ost__control::after {
        content: "";
        width: 100%;
        height: 100%;
        border: 1px solid #fff;
        border-radius: 100%;
        z-index: -1;
        opacity: .7;
    }
    .ost__control.active::after {
        animation: bounce 1.5s infinite;
    }
    .ost__control i {
        font-size: 1.8rem;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        transition: .5s;
    }
    .ost__control i:hover {
        cursor: pointer;
    }
    .ost__stop {
        visibility: hidden;
        opacity: 0;
    }
    .ost__play.active {
        transform: translateX(-200%) translateY(-50%);
    }
    .ost__stop.active {
        transform: translateX(100%) translateY(-50%);
        visibility: visible;
        opacity: 1;
    }
    .ost__title,
    .ost__play_time {
        font-size: 1.2rem;
        margin-top : 8%;
    }
    .ost__play_time {
        display: flex;
        justify-content: center;
        align-items: center;
        letter-spacing: 0.15rem;
    }
    .ost__time {
        font-size: 1.2rem;
    }
    .ost__length_time{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .ost__length_time::before {
        content: "";
        width: 40px;
        height: 1px;
        background: #fff;
        margin: 0 10px;
    }
    .ost__music {
        display: none;
    }

    /* Gallery */
    .gallery__photos {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        transition: 1s;
    }
    .gallery__photos img {
        width: 33.333333%;
        cursor: pointer;
        opacity: .5;
        transition: .5s;
    }
    .gallery__photos img:hover {
        opacity: 1;
    }
    .gallery__view {
        width: 100%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        transition: .5s;
    }
    .gallery__view.active {
        opacity: 1;
        visibility: visible;
    }
    .gallery__slide {
        width: 40px;
        position: absolute;
        left: 50%;
        bottom: 20%;
        animation: sideSlide 1s infinite ease-in-out;
        display: block;
        visibility: hidden;
        opacity: 0;
        transition: 1s;
    }
    .gallery__slide.active {
        visibility: visible;
        opacity: 1;
    }


    /* footer */
    footer {
        position: fixed;
        right: 2%;
        bottom: 2%;
        opacity: 0;
        z-index: 9999;
        transition: 1s;
    }
    footer.active {
        opacity: 1;
    }
    .footer__music_player {
        position: fixed;
        left: 50%;
        transform: translateX(-50%) translateY(100%);
        display: flex;
        align-items: center;
        justify-self: center;
        cursor: pointer;
        opacity: 0;
        transition: 2s;
    }
    .footer__music_player.active {
        opacity: 1;
        transform: translateX(-50%) translateY(-50%);
    }
    .footer__music_icon {
        font-size: 1.5rem;
    }
    .footer__music_title {
        font-size: 1.2rem;
        padding-left: 10px;
    }
    .footer__sns a {
        opacity: .7;
        margin-left: 30px;
        transition: .5s;
    }
    .footer__sns a:first-of-type {
        margin-left: 0;
    }
    .footer__sns a:hover {
        opacity: 1;
    }


    /* loading_images */
    .loading_images {
        display: none;
    }


    /* line */
    .line {
        margin: 1.5% 0;
    }
    .line span {
        width: 270px;
        height: 2px;
        background: #fff;
    }
    .line img  {
        margin: 0 10px;
    }


    /* keyframes */
    @keyframes loading {
        50%{
            opacity: 0;
        }
        100%{
            opacity: .8;
        }
    }
    @keyframes flash{
        50% {
            opacity: .8;
        }
        100% {
            opacity: .3;
        }
    }
    @keyframes bounce {
        100% {
            opacity: 0;
            visibility: hidden;
            transform: scale(1.5);
        }
    }
}





/************************** width 600px이하 **************************/





@media (max-width: 600px) {
    /* start */
    .load_image {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%) scale(.9);
        opacity: .8;
        z-index: 9999;
        visibility: visible;
        animation: loading 2s infinite;
    }
    .load_image.active {
        visibility: hidden;
        opacity: 0;
        transform: translateX(-50%) translateY(-50%) scale(0);
    }


    /* header */
    header {
        width: 0;
        height: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        position: fixed;
        justify-content: space-between;
        opacity: 0;
        transition: 1s;
        visibility: hidden;
    }
    header.active {
        opacity: 1;
        z-index: 9999;
        visibility: visible;
    }
    .header__logo {
        position: absolute;
        left: 50%;
        top: 50px;
        transform: translateX(-50%);
        display: none;
    }
    .header__menu_button {
        position: absolute;
        left: 0;    
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        transition: 1s;
        z-index: 9999;
        opacity: .3;
        display: none;
    }
    .header__menu_button.flash {
        animation: flash 1s infinite;
    }
    .header__menu_button.active {
        transform: translateX(-80%) translateY(-50%);
    }
    .header__menu_button:hover {
        opacity: 1;
    }
    .header__pc_menus {
        width: 100%;
        position: absolute;
        top: 50%;
        transform: translateX(-105%) translateY(-50%);
        transition: 1s;
        display: none;
    }
    .header__pc_menus.active {
        transform: translateX(0) translateY(-50%);
    }
    .header__pc_menus li {
        width: 100%;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 0.1rem;
        line-height: 8rem;
        opacity: .7;
        position: relative;
    }
    .header__pc_menus li:last-of-type {margin-bottom: 0;}
    .header__pc_menus li::before {
        content: url(../img/호버시.png);
        position: absolute;
        left: 0;
        top: 1rem;
        transform: translateY(-0.5rem);
        z-index: -1;
        opacity: 0;
    }
    .header__pc_menus li:hover {
        cursor: pointer;
        opacity: 1;
    }
    .header__pc_menus li:hover::before {
        opacity: 1;
        transition: .5s;
    }
    .header__mobile {
        width: 100%;
        height: 100%;
        display: block;
        margin: 0;
    }
    .header__mobile_button {
        width: 40px;
        height: 30px;
        margin: 20px 0 0 20px;
        position: relative;
        z-index: 2;
    }
    .header__mobile_button span {
        width: 100%;
        height: 4px;
        background: #fff;
        border-radius: 4px;
        display: inline-block;
        position: absolute;
        left: 0;
        transition: .5s;
    }
    .header__mobile_button span:nth-of-type(1) {
        top: 0;
    }
    .header__mobile_button span:nth-of-type(2) {
        top: 50%;
        transform: translateY(-50%);
    }
    .header__mobile_button span:nth-of-type(3) {
        bottom: 0;
    }
    .header__mobile_button.active span:nth-of-type(1) {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) rotate(135deg);
    }
    .header__mobile_button.active span:nth-of-type(2) {
        opacity: 0;
        visibility: hidden;
    }
    .header__mobile_button.active span:nth-of-type(3) {
        left: 50%;
        bottom: 50%;
        transform: translate(-50%, 50%) rotate(-135deg);
    }
    .header__mobile_menus {
        width: 100vw;
        cursor: pointer;
        position: absolute;
        left: 0;
        top: 0;
        transform: translateY(-2%);
        visibility: hidden;
        opacity: 0;
        transition: 1s;
    }
    .header__mobile_menus.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    .header__mobile_menus li {
        width: 100%;
        background: #000;
        text-transform: uppercase;
        line-height: 16.666666vh;
        text-align: center;
    }


    /* section */
    section {
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        opacity: 0;
        position: absolute;
        transition: 1s;
        visibility: hidden;
        overflow: hidden;
    }
    section.active {
        opacity: 1;
        visibility: visible;
    }

    section h2 {
        font-size: 1.875rem;
        font-weight: 700;
        border-bottom: 1px solid #fff;
        position: absolute;
        right: 3%;
        top: 2%;
        opacity: 1;
    }
    section:nth-of-type(n).active {
        opacity: 1;
    }

    /* Home */
    .home {   
        background-image: url("../img/Home.jpg");
        text-align: center;
        text-transform: uppercase;
        transition: 1s;
        opacity: 0;
    }
    .home h2 {
        display: none;
    }
    .home__director {
        letter-spacing: 0.1rem;
        opacity: 0;
        transition: 1s;
        margin-top: 2%;
    }
    .home__director.active {
        opacity: 1;
    }
    .home__director div {
        position: relative;
        overflow: hidden;
        width: 100%;
        margin: 0 auto;
    }
    .home__director_title {
        padding: 2rem 0;
    }
    .home__director_title span {
        font-size: 0.9375rem;
        line-height: 4rem;
        position: absolute;
        left: 50%;
        top: 0%;
        transform: translateX(-50%) translateY(100%);
        transition: 1s;
    }
    .home__director_title span.active {
        transform: translateX(-50%) translateY(0);
    }
    .home__director_line {
        width: 48px;
        height: 1px;
        background: #fff;
        display: block;
        margin: 0 auto;
    }
    .home__director_name {
        padding: 2rem 0;
    }
    .home__director_name span {
        width: 100%;
        font-size: 1rem;
        line-height: 4rem;
        position: absolute;
        left: 50%;
        top: 0%;
        transform: translateX(-50%) translateY(-100%);
        transition: 1s 1s;
    }
    .home__director_name span.active {
        transform: translateX(-50%) translateY(0);
    }
    .home__title {
        font-size: 3rem;
        font-weight: 900;
        letter-spacing: 1rem;
        margin: 50vh 0 0 0;
        opacity: 0;
        transition: opacity 1s, letter-spacing 1s;
    }
    .home__title.active {
        opacity: 1;
        letter-spacing: 1rem;
    }

    /* Synopsis */
    .synopsis {
        background-image: url("../img/Synopsis_00.jpg");
        text-align: center;
        display: flex;
        flex-direction: column-reverse;
        opacity: 0;
        transition: 1s;
    }
    .synopsis__chapters {
        position: absolute;
        left: 0;
        bottom: 5%;
        opacity: 0;
        transition: 1s;
        visibility: hidden;
    }
    .synopsis__chapters.active {
        visibility: visible;
        bottom: 0;
        opacity: 1;
    }
    .synopsis__chapters1 {
        margin: 0 0 20% 12%;
        text-align: start;
    }
    .synopsis__chapters2 {
        text-align: center;
        margin: 0 0 20% 0;
    }
    .synopsis__chapters3 {
        text-align: end;
        margin: 0 12% 20% 0;
    }
    .synopsis__chapters h3 {
        font-size: 2.5rem;
        font-weight: 700;
    }
    .synopsis__chapters2__lines span {
        width: 270px;
    }
    .synopsis__chapters2__lines span:last-of-type {
        display: none;
    }
    .synopsis__chapters__text {
        width: 90%;
        line-height: 1.5rem;
    }
    .synopsis__chapter2__text {
        text-align: center;
        margin: 0 auto;
    }
    .synopsis__chapter3__text {
        display: inline-block;
    }
    .synopsis__indicators {
        display: flex;
        justify-content: center;
        margin-bottom: 5%;
    }
    .synopsis__indicators li {
        width: 25px;
        height: 25px;
        border-radius: 100%;
        background: #fff;
        margin: 0 30px;
        opacity: .5;
        transition: .5s;
    }
    .synopsis__indicators li.active {
        background: #f00;
    }
    .synopsis__indicators li:hover {
        cursor: pointer;
        opacity: 1;
    }

    /* Casting */
    .casting {
        background-image: url("../img/Casting_00.jpg");
    }

    .casting__control {
        width: 55%;
        display: flex;
        margin: 25% auto 0;
        align-items: center;
    }
    .casting__trigger i {
        font-size: 2rem;
        opacity: .5;
        transition: 1s;
        display: none;
    }
    .casting__trigger.active i {
        transform: rotateY(180deg);
        opacity: 1;
    }
    .casting__trigger i:hover {
        cursor: pointer;
        opacity: 1;
    }
    .casting__indicators {
        width: 100%;
        display: flex;
        justify-content: space-between;
        overflow: scroll;
    }
    .casting__indicators::-webkit-scrollbar {
        display: none;
    }
    .casting__indicators img {
        transform: translateX(-1100%);
        margin-left: 0;
        cursor: pointer;
        opacity: 1;
        transition: opacity .5s, transform 2.5s;
    }
    .casting__indicators.active img {
        transform: translateX(0) scale(.7);
    }
    .casting__indicators img:hover {
        opacity: 1;
    }
    .casting article {
        display: flex;
        flex-direction: column;
        position: absolute;
        left: 50%;
        top: 50%;
        visibility: hidden;
    }
    .casting article.active {
        visibility: visible;
        transition: 1s;
    }
    .casting article h3 {
        display: none;
    }
    .casting__name {
        font-size: 2.5rem;
        font-weight: 900;
        transform: translateY(100%);
        opacity: 0;
    }
    .casting article.active .casting__name {
        transform: translateY(0);
        opacity: 1;
        transition: 1s 1s;
    }
    .casting__cast {
        font-size: 1rem;
        transform: translateY(50%);
        opacity: 0;
    }
    .casting article.active .casting__cast {
        transform: translateY(0);
        opacity: 1;
        transition: 1s 2s;
    }
    .casting__line {
        opacity: 0;
    }
    .casting article.active .casting__line {
        opacity: 1;
        transition: 2s;
    }
    .casting__text {
        width: 320px;
        line-height: 2rem;
        transform: translateY(-20%);
        opacity: 0;
    }
    .casting article.active .casting__text {        
        transform: translateY(0);
        opacity: 1;
        transition: 1s 3s;
    }
    .casting__Sequence1 {
        transform: translateX(-40vw) translateY(-10vh)
    }
    .casting__Sequence2 {
        transform: translateX(-40vw) translateY(-10vh)
    }
    .casting__Sequence3 {
        transform: translateX(-40vw) translateY(-10vh)
    }
    .casting__Sequence4 {
        transform: translateX(-40vw) translateY(-10vh)
    }
    .casting__Sequence5 {
        transform: translateX(-40vw) translateY(-10vh)
    }
    .casting__Sequence6 {
        transform: translateX(-40vw) translateY(-10vh)
    }
    .casting article:nth-of-type(7){
        transform: translateX(-40vw) translateY(-10vh)
    }

    /* Trailer */
    .trailer {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .trailer::before {
        background-image: url("../img/Trailer_00.jpg");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        content: "";
        width: 100%;
        height: 100%;
        filter: blur(10px);
        position: absolute;
        left: 0;
        top: 0;
        opacity: .5;
        z-index: -1;
    }
    .trailer i {
        font-size: 2rem;
        opacity: 1;
        transition: opacity 1s, transform 1s;
    }
    .trailer i:hover {
        cursor: pointer;
        transform: scale(1);
        opacity: 1;
    }
    .trailer__videos {
        width: 60vw;
        height: 50vh;
        position: relative;
        margin: 0 6%;
    }
    .trailer__video {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        text-align: center;
        opacity: 0;
        transition: 1s;
        visibility: hidden;
        transform: scale(.95);
    }
    .trailer__video.active {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
    }
    .trailer__video_title {
        width: max-content;
        position: absolute;
        left: 50%;
        top: -15%;
        transform: translateX(-50%);
        font-size: 1.125rem;
        letter-spacing: .1rem;
    }
    .trailer__video iframe {
        width: 60vw;
        height: 50vh;
        border: 0;
    }

    /* Ost */
    .ost {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .ost::before {
        background-image: url("../img/Ost_00.jpg");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        content: "";
        width: 100%;
        height: 100%;
        filter: blur(3px);
        position: absolute;
        left: 0;
        top: 0;
        opacity: .5;
        z-index: -1;
    }
    .ost__lists {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .ost__list {
        text-align: center;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        visibility: hidden;
        transition: .5s;
    }
    .ost__list.active {
        opacity: 1;
        visibility: visible;
    }
    .ost__list:nth-of-type(2) {
        margin: 0;
    }
    .ost__control {
        width: 241px;
        height: 241px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 2px solid #fff;
        border-radius: 100%;
    }
    .ost__control1 {
        background-image: url("../img/Ost_01.png");
    }
    .ost__control2 {
        background-image: url("../img/Ost_02.png");
    }
    .ost__control3 {
        background-image: url("../img/Ost_03.png");
    }
    .ost__control {
        position: relative;
    }
    .ost__control::after {
        content: "";
        width: 100%;
        height: 100%;
        border: 1px solid #fff;
        border-radius: 100%;
        z-index: -1;
        opacity: .7;
    }
    .ost__control.active::after {
        animation: bounce 1.5s infinite;
    }
    .ost__control i {
        font-size: 1.8rem;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        transition: .5s;
    }
    .ost__control i:hover {
        cursor: pointer;
    }
    .ost__stop {
        visibility: hidden;
        opacity: 0;
    }
    .ost__play.active {
        transform: translateX(-200%) translateY(-50%);
    }
    .ost__stop.active {
        transform: translateX(100%) translateY(-50%);
        visibility: visible;
        opacity: 1;
    }
    .ost__title,
    .ost__play_time {
        font-size: 1.2rem;
        margin-top : 8%;
    }
    .ost__play_time {
        display: flex;
        justify-content: center;
        align-items: center;
        letter-spacing: 0.15rem;
    }
    .ost__time {
        font-size: 1.2rem;
    }
    .ost__length_time{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .ost__length_time::before {
        content: "";
        width: 40px;
        height: 1px;
        background: #fff;
        margin: 0 10px;
    }
    .ost__music {
        display: none;
    }

    /* Gallery */
    .gallery__photos {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        transition: 1s;
        overflow: scroll;
    }
    .gallery__photos img {
        width: 70%;
        cursor: pointer;
        opacity: .8;
        transition: .5s;
    }
    .gallery__photos img:hover {
        opacity: 1;
    }
    .gallery__view {
        width: 100%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        transition: .5s;
    }
    .gallery__view.active {
        opacity: 1;
        visibility: visible;
    }
    .gallery__slide {
        width: 40px;
        position: absolute;
        left: 50%;
        bottom: 20%;
        animation: sideSlide 1s infinite ease-in-out;
        display: block;
        visibility: hidden;
        opacity: 0;
        transition: 1s;
    }
    .gallery__slide.active {
        visibility: visible;
        opacity: 1;
    }


    /* footer */
    footer {
        position: fixed;
        right: 2%;
        bottom: 2%;
        opacity: 0;
        z-index: 9999;
        transition: 1s;
    }
    footer.active {
        opacity: 1;
    }
    .footer__music_player {
        width: 100%;
        position: fixed;
        left: 50%;
        transform: translateX(-48%) translateY(100%);
        display: flex;
        align-items: center;
        justify-self: center;
        cursor: pointer;
        opacity: 0;
        transition: 2s;
    }
    .footer__music_player.active {
        opacity: 1;
        transform: translateX(-48%) translateY(-70%);
    }
    .footer__music_icon {
        font-size: 1.5rem;
    }
    .footer__music_title {
        font-size: 1.2rem;
        padding-left: 10px;
    }
    .footer__sns {
        display: none;
    }
    .footer__sns a {
        opacity: .7;
        margin-left: 30px;
        transition: .5s;
    }
    .footer__sns a:first-of-type {
        margin-left: 0;
    }
    .footer__sns a:hover {
        opacity: 1;
    }


    /* loading_images */
    .loading_images {
        display: none;
    }


    /* line */
    .line {
        margin: 1.5% 0;
    }
    .line span {
        width: 270px;
        height: 2px;
        background: #fff;
    }
    .line img  {
        margin: 0 10px;
        display: none;
    }


    /* keyframes */
    @keyframes loading {
        50%{
            opacity: 0;
        }
        100%{
            opacity: .8;
        }
    }
    @keyframes flash{
        50% {
            opacity: .8;
        }
        100% {
            opacity: .3;
        }
    }
    @keyframes bounce {
        100% {
            opacity: 0;
            visibility: hidden;
            transform: scale(1.5);
        }
    }
}