@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=swap");
/* common */
*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
html,
body {
    width: 100%;
    height: 100%;
    -webkit-tap-highlight-color: transparent;
}
body {
    font-family: "Roboto", "Noto Sans KR", Arial, sans-serif !important;
    font-weight: normal;
    font-size: 15px;
    line-height: 1.4;
    color: #191919;
    letter-spacing: -0.25px;
    word-break: keep-all;
    background-color: #f9f9f9;
    overflow: auto;
}
body:after {
    content: "";
    width: 750px;
    height: 100%;
    background-color: #fff;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    position: fixed;
    z-index: -1;
}

@media screen and (max-width: 767px) {
    body {
        background-color: #fff;
    }
    body:after {
        display: none;
    }
    .scroll-hidden {
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
    }
    .scroll-hidden::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera*/
    }
}
.wrap {
    max-width: 750px;
    height: 100%;
    margin: 0 auto;
    position: relative;
}
button,
input,
textarea,
table,
select {
    font-family: "Roboto", "Noto Sans KR", Arial, sans-serif !important;
    line-height: 1.4;
}
.container {
    width: 100%;
    /* height: 100%;*/
    padding: 0 16px;
    position: relative;
}
.line {
    width: 100%;
    height: 8px;
    background-color: #f9f9f9;
}
/*width, height*/
.w-100 {
    width: 100%;
}
.h-100 {
    height: 100% !important;
}
.h-auto {
    height: auto !important;
}
/*text*/
.title-lg {
    font-size: 22px;
}
.bold {
    font-weight: 700 !important;
}
.normal {
    font-weight: normal !important;
}
.text-info {
    font-size: 12px;
    color: #888;
    line-height: 1.6;
    word-break: break-all;
}
.text-info li:nth-child(n + 2) {
    padding-top: 8px;
}
.text-center {
    text-align: center;
}
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}
.text-12 {
    font-size: 12px;
}
.text-13 {
    font-size: 13px;
    font-size: 13px;
}
.text-15 {
    font-size: 15px;
}
.text-16 {
    font-size: 16px;
}
.text-18 {
    font-size: 18px;
}
.text-20 {
    font-size: 20px;
}
.info-box {
    color: #485ba1;
    background-color: rgba(72, 91, 161, 0.03);
    border-radius: 6px;
    padding: 15px;
    font-size: 12px;
}
.info-box.info-box-red {
    color: #ff5160;
    background-color: rgba(255, 81, 96, 0.03);
}
.info-text {
    color: #485ba1;
    font-size: 12px;
}
.info-text .info-ic-text {
    width: calc(100% - 18px);
    padding-top: 1px;
}
/*font*/
.font-16 {
    font-size: 16px;
}
/*text-color*/
.text-primary {
    color: #c3a981 !important;
}
.text-primary-dk {
    color: #303742 !important;
}
.text-red {
    color: #ff5160 !important;
}
.text-blue {
    color: #485ba1 !important;
}
.text-orange {
    color: #ff9838 !important;
}
.text-wh {
    color: #ffffff !important;
}
.text-bk {
    color: #191919 !important;
}
.text-333 {
    color: #333333 !important;
}
.text-666 {
    color: #666666 !important;
}
.text-888 {
    color: #888888 !important;
}
.text-bbb {
    color: #bbbbbb !important;
}
/*bg-color*/
.bg-primary {
    background-color: #c3a981;
}
.bg-primary-dk {
    background-color: #303742;
}
.bg-red {
    background-color: #ff5160;
}
.bg-blue {
    background-color: #485ba1;
}
.bg-green {
    background-color: #52a952;
}
.bg-yellow {
    background-color: #f3b352;
}
.bg-wh {
    background-color: #ffffff;
}
.bg-bk {
    background-color: #333;
}
.bg-gray {
    background-color: #f9f9f9;
}
.bg-333 {
    background-color: #333333;
}
.bg-666 {
    background-color: #666666;
}
.bg-888 {
    background-color: #888888;
}
.bg-bbb {
    background-color: #bbbbbb;
}
/*input*/
input,
textarea {
    width: 100%;
    background-color: #fff;
    font-family: "Roboto", "Noto Sans KR", Arial, sans-serif;
    border: 0;
    border-bottom: 1px solid #ddd;
    font-size: 16px;
    color: #191919;
    border-radius: 0;
}
input {
    padding: 10px 0;
    height: 42px;
}
input:focus {
    border-color: #c3a981;
    transition: all 0.3s;
}
textarea {
    overflow: hidden auto;
    display: block;
    padding: 16px;
    border-bottom: 0;
}
input[readonly],
input[disabled] {
    color: #666;
    cursor: default;
}
input[readonly]:focus,
input[disabled] {
    border-color: #ddd;
}
.text-bk[readonly] {
    color: #191919;
}
.position-input input[readonly],
input[disabled] {
    overflow: auto;
}
input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
}
input::-webkit-date-and-time-value {
    text-align: left;
}
/*select*/
select {
    width: 100%;
    padding: 10px 0;
    height: 42px;
    font-size: 16px;
    color: #191919;
    border: 0;
    border-bottom: 1px solid #ddd;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
    background: transparent;
}
select::-ms-expand {
    display: none;
}
select option[value=""][disabled] {
    display: none;
}
.select-wrap {
    background-image: url("../images/ic-arrow-down-666.svg");
    background-repeat: no-repeat;
    background-position: center right;
    background-size: 18px;
    width: 100%;
}
.select-flex {
    display: flex;
}
.select-flex > div:nth-child(n + 2) {
    margin-left: 16px;
}
.tomb-select {
    padding: 5px 16px;
    background-color: #fff;
}
.tomb-select select {
    border-bottom: 0;
}
/*input-area*/
.input-area > div:nth-child(n + 2) {
    padding-top: 12px;
}
.input-area.label-area > div:nth-child(n + 2) {
    padding-top: 30px;
}
.input-set .input-label, .input-list .input-label {
    font-size: 13px;
    color: #666;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.input-area .input-info {
    display: none;
}
.input-info {
    font-size: 12px;
    padding-top: 8px;
    color: #888;
}
.input-success .input-info,
.input-error .input-info {
    display: block;
}
.input-success .input-info {
    color: #52a952;
}
.input-error .input-info {
    color: #ff5160;
}
.input-error input {
    border-color: #ff5160;
}
.input-set.flex input:nth-child(n + 2) {
    margin-left: 16px;
}
.input-label .date {
    font-size: 16px;
    font-weight: 700;
    color: #485ba1;
}
/*ic-input-box*/
.ic-input-box {
    position: relative;
}
.ic-input {
    padding-right: 35px;
}
.ic-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background-size: cover;
}
/*input-btn-set*/
.input-btn-set {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.input-btn-set input + button,
.input-btn-set div + button {
    margin-left: 10px;
}
.eye {
    background-image: url("../images/ic-eye.svg");
}
.eye-off {
    background-image: url("../images/ic-eye-off.svg");
}
.clear {
    visibility: hidden;
    background-image: url("../images/ic-input-clear.svg");
}
.position-input {
    width: 100%;
}
.position-input .ic-input {
    padding-left: 23px;
    padding-right: 0;
}
.position-input .ic-btn {
    right: auto;
    left: 0;
}
/*input-radiobox-set*/
.input-radiobox-set {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.input-radiobox-set > div:nth-child(n + 2) {
    margin-left: 10px;
}
/*checkbox, radio*/
.checkbox {
    position: relative;
    margin-left: 25px;
}
.radiobox {
    position: relative;
    margin-left: 17px;
}
.radiobox-label,
.checkbox-label {
    cursor: pointer;
    color: #191919 !important;
    font-size: 13px;
    padding-bottom: 0 !important;
    /*display: inherit !important;*/
    display: inline-block;
}
.radiobox input[type="radio"],
.checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    height: auto;
    z-index: -1;
}
.radiobox input[type="radio"] + .radiobox-label:before {
    content: "";
    background: #fff;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    top: 5px;
    left: -12px;
    vertical-align: top;
    cursor: pointer;
    text-align: center;
    width: 8px;
    height: 8px;
    -webkit-transition: -webkit-transform 0.4s
        cubic-bezier(0.45, 1.8, 0.5, 0.75);
    -moz-transition: -moz-transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
    transition: transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
    -webkit-transform: scale(0, 0);
    -moz-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -o-transform: scale(0, 0);
    transform: scale(0, 0);
}
.radiobox input[type="radio"] + .radiobox-label:after {
    content: "";
    border: 2px solid #bbb;
    display: inline-block;
    width: 18px;
    height: 18px;
    position: absolute;
    margin-left: -17px;
    cursor: pointer;
    text-align: center;
    transition: all 250ms ease;
    left: 0;
    top: 2px;
    border-radius: 50%;
}
.radiobox input[type="radio"]:checked + .radiobox-label:before {
    background-color: #0047ff;
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
}
.radiobox input[type="radio"]:checked + .radiobox-label:after {
    border-color: #c3a981;
}
.checkbox input[type="checkbox"] + .checkbox-label:before {
    content: "";
    display: inline-block;
    top: 6px;
    left: -21px;
    vertical-align: top;
    cursor: pointer;
    -webkit-transition: -webkit-transform 0.4s
        cubic-bezier(0.45, 1.8, 0.5, 0.75);
    -moz-transition: -moz-transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
    transition: transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    z-index: 1;
    width: 0.65rem;
    height: 0.35rem;
    border: 2px solid #bbb;
    border-top-style: none;
    border-right-style: none;
    position: absolute;
}
.checkbox input[type="checkbox"] + .checkbox-label:after {
    content: "";
    border: 2px solid #bbb;
    display: inline-block;
    width: 18px;
    height: 18px;
    position: absolute;
    margin-left: -25px;
    cursor: pointer;
    text-align: center;
    transition: all 250ms ease;
    left: 0px;
    top: 2px;
    background-color: #fff;
    border-radius: 2px;
}
.checkbox input[type="checkbox"]:checked + .checkbox-label:before {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    border-color: #fff;
}

.checkbox input[type="checkbox"]:disabled + .checkbox-label {
    cursor: initial;
}
.checkbox input[type="checkbox"]:disabled + .checkbox-label:before {
    cursor: initial;
}
.checkbox input[type="checkbox"]:disabled + .checkbox-label:after {
    cursor: initial;
}

.checkbox input[type="checkbox"]:checked + .checkbox-label:after {
    border-color: #c3a981;
    background-color: #c3a981;
}
input[type="radio"],
input[type="checkbox"] {
    border-bottom: 0;
}
/*checkbox-circle*/
.checkbox-circle .checkbox {
    margin-left: 27px;
}
.checkbox-circle .checkbox input[type="checkbox"] + .checkbox-label:after {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    margin-left: -27px;
    top: 1px;
}
.checkbox-circle .checkbox input[type="checkbox"] + .checkbox-label:before {
    top: 7px;
    left: -22px;
}
/*radiobox-circle*/
.radiobox-circle .radiobox {
    margin-left: 27px;
}
.radiobox-circle .radiobox input[type="radio"] + .radiobox-label:after {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    margin-left: -27px;
    top: 1px;
}
.radiobox-circle .radiobox input[type="radio"] + .radiobox-label:before {
    top: 7px;
    left: -22px;
    width: 0.6rem;
    transform: rotate(-45deg);
    z-index: 1;
    height: 0.35rem;
    border: 2px solid #bbb;
    border-top-style: none;
    border-right-style: none;
    position: absolute;
    background-color: transparent;
    border-radius: 0;
}
.radiobox-circle
    .radiobox
    input[type="radio"]:checked
    + .radiobox-label:before {
    border-color: #fff;
}
.radiobox-circle .radiobox input[type="radio"]:checked + .radiobox-label:after {
    background-color: #c3a981;
}
/*radiobox-basic*/
.input-set .radiobox-basic {
    padding-top: 10px;
}
.radiobox-basic {
    display: flex;
}
.radiobox-basic .radiobox {
    margin-left: 0;
}
.radiobox-basic > div {
    width: 100%;
    max-width: 180px;
    min-width: 65px;
}
.radiobox-basic > div:nth-child(n + 2) {
    margin-left: 8px;
}
.radiobox-basic .radiobox input[type="radio"] + .radiobox-label:before,
.radiobox-basic .radiobox input[type="radio"] + .radiobox-label:after {
    display: none;
}
.radiobox-basic .radiobox-label {
    width: 100%;
    font-size: 14px;
    color: #888 !important;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.radiobox-basic .radiobox input[type="radio"]:checked + .radiobox-label {
    border-color: #191919;
    color: #191919 !important;
    background-color: #fff;
}
/*input-bottom*/
.input-bottom {
    padding-top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.check-area {
    display: flex;
    align-items: center;
}
.check-area > div:nth-child(n + 2) {
    margin-left: 15px;
}
/*button*/
.btn {
    border: 1px solid transparent;
    white-space: nowrap;
}
.btn.radius {
    border-radius: 100px;
}
.btn-lg {
    font-size: 16px;
    height: 54px;
    padding: 15px 22px;
    font-weight: 700; /*min-width: 150px;*/
}
.btn-md {
    font-size: 13px;
    height: 36px;
    padding: 8px 12px; /*min-width: 80px;*/
}
.btn-ml {
    font-size: 14px;
    height: 44px;
    padding: 10px 14px;
}
.btn-sm {
    font-size: 12px;
    height: 25px;
    padding: 4px 10px;
}
.btn.shadow {
    -webkit-box-shadow: 1px 4px 14px 4px rgba(38, 25, 5, 0.12);
    box-shadow: 1px 4px 14px 4px rgba(38, 25, 5, 0.12);
}
.btn-primary {
    color: #fff;
    background-color: #c3a981;
}
.btn-bk {
    color: #fff;
    background-color: #333;
}
.btn-bk-tran {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.3);
}
.btn-primary-outline {
    color: #c3a981;
    border-color: #c3a981;
    background: #fff;
}
.btn-gray-outline {
    color: #191919;
    border-color: #dddddd;
    background: #fff;
}
.btn-bk-outline {
    color: #191919;
    border-color: #191919;
    background: #fff;
}
.btn-area {
    width: 100%;
    padding-top: 25px;
    display: flex;
    justify-content: center;
}
.btn-fixed {
    /* position: fixed; */
    position: sticky;
    bottom: 0;
    /* left: 0; */
    width: 100%;
    max-width: 750px;
    z-index: 9;
}
.btn-fixed .manager {
    padding: 16px;
    background-color: #fff;
    -webkit-box-shadow: 1px 4px 14px 4px rgba(0, 0, 0, 0.15);
    box-shadow: 1px 4px 14px 4px rgba(0, 0, 0, 0.15);
}
/*btn-disable*/
.btn-disable {
    background-color: #eee;
    color: #bbb;
    transition: all 0.3s;
    cursor: default;
}
.btn-disable.on {
    background-color: #c3a981;
    color: #fff;
    cursor: pointer;
}
/*padding*/
.p-0 {
    padding: 0 !important;
}
.p-t-5 {
    padding-top: 5px;
}
.p-t-8 {
    padding-top: 8px;
}
.p-t-10 {
    padding-top: 10px;
}
.p-t-15 {
    padding-top: 15px;
}
.p-t-16 {
    padding-top: 16px !important;
}
.p-t-20 {
    padding-top: 20px;
}
.p-t-26 {
    padding-top: 26px;
}
.p-t-30 {
    padding-top: 30px;
}
.p-t-70 {
    padding-top: 70px;
}
.p-t-0 {
    padding-top: 0 !important;
}
.p-r-2 {
    padding-right: 2px;
}
.p-r-5 {
    padding-right: 5px;
}
.p-r-6 {
    padding-right: 6px;
}
.p-r-8 {
    padding-right: 8px;
}
.p-r-10 {
    padding-right: 10px;
}
.p-r-29 {
    padding-right: 29px;
}
.p-l-3 {
    padding-left: 3px;
}
.p-l-5 {
    padding-left: 5px;
}
.p-l-8 {
    padding-left: 8px;
}
.p-b-0 {
    padding-bottom: 0 !important;
}
.p-b-3 {
    padding-bottom: 3px;
}
.p-b-5 {
    padding-bottom: 5px !important;
}
.p-b-8 {
    padding-bottom: 8px;
}
.p-b-10 {
    padding-bottom: 10px !important;
}
.p-b-12 {
    padding-bottom: 12px;
}
.p-b-15 {
    padding-bottom: 15px;
}
.p-b-16 {
    padding-bottom: 16px;
}
.p-b-20 {
    padding-bottom: 20px;
}
.p-b-30 {
    padding-bottom: 30px !important;
}
.p-b-55 {
    padding-bottom: 55px !important;
}
.p-b-85 {
    padding-bottom: 85px !important;
}
.p-b-150 {
    padding-bottom: 150px !important;
}
.p-t-b-15 {
    padding: 15px 0;
}
/*margin*/
.m-0 {
    margin: 0 !important;
}
.m-t--1 {
    margin-top: -1px;
}
.m-t--2 {
    margin-top: -2px;
}
.m-t--3 {
    margin-top: -3px;
}
.m-t-2 {
    margin-top: 2px;
}
.m-t-3 {
    margin-top: 3px;
}
.m-t-8 {
    margin-top: 8px;
}
.m-t-10 {
    margin-top: 10px;
}
.m-t-15 {
    margin-top: 15px;
}
.m-t-16 {
    margin-top: 16px;
}
.m-t-20 {
    margin-top: 20px;
}
.m-t-26 {
    margin-top: 26px;
}
.m-t-70 {
    margin-top: 70px;
}
.m-b-6 {
    margin-bottom: 6px;
}
.m-b-10 {
    margin-bottom: 10px;
}
.m-b-12 {
    margin-bottom: 12px;
}
.m-b-16 {
    margin-bottom: 16px;
}
.m-l-2 {
    margin-left: 2px;
}
.m-l-3 {
    margin-left: 3px;
}
.m-l-5 {
    margin-left: 5px;
}
.m-r-3 {
    margin-right: 3px;
}
.m-r-5 {
    margin-right: 5px;
}
.m-r-8 {
    margin-right: 8px;
}
.m-r-10 {
    margin-right: 10px;
}
/*splash*/
.splash {
    background-color: #303742;
    height: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
}
.splash .content {
    width: 100%;
    padding: 0 40px 170px;
}
.splash .logo {
    width: 100px;
    height: 40px;
    background: url("../images/logo-wh.svg") no-repeat;
}
.splash .title {
    font-size: 34px;
    color: #fff;
    padding-top: 30px;
}
.splash .flower {
    width: 166px;
    height: 268px;
    background: url(../images/img-splash-flower.svg) no-repeat;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
}
/*flex*/
.flex {
    display: flex;
}
.space-between {
    justify-content: space-between;
}
.column {
    flex-direction: column;
}
.w-center {
    justify-content: center;
}
.h-center {
    align-items: center;
}
/*social*/

.social-title {
    position: relative;
}
.social-title:before {
    content: "";
    width: 100%;
    height: 1px;
    background-color: #eee;
    position: absolute;
    top: 50%;
    margin-top: -1px;
    left: 0;
}
.social-title span {
    color: #999;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
    z-index: 1;
    padding: 0 15px;
    white-space: nowrap;
    background-color: #fff;
    z-index: 0;
}
.social-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 25px;
}
.social-btn > button:nth-child(n + 2) {
    margin-left: 15px;
}
.social-btn > button {
    width: 45px;
    height: 45px;
    border: 1px solid #eee;
    border-radius: 50%;
    position: relative;
}
.social-ic {
    width: 20px;
    height: 20px;
    background-size: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.social-ic.kakao {
    background-image: url("../images/ic-kakao.svg");
}
.social-ic.naver {
    background-image: url("../images/ic-naver.svg");
}
.social-ic.apple {
    background-image: url("../images/ic-apple.svg");
}
/*modal*/
.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: left;
    background: rgba(0, 0, 0, 0.7);
    z-index: 99999;
    overflow: auto;
}
.layer {
    display: table;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}
