@charset "UTF-8";
/** Font **/
@font-face {
    font-family: 'NotoSansCJKkr';
    font-style: normal;
    font-weight: 300;
    src: url(../../font/NotoSansKR-Light.otf);
}
@font-face {
    font-family: 'NotoSansCJKkr';
    font-style: normal;
    font-weight: normal;
    src: url(../../font/NotoSansKR-Regular.otf);
}
@font-face {
    font-family: 'NotoSansCJKkr';
    font-style: normal;
    font-weight: 500;
    src: url(../../font/NotoSansKR-Medium.otf);
}
@font-face {
    font-family: 'NotoSansCJKkr';
    font-style: normal;
    font-weight: 700;
    src: url(../../font/NotoSansKR-Bold.otf);
}
html, body {
    height: 100%
}
body {
    position: relative;
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: none;
    -moz-osx-font-smoothing: grayscale;
    color: #333
}
body:before {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 0;
    content: ''
}
/* fix webkit bug(scroll event delay) */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, p, button, iframe, th, td, a, select, input, textarea {
    margin: 0;
    padding: 0;
    font-family: 'NotoSansCJKkr', Helvetica, sans-serif;
    font-weight: normal;
    line-height: 1.4;
    font-size: 14px;
    letter-spacing: -0.42px
}
*, *::before, *::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}
article, aside, details, figcaption, figure, footer, header, nav, section, summary, main {
    display: block;
    margin: 0;
    padding: 0
}
img, fieldset, iframe, button {
    border: 0
}
section {
    box-sizing: border-box
}
li {
    list-style: none
}
button {
    font-family: 'NotoSansCJKkr';
    color: #1c1c1c;
    background: #fff;
    outline: none;
    cursor: pointer
}
table {
    border-collapse: collapse;
    border-spacing: 0
}
legend, caption, hr {
    display: none
}
select, input, textarea {
    font-family: 'NotoSansCJKkr';
    color: #1c1c1c;
    border-radius: 0;
    border: 0;
    -webkit-appearance: none;
    outline: none
}
i, em, u, cite {
    font-style: normal
}
s {
    text-decoration-line: none
}
strong, b {
    font-weight: 700
}
img {
    border: 0;
    vertical-align: middle
}
a {
    color: #1c1c1c;
    text-decoration: none;
    outline-offset: -1px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}
