@charset "utf-8";
/******************* 게시판 *******************/
.board-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 15px 0; }
.board-head .lf-flex { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.board-head .board-count { flex-shrink: 0; display: flex; align-items: center; gap: 10px; font-size: 16px; }
.board-head .board-count strong { font-weight: 600; color: var(--primary2); }
.board-head .rg { margin-left: auto; }
.board-head .inp-flex .inp-wrap { display: flex; align-items: center; justify-content: space-between; }
.board-head .inp-flex .inp-wrap input { width: 100%; height: 40px; line-height: 40px; background: transparent; }
@media only screen and (max-width: 767px) {
    .board-head .inp-flex { width: 100%; }
    .board-head .inp-flex .inp-wrap { width: 100%; }
}


/* 일반 게시판 리스트 */
/* .bbs-st1 { width: 100%; padding-top: 20px; border-collapse: collapse; border-top: 2px solid var(--main1); }
.bbs-st1 thead { display: none; }
.bbs-st1 thead th { position: relative; padding: 22px 10px; font-weight: 600; }
.bbs-st1 tbody tr { position: relative; border-bottom: 1px solid var(--gray-e5); }
.bbs-st1 tbody td { line-height: 1.4; padding: 22px 10px; font-weight: 500; font-size: 16px; color: var(--gray-75); text-align: center; }
.bbs-st1 tbody tr.top-fix td { background: var(--light4); }
.bbs-st1 tbody .title { text-align: left; }
.bbs-st1 tbody .title .tit { display: flex; align-items: center; gap: 5px; }
.bbs-st1 tbody .title .tit .txt-over1 { max-width: calc(100% - 60px); font-weight: 500; font-size: 2rem; color: #000; }
.bbs-st1 tbody tr.no-list td { line-height: 100px; }

.bbs-st2 thead tr { background: var(--gray-fc); }
@media only screen and (max-width: 767px) {
    .bbs-st1 tbody .title .tit .txt-over1 { font-size: 17px; }

    .bbs-res-st1 colgroup,
    .bbs-res-st1 thead { display: none; }
    .bbs-res-st1 tbody tr { display: flex; flex-wrap: wrap; padding: 10px 10px 10px 80px; }
    .bbs-res-st1 tbody td { position: relative; display: inline-block; padding: 0; }
    .bbs-res-st1 tbody tr:hover td { background: none; }
    .bbs-res-st1 tbody td::after { content:""; display: inline-block; width: 1px; height: 8px; margin: 0 10px; background: var(--gray-cc); vertical-align: middle; }
    .bbs-res-st1 tbody .title .tit .txt-over1 { max-width: calc(100% - 30px); }
    .bbs-res-st1 tbody tr:not(.no-list) td[data-content="구분"] { position: absolute; top: 50%; left: 10px; transform: translateY(-50%); width: 40px; text-align: center; }
    .bbs-res-st1 tbody td[data-content="번호"]::after { display: none; }
    .bbs-res-st1 tbody td[data-content="구분"]::after { display: none; }
    .bbs-res-st1 tbody td[data-content="제목"] { width: 100%; padding-bottom: 5px; }
    .bbs-res-st1 tbody td.title { flex-direction: column; align-items: baseline; width: 100%; padding-bottom: 5px; }
    .bbs-res-st1 tbody td.title .tit { width: 100%; }
    .bbs-res-st1 tbody td[data-content="제목"]::after { display: none; }
    .bbs-res-st1 tbody td.title::after { display: none; }
    .bbs-res-st1 tbody td:last-child:after { display: none; }
    .bbs-res-st1 tbody tr.top-fix .num-fix { padding: 0; border: none; background: none; }
    .bbs-res-st1 tbody tr.top-fix .num-fix i { color: var(--primary2); }
    .bbs-res-st1 tbody tr.no-list { justify-content: center; padding: 0; }
    
    .bbs-res-st1-1 tbody tr { padding: 10px 10px 10px 60px; }
    .bbs-res-st1-1 tr:not(.no-list) td[data-content="번호"] { position: absolute; top: 50%; left: 10px; transform: translateY(-50%); width: 40px; text-align: center; }
} */


.bbs-st1 { border-top: 2px solid var(--main1); }
.bbs-st1 > li { border-bottom: 1px solid var(--gray-e5); }
.bbs-st1 > li.top-fix { background: var(--light4); }
.bbs-st1 > li > .inner { display: flex; align-items: center; gap: 30px; min-height: 106px; padding: 15px 30px 15px 0; }
.bbs-st1 > li > .inner > div:not(.tit-wrap) { flex-shrink: 0; }
.bbs-st1 > li > .inner > div:first-child { width: 100px; text-align: center; }
.bbs-st1 > li > .inner > div:last-child { width: 60px; text-align: center; }
.bbs-st1 > li > .inner > div:last-child.chk-wrap { width: fit-content; }
.bbs-st1-1 > li > a > div:first-child { width: 80px; }
.bbs-st1 > li > .inner .tit-wrap { flex-grow: 1; }
.bbs-st1 > li > .inner .tit { display: flex; align-items: center; gap: 7px; }
.bbs-st1 > li > .inner .tit strong { line-height: 1.2; font-weight: 500; font-size: 2rem; }


.bbs-st2 { border-top: 1px solid #000; }
.bbs-st2 > li { display: flex; gap: 15px 10px; padding: 20px; border-bottom: 1px solid var(--gray-e5); }
.bbs-st2 > li .tit-wrap { flex-shrink: 0; width: 45%; }
.bbs-st2 > li .chk-wrap { flex-grow: 1; }
@media only screen and (max-width: 1023px) {
    .bbs-st2 > li { flex-direction: column; }
    .bbs-st2 > li .tit-wrap { width: 100%; }
    
}
@media only screen and (max-width: 767px) {
    .bbs-st1 > li > .inner { flex-wrap: wrap; gap: 10px 20px; padding: 15px; }
    .bbs-st1 > li > .inner > div:first-child { width: unset; }
    .bbs-st1 > li > .inner > div:last-child { position: relative; padding-left: 20px; }
    .bbs-st1 > li > .inner > div:last-child::before { content:""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 1px; height: 10px; background: var(--gray-e5); }
    .bbs-st1 > li > .inner > div:last-child.chk-wrap { padding-left: 0; }
    .bbs-st1 > li > .inner > div:last-child.chk-wrap::before { display: none; }
    .bbs-st1 > li > .inner .tit-wrap { width: 100%; }
    .bbs-st1 > li > .inner .tit strong { font-size: 17px; }
}


/* 일반게시판 상세 */
.bbs-view-st1 .bbs-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 30px 40px; border-top: 2px solid var(--main1); border-bottom: 1px solid var(--gray-e5); }
.bbs-view-st1 .bbs-header .tit { display: block; width: 100%; line-height: 1.4; font-weight: 700; font-size: 2.8rem; color: #222; word-break: break-all; word-wrap: break-word; }
.bbs-view-st1 .bbs-header .info { flex-shrink: 0; display: flex; align-items: center; gap: 15px; }
.bbs-view-st1 .bbs-header .info span { color: var(--gray-75); }
.bbs-view-st1 .bbs-header .info .share-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--main1); background: var(--light2); border-radius: 5px; }

