/* 폰트 파일 불러오기 */ @font-face { font-family: "Noto Sans KR"; font-weight: 400; src: url("../fonts/notosanskr-regular.woff2") format("woff2"), url("../fonts/notosanskr-regular.woff") format("woff") } @font-face { font-family: "Noto Sans KR"; font-weight: 500; src: url("../fonts/notosanskr-medium.woff2") format("woff2"), url("../fonts/notosanskr-medium.woff") format("woff") } @font-face { font-family: "Noto Sans KR"; font-weight: 700; src: url("../fonts/notosanskr-bold.woff2") format("woff2"), url("../fonts/notosanskr-bold.woff") format("woff") } /* 엘리먼트 초기화 */ * { margin: 0; padding: 0; box-sizing: border-box; position: relative; font-family: "Noto Sans KR", sans-serif; letter-spacing: -0.5px; outline: none !important; word-break: keep-all; outline: none; -webkit-tap-highlight-color: transparent; -webkit-appearance: none; border-radius: 0; border: 0; touch-action: pan-y; } *:focus { outline: none; } *::selection { background-color: #000; color: #FFF; } *::placeholder { color: #CCC; } html, body { width: 100%; float: left; color: #000; font-size: 13px; background-color: #FEFEFE; } html { max-width: 800px; margin: 0 auto; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; } body { overflow-x: hidden; } a { text-decoration: none; color: inherit; } img { vertical-align: middle; max-width: 100%; } ul, li { list-style: none; } textarea, input { resize: none; font-size: 13px; } .left { float: left; } .right { float: right; } .guest { display: inline-block; } .member { display: none; } .nice-select { font-size: 13px; font-weight: 500; } /* labelBox */ label.labelBox { float: left; font-size: 13px; font-weight: 500; } label.labelBox > .square { width: 20px; height: 20px; float: left; border: 1px solid #CCC; text-align: center; line-height: 20px; margin-right: 5px; border-radius: 5px; } label.labelBox > .square > i { color: #333; opacity: 0; font-size: 11px; } label.labelBox > .label { height: 20px; line-height: 20px; float: left; color: #999; } label.labelBox > input { display: none; } label.labelBox > input:checked + .square > i { opacity: 1; } label.labelBox > input:checked ~ .label { color: #333; } /* swiper */ .swiper-pagination-bullet { border-radius: 8px; transition: width 0.5s; background: #000; } .swiper-pagination-bullet-active { width: 40px; background: #000; } .swiper-pagination-bullet.white { background: #000 !important; } /* datepicker */ .ui-datepicker td span, .ui-datepicker td a { padding: 10px 5px; cursor: pointer; font-weight: 500; } .ui-widget-header a { cursor: pointer; } .ui-datepicker .ui-datepicker-header { padding: 5px; background: none; border: none; border-bottom: 1px solid #DDD; border-radius: 0; } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { top: 50%; transform: translateY(-50%); } .ui-widget.ui-widget-content { width: 100%; float: left; } /* section */ .section { width: 100%; float: left; margin-top: 30px; } .section.page { margin-top: 100px; padding: 20px; } .section > .titleBox { width: 100%; float: left; display: table; table-layout: fixed; padding: 20px; z-index: 2; } .section > .titleBox > div { display: table-cell; vertical-align: middle; } .section > .titleBox > .title > p { width: 100%; float: left; } .section > .titleBox > .title > p.big { font-weight: bold; font-size: 21px; color: #000; } .section > .titleBox > .title > p.small { font-weight: 500; font-size: 12px; color: #999; } .section > .titleBox > .more { width: 20px; } .section > .titleBox > .more > a { display: inline-block; width: 20px; vertical-align: middle; } .section.padding { padding: 20px; } .section.padding > .titleBox { padding: 0; margin-bottom: 20px; } /* intro */ #intro { position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 100; overflow: hidden; } #intro > .background { width: 110%; height: 100%; float: left; left: -5%; transition: left 5s; background-image: url("../images/intro/bg.jpg"); background-size: cover; background-position: center top; } #intro > img { position: absolute; width: 100%; left: 0; top: 0; z-index: 2; } #intro.active > .background { left: -10%; } /* 공용상단영역 */ #header { position: fixed; width: 100%; max-width: 800px; left: 50%; margin-left: -400px; top: 0; z-index: 10; padding: 0 20px; opacity: 0; } #header > div { height: 50px; line-height: 50px; z-index: 2; } #header > .title { float: left; font-size: 15px; font-weight: bold; opacity: 0; } #header > .title > img { height: 28px; top: -1px; margin-right: 5px; } #header > .right { float: right; } #header > .right > a { font-size: 17px; margin-left: 20px; color: #000; } #header > .right > a:first-of-type { margin-left: 0; } #header > .right > a > i { vertical-align: middle; } #header.active { -webkit-backdrop-filter: blur(200px); -moz-backdrop-filter: blur(200px); -ms-backdrop-filter: blur(200px); backdrop-filter: blur(200px); } #header.active > .title { opacity: 1; } #header.active > .right > a { color: #000 !important; } #header.white > .right > a { color: #FFF; } #header > .cover { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: #FFF; opacity: 0.6; border-bottom: 1px solid #EEE; display: none; } #header.active > .cover { display: block; } /* 공용하단영역 */ #footer { position: fixed; max-width: 800px; width: 100%; left: 50%; margin-left: -400px; bottom: 0; z-index: 12; -webkit-backdrop-filter: blur(200px); -moz-backdrop-filter: blur(200px); -ms-backdrop-filter: blur(200px); backdrop-filter: blur(200px); opacity: 0; } #footer > ul { width: 100%; float: left; z-index: 2; } #footer > ul > li { width: 20%; height: 50px; float: left; } #footer > ul > li > a { width: 100%; float: left; text-align: center; padding: 8px 0; color: #BBB; } #footer > ul > li > a > i { width: 100%; float: left; font-size: 20px; } #footer > ul > li > a > span { width: 100%; float: left; font-size: 10px; letter-spacing: -1px; font-weight: 500; margin-top: 5px; } #footer > .cover { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: #FFF; opacity: 0.8; border-top: 1px solid #EEE; } /* 콘텐츠영역 */ .contents { position: fixed; max-width: 800px; width: 100%; height: 100%; left: 50%; margin-left: -400px; top: 0; z-index: 1; background-color: #FEFEFE; overflow-y: auto; opacity: 0; } .contents.active { display: block !important; opacity: 1; } .contents > div { width: 100%; float: left; } .contents > div > .menuTitle { position: absolute; top: 50px; left: 20px; z-index: 2; font-size: 24px; font-weight: bold; color: #000; } .contents > div > .menuTitle.white { color: #FFF; } .contents > div > .copyright { width: 100%; float: left; padding: 40px 20px; padding-bottom: 200px; border-top: 1px solid #F1F1F1; } .contents > div > .copyright > p { width: 100%; float: left; text-align: center; font-size: 11px; color: #999; } /* main */ #mainSlide { width: 100%; float: left; overflow: hidden; margin-top: 10px; padding: 0 20px; } #mainSlide > .swiper { width: 100%; float: left; border-radius: 10px; } #mainSlide > .swiper > ul { width: 100%; float: left; } #mainSlide > .swiper > ul > li { width: 100%; float: left; } #mainSlide > .swiper > ul > li a { width: 100%; float: left; } #mainSlide > .swiper > ul > li img { width: 100%; float: left; } #mainuser { width: 100%; float: left; margin-top: 100px; padding: 0 20px; } #mainuser > .title { width: 100%; float: left; font-size: 21px; line-height: 28px; font-weight: bold; color: #000; } #mainuser > .title > img { position: absolute; width: 80px; border-radius: 100%; right: 0; top: -25px; } #mainuser > ul { width: 100%; float: left; margin-top: 20px; } #mainuser > ul > li { width: calc(calc(100% - 20px) / 3); float: left; margin-right: 10px; border-radius: 10px; cursor: pointer; padding: 15px; overflow: hidden; } #mainuser > ul > li:nth-of-type(3n) { margin-right: 0; } #mainuser > ul > li > span { width: 100%; float: left; text-align: center; font-weight: bold; } #mainuser > ul > li > span.label { opacity: 0.6; font-size: 12px; } #mainuser > ul > li > span.cnt { font-size: 18px; } #mainuser > ul > li > span.bg { position: absolute; width: 100%; height: 100%; left: 0; top: 0; opacity: 0.1; } .mainbbs { width: 100%; float: left; padding: 0 20px; margin-bottom: 20px; } .mainbbs > li { width: 100%; float: left; cursor: pointer; border-bottom: 1px solid #E5E5E5; padding: 10px; } .mainbbs > li:first-of-type { padding-top: 0; } .mainbbs > li > .title { width: calc(100% - 80px); float: left; font-size: 12px; font-weight: bold; color: #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mainbbs > li > .date { width: 80px; float: left; font-size: 12px; font-weight: 500; color: #999; text-align: right; } /* nav */ #menu_nav .copyright { display: none; } #menu_nav .list { width: 100%; float: left; margin-bottom: 30px; padding-bottom: 20px; } #menu_nav .list:last-of-type { margin-bottom: 0; } #menu_nav .list > li { width: 100%; float: left; } #menu_nav .list > li.title { font-size: 18px; font-weight: bold; color: #000; } #menu_nav .list > li.item { margin-top: 20px; } #menu_nav .list > li.item > a { width: 100%; float: left; font-size: 14px; font-weight: 500; color: #444; padding-left: 10px; } #menu_nav .list > li.item > a > i { position: absolute; right: 0; top: 50%; transform: translateY(-50%); } /* shopListBox */ .shopListBox { width: 100%; float: left; margin-bottom: 10px; } .shopListBox > .shopViewBox { width: 100%; float: left; margin-bottom: 20px; display: none; } .shopListBox > .shopViewBox > .viewNotice { width: 100%; height: 40px; line-height: 40px; float: left; border-radius: 15px; font-size: 12px; font-weight: 500; background-color: #F2F2F2; margin-bottom: 10px; color: #666; text-align: center; } .shopListBox > .shopViewBox > .viewNotice > i { margin-right: 5px; color: #444; } .shopListBox > .shopViewBox > .viewItem { width: 100%; float: left; box-shadow: 2px 5px 20px 0 rgb(0 0 0 / 10%); border-radius: 20px; overflow: hidden; z-index: 2; display: none; text-align: center; } .shopListBox > .shopViewBox > .viewItem > img { width: 100%; float: left; } .shopListBox > ul { width: 100%; float: left; margin-bottom: -15px; } .shopListBox > ul > li { width: calc(calc(100% - 15px) / 2); float: left; margin-right: 15px; background-color: #FFF; margin-bottom: 15px; box-shadow: 2px 5px 20px 0 rgb(0 0 0 / 10%); border-radius: 10px; cursor: pointer; overflow: hidden; padding-bottom: 15px; transition: box-shadow 0.5s; } .shopListBox > ul > li.active { box-shadow: 2px 10px 20px 0 rgb(0 0 0 / 25%); } .shopListBox > ul > li:nth-of-type(2n) { margin-right: 0; } .shopListBox > ul > li > div { width: 100%; float: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shopListBox > ul > li > .img { background-color: #DDD; margin-bottom: 15px; } .shopListBox > ul > li > .img > img { width: 100%; float: left; } .shopListBox > ul > li > .category { padding: 0 15px; font-size: 11px; font-weight: 500; color: #999; text-align: left; margin-bottom: 2px; } .shopListBox > ul > li > .name { padding: 0 15px; font-size: 16px; font-weight: bold; color: #333; text-align: left; } .shopListBox > ul > li > .icon { padding: 0 15px; text-align: left; } .shopListBox > ul > li > .icon > div { height: 25px; line-height: 25px; float: left; font-size: 11px; font-weight: 500; } .shopListBox > ul > li > .icon > .vr { color: #CCC; } .shopListBox > ul > li > .icon > .vr > i { margin-right: 5px; } .shopListBox > ul > li > .icon > .vr.active { border-color: #666; color: #666; } .shopListBox > ul > li > .icon > .review { margin-left: 15px; } .shopListBox > ul > li > .icon > .review > i { color: #CCC; margin-left: -2px; } .shopListBox > ul > li > .icon > .review > i.fas { color: #F3c104; } .shopListBox > ul > li > .icon > .review > span { color: #F3c104; margin-left: 5px; } .shopListBox > ul > li > .price { padding: 0 15px; margin-top: 10px; } .shopListBox > ul > li > .price > p { width: 100%; float: left; text-align: right; } .shopListBox > ul > li > .price > .discount { font-size: 12px; color: #AAA; text-decoration: line-through; } .shopListBox > ul > li > .price > .price { font-size: 18px; color: #000; font-weight: bold; } .shopNoneBox { width: 100%; float: left; padding: 50px 0; display: none; } .shopNoneBox > * { width: 100%; float: left; text-align: center; } .shopNoneBox > i { margin-bottom: 20px; font-size: 64px; color: #BBB; } .shopNoneBox > p { font-size: 12px; color: #CCC; } #shopCategoryBox { margin-top: 100px; padding: 0 20px; } #shopCategoryBox > ul { width: 100%; float: left; } #shopCategoryBox > ul > li { width: auto; height: 40px; line-height: 40px; float: left; padding: 0 15px; background-color: #F2F2F2; margin-right: 10px; border-radius: 10px; color: #AAA; cursor: pointer; font-weight: 500; } #shopCategoryBox > ul > li > span { margin-left: 3px; opacity: 0.7; } #shopCategoryBox > ul > li:last-of-type { margin-right: 0; } #shopCategoryBox > ul > li.active { color: #FFF; } #shopSearchBox { margin-top: 15px; margin-bottom: 10px; padding: 0 20px; } #shopSearchBox > div { width: 100%; height: 50px; float: left; border-radius: 10px; overflow: hidden; } #shopSearchBox > div > input { width: calc(100% - 60px); height: 100%; float: left; padding: 0 15px; background-color: #F4F4F4; font-weight: 500; font-size: 13px; color: #333; } #shopSearchBox > div > button { width: 60px; height: 100%; float: left; background-color: #333; color: #FFF; font-weight: bold; font-size: 14px; } /* moreBtnBox */ .moreBtnBox { width: 100%; float: left; margin-top: 20px; } .moreBtnBox > button { width: 100%; height: 60px; float: left; color: #FFF; font-weight: bold; font-size: 15px; border-radius: 15px; } /* map */ #menu_map .section > .location { width: 100%; height: 40px; line-height: 40px; float: left; border-radius: 15px; text-align: center; background-color: #F1F1F1; color: #333; cursor: pointer; font-size: 13px; font-weight: 500; margin-bottom: 15px; } #menu_map .section > .location > i { color: #DC3333; margin-right: 5px; } #menu_map .section > .location > .none { opacity: 0.3; } #menu_map .section > .iframe { width: 100%; padding-bottom: 110%; float: left; } #menu_map .section > .iframe > * { position: absolute; width: 100%; height: 100%; left: 0; top: 0; border-radius: 20px; } #menu_map .section > .iframe > .cover { z-index: 2; } #menu_map .section > .none { width: 100%; float: left; margin-top: 20px; padding: 50px 0; } #menu_map .section > .none > * { width: 100%; float: left; text-align: center; } #menu_map .section > .none > i { margin-bottom: 20px; font-size: 64px; color: #BBB; } #menu_map .section > .none > p { font-size: 12px; color: #CCC; } /* login */ #menu_login .section > div { width: 100%; float: left; } #loginBox { border-radius: 20px; overflow: hidden; box-shadow: 2px 5px 20px 0 rgb(0 0 0 / 10%); } #loginBox > ul { width: 100%; float: left; } #loginBox > ul > li { width: 100%; float: left; border-bottom: 1px solid #EEE; } #loginBox > ul > li:last-of-type { border-bottom: 0; } #loginBox > ul > li > input { width: 100%; height: 50px; float: left; font-weight: 500; font-size: 13px; color: #333; background-color: #FFF; padding: 0 20px 0 45px; } #loginBox > ul > li > i { position: absolute; font-size: 16px; left: 20px; z-index: 2; top: 50%; transform: translateY(-50%); color: #AAA; transition: color 0.5s; } #loginBox > button { width: 100%; height: 60px; float: left; color: #FFF; font-weight: bold; font-size: 15px; } #menu_login .section > .link { text-align: center; margin: 30px 0; } #menu_login .section > .link > a { margin: 0 10px; color: #AAA; font-size: 12px; font-weight: 500; } #menu_login .section > .snsLogin { border-top: 1px solid #EFEFEF; padding-top: 20px; } #menu_login .section > .snsLogin > button { width: 100%; height: 50px; float: left; border-radius: 10px; font-size: 15px; font-weight: bold; color: #FFF; margin-bottom: 10px; } #menu_login .section > .snsLogin > button:last-of-type { margin-bottom: 0; } #menu_login .section > .snsLogin > button > img { height: 100%; margin-right: 5px; } #menu_login .section > .snsLogin > button.kakao { background-color: #FFE000; color: #3B1D1E; } #menu_login .section > .snsLogin > button.facebook { background-color: #425998; } #menu_login .section > .snsLogin > button.naver { background-color: #03D101; } #menu_join a { width: calc(calc(100% - 10px) / 2); float: left; margin-right: 10px; border-radius: 10px; padding: 20px 0; background-color: #FFF; box-shadow: 2px 5px 20px 0 rgb(0 0 0 / 10%); } #menu_join a > i { width: 100%; float: left; font-size: 32px; text-align: center; } #menu_join a > span { width: 100%; float: left; font-size: 16px; text-align: center; font-weight: 700; margin-top: 10px; } #menu_join a:last-of-type { margin-right: 0; } /* chat */ #menu_chat { background-color: #F2F2F2; } #menu_chat .menuTitle { display: none !important; } #menu_chat .copyright { display: none !important; } #menu_chat .section { margin-top: 0; padding-top: 50px; padding-bottom: 100px; } #menu_chat .section > div { width: 100%; float: left; padding: 20px; } #menu_chat .chatList { width: 100%; float: left; } #menu_chat .chatList > li { width: 100%; float: left; margin-bottom: 25px; } #menu_chat .chatList > li:last-of-type { margin-bottom: 0; } #menu_chat .chatList > li.company > p { text-align: left; float: left; } #menu_chat .chatList > li.user > p { text-align: right; float: right; } #menu_chat .chatList > li > p { width: 100%; } #menu_chat .chatList > li > p.name { font-size: 14px; font-weight: bold; color: #333; padding: 0 10px; margin-bottom: 5px; } #menu_chat .chatList > li > p.name > i { margin-right: 5px; } #menu_chat .chatList > li > p.memo { width: auto; max-width: 300px; background-color: #FFF; color: #333; font-weight: 500; padding: 15px; border-radius: 15px; line-height: 18px; } #menu_chat .chatList > li > p.date { font-size: 12px; padding: 0 10px; color: #AAA; margin-top: 10px; } #menu_chat .chatList > li.company > p.memo { color: #FFF; } #chatSendBox { position: fixed; max-width: 800px; width: 100%; height: 50px; left: 50%; margin-left: -400px; bottom: 50px; z-index: 13; background-color: #FFF; } #chatSendBox > input { width: calc(100% - 70px); height: 100%; float: left; padding: 0 20px; color: #333; font-weight: 500; font-size: 13px; background-color: #FFF; } #chatSendBox > button { width: 70px; height: 100%; float: left; text-align: center; color: #FFF; font-size: 13px; font-weight: bold; background-color: #333; } @media (max-width: 800px){ #header, #footer, .contents, #chatSendBox { max-width: 100%; left: 0; margin-left: 0; } } .todaypick { width: 100%; float: left; margin-bottom: 20px; } .todaypick > li { width: calc(calc(100% - 30px) / 4); float: left; margin-right: 10px; border-radius: 10px; cursor: pointer; padding: 15px 0; overflow: hidden; opacity: 0.5; } .todaypick > li.on { opacity: 1; } .todaypick > li:nth-of-type(4n) { margin-right: 0; } .todaypick > li > i { width: 100%; float: left; text-align: center; font-size: 21px; } .todaypick > li > span { width: 100%; float: left; text-align: center; font-weight: 500; margin-top: 10px; font-size: 12px; opacity: 0.8; } .todaypick > li > span.bg { position: absolute; width: 100%; height: 100%; left: 0; top: 0; opacity: 0.15; margin-top: 0; } .bestplace { width: 100%; float: left; } .bestplace > li { width: 100%; float: left; border-radius: 10px; cursor: pointer; padding: 15px; border: 1px solid #E5E5E5; margin-bottom: 10px; } .bestplace > li:last-of-type { margin-bottom: 0; } .bestplace > li > img { position: absolute; width: 70px; left: 15px; top: 50%; transform: translateY(-50%); border-radius: 5px; } .bestplace > li > .info { width: 100%; float: left; padding-left: 85px; } .bestplace > li > .info > p { width: 100%; float: left; } .bestplace > li > .info > .name { font-weight: bold; font-size: 21px; color: #000; margin-bottom: 5px; } .bestplace > li > .info > .place { font-size: 12px; color: #333; font-weight: 500; } .bestplace > li > .info > .place > i { margin-right: 5px; } .bestplace > li > .info > .like { font-size: 12px; color: #DC3333; margin-top: 2px; font-weight: 500; } .bestplace > li > .info > .like > i { margin-right: 5px; } #menu_test .test_q { width: 100%; float: left; margin-bottom: 10px; font-size: 13px; font-weight: bold; color: #000; margin-top: 20px; } #menu_test .test_q:first-of-type { margin-top: 0; } #menu_test .test_a { width: 100%; float: left; } #menu_test .test_a > .title { width: 100%; float: left; margin-bottom: 5px; font-size: 12px; font-weight: 500; } #menu_test .test_a > .title > .left { color: #33A474; } #menu_test .test_a > .title > .right { color: #88619A; } #menu_test .test_a > ul { width: 100%; float: left; display: flex; align-items: center; justify-content: space-between; } #menu_test .test_a > ul > li { float: left; border-radius: 100%; border: 2px solid #DDD; } #menu_test .test_a > ul > li { height: 45px; flex: 0 0 45px; } #menu_test .test_a > ul > li.green { border-color: #33A47A; } #menu_test .test_a > ul > li.purple { border-color: #88619A; } #menu_test .test_a > ul > li.s01 { height: 35px; flex: 0 0 35px; } #menu_test .test_a > ul > li.s02 { height: 25px; flex: 0 0 25px; } #menu_test .test_a > ul > li.s03 { height: 20px; flex: 0 0 20px; } #menu_test .test_a > ul > li.on { background-color: #DDD; } #menu_test .test_a > ul > li.on.green { background-color: #33A47A; } #menu_test .test_a > ul > li.on.purple { background-color: #88619A; } #menu_test .frm_input { width: 100%; height: 45px; float: left; border: 1px solid #DDD; padding: 0 15px; border-radius: 5px; font-weight: 500; font-size: 12px; } #mypage > .user { width: 100%; float: left; text-align: center; } #mypage > .user > img { width: 80px; border-radius: 100%; margin-bottom: 10px; } #mypage > .user > .name { font-size: 16px; font-weight: bold; color: #000; } #mypage > .user > .mb_id { font-size: 12px; font-weight: 500; color: #AAA; } #mypage > .moreLink { width: 100%; float: left; border-radius: 10px; background-color: #F5F5F5; padding: 15px; text-align: center; font-weight: 700; color: #333; font-size: 13px; } #mypage > .moreLink > i { margin-right: 5px; } #menu_list .filter { width: 100%; float: left; margin-bottom: 20px; } #menu_list .filter > .nice-select { width: 100px; float: left; } #menu_list .filter > .list { width: calc(100% - 110px); height: 42px; line-height: 42px; float: right; overflow-x: scroll; white-space: nowrap; } #menu_list .filter > .list > a { height: 38px; line-height: 38px; display: inline-block; margin-right: 5px; vertical-align: middle; background-color: #F5F5F5; padding: 0 10px; font-weight: 500; font-size: 12px; color: #333; border-radius: 5px; opacity: 0.4; } #menu_list .filter > .list > a.on { opacity: 1; }