@charset "UTF-8";

@import "font.css";
@import "reset.css";
@import "var.css";
@import "main.css";

html{  scroll-behavior: smooth;}

main {margin: 7rem 0 0 0; width: calc(100% - 22rem);}
select {appearance: none; padding: 0 3.5rem 0 1.5rem; background: url('../images/icon_select_arrow.png') no-repeat right 1.6rem center;}
input {border-radius: 0.1rem;}
input[type="checkbox"]:disabled {cursor: revert;}
input[type=checkbox] {position: relative; margin-right: 1rem; appearance: none; width: 2rem; height: 2rem; cursor: pointer;}
input[type=checkbox]:after {position: absolute; left: 0; top: 0; border: 1px solid var(--gray-1); display: block; content: ''; width: 100%; height: 100%; border-radius: 0.5rem; background: url("../images/icon_check_gray.svg") no-repeat center/1rem; transition: 0.3s;}
input[type=checkbox]:checked:after {background: var(--red) url("../images/icon_check_white.svg") no-repeat center/1rem; border-color: transparent;}

input[type='radio']:not(.custom-radio input, input.palette) {-webkit-appearance:none; width: 1.8rem; height:1.8rem; border:1px solid var(--gray-1); border-radius:50%; outline:none; background: #ffffff;}
input[type='radio']:not(.custom-radio input, input.palette):before {content:''; display:block; width:60%; height:60%; margin: 20% auto; border-radius:50%;}
input[type='radio']:not(.custom-radio input, input.palette):checked:before {background: var(--red);}

.tooltip {position: absolute; top: -2.5rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; padding: 0 1.2rem; height: 3rem; font-size: 1.2rem; color: rgba(255, 255, 255, 0.8); background: rgba(10, 10, 10, 0.8); min-width: 11.3rem; font-weight: 700; transition: all 0.3s; opacity: 0; z-index: 100;}
.tooltip:after {content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 0; border: 0.5rem solid transparent; border-top-color: rgba(10, 10, 10, 0.8); border-bottom: 0; margin-left: -0.5rem; margin-bottom: -0.5rem;}

/* layout */
.container {width: 100%; max-width: 102rem; padding: 0 1.5rem; margin: 0 auto;}
#wrap {display: flex; min-height: calc(var(--vh, 1vh) * 100);}
#mainCont {margin-top: 9rem;}
.w-200 {width: 20rem !important;}

/* button */
.btn-gray {height: 3.7rem; padding: 0 1.5rem; background: var(--grayblue); border-radius: 0.5rem; color: #ffffff; font-size: 1.4rem; font-weight: 700; transition: 0.2s;}
.btn-gray:hover {background: #555d63; transition: 0.2s;}
.btn-red {height: 4.3rem; padding: 0 1.5rem; background: var(--red); border-radius: 0.5rem; color: #ffffff; font-size: 1.4rem; font-weight: 700; transition: 0.2s; width: 100%;}
.btn-red.big {height: 6rem; border-radius: 0.8rem; font-size: 1.6rem; display: flex; align-items: center; justify-content: center;}
.btn-red:hover {background: #eb0000; transition: 0.2s;}
.btn-purple {height: 4.3rem; padding: 0 1.5rem; background: #c000ff; border-radius: 0.5rem; color: #ffffff; font-size: 1.4rem; font-weight: 700; transition: 0.2s;}
.btn-purple:hover {background: #ad02e5; transition: 0.2s;}
.btn-yellow {height: 4.3rem; padding: 0 1.5rem; background: #F3CC00; border-radius: 0.5rem; color: #000000; font-size: 1.4rem; font-weight: 700; transition: 0.2s;}
.btn-yellow:hover {background: #e8c100; transition: 0.2s;}
.btn-line {height: 4.3rem; padding: 0 1.5rem; border: 1px solid var(--gray-1); border-radius: 0.5rem; color: var(--light-gray-2); font-size: 1.4rem; font-weight: 700; background-color: #ffffff; transition: 0.2s;}
.btn-line:hover {border: 1px solid var(--red); border-radius: 0.5rem; color: var(--red); transition: 0.2s;}
.btn-line.active {background: var(--red); color: #ffffff; border: none; font-weight: 700 !important;}
.btn-event {height: 3.9rem; padding: 0 1.5rem; border-radius: 19.5rem; color: #ffffff; background-image: linear-gradient(90deg, rgba(251,12,25,1) 0%, rgba(255,0,210,1)); background-position: 30%; background-size: 200%; transition: 0.3s;}
.btn-event:hover {background-position: 80%; transition: 0.3s;}
.btn {background: none;}
.search-btn{background: url(../images/icon_search.png) no-repeat center/contain; width: 1.6rem; height: 1.6rem;}
.search-del-btn{background: url(../images/icon_search_del_btn.svg) no-repeat center/100%; width: 1rem; height: 1rem; padding: 1rem; background-size: auto;}
a.btn-gray {display: inline-block; line-height: 3.7rem;}
a.btn-red {display: inline-block;}

.red {color: var(--red) !important;}
.purple {color: var(--purple) !important;}
.dark {color: var(--dark-gray) !important;}

.top-number {margin-left: 0.5rem; margin-bottom: 2rem; color: var(--red); font-size: 1.2rem; font-weight: 800;}
.custom01 {width: 100%; height: 6rem; padding: 0 2.4rem; background: var(--light-gray-1); border-radius: 0.8rem;}
.custom01::placeholder {color: var(--light-gray-2);}
.custom02 {width: 1.8rem !important; height: 1.8rem; appearance: none; border-radius: 50%; border: 1px solid var(--gray-1); margin-right: 0.8rem;}
.warn-txt {color: var(--red);}
.strong-tit {font-size: 2.4rem; color: var(--red); font-weight: 700;}

.link-flex-wrap {display: flex; align-items: center;}
.link-flex-wrap.end {justify-content: flex-end;}
.justify-center {justify-content: center;}

.d-block{display: block;}
.fs-14{font-size: 1.2rem; margin-top: 0.5rem; font-weight: normal;}

.form-subtit{font-size: 4rem; font-weight: 900; text-align: center; margin-bottom: 2rem;}

/* 탭메뉴 공통 */
.default-tab .tab-nav {display: flex; align-items: center;}
.default-tab .tab-nav li.on a {font-weight: 700;}
.default-tab .tab-cont {display: none;}
.default-tab .tab-cont.on {display: block;}

/* 아코디언탭 */
.accordion-menu .accordion-body {display: none;}

/* header */
#header { display: flex; width: 22rem;}



.nav-header{position: fixed; top: 0; z-index: 99; width: calc(100% - 22rem); height: 7rem; background-color: #ffffff; border-bottom: 1px solid var(--gray-2);}
.nav-header .header-inner {display: flex; justify-content: space-between; align-items: center; width: 100%; height: 100%; font-size: 1.6rem; color: var(--dark-gray); font-weight: 700;}
.nav-header .gnb-area > ul {position: relative; display: flex;}
.nav-header .gnb-area > ul > li > a {display: inline-block; padding: 0 2rem; font-size: 1.5rem;}
.nav-header .gnb-area > ul > li:first-of-type > a {padding-left: 0;}
.nav-header .gnb-area .nav-depth {position: absolute; top: 8.6rem; left: 0; display: none; align-items: center; width: 100vw; font-weight: 700; height: 11rem; color: var(--mid-gray); z-index: 1;}
.nav-header .gnb-area .nav-depth li {font-size: 1.6rem; transition: 0.2s;}
.nav-header .gnb-area .nav-depth li a {display: block; padding: 2rem 4rem;}
.nav-header .gnb-area .nav-depth li:hover {color: var(--red); transition: 0.2s;}
.rank-info{display: flex; align-items: center;}
#navBack {display: none; width: 100vw; position: absolute; top: 8.5rem; left: 0; height: 11rem; background: #ffffff; z-index: -1; border-bottom: 1px solid var(--gray-2);}
.nav-header .user-area ul {display: flex; align-items: center; justify-content: flex-end; font-size: 1.4rem; color: var(--mid-gray);}
.nav-header .user-area ul li {padding: 0 1.4rem;}
.nav-header .user-area ul li:last-of-type {padding-right: 0;}
.border-box-input {width: 22rem; padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between; border-radius: 3rem; border: 1px solid var(--gray-1); background-color: var(--light-gray-1); font-weight: 400;}
.border-box-input input {padding: 0 0 0 1rem; font-size: 1.4rem; width: 100%; background-color: var(--light-gray-1);}
.border-box-input input::placeholder {color: var(--light-gray-2);}
.fixed-header {position: fixed; top: 0; left: 0; border-right: 1px solid var(--gray-1); height: calc(var(--vh, 1vh) * 100); min-width: 22rem; width: 22rem; overflow-y: auto; z-index: 101; background-color: #ffffff;}
.fixed-header::-webkit-scrollbar {width: 0.5rem; height: 0.5rem; border-radius: 0.8rem; border: none; outline: none;}
.fixed-header::-webkit-scrollbar-thumb {height: 10%; width: 10%; background: var(--gray-1); border-radius: 0.4rem; border: 2px solid var(--gray-1); outline: none;}
.fixed-header::-webkit-scrollbar-track {background: var(--light-gray-1);}
.fixed-header .brand-logo {width: 14rem; margin: 3rem auto 0;}
.fixed-header .brand-logo img {width: 100%;}
.fixed-header .user-area {position: relative; padding: 3rem 0 4rem; text-align: center;}
.fixed-header .user-area::after {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 0.1rem; background-color: var(--gray-1);}

.fixed-header .user-area .profile {width: 8rem; height: 8rem; border-radius: 50%; overflow: hidden; background-color: var(--gray-2); display: flex; align-items: flex-end; justify-content: center; margin: 0 auto 3rem;}
.fixed-header .user-area .profile img:not(.default-profile) {vertical-align: middle; width: 100%; height: 100%; object-fit: cover;}
.fixed-header .user-area .name {font-size: 1.6rem; font-weight: 700;}
.fixed-header .user-area .email {margin-top: 1.3rem; font-size: 1.3rem; color: var(--light-gray-2);}
.fixed-header .user-area .amount {margin-top: 2.3rem; font-size: 1.5rem; font-weight: 700;}
.fixed-header .user-area .amount span {color: var(--red); font-size: 2.8rem;}
.fixed-header .user-area .user-login-btn {display: flex; margin-top: 2.6rem; padding: 0 3rem;}
.fixed-header .user-area .user-login-btn button {height: 3.6rem; margin-right: 0.5rem;}
.fixed-header .user-area .user-login-btn button:last-of-type {margin-right: 0;}

.fixed-header .lnb-menu {position: relative; padding: 2.5rem 1rem;}
.fixed-header .lnb-menu::after {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 0.1rem; background-color: var(--gray-1);}
.fixed-header .lnb-menu .nav-item {padding: 1.4rem 2rem; font-size: 1.3rem; border-radius: 0.5rem; transition: 0.2s; color: #333333;}
.fixed-header .lnb-menu .nav-item span.tag {color: #ff003c; font-weight: 500; font-size: 10px; margin-left: 0.5rem;width: auto;}
.fixed-header .lnb-menu .nav-item.active {background: #ff0000; color: #ffffff;}
.fixed-header .lnb-menu .nav-item.active svg path {stroke: #ffffff !important;}
.fixed-header .lnb-menu .nav-item:hover {background: var(--light-gray-1); transition: 0.2s; color: #333333;}
.fixed-header .lnb-menu .nav-item:hover svg path {stroke: #333333 !important;}
.fixed-header .lnb-menu .nav-item.bold {padding: 1.25rem 0; font-size: 1.4rem; font-weight: 700;}
.fixed-header .lnb-menu .nav-item.flex {display: flex; align-items: center;}
.fixed-header .lnb-menu .nav-item a {position: relative; display: flex; align-items: center;}
.fixed-header .lnb-menu .nav-item a.line {display: flex; align-items: center;}
.fixed-header .lnb-menu .nav-item a svg {margin-right: 1.3rem; width: 1.6rem;}
.fixed-header .lnb-menu .nav-item a.line:after {display: inline-block; content: ''; width: 1px; height: 1.3rem; background: var(--gray-1); margin: 0 1rem;}

.fixed-header .snb-menu {padding: 3.5rem 3rem; font-size: 1.3rem; line-height: 1.3rem; color: var(--light-gray-2);}
.fixed-header .snb-menu .nav-item {padding: 1.25rem 0;}
.fixed-header .snb-menu .nav-item .sns-icon {display: inline-block; width: 1.6rem; height: 1.6rem; margin-right: 0.8rem; border-radius: 0.3rem; padding: 0.3rem; background-color: #fbe300; line-height: 1.3rem;}
.fixed-header .snb-menu .nav-item .sns-icon.naver {background-color: #01C43D;}
.fixed-header .snb-menu .nav-item .sns-icon img {width: 100%; height: 100%; object-fit: contain;}

.snb-menu .accordion-header {display: flex; align-items: center; justify-content: space-between; font-size: 1.4rem; color: var(--dark-gray); cursor: pointer;}
.snb-menu .accordion-header .open {position: relative; width: 15px; height: 15px;}
.snb-menu .accordion-header .open:after {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1.1rem; height: 0.1rem; background: #545555; transition: 0.2s;}
.snb-menu .accordion-header .open:before {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0.1rem; height: 1.1rem; background: #545555; transition: 0.2s;}
.snb-menu .accordion-header.on .open:after, .snb-menu .accordion-header.on .open:before {transform: translate(-50%, -50%) rotate(135deg); transition: 0.2s;}
.snb-menu .campaign-list li {display: flex; align-items: center; margin-bottom: 1.2rem;}
.snb-menu .campaign-list .img-box {width: 2.1rem; height: 2.1rem; margin-right: 0.8rem; border-radius: 50%; overflow: hidden;}
.snb-menu .campaign-list .img-box img {width: 100%; height: 100%; object-fit: cover;}

.snb-menu .campaign-list {width: 100%; padding: 2rem 0 0;}
.snb-menu .campaign-list .title {overflow: hidden; white-space: nowrap; word-break: break-all; text-overflow: ellipsis; -o-text-overflow: ellipsis; width: calc(100% - 2.9rem);}

/* 20250106 하위 메뉴 추가 */
.sub-menu {display: none;}
.sub-menu.active {display: block}
.sub-menu {padding: 0 0 0 3rem;}
.sub-menu li {margin-top: 1.2rem;}
.nav-item > .nav-link:after {content: "+"; display: block; margin-left: auto;}
.nav-item > .nav-link.active:after {content: "-"; font-size: 2rem;}

.menu-btn-wrap {display: flex; align-items: center; height: 100%;}
.menu-btn-wrap .menu-btn {width: 3rem; height: 3rem; margin-left: 2rem; background: url(../images/icon_hamburger.svg) no-repeat center;}
.mobile-overlay {position: fixed; display: none; width: 100vw; height: calc(var(--vh, 1vh) * 100); background-color: rgba(0, 0, 0, 0.5); z-index: 100;}
.mobile-overlay.active {display: block;}
.mobile-header {position: fixed; display: none; top: 0; width: 100%; height: 7rem; border-bottom: 1px solid var(--gray-2); background-color: #ffffff; z-index: 99;}
.mobile-header .brand-logo {position: absolute; top: 50%; left: 50%; width: 14rem; transform: translate(-50%, -50%);}
.mobile-header .brand-logo img {width: 100%;}

.search-btn.mobile {display: none;}


/* footer */
#footer {color: var(--mid-gray); line-height: 2.4rem; font-size: 1.3rem;}
#footer .foot-nav {background-color: var(--light-gray-1);}
#footer .foot-nav .container {display: flex; align-items: center; justify-content: space-between; padding: 2rem 1.5rem; color: var(--mid-gray);}
#footer .foot-nav ul {display: flex; align-items: center; font-size: 1.4rem; font-weight: 400;}
#footer .foot-nav ul li a {padding: 1.5rem;}
#footer .foot-nav ul li:first-of-type, #footer .foot-nav ul li:nth-of-type(2) {color: var(--dark-gray);}
#footer .foot-nav .user-info {display: flex; align-items: center; font-size: 1.6rem;}
#footer .foot-nav .user-info dl {display: flex; align-items: center; margin-left: 2.5rem;}
#footer .foot-nav .user-info dl dd {margin-left: 1rem; font-weight: 800; color: var(--dark-gray);}

#footer .foot-cont .container {display: flex; align-items: center; justify-content: space-between; padding: 5rem 1.5rem 7rem;}
#footer .foot-cont .company {margin-top: 2.6rem; font-size: 1.3rem;}
#footer .foot-cont .company span {position: relative; padding: 0 1rem;}
#footer .foot-cont .company span:first-of-type {padding-left: 0;}
#footer .foot-cont .company span::after {position: absolute; content: ''; top: 50%; right: -0.2rem; transform: translateY(-50%); width: 0.1rem; height: 1.2rem; background: var(--gray-2);}
#footer .foot-cont .company span:last-of-type::after {content: none;}
#footer .foot-cont .copyright {font-size: 1.3rem; font-weight: 700; margin-top: 2.3rem;}


#footer .foot-cont .right {text-align: right;}
#footer .foot-cont .tel {font-size: 3rem; color: var(--dark-gray); margin-bottom: 2.4rem; font-weight: 800;}
#footer .foot-cont .sns-wrap {display: flex; align-items: center; justify-content: flex-end; margin-top: 2.4rem;}
#footer .foot-cont .sns-wrap div {margin-left: 1.5rem;}
#footer .foot-cont .sns-wrap div a {display: flex;}


@media (max-width:768px) {
    #footer .foot-nav .container {justify-content: center; padding: 2rem;}
    #footer .foot-nav ul {justify-content: center; flex-wrap: wrap;}
    #footer .foot-nav ul li a {padding: 0 1rem;}
    #footer .foot-cont .container {flex-direction: column; align-items: flex-start; padding: 5rem 2rem 7rem;}
    #footer .foot-cont .company .block {display: block; position: unset;}
    #footer .foot-cont .company .block + span {padding-left: 0;}
    #footer .foot-cont .copyright {margin-top: 1.5rem;}
    #footer .foot-cont .right {margin-top: 3rem; text-align: left;}
    #footer .foot-cont .tel {margin-bottom: 1.5rem; font-size: 2rem;}
    #footer .foot-cont .sns-wrap {justify-content: flex-start;}
    #footer .foot-cont .sns-wrap div:first-child {margin-left: 0;}
}

/* cpa 리스트 */

/* cpa 상세 */
.detail-wrap .detail-info {display: flex; padding: 6rem 0;}
.detail-wrap .detail-info::-webkit-scrollbar {width: 0.5rem; height: 0.5rem; border-radius: 0.8rem; border: none; outline: none;}
.detail-wrap .detail-info::-webkit-scrollbar-thumb {height: 10%; width: 10%; background: var(--gray-1); border-radius: 0.4rem; border: 2px solid var(--gray-1); outline: none;}
.detail-wrap .detail-info::-webkit-scrollbar-track {background: var(--light-gray-1);}

.detail-info .item-thumb {position: relative; width: 32%; height: auto; border-radius: 0.8rem; overflow: hidden;}
.detail-info .item-thumb:after{content: ''; display: block; padding-bottom: 100%;}
.detail-info .item-thumb img {width: 100%; height: 100%; object-fit: cover; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); position: absolute; top: 50%; left: 50%;}
.detail-info .item-thumb .badge-wrap,.main-list .badge-wrap {position: absolute; top: 1.2rem; right: 1.2rem; display: flex; align-items: center; z-index: 10;}
.detail-info .item-thumb .badge-wrap .badge,.main-list .badge-wrap .badge {font-size: 1.2rem; color: #ffffff; font-weight: 700; background: rgba(0, 0, 0, 0.5); padding: 0.5rem 0.7rem; border-radius: 0.5rem; margin-right: 0.5rem;}
.detail-info .item-thumb .badge-wrap .badge:last-of-type,.main-list .badge-wrap .badge:last-of-type {margin-right: 0;}
.detail-info .item-desc {width: 68%; margin-left: 3rem; display: flex; flex-direction: column;}
.detail-info .item-desc .item-title { font-size: 2rem; font-weight: 700; margin-bottom: 2rem; line-height: 2.6rem;}
.detail-info .item-desc .item-title.multi-line {display: flex;}
.detail-info .item-desc .item-title.multi-line .category::after {top: 12px;}
.detail-info .item-desc .item-title.multi-line .sub-title {font-size: 16px; font-weight: 500; color: #333333;}
.detail-info .item-desc .item-title .category {position: relative; display: inline-block; color: var(--red); margin-right: 2rem;}
.detail-info .item-desc .item-title .category::after {content: ''; position: absolute; top: 50%; right: -1.3rem; width: 0.1rem; height: 1.6rem; background-color: var(--gray-1); transform: translateY(-50%);}
.detail-info .item-desc .item-title .title {display: inline;}
.detail-info .item-desc .item-type {font-size: 1.6rem; font-weight: 700; margin-bottom: 0.5rem;}
.detail-info .item-desc .item-type + .item-title {font-weight: 400; overflow: hidden; white-space: nowrap; word-break: break-all; text-overflow: ellipsis; -o-text-overflow: ellipsis;}
.item-desc .item-btm {display: flex; align-items: center; font-size: 1.3rem;}
.item-desc .item-btm-txt {display: flex; align-items: center; margin-right: 1rem;}
.item-desc .item-btm-txt img {margin-right: 0.4rem;}
.detail-info .button-wrap {margin-top: auto;}
.detail-info .button-wrap button {width: 100%; height: 4.3rem;}
.detail-info .button-wrap button:last-of-type {margin-right: 0;}
.item-title-wrap {border-bottom: 1px solid var(--gray-2); padding: 0 0 2.5rem;}


.item-info {padding: 3rem 0;}
.item-info dl {display: flex; align-items: center; margin-bottom: 1.3rem; font-size: 1.4rem; }
.item-info dl:last-of-type {margin-bottom: 0;}
.item-info dl dt {color: var(--mid-gray); width: 10rem;}
.item-info dl dd {font-weight: 700;}
.button-wrap {display: flex; align-items: center;}
.button-wrap button {margin-right: 1rem; width: auto; height: 3.7rem;}

.campaign-notice > .cont {margin-top: 4rem;}
.campaign-notice .tit {position: relative; display: inline-block; font-size: 1.6rem; font-weight: 700; color: var(--red); margin-bottom: 2rem;}
.campaign-notice .tit::after {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 0.6rem; opacity: 20%; background: var(--red);}
.campaign-notice .tit + .round-box {margin-top: 1rem;}
.campaign-notice .txt {margin: 0 0 2rem 0 !important;}
.detail-tab .tab-cont .campaign-notice .txt {margin-top: 2rem; line-height: 2.2rem;}

.round-box {width: 100%; padding: 2rem; margin-bottom: 1.5rem; border-radius: 0.8rem; font-size: 1.3rem; background: #ffffff;}
.dash-list li {position: relative; line-height: 2.4rem;}
/*.dash-list li::after {content: ''; position: absolute; top: 1.2rem; left: 0; width: 0.5rem; height: 0.1rem; background: var(--mid-gray);}*/

.word-badge span {display: inline-block; padding: 0 1.5rem; margin: 0 0.5rem 1rem 0; height: 3.4rem; line-height: 3.4rem; border-radius: 1.7rem; border: 1px solid var(--gray-2); background: #ffffff; font-size: 1.3rem; color: var(--dark-gray); transition: 0.3s;}
.word-badge.advertiser span {font-weight: 700; color: #ff7c7c;}
.word-badge + .txt {margin-top: 3rem !important;}
.word-badge span:hover {background: var(--gray-1); transition: 0.3s;}
.advertiser {color: #ff7c7c !important;}
p.advertiser {line-height: 1.5; white-space: pre-line;}
.advertiser li::after {background: #ff7c7c !important;}

/* 상세 탭메뉴 */
.detail-tab .tab-nav li {position: relative; width: 18rem; height: 6rem; display: flex; align-items: center; justify-content: center; color: var(--dark-gray); font-size: 1.5rem; font-weight: 700; transition: 0.2s;}
.detail-tab .tab-nav li::after {position: absolute; top: 50%; left: 0; content: ''; width: 0.1rem; height: 1.5rem; background: var(--gray-2); transform: translateY(-50%);}
.detail-tab .tab-nav li:first-of-type::after {content: none;}
.detail-tab .tab-nav li a {width: 100%; height: 100%; text-align: center; line-height: 6rem;}
.detail-tab .tab-nav li.on::after, .detail-tab .tab-nav li.on + li::after {content: none;}
.detail-tab .tab-nav li.on {background: var(--light-gray-1); border-radius: 0.8rem 0.8rem 0 0; color: var(--dark-gray); transition: 0.2s;}
.detail-tab .tab-nav p {width: calc(100% - 54rem); text-align: right; font-size: 1.3rem; color: var(--mid-gray); margin-left: auto;}
.detail-tab .tab-nav > button {margin-left: auto; min-width: 17rem;}

.detail-tab .tab-cont {background: var(--light-gray-1); padding: 1rem 4rem; border-radius: 0.8rem;}
.detail-cont .detail-tab .tab-cont > div {padding: 6rem 0; border-bottom: 1px solid var(--gray-2);}
.detail-cont .detail-tab .tab-cont > div:last-of-type {border-bottom: 0;}

.detail-tab .tab-cont .title {padding: 0 1.4rem; font-size: 2rem; font-weight: 700;}
.detail-tab .tab-cont .txt {display: flex; justify-content: space-between; margin: 1rem 0 4rem 0; padding: 0 1.4rem; font-size: 1.4rem; color: var(--mid-gray);}
.detail-tab .tab-cont .creative-cont .txt {padding: 0 0 0 1.4rem;}

.video-box {max-width: 66rem; margin: 0 auto;}
.video-box .cont {position: relative; padding-bottom: 50%; padding-top: 30px; height: 0; overflow: hidden;}
.video-box .cont iframe {width: 100%; height: 100%;}

.video-box iframe, .video-box object, .video-box embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


.img-wrap {display: flex; justify-content: space-between; min-height: 25rem;}
.img-wrap .img-box {margin-right: 2rem; height: 36rem; transition: 0.3s; width: 100%; border-radius: 0.8rem; overflow: hidden;}
.img-wrap .img-box:hover {box-shadow: rgba(66, 66, 66, 0.07) 0 8px 24px; border-radius: 0.8rem; transition: 0.3s;}
.img-wrap .img-box:last-of-type {margin-right: 0;}
.img-wrap .img-box .thumb {display: flex; align-items: center; justify-content: center; height: 30rem; overflow: hidden; background: var(--black);}
.img-wrap .img-box .thumb img{object-fit: contain; width: 100%;}

.img-wrap .img-box:nth-child(1) {width: 30rem;}
.img-wrap .img-box:nth-child(1) .thumb img {height: 100%; object-fit: cover;}
.img-wrap .img-box:nth-child(2) {width: 40rem;}
.img-wrap .img-box:nth-child(3) {width: 20rem;}

.img-wrap .img-box:nth-child(3) .thumb img{height: 100%;}
.img-wrap .img-box .desc {display: flex; align-items: center; justify-content: space-between; width: 100%; height: 6rem; border-radius: 0 0 0.8rem 0.8rem; padding: 2rem; background: #ffffff; font-size: 1.4rem; font-weight: 700; color: var(--mid-gray);}

.copy-box {width: 100%; transition: 0.3s;}
.copy-box:hover {box-shadow: rgba(66, 66, 66, 0.07) 0 8px 24px; border-radius: 0.8rem; transition: 0.3s;}
.copy-box .cont {padding: 2.2rem 2rem; border-radius: 0.8rem 0.8rem 0 0; background: #ffffff; font-size: 1.3rem; color: var(--light-gray-2); line-height: 2.2rem; min-height: 13rem; border-bottom: 1px solid var(--gray-2);}
.copy-box .cont:last-child {border-bottom: none; border-radius: 0 0 0.8rem 0.8rem;}
.copy-box .btn {border-radius: 0 0 0.8rem 0.8rem; padding: 1.8rem 0; width: 100%; height: 5rem; background: #ffffff; font-size: 1.3rem; font-weight: 700; color: var(--mid-gray);}
.copy-box .button-wrap button{margin-right: 0;}
.copy-box.mh-auto {margin-bottom: 2rem;}
.copy-box.mh-auto:last-child {margin-bottom: 0;}
.copy-box.mh-auto .cont {min-height: auto; position: relative;}
input.underline {border-bottom: 1px solid #D9D9D9; width: 100%; padding-bottom: 0.4rem; padding-right: 3rem;}
.copy-box.mh-auto .cont .save-btn {position: absolute; right: 2.5rem; top: 50%; transform: translateY(-50%); bottom: 0.4rem; background: url("../images/icon_check_gray2.svg") no-repeat center/cover; width: 2rem; height: 2rem;}
.copy-box.mh-auto .cont .copy-btn {position: absolute; right: 2.5rem; top: 50%; transform: translateY(-50%); bottom: 0.4rem; background: url("../images/icon_copy_gray.svg") no-repeat center/cover; width: 2rem; height: 2rem;}
.copy-box.mh-auto .cont .edit-wrap {position: relative; width: fit-content;}
.copy-box.mh-auto .cont:hover .edit-btn {display: block;}
.copy-box.mh-auto .cont .edit {color: var(--mid-gray); width: fit-content;}
.copy-box.mh-auto .cont .edit-btn {position: absolute; display: none; content: ''; right: -3.2rem; top: 50%; transform: translateY(-50%); width: 2rem; height: 2rem; background: url("../images/icon_edit_gray.svg") no-repeat center/cover;}

.link-wrap{}
.link-wrap .conts-title{background:  var(--mid-gray); color: #ffffff; text-align: left; font-size: 2rem; padding: 10px;}
.link-wrap  ~ .link-wrap {margin-top: 1rem;}
.link-wrap .link-conts{display: flex; align-items: flex-end; margin-top: 1rem;}
.link-wrap .link-conts input{width: 100%; padding: 1rem 0.5rem;}
.link-wrap .link-conts button{}

.banner-cont {display: flex; align-items: center;}
.banner-cont .img-box {width: 37rem; height: 24rem; border-radius: 0.8rem; overflow: hidden; margin-right: 1rem; background: var(--black); display: flex; align-items: center; justify-content: center;}
.banner-cont .img-box img {width: 100%; height: 100%; object-fit: cover;}

.banner-cont .img-box .cont:after{content: ''; display: block; padding-bottom: 50%;}
.banner-cont .img-box .cont img {width: 100%; height: 100%; object-fit: cover; transform: translate(-50%,-27%); position: absolute; top: 50%; left: 50%;}

.banner-cont .copy-box {height: 100%;}
.banner-cont .copy-box .cont {height: 19rem;}

.external-form-wrap .button-wrap {display: flex; align-items: center;}
.external-form-wrap .button-wrap .btn-gray {width: 100%; margin-right: 2rem; display: flex; align-items: center; justify-content: space-between;}
.external-form-wrap .button-wrap .btn-gray:last-child {margin-right: 0;}
.external-form-wrap .form-cont {display: flex; justify-content: space-between;}
.external-form-wrap .form-cont .btn-gray {display: flex; align-items: center; justify-content: space-between; width: 30rem; margin-right: 2rem;}
.external-form-wrap .form-cont .form-box {width: calc(100% - 32rem);}
.external-form-wrap .form-cont .form-box > div {margin-bottom: 2rem;}
.external-form-wrap .form-cont .form-box > div:last-of-type {margin-bottom: 0;}
.external-form-wrap .form-cont .form-box .box {width: 100%; display: flex; align-items: center; justify-content: center; min-height: 3.7rem; border-radius: 0.8rem; font-size: 1.3rem; color: var(--light-gray-2); text-align: center; background: #ffffff;}
.external-form-wrap .form-cont .form-box .copy-box {position: relative;}
.external-form-wrap .form-cont .form-box .copy-box .cont {min-height: 5.6rem;}
.external-form-wrap .list-box {margin-top: 2rem;}

.list-box {padding: 0 2rem; margin-top: 2rem; border-radius: 0.8rem; background: #ffffff;}
.list-box .cont {display: flex; align-items: center; justify-content: space-between; font-size: 1.3rem; color: var(--light-gray-2);  padding: 2rem 0; border-bottom: 1px solid var(--gray-2);}
.list-box .cont:last-of-type {border-bottom: 0;}

.close-btn {position: absolute; top: -1rem; right: -1rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; box-shadow: rgba(66, 66, 66, 0.2) 3px 3px 20px; background: url(../images/icon_close.png) no-repeat center #ffffff; z-index: 1;}
.delete-btn {width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--gray-2); background: url(../images/icon_close.png) no-repeat center #ffffff; z-index: 1;}

/* 퀵메뉴 */
#quickSns {position: fixed; left: 2.813%; bottom: calc(var(--vh, 1vh) * 5); z-index: 99;}
#quickSns ul {display: flex; flex-direction: column;}
#quickSns ul li {border-radius: 50%; margin-bottom: 0.5rem;}
#quickSns ul li:last-child {margin-bottom: 0;}
#quickSns ul li a {position: relative; display: flex; align-items: center; justify-content: center; width: 6rem; height: 6rem;}
#quickSns ul li a:hover .tooltip {opacity: 1;}
.sns-01 {background: #fbe300;}
.sns-02 {background: #01c43d;}
.sns-03 {background: #f9e000;}

#quickMenuBtn {position: fixed; right: 0; bottom: 38%; width: 2.5rem; height: 12rem; background: var(--red); z-index: 99; border-radius: 0.8rem 0 0 0.8rem; box-shadow: 0 0 40px 0 rgba(66, 66, 66, 0.15);}
#quickMenuBtn:after {position: absolute; width: 100%; height: 100%; display: flex; content: ''; align-items: center; justify-content: center; background: url("../images/icon_arrow_left_white.svg") no-repeat center; left: 0; top: 0; transition: 0.3s;}
#quickMenuBtn.open:after {transform: rotate(180deg);}

#quickMenu {position: fixed; right: 7.813%; bottom: 10%; box-shadow: 0 0 40px 0 rgba(66, 66, 66,0.15); min-width: 12rem; border-radius: 0.8rem; display: none; background: #ffffff; z-index: 99;}
#quickMenu .close-btn {position: absolute; right: -1.3rem; top: -1.3rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: #ffffff url("../images/icon_close_black.svg") no-repeat center;}
#quickMenu .menu-title {background: var(--red); padding: 1.8rem 0; border-radius: 0.8rem 0.8rem 0 0; display: flex; align-items: center; justify-content: center; color: #ffffff; font-weight: 700;}
#quickMenu ul {padding: 2.5rem 2.5rem 0 2.5rem; text-align: center;}
#quickMenu ul li {border-bottom: 1px solid var(--gray-1); padding-bottom: 2rem; margin-top: 2rem;}
#quickMenu ul li:first-child {margin-top: 0;}
#quickMenu ul li:last-child {border-bottom: none; padding-bottom: 2.5rem;}
#quickMenu ul li a {font-size: 1.4rem; font-weight: 700;}
#quickMenu .top-btn {margin: 0 1.5rem 2rem; width: calc(100% - 3rem); height: 3rem; border-radius: 0.8rem; background: var(--grayblue); color: #ffffff; font-size: 1.4rem; font-weight: 800;}


/* lnb */
.lnb-container {display: flex;}
.lnb-container > section {width: 100%;}
.lnb-wrap {position: sticky; top: 8.4rem; min-width: 17.5rem; margin: 6rem 6.5rem 0 0;}
.lnb-wrap .lnb-title {font-size: 2.4rem; font-weight: 700;}
.lnb-wrap ul {margin-top: 4.7rem;}
.lnb-wrap ul li {width: 100%; height: auto; margin-bottom: 1.2rem; color: var(--mid-gray); font-weight: 700;}
.lnb-wrap ul li.active {background: var(--light-gray-1); color: var(--dark-gray);}
.lnb-wrap ul li a {display: inline-block; width: 100%; padding: 1.2rem 2rem;}

/* 고객센터 - 공지사항 */
.board-wrap {margin-top: 6rem;}
.board-title .title {display: flex; font-size: 2.4rem; font-weight: 700; margin-bottom: 1.5rem;}
.board-title .title .new-post {margin: -0.2rem 0 0 1rem; font-size: 1.2rem; font-weight: 800; color: var(--red);}

.board-list {width: 100%;}
.board-info {display: flex; justify-content: space-between; font-size: 1.4rem; margin-bottom: 1.5rem; color: var(--mid-gray);}
.board-info .button-wrap button:last-child {margin-right: 0;}
.search-box {display: flex; align-items: center;}
.search-box button {height: 3.4rem;}
.search-box input {width: 25rem; height: 3.4rem; margin-right: 0.5rem; border: 1px solid var(--gray-1); border-radius: 0.5rem; padding: 0 2rem;}
.search-box input::placeholder {color: var(--light-gray-2);}

/* 게시판 table */
.board-list table {table-layout: fixed;}
.board-list table thead th {padding: 2rem 0; border: 1px solid var(--gray-1); border-left: 0; border-right: 0; font-size: 1.3rem; font-weight: 700; color: var(--mid-gray);}
.board-list table td {padding: 1.7rem 0; text-align: center; border-bottom: 1px solid var(--gray-1); font-size: 1.3rem; color: var(--light-gray-2);}

.board-list.point table td > .title {margin-bottom: 0.8rem; display: inline-block;}
.board-list.point table td > span {color: var(--mid-gray); display: block;}
.board-list table td > .title.reply {background: url("../images/icon_reply_arrow.svg") no-repeat 0 50%; text-indent: 2rem;}
.board-list table td > .title > a {display: flex; text-align: left; color: var(--dark-gray); transition: 0.05s; overflow: hidden; white-space: nowrap; word-break: break-all; text-overflow: ellipsis; -o-text-overflow: ellipsis; width: 100%;}
.board-list table td > .title > a:hover {color: var(--red); transition: 0.05s;}
.board-list table td > .title > a:visited {color: var(--light-gray-2);}
.board-list table td > .title > a span:first-child:not(.notice-badge) {display: block; overflow: hidden; white-space: nowrap; word-break: break-all; text-overflow: ellipsis; -o-text-overflow: ellipsis; max-width: 85%;}
.board-list table td > .title .notice-badge {display: inline-block; border: 1px solid var(--red); border-radius: 0.5rem; padding: 0 1rem; color: var(--red); height: 2.4rem; line-height: 2.4rem; margin-right: 1.2rem;}
.board-list table td.complete {color: var(--red); font-weight: 700}
.board-list table tr.fixed-notice td {background: var(--light-pink);}
.board-list-wrap + .pagination-wrap {margin-top: 7.2rem;}

/* pagination 페이지네이션 */
.pagination-wrap ul {display: flex; align-items: center; justify-content: center;}
.pagination-wrap ul li:not(li:last-of-type) {margin-right: 0.3rem;}
.pagination-wrap .page-link {display: inline-block; width: 3.2rem; height: 3.2rem; line-height: 3.2rem; text-align: center; font-weight: 700; font-size: 1.3rem; border-radius: 0.5rem; color: var(--mid-gray); background: var(--light-gray-1);}
.pagination-wrap .page-link.active {color: #ffffff; background: var(--red);}
.pagination-wrap .page-link.prev {background: url(../images/icon_page_prev.svg) no-repeat center var(--light-gray-1);}
.pagination-wrap .page-link.next {background: url(../images/icon_page_next.svg) no-repeat center var(--light-gray-1);}

/* 게시판 게시글 상세 */
.content-detail-wrap {margin-top: 9.2rem;}
.content-detail-wrap .detail-header {padding-bottom: 4rem; border-bottom: 1px solid var(--gray-2);}
.content-detail-wrap .detail-header .title {font-size: 2.4rem; font-weight: 700; margin-bottom: 1rem;}
.content-detail-wrap .detail-header .cate {font-size: 1.8rem; font-weight: 500; color: var(--mid-gray); margin-bottom: 1.7rem;}
.cont-detail-info {display: flex; align-items: center;}
.cont-detail-info > div {position: relative; margin-right: 2rem; padding-left: 2rem; font-size: 1.4rem; color: var(--mid-gray);}
.cont-detail-info .date::after {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 1.3rem; height: 1.3rem; background: url(../images/icon_detail_date.png) no-repeat center;}
.cont-detail-info .view::after {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 1.5rem; height: 1.1rem; background: url(../images/icon_detail_view.png) no-repeat center;}
.content-detail-wrap .detail-content {padding: 5rem 0; font-size: 1.4rem; line-height: 2.6rem; border-bottom: 1px solid var(--gray-2);}
.content-detail-wrap .detail-bottom {display: flex; align-items: center; justify-content: space-between; margin-top: 1.5rem;}
.content-detail-wrap .detail-bottom > div {display: flex; align-items: center;}
.content-detail-wrap .detail-bottom > div > div {margin-right: 0.5rem; line-height: 3.7rem;}
.content-detail-wrap .detail-bottom .btn-light-gray a, .content-detail-wrap .detail-bottom .btn-light-gray{display: inline-block; width: 6rem; height: 3.4rem; line-height: 3.4rem; text-align: center; background: var(--gray-2); border-radius: 0.5rem; color: var(--mid-gray); font-size: 1.4rem; font-weight: 700;}
.content-detail-wrap .detail-bottom .top-btn {width: 6rem; height: 3.7rem; background: var(--gray-2); border-radius: 0.5rem; color: var(--mid-gray); font-size: 1.4rem; font-weight: 700;}

/* 게시판 글쓰기 */
.content-detail-wrap .write-header .title {font-size: 2.4rem; font-weight: 700;}
.content-detail-wrap .write-header .write-title {display: flex; align-items: center; margin-top: 4rem;}
.content-detail-wrap .write-header .write-title input[type="text"] {height: 3.7rem; border-radius: 0.5rem; border: 1px solid var(--gray-1); padding: 0 2rem; margin-right: 2rem; width: calc(100% - 29rem); font-size: 1.4rem;}
.content-detail-wrap .write-header .write-title input[type="text"]::placeholder {color: var(--light-gray-2);}
.content-detail-wrap .write-header .write-title select{width: 29rem; height: 3.7rem; border-radius: 0.5rem; border: 1px solid var(--gray-1); font-size: 1.4rem;}

.content-detail-wrap .write-header .write-title .checkbox-wrap {width: 27rem; margin: 0;}
.content-detail-wrap .write-content {margin-top: 1rem;}
.temporary-area {display: flex; align-items: center; justify-content: center; width: 100%; height: 60rem; background: var(--gray-1);}
.content-detail-wrap .write-bottom {margin-top: 3rem; display: flex; align-items: center; justify-content: center;}
.content-detail-wrap .write-bottom button {width: 12rem; margin-right: 1rem;}
.content-detail-wrap .write-bottom .btn-red {width: 18rem;}
.content-detail-wrap .write-bottom button:last-of-type {margin-right: 0;}
.board-bottom {margin-top: 1.5rem;}
.board-bottom .button-wrap {justify-content: flex-end;}
.board-bottom .button-wrap a {line-height: 3.7rem;}
.board-bottom + .pagination-wrap {margin-top: 2rem;}
.icon-secret {width: 1.3rem; height: 1.6rem; background: url(../images/icon_list_lock.png) no-repeat center/100%; margin-left: 0.8rem;}
.screen-out {overflow: hidden; position: absolute; width: 1px; height: 1px; clip: rect(0,0,0,0);}

/* 이용문의 상세 */
.answer-wrap {width: 100%; min-height: 20rem; margin-top: 5rem; padding: 2.5rem 3rem 3.8rem; background: var(--light-gray-1); border-radius: 0.5rem;}
.answer-wrap .none-answer {text-align: center; line-height: 20rem; color: var(--light-gray-2);}
.answer-wrap .answer-header {padding-bottom: 2rem; font-weight: 700; border-bottom: 1px solid var(--gray-2);}
.answer-wrap .answer-cont {padding-top: 3rem;}

/* 광고문의 상세 */
.ad-detail-table {border: 1px solid var(--gray-2); border-top: 0; border-bottom: 0;}
.ad-detail-table input:not(input[type="radio"], input[type="checkbox"]) {width: 100%; padding-right: 2rem;}
.ad-detail-table > div {display: flex; align-items: center; border-bottom: 1px solid var(--gray-2);}
.ad-detail-table dl {display: flex; align-items: center; width: 100%;}
.ad-detail-table dl dt {width: 10rem; min-width: 10rem; height: 5.8rem; display: flex; align-items: center; background: var(--light-gray-1); padding-left: 2.5rem; font-size: 1.3rem;}
.ad-detail-table dl dd {height: 5.8rem; display: flex; align-items: center; padding: 0 2.5rem; word-break: break-word; font-size: 1.3rem}
.ad-detail-table dl:nth-child(3) dd {min-width: 25rem;}
.ad-detail-table dl dd.budget {width: 100%; justify-content: space-between;}
.ad-detail-table dl dd .radio-wrap, .ad-detail-table dl dd .checkbox-wrap {margin: 0 3rem 0 0;; color: var(--dark-gray); font-size: 1.3rem;}
.ad-detail-table dl dd .radio-wrap:last-of-type, .ad-detail-table dl dd .checkbox-wrap:last-of-type {margin: 0;}

/* 광고문의 글쓰기 */
.ad-detail-info {margin: 2.5rem 0 1.5rem 0; font-size: 1.4rem; color: var(--light-gray-2);}
.ad-detail-info + .ad-detail-table {border-top: 1px solid var(--gray-2);}
.ad-detail-table dl dd input[type="text"] {width: 100%;height: 100%;}
.ad-detail-table dl dd input::placeholder {color: var(--light-gray-2);}

/* 약관 */
.terms-wrap {margin-top: 5rem;}
.terms-tab .tab-nav {border-bottom: 1px solid var(--gray-1);}
.terms-tab .tab-nav li {padding: 3rem 1.7rem; font-size: 2.4rem; color: var(--light-gray-2); transition: 0.1s;}
.terms-tab .tab-nav li:first-of-type {padding-left: 0;}
.terms-tab .tab-nav li:last-of-type {padding-right: 0;}
.terms-tab .tab-nav li.on {font-weight: 700; color: var(--dark-gray); transition: 0.1s;}
.terms-tab .tab-cont {padding-top: 5rem; font-size: 1.4rem; color: var(--mid-gray); line-height: 2.4rem;}
.terms-tab .title {font-size: 2rem; font-weight: 700; color: var(--dark-gray); margin-bottom: 4rem;}
.terms-tab .sub-title {font-size: 1.6rem; font-weight: 700; margin-bottom: 2rem; color: var(--dark-gray);}
.terms-tab .text + .sub-title {margin-top: 4rem;}
.terms-tab .text pre {white-space: pre-wrap;}

.terms-table {margin: 2.7rem 0 3.3rem;}
.terms-table table th, .terms-table table td {border: 1px solid var(--gray-1); padding: 1.5rem 2rem; font-size: 1.4rem; font-weight: 400;}

/* 상세통계 */
.bg-content {padding: 7rem 3.8rem; min-height: 76.7rem; width: 100%; background: var(--light-gray-1);}
.stats-wrap .bg-content {margin-top: 3rem;}
.stats-wrap {margin-top: 6.8rem;}
.stats-input-wrap {display: flex; align-items: center; justify-content: space-between; font-size: 1.4rem;}
.stats-wrap .stats-input-wrap {margin-top: 3rem;}
.stats-input-wrap button:not(.search-box button) {padding: 0 1rem; height: 3.7rem;}
.stats-input-wrap > div {position: relative; display: flex; align-items: center; width: 100%;}
.stats-input-wrap .date-button-wrap button {width: 100%;}
.date-button-wrap:not(.stats-input-wrap .date-button-wrap) button {height: 3.4rem; min-width: 7rem; margin-right: 1rem;}
.stats-input-wrap .line {width: 0.1rem; height: 2rem; margin: 0 1rem; background: var(--gray-2);}
.stats-input-wrap .select-wrap {min-width: 26%;}
.stats-input-wrap .select-wrap select {width: 100%; height: 3.7rem; font-size: 1.4rem; border-radius: 0.5rem; border: 1px solid var(--gray-1);}
.stats-input-wrap .select-wrap select:focus {outline: none;}
.stats-input-wrap .calendar-wrap .calendar {border-radius: 0.5rem; max-width: 34.7rem;}
.date-button-wrap button, .calendar-wrap button {font-weight: 400;}
.stats-input-wrap .date-button-wrap button:not(.date-button-wrap button:last-of-type) {margin-right: 0.5rem;}
.stats-input-wrap .calendar-wrap .btn-line {margin-right: 0.5rem;}
.stats-input-wrap .calendar-wrap .btn-gray {margin-left: 0.5rem; padding: 0 1.5rem;}
.stats-input-wrap > .btn-red {display: flex; align-items: center; justify-content: center; width: 100%; max-width: 12.5rem; margin-left: 0.5rem;}
.stats-input-wrap > .btn-red img {margin-right: 0.8rem;}
.stats-input-wrap.flex-between > div {width: fit-content;}

.ratio {position: relative;}
.ratio .tooltip {min-width: 15rem;}
.ratio:hover .tooltip {opacity: 1;}

.cont-title {font-size: 2.4rem; font-weight: 700;}
.cont-title span {word-break: break-all;}
.cont-txt {margin-top: 1.5rem; font-size: 1.4rem; font-weight: 400; color: var(--mid-gray);}
.stats-header {margin-bottom: 3rem;}

.simple-table {font-size: 1.3rem; padding: 1.5rem 2rem; background: #ffffff; border-radius: 0.8rem;}
.simple-table table th, .simple-table table td {position: relative; color: var(--light-gray-2); font-weight: 400; padding: 1.5rem 0.5rem; border-bottom: 1px solid var(--gray-2); text-align: center; word-break: break-word;}
.simple-table table th::after, .simple-table table td::after {position: absolute; content: ''; top: 50%; right: 0; width: 0.1rem; height: 1.2rem; background: var(--gray-2); transform: translateY(-50%);}
.simple-table table th:last-of-type, .simple-table table td:last-of-type {position: unset;}
.simple-table table tr:last-of-type td {border-bottom: 0;}
.simple-table table td {color: var(--dark-gray);}
.simple-table table td a {text-decoration: underline;}
.simple-table table td.dark {color: var(--dark-gray);}
.simple-table table td.red {color: var(--red);}
.simple-table + .stats-info {margin-top: 1.5rem;}
.simple-table::-webkit-scrollbar {width: 0.5rem; height: 0.5rem; border-radius: 0.8rem; border: none; outline: none;}
.scroll-table::-webkit-scrollbar-thumb {height: 0.2rem; width: 0.2rem; background: var(--gray-2); border-radius: 0.2rem; border: none; outline: none;}
.scroll-table::-webkit-scrollbar-track {background: var(--light-gray-1);}

.stats-info {padding: 2.4rem 2.5rem; font-size: 1.3rem; color: var(--mid-gray); background: #ffffff; border-radius: 0.8rem;}
.stats-info ul li{margin-bottom: 1.2rem; font-weight: 400;}
.stats-info ul li:last-of-type {margin-bottom: 0;}

.stats-input-wrap.search-bx .search-box input{width: 100%; height: 3.7rem;}

/* datepicker */
.datetimepicker-dummy {height: 3.7rem;}
.datetimepicker-dummy::before, .datetimepicker-dummy:before {width: 2rem; height: 2rem; top: 50%; transform: translateY(-50%);}
.datetimepicker .datepicker-nav .datepicker-nav-month, .datetimepicker .datepicker-nav .datepicker-nav-year {font-size: 1.5rem;}
.datetimepicker .datetimepicker-header .datetimepicker-selection-end .datetimepicker-selection-date, .datetimepicker .datetimepicker-header .datetimepicker-selection-start .datetimepicker-selection-date {font-size: 1.4rem; line-height: 1.4rem;}
.datetimepicker .datetimepicker-header .datetimepicker-selection-end .datetimepicker-selection-weekday, .datetimepicker .datetimepicker-header .datetimepicker-selection-start .datetimepicker-selection-weekday {font-size: 1.2rem;}
.datetimepicker .datepicker-nav .datepicker-nav-next, .datetimepicker .datepicker-nav .datepicker-nav-previous {background: none;}
.datetimepicker .datepicker-nav .datepicker-nav-next svg, .datetimepicker .datepicker-nav .datepicker-nav-previous svg {height: 1.125rem;}
.datetimepicker .datepicker-body .datepicker-dates .datepicker-days {font-size: 1.3rem;}
.datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item {width: 3.2rem; height: 3.2rem; line-height: 3.2rem;}
.button.is-small {font-size: 1.2rem; background: none;}
.datetimepicker .datetimepicker-header {padding: 1rem 1.5rem;}
.datetimepicker.is-primary .datetimepicker-header .datetimepicker-selection-day {font-size: 3rem; margin-right: 0.75rem;}
.datetimepicker.is-datetimepicker-default .datetimepicker-container:before, .datetimepicker.is-datetimepicker-default .datetimepicker-container:after {border-width: 1rem; margin-left: -1rem;}
.datetimepicker-dummy .datetimepicker-dummy-wrapper {border: 1px solid var(--gray-1);}
.datetimepicker-dummy .datetimepicker-dummy-wrapper .datetimepicker-dummy-input {max-width: 48%; width: 50%; font-size: 1.4rem; text-indent: 1rem; color: var(--light-gray-2);}
.datetimepicker-dummy .datetimepicker-dummy-wrapper .datetimepicker-dummy-input:first-child {text-indent: 4rem; max-width: 52%;}
.datetimepicker-dummy .datetimepicker-clear-button {font-size: 2.25rem; width: 3.5rem; height: 3.5rem; margin: 0.2rem 0.2rem 0 0; top: -0.3rem; right: 0.2rem;}
.datetimepicker .datetimepicker-header .datetimepicker-selection-end .datetimepicker-selection-wrapper, .datetimepicker .datetimepicker-header .datetimepicker-selection-start .datetimepicker-selection-wrapper {min-height: 3.5rem; align-items: center;}
.datetimepicker .datetimepicker-footer {padding: 1rem;}
.datetimepicker-dummy.is-primary::before, .datetimepicker-dummy.is-primary:before, .datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item {background-color: var(--red);}
.datetimepicker-dummy.is-primary .datetimepicker-clear-button, .datetimepicker.is-primary .datetimepicker-header .datetimepicker-selection-day {color: var(--red);}
.datetimepicker.is-primary .datepicker-nav {background: var(--red);}
.datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:hover, .datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today, .datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-end .date-item, .datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-start .date-item {background: none; border-color: var(--red); color: #ffffff;}
.datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item:hover, .datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today,.datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today {color: var(--red);}
.datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-active, .datetimepicker.is-primary .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range {background: var(--red);}
.datetimepicker-dummy .datetimepicker-dummy-wrapper {border-radius: 0.5rem;}


/* 외부입력폼 */
.board-list.simple-table table th {border-top: none; font-weight: 400;}
.board-list.simple-table table td {position: unset; color: var(--light-gray-2);}
.board-list.simple-table table td a {text-decoration: unset; color: var(--light-gray-2); margin-right: 1rem;}
.board-list.simple-table table td.dark {color: var(--dark-gray); font-weight: 400;}
.board-list.simple-table table td.red {color: var(--red);}
.board-list.simple-table table tr:last-of-type td {border-bottom: 1px solid var(--gray-1);}
.board-list.simple-table .pagination-wrap {padding: 5rem 0 7rem 0;}
.simple-table table tr.invalid td {color: var(--red);}
.simple-table table tr.approval td {color: var(--dark-gray);}


/* 상세 캠페인 결과 */
.promotion-cont + .detail-tab {margin-top: 3rem;}
.promotion-cont + .detail-tab .tab-cont {padding-bottom: 7rem;}
.promotion-cont + .detail-tab .tab-cont .txt {margin: 0;}
.promotion-cont + .detail-tab .board-info {padding: 6rem 0 1.5rem 0;}
.promotion-cont .button-wrap {position: relative;}

.stats-board {display: block;}
.detail-tab .tab-cont .stats-board p.txt {padding: 0; margin: 0 0 2rem 0;}
.stats-board > div {display: flex; align-items: center; justify-content: space-between; width: 100%;}
.stats-board .select-wrap {width: 60%;}
.stats-board .select-wrap select {width: 100%; height: 3.4rem; border-radius: 0.5rem; border: 1px solid var(--gray-1); background: url(../images/icon_select_arrow.svg) no-repeat #ffffff 96%;}

.stats-input-wrap .calendar-wrap > div:first-of-type {width: 100%;}

.simple-table + .stats-info {margin-top: 3rem;}

.detail-wrap .stats-input-wrap {justify-content: space-between; margin-bottom: 2.3rem;}
.detail-wrap .stats-input-wrap .select-wrap {min-width: 25%;}
.detail-wrap .stats-input-wrap .calendar-wrap .btn-line + div {max-width: 32rem;}
.detail-wrap .bg-content {min-height: 87rem;}
.bg-content .board-title .title {margin-bottom: 0.3rem;}


button.btn-alarm2 {position: relative; margin-left: 2rem; color: var(--mid-gray); font-size: 1.4rem; background: none; transition: 0.15s;}
button.btn-alarm2::after {content: ''; position: absolute; top: 50%; left: -2rem; width: 1.3rem; height: 1.4rem; transform: translateY(-50%); background: url("../images/icon_alarm.svg") no-repeat; transition: 0.15s;}
button.btn-alarm2.active {color: var(--red); text-decoration: underline; transition: 0.15s;}
button.btn-alarm2.active::after {background: url("../images/icon_alarm_active.svg") no-repeat; transition: 0.15s;}




.btn-alarm-wrap {margin: 0 0 0 1rem; width: 100%;}
.btn-alarm-wrap button {margin: 0;}
.btn-alarm {background: #ffffff; border-radius: 0.5rem; border: 1px solid var(--gray-1); color: var(--mid-gray); font-size: 1.4rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0; transition: 0.2s;}
.btn-alarm-active {background: #ffffff; border-radius: 0.5rem; border: 1px solid var(--red); color: var(--red); font-size: 1.4rem; font-weight: 700; display: flex; align-items: center; justify-content: center; transition: 0.2s;}
.btn-alarm-wrap .btn-alarm-active {display: none; transition: 0.2s;}
.btn-alarm-wrap.active .btn-alarm {display: none; transition: 0.2s;}
.btn-alarm-wrap.active .btn-alarm-active {display: block; transition: 0.2s;}

button.btn-declaration {position: relative; color: var(--red); text-decoration: underline; margin-left: 3rem; font-size: 1.4rem; background: none; transition: 0.15s;}
button.btn-declaration::after {content: ''; position: absolute; top: 49%; left: -2rem; width: 1.7rem; height: 1.7rem; transform: translateY(-50%); background: url("../images/icon_declaration.svg") no-repeat;}
button.btn-declaration.active {transition: 0.15s;}

/* default-modal */
.default-modal {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0 auto; width: 45rem; border-radius: 2rem; background: #ffffff; z-index: 103; visibility: hidden; opacity: 0; transition: 0.15s;}
.wide-default-modal {width: 85.5rem;}
.default-modal.show {visibility: visible; opacity: 1; transition: 0.15s;}
.overlay { position: absolute;  top: 0; left: 0; width: 100vw; height: calc(var(--vh, 1vh) * 100); background: rgba(0, 0, 0, 0.1); z-index: 102; visibility: hidden; opacity: 0; transition: 0.15s;}
.overlay.show {visibility: visible; opacity: 1; transition: 0.15s;}

.default-modal-header {padding: 5rem 0 2rem 0; text-align: center;}
.default-modal-header .title {font-size: 2.4rem; font-weight: 700;}
.default-modal-body {padding: 0 4rem 4rem; font-size: 1.4rem; color: var(--mid-gray);}
.default-modal-body.center {text-align: center; line-height: 2.2rem;}
.default-modal .point-box {padding: 2.3rem; border-radius: 0.8rem; font-size: 1.5rem; background: var(--light-gray-1);}
.default-modal .info-table {margin-top: 3rem;}
.default-modal .info-table dl {display: flex; align-items: center; margin-bottom: 1rem;}
.default-modal .info-table dl dt {width: 8rem;}
.default-modal .info-table dl dd {color: var(--dark-gray); word-break: break-all; max-width: 78%;}
.default-modal-footer {border-top: 1px solid var(--gray-2); display: flex; align-items: center; justify-content: center;}
.default-modal-footer button {padding: 2.2rem 0; width: 100%; color: var(--mid-gray); font-weight: 700;}
.default-modal-footer button:nth-child(2) {border-left: 1px solid var(--gray-2);}
.default-modal p {text-align: center; line-height: 2.2rem;}

.default-modal-close-btn {width: 3rem; height: 3rem; background: url(../images/icon_modal_close.png) no-repeat 100%;}

.default-modal-body:has(.simple-table){padding:  0 0 4rem;}

/* 외부입력폼 등록 현황 상세 모달 */
.default-modal .title-wrap {display: flex; flex-direction: row-reverse; align-items: flex-start; justify-content: space-between; padding: 0 3rem 0 4rem;}
.default-modal .title-wrap .cont-title {text-align: left;}
.default-modal .title-wrap .header-button {display: flex; align-items: center;}
.default-modal .title-wrap .header-button > a {margin-right: 2.4rem;}
.default-modal .state-bar {display: flex; align-items: center; justify-content: flex-end; padding: 0.9rem 6rem 0 0;}
.default-modal .state-bar dl {display: flex; align-items: center; margin-right: 2rem; font-size: 1.4rem;}
.default-modal .state-bar dl dt {color: var(--mid-gray); margin-right: 0.5rem;}
.default-modal .state-bar dl .red {color: var(--red);}
.default-modal .state-bar dl .gray {color: var(--mid-gray);}
.default-modal .state-bar dl:last-of-type {margin-right: 0;}

.scroll-table {width: 79rem; height: 48rem; border: 1px solid var(--gray-2); overflow: auto; border-radius: 0.8rem;}
.scroll-table table {width: 120rem; height: auto;}
.scroll-table .simple-table {padding: 0 2rem;}

.scroll-table::-webkit-scrollbar {width: 0.5rem; height: 0.5rem; border-radius: 0.8rem; border: none; outline: none;}
.scroll-table::-webkit-scrollbar-thumb {height: 10%; width: 10%; background: var(--grayblue); border-radius: 0.4rem; border: none; outline: none;}
.scroll-table::-webkit-scrollbar-track {background: var(--light-gray-1);}


/* 외부입력폼 등록 현황 */
.link-button a {margin-right: 1rem;}
.link-button button {margin: 0;}
.simple-table.form table td {color: var(--dark-gray);}
.simple-table.form table td a{color: var(--dark-gray); margin: 0;}
.simple-table.form table td.gray {color: var(--mid-gray);}
.simple-table.form table td.red {color: var(--red);}
.simple-table.form table tr:last-of-type td {border-bottom: 0;}
.simple-table.form table a {text-decoration: unset;}
.simple-table.gray-table table td {color: var(--mid-gray);}


/* 회원정보 마이페이지 */
.user-profile {display: flex; align-items: center; justify-content: space-between; margin-bottom: 3rem;}
.user-profile .btn-red {line-height: 3.7rem; height: 3.7rem; min-width: 13rem; text-align: center;}
.user-info {display: flex; align-items: center;}
.user-visual {position: relative;}
.user-visual .visual {width: 15rem; height: 15rem; display: flex; align-items: center; justify-content: center; margin-right: 3rem; overflow: hidden; border-radius: 50%; background: var(--gray-2); border: 3px solid #ffffff; box-shadow: 7.1px 7.1px 40px 0 rgba(66, 66, 66, 0.07);}
.user-visual .visual img:not(.user-default) {width: 100%;}
.user-visual .user-default {margin-top: 3rem;}
.user-visual .visual-btn {position: absolute; bottom: 1.3rem; right: 3.8rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: url(../images/icon_photo_add.png) no-repeat center #ffffff; z-index: 1; box-shadow: rgba(66, 66, 66, 0.3) 3px 3px 20px; transition: 0.3s;}
.user-visual .visual-btn:hover {transform: scale(1.2); transition: 0.3s;}

.profile-wrap .profile-cont {display: flex; border-bottom: 1px solid var(--gray-2); font-size: 1.4rem; font-weight: 700; padding-top: 5rem;}
.profile-wrap .profile-cont ~ .profile-cont {padding-top: 2.5rem;}
.profile-wrap .profile-cont:nth-child(3) {border-bottom: 0; align-items: center; padding-top: 1.5rem;}
.profile-wrap .profile-cont input:not(input[type=checkbox]) {width: 100%; margin-right: 0.5rem; text-overflow: ellipsis; background: none;}
.profile-wrap .profile-cont input::placeholder {color: var(--light-gray-2); font-weight: 400;}
.profile-wrap .profile-cont > dt {width: 25rem;}
.profile-wrap .profile-cont > dd {width: calc(100% - 25rem);}
.profile-wrap .profile-cont dl {display: flex; align-items: center; padding: 2.5rem 0; border-bottom: 1px solid var(--gray-2);}
.profile-wrap .profile-cont dl.slim { padding: 1.3rem 0;}
.profile-wrap .profile-cont dl:first-child {padding-top: 0;}
.profile-wrap .profile-cont dl:last-child {border-bottom: 0;}
.profile-wrap .profile-cont dl dt {width: 20rem; color: var(--light-gray-2); font-weight: 400;}
.profile-wrap .profile-cont dl dd {width: calc(100% - 20rem);}
.profile-wrap .profile-cont .gray {color: var(--light-gray-2);}
.profile-wrap .profile-cont .red {color: var(--red); font-weight: 400;}
.profile-wrap .profile-cont button {min-width: 13rem; height: 3.7rem; white-space: nowrap;}
.profile-wrap .profile-cont .checkbox-wrap {color: var(--dark-gray); margin-bottom: 0;}

.flex-between {display: flex; justify-content: space-between; align-items: center;}

/* 회원정보 내 캠페인 */
.stats-input-wrap .search-box {width: 100%;}
.stats-input-wrap .search-box input {width: calc(100% - 6.5rem);}
.stats-input-wrap .search-box button {padding: 0 1.5rem;}
.stats-input-wrap .calendar-wrap {min-width: 34%; width: 100%;}

.board-wrap .flex-between button:not(.more-btn) {min-width: 17rem;}

.campaign-wrap {margin-top: 2.3rem;}
.campaign-wrap .campaign-cont {position: relative; margin-bottom: 1.5rem;}
.campaign-wrap .campaign-cont.grade {background: var(--light-pink);}
.campaign-wrap .campaign-cont.grade .campaign-box {background: var(--light-pink);}
.campaign-wrap .campaign-cont:last-child {margin-bottom: 0;}
.campaign-wrap .campaign-cont .campaign-badge,.main-review-badge {position: absolute; width: 5.2rem; height: 2.2rem; color: #ffffff; text-align: center;}
.main-review-badge {right: 1.5rem; top: 2rem; -webkit-transform: translate3d(0,0,0);}
.campaign-wrap .campaign-cont .campaign-badge.cpa,.main-review-badge.cpa {background: url(../images/icon_tag_cpa.svg) no-repeat center/100%;}
.campaign-wrap .campaign-cont .campaign-badge.cpc,.main-review-badge.cpc {background: url(../images/icon_tag_cpc.svg) no-repeat center/100%;}
.campaign-wrap .campaign-cont .campaign-badge.cpi,.main-review-badge.cpi {background: url(../images/icon_tag_cpi.svg) no-repeat center/100%;}
.campaign-wrap .campaign-cont .campaign-badge.border,.main-review-badge.border {background: url(../images/icon_tag_border.svg) no-repeat center/100%; color: var(--light-gray-2);}
.campaign-wrap .campaign-cont .campaign-badge span {font-size: 1.2rem; line-height: 2.2rem; font-weight: 700;}
.main-review-badge span {font-size: 1.3rem; line-height: 2.2rem; font-weight: 700;}
.campaign-wrap .campaign-cont .campaign-badge {position: absolute; top: 2rem; left: -3rem; width: 5.2rem; height: 2.2rem; color: #ffffff; text-align: center; display: flex; align-items: center; justify-content: center; padding: 0 1.4rem; font-size: 1.3rem; font-weight: 700;}

.campaign-wrap.rank .campaign-cont .campaign-badge {top: 50%; transform: translateY(-50%);}

.campaign-wrap .campaign-cont .campaign-badge:before,.campaign-wrap .campaign-cont .campaign-badge:after {position: absolute; display: block; top: 0; content: ''; border-top: 1.1rem solid transparent; border-bottom: 1.1rem solid transparent;}
.campaign-wrap .campaign-cont .campaign-badge:before {left: 0; border-left: 0.5rem solid #ffffff;}
.campaign-wrap .campaign-cont .campaign-badge:after {right: 0; border-right: 0.5rem solid #ffffff;}
.campaign-wrap .campaign-box {display: flex; align-items: center; justify-content: space-between; border-radius: 0.8rem; height: 6rem; padding: 0 3rem; font-size: 1.4rem; background: var(--light-gray-1); transition: 0.3s;}
.campaign-wrap .campaign-box:hover {background: #ffffff; box-shadow: rgba(66, 66, 66, 0.15) 0 0 2.8rem; transition: 0.3s;}
.campaign-wrap .campaign-box:hover .right .white-box {background: var(--light-gray-1); transition: 0.2s;}
.campaign-wrap .campaign-box .left {align-items: center; width: 60rem;}
.campaign-wrap .campaign-box .left span {display: inline-block; margin-right: 1rem; min-width: 1.9rem; text-align: center;}
.campaign-wrap .campaign-box .left .title {font-weight: 700; overflow: hidden; white-space: nowrap; word-break: break-all; text-overflow: ellipsis; -o-text-overflow: ellipsis;}
.campaign-wrap .campaign-box .left .date {font-size: 1.3rem; color: var(--mid-gray); margin-top: 1rem;}
.campaign-wrap .campaign-box .right {display: flex; align-items: center;}
.campaign-wrap .campaign-box .right p {font-weight: 700;}
.campaign-wrap .campaign-box .right .white-box {padding: 0 2rem; height: 3.7rem; line-height: 3.7rem; color: var(--mid-gray); background: #ffffff; border-radius: 0.5rem; margin-right: 0.5rem; transition: 0.2s}
.campaign-wrap .campaign-box .right .profit-box {position: relative; width: 9rem; height: 3.7rem; line-height: 3.7rem; padding: 0 1.2rem; border-radius: 0.5rem; text-align: right; color: #ffffff !important; font-weight: 700;}
.campaign-wrap .campaign-box .right .profit-box .tooltip {width: 12rem;}
.campaign-wrap .campaign-box .right .profit-box:hover .tooltip {opacity: 1;}
.campaign-wrap .campaign-box .right .profit-box.red {background: var(--red);}
.campaign-wrap .campaign-box .right .profit-box.dark {background: var(--dark-gray); text-decoration: line-through;}
.campaign-wrap .campaign-box .right .profit-box.purple {background: var(--purple);}
.campaign-wrap .campaign-box .right .profit-box.gray {background: var(--light-gray-2);}
.campaign-wrap + .pagination-wrap {margin-top: 7.2rem;}

/* 내 수익금 */
.stats-input-wrap .type-button-wrap button {margin-right: 0.5rem; font-weight: 400;}
.stats-input-wrap .type-button-wrap button:last-child {margin-right: 0;}
.point-box-wrap {display: flex; align-items: center; margin: 2.3rem 0 4rem 0;}
.point-box-wrap .point-box {width: 100%; height: 15rem; padding: 2.5rem; border-radius: 0.8rem; margin-right: 2rem; font-size: 1.4rem; background: var( --light-gray-1);}
.point-box-wrap .point-box:last-child {margin: 0;}
.point-box-wrap .point-box .title {font-weight: 700;}
.point-box-wrap .point-box .point {margin-top: 2rem; text-align: center; font-size: 3rem; font-weight: 800;}
.point-box-wrap .point-box .text {margin-top: 1rem; text-align: center; font-size: 1.3rem; color: var(--mid-gray);}
.point-box-wrap .point-box.invalid .point {color: var(--red);}
.point-box-wrap .point-box.approval {color: #ffffff; background: var(--red);}
.point-box-wrap .point-box.approval .text {color: #ffffff;}
.board-list.accordion-menu .accordion-header {cursor: pointer;}
.board-list.accordion-menu .accordion-header .arrow-btn {text-align: center;}
.board-list.accordion-menu .accordion-header .arrow-btn.detail-btn {display: flex;}
.board-list.accordion-menu .accordion-header .arrow-btn button {display: flex; align-items: center; justify-content: center; width: 100%; transform: rotate(0deg); transition: 0.3s;}
.board-list.accordion-menu .accordion-header.on .arrow-btn button {transform: rotate(180deg); transition: 0.3s;}
.board-list.accordion-menu .accordion-header.on td {border: 0;}
.board-list.point table td {color: var(--dark-gray); font-weight: 700;}
.board-list.accordion-menu .accordion-body table {background: var(--light-gray-1);}
.board-list.accordion-menu .accordion-body table td {font-weight: 400; opacity: 0.8; padding: 2.3rem 0;}
.board-list.point table td:first-of-type {text-align: left; padding-left: 7rem; opacity: 1;}
.board-list.point table th:first-of-type {text-align: left; padding-left: 7rem;}
.board-list.accordion-menu .accordion-body table td .title {position: relative; display: unset;}
.board-list.accordion-menu .accordion-body table td .title a {display: inline-block; overflow: hidden; white-space: nowrap; word-break: break-all; text-overflow: ellipsis; -o-text-overflow: ellipsis; width: 95%;}
.board-list.accordion-menu .accordion-body table td .title::after {position: absolute; content: ''; top: 0.5rem; left: -1rem; width: 0.5rem; height: 0.1rem; background: var(--mid-gray);}
.board-list.accordion-menu .accordion-body table td .date {color: var(--mid-gray); margin-top: 1rem;}
.board-list.accordion-menu .pagination-wrap {margin-top: 7rem;}

.board-list.accordion-menu .accordion-header .point-wrap span{color: #293174;}
.board-list.accordion-menu .accordion-header .point-wrap.del span{text-decoration:line-through; color: var(--mid-gray);}
.board-list.accordion-menu .accordion-header .point-wrap.val span{color: #42b6e9;}

/* 출금신청 */
.profile-wrap .button-wrap {margin-top: 5rem; justify-content: center;}
.profile-wrap .button-wrap button {width: 52rem; height: 6rem; border-right: 0.8rem; font-size: 1.6rem;}
.profile-wrap + .board-list {margin-top: 6rem;}
.profile-wrap + .board-list table td {color: var(--mid-gray);}
.board-list .pagination-wrap {margin-top: 7rem;}
.board-list + .pagination-wrap {margin-top: 7rem;}

.filebox {position: relative;}
.filebox .upload-name {display: inline-block; width: calc(100% - 14rem) !important; font-weight: 400; color: var(--light-gray-2);}
.filebox .upload-name.active {color: var(--mid-gray); padding-left: 2rem;}
.filebox .upload-name.active + .upload-img {position: absolute; top: 50%; left: 0; width: 1.2rem; height: 1.5rem; background: url(../images/icon_file_upload.png) no-repeat center/100%; transform: translateY(-60%);}
.filebox label {display: inline-block; padding: 0 1.5rem; cursor: pointer; width: 13rem; height: 3.7rem; line-height: 3.7rem; margin-left: 10px; text-align: center;}
.filebox input[type="file"] {position: absolute; width: 0; height: 0; padding: 0; overflow: hidden; border: 0;}

.info-table.extinction {display: flex; align-items: center;}

.info-table.extinction .flex-between {position: relative; width: 50%; padding-right: 1rem;}
.info-table.extinction .line {width: 0.1rem; height: 1.1rem; background: var(--gray-2); margin: 0 1rem;}
.info-table.extinction .date {width: 50%;}
.info-table.extinction ~ .info-table.extinction {margin-top: 2rem;}

.button-header {padding: 2.5rem 0 2rem;}
.button-header .header-button {text-align: right; padding-right: 2.5rem;}
.button-header .title-wrap {margin-top: 0.5rem; justify-content: center;}

/* 알림 내역 */
.alarm-cont-wrap {margin-top: 2.3rem;}
.alarm-cont-wrap .alarm-box {width: 100%; border-radius: 0.8rem; background: var(--light-gray-1); padding: 2rem;}
.alarm-cont-wrap .alarm-box .title {font-size: 1.4rem; font-weight: 700;}
.alarm-cont-wrap .alarm-box .date {font-size: 1.3rem; color: var(--mid-gray);}
.alarm-cont-wrap .alarm-box .title + .date {margin-top: 1rem;}
.alarm-cont-wrap .alarm-box .content-link {display: flex; align-items: center; width: 100%; border-radius: 0.5rem; margin-top: 2.5rem; background: #ffffff;}
.alarm-cont-wrap .alarm-box ~ .alarm-box {margin-top: 1.5rem;}
.alarm-cont-wrap .alarm-box.result {background: #fff5f3;}
.alarm-cont-wrap .alarm-box.result .cont {font-size: 1.3rem; margin: 2rem 0 2.5rem; line-height: 2.2rem;}
.alarm-box .content-link .cont-image-box {display: flex; justify-content: center; align-items: center; margin-right: 1.5rem; width: 6rem; height: 6rem;  border-radius: 0.5rem; overflow: hidden; background: var(--dark-gray);}
.alarm-box .content-link .cont-image-box img{width: 100%; height: 100%; object-fit: cover;}
.alarm-box .content-link .cont-text {width: calc(100% - 7.5rem); padding: 2rem 2rem 2rem 0; font-size: 1.3rem; color: var(--mid-gray);}
.alarm-cont-wrap + .pagination-wrap {margin-top: 7rem;}

.more-btn-wrap {position: relative;}
.more-btn {width: 2rem; height: 1rem; background: url(../images/icon_more_btn.svg) no-repeat center;}
.more-cont {position: absolute; top: 2rem; right: -0.5rem; padding: 1rem 2rem; min-width: 10.6rem; width: auto; border-radius: 0.8rem; background: #ffffff; box-shadow: rgba(66, 66, 66, 0.15) 0 0 18px; opacity: 0; visibility: hidden; transition: 0.15s;}
.more-cont button {padding: 1rem 0; width: 100%; font-size: 1.4rem; text-align: left; color: var(--dark-gray);}
.more-btn.active + .more-cont {min-width: 13rem; opacity: 1; visibility: visible; transition: 0.15s;}

/* 등급 및 이용안내 */
#guideLine {padding-top: 12rem;}
#guideLine > .title,#guideLine .desc {text-align: center;}
#guideLine .desc {color: var(--mid-gray); line-height: 2.4rem;}
#guideLine > .title {font-weight: 600; font-size: 4rem; line-height: 4.6rem; margin-bottom: 3.4rem;}
#guideLine > .title em {position: relative; font-style: normal; color: var(--red);}

#guideLine .tab-nav {display: flex; align-items: center; justify-content: space-between; margin-top: 10rem;}
#guideLine .tab-nav li {margin-right: 4rem; aspect-ratio: 1; width: 100%;}
#guideLine .tab-nav li a {border-radius: 0.8rem; padding: 4rem 3rem; width: 100%; height: 100%; display: block; background: var(--light-gray-1); position: relative;}
#guideLine .tab-nav li a:after {position: absolute; left: 0; bottom: 0; display: block; content: ''; width: 100%; height: 100%;}
#guideLine .tab-nav li:last-child {margin-right: 0;}
#guideLine .tab-nav li.on a {background: #ffffff; box-shadow: 0 0 4rem 0 rgba(66, 66, 66, 0.15);}
.guide-tab h3 {font-size: 2.4rem; font-weight: 700; margin-bottom: 2rem;}
.guide-tab p {font-size: 1.5rem; max-width: 70%; color: var(--mid-gray); line-height: 2.2rem; font-weight: 400;}
#guideLine .tab-nav li.tab01 a:after {background: url("../images/icon_consult_char.png") no-repeat right 2.4rem bottom 2rem/13.5rem;}
#guideLine .tab-nav li.tab02 a:after {background: url("../images/icon_board.png") no-repeat right 2.4rem bottom 2rem/16rem;}
#guideLine .tab-nav li.tab03 a:after {background: url("../images/icon_thumb.png") no-repeat right 2.4rem bottom 2rem/11.1rem;}

#guideLine .tab-cont {margin-top: 15rem;}
#guideLine .tab-cont .title {text-align: center;}
#guideLine .tab-title {font-size: 3rem; font-weight: 800; margin-bottom: 2rem;}
#guideLine .tab-sub-title {font-size: 2.4rem; font-weight: 700;}
#guideLine .title .desc {margin: 4.5rem auto 0;}
#guideLine .tab-cont .cont {margin-top: 8rem;}
#guideLine .box-wrap {display: flex; justify-content: space-between; margin-bottom: 3rem;}
#guideLine .box {width: 100%; border-radius: 0.8rem; padding: 3rem 2rem 3.5rem 14rem; min-height: 23rem;}
#guideLine .box h6 {font-size: 3rem; font-weight: 800; margin-bottom: 2.3rem;}
#guideLine .box p {font-size: 1.4rem; color: var(--mid-gray); line-height: 2.4rem; max-width: unset;}
#guideLine .box-wrap .box {margin-right: 3rem;}
#guideLine .box-wrap .box:last-child {margin-right: 0;}
#guideLine .small-box {background: var(--light-gray-1); margin-top: 3rem; border-radius: 0.8rem; padding: 3.2rem 5rem;}
#guideLine .small-box p {font-size: 1.4rem; color: var(--dark-gray); line-height: 2.4rem;}
.lv1 {background: #eaf7f7 url("../images/icon_lv1.png") no-repeat 3rem 3rem;}
.lv33 {background: #ecf7ea url("../images/icon_lv33.png") no-repeat 3rem 3rem;}
.lv66 {background: #fef2ef url("../images/icon_lv66.png") no-repeat 3rem 3rem;}
.lv99 {background: #fcf0fb url("../images/icon_lv99.png") no-repeat 3rem 3rem;}
.lvPartner {background: #f4f2ff url("../images/icon_lvPartner.png") no-repeat 3rem 3rem;}

/* 랜딩페이지 */
#landingPage {margin: 0 auto; max-width: 108rem; width: 100%;}
#landingPage .visual {width: 100%; max-height: 108rem; height: fit-content; overflow: hidden;}
#landingPage .visual img {width: 100%; height: 100%; object-fit: cover;}
.landing-cont.small-container {max-width: 58rem; margin: 8rem auto 10rem; padding: 0 3rem;}
.landing-cont .title {text-align: center;}
.landing-cont .title h2 {font-size: 2.4rem; font-weight: 700; margin-bottom: 2rem;}
.landing-cont .title p {color: var(--mid-gray); font-size: 1.4rem; line-height: 2.2rem;}
.landing-cont .cont {margin-top: 5rem;}
.landing-cont .cont input:not(.checkbox-wrap input, .radio-wrap input) {margin-bottom: 2rem;}
.landing-cont .sub-title {font-size: 1.4rem; color: var(--mid-gray); display: block; margin-bottom: 2rem;}
.landing-cont .radio-wrap {align-items: center; margin-bottom: 2rem;}
.landing-cont .radio-wrap .custom-radio {margin-right: 1.2rem; margin-bottom: 1rem;}
.custom-radio {position: relative; margin-right: 0.8rem; display: flex; align-items: center;}
.custom-radio:last-child {margin-right: 0;}
.custom-radio input {appearance: none; margin-right: 3rem;}
.custom-radio input:after {display: block; content: ''; position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--gray-1);}
.custom-radio input:checked {background: var(--red);}
.custom-radio input:checked:before {position: absolute; display: block; content: ''; width: 1rem; height: 1rem; left: 1rem; top: 1rem; transform: translate(-50%,-50%); background: var(--mid-gray); z-index: 10; border-radius: 50%;}
.custom-radio label {color: var(--mid-gray); width: 100%; height: 100%; font-size: 1.4rem;}
.custom01.select {background: var(--light-gray-1) url("../images/icon_select_gray.svg") no-repeat right 2.5rem top 50%; color: var(--mid-gray); margin-bottom: 2rem;}
.landing-cont .cont .cont-container {margin-bottom: 3rem;}
#landingPage .btn-red {margin-top: 4rem;}
#landingPage .copyright {display: block; text-align: center; margin-top: 6rem; font-size: 1.3rem; font-weight: 700; color: var(--mid-gray);}

/* 광고문의 글쓰기 */
.ad-detail-table dl dd .radio-wrap {display: flex; align-items: center; margin: 0;}
.ad-detail-table .content-detail-wrap .radio-wrap label {min-width: fit-content;}
.ad-detail-table .content-detail-wrap .radio-wrap:last-of-type {margin-right: 0;}
.amount-input-box {border: 1px solid var(--gray-1); border-radius: 0.5rem; display: flex; align-items: center; padding: 1rem; margin-left: 2rem; width: 23rem;}
.amount-input-box.bottom {border: 0; border-bottom: 1px solid var(--gray-1); border-radius: 0; }
.amount-input-box span {display: block; min-width: fit-content;}

.login-header {padding: 5rem 6rem 0; position: relative;}
#intro_header.on{position: fixed; top: 0; left: 0; z-index: 99;}
.login-header + .fixed-header {display: none;}
#footer.login-footer {margin: 0; text-align: center;}

.small-container .line {width: 100%; height: 0.1rem; background: var(--gray-1);}

.input-count {position: relative;}
.input-count input {padding: 0 6rem 0 2rem;}
.input-count .floating-txt {position: absolute; top: 50%; right: 2rem; transform: translateY(-85%); font-size: 1.4rem; color: var(--grayblue);}
.input-count .floating-txt.error-txt {color: var(--red);}

.view-btn {position: relative;}
.mobile {display: none !important;}
.search-area {display: none; width: 100%;}
.search-area.active {position: absolute; display: block; right: 0; top: 14px; width: fit-content; z-index: 100;}

.search-btn.mobile {display: block;}
.search-btn.mobile.active {display: none;}

.rank-search {position: relative; display: flex; align-items: center; height: 100%;}
.header-rank {height: 100%; display: flex; align-items: center; margin-right: 2.6rem;}
.headerRankSwiper {height: 3.2rem;}
.headerRankSwiper .swiper-slide {display: flex; align-items: center; justify-content: space-between; width: 24.4rem; background: var(--light-gray-1); padding: 0 2rem 0 1.5rem; border-radius: 0.5rem;}
.headerRankSwiper .left {display: flex; align-items: center; max-width: 70%;}
.headerRankSwiper .left span {display: block; margin-right: 0.7rem; color: var(--mid-gray); font-size: 1.3rem; font-weight: 700;}
.headerRankSwiper .left p {color: var(--mid-gray); font-size: 1.3rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.rank-badge-first {background: url("../images/icon_rank_first.svg") no-repeat center/cover; height: 2.2rem; width: 1.9rem;}
.rank-badge-second {background: url("../images/icon_rank_second.svg") no-repeat center/cover; height: 2.2rem; width: 1.9rem;}
.rank-badge-third {background: url("../images/icon_rank_third.svg") no-repeat center/cover; height: 2.2rem; width: 1.9rem;}
.headerRankSwiper .right p {font-size: 1.3rem; font-weight: 800;}

@media screen and (max-width: 1024px) {
    .mobile {display: block !important;}

}

.join-input-wrap {position: relative;}
#p_nick {font-size: 1.4rem; color: var(--mid-gray); margin-top: -0.5rem; margin-bottom: 1rem;}
#p_nick.fail {color: var(--red);}

/* 20221213 안연주 css 추가 */
.menu-btn-wrap.pc {position: absolute; left: 0; top: 0;}
#wrap .fixed-header {transition: 0.3s;}
#wrap.on .fixed-header {left: -22rem; transition: 0.3s;}
#wrap.on main {width: 100%;}
#wrap.on #header {width: 0; transition: 0.3s;}
main {transition: 0.3s;}
#header {transition: 0.3s;}
.nav-header {transition: 0.3s;}
#wrap.on .nav-header {width: 100%; transition: 0.3s;}




#formModal .custom-radio {width: 100%}
#formModal .custom-radio input:after, #formModal .custom-radio input:before {content: none;}
#formModal .custom-radio {position: relative; width: 100%; height: 6rem; margin-right: 0.8rem;}
#formModal .custom-radio:last-child {margin-right: 0;}
#formModal .custom-radio input {appearance: none; width: 100%; height: 100%; background: var(--light-gray-1); border-radius: 0.8rem; margin-right: 0; transition: 0.2s;}
#formModal .custom-radio input:checked {background: var(--red); transition: 0.2s;}
#formModal .custom-radio label {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: var(--mid-gray); width: 100%; height: 100%; text-align: center; line-height: 6rem;}
#formModal .custom-radio input:checked+label {color: #ffffff; font-weight: 700;}

#formInner {width: 100%;}
#formInner .landing-cont {margin-top: 3rem;}
#formInner .landing-cont .input-wrap {display: flex; align-items: center;}
#formInner .landing-cont .input-wrap label {min-width: 25%; font-weight: 700; font-size: 1.6rem;}
#formInner .landing-cont .input-wrap .add-area {display: flex; align-items: center; width: 100%; margin: 2rem 0 0; flex-wrap: wrap;}
#formInner .landing-cont .input-wrap .add-area > div {margin-bottom: 1rem; margin-right: 4rem; color: var(--light-gray-2);}
#formInner .landing-cont .input-wrap .add-area .checkbox-wrap:last-child {margin-right: 0;}
#formInner .landing-cont .input-wrap.add {margin: 1.5rem 0 3.5rem; flex-direction: column; align-items: flex-start;}
#formInner .landing-cont .input-wrap.add > label {margin-bottom: 10px;}
#formInner .landing-cont .input-wrap .default-select {min-width: 20rem; width: 100%; height: 6rem; color: var(--light-gray-2); background-color: #ffffff; border-radius: 0.8rem;}
#formInner .landing-cont .btn-red {margin-top: 4.8rem;}
#formInner .landing-cont .popup-logo {margin-top: 6rem; text-align: center;}
#formInner .landing-cont .social-bar {margin-top: 2.4rem; display: flex; align-items: center; justify-content: center;}
#formInner .landing-cont .social-bar .sns {margin-right: 2.5rem;}
#formInner .landing-cont .social-bar .sns:last-child {margin-right: 0;}

.accordion-menu.agree .accordion-header {display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; cursor: pointer;}
.accordion-menu.agree .accordion-header .checkbox-wrap {margin-bottom: 0;}
.accordion-menu.agree .accordion-header .acco-btn {width: 1.8rem; height: 1.8rem; background: url(../images/icon_acco_arrow.png) no-repeat center; transform: rotate(0deg); transition: 0.2s;}
.accordion-menu.agree .accordion-head   er.on .acco-btn {transform: rotate(180deg); transition: 0.2s;}



.btn-action {height: 6rem; border-radius: 0.8rem; font-size: 1.6rem; display: flex; align-items: center; justify-content: center; background-color:#ff0000; border:none; transition:all 0.12s linear 0s!important;  }
.btn-action.animation{animation-name: flicker; animation-duration:2s;  animation-iteration-count:infinite;}
.btn-action:hover, .btn-action:focus { background-color: #8b2929; animation:inherit; }
.btn-action:active { background-color: #a95555 !important; }
.landing-form-wrap .btn-action[disabled] {padding:10px 0 10.5px;background-color:rgba(38,53,111,.3) !important;border-color:rgba(38,53,111,0) !important;color:rgba(255,255,255,.8) !important;font-size:14px;}

.frame-wrap{display: flex; flex-direction: column; gap: 2rem; margin-bottom: 2rem;}
.frame-wrap .visual{margin: 0 auto;}


.file-upload label {
    display: none;
}
.file-upload input[type="file"]::file-selector-button{display: none;}
.upload-area{
    margin-top: 20px;
    height: 200px;
    padding: 10px;
    border: 1px solid #6a747c;
    border-radius: 5px;
    width: 100%;position: relative;
}
.file-upload{position: relative;}
.file-label{display: none;}
.file-title {
    position: absolute;
    top: 50px;
    left: 20px;
    z-index: 1;
}

.my-color-box {
    display: inline-block;
    width: 25px;
    height: 25px;
    margin: 2px;
}
.form_radio_btn {
    width: 25px;
    height: 25px;
    border-radius: 5px;
    margin: 3px;
}
.form_radio_btn input[type=radio] {
    display: none;
}
.form_radio_btn label {
    display: block;
    margin: 0 auto;
    text-align: center;
    height: -webkit-fill-available;
    cursor: pointer;
}

/* Checked */
.form_radio_btn input[type=radio]:checked + label {
    border: 2px solid #fff;
    outline: 2px solid #000;
}

.simple-table.sub-table{padding: 0;}
.simple-table.sub-table > table > tr{padding: 0;}
.simple-table.sub-table > table > tbody >tr {background-color: var(--light-gray-1); border: 1px red;}
.simple-table table.sub-table{}

/* 부모 요소에 flex 적용 */
.chart-container {
    display: flex;
    justify-content: space-between; /* 차트 사이에 간격을 주기 위해 */
    gap: 20px; /* 차트 사이 간격 */
}

.accr-sub{}

table.accr-sub{background: #fff!important;}
table.accr-sub thead th{padding: 1rem 0.5rem; border-bottom: 1px solid var(--gray-1);}
table.accr-sub thead th:first-of-type{padding-left: 2rem!important;}
table.accr-sub tbody td:first-of-type{padding-left: 2rem!important;}

.default-modal-body:has(.board-list.point){padding: 0 0 4rem;}
.default-modal-body .board-list .title{font-size: 1.4rem; text-align: left;}
.default-modal-body .board-list.point table td:first-of-type{padding: 2rem; text-align: center;}
.default-modal-body .board-list.point table th:first-of-type{padding-left: 2rem; text-align: center;}