@charset "utf-8";

@font-face {
    font-family: 'font_1';
    src: url('../font/Pretendard-Light.otf');
}

@font-face {
    font-family: 'font_2';
    src: url('../font/Pretendard-Regular.otf');
}

@font-face {
    font-family: 'font_3';
    src: url('../font/Pretendard-Medium.otf');
}

@font-face {
    font-family: 'font_4';
    src: url('../font/Pretendard-Bold.otf');
}

@font-face {
    font-family: 'font_5';
    src: url('../font/Pretendard-SemiBold.otf');
}

@font-face {
    font-family: 'font2';
    src: url('../font/SCDream4.otf');
}

@font-face {
    font-family: 'font3';
    src: url('../font/SCDream5.otf');
}

/* 초기화 */
html {
    overflow-y: scroll;
    width: 100%;
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-family: 'font_2', sans-serif !important;
    overflow: hidden;
    width: 100%;
    height: auto;
    background: #fafafa;
    text-align: center;
    display: inline-flex;
    float: left;
    justify-content: center;
    align-items: center;
}

span.big_wrap {
    overflow: hidden;
    width: 100%;
    height: auto;
    max-width: 550px;
    background: #F5F5F5;
    text-align: left;
    display: inline-block;
    float: left;
    color: #111;
    position: relative;
}

html,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
img {
    margin: 0;
    padding: 0;
    border: 0
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 14px;
    font-family: 'font_2', sans-serif !important;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block
}

ul,
dl,
dt,
dd {
    margin: 0;
    padding: 0;
    list-style: none
}

legend {
    position: absolute;
    margin: 0;
    padding: 0;
    font-size: 0;
    line-height: 0;
    text-indent: -9999em;
    overflow: hidden
}

label,
input,
button,
select,
img {
    vertical-align: middle;
    font-size: 1em
}

input,
button {
    margin: 0;
    padding: 0;
    font-family: 'font_2', sans-serif !important;
    font-size: 16px;
}

input[type="submit"] {
    cursor: pointer
}

button {
    cursor: pointer
}

textarea,
select {
    font-family: 'font_2', sans-serif !important;
    font-size: 16px
}

select {
    margin: 0
}

p {
    margin: 0;
    padding: 0;
    word-break: break-all
}

hr {
    display: none
}

pre {
    overflow-x: scroll;
    font-size: 1.1em
}

a {
    color: #000;
    text-decoration: none
}

*,
:after,
:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

input::placeholder {
    color: #bbb;
    font-family: 'font_1', sans-serif !important;
    font-size: 16px
}

textarea::placeholder {
    color: #bbb;
    font-family: 'font_1', sans-serif !important;
    font-size: 16px
}

input[type=text]:focus,
input[type=password]:focus,
textarea:focus {
    outline: none !important;
}

input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    height: 16px;
    outline: 0;
    width: 16px;
    border: 1px solid #105690;
    position: relative;
    float: left;
}

input[type="checkbox"]::after {
    border: solid #fff;
    border-width: 0 2px 2px 0;
    content: '';
    display: none;
    height: 35%;
    left: 25%;
    position: absolute;
    top: 38%;
    transform: rotate(135deg);
    width: 15%;
}

input[type="checkbox"]::before {
    border: solid #fff;
    border-width: 2px 0 0 2px;
    content: '';
    display: none;
    height: 60%;
    right: 27%;
    position: absolute;
    top: 18%;
    transform: rotate(-135deg);
    width: 15%;
}

input[type="checkbox"]:checked {
    background: #105690;
}

input[type="checkbox"]:checked::after {
    display: block;
}

input[type="checkbox"]:checked::before {
    display: block;
}

input[type='radio'] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border: 1px solid #DADADA;
    border-radius: 50%;
    outline: none;
    cursor: pointer;
}

input[type='radio']:checked {
    background-color: #105690;
    border: 4px solid #fff;
    box-shadow: 0 0 0 1px #105690;
}

.not_scroll {
    overflow: hidden;
}


/*font class*/
.font_css_1 {
    font-family: 'font_1', sans-serif !important;
}

.font_css_2 {
    font-family: 'font_2', sans-serif !important;
}

.font_css_3 {
    font-family: 'font_3', sans-serif !important;
}

.font_css_4 {
    font-family: 'font_4', sans-serif !important;
}

.font_css_5 {
    font-family: 'font_5', sans-serif !important;
}

.font_css2 {
    font-family: 'font2', sans-serif !important;
}

.font_css3 {
    font-family: 'font3', sans-serif !important;
}


/*button css / 버튼*/
a.a_button {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    background: #105690;
    color: #fff;
    border-radius: 8px;
    line-height: 45px;
    text-align: center;
    margin-top: 10px;
    font-family: 'font_3', sans-serif !important;
}

a.a_button2 {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    background: #fff;
    border-radius: 8px;
    line-height: 41px;
    text-align: center;
    border: 2px solid #105690;
    margin-top: 10px;
    color: #111;
    font-family: 'font_3', sans-serif !important;
}

a.a_button3 {
    display: inline-block;
    width: 49%;
    height: auto;
    float: left;
    background: #105690;
    color: #fff;
    border-radius: 8px;
    line-height: 45px;
    text-align: center;
    margin-top: 10px;
    margin-left: 2%;
    font-family: 'font_3', sans-serif !important;
}

a.a_button4 {
    display: inline-block;
    width: 49%;
    height: auto;
    float: left;
    background: #fff;
    border-radius: 8px;
    line-height: 41px;
    text-align: center;
    border: 2px solid #105690;
    margin-top: 10px;
    color: #111;
    font-family: 'font_3', sans-serif !important;
}

span.a_button {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    background: #105690;
    color: #fff;
    border-radius: 8px;
    line-height: 45px;
    text-align: center;
    margin-top: 10px;
    cursor: pointer;
    font-family: 'font_3', sans-serif !important;
}

span.a_button2 {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    background: #fff;
    border-radius: 8px;
    line-height: 41px;
    text-align: center;
    border: 2px solid #105690;
    margin-top: 10px;
    color: #111;
    cursor: pointer;
    font-family: 'font_3', sans-serif !important;
}

span.a_button3 {
    display: inline-block;
    width: 49%;
    height: auto;
    float: left;
    background: #105690;
    color: #fff;
    border-radius: 8px;
    line-height: 45px;
    text-align: center;
    margin-top: 10px;
    margin-left: 2%;
    cursor: pointer;
    font-family: 'font_3', sans-serif !important;
}

span.a_button4 {
    display: inline-block;
    width: 49%;
    height: auto;
    float: left;
    background: #fff;
    border-radius: 8px;
    line-height: 41px;
    text-align: center;
    border: 2px solid #105690;
    margin-top: 10px;
    color: #111;
    cursor: pointer;
    font-family: 'font_3', sans-serif !important;
}

span.a_button5 {
    display: inline-block;
    width: 49%;
    height: auto;
    float: left;
    background: #fff;
    border-radius: 8px;
    line-height: 43px;
    text-align: center;
    border: 1px solid #E1E1E1;
    margin-top: 10px;
    color: #111;
    cursor: pointer;
    font-family: 'font_3', sans-serif !important;
    font-size: 13px;
}

span.a_button5.event_click {
    line-height: 41px;
    border: 2px solid #105690;
}

