.padding_box h2 {
    font-size: 32px;
    margin-bottom: 60px;
}

.padding_box h3 {
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 20px;
}

.padding_box h4 {
    font-size: inherit !important;
    font-weight: 400;
    margin-bottom: 10px;
    color: #616161;
    line-height: 1.5;
}

    .padding_box h4.blue-600 {
        color: #26709A;
        line-height: 1.3;
        margin-top: 10px;
    }

.contents-main {
    display: inline-grid;
    /*gap: 30px;*/
    width: -webkit-fill-available;
}

    .contents-main hr {
        height: 2px;
        background-color: #383838;
    }

.contents-section {
    /*padding: 40px 60px 40px 60px;*/
    padding: 30px 45px;
    border-radius: 10px;
    border: 1px solid #DCDCDC;
    margin-bottom: 30px;
    background: #fff;
    transition: height 0.5s ease-out;
    /* 높이가 부드럽게 증가하도록 transition 적용 */
    overflow: hidden;
    transition: border-color 0.3s ease, border-width 0.3s ease;
    /* 색상과 두께 둘 다 0.3초 동안 부드럽게 변화 */
    /* 내용이 넘어가면 숨김 */
}

.chapter-info {
    background: #efefef;
}

.contents-section.current {
    border: 3px solid #26709A;
}

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

    .contents-section-box div.head-area {
        width: 100%;
        display: flex;
        gap: 5%;
    }

        .contents-section-box div.head-area > div {
            /*width:30%;*/
            /*font-size: 20px;*/
            font-weight: 700;
            line-height: 45px;
        }

            .contents-section-box div.head-area > div .hideBox > div {
                width: 200px;
            }

        .contents-section-box div.head-area .inputBox {
            width: 200px;
            height: 45px;
            line-height: 45px;
            /*background: #efefef;*/
            border-radius: 10px;
            font-weight: 500;
            color: #8c8c8c;
        }

        .contents-section-box div.head-area input {
            width: 200px;
            height: 45px;
            background: #efefef;
            border-radius: 10px;
            border: none;
            color: #8c8c8c;
            padding: 0 10px;
        }



.timer {
    color: #E95D5D;
}

.contents-section-box div.head-area2 {
    width: 70%;
}

.contents-section-box div.content-area {
    width: 100%;
}

.chapter-bankaccount div.content-area {
    display: flex;
    gap: 30px;
}

    .chapter-bankaccount div.content-area div.radio-area {
        display: inherit;
        align-items: flex-start;
        gap: 25px;
    }

        .chapter-bankaccount div.content-area div.radio-area h3 {
            margin: 0 0 4.8px 0;
            font-size: 20px;
        }

        .chapter-bankaccount div.content-area div.radio-area input {
            margin-top: 1px;
            width: 25px;
            height: 25px;
        }

.market-regist-box {
    border: 1px solid #E0E0E0;
    padding: 10px 15px 0px 15px;
}

    .market-regist-box tr {
        border-top: 1px solid #E0E0E0;
    }

    .market-regist-box td {
        padding: 13px 10px 13px 10px;
        position: relative;
    }

        .market-regist-box td.logo {
            padding: 13px 0px 13px 0px;
        }

    .market-regist-box input {
        margin-bottom: 2px;
        margin-top: 2px;
        height: 45px;
        border-radius: 10px;
        border: 1px solid #E0E0E0;
        width: 150px;
    }

        .market-regist-box input::placeholder {
            color: #9E9E9E;
            opacity: 1;
        }

        .market-regist-box input:disabled {
            background-color: #E0E0E0;
        }

    .market-regist-box a {
        margin-bottom: 2px;
        margin-top: 2px;
        height: 45px;
        border-radius: 10px;
        border: 1px solid #E0E0E0;
        line-height: 41px;
        padding: 0 15px;
    }

        .market-regist-box a.btn {
            width: 100px;
            user-select: none;
        }

        .market-regist-box a.btn-active {
            padding-left: 2px;
            padding-right: 25px;
            color: #26709A;
            border: 1px solid #26709A;
            transition: transform 0.2s ease-out, background-color 0.2s ease-out;
        }

            .market-regist-box a.btn-active img {
                vertical-align: text-top;
                padding-right: 10px;
            }

            .market-regist-box a.btn-active.selected {
                padding-left: 2px;
                padding-right: 12px;
                border: 1px solid #26709A;
                color: #FFFFFF;
                background-color: #26709A;
            }

                .market-regist-box a.btn-active.selected img {
                    vertical-align: text-top;
                    padding-right: 10px;
                }

        .market-regist-box a.btn-select {
            padding-left: 2px;
            padding-right: 25px;
            color: #9E9E9E;
            transition: transform 0.2s ease-out, background-color 0.2s ease-out;
        }

            .market-regist-box a.btn-select img {
                vertical-align: text-top;
                padding-right: 10px;
            }

            .market-regist-box a.btn-select.selected {
                padding-left: 2px;
                padding-right: 12px;
                border: 1px solid #26709A;
                color: #FFFFFF;
                background-color: #26709A;
            }

                .market-regist-box a.btn-select.selected img {
                    vertical-align: text-top;
                    padding-right: 10px;
                }

        .market-regist-box a.btn-regist {
            border: 1px solid #26709A;
            color: #26709A;
            transition: transform 0.3s ease-out, background-color 0.3s ease-out;
        }

            .market-regist-box a.btn-regist:hover {
                border: 1px solid #26709A;
                background-color: #26709A;
                color: #FFFFFF;
            }

        .market-regist-box a.btn-edit {
            border: 1px solid #D9F1FB;
            background-color: #D9F1FB;
            border-radius: 25px;
        }

