@charset "UTF-8";

::selection { background-color: midnightblue; color: white; }
::placeholder { color: lightgray; }

/****************************************************
 *                                                  *
 * common                                           *
 *                                                  *
 ****************************************************/
html, body {
    margin: 0; padding: 0;
}
body {
    font-family: 'Atomy', sans-serif; font-size: 16px;
}
h1,h2,h3,h4,h5,header,section,article,footer,div,p,span,a,img,li,nav,button,svg {
    margin: 0; padding: 0;
    line-height: 1;
}
input, button, select {
    font-family: 'Atomy', sans-serif; font-size: 13px;
    outline: none; -webkit-appearance: none;
}
button {
    cursor: pointer;
}
a {
    display: block;
    text-decoration: none;
    color: inherit;
}
strong {
    font-weight: normal;
    color: deeppink;
}
hr {
    width: 30px; height: 1px; margin: 30px 0; border: 0 none;
    background-color: silver;
}
.number,
input[type='number'] { font-family: 'Nanum Gothic Coding', monospace; }
input[type='month']::-webkit-calendar-picker-indicator { opacity: 0; }
.month { position: relative; }
.month:after {
    position: absolute; bottom: 12px; right: 18px;
    content: ''; display: block; pointer-events: none;
    width: 0; height: 0; border: 5px solid transparent; border-top-width: 5px; border-top-color: black;
}
h4.month:after { bottom: 14px; border-top-color: white; }
h4.month.gray:after { border-top-color: black; }

/****************************************************
 *                                                  *
 * button                                           *
 *                                                  *
 ****************************************************/
a.button {
    box-sizing: border-box;
    width: 100%; height: 40px; padding: 10px; border-radius: 5px;
    font-size: 16px; font-weight: bold; text-align: center;
    background-color: gainsboro; color: dimgray;
    display: flex; flex-direction: row; justify-content: center; align-items: center;
    display: -ms-flexbox; -ms-flex-direction: row; -ms-flex-pack: center; -ms-flex-align: center;
}
a.button svg {
    max-width: 20px; height: 20px; margin-right: 5px;
    fill: dimgray;
}
/* expansion */
a.button.checkbox { background-color: transparent; font-size: 13px; padding-bottom: 0; height: 20px; }
a.button.white { background-color: white; color: dodgerblue; }
a.button.white svg { fill: dodgerblue; }
a.button.blue { background-color: dodgerblue; color: white; }
a.button.blue svg { fill: white; }
a.button.darkblue { background-color: midnightblue; color: white; }
a.button.darkblue svg { fill: white; }
a.button.red { background-color: deeppink; color: white; }
a.button.red svg { fill: white; }
/* 2 buttons */
.half_button_wrap {
    width: 280px; height: 40px;
    display: flex; flex-direction: row-reverse; justify-content: space-between;
    display: -ms-flexbox; -ms-flex-direction: row-reverse; -ms-flex-pack: justify;
}
.half_button_wrap a.button { width: 135px; }
/* delete */
a.button_delete {
    position: relative;
    box-sizing: border-box;
    width: 18px; height: 18px; margin: 3px 6px; border-radius: 10px;
    text-indent: -9999px;
    background-color: deeppink;
}
a.button_delete:before,
a.button_delete:after {
    position: absolute; top: 8px; left: 3px;
    content: ''; display: block;
    width: 12px; height: 2px;
    background-color: white;
}
a.button_delete:before { transform: rotate(45deg); }
a.button_delete:after { transform: rotate(-45deg); }

a.button_settings {
    width: 36px; height: 13px; padding: 4px 8px; border-radius: 10px;
    font-size: 11px; font-weight: bold;
    background-color: white; color: dimgray;
    display: flex; flex-direction: row; justify-content: space-between; align-items: center;
    display: -ms-flexbox; -ms-flex-direction: row; -ms-flex-pack: justify; -ms-flex-align: center;
}
a.button_settings svg {
    width: 13px; height: 13px;
    fill: dimgray;
}

a.button_trash {
    width: 36px; height: 13px; padding: 4px 8px; border-radius: 10px;
    font-size: 11px; font-weight: bold;
    background-color: white; color: deeppink;
    display: flex; flex-direction: row; justify-content: space-between; align-items: center;
    display: -ms-flexbox; -ms-flex-direction: row; -ms-flex-pack: justify; -ms-flex-align: center;
}
a.button_trash svg {
    width: 13px; height: 13px;
    fill: deeppink;
}

/****************************************************
 *                                                  *
 * form                                             *
 *                                                  *
 ****************************************************/