span.a_button5:nth-child(2) {
    margin-left: 2%;
}

a.a_button img {
    margin-right: 10px;
    height: 18px;
    margin-top: -2px;
}

a.a_button2 img {
    margin-right: 10px;
    height: 18px;
    margin-top: -2px;
}

span.view_button_box {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
}

/*landing css / 랜딩페이지 / landing.php*/
span.landing_page {
    display: inline-flex;
    width: 100%;
    height: 100vh;
    float: left;
    background: #105690;
    overflow: hidden;
    text-align: center;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

span.landing_page_text {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    font-size: 36px;
    font-weight: 500;
    color: #fff;
}

span.landing_page_sub_text {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    font-size: 16px;
    font-weight: 300;
    color: #B2D6F3;
    margin: 30px 0 50px;
}

span.landing_page_img {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
}

span.landing_page_img img {
    display: inline-block;
    width: 187px;
    height: auto;
}


/*login css / 로그인페이지 / login.php*/
span.login_page {
    display: inline-flex;
    width: 100%;
    height: auto;
    min-height: 100vh;
    float: left;
    overflow: hidden;
    text-align: center;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 0 20px;
}

span.login_logo_img {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    text-align: center;
    margin-bottom: 30px;
}

span.login_logo_img img {
    width: auto;
    height: 105px;
}

span.login_box {
    display: inline-block;
    width: 100%;
    height: auto;
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

span.login_input_box {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    margin-bottom: 15px;
    text-align: left;
}

span.login_input_box span {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    margin-bottom: 5px;
}

span.login_input_box input {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    line-height: 38px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e1e1e1;
    padding: 0 10px;
}

span.login_check_wrap {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    text-align: left;
    margin-bottom: 5px;
}

span.login_check {
    display: inline-block;
    width: auto;
    height: auto;
    float: left;
    color: #BBBBBB;
}

span.login_check input {
    display: inline-block;
    float: left;
    margin-right: 5px;
}

span.login_check label {
    cursor: pointer !important;
}

a.id_find {
    display: inline-block;
    width: auto;
    height: auto;
    float: right;
    color: #BBBBBB;
}


/*signup css / 회원가입페이지 / signup.php*/
span.signup_page {
    display: inline-flex;
    width: 100%;
    height: auto;
    min-height: 100vh;
    float: left;
    overflow: hidden;
    text-align: center;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 20px;
}

span.signup_title {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    color: #105690;
    font-size: 20px;
    margin-bottom: 15px;
}

span.signup_box {
    display: inline-block;
    width: 100%;
    height: auto;
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

span.signup_input_box {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    text-align: left;
    margin-bottom: 30px;
}

span.signup_input_box span {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    margin-bottom: 10px;
}

span.signup_input_box span img {
    display: inline-block;
    width: auto;
    height: 12px;
    float: left;
    margin-right: 10px;
    margin-top: 2px
}

span.signup_input_box input {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    line-height: 38px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e1e1e1;
    padding: 0 10px;
}

a.signup_loginpage {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    font-size: 12px;
    color: #BBBBBB;
    margin-top: 30px;
}


/*find css / 아이디찾기/비밀번호찾기 / find_account.php*/
span.find_tab_button_box {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    margin-bottom: 30px;
}

span.find_tab_button {
    display: inline-block;
    width: 49%;
    height: auto;
    float: left;
    line-height: 38px;
    border-radius: 8px;
    border: 1px solid #e1e1e1;
    cursor: pointer;
}

span.find_tab_button1 {
    margin-right: 2%;
}

span.find_tab_button_event {
    border: 2px solid #105690;
    line-height: 36px;
}

span.find_input_box {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
}

span.find_input_title {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    margin-bottom: 10px;
    text-align: left;
}

span.find_input_title span.timer_box {
    display: inline-block;
    width: auto;
    height: auto;
    float: right;
    color: #D11A21;
}

span.find_input_title img {
    display: inline-block;
    width: auto;
    height: 12px;
    float: left;
    margin-right: 10px;
    margin-top: 2px
}

span.find_input_text {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    text-align: left;
    margin-bottom: 10px;
}

span.find_input_text input {
    display: inline-block;
    width: 80%;
    height: auto;
    float: left;
    line-height: 38px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e1e1e1;
    padding: 0 10px;
}

span.find_input_text a {
    display: inline-block;
    width: 18%;
    height: auto;
    float: left;
    line-height: 38px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #105690;
    margin-left: 2%;
    background: #105690;
    color: #fff;
    text-align: center;
}

span.find_input_text2 {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    text-align: left;
    margin-bottom: 30px;
}

span.find_input_text2 input {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    line-height: 38px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e1e1e1;
    padding: 0 10px;
}


/*head css / 헤드 / head.php*/
span.head_top_wrap {
    display: inline-flex;
    width: 100%;
    height: auto;
    float: left;
    padding: 15px 20px;
    background: #105690;
    justify-content: space-between;
    align-items: center;
}

span.head_logo {
    display: none;
    width: 35px;
    height: auto;
    float: left;
}

span.head_logo img {
    width: 100%;
    height: auto;
    float: left;
}

a.head_icon {
    display: inline-block;
    width: 35px;
    height: auto;
    float: left;
}

a.head_icon img {
    width: auto;
    height: 19px;
    float: left;
}

span.head_text_box {
    display: inline-block;
    width: auto;
    height: auto;
    float: left;
    color: #fff;
    font-size: 20px;
}

span.head_menu_box {
    display: inline-block;
    width: 35px;
    height: auto;
    float: left;
    padding-left: 9px;
    cursor: pointer;
}

span.head_menu_box img {
    display: none;
    width: 100%;
    height: auto;
    float: left;
}

span.head_menu_popup_wrap {
    display: none;
    width: 100%;
    height: 100%;
    max-width: 550px;
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    float: left;
}

span.head_menu_popup_inbox {
    display: inline-flex;
    width: 100%;
    height: 100%;
    background: url("/img/img/bg_blur.png");
    backdrop-filter: blur(30px);
    position: absolute;
    top: 0;
    left: 0;
    float: left;
    padding: 70px 20px;
    align-items: center;
    flex-direction: column;
}

span.head_menu_popup_title {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    text-align: center;
    font-size: 14px;
    margin-bottom: 100px;
    color: #105690;
}

span.head_menu_close {
    display: inline-block;
    width: 26px;
    height: 26px;
    position: absolute;
    top: 70px;
    right: 20px;
    float: left;
    text-align: center;
    cursor: pointer;
}

span.head_menu_close img {
    width: 74%;
    height: auto;
}

span.head_menu_popup {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
}

span.head_menu_popup_list {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    margin-bottom: 45px;
    text-align: center;
}

span.head_menu_popup_list:last-child {
    margin-bottom: 0;
}

span.head_menu_popup_list a {
    display: inline-block;
    width: auto;
    height: auto;
    font-size: 18px;
    color: #1D2A3A;
    line-height: 26px;
}

span.head_menu_popup_list a img {
    width: 26px;
    height: auto;
    margin-right: 20px;
    float: left;
}


/*tail css / 헤드 메뉴 / tail.php*/
span.tail_bottom_menu_wrap {
    position: fixed;
    bottom: 0;
    left: 50%;
    z-index: 9999;
    display: inline-flex;
    width: 100%;
    height: auto;
    float: left;
    border-radius: 20px 20px 0 0;
    background: #fff;
    padding: 20px;
    max-width: 550px;
    transform: translateX(-50%);
    box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.1);
}

a.tail_bottom_menu_list {
    display: inline-block;
    width: auto;
    flex-grow: 1;
    text-align: center;
}

span.tail_bottom_img {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
}

span.tail_bottom_img img {
    width: auto;
    height: 24px;
}

span.tail_bottom_text {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    font-size: 13px;
    color: #105690;
    margin-top: 10px;
}


/*main css / 메인 인덱스 화면 / index.php*/
span.main_wrap {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    min-height: calc(100vh - 67px);
    padding: 50px 20px 140px;
}

a.main_menu_list {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    line-height: 50px;
    margin-bottom: 10px;
    padding: 0 15px;
}

a.main_menu_list:last-child {
    margin-bottom: 0px;
}

span.main_menu_icon {
    display: inline-block;
    width: 24px;
    height: auto;
    float: left;
}

span.main_menu_icon img {
    width: 100%;
    height: auto;
}

span.main_menu_text {
    display: inline-block;
    width: calc(100% - 24px);
    height: auto;
    float: left;
    text-align: center;
    font-size: 16px;
}


/*user guide css / 사용가이드 / user_guide.php*/
span.user_guide_wrap {
    display: none;
    width: 100%;
    height: 100%;
    max-width: 550px;
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    float: left;
}

span.user_guide_inbox {
    display: inline-flex;
    width: 100%;
    height: 100%;
    background: url("/img/img/bg_blur2.png");
    backdrop-filter: blur(20px);
    position: absolute;
    top: 0;
    left: 0;
    float: left;
    align-items: center;
    flex-direction: column;
}

span.user_guide_close {
    display: inline-block;
    width: 26px;
    height: 26px;
    position: absolute;
    top: 20px;
    right: 20px;
    float: left;
    text-align: center;
    cursor: pointer;
    z-index: 999999;
}

span.user_guide_close img {
    width: 74%;
    height: auto;
}

span.user_guide_list {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    padding: 0 20px;
}

/*slide1*/
span.user_guide_info_box1 {
    display: inline-block;
    width: 100%;
    height: 115px;
    float: left;
    font-size: 14px;
    color: #fff;
    line-height: 24px;
    background: url("/img/img/user_guide_info_box.png") no-repeat;
    background-size: auto;
    background-position: right;
    text-align: left;
    position: relative;
    margin: 10px 0 25px;
}

span.user_guide_info_box1 span {
    position: absolute;
    top: 15px;
    right: 23px;
    display: inline-block;
    width: auto;
    height: auto;
    float: left;
}

span.user_guide_info_box1 p {
    font-size: 15px;
    color: #76C5FF;
}

span.user_guide {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
}

span.user_guide_list2 {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    line-height: 50px;
    margin-bottom: 10px;
    padding: 0 15px;
}

span.user_guide_icon {
    display: inline-block;
    width: 24px;
    height: auto;
    float: left;
}

span.user_guide_icon img {
    width: 100%;
    height: auto;
}

span.user_guide_text {
    display: inline-block;
    width: calc(100% - 24px);
    height: auto;
    float: left;
    text-align: center;
    font-size: 16px;
}

span.user_guide_liat_unm1 {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    margin-top: 20px;
    text-align: center;
}

span.user_guide_liat_unm1 img {
    width: 30px;
    height: auto;
}

span.user_guide_liat_unm1 span {
    display: inline-block;
    width: 100%;
    height: auto;
    margin-top: 10px;
    font-size: 12px;
    color: #7FA0C7;
}

/*slide2*/
span.user_guide_info_box2 {
    display: inline-block;
    width: 100%;
    height: 185px;
    float: left;
    font-size: 14px;
    color: #fff;
    line-height: 24px;
    background: url("/img/img/user_guide_info_box2.png") no-repeat;
    background-size: auto;
    background-position: 20px;
    text-align: left;
    position: absolute;
    bottom: 100px;
    left: 0;
}

span.user_guide_info_box2 span {
    position: absolute;
    top: 15px;
    left: 38px;
    display: inline-block;
    width: auto;
    height: auto;
    float: left;
}

span.user_guide_info_box2 p {
    font-size: 15px;
    color: #76C5FF;
}

span.user_tail_bottom_menu_wrap {
    position: fixed;
    bottom: 0;
    left: 50%;
    z-index: 9999;
    display: inline-flex;
    width: 100%;
    height: auto;
    float: left;
    border-radius: 20px 20px 0 0;
    background: #fff;
    padding: 20px;
    max-width: 550px;
    transform: translateX(-50%);
    box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.1);
}

span.user_tail_bottom_menu_list {
    display: inline-block;
    width: auto;
    flex-grow: 1;
    text-align: center;
}

span.user_tail_bottom_img {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
}

span.user_tail_bottom_img img {
    width: auto;
    height: 24px;
}

span.user_tail_bottom_text {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    font-size: 13px;
    color: #93B6E0;
    margin-top: 10px;
}

span.user_guide_liat_unm2 {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    text-align: center;
    position: absolute;
    left: 50%;
    bottom: 110px;
    transform: translateX(-50%);
}

span.user_guide_liat_unm2 img {
    width: 30px;
    height: auto;
}

span.user_guide_liat_unm2 span {
    display: inline-block;
    width: 100%;
    height: auto;
    margin-top: 10px;
    font-size: 12px;
    color: #7FA0C7;
}

/*slide3*/
span.user_guide_info_box3 {
    display: inline-block;
    width: 100%;
    height: 185px;
    float: left;
    font-size: 14px;
    color: #fff;
    line-height: 24px;
    background: url("/img/img/user_guide_info_box2.png") no-repeat;
    background-size: auto;
    background-position: 60%;
    text-align: left;
    position: absolute;
    bottom: 100px;
    left: 0;
}

span.user_guide_info_box3 span {
    position: absolute;
    top: 15px;
    left: 33%;
    display: inline-block;
    width: auto;
    height: auto;
    float: left;
}

span.user_guide_info_box3 p {
    font-size: 15px;
    color: #76C5FF;
}

/*slide4*/
span.user_guide_info_box4 {
    display: inline-block;
    width: 100%;
    height: 204px;
    float: left;
    font-size: 14px;
    color: #fff;
    line-height: 24px;
    background: url("/img/img/user_guide_info_box3.png") no-repeat;
    background-size: auto;
    background-position: center;
    text-align: left;
    position: absolute;
    bottom: 100px;
    left: 0;
}

span.user_guide_info_box4 span {
    position: absolute;
    top: 15px;
    left: 40px;
    display: inline-block;
    width: auto;
    height: auto;
    float: left;
}

span.user_guide_info_box4 p {
    font-size: 15px;
    color: #76C5FF;
}

/*slide5*/
span.user_guide_info_box5 {
    display: inline-block;
    width: 100%;
    height: 206px;
    float: left;
    font-size: 14px;
    color: #fff;
    line-height: 24px;
    background: url("/img/img/user_guide_info_box4.png") no-repeat;
    background-size: auto;
    background-position: center;
    text-align: left;
    position: absolute;
    bottom: 100px;
    left: 0;
}

span.user_guide_info_box5 span {
    position: absolute;
    top: 15px;
    left: 40px;
    display: inline-block;
    width: auto;
    height: auto;
    float: left;
}

span.user_guide_info_box5 p {
    font-size: 15px;
    color: #76C5FF;
}


/*emotional diary css / 감정 일기 리스트 / emotional_diary.php*/
span.emotional_diary_wrap {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    padding: 50px 20px;
    min-height: calc(100vh - 58px);
}

span.emotional_diary_list_box {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
}

span.emotional_diary_list_wrap {
    display: inline-block;
    width: 48%;
    height: auto;
    float: left;
    position: relative;
    margin-bottom: 4%;
}

span.emotional_diary_list_wrap:nth-child(2n) {
    margin-left: 4%;
}

a.emotional_diary_list {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

span.emotional_diary_title {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    padding-bottom: 13px;
    border-bottom: 1px solid #DBDBDB;
    line-height: 1;
}

span.emotional_diary_title span.date {
    display: inline-block;
    width: auto;
    height: auto;
    float: left;
    font-size: 13px;
}

span.emotional_diary_title span.date p {
    display: inline-block;
    width: auto;
    height: auto;
    font-size: 16px;
}

span.emotional_diary_title span.day {
    display: inline-block;
    width: auto;
    height: auto;
    float: right;
    font-size: 12px;
    color: #767676;
    line-height: 16px;
}

span.emotional_list_box {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    padding-top: 13px;
    line-height: 15px;
    text-align: center;
}

span.emotional_list {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    padding-bottom: 13px;
}

span.emotional_list:last-child {
    padding-bottom: 0;
}

span.emotional_list span {
    display: inline-block;
    width: 50%;
    height: auto;
    float: left;
    font-size: 13px;
}

span.emotional_list span p {
    display: inline-block;
    width: auto;
    height: auto;
    font-size: 15px;
    color: #105690;
}


/*emotional diary write css / 감정 일기 쓰는 페이지 / emotional_diary_write.php*/
span.emotional_diary_write_box {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    position: relative;
}

span.emotional_diary_title {
    border-bottom: 0;
}

span.emotional_diary_info_text {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    margin: 7px 0 30px;
    font-size: 13px;
    color: #333;
    word-break: keep-all;
    line-height: 20px;
    margin-bottom: 30px;
}

span.emotional_diary_write {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    margin-bottom: 30px;
}

span.emotional_diary_write2 {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    margin-bottom: 15px;
}

span.emotional_diary_write_title {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    font-size: 14px;
    line-height: 20px;
}

span.emotional_diary_write_title img {
    width: 20px;
    height: auto;
    float: left;
    margin-right: 10px;
}

span.emotional_diary_write_title span {
    display: inline-block;
    width: calc(100% - 30px);
    height: auto;
    float: left;
}

span.emotional_diary_write_title2 {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    font-size: 14px;
    line-height: 20px;
}

span.emotional_diary_write_title2 img {
    width: auto;
    height: 12px;
    float: left;
    margin-right: 10px;
    margin-top: 4px;
}

span.emotional_diary_write_title2 span {
    display: inline-block;
    width: calc(100% - 21px);
    height: auto;
    float: left;
}

span.emotional_diary_write textarea {
    display: inline-block;
    width: 100%;
    height: 100px;
    background: #FAFAFA;
    border: 1px solid #ECECEC;
    border-radius: 8px;
    resize: none;
    padding: 15px;
    margin-top: 10px;
    font-size: 16px;
}

span.emotional_diary_write textarea.panic_diary_write_input_box {
    height: 80px;
    display: none;
}

span.emotional_diary_write textarea.training {
    height: 80px;
}

span.emotional_diary_write input[type=text] {
    display: inline-block;
    width: 100%;
    height: 45px;
    background: #FAFAFA;
    border: 1px solid #ECECEC;
    border-radius: 8px;
    resize: none;
    padding: 14px 15px;
    margin-top: 10px;
    font-size: 16px;
}

/*input css*/
span.input_checkbox_wrap {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    margin-top: 15px;
}

span.input_checkbox_text {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
}

span.input_checkbox_text span {
    display: inline-block;
    width: 20%;
    height: auto;
    float: left;
    color: #555555;
    font-size: 12px;
    text-align: center;
}

span.input_checkbox_text span:first-child {
    text-align: left;
    padding-left: 2%;
}

span.input_checkbox_text span:last-child {
    text-align: right;
    padding-right: 1%;
}

span.input_checkbox_text span:nth-child(2) {
    padding-right: 4%;
}

span.input_checkbox_text span:nth-child(4) {
    padding-left: 4%;
}

span.input_checkbox_bar {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    margin: 5px 0;
}

span.input_checkbox_bar span {
    display: inline-block;
    width: 11.11%;
    height: 6px;
    float: left;
}

span.input_checkbox_bar span.color {
    width: 5.55%;
}

span.input_checkbox_bar span.color1 {
    background: #E7F2FF;
    border-radius: 6px 0 0 6px;
}

span.input_checkbox_bar span.color2 {
    background: #D7ECFF;
}

span.input_checkbox_bar span.color3 {
    background: #BADDFB;
}

span.input_checkbox_bar span.color4 {
    background: #95C6EF;
}

span.input_checkbox_bar span.color5 {
    background: #74AEDE;
}

span.input_checkbox_bar span.color6 {
    background: #5696CC;
}

span.input_checkbox_bar span.color7 {
    background: #2D74AF;
}

span.input_checkbox_bar span.color8 {
    background: #105690;
    border-radius: 0 6px 6px 0;
}

span.input_checkbox_num {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
}

span.input_checkbox_num span {
    display: inline-block;
    width: 11.11%;
    height: auto;
    float: left;
    font-size: 12px;
    text-align: center;
}

span.input_checkbox_input {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    margin-top: 7px;
}

span.input_checkbox_input span {
    display: inline-flex;
    width: 11.11%;
    height: auto;
    float: left;
    justify-content: center;
    align-items: center;
}

span.input_checkbox_input span input {
    float: left;
    margin-left: 2px;
}

/*보는 페이지 css / emotional_diary_view.php*/
span.emotional_diary_view_title {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    font-size: 16px;
    margin-bottom: 20px;
}

span.emotional_diary_write_title3 {
    display: inline-block;
    width: 35%;
    height: auto;
    float: left;
    font-size: 13px;
    line-height: 20px;
    color: #666;
}

span.emotional_diary_write_title3 img {
    width: auto;
    height: 10px;
    float: left;
    margin-right: 10px;
    margin-top: 4px;
}

span.emotional_diary_write_title3 span {
    display: inline-block;
    width: calc(100% - 21px);
    height: auto;
    float: left;
}

span.emotional_diary_view_text {
    display: inline-block;
    width: 65%;
    height: auto;
    float: left;
    font-size: 13px;
    line-height: 20px;
    text-align: right;
}

span.emotional_diary_view_textbox {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    background: #fff;
    border: 1px solid #ECECEC;
    border-radius: 8px;
    padding: 10px;
    line-height: 22px;
    margin-top: 5px;
    white-space: pre-line
}

span.emotional_diary_write3 span.emotional_diary_write_title3 {
    display: inline-block;
    width: 45%;
    height: auto;
    float: left;
    font-size: 13px;
    line-height: 20px;
    color: #666;
}

span.emotional_diary_write3 span.emotional_diary_view_text {
    display: inline-block;
    width: 55%;
    height: auto;
    float: left;
    font-size: 13px;
    line-height: 20px;
    text-align: right;
}

/*삭제 popup css*/
span.emotional_diary_modify {
    position: absolute;
    top: 20px;
    right: 20px;
    display: inline-block;
    width: 25px;
    height: 25px;
    float: right;
    cursor: pointer;
}

span.emotional_diary_modify img {
    width: 75%;
    height: auto;
    float: right;
}

span.emotional_diary_modify_box {
    display: none;
    width: 100px;
    height: auto;
    float: left;
    background: #fff;
    border-radius: 20px;
    box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 40px;
    right: 20px;
    padding: 20px;
    text-align: center;
    z-index: 99;
}

span.emotional_diary_list_wrap span.emotional_diary_modify_box {
    top: 20px;
    right: 20px;
}

span.emotional_diary_modify_box a {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    font-size: 13px;
    color: #666;
    margin-bottom: 15px;
}

span.emotional_diary_modify_box span {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    font-size: 13px;
    color: #666;
}

span.emotional_diary_modify_box img {
    width: 16px;
    height: auto;
    margin-top: -2px;
    margin-right: 10px;
}

span.delete_popup_wrap {
    display: none;
    width: 100%;
    height: 100%;
    float: left;
    background: #fff;
    position: fixed;
    top: 0;
    left: 50%;
    max-width: 550px;
    transform: translateX(-50%);
}

span.delete_popup_wrap::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: inline-block;
    float: left;
    background: rgba(0, 0, 0, 0.2);
    content: "";
}

span.delete_inbox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
    width: 100%;
    max-width: 290px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    z-index: 9999;
}

