/* Default */
.hyphen {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    width: 18px;
    height: 45px;
}
.hyphen:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 6px;
    height: 1px;
    background: #000;
}
.at {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    line-height: 1;
    text-align: center;
    font-size: 14px;
    color: #333;
    padding: 0 4px;
}
.input-box-tel3 {
    display: flex;
    max-width: 400px;
    width: 100%;
}
.input-box-tel3 input,
.input-box-tel3 select {
    display: inline-block;
    vertical-align: middle;
    max-width: none;
    width: calc(33.33333% - 12px) !important;
}
.input-box-tel3 > *:nth-child(2) {
    margin: 0 10px;
}
.input-box-email {
    display: flex;
    align-items: center;
    max-width: 680px;
    width: 100%;
}
.input-box-email input {
    display: inline-block;
    vertical-align: middle;
    max-width: none;
    width: calc(30% - 12px) !important;
}
.input-box-email select.email3 {
    vertical-align: middle;
    margin-left: 10px;
    width: calc(40% - 12px);
}
.input-box-address {
    max-width: 520px;
}
.input-box-address .button {
    vertical-align: top;
    margin-left: 5px;
    width: 120px;
}
.input-box-address input {
    margin-top: 10px;
    max-width: none;
}
.input-box-address input:first-child {
    margin-top: 0;
    width: calc(100% - 248px) !important;
}
.input-box-number {
    display: flex;
    align-items: center;
    max-width: 400px;
    width: 100%;
}
.input-box-number input,
.input-box-number select {
    display: inline-block;
    vertical-align: middle;
    max-width: none;
    width: calc(50% - 12px) !important;
}
.input-box-number .text {
    margin: 0 10px;
}
@media (max-width: 1024px) {
    .hyphen {
        height: 40px;
    }
    .input-box-address {
        max-width: none;
    }
    .input-box-address .button {
        width: 80px;
        margin-left: 2px;
    }
    .input-box-address input:first-child {
        width: calc(100% - 85px) !important;
    }
    .input-box-address input:last-child {
        margin-top: 5px;
    }
}

.t-input {
    display: flex;
    flex-wrap: wrap;
    margin: -2px -5px;
    width: 100%;
}
.t-input input {
    margin: 5px;
    padding: 0 20px;
}
.t-input select {
    margin: 5px;
    padding-left: 20px;
}
.t-input input.wide,
.t-input select.wide {
    flex: 1 1;
}
.t-input .button {
    margin: 5px;
    border-radius: 10px;
    width: 120px;
}
.t-input--inline {
    flex-wrap: nowrap;
}
@media (min-width: 1201px) {
    .t-input input,
    .t-input select {
        min-width: 300px;
    }
}
@media (max-width: 1200px) {
}
@media (max-width: 768px) {
}

/* Login / Join Main */
.login-title-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 80px;
}
.login-title {
    margin-bottom: 40px;
    line-height: 1;
    text-align: center;
    font-size: 40px;
    color: #333333;
    font-weight: 600;
}
.__login-menu > li {
    float: none;
    display: block;
}
.__login-menu > li {
    display: block;
    text-align: center;
}
.__login-menu > li img,
.join-top img {
    display: block;
    margin: 20px auto 0;
}

.join-agree-top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.join-agree-top .page-line-tit {
    font-size: 20px;
}
.check > span {
    color: #777777;
    font-size: 16px;
    font-weight: 400;
}

.idpw-contents {
    padding-bottom: 0 !important;
    height: auto;
}
.idpw-contents .join_wrap {
    padding-bottom: 80px;
}
.idpw-contents .head_title {
    margin-bottom: 0 !important;
    padding-left: 0 !important;
    text-align: center;
    border-bottom: none !important;
    background: none !important;
}
.idpw-contents .idpw_wrap {
    padding-top: 10px !important;
}

.social-login-button {
    overflow: hidden;
    display: block;
    position: relative;
    margin: 5px 0;
    padding-left: 30px;
    height: 60px;
    line-height: 60px;
    text-align: center;
}
.social-login-button:hover {
    opacity: 0.8;
}
.social-login-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 75px;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
}
.social-login-button span {
    font-size: 16px;
    color: #fff;
    font-weight: 500;
}
.__social-n {
    background-color: #1ec800;
}
.__social-n::before {
    background-image: url("/child/img/icon/social-n.png");
}
.__social-k {
    background-color: #ffeb00;
}
.__social-k::before {
    background-image: url("/child/img/icon/social-k.png");
}
.__social-k span {
    color: #381e1f;
}
.__social-f {
    background-color: #4473aa;
}
.__social-f::before {
    background-image: url("/child/img/icon/social-f.png");
}
.__social-g {
    background-color: #e74c3c;
}
.__social-g::before {
    background-image: url("/child/img/icon/social-g.png");
}

@media (max-width: 1024px) {
    .login-title {
        margin-bottom: 35px;
        font-size: 26px;
    }
    .social-login-button {
        padding-left: 20px;
        height: 55px;
        line-height: 55px;
    }
    .social-login-button::before {
        width: 55px;
        background-size: auto 25px;
    }
    .social-login-button span {
        font-size: 14px;
    }
}
@media (max-width: 768px) {
    .idpw-contents {
        height: auto;
    }
    .__login-menu > li img,
    .join-top img {
        margin-top: 30px;
        max-width: 290px;
        width: 100%;
        height: auto;
    }
}
@media (max-width: 550px) {
    .idpw-contents {
        height: auto;
    }
    .login-menu img {
        width: auto;
    }
}

