@charset "utf-8";
/*-------------------------------------------------------------------
                                BASIC
-------------------------------------------------------------------*/
input {
    caret-color: var(--color-gray333);
}
.center_640 {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 30px;
}
img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

/* SCROLL */
::-webkit-scrollbar {
    width: 1px
}
::-webkit-scrollbar-track {
    background: #d0d0d0
}
::-webkit-scrollbar-thumb {
    background: #000
}
::-webkit-scrollbar-thumb:hover {
    background: #ed0081
}

/* placeholder */
input::placeholder {
    color: rgba(153, 153, 153, var(--placeholder-opacity, 1));
    font-weight: 400;
    transition: opacity 0.5s ease-in-out;
    font-size: 1rem;
}
input {
    transition: background-color 0.5s ease-in-out;
}
input[type="checkbox"] {
    border: 1px solid var(--color-white);
    appearance: none;
    cursor: pointer;
    transition: background 0.2s;
}
button {
    cursor: pointer;
    white-space: nowrap;
    border: 0;
    background: none
}

/*-------------------------------------------------------------------
                                HEADER
-------------------------------------------------------------------*/
#header {
    position: sticky;
    top: 0;
    border-bottom: 1px solid #eee;
    background: var(--color-white);
    z-index: 1;
}
.gnb {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px;
}
.logo {
    width: 152px;
    height: 24px;
    font-size: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' data-name='Layer 1' version='1.1' viewBox='0 0 808 127'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23000;stroke-width:0%7D%3C/style%3E%3C/defs%3E%3Cpath d='M115.5 23.2h7.7V7.8h-15.4v15.4h7.7ZM127.1 42.3h-3.8v-3.8h-3.8v-3.8h-7.7v3.8H108v3.8h-7.7V50h7.7v34.6h-7.7v7.7h7.7v7.7h11.5v-3.8h3.8v-3.8h3.8v-3.8h3.8v-3.8h-7.7V50.2h7.7v-7.7h-3.8ZM388.6 38.5v-3.8h-19.2v3.8h-3.8v3.8h-3.8v3.8H358v3.8h-3.8v34.6h-7.7v7.7H358V96h3.8v3.8h11.5V96h3.8v-3.8h3.8v-3.8h3.8v-3.8h-15.4V46.1h3.8v-3.8h3.8v3.8h3.8v3.8h11.5V38.4h-3.8ZM605.9 38.5v-3.8h-19.2v3.8h-3.8v3.8h-3.8v3.8h-3.8v3.8h-3.8v34.6h-7.7v7.7h11.5V96h3.8v3.8h11.5V96h3.8v-3.8h3.8v-3.8h3.8v-3.8h-15.4V46.1h3.8v-3.8h3.8v3.8h3.8v3.8h11.5V38.4h-3.8ZM742.5 42.3h-3.8v-3.8h-3.8v-3.8h-15.4v3.8h-3.8v3.8H708v-3.8h-3.8v-3.8h-11.5v3.8h-3.8v3.8h-3.8V50h7.7v34.6H689v3.8h-3.8v3.8h-3.8v7.7h7.7v-3.8h3.8V123h3.8v-3.8h3.8v-3.8h3.8v-3.8h3.8V92.4h15.4v7.7h7.7v-3.8h3.8v-3.8h11.5v-7.7h-7.7V50.2h7.7v-7.7h-3.8ZM707.8 50h15.4v34.6h-15.4V50ZM673.2 42.3h-7.7v-3.8h-3.8v-3.8h-23.1v3.8h-3.8v3.8H631v3.8h-3.8v3.8h-3.8v34.6h-7.7v7.7h11.5V96h3.8v3.8h19.2V96h3.8v-3.8h3.8v-3.8h3.8v-3.8h3.8v-3.8h3.8V50h7.7v-7.7h-3.8ZM654 84.7h-15.4V46.2h3.8v-3.8h3.8v3.8h3.8V50h3.8v34.6ZM550.2 3.9v3.8h-3.8v3.8H531V7.7h-7.7V3.9h-26.9v3.8h-7.7v3.8h-3.8v7.7h-3.8v26.9h3.8v3.8h7.7v3.8h7.7v3.8h7.7v3.8h7.7v3.8h7.7v3.8h7.7v3.8h7.7v11.5H535V88h-7.7v-3.8h-7.7v-3.8h-7.7v-3.8h-7.7v-3.8h-15.4v3.8H485v3.8h-3.8v3.8h-3.8V88h-3.8v3.8h-3.8v7.7h3.8v-3.8h3.8v-3.8h3.8v-3.8h11.5v3.8h7.7v3.8h7.7v3.8h23.1v-3.8h7.7v-3.8h3.8v-3.8h3.8v-3.8h3.8v-7.7h3.8V53.5h-3.8v-3.8h-7.7v-3.8h-7.7v-3.8h-7.7v-3.8h-7.7v-3.8h-7.7v-3.8h-7.7v-3.8h-3.8v-3.8h-3.8v-7.7H508v3.8h7.7V23h7.7v3.8h15.4V23h3.8v-3.8h3.8v-3.8h3.8v-3.8h3.8V3.9h-3.8Zm-15.4 65.4v-3.8h-7.7v-3.8h-7.7v-3.8h-7.7v-3.8H504v-3.8h-7.7v-3.8h-7.7v-7.7h11.5v3.8h7.7v3.8h7.7v3.8h7.7V54h7.7v3.8h7.7v3.8h7.7v7.7h-11.5ZM438.6 42.3v-3.8h-3.8v-3.8h-19.2v3.8h-3.8v3.8H408v3.8h-3.8v3.8h-3.8v34.6h-7.7v7.7h11.5V96h3.8v3.8h11.5V96h3.8v-3.8h3.8v-3.8h3.8v-3.8h-15.4V65.4h19.2v-7.7h-19.2V46.2h3.8v-3.8h3.8v3.8h3.8V50h3.8v3.8h3.8v3.8h7.7V42.2h-3.8ZM800.2 42.3v-3.8h-3.8v-3.8h-19.2v3.8h-3.8v3.8h-3.8v3.8h-3.8v3.8H762v34.6h-7.7v7.7h11.5V96h3.8v3.8h11.5V96h3.8v-3.8h3.8v-3.8h3.8v-3.8h-15.4V65.4h19.2v-7.7h-19.2V46.2h3.8v-3.8h3.8v3.8h3.8V50h3.8v3.8h3.8v3.8h7.7V42.2H800ZM265.5 42.3h-7.7v-7.7h-26.9v3.8h-3.8v3.8h-3.8V46h-3.8v3.8h-3.8v34.6H208v7.7h11.5v3.8h3.8v3.8h15.4v-3.8h3.8v-3.8h7.7v7.7h11.5V96h3.8v-3.8h3.8v-7.7h-7.7V49.9h7.7v-7.7h-3.8Zm-30.7 0h11.5v42.3h-15.4V42.3h3.8ZM196.3 42.3h-3.8v-3.8h-3.8v-3.8h-15.4v3.8h-3.8v3.8h-7.7v-3.8H158v-3.8h-15.4v3.8h-3.8V50h7.7v34.6h-7.7v7.7h7.7v7.7H158v-3.8h3.8v-3.8h3.8v-7.7h-3.8V50.1h15.4v34.6h-7.7v7.7h7.7v7.7h11.5v-3.8h3.8v-3.8h3.8v-3.8h3.8v-3.8h-7.7V50.3h7.7v-7.7h-3.8ZM334.8 42.3H331v-3.8h-3.8v-3.8h-15.4v3.8H308v3.8h-7.7v-3.8h-3.8v-3.8h-15.4v3.8h-3.8V50h7.7v34.6h-7.7v7.7h7.7v7.7h11.5v-3.8h3.8v-3.8h3.8v-7.7h-3.8V50.1h15.4v34.6H308v7.7h7.7v7.7h11.5v-3.8h3.8v-3.8h3.8v-3.8h3.8v-3.8h-7.7V50.3h7.7v-7.7h-3.8ZM69.4 3.9v3.8h-3.8v3.8h-3.8v3.8H58v-3.8h-7.7v3.8h-3.8v-3.8h-3.8V7.7h-3.8V3.9H19.7v3.8h-3.8v3.8h-3.8v7.7h3.8v-3.8h3.8v-3.8h3.8v3.8h3.8v3.8h3.8V23h3.8v3.8h3.8v3.8h3.8v11.5H27.1v3.8h-3.8v3.8h-3.8v7.7h3.8v-3.8h3.8v-3.8h15.4v34.6h-3.8v-3.8h-3.8v-3.8h-3.8V73h-7.7v3.8h-3.8v3.8h-3.8v3.8H12v3.8H8.2V92H4.4v7.7h3.8v-3.8H12v-3.8h3.8v-3.8h7.7V96h7.7v3.8h23.1V96h3.8v-3.8h3.8v-3.8h3.8v-3.8h3.8v-3.8h3.8V50h15.4v-7.7H73.3V19.2h19.2v-3.8h3.8v-3.8h3.8V7.8h3.8V4H69.3ZM57.8 19.3v65.4H54v3.8h-3.8V19.3h7.7Z' class='cls-1'/%3E%3C/svg%3E");
}
.familysite_wrap {
    position: relative
}
.familysite_button {
    display: flex;
    align-items: center;
    column-gap: 10px;
    font-size: .9rem;
    font-weight: 700
}
.familysite_button::after {
    content: "";
    display: flex;
    width: 8px;
    height: 5px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-name='레이어 1' viewBox='0 0 506 285'%3E%3Cpath d='M230.4 274.9 10.1 54.7C-2 41.9-2 22.2 10.1 10.2s31.7-12.1 44.5 0L253 208.6 451.4 10.1c12.1-12.1 32.5-12.1 44.5 0 12.1 12.1 12.1 31.7 0 44.5L274.9 275c-12.1 12.1-31.7 12.1-44.5 0Z' style='fill:%23000;stroke-width:0'/%3E%3C/svg%3E");
    transition: all .3s ease;
}
.familysite_button.on::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-name='레이어 1' viewBox='0 0 506 285'%3E%3Cpath d='M230.4 10.1 10.1 230.3c-12.1 12.8-12.1 32.5 0 44.5s31.7 12.1 44.5 0L253 76.5 451.4 275c12.1 12.1 32.5 12.1 44.5 0 12.1-12.1 12.1-31.7 0-44.5l-221-220.4C262.8-2 243.2-2 230.4 10.1Z' style='fill:%23000;stroke-width:0'/%3E%3C/svg%3E");
    transition: all .3s ease;
}
.familysite_list {
    position: relative;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 46px;
    right: calc(0px - 20px);
    display: flex;
    flex-direction: column;
    row-gap: 15px;
    padding: 15px;
    border: 1px solid #eee;
    border-right: 0;
    background: var(--color-white);
    transition: all .5s ease;
    box-shadow: rgba(0, 0, 0, 0.3) -11px 5px 20px -20px;
    z-index: 1
}
.familysite_list::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, hsl(0, 0%, 100%) 100%);
}
.familysite_list.on {
    visibility: visible;
    opacity: 1;
    transition: all .5s ease;
}
.familysite_list li a {
    white-space: nowrap;
    font-size: .9rem
}

/*-------------------------------------------------------------------
                                FOOTER
-------------------------------------------------------------------*/
#footer {
    /* position: fixed; */
    width: 100%;
    bottom: 0;
    margin-top: calc(.2 * 100%);
    padding: 30px 0;
    background: var(--color-gray333);;
    z-index: 5
}
#footer .selcet_list {
    justify-content: center;
    margin-top: 0
}
#footer .selcet_list * {
    font-size: .8rem;
    font-weight: 300;
    color: #999
}
#footer .selcet_list>*::after {
    background: #000;
}
#footer .selcet_list a:hover {
    color: #bbb
}

/*-------------------------------------------------------------------
                                모듈
-------------------------------------------------------------------*/
/* 간격*/
.mt_auto {
    margin-top: calc(0.1 * 100%) !important
}

/* LayOut */
h2.title {
    display: flex;
    justify-content: center;
    margin: calc(0.1 * 100%) 0 calc(0.08 * 100%) 0;
    font-size: 1.7rem;
    font-weight: 800;
    text-align: center;
    line-height: calc(100%);
}

.s_title {
    display: flex;
    justify-content: center;
    margin: calc(0.1 * 100%) 0 calc(0.075 * 100%) 0;
    font-size: 1.3rem;
    font-weight: 800;
    text-align: center;
    line-height: 1.7rem;
}

.g_title {
    display: flex;
    justify-content: center;
    margin: calc(0.1 * 100%) 0 calc(0.075 * 100%) 0;
    font-size: 1.7rem;
    font-weight: 800;
    text-align: center;
    line-height: 2rem
}

.m_title {
    font-size: 1rem;
    font-weight: 700;
}

.l_title {
    display: flex;
    align-items: center;
    column-gap: 10px;
    font-size: 1.2rem;
    font-weight: 700;
}

.l_title::before {
    content: "";
    display: inline-block;
    width: 2px;
    height: 15px;
    background: var(--color-blue);
}

.title_sub {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 15px;
    margin-bottom: calc(0.075* 100%)
}

.title_sub .name {
    color: var(--color-purple)
}