span.delete_inbox span.close_button {
    display: inline-block;
    width: 25px;
    height: 25px;
    float: right;
    text-align: right;
    cursor: pointer;
}

span.delete_inbox span.close_button img {
    width: 17px;
    height: auto;
    float: right;
}

span.delete_text {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    font-size: 13px;
    margin: 30px 0;
    text-align: center;
}


/*panic diary css/ 공황일기 리스트 / panic_diary.php*/
span.panic_diary_list {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 15px;
    position: relative;
}

span.panic_diary_title {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    line-height: 1;
}

span.panic_diary_title span.date {
    display: inline-block;
    width: auto;
    height: auto;
    float: left;
    font-size: 13px;
}

span.panic_diary_title span.date p {
    display: inline-block;
    width: auto;
    height: auto;
    font-size: 16px;
}

span.panic_diary_title span.day {
    display: inline-block;
    width: auto;
    height: auto;
    float: left;
    font-size: 12px;
    color: #767676;
    line-height: 16px;
    margin-left: 10px;
}

span.panic_diary_box {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    padding-top: 15px;
}

span.panic_diary_box span.time {
    display: inline-block;
    width: auto;
    height: auto;
    float: left;
    font-size: 13px;
    line-height: 36px;
}

span.panic_diary_box a.more {
    display: inline-block;
    width: auto;
    height: auto;
    font-size: 13px;
    color: #105690;
    background: #deeffe;
    border-radius: 8px;
    float: right;
    padding: 10px;
}