/*  --- Login --- */
.login-box {
    margin: 0 auto 0;
    padding: 60px;
    max-width: 495px;
    background: #fff;
    box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}
.login-box .login_title {
    text-align: center;
}
.login-box .row {
    display: block;
    margin: 0 0 10px;
}
.login-box .row > input[type="text"],
.login-box .row > input[type="password"] {
    width: 100%;
    height: 60px;
    font-size: 18px;
    font-weight: 200;
}
.login-box .row > button {
    width: 100%;
    height: 48px;
    border-radius: 8px;
}
.login-box .row > button span {
    font-size: 16px;
    font-weight: 400;
    color: #fff;
}
.login-box .checkbox {
    margin: 20px 0 60px;
}
.login-box .checkbox span {
    font-size: 16px;
    color: #333333;
    font-weight: 200;
}

.logininput {
    border-radius: 8px;
    caret-color: #da5a57;
}
.logininput::placeholder {
    font-size: 16px;
    font-weight: 400;
}
.logininput:focus {
    outline: 1px solid #da5a57;
    border: none !important;
}

.id-check {
    color: #777777;
    font-size: 16px;
    font-weight: 400;
}

.login-link-ul {
    margin-top: 20px;
    font-size: 0;
    display: flex;
    justify-content: space-between;
}
.login-link-ul > li {
    display: inline-block;
    vertical-align: top;
}
.login-link-ul > li a {
    display: block;
    line-height: 16px;
    text-align: center;
    font-size: 16px;
    color: #333;
    font-weight: 400;
}
.login-none-box {
    margin-top: 50px;
}
.login-none-box .form {
    margin: auto;
    max-width: 480px;
}
.login-none-box .form div a {
    width: 100%;
    color: #fff;
}
.login-none-box p {
    text-align: center;
}
.login-none-box .bottom-button {
    margin-top: 15px;
}
.login-none-box .bottom-button .button {
    font-size: 16px;
}

.login-box-none {
    margin: 30px auto 0;
    padding: 20px 70px;
    max-width: 540px;
    width: 100%;
    background: #eef2ff;
}
.login-box-none .row {
    margin: 5px 0;
}
.login-box-none .row input[type="text"],
.login-box-none .row input[type="password"] {
    width: 100%;
    height: 45px;
    font-weight: 200;
}
.login-box-none .row .button {
    width: 100%;
    font-size: 16px;
}
.login-box-none .join_btn {
    margin-top: 40px;
}
.login-box-none .join_btn a {
    display: block;
    width: 100%;
    height: 45px;
    line-height: 45px;
    color: #444444;
    font-weight: 500;
    font-size: 16px;
    text-align: center;
    background-color: #fff;
    border: 1px solid #999999;
}

@media (max-width: 1024px) {
    .login-box .row > input[type="text"],
    .login-box .row > input[type="password"] {
        padding-right: 15px;
        padding-left: 15px;
        height: 50px;
        font-size: 16px;
    }
    .login-box .row > button {
        height: 60px;
    }
    .login-box .row > button span {
        font-size: 16px;
    }
    .login-box .checkbox span {
        font-size: 13px;
    }
    .login-link-ul > li a {
        font-size: 15px;
    }
}
@media (max-width: 768px) {
    .login-box {
        margin-top: 25px;
        padding: 30px;
    }
    .login-box .row > input[type="text"],
    .login-box .row > input[type="password"] {
        height: 40px;
        font-size: 13px;
    }
    .login-box .row > button {
        height: 50px;
    }
    .login-box .row > button span {
        font-size: 13px;
    }
    .login-box .checkbox span {
        font-size: 12px;
    }
    .login-link-ul > li a {
        font-size: 13px;
    }

    .login-box-none .row input[type="text"],
    .login-box-none .row input[type="password"] {
        height: 40px;
        font-size: 13px;
    }
    .login-box-none .row .button {
        width: 100%;
        font-size: 13px;
    }
    .login-box-none {
        padding: 20px 30px;
    }
    .logininput::placeholder {
        font-size: 13px;
    }
}

/* --- Agree --- */
.terms-box .row {
    padding-right: 0;
    padding-left: 0;
}
.terms-box .row:first-child {
    margin: 0 0 60px;
}
.terms-box .agree .check {
    margin-bottom: 10px;
}
.terms-box .agree .check:last-child {
    margin-bottom: 0;
}
.bottom-button {
    margin-top: 60px;
    text-align: center;
    font-size: 0;
}
.bottom-button .btn {
    margin: 0 10px;
    width: 240px;
    height: 48px;
    font-size: 16px;
    color: #fff;
    font-weight: 400;
    border-radius: 4px;
}
.bottom-button .btn-outline-primary {
    border: 1px solid #ebebeb !important;
    color: #333333 !important;
}

.terms-box h4 {
    font-size: 22px;
    margin: -5px 0 15px;
    width: 100%;
}

.join-agree {
    width: 100%;
    margin-bottom: 20px;
}
.join-agree .textarea {
    overflow-x: hidden;
    overflow-y: auto;
    padding: 20px;
    width: 100%;
    height: 300px;
    line-height: 24px;
    font-size: 18px;
    color: #777;
    font-weight: 200;
    resize: none;
    border: 1px solid #e5e5e5;
}

.textarea-top-line {
    border: 1px solid #ebebeb;
    position: relative;
}
.textarea-top-line::before {
    content: "";
    display: block;
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: rgba(218, 90, 98, 0.3);
}

