@charset "UTF-8";
/* noto-sans-kr-300 - korean_latin */
/*폰트 세팅*/
div, a, li, ul, ol, section, article, nav, head, footer, menu, aside, input, select, textarea, p, label, h1, h2, h3, h4, h5, h6 {
    font-family: 'Samsung One',sans-serif;
    color: #666;
}

/*폰트 컬러*/
.bcGrayE {
    background: #eee;
}

.bcSoftgray {
    background: #fafafa;
}

/*width 크기 가로값*/
.w100 {
    width: 100px !important;
}

.w200 {
    width: 200px !important;
}

.wd100 {
    width: 100% !important;
}

.wd90 {
    width: 90% !important;
}

.wd80 {
    width: 80% !important;
}

.wd70 {
    width: 70% !important;
}

.wd60 {
    width: 60% !important;
}

.wd50 {
    width: 50% !important;
}

.wd49 {
    width: 49% !important;
}

.wd40 {
    width: 40% !important;
}

.wd30 {
    width: 30% !important;
}

.wd20 {
    width: 20% !important;
}

.wd10 {
    width: 10% !important;
}

.wAuto {
    width: auto !important;
}

.flr {
    float: right;
}

.m5 {
    margin: 5px;
}

.mt5 {
    margin-top: 5px;
}

.mt10 {
    margin-top: 10px;
}

.mb5 {
    margin-bottom: 5px;
}

.ml5 {
    margin-left: 5px !important;
}

.mr5 {
    margin-right: 5px !important;
}

.ma5 {
    margin: 5% 0;
}

.mb20 {
    margin-bottom: 20px;
}

.mat5 {
    margin-top: 5%;
}

.mab5 {
    margin-bottom: 5%;
}

.mal2 {
    margin-left: 2%;
}

.pa2 {
    padding: 2%;
}

.pa5 {
    padding: 2%;
}

.patb2 {
    padding: 2% 0;
}

.txtC {
    text-align: center;
}

.teC {
    text-align: center;
}

.txtL {
    text-align: left;
}

.boderT1 {
    border-top: 1px solid #ccc;
}

.disFlex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: normal;
    -ms-flex-pack: normal;
    justify-content: normal;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6, p, span {
    margin: 0 auto;
    padding: 0;
}

table {
    border-collapse: collapse;
}

figure {
    margin: 0;
    padding: 0;
}

img {
    width: 100%;
}

/*메인 공통*/
body {
    background: #E2EAF7 !important;
    max-width: 640px !important;
    margin: 0 auto !important;
    font-size: 15px !important;
    padding: 2%;
}

header {
    margin: 0 auto;
    background: #fff;
    border: 1px solid #ccc;
    padding: 2%;
    margin-bottom: 2vh;
}

    header h1 {
        width: 40%;
        margin: 0 auto;
        padding: 0;
    }

        header h1 img {
            width: 100%;
        }

    header h2 {
        width: 100%;
        margin: 0 auto;
        padding: 0;
    }

        header h2 p {
            color: #000 !important;
            text-align: center !important;
            font-size: 1.35rem !important;
            font-weight: bold !important;
        }

footer {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    padding: 15px;
    background: #333;
    color: #fff;
    text-align: center;
    float: left;
}

    footer h4 {
        color: #fff;
        font-size: 1.15rem;
        font-weight: bold;
    }

    footer > div p {
        display: inline-block;
        color: #bbb;
        font-size: 14px;
        font-weight: 300;
        white-space: pre-line;
        margin: 1vh 0;
    }

main {
    position: relative;
    margin: 0 auto;
    background: #fff;
    width: auto;
    height: auto;
}

