@charset "utf-8";

.sub-wrap + .scroll-wrap{display: none;}

.sub-content{max-width: 1400px; width: calc(100% - 40px); margin: 100px auto; word-break: keep-all;}
.sub-top{padding: 60px 0 30px; border-bottom: 2px solid var(--color-m); display: flex; justify-content: space-between; align-items: flex-end;}
.sub-top .sub-title{display: inline-block; font-family: 'SBAggro'; font-size: 2.5rem; font-weight: 400; margin-bottom: 12px; position: relative;}
.sub-top .sub-title::after{content: ''; display: block; width: 8px; aspect-ratio: 1 / 1; background-color: var(--color-m); border-radius: 50%; position: absolute; bottom: 8px; right: -16px;}
.sub-top .sub-loca{display: flex;}
.sub-top .sub-loca li{font-size: 1.125rem; color: #777; margin-right: 32px; position: relative;}
.sub-top .sub-loca li:first-of-type{width: 16px; aspect-ratio: 1 / 1; font-size: 0; text-indent: -999%; background: url(../img/sub/ico-subLocHome.png) 100% / contain no-repeat;}
.sub-top .sub-loca li::after{content: ''; display: block; width: 8px; height: 11px; position: absolute; top: 50%; right: -21px; transform: translateY(-50%); background: url(../img/sub/ico-subLocArrow.png) 100% / contain no-repeat;}
.sub-top .sub-loca li:last-of-type{margin-right: 0;}
.sub-top .sub-loca li:last-of-type::after{content: none;}
.sub-top .search-box{position: relative; font-size: 1.125rem;}
.sub-top .search-box .total-text{color: #a4a4a4; position: absolute; top: 50%; left: 20px; transform: translateY(-50%);}
.sub-top .search-box .total-text::after{content: ''; border-right: 1px solid #a4a4a4; margin-left: 5px;}
.sub-top .search-box .search-bar{width: 400px; height: 48px; color: #555; background-color: #eee; border: none; border-radius: 30px; padding: 0 56px 0 94px;}
.sub-top .search-box .search-button{width: 20px; aspect-ratio: 1 / 1; position: absolute; top: 50%; right: 20px; transform: translateY(-50%);}

.con-title{font-family: 'SBAggro'; font-size: 1.5rem; margin-bottom: 10px;}
.intro-title{font-size: 1.25rem; font-weight: 600; color: var(--color-m); margin-bottom: 10px;}
.cir-title{font-size: 1.125rem; font-weight: 600; padding-left: 16px; margin: 10px 0; position: relative;}
.cir-title::before{content: ''; display: block; width: 8px; aspect-ratio: 1 / 1; border: 1px solid #333; border-radius: 50%; position: absolute; top: 8px; left: 0;}

.sub-con{margin: 50px 0;}
.sub-con:last-of-type{margin-bottom: 100px;}
.inner-con{margin: 30px 0;}
.inner-con:last-of-type{margin-bottom: 0;}

/*flex*/
.flex-1{flex: 1;}
.flex-3{flex: 3;}

/*tab-list*/
.tab-list{display: flex; border: 1px solid var(--color-m);}
.tab-list > li{flex: 1;}
.tab-list .item{display: block; width: 100%; height: 100%; padding: 20px; color: var(--color-m); border-right: 1px solid var(--color-m); font-size: 1.125rem; font-weight: 600; text-align: center;}
.tab-list > li:last-of-type .item{border-right: 0;}
.tab-list .item:hover,
.tab-list .item.on{color: white; background-color: var(--color-m);}

/*left-tab-wrap*/
.left-tab-wrap{display: flex; gap: 40px;}
.left-tab-wrap .left-tab{width: 300px; height: fit-content; padding: 16px; border: 1px solid var(--color-b); position: sticky; top: 20px; margin-bottom: 20px;}
.left-tab-wrap .left-tab .item{width: 100%; padding: 12px; text-align: left; position: relative;}
.left-tab-wrap .left-tab .item::after{content: ''; display: block; width: 0; height: 1px; border-bottom: 1px dashed var(--color-m); position: absolute; bottom: 0; left: 0; transition: .3s;}
.left-tab-wrap .left-tab .item:hover,
.left-tab-wrap .left-tab .item.on{color: var(--color-m); font-weight: 600;}
.left-tab-wrap .left-tab .item.on::after{width: 100%;}
.left-tab-wrap .right-cont{width: calc(100% - 340px);}

.con-item{display: none;}
.con-item:first-of-type{display: block;}

/*dot-list*/
.dot-list > li{position: relative; padding-left: 10px; margin: 0; margin-top: 5px; box-sizing: border-box; text-align: left; line-height: 1.4;}
.dot-list > li:first-of-type{margin-top: 0;}
.dot-list > li:before{display: block; content: ""; position: absolute; top: 8px; left: 0; width: 3px; aspect-ratio: 1 / 1; background: #575757; border-radius: 50%;}

/*couter-cir*/
.counter-cir{counter-reset: cir-number; margin: 10px 0;}
.counter-cir > li{position: relative; padding-left: 30px; padding-bottom: 10px;}
.counter-cir > li::before{display: flex; justify-content: center; align-items: center; counter-increment: cir-number; content: counter(cir-number); position: absolute; top: 0; left: 0; color: var(--color-m); border: 1px solid var(--color-m); border-radius: 50%; width: 20px; aspect-ratio: 1 / 1; line-height: 0; font-size: 14px;}

/*table*/
table + .add-ex{display: flex; align-items: center; gap: 5px; color: #555; margin-top: 10px;}

.table-type01{text-align: left;}
.table-type01 tbody tr:nth-of-type(odd){background-color: var(--bg-m);}
.table-type01 tbody tr:first-of-type{border-top: 1px solid var(--bg-m);}
.table-type01 tbody tr{background-color: white; border-bottom: 1px solid var(--bg-m);}
.table-type01 th{color: var(--color-m); padding: 16px 12px;}
.table-type01 td{padding: 16px 0; line-height: 1.4;}
.table-type01 td button.like{background-color: #e16060; color: white; margin-left: 10px; padding: 8px 12px; border-radius: 5px; display: inline-flex; align-items: center; gap: 5px;  transition: .3s;}
.table-type01 td button.like:hover{background-color: #cb4949;}

.table-type02{border-top: 1px solid var(--color-m);}
.table-type02 tr{border-bottom: 1px dashed #bcc5dd;}
.table-type02 :where(th, td){ padding: 8px 4px;}
.table-type02 th{color: var(--color-m);}

.table-type03 table{border-top: 2px solid var(--color-m);}
.table-type03 table thead th{padding: 15px 0; color: var(--color-m); border-bottom: 1px solid var(--color-m);}
.table-type03 table tbody td{text-align: center; padding: 15px 0; font-weight: 400;}
.table-type03 table tbody tr{border-bottom: 1px solid var(--color-b);}
.table-type03 table tbody tr .item:hover{color: var(--color-m);}
.table-type03 table tbody td.td-tit{text-align: left; font-weight: 600;}

.table-type04 table{border-top: 2px solid var(--color-m);}
.table-type04 table thead th{padding: 15px 0; color: var(--color-m); border-bottom: 1px solid var(--color-m); border-right: 1px solid var(--color-m); background-color: #f2f6ff;}
.table-type04 table thead th:last-of-type{border-right: 0;}
.table-type04 table tbody tr{border-bottom: 1px solid var(--color-tb);}
.table-type04 table tbody :where(th, td){border-right: 1px solid var(--color-tb);}
.table-type04 table tbody th{background-color: #f2f6ff; color: var(--color-m);}
.table-type04 table tbody td{text-align: center; padding: 15px 10px; font-weight: 400;}
.table-type04 table tbody td.td-tit{text-align: left;}
.table-type04 table tbody td:last-of-type{border-right: 0;}

/*팝업*/
.popup-wrap{position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, .5); display: none; z-index: 10000;}
.popup-wrap .btn-close{position: absolute; top: 20px; right: 20px; color: white; font-size: 24px;}
.popup-wrap .popup-inner{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 1200px; width: calc(100% - 40px); max-height: 600px; height: calc(100% - 40px); overflow: hidden; background-color: white; border-radius: 20px;}

/*근현대사 건축물 팝업*/
.popup-wrap.detail .popup-inner{display: flex; gap: 20px;}
.popup-wrap.detail .left-wrap{background-color: #f2f2f2; flex: 1; margin: 20px; margin-right: 0;}
.popup-wrap.detail .right-wrap{width: 400px; padding: 30px 20px; font-family: 'Noto Serif KR'; background-color: var(--bg-m); display: flex; flex-direction: column;}
.popup-wrap.detail .Hcon .title{font-size: 1.5rem; font-weight: 700; margin-bottom: 4px;}
.popup-wrap.detail .Hcon i{color: var(--color-m);}
.popup-wrap.detail .sum-info{margin: 20px 0;}
.popup-wrap.detail .detail-info{flex: 1; overflow-y: auto;}
.popup-wrap.vr .popup-inner{max-width: 1400px; max-height: 720px; height: calc(100% - 40px);}

/*갤러리 팝업*/
.popup-wrap.gallery-popup .popup-inner{overflow: auto; max-width: 800px; max-height: calc(100vh - 20px); height: auto; padding: 20px 0; background-color: transparent; border-radius: 0;}
.popup-wrap.gallery-popup .popup-con{position: relative; padding-top: 50px;}
.popup-wrap.gallery-popup .btn-outer{position: sticky; top: 50px; right: 0;}
.popup-wrap.gallery-popup .btn-close{display: flex; justify-content: center; align-items: center;width: 40px; aspect-ratio: 1 / 1; top: -50px; right: 0; background-color: rgba(0, 0, 0, .5); border-radius: 50%; transition: .3s;}
.popup-wrap.gallery-popup .btn-close:hover{background-color: rgba(0, 0, 0, .7);}
.popup-wrap.gallery-popup .board-title{font-size: 1.5rem; font-weight: 700; text-align: center; color: white;}
.popup-wrap.gallery-popup .view-content{margin: 12px 0;}
.popup-wrap.gallery-popup .like-wrap{display: flex; justify-content: flex-end; margin-top: 12px;}
.popup-wrap.gallery-popup .like-wrap .like-type02{display: flex; justify-content: center; align-items: center; gap: 4px; width: 92px; color: white; background-color: var(--color-m); transition: .3s;}
.popup-wrap.gallery-popup .like-wrap .like-type02:hover{background-color: var(--color-d);}
.popup-wrap.gallery-popup .like-wrap .like-type02 i{color: #ff6347; animation: heart .8s infinite;}
@keyframes heart {
0% {transform: scale(1);}
40% {transform: scale(1.2);}
60% {transform: scale(1.1);}
80% {transform: scale(1.2);}
100% {transform: scale(1);}
}
.popup-wrap.gallery-popup .like-wrap .tel-gui{padding: 8px; padding-left: 24px; background-color: white; position: relative;}
.popup-wrap.gallery-popup .like-wrap .tel-gui::before{content: "\eb7c"; font-family: xeicon !important; position: absolute; top: 8px; left: 8px;}

.popup-wrap.like-popup .popup-inner{display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; max-width: 600px; max-height: 280px; padding: 20px; font-size: 1.5rem; font-weight: 900; text-align: center; color: #555; border-radius: 8px;}
.popup-wrap.like-popup .popup-inner .img-box{width: 120px; aspect-ratio: 1 / 1;}

/*참고 내용*/
.ref-box{padding: 10px 10px 10px 16px; margin-bottom: 20px; font-family: 'SBAggro'; font-size: 1.125rem; line-height: 1.4; position: relative;}
.ref-box::before{content: ''; width: 100%; width: 4px; height: 100%; background-color: var(--color-m); position: absolute; top: 0; left: 0;}

/*준비중 페이지*/
.ready-wrap{min-height: 500px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; font-size: 1.75rem; font-weight: 700;}


/*창원 아카이브 소개 - 소개(intro)*/
.intro-wrap .mimg-box{width: 100%; aspect-ratio: 4 / 1; background-color: #555;}
.intro-wrap .top-img{margin-bottom: 100px; font-size: 1.25rem; font-weight: 600; color: var(--color-m); text-align: center; position: relative;}
.intro-wrap .top-img::after{content: ''; display: block; width: 2px; height: 60px; background-color: #afbfe2; position: absolute; bottom: -80px; left: 50%; transform: translateX(-50%);}

.intro-wrap .top-img .img-box{width: 80px; margin: 0 auto 10px; aspect-ratio: 1 / 1;}

.intro-wrap .shape-type{display: flex; max-width: 1200px; width: 100%; margin: auto;}
.intro-wrap .shape-type .item{width: calc(25% + 6%); aspect-ratio: 1 / 1; padding: 30px; font-weight: 600; text-align: center; background-color: var(--color-mt); color: white; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px;}
.intro-wrap .shape-type .item:nth-of-type(n+2){margin-left: -2%;}
.intro-wrap .shape-type .item:nth-of-type(1){background-color: #3359bb; border-radius: 50% 0 50% 50%;}
.intro-wrap .shape-type .item:nth-of-type(2){background-color: #2247a5; border-radius: 50% 50% 0 50%;}
.intro-wrap .shape-type .item:nth-of-type(3){background-color: var(--color-m); border-radius: 50%;}
.intro-wrap .shape-type .item:nth-of-type(4){background-color: var(--color-d); border-radius: 0 50% 50% 50%;}
.intro-wrap .shape-type .item .img-box{width: 52px; aspect-ratio: 1 / 1;}
.intro-wrap .shape-type .item .text{font-size: 1.25rem; font-weight: 600;}

.intro-wrap .text-box{max-width: 1200px; width: 100%; margin: 50px auto 0; font-size: 1.125rem; text-align: center; position: relative;}
.intro-wrap .bg-text{width: 100%; font-family: 'SBAggro'; font-size: 5rem; color: var(--bg-m); line-height: 1; font-weight: 600; text-align: center; position: absolute; top: -70px; left: 50%; transform: translateX(-50%); z-index: -1;}


/*창원의 역사 - 지적아카이브(landarchive)*/
.landArchive-wrap{display: flex; gap: 40px;}
.landArchive-wrap .left{width: 50%; aspect-ratio: 1 / 1; background: url('../img/sub/bg-landArchive.png') 100% / cover no-repeat; padding: 50px;}
.landArchive-wrap .right{width: calc(50% - 40px);}
.landArchive-wrap .right .con{font-size: 1.125rem; font-weight: 600;}
.landArchive-wrap .right .con p{margin-bottom: 10px;}
.landArchive-wrap .btn-wrap > a{flex: 1;}


/*창원의 역사 - 기록물 유형(landarchive)*/
.archiveType-wrap .img-wrap{display: flex; gap: 10px; padding: 20px; margin: 10px 0; background-color: var(--bg-m);}
.archiveType-wrap .img-box{position: relative;}
.archiveType-wrap .img-box .img-name{padding: 8px 12px; background-color: white; color: var(--color-m); position: absolute; top: 10px; right: 10px;}

/*창원의 역사 - 시대별 창원역사(history)*/
.history-item{display: flex;}
.history-item .year{display: flex; flex-direction: column; gap: 5px; width: 120px; font-size: 2rem; font-weight: 700; line-height: 1; color: #555; transition: .3s;}
.history-item .year .era{font-size: 1rem;}
.history-item .year-cont{width: calc(100% - 120px); padding: 0 0 80px 20px; position: relative;}
.history-item .year-cont::before{content: ''; display: block; width: 1px; height: 100%; background-color: var(--color-b); position: absolute; left: 0; top: 5px;}
.history-item:last-of-type .year-cont::before{content: none;}
.history-item .year-cont::after{content: ''; display: block; width: 12px; aspect-ratio: 1 / 1; background-color: white; border: 3px solid #555; border-radius: 50%; position: absolute; left: -5px; top: 5px; transition: .3s;}
.history-item .year-cont > li{display: flex; margin-bottom: 12px; opacity: 0; transform: translateY(-20px); transition: .3s;}
.history-item .year-cont .month{width: 100px; font-weight: 600; color: #555; transition: .3s;}
.history-item .year-cont .dot-list{width: calc(100% - 100px);}
.history-item.on .year{color: var(--color-m);}
.history-item.on .year-cont::after{border-color: var(--color-m);}
.history-item.on .year-cont .month{color: var(--color-m);}
.history-item.on .year-cont > li{opacity: 1; transform: translateY(0);}


/*창원의 풍경 - 시가지전경*/
.cityMap-box{width: 100%; background-color: var(--bg-m); overflow: auto hidden;}
.cityMap-box .inner{max-width: 1000px; min-width: 580px; margin: 50px auto; position: relative;}
.cityMap-box .tag-list > li{position: absolute;}
.cityMap-box .tag-list li.li1-1{top: 67%; left: 21%;}
.cityMap-box .tag-list li.li1-2{top: 56%; left: 40%;}
.cityMap-box .tag-list li.li1-3{top: 83%; left: 46%;}
.cityMap-box .tag-list li.li2-1{top: 35%; left: 31%;}
.cityMap-box .tag-list li.li2-2{top: 43%; left: 45%;}
.cityMap-box .tag-list li.li3-1{top: 10%; left: 68%;}
.cityMap-box .tag-list li.li3-2{top: 14%; left: 49%;}
.cityMap-box .tag-list li.li3-3{top: 35%; left: 57%;}
.cityMap-box .tag-list li.li3-4{top: 41%; left: 64%;}
.cityMap-box .tag-list li.li4-1{top: 45%; left: 54%;}
.cityMap-box .tag-list li.li4-2{top: 53%; left: 58%;}
.cityMap-box .tag-list li.li5-1{top: 62%; left: 62%;}
.cityMap-box .tag-list li.li5-2{top: 69%; left: 70%;}
.cityMap-box .tag-list li.li5-3{top: 73%; left: 78%;}
.cityMap-box .tag-list li.li5-4{top: 73%; left: 87%;}
.cityMap-box .tag-item{width: 44px; height: 54px;}
.cityMap-box .tag-item::before{content: ''; display: block; width: 100%; height: 100%; background: url('../img/sub/ico-areaLoca.png') 100% / contain no-repeat; transition: .3s;}
.cityMap-box .tag-item .img-box{display: inline-block; width: 36px; aspect-ratio: 1 / 1; border-radius: 50%; position: absolute; top: 4px; left: 50%; transform: translateX(-50%); overflow: hidden;}
.cityMap-box .addr{display: none; width: 124px; padding: 10px; border-radius: 5px; background-color: white; box-shadow: 2px 2px 2px rgba(0, 0, 0, .2); position: absolute; top: -130px; left: 50%; z-index: 1; transform: translateX(-50%);}
.cityMap-box .addr .text{margin-top: 5px; font-size: 14px;}
.cityMap-box .tag-item:hover::before{background-image: url('../img/sub/ico-areaLoca-on.png');}
.cityMap-box .tag-item:hover + .addr{display: block; animation-duration: .6s; animation-name: bounce;}
@keyframes bounce {
0% {opacity: 0; transform: translateX(-50%) scale3d(0.3, 0.3, 0.3);}
20% {transform: translateX(-50%) scale3d(1, 1, 1);}
40% {transform: translateX(-50%) scale3d(0.9, 0.9, 0.9);}
60% {opacity: 1; transform: translateX(-50%) scale3d(1.03, 1.03, 1.03);}
80% {transform: translateX(-50%) scale3d(0.97, 0.97, 0.97);}
100% {opacity: 1; transform: translateX(-50%) scale3d(1, 1, 1);}
}

.popup-wrap.cityMap .popup-inner{max-width: none; width: calc(100% - 40px); max-height: none; height: calc(100% - 40px);}
.popup-wrap.cityMap .btn-close{width: 40px; aspect-ratio: 1 / 1; background-color: rgba(0, 0, 0, .5); border-radius: 50%; font-size: 24px; display: flex; justify-content: center; align-items: center; position: absolute; top: 20px; right: 20px; transition: .3s;}
.popup-wrap.cityMap .btn-close:hover{background-color: rgba(0, 0, 0, .8);}
.popup-wrap.cityMap .sele-box{width: 136px; padding: 10px ; background-color: rgba(16, 54, 141, 0.5); text-align: center; position: absolute; top: 20px; left: 20px;}
.popup-wrap.cityMap .sele-box .btn-view{width: 100%; color: white; font-size: 18px;}
.popup-wrap.cityMap .sele-list{margin-top: 10px;}
.popup-wrap.cityMap .sele-list > li{position: relative;}
.popup-wrap.cityMap .sele-list > li:not(:last-of-type){margin-bottom: 10px;}
.popup-wrap.cityMap .sele-item{width: 100%; padding: 10px 16px; color: white; background-color: rgba(16, 54, 141, 0.5); transition: .3s;}
.popup-wrap.cityMap .sele-item:hover,
.popup-wrap.cityMap .sele-item.on{background-color: rgba(16, 54, 141, 0.8);}
.popup-wrap.cityMap .seleDe-list{display: none; width: max-content; background-color: rgba(16, 54, 141, 0.5); padding: 10px 16px; position: absolute; top: 50%; left: calc(100% + 20px); transform: translateY(-50%);}
.popup-wrap.cityMap .seleDe-list > li:last-of-type .seleDe-item{margin-bottom: 0;}
.popup-wrap.cityMap .seleDe-item{color: white; margin-bottom: 10px;}
.popup-wrap.cityMap .seleDe-item:hover{text-decoration: underline;}
.popup-wrap.cityMap .sele-item.on + .seleDe-list{display: block;}

/*이용안내*/
.guide-cate{display: flex;}
.guide-cate .item{flex: 1; max-width: 400px; text-align: center; border: 1px solid var(--color-b); border-left: 0;}
.guide-cate .item:first-of-type{border-left: 1px solid var(--color-b);}
.guide-cate .item .title{padding: 8px; background-color: #333; color: white;}
.guide-cate .item img{margin: 20px 0;}
.guide-cate .item .cont{padding: 8px; border-top: 1px solid var(--color-b);}
.copyright_img_box{display: flex; gap: 5px; height: 40px; margin-top: 5px;}
.copyright-btn{display: flex; flex-wrap: wrap; gap: 10px;}

/*통합검색*/
.search-keyword{margin-bottom: 20px; font-size: 1.5rem; font-weight: 700; text-align: center;}
.search-keyword span{display: inline-block; padding: 8px 20px; border: 1px solid var(--color-b); border-radius: 50px;}
.search-tCount{margin-bottom: 20px; font-size: 1.25rem; font-weight: 600; text-align: center;}
.result-box{margin-bottom: 20px; border: 1px solid var(--color-b);}
.result-box:last-of-type{margin-bottom: 0;}
.result-box .title-box{display: flex; justify-content: space-between; align-items: center; padding: 12px; font-size: 1.25rem; font-weight: 700; background-color: var(--bg-m); border-bottom: 1px solid var(--color-b);}
.result-box .title-box .count{display: inline-flex; justify-content: center; align-items: center; min-width: 40px; margin-left: 4px; padding: 4px 8px; font-size: 1.125rem; color: white; background-color: var(--color-m); border-radius: 40px;}
.result-box .btn-link{gap: 12px; height: 40px;}
.result-box .btn-link:hover{gap: 20px;}
.result-box .cont-list .item{border-bottom: 1px solid var(--color-b); padding: 12px 16px;}
.result-box .cont-list .item:last-of-type{border-bottom: 0;}
.result-box .cont-list .item-title{font-size: 1.25rem; font-weight: 700;}
.result-box .cont-list .tag-box{margin-top: 10px;}
.result-box .cont-list .tag-item{display: inline-flex; justify-content: center; align-items: center; gap: 4px; min-width: 72px; margin-right: 4px; padding: 4px 8px; border: 1px solid var(--color-b); border-radius: 40px;}

@media (max-width:1600px){
}
@media (max-width:1400px){
}
@media (max-width:1200px){
}
@media (max-width:1024px){
	.sub-content{margin: 80px auto;}

	.sub-con{margin: 30px 0;}
	.sub-con:last-of-type{margin-bottom: 50px;}

	.sub-top{flex-direction: column; align-items: flex-start; gap: 20px;}
	.sub-top-right,
	.sub-top .search-box .search-bar{width: 100%;}

	/*tab-list*/
	.tab-list{flex-wrap: wrap;}
	.tab-list > li{flex: 1 1 40%;}
	.tab-list .item{padding: 12px; border-bottom: 1px solid var(--color-m);}
	.tab-list > li:nth-of-type(even) .item{border-right: 0;}
	.tab-list > li:nth-last-of-type(-n+2) .item{border-bottom: 0;}

	/*left-tab-wrap*/
	.left-tab-wrap{flex-direction: column;}
	.left-tab-wrap .left-tab{display: flex; gap: 0; width: 100%; padding: 0; background-color: white; border: 0; top: 0; z-index: 1; overflow-x: auto;}
	.left-tab-wrap .left-tab .item{padding: 12px 8px 8px 8px; border-bottom: 1px solid var(--color-b);}
	.left-tab-wrap .left-tab .item::after{border-width: 2px;}
	.left-tab-wrap .left-tab .item.on{border-bottom: 0;}
	.left-tab-wrap .right-cont{width: 100%;}

	/*table*/
	.table-type03 :where(colgroup, thead, .td-num){display: none;}
	.table-type03 :where(table, tbody, tr, td:not(.td-num)){display: block;}
	.table-type03 table tbody td.td-tit{padding: 10px 0;}
	.table-type03 table tbody td.td-organ,
	.table-type03 table tbody td.td-date{display: inline-block; padding: 0 0 10px; text-align: left;}
	.table-type03 table tbody td.td-organ{ margin-right: 20px;}
	.table-type03 td.td-organ::before{content: '생산기관'; color: var(--color-m); margin-right: 5px;}
	.table-type03 td.td-date::before{content: '생산년도'; color: var(--color-m); margin-right: 5px;}

	/*근현대사 건축물 팝업*/
	.popup-wrap.detail .popup-inner,
	.popup-wrap.vr .popup-inner{height: calc(100% - 200px); flex-direction: column; gap: 0; overflow-y: auto;}
	.popup-wrap.detail .left-wrap{margin: 0; max-height: 540px;}
	.popup-wrap.detail .right-wrap{width: 100%; padding: 20px;}
	.popup-wrap.detail .detail-info{overflow-y: unset;}

	/*창원 아카이브 소개 - 소개(intro)*/
	.intro-wrap .shape-type .item{gap: 10px;}
	.intro-wrap .shape-type .item .img-box{width: 32px;}

	/*창원의 역사 - 지적아카이브(landarchive)*/
	.landArchive-wrap{flex-direction: column; gap: 20px;}
	.landArchive-wrap .left{width: 100%; max-height: 480px;}
	.landArchive-wrap .right{width: 100%;}

	/*창원의 역사 - 시대별 창원역사(history)*/
	.history-item .year-cont .month{width: 72px;}
}
@media (max-width:720px){
	.sub-content{margin: 60px auto;}

	.con-title{font-size: 1.25rem;}

	/*table*/
	.ico-scroll{display:block; width:64px; aspect-ratio: 1 / 1; background:url('../img/sub/ico-mobile.png') rgba(16, 52, 141, .8) center / 60% no-repeat; border-radius:50%; position:absolute; top:20px; left:50%; z-index:10; animation: table-scroll 1s infinite;}
	@keyframes table-scroll {
		0% {transform:translate(-50%, 0);}
		50% {transform:translate(-50%, -10px);}
		100% {transform:translate(-50%, 0);}
	}
	/**/
	.scroll-view{width: 100%; overflow-x: auto; position: relative;}

	/*갤러리 팝업*/
	.popup-wrap.gallery-popup .popup-inner{padding: 0; border-radius: 8px;}

	/*창원 아카이브 소개 - 소개(intro)*/
	.intro-wrap .shape-type{flex-wrap: wrap; max-width: 800px; margin: auto;}
	.intro-wrap .shape-type .item{width: 52%}
	.intro-wrap .shape-type .item:nth-of-type(odd){margin-left: 0;}
	.intro-wrap .shape-type .item:nth-of-type(even){margin-left: -4%;}
	.intro-wrap .shape-type .item:nth-of-type(n+3){margin-top: -4%;}
	.intro-wrap .bg-text{font-size: 3rem; top: -60px;}

	/*창원의 역사 - 기록물 유형(landarchive)*/
	.archiveType-wrap .img-wrap{flex-direction: column; padding: 10px;}

	/*창원의 역사 - 시대별 창원역사(history)*/
	.history-item .year-cont{padding: 0 0 40px 20px;}
	.history-item .year-cont > li{flex-direction: column;}
	.history-item .year-cont .dot-list{width: 100%;}

	/*이용안내*/
	.guide-cate{flex-wrap: wrap;}
	.guide-cate .item{flex: 1 1 50%;}
	.guide-cate .item:nth-of-type(odd){border-left: 1px solid var(--color-b);}
}
@media (max-width:480px){
	.table-type01 col{width: 100% !important;}
	.table-type01 tbody tr:nth-of-type(odd){background-color: white;}
	.table-type01 tbody tr{border: none;}
	.table-type01 th, .table-type01 td{display: block;}
	.table-type01 th{padding: 8px 4px;}
	.table-type01 td{padding: 0 0 8px 4px; border-bottom: 1px solid var(--bg-m);}
	.table-type04 table{min-width: 700px;}

	.popup-wrap.cityMap .sele-box{width: calc(100% - 20px); top: 75px; left: 10px;}
	.popup-wrap.cityMap .sele-list{display: flex; flex-wrap: wrap; gap: 10px; position: relative;}
	.popup-wrap.cityMap .sele-list > li{width: calc(50% - 5px); position: unset;}
	.popup-wrap.cityMap .sele-list > li:not(:last-of-type){margin-bottom: 0;}
	.popup-wrap.cityMap .seleDe-list{width: calc(100% + 20px); top: calc(100% + 15px); left: -10px; transform: unset;}


	/*갤러리 팝업*/
	.popup-wrap.gallery-popup .rel-post .rel-list > li{width: 100%;}
	/*창원 아카이브 소개 - 소개(intro)*/
	.intro-wrap .shape-type{max-width: 400px;}
	.intro-wrap .shape-type .item{width: 100%; padding-bottom: 50px;}
	.intro-wrap .shape-type .item:nth-of-type(even){margin-left: 0;}
	.intro-wrap .shape-type .item:nth-of-type(n+2){margin-top: -50px;}
	.intro-wrap .shape-type .item .img-box {width: 48px;}

	/*창원의 역사 - 시대별 창원역사(history)*/
	.history-item{flex-direction: column;}
	.history-item .year{width: 100%; padding-left: 20px; position: relative;}
	.history-item .year::before,
	.history-item .year::after{content: ''; display: block; position: absolute;}
	.history-item .year::before{width: 1px; height: 100%; background-color: var(--color-b); left: 0; top: 0;}
	.history-item .year::after{width: 12px; aspect-ratio: 1 / 1; background-color: white; border: 3px solid #555; border-radius: 50%; left: -5px; top: 10px; transition: .3s;}
	.history-item.on .year::after{border-color: var(--color-m);}
	.history-item .year-cont{width: 100%;}
	.history-item .year-cont::before{top: 0;}
	.history-item .year-cont::after{content: none;}

	/*이용안내*/
	.guide-cate{flex-direction: column;}
	.guide-cate .item:nth-of-type(even){border-left: 1px solid var(--color-b);}

	/*통합검색*/
	.result-box .title-box{flex-direction: column; align-items: flex-start; gap: 4px;}

}