@charset "utf-8";

/* 3) 정렬 */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

/* 4) button */
.common-button {
    overflow: hidden;
    position: relative;
    /* margin: 2rem; */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 5rem 20rem;
    background: #222;
    font-weight: normal;
    color: var(--color-white, #fff);
    transition: 0.3s ease 0s;

    &.red {
        background: #BA2427;
    }

    &.blue {
        background: #1637a2;
        border: 1rem solid #1637a2;
    }

    &.black {
        background: var(--color-black, #000);
        border: 1rem solid var(--color-black, #000);
    }

    &.gray {
        background: #92999e;
        border: 1rem solid #92999e;
    }

    &.white {
        background: var(--color-white, #fff);
        border: 1rem solid #cdcdcd;
        color: var(--color-base, #333);
    }

    &.white span {
        color: var(--color-base, #333);
    }

    span {
        position: relative;
        z-index: 2;
        color: inherit;
    }

    /* button-size */
    & {
        min-width: 100rem;
        min-height: 40rem;
    }

    &.lg {
        min-width: 140rem;
        min-height: 50rem;
        font-size: 18rem;
        letter-spacing: -1rem;
    }

    &.sm {
        min-width: 60rem;
        min-height: 23rem;
        padding: 0 10rem;
        font-size: 12rem;
        font-weight: 500;
    }

    /* button hover */
    &:hover,
    &:focus {
        opacity: 0.6;
    }

    &.white:hover,
    &.white:focus {
        border-color: var(--color-black, #000);
    }

    @media(max-width:1280px) {
        & {
            min-width: 100rem;
            font-size: 14rem;
        }

        &.lg {
            min-width: 100rem;
            font-size: 16rem;
        }
    }

    @media(max-width:767px) {
        & {
            padding: 8rem 10rem;
        }

        &.lg {
            min-width: 80rem;
        }
    }
}

/* 5) Form Control */
.sys-common {

    i,
    em {
        font-style: normal;
    }

    input,
    select,
    textarea,
    label {
        display: inline-block;
        width: auto;
        vertical-align: middle;
        font-size: var(--font-base, 14rem);
    }

    :where([type="date"],
        [type="datetime-local"],
        [type="email"],
        [type="month"],
        [type="number"],
        [type="password"],
        [type="search"],
        [type="tel"],
        [type="text"],
        [type="time"],
        [type="url"],
        [type="week"],
        select,
        textarea) {
        height: 40rem;
        padding: 7rem 8rem;
        /* margin:2rem 0px; */
        border: 1rem solid #ddd;
        background: var(--color-white, #fff);
        border-radius: 1px;
    }

    select {
        appearance: none;
        padding-right: 20rem;
        background: var(--color-white, #fff) url(/assets/images/pages/select_arrow.svg) no-repeat calc(100% - 7rem) 50% / 7rem;
    }

    input[type="file"] {
        background: #fafafa;
        font-size: 15rem;
        padding: 10rem;
        cursor: pointer;
    }

    :where(input[readonly], input[disabled]) {
        background: #f5f5f5;
    }

    /* :where(input[type="checkbox"], input[type="radio"]){width:13rem; height:13rem; margin:2rem 3rem 1rem 0;} */
    table {
        width: 100%;
    }

    /* form width */
    [class*="width-"] {
        width: 100%;
    }

    .width-50 {
        max-width: 50rem;
    }

    .width-70 {
        max-width: 70rem;
    }

    .width-100 {
        max-width: 100rem;
    }

    .width-200 {
        max-width: 200rem;
    }

    .width-327 {
        max-width: 327rem;
    }

    .width-300 {
        max-width: 300rem;
    }

    .width-400 {
        max-width: 400rem;
    }

    .width-800 {
        max-width: 800rem;
    }

    .width-500 {
        max-width: 500rem;
    }

    .width-840 {
        max-width: 840rem;
    }

    .width-full {
        max-width: 100%;
    }
}

/* 221028 이용약관 */
#content:not(:has(.join_area)) {
    .privacy .sub_title {
        display: none;
    }

    .privacy h2 {
        font-weight: 700;
        font-size: 40rem;
        color: #222;
        text-align: center;
    }

    .privacy h3 {
        margin-bottom: 20rem;
        font-weight: 700;
        font-size: 17rem;
        color: #222;
    }

    .privacy ul li,
    .privacy p {
        line-height: 1.6;
        font-weight: 300;
        color: #666;
    }

    .privacy p {
        font-size: 14rem;
    }

    .privacy ul li {
        font-size: 15rem;
    }

    .privacy ul li+li {
        margin-top: 8rem;
    }

    .privacy ul li ul {
        margin-top: 5rem;
        margin-bottom: 20rem;
        padding-left: 15rem;
    }

    .privacy .privacy_box {
        padding: 40rem 0;
        border-bottom: 1px solid #ddd;
    }

    .privacy .privacy_box:first-child {
        padding-top: 0;
    }

    .privacy .privacy_box:last-child {
        border: none;
        padding-bottom: 0;
    }

    @media(max-width:1279px) {
        .privacy h2 {
            font-size: 24rem;
        }
    }

    @media(max-width:767px) {
        .privacy h3 {
            font-size: 15rem;
        }
    }
}