.padding_box a {
    margin-bottom: 2px !important;
    margin-top: 2px !important;
    height: 45px !important;
    border-radius: 10px !important;
    border: 1px solid #E0E0E0 !important;
    line-height: 41px !important;
    padding: 0 15px !important;
}

    .padding_box a.btn {
        width: 140px;
        user-select: none;
        background : #fff;
    }

    .padding_box a.btn-regist_disabled {
        border: 1px solid #9E9E9E;
        color: #9E9E9E;
        transition: transform 0.3s ease-out, background-color 0.3s ease-out;
        position: relative;
    }


    .padding_box a.btn-regist {
        border: 1px solid #26709A;
        color: #26709A;
        transition: transform 0.3s ease-out, background-color 0.3s ease-out;
        position: relative;
    }

        .padding_box a.btn-regist:hover {
            border: 1px solid #26709A;
            background-color: #26709A;
            color: #FFFFFF;
        }

    .padding_box a.btn-select {
        padding-left: 2px;
        padding-right: 25px;
        color: #9E9E9E;
        transition: transform 0.2s ease-out, background-color 0.2s ease-out;
    }

    .padding_box a.btn-regist span {
        display: inline-block;
        width: 140px;
        text-align: center;
        position: absolute;
        left: 0;
        /*padding: 0 10px;*/
    }

        .padding_box a.btn-regist span:hover {
            color: #FFFFFF;
        }

#completeRegistBtn.btn-regist_disabled {
    border: 1px solid #9E9E9E;
    color: #9E9E9E;
    transition: transform 0.3s ease-out, background-color 0.3s ease-out;
    position: relative;
    background: unset;
}


#completeRegistBtn.btn-regist {
    border: 1px solid #26709A;
    color: #26709A;
    transition: transform 0.3s ease-out, background-color 0.3s ease-out;
    position: relative;
    background: unset;
}

    #completeRegistBtn.btn-regist:hover {
        border: 1px solid #26709A;
        background-color: #26709A;
        color: #FFFFFF;
    }

    #completeRegistBtn.btn-regist span {
        display: inline-block;
        width: 140px;
        text-align: center;
        position: absolute;
        left: 0;
        /*padding: 0 10px;*/
    }

    #completeRegistBtn.btn-regist span:hover {
        color: #FFFFFF;
    }



#loadingText {
    display: inline-block;
    width: 140px;
    text-align: center;
    position: absolute;
    left: 0;
    line-height: 45px;
    color: #26709A;
}

    #loadingText:hover {
        color: #FFFFFF;
    }

.gg-add.inactive {
    display: none;
}

.error-message {
    font-size: smaller;
    position: absolute;
    top: 58px;
    left: 13px;
    white-space: nowrap;
    color: #FF0000;
}

ins {
    font-family: 'Pretendard';
}

.popover-btn {
    cursor: pointer;
    object-fit: contain;
    width: 22px;
}

#popover-btn {
    anchor-name: --anchor_1;
}

#popover-content {
    position-anchor: --anchor_1;
}

#popover-btn2 {
    anchor-name: --anchor_2;
}

#popover-content2 {
    position-anchor: --anchor_2;
}

