@charset "UTF-8";

@import url("../css/common.css");

/*==========
about
===========*/
.about{ margin-top: 5rem;}
.about-point{ max-width: 1000px; margin: 0 auto 4rem; display: flex; flex-wrap: wrap; justify-content: space-between; row-gap: 13px;}
.about-point-item{ min-height: 136px; display: flex; flex-basis: calc((100% - 48px)/4); flex-direction: column; justify-content: center; align-items: center; border-radius: var(--Radius-M); background: var(--Surface-Primary);}
.about-point-item a { width: 100%; height: 100%; padding: var(--Space-M);display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center;}
.about-point-item img{ width: min(24%, 42px); margin-bottom: 0.6rem;}
.about-point-item p{ width: 100%; color: var(--Color-White); font-family: var(--F-Sans); font-size: var(--Body-S);}

@media (max-width: 768px) {
    .about-point{ row-gap: 10px;}
    .about-point-item{ min-height: unset; height: 100px; flex-basis: calc((100% - 10px)/2);}
    .about-point-item img{ width: min(30%, 32px); margin-bottom: 0.2rem;}
    .about-point-item:nth-child(3),
    .about-point-item:nth-child(4){ width: min(30%, 20px);}
}
/*==========
movie
===========*/
.movie{ text-align: center; color: var(--Color-White); padding: 3rem 0 4rem;}
.movie.bg-img{ height: unset;}
.movie-tit{ margin: 0 0 2rem; font-size: var(--Heading-L);}
.movie-contents{ max-width: 600px; margin: 0 auto 2rem;}
.movie-contents img{ object-fit: cover;}
.movie-txt{ font-size: var(--Body-M);}
.movie-contents{ position: relative;}




/*==========
contents
===========*/
.contents-container{ margin-bottom: 6rem; display: flex; justify-content: space-between; align-items: center;}
.contents-txtBox{ width: 50%; text-align: center;}
.contents-head{ max-width: 420px; width: 70%; margin: 0 auto var(--Space-L);}
.content-tit{ font-size: calc(var(--Body-M) * 2); font-weight: 700; margin-bottom: var(--Space-L);}
.content-txt{ font-size: var(--Body-M);  margin-bottom: var(--Space-XL);}
.contents-img { width: 50%; max-width: 550px;}

.more-btn{ display: inline-block; color: var(--Color-Brand); font-family: var(--F-EB); font-size: var(--Body-L);}
.more-btn span { position: relative; z-index: -1;}
.more-btn span::after{ width: 160px; height: 25px; content: ''; background-image: url("../imgs/parts/view-more-arrow.svg"); background-repeat: no-repeat; background-size: contain; position: absolute; left: -1rem; bottom: -0.5rem; transition: 0.3s ease;}
.more-btn:hover span::after{ left: 0;}

@media (max-width: 768px) {
    .space-no{ padding: 0;}
    .contents-container{ align-items: unset; flex-direction: column-reverse; row-gap: var(--Space-M);}
    .contents-txtBox{ width: 98%; margin: 0 auto;}
    .content-tit { font-size: calc(var(--Body-M) * 1.5);}
    .contents-img{ width: 95%; margin-bottom: var(--Space-M);}
    .contents-container .contents-img{ margin: 0 0 var(--Space-M) auto;}
    .contents-container.reverse .contents-img{ margin-left: 0;}
    .more-btn span::after{ width: 120px; bottom: -1rem;}
}