.title_sub .title,
.title_sub .g_title {
    margin-bottom: 0;
}

.title_sub .title+*,
.title_sub .g_title+* {
    font-size: 0.95rem;
    font-weight: 700;
    text-align: center;
}

.warning {
    display: flex;
    align-items: center;
    column-gap: 5px;
    font-size: .9rem;
    color: var(--color-blue)
}

.warning::before {
    content: "";
    display: inline-block;
    min-width: 15px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-name='Layer 1' viewBox='0 0 18 14'%3E%3Cpath d='M16.5 1.5c-.7-.7-1.7-.7-2.4 0L6.6 9 3.9 6.3c-.7-.7-1.7-.7-2.4 0-.3.3-.5.7-.5 1.2s.2.9.5 1.2l3.9 3.9c.3.3.8.5 1.2.5.5 0 .9-.2 1.2-.5l8.7-8.7c.7-.7.7-1.7 0-2.4Z' style='fill:%23507CA0;stroke-width:0'/%3E%3C/svg%3E");
}

.skip {
    font-size: .9rem;
}

.skip>b {
    font-weight: 600;
    color: var(--color-blue)
}

.skip.point.watchout>* {
    color: var(--color-blue)
}

.skip.point.watchout>*::before {
    background: var(--color-blue)
}

.alot .skip.point {
    display: flex;
    flex-direction: column;
    row-gap: 6px
}

.skip.point>* {
    display: flex;
    align-items: center;
    column-gap: 5px;
}

.skip.point>*::before {
    content: "";
    display: flex;
    width: 3px;
    height: 3px;
    border-radius: 10px;
    background: #ccc
}

.skippoint {
    display: flex;
    align-items: center;
    column-gap: 5px;
    font-size: .8rem;
    color: #999
}

.skippoint::before {
    content: "";
    display: flex;
    width: 3px;
    height: 3px;
    border-radius: 10px;
    background: #ccc;
}

.line_or {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: .9rem;
    text-align: center;
    color: #ccc
}

.line_or::before {
    content: "";
    display: flex;
    width: 20%;
    border-bottom: 1px dashed #ddd
}

.line_or::after {
    content: "";
    display: flex;
    width: 20%;
    border-bottom: 1px dashed #ddd
}

/* INPUT */
.inputbox {
    border: 0;
    padding: 20px 10px;
    border-bottom: 1px solid #eee
}

.inputbox[type="password"] {
    color: #ddd
}

.inputbox.box {
    padding: 20px 10px;
    border: 1px solid #eee
}

/* 인풋박스 스타일 01 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.inputstyle_bottom_text {
    position: relative;
    display: flex;
    flex-direction: column;
    row-gap: 15px;
}

/* Output 레이아웃 */
.outputstyle_titleset {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}

.outputstyle_titleset .output {
    padding: 15px 20px;
    border: 1px solid #eee
}

.outputstyle_titleset .content {
    width: fit-content;
    font-weight: 700;
    padding: 5px 10px;
    border: 1px solid #333
}

/* 아웃풋 기본스타일 */
.outputstyle_horizontal {
    display: grid;
    grid-template-columns: minmax(90px, 100px) auto;
    column-gap: 10px;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.outputstyle_horizontal .title {
    font-weight: 700
}

.outputstyle_horizontal .output_point {
    color: #ff9813
}

/* 비밀번호 입력 아이콘 */
.showeyes {
    position: absolute;
    top: 20px;
    right: 50px;
    display: none
}

.showeyes::after {
    content: "";
    position: absolute;
    width: 28px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' data-name='Layer 1' version='1.1' viewBox='0 0 39 28'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23ddd;stroke-width:0%7D%3C/style%3E%3C/defs%3E%3Cpath d='m34.2 15.4-.5-.5 3.1-3.1c.7-.7.7-1.8 0-2.4-.7-.7-1.8-.7-2.4 0l-2.9 2.9-.1.1-.4.5-.6-.3c-2.6-1.5-5.5-2.5-8.6-2.8h-.7V4.9c0-.9-.8-1.7-1.7-1.7s-1.7.8-1.7 1.7v4.9H17c-3 .4-5.9 1.4-8.4 3l-.6.4-.4-.7c0-.1-.2-.2-.3-.3L4.4 9.3c-.7-.7-1.8-.7-2.4 0-.7.7-.7 1.8 0 2.4l3.4 3.4-.5.6c-1 1-2 2.2-2.8 3.5-.2.3-.3.7-.2 1.1 0 .4.3.7.7.9s.7.3 1.1.2c.4 0 .7-.3.9-.7 3.3-5.2 8.9-8.3 15-8.3s11.7 3.1 15 8.3c.2.3.5.6.9.7.4 0 .8 0 1.1-.2.3-.2.6-.5.7-.9 0-.4 0-.8-.2-1.1-.9-1.4-1.9-2.7-3.1-3.8Z' class='cls-1'/%3E%3Ccircle cx='19.7' cy='22.8' r='3' class='cls-1'/%3E%3C/svg%3E");
}

/* 체크박스 */
.check_box {
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    width: 14px;
    height: 14px;
    margin: 2px 5px 0 5px;
}

.check_box+label {
    vertical-align: middle;
    padding-right: 20px;
}

.check_box::before {
    content: "";
    display: flex;
    position: absolute;
    top: -4px;
    left: -4px;
    width: 18px;
    height: 18px;
    border: 1px solid var(--color-grayddd);
    border-radius: 50%;
    background-color: var(--color-grayddd);
}

.check_box::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 4px;
    display: flex;
    width: 2px;
    height: 7px;
    border: solid var(--color-white);
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.check_box:checked::after {
    background-color: var(--color-blue);
    transition: all .5s ease
}

.check_box:checked::before {
    border: 1px solid var(--color-blue);
    background-color: var(--color-blue);
    transition: all .5s ease
}
.subscript .tip {
    display: inline-block;
    font-size: 14px;
    color: #999;
    font-weight: 300;
    margin-top: 5px
}


/* 쿠폰 체크박스 */
.cuponbox .check_box {
    width: 24px;
    height: 24px;
}
.cuponbox .check_box::before {
    top: -4px;
    left: -4px;
    width: 28px;
    height: 28px;
    border: 1px solid #ddd;
    border-radius: 50%;
    background-color: #ddd;
}

.cuponbox .check_box::after {
    top: 2px;
    left: 7px;
    display: flex;
    width: 5px;
    height: 12px;
}

.cuponbox .check_box:checked::after {
    background-color: #5f57cf;
}

.cuponbox .check_box:checked::before {
    border: 1px solid #5f57cf;
    background-color: #5f57cf;
}

.cuponbox_wrapbox {
    width: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 20px
}
.cuponbox_wrapbox .promotion_title {
    padding: 10px;
    background: #ebebf7;
    justify-content: center;
    border-radius: 8px;
}
.cuponbox_price {
    display: flex;
    justify-content: space-between;
    align-items: center;   
}
.cuponbox_price > p:first-child {
    font-size: 20px;
    font-weight: 600; 
}


.article .check_box {
    width: 14px;
    height: 14px;
}
.article .check_box::before {
    top: -4px;
    left: -4px;
    width: 18px;
    height: 18px;
    border: 1px solid #ddd;
    border-radius: 50%;
    background-color: var(--color-grayddd);
}

.article .check_box::after {
    top: 1px;
    left: 4px;
    display: flex;
    width: 3px;
    height: 6px;
}

.article .check_box:checked::after {
    background-color: #5f57cf;
}

.article .check_box:checked::before {
    border: 1px solid #5f57cf;
    background-color: #5f57cf;
}





.cuponbox .check_box.small {
    width: 16px;
    height: 16px;
}
.cuponbox .check_box.small::before {
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    background-color: #ccc;
}

.cuponbox .check_box.small::after {
    top: 1px;
    left: 5px;
    width: 3px;
    height: 8px;
}

.cuponbox .check_box.small:checked::after {
    background-color: #5f57cf;
}

.cuponbox .check_box.small:checked::before {
    border: 1px solid #5f57cf;
    background-color: #5f57cf;
}






.agree_area .check_box {
    width: 14px;
    height: 14px;
}
.agree_area .check_box::before {
    top: -4px;
    left: -4px;
    width: 18px;
    height: 18px;
    border: 1px solid #ddd;
    border-radius: 0;
    background-color: #ddd;
}

.agree_area .check_box::after {
    top: 1px;
    left: 4px;
    display: flex;
    width: 3px;
    height: 6px;
}

.agree_area .check_box:checked::after {
    background-color: var(--color-blue);
}

.agree_area .check_box:checked::before {
    border: 1px solid var(--color-blue);
    background-color: var(--color-blue);
}






/* BUTTON */
.btn_close {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' id='Layer_1' x='0' y='0' style='enable-background:new 0 0 85 85' version='1.1' viewBox='0 0 85 85'%3E%3Cstyle%3E.st0%7Bfill:%23231f20%7D%3C/style%3E%3Cpath d='m46.7 50.3 22.9 22.9c.7.7 1.4.8 1.8.8s1.2-.1 1.8-.8c1-1 1-2.6 0-3.6L50.3 46.7l-.3.3-3.3 3.3zM45.6 42l27.6-27.6c1-1 1-2.6 0-3.6-.6-.6-1.3-.8-1.8-.8s-1.2.1-1.8.8L42 38.4 14.4 10.8c-.6-.6-1.3-.8-1.8-.8s-1.2.1-1.8.8c-1 1-1 2.6 0 3.6L38.4 42 10.8 69.6c-1 1-1 2.6 0 3.6.7.7 1.4.8 1.8.8s1.2-.1 1.8-.8L42 45.6l3.6-3.6z' class='st0'/%3E%3C/svg%3E")
}

.btn_blockbox {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 360px;
    height: 70px;
    margin: 0 auto;
    border-radius: 100px;
    font-weight: 500;
    color: var(--color-white) !important;
    background: var(--color-gray333);
}

.btn_blockbox.mt_auto {
    margin: calc(0.15 * 100%) auto 0 auto;
}

.btn_blockbox:hover {
    background: var(--color-blue);
    transition: all .5s ease;
}

.btn_texthome {
    position: relative;
    display: flex;
    justify-content: center;
    text-decoration: underline!important;
}

.btn_texthome:hover {
    color: var(--color-purple);
    transition: all .5s ease;
    font-weight: 500
}


.btn_linekbox {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 360px;
    height: 70px;
    border-radius: 100px;
    margin: 0 auto;
    white-space: nowrap;
    border: 2px solid #333;
    color: #333 !important;
    font-weight: 700
}

.btn_linekbox:hover {
    color: var(--color-blue) !important;
    border: 2px solid var(--color-blue);
    transition: all .5s ease;
}

.btn_Certified {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    padding: 0 20px;
    color: #333;
    border: 1px solid #333;
}

.btn_Certified:hover {
    color: var(--color-white) !important;
    background: var(--color-gray333);;
    transition: all .5s ease
}

.btn_Certified:hover button {
    color: var(--color-white) !important;
    transition: all .5s ease
}

.btn_change {
    display: flex;
    align-items: center;
    column-gap: 5px;
}

.btn_change::before {
    content: "";
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' data-name='Layer 1' version='1.1' viewBox='0 0 92 95'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23ccc;stroke-width:0%7D%3C/style%3E%3C/defs%3E%3Cpath d='M88.7 15.6 67.2 1.8c-1.6-1-3.6-1.1-5.3-.2-1.7.9-2.6 2.6-2.6 4.5v8.1H30.4C15.1 14.2 2.7 26.7 2.7 42v6.5c0 3.1 2.5 5.7 5.7 5.7s5.7-2.5 5.7-5.7V42c0-9.1 7.4-16.6 16.5-16.6h28.9v8.3c0 1.9 1 3.6 2.6 4.5.8.4 1.7.6 2.4.6s2-.3 2.7-.8l21.5-13.8c1.5-1 2.3-2.5 2.3-4.3s-.9-3.4-2.3-4.4ZM83.8 40.8c-3.1 0-5.7 2.5-5.7 5.7V53c0 9.1-7.4 16.6-16.5 16.6H32.7v-8.2c0-1.9-1-3.6-2.6-4.5-1.7-.9-3.6-.9-5.3.2L3.3 70.9c-1.5 1-2.3 2.5-2.3 4.3s.9 3.4 2.3 4.3l21.5 13.8c.9.6 1.8.8 2.7.8s1.7-.2 2.4-.6c1.7-.9 2.6-2.6 2.6-4.5v-8.1h29c15.3 0 27.7-12.5 27.7-27.8v-6.5c0-3.1-2.5-5.7-5.6-5.7Z' class='cls-1'/%3E%3C/svg%3E");
}

.btn_Withdrawal {
    position: relative;
    display: flex;
    justify-content: end;
    font-weight: 700;
}

.btn_Withdrawal::after {
    content: "";
    position: absolute;
    bottom: -7px;
    right: 0;
    width: 55px;
    height: 2px;
    background: var(--color-gray333);;
}

.btn_Withdrawal:hover {
    color: var(--color-blue);
    transition: all .5s ease
}

.btn_Withdrawal:hover::after {
    background: var(--color-blue);
    transition: all .5s ease
}

.btn_enlogo {
    position: relative;
    display: flex;
    justify-content: center;
    font-size: 0;
    /* width: 172px; */
    height: 39px;
    margin: 0 auto;
}

.btn_enlogo img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* .btn_enlogo::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 172px;
    height: 39px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' data-name='Layer 1' version='1.1' viewBox='0 0 266.8 61'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23507CA0;stroke-width:0%7D%3C/style%3E%3C/defs%3E%3Cpath d='M188.7 7.3h-9.2v40.4c0 3.4 3.1 6.1 8.9 6.1H217v-6.3h-28.3V7.3ZM160.1 7.3h9.2v46.5h-9.2zM246.9 7.3 234 27.8 221 7.3h-11.2l19.7 28.8v17.6h9.4V36.3l19.3-29h-11.3zM99.7 27v-3.8c0-1.7-.6-5.7-3.4-9.2-2.8-3.5-8-6.7-17.4-6.7H54.7v46.5h24.2c9.5 0 14.6-3.3 17.4-6.7 2.8-3.5 3.3-7.4 3.4-9.2V27.1Zm-9.1 6v2.8c0 1.3-.3 4.1-2 6.7-1.7 2.5-4.7 4.9-10.4 4.9H63.8V13.6h14.4c5.6 0 8.7 2.4 10.4 4.9 1.7 2.5 2 5.4 2 6.7V33ZM9 13.4v34.2c0 3.4 3.1 6.1 8.9 6.1h28.6v-6.3H18.2V33.5h28.3v-5.8H18.2V13.6h28.3V7.3H9v6.1ZM121 7.3l-18.8 46.5h9.6l4.8-12.2h21.6l4.7 12.2h9.9L133.9 7.3H121Zm-2.1 28.4 7.2-18.5h2.6l7.2 18.5h-17.1Z' class='cls-1'/%3E%3C/svg%3E");
} */