.view {
    border: 1px solid #ccc;
    padding: 2%;
    border-radius: 0 0 25px 25px;
}

    .view img.thum {
        width: 100%;
        margin: 0 auto;
    }

    .view h3 {
        font-weight: bold;
        color: #0c4f9e;
        font-size: 1.25rem;
        margin: 3% 0;
    }

    .view .view_list {
        border-top: 1px solid #ccc;
    }

        .view .view_list li {
            padding: 2vh 2vw;
            border-bottom: 1px solid #ccc;
            vertical-align: middle;
        }

            .view .view_list li p {
                display: inline-block;
                width: 25%;
                font-weight: 600;
            }

            .view .view_list li span.input_code {
                display: inline-block;
                width: 60%;
            }

            .view .view_list li > div.amount_box {
                display: inline-block;
                position: relative;
                width: 140px;
                padding: 0px 30px;
            }

                .view .view_list li > div.amount_box > a {
                    position: absolute;
                    width: 30px;
                    height: 30px;
                    top: 0;
                    background: #222;
                }

                    .view .view_list li > div.amount_box > a.minus {
                        left: 0;
                        border-radius: 3px 0px 0px 3px;
                    }

                        .view .view_list li > div.amount_box > a.minus:before {
                            content: "";
                            position: absolute;
                            width: 18px;
                            height: 18px;
                            height: 2px;
                            background: #fff;
                            top: 50%;
                            margin-top: -1px;
                            left: 50%;
                            margin-left: -9px;
                        }

                        .view .view_list li > div.amount_box > a.minus:after {
                            content: "";
                            position: absolute;
                            width: 18px;
                            height: 18px;
                            height: 2px;
                            background: #fff;
                            top: 50%;
                            margin-top: -1px;
                            left: 50%;
                            margin-left: -9px;
                        }

                    .view .view_list li > div.amount_box > a.plus {
                        right: 0;
                        border-radius: 0px 3px 3px 0px;
                    }

                        .view .view_list li > div.amount_box > a.plus:before {
                            content: "";
                            position: absolute;
                            width: 18px;
                            height: 2px;
                            background: #fff;
                            top: 50%;
                            margin-top: -1px;
                            left: 50%;
                            margin-left: -9px;
                            -webkit-transform: rotate(90deg);
                            transform: rotate(90deg);
                        }

                        .view .view_list li > div.amount_box > a.plus:after {
                            content: "";
                            position: absolute;
                            width: 18px;
                            height: 2px;
                            background: #fff;
                            top: 50%;
                            margin-top: -1px;
                            left: 50%;
                            margin-left: -9px;
                        }

                    .view .view_list li > div.amount_box > a > span.s_only {
                        position: absolute;
                        width: 0;
                        height: 0;
                        font-size: 0;
                        line-height: 0;
                        opacity: 0;
                    }

                .view .view_list li > div.amount_box > input[type='number'] {
                    border: 1px solid #ddd;
                    width: 100%;
                    font-size: 14px;
                    text-align: center;
                    border-radius: 0;
                    padding: 5px;
                    height: 30px;
                }

                .view .view_list li > div.amount_box > input[type='text'] {
                    border: 1px solid #ddd;
                    width: 100%;
                    font-size: 14px;
                    text-align: center;
                    border-radius: 0;
                    padding: 5px;
                    height: 30px;
                }

                .view .view_list li > div.amount_box button {
                    position: absolute;
                    width: 30px;
                    height: 30px;
                    top: 0;
                    background: #222;
                    font-size: 0;
                    border: none;
                }

                    .view .view_list li > div.amount_box button.num_minus {
                        left: 0;
                        border-radius: 3px 0px 0px 3px;
                    }

                        .view .view_list li > div.amount_box button.num_minus:before {
                            content: "";
                            position: absolute;
                            width: 18px;
                            height: 2px;
                            background: #fff;
                            top: 50%;
                            margin-top: -1px;
                            left: 50%;
                            margin-left: -9px;
                        }

                    .view .view_list li > div.amount_box button.num_plus {
                        right: 0;
                        border-radius: 0px 3px 3px 0px;
                    }

                        .view .view_list li > div.amount_box button.num_plus:before {
                            content: "";
                            position: absolute;
                            width: 18px;
                            height: 2px;
                            background: #fff;
                            top: 50%;
                            margin-top: -1px;
                            left: 50%;
                            margin-left: -9px;
                            -webkit-transform: rotate(90deg);
                            transform: rotate(90deg);
                        }

                        .view .view_list li > div.amount_box button.num_plus:after {
                            content: "";
                            position: absolute;
                            width: 18px;
                            height: 2px;
                            background: #fff;
                            top: 50%;
                            margin-top: -1px;
                            left: 50%;
                            margin-left: -9px;
                        }

