@charset "UTF-8";

/* mobile style */
* {
    -webkit-text-size-adjust: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body,
form,
div,
p,
h1,
h2,
h3,
h4,
h5,
h6,
dl,
dt,
dd,
ul,
ol,
li,
fieldset,
th,
td,
input,
textarea,
button,
select {
    margin: 0;
    padding: 0;


    font-family: 'Pretendard', 'Noto Sans KR', 'Nanum Gothic', 'Malgun Gothic', '맑은 고딕', dotum, '돋움', sans-serif;
    font-weight: normal;
    line-height: 1.25em;
    letter-spacing: -0.015em;


}

body {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

li {
    list-style: none
}

a {
    text-decoration: none
}

a[href^="tel"] {
    font-style: normal
}

address,
caption,
em,
var {
    font-style: normal;
    font-weight: normal
}

input,
textarea,
select {
    letter-spacing: normal
}

ol,
ul,
dl {
    list-style: none
}

fieldset,
img {
    border: 0
}

legend,
caption {
    display: none
}

img {
    border: 0;
    vertical-align: top
}

hr {
    display: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

br {
    letter-spacing: normal
}

p {
    letter-spacing: normal
}

input {
    vertical-align: middle
}

input[type="text"],
input[type="password"] {
    -webkit-appearance: none
}

input[type="checkbox"] {
    -webkit-appearance: none;
    -webkit-border-radius: 0
}

/*input:checked[type="checkbox"]{-webkit-appearance:checkbox}*/
input[type="radio"] {
    border: none;
    -webkit-appearance: none
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"] {
    -webkit-appearance: button;
    border-radius: 0
}

textarea {
    -webkit-appearance: none
}

select {
    -webkit-appearance: menulist-text
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}



.sound-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    -webkit-white-space: inset(50%);
    clip-path: inset(50%);
    border: 0;
}

/* 
.page_main { background-color:#f5f5f5; }
.page_list { background-color:#f5f5f5; }
.page_list_reveiw { background-color:#ffffff; }
.page_search { background-color:#ffffff; }
.page_favorite { background-color:#f5f5f5; }
.page_mymenu { background-color:#ffffff; }
.page_push { background-color:#f5f5f5; }
.page_join { background-color:#f5f5f5; }
.page_detail { background-color:#fff; }
.page_view { background-color:#ffffff; }
.page_member { background-color:#f5f5f5; }
.page_pushset { background-color:#f5f5f5; }
.page_policy { background-color:#f5f5f5; }
.page_cs { background-color:#f5f5f5; }
.page_cs_guide { background-color:#ffffff; }
.page_faq { background-color:#f5f5f5; }
.page_cs_detail { background-color:#ffffff; }
.page_mn_detail { background-color:#ffffff; }
.page_mn_counsel { background-color:#ffffff; }
.page_mn_counsel_list { background:#f5f5f5; }
 */
.page_bg_white {
    background-color: #ffffff;
}

.page_bg_gray {
    background-color: #f5f5f5;
}


#wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.h_full {
    display: flex;
    flex-direction: column;
    height: 100%;
}


/* 버튼 */
a.btn,
span.btn {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 5px;
    cursor: pointer;
}

button.btn {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 5px;
}

a.btn_default {
    font-size: 14px;
    line-height: 1.1em;
    font-weight: 500;
}

button.btn_default {
    font-size: 14px;
    line-height: 1.1em;
    font-weight: 500;
}

a.btn_primary,
input.btn_primary,
button.btn_primary,
.btn_primary {
    background-color: #E76F51;
    color: #ffffff;
    border: solid 1px #E76F51;
}

button.btn_primary {
    background-color: #E76F51;
    color: #ffffff;
    border: solid 1px #E76F51;
}

a.btn_yellow {
    background-color: #FABE0D;
    color: #ffffff;
    border: solid 1px #FABE0D;
}

button.btn_yellow {
    background-color: #FABE0D;
    color: #ffffff;
    border: solid 1px #FABE0D;
}

a.btn_red {
    background-color: #EB655F;
    color: #ffffff;
    border: solid 1px #EB655F;
}

button.btn_red {
    background-color: #EB655F;
    color: #ffffff;
    border: solid 1px #EB655F;
}

button.btn_red2 {
    background-color: #ccc;
    color: #ffffff;
    border: solid 1px #ccc;
}

a.btn_gray {
    background-color: #999999;
    color: #ffffff;
    border: solid 1px #CF2A2B;
}

button.btn_gray,
a.btn_gray {
    background-color: #999999;
    color: #ffffff;
    border: solid 1px #999999;
}

a.btn_line {
    background-color: #ffffff;
    color: #EB655F;
    border: solid 1px #EB655F;
}

button.btn_line {
    background-color: #ffffff;
    color: #EB655F;
    border: solid 1px #EB655F;
}

a.btn_liner,
span.btn_liner {
    background-color: #ffffff;
    color: #EB655F;
    border: solid 1px #EB655F;
}

button.btn_liner {
    background-color: #ffffff;
    color: #EB655F;
    border: solid 1px #EB655F;
}

a.btn_linepu,
span.btn_linepu {
    background-color: #ffffff;
    color: #CF2A2B;
    border: solid 1px #CF2A2B;
}

button.btn_linepu {
    background-color: #ffffff;
    color: #CF2A2B;
    border: solid 1px #CF2A2B;
}

a.btn_full,
input.btn_full,
button.btn_full {
    width: 100%;
    padding: 15px 0;
    text-align: center;
}

button.btn_full,
button.btn_red {
    width: 100%;
    padding: 20px 0;
    font-size: 17px;
}

.qna_complete_item button.btn_red {
    width: auto;
    padding: 6px 15px;
}


a.btn_w120 {
    width: 49%;
    max-width: 120px;
    padding: 12px 0;
    text-align: center;
}

button.btn_w120 {
    width: 49%;
    max-width: 120px;
    padding: 12px 0;
}

a.btn_short {
    width: 19%;
    padding: 12px 0;
    text-align: center;
}

button.btn_short {
    width: 19%;
    padding: 12px 0;
}

a.btn_half {
    width: 49%;
    padding: 12px 0;
    text-align: center;
}

button.btn_half {
    width: 49%;
    padding: 12px 0;
}

a.btn_long,
button.btn_long {
    width: 79%;
    padding: 12px 0;
    text-align: center;
}

button.btn_long {
    width: 79%;
    padding: 12px 0;
}

a.btn_txt {
    display: inline-block;
    padding: 0 14px;
    border-radius: 5px;
    font-weight: 600;
}

button.btn_txt {
    display: inline-block;
    padding: 0 14px;
    border-radius: 5px;
    font-weight: 600;
}

a.btn_txt_red,
span.btn_txt_red {
    color: #D8312F;
}

button.btn_txt_red {
    color: #D8312F;
}

a.btn_more,
button.btn_more {
    background-color: #f5f5f5;
    color: #fff;
    border: solid 1px #f5f5f5;
    font-weight: 500;
    border-radius: 10px;
}

button.btn_more {
    background-color: #f5f5f5;
    color: #fff;
    border: solid 1px #f5f5f5;
    font-weight: 500;
    border-radius: 10px;
}

a.btn_more.white {
    background-color: #ffffff;
    color: #fff;
    border: solid 1px #ffffff;
    font-weight: 500;
    border-radius: 10px;
}

button.btn_more.white {
    background-color: #ffffff;
    color: #fff;
    border: solid 1px #ffffff;
    font-weight: 500;
    border-radius: 10px;
}

a.btn+a.btn {
    margin-left: 2%;
}

.foot_btn .btn.btn_primary.btn_long {
    margin-left: 2%;
    font-size: 16px;
}


.btn_wrap {
    position: relative;
    width: 100%;
}

.btn_wrap:after {
    content: '';
    display: block;
    clear: both;
}

.btn_wrap a.btn {
    float: left;
}


.container {
    position: relative;
    background-color: #fff;
    padding: 0 15px 36px;
}

.container:after {
    content: '';
    display: block;
    clear: both;
}

.container_inner {
    position: relative;
    padding: 5px 0;
}

.container_inner:after {
    content: '';
    display: block;
    clear: both;
}

.container_inner_section {
    position: relative;
    padding: 0 0;
}

.container_inner_section:after {
    content: '';
    display: block;
    clear: both;
}

.container_bottom_btn {
    position: relative;
    background-color: #fff;
    padding: 0 20px 30px;
}

.container_bottom_btn:after {
    content: '';
    display: block;
    clear: both;
}

.container_section {
    position: relative;
    background-color: #fff;
    padding: 15px;
    margin-bottom: 10px;
}

.container_section:after {
    content: '';
    display: block;
    clear: both;
}

.container_section.last {
    margin-bottom: 0;
}

.container_btn {
    position: relative;
    padding: 10px 15px;
}

.container_btn:after {
    content: '';
    display: block;
    clear: both;
}

.box_container_btn {
    position: relative;
    padding: 10px 0 20px;
}

.box_container_btn:after {
    content: '';
    display: block;
    clear: both;
}

.section_box {
    position: relative;
    margin-bottom: 30px;
}

.section_box:after {
    content: '';
    display: block;
    clear: both;
}

.section_box.last {
    position: relative;
    margin-bottom: 0;
}

.top_title_btn {
    background-color: #f5f5f5;
    text-align: center;
    padding: 30px 15px;
}

.top_title_btn>h3 {
    font-size: 14px;
    font-weight: 500;
    color: #151515;
    padding-bottom: 15px;
}

.top_title_btn>h3>strong {
    color: #B8433E;
}

.top_title_btn p.txt_b {
    font-size: 13px;
    color: #555555;
    padding-top: 15px;
}

.top_title {
    background-color: #f5f5f5;
    text-align: center;
    padding: 25px 15px 25px;
}

.top_title.tw_15 {
    padding-top: 15px;
}

.top_title.bline {
    border-bottom: solid 1px #EEEEEE;
}

.top_title>h3 {
    font-size: 14px;
    font-weight: 500;
    color: #151515;
}

.top_title>h3>strong {
    color: #B8433E;
}

.top_title_w {
    background-color: #ffffff;
    text-align: left;
    padding: 30px 15px;
    border-bottom: solid 1px #F0F0F0;
}

.top_title_w.bline {
    border-bottom: solid 1px #EEEEEE;
}

.top_title_w>h3 {
    font-size: 18px;
    font-weight: 600;
    color: #151515;
}

.top_title_w>h3>strong {
    color: #B8433E;
}

.top_title_w p.txt_b {
    font-size: 13px;
    color: #555555;
    padding-top: 5px;
}


.bottom_btn_inner {
    padding: 25px 15px;
}



.item_img a i {
    display: inline-block;
    content: '';
    position: absolute;
    color: #fff;
    padding: 5px 8px;
    font-size: 11px;
    line-height: 1em;
    font-weight: 600;
    top: 12px;
    left: 12px;
    border-radius: 5px;
    font-style: normal;
    z-index: 20;
}

/* .item_img.t_taro::after { content:'타로'; background:#833EB8; }
.item_img.t_saju::after { content:'사주'; background:#43B8BC; }
.item_img.t_sjum::after { content:'신점'; background:#E64577; } */

.mt_0 {
    margin-top: 0px !important;
}

.mt_5 {
    margin-top: 5px;
}

.mt_10 {
    margin-top: 10px;
}

.mt_15 {
    margin-top: 15px;
}

.mt_20 {
    margin-top: 20px;
}

.mt_25 {
    margin-top: 25px;
}

.mt_30 {
    margin-top: 30px;
}

.mt_50 {
    margin-top: 50px;
}

.mb_10 {
    margin-bottom: 10px;
}

.mb_15 {
    margin-bottom: 15px;
}

.mb_20 {
    margin-bottom: 20px;
}

.mb_25 {
    margin-bottom: 25px;
}

.mb_30 {
    margin-bottom: 30px;
}

.pl_0 {
    padding-left: 0;
}

.pr_0 {
    padding-right: 0;
}

.last_item {
    padding-bottom: 0;
}

.point_color {
    color: #CF2A2B;
}



/* toggle in label designing */
.toggle {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 45px;
    background-color: #ffffff;
    border-radius: 30px;
    border: 2px solid #ffffff;
    box-sizing: border-box;
}

.toggle:after {
    content: '';
    position: absolute;
    width: 49%;
    height: 40px;
    border-radius: 30px;
    background-color: #EEEEEE;
    border: 2px solid #dddddd;
    top: 1px;
    left: 1%;
    transition: all 0.5s;
    box-sizing: border-box;
}

.toggle span.toggle_on {
    float: left;
    width: 50%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    justify-content: space-around;
    align-items: center;
    font-size: 20px;
    font-weight: 500;
    color: #EB655F;
    padding-left: 5%;
}

.toggle span.toggle_off {
    float: right;
    width: 50%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    justify-content: space-around;
    align-items: center;
    font-size: 20px;
    font-weight: 500;
    color: #aaaaaa;
    padding-right: 5%;
}

.checkbox:checked+.toggle:after {
    content: '';
    position: absolute;
    width: 49%;
    height: 40px;
    border-radius: 30px;
    background-color: #EB655F;
    border: 2px solid #B8433E;
    top: 1px;
    left: 50%;
    transition: all 0.5s;
    box-sizing: border-box;
}

.checkbox:checked+.toggle {
    background-color: #ffffff;
}

.checkbox {
    display: none;
}

.toggle_s {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 26px;
    background-color: #ffffff;
    border-radius: 30px;
    border: 1px solid #DDDDDD;
    box-sizing: border-box;
}

.toggle_s:after {
    content: '';
    position: absolute;
    width: 49%;
    height: 22px;
    border-radius: 30px;
    background-color: #EEEEEE;
    border: 1px solid #dddddd;
    top: 1px;
    left: 1%;
    transition: all 0.5s;
    box-sizing: border-box;
}

.toggle_s span.toggle_on {
    float: left;
    width: 50%;
    height: 22px;
    display: flex;
    justify-content: space-between;
    justify-content: space-around;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    color: #EB655F;
    padding-left: 6%;
}

.toggle_s span.toggle_off {
    float: right;
    width: 50%;
    height: 22px;
    display: flex;
    justify-content: space-between;
    justify-content: space-around;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    color: #aaaaaa;
    padding-right: 8%;
}

.checkbox:checked+.toggle_s:after {
    content: '';
    position: absolute;
    width: 49%;
    height: 22px;
    border-radius: 30px;
    background-color: #EB655F;
    border: 1px solid #B8433E;
    top: 1px;
    left: 50%;
    transition: all 0.5s;
    box-sizing: border-box;
}

.checkbox:checked+.toggle_s {
    background-color: #ffffff;
}

.checkbox {
    display: none;
}




label {
    position: relative;
}

input[type="radio"] {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: white;
    border: 1px solid #cccccc;
}

input[type="radio"]:checked {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: white;
    border: 1px solid #333;
}

input[type="radio"]:checked:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background: #333;
    transform: translateX(-50%) translateY(-50%);
    border-radius: 50%;
}