.sns_buttons {
    display: flex;
    column-gap: 40px;
}

.sns_buttons>* {
    width: 62px;
    height: 62px;
}

.sns_buttons a {
    position: relative;
    top: -7px;
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: 100px;
}

.icon {
    position: relative;
    font-size: 0;
    display: inline-block;
}

.icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.icon:hover::after {
    transition: all .5s ease;
}

.naver {
    background: #2db34a
}

.naver:hover {
    border: 1px solid #eee;
    background: var(--color-white)
}

.naver::after {
    width: 18px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-name='<Layer>' viewBox='0 0 32 29'%3E%3Cpath d='M20.8 1v13.6L11.3 1H1v27h10.2V14.4L20.7 28H31V1H20.8z' style='fill:%23fff;stroke-width:0'/%3E%3C/svg%3E");
}

.naver:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-name='<Layer>' viewBox='0 0 32 29'%3E%3Cpath d='M20.8 1v13.6L11.3 1H1v27h10.2V14.4L20.7 28H31V1H20.8z' style='fill:%232db34a;stroke-width:0'/%3E%3C/svg%3E");
}

.kakao {
    background: #f3d710
}

.kakao:hover {
    background: #381e1f
}

.kakao::after {
    width: 22px;
    height: 23px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-name='<Layer>' viewBox='0 0 32 34'%3E%3Cpath d='M16 1C7.7 1 1 7.3 1 15s2.4 8.4 5.6 10.9v6.7c0 .3.4.5.6.3l5.7-4.3h.1c1 .2 1.9.3 2.9.3 8.3 0 15-6.3 15-14S24.3 1 16 1' style='fill:%23381e1f;stroke-width:0'/%3E%3C/svg%3E");
}

.kakao:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-name='<Layer>' viewBox='0 0 32 34'%3E%3Cpath d='M16 1C7.7 1 1 7.3 1 15s2.4 8.4 5.6 10.9v6.7c0 .3.4.5.6.3l5.7-4.3h.1c1 .2 1.9.3 2.9.3 8.3 0 15-6.3 15-14S24.3 1 16 1' style='fill:%23f3d710;stroke-width:0'/%3E%3C/svg%3E");
}

.google {
    border: 1px solid #eee;
}

.google:hover {
    background: #eee
}

.google::after {
    width: 22px;
    height: 23px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-name='<Layer>' viewBox='0 0 32 33'%3E%3Cpath d='M11.3 1.8C7.6 3.1 4.4 5.9 2.6 9.5 2 10.7 1.5 12 1.3 13.4c-.7 3.4-.2 7 1.3 10 1 2 2.4 3.8 4.2 5.2 1.6 1.3 3.5 2.3 5.6 2.8 2.5.7 5.3.7 7.8 0 2.3-.5 4.5-1.7 6.3-3.3 1.9-1.7 3.2-4 3.9-6.4.8-2.7.9-5.5.4-8.2H16.4v6.1h8.3c-.3 1.9-1.5 3.7-3.1 4.8-1 .7-2.2 1.1-3.4 1.3-1.2.2-2.5.2-3.7 0-1.2-.2-2.4-.8-3.4-1.5-1.6-1.2-2.9-2.9-3.5-4.8-.6-1.9-.7-4.1 0-6 .5-1.4 1.2-2.6 2.2-3.7 1.2-1.3 2.8-2.2 4.6-2.6 1.5-.3 3-.3 4.5.2 1.2.4 2.4 1.1 3.3 2L25 6.5 26.5 5c-1.4-1.3-3.1-2.4-4.9-3.1-3.3-1.2-7-1.3-10.3-.1' style='fill:%23f9bc15;stroke-width:0'/%3E%3Cpath d='M11.3 1.8c3.3-1.2 7-1.1 10.3 0 1.8.7 3.5 1.7 4.9 3.1L25 6.4c-.9 1-1.9 1.9-2.8 2.9-.9-.9-2.1-1.6-3.3-2-1.4-.4-3-.5-4.5-.2-1.7.4-3.3 1.3-4.6 2.6-1 1-1.8 2.3-2.2 3.7-1.7-1.3-3.3-2.6-5-3.9 1.8-3.6 4.9-6.4 8.7-7.7' style='fill:%23ea4535;stroke-width:0'/%3E%3Cpath d='M16.3 13.6h14.4c.5 2.7.4 5.6-.4 8.2-.7 2.4-2 4.7-3.9 6.4-1.6-1.3-3.2-2.5-4.9-3.8 1.6-1.1 2.7-2.9 3.1-4.8h-8.3v-6' style='stroke-width:0;fill:%23557ebf'/%3E%3Cpath d='M2.6 23.5c1.7-1.3 3.3-2.6 5-3.9.6 1.9 1.9 3.6 3.5 4.8 1 .7 2.2 1.2 3.4 1.5 1.2.2 2.4.2 3.7 0 1.2-.2 2.4-.7 3.4-1.3l4.9 3.8c-1.8 1.6-3.9 2.8-6.3 3.3-2.6.6-5.3.6-7.8 0-2-.5-3.9-1.5-5.6-2.8-1.7-1.4-3.1-3.2-4.1-5.2' style='fill:%2336a852;stroke-width:0'/%3E%3C/svg%3E");
}

.email {
    background: var(--color-gray333);
}

.email:hover {
    border: 1px solid #eee;
    background: var(--color-white);
}
.modalpopup.email:hover{
    border:0;
    
}

.email::after {
    width: 22px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-name='Layer 1' viewBox='0 0 82 65'%3E%3Cpath d='M57.4 26.2 80 5.6c.7 1.2 1 2.6 1 4v45.8c0 1.6-.4 3.1-1.3 4.4L57.4 26.2Zm-17.9 5.9c1 .6 2.3.5 3.2-.2L75.8 1.7c-1.1-.4-2.2-.7-3.3-.7H9.6c-1.1 0-2.3.2-3.3.7l33.2 30.4ZM2 5.6c-.7 1.2-1 2.6-1 4v45.8c0 1.6.4 3.1 1.3 4.4l22.3-33.6L2 5.6Zm51.1 24.5-6.8 6.2c-1.6 1.2-3.5 1.9-5.4 1.9-1.8 0-3.6-.6-5.1-1.7l-7-6.4L6.7 63.5c.9.3 1.9.5 2.9.5h62.9c1 0 2-.2 2.9-.5L53.2 30.2Z' style='fill:%23fff;stroke-width:0'/%3E%3C/svg%3E");
}

.email:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-name='Layer 1' viewBox='0 0 92 68'%3E%3Cpath d='M15.8 62.8h60.4c2.9 0 5.6-1.2 7.5-3.1s3.1-4.6 3.1-7.5V15.9c0-2.9-1.2-5.6-3.1-7.5-1.9-1.9-4.6-3.1-7.5-3.1H15.8c-2.9 0-5.6 1.2-7.5 3.1-1.9 1.9-3.1 4.6-3.1 7.5V52c0 2.9 1.2 5.6 3.1 7.5 1.9 1.9 4.6 3.1 7.5 3.1Zm-.4-6.3c-.8.8-2.1.8-3 0-.8-.8-.8-2.2 0-3l20.9-21.4-20.7-17.5c-.9-.8-1-2.1-.3-3 .7-.9 2.1-1 3-.3L46 37.2l30.7-25.9c.9-.8 2.2-.6 3 .3.7.9.6 2.2-.3 3L58.7 32.1l20.9 21.4c.8.8.8 2.2 0 3-.8.8-2.2.8-3 0L55.5 34.8l-8.1 6.8c-.8.7-1.9.7-2.7 0l-8.1-6.8-21.1 21.7ZM76.2 67H15.8c-4.1 0-7.8-1.7-10.5-4.4S.9 56.2.9 52.1V15.9c0-4.1 1.7-7.8 4.4-10.5S11.7 1 15.8 1h60.4c4.1 0 7.8 1.7 10.5 4.4s4.4 6.4 4.4 10.5V52c0 4.1-1.7 7.8-4.4 10.5s-6.4 4.4-10.5 4.4Z' style='fill:%2333;stroke-width:0'/%3E%3C/svg%3E");
}

.edaily {
    width: 69px;
    height: 60px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' data-name='Layer 1' version='1.1' viewBox='0 0 52 45'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23333;stroke-width:0%7D%3C/style%3E%3C/defs%3E%3Cpath d='M45.6 1H9.9c-3 0-5.4 2.4-5.4 5.4v10.8H2.7c-1 0-1.8.8-1.8 1.8s.8 1.8 1.8 1.8h10.7c1 0 1.8-.8 1.8-1.8s-.8-1.8-1.8-1.8H8V6.4l14.3 10.8c3.2 2.4 7.5 2.4 10.7 0L47.3 6.4v32.3c0 1-.8 1.8-1.8 1.8H9.9c-1 0-1.8-.8-1.8-1.8v-3.6h10.7c1 0 1.8-.8 1.8-1.8s-.8-1.8-1.8-1.8h-16c-1 0-1.8.8-1.8 1.8s.8 1.8 1.8 1.8h1.8v3.6c0 3 2.4 5.4 5.4 5.4h35.7c3 0 5.4-2.4 5.4-5.4V6.4c0-3-2.4-5.4-5.4-5.4ZM31 14.3c-1.9 1.4-4.5 1.4-6.4 0L11.7 4.6h32.1l-12.9 9.7Z' class='cls-1'/%3E%3Cpath d='M2.8 27.9h25c1 0 1.8-.8 1.8-1.8s-.8-1.8-1.8-1.8h-25c-1 0-1.8.8-1.8 1.8s.8 1.8 1.8 1.8Z' class='cls-1'/%3E%3C/svg%3E");
    animation: slide 2.5s infinite;
}

.sendmail {
    width: 69px;
    height: 60px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' data-name='Layer 1' version='1.1' viewBox='0 0 52 45'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23333;stroke-width:0%7D%3C/style%3E%3C/defs%3E%3Cpath d='M45.6 1H9.9c-3 0-5.4 2.4-5.4 5.4v10.8H2.7c-1 0-1.8.8-1.8 1.8s.8 1.8 1.8 1.8h10.7c1 0 1.8-.8 1.8-1.8s-.8-1.8-1.8-1.8H8V6.4l14.3 10.8c3.2 2.4 7.5 2.4 10.7 0L47.3 6.4v32.3c0 1-.8 1.8-1.8 1.8H9.9c-1 0-1.8-.8-1.8-1.8v-3.6h10.7c1 0 1.8-.8 1.8-1.8s-.8-1.8-1.8-1.8h-16c-1 0-1.8.8-1.8 1.8s.8 1.8 1.8 1.8h1.8v3.6c0 3 2.4 5.4 5.4 5.4h35.7c3 0 5.4-2.4 5.4-5.4V6.4c0-3-2.4-5.4-5.4-5.4ZM31 14.3c-1.9 1.4-4.5 1.4-6.4 0L11.7 4.6h32.1l-12.9 9.7Z' class='cls-1'/%3E%3Cpath d='M2.8 27.9h25c1 0 1.8-.8 1.8-1.8s-.8-1.8-1.8-1.8h-25c-1 0-1.8.8-1.8 1.8s.8 1.8 1.8 1.8Z' class='cls-1'/%3E%3C/svg%3E");
    animation: slide 2.5s infinite;
}