address {
    font-style: normal
}
.color-point-red {
    color: #e53e30 !important
}
/** Checkbox, Radio **/
.inp-check,
.inp-radio {
    position: relative;
    display: inline-block;
    vertical-align: top;
}
.inp-check.none > .label,
.inp-radio.none > .label {
    min-width: 22px;
    min-height: 22px;
    padding: 0
}
.inp-check.none > .label:before,
.inp-radio.none > .label:before {
    margin-right: 0 !important
}
.inp-check:last-child,
.inp-radio:last-child {
    margin-right: 0
}
.inp-check > input,
.inp-radio > input {
    position: absolute;
    left: -999999px;
    width: 0;
    height: 0;
    opacity: 0.0001%
}
.inp-check > .label,
.inp-radio > .label {
    position: relative;
    font-weight: normal;
    letter-spacing: -0.45px;
    display: flex;
    line-height: 19px
}
.inp-check > .label:before,
.inp-radio > .label:before {
    content: '';
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box
}
.inp-check > input:disabled + .label,
.inp-radio > input:disabled + .label {
    pointer-events: none
}
/** Checkbox **/
.inp-check > .label:before {
    border: 1px solid #ccc;
    border-radius: 2px;
    background: #fff url('../../images/icon_check_01_off.svg') 55% 50%/14px 14px no-repeat
}
.inp-check > .label:hover:before {
    border-color: #1c1c1c;
    background-image: url('../../images/icon_check_01_hover.svg')
}
.inp-check > input:checked + .label:before {
    background-color: #1c1c1c;
    background-image: url('../../images/icon_check_01_select.svg');
    border-color: #1c1c1c;
    transition: background-color .25s cubic-bezier(0.0, 0.0, 0.2, 1)
}
.inp-check > input:disabled + .label:before {
    background-color: #f7f7f7;
    background-image: url('../../images/icon_check_01_disable.svg');
    border-color: #e5e5e5
}
.inp-check > input.checked + .label:before {
    background-color: #1c1c1c;
    background-image: url('../../images/icon_check_01_select.svg');
    border-color: #1c1c1c;
    transition: background-color .25s cubic-bezier(0.0, 0.0, 0.2, 1)
}
.inp-check.error .label:before {
    background-color: #fff !important;
    background-image: url('../../images/icon_check_01_incorrect.svg') !important;
    border-color: #e53e30 !important
}
/* inp-check - type2 */
.inp-check.type2 > .label {
    font-size: 16px;
    letter-spacing: -0.64px;
    line-height: 20px
}
.inp-check.type2.none > .label {
    min-width: 16px;
    min-height: 16px
}
.inp-check.type2 > .label:before {
    width: 16px;
    height: 20px;
    border: 0;
    margin-right: 12px;
    background: transparent url('../../images/icon_check_01_off.svg') 50% 50% no-repeat
}
.inp-check.type2 > .label:hover:before {
    background-image: url('../../images/icon_check_01_hover.svg');
    opacity: .5
}
.inp-check.type2 > input:checked + .label:before {
    background-color: transparent;
    background-image: url('../../images/icon_check_01_incorrect.svg');
    opacity: 1
}
/** Radio **/
.inp-radio > .label {
    color: #999
}
.inp-radio > .label:hover {
    color: #000
}
.inp-radio > .label:before {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border: 1px solid #ccc;
    border-radius: 50%;
    margin-top: 1px
}
.inp-radio > .label:after {
    content: '';
    width: 6px;
    height: 6px;
    background: #ccc;
    position: absolute;
    left: 6px;
    top: 7px;
    border-radius: 50%
}
.inp-radio > .label:hover:after {
    background-color: #1c1c1c
}
.inp-radio > input:checked + .label,
.inp-radio.checked > input + .label {
    color: #000
}
.inp-radio > input:checked + .label:before,
.inp-radio.checked > input + .label:before {
    border-color: #1c1c1c;
    background-color: #1c1c1c
}
.inp-radio > input:checked + .label:after,
.inp-radio.checked > input + .label:after {
    background-color: #fff
}
.inp-radio > input:disabled + .label {
    color: #ccc
}
.inp-radio > input:disabled + .label:before {
    border-color: #e5e5e5;
    background-color: #f7f7f7
}
.inp-radio > input:disabled + .label:after {
    background-color: #e5e5e5
}
.inp-radio > input.checked + .label:before {
    border-color: #1c1c1c;
    background-color: #1c1c1c
}
.inp-radio > input.checked + .label:after {
    background-color: #fff
}
/** Select **/
.select-type {
    position: relative;
    border: 1px solid #e5e5e5
}
.select-type:after {
    content: '';
    width: 20px;
    height: 20px;
    background: url('../../images/icon_arrow_down.svg') 50% 50%/20px no-repeat;
    position: absolute;
    right: 14px;
    top: calc(50% - 10px);
    -webkit-transition: transform 0.15s ease-in-out;
    transition: transform 0.15s ease-in-out
}
.select-type select {
    width: 100%;
    height: 50px;
    font-size: 15px;
    padding-left: 20px;
    -wekit-appearance: none;
    appearance: none;
}
.select-type select::-ms-expand {
    display: none
}
/** Input **/
.inp-base {
    min-height: 50px;
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    outline: none;
    border: 1px solid #e5e5e5;
    border-radius: 2px;
    padding: 9px 20px;
    vertical-align: middle
}
.inp-base:hover,
.inp-base:focus,
.inp-base.selected {
    padding: 8px 19px;
    border: 2px solid #1c1c1c
}
.inp-base[readonly],
.inp-base[disabled] {
    padding: 9px 20px;
    background: #f7f7f7;
    border: 1px solid #e5e5e5
}
.inp-base[disabled] {
    color: #ccc /*opacity:.5*/
}
.inp-base.success,
.inp-base.error {
    background-position: calc(100% - 15px) 50%;
    background-repeat: no-repeat;
    background-size: 20px auto
}
.inp-base.success:hover,
.inp-base.success:focus,
.inp-base.success.selected {
    background-position: calc(100% - 14px) 50%
}
.inp-base.success {
    background-image: url('../../images/icon_success.svg')
}
.inp-base.error {
    padding: 8px 19px;
    border: 2px solid #e53e30
}
.inp-base[type=text].error,
.inp-base[type=password].error {
    padding-right: 35px;
    background-image: url('../../images/icon_error.svg')
}
.inp-box.email .inp-email {
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.inp-box.email .inp-email p {
    width: 100%;
}
.inp-box.email .inp-email > span {
    flex: 1
}
.error-txt {
    color: #e53e30;
    line-height: 1.25;
    padding-top: 8px
}
/** Button **/
[class*="btn-type-"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    text-align: center;
    padding: 10px 30px;
    font-weight: 500;
    line-height: 1.2;
    border-radius: 2px;
    text-decoration: none;
    box-sizing: border-box;
    letter-spacing: -0.6px;
    background: #fff;
    white-space: nowrap
}
[class*="btn-type-"]:hover,
[class*="btn-type-"]:focus {
    border-color: #666
}
[class*="btn-type-"].color-black {
    background: #1c1c1c !important;
    border: 0 !important;
    color: #fff !important
}
[class*="btn-type-"].color-black:hover {
    background-color: #2c2c2c !important
}
[class*="btn-type-"]:disabled,
[class*="btn-type-"].disabled {
    opacity: .4;
    pointer-events: none
}
.btn-type-1 {
    font-size: 14px;
    border: solid 1px #ccc;
}
.btn-type-2 {
    font-size: 20px;
    border: solid 1px #ccc;
    min-height: 54px;
    min-width: 20%
}
.btns-wrap-page {
    width: 550px;
    margin: 0 auto;
    padding-top: 40px;
    text-align: center;
}
.btns-wrap-page button {
    font-size: 16px;
}
/* table-type */
.table-type {
    border-top: solid 1px #000
}
.table-type .item-cell {
    display: flex;
    border-bottom: 1px solid #e5e5e5
}
.table-type .item-cell > * {
    flex: 1;
    padding: 18px 20px;
    font-size: 15px;
    font-weight: 500;
    line-height: 20px
}
.table-type .item-cell > * + * {
    border-left: 1px solid #e5e5e5
}
.table-type .item-cell > .label {
    flex: 0 0 165px;
    background-color: #f7f7f7;
}
.table-type .item-cell > .form-con {
    display: flex;
    align-items: center;
    padding: 10px 20px;
}
.table-type .item-cell > .address {
    flex-direction: column
}
.table-type .item-cell > .address .zipcode-box {
    display: flex;
    width: 100%;
}
.table-type .address > div + div {
    display: flex;
    width: 100%;
    padding-top: 10px;
}
.table-type .address > div + div > input {
    flex: 1
}
.table-type .address > div + div > input:first-child {
    margin-right: 10px
}
.table-type.id-list .item-cell > .id {
    font-size: 16px
}
.table-type.id-list .item-cell > .label {
    flex: 0 0 100px;
    text-align: center
}
.table-type.id-list .item-cell > .date {
    flex: 0 0 130px
}
.table-type .item-cell .email {
    display: flex;
    align-items: center
}
.table-type .item-cell .email input[type=text] {
    width: 46%
}
.table-type .item-cell .email .between {
    flex: 0 0 8%;
    text-align: center
}
.table-type .txt-imp {
    padding-bottom: 0
}
.table-type .desc {
    font-size: 13px;
    padding-top: 5px
}
.list-dotted {
    padding-left: 12px
}
.list-dotted li {
    line-height: 1.6;
    word-break: break-word;
    padding-bottom: 6px
}
.list-dotted li:before {
    content: '';
    display: block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #333;
    float: left;
    margin-top: 10px;
    margin-right: 9px;
    margin-left: -12px
}
.list-dotted li.dot-pointed:before {
    background-color: #e53e30
}
.txt-imp {
    padding-left: 27px;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.43;
    letter-spacing: -0.42px;
    min-height: 22px;
    background: url(../../images/icon_error.svg) 0 1px/20px no-repeat;
    word-break: keep-all;
    padding-bottom: 0.5em
}
.tooltip-type {
    position: relative;
    display: inline-block;
    width: 21px;
    height: 21px;
    vertical-align: middle
}
.tooltip-type:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../../images/icon_question.svg) left top no-repeat;
    background-size: 100%
}
.tooltip-type .layer {
    display: none;
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    max-width: 90vw;
    border: 1px solid #006f80;
    border-radius: 2px;
    background: #fff;
    font-size: 13px;
    color: #666;
    padding: 10px
}
.tooltip-type:hover .layer {
    display: block
}
.tooltip-type .layer:after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-top: 6px solid #006f80;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent
}
.tooltip-type .tooltip-tit {
    color: #006f80;
    padding-bottom: 5px
}
/* 본문 */
.tourlife-header {
    max-width: 1220px;
    height: 70px;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    margin: auto
}
.tourlife-header h1 {
    display: flex;
    padding-top: 13px
}
.tourlife-header h1 .logo {
    width: 125px;
    height: 40px;
    background: url(../../images/logo_bk_01.png) no-repeat;
    background-size: 113px 33px;
    text-indent: -999em
}
.tourlife-header h1 .partner-name {
    font-size: 19px;
    *font-weight: 500;
    letter-spacing: -0.06em;
}
.cont-inner {
    max-width: 1220px;
    *max-width: 640px;
    margin: 0 auto;
    padding: 0 20px 50px
}
.cont-title {
    position: relative;
    font-size: 30px;
    text-align: center;
    margin-bottom: 2.5em
}
.cont-title .step {
    position: absolute;
    top: 9px;
    right: 0
}
.cont-title .step p {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e5e5e5;
    margin-left: 4px
}
.cont-title .step p.on {
    background: #e53e30;
    color: #fff
}
.tourlife-join {
    font-size: 14px
}
.stit {
    font-size: 20px;
    line-height: 1.39;
    font-weight: 700;
    letter-spacing: -1.15px;
    margin-bottom: 10px
}
.table-type + .stit {
    margin-top: 30px
}
.terms-box {
    border-bottom: 1px solid #ccc;
    margin: 30px 0 40px
}
.terms-box .check-all > .label {
    margin-right: 25px;
    font-size: 17px;
    letter-spacing: -0.84px
}
.terms-list {
    margin-top: 17px;
    margin-bottom: -6px
}
.terms-list {
    padding-top: 11px;
    border-top: 1px solid #333
}
.terms-list .list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0
}
.terms-list .label-box .label {
    display: inline-block;
    word-break: keep-all
}
.terms-list .label-box.no-check .label:before {
    display: none
}
.terms-list .label-box.no-check .inp-check {
    margin-left: 29px
}
.terms-list .more {
    flex: none;
    margin-left: 20px
}
.terms-list .more button {
    font-size: 13px;
    font-weight: 500;
    color: #666;
    border-bottom: 1px solid #666;
    line-height: 1.3
}
.terms-list .more:hover button {
    font-weight: 700
}
.item-cell .terms-list {
    padding-bottom: 0
}
.terms-toggle {
    position: relative;
    padding-bottom: 17px
}
.terms-toggle .btn-toggle.up + .terms-list {
    display: none
}
.terms-toggle .terms-list {
    display: block;
    height: 100%
}
.terms-toggle .btn-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 22px;
    height: 22px;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
    background: url('../../images/icon_arrow_down.svg') 50% 50%/18px auto no-repeat;
    transform: rotate(-180deg);
    transition: all 0.2s ease-in-out
}
.terms-toggle .btn-toggle.up {
    transform: rotate(0deg);
    transition: all 0.2s ease-in-out
}
.cell.terms-toggle .btn-toggle {
    top: 22px;
    right: 20px
}
.tourlife-join .safekey {
    flex-direction: column;
    align-items: flex-start !important;
}
.tourlife-join .safekey .btn-type-1 {
    width: 30%;
    max-width: 130px
}
.tourlife-join .safekey .inp-base {
    width: 50%;
    max-width: 260px;
    text-align: center;
    margin-left: 10px
}
.tourlife-join .safekey .txt-imp {
    margin-top: 8px
}
.tourlife-join .safekey .txt-imp span {
    display: inline-block
}
.tourlife-join .zipcode {
    width: 100px;
    margin-right: 10px;
    text-align: center;
}
.tourlife-join .card-auth {
    display: flex;
    width: 100%;
}
.tourlife-join .card-auth > button {
    flex: 0 0 100px;
    min-height: 50px;
    margin-left: 10px;
}
.tourlife-join-ok {
    text-align: center
}
.tourlife-join-ok .stit {
    margin: 30px auto
}
.tourlife-join-ok .join-info + .stit {
    font-weight: normal
}
.tourlife-join-ok .join-info {
    background: #f7f7f7;
    padding: 7px 0
}
.tourlife-join-ok .join-info table {
    width: auto;
    margin: 20px auto
}
.tourlife-join-ok .join-info table th, .tourlife-join-ok .join-info table td {
    text-align: left;
    padding: 8px 25px
}
.tourlife-join-ok .join-info table td {
    font-weight: 500
}
/* 여행이지 회원가입 모달 */
.modal-body .stit {
    font-size: 16px;
    margin-bottom: 6px
}
.modal-body .terms-toggle {
    margin: 20px 0
}
.modal-body .terms-list {
    margin-top: 10px
}
.modal-body .terms-list {
    padding: 7px 0;
    border-top: 1px solid #333
}
.modal-body .terms-list .list-item {
    padding: 5px 0
}
.modal-body .table-type .label {
    flex: 0 0 140px;
    padding-left: 10px;
    padding-right: 10px
}
.modal-body .inp-radio > .label {
    padding-left: 0
}
.modal-body .table-type .form-con {
    padding: 10px
}
.modal-body .easy-join-form .inp-base {
    width: 100%;
    max-width: 224px
}
.modal-body .easy-join-form .inp-base + button {
    margin-left: 8px
}
/* 약관내용보기 모달 */
.term-modal-titles {
    font-size: inherit
}
.term-modal-titles p {
    display: none;
    font-size: inherit;
    font-weight: 500
}
.term-modal-titles p.on {
    display: block
}
.term-modal-titles .color-point-red {
    display: inline-block;
    font-size: 0.8em;
    font-weight: normal;
    vertical-align: top;
    padding-top: 0.175em
}
.terms-name-list {
    counter-reset: counter;
    margin-bottom: 20px;
    margin-right: 50px
}
.terms-name-list li {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 26px;
    height: 26px;
    border-radius: 13px;
    background: #e5e5e5;
    margin-right: 4px;
    transition: all 0.2s ease-in-out
}
.terms-name-list li:before {
    counter-increment: counter;
    content: counter(counter)
}
.terms-name-list li span {
    display: none;
    font-size: 13px
}
.terms-name-list li.on {
    width: auto;
    background: #e53e30;
    color: #fff;
    padding: 0 14px
}
.terms-name-list li.on span {
    display: block;
    padding-left: 10px
}
.slide-terms-con {
    border-top: 1px solid #333
}
.terms-con-wrap {
    height: 300px;
    padding: 10px 0;
    overflow: auto
}
.slick-arrow {
    position: absolute;
    top: -45px;
    width: 20px;
    height: 30px;
    text-indent: 100px;
    padding: 0;
    margin: 0;
    opacity: 0.8;
    overflow: hidden
}
.slick-arrow.slick-disabled {
    opacity: 0.2
}
.slick-prev.slick-arrow {
    right: 25px;
    background: url('../../images/icon_arrow_right_06.svg') 50% 50%/20px auto no-repeat;
    transform: rotate(180deg)
}
.slick-next.slick-arrow {
    right: 0px;
    background: url('../../images/icon_arrow_right_06.svg') 50% 50%/20px auto no-repeat
}
/** Modal Popup **/
.modal-open {
    overflow: hidden !important
}
.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0
}
.modal.fade .modal-dialog {
    -webkit-transition: -webkit-transform .2s ease-out;
    -o-transition: -o-transform .2s ease-out;
    transition: transform .2s ease-out;
    -webkit-transform: translate(0, -1%);
    -ms-transform: translate(0, -1%);
    -o-transform: translate(0, -1%);
    transform: translate(0, -1%)
}
.modal.in .modal-dialog {
    -webkit-transform: translate(0, 0) !important;
    -ms-transform: translate(0, 0) !important;
    -o-transform: translate(0, 0) !important;
    transform: translate(0, 0) !important
}
.modal-open .modal {
    overflow: hidden
}
.modal-dialog {
    position: relative;
    width: auto;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%
}
.modal-content {
    width: 100%;
    max-width: 540px;
    position: relative;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .2);
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
    display: flex;
    flex-direction: column;
    max-height: calc(100% - 20px);
    overflow: hidden
}
.modal-content .btn-md-close {
    flex: none;
    width: 50px;
    height: 50px;
    margin-top: 15px;
    margin-left: auto;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
    overflow: hidden;
    background: url('../../images/icon_close_popup.svg') 50% 50%/22px 22px no-repeat;
    cursor: pointer
}
.modal-backdrop {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    background-color: #000
}
.modal-backdrop.fade {
    filter: alpha(opacity=0);
    opacity: 0
}
.modal-backdrop.in {
    filter: alpha(opacity=50);
    opacity: .5
}
.modal-header {
    padding: 0 15px 0 50px;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    position: relative;
    min-height: 90px
}
.modal-header:before {
    content: '';
    width: calc(100% - 100px);
    position: absolute;
    bottom: 0;
    left: 50px;
    height: 1px;
    background: #ccc
}
.modal-title {
    font-size: 22px;
    flex: 1;
    align-self: center;
    font-weight: 500;
    padding: 10px 20px 0 0;
    line-height: 1.2;
    letter-spacing: -0.66px
}
.modal-title > img {
    max-height: 33px;
    vertical-align: text-bottom
}
.modal-body {
    position: relative;
    flex: 1 1 auto;
    width: calc(100% - 50px);
    min-height: calc(100% - 80px);
    margin: 30px 0 40px;
    padding: 0 0 0 50px;
    color: #1c1c1c;
    overflow-y: auto;
    word-break: keep-all
}
.modal-footer {
    flex-shrink: 0;
    display: flex
}
.modal-footer [class*="btn-type"] {
    border-radius: 0;
    flex: 1;
    font-size: 16px;
    min-height: 50px
}
.modal-content.type-b {
    max-width: 640px
}
.modal-content.type-s {
    max-width: 400px
}
.modal-content.cont .modal-body {
    position: relative;
    padding: 40px 20px 30px;
    width: 100%;
    text-align: center;
    margin: 0
}
.modal-content.cont .btn-md-close {
    margin: 0;
    width: 35px;
    height: 35px;
    position: absolute;
    top: 15px;
    right: 10px;
    background-size: 15px
}
.modal-content.cont .modal-footer [class*="btn-type"] {
    font-size: 14px;
    min-height: 42px
}
/* Slider */
.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent
}
.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0
}
.slick-list:focus {
    outline: none
}
.slick-list.dragging {
    cursor: pointer;
    cursor: hand
}
.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}
.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin-left: auto;
    margin-right: auto
}
.slick-track:before,
.slick-track:after {
    display: table;
    content: ''
}
.slick-track:after {
    clear: both
}
.slick-loading .slick-track {
    visibility: hidden
}
.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px
}
[dir='rtl'] .slick-slide {
    float: right
}
.slick-slide img {
    display: block
}
.slick-slide.slick-loading img {
    display: none
}
.slick-slide.dragging img {
    pointer-events: none
}
.slick-initialized .slick-slide {
    display: block
}
.slick-loading .slick-slide {
    visibility: hidden
}
.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent
}
.slick-arrow.slick-hidden {
    display: none
}
/** Input Msg **/
.msg-error {
    font-size: 14px;
    margin-top: 8px;
    color: #e43d30;
}
.msg-success {
    font-size: 14px;
    margin-top: 8px;
    color: #006f80;
}
.msg-txt {
    font-size: 14px;
    margin-top: 8px;
    color: #999;
}
[class*='msg-'] + [class*='msg-'] {
    margin-top: 6px
}
.toast-msg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    align-items: center;
    justify-content: center;
    z-index: 1041;
    display: none;
    opacity: 0;
}
.toast-msg.show {
    display: flex;
    animation: toast-show 2.6s ease-in-out forwards;
}
@keyframes toast-show {
    0% {
        opacity: 0
    }
    17% {
        opacity: 1
    }
    83% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}
