@charset "utf-8"; /* common */ #wrap {} /* header : main */ .header_main { display: block; padding: 10px 20px !important; position: absolute; top: 0px; z-index: 1; width: 100%; max-width: 100%; height: 110px; content: ''; /* background: linear-gradient(to top, rgba(255, 0, 0, 0), rgba(0, 0, 0, 0.4)); */ } .header_main .logo {} .header_main .logo a { display: block; } .header_main .logo a img { width: 90px; } .menu_header { margin-top: 10px; } .menu_header ul { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 0; } .menu_header ul li {} .menu_header ul li:not(:last-child) {} .menu_header ul li span { white-space: nowrap; } .menu_header ul li i {} .menu_header ul li a { display: block; } .menu_header li:not(:last-child) { margin-right: 15px; } .menu_header li .weather { padding: 0; color: #555; } #Modal_weather { margin-right: 10%; font-size: 1.5rem; font-weight: 500; color: #333; } #Modal_weather .tit_temperature { font-size: 4rem; } .common_search {} .common_search_btn.open { width: 40px; height: 40px; background-color: #fff; background-image: url(/images/common/search_g.png); background-repeat: no-repeat; background-position: center center; background-size: 22px; border-radius: 100px; } .common_search_btn.search { width: 23px; height: 23px; background-image: url(/images/main/search.png); background-repeat: no-repeat; background-position: center center; background-size: 18px; } .common_search_btn.close { display: inline-block; margin-right: -1px; width: 40px; height: 100%; float: left; font-size: 12px; } .common_search_bg { display: none; border-color: #ddd; position: absolute; top: 0px; left: 0px; z-index: 2; width: 100%; background-color: #fff; } .common_search_con { display: inline-block; width: calc(100% - 40px); height: 100%; float: left; } .common_search_input { border: 0; width: calc(100% - 40px); height: 100%; } .common_search_group { display: block; background-color: #fff; } .common_search_group:nth-child(1) { border-bottom: 1px solid #6fa0fc; height: 60px; } .common_search_group:nth-child(2) { padding: 20px 10px; } .common_search_group:nth-child(3) { padding: 10px; border-top: 1px solid #ddd; } .common_search_tag_group {} .common_search_tag_group ul { display: block; margin-bottom: -5px; } .common_search_tag_group ul li { display: inline-block; display: inline-block; margin-right: 0px !important; margin-bottom: 5px; } .common_search_tag_group ul li a { padding: 2px 10px; border: 1px solid #ddd; font-size: 13px; border-radius: 20px; } .menu_header .notification { position: relative; } .menu_header .notification a { margin-top: 2px; width: 23px; height: 23px; background-image: url(/images/common/notification_w.png); background-repeat: no-repeat; background-position: center center; background-size: 22px; } .menu_header .notification:after { display: block; position: absolute; top: -5px; right: -5px; z-index: 1; width: 15px; height: 15px; background-image: url(/images/common/signal.png); content: ''; } .i-weather-20::before { display: inline-block; width: 20px; height: 20px; background-repeat: no-repeat; background-size: cover; content: ""; } .i-weather-30::before { display: inline-block; width: 30px; height: 30px; background-repeat: no-repeat; background-size: cover; content: ""; } .i-weather-50::before { display: inline-block; width: 50px; height: 50px; background-repeat: no-repeat; background-size: cover; content: ""; } .i-weather-70::before { display: inline-block; width: 70px; height: 70px; background-repeat: no-repeat; background-size: cover; content: ""; } .i-weather-80::before { display: inline-block; width: 80px; height: 80px; background-repeat: no-repeat; background-size: cover; content: ""; } .sun::before { background-image: url(/images/common/sun.svg); } .brightness-low::before { background-image: url(/images/common/brightness-low.svg); content: ""; } .clouds::before { background-image: url(/images/common/clouds.svg); content: ""; } .cloud-sun::before { background-image: url(/images/common/cloud-sun.svg); content: ""; } .moisture::before { background-image: url(/images/common/moisture.svg); content: ""; } .cloud-rain-heavy::before { background-image: url(/images/common/cloud-rain-heavy.svg); content: ""; } .cloud-sleet::before { background-image: url(/images/common/cloud-sleet.svg); content: ""; } .snow::before { background-image: url(/images/common/snow.svg); content: ""; } .cloud-drizzle::before { background-image: url(/images/common/cloud-drizzle.svg); content: ""; } .cloud-hail::before { background-image: url(/images/common/cloud-hail.svg); content: ""; } .cloud-snow::before { background-image: url(/images/common/cloud-snow.svg); content: ""; } .sunrise::before { background-image: url(/images/common/sunrise.svg); content: ""; } .sunset::before { background-image: url(/images/common/sunset.svg); content: ""; } .load::before { background-image: url(/images/common/load.svg); content: ""; } /* etc 아이콘 */ .mappoint::before { background-image: url(/images/common/mappoint.svg); content: ""; } /* map */ .map_wrap { position: sticky; } #category1 { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); position: absolute; top: 240px; left: 10px; z-index: 2; background: #6fa0fc; border-radius: 20px; } #category1 button { display: flex; padding: 5px; } #category2 { display: flex; padding: 4px 10px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); position: absolute; top: 240px; left: 45px; z-index: 2; background-color: #fff; color: #6fa0fc; border-radius: 20px; } #category2 button, #category2 i { font-size: 13px; color: #555; letter-spacing: -1px; } /* header : fixed */ .fixed_on { position: fixed; top: 0; z-index: 1; width: 100%; background: #fff; } /* header : search(type1) */ .header_search_type1 .sub_search { display: flex; align-items: center; margin: 7px 0; margin-right: 7px; border: 2px solid #6fa0fc; border-radius: 27px; } .header_search_type1 input { border: 0; width: calc(100% - 50px); height: 34px; font-size: 1.5rem; text-indent: 15px; border-radius: 27px 0 0 27px; } .header_search_type1 input::placeholder { font-size: 1.3rem; color: #999; } .header_search_type1 input::-webkit-input-placeholder { font-size: 1.3rem; color: #999; } .header_search_type1 input:-ms-input-placeholder { font-size: 1.3rem; color: #999; } .header_search_type1 button { width: 50px; height: 23px; background-image: url(/images/main/search.png); background-repeat: no-repeat; background-position: 20px 2px; background-size: 17px; } /* header : search(type2) */ .header_search_type2 {} /* header : search(type3) */ .header_search_type3 .sub_search { display: flex; align-items: center; margin: 7px 0; margin-right: -12px; border: 2px solid #6fa0fc; border-radius: 27px; } .header_search_type3 input { border: 0; width: calc(100% - 30px); height: 34px; font-size: 1.5rem; text-indent: 15px; border-radius: 27px 0 0 27px; } .header_search_type3 input::placeholder { font-size: 1.3rem; color: #999; } .header_search_type3 input::-webkit-input-placeholder { font-size: 1.3rem; color: #999; } .header_search_type3 input:-ms-input-placeholder { font-size: 1.3rem; color: #999; } .header_search_type3 button { width: 30px; height: 23px; background-image: url(/images/main/search.png); background-repeat: no-repeat; background-position: 1px center; background-size: 17px; } .header_search_type3 .notification { position: relative; } .header_search_type3 .notification:after { display: block; position: absolute; top: -5px; right: -5px; width: 15px; height: 15px; background-image: url(/images/common/signal.png); content: ''; } /* header : sub(height) */ .header_sub_height { display: flex; height: 52px; } [class*='header_sub_type'] .i-home { width: 83%; } /* header : sub(type1) */ .header_sub_type1 {} /* header : sub(type2) */ .header_sub_type2 {} /* container */ #container {} /* Sub Common */ .cwrap { padding: 1.4rem 1.4rem 7rem 1.4rem; overflow: hidden; } .cwrap.none_pd { padding: 0; } /* tab */ .tab_type1 {} .tab_type1 .nav-link { border-bottom: 1px solid #d2e2ff; } .tab_type1 .nav-link.active { border-bottom: 4px solid; } .tab_type2 {} .tab_type2 .nav-link { border-bottom: 1px solid #e9e9e9; color: #666666; } .tab_type2 .nav-link.active { border-bottom: 4px solid #000; color: #000; } /* tab(slider) */ .slider.overflow-visible>div { overflow: visible !important; } /* box-shadow */ .shadow-border { border-top: 1px solid #eaeaea; border-left: 1px solid #eaeaea; box-shadow: 0 0.5rem 1rem rgba(var(--bs-body-color-rgb), 0.15) !important; border-radius: 10px; } /* list */ /* 1 */ .list-type-1 {} .list-type-1>div { background-color: #fff; } /* 2 */ .list-type-2 {} .list-type-2 ul {} .list-type-2 ul li { display: flex; justify-content: space-between; } .list-type-2 sup { display: block; } /* 3 */ .list-type-3 { border: 1px dotted #ddd; } .list-type-3>div:not(:last-child) { padding-bottom: 1.5rem; border-bottom: 1px dashed #bbb; } .list-type-3 .thumbnail { overflow: hidden; max-width: 100px; max-height: 100px; border-radius: 10px; } .list-type-3 img { width: 100%; min-height: 100px; } /* 4 */ .list-type-4 {} .list-type-4 ul {} .list-type-4 ul li { margin-bottom: 15px; } .list-type-4 .thumbnail { overflow: hidden; max-width: 100px; max-height: 100px; border-radius: 10px; } .list-type-4 img { width: 100%; min-height: 100px } /* 5 : 오디오 가이드(커스텀) */ .poster { display: block; position: relative; } .poster:before { display: block; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); content: ''; transform: translate(-50%, -50%); } .poster:after { display: block; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; background-image: url(/images/sub/btn-play.png); background-repeat: no-repeat; background-size: contain; content: ''; transform: translate(-50%, -50%); } .audio_guide { padding: 6%; background-color: #e6e6e6; } .audio_guide.pb-65 { padding-bottom: 65px; } .audio_guide_con { background-color: #fff; } .audio_guide_tit { padding: 6% 6% 8% 6%; background-color: #b8d6ee; } .audio_guide_tit div { text-align: center; } .audio_guide_tit img { margin-bottom: 15px; width: 122px; } .audio_guide_tit p { color: #333; text-align: center; } .audio_guide_tit .tit { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.5); font-weight: bold; } .list-type-5 { padding: 6%; } .list-type-5 ul { margin-bottom: -10px; } .list-type-5 ul li { margin-bottom: 10px; padding: 5px 10px 5px 5px; border: 1px solid #e6e6e6; border-radius: 5px; } .list-type-5 .thumbnail { overflow: hidden; max-width: 65px; max-height: 65px; border-radius: 5px; } .list-type-5 .thumbnail_con { display: flex; align-items: center; justify-content: space-between; width: calc(100% - 65px); line-height: 20px; } .list-type-5 .thumbnail_con strong { margin-left: 10px; font-size: calc(12px + 0.6vw); } .list-type-5 . { overflow: hidden; max-width: 65px; max-height: 65px; border-radius: 5px; } .list-type-5 img { width: 100%; min-height: 100px } .btn-play { flex-shrink: 0; margin-left: 10px; border-left: 1px solid #e6e6e6; width: 45px; height: 35px; background-image: url(/images/sub/btn-play.png); background-repeat: no-repeat; background-position: center right; background-size: 34px; } /* 데이터없음 */ /* type1 : 하단 navi 있을때 사용 */ .empty_type1 { position: absolute; top: calc((100% - 37px)/2); left: 50%; width: 100%; transform: translate(-50%, -50%); } /* type2 : 하단 navi 없을때 사용 */ .empty_type2 { position: absolute; top: calc((100% - 22px)/2); left: 50%; width: 100%; transform: translate(-50%, -50%); } /* type3 : 기본 (상단에 탭있을때) */ .empty_type3 {} [class*='empty_type'] i { font-size: 4rem; } /* Modal Custom Common */ .coupon_icon { position: absolute; top: calc(50% - 20px); right: 1rem; } .icon_circle { padding: 6px 0; width: 40px; height: 40px; background: #f0f0f0; font-size: 1.8rem; color: #000000; text-align: center; } .icon_circle.on { background: #6fa0fc; color: #fff; } /* cate 카테고리 아이콘 */ [class*='icon-kinds-'] { display: block; width: 70px; height: 70px; background-repeat: no-repeat; background-position: center center; background-size: 71%; border-radius: 70px; } .icon-kinds-01 { background-image: url(/images/main/ticket.png); } .icon-kinds-02 { background-image: url(/images/main/accommodation.png); } .icon-kinds-03 { background-image: url(/images/main/experience.png); } .icon-kinds-04 { background-image: url(/images/main/traffic.png); } .icon-kinds-05 { background-image: url(/images/main/restaurant.png); } .icon-kinds-06 { background-image: url(/images/main/product.png); } /* 공유버튼 */ .share-dropdown { position: relative; } .btn-share { padding: 0; border: 0; } .share-dropdown-menu { display: none; padding: 8px 14px; box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3); position: absolute; right: 0; z-index: 1; background-color: #fff; border-radius: 10px; } .share-dropdown-menu li {} .share-dropdown-menu li a, .share-dropdown-menu li button { white-space: nowrap; } /* 찜하기 */ .bookmark_heart { padding: 0; border: 0; } .btn-check:checked+.bookmark_heart, :not(.btn-check)+.bookmark_heart:active, .bookmark_heart:first-child:active, .bookmark_heart.active, .bookmark_heart.show { -webkit-text-fill-color: #1f69fe; } /* 말줄임 */ .fs-4.text-truncate2 { display: -webkit-box; overflow: hidden; height: 4rem; line-height: 2rem; white-space: break-spaces; word-wrap: break-word; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .fs-1.text-truncate3 { display: -webkit-box; overflow: hidden; height: 7.5rem; line-height: 2.5rem; word-wrap: break-word; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } /* box(scroll) */ .scroll-box-h130 { overflow-y: auto; height: 130px; } /* 헤더 밑 탭 고정 Tab Scroll Fixed */ .scroll_tab2.fixed { position: fixed; top: 52px; z-index: 1; width: 100%; background: #fff; } /* 로딩 인디케이터 */ .spinner_wrap { display: flex; align-items: center; justify-content: center; position: fixed; z-index: 9999; width: 100%; height: 100vh; background-color: rgba(255, 255, 255, 0.8); } .spinner_con {} .spinner_con .txt { font-size: 13px; color: #1f69fe; text-align: center; letter-spacing: 0; } .spinner { width: 50px; height: 60px; font-size: 10px; text-align: center; } .spinner>div { display: inline-block; width: 6px; height: 100%; background-color: #6fa0fc; -webkit-animation: stretchDelay 1.2s infinite ease-in-out; animation: stretchDelay 1.2s infinite ease-in-out; } .spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .spinner .rect3 { -webkit-animation-delay: -1s; animation-delay: -1s; } .spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes stretchDelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4); } 20% { -webkit-transform: scaleY(1); } } @keyframes stretchDelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1); -webkit-transform: scaleY(1); } } /* 오버투어리즘 */ #category3 { display: flex; gap: 10px; padding: 5px; padding: 4px 10px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); position: absolute; top: 60px; left: 10px; z-index: 1; background-color: #fff; color: #222; white-space: pre-line; border-radius: 20px; } #category3 span { display: flex; align-items: center; font-size: 16px; } #red { color: red; } #red svg { fill: red; } #blue { color: #0019F4; } #blue svg { fill: #0019F4; } #skyblue { color: #0019F4; } #skyblue svg { border: 2px solid #0019F4; fill: #fff; } #category3 svg { margin-right: 2px; width: 16px; height: 16px; }