/**************** public layout *******************/
:root {
    --dark-bg: #030708;   
    --dark-color: #ffffff;

    --light-bg: #eeeeee;   
    --light-color: #181818;

    --subCT-bg: #f3f3f3;

    --btn-radius: 6px; 
    --bd-color: #d2d2d2;
}

@font-face {
    font-family: "Noto Sans KR";
    src: url("../fonts/Noto_Sans_KR/NotoSansKR-Black.otf") format('opentype');
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: "Noto Sans KR";
    src: url("../fonts/Noto_Sans_KR/NotoSansKR-Bold.otf") format('opentype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: "Noto Sans KR";
    src: url("../fonts/Noto_Sans_KR/NotoSansKR-Medium.otf") format('opentype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: "Noto Sans KR";
    src: url("../fonts/Noto_Sans_KR/NotoSansKR-Regular.otf") format('opentype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Noto Sans KR";
    src: url("../fonts/Noto_Sans_KR/NotoSansKR-Light.otf") format('opentype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: "Noto Sans KR";
    src: url("../fonts/Noto_Sans_KR/NotoSansKR-Thin.otf") format('opentype');
    font-weight: 100;
    font-style: normal;
}

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-family: 'Noto Sans KR', -apple-system,Arial, sans-serif; 
    -webkit-tap-highlight-color: transparent;
}

html, body, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, 
abbr, address, big, cite, code, del, dfn, em, font, img, ins, q, s, samp, small, 
strike, strong, sub, sup, tt, var, b, u, i, ul, ol, li, dl, dt, dd, table, caption,
tbody, tfoot, thead, tr, th, td, fieldset, fo7m, label, legend, input, button, textarea, select 
{margin:0; padding: 0; }
html, body { margin: 0; padding: 0; height: 100%;}

body { background-color: #fff; margin: 0; height: auto; font-size: 14px; color: #030708; min-height: 100vh; }
input, select, textarea { border: 1px solid #ccc; height: 40px; padding: 5px 15px; /*font-family:"Droid Sans";*/ outline: none; font-size: 1em; }
textarea { resize: none; }
input:focus, select:focus, textarea:focus { border-color: #333; }
select {
    height: 32px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url(../img/icon/arrow_down.png);
    background-position: right 6px center;
    background-repeat: no-repeat;
    padding-left: 12px;
    padding-right: 24px;
    border-color: currentColor;
}
select::-ms-expand {
    display: none;
}
input {
    border-radius: var(--btn-radius);
}
input::placeholder { 
    color: #aeaeae; 
}
button:focus,
select:focus,
input:focus {
    outline: 2px solid #fff;
}
input[type="text"] {width:100%;}
input[name="title"] {font-size: 21px; font-weight: 800; text-align: center;}
input[type="password" i] { font-family:"Droid Sans"; }

em { font-style: inherit; }
ul { list-style: none; }
a { text-decoration: none; color: currentColor; }
i { font-style: inherit; }
button { font-weight: 700; font-size: 1.1em; cursor: pointer; }
button:focus { outline: none; box-shadow: 0px 0px 10px #eee; }
h3 { font-size: 24px; font-weight: 700; }

table {
    width: 100%;
    border: 1px solid #ccc;
    border-collapse: collapse;
    border-left: 0px;
    border-right: 0px;
    font-size: 1em;
}
a:hover {
    text-decoration: underline;
}
/* */




/* button */
    .btn {}
    .btn:hover {
        text-decoration: none;
        background-color: #eee;
    }

/* dark mode */ 
    html[data-theme='dark'] body {
        background-color: var(--dark-bg);
        color: var(--dark-color);
    }
    html[data-theme='dark'] header {
        /*background-color: var(--dark-bg);*/
        background-color: rgba(0,0,0,0.7);
        color: #909090;
    }
    html[data-theme='dark'] footer {
        background-color: var(--dark-bg);
        color: #909090;
    }
    html[data-theme='dark'] .btn {
        color: var(--dark-color);
        border-radius: var(--btn-radius);
        border-color: var(--bd-color);
    }



/* light mode */
    html[data-theme='light'] body {
        background-color: var(--light-bg);
        color: var(--light-color);
    }
    html[data-theme='light'] header {
        /*background-color: #a6a8ad;*/
        background-color: rgba(164,166,171,0.7);
        color: #181818;
    }
    html[data-theme='light'] footer {
        background-color: var(--light-bg);
        color: #5b5b5b;
    }
    html[data-theme='light'] .btn {
        color: var(--dark-color);
        border-radius: var(--btn-radius);
        border-color: var(--bd-color);
    }



/* customer select */
    .select-wrap {
        position: relative;
        display: inline-block;
        font-size: 17px;
    }
    .select-wrap .selectBox .select {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 32px;
        background-color: var(--dark-bg);
        color: var(--dark-color);
        background-image: url(../img/icon/arrow_drop_w.png);
        background-size: 10px;
        background-repeat: no-repeat;
        background-position: right 12px center;
        font-size: 17px;
        font-weight: 500;

        padding-left: 12px;
        padding-right: 34px;
        border: 1px solid currentColor;
        cursor: pointer;
    }
    .select-wrap .selectBox .list {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: nowrap;
        position: absolute;
        left: 0;
        top: 100%;
        margin-top: 18px;
        padding: 13px 0;
        border: 1px solid #727273;
        z-index: 1;
        color: #eee;
        display: none;

        background-color: var(--dark-bg);
    }
    .select-wrap .selectBox .select[aria-expanded="true"] + .list {
        display: flex;
    }
    .select-wrap .selectBox .list li {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        white-space: nowrap;
        padding: 7px 20px;
        cursor: pointer;
    }
    .select-wrap .selectBox .list li img {
        vertical-align: middle;
        margin-left: 4px;
    }

    .select-wrap .selectBox .selected {
        color: #dd0012;
    }
    .select-wrap .selectBox .list li:hover {
        text-decoration: underline;
    }


/* layout */
    body, header, footer {
        min-width: 1280px;
    }
    header {
        position: fixed;
        top: 0;
        left: 0;

        width: 100%;
        height: 70px;
        z-index: 9000;
    }

    footer {
        min-height: 150px;
    }

    .pdt50 {
        padding-top: 50px;
    }

    header + .container {
        padding-top: 70px;
    }
    header + .container.pdt0 {
        padding-top: 0;
    }

    input.verify-inp {
        padding-right: 50px;
        background-repeat: no-repeat;
        background-image: url(../img/icon/check.png);
        background-position: right 20px center;
    }
    input.verify-inp.checked {
        background-image: url(../img/icon/checked.png);
    }

    /* sub page */
    .sub-container {
        background-color: var(--subCT-bg);
        height: 100%;
        min-height: calc(100vh - 363px);
        color: #030708;
    }
    .sub-container + footer {
        background-color: var(--subCT-bg) !important;
        border-top: 1px solid #e5e5e5;
    }
    .sub-container + footer .company {
        color: #5b5b5b;
        letter-spacing: -0.25px;
    }
    .sub-container + footer .footer-gnb01 {
        color: #5b5b5b;
    }
    .sub-page-title {
        font-size: 34px;
        font-weight: 500;
        line-height: 1em;
    }

    .hisback {
        color: #ee0404;
        font-size: 18px;
        font-weight: 500;

        padding-left: 30px;
        background-image: url(../img/icon/arrow_back.png);
        background-repeat: no-repeat;
        background-position: left center;
    }

    .text-circle {
        /*display: flex;
        justify-content: flex-start;
        align-items: center;*/
    }
    .text-circle:before {
        display: inline-block;
        vertical-align: top;
        content: "·";
        width: 7px;
        font-size: 48px;
        line-height: 24px;
        margin-right: 10px;
    }

    /* table tool */
    .table-tool-area .wave {
        display: inline-block;
        margin: 0 8px;
        font-weight: 700;
        font-size: 24px;
        line-height: 26px;
        vertical-align: top;
    }

    .table-tool-area select {
        width: 80px;
        height: 26px;
        padding: 0 6px;
        padding-right: 24px;
        border-radius: 4px;
        font-size: 16px;
    }
    .table-tool-area select:focus,
    .table-tool-area button:focus {
        outline: 2px solid #000;
    }

    .table-tool-area button {
        flex-shrink: 0;
        background-color: #e60012;
        border: none;
        color: #fff;
        height: 36px;
        padding: 0 12px;
        font-size: 16px;
        font-weight: 700;
        border-radius: 2px;
        box-shadow: inset 3px -3px 3px rgba(0,0,0,0.1);
        -webkit-box-shadow: inset 3px -3px 3px rgba(0,0,0,0.1);
    }

    .table-tool-area .searchBox {
        flex-grow: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    .table-tool-area .searchBox input {
        width: 250px;
        height: 32px;
        border-color: #000;
        border-radius: 4px;
        font-size: 16px;
        padding: 0 10px;
        margin-right: 10px;
    }
    .table-tool-area .searchBox button {
        box-shadow: none;
        width: 80px;
        height: 32px;
        border-radius: 4px;
        font-size: 16px;
        font-weight: 400;
        color: #dbdbdb;
    }


    .bbs-list-area .table-tool-area .btn__ {
        flex-shrink: 0;
    }

    .date-select {
        flex-grow: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-right: 50px;
        font-size: 16px;
    }
    .date-select input[type="date"] {
        border-radius: 0;
        height: 36px;
        margin-left: 10px;
    }
    .date-select span {
        padding: 0 10px;
        color: #7d7d7d;
        font-weight: 500;
    }

/* drop down list */
    .list-type-circle li {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        line-height: 1em;
    }
    .list-type-circle li + li {
        margin-top: 11px;
    }
    .list-type-circle li:before {
        content: "";
        width: 6px;
        height: 6px;
        margin-top: 2px;
        border-radius: 3px;
        background-color: #000;
        margin-right: 12px;
    }


/* header */
    header .inner {
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        padding: 0 30px;
    }

    header .fx-item {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    header .search-area {
        position: relative;
    }
    header .search-area button {
        position: absolute;
        right: 0;
        top: 0;
        width: 48px;
        height: 36px;
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-image: url(../img/icon/icon_fas.png);
        background-color: transparent;
        border: none;
        border-radius: 0px 6px 6px 0;
        z-index: 1;
    }
    header .search-area button:hover,
    header .search-area button:focus {
        box-shadow: 0px 0px 2px 2px rgba(255,255,255,0.8);
        -webkit-box-shadow: 0px 0px 2px 2px rgba(255,255,255,0.8);
    }
    header .searchBox {
        height: 35px;
        background-color: transparent;
        color: var(--dark-color);

        width: 300px;
        height: 36px;
        border-color: #7e7e7e;
        font-size: 16px;
    }

    header .use-login-area {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    header .btn-home {
        color: #fff;
        padding-left: 20px;
        font-size: 18px;
        line-height: 1em;
        background-image: url(../img/icon/home_w.png);
        background-repeat: no-repeat;
        background-position: left bottom;
    }
    header .btn-signup,
    header .btn-signin {
        display: inline-block;
        font-size: 18px;
        line-height: 1em;
        border-radius: 6px;

        margin-left: 27px;
        padding: 6px 20px;
    }
    header .btn-signup {
        background-color: #f0f0f0;
        color: #030708;
    }
    header .btn-signin {
        background-color: #e50914;
        color: #fff;
    }

    header .UseName,
    header .Cashpoint {
        font-size: 16px;
        margin-left: 27px;
    }

    /* scrolling header */
    header.trans-header {
        background-color: transparent !important;
        transition: all 0.3s;
        -webkit-transition: all 0.3s;
    }
    header.trans-header.fixed {
        background-color: rgba(0,0,0,0.8) !important;
    }

/* footer */
    footer .inner {
        max-width: 846px;
        margin: 0 auto;
        padding-bottom: 40px;
    }
    footer .company {
        font-size: 12px;
        margin-top: 50px;
    }

    footer .simple-term-link {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 0 65px;
        padding-top: 25px;
    }
    footer .simple-term-link li {
        font-size: 16px;
        margin-left: 36px;
    }

    .footer-gnb01 {
        margin-top: 35px;
    }
    .footer-gnb01 ul {
        display: flex;
        justify-content: flex-start;
        align-items: top;
        flex-flow: wrap;
    }
    .footer-gnb01 ul li {
        flex: 0 1 25%;
        padding-top: 25px;
    }
    .footer-gnb01 ul li a {
        display: inline-block;
        font-size: 16px;
        line-height: 1em;
    }

    .footer-gnb01 ul.sns li {
        flex: inherit;
        margin-right: 27px;
        padding: 0;
    }
    .footer-gnb01 ul.sns li a {
        width: 30px;
        height: 30px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
    }
    .footer-gnb01 .sns .instar {
        background-image: url(../img/icon/instar.png);
    }
    .footer-gnb01 .sns .fbook {
        background-image: url(../img/icon/fbook.png);
    }
    .footer-gnb01 .sns .twit {
        background-image: url(../img/icon/twit.png);
    }
    .footer-gnb01 .sns .ytb {
        background-image: url(../img/icon/ytb.png);
    }


    .CashReload {
        margin-left: 27px;
    }
    .CashReload a {
        position: relative;
        display: block;
        font-size: 12px;
        padding-top: 7px;
    }
    .CashReload .icon-cash {
        display: block;
        margin-bottom: 4px;
        width: 37px;
        height: 19px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
    .CashReload .icon-cash.low {
        background-image: url(../img/icon/cashlow.png);
    }
    .CashReload .icon-cash.hig {
        background-image: url(../img/icon/cashhig.png); 
    }
    .CashReload .new {
        position: absolute;
        top: 0;
        right: 0;
        width: 18px;
        line-height: 18px;
        border-radius: 9px;
        background-color: #ff0000;
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        text-align: center;
        opacity: 0;
    }
    .CashReload .icon-cash.low + .new {
        opacity: 1;
    }

    /* 카테고리 분류 */
    .category-area {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-left: 40px;
    }
    .category-area .select-wrap + .select-wrap {
        margin-left: 11px;
    }

    .category-area .select-wrap .selectBox .list li {
        min-width: 120px;
    }

/* 계정 메뉴*/
    .account-dropMenu {
        position: relative;
        margin-left: 28px;
        z-index: 1;
    }

    .account-dropMenu .drop-mune-btn {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        cursor: pointer;
    }

    .account-dropMenu .drop-mune-btn .arrow_icon {
        background-image: url(../img/icon/arrow_drop_w.png);
        background-repeat: no-repeat;
        background-position: center;
        width: 11px;
        height: 9px;
        margin-left: 10px;
        transition: all 0.3s;
        -webkit-transition: all 0.3s;
    }

    .account-dropMenu .account-drop-down {
        position: absolute;
        right: 0;
        top: 100%;
        margin-top: 26px;
        padding: 20px;
        background-color: #030708;
        box-shadow: 0px 0px 4px rgba(0,0,0,0.8);
        -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.8);
    }
    .account-dropMenu .account-drop-down:before {
        content: "";
        position: absolute;
        left: 0;
        top: -26px;
        width: 100%;
        height: 26px;
    }

    .account-dropMenu .drop-mune-btn[aria-expanded="false"] + .account-drop-down {
        display: none;
    }

/* 계정메뉴 드롭 */
    .account-drop-down {
        color: #fff;
        min-width: 280px;
        font-size: 16px;
    }
    .account-drop-down li + li {
        margin-top: 15px;
    }
    .account-drop-down ul + ul {
        margin-top: 30px;
        font-weight: 500;
    }
    .account-drop-down .logout {
        color: #e50914;
    }
    .account-profile-info {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: nowrap;
        white-space: nowrap;
        margin-bottom: 20px;
    }
    .account-profile-info .profile-icon {
        flex-shrink: 0;
        margin-right: 14px;
    }
    .account-profile-info .useName {
        color: #fff;
        font-size: 16px;
        font-weight: 500;
    }
    .account-profile-info .profile-link {
        color: #878787;
        font-size: 14px;
    }   

/* 프로필 아이콘 */
    .profile-icon {
        width: 41px;
        height: 41px;
        border-radius: 6px;
        overflow: hidden;
    }
    .profile-icon img {
        width: 100%;
        height: 100%;
    }

/* 다크 & 화이트 모드 체크 */
    .slide-checkbox {
        position: relative;
        display: inline-block;
        width: 130px;
    }
    .slide-checkbox input {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
        z-index: 1;
    }
    .slide-checkbox input:focus-visible + label {
        outline: 1px solid currentColor;
        border-radius: 2px;
    }
    .slide-checkbox a {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 10;
    }

    .slide-checkbox input + label {
        display: flex;
        justify-content: space-between;
        align-items: center;
        line-height: 1em;
    }

    .slide-checkbox input + label:before {
        content: "화이트 테마";
    }
    .slide-checkbox input + label span {
        position: relative;
        display: inline-block;
        width: 30px;
        height: 20px;
        border-radius: 10px;
        background-color: #4c4c4c;
        margin-left: 15px;
    }
    .slide-checkbox input + label span:before {
        content: "";
        position: absolute;
        left: 100%;
        top: 0;
        width: 15px;
        height: 16px;
        margin: 2px;
        border-radius: 10px;
        background-color: #030708;
        margin-left: -17px;
        transition: all 0.3s;
        -webkit-transition: all 0.3s;
    }

    .slide-checkbox input:checked + label:before {
        content: "다크 테마";
    }
    .slide-checkbox input:checked + label span:before {
        left: 0%;
        top: 0;
        margin-left: 2px;
    }

/* 체크박스 */
    .checkBox {
        position: relative;
    }

    /* 라디오 */
    .checkBox.radio {
        width: 18px;
        height: 18px;
    }
    .checkBox.radio input[type="radio"] {
        width: 100%;
        height: 100%;
        opacity: 0;
    }
    .checkBox.radio input[type="radio"]:focus + span {
        box-shadow: 0px 0px 0px 2px #000;
        -webkit-box-shadow: 0px 0px 0px 2px #000;
    }
    .checkBox.radio input[type="radio"] + span {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-image: url(../img/icon/radio.png);
        background-repeat: no-repeat;
        background-size: 100%;
        border-radius: 50%;
    }
    .checkBox.radio input[type="radio"]:checked + span {
        background-image: url(../img/icon/radio_checked.png);
    }

/* 작성자 정보 */ 
    .writer-area {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        padding-top: 15px;
        padding-bottom: 15px;
    }
    .writer-area .profile-icon {
        margin-right: 19px;
        flex-shrink: 0;
    }
    .writer-area .detail {
        position: relative;
        flex-grow: 1;
    }
    .writer-area .nick {
        font-size: 14px;
        font-weight: 500;
        line-height: 1em;
        margin-bottom: 8px;
    }
    .writer-area .tool {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        font-weight: 300;
        color: #b2b2b2;
    }
    .writer-area .tool span {
        padding-right: 5px;
    }

/* 수정 삭제 */
    .modify-tool-area {
        position: absolute;
        right: 0;
        top: 0;
        z-index: 10;
    }
    .modify-tool-area .btn-modify {
        display: inline-block;
        width: 6px;
        height: 16px;
        background-image: url(../img/icon/dot.png);
        background-repeat: no-repeat;
        background-position: center;
    }
    .modify-tool-area .modify {
        color: #a9a9a9;
    }
    .modify-tool-area .delete {
        color: #ff0000;
    }
    .modify-tool-area div[role="menu"] {
        display: none;
        position: absolute;
        right: 0;
        top: 100%;
        width: 56px;
        min-height: 56px;
        text-align: center;
        border: 1px solid #e5e5e5;
        border-radius: 6px;
        padding: 6px;
    }
    .modify-tool-area div[role="menu"] a {
        display: block;
        font-size: 14px;
    }

    .modify-tool-area .btn-modify[aria-expanded="true"] + div[role="menu"] {
        display: block;
    }

/* 계정 관리 */
    .use-acount .inner {
        width: 846px;
        margin: 0 auto;
        padding-bottom: 100px;
    }
    .use-account-area {
        display: flex;
        flex-flow: wrap;
        justify-content: space-between;
        align-items: top;
        margin-top: 24px;
        padding-top: 20px;
        border-top: 1px solid #7d7d7d;
    }
    .use-account-area > div {
        flex-shrink: 0;
    }
    .use-account-area > div:last-child {
        min-width: 500px;
    }
    .use-account-area > div:last-child ul li {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        font-size: 18px;
        margin-bottom: 10px;
    }

    .use-account-area > div:last-child ul li a {
        display: block;
        color: #1056e4;
    }

    .use-account-area h5 {
        font-size: 24px;
        font-weight: 400;
        line-height: 1em;
        color: #9e9e9e;
    }
    .use-account-area .signout {
        display: inline-block;
        margin-top: 15px;
        background-color: #dcdcdc;
        width: 200px;
        font-size: 14px;
        line-height: 42px;
        text-align: center;
        border-radius: 2px;
        border-right: 1px solid #c2c2c2;
        border-bottom: 1px solid #c2c2c2;
        box-shadow: 0px 0px 1px #dcdcdc;
        -webkit-box-shadow: 0px 0px 1px #dcdcdc;
    }
    .use-account-area .signout:hover,
    .use-account-area .signout:focus {
        text-decoration: none;
        background-color: #e9e9e9;
        /*border: 0px;
        border-left: 1px solid #c2c2c2;
        border-top: 1px solid #c2c2c2;
        background-color: #fff;
        box-shadow: none;*/
    }

    .use-account-area b {
        font-weight: 500;
    }
    .use-account-area hr {
        margin: 25px 0;
        border: 0;
        border-top: 1px solid #d2d2d2;
    }
    .use-account-area a + a {
        margin-top: 10px;
    }
    .use-account-area .pwd,
    .use-account-area .phone {
        font-size: 16px;
    }
    .use-account-area .credit img {
        vertical-align: top;
        margin-right: 7px;
    }

    .profile-list-area.list-type01 li {
        margin-bottom: 0;
        padding-bottom: 25px;
    }
    .profile-list-area.list-type01 li:first-child {
        margin-bottom: 0;
    }
    .profile-list-area.list-type01 li + li {
        padding-top: 25px;
        border-top: 1px solid #d2d2d2;
    }

    .profileBox {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .profileBox .profile-icon {
        width: 100px;
        height: 100px;
        margin-right: 30px;
    }
    .profileBox .profile-info .nickName {
        font-size: 18px;
        font-weight: 500;
    }
    .profileBox .profile-info .age {
        font-size: 16px;
        color: #868686;
    }

/* 고객센터 */
    header + .customer-container {
        padding-top: 0;
        color: #181818;
    }
    .customer-container .visual {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        text-align: center;
        height: 235px;
        padding-bottom: 36px;
        background-image: url(../img/visual/customer.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
    .customer-container .visual h1 {
        font-size: 42px;
        font-weight: 700;
        color: #fff;
        line-height: 1em;
    }
    .customer-container .visual .SearchBox {
        margin-top: 20px;

    }
    .customer-container .visual .SearchBox input {
        height: 48px;
        width: 720px;
        font-size: 20px;
        font-weight: 300;

        border: 1px solid #7d7d7d;
        border-radius: 4px;
        padding-left: 84px;
        background-image: url(../img/icon/icon_fas_g.png);
        background-repeat: no-repeat;
        background-position: left 22px center;
    }

    .csutomer-help-document {
        padding: 48px;
        padding-bottom: 52px;
        background-color: #fafafa;
        border-bottom: 3px solid #eaeae6;
    }
    .csutomer-help-document > h5 {
        font-size: 24px;
        font-weight: 700;
    }
    .csutomer-help-document > h5 + p {
        font-size: 20px;
        font-weight: 300;
        margin-top: 10px;
    }
    .csutomer-help-document ul {
        margin-top: 38px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .csutomer-help-document ul li {
        margin-right: 50px;
    }
    .csutomer-help-document ul li a {
        display: inline-block;
        width: 280px;
        background-color: #fff;
        line-height: 46px;
        border-right: 1px solid #7d7d7d;
        border-bottom: 1px solid #7d7d7d;
        border-radius: 4px;

        font-size: 18px;
        font-weight: 500;

        padding-left: 48px;
        background-image: url(../img/icon/dment.png);
        background-repeat: no-repeat;
        background-position: left 17px center;
    }
    .csutomer-help-document ul li a:hover {
        text-decoration: none;
        background-color: #eee;
    }

    .customer-guide-area {
        padding: 64px 48px;
        background-color: #fff;
    }
    .customer-guide-area .inner {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-flow: wrap;
    }
    .customer-guide-area .inner + .inner {
        margin-top: 120px;
    }
    .customer-guide-area .inner > article {
        flex-grow: 1;
        padding-right: 20px;
        word-break: keep-all;
    }
    .customer-guide-area h5 {
        font-size: 24px;
        font-weight: 700;
    }
    .customer-guide-area ul li {
        font-size: 18px;
        margin-top: 25px;
    }

    .customer-guide-area .quick_link {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-flow: wrap;
        padding-bottom: 38px;
    }
    .customer-guide-area .quick_link li {
        margin-right: 40px;
        font-size: 18px;
    }
    .customer-guide-area .quick_link a:after {
        content: ">";
        display: inline-block;
        vertical-align: top;
        margin-left: 4px;
        font-weight: 700;
        color: #e10d0d;
    }

    .bbs-tool-area {
        background-color: #eaeae6;
        padding: 0 48px;
        border-top: 2px solid #d2d2d2;
    }
    .bbs-tool-area .inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 84px;
    }
    .bbs-tool-area .btn {
        display: inline-block;
        width: 144px;
        line-height: 38px;
        text-align: center;
        margin-left: 11px;

        font-size: 19px;
        font-weight: 500;

        border: 1px solid #181818 !important;
        border-radius: 4px;
        background-color: #fff;
        color: #181818 !important;
    }
    .bbs-tool-area .btn:hover {
        background-color: #eee;
    }

/* 고객센터 상세 */
    .customer-details-container {
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        background-color: #fff;
        color: #181818;
        min-height: calc(100vh - 150px);
    }
    .customer-details-container .bbs-tool-area {
        background-color: #fff;
    }

    .customer-details {
        padding: 0 48px;
    }
    .customer-details .head {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 90px;
        border-bottom: 1px solid #d3d3d3;
    }
    .customer-details .content {
        padding-top: 40px;
        padding-bottom: 70px;
        font-size: 18px;
        font-weight: 300;
    }
    .customer-details .content .title {
        font-size: 32px;
        font-weight: 500;
        line-height: 1em;
        margin-bottom: 45px;
    }
    .customer-details .content .title-sub {
        font-size: 20px;
        font-weight: 700;
        line-height: 1em;
        margin-bottom: 12px;
    }
    .customer-details .content .bold {
        font-weight: 500;
        margin-bottom: 27px;
    }
    .customer-details .ctbox {
        margin-top: 40px;
    }
    .customer-details .danger {
        color: #e80808;
        font-weight: 500;
    }
    .customer-details .term-text {
        white-space: pre-wrap;
        font-size: 12px;
        font-weight: 300;
    }

    .customer-details .drop-list li {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;

        padding: 12px;
        border: 1px solid #bfbfbf;
        border-radius: 2px;
        font-size: 16px;
        word-break: keep-all;
        cursor: pointer;
    }
    .customer-details .drop-list li + li {
        margin-top: 9px;
    }

    .customer-details .drop-list {
        max-width: 800px;
    }
    .customer-details .drop-list li:before {
        content: "";
        display: inline-block;
        background-image: url(../img/icon/arrow_drop.png);
        background-repeat: no-repeat;
        background-position: center;
        width: 9px;
        height: 1em;
        margin-right: 14px;
    }

    .customer-details .drop-list .bold {
        margin-bottom: 0;
        line-height: 1em;
    }
    .customer-details .drop-list .desc {
        margin-top: 15px;
        display: none;
    }


    .customer-details .drop-list li[aria-expanded="true"]:before {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
    }


/* 공지사항 */
    .his-tools {
        display: flex;
        height: 90px;
        justify-content: flex-start;
        align-items: center;
        padding: 0 30px;
        max-width: 1280px;
        margin: 0 auto;
    }
    .bbs-list-area .inner {
        max-width: 846px;
        margin: 0 auto;
        padding-bottom: 32px;
    }
    .bbs-list-area .his-tools {
        display: flex;
        height: 90px;
        justify-content: flex-start;
        align-items: center;
        padding: 0;
    }

    .bbs-list-area .content {
        font-size: 18px;
    }
    .bbs-list-area .content h1 {
        font-size: 34px;
        font-weight: 400;
        line-height: 1em;
        margin-bottom: 24px;
    }

    .bbs-list-area .table-tool-area {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 60px;
        background-color: #e5e5e5;
        padding: 12px 16px;
        font-size: 16px;
        margin-top: 24px;
        margin-bottom: 4px;
    }

    .bbs-list-area .table-area {
        border: 1px solid #dcdcdc;
        border-top: 1px solid #e60012;
    }

    .bbs-list-area table {
        background-color: #fff;
        color: #6c6c6c;
        font-size: 16px;
    }
    .bbs-list-area table th {
        height: 42px;
        font-weight: 300;
        border-bottom: 1px solid #000;
    }
    .bbs-list-area table td {
        padding-left: 16px;
        font-weight: 300;
        border-bottom: 1px solid #eeeeee;
        height: 26px;
        color: #9e9e9e;
    }

    .bbs-list-area table th:nth-child(1) {
        text-align: left;
        padding-left: 26px;
    }
    .bbs-list-area table th:nth-child(3),
    .bbs-list-area table td:nth-child(3) {
        text-align: center;
        padding-left: 0;
        padding-right: 0;
    }
    .bbs-list-area table th:nth-child(4),
    .bbs-list-area table td:nth-child(4) {
        padding-right: 10px;
    }

    .bbs-list-area .data-list {
        padding: 15px 10px;
        /*padding-bottom: 30px;*/
        background-color: #fff;
    }
    .bbs-list-area .data-list table {
        border : none;
    }

    .bbs-list-area .table-pagenate-area {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        background-color: #fff;
        padding: 12px 25px;
        font-size: 14px;

        border-top: 2px solid #d2d2d2;
        border-bottom: 1px solid #d2d2d2;
    }

    .bbs-list-area .table-pagenate-area .first {
        padding: 5px 6px;
        line-height: 1em;
        border-radius: 2px;
        border: 1px solid #ddd;
        color: #007eff;
        margin-right: 14px;
        font-weight: 400;
    }
    .bbs-list-area .table-pagenate-area ul {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-grow: 1;
    }
    .bbs-list-area .table-pagenate-area a {
        padding: 5px 6px;
        font-weight: 300;
        color: #9e9e9e;
    }
    .bbs-list-area .table-pagenate-area a.active {
        font-weight: 700;
    }

    .bbs-list-area .table-pagenate-area a.btn {
        background-color: #527bfb;
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        line-height: 1em;
        padding: 6px 20px;
        border-radius: 2px;
        box-shadow: inset 0px -3px 3px rgb(0 0 0 / 10%);
        -webkit-box-shadow: inset 0px -3px 3px rgb(0 0 0 / 10%);
    }
    .bbs-list-area .table-pagenate-area a.listback:hover {
        text-decoration: none;
    }


/* 게시글 상세 */
    .bbs-list-area .bbs-detail-area {
        border: 1px solid #dcdcdc;
        border-top: 1px solid #e60012;
        padding: 0 38px;
        background-color: #fff;
    }

    .detail-content .subject {
        font-size: 24px;
        font-weight: 500;
        line-height: 1em;
        padding: 15px 0;
        padding-top: 25px;
    }
    .detail-content .writer-area {
        border-bottom: 1px solid #eeeeee;
        margin-bottom: 20px;
    }
    .detail-content .writer-area .nick {
        font-size: 18px;
    }
    .detail-content .writer-area .tool {
        font-size: 14px;
        color: #626262;
    }
    .detail-content .content {
        position: relative;
        min-height: 300px;
        padding-bottom: 20px;
    }


/* 댓글 영역 */
    .review-area {
        padding-bottom: 34px;
    }
    .review-area .head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
        padding: 14px 0;
    }
    .review-area .head .pls {
        font-size: 14px;
    }
    .reply-area .writer-area {
        border-top: 1px solid #eee;
    }
    .reply-area .writer-area .text {
        font-size: 14px;
        margin-bottom: 5px;
    }
    .reply-area .writer-area.reply {
        padding-left: 55px;
    }

    .reivew-form-area {
        margin-top: 50px;
    }
    .reivew-form-area .textarea-wrap {
        position: relative;
        height: 100px;
    }
    .reivew-form-area .textarea-wrap .nick {
        position: absolute;
        top: 12px;
        left: 14px;
        font-weight: 500;
    }
    .reivew-form-area .textarea-wrap textarea {
        width: 100%;
        height: 100%;
        padding: 14px;
        padding-top: 40px;
        border: 3px solid #ececec;
        border-radius: 6px;
    }
    .reivew-form-area .textarea-wrap textarea:focus {
        border-color: #527bfb;
    }
    .reivew-form-area .textarea-wrap button {
        position: absolute;
        right: 0;
        bottom: 0;
        background-color: transparent;
        font-size: 14px;
        font-weight: 400;
        border: none;
        padding: 5px 7px;
        margin: 5px 7px;
    }
    .reivew-form-area .textarea-wrap button:focus {
        outline: 2px solid #000;
    }





/* 계정 찾기 && 변경 */
    .account-mange-area .inner {
        max-width: 846px;
        margin: 0 auto;
        padding: 48px 0;
    }
    .account-mange-area .title {
        font-size: 34px;
        font-weight: 400;
        margin-bottom: 30px;
    }
    .account-mange-area .title .line {
        border-bottom: 3px solid currentColor;
    }

    .account-mange-area input {
        width: 100%;
        height: 46px;
        padding: 8px 10px;
    }

    .account-mange-area input:disabled {
        background-color: #e5e5e5;
    }
    .account-mange-area .alert {
        font-size: 14px;
        margin-bottom: 40px;
    }

    .account-mange-area .btn-area {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-top: 35px;
    }
    .account-mange-area .btn {
        width: 90px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        background-color: #fff;
        border : none;
        border-radius: 4px;

        font-size: 16px;
        font-weight: 500;

        box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
        -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    }
    .account-mange-area .btn:focus {
        outline: 2px solid #000;
    }
    .account-mange-area .btn + .btn {
        margin-left: 11px;
    }

    .account-mange-area .btn-submit {
        background-color: #0f84fa;
        color: #fff;
    }

    .account-mange-area .btn-cancle {
        background-color: #ccc;
        color: #030708 !important;
    }

    .account-mange-area .btn-find {
        color: #0f84fa !important;
        border: 2px solid #0f84fa !important;
        background-color: transparent;

        box-shadow: inset 1px 1px 2px rgb(0 0 0 / 10%), 1px 1px 2px rgb(0 0 0 / 10%);
        -webkit-box-shadow: inset 1px 1px 2px rgb(0 0 0 / 10%), 1px 1px 2px rgb(0 0 0 / 10%);
    }
        
    

/* 이메일 변경 */
    .useinfo-change-area {
        width: 380px;
    }
    .useinfo-change-area input {
        font-size: 300;
    }
    .useinfo-change-area .field {}
    .useinfo-change-area .field input {}
    .useinfo-change-area .field + .field {
        margin-top: 24px;
    }
    .useinfo-change-area .field .label-inp {
        position: relative;
        flex-grow: 1;
    }
    .useinfo-change-area .field .label-inp label {
        position: absolute;
        left: 10px;
        top: 7px;
        font-size: 12px;
        font-weight: 400;
    }
    .useinfo-change-area .field .label-inp input {
        padding-top: 20px;
    }

    .useinfo-change-area .newEmail {
        padding-right: 50px;
        background-image: url(../img/icon/check.png);
        background-repeat: no-repeat;
        background-position: right 20px center;
    }
    .useinfo-change-area .btn-area {
        margin-top: 28px;
    }

    .useinfo-change-area .btn-area-type2 {
        flex-flow: column;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .useinfo-change-area .btn-area-type2 .btn {
        margin-left: 0;
        min-width: 190px;
    }
    .useinfo-change-area .btn-area-type2 .btn + .btn {
        margin-top: 12px;
    }


/* 아이디 & 비밀번호 찾기 */
    .account-mange-area .checkBox.radio {
        margin-right: 14px;
    }
    .account-mange-area .field {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .account-mange-area .field.

    .account-mange-area .field label {
        font-size: 16px;
        font-weight: 500;
        line-height: 18px;
        display: block;
    }
    .account-mange-area .field .alert {
        color: #676767;
        margin: 0;
        margin-top: 5px;
    }
    .account-mange-area .field + .field {
        margin-top: 20px;
    }

    .find-area {}
    .find-area .find-userInfo {
        width: 440px;
        margin-top: 20px;
        margin-bottom: 57px;
    }
    .find-area .item .find-userInfo {
        margin-left: 32px;
    }
    .find-area .find-userInfo .field {
        align-items: center;
    }
    .find-area .find-userInfo label {
        display: inline-block;
        min-width: 86px;
        padding-right: 18px;
        font-weight: 500;
    }
    .find-area .find-userInfo input {
        width: 250px;
        height: 32px;
        border-radius: 0;
        border-color: #7d7d7d;
    }
    .find-area .find-userInfo .btn-verify {
        display: inline-block;
        margin-left: 10px;
        width: 90px;
        line-height: 30px;
        font-size: 14px;
        font-weight: 500;
        text-align: center;

        background-color: #fff;
        border: 1px solid #7d7d7d;
        border-radius: 4px;
        letter-spacing: -0.5px;
    }
    .find-area .find-userInfo .btn-verify:hover {
        text-decoration: none;
        background-color: #eee;
    }

/* 아이디 리스트 */
    .find-id-list {
        padding-left: 36px;
        padding-bottom: 15px;
        font-size: 16px;
        font-weight: 500;
        line-height: 1em;
    }
    .find-id-list li + li {
        margin-top: 20px;
    }
    .find-id-list .field label {
        min-width: 200px;
    }

    .find-id-list + .btn-area .btn {
        width: 120px;
    }



/* 비밀번호 재설정 */
    .find-area > .userID {
        font-size: 16px;
        font-weight: 700;
    }
    .find-area > .userID span:last-child {
        color: #d12222;
        font-weight: 500;
    }
    .find-area .find-userInfo.pwd {
        margin-top: 40px;
        width: auto;
    }
    .find-area .find-userInfo.pwd label {
        width: 130px;
    }

    .find-area .find-userInfo.pwd .guide-pwd {
        font-size: 14px;
        font-weight: 300;
        margin-top: 40px;
        margin-bottom: 90px;
    }
    .find-area .find-userInfo.pwd .guide-pwd span {
        font-weight: 400;
    }
    .account-mange-area .pwd .field + .field {
        margin-top: 10px;
    }


/* 비밀번호 변경 */
    .find-pwd-area .field {
        flex-flow: column;
        height: 70px;
    }
    .find-pwd-area .field input {
        width: 380px;
        height: 46px;
        font-size: 16px;
    }
    .find-pwd-area .field a.alert {
        color: #0f84fa;
    }
    .find-pwd-area .session-out {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 14px;
    }
    .find-pwd-area .session-out input[type="checkbox"] {
        width: 18px;
        height: 18px;
        margin-right: 8px;
    }



/* 캐쉬 충전내역 */
    .cash-tool-area {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 30px;
    }

    .cash-tool-area .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #e60012 !important;
        border-radius: 0 !important;
        width: 140px;
        height: 43px;
        font-size: 19px;
        font-weight: 500;
        color: #555555 !important;
    }
    .cash-tool-area .btn.active {
        background-color: #e60012;
        color: #fff !important;

        box-shadow: inset -3px -3px 3px rgba(0,0,0,0.1);
        -webkit-box-shadow: inset -3px -3px 3px rgba(0,0,0,0.1); 
    }

    .bbs-list-area .cash-his-table {

    }
    .bbs-list-area .cash-his-table th {
        height: 60px;
        font-size: 20px;
    }
    .bbs-list-area .cash-his-table th:nth-child(4) {
        padding-right: 30px;
    } 
    .bbs-list-area .cash-his-table td {
        border: none;
        padding: 12px 10px; 
        font-size: 20px;
    }
    .bbs-list-area .cash-his-table td:nth-child(4) {
        padding: 0;
        text-align: center;
    }
    .bbs-list-area .cash-his-table + .data-list {
        min-height: 380px;
    }
    .bbs-list-area .table-pagenate-area.cash {
        border-top: none;
        justify-content: center;
        padding: 26px;
        font-size: 20px;
    }
    .bbs-list-area .table-pagenate-area.cash .first {
        font-size: 18px;
    }
    .bbs-list-area .table-pagenate-area.cash ul {
        flex-grow: inherit;
    }



/* 회사소개 */
    .sub-container-white {
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        background-color: #fff;
        color: #181818;
        min-height: calc(100vh - 150px);
    }

    .company-area .head {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 90px;
        padding: 0 46px;
    }
    .company-area .visual {
        /*height: 364px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        background-image: url(../img/visual/company.png*/);
    }
    .company-area .visual img {
        width: 100%;
    }
    .company-area + .bbs-tool-area {
        background-color: #fff;
    }

    .company-desc {
        padding: 52px 45px;
    }
    .company-desc h1 {
        font-size: 32px;
        margin-bottom: 65px;
    }
    .company-desc p {
        font-size: 18px;
        font-weight: 300;
        margin-top: 40px;
        line-height: 1.4em;
        word-break: keep-all;
    }
    .company-desc .writer {
        margin-top: 90px;
        text-align: right;
        font-size: 18px;
        font-weight: 300;
    }




/* 인증 센터 */
    .verify-center-area {}
    .verify-center-area .inner {
        padding: 70px 0;
        margin: 0 auto;
        width: 484px;
    }
    .verify-center-area .icon {
        text-align: center;
    }
    .verify-center-area .text {
        text-align: center;
    }
    .verify-center-area .text h1 {
        font-size: 34px;
        font-weight: 700;
        margin-bottom: 5px;
    }
    .verify-center-area .text .alert {
        font-size: 20px;
        font-weight: 300;
    }

    .verify-list-area  {
        margin: 40px 0;
        box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
        -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
        border-radius: 6px;
        overflow: hidden;
    }
    .verify-list-area a {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 20px 26px;
        background-color: #fff;
        background-image: url(../img/icon/link.png);
        background-repeat: no-repeat;
        background-position: right 25px center;
    }
    .verify-list-area a:hover,
    .verify-list-area a:focus {
        text-decoration: none;
        background-color: #eee;
        outline: none;
    }

    .verify-list-area a + a {
        border-top: 2px solid #cccccc;
    }
    .verify-list-area .icon-box {
        margin-right: 20px;
    }
    .verify-list-area .icon-box img {
        vertical-align: top;
    }
    .verify-list-area .text-box {
        font-size: 16px;
        font-weight: 300;
    }
    .verify-list-area .text-box h5 {
        font-size: 18px;
        font-weight: 500;
    }

    .verify-center-area .help-text {
        text-align: center;
        font-size: 14px;
        color: #878787;
    }
    .verify-center-area .help-text a {
        color: #0078ff;
    }

/* 코드 입력 */
    .code-check-area .inner {
        width: 630px;
    }

    .code-check-inp {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 40px 0;
    }
    .code-check-inp input {
        width: 50px;
        background-color: transparent;
        border: none;
        border-radius: 0;
        border-bottom: 3px solid #979797;
        text-align: center;
        font-size: 24px;
        font-weight: 500;
    }
    .code-check-inp input:focus {
        border-color: #0078ff;
        outline: none;
    }
    .code-check-inp input + input {
        margin-left: 20px;
    }
    .code-check-area form {
        text-align: center;
    }
    .code-check-area form button {
        width: 320px;
        height: 40px;
        background-color: #a5a5a5;
        color: #fff;

        font-size: 16px;
        font-weight: 500;
        border: none;
        border-radius: 2px;
        box-shadow: 1px 1px 2px rgb(0 0 0 / 10%);
        -webkit-box-shadow: 1px 1px 2px rgb(0 0 0 / 10%);
    }
    .code-check-area .help-tool {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 16px;
        margin-bottom: 34px;
    }
    .code-check-area .help-tool a {
        font-size: 14px;
        line-height: 1em;
        color: #0084ff;
    }
    .code-check-area .help-tool a + a {
        margin-left: 12px;
        padding-left: 12px;
        border-left: 2px solid #c1c1c1;
    }



/* 프로필 목록 */
    .profile-container {
        padding: 70px 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-flow: column;
        min-height: 100vh;
    }
    .profile-container .profile-area h1 {
        font-size: 48px;
        font-weight: 500;
        margin-bottom: 100px;
        text-align: center;
    }
    .profile-container .profile-area .profile-list {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        flex-wrap: wrap;
    }
    .profile-area .profile-list a {
        display: block;
        position: relative;
    }
    .profile-area .profile-list .profile-icon {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 150px;
        height: 150px;
        border-radius: 6px;
        margin-bottom: 14px;
    }
    .profile-area .profile-list .profile-icon.add img {
        width: 80px;
        height: 80px;
    }

    .profile-area .profile-list .profile-icon .mask {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.6);
        background-image: url(../img/icon/modify.png);
        background-repeat: no-repeat;
        background-position: center;
    }

    .profile-area .profile-list .profile-icon.add .mask {
        display: none;
    }



    .profile-area .profile-list .nick {
        font-size: 22px;
    }
    .profile-area .profile-list li + li {
        margin-left: 76px;
    }
    .profile-area .profile-list a {
        color: #a3a3a3;
    }
    .profile-area .profile-list a:hover {
        text-decoration: none;
        color: #fff;
    }
    .profile-area .profile-list a:focus .profile-icon,
    .profile-area .profile-list a:hover .profile-icon {
        box-shadow: 0px 0px 1px 3px #fff;
        outline: none;
    }
    .profile-area .profile-list a:focus .nick {
        outline: none;
    }

    .profile-area .profile-list + .btn-area {
        text-align: center;
        margin-top: 64px;
    }
    .profile-area .profile-list + .btn-area a {
        font-size: 16px;
        font-weight: 300;
        color: #a3a3a3;
        line-height: 1em;
        padding: 10px 26px;
        border-radius: 0;
        border: 1px solid currentColor;
    }
    .profile-area .profile-list + .btn-area a:hover {
        text-decoration: none;
        color: #fff;
    }

    .profile-area .profile-list + .btn-area .btn-submit {
        background-color: #fff;
        color: #030708;
        font-weight: 500;
    }
    .profile-area .profile-list + .btn-area .btn-submit:hover {
        color: #030708;
        background-color: #ddd;
    }

/* 프로필 상세 */
    .profile-container .profile-details-area {
        width: 640px;
        margin: 0 auto;
        padding: 40px 0;
    }
    .profile-container .profile-details-area h1 {
        line-height: 1em;
        margin-bottom: 20px;
    }   

    .profile-details-area .alert {
        font-size: 20px;
        color: #a9a9a9;
        margin-bottom: 20px;
    }

    .profile-form-area {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        border-top: 1px solid #494949;
        padding-top: 30px;
    }
    .profile-form-area .profile-icon {
        width: 150px;
        height: 150px;
        flex-shrink: 0;
        border-radius: 6px;
        margin-right: 40px;
    }
    .profile-form-area .detail {
        flex-grow: 1;
        font-size: 24px;
    }
    .profile-form-area .profileName {
        width: 100%;
        height: 42px;
        border-radius: 2px;
        padding-left: 15px;
        background-color: #828282;
        border: none;
        color: #eeeeee;
        margin-bottom: 20px;
    } 
    .profile-form-area .profileName::placeholder {
        color: #a9a9a9;
    }
    .profile-form-area .detail > article {
        padding-top: 20px;
        padding-bottom: 40px;
    }
    .profile-form-area .detail  > article + article {
        border-top: 1px solid #494949;
    }

    .profile-form-area .detail > article h5 {
        font-size: 24px;
        font-weight: 400;
    }
    .profile-form-area .select-wrap .selectBox .select {
        border-color: #bfbfbf;
    }
    .profile-form-area .select-wrap .selectBox .list {
        margin-top: 2px;
    }

    .profile-form-area .limitAge {
        margin-top: 25px;
        display: inline-block;
        font-size: 16px;
        font-weight: 400;
        line-height: 1em;
        padding: 13px 10px;
        border-radius: 4px;
        background-color: #313131;
    }
    .profile-form-area .limitAge + .alert {
        font-size: 16px;
        margin-top: 5px;
    }

    .profile-form-area .btn {
        padding: 8px 23px;
        font-size: 16px;
        line-height: 1em;
        border-radius: 4px;
        border: 1px solid #e6e6e6 !important;
    }
    .profile-form-area .btn:hover {
        color: #000;
        background-color: #e6e6e6;
    }

    .profile-form-area .checkBox {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 16px;
        margin-top: 9px;
    }
    .profile-form-area .checkBox input {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }
    .profile-form-area .checkBox input + label {
        display: block;
        width: 25px;
        height: 25px;
        margin-right: 16px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
        background-image: url(../img/icon/checkbox.png);
    }
    .profile-form-area .checkBox input:checked + label {
        background-image: url(../img/icon/checkboxed.png);  
    }
    .profile-form-area .checkBox input:focus + label {
        box-shadow: 0px 0px 0px 2px #fff;
    }

    .profile-form-area + .btn-area {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 38px 0;
        border-top: 1px solid #fff;
    }
    .profile-form-area + .btn-area .btn-submit {
        width: 100px;
        height: 40px;
        text-align: center;
        background-color: #ffffff;
        border-radius: 0;
        border-width: 1px;
    }
    .profile-form-area + .btn-area .btn-cancle {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100px;
        height: 40px;
        margin-left: 20px;

        border: 1px solid #fff;
    }
    .profile-form-area + .btn-area .btn-cancle:hover {
        text-decoration: none;
    }

    .profile-form-area + .btn-area .btn-submit:focus,
    .profile-form-area + .btn-area .btn-cancle:focus {
        outline: none;
        box-shadow: 0px 0px 0px 2px #fff;
        -webkit-box-shadow: 0px 0px 0px 2px #fff;
    }


/* 캐시 충전 */
    .cash-reload-area {}
    .cash-reload-area .head {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 0 45px;
        height: 90px;
    }

    .banner-area {
        min-height: 200px;
        background-color: #ddd;
        text-align: center;
    }
    .banner-area img {
        width: 100%;
    }

    .cash-reload-inner {
        max-width: 846px;
        margin: 0 auto;

        padding-top: 40px;
        padding-bottom: 50px;
    }

    .reload-wrap {}
    .reload-wrap + .reload-wrap {
        margin-top: 33px;
    }
    .reload-wrap .title {
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
        margin-bottom: 24px;
    }
    .reload-wrap .title h1 {
        font-size: 34px;
        font-weight: 400;
        margin-right: 40px;
        line-height: 1em;
    }
    .reload-wrap .title .alert {
        font-size: 18px;
        line-height: 1em;
    }
    .reload-wrap .content {
        border-top: 2px solid #e60012;
        background-color: #fff;
    }
    .reload-price-table {
        border: 1px solid #bfbfbf;
    }
    .reload-price-table dl {
        position: relative;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .reload-price-table dl dt,
    .reload-price-table dl dd {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        text-align: center;
        height: 40px;
        padding: 0 20px;
        font-size: 18px;
    }
    .reload-price-table dl dd {
        height: 60px;
    }
    .reload-price-table dl:first-child {
        border-bottom: 2px solid #afafaf;
    }
    .reload-price-table dl dt:nth-child(1),
    .reload-price-table dl dd:nth-child(2) {
        width: 80px;
        padding-right: 20px;
        flex-shrink: 0;
    }

    .reload-price-table dl dt:nth-child(2),
    .reload-price-table dl dd:nth-child(3) {
        width: 32%;
        padding-right: 20px;
        flex-shrink: 0;
    }
    .reload-price-table dl dt:nth-child(3),
    .reload-price-table dl dd:nth-child(4) {
        flex-grow: 1;
        padding-right: 200px;
    }
    .reload-price-table dl dd:last-child {
        color: #226aed;
    }
    .reload-price-table dl dd:nth-child(2) span {
        display: inline-block;
        width: 26px;
        height: 26px;
        border: 1px solid #acacac;
        border-radius: 13px;
        vertical-align: top;
    }
    .reload-price-table dl > input {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
        opacity: 0;
        z-index: 1;
    }
    .reload-price-table dl > input:checked + dd span {
        background-image: url(../img/icon/radio_checked2.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
    }

    .reload-price-table dl > input:hover + dd,
    .reload-price-table dl > input:hover + dd + dd,
    .reload-price-table dl > input:hover + dd + dd + dd,
    .reload-price-table dl > input:focus + dd,
    .reload-price-table dl > input:focus + dd + dd,
    .reload-price-table dl > input:focus + dd + dd  + dd,
    .reload-price-table dl > input:checked + dd,
    .reload-price-table dl > input:checked + dd + dd,
    .reload-price-table dl > input:checked + dd + dd  + dd {
        background-color: #fbfbfb;
    }
    .reload-price-result {
        text-align: center;
        padding: 15px;
        font-size: 16px;
        background-color: #f7f7f7;
        border: 1px solid #afafaf;
        border-bottom-width: 2px;
    }


    .cash-payment-area {
        background-color: #fff;
        border: 1px solid #dcdcdc;
        padding: 20px;
    }
    .payment-wrap {
        margin-bottom: 20px;
    }
    .payment-wrap > h5 {
        font-size: 18px;
        font-weight: 500;
        line-height: 1em;
        margin-bottom: 10px;
    }
    .payment-wrap ul {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .payment-wrap ul li + li {
        margin-left: 2px;
    }

    .payment-wrap ul li a img { 
        width: 100%;
        vertical-align: top;
    }
    .payment-wrap ul li a:hover {
        text-decoration: none;
        outline: 2px solid #000;
    }





/* 메인 슬라이더 */  
    .main-top-content {
        overflow: hidden;
    }
    .main-top-content .swiper {
        position: relative;
        height: 34.5vw;
        min-height: 440px;
        margin-top: 70px;
    }
    .main-top-content .swiper-slide > a {
        display: block;
    }
    .main-top-content .swiper-slide > a:focus {
        outline: 2px solid #fff;
    }
    .main-top-content .swiper-slide img {
        width: 100%;
        height: 100%;
    }

    .main-top-content.category__ .swiper {
        height: 47vw;
    }
    .main-top-content.category__  .swiper-slide img {
        height: auto;
    }

    .main-top-content .banner-wrap {
        /*width: 100%;*/
        width: 100%;
        height: 100%;
    }
    .main-top-content .banner-wrap:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        
        background-image: url(../img/banner/shade_black.png);
        background-repeat: no-repeat;
        background-position: bottom center;
        background-size: 100%;
    }

    .main-top-content .banner-wrap .golink {
        position: absolute;
        width: 100%;
        text-align: center;
        left: 0;
        bottom: 24%;
        z-index: 100;
        opacity: 0;
    }
    .main-top-content .banner-wrap .golink a {
        display: inline-block;
        vertical-align: top;
        font-size: 2vw;
        padding: 0.4vw 1.6vw;
    }

    .main-top-content .prev-content-wrap {
        position: relative;
        width: 100%;
        height: 100%;
    }
    .main-top-content .prev-content-wrap .prev-visual-area {
        position: absolute;
        left: 0;
        top: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        overflow: hidden;
    }
    .main-top-content .prev-content-wrap .prev-visual-area img {
        vertical-align: top;
    }
    .main-top-content .prev-content-wrap .prev-tool-area {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
        background: -webkit-gradient(linear,left bottom,left top,from(#181818),color-stop(50%,transparent));
        background: -webkit-linear-gradient(bottom,#181818,transparent 50%);
        background: -moz- oldlinear-gradient(bottom,#181818,transparent 50%);
        background: -o-linear-gradient(bottom,#181818,transparent 50%);
        background: linear-gradient(to top,#181818,transparent 50%);
        padding: 60px 50px;
    }
    .main-top-content .prev-content-wrap .prev-tool-area .info-area {}
    .main-top-content .prev-content-wrap .prev-tool-area .info-area .title {
        margin-bottom: 50px;
    }
    .main-top-content .prev-content-wrap .prev-tool-area .info-area .title img {
        width: auto;
    }
    .main-top-content .prev-content-wrap .prev-tool-area .info-area .text {
        max-width: 500px;
        font-size: 20px;
        word-break: keep-all;
        margin-bottom: 40px;
    }
    .main-top-content .prev-content-wrap .controls-area {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .main-top-content .prev-content-wrap .controls-area .btn-detail {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 160px;
        height: 46px;
        border-radius: 6px;
        font-size: 20px;
        font-weight: 500;
        letter-spacing: -0.25px;

        color: #fff;
        background-color: #27292b;
    }
    .main-top-content .prev-content-wrap .controls-area .btn-detail img {
        width: 24px;
        height: 24px;
        margin-right: 10px;
    }
    .main-top-content .prev-content-wrap .controls-area .btn-detail:hover {
        background-color: rgba(39,41,43,0.8);
        text-decoration: none;
    }
    .main-content-wrap .pagenate-area {
        margin-bottom: 80px;
    }
    .main-content-wrap .pagenate-area ul {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .main-content-wrap .pagenate-area ul li {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 30px;
        color: #eeeeee;
        font-size: 20px;
    }
    .main-content-wrap .pagenate-area ul li a {
        width: 100%;
        text-align: center;
        border-radius: 4px;
        border: 1px solid #535353;
    }


    .main-content-wrap .pagenate-area ul li a:hover,
    .main-content-wrap .pagenate-area ul li.on a {
        color: #000;
        background-color: #eeeeee;
    }
    .main-content-wrap .pagenate-area ul li + li {
        margin-left: 2px;
    }

    .visual__check {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 80px;
        padding: 30px;
        color: #4c4c4c;
        font-size: 17px;
    }
    .visual__check .slide-checkbox {
        width: auto;
    }
    .visual__check .slide-checkbox input + label:before {
        content: "안내 열기";
    }
    .visual__check .slide-checkbox input + label span {
        background-color: #4c4c4c;
        margin-left: 10px;
    }
    .visual__check .slide-checkbox input:checked + label span {
        background-color: #e5e5e5;
    }
    .visual__check .slide-checkbox input:checked + label:before {
        content: "안내 닫기";
    }

    .loading__ {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(0,0,0,0.4);
        z-index: 9999;
    }

    .loading__ .spinner {
      animation: rotator 2s linear infinite;
      -webkit-animation: rotator 2s linear infinite;
    }
    .loading__ .path {
      stroke-dasharray: 187;
      transform-origin: center;
      animation: dash 2s ease-in-out infinite, colors 10s ease-in-out infinite;
      -webkit-animation: dash 2s ease-in-out infinite, colors 10s ease-in-out infinite;
    }
    .loading__ > div {
        position: relative;
    }
    .loading__ > div .text {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        font-weight: 700;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        color: #fff;
        text-shadow: 0px 0px 5px #000;
        -webkit-text-shadow: 0px 0px 5px #000;
    }

    @keyframes rotator {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(270deg); }
    }
    @-webkit-keyframes rotator {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(270deg); }
    }


    @keyframes colors {
        0% { stroke: #e65f5f; }
        25% { stroke: #e6a85f; }
        50% { stroke: #7be65f; }
        75% { stroke: #5f78e6; }
        100% { stroke: #b85fe6; }
    }
    @-webkit-keyframes colors {
        0% { stroke: #e65f5f; }
        25% { stroke: #e6a85f; }
        50% { stroke: #7be65f; }
        75% { stroke: #5f78e6; }
        100% { stroke: #b85fe6; }
    }

    @keyframes dash {
        0% { 
            stroke-dashoffset: 187;
        }
        50% {
            stroke-dashoffset: 30;
           transform:rotate(150deg);
        }
        100% {
           stroke-dashoffset: 187;
           transform:rotate(450deg);
        }
    }
    @-webkit-keyframes dash {
        0% { 
            stroke-dashoffset: 187;
        }
        50% {
            stroke-dashoffset: 30;
           transform:rotate(150deg);
        }
        100% {
           stroke-dashoffset: 187;
           transform:rotate(450deg);
        }
    }





    .swiper-button-next,
    .swiper-button-prev {
        width: 25px;
        height: 70px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
    .swiper-button-prev {
        background-image: url(../img/icon/slide_left.png);
    }
    .swiper-button-next {
        background-image: url(../img/icon/slide_right.png);
    }
    .swiper-button-next:after,
    .swiper-button-prev:after {
        display: none;
    }

    .swiper-container-horizontal > .swiper-pagination-bullets, 
    .swiper-pagination-custom, .swiper-pagination-fraction {
        bottom: 2.5vw;
    }
    .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
        width: 45px;
        height: 6px;
        background-color: #fff;
        border-radius: 0;
        margin: 0 5px;
        opacity: 0.7;
    }

    .swiper-pagination-bullet-active {
        background-color: #e60012 !important;
        opacity: 1 !important;
    }


    /* content list */
    .main-content-wrap {
        /*padding: 30px;*/
    }
    .main-content-wrap .head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30px;
        padding-bottom: 10px;
    }
    .main-content-wrap .head h1 {
        font-size: 30px;
        font-weight: 700;
        line-height: 1em;
        padding-left: 20px;
    }
    .main-content-wrap .head .tool {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    .main-content-wrap .head .tool a:hover,
    .main-content-wrap .head .tool a:focus {
        text-decoration: none;
        box-shadow: 0px 0px 1px 2px rgba(255,255,255,0.8);
    }
    .main-content-wrap .head .ViewAll,
    .main-content-wrap .head .AllDelete {
        display: inline-block;
        font-size: 17px;
        padding: 6px 7px;
        color: #fff;
        border: 1px solid currentColor;
        border-radius: 6px;
        line-height: 1em;
    }

    .main-content-wrap .head .AllDelete {
        color: #e50914;
    }

    .main-content-wrap .category-content {
        padding: 30px;
        padding-bottom: 0;
        background-color: #181818
    }

    .main-content-wrap .pagenate-area {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 40px;
    }
    .main-content-wrap .pagenate-area .btn-more {
        width: 50px;
        height: 50px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
        background-image: url(../img/icon/btn_more.png);
    }


    .main-content-wrap .category-wrap { 
        padding-bottom: 25px;
        min-height: 18vw;
    }
    .main-content-wrap .category-content .notfound {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 24.5vw;
        min-height: 320px;
        font-size: 24px;
        font-weight: 300;
        letter-spacing: -0.25px;
        padding-bottom: 30px;
    }
    .main-content-wrap .category-content ul {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-flow: wrap;
    }
    .main-content-wrap .category-content ul li {
        position: relative;
        margin-bottom: 2%;
        flex: 0 1 15.5%;        
        max-width: 15.5%;   
    }
    .main-content-wrap .category-content ul li:hover a {
        text-decoration: none;
    }
    .main-content-wrap .category-content ul li + li {
        margin-left: 1.3%;
    }
    .main-content-wrap .category-content ul li + li:nth-child(6n+1) {
        margin-left: 0;
    }
    .main-content-wrap .category-content ul li > a {
        display: block;
    }
    .main-content-wrap .category-content ul li > a:focus {
        box-shadow: 0px 0px 2px 2px #fff;
    }
    .main-content-wrap .category-content ul li:hover .hovering + .hover-mask,
    .main-content-wrap .category-content ul li:focus .hovering + .hover-mask {
        display: block;
    }


    .category-content ul li .hover-mask {
        display: none;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;        
        padding-bottom: 41px;
        z-index: 10;
    }

    .artBox-inner {
        position: relative;
        padding-bottom: 141.69%;
        overflow: hidden;
        /*border-radius: 0.4vw;*/
    }
    .artBox-inner img {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-height: 100%;
    }
    .artBox-inner .limit {
        position: absolute;
        right: 0;
        top: 0;
        width: 30px;
        height: 30px;
        margin: 9px;
        z-index: 1;
    }
    .subject-inner {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 9px 10px;
        font-size: 16px;
        word-break: keep-all;
        background-color: #030708;
        letter-spacing: -0.5px;
        color: #eee;

        min-width: 0;
    }
    .subject-inner .limit {
        margin-right: 5px;
    }
    .subject-inner .limit img {
        vertical-align: top;
    }
    .subject-inner > div:last-child {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .subject-inner + .tool .btn_delete {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        height: 42px;
        border: 1px solid #fff;
        border-radius: 6px;
        background-color: #535353;
        margin-top: 1vw;
    }


    .hover-mask .wrap {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-flow: column;
        height: 100%;
        overflow: hidden;
        background-color: rgba(0,0,0,0.5);
    }
    .hover-mask .icon {
        width: 70px;
        height: 70px;
    }
    .hover-mask .icon img {
        width: 100%;
        vertical-align: top;
    }
    .hover-mask .text {
        color: #eeeeee;
        font-size: 18px;
    }
    .hover-mask .text a {
        display: block;
        margin-top: 16px;
        line-height: 1em;
        background-color: rgba(0,0,0,0.5);
        text-align: center;
        border: 1px solid rgba(255,255,255,0.4);
        border-radius: 6px;
        padding: 9px;
    }
    .hover-mask .text a:hover {
        text-decoration: none;
    }

    .hover-mask .hover__tool {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(0,0,0,0.5);
        padding-bottom: 50px;
        height: 100%;
    }
    .hover-mask .hover__tool a {
        position: relative;
        display: block;
        width: 50px;
        height: 50px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
    }
    .hover-mask .hover__tool a + a {
        margin-left: 24px;
    }
    .hover-mask .hover__tool a .tip {
        position: absolute;
        min-width: 124px;
        font-size: 17px;
        line-height: 1em;
        color: #141517;
        border-radius: 6px;
        padding: 9px 18px;
        letter-spacing: -0.25px;
        background-color: #fff;
        text-align: center;
        white-space: nowrap;
        display: none;
    }
    .hover-mask .hover__tool a .tip:after {
        content: "";
        position: absolute;
        border: 12px solid #fff;
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-bottom: 0;
    }
    .hover-mask .hover__tool a:hover .tip,
    .hover-mask .hover__tool a:focus .tip {
        display: block;
    }

    .hover-mask .hover__tool .btn-prev {
        background-image: url(../img/icon/btn_play.png);
    }
    .hover-mask .hover__tool .btn-plus {
        background-image: url(../img/icon/btn_plus.png);
    }

    .hover-mask .hover__tool .btn-prev .tip {
        bottom: 66px;
        left: -36px;
    }
    .hover-mask .hover__tool .btn-prev .tip:after {
        top: 100%;
        left: 50px;
    }

    .hover-mask .hover__tool .btn-plus .tip {
        top: 66px;
        right: -124px;
    }
    .hover-mask .hover__tool .btn-plus .tip:after {
        bottom: 100%;
        left: 44px;
        border-top: 0;
        border-bottom: 12px solid #fff;
    }



/* item hover Expanded */
    .cty-Expanded-layer {
        position: absolute;
        display: none;
        will-change: transform;
        transform-origin: center center;

        cursor: pointer;
        transition: all 0.3s;
        -webkit-transition: all 0.3s;
        box-shadow: 0px 0px 3px rgba(0,0,0,0.75);
        -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.75);
        border-radius: 0.6vw;
        z-index: 100;
    }
    .cty-Expanded-layer.download {
        cursor: default;
    }
    .cty-Expanded-layer img {
        width: 100%;
        vertical-align: top;
    }
    .cty-Expanded-layer .prev-area {
        border-radius: 0.6vw;
        overflow: hidden;
    }

    .cty-Expanded-layer .detail {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        background-color: #333333;
        padding: 15px 16px;
        border-radius: 0 0 0.6vw 0.6vw;
        transition: all 0.1s;
        -webkit-transition: all 0.1s;
        opacity: 0;
    }
    .cty-Expanded-layer .detail .tool {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .cty-Expanded-layer .detail .tool > div {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .cty-Expanded-layer .detail .tool a {
        position: relative;
        display: block;
        width: 50px;
        height: 50px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
    }
    .cty-Expanded-layer .detail .tool a + a {
        margin-left: 10px;
    }
    .cty-Expanded-layer .detail .tool a .tip {
        position: absolute;
        bottom: 66px;
        min-width: 150px;
        font-size: 17px;
        line-height: 1em;
        color: #141517;
        border-radius: 6px;
        padding: 9px 18px;
        letter-spacing: -0.25px;
        background-color: #fff;
        text-align: center;
        white-space: nowrap;
        display: none;
    }
    .cty-Expanded-layer .detail .tool a .tip:after {
        content: "";
        position: absolute;
        top: 100%;
        border: 12px solid #fff;
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-bottom: 0;
    }
    .cty-Expanded-layer .detail .tool a:hover .tip,
    .cty-Expanded-layer .detail .tool a:focus .tip {
        display: block;
    }

    .cty-Expanded-layer .btn-play {
        background-image: url(../img/icon/btn_play.png);
    }
    .cty-Expanded-layer .btn-plus {
        background-image: url(../img/icon/btn_plus.png);
    }
    .cty-Expanded-layer .btn-more {
        background-image: url(../img/icon/btn_more.png);
    }
    .cty-Expanded-layer .btn-minus {
        background-image: url(../img/icon/btn_min.png);   
    }


    .cty-Expanded-layer .btn-plus .tip {
        right: -44px;
    }
    .cty-Expanded-layer .btn-plus .tip:after {
        right: 58px;
    }

    .cty-Expanded-layer .btn-minus .tip {
        right: -24px;
    }
    .cty-Expanded-layer .btn-minus .tip:after {
        right: 38px;
    }

    .cty-Expanded-layer .btn-more .tip {
        left: -100%;
    }
    .cty-Expanded-layer .btn-more .tip:after {
        right: 50%;
        margin-right: -12px;
    }

    .cty-Expanded-layer .detail .content > div {
        margin-top: 10px;
        font-size: 17px;
        color: #e6e6e6;
    }

    .cty-Expanded-layer .play-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .cty-Expanded-layer .play-info .btn-prev {
        line-height: 1em;
        letter-spacing: 4px;
        color: #f39800;
        padding: 5px;
        width: 110px;
        text-align: center;
        border: 1px solid currentColor;
        border-radius: 4px;
        padding-right: 0;
    }

    .cty-Expanded-layer .download-info {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        font-size: 18px;
        font-weight: 400;
        letter-spacing: -0.25px;
    }
    .cty-Expanded-layer .download-info > div {
        color: #e60012;
    }

    .cty-Expanded-layer .summary-info {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .cty-Expanded-layer .summary-info img {
        width: 30px;
        margin-right: 8px;
        flex-shrink: 0;
    }
    .cty-Expanded-layer .summary-info .text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        letter-spacing: -0.25px;
    }


/* 상세 모달 */
    .content-detail-layer {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 9001;
        display: none;
    }
    .content-detail-layer .dim {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
        z-index: 0;
    }

    .content-detail-layer .content-wrap {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        overflow-y: scroll;
        height: 100%;
        padding: 10vw 0;
        z-index: 10;
    }


    .content-detail-layer .content-modal {
        position: relative;
        width: 850px;
        background-color: #141517;
        padding-bottom: 45px;
        border-radius: 15px;
        color: #fff;
        z-index: 10;
    }
  

/* 미리보기 */
    .content-detail-layer .preview-wrap {
        position: relative;
        padding-bottom: 473px;
        border-radius: 15px;
        overflow: hidden;
    }
    .preview-wrap .visual-area {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .preview-wrap .visual-area .viewer {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        max-width: 100%;
        max-height: 100%;
    }

    .preview-wrap .prev-tool-area {
        position: absolute;
        left: 0;
        top: 0;

        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        flex-flow: column;

        width: 100%;
        height: 100%;
        background: -webkit-gradient(linear,left bottom,left top,from(#181818),color-stop(50%,transparent));
        background: -webkit-linear-gradient(bottom,#181818,transparent 50%);
        background: -moz- oldlinear-gradient(bottom,#181818,transparent 50%);
        background: -o-linear-gradient(bottom,#181818,transparent 50%);
        background: linear-gradient(to top,#181818,transparent 50%);
        padding: 40px 50px;
    }
    .prev-tool-area .player-area {
        width: 100%;
        margin-bottom: 50px;
    }
    .prev-tool-area .player-area .title {
        max-width: 325px;
        margin-bottom: 45px;
    }
    .prev-tool-area .player-area .title img {
        width: 100%;
        vertical-align: top;
    }
    .prev-tool-area .controls-area {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .prev-tool-area .controls-area > div {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .prev-tool-area .controls-area img {
        vertical-align: top;
    }
    .prev-tool-area .controls-area a + a {
        margin-left: 16px;
    }
    .prev-tool-area .controls-area .btn-prev {
        width: 120px;
        height: 46px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
        background-image: url(../img/icon/btn_prev_text.png);
    }
    .prev-tool-area .controls-area .btn-plus,
    .prev-tool-area .controls-area .btn-sound,
    .prev-tool-area .controls-area .btn-minus {
        display: block;
        width: 46px;
        height: 46px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
    }
    .prev-tool-area .controls-area .btn-plus {
        background-image: url(../img/icon/btn_plus.png);
    }
    .prev-tool-area .controls-area .btn-minus {
        background-image: url(../img/icon/btn_min.png);   
    }
    .prev-tool-area .controls-area .btn-sound {
        background-image: url(../img/icon/sound_off.png);
    }
    .prev-tool-area .controls-area .btn-sound.play {
        background-image: url(../img/icon/sound_on.png);
    }
    .content-modal-close {
        position: absolute;
        right: 0;
        top: 0;
        margin: 25px;
        z-index: 10;
    }
    .content-modal-close img {
        vertical-align: top;
        width: 23px;
    }

/* 상세 요약 */
    .modal-detail-wrap {
        padding: 15px 50px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        color: #fff;
    }
    .modal-detail-wrap.pd50 {
        padding: 50px;
        padding-bottom: 35px;
    }
    .modal-detail-wrap .desc {
        flex-shrink: 0;
        width: 470px;
        margin-right: 40px;
        font-size: 19px;
        line-height: 1.4em;
    }
   /*  .modal-detail-wrap .BaseData {
        position: relative;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        min-height: 50px;
        margin-bottom: 14px;
    } */
    
     .modal-detail-wrap .BaseData {
        position: relative;
        display: block;
        justify-content: flex-start;
        align-items: center;
        min-height: 50px;
        margin-bottom: 14px;
    } 
    .modal-detail-wrap .BaseData .subject {
        margin-bottom: 14px;
    }
    .modal-detail-wrap .BaseData .sub-tit {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        
    }
    .modal-detail-wrap .BaseData .subject .title {
        font-size: 36px;
        font-weight: 500;
        margin-right: 20px;
        line-height: 1.2em;
    }
    .modal-detail-wrap .BaseData .title {
        font-size: 36px;
        font-weight: 500;
        margin-right: 20px;
        line-height: 1.2em;
    }
    .modal-detail-wrap .BaseData > span {
        font-size: 18px;
        font-weight: 400;
    }
    .modal-detail-wrap .BaseData img {
        vertical-align: top;
    }
    .modal-detail-wrap .BaseData span + span {
        margin-left: 10px;
    }
    .modal-detail-wrap .BaseData .btn-plus {
        width: 50px;
        height: 50px;
        position: absolute;
        right: 0;
        top: 0;


        background-image: url(../img/icon/btn_plus.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
     .modal-detail-wrap .BaseData .btn-minus {
        width: 50px;
        height: 50px;
        position: absolute;
        right: 0;
        top: 0;


        background-image: url(../img/icon/btn_min.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
    
    .modal-detail-wrap .text {
        font-size: 19px;
        word-break: keep-all;
    }
    .modal-detail-wrap .info {
        font-size: 16px;
        font-weight: 300;
        letter-spacing: -1px;
        line-height: 1.2em;
    }
    .modal-detail-wrap .info span {
        color: #878787;
    }
    .modal-detail-wrap .info li + li {
        margin-top: 20px;
    }
    .modal-detail-wrap .info .more {
        font-style: italic;
    }

/* 시리즈 목록 */
    .modal-series-wrap {
        padding: 45px 50px;
        padding-bottom: 0;
    }
    .modal-series-wrap .title {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        letter-spacing: -0.25px;
    }
    .modal-series-wrap .title h5 {
        font-size: 26px;
        font-weight: 700;
    }
    .modal-series-wrap .title span {
        font-size: 20px;
    }

    .series-list li {
        padding: 25px 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .series-list li + li {
        border-top: 1px solid #404040;
    }
    .series-list img {
        vertical-align: top;
    }

    .series-list .play-area {
        width: 80px;
        flex-shrink: 0;
        text-align: center;
    }
    .series-list .play-area .btn-play {
        display: block;
        width: 80px;
        height: 36px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-image: url(../img/icon/btn_play_text2.png);
    }
    .series-list .play-area .price {
        font-size: 16px;
        font-weight: 500;
        color: #d17c22;
        margin-bottom: 20px;
    }

    .series-list .series-info-area {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-grow: 1;
        padding-right: 40px;
    }
    .series-list .series-info-area .num {
        text-align: right;
        flex-shrink: 0;
        width: 60px;
        font-size: 22px;
        padding-right: 10px;
        margin-right: 16px;
    }
    .series-list .series-info-area .imgBox {
        width: 150px;
        height: 85px;
        flex-shrink: 0;
        margin-right: 26px;
    }
    .series-list .series-info-area .imgBox img {
        max-width: 100%;
        max-height: 100%;
    }

    .series-list .series-info-area .textBox {
        flex-grow: 1;
        font-size: 14px;
    }
    .series-list .series-info-area .textBox .title {
        font-size: 18px;
        font-weight: 500;
        line-height: 1em;
        margin-bottom: 18px;
    }

/* 하단 상세 */
    .modal-footer-wrap {
        padding: 0px 50px;
        padding-bottom: 45px;
        margin-top: -47px;
    }
    .modal-footer-wrap .content {
        padding-top: 60px;
        border-top: 3px solid #404040;
        letter-spacing: -0.25px;
    }
    .modal-footer-wrap .content .title {
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
        margin-bottom: 22px;
    }
    .modal-footer-wrap .content .title h1 {
        font-size: 26px;
        font-weight: 700;
        line-height: 1em;
        padding-right: 10px;
    }
    .modal-footer-wrap .content .title span {
        font-size: 22px;
        line-height: 1em;
    }
    .modal-footer-wrap .content .info {
        font-size: 16px;
        font-weight: 300;
    }
    .modal-footer-wrap .content .info span {
        color: #878787;
        padding-right: 3px;
    }
    .modal-footer-wrap .content .info li {
        margin-bottom: 3px;
    }
    .modal-footer-wrap .content .production {
        font-size: 14px;
    }

/* modal */
    .confirm-modal-dialog {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 9002;
        display: none;
    }
    .confirm-modal-dialog .dim {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
    }
    .confirm-modal-dialog .confirm-modal-wrap {
        display: flex;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
    }
    .confirm-modal-dialog .confirm-modal-wrap .modal {
        position: relative;
        min-width: 360px;
        background-color: #141517;
        border-radius: 6px;
        overflow: hidden;
        box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
        -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
        z-index: 1;
    }
    .confirm-modal-dialog .confirm-modal-wrap .modal-close {
        position: absolute;
        right: 0;
        top: 0;
        width: 24px;
        margin: 17px;
        cursor: pointer;
        z-index: 10;
    }
    .confirm-modal-dialog .confirm-modal-wrap .modal-close img {
        width: 100%;
        vertical-align: top;
    }
    
    .confirm-modal-wrap .modal {
        display: none;
        padding: 20px;
    }
    .confirm-modal-wrap .modal .text {
        color: #878787;
        font-size: 18px;
        font-weight: 300;
        letter-spacing: -0.25px;
        padding: 40px 0;
    }
    .confirm-modal-wrap .modal .payment-alert-wrap {
        text-align: center;
        font-size: 20px;
    }
    .confirm-modal-wrap .modal .payment-alert-wrap .price {
        color: #e50914;
        margin-bottom: 10px;
    }
    .confirm-modal-wrap .modal .payment-alert-wrap .date {
        font-size: 18px;
        font-weight: 300;
        color: #e50914;
        letter-spacing: -0.25px;
    }
    .confirm-modal-wrap .modal .payment-alert-wrap .alert {
        color: #fff;
        font-size: 18px;
        font-weight: 500;
    }
    .confirm-modal-wrap .modal .btn-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
    }
    .confirm-modal-wrap .modal .btn-wrap .button {
        flex: 1 1 40%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        height: 43px;
        font-size: 20px;
        font-weight: 700;
        border-radius: 6px;
    }
    .confirm-modal-wrap .modal .btn-wrap .button:hover {
        text-decoration: none;
    }
    .confirm-modal-wrap .modal .btn-wrap .button + .button {
        margin-left: 34px;
    }

    .confirm-modal-wrap .modal .btn-wrap .submit {
        background-color: #fff;
        color: #141517;
    }
    .confirm-modal-wrap .modal .btn-wrap .cancle {
        background-color: #878787;
        color: #eeeeee;
    }


/* 삭제 */
    #modal-delete,
    #paymentModal {
        background-color: #eeeeee;
        max-width: 410px;
        border-radius: 18px;
    }
    #modal-delete .logo,
    #paymentModal .logo {
        text-align: left;
    }
    #modal-delete .logo img,
    #paymentModal .logo img {
        height: 30px;
    }
    #modal-delete .content > h1 {
        font-size: 25px;
        font-weight: 400;
        letter-spacing: -0.25px;
        color: #181818;
        margin: 25px 0;
        text-align: center;
    }
    #modal-delete .alert {
        color: #e60012;
        font-size: 21px;
        text-align: center;
        word-break: keep-all;
        margin-bottom: 30px;
    }
    #modal-delete .alert h5 {
        font-weight: 500;
        font-size: 22px;
    }

    #modal-delete .btn-wrap .submit,
    #paymentModal .btn-wrap .submit {
        border: 1px solid #313131;
        background-color: #eee;
    }
    #modal-delete .btn-wrap .cancle,
    #paymentModal .btn-wrap .cancle {
        background-color: #434343;
    }
    #modal-delete .modal-close,
    #paymentModal .modal-close {
        width: 36px;
    }

    #paymentModal .info {
        font-size: 25px;
        margin: 25px 0;
        color: #181818;
    }
    #paymentModal .info > div {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 5px;
    }
    #paymentModal .info p {

    }
    #paymentModal .alert {
        color: #e60012;
        letter-spacing: -0.25px;
        text-align: center;
        font-size: 23px;
        font-weight: 500;
        margin-bottom: 45px;
    }


/* 로그인 & 회원가입 & 휴대폰인증 */
    .modal .form-area {
        padding-top: 34px;
    }
    .modal .form-area .title {
        margin-bottom: 16px;
    }
    .modal .form-area .title h1 {
        font-size: 24px;
        font-weight: 700;
        line-height: 1em;
        color: #eeeeee;
    }
    .modal .form-area .title .alert {
        color: #707070;
        font-size: 14px;
        font-weight: 300;
        margin-top: 5px;
    }
    .modal .form-area .field {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .modal .form-area .field + .field {
        margin-top: 13px;
    }

    .modal .form-area .field input {
        flex-grow: 1;
        height: 38px;
        font-size: 16px;
        border-radius: 4px;
        background-color: #eeeeee;
    }
    .modal .form-area .btn-area {
        margin-top: 20px;
    }
    .modal .form-area .submit {
        width: 100%;
        height: 38px;
        color: #fff;
        font-size: 18px;
        font-weight: 400;
        text-align: center;
        background-color: #ddd;
        border: none;
        border-radius: 4px;
    }
    .modal .form-area .submit:focus {
        box-shadow: 0px 0px 2px 2px #eee;
    }

    .modal .sign-tool-area {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        font-weight: 300;
        margin-top: 12px;
    }
    .modal .sign-tool-area .auto-login {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: #707070;
        cursor: pointer;
    }
    .modal input[type="checkbox"] {
        width: 15px;
        height: 15px;
        margin-right: 5px;
        vertical-align: top;
    }
    .modal .sign-tool-area .auto-login label {
        cursor: pointer;
    }

    .modal .sign-tool-area .find-account {
        color: #0066ff;
    }
    .modal .api-auth-loing {
        padding-top: 40px;
        text-align: center;
    }
    .modal .api-auth-loing .alert {
        color: #707070;
        font-size: 14px;
        font-weight: 300;
        text-align: left;
        margin-bottom: 15px;
    }
    .modal .api-auth-loing .alert a {
        color: #eee;
        font-size: 16px;
        font-weight: 500;
        padding-left: 5px;
    }
    .modal .api-auth-loing a {
        display: inline-block;
    }
    .modal .api-auth-loing img {
        vertical-align: top;
    }
    .modal .api-auth-loing li + li {
        margin-top: 16px;
    }

    /* 로그인 */
        #signin .form-area .submit {
            background-color: #e50914;
        }



    /* 회원가입 */
        #signup .form-area .field  {
            flex-wrap: wrap;
            max-width: 314px;
            margin: 0 auto;
            min-height: 74px;
            align-items: flex-start;
        }
        #signup .form-area .field input {
            letter-spacing: -0.25px;
            padding-right: 40px;
            padding-left : 10px;
        }
        #signup .form-area .field:nth-child(2) input::placeholder {
            font-size: 14px;
        }
        #signup .form-area .field input,
        #signup .form-area .btn-verify  {
            color: #fff;
            height: 46px;
            background-position: right 14px center;
            background-repeat: no-repeat;
            background-image: url(../img/icon/check.png);
        }
        #signup .form-area .field .email-field > input {
            background-image: none;
        }
        #signup .form-area .field input {
            color: #171717;
        }
        #signup .form-area .field input.checked,
        #signup .form-area .btn-verify.checked {
            background-image: url(../img/icon/checked.png);
        }
        #signup .form-area .btn-area {
            margin-top: 10px;
        }
        #signup .form-area .btn-verify {
            display: flex;
            width: 100%;
            justify-content: center;
            align-items: center;
            text-align: center;
            font-size: 18px;
            font-weight: 500;
            border-radius: 4px;
            background-color: #00a1eb;
        }
        #signup .form-area .btn-verify:hover {
            text-decoration: none;
        }
        #signup .form-area .submit {
            background-color: #e50914;
            height: 46px;
        }

        #signup .signup-term-area {
            padding-bottom: 34px;
            font-size: 14px;
            font-weight: 300;
            color: #878787;
        }
        #signup .signup-term-area .alert {
            text-align: center;
        }

        #signup .signup-term-area .lt {
            color: #eee;
        }
        #signup .signup-term-area ul {
            margin-top: 20px;
        }
        #signup .signup-term-area ul li {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #signup .signup-term-area ul li + li {
            margin-top: 5px;
        }
        #signup .signup-term-area a {
            color: #0054ff;
        }
        #signup .form-area .field > input,
        #signup .form-area .field .alt {
            flex: 0 1 100%;
        }
        #signup .form-area .field .alt {
            color: #ff0000;
            font-size: 13px;
            font-weight: 300;
            margin: 7px 0;
        }

        #signup .signup-term-area > div {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            margin-bottom: 6px;
            color: #878787;
            font-weight: 300;
            letter-spacing: -0.1px;
        }

        #signup .signup-term-area > div:before {
            content: "※";
            margin-right: 5px;
        }

        .email-field {
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
        .email-field > input {
            width: 170px;
        }
        .email-field  .selectBox__ {
            margin: 0;
            padding: 0;
            border: none;
            padding-left: 10px;
        }
        .email-field .selectBox__ .box__ .select__ {
            position: relative;
            border: none;
        }
        .email-field .selectBox__ .box__ .select__ input {
            vertical-align: top;
            width: 100%;
        }
        .email-field .selectBox__ .box__ .select__  button {
            position: absolute;
            right: 0;
            top: 0;
            background-image: url(../img/icon/arrow_drop_g.png);
            background-repeat: no-repeat;
            background-position: center;
            background-size: 16px;
            width: 44px;
            height: 44px;
            margin: 1px;
            border: none;
            box-shadow: none;
            border-radius: 6px;
        }

        .email-field .selectBox__ .text {
            display: block;
            padding: 0;
            font-size: 16px;
            font-weight: 300;
            color: #eee;
            padding: 9px 7px;
            border-bottom: 1px solid #4d4d4d;
        }
        .email-field .selectBox__ .box__ .list__ {
            background-color: #313131;
            border-top: 0;
            padding: 5px;
            margin-top: -0.3rem;
        }
        .email-field .selectBox__.on .box__ .select__ {
            margin: 0;
        }
        .email-field .selectBox__.on .box__ .select__ input,
        .email-field .selectBox__.on .box__ .select__ button {
            border-width: 1px;
            border-color : #eee;
            background-color: #313131;
            border-bottom-color: #313131;
            color: #eee;
        }

        #signup .form-area .email-field .selectBox__.on .select__ input {
            color: #eee;
        }

        .selectBox__  {
            margin-top: 3.5rem;
            padding-top: 3rem;
            border-top: 1px solid #070707;
            margin-bottom: 3rem;
        }
        .selectBox__  .box__ {
            position: relative;
        }
        .selectBox__ .box__ .select__ {
            border: 1px solid #eeeeee;
            border-radius: 6px
        }
        .selectBox__ .box__ .list__ {
            display: none;
            position: absolute;
            left: 0;
            top: 100%;
            width: 100%;
            background-color: #181818;
            border-radius: 0 0 6px 6px;
            border: 1px solid #eeeeee;
        }
        .selectBox__ .option__ {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 600;
        }
        .selectBox__ .option__ div:last-child {
            color: #d17c22;
        }
        .selectBox__ .selected {
            display: none;
        }
        .selectBox__ .select__ .option__ {
            background-image: url(../img/icon/arrow_down_w.png);
            background-repeat: no-repeat;
        }

        .selectBox__.on .box__ .select__ {
            border-bottom: none;
        }
        .selectBox__.on .box__ .list__ {
            display: block;
            border-top: none;
        }


        .confirm-modal-dialog .confirm-modal-wrap #disabled  {
            min-width: auto;
        }
        #disabled .form-area .title h1 {
            letter-spacing: 5px;
        }
        #disabled .form-area .alert  {
            margin-bottom: 25px;
        }
        #disabled .form-area .alert h5 {
            font-size: 18px;
            font-weight: 500;
            letter-spacing: -0.25px;
            color: #eee;
        }
        #disabled .form-area .alert p {
            font-size: 14px;
            color: #b4b4b4;
            letter-spacing: -0.25px;
        }

        #disabled .form-area .disabled__ {
            margin-bottom: 30px;
        }
        #disabled .form-area .disabled__ > p {
            font-size: 14px;
            color: #b4b4b4;
            letter-spacing: -0.25px;
            margin-bottom: 20px;
        }
        #disabled .form-area .disabled__ > p em {
            font-size: 16px;
            font-weight: 500;
            color: #d17c22;
        }
        #disabled .form-area .disabled__ .wrap {
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
        #disabled .form-area .disabled__ .wrap + .wrap {
            margin-top: 7px;
        }
        #disabled .form-area .disabled__ .tit {
            font-size: 16px;
        }
        #disabled .form-area .disabled__ .tit:before {
            content: "·";
            padding-left: 10px;
            padding-right: 3px;
        }
        #disabled .form-area .disabled__ .selectBox {
            position: relative;
            padding: 0;
            margin: 0;
            margin-left: 10px;
            border: none;
            height: 26px;
        }
        #disabled .form-area .disabled__ .selectBox .list .text {
            font-size: 13px;
            padding: 3px 10px;
            width: 100%;
            display: block;
        }
        #disabled .form-area .disabled__ .selectBox .list {
            position: relative;
            left: 0;
            top: 0%;
            width: 100%;
            display: none;
            margin-top: -1px;
            background-color: #141517;
            z-index: 10;
        }

        #disabled .form-area .disabled__ .selectBox .select[aria-expanded="true"] + .list {
            display: block;
        }
        #disabled .form-area .disabled__ .select {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            border: 1px solid #d2d2d2;
            width: 145px;
            height: 26px;
            border-radius: 4px;
            padding: 0;
            padding: 0 10px;
            color: #eee;

            background-image: url(../img/icon/arrow_drop_g.png);
            background-repeat: no-repeat;
            background-position: right 9px center;
            background-size: 9px;
        }
        #disabled .form-area .disabled .selectBox .text {
            padding: 0;
            padding-left: 10px;
            font-size: 14px;
            color: #eee;
        }

        #disabled .form-area .submit {
            background-color: #00a1eb;
            height: 46px;
        }

        #disabled .verify_area .alert {
            margin-bottom: 25px;
            font-size: 14px;
            color: #b4b4b4;
            letter-spacing: -0.25px;
        }
        #disabled .verify_area .wrap {
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
        }
        #disabled .verify_area .wrap > div + div {
            margin-left: 30px
        }

        #disabled .verify_area .btn_wrap {
            position: relative;
        }
        #disabled .verify_area input {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            opacity: 0;
        }
        #disabled .verify_area .btn__ {
            margin-top: 11px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 125px;
            height: 30px;
            border-radius: 4px;
            background-color: #00a1eb;
            color: #fff;
            font-size: 13px;
            font-weight: 400;
            box-shadow: inset 0rem 2px 2px #77cdf4,
                        inset 0rem -2px 2px #47606b;
            -webkit-box-shadow: inset 0rem 2px 2px #77cdf4,
            inset 0rem -2px 2px #47606b;
        }
        #disabled .verify_area > div {
            font-size: 14px;
            font-weight: 500;
            color: #b4b4b4;
            letter-spacing: -0.25px;
        }
        #disabled .verify_area .icon_card,
        #disabled .verify_area .icon_cam {
            display: inline-block;
            background-repeat: no-repeat;
            background-position: center;
            vertical-align: middle;
            background-size: contain;
            margin-right: 3px;
        }
        #disabled .verify_area .icon_card {
            width: 26px;
            height: 19px;
            background-image: url(../img/icon/card_w.png);
        }
        #disabled .verify_area .icon_cam {
            width: 24px;
            height: 19px;
            background-image: url(../img/icon/cam_w.png);
        }

        #disabled .term {
            margin: 30px 0;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-size: 11px;
            font-weight: 300;
            color: #404040;
            letter-spacing: -0.25px;
        }
        #disabled .term a {
            text-decoration: none !important;
            color: #d20000;
            padding: 5px 0;
            border-bottom: 1px solid currentColor;
        }
        #disabled .selectBox.on {
            z-index: 100;
        }
        #disabled .selectBox .selected {
            display: none;
        }
        #disabled .selectBox.on .select {
            border: none;
            background-image: none;
        }
        #disabled .selectBox.on .box {
            border: 1px solid #eee;
            border-radius: 4px;
        }
        #disabled  #select4.on .select {
            width: 125px;
        }
        #disabled #select4.on .box {
            height: 214px;
            overflow-y: scroll;
            background-color: #141517;
            border: 1px solid #eee;
            border-radius: 4px;
            z-index: 10px;
        }


