@charset "utf-8"; /* mainVisual */ .visualArea { position: relative; } .vImg::before { display: block; padding-top: 10%; position: absolute; top: 0; width: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%); content: ''; } .vImg::after { display: block; padding-top: 10%; position: absolute; bottom: 0; width: 100%; background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%); content: ''; } .vCont { position: absolute; max-width: 35%; left: calc(((100% - 1720px) / 2) - 0px); bottom: 4.4rem; } .vImgInfo { display: flex; justify-content: flex-start; align-items: center; gap: 1rem; } .vTitle { width: 100%; font-size: 3.2rem; font-weight: 400; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .btn_vMore { width: 10.6rem; flex-shrink: 0; } .btn_vMore>a { font-size: 1.2rem; font-weight: 300; color: #fff; border: 1px solid rgba(225, 225, 225, 0.3); padding: 0.7rem 1.2rem; } .mvBtns { position: absolute; bottom: 4rem; right: calc(((100% - 1720px) / 2) - 0px); display: flex; justify-content: center; align-items: center; } .mvBtns>div { display: inline-block; } .slideNum { font-size: 1.5rem; margin-right: 2rem; } .slideNum { color: #fff; } .slideNumber { font-weight: 700; } .slideNumber::after { content: ''; display: inline-block; width: 0.1rem; height: 0.8rem; vertical-align: middle; background: #fff; margin: 0 1rem 0 1.5rem; opacity: 0.5; } .totalNumber { opacity: 0.5; } .mvBtnBox { border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 3rem; padding-left: 1.2rem; } .mvBtns .prev, .mvBtns .next { padding: 1rem 1.2rem; } .txtBlind { font-size: 0; } .mvBtns .btnPlay { width: 4rem; height: 4rem; vertical-align: middle; background: url("https://visitbusan.net/archive/images/main/btn_stop_round.svg")no-repeat; background-position: center; } .mvBtns .btnPlay.on { background: url("https://visitbusan.net/archive/images/main/btn_play_round.svg")no-repeat; background-position: center; } .mainVisual { position: relative; margin-bottom: 5rem; } .mainSlide img { width: 100%; } .mainSlide.slick-dotted.slick-slider { margin-bottom: 0; } .mainSlide .slick-dots { position: absolute; bottom: 5.3rem; right: calc(((100% - 1300px) / 2) - 0px); display: flex; align-items: center; justify-content: center; max-width: 60rem; } .mainSlide .slick-dots li { width: 100%; height: auto; margin: 0; } .mainSlide .slick-dots li button { width: 100%; height: auto; padding: 5px 0px; } .mainSlide .slick-dots li button:before { width: 100%; height: 1px; content: ''; background: rgba(255, 255, 255, 0.2); position: static; top: auto; left: auto; display: flex; opacity: 1; } .mainSlide .slick-dots li.slick-active button:before { opacity: 1; background-color: #fff; } @media all and (max-width:1720px) { .mvBtns { right: 3%; } .vCont { left: 2%; } .mainSlide .slick-dots { max-width: 300px; bottom: 5.3rem; right: 18%; } } @media all and (max-width: 1300px) { .vCont { max-width: 70%; } .mainSlide .slick-dots { display: none !important; } } @media all and (max-width: 1200px) { .mainVisual { margin-bottom: 4rem; } .vTitle { font-size: 2.8rem; } .vCont { bottom: 3.1rem; } } @media all and (max-width: 900px) { .slick-slide img { max-width: 200%; } .mainSlide img { width: 150%; } .mvBtns { right: calc(50% - 10rem); bottom: 2.5rem; } .vTitle { font-size: 2.2rem; } .vCont { bottom: 8rem; } } @media all and (max-width: 600px) { .mainVisual { margin-bottom: 2.5rem; } .vCont { /* display: none; */ max-width: 90%; bottom: 2rem; left: 2rem; } .vTitle { font-size: 1.8rem; } .mvBtns { display: none; } .mainSlide img { width: 180%; } } /* 최신자료 */ .mainTitArea { /* display: flex; justify-content: space-between;*/ } .mainTit { font-size: 3.6rem; font-weight: 700; color: #111; } .dataTab { position: relative; } @media all and (max-width: 1200px) { .mainTit { font-size: 3.0rem; } } @media all and (max-width: 600px) { .mainTit { font-size: 2.2rem; } } /* Tab(최신자료) */ .tab.dataList { /* height: 160px; */ } .tab.dataList>ul { position: relative; font-weight: 600; font-size: 1.8rem; display: flex; justify-content: flex-end; margin-top: -5rem; } .tab.dataList>ul:after { content: ""; display: block; clear: both } .tab.dataList>ul>li { float: left; margin-right: 2rem; } .tab.dataList>ul>li::before { content: ''; display: inline-block; width: 0.5rem; height: 0.5rem; vertical-align: middle; border-radius: 0.25rem; background: #111; margin-right: 1rem; } .tab.dataList>ul>li:last-child { margin-right: 0; } .tab.dataList>ul>li>a { position: relative; } .tab.dataList>ul>li>a span { display: inline-block; font-size: 1.8rem; color: #111; font-weight: 400; } .tabDataCont { width: 100%; position: absolute; top: 8rem; left: 0; list-style: none; border: 0; margin: 0; padding: 0; zoom: 1; } .tabDataCont:after { content: ""; display: block; clear: both } .tabDataCont>ul>li { display: inline-block; width: calc(33.3% - 16.6px); float: left; border: 1px solid #d4d0f5; border-radius: 30px; padding: 4rem; margin-right: 25px; } .tabDataCont>ul>li:last-child { margin-right: 0; } .tab.dataList>ul>li.active>a {} .tab.dataList>ul>li.active>a::after {} .tab.dataList>ul>li.active>a span { position: relative; text-decoration: underline; } @media all and (max-width: 1200px) { .tab.dataList>ul>li>a span { font-size: 1.6rem; } .tab.dataList>ul { margin-top: -4.0rem; } .tabDataCont { top: 6rem; } } @media all and (max-width: 600px) { .tab.dataList>ul { margin-top: -3.2rem; } .tab.dataList>ul>li { margin-right: 1rem; } .tabDataCont { top: 4.5rem; } .tab.dataList>ul>li>a span { font-size: 1.5rem; } } /* Grid 최신자료(이미지) */ .gridList>ul { display: grid; grid-gap: 10px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); grid-auto-rows: 200px; grid-auto-flow: dense; } .gridList>ul>li { display: flex; justify-content: center; align-items: center; font-size: 2em; } .gridList>ul>li img { width: 100%; height: 100%; object-fit: cover; box-shadow: 0 2px 16px var(--shadow); } .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; grid-template-columns: repeat(4, 1fr); max-width: 100%; column-gap: 3rem; padding-bottom: 10rem; } .imgWrapper { position: relative; width: 100%; height: 100%; border-radius: 1.6rem; overflow: hidden; } .imgWrapper .text-hover { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #fff; display: none; font-size: calc(11px + 0.7vw); } .imgWrapper>a:hover .text-hover { display: block; } .imgWrapper>a>img { width: 100%; height: 100%; object-fit: cover; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .5s ease-in-out; transition: .5s ease-in-out; } .imgWrapper>a>img:hover { -webkit-transform: scale(1.2); transform: scale(1.2); filter: brightness(0.5); } .column { display: flex; flex-direction: column; gap: 4.5em; } @media all and (max-width: 1200px) { .imgContainer { grid-template-columns: repeat(3, 1fr); } .column { gap: 8rem; } .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 { font-size: 1.6rem; color: #2B2F36; font-weight: 500; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .listTit .tag::before { content: '#'; display: inline-block; margin-right: 2px; } .listTit .tag { display: inline-block; background-color: #efefef; padding: 2px 7px; border-radius: 2px; } .listInfo { font-size: 1.4rem; color: #6F7685; font-weight: 500; margin-top: 1.5rem; display: none; } .infoTxt1 { margin-right: 1.5rem; } .btnListMore { text-align: center; } .btnListMore>a { color: #333; font-size: 1.6rem; font-weight: 400; background: url("https://visitbusan.net/archive/images/main/icon_plus.svg") no-repeat; background-position: left 2rem center; border: 1px solid #ddd; padding: 1rem 2rem 1rem 4.4rem; } @media all and (max-width: 1200px) { .listInfoWrap { padding: 1rem 0; } .listInfo { margin-top: 0.5rem; } .listTit { -webkit-line-clamp: 1; } .btnListMore>a { font-size: 1.5rem; background-position: left 1.5rem center; padding: 1rem 1.5rem 1rem 4rem; } } @media all and (max-width: 600px) { .listTit { font-size: 1.5rem; } .btnListMore>a { font-size: 1.3rem; background-position: left 1.0rem center; background-size: 15%; padding: 0.8rem 1.2rem 0.8rem 3rem; } } /* 최신자료(동영상) */ .videoList>ul { display: flex; flex-wrap: wrap; column-gap: 1.5rem; } .videoList>ul>li { width: calc(25% - 1.15rem); } .videoList>ul>li>a { display: block; } .videoImg { border-radius: 1rem; overflow: hidden; } .videoImg img { width: 100%; height: 21.5rem; object-fit: cover; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .5s ease-in-out; transition: .5s ease-in-out; } .videoImg img:hover { -webkit-transform: scale(1.2); transform: scale(1.2); } .videoTit { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.6rem; color: #2B2F36; font-weight: 500; margin: 1.2rem 0 2.5rem 0; } @media all and (max-width: 1200px) { .videoImg img { height: 15rem; } } @media all and (max-width: 900px) { .videoList>ul>li { width: calc(50% - 0.75rem); } .videoImg img { height: 21.5rem; } } @media all and (max-width: 600px) { .videoList>ul>li { width: calc(50% - 0.8rem); } .videoImg { border-radius: 0.8rem; } .videoImg img { height: 11rem; } .videoTit { font-size: 1.5rem; margin: 0.8rem 0 1.8rem 0; } } /* 최신자료(자료) */ .newdataList { margin-bottom: 4rem; } .newdataList>ul { display: flex; flex-wrap: wrap; margin-bottom: -2%; justify-content: left; column-gap: 1.8rem; } .newdataList>ul>li { position: relative; width: calc(25% - 1.36rem); } .newdataList>ul>li>a { display: block; } .ndImg { display: block; height: 21.6rem; overflow: hidden; border-bottom: 1px solid #efefef; background-size: 50%; background: #F4F4F4; } .ndImg img { width: 100%; height: 100%; object-fit: contain; } .ndTxt { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-size: 1.6rem; color: #2B2F36; font-weight: 500; padding: 1rem 0 2.5rem 0; } .ndTypeLayer { position: absolute; top: 1rem; left: 1rem; } @media all and (max-width: 900px) { .newdataList>ul>li { width: calc(50% - 0.9rem); } } @media all and (max-width: 600px) { .newdataList { margin-bottom: 2rem; } .newdataList>ul { column-gap: 1.0rem; } .newdataList>ul>li { width: calc(50% - 0.5rem); } .ndImg { height: 11rem; } .ndTxt { font-size: 1.5rem; padding: 0.8rem 0 1.8rem 0; } .ndTypeLayer { top: 0.5rem; left: 0.5rem; } .ndTypeLayer img { max-width: 3rem; } } /* Tab(인기자료) */ .section.popular .contentInner { padding: 0; } .popular { position: relative; } .tab.popularList { height: 160px; } .tab.popularList>ul { position: relative; font-weight: 600; font-size: 1.8rem; display: flex; justify-content: flex-end; margin-top: -5rem; position: absolute; width: 100%; top: 6rem; right: 0; } .tab.popularList>ul:after { content: ""; display: block; clear: both } .tab.popularList>ul>li { float: left; margin-right: 2rem; } .tab.popularList>ul>li::before { content: ''; display: inline-block; width: 0.5rem; height: 0.5rem; vertical-align: middle; border-radius: 0.25rem; background: #111; margin-right: 1rem; } .tab.popularList>ul>li:last-child { /* margin-right: 13%; */ margin-right: calc((90% / 2) - 61rem); } .tab.popularList>ul>li>a { position: relative; } .tab.popularList>ul>li>a span { display: inline-block; font-size: 1.8rem; color: #111; font-weight: 400; } .tabPopDataCont { width: 100%; position: absolute; top: 8rem; left: 0; list-style: none; border: 0; margin: 0; padding: 0; zoom: 1; } .tabPopDataCont:after { content: ""; display: block; clear: both } .tabPopDataCont>ul>li { display: inline-block; width: calc(33.3% - 1.66rem); float: left; border: 1px solid #d4d0f5; border-radius: 3rem; padding: 4rem; margin-right: 2.5rem; } .tabPopDataCont>ul>li:last-child { margin-right: 0; } .tab.popularList>ul>li.active>a {} .tab.popularList>ul>li.active>a::after {} .tab.popularList>ul>li.active>a span { position: relative; text-decoration: underline; } @media all and (max-width: 1412px) { .tab.popularList>ul>li:last-child { margin-right: 5%; } } @media all and (max-width: 1200px) { .tab.popularList>ul>li>a span { font-size: 1.6rem; } .tab.popularList>ul { margin-top: -5.5rem; } .tabPopDataCont { top: 6rem; } } @media all and (max-width: 600px) { .tab.popularList>ul { margin-top: -6rem; } .tab.popularList>ul>li { margin-right: 1rem; } .tabPopDataCont { top: 4.5rem; } .tab.popularList>ul>li>a span { font-size: 1.5rem; } } /* 인기자료(이미지) */ .gallery { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; margin: 0 auto; } .gallery img { width: 100%; max-width: 25%; height: 30rem; object-fit: cover; } .popularImg>ul { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; margin: 0 auto; } .popularImg>ul>li { width: 25%; overflow: hidden; } .popularImg>ul>li>a { display: block; } .popularImg>ul>li img { width: 100%; max-width: 100%; height: 30rem; object-fit: cover; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .5s ease-in-out; transition: .5s ease-in-out; } .popularImg>ul>li img:hover { -webkit-transform: scale(1.2); transform: scale(1.2); } @media all and (max-width: 1200px) { .popularImg>ul>li img { height: 20rem; } } @media all and (max-width: 900px) { .popularImg>ul>li img { height: 12rem; } } @media all and (max-width: 600px) { .popularImg>ul>li { width: 50%; } .popularImg>ul>li:nth-child(5), .popularImg>ul>li:nth-child(6), .popularImg>ul>li:nth-child(7), .popularImg>ul>li:nth-child(8) { display: none; } } /* 인기자료(동영상) */ .popVideoList>ul { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; margin: 0 auto; } .popVideoList>ul>li { position: relative; width: 25%; overflow: hidden; } .popVideoList>ul>li>a { position: relative; display: block; } .popVideoList>ul>li>a::after { content: ''; display: inline-block; position: absolute; bottom: 0; width: 100%; height: 50%; background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%); } .pvLayerTxt { max-width: 82%; position: absolute; left: 3.5rem; bottom: 2rem; width: 100%; font-size: 2.3rem; color: #fff; font-weight: 400; z-index: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; z-index: 99; } .pvImg img { width: 100%; max-width: 100%; height: 300px; object-fit: cover; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .5s ease-in-out; transition: .5s ease-in-out; } .popVideoList>ul>li>a:hover .pvImg img { -webkit-transform: scale(1.2); transform: scale(1.2); } @media all and (max-width: 1200px) { .pvImg img { height: 200px; } .pvLayerTxt { left: 1.8rem; bottom: 1.8rem; font-size: 1.8rem; } } @media all and (max-width: 900px) { .pvImg img { height: 120px; } .pvLayerTxt { left: 1rem; bottom: 1rem; font-size: 1.6rem; } } @media all and (max-width: 600px) { .popVideoList>ul>li { width: 50%; } .popVideoList>ul>li:nth-child(5), .popVideoList>ul>li:nth-child(6), .popVideoList>ul>li:nth-child(7), .popVideoList>ul>li:nth-child(8) { display: none; } .pvLayerTxt { font-size: 1.5rem; } } /* 인기자료(자료) */ .popDataList {} .popDataList>ul { display: flex; flex-wrap: wrap; justify-content: left; } .popDataList>ul>li { position: relative; width: 25%; overflow: hidden; } .popDataList>ul>li>a { position: relative; display: block; } .popDataList>ul>li>a::after { content: ''; display: inline-block; position: absolute; bottom: 0; width: 100%; height: 50%; background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%); } .pdImg img { width: 100%; max-width: 100%; height: 30rem; object-fit: cover; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .5s ease-in-out; transition: .5s ease-in-out; } .popDataList>ul>li>a:hover .pdImg img { -webkit-transform: scale(1.2); transform: scale(1.2); } .pdLayerTxt { max-width: 82%; position: absolute; left: 3.5rem; bottom: 2rem; width: 100%; font-size: 2.3rem; color: #fff; font-weight: 400; z-index: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pdTypeLayer { position: absolute; top: 1rem; left: 1rem; } @media all and (max-width: 1200px) { .pdImg img { height: 20rem; } .pdLayerTxt { left: 1.8rem; bottom: 1.8rem; font-size: 1.8rem; } } @media all and (max-width: 900px) { .pdImg img { height: 12rem; } .pdLayerTxt { left: 1rem; bottom: 1rem; font-size: 1.6rem; } .pdTypeLayer img { max-width: 3rem; } } @media all and (max-width: 600px) { .popDataList>ul>li { width: 50%; } .popDataList>ul>li:nth-child(5), .popDataList>ul>li:nth-child(6), .popDataList>ul>li:nth-child(7), .popDataList>ul>li:nth-child(8) { display: none; } .pdLayerTxt { font-size: 1.5rem; } } /* 컬렉션 */ .collection .mainTitArea { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5.7rem; } .cltTitWrap { display: flex; align-items: center; } .cltBtns { display: flex; align-items: center; border: 1px solid #ddd; border-radius: 30px; margin-left: 6rem; padding: 0.2rem 1rem 0.5rem 1rem; } .btnDiv { padding: 0.5rem 0.8rem; } .sectionComment { color: #666; font-size: 1.6rem; font-weight: 400; } .layerTxt { display: none; position: absolute; width: 80%; left: 10%; bottom: 6rem; color: #fff; font-size: 2.8rem; font-weight: 700; text-align: center; } .layerLink { display: none; position: absolute; left: 50%; bottom: 2rem; color: #fff; font-size: calc(11px + 0.3vw); font-weight: 700; text-align: center; border: 1px solid #fff; border-radius: 3px; padding: 0.5rem 1rem; transform: translate(-50%, 0px); word-break: keep-all; } .accordionSlide>div.wide .layerTxt { display: block; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; animation: fadein 1s; -moz-animation: fadein 1s; /* Firefox */ -webkit-animation: fadein 1s; /* Safari and Chrome */ -o-animation: fadein 1s; /* Opera */ word-break: break-all; } .accordionSlide>div.wide .layerLink { display: block; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; animation: fadein 1s; -moz-animation: fadein 1s; /* Firefox */ -webkit-animation: fadein 1s; /* Safari and Chrome */ -o-animation: fadein 1s; /* Opera */ word-break: break-all; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-moz-keyframes fadein { /* Firefox */ from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes fadein { /* Safari and Chrome */ from { opacity: 0; } to { opacity: 1; } } @-o-keyframes fadein { /* Opera */ from { opacity: 0; } to { opacity: 1; } } /* 컬렉션(아코디언 슬라이드) */ .accordionSlide { width: 100%; margin: 0 auto; display: flex; flex-direction: row; justify-content: space-between; } .accordionSlide>div { position: relative; width: 12%; height: 40rem; border-radius: 2.2rem; cursor: pointer; overflow: hidden; } .accordionSlide>div img { height: 100%; width: 100%; object-fit: cover; filter: brightness(80%) } .slide { list-style: none; display: flex; flex-direction: row; justify-content: center; margin-bottom: 150px; } .fived { margin-right: 0; } .wide { width: 50%; } @media all and (max-width: 1200px) { .collection .contentInner { padding: 0; } .collection .mainTitArea { margin-bottom: 2rem; } .cltBtns { margin-left: 3rem; } .accordionSlide>div { border-radius: 1.5rem; } .layerTxt { bottom: 7rem; font-size: 2.2rem; } } @media all and (max-width: 900px) { .collection .mainTitArea { align-items: flex-start; flex-direction: column; } .sectionComment { font-size: 1.4rem; margin-top: 1rem; } .layerTxt { bottom: 6rem; font-size: 1.8rem; } } @media all and (max-width: 600px) { .sectionComment { display: none; } .cltBtns { margin-left: 1.5rem; padding: 0.1rem 0.5rem 0.3rem 0.5rem; } .accordionSlide>div { height: 20rem; border-radius: 0.8rem; } .layerTxt { bottom: 6.2rem; font-size: 1.6rem; } } /* 공지사항, 팝업존 */ .section.noti { background: #fafafa; } .noti .contentInner { display: flex; flex-direction: row; } .notiArea { width: calc(100% - 70.9rem); } .popupZone { width: 63.9rem; margin-left: 7rem; } .notiTitWrap { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ADB5BD; padding-bottom: 1.5rem; } .btnMore>a { font-size: 2.0rem; color: #111; font-weight: 400; background: url("https://visitbusan.net/archive/images/main/icon_plus2.svg") no-repeat; background-position: right center; padding: 1rem 2.5rem 1rem 0; } .noticeList>ul>li { display: flex; justify-content: space-between; border-bottom: 1px solid #ddd; padding: 2.2rem 0.5rem; } .notiTit { max-width: 80%; font-size: 2.4rem; color: #444444; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dateTit { font-size: 2rem; color: #666; } .popBtns { display: flex; position: absolute; left: 7rem; bottom: 0; justify-content: center; align-items: center; background: #fff; } .popBtns>div { display: flex; align-items: center; } .popSlideNum { font-size: 1.4rem; padding: 0 1rem; } .popSlideNumber { color: #000; font-weight: 700; } .popSlideNumber::after { content: ''; display: inline-block; width: 1px; height: 1.2rem; vertical-align: middle; background: #CCCCCF; margin: 0 0.5rem 0 1rem; } .popBtnBox {} .popBtns .prev, .popBtns .next { padding: 1.2rem; } .txtBlind { font-size: 0; } .popBtns .btnPlay { width: 3.8rem; height: 3.8rem; vertical-align: middle; background: url("https://visitbusan.net/archive/images/main/btn_stop_line_b.svg") no-repeat; background-position: center; } .popBtns .btnPlay.on { background: url("https://visitbusan.net/archive/images/main/btn_play_line_b.svg")no-repeat; background-position: center; } .popupArea { position: relative; } .popupZone img { width: 100%; display: inline-block; } .popupZone.slick-dotted.slick-slider { margin-bottom: 0; } .popupZone .slick-dots { position: absolute; bottom: 5.3rem; right: calc(((100% - 1300px) / 2) - 0px); display: flex; align-items: center; justify-content: center; max-width: 600px; } .popupZone .slick-dots li { width: 100%; height: auto; margin: 0; } .popupZone .slick-dots li button { width: 100%; height: auto; padding: 5px 0px; } .popupZone .slick-dots li button:before { width: 100%; height: 1px; content: ''; background: rgba(255, 255, 255, 0.2); position: static; top: auto; left: auto; display: flex; opacity: 1; } .popupZone .slick-dots li.slick-active button:before { opacity: 1; background-color: #fff; } @media all and (max-width: 1300px) { .popupZone { width: 54rem; } .notiArea { width: calc(100% - 61rem); } .noticeList>ul>li { padding: 1.8rem 0.5rem; } .notiTit { font-size: 1.9rem; } .dateTit { font-size: 1.7rem; } } @media all and (max-width: 1200px) { .btnMore>a { font-size: 1.6rem; background-size: 20%; } .notiTitWrap { padding-bottom: 0.5rem; } .popupZone { width: 43rem; margin-left: 4rem; } .notiArea { width: calc(100% - 47rem); } .noticeList>ul>li { padding: 1.33rem 0.5rem; } .notiTit { font-size: 1.7rem; } .dateTit { font-size: 1.5rem; } .popBtns { left: 4rem; } } @media all and (max-width: 900px) { .noti .contentInner { display: flex; flex-direction: column; } .notiArea { width: 100%; } .popupZone { width: 100%; margin-left: 0; } .popBtns { left: 0; } .popupWrap { margin-top: 2rem; } } @media all and (max-width: 600px) { .btnMore>a { font-size: 1.3rem; padding: 1rem 2.0rem 1rem 0; } .notiTit { font-size: 1.5rem; } .dateTit { font-size: 1.3rem; } .popBtns .prev, .popBtns .next { padding: 0.8rem; } .popBtns .btnPlay { width: 3rem; height: 3rem; } } /* 통계 숫자 */ .section.stats { border-bottom: 1px solid #ddd; } .counterCont { width: 100%; text-align: center; } .counterBox>ul { display: flex; overflow: hidden; } .counterBox>ul>li { position: relative; width: 25%; } .counterBox>ul>li::after { content: ''; position: absolute; top: calc(50% - 0.2rem); right: 0; display: inline-block; width: 0.4rem; height: 0.4rem; background: #E1E3E1; } .counterBox>ul>li:last-child::after { display: none; } .conterName { font-size: 1.8rem; color: #222; font-weight: 400; } .counter { font-size: 3.1rem; color: #222; font-weight: 700; } @media all and (max-width: 1200px) { .conterName { font-size: 1.6rem; } .counter { font-size: 2.5rem; } } @media all and (max-width: 1200px) { .counter { font-size: 2.2rem; } } @media all and (max-width: 600px) { .conterName { font-size: 1.2rem; } .counter { font-size: 1.5rem; } .counterBox>ul>li::after { display: none; } } /* 바로가기 */ .section.shortcut { background: url("https://visitbusan.net/archive/images/main/archive_img.svg") no-repeat; background-position: center bottom; background-size: contain; } .section.shortcut .contentInner { display: flex; justify-content: space-between; align-items: flex-end; padding: 13.9rem 0; } .linkTxt { font-size: 6.6rem; color: #666; font-weight: 700; line-height: 8.5rem; } .linkTxt .colBlack { color: #101010; } .linkBtnArea a { font-size: 1.6rem; color: #222; font-weight: 400; border: 1px solid #ddd; border-radius: 0.8rem; background: url("https://visitbusan.net/archive/images/main/icon_arrow_right_b.svg") no-repeat; background-position: center right 1.6rem; padding: 1.3rem 4rem 1.3rem 1.6rem; } @media all and (max-width: 1200px) { .section.shortcut .contentInner { align-items: center; padding: 10rem 0; } .linkTxt { font-size: 4.5rem; line-height: 6rem; } } @media all and (max-width: 900px) { .section.shortcut .contentInner { padding: 5rem 0; } .linkTxt { font-size: 3rem; line-height: 4rem; } .linkBtnArea a { font-size: 1.4rem; border-radius: 0.5rem; background-position: center right 0.7rem; padding: 1.0rem 3rem 1.0rem 1.2rem; } } @media all and (max-width: 600px) { .section.shortcut .contentInner { padding: 3rem 0; } .linkTxt { font-size: 1.7rem; line-height: 2.5rem; } .linkBtnArea a { font-size: 1.2rem; border-radius: 0.5rem; background-position: center right 0.5rem; background-size: 17%; padding: 0.8rem 2rem 0.8rem 1.0rem; } }