span.panic_diary_box a.more img {
    width: auto;
    height: 12px;
    float: right;
    margin-top: 1px;
    margin-left: 10px;
}


/*panic diary write css/ 공황일기 쓰는 페이지 1 / panic_diary_write1.php*/
span.panic_diary_write1_text {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    text-align: center;
    font-size: 13px;
    margin: 30px 0 10px;
}

span.panic_diary_calendar_box {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    margin-bottom: 30px;
}

span.panic_diary_calendar_top {
    display: inline-flex;
    width: 100%;
    height: auto;
    float: left;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

span.calendar_arrow {
    display: inline-block;
    width: 18px;
    height: 18px;
    float: left;
    cursor: pointer;
}

span.calendar_arrow img {
    width: 100%;
    height: auto;
}

span.calendar_arrow:nth-child(1) {
    margin-right: 30px;
}

span.calendar_arrow:nth-child(3) {
    margin-left: 30px;
}

span.calendar_year {
    display: inline-block;
    width: auto;
    height: auto;
    float: left;
    font-size: 16px;
}

span.panic_diary_calendar_head {
    display: inline-flex;
    width: 100%;
    height: auto;
    float: left;
    background: #EBF2FA;
    border-radius: 10px;
    overflow: hidden;
    align-items: center;
    text-align: center;
}

span.panic_diary_calendar_head span {
    display: inline-block;
    width: 14.28%;
    height: auto;
    float: left;
    line-height: 40px;
    font-size: 12px;
    color: #6B87A9;
}

span.panic_diary_calendar_body {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    padding-top: 5px;
}

span.panic_diary_calendar_list {
    display: inline-flex;
    width: 100%;
    height: auto;
    float: left;
    align-items: center;
}

span.panic_diary_calendar_list span {
    display: inline-block;
    width: 14.28%;
    height: auto;
    float: left;
    line-height: 40px;
    font-size: 13px;
    text-align: center;
    cursor: pointer;
}

span.panic_diary_calendar_list span.none_click {
    color: #A9C1DD;
}

span.panic_diary_calendar_list span.event_click_date {
    position: relative;
    color: #fff;
    z-index: 0;
}

span.panic_diary_calendar_list span.event_click_date::after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
    width: 34px;
    height: 34px;
    border-radius: 55px;
    overflow: hidden;
    background: #105690;
    content: "";
    z-index: -1;
}