/* 문의하기 */
        .qa-container {}
        .qa-container > article {
            /*padding: 3.6rem;*/
        }
        .qa-container a:hover {
            text-decoration: none;
        }
        .qa-container h1 {
            font-size: 24px;
            margin-top: 20px;
            margin-bottom: 20px;
        }
        .qa-container .tel {
            display: block;
            text-align: center;
            color: #fff;
            background-color: #e50914;
            font-size: 36px;
            font-weight: 700;
            line-height: 1em;
            padding: 13px;
            border-radius: 6px;
        }
        .qa-container .alert {
            margin-top: 20px;
            font-size: 18px;
            color: #c5c5c5;
            min-height: 150px;
        }
        .qa-container .btn-tel,
        .qa-container .btn-add {
            display: block;
            text-align: center;
            font-size: 20px;
            font-weight: 500;
            margin-top: 13px;
            padding: 10px;
            border-radius: 6px;
            letter-spacing: -0.5px;
        }

        .qa-container .btn-tel {
            background-color: #737373;
            color: #eeeeee;
        }
        .qa-container .btn-add  {
            background-color: #eeeeee;
            color: #181818;
        }

/* 게시글 작성 */
    #QaAddModal,
    #QaComModal {
        width: 970px;
        background-color: #fff;
        padding: 0;
    }
    #QaAddModal .logo,
    #QaComModal .logo {
        padding: 20px;
    }
    #QaAddModal .data-wrap {
        padding: 20px;
        padding-top: 0;
    }
    #QaAddModal .subject {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 18px;
        font-weight: 500;
        color: #171717;
        margin-bottom: 10px;
    }
    #QaAddModal .subject select,
    #QaAddModal .subject input {
        height: 40px;
        border-radius: 4px;
        border-color: #7d7d7d;
    }
    #QaAddModal .subject select {
        flex-shrink: 0;
        width: 200px;
        background-image: url(../img/icon/arrow_down_g.png);
        background-position: right 18px center;
        margin-right: 30px;
    }
    #QaAddModal .subject > div {
        flex-grow: 1;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    #QaAddModal .subject > div span {
        display: block;
        flex-shrink: 0;
        margin-right: 10px;
    }
    #QaAddModal .subject > div input {
        flex-grow: 1;
    }

    #QaAddModal .edit-wrap {
        width: 100%;
        height: 600px;
    }
    #QaAddModal .edit-wrap textarea {
        width: 100%;
        height: 100%;
    }
    #QaAddModal .btn-area {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 25px;
        border-top: 2px solid #eeeeee;
    }
    #QaAddModal .btn-area .btn {
        width: 120px;
        line-height: 38px;
        border-radius: 4px;
        border: none;
        font-size: 20px;
        font-weight: 500;
    }
    #QaAddModal .btn-area .btn + .btn {
        margin-left: 30px;
    }
    #QaAddModal .btn-area .submit {
        background-color: #0f84fa;
        color: #fff;
    }
    #QaAddModal .btn-area .cancle {
        background-color: #aaaaaa;
    }

    #QaComModal .alert-wrap {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        height: 360px;
        font-size: 42px;
        font-weight: 500;
        line-height: 1.2em;
        color: #5f5f5f;
    }
    #QaComModal .desc {
        background-color: #f7f7f7;
        padding: 50px 60px;
        color: #393939;

        font-size: 16px;
        line-height: 1em;
    }
    #QaComModal .desc h5 {
        font-size: 20px;
        font-weight: 700;
        line-height: 1em;
        margin-bottom: 30px;
    }

    #QaComModal .btn-area {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 40px;
    }
    #QaComModal .submit {
        width: 130px;
        line-height: 38px;
        font-size: 16px;
        font-weight: 500;
        background-color: #0f84fa;
        text-align: center;
        box-shadow: 1px 1px 2px rgb(0 0 0 / 10%);
        -webkit-box-shadow: 1px 1px 2px rgb(0 0 0 / 10%);
        cursor: pointer;
    }

    .modal-detail-select  {
        max-width: 680px;
        margin: 0 auto;
    }
    .modal-detail-select.wspace {
        margin: 30px auto;
        margin-top: 0
    }
    .modal-detail-select .select-wrap {
        width: 100%;
        padding-top: 15px;
    }
    .modal-detail-select .selectBox  {
        /*border-top: 1px solid #070707;*/
        margin-bottom: 27px;
    }
    .modal-detail-select.wspace .selectBox {
        margin-bottom: 60px;
    }
    .modal-detail-select .selectBox  .box {
        position: relative;
    }
    .modal-detail-select .selectBox .box .select {
        border: 3px solid #eeeeee;
        border-radius: 6px;
        height: 80px;
        flex-grow: 1;
        padding-left: 30px;
        padding-right: 110px;

        background-size: 30px;
        background-position: right 40px center;
        background-image: url(../img/icon/arrow_down_w.png);
    }
    .modal-detail-select .selectBox .box .select:hover {
        text-decoration: none;
    }
    .modal-detail-select .selectBox .box .list {
        position: absolute;
        left: 0;
        top: 100%;
        width: 100%;
        background-color: #181818;
        border: 3px solid #eeeeee;
        border-radius: 0 0 6px 6px;
        margin-top: 0;
        padding-top: 0;
    }
    .modal-detail-select .selectBox .box .list ul {
        width: 100%;
    }
    .modal-detail-select .selectBox .box .list li {
        padding: 0;
        padding-left: 30px;
        padding-right: 87px;
    }
    .modal-detail-select .selectBox .box .list li:hover {
        text-decoration: none;
    }
    .modal-detail-select .selectBox .option {
        flex-grow: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 33px;
        font-weight: 500;
    }
    .modal-detail-select .selectBox .option:hover {
        text-decoration: none;
    }
    .modal-detail-select .selectBox .option .price {
        color: #d17c22;
    }
    .modal-detail-select .selectBox .selected {
        display: none;
    }

    .modal-detail-select .selectBox .box .select[aria-expanded="true"] {
        border-bottom-color: #141517;
    }
    .modal-detail-select .selectBox .box .select[aria-expanded="true"] + .list {
        display: block;
        margin-top: -16px;
        border-top: none;
        padding-right: 13px;
    }
    .modal-detail-select .selectBox .box .list ul {
        max-height: 192px;
        overflow-y: scroll;
    }
    .modal-detail-select .selectBox .box .list ul::-webkit-scrollbar {
        width: 10px;
        background-color: #7d7d7d;
        border-radius: 5px;
     }
    .modal-detail-select .selectBox .box .list ul::-webkit-scrollbar-thumb {
        background-color: #434343;
        cursor: pointer;
        border-radius: 5px;
     }
    .modal-detail-select .selectBox .box .list ul::-webkit-scrollbar-track {
        background-color: transparent;
        border: 13px solid transparent;
        border-radius: 36px;
        width: 36px;
    }

    .modal-detail-select .select-wrap .selectBox .selected {
        color: #eee;
        display: none;
    }

    .modal-detail-select .btn-play {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 80px;
        background-color: #eeeeee;
        border-radius: 6px;
        font-size: 33px;
        font-weight: 500;
        color: #181818;
    }
    .modal-detail-select .btn-play i {
        width: 40px;
        height: 44px;
        background-image: url(../img/icon/play.png);
        background-repeat: no-repeat;
        background-size: contain;
        margin-right: 15px;
    }


    .result-contain {
        width: 100%;
        height: 100vh;
        background-color: #eeeeee;
    }
    .result-contain .inner {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-flow: column;
        width: 604px;
        min-height: 100%;
        margin: 0 auto;
        background-color: #fff;
        box-shadow: 0px 0px 30px rgba(0,0,0,0.16);
        -webkit-box-shadow: 0px 0px 30px rgba(0,0,0,0.16);
    }
    .result-contain .inner > article {
        width: 100%;
    }
    .result-contain .inner .heaer,
    .result-contain .inner .footer {
        flex-shrink: 0;
    } 
    .result-contain .inner .heaer img,
    .result-contain .inner .footer img {
        width: 100%;
        vertical-align: top;
    }

    .result-contain .inner .body {
        flex-grow: 1;
        padding: 30px 70px;
        color: #000;
    }
    .result-contain .inner .body h1 {
        font-size: 46px;
        font-weight: 500;
        line-height: 52px;
        margin-bottom: 30px;
    }
    .result-contain .inner .body .code {
        letter-spacing: 0.5em;
        margin-top: 30px;
        margin-bottom: 0;
    }
    .result-contain .inner .body .content {
        padding-top: 30px;
        font-size: 14px;
    }
    .result-contain .inner .body .content p {
        margin-bottom: 20px;
    }
    .result-contain .inner .body .content .Btn {
        margin-top: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 46px;
        border-radius: 6px;
        background-color: #d12222;
        color: #fff;
    }