.all-agree {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.all-agree span {
    font-size: 18px;
    color: #333;
}

@media (max-width: 1024px) {
    .terms-box .row {
        margin-bottom: 80px;
    }
    .terms-box {
        padding: 25px 25px 0;
    }
    .terms-box h4 {
        font-size: 18px;
    }
    .terms-box .agree .check {
        margin-bottom: 5px;
    }
    .terms-box .bottom-button {
        margin-top: 40px;
    }
    .terms-box .bottom-button .button {
        margin: 0 2px;
        width: 150px;
        height: 45px;
        font-size: 13px;
    }

    .join-agree {
        margin-bottom: 10px;
    }
    .join-agree .textarea {
        padding: 15px;
        height: 200px;
        line-height: 20px;
        font-size: 15px;
    }
    .join-agree .textarea * {
        font-size: 15px !important;
    }
}
@media (max-width: 768px) {
    .terms-box .row {
        margin-bottom: 60px;
    }
    .terms-box {
        margin-top: 25px;
        padding: 25px 0 0;
    }
    .terms-box .bottom-button {
        margin-top: 35px;
    }
    .terms-box .bottom-button .button {
        width: 130px;
    }
    .terms-box h4 {
        margin-bottom: 10px;
        font-size: 16px;
    }

    .join-agree {
        margin-bottom: 5px;
    }
    .join-agree .textarea {
        height: 150px;
        line-height: 16px;
        font-size: 13px;
    }
    .join-agree .textarea * {
        font-size: 13px !important;
    }
}

/* --- Join --- */

.join-title {
    line-height: 30px;
    text-align: center;
    font-size: 33px;
    color: #333333;
    font-weight: 500;
}

#join .agree_info {
    margin-bottom: 40px;
    padding: 45px 0;
    background: #f9f9f9;
    text-align: center;
}
#join .agree_info h1 {
    margin-bottom: 15px;
    font-size: 17px;
    color: #333333;
    font-weight: 500;
}
#join .agree_info p {
    font-size: 15px;
    color: #555555;
    font-weight: 400;
}
#join .head_title {
    margin: 50px 0 15px;
    padding-left: 35px;
    background: url("/child/img/icon/icon_title.png") no-repeat center left / 22px;
}
#join .head_title h3 {
    font-size: 23px;
    line-height: 23px;
    color: #333333;
    font-weight: 500;
}
.join_agree_box {
    margin-bottom: 40px;
}
.join_agree_box div.inner {
    border-width: 0 1px 1px;
    border-style: solid;
    border-color: #ddd;
    padding: 20px 20px 15px;
    background: #f7f7f7;
}
.join_tit {
    font-size: 15px;
    font-weight: 600;
    color: #999;
    letter-spacing: -0.05em;
    line-height: 1.6;
    padding: 0 0 5px 18px;
    margin: 0 0 0px;
    background: url(image/title_bullet.png) left 5px no-repeat;
}
.join_tit span {
    color: #444;
}
.join_agree_box div.cont {
    border: 1px solid #ddd;
    background: #fff;
}
.join_agree_box div.cont textarea {
    width: 100%;
    height: 280px;
    padding: 10px;
    line-height: 1.5;
    background: none;
    border: 0 none;
    word-break: keep-all;
}
.join_agree_box div.agree {
    margin: 10px 0 0;
    text-align: right;
}
.join_agree_box div.agree input {
    vertical-align: middle;
    margin-right: 5px;
}
.join_agree_box div.agree label {
    vertical-align: middle;
}
.join_agree_all {
    padding: 24px 0;
    text-align: center;
    background: #fff;
    border: 5px solid #e9e2db;
    margin: 50px 0 35px;
}
.join_agree_all input {
    vertical-align: middle;
    margin-right: 5px;
}
.join_agree_all label {
    vertical-align: middle;
    font-size: 16px;
    color: #2a8ddc;
    font-weight: 500;
}
.agree-btn {
    display: inline-block;
    vertical-align: top;
    width: 50%;
}
.agree-btn:first-child {
    padding-right: 5px;
}
.agree-btn:last-child {
    padding-left: 5px;
}
.agree-btn button {
    width: 100%;
    font-size: 18px;
    font-weight: 500;
}
.agree-btn .btn_point {
    background: #2a8ddc;
}
.agree-btn .btn_border {
    color: #2a8ddc;
    border-color: #2a8ddc;
}

#join_namecheck_style {
    margin-top: 20px;
}
#join_namecheck_style .cont {
    padding-left: 20px;
}

.join-box input:not([type="checkbox"]):not([type="radio"]),
.join-box select,
.myinfo-box input:not([type="checkbox"]):not([type="radio"]),
.myinfo-box select {
    max-width: 400px;
    width: 100%;
}
.join-box textarea,
.myinfo-box textarea {
    width: 100%;
    border: 1px solid #e5e5e5;
}
.join-box input:not([type="checkbox"]):not([type="radio"]),
.join-box select,
.join-box .button,
.myinfo-box input:not([type="checkbox"]):not([type="radio"]),
.myinfo-box select,
.myinfo-box .button {
    vertical-align: top;
    padding: 0 20px;
    height: 45px;
}
.join-box .button,
.myinfo-box .button {
    font-size: 18px;
}
.join-box .bottom-button,
.myinfo-box .bottom-button {
    margin-top: 55px;
    text-align: center;
    font-size: 0;
}
.join-box .bottom-button .button,
.myinfo-box .bottom-button .button {
    margin: 0 5px;
    width: 240px;
    height: 60px;
    font-size: 18px;
    color: #fff;
    font-weight: 700;
}
.join-table {
    width: 100%;
    border-top: 4px solid rgba(218, 90, 98, 0.3);
    border-bottom: 1px solid #ebebeb;
}
.my-contents .join-table {
    border-top: none;
}
.join-table tr {
    border-bottom: 1px solid #ebebeb;
}
.join-table tr th {
    padding: 20px 15px 20px 30px;
    width: 240px;
    text-align: left;
    font-size: 16px;
    font-weight: 400;
}
.join-table tr td {
    padding: 25px 15px;
    height: 85px;
    font-size: 16px;
    color: #777;
    font-weight: 300;
}
.join-table .red-point {
    color: #ff0000;
}
.join-table input {
    border-radius: 4px;
    border: 1px solid #dddddd;
}
.join-table input::placeholder {
    font-size: 14px;
    color: 999999;
    font-weight: 400;
}