.form h3 {
    margin: 0;
    padding: 3%;
    font-size: 1.5rem;
    color: #fff;
    font-weight: 700;
    background: #0c4f9e;
}

.form h4 {
    padding: 2% 1%;
    color: #000;
    font-size: 1.25rem;
    font-weight: 600;
}

.form hr {
    border: 0;
    border-top: 1px solid #ccc;
}

.form .product_name {
    color: #0c4f9e;
    font-weight: 600;
    margin-left: 2%;
    text-align: left;
}

.form .product_price {
    margin-top: 1vh;
    text-align: left;
}

.complete {
    background: #0c4f9e;
    padding: 4% 0;
    height: auto;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -o-flex;
    -webkit-flex-wrap: wrap;
}

    .complete > div.main {
        background: #fff;
        width: 90%;
        height: auto;
        margin: 0 auto;
        text-align: center;
    }

        .complete > div.main > p {
            color: #0c4f9e;
            font-size: 1.25rem;
            font-weight: 600;
        }

        .complete > div.main .complete_form {
            border-top: 1px solid #ccc;
            margin-top: 2vh;
            padding: 2%;
        }

            .complete > div.main .complete_form p {
                color: #0c4f9e;
                line-height: 1.5rem;
            }

                .complete > div.main .complete_form p span {
                    margin-left: 1.5%;
                    color: #222;
                }

/*210811 결제안내 부분 추가*/
.form_div .payment_how {
    width: 100%;
    height: 48px;
    text-align: center;
    line-height: 48px;
    color: #fff;
    background: #f04a36;
    font-weight: bold;
}

.form_div .payment_notice p.strong {
    font-weight: bold;
    color: #f04a36;
    font-size: 1.2rem;
    margin: 10px 0;
}

    .form_div .payment_notice p.strong i {
        margin-right: 5px;
    }

.form_div .payment_notice p.txt {
    position: relative;
    margin-left: 16px;
}

    .form_div .payment_notice p.txt:before {
        content: "▶";
        position: absolute;
        top: -2px;
        font-size: .9rem;
        color: #f04a36;
        margin-left: -16px;
    }

.form_div > div {
    margin: 2% 0;
}

    .form_div > div:first-child {
        margin-top: 0;
    }

.form_input {
    width: 100%;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 0;
    font-size: 1rem;
    font-weight: 300;
    color: #666;
    -webkit-box-shadow: none;
    box-shadow: none;
    height: 48px;
    margin: 5px 0;
}

.form_read {
    background: #eee;
}

#form_calendar {
    border: 1px solid #ced4da;
    height: 45px;
    width: 50%;
}

.form_search {
    width: 100%;
    display: inline-block;
    text-align: center;
    color: #fff;
    font-weight: 500;
    background: #333;
    border-radius: 0;
    height: 48px;
    line-height: 48px;
    padding: 0;
    font-size: 16px;
    border: none;
}

.form_title {
    display: inline-block;
    position: relative;
    padding-right: 8px;
}

    .form_title:after {
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        width: 5px;
        height: 5px;
        background: #0c4f9f;
        border-radius: 100%;
    }

.form_tell {
    width: 100%;
    display: table;
}

    .form_tell > div {
        display: table-cell;
        width: 30%;
    }

        .form_tell > div:nth-of-type(2n) {
            width: 5%;
            text-align: center;
        }

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