.bbs-view-st1 .bbs-body { padding: 40px; border-bottom: 1px solid var(--gray-e5); }
.bbs-view-st1 .bbs-body img { max-width: 100% !important; }

.bbs-foot .btn-wrap { margin-top: 40px; border-top: 1px solid var(--gray-e5); border-bottom: 1px solid var(--gray-e5); }
.bbs-foot .btn-wrap li { display: flex; align-items: center; }
.bbs-foot .btn-wrap li + li { border-top: 1px solid var(--gray-e5); }
.bbs-foot .btn-wrap li strong { flex-shrink: 0; position: relative; display: flex; align-items: center; gap: 8px; line-height: 1.5; padding: 20px 30px; font-weight: 600; color: #000; }
.bbs-foot .btn-wrap li strong i { color: var(--main1); }
.bbs-foot .btn-wrap li strong i::before { font-weight: 700 !important; }
.bbs-foot .btn-wrap li a { display: block; }
.bbs-foot .btn-wrap li a:hover span { text-decoration: underline; }
.bbs-foot .btn-wrap li a span { position: relative; line-height: 1.5; padding-left: 20px; color: #000; }

.bbs-foot .adm-reply { display: flex; margin-top: 40px; border-top: 1px solid var(--gray-e5); border-bottom: 1px solid var(--gray-e5); }
.bbs-foot .adm-reply .tit { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 140px; background: var(--gray-f467); }
.bbs-foot .adm-reply .cont { flex-grow: 1; padding: 20px;  }
@media only screen and (max-width: 767px) {
    .bbs-view-st1 .bbs-header { flex-direction: column; gap: 20px; padding: 25px; }  
    .bbs-view-st1 .bbs-header .tit { font-size: 2.4rem; }
    .bbs-view-st1 .bbs-body { padding: 25px; }
    .bbs-foot .btn-wrap li strong { padding: 14px; }
    .bbs-foot .btn-wrap li a span { padding-left: 14px; }

    .bbs-foot .adm-reply { flex-direction: column; }
    .bbs-foot .adm-reply .tit { justify-content: left; width: 100%; padding: 15px 20px; }
}


/* 첨부파일 리스트 */
.attr-st1 { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--gray-e5); }
.attr-st1 li { flex-shrink: 0; }
.attr-st1 li a { display: flex; gap: 10px; }
.attr-st1 li a span { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--gray-f6); border-radius: 5px; }
.attr-st1 li a em { line-height: 1.4; margin-top: 6px; }
@media only screen and (max-width: 767px) {
    .attr-st1 li { flex-wrap: wrap; }
    .attr-st1 li a { width: 1005; }
    .attr-st1 li a i { margin-top: 3px; }
}