.join-table .btn {
    height: 45px;
    min-width: 100px;
    margin-left: 10px;
    font-size: 16px;
    font-weight: 400;
}

@media (max-width: 1024px) {
    .join-box input:not([type="checkbox"]):not([type="radio"]),
    .join-box select,
    .join-box .button,
    .myinfo-box input:not([type="checkbox"]):not([type="radio"]),
    .myinfo-box select,
    .myinfo-box .button {
        max-width: none;
        height: 35px;
    }
    .join-box .button,
    .myinfo-box .button {
        width: 100px;
        font-size: 13px;
    }
    .input-button input:not([type="checkbox"]):not([type="radio"]) {
        width: calc(100% - 100px);
    }
    .input-box-address input {
        margin-top: 5px;
    }
    .input-box-tel3 {
        max-width: none;
    }
    .input-box-number {
        max-width: none;
    }
    .join-table {
        display: block;
        border-bottom: none;
    }
    .join-table tbody,
    .join-table tr {
        display: block;
    }
    .join-table tr th {
        display: block;
        padding: 15px 0 5px;
        width: 100%;
        font-size: 13px;
    }
    .join-table tr td {
        display: block;
        padding: 5px 0 15px;
        width: 100%;
        height: auto;
        font-size: 13px;
    }
    .join-box .bottom-button,
    .myinfo-box .bottom-button {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 30px -2px -2px;
    }
    .join-box .bottom-button .button,
    .myinfo-box .bottom-button .button {
        flex: 1 1;
        margin: 2px;
        max-width: 200px;
        height: 40px;
        font-size: 14px;
    }
}
@media (max-width: 768px) {
}

.join-complete-box {
    margin-top: 50px;
    padding: 32px 0 0;
    border-top: 1px solid #e5e5e5;
}
.join-complete-box img {
    margin: auto;
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
}
.join-complete-box .text_wrap {
    text-align: center;
}
.join-complete-box h1 {
    margin: 30px 0 13px;
    font-size: 30px;
    color: #555555;
    font-weight: 500;
}
.join-complete-box p {
    line-height: 23px;
    font-size: 15px;
    color: #777777;
    font-weight: 400;
}
.join-complete-box strong {
    font-weight: 700;
}

.join-complete-box .bottom-button {
    margin-top: 55px;
    text-align: center;
}
.join-complete-box .bottom-button .button {
    width: 150px;
    height: 50px;
}
.join-complete-box .bottom-button .button span {
    font-size: 16px;
}
@media (max-width: 1024px) {
    .join-complete-box img {
        width: auto;
        height: 75px;
        -webkit-transform: translateX(5px);
        -ms-transform: translateX(5px);
        transform: translateX(5px);
    }
    .join-complete-box h1 {
        font-size: 15px;
    }
    .join-complete-box p {
        font-size: 13px;
    }
    .join-complete-box .bottom-button {
        margin-top: 35px;
    }
    .join-complete-box .bottom-button .button {
        height: 40px;
    }
    .join-complete-box .bottom-button .button span {
        font-size: 13px;
    }
}
@media (max-width: 768px) {
    .join-complete-box img {
        width: auto;
        height: 55px;
    }
}

/* --- ID & PW --- */
.idpw-container {
    padding-bottom: 50px;
}
.idpw-container .head_title {
    margin: 45px 0 0;
    padding: 10px 0;
    background: none;
    text-align: center;
}
.idpw-container .head_title h3 {
    font-size: 28px;
    line-height: 23px;
    color: #333333;
    font-weight: 600;
}
.idpw-container .idpw_wrap {
    margin-top: 30px;
}
.idpw-container .idpw_wrap input {
    margin-bottom: 5px;
    width: 100%;
    height: 60px;
    border: 1px solid #e5e5e5;
}
.idpw-container .idpw_wrap .button {
    margin-top: 35px;
    width: 100%;
    height: 60px;
    border-radius: 8px;
}
.personal {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 30px;
    padding: 50px 60px;
    width: 100%;
    background-color: #fdfdfd;
    border: 5px solid #f4cdcc;
}
.personal p {
    line-height: 23px;
    font-size: 16px;
    color: #777777;
    font-weight: 400;
}
.personal .button-personal {
    display: inline-block;
    vertical-align: top;
    background: url("/child/img/login/personal-arrow.png") no-repeat right 1px center;
    padding-right: 18px;
    height: 23px;
    font-size: 14px;
    color: #da5a57;
    font-weight: 500;
}

.idpw-container {
    display: flex;
    margin-left: -35px;
    width: calc(100% + 70px);
}
.idpw-col {
    margin-top: -45px;
    padding: 0 0 35px;
    width: 50%;
}