.submit_button {
    width: 100%;
    height: 50px;
    text-align: center;
    color: #fff;
    font-weight: 500;
    background: #0c4f9e;
    border: none;
    font-size: 1.25rem;
    border-radius: 5px;
    cursor: pointer;
}

.first_button {
    width: 100%;
    height: 50px;
    text-align: center;
    color: #000;
    font-weight: 500;
    background: #eee;
    border: none;
    font-size: 1.25rem;
    border-radius: 5px;
}

.order {
    padding: 2% 0;
}

    .order > div:first-child > div:first-child {
        border: 1px solid #ccc;
    }

    .order table {
        width: 100%;
        text-align: center;
    }

        .order table thead {
            background: #eee;
        }

            .order table thead tr th {
                background: #ccc;
                padding: 10px 0;
                font-size: 15px;
                text-align: center;
                color: #222;
            }

        .order table tbody tr td {
            font-size: 14px;
            font-weight: 400;
            padding: 10px 5px;
        }

    .order .product_name {
        font-size: .8rem;
    }

.order_title {
    background: #fff;
    text-align: center;
    color: #0c4f9e;
}

.order_number {
    height: 48px;
    line-height: 48px;
    color: #fff;
    background: #f04a36;
    font-weight: bold;
}

.table01 {
    width: 100%;
    margin: 0 auto;
}

    .table01 li {
        border-bottom: 1px solid #ccc;
        padding: 2.5vh 2vw;
        color: #222;
    }

.title {
    font-size: 1rem;
    color: #222;
}

.h4title {
    padding: 4vh 0;
    text-align: center;
}

/*210824 메인 추가*/
.n_main {
    text-align: center;
    margin: 0 auto;
}

    .n_main h2 {
        margin-bottom: 1vh;
        color: #0c4f9e;
        font-size: 1.25rem;
        text-align: center;
    }

.main_sec01 {
    text-align: center;
    padding: 1vh 0;
}

    .main_sec01 article {
        width: 95%;
        margin: 0 auto;
        padding: 0;
        margin-bottom: 1.5vh;
        background: #eee;
        padding: 2vh 0;
    }

        .main_sec01 article img {
            width: 100%;
        }

        .main_sec01 article i {
            color: #000;
        }

        .main_sec01 article h3 {
            font-size: 1rem;
            font-weight: bold;
            color: #000;
        }

        .main_sec01 article p {
            white-space: pre-line;
            margin-top: 1vh;
            letter-spacing: -.1rem;
        }

        .main_sec01 article:nth-of-type(1) {
            background: none;
            margin-bottom: 1vh;
            padding: 0;
        }

.main_sec02 {
    width: 100%;
    margin: 3vh auto;
    padding: 3vh 0;
    border-top: 2px dashed #888;
    border-bottom: 2px dashed #888;
}

    .main_sec02 div.box {
        width: 100%;
        margin: 1vh auto;
        padding: 0;
    }

        .main_sec02 div.box ul {
            width: 95%;
            margin: 0 auto;
            padding: 0;
            display: inline-block;
        }

            .main_sec02 div.box ul li {
                width: 100%;
                margin-bottom: 1.3vh;
            }

.main_sec03 {
    width: 100%;
    margin: 0 auto;
    padding: 3vh 0;
    background: #eee;
}

    .main_sec03 h4 {
        padding-bottom: 3vh;
        vertical-align: middle;
        color: #000;
        font-size: 1.15rem;
    }

    .main_sec03 ul {
        width: 95%;
        margin: 0 auto;
        padding: 2vh 1.5vw;
        background: #fff;
    }

        .main_sec03 ul li {
            font-size: .9rem;
            list-style: none;
            line-height: 1.4rem;
            margin-bottom: .5vh;
            letter-spacing: -.015rem;
        }

            .main_sec03 ul li h5 {
                font-size: .9rem;
                font-weight: bold;
                color: #222;
            }
/*# sourceMappingURL=basic.css.map */