label, .label {
    display: block;
    margin-bottom: 10px;
    font-size: 13px; color: gray;
}
select,
input[type='text'],
input[type='number'],
input[type='password'] {
    box-sizing: border-box; display: block;
    width: 100%; height: 40px; padding: 10px;
    border: 1px solid darkgray; border-radius: 5px;
    background-color: white;
    transition: border-color .3s ease;
}
select:focus,
input[type='text']:focus,
input[type='number']:focus,
input[type='password']:focus {
    padding: 9px; border-width: 2px; border-color: dodgerblue;
}
select.error,
input[type='text'].error,
input[type='number'].error,
input[type='password'].error {
    padding: 9px; border-width: 2px; border-color: deeppink !important;
}
input[type='date'],
input[type='month'] {
    box-sizing: border-box;
    width: 100%; padding: 10px; border: 0 none; border-radius: 5px;
    background-color: white;
}
select { color: lightgray; }
select:focus { color: black; }
select.selected { color: black; }
.select_form:before {
    position: absolute; top: 41px; right: 10px;
    content: ''; display: block;
    width: 0; height: 0;
    border: 4px solid transparent; border-top-color: darkgray;
}
/* error message */
.error_message {
    position: absolute; top: -8px; right: 0;
    height: 12px; padding: 5px; border-radius: 5px;
    font-size: 12px; text-align: center;
    background-color: deeppink; color: white;
    visibility: hidden; opacity: 0; z-index: 100;
    transition: opacity .5s ease, visibility 0s .5s;
}
.error_message:before {
    position: absolute; bottom: -5px; right: 0;
    content: ''; display: block;
    width: 0; height: 0;
    border: 5px solid transparent; border-right-color: deeppink;
}
#halfDateErrorMessage.error_message { top: auto; right: -2px; bottom: -28px; }
#halfDateErrorMessage.error_message:before { top: -5px; bottom: auto; }
.error_message.show {
    visibility: visible; opacity: 1;
    transition: opacity .5s ease, visibility 0s;
}

.date_picker_wrap {
    position: relative;
}

.date_picker_wrap .label_wrap {
    position: absolute; top: 0; right: 0;
    margin-left: 2px;
    display: flex; flex-direction: row; align-items: center;
    display: -ms-flexbox; -ms-flex-direction: row; -ms-flex-align: center;
}
.date_picker_wrap .label_wrap label {
    position: relative;
    width: 38px; padding-left: 12px; margin-left: 15px;
}
.date_picker_wrap .label_wrap label:before {
    position: absolute; top: 0; left: 0;
    content: ''; display: block;
    width: 3px; height: 3px;
    border: 2px solid white; border-radius: 5px; margin: 3px 0;
    transition:
        width .3s ease,
        height .3s ease,
        margin-top .3s ease,
        border-color .3s ease,
        border-radius .3s ease,
        transform .3s ease;
}
.date_picker_wrap .label_wrap label.selected {
    color: gold;
}
.date_picker_wrap .label_wrap label.selected:before {
    width: 3px; height: 6px; margin-top: -1px;
    border-radius: 0; border-top-color: gold; border-left-color: gold; border-bottom-color: transparent; border-right-color: transparent;
    transform: rotate(225deg);
}
.half_date_wrap .date_wrap {
    position: relative;
    padding: 6px; border: 2px solid transparent; border-radius: 5px;
    background-color: #FFF2;
    transition: border-color .5s ease;
}
.half_date_wrap .date_wrap.error { border: 2px solid deeppink; }
.half_date_wrap .date_wrap .half_date {
    display: none;
}
.half_date_wrap .date_wrap input { display: none; }
.half_date_wrap .date_wrap input:checked+.half_date { display: flex; display: -ms-flexbox; }
.half_date_wrap .date_wrap .half_date {
    width: 100%;
    display: none; flex-direction: row; flex-wrap: wrap;
}
.half_date_wrap .date_wrap .half_date span {
    display: block;
    width: 33px; height: 15px; padding: 9px 0; margin-top: 3px; margin-bottom: 3px; border-radius: 15px;
    font-size: 15px; text-align: center;
}
.half_date_wrap .date_wrap .half_date span.today {
    font-weight: bold;
    background-color: rgba(0,0,0,.15); color: gold;
}
.half_date_wrap .date_wrap .half_date span.disabled {
    color: rgba(255,255,255,.3);
    pointer-events: none;
}
.half_date_wrap .date_wrap .half_date span.disabled.today {
    background-color: rgba(0,0,0,.075); color: rgba(255,200,200,.45);
}
.half_date_wrap .date_wrap .half_date span.selected {
    font-weight: bold;
    background-color: white; color: dodgerblue;
}
.half_date_wrap .date_wrap .half_date span.selected.mid {
    border-radius: 0;
}
.half_date_wrap .date_wrap .half_date span.selected.first {
    border-top-left-radius: 15px; border-bottom-left-radius: 15px;
    border-top-right-radius: 0; border-bottom-right-radius: 0;
}
.half_date_wrap .date_wrap .half_date span.selected.end {
    border-top-left-radius: 0; border-bottom-left-radius: 0;
    border-top-right-radius: 15px; border-bottom-right-radius: 15px;
}
#resetDatePickerButton {
    width: 115px; height: 30px; margin: 10px auto 0; border-radius: 15px;
    font-size: 13px;
    opacity: .3; pointer-events: none;
    transition: opacity .3s ease;
}
#resetDatePickerButton svg { height: 15px; }
#resetDatePickerButton.active { opacity: 1; pointer-events: auto; }

/****************************************************
 *                                                  *
 * modal                                            *
 *                                                  *
 ****************************************************/
