.sub-content {margin-bottom: 100px;} @media all and (max-width: 1024px){ .sub-content {margin-bottom: 50px;} } @media all and (max-width: 768px){ .sub-content {margin-bottom: 30px;} } /*------------------------------------------------------------------- 분류그룹 : 서브레이아웃 상단 -------------------------------------------------------------------*/ /* 서브비쥬얼 */ #spot {padding-top: 153px;} #spot .depth1-title {font-size: 24px; font-weight: 700; padding-left: 5px;} #spot .depth1-title span {display: inline-block; position: relative; width: 9px; height: 16px; background-color: #1B9E50; margin-right: 10px; vertical-align: -1px;} #spot .depth1-title span::before, #spot .depth1-title span::after {display: block; content: ''; position: absolute; top: 0; bottom: 0; margin: auto 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent;} #spot .depth1-title span::before {right: 100%; border-right: 5px solid #1B9E50;} #spot .depth1-title span::after {left: 100%; border-left: 5px solid #1B9E50;} /* 2뎁스 탭메뉴 */ #spot .depth2-wrap {display: flex; align-items: center; margin-top: 27px; margin-bottom: 103px; gap: 10px; flex-wrap: wrap;} #spot .depth2-title {flex-basis: 370px; font-size: 45px; font-weight: 700;} #spot .depth2-wrap.no-depth2 .depth2-title {flex-basis: 100%;} #spot .depth2-list {display: flex; align-items: center; width: 100%; background-color: #f3f3f3; border-radius: 25px;} #spot .depth2-list .item {display: flex; align-items: center; justify-content: center; width: 100%; height: 50px; border-radius: 25px; font-size: 16px; font-weight: 700; transition: background-color 0.2s, color 0.2s; padding: 0 5px; text-align: center;} #spot .depth2-list .item:hover, #spot .depth2-list .item.active {background-color: #1B9E50; color: #fff;} /* 3뎁스 탭메뉴 */ #container .depth3-list {display: flex; align-items: center;overflow-x: auto; margin-bottom: 40px; gap: 60px;} #container .depth3-list.center {justify-content: center;} #container .depth3-list .item {position: relative; font-size: 22px; font-weight: 700; color: #98A1B7; transition: 0.2s; text-align: center; padding-bottom: 6px;} #container .depth3-list .item::before, #container .depth3-list .item::after {display: block; content: ''; position: absolute;} #container .depth3-list .item::before {top: -9px; right: -31px; bottom: 0; margin: auto 0; width: 1px; height: 16px; background-color: #d9d9d9;} #container .depth3-list .item:last-child::before {display: none;} #container .depth3-list .item::after {display: block; position: absolute; transition: 0.2s; bottom: 0; right: 0; width: 0; height: 2px; background-color: #1B9E50; margin-top: 7px;} #container .depth3-list .item:hover::after, #container .depth3-list .item.active::after {width: 100%; left: 0;} #container .depth3-list .item:hover, #container .depth3-list .item.active {color: #000;} /* 공유하기 & 프린트 */ #spot .share-wrap {display: flex; align-items: center; position: absolute; top: 339px; left: 20px; transform: rotate(90deg); transform-origin: left bottom;} #spot .share-wrap .depth1-name {font-size: 18px; font-weight: 700; color: #1B9E50;} #spot .share-wrap .depth1-name::after {display: inline-block; content: ''; vertical-align: middle; width: 100px; height: 1px; background-color: #000; margin: 0 22px;} #spot .share-wrap .share-panel {position: relative; transform: rotate(-90deg); margin-right: 10px;} #spot .share-wrap .share-btn {display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; font-size: 0; line-height: 0;} #spot .share-wrap .share-btn::before {font-size: 18px; color: #fff;} #spot .share-wrap .share-list {display: none; position: absolute; top: 0; left: 35px; font-size: 0; line-height: 0; gap: 5px;} #spot .share-wrap .share-item {display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; background-color: #fff; box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);} #spot .share-wrap .share-item::before {display: block; content: ''; width: 18px; height: 18px; background: no-repeat center;} #spot .share-wrap .share-item.naver::before {background-image: url('../images/sub/naver-ico.svg');} #spot .share-wrap .share-item.kakao::before {background-image: url('../images/sub/kakao-ico.svg');} #spot .share-wrap .share-item.facebook::before {background-image: url('../images/sub/facebook-ico.svg');} #spot .share-wrap .share-item.cafe::before {background-image: url('../images/sub/cafe-ico.svg');} #spot .share-wrap .share-item.copy::before {background-image: url('../images/sub/link-ico.svg');} #spot .share-wrap .share-btn.share-toggle {background-color: #53AFBD; transition: 0.2s;} #spot .share-wrap .share-btn.share-toggle.active {background-color: #41454A;} #spot .share-wrap .share-btn.share-toggle.active::before {content: "\eb98";} #spot .share-wrap .share-btn.print {background-color: #8FC31F; transform: rotate(-90deg);} /*------------------------------------------------------------------- @media -------------------------------------------------------------------*/ @media all and (max-width: 1610px) { #spot .depth2-wrap.no-depth2 .depth2-title {flex-basis: inherit;} #spot .share-wrap {position: static; transform: none;} #spot .share-wrap .depth1-name {display: none;} #spot .share-wrap .share-panel, #spot .share-wrap .share-btn.print {transform: none;} #spot .share-wrap .share-list {top: 100%; left: 0; margin-top: 5px;} } @media all and (max-width: 1200px) { #spot {padding-top: 100px; margin-bottom: 30px;} #spot .depth2-wrap {display: block; margin-top: 20px;} #spot .depth2-title {display: inline-block; vertical-align: middle;} #spot .depth2-list {display: inline-flex; margin-top: 20px;} #container .depth3-list {gap: 50px;} #spot .share-wrap {display: inline-flex; vertical-align: middle;} } @media all and (max-width: 1024px) { #spot .depth1-title {font-size: 18px;} #spot .depth2-wrap {margin-bottom: 30px;} #spot .depth2-title {font-size: 35px;} #spot .depth2-list {display: flex;} #spot .depth2-list .item {width: 100%; height: 45px;} #container .depth3-list {gap: 30px;} #container .depth3-list .item {font-size: 20px;} #container .depth3-list .item::before {right: -16px;} #spot .share-wrap {justify-content: end;} } @media all and (max-width: 768px) { #spot .depth2-list, #container .depth3-list {overflow-x: auto;} #spot .depth1-title {font-size: 16px;} #spot .depth2-wrap {margin-top: 10px; margin-bottom: 20px;} #spot .depth2-title {font-size: 25px;} #spot .depth2-list .item {height: 40px; font-size: 14px; min-width: max-content; padding: 0 10px;} #container .depth3-list {margin-bottom: 20px;} #container .depth3-list.center {justify-content: flex-start;} #container .depth3-list .item {font-size: 16px; min-width: max-content;} #spot .share-wrap {margin-top: 10px; vertical-align: baseline;} #spot .share-wrap .share-btn.print {display: none;} #spot .share-wrap .share-panel {margin-right: 0;} } /*------------------------------------------- ------------------------ 분류그룹 : 서브컨텐츠 템플릿 -------------------------------------------------------------------*/ @font-face { font-family: "Jalnan"; src: url("../font/Jalnan.woff2") format("woff2"), url('../font/Jalnan.woff') format('woff');; font-style: normal; font-weight: 400; } /* 비쥬얼 없을 때 */ #con .no-visual {padding-top: 130px;} /* 비쥬얼 박스 */ #con .temp-visual {display: flex; align-content: center; flex-wrap: wrap; border-radius: 12px; height: 300px; background: url('../images/sub/visual-bg01.png') no-repeat center / cover; color: #fff; padding: 20px 110px; margin-bottom: 50px; position: relative;} #con .temp-visual .title {flex-basis: 100%; font-weight: 700; font-size: 40px; text-shadow: 0 0 10px #000;} #con .temp-visual .text {flex-basis: 100%; font-weight: 700; font-size: 20px; margin-top: 20px; text-shadow: 0 0 10px #000;} #con .temp-visual .temp-select {position: absolute; top: 30px; right: 30px; background-color: #fff; border: none; width: 150px; height: 40px; border-radius: 40px; box-shadow: 5px 10px 10px 0px rgba(0, 0, 0, 0.25); line-height: 1; font-size: 14px;} @media all and (max-width: 1024px) { #con .temp-visual {padding: 20px 40px;} } @media all and (max-width: 768px) { #con .temp-visual {padding: 50px 20px; height: auto; margin-bottom: 20px;} #con .temp-visual .title {font-size: 25px;} #con .temp-visual .text {font-size: 14px; margin-top: 10px;} #con .temp-visual .temp-select {width: auto; top: 10px; right: 10px;} } /* 타이틀 */ [class^="temp-tit"] {position: relative; z-index: 1; font-size: 24px; font-weight: 700; color: #000; padding-top: 5px; padding-left: 9px; margin: 50px 0 20px;} [class^="temp-tit"]::before {display: block; content: ''; position: absolute; top: 0; left: 0; z-index: -1; width: 20px; height: 20px; border-radius: 50%;} .temp-tit-green::before {background-color: #1B9E50;} .temp-tit-red::before {background-color: #D1303B;} @media all and (max-width: 768px) { [class^="temp-tit"] {margin: 30px 0 10px; font-size: 16px;} [class^="temp-tit"]::before {width: 15px; height: 15px;} } /* 테이블 */ #con .temp-table {border-top: 2px solid #000; width: 100%;} #con .temp-table.fixed {table-layout: fixed;} #con .temp-table th, #con .temp-table td {padding: 10px 20px; font-size: 16px; border-bottom: 1px solid #e9e9e9; height: 60px; border-right: 1px solid #e9e9e9;} #con .temp-table thead th, #con .temp-table tbody th {background-color: #F5F7F9; color: #000;} #con .temp-table tbody th {border-right: 1px solid #e9e9e9;} #con .temp-table tbody td {color: #454545; text-align: center;} #con .temp-table th:last-child, #con .temp-table td:last-child {border-right-width: 0;} #con .temp-table th.border-right, #con .temp-table td.border-right {border-right-width: 1px;} @media all and (max-width: 1024px) { #con .temp-table-scroll {overflow-x: scroll;} #con .temp-table-scroll .temp-table {width: 1100px;} } @media all and (max-width: 768px) { #con .temp-table th, #con .temp-table td {font-size: 14px; height: 40px;} } /* information */ #con .temp-info {color: #1B9E50; position: relative; padding-left: 29px; font-size: 16px; font-weight: 500; padding-top: 2px;} #con .temp-info::before {display: block; position: absolute; top: 0; left: 0; font-family: 'remixicon'; font-size: 24px; content: "\ee59"; line-height: 1;} @media all and (max-width: 768px) { #con .temp-info {font-size: 14px; padding-left: 25px; padding-top: 0;} #con .temp-info::before {font-size: 20px;} } /* ul */ #con .temp-blt > li {position: relative; font-size: 16px; color: #454545; padding-left: 10px;} #con .temp-blt > li + li {margin-top: 5px;} #con .temp-blt > li::before {content: ''; position: absolute; top: 8px; left: 0; width: 3px; height: 3px; background-color: #454545; border-radius: 50%;} /* ol */ #con .temp-num {counter-reset: item; } #con .temp-num > li {display: flex; font-size: 16px; color: #454545; gap: 4px; counter-increment: item;} #con .temp-num > li + li {margin-top: 5px;} #con .temp-num > li::before {content: counter(item) '.'; min-width: max-content;} @media all and (max-width: 768px) { #con .temp-blt > li, #con .temp-num > li {font-size: 14px;} #con .temp-blt > li + li, #con .temp-num > li + li {margin-top: 3px;} } /*------------------------------------------------------------------- @iinput & select -------------------------------------------------------------------*/ .temp-select, .temp-input, .temp-textarea {width: 100%; height: 60px; padding: 0 20px; background-color: #fff; border: 1px solid #e9e9e9; font-size: 16px; color: #454545; text-align: left;} textarea.temp-input {height: 216px; resize: none; padding: 20px;} .temp-select {background-image: url('../images/sub/select-bg.svg'); background-repeat: no-repeat; background-position: right 10px center; padding-right: 44px;} .temp-input::placeholder {color: #9c9c9c;} .temp-input:disabled, .temp-input:read-only {background-color: #F5F7F9;} .temp-select.w-auto, .temp-input.w-auto {max-width: 100%; width: 300px;} .temp-select.small, .temp-input.small, .temp-textarea.small {height: 40px;} /*------------------------------------------------------------------- @media -------------------------------------------------------------------*/ @media all and (max-width: 1024px) { .temp-select, .temp-input, .temp-textarea {height: 50px;} .temp-select.small, .temp-input.small, .temp-textarea.small {height: 36px;} } @media all and (max-width: 768px) { .temp-select, .temp-input, .temp-textarea {padding: 0 10px; height: 40px; font-size: 14px;} .temp-select {background-position: right 5px center; padding-right: 35px;} textarea.temp-input {padding: 10px; height: 100px;} .temp-blt > li, .temp-num > li {font-size: 14px;} .temp-input.w-auto, .temp-select.w-auto {width: 100%;} .temp-select.small, .temp-input.small, .temp-textarea.small {height: 30px;} } /* radio & checkbox */ .temp-radio-wrap, .temp-check-wrap {display: flex; flex-wrap: wrap; position: relative; gap: 20px;} .temp-radio-wrap input[type="radio"], .temp-check-wrap input[type="checkbox"] {position: absolute; top: 0; left: 0; opacity: 0; width: 0; height: 0;} .temp-radio-wrap label, .temp-check-wrap label {font-size: 16px; font-weight: 400; color: #454545; padding-left: 25px; position: relative; min-height: 20px; display: block; cursor: pointer; padding-top: 1px;} .temp-radio-wrap label::before, .temp-check-wrap label::before, .temp-radio-wrap label::after, .temp-check-wrap label::after {position: absolute; content: ''; display: block; box-sizing: border-box;} .temp-radio-wrap label::before, .temp-check-wrap label::before {width: 20px; height: 20px; border: 1px solid #e9e9e9; left: 0; top: 0; background-color: #fff;} .temp-radio-wrap label::after, .temp-check-wrap label::after {opacity: 0; transition: 0.2s;} .temp-radio-wrap input[type="radio"]:checked + label::after, .temp-check-wrap input[type="checkbox"]:checked + label::after {opacity: 1;} .temp-radio-wrap input[type="radio"]:disabled + label::before, .temp-check-wrap input[type="checkbox"]:disabled + label::before {background-color: #F5F7F9;} /* radio */ .temp-radio-wrap label::before {border-radius: 50%;} .temp-radio-wrap label::after {width: 12px; height: 12px; background-color: #1B9E50; border-radius: 50%; top: 4px; left: 4px; opacity: 0;} .temp-radio-wrap input[type="radio"]:disabled:checked + label::after {background-color: #c3c3c3;} /* checkbox */ .temp-check-wrap label::after {font-family: 'remixicon'; font-size: 18px; color: #1B9E50; top: 1px; left: 1px; content: "\eb7b"; line-height: 18px;} .temp-check-wrap input[type="checkbox"]:disabled:checked + label::after {color: #c3c3c3;} /* 게시판 검색영역 */ #con .board-search {display: flex; gap: 10px; justify-content: center; padding: 30px; background-color: #F5F7F9; margin-bottom: 50px;} #con .board-search .temp-select {min-width: 180px; width: auto; border: none;} #con .board-search .temp-input {border: none;} #con .board-search .input-area {position: relative; width: 500px;} #con .board-search .input-area .temp-input {padding-right: 54px;} #con .board-search .search-btn {position: absolute; right: 20px; top: 0; bottom: 0; margin: auto 0; width: 24px; height: 24px; font-size: 0; background: none;} #con .board-search .search-btn::before {font-size: 24px;} #con .board-head {display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;} #con .board-head .total-page {font-size: 18px; font-weight: 600; color: #555;} #con .board-head .total-page > i {display: none;} #con .board-head .total-page > strong {font-weight: 600; color: inherit;} #con .board-head .total-page > strong:first-of-type {margin: 0 4px; color: #1B9E50; font-size: 22px; font-weight: 700; vertical-align: -0.07em;} #con .board-head .search-area {display: flex; align-items: center; gap: 10px;} #con .board-head .search-area .temp-select, #con .board-head .search-area .temp-input {height: 44px; border: 1px solid #d5d5d5; border-radius: 7px; background-color: #fff; color: #666; font-size: 15px;} #con .board-head .search-area .temp-select {min-width: 140px; width: auto; padding: 0 40px 0 16px; background: #fff url('../images/sub/select-bg.svg') no-repeat right 14px center / 18px 18px; -webkit-appearance: none; appearance: none; cursor: pointer;} #con .board-head .search-area .input-area {position: relative; width: 300px;} #con .board-head .search-area .input-area .temp-input {width: 100%; padding: 0 48px 0 16px;} #con .board-head .search-area .search-btn {position: absolute; right: 14px; top: 0; bottom: 0; margin: auto 0; width: 24px; height: 24px; font-size: 0; color: #555; background: none;} #con .board-head .search-area .search-btn::before {font-size: 20px;} #con .board-head .search-area .temp-select:focus, #con .board-head .search-area .temp-input:focus {border-color: #1B9E50; outline: none;} #con .board-search-toggle {display: none;} #con .board-head .search-area .temp-btn {height: 60px; font-weight: 400; font-size: 16px;} @media all and (max-width: 1200px) { #con .board-search {flex-wrap: wrap;} #con .board-search .temp-select {min-width: auto; flex-basis: calc(50% - 5px);} #con .board-search .input-area {width: auto; flex-basis: calc(50% - 5px);} #con .board-head {display: flex; flex-wrap: wrap; gap: 12px 20px; position: relative; margin-bottom: 20px;} #con .board-head .total-page {margin: 0; padding: 0;} #con .board-head .search-area {justify-content: end; margin-left: auto;} #con .board-head .search-area .temp-select {min-width: 120px; width: auto;} #con .board-head .search-area .input-area {width: 260px;} #con .board-head .search-area .temp-btn {height: 44px; padding: 0 20px;} } @media all and (max-width: 1024px) { #con .board-head .search-area .temp-btn {height: 40px;} } @media all and (max-width: 768px) { #con .board-search {padding: 10px; margin-bottom: 30px;} #con .board-search .search-btn {right: 5px;} #con .board-search .search-btn::before {font-size: 20px;} #con .board-search .input-area .temp-input {padding-right: 34px;} .temp-radio-wrap, .temp-check-wrap {gap: 10px;} .temp-radio-wrap label, .temp-check-wrap label {font-size: 14px;} #con .board-head .total-page {margin-bottom: 10px; font-size: 16px;} #con .board-head .total-page > strong:first-of-type {margin: 0 2px; font-size: 19px;} #con .board-head .search-area {flex-wrap: wrap; gap: 8px; width: 100%; margin-left: 0;} #con .board-head .search-area .temp-select, #con .board-head .search-area .input-area {width: 100%;} #con .board-head .search-area .input-area .temp-input {padding-right: 44px;} #con .board-head .search-area .search-btn {right: 12px;} #con .board-head .search-area .search-btn::before {font-size: 20px;} #con .board-head.has-search-toggle {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 10px;} #con .board-head.has-search-toggle .total-page {flex: 1; min-width: 0; margin: 0; padding: 0;} #con .has-search-toggle .board-search-toggle {display: flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0; height: 44px; padding: 0 14px; border: 1px solid #1B9E50; border-radius: 7px; background: #fff; color: #178943; font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer;} #con .has-search-toggle .board-search-toggle i {font-size: 20px; font-weight: 400; line-height: 1;} #con .has-search-toggle.search-open .board-search-toggle {background: #edf8f0;} #con .board-head.has-search-toggle .search-area {flex-basis: 100%; max-height: 0; margin: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: max-height .3s ease, margin .3s ease, opacity .2s ease, visibility 0s linear .3s;} #con .board-head.has-search-toggle.search-open .search-area {max-height: 400px; margin-top: 12px; opacity: 1; visibility: visible; transition: max-height .3s ease, margin .3s ease, opacity .2s ease, visibility 0s;} #con .board-head.has-search-toggle .search-area .temp-btn {position: static; width: 100%;} } @media all and (max-width: 460px) { #con .board-search .temp-select, #con .board-search .input-area {flex-basis: 100%;} } /* 게시판 글없음 */ #con .board-no-post {text-align: center; font-size: 20px; padding: 20px 0;} /* 일반게시판 목록 */ #con .board-list {border-top: 2px solid #000; width: 100%;} #con .board-list thead th {font-size: 16px; font-weight: 600; border-bottom: 1px solid #e9e9e9; height: 60px; padding: 5px 10px;} #con .board-list tbody td {font-size: 16px; color: #454545; text-align: center; border-bottom: 1px solid #e9e9e9; height: 60px; padding: 5px 10px;} #con .board-list tbody td.subject {text-align: left;} #con .board-list tbody td.subject .inner {display: flex; align-items: center;} #con .board-list tbody td.subject .new, #con .board-list tbody td.subject .update {width: 20px; line-height: 20px; border-radius: 50%; text-align: center; color: #fff; font-size: 12px; font-weight: 900; min-width: 20px; margin-left: 10px;} #con .board-list tbody td.subject .new {background-color: #D1303B;} #con .board-list tbody td.subject .update {background-color: #1B9E50;} #con .board-list tbody td a:hover {text-decoration: underline;} #con .board-list tbody td .ellipsis {display: -webkit-inline-box; max-width: 100%; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1; text-align: left;} #con .board-list tbody td[class^="color"] {font-weight: 600;} #con .board-list tbody td [class^="cate"] {display: inline-flex; align-items: center; justify-content: center; min-width: 68px; height: 26px; padding: 0 10px; font-size: 12px; font-weight: 700; border-radius: 30px; color: #fff; box-sizing: border-box; line-height: 1;} #con .board-list tbody td .notice-ico {font-size: 0; line-height: 0; width: 30px; height: 30px; border-radius: 50%; background-color: #53AFBD; display: inline-flex; align-items: center; justify-content: center;} #con .board-list tbody td .notice-ico::before {display: block; font-family: 'remixicon'; font-size: 18px; color: #fff; content: '\f2a2';} #con .board-list tbody td .cate1 {background-color: #c7c7c7;} #con .board-list tbody td .cate2 {background-color: #1B9E50;} #con .board-list tbody td .file-ico {font-size: 24px; color: #1B9E50;} #con .board-list-btn {display: flex; align-items: center; margin-top: 30px; margin-bottom: -65px; gap: 10px; } #con .board-list-btn.right {justify-content: end;} #con .board-list-btn.center {justify-content: center;} #con .board-list-btn .temp-btn {height: 40px; font-size: 16px; min-width: 60px; padding: 0 10px;} @media all and (max-width: 1024px) { #con .board-list-scroll {overflow-x: auto;} #con .board-list {width: 1024px;} } @media all and (max-width: 768px) { #con .board-list thead th, #con .board-list tbody td {font-size: 14px; height: 45px;} #con .board-list tbody td .file-ico {font-size: 20px;} #con .board-list-btn {margin-top: 10px; margin-bottom: 0;} #con .board-list-btn .temp-btn {min-width: 50px;} } /* 게시판 상세페이지 */ #con .board-view .subject {display: flex; align-items: center; justify-content: center; border-top: 2px solid #000; text-align: center; min-height: 100px; padding: 10px 0; font-size: 24px; font-weight: 700; border-bottom: 1px solid #e9e9e9;} #con .board-view .info-area {display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; border-bottom: 1px solid #e9e9e9; min-height: 70px; padding: 10px 30px;} #con .board-view .left-cont {display: flex; align-items: center; gap: 50px;} #con .board-view .left-cont .temp-btn + .temp-btn {margin-left: -20px;} #con .board-view .info-item {display: flex; align-items: center; gap: 20px; font-size: 16px; color: #454545;} #con .board-view .info-item span {font-weight: 700; color: #32A862;} #con .board-view .file-wrap {display: flex; gap: 10px; flex-wrap: wrap;} #con .board-view .file-wrap > a {display: flex; align-items: center; gap: 13px; font-size: 16px; color: #000;} #con .board-view .file-wrap > a::before {display: block; content: ''; width: 38px; height: 38px; border-radius: 50%; background: #53AFBD url('../images/sub/board-view-file.svg') no-repeat center;} #con .board-view .file-wrap > a:hover {text-decoration: underline;} #con .board-view .view-cont {padding: 50px 0; min-height: 500px;} #con .board-view .view-cont object {width: 100% !important; height: auto !important; aspect-ratio: 16 / 9;} #con .board-view .view-video {width: 100%;} #con .board-view .view-video iframe {width: 100%; height: 100%;} #con .board-view .copyright {display: flex; align-items: center; justify-content: center; background-color: #F5F7F9; min-height: 70px; padding: 10px; gap: 20px; margin-bottom: 46px;} #con .board-view .copyright > p {font-size: 16px; font-weight: 500;} #con .board-view .view-link-wrap {display: flex; position: relative; height: 70px; border-top: 1px solid #e9e9e9; border-bottom: 1px solid #e9e9e9; padding: 0 30px; align-items: center; justify-content: space-between;} #con .board-view .arrow {display: flex; font-size: 16px; gap: 20px; position: relative; align-items: center; max-width: calc(50% - 30px);} #con .board-view .arrow.next {text-align: right;} #con .board-view .arrow > span {font-weight: 700; color: #000;} #con .board-view .arrow .arrow-wrap p {color: #454545;} #con .board-view .arrow .arrow-wrap .title {display: -webkit-box; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1; margin-bottom: 10px;} #con .board-view .arrow > i {font-size: 24px; color: #000;} #con .board-view .arrow:hover .title {text-decoration: underline;} #con .board-view .list-btn {display: flex; align-items: center; justify-content: center; position: absolute; right: 0; top: 0; bottom: 0; left: 0; margin: auto; width: 44px; height: 44px; border-radius: 50%; background-color: #1B9E50; font-size: 0; transition: .2s; border: 1px solid #1B9E50; line-height: 1;} #con .board-view .list-btn::before {font-size: 24px; color: #fff; transition: .2s;} #con .board-view .list-btn:hover {background-color: #fff;} #con .board-view .list-btn:hover::before {color: #1B9E50;} #con .board-view .view-btn-wrap {display: flex; justify-content: center; gap: 20px; margin-top: 30px;} #con .board-view .view-btn-wrap .temp-btn {height: 60px; font-size: 16px; min-width: 120px;} @media all and (max-width: 1024px) { #con .board-view .info-area {padding: 10px 0;} #con .board-view .left-cont {gap: 20px;} #con .board-view .left-cont .temp-btn + .temp-btn {margin-left: 0;} #con .board-view .info-item {gap: 10px;} } @media all and (max-width: 768px) { #con .board-view .subject {font-size: 20px; min-height: auto;} #con .board-view .left-cont {gap: 10px; flex-basis: 100%; flex-wrap: wrap;} #con .board-view .info-item {font-size: 14px; gap: 5px;} #con .board-view .file-wrap {justify-content: start; gap: 5px;} #con .board-view .file-wrap > a {gap: 5px; font-size: 14px;} #con .board-view .file-wrap > a::before {min-width: 28px; width: 28px; height: 28px;} #con .board-view .view-cont {padding: 30px 0; font-size: 14px; min-height: 200px;} #con .board-view .copyright {margin-bottom: 20px;} #con .board-view .copyright > p {font-size: 14px;} #con .board-view .view-link-wrap {padding: 0;} #con .board-view .arrow .arrow-wrap {display: none;} #con .board-view .view-btn-wrap {gap: 10px; margin-top: 20px;} #con .board-view .view-btn-wrap .temp-btn {min-width: 80px;} } /* 게시판 작성페이지 */ #con .board-write .temp-table th .required {color: #1B9E50;} #con .board-write .temp-table td {text-align: left; padding: 12px 30px; height: 80px;} #con .board-write .temp-table td .flex-wrap, #con .board-write .temp-table td .email-wrap, #con .board-write .temp-table td .tel-wrap {display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;} #con .board-write .temp-table td .info-wrap {display: flex; align-items: center; gap: 10px 30px; flex-wrap: wrap;} #con .board-write .temp-table td .email-wrap .email02, #con .board-write .temp-table td .email-wrap .temp-select, #con .board-write .temp-table td .tel-wrap .temp-select, #con .board-write .temp-table td .tel-wrap .temp-input {width: 150px;} #con .board-write .temp-table td .green-text {color: #1B9E50;} #con .board-write .temp-table td .grid-wrap {display: flex; align-items: center; gap: 10px; flex-wrap: wrap;} #con .board-write .temp-table td .flex-item {display: flex; align-items: center; gap: 5px;} #con .board-write .temp-table td .temp-textarea {height: 140px; padding-top: 20px; padding-bottom: 20px; resize: vertical;} #con .board-write .write-btn-wrap {display: flex; justify-content: center; gap: 20px; margin-top: 30px;} #con .board-write .write-btn-wrap .temp-btn {height: 60px; font-size: 16px; min-width: 120px;} #con .board-write .file-wrap {display: flex; align-items: center; gap: 10px;} #con .board-write .file-wrap input[type="file"] {width: 0; height: 0;} #con .board-write .file-wrap .file-add {position: relative; min-width: 34px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #1B9E50; box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.25); cursor: pointer; transition: 0.2s; border: 1px solid #1B9E50;} #con .board-write .file-wrap .file-add::before {font-family: "remixicon"; content: "\ea13"; font-size: 24px; color: #fff; transition: 0.2s;} #con .board-write .file-wrap .file-add input {position: absolute; top: 0; left: 0; opacity: 0; width: 0; height: 0;} #con .board-write .file-wrap .file-add:hover {background-color: #fff;} #con .board-write .file-wrap .file-add:hover::before {color: #1B9E50;} #con .board-write .file-wrap .no-file {font-size: 16px; color: #454545;} #con .board-write .file-wrap .file-list {display: flex; flex-wrap: wrap; gap: 10px 20px;} #con .board-write .file-wrap .file-list > li {display: flex; align-items: center; gap: 5px;} #con .board-write .file-wrap .file-name {font-size: 16px; display: flex; align-items: center; gap: 5px; color: #454545;} #con .board-write .file-wrap .file-name::before {font-family: "remixicon"; content: "\ea84"; font-size: 24px; color: #53AFBD;} #con .board-write .file-wrap .del-btn {font-size: 0; line-height: 0; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid #e9e9e9; border-radius: 5px; background-color: #fff;} #con .board-write .file-wrap .del-btn::before {font-family: "remixicon"; content: "\eb99"; font-size: 18px;} /* 이미지 첨부파일 썸네일 미리보기 */ #con .board-write .file-wrap.img-file .file-list > li {position: relative; width: 100px; height: 100px; border-radius: 5px; overflow: hidden;} #con .board-write .file-wrap.img-file .file-list > li img {width: 100%; height: 100%; object-fit: cover; object-position: center;} #con .board-write .file-wrap.img-file .del-btn {position: absolute; top: 5px; right: 5px;} @media all and (max-width: 1024px) { #con .board-write .temp-table colgroup {display: none;} #con .board-write .temp-table tr:nth-child(odd) {background-color: #F5F7F9;} #con .board-write .temp-table td, #con .board-write .temp-table th {display: block; background-color: transparent; border-right: none; padding: 10px; height: auto;} #con .board-write .temp-table th {text-align: left; border-bottom: none; background-color: transparent; padding-bottom: 0; margin-bottom: 10px;} #con .board-write .temp-table td {padding-top: 0;} #con .board-write .temp-table td .email-wrap .email02, #con .board-write .temp-table td .email-wrap .temp-select, #con .board-write .temp-table td .tel-wrap .temp-select, #con .board-write .temp-table td .tel-wrap .temp-input {width: 100%;} } @media all and (max-width: 768px) { #con .board-write .temp-table td .flex-wrap, #con .board-write .temp-table td .email-wrap, #con .board-write .temp-table td .tel-wrap {gap: 5px;} #con .board-write .temp-table td .info-wrap {gap: 10px;} #con .board-write .temp-table td .grid-wrap {gap: 5px;} #con .board-write .temp-table td .flex-item {flex-grow: 1;} #con .board-write .temp-table td .temp-btn.w-auto {width: 100%;} #con .board-write .file-wrap .file-list {gap: 5px 10px; margin-left: 0;} #con .board-write .file-wrap .file-name {font-size: 14px;} #con .board-write .file-wrap .file-name::before {font-size: 20px;} #con .board-write .file-wrap .no-file {font-size: 14px;} #con .board-write .file-wrap .del-btn {width: 20px; height: 20px;} #con .board-write .file-wrap .del-btn::before {font-size: 16px;} #con .board-write .write-btn-wrap {gap: 10px; margin-top: 20px;} #con .board-write .write-btn-wrap .temp-btn {min-width: 80px;} } /* 페이징 */ .pagenation {display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 30px;} .pagenation > a {display: flex; align-items: center; justify-content: center; width: 30px; height: 30px;} .pagenation .arrow {background: #F5F7F9 no-repeat center; font-size: 0; line-height: 0;} .pagenation .arrow.mb-prev, .pagenation .arrow.mb-next {display: none;} .pagenation .arrow.start, .pagenation .arrow.end {background-image: url('../images/sub/pagenation-start.svg');} .pagenation .arrow.mb-prev, .pagenation .arrow.mb-next, .pagenation .arrow.prev, .pagenation .arrow.next {background-image: url('../images/sub/pagenation-prev.svg');} .pagenation .arrow.mb-next, .pagenation .arrow.next, .pagenation .arrow.end {transform: rotate(180deg);} .pagenation .num {font-size: 14px; font-weight: 700;} .pagenation .num.active {background-color: #53AFBD; color: #fff;} @media all and (max-width: 768px) { .pagenation {margin-top: 15px;} .pagenation > a {width: 100%; height: 35px;} .pagenation .arrow.mb-prev, .pagenation .arrow.mb-next {display: flex;} .pagenation .arrow.prev, .pagenation .arrow.next, .pagenation .num {display: none;} } /* 이미지게시판 목록 */ #con .img-board-list {display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;} #con .img-board-list > li {border-bottom: 1px solid #000;} #con .img-board-list .img-area {width: 100%; aspect-ratio: 1/1; overflow: hidden;} #con .img-board-list .img-area img {width: 100%; height: 100%; object-fit: cover; object-position: center; transition: 0.2s;} #con .img-board-list .text-area {padding: 20px;} #con .img-board-list .text-area .subject {font-size: 16px; font-weight: 600; line-height: 1.16; color: #000; display: -webkit-box; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1;} #con .img-board-list .text-area .date {display: flex; align-items: baseline; gap: 5px; font-size: 16px; color: #454545; margin-top: 20px;} #con .img-board-list .text-area .date::before {font-family: "remixicon"; font-size: 18px; color: #1B9E50; content: "\eb27";} #con .img-board-list > li:hover .img-area img {transform: scale(1.15);} #con .img-board-list.type1 > li {border-bottom: initial;} #con .img-board-list.type1 .img-area {position: relative; margin: 0 0 24px; padding: 0 0 calc(100% + 40%); border-radius: 10px;} #con .img-board-list.type1 .img-area .img_inner {position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%;} #con .img-board-list.type1 .img-area .img_inner img {width: 100%; height: 100%; object-fit: cover;} @media all and (max-width: 1200px) { #con .img-board-list {grid-template-columns: repeat(3, 1fr);} } @media all and (max-width: 1024px) { #con .img-board-list {gap: 20px;} } @media all and (max-width: 768px) { #con .img-board-list {grid-template-columns: repeat(2, 1fr);} #con .img-board-list .text-area {padding: 10px;} #con .img-board-list .text-area .subject {font-size: 14px;} #con .img-board-list .text-area .date {font-size: 14px; margin-top: 10px;} } @media all and (max-width: 600px) { #con .img-board-list {grid-template-columns:100%;} } /* 이미지 컬럼 */ #con .temp-img-col {display: flex; gap: 50px;} #con .temp-img-col > img {max-width: 100%;} #con .temp-img-col.col-2 > img {width: calc(50% - 25px);} #con .temp-img-col.col-3 > img {width: calc(33.33% - 33px);} @media all and (max-width: 1024px) { #con .temp-img-col {gap: 10px;} #con .temp-img-col.col-2 > img {width: calc(50% - 5px);} #con .temp-img-col.col-3 > img {width: calc(33.33% - 7px);} } @media all and (max-width: 768px) { #con .temp-img-col {flex-wrap: wrap;} #con .temp-img-col > img {width: 100% !important;} } /* 버튼 */ .temp-btn {display: inline-flex; position: relative; z-index: 1; align-items: center; justify-content: center; font-size: 18px; color: #fff; height: 50px; padding: 0 30px; border: 1px solid #1B9E50; gap: 5px; font-weight: 700; overflow: hidden; transition: 0.2s; line-height: 1; background-color: #fff;} .temp-btn::before {display: block; content: ''; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background-color: #1B9E50; transition: 0.2s;} .temp-btn > i {font-size: 24px; font-weight: 400; line-height: 1;} .temp-btn.radius {height: 38px; border-radius: 19px; font-size: 16px; padding-right: 25px; padding-left: 25px; padding-top: 2px;} .temp-btn.radius.type1 {padding: 0 !important; border-radius: 6px;} .temp-btn.radius > i {font-size: 18px;} .temp-btn.small {font-size: 16px; height: 36px; padding: 0 22px;} .temp-btn.radius.small {font-size: 14px; padding-right: 15px; padding-left: 15px; height: 30px; padding-top: 0;} .head-btn-wrap.type1 {display: flex; align-items: center; justify-content: space-between; gap: 1rem;} .head-btn-wrap.type1 .temp-btn {width: calc(50% - 0.5rem);} .temp-btn:visited, .temp-btn:link {color: #fff;} .temp-btn:hover {color: #1B9E50;} .temp-btn:hover::before {width: 0; right: 0; left: auto;} .temp-btn.gray {color: #000; border-color: #F5F7F9;} .temp-btn.gray:visited, .temp-btn.gray:link {color: #000;} .temp-btn.gray::before {background-color: #F5F7F9;} .temp-btn.gray:hover {color: #000;} .temp-btn.sky {border-color: #53AFBD;} .temp-btn.sky::before {background-color: #53AFBD;} .temp-btn.sky:hover {color: #53AFBD;} .temp-btn.blue {border-color: #007CE1;} .temp-btn.blue::before {background-color: #007CE1;} .temp-btn.blue:hover {color: #007CE1;} .temp-btn.gray-border {color: #454545; border-color: #e9e9e9;} .temp-btn.gray-border:visited, .temp-btn.gray-border:link {color: #454545;} .temp-btn.gray-border::before {background-color: #e9e9e9; width: 0; right: 0; left: auto;} .temp-btn.gray-border:hover {color: #454545;} .temp-btn.gray-border:hover::before {width: 100%; left: 0;} @media all and (max-width: 1024px) { .temp-btn {padding: 0 20px;} } @media all and (max-width: 768px) { .temp-btn {height: 35px !important; font-size: 14px !important; padding: 0 10px !important;} .temp-btn > i {font-size: 17px !important;} } /*------------------------------------------------------------------- 분류그룹 : 서브컨텐츠 -------------------------------------------------------------------*/ /*웰촌 > 통합검색*/ #spot .depth2-wrap.search_img {position: relative;} #spot .depth2-wrap.search_img::after{content: ''; position: absolute; top: -50px; right: 304px; height: 123px; width: 318px; background-image: url(../images/sub/search_img.png); background-repeat: no-repeat;} /*체크박스, 라디오 버튼*/ .result_label{display: inline-block; position: relative; padding-left: 25px; line-height: 1; white-space: nowrap; vertical-align: middle; cursor: pointer;} .result_label > .check_radio{width: 0; height: 0; font-size: 0;} .result_label > span, .result_label > label{display: inline-block; line-height: 20px; font-weight: 500; font-size: 18px; vertical-align: middle; color: #555;} .result_label > label{cursor: pointer;} .result_label > span::before, .result_label > label::before{content: '';position: absolute; top:0; left: 0; width: 20px; height:20px; border:1px solid #e9e9e9; background-color: #fff; box-sizing: border-box;} .result_label > span::before, .result_label > label::after{content:''; position:absolute; top: 4px; left: 4px; width: 12px; height: 9px; border-left: 3px solid #000; border-bottom: 3px solid #000; opacity: 0; transform: rotate(-45deg); box-sizing: border-box;} .result_label > .check_radio:checked + span::before, .result_label > .check_radio:checked + label::before{border-color: #555;} .result_label > .check_radio:checked + span::after, .result_label > .check_radio:checked + label::after{opacity: 1;} .result_label > .check_radio:checked + span, .result_label > .check_radio:checked + label{color:#000} .search_before_bg{position: relative;} .search_before_bg::before{content: ''; position: absolute; top: -100px; right: 200px; background: url(../images/sub/search_img.png) no-repeat; height: 123px; width: 318px; z-index: 1; margin-top: 100px;} .search_all_box{margin-top: 100px; } .search_all_box .search_all .head_wrap{background-color: #F5F7F9; padding:20px; border: 1px solid #e9e9e9; box-sizing: border-box;} .search_all_box .search_all .head{display: flex; align-items: center; gap: 10px;} .search_all_box .search_all .head .left{display: flex; align-items: center; gap: 10px; width: 87%;} .search_all_box .search_all .head .left .search_type{width: 100%;} .search_all_box .search_all .head .left .all_select{border: none;} .search_all_box .search_all .head .left .search_keyup {flex-basis:64%; position: relative;} .search_all_box .search_all .head .left .all_keyup2{padding-right:60px; width: 100%; text-align: left; border: none;} .search_all_box .search_all .head .left .search_btn{font-size: 0; position: absolute; top: 0; right: 20px; bottom: 0; margin: auto 0;} .search_all_box .search_all .head .left .search_btn::before {display: block; content: "\f0d1"; font-family: 'remixicon'; font-size: 24px; line-height: 24px;} .search_all_box .search_all .head .left .search_type_left{display: flex; align-items: center; gap: 10px; flex-basis: 35%;} .search_all_box .date_wrap{display: flex; align-items: center;} .search_all_box .date_wrap .date_box{flex-basis: 30%;} .search_all_box .all_datepicker {display: flex; align-items: center; margin-left: 10px; gap: 10px;} .search_all_box .all_datepicker span{display: block; font-size: 16px; font-weight: 600;} .search_all_box .all_datepicker input{position: relative; height: 40px; border:1px solid #e9e9e9; padding: 0 14px;letter-spacing: 0; width: 170px; background: #fff url('../images/sub/datepicker-bg.svg') no-repeat right 20px center; font-size: 14px;} .search_all_box .body {padding: 30px 90px;} .search_all_box .search_list{display: flex; align-items: center; gap: 80px; justify-content: center; padding-bottom: 20px; border-bottom: 1px solid #e9e9e9;} .search_all_box .search_list .left, .search_all_box .search_list .right{flex-basis: 18%;} .search_all_box .search_list .tit{font-size: 16px; color:#000; font-weight: 700; line-height: 16px; margin-bottom: 10px;} .search_all_box .check_box {display: flex; align-items: center; gap: 10px; width: 100%;} .search_all_box .check_box > div{ display: block; position: relative; height: 40px; width: 80px;} .search_all_box .check_box .input_r_c{ appearance: none; transition: background 0.3s; -moz-appearance: none; -webkit-appearance: none; width: 100%; height: 40px; background-color: #fff; box-sizing: border-box;} .search_all_box .check_box .input_r_c:checked + .label_r_c{background-color: #1B9E50; color:#fff;} .search_all_box .check_box .label_r_c{cursor: pointer; width: 100%; height: 40px; display: inline-block; position: absolute; top:0; left: 0; text-align: center; line-height: 38px; border: 1px solid #E9E9E9; font-size: 14px; font-weight: 600;} .search_all_box .search_btn_area{margin-top: 0;} .search_all_box .search_btn_area ul{display: flex;align-items: center; justify-content: center; gap: 10px;} .search_all_box .search_btn_area ul li > button {width: 100px; font-size: 16px; height: 60px;} .keyword_search {display: flex; align-items: center; gap:20px; width: 100%; margin-top: 20px;} .keyword_search .left, .keyword_search .right{display: flex; align-items: center; flex-basis: 50%; height: 120px; padding: 0 30px; border:1px solid #e9e9e9; box-sizing: border-box; } .keyword_search .left{justify-content: space-between;} .keyword_search .left .tit_list{display: flex; align-items: center; } .keyword_search .left .tit_list ul{display: flex; align-items: center; flex-wrap: wrap; gap: 10px;} .keyword_search .left .tit_list ul li {margin-left: 0;} .keyword_search .left .tit_list ul li > a {font-size: 16px; color:#454545;} .keyword_search .left .tit_list ul li > a span{display: inline-block; margin-right: 5px; width: 24px; height: 24px; font-size: 14px; font-weight: 600; color:#fff; text-align: center; line-height: 24px; border-radius: 50%;} .keyword_search .left .tit_list ul li > a .mint{background-color: #53AFBD;} .keyword_search .left .tit_list ul li > a .green{background-color: #7CB74C;} .keyword_search .left .more{position: relative;width: 20px; height: 20px;} .keyword_search .left .more a{width: 20px; height: 20px; display: inline-block;} .keyword_search .left .more::before{content: "\ef79"; position: absolute; top: 0; z-index: -1; font-weight: 600; font-size: 20px; font-family: remixicon!important;} .keyword_search p.tit{font-size: 16px; line-height: 20px; font-weight: 600; margin-right: 2px; width: 162px;} .keyword_search p.poppul{width:100px;} .keyword_search .right ul{display: flex; align-items: center; flex-wrap: wrap; margin-left: 26px; gap: 10px;} .keyword_search .right ul li button {cursor: pointer; height: 24px; display: inline-block; line-height: 24px; padding: 0 10px 0 0; font-weight: 500; border-radius: 30px; background-color: #F1F4F7; } .keyword_search .right ul li button span{position: relative; display: inline-block; font-size: 14px; padding: 0 2px 0 16px; color:#454545;} .keyword_search .right ul li button i{display: inline-block; padding-top: 1px; width: 20px; height: 20px; font-size: 15px;} .all_search_wrap{border-bottom: 1px solid #e9e9e9; padding: 70px 0 60px 0; justify-content: center;} .search_tit{display: flex; justify-content: center;} .search_tit div{font-size: 30px; position: relative; line-height: 30px; padding-left: 36px} .search_tit div::before{content: "\f0d1"; position: absolute; top:3px; left: 0; font-family: remixicon!important; font-size: 30px; color: #000;} .search_tit div p{display: inline-block; font-weight: 700;} .txt_green{color: #1B9E50;} .inter_result{display: flex; align-items: center; justify-content: space-between; margin-top: 50px; margin-bottom: 30px;} .inter_result .left {display: flex;} .inter_result .left .inter_tit{margin:0} .inter_result .left .result_box{ padding-top: 10px; padding-left: 9px; margin: 0;} .inter_result .left .result_box p{position: relative; padding-left: 10px;} .inter_result .left .result_box p::before{content: ''; background-color: #dfdfdf; width: 1px; height: 18px; position: absolute; top: -1px; left:0;} .inter_result .left .result_box p span{font-weight: 700;} .inter_result .right a{display: inline-block; position: relative; padding-top: 8px; padding-right: 22px; font-size: 20px; font-weight: 600;} .inter_result .right a::after{content: "\ea6c"; position: absolute; right: 0; top: 8px; font-family: remixicon!important;} .img-board-list .search_result_box{margin-bottom: 20px;} .img-board-list .tit_span{position: absolute; display: block; left:5%; bottom: 30px; width: 90%; font-size: 18px; font-weight: 600; color:#fff; z-index: 1;} .img-board-list li .black_bg{position: relative;} .img-board-list li .black_bg::before{content: ''; z-index: 1; position: absolute; bottom: 0; height: 100%; width: 100%; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.2) 100%);} .img-board-list .info_area .title_info span{display: inline-block; margin: 16px 0; font-size: 18px; font-weight: 600;} .map_green{position: relative; font-weight: 700; padding-left: 20px; line-height: 20px;} .map_green::before{ content: "\ef13"; left: 0; top: 0; font-size: 18px; font-family: remixicon!important; position: absolute; font-weight: 700; } .img-board-list .traval_list{display: flex; align-items: center; margin-top:10px;} .img-board-list .traval_list li:first-child{margin-right: 10px;} /* ::before 가상선택자 content none */ .bg_none::before{content: none!important;} .saerch_traval .title{font-size: 18px; font-weight: 600;} .saerch_traval .tra_subject{font-size: 16px; font-weight: 500; line-height: 22px; height: 62px; padding-top: 20px; color: #454545;} .saerch_traval .tra_place{margin-top: 25px; padding-top: 30px; border-top: 1px solid #e9e9e9;} .img-board-list .naver_Pay{font-size: 20px;} .img-board-list .naver_Pay small{font-size: 14px;} .traval_list li .stick{position: relative; margin-left: 4px; padding-left: 10px;} .traval_list li .stick::before{content: ''; position: absolute; top: 3px; left: 0; width: 1px; height: 10px; background-color: #D9D9D9;} .resutlt_seciton .inner_item {margin-bottom: 50px;} .resutlt_seciton .inner_item .title{font-size: 18px; color:#1B9E50; font-weight: 600;} .resutlt_seciton .inner_item .subject_p{margin-top: 18px; font-size: 18px; color:#000; font-weight: 700;} .resutlt_seciton .inner_item .text_p{margin-top: 10px; height: 40px; font-size: 16px; color:#454545; font-weight: 500; line-height: 20px;} .resutlt_seciton .inner_item .result_num{margin-top: 10px; font-size: 16px; display: flex; align-items: center; gap: 5px; color:#454545;} .resutlt_seciton .inner_item .snb_list {display: flex; align-items: center; gap: 26px; margin: 20px 0;} .resutlt_seciton .inner_item .snb_list li{font-size: 16px; color:#53AFBD; position: relative;} .resutlt_seciton .inner_item .snb_list li:first-child::before{content: none;} .resutlt_seciton .inner_item .snb_list li::before{content: "\ea54"; position: absolute; top:50%; transform: translateY(-50%); left:-22px; font-size: 20px; font-family: remixicon!important;} .resutlt_seciton .inner_item .snb_list li .ri-home-5-line{font-size: 20px;} .resutlt_seciton .inner_item .date{position: relative; margin:20px 0; padding: 0 0 20px 20px; border-bottom: 1px solid #e9e9e9;} .resutlt_seciton .inner_item .date::before{content:"\f20f"; position: absolute; top: 0; left: 0; font-size: 16px; font-family: remixicon!important; } .resutlt_seciton .more{display: flex; justify-content: center; margin-top: 30px;} .resutlt_seciton .more a{width: 80px;} .sear_result_none{text-align: center} .sear_result_none div {font-size: 30px; font-weight: 700;} .sear_result_none p{font-size: 18px; font-weight: 500; margin-top: 0; color:#98A1B7;} .resutlt_seciton .sear_more_btn{width: 150px!important;} /* 통합검색 추가 241211*/ #con #travel-info .info-list .sear_travel_a{display: flex;} #con .img-board-list .img-area .sear_travel_tit{position: absolute; top: 20px; left: 20px; border-radius: 36px; color:#fff; font-weight: 600; padding: 0 18px; background-color:#8FC31F; height: 36px; line-height: 36px; z-index: 100;} /*관광정보 > 여행정보 > 더보기 */ #con #season-travle .season_search_more{margin-top:0;} @media all and (max-width: 1440px) { .search_before_bg::before{right: 0;} .search_all_box .search_all .head_wrap{padding: 2%} .keyword_search .left .tit_list ul li{padding:4px 0;} } @media all and (max-width: 1400px) { .keyword_search .left .tit_list{display: block;} .keyword_search p.tit{margin: 0 0 10px 0;} .keyword_search .left .tit_list ul, .keyword_search .right ul{margin-left: 0; height: 60px} .keyword_search .left, .keyword_search .right{display: block; height: 150px; padding: 30px;} .keyword_search .right ul{margin-left: 0;} } @media all and (max-width: 1300px) { .search_all_box .search_list{display: block;} .search_all_box .search_all .head{gap: 2%;} .search_all_box .search_all .head .left{width: 80%;} .keyword_search .left{position: relative;} .keyword_search .left .more{position: absolute; top:30px; right: 5%;} .keyword_search .left, .keyword_search .right{height: auto; padding-top: 20px; padding-bottom: 20px;} .search_all_box .search_list > div {margin: 10px 0;} .search_all_box .check_box > div{flex-basis: 100%;} .search_all_box .check_box.date_box{flex-basis: 40%;} .search_all_box .all_datepicker{flex-basis: 60%;} .search_all_box .all_datepicker input{width: 100%;} } @media all and (max-width: 1200px) { .resutlt_seciton .img-board-list{grid-template-columns: repeat(4,1fr)!important;} .keyword_search{display: block;} .keyword_search .right{margin-top: 10px;} } @media all and (max-width: 1024px) { .search_all_box .body {padding: 20px 50px;} .search_all_box .search_btn_area ul li > button{height: 50px;} .resutlt_seciton .img-board-list{grid-template-columns: repeat(2,1fr)!important;} } @media all and (max-width: 768px) { .search_all_box .search_all .head_wrap {padding: 20px;} .search_all_box .search_all .head .left .all_select {width: 100px; font-size: 14px;} .search_all_box .search_all .head .left .search_keyup{width: calc(100% - 110px);} .search_all_box .search_all .head .left .all_keyup2 {text-align: left; padding-right: 40px;} .search_all_box .search_all .head .left .search_btn {right: 10px;} .search_all_box .search_all .head .left .search_btn::before {font-size: 20px;} .search_all_box .search_btn_area ul li > button{height: 40px!important;} .result_label > span, .result_label > label {font-size: 14px;} .search_all_box .body {padding: 10px;} .search_all_box .search_list {padding-bottom: 10px;} .img-board-list .naver_Pay{font-size: 16px;} .resutlt_seciton .img-board-list{grid-template-columns: repeat(1,1fr)!important;} .search_tit div, .search_tit div::before{font-size: 20px;} .search_tit div{padding-left: 22px;} /*241211 aㅌㅐ그 추가*/ #con #travel-info .info-list .sear_travel_a {display: block;} } @media all and (max-width: 640px) { .search_all_box .date_wrap{display: block;} .search_all_box .all_datepicker{margin: 10px 0 0 0;} .search_all_box .search_all .head{display: block;} .search_all_box{margin-top: 10px} .search_all_box .search_all .head .left{width: 100%;} .search_all_box .search_all .head .right{width: 100%; margin-top: 16px;} .search_before_bg::before{content: none;} } @media all and (max-width: 552px) { .search_all_box .search_all .head .left{width: 100%; display: block;} .search_all_box .search_all .head .left .all_select{width: 100%;} .keyword_search .left, .keyword_search .right{padding: 5%;} .keyword_search .left .tit_list ul, .keyword_search .right ul{height: auto;} .search_all_box .search_all .head .left .search_keyup{width: 100%; margin-top: 10px;} .search_all_box .search_all .head .left .search_type{width: 100%;} } /* 지금웰촌 > 이달의 웰촌 > 이달의 웰촌 */ #con #month-welchon .mo_img {display: none;} #con #month-welchon h4 {font-size: 30px; font-weight: 700;} #con #month-welchon .img-board-list .text-area {display: flex; align-items: center; gap: 12px;} #con #month-welchon .img-board-list .text-area .month {display: flex; align-items: center; justify-content: center; min-width: 56px; height: 56px; border-radius: 50%; background-color: #1B9E50; font-size: 18px; font-weight: 700; color: #fff;} @media all and (max-width: 1200px) and (min-width: 769px) { #con #month-welchon .board-head {display: flex;} #con #month-welchon .board-head .search-area .temp-select {min-width: 180px;} } @media all and (max-width: 768px) { #con #month-welchon .pc_img {display: none;} #con #month-welchon .mo_img {display: block;} #con #month-welchon h4 {margin-bottom: 10px; font-size: 22px;} #con #month-welchon .img-board-list .text-area .month {min-width: 46px; height: 46px; font-size: 16px;} } /* 지금웰촌 > 이달의 웰촌 > 웰촌 PICK 추천 여행지 */ #con #welchon-pick .pc_img, #con #welchon-pick .mo_img {text-align: center;} #con #welchon-pick .mo_img {display: none;} #con #welchon-pick .pick-list > li {display: flex;} #con #welchon-pick .pick-list > li + li {margin-top: 30px;} #con #welchon-pick .pick-list .img-area {flex-basis: 345px; position: relative;} #con #welchon-pick .pick-list .img-area .on-img {width: 100%; height: 345px; background: no-repeat center / cover; position: relative; display: block;} #con #welchon-pick .pick-list .img-area .on-img .place {position: absolute; left: 20px; bottom: 20px; border-radius: 40px; backdrop-filter: blur(5px); background-color: rgba(12, 12, 12, 0.2); padding: 11px 20px; color: #fff; font-size: 16px; font-weight: 500; display: flex; align-items: center; gap: 10px; line-height: 1;} #con #welchon-pick .pick-list .img-area .on-img .place::before {font-family: "remixicon"; font-size: 18px; font-weight: 400; content: "\ef14";} #con #welchon-pick .pick-list .img-list {display: flex; gap: 2px; background-color: #F5F7F9; padding: 10px; border: 1px solid #e9e9e9; border-top: none;} #con #welchon-pick .pick-list .img-list .item {flex-basis: 100%; height: 80px; position: relative; cursor: pointer;} #con #welchon-pick .pick-list .img-list .item > img {width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;} #con #welchon-pick .pick-list .img-list .item::before {display: block; content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; backdrop-filter: grayscale(1); transition: 0.2s;} #con #welchon-pick .pick-list .img-list .item.active::before {backdrop-filter: grayscale(0);} #con #welchon-pick .pick-list .text-area {border-width:1px 1px 1px 0; border-style: solid; border-color: #e9e9e9; flex-basis: calc(100% - 345px); padding: 50px 50px 20px; position: relative;} #con #welchon-pick .pick-list .text-area .subject {font-size: 22px; font-weight: 600; margin-bottom: 12px; display: block; display: -webkit-box; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1;} #con #welchon-pick .pick-list .text-area .text {font-size: 16px; color: #454545; line-height: 1.6; display: -webkit-box; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 5;} #con #welchon-pick .pick-list .text-area .info {display: flex; border-top: 1px solid #e9e9e9; padding: 35px 0 24px; justify-content: space-between; position: absolute; bottom: 0; left: 50px; width: calc(100% - 100px);} #con #welchon-pick .pick-list .text-area .tag {display: flex; font-size: 16px; font-weight: 500; gap: 10px; position: relative; flex-wrap: wrap; padding-left: 50px; padding-top: 6px;} #con #welchon-pick .pick-list .text-area .tag::before {display: block; content: ''; width: 40px; height: 40px; border-radius: 50%; background-color: #1A4399; position: absolute; top: 0; left: 0;} #con #welchon-pick .pick-list .text-area .tag::after {display: block; content: '#'; font-size: 18px; font-weight: 500; color: #fff; position: absolute; top: 0; left: 0; width: 40px; line-height: 40px; text-align: center;} #con #welchon-pick .pick-list .text-area .tag > span {padding: 7px 20px; border-radius: 24px; background-color: #F5F7F9; color: #454545; font-size: 16px; line-height: 1; min-width: fit-content;} #con #welchon-pick .pick-list .text-area .temp-btn {min-width: fit-content;} @media all and (min-width: 769px) { #con #welchon-pick .pick-list .text-area .temp-btn {gap: 20px;} } @media all and (max-width: 1500px) { #con #welchon-pick .pick-list .text-area .info {display: block;} #con #welchon-pick .pick-list .text-area .tag {margin-bottom: 20px;} #con #welchon-pick .pick-list .text-area .temp-btn {margin-left: auto; display: flex; width: 162px; margin-right: 0;} } @media all and (max-width: 1024px) { #con #welchon-pick .pick-list > li {display: block;} #con #welchon-pick .pick-list .img-area .on-img {height: 250px;} #con #welchon-pick .pick-list .text-area {padding: 15px 10px; border-width: 0 1px 1px 1px;} #con #welchon-pick .pick-list .text-area .subject {margin-bottom: 5px;} #con #welchon-pick .pick-list .text-area .info {padding-top: 15px; padding-bottom: 0; margin-top: 15px; position: static; width: 100%;} } @media all and (max-width: 768px) { #con #welchon-pick .pc_img {display: none;} #con #welchon-pick .mo_img {display: block;} #con #welchon-pick .pick-list .img-area .on-img .place {left: 10px; bottom: 10px; font-size: 14px; padding: 5px 10px; gap: 5px;} #con #welchon-pick .pick-list .img-area .on-img .place::before {font-size: 15px;} #con #welchon-pick .pick-list .text-area .subject {font-size: 16px;} #con #welchon-pick .pick-list .text-area .text {font-size: 14px;} #con #welchon-pick .pick-list .text-area .tag {font-size: 14px; gap: 5px; padding-left: 40px; padding-top: 3px;} #con #welchon-pick .pick-list .text-area .tag::before {width: 30px; height: 30px;} #con #welchon-pick .pick-list .text-area .tag::after {width: 30px; line-height: 30px;} #con #welchon-pick .pick-list .text-area .tag > span {font-size: 14px; padding: 5px 15px;} #con #welchon-pick .pick-list .text-area .temp-btn {width: 108px;} } /* 지금웰촌 > 이달의 웰촌 > 추천 으뜸촌 */ #con #euddeum .temp-tit-red + p {font-size: 16px; color: #454545; line-height: 1.6;} #con #euddeum .euddeum-tab {display: flex; margin-bottom: 30px; padding-top: 1px; padding-left: 1px;} #con #euddeum .euddeum-tab > a {width: 100%; border: 1px solid #e9e9e9; height: 60px; transition: 0.2s; padding: 0 10px; margin-left: -1px; margin-top: -1px; font-size: 20px; font-weight: 600; color: #000; display: flex; align-items: center; justify-content: center;} #con #euddeum .euddeum-tab > a:hover, #con #euddeum .euddeum-tab > a.active {color: #fff; background-color: #1A4399; border-color: #1A4399;} #con #euddeum .euddeum-head {display: flex; background-color: #F5F7F9;} #con #euddeum .euddeum-head .img-area {flex-basis: 50%;} #con #euddeum .euddeum-head .img-area img {width: 100%; height: 100%; object-fit: cover; object-position: center;} #con #euddeum .euddeum-head .text-area {flex-basis: 50%; padding: 42px 30px 30px 37px; position: relative;} #con #euddeum .euddeum-head .momth {display: flex; align-items: center; gap: 10px; font-size: 16px; color: #1A4399; font-weight: 500;} #con #euddeum .euddeum-head .momth::before {display: block; content: ''; width: 40px; height: 40px; border-radius: 50%; background: #1A4399 url('../images/sub/thumb-up-ico.svg') no-repeat center;} #con #euddeum .euddeum-head .subtitle {font-size: 20px; font-weight: 700; margin: 37px 0 19px;} #con #euddeum .euddeum-head .thumb-wrap {position: relative; padding-right: 200px; min-height: 155px;} #con #euddeum .euddeum-head .thumb-wrap::before {display: block; content: ''; position: absolute; top: 7px; right: 0; background: url('../images/sub/euddeum-thumbs.svg') no-repeat center / contain; width: 162px; height: 155px;} #con #euddeum .euddeum-head .title { font-family: "Jalnan"; font-size: 34px; margin-top: 21px; } #con #euddeum .euddeum-head .text {font-size: 17px; color: #454545; margin-top: 10px;} #con #euddeum .euddeum-head .hash {display: flex; flex-wrap: wrap; gap: 10px; margin-top: 50px;} #con #euddeum .euddeum-head .hash > span {padding: 0 18px; border-radius: 50px; background-color: #fff; font-size: 14px; color: #454545; line-height: 24px;} #con #euddeum .euddeum-head .reservation-btn {position: absolute; top: 30px; right: 30px; width: 68px; height: 68px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #1B9E50; font-size: 16px; font-weight: 800; color: #fff; border: 1px solid #1B9E50; transition: 0.2s;} #con #euddeum .euddeum-head .reservation-btn:hover {background-color: #fff; color: #1B9E50;} #con #euddeum .euddeum-text {font-size: 18px;} #con #euddeum .gallery-list {width: calc(100% + 30px); margin-top: 30px;} #con #euddeum .gallery-list .item {margin-right: 30px; width: 100%; height: 180px; cursor: pointer;} #con #euddeum .gallery-list .item img {object-fit: cover; object-position: center; width: 100%; height: 100%;} #con #euddeum .gallery-zoom {margin-bottom: 20px; position: relative;} #con #euddeum .gallery-zoom .item {overflow: hidden; text-align: center; display: flex; align-items: center; justify-content: center;} #con #euddeum .gallery-zoom .item img {max-height: 100%; border-radius: 20px;} #con #euddeum .gallery-zoom .arrow button {width: 40px; height: 40px; border-radius: 50%; background-color: #fff; display: flex; align-items: center; justify-content: center; position: absolute; top: 0; bottom: 0; margin: auto 0;} #con #euddeum .gallery-zoom .arrow button::before {font-family: "remixicon"; font-size: 18px;} #con #euddeum .gallery-zoom .arrow .prev {left: 30px;} #con #euddeum .gallery-zoom .arrow .next {right: 30px;} #con #euddeum .gallery-zoom .arrow .prev::before {content: "\ea64";} #con #euddeum .gallery-zoom .arrow .next::before {content: "\ea6e";} #con #euddeum .gallery-list2 .item {padding: 0 8px; height: 82px; cursor: pointer;} #con #euddeum .gallery-list2 .item img {width: 100%; height: 100%; object-fit: cover; object-position: center;} #con #euddeum [class^="gallery-control"] {display: flex; align-items: center; margin-top: 20px; justify-content: space-between; gap: 35px;} #con #euddeum [class^="gallery-control"] .arrow {display: flex; gap: 5px; min-height: 24px;} #con #euddeum [class^="gallery-control"] .arrow button {font-size: 0;} #con #euddeum [class^="gallery-control"] .arrow button::before {font-family: "remixicon"; font-size: 24px; line-height: 24px; display: block;} #con #euddeum [class^="gallery-control"] .arrow .prev::before {content: "\ea5c";} #con #euddeum [class^="gallery-control"] .arrow .next::before {content: "\ea68";} #con #euddeum [class^="gallery-control"] .status {display: flex; gap: 50px; position: relative; width: 85px; justify-content: space-between;} #con #euddeum [class^="gallery-control"] .status::before {content: ''; position: absolute; top: 0; bottom: 0; right: 0; left: 0; width: 30px; height: 1px; background-color: #d9d9d9; margin: auto;} #con #euddeum [class^="gallery-control"] .status span {font-size: 14px; font-weight: 500; color: #040404;} #con #euddeum [class^="gallery-control"] .progress {flex-basis: calc(100% - 210px); height: 3px; background-color: #F4F6F9;} #con #euddeum [class^="gallery-control"] .progress span {height: 100%; width: 0; transition: 0.2s; background-color: #1B9E50; display: block;} #con #euddeum .info-box {display: flex; background-color: #F5F7F9; padding: 15px 30px; margin-top: 50px; gap: 10px;} #con #euddeum .info-box .item {display: flex; gap: 10px 30px; width: 50%; flex-wrap: wrap;} #con #euddeum .info-box .item > p {display: flex; align-items: center; font-size: 16px; font-weight: 500; gap: 10px;} #con #euddeum .info-box .item > p::before {display: block; content: ''; min-width: 40px; height: 40px; border-radius: 50%; background: no-repeat center;} #con #euddeum .info-box .item.n1 > p::before {background-color: #1A4399;} #con #euddeum .info-box .item.n2 > p::before {background-color: #D1303B;} #con #euddeum .info-box .item > p.address::before {background-image: url('../images/sub/map-icon.svg');} #con #euddeum .info-box .item > p.tel::before {background-image: url('../images/sub/phone-ico.svg');} #con #euddeum .info-box .item > p.site span + span {margin-left: 10px;} #con #euddeum .info-box .item > p.site::before {background-image: url('../images/sub/internet-ico.svg');} #con #euddeum .temp-img-col {margin-top: 50px;} #con #euddeum .sns-wrap {position: relative;} #con #euddeum .euddeum-slide {display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;} @media all and (min-width: 769px) { #con #euddeum .board-head {display: flex;} #con #euddeum .board-head .search-area .temp-select {min-width: 180px;} } @media all and (max-width: 1500px) { #con #euddeum .euddeum-slide {grid-template-columns: repeat(3, 1fr);} } @media all and (max-width: 1100px){ #con #euddeum .euddeum-slide {grid-template-columns: repeat(2, 1fr);} } @media all and (max-width: 1024px){ #con #euddeum .euddeum-head {display: block;} #con #euddeum .euddeum-head .img-area {height: 250px;} #con #euddeum .euddeum-head .text-area {padding: 20px;} #con #euddeum .euddeum-head .thumb-wrap::before {top: 0;} #con #euddeum .euddeum-head .text {margin-top: 10px;} #con #euddeum .euddeum-head .hash {margin-top: 15px;} #con #euddeum .euddeum-head .reservation-btn {top: 20px; right: 20px;} #con #euddeum .euddeum-tab.over4 {flex-wrap: wrap;} #con #euddeum .euddeum-tab.over4 > a {width: calc(25% + 1px);} } @media all and (max-width: 768px){ #con #euddeum .temp-tit-red + p {font-size: 14px;} #con #euddeum .euddeum-tab {margin-bottom: 30px;} #con #euddeum .euddeum-tab > a {font-size: 14px; height: 50px;} #con #euddeum .euddeum-tab.over2 {flex-wrap: wrap;} #con #euddeum .euddeum-tab.over2 > a, #con #euddeum .euddeum-tab.over4 > a {width: calc(50% + 1px);} #con #euddeum .euddeum-head .img-area {height: 180px;} #con #euddeum .euddeum-head .momth {font-size: 14px; gap: 5px;} #con #euddeum .euddeum-head .momth::before {width: 30px; height: 30px; background-size: 15px;} #con #euddeum .euddeum-head .subtitle {font-size: 16px;} #con #euddeum .euddeum-head .thumb-wrap {padding-right: 0; min-height: 103px;} #con #euddeum .euddeum-head .thumb-wrap::before {width: 68px; height: 65px;} #con #euddeum .euddeum-head .title {font-size: 22px; margin-top: 15px; padding-right: 68px;} #con #euddeum .euddeum-head .text {font-size: 14px;} #con #euddeum .euddeum-head .hash {gap: 5px;} #con #euddeum .euddeum-head .reservation-btn {font-size: 14px; width: 48px; height: 48px;} #con #euddeum .temp-img-col {margin-top: 20px;} #con #euddeum .info-box {padding: 15px 20px; flex-wrap: wrap;} #con #euddeum .info-box .item {width: 100%;} #con #euddeum .info-box .item.n1 {gap: 10px;} #con #euddeum .info-box .item > p {font-size: 14px; gap: 5px;} #con #euddeum .info-box .item > p.site span + span {margin-left: 0;} #con #euddeum .info-box .item > p::before {min-width: 30px; width: 30px; height: 30px; background-size: 15px;} #con #euddeum .euddeum-slide {grid-template-columns: repeat(1, 1fr);} } /* 지금웰촌 > 이달의 웰촌 > 지금 뜨는 촌캉스 */ #con #up-choncation .slide-wrap {position: relative; margin-bottom: 100px;} #con #up-choncation .slide-list {width: calc(100% + 30px);} #con #up-choncation .slide-list .inner {height: 400px; color: #fff; margin-right: 30px; position: relative; overflow: hidden; padding: 50px; display: flex; align-content: end; flex-wrap: wrap; background: no-repeat center top / cover; align-items: center; gap: 10px;} #con #up-choncation .slide-list .inner:before {display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%); z-index: 1; } #con #up-choncation .slide-list .title {font-size: 20px; font-weight: 700; z-index: 2; position: relative; flex-basis: 100%; margin-bottom: 9px;} #con #up-choncation .slide-list .place {display: inline-flex; align-items: center; justify-content: center; gap: 10px; backdrop-filter: blur(5px); background-color: rgba(255, 255, 255, 0.2); padding: 12px 22px; border-radius: 50px; position: relative; z-index: 2; line-height: 1;} #con #up-choncation .slide-list .place::before {display: block; content: ''; width: 18px; height: 18px; background: url('../images/sub/map-icon.svg') no-repeat center / cover;} #con #up-choncation .slide-list .date {position: relative; font-size: 16px; font-weight: 700; z-index: 2;} #con #up-choncation .slide-arrow {width: 40px; height: 40px; border-radius: 50%; background-color: #fff; display: flex; align-items: center; justify-content: center; position: absolute; top: 0; bottom: 0; margin: auto 0; border: 1px solid #e9e9e9;} #con #up-choncation .slide-arrow > i {font-size: 18px;} #con #up-choncation .slide-arrow.prev {left: 20px;} #con #up-choncation .slide-arrow.next {right: 20px;} #con #up-choncation .choncation-list {display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; margin-bottom: 100px;} #con #up-choncation .choncation-item {border: 1px solid #e9e9e9; padding: 30px;} #con #up-choncation .choncation-item .profile {display: flex; align-items: center; margin-bottom: 30px;} #con #up-choncation .choncation-item .profile img {border-radius: 50%; width: 40px; height: 40px; margin-right: 10px;} #con #up-choncation .choncation-item .profile > span {font-size: 16px; font-weight: 500;} #con #up-choncation .choncation-item .profile > span + span {position: relative; margin-left: 23px;} #con #up-choncation .choncation-item .profile > span + span::before {display: block; content: ''; position: absolute; top: 0; bottom: 0; left: -12px; width: 3px; height: 3px; border-radius: 50%; background-color: #d9d9d9; margin: auto 0;} #con #up-choncation .choncation-item .profile .name {color: #000;} #con #up-choncation .choncation-item .profile .job {color: #1B9E50;} #con #up-choncation .choncation-item .profile .date {color: #454545;} #con #up-choncation .choncation-item .info-area > a {display: flex; gap: 30px; width: 100%;} #con #up-choncation .choncation-item .img-area {width: 170px; height: 170px; border-radius: 20px; overflow: hidden;} #con #up-choncation .choncation-item .img-area img {width: 100%; height: 100%; object-fit: cover; object-position: center;} #con #up-choncation .choncation-item .text-area {width: calc(100% - 200px); padding-top: 10px;} #con #up-choncation .choncation-item .subject {font-size: 22px; font-weight: 700; color: #000; display: -webkit-box; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1;} #con #up-choncation .choncation-item .text {font-size: 16px; color: #454545; line-height: 1.6; margin-top: 17px; display: -webkit-box; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3;} #con #up-choncation .choncation-item a:hover {text-decoration: underline;} #con #up-choncation .img-board-list .img-area {position: relative;} #con #up-choncation .img-board-list .img-area:before {display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); z-index: 1;} #con #up-choncation .img-board-list .price {position: absolute; bottom: 20px; font-size: 20px; font-weight: 700; color: #fff; z-index: 2; width: 100%; padding: 0 20px;} #con #up-choncation .img-board-list .price.sale em {font-size: 18px; text-decoration: line-through;} #con #up-choncation .img-board-list .price.sale i {font-size: 18px; font-weight: 400; margin: 0 5px; line-height: 18px;} #con #up-choncation .img-board-list .text-area {padding: 20px 0;} #con #up-choncation .img-board-list .subject {font-weight: 700;} #con #up-choncation .img-board-list .info {display: flex; gap: 10px; margin: 20px 0 10px; font-weight: 700;} #con #up-choncation .img-board-list .info span + span {position: relative;} #con #up-choncation .img-board-list .info span + span::before {display: block; content: ''; position: absolute; top: 0; left: -5px; bottom: 0; width: 1px; height: 10px; background-color: #333; margin: auto 0;} #con #up-choncation .img-board-list .text {color: #454545;} #con #up-choncation .btn-center {text-align: center; margin-top: 50px;} @media all and (max-width: 1300px) and (min-width: 769px) { #con #up-choncation .img-board-list {grid-template-columns: repeat(3, 1fr);} } @media all and (max-width: 1024px) { #con #up-choncation .slide-wrap {margin-bottom: 50px;} #con #up-choncation .slide-list .inner {padding: 30px;} #con #up-choncation .choncation-list {grid-template-columns: repeat(1, 1fr); gap: 30px;} #con #up-choncation .img-board-list .price {flex-wrap: wrap;} } @media all and (max-width: 768px) { #con #up-choncation .slide-wrap {margin-bottom: 30px;} #con #up-choncation .slide-list {width: 100%;} #con #up-choncation .slide-list .inner {padding: 20px; height: 300px; margin-right: 0;} #con #up-choncation .slide-list .title {font-size: 18px; margin-bottom: 0;} #con #up-choncation .slide-list .place {padding: 7px 16px; font-size: 14px; gap: 5px;} #con #up-choncation .slide-list .date {font-size: 14px;} #con #up-choncation .slide-arrow {width: 30px; height: 30px;} #con #up-choncation .choncation-list {gap: 20px; margin-bottom: 50px;} #con #up-choncation .choncation-item {padding: 10px;} #con #up-choncation .choncation-item .profile {margin-bottom: 10px;} #con #up-choncation .choncation-item .profile > span {font-size: 14px;} #con #up-choncation .choncation-item .info-area > a {display: block;} #con #up-choncation .choncation-item .img-area {margin-bottom: 20px;} #con #up-choncation .choncation-item .text-area {width: auto; padding-top: 0;} #con #up-choncation .choncation-item .subject {font-size: 16px;} #con #up-choncation .choncation-item .text {font-size: 14px; margin-top: 10px;} #con #up-choncation .img-board-list .price {font-size: 16px; bottom: 10px; padding: 0 10px;} #con #up-choncation .img-board-list .price.sale em {font-size: 14px;} #con #up-choncation .img-board-list .text-area {padding: 10px 0;} #con #up-choncation .img-board-list .text, #con #up-choncation .img-board-list .info {font-size: 14px;} #con #up-choncation .img-board-list .info {margin: 10px 0 5px;} #con #up-choncation .btn-center {margin-top: 30px;} } /* 지금웰촌 > 계절·테마여행코스 */ #con #season-travle .temp-visual {background-image: url('../images/sub/season-travle-bg.png');} #con #season-travle .season-list { gap: 30px 40px;} #con #season-travle .season-list .item + .item {margin-top: 30px;} #con #season-travle .season-list .item > a {display: flex;} #con #season-travle .season-list .img-area {min-width: 345px; width: 345px; overflow: hidden; position: relative; color: #fff; height: 345px;} #con #season-travle .season-list .img-area:before {display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); z-index: 1;} #con #season-travle .season-list .img-area > img {object-fit: cover; object-position: center; width: 100%; height: 100%; transition: 0.2s;} #con #season-travle .season-list .img-area .inner {position: absolute; left: 0; bottom: 0; z-index: 2; padding: 0 30px 20px;} #con #season-travle .season-list .img-tit {font-family: "Jalnan"; font-size: 20px; line-height: 1.2;} #con #season-travle .season-list .info-area {flex-basis: calc(100% - 345px); border: 1px solid #e9e9e9; border-left-width: 0; padding: 20px 50px;} #con #season-travle .season-list .date {margin-bottom: 8px; color: #D1303B; padding-left: 42px; position: relative; font-weight: 500; padding-top: 7px; min-height: 32px;} #con #season-travle .season-list .date::before, #con #season-travle .season-list .date::after {width: 32px; height: 32px; position: absolute; top: 0; left: 0;} #con #season-travle .season-list .date::before {background-color: #D1303B; content: ''; border-radius: 50%;} #con #season-travle .season-list .date::after {line-height: 32px; content: "\eb21"; color: #fff; font-size: 18px; font-family: 'remixicon'; text-align: center;} #con #season-travle .season-list .subject {font-size: 22px; font-weight: 600; color: #000; display: -webkit-box; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1;} #con #season-travle .season-list .text {color: #454545; margin-top: 10px; display: -webkit-box; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2;} #con #season-travle .season-list .hash {display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px;} #con #season-travle .season-list .hash > span {padding: 7px 20px; border-radius: 24px; background-color: #F5F7F9; color: #454545; font-size: 16px; line-height: 1;} #con #season-travle .season-list .place {display: flex; flex-wrap: wrap; border-top: 1px solid #e9e9e9; margin-top: 15px; padding-top: 19px; counter-reset: item; gap: 10px 30px;} #con #season-travle .season-list .place > li {padding-left: 31px; counter-increment: item; font-size: 18px; font-weight: 500; color: #000; position: relative; padding-top: 2px; min-height: 28px;} #con #season-travle .season-list .place > li::before {position: absolute; top: 0; left: 0; content: counter(item); width: 28px; border-radius: 50%; background-color: #53AFBD; font-size: 14px; font-weight: 800; color: #fff; text-align: center; line-height: 28px;} #con #season-travle .season-list .item > a:hover .img-area > img {transform: scale(1.1);} #con #season-travle .season-head {display: flex; background-color: #F5F7F9; align-items: center;} #con #season-travle .season-head .img-area {flex-basis: 50%; min-height: 345px;} #con #season-travle .season-head .img-area img {width: 100%; height: 100%; object-fit: cover; object-position: center; vertical-align: top;} #con #season-travle .season-head .text-area {flex-basis: 50%; padding: 32px 37px; position: relative;} #con #season-travle .season-head .date {margin-bottom: 25px; color: #D1303B; padding-left: 42px; position: relative; font-weight: 500; padding-top: 7px; min-height: 32px;} #con #season-travle .season-head .date::before, #con #season-travle .season-head .date::after {width: 32px; height: 32px; position: absolute; top: 0; left: 0;} #con #season-travle .season-head .date::before {background-color: #D1303B; content: ''; border-radius: 50%;} #con #season-travle .season-head .date::after {line-height: 32px; content: "\eb21"; color: #fff; font-size: 18px; font-family: 'remixicon'; text-align: center;} #con #season-travle .season-head .subtitle {font-size: 20px; font-weight: 700;} #con #season-travle .season-head .title { font-family: "Jalnan"; font-size: 30px; margin: 19px 0 30px;} #con #season-travle .season-head .text {font-size: 16px; color: #454545;} #con #season-travle .season-head .hash {display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 26px;} #con #season-travle .season-head .hash > span {padding: 0 18px; border-radius: 50px; background-color: #fff; font-size: 14px; color: #454545; line-height: 24px;} #con #season-travle .season-head .info-area {display: flex; align-items: center; gap: 27px;} #con #season-travle .season-head .info-area > * {display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; color: #000;} #con #season-travle .season-head .info-area > *::before {content: ''; width: 38px; height: 38px; border-radius: 50%; background: no-repeat center; box-sizing: border-box;} #con #season-travle .season-head .info-area > .view::before {background-color: #53AFBD; background-image: url('../images/sub/eye-ico.svg');} #con #season-travle .season-head .info-area > .like::before {background-color: #fff; background-image: url('../images/sub/heart-ico-green.svg'); border: 1px solid #e9e9e9; transition: 0.2s;} #con #season-travle .season-head .info-area > .like.active::before, #con #season-travle .season-head .info-area > .like:hover::before {background-color: #1B9E50; background-image: url('../images/sub/heart-ico.svg'); border-color: #1B9E50;} #con #season-travle .season-course {display: flex; margin-bottom: 200px; margin-top: 100px;} #con #season-travle .season-course .start {flex-basis: 189px; font-size: 0; line-height: 0; display: flex; margin-top: 70px;} #con #season-travle .season-course .start::before {content: ''; width: 88px; height: 60px; background: url('../images/sub/season-course-bus.svg') no-repeat center / contain; display: inline-block; margin-right: 21px;} #con #season-travle .season-course .start::after {content: ''; width: 30px; height: 14px; background: url('../images/sub/season-course-arrow.svg') no-repeat center / contain; display: inline-block; margin-top: 24px;} #con #season-travle .season-course .inner {position: relative; flex-basis: calc(100% - 189px); background-image: url('../images/sub/season-course-bg01.svg'), url('../images/sub/season-course-bg02.svg'), url('../images/sub/season-course-bg03.svg'); background-position: left 70px top, center top, right 51px top; background-repeat: no-repeat; padding-top: 83px;} #con #season-travle .season-course .inner::before {width: 100%; border-top: 1px dashed #000; position: absolute; top: 100px; left: 0; content: '';} #con #season-travle .season-course ol {display: flex; justify-content: center; position: relative; counter-reset: item;} #con #season-travle .season-course ol::before, #con #season-travle .season-course ol::after {content: ''; display: block; width: 7px; height: 7px; border-radius: 50%; background-color: #1B9E50; position: absolute; top: 14px;} #con #season-travle .season-course ol::before {left: 0;} #con #season-travle .season-course ol::after {right: 0;} #con #season-travle .season-course ol > li {position: relative; width: 100%; counter-increment: item;} #con #season-travle .season-course ol > li::before {content: counter(item); display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background-color: #1A4399; margin: 0 auto; color: #fff; font-size: 16px; font-weight: 700; line-height: 1;} #con #season-travle .season-course ol > li .img-area {position: absolute; top: 100%; left: 50%; transform: translateX(-50%); text-align: center; font-size: 16px; font-weight: 600; color: #fff; line-height: 1.35; margin-top: 31px; width: 144px; display: flex; align-items: center; justify-content: center; height: 100px; border-radius: 10px; cursor: pointer; background: no-repeat center / cover; isolation: isolate; overflow: hidden; padding: 10px;} #con #season-travle .season-course ol > li .img-area:after {display: block; width: 100%; height: 100%; content: ''; background-color: rgba(0,0,0,0.2); position: absolute; top: 0; left: 0; z-index: -1; transition: 0.3s;} #con #season-travle .season-course ol > li .img-area.active:after {background-color: rgba(26, 67, 153, 0.5);} #con #season-travle .season-course ol > li .distance {position: absolute; bottom: 0; right: 0; transform: translateX(50%); padding-top: 10px; width: calc(100% - 34px); text-align: center; margin-bottom: -12px; font-size: 14px; font-weight: 700; color: #1A4399; overflow: hidden;} #con #season-travle .season-course ol > li:last-child .distance {display: none;} #con #season-travle .season-course ol > li .distance::before {display: block; content: ''; width: 100%; height: 40px; border: 1px dashed #c5c5c5; position: absolute; bottom: 8px; border-radius: 50%; left: 50%; box-sizing: border-box; transform: translateX(-50%); z-index: -2;} #con #season-travle .season-course ol > li .distance::after {display: block; content: ''; width: 50px; height: 100%; background-color: #fff; z-index: -1; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);} #con #season-travle .flex-tit {display: flex; align-items: center; gap: 60px; margin-bottom: 30px;} #con #season-travle .flex-tit .temp-tit-green {margin: 0;} #con #season-travle .season-map {height: 648px; background-color: #f4f4f4; margin-bottom: 70px; display: none;} #con #season-travle .season-map #map {height: 100%;} #con #season-travle .course-marker .num {display: flex; width: 26px; height: 26px; border-radius: 50%; background-color: #1A4399; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff;} #con #season-travle .course-marker .name {position: absolute; top: 50%; left: 100%; font-size: 16px; font-weight: 700; color: #000; transform: translateY(-50%); margin-left: 5px;} #con #season-travle .course-marker .img-area {width: 81px; height: 81px; border-radius: 50%; border: 3px solid #fff; overflow: hidden; position: absolute; top: 0; bottom: 0; margin: auto 0; margin-right: 7px; right: 100%;} #con #season-travle .course-marker .img-area > img {width: 100%; height: 100%; object-fit: cover; object-position: center;} #con #season-travle .season-tab {display: flex; margin-bottom: 70px; padding-top: 1px; padding-left: 1px; margin-top: 85px;} #con #season-travle .season-tab > button {width: 100%; border: 1px solid #e9e9e9; height: 60px; transition: 0.2s; padding: 0 10px; margin-left: -1px; margin-top: -1px; font-size: 18px; font-weight: 600; color: #000;} #con #season-travle .season-tab > button:hover, #con #season-travle .season-tab > button.active {color: #fff; background-color: #1A4399; border-color: #1A4399;} #con #season-travle .season-view-list {counter-reset: item; margin-bottom: 100px;} #con #season-travle .season-panel {counter-increment: item; display: none;} #con #season-travle .season-panel .view-title {display: flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 700; margin-bottom: 20px;} #con #season-travle .season-panel .view-title span {content: counter(item); font-size: 18px; color: #fff; width: 38px; border-radius: 50%; text-align: center; line-height: 38px; background-color: #1A4399;} #con #season-travle .season-panel .view-cont {line-height: 1.56; color: #454545; font-size: 16px;} #con #season-travle .theme-wrap {margin-top: 100px;} #con #season-travle .theme-wrap .visual {background: url('../images/sub/season-theme-img.jpg') no-repeat center / cover; padding: 0 20px; text-align: center; color: #fff; border-radius: 20px 20px 50px; height: 200px; display: flex; align-content: center; justify-content: center; flex-wrap: wrap; margin-bottom: 50px;} #con #season-travle .theme-wrap .visual > * {flex-basis: 100%;} #con #season-travle .theme-wrap .visual .title {font-size: 40px;} #con #season-travle .theme-wrap .visual .subtitle {opacity: 0.7; margin-top: 15px; font-size: 20px; font-weight: 700;} #con #season-travle .theme-wrap .list {display: flex; gap: 40px;} #con #season-travle .theme-wrap .list .item {width: calc(25% - 30px);} #con #season-travle .theme-wrap .list .item > a {display: block; width: 100%;} #con #season-travle .theme-wrap .list .img-area {height: 345px; width: 100%; position: relative; overflow: hidden;} #con #season-travle .theme-wrap .list .img-area > img {transition: 0.2s; width: 100%; height: 100%; object-fit: cover; object-position: center;} #con #season-travle .theme-wrap .list .tag {backdrop-filter: blur(5px); background: rgba(12, 12, 12, 0.2); border-radius: 40px; height: 40px; padding: 0 20px; color: #fff; display: flex; align-items: center; position: absolute; left: 20px; bottom: 20px; width: calc(100% - 40px);} #con #season-travle .theme-wrap .list .tag .inner {display: -webkit-box; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-height: 1;} #con #season-travle .theme-wrap .list .tag .inner span {font-weight: 500;} #con #season-travle .theme-wrap .list .tag .inner span + span {margin-left: 10px;} #con #season-travle .theme-wrap .list .subject {font-size: 18px; font-weight: 700; margin-top: 20px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;} #con #season-travle .theme-wrap .list .item > a:hover .img-area img {transform: scale(1.1);} @media all and (max-width: 1500px) { #con #season-travle .season-list .info-area {padding: 20px;} #con #season-travle .season-list .place > li {font-size: 16px; padding-top: 5px;} #con #season-travle .season-course .inner.over4 ol > li .img-area {width: 110px;} } @media all and (max-width: 1024px) { #con #season-travle .season-list .subject {font-size: 20px;} #con #season-travle .season-list .item + .item {margin-top: 20px;} #con #season-travle .season-list .place {gap: 10px; margin-top: 15px; padding-top: 15px;} #con #season-travle .season-list .hash > span {font-size: 14px;} #con #season-travle .season-head {display: block;} #con #season-travle .season-head .img-area {height: 345px; min-height: auto;} #con #season-travle .season-head .text-area {padding: 20px;} #con #season-travle .season-head .date {font-size: 14px;} #con #season-travle .season-head .title {margin: 20px 0 15px;} #con #season-travle .season-head .hash {margin: 10px 0;} #con #season-travle .season-course ol {flex-wrap: wrap; flex-direction: row;} #con #season-travle .season-course ol > li {width: 25%;} #con #season-travle .season-course ol > li::before {margin: 0 auto;} #con #season-travle .season-course ol > li:nth-child(n + 5) {margin-top: 150px; order:1;} #con #season-travle .season-course ol > li:nth-child(5) {order: 4;} #con #season-travle .season-course ol > li:nth-child(6) {order: 3;} #con #season-travle .season-course ol > li:nth-child(7) {order: 2;} #con #season-travle .season-course ol > li:nth-child(8) {order: 1;} #con #season-travle .season-course ol > li:nth-child(n + 5) .distance {right: auto; left: 0; transform: translateX(-50%);} #con #season-travle .season-course .inner.over4::before {border: 1px dashed #000; border-left-width: 0; height: 183px; border-radius: 0 300px 300px 0;} #con #season-travle .season-course .inner.over4 ol:after {left: 0; right: auto; top: 198px;} #con #season-travle .season-course .inner.over4 ol > li:nth-child(4) .distance {display: none;} #con #season-travle .season-tab.over4 {flex-wrap: wrap;} #con #season-travle .season-tab.over4 > button {width: calc(25% + 1px);} #con #season-travle .theme-wrap .list {flex-wrap: wrap;} #con #season-travle .theme-wrap .list .item {width: calc(50% - 20px);} } @media all and (max-width: 900px) { #con #season-travle .season-list .item > a {display: block;} #con #season-travle .season-list .img-area {height: 200px; min-height: auto; min-width: auto; width: 100%;} #con #season-travle .season-list .img-area .inner {padding: 0 10px 10px;} #con #season-travle .season-list .info-area {padding: 10px; border-top: none; border-left-width: 1px;} #con #season-travle .season-list .hash {margin-top: 10px;} #con #season-travle .season-list .hash > span {padding: 5px 10px;} #con #season-travle .season-list .place {margin-top: 10px; padding-top: 10px;} } @media all and (max-width: 850px) { #con #season-travle .season-course ol > li .img-area {width: 110px;} } @media all and (max-width: 768px) { #con #season-travle .season-list .date {font-size: 14px;} #con #season-travle .season-list .subject {font-size: 16px;} #con #season-travle .season-list .place {gap: 5px 10px;} #con #season-travle .season-list .text, #con #season-travle .season-list .place > li {font-size: 14px; padding-top: 3px;} #con #season-travle .season-list .place > li::before {width: 24px; line-height: 24px; font-size: 12px;} #con #season-travle .season-head .img-area {height: 180px;} #con #season-travle .season-head .subtitle {font-size: 16px;} #con #season-travle .season-head .title {font-size: 22px;} #con #season-travle .season-head .text {font-size: 14px;} #con #season-travle .season-head .hash {gap: 5px;} #con #season-travle .season-head .info-area {gap: 10px;} #con #season-travle .season-head .info-area > * {gap: 5px; font-size: 14px;} #con #season-travle .season-head .info-area > *::before {width: 25px; height: 25px; background-size: 15px;} #con #season-travle .course-tit {font-size: 25px; margin: 30px 0 10px;} #con #season-travle .course-subtit {font-size: 14px;} #con #season-travle .season-course {margin-top: 20px;} #con #season-travle .season-course .start {flex-basis: 104px;} #con #season-travle .season-course .start::before {width: 68px; height: 47px; margin-right: 5px;} #con #season-travle .season-course .start::after {width: 20px; height: 9px;} #con #season-travle .season-course .inner {flex-basis: calc(100% - 104px); background-position: left top, center top, right top;} #con #season-travle .season-course ol > li span {font-size: 12px; margin-top: 5px;} #con #season-travle .flex-tit {justify-content: space-between; gap: 10px;} #con #season-travle .flex-tit .temp-btn {min-width: max-content;} #con #season-travle .season-map {height: 300px; margin-bottom: 20px;} #con #season-travle .season-tab {margin-bottom: 30px;} #con #season-travle .season-tab > button {font-size: 14px; height: 50px;} #con #season-travle .season-tab.over2 {flex-wrap: wrap;} #con #season-travle .season-tab.over2 > button, #con #season-travle .season-tab.over4 > button {width: calc(50% + 1px);} #con #season-travle .season-view-list {margin-bottom: 50px;} #con #season-travle .season-panel .view-title {font-size: 16px; gap: 5px; margin-bottom: 10px;} #con #season-travle .season-panel .view-title::before {width: 25px; line-height: 25px; font-size: 14px;} #con #season-travle .season-panel .view-cont {font-size: 14px;} #con #season-travle .theme-wrap {margin-top: 50px;} #con #season-travle .theme-wrap .visual {height: 150px; border-radius: 10px 10px 30px; margin-bottom: 20px;} #con #season-travle .theme-wrap .visual .title {font-size: 25px;} #con #season-travle .theme-wrap .visual .subtitle {font-size: 16px;} #con #season-travle .theme-wrap .list {gap: 20px;} #con #season-travle .theme-wrap .list .item {width: calc(50% - 10px);} #con #season-travle .theme-wrap .list .img-area {height: 240px;} #con #season-travle .theme-wrap .list .tag {height: 30px; padding: 0 15px; left: 10px; bottom: 10px; width: calc(100% - 20px);} #con #season-travle .theme-wrap .list .tag .inner span {font-size: 14px;} #con #season-travle .theme-wrap .list .tag .inner span + span {margin-left: 5px;} #con #season-travle .theme-wrap .list .subject {font-size: 16px; margin-top: 10px;} } @media all and (max-width: 600px) { #con #season-travle .season-course {display: block; margin: 20px auto 40px; width: 220px;} #con #season-travle .season-course .start {display: block; margin-top: 0;} #con #season-travle .season-course .start::before {margin-right: 0; margin-bottom: 5px; display: block;} #con #season-travle .season-course .start::after {transform: rotate(90deg); margin-top: 0; margin-left: 25px; display: block;} #con #season-travle .season-course .inner {margin-top: 30px; background: none; padding-top: 0;} #con #season-travle .season-course .inner::before {height: 100% !important; width: 0; border-left: 1px dashed #000; left: 34px; top: 0;} #con #season-travle .season-course ol {display: block; padding-top: 20px; padding-bottom: 20px;} #con #season-travle .season-course ol::before {top: 0; left: 31px;} #con #season-travle .season-course ol::after {bottom: -3px; left: 31px !important; top: auto !important; right: auto !important;} #con #season-travle .season-course ol li {width: auto; text-align: left;} #con #season-travle .season-course ol > li::before {margin: 0 0 0 17px;} #con #season-travle .season-course ol > li:nth-child(n + 2) {margin-top: 70px;} #con #season-travle .season-course ol > li .img-area {top: 50%; left: 100px; transform: translateY(-50%); margin-top: 0; height: auto;} #con #season-travle .season-course ol > li .distance {width: auto; height: auto; top: 34px; bottom: auto; transform: none !important; left: 35px !important; right: auto; margin: 0; padding: 26px 0;} #con #season-travle .season-course ol > li .distance::before {height: 100%; width: 46px; transform: translateY(50%); right: 18px; left: auto; bottom: 50%;} #con #season-travle .season-course ol > li .distance::after {height: 20px; width: 100%; transform: translateY(50%); left: 0; bottom: 50%;} #con #season-travle .season-course .inner.over4 ol > li:nth-child(4) .distance {display: block;} #con #season-travle .theme-wrap .list .item {width: 100%;} } /* 지금웰촌 > 여행이야기 */ #con #story .temp-visual {background-image: url('../images/sub/story-bg.png'); position: relative;} #con #story .temp-visual img {position: absolute; top: 0; right: 50px; bottom: 0; margin: auto 0;} #con #story .story-list {display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 40px;} #con #story .story-list .item > a {display: flex;} #con #story .story-list .img-area {flex-basis: 47.26%; min-height: 345px; overflow: hidden; position: relative; color: #fff;} #con #story .story-list .img-area > img {object-fit: cover; object-position: center; width: 100%; height: 100%; transition: 0.2s;} #con #story .story-list .img-tit {font-family: "Jalnan"; font-size: 20px; line-height: 1.2;} #con #story .story-list .img-text {font-size: 14px; font-weight: 700; margin-top: 15px;} #con #story .story-list .info-area {flex-basis: 52.74%; border: 1px solid #e9e9e9; border-left-width: 0; padding: 30px 30px 10px;} #con #story .story-list .place {display: flex; align-items: center; color: #000; gap: 10px; margin-top: 25px;} #con #story .story-list .place::before {min-width: 40px; width: 40px; height: 40px; border-radius: 50%; content: ''; background: #1A4399 url('../images/sub/map-icon.svg') no-repeat center;} #con #story .story-list .subject {font-size: 18px; font-weight: 600; color: #000; display: -webkit-box; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2;} #con #story .story-list .text {line-height: 1.6; color: #454545; border-top: 1px solid #e9e9e9; margin-top: 25px; padding-top: 30px; display: -webkit-box; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; word-break: break-all;} #con #story .story-list .info {display: flex; align-items: center; gap: 27px; justify-content: end; margin-top: 15px;} #con #story .story-list .info > * {display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; color: #000;} #con #story .story-list .info > *::before {content: ''; width: 38px; height: 38px; border-radius: 50%; background: no-repeat center; box-sizing: border-box;} #con #story .story-list .info > .view::before {background-color: #53AFBD; background-image: url('../images/sub/eye-ico.svg');} #con #story .story-list .info > .like::before {background-color: #fff; background-image: url('../images/sub/heart-ico-green.svg'); border: 1px solid #e9e9e9; transition: 0.2s;} #con #story .story-list .info > .like.active::before, #con #story .story-list .info > .like:hover::before {background-color: #1B9E50; background-image: url('../images/sub/heart-ico.svg'); border-color: #1B9E50;} #con #story .story-view {border: 1px solid #e9e9e9; margin-bottom: 50px;} #con #story .story-cont {padding: 50px;} #con #story .story-cont .subject {font-size: 30px; font-weight: 600; margin-bottom: 50px; display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid #e9e9e9; padding-bottom: 20px;} #con #story .story-cont .subject .date {font-size: 16px; font-weight: 400; color: #454545; min-width: fit-content;} #con #story .story-list .item > a:hover .img-area > img {transform: scale(1.1);} @media all and (max-width: 1200px) { #con #story .story-list {gap: 20px;} #con #story .story-list .info-area {padding: 20px;} #con #story .story-cont {padding: 30px;} } @media all and (max-width: 1024px) { #con #story .story-list {display: block;} #con #story .story-list .item + .item {margin-top: 20px;} #con #story .story-cont .subject {display: block; font-size: 26px;} #con #story .story-cont .subject .date {margin-top: 10px; display: block;} } @media all and (max-width: 768px) { #con #story .temp-visual {padding: 20px;} #con #story .temp-visual img {position: static; width: 100px;} #con #story .story-list .item > a {display: block;} #con #story .story-list .img-area {height: 200px; min-height: auto;} #con #story .story-list .img-area .inner {padding: 0 10px 10px;} #con #story .story-list .img-tit {font-size: 18px;} #con #story .story-list .img-text {margin-top: 10px;} #con #story .story-list .info-area {padding: 10px; border-top-width: 0; border-left-width: 1px;} #con #story .story-list .place {gap: 5px; font-size: 14px; margin-top: 10px;} #con #story .story-list .place::before {min-width: 30px; width: 30px; height: 30px;} #con #story .story-list .subject {font-size: 16px;} #con #story .story-list .text {font-size: 14px; margin-top: 10px; padding-top: 10px;} #con #story .story-list .info {gap: 10px;} #con #story .story-list .info > * {gap: 5px; font-size: 14px;} #con #story .story-list .info > *::before {width: 25px; height: 25px; background-size: 15px;} #con #story .story-view {margin-bottom: 30px;} #con #story .story-cont {padding: 10px; font-size: 14px;} #con #story .story-cont .subject {font-size: 22px; margin-bottom: 30px;} } /* 지금웰촌 > 영상으로 보는 웰촌 */ #con #video-welchon .temp-visual {background-image: url('../images/sub/video-bg.png');} #con #video-welchon .tag-wrap {position: relative;} #con #video-welchon #tagSearch {position: absolute; top: 100%; left: 0; width: 500px; border-radius: 30px; box-shadow: 5px 10px 20px 0px rgba(0, 0, 0, 0.1); padding: 30px 50px; background-color: #fff; z-index: 10; border: 1px solid #e9e9e9; margin-top: 18px; display: none; max-width: calc(100vw - 40px);} #con #video-welchon #tagClose {font-size: 0; line-height: 0; position: absolute; top: 20px; right: 20px;} #con #video-welchon #tagClose::before {font-family: 'remixicon'; content: "\f4c8"; font-size: 20px; line-height: 1;} #con #video-welchon #tagSearch .checkbox-list {gap: 10px; flex-wrap: wrap; display: flex;} #con #video-welchon #tagSearch .checkbox-list.active {display: flex;} #con #video-welchon #tagSearch .checkbox-list .item {position: relative;} #con #video-welchon #tagSearch .checkbox-list .item input[type="checkbox"] {position: absolute; width: 0; height: 0;} #con #video-welchon #tagSearch .checkbox-list .item label {border: 1px dashed #E1E4EB; border-radius: 40px; font-size: 14px; font-weight: 500; color: #142241; cursor: pointer; line-height: 1; padding: 13px 20px; display: block; background-color: #fff;} #con #video-welchon #tagSearch .checkbox-list .item input[type="checkbox"]:checked + label {background-color: #EBEDEE;} #con #video-welchon .video-list {display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 40px;} #con #video-welchon .video-list .item {background: no-repeat center / 100%; transition: 0.2s;} #con #video-welchon .video-list .item > a {display: block; position: relative;align-items: end;} #con #video-welchon .video-list .item > a::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 262px; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); z-index: 1;} #con #video-welchon .video-list .inner {width: 100%; height: 262px; overflow: hidden; position: relative;} #con #video-welchon .video-list .inner::before, #con #video-welchon .video-list .inner::after {position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; z-index: 2; content: ''; border-radius: 50%;} #con #video-welchon .video-list .inner::before {width: 68px; height: 68px; backdrop-filter: blur(5px); background-color: rgba(255, 255, 255, 0.5);} #con #video-welchon .video-list .inner::after {width: 52px; height: 52px; background: #fff url('../images/sub/youtube-ico.svg') no-repeat center;} #con #video-welchon .video-list .item img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: 0.2s;} #con #video-welchon .video-list .subject {position: absolute; bottom: 20px; left: 0; z-index: 2; font-size: 18px; font-weight: 700; color: #fff; padding: 0 30px; display: -webkit-box; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.27; width: 100%;} #con #video-welchon .video-list .text {margin-top: 10px; display: -webkit-box; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1;} #con #video-welchon .video-list .item > a:hover img {transform: scale(1.1);} @media all and (max-width: 1200px) { #con #video-welchon .board-head .search-area .temp-select {width: auto;} } @media all and (max-width: 1024px) { #con #video-welchon .video-list {grid-template-columns: repeat(2, 1fr); gap: 20px;} } @media all and (max-width: 768px) { #con #video-welchon .tag-wrap, #con #video-welchon .board-head .search-area .temp-select {width: 100%;} #con #video-welchon #tagSearch {padding: 20px; width: 300px; margin-top: 10px; border-radius: 20px;} #con #video-welchon #tagSearch .checkbox-list {gap: 5px 10px;} #con #video-welchon #tagSearch .checkbox-list .item label {padding: 5px 10px;} #con #video-welchon .video-list {grid-template-columns: 100%;} #con #video-welchon .video-list .subject {font-size: 16px; padding: 0 10px; bottom: 10px;} #con #video-welchon .video-list .text {font-size: 14px;} } /* 여행정보 > 지도검색 */ #map-welchon {padding-top: 80px; height: 100dvh; position: relative;} #map-welchon #map {width: 100%; height: 100%;} #map-welchon .temp-tit-red {margin-top: 0;} #map-welchon .map-left {position: absolute; top: 110px; left: 30px; z-index: 1; border-radius: 20px; backdrop-filter: blur(5px); background-color: rgba(255, 255, 255, 0.5); box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.15); padding: 30px; max-height: calc(100vh - 140px); height: 100%; width: 345px;} #map-welchon .map-left .search-area select, #map-welchon .map-left .search-area input[type="text"] {border: 1px solid #e9e9e9; border-radius: 5px; background-color: #fff; height: 50px; display: block; margin-bottom: 5px; font-size: 16px; color: #454545; width: 100%; padding: 0 20px;} #map-welchon .map-left .search-area select {padding-right: 54px; background: #fff url('../images/sub/select-bg.svg') no-repeat right 20px center;} #map-welchon .map-left .search-area .search-btn {display: flex; align-items: center; justify-content: center; border-radius: 5px; background-color: #53AFBD; font-size: 16px; font-weight: 700; color: #fff; width: 100%; height: 50px;} #map-welchon .map-left .toggle-btn {display: none;} #map-welchon .map-left .tit-flex {margin-top: 32px; display: flex; justify-content: space-between;align-items: baseline;} #map-welchon .map-left .tit-flex select {background: #fff url('../images/sub/select-bg.svg') no-repeat right 7px center / 18px; height: 26px; border: 1px solid #e9e9e9; border-radius: 5px; font-size: 12px; font-weight: 700; color: #454545; padding: 0 35px 0 10px;} #map-welchon .map-left .temp-tit-red .red-text {color: #D1303B;} #map-welchon .map-list {max-height: calc(100% - 430px); overflow-y: auto; padding-bottom: 20px;} #map-welchon .map-list::-webkit-scrollbar {width: 10px;} #map-welchon .map-list::-webkit-scrollbar-thumb {background-color: rgba(83, 83, 83, 0.15); border-radius: 10px; background-clip: padding-box; border: 2px solid transparent; width: 5px;} #map-welchon .map-list::-webkit-scrollbar-track {background-color: transparent;} #map-welchon .map-list .item {margin-bottom: 20px;} #map-welchon .map-list .item:last-child {margin-bottom: 0;} #map-welchon .map-list .item > a {display: flex; align-items: center; position: relative;} #map-welchon .map-list .item .img-area {min-width: 100px; width: 100px; height: 100px; overflow: hidden; border-radius: 50%;} #map-welchon .map-list .item .img-area img {width: 100%; height: 100%; object-fit: cover; object-position: center; transition: 0.2s;} #map-welchon .map-list .item.knto .img-area {background: url('../images/sub/knto_ci.png') no-repeat center / cover;} #map-welchon .map-list .item .text-area {padding-left: 10px;} #map-welchon .map-list .item .title {font-size: 16px; font-weight: 700; color: #000; word-break: break-all;} #map-welchon .map-list .item .distance {font-size: 14px; color: #454545; margin: 10px 0;} #map-welchon .map-list .item .cate {display: flex; align-items: center; font-size: 14px; font-weight: 600; color: #000; gap: 5px;} #map-welchon .map-list .item .cate::before {font-family: "remixicon"; font-size: 18px; font-weight: 400;} #map-welchon .map-list .item > a:hover .img-area img {transform: scale(1.1);} #map-welchon .map-list .item.euddeum > a::before {content: ''; box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.15); position: absolute; bottom: 0; left: 64px; background: #fff url('../images/sub/map-euddeum.svg') no-repeat center; width: 36px; height: 36px; border-radius: 50%; z-index: 1;} #map-welchon .map-list .item.lodgment .cate::before {content: "\ebb9"; color: #4845A2;} #map-welchon .map-list .item.food .cate::before {content: "\f083"; color: #DF4F3E;} #map-welchon .map-list .item.experience .cate::before {content: "\efb0"; color: #1B9E50;} #map-welchon .map-list .item.rural .cate::before {content: "\ee2e"; color: #D1303B;} #map-welchon .map-list .item.tourist .cate::before {content: "\ee7c"; color: #53B3C0;} #map-welchon .map-list .item.cafe .cate::before {content: "\f402"; color: #A3490C;} #map-welchon .map-list .item.festivities .cate::before {content: "\f3bf"; color: #1B9E50;} #map-welchon .map-list .item.national .cate::before {content: "\F0D4"; color: #b57f00;} #map-welchon .map-list .item.restaurant .cate::before {content: "\f082"; color: #E67E22;} #map-welchon .map-list .item.foodmaster .cate::before {content: "\EA89"; color: #8E44AD;} #map-welchon .map-list .item.healingforest .cate::before {content: "\F3E2"; color: #558B2F;} #map-welchon .map-list .item.brewery .cate::before {content: "\f4e0"; color: #cc2464;} #map-welchon .map-list .item.farmstay .cate::before {content: "\ebb9"; color: #4845A2;} #map-welchon .map-list .item.delicious .cate::before {content: "\f429";color: #2c6eff;} #map-welchon .map-cate {display: flex; position: absolute; left: 425px; top: 110px; z-index: 1; gap: 5px;} #map-welchon .map-cate .cate-item {display: flex; align-items: center; padding: 6px 20px; border-radius: 30px; box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.15); backdrop-filter: blur(5px); background-color: rgba(255, 255, 255, 0.5); font-size: 14px; font-weight: 600; color: #000; gap: 5px; transition: 0.2s;} #map-welchon .map-cate .cate-item::before {font-family: "remixicon"; font-size: 18px; font-weight: 400; transition: 0.2s;} #map-welchon .map-cate .cate-item.lodgment::before {content: "\ebb9"; color: #4845A2;} #map-welchon .map-cate .cate-item.food::before {content: "\f083"; color: #DF4F3E;} #map-welchon .map-cate .cate-item.experience::before {content: "\efb0"; color: #1B9E50;} #map-welchon .map-cate .cate-item.rural::before {content: "\ee2e"; color: #D1303B;} #map-welchon .map-cate .cate-item.tourist::before {content: "\ee7c"; color: #53B3C0;} #map-welchon .map-cate .cate-item.cafe::before {content: "\f402"; color: #A3490C;} #map-welchon .map-cate .cate-item.festivities::before {content: "\f3bf"; color: #1B9E50;} #map-welchon .map-cate .cate-item.national::before {content: "\F0D4"; color: #b57f00;} #map-welchon .map-cate .cate-item.restaurant::before {content: "\f082"; color: #E67E22;} #map-welchon .map-cate .cate-item.foodmaster::before {content: "\EA89"; color: #8E44AD;} #map-welchon .map-cate .cate-item.healingforest::before {content: "\F3E2"; color: #558B2F;} #map-welchon .map-cate .cate-item.brewery::before {content: "\f4e0"; color: #cc2464;} #map-welchon .map-cate .cate-item.farmstay::before {content: "\ebb9"; color: #4845A2;} #map-welchon .map-cate .cate-item.delicious::before {content: "\f429";color: #2c6eff;} #map-welchon .map-cate .cate-item.disable {background-color: rgba(0, 0, 0, 0.5); color: #fff;} #map-welchon .map-cate .cate-item.disable::before {color: #fff;} #map-welchon .tour-marker {position: relative; text-align: center; width: 30px;} #map-welchon .tour-marker .title {position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding: 5px 15px; border-radius: 30px; font-size: 12px; font-weight: 700; color: #fff; margin-bottom: 10px; background-color: #E51937; display: none; line-height: 1;} #map-welchon .tour-marker .title::before {border-right: 4px solid transparent; border-left: 4px solid transparent; border-top: 6px solid; content: ''; width: 0; height: 0; display: block; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);} #map-welchon .tour-marker.tourist .title {background-color: #53B3C0;} #map-welchon .tour-marker.tourist .title::before {border-top-color: #53B3C0;} #map-welchon .tour-marker.food .title {background-color: #DF4F3E;} #map-welchon .tour-marker.food .title::before {border-top-color: #DF4F3E;} #map-welchon .tour-marker.cafe .title {background-color: #A3490C;} #map-welchon .tour-marker.cafe .title::before {border-top-color: #A3490C;} #map-welchon .tour-marker.lodgment .title {background-color: #4845A2;} #map-welchon .tour-marker.lodgment .title::before {border-top-color: #4845A2;} #map-welchon .tour-marker.festivities .title {background-color: #1B9E50;} #map-welchon .tour-marker.festivities .title::before {border-top-color: #1B9E50;} #map-welchon .tour-marker.national .title {background-color: #b57f00;} #map-welchon .tour-marker.national .title::before {border-top-color: #b57f00;} #map-welchon .tour-marker.restaurant .title {background-color: #E67E22;} #map-welchon .tour-marker.restaurant .title::before {border-top-color: #E67E22;} #map-welchon .tour-marker.foodmaster .title {background-color: #8E44AD;} #map-welchon .tour-marker.foodmaster .title::before {border-top-color: #8E44AD;} #map-welchon .tour-marker.healingforest .title {background-color: #558B2F;} #map-welchon .tour-marker.healingforest .title::before {border-top-color: #558B2F;} #map-welchon .tour-marker.brewery .title {background-color: #cc2464;} #map-welchon .tour-marker.brewery .title::before {border-top-color: #cc2464;} #map-welchon .tour-marker.farmstay .title {background-color: #4845A2;} #map-welchon .tour-marker.farmstay .title::before {border-top-color: #4845A2;} #map-welchon .tour-marker.delicious .title {background-color: #2c6eff;} #map-welchon .tour-marker.delicious .title::before {border-top-color: #2c6eff;} #map-welchon .tour-marker img {display: block; width: 30px; height: 30px;} #map-welchon .welchon-marker {position: relative;} #map-welchon .welchon-marker .text {position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding: 5px 15px; border-radius: 30px; font-size: 12px; font-weight: 700; color: #fff; margin-bottom: 16px; line-height: 1;} #map-welchon .welchon-marker .text::before {border-right: 4px solid transparent; border-left: 4px solid transparent; border-top: 6px solid; content: ''; width: 0; height: 0; display: block; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);} #map-welchon .welchon-marker .inner {width: 40px; height: 40px; background-color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.15);} #map-welchon .welchon-marker .inner::before {font-family: "remixicon"; font-size: 18px;} #map-welchon .welchon-marker.lodgment .inner::before {content: "\ebb9"; color: #4845A2;} #map-welchon .welchon-marker.food .inner::before {content: "\f083"; color: #DF4F3E;} #map-welchon .welchon-marker.experience .inner::before {content: "\efb0"; color: #1B9E50;} #map-welchon .welchon-marker.rural .inner::before {content: "\ee2e"; color: #D1303B;} #map-welchon .welchon-marker.tourist .inner::before {content: "\ee7c"; color: #53B3C0;} #map-welchon .welchon-marker.cafe .inner::before {content: "\f402"; color: #A3490C;} #map-welchon .welchon-marker.festivities .inner::before {content: "\f3bf"; color: #1B9E50;} #map-welchon .welchon-marker.national .inner::before {content: "\F0D4"; color: #b57f00;} #map-welchon .welchon-marker.restaurant .inner::before {content: "\f082"; color: #E67E22;} #map-welchon .welchon-marker.foodmaster .inner::before {content: "\EA89"; color: #8E44AD;} #map-welchon .welchon-marker.healingforest .inner::before {content: "\F3E2"; color: #558B2F;} #map-welchon .welchon-marker.brewery .inner::before {content: "\f4e0"; color: #cc2464;} #map-welchon .welchon-marker.farmstay .inner::before {content: "\ebb9"; color: #4845A2;} #map-welchon .welchon-marker.delicious .inner::before {content: "\f429";color: #2c6eff;} #map-welchon .welchon-marker.lodgment .text {background-color: #4845A2;} #map-welchon .welchon-marker.lodgment .text::before {border-top-color: #4845A2;} #map-welchon .welchon-marker.food .text {background-color: #DF4F3E;} #map-welchon .welchon-marker.food .text::before {border-top-color: #DF4F3E;} #map-welchon .welchon-marker.experience .text {background-color: #1B9E50;} #map-welchon .welchon-marker.experience .text::before {border-top-color: #1B9E50;} #map-welchon .welchon-marker.rural .text {background-color: #D1303B;} #map-welchon .welchon-marker.rural .text::before {border-top-color: #D1303B;} #map-welchon .welchon-marker.tourist .text {background-color: #53B3C0;} #map-welchon .welchon-marker.tourist .text::before {border-top-color: #53B3C0;} #map-welchon .welchon-marker.cafe .text {background-color: #A3490C;} #map-welchon .welchon-marker.cafe .text::before {border-top-color: #A3490C;} #map-welchon .welchon-marker.festivities .text {background-color: #1B9E50;} #map-welchon .welchon-marker.festivities .text::before {border-top-color: #1B9E50;} #map-welchon .welchon-marker.national .text {background-color: #b57f00;} #map-welchon .welchon-marker.national .text::before {border-top-color: #b57f00;} #map-welchon .welchon-marker.restaurant .text {background-color: #E67E22;} #map-welchon .welchon-marker.restaurant .text::before {border-top-color: #E67E22;} #map-welchon .welchon-marker.foodmaster .text {background-color: #8E44AD;} #map-welchon .welchon-marker.foodmaster .text::before {border-top-color: #8E44AD;} #map-welchon .welchon-marker.healingforest .text {background-color: #558B2F;} #map-welchon .welchon-marker.healingforest .text::before {border-top-color: #558B2F;} #map-welchon .welchon-marker.brewery .text {background-color: #cc2464;} #map-welchon .welchon-marker.brewery .text::before {border-top-color: #cc2464;} #map-welchon .welchon-marker.farmstay .text {background-color: #4845A2;} #map-welchon .welchon-marker.farmstay .text::before {border-top-color: #4845A2;} #map-welchon .welchon-marker.delicious .text {background-color: #2c6eff;} #map-welchon .welchon-marker.delicious .text::before {border-top-color: #2c6eff;} #map-welchon .custom-btn {position: absolute; right: 50px; bottom: 50px; z-index: 2; font-size: 0; line-height: 0;} #map-welchon .custom-btn button {display: flex; align-items: center; justify-content: center; width: 46px; height: 46px;} #map-welchon .custom-btn button::before {font-family: "remixicon"; font-size: 24px; content: "\f4c8";color: #000;} #map-welchon .custom-btn .local-place {border-radius: 10px; background-color: #fff; box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.15);} #map-welchon .custom-btn .local-place::before {content: "\f3b5";} #map-welchon .custom-btn .zoom-wrap {border-radius: 10px; background-color: #fff; box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.15); margin-top: 10px;} #map-welchon .custom-btn .zoon-in {position: relative;} #map-welchon .custom-btn .zoon-in::before {content: "\ea13";} #map-welchon .custom-btn .zoon-in::after {content: ''; position: absolute; bottom: 0; right: 0; left: 0; margin: 0 auto; width: 29px; height: 1px; background-color: #e9e9e9;} #map-welchon .custom-btn .zoon-out::before {content: "\f1af";} #map-welchon .refresh-btn {position: absolute; bottom: 70px; left: 0; right: 0; margin: 0 auto; width: 182px;} #map-welchon .knto-btn {position: absolute; top: 110px; right: 50px; z-index: 10; box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.15);} #map-welchon .knto-btn > i {font-size: 24px; display: none;} #map-welchon .knto-btn.active {color: #1B9E50;} #map-welchon .knto-btn.active::before {left: 100%;} #map-welchon .knto-btn.active > i {display: block;} #map-welchon .map-pop {position: absolute; bottom: 100%; left: 50%; width: 300px; background-color: #fff; z-index: 2; transform: translateX(-50%); margin-bottom: 30px; border-radius: 20px; box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.15); padding: 30px; text-align: center;} #map-welchon .map-pop::before {content: ''; width: 100%; height: 26px; background: url('../images/sub/map-logo.svg') no-repeat center / contain; display: block; margin-bottom: 15px;} #map-welchon .map-pop.knto::before {display: none;} #map-welchon .map-pop .close {position: absolute; top: 20px; right: 20px;} #map-welchon .map-pop.knto .close {top: 5px; right: 10px;} #map-welchon .map-pop .close::before {font-family: "remixicon"; font-size: 24px; content: "\eb99"; color: #000;} #map-welchon .map-pop .img-area {width: 100%; height: 150px; border-radius: 10px; overflow: hidden;} #map-welchon .map-pop .img-area img {width: 100%; height: 100%; object-fit: cover; object-position: center;} #map-welchon .map-pop .title {font-size: 18px; font-weight: 700; margin: 19px 0 12px;} #map-welchon .map-pop .address, #map-welchon .map-pop .tel, #map-welchon .map-pop .site, #map-welchon .map-pop .text, #map-welchon .map-pop .info {font-size: 14px; color: #454545; margin-top: 5px; white-space: normal; border-top: 1px solid #e9e9e9; padding-top: 7px;} #map-welchon .map-pop .text {display: -webkit-box; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2;} #map-welchon .map-pop [class^=anchor] {font-size: 16px; color: #fff; border-radius: 50px; background-color: #53AFBD; padding: 10px 27px; font-weight: 700; margin: 17px auto 0; display: inline-flex; line-height: 1; align-items: center; gap: 5px;} #map-welchon .map-pop .anchor2::before {content: "\ee19"; font-size: 18px; font-family: 'remixicon'; font-weight: 400;} #map-welchon .map-pop .anchor + .anchor {margin-top: 5px;} #map-welchon .map-pop .info {border-top: none;} @media all and (max-width: 1550px) { #map-welchon .knto-btn {left: 425px; top: 170px; right: auto;} #map-welchon .prev-anchor {top: 160px;} } @media all and (max-width: 1200px) { #map-welchon .map-left {top: auto; bottom: 0; left: 0; width: 100%; background-color: #fff; box-shadow: 0px -5px 10px 0px rgba(0, 0, 0, 0.1); padding-top: 40px; padding-bottom: 23px; margin-bottom: -500px; max-height: none; height: auto; border-radius: 20px 20px 0 0; transition: 0.5s; overflow-y: auto;} #map-welchon .map-left.no-paging {margin-bottom: -460px;} #map-welchon .map-left.active {bottom: 0; margin-bottom: 0 !important; max-height: calc(100dvh - 100px);} #map-welchon .map-left .toggle-btn {display: block; position: absolute; top: 10px; right: 0; left: 0; margin: 0 auto; font-size: 24px; z-index: 2;} #map-welchon .map-left .toggle-btn.on {top: 20px; right: 20px; left: auto;} #map-welchon .map-left .toggle-btn.on::before {content: "\eb99"; font-size: 36px;} #map-welchon .map-left .tit-flex {margin-top: 20px;} #map-welchon .map-left .search-area {display: flex; flex-wrap: wrap; gap: 10px;} #map-welchon .map-left .search-area select {flex-basis: calc(50% - 5px); margin-bottom: 0;} #map-welchon .map-list {display: flex; overflow-x: scroll; overflow-y: visible; gap: 20px; padding-bottom: 0; max-height: none;} #map-welchon .map-list::-webkit-scrollbar {height: 9px;} #map-welchon .map-list .item {margin-bottom: 0; padding-bottom: 20px;} #map-welchon .map-list .item .title, #map-welchon .map-list .item .distance {min-width: max-content;} #map-welchon .map-left .pagenation {margin-top: 10px;} #map-welchon .prev-anchor {top: 175px; right: 10px; width: 44px; height: 44px;} #map-welchon .prev-anchor::before {font-size: 18px;} #map-welchon .custom-btn {bottom: 72px; right: 10px; transition: 0.5s;} #map-welchon .custom-btn.active {bottom: 568px;} #map-welchon .custom-btn .local-place, #map-welchon .custom-btn .zoom-wrap {background-color: rgba(255, 255, 255, 0.7); backdrop-filter: blur(5px);} #map-welchon .map-cate {top: 110px; left: 0; overflow-x: auto; width: 100%; padding: 0 10px 25px;} #map-welchon .map-cate::-webkit-scrollbar-track {background-color: transparent;} #map-welchon .map-cate .cate-item {min-width: fit-content;} #map-welchon .knto-btn {left: 10px;} } @media all and (max-width: 1024px) { #map-welchon .map-left {margin-bottom: -500px;} #map-welchon .map-left.no-paging {margin-bottom: -460px;} } @media all and (max-width: 768px) { #map-welchon .map-left {margin-bottom: -470px;} #map-welchon .map-left.no-paging {margin-bottom: -420px;} #map-welchon .custom-btn.active {bottom: 530px;} } /* 여행정보 > 여행지 정보 */ #con #travel-info .temp-visual {background-image: url('../images/sub/travel-info-bg.png');} #con #travel-info .info-list {display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 40px;} #con #travel-info .info-list .item {display: flex;} #con #travel-info .info-list .img-area {display: block; flex-basis: 47.26%; height: 345px; overflow: hidden; position: relative; color: #fff;} #con #travel-info .info-list .img-area:before {display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); z-index: 1;} #con #travel-info .info-list .img-area > img {object-fit: cover; object-position: center; width: 100%; height: 100%; transition: 0.2s;} #con #travel-info .info-list .img-area .inner {position: absolute; left: 0; bottom: 0; z-index: 2; padding: 0 30px 20px;} #con #travel-info .info-list .img-area .api-logo {position: absolute; right: 10px; top: 10px; z-index: 3; background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); padding: 10px; border-radius: 10px; font-size: 0; line-height: 0;} #con #travel-info .info-list .img-tit {font-family: "Jalnan"; font-size: 20px; line-height: 1.2;} #con #travel-info .info-list .img-text {font-size: 14px; font-weight: 700; margin-top: 15px;} #con #travel-info .info-list .info-area {flex-basis: 52.74%; border: 1px solid #e9e9e9; border-left-width: 0; padding: 30px 30px 20px;} #con #travel-info .info-list .subject {font-size: 20px; font-weight: 600; color: #000; display: -webkit-box; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2;} #con #travel-info .info-list .place {display: flex; align-items: center; color: #000; gap: 10px; margin-top: 15px;} #con #travel-info .info-list .place::before {width: 40px; height: 40px; border-radius: 50%; content: ''; background: #1A4399 url('../images/sub/map-icon.svg') no-repeat center; min-width: 40px;} #con #travel-info .info-list .text {line-height: 1.6; color: #454545; border-top: 1px solid #e9e9e9; margin-top: 15px; padding-top: 20px; display: -webkit-box; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3;} #con #travel-info .info-list .program-wrap {position: relative; display: inline-block;} #con #travel-info .info-list .program-btn {display: flex; padding: 11px 20px; border-radius: 10px; background-color: #53AFBD; color: #fff; font-size: 16px; font-weight: 600; gap: 9px; align-items: center; justify-content: center; border: 1px solid #53AFBD; margin-top: 20px; transition: 0.2s;} #con #travel-info .info-list .program-btn i {font-size: 18px; font-weight: 400;} #con #travel-info .info-list .program-btn:hover {background-color: #fff; color: #53AFBD;} #con #travel-info .info-list .program-pop {display: none; position: absolute; border-radius: 20px; top: 50%; left: 100%; transform: translateY(-50%); margin-left: 20px; box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2); z-index: 3; padding: 10px; background-color: #53AFBD; width: 273px; margin-top: 10px;} #con #travel-info .info-list .program-pop.active {display: block;} #con #travel-info .info-list .program-pop::before {content: ''; position: absolute; top: 0; bottom: 0; right: 100%; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid #53AFBD; width: 0; height: 0; margin: auto 0;} #con #travel-info .info-list .program-pop .close {position: absolute; top: 15px; right: 15px; font-size: 18px;} #con #travel-info .info-list .program-pop .temp-blt {border-radius: 10px; background-color: #fff; padding: 30px 20px 20px;} #con #travel-info .info-list .program-pop .temp-blt a:hover {text-decoration: underline;} #con #travel-info .info-list .program-info {border-top: 1px solid #e9e9e9; margin-top: 15px; padding-top: 15px;} #con #travel-info .info-list .program-info .title {font-size: 16px; font-weight: 700; color: #1A4399; margin-bottom: 20px;} #con #travel-info .info-list .item:hover .img-area > img {transform: scale(1.1);} #con #travel-info .list-title {display: flex; align-items: center; justify-content: space-between; margin: 50px 0 20px;} #con #travel-info .list-title [class^="temp-tit"] {margin: 0;} #con #travel-info .list-title a {border: 1px solid #e9e9e9; border-radius: 50%; background-color: #fff; font-size: 0; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; line-height: 0;} #con #travel-info .list-title a::before {font-family: 'remixicon'; content: "\ea13"; display: block; font-size: 18px; color: #000;} #con #travel-info .info-list2 {display: flex; gap: 40px;} #con #travel-info .info-list2 .item {flex-basis: 100%;} #con #travel-info .info-list2 .img-area {width: 100%; height: 345px; position: relative; overflow: hidden;} #con #travel-info .info-list2 .img-area img {width: 100%; height: 100%; object-fit: cover; object-position: center; transition: 0.2s;} #con #travel-info .info-list2 .img-area .cate {position: absolute; bottom: 20px; left: 20px; box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.15); backdrop-filter: blur(5px); padding: 8px 20px; line-height: 1; color: #fff; font-weight: 600;} #con #travel-info .info-list2 .info-area {border: 1px solid #e9e9e9; border-top-width: 0; padding: 20px;} #con #travel-info .info-list2 .info-area .address {display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500;} #con #travel-info .info-list2 .info-area .address::before {display: block; content: ''; background: #1A4399 url('../images/sub/map-icon.svg') no-repeat center; min-width: 40px; width: 40px; height: 40px; border-radius: 50%; color: #000;} #con #travel-info .info-list2 .info-area .subject {font-size: 18px; font-weight: 600; color: #000; margin-top: 20px;} #con #travel-info .info-list2 .item:hover .img-area img {transform: scale(1.1);} #con #travel-info .travel-view {margin-bottom: 100px;} #con #travel-info .travel-head {border: 1px solid #e9e9e9; padding: 50px;} #con #travel-info .travel-head .text-area {display: flex; align-items: end; justify-content: space-between;} #con #travel-info .travel-head .subject-wrap {max-width: 50%;} #con #travel-info .travel-head .subject {font-size: 26px; font-weight: 600;} #con #travel-info .travel-head .text {color: #454545; font-size: 16px; line-height: 1.6; margin-top: 20px;} #con #travel-info .travel-head .weather {padding-left: 96px; background: no-repeat left bottom; font-size: 16px; color: #454545; height: 80px; display: flex; flex-wrap: wrap; align-content: end; padding-bottom: 7px;} #con #travel-info .travel-head .weather .place {font-weight: 600; margin-bottom: 8px; flex-basis: 100%;} #con #travel-info .travel-head .weather .info {font-weight: 500;} #con #travel-info .travel-head .weather .info strong {font-weight: 900; color: #000; font-size: 20px; margin-right: 5px;} #con #travel-info .travel-head .weather01 {background-image: url('../images/sub/weather-ico01.svg');} #con #travel-info .travel-head .weather02 {background-image: url('../images/sub/weather-ico02.svg');} #con #travel-info .travel-head .weather03 {background-image: url('../images/sub/weather-ico03.svg');} #con #travel-info .travel-head .weather04 {background-image: url('../images/sub/weather-ico04.svg');} #con #travel-info .travel-head .weather05 {background-image: url('../images/sub/weather-ico05.svg');} #con #travel-info .travel-head .weather06 {background-image: url('../images/sub/weather-ico06.svg');} #con #travel-info .travel-head .weather07 {background-image: url('../images/sub/weather-ico07.svg');} #con #travel-info .travel-head .weather08 {background-image: url('../images/sub/weather-ico08.svg');} #con #travel-info .travel-head .info-area {display: flex; align-items: center; gap: 27px; justify-content: end;} #con #travel-info .travel-head .info-area > * {display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; color: #000;} #con #travel-info .travel-head .info-area > *::before {content: ''; width: 38px; height: 38px; border-radius: 50%; background: no-repeat center; box-sizing: border-box;} #con #travel-info .travel-head .info-area > .view::before {background-color: #53AFBD; background-image: url('../images/sub/eye-ico.svg');} #con #travel-info .travel-head .info-area > .like::before {background-color: #fff; background-image: url('../images/sub/heart-ico-green.svg'); border: 1px solid #e9e9e9; transition: 0.2s;} #con #travel-info .travel-head .info-area > .like.active::before, #con #travel-info .travel-head .info-area > .like:hover::before {background-color: #1B9E50; background-image: url('../images/sub/heart-ico.svg'); border-color: #1B9E50;} #con #travel-info .travel-head .hash-list {display: flex; gap: 10px; flex-wrap: wrap; margin-top: 40px;} #con #travel-info .travel-head .hash-list span {font-size: 14px; color: #454545; background-color: #F5F7F9; padding: 5px 15px; border-radius: 50px;} #con #travel-info .travel-head .info-table {width: 100%; margin: 40px 0 30px;} #con #travel-info .travel-head .info-table tr {border-bottom: 1px solid #e9e9e9;} #con #travel-info .travel-head .info-table th {text-align: left; height: 50px; padding-left: 45px; position: relative; width: 100px;} #con #travel-info .travel-head .info-table th::before {content: ''; position: absolute; top: 23px; left: 30px; width: 4px; height: 4px; border-radius: 50%; background-color: #000;} #con #travel-info .travel-head .info-table td {padding-left: 25px; color: #7E8790; padding-right: 10px; width: 370px;} #con #travel-info .head-btn-wrap {display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;} #con #travel-info .travel-view .program-wrap {padding: 46px 50px 56px; border: 1px solid #e9e9e9; border-top: none;} #con #travel-info .travel-view .program-wrap .temp-tit-green {margin-top: 0;} #con #travel-info .travel-view .program-wrap .slide-wrap {position: relative;} #con #travel-info .travel-view .program-wrap .item {margin-right: 50px;} #con #travel-info .travel-view .program-wrap .item > a {position: relative; min-height: 100px; display: flex; flex-wrap: wrap; align-content: center; padding-left: 110px;} #con #travel-info .travel-view .program-wrap .img-area {width: 100px; height: 100px; overflow: hidden; border-radius: 50%; position: absolute; top: 0; left: 0; bottom: 0; margin: auto 0;} #con #travel-info .travel-view .program-wrap .img-area img {object-fit: cover; object-position: center; width: 100%; height: 100%; transition: 0.2s;} #con #travel-info .travel-view .program-wrap .title {font-size: 16px; font-weight: 700;} #con #travel-info .travel-view .program-wrap .date {flex-basis: 100%; font-size: 14px; color: #454545; margin-top: 10px; min-width: max-content;} #con #travel-info .travel-view .program-wrap .arrow-wrap button {position: absolute; top: 0; bottom: 0; margin: auto 0; width: 24px; height: 24px; font-size: 0; transition: 0.2s;} #con #travel-info .travel-view .program-wrap .arrow-wrap .slick-disabled {opacity: 0;} #con #travel-info .travel-view .program-wrap .arrow-wrap button::before {font-family: "remixicon"; font-size: 24px;} #con #travel-info .travel-view .program-wrap .arrow-wrap button.prev {left: -30px;} #con #travel-info .travel-view .program-wrap .arrow-wrap button.prev::before {content: "\ea60";} #con #travel-info .travel-view .program-wrap .arrow-wrap button.next{right: -30px;} #con #travel-info .travel-view .program-wrap .arrow-wrap button.next::before {content: "\ea6c";} #con #travel-info .travel-view .program-wrap .item:hover .img-area img {transform: scale(1.1);} #con #travel-info .travel-tab {display: flex; border-bottom: 1px solid #e9e9e9; margin: 20px 0 30px; gap: 20px;} #con #travel-info .travel-tab button {font-size: 18px; font-weight: 700; display: flex; align-items: center; justify-content: center; height: 80px; width: 135px; text-align: center; position: relative; transition: 0.2s;} #con #travel-info .travel-tab button::before {content: ''; position: absolute; right: 0; bottom: 0; width: 0; height: 1px; background-color: transparent; transition: 0.2s;} #con #travel-info .travel-tab button.active, #con #travel-info .travel-tab button:hover {color: #1B9E50;} #con #travel-info .travel-tab button.active::before {left: 0; bottom: -1px; width: 100%; background-color: #1B9E50;} #con #travel-info .travel-cont p {font-size: 16px; color: #454545; line-height: 1.625;} #con #travel-info .info-box {display: flex; justify-content: space-between; background-color: #F5F7F9; padding: 15px 30px; flex-wrap: wrap; margin-top: 50px; gap: 10px;} #con #travel-info .info-box .item {display: flex; gap: 30px;} #con #travel-info .info-box .item > p {display: flex; align-items: center; font-size: 16px; font-weight: 500; gap: 10px;} #con #travel-info .info-box .item > p::before {display: block; content: ''; min-width: 40px; height: 40px; border-radius: 50%; background: no-repeat center;} #con #travel-info .info-box .item.n1 > p::before {background-color: #1A4399;} #con #travel-info .info-box .item.n2 > p::before {background-color: #D1303B;} #con #travel-info .info-box .item > p.address::before {background-image: url('../images/sub/map-icon.svg');} #con #travel-info .info-box .item > p.tel::before {background-image: url('../images/sub/phone-ico.svg');} #con #travel-info .info-box .item > p.site span + span {margin-left: 10px;} #con #travel-info .info-box .item > p.site::before {background-image: url('../images/sub/internet-ico.svg');} #con #travel-info .gallery-list {width: calc(100% + 30px);} #con #travel-info .gallery-list .item {margin-right: 30px; width: 100%; height: 180px; cursor: pointer;} #con #travel-info .gallery-list .item img {object-fit: cover; object-position: center; width: 100%; height: 100%;} #con #travel-info .gallery-zoom {margin-bottom: 20px; position: relative;} #con #travel-info .gallery-zoom .item {overflow: hidden; text-align: center; display: flex; align-items: center; justify-content: center;} #con #travel-info .gallery-zoom .item img {max-height: 100%; border-radius: 20px;} #con #travel-info .gallery-zoom .arrow button {width: 40px; height: 40px; border-radius: 50%; background-color: #fff; display: flex; align-items: center; justify-content: center; position: absolute; top: 0; bottom: 0; margin: auto 0;} #con #travel-info .gallery-zoom .arrow button::before {font-family: "remixicon"; font-size: 18px;} #con #travel-info .gallery-zoom .arrow .prev {left: 30px;} #con #travel-info .gallery-zoom .arrow .next {right: 30px;} #con #travel-info .gallery-zoom .arrow .prev::before {content: "\ea64";} #con #travel-info .gallery-zoom .arrow .next::before {content: "\ea6e";} #con #travel-info .gallery-list2 .item {padding: 0 8px; height: 82px; cursor: pointer;} #con #travel-info .gallery-list2 .item img {width: 100%; height: 100%; object-fit: cover; object-position: center;} #con #travel-info [class^="gallery-control"] {display: flex; align-items: center; margin-top: 20px; justify-content: space-between; gap: 35px;} #con #travel-info [class^="gallery-control"] .arrow {display: flex; gap: 5px; min-height: 24px;} #con #travel-info [class^="gallery-control"] .arrow button {font-size: 0;} #con #travel-info [class^="gallery-control"] .arrow button::before {font-family: "remixicon"; font-size: 24px; line-height: 24px; display: block;} #con #travel-info [class^="gallery-control"] .arrow .prev::before {content: "\ea5c";} #con #travel-info [class^="gallery-control"] .arrow .next::before {content: "\ea68";} #con #travel-info [class^="gallery-control"] .status {display: flex; gap: 50px; position: relative; width: 85px; justify-content: space-between;} #con #travel-info [class^="gallery-control"] .status::before {content: ''; position: absolute; top: 0; bottom: 0; right: 0; left: 0; width: 30px; height: 1px; background-color: #d9d9d9; margin: auto;} #con #travel-info [class^="gallery-control"] .status span {font-size: 14px; font-weight: 500; color: #040404;} #con #travel-info [class^="gallery-control"] .progress {flex-basis: calc(100% - 210px); height: 3px; background-color: #F4F6F9;} #con #travel-info [class^="gallery-control"] .progress span {height: 100%; width: 0; transition: 0.2s; background-color: #1B9E50; display: block;} #con #travel-info .experience-list {display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 40px; margin-top: 50px;} #con #travel-info .experience-list .item {display: flex; cursor: pointer;} #con #travel-info .experience-list .img-area {flex-basis: 47.26%; height: 345px; overflow: hidden;} #con #travel-info .experience-list .img-area > img {object-fit: cover; object-position: center; width: 100%; height: 100%; transition: 0.2s;} #con #travel-info .experience-list .item:hover .img-area > img {transform: scale(1.1);} #con #travel-info .experience-list .info-area {flex-basis: 52.74%; border: 1px solid #e9e9e9; border-left-width: 0; padding: 30px; position: relative;} #con #travel-info .experience-list .subject {font-size: 18px; font-weight: 600; color: #000; border-bottom: 1px solid #e9e9e9; padding-bottom: 30px; margin-bottom: 30px;} #con #travel-info .experience-list .price {font-size: 20px; font-weight: 700; color: #D1303B; position: absolute; left: 30px; bottom: 50px;} #con #travel-info .experience-lp .temp-table {margin-top: 30px;} #con #travel-info .experience-lp .temp-table td {text-align: left;} #con #travel-info .experience-lp .temp-table.center td {text-align: center;} #con #travel-info .review-head {display: flex; justify-content: space-between; align-items: center;} #con #travel-info .review-cate {display: flex; gap: 20px;} #con #travel-info .review-cate .radio {position: relative;} #con #travel-info .review-cate .radio input[type="radio"] {position: absolute; top: 0; left: 0; opacity: 0;} #con #travel-info .review-cate .radio label {position: relative; padding-left: 30px; font-size: 16px; font-weight: 500; cursor: pointer;} #con #travel-info .review-cate .radio label::before {content: ''; width: 18px; height: 18px; border: 1px solid #e9e9e9; position: absolute; top: 0; left: 0;} #con #travel-info .review-cate .radio label::after {font-family: "remixicon"; font-size: 18px; content: "\eb7b"; opacity: 0; position: absolute; top: 1px; left: 1px; transition: 0.2s; line-height: 1;} #con #travel-info .review-cate .radio input[type="radio"]:checked + label::after {opacity: 1;} #con #travel-info .review-btn {box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.25); border-radius: 50px;} #con #travel-info .review-list .item {display: none; box-shadow: 0px 5px 0px 0px rgba(176, 176, 176, 0.15); border: 1px solid #e9e9e9; padding: 30px; cursor: pointer; margin-top: 20px;} #con #travel-info .review-list .item.active {display: block;} #con #travel-info .review-list .item.active.hide {display: none;} #con #travel-info .review-list .subject-wrap {display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; padding-bottom: 23px; border-bottom: 1px solid #e9e9e9;} #con #travel-info .review-list .subject {font-size: 18px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; max-width: 50%; align-items: center;} #con #travel-info .review-list .subject span {padding: 5px 15px; border-radius: 24px; font-size: 14px; font-weight: 700; color: #fff; min-width: 94px; text-align: center; margin-right: 20px;} #con #travel-info .review-list .item[data-cate="expert"] .subject span {background-color: #7CB74C;} #con #travel-info .review-list .item[data-cate="netizen"] .subject span {background-color: #53AFBD;} #con #travel-info .review-list .item[data-cate="naver"] .subject span {background-color: #1B9E50;} #con #travel-info .review-list .item[data-cate="tstory"] .subject span {background-color: #FF5A4A;} #con #travel-info .review-list .info-area {display: flex; align-items: center; gap: 30px;} #con #travel-info .review-list .info-area span, #con #travel-info .review-list .info-area a {font-size: 16px; font-weight: 500; position: relative; padding-left: 48px; display: flex; align-items: center; height: 38px;} #con #travel-info .review-list .info-area span::before, #con #travel-info .review-list .info-area a::before {content: ''; width: 38px; height: 38px; border-radius: 50%; position: absolute; top: 0; left: 0;} #con #travel-info .review-list .info-area span::after, #con #travel-info .review-list .info-area a::after {font-family: "remixicon"; font-size: 18px; color: #fff; position: absolute; top: 10px; left: 10px; line-height: 1;} #con #travel-info .review-list .info-area .name::before {background-color: #1A4399;} #con #travel-info .review-list .info-area .name::after {content: "\f264";} #con #travel-info .review-list .info-area .date::before {background-color: #D1303B;} #con #travel-info .review-list .info-area .date::after {content: "\eb21";} #con #travel-info .review-list .info-area .view::before {background-color: #53AFBD;} #con #travel-info .review-list .info-area .view::after {content: "\ecb5";} #con #travel-info .review-list .info-area .like::before {background-color: #1B9E50;} #con #travel-info .review-list .info-area .like::after {content: "\ee0f";} #con #travel-info .review-list .info-area .site::before {background-color: #4E3828;} #con #travel-info .review-list .info-area .site::after {content: "\ee21";} #con #travel-info .review-list .text {display: -webkit-box; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2;} #con #travel-info .review-more {margin-top: 30px;} #con #travel-info .review-list .item:hover .text {text-decoration: underline;} #con #travel-info .review-list .no-review {border: 1px solid #e9e9e9; display: flex; align-items: center; justify-content: center; text-align: center; height: 100px; padding: 20px; font-size: 16px; font-weight: 700; color: #000; margin-top: 20px;} #con #travel-info .review-lp .review-img, #con #travel-info .review-lp img {margin: 30px 0; display: block;} #con #travel-info .review-lp .review-img:last-child, #con #travel-info .review-lp img:last-child {margin-bottom: 0;} #con #travel-info .review-lp .review-img:first-child, #con #travel-info .review-lp img:first-child {margin-top: 0;} #con #travel-info .review-lp .review-img {position: relative;} #con #travel-info .review-lp .review-img .img-text {position: absolute; bottom: 0; left: 0; width: 100%; background-color: rgba(0, 0, 0, 0.5); text-align: center; font-size: 16px; color: #fff; padding: 17px;} #con #travel-info .directions-wrap {margin-top: 30px;} #con #travel-info .directions-wrap .item {background-color: #F5F7F9; display: flex; padding: 22px 30px; font-size: 16px;} #con #travel-info .directions-wrap .item + .item {margin-top: 10px;} #con #travel-info .directions-wrap .title {min-width: 95px; font-weight: 600; color: #1B9E50;} #con #travel-info .directions-wrap ul {display: flex; flex-wrap: wrap; align-items: center; gap: 10px;} #con #travel-info .directions-wrap ul > li {color: #454545; font-weight: 500; display: flex; align-items: center; gap: 10px;} #con #travel-info .directions-wrap ul > li + li::before {font-family: "remixicon"; font-size: 18px; content: "\ea67";} #con #travel-info #around-map, #con #travel-info #directions-map {height: 600px; width: 100%;} #con #travel-info .welchon-marker {position: relative;} #con #travel-info .welchon-marker .text {position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding: 5px 15px; border-radius: 30px; font-size: 12px; font-weight: 700; color: #fff; margin-bottom: 16px;} #con #travel-info .welchon-marker .text::before {border-right: 4px solid transparent; border-left: 4px solid transparent; border-top: 6px solid; content: ''; width: 0; height: 0; display: block; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);} #con #travel-info .welchon-marker .inner {width: 40px; height: 40px; background-color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.15);} #con #travel-info .welchon-marker .inner::before {font-family: "remixicon"; font-size: 18px;} #con #travel-info .welchon-marker.lodgment .inner::before {content: "\ebb9"; color: #4845A2;} #con #travel-info .welchon-marker.food .inner::before {content: "\f083"; color: #DF4F3E;} #con #travel-info .welchon-marker.experience .inner::before {content: "\efb0"; color: #1B9E50;} #con #travel-info .welchon-marker.rural .inner::before {content: "\ee2e"; color: #D1303B;} #con #travel-info .welchon-marker.tourist .inner::before {content: "\ee7c"; color: #53B3C0;} #con #travel-info .welchon-marker.cafe .inner::before {content: "\f402"; color: #A3490C;} #con #travel-info .welchon-marker.festivities .inner::before {content: "\f3bf"; color: #1B9E50;} #con #travel-info .welchon-marker.lodgment .text {background-color: #4845A2;} #con #travel-info .welchon-marker.lodgment .text::before {border-top-color: #4845A2;} #con #travel-info .welchon-marker.food .text {background-color: #DF4F3E;} #con #travel-info .welchon-marker.food .text::before {border-top-color: #DF4F3E;} #con #travel-info .welchon-marker.experience .text {background-color: #1B9E50;} #con #travel-info .welchon-marker.experience .text::before {border-top-color: #1B9E50;} #con #travel-info .welchon-marker.rural .text {background-color: #D1303B;} #con #travel-info .welchon-marker.rural .text::before {border-top-color: #D1303B;} #con #travel-info .welchon-marker.tourist .text {background-color: #53B3C0;} #con #travel-info .welchon-marker.tourist .text::before {border-top-color: #53B3C0;} #con #travel-info .welchon-marker.cafe .text {background-color: #A3490C;} #con #travel-info .welchon-marker.cafe .text::before {border-top-color: #A3490C;} #con #travel-info .welchon-marker.festivities .text {background-color: #1B9E50;} #con #travel-info .welchon-marker.festivities .text::before {border-top-color: #1B9E50;} #con #travel-info .map-pop {position: absolute; bottom: 100%; left: 50%; width: 300px; background-color: #fff; z-index: 2; transform: translateX(-50%); margin-bottom: 30px; border-radius: 20px; box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.15); padding: 30px; text-align: center;} #con #travel-info .map-pop::before {content: ''; width: 100%; height: 26px; background: url('../images/sub/map-logo.svg') no-repeat center; display: block; margin-bottom: 15px;} #con #travel-info .map-pop .close {position: absolute; top: 20px; right: 20px;} #con #travel-info .map-pop .close::before {font-family: "remixicon"; font-size: 24px; content: "\eb99"; color: #000;} #con #travel-info .map-pop .img-area {width: 100%; height: 150px; border-radius: 10px; overflow: hidden;} #con #travel-info .map-pop .img-area img {width: 100%; height: 100%; object-fit: cover; object-position: center;} #con #travel-info .map-pop .title {font-size: 18px; font-weight: 700; margin: 19px 0 12px;} #con #travel-info .map-pop .address, #con #travel-info .map-pop .tel {font-size: 14px; color: #454545;} #con #travel-info .map-pop .address {margin-bottom: 5px;} #con #travel-info .map-pop .anchor {font-size: 16px; color: #fff; border-radius: 50px; background-color: #53AFBD; padding: 10px 27px; font-weight: 700; margin-top: 17px; display: inline-block;} #con #travel-info .travel-api {margin-bottom: 30px;} #con #travel-info .api-head {display: flex;} #con #travel-info .api-head .img-area {width: 500px; height: 400px; position: relative;} #con #travel-info .api-head .img-area > img {width: 100%; height: 100%; object-fit: cover; object-position: center;} #con #travel-info .api-head .img-area .api-logo {position: absolute; right: 10px; top: 10px; z-index: 3; background-color: #002A57; padding: 10px; border-radius: 10px; font-size: 0; line-height: 0;} #con #travel-info .api-head .text-area {width: calc(100% - 500px); padding-left: 77px;} #con #travel-info .api-head .subject-area {display: flex; justify-content: space-between; align-items: center; border-top: 2px solid #000; height: 104px;} #con #travel-info .api-head .subject {font-size: 26px; font-weight: 600; color: #000;} #con #travel-info .api-head .subject-area .api-text {flex-shrink: 0; display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 600; color: #454545;} #con #travel-info .api-head .info-area {border-top: 1px solid #e9e9e9; padding-top: 40px;} #con #travel-info .api-head .info-area > li {display: flex; position: relative; gap: 10px; font-size: 16px; color: #000; font-weight: 500; align-items: center;} #con #travel-info .api-head .info-area > li + li {margin-top: 20px;} #con #travel-info .api-head .info-area > li::before {min-width: 40px; height: 40px; border-radius: 50%; content: '';} #con #travel-info .api-head .info-area > li::after {font-family: "remixicon"; color: #fff; font-size: 18px; width: 40px; line-height: 40px; position: absolute; top: 0; left: 0; text-align: center;} #con #travel-info .api-head .address::before {background-color: #1A4399;} #con #travel-info .api-head .address::after {content: "\ef14";} #con #travel-info .api-head .site::before {background-color: #D1303B;} #con #travel-info .api-head .site::after {content: "\edcf";} #con #travel-info .api-cont .text {color: #454545; line-height: 1.56; font-size: 16px;} @media all and (min-width: 1025px) { #con #travel-info .review-btn {height: 50px; font-size: 18px;} #con #travel-info .review-btn > i {font-size: 24px;} } @media all and (max-width: 1680px) { #con #travel-info .info-list .program-pop {top: auto; bottom: 100%; left: 50%; transform: translateX(-50%); margin-left: 0; margin-top: 0;} #con #travel-info .info-list .program-pop::before {top: 100%; right: 0; left: 0; bottom: auto; margin: -4px auto 0; transform: rotate(-90deg);} } @media all and (max-width: 1500px) { #con #travel-info .api-head .subject-area {gap: 10px; flex-wrap: wrap; align-content: center;} } @media all and (max-width: 1200px) { #con #travel-info .info-list {display: block;} #con #travel-info .info-list .item + .item {margin-top: 20px;} #con #travel-info .info-list .info-area {padding: 20px;} #con #travel-info .info-list2 {gap: 40px; flex-wrap: wrap;} #con #travel-info .info-list2 .item {flex-basis: calc(50% - 20px);} #con #travel-info .travel-head, #con #travel-info .travel-view .program-wrap {padding: 30px;} #con #travel-info .travel-info {padding: 20px 30px; gap: 10px 30px;} #con #travel-info .experience-list {gap: 20px;} #con #travel-info .experience-list .info-area {padding: 20px;} #con #travel-info .review-list .subject-wrap {display: block;} #con #travel-info .review-list .subject {max-width: none;} #con #travel-info .review-list .info-area {justify-content: end; margin-top: 10px; flex-wrap: wrap; gap: 10px;} #map-welchon .refresh-btn.active {bottom: 560px;} } @media all and (max-width: 1024px) { #con #travel-info .travel-head {display: block;} #con #travel-info .travel-head .text-area {flex-wrap: wrap; align-items: center;} #con #travel-info .travel-head .subject-wrap {max-width: none; flex-basis: 100%;} #con #travel-info .travel-head .text {margin: 10px 0;} #con #travel-info .travel-head .info-table colgroup {display: none;} #con #travel-info .travel-head .info-table tr {border-bottom: none;} #con #travel-info .travel-head .info-table th, #con #travel-info .travel-head .info-table td {display: inline-block; margin-bottom: 10px;} #con #travel-info .travel-head .info-table th {height: auto; width: 110px; padding-left: 13px;} #con #travel-info .travel-head .info-table th::before {top: 7px; left: 0;} #con #travel-info .travel-head .info-table td {padding-right: 0; padding-left: 10px; width: calc(100% - 110px);} #con #travel-info .travel-tab button {min-width: max-content; width: auto; padding: 20px; height: auto;} #con #travel-info .experience-list {display: block;} #con #travel-info .experience-list .item + .item {margin-top: 20px;} #con #travel-info .review-head {display: block;} #con #travel-info .review-cate {flex-wrap: wrap;} #con #travel-info .review-btn {margin-top: 15px;} #con #travel-info .api-head {display: block;} #con #travel-info .api-head .text-area {width: auto; padding-left: 0; padding-top: 40px;} #con #travel-info .api-head .subject-area {height: auto; padding: 20px 0;} #map-welchon .refresh-btn.active {bottom: 569px;} } @media all and (max-width: 768px) { #con #travel-info .temp-visual {padding: 20px;} #con #travel-info .temp-visual img {position: static; width: 100px;} #con #travel-info .info-list .item {display: block;} #con #travel-info .info-list .img-area {height: 200px;} #con #travel-info .info-list .img-area .inner {padding: 0 10px 10px;} #con #travel-info .info-list .img-area .api-logo {top: 10px; right: 10px;} #con #travel-info .info-list .img-tit {font-size: 18px;} #con #travel-info .info-list .img-text {margin-top: 10px;} #con #travel-info .info-list .info-area {padding: 10px; border-top-width: 0; border-left-width: 1px;} #con #travel-info .info-list .place {gap: 5px; font-size: 14px; margin-bottom: 10px;} #con #travel-info .info-list .place::before {min-width: 30px; width: 30px; height: 30px;} #con #travel-info .info-list .subject {font-size: 16px;} #con #travel-info .info-list .text {font-size: 14px; margin-top: 10px; padding-top: 10px;} #con #travel-info .info-list .program-pop {left: 0; transform: none;} #con #travel-info .info-list .program-pop::before {left: 70px; right: auto;} #con #travel-info .info-list .program-info {margin-top: 10px; padding-top: 10px;} #con #travel-info .info-list .program-info .title {font-size: 14px; margin-bottom: 10px;} #con #travel-info .list-title {margin: 30px 0 10px;} #con #travel-info .info-list2 {gap: 20px;} #con #travel-info .info-list2 .item {flex-basis: calc(50% - 10px);} #con #travel-info .info-list2 .img-area {height: 245px;} #con #travel-info .info-list2 .img-area .cate {bottom: 10px; left: 10px; font-size: 14px; padding: 5px 10px;} #con #travel-info .info-list2 .info-area {padding: 10px;} #con #travel-info .info-list2 .info-area .address {gap: 5px; font-size: 14px;} #con #travel-info .info-list2 .info-area .address::before {min-width: 30px; width: 30px; height: 30px; background-size: 16px;} #con #travel-info .info-list2 .info-area .subject {font-size: 16px; margin-top: 10px;} #con #travel-info .travel-view {margin-bottom: 30px;} #con #travel-info .travel-head {padding: 10px;} #con #travel-info .travel-head .subject {font-size: 20px;} #con #travel-info .travel-head .text {font-size: 14px;} #con #travel-info .travel-head .weather {background-size: 50px; height: 57px; padding-bottom: 0; padding-left: 61px; font-size: 14px; align-content: center; background-position: left center;} #con #travel-info .travel-head .info-area {gap: 10px;} #con #travel-info .travel-head .info-area > * {gap: 5px; font-size: 14px;} #con #travel-info .travel-head .info-area > *::before {width: 25px; height: 25px; background-size: 15px;} #con #travel-info .travel-head .hash-list {gap: 5px; margin-top: 20px;} #con #travel-info .travel-head .info-table {margin: 20px 0 10px;} #con #travel-info .travel-head .info-table th, #con #travel-info .travel-head .info-table td {font-size: 14px; vertical-align: top;} #con #travel-info .travel-head .info-table th {padding-left: 12px; width: 80px;} #con #travel-info .travel-head .info-table td {width: calc(100% - 80px);} #con #travel-info .travel-info {padding: 10px;} #con #travel-info .travel-info .item {font-size: 14px; gap: 5px;} #con #travel-info .travel-info .item::before {min-width: 30px; width: 30px; height: 30px;} #con #travel-info .travel-view .program-wrap {padding: 10px;} #con #travel-info .travel-view .program-wrap .item {margin-right: 20px;} #con #travel-info .travel-view .program-wrap .title {font-size: 14px;} #con #travel-info .travel-view .program-wrap .date {font-size: 13px; margin-top: 5px;} #con #travel-info .travel-view .program-wrap .arrow-wrap {display: flex; align-items: center; gap: 10px; justify-content: center; margin-top: 10px;} #con #travel-info .travel-view .program-wrap .arrow-wrap button {position: static;} #con #travel-info .travel-view .program-wrap .arrow-wrap .slick-disabled {opacity: 0.5;} #con #travel-info .travel-tab {gap: 10px; overflow-x: auto; padding-bottom: 1px;} #con #travel-info .travel-tab button {font-size: 14px; padding: 10px;} #con #travel-info .travel-cont, #con #travel-info .travel-cont p {font-size: 14px;} #con #travel-info .info-box {padding: 15px 20px; margin-top: 25px;} #con #travel-info .info-box .item {flex-basis: 100%; flex-wrap: wrap;} #con #travel-info .info-box .item.n1 {gap: 10px;} #con #travel-info .info-box .item > p {font-size: 14px; gap: 5px;} #con #travel-info .info-box .item > p.site span + span {margin-left: 0;} #con #travel-info .info-box .item > p::before {min-width: 30px; width: 30px; height: 30px; background-size: 15px;} #con #travel-info .gallery-zoom {margin-bottom: 10px;} #con #travel-info .gallery-zoom .arrow button {width: 30px; height: 30px;} #con #travel-info .gallery-zoom .arrow .prev {left: 10px;} #con #travel-info .gallery-zoom .arrow .next {right: 10px;} #con #travel-info .gallery-list2 .item {padding: 0 5px;} #con #travel-info [class^="gallery-control"] {gap: 20px;} #con #travel-info [class^="gallery-control"] .progress {flex-basis: calc(100% - 178px);} #con #travel-info .experience-list {margin-top: 20px;} #con #travel-info .experience-list .item {display: block;} #con #travel-info .experience-list .img-area {height: 200px;} #con #travel-info .experience-list .info-area {padding: 10px; border-top-width: 0; border-left-width: 1px;} #con #travel-info .experience-list .subject {font-size: 16px; margin-bottom: 10px; padding-bottom: 10px;} #con #travel-info .experience-list .price {position: static; margin-top: 10px; font-size: 16px;} #con #travel-info .review-cate .radio label {font-size: 14px; padding-top: 2px;} #con #travel-info .review-list .item {padding: 10px;} #con #travel-info .review-list .subject-wrap {margin-bottom: 10px; padding-bottom: 10px;} #con #travel-info .review-list .subject {font-size: 16px;} #con #travel-info .review-list .subject span {padding: 5px 10px; min-width: auto; margin-right: 10px; font-size: 12px;} #con #travel-info .review-list .info-area span, #con #travel-info .review-list .info-area a {font-size: 14px; padding-left: 30px; height: 25px;} #con #travel-info .review-list .info-area span::before, #con #travel-info .review-list .info-area a::before {width: 25px; height: 25px;} #con #travel-info .review-list .info-area span::after, #con #travel-info .review-list .info-area a::after {font-size: 15px; top: 5px; left: 5px;} #con #travel-info .review-list .text {font-size: 14px;} #con #travel-info .review-more {margin-top: 20px;} #con #travel-info .review-list .no-review {height: auto; font-size: 16px;} #con #travel-info .review-lp .review-img, #con #travel-info .review-lp img {margin: 10px 0;} #con #travel-info .review-lp .review-img .img-text {font-size: 14px; padding: 10px;} #con #travel-info #around-map, #con #travel-info #directions-map {height: 300px;} #con #travel-info .directions-wrap {margin-top: 20px;} #con #travel-info .directions-wrap .item {padding: 10px; font-size: 14px;} #con #travel-info .directions-wrap .title {min-width: 75px;} #con #travel-info .directions-wrap ul, #con #travel-info .directions-wrap ul > li {gap: 5px;} #con #travel-info .api-head .img-area {max-width: 100%; height: 300px;} #con #travel-info .api-head .img-area .api-logo {top: 10px; right: 10px;} #con #travel-info .api-head .text-area {padding-top: 20px;} #con #travel-info .api-head .subject {font-size: 22px;} #con #travel-info .api-head .info-area {padding-top: 20px;} #con #travel-info .api-head .info-area > li {font-size: 14px; gap: 5px;} #con #travel-info .api-head .info-area > li + li {margin-top: 10px;} #con #travel-info .api-head .info-area > li::before {min-width: 30px; height: 30px;} #con #travel-info .api-head .info-area > li::after {font-size: 15px; line-height: 30px; width: 30px;} #con #travel-info .api-cont .text {font-size: 14px;} #map-welchon .refresh-btn.active {bottom: 519px; width: 152px;} } @media all and (max-width: 460px) { #con #travel-info .info-list2 {display: block;} #con #travel-info .info-list2 .item + .item {margin-top: 20px;} #con #travel-info .info-list2 .img-area {height: 190px;} #con #travel-info .travel-view .program-wrap .item {margin-right: 0;} #con #travel-info .gallery-list {width: 100%;} #con #travel-info .gallery-list .item {margin-right: 0;} } @media all and (max-width: 420px) { #con #travel-info .travel-head .weather {flex-basis: 100%; margin-bottom: 10px;} } /* 여행정보 > VR농촌여행 */ #con #vr {position: relative;} #con #vr .vr-title {width: 400px; padding: 104px 210px 49px 40px; background-color: #53AFBD; border-bottom-right-radius: 100px; position: relative; color: #fff; overflow: hidden;} #con #vr .vr-title::before, #con #vr .vr-title::after {content: ''; position: absolute; background-color: rgba(255, 255, 255, 0.1); border-radius: 50%;} #con #vr .vr-title::before {right: 89px; bottom: 90px; width: 128px; height: 128px;} #con #vr .vr-title::after {right: -54px; bottom: -22px; width: 220px; height: 220px;} #con #vr .vr-title .title {font-size: 36px; font-weight: 700;} #con #vr .vr-title .text {font-size: 16px; line-height: 1.4; margin: 14px 0 39px;} #con #vr .vr-title .arrow-wrap {display: flex; gap: 10px; padding-left: 10px; margin-top: 42px;} #con #vr .vr-title .arrow-wrap button {border: 1px solid #e9e9e9; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center;} #con #vr .vr-title .arrow-wrap button.slick-hidden {display: none;} #con #vr .vr-title .arrow-wrap button::before {font-size: 32px; font-family: "remixicon"; color: #fff;} #con #vr .vr-title .arrow-wrap .prev::before {content: "\ea64";} #con #vr .vr-title .arrow-wrap .next::before {content: "\ea6e";} #con #vr .vr-slide {position: absolute; top: 50px; left: 270px; width: calc(100% - 240px);} #con #vr .vr-slide .slick-list {padding-bottom: 25px; padding-left: 20px;} #con #vr .vr-slide .item {margin-right: 30px; transition: 0.2s; height: 400px; display: flex; align-content: end; color: #fff; flex-wrap: wrap; padding: 30px; position: relative; z-index: 1; background: no-repeat center / cover;} #con #vr .vr-slide .item::before {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 23.13%, rgba(0, 0, 0, 0.5) 100%); z-index: -1; content: '';} #con #vr .vr-slide .item > * {flex-basis: 100%;} #con #vr .vr-slide .item:hover {box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.2);} #con #vr .vr-slide .num {font-size: 20px; font-weight: 800; color: rgba(255, 255, 255, 0.7);} #con #vr .vr-slide .subject {font-size: 20px; font-weight: 700; min-height: 2.5em; margin: 15px 0 20px;} #con #vr .vr-slide .text {font-size: 16px; line-height: 1.4; min-height: 4.2em;} @media all and (max-width: 1200px) { #con #vr .vr-slide .item {padding-right: 30px;} } @media all and (max-width: 1024px) { #con #vr .vr-title {display: flex; width: auto; margin-bottom: 20px; padding: 30px 40px; align-items: center; justify-content: space-between; gap: 20px;} #con #vr .vr-title .text {margin: 0;} #con #vr .vr-title .arrow-wrap {margin-top: 0;} #con #vr .vr-slide {position: static; width: calc(100% + 50px); margin-left: -20px;} } @media all and (max-width: 768px) { #con #vr .vr-title {display: block; padding: 20px 140px 20px 20px; border-bottom-right-radius: 50px;} #con #vr .vr-title .title {font-size: 25px;} #con #vr .vr-title .text {font-size: 14px; margin-top: 10px;} #con #vr .vr-title .arrow-wrap {margin-top: 10px;} #con #vr .vr-title .arrow-wrap button {width: 40px; height: 40px;} #con #vr .vr-title .arrow-wrap button::before {font-size: 20px;} #con #vr .vr-title img {position: absolute; top: 20px; right: 20px;} #con #vr .vr-slide .item {padding: 15px; height: 280px;} #con #vr .vr-slide .num {font-size: 16px;} #con #vr .vr-slide .subject {margin: 10px 0 15px; font-size: 20px;} #con #vr .vr-slide .text {font-size: 14px;} } /* 웰촌소식 > 공지사항 > 여행후기 */ #con #notice-review .pick-list > li {display: flex;} #con #notice-review .pick-list > li + li {margin-top: 30px;} #con #notice-review .pick-list .img-area {flex-basis: 345px; height: 345px;} #con #notice-review .pick-list .img-area img {width: 100%; height: 100%; object-fit: cover; object-position: center;} #con #notice-review .pick-list .text-area {border-width:1px 1px 1px 0; border-style: solid; border-color: #e9e9e9; flex-basis: calc(100% - 345px); padding: 50px; display: block;} #con #notice-review .pick-list .text-area .subject {font-size: 18px; font-weight: 600; margin-bottom: 12px;} #con #notice-review .pick-list .text-area .text {font-size: 16px; color: #454545; line-height: 1.6; display: -webkit-box; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-height: 3.2em;} #con #notice-review .pick-list .text-area .info {display: flex; border-top: 1px solid #e9e9e9; align-items: center; padding-top: 35px; justify-content: space-between; margin-top: 25px;} #con #notice-review .pick-list .text-area .address {display: flex; font-size: 16px; font-weight: 500; align-items: center; gap: 10px;} #con #notice-review .pick-list .text-area .address::before {display: block; content: ''; width: 40px; height: 40px; border-radius: 50%; background: #1A4399 url('../images/sub/map-icon.svg') no-repeat center;} #con #notice-review .pick-list .text-area .info-area {display: flex; align-items: center; gap: 27px;} #con #notice-review .pick-list .text-area .info-area > * {display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; color: #000;} #con #notice-review .pick-list .text-area .info-area > *::before {content: ''; width: 38px; height: 38px; border-radius: 50%; background: no-repeat center; box-sizing: border-box;} #con #notice-review .pick-list .text-area .info-area > .view::before {background-color: #53AFBD; background-image: url('../images/sub/eye-ico.svg');} #con #notice-review .pick-list .text-area .info-area > .like::before {background-color: #fff; background-image: url('../images/sub/heart-ico-green.svg'); border: 1px solid #e9e9e9; transition: 0.2s;} #con #notice-review .pick-list .text-area .info-area > .like.active::before, #con #notice-review .pick-list .text-area .info-area > .like:hover::before {background-color: #1B9E50; background-image: url('../images/sub/heart-ico.svg'); border-color: #1B9E50;} #con #notice-review .story-view {border: 1px solid #e9e9e9; margin-bottom: 100px;} #con #notice-review .story-head {display: flex; padding: 50px;} #con #notice-review .story-head .img-area {flex-basis: 345px; height: 345px; overflow: hidden; position: relative; color: #fff;} #con #notice-review .story-head .img-area > img {object-fit: cover; object-position: center; width: 100%; height: 100%;} #con #notice-review .story-head .text-area {flex-basis: calc(100% - 345px); padding-left: 100px;} #con #notice-review .story-head .subject {font-size: 26px; font-weight: 600;} #con #notice-review .story-head .text {color: #454545; line-height: 1.6; margin: 20px 0;} #con #notice-review .story-head .info-table {width: 100%;} #con #notice-review .story-head .info-table tr {border-bottom: 1px solid #e9e9e9;} #con #notice-review .story-head .info-table th {text-align: left; height: 50px; padding-left: 45px; position: relative;} #con #notice-review .story-head .info-table th::before {content: ''; position: absolute; top: 23px; left: 30px; width: 4px; height: 4px; border-radius: 50%; background-color: #000;} #con #notice-review .story-head .info-table td {padding-left: 25px; color: #7E8790; padding-right: 10px;} #con #notice-review .story-head .info-wrap {display: flex; justify-content: space-between; align-items: center; margin-top: 40px;} #con #notice-review .story-head .info-area {display: flex; align-items: center; gap: 27px; justify-content: end;} #con #notice-review .story-head .info-area > * {display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; color: #000;} #con #notice-review .story-head .info-area > *::before {content: ''; width: 38px; height: 38px; border-radius: 50%; background: no-repeat center; box-sizing: border-box;} #con #notice-review .story-head .info-area > .view::before {background-color: #53AFBD; background-image: url('../images/sub/eye-ico.svg');} #con #notice-review .story-head .info-area > .like::before {background-color: #fff; background-image: url('../images/sub/heart-ico-green.svg'); border: 1px solid #e9e9e9; transition: 0.2s;} #con #notice-review .story-head .info-area > .like.active::before, #con #notice-review .story-head .info-area > .like:hover::before {background-color: #1B9E50; background-image: url('../images/sub/heart-ico.svg'); border-color: #1B9E50;} #con #notice-review .story-info {background-color: #F5F7F9; border-top: 1px solid #e9e9e9; padding: 20px 50px; display: flex; gap: 10px 150px; flex-wrap: wrap;} #con #notice-review .story-info .item {display: flex; font-weight: 500; align-items: center; gap: 10px;} #con #notice-review .story-info .item::before {min-width: 40px; width: 40px; height: 40px; border-radius: 50%; background: no-repeat center; content: '';} #con #notice-review .story-info .place::before {background-color: #8FC31F; background-image: url('../images/sub/home-ico.svg');} #con #notice-review .story-info .address::before {background-color: #1A4399; background-image: url('../images/sub/map-icon.svg');} #con #notice-review .story-cont {border-top: 1px solid #e9e9e9; padding: 50px;} #con #notice-review .story-list .item > a:hover .img-area > img {transform: scale(1.1);} @media all and (min-width: 769px) { #con #notice-review .pick-list .text-area .temp-btn {gap: 20px;} } @media all and (max-width: 1200px) { #con #notice-review .story-head {padding: 30px;} #con #notice-review .story-head .text-area {padding-left: 50px;} #con #notice-review .story-info {padding: 20px 30px; gap: 10px 30px;} #con #notice-review .story-cont {padding: 30px;} } @media all and (max-width: 1024px) { #con #notice-review .pick-list .text-area {padding: 40px 20px;} #con #notice-review .story-head {display: block;} #con #notice-review .story-head .text-area {padding-left: 0; margin-top: 20px;} #con #notice-review .story-head .info-wrap {margin-top: 20px;} } @media all and (max-width: 768px) { #con #notice-review .pick-list .img-area {flex-basis: 200px; height: 200px;} #con #notice-review .pick-list .text-area {flex-basis: calc(100% - 200px); padding: 15px 10px;} #con #notice-review .pick-list .text-area .subject {font-size: 16px; margin-bottom: 5px;} #con #notice-review .pick-list .text-area .text {font-size: 14px;} #con #notice-review .pick-list .text-area .info {padding-top: 20px; margin-top: 20px;} #con #notice-review .pick-list .text-area .address {font-size: 14px; gap: 5px;} #con #notice-review .pick-list .text-area .address::before {width: 30px; height: 30px;} #con #notice-review .pick-list .text-area .info-area {gap: 10px;} #con #notice-review .pick-list .text-area .info-area > * {gap: 5px; font-size: 14px;} #con #notice-review .pick-list .text-area .info-area > *::before {width: 25px; height: 25px; background-size: 15px;} #con #notice-review .story-view {margin-bottom: 30px;} #con #notice-review .story-head {padding: 10px;} #con #notice-review .story-head .img-area {height: 200px;} #con #notice-review .story-head .img-area .inner {padding: 0 10px 10px;} #con #notice-review .story-head .img-tit {font-size: 18px;} #con #notice-review .story-head .img-text {margin-top: 10px;} #con #notice-review .story-head .subject {font-size: 20px;} #con #notice-review .story-head .text {font-size: 14px; margin: 10px 0;} #con #notice-review .story-head .info-table th, #con #notice-review .story-head .info-table td {font-size: 14px;} #con #notice-review .story-head .info-table th {padding-left: 12px;} #con #notice-review .story-head .info-table th::before {left: 0; top: 21px;} #con #notice-review .story-head .info-wrap {margin-top: 10px;} #con #notice-review .story-head .info-area {gap: 10px;} #con #notice-review .story-head .info-area > * {gap: 5px; font-size: 14px;} #con #notice-review .story-head .info-area > *::before {width: 25px; height: 25px; background-size: 15px;} #con #notice-review .story-info {padding: 10px;} #con #notice-review .story-info .item {font-size: 14px; gap: 5px;} #con #notice-review .story-info .item::before {min-width: 30px; width: 30px; height: 30px;} #con #notice-review .story-cont {padding: 10px; font-size: 14px;} } @media all and (max-width: 500px) { #con #notice-review .pick-list > li {display: block;} #con #notice-review .pick-list .text-area {border-width: 0 1px 1px 1px;} } @media all and (max-width: 400px) { #con #notice-review .story-head .info-table colgroup {display: none;} #con #notice-review .story-head .info-table tr {border-bottom: none;} #con #notice-review .story-head .info-table th, #con #notice-review .story-head .info-table td {display: inline-block; margin-bottom: 5px;} #con #notice-review .story-head .info-table th {height: auto; width: 50px;} #con #notice-review .story-head .info-table th::before {top: 4px;} #con #notice-review .story-head .info-table td {padding-right: 0; padding-left: 10px; width: calc(100% - 50px);} } /* 웰촌소식 > 주요사업 */ #con #business .temp-visual {background-image: url('../images/sub/business-bg.png');} #con #business .business-tab {display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-bottom: 50px;} #con #business .business-tab > a {display: flex; align-items: center; justify-content: center; text-align: center; background-color: #F5F7F9; font-size: 16px; font-weight: 600; height: 60px; transition: 0.2s; padding: 0 10px;} #con #business .business-tab > a.active, #con #business .business-tab > a:hover {background-color: #53AFBD; color: #fff;} #con #business .board-view {margin-bottom: 100px;} #con #business .business-bot {position: relative; padding-bottom: 26px;} #con #business .business-bot + .business-bot {margin-top: 100px;} #con #business .business-bot .head-area {position: absolute; top: 0; left: 0; z-index: 1 ; width: calc(25% - 30px); background: no-repeat center bottom; height: 100%;} #con #business .business-bot .head-area.n1 {background-image: url('../images/sub/product-bg03.svg');} #con #business .business-bot .head-area.n2 {background-image: url('../images/sub/business-slide-bg1.svg');} #con #business .business-bot .head-area.n3 {background-image: url('../images/sub/business-slide-bg2.svg');} #con #business .business-bot .head-area .title {font-size: 36px; font-weight: 700; color: #000;} #con #business .business-bot .head-area .text {font-size: 16px; color: #454545; margin: 30px 0;} #con #business .business-bot .head-area .temp-btn {margin-top: 10px;} #con #business .business-bot .slide-area {padding-left: calc(25% + 10px);} #con #business .business-bot .slide-list { display: flex; gap: 40px;} #con #business .business-bot .slide-list .item {width: calc(33.33% - 26px);} #con #business .business-bot .slide-list .item > a {display: block; } #con #business .business-bot .slide-list .img-area {width: 100%; height: 345px; position: relative; margin-bottom: 20px; overflow: hidden;} #con #business .business-bot .slide-list .img-area > img, #con #business .business-bot .slide-list .item > a > img {width: 100%; height: 100%; object-fit: cover; object-position: center; transition: 0.2s;} #con #business .business-bot .slide-list .item > a:hover .img-area > img, #con #business .business-bot .slide-list .item > a:hover > img {transform: scale(1.1);} #con #business .business-bot .slide-list .like {position: absolute; top: 20px; right: 20px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid #e9e9e9; background-color: #fff; display: flex; align-items: center; justify-content: center; line-height: 0; font-size: 0; transition: 0.2s;} #con #business .business-bot .slide-list .like::before {display: block; font-family: "remixicon"; font-size: 18px; color: #53AFBD; content: "\ee0f"; transition: 0.2s;} #con #business .business-bot .slide-list .like.active, #con #business .business-bot .slide-list .like:hover {background-color: #53AFBD; border-color: #53AFBD;} #con #business .business-bot .slide-list .like:hover::before, #con #business .business-bot .slide-list .like.active::before {color: #fff;} #con #business .business-bot .slide-list .place {position: absolute; left: 20px; bottom: 20px; border-radius: 40px; backdrop-filter: blur(5px); background-color: rgba(12, 12, 12, 0.2); padding: 11px 20px; color: #fff; font-size: 16px; font-weight: 500; display: flex; align-items: center; gap: 10px;} #con #business .business-bot .slide-list .place::before {font-family: "remixicon"; font-size: 18px; font-weight: 400; content: "\ef14";} #con #business .business-bot .slide-list .img-area .cate {position: absolute; left: 20px; top: 20px; border-radius: 40px; backdrop-filter: blur(5px); background-color: rgba(12, 12, 12, 0.2); padding: 11px 20px; color: #fff; font-size: 16px; font-weight: 500; display: flex; align-items: center; gap: 10px; line-height: 1;} #con #business .business-bot .slide-list .item.soldout .soldout-text {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 1;} #con #business .business-bot .slide-list .item.soldout .soldout-text::before {display: block; content: ''; width: 144px; height: 139px; background: url('../images/sub/product-character.svg') no-repeat center / contain; margin: 0 auto;} #con #business .business-bot .slide-list .item.soldout .soldout-text span {background-color: rgba(255, 255, 255, 0.8); border: 5px solid #D1303B; border-radius: 60px; width: 102px; display: flex; align-items: center; justify-content: center; height: 56px; font-size: 18px; font-weight: 700; color: #D1303B; margin: -12px auto 0; position: relative; z-index: -1;} #con #business .business-bot .slide-list .item.soldout .img-area > img {filter: grayscale(100%);} #con #business .business-bot .slide-list .subject {font-size: 18px; font-weight: 700; color: #000; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 100%; word-break: break-all;} #con #business .business-bot .slide-list .text {display: -webkit-box; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 16px; color: #454545; margin: 5px 0 15px; max-height: 3.2em; line-height: 1.6;} #con #business .business-bot .slide-list .info-area {display: flex; align-items: baseline; gap: 20px; margin-top: 15px;} #con #business .business-bot .slide-list .price {font-size: 20px; font-weight: 700; color: #D1303B;} #con #business .business-bot .slide-list .price .del {text-decoration: line-through;} #con #business .business-bot .slide-list .price .arrow::before {font-family: 'remixicon'; content: "\ea67"; font-size: 18px; font-weight: 400;} #con #business .business-bot .slide-list .price em {font-size: 14px; vertical-align: baseline;} #con #business .business-bot .slide-list .date {font-size: 16px; color: #454545; position: relative;} #con #business .business-bot .slide-list .date::before {display: block; position: absolute; top: -2px; left: -10px; width: 1px; height: 10px; background-color: #d9d9d9; content: ''; bottom: 0; margin: auto 0;} #con #business .business-bot.video .slide-list .item > a {position: relative;background-color: #000; height: 345px; overflow: hidden;} #con #business .business-bot.video .slide-list .item > a::before {font-family: 'remixicon'; font-size: 30px; color: #C50000; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #fff; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; content: "\f008"; z-index: 1;} #con #business .business-bot.video .slide-list .item > a > img {mask-image: linear-gradient(rgba(0, 0, 0, 1) 50%, transparent);} #con #business .business-bot.video .slide-list .item .subject {position: absolute; left: 0; bottom: 0; color: #fff; width: 100%; padding: 20px;} #con #business .business-bot.sns .head-area {background-position-y: 400px;} #con #business .business-bot.sns .slide-area {padding-left: 0;} #con #business .business-bot.sns .slide-list {flex-wrap: wrap; align-items: start;} #con #business .business-bot.sns .slide-list .item {width: calc(25% - 30px);} #con #business .business-bot.sns .slide-list .item:nth-child(3n+1) {margin-left: calc(25% + 10px);} #con #business .business-bot.sns .slide-list .item:nth-child(8) {display: none;} #con #business .business-bot.sns .slide-list .item .sns-head {position: relative; padding: 9px 120px 9px 50px; height: 55px;} #con #business .business-bot.sns .slide-list .item .profile-img {position: absolute; top: 0; left: 15px; bottom: 0; margin: auto 0; width: 25px; height: 25px; overflow: hidden; border-radius: 50%;} #con #business .business-bot.sns .slide-list .item .profile-img > img {width: 100%; height: 100%; object-fit: cover; object-position: center;} #con #business .business-bot.sns .slide-list .item .name {font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;} #con #business .business-bot.sns .slide-list .item .map {font-size: 12px; font-weight: 300;} #con #business .business-bot.sns .slide-list .item .profile-more {position: absolute; top: 0; right: 11px; bottom: 0; margin: auto 0; border-radius: 5px; background-color: #0095F6; color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; width: 90px; height: 30px; font-size: 14px; font-weight: 600;} #con #business .business-bot.sns .slide-list .item .sns-img > img {width: 100%; vertical-align: top;} #con #business .business-bot.sns .slide-list .item .sns-more {padding: 14px 15px;} #con #business .business-bot.sns .slide-list .item .sns-more > a {font-size: 14px; font-weight: 600; color: #0095F6; display: block;} #con #business .business-bot.sns .slide-list .item .sns-like {padding: 14px 15px; font-size: 14px; font-weight: 500; border-top: 1px solid #dbdbdb;} #con #business .sns-wrap {margin-top: 100px;} #con #business .sns-wrap .slide {display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;} @media all and (max-width: 1500px) { #con #business .business-bot .head-area {background-size: contain;} #con #business .sns-wrap .slide {grid-template-columns: repeat(2, 1fr);} } @media all and (max-width: 1300px) { #con #business .business-bot .head-area {position: static; width: auto; padding-right: 50%; background-position: right bottom !important; height: auto !important; margin-bottom: 20px;} #con #business .business-bot .slide-area {padding-left: 0;} #con #business .business-bot.sns .slide-list .item {width: calc(33.33% - 27px);} #con #business .business-bot.sns .slide-list .item:nth-child(3n+1) {margin-left: 0;} #con #business .business-bot.sns .slide-list .item:nth-child(8) {display: block;} } @media all and (max-width: 1024px) { #con #business .business-tab {grid-template-columns: repeat(3, 1fr); gap: 15px;} #con #business .business-bot .slide-list .item {width: calc(50% - 20px) !important;} #con #business .business-bot .slide-list .item:last-child {display: none;} } @media all and (max-width: 768px) { #con #business .business-tab {display: flex; gap: 10px; overflow-x: auto; margin-bottom: 20px;} #con #business .business-tab > a {min-width: max-content; font-size: 14px; height: 40px;} #con #business .board-view {border-bottom: 50px;} #con #business .business-bot {padding-bottom: 0;} #con #business .business-bot + .business-bot {margin-top: 30px;} #con #business .business-bot .head-area {background-size: 50%;} #con #business .business-bot .head-area .title {font-size: 25px;} #con #business .business-bot .head-area .text {margin: 15px 0; font-size: 14px;} #con #business .business-bot .slide-list {gap: 20px;} #con #business .business-bot .slide-list .item {width: calc(50% - 10px) !important;} #con #business .business-bot .slide-list .img-area {height: 245px; margin-bottom: 10px;} #con #business .business-bot.video .slide-list .item > a {height: 245px;} #con #business .business-bot .slide-list .subject {font-size: 16px;} #con #business .business-bot .slide-list .text {font-size: 14px; margin-bottom: 10px;} #con #business .business-bot .slide-list .info-area {gap: 10px; margin-top: 5px;} #con #business .business-bot .slide-list .price {font-size: 16px;} #con #business .business-bot .slide-list .place {left: 10px; bottom: 10px; font-size: 14px; padding: 5px 10px; gap: 5px;} #con #business .business-bot .slide-list .place::before {font-size: 15px;} #con #business .business-bot .slide-list .like {top: 10px; right: 10px; width: 30px; height: 30px;} #con #business .business-bot .slide-list .like::before {font-size: 16px;} #con #business .business-bot .slide-list .item.soldout .soldout-text::before {width: 84px; height: 81px;} #con #business .business-bot .slide-list .item.soldout .soldout-text span {width: 82px; height: 46px; font-size: 16px;} #con #business .business-bot .slide-list .item .img-area .cate {left: 10px; top: 10px; font-size: 14px; padding: 5px 10px; gap: 5px;} #con #business .business-bot.video .slide-list .item .subject {padding: 10px;} #con #business .sns-wrap {margin-top: 30px;} #con #business .sns-wrap .slide {grid-template-columns: repeat(1, 1fr);} } @media all and (max-width: 675px) { #con #business .business-bot .slide-list {display: block;} #con #business .business-bot .slide-list .item {width: auto !important;} #con #business .business-bot .slide-list .item + .item {margin-top: 20px;} #con #business .business-bot .slide-list .item:last-child {display: block;} } @media all and (max-width: 450px) { #con #business .business-bot .head-area {padding-right: 0;} } /* 웰촌소식 > 공지사항 > 지금 우리 마을은 */ #con #now-village .temp-visual {background-image: url('../images/sub/now-bg.png');} /* 웰촌소식 > 공지사항 > 농촌관광 지식나눔 */ #con #farm-share .temp-visual {background-image: url('../images/sub/share-bg.png');} /* 웰촌소식 > 공지사항 > 농촌에서 공부하자 */ #con #rural-study .no_mg {text-align: center; margin-bottom: 70px; font-size: 0; line-height: 0;} #con #rural-study .pc_none {display: none;} #con #rural-study .study-list {display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px 40px;} #con #rural-study .study-list .item {box-shadow: 0px 5px 0px 0px rgba(176, 176, 176, 0.15); border: 1px solid #e9e9e9; padding: 20px 24px; font-size: 16px;} #con #rural-study .study-list .cate {font-weight: 700; color: #1B9E50;} #con #rural-study .study-list .address {font-weight: 500; margin: 17px 0 10px;} #con #rural-study .study-list .place {color: #454545;} @media all and (max-width: 1024px) { #con #rural-study .study-list {grid-template-columns: repeat(3, 1fr);} } @media all and (max-width: 768px) { #con #rural-study .pc_none {display: block;} #con #rural-study .mo_none {display: none;} #con #rural-study .study-list {grid-template-columns: repeat(2, 1fr); gap: 15px;} #con #rural-study .study-list .item {font-size: 14px; padding: 10px;} } /* 마이페이지 > 콘텐츠 설정 */ #con #cts-setting {background: url('../images/sub/cts-bg.svg') no-repeat right 215px center;} #con #cts-setting .cts-tit {font-size: 20px; font-weight: 700; position: relative; padding-left: 9px; padding-top: 8px; margin-top: 30px;} #con #cts-setting .cts-tit:first-of-type {margin-top: 0;} #con #cts-setting .cts-tit::before {content: ''; position: absolute; top: 0; left: 0; width: 20px; height: 20px; border-radius: 50%; background-color: #53AFBD; z-index: -1;} #con #cts-setting .cts-list {margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px;} #con #cts-setting .cts-list .item {position: relative;} #con #cts-setting .cts-list .item input {position: absolute; top: 0; left: 0; opacity: 0;} #con #cts-setting .cts-list .item label {border-radius: 10px; background-color: #F5F7F9; color: #6C6F78; font-size: 16px; padding: 12px 20px; display: block; transition: 0.2s; cursor: pointer;} #con #cts-setting .cts-list .item input:checked + label {background-color: #53AFBD; color: #fff;} #con #cts-setting .btn-wrap {display: flex; align-items: center; justify-content: center; padding-top: 50px; border-top: 1px dashed #B9C4D0; margin-top: 50px;} @media all and (max-width: 1500px) { #con #cts-setting {background-position: right center;} } @media all and (max-width: 768px) { #con #cts-setting {background: none;} #con #cts-setting .cts-tit {font-size: 18px;} #con #cts-setting .cts-list .item label {font-size: 14px; padding: 10px 15px;} #con #cts-setting .btn-wrap {margin-top: 30px; padding-top: 30px;} } /* 마이페이지 > 관심내역 */ #con #interest .img-board-list .img-area {height: 212px;} #con #interest .img-board-list > li > a {position: relative;} #con #interest .img-board-list .check-box {position: absolute; top: 20px; right: 20px; z-index: 1;} #con #interest .img-board-list .check-box input {position: absolute; top: 0; left: 0; opacity: 0;} #con #interest .img-board-list .check-box label {width: 20px; height: 20px; border: 1px solid #e9e9e9; background-color: #fff; display: flex; align-items: center; justify-content: center;} #con #interest .img-board-list .check-box input:checked + label::before {content: "\eb7b"; font-family: "remixicon"; font-size: 18px;} #con #interest .img-board-list .cate {position: absolute; top: 20px; left: 20px; background-color: rgba(0, 0, 0, 0.2); backdrop-filter: blur(5px); padding: 8px 10px; border-radius: 30px; color: #fff; z-index: 1; font-size: 14px; font-weight: 600;} /* 웰촌소식 > 웰촌소개 */ #con #welchon-intro > .text {font-size: 18px; color: #454545; line-height: 1.5;} #con #welchon-intro .temp-tit-green {font-size: 30px; padding-left: 0; padding-right: 16px; display: inline-block; padding-top: 11px; margin-top: 100px; margin-bottom: 35px;} #con #welchon-intro .temp-tit-green:first-of-type {margin-top: 35px;} #con #welchon-intro .temp-tit-green::before {right: 0; left: auto; width: 32px; height: 32px;} #con #welchon-intro .green-tit {font-size: 26px; font-weight: 700; color: #1B9E50; margin-bottom: 10px;} #con #welchon-intro .black-tit {font-size: 26px; font-weight: 700; margin-bottom: 25px; color: #000;} #con #welchon-intro .small-tit {font-size: 18px; font-weight: 700; color: #8FC31F; margin-bottom: 30px; margin-top: 30px;} #con #welchon-intro .grid-bg {display: flex; align-items: center; justify-content: center; height: 320px; border-left: 1px solid #e9e9e9; border-bottom: 1px solid #e9e9e9; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAB5JREFUKFNjfPny5X8GIgAjEWoYQIaNKsQZUiQFDwDJiCVPm+gNZgAAAABJRU5ErkJggg==) repeat right top; padding: 20px;} #con #welchon-intro .intro-head {margin-bottom: 100px;} #con #welchon-intro .intro-head .title {font-size: 40px; font-weight: 700;} #con #welchon-intro .intro-head .subtitle {font-size: 20px; font-weight: 700; color: #000; margin: 45px 0 18px;} #con #welchon-intro .intro-head .subtitle em {color: #1B9E50;} #con #welchon-intro .intro-head .text {font-size: 18px; color: #454545; line-height: 1.5; margin-top: 20px;} #con #welchon-intro .intro-visual {height: 500px; background: url('../images/sub/intro-bg.png') no-repeat center; text-align: center; color: #fff; font-weight: 700; padding-top: 257px; margin-top: 45px;} #con #welchon-intro .intro-visual .big {font-size: 40px;} #con #welchon-intro .intro-visual .text {font-size: 20px; margin-top: 20px;} #con #welchon-intro .logo-text {font-size: 18px; color: #454545; margin-top: 25px;} #con #welchon-intro .logo-info {display: flex; gap: 10px 30px; flex-wrap: wrap; margin-top: 20px;} #con #welchon-intro .logo-info li {display: flex; gap: 10px; font-size: 18px;} #con #welchon-intro .logo-info li span {font-weight: 700; line-height: 1.5;} #con #welchon-intro .logo-info li p {color: #454545; line-height: 1.5;} #con #welchon-intro .logo-info li.n1 span {color: #1B9E50;} #con #welchon-intro .logo-info li.n2 span {color: #4E3829;} #con #welchon-intro .logo-info li.n3 span {color: #404040;} #con #welchon-intro .btn-wrap {margin-top: 50px; text-align: center;} #con #welchon-intro .flex-area {margin: 50px 0; display: flex; gap: 40px;} #con #welchon-intro .flex-area .small-tit {margin-top: 0;} #con #welchon-intro .flex-area .item {flex-basis: 100%;} #con #welchon-intro .flex-area.logo {gap: 60px; margin: 0;} #con #welchon-intro .flex-area.logo .grid-bg {height: 200px;} #con #welchon-intro .color-list li {display: flex; flex-wrap: wrap; font-size: 18px;} #con #welchon-intro .color-list li + li {margin-top: 20px;} #con #welchon-intro .color-list li span {flex-basis: 230px; font-weight: 700;} #con #welchon-intro .color-list li.n1 span {color: #80BF48;} #con #welchon-intro .color-list li.n2 span {color: #51BCCA;} #con #welchon-intro .color-list li.n3 span {color: #4E3828;} #con #welchon-intro .color-list li.n4 span {color: #3F3F3F;} #con #welchon-intro .color-list li p {color: #454545;} #con #welchon-intro .color-list2 {margin-top: 50px; display: flex; gap: 40px;} #con #welchon-intro .color-list2 li {flex-basis: 100%; color: #fff; font-size: 18px; font-weight: 700; padding: 30px; min-height: 200px;} #con #welchon-intro .color-list2 li.n1 {background-color: #80BF48;} #con #welchon-intro .color-list2 li.n2 {background-color: #51BCCA;} #con #welchon-intro .color-list2 li.n3 {background-color: #4E3828;} #con #welchon-intro .color-list2 li.n4 {background-color: #3F3F3F;} #con #welchon-intro .color-list2 li .color {margin: 19px 0 31px;} #con #welchon-intro .color-list2 li .rgb {display: flex; flex-wrap: wrap; gap: 5px 30px;} #con #welchon-intro .color-list2 li .cmyk {margin-top: 12px; display: flex; flex-wrap: wrap; gap: 5px 20px;} @media all and (max-width: 1500px) { #con #welchon-intro .flex-area.logo {gap: 40px;} } @media all and (max-width: 1024px) { #con #welchon-intro .intro-head {margin-bottom: 50px;} #con #welchon-intro .color-list2 {gap: 20px;} #con #welchon-intro .color-list2 li {padding: 15px;} } @media all and (max-width: 768px) { #con #welchon-intro > .text {font-size: 16px;} #con #welchon-intro .temp-tit-green {font-size: 25px; padding-right: 10px; margin-bottom: 20px; padding-top: 5px; margin-top: 30px;} #con #welchon-intro .temp-tit-green:first-of-type {margin-top: 20px;} #con #welchon-intro .temp-tit-green::before {width: 22px; height: 22px;} #con #welchon-intro .green-tit, #con #welchon-intro .black-tit {font-size: 20px;} #con #welchon-intro .black-tit {margin-bottom: 10px;} #con #welchon-intro .small-tit {font-size: 16px; margin: 10px 0;} #con #welchon-intro .grid-bg {height: auto !important;} #con #welchon-intro .intro-head {margin-bottom: 30px;} #con #welchon-intro .intro-head .title {font-size: 30px;} #con #welchon-intro .intro-head .subtitle {font-size: 18px; margin: 20px 0 10px;} #con #welchon-intro .intro-head .text {font-size: 16px;} #con #welchon-intro .intro-visual {height: auto; padding: 60px 20px; margin-top: 20px;} #con #welchon-intro .intro-visual .big {font-size: 25px;} #con #welchon-intro .intro-visual .text {font-size: 16px;} #con #welchon-intro .logo-text {font-size: 16px; margin-top: 15px;} #con #welchon-intro .logo-info {gap: 10px; margin-top: 20px;} #con #welchon-intro .logo-info li {font-size: 16px; gap: 5px;} #con #welchon-intro .btn-wrap {margin-top: 20px;} #con #welchon-intro .flex-area {margin: 20px 0; flex-wrap: wrap; gap: 20px;} #con #welchon-intro .color-list li {font-size: 16px; gap: 5px 10px;} #con #welchon-intro .color-list li span {flex-basis: auto;} #con #welchon-intro .color-list2 {flex-wrap: wrap; margin-top: 20px;} #con #welchon-intro .color-list2 li {flex-basis: calc(50% - 10px); min-height: auto; font-size: 16px;} #con #welchon-intro .color-list2 li .color {margin: 10px 0 20px;} #con #welchon-intro .color-list2 li .rgb, #con #welchon-intro .color-list2 li .cmyk {gap: 5px 10px;} } @media all and (max-width: 600px) { #con #welchon-intro .color-list li {display: block;} #con #welchon-intro .color-list li p {margin-top: 5px;} #con #welchon-intro .color-list2 li {flex-basis: 100%;} } /* 웰촌소식 > 이벤트 */ #con #event .img-board-list > li > a {position: relative;} #con #event .cate {position: absolute; top: 20px; left: 20px; display: flex; align-items: center; justify-content: center; width: 60px; height: 30px; border-radius: 30px; color: #fff; font-size: 14px; font-weight: 600; z-index: 1;} #con #event .cate.ing {background-color: #1B9E50;} #con #event .cate.end {background-color: #c7c7c7;} /* 웰촌소식 > 농촌관광등급정보 */ #con #rural-level .board-search {flex-wrap: wrap;} #con #rural-level .board-search .temp-select {min-width: auto;} #con #rural-level .board-search .item {flex-basis: calc(16.71% - 9px);} #con #rural-level .board-search .item label {display: block; text-align: center; font-size: 16px; font-weight: 700; color: #1B9E50; margin-bottom: 17px;} #con #rural-level .board-search .item .temp-select {width: 100%;} #con #rural-level .board-search > .temp-select {flex-basis: calc(16.71% - 9px);} #con #rural-level .board-search > .input-area {flex-basis: calc(83.29% - 1px);} #con #rural-level .visual {background-color: #ECF3FD; border-radius: 30px; position: relative; overflow: hidden; z-index: 1; text-align: center; padding: 43px 40px 50px; margin-bottom: 50px;} #con #rural-level .visual::before, #con #rural-level .visual::after {display: block; position: absolute; content: ''; border: solid #DEEFFC; border-radius: 50%; box-sizing: border-box; z-index: -1;} #con #rural-level .visual::before {top: -302px; right: 24px; width: 480px; height: 480px; border-width: 130px;} #con #rural-level .visual::after {bottom: -301px; left: -75px; width: 619px; height: 619px; border-width: 170px;} #con #rural-level .visual .title {font-size: 26px; font-weight: 700; color: #000; margin: 15px 0;} #con #rural-level .visual .title span {color: #1B9E50;} #con #rural-level .visual .text {font-size: 16px; color: #454545; line-height: 1.625;} #con #rural-level .visual .list {margin-top: 35px; display: flex; justify-content: center; gap: 30px;} #con #rural-level .visual .list > li {text-align: left; position: relative; padding-left: 85px; padding-top: 10px; min-height: 62px;} #con #rural-level .visual .list > li::before {position: absolute; top: 0; left: 0; content: ''; display: block; box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.15); width: 62px; height: 62px; background-color: #fff; border-radius: 50%;} #con #rural-level .visual .list > li::after {font-size: 30px; font-family: "remixicon"; position: absolute; top: 0; left: 0; width: 62px; line-height: 62px; text-align: center;} #con #rural-level .visual .list > li.experience::after {content: "\ee2e"; color: #D1303B;} #con #rural-level .visual .list > li.lodgment::after {content: "\ebb9"; color: #4845A2;} #con #rural-level .visual .list > li.food::after {content: "\f083"; color: #DF4F3E;} #con #rural-level .visual .list > li span {font-size: 18px; font-weight: 600; color: #000;} #con #rural-level .visual .list > li p {font-size: 16px; color: #454545;} #con #rural-level .visual .info {margin-top: 20px; display: inline-flex; align-items: center; justify-content: center; text-align: center; height: 50px; border-radius: 100px; padding: 0 32px; font-size: 16px; color: #45517A; font-weight: 700; background-color: #C2DFFF; padding-top: 2px;} #con #rural-level .level-list {display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 40px;} #con #rural-level .level-list .item {box-shadow: 0px 5px 0px 0px rgba(176, 176, 176, 0.15); border: 1px solid #e9e9e9; padding: 40px 40px 40px;} #con #rural-level .level-list .title-area {position: relative; padding-left: 83px; font-size: 16px; min-height: 62px; padding-top: 10px; cursor: pointer;} #con #rural-level .level-list .title-area:hover .tit {text-decoration: underline;} #con #rural-level .level-list .year {position: absolute; top: 0; left: 0; width: 62px; height: 62px; border-radius: 50%; background-color: #53AFBD; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; font-weight: 700; bottom: 0; margin: auto 0;} #con #rural-level .level-list .tit {font-weight: 700; color: #1B9E50;} #con #rural-level .level-list .place {color: #454545; margin-top: 5px;} #con #rural-level .level-list img {position: absolute; top: -4px; right: 0;} #con #rural-level .level-list .info-area {margin-top: 18px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;} #con #rural-level .level-list .level {display: flex; gap: 10px;} #con #rural-level .level-list .level > li {display: flex; align-items: center; position: relative; font-size: 16px; color: #000; font-weight: 500; gap: 13px;} #con #rural-level .level-list .level > li::before {width: 40px; height: 40px; border-radius: 50%; background-color: #F5F7F9; content: ''; display: block;} #con #rural-level .level-list .level > li::after {position: absolute; top: 0; left: 0; width: 40px; line-height: 40px; text-align: center; font-family: "remixicon"; font-size: 18px; font-weight: 400;} #con #rural-level .level-list .level > li.experience::after {content: "\efb0"; color: #1B9E50;} #con #rural-level .level-list .level > li.edu::after {content: "\f332"; color: #3C9AE8;} #con #rural-level .level-list .level > li.lodgment::after {content: "\ebb9"; color: #4845A2;} #con #rural-level .level-list .level > li.food::after {content: "\f083"; color: #DF4F3E;} #con .level-view-lp.temp-lp .lp-inner {padding-top: 37px; width: 800px;} #con .level-view-lp [class^="temp-tit"]:first-of-type {margin-top: 0;} #con .level-view-lp .temp-table.info tbody td {text-align: left;} #con .level-view-lp .temp-table .euddeum {display: flex; align-items: center; gap: 5px;} #con .level-view-lp .temp-table .euddeum::before {width: 36px; height: 36px; border-radius: 50%; background: #ECF3FD url('../images/sub/level-euddeum-img2.svg') no-repeat center / 16px; content: ''; display: block;} @media all and (max-width: 1200px) { #con #rural-level .level-list .item {padding: 20px;} } @media all and (max-width: 1024px) { #con #rural-level .board-search .item {flex-basis: calc(33.33% - 7px);} #con #rural-level .board-search .item label {margin-bottom: 5px;} #con #rural-level .board-search > .temp-select {flex-basis: 180px;} #con #rural-level .board-search > .input-area {flex-basis: calc(100% - 190px);} #con #rural-level .visual .list {display: block;} #con #rural-level .visual .list > li + li {margin-top: 10px;} #con #rural-level .level-list {display: block;} #con #rural-level .level-list .item + .item {margin-top: 20px;} } @media all and (max-width: 768px) { #con #rural-level .board-search .item {flex-basis: calc(50% - 5px);} #con #rural-level .board-search .item label {font-size: 14px;} #con #rural-level .board-search > .temp-select {flex-basis: 100px;} #con #rural-level .board-search > .input-area {flex-basis: calc(100% - 110px);} #con #rural-level .visual {padding: 20px; margin-bottom: 20px;} #con #rural-level .visual .title {font-size: 22px; margin: 10px 0;} #con #rural-level .visual .text {font-size: 14px;} #con #rural-level .visual .list {margin-top: 20px;} #con #rural-level .visual .list > li {min-height: 50px; padding-left: 60px; padding-top: 7px;} #con #rural-level .visual .list > li span {font-size: 16px;} #con #rural-level .visual .list > li p {font-size: 14px;} #con #rural-level .visual .list > li::before {width: 50px; height: 50px;} #con #rural-level .visual .list > li::after {width: 50px; line-height: 50px; font-size: 25px;} #con #rural-level .visual .info {margin-top: 10px; height: auto; font-size: 14px; padding: 10px 20px;} #con #rural-level .level-list .item {padding: 10px;} #con #rural-level .level-list .title-area {font-size: 14px; padding-left: 60px; min-height: 50px; padding-top: 4px;} #con #rural-level .level-list .year {font-size: 12px; width: 50px; height: 50px;} #con #rural-level .level-list .info-area {margin-top: 10px;} #con #rural-level .level-list .level > li {font-size: 14px; gap: 5px;} #con #rural-level .level-list .level > li::before {width: 30px; height: 30px;} #con #rural-level .level-list .level > li::after {font-size: 16px; width: 30px; line-height: 30px;} } /* 웰촌소식 > 농촌관광 아이디어 경진대회 공모 */ #con #rally-collusion > img {display: block; margin: 0 auto;} #con #rally-collusion .btn-wrap {display: flex; gap: 20px; justify-content: center; margin-top: 50px;} @media all and (max-width: 768px) { #con #rally-collusion .btn-wrap {margin-top: 20px;} } /* 마이페이지 > 공모참여현황 */ #con #collusion-view .collusion-btn {text-align: right; margin: 30px 0;} #con #collusion-view .collusion-add {box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.25); border-radius: 50px;} #con #collusion-view .collusion-wrap .temp-table + .temp-table {margin-top: 30px;} #con #collusion-view .collusion-del {font-size: 0; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background-color: #1B9E50; border-radius: 50%; margin: 5px auto 0; transition: 0.2s; border: 1px solid #1B9E50;} #con #collusion-view .collusion-del::before {font-family: "remixicon"; content: "\eb99"; font-size: 18px; color: #fff; display: block; line-height: 1;transition: 0.2s;} #con #collusion-view .collusion-del:hover {background-color: #fff;} #con #collusion-view .collusion-del:hover::before {color: #1B9E50;} @media all and (min-width: 1025px) { #con #collusion-view .collusion-add {height: 50px; font-size: 18px;} #con #collusion-view .collusion-add > i {font-size: 24px;} } /* 촌캉스 상품관 */ #con #product-hall .product-banner {position: relative;} #con #product-hall .product-banner .slide {margin: 0 -25px;} #con #product-hall .product-banner .item {margin: 0 25px;} #con #product-hall .product-banner .item > a {display: block; width: 100%;} #con #product-hall .product-banner .item > a > img {margin: 0 auto;} #con #product-hall .product-banner img{width: 100%} #con #product-hall .product-banner .arrows button {width: 40px; height: 40px; border-radius: 50%; background-color: #fff; display: flex; align-items: center; justify-content: center; position: absolute; top: 0; bottom: 0; margin: auto 0; border: 1px solid #e9e9e9; font-size: 0; line-height: 1;} #con #product-hall .product-banner .arrows button::before {font-size: 18px; font-family: 'remixicon';} #con #product-hall .product-banner .arrows button.prev {left: 20px;} #con #product-hall .product-banner .arrows button.prev::before {content: "\ea64";} #con #product-hall .product-banner .arrows button.next {right: 20px;} #con #product-hall .product-banner .arrows button.next::before {content: "\ea6e";} #con #product-hall .product-head {margin-top: 58px; font-size: 40px; position: relative; border: 1px solid #e9e9e9; padding: 73px 0 73px 260px; background: url('../images/sub/product-head-bg.jpg') no-repeat left center / cover;} #con #product-hall .product-head::before {display: block; width: 203px; height: 174px; background: url('../images/sub/product-head-img.png') no-repeat center / contain; content: ''; position: absolute; top: 24px; bottom: 0; left: 34px;} #con #product-hall .product-head span {color: #1B9E50; font-weight: 700;} #con #product-hall .board-search {margin-bottom: 0; border: 1px solid #E9E9E9; border-top: none;} #con #product-hall .tag-wrap {position: relative;} #con #product-hall:not(.en) .board-search {flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 40px; padding: 0; border: 0; background: none;} #con #product-hall:not(.en) .board-search .total-page {margin-right: auto; font-size: 18px; font-weight: 600; color: #555;} #con #product-hall:not(.en) .board-search .total-page > strong {font-weight: 600; color: inherit;} #con #product-hall:not(.en) .board-search .total-page > strong:first-of-type {margin: 0 4px; color: #1B9E50; font-size: 22px; font-weight: 700; vertical-align: -0.07em;} #con #product-hall:not(.en) .board-search .temp-select, #con #product-hall:not(.en) .board-search .temp-input {height: 44px; border: 1px solid #d5d5d5; border-radius: 7px; background-color: #fff; color: #666; font-size: 15px;} #con #product-hall:not(.en) .board-search .temp-select {min-width: 140px; width: auto; padding: 0 40px 0 16px; background: #fff url('../images/sub/select-bg.svg') no-repeat right 14px center / 18px 18px; text-align: left; -webkit-appearance: none; appearance: none; cursor: pointer;} #con #product-hall:not(.en) .board-search .input-area {width: 300px;} #con #product-hall:not(.en) .board-search .input-area .temp-input {width: 100%; padding: 0 48px 0 16px;} #con #product-hall:not(.en) .board-search .search-btn {right: 14px; color: #555;} #con #product-hall:not(.en) .board-search .search-btn::before {font-size: 20px;} #con #product-hall:not(.en) .board-search .temp-select:focus, #con #product-hall:not(.en) .board-search .temp-input:focus {border-color: #1B9E50; outline: none;} #con #product-hall:not(.en) #tagSearch {left: auto; right: 0;} #con #product-hall .board-search-body {display: contents;} #con #product-hall #tagSearch {position: absolute; top: 100%; left: 0; width: 500px; border-radius: 30px; box-shadow: 5px 10px 20px 0px rgba(0, 0, 0, 0.1); padding: 30px 50px; background-color: #fff; z-index: 10; border: 1px solid #e9e9e9; margin-top: 18px; display: none; max-width: calc(100vw - 50px);} #con #product-hall #tagClose {font-size: 0; line-height: 0; position: absolute; top: 20px; right: 20px;} #con #product-hall #tagClose::before {font-family: 'remixicon'; content: "\f4c8"; font-size: 20px; line-height: 1;} #con #product-hall #tagSearch .tab-list {display: flex; gap: 15px; border-bottom: 1px solid #000; padding-bottom: 25px; margin-bottom: 25px;} #con #product-hall #tagSearch .tab-list button {line-height: 1; padding: 11px 20px; border-radius: 40px; font-size: 16px; font-weight: 700; color: #454545; transition: 0.2s; background-color: #F5F7F9;} #con #product-hall #tagSearch .tab-list button.active {background-color: #1B9E50; color: #fff;} #con #product-hall #tagSearch .checkbox-list {display: none; gap: 10px; flex-wrap: wrap; } #con #product-hall #tagSearch .checkbox-list.active {display: flex;} #con #product-hall #tagSearch .checkbox-list .item {position: relative;} #con #product-hall #tagSearch .checkbox-list .item input[type="checkbox"] {position: absolute; width: 0; height: 0;} #con #product-hall #tagSearch .checkbox-list .item label {border: 1px dashed #E1E4EB; border-radius: 40px; font-size: 14px; font-weight: 500; color: #142241; cursor: pointer; line-height: 1; padding: 13px 20px; display: block; background-color: #fff;} #con #product-hall #tagSearch .checkbox-list .item input[type="checkbox"]:checked + label {background-color: #EBEDEE;} #con #product-hall .product-list {display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px;} #con #product-hall .product-list .item > a {display: block;} #con #product-hall .product-list .img-area {width: 100%; height: auto !important; aspect-ratio: 1/1; overflow: hidden; position: relative; margin-bottom: 20px;} #con #product-hall .product-list .img-area > img {width: 100%; height: 100%; object-fit: cover; object-position: center; transition: 0.2s;} #con #product-hall .product-list .item > a:hover .img-area > img {transform: scale(1.1);} #con #product-hall .product-list .like {position: absolute; top: 20px; right: 20px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid #e9e9e9; background-color: #fff; display: flex; align-items: center; justify-content: center; line-height: 0; font-size: 0; transition: 0.2s;} #con #product-hall .product-list .like::before {display: block; font-family: "remixicon"; font-size: 18px; color: #53AFBD; content: "\ee0f"; transition: 0.2s;} #con #product-hall .product-list .like.active, #con #product-hall .product-list .like:hover {background-color: #53AFBD; border-color: #53AFBD;} #con #product-hall .product-list .like:hover::before, #con #product-hall .product-list .like.active::before {color: #fff;} #con #product-hall .product-list .place {position: absolute; left: 20px; bottom: 20px; border-radius: 40px; backdrop-filter: blur(5px); background-color: rgba(12, 12, 12, 0.2); padding: 11px 20px; color: #fff; font-size: 16px; font-weight: 500; display: flex; align-items: center; gap: 10px; line-height: 1;} #con #product-hall .product-list .place::before {font-family: "remixicon"; font-size: 18px; font-weight: 400; content: "\ef14";} #con #product-hall .product-list .img-area .cate {position: absolute; left: 20px; top: 20px; border-radius: 40px; backdrop-filter: blur(5px); background-color: rgba(12, 12, 12, 0.2); padding: 11px 20px; color: #fff; font-size: 16px; font-weight: 500; display: flex; align-items: center; gap: 10px; line-height: 1;} #con #product-hall .product-list .item.soldout .soldout-text {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 1;} #con #product-hall .product-list .item.soldout .soldout-text::before {display: block; content: ''; width: 144px; height: 139px; background: url('../images/sub/product-character.svg') no-repeat center / contain; margin: 0 auto;} #con #product-hall .product-list .item.soldout .soldout-text span {background-color: rgba(255, 255, 255, 0.8); border: 5px solid #D1303B; border-radius: 60px; min-width: 102px; display: inline-flex; align-items: center; justify-content: center; height: 56px; font-size: 18px; font-weight: 700; color: #D1303B; margin: -12px auto 0; position: relative; z-index: -1; padding: 0 20px;} #con #product-hall .product-list .item.soldout .img-area > img {filter: grayscale(100%);} #con #product-hall .product-list .subject {font-size: 18px; font-weight: 700; color: #000; display: -webkit-box; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1;} #con #product-hall .product-list .text {display: -webkit-box; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 16px; color: #454545; margin-top: 5px; max-height: 3.2em; line-height: 1.6;} #con #product-hall .product-list .info-area {display: flex; align-items: baseline; gap: 20px; margin-top: 15px;} #con #product-hall .product-list .price {font-size: 20px; font-weight: 700; color: #D1303B;} #con #product-hall .product-list .price .del {text-decoration: line-through;} #con #product-hall .product-list .price .arrow::before {font-family: 'remixicon'; content: "\ea67"; font-size: 18px; font-weight: 400;} #con #product-hall .product-list .price em {font-size: 14px; vertical-align: baseline;} #con #product-hall .product-list .date {font-size: 16px; color: #454545; position: relative;} #con #product-hall .product-list .date::before {display: block; position: absolute; top: -2px; left: -10px; width: 1px; height: 10px; background-color: #d9d9d9; content: ''; bottom: 0; margin: auto 0;} #con #product-hall .more-btn {display: flex; width: 500px; margin: 50px auto 0;} .product-lp .product-inner {display: flex; gap: 40px;} .product-lp .img-area {width: 400px; height: 400px; position: relative;} .product-lp .img-area > img {width: 100%; height: 100%; object-fit: cover; object-position: center;} .product-lp .img-area .info-area {position: absolute; top: 20px; right: 20px; display: flex; gap: 5px;} .product-lp .img-area .info-area button {width: 38px; height: 38px; border-radius: 50%; border: 1px solid #e9e9e9; background-color: #fff; display: flex; align-items: center; justify-content: center; line-height: 0; font-size: 0; transition: 0.2s;} .product-lp .img-area .info-area button::before {display: block; font-family: "remixicon"; font-size: 18px; transition: 0.2s;} .product-lp .img-area .info-area .like::before {color: #53AFBD; content: "\ee0f";} .product-lp .img-area .info-area .share::before {color: #1B9E50; content: "\f0fe";} .product-lp .img-area .info-area .like.active, .product-lp .img-area .info-area .like:hover {background-color: #53AFBD; border-color: #53AFBD;} .product-lp .img-area .info-area .share.active, .product-lp .img-area .info-area .share:hover {background-color: #1B9E50; border-color: #1B9E50;} .product-lp .img-area .info-area .like:hover::before, .product-lp .img-area .info-area .like.active::before, .product-lp .img-area .info-area .share:hover::before, .product-lp .img-area .info-area .share.active::before {color: #fff;} .product-lp .img-area .info-area .share-panel {position: absolute; right: 0; top: 100%; display: none;} .product-lp .img-area .info-area .share-panel > a {margin-top: 5px; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0; line-height: 0;} .product-lp .img-area .info-area .share-panel > a::before {width: 18px; height: 18px; text-align: center; line-height: 18px; font-family: "remixicon"; font-size: 18px;} .product-lp .img-area .info-area .share-panel .naver {background-color: #3BAC37;} .product-lp .img-area .info-area .share-panel .naver::before {content: ''; background: url('../images/sub/naver-ico-white.svg') no-repeat center;} .product-lp .img-area .info-area .share-panel .kakao {background-color: #ECD302;} .product-lp .img-area .info-area .share-panel .kakao::before {content: "\ee6c"; color: #000;} .product-lp .img-area .info-area .share-panel .facebook {background-color: #1877F2;} .product-lp .img-area .info-area .share-panel .facebook::before {content: "\ecbc"; color: #fff;} .product-lp .img-area .info-area .share-panel .link {background-color: #fff; border: 1px solid #e9e9e9;} .product-lp .img-area .info-area .share-panel .link::before {content: "\eeb2"; color: #000;} .product-lp .img-area .place {position: absolute; left: 20px; bottom: 20px; border-radius: 40px; backdrop-filter: blur(5px); background-color: rgba(12, 12, 12, 0.2); padding: 11px 20px; color: #fff; font-size: 16px; font-weight: 500; display: flex; align-items: center; gap: 10px; line-height: 1;} .product-lp .img-area .place::before {font-family: "remixicon"; font-size: 18px; font-weight: 400; content: "\ef14";} .product-lp .img-area .cate {position: absolute; left: 20px; top: 20px; border-radius: 40px; backdrop-filter: blur(5px); background-color: rgba(12, 12, 12, 0.2); padding: 11px 20px; color: #fff; font-size: 16px; font-weight: 500; display: flex; align-items: center; gap: 10px; line-height: 1;} .product-lp .text-area {padding-top: 10px; width: calc(100% - 440px);} .product-lp .text-area .info-area {display: flex; gap: 10px 30px; flex-wrap: wrap;} .product-lp .text-area .info-area > p {display: flex; align-items: center; gap: 10px; position: relative; font-size: 16px; color: #000; font-weight: 500;} .product-lp .text-area .info-area > p::before {display: block; width: 40px; height: 40px; border-radius: 50%; content: '';} .product-lp .text-area .info-area > p::after {display: block; position: absolute; top: 0; left: 0; width: 40px; line-height: 40px; font-size: 18px; color: #fff; text-align: center; font-family: "remixicon";} .product-lp .text-area .info-area > .place::before {background-color: #1A4399;} .product-lp .text-area .info-area > .place::after {content: "\ef14";} .product-lp .text-area .info-area > .date::before {background-color: #D1303B;} .product-lp .text-area .info-area > .date::after {content: '\eb21';} .product-lp .lp-cont .inner .text-area .subject {margin-top: 20px; font-size: 24px; font-weight: 700; color: #000;} .product-lp .text-area .text {margin-top: 20px; min-height: 3.2em;} .product-lp .text-area .tag {display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px;} .product-lp .text-area .tag span {font-size: 14px; color: #454545; background-color: #F5F7F9; border-radius: 24px; padding: 3px 15px;} .product-lp .lp-cont .inner .text-area .price {border-top: 1px solid #e9e9e9; margin-top: 30px; padding-top: 17px; font-size: 30px; font-weight: 700; color: #D1303B; margin-bottom: 30px;} .product-lp .text-area .price em {font-size: 20px;} .product-lp .text-area .price .del {text-decoration: line-through;} .product-lp .text-area .price .arrow::before {font-family: 'remixicon'; content: "\ea67"; font-size: 22px; font-weight: 400;} .product-lp .lp-cont .inner .btn-area {display: flex; justify-content: space-between; align-items: center; gap: 10px;} .product-lp .lp-cont .inner .btn-area .temp-btn {flex-shrink: 0;} .product-lp .lp-cont .inner .tel-area {background-color: #212D4D; color: #fff !important; border-radius: 36px; display: flex; align-items: center; gap: 5px; font-size: 14px; min-height: 36px; padding: 0 20px;} .product-lp .lp-cont .inner .tel-area::before {display: block; content: '\ee59'; font-size: 18px; font-family: 'remixicon';} /* 촌캉스 상품관 - 영문 */ #con #product-hall.en .board-search {align-items: center;} #con #product-hall.en .board-search .input-area {width: auto;} #con #product-hall.en .board-search .search-btn {width: 60px; height: 60px; background-color: #1B9E50; position: static; color: #fff;} #con #product-hall.en .board-search .product-search-title {font-size: 20px; font-weight: 600; color: #1B9E50;} #con #product-hall.en .product-head {font-size: 20px; background-image: url('../images/sub/product-head-bg2.jpg'); padding-right: 248px;} #con #product-hall.en .product-head span {font-size: 25px; display: inline;} #con #product-hall.en .product-head::before {background-image: url('../images/sub/product-head-img2.png');} #con #product-hall.en .place-search-wrap {position: relative; margin: 0 5px 0 10px; width: 700px; max-width: calc(100% - 352px);} #con #product-hall.en .place-search-wrap::before {display: block; content: '\ef14'; font-family: 'remixicon'; font-size: 24px; color: #9c9c9c; position: absolute; top: 0; bottom: 0; left: 16px; height: 24px; margin: auto 0; z-index: 10;} #con #product-hall.en .place-select {position: relative; text-align: center;} #con #product-hall.en .place-select:read-only {background-color: #fff;} #con #product-hall.en #placeSearch {display: none; position: absolute; top: 100%; left: 19px; width: 500px; border-radius: 30px; box-shadow: 5px 10px 20px 0px rgba(0, 0, 0, 0.1); padding: 20px 50px 30px; background-color: #fff; z-index: 100; margin-top: 15px; border: 1px solid #e9e9e9;} #con #product-hall.en #placeClose {font-size: 0; line-height: 0; position: absolute; top: 20px; right: 20px;} #con #product-hall.en #placeClose::before {font-family: 'remixicon'; content: "\f4c8"; font-size: 20px; line-height: 1;} #con #product-hall.en #placeSearch .place-title {font-size: 22px; font-weight: 700;} #con #product-hall.en #placeSearch .place-text {font-size: 15px; color: #142241; margin: 5px 0 15px;} #con #product-hall.en #placeSearch .place-all-area {border-bottom: 1px solid #000; padding-bottom: 25px; margin-bottom: 25px;} #con #product-hall.en #placeSearch .place-all-area .item {position: relative; text-align: center; width: 100%;;} #con #product-hall.en #placeSearch .place-all-area .item input[type="checkbox"] {position: absolute; width: 0; height: 0;} #con #product-hall.en #placeSearch .place-all-area .item label {border: 1px dashed #E1E4EB; border-radius: 40px; font-size: 16px; font-weight: 700; color: #142241; cursor: pointer; line-height: 1; padding: 13px 20px; display: block; background-color: #fff;} #con #product-hall.en #placeSearch .place-all-area .item input[type="checkbox"]:checked + label {background-color: #EBEDEE;} #con #product-hall.en #placeSearch .checkbox-list {display: grid; gap: 15px 20px; grid-template-columns: repeat(3, 1fr);} #con #product-hall.en #placeSearch .checkbox-list .item {position: relative; text-align: center;} #con #product-hall.en #placeSearch .checkbox-list .item input[type="checkbox"] {position: absolute; width: 0; height: 0;} #con #product-hall.en #placeSearch .checkbox-list .item label {border: 1px dashed #E1E4EB; border-radius: 40px; font-size: 14px; font-weight: 500; color: #142241; cursor: pointer; line-height: 1; padding: 13px 5px; display: block; background-color: #fff;} #con #product-hall.en #placeSearch .checkbox-list .item input[type="checkbox"]:checked + label {background-color: #EBEDEE;} #con #product-hall.en #placeSearch .place-check {text-align: center; margin-top: 30px;} #con #product-hall.en #placeSearch .place-submit {font-weight: 700; color: #fff; background-color: #1B9E50; border-radius: 38px; display: inline-flex; height: 38px; width: 95px; align-items: center; justify-content: center;} #con #product-hall .board-no-post {min-height: 600px; display: flex; align-items: center; justify-content: center;} /*설맞이 촌캉스 할인전*/ #product-hall .product-img img{width:100%;} #con #product-hall .product-list .subject.subject_promo{white-space:break-spaces;} @media all and (max-width: 1300px) { #con #product-hall .product-list {grid-template-columns: repeat(3, 1fr);} } @media all and (max-width: 1200px) { #con #product-hall .tag-wrap {width: calc(50% - 5px);} #con #product-hall .tag-wrap .temp-select {width: 100%;} #con #product-hall:not(.en) .board-search .total-page {flex-basis: 100%; margin: 0 0 6px;} #con #product-hall:not(.en) .board-search .input-area {width: auto;} #con #product-hall:not(.en) .board-search .tag-wrap .temp-select {width: 100%;} #con #product-hall:not(.en) #tagSearch {left: 0; right: auto;} #con #product-hall.en .product-head {padding-right: 20px;} #con #product-hall.en .board-search .input-area {flex-basis: 60px;} #con #product-hall.en #placeSearch {left: 0; max-width: calc(100% + 106px); padding-right: 20px; padding-left: 20px;} } @media all and (max-width: 1024px) { #con #product-hall .product-banner .slide, #con #product-hall .product-banner .item {margin: 0;} #con #product-hall .product-head {font-size: 28px;} #con #product-hall .product-list {grid-template-columns: repeat(2, 1fr);} .product-lp .product-inner {display: block;} .product-lp .img-area {width: 300px; height: 300px; max-width: 100%; margin: auto;} .product-lp .text-area {width: auto;} .product-lp .text-area .text {min-height: auto; margin-top: 10px;} .product-lp .lp-cont .inner .text-area .subject {margin-top: 10px;} } @media all and (max-width: 768px) { #con #product-hall .product-banner .arrows button {width: 30px; height: 30px;} #con #product-hall .product-banner .arrows button.prev {left: 10px;} #con #product-hall .product-banner .arrows button.next {right: 10px;} #con #product-hall .product-head {font-size: 20px; text-align: center; padding: 20px; background-position-x: center; margin-top: 20px;} #con #product-hall .product-head::before {width: 100%; position: static; margin-bottom: 10px; background-position-x: calc(50% + 30px); height: 124px;} #con #product-hall #tagSearch {padding: 20px; width: 300px; margin-top: 10px; border-radius: 20px;} #con #product-hall:not(.en) .board-search {gap: 8px; margin-top: 30px;} #con #product-hall:not(.en) .board-search .total-page {font-size: 16px;} #con #product-hall:not(.en) .board-search .total-page > strong:first-of-type {margin: 0 2px; font-size: 19px;} #con #product-hall:not(.en) .board-search.has-search-toggle {justify-content: space-between; gap: 0 10px;} #con #product-hall:not(.en) .board-search.has-search-toggle .total-page {flex: 1; min-width: 0; margin: 0;} #con #product-hall:not(.en) .board-search.has-search-toggle .board-search-body {display: flex; flex-wrap: wrap; gap: 8px; flex-basis: 100%; max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: max-height .3s ease, margin .3s ease, opacity .2s ease, visibility 0s linear .3s;} #con #product-hall:not(.en) .board-search.has-search-toggle.search-open .board-search-body {max-height: 600px; margin-top: 12px; overflow: visible; opacity: 1; visibility: visible; transition: max-height .3s ease, margin .3s ease, opacity .2s ease, visibility 0s;} #con #product-hall:not(.en) .board-search.has-search-toggle .board-search-body > * {flex-basis: 100%; width: 100%;} #con #product-hall #tagSearch .tab-list {gap: 10px; padding-bottom: 15px; margin-bottom: 15px;} #con #product-hall #tagSearch .tab-list button {font-size: 14px; padding: 5px 15px;} #con #product-hall #tagSearch .checkbox-list {gap: 5px 10px;} #con #product-hall #tagSearch .checkbox-list .item label {padding: 5px 10px;} #con #product-hall.en .product-head {font-size: 16px;} #con #product-hall.en .product-head span {font-size: 18px;} #con #product-hall.en .place-search-wrap {margin: 0; max-width: calc(100% - 50px);} #con #product-hall.en .board-search .search-btn {width: 40px; height: 40px;} #con #product-hall.en .board-search .input-area {flex-basis: 40px;} #con #product-hall.en #placeSearch {max-width: calc(100% + 61px); border-radius: 20px; padding-bottom: 20px; margin-top: 10px;} #con #product-hall.en #placeSearch .place-title {font-size: 18px;} #con #product-hall.en #placeSearch .place-text {font-size: 14px; margin: 0 0 10px} #con #product-hall.en #placeSearch .checkbox-list {gap: 5px 10px;} #con #product-hall.en #placeSearch .checkbox-list .item label, #con #product-hall.en #placeSearch .place-all-area .item label {padding: 5px 10px;} #con #product-hall.en #placeSearch .place-all-area {margin-bottom: 15px; padding-bottom: 15px;} #con #product-hall.en #placeSearch .place-check {margin-top: 15px;} #con #product-hall.en #placeSearch .place-submit {height: 30px; width: 80px; font-size: 14px;} #con #product-hall .product-list {gap: 20px; margin-top: 30px;} #con #product-hall .product-list .img-area {margin-bottom: 10px;} #con #product-hall .product-list .subject {font-size: 16px;} #con #product-hall .product-list .text {font-size: 14px;} #con #product-hall .product-list .info-area {gap: 10px; margin-top: 5px;} #con #product-hall .product-list .price {font-size: 16px;} #con #product-hall .product-list .place {left: 10px; bottom: 10px; font-size: 14px; padding: 5px 10px; gap: 5px;} #con #product-hall .product-list .place::before {font-size: 15px;} #con #product-hall .product-list .img-area .cate {left: 10px; top: 10px; font-size: 14px; padding: 5px 10px; gap: 5px;} #con #product-hall .product-list .like {top: 10px; right: 10px; width: 30px; height: 30px;} #con #product-hall .product-list .like::before {font-size: 16px;} #con #product-hall .product-list .item.soldout .soldout-text::before {width: 84px; height: 81px;} #con #product-hall .product-list .item.soldout .soldout-text span {min-width: 82px; height: 46px; font-size: 16px; padding: 0 10px;} #con #product-hall .more-btn {max-width: 100%; width: 300px; margin-top: 30px;} .product-lp.temp-lp .lp-close {top: 10px;} .product-lp .img-area {height: 150px;} .product-lp .img-area .info-area {top: 10px; right: 10px;} .product-lp .img-area .info-area button {width: 30px; height: 30px;} .product-lp .img-area .info-area button::before {font-size: 16px;} .product-lp .img-area .place {left: 10px; bottom: 10px; font-size: 14px; padding: 5px 10px; gap: 5px;} .product-lp .img-area .place::before {font-size: 15px;} .product-lp .img-area .cate {left: 10px; top: 10px; font-size: 14px; padding: 5px 10px; gap: 5px;} .product-lp .text-area .info-area {gap: 10px;} .product-lp .text-area .info-area > p {font-size: 14px; gap: 5px;} .product-lp .text-area .info-area > p::before {width: 30px; height: 30px;} .product-lp .text-area .info-area > p::after {width: 30px; line-height: 30px; font-size: 15px;} .product-lp .lp-cont .inner .text-area .subject {font-size: 20px;} .product-lp .text-area .tag {margin-top: 10px; gap: 5px;} .product-lp .lp-cont .inner .text-area .price {margin-top: 15px; padding-top: 10px; font-size: 20px; margin-bottom: 15px;} .product-lp .text-area .price em {font-size: 16px;} .product-lp .lp-cont .inner .btn-area {gap: 5px; flex-wrap: wrap;} .product-lp .lp-cont .inner .tel-area {padding: 0 10px;} } @media all and (max-width: 600px) { #con #product-hall .product-list {display: block;} #con #product-hall .product-list .item + .item {margin-top: 20px;} } @media all and (max-width: 460px) { #con #product-hall .tag-wrap {width: 100%;} #con #product-hall.en #placeSearch .checkbox-list {grid-template-columns: repeat(2, 1fr)} } /* 농촌 관광 가는 주간 */ #con .nongchon-week .nongchon-top {margin-bottom: 50px; border-radius: 12px; overflow: hidden;} #con .nongchon-week .nongchon-top > img {display: block; width: 100%; height: auto;} #con .nongchon-week .nongchon-top.mb {display: none;} #con .nongchon-week .nongchon-tab {display: flex; justify-content: center; margin: 0 auto 45px; border-radius: 90px; box-shadow: 0px 3px 10px 3px rgba(0, 0, 0, 0.1);} #con .nongchon-week .nongchon-tab .tab-btn{ display:flex; align-items:center; justify-content:center; text-align:center; font-family:'GmarketSans', sans-serif; font-weight:500; font-size:21px; color:#000; height:90px; border-radius:90px; flex:1; /* 변경 */ padding:5px 15px; width:auto; /* 변경 */ } #con .nongchon-week .nongchon-tab .tab-btn.wide{ flex:2.5; } #con .nongchon-week .nongchon-tab .tab-btn br {display: none;} #con .nongchon-week .nongchon-tab .tab-btn.active {color: #fff; background: linear-gradient(0deg, #1E9E72 -10%, #1DA39C 100%); position: relative;} #con .nongchon-week .nongchon-tab .tab-btn.active::before {display: block; content: ''; width: 0; height: 0; border-top: 13px solid #1E9F76; border-right: 13px solid transparent; border-left: 13px solid transparent; position: absolute; top: auto; bottom:-11px; right: 0; left: 0; margin: 0 auto;} #con .nongchon-week .event-panel, #con .nongchon-week .nongchon-panel {display: none;} #con #product-hall.nongchon-week .sale-item {border-bottom: 1px solid #ccc; padding-bottom: 25px;} #con #product-hall.nongchon-week .product-slide {position: relative;} #con #product-hall.nongchon-week .product-list {margin-top: 40px; display: block;} #con #product-hall.nongchon-week .product-list .item, #con #product-hall.nongchon-week .product-list .slick-slide > div {margin: 0 15px 50px;} #con #product-hall.nongchon-week .product-list .slick-slide > div + div {margin-bottom: 0;} #con #product-hall.nongchon-week .product-list .slick-slide > div .item {margin-right: 0; margin-left: 0; margin-bottom: 0;} #con #product-hall.nongchon-week .product-list.row1 .item {margin-bottom: 0;} #con #product-hall.nongchon-week .product-list:not(.row1) .item .subject + .info-area {margin-top: 45px;} #con #product-hall.nongchon-week .product-list .item .text {-webkit-line-clamp: 1;} #con #product-hall.nongchon-week .product-slide .product-arrow button {width: 40px; height: 40px; border-radius: 50%; background-color: #fff; display: flex; align-items: center; justify-content: center; position: absolute; top: 0; bottom: 0; margin: auto 0; box-shadow: 0px 3px 10px 3px rgba(0, 0, 0, 0.1); font-size: 0; line-height: 1;} #con #product-hall.nongchon-week .product-slide .product-arrow button::before {font-size: 18px; font-family: 'remixicon';} #con #product-hall.nongchon-week .product-slide .product-arrow button.prev {left: 0;} #con #product-hall.nongchon-week .product-slide .product-arrow button.prev::before {content: "\ea64";} #con #product-hall.nongchon-week .product-slide .product-arrow button.next {right: 0;} #con #product-hall.nongchon-week .product-slide .product-arrow button.next::before {content: "\ea6e";} #con #product-hall.nongchon-week .product-slide .product-list.row1 + .product-arrow button {top: 153px; bottom: auto; margin: 0;} #con .nongchon-week .depth3-list .item {display: flex; align-items: center; height: 52px;} #con .nongchon-week .depth3-list .item > strong {color: #fff; background-color: #1EA085; border-radius: 46px; line-height: 46px; min-width: 46px; padding: 0 10px; text-align: center; display: inline-block; font-weight: 700; margin-right: 8px;} #con .nongchon-week .nongchon-banner {margin-top: 35px; border-radius: 20px;} #con .nongchon-week .nongchon-banner.mb {display: none;} #con .nongchon-week .nongchon-banner > img {display: block;} #con .nongchon-week .nongchon-banner2 {display: flex; gap: 43px; margin-top: 35px;} #con .nongchon-week .nongchon-banner2 .banner-item {flex-basis: 100%;} #con .nongchon-week .nongchon-banner2 .banner-item > a {display: block; position: relative;} #con .nongchon-week .nongchon-banner2 .banner-item img {display: block;} #con .nongchon-week .nongchon-banner2 .banner-item p {position: absolute; top: 50px; left: 58px; font-size: 30px; font-weight: 700; color: #fff;} #con .nongchon-week .nongchon-banner2 .banner-item span {position: absolute; right: 0; bottom: 0; background-color: rgba(83, 175, 189, 0.8); font-size: 20px; font-weight: 700; color: #fff; display: flex; align-items: center; justify-content: center; width: 153px; height: 54px; box-shadow: 0px 20px 40px 0px rgba(0, 0, 0, 0.2); backdrop-filter: blur(4px); gap: 10px;} #con .nongchon-week .nongchon-banner2 .banner-item span::after {display: block; width: 24px; height: 24px; background: url('../images/sub/nongchon-week-plus.svg') no-repeat center / contain; content: '';} @media all and (max-width: 1280px) { #con .nongchon-week .nongchon-tab .tab-btn{height: 75px;font-size: 18px;} } @media all and (max-width: 1200px) { #con .nongchon-week .nongchon-banner2 {gap: 20px;} #con .nongchon-week .nongchon-banner2 .banner-item p {top: 15px; left: 15px;} } @media all and (max-width: 1024px) { #con .nongchon-week .nongchon-top {margin-bottom: 30px;} #con .nongchon-week .nongchon-tab {margin-bottom: 50px;border-radius: 9px;} #con .nongchon-week .nongchon-tab .tab-btn {padding: 5px 10px;border-radius: 9px;font-size: 15px; height: 60px;} #con .nongchon-week .nongchon-tab .tab-btn.active::before{content:none} } @media all and (max-width: 768px) { #con .nongchon-week .nongchon-top.mb {display: block;} #con .nongchon-week .nongchon-top.pc {display: none;} #con .nongchon-week .nongchon-tab{justify-content: left;overflow-x: auto;} #con .nongchon-week .nongchon-tab::-webkit-scrollbar {display: none;} #con .nongchon-week .nongchon-tab .tab-btn {padding: 5px 20px;font-size: 16px; height: 50px;white-space: nowrap;} #con .nongchon-week .nongchon-tab .tab-btn br {display: none} #con .nongchon-week .depth3-list .item {height: 46px;} #con .nongchon-week .depth3-list .item > strong {line-height: 40px;} #con #product-hall.nongchon-week .sale-item {padding-bottom: 30px;} #con #product-hall.nongchon-week .product-list {margin-top: 30px;} #con #product-hall.nongchon-week .product-list .item, #con #product-hall.nongchon-week .product-list .slick-slide > div {margin: 0 10px 30px;} #con #product-hall.nongchon-week .product-list:not(.row1) .item .subject + .info-area {margin-top: 32px;} #con #product-hall.nongchon-week .product-slide .product-arrow button {width: 30px; height: 30px;} #con #product-hall.nongchon-week .product-slide .product-list.row1 + .product-arrow button {top: 107px;} #con .nongchon-week .nongchon-banner.pc {display: none;} #con .nongchon-week .nongchon-banner.mb {display: block;} #con .nongchon-week .nongchon-banner, #con .nongchon-week .nongchon-banner2 {margin-top: 30px;} #con .nongchon-week .nongchon-banner2 {display: block;} #con .nongchon-week .nongchon-banner2 .banner-item + .banner-item {margin-top: 20px;} #con .nongchon-week .nongchon-banner2 .banner-item p {font-size: 18px; top: 10px; left: 10px;} #con .nongchon-week .nongchon-banner2 .banner-item span {height: 40px; font-size: 14px; width: 110px;} #con .nongchon-week .nongchon-banner2 .banner-item span::after {width: 18px; height: 18px; } } @media all and (max-width: 600px) { #con #product-hall.nongchon-week .product-list:not(.row1) .item .subject + .info-area {margin-top: 5px;} #con .nongchon-week .nongchon-tab .tab-btn {height: 60px;} } /*** 웰촌소식 > 농촌관광 아이디어 경진대회 공모 > 공모참여신청 ***/ #con #collusion-apply .apply-head {border-bottom: 1px solid #e9e9e9; padding-bottom: 12px; margin-bottom: 50px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;} #con #collusion-apply .apply-title {font-size: 26px; font-weight: 700;} #con #collusion-apply .apply-head .step {display: flex; gap: 10px;} #con #collusion-apply .apply-head .step > li {font-size: 14px; color: #454545; position: relative; text-align: center;} #con #collusion-apply .apply-head .step > li::before {display: block; width: 54px; height: 54px; border: 1px solid #e9e9e9; border-radius: 50%; content: ''; box-sizing: border-box; margin: 0 auto 8px;} #con #collusion-apply .apply-head .step > li::after {display: block; font-size: 24px; font-family: 'remixicon'; position: absolute; top: 0; left: 0; right: 0; width: 54px; line-height: 54px; text-align: center;} #con #collusion-apply .apply-head .step > li.n1::after {content: "\ed0f";} #con #collusion-apply .apply-head .step > li.n2::after {content: "\efe0";} #con #collusion-apply .apply-head .step > li.n3::after {content: "\f439";} #con #collusion-apply .apply-head .step > li.active::before {background-color: #53AFBD; border-color: #53AFBD;} #con #collusion-apply .apply-head .step > li.active::after {color: #fff;} /* 개인정보동의 */ #con #collusion-apply .agree-wrap {border-bottom: 1px solid #e9e9e9; padding-bottom: 40px;} #con #collusion-apply .agree-wrap .temp-tit-green span {color: #1B9E50;} #con #collusion-apply .agree-text {border: 1px solid #e9e9e9; overflow-y: auto; max-height: 244px; padding: 25px 30px; margin-bottom: 20px;} #con #collusion-apply .agree-text * {font-size: 16px; color: #454545; line-height: 1.5;} /* 신청완료 */ #con #collusion-apply .apply-complete {text-align: center; margin-bottom: 80px;} #con #collusion-apply .apply-complete .title {font-size: 40px; font-weight: 700;} #con #collusion-apply .apply-complete .text {font-size: 20px; color: #454545; margin: 30px 0 40px;} #con #collusion-apply .apply-complete .text.point {color: #972824;} #con #collusion-apply .apply-complete::after {display: block; width: 100%; height: 264px; background: url('../images/sub/apply-bg.svg') no-repeat center / contain; content: '';} .apply-complete .apply-list {display:table; table-layout:fixed; max-width:800px; width:100%; margin:5px auto; border-top:2px solid #334265; border-bottom:1px solid #b8b8b8; border-collapse:collapse; border-spacing:0; word-break:break-all; line-height:2rem; color:#222; font-size:16px; text-align:center; border-left:0 !important;} .apply-complete .apply-list thead th {padding:2rem 1rem; color:#000; font-weight:600; border-bottom:1px solid #334265; border-left:1px solid #D2DCED; background-color:#F7F8FA; vertical-align:middle;} .apply-complete .apply-list thead th:first-child {border-left:0 !important;} .apply-complete .apply-list tbody th {padding:10px 10px; color:#222; font-weight:600; border-bottom:1px solid #D2DCED; border-left:1px solid #D2DCED; background-color:#F7F8FA; vertical-align:middle;} .apply-complete .apply-list tbody td {padding:10px 10px; border-bottom:1px solid #D2DCED; border-left:1px solid #d7d7d7; font-weight:400; text-align:left;background:#fff; vertical-align:middle;} .apply-complete .apply-list tbody tr:nth-child(1) th:first-child, .apply-complete .apply-list tbody tr:nth-child(2) th:first-child, .apply-complete .apply-list tbody tr th[rowspan], .apply-complete .apply-list tbody tr:last-child th:first-child, .apply-complete .apply-list tbody tr td:first-child {border-left:0 !important;} @media all and (max-width: 768px) { #con #collusion-apply .apply-head {margin-bottom: 20px;} #con #collusion-apply .apply-title {font-size: 20px;} #con #collusion-apply .apply-head .step > li::before {width: 40px; height: 40px;} #con #collusion-apply .apply-head .step > li::after {width: 40px; line-height: 40px; font-size: 18px;} #con #collusion-apply .agree-wrap {padding-bottom: 20px;} #con #collusion-apply .agree-text {max-height: 200px; padding: 15px 20px;} #con #collusion-apply .agree-text * {font-size: 14px;} #con #collusion-apply .apply-complete {margin-bottom: 30px;} #con #collusion-apply .apply-complete .title {font-size: 22px;} #con #collusion-apply .apply-complete .text {font-size: 14px; margin: 15px 0 20px;} #con #collusion-apply .apply-complete::after {height: 150px;} .apply-complete .apply-list{font-size:14px;} } /* 이메일무단수집거부 */ @media all and (min-width: 769px) { #con #email-refusal .temp-tit-green.small {font-size: 20px;} } /* 스타벅스 이벤트 > 게시글 */ #con .event-post .img-area {text-align: center; display: block; margin-bottom: 30px;} #con .event-post .head-tit {text-align: center; font-size: 30px; font-weight: 700; color: #000; margin-bottom: 40px;} #con .event-post .head-subtit {text-align: center; font-size: 18px; color: #454545;} #con .event-post .head-subtit + .head-subtit {margin-top: 20px;} #con .event-post .green-tit {font-size: 17px; font-weight: 700; color: #1B9E50; margin-bottom: 10px; margin-top: 30px;} #con .event-post .dl-st {margin-top: 20px;} #con .event-post .dl-st > li {font-size: 16px; color: #454545; display: flex; gap: 12px;} #con .event-post .dl-st > li span {font-weight: 700;} #con .event-post .dl-st > li span.thin {font-weight: 400;} #con .event-post .dl-st > li + li {margin-top: 20px;} #con .event-post .normal-text {font-size: 16px; color: #454545;} /* 스타벅스 이벤트 > 공통 */ #starbucks {max-width: 100%; width:1000px; margin:80px auto 0 auto;padding:20px;background: linear-gradient(-180deg, #E1EFFC 0%, #DCDBFE 100%);} #starbucks .head {position: relative;display: flex;justify-content:center;flex-flow:column;width:847px;height:570px;text-align: center; padding-bottom: 40px; background: url('../images/sub/bg_event.png') no-repeat center center;} #starbucks .head:before{content: ''; position: absolute; width:274px;height:218px;right:50px; bottom: 50px;background-repeat: no-repeat; background-position: center; background-size: contain;background-image: url('../images/sub/event_img.svg')} #starbucks .head.img-ver {background: none;} #starbucks .head .event-title{width:500px;margin:120px auto 0 auto;} #starbucks .head .head-img {text-align: center; margin-bottom: 30px;} #starbucks .head .head-img img {vertical-align: top;} #starbucks .head .big {font-family: 'Jalnan', sans-serif; font-size:55px; color: #000;} #starbucks .head .middle {font-family: 'Ria', sans-serif;font-size:30px; font-weight: 600; color: #2563EB; padding: 8px 30px; margin-bottom: 10px;} #starbucks .head .txt{color: #000;font-size:16px} #starbucks .head .txt strong{color: #2563EB;font-size:20px;display:block;margin-bottom:10px;} #starbucks .total {font-size: 18px; font-weight: 600; color: #111; margin-top: 10px; margin-bottom: 10px;text-align: center;} #starbucks .total strong {font-weight: 600;color: #2563EB;} #starbucks .renewal_wrap{background-color:#fff;border-radius: 20px;padding:30px;} #starbucks .renewal_area{position: relative;display: flex;justify-content:center;margin:20px 0} #starbucks .renewal_area:before{content: ''; position:absolute; width:163px;height:262px;right:0;bottom:0;background-repeat: no-repeat; background-position: center; background-size: contain;background-image: url('../images/sub/renewal_img.png')} #starbucks .renewal_area ul{display:flex;} #starbucks .renewal_area ul li img{width:100%} #starbucks .bot-btn {position: relative;z-index: 1;background: linear-gradient(96.34deg, #48C6EF 0%, #6F86D6 100%);display: flex; align-items: center; justify-content: center; height: 50px; color: #fff; transition: 0.2s; width:calc(100% + 40px); margin: 0 -20px -20px -20px; font-size: 18px; font-weight: 700;font-family: 'Ria', sans-serif; line-height: 1;} #starbucks .bot-btn:before {position: absolute;content: ""; width: 0; height: 100%;top: 0;right: 0;z-index: -1;background-color: #2563EB;transition: all 0.3s ease;} #starbucks .bot-btn:hover:before{left: 0;width: 100%;} #starbucks.v2 .bot-btn{background: linear-gradient(96.34deg, #ED6EA0 0%, #EC8C69 100%);} #starbucks.v2 .bot-btn:before{background-color: #C9484F;} /* 스타벅스 이벤트 > 작성하기 */ #starbucks .list { border-radius: 20px 20px 0 0; overflow: hidden ;} #starbucks .list table {width: 100%;border-collapse: separate;border-spacing: 0 12px;} #starbucks .list th {background-color: #2563EB; height: 45px; font-size: 15px; color: #fff; font-weight: 600;} #starbucks .list th:first-child{border-radius: 50px 0 0 50px;} #starbucks .list th:last-child{border-radius: 0 50px 50px 0;} #starbucks .list tr:first-child td {padding-top: 15px;} #starbucks .list tr:last-child td {padding-bottom: 15px;} #starbucks .list td {font-size: 15px; padding: 10px;color: #000;background-color: #F7F8FA;} #starbucks .list td:first-child {text-align: center;border-radius: 50px 0 0 50px;} #starbucks .list td:nth-child(2) {padding-left: 44px;} #starbucks .list td:last-child{border-radius: 0 50px 50px 0;} #starbucks .more-btn {display: flex; height: 45px; align-items: center; justify-content: center; background: linear-gradient(96.34deg, #8483F6 0%, #1CBF90 100%); border-radius:20px; text-align: center; font-size: 16px; font-weight: 600;font-family: 'Ria', sans-serif; color: #fff; transition: 0.2s;} #starbucks .more-btn:hover {background-color: #1B9E50;} #starbucks .write {margin: 28px 0 25px; width: 100%;} #starbucks .write th {vertical-align: top; padding: 5px 0;} #starbucks .write th span, #starbucks .write th input{background-color: #2563EB; border-radius:20px; font-size: 16px; font-weight: 700; color: #fff; display: flex; align-items: center; height: 35px; justify-content: center;} #starbucks .write th input::placeholder{font-size: 16px; font-weight: 700; color: #fff; display: flex; text-align: center; } #starbucks .write th input {font-size: 14px;} #starbucks .write td {padding: 5px 0 5px 15px;} #starbucks .write textarea, #starbucks .write input {border: 1px solid #D2DCED; border-radius:20px; width: 100%; font-size: 14px; color:#5F627B; display: block; background-color: #fff;} #starbucks .write textarea::placeholder, #starbucks .write input::placeholder {color: #5F627B;} #starbucks .write textarea {resize: none; height: 80px; padding: 10px 15px;} #starbucks .write input {height: 35px; padding: 0 15px;} #starbucks .agree-wrap {margin-bottom: 32px;margin-top:30px;background-color:#fff;border-radius: 20px;padding:30px 0 0 0;} #starbucks .agree-wrap .title {font-size:20px; font-weight: 700; color: #111;padding:0 30px} #starbucks .agree-wrap .text {font-size: 14px; margin: 10px 30px 0 30px;} #starbucks .agree-wrap .text ul {counter-reset: item;} #starbucks .agree-wrap .text ul > li {counter-increment: item;color:#000;padding: 2px 0;font-weight: 600;} #starbucks .agree-wrap .text ul > li::before {content: counter(item)'. ';color:#2563EB} #starbucks .agree-wrap .text ul > li > ul {padding-left: 15px;} #starbucks .agree-wrap .text ul > li > ul > li{color:#5F627B} #starbucks .agree-wrap .text ul > li > ul > li::before {content: '- ';color:#5F627B} #starbucks .agree-wrap .radio-wrap {display: flex; justify-content: center; gap: 10px 50px; margin-top: 15px;padding: 10px 0;border-radius: 0 0 20px 20px; background-color: #2563EB;} #starbucks .agree-wrap .radio-wrap .radio {position: relative;} #starbucks .agree-wrap .radio-wrap .radio input[type="radio"] {position: absolute; opacity: 0; width: 0; height: 0;} #starbucks .agree-wrap .radio-wrap .radio label {font-size: 14px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 5px; cursor: pointer;} #starbucks .agree-wrap .radio-wrap .radio label::before {font-size: 20px; font-family: 'remixicon'; content: "\eb7d"; color: #fff; font-weight: 400;} #starbucks .agree-wrap .radio-wrap .radio input[type="radio"]:checked + label::before {content: "\f48a";} /* 스타벅스 이벤트 > 응원글 목록 */ #starbucks .board-flex {display: flex; align-items: end; justify-content: space-between; margin-bottom: 15px;} #starbucks .board-flex .total {font-size: 18px; color: #7E8790;} #starbucks .board-flex .total strong {color: #111; font-weight: 600;} #starbucks .board-flex .search-wrap {display: flex; gap: 10px;} #starbucks .board-flex .search-wrap input {border: 1px solid #D2DCED; border-radius: 5px; padding: 0 15px; font-size: 14px; font-weight: 300; height: 40px; width: 202px;} #starbucks .board-flex .search-wrap input::placeholder {color: #7E8790;text-align:center;} #starbucks .board-flex .search-wrap select {border: 1px solid #D2DCED; border-radius: 5px; padding: 0 15px; font-size: 14px; font-weight: 300; height: 40px; min-width:120px;background: #fff url(../images/sub/i-select_arw.svg) no-repeat calc(100% - 20px) 50%; background-position: calc(100% - 15px) 50%;} #starbucks .board-flex .search-wrap .submit-btn {display: flex; align-items: center; justify-content: center; height: 40px; color: #fff; width: 68px; border-radius: 5px; background-color: #C9484F; transition: 0.2s;} #starbucks .board-flex .search-wrap .submit-btn:hover {background-color: #1B9E50;} #con #starbucks .board-list thead th, #con #starbucks .board-list tbody td {height: 50px;} #con #starbucks .board-list thead th:last-child, #con #starbucks .board-list tbody td:last-child {border-right: none;} #con #starbucks .board-list thead th {background-color: #F3F6FB; font-size: 15px;} #con #starbucks .board-list tbody td {color: #7E8790; font-size: 14px;border-bottom:0} #starbucks .event-pagenation {margin: 26px 0 36px;} #starbucks .event-pagenation .arrow {background: none; width: auto;} #starbucks .event-pagenation .arrow::before {content: ''; height: 11px; background: no-repeat center / contain; display: block;} #starbucks .event-pagenation .arrow.start::before, #starbucks .event-pagenation .arrow.end::before {background-image: url('../images/sub/event-db-arrow.svg'); width: 10px;} #starbucks .event-pagenation .arrow.prev::before, #starbucks .event-pagenation .arrow.next::before {background-image: url('../images/sub/event-arrow.svg'); width: 6px;} #starbucks .event-pagenation .arrow.end, #starbucks .event-pagenation .arrow.next {transform: rotate(180deg);} #starbucks .event-pagenation .arrow.prev {margin-right: 7px;} #starbucks .event-pagenation .arrow.next {margin-left: 7px;} #starbucks .event-pagenation .num {line-height: 1; border-radius: 5px; border: 1px solid transparent; color: #4E5B6F; transition: 0.2s; font-weight: 500;} #starbucks .event-pagenation .num.active {border-color: #e9e9e9; background-color: #F3F6FB; color: #006BED;} #starbucks .event-pagenation .num:hover {color: #006BED;} #starbucks .bot-btn.white {color: #fff; gap: 9px;} #starbucks .bot-btn.white i {font-weight: 400;} #starbucks.v2{background: linear-gradient(-180deg, #FFE6E8 0%, #DCDBFE 100%);} #starbucks.v2 .head{margin-bottom:30px;background: url(../images/sub/bg_event_v2.png) no-repeat center center;} #starbucks.v2 .head:before{ bottom: 30px;background-image: url(../images/sub/event_img_v2.svg);} #starbucks.v2 .head .middle, #starbucks.v2 .head .txt strong, #starbucks.v2 .total strong{color:#C9484F;} #starbucks.v2 .renewal_wrap{margin-bottom:30px} #con #starbucks.v2 .board-list{border:none;border-collapse: separate;border-spacing: 0 12px;} #con #starbucks.v2 .board-list thead th {background-color: #C9484F; height: 45px; font-size: 15px; color: #fff; font-weight: 600;} #con #starbucks.v2 .board-list thead th:first-child{border-radius: 50px 0 0 50px;} #con #starbucks.v2 .board-list thead th:last-child{border-radius: 0 50px 50px 0;} #con #starbucks.v2 .board-list tbody td {font-size: 15px; padding: 10px;color: #000;background-color: #F7F8FA;} #con #starbucks.v2 .board-list tbody td:first-child {text-align: center;border-radius: 50px 0 0 50px;} #con #starbucks.v2 .board-list tbody td:last-child{border-radius: 0 50px 50px 0;} @media all and (max-width: 1024px) { #con #starbucks .board-list {width: 100%;} } @media all and (max-width: 900px) { #starbucks .head{width: 100%;background-size: cover;} #starbucks .head:before, #starbucks .renewal_area:before{display:none;} } @media all and (max-width: 768px) { #starbucks .head .head-img {margin-bottom: 20px;} #starbucks .event-pagenation .arrow {width: 100%; background-color: #F3F6FB;} #starbucks .event-pagenation .arrow.prev {margin-right: 0;} #starbucks .event-pagenation .arrow.next {margin-left: 0;} } @media all and (max-width: 600px) { #starbucks .head, #starbucks.v2 .head{background: none;height:300px;padding-bottom:0} #starbucks .head .event-title{margin:0 auto} #starbucks .head .big {font-size: 35px;} #starbucks .head .middle{font-size:22px;} #starbucks .head .event-title{width:100%} #starbucks .renewal_area ul{display:block} #starbucks .list td:nth-child(2) {padding-left: 10px;} #starbucks .list th, #starbucks .list td {font-size: 14px;} #starbucks .write colgroup {display: none;} #starbucks .write th, #starbucks .write td {display: block;} #starbucks .write td {padding: 5px 0;} #con #starbucks .board-list {width: 600px;} #starbucks .board-flex {display: block;} #starbucks .board-flex .search-wrap {margin-top: 10px;} #starbucks .board-flex .search-wrap input {width: calc(100% - 78px);} } @media all and (max-width:470px) { #starbucks{padding:10px} #starbucks .renewal_wrap{padding:15px} #starbucks .board-flex .search-wrap{width:100%;flex-direction: column;} #starbucks .board-flex .search-wrap select, #starbucks .board-flex .search-wrap input, #starbucks .board-flex .search-wrap .submit-btn{width:100%} #starbucks .agree-wrap .title{padding:0 15px;} #starbucks .agree-wrap .text{margin: 10px 15px 0 15px;} #starbucks .agree-wrap .radio-wrap{padding: 10px; gap: 10px 20px;} } /* 가로세로퀴즈이벤트 */ #quizEvent {max-width: 100%; width:1000px; margin:80px auto 0 auto;padding:20px;background:#157CF8 url(../images/sub/quizEvent_bg.png) no-repeat 0 0;} #quizEvent .head {position: relative;display: flex;justify-content:center;flex-flow:column;width:915px;height:300px;text-align: center; padding-bottom: 40px; margin: 120px auto 0 auto;} #quizEvent .head:before{content: ''; position: absolute; width:246px;height:246px;right:0; bottom:-23px;background-repeat: no-repeat; background-position: center; background-size: contain;background-image: url('../images/sub/eventHead_bg.png')} #quizEvent .head.img-ver {background: none;} #quizEvent .head .event-title{display:flex; width:100%;gap:20px;} #quizEvent .head .head-img {text-align: center; margin-bottom: 30px;} #quizEvent .head .head-img img {vertical-align: top;} #quizEvent .head .left {width:218px;height:228px;font-size:0; background-image:url(../images/sub/title01_bg.png); background-position:center;background-repeat:no-repeat;} #quizEvent .head .right{display: flex;flex-flow: column;justify-content:flex-end;background-image:url(../images/sub/title02_bg.png); background-position:50px 0;background-repeat:no-repeat;} #quizEvent .head .titleWrap { font-family: 'Jalnan', sans-serif; display: flex;} #quizEvent .head .titleWrap span { display: inline-block;margin-left:-6px; font-size:90px; -webkit-text-stroke: 2px #000; paint-order: stroke fill; text-shadow: 3.31373px 6.62745px 6.62745px rgba(0, 0, 0, 0.25); } #quizEvent .head .titleWrap .q { color: #fbff00; transform:translateY(5px); } #quizEvent .head .titleWrap .z {color: #fbff00; transform:translateY(-15px); } #quizEvent .head .titleWrap .i {color: #ffffff; transform:translateY(-5px); } #quizEvent .head .titleWrap .v {color: #ffffff; transform:translateY(5px); } #quizEvent .head .titleWrap .t {color: #ffffff; transform:translateY(0px); } #quizEvent .head .dateBox { display: inline-block; background-color: #7b2cff; border: 2px solid #000; border-radius: 15px; padding: 8px 25px; box-shadow: 0 4px 0 #000; } #quizEvent .head .dateBox strong { font-family: 'Jalnan', sans-serif; font-size: 22px;font-weight:200; color: #fff; letter-spacing: -0.5px; } #quizEvent .total {font-size: 18px; font-weight: 600; color: #111; margin-top: 10px; margin-bottom: 10px;text-align: center;} #quizEvent .total strong {font-weight: 600;color: #2563EB;} #quizEvent .info_wrap{position: relative;background-color:#fff;border-radius: 20px;padding:30px;margin-bottom: 20px;background-image:url(../images/sub/info_wrap_bg.png); background-position:0 0;background-repeat:no-repeat;} #quizEvent .info_wrap:before {content:'';position:absolute;width:100%;max-width:308px;height:402px;background-image: url(../images/sub/info_wrap_bg2.png);top:50px;right:20px;transform:translate(0, 0);background-position:center;background-repeat:no-repeat;} #quizEvent .info_area{position: relative;margin:40px 0;width:calc(100% - 380px); min-height:350px;} #quizEvent .info_area .tit{ position: relative;width:100%;margin-bottom:20px; font-family:'Ria', sans-serif; font-style: normal; font-weight: 700; font-size: 30px; line-height: 100%; color: #000000;} #quizEvent .info_area .tit:before{content: ''; position: absolute; width:240px;height:240px;right:0; bottom:-40px;background-repeat: no-repeat; background-position: center; background-size: contain;background-image: url('../images/sub/eventInfo_bg.png')} #quizEvent .info_area .quiz { width: 100%; max-width: 620px; display: flex; flex-direction: column; gap: 10px; } #quizEvent .info_area .quiz dl { display: flex; align-items: center; overflow: hidden; } #quizEvent .info_area .quiz dt { flex-shrink: 0; width: 80px; padding:8px 10px; text-align: center; font-size: 15px; font-weight: 700; color: #ffffff;border-radius: 8px; background-color: #3a3a3a; } #quizEvent .info_area .quiz dl.horizontal dt { background-color: #3d4f6e; } #quizEvent .info_area .quiz dl.vertical dt { background-color: #5a6e8a; } #quizEvent .info_area .quiz dd { flex: 1; margin-left:10px;font-size: 15px;font-weight: 700; line-height: 1.2; color: #000; word-break: keep-all; } #quizEvent .cont_wrap{background-color:#fff;border-radius: 20px;padding:30px;} #quizEvent .bot-btn {position: relative;z-index: 1;background:linear-gradient(96.34deg, #6aabf9 0%, #0c4180 100%);display: flex; align-items: center; justify-content: center; height: 50px; color: #fff; transition: 0.2s; width:calc(100% + 40px); margin: 0 -20px -20px -20px; font-size: 18px; font-weight: 700;font-family: 'Ria', sans-serif; line-height: 1;} #quizEvent .bot-btn:before {position: absolute;content: ""; width: 0; height: 100%;top: 0;right: 0;z-index: -1;background-color: #0A3E7C;transition: all 0.3s ease;} #quizEvent .bot-btn:hover:before{left: 0;width: 100%;} #quizEvent.v2 .bot-btn{background:linear-gradient(96.34deg, #065abb 0%, #053C7C 100%);} #quizEvent.v2 .bot-btn:before{background-color: #053C7C;} /* 가로세로퀴즈이벤트 > 작성하기 */ #quizEvent .list { border-radius: 20px 20px 0 0; overflow: hidden ;} #quizEvent .list table {width: 100%;border-collapse: separate;border-spacing: 0 12px;} #quizEvent .list th {background-color: #2563EB; height: 45px; font-size: 15px; color: #fff; font-weight: 600;} #quizEvent .list th:first-child{border-radius: 50px 0 0 50px;} #quizEvent .list th:last-child{border-radius: 0 50px 50px 0;} #quizEvent .list tr:first-child td {padding-top: 15px;} #quizEvent .list tr:last-child td {padding-bottom: 15px;} #quizEvent .list td {font-size: 15px; padding: 10px;color: #000;background-color: #F7F8FA;} #quizEvent .list td:first-child {text-align: center;border-radius: 50px 0 0 50px;} #quizEvent .list td:nth-child(2) {padding-left: 44px;} #quizEvent .list td:last-child{border-radius: 0 50px 50px 0;} #quizEvent .more-btn {display: flex; height: 45px; align-items: center; justify-content: center; background: linear-gradient(96.34deg, #8483F6 0%, #1CBF90 100%); border-radius:20px; text-align: center; font-size: 16px; font-weight: 600;font-family: 'Ria', sans-serif; color: #fff; transition: 0.2s;} #quizEvent .more-btn:hover {background-color: #1B9E50;} #quizEvent .write {margin: 28px 0 25px; width: 100%;} #quizEvent .write th {vertical-align: top; padding: 5px 0;} #quizEvent .write th span, #quizEvent .write th input{background-color: #2563EB; border-radius:8px; font-size: 16px; font-weight: 700; color: #fff; display: flex; align-items: center; height: 35px; justify-content: center;} #quizEvent .write th input::placeholder{font-size: 16px; font-weight: 700; color: #fff; display: flex; text-align: center; } #quizEvent .write th input {font-size: 14px;} #quizEvent .write td {padding: 5px 0 5px 15px;} #quizEvent .write textarea, #quizEvent .write input {border: 1px solid #D2DCED; border-radius:20px; width: 100%; font-size: 14px; color:#5F627B; display: block; background-color: #fff;} #quizEvent .write textarea::placeholder, #quizEvent .write input::placeholder {color: #5F627B;} #quizEvent .write textarea {resize: none; height: 80px; padding: 10px 15px;} #quizEvent .write input {height: 35px; padding: 0 15px;} #quizEvent .agree-wrap {margin-bottom: 32px;margin-top:30px;background-color:#fff;border-radius: 20px;padding:30px 0 0 0;} #quizEvent .agree-wrap .title {font-size:20px; font-weight: 700; color: #111;padding:0 30px} #quizEvent .agree-wrap .text {font-size: 14px; margin: 10px 30px 0 30px;} #quizEvent .agree-wrap .text ul {counter-reset: item;} #quizEvent .agree-wrap .text ul > li {counter-increment: item;color:#000;padding: 2px 0;font-weight: 600;} #quizEvent .agree-wrap .text ul > li::before {content: counter(item)'. ';color:#2563EB} #quizEvent .agree-wrap .text ul > li > ul {padding-left: 15px;} #quizEvent .agree-wrap .text ul > li > ul > li{color:#5F627B} #quizEvent .agree-wrap .text ul > li > ul > li::before {content: '- ';color:#5F627B} #quizEvent .agree-wrap .radio-wrap {display: flex; justify-content: center; gap: 10px 50px; margin-top: 15px;padding: 10px 0;border-radius: 0 0 20px 20px; background-color: #2563EB;} #quizEvent .agree-wrap .radio-wrap .radio {position: relative;} #quizEvent .agree-wrap .radio-wrap .radio input[type="radio"] {position: absolute; opacity: 0; width: 0; height: 0;} #quizEvent .agree-wrap .radio-wrap .radio label {font-size: 14px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 5px; cursor: pointer;} #quizEvent .agree-wrap .radio-wrap .radio label::before {font-size: 20px; font-family: 'remixicon'; content: "\eb7d"; color: #fff; font-weight: 400;} #quizEvent .agree-wrap .radio-wrap .radio input[type="radio"]:checked + label::before {content: "\f48a";} #quizEvent .bot-btn.white {color: #fff; gap: 9px;} #quizEvent .bot-btn.white i {font-weight: 400;} #quizEvent.v2 .info_wrap:after{content:'';position:absolute;width:100%;max-width:301px;height:280px;background-image: url(../images/sub/eventTotal_bg.png);top:150px;left:460px;background-position:center;background-repeat:no-repeat;} #quizEvent.v2 .info_wrap:before{display: block;position: relative;top:17px;left: 20px; right: inherit;} #quizEvent.v2 .info_area{width: 100%; min-height: auto;} #quizEvent.v2 .info_area .total{font-weight: 700;font-size: 16px;line-height: 100%;text-align: center;color:#000} #quizEvent.v2 .info_area .total > *{display:block} #quizEvent.v2 .info_area .total span{font-size:18px;} #quizEvent.v2 .info_area .total strong{color:#157CF8} @media all and (max-width: 1024px) { #con #quizEvent .board-list {width: 100%;} } @media all and (max-width: 900px) { #quizEvent .head{width: 100%;background-size: cover;} #quizEvent .head:before{width:200px;height:200px;right:-76px;} #quizEvent .info_area{width: calc(100% - 360px);} #quizEvent .info_area .tit:before{width:200px;height:200px;right:-76px;} #quizEvent.v2 .info_wrap:after{width:216px;height:200px;left:400px;background-size: cover;} } @media all and (max-width: 768px) { #quizEvent .head .head-img {margin-bottom: 20px;} #quizEvent .head { background: none; height: auto; padding-bottom: 0; border-radius: 0; margin-bottom: 15px; } #quizEvent .head:before{bottom: 25px;right:0} #quizEvent .head .event-title { position: relative; margin: 0 auto; padding-bottom:80px; flex-direction: column; align-items: flex-start; gap: 8px; } #quizEvent .head .left { width: auto; height: auto; font-family: 'Jalnan', sans-serif; font-size: 30px; background: none; color: #fff; padding: 0; } #quizEvent .head .right{background:none} #quizEvent .head .titleWrap span { margin-left: 0; font-size: 40px; transform: translateY(0) !important; color: #3d4f6e; } #quizEvent .head .dateBox { position: absolute; top:100px; left: 0; width: 100%; padding: 8px 15px; } #quizEvent .head .dateBox strong { font-size: 18px; color: #fff; } #quizEvent .info_wrap {background-image:none } #quizEvent .info_wrap:before {top:150px;left:50%;right:inherit;transform:translate(-50%, 0);background-position:center;} #quizEvent .info_area {display: flex;width: 100%;flex-direction: column; gap: 16px; } #quizEvent .info_area .tit { border-right: none; border-bottom: 2px solid #e0e0e0; padding-right: 0; padding-bottom: 12px; font-size: 18px; } #quizEvent .info_area .tit:before{width:150px;height:150px;right:0;} #quizEvent .info_area .tit br { display: none; } #quizEvent .info_area .quiz{padding-top:430px;} #quizEvent .info_area .quiz dt { width: 68px; font-size: 14px; padding:4px 8px; } #quizEvent .info_area .quiz dd { font-size:14px; padding:0 14px; margin-left: 0px;} #quizEvent.v2 .info_wrap:before {top:17px;left:50%;right:inherit;transform:translate(-50%, 0);background-position:center;} #quizEvent.v2 .info_wrap:after{top: 280px;right: 20px;left: inherit;} } @media all and (max-width: 600px) { #quizEvent .list td:nth-child(2) {padding-left: 10px;} #quizEvent .list th, #quizEvent .list td {font-size: 14px;} #quizEvent .write colgroup {display: none;} #quizEvent .write th, #quizEvent .write td {display: block;} #quizEvent .write td {padding: 5px 0;} } @media all and (max-width:470px) { #quizEvent{padding:10px} #quizEvent .head:before{width:120px;height:120px;} #quizEvent .head .titleWrap span { font-size: 32px; } #quizEvent .head .left { font-size: 24px; } #quizEvent .head .dateBox{padding: 8px 3px;} #quizEvent .head .dateBox strong { font-size: 15px; } #quizEvent .info_area{ margin: 25px 0;} #quizEvent .info_wrap { padding: 15px; } #quizEvent .info_wrap:before {background-size:cover;max-width: 220px; height: 287px; top: 100px; } #quizEvent .info_area .tit:before{display:none;} #quizEvent .info_area .quiz{padding-top:300px;} #quizEvent .quiz dt { width: 60px; font-size: 12px; padding: 10px 6px; } #quizEvent .quiz dd { font-size: 12px; padding: 10px 12px; line-height: 1.5; } #quizEvent .agree-wrap .title{padding:0 15px;} #quizEvent .agree-wrap .text{margin: 10px 15px 0 15px;} #quizEvent .agree-wrap .radio-wrap{padding: 10px; gap: 10px 20px;} #quizEvent.v2 .info_wrap:after{display:none;} } /* 농촌여행코스 */ #nongchon-course {padding-top: 100px;} #nongchon-course .img-area {text-align: center;} #nongchon-course .img-area .mb-show {display: none;} #nongchon-course .btn-wrap {text-align: center; margin-top: 50px;} @media all and (max-width: 768px) { #nongchon-course .img-area .mb-show {display: block;} #nongchon-course .img-area .pc-show {display: none;} #nongchon-course .btn-wrap {margin-top: 30px;} } /* 대국민투표 */ #vote {padding-bottom: 80px; position: relative;} #vote .vote-head {background: url('../images/sub/vote-head-bg.jpg') no-repeat center / cover; border: 1px solid #E9E9E9; border-bottom: none; padding: 50px 325px 47px 100px; position: relative;} #vote .vote-head::before {display: block; content: ''; position: absolute; top: 24px; right: 93px; width: 200px; height: 187px; background: url('../images/sub/vote-head-img.png') no-repeat center / contain;} #vote .board-search {border: 1px solid #e9e9e9;} #vote .vote-head .big-tit {font-size: 36px; font-weight: 600; color: #000;} #vote .vote-head .big-tit strong {font-weight: 700; color: #1B9E50;} #vote .vote-head .text {font-size: 26px; color: #53AFBD; margin: 17px 0 19px;} #vote .vote-head .text strong {font-weight: 700;} #vote .vote-head .info {background-color: #1B9E50; color: #fff; border-radius: 40px; padding: 10px 20px; display: inline-block; font-weight: 600;} #vote .img-board-list > li {position: relative; border-bottom: none;} #vote .img-board-list > li input[type="checkbox"] {position: absolute; top: 0; left: 0; opacity: 0;} #vote .img-board-list .img-area {position: relative; cursor: pointer;} #vote .img-board-list .img-area::before {display: block; content: ''; width: 100%; height: 100%; background-color: rgba(83, 175, 189, 0.7); position: absolute; top: 0; left: 0; z-index: 1; transition: 0.2s; opacity: 0;} #vote .img-board-list .img-area::after {display: block; font-family: 'remixicon'; font-size: 50px; color: #fff; line-height: 1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; content: '\eb80'; z-index: 2; opacity: 0; transition: 0.2s; width: 50px; height: 50px;} #vote .img-board-list .text-area {border-bottom: 1px solid #000;} #vote .img-board-list .text-area .place {display: flex; align-items: center; color: #000; gap: 10px;} #vote .img-board-list .text-area .place::before {min-width: 30px; width: 30px; height: 30px; border-radius: 50%; content: ''; background: #1A4399 url('../images/sub/map-icon.svg') no-repeat center / 18px;} #vote .img-board-list .text-area .subject {margin-top: 5px; display: -webkit-box; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1; font-size: 20px;} #vote .img-board-list .text-area .text {font-size: 14px; font-weight: 500; color: #142241; display: -webkit-box; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin-top: 5px; height: 2.6em;} #vote .img-board-list > li .vote-btn-wrap {display: flex; gap: 10px; margin-top: 20px;} #vote .img-board-list > li .vote-btn-wrap .vote-btn-item {color: #fff; border-radius: 10px; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 700; gap: 5px; padding: 0 10px; height: 40px; line-height: 1;} #vote .img-board-list > li .vote-btn-wrap .vote-btn-item::before {display: block; font-family: 'remixicon'; font-weight: 400; font-size: 18px; flex-shrink: 0;} #vote .img-board-list > li .vote-btn-wrap .result {background-color: #53AFBD; flex-basis: 100%;} #vote .img-board-list > li .vote-btn-wrap .result::before {content: '\ec3a';} #vote .img-board-list > li .vote-btn-wrap .popup-open {background-color: #1B9E50; flex-shrink: 0;} #vote .img-board-list > li .vote-btn-wrap .popup-open::before {content: '\ea13';} #vote .img-board-list > li .vote-btn-wrap.half .popup-open {flex-shrink: unset; flex-basis: 100%;} #vote .vote-btn {position: fixed; bottom: 0; left: 0; right: 0; max-width: 100%; width: 1500px; margin: 0 auto; transition: 0.2s; z-index: 2;} #vote .vote-btn.absolute {position: absolute;} #vote .img-board-list > li.active .img-area::before, #vote .img-board-list > li.active .img-area::after {opacity: 1;} /* 개인정보동의 팝업 */ .agree-lp .lp-inner {width: 630px;} .agree-lp .write {margin-bottom: 25px; width: 100%;} .agree-lp .write th {vertical-align: top; padding: 5px 0;} .agree-lp .write th span, .agree-lp .write th input {border: 1px solid #357969; border-radius: 10px; font-size: 16px; font-weight: 700; color: #357969; display: flex; align-items: center; height: 35px; justify-content: center; line-height: 1;} .agree-lp .write th input {font-size: 14px;} .agree-lp .write td {padding: 5px 0 5px 15px;} .agree-lp .write input {border: 1px solid #357969; border-radius: 10px; width: 100%; font-size: 14px; display: block;} .agree-lp .write input {height: 35px; padding: 0 15px;} .agree-lp .agree-wrap {margin-bottom: 32px;} .agree-lp .agree-wrap .title {font-size: 16px; font-weight: 600; color: #111;} .agree-lp .agree-wrap .text {border: 1px solid #e9e9e9; background-color: #f8f8f8; border-radius: 10px; padding: 15px 20px; color: #7E8790; font-size: 14px; margin-top: 10px;} .agree-lp .agree-wrap .text ul {counter-reset: item;} .agree-lp .agree-wrap .text ul > li {counter-increment: item;} .agree-lp .agree-wrap .text ul > li::before {content: counter(item)'. ';} .agree-lp .agree-wrap .text ul > li > ul {padding-left: 15px;} .agree-lp .agree-wrap .text ul > li > ul > li::before {content: '- ';} .agree-lp .agree-wrap .radio-wrap {display: flex; justify-content: center; gap: 10px 50px; margin-top: 15px;} .agree-lp .agree-wrap .radio-wrap .radio {position: relative;} .agree-lp .agree-wrap .radio-wrap .radio input[type="radio"] {position: absolute; opacity: 0; width: 0; height: 0;} .agree-lp .agree-wrap .radio-wrap .radio label {font-size: 14px; font-weight: 700; color: #111; display: flex; align-items: center; gap: 5px; cursor: pointer;} .agree-lp .agree-wrap .radio-wrap .radio label::before {font-size: 20px; font-family: 'remixicon'; content: "\eb7d"; color: #7E8790; font-weight: 400;} .agree-lp .agree-wrap .radio-wrap .radio input[type="radio"]:checked + label::before {content: "\f48a";} .agree-lp .bot-btn {background-color: #0F6F37; display: flex; align-items: center; justify-content: center; height: 50px; border-radius: 20px; color: #FFF64E; transition: 0.2s; width: 100%; font-size: 18px; font-weight: 700; line-height: 1;} .agree-lp .bot-btn:hover {color: #fff; background-color: #1B9E50;} @media all and (min-width: 1541px) { #vote .img-board-list {grid-template-columns: repeat(5, 1fr); gap: 30px;} } @media all and (max-width: 1200px) { #vote .vote-head {padding: 30px 275px 30px 30px;} #vote .vote-head::before {right: 30px;} #vote .board-search .input-area {flex-basis: 100%;} } @media all and (min-width: 1025px) { #vote .img-board-list .img-area {height: 276px;} } @media all and (max-width: 1024px) { #vote .vote-head .big-tit {font-size: 26px;} #vote .vote-head .text {font-size: 20px;} #vote .vote-head .info {font-size: 14px;} } @media all and (max-width: 768px) { #vote .vote-head {padding: 10px 20px 20px; text-align: center;} #vote .vote-head::before {position: static; margin: 0 auto 10px; transform: translateX(40px);} #vote .vote-head .big-tit {font-size: 22px;} #vote .vote-head .text {font-size: 18px; margin: 10px 0;} #vote .vote-head .info {padding: 10px;} #vote .img-board-list .text-area .place {gap: 5px; font-size: 14px;} #vote .img-board-list .text-area .place::before {min-width: 30px; width: 30px; height: 30px;} #vote .img-board-list .text-area .subject {font-size: 16px;} #vote .img-board-list > li .vote-btn-wrap {margin-top: 10px; gap: 5px;} #vote .img-board-list > li .vote-btn-wrap .vote-btn-item {font-size: 14px; padding: 0 10px; height: 35px;} #vote .btn-wrap {margin-top: 30px;} } @media all and (max-width: 600px) { #vote .img-board-list .text-area .subject, #vote .img-board-list .text-area .text {height: auto;} #vote .img-board-list .text-area .subject {margin-top: 10px;} } .vote-lp .img-slide .item {height: 100%;} .vote-lp .img-arrow {position: absolute; top: 0; bottom: 0; margin: auto 0; width: 40px; height: 40px; border-radius: 50%; background-color: #fff;} .vote-lp .img-arrow::before {display: block; font-family: 'remixicon'; font-size: 18px; line-height: 1; color: #000;} .vote-lp .img-arrow.prev {left: 10px;} .vote-lp .img-arrow.next {right: 10px;} .vote-lp .img-arrow.prev::before {content: '\ea64';} .vote-lp .img-arrow.next::before {content: '\ea6e';} .vote-lp .text-area {position: relative;} .vote-lp .text-area .info-area {justify-content: space-between;} .vote-lp .text-area .info-area > p.vote {background-color: #D1303B; color: #fff; padding: 0 31px; border-radius: 10px;} .vote-lp .text-area .info-area > p.vote::before {content: '\ec3a'; font-family: 'remixicon'; width: 18px; height: 18px; font-size: 18px; line-height: 1;} .vote-lp .text-area .tag {border-bottom: 1px solid #e9e9e9; padding-bottom: 30px;} .vote-lp .lp-cont .inner .btn-area {position: absolute; bottom: 0; right: 0; width: 100%;} @media all and (max-width: 1024px) { .vote-lp .img-area {margin: 0 auto 20px;} .vote-lp .lp-cont .inner .btn-area {position: static; margin-top: 20px;} } @media all and (max-width: 768px) { .vote-lp .img-area {height: auto;} .vote-lp .text-area .info-area > p.vote {padding: 0 10px;} .vote-lp .text-area .info-area > p.vote::before {width: 16px; height: 16px; font-size: 16px;} } /* 도농교류의 날 */ #donong .donong-wrap {background-image: url('../images/sub/festa-bg-top.svg'), url('../images/sub/festa-bg-bot.svg'), linear-gradient(180deg, #BFDFEB 0%, #8ECAE7 100%); background-repeat: no-repeat, no-repeat, repeat; background-position: center top, center bottom; background-size: contain, contain, auto; text-align: center; padding: 140px 70px 240px; width: 1200px; margin: 0 auto; max-width: 100%;} #donong .donong-tab {margin: 45px 0 80px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;} #donong .donong-tab > button {height: 70px; line-height: 1; border-radius: 70px; background-color: #fff; font-size: 30px; font-weight: 700; color: #142241; text-align: center; flex-basis: 100%; padding: 0 5px;} #donong .donong-tab > button.active {color: #fff;} #donong .donong-tab > button:nth-child(1).active {background-color: #ED7C48;} #donong .donong-tab > button:nth-child(2).active {background-color: #F8BD2C;} #donong .donong-tab > button:nth-child(3).active {background-color: #EE7A6C;} #donong .donong-tab > button:nth-child(4).active {background-color: #ED9720;} #donong .donong-tab > button:nth-child(5).active {background-color: #007BC7;} #donong .donong-tab > button:nth-child(6).active {background-color: #E27949;} #donong .donong-img {display: none;} #donong .donong-img.active {display: block;} @media all and (max-width: 1200px) { #donong .donong-wrap {padding-right: 30px; padding-left: 30px;} #donong .donong-tab > button {font-size: 25px;} } @media all and (max-width: 1024px) { #donong .donong-wrap {padding-bottom: 140px;} #donong .donong-tab {gap: 10px;} #donong .donong-tab > button {font-size: 20px; height: 50px;} } @media all and (max-width: 768px) { #donong .donong-wrap {padding: 15% 20px;} #donong .donong-tab {gap: 10px; flex-wrap: wrap; margin: 10px 0 30px;} #donong .donong-tab > button {flex-basis: calc(50% - 5px); font-size: 14px; height: 45px;} } /* 아이디어 경진대회 */ #idea-vote .vote-head {border-radius: 30px; background-color: #ECF3FD; position: relative; overflow: hidden; text-align: center; margin-bottom: 50px; padding: 102px 20px 42px; z-index: 1;} #idea-vote .vote-head::before, #idea-vote .vote-head::after {display: block; content: ''; border-radius: 50%; border: 130px solid #DEEFFC; position: absolute; box-sizing: border-box; z-index: -1;} #idea-vote .vote-head::before {left: -75px; top: 42px; width: 619px; height: 619px;} #idea-vote .vote-head::after {right: 24px; bottom: 122px; width: 480px; height: 480px;} #idea-vote .vote-head .head-img {position: absolute; top: 10px; left: 50%; margin-left: 357px;} #idea-vote .vote-head .title {font-size: 26px; font-weight: 700; color: #000; display: inline-block; position: relative; padding: 0 37px;} #idea-vote .vote-head .title span {color: #1B9E50;} #idea-vote .vote-head .title::before, #idea-vote .vote-head .title::after {display: block; content: ''; width: 36px; height: 36px; background: url('../images/sub/idea-vote-dq.svg') no-repeat center / contain; top: -18px; position: absolute;} #idea-vote .vote-head .title::before {left: 0;} #idea-vote .vote-head .title::after {transform: rotate(180deg) rotateY(180deg); right: 0;} #idea-vote .vote-head .text {color: #454545; font-size: 20px; margin: 15px 0 30px;} #idea-vote .vote-head .info {color: #45517A; font-weight: 700; display: inline-block; padding: 23px 30px 22px; border-radius: 20px; background-color: #C2DFFF;} #idea-vote .temp-check-wrap {justify-content: center;} #idea-vote .vote-btn {background-color: #1B9E50; color: #fff; border-radius: 5px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 10px; font-size: 14px; font-weight: 700;} #idea-vote .vote-cate {color: #fff; border-radius: 5px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; height: 30px; width: 69px; font-size: 14px; font-weight: 700;} #idea-vote .vote-cate.green {background-color: #8FC31F;} #idea-vote .vote-cate.sky {background-color: #53AFBD;} #idea-vote .vote-lp2 .lp-inner {z-index: 1;} #idea-vote .vote-lp2 .lp-inner::before {display: block; content: ''; width: 100%; height: 150px; background-color: #ECF3FD; position: absolute; top: 0; left: 0; z-index: -1; border-radius: 30px 30px 0 0;} #idea-vote .vote-slide-wrap .vote-item > img {margin: 0 auto;} #idea-vote .vote-slide-wrap .vote-arrows button {position: absolute; top: 0; bottom: 0; margin: auto 0; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #e9e9e9; display: flex; align-items: center; justify-content: center; font-size: 0; line-height: 0; background-color: #fff;} #idea-vote .vote-slide-wrap .vote-arrows button::before {display: block; font-family: 'remixicon'; font-size: 18px;} #idea-vote .vote-slide-wrap .vote-arrows .prev {left: 5px;} #idea-vote .vote-slide-wrap .vote-arrows .prev::before {content: '\ea64';} #idea-vote .vote-slide-wrap .vote-arrows .next {right: 5px;} #idea-vote .vote-slide-wrap .vote-arrows .next::before {content: '\ea6e';} @media all and (max-width: 1200px) { #idea-vote .vote-head {padding-top: 30px;} #idea-vote .vote-head .head-img {position: static; margin: 0 auto 30px; display: block; transform: translateX(38px);} } @media all and (min-width: 769px) { #idea-vote .vote-lp2 .lp-title {margin-bottom: 56px;} } @media all and (max-width: 768px) { #idea-vote .vote-head {padding: 20px 15px;} #idea-vote .vote-head::before {top: auto; left: -300px; bottom: -300px;} #idea-vote .vote-head::after {right: -240px; top: -240px; bottom: auto;} #idea-vote .vote-head .title {font-size: 22px; padding: 0 27px;} #idea-vote .vote-head .title::before, #idea-vote .vote-head .title::after {display: inline-block; width: 25px; height: 25px; margin-top: 0;} #idea-vote .vote-head .text {font-size: 16px; margin: 15px 0 20px;} #idea-vote .vote-head .info {font-size: 14px;} #idea-vote .vote-lp2 .lp-inner::before {height: 102px;} } /* apec 이벤트 페이지 */ #con .euddeumCon {position:relative; padding:22px 25px; margin:50px 10px 0; box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.15); background-color:#EDF8FC; transition: .5s;} #con .euddeumCon::before {display:block; content:''; position: absolute; top:-10px; left:-10px; z-index:-1; width:calc(100% + 20px); height:calc(100% + 20px); background-color:#B5CED5;} #con .euddeumCon .conTit {display:block; font-size:22px; color:#333333; margin-bottom:15px; transition: .5s;} #con .euddeumCon ul {padding-left:5px;} #con .euddeumCon .conInfo {padding-top:35px; transition: .5s;} #con .euddeumCon .item {color:#244FFF; text-decoration: underline; text-underline-offset: 2px;} @media all and (max-width: 1024px) { #con .euddeumCon {margin-top:40px;} #con .euddeumCon .conTit {font-size:20px; margin-bottom:12px;} } @media all and (max-width: 768px) { #con .euddeumCon {padding:15px 20px; margin-top:30px;} #con .euddeumCon .conTit {font-size:18px; margin-bottom:10px;} #con .euddeumCon ul {padding-left:2px;} #con .euddeumCon .conInfo {padding-top:25px;} } /* 우리마을정보수정 이미지 영역 */ #con .edit-img-content {display: grid; position: relative; margin-bottom: 30px; padding: 30px; border: 1px solid #E9E9E9; border-top-width: 2px; grid-template-columns: repeat(4, 1fr); gap: 20px;} #con .edit-img-content::before {content:""; position: absolute; top: -2px; left: 0; right: 0; height: 2px; background-color: #000;} #con .edit-img-content .item {display: block; position: relative;} #con .edit-img-content .item .category {display: flex; position: absolute; top: 10px; left: 10px; z-index: 1; height: 28px; padding: 0 10px; border-radius: 5px; background-color: rgba(0, 0, 0, 0.5); font-weight: 500; font-size: 14px; color: #fff; align-items: center;} #con .edit-img-content .img-area {overflow: hidden; position: relative; width: 100%; height: 245px;} #con .edit-img-content .img-area img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: 0.2s;} #con .edit-img-content .meta-area {display: flex; padding: 10px; gap: 10px; background-color: #F5F7F9; justify-content: space-between;} #con .edit-img-content .meta-area .flex {display: flex; gap: 5px; color: #000; flex-wrap: nowrap; align-items: center;} #con .edit-img-content .meta-area .temp-input {width: 56px; height: 30px; padding: 0 5px;} #con .edit-img-content .meta-area .temp-btn {height: 30px; padding: 0 5px; font-weight: 400;} @media screen and (max-width: 1200px) { #con .edit-img-content {grid-template-columns: repeat(3, 1fr);} #con .edit-img-content .img-area {height: auto;} #con .edit-img-content .img-area::before {content:""; display: block; padding-top: 71.01449%;} } @media screen and (max-width: 1024px) { #con .edit-img-content {padding: 20px; grid-template-columns: repeat(2, 1fr);} } @media screen and (max-width: 768px) { #con .edit-img-content {border-width: 0 0 1px 0; padding: 20px 0; gap: 10px;} #con .edit-img-content .item .category {height: 24px; font-size: 13px; padding: 0 8px;} #con .edit-img-content .meta-area {flex-wrap: wrap;} #con .edit-img-content .meta-area .flex {width: 100%; justify-content: flex-end;} #con .edit-img-content .meta-area .flex .temp-input {width: 100%;} #con .edit-img-content .meta-area .temp-btn {height: 30px !important;} } /* 우리마을정보수정 (도움말 버튼) */ .ui-tip {display: inline-flex; position: absolute; width: 30px; height: 30px; margin: 0 4px; border: 2px solid #fff; border-radius: 50%; background-color: #006CFF; vertical-align: middle; text-align: center; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2); align-items: center; justify-content: center; transform: translateY(calc(-50% + 0.65em));} .ui-tip::before {content: "\F046"; font-family: 'remixicon'; font-weight: normal; font-size: 18px; line-height: 1; color: #fff;} @media screen and (max-width: 1024px) { .ui-tip {position: static; transform: none;} } @media screen and (max-width: 600px) { .ui-tip {width: 28px; height: 28px; margin: 0 2px;} .ui-tip::before {font-size: 16px;} } /* 우리마을정보수정 (도움말 팝업 슬라이드) */ .temp-lp.tip-lp .lp-title {min-height: 0;} .temp-lp.tip-lp .tip-list {width: calc(100% + 30px); margin-top: 30px;} .temp-lp.tip-lp .tip-list .item {margin-right: 30px; width: 100%; height: 180px; cursor: pointer;} .temp-lp.tip-lp .tip-list .item img {object-fit: cover; object-position: center; width: 100%; height: 100%;} .temp-lp.tip-lp .tip-zoom {position: relative;} .temp-lp.tip-lp .tip-zoom .item {overflow: hidden; text-align: center; display: flex; align-items: center; justify-content: center;} .temp-lp.tip-lp .tip-zoom .item img {max-height: 100%; border-radius: 20px;} .temp-lp.tip-lp .tip-zoom .arrow button {width: 40px; height: 40px; border-radius: 50%; background-color: #fff; display: flex; align-items: center; justify-content: center; position: absolute; top: 0; bottom: 0; margin: auto 0;} .temp-lp.tip-lp .tip-zoom .arrow button::before {font-family: "remixicon"; font-size: 18px;} .temp-lp.tip-lp .tip-zoom .arrow .prev {left: 30px;} .temp-lp.tip-lp .tip-zoom .arrow .next {right: 30px;} .temp-lp.tip-lp .tip-zoom .arrow .prev::before {content: "\ea64";} .temp-lp.tip-lp .tip-zoom .arrow .next::before {content: "\ea6e";} /* 썸네일 리스트 버튼 */ .img-board-list .btn-box{display: flex;gap: 10px; padding-bottom: 10px;} .img-board-list .btn-box li{flex: 1;} .img-board-list .btn-box .btn{display: flex;align-items: center;justify-content: center;width:100%;height: 50px;border-radius: 6px;font-size: 16px;font-weight: 600;color:#fff;} .btn.col1{background-color: #53AFBD;} .btn.col2{background-color: #1B9E50;} @media screen and (max-width: 768px) { .img-board-list .btn-box .btn{ height: 46px;font-size: 15px;} } /*------------------------------------------------------------------- 26.10.22 여행지정보 목록 - 농촌관광자원 (지도페이지 #wmap .wm-cate 와 동일) -------------------------------------------------------------------*/ .catalog-sidebar .catalog-category-title {display: flex; align-items: center; gap: 12px;} .catalog-sidebar .catalog-badge {display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 24px; padding: 0 9px; border-radius: 15px; background: #454545; color: #fff; font-size: 13px; font-weight: 700; line-height: 1;} .catalog-sidebar .catalog-cate {max-height: none; overflow: visible; margin: 0 0 20px; padding: 0; list-style: none;} .catalog-sidebar .catalog-cate li + li {margin-top: 5px;} .catalog-sidebar .catalog-cate input {position: absolute; opacity: 0; width: 1px; height: 1px;} .catalog-sidebar .catalog-cate label {display: block; position: relative; min-height: 47px; padding: 12px 16px 12px 47px; border: 1px solid #d5d5d5; border-radius: 6px; background: #fff; color: #666; font-size: 15px; font-weight: 700; line-height: 1.4; cursor: pointer; user-select: none; word-break: keep-all; overflow-wrap: anywhere;} .catalog-sidebar .catalog-cate label span {white-space: nowrap;} .catalog-sidebar .catalog-cate label i {position: absolute; top: 50%; left: 16px; width: 19px; height: 19px; margin-top: -9.5px; border-radius: 50%; font-size: 0; background: #999 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8l2.5 2.5L12 5' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 14px 14px;} .catalog-sidebar .catalog-cate label i::before {content: none;} .catalog-sidebar .catalog-cate input:checked + label {border-color: #1B9E50; color: #1B9E50;} .catalog-sidebar .catalog-cate input:checked + label i {background-color: #1B9E50;} .catalog-sidebar .catalog-cate input:focus + label {outline: 2px solid #2b7f8c; outline-offset: -3px;} .catalog-sidebar .catalog-cate::-webkit-scrollbar {width: 5px;} .catalog-sidebar .catalog-cate::-webkit-scrollbar-button {display: none; width: 0; height: 0;} .catalog-sidebar .catalog-cate::-webkit-scrollbar-track {border-radius: 5px; background: #d5d5d5;} .catalog-sidebar .catalog-cate::-webkit-scrollbar-thumb {border-radius: 5px; background: #1B9E50;} @supports not selector(::-webkit-scrollbar) { .catalog-sidebar .catalog-cate {scrollbar-width: thin; scrollbar-color: #1B9E50 #d5d5d5;} } @media (hover: hover) and (pointer: fine) { .catalog-sidebar .catalog-cate label:hover {background: #f3faf5;} } @media screen and (max-width: 700px) { .catalog-sidebar .catalog-cate {max-height: none; overflow: visible; padding: 0;} .catalog-sidebar .catalog-cate li + li {margin-top: 8px;} .catalog-sidebar .catalog-cate label {min-height: 62px; padding: 18px 18px 18px 52px; border-radius: 8px; font-size: 17px; font-weight: 600;} .catalog-sidebar .catalog-cate label i {left: 18px; width: 22px; height: 22px; margin-top: -11px; background-size: 16px 16px;} .catalog-sidebar .catalog-badge {min-width: 38px; height: 30px; padding: 0 10px; border-radius: 18px; background: #444; font-size: 16px;} }