@charset "utf-8"; /* 자료검색(목록) */ .dataSearchWrap { margin: 3rem 0; border: 1px solid #ddd; } .shotSearch { display: flex; align-items: center; justify-content: flex-start; } .typeCheckBox { width: 45.3rem; } /* Check Box */ .formCheckbox { display: flex; align-items: center; padding: 2.5rem 3.5rem; border-right: 1px solid #ddd; font-size: 1.6rem; column-gap: 1.5rem; } .checkGroup { display: flex; align-items: center; column-gap: 0.5rem; } .checkGroup label { display: inline-block; vertical-align: top; cursor: pointer; } .checkGroup input[type='checkbox'] { border: 1px solid #DEE2E6; width: 2rem; height: 2rem; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; border-radius: 0.25rem; } .checkGroup input[type='checkbox']:checked { border-color: #E4007F; /* 체크시 바깥선 색상 */ background: #E4007F; /* 체크시 안쪽 색상 */ } .checkGroup input[type="checkbox"]:checked:after { display: block; width: 1.8rem; height: 1.8rem; background: url("https://visitbusan.net/archive/images/icon/checkbox_check.svg") no-repeat; background-position: center; content: ""; } .checkGroup input[type='checkbox'][disabled] { border-color: #E1E1E1; /* 비활성시 바깥선 속성 */ background: #F5F5F5; /* 비활성시 안쪽 색상 */ } .checkGroup input[type='checkbox'][disabled]:checked { border-color: #cacaca; background: #cacaca; } .checkGroup input[type='checkbox'][disabled]:checked:after { border-color: #fff; /* 체크 아이콘 색상 */ } /* 키워드 */ .keyWordbox { display: flex; justify-content: space-between; flex-grow: 1; padding-right: 2rem; width: calc(100% - 58.5rem); } .keyWordbox input { padding: 1.5rem 1.5rem 1.5rem 2rem; border: none; width: 95%; font-size: 1.8rem; font-weight: 400; color: #444; } .keyWordbox input::placeholder { font-family: 'Pretendard'; font-size: 1.8rem; font-weight: 400; color: #ADB5BD; } .btnDetail { padding: 0 3.3rem 0 0; border-right: 1px solid #ddd; width: 14rem; height: 7.6rem; background: #fff url("https://visitbusan.net/archive/images/icon/alllst_icon_more_off.svg") no-repeat; background-position: right 2.5rem center; font-size: 1.6rem; font-weight: 400; color: #444; } .btnDetail.on { background: #fff url("https://visitbusan.net/archive/images/icon/alllst_icon_more_on.svg") no-repeat; background-position: right 2.5rem center; } /* 상세검색 */ .detailSearch { display: none; padding: 0 3rem; border-top: 1px solid #ddd; background: #FAFAFA; } .detailSearch.on { display: block; } .dataSearchTit { margin-right: 3rem; width: 10.2rem; font-size: 1.8rem; font-weight: 700; color: #222; } .dataSearchSelect { display: flex; width: 45%; column-gap: 1rem; } .dataSearchSelect .scSelect select { max-width: 26.9rem; } .detailSearch ul.cboxTags { grid-row-gap: 2.6rem; } .dascBtns { display: flex; justify-content: center; padding: 3rem 0; column-gap: 1rem; } @media all and (max-width: 1200px) { .formCheckbox { padding: 1.5rem 1.5rem; } .btnDetail { padding: 0 2.3rem 0 0; width: 12rem; height: 5.6rem; background-position: right 1.8rem center; } .keyWordbox {} .keyWordbox input {} } @media all and (max-width: 900px) { .shotSearch { display: inline-flex; flex-wrap: wrap; } .btnDetail.on { background-position: right 1.8rem center; } .formCheckbox { padding: 1.5rem 1.5rem; border-bottom: 1px solid #ddd; border-right: none; width: 100%; order: 1; } .keyWordbox { width: 100%; width: calc(100% - 12rem); order: 3; } .btnMoreOption { order: 2; } .dataSearchSelect { width: 100%; } .detailSearch { padding: 0 1.5rem; } } @media all and (max-width: 600px) { .dataSearchWrap { margin: 2rem 0; } .formCheckbox { padding: 1rem 1rem; column-gap: 0.8rem; } .checkGroup { column-gap: 0.3rem; } .checkGroup input[type='checkbox'] { width: 1.6rem; height: 1.6rem; } .checkGroup input[type="checkbox"]:checked:after { width: 1.4rem; height: 1.3rem; } .checkGroup label { font-size: 1.3rem; } .keyWordbox {} .keyWordbox input { padding: 1.2rem 1.2rem 1.2rem 2rem; font-size: 1.5rem; } .keyWordbox input::placeholder { font-size: 1.5rem; } .btnMoreOption { order: 2; } .btnDetail { padding: 0 2rem 0 0; width: 9.5rem; height: 4.5rem; background-position: right 1.1rem center; font-size: 1.3rem; } .btnDetail.on { background-position: right 1.2rem center; } .btndtSearch img { max-width: 2rem; } .detailSearch { padding: 0.6rem 1.5rem; } .detailSearch ul.cboxTags { grid-row-gap: 2rem; padding: 1.3rem 0; } .dascBtns { padding: 1rem 0 0.5rem 0; } } /* 검색결과 */ .resultTitWrap { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; } .resultTitWrap.mt { margin-top: 5%; } .textAll { display: flex; align-items: center; font-size: 1.8rem; font-weight: 700; color: #444; column-gap: 1rem; } .tAll { display: flex; align-items: center; column-gap: 1.2rem; } .tAll::after { display: inline-block; width: 1px; height: 14px; background: #ddd; content: ''; } .tNum span { font-weight: 400; color: #222; } .sorting>ul { display: flex; align-items: center; } .sorting>ul>li { display: flex; align-items: center; column-gap: 2rem; } .sorting>ul>li::after { display: inline-block; margin-right: 2rem; width: 1px; height: 14px; background: #ddd; content: ''; } .sorting>ul>li:last-child::after { display: none; } .sorting>ul>li>a { font-size: 1.8rem; font-weight: 400; color: #666; } .sorting>ul>li.on>a { color: #222; } .resultList { margin-bottom: 4rem; } .resultList>ul { display: flex; justify-content: left; flex-wrap: wrap; margin-bottom: -2%; column-gap: 1.8rem; } .resultList>ul>li { position: relative; width: calc(25% - 1.36rem); } .resultList>ul>li>a { display: block; } .rImg { display: block; border-bottom: 1px solid #efefef; overflow: hidden; height: 21.6rem; background: #fafafa; background-size: 50%; } .rImg img { width: 100%; height: 100%; object-fit: cover; } .rTxt { padding: 2rem 0; overflow: hidden; max-width: 100%; font-size: 1.5rem; font-weight: 400; color: #666; text-align: center; white-space: nowrap; text-overflow: ellipsis; } .rTypeLayer { position: absolute; top: 1rem; left: 1rem; } @media all and (max-width: 1200px) { .resultTitWrap { margin-bottom: 1.5rem; } .rTxt { padding: 1rem 0; } .rImg { height: 12.0rem; } } @media all and (max-width: 900px) { .resultList>ul>li { width: calc(50% - 0.9rem); } .textAll { font-size: 1.6rem; } .sorting>ul>li { column-gap: 1.5rem; } .sorting>ul>li>a { font-size: 1.6rem; } sorting>ul>li::after { margin-right: 1.5rem; } } @media all and (max-width: 600px) { .resultTitWrap { margin-bottom: 1rem; } .textAll { font-size: 1.5rem; } .sorting>ul>li>a { font-size: 1.5rem; } .sorting>ul>li { column-gap: 1rem; } .sorting>ul>li::after { margin-right: 1rem; } .resultList { margin-bottom: 2rem; } .resultList>ul { column-gap: 1.0rem; } .resultList>ul>li { width: calc(50% - 0.5rem); } .rImg { height: 11rem; } .rTxt { /* padding: 0.8rem 0 1.8rem 0; */ } .rTypeLayer { top: 0.5rem; left: 0.5rem; } .rTypeLayer img { max-width: 3rem; } } /* Grid (이미지) */ .gridList>ul { display: grid; grid-auto-flow: dense; grid-auto-rows: 200px; grid-gap: 10px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); } .gridList>ul>li { display: flex; align-items: center; justify-content: center; font-size: 2em; } .gridList>ul>li img { box-shadow: 0 2px 16px var(--shadow); width: 100%; height: 100%; object-fit: cover; } .gridList>ul>li:nth-child(odd) { grid-column: span 2; } .gridList>ul>li:nth-child(even) { grid-row: span 2; } .gridList>ul>li:nth-child(4n+0) { grid-column: span 2; grid-row: span 2; } .imgContainer { display: grid; padding-bottom: 4rem; max-width: 100%; grid-template-columns: repeat(4, 1fr); column-gap: 3rem; } .imgWrapper { overflow: hidden; position: relative; width: 100%; height: 100%; border-radius: 1.6rem; } .imgWrapper .text-hover { display: none; position: absolute; top: 50%; left: 50%; font-size: calc(11px + 0.7vw); color: #fff; transform: translate(-50%, -50%); } .imgWrapper>a:hover .text-hover { display: block; } .imgWrapper>a>img { width: 100%; height: 100%; -webkit-transition: .5s ease-in-out; transition: .5s ease-in-out; object-fit: cover; -webkit-transform: scale(1); transform: scale(1); } /* .imgWrapper>a>img:hover { -webkit-transform: scale(1.2); transform: scale(1.2); filter: brightness(0.5); } */ .column { display: flex; gap: 6.5em; flex-direction: column; } @media all and (max-width: 1200px) { .imgContainer { grid-template-columns: repeat(3, 1fr); } .column { gap: 4rem; } .column:last-child { display: none; } } @media all and (max-width: 900px) { .imgContainer { grid-template-columns: repeat(2, 1fr); } .column:nth-child(3) { display: none; } } @media all and (max-width: 600px) { .imgContainer { /* grid-template-columns: 1fr;*/ gap: 1.5rem; } .column { /* gap: 10rem; */ } .column:nth-child(3) { display: flex; } .column:last-child { display: flex; } .listInfo { display: flex; flex-direction: column; } .listInfo { font-size: 1.2rem; } .imgContainer>div.column:nth-child(3), .imgContainer>div.column:nth-child(4) { display: none; } } .listInfoWrap { padding: 2rem 0; } .listTit { display: -webkit-box; overflow: hidden; font-size: 1.5rem; font-weight: 400; color: #666; text-align: center; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .listTit .tag::before { display: inline-block; margin-right: 2px; content: '#'; } .listTit .tag { display: inline-block; padding: 2px 7px; background-color: #efefef; border-radius: 2px; } .listInfo { display: none; margin-top: 1.5rem; font-size: 1.4rem; font-weight: 500; color: #6F7685; } .infoTxt1 { margin-right: 1.5rem; } .btnListMore { text-align: center; } .btnListMore>a { padding: 1rem 2rem 1rem 4.4rem; border: 1px solid #ddd; background: url("https://visitbusan.net/archive/images/main/icon_plus.svg") no-repeat; background-position: left 2rem center; font-size: 1.6rem; font-weight: 400; color: #333; } @media all and (max-width: 1200px) { .listInfoWrap { padding: 1rem 0; } .listInfo { margin-top: 0.5rem; } .listTit { -webkit-line-clamp: 1; } .btnListMore>a { padding: 1rem 1.5rem 1rem 4rem; background-position: left 1.5rem center; font-size: 1.5rem; } } @media all and (max-width: 600px) { .listTit { font-size: 1.5rem; } .btnListMore>a { padding: 0.8rem 1.2rem 0.8rem 3rem; background-position: left 1.0rem center; background-size: 15%; font-size: 1.3rem; } } /* paging */ .paging.mt { margin-top: 6rem; } .pagenav { display: table; margin: 0 auto; } .control, .pages { float: left; } .pages { margin: 0 2rem; } .paging a { display: block; padding: 0 0.5rem; font-size: 1.6rem; line-height: 3.9rem; text-align: center; box-sizing: border-box; } .paging a.on { font-weight: 500; color: #E4007F; box-sizing: border-box; } .paging .p { display: block; margin-right: 5px; float: left; background-color: #fff; } .paging .p:last-child { margin-right: 0; } .control .p a { border: 1px solid #E2E2E2; width: 4rem; height: 4rem; } .paging .first { background-image: url("https://visitbusan.net/archive/images/icon/icon_paging_first.svg"); background-repeat: no-repeat; background-position: center center; background-size: 1.5rem 1.4rem; } .paging .last { background-image: url("https://visitbusan.net/archive/images/icon/icon_paging_last.svg"); background-repeat: no-repeat; background-position: center center; background-size: 1.5rem 1.4rem; } .paging .prev { background-image: url("https://visitbusan.net/archive/images/icon/icon_paging_prev.svg"); background-repeat: no-repeat; background-position: center center; background-size: 1.5rem 1.4rem; } .paging .next { background-image: url("https://visitbusan.net/archive/images/icon/icon_paging_next.svg"); background-repeat: no-repeat; background-position: center center; background-size: 1.5rem 1.4rem; } @media all and (max-width: 1200px) { .paging.mt { margin-top: 3rem; } } @media all and (max-width: 900px) {} @media all and (max-width: 600px) { .paging.mt { margin-top: 2rem; } .pages { margin: 0 1rem; } .control .p a { display: block; width: 2.5rem; height: 2.5rem; } .paging .first, .paging .last, .paging .prev, .paging .next { background-size: 1.2rem 1.1em; } .paging a { padding: 0 0.3rem; font-size: 1.3rem; line-height: 2.5rem; } } /* 자료검색(상세) */ .searchViewWrap { display: flex; align-items: flex-start; column-gap: 10rem; } .svLeftWrap { width: 60.8%; } .svRightWrap {} .viewContArea { display: block; margin-bottom: 5rem; overflow: hidden; position: relative; height: 55.6rem; background: #fafafa; } .viewContArea img { width: 100%; height: 100%; object-fit: contain; } .viewContArea .btn-zoom { display: flex; align-items: center; justify-content: center; border: 1px solid #ddd; position: absolute; bottom: 0; left: 0; width: 48px; height: 48px; background-color: #fff; border-radius: 5px; } .viewContArea .btn-vr { display: flex; align-items: center; justify-content: center; border: 1px solid #ddd; position: absolute; bottom: 0; left: 47px; width: 48px; height: 48px; background-color: #fff; border-radius: 5px; } .viewContArea video { width: 100%; height: 100%; object-fit: contain; } .vcSection { margin: 5rem 0; } .aricleText { font-size: 2rem; font-weight: 500; color: #111; } @media all and (max-width: 1300px) { .searchViewWrap { column-gap: 5rem; } } @media all and (max-width: 1200px) { .viewContArea { margin: 5rem 0; } .searchViewWrap { flex-wrap: nowrap; flex-direction: column-reverse; } .svLeftWrap { width: 100%; } } @media all and (max-width: 900px) { .viewContArea { margin: 2rem 0; height: 40rem; } .vcSection { margin: 2.5rem 0; } .lctInfoTxt { align-items: flex-start; } .lctAticle { width: 4rem; } .addressInfo { display: flex; flex-direction: column; } } @media all and (max-width: 600px) { .viewContArea { margin: 1rem 0; height: 23rem; } .aricleText { font-size: 1.8rem; } } /* 관련자료 슬라이드 */ .dataSlideWrap { margin-top: 1rem; position: relative; background-color: #fafafa; } .sliderBtn { display: flex; justify-content: flex-end; margin-top: -5rem; margin-bottom: 2rem; } .sliderBtn .prev { margin-right: -0.1rem; } #slider { width: 100%; } .slideItem { margin: 0 0.35rem; width: 100%; } .slideItem img { height: 100%; max-height: 15rem; } /* 주제, 키워드 */ .tagList>ul { display: flex; grid-row-gap: 2.0rem; align-items: center; justify-content: flex-start; flex-wrap: wrap; flex-direction: row; margin: 1.5rem 0; column-gap: 0.6rem; } .tagList>ul>li>a { padding: 1rem 1.5rem; background: #FAFAFA; font-size: 1.6rem; font-weight: 300; color: #101010; border-radius: 0.2rem; } .keywordList>ul { display: flex; grid-row-gap: 0.8rem; align-items: center; justify-content: flex-start; flex-wrap: wrap; flex-direction: row; margin: 1.5rem 0; column-gap: 0.6rem; } .keywordList>ul>li { display: inline-flex; } .keywordList>ul>li>a { padding: 0.5rem 1.5rem; background: #FAFAFA; font-size: 1.4rem; font-weight: 300; color: #101010; border-radius: 0.2rem; } @media all and (max-width: 600px) { .tagList>ul>li>a { padding: 0.5rem 1rem; font-size: 1.3rem; } .keywordList>ul>li>a { padding: 0.5rem 1rem; font-size: 1.3rem; } } /* 장소(지도) */ .infoTextWrap { margin: 1rem 0 0 0; padding: 2rem 0; border-top: 1px solid #ddd; } .lctInfoTxt { display: flex; align-items: center; column-gap: 1rem; } .lctAticle { font-size: 1.4rem; font-weight: 500; color: #909090; } .lctTxt { font-size: 1.4rem; font-weight: 400; color: #333; } .addressInfo { display: flex; align-items: flex-start; column-gap: 1rem; } .adrsContWrap { display: flex; align-items: center; flex-wrap: wrap; column-gap: 1rem; } .addressType { padding: 0.2rem 1.5rem; border: 1px solid #E1E3E1; font-size: 1.4rem; font-weight: 300; color: #101010; border-radius: 2rem; } .map { display: flex; align-items: center; justify-content: center; height: 26rem; background: #f2f2f2; font-size: 2rem; text-align: center; } @media all and (max-width: 600px) { .addressType { padding: 0.1rem 0.8rem; font-size: 1.3rem; } .map { height: 15rem; font-size: 1.5rem; } } /* 상세(텍스트) */ .selLang { margin-bottom: 4rem; } .selLang select { padding: 1.4rem; border: 1px solid #DEE2E6; width: 100%; max-width: 12.2rem; background: #fff url("https://visitbusan.net/archive/images/common/select_down.svg") no-repeat; background-position: right 1.5rem center; font-size: 1.6rem; font-weight: 400; color: #222; box-sizing: border-box; border-radius: 0.6rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .dataTypeInfo { display: flex; align-items: center; column-gap: 3rem; } .viewTit { font-size: 2rem; font-weight: 400; color: #111; } .typeCate>ul { display: flex; align-items: center; } .typeCate>ul>li { display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: #333; } .typeCate>ul>li::after { display: inline-flex; align-items: center; justify-content: flex-start; flex-direction: row; margin: 0 0.5rem; width: 1.9rem; height: 1.9rem; background: url("https://visitbusan.net/archive/images/common/navi_arrow.svg") no-repeat; background-size: contain; content: ""; } .typeCate>ul>li:last-child::after { display: none; } .viewTitleBox { margin: 2rem 0; font-size: 4.8rem; font-weight: 700; color: #111; } #description { position: relative; } #description .text { display: block; position: relative; font-size: 1.6rem; font-weight: 300; line-height: 2.8rem; color: #666; } #description .showMore { margin-top: 1rem; position: relative; font-size: 1.6rem; color: #222; cursor: pointer; } #description .showMore:hover { color: #E4007F; } #description .showMoreHeight { display: -webkit-box; overflow: hidden; height: 5rem; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .contLineType { margin: 4rem 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } .contLineType>ul>li { display: flex; align-items: center; padding: 1.8rem 0; border-bottom: 1px solid #ddd; column-gap: 3rem; } .contLineType>ul>li:last-child { border-bottom: none; } .lineAticle { min-width: 6rem; font-size: 1.6rem; font-weight: 400; color: #222; } .lineCont>ul { display: flex; } .viewItemWrap { margin-bottom: 4rem; } .lineCont { font-size: 1.6rem; font-weight: 400; color: #666; } .lineCont>ul>li { display: flex; align-items: center; justify-content: center; } .lineCont>ul>li::after { display: inline-flex; align-items: center; justify-content: flex-start; flex-direction: row; margin: 0 0.5rem; width: 1.9rem; height: 1.9rem; background: url("https://visitbusan.net/archive/images/common/navi_arrow.svg") no-repeat; background-size: contain; content: ""; } .lineCont>ul>li:last-child::after { display: none; } .lineBox { margin-top: 2rem; padding: 2rem 4rem; border: 1px solid #ddd; } .contInfoList { display: flex; align-items: flex-start; flex-direction: column; } .contInfoList>li { display: flex; font-size: 1.4rem; font-weight: 400; color: #333; } .contInfoList>li .cateName { min-width: 8rem; font-weight: 700; color: #222; } .ggnrTxt { font-size: 1.4rem; font-weight: 400; color: #222; } .ggnrTxt span { font-weight: 700; } .ggurBox { display: flex; column-gap: 2rem; } .ggnrTxt { width: calc(100% - 11rem); word-break: keep-all; } .ggnrTypeImg { width: 11rem; } .ggnrTypeImg img { width: 100%; } .btn_group { display: flex; gap: 5px; } .btnGgnrDown { padding: 1.4rem 2rem 1.4rem 4rem; background: #111 url("https://visitbusan.net/archive/images/icon/icon_down.svg") no-repeat; background-position: left 1.5rem center; font-size: calc(12px + 0.2vw); color: #fff; border-radius: 0.5rem; } .btnSearchIist { padding: 1.4rem 2rem 1.4rem 4rem; background: #34353A url("https://visitbusan.net/archive/images/icon/icon_list.svg") no-repeat; background-position: left 1.5rem center; font-size: calc(12px + 0.2vw); color: #fff; border-radius: 0.5rem; } @media all and (max-width: 1200px) { .selLang { margin-bottom: 2rem; } .selLang select { padding: 1.2rem; } .viewTit { font-size: 1.8rem; } .viewTitleBox { margin: 1.5rem 0; font-size: 4.3rem; } } @media all and (max-width: 900px) { .viewTit { font-size: 1.6rem; } .viewTitleBox { font-size: 4rem; } .contLineType { margin: 2.5rem 0; } } @media all and (max-width: 600px) { .selLang { margin-bottom: 1rem; } .selLang select { padding: 1rem; max-width: 10rem; background-position: right 1.0rem center; background-size: 10%; font-size: 1.3rem; } .dataTypeInfo { column-gap: 1.5rem; } .viewTit { font-size: 1.5rem; } .typeCate>ul>li { font-size: 1.5rem; } .viewTitleBox { margin: 1.2rem 0; font-size: 2.8rem; } #description .text { font-size: 1.4rem; line-height: 2.3rem; } #description .showMoreHeight { height: 4.5rem; } #description .showMore { margin-top: 0.5rem; font-size: 1.3rem; } .contLineType { margin: 2rem 0; } .contLineType>ul>li { align-items: flex-start; flex-direction: column; padding: 1.0rem 0; column-gap: 0; } .lineAticle { min-width: auto; font-size: 1.5rem; } .lineCont { font-size: 1.4rem; } .lineBox { margin-top: 1rem; } .lineBox { margin-top: 1rem; padding: 1.2rem; } .contInfoList>li { font-size: 1.3rem; } .viewItemWrap { margin-bottom: 1.5rem; } .ggurBox { flex-direction: column; } .ggnrTxt { margin-bottom: 0.5rem; width: 100%; } .btnGgnrDown { padding: 1rem 1.5rem 1rem 3.5rem; background-position: left 1.0rem center; font-size: 1.3rem; } .btnSearchIist { padding: 1rem 1.5rem 1rem 3.5rem; background-position: left 1.0rem center; font-size: 1.3rem; } } /* Modal */ .modal-overlay { display: none; position: fixed; top: 0; left: 0; z-index: 10001; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); } .modalCon { display: none; position: fixed; top: 50%; left: 50%; z-index: 10002; width: 80rem; max-width: 80%; background: #fff; border-radius: 1.5rem; transform: translate(-50%, -50%); } .modalCon .con { padding: 4rem; overflow: hidden; font-size: 0.9375rem; line-height: 1.3; } .downTable.colTable tbody th { width: 18%; } .modalCon .modalClose { display: block; } .modalBtnWrap { display: flex; justify-content: center; column-gap: 1rem; } .modalBtnWrap.mt { margin-top: 4%; } .modalBtnWrap.mb { margin-bottom: 4%; } .modalBtn { padding: 1.2rem 0; width: 12.6rem; font-size: 1.6rem; font-weight: 400; border-radius: 0.6rem; } .modalBtn.modalClose { border: 1px solid #ddd; color: #666; } .modalBtn.btnDownload { border: 1px solid #54595E; background: #54595E; color: #fff; } .modalNuriInfo { display: flex; justify-content: space-between; column-gap: 3rem; } .ggnrTit { min-width: 8rem; font-size: 1.4rem; font-weight: 700; color: #222; } .modalNuriInfo .ggnrTxt { width: calc(100% - 25rem); color: #444; letter-spacing: 0; } .modalCon.img-zoom { width: 100%; max-width: unset; height: 100%; max-height: unset; background: unset; border-radius: unset; } .modalCon.img-zoom .con-img-zoom { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } .modalCon.img-zoom img { max-width: 85vw; max-height: 84vh; } .modalCon.img-zoom .modalBtn.modalClose { display: flex; align-items: center; justify-content: center; padding: unset; position: absolute; top: 20px; right: 20px; z-index: 1003; width: 40px; height: 40px; } @media all and (max-width: 1200px) { .modalCon .con { padding: 3rem; } } @media all and (max-width: 900px) { .downTable.colTable tbody th { width: 24%; } .modalBtn { padding: 1rem 0; font-size: 1.5rem; } .modalBtnWrap { margin: 2rem 0; } .modalNuriInfo { column-gap: 1.5rem; } .modalNuriInfo .ggnrTxt { width: calc(100% - 22rem); } } @media all and (max-width: 600px) { .modalCon .con { padding: 2rem; } .modalCon { overflow-y: auto; max-width: 90%; max-height: 90%; } .downTable.colTable tbody th { width: 100%; text-align: left; } .modalBtn { width: 10rem; font-size: 1.4rem; } .modalNuriInfo { flex-direction: column; } .modalNuriInfo .ggnrTit { margin-bottom: 0.5rem; } .modalNuriInfo .ggnrTxt { width: 100%; } .ggnrTypeImg { width: 100%; text-align: right; } .ggnrTypeImg img { max-width: 11rem; } } /* 아코디언 */ .Accordion { margin: 0; padding: 0; border-bottom: 1px solid #ccc; } .Accordion h3 { margin: 0; padding: 0; } .Accordion-trigger { display: flex; align-items: center; margin: 0; padding: 20px 0; border-top: 1px solid #ccc; outline: none; position: relative; width: 100%; background: none; text-align: left; } .Accordion-trigger:focus-visible { border: 2px solid #333; } .Accordion-trigger:before { display: block; margin-right: 10px; width: 37px; height: 37px; background-image: url("https://visitbusan.net/archive/images/icon/icon-q.svg"); background-repeat: no-repeat; background-position: center center; content: ''; } button { border-style: none; } .Accordion button::-moz-focus-inner { border: 0; } .Accordion-title { display: flex; outline: none; width: calc(100% - 100px); font-family: 'Pretendard'; font-size: 2.3rem; font-weight: 500; color: #333; pointer-events: none; border-radius: 5px; } .Accordion-icon { position: absolute; top: calc(50% - 18px); right: 0; width: 36px; height: 36px; background-color: #333; background-image: url("https://visitbusan.net/archive/images/icon/icon_plus_w.svg"); background-repeat: no-repeat; background-position: center center; color: #fff; pointer-events: none; } .Accordion-trigger[aria-expanded="true"] .Accordion-icon { background-image: url("https://visitbusan.net/archive/images/icon/icon_mius_w.svg"); } .Accordion-panel { display: flex; margin: 0; padding: 40px 50px; font-size: 1.7rem; font-weight: normal; line-height: 30px; color: #666; } .Accordion-panel:before { display: block; margin-right: 20px; width: 37px; height: 37px; background-image: url("https://visitbusan.net/archive/images/icon/icon-a.svg"); background-repeat: no-repeat; background-position: center center; content: ''; } .Accordion-panel>div { width: calc(100% - 65px); font-size: calc(12px + 0.5vw); color: #333; } .Accordion-panel[hidden] { display: none; } .Accordion-panel:not(hidden) { border-top: 1px solid #ddd; background-color: #fafafa; } @media all and (max-width: 1410px) { .Accordion-title { font-size: calc(12px + 0.6vw); } .Accordion-panel { padding: 3% 3%; font-size: calc(12px + 0.5vw); } .Accordion-trigger { padding: 1% 0; } } @media all and (max-width: 900px) { .Accordion-title { font-size: 1.6rem; } .Accordion-panel { font-size: 1.6rem; line-height: 28px; } } @media all and (max-width: 600px) { .Accordion-trigger { padding: 1.5% 0; } .Accordion-title { width: calc(100% - 60px); font-size: 1.4rem; } .Accordion-trigger:before { margin-right: 5px; width: 25px; height: 25px; background-size: 2.0rem; } .Accordion-panel { padding: 3%; font-size: 1.4rem; line-height: 22px; } .Accordion-icon { top: calc(50% - 12.5px); right: 0; width: 25px; height: 25px; background-size: 35%; } .Accordion-panel:before { margin-right: 10px; width: 25px; height: 25px; background-size: 20px; } .Accordion-panel>div { width: calc(100% - 44px); font-size: 1.4rem; } } /* 서브페이지 텍스트기본 */ .g-description-area {} .g-conts-area.mt { margin-top: 4%; } .g-conts-area.mb { margin-bottom: 4%; } .g-conts-area .sec-tit { margin-bottom: 2%; font-size: 3.0rem; font-weight: 700; color: #1e2124; } .g-desc-box { display: flex; gap: 1vw; align-items: flex-start; justify-content: flex-start; flex-direction: column; } .g-conts-area .g-desc { font-size: 1.7rem; /* color: #1e2124; */ } .g-conts-area .con-tit { margin-bottom: 2%; font-size: 2.4rem; font-weight: 700; color: #1e2124; } .g-img-wrap { display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column; margin-top: 2.4rem; overflow: hidden; background-color: #fff; border-radius: 1.2rem; } .krds-info-list { display: flex; gap: 1vw; flex-direction: column; margin-top: 0; } .krds-info-list>li { padding-left: 3.2rem; position: relative; font-size: 1.7rem; color: #464c53; } .krds-info-list.ordered>li .num { position: absolute; top: 2px; left: 0; } .krds-info-list>li>.krds-info-list { gap: 1vw; margin-top: 1vw; } .krds-info-list>li>.krds-info-list>li { padding-left: 2.4rem; font-size: 1.7rem; color: #464c53; } .krds-info-list.dash>li::before { content: "-"; } .krds-info-list>li::before { position: absolute; top: 0; left: 0; } .krds-info-list>li>.krds-info-list>li>.krds-info-list { margin-top: 1vw; } .krds-info-list>li>.krds-info-list>li>.krds-info-list>li { padding-left: 2rem; font-size: 1.5rem; color: #464c53; } .krds-info-list.hollow>li::before { border: 0.1rem solid #464c53; top: 0.95rem; left: 0.8rem; width: 0.4rem; height: 0.4rem; content: ""; border-radius: 100rem; } .g-banner-area { padding: 3% 4%; background: #faf7f9; border-radius: 1.2rem; } .g-banner-area.mt { margin-top: 4%; } .g-banner-area.mb { margin-bottom: 4%; } .g-description-area>* { width: 100%; } .g-banner-area .g-banner-inner { position: relative; /* padding-right: 21.6rem; */ } .g-banner-area .tit { margin-bottom: 2%; font-size: 2.4rem; color: #1e2124; } .krds-info-list>li { padding-left: 2rem; position: relative; font-size: 1.7rem; } .krds-info-list.decimal>li::before { top: 1rem; left: 0.8rem; width: 0.6rem; height: 0.6rem; background-color: #464c53; content: ""; content: ""; border-radius: 100rem; } .krds-btn.link.medium { padding: 0 0.2rem; font-size: 1.7rem; } .underline { text-decoration: underline; text-underline-offset: 0.3rem; } .g-info-box { padding: 2.4%; position: relative; background-color: #faf7f9; border-radius: 1.2rem; } .g-info-box.mb { margin-bottom: 4%; } .g-info-box.mt { margin-top: 4%; } .g-conts-area>.g-conts-area+.g-conts-area { margin-top: 4%; } .g-wrap .g-conts-area .g-conts-area.sp-sm { margin-top: 4rem !important; } .krds-btn.link { color: #E4007F; } @media all and (max-width: 1200px) { .g-conts-area .sec-tit { font-size: 3.0rem; } } @media all and (max-width: 900px) {} @media all and (max-width: 600px) { .g-conts-area .sec-tit { font-size: 2.0rem; } .g-conts-area .con-tit { font-size: 1.8rem; } .g-banner-area .tit { font-size: 1.8rem; } .g-conts-area .g-desc { font-size: 1.4rem; } .krds-info-list>li>.krds-info-list>li, .krds-info-list>li { font-size: 1.4rem; } .krds-btn.link.medium { font-size: 1.4rem; } } /* 자료현황 */ .situation_list {} .situation_list ul { display: flex; gap: 10px; flex-wrap: wrap; } .situation_list ul li { display: inline-table; padding: 1.5% 2%; border: 1px solid #ddd; width: calc((100% - 40px)/5); border-radius: 10px; } .situation_list ul li span { font-size: calc(11px + 0.5vw); } .situation_list .tit { display: flex; align-items: center; justify-content: space-between; font-weight: 600; } .situation_list .tit::after { display: inline-block; width: 20px; height: 20px; background-color: #E4007F; content: ''; border-radius: 20px; } .situation_list .con {} .situation_list .num { font-size: calc(11px + 1vw); font-weight: 700; } .situation_list .unit {} @media all and (max-width: 1200px) { .situation_list ul {} .situation_list ul li { width: calc((100% - 20px)/3); } } @media all and (max-width: 900px) { .situation_list ul li { width: calc((100% - 10px)/2); } } @media all and (max-width: 600px) {} /* 소개 */ .g-introduction-area { margin-bottom: -12%; padding-bottom: 15vw; } .g-introduction-area::after { display: block; margin-top: -4%; padding-top: 15vw; position: absolute; left: 0; z-index: -1; width: 100%; background-image: url("https://visitbusan.net/archive/images/contents/introduction_bg2.png"); background-repeat: no-repeat; background-position: center center; content: ''; } .text-info-bg {} .text-info-bg::before { display: block; padding-top: 23vw; position: absolute; left: 0; z-index: 1; width: 100%; background-image: url("https://visitbusan.net/archive/images/contents/introduction_bg.png"); background-position: center center; content: ''; } .text-info-bg div { padding-top: 23vw; position: relative; } .text-info-bg p { padding: 2.5% 4%; position: absolute; right: 0; bottom: 0; z-index: 2; width: 70%; background-color: #fff; font-size: 20px; font-size: calc(11px + 0.45vw); } .text-title-big { padding: 8% 0; } .text-title-big.border-bottom { margin-bottom: 7%; padding-bottom: 7%; border-bottom: 1px solid #ddd; } .text-title-big p { font-size: 66px; font-size: calc(11px + 2.9vw); font-weight: 300; color: #222; } .text-title-big strong { font-weight: 700; } .Description-List { display: flex; flex-direction: column; row-gap: 3vw; } .Description-List dl { display: flex; align-items: center; } .Description-List dt { display: flex; align-items: center; flex-shrink: 0; margin-right: 20px; width: 29%; font-size: 3.2rem; font-size: calc(11px + 1.1vw); font-weight: 700; color: #222; } .Description-List dt::before { display: inline-block; margin-right: 1vw; width: 0.5vw; height: 0.5vw; background-color: #101010; content: ''; border-radius: 1vw; } .Description-List dd { flex-shrink: 1; font-size: 1.8rem; font-size: calc(11px + 0.35vw); } @media all and (max-width: 600px) { .g-introduction-area::after { background-size: contain; } .text-info-bg::before { padding-top: 40vw; background-size: cover; } .text-info-bg div { padding-top: 40vw; } .text-info-bg p { margin-top: -11%; padding-bottom: 0; position: relative; width: 100%; } } /* 저작권 안내 */ .box-info-list { display: flex; gap: 1%; justify-content: space-between; } .box-info-list .tit { display: block; padding-bottom: 8%; font-size: calc(11px + 0.7vw); color: #222; } .box-info-list ul { gap: 0.5vw; } .box-info-list>li { padding: 3% 4%; border: 1px solid #ddd; border-radius: 10px; } @media all and (max-width: 1200px) { .box-info-list .tit { padding-bottom: 4%; font-size: calc(11px + 1.2vw); } } @media all and (max-width: 900px) {} @media all and (max-width: 600px) { .box-info-list .tit { font-size: calc(11px + 2vw); } } .row-list {} .row-list-4>li { width: 24.25%; } @media all and (max-width: 1200px) { .row-list-4 { gap: 1vw; flex-wrap: wrap; } .row-list-4>li { width: 49.4%; } } @media all and (max-width: 900px) {} @media all and (max-width: 600px) { .row-list-4 { gap: 2vw; } .row-list-4>li { width: 100%; } } .icon-license>li::after { display: block; margin-top: 8%; padding-top: 20%; width: 100%; background-repeat: no-repeat; background-size: contain; content: ''; } .icon-license>li:nth-child(1)::after { background-image: url("https://visitbusan.net/archive/images/img/number1.jpg"); } .icon-license>li:nth-child(2)::after { background-image: url("https://visitbusan.net/archive/images/img/number2.jpg"); } .icon-license>li:nth-child(3)::after { background-image: url("https://visitbusan.net/archive/images/img/number3.jpg"); } .icon-license>li:nth-child(4)::after { background-image: url("https://visitbusan.net/archive/images/img/number4.jpg"); } @media all and (max-width: 1200px) { .icon-license>li::after { margin-top: 4%; padding-top: 11%; } } @media all and (max-width: 900px) {} @media all and (max-width: 600px) {} /*** 통합검색 ***/ /* 자료검색(목록) */ .Integrated .dataSearchWrap { margin: 3rem 0; border: unset; } .Integrated .shotSearch { display: flex; align-items: center; justify-content: center; } @media (max-width:1200px) {} @media (max-width:900px) {} @media (max-width:600px) { .Integrated .dataSearchWrap { margin: 2rem 0; } } /* 키워드 */ .Integrated .keyWordbox { display: flex; align-items: center; justify-content: space-between; flex-grow: 1; padding-right: unset; border-bottom: 2px solid #000; width: 100%; max-width: 80rem; } .Integrated .keyWordbox input { padding: unset; border: none; width: 100%; height: 8rem; font-size: 3rem; font-weight: 400; color: #000; } .Integrated .keyWordbox input::placeholder { font-family: 'Pretendard'; font-size: 3rem; font-weight: 400; color: #666; } .Integrated .keyWordbox .btndtSearch { width: 5.5rem; height: 5.5rem; background-color: #101010; border-radius: 1rem; } @media (max-width:1200px) { .Integrated .keyWordbox {} .Integrated .keyWordbox input { height: 7rem; font-size: 2rem; } .Integrated .keyWordbox input::placeholder { font-size: 2rem; } .Integrated .keyWordbox .btndtSearch { width: 5rem; height: 5rem; background-color: #101010; border-radius: 1rem; } } @media (max-width:600px) { .Integrated .keyWordbox {} .Integrated .keyWordbox input { height: 5rem; font-size: 1.6rem; } .Integrated .keyWordbox input::placeholder { font-size: 1.6rem; } .Integrated .keyWordbox .btndtSearch { width: 4rem; height: 4rem; background-color: #101010; border-radius: 0.6rem; } } .Integrated .search-word-page { margin: 0 auto; margin-top: 3rem; max-width: 800px; } .Integrated .search-word-page>div { display: flex; justify-content: center; column-gap: 2rem; } .Integrated .search-word-page .tit { flex-shrink: 0; font-size: 2rem; font-weight: 500; color: #111; } .Integrated .search-word-page .search-tag { display: flex; flex-wrap: wrap; column-gap: 0.6rem; row-gap: 0.6rem; } .Integrated .search-word-page .search-tag span { display: flex; align-items: center; line-height: unset; } .Integrated .search-word-page .search-tag a { display: flex; padding: 0.5rem 1rem; background-color: #fafafa; font-size: 1.4rem; line-height: unset; } .Integrated .search-word-page .search-tag a::before { display: inline-block; content: '#'; } @media (max-width:1200px) { .Integrated .search-word-page .tit { font-size: 1.6rem; } } @media (max-width:600px) { .Integrated .search-word-page { margin-top: 2rem; } .Integrated .search-word-page>div { display: inline-block; } .Integrated .search-word-page .tit { display: inline-block; margin-right: 1rem; font-size: 1.4rem; } .Integrated .search-word-page .search-tag { display: contents; } .Integrated .search-word-page .search-tag span { display: inline-block; margin-right: 0.2rem; margin-bottom: 0.5rem; } .Integrated .search-word-page .search-tag span:last-child { margin-right: unset; margin-bottom: unset; } .Integrated .search-word-page .search-tag a { padding: 0.2rem 0.5rem; background-color: #fafafa; font-size: 1.3rem; line-height: unset; } } /* 검색어 */ .Integrated .search_term { margin-top: 3rem; } .Integrated .search_term p { font-size: 3rem; font-weight: 400; color: #666; text-align: center; } .Integrated .search_term strong { font-weight: 500; color: #222; } @media (max-width:1200px) { .Integrated .search_term { margin-top: 2rem; } .Integrated .search_term p { font-size: 2.5rem; } } @media (max-width:900px) { .Integrated .search_term p { font-size: 2rem; } } @media (max-width:600px) { .Integrated .search_term { margin-top: 1rem; } } /* 검색결과 탭 */ .Integrated ul.tabs { display: grid; margin: 0px; padding: 0px; font-size: 0; list-style: none; column-gap: 2rem; grid-template-columns: repeat(5, 1fr); column-gap: 1rem; } .Integrated ul.tabs.mt { margin-top: 6%; } .Integrated ul.tabs.mb { margin-bottom: 5%; } .Integrated ul.tabs:after { display: block; clear: both; content: ''; } .Integrated ul.tabs li { display: block; margin-left: -1px; padding: 10px 10px; border: 1px solid #ddd; background: none; background-color: #fff; font-size: 1.8rem; font-weight: 500; color: #666; text-align: center; cursor: pointer; box-sizing: border-box; border-radius: 1rem; } .Integrated ul.tabs.tab7 li {} .Integrated ul.tabs li:first-child { margin-left: 0; border-left: 1px solid #ddd; } .Integrated ul.tabs li:first-child.current {} .Integrated ul.tabs li.current { position: relative; color: #000; } .Integrated ul.tabs li.current:before { display: block; border: 1px solid #000; position: absolute; top: -1px; left: -1px; width: calc(100% + 2px); height: calc(100% + 2px); content: ''; border-radius: 1rem; } .Integrated .tab-content { display: none; } .Integrated .tab-content.current { display: inherit; } @media all and (max-width:1200px) { .Integrated ul.tabs.tab7 li { padding: 10px 5px; font-size: calc(12px + 0.5vw); } } @media all and (max-width:900px) { .Integrated ul.tabs.tab7 {} .Integrated ul.tabs.tab7 li { margin-bottom: -1px; } } @media all and (max-width:600px) { .Integrated ul.tabs.tab7 { column-gap: 0.5rem; } .Integrated ul.tabs.tab7 li { padding: 5px 5px; } } /* 더보기 */ .resultBtn { border: 1px solid #ddd; border-radius: 1rem; } .resultBtn a { display: flex; align-items: center; padding: 1rem 1.6rem; font-size: 1.5rem; column-gap: 0.5rem; } .resultBtn a::after { display: inline-block; width: 1.7rem; height: 1.7rem; background: #fff url(https://visitbusan.net/archive/images/icon/alllst_icon_more_off.svg) no-repeat; background-position: center center; content: ''; } @media (max-width:1200px) { .resultBtn a { padding: 0.5rem 1rem; } } @media (max-width:900px) { .resultBtn a { font-size: 1.4rem; } } @media (max-width:600px) { .resultBtn a { font-size: 1.3rem; column-gap: 0.1rem; } .resultBtn a::after { background-size: 1rem; } }