.modal_wrap {
    position: fixed; top: 0; left: 0; z-index: 300;
    width: 100%; height: 100%;
    display: flex; justify-content: center; align-items: center;
    display: -ms-flex; -ms-flex-pack: center; -ms-flex-align: center;
    visibility: hidden; opacity: 0;
    transition: opacity .5s ease, visibility 0s .5s;
}
.modal_wrap.show {
    visibility: visible; opacity: 1;
    transition: opacity .5s ease, visibility 0s;
}
.modal_box {
    width: 280px; max-height: 370px; padding: 16px; border-radius: 5px;
    background-color: dodgerblue; color: white; overflow: hidden;
    transition: transform .5s ease, filter .5s ease;
}
.modal_box .modal_title {
    height: 28px; margin-bottom: 20px;
    font-size: 20px;
    display: flex; flex-direction: row; justify-content: center; align-items: center;
    display: -ms-flexbox; -ms-flex-direction: row; -ms-flex-pack: center; -ms-flex-align: center;
}
.modal_box .modal_title svg {
    width: auto; height: 28px; margin-right: 5px;
    fill: white;
}
.modal_box .page_subtitle { margin-bottom: 15px; font-size: 16px; }
.modal_box article {
    position: relative;
    margin-bottom: 30px;
}
.modal_box article label,
.modal_box article .label {
    color: white;
}
.modal_box article input[type='text'],
.modal_box article input[type='number'],
.modal_box article input[type='password'] {
    border-color: white;
}
.modal_box article input[type='text']:focus,
.modal_box article input[type='number']:focus,
.modal_box article input[type='password']:focus {
    border-color: midnightblue;
}
.modal_box a.button { border-radius: 3px; }
.page_wrap {
    position: relative;
    width: 580px;
    display: flex; flex-direction: row;
    display: -ms-flexbox; -ms-flex-direction: row;
    transition: transform .5s ease;
}
.page_wrap [class^='page_'] {
    width: 280px;
}
.page_wrap .page_1 { margin-right: 20px; }
.page_wrap.step2 { transform: translateX(-300px); }
article.col2 {
    margin-bottom: 2px;
    display: flex; flex-direction: row; justify-content: space-between; align-items: center;
    display: -ms-flexbox; -ms-flex-direction: row; -ms-flex-pack: justify; -ms-flex-align2: center;
}
article.col2 .col {
    width: 135px;
}

.sales_form label { margin-bottom: 5px; }
.sales_form label span { color: gold; }
.sales_form input { height: 24px; padding: 2px 10px; margin-bottom: 10px; }
.form_wrap { position: relative; }

/* alert */
#alertModal.modal_wrap { z-index: 500; }
#alertModal.modal_wrap .modal_box { transform: scale(0.9); }
.alert_text { margin-bottom: 20px; text-align: center; line-height: 1.2; }
.alert_text span { color: dodgerblue; }
.notice { font-size: 13px; color: gainsboro; }
.modal_box .alert_text span { color: gold; }
.alert_text.no_data {
    padding: 10px; border-radius: 5px;
    background-color: whitesmoke; color: silver;
}
/* notice */
#noticeModal.modal_wrap { z-index: 500; }
#noticeModal.modal_wrap .modal_box { transform: scale(0.9); }
.notice_text { margin-bottom: 20px; text-align: center; line-height: 1.2; word-break: keep-all; }
/*.notice_text span { color: dodgerblue; }*/
.notice { font-size: 13px; color: gainsboro; }
.modal_box .notice_text span { color: crimson; }
.notice_text.no_data {
    padding: 10px; border-radius: 5px;
    background-color: whitesmoke; color: silver;
}
/****************************************************
 *                                                  *
 * loading                                          *
 *                                                  *
 ****************************************************/
.loading_wrap {
    position: fixed; top: 0; left: 0; z-index: 600;
    width: 100%; height: 100%;
    visibility: hidden; opacity: 0;
    transition: opacity .3s .3s ease, visibility 0s .75s;
}
.loading_wrap:before {
    position: absolute; top: 0; left: 0;
    content: ''; display: block;
    width: 100%; height: 100%;
    background-color: dodgerblue; opacity: .8;
}
.loading_wrap:after {
    position: absolute; top: 50%; left: 50%;
    content: ''; display: block;
    width: 100px; height: 60px; margin-top: -44px; margin-left: -54px;
    border: 4px solid white; border-radius: 6px;
    background-color: whitesmoke;
}
.loading_wrap .page {
    position: absolute; top: 50%; left: 50%; z-index: 10;
    width: 50px; height: 60px; margin-top: -40px; margin-left: -25px;
    border-top-left-radius: 4px; border-bottom-left-radius: 4px;
    background-color: white;
    transform: perspective(500px) rotateY(180deg) translateX(-25px);
    animation: loading 1.2s linear infinite;
}
.loading_wrap p {
    position: absolute; top: 50%; left: 50%;
    width: 100px; margin-top: 35px; margin-left: -50px;
    font-size: 12px; font-weight: bold;
    text-align: center; text-transform: uppercase;
    color: white;
}
@keyframes loading {
    0% {
        background-color: whitesmoke;
        transform: perspective(200px) rotateY(180deg) translateX(-25px);
    }
    40% {
        background-color: silver;
    }
    80% {
        background-color: whitesmoke;
        transform: perspective(200px) rotateY(0deg) translateX(-25px);
    }
    100% {
        background-color: whitesmoke;
        transform: perspective(200px) rotateY(0deg) translateX(-25px);
    }
}

/****************************************************
 *                                                  *
 * dim                                              *
 *                                                  *
 ****************************************************/
.dim {
    position: fixed; top: 0; left: 0; z-index: -1;
    display: none;
    width: 100%; height: 100%;
}

/****************************************************
 *                                                  *
 * header                                           *
 *                                                  *
 ****************************************************/
