body {background-color: #fff000;}

/* 배너 */
.banner {
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-top: 65px;
    box-sizing: border-box;
    overflow: hidden;
    /* float: left; */
}
.banner div {
    height: 100%;
    box-sizing: border-box;
}
.banner img {
    /* display: block; */
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.banner_pc, .banner_tablet {display: none;}

.banner picture {width: 100%;}


/* 모션배너 */
.motion_banner{
  width: 100%;
  height: var(--banner-h);
  overflow: hidden;
  position: relative;
}
.banner_box{
  position: absolute;      
  top: 0; left: 0;
  height: 100%;
  display: inline-flex;     
  will-change: transform;
  animation: banner 50s linear infinite;
}
.banner_box img{
  height: 100%;
  width: auto;
  display: block;
  flex-shrink: 0;
}

/* 한 세트 길이만큼 이동 → 정확히 이어짐 */
@keyframes banner{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* 모션 최소화 환경 배려(선택) */
@media (prefers-reduced-motion: reduce){
  .banner_box{ animation: none; }
}

:root { --banner-h: 38px; }
@media (min-width: 601px)  { :root { --banner-h: 50px; } }
@media (min-width: 1025px) { :root { --banner-h: 60px; } }


.wrap {
    width: calc(100% - 40px);
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 80px;
}
.title {
    font-size: 1.4rem;
    font-weight: bold;
    color: #008eff;
    text-align: center;
    margin-bottom: 20px;
}

.intro {
    margin-bottom: 60px;
}
.intro p {
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 150%;
    text-align: center;
}
.intro .light {
    font-weight: 400;
}

.about_layout {
    margin-bottom: 120px;
}
.layout {margin-bottom: 100px;}
.layout .img {
    width: 100%;
    /* overflow: hidden; */
}
.layout .img img {width: 100%;}
.about_text {
    margin: 40px 0;
    text-align: center;
}
.about_text h1 {
    font-size: 2.4rem;
    line-height: 140%;
    margin-bottom: 30px;
}
.about_text p {
    font-weight: 300;
    line-height: 160%;
}

/********** 전시 zone 소개 **********/
.route {margin-bottom: 120px;}
.zone {
    margin-bottom: 60px;
    text-align: center;
}
.zone .num {
    width: 38px; height: 38px;
    border-radius: 19px;
    background-color: #008eff;
    text-align: center;
    line-height: 38px;
    color: #fff;
    font-size: 1.4rem;
    margin: 0 auto;
    margin-bottom: 15px;
}
.zone h1 {
    font-size: 3rem;
    margin-bottom: 20px;
}
.zone .txt_box {
    width: 100%;
    background-color: #fff;
    border-radius: 20px;
}
.zone .txt_box:hover a p {
    cursor: url(./img/cursor_pointer01.png), pointer;
}
.zone .txt_box a {
    display: block;
    padding: 25px 20px;}
.zone .txt_box p {
    line-height: 180%;
}
.zone .txt_box .move {
    font-size: 1.4rem;
    color: #999;
    margin-top: 25px;
}
.zone .txt_box a:hover .move {
    color: #008eff;
    transition: color 0.3s ease;
}

/* 장소, 일정 이미지 */
.schedule_poster {
    width: 100%;
    margin-top: 30px;
}
.schedule_poster img {width: 100%;}
.schedule_list {
    margin-top: 30px;
}
.schedule_list li {
    margin-bottom: 20px;
    font-size: 1.8rem;
}
.schedule_list .icon {
    display: block;
    height: 30px;
    float: left;
    margin-right: 12px;
    color: #008eff;
}
.info {
    text-align: left;
}

.tablet_only {display: none;}
.pc_only {display: none;}
.pc_tablet_only {display: none;}

/************ media query_Tablet **************/
@media all and (min-width: 601px){
    .banner {margin-top: 70px;}
    .banner_pc, .banner_mobile {display: none;}
    .banner_tablet {display: block;}

    .wrap {
        width: calc(100% - 60px);
        margin-top: 100px;
    }
    .title {font-size: 1.8rem;}
    .intro {margin-bottom: 100px;}
    .intro p {
        font-size: 3.4rem;
    }
    .intro .point {
        font-size: 4rem;
    }
    .about_layout {margin-bottom: 180px;}
    .about_text {
        margin: 80px 0;
    }
    .about_text h1 {
        font-size: 3.4rem;
        line-height: 4.8rem;
    }
    .about_text p {
        font-size: 1.8rem;
        line-height: 3.2rem;
        margin-top: 40px;
    }
    .mobile_only {display: none;}
    .pc_only {display: none;}
    .tablet_only {display: block;}
    .pc_tablet_only {display: block;}

    .route {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }
    .txt_box {
        height: 196px;
        position: relative;
    }
    .zone {
        width: calc(50% - 10px);
    }
    .zone .txt_box a {
         padding: 30px 25px;
    }
    .move {
        position: absolute;
        left: 50%; bottom: 30px;            
        transform: translateX(-50%);
    }
    .schedule_poster {
    max-width: 500px;
    margin: 0 auto;
    margin-top: 30px;
    }
    .schedule_list {
        max-width: 500px;
        margin: 0 auto;
        margin-top: 30px;
    }
    
}






/************ media query_PC **************/
@media all and (min-width: 1025px) {
    /*배너 */
    .banner {
        height: 600px;
    }
    .banner_tablet, .banner_mobile {display: none;}
    .banner_pc {display: block;}

    .wrap {margin-top: 160px;}
    .about_layout {
        margin-top: 120px;
        margin-bottom: 180px;}
    .layout {
        display: flex;
        flex-wrap: nowrap;
        gap: 40px;
        margin-bottom: 120px;
    }
    .layout > div {
        width: calc(50% -10px);
        box-sizing: border-box;
        flex: 1;
    }
    .layout:nth-of-type(2) {
    flex-direction: row-reverse;
    }
    .about_text {
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: left;
    }
    .first {
        padding-left: 30px;
    }
    .about_text h1 {
        line-height: 140%;
        margin-bottom: 30px;
    }
    .about_text p {
        font-weight: 400;
        line-height: 180%;
        margin-top: 10px;
    }
     .route {
        display: flex;
        flex-wrap: nowrap;
        gap: 20px;
    }
    .zone .txt_box a:hover {
        color: #008eff;
        transition: 0.3s ease;
    }

    .mobile_only {display: none;}
    .tablet_only {display: none;}
    .pc_only {display: block;}
}

@media all and (min-width: 2000px) {
     .banner {
        height: 730px;
    }
    .banner img {height: 100%;}
}