.popover-content {
    padding: 20px 25px 20px 25px;
    background-color: #FFFFFF;
    border: 1px solid #ccc;
    border-radius: 15px;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    margin-top: 5px;
    position-area: bottom;
    box-shadow: 2px 4px 15px 4px rgb(4 11 15 / 25%);
    font-family: 'Pretendard';
    font-size: 14px;
}

    .popover-content * {
        font-family: 'Pretendard' !important;
        border-radius: 10px;
        font-size: 14px !important;
    }
    .popover-content p {
        white-space: nowrap;
    }

.imgBox img {
    height: 35px;
    width: 35px;
    border-radius: 5px;
    border: 1px solid #ccc;
    display: inline !important;
}

a.logoBg {
    border: none !important;
}

.chapter-progress-bar.contents-section {
    position: -webkit-sticky;
    position: sticky;
    z-index: 90;
    border: 3px solid #26709A;
    top: 100px;
    background-color: white;
}

.marketBtnWrap {
    text-align: center;
    place-items: center;
}

    .marketBtnWrap button {
        width: 300px;
        height: 70px;
        font-size: 18px;
    }

.numIcon {
    display: grid;
    place-items: center;
}

.head-area .numIcon .btn-regist {
    width: 81px;
    font-size: 14px;
    background: #202020;
    color: #fff;
    border: 1px solid #202020;
    text-align: center;
    border-radius: 10px;
    height: 40px;
    line-height: 40px;
}

.chapterBox01 {
    display: inline-flex;
    gap: 20px;
}

    .chapterBox01 .marketInfo div {
        display: inline-flex;
        gap: 10px;
        font-size: 18px;
        font-weight: 500;
        line-height: 32px;
    }

/*.chapterBox01 .marketInfo::before {
  content: '';
  display: inline-block;
  width: 2px;
  height: 2px;
  background: #202020;
  margin: 0 10px 20px 0;
}*/

.hideBox {
    position: relative;
}

    .hideBox input {
        width: 200px;
    }

    .hideBox span {
        position: absolute;
        right: 10px;
/*        top: 25%;*/
    }

@media (min-width:960px) {
}

@media (max-width:768px) {

    .width_box02 .page_tit {
        margin-bottom: 50px;
    }

    .width_box02 .t_view {
        display: none;
    }

    .t_959 {
        display: block;
    }

    .contents-main {
        display: block;
    }

    .listTable {
        display: none;
    }

    .marketT01 > div {
        margin: 10px 0;
    }

    .contents-section-box div.head-area div {
        line-height: 1.125rem;
    }

    .hideBox input {
        width: 180px;
    }

    .contents-section-box div.head-area2 {
        width: 70%;
    }

    .chapter-markets .chapterBox01 {
        display: unset;
    }

    .chapterBox01 .marketInfo div {
        padding: 5px 5px 5px 0;
    }

    .contents-section-box div:last-child {
        width: 50%;
    }
}

@media (max-width:480px) {
    .contents-section-box {
        display: unset;
    }

        .contents-section-box div.head-area div {
            line-height: auto;
        }

    .chapter-markets .chapterBox01 {
        display: unset;
    }

    .contents-section-box div.head-area {
        display: unset;
    }

    .bankBox .contents-section-box {
        display: unset;
    }

    .contents-section-box div.content-area {
        width: 100%;
    }

    .contents-section-box div.content-area02 {
        width: 30%;
        display: contents;
    }

    .marketBtnWrap button {
        width: 100%;
    }

    .padding_box a.btn {
        width: 100%;
    }
}


/*공통*/
.sub_contentBox {
    background: #f8f8fb;
}

.width_box02 {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    min-width: 360px;
/*    padding: 0 20px;*/
    padding-top: 140px;
}

    .width_box02 .page_tit {
        margin-bottom: 50px;
    }

        .width_box02 .page_tit p {
            font-size: 14px;
        }

        .width_box02 .page_tit h2 {
            font-size: 24px;
            margin-bottom: 20px;
        }

        .width_box02 .page_tit h3 {
            font-size: 34px;
            font-weight: 500;
            margin-bottom: 20px;
            color: #202020;
        }

        .width_box02 .page_tit h4 {
            font-weight: 400;
            margin-bottom: 0px;
        }

.cb {
    color: #1E5D80;
}

/* 로딩 스피너 스타일 */
.btn-regist_disabled .btn-text {
    display: inline-block;
    line-height: 44px;
    color: #9E9E9E;
}

.btn-text {
    display: inline-block;
    line-height: 44px;
    color: #26709A;
}

#loadingBtn:hover {
    color: #fff;
}

.btn-container {
    position: relative;
    /* 위치 기준을 설정 */
    display: inline-flex;
    /* 버튼 내부 요소들이 flex 컨테이너로 배치 */
    justify-content: center;
    /* 수평 중앙 정렬 */
}