header {
    position: fixed; top: 0; left: 0; z-index: 200;
    box-sizing: border-box;
    width: 100%; height: 60px; padding: 20px;
    background-color: rgba(255,255,255,.9);
    display: flex; flex-direction: row; justify-content: space-between; align-items: center;
    display: -ms-flexbox; -ms-flex-direction: row; -ms-flex-pack: justify; -ms-flex-align: center;
    transition: filter .5s ease, opacity .5s ease, background-color .5s ease;
}
header .site_title {
    height: 20px;
    display: flex; flex-direction: row; justify-content: space-between; align-items: center;
    display: -ms-flexbox; -ms-flex-direction: row; -ms-flex-pack: justify; -ms-flex-align: center;
}
header .site_title a {
    font-size: 16px; text-transform: uppercase; letter-spacing: -.5px;
    color: dodgerblue;
    transition: font-size .5s ease, color .5s ease;
}
header .site_title svg {
    max-width: 20px; height: 20px; margin-right: 5px;
    fill: dodgerblue;
    transition: height .5s ease, fill .5s ease, margin-right .5s ease;
}
/* menu button */
header .button_menu {
    position: relative;
    width: 20px; height: 20px;
    background-color: transparent; cursor: pointer;
}
header .button_menu span {
    position: absolute; top: 8px;
    width: 20px; height: 4px;
    border-top-left-radius: 2px; border-bottom-left-radius: 3px;
    background-color: dodgerblue;
}
header .button_menu:before {
    position: absolute; top: 0; left: 0;
    content: ''; display: block;
    width: 20px; height: 4px;
    border-top-left-radius: 2px; border-bottom-left-radius: 3px;
    background-color: dodgerblue;
    transition: top .3s ease, left .3s ease, width .3s ease, transform .3s ease;
}
header .button_menu:after {
    position: absolute; top: 16px; left: 0;
    content: ''; display: block;
    width: 20px; height: 4px;
    border-top-left-radius: 2px; border-bottom-left-radius: 3px;
    background-color: dodgerblue;
    transition: top .3s ease, left .3s ease, width .3s ease, transform .3s ease;
}
/* menu */
header .menu_wrap {
    position: fixed; top: 60px; right: 0;
    width: 0; height: 247px; /* (33 x 6) = 198 + (7 x 7) */
    overflow: visible;
    display: flex; flex-direction: column; justify-content: space-evenly; align-items: flex-end;
    display: -ms-flexbox; -ms-flex-direction: column; -ms-flex-pack: justify; -ms-flex-align: end;
}
header .menu_wrap .menu_item {
    width: 105px; height: 15px; padding: 9px 15px;
    border-radius: 10px;
    background-color: gold;
    transform: translateX(140px);
    display: flex; flex-direction: row; align-items: center;
    display: -ms-flexbox; -ms-flex-direction: row; -ms-flex-align: center;
    transition: transform .5s ease, padding-left .5s ease, padding-right .5s ease, background-color .5s ease;
}
header .menu_wrap .menu_item svg {
    width: 15px; height: auto; margin-right: 5px;
}
header .menu_wrap .menu_item a {
    width: 85px; height: 13px; padding: 1px 0;
    font-size: 13px; font-weight: bold;
}
header .menu_wrap .menu_item.login,
header .menu_wrap .menu_item.logout {
    background-color: deeppink; color: white; fill: white;
}
header .menu_wrap .menu_item.user,
header .menu_wrap .menu_item.admin { background-color: midnightblue; }
header .menu_wrap .menu_item.user a,
header .menu_wrap .menu_item.admin a { color: white; }
header .menu_wrap .menu_item.user svg,
header .menu_wrap .menu_item.admin svg { fill: white; }

/****************************************************
 *                                                  *
 * footer                                           *
 *                                                  *
 ****************************************************/
footer {
    position: fixed; bottom: 0; left: 0; z-index: 190;
    box-sizing: border-box;
    width: 100%; height: 20px; padding: 5px 0;
    background-color: white;
    box-shadow: 0 0 10px rgba(0,0,0,.15);
    text-align: center;
    font-size: 10px;
}
footer span { color: silver; }
/****************************************************
 *                                                  *
 * section                                          *
 *                                                  *
 ****************************************************/
section {
    position: relative;
    transition: filter .5s ease, opacity .5s ease;
    padding-bottom: 20px;
}
section .content_wrap {
    padding: 80px 20px 20px;
}
section .content_wrap .page_title {
    margin-bottom: 20px;
    font-size: 24px; font-weight: bold; line-height: 1.2;
    color: midnightblue;
}
section .content_wrap .page_title span {
    color: dodgerblue;
}
section .content_wrap .page_subtitle {
    margin-bottom: 20px;
    font-size: 18px;
}
section .content_wrap .subject {
    margin-bottom: 10px;
    font-size: 16px;
}
section .content_wrap article {
    position: relative;
    margin-bottom: 30px;
}
section .content_wrap p {
    line-height: 1.5;
}
section .content_wrap p strong {
    font-weight: bold;
}

/****************************************************
 *                                                  *
 * home                                             *
 *                                                  *
 ****************************************************/