/* 회원가입 */
    .signup__ {
        max-width: 604px;
        margin: 0 auto;
        padding-top: 65px;
        padding-bottom: 54px;
    }
    .signup__ > h1 {
        margin-bottom: 44px;
        font-size: 34px;
        font-weight: 400;
    }
    .signup__ > h1 span {
        border-bottom: 3px solid #181818;
        line-height: 1em;
    }
    .signup__ > .alert {
        padding-left: 16px;
        font-size: 18px;
        line-height: 1.4em;
        margin-bottom: 48px;
    }
    .signup__ > .alert h5 {
        font-size: 26px;
        font-weight: 500;
        line-height: 1em;
        margin-bottom: 10px;
    }
    .signup__ .form__ {
        width: 378px;
        margin: 0 auto;
    }
    .signup__ .form__ .title__ {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 18px;
        font-weight: 500;
        line-height: 1em;
        margin-bottom: 20px;
    }
    .signup__ .form__ .title__ span {
        margin-left: 13px;
        font-size: 14px;
        letter-spacing: -0.5px;
        color: #e60012;
    }
    .signup__ .form__ .field__ {
        width: 320px;
        margin: 0 auto;
    }
    .signup__ .form__ .field__ + .title__ {
        margin-top: 40px;
    }
    .signup__ .form__ .field__ .tip {
        margin-bottom: 30px;
    }
    .signup__ .form__ .field__ input {
        width: 100%;
        background-color: transparent;
        border-color: #535353;
    }
    .signup__ .form__ .field__ input + .alert {
        font-size: 12px;
        color: #d17c22;
        letter-spacing: -0.25px;
        margin-bottom: 22px;
    }
    .signup__ .form__ .field__ input  + input {
        margin-top: 14px;
    }

    .signup__ .form__ .upload__ {
        margin-top: 15px;
        position: relative;
    }
    .signup__ .form__ .upload__ input {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        cursor: pointer;
        opacity: 0;
    }
    .signup__ .form__ .upload__ input  + label {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 40px;
        border-radius: 6px;
        font-size: 16px;
        background-color: #0f84fa;
        box-shadow: inset 0rem 2px 2px #77cdf4;
        -webkit-box-shadow: inset 0rem 2px 2px #77cdf4;
        color: #eeeeee;
    }
    .signup__ .form__ .upload__ input:hover + label,
    .signup__ .form__ .upload__ input:focus + label {
        box-shadow: 0px 0px 2px 2px #fff;
        -webkit-box-shadow: 0px 0px 2px 2px #fff;
    }
    .signup__ .form__ .upload__ label span {
        padding-left: 27px;
        background-image: url(../img/icon/folder.png);
        background-repeat: no-repeat;
        background-position: left center;
    }

    .signup__  .select_group {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .signup__  .select_group .select_wrap {
        width: 145px;
    }
    .signup__  .select_group .select_wrap + .select_wrap {
        margin-left: 30px;
    }
    .signup__ .selectBox {
        position: relative;
    }
    .signup__ .selectBox .box > a {
        font-size: 16px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 40px;
        border: 1px solid #535353;
        border-radius: 6px;
        padding-left: 20px;
        background-image: url(../img/icon/arrow_drop_b.png);
        background-repeat: no-repeat;
        background-position: right 15px center;
        background-size: 10px;
    }
    .signup__ .selectBox .list {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        font-size: 14px;
        background-color: #232323;
        border-radius: 0px 0px 6px 6px;
        color: #eeeeee;
        display: none;
    } 
    .signup__ .selectBox .list a {
        display: block;
        padding: 6px 20px;
    }

    .signup__ .selectBox.on .box > a {
        background-color: #232323;
        border-color: #232323;
        color: #eee;
        border-radius: 6px 6px 0 0;
        background-image: url(../img/icon/arrow_up_g.png);
    }
    .signup__ .selectBox.on .list {
        display: block;
    }
    .signup__ .selectBox.on .list .selected {
        display: none;
    }
    .signup__ .checkbox {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: #878787;
        font-size: 15px;
    }
    .signup__ .form__ .field__ .checkbox input {
        width: 26px;
        height: 26px;
        margin-right: 10px;
    }
    .signup__ .form__ .field__ .checkbox a {
        color: #0054ff;
    }
    .signup__ .form__ #submit {
        width: 100%;
        height: 40px;
        border-radius: 6px;
        background-color: #e50914;
        color: #fff;
        font-size: 18px;
        font-weight: 500;
        border: none;
        margin-top: 45px;
    }
    .signup__ .form__ #submit:hover,
    .signup__ .form__ #submit:focus {
        opacity: 0.8;
        box-shadow: 0px 0px 2px 2px #fff;
        -webkit-box-shadow: 0px 0px 2px 2px #fff;
    }