.layer .layer-content {
    display: table-cell;
    vertical-align: middle;
    position: relative;
    top: 0;
    padding: 60px 30px;
    width: 100%;
}
.modal-inner {
    position: relative;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: auto;
    background: #fff;
    border-radius: 10px;
}
.modal-sm {
    max-width: 360px;
    width: calc(100vw - 60px);
}
.modal-md {
    max-width: 500px;
    width: calc(100vw - 60px);
}
.modal-lg {
    max-width: 800px;
    width: calc(100vw - 60px);
}
.modal-content {
    padding: 30px 16px;
}
.modal-content p:nth-child(n + 2) {
    padding-top: 5px;
}
.modal-content .text-info {
    font-size: 13px;
}
.modal-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid #eee;
}
.modal-footer > button {
    width: 100%;
    height: 50px;
    position: relative;
    font-size: 15px;
}
.modal-footer > button:nth-child(n + 2) {
    border-left: 1px solid #eee;
}
/*full modal*/

.full-modal {
    /* position: fixed; */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: left;
    z-index: 99999;
    visibility: hidden;
    overflow: hidden;
    height: 100%;
}
.full-modal.on {
    visibility: visible;
}
.full-modal .modal-inner {
    max-width: 750px;
    height: 100%;
    border-radius: 0;
    bottom: -100%;
    position: absolute;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
    /*transition: .3s cubic-bezier(0.6, 0, 1, 0.3);*/
    transition: all 0.3s;
    /* -webkit-box-shadow: 0 -20px 28px 0 rgb(0, 0, 0, .12);
  box-shadow: 0 -20px 28px 0 rgb(0, 0, 0, .12);*/
    z-index: 999;
    right: auto;
}
.full-modal.on .modal-inner {
    bottom: 0;
}
.full-modal .layer .layer-content {
    padding: 0;
    height: 100%;
}
.full-modal .modal-content {
    padding: 30px 16px 30px;
    overflow: auto;
    height: calc(100% - 50px);
}
.modal-header {
    display: flex;
    align-items: center;
    height: 50px;
    border-bottom: 1px solid #eee;
    background-color: #fff;
}
.modal-close {
    position: absolute;
    width: 24px;
    height: 24px;
    background: url("../images/ic-close-bk.svg") no-repeat;
    right: 16px;
    top: 13px;
    z-index: 1;
}
.full-modal .header-title {
    font-size: 17px;
    font-weight: 700;
    text-align: center;
    width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0 auto;
}
.ic-modal {
    margin: 0 auto 8px;
}
/*article*/
.article > div:nth-child(n + 2) {
    padding-top: 30px;
}
.article-h1 {
    font-size: 15px;
    font-weight: 700;
}
.article-h2 {
    font-size: 13px;
    padding-top: 15px;
    color: #333;
}
.article-p {
    font-size: 11px;
    color: #666;
    padding-top: 6px;
    line-height: 1.6;
}
.article-p li:nth-child(n + 2) {
    padding-top: 6px;
}
/*join-step*/
.join-step li {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    width: 18px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 50%;
    background-color: #ddd;
    line-height: 1;
}
.join-step li.active {
    background-color: #485ba1;
}
.join-step li:nth-child(n + 2) {
    margin-left: 10px;
}
/*join-agree*/
.check-all {
    padding: 18px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}