.idpw-col .border .login-box {
    min-height: 410px;
}
@media (max-width: 1024px) {
    .idpw-container {
        flex-direction: column;
        margin: auto;
        width: 100%;
        max-width: 340px;
    }
    .idpw-col {
        padding: 15px 0;
        width: 100%;
    }
}
@media (max-width: 768px) {
    .personal {
        flex-direction: column;
    }
}

/* ------- My Page ------- */
.join_input_button {
    position: relative;
}
.join_input_button .join-btn-wrap {
    float: right;
}
.join_input_button .join-btn-wrap + div {
    position: absolute;
    top: 15px;
    left: 0;
}

/* --- My Info --- */
.my_info_wrap {
    border-top: 1px solid #777777;
}
#m_password1,
#m_password2 {
    max-width: 330px;
    width: 100%;
    height: 40px;
}
#m_phone1,
#m_phone2,
#m_phone3,
#m_tel1,
#m_tel2,
#m_tel3 {
    width: 100%;
    height: 40px;
}
#m_email {
    max-width: 330px;
    width: 100%;
    height: 40px;
}
#m_post {
    width: 80px;
    height: 40px;
}
#m_address1,
#m_address2 {
    margin-top: 5px;
    max-width: 330px;
    width: 100%;
    height: 40px;
}
#m_zipsearch {
    max-width: 100px;
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-weight: 400;
}
#my_info_style .btn_confirm {
    vertical-align: top;
}
.join-btn {
    display: inline-block;
    vertical-align: top;
    padding: 0 5px;
}

/* --- Coupon --- */
#coupon_style {
    border-top: 2px solid #777777;
}
#coupon_style tr th {
    background: #fbfbfb;
}

/* --- My Reserve (Point) --- */
/* #point_top_style { margin-bottom: 10px; padding-top: 40px; width: 100%; height: 145px; text-align: center; background: #f8f8f8; border: 1px solid #f3f3f3; }
#point_top_style h1 { margin-bottom: 10px; font-size: 16px; color: #333333; font-weight: 500; }
#point_top_style span { font-family: Arial; display: inline-block; vertical-align: middle; }
#point_top_style span:nth-child(2) { font-size: 37px; color: #333333; font-weight: 700; }
#point_top_style span:last-child { margin-left: 5px; width: 90px; height: 27px; line-height: 28px; text-align: center; font-size: 20px; color: #fff; font-weight: 700; background: #766959; border-radius: 13px; }
#point_top_style span:last-child:after { content: 'POINT'; }
#point_bottom_style tr td { padding: 20px 0 20px 30px; }
span.point_num { display: inline-block; vertical-align: middle; font-size: 15px; color: #555555; }
span.point { display: inline-block; vertical-align: middle; color: #333333; font-weight: 700; margin-left: 5px; width: 50px; height: 17px; line-height: 19px; text-align: center; font-size: 12px !important; color: #fff; font-weight: 700; background: #766959; border-radius: 8px; }
span.point:after { content: 'POINT'; } */
.point-top {
    margin-bottom: 34px;
    padding: 30px 15px;
    text-align: center;
    background: #766959;
    border-top: 1px solid #aaaaaa;
}
.point-top span {
    display: inline-block;
    vertical-align: middle;
    padding: 0 18px;
    line-height: 33px;
    font-size: 21px;
    color: #fff;
    font-weight: 500;
}
.point-top span:first-child {
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

/* .i-point { display: inline-block; vertical-align: middle; margin-right: 15px; width: 30px; height: 30px; background: url('/child/img/icon/wing.png'); } */

.my-point-box {
    margin-bottom: 27px;
}
.my-point-box:last-child {
    margin-bottom: 0;
}
.p-date {
    font-size: 15px;
    color: #777777;
}
.point-box {
    margin-top: 10px;
    padding: 12px 40px 10px;
    width: 100%;
    background: #fafafa;
    border-top: 1px solid #cccccc;
}
.point-table {
    display: table;
    width: 100%;
    border-collapse: collapse;
}
.point-row {
    display: table-row;
}
.point-row:first-child {
    border-bottom: 1px solid #e5e5e5;
}
.point-th {
    display: table-cell;
    vertical-align: middle;
    padding: 15px 0 16px;
    text-align: left;
    font-size: 15px;
    color: #555555;
}
.point-td {
    display: table-cell;
    vertical-align: middle;
    padding: 15px 0 16px;
    text-align: right;
    font-size: 15px;
    color: #555555;
}
.my-p {
    font-size: 15px;
    color: #333333;
    font-weight: 500;
}

/* 관심상품 */
.wishlist-top {
    padding: 50px;
    background: #fafafa;
    font-size: 18px;
    color: #333333;
    font-weight: 500;
    border-bottom: 1px solid #bbbbbb;
}
.wishlist-top i {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    width: 25px;
    height: 21px;
    background: url("/child/img/icon/wish.png");
}
.wish-table {
    display: table;
    width: 100%;
    border-collapse: collapse;
}
.wish-row {
    display: table-row;
    border-bottom: 1px solid #e5e5e5;
}
.wish-th {
    display: table-cell;
    vertical-align: middle;
    padding: 15px 30px 16px !important;
    min-width: 95px;
    font-size: 15px;
    color: #555555;
    font-weight: 500 !important;
}
.wish-td {
    display: table-cell;
    vertical-align: middle;
    padding: 25px 0;
    min-width: 95px;
    font-size: 15px;
    color: #555555;
}
.wish-col {
    display: inline-block;
    vertical-align: middle;
    padding: 30px;
}
.wish-col:nth-child(2) {
    padding: 0 0 0 10px;
}
.wish-btn-wrap {
    text-align: right;
}
.del-list {
    margin-left: 15px;
    font-size: 15px;
    color: #555555;
    font-weight: 500;
    cursor: pointer;
}
.del-list i {
    display: inline-block;
    vertical-align: -6px;
    margin-right: 5px;
    width: 19px;
    height: 22px;
    background: url("/child/img/icon/wish-del.png");
}
.del-list span {
    display: inline-block;
    vertical-align: middle;
}
.wish-image {
    display: block;
    overflow: hidden;
    height: 135px;
}
.wish-image img {
    width: auto;
    height: 100%;
}
.wish-name {
    font-size: 17px;
}
.wish-price {
    display: block;
    padding: 0 30px;
    text-align: right;
}
.wish-price em {
    padding-right: 2px;
    font-style: normal;
    font-family: Arial;
    font-size: 25px;
    font-weight: bold;
}

/* 1:1 문의 */
.ask-top {
    position: relative;
    padding: 35px 50px;
    background: #fafafa;
}
.ask-top i {
    display: inline-block;
    vertical-align: -6px;
    margin-right: 15px;
    width: 24px;
    height: 24px;
    background: url("/child/img/icon/ask.png");
}
.ask-top span {
    font-size: 18px;
    color: #333333;
    font-weight: 500;
}
.ask-top a {
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 50px;
    margin: auto;
    width: 110px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 16px;
    color: #fff !important;
    font-weight: 500;
    background: #2a8ddc;
}

/* --- My Out --- */
#my_out_style tr th {
    letter-spacing: -0.06em;
    font-size: 15px;
    color: #333333;
    font-weight: 700;
}
#my_out_style tr th span {
    color: #766959;
}
#my_out_style tr td {
    padding: 25px 2%;
}
#my_out_style tr td input {
    width: 100%;
    height: 45px;
}
#my_out_style tr td select {
    width: 100%;
}
#my_out_style tr td textarea {
    width: 100%;
    height: 100px;
}