/* slogan */
section .slogan_wrap {
    padding: 100px 20px 20px;
    background-color: white;
}
section .slogan_wrap h2 {
    font-family: 'Pacifico', cursive;
    font-size: 32px; font-weight: normal; line-height: 1.5;
}
section .slogan_wrap h2 span {
    color: deeppink;
}
section .slogan_wrap h2 span:last-child {
    font-size: 36px; color: dodgerblue;
}
/* non member area */
section .content_wrap .join_message {
    margin: 60px 0 10px;
    font-size: 16px; text-align: center;
}
section .content_wrap .join_message strong {
    color: gold;
}
/* my goal */
section .content_wrap .my_goal {
    position: relative;
    box-sizing: border-box;
    margin-top: 20px; padding: 15px; border: 7px double white;
}
section .content_wrap .my_goal h4 { margin-top: 5px; font-size: 19px; }
section .content_wrap .my_goal h4 strong { background-color: white; color: dodgerblue; }
section .content_wrap .my_goal ol { padding-left: 20px; margin: 20px 0 0; }
section .content_wrap .my_goal ol li { line-height: 1.5; font-size: 14px; }
section .content_wrap .my_goal ol li span { color: gold; }
section .content_wrap .my_goal a.button_settings {
    position: absolute; bottom: 15px; right: 15px;
    color: dodgerblue;
}
section .content_wrap .my_goal a.button_settings svg { fill: dodgerblue; }

/****************************************************
 *                                                  *
 * join                                             *
 *                                                  *
 ****************************************************/
section .content_wrap .user_password_form #passwordConfirm {
    margin-top: 10px;
}

/****************************************************
 *                                                  *
 * goals                                            *
 *                                                  *
 ****************************************************/
.goal_form {
    margin-top: 30px;
    display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;
    display: -ms-flexbox; -ms-flex-direction: row; -ms-flex-wrap: wrap; -ms-flex-pack: justify;
}
.goal_form article {
    width: calc(50% - 5px);
}
.goal_form article:after {
    position: absolute; bottom: 13px; right: 10px;
    display: block;
    font-size: 13px; text-align: right;
    color: darkgray;
}
.goal_form article.type_time:after { content: '시간'; }
.goal_form article.type_person:after { content: '명'; }
.goal_form article.type_pv:after { content: 'PV'; }
#setGoalsModal .modal_box article { margin-bottom: 20px; }

/****************************************************
 *                                                  *
 * 8steps for success                               *
 *                                                  *
 ****************************************************/
section .content_wrap .eight_steps .step_wrap:nth-child(1) .page_subtitle span { width: calc(0% + 60px); }
section .content_wrap .eight_steps .step_wrap:nth-child(2) .page_subtitle span { width: calc(7% + 60px); }
section .content_wrap .eight_steps .step_wrap:nth-child(3) .page_subtitle span { width: calc(14% + 60px); }
section .content_wrap .eight_steps .step_wrap:nth-child(4) .page_subtitle span { width: calc(21% + 60px); }
section .content_wrap .eight_steps .step_wrap:nth-child(5) .page_subtitle span { width: calc(28% + 60px); }
section .content_wrap .eight_steps .step_wrap:nth-child(6) .page_subtitle span { width: calc(35% + 60px); }
section .content_wrap .eight_steps .step_wrap:nth-child(7) .page_subtitle span { width: calc(42% + 60px); }
section .content_wrap .eight_steps .step_wrap:nth-child(8) .page_subtitle span { width: calc(49% + 60px); }
section .content_wrap .eight_steps .step_wrap p {
    padding: 10px; border-radius: 5px;
    font-size: 13px; line-height: 1.2;
    background-color: whitesmoke;
}
section .content_wrap .eight_steps .step_wrap .page_subtitle {
    position: relative;
    margin-bottom: 10px;
    color: dodgerblue;
    display: flex; flex-direction: row; justify-content: space-between; align-items: center;
    display: -ms-flexbox; -ms-flex-direction: row; -ms-flex-pack: justify; -ms-flex-align: center;
}
section .content_wrap .eight_steps .step_wrap .page_subtitle span {
    position: relative; box-sizing: border-box;
    height: 24px; padding: 4px 10px; margin-right: 36px; border-radius: 5px;
    font-size: 12px;
    background: linear-gradient(90deg,deeppink,midnightblue); color: white;
    display: flex; justify-content: center; align-items: center;
    display: -ms-flexbox; -ms-flex-pack: center; -ms-flex-align: center;
}
section .content_wrap .eight_steps .step_wrap .page_subtitle span:before {
    position: absolute; bottom: 0; right: -30px;
    content: ''; display: block;
    width: 0; height: 0;
    border: 8px solid transparent; border-bottom-color: midnightblue; border-left-color: midnightblue;
}
section .content_wrap .eight_steps .step_wrap .page_subtitle span:after {
    position: absolute; bottom: 0; right: -18px;
    content: ''; display: block;
    width: 23px; height: 8px;
    background-color: midnightblue;
}

/****************************************************
 *                                                  *
 * body class                                       *
 *                                                  *
 ****************************************************/

/* home */
body.index { background-color: dodgerblue; }
body.index section .content_wrap { padding: 30px 20px; color: white; }
body.index section .content_wrap .page_title { font-size: 22px; color: white; }
body.index section .content_wrap .page_title span { color: gold; }
body.index .modal_box { background-color: white; color: dodgerblue; }
body.index .modal_box a.button.white { background-color: dodgerblue; color: white; }
body.index .modal_box .modal_title svg { fill: dodgerblue; }
body.index .modal_box article label,
body.index .modal_box article .label { color: gray; }
body.index .modal_box article input[type='text'],
body.index .modal_box article input[type='number'],
body.index .modal_box article input[type='password'] { border-color: darkgray; }
body.index section .content_wrap p strong {
    color: white;
    text-decoration: underline; text-underline-position: under;
}
body.index section .content_wrap p strong.impact {
    display: block;
    width: 250px; margin-top: 5px;
    font-size: 32px; text-align: center; text-decoration: none;
    background-color: white; color: deeppink;
}