label.form_txt p.form_tit {
    font-size: 13px;
    font-weight: 600;
    color: #151515;
    padding-bottom: 8px;
    line-height: 1.5;
}

textarea.input_text {
    width: 100%;
    padding: 12px 15px;
    font-size: 14px;
    color: #555555;
    border-radius: 5px;
    border: solid 1px #DDDDDD;
}

textarea.form_h100 {
    height: 100%;
}

textarea.write_text {
    height: 330px;
}

label.form_txt p.form_tit span {
    color: red;
    font-weight: normal;
}

select.form_select {
    display: block;
    width: 100%;
    background: url('/resources/images/ico_sel_more.svg') no-repeat right 10px center / 24px 24px;
    padding: 12px 15px;
    font-size: 14px;
    color: #555555;
    background-color: #ffffff;
    border: solid 1px #DDDDDD;
    border-radius: 5px;
    margin-bottom: 5px;
}

select.form_select:last-child {
    margin-bottom: 0;
}

input.form_select {
    display: block;
    width: 100%;
    padding: 12px 15px;
    font-size: 14px;
    color: #555555;
    background-color: #ffffff;
    border: solid 1px #DDDDDD;
    border-radius: 5px;
    margin-bottom: 5px;
}

input.form_select::placeholder {
    color: #9c9c9c;
}

