@charset "utf-8";

@media screen and (width < 767px){
    /*MAIN SECTION*/
    #main_section .full_inner{
        display: none;
    }
    .full_inner-middle{
        z-index:2;
        width:100%;
        height:100vh;
    }
    #main-big{
        display: none;
    }
    #main_section{
        position: relative;
    }
    #img_box-middle{
        position: absolute;
        bottom:0;
        width: 100%;
        height: 100%;
        background-image: url('../img/main/howl_background.png');
        background-repeat: no-repeat;
        background-size: cover;
        animation: howl_background_move 200s alternate infinite;
    }

    #img_box-middle #howl-middle{
        width: 100%;
        position: absolute;
        top:50%;
        animation: howl_move 2s alternate infinite;
    }
    #studioGhibli_write-middle{
        position: absolute;
        left:50%;
        transform:translateX(-50%);
        width:  80%;
        z-index: 1;
        bottom:15%;
    }

    .inner-middle{
        position: relative;
        top:100%;
        width: 100%;
        height: 100%;
    }

    #change_img_text-middle{
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%, -50%);
        text-align: center;
        font-size: 5em;
        font-weight: 800;
        transition: all 0.6s;
    }
    
    .colorChange{
        animation:  text-color-change 1s;
        animation-fill-mode: both;
    }

    @keyframes text-color-change{
        to{
            font-size: 7em;
            color:#00B6FF;
        }
    }

    @keyframes howl_move {
        to {
            transform: translate(0, -50%);
        }

        from {
            transform: translate(5px, -50%);
        }
    }

    @keyframes howl_background_move {
        to {
            background-position: 0%;
        }

        from {
            background-position: 50%;
        }
    }


    /*Introduce Ghibli*/
    #introduce_ghibli{
        margin-top: 100vh;
    }

    #introduce_ghibli .inner {
        height: 700px;
    }

    #introduce_ghibli .inner img {
        width: 60%;
        position: absolute;
        top: 25%;
        left: 20%;
    }

    #introduce_ghibli .inner .arrow_down {
        position: absolute;
        bottom: 150px;
        left: 50%;
    }

    /*About Ghibli*/
    #about_ghibli {
        background-color: rgba(0, 182, 255, 0.1);
        width: 100%;
        padding-top:10%;
        padding-bottom:10%;
    }

    #about_ghibli .inner {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #about_ghibli .inner #about_ghibli_article_align {
        width: 100%;
        height: 80%;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        gap:40px;
    }

    #about_ghibli .inner #about_ghibli_article_align .article_content {
        width: 100%;
    }

    #about_ghibli .inner #about_ghibli_article_align #about_ghibli_korean_name {
        font-size: 10em;
        font-weight: 800;
        padding-top: 20px;
        font-family: 'Nanum Gothic', sans-serif;
    }

    #about_ghibli .inner #about_ghibli_article_align #about_ghibli_english_name {
        font-size: 7em;
        font-weight: 800;
        padding-top: 4px;
        font-family: 'Nanum Gothic', sans-serif;
    }

    #about_ghibli .inner #about_ghibli_article_align #about_ghibli_article1,
    #about_ghibli .inner #about_ghibli_article_align #about_ghibli_article2 {
        width: 80%;
        background-color: #ffffff;
        border-radius: 20px;
        padding: 50px 50px;

    }

    #about_ghibli .inner #about_ghibli_article_align #about_ghibli_article2 ul {
        padding-left: 4%;
    }

    #about_ghibli .inner #about_ghibli_article_align #about_ghibli_article2 ul li {
        list-style-type: disc;
    }

    #about_ghibli .inner #about_ghibli_article_align #about_ghibli_article3 {
        width: 80%;
        background-color: #ffffff;
        border-radius: 20px;
        padding: 70px 50px;
    }


    /*Ghibli Animation*/

    #ghibli_animation .inner {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-evenly;
        overflow: hidden;
        width: 80%;
        padding-bottom: 100px;
    }

    #ghibli_animation .inner .article_category,
    #ghibli_animation .inner .arrow_down {
        width: 100%;
    }

    #ghibli_animation .inner #article_area {
        display: none;
    }

    .article_background{
        margin-top:15%;
        width: 100%;
        height: 33vw;
        background-size: cover;
        background-repeat: no-repeat;
        border-radius: 20px;
        position: relative;
    }

    #article_area-middle .article_element{
        width: 80%;
        position: absolute;
        bottom:0;
        left:10%;
    }

    #article_area-middle .article_title{
        margin-top:100px;
    }

    #ghibli_animation_article1-middle .article_title{
        margin-top:0px;
    }
    #ghibli_animation_article1-middle .article_background{
        background-image: url('../img/main/aniamtion_SpiritedAway_Background1.png');
    }
    #ghibli_animation_article1-middle .article_element{
        animation: rightToLeft 5s infinite alternate;
    }
    #ghibli_animation_article2-middle .article_background{
        background-image: url('../img/main/animation_howl_Background.jpg');
        background-position: 0px;
        animation: rightToLeftBackground 3s infinite alternate;
    }
    #ghibli_animation_article2-middle .article_element{
        animation: rightToLeft 3s infinite alternate;
    }
    #ghibli_animation_article3-middle .article_background{
        background-image: url('../img/main/aniamtion_totoro_Background1.png');
        background-size: 150%;
        background-position: center bottom;
    }

    #ghibli_animation_article3-middle .article_element:nth-of-type(1){
        width: 20%;
        bottom:10%;
        left:0%;
        animation: bottomToTop 2s infinite alternate;
    }
    #ghibli_animation_article3-middle .article_element:nth-of-type(2){
        width: 40%;
        right:0%;
        left:60%;
        bottom:20%;
        animation: bottomToTop 2s -1s infinite alternate;
    }

    #ghibli_animation_article4-middle .article_background{
        background-image: url('../img/main/aniamtion_mononoke_Background.png');
    }
