@charset "utf-8";

/* =====================================
	. pen-wrap.main
===================================== */
.pen-wrap {
    position: relative;
}

.pen-wrap h3 {
    font-size: 22px;
    color: #222;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.2em;
    margin-bottom: 35px;
}

.pen-wrap .cont {
    margin-top: 50px;
    position: relative;
}

.pen-wrap .cont.no-pad {
    margin-top: 0;
}

.pen-wrap .cont:after {
    display: block;
    content: "";
    clear: both;
}

.pen-wrap .cont .side {
    float: right;
    width: 33.04%;
    z-index: 332;
}

.pen-wrap .cont .side:not(.fixed) {
    position: relative;
}

.pen-wrap .cont .ride {
    float: left;
    width: 58.04%;
    position: relative;
}

.pen-wrap .line {
    margin: 45px 0;
    border-bottom: 1px solid #ddd;
}

@media only screen and (max-width: 1260px) {
    .pen-wrap h3 {
        margin-bottom: 30px;
    }
}

@media only screen and (min-width: 1000px) {
    .pen-wrap .cont .side.fixed .inner {
        position: fixed;
        top: 20px;
    }

    .pen-wrap .cont .side.fixed.stopped .inner {
        position: absolute !important;
        top: auto !important;
        right: 0;
        bottom: 0;
    }
}

@media only screen and (max-width: 999px) {
    .pen-wrap h3 {
        font-size: 22px;
        margin-bottom: 25px;
    }

    .pen-wrap .cont {
        margin-top: 40px;
    }

    .pen-wrap .line {
        margin: 30px 0;
    }

    .pen-wrap .cont .side {
        float: none;
        width: auto;
    }

    .pen-wrap .cont .side.hide {
        display: none;
    }

    .pen-wrap .cont .ride {
        float: none;
        width: auto;
        margin-top: 25px;
    }

    .pen-wrap .cont .side.hide~.ride {
        margin-top: 0;
    }

    .pen-wrap .cont .side.hide~.ride:before {
        display: none;
    }

    .sub .pen-wrap .line {
        position: relative;
        border-bottom: none;
        height: 6px;
        background: #ebebeb;
        width: calc(100% + 60px);
        margin-left: -30px;
    }

    .sub .pen-wrap .cont .ride {
        padding-top: 30px;
        margin-top: 0;
    }

    .sub .pen-wrap .cont .ride:before {
        width: calc(100% + 60px);
        left: -30px;
        top: 0;
        height: 5px;
        position: absolute;
        display: block;
        content: "";
        background: #ebebeb;
    }

    .sub .pen-wrap .mline {
        position: relative;
        border-bottom: none;
        height: 6px;
        background: #ebebeb;
        width: calc(100% + 60px);
        margin-left: -30px;
        margin-bottom: 25px;
    }
}

@media only screen and (max-width: 680px) {
    .pen-wrap h3 {
        font-size: 22px;
        margin-bottom: 25px;
    }

    .pen-wrap .cont {
        margin-top: 30px;
    }

    .pen-wrap .line {
        margin: 25px 0;
    }

    .pen-wrap .stit {
        font-size: 14px;
        font-weight: 400;
        color: #717171;
        letter-spacing: -0.03em;
        line-height: 1.4em;
        margin-top: 5px;
        text-align: left;
    }
}

@media only screen and (max-width: 480px) {
    .pen-wrap h3 {
        font-size: 22px;
        margin-bottom: 20px;
    }
}

/* =====================================
.	top-vis
===================================== */
.top-vis {
    position: absolute;
    left: -9999em;
    top: 0;
    width: 100%;
}

.top-vis .item {
    position: relative;
}

.top-vis .item:after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.35);
    display: block;
    content: "";
}

.top-vis .item img {
    width: 100%;
}

.top-vis .slick-dots {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    height: 4px;
    bottom: 15px;
    margin-bottom: 0;
}

.top-vis .slick-dots ul {
    font-size: 0;
    height: 4px;
}

.top-vis .slick-dots li {
    display: inline-block;
    vertical-align: top;
    height: 4px;
    width: auto;
    margin: 0 2px;
    padding: 0;
}

.top-vis .slick-dots li:nth-child(n + 2) {
    margin-top: 0;
}

.top-vis .slick-dots li button {
    width: 4px;
    height: 4px;
    border: none;
    border-radius: 100%;
    background: #fff;
    display: block;
    padding: 0;
}

.top-vis .slick-dots li.slick-active {}

.top-vis .slick-dots li.slick-active button {
    width: 4px;
    background: #bebab6;
    border-radius: 4px;
}

.top-vis .vis-txt {
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 9123;
    box-sizing: border-box;
    padding: 0 30px;
    text-align: left;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.top-vis .vis-txt p {
    font-size: 22px;
    font-weight: 500;
    color: #fff;
    line-height: 1.3em;
    letter-spacing: -0.03em;
}

@media only screen and (max-width: 1260px) {}

@media only screen and (max-width: 999px) {
    .top-vis {
        position: relative;
        left: auto;
        top: auto;
        width: calc(100% + 60px);
        margin-left: -30px;
    }
}

@media only screen and (max-width: 680px) {}

@media only screen and (max-width: 480px) {}

/* =====================================
	.pen-wrap .ride
===================================== */
.pen-wrap .ride {}

.pen-wrap .ride .resv-state .page-tit {
    font-size: 26px;
    font-weight: 700;
    color: #222;
    line-height: 30px;
}

/* =====================================
	.pen-wrap .side
===================================== */
.pen-wrap .side {}

.pen-wrap .side .pen-tit {
    display: none;
    position: relative;
}

.pen-wrap .side .pen-tit h2 {
    font-size: 26px;
    color: #222;
    line-height: 1.2em;
    letter-spacing: -0.03em;
    font-weight: 600;
    padding-right: 40px;
}

.pen-wrap .side .pen-tit .addr {
    margin-top: 5px;
    font-size: 14px;
    color: #222;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.03em;
    padding-left: 15px;
    background: url(/static/booking/img/sub/ico-location.jpg) no-repeat left calc(50%);
}

.pen-wrap .side .pen-tit .review {
    color: #222;
    display: inline-block;
    vertical-align: top;
    padding-left: 15px;
    position: relative;
}

.pen-wrap .side .pen-tit .review:before {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    content: "★";
}

.pen-wrap .side .pen-tit .review span {
    border-bottom: 1px solid #222;
    display: inline-block;
    vertical-align: top;
    margin-left: 14px;
    position: relative;
}

.pen-wrap .side .pen-tit .review span:before {
    width: 2px;
    height: 2px;
    background: #222;
    border-radius: 100%;
    position: absolute;
    left: -10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    display: block;
    content: "";
}

.pen-wrap .side .pen-tit .abr {
    top: 3px;
    right: 0;
    position: absolute;
}

.pen-wrap .side .pen-tit .abr a {
    width: 25px;
    height: 25px;
    display: block;
    background-image: url(/static/booking/img/sub/icon-share.svg);
    background-size: contain;
}

.pen-wrap .side .scheulde {
    border: 1px solid #c1c1c1;
    border-radius: 15px;
    padding: 25px;
    position: relative;
    background: #fff;
}

.pen-wrap .side .scheulde h3 {
    line-height: 24px;
    font-size: 22px;
    font-weight: 600;
    color: #222;
    letter-spacing: -0.03em;
    margin-bottom: 20px;
}

.pen-wrap .side .scheulde .info {
    position: absolute;
    right: 25px;
    top: 27px;
    font-size: 14px;
    color: #717171;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.03em;
    padding-left: 15px;
}

.pen-wrap .side .scheulde .info:before {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    content: "★";
}

.pen-wrap .side .scheulde .info a {
    color: #717171;
    border-bottom: 1px solid #717171;
    display: inline-block;
    vertical-align: top;
    margin-left: 10px;
    position: relative;
}

.pen-wrap .side .scheulde .info a:before {
    width: 2px;
    height: 2px;
    background: #717171;
    border-radius: 100%;
    position: absolute;
    left: -8px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    display: block;
    content: "";
}

.pen-wrap .side .scheulde .entry.desktop {
    display: block;
}

.pen-wrap .side .scheulde .entry.mobile {
    display: none;
}

.pen-wrap .side .scheulde .entry.desktop ul {
    margin-top: 17px;
    border-radius: 10px;
    border: 1px solid #ddd;
}

.pen-wrap .side .scheulde .entry.desktop ul:after {
    display: block;
    content: "";
    clear: both;
}

.pen-wrap .side .scheulde .entry.desktop ul li {
    float: left;
    width: 50%;
    box-sizing: border-box;
    padding: 10px;
}

.pen-wrap .side .scheulde .entry.desktop ul li:last-child {
    width: 100%;
    border-top: 1px solid #ddd;
}

.pen-wrap .side .scheulde .entry.desktop ul li:nth-child(2) {
    border-left: 1px solid #ddd;
}

.pen-wrap .side .scheulde .entry.desktop ul li .btxt {
    font-size: 12px;
    font-weight: 400;
    color: #222;
    letter-spacing: -0.03em;
    line-height: 1.2em;
}

.pen-wrap .side .scheulde .entry.desktop ul li .stxt {
    display: block;
    line-height: 22px;
    margin-top: 3px;
    color: #717171;
    font-size: 14px;
    text-align: left;
    padding: 0;
    border: none;
}

.pen-wrap .side .scheulde .entry.desktop ul li .stxt.active {
    color: #222;
}

.pen-wrap .side .scheulde .entry.desktop ul li .person {
    line-height: 25px;
    margin-top: 3px;
    color: #717171;
    font-size: 14px;
    text-align: left;
    padding: 0;
    border: none;
    position: relative;
    display: block;
}

.pen-wrap .side .scheulde .entry.desktop ul li .person:after {
    background: url(/static/booking/img/sub/select-arrow.png) no-repeat center center;
    position: absolute;
    width: 16px;
    height: 10px;
    margin-top: -5px;
    right: 4px;
    top: 50%;
    display: block;
    content: "";
    z-index: 3;
}

.pen-wrap .side .scheulde .entry.desktop ul li .chk-input {
    width: 100%;
    margin-top: 3px;
}

.pen-wrap .side .scheulde .entry.desktop ul li .chk-input input {
    height: 25px;
    font-size: 14px;
    text-align: left;
    padding: 0;
    border: none;
}

.pen-wrap .side .scheulde .entry.desktop ul li .chk-select {
    width: 100%;
    margin-top: 3px;
    border: none;
}

.pen-wrap .side .scheulde .entry.desktop ul li .chk-select:after {
    right: 3px;
}

.pen-wrap .side .scheulde .entry.desktop ul li .chk-select select {
    height: 25px;
    font-size: 14px;
    text-align: left;
    text-indent: 0;
    padding: 0;
    border: none;
}

.pen-wrap .side .scheulde .entry.mobile {
    margin-top: 20px;
}

.pen-wrap .side .scheulde .entry.mobile ul {
    border-top: 1px solid #ddd;
}

.pen-wrap .side .scheulde .entry.mobile li {
    border-bottom: 1px solid #ddd;
}

.pen-wrap .side .scheulde .entry.mobile li a {
    display: block;
    position: relative;
    padding: 20px 0;
}

.pen-wrap .side .scheulde .entry.mobile li a:after {
    position: absolute;
    right: 10px;
    top: 0;
    width: 10px;
    height: 100%;
    background: url(/static/booking/img/content/more-arrow.jpg) no-repeat right 50%;
    display: block;
    content: "";
    transform: scale(1);
    transition: transform 1s cubic-bezier(0.33, 0.02, 0, 0.93);
}

.pen-wrap .side .scheulde .entry.mobile li a:hover:after {
    transform: scale(1) translateX(5px);
}

.pen-wrap .side .scheulde .entry.mobile li .btxt {
    font-size: 18px;
    font-weight: 500;
    color: #222;
    letter-spacing: -0.03em;
    line-height: 1.3em;
}

.pen-wrap .side .scheulde .entry.mobile li .stxt {
    font-size: 14px;
    font-weight: 400;
    color: #717171;
    letter-spacing: -0.03em;
    line-height: 1.3em;
    margin-top: 5px;
}

.pen-wrap .side .scheulde .view-btn {
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    letter-spacing: -0.03em;
    line-height: 48px;
    border-radius: 8px;
    background: var(--brand-main-color);
    margin-top: 24px;
    display: block;
    text-align: center;
}

@media only screen and (max-width: 1260px) {}

@media only screen and (max-width: 999px) {
    .pen-wrap .ride .resv-state {
        display: none;
    }

    .pen-wrap .side .pen-tit {
        display: block;
    }

    .pen-wrap .side .scheulde {
        border: none;
        padding: 0;
        border-radius: 0;
    }

    .pen-wrap .side .scheulde h3 {
        display: none;
    }

    .pen-wrap .side .scheulde .info {
        display: none;
    }

    .pen-wrap .side .scheulde .entry.desktop {
        display: none;
    }

    .pen-wrap .side .scheulde .entry.mobile {
        display: block;
    }

    .pen-wrap .side .scheulde .view-btn {
        display: none;
    }

    .pen-wrap .side .scheulde .entry.mobile li .btxt {
        font-size: 16px;
    }

    .pen-wrap .side .scheulde .entry.mobile li .stxt {
        font-size: 14px;
    }

    .pen-wrap .side .scheulde .view-btn {
        font-size: 14px;
        line-height: 42px;
    }
}

@media only screen and (max-width: 680px) {}

@media only screen and (max-width: 480px) {}

.pen-wrap .side .now {
    border: 1px solid #c1c1c1;
    border-radius: 15px;
    padding: 25px;
    position: relative;
}

.pen-wrap .side .now h3 {
    line-height: 20px;
    font-size: 18px;
    font-weight: 600;
    color: #222;
    letter-spacing: -0.03em;
    margin-bottom: 25px;
}

.pen-wrap .side .now .price {
    position: relative;
    padding-left: 160px;
    margin-bottom: 20px;
}

.pen-wrap .side .now .price .img {
    position: absolute;
    left: 0;
    top: 0;
    width: 140px;
    border-radius: 10px;
    overflow: hidden;
}

.pen-wrap .side .now .price .img img {
    width: 100%;
    height: 110px;
    object-fit: cover;
}

.pen-wrap .side .now .price .txt {
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: left;
    text-align: left;
}

.pen-wrap .side .now .price .vc {
    width: 100%;
    position: relative;
}

.pen-wrap .side .now .price .btit {
    font-size: 14px;
    font-weight: 500;
    color: #717171;
    letter-spacing: -0.03em;
    line-height: 1.4em;
}

.pen-wrap .side .now .price .btxt {
    font-size: 16px;
    font-weight: 500;
    color: #222;
    letter-spacing: -0.03em;
    line-height: 1.4em;
}

.pen-wrap .side .now .price .stxt {
    font-size: 16px;
    font-weight: 400;
    color: #222;
    letter-spacing: -0.03em;
    line-height: 1.2em;
    margin-top: 15px;
}

.pen-wrap .side .now .expense {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
}

.pen-wrap .side .now .expense ul {}

.pen-wrap .side .now .expense li {
    text-align: right;
    position: relative;
}

.pen-wrap .side .now .expense li:nth-child(n + 2) {
    margin-top: 17px;
}

.pen-wrap .side .now .expense li .btxt {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 16px;
    font-weight: 500;
    color: #222;
    letter-spacing: -0.03em;
    line-height: 1.2em;
}

.pen-wrap .side .now .expense li .stxt {
    font-size: 16px;
    font-weight: 400;
    color: #717171;
    letter-spacing: -0.03em;
    line-height: 1.2em;
}

.pen-wrap .side .now .btns {
    text-align: right;
    margin-top: 15px;
}

.pen-wrap .side .now .btns .detail-btn {
    line-height: 20px;
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    font-weight: 400;
    color: #222;
    letter-spacing: -0.03em;
    border-bottom: 1px solid #222;
}

.pen-wrap .side .now .reserve-btn,
.pen-wrap .side .now .cancel-btn {
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    letter-spacing: -0.03em;
    line-height: 48px;
    border-radius: 8px;
    background: var(--brand-main-color);
    margin-top: 20px;
    display: block;
    text-align: center;
    border: 0;
}

.pen-wrap .side .now .reserve-btn:hover,
.pen-wrap .side .now .cancel-btn:hover {
    background: #212121;
}

@media only screen and (max-width: 1260px) {}

@media only screen and (max-width: 999px) {
    .pen-wrap .side .now {
        border: none;
        padding: 20px 0;
        border-radius: 0;
    }

    .pen-wrap .side .now .price {
        padding-left: 140px;
    }

    .pen-wrap .side .now .price .img {
        width: 120px;
    }

    .pen-wrap .side .now .price .img img {
        height: 90px;
    }

    .pen-wrap .side .now .price .txt {
        height: 90px;
    }

    .pen-wrap .side .now .price .btxt {
        font-size: 16px;
    }

    .pen-wrap .side .now .expense {
        display: none;
    }
}

@media only screen and (max-width: 680px) {}

@media only screen and (max-width: 480px) {}

/* =====================================
	.pen-wrap.main
===================================== */
.pen-wrap.main .vis {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
}

.pen-wrap.main .vis:after {
    display: block;
    content: "";
    clear: both;
}

.pen-wrap.main .vis .mvis-slide {
    position: relative;
}

.pen-wrap.main .vis .mvis-slide:after {
    display: block;
    content: "";
    clear: both;
}

.pen-wrap.main .vis .item img {
    width: 100%;
}

.pen-wrap.main .vis .all-btn {
    width: 120px;
    height: 32px;
    line-height: 31px;
    border-radius: 5px;
    text-align: center;
    position: absolute;
    right: 22px;
    bottom: 22px;
    border: 1px solid #222;
    background: #fff;
}

.pen-wrap.main .vis .all-btn span {
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    font-weight: 400;
    color: #222;
    letter-spacing: -0.04em;
    padding-left: 20px;
    background: url(/static/booking/img/content/all-photo.jpg) no-repeat left calc(50%);
}

.pen-wrap.main .vis .mvis-count {
    display: none;
    position: absolute;
    right: 15px;
    bottom: 15px;
    border-radius: 4px;
    line-height: 20px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    z-index: 901;
    font-size: 12px;
    padding: 0 10px;
}

.pen-wrap.main .vis .mvis-count .current {
    font-weight: 600;
    color: #fff;
}

.pen-wrap.main .vis .slick-dots {
    opacity: 0;
    top: 0;
    width: 100%;
    height: 0;
    overflow: hidden;
}

.pen-wrap.main .mvis-slide.mobile {
    position: absolute;
    left: -9999em;
    top: 0;
    width: 100%;
}

@media only screen and (max-width: 1260px) {
    .pen-wrap.main .vis .all-btn {
        width: 110px;
        height: 28px;
        line-height: 27px;
        right: 16px;
        bottom: 16px;
    }

    .pen-wrap.main .vis .all-btn span {
        font-size: 12px;
        padding-left: 16px;
    }
}

@media only screen and (min-width: 1000px) {
    .pen-wrap.main .vis .item {
        overflow: hidden;
    }

    .pen-wrap.main .vis .item.c01 {
        float: left;
        width: 50%;
    }

    .pen-wrap.main .vis .item img {
        height: 100%;
        height: 246px;
        object-fit: cover;
        transform: scale(1.1);
        transition: transform 1s cubic-bezier(0.33, 0.02, 0, 0.93);
    }

    .pen-wrap.main .vis .item:hover img {
        transform: scale(1.1) translateX(4%);
    }

    .pen-wrap.main .vis .item.c01 img {
        height: 500px;
    }

    .pen-wrap.main .vis .item.c02 {
        position: absolute;
        width: 24.29%;
        right: calc(24.29% + 8px);
        top: 0;
        height: calc(50% - 4px);
    }

    .pen-wrap.main .vis .item.c03 {
        position: absolute;
        width: 24.29%;
        right: 0;
        top: 0;
        height: calc(50% - 4px);
    }

    .pen-wrap.main .vis .item.c04 {
        position: absolute;
        width: 24.29%;
        right: calc(24.29% + 8px);
        bottom: 0;
        height: calc(50% - 4px);
    }

    .pen-wrap.main .vis .item.c05 {
        position: absolute;
        width: 24.29%;
        right: 0;
        bottom: 0;
        height: calc(50% - 4px);
    }
}

@media only screen and (max-width: 999px) {
    .pen-wrap.main .vis {
        border-radius: 0;
    }

    .pen-wrap.main .vis .all-btn {
        display: none;
    }

    .pen-wrap.main .vis {
        width: calc(100% + 60px);
        margin-left: -30px;
    }

    .pen-wrap.main .mvis-slide.desktop {
        display: none !important;
    }

    .pen-wrap.main .mvis-slide.mobile {
        position: relative;
        left: auto;
        top: auto;
    }

    .pen-wrap.main .vis .mvis-count {
        display: block;
    }

    .pen-wrap.main .vis .item img {
        height: 400px;
        object-fit: cover;
    }
}

@media only screen and (max-width: 680px) {
    .pen-wrap.main .vis .item img {
        height: 350px;
    }
}

@media only screen and (max-width: 480px) {}

/* =====================================
	.pen-wrap
===================================== */
.pen-wrap {}

.pen-wrap .info {
    align-items: flex-start;
}

.pen-wrap .info .pen-tit,
.pen-wrap .info .abr {
    margin: 25px 0;
}

.pen-wrap .info .pen-tit h2 {
    font-size: 26px;
    color: #222;
    line-height: 1.2em;
    letter-spacing: -0.03em;
    font-weight: 600;
}

.pen-wrap .info .pen-tit .pen-loc {
    margin-top: 5px;
    font-size: 14px;
    color: #222;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.03em;
    padding-left: 15px;
    background: url(/static/booking/img/sub/ico-location.jpg) no-repeat left calc(50%);
}

.pen-wrap .info .pen-tit .pen-loc a {
    color: #222;
    border-bottom: 1px solid #222;
    display: inline-block;
    vertical-align: top;
    margin-left: 14px;
    position: relative;
}

.pen-wrap .info .pen-tit .pen-loc a:before {
    width: 2px;
    height: 2px;
    background: #222;
    border-radius: 100%;
    position: absolute;
    left: -10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    display: block;
    content: "";
}

.pen-wrap .info .abr a {
    line-height: 20px;
    display: block;
    padding-left: 22px;
    font-size: 16px;
    color: #222;
    position: relative;
}

.pen-wrap .info .abr a:before {
    width: 22px;
    height: 22px;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(/static/booking/img/sub/icon-share.svg);
    background-size: contain;
    display: block;
    content: "";
}

.pen-wrap .info .abr a span {
    border-bottom: 1px solid #222;
    display: inline-block;
    vertical-align: top;
}

.pen-wrap .fact h3 {
    margin-bottom: 20px;
}

.pen-wrap .fact ul {}

.pen-wrap .fact ul:after {
    display: block;
    content: "";
    clear: both;
}

.pen-wrap .fact li {
    float: left;
    width: 50%;
    box-sizing: border-box;
    padding-left: 42px;
    position: relative;
}

.pen-wrap .fact li:nth-child(n + 3) {
    margin-top: 20px;
}

.pen-wrap .fact li .ico {
    position: absolute;
    left: 0;
    top: 0;
    width: 26px;
}

.pen-wrap .fact li .ico img {
    width: 100%;
}

.pen-wrap .fact li .txt {
    font-size: 16px;
    font-weight: 400;
    color: #222;
    letter-spacing: -0.03em;
    line-height: 26px;
}

.pen-wrap .fact .lower {
    margin-top: 40px;
}

.pen-wrap .fact .lower .more {
    border: 1px solid #8b8b8b;
    border-radius: 6px;
    line-height: 45px;
    text-align: center;
    width: 220px;
    font-size: 16px;
    font-weight: 400;
    color: #222;
    letter-spacing: -0.03em;
    display: inline-block;
    vertical-align: top;
}

.pen-wrap .fact .lower .more:hover {
    background: #222;
    border-color: #222;
    color: #fff;
}

@media only screen and (max-width: 1260px) {}

@media only screen and (max-width: 999px) {}

@media only screen and (max-width: 680px) {
    .pen-wrap .fact li {
        padding-left: 36px;
    }

    .pen-wrap .fact li .txt {
        font-size: 14px;
        line-height: 24px;
        color: #222;
    }

    .pen-wrap .fact li .ico {
        width: 24px;
    }

    .pen-wrap .fact li:nth-child(n + 5) {
        display: none;
    }

    .pen-wrap .fact .lower {
        margin-top: 20px;
    }

    .pen-wrap .fact .lower .more {
        width: auto;
        font-size: 14px;
        line-height: 40px;
        display: block;
        color: #222;
    }
}

@media only screen and (max-width: 480px) {}

.pen-wrap .pay-mobile {
    display: none;
    padding: 0 0 20px 0;
}

.pen-wrap .pay-mobile ul {}

.pen-wrap .pay-mobile li {
    text-align: right;
    position: relative;
}

.pen-wrap .pay-mobile li:nth-child(n + 2) {
    margin-top: 17px;
}

.pen-wrap .pay-mobile li .btxt {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 16px;
    font-weight: 500;
    color: #222;
    letter-spacing: -0.03em;
    line-height: 1.2em;
}

.pen-wrap .pay-mobile li .stxt {
    font-size: 16px;
    font-weight: 400;
    color: #717171;
    letter-spacing: -0.03em;
    line-height: 1.2em;
}

.pen-wrap .pay-mobile .btns {
    text-align: right;
    margin-top: 15px;
}

.pen-wrap .pay-mobile .btns .detail-btn {
    line-height: 20px;
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    font-weight: 400;
    color: #222;
    letter-spacing: -0.03em;
    border-bottom: 1px solid #222;
}

@media only screen and (max-width: 1260px) {}

@media only screen and (max-width: 999px) {
    .pen-wrap .pay-mobile {
        display: block;
    }

    .pen-wrap .pay-mobile li .btxt {
        font-size: 16px;
    }

    .pen-wrap .pay-mobile li .stxt {
        font-size: 16px;
    }

    .pen-wrap .pay-mobile .btns .detail-btn {
        font-size: 14px;
        line-height: 16px;
    }
}

@media only screen and (max-width: 680px) {}

@media only screen and (max-width: 480px) {}

.pen-wrap .room {}

.pen-wrap .room ul {}

.pen-wrap .room li {
    position: relative;
    padding-left: 350px;
}

.pen-wrap .room li:nth-child(n + 2) {
    margin-top: 70px;
}

.pen-wrap .room li .img {
    position: absolute;
    left: 0;
    top: 0;
    width: 280px;
    /*border-radius: 15px;*/
    overflow: hidden;
}

.pen-wrap .room li .img img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    mix-blend-mode: normal;
}