.toast-msg .msg {
    position: relative;
    font-size: 16px;
    color: #fff;
    padding: 20px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 500px;
    min-height: 100px;
    background: rgba(0, 0, 0, .8);
    border-radius: 8px;
}
/* 테이블 */
figure.table {
    width: 100%;
    border-top: solid 1px #000
}
figure.table table {
    width: 100%
}
figure.table th {
    background-color: #f7f7f7;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    padding: 15px;
    border-right: solid 1px #e5e5e5;
    border-bottom: solid 1px #e5e5e5;
    color: #1c1c1c;
}
figure.table tbody th {
    text-align: left;
    padding-left: 20px
}
figure.table tbody td {
    padding: 20px;
    border-bottom: solid 1px #e5e5e5;
    color: #1c1c1c;
    font-size: 13px;
    font-weight: 500;
    line-height: 20px
}
figure.table tbody td.tac {
    padding: 20px 50px
}
figure.table tbody td a {
    position: relative;
    display: inline-block;
    font-weight: inherit;
    padding: 0 23px 0 75px;
}
figure.table tbody td a .label-state.on {
    position: absolute;
    left: 0;
    top: 0;
}
figure.table tbody td a .label-file {
    position: absolute;
    right: 0;
    top: 0;
    width: 13px;
    height: auto;
    background: url('../../images/icon-attachment.svg') 0 50%/13px auto no-repeat;
    text-indent: -9999px;
    overflow: hidden;
}
figure.table tbody tr:first-child td {
    font-weight: 700;
}
figure.table .tal p {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    width: auto;
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    line-height: 1.6em;
    max-height: 1.6em;
}
figure.table.compliment .reply {
    display: inline-block;
    padding-left: 30px;
    background: url(../../images/emoji/emoji-memo.svg) no-repeat left center;
    background-size: 24px 25px;
}
figure.table .tal a {
    height: 22px;
    vertical-align: top
}
@media (max-width: 720px) {
    figure.table th {
        padding: 10px 5px;
        word-break: break-all;
        font-size: 12px;
    }
    figure.table tbody th {
        padding-left: 5px;
        text-align: center;
        font-size: 12px;
    }
    figure.table tbody td {
        padding: 10px;
        word-break: keep-all;
        font-size: 12px;
        text-align: center;
    }
    figure.table tbody th p,
    figure.table tbody td p,
    figure.table td .lh24 {
        font-size: 12px;
        line-height: 15px;
    }
}
@media (max-width: 780px) {
    .cont-inner {
        padding-bottom: 80px
    }
    .inp-base {
        font-size: 14px;
        padding: 9px 10px
    }
    .inp-base:hover, .inp-base:focus, .inp-base.selecte, .inp-base.error {
        padding: 8px 9px
    }
    .inp-base[type=text].error, .inp-base[type=password].error {
        background-position: calc(100% - 7px) 50%;
        padding-right: 25px
    }
    .select-type select {
        font-size: 14px;
        padding-left: 10px
    }
    .error-txt {
        font-size: 13px
    }
    .btns-wrap-page {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 0
    }
    .btns-wrap-page > button {
        width: 100%;
        font-size: 18px;
        min-height: 50px
    }
    .list-dotted li span {
        display: inline !important
    }
    .tourlife-header h1 .logo {
        width: 65px;
        height: 21px;
        background-size: auto 21px
    }
    .tourlife-header h1 .partner-name {
        font-size: 14px;
    }
    .cont-title {
        position: static;
        font-size: 24px;
        margin-bottom: 1.5em
    }
    .cont-title .step {
        top: 16px;
        right: 15px
    }
    .cont-title .step p {
        width: 21px;
        height: 21px;
        margin-left: 2px
    }
    .table-type:not(.id-list) .item-cell {
        flex-direction: column
    }
    .table-type .item-cell > * {
        padding: 16px 0
    }
    .table-type .item-cell > .con,
    .table-type .item-cell > .form-con {
        flex: 1 auto;
        border: 0 !important;
        padding: 16px 0
    }
    .table-type .item-cell > .label {
        flex: 1;
        background: none;
        color: #999;
        padding: 16px 0 0;
        margin-bottom: -5px
    }
    .table-type .item-cell > .label:not(:first-child) {
        border-top: 1px solid #e5e5e5;
        border-left: 0
    }
    .table-type .item-cell > .address {
        flex-direction: column
    }
    .table-type.id-list .item-cell > .label {
        display: none
    }
    .table-type.id-list .item-cell > .date {
        flex: 0 0 auto;
        border-left: 0;
        color: #888;
        text-align: right
    }
    .table-type.id-list .item-cell > .date:after {
        content: ' 가입'
    }
    .stit {
        font-size: 18px
    }
    .terms-list {
        margin-top: 10px;
        padding: 7px 0;
        border-top: 1px solid #333
    }
    .cell.terms-toggle .btn-toggle {
        right: 0
    }
    .safekey > div:first-child {
        display: flex
    }
    .safekey > div:first-child > * {
        flex: 1
    }
    .address > div + div {
        display: flex;
        flex-direction: column
    }
    .table-type .address > div + div > input:first-child {
        margin-right: 0;
        margin-bottom: 10px
    }
    .tourlife-join .card-auth > button {
        flex: 0 0 140px;
        padding: 10px 0
    }
    .tooltip-type .layer {
        transform: translateX(-95%)
    }
    .tooltip-type .layer:after {
        left: auto;
        right: 1.5%
    }
    .inp-check + .tooltip-type {
        float: right;
        margin-left: -21px
    }
    .tourlife-join-ok .join-info table th,
    .tourlife-join-ok .join-info table td {
        padding: 8px 15px
    }
    .terms-name-list {
        margin-top: 4px;
        margin-bottom: 13px
    }
    .terms-name-list li {
        width: 22px;
        height: 22px;
        margin-right: 3px;
        margin-bottom: 5px
    }
    .terms-name-list li.on {
        width: 22px;
        padding: 0
    }
    .terms-name-list li.on span {
        display: none
    }
    .modal-header, .modal-body {
        padding-left: 30px
    }
    .modal-header {
        min-height: 75px
    }
    .modal-header:before {
        left: 30px;
        width: calc(100% - 60px)
    }
    .modal-title {
        font-size: 20px;
        padding-top: 2px;
        padding-right: 0
    }
    .modal-body {
        width: calc(100% - 30px)
    }
    .modal-body .easy-join-form .inp-base {
        max-width: 100%
    }
    .modal-body .easy-join-form .id-check {
        display: flex
    }
    .toast-msg .msg {
        font-size: 14px;
        min-width: calc(100% - 40px);
        min-height: 60px;
        margin: 0 20px;
        border-radius: 6px;
    }
}
@media (max-width: 300px) {
    [class*="btn-type-"] {
        padding: 10px 1em
    }
    .address > div:first-child {
        display: flex
    }
    .tourlife-join .card-auth > button {
        flex: 0 0 110px
    }
    .tourlife-join-ok .join-info table {
        margin: 10px auto
    }
    .tourlife-join-ok .join-info table tr {
        display: flex;
        flex-direction: column
    }
    .tourlife-join-ok .join-info table th {
        font-size: 13px;
        padding-bottom: 0
    }
    .tourlife-join-ok .join-info table td {
        font-weight: 700;
        padding-top: 5px
    }
    .modal-header {
        min-height: 60px;
        padding-left: 20px
    }
    .modal-header:before {
        left: 20px;
        width: calc(100% - 40px)
    }
    .modal-content .btn-md-close {
        width: 40px;
        height: 40px;
        background-size: 16px 16px;
        margin-top: 12px
    }
    .modal-title {
        font-size: 18px
    }
    .modal-title > img {
        max-height: 23px;
        vertical-align: bottom
    }
    .modal-body {
        width: calc(100% - 20px);
        padding-left: 20px
    }
    .toast-msg .msg {
        font-size: 14px;
        min-width: calc(100% - 40px);
        min-height: 60px;
        margin: 0 20px;
        border-radius: 6px;
    }
}