/****************************** COMMON ******************************/
.container {width: 1280px; max-width: 100%; margin: 0 auto; padding: 0 40px;}
.font-notosans {font-family: 'Noto Sans KR', sans-serif;}
.font-montserrat {font-family: 'Montserrat', sans-serif;}

/* ROOT */
#root {position: relative; width: 100%; height: 100%; background-color: #fff;}

/* OVERLAY */
#overlay {position: fixed; visibility: hidden; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; z-index: 110; opacity: 0; overflow: hidden; background-color: #000; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s;}
#overlay.active {visibility: visible; opacity: 0.65;}

/* HEADER */
header {position: fixed; top: 0; width: 100%; height: 80px; background-color: #fff; z-index: 105; box-shadow: 0px 0 0 0px rgba(0, 0, 0, 0); transition: box-shadow 0.35s}
header.scrolled {box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.12);}
header .header-inner {position: relative; display: flex; justify-content: flex-end; align-items: center; height: 100%; transition: background-color 0.5s;}
header .header-inner.dimmed {background-color: rgba(0, 0, 0, 0.65);}
header .logo {position: absolute; top: 50%; left: 40px; transform: translateY(-50%); width: 80px;}
header .logo > img {width: 100%;}
header .nav {display: flex; align-items: center;}
header .nav .gnb {display: flex; align-items: center;}
header .nav .gnb .menu {position: relative; opacity: 1; top: 0; margin-left: 50px; transition: top 0.75s, opacity 0.75s;}
header .nav .gnb .menu a {font-size: 18px; font-weight: 400; text-transform: uppercase; color: #000; opacity: 1; transition: opacity 0.35s, color 0.35s;}
header .nav .gnb .menu a:hover {opacity: 0.85; color: #512b6d;}
header .nav .gnb .menu.active a {font-weight: 700; color: #512b6d;}
header .nav .gnb .btn-sidebar_close {display: none;}
header .account {position: relative; margin-left: 30px; padding-left: 30px;}
header .account::before {position: absolute; top: 50%; left: 0; transform: translateY(-50%); content: ''; width: 1px; height: 10px; background-color: #ccc;}
header .account .status-login {display: block;}
header .account .status-login > a {position: relative; display: inline-block; padding-right: 10px; margin-right: 6px; font-size: 15px; color: #4a4a4a;}
header .account .status-login > a:first-child::after {position: absolute; top: 50%; right: 0; transform: translateY(-50%); content: ''; width: 2px; height: 2px; background-color: #ccc; border-radius: 50%;}
header .account .status-logout {display: none;}
header .account.active .status-login {display: none;}
header .account.active .status-logout {display: block;}

header .btn-sidebar {display: none;}

header .live-button > span {display: inline-block; height: 3px; background: #000; margin: 2px 0; border-radius: 1px; transition: all 0.5s;}
header .live-button {position: absolute; display: none; flex-direction: column; align-items: flex-end; width: 26px; right: 16px; top: 50%; transform: translateY(-50%); background: transparent; border: none; z-index: 110;}
header .live-button > span:nth-child(1) {width: 75%; transition-delay: 0.2s;}
header .live-button > span:nth-child(2) {width: 85%;}
header .live-button > span:nth-child(3) {width: 100%; transition-delay: 0.2s;}
header .live-button > span.on:nth-child(1) {width: 100%; transform: translateY(7px) rotate(225deg);} 
header .live-button > span.on:nth-child(2) {width: 100%; opacity: 0; transform: translateX(50px);}
header .live-button > span.on:nth-child(3) {transform: translateY(-8px) rotate(-225deg);}
header .live-button > span.start:nth-child(1) {width: 100%; transform: translateX(20px) translateY(7px) rotate(270deg);}
header .live-button > span.start:nth-child(2) {width: 100%; transform: translateX(50px);}
header .live-button > span.start:nth-child(3) {width: 100%; transform: translateY(-8px) rotate(270deg);}
@media screen and (max-width: 480px) {
}

/* FOOTER */
footer {width: 100%; border-top: 1px solid #eee; padding: 40px 0 60px 0;}
footer .footer-inner {font-size: 15px; color: #999;}
footer .footer-inner .corp-info {display: flex; justify-content: space-between;}
footer .footer-inner .corp-info span {position: relative; padding-right: 6px; margin-right: 2px;}
footer .footer-inner .corp-info span::after {position: absolute; top: 50%; right: 0; transform: translateY(-50%); content: ''; width: 1px; height: 60%; background-color: #999;}
footer .footer-inner .corp-info span:last-child::after {width: 0; height: 0; background-color: none;}
footer .footer-inner .corp-info span em {font-weight: 500; margin-right: 10px;}
footer .footer-inner .corp-info span a {text-decoration: underline;}
footer .footer-inner .corp-info .account {text-align: right;}
footer .footer-inner .corp-info .sns {display: flex; align-items: center; justify-content: flex-end; margin-top: 6px;}
footer .footer-inner .corp-info .sns > a {display: inline-block; margin-left: 6px;}
footer .footer-inner .corp-info .sns > a > i {font-size: 28px; padding: 6px; border: 1px solid transparent; border-radius: 50%; opacity: 1; transition: opacity 0.35s, color 0.35s, border 0.35s, background-color 0.35s;}
footer .footer-inner .corp-info .sns > a > i.xi-naver {color: #2db400;}
footer .footer-inner .corp-info .sns > a > i.xi-instagram {color: #bc2a8d;}
footer .footer-inner .corp-info .sns > a > i.xi-facebook {color: #3b5998;}
footer .footer-inner .corp-info .sns > a > i.xi-youtube {color: #c4302b;}
footer .footer-inner .corp-info .sns > a:hover > i {color: #512b6d; background-color: #fff;}
footer .footer-inner .copyright {margin-top: 0;}

/* MAIN */
#main {min-height: 100vh; padding-top: 80px;}
#main section {}
#main section .section-inner {}
#main section .section-title {display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee;}
#main section .section-title h3 {position: relative; font-size: 24px; padding-bottom: 10px;}
#main section .section-title h3::after {position: absolute; bottom: -1px; left: 0;  content: ''; width: 100%; height: 2px; background-color: #b360f1;}
#main section .section-contents {position: relative; margin-top: 20px;}

/* MAIN - 팝업 다이얼로그 */
.popup-dialog {display: none; position: fixed; top: 80px; left: 20px; z-index: 110; width: auto; max-width: 430px; border: 1px solid #333; box-shadow: 5px 5px 10px rgb(0 0 0 / 30%);}
.popup-dialog.active {display: block;}
.popup-dialog .popup-content {}
.popup-dialog .popup-footer {position: relative; padding: 4px 8px; display: flex; justify-content: flex-end; align-items: center; background-color: #333;}
.popup-dialog .popup-footer .btn-close {display: flex; align-items: flex-end; font-weight: bold; color: #000; font-size: 22px; cursor: pointer; color: #fff;}
@media screen and (max-width: 480px) {
    .popup-dialog {top: 80px; left: 20px; width: 80%;}
}

/* SECTION MAP (오시는 길) */
.section-map {}
.section-map .info {display: flex; gap: 24px;}
.section-map .info #map {width: 50%; height: 350px;}
.section-map .info .guide {width: 50%; display: flex; flex-direction: column; justify-content: center;}
.section-map .info .guide .ko-wrap {padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #eee;}
.section-map .info .guide .en-wrap {}
.section-map .info .guide .item {display: flex; margin-bottom: 12px;}
.section-map .info .guide .item:last-child {margin-bottom: 0;}
.section-map .info .guide .item .title {flex-shrink: 0; width: 90px; font-size: 18px; font-weight: 700;}
.section-map .info .guide .item .desc {font-size: 18px;}

/* ADVERTISEMENT */
.ad-banner {margin: 150px auto 20px auto;}
.ad-banner .item-list {display: flex; flex-wrap: wrap; gap: 10px;}
.ad-banner .item-list .item {position: relative; width: calc((100% / 3) - 7px); height: 170px; background-color: #ddd; border-radius: 8px; overflow: hidden;}
.ad-banner .item-list .item .img {height: 100%;}
.ad-banner .item-list .item .img > img {height: 100%; object-fit: cover; transition: transform 0.35s;}
.ad-banner .item-list .item .img.pc {display: block;}
.ad-banner .item-list .item .img.mobile {display: none;}
.ad-banner .item-list .item:hover .img > img {transform: scale(1.05);}
.ad-banner .item-list .item .dim {padding: 10px; background-color: rgba(0, 0, 0, 0.4);}
.ad-banner .item-list .item .desc {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end;}
.ad-banner .item-list .item .desc .title {font-size: 14px; color: #fff;}
.ad-banner .item-list .item .desc .date {font-size: 12px; text-align: right; color: #fff; margin-top: 6px;}

/* TAB */
.tab-wrapper {}
.tab-wrapper .tab-header {display: flex; justify-content: flex-start; align-items: center; border-bottom: 1px solid #eee;}
.tab-wrapper .tab-header .tab-menu {position: relative; font-size: 20px; padding-bottom: 8px; margin-right: 40px; cursor: pointer; color: #888; font-weight: 400; transition: color 0.35s, font-weight 0.35s;}
.tab-wrapper .tab-header .tab-menu:last-child {margin-right: 0;}
.tab-wrapper .tab-header .tab-menu.active {color: #000; font-weight: 700;}
.tab-wrapper .tab-header .tab-menu.active::after {position: absolute; bottom: -1px; left: 0;  content: ''; width: 100%; height: 2px; background-color: #b360f1;}
.tab-wrapper .tab-container {margin-top: 40px;}
.tab-wrapper .tab-container .tab {display: none;}
.tab-wrapper .tab-container .tab.active {display: block;}
.tab-wrapper .tab-container .tab .tab-inner-header {display: flex; align-items: center;}
.tab-wrapper .tab-container .tab .tab-inner-header .tab-title {font-size: 26px; font-weight: 700;}
.tab-wrapper .tab-container .tab .tab-inner-body {margin-top: 20px;}
@media screen and (max-width: 480px) {
    .tab-wrapper .tab-header .tab-menu {font-size: 18px; margin-right: 24px; padding-bottom: 6px;}
    .tab-wrapper .tab-header .tab-menu.active::after {bottom: -2px;}
    .tab-wrapper .tab-container {margin-top: 30px;}
    .tab-wrapper .tab-container .tab .tab-inner-header .tab-title {font-size: 20px;}
}

/* ITEM LIST (IMAGE) */
.image-item-list {display: flex; flex-wrap: wrap;}
.image-item-list .item {position: relative; display: inline-block; }
.image-item-list .item .thumb {width: 100%; height: 254px; overflow: hidden;}
.image-item-list .item .thumb .dim {opacity: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; padding: 20px; background-color: rgba(0, 0, 0, 0.4); transition: opacity 0.35s;}
.image-item-list .item .thumb .dim .note {font-size: 16px; color: #fff; text-align: center;}
.image-item-list .item .desc {display: flex; justify-content: space-between; align-items: center; margin-top: 4px;}
.image-item-list .item .desc .info-detail {width: 100%;}
.image-item-list .item .desc .info-detail span {position: relative; left: 0; font-size: 17px; font-weight: 600; color: #000; padding-right: 6px; margin-right: 4px; transition: left 0.35s;}
.image-item-list .item .desc .info-detail span:last-child {padding-right: 0;}
.image-item-list .item .desc .info-detail span::after {position: absolute; top: 50%; right: 0; transform: translateY(-50%); content: ''; background-color: #000; width: 2px; height: 2px; border-radius: 50%;}
.image-item-list .item .desc .info-detail span:last-child::after {width: 0; height: 0; background-color: none;}
.image-item-list .item .desc .info-tag {flex-shrink: 0;}
.image-item-list .item .desc .info-tag span {padding: 2px 4px; border-radius: 8px; border: 1px solid #512b6d; color: #512b6d; font-size: 12px; font-weight: 600;}
.image-item-list .item:hover .thumb .dim {opacity: 1;}
.image-item-list .item:hover .desc span {left: 10px;}

.image-item-list.devide__3 {gap: 30px;}
.image-item-list.devide__3 .item {width: calc((100% / 3) - 20px);}
.image-item-list.devide__4 {gap: 20px;}
.image-item-list.devide__4 .item {width: calc((100% / 4) - 15px);}
@media screen and (max-width: 768px) {
    .image-item-list .item .thumb {height: 180px;}
    .image-item-list .item .desc {margin-top: 0;}
    .image-item-list .item .desc .info-detail span {font-size: 15px;}

    .image-item-list.devide__3 {gap: 10px;}
    .image-item-list.devide__3 .item {width: calc((100% / 2) - 5px);}
    .image-item-list.devide__4 {gap: 10px;}
    .image-item-list.devide__4 .item {width: calc((100% / 2) - 5px);}
}

/* POST (일반 게시글) */
.post {}
.post .post-header {display: flex; justify-content: space-between; align-items: center; padding: 20px; border: solid #eee; border-width: 1px 0 1px 0;}
.post .post-header > h4 {font-size: 18px;}
.post .post-header .date {font-size: 17px; font-weight: 600;}
.post .post-content {padding: 20px; min-height: 250px;}
.post .post-content .content-video {position: relative; padding-bottom: 55%; overflow: hidden; margin-bottom: 20px;}
.post .post-content .content-video iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.post .post-content .content-img {text-align: left; margin-bottom: 20px;}
.post .post-content .content-img img {max-width: 500px;}
.post .post-content textarea {width: 100%; resize: none; border: none;}
.post .post-content .note {font-size: 16px; font-weight: 500; cursor: auto;}
.post .post-button {display: flex; justify-content: center;}
@media screen and (max-width: 480px) {
    .post .post-header {flex-direction: column; align-items: flex-start; padding: 12px 0;}
    .post .post-header > h4 {font-size: 17px;}
    .post .post-header .date {display: block; width: 100%; font-size: 15px; text-align: right; margin-top: 6px;}
    .post .post-content {padding: 12px 0;}
    .post .post-content .note {font-size: 15px;}
}

/* FORM (작성) */
.form-wrapper {width: 380px; max-width: 100%; margin: 0 auto;}
.form-wrapper .form {display: flex; flex-direction: column;}
.form-wrapper .form h2 {position: relative; display: inline-block; font-size: 36px; font-weight: 800; color: #000; padding-bottom: 30px;}
.form-wrapper .form h2::after {position: absolute; bottom: -3px; left: 0;  content: ''; width: 100%; height: 3px; background-color: #b360f1;}
.form-wrapper .form h3 {font-size: 24px; font-weight: 800; color: #000;}
.form-wrapper .form h4 {font-size: 15px; font-weight: 400; color: #000; margin-top: 8px;}
.form-wrapper .form .form-header {border-bottom: 3px solid #eee;}
.form-wrapper .form .form-content {width: 100%; margin-top: 20px;}
.form-wrapper .form .form-content .form-title {margin-bottom: 30px;}
.form-wrapper .form .form-button {width: 100%;}
.form-wrapper .form .form-button .button-item {}
.form-wrapper .form .form-help {display: flex; justify-content: center; align-items: center;}
.form-wrapper .form .form-help .help-item {}
.form-wrapper .form .form-help .help-item > a {position: relative; padding-right: 12px; margin-right: 12px;}
.form-wrapper .form .form-help .help-item > a::before {position: absolute; top: 50%; right: 0; transform: translateY(-50%); content: ''; width: 1px; height: 10px; background-color: #ccc;}
.form-wrapper .form .form-help .help-item:last-child > a {padding-right: 0; margin-right: 0;}
.form-wrapper .form .form-help .help-item:last-child > a::before {width: 0; height: 0; background-color: none;}

/* FORM (결과) */
.form-result {max-width: 100%; margin: 0 auto;}
.form-result .result {}
.form-result .result .result-content {display: flex; flex-direction: column; justify-content: center; align-items: center;}
.form-result .result .result-content .img {width: 72px;}
.form-result .result .result-content .img > img {width: 100%;}
.form-result .result .result-content .desc {}
.form-result .result .result-content .desc .main-txt {font-size: 28px; font-weight: 500; text-align: center; color: #000;}
.form-result .result .result-content .desc .main-txt .account-id {font-weight: 800;}
.form-result .result .result-content .desc .sub-txt {font-size: 16px; font-weight: 400; text-align: center; color: #000;}
.form-result .result .result-button {max-width: 400px; margin: 60px auto 0 auto;}

/* TABLE */
.table-wrapper {position: relative;}
.table-wrapper .table-header {}
.table-wrapper .table-header .table-title {font-size: 26px; font-weight: 700;}

.table-wrapper .table {margin-top: 20px;}
.table-wrapper .table .table-body {background-color: #fff;}
.table-wrapper .table .table-body .item-list .t-item {display: flex; padding: 12px 0;}
.table-wrapper .table .table-body .item-list .t-item .td {display: inline-flex; justify-content: center; align-items: center; font-size: 16px; font-weight: 400; word-break: break-all; color: #383838;}
.table-wrapper .table .table-body .item-list .t-item .td:last-child {border-right: none;}
.table-wrapper .table .table-body .item-list .t-item .td > span {display: inline-flex; align-items: center;}
.table-wrapper .table .table-body .item-list .t-item .td > span.thumbnail {max-width: 240px;}
.table-wrapper .table .table-body .item-list .t-item .td > span.thumbnail img {object-fit: cover;}
.table-wrapper .table .table-body .item-list.ti-standard {padding: 4px 2px;}
.table-wrapper .table .table-body .item-list.ti-standard .t-item {border-bottom: 1px solid #eee;}
.table-wrapper .table .table-body .item-list.ti-header .t-item {background-color: #eee;}
.table-wrapper .table .table-body .item-list.ti-header .t-item .td {position: relative; font-weight: 700; font-size: 17px;}

.table-wrapper .table-pagination {margin: 20px 0; display: flex; justify-content: flex-end; align-items: center;}
.table-wrapper .table-pagination .tp-prev {display: inline-flex; justify-content: center; align-items: center; width: 25px; height: 25px; background-color: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); border-radius: 4px; cursor: pointer; margin-right: 15px;}
.table-wrapper .table-pagination .tp-next {display: inline-flex; justify-content: center; align-items: center; width: 25px; height: 25px; background-color: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); border-radius: 4px; cursor: pointer; margin-left: 15px;}
.table-wrapper .table-pagination .tp-prev > img, .table-wrapper .table-pagination .tp-next > img {width: 6px;}
.table-wrapper .table-pagination .tp-nav .pg_num {display: inline-flex; justify-content: center; align-items: center; width: 25px; height: 25px; font-size: 14px; font-weight: 700; color: #000; background-color: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); border-radius: 4px; margin: 0 2.5px;}
.table-wrapper .table-pagination .tp-nav .pg_num.active {background-color: #512b6d; color: #fff;}
.table-wrapper .table-pagination .spread {margin-left: 5px; font-size: 10px; font-weight: 400;}

/* MODAL */
.modal-wrapper {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 115;}
.modal-wrapper .modal {display: none; flex-direction: column; justify-content: center; align-items: center; max-width: calc(100% - 80px); background-color: #fff; box-shadow: 0px 4px 10px 2px rgb(0 0 0 / 20%); border-radius: 12px; margin: 0 auto;}
.modal-wrapper .modal.active {display: flex;}
.modal-wrapper .btn-close_modal {position: absolute; top: -48px; right: -24px;}
.modal-wrapper .btn-close_modal button {cursor: pointer;}
.modal-wrapper .modal .modal-header {width: 100%; padding: 25px 30px 15px 30px; text-align: center;}
.modal-wrapper .modal .modal-header > h4 {font-size: 16px; font-weight: 600;}
.modal-wrapper .modal .modal-content {width: 100%; max-height: 80vh; overflow-y: scroll; padding: 0 30px 30px 30px;}
.modal-wrapper .modal .modal-content .txt {font-size: 15px;}
.modal-wrapper .modal .modal-content .terms {font-size: 15px; white-space: pre-line;}
.modal-wrapper .modal .modal-content .contact-way {display: flex; flex-direction: column;}
.modal-wrapper .modal .modal-content .contact-way > span {margin-right: 6px; font-size: 15px;}
.modal-wrapper .modal .modal-content .contact-way > span em {display: inline-block; width: 55px; margin-right: 8px;}
.modal-wrapper .modal .modal-content .contact-way > span a {text-decoration: underline;}
.modal-wrapper .modal .modal-button {display: flex; justify-content: space-between; width: 100%; border-top: 1px solid #eee;}
.modal-wrapper .modal .modal-button .button-item {flex: 1; border-right: 1px solid #eee;}
.modal-wrapper .modal .modal-button .button-item:last-child {border-right: none;}

.modal-wrapper .modal .modal-form {position: relative;}
.modal-wrapper .modal .modal-form .field-element {position: relative; display: flex; align-items: center; width: 100%; max-width: 100%; background-color: #fff; border-bottom: 1px solid #d8d8d8; border-radius: 0; transition: border-color 0.15s; padding: 8px 10px; margin-bottom: 12px;}
.modal-wrapper .modal .modal-form .field-element:last-of-type {margin-bottom: 0;}
.modal-wrapper .modal .modal-form .field-element:focus-within {border-color: #512b6d;}
.modal-wrapper .modal .modal-form .field-element input {width: 100%; height: 100%; border: none; background: transparent; font-size: 14px;}
.modal-wrapper .modal .modal-form .field-element input::placeholder {color: #d8d8d8;}
.modal-wrapper .modal .modal-form .field-element textarea {width: 100%; height: 100%; min-height: 80px; border: none; background: transparent; font-size: 14px; resize: none;}
.modal-wrapper .modal .modal-form .field-element textarea::placeholder {color: #d8d8d8;}
.modal-wrapper .modal .modal-form .prohibit_box {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; font-size: 15px; color: #fff; z-index: 15;}

.modal-wrapper .modal .modal-content .course-list {width: 100%;}
.modal-wrapper .modal .modal-content .course_img {width: 100%;}
.modal-wrapper .modal .modal-content .course_img > img {width: 100%;}
.modal-wrapper .modal.modal-course {max-width: 100%; border-radius: 0;}
.modal-wrapper .modal.modal-course .modal-content {padding: 0;}

#modal-price .warning-txt {color: red;}
#modal-price .form-head {padding: 12px 0; text-align: center; border-bottom: 2px solid #512b6d;}
#modal-price .form-head > span {font-size: 18px; color: red; font-weight: 700;}
#modal-price .form-tit {margin: 20px 0 8px; font-size: 22px; font-weight: 600;}
#modal-price .form-txt {margin: 4px 0; font-size: 16px; font-weight: 400;}
#modal-price .right-warn {text-align: right; color: red;}
#modal-price .etc-list {display: flex; flex-direction: column; gap: 4px;}
#modal-price .etc-list .etc-txt {font-size: 16px; font-weight: 500; color: #000;}
#modal-price .etc-list .etc-txt > span {font-size: 14px; font-weight: 400; color: red;}
#modal-price .etc-list .etc-txt > em {color: #512b6d; font-weight: 700;}
#modal-price .tariff-info {margin-top: 30px; padding-top: 12px; border-top: 1px solid #512b6d;}
#modal-price .tariff-info-item {margin-bottom: 4px;}
#modal-price .tariff-info-item .tit {font-size: 16px; font-weight: 600;}
#modal-price .tariff-info-item .desc {font-size: 16px; font-weight: 400; color: #000;}
#modal-price .tariff-info-item .desc > em {color: #512b6d; font-weight: 700;}
#modal-price .btn-tariff {margin-top: 30px; padding-top: 12px; border-top: 2px solid #eee;}
@media screen and (max-width: 480px) {
    .modal-wrapper .modal#modal-price {max-width: 100%; border-radius: 0;}
    .modal-wrapper .modal#modal-price .modal-header {display: none;}
    .modal-wrapper .modal#modal-price .modal-content {max-height: 100vh; padding: 40px 20px;}
    #modal-price .form-head {padding: 12px 0;}
    #modal-price .form-head > span {font-size: 16px;}
    #modal-price .form-tit {font-size: 18px;}
    #modal-price .etc-list .etc-txt {font-size: 14px;}
    #modal-price .tariff-info-item .tit {font-size: 14px;}
    #modal-price .tariff-info-item .desc {font-size: 14px;}
    .modal-wrapper .btn-close_modal {right: 16px;}
}

/****************************** INDIVIDUAL ******************************/
/* MAIN > 홈 */
.home .section-01 {margin: 0 0 60px 0;}
.home .section-01__banner {}
.home .section-01__banner .swiper-container {}
.home .section-01__banner .swiper-wrapper {}
.home .section-01__banner .swiper-slide {position: relative; width: 100%; height: 850px}
.home .section-01__banner .slide-inner {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.25);}
.home .section-01__banner .slide-inner .main-txt {font-size: 40px; font-weight: 700; color: #fff;}
.home .section-01__banner .slide-inner .sub-txt {font-size: 24px; font-weight: 500; color: #fff; margin-top: 8px;}
.home .section-01__banner .swiper-button {}
.home .section-01__banner .swiper-button .swiper-button-next {}
.home .section-01__banner .swiper-button .swiper-button-prev {}

.home .section-02 {margin: 0 0 60px 0;}
.home .section-02 .item-list-wrap {display: flex; gap: 40px;}
.home .section-02 .item-main {width: 50%;}
.home .section-02 .item-main .item {position: relative; width: 100%; height: 512px; background-color: #ddd; overflow: hidden;}
.home .section-02 .item-main .item .img {height: 100%;}
.home .section-02 .item-main .item .img > img {height: 100%; object-fit: cover; transition: transform 0.35s;}
.home .section-02 .item-main .item:hover .img > img {transform: scale(1.05);}
.home .section-02 .item-main .item .dim {padding: 15px; background-color: rgba(0, 0, 0, 0.4);}
.home .section-02 .item-main .item .desc {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end;}
.home .section-02 .item-main .item .desc img {object-fit: cover;}
.home .section-02 .item-main .item .desc .title {font-size: 17px; color: #fff;}
.home .section-02 .item-main .item .desc .date {font-size: 14px; text-align: right; color: #fff; margin-top: 6px;}
.home .section-02 .item-list {width: 50%; display: flex; flex-wrap: wrap; gap: 20px;}
.home .section-02 .item-list .item {position: relative; width: calc(50% - 10px); height: 249px; background-color: #ddd; overflow: hidden;}
.home .section-02 .item-list .item .img {height: 100%;}
.home .section-02 .item-list .item .img > img {height: 100%; object-fit: cover; transition: transform 0.35s;}
.home .section-02 .item-list .item:hover .img > img {transform: scale(1.05);}
.home .section-02 .item-list .item .dim {padding: 10px; background-color: rgba(0, 0, 0, 0.4);}
.home .section-02 .item-list .item .desc {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end;}
.home .section-02 .item-list .item .desc img {object-fit: cover;}
.home .section-02 .item-list .item .desc .title {font-size: 14px; color: #fff;}
.home .section-02 .item-list .item .desc .date {font-size: 12px; text-align: right; color: #fff; margin-top: 6px;}

.home .section-03 {margin: 0 0 60px 0;}
.home .section-03 .horse-list-wrapper {position: relative;}
.home .section-03 .item-list {}
.home .section-03 .item-list .item {position: relative; height: 185px; background-color: #ddd; overflow: hidden;}
.home .section-03 .item-list .item .img {height: 100%;}
.home .section-03 .item-list .item .img > img {height: 100%; object-fit: cover; transition: transform 0.35s;}
.home .section-03 .item-list .item:hover .img > img {transform: scale(1.05);}
.home .section-03 .item-list .item .dim {opacity: 0; padding: 10px; background-color: rgba(0, 0, 0, 0.4); transition: opacity 0.35s;}
.home .section-03 .item-list .item:hover .dim {opacity: 1;}
.home .section-03 .item-list .item .desc {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end;}
.home .section-03 .item-list .item .desc span {position: relative; font-size: 14px; color: #fff; padding-right: 6px;}
.home .section-03 .item-list .item .desc span:last-child {padding-right: 0;}
.home .section-03 .item-list .item .desc span::after {position: absolute; top: 50%; right: 0; transform: translateY(-50%); content: ''; background-color: #fff; width: 2px; height: 2px; border-radius: 50%;}
.home .section-03 .item-list .item .desc span:last-child::after {width: 0; height: 0; background-color: none;}

/* MAIN > 온보딩 */
.onboarding {}
.onboarding .section-login {padding-top: 160px;}
.onboarding .section-login .corp-logo {width: 200px; margin: 0 auto 20px auto;}
.onboarding .section-login .corp-logo > img {width: 100%;}

.onboarding .section-signup {padding: 80px 0 120px 0;}
.onboarding .section-find {padding: 80px 0 120px 0;}

/* MAIN > 소개 */
.intro {}
.intro .section-01 {position: relative; margin: 0 0 60px 0;}
.intro .section-01 .section-banner-list .banner-item {position: relative; width: 100%; height: calc(100vh - 80px);}
.intro .section-01 .section-banner-list .banner-item.bi-01 {background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url('../img/DJI_0909.jpg') center center no-repeat; background-size: cover; background-attachment: fixed;}
.intro .section-01 .section-banner-list .banner-item.bi-02 {background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url('../img/banner-15.JPG') center center no-repeat; background-size: cover; background-attachment: fixed;}
.intro .section-01 .section-banner-list .banner-item.bi-03 {background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url('../img/banner-17.JPG') center center no-repeat; background-size: cover; background-attachment: fixed;}
.intro .section-01 .section-banner-list .banner-item.bi-04 {background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url('../img/CCC03543.png') center center no-repeat; background-size: cover; background-attachment: fixed;}
.intro .section-01 .section-banner-list .banner-item.bi-05 {background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url('../img/banner-21.JPG') center center no-repeat; background-size: cover; background-attachment: fixed;}
.intro .section-01 .desc {display: flex; flex-direction: column; justify-content: center; align-items: flex-start; height: 100%;}
.intro .section-01 .desc .main-txt {font-size: 32px; color: #fff;}
.intro .section-01 .desc .sub-txt {font-size: 20px; text-align: left; color: #fff; margin-top: 20px;}

.intro .section-02 {margin: 0 0 60px 0;}

/* MAIN > 코스 */
.course {}
.course .section-01 {}
.course .course-list {display: flex; overflow-x: hidden;}
.course .course-list .course-item-banner {width: 25%; height: calc(100vh - 80px); transition: width 0.35s;}
.course .course-list .course-item-banner.cib-01 {background: url('../img/course_banner-01.png') center center no-repeat; background-size: cover;}
.course .course-list .course-item-banner.cib-02 {background: url('../img/course_banner-02.png') center center no-repeat; background-size: cover;}
.course .course-list .course-item-banner.cib-03 {background: url('../img/course_banner-03.png') center center no-repeat; background-size: cover;}
.course .course-list .course-item-banner.cib-04 {background: url('../img/course_banner-05.png') center center no-repeat; background-size: cover;}
.course .course-list .course-item-banner .dim {width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.15); transition: background-color 0.35s;}
.course .course-list .course-item-banner .desc {opacity: 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; padding-top: 160px; transition: opacity 0.55s;}
.course .course-list .course-item-banner .desc .main-txt {font-size: 30px; font-weight: 600; text-align: center; color: #fff;}
.course .course-list .course-item-banner .desc .sub-txt {min-width: 200px; max-width: 400px; font-size: 18px; color: #fff; margin-top: 20px;}
.course .course-list .course-item-banner .btn-course_detail {min-width: 160px; border: 1px solid #fff; background: transparent; color: #fff; padding: 12px 24px; border-radius: 24px; margin-top: 40px; font-size: 17px; font-weight: 500; cursor: pointer; transition: background-color 0.35s, color 0.35s, border-color 0.35s;}
.course .course-list .course-item-banner .btn-course_detail:hover {background-color: #fff; color: #000;}
.course .course-list .course-item-banner:hover {width: 32%;}
.course .course-list .course-item-banner:hover .dim {background-color: rgba(0, 0, 0, 0.55);}
.course .course-list .course-item-banner:hover .desc {opacity: 1;}

/* MAIN > 스토리 */
.story {margin-bottom: 120px;}
.story .section-01 {margin: 60px 0 60px 0;}

/* MAIN > 게시글 목록 & 상세 */
.post {margin-bottom: 120px;}

/* MAIN > 예약 */
.reserve {margin-bottom: 120px;}
.reserve .section-reserve {display: flex; margin: 60px auto 60px auto;}
.reserve .check_price {display: flex; gap: 20px; margin: 30px 0 10px 0;}
.reserve .check_price button {font-size: 24px; font-weight: 900; color: #b360f1; cursor: pointer;}
.reserve .check_price button:hover {}
.reserve .check_price .finger {animation: point 0.65s linear 0s infinite alternate; transform: translateX(0);}
@keyframes point {
	0% {transform: translateX(0);}
	100% {transform: translateX(12px);}
}

/* MODAL - PRICE (요금표) */
.form-tariff {width: 100%;}
.form-tariff .table {margin-bottom: 20px;}
.form-tariff .table .ti {}
.form-tariff .table .ti .tit {font-size: 24px; font-weight: bold;}
.form-tariff .table .th {display: flex; margin-top: 12px; border: 1px solid #d3d3d3;}
.form-tariff .table .th .td {display: inline-flex; justify-content: center; align-items: center; color: #b360f1; font-size: 17px; font-weight: bold; border-right: 1px solid #d3d3d3; padding: 6px 0;}
.form-tariff .table .tb {}
.form-tariff .table .tb .tc {display: flex; border: solid #d3d3d3; border-width: 1px;}
.form-tariff .table .tb .tc {border-top: none;}
.form-tariff .table .tb .tc .td {display: inline-flex; flex-direction: column; justify-content: center; align-items: center; font-size: 17px; border-right: 1px solid #d3d3d3;}
.form-tariff .table .tb .tc .td:first-child {font-weight: bold; text-align: center;}
.form-tariff .table .tb .tc .td:last-child {border-right: none;}
.form-tariff .table .tb .tc .td .tdd {width: 100%; text-align: center; padding: 6px 0; border-bottom: 1px solid #d3d3d3;}
.form-tariff .table .tb .tc .td .tdd:last-child {border-bottom: none;}
.form-tariff .table .td:nth-child(1) {width: 16%;}
.form-tariff .table .td:nth-child(2) {width: 20%;}
.form-tariff .table .td:nth-child(3) {width: 14%;}
.form-tariff .table .td:nth-child(4) {width: 20%;}
.form-tariff .table .td:nth-child(5) {width: 30%;}
.form-tariff .table .tb .tc .td:nth-child(5) .tdd {padding: 6px 16px;}
.form-tariff .table .tf {margin-top: 4px;}
.form-tariff .table .tf span {font-size: 13px; color: #888;}
.form-tariff .fee-info {}
.form-tariff .fee-info .fi-tit {font-size: 14px; color: #333;}
.form-tariff .fee-info .fi-item {font-size: 14px; color: red;}
@media screen and (max-width: 480px) {
}
/* MAIN > 마필매매 목록 & 상세*/
.shop {margin-bottom: 120px;}
.shop .section-list {margin: 60px 0 60px 0;}

.shop .section-detail {margin: 60px 0 60px 0;}
.shop .section-detail .product {position: relative; display: flex; height: auto;}
.shop .section-detail .product .info {width: 60%; flex-shrink: 0; margin-right: 60px;}
.shop .section-detail .product .info #product {}
.shop .section-detail .product .info #product .item-list {}
.shop .section-detail .product .info #product .item-list li {}
.shop .section-detail .product .info #product .item-list li img {height: 480px; object-fit: contain;}
.shop .section-detail .product .info #thumbnail-list {margin-top: 12px; padding: 0 80px;}
.shop .section-detail .product .info #thumbnail-list li {cursor: pointer;}
.shop .section-detail .product .info #thumbnail-list li.swiper-slide-thumb-active {border-bottom: 2px solid #512b6d;}
.shop .section-detail .product .info #thumbnail-list li img {height: 80px; object-fit: cover;}
.shop .section-detail .product .info .info-detail {margin-top: 60px;}
.shop .section-detail .product .info .info-detail .info-title {display: flex; justify-content: space-between;}
.shop .section-detail .product .info .info-detail .info-title h4 {font-size: 20px; font-weight: 700; color: #000;}
.shop .section-detail .product .info .info-detail .info-content {display: flex; justify-content: space-between; flex-wrap: wrap; gap: 25px 20px; background-color: #f5eff5; border-radius: 4px; padding: 30px; margin-top: 30px;}
.shop .section-detail .product .info .info-detail .info-content .item {display: flex; flex-direction: column; width: calc((100% / 4) - 15px);}
.shop .section-detail .product .info .info-detail .info-content .item .title {font-size: 16px; color: #888;}
.shop .section-detail .product .info .info-detail .info-content .item .desc {font-size: 16px; font-weight: 500; color: #000; margin-top: 8px;}

.shop .section-detail .product .summary {position: sticky; top: 140px; align-self: flex-start; width: 40%; max-width: 320px; flex-shrink: 0; padding-top: 10px;}
.shop .section-detail .product .summary .summary-content {}
.shop .section-detail .product .summary .summary-content .item {display: flex; justify-content: space-between; margin-bottom: 8px;}
.shop .section-detail .product .summary .summary-content .title {flex-shrink: 0; width: 90px; font-size: 18px; font-weight: 700;}
.shop .section-detail .product .summary .summary-content .desc {font-size: 18px;}
.shop .section-detail .product .summary .summary-content .price {display: flex; justify-content: space-between; padding: 12px 0; border: solid #eee; border-width: 1px 0 1px 0;}
.shop .section-detail .product .summary .summary-content .note {background-color: #eee; min-height: 120px; border-radius: 2px; padding: 12px; margin-top: 20px;}
.shop .section-detail .product .summary .summary-button {}

/* MAIN > 게시판 목록 & 상세*/
.notice {margin-bottom: 120px;}
.notice .section-01 {margin: 60px 0 60px 0;}

/* COMMON*/
.common h3 {font-size: 48px; font-weight: 700; line-height: 1.44;}
.common h4 {font-size: 36px; font-weight: 500; line-height: 1.34;}
.common h4 em {color: #5B7C5F; font-weight: 500;}
.common h5 {font-size: 28px; font-weight: 500; line-height: 1.22;}
 
.common #s01 .desc {font-size: 20px; line-height: 1.44; margin-top: 40px;}
.common #s01 .buttons {display: flex; margin-top: 40px;}
.common #s01 .buttons button {cursor: default; display: inline-flex; justify-content: center; align-items: center; padding: 8px 16px; border-radius: 8px; background-color: #5B7C5F; color: #fff; font-size: 16px;}
.common #s01 .buttons button:not(:last-child) {margin-right: 8px;}
 
.common #s02 {padding: 80px 0 80px 0; background-color: #e5e5e5;}
.common #s02 h4 {font-size: 24px; font-weight: 500;}
.common #s02 h4 em {position: relative; font-weight: 700; color: #512b6d;}
.common #s02 h4 em::after {content: ""; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); background-color: #512b6d; width: 6px; height: 6px; border-radius: 50%;}
.common #s02 .indicate {display: flex; margin-top: 40px;}
.common #s02 .indicate .targets {width: 100%;}
.common #s02 .indicate .targets .target {position: relative; font-size: 17px; font-weight: 500; padding-left: 12px;}
.common #s02 .indicate .targets .target::after {content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 4px; height: 80%; background-color: #512b6d;}
.common #s02 .indicate .targets .target:not(:last-child) {margin-bottom: 12px;}
.common #s02 .indicate .graph {width: 50%; display: flex;}
.common #s02 .indicate .graph .labels {width: 50px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: space-between;}
.common #s02 .indicate .graph .labels span {font-size: 17px; font-weight: 500; text-align: center;}
.common #s02 .indicate .graph .chart {width: 100%; display: flex; justify-content: flex-start; align-items: flex-end; margin-left: 20px;}
.common #s02 .indicate .graph .chart .chart-item {position: relative; display: flex; flex-direction: column-reverse; justify-content: flex-start; width: 50px; height: 0; transform: scale(1); margin-right: 12px; opacity: 1; transition: transform 0.35s, height 0.55s, opacity 0.35s;}
.common #s02 .indicate .graph .chart .chart-item.active {transform: scale(1.15);}
.common #s02 .indicate .graph .chart .chart-item:not(.active) {opacity: 0.85;}
.common #s02 .indicate .graph .chart .chart-item > div {width: 100%; height: 10px;}
.common #s02 .indicate .graph .chart .chart-item > div.block-1 {background-color: #5B7C5F; opacity: 1;}
.common #s02 .indicate .graph .chart .chart-item > div.block-2 {background-color: #5B7C5F; opacity: 0.8;}
.common #s02 .indicate .graph .chart .chart-item > div.block-3 {background-color: #5B7C5F; opacity: 0.6;}
.common #s02 .indicate .graph .chart .chart-item > div.block-4 {background-color: #5B7C5F; opacity: 0.4;}
.common #s02 .indicate .graph .chart .chart-item > div.block-5 {background-color: #5B7C5F; opacity: 0.2;}
.common #s02 .indicate .graph .chart .chart-item > div.block-6 {background-color: #5B7C5F; opacity: 0.1;}
 
.common #s03 {padding: 80px 0 160px 0;}
.common #s03 .videos {margin-top: 60px;}
.common #s03 .videos .video-tit {font-size: 28px; font-weight: 500; color: #5B7C5F; text-align: center;}
.common #s03 .videos .video {width: 720px; height: 480px; margin: 20px auto 0 auto; border: 1px solid #ddd;}
 
.common #s04 {background-color: #e5e5e5;}
.common #s04 .item-list {display: flex; flex-direction: column; gap: 40px; margin-top: 60px;}
.common #s04 .item-list .item {display: flex; align-items: center; gap: 60px;}
.common #s04 .item-list .item .img {}
.common #s04 .item-list .item .img img {}
.common #s04 .item-list .item .content {}
.common #s04 .item-list .item .content h5 {font-size: 28px; font-weight: 600;}
.common #s04 .item-list .item .content h5 em {font-weight: 700; color: #5B7C5F; margin-right: 6px;}
.common #s04 .item-list .item .content .desc {font-size: 20px; margin-top: 12px;}
 
.common #s05 {}
.common #s05 .tab-cont {margin-top: 80px;}
.common #s05 .tab-cont .tab-header {display: flex; width: 100%; background-color: #f8f8fd; border-radius: 10px;}
.common #s05 .tab-cont .tab-header .btn-tab {flex: 1; padding: 30px 42px; cursor: pointer; border: 2px solid #f8f8fd;}
.common #s05 .tab-cont .tab-header .btn-tab .tit-k {font-size: 28px; letter-spacing: -1.12px; color: #23232d; font-weight: 700;}
.common #s05 .tab-cont .tab-header .btn-tab .tit-e {font-size: 20px; color: #23232d; font-weight: 700; margin-top: 6px;}
.common #s05 .tab-cont .tab-header .btn-tab.active {background-color: #fff; border: 2px solid #5B7C5F; border-radius: 10px; box-shadow: 0 2px 15px -4px #29236be2; z-index: 5;}
.common #s05 .tab-cont .tab-header .btn-tab.active .tit-k {color: #5B7C5F;}
.common #s05 .tab-cont .tab-header .btn-tab.active .tit-e {color: #5B7C5F;}
.common #s05 .tab-cont .tab-body {margin-top: 80px;}
.common #s05 .tab-cont .tab-body .tab {display: none;}
.common #s05 .tab-cont .tab-body .tab.active {display: flex;}
.common #s05 .tab-cont .tab-body .tab .tc-img {flex-shrink: 0; width: 360px;}
.common #s05 .tab-cont .tab-body .tab .tc-img img {width: 360px; height: 273px;}
.common #s05 .tab-cont .tab-body .tab .tc-info {padding: 65px 0 0 76px;}
.common #s05 .tab-cont .tab-body .tab .tc-info .ti-tit {display: flex; align-items: center;}
.common #s05 .tab-cont .tab-body .tab .tc-info .ti-tit img {width: 38px; height: 38px;}
.common #s05 .tab-cont .tab-body .tab .tc-info .ti-tit .tm {font-size: 28px; letter-spacing: -1.12px; color: #5B7C5F; font-weight: 800; margin-left: 8px;}
.common #s05 .tab-cont .tab-body .tab .tc-info .ti-tit .ts {font-size: 28px; letter-spacing: -1.12px; color: #5B7C5F; font-weight: 700; margin-left: 12px;}
.common #s05 .tab-cont .tab-body .tab .tc-info .ti-desc {font-size: 20px; letter-spacing: -0.8px; color: #24303d; line-height: 30px; font-weight: 700; margin-top: 46px;}
 
.common #s06 {background-color: #e5e5e5;}
.common #s06 {padding: 115px 0 95px 0;}
.common #s06 .sec-inner {display: flex; justify-content: space-between; align-items: flex-start; gap: 120px;}
.common #s06 .content .title {}
.common #s06 .content .service {margin-top: 30px;}
.common #s06 .content .service p {font-size: 20px;}
.common #s06 .img {width: 400px; flex-shrink: 0;}
.common #s06 .img > img {}
 
.common #s07 {}
.common #s07 .top {position: relative; display: flex; justify-content: space-between; gap: 24px;}
.common #s07 .top .content {}
.common #s07 .top .content .title {}
.common #s07 .top .content .title > img {}
.common #s07 .top .content .service {font-size: 18px; max-width: 600px; margin-top: 24px;}
.common #s07 .top .content .service > p {}
.common #s07 .top .img {}
.common #s07 .top .img > img {position: absolute; top: 0; right: -50px;}
.common #s07 .bottom {display: flex; flex-direction: column; gap: 20px; margin-top: 60px;}
.common #s07 .bottom .tb {display: flex; align-items: center;}
.common #s07 .bottom .tb > span {font-size: 1.25em; background-color: #5B7C5F; border-radius: 1px; padding: 4px 12px; box-sizing: border-box; color: #fff; margin-right: 10px;}
.common #s07 .bottom .tb > p {font-size: 16px;}
.common #s07 .bottom .tb > p > em {color: #5B7C5F; font-weight: 700;}
 
.common #s08 {background-color: #e5e5e5;}
.common #s08 .top {display: flex; justify-content: space-between; gap: 40px;}
.common #s08 .top .service {width: calc(100% / 3); height: 360px; padding: 24px; background-color: #fff; border-radius: 24px; box-shadow: 6px 8px 8px 0 rgb(61 95 158 / 10%); text-align: center;}
.common #s08 .top .service > img {width: 75px; border-radius: 50%; box-shadow: 0px 10px 20px 5px rgba(61, 95, 158, 0.1); margin-bottom: 20px;}
.common #s08 .top .service > p {font-size: 18px; color: #888; margin-top: 20px;}
.common #s08 .bottom {text-align: center;}
.common #s08 .bottom > p {margin-top: 24px; font-size: 18px;}
 
.common #s09 {}
.common #s09 .service {width: 100%; padding: 32px; background-color: #fff; border-radius: 15px; box-shadow: 0px 2px 6px 2px rgb(0 0 0 / 10%);}
.common #s09 .service .content .text {display: flex; flex-direction: column; gap: 12px; margin-top: 30px;}
.common #s09 .service .content .text > p {position: relative; padding-left: 20px; font-size: 16px;}
.common #s09 .service .content .text > p:before {position: absolute; top: 50%; left: 0; transform: translateY(-50%); content: ''; width: 3px; height: 12px; background-color: #5B7C5F; border-radius: 1px;}
 
/* 가격표 */
.tariff {width: 100%; border-collapse: collapse; margin-bottom: 30px;}
.tariff caption {font-size: 22px; font-weight: 900; text-align: left; color: #a356dc; margin-bottom: 12px;}
.tariff thead {}
.tariff thead tr {}
.tariff thead tr th {border: 1px solid #777; padding: 6px 0; font-size: 17px; font-weight: 900; text-align: center; background-color: #eee;}
.tariff tbody {}
.tariff tbody tr {}
.tariff tbody tr td {border: 1px solid #777; padding: 6px 0; font-size: 17px; font-weight: 500; text-align: center;}

@media screen and (max-width: 768px) {
    .tariff thead tr th {font-size: 13px;}
    .tariff tbody tr td {font-size: 13px;}
}

.warn_box {}
.warn_box > h5 {font-size: 14px; font-weight: 700; color: red;}
.warn_box > p {margin-top: 8px; font-size: 12px; font-weight: 400; color: red; white-space: pre-line;}

/****************************** LIBRARY ******************************/
.swiper-button-prev, .swiper-button-next {}
.swiper-button-prev {width: 50px; height: 50px; left: -60px; background-image: url('../img/icon-prev-white.png'); background-size: cover;}
.swiper-button-prev:hover {background-image: url('../img/icon-prev-black.png');}
.swiper-button-prev.swiper-button-disabled {opacity: 1;}
.swiper-button-next {width: 50px; height: 50px; right: -60px; background-image: url('../img/icon-next-white.png'); background-size: cover;}
.swiper-button-next:hover {background-image: url('../img/icon-next-black.png');}
.swiper-button-next.swiper-button-disabled {opacity: 1;}
.swiper-button-prev:focus, .swiper-button-next:focus {outline: none;}
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {bottom: 20px;}
.swiper-pagination-bullet-active {background: #fff;}
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {content: '';}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {content: '';}

@media screen and (max-width: 768px) {
    /****************************** COMMON ******************************/
    .modal-wrapper {width: 100%;}
    
    /****************************** INDIVIDUAL ******************************/
    /* HEADER */
    header {z-index: 110;}
    header .nav .gnb {display: none; margin-right: 0;}
    header .nav .gnb {position: relative; display: flex; flex-direction: column; align-items: flex-start; position: fixed; top: 0; right: -45%; background-color: rgba(0, 0, 0, 0.75); width: 45%; height: 100vh; padding: 60px 0; transition: right 0.55s; z-index: 105;}
    header .nav .gnb.active {right: 0;}
    header .nav .gnb .menu {margin-left: 40px; margin-bottom: 30px;}
    header .nav .gnb .menu > a {font-weight: 700; color: #fff;}
    header .nav .gnb .mb-account a {color: #fff;}
    header .nav .gnb.active .btn-sidebar_close {display: block; position: absolute; top: 20px; right: 20px;}
    header .account {display: none;}
    header .nav .gnb .mb-account {margin: 40px 0 0 40px;}
    header .nav .gnb .mb-account .status-login {display: block;}
    header .nav .gnb .mb-account .status-logout {display: none;}
    header .nav .gnb .mb-account.active .status-login {display: none;}
    header .nav .gnb .mb-account.active .status-logout {display: block;}
    header .nav .gnb .mb-account a {font-size: 16px;}

    header .nav .gnb .menu.depth-2 .depth-tit {font-weight: 700;}
    header .nav .gnb .menu.depth-2 .depth-wrap {top: 0; display: none; position: relative; left: unset; transform: unset; visibility: visible; opacity: 1;}
    header .nav .gnb .menu.depth-2.active .depth-wrap {display: block;}
    header .nav .gnb .menu.depth-2 .depth-list {top: 0; width: auto; background-color: transparent !important; align-items: flex-start; padding: 20px 12px 0 12px;}
    header .nav .gnb .menu.depth-2 .depth-list .menu-2 a {display: block; font-size: 16px; font-weight: 500; margin-bottom: 12px;}
    header .nav .gnb .menu.depth-2 .depth-list .menu-2:last-child a {margin-bottom: 0;}

    header .btn-sidebar {display: block;}
    header .btn-sidebar i {font-size: 22px;}
    header .live-button {display: flex;}
    
    .course .course-list {flex-direction: column; height: calc(100vh - 60px);}
    .course .course-list .course-item-banner {width: 100%; height: 25%; transition: height 0.35s}
    .course .course-list .course-item-banner .desc {justify-content: center; align-items: flex-start; opacity: 1; padding: 0 30px 0 30px;}
    .course .course-list .course-item-banner .desc .main-txt {font-size: 25px; text-align: left;}
    .course .course-list .course-item-banner .desc .sub-txt {font-size: 16px; min-width: auto; max-width: 100%; height: 0; visibility: hidden; opacity: 0; transition: height 0.35s, opacity 0.35s;}
    .course .course-list .course-item-banner .btn-course_detail {min-width: 140px; font-size: 16px; padding: 8px 12px; margin-top: 12px; height: 0; visibility: hidden; opacity: 0; transition: height 0.35s, opacity 0.35s;}
    .course .course-list .course-item-banner:hover {width: unset;}
    .course .course-list .course-item-banner:hover .dim {background-color: unset;}
    .course .course-list .course-item-banner:hover .desc {opacity: unset;}
    .course .course-list .course-item-banner:hover .btn-course_detail {visibility: visible; opacity: 1; height: auto;}
    .course .course-list .course-item-banner.active {height: 100%;}
    .course .course-list .course-item-banner.active .sub-txt {visibility: visible; opacity: 1; height: auto;}
    .course .course-list .course-item-banner.active .dim {background-color: rgba(0, 0, 0, 0.55);}
}

@media screen and (max-width: 480px) {
    /****************************** COMMON ******************************/
    .container {padding: 0 24px;}

    /* HEADER */
    header {height: 60px; transition: box-shadow 0.35s, background-color 0.35s;}
    header .logo {width: 60px; left: 24px;}

    /* FOOTER */
    footer {padding: 30px 0 20px 0;}
    footer .footer-inner {font-size: 13px;}
    footer .footer-inner .corp-info {flex-direction: column;}
    footer .footer-inner .corp-info .account {text-align: left;}
    footer .footer-inner .corp-info .sns {margin-top: 8px;}
    footer .footer-inner .copyright {text-align: center; margin-top: 20px;}

    /* MAIN */
    #main {padding-top: 0; min-height: auto;}
    #main section .section-title h3 {font-size: 20px;}

    /* SECTION MAP */
    .section-map .info #map {width: 100%;}
    .section-map .info .guide {width: 100%;}
    .section-map .info .guide .item .title {font-size: 16px;}
    .section-map .info .guide .item .desc {font-size: 16px;}

    /* ADVERTISEMENT */
    .ad-banner {margin: 120px auto 12px auto;}
    .ad-banner .item-list {gap: 0;}
    .ad-banner .item-list .item {display: none; width: 100%; height: 160px;}
    .ad-banner .item-list .item.active {display: block;}
    .ad-banner .item-list .item .img.pc {display: none;}
    .ad-banner .item-list .item .img.mobile {display: block;}

    /* FORM */
    .form-wrapper {width: 100%; padding: 0 24px;}
    .form-wrapper .form h2 {font-size: 28px; padding-bottom: 20px;}
    .form-wrapper .form h3 {font-size: 20px;}
    .form-wrapper .form h4 {font-size: 14px;}

    /* POST (일반 게시글) */
    .post {margin: 80px 0 80px 0;}
    .post .post-content {min-height: 200px;}

    /****************************** INDIVIDUAL ******************************/
    /* MAIN > 온보딩 */
    .onboarding {margin: 80px 0 140px 0;}
    .onboarding .section-login {padding-top: 40px;}
    .onboarding .section-login .corp-logo {width: 140px;}
    .onboarding .section-signup {padding: 40px 0 100px 0;}
    .onboarding .section-find {padding: 40px 0 100px 0;}

    /* MAIN - 홈 */
    .home {margin: 60px 0 20px 0;}
    .home .section-01__banner .swiper-slide {height: calc(100vh - 60px);}
    @supports (-webkit-touch-callout: none) { 
        .home .section-01__banner .swiper-slide {height: -webkit-fill-available;}
    }
    .home .section-01__banner .slide-inner {padding-top: 70px;}
    .home .section-01__banner .slide-inner .main-txt {font-size: 24px;}
    .home .section-01__banner .slide-inner .sub-txt {font-size: 16px;}
    .home .section-02 .item-list-wrap {flex-direction: column;}
    .home .section-02 .item-main {width: 100%;}
    .home .section-02 .item-main .item {height: 262px;}
    .home .section-02 .item-main .item .dim {padding: 12px;}
    .home .section-02 .item-main .item .desc .title {font-size: 15px;}
    .home .section-02 .item-main .item .desc .date {font-size: 13px; margin-top: 2px;}
    .home .section-02 .item-list {width: 100%;}
    .home .section-02 .item-list .item {height: 150px;}
    .home .section-02 .item-list .item .dim {padding: 8px;}
    .home .section-02 .item-list .item .desc .date {display: none;}
    .home .section-02 .item-list .item .desc .title {font-size: 13px;}
    .home .section-03 .item-list .item .dim {opacity: 1;}
    
    /* MAIN - 소개 */
    .intro {margin: 60px 0 20px 0;}
    .intro .section-01 .section-banner-list .banner-item {height: calc(100vh - 60px);}
    @supports (-webkit-touch-callout: none) { 
        .intro .section-01 .section-banner-list .banner-item {height: -webkit-fill-available;}
    }
    .intro .section-01 .desc {align-items: center; text-align: center; padding-top: 60px; height: calc(100vh - 60px);}
    .intro .section-01 .desc .main-txt {font-size: 24px;}
    .intro .section-01 .desc .sub-txt {font-size: 16px; text-align: center;}
    .intro .section-01 .section-banner-list .banner-item.bi-01 {background-attachment: unset;}
    .intro .section-01 .section-banner-list .banner-item.bi-02 {background-attachment: unset;}
    .intro .section-01 .section-banner-list .banner-item.bi-03 {background-attachment: unset;}
    .intro .section-01 .section-banner-list .banner-item.bi-04 {background-attachment: unset;}
    .intro .section-01 .section-banner-list .banner-item.bi-05 {background-attachment: unset;}
    .intro .section-01 .section-banner-list .banner-item.bi-06 {background-attachment: unset;}

    /* MAIN > 스토리 */
    .story {margin: 80px 0 80px 0;}
    .story .section-01 {margin: 20px 0 20px 0;}

    /* MAIN > 마필매매 목록 & 상세*/
    .shop {margin: 80px 0 80px 0;}
    .shop .section-list {margin: 20px 0 20px 0;}

    /* MAIN > 마필매매 목록 & 상세*/
    .shop .section-detail .product {flex-direction: column;}
    .shop .section-detail .product .info {width: 100%;}
    .shop .section-detail .product .info #thumbnail-list {padding: 0 20px;}
    .shop .section-detail .product .summary {position: relative; top: auto; align-self: unset; width: 100%; max-width: unset; padding-top: 0;}
    .shop .section-detail .product .summary .summary-content .item {display: none;}
    .shop .section-detail .product .summary .summary-content .price {margin-top: 30px; padding: 8px 12px;}
    
    .shop .section-detail .product .info .info-detail .info-content {gap: 20px; padding: 20px; margin-top: 20px;}
    .shop .section-detail .product .info .info-detail .info-content .item {width: calc((100% / 3) - 14px);}
    .shop .section-detail .product .info .info-detail .info-content .item .title {font-size: 15px;}
    .shop .section-detail .product .info .info-detail .info-content .item .desc {font-size: 15px; margin-top: 6px;}
    .shop .section-detail .product .info #product .item-list li img {height: 320px;}
    .shop .section-detail .product .info #thumbnail-list li img {height: 60px;}
    /* MAIN > 게시판 목록 & 상세*/
    .notice {margin: 80px 0 80px 0;}
    .notice .section-01 {margin: 20px 0 20px 0;}

    /* MAIN > 코스 */
    /* .course .course-list {flex-direction: column; height: calc(200vh);}
    .course .course-list .course-item-banner {width: 100%; height: 25%; transition: height 0.35s}
    .course .course-list .course-item-banner .desc {justify-content: center; align-items: flex-start; opacity: 1; padding: 0 30px 0 30px;}
    .course .course-list .course-item-banner .desc .main-txt {font-size: 25px; text-align: left;}
    .course .course-list .course-item-banner .desc .sub-txt {font-size: 16px; min-width: auto; max-width: 100%; visibility: visible; opacity: 1;}
    .course .course-list .course-item-banner:hover {width: unset;}
    .course .course-list .course-item-banner:hover .dim {}
    .course .course-list .course-item-banner:hover .desc {opacity: unset;}
    .course .course-list .course-item-banner .dim {background-color: rgba(0, 0, 0, 0.55);} */

    .course {margin: 60px 0 20px 0;}
    /* .course .course-list {flex-direction: column; height: calc(100vh - 60px);}
    .course .course-list .course-item-banner {width: 100%; height: 25%; transition: height 0.35s}
    .course .course-list .course-item-banner .desc {justify-content: center; align-items: flex-start; opacity: 1; padding: 0 30px 0 30px;}
    .course .course-list .course-item-banner .desc .main-txt {font-size: 25px; text-align: left;}
    .course .course-list .course-item-banner .desc .sub-txt {font-size: 16px; min-width: auto; max-width: 100%; height: 0; visibility: hidden; opacity: 0; transition: height 0.35s, opacity 0.35s;}
    .course .course-list .course-item-banner .btn-course_detail {min-width: 140px; font-size: 16px; padding: 8px 12px; margin-top: 12px; height: 0; visibility: hidden; opacity: 0; transition: height 0.35s, opacity 0.35s;}
    .course .course-list .course-item-banner:hover {width: unset;}
    .course .course-list .course-item-banner:hover .dim {background-color: unset;}
    .course .course-list .course-item-banner:hover .desc {opacity: unset;}
    .course .course-list .course-item-banner:hover .btn-course_detail {visibility: visible; opacity: 1; height: auto;}
    .course .course-list .course-item-banner.active {height: 100%;}
    .course .course-list .course-item-banner.active .sub-txt {visibility: visible; opacity: 1; height: auto;}
    .course .course-list .course-item-banner.active .dim {background-color: rgba(0, 0, 0, 0.55);} */

    /* MAIN > 예약 */
    .reserve {margin: 80px 0 80px 0;}
    .reserve .section-reserve .form-wrapper {padding: 0; margin-top: 40px;}
    .reserve .section-reserve {margin: 20px 0 20px 0; flex-direction: column;}
    .reserve .section-reserve .form-tariff {width: 100%; margin-right: 0;}
    .reserve .section-reserve .form-tariff .table .ti .tit {font-size: 20px;}
    .reserve .section-reserve .form-tariff .table .th {margin-top: 8px;}
    .reserve .section-reserve .form-tariff .table .th .td {font-size: 14px;}
    .reserve .section-reserve .form-tariff .table .tb .tc .td {font-size: 14px;}
    .reserve .section-reserve .form-tariff .fee-info .fi-tit {font-size: 13px;}
    .reserve .section-reserve .form-tariff .fee-info .fi-item {font-size: 13px;}
    .reserve .section-reserve .form-tariff .table .td:nth-child(1) {width: 16%;}
    .reserve .section-reserve .form-tariff .table .td:nth-child(2) {width: 24%;}
    .reserve .section-reserve .form-tariff .table .td:nth-child(3) {width: 14%;}
    .reserve .section-reserve .form-tariff .table .td:nth-child(4) {width: 20%;}
    .reserve .section-reserve .form-tariff .table .td:nth-child(5) {width: 26%;}
    .reserve .section-reserve .form-tariff .table .tb .tc .td:nth-child(5) .tdd {padding: 6px 8px;}

    /* COMMON */
    .common h3 {font-size: 36px;}
    .common h4 {font-size: 28px;}
    .common h5 {font-size: 22px;}
    
    .common #s01 {padding: 80px 16px;}
    .common #s01 .desc {font-size: 17px;}
    .common #s01 .buttons {flex-wrap: wrap; gap: 12px;}
    .common #s01 .buttons button {width: calc((100% / 2) - 6px);}
    .common #s01 .buttons button:not(:last-child) {margin-right: 0;}
    .common #s02 {padding: 60px 0;}
    .common #s02 h4 {font-size: 28px; text-align: center;}
    .common #s02 .indicate {flex-direction: column;}
    .common #s02 .indicate .targets {width: 100%;}
    .common #s02 .indicate .targets .target {padding-left: 12px; font-size: 17px;}
    .common #s02 .indicate .targets .target:not(:last-child) {margin-bottom: 12px;}
    .common #s02 .indicate .targets .target:hover::after {left: -10px;}
    .common #s02 .indicate .graph {width: 100%; margin-top: 30px;}
    .common #s02 .indicate .graph .chart .chart-item {width: calc(100% / 5);}
    .common #s02 .indicate .graph .chart .chart-item:last-child {margin-right: 0;}
    .common #s03 {padding: 80px 16px;}
    .common #s03 h4 {font-size: 32px; text-align: center;}
    .common #s03 .videos .video-tit {font-size: 24px;}
    .common #s03 .videos .video {width: 100%; height: 200px;}
    
    .common #s04 .item-list .item {flex-direction: column; gap: 20px; align-items: flex-start;}
    .common #s04 .item-list .item .content h5 {font-size: 22px;}
    .common #s04 .item-list .item .content h5 em {margin-right: 0;}
    .common #s04 .item-list .item .content .desc {font-size: 17px;}

    .common #s05 .tab-cont {margin-top: 40px;}
    .common #s05 .tab-cont .tab-header {flex-wrap: wrap;}
    .common #s05 .tab-cont .tab-header .btn-tab {width: 50%;}
    .common #s05 .tab-cont .tab-body {margin-top: 60px;}
    .common #s05 .tab-cont .tab-body .tab {flex-direction: column;}
    .common #s05 .tab-cont .tab-body .tab .tc-img {width: 100%;}
    .common #s05 .tab-cont .tab-body .tab .tc-img img {width: 100%;}
    .common #s05 .tab-cont .tab-body .tab .tc-info {padding: 20px 0;}
    .common #s05 .tab-cont .tab-body .tab .tc-info .ti-tit .tm {margin-left: 0px; font-size: 24px;}
    .common #s05 .tab-cont .tab-body .tab .tc-info .ti-tit .ts {font-size: 24px;}
    .common #s05 .tab-cont .tab-body .tab .tc-info .ti-desc {margin-top: 20px; font-size: 18px;}
    .common #s05 .tab-cont .tab-header .btn-tab .tit-k {font-size: 25px;}

    .common #s06 .sec-inner {flex-direction: column; gap: 30px;}
    .common #s06 .content .service p {font-size: 18px;}
    .common #s06 .img {width: 100%;}

    .common #s07 .top .img > img {display: none;}

    .common #s07 .top .content .service > p {font-size: 18px;}
    .common #s07 .bottom {margin-top: 40px;}
    .common #s07 .bottom .tb {align-items: flex-start;}
    .common #s07 .bottom .tb > span {position: relative; top: 3px;}

    .common #s08 .top {flex-direction: column;}
    .common #s08 .top .service {width: 100%;}
    .common #s09 .service .content .text > p {padding-left: 12px;}
    .common #s09 .service .content .text > p:before {height: 80%;}
    
    /* LIBRARY */
    .section-map .info {flex-direction: column;}
    .swiper-button-prev {display: none;}
    .swiper-button-next {display: none;}
}

input[type=password] {font-family: 'Noto Sans KR', sans-serif;}