span.panic_diary_calendar_time {
    display: inline-flex;
    width: 100%;
    height: auto;
    float: left;
    padding: 15px;
    align-items: center;
    justify-content: space-between;
    background: #EBF2FA;
    border-radius: 10px;
    margin-top: 30px;
}

span.panic_diary_calendar_time_list {
    display: inline-block;
    width: 30%;
    height: auto;
    float: left;
    border-radius: 10px;
    background: #fff;
    border: 2px solid #DDE8F5;
}

.input_select_wrap {
    width: 100%;
    display: inline-block;
    float: left;
    position: relative;
}

.input_select_box {
    width: 100%;
    display: inline-block;
    float: left;
    height: auto;
    font-size: 12px;
    cursor: pointer;
    position: relative;
    line-height: 40px;
    padding: 0 15px;
    text-align: left;
    color: #444;
}

.input_select_box img {
    width: 10px;
    display: inline-block;
    float: left;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    z-index: 10;
}

.input_select_box img.rotate180 {
    transform: translateY(-50%) rotate(180deg);
}

.input_select_option_wrap {
    width: 100%;
    float: left;
    height: 170px;
    border: 2px solid #DDE8F5;
    border-radius: 7px;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    overflow-y: scroll;
    display: none;
}

.input_select_option_wrap2 {
    height: auto;
}

.input_select_option_wrap::-webkit-scrollbar {
    display: none;
}

.input_select_option {
    width: 100%;
    display: inline-block;
    float: left;
    height: auto;
    line-height: 40px;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
    padding: 0 15px;
    color: #444;
}