@keyframes slide {
    30% {
        left: 0;
        opacity: 1;
    }

    80% {
        left: calc(100% - 65%);
        opacity: 0;
    }
}

.principle {
    width: 60px;
    height: 60px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' data-name='Layer 1' version='1.1' viewBox='0 0 22 22'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23507CA0;stroke-width:0%7D%3C/style%3E%3C/defs%3E%3Cpath d='m20.3 4.1-9-3h-.6l-9 3c-.4.1-.7.5-.7.9v3.8c0 5.9 4.1 11 9.8 12.2h.4c5.7-1.2 9.8-6.3 9.8-12.2V5c0-.4-.3-.8-.7-.9ZM19 8.8c0 4.9-3.3 9.1-8 10.2-4.7-1.1-8-5.4-8-10.2V5.7L11 3l8 2.7v3.1Z' class='cls-1'/%3E%3Cpath d='M7 11c0 .6.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1H8c-.6 0-1 .4-1 1Z' class='cls-1'/%3E%3C/svg%3E");
    animation: blink 4s infinite;
}

@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.blink {
    font-size: 2em;
    text-align: center;
    margin-top: 20%;
    animation: blink 3s infinite;
}

.ico_goright {
    display: flex;
    align-items: center;
    column-gap: 6px;
    color: #999!important;
}
.ico_goright:hover {
    color: #333!important
}

.ico_goright::after {
    content: "";
    display: flex;
    width: 6px;
    height: 11px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-name='레이어 1' viewBox='0 0 285 505'%3E%3Cpath d='M274.8 275.1 54.7 494.9c-12.8 12.1-32.5 12.1-44.5 0s-12.1-31.6 0-44.4l198.4-198-198.5-198C-2 42.4-2 22 10.1 10.1 22.2-2 41.8-2 54.6 10.1L275 230.7c12.1 12.1 12.1 31.6 0 44.4Z' style='fill:%23999;stroke-width:0'/%3E%3C/svg%3E");
}
.ico_goright:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-name='레이어 1' viewBox='0 0 285 505'%3E%3Cpath d='M274.8 275.1 54.7 494.9c-12.8 12.1-32.5 12.1-44.5 0s-12.1-31.6 0-44.4l198.4-198-198.5-198C-2 42.4-2 22 10.1 10.1 22.2-2 41.8-2 54.6 10.1L275 230.7c12.1 12.1 12.1 31.6 0 44.4Z' style='fill:%23333;stroke-width:0'/%3E%3C/svg%3E");
}

/* 얼랏창 */
.modal_alt {
    display: none
}
.modal_alt.show {
    display: flex;
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}
.card {
    min-width: 320px;
    padding: 1.7rem;
    background: var(--color-white);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
    border: 1px solid var(--color-grayddd);
    border-radius: 1rem;
}
.card .title {
    font-size: 1.1rem;
    font-weight: 500;
}

.card .subtitle {
    font-size: .9rem;
}

.boxbtntwins {
    display: flex;
    gap: 10px;
} 

.boxbtntwins * {
    flex-grow: 1;
}

.btn_calcle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    color: var(--color-white) !important;
    background: var(--color-gray999);
}

.btn_certify {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    color: var(--color-white) !important;
    background: var(--color-gray333)
}
.telegram_phone {
    border: 1px solid var(--color-gray333);
    height: 40px;
    width: 100%;
    padding: .5rem
}


/* 토글스위치 */
.btn_switch {
    position: relative;
    display: inline-block;
    width: 54px;
    height: 28px;
}

.btn_switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch_slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ddd;
    transition: .4s;
}

.switch_slider:before {
    position: absolute;
    content: "";
    width: 22px;
    height: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
}

input:checked+.switch_slider {
    background-color: var(--color-blue);
}

input:checked+.switch_slider:before {
    transform: translateX(26px);
}

.switch_slider.round {
    border-radius: 34px;
}

.switch_slider.round:before {
    border-radius: 50%;
}

/* 가운데 구분선 리스트 */
.selcet_list {
    display: flex;
    margin-top: 3.5%
}

.selcet_list>* {
    display: flex;
    column-gap: 15px;
    margin-right: 15px;
    align-items: center;
}

.selcet_list a:hover {
    font-weight: 600;
    transition: all .5s ease
}

.selcet_list>*:last-child {
    margin-right: 0;
}

.selcet_list>*::after {
    content: "";
    display: flex;
    width: 1px;
    height: 12px;
    background: #ddd
}

.selcet_list>*:last-child::after {
    display: none
}

/*-------------------------------------------------------------------
                                LOGIN
-------------------------------------------------------------------*/
.login_area {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    align-items: center;
}

.login_area .inputbox {
    width: 100%;
    height: 60px;
    border: 2px solid #333;
    border-radius: 100px;
    text-indent: 20px;
    font-size: 1.1rem;
    font-weight: 600
}

.login_area .inputstyle_bottom_text,
.login_buttons .btn_blockbox {
    width: 100%;
    max-width: 360px;
}

.login_area > .inputstyle_bottom_text > .checkboxstyle {
    padding: 0 20px;
}

.login_buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: calc(0.06 * 100%)
}

.sns_joins {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: calc(0.1 * 100%);
    border-top: 1px solid #eee;
}

.sns_joins .s_title {
    font-size: 1.3rem;
    font-weight: 700;
}

.auth_prompt {
    display: flex;
    justify-content: space-between;
    border-top: 2px solid #333;
    margin-top: calc(0.25 * 100%);
    padding: 15px 20px 0 20px;
}

/*-------------------------------------------------------------------
                                이메일 회원가입
-------------------------------------------------------------------*/
.authenticating {
    display: flex;
    column-gap: 20px;
    width: 100%;
    align-items: end;
}

.authenticating .inputbox {
    width: 100%;
}

.authenticating .text {
    width: 100%;
    padding: 20px 10px;
    border-bottom: 1px solid #eee;
}

/* 인증 후 */
.authenticating.after {
    display: flex;
    justify-content: space-between;
    /* flex-wrap: wrap;
    padding: 20px 10px;
    border-bottom: 1px solid #eee; */
}

.authenticating.after .ok,
.authenticating.after .no {
    display: flex;
    column-gap: 5px;
    align-items: center;
}

.authenticating.after .ok::before {
    content: "";
    min-width: 20px;
    margin-top: 2px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-name='Layer 1' viewBox='0 0 18 14'%3E%3Cpath d='M16.5 1.5c-.7-.7-1.7-.7-2.4 0L6.6 9 3.9 6.3c-.7-.7-1.7-.7-2.4 0-.3.3-.5.7-.5 1.2s.2.9.5 1.2l3.9 3.9c.3.3.8.5 1.2.5.5 0 .9-.2 1.2-.5l8.7-8.7c.7-.7.7-1.7 0-2.4Z' style='fill:%232663ae;stroke-width:0'/%3E%3C/svg%3E");
}

.authenticating.after .ok::after {
    content: "인증";
    font-weight: 700;
    color: #2663ae
}

.authenticating.after .no::before {
    content: "";
    min-width: 19px;
    height: 19px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' data-name='Layer 1' version='1.1' viewBox='0 0 22 22'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23e60012;stroke-width:0%7D%3C/style%3E%3C/defs%3E%3Cpath d='m20.3 4.1-9-3h-.6l-9 3c-.4.1-.7.5-.7.9v3.8c0 5.9 4.1 11 9.8 12.2h.4c5.7-1.2 9.8-6.3 9.8-12.2V5c0-.4-.3-.8-.7-.9ZM19 8.8c0 4.9-3.3 9.1-8 10.2-4.7-1.1-8-5.4-8-10.2V5.7L11 3l8 2.7v3.1Z' class='cls-1'/%3E%3Cpath d='M7 11c0 .6.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1H8c-.6 0-1 .4-1 1Z' class='cls-1'/%3E%3C/svg%3E");
}

.authenticating.after .no::after {
    content: "실패";
    font-weight: 700;
    color: var(--color-red)
}

.agree_area {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 20px;
    margin-top: 40px;
    padding-left: 5px;
}

.agree_viewdetail {
    display: flex;
    justify-content: space-between;
}

.agree_viewdetail .detailview {
    color: #999;
    font-size: .9rem;
    border-bottom: 1px solid #ddd
}

.agree_viewdetail .detailview:hover {
    color: #333;
    border-bottom: 1px solid #333;
    transition: all .5s ease
}

/* 내용보기 팝업 */
.promotion .btn_close {
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px
}

.modalpopup {
    display: none
}

.modalpopup.on {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .7);
    z-index: 10;
}

.popupbox {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 640px;
    height: 85%;
    padding: 50px 30px 30px;
    border-radius: 20px;
    background: var(--color-white);
}

.disagreement .popupbox {
    height: auto;
}

.promotion .popupbox,
.third .popupbox {
    height: auto;
    padding: 50px 30px 30px;
    border-radius: 20px;
    background: var(--color-white);
}

.popupbox h3 {
    text-align: center;
    font-size: 1.8rem;
    line-height: 2rem;
    font-weight: 900
}

.popupbox .memo {
    overflow-y: scroll;
    height: calc(100% - 70px);
    margin-top: 20px;
    padding: 30px;
    font-size: .9rem;
    line-height: 1.6rem;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border: 1px solid #eee
}

.popupbox .memo>p {
    font-size: .9rem
}

/* 변경이메일주소로 로그인 모달 */
.change_membership {
    display:flex;
    flex-direction: column;
    row-gap:10px;
    padding:20px;
    border-radius: 10px;
    background:#f5f5f5;
}
.change_membership dl {
    display: flex;
    width:100%;
    column-gap:10px
}
.change_membership dl dt {
    flex:0 0 120px;
    font-weight: 600
}
.change_membership dl dd {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    width: calc(100% - 120px)
}
.text_linecross {
    position: relative;
    display:inline-block
}
.text_linecross::after {
    content:"";
    position: absolute;
    top:50%;
    left:0;
    width: 100%;
    height:1px;
    background:#333
}

/***** 모달팝업 *****/
/* 이메일 인증 */
.modalpopup.email .popupbox {
    height: unset;
    /* overflow-y:scroll */
}

.modalpopup.email .btn_enlogo {
    margin-top: calc(0.15 * 100%) !important
}

.twins_btnssrea {
    display: flex;
    column-gap: 20px;
}

.twins_btnssrea>* {
    width: 100%;
}

/*-------------------------------------------------------------------
                                마이페이지
-------------------------------------------------------------------*/
.mypage_baseinfo {
    display: flex;
    flex-direction: column;
    row-gap: 20px
}

.mypage_baseinfo.emptyClass {
    flex-direction: column;
    align-items: center;
    row-gap: 10px
}
.mypage_baseinfo.emptyClass::before {
    content: "";
    display: flex;
    width: 45px;
    height: 39px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-name='Layer 1' viewBox='0 0 54 47'%3E%3Cpath d='M27 1.8c-1.5 0-2.9.8-3.7 2.1L2.6 38.8c-.8 1.3-.8 2.9 0 4.2.8 1.3 2.2 2.1 3.7 2.1h41.5c1.5 0 2.9-.8 3.7-2.1.8-1.3.8-2.9 0-4.2L30.7 3.9c-.8-1.3-2.2-2.1-3.7-2.1Zm0 3.4c.3 0 .7.2.8.4l20.7 34.9c.1.2.1.6 0 .8s-.5.5-.8.5H6.3c-.3 0-.7-.2-.8-.5-.1-.2-.1-.6 0-.8L26.2 5.6c.1-.2.5-.4.8-.4Zm0 10.5c-1.6 0-2.9 1.3-2.9 2.9l.5 9.6c0 1.3 1.1 2.4 2.4 2.4s2.4-1.1 2.4-2.4l.5-9.6c0-1.6-1.3-2.9-2.9-2.9ZM27 32c-1.6 0-2.9 1.3-2.9 2.9s1.3 2.9 2.9 2.9 2.9-1.3 2.9-2.9S28.6 32 27 32Z' style='fill:%23507CA0;stroke-width:0'/%3E%3C/svg%3E");
}

.mypage_sociallogin .interworking {
    margin-top: 10px;
}

.mypage_sociallogin .interworking:nth-of-type(1) {
    margin-top: 30px;
}

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

.interworking>label {
    display: flex;
    align-items: center;
    column-gap: 10px;
    font-weight: 700
}

.interworking>label:hover {
    cursor: pointer;
}

.interworking.completion>label {
    display: grid;
}

.interworking.completion>label>.date {
    grid-column: span 2 / span 2;
    margin-left: 40px;
    font-size: .8rem;
    color: #999
}

.interworking.pointgraybox .btn_linekbox {
    margin: unset
}

.interworking .icon {
    width: 30px;
    height: 30px;
    border-radius: 100%;
}

.interworking .naver::after {
    width: 10px;
    height: 9px;
}

.interworking .naver:hover {
    border: 1px solid #2db34a;
    background: #2db34a
}

.interworking .naver:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-name='<Layer>' viewBox='0 0 32 29'%3E%3Cpath d='M20.8 1v13.6L11.3 1H1v27h10.2V14.4L20.7 28H31V1H20.8z' style='fill:%23fff;stroke-width:0'/%3E%3C/svg%3E");
}

.interworking .kakao::after {
    width: 12px;
    height: 13px;
}