/* --- Wishlist --- */
#wishlist_icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    width: 22px;
    height: 20px;
    background: url("/child/img/icon/icon_wishlist.png") no-repeat center;
}
#wishlist_total {
    font-size: 15px;
    color: #333333;
    font-weight: 500;
}
#wishlist_style {
    margin-top: 20px;
    border-top: 2px solid #777777;
}

/* 아이디 중복확인 ----------------------*/
.id_check_tit {
    position: relative;
    height: 38px;
    line-height: 38px;
    font-size: 16px;
    color: #fff;
    font-weight: 500;
    letter-spacing: -0.05em;
    padding-left: 15px;
    background: #aaa;
}
.id_check_tit a.close {
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -10px;
}
.modal-id input,
.modal-id .button {
    border-radius: 4px;
}
.id_check_cont {
    text-align: center;
}
.id_check_cont p {
    margin: 30px 0 0;
    font-size: 13px;
    color: #666;
}
.id_check_cont .id_search {
    background: #f7f7f7;
    border: 1px solid #ddd;
    padding: 15px 0;
    margin: 20px 25px;
}
.id_check_cont .id_search input {
    width: 150px;
    height: 45px;
    background: #fff;
    border: 1px solid #ddd;
    padding: 0 0 0 5px;
    color: #333;
    margin: 0 3px 0 10px;
}
.id_check_cont .id_search button {
    width: 80px;
    height: 45px;
    background: #555;
    color: #fff;
}
.id_check_cont .id_result {
    text-align: center;
    font-size: 13px;
    color: #333;
    line-height: 1.6;
}
.id_check_cont .id_result b {
    font-weight: 600;
    color: #ff1d1d;
}
.id_check_cont .button {
    margin-top: 15px;
    padding: 0 15px;
}

.modal__body .btn {
    min-width: 100px;
    margin-left: 10px;
    height: 45px;
}
.modal__body_id_check {
    display: inline-flex;
}
.modal__body_id_check input {
    min-width: 400px;
}

.modal__body_id_search {
    margin-top: 20px;
}
.modal__body_id_search_use {
    display: flex;
    align-items: center;
}
.modal__body_id_search {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
}
.modal__body_id_search span {
    font-weight: 400;
    font-size: 16px;
    color: #777777;
}
@media (max-width: 1024px) {
    .modal__body_id_check input {
        min-width: auto;
    }
}

/* 주소찾기 팝업 */
.modal__post [id*="__daum__layer_"],
.modal__post iframe {
    width: 100% !important;
}

/* 마이페이지 */
.mypage-visual {
    width: 100%;
    padding: 50px 0;
    text-align: center;
    border-radius: 8px;
    margin: 100px 0 60px;
    background-image: url("/child/img/login/mypage-bg.png");
    background-size: cover;
    background-repeat: no;
}
.mypage-visual h1 {
    font-size: 40px;
    font-weight: 600;
}