/*panic diary write css/ 공황일기 쓰는 페이지 1 / panic_diary_write1.php*/
span.panic_diary_write_button_box {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    margin-top: 10px;
}

span.panic_diary_write_button {
    display: inline-block;
    width: 48%;
    height: auto;
    float: left;
    border: 1px solid #E1E1E1;
    border-radius: 8px;
    font-size: 13px;
    line-height: 32px;
    text-align: center;
    cursor: pointer;
}

span.panic_diary_write_button:nth-child(2) {
    margin-left: 4%;
}

span.panic_diary_write_button3 {
    display: inline-block;
    width: 48%;
    height: auto;
    float: left;
    border: 1px solid #E1E1E1;
    border-radius: 8px;
    font-size: 13px;
    line-height: 32px;
    text-align: center;
    cursor: pointer;
}

span.panic_diary_write_button3:nth-child(2) {
    margin-left: 4%;
}

span.panic_diary_write_button_box2 {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    margin-top: 10px;
}

span.panic_diary_write_button2 {
    width: 22%;
    margin-right: 3%;
    margin-bottom: 2%;
    display: inline-block;
    height: auto;
    float: left;
    border: 1px solid #E1E1E1;
    border-radius: 8px;
    font-size: 13px;
    line-height: 32px;
    text-align: center;
    cursor: pointer;
}

span.panic_diary_write_button2.margin_right {
    margin-right: 0;
}

span.panic_diary_write_button2.width_css {
    width: 48.5%;
}

span.panic_diary_write_button2.width_css2 {
    width: 45%;
}

span.panic_diary_write_button2.width_css3 {
    width: 52%;
}

span.panic_diary_write_button2.width_css4 {
    width: 55%;
}

span.panic_diary_write_button2.width_css5 {
    width: 65%;
}

span.panic_diary_write_button2.width_css6 {
    width: 32%;
}

span.panic_diary_write_button2.width_css7 {
    width: 42%;
}

span.panic_diary_write_button2.width_css8 {
    width: 17%;
}

span.panic_diary_write_button2.width_css9 {
    width: 70%;
}

span.panic_diary_write_button2.width_css10 {
    width: 27%;
}

span.panic_diary_write_button2.font_size {
    width: 26%
}

span.panic_diary_write_button4 {
    width: 22%;
    margin-right: 3%;
    margin-bottom: 2%;
    display: inline-block;
    height: auto;
    float: left;
    border: 1px solid #E1E1E1;
    border-radius: 8px;
    font-size: 13px;
    line-height: 32px;
    text-align: center;
    cursor: pointer;
}

span.panic_diary_write_button4.margin_right {
    margin-right: 0;
}

span.panic_diary_write_button4.width_css {
    width: 48.5%;
}

span.panic_diary_write_button4.width_css2 {
    width: 45%;
}

span.panic_diary_write_button4.width_css3 {
    width: 52%;
}

span.panic_diary_write_button4.width_css4 {
    width: 55%;
}

span.panic_diary_write_button4.width_css5 {
    width: 65%;
}

span.panic_diary_write_button4.width_css6 {
    width: 32%;
}

span.panic_diary_write_button4.width_css7 {
    width: 42%;
}

span.panic_diary_write_button4.width_css8 {
    width: 17%;
}

span.panic_diary_write_button4.width_css9 {
    width: 70%;
}

span.panic_diary_write_button4.width_css10 {
    width: 27%;
}

span.panic_diary_write_button4.font_size {
    width: 26%
}

span.panic_diary_write_button_click_event {
    border: 2px solid #105690;
    font-family: 'font_4', sans-serif !important;
    line-height: 30px;
}

span.panic_diary_write_button_click_event2 {
    border: 2px solid #105690;
    font-family: 'font_4', sans-serif !important;
    line-height: 30px;
}

span.panic_diary_write_button_click_event3 {
    border: 2px solid #105690;
    font-family: 'font_4', sans-serif !important;
    line-height: 30px;
}

span.panic_diary_write_button_click_event4 {
    border: 2px solid #105690;
    font-family: 'font_4', sans-serif !important;
    line-height: 30px;
}


/*breath css / 이완훈련*/
span.breath_box {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    font-size: 13px;
    padding-top: 15px;
}

a.breath_experience {
    display: inline-block;
    width: 100%;
    height: auto;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    font-size: 16px;
    color: #253932;
    padding: 13px 20px;
    line-height: 24px;
    margin-bottom: 15px;
}

a.breath_experience:last-child {
    margin-bottom: 0px;
}

a.breath_experience img {
    width: auto;
    height: 24px;
    float: left;
}

span.breath_video {
    display: inline-block;
    width: 100%;
    height: 340px;
    float: left;
    background: #0E0E0E;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    aspect-ratio: 1 / 0.5;
}

span.breath_video video {
    width: 100%;
    height: auto;
    float: left;
}

span.breath_time_box {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    font-size: 16px;
    line-height: 20px;
    color: #000;
    text-align: center;
    margin: 20px 0 40px;
}

span.breath_text_box {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    font-size: 16px;
    line-height: 20px;
    color: #000;
    text-align: center;
    margin-bottom: 30px;
}

span.breath_circle_box {
    display: inline-flex;
    width: 100%;
    height: auto;
    float: left;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 0.5;
}

span.breath_circle_box span {
    display: inline-block;
    width: 20%;
    height: auto;
    aspect-ratio: 1 / 1;
    border: 3px solid #105690;
    border-radius: 100%;
    background: #fff;
}

span.breath_circle_click {
    display: inline-flex;
    width: 100%;
    height: auto;
    float: left;
    align-items: center;
    justify-content: center;
    margin: 30px 0 20px;
}

span.breath_circle_click img {
    width: auto;
    height: 18px;
}

span.breath_circle_minus {
    display: inline-block;
    width: 20%;
    height: auto;
    float: left;
    padding: 10px;
    text-align: center;
}

span.breath_circle_plus {
    display: inline-block;
    width: 20%;
    height: auto;
    float: left;
    padding: 10px;
    text-align: center;
}

span.breath_circle_play {
    display: inline-block;
    width: 20%;
    height: auto;
    float: left;
    padding: 10px;
    text-align: center;
}

span.breath_circle_none {
    display: none;
    width: 20%;
    height: auto;
    float: left;
    padding: 10px;
    text-align: center;
}


/*training3 css / 과호흡 배우기*/
span.training3_text_box {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 20px;
    margin-top: 30px;
}

span.training3_text {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    font-size: 14px;
    line-height: 22px;
    color: #333;
}

span.training3_point_text {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    font-size: 16px;
}

span.training3_input_range_box {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    margin-top: 15px;
}

div.range_slider {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    position: relative;
}

span.range_slider_text {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    font-size: 13px;
}

span.range_slider_text span:nth-child(1) {
    display: inline-block;
    width: auto;
    height: auto;
    float: left;
}

span.range_slider_text span:nth-child(2) {
    display: inline-block;
    width: auto;
    height: auto;
    float: right;
}

.range_slider__range {
    width: 100%;
    height: 6px;
    background: linear-gradient(to right, #E3F0FF 0%, #0354B4 50%, #ECECEC 50%);
    border-radius: 6px;
    outline: none;
    -webkit-appearance: none;
    position: relative;
}

.range_slider__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 4px solid #105690;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

.range_slider__range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 4px solid #105690;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

.range_slider__range::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    height: 6px;
    background-color: #0354B4;
    transform: translateY(-50%);
    z-index: 0;
    transition: width 0.2s ease;
}