/* 06.15 */
    .ct_banner_area {
        width: 100%;
        height: 200px;
        background-color: #eee;
        margin: 0 auto;
        max-width: 1280px;
    }
    .ct_banner_area img {
        width: 100%;
        vertical-align: top;
    }

    /* 결제정보 등록 */
    .wallet_form {
        max-width: 800px;
        margin: 0 auto;
        padding: 40px 0;
    }
    .wallet_form .title {
        font-size: 34px;
        padding-bottom: 20px;
        border-bottom: 2px solid #e60012; 
        color: #030708;
    }

    .wallet_form .form_inner {
        background-color: #fff;
        padding: 40px 0;
    }

    .wallet_form .field {
        width: 320px;
        margin: 0 auto;
    }
    .wallet_form .field input {
        width: 100%;
        height: 40px;
        font-size: 16px;
        padding: 6px 10px;
    }
    .wallet_form .field + .field {
        margin-top: 10px;
    }
    .wallet_form .field .alert {
        font-size: 10px;
        color: #e60012;
        padding: 2px 5px
    }

    .wallet_form .Btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 320px;
        height: 40px;
        margin: 0 auto;
    }
    .wallet_form .submit {
        background-color: #0f84fa;
        border: none;
        border-radius: 6px;
        color : #fff;
        margin-top: 30px;
        font-size: 18px;
        font-weight: 500;
    }

    .free-pass-wrap {
        max-width: 320px;
        margin: 0 auto;
        padding-top: 10px;
        padding-bottom: 30px;
    }
    .pass_card {
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 80px;
        background-color: #fff;
        color: #181818;
        padding: 12px;
        padding-right: 26px;
        border: 2px solid #dcdcdc;
        border-radius: 12px;
    } 
    .pass_card + .pass_card {
        margin-top: 1.4rem;
    }
    .pass_card h5 {
        font-size: 16px;
        font-weight: 400;
        margin-bottom: 8px;
    }
    .pass_card h5 span {
        font-size: 14px;
        margin-left: 8px;
    }
    .pass_card p {
        font-size: 12px;
    }
    .pass_card .btn {
        flex-shrink: 0;
        color: #0f84fa !important;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
    }
    .pass_card .btn:hover {
        background-color: transparent;
        opacity: 0.8;
    }

    .pass-term-area {
        max-width: 470px;
        margin: 0 auto;
    }
    .pass-term-area .term {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 14px;
        color: #181818;
        word-break: keep-all;
    }
    .pass-term-area .term + .term {
        margin-top: 10px;
    }
    .pass-term-area .term input {
        flex-shrink: 0;
        width: 25px;
        height: 25px;
        margin-right: 10px;
        cursor: pointer;
    }
    .pass-term-area .term a {
        color: #0054ff;
    }
    .pass-term-area .term .nee {
        color: #e60012;
    }
    .pass-term-area .term .cho {
        color: #0054ff;
    }


    .culture_banner {
        color: #181818;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 112px;
    }
    .culture_banner > div:first-child {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        font-size: 16px;
        padding-left: 20px;
    }
    .culture_banner > div:first-child:before {
        content: "·";
        flex-shrink: 0;
        font-size: 24px;
        margin-right: 4px;
        line-height: 24px;
    }
    .culture_banner img {
        width: 411px;
    }

    .pass_form {
        background-color: #fff;
        border: 1px solid #eeeeee;
        padding: 40px 20px;
        padding-top: 0;
    }
    .pass_form form {
        margin-bottom: 0;
    }
    .pass_form .submit {
        /*margin-top: 5rem;*/
    }
    .pass_form + .pass_form {
        margin-top: 40px;
    }
    .pass_title {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 24px;
        height: 70px;
        border-bottom: 2px solid #ebebeb;
        color: #181818;
    }
    .pass_title:before {
        content: "·";
        font-weight: 900;
        margin-right: 8px;
    }
    .pass_title b {
        margin-left: 8px;
        font-weight: 700;
        color: #0f84fa;
    }

    .pass-checkbox {
        position: relative;
        width: 380px;        
        margin: 0px auto;
        margin-top: 30px;
    }
    .pass-checkbox + .pass-checkbox {
        margin-top: 20px;
    }
    .pass-checkbox input {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        opacity: 0;
        cursor: pointer;
    }
    .pass-checkbox label {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-flow: column;
        padding: 18px;
        min-height: 180px;;
        border: 2px solid #ddd;
        color : #0f84fa;
        border-radius: 10px;
        opacity: 0.6;
    }
    .pass-checkbox input:checked + label {
        opacity: 1;
        border-color: #0f84fa;
    }
    .pass-checkbox h1 {
        font-size: 30px;
        font-weight: 500;
    }
    .pass-checkbox .cash {
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 305px;
        min-height: 40px;
        border-radius: 20px;
        font-size: 18px;
        font-weight: 500;
        background-color: #0f84fa;
        color: #fff;
        margin: 15px 0;
    }
    .pass-checkbox .vat {
        color: #181818;
        font-size: 16px;
    }
    .pass-checkbox.default label {
        border-color: #535353;
    }
    .pass-checkbox.default input:checked + label {
        border-color: #535353;
    }
    .pass-checkbox.default h1 {
        color: #535353;
    }
    .pass-checkbox.default .cash {
        background-color: #535353;
    }

    .refund-details {
        margin-top: 30px;
        font-size: 11px;
        font-weight: 300;
        word-break: keep-all;
        color: #626262;
    }
    .refund-details li {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        margin-bottom: 4px;
    }
    .refund-details li:before {
        content: "·";
        margin-right: 4px;
        flex-shrink: 0;
    }