.interworking .kakao:hover {
    background: #f3d710
}

.interworking .kakao:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-name='<Layer>' viewBox='0 0 32 34'%3E%3Cpath d='M16 1C7.7 1 1 7.3 1 15s2.4 8.4 5.6 10.9v6.7c0 .3.4.5.6.3l5.7-4.3h.1c1 .2 1.9.3 2.9.3 8.3 0 15-6.3 15-14S24.3 1 16 1' style='fill:%23381e1f;stroke-width:0'/%3E%3C/svg%3E");
}

.interworking .google::after {
    width: 16px;
    height: 16px;
}

.interworking .google:hover {
    background: var(--color-white);
}

.interworking .email::after {
    width: 14px;
    height: 12px;
}

.interworking .email:hover {
    background: var(--color-gray333);
    border: 1px solid #333;
}

.interworking .email:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-name='Layer 1' viewBox='0 0 92 68'%3E%3Cpath d='M15.8 62.8h60.4c2.9 0 5.6-1.2 7.5-3.1s3.1-4.6 3.1-7.5V15.9c0-2.9-1.2-5.6-3.1-7.5-1.9-1.9-4.6-3.1-7.5-3.1H15.8c-2.9 0-5.6 1.2-7.5 3.1-1.9 1.9-3.1 4.6-3.1 7.5V52c0 2.9 1.2 5.6 3.1 7.5 1.9 1.9 4.6 3.1 7.5 3.1Zm-.4-6.3c-.8.8-2.1.8-3 0-.8-.8-.8-2.2 0-3l20.9-21.4-20.7-17.5c-.9-.8-1-2.1-.3-3 .7-.9 2.1-1 3-.3L46 37.2l30.7-25.9c.9-.8 2.2-.6 3 .3.7.9.6 2.2-.3 3L58.7 32.1l20.9 21.4c.8.8.8 2.2 0 3-.8.8-2.2.8-3 0L55.5 34.8l-8.1 6.8c-.8.7-1.9.7-2.7 0l-8.1-6.8-21.1 21.7ZM76.2 67H15.8c-4.1 0-7.8-1.7-10.5-4.4S.9 56.2.9 52.1V15.9c0-4.1 1.7-7.8 4.4-10.5S11.7 1 15.8 1h60.4c4.1 0 7.8 1.7 10.5 4.4s4.4 6.4 4.4 10.5V52c0 4.1-1.7 7.8-4.4 10.5s-6.4 4.4-10.5 4.4Z' style='fill:%23fff;stroke-width:0'/%3E%3C/svg%3E");
}

.interworking .authenticating {
    background: var(--color-blue);
}

.interworking .authenticating::after {
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' data-name='Layer 1' version='1.1' viewBox='0 0 22 22'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;stroke-width:0%7D%3C/style%3E%3C/defs%3E%3Cpath d='m20.3 4.1-9-3h-.6l-9 3c-.4.1-.7.5-.7.9v3.8c0 5.9 4.1 11 9.8 12.2h.4c5.7-1.2 9.8-6.3 9.8-12.2V5c0-.4-.3-.8-.7-.9ZM19 8.8c0 4.9-3.3 9.1-8 10.2-4.7-1.1-8-5.4-8-10.2V5.7L11 3l8 2.7v3.1Z' class='cls-1'/%3E%3Cpath d='M7 11c0 .6.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1H8c-.6 0-1 .4-1 1Z' class='cls-1'/%3E%3C/svg%3E");
}

.interworking.completion .authenticating::after {
    width: 19px;
    height: 11px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' data-name='Layer 1' version='1.1' viewBox='0 0 52 30'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;stroke-width:0%7D%3C/style%3E%3C/defs%3E%3Cpath d='M50.3 1.7c-1-1-2.6-1-3.5 0L24.3 24.6c-1 1-1 2.6 0 3.6s2.6 1 3.5 0L50.3 5.3c1-1 1-2.6 0-3.6ZM37.8 1.7c-1-1-2.6-1-3.5 0L13.5 22.9l-8.2-8.4c-1-1-2.6-1-3.5 0s-1 2.6 0 3.6l8.2 8.4c2 2 5.1 2 7.1 0L37.8 5.3c1-1 1-2.6 0-3.6Z' class='cls-1'/%3E%3C/svg%3E");
}

.interworking .btn_linekbox {
    height: 36px;
    padding: 0 20px;
    border-radius: 100px;
    color: #999 !important;
    border: 1px solid #ccc;
}

.interworking .btn_linekbox.on {
    color: #333 !important;
    border: 1px solid #333;
}

/* 해제 연동 번튼 */
.interworking .btn_linekbox_clear {
    position: relative;
    width: 70px;
    height: 34px;
    border: 0;
}

.interworking .btn_linekbox_clear::after {
    content: "해제";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50px;
    font-size: .9rem;
    color: #999 !important;
    border: 1px solid #ccc;
    background: #f8f8f8
}

.interworking .btn_linekbox_clear.on::after {
    content: "연동";
    color: #333 !important;
    border: 1px solid #333;
    background: var(--color-white);
    transition: all .5s ease
}

.interworking .btn_linekbox:hover,
.interworking .btn_linekbox_clear:hover {
    opacity: .5;
    transition: all .5s ease
}

.interworking .btn_linekbox.on:hover,
.interworking .btn_linekbox_clear.on:hover {
    opacity: 1;
    transition: all .5s ease
}

.login_email>div {
    margin-top: 30px;
}

.interworking .promotion_intro {
    display: flex;
    flex-direction: column;
    row-gap: 5px
}

.interworking .promotion_intro>label {
    font-weight: 700
}

.textunderlinelink {
    color: #999 !important;
    padding-bottom: 3px;
    font-size: .9rem;
    border-bottom: 1px solid #ddd
}

.textunderlinelink:hover {
    color: #333 !important;
    border-bottom: 1px solid #333;
    transition: all .55s ease
}

/* 이메일 발송 */
.mentarea {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 20px;
}

.mentarea .sendment {
    text-align: center
}

.mentarea .sendment>b {
    font-weight: 900;
}

.check_joinway {
    display: flex;
    justify-content: center;
    column-gap: 20px;
}
/* .checkment {
    position: absolute;
    top: -26px;
    left: 70px;
    display: flex;
    align-items: center;
    column-gap: 5px;
    color: var(--color-white) !important;
    font-size: 13px !important;
    padding: 3px 8px;
    border-radius: 5px;
    background: var(--color-red);
}
.checkment::before {
    content: "";
    position: absolute;
    bottom: -9px;
    left: -5px;
    width: 0;
    height: 0;
    border-bottom: 6px solid transparent;
    border-top: 9px solid var(--color-red);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    transform: rotate(39deg);
} */
.checkment {
    color: var(--color-red)!important
}
.tellagram_certified .titles_wrap {
    /* align-items: flex-end; */
}
.tellagram_certified .inputbox.blinking {
    width: 130px;    
}
.tellagram_certified .inputstyle_bottom_text {
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* 가입여부확인 */
.multiple_position {
    display: flex;
    align-items: center;
    column-gap: 10px;
}

.multiple_position.small {
    width: 50%;
    margin-left: auto;
    margin-top: calc(0.06 * 100%) !important
}

.multiple_position.small .btn_linekbox,
.multiple_position.small .btn_blockbox {
    max-width: unset;
    height: 50px;
}

.multiple_position>* {
    width: 100%
}

.modalpopup .multiple_position>* {
    width: 100%;
}

.modalpopup .mentarea {
    row-gap: 40px;
}

.agree_allok.line {
    padding-bottom: 30px;
    border-bottom: 1px solid #eee
}

.agree_allok .check_box {
    margin: 2px 10px 0 5px;
}

.agree_allok .check_box::before {
    top: -9px;
    left: -5px;
}

.agree_allok .check_box::after {
    top: -3px;
}

.agree_allok .check_box+label {
    font-size: 1.1rem;
    font-weight: 700
}

.agree_allok .check_box::before {
    width: 22px;
    height: 22px;
}

.agree_allok .check_box::after {
    width: 4px;
    height: 9px;
}

.agree_area.base .checkboxstyle {
    display: grid;
    grid-template-columns: 22px auto;
    column-gap: 10px;
}

.agree_area.base .checkboxstyle>input {
    top: 2px;
}


/*-------------------------------------------------------------------
                                구독
-------------------------------------------------------------------*/
/* 마이페이지 */
.subscript_mypage_wrap {
    position: relative
}

.subscript_mypage_button {
    display: flex;
    align-items: center;
    column-gap: 10px;
}
.subscript_mypage_button > svg {
    width: 22px;
    height: 24px;
}

.subscript_mypage_button::after {
    content: "";
    display: flex;
    width: 14px;
    height: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-name='레이어 1' viewBox='0 0 506 285'%3E%3Cpath d='M230.4 274.9 10.1 54.7C-2 41.9-2 22.2 10.1 10.2s31.7-12.1 44.5 0L253 208.6 451.4 10.1c12.1-12.1 32.5-12.1 44.5 0 12.1 12.1 12.1 31.7 0 44.5L274.9 275c-12.1 12.1-31.7 12.1-44.5 0Z' style='fill:%237b73f3;stroke-width:0'/%3E%3C/svg%3E");
    transition: all .3s ease;
}

.subscript_mypage_button.on::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-name='레이어 1' viewBox='0 0 506 285'%3E%3Cpath d='M230.4 10.1 10.1 230.3c-12.1 12.8-12.1 32.5 0 44.5s31.7 12.1 44.5 0L253 76.5 451.4 275c12.1 12.1 32.5 12.1 44.5 0 12.1-12.1 12.1-31.7 0-44.5l-221-220.4C262.8-2 243.2-2 230.4 10.1Z' style='fill:%237b73f3;stroke-width:0'/%3E%3C/svg%3E");
    transition: all .3s ease;
}

.subscript_mypage_list {
    position: relative;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 49px;
    right: calc(0px - 20px);
    display: flex;
    flex-direction: column;
    row-gap: 15px;
    padding: 15px 25px;
    border: 1px solid #eee;
    border-right: 0;
    background: var(--color-white);
    transition: all .5s ease;
    box-shadow: rgba(0, 0, 0, 0.3) -11px 5px 20px -20px;
    z-index: 1
}

.subscript_mypage_list::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, hsl(0, 0%, 100%) 100%);
}

.subscript_mypage_list.on {
    visibility: visible;
    opacity: 1;
    transition: all .5s ease;
}

.subscript_mypage_list li a {
    white-space: nowrap;
    font-size: .9rem
}

/* */
.subscript .short {
    display: none
}
.ani_maintitle {
    max-width: 443px;
    margin:0 auto
}
.ani_maintitle.type02 {
    max-width: 322px;
    margin:0 auto
}
.subscript {
    width: 100%;
    display: inline-block;
    margin-top: 30px;
}

.subscript * {
    font-size: 15px;
    line-height: 21px;
    color: var(--color-gray333);
}
.subscript .title {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 15px;
}
.subscript .list li {
    display: flex;
    align-items: center;
    column-gap: 5px;
}
.subscript .list li:last-child {
    margin-bottom: 0px;
}
/* .subscript .list li::before {
    content:"";
    display: flex;
    width: 5px;
    height: 1px;
    background: #ddd
} */
.subscript .subcopy {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    margin-top: 40px;
    text-align: center;
}
.subscript .subcopy strong {
    font-size: 17px;
    line-height: 30px
}
.promotion_wraps {
    margin-top: 50px
}
.quantity {
    font-weight: 600;
    color: var(--color-light-purple)!important
}
.coupon_price {
    display: flex;
    column-gap: 10px;
    align-items: center;
}
.cuponbox .coupon_price {
    font-size: 20px;
}
.coupon_price .price {
    color: var(--color-purple);
    font-size: 25px;
    font-weight: 600;
}
.price .minus {
    font-size: 20px;
    margin-right: 5px;
    color: var(--color-pink)
}
.btn_coupon {
    position: relative;
    font-size: 0
}
.btn_coupon, .btn_coupon::after {
    width: 26px;
    height: 26px;
}
.btn_coupon::after {
    content:"";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M40 2C19 2 2 19 2 40s17 38 38 38 38-17 38-38S61 2 40 2ZM29 22l30 18-30 18V22Z' style='fill:%23564fb9'/%3E%3C/svg%3E");
}
.btn_coupon:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M40 2C19 2 2 19 2 40s17 38 38 38 38-17 38-38S61 2 40 2ZM29 22l30 18-30 18V22Z' style='fill:%237b73f3'/%3E%3C/svg%3E");
    transition: all .5s ease
}


/* 탭영역 */
.subscription_tab {
    margin-top: 50px
}

.subscription_links {
    display: flex;
}

.subscription_links li {
    flex: 1 
}

.subscription_links a {
    display: block;
    padding: 20px 0;
    font-size: 16px;
    text-align: center;
    color: #555;
    border-radius: 10px 0 0 0;
    background-color: #f4f4f4;
    transition: background-color 0.3s, color 0.3s;
}

.subscription_links li:last-child a {
    border-radius: 0 10px 0 0;
}

.subscription_links li.active a {
    color: var(--color-white);
    background: var(--color-light-purple);
}

