@charset "utf-8";
/*============================================================*/
/* 공통 */
/*============================================================*/
.ready-page {margin-top: 20rem; text-align: center; color: var(--col-gray); font-size: 2.8rem; font-weight: 500; line-height: 100%;}

.sub_h4 {position: relative; padding-left: 1.5rem; color: var(--col-brown); font-size: 3rem; font-weight: 600;}
.sub_h4::before {content: ""; position: absolute; top: -.5rem; left: 0; width: 1.2rem; height: 1.2rem; background: var(--col-brown);}
@media (max-width: 992px) {
    .sub_h4 {font-size: 2.4rem;}
}
/*============================================================*/
/* 사업개요 */
/*============================================================*/
.outline-item {margin-top: 12rem;}
.outline-item > p {font-size: 2rem; font-weight: 500; line-height: 1.45;}
.outline-item .img-wrap {margin-top: 5rem; text-align: center;}
.outline .sentence {margin: 12rem 0; text-align: center; color: var(--col-gray); font-size: 1.8rem; font-weight: 500;}
@media (max-width: 992px) {
    .outline-item {margin-top: 7rem;}
    .outline-item > p {font-size: 1.6rem; line-height: 1.75;}
    .outline .sentence {margin: 5rem 0; font-size: 1.6rem;}
}
/*============================================================*/
/* 입지환경 */
/*============================================================*/
.environment .txt {margin: 7rem 0; text-align: center; font-size: 3rem; font-weight: 600; line-height: 1.35;}
@media (max-width: 992px) {
    .environment .txt {font-size: 2rem;}
}
/*============================================================*/
/* 오시는길 */
/*============================================================*/
.location .root_daum_roughmap_landing {width: 100%;}
.location .root_daum_roughmap .wrap_map {width: 100%; aspect-ratio: 1140/624; height: auto;}
.location .root_daum_roughmap .border1,
.location .root_daum_roughmap .border2,
.location .root_daum_roughmap .border3,
.location .root_daum_roughmap .border4,
.location .root_daum_roughmap .wrap_controllers {display: none;}
.location .info-list {display: flex; justify-content: center; align-items: center; gap: 4rem; margin-top: 15px;}
.location .info-list dl {display: flex; align-items: center; gap: 5px; color: var(--col-brown); font-size: 2rem; font-weight: 600; letter-spacing: 0; line-height: 2;}
.location .info-list dt {width: 3.1rem; height: 3.1rem; background-position: center; background-size: contain; background-repeat: no-repeat;}
.location .info-list .address dt {background-image: url("/img/main/ic_pin.png");}
.location .info-list .call dt {background-image: url("/img/main/ic_call.png");}
.location .info-list .mail dt {background-image: url("/img/main/ic_mail.png");}
@media (max-width: 992px) {
    .location .root_daum_roughmap .wrap_map {aspect-ratio: 1/0.75;}
}
/*============================================================*/
/* 투자안내 > E-NFT란? */
/*============================================================*/
.illust {margin-top: 10rem; text-align: center;}
.illust img {width: 40rem; max-width: 70%;}
.illust p {margin-top: 1.6rem; font-size: 3.6rem; font-weight: 500;}