.pen-wrap .room li .img img.disabled {
    mix-blend-mode: luminosity;
}

.pen-wrap .room li .img a {
    display: block;
    background: #fff;
}

.pen-wrap .room li .slick-dots {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    height: 4px;
    bottom: 8px;
    margin-bottom: 0;
}

.pen-wrap .room li .slick-dots ul {
    font-size: 0;
    height: 4px;
}

.pen-wrap .room li .slick-dots li {
    display: inline-block;
    vertical-align: top;
    height: 4px;
    width: auto;
    margin: 0 2px;
    padding: 0;
}

.pen-wrap .room li .slick-dots li:nth-child(n + 2) {
    margin-top: 0;
}

.pen-wrap .room li .slick-dots li button {
    width: 4px;
    height: 4px;
    border: none;
    border-radius: 100%;
    background: #fff;
    display: block;
    padding: 0;
}

.pen-wrap .room li .slick-dots li.slick-active {}

.pen-wrap .room li .slick-dots li.slick-active button {
    width: 4px;
    background: #bebab6;
    border-radius: 4px;
}

.pen-wrap .room li .txt {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: left;
    text-align: left;
}

.pen-wrap .room li .vc {
    width: 100%;
    position: relative;
}

.pen-wrap .room li .vc dl {
    position: relative;
}

.pen-wrap .room li .vc dt {
    font-size: 20px;
    font-weight: 500;
    color: #222;
    line-height: 1.2em;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.pen-wrap .room li .vc dd {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.3em;
    color: #717171;
}

.pen-wrap .room li .vc dd:nth-child(n + 3) {
    margin-top: 2px;
}

.pen-wrap .room li .vc dd.won {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 18px;
    font-weight: 500;
    color: #222;
    line-height: 1.3em;
    letter-spacing: -0.03em;
}

.pen-wrap .room li .detail-btn {
    position: absolute;
    right: 0;
    top: 40px;
    color: var(--brand-main-color);
    line-height: 20px;
    font-size: 12px;
    border-bottom: 1px solid var(--brand-main-color);
    z-index: 92;
}

.pen-wrap .room li .btns.disabled {
    display: none;
}

.pen-wrap .room li .btns {
    margin-top: 10px;
    text-align: right;
}

.pen-wrap .room li .btns .reserve-btn {
    width: 100px;
    line-height: 36px;
    border-radius: 8px;
    font-size: 16px;
    background: var(--brand-main-color);
    color: #fff;
    text-align: center;
    letter-spacing: -0.03em;
    display: inline-block;
    vertical-align: top;
}

.pen-wrap .room li .btns.disabled .reserve-btn {
    border: 1px solid var(--brand-main-color);
    color: var(--brand-main-color);
    background: #fff;
    line-height: 34px;
}

.pen-wrap .room li .btns .reserve-unable-btn {
    width: 100px;
    line-height: 36px;
    border-radius: 8px;
    font-size: 16px;
    background: #8b8b8b;
    color: #fff;
    text-align: center;
    letter-spacing: -0.03em;
    display: inline-block;
    vertical-align: top;
}

@media only screen and (max-width: 1260px) {
    .pen-wrap .room li {
        padding-left: 320px;
    }

    .pen-wrap .room li:nth-child(n + 2) {
        margin-top: 50px;
    }

    .pen-wrap .room li .img {
        width: 280px;
    }

    .pen-wrap .room li .vc dt {
        font-size: 18px;
    }

    .pen-wrap .room li .vc dd {
        font-size: 14px;
    }

    .pen-wrap .room li .vc dd.won {
        font-size: 16px;
    }

    .pen-wrap .room li .detail-btn {
        top: 36px;
        font-size: 11px;
    }

    .pen-wrap .room li .btns .reserve-btn {
        font-size: 14px;
        width: 90px;
    }
}

@media only screen and (max-width: 999px) {
    .pen-wrap .room li {
        padding-left: 280px;
    }

    .pen-wrap .room li .img {
        width: 240px;
    }
}

@media only screen and (max-width: 680px) {
    .pen-wrap .room li {
        padding-left: 0;
    }

    .pen-wrap .room li:nth-child(n + 2) {
        margin-top: 30px;
    }

    .pen-wrap .room li .img {
        position: relative;
        left: auto;
        top: auto;
        width: auto;
        /*border-radius: 12px;*/
    }

    .pen-wrap .room li .img img {
        height: auto;
        object-fit: fill;
        border-radius: 12px;
    }

    .pen-wrap .room li .txt {
        height: auto;
        margin-top: 20px;
    }

    .pen-wrap .room li .btns {
        margin-top: 20px;
    }

    .pen-wrap .room li .btns.disabled {
        display: block;
    }

    .pen-wrap .room li .btns .reserve-btn,
    .pen-wrap .room li .btns .reserve-unable-btn {
        width: auto;
        display: block;
        line-height: 40px;
    }

    .pen-wrap .room li .btns.disabled .reserve-btn,
    .pen-wrap .room li .btns.disabled .reserve-unable-btn {
        line-height: 38px;
    }
}

@media only screen and (max-width: 480px) {}

.pen-wrap .guide .gx {
    display: none;
    font-size: 14px;
    font-weight: 500;
    color: #717171;
    letter-spacing: -0.03em;
    line-height: 20px;
    background: url(/static/booking/img/sub/ico-calendar.jpg) no-repeat left 0;
    padding-left: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd;
}

.pen-wrap .guide .txt {}

.pen-wrap .guide .txt p {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.4em;
    color: #717171;
}

.pen-wrap .guide .btns {
    text-align: left;
}

.pen-wrap .guide .more {
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    color: #222;
    margin-top: 40px;
    padding-right: 20px;
    position: relative;
}

.pen-wrap .guide .more:after {
    position: absolute;
    right: 0;
    top: 0;
    width: 10px;
    height: 100%;
    background: url(/static/booking/img/content/more-arrow.jpg) no-repeat right 50%;
    display: block;
    content: "";
    transform: scale(1);
    transition: transform 1s cubic-bezier(0.33, 0.02, 0, 0.93);
}

.pen-wrap .guide .more:hover:after {
    transform: scale(1) translateX(5px);
}

.pen-wrap .guide .more span {
    display: inline-block;
    vertical-align: top;
    line-height: 22px;
    letter-spacing: -0.03em;
    font-weight: 600;
    border-bottom: 1px solid #222;
}

@media only screen and (max-width: 1260px) {}

@media only screen and (max-width: 999px) {}

@media only screen and (max-width: 680px) {
    .pen-wrap .guide h3 {
        display: none;
    }

    .pen-wrap .guide h3.show {
        display: block;
    }

    .pen-wrap .guide .gx {
        display: block;
    }

    .pen-wrap .guide .txt {
        margin-top: 20px;
    }

    .pen-wrap .guide .txt p {
        font-size: 14px;
        color: #222;
    }

    .pen-wrap .guide .btns {
        text-align: right;
    }

    .pen-wrap .guide .more {
        margin-top: 20px;
        padding-right: 15px;
        font-size: 12px;
    }

    .pen-wrap .guide .more:after {
        background-size: 7px auto;
    }
}

@media only screen and (max-width: 480px) {}

.pen-wrap .location {
    position: relative;
}

.pen-wrap .location .txt {
    position: relative;
}

.pen-wrap .location .txt h3 {
    margin-bottom: 10px;
}

.pen-wrap .location .txt .addr {
    font-size: 14px;
    color: #222;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.03em;
    padding-left: 15px;
    background: url(/static/booking/img/sub/ico-location.jpg) no-repeat left calc(50%);
}

.pen-wrap .location .txt a {
    display: none;
    font-size: 12px;
    position: absolute;
    right: 0;
    bottom: 0;
    border-bottom: 1px solid #222;
    line-height: 1.3em;
    font-weight: 500;
}

.pen-wrap .location .maps {
    margin-top: 20px;
}

.pen-wrap .location .maps .item_location_map {
    height: 470px !important;
}

@media only screen and (max-width: 1260px) {
    .pen-wrap .location .maps {
        border-radius: 10px;
        overflow: hidden;
    }

    .pen-wrap .location .maps .item_location_map {
        height: 400px !important;
    }
}

@media only screen and (max-width: 999px) {
    .pen-wrap .location .maps {
        margin-top: 15px;
    }

    .pen-wrap .location .maps .item_location_map {
        height: 320px !important;
    }
}

@media only screen and (max-width: 680px) {
    .pen-wrap .location .txt a {
        display: block;
    }

    .pen-wrap .location .maps .item_location_map {
        height: 250px !important;
    }
}

@media only screen and (max-width: 480px) {}

.pen-wrap .review {}

.pen-wrap .review .state {}

.pen-wrap .review .state ul {
    max-width: 495px;
}

.pen-wrap .review .state li {
    position: relative;
    padding-left: 5px;
}

.pen-wrap .review .state li:nth-child(n + 2) {
    margin-top: 8px;
}

.pen-wrap .review .state li .btxt {
    line-height: 22px;
    font-size: 16px;
    font-weight: 400;
    color: #222;
    letter-spacing: -0.03em;
}

.pen-wrap .review .state li .grap {
    width: 140px;
    position: absolute;
    right: 40px;
    top: 50%;
    margin-top: -2px;
    height: 4px;
    box-sizing: border-box;
}

.pen-wrap .review .state li .grap:before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 4px;
    background: #ddd;
    border-radius: 3px;
    display: block;
    content: "";
    z-index: -1;
}

.pen-wrap .review .state li .grap .bar {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 4px;
    background: #222;
}

.pen-wrap .review .state li .grap .rtxt {
    right: -30px;
    line-height: 22px;
    font-size: 16px;
    font-weight: 400;
    color: #222;
    letter-spacing: -0.03em;
    position: absolute;
    top: 50%;
    margin-top: -11px;
}

@media only screen and (max-width: 1260px) {
    .pen-wrap .review .state ul {
        max-width: 420px;
    }
}

@media only screen and (max-width: 999px) {
    .pen-wrap .review .state ul {
        max-width: 350px;
    }
}

@media only screen and (max-width: 680px) {
    .pen-wrap .review .state {
        display: none;
    }
}

@media only screen and (max-width: 480px) {}

.pen-wrap .review .rlist {
    margin-top: 40px;
}

.pen-wrap .review .rlist .review-slide {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
}

.pen-wrap .review .rlist .review-slide:after {
    display: block;
    content: "";
    clear: both;
}

.pen-wrap .review .rlist .item {
    float: left;
    width: 50%;
    display: flex;
    display: -webkit-flex;
}

.pen-wrap .review .rlist .item:nth-child(n + 3) {
    margin-top: 40px;
}

.pen-wrap .review .rlist .item .ctr {
    width: 100%;
    box-sizing: border-box;
    padding-right: 80px;
}

.pen-wrap .review .rlist .item .user {
    position: relative;
    padding-left: 48px;
    display: flex;
    align-items: center;
    justify-content: left;
    height: 38px;
    text-align: left;
}

.pen-wrap .review .rlist .item .user .img {
    position: absolute;
    left: 0;
    top: 0;
    width: 38px;
    overflow: hidden;
    height: 38px;
    border-radius: 100%;
}

.pen-wrap .review .rlist .item .user .img img {
    width: 100%;
    height: 38px;
    object-fit: cover;
}

.pen-wrap .review .rlist .item .user .vc {
    width: 100%;
}

.pen-wrap .review .rlist .item .user .btxt {
    font-size: 16px;
    font-weight: 400;
    color: #222;
    letter-spacing: -0.03em;
    line-height: 1.2em;
}