/* menu opened */
body.menu_opened header .button_menu:before { top: 5px; left: 10px; width: 12px; transform: rotate(45deg); }
body.menu_opened header .button_menu:after { top: 11px; left: 10px; width: 12px; transform: rotate(-45deg); }
body.menu_opened header .menu_wrap .menu_item { transform: translateX(10px); }
body.menu_opened header .menu_wrap .menu_item.selected { padding-right: 55px; padding-left: 10px; background-color: goldenrod; }
body.menu_opened header .menu_wrap .menu_item.user.selected,
body.menu_opened header .menu_wrap .menu_item.admin.selected { background-color: blue; }
body.menu_opened header .dim { display: block; }
body.menu_opened section { opacity: .3; filter: blur(5px); pointer-events: none; }

/* modal opened */
body.modal_opened section, body.alert_opened section, body.notice_opened section { opacity: .3; filter: blur(5px); pointer-events: none; }
body.modal_opened header, body.alert_opened header, body.notice_opened header { filter: blur(5px); pointer-events: none; }

body.alert_opened .modal_form .modal_box,
body.notice_opened .modal_form .modal_box { filter: brightness(50%); }
body.alert_opened #alertModal.modal_wrap .modal_box,
body.notice_opened #noticeModal.modal_wrap .modal_box { transform: scale(1); }

/* loading */
body.loading section, body.loading header { filter: blur(5px); }
body.loading .loading_wrap {
    visibility: visible; opacity: 1;
    transition: opacity 0s ease, visibility 0s;
}


/****************************************************
 *                                                  *
 * table                                            *
 *                                                  *
 ****************************************************/
.table {
    box-sizing: border-box;
    width: 100%; margin-bottom: 20px; border-radius: 5px;
    background-color: white; overflow: hidden;
    display: flex; flex-direction: column;
    display: -ms-flexbox; -ms-flex-direction: column;
}
.table .thead, .table .tbody {
    box-sizing: border-box;
    width: 100%;
    display: flex; flex-direction: column;
    display: -ms-flexbox; -ms-flex-direction: column;
}
.table .tr {
    box-sizing: border-box;
    width: 100%;
    display: flex; flex-direction: row;
    display: -ms-flexbox; -ms-flex-direction: row;
}
.table .thead .tr {
    font-weight: bold;
    background-color: dodgerblue; color: white;
}
.table .tbody .tr:nth-child(even) {
    background-color: rgba(0,0,0,.1);
}
.table .tr .td {
    box-sizing: border-box;
    height: 24px; padding: 4px 2px;
    font-size: 12px;
    display: flex; flex-direction: row; align-items: center;
    display: -ms-flexbox; -ms-flex-direction: row; -ms-flex-align: center;
}
.table .tr .td:nth-child(odd) { background-color: rgba(0,0,0,.1); }
.table .thead .tr .td { justify-content: center; }


/****************************************************
 *                                                  *
 * my sales                                         *
 *                                                  *
 ****************************************************/

/* 조회 : 년월 선택 */
section .content_wrap #day8coreTable .page_subtitle { margin-top: 20px; }
section .content_wrap #lifeScenarioTable .page_subtitle { margin-top: 20px; }
section .content_wrap .page_subtitle.month { margin-top: 20px; }
section .content_wrap .page_subtitle.month input {
    font-size: 18px; font-weight: bold;
    background-color: dodgerblue; color: white;
}
section .content_wrap .page_subtitle.month.gray input {
    background-color: gainsboro; color: black;
}
/* 테이블 */
#mySalesTable { margin-top: 20px; }
#mySalesTable .table { position: relative; }
#mySalesTable .table .tr .td:nth-child(1) { flex-shrink: 0; width: 20%; justify-content: center; }
#mySalesTable .table .tr .td:nth-child(2) { flex-shrink: 0; width: 40%; }
#mySalesTable .table .tr .td:nth-child(3) { flex-shrink: 0; width: 40%; }
#mySalesTable .table .tbody .tr .td:nth-child(2),
#mySalesTable .table .tbody .tr .td:nth-child(3) { padding: 4px 8px; font-size: 13px; justify-content: flex-end; }
#mySalesTable .table .tbody .tr { background-color: rgba(0,0,0,0); }
#mySalesTable .table .tbody .tr:nth-child(odd) { background-color: rgba(0,0,0,.1); }
#mySalesTable .table[class$='_half'] {
    margin-bottom: 0;
    box-shadow: 0 0 10px rgba(0,0,0,.3);
    z-index: 10;
}
body.my_sales a.button.graph {
    position: absolute; top: 80px; right: 20px;
    width: 100px; height: 28px; padding: 5px 10px; border-radius: 20px;
    font-size: 12px;
    background-color: lightskyblue; color: white;
}
body.my_sales a.button.graph svg {
    height: 12px;
    fill: white;
}