/* 갤러리 게시판-그리드 */
.grid-wrap {  }
.grid-wrap .grid .grid-item { width: 25%; padding: 10px; }
.grid-wrap .grid .grid-item a { position: relative; display: block; width: 100%; height: auto; border-radius: 2rem; overflow: hidden; }
.grid-wrap .grid .grid-item a::before { content:""; position: absolute; top: 0; right: 0; width: 200%; height: 200%; border-radius: 0 0 0 100%; transform: scale(0); transform-origin: top right; transition: transform 0.6s ease-out;  z-index: 1; }
.grid-wrap .grid .grid-item.insta a::before { background: #8b2e8b9c; }
.grid-wrap .grid .grid-item.facebook a::before { background: #233d7aa8; }
.grid-wrap .grid .grid-item.twitter a::before { background: #00000046; }
.grid-wrap .grid .grid-item a .icn { position: absolute; top: 15px; right: 15px; z-index: 1; display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; color: #fff; border-radius: 1rem; }
.grid-wrap .grid .grid-item a .icn.insta { background: #b735b7; }
.grid-wrap .grid .grid-item a .icn.facebook { background: #294da4; }
.grid-wrap .grid .grid-item a .icn.twitter { background: #000; }
.grid-wrap .grid .grid-item a .img-wrap { width: 100%; height: 100%; }
.grid-wrap .grid .grid-item a .img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: all .5s; }
.grid-wrap .grid .grid-item a:hover::before { transform: scale(1); }
.grid-wrap .grid .grid-item a:hover .icn { background: none; }
.grid-wrap .grid .grid-item a:hover .img-wrap img { transform: scale(1.1); }
@media only screen and (max-width: 1023px) {
    .grid-wrap .grid .grid-item { width: 33.3%; padding: 5px; }
    .grid-wrap .grid .grid-item a { border-radius: 1.5rem; }
}
@media only screen and (max-width: 767px) {
    .grid-wrap .grid .grid-item { width: 50%; }
    .grid-wrap .grid .grid-item a { border-radius: 1rem; }
    .grid-wrap .grid .grid-item a .icn { top: 0; right: 0; width: 30px; height: 30px; border-radius: 0 1rem 0 1rem; }
}


/* 갤러리 게시판 */
.bbs-gallery { display: flex; flex-wrap: wrap; margin: 0 -10px; }
.bbs-gallery .gallery-item { width: 20%; margin-bottom: 30px; padding: 0 10px; }
.bbs-gallery .gallery-item .inner { display: block; }
.bbs-gallery .gallery-item .inner .img-wrap { position: relative; width: 100%; height: 0; padding-bottom: 80%; background: #f5f5f5; border-radius: 1rem; overflow: hidden; } 
.bbs-gallery .gallery-item .inner .img-wrap img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.bbs-gallery .gallery-item .inner .img-wrap .chk-st2 { position: absolute; top: 10px; right: 10px; }
.bbs-gallery .gallery-item .inner .txt-wrap { display: block; padding-top: 20px; }
.bbs-gallery .gallery-item .inner .txt-wrap:hover .tit { text-decoration: underline; }
.bbs-gallery .gallery-item .inner .txt-wrap .tit { height: 52px; line-height: 1.4; font-weight: 600; font-size: 1.8rem; word-break: keep-all; }
@media only screen and (max-width: 1023px) {
    .bbs-gallery { margin: 0 -5px; }
	.bbs-gallery .gallery-item { width: 33.3%; margin-bottom: 20px; padding: 0 5px; }
	.bbs-gallery .gallery-item .inner .txt-wrap .tit { height: 44px; font-size: 16px; }
}
@media only screen and (max-width: 767px) {
    .bbs-gallery .gallery-item { width: 50%; }
}
@media only screen and (max-width: 560px) {
    .bbs-gallery { margin: 0; }
    .bbs-gallery .gallery-item { width: 100%; padding: 0; }
}




/* FAQ 게시판 */
.bbs-faq { border-top: 2px solid var(--main1); }
.bbs-faq .faq-item { border-bottom: 1px solid var(--gray-e5); }
.bbs-faq .faq-item .tit { position: relative; display: block; padding: 30px 55px 30px 100px; }
.bbs-faq .faq-item .tit::before { content:"Q"; position: absolute; top: 50%; left: 24px; display: flex; justify-content: center; align-items: center; height: 34px; padding: 0 20px; font-weight: 600; color: var(--main2); background: var(--light3); border-radius: 50px; transform: translateY(-50%); }
.bbs-faq .faq-item .tit::after { content:""; position: absolute; top: 50%; right: 24px; transform: translateY(-50%); display: block; width: 36px; height: 36px; background: var(--gray-f6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-plus-lg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2'/%3E%3C/svg%3E") no-repeat center center / auto; border-radius: 5px; }
.bbs-faq .faq-item.on .tit::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-dash-lg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M2 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 8'/%3E%3C/svg%3E"); }
.bbs-faq .faq-item .tit strong { line-height: 1.3; font-weight: 600; font-size: 1.8rem; }
.bbs-faq .faq-item .cont { display: none; padding-left: 50px; background: var(--gray-f6); border-top: 1px solid var(--gray-e5); }
.bbs-faq .faq-item .cont .editor-text { position: relative; padding: 36px 30px 36px 80px; }
@media only screen and (max-width: 1023px) {
	.bbs-faq .faq-item .tit { padding: 20px 60px 20px 70px; }
	.bbs-faq .faq-item .tit::before { left: 15px; width: 35px; height: 35px; font-size: 14px; }
    .bbs-faq .faq-item .tit strong { font-size: 16px; }
	.bbs-faq .faq-item .cont { padding-left: 0; }
	.bbs-faq .faq-item .cont .editor-text { padding: 20px 20px 20px 70px; font-size: 16px; }
	.bbs-faq .faq-item .cont .editor-text::before { top: 20px; left: 15px; width: 35px; height: 35px; font-size: 14px; }
}





/* 페이징 */
.pagination { display: flex; justify-content: center; flex-wrap: wrap; margin-top: 50px; }
.pagination a { flex-shrink: 0; display: block; width: 36px; height: 36px; line-height: 36px; margin: 2px; padding: 0 6px; font-size: 15px; color: #666; border: 1px solid var(--gray-dd); border-radius: 100%; text-align: center; }
.pagination a.arr { font-size: 0; background-position: center; background-repeat: no-repeat; background-size: auto 8px; border: none; }
.pagination a.first-page { background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35.72 36.34'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23222; stroke-linecap: round; stroke-linejoin: round; stroke-width: 6px; %7D %3C/style%3E%3C/defs%3E%3Cpolyline class='cls-1' points='33.72 34.34 17.55 18.17 33.72 2'/%3E%3Cpolyline class='cls-1' points='18.17 34.34 2 18.17 18.17 2'/%3E%3C/svg%3E"); }
.pagination a.last-page { background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35.72 36.34'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23222; stroke-linecap: round; stroke-linejoin: round; stroke-width: 6px; %7D %3C/style%3E%3C/defs%3E%3Cpolyline class='cls-1' points='2 2 18.17 18.17 2 34.34'/%3E%3Cpolyline class='cls-1' points='17.55 2 33.72 18.17 17.55 34.34'/%3E%3C/svg%3E"); }
.pagination a.prev-page { margin-right: 5px; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20.17 36.34'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23222; stroke-linecap: round; stroke-linejoin: round; stroke-width: 6px; %7D %3C/style%3E%3C/defs%3E%3Cpolyline class='cls-1' points='18.17 34.34 2 18.17 18.17 2'/%3E%3C/svg%3E"); }
.pagination a.next-page { margin-left: 5px; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20.17 36.34'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23222; stroke-linecap: round; stroke-linejoin: round; stroke-width: 6px; %7D %3C/style%3E%3C/defs%3E%3Cpolyline class='cls-1' points='2 2 18.17 18.17 2 34.34'/%3E%3C/svg%3E"); }
.pagination a.active { color: #fff; background: #000; border-color: #000; }







/* 챌린지 */
.chlg-wrap { display: flex; }
.chlg-wrap > div { position: relative; width: 50%; }
.chlg-wrap .chlg-info + .rg .img-lp { display: none; position: absolute; top: 30px; }
.chlg-wrap .chlg-info + .rg .img-lp.active { display: block; }
.chlg-wrap .chlg-info + .rg .img-lp .close-btn { position: absolute; top: 0; right: 0; z-index: 1; width: 40px; height: 40px; font-size: 20px; background: #fff; }

.chlg-info-list { display: flex; gap: 150px; background: url(../img/common/icn-chlg-arr.webp) no-repeat center center / auto; }
.chlg-info-list .chlg-info { position: relative; width: 100%; border: 1px solid var(--gray-e5); }
.chlg-info-list .chlg-info .info-st1 li { width: calc(50% - 15px); }


.chlg-info { border-bottom: 1px solid var(--gray-e5); }
.chlg-info .chlg-header { display: flex; align-items: center; justify-content: space-between; padding: 20px; background: var(--gray-f467); border-top: 2px solid var(--sub1); }
.chlg-info .chlg-body { padding: 20px; }
.chlg-info .chlg-body .auth-example { display: flex;  }
.chlg-info .chlg-body .auth-example .lf { flex-shrink: 0; width: 100px; }
.chlg-info .chlg-body .auth-example .lf .img-wrap { background: var(--gray-f467); border-radius: 1rem; }
.chlg-info .chlg-body .auth-example .cont { padding: 20px; }


.chlg-bingo { position: relative; max-width: 645px; margin: 0 auto; }
.chlg-bingo .bingo { display: flex; flex-wrap: wrap; padding: 10px; background: #fcfdd2; border: 3px solid var(--sub4); border-radius: 2rem; }
.chlg-bingo .bingo .item { width: 25%; padding: 10px; }
.chlg-bingo .bingo .item .inner { position: relative; display: block; height: 0; padding-bottom: 100%; background: var(--gray-f467) url(../img/common/icn-bingo.webp) no-repeat center center / auto; border-radius: 2rem; }
.chlg-bingo .bingo .item .inner::before { content:""; position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; line-height: 30px; font-family: var(--head-font); font-size: 15px; color: #fff; border-radius: 100%; text-align: center; } 
.chlg-bingo .bingo .item .inner::after { content:""; position: absolute; bottom: 0; right: 0; width: 112px; height: 82px; } 
.chlg-bingo .bingo .item[data-state="request"] .inner::after { background: url(../img/common/icn-bingo-request.webp) no-repeat center center / contain; } 
.chlg-bingo .bingo .item[data-state="end"] .inner::after { background: url(../img/common/icn-bingo-end.webp) no-repeat center center / contain; } 
.chlg-bingo .bingo .item[data-state="hold"] .inner::after { background: url(../img/common/icn-bingo-hold.webp) no-repeat center center / contain; } 

.chlg-bingo .bingo .item[data-lv="high"] .inner { background-color: #f9dfe8; } 
.chlg-bingo .bingo .item[data-lv="high"] .inner::before { content:"상"; background: var(--sub1); } 
/* .chlg-bingo .bingo .item[data-lv="high"][data-state="end"] .inner { border: 2px solid var(--sub1); }  */
.chlg-bingo .bingo .item[data-lv="mid"] .inner { background-color: #bedefe; } 
.chlg-bingo .bingo .item[data-lv="mid"] .inner::before { content:"중"; background: var(--sub2); } 
/* .chlg-bingo .bingo .item[data-lv="mid"][data-state="end"] .inner { border: 2px solid var(--sub2); }  */
.chlg-bingo .bingo .item[data-lv="low"] .inner { background-color: #fff3aa; } 
.chlg-bingo .bingo .item[data-lv="low"] .inner::before { content:"하"; background: var(--sub4); } 
/* .chlg-bingo .bingo .item[data-lv="low"][data-state="end"] .inner { border: 2px solid var(--sub4); }  */

.chlg-bingo .bingo .item.empty .inner { background-color: var(--gray-f467); background-image: url(../img/common/icn-bingo-empty.webp); }
.chlg-bingo .bingo .item.empty .inner::before { display: none; } 
.chlg-bingo .bingo .item.thumb .inner { background-repeat: no-repeat; background-size: cover; }


.chlg-bingo .lf { position: absolute; right: calc(100% - 100px); bottom: 0; z-index: -1; }
.chlg-bingo .lf .cha1 img { animation: livelyWiggle 4s ease-in-out infinite; transform-origin: bottom center; }
.chlg-bingo .lf .cha2 img { animation: livelyWiggle 5s ease-in-out infinite reverse; transform-origin: bottom center; }
.chlg-bingo .rg .cha img { animation: livelyWiggle 6s ease-in-out infinite; transform-origin: bottom center; }
.chlg-bingo .rg { position: absolute; left: calc(100% - 20px); bottom: 0; }

.chlg-body .scroll-txt { display: none; }
@media only screen and (max-width: 1023px) {
    .chlg-wrap { flex-direction: column-reverse; }
    .chlg-wrap > div { width: 100%; }
    .chlg-wrap .chlg-info .chlg-body { max-height: unset; }
 

    .chlg-info-list { gap: 70px; background-size: 60px auto; }


    .chlg-bingo { max-width: unset; padding: 0 90px; }
    .chlg-bingo .bingo { padding: 5px; }
    .chlg-bingo .bingo .item { padding: 5px; }
    .chlg-bingo .bingo .item .inner { border-radius: 1rem; background-size: 40px auto; }
    .chlg-bingo .bingo .item .inner::before { top: 6px; right: 6px; width: 24px; height: 24px; line-height: 24px; font-size: 12px; }
    .chlg-bingo .bingo .item .inner::after { width: 90px; height: 66px; }
    
    .chlg-bingo .lf { right: unset; left: -30px; }
    .chlg-bingo .rg { left: unset; right: -30px; }
    .chlg-bingo .cha img { width: 150px; }
    .chlg-bingo .cha1 img { width: 190px; }
}
@media only screen and (max-width: 767px) {
    .chlg-info-list { flex-direction: column; gap: 100px; background: none; }
    .chlg-info-list .chlg-info:first-child::after { content:""; position: absolute; top: calc(100% + 20px); left: 50%; transform: translateX(-50%) rotate(90deg); width: 90px; height: 66px; background: url(../img/common/icn-chlg-arr.webp) no-repeat center center / contain; }

    .chlg-bingo { min-width: 450px; padding: 100px 10px; }
    
    .chlg-bingo .lf { display: flex; align-items: center; bottom: calc(100% - 120px); }
    .chlg-bingo .lf .cha1 { transform: rotate(25deg); }
    .chlg-bingo .cha img { width: 100px; }
    .chlg-bingo .cha1 img { width: 130px; }
}

@media only screen and (max-width: 450px) {
    .chlg-body .scroll-wrap { overflow-x: scroll; }
    .chlg-body .scroll-txt { display: flex; }

    .chlg-bingo { min-width: 450px; padding: 100px 10px 10px; }
    .chlg-bingo .rg { display: none; }
    
}



.point-wrap { max-width: 650px; margin: 0 auto; padding: 20px; background: var( --gray-f467); border-radius: 2rem; }
.point-wrap .top { padding: 20px; background: #fff; border-radius: 1.5rem; text-align: center; }
.point-wrap .top .tit { display: flex; align-items: center; justify-content: space-between; }
.point-wrap .top .tit strong { display: flex; align-items: center; gap: 10px; }
.point-wrap .top .tit strong::before { content:"P"; display: block; width: 30px; height: 30px; line-height: 35px; font-family: var(--head-font); font-size: 18px; color: #fff; background: var(--sub1); border-radius: 100%; text-align: center; }
.point-wrap .top .d-flex { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 10px; }
.point-wrap .top .spay-btn { display: flex; align-items: center; gap: 10px; height: 40px; line-height: 40px; padding: 0 24px; font-weight: 500; font-size: 14px; color: #fff; background: #5F88FF; border-radius: 50px; }
.point-wrap .cont .tab-cont { background: #fff; border-radius: 1rem; }

.point-log {  }
.point-log li { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 15px 20px; }
.point-log li + li { border-top: 1px solid var(--gray-e5); }
.point-log li .lf { flex-grow: 1; }
.point-log li .lf span { line-height: 1.3; }
.point-log li .rg { flex-shrink: 0; }
@media only screen and (max-width: 450px) {
    .point-wrap .top .tit { flex-direction: column; align-items: baseline; gap: 10px; }
    .point-wrap .top .spay { height: 35px; line-height: 35px; }
}




.bg-content { background: var(--gray-f467); }
.bg-content .box-con { max-width: 500px; margin: 0 auto; padding: 80px 0; background: #fff; border-radius: 2.5rem; }
.login-inner { max-width: 340px; margin: 0 auto; }
.login-inner .inp-wrap { margin: 50px 0 20px; padding-bottom: 30px; border-bottom: 1px solid var(--gray-e5); }
.login-inner .d-flex { justify-content: center; }
.login-inner .d-flex li { display: flex; align-items: center; gap: 15px; }
.login-inner .d-flex li + li::before { content:""; display: block; width: 1px; height: 14px; margin-left: 15px; background: var(--gray-cc); }
.login-inner .sns-btn-list { margin-top: 30px; }
.login-inner .sns-btn-list > a { display: flex; justify-content: center; gap: 20px; margin-top: 10px; height: 55px; line-height: 55px; padding: 0 20px; font-weight: 500; font-size: 1.8rem; }
.login-inner .sns-btn-list > a .icn img { vertical-align: middle; }
.login-inner .sns-btn-list > a.kakao { background: #feee37; }
.login-inner .sns-btn-list > a.naver { color: #fff; background: #25cb3b; }
.login-inner .sns-btn-list > a.google { color: #fff; background: #000; }
@media only screen and (max-width: 450px) {
    .bg-content .box-con { max-width: unset; padding: 50px 20px; }
    .login-inner { max-width: unset; }
}



/* 365 챌린지 자가진단 상단 비주얼 변경 요청 */
/* .cont-top-box { position: relative; padding: 10rem 0; text-align: center; }
.cont-top-box::before { content:""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 100%; background: var(--light2); }
.cont-top-box .inner { position: relative; width: fit-content; margin: 0 auto; }
.cont-top-box .inner::before { content:""; position: absolute; top: calc(50% - 80px); right: calc(100% +  20px); width: 140px; height: 174px; background: url(../img/common/icn-chlg-cha1.webp) no-repeat center center / contain; animation: livelyWiggle 4s ease-in-out infinite; transform-origin: bottom center; }
@media only screen and (max-width: 1023px) {
    .cont-top-box .inner { width: 100%; }
    .cont-top-box .inner::before { top: 100%; right: calc(100% - 100px); width: 100px; height: 120px; }
    
} */

.cont-top-box { position: relative; height: 290px; }
.cont-top-box img { position: absolute; left: 50%; transform: translateX(-50%); height: 100%; object-fit: cover; }

/* 365 챌린지 상단 비주얼 변경 요청 */
/* .cont-top-box2 { position: relative; padding: 100px 0; text-align: center; background: var(--light2) url(../img/common/bg-dot.png) no-repeat center center / cover; overflow: hidden; }
.cont-top-box2 .tit-wrap { position: relative; width: fit-content; margin: 0 auto; }
.cont-top-box2 .tit-wrap .shine { position: absolute; top: 0; left: 100%; }
.cont-top-box2 .tit-wrap .shine img { opacity: 0; animation: sparkle 3.5s infinite ease-in-out 1.8s; }
.cont-top-box2 .cloud-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.cont-top-box2 .cloud-wrap > div { position: absolute; }
.cont-top-box2 .cloud-wrap .cloud { position: absolute; z-index: 1; }
.cont-top-box2 .cloud-wrap .cloud img { opacity: 0; }
.cont-top-box2 .cloud-wrap .shine { position: absolute; }
.cont-top-box2 .cloud-wrap .shine img { opacity: 0;  }
.cont-top-box2 .cloud-wrap .spring { position: absolute; }
.cont-top-box2 .cloud-wrap .spring img { opacity: 0; }
.cont-top-box2 .cloud-wrap .cha { position: absolute; z-index: 3; }
.cont-top-box2 .cloud-wrap .cha img { opacity: 0; animation: livelyWiggle 1.5s ease-in-out infinite, fadeIn 0.5s ease-in forwards 1.5s; transform-origin: bottom center; }

.cont-top-box2 .cloud-wrap .top { top: -3px; }
.cont-top-box2 .cloud-wrap .right { right: -3px; }
.cont-top-box2 .cloud-wrap .left { left: -3px; }
.cont-top-box2 .cloud-wrap .bottom { bottom: -3px; }

.cont-top-box2 .cloud-wrap .left.top { top: -30px; left: -10px; }
.cont-top-box2 .cloud-wrap .left.top .cloud img { width: 300px; }

.cont-top-box2 .cloud-wrap .right.top { top: -70px; right: -10px; }
.cont-top-box2 .cloud-wrap .right.top .cloud img { width: 300px; }
.cont-top-box2 .cloud-wrap .right.top .spring { top: 150px; right: 15px; }
.cont-top-box2 .cloud-wrap .right.top .spring img { width: 120px; }

.cont-top-box2 .cloud-wrap .left.bottom .cloud1 { bottom: -70px; left: -10px; }
.cont-top-box2 .cloud-wrap .left.bottom .cloud1 img { width: 390px; }
.cont-top-box2 .cloud-wrap .left.bottom .cloud2 { bottom: -60px; left: calc(100% + 250px); z-index: 0; }
.cont-top-box2 .cloud-wrap .left.bottom .cloud2 img { width: 290px; }

.cont-top-box2 .cloud-wrap .left.bottom .cube { position: absolute; bottom: 30px; left: 50px; z-index: 4; }
.cont-top-box2 .cloud-wrap .left.bottom .cube svg { width: 120px; opacity: 0; animation: slideInFromLeft .5s ease-out forwards 1.5s; }
.cont-top-box2 .cloud-wrap .left.bottom .cube #cubeani { animation: rotateSlightClockwise 4s ease-in-out infinite;  transform-origin: bottom left; transform-box: fill-box; }

.cont-top-box2 .cloud-wrap .left.bottom .cha { bottom: 10px; left: 200px; }
.cont-top-box2 .cloud-wrap .left.bottom .cha img { width: 150px; }
.cont-top-box2 .cloud-wrap .left.bottom .shine { bottom: 300px; left: 200px; }
.cont-top-box2 .cloud-wrap .left.bottom .shine img { animation: slideInFromRight 1.5s ease-out forwards 1.5s, bounce 1s ease-in-out infinite; transform-origin: center bottom; }

.cont-top-box2 .cloud-wrap .right.bottom .cloud1 { bottom: -50px; }
.cont-top-box2 .cloud-wrap .right.bottom .cloud1 img { width: 560px; }
.cont-top-box2 .cloud-wrap .right.bottom .cloud2 { bottom: -70px; right: -50px; }
.cont-top-box2 .cloud-wrap .right.bottom .note { position: absolute; bottom: 290px; right: 230px; }
.cont-top-box2 .cloud-wrap .right.bottom .note img { opacity: 0; animation: rotate 1.6s ease-in-out infinite, fadeIn 0.5s ease-in forwards 1.5s; transform-origin: center bottom; }

.cont-top-box2 .cloud-wrap .right.bottom .cha1 { bottom: 40px; right: 300px; }
.cont-top-box2 .cloud-wrap .right.bottom .cha1 img { width: 150px; }
.cont-top-box2 .cloud-wrap .right.bottom .cha2 { bottom: 90px; right: 40px; }
.cont-top-box2 .cloud-wrap .right.bottom .cha2 img { width: 170px; }

.cont-top-box2 .cloud-wrap .right .cloud { right: 0; }
.cont-top-box2 .cloud-wrap .bottom .cloud { bottom: 0; }

.cont-top-box2 .cloud-wrap .left .cloud img { animation: slideInFromLeft .5s ease-out forwards; }
.cont-top-box2 .cloud-wrap .right .cloud img { animation: slideInFromRight .5s ease-out forwards 0.5s; }
.cont-top-box2 .cloud-wrap .right.top .spring img { animation: slideInFromRight 1.5s ease-out forwards 1.5s, bounce 1s ease-in-out infinite; transform-origin: center bottom; }

.cont-top-box2 .cloud-wrap .bottom .cloud img { animation-delay: 1s; }
.cont-top-box2 .cloud-wrap .right.bottom .cloud1 img { animation-delay: 1.5s; }
.cont-top-box2 .cloud-wrap .right.bottom .cloud2 img { animation-delay: 1.8s; }

@media only screen and (max-width: 1400px) {
    .cont-top-box2 { padding: 80px 0 200px; }
    .cont-top-box2 .tit-wrap .shine img { width: 50px; }
    .cont-top-box2 .cloud-wrap .right.top { top: -30px; }
    .cont-top-box2 .cloud-wrap .left.top .cloud img { width: 200px; }
    .cont-top-box2 .cloud-wrap .left.bottom .cha img { width: 100px; }
    .cont-top-box2 .cloud-wrap .left.bottom .cloud1 { bottom: -30px; }
    .cont-top-box2 .cloud-wrap .left.bottom .cloud1 img { width: 300px; }
    .cont-top-box2 .cloud-wrap .left.bottom .cloud2 { left: calc(100% + 200px); }
    .cont-top-box2 .cloud-wrap .left.bottom .cha { left: 150px; }
    .cont-top-box2 .cloud-wrap .left.bottom .cube { left: 30px; }
    .cont-top-box2 .cloud-wrap .left.bottom .shine { left: 0; }
    .cont-top-box2 .cloud-wrap .left.bottom .shine img { width: 100px; }
    .cont-top-box2 .cloud-wrap .right.top .cloud img { width: 200px; }
    .cont-top-box2 .cloud-wrap .right.top .spring { top: 100px; }
    .cont-top-box2 .cloud-wrap .right.top .spring img { width: 100px; }
    .cont-top-box2 .cloud-wrap .right.bottom .cloud1 img { width: 340px; }
    .cont-top-box2 .cloud-wrap .right.bottom .note { bottom: 120px; right: 80px; }
    .cont-top-box2 .cloud-wrap .right.bottom .note img { width: 80px; }
    .cont-top-box2 .cloud-wrap .right.bottom .cha1 { bottom: 30px; right: 150px; }
    .cont-top-box2 .cloud-wrap .right.bottom .cha1 img { width: 100px; }
    .cont-top-box2 .cloud-wrap .right.bottom .cha2 { bottom: 20px; right: 0; }
    .cont-top-box2 .cloud-wrap .right.bottom .cha2 img { width: 120px; }
}
@media only screen and (max-width: 767px) {
    .cont-top-box2 { padding: 50px 0 200px; }
    .cont-top-box2 .tit-wrap .shine { display: none; }
    .cont-top-box2 .cloud-wrap .left.bottom .cloud1 img { width: 200px; }
    .cont-top-box2 .cloud-wrap .left.bottom .cube { display: none; }
    .cont-top-box2 .cloud-wrap .left.bottom .cha { left: 10px }
    .cont-top-box2 .cloud-wrap .left.bottom .shine { display: none; }
    .cont-top-box2 .cloud-wrap .left.bottom .cloud2 { display: none; }
    .cont-top-box2 .cloud-wrap .right.top .spring { display: none; }
    .cont-top-box2 .cloud-wrap .right.bottom .cloud1 img { width: 240px; }
    .cont-top-box2 .cloud-wrap .right.bottom .cloud2 { display: none; }
    .cont-top-box2 .cloud-wrap .right.bottom .cha1 { bottom: -10px; right: 100px; }

} */


.cont-top-box2 { height: 574px; }
.cont-top-box2 .img-wrap { height: 100%; text-align: center; }
.cont-top-box2 .img-wrap img { height: 100%; object-fit: cover; }
.cont-top-box2 .img-wrap img.mo { display: none; }
.sub010101 { position: relative; text-align: center; }
.sub010101 .img-wrap img.mo { display: none; }
@media only screen and (max-width: 1023px) {
    .cont-top-box2 .img-wrap img.pc { display: none; }
    .cont-top-box2 { height: unset; }
    .cont-top-box2 .img-wrap img.mo { display: block; width: 100%; }
    
    .sub010101 .img-wrap img.pc { display: none; }
    .sub010101 .img-wrap img.mo { display: block; }
}
/* @media only screen and (max-width: 1023px) {
    .cont-top-box2 { height: 400px; }
}
@media only screen and (max-width: 767px) {
    .cont-top-box2 { height: 300px; }
}
@media only screen and (max-width: 470px) {
    .cont-top-box2 { height: 260px; }
    .sub010101 { margin-top: -10rem; }
}
@media only screen and (max-width: 390px) {
    .cont-top-box2 { height: 210px; }
    .sub010101 { margin-top: 0; }
} */



.share-list { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.share-list li a { display: block; width: 40px; height: 40px; border: 1px solid var(--gray-e5); border-radius: 100%; }
.share-list li:last-child a { color: #fff; background: var(--sub1); border: 1px solid var(--sub1); }
.share-list li a .icn { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }




.result-box { max-width: 700px; margin: 0 auto; text-align: center; }
@media only screen and (max-width: 767px) {
}





/* 댓글 작성 */
.cmt-inp-wrap { padding: 20px; background: var(--gray-f467); }
.cmt-inp-wrap .inp-flex { display: flex; }
.cmt-inp-wrap .inp-flex textarea.inp-st1 { width: 100%; }
.cmt-inp-wrap .inp-flex .write-btn { flex-shrink: 0; width: 80px; font-weight: 600; color: var(--primary2); background: #fff; border: 1px solid var(--primary2); }
@media only screen and (max-width: 390px) {
    .cmt-inp-wrap .inp-flex { flex-direction: column; row-gap: 5px; }
    .cmt-inp-wrap .inp-flex .write-btn { width: 100%; padding: 10px; }
    
}

/* 댓글 리스트 */
.cmt-list-wrap { padding: 20px; background: var(--gray-f467); }
.cmt-list-wrap .cmt-list .cmt-item { padding: 15px 20px; border-bottom: 1px solid var(--gray-dd); }
.cmt-list-wrap .cmt-list .cmt-item .cmt-body { margin-bottom: 10px; }
.cmt-list-wrap .cmt-list .cmt-item .cmt-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.cmt-list-wrap .cmt-list .cmt-item .cmt-head .info { display: flex; align-items: center; gap: 10px; }
.cmt-list-wrap .cmt-list .cmt-item .cmt-head .info span { display: flex; align-items: center; gap: 10px; }
.cmt-list-wrap .cmt-list .cmt-item .cmt-head .info span + span::before { content:""; width: 1px; height: 10px; background: var(--gray-dd); }
.cmt-list-wrap .cmt-list .cmt-item .cmt-head .btn-wrap { display: flex; align-items: center; gap: 5px; }



/* 챌린지 참여 > 챌린지 자가진단 모바일에서만 중앙정렬 요청 */
@media only screen and (max-width: 767px) {
    .mx-w-600 .form-table.form-resp-table th { text-align: center; }
    .mx-w-600 .form-table.form-resp-table td { text-align: center; }
    .mx-w-600 .form-table.form-resp-table td > .btn-bace4 { margin: 0 auto; }
    .mx-w-600 .form-table.form-resp-table td > .btn-lf { justify-content: center; }
    
}



.chlg-lp .popup-box2 { position: relative; }
.chlg-lp .popup-box2 .chlg-pop-swiper { max-width: calc(100% - 120px); }
.chlg-lp .popup-box2 .swiper-btn-st1 {  }
.chlg-lp .popup-box2 .swiper-btn-st1 div { position: absolute; top: 50%; transform: translateY(-50%); }
.chlg-lp .popup-box2 .swiper-btn-st1 .swiper-button-prev { left: 0; }
.chlg-lp .popup-box2 .swiper-btn-st1 .swiper-button-next { right: 0; }
@media only screen and (max-width: 470px) {
    .chlg-lp .popup-box2 .chlg-pop-swiper { max-width: 100%; }
}


.index-box {  }
.index-box .bd-box-st1:last-child { border-top: 0; }
.index-box .bd-box-st1:last-child ul { display: flex; flex-wrap: wrap; row-gap: 5px; }
.index-box .bd-box-st1:last-child ul > li { width: 33.3%; }
.index-box .bd-box-st1:last-child ul > li + li { margin-top: 0; }

.label-box { display: flex; align-items: stretch; }
.label-box .item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 20%; padding: 30px; text-align: center; }
.label-box .item + .item { border-left: 1px solid var(--gray-e5); }
.label-box .item span { line-height: 1.2; }

.info-body .b-tit-st2 { display: flex; align-items: center; gap: 15px; }
@media only screen and (max-width: 767px) {
    .index-box .bd-box-st1:last-child ul > li { width: 50%; }

    .label-box { flex-wrap: wrap; }
    .label-box .item { flex: 1 1 50%; border-bottom: 1px solid var(--gray-e5); }
    .label-box .item img { width: 50px; }
}
@media only screen and (max-width: 470px) {
    .label-box .item { flex: 1 1 100%; padding: 15px; border-left: 1px solid var(--gray-e5); border-right: 1px solid var(--gray-e5); }

}