.range_slider__value {
    font-size: 13px;
    position: absolute;
    top: -15px;
    right: 0;
}

span.training_target_list_title {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    font-size: 14px;
}

span.training_target_list_title span:nth-child(1) {
    display: inline-block;
    width: auto;
    float: left;
}

span.training_target_list_title span:nth-child(2) {
    display: inline-block;
    width: auto;
    float: right;
}

span.training_target_list_table {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    border: 1px solid #DEE9F5;
    background: #FDFDFD;
    border-radius: 12px;
    overflow: hidden;
    margin-top: 20px;
}

span.training_target_list_table table {
    width: 100%;
    height: auto;
    border-spacing: inherit;
    border-collapse: inherit;
}

span.training_target_list_table table th {
    background: #D6E6F9;
    font-size: 13px;
    color: #3F699B;
    text-align: center;
    font-weight: normal;
    padding: 10px 0;
}

span.training_target_list_table table th:nth-child(1) {
    width: 25%;
}

span.training_target_list_table table th:nth-child(2) {
    width: auto;
}

span.training_target_list_table table th:nth-child(3) {
    width: 18%;
}

span.training_target_list_table table th:nth-child(4) {
    width: 18%;
}

span.training_target_list_table table th span {
    display: inline-block;
    width: 100%;
    height: auto;
    font-size: 11px;
}

span.training_target_list_table table td {
    border-bottom: 1px solid #DEE9F5;
    padding: 15px 0;
    font-size: 12px;
    text-align: center;
}

span.training_target_list_table table td:nth-child(1) {
    color: #00428F;
    background: #EFF6FF;
}

span.training_target_list_table table td:nth-child(2) {
    text-align: left;
    padding: 15px 10px;
    word-break: keep-all;
}

span.training_target_list_table table td:nth-child(3) {
    background: #EFF6FF;
}

span.training_target_list_table table td:nth-child(4) {
    color: #00428F;
}

span.training_target_list_table table tr:last-child td {
    border-bottom: 0;
}

span.training_daily_title {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    color: #105690;
    font-size: 14px;
    border-radius: 10px;
    text-align: center;
    background: #DAEEFF;
    padding: 7px 10px;
    margin-bottom: 15px;
    line-height: 22px;
}

span.training_daily_title2 {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    background: #EEF6FF;
    font-size: 13px;
    line-height: 22px;
    color: #333;
    padding: 5px 10px;
    margin-bottom: 10px;
}

span.training_daily_list_box {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    margin-bottom: 20px;
}

span.training_daily_list {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    background: #DAEEFF;
    font-size: 14px;
    color: #105690;
    margin-bottom: 15px;
    text-align: center;
    line-height: 30px;
    border-radius: 10px;
}

span.training_daily_table_box {
    display: inline-flex;
    width: 100%;
    height: auto;
    float: left;
    margin-bottom: 30px;
    position: relative;
}

span.training_daily_table {
    display: inline-block;
    width: 68%;
    height: auto;
    float: left;
}

span.training_daily_table table {
    width: 100%;
    height: auto;
    border-spacing: inherit;
    border-collapse: collapse;
}

span.training_daily_table table th {
    width: 27%;
    font-size: 13px;
    background: #5b9bd5;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    font-weight: normal;
}

span.training_daily_table table th:nth-child(1) {
    border-right: 1px solid #fff;
    width: 73%;
}

span.training_daily_table table td {
    font-size: 13px;
    background: #d2deef;
    padding: 5px;
    border-top: 1px solid #fff;
}

span.training_daily_table table td:nth-child(1) {
    border-right: 1px solid #fff;
}

span.training_daily_table table td:nth-child(2) {
    padding: 5px 0;
}

span.training_daily_table table td:nth-child(2) input {
    text-align: center;
}

span.training_daily_table table td input {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    background-color: transparent;
    border: 0;
    font-size: 16px;
}

span.training_daily_table table tbody tr:nth-child(2n) td {
    background: #eaeff7;
}

span.training_daily_table_img {
    display: inline-block;
    width: 32%;
    height: 100%;
    float: left;
    position: absolute;
    top: 0;
    right: -7px;
    text-align: center;
}

span.training_daily_table_img img {
    width: auto;
    height: 100%;
}

span.training_click_view_list_box {
    display: inline-flex;
    width: 100%;
    height: auto;
    float: left;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 10px 0;
}

span.training_click_view_list {
    display: inline-block;
    width: auto;
    height: auto;
    float: left;
    padding: 10px 40px;
    border-radius: 8px;
    background: #F1F8FF;
    color: #105690;
    margin-top: 10px;
}

span.training_click_view_button_box {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
}


/*record css / 이번주 기록 css*/
span.record_table_box {
    display: inline-flex;
    width: 100%;
    height: auto;
    float: left;
}

span.record_table_date_box {
    display: inline-block;
    width: 25%;
    height: auto;
    float: left;
    text-align: center;
    border: 1px solid #DEE9F5;
    border-radius: 12px 0 0 12px;
    overflow: hidden;
    border-right: 0;
}

span.record_table_date_box span.thead {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    background: #D6E6F9;
    color: #3F699B;
    font-size: 13px;
    line-height: 54px;
}

span.record_table_date_list {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    background: #EEF6FF;
    color: #00428F;
    font-size: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #DEE9F5;
    min-height: 102px;
}

span.record_table_date_list:last-child {
    border-bottom: 0;
}

span.record_table_date_list span {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    line-height: 20px;
}


span.record_table_info_box {
    display: inline-block;
    width: 75%;
    height: auto;
    float: left;
}

span.record_table_info_box span.tbody {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    background: #D6E6F9;
    color: #3F699B;
    font-size: 13px;
    padding: 10px 0;
    line-height: 17px;
}

span.record_table_info_list {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    line-height: 102px;
    font-size: 12px;
}

span.record_table_info_list span {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    border-bottom: 1px solid #DEE9F5;
    line-height: 102px;
    max-height: 102px;
}

span.record_table_info_list span:last-child {
    border-bottom: 0;
}


/*educational css / 교육자료*/
span.educational_title_b {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    font-size: 16px;
    margin-bottom: 20px;
}

span.educational_title_b2 {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    font-size: 13px;
    margin-bottom: 20px;
}

span.educational_point_num {
    display: inline-block;
    width: 25px;
    height: 25px;
    border-radius: 6px;
    overflow: hidden;
    background: #105690;
    font-size: 13px;
    color: #fff;
    float: left;
    margin-right: 10px;
    text-align: center;
    line-height: 25px;
}

span.educational_title_b2_text {
    display: inline-block;
    width: calc(100% - 35px);
    height: auto;
    float: left;
    line-height: 20px;
    padding-top: 3px;
}

span.educational_sub_text_b {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    font-size: 13px;
    color: #333;
    line-height: 22px;
    margin-bottom: 15px;
}

span.educational_sub_text_b2 {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    font-size: 13px;
    color: #222;
    line-height: 22px;
    margin-bottom: 15px;
}

span.educational_sub_text_b strong.color {
    color: #105690;
}