.pen-wrap .review .rlist .item .user .stxt {
    margin-top: 2px;
    font-size: 14px;
    font-weight: 400;
    color: #717171;
    letter-spacing: -0.03em;
    line-height: 1.1em;
}

.pen-wrap .review .rlist .item .txt {
    margin-top: 15px;
}

.pen-wrap .review .rlist .item .txt p {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3em;
    color: #222;
    letter-spacing: -0.03em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.pen-wrap .review .rlist .item .more {
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    color: #222;
    margin-top: 15px;
    padding-right: 20px;
    position: relative;
}

.pen-wrap .review .rlist .item .more span {
    display: inline-block;
    vertical-align: top;
    line-height: 22px;
    letter-spacing: -0.03em;
    font-weight: 600;
    border-bottom: 1px solid #222;
}

.pen-wrap .review .rlist .item .more:after {
    position: absolute;
    right: 0;
    top: 0;
    width: 10px;
    height: 100%;
    background: url(/static/booking/img/content/more-arrow.jpg) no-repeat right 50%;
    display: block;
    content: "";
    transform: scale(1);
    transition: transform 1s cubic-bezier(0.33, 0.02, 0, 0.93);
}

.pen-wrap .review .rlist .item .more:hover:after {
    transform: scale(1) translateX(5px);
}

.pen-wrap .review .rlist .item .more.hide {
    display: none;
}

.pen-wrap .review .lower {
    margin-top: 20px;
}

.pen-wrap .review .lower .more {
    border: 1px solid #8b8b8b;
    border-radius: 6px;
    line-height: 45px;
    text-align: center;
    width: 180px;
    font-size: 16px;
    font-weight: 400;
    color: #222;
    letter-spacing: -0.03em;
    display: inline-block;
    vertical-align: top;
}

.pen-wrap .review .lower .more:hover {
    background: #222;
    border-color: #222;
    color: #fff;
}

@media only screen and (max-width: 1260px) {}

@media only screen and (max-width: 999px) {}

@media only screen and (max-width: 680px) {
    .pen-wrap .review .rlist {
        padding-right: 40px;
        margin-top: 0;
    }

    .pen-wrap .review .rlist .review-slide {
        display: block;
    }

    .pen-wrap .review .rlist .owl-stage-outer {
        overflow: visible;
    }

    .pen-wrap .review .rlist .item {
        float: none;
        width: auto;
        display: block;
        border: 1px solid #c1c1c1;
        border-radius: 10px;
        padding: 20px;
    }

    .pen-wrap .review .rlist .item .ctr {
        padding-right: 0;
    }

    .pen-wrap .review .rlist .item .user .btxt {
        font-size: 14px;
        color: #222;
    }

    .pen-wrap .review .rlist .item .user .stxt {
        font-size: 14px;
        color: #222;
    }

    .pen-wrap .review .rlist .item .txt p {
        font-size: 16px;
        color: #717171;
        -webkit-line-clamp: 3;
    }

    .pen-wrap .review .rlist .item .more {
        padding-right: 15px;
        font-size: 12px;
        height: 16px;
    }

    .pen-wrap .review .rlist .item .more:after {
        background-size: 7px auto;
    }

    .pen-wrap .review .rlist .item .more.hide {
        display: inline-block;
    }

    .pen-wrap .review .rlist .item .more span {
        line-height: 16px;
    }

    .pen-wrap .review .lower .more {
        width: auto;
        font-size: 14px;
        line-height: 40px;
        display: block;
        color: #222;
    }
}

@media only screen and (max-width: 480px) {}

.pen-wrap .know {}

.pen-wrap .know .ov:after {
    display: block;
    content: "";
    clear: both;
}

.pen-wrap .know .fl {
    float: left;
    width: 50%;
}

.pen-wrap .know .fr {
    float: right;
    width: 50%;
}

.pen-wrap .know dl {}

.pen-wrap .know dt {
    font-size: 18px;
    font-weight: 500;
    color: #222;
    letter-spacing: -0.03em;
    line-height: 1.2em;
    margin-bottom: 15px;
}

.pen-wrap .know dd {
    font-size: 16px;
    font-weight: 400;
    color: #717171;
    letter-spacing: -0.03em;
    line-height: 1.2em;
}

.pen-wrap .know dd:nth-child(n + 2) {
    margin-top: 5px;
}

.pen-wrap .know .more {
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    color: #222;
    margin-top: 40px;
    padding-right: 20px;
    position: relative;
}

.pen-wrap .know .more:after {
    position: absolute;
    right: 0;
    top: 0;
    width: 10px;
    height: 100%;
    background: url(/static/booking/img/content/more-arrow.jpg) no-repeat right 50%;
    display: block;
    content: "";
    transform: scale(1);
    transition: transform 1s cubic-bezier(0.33, 0.02, 0, 0.93);
}

.pen-wrap .know .more:hover:after {
    transform: scale(1) translateX(5px);
}

.pen-wrap .know .more span {
    display: inline-block;
    vertical-align: top;
    line-height: 22px;
    letter-spacing: -0.03em;
    font-weight: 600;
    border-bottom: 1px solid #222;
}

@media only screen and (max-width: 1260px) {}

@media only screen and (max-width: 999px) {
    .pen-wrap .know dd {
        font-size: 15px;
    }
}

@media only screen and (max-width: 680px) {
    .pen-wrap .know h3 {
        display: none;
    }

    .pen-wrap .know .fl {
        position: relative;
        float: none;
        width: auto;
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        margin-top: 20px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .pen-wrap .know .fr {
        position: relative;
        float: none;
        width: auto;
    }

    .pen-wrap .know dl {}

    .pen-wrap .know dt {
        margin-bottom: 10px;
    }

    .pen-wrap .know dd {
        font-size: 14px;
    }

    .pen-wrap .know dd:nth-child(n + 2) {
        margin-top: 3px;
    }

    .pen-wrap .know .fr .more {
        position: absolute;
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        text-indent: -9999em;
        margin-top: 0;
    }

    .pen-wrap .know .fr .more:after {
        right: 5px;
        background-position: right center;
    }

    .pen-wrap .know .fl .more {
        margin-top: 20px;
    }

    .pen-wrap .know .more {
        padding-right: 15px;
        font-size: 12px;
        height: 16px;
    }

    .pen-wrap .know .more:after {
        background-size: 7px auto;
    }

    .pen-wrap .know .more span {
        line-height: 16px;
    }
}

@media only screen and (max-width: 480px) {}

/* =====================================
	.pen-wrap agrees
===================================== */
.pen-wrap .agrees {}

.pen-wrap .agrees .all-chk label {
    font-size: 16px;
    color: #222;
}

.pen-wrap .agrees ul {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #ddd;
}

.pen-wrap .agrees li {
    position: relative;
}

.pen-wrap .agrees li:nth-child(n + 2) {
    margin-top: 20px;
}

.pen-wrap .agrees li label {
    font-size: 16px;
    color: #222;
}

.pen-wrap .agrees li label span {
    font-size: 16px;
    color: #222;
}

.pen-wrap .agrees .chk-check input[type="checkbox"]+label:before {
    box-sizing: border-box;
    background: url(/static/booking/img/sub/chk-agree.jpg) no-repeat center center;
    border-radius: 100%;
    border: 2px solid #dfdfdf;
    background-size: 100% auto;
    width: 18px;
    height: 18px;
    top: 1px;
}

.pen-wrap .agrees .chk-check input[type="checkbox"]:checked+label:before {
    background-image: url(/static/booking/img/sub/chk-agreeo.jpg);
    border-color: #555;
}

.pen-wrap .agrees .view-btn {
    position: absolute;
    right: 10px;
    top: 0;
    width: 10px;
    height: 100%;
    background: url(/static/booking/img/content/more-arrow.jpg) no-repeat right 50%;
    transform: scale(1);
    transition: transform 1s cubic-bezier(0.33, 0.02, 0, 0.93);
}

.pen-wrap .agrees .view-btn:after {
    transform: scale(1) translateX(5px);
}

@media only screen and (max-width: 680px) {
    .pen-wrap .agrees .all-chk label {
        font-size: 16px;
        color: #222;
    }

    .pen-wrap .agrees li label {
        font-size: 16px;
        color: #222;
    }

    .pen-wrap .agrees li label span {
        font-size: 14px;
        color: #222;
    }
}

/* =====================================
	.pen-wrap reserve
===================================== */
.pen-wrap .pinfo {}

.pen-wrap .pinfo ul {}

.pen-wrap .pinfo ul:after {
    display: block;
    content: "";
    clear: both;
}

.pen-wrap .pinfo li {
    position: relative;
    float: left;
    width: 100%;
    box-sizing: border-box;
}

.pen-wrap .pinfo li.w50p {
    width: 50%;
}

.pen-wrap .pinfo li:nth-child(n + 2) {
    margin-top: 30px;
}

.pen-wrap .pinfo li .btxt {
    font-size: 16px;
    font-weight: 500;
    color: #222;
    letter-spacing: -0.03em;
    line-height: 1.2em;
}

.pen-wrap .pinfo li .stxt {
    margin-top: 5px;
    font-size: 16px;
    font-weight: 400;
    color: #717171;
    letter-spacing: -0.03em;
    line-height: 1.2em;
}

.pen-wrap .pinfo li .ctxt {
    margin-top: 5px;
    font-size: 14px;
    font-weight: 400;
    color: #c1c1c1;
    letter-spacing: -0.03em;
    line-height: 1.2em;
}

.pen-wrap .pinfo li .modify-btn {
    position: absolute;
    right: 0;
    top: 0;
    line-height: 1.3em;
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    font-weight: 400;
    color: #222;
    letter-spacing: -0.03em;
    border-bottom: 1px solid #222;
}

@media only screen and (max-width: 1260px) {}

@media only screen and (max-width: 999px) {
    .pen-wrap .pinfo li:nth-child(n + 2) {
        margin-top: 20px;
    }

    .pen-wrap .pinfo li .btxt {
        font-size: 16px;
    }

    .pen-wrap .pinfo li .stxt {
        font-size: 16px;
    }

    .pen-wrap .pinfo li .ctxt {
        font-size: 14px;
        color: var(--brand-main-color);
    }

    .pen-wrap .pinfo li .modify-btn {
        font-size: 14px;
    }

    .pen-wrap .pinfo.vline li:nth-child(n + 2) {
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid #dedede;
    }

    .pen-wrap .pinfo.vline li.rline {
        padding-left: 20px;
    }

    .pen-wrap .pinfo.vline li.rline:before {
        border-left: 1px solid #dedede;
        position: absolute;
        left: 0;
        top: 20px;
        height: calc(100% - 20px);
        display: block;
        content: "";
    }
}

@media only screen and (max-width: 680px) {}

@media only screen and (max-width: 480px) {}

.pen-wrap .rentry {}

.pen-wrap .rentry ul {}

.pen-wrap .rentry li {}

.pen-wrap .rentry li:nth-child(n + 2) {
    margin-top: 25px;
}

.pen-wrap .rentry li .btxt {
    font-size: 16px;
    font-weight: 500;
    color: #222;
    letter-spacing: -0.03em;
    line-height: 1.2em;
}

.pen-wrap .rentry li .chk-input {
    width: 100%;
}

.pen-wrap .rentry li .chk-input input {
    border: none;
    border-bottom: 1px solid #ddd;
    height: 40px;
    padding: 0;
    font-size: 16px;
}

.pen-wrap .rentry li.hide {
    display: none;
}

.pen-wrap .rentry li .field.phone {
    display: block;
}

.pen-wrap .rentry li .field.phone .chk-input input {
    padding-right: 120px;
}

.pen-wrap .rentry li .field.phone .cerfity-btn {
    width: 100px;
    height: 30px;
    position: absolute;
    right: 0;
    top: 2px;
    line-height: 30px;
    border-radius: 5px;
    background: #8b8b8b;
    color: #fff;
    font-size: 14px;
    letter-spacing: -0.03em;
    text-align: center;
    border: 0;
}

.pen-wrap .rentry li .field.phone .cerfity-btn:hover {
    background: #222;
}

.pen-wrap .rentry li .ex {
    display: none;
    font-size: 14px;
    font-weight: 400;
    color: #b3b2b2;
    letter-spacing: -0.03em;
    line-height: 1.2em;
    margin-top: 10px;
}

/* .pen-wrap .rentry li .ex.error{color:#d51515} */
@media only screen and (max-width: 1260px) {}

@media only screen and (max-width: 999px) {
    .pen-wrap .rentry li:nth-child(n + 2) {
        margin-top: 25px;
    }

    .pen-wrap .rentry li .btxt {
        font-size: 16px;
    }

    .pen-wrap .rentry li .chk-input input {
        font-size: 16px;
        height: 35px;
    }

    .pen-wrap .rentry li .field.phone .chk-input input {
        padding-right: 100px;
    }

    .pen-wrap .rentry li .field.phone .cerfity-btn {
        width: 90px;
        line-height: 28px;
        font-size: 14px;
        height: 28px;
        top: 0px;
    }

    .pen-wrap .rentry li .ex {
        display: none;
        font-size: 12px;
        margin-top: 5px;
    }
}

@media only screen and (max-width: 680px) {
    .pen-wrap .rentry li .chk-input input {
        height: 40px;
    }
}

@media only screen and (max-width: 480px) {}

.pen-wrap .sment {}

.pen-wrap .sment li {
    position: relative;
}

.pen-wrap .sment .hide {
    display: none;
}

.pen-wrap .sment .pay-con01 ul {}

.pen-wrap .sment .pay-con01 li {
    position: relative;
}

.pen-wrap .sment .pay-con01 li .btxt {
    font-size: 16px;
    font-weight: 400;
    color: #717171;
    letter-spacing: -0.03em;
    line-height: 30px;
}

.pen-wrap .sment .pay-con01 li .modify-btn {
    position: absolute;
    right: 0;
    top: 5px;
    line-height: 20px;
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    font-weight: 400;
    color: #222;
    letter-spacing: -0.03em;
    border-bottom: 1px solid #222;
}

@media only screen and (max-width: 1260px) {}

@media only screen and (max-width: 999px) {
    .pen-wrap .sment .pay-con01 li .btxt {
        font-size: 14px;
        line-height: 16px;
    }

    .pen-wrap .sment .pay-con01 li .modify-btn {
        font-size: 12px;
        line-height: 16px;
        top: 0;
    }
}

@media only screen and (max-width: 680px) {}

@media only screen and (max-width: 480px) {}

.pen-wrap .sment .pay-con02 li:nth-child(n + 2) {
    margin-top: 20px;
}

.pen-wrap .sment .pay-con02 li:nth-child(2) .modify-btn {
    top: 1px;
}

.pen-wrap .sment .pay-con02 li .btxt {
    line-height: 30px;
    font-size: 16px;
    font-weight: 400;
    color: #717171;
    letter-spacing: -0.03em;
    padding-left: 40px;
    background: url(/static/booking/img/content/ico-payc01.jpg) no-repeat left center;
}

.pen-wrap .sment .pay-con02 li .stxt {
    font-size: 16px;
    font-weight: 400;
    color: #222;
    letter-spacing: -0.03em;
    line-height: 1.3em;
}

.pen-wrap .sment .pay-con02 li .ctxt {
    margin-top: 7px;
    font-size: 16px;
    font-weight: 400;
    color: #717171;
    letter-spacing: -0.03em;
    line-height: 1.3em;
    /* padding-left:20px; background:url(/static/booking/img/content/ico-receipt.jpg) no-repeat left center; */
}

.pen-wrap .sment .pay-con02 li .ctxt span {
    text-decoration: underline;
    color: #222;
}

.pen-wrap .sment .pay-con02 li .modify-btn {
    position: absolute;
    right: 0;
    top: 5px;
    line-height: 20px;
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    font-weight: 400;
    color: #222;
    letter-spacing: -0.03em;
    border-bottom: 1px solid #222;
}

.pen-wrap .sment .pay-con02 li .chk-select {
    width: 100%;
    margin-top: 12px;
}

.pen-wrap .sment .pay-con02 li .chk-select select {
    border-radius: 6px;
    padding: 0 15px;
    font-size: 16px;
}

.pen-wrap .sment .pay-con02 li .chk-input {
    width: 100%;
    margin-top: 12px;
}

.pen-wrap .sment .pay-con02 li .chk-input input {
    border-radius: 6px;
    padding: 0 15px;
}

.pen-wrap .sment .pay-con03 li .btxt {
    line-height: 30px;
    font-size: 16px;
    font-weight: 400;
    color: #717171;
    letter-spacing: -0.03em;
    padding-left: 30px;
    background: url(/static/booking/img/content/ico-payc02.jpg) no-repeat left center;
}

.pen-wrap .sment .pay-con03 li .modify-btn {
    position: absolute;
    right: 0;
    top: 5px;
    line-height: 20px;
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    font-weight: 400;
    color: #222;
    letter-spacing: -0.03em;
    border-bottom: 1px solid #222;
}

.pen-wrap .sment .pay-con03 li .chk-select {
    width: 100%;
    margin-top: 12px;
}

.pen-wrap .sment .pay-con03 li .chk-select select {
    border-radius: 6px;
    padding: 0 15px;
}

.pen-wrap .sment .pay-con03 li .chk-check {
    margin-top: 20px;
}

.pen-wrap .sment .pay-con04 li .btxt {
    line-height: 30px;
    font-size: 16px;
    font-weight: 400;
    color: #717171;
    letter-spacing: -0.03em;
    padding-left: 40px;
    background: url(/static/booking/img/content/ico-payc03.jpg) no-repeat left center;
}

.pen-wrap .sment .pay-con04 li .modify-btn {
    position: absolute;
    right: 0;
    top: 5px;
    line-height: 20px;
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    font-weight: 400;
    color: #222;
    letter-spacing: -0.03em;
    border-bottom: 1px solid #222;
}

.pen-wrap .sment .pay-con05 li .btxt {
    line-height: 30px;
    font-size: 16px;
    font-weight: 400;
    color: #717171;
    letter-spacing: -0.03em;
    padding-left: 40px;
    background: url(/static/booking/img/content/ico-payc04.jpg) no-repeat left center;
}

.pen-wrap .sment .pay-con05 li .modify-btn {
    position: absolute;
    right: 0;
    top: 5px;
    line-height: 20px;
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    font-weight: 400;
    color: #222;
    letter-spacing: -0.03em;
    border-bottom: 1px solid #222;
}

.pen-wrap .sment .pay-con06 li .btxt {
    line-height: 30px;
    font-size: 16px;
    font-weight: 400;
    color: #717171;
    letter-spacing: -0.03em;
    padding-left: 40px;
    background: url(/static/booking/img/content/ico-payc05.png) no-repeat left center;
}

.pen-wrap .sment .pay-con06 li .modify-btn {
    position: absolute;
    right: 0;
    top: 5px;
    line-height: 20px;
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    font-weight: 400;
    color: #222;
    letter-spacing: -0.03em;
    border-bottom: 1px solid #222;
}

@media only screen and (max-width: 1260px) {}

@media only screen and (max-width: 999px) {
    .pen-wrap .sment .pay-con02 li .btxt {
        font-size: 16px;
        padding-left: 25px;
        background-size: 20px auto;
        line-height: 20px;
    }

    .pen-wrap .sment .pay-con02 li .stxt {
        font-size: 16px;
    }

    .pen-wrap .sment .pay-con02 li .ctxt {
        font-size: 14px;
        /* padding-left:18px;background-size:10px auto; */
    }

    .pen-wrap .sment .pay-con02 li .modify-btn {
        top: 0;
        line-height: 16px;
        font-size: 14px;
    }

    .pen-wrap .sment .pay-con03 li .btxt {
        font-size: 16px;
        padding-left: 25px;
        background-size: 20px auto;
        line-height: 20px;
    }

    .pen-wrap .sment .pay-con03 li .modify-btn {
        top: 0;
        line-height: 16px;
        font-size: 14px;
    }

    .pen-wrap .sment .pay-con03 li .chk-check {
        margin-top: 10px;
    }

    .pen-wrap .sment .pay-con04 li .btxt {
        font-size: 16px;
        padding-left: 32px;
        background-size: 20px auto;
        line-height: 30px;
    }

    .pen-wrap .sment .pay-con04 li .modify-btn {
        top: 7px;
        line-height: 16px;
        font-size: 14px;
    }

    .pen-wrap .sment .pay-con05 li .btxt {
        font-size: 16px;
        padding-left: 32px;
        background-size: 20px auto;
        line-height: 30px;
    }

    .pen-wrap .sment .pay-con05 li .modify-btn {
        top: 7px;
        line-height: 16px;
        font-size: 14px;
    }

    .pen-wrap .sment .pay-con06 li .btxt {
        font-size: 16px;
        padding-left: 32px;
        background-size: 20px auto;
        line-height: 30px;
    }

    .pen-wrap .sment .pay-con06 li .modify-btn {
        top: 7px;
        line-height: 16px;
        font-size: 14px;
    }
}

@media only screen and (max-width: 680px) {}

@media only screen and (max-width: 480px) {}

.pen-wrap .require h3 {
    margin-bottom: 20px;
}

.pen-wrap .require .stit {
    font-size: 16px;
    font-weight: 400;
    color: #717171;
    letter-spacing: -0.03em;
    line-height: 1.4em;
}

.pen-wrap .require .chk-input {
    width: 100%;
    margin-top: 25px;
}

.pen-wrap .refund {}

.pen-wrap .refund .txt {}

.pen-wrap .refund .txt p {
    font-size: 16px;
    font-weight: 400;
    color: #717171;
    letter-spacing: -0.03em;
    line-height: 1.4em;
}

.pen-wrap .refund .btns {
    text-align: right;
    margin-top: 40px;
}

.pen-wrap .refund .btns .detail-btn {
    line-height: 20px;
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    font-weight: 400;
    color: #222;
    letter-spacing: -0.03em;
    border-bottom: 1px solid #222;
}

.pen-wrap .mobile-btn {
    display: none;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    letter-spacing: -0.03em;
    line-height: 48px;
    border-radius: 8px;
    background: var(--brand-main-color);
    margin-top: 20px;
    text-align: center;
}

@media only screen and (max-width: 1260px) {}

@media only screen and (max-width: 999px) {
    .pen-wrap .require h3 {
        margin-bottom: 10px;
    }

    .pen-wrap .require .stit {
        font-size: 14px;
    }

    .pen-wrap .require .chk-input {
        margin-top: 15px;
    }

    .pen-wrap .require .chk-input textarea {
        font-size: 16px;
    }

    .pen-wrap .refund .txt p {
        font-size: 16px;
    }

    .pen-wrap .refund .btns {
        margin-top: 20px;
    }

    .pen-wrap .refund .btns .detail-btn {
        font-size: 14px;
        line-height: 16px;
    }

    .pen-wrap .mobile-btn {
        display: block;
    }

    .pen-wrap .mobile-btn.payment {
        width: 100%;
        height: 50px;
        font-size: 18px;
        margin-top: 20px;
        border: 0;
    }
}

@media only screen and (max-width: 680px) {
    .pen-wrap .require h3 {
        margin-bottom: 5px;
    }

    .pen-wrap .require .stit {
        font-size: 14px;
    }
}

@media only screen and (max-width: 480px) {}

.pen-wrap .reserve-ex {
    font-size: 12px;
    font-weight: 400;
    color: #222;
    letter-spacing: -0.03em;
    line-height: 1.3em;
}

.pen-wrap .reserve-ex span {
    text-decoration: underline;
}

.pen-wrap .vbtn {
    margin: 45px 0;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.pen-wrap .vbtn.no-bd {}

.pen-wrap .vbtn.last {
    border-bottom: none;
    margin-bottom: 0;
}

.pen-wrap .vbtn a {
    display: block;
    position: relative;
    line-height: 50px;
    padding-left: 30px;
    font-size: 16px;
    font-weight: 400;
    color: #222;
    letter-spacing: -0.03em;
}

.pen-wrap .vbtn a:after {
    width: 30px;
    height: 50px;
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    content: "";
    background: url(/static/booking/img/content/right-arrow.jpg) no-repeat center center;
    transform: scale(1);
    transition: transform 1s cubic-bezier(0.33, 0.02, 0, 0.93);
}

.pen-wrap .vbtn a:hover:after {
    transform: scale(1) translateX(10px);
}

.pen-wrap .vbtn a.room-view {
    background: url(/static/booking/img/content/ico-home.jpg) no-repeat left calc(50% - 1px);
}

.pen-wrap .vbtn a.reserve-cancel {
    background: url(/static/booking/img/content/ico-cancel.jpg) no-repeat left center;
}

.pen-wrap .vbtn a.account-copy {
    background: url(/static/booking/img/content/ico-account.jpg) no-repeat left center;
}

@media only screen and (max-width: 1260px) {}

@media only screen and (max-width: 999px) {
    .pen-wrap .vbtn {
        margin: 25px 0;
    }

    .pen-wrap .vbtn.no-bd {
        border-bottom: none;
    }

    .pen-wrap .vbtn a {
        font-size: 16px;
        line-height: 44px;
        padding-left: 22px;
        background-size: 14px auto !important;
    }

    .pen-wrap .vbtn a:after {
        width: 20px;
        height: 44px;
        background-size: 10px auto;
    }

    .pen-wrap .vbtn a:hover:after {
        transform: scale(1) translateX(5px);
    }
}

@media only screen and (max-width: 680px) {}

@media only screen and (max-width: 480px) {}

/* ======================================================
	#kakao-btn
=========================================================*/
.kakao-btn {
    z-index: 5004;
    right: -90px;
    width: 80px;
    height: 80px;
    overflow: hidden;
    border-radius: 100%;
    text-align: Center;
    background: url(/static/booking/img/sub/kakao-btn.jpg) no-repeat center center;
    background-size: 100% auto;
    bottom: 20px;
    text-transform: uppercase;
    color: #fff;
    position: fixed;
    -webkit-transition: right 0.3s ease-out;
    -moz-transition: right 0.3s ease-out;
    -o-transition: right 0.3s ease-out;
    transition: right 0.3s ease-out;
}

.kakao-btn.over {
    right: 20px;
}

@media only screen and (max-width: 999px) {
    .kakao-btn {
        width: 60px;
        height: 60px;
    }
}

@media only screen and (max-width: 680px) {
    .kakao-btn {
        width: 40px;
        height: 40px;
        bottom: 15px;
    }

    .kakao-btn.over {
        right: 15px;
    }
}

@media only screen and (max-width: 480px) {}

/* =====================================
	.layer-wrap
===================================== */
.layer-wrap.layer-ab {
    position: fixed;
    display: none;
    width: 94%;
    left: 50%;
    top: 50%;
    max-width: 500px;
    z-index: 5134;
    min-width: 340px;
    background: #fff;
    overflow-y: auto;
    border-radius: 12px;
    padding: 30px 30px;
    box-sizing: border-box;
    -webkit-transform: translate(-50%, -30%);
    -moz-transform: translate(-50%, -30%);
    -ms-transform: translate(-50%, -30%);
    -o-transform: translate(-50%, -30%);
    transform: translate(-50%, -30%);
    -webkit-transition: transform 0.3s ease-out;
    -moz-transition: transform 0.3s ease-out;
    -o-transition: transform 0.3s ease-out;
    transition: transform 0.3s ease-in-out;
}

.layer-wrap.layer-ab.read {
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.layer-wrap:not(.layer-ab) {
    position: fixed;
    display: none;
    overflow-x: hidden;
    z-index: 5134;
    min-width: 340px;
    left: 50%;
    top: 50%;
    width: 94%;
    max-width: 500px;
    background: #fff;
    border-radius: 12px;
    padding: 25px;
    box-sizing: border-box;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.layer-wrap.w560 {
    max-width: 500px;
}

.layer-wrap.w560 {
    max-width: 560px;
}

.layer-wrap.w600 {
    max-width: 600px;
}

.layer-wrap.w375 {
    max-width: 375px;
}

.layer-wrap.w730 {
    max-width: 730px;
}

.layer-wrap.w875 {
    max-width: 875px;
}

.layer-wrap.w100p {
    width: 100%;
    border-radius: 0;
    max-width: 100%;
}

@media only screen and (min-width: 681px) {
    .layer-wrap:not(.layer-ab, .copy, .share) {
        left: 50% !important;
    }
}

@media only screen and (max-width: 681px) {
    .layer-wrap:not(.layer-ab, .copy, .share) {
        padding: 25px 30px;
        border-radius: 10px;
        display: block !important;
        opacity: 1 !important;
        top: 0;
        left: 100%;
        max-height: 100%;
        overflow-y: auto;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-transition: left 0.3s ease-in-out;
        -moz-transition: left 0.3s ease-in-out;
        -o-transition: left 0.3s ease-in-out;
        transition: left 0.3s ease-in-out;
    }

    .layer-wrap.active:not(.layer-ab) {
        left: 0;
    }

    .layer-wrap.w500 {
        max-width: 100%;
    }

    .layer-wrap.w560 {
        max-width: 100%;
    }

    .layer-wrap.w600 {
        max-width: 100%;
    }

    .layer-wrap.w375 {
        max-width: 360px;
    }

    .layer-wrap.refund01 {
        width: 100%;
        max-width: none;
        top: 0;
        border-radius: 0;
        height: 100%;
        max-height: none;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    .layer-wrap.refund01.active {
        left: 0;
    }

    .layer-wrap.refund01 .is-top .close {
        background: url(/static/booking/img/layout/bt-prev.jpg) no-repeat left center;
    }

    .layer-wrap.refund02 {
        width: 100%;
        max-width: none;
        top: 0;
        border-radius: 0;
        height: 100%;
        max-height: none;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    .layer-wrap.refund02.active {
        left: 0;
    }

    .layer-wrap.refund02 .is-top .close {
        background: url(/static/booking/img/layout/bt-prev.jpg) no-repeat left center;
    }

    .layer-wrap.guide {
        width: 100%;
        max-width: none;
        top: 0;
        border-radius: 0;
        height: 100%;
        max-height: none;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    .layer-wrap.guide .is-top .close {
        background: url(/static/booking/img/layout/bt-prev.jpg) no-repeat left center;
    }

    .layer-wrap.provision {
        width: 100%;
        max-width: none;
        top: 0;
        border-radius: 0;
        height: 100%;
        max-height: none;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    .layer-wrap.provision .is-top .close {
        background: url(/static/booking/img/layout/bt-prev.jpg) no-repeat left center;
    }

    .layer-wrap.use {
        width: 100%;
        max-width: none;
        top: 0;
        border-radius: 0;
        height: 100%;
        max-height: none;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    .layer-wrap.use .is-top .close {
        background: url(/static/booking/img/layout/bt-prev.jpg) no-repeat left center;
    }

    .layer-wrap.review {
        width: 100%;
        max-width: none;
        top: 0;
        border-radius: 0;
        height: 100%;
        max-height: none;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    .layer-wrap.review .is-top .close {
        background: url(/static/booking/img/layout/bt-prev.jpg) no-repeat left center;
    }

    .layer-wrap.visPreview {
        width: 100%;
        max-width: none;
        top: 0;
        border-radius: 0;
        height: 100%;
        max-height: none;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    .layer-wrap.visPreview .is-top .close {
        background: url(/static/booking/img/layout/bt-prev.jpg) no-repeat left center;
    }

    .layer-wrap.visAll {
        width: 100%;
        max-width: none;
        top: 0;
        border-radius: 0;
        height: 100%;
        max-height: none;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    .layer-wrap.rooms {
        width: 100%;
        max-width: none;
        top: 0;
        border-radius: 0;
        height: 100%;
        max-height: none;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    .layer-wrap.rooms .is-top .close {
        background: url(/static/booking/img/layout/bt-prev.jpg) no-repeat left center;
    }

    .layer-wrap.reviewImg {
        width: 100%;
        max-width: none;
        top: 0;
        border-radius: 0;
        height: 100%;
        max-height: none;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    .layer-wrap.reviewImg .is-top .close {
        background: url(/static/booking/img/layout/bt-prev.jpg) no-repeat left center;
    }

    .layer-wrap.fact {
        width: 100%;
        max-width: none;
        top: 0;
        border-radius: 0;
        height: 100%;
        max-height: none;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    .layer-wrap.fact .is-top.no-pad {
        padding-top: 35px;
    }

    .layer-wrap.fact .is-top.no-pad .close {
        display: block;
        background: url(/static/booking/img/layout/bt-prev.jpg) no-repeat left center;
    }

    .layer-wrap.banner {
        width: 100%;
        max-width: none;
        top: 0;
        border-radius: 0;
        height: 100%;
        max-height: none;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    .layer-wrap.banner .is-top.no-pad {
        padding-top: 35px;
    }

    .layer-wrap.banner .is-top.no-pad .close {
        display: block;
        background: url(/static/booking/img/layout/bt-prev.jpg) no-repeat left center;
    }

    .layer-wrap.banner img {
        width: 100%;
    }

    .layer-wrap.reserveChk {
        width: 100%;
        max-width: none;
        top: 0;
        border-radius: 0;
        height: 100%;
        max-height: none;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    .layer-wrap.reserveChk .is-top.no-pad {
        padding-top: 35px;
    }

    .layer-wrap.reserveChk .is-top.no-pad .close {
        display: block;
        background: url(/static/booking/img/layout/bt-prev.jpg) no-repeat left center;
    }

    .layer-wrap.pcent {
        width: 100%;
        max-width: none;
        top: 0;
        border-radius: 0;
        height: 100%;
        max-height: none;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    .layer-wrap.pcent .is-top .close {
        background: url(/static/booking/img/layout/bt-prev.jpg) no-repeat left center;
    }

    .layer-wrap.payment {
        width: 100%;
        max-width: none;
        top: 0;
        border-radius: 0;
        height: 100%;
        max-height: none;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    .layer-wrap.payment .is-top.no-pad {
        padding-top: 35px;
    }

    .layer-wrap.payment .is-top.no-pad .close {
        display: block;
        background: url(/static/booking/img/layout/bt-prev.jpg) no-repeat left center;
    }

    .layer-wrap.receipt {
        width: 100%;
        max-width: none;
        top: 0;
        border-radius: 0;
        height: 100%;
        max-height: none;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    .layer-wrap.receipt .is-top.no-pad {
        padding-top: 35px;
    }

    .layer-wrap.receipt .is-top.no-pad .close {
        display: block;
        background: url(/static/booking/img/layout/bt-prev.jpg) no-repeat left center;
    }

    /* other pop */
    .layer-wrap.layer-ab {
        top: 0;
        height: calc(100% - 20px);
        left: 0;
        -webkit-transform: translate(0, 10%);
        -moz-transform: translate(0, 10%);
        -ms-transform: translate(0, 10%);
        -o-transform: translate(0, 10%);
        transform: translate(0, 10%);
    }

    .layer-wrap.layer-ab.read {
        -webkit-transform: translate(0, 20px);
        -moz-transform: translate(0, 20px);
        -ms-transform: translate(0, 20px);
        -o-transform: translate(0, 20px);
        transform: translate(0, 20px);
    }

    .layer-wrap.person .is-top.no-pad {
        padding-top: 35px;
    }

    .layer-wrap.person .is-top.no-pad .close {
        display: block;
    }

    .layer-wrap.option .is-top.no-pad {
        padding-top: 35px;
    }

    .layer-wrap.option .is-top.no-pad .close {
        display: block;
    }

    .layer-wrap.rule {
        width: 100%;
        max-width: none;
        top: 0;
        border-radius: 0;
        height: 100%;
        max-height: none;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

.layer-wrap.pcent {
    max-width: 400px;
    min-height: 390px;
}

.layer-wrap.reserveCancel03 {
    min-height: 420px;
}

.layer-wrap.policy {
    min-height: 420px;
}

.layer-wrap.refund01 {
    min-height: 680px;
}

.layer-wrap.refund02 {
    min-height: 420px;
}

.layer-wrap.reserveCancel01 {
    min-height: 600px;
}

.layer-wrap.guide {
    min-height: 580px;
}

.layer-wrap.reserveChk {
    padding: 40px;
}

@media only screen and (max-width: 680px) {
    .layer-wrap.pcent {
        max-width: 100%;
    }

    .layer-wrap.reserveChk {
        padding: 25px 30px;
    }
}

/* =====================================
	.layer-wrap.copy
===================================== */
.layer-wrap.copy {
    width: 360px;
    max-width: 360px;
    min-width: auto;
    background: rgba(0, 0, 0, 0.5) !important;
    padding: 17px 20px;
    left: 50% !important;
    border-radius: 0;
    text-align: center;
}

.layer-wrap.copy a {
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    letter-spacing: -0.03em;
    display: block;
}

@media only screen and (max-width: 680px) {
    .layer-wrap.copy {
        width: 260px !important;
        padding: 12px 15px;
        min-width: 300px !important;
        max-width: 300px !important;
    }

    .layer-wrap.copy a {
        font-size: 14px;
    }
}

/* =====================================
	.layer-wrap.share
===================================== */
.layer-wrap.share {
    width: 360px;
    background: rgba(0, 0, 0, 0.5) !important;
    padding: 17px 20px;
    left: 50% !important;
    border-radius: 0;
    text-align: center;
}

.layer-wrap.share a {
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    letter-spacing: -0.03em;
    display: block;
}

@media only screen and (max-width: 680px) {
    .layer-wrap.share {
        width: 300px !important;
        padding: 12px 15px;
        min-width: 300px !important;
        max-width: 300px !important;
    }

    .layer-wrap.share a {
        font-size: 14px;
    }
}

.layer-wrap .vline {
    position: relative;
    border-bottom: none;
    height: 5px;
    background: #ebebeb;
    width: calc(100% + 50px);
    margin: 20px 0;
    margin-left: -25px;
}

.layer-wrap .dline {
    position: relative;
    border-top: 1px solid #ddd;
    margin: 25px 0;
}

.layer-wrap .is-top {
    position: relative;
    padding-top: 45px;
}

.layer-wrap .is-top .close {
    width: 30px;
    height: 30px;
    position: absolute;
    left: 0;
    top: 0;
    background-image: url(/static/booking/img/sub/icon-cross.svg);
    background-size: contain;
}

.layer-wrap .is-top h2 {
    font-size: 26px;
    font-weight: 600;
    color: #222;
    line-height: 1.2em;
    letter-spacing: -0.03em;
}

.layer-wrap .is-top .stit {
    font-size: 14px;
    color: #717171;
    letter-spacing: -0.03em;
    line-height: 1.2em;
    margin-top: 10px;
}

.layer-wrap .is-top.no-pad {
    padding-top: 0;
}

.layer-wrap .is-top .state {
    position: absolute;
    right: 0;
    top: 0;
}

.layer-wrap .is-top .state ul {}

.layer-wrap .is-top .state ul:after {
    display: block;
    content: "";
    clear: both;
}

.layer-wrap .is-top .state ul li {
    border-radius: 8px;
    float: left;
    border: 1px solid #ddd;
    padding: 8px 12px;
    padding-right: 45px;
    min-width: 125px;
    box-sizing: border-box;
    max-width: 125px;
    position: relative;
}

.layer-wrap .is-top .state ul li:nth-child(1) {
    border-color: #333;
}

.layer-wrap .is-top .state ul li:nth-child(n + 2) {
    margin-left: 6px;
}

.layer-wrap .is-top .state ul li .btxt {
    font-size: 10px;
    font-weight: 400;
    color: #222;
    letter-spacing: -0.03em;
    line-height: 1.2em;
}

.layer-wrap .is-top .state ul li .stxt {
    font-size: 14px;
    font-weight: 400;
    color: #222;
    letter-spacing: -0.03em;
    line-height: 1.2em;
    margin-top: 5px;
}

.layer-wrap .is-top .state ul li .delete {
    width: 12px;
    height: 12px;
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -6px;
    background: url(/static/booking/img/sub/calendar-delete.jpg) no-repeat center center;
}

.layer-wrap .is-con {
    margin-top: 30px;
}

.layer-wrap .is-con h3 {
    font-size: 18px;
    font-weight: 600;
    color: #222;
    line-height: 1.2em;
    letter-spacing: -0.03em;
    margin-bottom: 10px;
}

@media only screen and (max-width: 999px) {
    .layer-wrap .is-top h2 {
        font-size: 26px;
    }

    .layer-wrap .is-top .state {
        display: none;
    }

    .layer-wrap .is-con h3 {
        font-size: 17px;
    }
}

@media only screen and (max-width: 680px) {
    .layer-wrap .is-top {
        padding-top: 35px;
    }

    .layer-wrap .is-top h2 {
        font-size: 26px;
    }

    .layer-wrap .is-top .stit {
        font-size: 14px;
    }

    .layer-wrap .is-con {
        margin-top: 20px;
    }

    .layer-wrap.use .is-con {
        padding-top: 20px;
        border-top: 1px solid #ddd;
    }

    .layer-wrap.banner .is-con {
        padding-top: 10px;
        border-top: 1px solid #ddd;
    }

    .layer-wrap.guide .is-con {
        padding-top: 20px;
        border-top: 1px solid #ddd;
    }

    .layer-wrap.rooms .is-con {
        padding-top: 20px;
        border-top: 1px solid #ddd;
    }

    .layer-wrap.use .is-con {
        padding-top: 20px;
        border-top: 1px solid #ddd;
    }

    .layer-wrap.fact .is-con {
        padding-top: 20px;
        border-top: 1px solid #ddd;
    }

    .layer-wrap .is-con h3 {
        font-size: 20px;
    }

    .layer-wrap .is-top .state {
        display: none;
    }
}

.layer-wrap .vscrolls.h650 {
    max-height: calc(650px + 18px);
    width: calc(100% + 15px);
    padding-right: 15px;
    box-sizing: border-box;
}

.layer-wrap .vscrolls.h520 {
    max-height: calc(520px + 18px);
    width: calc(100% + 15px);
    padding-right: 15px;
    box-sizing: border-box;
}

.layer-wrap .vscrolls.h350 {
    max-height: calc(350px + 18px);
    width: calc(100% + 15px);
    padding-right: 15px;
    box-sizing: border-box;
}

.layer-wrap .vscrolls.h200 {
    max-height: calc(200px);
    width: calc(100% + 15px);
    padding-right: 15px;
    box-sizing: border-box;
}

.layer-wrap .vscrolls.h220 {
    max-height: calc(220px);
    width: calc(100% + 15px);
    padding-right: 15px;
    box-sizing: border-box;
}

.layer-wrap .vscrolls.h150 {
    max-height: calc(150px);
    width: calc(100% + 15px);
    padding-right: 15px;
    box-sizing: border-box;
}

@media only screen and (max-width: 680px) {
    .layer-wrap .vscrolls {
        max-height: none !important;
        padding: 0 !important;
        width: auto !important;
    }
}

.layer-wrap .price {
    position: relative;
    padding-left: 220px;
}

.layer-wrap .price .img {
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    border-radius: 10px;
    overflow: hidden;
}

.layer-wrap .price .img img {
    width: 100%;
    height: 140px;
    object-fit: cover;
}

.layer-wrap .price .txt {
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.layer-wrap .price .vc {
    max-width: 100%;
    position: relative;
    text-align: left;
    display: inline-block;
    vertical-align: top;
}

.layer-wrap .price .btxt {
    font-size: 18px;
    font-weight: 500;
    color: #222;
    letter-spacing: -0.03em;
    line-height: 1.4em;
}

.layer-wrap .price .stxt {
    font-size: 14px;
    font-weight: 400;
    color: #717171;
    letter-spacing: -0.03em;
    line-height: 1.2em;
    margin-top: 10px;
}

@media only screen and (max-width: 999px) {
    .layer-wrap .price {
        padding-left: 190px;
    }

    .layer-wrap .price .img {
        width: 170px;
    }

    .layer-wrap .price .img img {
        height: 120px;
    }

    .layer-wrap .price .txt {
        height: 120px;
        justify-content: left;
        text-align: left;
    }

    .layer-wrap .price .btxt {
        font-size: 16px;
    }

    .layer-wrap .price .stxt {
        font-size: 16px;
    }
}

@media only screen and (max-width: 680px) {
    .layer-wrap .price {
        padding-left: 160px;
    }

    .layer-wrap .price .img {
        width: 140px;
    }

    .layer-wrap .price .img img {
        height: 100px;
    }

    .layer-wrap .price .btxt {
        font-size: 16px;
    }

    .layer-wrap .price .txt {
        height: 100px;
    }
}

@media only screen and (max-width: 480px) {
    .layer-wrap .price {
        padding-left: 140px;
    }

    .layer-wrap .price .img {
        width: 120px;
    }

    .layer-wrap .price .img img {
        height: 100px;
    }

    .layer-wrap .price .stxt {
        margin-top: 5px;
    }
}

.layer-wrap .rlist {
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid #d0d0d0;
}

.layer-wrap .rlist ul {}

.layer-wrap .rlist li {
    position: relative;
}

.layer-wrap .rlist li:nth-child(n + 2) {
    margin-top: 20px;
}

.layer-wrap .rlist li .btxt {
    font-size: 16px;
    font-weight: 400;
    color: #717171;
    letter-spacing: -0.02em;
    line-height: 1.3em;
}

.layer-wrap .rlist li .stxt {
    font-size: 14px;
    font-weight: 400;
    color: #717171;
    letter-spacing: -0.02em;
    line-height: 1.3em;
    margin-top: 5px;
}

.layer-wrap .rlist li .rtxt {
    font-size: 16px;
    font-weight: 400;
    color: #717171;
    letter-spacing: -0.02em;
    line-height: 1.3em;
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.layer-wrap .rlist li:last-child {
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid #d0d0d0;
}

.layer-wrap .rlist li:last-child .btxt {
    color: #222;
}

.layer-wrap .rlist li:last-child .rtxt {
    color: #222;
}

@media only screen and (max-width: 999px) {
    .layer-wrap .rlist {
        margin-top: 20px;
        padding-top: 20px;
    }

    .layer-wrap .rlist li:nth-child(n + 2) {
        margin-top: 16px;
    }

    .layer-wrap .rlist li .btxt {
        font-size: 16px;
    }

    .layer-wrap .rlist li .stxt {
        font-size: 16px;
        margin-top: 2px;
    }

    .layer-wrap .rlist li .rtxt {
        font-size: 16px;
    }

    .layer-wrap .rlist li:last-child {
        margin-top: 20px;
        padding-top: 20px;
    }
}

@media only screen and (max-width: 680px) {}

.layer-wrap .policy h3 {}

.layer-wrap .policy table {}

.layer-wrap .policy table tbody td {
    font-size: 16px;
    color: #717171;
    letter-spacing: -0.02em;
    line-height: 1.2em;
    text-align: left;
    padding: 25px 0;
}

.layer-wrap .policy table tbody td span {
    font-size: 12px;
    font-weight: 400;
    display: block;
    line-height: 1.2em;
}

.layer-wrap .policy table tbody tr:nth-child(n + 2) td {
    border-top: 1px solid #d0d0d0;
}

@media only screen and (max-width: 999px) {
    .layer-wrap .policy table tbody td {
        padding: 20px 0;
        font-size: 14px;
    }

    .layer-wrap .policy table tbody td.days {
        font-size: 18px;
        font-weight: 600;
    }
}

@media only screen and (max-width: 680px) {
    .layer-wrap .policy {
        padding-top: 20px;
    }

    .layer-wrap .policy {
        padding-bottom: 25px;
    }
}

.layer-wrap.reserveChk .is-top .close {
    display: none;
}

.layer-wrap .reserve.cancel {}

.layer-wrap .reserve.cancel .sel ul {}

.layer-wrap .reserve.cancel .sel li {
    border-bottom: 1px solid #d0d0d0;
}

.layer-wrap .reserve.cancel .sel li:nth-child(n + 2) {
    margin-top: 0;
}

.layer-wrap .reserve.cancel .sel li a {
    display: block;
    position: relative;
    font-size: 16px;
    letter-spacing: -0.03em;
    line-height: 60px;
    color: #222;
}

.layer-wrap .reserve.cancel .sel li a:after {
    position: absolute;
    right: 5px;
    top: 0;
    width: 10px;
    height: 100%;
    background: url(/static/booking/img/content/more-arrow.jpg) no-repeat right 50%;
    display: block;
    content: "";
    transform: scale(1);
    transition: transform 1s cubic-bezier(0.33, 0.02, 0, 0.93);
}

.layer-wrap .reserve.cancel .sel li.active a {
    color: var(--brand-main-color);
}

.layer-wrap .reserve.cancel .btns {
    margin-top: 50px;
    text-align: center;
}

.layer-wrap .reserve.cancel .btns .cancel-btn {
    font-size: 16px;
    line-height: 48px;
    width: 320px;
    border-radius: 6px;
    display: inline-block;
    vertical-align: top;
    font-weight: 400;
    color: #fff;
    letter-spacing: -0.03em;
    background: #8b8b8b;
}

.layer-wrap .reserve.cancel .btns .cancel-btn:hover {
    background: #222;
}

.layer-wrap .reserve.cancel .refund {
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid #d0d0d0;
}

.layer-wrap .reserve.cancel .refund h3 {}

.layer-wrap .reserve.cancel .refund .txt {}

.layer-wrap .reserve.cancel .rinfo .txt p,
.layer-wrap .reserve.cancel .refund .txt p {
    font-size: 16px;
    font-weight: 400;
    color: #717171;
    line-height: 1.5em;
    letter-spacing: -0.03em;
}

.layer-wrap .reserve.cancel .rinfo ul {
    padding-top: 10px;
    margin-bottom: 10px;
}

.layer-wrap .reserve.cancel .rinfo ul:after {
    display: block;
    content: "";
    clear: both;
}

.layer-wrap .reserve.cancel .rinfo li {
    position: relative;
    text-align: right;
}

.layer-wrap .reserve.cancel .rinfo li:nth-child(n + 2) {
    margin-top: 20px;
}

.layer-wrap .reserve.cancel .rinfo li .btxt {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 16px;
    font-weight: 400;
    color: #222;
    letter-spacing: -0.03em;
    line-height: 1.2em;
}

.layer-wrap .reserve.cancel .rinfo li .stxt {
    font-size: 16px;
    font-weight: 400;
    color: #222;
    letter-spacing: -0.03em;
    line-height: 1.2em;
}

.layer-wrap .reserve.cancel .rinfo li:last-child .btxt {
    color: #717171;
}

.layer-wrap .reserve.cancel .rinfo li:last-child .stxt {
    color: #717171;
}

.layer-wrap .reserve.cancel .date {}

.layer-wrap .reserve.cancel .date dl {}

.layer-wrap .reserve.cancel .date dt {
    font-size: 18px;
    font-weight: 400;
    color: #222;
    letter-spacing: -0.03em;
    line-height: 1.2em;
    margin-bottom: 20px;
}

.layer-wrap .reserve.cancel .date dd {
    position: relative;
    text-align: right;
    border-top: 1px solid #d0d0d0;
    border-bottom: 1px solid #d0d0d0;
    padding: 20px 0;
}

.layer-wrap .reserve.cancel .date dd .btxt {
    font-size: 16px;
    font-weight: 400;
    color: #222;
    letter-spacing: -0.03em;
    line-height: 20px;
    position: absolute;
    left: 0;
    top: 20px;
}

.layer-wrap .reserve.cancel .date dd .stxt {
    font-size: 14px;
    font-weight: 400;
    color: #717171;
    letter-spacing: -0.03em;
    line-height: 20px;
}

.layer-wrap .reserve.cancel .ex {
    font-size: 14px;
    color: #222;
    letter-spacing: -0.03em;
    line-height: 1.3em;
    margin-top: 20px;
}

@media only screen and (max-width: 999px) {
    .layer-wrap .reserve.cancel .sel ul {}

    .layer-wrap .reserve.cancel .sel li a {
        font-size: 16px;
        line-height: 50px;
    }

    .layer-wrap .reserve.cancel .sel li a:after {
        background-size: 8px auto;
    }

    .layer-wrap .reserve.cancel .rinfo,
    .layer-wrap .reserve.cancel .refund {
        margin-top: 20px;
        padding-top: 20px;
    }

    .layer-wrap .reserve.cancel .rinfo .txt p,
    .layer-wrap .reserve.cancel .refund .txt p {
        font-size: 16px;
    }

    .layer-wrap .reserve.cancel .rinfo li:nth-child(n + 2) {
        margin-top: 16px;
    }

    .layer-wrap .reserve.cancel .rinfo li .btxt {
        font-size: 16px;
    }

    .layer-wrap .reserve.cancel .rinfo li .stxt {
        font-size: 16px;
    }

    .layer-wrap .reserve.cancel .date dt {
        font-size: 16px;
    }

    .layer-wrap .reserve.cancel .date dd {
        padding: 17px 0;
    }

    .layer-wrap .reserve.cancel .date dd .btxt {
        font-size: 14px;
        top: 17px;
    }

    .layer-wrap .reserve.cancel .date dd .stxt {
        font-size: 12px;
    }

    .layer-wrap .reserve.cancel .ex {
        font-size: 12px;
        margin-top: 10px;
    }

    .layer-wrap .reserve.cancel .btns {
        margin-top: 100px;
    }

    .layer-wrap .reserve.cancel .btns .cancel-btn {
        display: block;
        width: auto;
        line-height: 42px;
        font-size: 14px;
    }
}

@media only screen and (max-width: 680px) {
    .layer-wrap .reserve.cancel .sel ul {}
}

.layer-wrap .guide {}

.layer-wrap .guide .txt {}

.layer-wrap .guide .txt p {
    font-size: 16px;
    font-weight: 400;
    color: #717171;
    line-height: 1.5em;
    letter-spacing: -0.03em;
}

.layer-wrap .guide .ov {}

.layer-wrap .guide .vscrolls {
    max-height: 530px;
    padding-right: 25px;
    box-sizing: border-box;
}

.layer-wrap .guide .vscrolls p {
    font-size: 16px;
    font-weight: 400;
    color: #717171;
    line-height: 1.5em;
    letter-spacing: -0.03em;
}

.layer-wrap .guide .vscrolls p:nth-child(n + 2) {
    margin-top: 15px;
}

/* .layer-wrap .guide .vscrolls > .scroll-element.scroll-y {width:5px; right:8px; top:10px; max-height:calc(100% - 20px)} */
@media only screen and (max-width: 999px) {
    .layer-wrap .guide .txt p {
        font-size: 14px;
    }

    .layer-wrap .guide .vscrolls {
        border: 0;
        padding: 0;
        border-radius: 0;
    }

    .layer-wrap .guide .vscrolls p {
        font-size: 16px;
        color: #222;
    }
}

@media only screen and (max-width: 680px) {}

.layer-wrap .use {
    padding-bottom: 25px;
}

.layer-wrap .use .txt {}

.layer-wrap .use .txt p {
    font-size: 16px;
    font-weight: 400;
    color: #717171;
    line-height: 1.5em;
    letter-spacing: -0.03em;
}

.layer-wrap .use .txt p:nth-child(n + 2) {
    margin-top: 3px;
}

@media only screen and (max-width: 999px) {
    .layer-wrap .use .txt p {
        font-size: 16px;
    }
}

.layer-wrap .banner {
    height: 650px;
    overflow-y: scroll;
    padding-bottom: 25px;
}

.layer-wrap .banner .txt {}

.layer-wrap .banner .txt p {
    font-size: 16px;
    font-weight: 400;
    color: #717171;
    line-height: 1.5em;
    letter-spacing: -0.03em;
}

.layer-wrap .banner img {
    width: 100%;
}

.layer-wrap .banner .txt p:nth-child(n + 2) {
    margin-top: 3px;
}

@media only screen and (max-width: 999px) {
    .layer-wrap .banner .txt p {
        font-size: 16px;
    }
}



.layer-wrap .pcent ul {
    margin-bottom: 40px;
    padding-bottom: 25px;
}

.layer-wrap .pcent ul:nth-child(n+2) {
    margin-top: 20px;
}

.layer-wrap .pcent ul.pay_price_info li:first-child {
    margin-bottom: 40px;
    padding-bottom: 25px;
}

.layer-wrap .pcent ul:after {
    display: block;
    content: "";
    clear: both;
}

.layer-wrap .pcent li {
    position: relative;
    text-align: right;
}

.layer-wrap .pcent li:nth-child(n + 2) {
    margin-top: 20px;
}

.layer-wrap .pcent li .btxt {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 16px;
    font-weight: 400;
    color: #717171;
    letter-spacing: -0.03em;
    line-height: 1.2em;
}

.layer-wrap .pcent li .stxt {
    font-size: 16px;
    font-weight: 400;
    color: #717171;
    letter-spacing: -0.03em;
    line-height: 1.2em;
}

.layer-wrap .pcent li:first-child .btxt,
.layer-wrap .pcent li.summary .btxt {
    font-size: 18px;
    color: #222;
    font-weight: 500;
}

.layer-wrap .pcent li:first-child .stxt,
.layer-wrap .pcent li.summary .stxt {
    font-size: 18px;
    color: #222;
    font-weight: 500;
}

@media only screen and (max-width: 999px) {
    .layer-wrap .pcent {
        padding-top: 20px;
        border-top: 1px solid #ddd;
    }

    .layer-wrap .pcent ul {
        margin-bottom: 40px;
    }

    .layer-wrap .pcent ul.pay_price_info li:first-child {
        margin-bottom: 40px;
        padding-bottom: 25px;
    }

    .layer-wrap .pcent li:nth-child(n + 2) {
        margin-top: 16px;
    }

    .layer-wrap .pcent li .btxt {
        font-size: 16px;
    }

    .layer-wrap .pcent li .stxt {
        font-size: 16px;
    }

    .layer-wrap .pcent li:first-child .btxt,
    .layer-wrap .pcent li.summary .btxt {
        font-size: 16px;
        font-weight: 700;
    }

    .layer-wrap .pcent li:first-child .stxt,
    .layer-wrap .pcent li.summary .stxt {
        font-size: 16px;
        font-weight: 700;
    }
}

@media only screen and (max-width: 680px) {
    .layer-wrap .pcent li .stxt {
        font-size: 16px;
    }
}

.layer-wrap.payment .is-top .close {
    display: none;
}

.layer-wrap .payment {
    padding-bottom: 25px;
}

.layer-wrap .payment li {
    padding: 22px 10px;
    border-bottom: 1px solid #ddd;
}

.layer-wrap .payment li .chk-radio {
    display: block;
}

.layer-wrap .payment li .chk-radio input[type="radio"]+label {
    font-size: 18px;
}

.layer-wrap.person .is-top .close {
    display: none;
}

.layer-wrap .person ul {}

.layer-wrap .person li {
    position: relative;
    border-bottom: 1px solid #d0d0d0;
    padding: 20px 0;
}

.layer-wrap .person li .btxt {
    font-size: 16px;
    font-weight: 400;
    color: #222;
    letter-spacing: -0.03em;
    line-height: 1.3em;
}

.layer-wrap .person li .stxt {
    font-size: 14px;
    font-weight: 400;
    color: #717171;
    letter-spacing: -0.03em;
    line-height: 1.3em;
    margin-top: 7px;
}

.layer-wrap .person .nums-ctrl {
    position: absolute;
    right: 0;
    top: 50%;
    font-size: 0;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.layer-wrap .person .nums-ctrl {}

.layer-wrap .person .nums-ctrl .minus {
    width: 25px;
    height: 25px;
    display: inline-block;
    vertical-align: top;
    border: none;
    background: url(/static/booking/img/sub/ico-minus.jpg) no-repeat center center;
    background-size: 100% auto;
}

.layer-wrap .person .nums-ctrl input {
    margin: 0 7px;
    height: 25px;
    box-sizing: border-box;
    width: 40px;
    border-radius: 5px;
    border: none;
    color: #222;
    font-size: 16px;
    text-align: center;
    font-weight: 600;
}

.layer-wrap .person .nums-ctrl .plus {
    width: 25px;
    height: 25px;
    display: inline-block;
    vertical-align: top;
    border: none;
    background: url(/static/booking/img/sub/ico-plus.jpg) no-repeat center center;
    background-size: 100% auto;
}

.layer-wrap .person .btns {
    margin-top: 25px;
    text-align: right;
}

.layer-wrap .person .btns .close {
    margin-left: 16px;
    background: #8b8b8b;
    border-radius: 5px;
    line-height: 30px;
    width: 52px;
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    text-align: center;
}

.layer-wrap .person .btns .close:hover {
    background: #222;
}

.layer-wrap .person .btns .save {
    margin-left: 16px;
    background: #8b8b8b;
    border-radius: 5px;
    line-height: 30px;
    width: 52px;
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    text-align: center;
    border: 0;
}

.layer-wrap .person .btns .save:hover {
    background: #222;
}

@media only screen and (max-width: 999px) {
    .layer-wrap .payment li {
        padding: 15px 5px;
    }

    .layer-wrap .person li {
        padding: 15px 0;
    }

    .layer-wrap .person li .btxt {
        font-size: 16px;
        font-weight: 500;
    }

    .layer-wrap .person li .stxt {
        font-size: 14px;
    }

    .layer-wrap .person .nums-ctrl .minus {
        width: 20px;
        height: 20px;
    }

    .layer-wrap .person .nums-ctrl input {
        margin: 0 5px;
        height: 20px;
        width: 30px;
        font-size: 14px;
    }

    .layer-wrap .person .nums-ctrl .plus {
        width: 20px;
        height: 20px;
    }

    .layer-wrap .person .btns {
        margin-top: 20px;
    }

    .layer-wrap .person .btns .close {
        display: none;
    }

    .layer-wrap .person .btns .save {
        line-height: 42px;
        display: block;
        width: 100%;
        margin: 0;
        border: 0;
    }
}

@media only screen and (max-width: 680px) {}

.layer-wrap.option .is-top .close {
    display: none;
}

.layer-wrap .option {}

.layer-wrap .option ul {}

.layer-wrap .option li {
    position: relative;
    padding: 20px 0;
}

.layer-wrap .option li:nth-child(n + 2) {
    border-top: 1px solid #ddd;
}

.layer-wrap .option li .txt {
    position: relative;
}

.layer-wrap .option li .btxt {
    font-size: 16px;
    font-weight: 400;
    color: #222;
    letter-spacing: -0.03em;
    line-height: 1.3em;
}

.layer-wrap .option li .ztxt {
    font-size: 14px;
    color: #717171;
    line-height: 1.3em;
    margin-bottom: 20px;
    margin-top: 3px;
}

.layer-wrap .option li .stxt {
    font-size: 14px;
    font-weight: 400;
    color: #717171;
    letter-spacing: -0.03em;
    line-height: 1.3em;
    margin-top: 7px;
}

.layer-wrap .option li .ctxt {
    font-size: 14px;
    font-weight: 400;
    color: #717171;
    letter-spacing: -0.03em;
    line-height: 1.3em;
    margin-top: 20px;
    position: relative;
}

.layer-wrap .option li .ctxt span {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 16px;
    font-weight: 400;
    color: #222;
    letter-spacing: -0.03em;
    line-height: 1.3em;
}

.layer-wrap .option .nums-ctrl {
    position: absolute;
    right: 0;
    bottom: -5px;
    font-size: 0;
}

.layer-wrap .option .nums-ctrl {}

.layer-wrap .option .nums-ctrl .minus {
    width: 25px;
    height: 25px;
    display: inline-block;
    vertical-align: top;
    border: none;
    background: url(/static/booking/img/sub/ico-minus.jpg) no-repeat center center;
    background-size: 100% auto;
}

.layer-wrap .option .nums-ctrl input {
    margin: 0 7px;
    height: 25px;
    box-sizing: border-box;
    width: 40px;
    border-radius: 5px;
    border: none;
    color: #222;
    font-size: 16px;
    text-align: center;
    font-weight: 600;
}

.layer-wrap .option .nums-ctrl .plus {
    width: 25px;
    height: 25px;
    display: inline-block;
    vertical-align: top;
    border: none;
    background: url(/static/booking/img/sub/ico-plus.jpg) no-repeat center center;
    background-size: 100% auto;
}

.layer-wrap .option .btns {
    margin-top: 25px;
    text-align: right;
}

.layer-wrap .option .btns .close {
    background: #8b8b8b;
    border-radius: 5px;
    line-height: 30px;
    width: 52px;
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    text-align: center;
    border: 0;
}

.layer-wrap .option .btns .close:hover {
    background: #222;
}

@media only screen and (max-width: 999px) {
    .layer-wrap .option li {
        padding: 15px 0;
    }

    .layer-wrap .option li .btxt {
        font-size: 16px;
        font-weight: 500;
    }

    .layer-wrap .option li .stxt {
        font-size: 16px;
    }

    .layer-wrap .option li .ctxt {
        font-size: 16px;
        margin-top: 15px;
    }

    .layer-wrap .option li .ctxt span {
        font-size: 16px;
    }

    .layer-wrap .option .nums-ctrl .minus {
        width: 20px;
        height: 20px;
    }

    .layer-wrap .option .nums-ctrl input {
        margin: 0 5px;
        height: 20px;
        width: 30px;
        font-size: 16px;
    }

    .layer-wrap .option .nums-ctrl .plus {
        width: 20px;
        height: 20px;
    }

    .layer-wrap .option .btns {
        margin-top: 20px;
    }

    .layer-wrap .option .btns .close {
        width: 100%;
        display: block;
        line-height: 40px;
        border: 0;
    }
}

@media only screen and (max-width: 680px) {}

.layer-wrap.receipt .is-top .close {
    display: none;
}

.layer-wrap .receipt {}

.layer-wrap .receipt ul {}

.layer-wrap .receipt li {
    position: relative;
}

.layer-wrap .receipt li:nth-child(n + 2) {
    margin-top: 30px;
}

.layer-wrap .receipt li .chk-radio input[type="radio"]+label {
    font-size: 16px;
}

.layer-wrap .receipt li .field {
    display: block;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 10px;
}

.layer-wrap .receipt li .field .chk-select {
    width: 100%;
}

.layer-wrap .receipt li .field .chk-select select {
    border: none;
    padding: 0 15px;
    font-size: 16px;
}

.layer-wrap .receipt li .field .chk-input {
    width: 100%;
    border-top: 1px solid #d0d0d0;
}

.layer-wrap .receipt li .field .chk-input input {
    border: none;
    padding: 0 15px;
    font-size: 16px;
}

.layer-wrap .receipt li .ex {
    margin-top: 10px;
    font-size: 14px;
    letter-spacing: -0.03em;
    color: #717171;
    line-height: 1.3em;
    padding-left: 8px;
    position: relative;
}

.layer-wrap .receipt li .ex:before {
    width: 2px;
    height: 2px;
    background: #717171;
    position: absolute;
    left: 0;
    top: 7px;
    display: block;
    content: "";
}

.layer-wrap .receipt .btns {
    margin-top: 25px;
}

.layer-wrap .receipt .btns .save {
    width: 100%;
    font-size: 16px;
    line-height: 40px;
    display: block;
    border-radius: 6px;
    text-align: center;
    font-weight: 400;
    color: #fff;
    letter-spacing: -0.03em;
    background: #8b8b8b;
    border: 0;
}

.layer-wrap .receipt .btns a:hover {
    background: #222;
}

@media only screen and (max-width: 999px) {
    .layer-wrap .receipt li .ex {
        margin-top: 6px;
    }

    .layer-wrap .receipt .btns a {
        line-height: 40px;
        font-size: 14px;
    }
}

@media only screen and (max-width: 680px) {}

.layer-wrap .provision {}

.layer-wrap .provision .vscrolls {
    max-height: 520px;
    padding-right: 25px;
    box-sizing: border-box;
}

.layer-wrap .provision .vscrolls p {
    font-size: 14px;
    font-weight: 400;
    color: #717171;
    line-height: 1.5em;
    letter-spacing: -0.03em;
}

.layer-wrap .provision .vscrolls .gap25 {
    height: 25px;
}

/* .layer-wrap .provision .vscrolls > .scroll-element.scroll-y {width:5px; right:8px; top:10px; max-height:calc(100% - 20px)} */
@media only screen and (max-width: 999px) {
    .layer-wrap .provision .vscrolls .gap25 {
        height: 15px;
    }

    .layer-wrap .provision {
        border: 0;
        padding: 0;
        border-radius: 0;
        position: absolute !important;
        left: 25px;
        width: calc(100% - 50px) !important;
        top: 100px;
        box-sizing: border-box;
        height: calc(100% - 125px) !important;
        overflow: hidden;
    }

    .layer-wrap .provision .vscrolls {
        position: absolute;
        left: 0;
        top: 0;
        width: 100% !important;
        padding-right: 15px !important;
        box-sizing: border-box;
        max-height: 100% !important;
        height: 100% !important;
        overflow-y: auto;
        word-break: break-all;
    }

    .layer-wrap .provision .vscrolls p {
        font-size: 16px;
    }
}

@media only screen and (max-width: 680px) {}

.layer-wrap.calendars .is-top .close {
    display: none;
}

.layer-wrap .calendars {
    padding-top: 10px;
}

.layer-wrap .calendars .btns {
    margin-top: 25px;
    text-align: right;
}

.layer-wrap .calendars .btns .reset-btn {
    display: inline-block;
    vertical-align: top;
    line-height: 30px;
    font-size: 14px;
    font-weight: 400;
    color: #222;
    text-decoration: underline;
}

.layer-wrap .calendars .btns .close {
    margin-left: 16px;
    background: #8b8b8b;
    border-radius: 5px;
    line-height: 30px;
    width: 52px;
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    text-align: center;
}

.layer-wrap .calendars .btns .close:hover {
    background: #222;
}

.layer-wrap .calendars .btns .save {
    margin-left: 16px;
    background: #8b8b8b;
    border-radius: 5px;
    line-height: 30px;
    width: 52px;
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    text-align: center;
    border: 0;
}

.layer-wrap .calendars .btns .save:hover {
    background: #222;
}

@media only screen and (max-width: 999px) {
    .layer-wrap.calendars .is-top {
        padding-top: 30px;
    }

    .layer-wrap.calendars .is-top .close {
        display: block;
    }

    .layer-wrap .calendars .btns {
        margin-top: 20px;
    }

    .layer-wrap .calendars .btns .reset-btn {
        font-size: 12px;
        position: absolute;
        right: 25px;
        top: 25px;
    }

    .layer-wrap .calendars .btns .close {
        display: none;
    }

    .layer-wrap .calendars .btns .save {
        display: block;
        width: 100%;
        line-height: 42px;
        margin: 0;
    }
}

.layer-wrap .fact ul {}

.layer-wrap .fact ul:after {
    display: block;
    content: "";
    clear: both;
}

.layer-wrap .fact li {
    box-sizing: border-box;
    position: relative;
    padding: 22px 5px;
    padding-left: 47px;
}

.layer-wrap .fact li .ico {
    position: absolute;
    left: 5px;
    top: 22px;
    width: 26px;
}

.layer-wrap .fact li .ico img {
    width: 100%;
}

.layer-wrap .fact li .txt {
    font-size: 16px;
    font-weight: 400;
    color: #222;
    letter-spacing: -0.03em;
    line-height: 26px;
}

.layer-wrap .reserve ul {}

.layer-wrap .reserve li {}

.layer-wrap .reserve li:nth-child(n + 2) {
    margin-top: 20px;
}

.layer-wrap .reserve .chk-input {
    width: 100%;
}

.layer-wrap .reserve .chk-input input {
    border: none;
    font-size: 14px;
    border-bottom: 1px solid #d0d0d0;
    padding: 0;
    height: 35px;
}

.layer-wrap .reserve .chk-input input.error {
    color: #ff0000;
    border-bottom: 1px solid #ff0000;
}

.layer-wrap .reserve .chk-input input.error::placeholder {
    color: #ff0000 !important;
}

.layer-wrap .reserve .chk-input input.error:-ms-input-placeholder {
    color: #ff0000 !important;
}

.layer-wrap .reserve .chk-input input.error::-ms-input-placeholder {
    color: #ff0000 !important;
}

.layer-wrap .reserve .reserve-enter {
    margin-top: 25px;
    font-size: 16px;
    line-height: 48px;
    display: block;
    border-radius: 6px;
    text-align: center;
    vertical-align: top;
    font-weight: 400;
    color: #fff;
    letter-spacing: -0.03em;
    background: var(--brand-main-color);
}

.layer-wrap .rooms h3 {
    margin-bottom: 20px;
}

.layer-wrap .rooms li {}

.layer-wrap .rooms li:nth-child(n + 2) {
    margin-top: 25px;
}

.layer-wrap .rooms li p {
    width: 100%;
    line-height: 25px;
    font-size: 16px;
    font-weight: 400;
    color: #717171;
    display: inline-block;
    vertical-align: top;
    position: relative;
}

.layer-wrap .rooms li span:first-child {
    width: 60px;
    display: inline-block;
}

.layer-wrap .rooms li span:last-child {
    display: inline-block;
    vertical-align: top;
    background: #f7f7f7;
    border-radius: 100%;
    width: 25px;
    height: 25px;
    text-align: center;
    font-size: 16px;
    color: #717171;
}

.layer-wrap .rooms~.fact h3 {
    margin-bottom: 10px;
}

@media only screen and (max-width: 999px) {
    .layer-wrap .fact li {
        padding: 14px 5px;
        padding-left: 40px;
        border-bottom: 0;
    }

    .layer-wrap .fact li .ico {
        top: 16px;
        width: 20px;
    }

    .layer-wrap .fact li .txt {
        font-size: 16px;
        line-height: 20px;
    }

    .layer-wrap .reserve li:nth-child(n + 2) {
        margin-top: 16px;
    }

    .layer-wrap .reserve .chk-input input {
        height: 35px;
        font-size: 14px;
    }

    .layer-wrap .reserve .reserve-enter {
        font-size: 14px;
        line-height: 42px;
    }

    .layer-wrap .rooms h3 {
        margin-bottom: 20px;
    }

    .layer-wrap .rooms li:nth-child(n + 2) {
        margin-top: 16px;
    }

    .layer-wrap .rooms li p {
        font-size: 16px;
        line-height: 20px;
    }

    .layer-wrap .rooms li span {
        font-size: 16px;
        width: 20px;
        height: 20px;
    }

    .layer-wrap .rooms~.fact h3 {
        margin-bottom: 10px;
    }
}

.layer-wrap.visAll {
    border-radius: 0;
    height: 100%;
    padding: 0;
    z-index: 7000;
    left: 0 !important;
    min-height: 100%;
    top: 0;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}

.layer-wrap.visAll .is-top {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    height: 100px;
    z-index: 2;
}

.layer-wrap.visAll .is-top .bt-prev {
    z-index: 912;
    width: 30px;
    height: 30px;
    position: absolute;
    left: 20px;
    top: 50%;
    margin-top: -15px;
    background: url(/static/booking/img/layout/bt-prev.jpg) no-repeat left center;
}

.layer-wrap.visAll .is-top .abr {
    position: absolute;
    right: 20px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.layer-wrap.visAll .is-top .abr ul {}

.layer-wrap.visAll .is-top .abr ul:after {
    display: block;
    content: "";
    clear: both;
}

.layer-wrap.visAll .is-top .abr li {
    float: left;
}

.layer-wrap.visAll .is-top .abr li:nth-child(n + 2) {
    margin-left: 15px;
}

.layer-wrap.visAll .is-top .abr li a {
    line-height: 20px;
    display: block;
    padding-left: 22px;
    font-size: 14px;
    color: #222;
}

.layer-wrap.visAll .is-top .abr li a span {
    border-bottom: 1px solid #222;
    display: inline-block;
    vertical-align: top;
}

.layer-wrap.visAll .is-top .abr li:nth-child(1) a {
    background: url(/static/booking/img/sub/ico-share.png) no-repeat left 50%;
}

.layer-wrap.visAll .is-top .abr li:nth-child(2) a {
    background: url(/static/booking/img/sub/ico-reserve.jpg) no-repeat left 50%;
}

.layer-wrap.visAll .is-con {
    max-width: 1160px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    top: 100px;
    height: calc(100% - 100px);
    width: 100%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

.layer-wrap.visAll .is-con .vscrolls {
    position: absolute;
    left: 10px;
    top: 0;
    height: 100%;
    width: calc(100% - 30px);
    padding-right: 20px;
    box-sizing: border-box;
}

.layer-wrap.visAll .is-con .vscrolls>.scroll-element.scroll-y {
    right: -2px;
}

.layer-wrap .vis-all {}

.layer-wrap .vis-all ul {
    padding-bottom: 10px;
}

.layer-wrap .vis-all ul:after {
    display: block;
    content: "";
    clear: both;
}

.layer-wrap .vis-all li {
    float: left;
    width: 100%;
}

.layer-wrap .vis-all li:nth-child(n + 2) {
    margin-top: 10px;
}

.layer-wrap .vis-all li.fl {
    float: left;
    width: calc(50% - 5px);
}

.layer-wrap .vis-all li.fr {
    float: right;
    width: calc(50% - 5px);
}

.layer-wrap .vis-all li a {
    display: block;
}

.layer-wrap .vis-all li a img {
    width: 100%;
    height: 500px;
    object-fit: cover;
}

.layer-wrap .vis-all li.fl a img {
    height: 320px;
}

.layer-wrap .vis-all li.fr a img {
    height: 320px;
}

@media only screen and (max-width: 1160px) {
    .layer-wrap .vis-all li a img {
        height: 400px;
    }

    .layer-wrap .vis-all li.fl a img {
        height: 240px;
    }

    .layer-wrap .vis-all li.fr a img {
        height: 240px;
    }
}

@media only screen and (max-width: 999px) {
    .layer-wrap.visAll {}

    .layer-wrap.visAll .is-top {
        height: 50px;
    }

    .layer-wrap.visAll .is-top .abr li a {
        font-size: 12px;
    }

    .layer-wrap.visAll .is-con {
        top: 50px;
        height: calc(100% - 50px);
        left: 0;
        width: 100%;
        padding: 0 10px;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }

    .layer-wrap.visAll .is-con .vscrolls {
        width: calc(100% - 30px);
    }

    .layer-wrap .vis-all li a img {
        height: 350px;
    }

    .layer-wrap .vis-all li.fl a img {
        height: 200px;
    }

    .layer-wrap .vis-all li.fr a img {
        height: 200px;
    }
}

@media only screen and (min-width: 681px) {
    .layer-wrap.visAll.active {
        left: 0 !important;
        top: 0 !important;
        height: 100%;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

@media only screen and (max-width: 680px) {
    .layer-wrap.visAll {
        left: 100% !important;
    }

    .layer-wrap.visAll.active {
        left: 0 !important;
    }

    .layer-wrap.visAll .is-top .bt-prev {
        left: 10px;
    }

    .layer-wrap.visAll .is-top .abr {
        right: 10px;
    }

    .layer-wrap.visAll .is-top .abr li a {
        width: 20px;
        height: 20px;
        text-indent: -9999em;
        background-position: Center center !important;
        padding: 0;
    }

    .layer-wrap.visAll .is-top .abr li span {
        display: none;
        background-position: center center !important;
    }

    .layer-wrap.visAll .is-con {
        position: relative;
        left: auto;
        top: auto;
        width: auto;
        height: auto;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }

    .layer-wrap.visAll .is-con .vscrolls {
        height: auto;
        padding: 0;
        width: auto;
        left: auto;
        top: auto;
        position: relative;
    }

    .layer-wrap .vis-all li a img {
        height: 280px;
    }

    .layer-wrap .vis-all li.fl a img {
        height: 160px;
    }

    .layer-wrap .vis-all li.fr a img {
        height: 160px;
    }
}

.layer-wrap.visPreview {
    border-radius: 0;
    height: 100%;
    padding: 0;
    left: 0 !important;
    z-index: 8123;
    top: 0;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}

.layer-wrap.visPreview .is-top {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    height: 100px;
    z-index: 2;
}

.layer-wrap.visPreview .is-top .preview-count {
    font-size: 18px;
    font-weight: 400;
    color: #222;
    text-align: center;
    position: absolute;
    width: 100px;
    line-height: 30px;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.layer-wrap.visPreview .is-top .bt-prev {
    z-index: 912;
    width: 30px;
    height: 30px;
    position: absolute;
    left: 20px;
    top: 50%;
    margin-top: -15px;
    background: url(/static/booking/img/layout/bt-prev.jpg) no-repeat left center;
}

.layer-wrap.visPreview .is-top .abr {
    position: absolute;
    right: 20px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.layer-wrap.visPreview .is-top .abr ul {}

.layer-wrap.visPreview .is-top .abr ul:after {
    display: block;
    content: "";
    clear: both;
}

.layer-wrap.visPreview .is-top .abr li {
    float: left;
}

.layer-wrap.visPreview .is-top .abr li:nth-child(n + 2) {
    margin-left: 15px;
}

.layer-wrap.visPreview .is-top .abr li a {
    line-height: 20px;
    display: block;
    padding-left: 22px;
    font-size: 14px;
    color: #222;
}

.layer-wrap.visPreview .is-top .abr li a span {
    border-bottom: 1px solid #222;
    display: inline-block;
    vertical-align: top;
}

.layer-wrap.visPreview .is-top .abr li:nth-child(1) a {
    background: url(/static/booking/img/sub/ico-share.png) no-repeat left 50%;
}

.layer-wrap.visPreview .is-top .abr li:nth-child(2) a {
    background: url(/static/booking/img/sub/ico-reserve.jpg) no-repeat left 50%;
}

.layer-wrap.visPreview .is-con {
    max-width: 1120px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* display:flex;align-items: center; justify-content: center; */
    position: absolute;
    left: 50%;
    top: 100px;
    height: calc(100% - 100px);
    width: 100%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

.layer-wrap.visPreview .is-con .vc {
    width: 100%;
    position: relative;
}

.layer-wrap.visPreview .is-con .item {}

.layer-wrap.visPreview .is-con .item img {
    width: 100%;
    max-height: 700px;
    object-fit: cover;
}

.layer-wrap.visPreview .is-con .slick-prev {
    width: 36px;
    height: 36px;
    z-index: 123;
    position: absolute;
    left: -70px;
    top: 50%;
    margin-top: -18px;
    background: url(/static/booking/img/content/vis-prev.png) no-repeat center center;
}

.layer-wrap.visPreview .is-con .slick-next {
    width: 36px;
    height: 36px;
    z-index: 123;
    position: absolute;
    right: -70px;
    top: 50%;
    margin-top: -18px;
    background: url(/static/booking/img/content/vis-next.png) no-repeat center center;
}

.layer-wrap.visPreview .is-con .slick-disabled {
    opacity: 0.3;
}

@media only screen and (max-width: 1280px) {
    .layer-wrap.visPreview .is-con .slick-prev {
        width: 40px;
        height: 40px;
        left: 0;
        background-color: rgba(255, 255, 255, 0.5) !important;
        background-size: 16px auto;
    }

    .layer-wrap.visPreview .is-con .slick-next {
        width: 40px;
        height: 40px;
        right: 0;
        background-color: rgba(255, 255, 255, 0.5) !important;
        background-size: 16px auto;
    }
}

@media only screen and (max-width: 1160px) {
    .layer-wrap.visPreview .is-top .preview-count {
        font-size: 16px;
    }
}

@media only screen and (max-width: 999px) {
    .layer-wrap.visPreview .is-top {
        height: 50px;
    }

    .layer-wrap.visPreview .is-top .abr li a {
        font-size: 12px;
    }

    .layer-wrap.visPreview .is-top .preview-count {
        font-size: 14px;
        text-align: center;
        width: 100%;
        box-sizing: border-box;
    }

    .layer-wrap.visPreview .is-con {
        position: relative;
        top: auto;
        left: auto;
        top: auto;
        width: auto;
        height: auto;
        display: block;
        padding: 0 20px 30px 20px;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }

    .layer-wrap.visPreview .is-con .slick-prev {
        background-size: 12px auto;
        width: 34px;
        height: 34px;
    }

    .layer-wrap.visPreview .is-con .slick-next {
        background-size: 12px auto;
        width: 34px;
        height: 34px;
    }
}

@media only screen and (min-width: 681px) {
    .layer-wrap.visPreview.active {
        left: 0 !important;
        top: 0 !important;
        height: 100%;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

@media only screen and (max-width: 680px) {
    .layer-wrap.visPreview {
        left: 100% !important;
    }

    .layer-wrap.visPreview.active {
        left: 0 !important;
    }

    .layer-wrap.visPreview .is-top .bt-prev {
        left: 15px;
    }

    .layer-wrap.visPreview .is-top .abr {
        right: 20px;
    }

    .layer-wrap.visPreview .is-top .abr li a {
        width: 20px;
        height: 20px;
        text-indent: -9999em;
        background-position: Center center !important;
        padding: 0;
    }

    .layer-wrap.visPreview .is-top .abr li span {
        display: none;
        background-position: center center !important;
    }

    .layer-wrap.visPreview .is-top .preview-count {
        font-size: 12px;
    }

    .layer-wrap.visPreview .is-con .slick-prev {
        background-size: 10px auto;
        width: 28px;
        height: 28px;
    }

    .layer-wrap.visPreview .is-con .slick-next {
        background-size: 10px auto;
        width: 28px;
        height: 28px;
    }
}

.layer-wrap.reviewImg {
    z-index: 8842;
}

.layer-wrap.reviewImg .is-top {
    position: relative;
    height: 16px;
    padding-top: 0;
}

.layer-wrap.reviewImg .is-top .rview-count {
    font-size: 14px;
    font-weight: 400;
    color: #717171;
    text-align: center;
    position: absolute;
    width: 100px;
    line-height: 16px;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.layer-wrap.reviewImg .is-con {
    border-top: 1px solid #ddd;
    margin-top: 20px;
    padding: 40px 30px 30px 30px;
}

.layer-wrap.reviewImg .is-con .item {}

.layer-wrap.reviewImg .is-con .item img {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
}

.layer-wrap.reviewImg .is-con .slick-prev {
    width: 36px;
    height: 36px;
    position: absolute;
    left: -40px;
    top: 50%;
    margin-top: -18px;
    background: url(/static/booking/img/content/vis-prev.png) no-repeat center center;
    background-size: 12px auto;
}

.layer-wrap.reviewImg .is-con .slick-next {
    width: 36px;
    height: 36px;
    position: absolute;
    right: -40px;
    top: 50%;
    margin-top: -18px;
    background: url(/static/booking/img/content/vis-next.png) no-repeat center center;
    background-size: 12px auto;
}

.layer-wrap.reviewImg .is-con .slick-disabled {
    opacity: 0.3;
}

@media only screen and (max-width: 1280px) {}

@media only screen and (max-width: 1160px) {}

@media only screen and (max-width: 999px) {
    .layer-wrap.reviewImg .is-top .rview-count {
        font-size: 12px;
    }

    .layer-wrap.reviewImg .is-con {
        margin-top: 15px;
        padding: 20px 20px 20px 20px;
    }

    .layer-wrap.reviewImg .is-con .item img {
        height: 250px;
    }

    .layer-wrap.reviewImg .is-con .slick-prev {
        background-size: 10px auto;
        left: -34px;
    }

    .layer-wrap.reviewImg .is-con .slick-next {
        background-size: 10px auto;
        right: -34px;
    }
}

@media only screen and (min-width: 681px) {}

@media only screen and (max-width: 680px) {
    .layer-wrap.reviewImg .is-con .item img {
        height: auto;
        object-fit: fill;
    }
}

.layer-wrap.review {}

.layer-wrap.review.active {}

.layer-wrap .review:after {
    display: block;
    content: "";
    clear: both;
}

.layer-wrap .review .fl {
    width: 310px;
}

/* .layer-wrap .review .fr{width:calc(100% - 380px); box-sizing:border-box;} */
.layer-wrap .review .fr {
    width: 100%;
    box-sizing: border-box;
}

.layer-wrap .review .vscrolls.h640 {
    width: calc(100% + 10px);
    padding-right: 25px;
    max-height: 640px;
}

.layer-wrap .review .state {}

.layer-wrap .review .state ul {}

.layer-wrap .review .state li {
    position: relative;
    padding-left: 5px;
}

.layer-wrap .review .state li:nth-child(n + 2) {
    margin-top: 8px;
}

.layer-wrap .review .state li .btxt {
    line-height: 22px;
    font-size: 14px;
    font-weight: 400;
    color: #222;
    letter-spacing: -0.03em;
}

.layer-wrap .review .state li .grap {
    width: 140px;
    position: absolute;
    right: 40px;
    top: 50%;
    margin-top: -2px;
    height: 4px;
    box-sizing: border-box;
}

.layer-wrap .review .state li .grap:before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 4px;
    background: #ddd;
    border-radius: 3px;
    display: block;
    content: "";
    z-index: -1;
}

.layer-wrap .review .state li .grap .bar {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 4px;
    background: #222;
}

.layer-wrap .review .state li .grap .rtxt {
    right: -30px;
    line-height: 22px;
    font-size: 14px;
    font-weight: 400;
    color: #222;
    letter-spacing: -0.03em;
    position: absolute;
    top: 50%;
    margin-top: -11px;
}

.layer-wrap .review .fr li {
    position: relative;
}

.layer-wrap .review .fr li:nth-child(n + 2) {
    margin-top: 40px;
}

.layer-wrap .review .fr li.reply {
    padding-left: 25px;
}

.layer-wrap .review .fr li.reply:before {
    width: 7px;
    border-bottom: 1px solid #aaa;
    position: absolute;
    left: 7px;
    top: 18px;
    display: block;
    content: "";
}

.layer-wrap .review .fr li.reply:after {
    width: 0px;
    border-left: 1px solid #aaa;
    height: 7px;
    position: absolute;
    left: 7px;
    top: 11px;
    display: block;
    content: "";
}

.layer-wrap .review .fr li .user {
    position: relative;
    padding-left: 48px;
    display: flex;
    align-items: center;
    justify-content: left;
    height: 38px;
    text-align: left;
}

.layer-wrap .review .fr li .user .img {
    position: absolute;
    left: 0;
    top: 0;
    width: 38px;
    overflow: hidden;
    height: 38px;
    border-radius: 100%;
}

.layer-wrap .review .fr li .user .img img {
    width: 100%;
    height: 38px;
    object-fit: cover;
}

.layer-wrap .review .fr li .user .vc {
    width: 100%;
}

.layer-wrap .review .fr li .user .btxt {
    font-size: 16px;
    font-weight: 400;
    color: #222;
    letter-spacing: -0.03em;
    line-height: 1.2em;
}

.layer-wrap .review .fr li .user .stxt {
    margin-top: 2px;
    font-size: 14px;
    font-weight: 400;
    color: #717171;
    letter-spacing: -0.03em;
    line-height: 1.1em;
}

.layer-wrap .review .fr li .txt {
    margin-top: 15px;
}

.layer-wrap .review .fr li .txt p {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3em;
    color: #222;
    letter-spacing: -0.03em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.layer-wrap .review .fr li .more {
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    color: #222;
    margin-top: 15px;
    padding-right: 20px;
    position: relative;
}

.layer-wrap .review .fr li .more span {
    display: inline-block;
    vertical-align: top;
    line-height: 22px;
    letter-spacing: -0.03em;
    font-weight: 600;
    border-bottom: 1px solid #222;
}

.layer-wrap .review .fr li .more:after {
    position: absolute;
    right: 0;
    top: 0;
    width: 10px;
    height: 100%;
    background: url(/static/booking/img/content/more-arrow.jpg) no-repeat right 50%;
    display: block;
    content: "";
    transform: scale(1);
    transition: transform 1s cubic-bezier(0.33, 0.02, 0, 0.93);
}

.layer-wrap .review .fr li .more:hover:after {
    transform: scale(1) translateX(5px);
}

.layer-wrap .review .fr li .more.hide {
    display: none;
}

.layer-wrap .review .fr li .small-slide {
    margin-top: 20px;
}

.layer-wrap .review .fr li .small-slide ul:after {
    display: block;
    content: "";
    clear: both;
}

.layer-wrap .review .fr li .small-slide li {
    float: left;
    width: 148px;
    margin-left: 10px;
    margin-top: 0;
}

.layer-wrap .review .fr li .small-slide li:first-child {
    margin-left: 0;
}

.layer-wrap .review .fr li .small-slide li a {
    display: block;
    border-radius: 10px;
    overflow: hidden;
}

.layer-wrap .review .fr li .small-slide li a img {
    width: 100%;
    height: 100px;
    object-fit: cover;
}

@media only screen and (max-width: 1280px) {}

@media only screen and (max-width: 1160px) {
    .layer-wrap .review .fl {
        width: 250px;
    }

    .layer-wrap .review .fr {
        width: calc(100% - 320px);
    }

    .layer-wrap .review .state li .grap {
        width: 120px;
    }
}

@media only screen and (max-width: 999px) {
    .layer-wrap .review .vscrolls.h640 {
        max-height: 500px;
    }

    .layer-wrap .review .fl {
        float: none;
        width: auto;
    }

    .layer-wrap .review .state li:nth-child(n + 2) {
        margin-top: 4px;
    }

    .layer-wrap .review .state li .btxt {
        font-size: 14px;
    }

    .layer-wrap .review .state li .grap {
        width: 50%;
    }

    .layer-wrap .review .state li .grap .rtxt {
        font-size: 14px;
    }

    .layer-wrap .review .fr {
        width: auto;
        float: none;
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid #ddd;
    }

    .layer-wrap .review .fr li:nth-child(n + 2) {
        margin-top: 20px;
    }

    .layer-wrap .review .fr li .user .btxt {
        font-size: 14px;
        color: #222;
    }

    .layer-wrap .review .fr li .user .stxt {
        font-size: 14px;
        color: #222;
    }
}

@media only screen and (min-width: 681px) {}

@media only screen and (max-width: 680px) {
    .layer-wrap .review .state li .btxt {
        font-size: 12px;
    }

    .layer-wrap .review .state li .grap .rtxt {
        font-size: 12px;
    }

    .layer-wrap .review .fr li .txt {
        margin-top: 10px;
    }

    .layer-wrap .review .fr li .txt p {
        font-size: 16px;
        color: #222;
    }

    .layer-wrap .review .fr li .small-slide li {
        width: 120px;
    }

    .layer-wrap .review .fr li .small-slide li a img {
        height: 90px;
    }
}

.layer-wrap .reviews {
    margin-top: 30px;
}

.layer-wrap .reviews li {
    position: relative;
}

.layer-wrap .reviews li:nth-child(n + 2) {
    margin-top: 30px;
}

.layer-wrap .reviews li.reply {
    padding-left: 25px;
}

.layer-wrap .reviews li.reply:before {
    width: 7px;
    border-bottom: 1px solid #aaa;
    position: absolute;
    left: 7px;
    top: 18px;
    display: block;
    content: "";
}

.layer-wrap .reviews li.reply:after {
    width: 0px;
    border-left: 1px solid #aaa;
    height: 7px;
    position: absolute;
    left: 7px;
    top: 11px;
    display: block;
    content: "";
}

.layer-wrap .reviews li .user {
    position: relative;
    padding-left: 48px;
    display: flex;
    align-items: center;
    justify-content: left;
    height: 38px;
    text-align: left;
}

.layer-wrap .reviews li .user .img {
    position: absolute;
    left: 0;
    top: 0;
    width: 38px;
    overflow: hidden;
    height: 38px;
    border-radius: 100%;
}

.layer-wrap .reviews li .user .img img {
    width: 100%;
    height: 38px;
    object-fit: cover;
}

.layer-wrap .reviews li .user .vc {
    width: 100%;
}

.layer-wrap .reviews li .user .btxt {
    font-size: 16px;
    font-weight: 400;
    color: #222;
    letter-spacing: -0.03em;
    line-height: 1.2em;
}

.layer-wrap .reviews li .user .stxt {
    margin-top: 2px;
    font-size: 14px;
    font-weight: 400;
    color: #717171;
    letter-spacing: -0.03em;
    line-height: 1.1em;
}

.layer-wrap .reviews li .txt {
    margin-top: 15px;
}

.layer-wrap .reviews li .txt p {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3em;
    color: #222;
    letter-spacing: -0.03em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.layer-wrap .reviews li .more {
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    color: #222;
    margin-top: 15px;
    padding-right: 20px;
    position: relative;
}

.layer-wrap .reviews li .more span {
    display: inline-block;
    vertical-align: top;
    line-height: 22px;
    letter-spacing: -0.03em;
    font-weight: 600;
    border-bottom: 1px solid #222;
}

.layer-wrap .reviews li .more:after {
    position: absolute;
    right: 0;
    top: 0;
    width: 10px;
    height: 100%;
    background: url(/static/booking/img/content/more-arrow.jpg) no-repeat right 50%;
    display: block;
    content: "";
    transform: scale(1);
    transition: transform 1s cubic-bezier(0.33, 0.02, 0, 0.93);
}

.layer-wrap .reviews li .more:hover:after {
    transform: scale(1) translateX(5px);
}

.layer-wrap .reviews li .more.hide {
    display: none;
}

.layer-wrap .reviews li .gap20 {
    height: 20px;
}

.layer-wrap .reviews li .small-slide2 {}

.layer-wrap .reviews li .small-slide2 ul:after {
    display: block;
    content: "";
    clear: both;
}

.layer-wrap .reviews li .small-slide2 li {
    float: left;
    width: 148px;
    margin-left: 10px;
    margin-top: 0;
}

.layer-wrap .reviews li .small-slide2 li:first-child {
    margin-left: 0;
}

.layer-wrap .reviews li .small-slide2 li a {
    display: block;
    border-radius: 10px;
    overflow: hidden;
}

.layer-wrap .reviews li .small-slide2 li a img {
    width: 100%;
    height: 100px;
    object-fit: cover;
}

@media only screen and (max-width: 1280px) {}

@media only screen and (max-width: 1160px) {}

@media only screen and (max-width: 999px) {
    .layer-wrap .reviews {
        width: auto;
        float: none;
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid #ddd;
    }

    .layer-wrap .reviews li:nth-child(n + 2) {
        margin-top: 20px;
    }

    .layer-wrap .reviews li .user .btxt {
        font-size: 14px;
    }

    .layer-wrap .reviews li .user .stxt {
        font-size: 12px;
    }
}

@media only screen and (min-width: 681px) {}

@media only screen and (max-width: 680px) {
    .layer-wrap .reviews li .small-slide2 li {
        width: 120px;
    }

    .layer-wrap .reviews li .small-slide2 li a img {
        height: 90px;
    }

    .layer-wrap .reviews li .txt {
        margin-top: 10px;
    }

    .layer-wrap .reviews li .txt p {
        font-size: 12px;
        color: #717171;
    }
}

/* =====================================
	.preview-wrap
===================================== */
.preview-wrap .vis-all {}

.preview-wrap .vis-all ul {
    padding-bottom: 10px;
}

.preview-wrap .vis-all ul:after {
    display: block;
    content: "";
    clear: both;
}

.preview-wrap .vis-all li {
    float: left;
    width: 100%;
}

.preview-wrap .vis-all li:nth-child(n + 2) {
    margin-top: 10px;
}

.preview-wrap .vis-all li.fl {
    float: left;
    width: calc(50% - 5px);
}

.preview-wrap .vis-all li.fr {
    float: right;
    width: calc(50% - 5px);
}

/*
.preview-wrap .vis-all li a {
    display: block;
}
.preview-wrap .vis-all li a img {
    width: 100%;
    height: 500px;
    object-fit: cover;
}
.preview-wrap .vis-all li.fl a img {
    height: 320px;
}
.preview-wrap .vis-all li.fr a img {
    height: 320px;
}
*/
.preview-wrap .vis-all li img {
    width: 100%;
}

@media only screen and (max-width: 1160px) {
    /*
    .preview-wrap .vis-all li a img {
        height: 400px;
    }
    .preview-wrap .vis-all li.fl a img {
        height: 240px;
    }
    .preview-wrap .vis-all li.fr a img {
        height: 240px;
    }
    */
}

@media only screen and (max-width: 999px) {
    .preview-wrap.visAll {}

    .preview-wrap.visAll .is-top {
        height: 50px;
    }

    .preview-wrap.visAll .is-top .abr li a {
        font-size: 12px;
    }

    .preview-wrap.visAll .is-con {
        top: 50px;
        height: calc(100% - 50px);
        left: 0;
        width: 100%;
        padding: 0 10px;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }

    .preview-wrap.visAll .is-con .vscrolls {
        width: calc(100% - 30px);
    }

    /*
    .preview-wrap .vis-all li a img {
        height: 350px;
    }
    .preview-wrap .vis-all li.fl a img {
        height: 200px;
    }
    .preview-wrap .vis-all li.fr a img {
        height: 200px;
    }
    */
}

@media only screen and (max-width: 680px) {
    /*
    .preview-wrap .vis-all li a img {
        height: 280px;
    }
    .preview-wrap .vis-all li.fl a img {
        height: 160px;
    }
    .preview-wrap .vis-all li.fr a img {
        height: 160px;
    }
    */
}

/* =====================================
	.layer-wrap.question
===================================== */
.layer-wrap.question {}

.layer-wrap.question h2 {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
}

.layer-wrap.question .popup-title-3 {
    font-size: 16px;
    margin-top: 10px;
    color: #777;
}

.layer-wrap.question .inputWrap {
    display: flex;
    flex-direction: column;
    gap: 35px;
    margin-top: 30px;
}

.layer-wrap.question .inputWrap .input {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ddd;
}

.layer-wrap.question .inputWrap .input label {
    display: flex;
    align-items: center;
    width: 70px;
    font-size: 14px;
    color: #777;
}

.layer-wrap.question .inputWrap .input label .red {
    color: #dc2929;
}

.layer-wrap.question .inputWrap .input input {
    height: 30px;
    font-size: 14px;
    border: none;
    outline: none;
}

.layer-wrap.question .checkbox {
    display: flex;
    align-items: center;
    margin-top: 20px;
}

.layer-wrap.question .checkbox input {
    outline: none;
    appearance: auto;
    box-sizing: border-box;
    margin: 3px 3px 3px 4px;
}

.layer-wrap.question .checkbox label {
    margin-left: 5px;
    font-size: 14px;
    color: #777;
    box-sizing: border-box;
}

.layer-wrap.question .popup-bottom {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    margin-top: 45px;
}

.layer-wrap.question .popup-bottom button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    border-radius: 10px;
    border: 0;
    background-color: #742c7e;
    color: #fff;
}

@media only screen and (max-width: 680px) {
    .layer-wrap.question {}
}


/* 2023-01-31 */
.side .expense .scoupon {
    display: none;
}

.pay-mobile .scoupon {
    display: none;
}

.chk-input.active .delete-btn {
    display: block;
}

.chk-input .delete-btn {
    position: absolute;
    right: 0;
    top: 50%;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    background: url(/static/booking/img/sub/input-delete.jpg) no-repeat center center;
    border: none;
    display: none;
}

.pen-wrap .rentry .fast-join {
    margin-top: 50px;
}

.pen-wrap .rentry .bejoin {
    margin-top: 25px;
    display: none;
}

.pen-wrap .rentry .chk-check input[type="checkbox"]+label {
    font-size: 16px;
}

.pen-wrap .rentry .chk-check input[type="checkbox"]+label:before {
    box-sizing: border-box;
    background: url(/static/booking/img/sub/chk-agree.jpg) no-repeat center center;
    border-radius: 100%;
    border: 2px solid #dfdfdf;
    background-size: 120% auto;
    width: 18px;
    height: 18px;
    top: 1px;
}

.pen-wrap .rentry .chk-check input[type="checkbox"]:checked+label:before {
    background-image: url(/static/booking/img/sub/chk-agreeo.jpg);
    border-color: #555;
}

.pen-wrap .rentry .ex.show {
    display: block;
}

.pen-wrap .rentry li .btxt.nec span {
    position: relative;
    display: inline-block;
    vertical-align: top;
}

.pen-wrap .rentry li .btxt.nec span:after {
    position: absolute;
    display: block;
    content: "*";
    color: #742c7e;
    line-height: 1em;
    right: -9px;
    top: 1px;
}

.pen-wrap .rentry li .chk-input input::placeholder {
    font-weight: 400 !important;
    color: #555 !important;
    letter-spacing: -0.03em;
    opacity: 0.3 !important;
}

.pen-wrap .rentry li .field.ids {
    display: block;
}

.pen-wrap .rentry li .field.ids .chk-input input {
    padding-right: 120px;
}

.pen-wrap .rentry li .field.ids .cerfity-btn {
    width: 100px;
    height: 30px;
    position: absolute;
    right: 0;
    top: 2px;
    line-height: 30px;
    border-radius: 5px;
    background: #8b8b8b;
    color: #fff;
    font-size: 14px;
    letter-spacing: -0.03em;
    text-align: center;
    border: 0;
}

.pen-wrap .rentry li .field.ids .cerfity-btn:hover {
    background: #222;
}

.pen-wrap .rentry li.active .field.phone .cerfity-btn {
    display: none;
}

.pen-wrap .rentry li.active .ex {
    display: none;
}

.pen-wrap .rentry .btns {
    margin-top: 35px;
}

.pen-wrap .rentry .btns a {
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    letter-spacing: -0.03em;
    line-height: 48px;
    border-radius: 8px;
    background: #742c7e;
    max-width: 322px;
    margin: 0 auto;
    display: block;
    text-align: center;
}

/* .pen-wrap .rentry li .ex.error{color:#d51515} */
@media only screen and (max-width:1260px) {}

@media only screen and (max-width:999px) {
    .pen-wrap .rentry .fast-join {
        margin-top: 40px;
    }

    .pen-wrap .rentry li .field.ids .chk-input input {
        padding-right: 100px;
    }

    .pen-wrap .rentry li .field.ids .cerfity-btn {
        width: 90px;
        line-height: 28px;
        font-size: 14px;
        height: 28px;
        top: 0px;
    }

    .pen-wrap .rentry .chk-check input[type="checkbox"]+label {
        font-size: 14px;
    }
}

@media only screen and (max-width:680px) {
    .pen-wrap .rentry .btns a {
        width: auto;
        margin: 0;
    }
}

@media only screen and (max-width:480px) {}


.pen-wrap .scoupon {
    position: relative;
}

.pen-wrap .scoupon h3 {
    margin-bottom: 20px;
}

.pen-wrap .scoupon .btxt {
    font-size: 16px;
    font-weight: 400;
    color: #717171;
    letter-spacing: -0.03em;
    line-height: 30px;
}

.pen-wrap .scoupon a {
    position: absolute;
    right: 0;
    bottom: 0px;
    line-height: 30px;
    display: inline-block;
    vertical-align: top;
    font-size: 16px;
    font-weight: 400;
    color: #222;
    letter-spacing: -0.03em;
    padding-right: 18px;
}

.pen-wrap .scoupon a:after {
    position: absolute;
    right: 0;
    top: 0;
    width: 10px;
    height: 100%;
    background: url(/static/booking/img/content/more-arrow.jpg) no-repeat right 50%;
    background-size: 7px auto;
    opacity: 0.8;
    display: block;
    content: "";
    transform: scale(1);
    transition: transform 1s cubic-bezier(.33, .02, 0, .93)
}

.pen-wrap .scoupon a:hover:after {
    transform: scale(1) translateX(5px)
}

@media only screen and (max-width:1260px) {}

@media only screen and (max-width:999px) {
    .pen-wrap .scoupon .btxt {
        font-size: 16px;
        line-height: 16px;
    }

    .pen-wrap .scoupon a {
        font-size: 16px;
        line-height: 16px;
    }
}

@media only screen and (max-width:680px) {}

@media only screen and (max-width:480px) {}



.layer-wrap.coupon {
    max-width: 380px;
    min-width: 320px;
}

.layer-wrap .is-top .close {
    background-image: url(/static/booking/img/sub/icon-cross.svg);
    background-size: contain;
    background-color: transparent;
    border: 0;
}

@media only screen and (max-width:681px) {
    .layer-wrap.coupon {
        width: 100%;
        max-width: none;
        top: 0;
        border-radius: 0;
        height: 100%;
        max-height: none;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    .layer-wrap.coupon .is-top {
        border-bottom: 1px solid #ddd;
        padding-bottom: 20px;
    }

    .layer-wrap.coupon .is-top .close {
        background: url(/static/booking/img/layout/bt-prev.jpg) no-repeat left center;
    }

    .layer-wrap.coupon .vscrolls {
        position: absolute;
        left: 30px;
        top: 132px;
        width: calc(100% - 60px) !important;
        height: calc(100% - 202px - 25px) !important;
        overflow-y: auto;
    }
}

.layer-wrap .coupon .vscrolls {
    padding-bottom: 1px
}

.layer-wrap .coupon ul {}

.layer-wrap .coupon li {
    text-align: center;
}

.layer-wrap .coupon li:nth-child(n+2) {
    margin-top: 22px;
}

.layer-wrap .coupon li a {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    position: relative;
    border: 1px solid #e3e3e3;
    box-sizing: border-box;
    padding-top: 5px;
    border-radius: 8px;
    padding-right: 30px;
    overflow: hidden;
}
.layer-wrap .coupon li a:after {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    right: -55px;
    transform: translateY(-50%) rotate(-90deg);
    width: 180px;
    height: 70px;
    background-color: #742c7e;
    color: #fff;
    border-top: 1px dashed #742c7e;
    font-size: 10px;
    letter-spacing: 7px;
    content: "COUPON";
}

.layer-wrap .coupon li .vc {
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px;
    text-align: left;
}

.layer-wrap .coupon li .vc .btxt {
    color: #742c7e;
    font-weight: 500;
    font-size: 25px;
}

.layer-wrap .coupon li .vc .btxt span {
    font-weight: 900;
    font-size: 40px;
}

.layer-wrap .coupon li .vc .stxt {
    margin-top: 10px;
    font-size: 16px;
    font-weight: 500;
    color: #111;
    letter-spacing: -0.03em;
    line-height: 1.2em;
}

.layer-wrap .coupon li .vc .ctxt {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 400;
    color: #717171;
    letter-spacing: -0.03em;
    line-height: 1.2em;
}

.layer-wrap .coupon .enter-btn {
    width: 100%;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    letter-spacing: -0.03em;
    line-height: 48px;
    border-radius: 8px;
    background: #742c7e;
    margin-top: 20px;
    display: block;
    text-align: center;
    border: 0;
}

.layer-wrap .coupon li.active a {
    border-color: #742c7e
}

@media only screen and (max-width:680px) {
    .layer-wrap .coupon li a {
        width: 100%;
        height: 180px;
        background-size: auto 100%
    }

    .layer-wrap .coupon li .vc .btxt {
        font-size: 25px;
    }

    .layer-wrap .coupon li .vc .btxt span {
        font-size: 40px
    }

    .layer-wrap .coupon li .vc .stxt {
        font-size: 14px
    }

    .layer-wrap .coupon li .vc .ctxt {
        font-size: 11px
    }

    .layer-wrap .coupon .enter-btn {
        margin-top: 0;
        position: absolute;
        left: 30px;
        bottom: 25px;
        width: calc(100% - 60px)
    }
}


.layer-wrap .pcoupon {
    display: none;
}

.layer-wrap .pcoupon ul {
    padding-bottom: 25px;
}

.layer-wrap .pcoupon ul:nth-child(n+2) {
    margin-top: 20px
}

.layer-wrap .pcoupon ul:after {
    display: block;
    content: "";
    clear: both;
}

.layer-wrap .pcoupon li {
    position: relative;
    text-align: right;
}

.layer-wrap .pcoupon li:nth-child(n+2) {
    margin-top: 10px
}

.layer-wrap .pcoupon li .btxt {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 16px;
    font-weight: 400;
    color: #717171;
    letter-spacing: -0.03em;
    line-height: 1.2em;
}

.layer-wrap .pcoupon li .stxt {
    font-size: 16px;
    font-weight: 400;
    color: #717171;
    letter-spacing: -0.03em;
    line-height: 1.2em;
}

.layer-wrap .pcoupon li:first-child .btxt {
    font-size: 16px;
    color: #222;
    font-weight: 500;
}

.layer-wrap .pcoupon li:first-child .stxt {
    font-size: 16px;
    color: #222;
    font-weight: 500;
}

@media only screen and (max-width:999px) {
    .layer-wrap .pcoupon {
        padding-top: 20px;
        border-top: 1px solid #ddd;
    }

    .layer-wrap .pcoupon li:nth-child(n+2) {
        margin-top: 16px
    }

    .layer-wrap .pcoupon li .btxt {
        font-size: 14px;
    }

    .layer-wrap .pcoupon li .stxt {
        font-size: 14px;
    }

    .layer-wrap .pcoupon li:first-child .btxt {
        font-size: 16px;
    }

    .layer-wrap .pcoupon li:first-child .stxt {
        font-size: 16px;
    }
}

@media only screen and (max-width:680px) {
    .layer-wrap .pcoupon li .stxt {
        font-size: 12px;
    }
}


/* 2023-02-06 */
.pen-wrap .banner .item {}

.pen-wrap .banner .item a {
    display: block;
    overflow: hidden;
}

.pen-wrap .banner .item img {
    width: 100%;
    /* height: 200px; object-fit: cover; */
}

.pen-wrap .banner .slick-dots {
    position: absolute;
    width: auto;
    text-align: right;
    width: 100%;
    height: 6px;
    left: 0;
    bottom: 15px;
    z-index: 55;
}

.pen-wrap .banner .slick-dots ul {
    height: auto;
    text-align: center;
    font-size: 0;
    width: 100%;
    height: 6px;
}

.pen-wrap .banner .slick-dots li {
    display: inline-block;
    vertical-align: top;
    margin: 0 2px;
    padding: 0;
    width: auto;
    height: auto;
}

.pen-wrap .banner .slick-dots li button {
    opacity: 0.5;
    background: #fff;
    width: 6px;
    height: 6px;
    padding: 0;
    position: relative;
    border-radius: 8px
}

.pen-wrap .banner .slick-dots li.slick-active button {
    opacity: 1;
    background: #fff;
    width: 30px;
}

@media only screen and (max-width:680px) {
    .pen-wrap .banner .item a img {
        /* height: 160px; */
    }
}