/* CheckBox */
.checkbox_b {
    display: block;
    vertical-align: middle;
    padding: 0;
}

.checkbox_b input[type=checkbox] {
    display: none;
}

.checkbox_b input[type=checkbox]+label {
    display: inline-block;
    position: relative;
    padding-left: 25px;
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    vertical-align: top;
    cursor: pointer;
    letter-spacing: -0.035em;
}

.checkbox_b input[type=checkbox]+label span {
    font-weight: 300;
    color: #999;
}

.checkbox_b input[type=checkbox]+label:before {
    content: "";
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border: 1px solid #dddddd;
    border-radius: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.checkbox_b input[type=checkbox]:checked+label {
    color: #151515;
    font-weight: 400;
}

.checkbox_b input[type=checkbox]:checked+label:before {
    border: 1px solid #151515;
    border-radius: 5px;
    background: url('/resources/images/check_box_on.svg') no-repeat center center;
    background-size: 24px auto;
}

.checkbox_b input[type=checkbox]:disabled+label {
    cursor: default;
}

.checkbox_b.only input[type=checkbox]+label {
    overflow: hidden;
    width: 20px;
    height: 20px;
    padding: 0;
    text-indent: -999em;
}

/* CheckBox */
.checkbox_r {
    display: block;
    vertical-align: middle;
    margin: 8px 0;
}

.checkbox_r input[type=checkbox] {
    display: none;
}

.checkbox_r input[type=checkbox]+label {
    display: inline-block;
    position: relative;
    padding-left: 30px;
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    vertical-align: top;
    cursor: pointer;
}

/*.checkbox_r input[type=checkbox] + label em{color:#de4f41;}*/
.checkbox_r input[type=checkbox]+label span {
    font-weight: 300;
    color: #999;
}

.checkbox_r input[type=checkbox]+label:before {
    content: "";
    float: left;
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: url('/resources/images/check_off.svg') no-repeat center center;
    background-size: cover;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.checkbox_r input[type=checkbox]:checked+label {
    color: #151515;
    font-weight: 400;
}

.checkbox_r input[type=checkbox]:checked+label:before {
    background: url('/resources/images/check_on.svg') no-repeat center center;
    background-size: cover;
}

.checkbox_r input[type=checkbox]:disabled+label {
    cursor: default;
}

/* .checkbox_r + .checkbox_r{margin-left:25px;} */
.checkbox_r.only input[type=checkbox]+label {
    overflow: hidden;
    width: 20px;
    height: 20px;
    padding: 0;
    text-indent: -999em;
}