@charset "utf-8";

/*
 * File : main.css
 */

/* **************************************** *
 * LAYOUT
 * **************************************** */
.page-home:before {content:''; display:block; position:absolute; left:0; top:0; width:100%; height:456rem; border-radius:0 0 160rem 0; background: transparent linear-gradient(104deg, #72BE59 0%, #009E9A 48%, #004EA1 100%) 0% 0% no-repeat padding-box;}
[data-theme="dark"]:before, .page-home.dark-mode:before {background:var(--body-bg)}
#container.home {background-color:var(--body-bg)}

.icon-interest {display:inline-block; vertical-align:middle; border:none; padding:0; background:none; cursor:pointer;}
.icon-interest:before {font-family: 'bluewave';content: '\e911';font-weight: normal;font-size: 16rem;color: #FFBD39;}
.icon-interest-off {display:inline-block; vertical-align:middle;border:none; padding:0; background:none; cursor:pointer;}
.icon-interest-off:before {font-family: 'bluewave';content: '\e911';font-weight: normal;font-size: 16rem;color: #cccccc;}

/* SECTION */
.main-section { padding:120rem 0; }

.main-component-box-section {display:flex; gap:30rem;}
.main-component-box-section + .main-component-box-section {margin-top:60rem;}
.main-component-box-section > * {flex-grow:1}
.main-top + .main-component-box-section {margin-top:40rem;}
.main-component-box {background: var(--card-bg);border:1rem solid var(--border-color);border-radius: 20rem;width:100%;overflow:hidden;}
.main-component-box__item a {position:relative;display:flex;align-items: center;padding: 24rem;border-bottom:1rem solid var(--border-color);}
.main-component-box__item:nth-child(1) .main-component-box__num {color:var(--primary-text-color);}
.main-component-box__item:last-child a {margin-bottom:-1rem;}
.main-component-box__head {position:relative;display: flex;align-items: center;border-bottom: 1rem solid var(--border-color);padding: 24rem 28rem;background: var(--card-bg);}
.main-component-box__title {font-size: 22rem;font-weight: 500;line-height: 1.26;}
.main-component-box__title i {margin-right:6rem; }
.main-component-box__head .btn-view {margin-left:auto; font-size:15rem; color:var(--basic-text-color);}
.main-component-box__head .btn-view span:after {content:'\e909'; font-size:10rem; color:var(--basic-text-color);}
.main-component-box__num {display: block;width: 30rem;font-style: normal;font-size: 18rem;font-weight: 600;color: var(--gray-text-color);flex-shrink: 0;}
.main-component-box__contents {flex: 1;overflow: hidden;}
.main-component-box__contents p {font-size:18rem;display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.main-component-box__contents .meta {display:flex;align-items: center;font-size:14rem;color:var(--gray-text-color);margin-top: 6rem;}
.main-component-box__contents .meta li {flex-shrink: 0;}
.main-component-box__contents .meta li:first-child time {position:relative;padding-left:12rem; margin-left:12rem;}
.main-component-box__contents .meta li:first-child time:before {width:1rem;height:8rem;background:var(--border-color);content:'';display:block;position:absolute;left:0;top: calc(50% + 1rem);transform:translateY(-50%);}
.main-component-box__contents .meta li:last-child {margin-left:auto;}
.main-component-box__contents .meta li:last-child span {display:inline-block; font-size:0;}
.main-component-box__contents .meta li:last-child span + span {margin-left:12rem;}
.main-component-box__contents .meta li:last-child span i {position:relative;padding-left:20rem;font-size:14rem;font-style:normal;display: inline-block;}
.main-component-box__contents .meta li:last-child span i:before {font-family:'bluewave';font-size: 15rem;font-weight:normal;color:#B1B1B1;display:block; position:absolute; left:0; top:50%; transform:translateY(-50%);}
.main-component-box__contents .meta li:last-child span.comment i:before {content:'\e900'; font-size:16rem;}
.main-component-box__contents .meta li:last-child span.view i:before {content: '\e936'; font-size: 16rem; color: #B1B1B1;}
.main-component-box__contents .meta .like i:before {content:'\e901';}
.main-component-box__contents .meta li:last-child span.active i:before {color:#FC7474;}
.item-link { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0;}
html.desktop .main-component-box__item a:hover .main-component-box__contents p {font-weight:500; text-decoration:underline;}

.title-icon {display:inline-block;width:20rem;height:20rem;background-repeat:no-repeat; background-size:100% auto;}
.icon-crown { background-image:url(../images/icon/icon-crown.png);}
.icon-thumbs-up { background-image:url(../images/icon/icon-thumbs-up.png);}
.icon-clock { background-image:url(../images/icon/icon-clock.png);}
.icon-write { background-image:url(../images/icon/icon-write.png);}

.icon-symbol {display: inline-block;vertical-align: middle;margin-right: 5rem;margin-top: 1rem;width:12rem;height:13rem;background:url(../images/icon/icon-symbol.svg) no-repeat center;}
.icon-commissioner {display: inline-block;vertical-align: middle;margin-left: 5rem;margin-top: 2rem;padding: 3rem 5rem 4rem;color:#fff;font-size: 12rem;font-style: normal;line-height: 1;border-radius: 3rem;background: linear-gradient(90deg, rgba(0,78,161,1) 0%, rgba(0,151,156,1) 50%, rgba(0,132,181,1) 100%);}
.icon-level {display: inline-block;vertical-align: middle;margin-left: 5rem;margin-top: 2rem;padding: 3rem 5rem 4rem;color:#fff;font-size: 12rem;font-style: normal;line-height: 1;border-radius: 3rem;}
.icon-level-1 {background:#8AC352;}
.icon-level-2 {background:#4FB864;}
.icon-level-3 {background:#19A782;}
.icon-level-4 {background:#18A094;}
.icon-level-5 {background:#1692BA;}
.icon-level-6 {background:#1484C8;}
.icon-level-7 {background:#0D62AF;}
.icon-level-8 {background:#094EA1;}
.icon-level-9 {background:#023C83;}
.icon-level-10 {background:linear-gradient(90deg, rgba(79,184,100,1) 0%, rgba(22,146,186,1) 60%, rgba(9,78,161,1) 100%);}

.user-message {display: inline-block;vertical-align: middle;position:relative;border:none;background:none;padding: 4rem;margin-top: -2rem;cursor:pointer;}
.user-message:before {font-family:'bluewave';content:'\e933';font-style:normal;font-size: 16rem;color:var(--gray-text-color);margin-top: 4rem;display: block;}
.user-message i {width: 14rem;height: 14rem;line-height: 13rem;font-style:normal;font-size: 10rem;font-weight: 600;color:#fff;background:#FF5858;border-radius:50%;display: block;position: absolute;right: -2rem;top: 0rem;}

.btn-view {font-size:14rem; color:var(--gray-text-color);}
.btn-view span {position:relative; padding-right:15rem;}
.btn-view span:after {position:absolute;top: 50%;right: 0;transform: translateY(-50%);font-family:'bluewave';content:'\e91c';font-size: 13rem;font-weight:normal;color: var(--gray-text-color);border: none;}

.col3 .main-component-box {max-width:33.33%;}



/* **************************************** *
 * VISUAL
 * **************************************** */
.main-top {display:flex;}
.main-visual {width:1070rem;height:460rem;background:#000;border-radius:30rem;overflow:hidden; flex-grow: 1;}
.main-visual__slider {height:100%;}
.main-visual__item { height: 100%; position: relative;}
.main-visual__item a {display:block; width:100%; height:100%;}
.main-visual__bg {position: absolute;top: 0;bottom: 0;left: 0;right: 0;/*background: transparent no-repeat center;background-size: cover;*/z-index: -1;}
.main-visual__bg img {display:block; width:100%; max-width:100%; height: 100%; object-fit: cover; overflow:hidden; border-radius:30rem;}
.main-visual__content { padding: 98rem 80rem;}
.main-visual__sub-title {font-size:28rem;font-weight: 300;line-height: 1.5;color:#fff;}
.main-visual__title {margin-top: 10rem;font-size:46rem;font-weight:600;line-height: 1.3;color:#fff;}
/* .main-visual__item--01 .main-visual__bg {background-image:url(../images/main/main-visual-01.jpg);} */
.main-visual .swiper-control {position:absolute;bottom: 50rem;left: 90rem;z-index:10;}
.main-visual .swiper-container .swiper-pagination-bullet span {border-color:#fff;}
.main-visual .swiper-container .swiper-pagination-bullet-active > span {background-color:#fff; border-color:#fff;}
.main-visual .swiper-play__state {margin-left: -7rem;margin-top: -1rem;}
.main-visual .swiper-play__state-btn:after {color:#fff;}


/* **************************************** *
 * MEMBER
 * **************************************** */
/* LOGIN */
.main-member {flex-grow: 1;margin-left: 20rem;max-width: 350rem; width:100%;}
.main-login {height:100%;background: var(--card-gray-bg);border:1rem solid var(--border-color);border-radius: 20rem;overflow: hidden;}
.main-login p {font-size:16rem; font-weight:500;}
.main-login .btn-login {display:block;background: transparent linear-gradient(104deg, #72BE59 0%, #009E9A 48%, #004EA1 100%) 0% 0% no-repeat padding-box;border-radius:10rem;text-align: center;font-size: 16rem;font-weight: 500;color: #fff;padding: 15rem;margin-top: 15rem;}
.main-login ul {display:flex;margin-top:20rem;}
.main-login ul li:last-child {margin-left:auto;}
.main-login ul li a {font-size:14rem; color:var(--gray-text-color);}

.main-login__info-head {background: var(--card-bg);margin-bottom: 15rem;padding:24rem 28rem;border-bottom: 1rem solid var(--border-color);}
.main-login .main-member__info-body{height:auto;margin-top: 0;padding:0;}
.main-login .interest-board__list {height:66rem;}
.main-login .interest-board__item {height:auto;background: var(--card-gray-bg);border-radius: 0;}

/* RANK */
.main-member-rank {background:#fff;border:1rem solid var(--border-color);padding: 24rem 28rem 0;border-radius: 20rem;height: 258rem;}
.main-member-rank__head {display:flex;align-items: center;}
.main-member-rank__head h2 {font-size:18rem;font-weight: 500;display: flex;align-items: center;}
.main-member-rank__head h2 .title-icon {margin-left:6rem; margin-right:0;}
.main-member-rank__head .btn-view {margin-left:auto;}
.main-member-rank__body {margin-top: 15rem;}
.main-member-rank__body .scroll-wrapper {max-height: 190rem;overflow: visible !important;}
.main-member-rank__body .scrollbar-inner .scroll-element.scroll-y {right: -15rem;}
.main-member-rank__item {display:flex;align-items: center;}
.main-member-rank__item + .main-member-rank__item {margin-top:20rem;}
.main-member-rank__item i {display: block;width: 30rem;text-align: center;font-style:normal;font-size:18rem;font-weight: 600;color:var(--gray-text-color);flex-shrink: 0;}
.main-member-rank__item figure {width:36rem;height:36rem;border-radius:50%;overflow:hidden;flex-shrink: 0; padding-top:100%; position:relative;}
.main-member-rank__item figure img {display:block;width: 100%;height: 100%;object-fit: cover;position: absolute;top: 0;left: 0;}
.main-member-rank__item p {font-size:18rem;margin-left: 10rem;display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.main-member-rank__item .like {margin-left:auto;border:none;text-align:center;padding: 7rem 10rem;width: 70rem;background:#fff;border:1rem solid #E5E5E5;border-radius:30rem;flex-shrink: 0;}
.main-member-rank__item .like span {position:relative; padding-left:18rem;}
.main-member-rank__item .like span:before {font-family: 'bluewave';content: '\e901';font-weight: normal;font-size: 14rem;color: #B1B1B1; position:absolute; left:0; top:50%; transform:translateY(-50%);}
.main-member-rank__item .like.active span:before {color:#FC7474;}
.main-member-rank__item:first-child i {color:var(--primary-text-color);}
.main-member-rank__item:first-child p {font-weight:600;}

/* 로그인 후 */
.main-member__info {height:100%; background:var(--card-bg); border-radius:20rem; border:1rem solid var(--border-color); overflow:hidden;}
.main-member__info-head {display:flex; align-items:center; padding:24rem 28rem; border-bottom:1rem solid var(--border-color);}
.main-member__info-head p {font-size:16rem;font-weight:500;display: inline-block;vertical-align: middle;}
.main-member__info-head p span {display:inline-block; vertical-align:middle;}
.main-member__info-head a {margin-left:auto; font-size:14rem; color:var(--gray-text-color); text-decoration:underline;}
.main-member__info-body {position:relative;height: calc(100% - 98rem);padding: 16rem 0 16rem;background:#f4f4f4;}
.main-member__info-body .btn-edit {position:absolute;z-index:10;right:16rem;bottom:16rem;color: var(--gray-text-color);font-size: 14rem;text-decoration: underline;}
.dark-mode .main-member__info-body {background:#121212;}
.main-member__info-body .btn-write {display:block;background:#004EA1;text-align:center;color:#fff;font-size:15rem;border-radius:6rem;padding: 12rem;margin: 0 20rem 16rem;}
.my-board__wrap {margin:0 16rem;}
.my-board__wrap .tab-list {display:flex;background:var(--card-bg);border-radius:6rem 6rem 0 0;overflow: hidden;}
.my-board__wrap .tab-list li {text-align: center;width: 50%;font-size: 15rem;}
.my-board__wrap .tab-list li a {display:block;padding: 8rem;background:#EDEDED;}
.dark-mode .my-board__wrap .tab-list li a {background:#292a2d;}
.my-board__wrap .tab-list li a.tab-button--is-active {background:var(--card-bg);}
.interest-board__slider {padding:0;overflow: hidden;margin: 0 -5rem;}
.interest-board__item {background:var(--card-bg);border-radius:0 0 6rem 6rem;padding:13rem 15rem;width: calc(100% - 10rem);/* height: 190rem; */margin:0 5rem;}
.interest-board__item + .interest-board__item {/* margin-left:10rem; */}
.interest-board__title {display:flex;font-size:15rem;font-weight:500;padding: 0 10rem 13rem;border-bottom:1rem solid var(--border-color);}
.interest-board__title b {font-weight:500;}
.interest-board__title .icon-interest, .interest-board__title .icon-interest-off {margin-left:auto;position:relative;}
.interest-board__title .icon-interest-off.active:before {color:#FFBD39;}
.dark-mode .interest-board__title .icon-interest-off:before {content:'\e931';}
.interest-board__list {padding: 15rem 10rem;}
.interest-board__list li {font-size:13rem;}
.interest-board__list li + li {margin-top: 11rem;}
.interest-board__list li a { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.main-member__info-body .swiper-control {margin-top:0; text-align:center;}
.main-member__info-body .swiper-container .swiper-pagination {height:auto;}
.main-member__info-body .swiper-container .swiper-pagination-bullet span {width:8rem; height:8rem;}



/* **************************************** *
 * BANNER
 * **************************************** */
.main-banner {margin-top:60rem; margin-bottom:60rem; border-radius:30rem;  background:var(--main-banner-bg);}
.main-banner a {display:block; padding:50rem 50rem 80rem}
.main-banner b {font-size:28rem; font-weight:600; color:#fff;}
.main-banner p {margin-top:8rem; font-size:18rem; color:#fff; font-weight:300;}
.main-banner .swiper-control {position:absolute; bottom:30rem; left:45rem;}
.main-banner .swiper-pagination-bullet-active > span {background:#fff; border-color:#fff;}


/* **************************************** *
 * SURVEY
 * **************************************** */
.survey-box-wrap {display:flex;flex-wrap: wrap;gap: 0;margin: -15rem;}
.survey-box-wrap > form {flex: 0 1 calc(33.33% - 30rem); margin: 15rem;}
.survey-box {height:auto;}
.survey-box .scroll-wrapper {max-height:713rem;}
.survey-box .scrollbar-inner .scroll-element.scroll-y {display:none;}
.survey-box .main-component-box__body {padding: 30rem;display: flex;height: calc(100% - 76rem);flex-direction: column; overflow-x:hidden;}
.survey-box .main-component-box__body .swiper-control {text-align: center; margin-top: 10rem;}
.survey-title {font-size:20rem; font-weight:500;}
.survey-title span {position:relative;padding-left:27rem;display: block;}
.survey-title span:before {font-family:'Montserrat', sans-serif; content:'Q.'; color:var(--primary-text-color); font-weight:600; position:absolute; left:0; top:3rem;}
.survey-list {margin-top:13rem;margin-bottom: 30rem;}
.survey-list label {border:1rem solid var(--border-color);border-radius:12rem;background:var(--card-bg);padding: 19rem 19rem 19rem 50rem;width: 100%;display: block;}
.survey-list label + label {margin-top:8rem;}
.survey-list .custom-radio + .custom-radio {margin-left:0;}
.survey-list .custom-radio .checkmark { left:19rem;}
.survey-info {margin-bottom:20rem; text-align:center;}
.survey-info li {font-size:15rem;}
.btn-survey {display: block;border:none;background:#000;border-radius:30rem;color:#fff;font-size:16rem;padding:15rem;width:190rem;text-align:center;margin: 30rem auto 0;cursor: pointer;margin-top: auto;}
.btn-survey.btn-gray {background:#666;}
.btn-survey.btn-white {background:var(--btn-bg); border:1rem solid var(--border-black-color); color:var(--btn-text-color);}

.survey-result__item {padding:18rem;border:1rem solid #0084B5; border-radius:12rem;}
.survey-result__item + .survey-result__item {margin-top:8rem;}
.survey-result__item > p {font-size:16rem;}
.survey-result__item > p > span {color:#0084B5}
.survey-result__item .progressbar {position:relative; display:flex;width: 100%;height:6rem;border: 0 none;background: #EBEBEB; margin-top:14rem;}
.survey-result__item .progressbar > span {height: 100%;display: inline-block; background:#0084B5;}

.survey-box .survey-slider {overflow:visible; margin:0 -30rem;}
.survey-slider__item {padding:0 30rem;}
.survey-box .swiper-navigation {position:absolute;top:50%;transform:translateY(-50%);z-index:10;width: 100%;}
.survey-box .swiper-navigation > button {border:none;border-radius:0;position: absolute;top: 50%;width: 40rem;height: 40rem;line-height: 40rem;transform: translateY(-50%);}
.survey-box .swiper-navigation > button:before {font-size:16rem;}
.survey-box .swiper-navigation > .swiper-button-prev {left:-5rem;}
.survey-box .swiper-navigation > .swiper-button-next {right:-5rem;}



/* **************************************** *
 * MEETING
 * **************************************** */
.meeting-box {position:relative; max-width: 100%;}
.meeting-box .tab-list { display:flex; margin-left:40rem;}
.meeting-box .tab-list li + li {margin-left:28rem;}
.meeting-box .tab-list li a {position:relative; padding-bottom: 5rem; font-size:18rem; color:var(--gray-text-color);}
.meeting-box .tab-list li a:after {width:100%; height:3rem; background:transparent;content:''; display:block; position:absolute; bottom:0;}
.meeting-box .tab-list li a.tab-button--is-active {color:var(--primary-text-color);font-weight: 600;}
.meeting-box .tab-list li a.tab-button--is-active:after {background:var(--primary-text-color);}

.meeting-box .main-component-box__item .main-component-box__contents {display:flex;align-items: center;}
.meeting-box .main-component-box__item .main-component-box__contents p {font-size:20rem;padding-right: 30rem;}
.meeting-box .main-component-box__item .meta {margin-left:auto;flex-shrink: 0;}
.meeting-box .main-component-box__item .meta li:first-child span + span:before {height:10rem;}
.meeting-box .main-component-box__item .meta li:first-child span:first-child {display: inline-block;}
.meeting-box .main-component-box__item .meta li:last-child {margin-left:24rem;}
.meeting-box .main-component-box__item .meta li:last-child span {display: inline-block;text-align: center;}
.meeting-box .main-component-box__item .meta li:last-child span + span {margin-left: 10rem;}

.meeting-box .btn-view {position:absolute; right:30rem; top:27rem; font-size: 15rem; color: var(--basic-text-color);}
.meeting-box .btn-view span:after { content: '\e909'; font-size: 10rem; color: var(--basic-text-color);}



/* **************************************** *
 * GALLERY
 * **************************************** */
.gallery-box {max-width:100%;border-radius: 20rem;overflow: hidden;}
.main-gallery__img { position: relative;padding-top: 66.326%;}
.main-gallery__img img {display:block; width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; display: block;}
.main-gallery__text {position:absolute;bottom:0;width: 100%;display: flex;align-items: end;padding: 30rem 35rem 20rem 35rem;color: #fff;background: transparent linear-gradient(180deg, #00000000 0%, #000000 100%) 0% 0% no-repeat padding-box;}
.main-gallery__text figure { flex-shrink: 0;position:relative;width:40rem;height:40rem;border-radius:50%;overflow:hidden;margin-right: 23rem;}
.main-gallery__text figure img {display:block;width: 100%;height: 100%;object-fit: cover;position: absolute;top: 0;left: 0;}
.main-gallery__info {width: 100%;color: #fff;}
.main-gallery__tit {font-size:18rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.main-gallery__info ul {display:flex;margin-top: 10rem;}
.main-gallery__info ul li {font-size:16rem;}
.main-gallery__info ul li + li {margin-left: 15rem;}
.gallery-box .swiper-navigation {position:absolute;top:50%;transform:translateY(-50%);width: 100%;z-index: 10;}
.gallery-box .swiper-navigation button {background:rgba(0,0,0,0.2);border:none;width: 60rem;height: 60rem;line-height: 58rem;position: absolute;top: 50%;transform: translateY(-50%);}
.gallery-box .swiper-navigation button.swiper-button-prev {left:30rem;}
.gallery-box .swiper-navigation button.swiper-button-next {right:30rem;}
.gallery-box .swiper-navigation button:before {color:#fff;}
html.desktop .main-gallery__slide a:hover .main-gallery__tit {font-weight:500; text-decoration:underline;}



/* **************************************** *
 * POPUP
 * **************************************** */
.mob-popup {display:none; overflow: hidden; position: fixed; right: 0; bottom: 0; left: 0; border-top-left-radius: 16rem; border-top-right-radius: 16rem; box-shadow: 0 0 10px rgba(0,0,0,0.2); z-index: 50;}
.mob-popup img {display: block; width: 100%;}
.mob-popup__close {position:absolute; right:10rem; top:10rem; padding:10rem; background:none; border:none;z-index:10;}
.mob-popup__close:after {font-family: 'bluewave';content: '\e920';font-weight: normal;font-size: 20rem;color: #fff; text-shadow: 0rem 0rem 10rem rgba(0,0,0,0.5);}
.mob-popup .swiper-control {position:absolute;bottom: 5rem;left:50%;transform:translateX(-50%);z-index:10;}
.mob-popup .swiper-container .swiper-pagination-bullet span {border-color:#fff;}
.mob-popup .swiper-container .swiper-pagination-bullet-active > span {background-color:#fff; border-color:#fff;}
.mob-popup .swiper-play__state {margin-left: -7rem;margin-top: -1rem;}
.mob-popup .swiper-play__state-btn:after {color:#fff;}



/* **************************************** *
 * MENU CATEGORY
 * **************************************** */
.main-menu-category {margin:40rem 0;}
.main-menu-category__list  {display:flex;flex-wrap: wrap;margin: -4rem;}
.main-menu-category__list li {margin: 4rem;}
.main-menu-category__list li a {display: block;border:1rem solid var(--border-color);background:var(--btn-bg);padding:8rem 14rem;font-size:14rem;color:var(--btn-text-color);border-radius:30rem; transition: background.3s, border .3s;}
html.desktop .main-menu-category__list li a:hover {border-color:#0084B5; background:#0084B5; color:#fff;}