/******************* tag 공통속성 *******************/
* {margin: 0; padding: 0; box-sizing: border-box;}
li {list-style: none;}
a {text-decoration: none; color: black;}
img {vertical-align: top;}
html {font-family: "IBM Plex Sans KR", sans-serif; font-size: 12px;}
/* fontSize : 1rem = 12px, 0.75rem = 16px, 2rem = 24px */

/******************* 선택자 공통속성 *******************/
.wrap {position: relative;}
.sub_title {
    font-size: 2rem; text-align: center;
    padding-top: 50px; color: #475775;
}
.more {text-align: right; color: #999; cursor: pointer;}
.pb{ padding-bottom: 30px;}
.btn_top {display: none;}
/* 현장공개, 유적 갤러리 */
.open, .ruins {
    width: 100%; padding: 0 16px; box-sizing: border-box;}
.open_header {
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin-bottom: 20px; box-sizing: border-box;
}

.open_header .sub_title {
    grid-column: 2; margin: 0; text-align: center;
}

.open_header .more {
    grid-column: 3; justify-self: end; align-self: end;
    color: #999; white-space: nowrap; padding-right: 20px;
    
}
/******************* main_visual *******************/
.slides {
        width: 100%; height: 100vh;
        max-width: 1900px; margin: 0 auto;
    }
    .slide-wrap {width: 100%; position: relative;}
    .slide {position: absolute; top: 0; left: 0; width: 100%;}
    .slide span {
        position: absolute; bottom: 0; right: 0;
        font-size: 2rem; background: rgba(0, 0, 0, 0.6); color: #fff;
        padding: 10px 25px;
    }
    .slide img {width: 100%; height: 100vh; object-fit: cover; }

/******************* progress *******************/
.progress {
    display: flex; justify-content: center; 
    width: 100%; padding-top: 20px; gap: 10px; margin: 20px 0;
}
.progress .progress_box {
    width: 25%;
    background-color: #6987D6;
    width: auto;
    flex: 1;
    min-width: 0;
}
.progress .progress_box .progress_img {
    margin: 0 auto; width: 60px; height: 60px;
}
.progress .progress_box .progress_img img {width: 100%;}
.progress .progress_box .progress_txt {
    text-align: center; color: white; padding: 5px 0;
}
.sub_tit {display: none;}

/* banner + metapo 공통 */
.banner_metapo {
    width: 100%; height: auto;
    display: grid;
    grid-template-columns: 1fr; gap: 10px;
    grid-template-areas:
        "banner"
        "metapo";
}

/* 배너 */
.banner {
    grid-area: banner;
    width: 100%;
    min-width: 0;
    aspect-ratio: 414 / 80;
    overflow: hidden;
}

.banner > a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.banner picture,
.banner picture img {
    display: block;
    width: 100%;
    height: 100%;
}

.banner picture img {
    object-fit: cover;
}

/* 배너 글자 */
.banner_txt {
    position: absolute;
    inset: 0;
    z-index: 1;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;

    padding: 6px 10px;
    color: #fff;
    text-align: right;
    background: rgba(0, 0, 0, 0.5);
}

.banner_txt p {
    max-width: 90%;
    font-size: 10px;
    line-height: 1.35;
}

.banner_txt strong {
    font-size: 10px;
    font-weight: 400;
}

/* 모바일 메뉴 4개 */
.metapo {
    grid-area: metapo;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;

    width: 100%;
    min-width: 0;
    margin: 0;
}

.metapo .metapo_box {
    width: auto;
    min-width: 0;
    height: 100px;

    border: 1px solid transparent;
    background-color: #475775;
}

.metapo .metapo_box > a {
    display: flex; flex-direction: column;
    align-items: center; justify-content: space-between;
    width: 100%; height: 100%;
    padding: 8px 4px;
}

.metapo_txt {
    width: 100%; color: #fff; text-align: center;
}

.metapo_name {font-size: 0.85rem; line-height: 1.3; word-break: keep-all;}
.metapo_more {display: none;}
.metapo_img {width: 52px; flex-shrink: 0;}
.metapo_img img {display: block; width: 100%; height: auto;}

/* 현장공개 */
.sheet {display: none;}
.sheet.on {display: block;}

.open .open_box {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.open .open_box .open_img_sheet {
    width: 100%;
    aspect-ratio: 53 / 35;
    margin: 0;
    overflow: hidden;
}
.open .open_box .open_img {
    display: grid; gap: 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    margin: 0;

}
.open .open_box .open_img .open_img_btn {
    width: auto; min-width: 0;
    aspect-ratio: 53 / 35;
    overflow: hidden; cursor: pointer;
    outline-offset: -2px;
}
.open .open_box img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.open .open_box .open_img .open_img_btn:hover img {opacity: 0.5;}

/* notice news box */
.notice_news_pc {display: none;}

.notice_news_tab {display: flex; border-bottom: 1px solid #999;}
.notice_news_tab .tab {
    padding: 10px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #999;
    font: inherit;
    cursor: pointer;
}

.notice_news_tab .tab.on {
    border-bottom-color: #6987d6;
    color: #6987d6;
}

.notice_news_sheet .tab_sheet {display: none;}
.notice_news_sheet .tab_sheet.on_sheet {display: block;}

.notice_news_mobile .notice_news_tab {
    display: flex;
    border-bottom: 1px solid #999;
}
.notice_news_mobile .notice_news_tab .tab {
    padding: 10px; width: 15%; text-align: center;
}
.notice_news_mobile .notice_news_sheet .tab_sheet .notice_news_txt {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    width: 80%;
}
.notice_news_mobile .notice_news_sheet .tab_sheet .notice_news_date {
    width: 17%;
    float: right; margin-top: -20px;
    text-align: right;
    color: #999;
}

.notice_news_mobile .notice_news_sheet .tab_sheet ul {margin: 20px 0;}
.notice_news_mobile .notice_news_sheet .tab_sheet ul li {margin-bottom: 15px;}
.notice_news_mobile .notice_news_sheet .tab_sheet ul li a {color: #999;}

.notice_news_more {
    width: 15%; height: 30px;
    line-height: 30px; text-align: center;
    margin: 0 auto; border: 1px solid #475775;
}
.notice_news_more a {color: #475775;}

/* ruins gallery */
.ruins {display: flex; flex-wrap: wrap;margin: 0 0 20px; padding: 0 16px;}
.ruins .ruins_box {width: calc(50% - 10px); margin: 5px; cursor: pointer;}
.ruins .ruins_box .ruins_img img {width: 100%;}
.ruins .ruins_box .ruins_txt {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-top: 5px;
}

/* link site */
.link_site_pc {display: none;}
.link_site_mobile {margin: 10px 0;}
.link_site_mobile .link_site {
    width: 75%; height: 80px; float: left;
}
.link_site_mobile .link_site div {
    width: calc(100%/3);
    height: 40px;
    float: left;
    border: 1px solid #475775;
    text-align: center;
}
.link_site_mobile .link_site div p {color: #6987D6;}
.link_site_mobile .site_more {
    width: 25%; height: 80px;
    background-color: #475775; text-align: center; padding-top: 25px; float: left;
}
.link_site_mobile .site_more a {color: white;}

/* navigation */
.navi span {padding: 5px;}
.navi span a {color: #999;}


/******************* Tablet+PC *******************/
@media all and (min-width: 601px) {
    .banner_metapo {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas: "banner metapo";
        align-items: stretch;
    }

    /* 오른쪽 메뉴 2×2 */
    .metapo {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(0, 1fr));
        align-self: stretch;
        height: 100%;
    }

    .metapo .metapo_box {
        width: auto;
        height: auto;
    }

    .metapo .metapo_box > a {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .metapo_txt {
        width: auto;
        text-align: left;
    }
    
    .open .open_box .open_img_sheet {
        order: 1;
        width: 100%;
        aspect-ratio: 53 / 35;
        margin: 0;
        overflow: hidden;
    }

    .open .open_box .open_img_sheet .sheet {
        width: 100%;
        height: 100%;
    }

    .open .open_box .open_img_sheet .sheet img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* 큰 이미지 아래 썸네일 4장 */
    .open .open_box .open_img {
        order: 2;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
        width: 100%;
        margin: 0;
    }

    .open .open_box .open_img .open_img_btn {
        width: auto;
        min-width: 0;
        aspect-ratio: 53 / 35;
        overflow: hidden;
        cursor: pointer;
        outline: 2px solid transparent;
        outline-offset: -2px;
    }

    .open .open_box .open_img .open_img_btn img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .open .open_box .open_img .open_img_btn.on {
        outline-color: #6987d6;
    }
    .sub_tit {display: block;}

    .slide span {font-size: 1.2rem;}
}


/******************* Tablet *******************/
@media all and (min-width: 601px) and (max-width: 1024px) {
    /* 조사절차 */
    .progress {
        width: 100%;
        display: flex; flex-wrap: wrap; justify-items: center;
        gap: 10px;
    }
    .progress .progress_box {
        width: 49%; padding: 10px;  
    }   
    .progress .progress_box .progress_img {
        width: 15%; float: left; margin-right: 10px;
    }
    .progress .progress_box .progress_txt {
        width: 80%; padding-top: 5px; float: left;
        color: white; text-align: left;
    }
    .progress .progress_box .progress_txt .tit {font-size: 1.25rem;}
    /* banner+metapo */
    .banner {
        width: 100%;
        aspect-ratio: 507 / 230;
    }

    .banner_txt {
        padding: 12px;
    }

    .banner_txt p {
        max-width: 90%;
        font-size: 0.9rem;
        line-height: 1.45;
    }

    .banner_txt strong {
        font-size: 0.85rem;
    }

    .metapo .metapo_box > a {
        padding: 10px;
    }

    .metapo_name {
        font-size: 1.1rem;
        line-height: 1.4;
    }

    .metapo_more {
        display: none;
    }

    .metapo_img {
        width: 50px;
    }

    /* 현장공개 */
    .open .open_box {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        width: 100%;
    }

    /* 왼쪽 썸네일 */
    .open .open_box .open_img {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(0, 1fr));
        gap: 10px;
        width: 100%; height: 100%;
    }
    .open .open_box .open_img .open_img_btn {
        width: auto;
        min-width: 0;
        overflow: hidden;
        cursor: pointer;
        outline: 2px solid transparent;
        outline-offset: -2px;
    }

    .open .open_box .open_img .open_img_btn img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: opacity 0.2s;
    }

    .open .open_box .open_img .open_img_btn.on {
        outline-color: #6987d6;
    }

    /* 오른쪽 큰 이미지 */
    .open .open_box .open_img_sheet {
        width: 100%;
        height: 100%;
        margin: 0;
        overflow: hidden;
    }

    .open .open_box .open_img_sheet .sheet {
        width: 100%;
        height: 100%;
        gap: 10px;
    }

    .open .open_box .open_img_sheet .sheet img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


    .notice_news_mobile .notice_news_sheet .tab_sheet ul li {font-size: 1.25rem;}
    .ruins_txt {font-size: 1.25rem;}
    .link_site_mobile {width: 100%; display: flex;}
    .link_site_mobile div {width: 12.5%; height: 40px; flex-wrap: nowrap;}
}


/******************* PC *******************/
@media all and (min-width: 1025px) {
    /* 공통속성 */
    html {font-size: 16px;}
    /* 참고 : fontsize 0.75rem = 12px, 1.25rem = 20px, 1.5rem = 24px */
    
    
    .wrap {width: 1070px; margin: 0 auto;}
    .btn_top {
        width: 50px; height: 50px;
        line-height: 50px; text-align: center; cursor: pointer;
        background-color: #475775; border: 1px solid white;
        position: fixed; bottom: 30px; right: 30px;
        z-index: 10;
    }
    .btn_top a {color: white;}

    /* mainVisual */
    .slides {
        width: 100%; height: 100vh;
        max-width: 1900px; margin: 0 auto;
    }
    .slide-wrap {width: 100%; position: relative;}
    .slide {position: absolute; top: 0; left: 0; width: 100%;}
    .slide span {
        position: absolute; bottom: 0; right: 0;
        font-size: 2rem; background: rgba(0, 0, 0, 0.6); color: #fff;
        padding: 10px 25px;
    }
    .slide img {width: 100%; height: 100vh; object-fit: cover; }
    

    /* progress */
    .progress {width: 100%;}
    .progress .progress_box {margin-bottom: 10px; border: 1px solid transparent;}
    .progress .progress_box .progress_txt .tit {font-size: 2rem;}
    .progress .progress_box:hover {
        background-color: white;
        border: 1px solid #6987D6;
    }
    .progress .progress_box:hover .progress_txt {color: #6987D6;}
    .progress .progress_box:hover .progress_txt .sub_tit {font-size: 1rem;}
    .wrap {
        width: min(calc(100% - 32px), 1070px);
        margin: 0 auto;
    }

    .banner_metapo {
        grid-template-columns: 350px minmax(0, 1fr);
        grid-template-rows: 250px;
        grid-template-areas: "banner metapo";

        /* 부모의 고정 height는 사용하지 않음 */
        height: auto;
    }

    .banner {
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
    }

    .banner_txt {
        padding: 15px;
    }

    .banner_txt p {
        max-width: 95%;
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .banner_txt strong {
        font-size: 0.8rem;
    }

    .metapo {
        height: 100%;
    }

    .metapo .metapo_box > a {
        padding: 20px;
    }

    .metapo_txt {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }

    .metapo_name {
        font-size: 1.2rem;
        white-space: nowrap;
    }

    .metapo_more {
        display: block;
        color: #fff;
        font-size: 0.9rem;
    }

    .metapo_img {
        width: 80px;
    }

    .metapo_box:hover {
        border-color: #475775;
        background-color: #fff;
    }

    .metapo_box:hover .metapo_txt,
    .metapo_box:hover .metapo_more {
        color: #475775;
    }

    /* 현장공개 */
    .open .open_box {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        width: 100%;

        /* 1070px일 때 약 350px 높이 */
        aspect-ratio: 1070 / 350;
    }

    /* 왼쪽 썸네일 */
    .open .open_box .open_img {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
        height: 100%;
        order: 1;
    }

    .open .open_box .open_img .open_img_btn {
        width: auto;
        min-width: 0;
        overflow: hidden;
        cursor: pointer;
        outline: 2px solid transparent;
        outline-offset: -2px;
    }

    .open .open_box .open_img .open_img_btn img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: opacity 0.2s;
    }

    .open .open_box .open_img .open_img_btn:hover img {
        opacity: 0.3;
    }

    /* 오른쪽 큰 이미지 */
    .open .open_box .open_img_sheet {
        width: 100%;
        height: 100%;
        margin: 0;
        overflow: hidden;
        order: 2;
    }

    .open .open_box .open_img_sheet .sheet {
        width: 100%;
        height: 100%;
    }

    .open .open_box .open_img_sheet .sheet img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* notice & news */
    .notice_news_mobile {display: none;}
    .notice_news_pc {display: block; height: 230px;}
    .notice_news_pc .notice_news_box {
        width: 530px;
        float: left;
        margin: 40px 0;
    }
    .notice_news_pc .notice_news_box:first-child {margin-right: 10px;}
    .notice_news_pc .notice_news_box .notice_news_list {
        border-top: 1px solid #475775; border-bottom: 1px solid #475775;
        padding: 0 5px;
    }
    .notice_news_pc .notice_news_box .notice_news_list ul li{
        height: 30px; line-height: 30px;
    }
    .notice_news_pc .notice_news_box .notice_news_list ul li a {
        color: #999;
    }
    .notice_news_pc .notice_news_box .notice_news_list .notice_news_txt {
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        width: 75%;
    }
    .notice_news_box .more {float: right; padding-top: 20px; padding-right: 10px;}
    .notice_news_date {margin-top: -30px; float: right;}
    
    /* ruins */
    .ruins {display:flex; flex-wrap: wrap; width: 100%; margin: 0 20px}
    .ruins .open_header {flex: 0 0 100%; width: 100%;}
    .ruins .ruins_box {width: calc(25% - 10px); margin: 5px;}
    /* linkSite */
    .link_site_mobile {display: none;}
    .link_site_pc {
        display: block;
        width: 890px; height: 40px;
        font-size: 0.75rem; text-align: center; line-height: 40px;
        margin: 20px auto; border: 1px solid #475775;
    }
    .link_site_pc .site_more {
       color: white; background-color: #475775; padding: 5px; margin-left: 20px;
    }
   .link_site_pc .site_more a {color: white;}
   .link_site div p {color: #6987D6;}

   /* navi */
   .navi span {padding: 10px;}
   .navi span a {color: #999;}

}