.spinner {
    border: 3px solid #2D84B4;
    /* 배경색 */
    border-top: 3px solid #fff;
    /* 스피너 색상 */
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
    top: 25%;
}

.spinner {
    position: absolute;
    /* 버튼 내부에서 절대 위치 설정 */
    z-index: 0;
    /* 텍스트보다 뒤로 배치 */
    display: none;
    /* 초기에는 숨김 */
    left: 10%;
}

#loadingText1,
#loadingText2 {
    position: absolute;
    /* 버튼 내부에서 절대 위치 설정 */
    z-index: 0;
    /* 텍스트보다 뒤로 배치 */
    display: none;
    /* 초기에는 숨김 */
    left: 30%;
}

.spinner:hover {
    animation: spin 1s linear infinite;
    /* hover 시에도 돌아가도록 추가 */
}


a.btn.completed {
    background-color: #202020;
    color: #fff;
    border: none;
    cursor: not-allowed;
    pointer-events: none;
}

    a.btn.completed:hover {
        background-color: #202020;
        color: #fff;
        /* 텍스트 색상 변경 */
    }

    a.btn.completed span {
        color: #fff;
    }


    a.btn.completed:disabled {
        background-color: #ccc;
        /* 비활성화된 버튼 색상 */
        cursor: not-allowed;
        /* 마우스 커서 변경 */
        opacity: 0.6;
        /* 비활성화된 버튼 투명도 */
    }

/* 로딩 스피너 회전 애니메이션 */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.hidden {
    visibility: hidden;
}

.contents-section02 {
    overflow: hidden;
    /* 내용이 넘칠 때는 숨겨지게 설정 */
    max-height: 202px;
    /* 충분히 큰 max-height 값 설정 (이 값은 실제로 contents-section의 최대 높이 범위로 설정) */
    transition: max-height 0.4s ease-in-out;
    /* max-height가 변화할 때 0.5초 동안 부드럽게 애니메이션 */
}

    .contents-section02.expanded {
        max-height: 305px;
        /* 내용에 맞는 최대 높이로 설정 */
    }

/* 입력 필드가 나타날 때 애니메이션 */
.userInfoInputBox {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.3s ease, transform 0.4s ease;
}

    .userInfoInputBox.show {
        opacity: 1;
        transform: translateY(0);
    }

.userInfoMessage {
    opacity: 0;
    transition: opacity 0.3s ease;
}

    .userInfoMessage.show {
        opacity: 1;
    }

.visible {
    visibility: visible;
}

.installGuideWrap {
    width: 100%;
    padding: 30px;
    background: #fff;
    border-radius: 10px;
}

.installGuide_textBox p {
    padding-bottom: 20px;
    line-height: 1.5;
}

.installGuideWrap .h-modal-table {
    width: 100%;
    border: 1px solid #F4F4F5;
}

    .installGuideWrap .h-modal-table th {
        border-bottom: 1px solid #F4F4F5;
        padding: 15px;
        text-align: center;
        background: #F4F4F5;
        color: #202020;
        font-weight: 500;
    }

    .installGuideWrap .h-modal-table td {
        text-align: center;
        padding: 20px;
        border-right: 1px solid #F4F4F5;
    }

        .installGuideWrap .h-modal-table td div {
            text-align: center;
        }

        .installGuideWrap .h-modal-table td button {
            padding: 10px 20px;
            margin-top: 10px;
            border-radius: 50px;
            color: #fff;
            background: linear-gradient(to right, #227FC2, #52C6D6);
            text-align: center;
        }

.tRed {
    color: #E4503D;
}

.tBlue {
    color: #2D84B4;
}

.tBlack {
    color: #202020;
}

.tGray {
    color: #A2A2A2;
}
b, strong {
    font-weight: 500 !important;
}

/* 모달 팝오버 스타일 */
.spopover {
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 250px;
    z-index: 100;
    display: none;
}

.spopover-header {
    padding: 10px;
    border-bottom: 1px #e9ecef;
    background-color: #e9ecef;
    font-weight: bolder;
}

.spopover-content {
    padding: 10px;
}

.spopover-footer {
    padding: 10px;
}

.spopover button {
    padding: 10px 20px;
    margin: 10px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    margin: 5px;
    padding: 5px 10px;
}

.spopover button.btn-confirm {
    background-color: #26709A;
    color: white;
}

.spopover button.btn-cancel {
    background-color: #f44336;
    color: white;
}