.tab_container {
    display: none;
}

.tab_container.active {
    display: block;
}

/* 쿠폰영역 */
.cupons_wrap {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    margin-top: 30px;
}
.cuponbox {
    position: relative;
    min-height: 120px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 30px 20px;
    box-shadow: rgb(17 17 26 / 5%) 0px 0px 20px;
}
.cuponbox.purchase + .cupons_wrap {
    margin-top: 50px
}

.cuponbox.select {
    border: 2px solid var(--color-light-purple);
    background-color: #f8f8f8;
}
.cuponbox.itsok {
    border: 2px solid var(--color-light-purple);
    background-color: var(--color-white);
}
.cuponbox.purchase {
    position: relative;
    border: 0;
    padding: 50px 30px;
    border-radius: 0 0 10px 10px;
    background: var(--color-white);
    box-shadow: rgb(17 17 26 / 21%) 0px 10px 17px 0px;
}

.cuponbox.purchase::before {
    content: "";
    position: absolute;
    top: -3px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    width: calc(100% + 30px);
    height: 20px;
    border-radius: 100px;;
    background: var(--color-purple);
    z-index: -1
}

.cuponbox.purchase::after {
    content: "";
    position: absolute;
    bottom: -13px;
    left:0;
    width: 100%;
    height: 25px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 561.9 27.8'%3E%3Cpath d='M0 0v17.7c.5 0 1-.1 1.5-.1 6 0 10.9 4.6 10.9 10.3h13.3c0-5.7 4.9-10.3 10.9-10.3s10.9 4.6 10.9 10.3h13.3c0-5.7 4.9-10.3 10.9-10.3s10.9 4.6 10.9 10.3h13.3c0-5.7 4.9-10.3 10.9-10.3s10.9 4.6 10.9 10.3H131c0-5.7 4.9-10.3 10.9-10.3s10.9 4.6 10.9 10.3h13.3c0-5.7 4.9-10.3 10.9-10.3s10.9 4.6 10.9 10.3h13.3c0-5.7 4.9-10.3 10.9-10.3S223 22.2 223 27.9h13.3c0-5.7 4.9-10.3 10.9-10.3s10.9 4.6 10.9 10.3h13.3c0-5.7 4.9-10.3 10.9-10.3s10.9 4.6 10.9 10.3h13.3c0-5.7 4.9-10.3 10.9-10.3s10.9 4.6 10.9 10.3h13.3c0-5.7 4.9-10.3 10.9-10.3s10.9 4.6 10.9 10.3h13.3c0-5.7 4.9-10.3 10.9-10.3s10.9 4.6 10.9 10.3h13.3c0-5.7 4.9-10.3 10.9-10.3s10.9 4.6 10.9 10.3h13.3c0-5.7 4.9-10.3 10.9-10.3s10.9 4.6 10.9 10.3H482c0-5.7 4.9-10.3 10.9-10.3s10.9 4.6 10.9 10.3h13.3c0-5.7 4.9-10.3 10.9-10.3s10.9 4.6 10.9 10.3h13.3c0-5.7 4.9-10.3 10.9-10.3V0H0Z' style='fill:%23fff'/%3E%3C/svg%3E");
    z-index: 1
}

.promotion_title {
    display: flex;
    align-items: center;
    column-gap: 10px;
    font-size: 20px;
    column-gap: 10px;
    font-weight: 600;
}

.promotion_title label {
    display: flex;
    align-items: center;
    font-size: 20px;
    column-gap: 10px;
    font-weight: 600
}

.coupon_title {
    display: flex;
    flex-direction: column;
    row-gap: 5px;
}

.coupon_title .name {
    font-size: 20px;
    font-weight: 600;
}

.cuponbox_wrapbox .promotion_title label {
    font-size: 15px;
    font-weight: 400
}
.promotion_price {
    display: flex;
    flex-direction: column;
    row-gap: 5px;
    align-items: end;
}
.promotion_price > * {
    font-size: 12px;
    color:#999
}
.promotion_price .price, .promotion_price .rate, .promotion_other_price {
    font-size: 33px;
    letter-spacing: -0.15rem;
    color: #333;
    font-weight: 600
}
.promotion_other_price {
    font-size: 40px;
}
.promotion_price .price::before {
    content: "₩";
    margin-right: 5px;
    font-size: 28px;
}
.promotion_price .rate::after {
    content: "%";
    margin-left: 5px;
    font-size: 28px;
}
.promotion_price .price > span, .promotion_price .rate > span, .promotion_other_price > span {
    padding-left: 5px;
    font-size: 14px;
    font-weight: 300;
    color: #999;
}
.mark_sale {
    padding: 4px 15px;
    color: var(--color-white);
    font-size: 13px;
    font-weight: 400;
    border-radius: 50px;
    border: 1px solid var(--color-purple);
    background: var(--color-light-purple);
}
.btn_before {
    position: absolute;
    top: 20px;
    left: 0;
    border: 1px solid var(--color-grayddd);
    padding: 3px 18px;
    font-size: 13px;
    color:var(--color-gray999)!important;
    border-radius: 50px;
    display: flex;
    align-items: center;
}
.btn_before:hover {
    border: 1px solid var(--color-grayddd);
    background:var(--color-grayf8);
    transition: all .5s ease
}
.btn_before::before {
    content: "";
    margin-right: 5px;
    display: flex;
    width: 6px;
    height: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-name='레이어_1' viewBox='0 0 67 116'%3E%3Cpath d='M4.1 53 53 4c2.8-2.7 7.2-2.7 9.9 0s2.7 7 0 9.9L18.8 58l44.1 44.1c2.7 2.7 2.7 7.2 0 9.9s-7 2.7-9.9 0L4.1 62.9c-2.7-2.7-2.7-7 0-9.9Z' style='fill:%23bbb'/%3E%3C/svg%3E");
}
.btn_before:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-name='레이어_1' viewBox='0 0 67 116'%3E%3Cpath d='M4.1 53 53 4c2.8-2.7 7.2-2.7 9.9 0s2.7 7 0 9.9L18.8 58l44.1 44.1c2.7 2.7 2.7 7.2 0 9.9s-7 2.7-9.9 0L4.1 62.9c-2.7-2.7-2.7-7 0-9.9Z' style='fill:%237b73f3'/%3E%3C/svg%3E");
}

.cuponbox.purchase .promotion_title {
    font-size: 25px
}
.cuponbox.purchase .promotion_price .price {
    font-size: 40px;
    /* color: var(--color-purple); */
}

.subscript.couponlist {
    margin-top: 0
}
.subscript.couponlist .cuponcode_box {
    margin-top: 20px
}
.subscript.couponlist .cupons_wrap {
    margin-top: 60px
}
.cuponbox.no {
    background:var(--color-grayeee)
}
.cuponbox.no .promotion_title label, 
.cuponbox.no .promotion_price .price, 
.cuponbox.no .promotion_price > * {
    color:var(--color-grayddd)
}
.iconmark {
    position: absolute;
    top: 0px;
    left: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 10px;
    font-size: 12px;
    border-top-left-radius: 8px;
}
.iconmark.ok {
    color: var(--color-white);
    background: var(--color-pink)
}
.iconmark.no {
    color: var(--color-white);
    background: var(--color-gray999)
}
.point_used {
    display: flex;
}
.button_used {
    width: 100px;
    height:25px; 
    border-radius: 5px;
    color:var(--color-white);
    background: var(--color-gray333);
}
.point_used .button_used {
    margin-left: 10px
}

/* */
.subscript .btn_blockbox {
    max-width: unset;
    font-size: 20px;
    margin-top: calc(0.1 * 100%);
    background: url('/img/nosie.png') repeat;
    box-shadow: 4px -4px #c7c3ff;
}
.subscript .btn_blockbox:hover {
    opacity: .9;
}
.subscript.btn_blockbox {
    display: flex;
    max-width: unset;
    font-size: 20px;
    margin-top: calc(0.1 * 100%);
    background: url('/img/nosie.png') repeat;
    box-shadow: 4px -4px #c7c3ff;
}

.subscript .btn_blockbox.cancle {
    max-width: unset;
    font-size: 20px;
    margin-top: calc(0.1 * 100%);
    background: url('/img/nosie_gray.png') repeat;
    box-shadow: 4px -4px #eee;
}
.btn_linebox {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70px;
    border: 1px solid #333;
    border-radius: 100px;
    font-weight: 500;
    color: var(--color-gray333) !important;
    font-size: 20px;
    margin-top: calc(0.1 * 100%);
    box-shadow: 4px -4px #e0e0e0;
}
.btn_linebox:hover {
    color: var(--color-white)!important;
    background: var(--color-gray333);
}
.guidelines {
    padding: 1.5rem;
    border-radius: 1rem;
    margin-top: 40px;
    background: #f9fafb;
}
.guidelines .title {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 10px;
}
.guide_list {
    display: flex;
    flex-direction: column;
    row-gap: 7px
}
.guide_list > * {
    position: relative;
    padding-left: 7px;
}
.guide_list > *::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 3px;
    height: 3px;
    border-radius: 10px;
    background: var(--color-light-purple);
}
.guide_list .phone_certified {
    color: var(--color-purple)
}
/* .guide_list .phone_certified:hover {
    color: var(--color-light-purple)
} */

/* 텍스트박스 */
.precautions {
    margin-top: 50px;
}
.wordbox {
    display: flex;
    flex-direction: column;
}
.wordbox dt {
    margin-bottom: 10px;
    font-size: 16px;
    color: var(--color-light-purple);
    /* font-weight: 600; */
}
.wordbox dd {
    position:relative;
    color: #999;
    font-weight: 300;
    margin-bottom: 5px
}
.wordbox dd:last-child {
    margin-bottom: 0
}
.wordbox dd::before {
    content: "";
    position: absolute;
    top: 10px;
    left: -10px;
    width: 3px;
    height: 3px;
    border-radius: 10px;
    background: #ddd
}
.precautions .wordbox {
    margin-bottom: 20px
}
.precautions .wordbox:last-child {
    margin-bottom: 0
}
.wordbox .depth_two {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    margin-top: 20px;
    padding: 20px;
    background: #fdfdfd;
}
.wordbox .depth_two dt {
    color: #555;
    font-size: 15px;
    font-weight: 400;
    margin-bottom: 5px
}

/* 쿠폰코드 박스 */
.cuponcode_box {
    display: grid;
    grid-template-columns: auto 150px;
    margin-top: 70px;
}

.cuponcode_box input {
    padding: 20px;
    font-size: 20px;
    font-weight: 600;
    color: var(--color-light-purple);
    border-radius: 10px 0 0 10px;
    border: 1px solid var(--color-light-purple);;
}