.my_sales_graph_wrap {
    position: relative;
    width: 250px; height: 180px; padding-left: 30px; padding-bottom: 30px;
}
.my_sales_graph_wrap:before {
    position: absolute; top: 0; left: 30px;
    content: ''; display: block;
    width: 1px; height: 180px;
    background-color: white;
}
.my_sales_graph_wrap #mySalesGraph {
    position: relative; z-index: 10;
    width: 250px; height: 180px;
    display: flex; flex-direction: row; justify-content: space-evenly; align-items: flex-end;
}
.my_sales_graph_wrap #mySalesGraph .graph {
    width: 23px; height: 100%;
    display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end;
}
.my_sales_graph_wrap #mySalesGraph .graph span {
    display: block;
    width: 10px; height: 50%;
    font-size: 10px; text-align: center; line-height: 1.5;
    background-color: white; color: dodgerblue;
}
.my_sales_graph_wrap #mySalesGraph .graph span.right { background-color: gold; }
.my_sales_graph_wrap .axis_x {
    position: absolute; bottom: 0; left: 30px;
    width: 250px; height: 30px; border-top: 1px solid white;
    display: flex; flex-direction: row; justify-content: space-evenly; align-items: center;
}
.my_sales_graph_wrap .axis_x span {
    display: block;
    width: 30px;
    font-size: 10px; font-weight: normal; text-align: center;
}
.my_sales_graph_wrap .axis_y {
    position: absolute; top: 0; left: 0;
    width: 280px; height: 180px; padding-right: 2px;
    display: flex; flex-direction: column-reverse; justify-content: space-between; align-items: flex-end;
}
.my_sales_graph_wrap .axis_y span {
    position: relative;
    display: block;
    width: 28px; padding-right: 252px;
    font-size: 10px; font-weight: normal; text-align: right;
}
.my_sales_graph_wrap .axis_y span:before {
    position: absolute; top: 5px; left: 30px;
    content: ''; display: block;
    width: 250px; height: 0; border-bottom: 1px solid rgba(255,255,255,.3);
}
.my_sales_graph_wrap .axis_y span:first-child:before { display: none; }
.my_sales_graph_wrap .axis_y span:nth-child(even):before {
    border-bottom-style: dashed;
}

/* 일별 보기 */
.daily_list_wrap {
    position: relative;
    padding-top: 10px; margin-top: -10px; border-radius: 10px;
}
.daily_list_wrap .daily_list {
    position: relative;
    height: 0; padding: 0 10px;
    overflow: hidden;
    transition: height .5s ease-in-out;
}
.daily_list_wrap .daily_list .subject { margin-top: 30px; font-size: 15px; padding: 3px; }
.daily_list_wrap .daily_list .table { margin-bottom: 0; box-shadow: 0 0 10px rgba(0,0,0,.3); }
.daily_list_wrap .daily_list .button_wrap {
    position: absolute; top: 30px; right: 10px;
    display: flex; flex-direction: row;
    display: -ms-flexbox; -ms-flex-direction: row;
}
.daily_list_wrap .daily_list .button_wrap a { margin-left: 5px; }

/* 상반기 */
#dailyListWrap_0.daily_list_wrap { background-color: powderblue; }
#dailyListWrap_0.daily_list_wrap .daily_list .subject { color: cadetblue; }
#dailyListWrap_0.daily_list_wrap .table .thead .tr { background-color: cadetblue; }
#dailyListWrap_0.daily_list_wrap .table .tbody .tr .td:nth-child(1) { justify-content: center; background-color: rgba(0,200,255,.1); }
/* 하반기 */
#dailyListWrap_1.daily_list_wrap { background-color: lightskyblue; }
#dailyListWrap_1.daily_list_wrap .daily_list .subject { color: steelblue; }
#dailyListWrap_1.daily_list_wrap .table .thead .tr { background-color: steelblue; }
#dailyListWrap_1.daily_list_wrap .table .tbody .tr .td:nth-child(1) { justify-content: center; background-color: rgba(0,100,255,.1 ); }

/* 일별 더 보기 */
a.button.daily_sales {
    margin: -5px 0 20px; padding-top: 15px; border-radius: 10px;
    border-top-left-radius: 0; border-top-right-radius: 0;
    font-size: 12px;
}
a.button.daily_sales:before {
    content: ''; display: block;
    width: 6px; height: 6px; margin-top: -5px; margin-right: 10px;
    border: 2px solid transparent; border-right-color: white; border-bottom-color: white;
    transform: rotate(45deg);
    transition: transform .5s ease, margin-top .5s ease;
}

/* 상반기 일별 테이블 */
#mySalesTable .table.first_half .thead .tr { background-color: turquoise; }
#mySalesTable .table.first_half .tbody .tr .td:nth-child(1) { background-color: rgba(0,200,255,.1); }
a.button.daily_sales.first_half { background-color: powderblue; color: white; }

/* 하반기 일별 테이블 */
#mySalesTable .table.second_half .thead .tr { background-color: deepskyblue; }
#mySalesTable .table.second_half .tbody .tr .td:nth-child(1) { background-color: rgba(0,100,255,.1); }
a.button.daily_sales.second_half { background-color: lightskyblue; color: white; }

/* 일별 보기 열었을 떄 */
.daily_list_wrap.opened .daily_list { height: 210px; }
.daily_list_wrap.opened a.button.daily_sales:before {
    transform: rotate(-135deg); margin-top: 5px;
}

#editMySalesModal .modal_box .notice { margin-bottom: 15px; }

/****************************************************
 *                                                  *
 * admin                                            *
 *                                                  *
 ****************************************************/