.check-all .checkbox-label {
    font-size: 16px;
    font-weight: 700;
}
.check-item {
    padding-top: 20px;
}
.check-item .checkbox-label {
    color: #666 !important;
}
.check-arrow-set {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.check-arrow-set > div {
    padding: 12px 0;
}
.check-arrow-set > div:nth-child(1) {
    width: calc(100% - 40px);
}
.check-arrow-set > div:nth-child(2) {
    width: 40px;
}
.check-arrow-set a {
    display: flex;
    justify-content: flex-end;
}
/*ic-svg*/
.ic-14 {
    width: 14px;
    height: 14px;
}
.ic-16 {
    width: 18px;
    height: 18px;
}
.ic-18 {
    width: 18px;
    height: 18px;
}
.ic-20 {
    width: 20px;
    height: 20px;
}
.ic-24 {
    width: 24px;
    height: 24px;
}
.ic-32 {
    width: 32px;
    height: 32px;
}
.ic-40 {
    width: 40px;
    height: 40px;
}
.ic-70 {
    width: 70px;
    height: 70px;
}
.ic-arrow-right-bk {
    background-image: url("../images/ic-arrow-right-bk.svg");
    background-size: cover;
}
.ic-arrow-right-blue {
    background-image: url("../images/ic-arrow-right-blue.svg");
    background-size: cover;
}
.ic-arrow-right-red {
    background-image: url("../images/ic-arrow-right-red.svg");
    background-size: cover;
}
.ic-arrow-right-gray-bbb {
    background-image: url("../images/ic-arrow-right-gray-bbb.svg");
    background-size: cover;
}
.ic-arrow-right-gray-666 {
    background-image: url("../images/ic-arrow-right-gray-666.svg");
    background-size: cover;
}
.ic-check-circle-green {
    background-image: url("../images/ic-check-circle-green.svg");
    background-size: cover;
}
.ic-check-circle-fill-green {
    background-image: url("../images/ic-check-circle-fill-green.svg");
    background-size: cover;
}
.ic-cancel-circle-fill-red {
    background-image: url("../images/ic-cancel-circle-fill-red.svg");
    background-size: cover;
}
.ic-arrow-circle-right-wh {
    background-image: url("../images/ic-arrow-circle-right-wh.svg");
    background-size: cover;
}
.ic-cancel-circle-fill-ddd {
    background-image: url("../images/ic-cancel-circle-fill-ddd.svg");
    background-size: cover;
}
.ic-cancel-circle-red {
    background-image: url("../images/ic-cancel-circle-red.svg");
    background-size: cover;
}
.ic-tel {
    background-image: url("../images/ic-tel.svg");
    background-size: cover;
}
.ic-message {
    background-image: url("../images/ic-message.svg");
    background-size: cover;
}
.ic-calendar-today {
    background-image: url("../images/ic-calendar-today.svg");
    background-size: cover;
}
.ic-calendar-bbb {
    background-image: url("../images/ic-calendar-bbb.svg");
    background-size: cover;
}
.ic-pin-bbb {
    background-image: url("../images/ic-pin-bbb.svg");
    background-size: cover;
}
.ic-pin-bk {
    background-image: url("../images/ic-pin-bk.svg");
    background-size: cover;
}
.ic-focus {
    background-image: url("../images/ic-focus.svg");
    background-size: cover;
}
.ic-focus-666 {
    background-image: url("../images/ic-focus-666.svg");
    background-size: cover;
}
.ic-info-blue {
    background-image: url("../images/ic-info-blue.svg");
    background-size: cover;
}
.ic-info-bbb {
    background-image: url("../images/ic-info-bbb.svg");
    background-size: cover;
}
.ic-megaphone {
    background-image: url("../images/ic-megaphone.svg");
    background-size: cover;
}
.ic-megaphone-lg {
    background-image: url("../images/ic-megaphone-lg.svg");
    background-size: cover;
}
.ic-bus {
    background-image: url("../images/ic-bus.svg");
    background-size: cover;
}
.ic-subway {
    background-image: url("../images/ic-subway.svg");
    background-size: cover;
}
.ic-search-bbb {
    background-image: url("../images/ic-search-bbb.svg");
    background-size: cover;
}
.ic-search-bk {
    background-image: url("../images/ic-search-bk.svg");
    background-size: cover;
}
.ic-plus-circle-bk {
    background-image: url("../images/ic-plus-circle-bk.svg");
    background-size: cover;
}
.ic-plus-circle-fill-bk {
    background-image: url("../images/ic-plus-circle-fill-bk.svg");
    background-size: cover;
}
.ic-close-bbb {
    background-image: url("../images/ic-close-bbb.svg");
    background-size: cover;
}
.ic-arrow-down-bbb {
    background-image: url("../images/ic-arrow-down-bbb.svg");
    background-size: cover;
}
.ic-arrow-down-666 {
    background-image: url("../images/ic-arrow-down-666.svg");
    background-size: cover;
}
.ic-kakaonavi {
    background-image: url("../images/ic-kakaonavi.svg");
    background-size: cover;
}
.ic-input-clear {
    background-image: url("../images/ic-input-clear.svg");
    background-size: cover;
}
.ic-gift {
    background-image: url("../images/ic-gift.svg");
    background-size: cover;
}
.ic-truck {
    background-image: url("../images/ic-truck.svg");
    background-size: cover;
}
.ic-setting {
    background-image: url("../images/ic-setting.svg");
    background-size: cover;
}
.ic-customer {
    background-image: url("../images/ic-customer.svg");
    background-size: cover;
}
.ic-faq {
    background-image: url("../images/ic-faq.svg");
    background-size: cover;
}
.ic-list {
    background-image: url("../images/ic-list.svg");
    background-size: cover;
}
.ic-arrow-left-circle-fill-yellow {
    background-image: url("../images/ic-arrow-left-circle-fill-yellow.svg");
    background-size: cover;
}
.ic-info-fill-blue {
    background-image: url("../images/ic-info-fill-blue.svg");
    background-size: cover;
}
.ic-noti-list {
    background-image: url("../images/ic-noti-list.svg");
    background-size: cover;
}
.ic-noti-building {
    background-image: url("../images/ic-noti-building.svg");
    background-size: cover;
}
.ic-noti-tomb {
    background-image: url("../images/ic-noti-tomb.svg");
    background-size: cover;
}
.ic-noti-cash {
    background-image: url("../images/ic-noti-cash.svg");
    background-size: cover;
}
.ic-noti-won {
    background-image: url("../images/ic-noti-won.svg");
    background-size: cover;
}
/*finish*/
.finish {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-bottom: 100px;
}
.finish .title-lg {
    line-height: 1.7;
}
.finish .user-info {
    display: flex;
    color: #888;
    padding-top: 30px;
    font-size: 14px;
}
.finish .user-info li:nth-child(n + 2) {
    padding-left: 10px;
}
/*visual*/
.visual {
    padding: 35px 0;
    position: relative;
    background-image: url("../images/img-visual.svg");
    background-repeat: no-repeat;
    background-position: right center;
}
.visual-content {
    padding-left: 16px;
}
.visual-content .title {
    font-size: 24px;
    font-weight: 700;
    padding-bottom: 15px;
}
/*section*/
.section {
    padding: 30px 0;
}
.section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.section-title li {
    font-size: 16px;
    font-weight: 700;
}
.section-wrap > div:nth-child(n + 2) {
    padding-top: 30px;
}
.more {
    font-size: 13px;
    color: #666;
    display: flex;
    align-items: center;
}
.more:after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url("../images/ic-arrow-right-gray-666.svg");
    background-repeat: no-repeat;
    background-size: cover;
    margin: -2px 0 0 2px;
}
.section-title .checkbox-label {
    font-weight: normal;
}
.section-title .text-info {
    font-size: 12px;
    color: #485ba1;
    font-weight: normal;
}
.section-total {
    font-size: 20px !important;
    color: #ff5160;
}
/*recommend*/
.recommend {
    display: flex;
    padding: 14px 0 10px 16px;
    overflow-y: auto;
    height: 175px;
}
.recommend > div {
    padding-right: 16px;
}
.recommend .item {
    width: 120px;
}
.img {
    overflow: hidden;
    border-radius: 6px;
    position: relative;
    height: 120px;
}
.img img {
    width: auto;
    height: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.recommend .img {
    width: 120px;
    height: 120px;
}
.recommend .title {
    padding-top: 10px;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/*card*/
.card {
    padding: 30px 16px 22px;
}
.card > div:nth-child(n + 2) {
    margin-top: 16px;
}
.type-title {
    font-size: 16px;
    padding-bottom: 14px;
}
.card-box {
    background-color: #fff;
    border-radius: 12px;
    -webkit-box-shadow: 1px 4px 14px 4px rgba(0, 0, 0, 0.15);
    box-shadow: 1px 4px 14px 4px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    position: relative;
}

.card .content {
    padding: 28px 20px 25px;
}
.link {
    cursor: pointer;
}
.card-badge {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    padding: 6px 10px;
    border-radius: 100px;
    position: absolute;
    top: 15px;
    right: 10px;
}
.card .name {
    font-size: 18px;
    display: flex;
    align-items: center;
}
.card .name span {
    padding: 0 5px;
}
.card .info {
    font-size: 13px;
    color: #888;
    padding-top: 5px;
}
.card .content > div:nth-child(n + 2) {
    margin-top: 10px;
}
.card .btn-box-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.card .btn-box-wrap > div:nth-child(n + 2) {
    margin-left: 8px;
}
.card .btn-box {
    border: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.card .btn-box .link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px 10px 10px 12px;
}
.card .btn-box .link li {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.card .btn-box .link li.title {
    font-size: 12px;
    color: #333;
}
.card .btn-box .link li.case {
    font-size: 18px;
    font-weight: 700;
    color: #485ba1;
}
.card .btn-box button {
    display: flex;
    align-items: center;
    padding-right: 12px;
}
.card .btn-box button:before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 24px;
    background-color: #ddd;
    margin-right: 12px;
}
.btn-box.m-t-8 {
    margin-top: 8px !important;
}
.card-btn {
    display: flex;
}
.card-btn.btn-line {
    border-top: 1px solid #eee;
}
.card-btn.btn-line .btn-lg {
    font-size: 15px;
    font-weight: normal;
}
.card-btn.btn-line button + button {
    border-left: 1px solid #eee;
}
/*manager*/
.manager {
    padding: 12px;
    background-color: #f9f9f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.manager .img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #f3f3f3;
}
.manager-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.manager-info {
    padding-left: 10px;
    font-size: 12px;
    width: calc(100% - 36px);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.direct-estimate {
    font-weight: 500;
    font-size: 10px;
    color: #52a952;
    border: 1px solid #52a952;
    padding: 0 5px;
    text-align: center;
}
.btn-icon {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.btn-icon button:nth-child(n + 2) {
    margin-left: 20px;
}
.manager-wrap > div:nth-child(n + 2) {
    margin-top: 8px;
}
/*total*/
.card .total {
    margin-top: 20px !important;
}
.total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
}
.total li:nth-child(1) {
    font-size: 16px;
    font-weight: 700;
}
.total .price {
    font-size: 20px;
    color: #ff5160;
    display: flex;
    align-items: center;
}
/*position-tab*/
.position-tab {
    float: left;
    background-color: #f6f6f6;
    width: 150px;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    padding-bottom: 30px;
}
/* Style the buttons inside the tab */
.position-tab button {
    color: #888;
    padding: 12px;
    width: 100%;
    border: none;
    outline: none;
    cursor: pointer;
    transition: 0.3s;
    font-size: 15px;
    height: 50px;
}
.position-tab button.active {
    background-color: #fff;
    color: #191919;
    font-weight: 700;
}
.tabcontent {
    float: left;
    padding-left: 16px;
    width: calc(100% - 150px);
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    padding-bottom: 30px;
}
.tabcontent li {
    padding: 14px 12px;
    color: #333;
    min-height: 50px;
    font-size: 15px;
    border-bottom: 1px solid #eee;
    word-break: break-all;
}
/*estimate-list*/
.estimate-list {
    background-color: #f9f9f9;
    min-height: calc( 100vh - 50px );
}
.estimate-list .top .card {
    padding: 20px 16px;
    background-color: #fff;
}
.estimate-list .list .card {
    padding: 16px;
}
.estimate-list .list .card .content {
    padding: 25px 20px 16px;
}
.estimate-list .list .card .content > div:nth-child(n + 2) {
    margin-top: 12px;
}
.estimate-list .list .card-box {
    border: 1px solid rgba(0, 0, 0, 0);
}
.estimate-list .list .card-box.active {
    border-color: #c3a981;
}
.fav-event {
    position: absolute;
    top: 15px;
    right: 15px;
    cursor: pointer;
    background-image: url("../images/ic-star.svg");
    background-size: cover;
}
.fav-event.active {
    background-image: url("../images/ic-star-active.svg");
}
.estimate-list .img-text {
    width: calc(100% - 20px);
}
.img-text {
    display: flex;
    align-items: center;
}
.img-text .img {
    width: 50px;
    height: 50px;
    border-radius: 3px;
}
.img-text .text {
    padding-left: 12px;
    width: calc(100% - 50px);
}
.img-text .text li {
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.img-text .text li:nth-child(1) {
    font-size: 16px;
    padding-top: 3px;
}
.img-text .text li:nth-child(2) {
    font-size: 20px;
}
.simbol-info {
    font-size: 13px;
    color: #888;
}
.simbol-info li {
    text-indent: -10px;
    padding-left: 10px;
}
.simbol-info li:nth-child(n + 2) {
    padding-top: 3px;
}
.simbol-info li:before {
    content: "";
    width: 5px;
    height: 5px;
    background-color: #bbb;
    display: inline-block;
    margin: -2px 6px 0 0;
    vertical-align: middle;
    border-radius: 50%;
}
/*table-basic*/
.table-basic {
    width: 100%;
}
table {
    width: 100%;
}
th,
td {
    font-size: 15px;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}
th {
    color: #666;
}
/*table-simple*/
.table-simple th,
.table-simple td {
    font-size: 14px;
    border-bottom: 0;
    padding: 2px 0;
}
.table-simple th {
    color: #888;
    vertical-align: top;
}
.table-simple td {
    color: #333;
}
/*table-padding*/
.table-padding th,
.table-padding td {
    padding: 7px 0;
}
/*cost-info*/
.cost-info {
    background-color: white;
}
.cost-info .top {
    background-color: #303742;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #fff;
    text-align: center;
    height: 160px;
}
.cost-info .top .title {
    font-size: 15px;
}
.cost-info .top .price {
    font-size: 32px;
    padding-top: 5px;
}
/*cost-area*/
.cost-set {
    padding: 24px 0;
    border-bottom: 1px solid #eee;
}
.cost-area .cost-set:last-child {
    border-bottom: 0;
}
.cost-label {
    font-size: 13px;
    color: #666;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cost-item {
    padding-top: 12px;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    word-break: break-all;
}
.cost-item li:nth-child(1) {
    width: 60%;
}
.cost-item li:nth-child(2) {
    width: 40%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}
.message-box {
    background-color: #f1f1f1;
    font-size: 15px;
    border-radius: 6px;
    padding: 15px;
}
/*calendar-area*/
.calendar-area {
    padding: 25px 16px 16px;
}
.calendar-area .date {
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    padding-bottom: 12px;
}
.calendar {
    width: 100%;
}
.calendar th {
    font-weight: 700;
}
.calendar th,
.calendar td {
    font-size: 13px;
    text-align: center;
    padding: 8px 0;
    border-bottom: 0;
    color: #333;
}
/*slide-area*/
.full-modal .modal-content.slide-area {
    padding: 0 0 30px;
}
.slide-area .img {
    width: 100%;
    height: 0;
    border-radius: 0;
    padding-bottom: 56.25%;
}
.slide-area .img img {
    height: auto;
    width: 100%;
    top: 50%;
    left: auto;
    transform: translateY(-50%);
}
.swiper-pagination {
    color: #fff;
    text-align: right !important;
    padding-right: 16px;
    font-size: 13px;
}
.swiper-bottom {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 10px 50px 10px 16px;
    color: #fff;
    font-size: 13px;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.6);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/*detail-view*/
.detail-view .top {
    padding: 20px 0;
}
.detail-view .top .title-wrap {
    display: flex;
    justify-content: space-between;
}
.detail-view .top .title-wrap .title {
    width: calc(100% - 24px);
}
.detail-view .top .title {
    font-size: 20px;
    font-weight: 700;
}
.detail-view .top .title-add {
    font-size: 14px;
    color: #333;
    padding-top: 3px;
}
.map-area,
.map-area iframe {
    width: 100%;
    height: 150px;
}
.map-add {
    padding-top: 15px;
    font-size: 15px;
}
.traffic > div:nth-child(n + 2) {
    padding-top: 15px;
}
.traffic-text li:nth-child(n + 2) {
    padding-top: 3px;
}
.traffic-text li.p-t-15 {
    padding-top: 15px;
}
.traffic .text-333.bold {
    font-weight: 500 !important;
}
.bus-badge {
    font-size: 11px;
    color: #fff;
    padding: 1px 6px;
    text-align: center;
    margin: -2px 5px 0 0;
}
.bus-badge.bg-green {
    background-color: #72ac50;
}
.bus-badge.bg-blue {
    background-color: #2f77b2;
}
.bus-badge.bg-red {
    background-color: #e74a2a;
}
.bus-badge.bg-yellow {
    background-color: #febe30;
}
/*option*/
.full-modal .modal-content.option {
    padding: 20px 16px 30px;
}
.option .title {
    font-size: 15px;
    color: #485ba1;
    text-align: center;
    padding-bottom: 16px;
}
.option-item-wrap > div:nth-child(n + 2) {
    margin-top: 8px;
}
.option-item {
    position: relative;
    padding: 15px;
    border: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.option-item.active {
    border-color: #c3a981;
}
.option-title li:nth-child(1) {
    font-size: 15px;
    font-weight: 500;
}
.option-product {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.option-title li:nth-child(2) {
    font-size: 13px;
    color: #666;
    padding-top: 2px;
}
.option-title li:nth-child(2)::before {
    content: "\feff";
}
.option-price {
    font-size: 18px;
}
.badge-recommend {
    width: 26px;
    height: 25px;
    background-image: url("../images/ic-best.svg");
    background-size: cover;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}
.option-state {
    width: 30px;
    height: 30px;
    font-size: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid;
    border-color: transparent;
    line-height: 1.1;
    margin-right: 10px;
}
.option-state.red {
    color: #ff5160;
    border-color: #ff5160;
}
.option-state.blue {
    color: #485ba1;
    border-color: #485ba1;
}
.option-only .option-item {
    display: block;
}
.option-only .option-price {
    display: flex;
    justify-content: flex-end;
}
/*map-area*/

.map-area.h-100 {
    background-color: #eee;
    position: relative;
}
.map-area.h-100 iframe {
    height: 100%;
    border: 0;
}
.marker {
    background-image: url("../images/ic-marker.svg");
    background-size: cover;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 47px;
    z-index: 999;
    margin-top: -20px;
}
.map-bottom {
    position: absolute;
    padding: 30px 16px;
    left: 0;
    bottom: 0;
    background-color: #fff;
    width: 100%;
    border-radius: 20px 20px 0 0;
    height: 165px;
    overflow: hidden;
    z-index: 999;
}
.map-bottom-input {
    padding-top: 15px;
}
.map-bottom-input .add-title {
    font-size: 15px;
    font-weight: 700;
    padding-bottom: 8px;
}
.map-bottom-input .add-title:before {
    content: "";
    width: 7px;
    height: 7px;
    display: inline-block;
    vertical-align: middle;
    margin: -2px 5px 0 0;
    border: 2px solid #191919;
    border-radius: 50%;
}
.map-bottom-input button {
    width: 70px;
}
.map-focus {
    width: 50px;
    height: 50px;
    position: absolute;
    background-color: #fff;
    border-radius: 50%;
    -webkit-box-shadow: 0px 1px 16px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 16px rgba(0, 0, 0, 0.1);
    z-index: 999;
    left: 16px;
    bottom: 181px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.map-search-wrap {
    position: absolute;
    z-index: 9999;
    width: calc(100% - 32px);
    top: 16px;
    left: 16px;
}
.map-search {
    width: 100%;
    position: absolute;
    z-index: 9999;
}
.map-search input {
    border-bottom: 0;
    padding-left: 38px;
    border-radius: 6px;
    background-color: #fff;
    -webkit-box-shadow: 0px 1px 16px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 16px rgba(0, 0, 0, 0.1);
    height: 45px;
}
.map-search input.searchfocus.on {
    border-radius: 6px 6px 0 0;
}
.map-search .ic-search-bbb {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
}
/*result-box-wrap*/
.result-box-wrap {
    position: absolute;
    top: 45px;
    left: 0;
    right: 0;
    visibility: hidden;
    z-index: 999;
}
.result-box-content-wrap {
    background: #fff;
    border-radius: 0 0 6px 6px;
    -webkit-box-shadow: 0px 1px 16px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 16px rgba(0, 0, 0, 0.1);
    max-height: 200px;
    overflow-y: auto;
    padding: 14px 0;
}
.result-box-content li a {
    font-size: 14px;
    color: #666;
    padding: 5px 16px;
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/*payment*/
.payment .top {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.payment .top .img {
    width: 80px;
    height: 80px;
}
.payment .top .title {
    text-align: center;
    padding-top: 16px;
}
.payment .top .title li:nth-child(1) {
    font-size: 18px;
    font-weight: 700;
}
.payment .top .title li:nth-child(2) {
    font-size: 14px;
    color: #666;
    padding-top: 3px;
}
.payment-list > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}
.payment-list li:nth-child(1) {
    color: #666;
}
/*reserve-step*/
.reserve-step {
    padding: 0 0 20px;
    position: relative;
    display: flex;
    justify-content: center;
}
.reserve-step > div {
    text-align: center;
    padding: 0 20px;
    position: relative;
    width: 90px;
}
.reserve-step .title {
    font-size: 13px;
    color: #888;
    word-break: break-all;
}
.reserve-step .active .title {
    color: #52a952;
}
.ic-reserve-wrap {
    position: relative;
    padding-bottom: 45px;
}
.ic-reserve-step {
    width: 16px;
    height: 16px;
    background-color: #eee;
    border-radius: 50%;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}
.step-line {
    position: absolute;
    right: 50%;
    top: 50%;
    transform: translateY(-50%);
    width: 85px;
    height: 2px;
    background-color: #eee;
    z-index: 1;
}
.reserve-step .active .ic-reserve-step {
    background-color: #fff;
    border: 2px solid #52a952;
}
.reserve-step .active .step-line {
    background-color: #52a952;
}
.reserve-step .active.focus .ic-reserve-step {
    background-image: url(../images/ic-check-circle-fill-green.svg);
    width: 30px;
    height: 30px;
    border: 0;
    background-repeat: no-repeat;
    background-size: cover;
}
.reserve-info {
    font-size: 15px;
    color: #333;
    text-align: center;
    line-height: 1.5;
    border-top: 1px solid #eee;
    padding-top: 20px;
}
.reserve-btn {
    padding-top: 16px;
}
.reserve-btn button {
    margin: 0 auto;
}
/*message-send*/
.message-send textarea {
    height: 200px;
}
/*tabs*/

.tabs {
    position: relative;
    padding-top: 10px;
}
.tabs-nav {
    text-align: center;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tabs-nav ul {
    display: flex;
    white-space: nowrap;
    padding: 0 16px;
}
.tabs-nav a {
    display: block;
    border: none;
    text-decoration: none;
}
.tabs-content .tabs-panel {
    position: relative;
    display: none;
}
.tabs-content .tabs-panel.active {
    display: block;
}
.tabs-content {
    padding-top: 16px;
}
/*style-line*/
.style-line .tabs-nav ul li {
    position: relative;
}
.style-line .tabs-nav ul li:after {
    content: "";
    background: #191919;
    width: 0;
    height: 2px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: 0.1s; /*margin-bottom: -1px;*/
}
.style-line .tabs-nav ul li.active:after {
    width: calc(100% - 0px);
    transition: 0.3s;
}
.style-line .tabs-nav ul li + li {
    margin-left: 20px;
}
.style-line .tabs-nav a {
    color: #888;
    font-size: 15px;
    padding: 10px 5px;
}
.style-line .tabs-nav .active a {
    color: #191919;
    font-weight: 700;
}
.btn-add {
    display: flex;
    align-items: center;
    font-size: 15px;
    color: #191919;
}
/*search-box*/
.search-box {
    position: relative;
}
.search-box input {
    background-color: #f5f5f5;
    border-radius: 6px;
    border-bottom: 0;
    padding: 10px 10px 10px 35px;
}
.ic-search {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
}
/*send-user-list*/
.send-user-list {
    /*padding-top: 16px;*/
}
.user-list {
    padding: 16px 0;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.user-content {
    width: calc(100% - 18px);
    display: flex;
    align-items: center;
}
.user-wrap {
    position: relative;
}
.user-img {
    width: 40px;
    height: 40px;
    background-color: #f3f3f3;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    background-image: url("../images/ic-profile.svg");
    background-size: 16px 16px;
    background-position: center;
    background-repeat: no-repeat;
}
.user-img img {
    width: auto;
    height: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.user-wrap .ic-check {
    position: absolute;
    right: -1px;
    bottom: -1px;
}
.user-text {
    width: calc(100% - 40px);
    padding-left: 12px;
}
.user-text li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-text li:nth-child(1) {
    font-size: 16px;
}
.user-text li:nth-child(2) {
    font-size: 13px;
    color: #666;
}
.toast {
    font-size: 14px;
    color: #fff;
    padding: 10px 16px;
    position: fixed;
    z-index: 999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #333;
    border-radius: 6px;
    text-align: center;
    width: 100%;
    max-width: 300px;
    display: none;
}
/*example-sentence*/
.example-sentence > div {
    padding: 20px;
    border: 1px solid #eee;
    margin-top: 16px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
}
.example-sentence > div.active {
    border-color: #c3a981;
}
/*progress*/
.progress {
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.progress .bar {
    position: relative;
    width: calc(100% - 40px);
    height: 4px;
    background-color: #f1f2f8;
    border-radius: 100px;
    overflow: hidden;
}
.progress .bar-active {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    z-index: 1;
    background-color: #485ba1;
    border-radius: 100px;
    transition: all 0.3s;
}
.progress .percent {
    width: 40px;
    font-size: 14px;
    color: #485ba1;
    text-align: right;
}
/*condolence*/

.condolence .top {
    border-radius: 12px;
    padding: 20px;
    background-color: #485ba1;
}
.condolence .top > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
}
.condolence .top > div:nth-child(n + 2) {
    padding-top: 10px;
}
.condolence .top > div li:nth-child(1) {
    font-size: 16px;
}
.condolence .top > div li:nth-child(2) {
    font-size: 20px;
}
/*acoordion*/
.acd-menu {
    position: relative;
}
.acd-menu .has-child {
    position: relative;
}
.acd-menu .has-child .parent {
    position: relative;
    padding: 20px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.acd-menu .has-child .child {
    position: relative;
    display: none;
}
.ic-acd-arrow {
    -webkit-transition: -webkit-transform 0.15s;
    transition: transform 0.15s;
    display: block;
}
.parent.open .ic-acd-arrow {
    -webkit-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg);
    -webkit-transition: -webkit-transform 0.15s;
    transition: transform 0.15s;
}
.acd-menu > ul {
    overflow: hidden;
}
.acd-menu > ul > li {
    position: relative;
    border-bottom: 1px solid #eee;
}
.parent .ls-inner {
    width: calc(100% - 18px);
    padding-right: 15px;
}
.acd-title {
    font-size: 15px;
    color: #191919;
}
.child .ls-inner {
    font-size: 14px;
    color: #666;
    background: #f9f9f9;
    padding: 20px 16px;
    line-height: 1.5;
}
.acd-list .date {
    font-size: 13px;
    color: #888;
    padding-bottom: 5px;
}
/*condolence-list*/
.condolence-list {
    padding-top: 16px;
}
.condolence-list .parent .price-wrap {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.condolence-list .parent .price-wrap .price {
    font-size: 16px;
    color: #191919;
}
.condolence-list .acd-menu .has-child .parent {
    padding: 16px 0;
}
.condolence-list .acd-title {
    font-size: 16px;
}
.condolence-list .acd-info {
    font-size: 13px;
    color: #666;
}
.condolence-list .acd-menu .has-child .child {
    border-top: 0;
    padding-bottom: 16px;
}
.condolence-list .child .ls-inner {
    font-size: 14px;
    color: #191919;
    background: #f1f1f1;
    padding: 12px;
    border-radius: 12px;
}
.condolence-list .parent .ls-inner {
    width: 60%;
}
/*list-badge*/
.list-badge {
    display: flex;
    align-items: center;
}
.list-badge > div:nth-child(n + 2) {
    margin-left: 3px;
}
.list-badge > div {
    font-size: 11px;
    padding: 1px 5px 0px;
    border: 1px solid;
    text-align: center;
}
.list-badge .dk-primary {
    color: #303742;
    border-color: #303742;
}
.list-badge .blue {
    color: #485ba1;
    border-color: #485ba1;
}
.list-badge .green {
    color: #52a952;
    border-color: #52a952;
}
.list-badge .orange {
    color: #ff9838;
    border-color: #ff9838;
}
.list-badge.w-fixed > div {
    width: 42px;
}
/*coffin-option*/
.coffin-option {
    display: flex;
}
.coffin-option > div {
    width: 33.333%;
    max-width: 120px;
}
.coffin-option > div:nth-child(n + 2) {
    margin-left: 8px;
}
.coffin-option .checkbox input[type="checkbox"] + .checkbox-label:before,
.coffin-option .checkbox input[type="checkbox"] + .checkbox-label:after {
    display: none;
}
.coffin-option .checkbox {
    margin-left: 0;
    position: relative;
    width: 100%;
    padding-bottom: 100%;
}
.coffin-option .checkbox input[type="checkbox"] + .checkbox-label {
    border: 1px solid #ddd;
    font-size: 15px;
    color: #888 !important;
    position: absolute;
    width: 100%;
    height: 100%;
    margin: auto;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}
.coffin-option .checkbox input[type="checkbox"]:checked + .checkbox-label {
    border-color: #191919;
    font-weight: 700;
    color: #191919 !important;
}
.coffin-option .checkbox-label > div {
    font-size: 12px;
}
.coffin-option
    .checkbox
    input[type="checkbox"]:checked
    + .checkbox-label
    > div {
    color: #888 !important;
    font-weight: normal;
}

@media screen and (max-width: 767px) {
    .coffin-option > div {
        max-width: 33.333%;
    }
}
/*radiobox-select*/
.radio-check-select-wrap {
    display: flex;
}
.radio-check-select-wrap > div:nth-child(n + 2) {
    margin-left: 20px;
}
/*옵션 숨기기*/
#content > div:nth-child(n + 2) {
    display: none;
}
/*vehicle*/
.vehicle {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.vehicle > div {
    width: 50%;
}
.vehicle > div:nth-child(n + 2) {
    margin-left: 30px;
}
/*number-input*/

.number-wrap {
    display: flex;
    justify-content: flex-end;
    padding-top: 10px;
}
.number {
    display: flex;
    align-items: center;
}
.input-number-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.input-number-wrap label {
    width: 25px;
    display: inline-block;
    padding: 0 0 0 1px;
}
.input-number {
    color: #191919;
    font-size: 16px;
    font-weight: 700;
    border-bottom: 0;
    width: 25px;
    text-align: right;
    padding-right: 1px;
}
.minus,
.plus {
    height: 70px;
    width: 70px;
    user-select: none;
}
.minus,
.plus {
    display: inline-block;
    cursor: pointer;
    position: relative;
}
.minus,
.plus {
    width: 45px;
    height: 45px;
    background-size: cover;
    background-repeat: no-repeat;
}
.minus {
    background-image: url("../images/ic-number-minus-circle.svg");
}
.plus {
    background-image: url("../images/ic-number-plus-circle.svg");
}
/*distance*/
.distance {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background-color: #f9f9f9;
}
.distance li {
    font-size: 14px;
}
/*fee-area*/
.cemetery-position {
    padding: 30px 16px;
    margin: 0 -16px;
}
.cemetery-position-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
}
.cemetery-position-header > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #fff;
}
.cemetery-position-header ul {
    display: flex;
    align-items: center;
}
.cemetery-position-header ul:nth-child(n + 2) {
    margin-left: 16px;
}
.fee-badge {
    width: 12px;
    height: 12px;
    margin-right: 5px;
}
/*cemetery-table*/
.cemetery-table table {
    width: auto;
    margin: 0 auto;
}
.cemetery-table th,
.cemetery-table td {
    font-size: 13px;
    text-align: center;
    color: #fff;
    width: 40px;
    height: 40px;
    border: 4px solid #303742;
    padding: 0;
    font-weight: 500;
}
.cemetery-table th {
    opacity: 0.5;
}
.cemetery-table td {
    background-color: #4b596e;
}
.cemetery-table .bg-light-blue {
    background-image: url("../images/bg-box-disable.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 40px;
    height: 40px;
}
.cemetery-table .bg-dk-blue {
    background-color: #4b596e;
}
.cemetery-table .bg-primary {
    background-color: #c3a981 !important;
}
.cemetery-table .bg-light-blue {
    background-color: #828fa5 !important;
}
.cemetery-table .bg-tran {
    background-color: transparent !important;
}
/*route-wrap*/
.route {
    display: flex;
}
.route-badge {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-top: 20px;
}
.route-content {
    width: calc(100% - 52px);
    padding: 20px 0;
    margin-left: 12px;
    border-bottom: 1px solid #eee;
    position: relative;
}
.route-content li:nth-child(1) {
    font-size: 16px;
    font-weight: 500;
}
.route-content li:nth-child(2) {
    font-size: 14px;
    color: #666;
}
.route-content li:nth-child(3) {
    font-size: 12px;
    color: #888;
    padding-top: 5px;
}
.route.blue .route-badge {
    background-color: #485ba1;
}
.route.yellow .route-badge {
    background-color: #f3b352;
}
.route.green .route-badge {
    background-color: #52a952;
}
.route .route-content:before {
    content: "";
    width: 2px;
    height: 100%;
    position: absolute;
    left: -32px;
    top: 60px;
    background-color: #485ba1;
}
.route.blue .route-content:before {
    background-color: #485ba1;
}
.route.yellow .route-content:before {
    background-color: #f3b352;
}
.route.green .route-content:before {
    background-color: #52a952;
}
.route:last-child .route-content:before {
    display: none;
}
.cost-area .route {
    display: flex;
    align-items: center;
}
.cost-area .route-badge {
    width: 30px;
    height: 30px;
    font-size: 11px;
    margin-top: 0;
}
.cost-area .route-content li:nth-child(1) {
    font-size: 14px;
    font-weight: normal;
}
.cost-area .route-content {
    width: calc(100% - 42px);
    padding: 10px 0;
    border-bottom: 0;
}
.cost-area .route .route-content:before {
    width: 1px;
    left: -26px;
    top: 30px;
}
/*input-file*/
.file-input-box {
    position: relative;
    width: 100%;
}
.file-input-box .btn-reset {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.file-input-box input {
    padding-right: 30px;
}
/*amount-box*/
.amount-box {
    background-color: #f9f9f9;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.amount-box li:nth-child(1) {
    font-size: 14px;
    color: #666;
}
.amount-box li:nth-child(2) {
    font-size: 20px;
    font-weight: 700;
}
/*tabs-w-100*/
.tabs-w-100 .tabs-content {
    padding-top: 0;
}
.tabs-w-100 .tabs-nav ul {
    width: 100%;
}
.style-line.tabs-w-100 .tabs-nav ul li {
    width: 100%;
}
/*checkbox-only*/
.checkbox-only .checkbox {
    margin-left: 0;
    width: 18px;
}
.checkbox-only .checkbox input[type="checkbox"] + .checkbox-label:after {
    margin-left: 0;
}
.checkbox-only .checkbox input[type="checkbox"] + .checkbox-label:before {
    left: 4px;
}
.send-user-list.checkbox-only .user-text {
    width: calc(100% - 18px);
    padding-left: 12px;
}
.send-user-list.gfit-sent-list .user-text {
    width: calc(100% - 24px);
    padding-left: 8px;
}
.send-user-list.checkbox-only .user-content,
.gfit-sent-list .user-content {
    width: 70%;
}
.send-user-list .price {
    font-size: 16px;
}
.text-hidden {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.text-hidden2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 2.8em;
}
/*gift-product*/
.product-item.product-width {
    display: flex;
}
.product-item.product-width .img {
    width: 80px;
    height: 80px;
    border: 1px solid #eee;
}
.product-item.product-width .product-content-wrap {
    width: calc(100% - 80px);
    padding-left: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.product-category {
    font-size: 12px;
    color: #888;
}
.product-title {
    font-size: 14px;
    color: #333;
}
.product-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
}
/*gfit-sent-info*/
.gfit-sent-info {
    display: flex;
    align-items: center;
}
.gfit-sent-info > ul {
    display: flex;
    align-items: center;
}
.gfit-sent-info > ul > li {
    font-size: 12px;
    color: #666;
    font-weight: normal;
}
.gfit-sent-info > ul:nth-child(n + 2):before {
    content: "";
    width: 1px;
    height: 10px;
    background-color: #ddd;
    display: inline-block;
    vertical-align: middle;
    margin: 0 8px;
}
/*product-list*/
.product-list {
    padding-top: 16px;
    display: flex;
    flex-wrap: wrap;
    margin: 0 -8px;
}
.product-list > div {
    padding: 0 8px;
    padding-bottom: 30px;
    width: 50%;
}
.product-item.product-length .img {
    width: 100%;
    padding-bottom: 100%;
    border: 1px solid #eee;
}
.product-item.product-length .product-content-wrap {
    width: 100%;
    padding-top: 10px;
}
.product-length .product-price {
    padding-top: 5px;
}
/*product-view*/
.product-view .product-item.product-length .img {
    border: 0;
    border-radius: 0;
}
.product-view .product-length .product-price {
    padding-top: 10px;
}
.product-view .product-title {
    font-size: 18px;
}
.product-view .product-price {
    font-size: 20px;
}
/*product-delivery*/
.product-delivery {
    display: flex;
    align-items: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}
.product-delivery li {
    font-size: 12px;
}
.product-delivery li:nth-child(n + 2):before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 1px;
    height: 10px;
    background-color: #ddd;
    margin: 0 8px;
}
.product-detail img {
    margin: 0 auto;
    max-width: 100%;
    min-width: auto;
}
/*letter*/
.letter {
    font-size: 14px;
    line-height: 1.6;
}
/*recipient-list*/
.recipient-list .acd-menu .has-child .parent {
    padding: 20px 0;
}
.recipient-list .acd-menu .has-child .child {
    border-top: 0;
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 25px;
}
.recipient-list .acd-menu > ul > li {
    border-bottom: 0;
}
.recipient-list .child .ls-inner {
    padding: 10px 16px;
}
.recipient-list .child .ls-inner > ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}
.recipient-list .child .ls-inner > ul:last-child {
    border-bottom: 0;
}
.recipient-list .child .ls-inner > ul > li:nth-child(1) {
    font-size: 14px;
    color: #191919;
}
.recipient-list .child .ls-inner > ul > li:nth-child(2) {
    font-size: 14px;
    color: #666;
}
/*position-box*/
.position-box {
    display: flex;
    align-items: center;
}
.position-box > *:nth-child(n + 2) {
    margin-left: 10px;
}
.position-box > *:nth-child(1) {
    width: calc(100% - 105px);
    font-size: 16px;
    justify-content: center;
}
.position-box > *:nth-child(2) {
    width: 95px;
}
.position-box > *:only-child {
    width: 100%;
}
.position-box > * {
    height: 45px;
    border-radius: 6px;
}
.position-box .position-text:before {
    content: "";
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
    background-image: url("../images/ic-pin-bbb.svg");
    background-size: cover;
    background-repeat: no-repeat;
    margin: -3px 3px 0 0;
}
/*tag-search*/
.tag-search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}
.tag-check {
    display: flex;
    align-items: center;
}
.tag-check .checkbox {
    margin-left: 0;
}
.tag-check .checkbox input[type="checkbox"] + .checkbox-label:after,
.tag-check .checkbox input[type="checkbox"] + .checkbox-label:before {
    display: none;
}
.tag-check > div:nth-child(n + 2) {
    margin-left: 8px;
}
.tag-check .checkbox .checkbox-label {
    font-size: 13px;
    padding: 10px 12px !important;
    border-radius: 100px;
    color: #485ba1 !important;
    background-color: rgba(72, 91, 161, 0.06);
}
.tag-check .checkbox input[type="checkbox"]:checked + .checkbox-label {
    color: #fff !important;
    background-color: #485ba1;
}
/*place-list-area*/
.place-list {
    padding: 16px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
}
.place-list .img {
    width: 90px;
    height: 90px;
}
.place-content {
    width: calc(100% - 90px);
    padding-left: 15px;
}
.place-content {
    font-size: 12px;
    color: #888;
}
.place-content .place-title {
    font-size: 16px;
    font-weight: 700;
    color: #191919;
    padding-bottom: 3px;
}
.place-content .list-badge {
    margin-top: 10px;
}
/*search-box-wrap*/
.search-box-wrap {
    display: none;
}
.search-box-wrap.active {
    display: block;
    padding-bottom: 8px;
}
.position-box-wrap {
    padding: 10px;
    border-bottom: 1px solid #eee;
}
.full-modal .modal-content.area-cotent {
    height: calc(100% - 116px);
}
/*tomb-position*/
.tomb-position {
    padding: 10px;
    height: calc(100% - 160px);
}
.tomb-position .table-scroll {
    overflow: auto;
    height: 100%;
}
.tomb-position .cemetery-table th,
.tomb-position .cemetery-table td {
    width: auto;
    height: auto;
}
.tomb-position thead th div,
.tomb-position tbpdu th div {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 35px;
}
.tomb-position thead th div {
    width: 55px;
}
.tomb-position tbody th div,
.tomb-position thead tr:first-child th:first-child div {
    width: 35px;
}
/*tomb-radio*/
.tomb-radio {
    width: 55px;
    height: 35px;
}
.tomb-radio input[type="radio"] {
    display: none;
}
.tomb-label {
    width: 100%;
    height: 100%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.tomb-radio input[type="radio"]:checked + .tomb-label {
    background-color: #c3a981;
}
.tomb-option {
    padding: 16px;
    font-size: 16px;
    display: flex;
    justify-content: center;
    text-align: center;
    background-color: #fff;
}
.tomb-option li:nth-child(n + 2) {
    padding-left: 15px;
}
/*chatting*/
.chatting > div {
    padding: 12px 16px;
    display: flex;
    align-items: center;
}
.chatting .img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #f9f9f9;
}
.chatting .content {
    width: calc(100% - 50px);
    padding-left: 15px;
}
.chatting .title-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.chatting .title {
    font-size: 16px;
    font-weight: 500;
    color: #191919;
    width: calc(100% - 70px);
}
.chatting .date {
    font-size: 12px;
    color: #bbb;
    width: 70px;
    text-align: right;
}
.chatting .text-wrap {
    position: relative;
    margin-top: 3px;
}
.chatting .text {
    font-size: 12px;
    color: #888;
    width: calc(100% - 50px);
}
.chatting .chat-badge {
    position: absolute;
    right: 0;
    top: 0;
    display: inline-block;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background-color: #ff5160;
    border-radius: 20px;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0;
    vertical-align: top;
    text-align: center;
}
/*mypage*/
.mypage {
    padding: 20px 0 30px;
}
.mypage .my-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
}
.mypage .my-info .content {
    display: flex;
    align-items: center;
    width: calc(100% - 24px);
}
.mypage .my-info .content .user-img {
    width: 50px;
    height: 50px;
}
.mypage .my-info .content .user-name {
    width: calc(100% - 50px);
    padding-left: 15px;
}
.user-name .name {
    font-size: 18px;
    font-weight: 700;
}
.user-name .tel {
    font-size: 12px;
    color: #888;
}
.mypage .my-list {
    padding-top: 10px;
}
.mypage .my-list ul {
    padding: 20px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
}
.mypage .my-list ul li:nth-child(1) {
    font-size: 15px;
    color: #333;
}
.mypage .my-list ul li:nth-child(2) {
    color: #485ba1;
}
/*my-tomb-list*/
.mypage .label {
    font-size: 13px;
    color: #888;
}
.my-tomb-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f9f9f9;
    padding: 20px 16px;
}
.my-tomb-list .content {
    width: calc(100% - 80px);
}
.my-tomb-list .title li:nth-child(1) {
    font-size: 18px;
}
.my-tomb-list .title li:nth-child(2) {
    font-size: 13px;
    padding-top: 2px;
}
.my-tomb-list .info {
    font-size: 12px;
    color: #888;
    padding-top: 10px;
}
.my-tomb-list .info li:nth-child(n + 2) {
    padding-top: 2px;
}
.my-tomb-list .tomb-img .img {
    width: 80px;
    height: 80px;
}
/*my-btn*/
.my-btn {
    display: flex;
}
.my-btn ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.my-btn ul li {
    font-size: 13px;
    color: #888;
}
.my-btn ul li:nth-child(n + 2) {
    padding-top: 8px;
}
/*input-mypage*/
.input-mypage {
    position: relative;
}
.my-input-btn {
    position: absolute;
    z-index: 1;
    right: 0;
    top: 0;
}
.my-sns {
    width: 30px;
    height: 30px;
}
.my-sns img {
    width: 100%;
}
.input-mypage input {
    padding-right: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/*my-bottom*/
.my-bottom {
    position: absolute;
    bottom: 30px;
    display: flex;
    justify-content: center;
    width: calc(100% - 32px);
}
.my-bottom a {
    font-size: 14px;
    color: #888;
}
.my-bottom a:nth-child(n + 2):before {
    content: "";
    width: 1px;
    height: 10px;
    display: inline-block;
    vertical-align: middle;
    background-color: #ddd;
    margin: -2px 15px 0;
}
/*mypage-cemetery product*/
.my-cp-box {
    margin: 12px 0;
}
.my-cp-box:first-child {
    margin-top: 0;
}

.my-cp-card {
    padding: 10px;
    border: 1px solid #EEEEEE;
    box-shadow: 1px 4px 8px 4px rgba(0, 0, 0, 0.08);
    border-radius: 5px;
}

.my-cp-card .card-title {
    border-left: 4px solid #C3A981;
    padding: 2px 0px 2px 12px;
    font-weight: 700;
    font-size: 16px;
}

.my-cp-info-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}

.my-cp-info-box div.info-title {
    font-weight: 500;
    font-size: 10px;
    color: #888888;
}

.my-cp-info-box div.info-content {
    text-align: right;
    font-weight: 400;
    font-size: 12px;
    color: #666666;
}
.my-cp-info-box div.info-content .admin-name {
    font-weight: 700;
    font-size: 14px;
    color: #333333;
}
.my-cp-info-box div.info-content .admin-tel {
    font-weight: 400;
    font-size: 12px;
    color: #333333;
}

.my-cp-info-box div.info-content .price {
    font-weight: 700;
    font-size: 16px;
    line-height: 16px;
    color: #191919;
}

.my-cp-btn-box {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.my-cp-btn-box button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 45px;
    width: 49%;
    border-radius: 5px;
    font-weight: 500;
    font-size: 14px;
}

.my-cp-btn-box button.view-contract {
    background: #FFFFFF;
    border: 1px solid #52A952;
    color: #52A952;
}
.my-cp-btn-box button.write-contract {
    background: #C3A981;
    border: 1px solid #C3A981;
    color: white;
}
.my-cp-btn-box button.pay-admin-fee {
    background: #303742;
    color: white;
}

.my-cp-btn-box div.admin-fee-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #F9F9F9;
    border: 1px solid #DDDDDD;
    border-radius: 5px;
    width: 49%;
    font-weight: 500;
    font-size: 12px;
    color: #888888;
    height: 45px;
    text-decoration: underline;
}

/*mypage-tomb*/
.mypage-tomb .top {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 20px 16px 30px;
}
.mypage-tomb .top li:nth-child(1) {
    font-size: 18px;
}
.mypage-tomb .top li:nth-child(2) {
    font-size: 13px;
    color: #666;
    padding-top: 5px;
}
.btn-edit {
    font-size: 14px;
    color: #191919;
    display: flex;
    align-items: center;
}
.btn-edit:before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url("../images/ic-edit.svg");
    background-repeat: no-repeat;
    background-size: cover;
    margin: -2px 5px 0 0;
}
/*tomb-history*/
.tomb-history > div {
    background-color: #fff;
    border-radius: 12px;
    -webkit-box-shadow: 1px 4px 14px 4px rgba(0, 0, 0, 0.15);
    box-shadow: 1px 4px 14px 4px rgba(0, 0, 0, 0.15);
    overflow: hidden !important;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    position: relative;
    padding: 25px 16px;
    margin-top: 16px;
}
.tomb-history > div.img-set {
    padding: 0;
}
.tomb-history .img-set .img {
    width: 100%;
    padding-bottom: 50%;
    border-radius: 0;
}
.tomb-history .img-set .img img {
    height: auto;
    width: 100%;
    top: 50%;
    left: auto;
    transform: translateY(-50%);
}
.tomb-history .img-set .content {
    padding: 16px 16px 25px;
}
.tomb-history .img-set.img-slide .content {
    padding: 0 16px 25px;
}
.tomb-history .content .date {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #888;
}
.tomb-history .content .text {
    padding-top: 8px;
    font-size: 14px;
    line-height: 1.6;
}
.tomb-history .swiper {
    padding-bottom: 25px;
}
.tomb-history .swiper-pagination {
    bottom: 0 !important;
    left: auto !important;
    right: auto !important;
    text-align: center !important;
    padding-right: 0 !important;
}
.tomb-history .swiper-pagination-bullet {
    width: 5px;
    height: 5px;
}
.tomb-history .swiper-pagination-bullet-active {
    background-color: #191919 !important;
}
/*tomb-admin-option*/
.full-modal .modal-content.tomb-admin-option {
    padding: 16px;
}
.tomb-admin-option > div:nth-child(n + 2) {
    margin-top: 8px;
}
.admin-option-item {
    padding: 15px;
    border: 1px solid #eee;
    display: flex;
    align-items: center;
}
.admin-option-item .img {
    width: 80px;
    height: 80px;
    border: 0;
}
.admin-option-item .content {
    width: calc(1005 - 80px);
    padding-left: 15px;
}
.admin-option-item .content .option-price {
    padding-top: 5px;
}
/*history-message*/
.history-message textarea {
    height: 300px;
}
/*history-file-upload*/
.thumb {
    width: 100px;
    height: 100px;
    margin: 0.2em -0.7em 0 0;
}
.remove_img_preview {
    position: relative;
    top: -25px;
    right: 5px;
    background: black;
    color: white;
    border-radius: 50px;
    font-size: 0.9em;
    padding: 0 0.3em 0;
    text-align: center;
    cursor: pointer;
}
/*fileupload*/
.fileupload {
    display: block;
    width: 100%;
    background: #f5f5f5;
    padding-bottom: 100%;
}
.img-upload-btn {
    position: relative;
    overflow: hidden;
    /* padding-top: 95%;*/
    background-size: cover;
    background-repeat: no-repeat;
}
.img-upload-btn input[type="file"] {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    filter: alpha(opacity=0);
    opacity: 0;
}
.img-upload-btn {
    background-image: url("../images/ic-file-add.svg");
    background-size: 24px;
    background-position: center;
    background-repeat: no-repeat;
}
.preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
}
.deletor {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.8);
    width: 25px;
    height: 25px;
    background-image: url("../images/ic-close-wh.svg");
    background-size: 18px;
    background-position: center;
    background-repeat: no-repeat;
}
.deletor img {
    width: 10px;
    margin-top: -4px;
}
.file-set {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -5px;
}
.file-set .file-item {
    width: 25%;
    position: relative;
    padding: 5px;
}
.file-set .file-item.active:before {
    content: "";
    background: url(../images/ic_smile.png);
    width: 16px;
    height: 16px;
    background-size: cover;
    background-position: center center;
    position: absolute;
    margin-top: -25px;
    margin-left: -7px;
    left: 50% !important;
}
/*cash-paymentt*/
.cash-payment .top {
    border-radius: 12px;
    padding: 20px;
    background-color: #485ba1;
}
.cash-payment .top ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cash-payment .top li {
    color: #fff;
}
.cash-payment .top ul:nth-child(1) li {
    font-size: 14px;
}
.cash-payment .top ul:nth-child(2) li {
    font-size: 20px;
}
.cash-payment-list .date-wrap {
    padding-top: 30px;
}
.cash-payment-list .date-wrap .date {
    font-size: 13px;
    color: #888;
}
.cash-payment-list .list-wrap .list-item {
    padding: 20px 0;
    border-bottom: 1px solid #eee;
}
.cash-payment-list .list-wrap .list-item > ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cash-payment-list .list-wrap .list-item > ul.flex-end {
    justify-content: flex-end;
}
.cash-payment-list .list-wrap .list-item > ul:nth-child(1) {
    font-size: 15px;
}
.cash-payment-list .list-wrap .list-item > ul:nth-child(n + 2) {
    font-size: 12px;
    color: #666;
    padding-top: 3px;
}
.cash-payment-list .list-wrap .list-item > ul > li:nth-child(1) {
    width: 65%;
}
.cash-payment-list .list-wrap .list-item > ul > li:nth-child(2) {
    width: 35%;
    text-align: right;
}
/*terms*/
.terms-select select {
    padding: 0 16px;
    height: 52px;
}
.terms-select .select-wrap {
    background-position: center right 16px;
}

/*notification*/
.noti-list {
    padding: 20px 16px;
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #eee;
}
.noti-list.dont {
    background-color: rgba(72, 91, 161, 0.04);
}
.noti-ic {
    width: 40px;
    height: 40px;
    border: 1px solid #ddd;
    position: relative;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
}
.noti-list .content {
    width: calc(100% - 40px);
    padding-left: 15px;
}
.noti-badge {
    position: absolute;
    right: -3px;
    bottom: -2px;
}
.noti-list .content > div:nth-child(n + 2) {
    padding-top: 5px;
}
.noti-list .date {
    font-size: 13px;
    color: #888;
}
.noti-list .title {
    font-size: 15px;
    color: #191919;
}
.noti-list .text {
    font-size: 13px;
    color: #666;
}

/*notification-wrap*/
.notification {
    position: fixed;
    top: -20em;
    width: 100%;
    overflow: hidden;
    max-width: 750px;
}
.notification.anim {
    -webkit-transition: top 0.6s ease-out;
    -moz-transition: top 0.6s ease-out;
    -ms-transition: top 0.6s ease-out;
    -o-transition: top 0.6s ease-out;
    transition: top 0.6s ease-out;
}
.btn-dismiss-wrap {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding-top: 0 !important;
}
.btn-dismiss {
    font-size: 13px;
    padding: 5px 12px;
    color: #fff;
}
.notification .noti-list .title {
    font-weight: 500;
}
/*noti-type*/
.noti-list.green {
    background-color: #f6fbf6;
    border-color: rgba(82, 169, 82, 0.5);
}
.noti-list.green .btn-dismiss {
    background-color: #52a952;
}
.noti-list.red {
    background-color: #ffedef;
    border-color: rgba(255, 81, 96, 0.5);
}
.noti-list.red .btn-dismiss {
    background-color: #ff5160;
}
.noti-list.blue {
    background-color: #f6f7fa;
    border-color: rgba(72, 91, 161, 0.5);
}
.noti-list.blue .btn-dismiss {
    background-color: #485ba1;
}
.noti-list.yellow {
    background-color: #fefbf6;
    border-color: rgba(243, 179, 82, 0.5);
}
.noti-list.yellow .btn-dismiss {
    background-color: #f3b352;
}