.cuponcode_box button {
    padding: 20px;
    border-radius: 0 10px 10px 0;
    background: var(--color-light-purple);
}
.cuponcode_box button label {
    color: var(--color-white);
}
.possession {
    display: flex;
    align-items: center;
}
.possession.coupon::before {
    content: "";
    display: flex;
    width: 41px;
    height: 27px;
    margin-right: 5px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 91 60'%3E%3Cpath d='M84.2 20.8c-4.3.9-7.4 4.8-7.4 9.2s3.1 8.3 7.4 9.2c3 .6 5.1 3.1 5.1 6.1v6.6c0 3.4-2.8 6.2-6.2 6.2h-72c-5.2 0-9.4-4.2-9.4-9.4V11.2c.1-5.1 4.3-9.3 9.4-9.3H83c3.4 0 6.2 2.8 6.2 6.2v6.6c0 3-2.1 5.5-5.1 6.1ZM83 45.3c-7.3-1.5-12.5-7.9-12.5-15.3s5.2-13.8 12.4-15.3V8.1H64.3v6.2c0 1.7-1.4 3.1-3.1 3.1s-3.1-1.4-3.1-3.1V8.1h-47C9.4 8.1 8 9.5 8 11.2v37.5c0 1.7 1.4 3.1 3.1 3.1H58v-6.2c0-1.7 1.4-3.1 3.1-3.1s3.1 1.4 3.1 3.1v6.2H83v-6.6ZM41.3 34c2.3 0 4.1 1.9 4.1 4.1s-1.9 4.1-4.1 4.1-4.1-1.9-4.1-4.1 1.9-4.1 4.1-4.1ZM20.6 21.6c0-2.3 1.9-4.1 4.1-4.1s4.1 1.9 4.1 4.1-1.9 4.1-4.1 4.1-4.1-1.9-4.1-4.1Zm22.9-2.2c1.2 1.2 1.2 3.2 0 4.4L27 40.3c-.6.6-1.4.9-2.2.9s-1.6-.3-2.2-.9c-1.2-1.2-1.2-3.2 0-4.4l16.5-16.5c1.2-1.2 3.2-1.2 4.4 0Zm17.6 4.3c1.7 0 3.1 1.4 3.1 3.1V33c0 1.7-1.4 3.1-3.1 3.1S58 34.7 58 33v-6.2c0-1.7 1.4-3.1 3.1-3.1Z' style='fill:%23333;fill-rule:evenodd'/%3E%3C/svg%3E");
}
.possession.point::before {
    content: "";
    display: flex;
    width: 30px;
    height: 27px;
    margin-right: 5px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' version='1.1' viewBox='0 0 98 88'%3E%3Cdefs%3E%3Cstyle%3E.st0%7Bfill:%23333%7D%3C/style%3E%3C/defs%3E%3Cpath d='M57.7 11.3c-5.6-3.2-9.5-3.8-11.6-1.7C41.7 14 50 26.8 60.5 37.2c8.5 8.5 18.6 15.6 24.4 15.6s2.4-.4 3.2-1.2c2.1-2.1 1.5-6-1.7-11.6-2.8-4.9-7.3-10.6-12.7-16-5.4-5.4-11.1-9.9-16-12.7Zm28.1 38.1c-1.5 1.5-11-2.2-23.2-14.4S46.7 13.3 48.2 11.8c.2-.2.5-.3 1.1-.3 1.2 0 3.3.5 6.8 2.5 4.7 2.6 10.1 7 15.3 12.2 5.2 5.2 9.5 10.7 12.2 15.4 2.9 5.1 2.7 7.4 2.2 7.9Z' class='st0'/%3E%3Cpath d='m40.5 4.1-8.8 8.8c-3.1 3.1-3.1 8.9 0 16.2 1.9 4.2 4.7 8.8 8.2 13.2h-.3c-21 0-37.5 6.9-37.5 15.6v12.5c0 3.9 3.2 7.4 8.6 10.1 0 0 .2.1.3.1 6.8 3.3 17 5.4 28.6 5.4s21.8-2.1 28.6-5.4c.1 0 .2 0 .3-.1 5.4-2.7 8.6-6.2 8.6-10.1v-2.3h1.1c2.7 0 4.9-.8 6.5-2.3l8.8-8.8c6.2-6.2-.6-22.7-15.5-37.6S46.7-2.1 40.5 4.1Zm-.8 41.4h2.9c.9 1.1 1.9 2.2 3 3.2-1.9-.1-3.9-.2-5.9-.2-14.8 0-29.7 3.2-29.7 9.4s14.9 9.4 29.7 9.4 19-1.4 24.4-3.8c1.1.6 2.2 1.2 3.2 1.7-6.5 3.3-16.7 5.2-27.6 5.2-20.2 0-34.4-6.6-34.4-12.5s14.1-12.5 34.4-12.5Zm14.4 11.3c2.1 1.8 4.3 3.3 6.5 4.8-5.1 1.7-12.8 2.7-21 2.7-17.2 0-26.6-4.1-26.6-6.2s9.4-6.2 26.6-6.2 6.3.2 9.3.5c1.7 1.6 3.4 3.1 5.2 4.6ZM74 70.6c0 2-1.7 4.1-4.7 6v-2.9c0-.9-.7-1.6-1.6-1.6s-1.6.7-1.6 1.6v4.6c-1.8.8-3.9 1.6-6.2 2.2v-3.7c0-.9-.7-1.6-1.6-1.6s-1.6.7-1.6 1.6v4.5c-2 .4-4 .8-6.2 1.1v-4c0-.9-.7-1.6-1.6-1.6s-1.6.7-1.6 1.6v4.3c-2 .2-4.1.3-6.2.3v-4.7c0-.9-.7-1.6-1.6-1.6s-1.6.7-1.6 1.6V83c-2.2 0-4.2-.1-6.2-.3v-4.3c0-.9-.7-1.6-1.6-1.6s-1.6.7-1.6 1.6v4c-2.2-.3-4.3-.7-6.2-1.1v-4.5c0-.9-.7-1.6-1.6-1.6s-1.6.7-1.6 1.6v3.7c-2.3-.7-4.4-1.4-6.2-2.2v-4.6c0-.9-.7-1.6-1.6-1.6s-1.6.7-1.6 1.6v2.9c-3-1.9-4.7-4-4.7-6v-6.2c5.7 5.5 18.8 9.3 34.4 9.3s24.4-2.5 31.2-6.8c1.1.4 2.1.7 3.1.9v2.8Zm8.5-6.8c-1.4 1.4-4.1 1.7-7.6.9l2-2c.6-.6.6-1.6 0-2.2s-1.6-.6-2.2 0l-3.2 3.2c-1.9-.7-3.9-1.6-6-2.8l2.6-2.6c.6-.6.6-1.6 0-2.2s-1.6-.6-2.2 0l-3.2 3.2c-1.7-1.1-3.4-2.3-5.2-3.7l2.8-2.8c.6-.6.6-1.6 0-2.2s-1.6-.6-2.2 0L55 53.7c-1.5-1.3-3.1-2.7-4.6-4.2l3.3-3.3c.6-.6.6-1.6 0-2.2s-1.6-.6-2.2 0l-3.3 3.3c-1.3-1.4-2.6-2.8-3.8-4.2-.1-.1-.2-.3-.3-.4l3.1-3.1c.6-.6.6-1.6 0-2.2s-1.6-.6-2.2 0l-2.8 2.8c-1.4-1.8-2.6-3.5-3.7-5.2l3.2-3.2c.6-.6.6-1.6 0-2.2s-1.6-.6-2.2 0l-2.6 2.6c-1.2-2.1-2.1-4.1-2.8-6l3.2-3.2c.6-.6.6-1.6 0-2.2s-1.6-.6-2.2 0l-2 2c-.8-3.5-.5-6.1.9-7.6l4.4-4.4c.2 8 6.7 19.9 17.7 30.9S79 59.3 87 59.4l-4.4 4.4Zm8.9-8.8c-4.2 4.2-18.8-1.1-33.1-15.5s-19.7-29-15.6-33.2c.9-.9 2.4-1.4 4.2-1.4 6.5 0 17.8 5.7 29 16.9 14.3 14.3 19.7 29 15.5 33.2Z' class='st0'/%3E%3C/svg%3E");
}

/* 정보 출력 */
.infomation_box {
    margin-top: 50px;
}
.titles_wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.infomation_box .titles_wrap {
    border-bottom: 2px solid #333;
    padding-bottom: 20px;
}
.infomation_wrap .article .titles_wrap {
    border:0;
    padding: 0
}
.infomation_wrap .article .titles_wrap .btn_mini{
    min-width: 95px;
    text-align: center;
}

.infomation_box .titles_wrap .title {
    margin-bottom: 0
}
.infomation_wrap {
    display: flex;
    flex-direction: column;
}
.infomation_wrap .article {
    display: grid;
    grid-template-columns: 140px auto;
    align-items: center;
    border-bottom: 1px solid var(--color-grayddd);
    padding: 20px 10px;
}
.infomation_wrap .article.noinfo {
    padding: 50px 10px;
    justify-content: center;
}

.infomation_wrap .article dt {
    color: var(--color-gray999);
}
.subscript .btn_mini {
    padding: 10px 20px;
    color:var(--color-white);
    background: var(--color-gray333);
}
.subscript .btn_mini:hover {
    background: var(--color-light-purple);
    transition: all .5s ease;
}
.article .payment {
    display: flex;
    column-gap: 10px;
} 
.infomation_textlist {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    margin-top: 20px;
}
.infomation_textlist li {
    padding-left: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}
.infomation_textlist li::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 10px;
    width: 3px;
    height: 3px;
    border-radius: 10px;
    background: #ddd;
}
.infomation_box .conditionsuse {
    overflow-y: scroll;
    width: 100%;
    max-height: 500px;
    padding: 20px;
    background:#fcfcfc
}
.infomation_box .conditionsuse h1 {
    font-size: 16px;
    font-weight: 600;
}
.condition_wrap {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    margin-top: 30px
}
.condition_wrap div, .condition_wrap ul li {
    font-size: 14px;
    font-weight: 300;
    color:#999
}
.condition_wrap ul {
    display: flex;;
    flex-direction: column;
    row-gap: 10px;
    margin-top: 10px;
    padding-left: 10px;
}

.agree_area {
    display: flex;
    column-gap: 10px;
}

.member.agree_area {
    display: flex;
    flex-direction: column;
    column-gap: 10px;
}

/* 구매완료 */
.subscript.completion_ani {
    margin-top: -35px;
}
.subscript.other01 {
    margin-top: -35px;
}
.completion_ani .ani_maintitle {
    position:relative;
    left: 90px;
    width: 262px;
}
.subscript.completion_ani .subcopy {
    margin-top: 0
}
.subscript .subcopy strong .name {
    font-size: 25px;
    color: var(--color-purple);
    font-weight: 600
}
.subscript .subcopy strong .point {
    color: var(--color-purple);
    font-weight: 600
}
.subscript .tips {
    text-align: center;
}

/* 구독해지 */
.termination_schedule {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 20px;
    border: 3px solid var(--color-purple);
}
.termination_schedule .title {
    font-size: 25px;
    font-weight: 600
}
.termination_schedule .date {
    font-size: 25px;
    font-weight: 600;
    color: var(--color-purple);
}
.reasons_termination {
    margin-top: 50px;
    padding-bottom:30px;
    border-bottom: 1px solid #ddd
}
.reasons_termination .title {
    padding-bottom: 20px;
    border-bottom: 2px solid var(--color-gray333);
}
.reasons_termination_wrap {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    margin-top: 30px;
    padding-left: 10px;
}
.reasons_termination_wrap li {
    display: flex;
    align-items: center;
    column-gap: 10px;
}
.reasons_termination_wrap .check_box+label {
    padding: 0;
    white-space: nowrap;
}
.reasons_termination_wrap li input[type="text"] {
    width: 100%;
    padding:5px 10px
}
.infomation_textlist.reasons {
    margin-top: 40px;
    row-gap: 10px
}
.twice_btnarea {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 10px;
    margin-top: 50px
}
.twice_btnarea .btn_blockbox {
    margin-top: 0!important
}

/*----------------------
## 기사열람내역
----------------------*/
.articlehistory {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-top: 30px;
}
.articlehistory_article {
    display: flex;
    flex-direction: column;
}
.articlehistory_article .part {
    display: flex;
    padding: 20px 10px;
    border-top: 2px solid var(--color-gray333);
    border-bottom: 1px dashed var(--color-grayddd);
}
.articlehistory .articlehistory_article:last-child .memo {
    border-bottom: 1px solid var(--color-gray333);
}
.articlehistory_article .part > * {
    display: flex;
    align-items: center;
}
.articlehistory_article .part > *:first-child {
    display: flex;
    flex: 1 1 auto;
}
.articlehistory_article .part > *:last-child {
    flex: 0 0 180px;
}
.part .date dt, 
.part .rating dt {
    margin-right: 20px;
    color: var(--color-gray999)
}
.rating_mark {
    display: flex;
    font-weight: 500;
    color: var(--color-gray333);
}
.rating_mark > span {
    display: flex;
     align-items: center;
}
.rating_mark > span::after {
    content: "";
    display: flex;
    width: 1px;
    height: 70%;
    margin:0 7px;
    background: var(--color-grayddd)
}
.premium,
.rating_mark.premium > span {
    color: var(--color-pink);
}
.articlehistory_article .memo {
    padding: 20px 10px;
    background: var(--color-grayfa)
}
.subscription_links.history > * {
    border-right: 1px solid var(--color-white)
}
.subscription_links.history > *:last-child {
    border-right: 0
}
.subscription_links.history li:nth-of-type(2) a, 
.subscription_links.history li:nth-of-type(2).active a {
    border-radius: 0 0 0 0!important
}
.no_inspect {
    padding: 50px;
    text-align: center;
    font-size: 1.3rem;
}