#ghibli_animation_article4-middle .article_element{
    width:60%;
    left:20%;
    animation: rightToLeft 3s infinite alternate;
}

@keyframes rightToLeft {
    to{
        transform: translateX(-10px);
    }
}


@keyframes bottomToTop {
    to{
        transform: translateY(-20px);
    }
}


/*ghibli_others*/
#ghibli_others .inner{
     width: 100%;
}
#ghibli_others .article_category{
    padding-top:50px;
}

#ghibli_others .inner .flip-line{
    display: none;
}
#ghibli_others .inner .flip-line {
    width: 100%;
    height: 3000px;
    padding-bottom: 500px;
    position: relative;
}

.others-flip-all .others-flip-align {
    display: flex;
    flex-direction: column;
    column-gap: 50px;
    align-items: center;
    width: 100%;
    margin-bottom:100px;
}

.flip-line-middle{
    display: flex;
    justify-content: center;
}
.others-flip-all .others-flip-align .flip-content {
    width: 80%;
}

.others-flip-all .others-flip {
    margin-top:30px;
    width: 80%;
    perspective: 1000px;
    order:1;
}

.others-flip-all .others-flip:hover {
    cursor: pointer;
}

.others-flip-all .flip-inner {
    position: relative;
    width: 100%;
    height: 33vw;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}
.others-flip:nth-child(2n){
    display: none;
}

.others-flip-all .flip-inner img {
    display: none;
}

.flip-line-middle .others-flip .flip-front{
    background-image: url('../img/main/ghibli_musical_1.jpg');
    background-size: cover;
    background-position: 50% 15%;
}

.flip-line-middle .others-flip #flip-img-2{
    background-image: url('../img/main/ghibli_movie_1-2.jpg');
    background-size: cover;
    background-position: 50% 15%;
}

.others-flip-all .flip-inner .flip-front,
.others-flip-all .flip-inner .flip-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
    border-radius: 20px;
}

.others-flip-all .flip-inner .flip-back {
    transform: rotateY(180deg);
}

.flip-line-middle .flip-content .article_content{
    width: 100%;
}


    /*ghibli_world*/
    #ghibli_world .full_inner#ghibli_world_background {
        margin-top: 50px;
        background-image: url('../img/main/ghibli_world.jpg');
        background-position: right center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 550px;
        display: flex;
    }

    #ghibli_world .full_inner#ghibli_world_background .inner svg {
        margin: 0 auto;
    }

    #ghibli_world .full_inner#ghibli_world_background .inner h3 {
        margin-top: 0px;
        padding-top: 150px;
        padding-bottom: 150px;
        color: #FFFFFF;
    }


    #ghibli_world .inner_article {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap:100px;
        padding-top:150px;
    }
    
    .ghibli_world_tour h3{
        display: flex;
        
        align-items: center;
        gap:10px;
    }

    .ghibli_world_tour:nth-child(1) {
        width: 80%;

    }

    .ghibli_world_tour:nth-child(2) {
        width: 80%;

    }

    .ghibli_world_tour button {
        margin: 16px auto 32px;
    }

    .ghibli_world_tour .ghibli_world_tour_img_1 {
        width: 100%;
        height: 33vw;
        background: url('../img/main/ghibli_world_tour_1.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        border-radius: 20px;
    }

    .ghibli_world_tour .ghibli_world_tour_img_2 {
        width: 100%;
        height: 33vw;
        background: url('../img/main/ghibli_world_tour_2.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        border-radius: 20px;
    }

    /*ghibli_notice*/

    #ghibli_notice{
        position: relative;
        width: 100%;
    }
    #ghibli_notice .inner {
        overflow: hidden;
        width: 100%;
    }

    #notice_article_align{
        width: 80%;
        margin:0 auto;
    }
    #ghibli_notice svg {
        margin-bottom: 200px;
    }

    .notice{
        width: 100%;
        padding: 0px 3%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        
    }
    .notice br{
        display: none;
    }
    .notice_poster{
        width:50%;
    }
    .notice_poster img{
        width: 100%;
    }

    .notice_right .article_title,
    .notice_right .article_content,
    .notice_right .button_big{
        display:none;
    }
    .notice_right .article_title_big{
        font-size: 7em;
        font-family: 'NanumSquare', sans-serif;
        font-weight: 800;
        line-height:130%;
        text-align: center;
    }
    #notice_article{
        display: flex;
        width: 300%;
    }
    
    .ghibli_notice_background{
        position: absolute;
        bottom:-4%;
        z-index: -1;
        width: 100%;
        background-color: rgba(0, 182, 255, 0.1);
        height: 45%;
    }

    .slide_button{
        display: flex;
        gap:50px;
        justify-content: center;
        margin-top:20px;
    }
    #prev,
    #next{
        width: 36px;
        height: 36px;
        border-radius: 36px;
        outline: none;
        border: none;
        background-color: #fff;
        transition: all 0.3s;
        border: 2px solid #fff;
    }

    #prev span{
        margin-left:8px;
    }

    #prev:hover,
    #next:hover {
        border: 2px solid #00B6FF;
        cursor: pointer;
    }
}