span.educational_sub_text_b strong.color2 {
    color: #105690;
    text-decoration: underline;
    font-weight: normal;
}

span.educational_sub_text_b strong.color3 {
    color: #105690;
    font-weight: normal;
}

span.educational_border_box {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid #D6ECFF;
    padding: 15px;
    margin-bottom: 25px;
}

span.educational_point_text_color {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    color: #105690;
    margin-bottom: 20px;
    line-height: 22px;
    font-size: 13px;
}

span.educational_point_text_color span {
    display: inline-block;
    width: 5%;
    height: auto;
    float: left;
}

span.educational_point_text_color span:nth-child(2) {
    width: 95%;
}

span.educational_point_text_color2 {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    color: #105690;
    margin-bottom: 20px;
    line-height: 22px;
    font-size: 14px;
    position: relative;
    padding-left: 15px;
}

span.educational_point_text_color2::before {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #C6E5FF;
    background: #105690;
    content: "";
}

span.educational_color_box_list {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    margin-bottom: 10px;
    border-radius: 8px;
    overflow: hidden;
}

span.educational_color_box_list span.title {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    padding: 10px 0;
    text-align: center;
    color: #105690;
}

span.educational_color_box_list span.sub_text {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    padding: 10px;
}

span.educational_color_box_list span.text {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    font-size: 13px;
    color: #333;
    line-height: 20px;
}

span.educational_color_box_list span.text strong {
    font-weight: normal;
    color: #105690;
}

span.educational_color_box_list span.icon {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    margin-top: 10px;
    color: #105690;
}

span.educational_color_box_list span.icon img {
    width: auto;
    height: 9px;
    margin-right: 10px;
    margin-top: -3px;
}

span.educational_color_box_list.educational_color_box1 {
    background: #F1F9FF;
    border: 1px solid #DAEEFF;
}

span.educational_color_box_list.educational_color_box1 span.title {
    background: #DAEEFF;
}

span.educational_color_box_list.educational_color_box2 {
    background: #FFF9F1;
    border: 1px solid #FFECDA;
}

span.educational_color_box_list.educational_color_box2 span.title {
    background: #FFECDA;
}

span.educational_color_box_list.educational_color_box3 {
    background: #F0FFF8;
    border: 1px solid #D6F6EB;
    margin-bottom: 25px;
}

span.educational_color_box_list.educational_color_box3 span.title {
    background: #D6F6EB;
}

span.educational_img_box1 {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    text-align: center;
    margin: 10px 0 25px;
}

span.educational_img_box1 img {
    width: auto;
    height: auto;
    max-width: 100%;
}

span.educational_table_box {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    margin-bottom: 25px;
    background: #FDFDFD;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #DEE9F5;
}

span.educational_table_box table {
    width: 100%;
    height: auto;
    border-spacing: inherit;
    border-collapse: collapse;
}

span.educational_table_box table th {
    background: #D6E6F9;
    font-weight: normal;
    font-size: 12px;
    color: #3F699B;
    text-align: center;
    padding: 15px 0;
    width: 70%;
}

span.educational_table_box table th:nth-child(1) {
    background: #C6DDF8;
    width: 30%;
}

span.educational_table_box table td {
    border-top: 1px solid #DEE9F5;
    font-size: 11px;
    line-height: 18px;
    color: #333;
    padding: 15px 10px;
    word-break: keep-all;
}

span.educational_table_box table td:nth-child(1) {
    color: #00428F;
    background: #EEF6FF;
}

span.educational_table_box table td.back_color {
    background: #F5F5F5;
}

span.educational_sub_text_list {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    margin-bottom: 25px;
}

span.educational_sub_text_list span {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    font-size: 13px;
    line-height: 22px;
    color: #333;
    position: relative;
    padding-left: 10px;
}

span.educational_sub_text_list span::before {
    position: absolute;
    top: 9px;
    left: 0;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    overflow: hidden;
    background: #333;
    content: "";
}

span.educational_sub_text_list2 {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    margin-bottom: 25px;
}

span.educational_sub_text_list2>span {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    font-size: 13px;
    line-height: 22px;
    color: #333;
    margin-bottom: 20px;
}

span.educational_sub_text_list2>span.margin_none {
    margin-bottom: 0;
}

span.educational_sub_text_list2>span>span {
    display: inline-block;
    height: auto;
    float: left;
}

span.educational_sub_text_list2>span>span:nth-child(1) {
    width: 15px;
    margin-right: 5px;
}

span.educational_sub_text_list2>span>span:nth-child(2) {
    width: calc(100% - 20px);
}

span.educational_sub_text_list2 strong {
    color: #105690;
    font-weight: inherit;
}

span.educational4_box_wrap {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
}

span.educational4_img_box {
    display: inline-block;
    width: 30%;
    height: auto;
    float: left;
}

span.educational4_text_box {
    display: inline-block;
    width: 70%;
    height: auto;
    float: left;
    padding-left: 10px;
}

span.a_link_box {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    margin-bottom: 20px;
}

span.a_link_box img {
    width: 14px;
    height: auto;
    float: left;
    margin-right: 5px;
    margin-top: 1px;
}

a.a_link {
    display: inline-block;
    width: calc(100% - 19px);
    height: auto;
    float: left;
    font-size: 12px;
    color: #105690;
    text-decoration: underline;
}

span.educational_input_checkbox_wrap {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
}

span.educational_input_checkbox_list {
    display: inline-flex;
    width: 100%;
    height: auto;
    float: left;
    margin-bottom: 20px;
}

span.educational_input_checkbox_box {
    display: inline-block;
    width: 48%;
    height: auto;
    float: left;
}

span.educational_input_checkbox_box:nth-child(1) {
    margin-right: 4%;
}

span.educational_input_checkbox_title {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    line-height: 22px;
    color: #333;
    margin-bottom: 10px;
}

span.educational_input_checkbox {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    margin-bottom: 10px;
}

span.educational_input_checkbox span {
    display: inline-block;
    width: calc(100% - 20px);
    height: auto;
    float: left;
    font-size: 13px;
    color: #333;
    line-height: 16px;
}

span.educational_input_checkbox span:nth-child(1) {
    width: 15px;
    margin-right: 5px;
}

span.educational_input_checkbox textarea {
    display: inline-block;
    width: 100%;
    height: 80px;
    padding: 10px;
    border: 1px solid #ECECEC;
    background: #FAFAFA;
    border-radius: 8px;
    margin-top: 5px;
    resize: none
}

span.educational_input_checkbox2 {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    margin-bottom: 30px;
}

span.educational_input_checkbox2 span {
    display: inline-block;
    width: auto;
    height: auto;
    float: left;
    font-size: 13px;
    color: #333;
    line-height: 16px;
}

span.educational_input_checkbox2 span:nth-child(1) {
    margin-right: 20px;
}

span.educational_input_checkbox2 span input {
    margin-right: 5px;
}

span.educational_color_box_text {
    display: inline-block;
    width: 100%;
    height: auto;
    float: left;
    background: #EEF6FF;
    color: #333;
    font-size: 13px;
    padding: 10px;
    margin: 15px 0 30px;
    line-height: 22px;
}

span.educational_color_box_text strong {
    font-weight: inherit;
    color: #105690;
}











span.display_none {
    display: none;
}