#usersTable .tr .td:nth-child(1) { flex-shrink: 0; width: 25px; }
#usersTable .tr .td:nth-child(2) { flex-shrink: 0; width: 80px; }
#usersTable .tr .td:nth-child(3) { flex-shrink: 0; width: 60px; }
#usersTable .tr .td:nth-child(4) { flex-shrink: 0; width: 50px; }
#usersTable .tr .td:nth-child(5) { flex-grow: 1; }
#usersTable .tr .td:nth-child(6) { flex-shrink: 0; width: 30px; padding: 0; }
#usersTable .tr { position: relative; }
#usersTable .device_info {
    position: absolute; top: 0; left: 105px; z-index: 200;
    display: none;
    max-width: 240px; padding: 10px; border-radius: 5px;
    font-size: 11px; font-weight: normal; line-height: 1.1;
    background-color: midnightblue; color: white;
    box-shadow: 0 0 10px rgba(0,0,0,.5);
}

#graphSample { background-color: gainsboro; margin: 20px 0; }

#day8coreTable .table .tr .td { height: auto; }
#day8coreTable .table .tr .td:nth-child(1) { flex-shrink: 0; width: 8%; justify-content: center; }
#day8coreTable .table .tr .td:nth-child(2) { flex-shrink: 0; width: 30%; justify-content: center; }
#day8coreTable .table .tr .td:nth-child(3) { flex-shrink: 0; width: 12%; justify-content: center; }
#day8coreTable .table .tr .td:nth-child(4) { flex-shrink: 0; width: 50%; justify-content: center; }

#day8coreTable .page_subtitle input { background-color: rgba(0,0,0,.1); font-size: 18px; font-weight: bold; }
#day8coreTable .coreCheck input[type="checkbox"] { display: none; }
#day8coreTable .coreCheck input[type="checkbox"]+label { text-indent: -9999px; display: block; margin: 0; width: 15px; height: 15px; border: 4px solid transparent; background-color: rgba(0,0,0,.15); border-radius: 3px; transition: background-color .3s ease, transform .3s ease, border-radius .3s ease, border-color .3s ease, width .3s ease, height .3s ease; }
#day8coreTable .coreCheck input[type="checkbox"]:checked+label { width: 6px; height: 12px; border-radius: 0; border-right-color: dodgerblue; border-bottom-color: dodgerblue; transform: rotate(-315deg) translateX(-3px) translateY(-5px); background-color: transparent; }
#day8coreTable [id$='Memo'] input { padding: 0; margin: 0; border: 0 none; background-color: transparent; height: 20px; text-align: center; }
#day8coreTable .coreMemo { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 24px; padding: 0 5px; margin: 0; border: 0 none; background-color: transparent; width: 100%; height: auto; resize: none; word-break: keep-all; outline: none; text-align: center; white-space: wrap; line-height: 1.25; }

#day8coreTable .totalScore { position: relative; background: linear-gradient(90deg,crimson,dodgerblue); width: 100%; height: 46px; margin-bottom: 20px; border-radius: 5px; overflow: hidden; }
#day8coreTable #_8coreScore { position: absolute; top: 0; right: 0; width: 100%; height: 46px; margin-bottom: 10px; background-color: silver; transition: width 1s ease; }
#day8coreTable #_8coreScoreText { position: absolute; top: 15px; left: 12px; font-weight: bold; color: white; }
#day8coreTable #_8coreScore.w1 { width: 88.8888%; }
#day8coreTable #_8coreScore.w2 { width: 77.7777%; }
#day8coreTable #_8coreScore.w3 { width: 66.6666%; }
#day8coreTable #_8coreScore.w4 { width: 55.5555%; }
#day8coreTable #_8coreScore.w5 { width: 44.4444%; }
#day8coreTable #_8coreScore.w6 { width: 33.3333%; }
#day8coreTable #_8coreScore.w7 { width: 22.2222%; }
#day8coreTable #_8coreScore.w8 { width: 11.1111%; }
#day8coreTable #_8coreScore.w9 { width: 0%; }

.table.vertical { flex-direction: row; }
.table.vertical .thead { flex-direction: row; width: 17.5%; }
.table.vertical .tbody { flex-direction: row; width: 82.5%; }
.table.vertical .tr { flex-direction: column; }
.table.vertical .tr .td { padding: 3px 1px; }

#month8coreTable h5 { margin-bottom: 10px; font-size: 14px; }
#month8coreTable .table .tr .td { height: 20px; font-size: 10px; justify-content: center; }
#month8coreTable .table .tbody .tr .td { color: dimgray; }
#month8coreTable .table .tbody .tr .th { background-color: gray; color: white; font-weight: bold; }
#month8coreTable .table .tr:nth-child(odd) .th { background-color: darkgray; }

#firstMonthBody .tr { width: calc(100% / 15); }
#secondMonthBody .tr.last28 { width: calc(100% / 13); }
#secondMonthBody .tr.last29 { width: calc(100% / 14); }
#secondMonthBody .tr.last30 { width: calc(100% / 15); }
#secondMonthBody .tr.last31 { width: calc(100% / 16); }

#month8coreTable .totalScore { position: relative; background: linear-gradient(90deg,crimson,dodgerblue); width: 100%; height: 20px; margin-bottom: 5px; border-radius: 5px; overflow: hidden; }
#month8coreTable .totalScore span[id$='Score'] { position: absolute; top: 0; right: 0; width: 100%; height: 20px; background-color: silver; transition: width 1s ease; }
#month8coreTable .totalScore span[id$='ScoreText'] { position: absolute; top: 4px; left: 6px; font-weight: bold; font-size: 12px; color: white; }

#lifeScenarioTable .page_subtitle input { background-color: rgba(0,0,0,.1); font-size: 18px; font-weight: bold; }