.point-list {counter-reset: num; margin-top: 7rem;}
.point-list li {background: #F8FAFF; padding: 5.4rem 8rem 8rem;}
.point-list li + li {margin-top: 2.3rem;}
.point-list li > div {margin-bottom: 4rem; text-align: center; font-size: 3.8rem; font-weight: 600;}
.point-list li > div small {position: relative; color: var(--col-blue); font-size: 74%;}
.point-list li > div small::after {content: counter(num); counter-increment: num; position: absolute; top: 50%; transform: translateY(-50%); right: -2.2rem;}
.point-list li > div b {color: var(--col-blue);}
.point-list li > p {font-size: 2rem; font-weight: 500;}
@media (max-width: 992px) {
    .illust p {font-size: 2.6rem;}
    .point-list li {padding: 2rem;}
    .point-list li > div {font-size: 2.2rem;}
    .point-list li > p {font-size: 1.6rem; line-height: 1.45;}
}
/*============================================================*/
/* 투자안내 > 구매방법 */
/*============================================================*/
.method-item {display: flex; flex-wrap: wrap; gap: 3.4rem; counter-reset: number 0; padding-bottom: 12rem;}
.method-item + .method-item {padding-top: 12rem; border-top: 1px solid #57595B;}
.method-item > img {width: 50%; max-width: 62rem;}
.method-item .step {flex: 1 0 0; padding: 2.5rem 1.4rem; background: #F8FAFF;}
.method-item .step .number {margin-bottom: 4rem; text-align: center; color: #3076FF; font-size: 2.8rem; font-weight: 500;}
.method-item ol li {position: relative; padding-left: 4rem; font-size: 2rem; font-weight: 400; line-height: 1.45;}
.method-item ol li::before {content: counter(number); counter-increment: number 1; position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; height: 3rem; aspect-ratio: 1; background: #3076FF; border-radius: 50%; color: #fff; line-height: 1;}
.method-item ol li + li {margin-top: 3rem;}
@media (max-width: 768px) {
    .method-item {flex-direction: column; justify-content: center; align-items: center;}
    .method-item > img,
    .method-item .step {width: 100%;}
    .method-item ol li::before {top: 0.2rem;}
}
@media (max-width: 576px) {
    .method-item {padding-bottom: 6rem;}
    .method-item + .method-item {padding-top: 6rem;}
    .method-item .step .number {font-size: 2.2rem;}
    .method-item ol li {padding-left: 3.4rem; font-size: 1.7rem;}
    .method-item ol li::before {height: 2.5rem;}
}
/*============================================================*/
/* 상품보기 , 상품거래 - 목록 */
/*============================================================*/
.shopPage .search-area {display: flex; justify-content: space-between;}

.product-list ul {display: flex; flex-wrap: wrap; gap: 3rem;}
.product-list > ul > li {position: relative; width: calc(25% - 2.25rem); overflow: hidden;}
.product-list > ul > li > a {position: relative; display: block; width: 100%; height: 100%;}
.product-list li.no-data {width: 100%; padding: 8rem 0; text-align: center;}

.product-list .label {position: absolute; top: 2rem; left: 2rem; transition: var(--trans-25);}
.product-list .label span {display: inline-block; padding: .5rem 1rem; border-radius: 0.5rem; color: #fff; font-size: 14px; font-weight: 700;}
.product-list .label span.new {background-color: var(--col-brown);}
.product-list .label span.limit {background-color: var(--col-blue);}
.product-list .label span.premium {background-color: var(--col-red);}

.product-list .thumb-wrap {position: relative; overflow: hidden;}
.product-list .thumb {width: 100%; aspect-ratio: 1; background-position: center; background-size: cover; background-repeat: no-repeat; transition: var(--trans-25);}

.product-list .content {background: #fff; padding: 2.4rem 0 3rem;}
.product-list .content .name {text-align: center; font-size: 1.8rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.product-list .content .info {margin-top: 2rem;}
.product-list .content .info dl {display: flex; justify-content: space-between; gap: 0.5rem;}
.product-list .content .info dl + dl {margin-top: 0.5rem;}
.product-list .content .info dd {text-align: right;}
.product-list .btn-wrap {margin-top: 3rem; text-align: center;}

/* 솔드아웃 */
.product-list li.soldout .thumb-wrap::after {content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.5) url("/img/page/soldout.png") center/cover no-repeat; z-index: 1;}

@media (hover: hover) and (pointer: fine) {
    .product-list > ul > li > a:hover .thumb {transform: scale(1.125);}
    .product-list li.soldout > a:hover .thumb {transform: none;}
}
@media (max-width: 992px) {
    .product-list > ul > li {width: calc(33.33% - 2.05rem);}
}
@media (max-width: 768px) {
    .product-list > ul > li {width: calc(50% - 2.05rem);}
}
@media (max-width: 576px) {
    .product-list ul {gap: 2rem;}
    .product-list > ul > li {width: 100%;}
    #trade .product-list > ul > li {width: calc(50% - 1.05rem);}
}


/*============================================================*/
/* 상품보기 - 상세 */
/*============================================================*/
.shopPage.view .fix {text-align: center; font-size: 2.8rem; font-weight: 500; line-height: 1.5;}
.shopPage.view .fix b {display: block; margin-bottom: 2rem; font-size: 110%; font-weight: 700;}
.shopPage.view .fix b span {color: var(--col-brown);}
.shopPage.view .content-edit {min-height: 50rem; margin-top: 6.4rem;}

.product-view {display: flex; align-items: flex-start; gap: 10rem; width: 100%; margin: 6.4rem 0 10rem;}
.product-view .thumb-container {width: 40%;}
.thumb-slide .swiper-slide {aspect-ratio: 1; background-position: center; background-size: cover; background-repeat: no-repeat;}
#thumbSmall {margin-top: 10px;}

.product-view .content {flex: 1 0 auto; padding-top: 1.6rem; border-top: 1px solid var(--col-black);}
.product-view .content .label {margin-bottom: 2rem;}
.product-view .content .label span {display: inline-block; padding: .5rem 1rem; border-radius: 0.5rem; color: #fff; font-size: 14px; font-weight: 700;}
.product-view .content .label span.new {background-color: var(--col-brown);}
.product-view .content .label span.limit {background-color: var(--col-blue);}
.product-view .content .label span.premium {background-color: var(--col-red);}
.product-view .content .name {font-size: 2.7rem; font-weight: 700;}

.product-view .content .info {margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--col-bd-gray); font-size: 2rem;}
.product-view .content .info dl {display: flex; justify-content: space-between; gap: 0.5rem;}
.product-view .content .info dl + dl {margin-top: 1.4rem;}
.product-view .content .info dd {text-align: right;}
.product-view .content .info dd span {display: block; font-size: 80%;}
.product-view .content .info dd small {font-size: 80%;}

.product-view .content .total .info {margin-top: 6rem; border-color: var(--col-black);}
.product-view .content .total .info dt,
.product-view .content .total .info dd {font-size: 110%; font-weight: 700;}
.product-view .content .total .info dd {color: var(--col-blue);}

.__count_range .count {width: 50px; text-align: center;}
.__count_range input[type='button'] {width: 30px; cursor: pointer;}

.view-step {counter-reset: num; max-width: 600px; margin: 0 auto;}
.view-step li {position: relative; display: flex; align-items: flex-start; gap: 3rem;}
.view-step li:not(:last-child)::before {content: ""; position: absolute; top: 4rem; left: 2.545rem; width: 1px; height: 100%; border-left: 1px dashed var(--col-brown);}
.view-step li + li {margin-top: 4rem;}
.view-step li .num {flex: 0 0 auto; position: relative; width: 5.2rem; aspect-ratio: 1; background: url("/img/page/step.png") center/cover no-repeat;}
.view-step li .num::after {content: counter(num); counter-increment: num; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; font-size: 2rem; font-weight: 700;}
.view-step li p {font-size: 2.2rem; font-weight: 700;}
.view-step li p small {display: block; margin-top: .4rem; font-size: 75%; font-weight: 400;}
@media (max-width: 1200px) {
    .product-view {gap: 5rem;}
}
@media (max-width: 768px) {
    .product-view {flex-direction: column; align-items: center; margin: 0 0 10rem;}
    .product-view .thumb-container {width: 100%; max-width: 30rem;}
    .product-view .content {width: 100%;}

    .shopPage.view .fix {font-size: 2rem;}

    .shopPage.view .content-edit {min-height: 20rem;}
}


/*============================================================*/
/* 마이페이지 */
/*============================================================*/
/* 공통 */
.myPage .search-area {display: flex; justify-content: space-between; align-items: center;}
@media (max-width: 576px) {
    .myPage .sub-menu ul {flex-wrap: wrap;}
    .myPage .sub-menu ul li {width: calc(33.33%);}
    .myPage .search-area {flex-direction: column; align-items: flex-start; gap: 1rem;}
}


/* 내 정보 */
.profile .bank-info {flex: 1 0 auto; display: flex; gap: .5rem;}
.profile .bank-info select {width: auto; min-width: 10rem;}
.profile .leave {text-align: right;}
.profile .leave button {text-decoration: underline; text-underline-offset: 4px;}

.form-input {position: relative; display: flex; align-items: flex-start; margin: 1rem 0 2rem; background: #fff; font-weight: 700;}
.form-input input:read-only {background: #f5f5f5; color: var(--col-gray); font-weight: 500;}
.form-input > label {flex: 0 0 auto; position: relative; display: flex; align-items: center; width: 160px; height: 5rem; padding: 0.5rem 1rem;}
.form-input #content {min-height: 30rem;}
.form-input-btn input[type="text"] {padding: 1.1rem 18.6rem 1.1rem 1.8rem;}
.form-input .btn-wrap {position: absolute; bottom: 4px; right: 0;}
.form-input .btn-wrap .timer {color: var(--col-theme); font-weight: 400;}
@media (max-width: 992px) {
    .profile .bank-info input:first-of-type {padding: 0 1rem;}
}
@media (max-width: 768px) {
    .form-input > label {padding: 0;}
    .form-input-btn input[type="text"] {padding: 4px 0 4px 14px;}
}
@media (max-width: 576px) {
    .form-input {flex-direction: column; margin: 1rem 0;}
}

/* 거래내역 */
.basic-list .buy {color: var(--col-red); font-weight: 500;}
.basic-list .sell {color: var(--col-blue); font-weight: 500;}

/* 수당내역, 출금내역, 포인트내역 */
.guide-wrap {position: relative; margin-bottom: 8rem; padding: 3px; background: #f3f3f3;}
.guide-wrap:before {content:""; position:absolute; top:0; left:0; width:186px; height:30px; background-color: var(--col-theme);}
.guide-wrap .inner {position: relative; display: flex; justify-content: space-between; align-items: center; gap: 2rem; background: #fff; padding: 2rem 3rem;}
.guide-wrap .guide {width: 100%; text-align: left;}
.guide-wrap .guide .head {font-size: 2rem; font-weight: 700;}
.guide-wrap .guide .head > span {margin-left: 3rem;}
@media (max-width: 992px) {
    .guide-wrap .inner {flex-wrap: wrap; justify-content: flex-end; gap: 1rem;}
}
@media (max-width: 768px) {
    .guide-wrap .guide .head > span {margin-left: 1rem;}
}
@media (max-width: 576px) {
    .guide-wrap {margin-bottom: 4rem;}
    .guide-wrap .btn-sm {min-width: auto;}
}

/* 수당내역 - 테이블 */
.tb_verti {margin-bottom: 8rem;}
.tb_verti thead {border-top: 1px solid #E1E1E1;}
.tb_verti th,
.tb_verti td {padding: 1.45rem 1rem; border-bottom: 1px solid #E1E1E1; border-right: 1px solid #E1E1E1; text-align: center; color: var(--col-darkgray);}
.tb_verti thead th {background: #F7F7F7; color: var(--col-black); font-weight: 600;}
.tb_verti thead th:first-child,
.tb_verti tbody th {background: #A97B47; color: #fff; font-weight: 600;}
.tb_verti td { word-break: break-all; white-space: break-spaces;}
@media (max-width: 576px) {
    .tb_verti {margin-bottom: 4rem;}
}

/* 수당내역 - 카드 */
.benefit-list {display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 2rem; margin-bottom: 8rem;}
.benefit-list > li {flex: 0 0 calc(33.33% - 2rem); position: relative; padding: 2.5rem 3.3rem; border: 1px solid #EEEEEE; border-radius: 1rem;}
.benefit-list > li::after {content: ""; position: absolute; top: 2rem; right: 2.3rem; width: 3.4rem; height: 3.4rem; background: url("/img/ico_benefit.png") center/contain no-repeat;}
.benefit-list > li .name {margin-bottom: 2.5rem; padding-right: 4rem; font-size: 1.8rem; font-weight: 700;}
.benefit-list > li .sum {font-size: 2rem; font-weight: 700; word-break: break-all;}
.benefit-list > li.total {background: #EEEEEE;}
@media (max-width: 768px) {
    .benefit-list > li {flex: 0 0 calc(50% - 2rem);}
}
@media (max-width: 576px) {
    .benefit-list {margin-bottom: 4rem;}
    .benefit-list > li {flex: 0 0 100%;}
}

/* 출금내역 */
.basic-list .ready {color: var(--col-red); font-weight: 700;}
.basic-list .cancel {color: var(--col-gray); font-weight: 700;}
.basic-list .reject {color: var(--col-blue); font-weight: 700;}
.basic-list .done {color: var(--col-brown); font-weight: 700;}

/* 출금신청 */
.info-area {padding: 3.5rem 0; border-top: 1px solid var(--col-black);}
.info-area .info dl {display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;}
.info-area .info dl + dl {margin-top: 1.4rem;}
.info-area .info dt {flex: 1 0 auto; font-weight: 500;}
.info-area .info dd {text-align: right;}
.info-area .info dd span {display: block; font-size: 80%;}
.info-area .info dd small {font-size: 80%;}
.info-area .bank-info {display: flex; gap: .5rem;}

.request .container {max-width: 640px; margin: 0 auto;}
.request .exclaim {padding: 2rem; gap: 2rem; color: var(--col-black);}
.request .exclaim svg {width: 3rem;}
.request .exclaim svg .svg-fill {fill: var(--col-red);}

.request .final-area {padding-top: 3rem; border-top: 1px solid var(--col-black); font-size: 90%;}
.request .final {font-size: 2rem;}

@media (max-width: 576px) {
    .info-area .info dl {gap: 1rem;}
    .info-area .info dl + dl {margin-top: 2rem;}
    .info-area .info .m-col {flex-direction: column; align-items: flex-start;}
    .info-area .info dd {width: 100%;}
}

/* 포인트 내역 */
.point .type span {display: inline-block; padding: 3px 8px; border-radius: 6px;}
.plus span {background-color: rgb(217 0 0 / 21%);}
.minus span {background-color: rgb(48 118 255 / 38%);}



/*============================================================*/
/* 추천인 */
/*============================================================*/
#chart-container {text-align: center;}

#chart-container .orgchart .hierarchy.isSiblingsCollapsed.left-sibs::before,
#chart-container .orgchart .hierarchy:first-child::before,
#chart-container .orgchart .hierarchy.isSiblingsCollapsed.right-sibs::before,
#chart-container .orgchart .hierarchy:last-child::before,
#chart-container .orgchart .nodes.vertical .hierarchy::after,
#chart-container .orgchart .nodes.vertical .hierarchy::before {border-color: var(--col-bd-gray);}

#chart-container .orgchart .nodes {margin: 9px 0 0; padding: 0;}
#chart-container .orgchart .node {display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; min-width: 82px; min-height: 82px; margin: 0 0 31px 0; padding: 20px 10px; background: rgb(183,152,51); background: linear-gradient(90deg, rgba(183,152,51,1) 0%, rgba(230,184,67,1) 34%, rgba(215,164,31,1) 65%, rgba(204,168,75,1) 100%); border: 0;}
#chart-container .orgchart .node:not(:only-child)::after,
#chart-container .orgchart>ul>li>ul li>.node::before {bottom: -30px; height: 30px; background: var(--col-bd-gray);}
#chart-container .orgchart .node .title .parentNodeSymbol::before {display: none;}
#chart-container .orgchart .node .title,
#chart-container .orgchart .node .content {width: 100%; height: auto; background: transparent; border: 0; color: #fff; font-size: 1.8rem; font-weight: 700; text-overflow: inherit; word-break: break-all; white-space: break-spaces; overflow: inherit;}

#chart-container .orgchart .edge:hover::before,
#chart-container .orgchart .node .edge::before {background: transparent; border-color: #fff;}
#chart-container .orgchart .node .topEdge {top: 5px;}
#chart-container .orgchart .node .bottomEdge {bottom: 5px;}
#chart-container .orgchart .node .rightEdge {right: 5px;}
#chart-container .orgchart .node .leftEdge {left: 5px;}

/*-1뎁스*/
#chart-container .orgchart .node.first {margin: 0 0 37px 0; background: #483B32;}
#chart-container .orgchart .node.first::after {bottom: -46px; height: 46px;}
#chart-container .orgchart .node.first .title,
#chart-container .orgchart .node.first .content {font-size: 1.6rem;}


/* 총괄 */
#chart-container .orgchart .node.first.crown {background: url("/img/page/org_general.png") center/contain no-repeat;}
#chart-container .orgchart .node.first.crown > .title {font-size: 0;}


/*2뎁스*/
#chart-container .orgchart>ul>li>ul li>.node::before {height: 11px;}
#chart-container .orgchart .nodes .nodes .node {border-radius: 0;}
#chart-container .orgchart .nodes .nodes .node {gap: 5px; min-width: 240px; min-height: 82px; margin: 0 5px 20px; border: 1px solid #A97B47; background: #fff;}
#chart-container .orgchart .nodes .nodes .node .title,
#chart-container .orgchart .nodes .nodes .node .content {background: #fff; color: var(--col-black); font-size: 1.8rem;}
#chart-container .orgchart .edge:hover::before,
#chart-container .orgchart .node .edge::before {background: transparent; border-color: #fff;}

/*3뎁스*/
#chart-container .orgchart .nodes.vertical .node {margin: 0;}
#chart-container .orgchart .nodes .nodes .nodes .hierarchy {margin-bottom: 10px;}
#chart-container .orgchart .hierarchy:first-child::before {}
#chart-container .orgchart .nodes.vertical>.hierarchy:first-child::after {top: 40px; left: -16px; width: 16px; height: calc(100% - 79px); border-width: 2px 0 0 2px;}
#chart-container .orgchart .nodes .nodes .node .content {font-size: 16px;}
#chart-container .orgchart .nodes .nodes .nodes .node {border-color: var(--col-bd-gray);}
#chart-container .orgchart .edge:hover::before,
#chart-container .orgchart .nodes .nodes .node .edge::before {border-color: var(--col-theme);}
#chart-container .orgchart .nodes.vertical .hierarchy::before {width: calc(50% + 15px);}
#chart-container .orgchart .nodes.vertical .hierarchy::before {top: -10px; left: -16px; height: 91px;}

#chart-container .orgchart .node .toggleBtn::before,
#chart-container .orgchart .node .toggleBtn:hover::before{background: var(--col-theme); cursor: pointer;}


#chart-container .orgchart .nodes.vertical .hierarchy:first-child::before {height: 53px}