.my-contents {
    padding: 25px 0 120px;
}
.my-contents2 {
    padding: 0 0 120px;
}
.my:after {
    content: "";
    display: block;
    clear: both;
}
.my-l {
    float: left;
    width: 150px;
    margin-right: 50px;
    border-top: 2px solid #da5a57;
}
.my-r {
    float: left;
    width: calc(100% - 200px);
}
.mymenu-link {
    overflow: hidden;
    display: block;
    position: relative;
    padding: 0 10px;
    height: 55px;
    line-height: 55px;
    font-size: 18px;
    color: #777777;
    cursor: pointer;
}
.mymenu-link::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: #ebebeb;
}
.mymenu-link__arrow {
    display: none;
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0;
    margin: auto;
    width: 20px;
    height: 20px;
    opacity: 0;
}
.mymenu-link__arrow::before,
.mymenu-link__arrow::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 8px;
    height: 1px;
    background: #2a8ddc;
}
.mymenu-link__arrow::before {
    margin-top: 7px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.mymenu-link__arrow::after {
    margin-bottom: 7px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.mymenu-link--on,
.mymenu-link:hover {
    color: #da5a57;
    font-weight: 500;
}
.mymenu-link--on .mymenu-link__arrow {
    opacity: 1;
}

.head_title {
    padding: 12px 12px 12px 40px;
    text-align: left;
    background: url("/child/img/icon/icon_title.png") no-repeat center left / 22px;
    background-position-x: 8px;
}
.head_title h3 {
    margin-bottom: 0;
    font-size: 18px;
    line-height: 23px;
    color: #333333;
    font-weight: 500;
}
.my-title {
    font-size: 28px;
    font-weight: 600;
    padding-bottom: 30px;
    position: relative;
}
.my-menu-title {
    margin-bottom: 20px;
    font-size: 24px;
}

.my-title::after {
    content: "";
    display: block;
    width: 100%;
    height: 4px;
    background-color: #ebebeb;
    position: absolute;
    bottom: 0;
    left: 0;
}

/*입학 및 수강내역*/
.edu-list {
    margin-bottom: 20px;
    overflow: hidden;
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    border: 1px solid #ebebeb;
    border-radius: 8px;
}
.edu-list:last-child {
    margin-bottom: 0;
}
.edu-list-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px;
}
.edu-list-top-l {
    width: 50%;
    box-sizing: border-box;
    padding-right: 20px;
    position: relative;
}
.edu-list-top-l::after {
    content: "";
    display: block;
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: #ebebeb;
    right: 0;
    top: 0;
}
.edu-list-top-l > p:first-child {
    font-size: 18px;
    font-weight: 400;
}
.edu-list-top-l > p:last-child {
    font-size: 16px;
    color: #999999;
    font-weight: 400;
}
.edu-list-top-md > p:first-child {
    font-size: 14px;
    font-weight: 400;
    color: #999999;
}
.edu-list-top-md > p:last-child {
    font-size: 18px;
    font-weight: 400;
    text-align: right;
}
.edu-list-top-md > p:last-child > strong {
    color: #da5a57;
    font-weight: 600;
    font-size: 28px;
    margin: 0 4px 0 18px;
}
.edu-list-top-r > p {
    width: 80px;
    height: 24px;
    line-height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
}
.edu-list-top-r > p:first-child {
    background-color: #da5a57;
}
.edu-list-top-r > p:last-child {
    background-color: #447fdf;
    margin-top: 10px;
}
.edu-list-bottom {
    background-color: #f9f9f9;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    line-height: 40px;
}
.edu-list-bottom > p,
.edu-list-bottom > button {
    color: #777777;
    font-size: 14px;
    font-weight: 400;
}

.board-list-wrap {
    width: 100%;
}

.modal-payment-list {
    min-width: 1050px;
}
.modal-payment-list .modal__head {
    padding: 60px 0 30px;
    border-bottom: 4px solid rgba(218, 90, 87, 0.3);
}
.modal-payment-list .modal__head h1 {
    font-size: 28px;
    font-weight: 600;
    text-align: center;
}
.modal-payment-list .modal__body {
    padding: 15px 30px 60px 30px;
    margin-left: 0;
}
.modal-payment-list .modal__foot {
    border-top: 0;
}
.modal-payment-list .modal__foot .modal__buttons {
    padding-top: 0;
}
.modal-payment-list .modal__close svg {
    fill: #da5a57;
}
.modal__body_order {
    display: flex;
    justify-content: space-between;
}
.order__wrap {
    display: flex;
    color: #777777;
    font-size: 16px;
    font-weight: 400;
}
.order__wrap > span:last-child {
    margin-left: 21px;
    position: relative;
    display: inline-block;
}
.order__wrap > span:last-child::before {
    content: "";
    display: block;
    width: 1px;
    height: 14px;
    position: absolute;
    left: -11px;
    top: 6px;
    background-color: #dddddd;
}
.modal__body_order a {
    border-radius: 4px;
    background-color: #f9f9f9;
    border: 1px solid #ebebeb;
    width: 100px;
    line-height: 32px;
    color: #777777;
    font-size: 14px;
    font-weight: 400;
    display: block;
    text-align: center;
}

.modal-payment-list tr,
.modal-payment-list td,
.modal-payment-list th,
.modal-payment-list h4 {
    padding: 0 10px;
}
.modal-payment-list td {
    color: #777777;
    font-size: 16px;
    font-weight: 400;
    line-height: 44px;
}
.modal-payment-list thead tr td,
.modal-payment-list h4 {
    background-color: #f9f9f9;
    font-size: 16px;
    font-weight: 400;
    line-height: 44px;
    color: #333;
}
.modal-payment-list th {
    width: 120px;
    text-align: left;
    font-size: 16px;
    font-weight: 400;
    line-height: 44px;
    color: #333;
}
.modal-payment-list tr:not(thead tr, .border-top-bottom tr) {
    border-bottom: 1px solid #ebebeb;
}
.modal-payment-list-s3 {
    display: flex;
    justify-content: space-between;
}
.modal-payment-list-table1 {
    width: 100%;
    margin: 10px 0 70px;
}
/* .modal-payment-list-table1 thead tr td{text-align: center;} */
.modal-payment-list-l {
    width: calc((100% - 20px) / 2);
    margin-right: 20px;
}
.modal-payment-list-r {
    width: calc((100% - 20px) / 2);
}
.modal-payment-list-table2,
.modal-payment-list-table3,
.modal-payment-list-table4 {
    width: 100%;
}
.border-top-bottom {
    margin-top: 44px;
}
.border-top-bottom th {
    background-color: #f9f9f9;
}
.border-top-bottom td {
    text-align: left;
    border-top: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
}

@media (max-width: 1024px) {
    .idpw-col .border .login-box {
        min-height: unset;
    }
    .idpw-container .idpw_wrap .button {
        font-size: 14px;
    }
    .head_title h3 {
        font-size: 24px;
    }
    .login-box {
        margin-top: 15px;
    }
    .personal {
        padding: 20px 30px;
    }
    .personal p {
        font-size: 14px;
    }

    .modal-payment-list {
        min-width: unset;
    }
    .modal-container {
        padding: 0 15px;
    }

    .sub_head_title .fRight {
        display: none;
    }

    .head_title {
        background-size: auto 20px;
    }
    .head_title h3 {
        font-size: 16px;
    }
    .join_input_tit_wrap h3 {
        font-size: 16px;
    }

    .mypage-visual {
        margin: 50px 0 30px;
    }

    .my-l {
        float: none;
        display: flex;
        width: 100%;
        justify-content: center;
        border-top: none;
        margin-right: 0;
        margin-bottom: 20px;
    }
    .mymenu {
        display: flex;
    }
    .mymenu-link {
        font-size: 16px;
    }
    .mymenu-link::after {
        display: none;
    }
    .my-r {
        width: 100%;
        padding-left: 0;
        float: none;
    }
    .s-top-text h4 {
        line-height: 29px;
        font-size: 22px;
    }
    .s-top-text p {
        font-size: 14px;
    }
    .s-top-text a {
        font-size: 14px;
    }

    .modal-payment-list thead tr td,
    .modal-payment-list tr,
    .modal-payment-list td,
    .modal-payment-list th,
    .modal-payment-list h4 {
        font-size: 14px;
    }
    .modal__body_order {
        flex-direction: column-reverse;
        align-items: center;
    }
    .modal__body_order button {
        margin-bottom: 10px;
    }
    .order__wrap {
        font-size: 14px;
    }
    .modal-payment-list-s3 {
        display: block;
    }
    .modal-payment-list-l,
    .modal-payment-list-r {
        width: 100%;
    }
    .border-top-bottom {
        margin: 20px 0;
    }
    .modal-payment-list-table1 {
        margin: 10px 0 20px;
    }
    .modal-payment-list .modal__foot {
        margin-top: 30px;
    }
    .modal-payment-list td,
    .modal-payment-list thead tr td,
    .modal-payment-list h4,
    .modal-payment-list th {
        line-height: 32px;
    }

    .order__wrap > span:last-child {
        margin-left: 10px;
    }
    .order__wrap > span:last-child::before {
        display: none;
    }
    .modal__body {
        padding: 20px 30px 30px 30px;
    }
    .modal__body .btn {
        height: 35px;
    }
    .modal__head {
        margin: 0 30px;
    }

    .join-table .btn {
        height: 35px;
        font-size: 13px;
    }

    .my-title {
        font-size: 24px;
        padding-bottom: 20px;
    }
    .address-wrap {
        display: flex;
    }

    .edu-list-top {
        display: block;
    }
    .edu-list-top > * {
        width: 100%;
    }
    .edu-list-top-l::after {
        display: none;
    }
    .edu-list-top-l > p:first-child {
        font-size: 16px;
    }
    .edu-list-top-l > p:last-child {
        font-size: 14px;
    }
    .edu-list-top-md {
        display: flex;
        align-items: flex-end;
    }
    .edu-list-top-md > p:first-child {
        position: relative;
        top: -5px;
        margin-right: 15px;
    }
    .edu-list-top-md > p:last-child {
        text-align: left;
        font-size: 16px;
    }
    .edu-list-top-md > p:last-child > strong {
        margin: 0 2px 0 10px;
        font-size: 24px;
    }
    .edu-list-top-r {
        display: flex;
        margin-top: 10px;
    }
    .edu-list-top-r > p:last-child {
        margin: 0 0 0 5px;
    }
    .score-table-wrap {
        width: 100%;
        overflow: auto;
        margin-bottom: 30px;
    }
    .score-table tr td,
    .score-table-th th,
    .score-table-td-1st {
        font-size: 14px;
        padding: 10px;
    }
    .score-table-title {
        font-size: 18px;
    }

    .board-list-wrap {
        overflow: auto;
    }
    .bbs-list-table tr th,
    .bbs-list-table tr td {
        font-size: 14px !important;
    }

    .mypage-visual h1 {
        font-size: 28px;
    }
}

@media (max-width: 768px) {
    .mymenu {
        flex-wrap: wrap;
    }
    .mymenu li {
        width: 50%;
        text-align: center;
    }
    .mymenu-link {
        line-height: 18px;
        height: auto;
        padding: 5px;
    }
}

/* 개인정보처리방침 & 이용약관 */
@media (max-width: 768px) {
    .join-agree-top .page-line-tit {
        font-size: 18px;
    }
    .terms-area * {
        font-size: 13px !important;
    }
    .all-agree span {
        font-size: 16px;
    }
    .bottom-button .btn {
        font-size: 14px;
        width: 150px;
        height: 38px;
    }
    .check > span {
        font-size: 14px;
    }
}