/* Heaeder { */
.header {background-color: var(--white-color); box-shadow: 0 1px 6px rgba(0,0,0,0.25); border-bottom: 1px solid var(--line-color1); position: fixed; width: 100%; z-index: 10;}
.header .container {padding: 0 90px;}
.header .wrapper {width: 100%;}
.header-content {display: flex; align-items: center; justify-content: space-between; height: 85px;}

.header-right-content {display: flex; align-items: center; gap: 40px;}
.header-search {}
.header-search .sch_frm {}
.header-search form {display: flex; height: 46px; position: relative; width: 340px;}
.header-search .sch_stx {height: 100%; padding: 0 17px; border-radius: 23px; background-color: #E2E2E2; border: none; font-weight: 400; font-size: 17px; color: #303030; padding-right: 45px; width: 100%;}
.header-search .sch_submit {width: 22px; height: 22px; border: none; background-color: transparent; display: flex; text-align: center; justify-content: center; font-weight: 500; font-size: 20px; color: #333333; position: absolute; top: 50%; right: 17px; transform: translateY(-50%);}
.header-right-menu {display: flex; align-items: center; gap: 34px;}
.header-right-menu a {display: flex; align-items: center; gap: 5px; font-weight: 500; font-size: 16px; color: var(--black-color); position: relative;}
.header-right-menu a::before {content: ''; width: 1px; height: 18px; background-color: var(--line-color1); position: absolute; top: 3px; left: -17px;}
.header-right-menu a:first-child::before {display: none;}
.header-right-menu .ic_num {font-style: normal; font-weight: 600; width: 18px; height: 18px; font-size: 10px; background-color: var(--main-color); border-radius: 50%; color: var(--white-color); letter-spacing: 0; display: flex; align-items: center; justify-content: center;}
/* } Heaeder */

/* Footer { */
.top-btn {display: flex; flex-direction: column; align-items: center; justify-content: center; position: fixed; bottom: 20px; right: calc((100% - 1400px) / 2); width: 64px; height: 64px; border-radius: 50%; background-color: var(--white-color); box-shadow: 0 4px 10px rgba(0,0,0,0.3); font-weight: 600; font-size: 15px; color: var(--black-color); transition: .3s; opacity: 0; visibility: hidden; z-index: 2;}
.top-btn.is-show {opacity: 1; visibility: visible;}
.top-btn.is-end {bottom: 210px;}
.top-btn i {font-weight: 500; font-size: 18px;}

.footer {background-color: #0F1219; padding: 27px 0 80px;}
.footer-content {display: flex; align-items: center; justify-content: space-between;}
.footer-content-left {}
.footer-menu {margin: 10px 0 17px; display: flex; align-items: center; gap: 33px;}
.footer-menu a {font-weight: 700; font-size: 16px; color: var(--white-color); position: relative;}
.footer-menu a::before {content: ''; width: 3px; height: 3px; border-radius: 50%; background-color: var(--white-color); display: flex; position: absolute; top: 10px; left: -16px;}
.footer-menu a:first-child::before {display: none;}
.footer-menu a:first-child {color: #3AA163;}
.footer-info {display: flex; align-items: flex-start; gap: 30px;}
.footer-info-item {font-weight: 400; font-size: 15px; color: var(--white-color); line-height: 1.46;}
.footer-copyright {font-weight: 400; font-size: 15px; color: var(--white-color); text-transform: uppercase; line-height: 1.46; margin-top: 4px;}
.realted-site {}
.realted-site select {height: 50px; padding-left: 28px; border: 1px solid rgba(255,255,255,0.15); background-color: transparent; border-radius: 5px; font-weight: 400; font-size: 15px; color: var(--white-color); width: 220px; background: url('/source/img/icon-select2.png') no-repeat center right 26px; padding-right: 42px; appearance: none; cursor: pointer;}
.footer-sns-list {display: flex; align-items: center; justify-content: flex-end; gap: 5px; margin-top: 18px;}
.footer-sns-list .sns-btn {font-size: 0;}
.footer-sns-list .sns-btn i {font-weight: 500; font-size: 22px; color: var(--white-color);}
/* } Footer */

/* Main top { */
.main-top {margin-top: 30px;}
.main-top-content {display: flex; align-items: center; justify-content: center; position: relative;}
.main-top-banner {position: absolute; left: 0; bottom: 0; z-index: 1;}
.main-top-content .tab-layout {width: 478px; max-width: 100%;}
/* } Main top */

/* Category { */
.gnb {padding: 20px 0; border-bottom: 1px solid var(--line-color1);}
.gnb-wrap {display: flex; align-items: center; justify-content: space-between;}
.category-wrap {display: flex; align-items: center; gap: 20px;}
.all-category-btn {display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 8px; font-weight: 700; font-size: 17px; color: #555555; gap: 10px; padding: 0 12px; transition: .3s; position: relative;}
.all-category-btn .menu-line {width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;}
.all-category-btn .menu-line span {display: flex; align-items: center; justify-content: center; width: 18px; height: 2px; background-color: var(--black-color); position: relative; transition: .3s;}
.all-category-btn .menu-line span::before {content: ''; width: 100%; height: 2px; background-color: var(--black-color); position: absolute; top: -8px; left: 0; transition: .3s;}
.all-category-btn .menu-line span::after {content: ''; width: 100%; height: 2px; background-color: var(--black-color); position: absolute; top: 8px; left: 0; transition: .3s;}
.all-category-btn:hover {background-color: #F4F4F4;}

.all-category-btn.is-active {color: var(--main-color);}
.all-category-btn.is-active .menu-line span {background-color: transparent;}
.all-category-btn.is-active .menu-line span::before {transform: translateY(-50%) rotate(45deg); top: 50%;}
.all-category-btn.is-active .menu-line span::after {transform: translateY(-50%) rotate(-45deg); top: 50%;}

.category-list {display: flex; align-items: center; gap: 20px;}
.category-list a {font-weight: 700; font-size: 17px; color: #555555; transition: .3s; position: relative; display: flex; align-items: center; justify-content: center; padding: 0 7px;}
.category-list a::before {content: ''; width: 0; height: 3px; background-color: var(--main-color); position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); transition: .3s;}
.category-list a.is-active {color: var(--main-color);}
.category-list a.is-active::before {width: 100%;}
.category-list a:hover {color: var(--main-color);}
.category-list a:hover::before {width: 100%;}

.sort-search {}
.sort-search form {display: flex; align-items: center; gap: 16px;}
.sort-search-item {}
.sort-search-item .i-select {height: 40px; width: 150px;}
.sort-search-item button {display: flex; align-items: center; justify-content: center; height: 40px; width: 70px; border-radius: 4px; background-color: #333; font-weight: 600; font-size: 18px; color: var(--white-color); transition: .3s;}
.sort-search-item button:hover {background-color: var(--hover-color);}

.all-category-list {position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding: 26px 16px 26px 19px; background-color: var(--white-color); z-index: 2; border-radius: 5px; box-shadow: 0 0 8px rgba(0,0,0,0.25); min-width: 160px; display: flex; flex-direction: column; gap: 27px; display: none;}
.all-category-item {}
.all-category-item a {display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 16px; color: var(--black-color); transition: .3s;}
.all-category-item a:hover {color: var(--main-color);}
.all-category-item .depth2-ul {display: none;}
/* } Category */

/* Common { */
#contents_body {padding-bottom: 100px;}
#container {padding-top: 85px;}

.section-head {padding-bottom: 30px;}
.section-title-content {display: flex; align-items: center;}
.section-title-content.jcsb {justify-content: space-between;}
.section-title {display: flex; align-items: center; gap: 10px;}
.section-title-icon {width: 52px; aspect-ratio: 1 / 1;}
.section-title .t {font-family: 'Aggravo'; font-weight: 500; font-size: 30px; color: var(--black-color);}
.section-title .t span {color: var(--main-color);}
/* } Common */

/* Main { */
.main-contents {}
.main-section:not(.no-padding-section) {padding: 50px 0;}
.main-section:last-child {padding-bottom: 0;}

.main-visual-section {padding: 35px 0 55px; background: #F6F8F8; background: linear-gradient(135deg,rgba(246, 248, 248, 1) 0%, rgba(239, 247, 247, 1) 41%, rgba(215, 235, 229, 1) 100%);}
.main-visual-slider {position: relative;}
.main-visual-slide {width: 510px; padding: 35px 60px; border-radius: 15px; border: 1px solid transparent; background-color: transparent; transition: .3s; flex-shrink: 0;}

.main-visual-slide.swiper-slide-active {border-color: var(--line-color1); background-color: var(--white-color);}

.slider-ctr {display: flex; align-items: center;}
.slider-ctr button {width: 70px; aspect-ratio: 1 / 1; border-radius: 50%; border: 1px solid var(--line-color1); background-color: var(--white-color); display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 24px; transition: .3s;}
.slider-ctr button:hover {border-color: var(--main-color); box-shadow: 0 0 4px rgba(0,0,0,0.3);}
.slider-ctr .prev {}
.slider-ctr .next {}

.main-visual-ctr {width: 580px; max-width: 100%; justify-content: space-between; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2;}

.sort-list {display: flex; align-items: center; gap: 30px;}
.sort-list .sort-btn {font-weight: 500; font-size: 16px; color: var(--black-color); border: none; background-color: transparent; display: flex; align-items: center; gap: 10px; transition: .3s; position: relative;}
.sort-list .sort-btn::before {content: ''; width: 1px; height: 12px; background-color: #B5B5B5; position: absolute; top: 3px; left: -15px;}
.sort-list .sort-btn:first-child::before {display: none;}
.sort-list .sort-btn i {font-weight: 500;}
.sort-list .sort-btn:hover {color: var(--main-color); font-weight: 600;}
/* } Main */

/* Main - Map { */
.main-map-section {padding: 38px 0; background: #F6F7F8; background: linear-gradient(135deg,rgba(246, 247, 248, 1) 0%, rgba(239, 244, 247, 1) 41%, rgba(215, 216, 235, 1) 100%);}
.main-map-content {position: relative; height: 0; width: 100%; padding-bottom: 50%; overflow: hidden; border: 1px solid var(--line-color1); border-radius: 15px;}
.main-map-content #map {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%;}
.current-location-btn {position: absolute; top: 35px; right: 40px; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 4px; border: 1px solid var(--main-color); background-color: var(--main-color); font-weight: 500; font-size: 18px; color: var(--white-color); height: 40px; padding: 0 13px;}

.seller-popup {width: 400px; max-width: 100%; border: 2px solid #45917F; border-radius: 8px; background-color: var(--white-color); padding: 25px 30px; position: relative;}
.seller-popup-close {position: absolute; top: 10px; right: 10px; border: none; background-color: transparent; font-weight: 500; font-size: 18px; color: var(--main-color);}
.seller-pop-top {display: flex; align-items: flex-start; padding-bottom: 14px;}
.seller-pop-top .seller-thumb {width: 87px; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; font-size: 0;}
.seller-information {width: calc(100% - 87px); padding-left: 8px;}
.seller-information .seller-title {display: flex; align-items: center; gap: 5px 10px; flex-wrap: wrap;}
.seller-information .seller-title .name {font-weight: 700; font-size: 22px; color: var(--main-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.seller-information .seller-title a {border: 1px solid var(--line-color1); border-radius: 12px; display: flex; align-items: center; justify-content: center; height: 24px; font-weight: 500; font-size: 13px; color: #929292; width: 104px; transition: .3s;}
.seller-information .seller-title a:hover {border-color: var(--main-color); color: var(--main-color);}
.seller-information .seller-desc {font-weight: 500; font-size: 16px; color: var(--black-color); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px;}
.seller-pop-bottom {border-top: 1px solid var(--line-color1); padding-top: 10px;}
.seller-pop-bottom .seller-data {display: flex;}
.seller-pop-bottom .seller-data ~ .seller-data {margin-top: 18px;}
.seller-pop-bottom .seller-data.type-row {flex-direction: column; gap: 4px;}
.seller-pop-bottom .seller-data.type-col {gap: 20px;}
.seller-pop-bottom .seller-data-item {display: flex; align-items: flex-start; gap: 5px;}
.seller-pop-bottom .seller-data-item .t {display: flex; height: 21px; border: 1px solid var(--line-color1); border-radius: 2px; font-weight: 500; font-size: 14px; color: var(--black-color); padding: 0 7px;}
.seller-pop-bottom .seller-data-item .t.red {background-color: #CD006A; border-color: #CD006A; color: var(--white-color);}
.seller-pop-bottom .seller-data-item .c {font-weight: 500; font-size: 14px; color: var(--black-color);}
/* } Main - Map */