/*-------------------------------------------------------------------
                                MEDIAQUERY
-------------------------------------------------------------------*/
@media (max-width:640px) {
    /* 구독 */
    .cuponbox.purchase {
        width: 80%;
        margin: 0 auto;
    }
    .cuponbox {
        position: relative;
        flex-direction: column;
        row-gap: 20px;
    }
    .subscript.couponwraps .cuponbox.purchase{
        flex-direction: column;
    }
    .subscript.couponwraps .cuponbox {
        flex-direction: row;
    }
    .cuponbox.purchase::after {
        bottom: -9px;
        left: 0;
        height: 17px;
    }
    .title_sub {
        margin-bottom: 50px;
    }
    /* 쿠폰영역 */
    .cupons_wrap {
        row-gap: 20px;
    }
    .cuponbox.select {
        row-gap: 10px;
        border: 5px solid var(--color-light-purple);
    }
    .subscript.couponlist .cuponbox {
        padding: 45px 15px 19px 15px;
    }
    .subscript.couponlist .check_box+label {
        padding-right: 0;
    }
    .promotion_price {
        align-items: center;
        row-gap: 10px
    }
    .promotion_price .price {
        font-size: 43px;
    }
    .cuponbox {
        border: 1px solid #eee;
        border-radius: 30px;
        padding: 30px 20px;
        box-shadow: rgb(17 17 26 / 5%) 0px 0px 20px;
    }
    .iconmark {
        top: 0;
        left: 0;
        padding: 5px 10px 5px 20px;
        border-top-left-radius: 25px;
        border-bottom-right-radius: 10px;
    }
    .cuponbox .check_box {
        width: 21px;
        height: 21px;
        border: 0;
    }
    .cuponbox .check_box::before {
        width: 21px;
        height: 21px;
        top: -1px;
        left: -1px;
    }
    .cuponbox .check_box::after {
        top: 5px;
        left: 8px;
        display: flex;
        width: 3px;
        height: 8px;
    }
    .promotion_title .mark_sale {
        position: absolute;
        right: -20px;
        top: 20px;
    }
    .cuponcode_box {
        grid-template-columns: 1fr;
        row-gap: 10px;
    }
    .cuponcode_box input {
        text-align: center;
    }
    .cuponcode_box input, .cuponcode_box button {
        width: 100%;
        border-radius: 50px;
    }
    .infomation_wrap .article {
        grid-template-columns: 1fr;
        row-gap: 10px
    }
    .infomation_wrap .article.noinfo {
        text-align: center;
    }
    .infomation_wrap .article dd {
        font-size: 18px;
        font-weight: 500
    }
    .article.pay dd {
        font-size: 15px;
        font-weight: 400
    }
    .cuponbox.itsok {
        border: 5px solid var(--color-light-purple);
    }
    .cuponbox_price {
        display: flex;
        flex-direction: column;
        row-gap: 20px;
    }
    .cuponbox_price > p:first-child {
        text-align: center;
    }
    .promotion_other_price {
        font-size: 45px;
    }

    /* 구독완료 */
    .completion_ani .ani_maintitle {
        left: 60px;
        width: 180px;
    }
    .subscript.completion_ani .subcopy {
        margin-top: 20px;
    }
    .subscript.completion_ani {
        margin-top: -10px
    }
    .promotion_title {
        column-gap: 5px;
    }
    .promotion_title label {
        font-size: 18px;
    }
    /* 텔레그램 */
    .checkment {
        /* top: -3px; */
        /* left: 90px; */
    }
    .checkment::before {
        bottom: unset;
        top: 50%;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        left: -10px;
        width: 0;
        height: 0;
        border-bottom: 6px solid transparent;
        border-top: 6px solid transparent;
        border-left: 6px solid transparent;
        border-right: 6px solid var(--color-red);
    }
}

@media (max-width:520px) {

    /* 모달 팝업 */
    .modalpopup .btn_enlogo,
    .modalpopup .btn_enlogo::after {
        width: 130px;
        height: 30px;
    }

    .modalpopup .multiple_position {
        padding: 0 20px;
        column-gap: 10px;
    }

    .modalpopup .multiple_position>* {
        height: 55px;
    }

    .modalpopup .s_title {
        margin: calc(0.08* 100%) 0 calc(0.075* 100%) 0;
        font-size: 1rem;
        line-height: 1.4rem;
    }

    .modalpopup.email .btn_enlogo {
        margin-top: calc(0.06* 100%) !important;
    }

    .modalpopup .principle {
        width: 50px;
        height: 50px;
    }

    .modalpopup .s_title br,
    .modalpopup .mentarea .sendment br {
        display: none
    }

    .modalpopup .twins_btnssrea {
        margin-top: 30px !important;
    }

    .modalpopup .twins_btnssrea>* {
        height: 60px;
    }

    .line_or::before,
    .line_or::after {
        width: 10%;
    }

    .multiple_position.small .btn_linekbox,
    .multiple_position.small .btn_blockbox {
        height: 55px;
    }

    .popupbox h3 {
        font-size: 1.5rem;
    }

    
    /* */
    .tellagram_certified .titles_wrap {
        flex-direction: column;
        align-items: end;
        row-gap: 10px;
    }
    .subscript .btn_blockbox {
        margin-top: calc(0.15 * 100%);
    }
    .tellagram_certified .inputbox.blinking {
        width: 100%;
    }
    .checkment {
        position:  absolute;
        /* width:100px; */
        right: 0;
        top: 20px;
    }
    .tellagram_certified .inputstyle_bottom_text {
        width: 100%;
        position: relative;
    }
    .tellagram_certified .btn_twins {
        display: flex;
        /* flex-direction: column; */
        column-gap: 1px;
    }
    .tellagram_no .inputbox.blinking {
        width: 150px
    }
    
    
}

@media (max-width:480px) {
    .multiple_position.small {
        width: 60%;
        column-gap: 10px
    }

    .multiple_position.small .btn_linekbox,
    .multiple_position.small .btn_blockbox {
        height: 50px;
    }
    .article .payment {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(40%, auto));
        row-gap: 10px
    }

    /*----------------------
    ## 기사열람내역
    ----------------------*/
    .articlehistory_article .part {
        flex-direction: column;
        row-gap: 2px
    }
    .articlehistory_article .part > *:first-child, 
    .articlehistory_article .part > *:last-child {
        display: grid;
        grid-template-columns: 90px auto;
    }
    .articlehistory_article .part > *:last-child {
        flex: 0 0 auto;
    }
    .articlehistory_article .memo {
        padding: 12px 10px;
    }
}

@media (max-width:460px) {
    /* Common */
    input::placeholder {
        font-size: .9rem;
    }

    /* 로그인 */
    .checkboxstyle input[type="checkbox"]+label,
    .selcet_list>*,
    .skip {
        font-size: .9rem;
    }

    .checkboxstyle.agree_allok.line input[type="checkbox"]+label {
        font-size: 1.1rem
    }

    /* 모듈 */
    .g_title {
        font-size: 1.4rem;
        transition: all .5s ease;
    }

    .title_sub .title+*,
    .title_sub .g_title+* {
        font-size: .9rem;
        line-height: 1.2rem;
    }

    .sns_buttons {
        column-gap: 30px;
    }

    .btn_close {
        top: 20px;
        right: 20px;
        width: 30px;
        height: 30px;
    }

    .btn_enlogo::after {
        width: 124px;
        height: 30px;
    }

    /* LOGIN */
    .login_area .inputbox,
    .login_buttons .btn_blockbox,
    .medium.btn_linekbox {
        height: 60px;
    }

    .selcet_list {
        flex-wrap: wrap;
        justify-content: center;
    }

    .sns_joins .s_title {
        font-size: 1.1rem
    }

    /* 회원가입 */
    .authenticating {
        display: grid;
        grid-template-columns: 1fr;
    }

    .authenticating button {
        font-size: .9rem
    }

    .sendmail {
        width: 52px;
        height: 45px;
    }

    /* 회원 정보 */
    .mypage_baseinfo {
        row-gap: 30px;
    }

    .outputstyle_horizontal {
        grid-template-columns: repeat(1, 1fr);
        row-gap: 10px;
        padding-bottom: 10px;
    }

    .mypage_baseinfo .skippoint {
        margin-top: -20px
    }

    /* 가입여부확인 */
    .modalpopup .s_title {
        margin: calc(0.08* 100%) 0 calc(0.1* 100%) 0;
    }

    .modalpopup .mentarea {
        row-gap: 30px;
    }

    /* 모달팝업 */
    .popupbox h3 {
        font-size: 1.2rem;
        line-height: 1.6rem
    }

}

@media (max-width:420px) {

    /* TITLE */
    .m_title {
        font-size: 1rem;
        font-weight: 700;
    }

    /* 회원 정보 */
    /* .login_email .interworking {
        flex-direction: column;
        row-gap: 20px;
    } */

    /* 모달팝업 */
    .modalpopup.email .popupbox {
        transform: translate(-50%, -50%);
        width: 90%;
        padding: 50px 20px 20px;
    }

    .modalpopup.email .btn_enlogo::after {
        width: 124px;
        height: 30px;
    }

    .modalpopup .btn_enlogo,
    .modalpopup .btn_enlogo::after {
        margin-top: 10px !important;
        margin-bottom: 40px !important;
    }

    .modalpopup.email .g_title {
        font-size: 1.3rem;
        letter-spacing: -.06rem;
    }

    .modalpopup.email .mentarea .sendment {
        font-size: .85rem;
        letter-spacing: -.06rem;
    }

    .modalpopup.email .btn_blockbox {
        max-width: 250px;
        height: 60px;
        margin-top: 30px !important
    }

    .modalpopup .s_title,
    .modalpopup .mentarea .sendment {
        font-size: .9rem;
        line-height: 1.25rem;
    }

    .modalpopup .multiple_position {
        padding: 0;
    }

    .modalpopup .multiple_position>* {
        height: 50px;
    }

    .agree_area {
        padding-left: 0;
    }

    .modalpopup .twins_btnssrea>.btn_blockbox {
        margin-top: 0 !important;
    }

    .title_sub .title+* br,
    .title_sub .g_title+* br {
        display: none
    }

    /* 구독 */
    .cuponbox.purchase::after {
        bottom: -4px;
        left: 0;
        height: 9px;
    }
    .cuponcode_box {
        margin-top: 50px;
    }
    .cuponbox.purchase {
        width: 100%;
    }
    .cuponcode_box input, .cuponcode_box button {
        padding: 15px 20px;
    }
    .subscript .btn_mini {
        padding: 5px 12px;
        font-size: 13px;
    }
    .infomation_wrap .article dd {
        column-gap: 20px;
        font-size: 15px;
    }
    .twice_btnarea .btn_blockbox {
        margin-top: 0!important;
        font-size: 16px;
        height: 60px;
    }
}

@media (max-width:380px) {

    /* 모듈 */
    .g_title {
        font-size: 1.3rem;
        line-height: 1.6rem
    }

    h2.title {
        font-size: 1.5rem;
    }

    .skip.point>* {
        font-size: .8rem;
        line-height: 1.1rem
    }

    .auth_prompt {
        font-size: .9rem
    }

    .line_or {
        font-size: .8rem;
    }

    /* LOGIN */
    .login_area .inputstyle_bottom_text,
    .login_buttons .btn_blockbox,
    .medium.btn_linekbox {
        max-width: 300px;
    }

    .selcet_list>* {
        column-gap: 10px;
        margin-right: 10px;
    }

    /* 회원가입 */
    .agree_area {
        row-gap: 10px;
        margin-top: 20px;
    }

    .agree_viewdetail {
        flex-wrap: wrap;
        justify-content: end;
    }

    .agree_viewdetail .checkboxstyle {
        width: 100%;
        border-bottom: 1px dashed #eee;
        padding-bottom: 7px;
        margin-bottom: 7px;
    }

    .agree_viewdetail .detailview {
        border-bottom: 0;
    }

    .modalpopup .twins_btnssrea {
        column-gap: 10px
    }

    .multiple_position.small {
        width: 90%;
    }

    .multiple_position.small .btn_linekbox,
    .multiple_position.small .btn_blockbox {
        height: 50px;
    }

    .agree_allok.line {
        padding-bottom: 20px;
        border-bottom: 2px solid #333;
    }

    .multiple_position.small {
        width: 100%;
    }

    /* 쿠폰 */
    .subscript.couponwraps .cuponbox {
        flex-direction: column;
        row-gap: 10px
    }
    .subscript.couponwraps .coupon_title {
        flex-direction: row;
        column-gap: 5px;
        justify-content: end;
    }
}

@media (max-width:360px) {
    /* 구독안내 */
    .subscript .short {
        display: block;
        width: 90%;
        margin: 0 auto;
    }
    .subscript .long {
        display: none
    }
    .promotion_price .price {
        font-size: 35px;
    }

    /* 버튼 */
    .btn_blockbox,
    .btn_linekbox {
        max-width: 250px;
        height: 60px;
    }

    /* 모달 팝업 */
    .popupbox {
        padding: 50px 20px 20px;
    }

    .modalpopup .principle {
        width: 40px;
        height: 40px;
    }
    .twice_btnarea {
        grid-template-columns: repeat(1, 1fr);
        row-gap: 20px;
    }

    
}

@media (max-width:340px) {
    .center_640 {
        padding: 0 20px;
    }
    /* Header */
    .logo {
        width: 108px;
        height: 17px;
    }
    .gnb {
        padding: 15px
    }
    .familysite_button {
        font-size: .8rem;
    }
    .subscript_mypage_button > svg {
        width: 17px;
        height: 20px;
    }
    .subscript_mypage_button::after {
        width: 12px;
        height: 7px;
    }

    /* 버튼 */
    .sns_buttons {
        column-gap: 20px;
    }

    .sns_buttons>* {
        width: 50px;
        height: 50px;
    }

    /* LOGIN */
    .selcet_list>*:nth-of-type(2):after {
        background: var(--color-white);
    }

    .login_area .inputbox,
    .login_buttons .btn_blockbox,
    .medium.btn_linekbox {
        height: 47px;
    }

    /* 모달팝업 */
    .modalpopup .multiple_position>* {
        height: 40px;
    }

    .modalpopup .principle {
        display: none;
    }

    .multiple_position.small .btn_linekbox,
    .multiple_position.small .btn_blockbox {
        height: 42px;
    }

    /* 구독 */
    .cuponbox.purchase .promotion_price .price {
        font-size: 35px;
    }
}

@media (max-width:320px) {
    /* Header */
    .gnb {
        align-items: center;
    }

    /* 모듈 */
    .sns_joins {
        row-gap: 20px;
    }

    .sns_buttons>* {
        width: 40px;
        height: 40px;
    }

    /* LOGIN */
    .login_area .inputstyle_bottom_text,
    .login_buttons .btn_blockbox,
    .medium.btn_linekbox {
        max-width: 240px;
    }


    .auth_prompt {
        flex-direction: column;
        padding: 15px 0 0 10px;
    }
    
}