/* 원격 페이지 */
    .remote_area {
        width: 700px;
        margin: 0 auto;
        padding-bottom: 37px;
    }
    .remote_area .btn_area {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-top: 37px;
    }
    .remote_area .btn_area .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 320px;
        height: 40px;
        border-radius: 8px;
        font-size: 18px;
        font-weight: 500;
        background-color: #fff;
        color: #0f84fa;
        border: 1px solid #0f84fa;
    }
    .remote_area .btn_area .btn:first-child {
        background-color: #0f84fa;
        color: #fff;
    }
    .remote_area .btn_area .btn:hover {
        opacity: 0.8;
    }

    .remote_alert {
        text-align: center;
    }
    .remote_alert h1 {
        margin: 25px 0;
        font-size: 34px;
    }
    .remote_alert h1 span {
        color: #e60012;
    }
    .remote_alert span b:nth-child(1) { color: #d12222;  }
    .remote_alert span b:nth-child(2) { color: #d17c22;  }
    .remote_alert span b:nth-child(3) { color: #28bc00;  }
    .remote_alert span b:nth-child(4) { color: #194ffe;  }
    .remote_alert span b:nth-child(5) { color: #b810d6;  }
    .remote_alert .desc {
        white-space: pre-line;
        font-size: 18px;
        font-weight: 300;
    }
    .remote_alert .desc b {
        font-weight: 500;
    }
    .remote_alert .desc span {
        color: #e60012;
    }

    .remote_guide {
        background-color: #fff;
        border: 1px solid #eee;
        border-radius: 20px;
        padding: 33px;
        margin-top: 37px;
    }
    .remote_guide h1 {
        font-size: 24px;
        font-weight: 400;
        color: #0f84fa;
        margin-bottom: 30px;
    }

    .number_list li {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        font-size: 16px;
        word-break: keep-all;
        padding-left: 24px;
    }
    .number_list li + li {
        margin-top: 45px;
    }
    .number_list li img {
        margin-top: 24px;
    }
    .number_list .num,
    .number_list h5,
    .number_list b {
        font-size: 18px;
        color: #0f84fa;
    }
    .number_list .num {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        line-height: 16px;
        border-radius: 50%;
        font-weight: 900;
        border: 1px solid #0f84fa;
        text-align: center;
        vertical-align: middle;
        margin-right: 8px;
    }
    .number_list h5 {
        margin-bottom: 5px;
        line-height: 20px;
        color: #181818;
    }


/* light mode css */
    /* header */
        html[data-theme='light'] .main-top-content .banner-wrap:after {
            background-image: url(../img/banner/shade_white.png);
        }
        html[data-theme='light'] .visual__check .slide-checkbox input + label:before {
            color: #4c4c4c;
        }
        html[data-theme='light'] .visual__check .slide-checkbox input + label span:before {
            background-color: #eeeeee;
        }
        html[data-theme='light'] .visual__check .slide-checkbox input:checked + label span {
            background-color: #4c4c4c;
        }
        html[data-theme='light'] .select-wrap .selectBox .select {
            background-color: #fff;
            color: #181818;
            background-image: url(../img/icon/arrow_drop_b.png);
        }

        html[data-theme='light'] header .searchBox {
        	height: 35px;
            background-color: #b9babe;
            /* background-image: url(../img/icon/icon_fas_b.png); */
            border-color: #7e7e7e;
            width: 300px;
        	height: 36px;
            color: #131313;
            font-size: 16px;
        }
        

    
        html[data-theme='light'] header .searchBox::placeholder {
            color: #7e7e7e;
        }

        html[data-theme='light'] header .account-dropMenu .drop-mune-btn .arrow_icon {
            background-image: url(../img/icon/arrow_drop_w.png);
        }

        html[data-theme='light'] header .account-profile-info .useName {
            color: #545454;
        }
        html[data-theme='light'] header .account-dropMenu .account-drop-down {
            background-color: #eee;
            color: #545454;
        }
        html[data-theme='light'] header .slide-checkbox input + label span:before {
            background-color: #eee;
        }

    /* modal */

        html[data-theme='light'] .confirm-modal-dialog .confirm-modal-wrap .modal {
            background-color: #eee;
            color: #515151;
            box-shadow: 5px 5px 10px rgb(0 0 0 / 70%);
            -webkit-box-shadow: 5px 5px 10px rgb(0 0 0 / 70%);
        }

        html[data-theme='light'] .modal .form-area .field input {
            border-color: #272727;
        }

        html[data-theme='light'] .modal .form-area .title h1,
        html[data-theme='light'] .modal .api-auth-loing .alert a,
        html[data-theme='light'] #signup .signup-term-area .lt,
        html[data-theme='light'] .main-content-wrap .head .ViewAll,
        html[data-theme='light'] .content-detail-layer .content-modal,
        html[data-theme='light'] .modal-detail-wrap,
        html[data-theme='light'] .main-content-wrap .pagenate-area ul li a {
             color: #272727;
        }
        html[data-theme='light'] .content-detail-layer .content-modal {
            background-color: #eeeeee;
        }
       html[data-theme='light'] .preview-wrap .prev-tool-area {
            background: -webkit-gradient(linear,left bottom,left top,from(#eeeeee),color-stop(30%,transparent));
            background: -webkit-linear-gradient(bottom,#eeeeee,transparent 30%);
            background: -moz- oldlinear-gradient(bottom,#eeeeee,transparent 30%);
            background: -o-linear-gradient(bottom,#eeeeee,transparent 30%);
            background: linear-gradient(to top,#eeeeee,transparent 30%);   
        }
        html[data-theme='light'] .modal-detail-select .selectBox .box {
            background-color: transparent;
            color: #181818;
        }
        html[data-theme='light'] .modal-detail-select .selectBox .box .select {
            background-size: 33px;
            border-color: #535353;
            background-color: transparent;
        }

        html[data-theme='light'] .modal-detail-select .selectBox .box .select[aria-expanded="true"] {
            background-image: url(../img/icon/arrow_down_w.png);
            background-color: #181818;
            border-color: #181818;
            color: #eee;
        }

        html[data-theme='light'] .modal-detail-select .selectBox .box .select[aria-expanded="true"] + .list {
            border-color: #181818;
        }

        html[data-theme='light'] .modal-detail-wrap .BaseData .btn-plus {
            background-image: url(../img/icon/btn_plus_b.png);
        }
         html[data-theme='light'] .modal-detail-wrap .BaseData .btn-minus {
            background-image: url(../img/icon/btn_min_b.png);
        }
         .modal-detail-wrap .info span {
	        color: #878787;
	    }
    
        html[data-theme='light'] .modal-detail-select .btn-play {
            background-color: #535353;
            color: #eee;
        }
        html[data-theme='light'] .modal-detail-select .btn-play i {
            background-image: url(../img/icon/arrow_right_w.png);
        }

        html[data-theme='light'] .series-list .play-area .btn-play {
            background-image: url(../img/icon/btn_play_text3.png);
        }

        html[data-theme='light'] #signup .form-area .field input {
            background-color: #dcdcdc;
        }
        html[data-theme='light'] .main-content-wrap .head .ViewAll {
            border-color: #181818;
            color: #181818;
        }
        html[data-theme='light'] .main-content-wrap .category-content {
            background-color: #dbdbdb;
        }
        html[data-theme='light'] .main-content-wrap .head .tool a:hover, 
        html[data-theme='light'] .main-content-wrap .head .tool a:focus,
        html[data-theme='light'] .main-content-wrap .category-content ul li > a:focus {
            box-shadow: 0px 0px 2px 2px #0089ff;
        }


        html[data-theme='light'] .prev-tool-area .controls-area .btn-prev {
            background-image: url(../img/icon/btn_prev_text_b.png);
        }
        html[data-theme='light'] .prev-tool-area .controls-area .btn-plus { background-image: url(../img/icon/btn_plus_b.png); }
        html[data-theme='light'] .prev-tool-area .controls-area .btn-sound { background-image: url(../img/icon/sound_off_b.png); }
        html[data-theme='light'] .prev-tool-area .controls-area .btn-sound.play { background-image: url(../img/icon/sound_on_b.png); }
        html[data-theme='light'] .main-content-wrap .pagenate-area .btn-more {
            background-image: url(../img/icon/btn_more_b.png);
        }

        html[data-theme='light'] .main-top-content .prev-content-wrap .prev-tool-area {
            background: -webkit-gradient(linear,left bottom,left top,from(#eeeeee),color-stop(50%,transparent));
            background: -webkit-linear-gradient(bottom,#eeeeee,transparent 50%);
            background: -moz- oldlinear-gradient(bottom,#eeeeee,transparent 50%);
            background: -o-linear-gradient(bottom,#eeeeee,transparent 50%);
            background: linear-gradient(to top,#eeeeee,transparent 50%);
        }

        html[data-theme='light'] .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
            /*background-color: #565656;*/
        }
        html[data-theme='light'] .main-top-content .prev-content-wrap .prev-tool-area .info-area .text  {
            color: #fff;
        }
        html[data-theme='light'] .main-top-content .prev-content-wrap .controls-area .btn-detail {
            background-color: #86878a;
        }

        html[data-theme='light'] .cty-Expanded-layer .detail .tool a .tip {
            background-color: #181818;
            color: #fff;
        }
        html[data-theme='light'] .cty-Expanded-layer .detail .tool a .tip:after {
            border-top-color: #181818;
        }


        html[data-theme='light'] .confirm-modal-dialog .confirm-modal-wrap #paymentModal,
        html[data-theme='light'] .confirm-modal-dialog .confirm-modal-wrap #deleteModal {
            background-color: #141517;
        }

        .profile-area .profile-list a:focus {
            outline: none;
        }
        html[data-theme='light'] .profile-area .profile-list a:hover,
        html[data-theme='light'] .profile-area .profile-list + .btn-area a:hover {
            color: #181818;
        }
        html[data-theme='light'] .profile-area .profile-list a:focus .profile-icon, 
        html[data-theme='light'] .profile-area .profile-list a:hover .profile-icon {
            box-shadow: 0px 0px 1px 3px #181818;
        }
        html[data-theme='light'] .profile-area .profile-list + .btn-area .btn-submit {
            border-color: transparent;
        }

        html[data-theme='light'] .profile-form-area .profileName {
            background-color: #dcdcdc;
            color: #181818;
            border: 1px solid #181818;
        }
        html[data-theme='light'] .profile-form-area .select-wrap .selectBox .select {
            background-color: transparent;
        }
        html[data-theme='light'] .profile-form-area .limitAge {
            color: #eee;
        }

        html[data-theme='light'] .profile-form-area .limitAge + .alert,
        html[data-theme='light'] .profile-form-area .btn {
            color: #181818;
            border-color: #181818 !important;
            border-radius: 0;
        }
        html[data-theme='light'] .profile-form-area .checkBox input + label {
            background-image: url(../img/icon/checkbox_b.png);
        }
        html[data-theme='light'] .profile-form-area .checkBox input:checked + label {
            background-image: url(../img/icon/checkboxed_b.png);
        }

        html[data-theme='light'] .profile-form-area + .btn-area,
        html[data-theme='light'] .profile-form-area + .btn-area .btn-cancle {
            border-color: #313131;
        }
        html[data-theme='light'] .profile-form-area + .btn-area .btn-submit {
            background-color: #dcdcdc;
        }


        html[data-theme='light'] .footer-gnb01 .sns .instar { background-image: url(../img/icon/instar_b.png); }
        html[data-theme='light'] .footer-gnb01 .sns .twit { background-image: url(../img/icon/twit_b.png); }
        html[data-theme='light'] .footer-gnb01 .sns .fbook { background-image: url(../img/icon/fbook_b.png); }
        html[data-theme='light'] .footer-gnb01 .sns .ytb { background-image: url(../img/icon/ytb_b.png); }

        html[data-theme='light'] .subject-inner + .tool .btn_delete {
            color: #eee;
        }

        html[data-theme='light'] #signup .form-area .field input {
            background-color: #eee;
        }
        html[data-theme='light'] #signup  .email-field .selectBox__.on .select__ input {
            background-color: #313131;
        }
        html[data-theme='light'] #signup .signup-term-area > div,
        html[data-theme='light'] #disabled .form-area .alert h5,
        html[data-theme='light'] #disabled .form-area .alert p,
        html[data-theme='light'] #disabled .form-area .disabled__ .select,
        html[data-theme='light'] #disabled .form-area .disabled__ > p,
        html[data-theme='light'] #disabled .verify_area .alert,
        html[data-theme='light'] #disabled .verify_area > div,
        html[data-theme='light'] #disabled .form-area .title h1 {
            color: #181818;
        }

        html[data-theme='light'] #disabled .verify_area .icon_card {
            background-image: url(../img/icon/card.png);
        }
        html[data-theme='light'] #disabled .verify_area .icon_cam {
            background-image: url(../img/icon/cam.png);
        }

        html[data-theme='light'] .main-content-wrap .pagenate-area ul li {
            color: #181818;
        }
        html[data-theme='light'] .main-content-wrap .pagenate-area ul li a:hover, 
        html[data-theme='light'] .main-content-wrap .pagenate-area ul li.on a {
            background-color: #181818;
            color: #eee;
        }

@media(max-width: 1200px){
    .main-top-content.category__ .swiper {
        min-height: 560px;
    }
    .swiper-container-horizontal > .swiper-pagination-bullets, 
    .swiper-pagination-custom, .swiper-pagination-fraction {
        bottom: 30px;
    }
}