@charset "utf-8";

/*-------------------------- common css --------------------------*/
.hr {
    height: 1px;
    border-bottom: 1px solid #dddddd;
    width: 100%;
}

.hr1200 {
    height: 1px;
    border-bottom: 1px solid #dddddd;
    width: 1200px;
    margin: 0 auto;
}

.hrblack {
    height: 1px;
    border-bottom: 1px solid #000;
    width: 100%;
}

.hrgrey {
    height: 1px;
    border-bottom: 1px solid #ccc;
    width: 100%;
}

.border {
    border-bottom: 1px solid #ddd;
}

.bt1 {
    border-top: 1px solid #ddd;
}

.btm1 {
    border-bottom: 1px solid #ddd;
}

.displayB {
    display: block;
}

.displayIB {
    display: inline-block;
}

.displayN {
    display: none;
}

/* font color, style */
.orange {
    color: #ff970f;
}

.blue {
    color: #3e8ddc;
}

.red {
    color: #cc1c1c !important;
}

.yellow {
    color: #e2af00;
}

.darkGray {
    color: #58585a;
}

.white {
    color: #fff !important;
}

.en {
    font-family: 'neue' !important;
}

.center {
    text-align: center !important;
}

.left {
    text-align: left !important;
}

.right {
    text-align: right !important;
}

.marginA {
    margin: auto !important;
}

.fl-l {
    float: left !important;
}

.fl-r {
    float: right !important;
}

.font14 {
    font-size: 0.875em !important;
}

.font16 {
    font-size: 1.0em !important;
}

.font18 {
    font-size: 1.125em !important;
}

.font20 {
    font-size: 1.250em !important;
}

.font24 {
    font-size: 1.500em !important;
}

.preLine {
    white-space: pre-line;
}

.thin {
    font-weight: 200 !important;
}

.light {
    font-weight: 300 !important;
}

.bold {
    font-weight: 700 !important;
}

.nomal {
    font-weight: 400 !important;
}

.through {
    text-decoration: line-through !important;
}

.wp10 {
    width: 10% !important;
}

.wp15 {
    width: 15% !important;
}

.wp20 {
    width: 20% !important;
}

.wp25 {
    width: 25% !important;
}

.wp27 {
    width: 27% !important;
}

.wp28 {
    width: 28% !important;
}

.wp30 {
    width: 30% !important;
}

.wp32 {
    width: 32% !important;
}

.wp33 {
    width: 33% !important;
}

.wp34 {
    width: 34% !important;
}

.wp35 {
    width: 35% !important;
}

.wp40 {
    width: 40% !important;
}

.wp45 {
    width: 45% !important;
}

.wp50 {
    width: 50% !important;
}

.wp60 {
    width: 60% !important;
}

.wp70 {
    width: 70% !important;
}

.wp80 {
    width: 80% !important;
}

.wp90 {
    width: 90% !important;
}

.wp97 {
    width: 97% !important;
}

.wp100 {
    width: 100% !important;
}

.height100 {
    height: 100px !important;
}

.height200 {
    height: 200px !important;
}

.height300 {
    height: 300px !important;
}

.height400 {
    height: 400px !important;
}

.height500 {
    height: 500px !important;
}

.margin0 {
    margin: 0px auto !important;
}

.margin5 {
    margin: 5px auto;
}

.margin10 {
    margin: 10px auto;
}

.margin15 {
    margin: 15px auto;
}

.margin20 {
    margin: 20px auto;
}

.margin25 {
    margin: 25px auto;
}

.margin30 {
    margin: 30px auto !important;
}

.margin40 {
    margin: 40px auto;
}

.margin50 {
    margin: 50px auto;
}

.padding0 {
    padding: 0 !important;
}

.padding5 {
    padding: 5px 0 !important;
}

.padding10 {
    padding: 10px 0 !important;
}

.padding15 {
    padding: 15px 0 !important;
}

.padding20 {
    padding: 20px 0 !important;
}

.padding30 {
    padding: 30px 0 !important;
}

.padding50 {
    padding: 50px 0 !important;
}

.padding70 {
    padding: 70px 0 !important;
}

.mt0 {
    margin-top: 0 !important;
}

.mt10 {
    margin-top: 10px !important;
}

.mt20 {
    margin-top: 20px !important;
}

.mt30 {
    margin-top: 30px !important;
}

.mt50 {
    margin-top: 50px !important;
}

.mt60 {
    margin-top: 60px !important;
}

.mr0 {
    margin-right: 0 !important;
}

.pt5 {
    padding-top: 5px !important;
}

.pt10 {
    padding-top: 10px !important;
}

.pt15 {
    padding-top: 15px !important;
}

.pt20 {
    padding-top: 20px !important;
}

.pt30 {
    padding-top: 30px !important;
}

.pt45 {
    padding-top: 45px !important;
}

.pt50 {
    padding-top: 50px !important;
}

.pr5 {
    padding-right: 5px !important;
}

.mb0 {
    margin-bottom: 0 !important;
}

.mb8 {
    margin-bottom: 8px !important;
}

.mb10 {
    margin-bottom: 10px !important;
}

.mb15 {
    margin-bottom: 15px !important;
}

.mb20 {
    margin-bottom: 20px !important;
}

.mb30 {
    margin-bottom: 30px !important;
}

.mb40 {
    margin-bottom: 40px !important;
}

.mb50 {
    margin-bottom: 50px !important;
}

.mb70 {
    margin-bottom: 70px !important;
}

.mb80 {
    margin-bottom: 80px !important;
}

.mb100 {
    margin-bottom: 100px !important;
}

.mb250 {
    margin-bottom: 250px !important;
}

.pb5 {
    padding-bottom: 5px !important;
}

.pb10 {
    padding-bottom: 10px !important;
}

.pb20 {
    padding-bottom: 20px !important;
}

.pb30 {
    padding-bottom: 30px !important;
}

.pb40 {
    padding-bottom: 40px !important;
}

.pb50 {
    padding-bottom: 50px !important;
}

/*-------------------------- login --------------------------*/
.bg-login {
    background-color: #fff;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 110;
}

.contents-login {
    position: relative;
    z-index: 120;
    padding-bottom: 70px;
    width: 94%;
    margin: 0 auto;
}

.logo-login {
    width: 100%;
    margin: 50px 0 40px 0;
}

.logo-login img {
    display: block;
    width: 135px;
    margin: auto;
}

.btn-back {
    width: 100%;
    position: relative;
    height: 68px;
    margin: auto;
}

.btn-back h1 {
    position: absolute;
    left: -15px;
    bottom: 0;
}

.btn-back h1 a {
    display: inline-block;
}

.login-wrap {
    width: 100%;
    margin: auto;
}

.login-wrap ul h3 {
    font-weight: 700;
    color: #535B5D;
    padding-bottom: 10px;
    font-size: 20px;
}

.login-wrap h1.title {
    text-align: center;
    font-size: 28px;
    padding: 30px 0 20px;
    color: #2F3334;
    font-weight: 700;
}

.login-wrap ul li input[type="text"].borderB {
    border-bottom: 1px solid #b4bbbc;
    padding-top: 2px;
}

.login-wrap ul li input[type="password"].borderB {
    border-bottom: 1px solid #b4bbbc;
    padding-top: 2px;
}

.login-wrap ul li input[id="login-txt"]:focus {
    border-bottom: 1px solid#f38d5f;
}

.login-wrap ul li input[type="text"]::placeholder {
    font-size: 1.0em !important;
    color: #535b5d !important;
}

.login-wrap ul li input[type="number"]::placeholder {
    font-size: 1.0em !important;
}

.login-wrap ul li.phone {
    width: 100%;
    padding: 7px 0 0;
}

.login-wrap ul li.phone input {
    height: 60px;
    margin-left: 1.5%;
    font-size: 20px;
    float: left;
    width: 32%;
    font-weight: 200;
}

.login-wrap ul li.phone select {
    float: left;
    width: 33%;
}

.join-wrap .find-box input[type="text"],
input[type="number"],
input[type="password"] {
    height: 48px;
    background-color: #f4f4f4;
    border: 0;
    font-size: 1.0em;
    font-weight: 300;
}

.join-wrap .member-info-box input[type="text"],
input[type="number"],
input[type="password"] {
    height: 48px;
    background-color: #f4f4f4;
    border: 0;
    text-indent: 10px;
    font-size: 1.0em;
    font-weight: 300;
}

.btn-certified {
    width: 100%;
    padding: 8px 0;
    text-align: center;
    border: 1px solid #b1886f;
    color: #b1886f;
    font-weight: 500;
    background-color: #fff;
    font-size: 0.875em;
}

.btn-certified.off {
    border: 1px solid #b4bbbc;
    color: #b4bbbc;
}

.phone-certified {
    width: 100%;
    overflow: hidden;
}

.phone-certified li {
    width: 25%;
    float: left;
}

.phone-certified li:first-child {
    width: 75%;
}

.phone-certified input[type="number"] {
    width: 100%;
    height: 60px;
    font-size: 20px;
}

.phone-certified .certified-time {
    color: #b1886f;
    font-size: 20px;
    line-height: 60px;
    background-color: #F4F4F4;
    text-align: center;
    font-weight: 300;
}

.btn-idpw {
    width: 70%;
    text-align: center;
    margin: 0 auto 40px;
    overflow: hidden;
}

.btn-idpw a {
    color: #535B5D;
    position: relative;
    text-align: center;
    width: 50%;
    float: left;
    font-size: 18px;
    margin-top: 24px;
}

.btn-idpw a:first-child::after {
    content: '';
    width: 1px;
    height: 16px;
    background-color: #B4BBBC;
    position: absolute;
    right: 0;
    top: 4px;
}

.btn-login {
    width: 100%;
    text-align: center;
    overflow: hidden;
    margin-top: 30px;
}

.btn-login a {
    float: left;
    width: 47%;
    border: 1px solid #c4987c;
    color: #c4987c;
    font-weight: 400;
    display: block;
    line-height: 40px;
    font-size: 1.0em;
    letter-spacing: -1px;
}

.btn-login a.enter {
    line-height: 55px;
}

.btn-login a.on {
    background-color: #c4987c;
    color: #fff;
}

.btn-login a:last-child {
    float: right;
}

.btn-reser {
    width: 100%;
    text-align: center;
    overflow: hidden;
    margin-top: 30px;
}

.btn-reser a {
    float: left;
    width: 47%;
    background-color: #c4987c;
    color: #fff;
    font-weight: 600;
    display: block;
    line-height: 56px;
    font-size: 20px;
}

.btn-sns {
    width: 75%;
    margin: 32px auto;
}

.btn-sns a {
    display: block;
    background-color: #F4F4F4;
    text-align: center;
    line-height: 50px;
    font-size: 18px;
    color: #5F6668;
    margin-bottom: 6px;
}

.btn-sns a img {
    width: 25px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 14px;
    margin-top: -4px;
}

.text-login01 {
    font-size: 16px;
    text-align: center;
    line-height: 20px;
    color: #535b5d;
    word-break: keep-all;
    padding-bottom: 20px;
}

.text-login02 {
    font-size: 14px;
    text-align: center;
    line-height: 20px;
    color: #535b5d;
    word-break: keep-all;
    padding-bottom: 10px;
    letter-spacing: -0.7px;
}

.btn-join-text {
    font-size: 18px;
    font-weight: 700;
    color: #f38d5f;
    text-decoration: underline;
    text-align: center;
}

.id-check-box {
    width: 100%;
    padding: 45px 0;
    font-weight: 500;
    text-align: center;
    background-color: #F4F4F4;
    margin-bottom: 15px;
    font-size: 1.125em;
    font-weight: 600;
}


/*-------------------------- join --------------------------*/
.join-wrap {
    width: 100%;
    margin: auto;
}

.join-wrap-02 {
    width: 94%;
    margin: auto;
}

.join-top-box {
    width: 100%;
    background-color: #b1886f;
    color: #fff;
    font-weight: 300;
    text-align: center;
    line-height: 48px;
    text-transform: uppercase;
    font-size: 18px;
    letter-spacing: -0.7px;
}

.join-top-box span {
    color: #f3f3d4;
}

.join-wrap h1.title {
    text-align: center;
    font-size: 20px;
    padding: 30px 0 20px;
    color: #535b5d;
    font-weight: 700;
    letter-spacing: -1px;
}

.join-tab {
    width: 100%;
    height: 40px;
}

.join-tab ul {
    width: 100%;
    overflow: hidden;
}

.join-tab ul li {
    width: 50%;
    color: #fff;
    font-weight: 500;
    font-size: 16px;
    float: left;
    text-align: center;
    background: #b4bbbc;
    box-sizing: border-box;
}

.join-tab ul li a {
    display: block;
    padding: 12px 0;
}

.join-tab ul li.on {
    background: #164b4c !important;
}

.check-all {
    text-align: center;
    width: 100%;
}

.check-all span {
    width: 34px;
    height: 34px;
    display: inline-block;
    margin: 25px 0 14px;
}

.check-all input[type=checkbox] {
    display: none;
}

.check-all input[type=checkbox]+label {
    background-repeat: no-repeat;
    background-image: url('/images/join/agree_all_before.svg');
    background-size: 34px 34px;
    font-size: 0;
    padding: 17px;
    width: 34px;
    height: 34px;
}

.check-all input[type=checkbox]:checked+label {
    background-image: url('/images/join/agree_all_after.svg');
    background-size: 34px 34px;
}

.join-box {
    width: 100%;
}

.join-box ul li h2.title {
    font-size: 1.125em;
    text-align: left;
    color: #535b5d;
    letter-spacing: -1px;
    font-weight: 400;
    padding: 10px 0 20px 10px;
    position: relative;
}

.join-box ul li h2.title b {
    color: #c4987c;
    padding-left: 5px;
    display: inline-block;
}

.check-select-02 {
    position: absolute;
    right: 8px;
    top: 4px;
}

.check-select-02 input[type=checkbox] {
    display: none;
}

.check-select-02 input[type=checkbox]+label {
    background-repeat: no-repeat;
    background-image: url('/images/join/join_agree_before.svg');
    background-size: 24px 24px;
    font-size: 0;
    padding: 12px;
}

.check-select-02 input[type=checkbox]:checked+label {
    background-image: url('/images/join/join_agree_after.svg');
    background-size: 24px 24px;
}

.join-agree-box {
    width: 100%;
    height: 100px;
    border: 1px solid #e8e8e8;
    background-color: #f4f4f4;
    font-size: 0.750em;
    font-weight: 300;
    padding: 12px;
    margin-bottom: 10px;
    overflow: hidden;
    overflow-y: scroll;
    white-space: pre-line;
    line-height: 16px;
}

.text-join01 {
    font-size: 0.875em;
    line-height: 1.25em;
    color: #535b5d;
    word-break: keep-all;
    text-align: left;
    letter-spacing: -1px;
}

.text-join02 {
    color: #2f3334;
    font-weight: 300;
    font-size: 0.875em;
    line-height: 1.5em;
    word-break: keep-all;
    width: 96%;
    margin: auto;
    letter-spacing: -0.38px;
    margin-bottom: 50px;
}

.text-join02 span.text-big {
    color: #b1886f;
    font-size: 1.0em;
    font-weight: 500;
    line-height: 1.5em;
}

.text-join02 span.text-big02 {
    color: #c4987c;
    font-size: 1.1em;
    font-weight: 500;
}

.text-join02 span.text-small {
    font-size: 0.813em;
    color: #2f3334;
}

.certified-box {
    width: 100%;
    overflow: hidden;
    margin: 0 auto 50px;
}

.certified-box li {
    width: 36%;
    float: left;
    text-align: center;
    margin: 0 7%;
}

.certified-box li h2 {
    color: #535b5d;
    font-weight: 600;
}

.certified-box li p {
    border-radius: 50%;
    width: 104px;
    height: 104px;
    background-color: #e8e8e8;
    margin: 20px auto;
    display: flex;
    justify-content: center;
    justify-items: center;
}


/*-------------------------- join03 page --------------------------*/

.check-all {
    text-align: center;
    width: 100%;
}

.check-all span {
    width: 34px;
    height: 34px;
    display: inline-block;
    margin-top: 25px;
}

.member-info-box {
    width: 100%;
}

.member-info-box input::placeholder {
    color: #535b5d;
    font-size: 1.0em;
    text-indent: 10px;
}

.member-info-box dl {
    width: 100%;
    margin-bottom: 30px;
}

.member-info-box dl::after {
    clear: both;
    content: '';
    display: block;
}

.member-info-box dt {
    display: block;
    margin-bottom: 15px;
    color: #000;
    font-weight: 400;
}

.member-info-box dt span {
    vertical-align: text-top;
    color: #ccb835;
    font-weight: 500;
    padding-left: 5px;
}

.member-info-box dd {
    width: 100%;
    margin-bottom: 8px;
}

.enter-name {
    width: 70% !important;
    float: left;
}

.enter-name-full {
    width: 100% !important;
}

.enter-sex {
    width: 28% !important;
    margin-left: 2%;
    float: left;
}

.enter-id {
    width: 70%;
    float: left;
}

.btn-overlap {
    width: 28% !important;
    margin-left: 2%;
    float: left;
    background-color: #b1886f;
    color: #fff;
    font-weight: 400;
    text-align: center;
    line-height: 48px;
}

.btn-overlap-02 {
    width: 28% !important;
    margin-left: 2%;
    float: left;
    border: 1px solid #c4987c;
    color: #c4987c;
    font-weight: 400;
    text-align: center;
    line-height: 45px;
    background-color: #fff;
    height: 47px;
    font-size: 1.0em;
}

.area {
    display: flex;
    justify-content: space-between
}

.area .zone {
    width: 48%;
}

.birthday {
    width: 100%;
}

.email {
    display: flex;
    justify-content: space-between;
    justify-items: center;
    line-height: 48px;
}

.email input[type="text"] {
    width: 45%;
}

.member-info-box .phone {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.member-info-box .phone input {
    font-size: 0.94em;
    width: 32%;
}

.radio-sty01 {
    font-size: 0.88em;
}

.radio-sty01 input[type=radio] {
    display: none;
}

.radio-sty01 input[type=radio]+label {
    background-repeat: no-repeat;
    background-image: url('/images/join/radio.svg');
    background-size: 15px 16px;
    padding-left: 21px;
    padding-right: 20px;
    background-position: left top 0
}

.radio-sty01 input[type=radio]:checked+label {
    background-image: url('/images/join/radio_on.svg');
    background-size: 16px 16px;
}

.join-finish {
    width: 100%;
    margin: 52px 0 0;
}

.join-finish a {
    width: 100%;
    display: block;
    background-color: #c4987c;
    color: #fff;
    font-weight: 600;
    line-height: 56px;
    font-size: 1.0em;
    text-align: center;
}

/*join-select*/
.join-select {
    background: #f4f4f4;
    text-align: left;
    position: relative;
    text-indent: 10px;
    line-height: 48px !important;
}

.join-select.disabled {
    background-color: #fff;
    border: 1px solid #e8e8e8;
    line-height: 46px;
}

.join-select span {
    color: #535b5d;
    font-size: 1.0em;
}

.join-select li .options {
    display: block;
    margin: 0;
    background: #fff;
    position: absolute;
    width: 100%;
    overflow: hidden;
    max-height: 0;
    border: 1px solid #e8e8e8;
    border-top: 0;
    top: 49px;
    left: 0;
    opacity: 0;
}

.join-select li .options li {
    transition: 0.5s ease all;
    border-bottom: 1px solid #e8e8e8;
}

.join-select li .options li:last-child {
    border-bottom: 0;
}

.join-select li .options.open {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-top: 0;
    opacity: 1;
    max-height: 1000%;
}

.join-select:before {
    content: '';
    width: 0;
    height: 0;
    border-left: 0.3em solid transparent;
    border-right: 0.3em solid transparent;
    border-top: 0.4em solid #c4987c;
    position: absolute;
    top: 20px;
    right: 1em;
    transition: all ease 0.25s;
}

/*-------------------------- login --------------------------*/
.basic-login-wrap-mobile {
    background: url(/images/join/join_bg_mo.png) center center no-repeat;
    background-size: 100% 100%;
    /* position: flex !important;
    top: -90px; */
    width: 100%;
    height: 100vh;
    overflow: hidden;

}

.basic-login-wrap-pc {
    display: none;
}

.basic-login-wrap-tablet {
    display: none;
}

.content-wrap {
    width: 100%;
    height: auto;
    position: relative;
    margin: 0 auto;
    padding: 5px 0;
}

.join-wrap-03 {
    width: 90%;
    margin: 0 auto;
    margin-top: 130px;
}

.join-wrap-03 .reser-tit {
    font-size: 1.500em;
    color: #fff;
    line-height: 1;
    font-weight: 300;
    margin: 20px 0 15px;
}

.join-wrap-03 .tit-text {
    font-size: 0.875em;
    color: #fff;
    font-weight: 300;
    margin-bottom: 20px;
    word-break: keep-all;
    line-height: 1.5em;
    display: inline-block;
}

.login-wrap-03 {
    width: 100%;
    margin: auto;
}

.login-wrap-03 ul li input[type="text"]::placeholder {
    font-size: 1.000em;
    color: #000;
}

.login-wrap-03 ul li input[type="password"]::placeholder {
    font-size: 1.000em;
    color: #000;
}

.login-wrap-03 ul li input[type="number"]::placeholder {
    font-size: 1.000em;
    color: #000;
}

.login-wrap-03 input[type="text"],
input[type="password"],
input[type="number"] {
    width: 100%;
    height: 48px !important;
    background-color: #f4f4f4 !important;
    border: 0;
    text-indent: 13px !important;
    font-size: 1.000em !important;
    font-weight: 300 !important;
}

.login-wrap-03 .btn-idpw-03 {
    width: 100%;
    text-align: right;
}

.login-wrap-03 .btn-idpw-03 a {
    color: #fff;
    position: relative;
    font-size: 0.875em;
    margin: 0 10px;
}

.login-wrap-03 .btn-idpw-03 a::after {
    content: '';
    width: 1px;
    height: 14px;
    background-color: #fff;
    position: absolute;
    right: 0;
    top: 2px;
    right: -9px;
}

.login-wrap-03 .btn-idpw-03 a:last-child::after {
    display: none;
    margin-right: 0 !important;
}

.btn-login-white {
    width: 100%;
    text-align: center;
    overflow: hidden;
    margin: 0 auto;
}

.btn-login-white a {
    width: 100%;
    border: 1px solid #ffffff;
    background-color: rgba(177, 136, 111, 0.75);
    color: #ffffff;
    font-weight: 400;
    display: block;
    line-height: 48px;
    font-size: 1.125em;
    letter-spacing: -1px;
    margin-bottom: 10px;
}

.login-wrap-03 .pin-code {
    width: 100%;
    border: 1px solid #ffffff;
    height: 32px;
    text-align: center;
    padding: 7px 0;
    font-size: 0.875em;
    color: #ffffff;
}

.login-wrap-03 .id-check {
    width: 100%;
    height: 88px;
    background-color: #f4f4f4;
    font-size: 1.0em;
    color: #000;
    text-align: center;
    font-weight: 500;
    padding: 35px 0;
}


/*-------------------------- mapage --------------------------*/
.mypage-wrap {
    width: 100%;
    margin: auto;
    padding-bottom: 43px;
}

.mypage-bg {
    background: url(/images/mypage/mypage_bg_mo.png) center center no-repeat;
    background-size: 100% 100%;
    position: relative;
    top: 0;
    width: 100%;
    height: 220px;
}

.content-wrap {
    width: 96%;
    height: auto;
    position: relative;
    margin: 0 auto;
}

.content-box {
    width: 100%;
    height: auto;
    margin-top: 40px;
}

.content-box .basic-title {
    font-size: 1.250em;
    color: #000;
    text-align: center;
    font-weight: 400;
}

.content-box .mypage-tab {
    width: 100%;
    text-align: center;
    margin-bottom: 30px;
    font-size: 0;
}

.content-box .mypage-tab li {
    display: inline-block;
    font-size: 14px;
    color: #5f6668;
    border: 1px solid #dddddd;
    width: 33.3%;
    height: 40px;
    text-align: center;
    font-weight: 400;
    padding: 13px 0;
    vertical-align: middle;
}

.content-box .mypage-tab li:last-child {
    width: 33.4% !important;
}

.content-box .mypage-tab .on {
    background-color: #c4987c;
    color: #fff;
    border: none !important;
}

.mypage-table-pc {
    display: none;
}

.mypage-table-mobile {
    width: 100%;
    border-top: 1px solid #000;
}

.mypage-table-mobile .gray {
    background-color: #f9f9f9;
}

.mypage-table-mobile .border-gray {
    border-bottom: 1px solid #e8e8e8;
}

.mypage-table-mobile img {
    width: 100%;
    display: block;
    text-align: center;
    margin: 0 auto;
    min-width: 90px;
}

.mypage-table-mobile tr td {
    vertical-align: middle;
    padding: 15px 10px;
}

.mypage-table-mobile .sub {
    vertical-align: middle;
    padding: 0 0 10px 10px !important;
}

.mypage-table-mobile tr .cancel-td {
    text-align: right;
}

.mypage-table-mobile .reser-none {
    text-align: center;
    font-size: 0.813em;
    color: #000;
    font-weight: 300;
    padding: 15px 0;
}

.mypage-table-mobile tr td .my-cancel-btn {
    padding: 2px 20px;
    border: 1px solid #ddd;
    border-radius: 2px;
    text-align: center;
    font-size: 0.750em;
    margin-right: 5px;
}

.mypage-table-mobile tr td .my-cancel-btn:last-child {
    margin-right: 0;
}

.mypage-table-mobile tr .my-cancel-btn a {
    font-size: 12px;
    color: #5f6668;
}


.mypage-table-mobile .mypage-list {
    text-align: left;
    display: inline-block;
}

.mypage-table-mobile .mypage-list li {
    font-size: 0.750em;
    color: #000;
    padding: 2px 0;
    font-weight: 300;
}

.mypage-table-mobile .mypage-list .list-tit {
    font-size: 1.250em;
}

.mypage-table-mobile .mypage-list span {
    color: #dddddd !important;
}

.mypage-table-mobile .mypage-list .blue {
    color: #033f64 !important;
}

/*-------------------------- customer --------------------------*/
.customer-wrap {
    width: 100%;
    height: 1500px;
    background-color: #f3ede6;
}

.customer-bg {
    background: url(/images/customer/customer_bg_mo.png) center center no-repeat;
    background-size: 100% 100%;
    position: relative;
    top: 0;
    width: 100%;
    height: 667px;
}

.customer-bg img {
    display: block;
    margin: 0 auto;
    position: relative;
    top: 42%;
    width: 74px;
}

.customer-bg .big-tit {
    font-size: 2.500em;
    text-align: center;
    color: #fff;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.32);
    position: relative;
    top: 44%;
}

.content-box-02 {
    width: 96%;
    margin: 0 auto;
}

.table-line {
    position: relative;
}

.customer-table-pc {
    display: none;
}

.customer-table-mobile {
    width: 100%;
    border-top: 1px solid #b1886f;
    font-size: 0.938em;
    margin-top: 50px;
}

.customer-table-mobile tr th {
    font-weight: 400;
    vertical-align: middle;
    text-align: center;
    position: relative;
    color: #384043;
}

.customer-table-mobile tr th::after {
    content: '';
    width: 95%;
    height: 1px;
    background-color: #b4bbbc;
    position: absolute;
    bottom: 0;
    left: 4px;
}

.customer-table-mobile tr td {
    vertical-align: middle;
    padding: 14px 0;
    font-weight: 300;
    position: relative;
    text-align: center;
    color: #5f6668;
}

.customer-table-mobile tr td::after {
    content: '';
    width: 95%;
    height: 1px;
    background-color: #dddddd;
    position: absolute;
    bottom: 0;
    left: 4px;
}

.table-line tbody tr .no-pad {
    padding: 5px 0 !important;
}

.table-line tbody tr .no-after::after {
    background-color: #f3ede6 !important;
}

/*customer-select*/
.customer-select {
    background: #fff;
    text-align: left;
    position: relative;
    text-indent: 10px;
    line-height: 41px;
}

.customer-select span {
    color: #000;
    font-size: 0.938em;
    margin-left: 9px;
}

.customer-select li .options {
    display: block;
    margin: 0;
    background: #fff;
    position: absolute;
    width: 100%;
    overflow: hidden;
    max-height: 0;
    border: 1px solid #e8e8e8;
    border-top: 0;
    top: 42px;
    left: 0;
    opacity: 0;
    font-size: 15px;
    text-indent: 17px;
    color: #000;
    transition: 0.3s;
}

.customer-select li .options li {
    border-bottom: 1px solid #e8e8e8;
}

.customer-select li .options li:last-child {
    border-bottom: 0;
}

.customer-select li .options.open {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-top: 0;
    opacity: 1;
    max-height: 1000%;
    z-index: 10;
}

.customer-select:before {
    content: '';
    width: 0;
    height: 0;
    border-left: 0.3em solid transparent;
    border-right: 0.3em solid transparent;
    border-top: 0.4em solid #c4987c;
    position: absolute;
    top: 20px;
    right: 1em;
    transition: all ease 0.25s;
}

.custo-write-01 {
    width: 100%;
    height: 42px;
    background-color: #fff;
    border: 0;
    box-sizing: border-box;
    font-size: 0.938em;
    font-weight: 300;
    padding: 11px 18px;
    word-break: keep-all;
    line-height: 1.5em;
    overflow: hidden;
    color: #000;
    font-weight: 400;
}

.custo-write-02 {
    width: 100%;
    height: 160px;
    background-color: #fff;
    border: 0;
    box-sizing: border-box;
    font-size: 0.938em;
    font-weight: 300;
    padding: 11px 18px;
    line-height: 1.5em;
    word-break: keep-all;
    color: #000;
    font-weight: 400;
}

.customer-txt {
    margin: 25px 15px 45px;
}

.customer-txt p {
    font-size: 14px;
    font-weight: 300;
    color: #000;
    line-height: 1.5em;
    word-break: keep-all;
    position: relative;
}

.customer-txt p:after {
    position: absolute;
    top: 0;
    left: -10px;
    content: '-';
    display: block;
}

/* basic_two_btn */
.basic-btn-pc {
    display: none;
}

.basic-btn-mobile {
    font-size: 1.000em;
    font-weight: 500;
    margin: 0 auto;
    width: 100%;
    display: block;
}

.basic-btn-mobile .short-btn {
    display: inline-block;
    width: 35%;
    padding: 11px 0;
    border: 1px solid #b1886f;
    color: #b1886f;
    text-align: center;
    margin-right: 3%;
}

.basic-btn-mobile .long-btn {
    display: inline-block;
    width: 60%;
    padding: 12px 0;
    background-color: #b1886f;
    color: #fff;
    text-align: center;
}

/*-------------------------- 01. LODGE --------------------------*/

.lodge-video-pc {
    display: none;
}

.lodge-video-tablet {
    display: none;
}

/*------- Lodge section01 -------*/
#lodge-section-01 {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100vh;
}

#lodge-section-01 .sec-01-con {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    text-align: center;
    position: relative;
    top: 0;
}

#lodge-section-01 .lodge-bg {
    background: url(/images/mobile/lodge/brand_bg_01.png) center center no-repeat;
    background-position: center top;
    position: relative;
    overflow: hidden;
    background-attachment: fixed;
    background-size: cover;
    top: 0;
    width: 100%;
    height: 100%;
}

.lodge-video-mobile {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
}

#lodgeVideoMobile {
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    object-fit: cover;
    overflow: hidden;
}

.fade-out-mobile {
    position: absolute;
    display: inline-block;
    top: 46%;
    right: 50%;
    transform: translateX(50%);
    animation: fadeout 5s;
    -moz-animation: fadeout 5s;
    /* Firefox */
    -webkit-animation: fadeout 5s;
    /* Safari and Chrome */
    -o-animation: fadeout 5s;
    /* Opera */
    animation-fill-mode: forwards;
}

@keyframes fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@-moz-keyframes fadeout {

    /* Firefox */
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@-webkit-keyframes fadeout {

    /* Safari and Chrome */
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@-o-keyframes fadeout {

    /* Opera */
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/*------- Lodge section02 -------*/
#lodge-section-02 {
    background-color: #f3ede6;
    width: 100%;
    height: auto;
    overflow: hidden;
    padding-bottom: 13%;
}

#lodge-section-02 .left-con {
    width: 100%;
    position: relative;
    transform: translateY(9%);
}

#lodge-section-02 .img-area {
    margin: 60px 0;
    position: absolute;
    width: 100%;
}

#lodge-section-02 .img-area img {
    width: 85%;
}

#lodge-section-02 .left-con-sub {
    width: 25%;
    position: absolute;
    right: 0;
    transform: translateY(150%);
}

#lodge-section-02 .left-con-sub img {
    width: 100%;
    display: block;
}

#lodge-section-02 .right-con {
    width: 100%;
    margin-top: 97%;
    margin-bottom: 20px;
}

#lodge-section-02 .text-area {
    width: 79%;
    margin: 0 auto;
}

#lodge-section-02 .text-area h2 {
    font-family: 'Noto Sans KR';
    color: #b1886f;
    font-size: 1.375em;
    margin-bottom: 24px;
    line-height: 28px;
    font-weight: 300;
}

#lodge-section-02 .text-area .line-grey {
    width: 100%;
    height: 1px;
    background-color: #b1886f;
    display: block;
    opacity: 0.25;
    margin-bottom: 24px;
}

#lodge-section-02 .text-area p {
    color: #000;
    font-size: 0.750em;
    line-height: 1.5em;
    font-weight: 100;
    word-break: keep-all;
}

/*------- Lodge section03 -------*/
#lodge-section-03 .section-03-pc {
    display: none;
}

#lodge-section-03 .section-03-tablet {
    display: none;
}

#lodge-section-03 {
    background-color: #f3ede6;
    width: 100%;
    height: auto;
    overflow: hidden;
    padding-bottom: 13%;
}

#lodge-section-03 .section-03-mobile {
    background-color: #f3ede6;
    width: 100%;
    height: 100%;
}

#lodge-section-03 .right-con-all {
    width: 100%;
}

#lodge-section-03 .right-con {
    width: 90%;
    height: 100%;
    position: relative;
    float: right;
}

#lodge-section-03 .right-con-sub {
    width: 25%;
    position: absolute;
    left: -12%;
    transform: translateY(187%);
}

#lodge-section-03 .right-con-sub .img-area-sub img {
    width: 100%;
    display: block;
}

#lodge-section-03 .right-con-img {
    position: relative;
    right: 0;
    width: 100%;
}

#lodge-section-03 .right-con-01 {
    width: 33.3%;
    float: right;
}

#lodge-section-03 .right-con-01 .img-area-01 img {
    width: 100%;
}

#lodge-section-03 .right-con-02 {
    width: 33.3%;
    float: right;
}

#lodge-section-03 .right-con-02 .img-area-02 img {
    margin-top: 60%;
    width: 100%;
}

#lodge-section-03 .right-con-03 {
    width: 33.3%;
    float: right;
}

#lodge-section-03 .right-con-03 .img-area-03 img {
    margin-top: 15%;
    width: 100%;
}


#lodge-section-03 .left-con {
    width: 100%;
    position: relative;
    transform: translateY(7%);
}

#lodge-section-03 .img-area {
    margin: 60px 0;
}

#lodge-section-03 .img-area img {
    width: 100%;
}

#lodge-section-03 .text-area {
    width: 79%;
    margin: 0 auto;
}

#lodge-section-03 .text-area h2 {
    font-family: 'neuNoto Sans KRe';
    color: #b1886f;
    font-size: 1.375em;
    margin-bottom: 24px;
    line-height: 24px;
    font-weight: 300;
}

#lodge-section-03 .text-area .line-grey {
    width: 100%;
    height: 1px;
    background-color: #b1886f;
    display: block;
    opacity: 0.25;
    margin-bottom: 24px;
}

#lodge-section-03 .text-area p {
    color: #000;
    font-size: 0.750em;
    line-height: 1.5em;
    font-weight: 100;
    word-break: keep-all;
}


/*------- Lodge section04 -------*/
#lodge-section-04 {
    background-color: #f3ede6;
    width: 100%;
    height: auto;
    overflow: hidden;
    padding-bottom: 80px;
    position: relative;
}

#lodge-section-04 .left-con {
    width: 100%;
}

#lodge-section-04 .img-area-pc {
    display: none;
}

#lodge-section-04 .img-area-tablet-01 {
    display: none;
}

#lodge-section-04 .img-area-tablet-02 {
    display: none;
}

#lodge-section-04 .img-area-mobile-01 {
    margin: 30px 0;
}

#lodge-section-04 .img-area-mobile-02 img {
    margin: 30px 0 0 5%;
}

#lodge-section-04 .left-con img {
    width: 100%;
}

#lodge-section-04 .right-con {
    width: 100%;
}

#lodge-section-04 .right-con {
    width: 100%;
}

#lodge-section-04 .right-con .text-area .lodge-num {
    width: 100%;
    height: auto;
    font-size: 0.938em;
    letter-spacing: -0.38px;
    color: #000;
    font-weight: 500;
    text-align: left;
    padding-bottom: 6px;
    font-family: 'NotoSansKR';
    display: flex;
    align-items: center;
}

#lodge-section-04 .right-con .text-area .lodge-num .num {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    color: #fff;
    background-color: #000;
    text-align: center;
    font-size: 0.688em;
    font-weight: 300;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-right: 1%;
}

#lodge-section-04 .right-con .text-area .lodge-num .sub {
    font-size: 0.875em;
    margin-left: 1%;
}

#lodge-section-04 .text-area {
    width: 79%;
    margin-left: 5%;
}

#lodge-section-04 .text-area h2 {
    font-family: 'neue';
    color: #b1886f;
    font-size: 1.500em;
    margin-bottom: 24px;
    line-height: 24px;
    font-weight: 400;
}

#lodge-section-04 .text-area .line-grey {
    width: 95%;
    height: 1px;
    background-color: #b1886f;
    display: block;
    opacity: 0.25;
    margin-bottom: 24px;
}

#lodge-section-04 .text-area h3 {
    color: #000;
    font-size: 1.125em;
    line-height: 1.500em;
    margin-bottom: 14px;
    font-weight: 400;
}

#lodge-section-04 .text-area p {
    color: #000;
    font-size: 0.750em;
    line-height: 1.5em;
    font-weight: 100;
    word-break: keep-all;
}

#lodge-section-04 .left-con-sub {
    width: 25%;
    position: absolute;
    right: 0;
    transform: translateY(-270%);
}

#lodge-section-04 .left-con-sub img {
    width: 100%;
    display: block;
}


/*-------------------------- 02. STAY --------------------------*/
/*------- stay section01 -------*/
#stay-section-01 {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100vh;
}

.stay-video-mobile {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
}

#stayVideoMobile {
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    object-fit: cover;
    overflow: hidden;
}

.fade-out-mobile {
    position: absolute;
    display: inline-block;
    top: 46%;
    right: 50%;
    transform: translateX(50%);
    animation: fadeout 5s;
    -moz-animation: fadeout 5s;
    /* Firefox */
    -webkit-animation: fadeout 5s;
    /* Safari and Chrome */
    -o-animation: fadeout 5s;
    /* Opera */
    animation-fill-mode: forwards;
}

@keyframes fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@-moz-keyframes fadeout {

    /* Firefox */
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@-webkit-keyframes fadeout {

    /* Safari and Chrome */
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@-o-keyframes fadeout {

    /* Opera */
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/*------- stay section02 -------*/
#stay-section-02-mobile {
    background-color: #f3ede6;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#stay-section-02-pc {
    display: none;
}

#stay-section-03-pc {
    display: none;
}

#stay-section-04-pc {
    display: none;
}

#stay-section-02-tablet {
    display: none;
}

#stay-section-03-tablet {
    display: none;
}

#stay-section-04-tablet {
    display: none;
}

#stay-section-02-mobile .left-con {
    width: 100%;
    height: 100%;
    padding: 40px 0;
}

#stay-section-02-mobile .swiper-slide img {
    width: 100%;
    height: 100%;
}

#stay-section-02-mobile .right-con {
    width: 100%;
    height: 220px;
    background-color: rgba(255, 255, 255, 0.8);
}

#stay-section-02-mobile .right-con .text-area {
    width: 90%;
    margin: 0 auto;
    padding: 30px 0;
    word-break: keep-all;
}

#stay-section-02-mobile .right-con .text-area h2 {
    font-size: 1.375em;
    font-weight: 500;
    color: #b1886f;
    padding-bottom: 15px;
}

#stay-section-02-mobile .right-con .text-area p {
    font-size: 0.750em;
    font-weight: 200;
    color: #000;
    letter-spacing: -0.3px;
    padding-bottom: 24px;
    line-height: 18px;
    width: 90%;
}

#stay-section-02-mobile .right-con .text-area .more-btn {
    width: 124px;
    height: 32px;
    text-align: center;
    border-radius: 4px;
    border: 1px solid #c4987c;
    font-size: 0.875em;
    color: #c4987c;
    padding: 8px 0;
    float: right;
}

/*stay_gallery layer popup*/
.spa-layer-pop {
    width: 100%;
    height: 100vh;
    margin: 0 auto;
    color: #fff;
    z-index: 2000;
    position: fixed;
    top: 0;
    overflow: auto;
    background-color: #fff;
}

.overlay-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1004;
}

.spa-layer-wrap {
    position: relative;
    width: 100%;
    background: #fff;
}

.spa-layer-top-all {
    width: 100%;
    border-bottom: 1px solid #ddd;
}

.spa-layer-top {
    width: 95%;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    padding: 20px 0;
}

.spa-layer-top li {
    font-size: 1.000em;
    float: left;
    font-weight: 400;
    color: #000;
}

.spa-layer-wrap .x-btn {
    display: inline-block;
}

.roomSlider {
    width: 95%;
    height: 170px;
    display: block;
    margin: 20px auto;
}

.roomSlider img {
    width: 100% ;
    height: 100% ;
    object-fit: cover;
}

/* 수정된 갤러리 CSS  */
.spa-layer-wrap .slick-next {
    display: none !important;
}

.spa-layer-wrap .slick-arrow {
    display: none !important;
}

.spa-layer-wrap .presentation {
    display: none !important;
}

.spa-layer-wrap .slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding-left: -680px !important;
}

/* Dots */
.spa-layer-wrap .slick-dotted.slick-slider {
    width: 95%;
    margin: 15px auto;
    overflow: hidden;
}

.spa-layer-wrap .slick-dots {
    position: absolute;
    bottom: 15px !important;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}

.spa-layer-wrap .slick-dots li {
    position: relative;
    display: inline-block;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    margin: 0 8px !important;
    padding: 0;
    cursor: pointer;
}

.spa-layer-wrap .slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
    border: 1px solid #ffff !important;
}

.spa-layer-wrap .slick-dots li button:hover,
.spa-layer-wrap .slick-dots li button:focus {
    outline: none;
}

.spa-layer-wrap .slick-dots li button:hover:before,
.spa-layer-wrap .slick-dots li button:focus:before {
    opacity: 1;
}

.spa-layer-wrap .slick-dots li button:before {
    font-family: 'slick';
    font-size: 0 !important;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    content: '•';
    text-align: center;
    opacity: 1;
    color: none !important;
    border: 1px solid #ffff !important;
}

.spa-layer-wrap .slick-dots li.slick-active button:before {
    background-color: #ffffff !important;
    opacity: 1 !important;
    border-radius: 50% !important;
}

.gallery-con {
    width: 95%;
    font-size: 0.938em;
    color: #000;
    letter-spacing: -0.38px;
    line-height: 25px;
    margin: 0 auto;
    word-break: keep-all;
}

.gallery-con ul .tit {
    font-weight: 400;
}

.gallery-con ul .txt {
    font-weight: 200;
    padding-bottom: 20px;
}

.gallery-con ul .room {
    width: 50%;
    height: auto;
    padding: 20px 0;
}

.gallery-con ul .room img {
    width: 170px;
}

.room-btn {
    max-width: 280px;
    min-width: 200px;
    height: 40px;
    background-color: #c4987c;
    color: #fff;
    font-size: 1.0em;
    text-align: center;
    padding: 11px 0;
    font-weight: 500;
    margin: 0 auto;
    cursor: pointer;
}

/*------- stay section03 -------*/
#stay-section-03-mobile {
    background-color: #f3ede6;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#stay-section-03-mobile .left-con {
    width: 100%;
    height: 100%;
    padding-bottom: 40px;
}

#stay-section-03-mobile .swiper-slide img {
    width: 100%;
}

#stay-section-03-mobile .right-con {
    width: 100%;
    height: 220px;
    background-color: rgba(255, 255, 255, 0.8);
}

#stay-section-03-mobile .right-con .text-area {
    width: 90%;
    margin: 0 auto;
    padding: 30px 0;
    word-break: keep-all;
}

#stay-section-03-mobile .right-con .text-area h2 {
    font-size: 1.375em;
    font-weight: 500;
    color: #b1886f;
    padding-bottom: 15px;
}

#stay-section-03-mobile .right-con .text-area p {
    font-size: 0.750em;
    font-weight: 200;
    color: #000;
    letter-spacing: -0.3px;
    padding-bottom: 24px;
    line-height: 18px;
    width: 90%;
}

#stay-section-03-mobile .right-con .text-area .more-btn {
    width: 124px;
    height: 32px;
    text-align: center;
    border-radius: 4px;
    border: 1px solid #c4987c;
    font-size: 0.875em;
    color: #c4987c;
    padding: 8px 0;
    float: right;
}

/*------- stay section04 -------*/
#stay-section-04-mobile {
    background-color: #f3ede6;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#stay-section-04-mobile .left-con {
    width: 100%;
    height: 100%;
    padding-bottom: 40px;
}

#stay-section-04-mobile .swiper-slide img {
    width: 100%;
}

#stay-section-04-mobile .right-con {
    width: 100%;
    height: 220px;
    background-color: rgba(255, 255, 255, 0.8);
}

#stay-section-04-mobile .right-con .text-area {
    width: 90%;
    margin: 0 auto;
    padding: 20px 0;
    word-break: keep-all;
}

#stay-section-04-mobile .right-con .text-area h2 {
    font-size: 1.375em;
    font-weight: 500;
    color: #b1886f;
    padding-bottom: 15px;
}

#stay-section-04-mobile .right-con .text-area p {
    font-size: 0.750em;
    font-weight: 200;
    color: #000;
    letter-spacing: -0.3px;
    padding-bottom: 24px;
    line-height: 18px;
    width: 90%;
}

#stay-section-04-mobile .right-con .text-area .more-btn {
    width: 124px;
    height: 32px;
    text-align: center;
    border-radius: 4px;
    border: 1px solid #c4987c;
    font-size: 0.875em;
    color: #c4987c;
    padding: 8px 0;
    float: right;
}

/*-------------------------- 03. DINE --------------------------*/
.dine-video-pc {
    display: none;
}

.dine-video-tablet {
    display: none;
}

/*------- dine section01 -------*/
#dine-section-01 {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100vh;
}

.dine-video-mobile {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
}

#dineVideoMobile {
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    object-fit: cover;
    overflow: hidden;
}

.fade-out-mobile {
    position: absolute;
    display: inline-block;
    top: 46%;
    right: 50%;
    transform: translateX(50%);
    animation: fadeout 5s;
    -moz-animation: fadeout 5s;
    /* Firefox */
    -webkit-animation: fadeout 5s;
    /* Safari and Chrome */
    -o-animation: fadeout 5s;
    /* Opera */
    animation-fill-mode: forwards;
}

@keyframes fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@-moz-keyframes fadeout {

    /* Firefox */
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@-webkit-keyframes fadeout {

    /* Safari and Chrome */
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@-o-keyframes fadeout {

    /* Opera */
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/*------- dine section02 -------*/
#dine-section-02 {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: clamp(206.5625rem, 131.875rem + 373.4375vw, 281.25rem);
    background-color: #f3ede6;
}

.dine-content-wrap {
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

.intro-bg {
    width: 100%;
    height: 218px;
    background: url('/images/dine/dine_01.png') no-repeat center center;
    background-size: cover;
    position: relative;
    margin-top: 60px;
}

.intro-bg .intro-01 {
    background-color: rgba(255, 255, 255, 0.9);
    width: 90%;
    height: clamp(13.75rem, 15rem + -6.25vw, 12.5rem);
    text-align: center;
    margin: 0 auto;
    position: absolute;
    right: 50%;
    top: 155px;
    transform: translateX(50%);
}

.intro-bg .intro-01 h3,
.intro-02 h3 {
    font-size: clamp(1.125rem, 0.875rem + 1.25vw, 1.375rem);
    line-height: 44px;
    color: #b1886f;
    font-weight: 500;
    text-transform: uppercase;
    margin-top: 20px;
    word-break: keep-all;
}

.intro-bg .intro-01 p {
    font-size: clamp(0.75rem, 0.625rem + 0.625vw, 0.875rem);
    line-height: 1.25em;
    letter-spacing: -0.43px;
    color: #000;
    font-weight: 200;
    padding-top: 13px;
    width: 80%;
    margin: 0 auto;
    word-break: keep-all;
}

.intro-bg .intro-02 {
    width: 80%;
    height: 100%;
    text-align: center;
    margin: 0 auto;
    position: absolute;
    right: 50%;
    top: 370px;
    transform: translateX(50%);
    word-break: keep-all;
}

.intro-bg .intro-02 p {
    font-size: clamp(0.75rem, 0.625rem + 0.625vw, 0.875rem);
    line-height: 1.25em;
    letter-spacing: -0.43px;
    color: #000;
    font-weight: 200;
    padding-top: 13px;
}

.food-bg {
    width: 101%;
    height: 250px;
    background: url('/images/dine/dine_02.png') no-repeat center center;
    background-size: cover;
    position: absolute;
    top: 600px;
    right: 50%;
    transform: translateX(50%);
}

.food-bg .intro-03 {
    text-align: center;
}

.food-bg .intro-03 h3 {
    font-size: clamp(1.125rem, 0.875rem + 1.25vw, 1.375rem);
    line-height: 44px;
    color: #b1886f;
    font-weight: 500;
    text-transform: uppercase;
    margin-top: 60px;
}

.food-bg .intro-03 p {
    font-size: clamp(0.75rem, 0.625rem + 0.625vw, 0.875rem);
    line-height: 1.25em;
    letter-spacing: -0.43px;
    color: #fff;
    font-weight: 200;
    padding-top: 13px;
    width: 85%;
    margin: 0 auto;
    word-break: keep-all;
}

.food-wrap {
    display: none;
}

.food-wrap-mo {
    width: 90%;
    height: 100%;
    position: absolute;
    top: 900px;
    right: 50%;
    transform: translateX(50%);
}

.dinner-con {
    width: 100%;
    height: 100%;
    position: absolute;
}

.dinner-con .dinner-right {
    width: 100%;
    height: auto;
}

.dinner-con .dinner-right img {
    width: 106%;
}

.dinner-bg {
    width: 100%;
    height: clamp(5.625rem, 3.8561rem + 7.5472vw, 6.875rem);
    background: url('/images/dine/menu_02.png') no-repeat center center;
    background-size: 100%;
}

.dinner-con .dinner-left {
    width: 90%;
    display: block;
    margin: 0 auto;
}

.dinner-con .dinner-left h4 {
    font-size: clamp(1.125rem, 0.875rem + 1.25vw, 1.375rem);
    line-height: 44px;
    color: #b1886f;
    font-weight: 500;
}

.dinner-con .dinner-left p {
    font-size: clamp(0.75rem, 0.625rem + 0.625vw, 0.875rem);
    line-height: 1.25em;
    letter-spacing: -0.43px;
    color: #000;
    font-weight: 200;
    padding-top: 10px;
}

.bar-con {
    width: 100%;
    height: 100%;
    position: absolute;
    top: clamp(31.25rem, 13.5613rem + 75.4717vw, 43.75rem);
}

.bar-con .bar-left {
    width: 100%;
}

.bar-con .bar-left img {
    width: 100%;
    margin-bottom: 2%;
}

.bar-con .bar-right {
    width: 90%;
    display: block;
    margin: 0 auto;
}

.bar-con .bar-right h4 {
    font-size: clamp(1.125rem, 0.875rem + 1.25vw, 1.375rem);
    line-height: 44px;
    color: #b1886f;
    font-weight: 500;
}

.bar-con .bar-right p {
    font-size: clamp(0.75rem, 0.625rem + 0.625vw, 0.875rem);
    line-height: clamp(1.25rem, 0.749rem + 0.7821vw, 1.6875rem);
    letter-spacing: -0.43px;
    color: #000;
    font-weight: 200;
    padding-top: 10px;
}

.break-con {
    width: 100%;
    height: 100%;
    position: absolute;
    top: clamp(53.125rem, 17.7476rem + 150.9434vw, 78.125rem);
}

.break-con .break-left {
    width: 100%;
}

.break-con .break-left img {
    width: 106%;
    margin-bottom: 2%;
    position: relative;
    transform: translateX(50%);
    right: 59%;
}

.break-con .break-right {
    width: 90%;
    display: block;
    margin: 0 auto;
}

.break-con .break-right h4 {
    font-size: clamp(1.125rem, 0.875rem + 1.25vw, 1.375rem);
    line-height: 44px;
    color: #b1886f;
    font-weight: 500;
}

.break-con .break-right p {
    font-size: clamp(0.75rem, 0.625rem + 0.625vw, 0.875rem);
    line-height: clamp(1.25rem, 0.749rem + 0.7821vw, 1.6875rem);
    letter-spacing: -0.43px;
    color: #000;
    font-weight: 200;
    padding: 10px clamp(0rem, -5.7531rem + 14.3603vw, 3.4375rem) clamp(0rem, -7.8451rem + 19.5822vw, 4.6875rem) 0;
    word-break: keep-all;
}

.break-con .break-right img {
    display: inline-block;
    width: 100%;
    margin-bottom: 2%;
}

.library-wrap {
    display: none;
}

.library-wrap-mo {
    width: 90%;
    height: 100%;
    position: absolute;
    top: clamp(84.375rem, 40.625rem + 218.75vw, 128.125rem);
    right: 50%;
    transform: translateX(50%);
}

.library-con {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 900px;
}

.library-con .library-left {
    width: 100%;
}

.library-con .library-left img {
    width: 106%;
    margin-bottom: 2%;
}

.library-con .library-right {
    width: 90%;
    display: block;
    margin: 0 auto;
}

.library-con .library-right h4 {
    font-size: clamp(1.125rem, 0.875rem + 1.25vw, 1.375rem);
    line-height: 44px;
    color: #b1886f;
    font-weight: 500;
}

.library-con .library-right p {
    font-size: clamp(0.75rem, 0.625rem + 0.625vw, 0.875rem);
    line-height: clamp(1.25rem, 0.749rem + 0.7821vw, 1.6875rem);
    letter-spacing: -0.43px;
    color: #000;
    font-weight: 200;
    padding-top: 10px;
}

.farm-con {
    width: 100%;
    height: 100%;
    position: absolute;
    top: clamp(93.75rem, 75rem + 93.75vw, 112.5rem);
}

.farm-con .farm-left {
    width: 100%;
}

.farm-con .farm-left img {
    width: 106%;
    margin-bottom: 2%;
    position: relative;
    transform: translateX(50%);
    right: 59%;
}

.farm-con .farm-right {
    width: 90%;
    display: block;
    margin: 0 auto;
}

.farm-con .farm-right h4 {
    font-size: clamp(1.125rem, 0.875rem + 1.25vw, 1.375rem);
    line-height: 44px;
    color: #b1886f;
    font-weight: 500;
}

.farm-con .farm-right p {
    font-size: clamp(0.75rem, 0.625rem + 0.625vw, 0.875rem);
    line-height: clamp(1.25rem, 0.749rem + 0.7821vw, 1.6875rem);
    letter-spacing: -0.43px;
    color: #000;
    font-weight: 200;
    padding-top: 10px;
}

/*------- dine section03 -------*/
#dine-section-03 {
    display: none;
}

#dine-section-03-mo {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: clamp(78.125rem, 39.6875rem + 192.1875vw, 116.5625rem);
    background-color: rgba(196, 152, 124, 0.35);
}

.txt-bg {
    display: none;
}

.txt-bg-width {
    background: url('/images/dine/chef_000.png') no-repeat center center;
    background-size: 95%;
    width: 242px;
    height: 36px;
    position: absolute;
    top: 40px;
    right: 6%;
}

.chef-wrap {
    width: 100%;
    height: auto;
    margin-top: 90px;
}

.chef-01 {
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.chef-01 ul {
    display: block;
    margin-bottom: 40px;
}

.chef-01 ul .chef-photo {
    width: 100%;
    position: relative;
}

.chef-01 ul .chef-photo img {
    width: 100%;
}

.chef-01 ul .chef-txt {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px;
    margin-top: -50px;
}

.chef-01 ul li h3 {
    font-size: clamp(1.375rem, 1.125rem + 1.25vw, 1.625rem);
    line-height: 44px;
    color: #b1886f;
    font-weight: 500;
}

.chef-01 ul li p {
    font-size: clamp(0.75rem, 0.625rem + 0.625vw, 0.875rem);
    line-height: clamp(1.25rem, 0.749rem + 0.7821vw, 1.6875rem);
    letter-spacing: -0.43px;
    color: #000;
    font-weight: 200;
    padding: 10px clamp(0rem, -5.0105rem + 7.8212vw, 4.375rem) 0 0;
    word-break: keep-all;
}

.chef-02 {
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.chef-02 ul {
    display: block;
    margin-bottom: 40px;
}

.chef-02 ul .chef-photo {
    width: 100%;
    position: relative;
}

.chef-02 ul .chef-photo img {
    width: 100%;
}

.chef-02 ul .chef-txt {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px;
    margin-top: -50px;
    text-align: right;
}

.chef-02 ul li h3 {
    font-size: clamp(1.375rem, 1.125rem + 1.25vw, 1.625rem);
    line-height: 44px;
    color: #b1886f;
    font-weight: 500;
}

.chef-02 ul li p {
    font-size: clamp(0.75rem, 0.625rem + 0.625vw, 0.875rem);
    line-height: clamp(1.25rem, 0.749rem + 0.7821vw, 1.6875rem);
    letter-spacing: -0.43px;
    color: #000;
    font-weight: 200;
    padding: 10px clamp(0rem, -5.0105rem + 7.8212vw, 4.375rem) 0 0;
    word-break: keep-all;
}

.chef-03 {
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.chef-03 ul {
    display: block;
    margin-bottom: 40px;
}

.chef-03 ul .chef-photo {
    width: 100%;
    position: relative;
}

.chef-03 ul .chef-photo img {
    width: 100%;
}

.chef-03 ul .chef-txt {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px;
    margin-top: -50px;
}

.chef-03 ul li h3 {
    font-size: clamp(1.375rem, 1.125rem + 1.25vw, 1.625rem);
    line-height: 44px;
    color: #b1886f;
    font-weight: 500;
}

.chef-03 ul li p {
    font-size: clamp(0.75rem, 0.625rem + 0.625vw, 0.875rem);
    line-height: clamp(1.25rem, 0.749rem + 0.7821vw, 1.6875rem);
    letter-spacing: -0.43px;
    color: #000;
    font-weight: 200;
    padding: 10px clamp(0rem, -5.0105rem + 7.8212vw, 4.375rem) 0 0;
    word-break: keep-all;
}


/*-------------------------- 04. EXPERIENCE --------------------------*/
.exper-video-pc {
    display: none;
}

.exper-video-tablet {
    display: none;
}

/*------- exper section01 -------*/
#exper-section-01 {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100vh;
    margin-bottom: 40px;
}

.exper-video-mobile {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
}

#experVideoMobile {
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    object-fit: cover;
    overflow: hidden;
}

.fade-out-mobile {
    position: absolute;
    display: inline-block;
    top: 46%;
    right: 50%;
    transform: translateX(50%);
    animation: fadeout 5s;
    -moz-animation: fadeout 5s;
    /* Firefox */
    -webkit-animation: fadeout 5s;
    /* Safari and Chrome */
    -o-animation: fadeout 5s;
    /* Opera */
    animation-fill-mode: forwards;
}

@keyframes fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@-moz-keyframes fadeout {

    /* Firefox */
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@-webkit-keyframes fadeout {

    /* Safari and Chrome */
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@-o-keyframes fadeout {

    /* Opera */
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/*------- exper section02 -------*/
#exper-section-mobile {
    width: 100%;
    height: auto;
    background-color: #f3ede6;
}

#exper-section-pc {
    display: none;
}

#exper-section-tablet {
    display: none;
}

#exper-section-02-mobile,
#exper-section-03-mobile,
#exper-section-04-mobile,
#exper-section-05-mobile,
#exper-section-06-mobile,
#exper-section-07-mobile,
#exper-section-08-mobile,
#exper-section-09-mobile {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    padding-bottom: 50px;
}

/* 공통서식 */
#exper-section-mobile .left-con {
    width: 100%;
    height: 100%;
}

#exper-section-mobile .left-con img {
    width: 100%;
}

#exper-section-mobile .right-con {
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 30px 0;
    float: left;
}

#exper-section-mobile .right-con .text-area {
    width: 90%;
    margin: 0 auto;
    word-break: keep-all;
}

#exper-section-mobile .right-con .text-area h2 {
    font-size: 1.375em;
    font-weight: 500;
    color: #b1886f;
    padding-bottom: 15px;
}

#exper-section-mobile .right-con .text-area p {
    font-size: 0.750em;
    font-weight: 200;
    color: #000;
    letter-spacing: -0.3px;
    padding-bottom: 24px;
    line-height: 18px;
    width: 90%;
}

#exper-section-mobile .right-con .text-area .time-area {
    width: 100%;
    float: left;
}

#exper-section-mobile .right-con .text-area .time-area h3 {
    font-size: 0.750em;
    font-weight: 500;
    color: #000;
    padding: 10px 0;
}

#exper-section-mobile .right-con .text-area .time-area p {
    width: 100%;
    font-size: 0.750em;
    font-weight: 300;
    color: #000;
    padding: 10px 0;
}

#exper-section-mobile .right-con .text-area .time-area p span {
    float: right;
}

/*------- exper section03 -------*/
#exper-section-03-mobile .right-con .text-area .more-btn {
    width: 124px;
    height: 32px;
    text-align: center;
    border-radius: 4px;
    border: 1px solid #c4987c;
    font-size: 0.875em;
    color: #c4987c;
    padding: 8px 0;
    float: right;
}

/*exper layer popup*/
.exper-layer-pop {
    width: 100%;
    height: 100vh;
    margin: 0 auto;
    color: #fff;
    z-index: 2000;
    position: fixed;
    top: 0;
    overflow: auto;
    background-color: #fff;
}

.overlay-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1004;
}

.exper-layer-wrap {
    position: relative;
    width: 100%;
    background: #fff;
}

.exper-layer-top-all {
    width: 100%;
    border-bottom: 1px solid #ddd;
}

.exper-layer-top {
    width: 95%;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    padding: 20px 0;
}

.exper-layer-top li {
    font-size: 1.000em;
    float: left;
    font-weight: 500;
    color: #000;
}

.exper-layer-wrap .x-btn {
    display: inline-block;
}

.spa-con {
    width: 95%;
    font-size: 0.938em;
    color: #000;
    letter-spacing: -0.38px;
    line-height: 25px;
    margin: 15px auto;
    word-break: keep-all;
}

.spa-con ul .tit {
    font-size: 0.938em;
    color: #b1886f;
    font-weight: 400;
    padding-bottom: 8px;
}

.spa-con ul .tit .small {
    color: #000 !important;
    font-weight: 200;
}

.spa-con ul .txt {
    font-size: 0.938em;
    color: #000;
    font-weight: 200;
    letter-spacing: -0.35px;
    line-height: 20px;
    padding-bottom: 15px;
}

.spa-con ul .txt .txt-bold {
    font-weight: 500;
}

/*------- exper section 7 ~ 9 -------*/
#exper-section-mobile .right-con .text-area .time-area .all-day {
    float: right;
    font-weight: 400;
    color: #033f64;
}

/*------- exper section10 -------*/
#exper-section-10-mobile {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 260px;
}

.sample-con {
    background: url('/images/exper/sample.png') no-repeat center center;
    width: 100%;
    height: 260px;
    margin: 0 auto;
    position: relative;
}

.sample-con .text-area {
    width: 95%;
    text-align: center;
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translateX(50%);
}

.sample-con .text-box {
    word-break: keep-all;
    background-color: rgba(255, 255, 255, 0.85);
    text-align: center;
    padding: 30px 0;
}

.sample-con .text-box h2 {
    font-size: 1.375em;
    font-weight: 500;
    color: #b1886f;
    padding-bottom: 15px;
}

.sample-con .text-box p {
    font-size: 0.750em;
    font-weight: 200;
    color: #000;
    letter-spacing: -0.431px;
    padding-bottom: 20px;
    line-height: 18px;
    width: 90%;
    margin: 0 auto;
}

.sample-con .text-box img {
    display: block;
    margin: 0 auto;
}

/*sample layer popup*/
.recommend-con {
    width: 95%;
    font-size: 15px;
    color: #000;
    letter-spacing: -0.38px;
    line-height: 25px;
    margin: 15px auto;
    word-break: keep-all;
}

.recommend-con ul {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.recommend-con ul li {
    display: inline-block;
    margin-right: 2%;
    width: 50%;
}

.recommend-con ul li:last-child {
    margin-right: 0 !important;
}

.recommend-con ul li img {
    width: 100%;
    height: 100%;
    padding-bottom: 15px;
}

.recommend-con ul li h5 {
    font-size: 0.938em;
    font-weight: 400;
    padding-bottom: 6px;
    color: #000;
}

.recommend-con ul li h5 span {
    color: #b1886f !important;
}

.recommend-con ul li .txt {
    font-size: 0.938em;
    font-weight: 200;
    padding-bottom: 25px;
    line-height: 15px;
    width: 96%;
    text-align: left;
    color: #000;
    letter-spacing: -0.33px;
}

/*------- exper section11 -------*/
#exper-section-11-mobile {
    background-color: rgba(196, 152, 124, 0.35);
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding-bottom: 13%;
    position: relative;
}

.etc-con {
    width: 90%;
    margin: 0 auto;
    padding-top: 40px;
}

.etc-con h2 {
    font-size: 1.500em;
    color: #8c9ba4;
    font-weight: 500;
    text-align: center;
    text-transform: uppercase;
    padding-bottom: 10px;
}

.etc-con p {
    font-size: 0.750em;
    color: #b1886f;
    text-align: center;
    letter-spacing: 0.43px;
    padding-bottom: 40px;
    line-height: 18px;
}

.etc-con ul {
    display: block;
}

.etc-con ul li {
    width: 100%;
}

.etc-con ul li img {
    width: 100%;
    height: 100%;
    padding-bottom: 15px;
}

.etc-con ul li h5 {
    font-size: 0.875em;
    font-weight: 500;
    padding-bottom: 10px;
    color: #000;
}

.etc-con ul li .txt {
    font-size: 0.750em;
    font-weight: 200;
    padding-bottom: 25px;
    line-height: 18px;
    width: 100%;
    text-align: left;
    color: #000;
    letter-spacing: -0.43px;
}

.etc-con ul li .etc-sub {
    font-size: 0.750em;
    color: #033f64;
    line-height: 22px;
    margin-bottom: 25px;
    display: block;
}

/*-------------------------- 05. GALLERY--------------------------*/
/*------- gallery section01 -------*/
#gallery-section-01 {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100vh;
}

/*------- gallery section02 -------*/
#gallery-section-02 {
    background-color: #f3ede6;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

/*photo-gallery*/
.photo-list-wrap {
    width: 95%;
    margin: 60px auto;
    font-size: 0;
}

.photo-list-wrap .lists {
    width: 100%;
    display: inline-block;
}

.photo-list-wrap .lists .lists-item {
    width: 49%;
    height: 100%;
    float: left;
    margin: 0 1% 1% 0;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.16);
    position: relative;
    overflow: hidden;
}

.photo-list-wrap .lists .lists-item:nth-child(3n) {
    margin-right: 0 !important;
}

.photo-list-wrap .lists .lists-item img {
    width: 100%;
}

.lists li .mask {
    background: rgba(158, 129, 111, 0.85);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: 1s;
    opacity: 0;
}

.lists li .mask .txt {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    color: #fff;
    font-weight: 300;
}

.lists li .mask .txt p {
    font-size: 0.875em;
    line-height: 32px;
    font-weight: 300;
}

.lists li:hover .mask {
    opacity: 0.8;
}

.lists li:hover .thum img {
    transform: scale(1.1);
    opacity: 0.8;
    transition: 1s;
}

/*photo_gallery layer popup*/
.photo-layer-popup {
    width: 100%;
    height: 100%;
    color: #fff;
    z-index: 2000;
    position: fixed;
    left: 50%;
    top: 30%;
    transform: translateX(-50%);
}

.photo-layer-wrap {
    position: relative;
    width: 100%;
    background: #fff;
}

.photo-layer-wrap ul {
    position: relative;
}

.photo-layer-wrap .x-btn {
    position: absolute;
    top: -39px;
    right: 10px;
    display: inline-block;
}

.photo-layer-wrap .x-btn img {
    width: 25px;
    height: 25px;
}

.photo-layer-wrap .left-btn {
    position: absolute;
    top: 30%;
    left: 0;
    display: inline-block;
}

.photo-layer-wrap .right-btn {
    position: absolute;
    top: 30%;
    right: 0;
    display: inline-block;
}

.photo-layer-wrap .silde-img {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

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

.photo-layer-wrap .txt {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    letter-spacing: -0.6px;
    position: absolute;
    width: 100%;
    padding: 15px 0;
}

/*-------------------------- 06. PROMOTION / NEWS --------------------------*/
/*------- news section01 -------*/
#news-section-01 {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100vh;
}

/*------- news section02 -------*/
#news-section-02 {
    background-color: #f3ede6;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    padding-top: 60px;
}

.select-wrap {
    display: none;
}

/* .select-wrap{ width: 85%; height: auto; margin: 60px auto;}
.select-wrap ul{width: 310px; height: 32px; float: right; display: flex; justify-content: space-evenly; margin-bottom: 20px;
}
.select-wrap ul li{display: inline-block; margin-right: 2%;}
.select-wrap ul li:last-child{margin-right: 0;}

.select-wrap ul .select-box{width: 25%; height: 32px; font-size: clamp(0.875rem, 0.7332rem + 0.3546vw, 1rem);}
.select-wrap ul select {
    position: relative; 
    width:100% !important;
    height: 32px !important;
    padding:6px;
    background-color:#fff !important;
    border: none !important;
    background:url('/images/news/arr_down.png') no-repeat 60px 14px;
}
.select-wrap ul select option {width: 100%; height: 32px; position: absolute; top: 0; background-color: #f4f4f4; font-size: 14px;} 
.select-wrap ul .news-write {width: 50%; height: 32px !important; background-color: #fff; }
.select-wrap ul .news-write input[type="text"] { background-color: #fff; height: 32px !important; font-size: clamp(0.875rem, 0.7332rem + 0.3546vw, 1rem) !important;}
.select-wrap ul .news-serch {width: 20%; height: 32px; background-color: #b1886f; text-align: center; color: #fff; font-weight: 400; vertical-align: middle; padding: clamp(0.5625rem, 0.7043rem + -0.3546vw, 0.4375rem) 0; font-size: clamp(0.875rem, 0.7332rem + 0.3546vw, 1rem) !important;} */

/* news-list */
.news-list-wrap {
    width: 90%;
    margin: 0 auto 110px;
    font-size: 0;
}

.news-list-wrap .lists {
    width: 100%;
    display: inline-block;
}

.news-list-wrap .lists .lists-item {
    width: 100%;
    height: 100%;
    float: left;
    position: relative;
    overflow: hidden;
    margin-bottom: 60px;
}

.news-list-wrap .lists .lists-item:nth-child(2n) {
    margin-right: 0 !important;
}

.news-list-wrap .lists .lists-item img {
    width: 100%;
}

.lists li .thum {
    width: 100%;
    /* height: 248px;  */
    overflow: hidden;
}

.lists li:hover .thum img {
    transform: scale(1.1);
    opacity: 0.8;
    transition: 1s;
    object-fit: cover;
}

.lists li .thum img {
    transform: scale(1.1);
    opacity: 0.8;
    transition: 1s;
    width: 100%;
    height: 100%;
    /*object-fit: cover;*/
}

.lists .lists-item .thum-txt {
    width: 100%;
    height: auto;
    margin: 17px 0;
}

.lists .lists-item .thum-txt ul li {
    display: block;
}

.lists .lists-item .thum-txt ul .small {
    font-size: 12px;
    color: #b1886f;
    padding-bottom: 10px;
}

.lists .lists-item .thum-txt ul .tit {
    font-size: clamp(1.25rem, 1.0731rem + 0.7547vw, 1.375rem);
    color: #000;
    position: relative;
    padding-bottom: 13px;
    display: inline-block;
    width: 97%;
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: nowrap;
}

.lists li:hover .tit::after {
    content: '';
    position: absolute;
    bottom: 4px;
    width: 100%;
    height: 2px;
    left: 0;
    background-color: #b1886f;
    transition: 0.5s;
}

.lists .lists-item .thum-txt ul .txt {
    font-size: 14px;
    color: #000;
    line-height: 20px;
    padding-bottom: 10px;
    font-weight: 300;
}

.lists .lists-item .thum-txt ul .date {
    font-size: 12px;
    color: #5f6668;
    font-weight: 300;
}

.page-wrap {
    display: none;
}

.page-wrap-mo {
    width: 175px;
    height: auto;
    margin: 0 auto;
}

.page-wrap-mo ul {
    width: 100%;
    margin: 0 auto;
    margin-bottom: 105px;
}

.page-wrap-mo ul li {
    display: inline-block;
    font-size: 18px;
    color: #747e81;
    position: relative;
    cursor: pointer;
    margin-right: 8%;
}

.page-wrap-mo ul li:last-child {
    padding-right: 0;
}

.page-wrap-mo ul .on {
    color: #b1886f;
}

.page-wrap-mo ul .on::after {
    content: '';
    position: absolute;
    bottom: -6px;
    width: 100%;
    height: 2px;
    left: 0;
    background-color: #b1886f;
    transition: 0.5s;
}

/*------- news section03 -------*/
#news-section-03 {
    background-color: #f3ede6;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.view-wrap {
    width: 90%;
    height: 100%;
    margin: 0 auto;
    margin-top: 80px;
}

.view-tit-box {
    width: 100%;
    display: inline-block;
    border-bottom: 1px solid #ccc;
    padding-bottom: 60px;
}

.view-tit-box li {
    text-align: center;
}

.view-tit-box .small {
    font-size: 14px;
    color: #b1886f;
    font-weight: 200;
    padding-bottom: 10px;
}

.view-tit-box .tit {
    font-size: 24px;
    color: #000;
    font-weight: 400;
    padding-bottom: 15px;
    line-height: 1.2em;
}

.view-tit-box .date {
    font-size: 12px;
    color: #5f6668;
    font-weight: 200;
}

.view-content {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 20px 0;
    border-bottom: 1px solid #ccc;
}

.view-content .download {
    width: 100%;
    text-align: right;
    height: auto;
    padding-bottom: 8px;
}

.view-content .download li {
    display: inline-block;
    font-size: 14px;
    color: #000;
}

.view-content .download li span {
    color: #b1886f;
    padding-right: 3px;
}

.view-content .download li img {
    display: inline-block;
    width: 16px;
    vertical-align: text-top;
    cursor: pointer;
}

.view-content .board-img {
    display: block;
    margin: 10px auto 0;
    max-width: 80%;
}

.view-content .board-img img {
    width: 100%;
}

.view-txt {
    font-size: 14px;
    color: #000;
    text-align: left;
    line-height: 15px;
    padding: 20px 0;
    white-space: pre-line;
    width: 90%;
    margin: 0 auto;
}

.list-btn {
    width: 140px;
    height: 40px;
    border-radius: 4px;
    border: 1px solid #c4987c;
    text-align: center;
    padding: 10px 0;
    color: #c4987c;
    margin: 40px auto 100px;
    cursor: pointer;
    font-size: 16px;
}

/*-------------------------- policy --------------------------*/
.policy-wrap {
    width: 100%;
    margin: auto;
    padding-bottom: 43px;
}

.policy-bg {
    background: url(/images/mypage/mypage_bg_mo.png) center center no-repeat;
    background-size: 100% 100%;
    position: relative;
    top: 0;
    width: 100%;
    height: 220px;
}

.content-wrap {
    width: 92%;
    height: auto;
    position: relative;
    margin: 0 auto;
}

.content-box {
    width: 100%;
    height: auto;
    margin-top: 20px;
}

.content-box .basic-title {
    font-size: 1.250em;
    color: #000;
    text-align: center;
    font-weight: 400;
}

.content-box .policy-tab {
    width: 100%;
    text-align: center;
    display: inline-table;
}

.content-box .policy-tab li {
    display: inline-block;
    font-size: 0.813em;
    color: #5f6668;
    border: 1px solid #dddddd;
    width: 50%;
    height: 34px;
    font-weight: 400;
    padding: 9px 0;
    vertical-align: middle;
}

.content-box .policy-tab li:last-child {
    width: 100% !important;
}

.content-box .policy-tab .on {
    background-color: #c4987c;
    color: #fff;
    border: none !important;
}

.content-box .policy-tab li a {
    display: block;
}

.policy-box {
    width: 100%;
    height: auto;
    margin-top: 30px;
}

.policy-box h4 {
    font-size: 1.250em;
    color: #2f3334;
    font-weight: 400;
    margin-bottom: 26px;
}

.policy-box h5 {
    font-size: 1.0em;
    color: #2f3334;
    font-weight: 600;
}

.policy-box .border {
    margin: 15px 0;
}

.policy-box .policy-con {
    width: 100%;
    height: auto
}

.policy-box p {
    font-size: 0.875em;
    color: #2f3334;
    font-weight: 300;
    line-height: 23px;
    letter-spacing: -0.7px;
}



/* ----------------- package-list(240514)----------------- */
#package-section-02 {
    background-color: #f3ede6;
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

#package-section-02 .package-wrap {
    padding: 0 5%;
    width: 100%;
    height: 100%;
}

#package-section-02 .pac-layer-btn {
    width: 100%;
    height: 48px;
    background-color: #fff;
    margin-top: 40px;
}

#package-section-02 .pac-layer-btn ul {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin: 0 auto;
}

#package-section-02 .pac-layer-btn ul li {
    font-size: 0.88em;
    font-weight: 300;
}

#package-section-02 .pac-layer-btn ul li span {
    font-size: 1.13em;
    font-weight: 500;
}

.package-list-wrap {
    width: 100%;
    height: 100%;
    padding: 20px 0;
    margin: 0 auto;
}

/* Left-area */
.package-list-wrap .left-area {
    width: 100%;
    height: 100%;
}

.package-list-wrap .left-area .room-num {
    width: 100%;
    height: 34px;
    background-color: #878787;
    color: #fff;
    text-align: center;
    font-size: 0.88em;
    letter-spacing: -0.38px;
    padding: 10px 0;
}

.package-list-wrap .left-area .room-info {
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding: 20px;
}

.package-list-wrap .left-area .room-info.pay {
    margin-bottom: 30px;
}

.package-list-wrap .roomSlider {
    margin: 0 !important;
}

.package-list-wrap .roomSlider img {
    width: 100% !important;
}

/* 수정된 갤러리 CSS  */
.package-list-wrap .slick-next {
    display: none !important;
}

.package-list-wrap .slick-arrow {
    display: none !important;
}

.package-list-wrap .presentation {
    display: none !important;
}

.package-list-wrap .slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding-left: -680px !important;
}

/* Dots */
.package-list-wrap .slick-dotted.slick-slider {
    width: 100% ;
    height: 100%;
    padding-bottom: 20px;
}

.package-list-wrap .slick-dots {
    position: absolute;
    bottom: 30px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}

.package-list-wrap .slick-dots li {
    position: relative;
    display: inline-block;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    margin: 0 8px !important;
    padding: 0;
    cursor: pointer;
}

.package-list-wrap .slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
    border: 1px solid #ffff !important;
}

.package-list-wrap .slick-dots li button:hover,
.package-list-wrap .slick-dots li button:focus {
    outline: none;
}

.package-list-wrap .slick-dots li button:hover:before,
.package-list-wrap .slick-dots li button:focus:before {
    opacity: 1;
}

.package-list-wrap .slick-dots li button:before {
    font-family: 'slick';
    font-size: 0 !important;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    content: '•';
    text-align: center;
    opacity: 1;
    color: none !important;
    border: 1px solid #ffff !important;
}

.package-list-wrap .slick-dots li.slick-active button:before {
    background-color: #ffffff !important;
    opacity: 1 !important;
    border-radius: 50% !important;
}

.left-area .room-tit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 400;
    padding-bottom: 10px;
    font-size: 1.25em;
    line-height: 1.2em;
}

.left-area .room-tit span {
    font-size: 13px;
    letter-spacing: -0.9px;
    color: #b1886f;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.left-area .room-tit span img {
    display: inline-block;
    padding-right: 4px;
}

.left-area .room-txt {
    font-size: 0.81em;
    letter-spacing: -0.35px;
    line-height: 22px;
    padding-bottom: 10px;
    border-bottom: 1px solid #dddddd;
    font-weight: 300;
    padding-top: 16px;
}

.left-area .room-icon {
    width: 100%;
    height: auto;
    padding-top: 10px;
}

.left-area .room-icon li {
    font-size: 0.81em;
    letter-spacing: -0.35px;
    font-weight: 300;
    display: inline-block;
    margin-right: 2%;
    padding: 6px 0;
}

.left-area .room-icon li img {
    width: auto;
    margin-right: 4px;
    display: inline-block;
    vertical-align: middle;
}

.left-area .room-icon .more-view {
    font-size: 0.81em;
    letter-spacing: -0.33px;
    color: #b1886f;
    cursor: pointer;
    margin-right: 0;
}

.left-area .room-icon .more-view button {
    background-color: #ffffff00;
}

.left-area .room-icon .more-view p {
    display: contents;
}

.left-area .room-icon .more-view img {
    margin: 0 0 0 8px;
}

.left-area .room-icon .more-hide {
    width: 100%;
    padding: 20px 0;
    margin: 20px 0 0 0;
    display: none;
    border-top: 1px solid #dddddd;
}

.hide-con {
    width: 100%;
    margin: 0 auto;
    word-break: keep-all;
}

.hide-con li {
    display: block !important;
    font-size: 14px !important;
    letter-spacing: -0.38px !important;
    line-height: 24px !important;
    padding: 0 !important;
}

.hide-con .tit {
    font-weight: 500 !important;
}

.hide-con .txt {
    font-weight: 300 !important;
    padding-bottom: 20px !important;
    margin-right: 0 !important;
}

.hide-con .room {
    width: 50%;
    height: auto;
    padding: 20px 0;
}

/* room-type */
.room-type {
    width: 100%;
    height: auto;
    position: relative;
    padding: 24px 0 29px;
    border-bottom: 1px solid #cccccc;
}

.room-type .notice01 {
    width: 95%;
    margin: 0 auto;
}

.room-type .notice01 .cancel-view {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.room-type .notice01 .cancel-view p {
    width: 70%;
    font-size: 1.75em;
    letter-spacing: -0.7px;
    color: #b1886f;
    text-decoration: underline;
    font-family: 'neue' !important;
}

.room-type .notice01 .cancel-view button {
    width: 30%;
    font-size:0.75em;
    letter-spacing: -0.3px;
    color: #000;
    text-align: right;
    background-color: #fff0;
}

.room-type .notice01 .cancel-view img {
    display: inline-block;
    margin-left: 9px;
}

.room-type .notice01 .cancel-hide {
    display: none;
    width: 60%;
    background-color: #f9f9f9;
    padding: 20px 14px;
    border: 1px solid #dddddd;
    position: absolute;
    right: 0;
}

.room-type .notice01 .cancel-hide .tit {
    font-size: 0.88em;
    color: #000;
    letter-spacing: -0.35px;
    font-weight: 700;
    text-align: center;
    padding-bottom: 8px;

}

.room-type .notice01 .cancel-hide table {
    width: 100%;
    height: auto;
    text-align: center;
    vertical-align: middle;
}

.room-type .notice01 .cancel-hide table th {
    font-size: 0.81em;
    letter-spacing: -0.33px;
    font-weight: 300;
    padding: 8px 0;
    border-bottom: 1px solid #cccccc;
}

.room-type .notice01 .cancel-hide table td {
    font-size: 0.81em;
    letter-spacing: -0.33px;
    font-weight: 500;
    padding: 8px 0;
    line-height: 18px;
}

.room-type .notice01 .cancel-hide table td.light {
    font-weight: 300;
}

.room-type .notice02 {
    width: 95%;
    height: auto;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 16px 0 6px;
}

.room-type .notice02 .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    letter-spacing: -0.35px;
    font-size: 0.88em;
    font-weight: 300;
}

.room-type .notice02 .item img {
    margin-right: 8px;
}

.room-type .notice02 .item .box {
    display: inline-block;
    border: solid 1px #c4987c;
    background-color: rgba(255, 255, 255, 0.5);
    font-size: 0.81em;
    text-align: center;
    letter-spacing: -0.33px;
    color: #b1886f;
    border-radius: 4px;
    padding: 3px 5px;
    margin-left: 10px;
}

.room-type .notice02 .price {
    font-size: 0.88em;
    color: #b1886f;
    letter-spacing: -0.35px;
}

.room-type .notice02 .price .big {
    font-size: 1.50em;
    letter-spacing: -0.6px;
    color: #000000;
    font-weight: 500;
    font-family: 'neue' !important;
}

.room-type .notice02 .price .small {
    font-size: 1.13em;
    letter-spacing: -0.45px;
    color: #000000;
    font-weight: 300;
}

.room-type .notice02 .price .total {
    font-size: 14px;
    letter-spacing: -0.45px;
    color: #000000;
    font-weight: 300;
    display: block;
    padding-top: 10px;
    text-align: right;
}

.room-type .notice03 {
    width: 95%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 16px;
}

.room-type .notice03 .content {
    font-size: 0.88em;
    letter-spacing: -0.35px;
    color: #000000;
    line-height: 25px;
    font-weight: 300;
    word-break: keep-all;
    padding-top: 20px;
}

.room-type .notice03 .price {
    color: #b1886f;
}

.room-type .notice03 .price .big {
    font-size: 1.13em;
    letter-spacing: -0.45px;
    text-decoration: line-through;
    font-weight: 500;
    font-family: 'neue' !important;
    vertical-align: top;
}

.room-type .notice03 .price .small {
    font-size: 0.88em;
    letter-spacing: -0.45px;
}

.room-type .notice03.pb0 {
    padding-bottom: 0 !important;
}

.room-type .notice04 {
    width: 95%;
    margin: 0 auto;
    display: flex;
    justify-content: flex-end;
}

.room-type .notice04 li {
    margin-left: 2%;
}

.room-type .notice04 li:last-child {
    margin-right: 0;
}

.pac-select.child {
    width: 100px;
    height: 40px;    
    background: #fff;
    text-align: left;
    cursor: pointer;
    position: relative;
    text-indent: 1em;
    line-height: 40px;
}

.pac-select.child span {
    color: #535b5d;
    padding: 0 6px;
}

.pac-select.child li .options {
    display: block;
    margin: 0;
    background: #fff;
    position: absolute;
    width: 100%;
    overflow: hidden;
    max-height: 0;
    border: 1px solid #e8e8e8;
    border-top: 0;
    top: 40px;
    left: 0;
    opacity: 0;
    transition: 0.5s ease all;
    z-index: 9;
}

.pac-select.child li .options li {
    transition: 0.5s ease all;
    border-bottom: 1px solid #e8e8e8;
    padding-left: 8px;
}

.pac-select.child li .options li:last-child {
    border-bottom: 0;
}

.pac-select.child li .options li:hover {
    background: #f3f3d4;
    color: #000;
}

.pac-select.child li .options.open {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-top: 0;
    opacity: 1;        
    max-height: 160px;
    overflow-y: scroll;
}

.pac-select.child:before {
    content: '';
    width: 0;
    height: 0;
    border-left: 0.3em solid transparent;
    border-right: 0.3em solid transparent;
    border-top: 0.4em solid #c4987c;
    position: absolute;
    top: 18px;
    right: 1em;
    transition: all ease 0.25s;
}

.notice04 .pack-btn {
    width: 130px;
    height: 40px;
    border-radius: 2px;
    border: 1px solid #c4987c;
    background-color: #fff;
    font-size: 1.0em;
    letter-spacing: -0.8px;
    color: #c4987c;
    text-align: center;
    font-weight: 500;
}

.notice04 .pack-btn:hover {
    background-color: #c4987c;
    color: #fff;
    transition: 0.3s all;
}

.left-area .more-btn {
    width: 100%;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.5);
    font-size: 0.81em;
    letter-spacing: -0.33px;
    color: #b1886f;
    font-weight: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 16px auto 48px;
}

.left-area .more-btn img {
    padding-left: 9px;
}

/* Right-area */
.right-area {
    width: 100%;
    height: 100%;
    background-color: #fff;
}

.pack-pop-layer {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    background-color: #fff;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 10%;
}

.pack-pop-layer .pack-pop-con {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

.pack-pop-layer .pack-pop-con h2 {
    font-size: 1.0em;
    font-weight: 400;
    display: flex;
    position: fixed;
    top: 0;
    width: 100%;
    height: 50px;
    align-items: center;
    justify-content: space-between;
    padding: 0 3%;
    border-bottom: 1px solid #ddd;
    background-color: #fff;
    z-index: 3;
}

.pack-pop-layer .pack-closed {
    display: inline-block;
}

.right-part1 {
    width: 90%;
    height: auto;
    padding-top: 70px;
    margin: 0 auto;
}

.pac-sel-list {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    padding-top: 20px;
    margin-bottom: 32px;
}

.pac-sel-list li.item {
    width: 23%;
}

.pac-sel-list .adult,
.pac-sel-list .age12to18,
.pac-sel-list .age4to11,
.pac-sel-list .days,
.pac-sel-list .meal {
    position: relative;
    z-index: 2;
}

.pac-sel-list .adult::after {
    position: absolute;
    content: '성인';
    font-size: 0.81em;
    top: -20px;
    left: 4px;
    color: #000;
}

.pac-sel-list .age12to18::after {
    position: absolute;
    content: '12~18세';
    font-size: 0.81em;
    top: -20px;
    left: 4px;
    color: #000;
}

.pac-sel-list .age4to11::after {
    position: absolute;
    content: '4~11세';
    font-size: 0.81em;
    top: -20px;
    left: 4px;
    color: #000;
}

.pac-sel-list .days::after {
    position: absolute;
    content: '박';
    font-size: 0.81em;
    top: -20px;
    left: 4px;
    color: #000;
}

.pac-sel-list .meal::after {
    position: absolute;
    content: '석식횟수';
    font-size: 0.81em;
    top: -20px;
    left: 4px;
    color: #000;
}

/* select */
.pac-select {
    background: #f4f4f4;
    text-align: left;
    cursor: pointer;
    position: relative;
    text-indent: 1em;
    line-height: 48px;
}

.pac-select span {
    color: #535b5d;
    padding: 0 6px;
}

.pac-select li .options {
    display: block;
    margin: 0;
    background: #fff;
    position: absolute;
    width: 100%;
    overflow: hidden;
    max-height: 0;
    border: 1px solid #e8e8e8;
    border-top: 0;
    top: 49px;
    left: 0;
    opacity: 0;
    transition: 0.5s ease all;
}

.pac-select li .options li {
    transition: 0.5s ease all;
    border-bottom: 1px solid #e8e8e8;
    padding-left: 8px;
}

.pac-select li .options li:last-child {
    border-bottom: 0;
}

.pac-select li .options li:hover {
    background: #f3f3d4;
    color: #000;
}

.pac-select li .options.open {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-top: 0;
    opacity: 1;
    max-height: 240px;
    overflow-y: scroll;
}

.pac-select:before {
    content: '';
    width: 0;
    height: 0;
    border-left: 0.3em solid transparent;
    border-right: 0.3em solid transparent;
    border-top: 0.4em solid #c4987c;
    position: absolute;
    top: 20px;
    right: 1em;
    transition: all ease 0.25s;
}

.right-area .sharing {
    width: 100%;
    margin: 12px auto 0;
    height: 48px;
    position: relative;
}

.right-area .sharing .sharing-view {
    color: #b1886f;
    background-color: #f4f4f4;
    height: 100%;

}

.right-area .sharing .sharing-view button {
    width: 94%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
}

.right-area .sharing .sharing-view .ko {
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 0.94em;
    letter-spacing: -0.38px;
    font-weight: 400;
}

.right-area .sharing .sharing-view img {
    display: inline-block;
    margin-right: 7px;
}

.right-area .sharing .sharing-hide {
    display: none;
    width: 100%;
    background-color: #f4f4f4;
    padding: 8px 10px 24px;
    position: absolute;
    left: 0;
    z-index: 1;
}

.right-area .sharing .sharing-hide p {
    font-size: 0.81em;
    color: #000000;
    letter-spacing: -0.33px;
    line-height: 20px;
}

.right-area .sharing .sharing-hide p img{
    display: inline-block;
    vertical-align: bottom;      
}

/* Calendar */
.cla-tit {
    width: 100%;
    height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    border-bottom: 1px solid #d57878;
    margin-top: 20px;
    padding: 0 5%;

}

.cla-tit li {
    font-size: 0.88em;
    color: #000;
}

.cla-tit li span {
    font-size: 1.13em;
    letter-spacing: -0.45px;
    font-weight: 500;
}

.package-list-wrap .right-area .sticky-box {
    width: 90%;
    height: auto;
    margin: 0 auto;
}

.right-area .sticky-box .cla-btn {
    width: 100%;
    height: 30px;
    border: 1px solid #dddddd;
    background-color: #fff;
    margin: 20px 0;
}

.right-area .sticky-box .cla-btn img {
    margin: 0 auto;
    display: block;
    width: 14px;
    height: 8px;
}

.sticky-box .calendar-area {
    width: 100%;
    height: auto;
}

.sticky-box .right-part2 {
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

.sticky-box .calendar-box {
    width: 100%;
    height: auto;
    margin-bottom: 42px;
}

.sticky-box .calendar-box .tit {
    text-align: center;
    font-size: 0.88em;
    color: #000;
    padding-bottom: 8px;
}

.sticky-box .calendar-box .tit span {
    font-size: 1.25em;
    font-weight: 400;
    letter-spacing: -0.5px;
}

.sticky-box .pac-table {
    width: 100%;
    height: auto;
}

.sticky-box .pac-table thead tr th {
    text-align: center;
    vertical-align: middle;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.81em;
    padding: 5px 0;
}

.sticky-box .pac-table thead tr th:nth-child(1) {
    color: #d57878;
}

.sticky-box .pac-table thead tr th:nth-child(7) {
    color: #4e85aa;
}

.sticky-box .pac-table tbody tr td {
    vertical-align: bottom;
}

.sticky-box .pac-table tbody tr td a {
    display: block;
}

.sticky-box .pac-table tbody tr td div {
    height: 62px;
    display: flex;
    align-content: space-between;
    flex-wrap: wrap;
    justify-content: center;
    padding:3px;
    margin: 1px;
    border: 1px solid #e8e8e8;
}

.sticky-box .pac-table tbody tr td div .date {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.81em;
    letter-spacing: -0.33px;
    font-weight: 500;
}

.sticky-box .pac-table tbody tr td div .date img {
    display: inline-block;
}

.sticky-box .pac-table tbody tr td div .date li {
    height: 16px;
}

.sticky-box .pac-table tbody tr td div .date .poss {
    color: #c9a52e;
    background: url(/images/package/circle_icon.svg) no-repeat center center;
    padding-left: 16px;
    display: flex;
    background-position: 0 -1px;
    font-size: 0;
}

.sticky-box .pac-table tbody tr td div .date .almost {
    color: #1f9a78;
    background: url(/images/package/star_icon.svg) no-repeat center center;
    padding-left: 16px;
    display: flex;
    background-position: 1px 1px;
    font-size: 0;
}

.sticky-box .pac-table tbody tr td div .date .imposs {
    color: #999999;
    background: url(/images/package/imposs_icon.svg) no-repeat center center;
    padding-left: 15px;
    font-size: 0;
}

.sticky-box .pac-table tbody tr td div .date .num {
    font-size: 1.0em;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}

.sticky-box .pac-table tbody tr td:nth-child(1) .date .num {
    color: #d57878;
}

.sticky-box .pac-table tbody tr td:nth-child(7) .date .num {
    color: #4e85aa;
}

.sticky-box .pac-table tbody tr td div .price {
    font-size: 0.69em;
    letter-spacing: -0.55px;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
}

.sticky-box .pac-table tbody tr td div.done {
    background-color: #f4f4f4;
    cursor: default;
}

.sticky-box .pac-table tbody tr td div.imposs {
    cursor: default;
    background-color: #f4f4f4;
}

.sticky-box .pac-table tbody tr td div.imposs .date .num {
    color: #818181;
}

/* 날짜선택 */
.sticky-box .pac-table tbody tr td.selected div {
    background-color: #d57878;
    border: 1px solid #d57878;
}

.sticky-box .pac-table tbody tr td.selected div li {
    color: #fff !important
}

.sticky-box .pac-table tbody tr td.selected div .date .poss {
    background: url(/images/package/circle_icon_on.svg) no-repeat center center;
    padding-left: 14px;
    display: flex;
    background-position: 0 -1px;
}

.sticky-box .pac-table tbody tr td.selected div .date .almost {
    background: url(/images/package/star_icon_on.svg) no-repeat center center;
    padding-left: 14px;
    display: flex;
    background-position: 1px 1px;
}

.sticky-box .pac-table tbody tr td.selected div p {
    color: #fff !important
}

.sticky-box .pac-table tbody tr td.selected-from div {
    background-color: #f8d0d0;
}

.sticky-box p.con {
    font-size: 0.75em;
    text-align: center;
    letter-spacing: -0.3px;
    margin-bottom: 27px;
    line-height: 1.3em;
    word-break: keep-all;
}

.pac-info {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    font-size: 0.75em;
    text-align: center;
    letter-spacing: -0.3px;
}

.pac-info li {
    display: flex;
    align-items: center;
}

.pac-info img {
    margin-right: 8px;
    display: inline-block;
}

.pac-info img.child {
    width: 15px;
}

.pack-check-btn {
    width: 180px;
    height: 48px;
    background-color: #c4987c;
    color: #ffffff;
    line-height: 47px;
    font-weight: 600;
    font-size: 1.19em;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    margin: 40px auto;
    display: block;
}


/* ---------- Payment(240716) ----------*/
/* ---------- Payment(240716) ----------*/
/* ---------- Payment(240716) ----------*/
.roomSlider.small {
    width: 48% !important;
    height: 160px !important;
    display: inline-block;
    margin: 10px 0;
}

.roomSlider.small img {
    width: 100%;
    height: 160px;
    object-fit: cover;
}

.roomSlider.small .slick-dots {
    position: absolute;
    bottom: 10px !important;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}

/* room-type payment */
.room-info .flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
}

.room-type.pay {
    width: 50%;
    height: 100%;
    padding-top: 31px;
    display: inline-block;
    border-bottom: 1px solid #fff;
}

.room-type.pay .notice01 {
    width: 90%;
    margin: 0 auto;
}

.room-type.pay .notice01 .cancel-view {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.room-type.pay .notice01 .cancel-view p {
    width: 100%;
    font-size: 1.38em;
    letter-spacing: -0.7px;
    color: #000000;
    text-decoration: none;
    font-family: 'neue' !important;
}

.room-type.pay .notice01 .cancel-view p.info {
    font-size: 1.13em;
    color: #717171;
    padding-top: 6px;
}

.room-type.pay .notice02 {
    width: 90%;
    height: auto;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 16px 0 6px;
}

.room-type.pay .notice02 .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    letter-spacing: -0.35px;
    font-size: 0.88em;
    font-weight: 300;
}

.room-type.pay .notice02 .item img {
    margin-right: 8px;
}

.room-type.pay .notice02 .item .box {
    display: inline-block;
    border: solid 1px #c4987c;
    background-color: rgba(255, 255, 255, 0.5);
    font-size: 0.81em;
    text-align: center;
    letter-spacing: -0.33px;
    color: #b1886f;
    border-radius: 4px;
    padding: 3px 13px;
    margin-left: 10px;
}

.room-type.pay .notice03 {
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.room-type.pay .notice03 .content {
    font-size: 0.88em;
    letter-spacing: -0.35px;
    color: #000000;
    line-height: 25px;
    font-weight: 300;
    word-break: keep-all;
    padding-top: 20px;
}

.room-info .cancel-rule {
    width: 100%;
    height: auto;
    background-color: #f4f4f4;
    padding: 13px 20px;
}

.room-info .cancel-rule .can-icon {
    font-size: 0.94em;
    letter-spacing: -0.38px;
    color: #b1886f;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.room-info .cancel-rule .can-icon img {
    margin-right: 8px;
}

.room-info .cancel-rule .con {
    font-size: 0.81em;
    letter-spacing: -0.33px;
    color: #000;
    line-height: 22px;
    padding-top: 13px;
    word-break: keep-all;
    font-weight: 300;
}

.room-info .cancel-rule .rule-table {
    width: 100%;
    height: auto;
}

.room-info .cancel-rule .rule-table thead tr th {
    font-size:0.81em;
    color: #000;
    letter-spacing: 0.33px;
    font-weight: 300;
    text-align: left;
    padding: 8px 0;
    position: relative;
}

.room-info .cancel-rule .rule-table thead tr th::after {
    position: absolute;
    content: '';
    width: 98%;
    height: 1px;
    background-color: #ccc;
    bottom: 0;
    left: 0;
}

.room-info .cancel-rule .rule-table tbody tr td {    
    font-size: 0.81em;
    color: #000;
    letter-spacing: 0.33px;
    font-weight: 400;
    padding-top: 8px;
}

.room-info .price-detail {
    width: 100%;
    height: auto;
}

.room-info .price-detail .more-view {
    width: 100%;
    height: 40px;
    background-color: #f4f4f4;
    margin-top: 8px;
    display: flex;        
    justify-content: space-evenly;
}

.room-info .price-detail .more-view button {
    display: flex;        
    align-items: center;
    justify-content: center;
    background-color: #f4f4f4;
    width: 100%;
    height: 100%;
}

.room-info .price-detail .more-view p {
    font-size: 0.88em;
    color: #b1886f;
    letter-spacing: -0.35px;
}

.room-info .price-detail .more-view img {
    padding-left: 9px;
}

.room-info .price-detail .more-hide {
    display: none;
    width: 100%;
    height: auto;
    background-color: #f4f4f4;
    padding: 4px 24px 24px 24px;
}

.more-hide .detail-table {
    width: 100%;
    height: auto;
}

.more-hide .detail-table thead td.date {    
    height: 36px;
    background-color: #fff;
    text-align: center;
    font-size: 0.81em;
    letter-spacing: -0.33px;
    font-weight: 500;
    vertical-align: middle;
}

.more-hide .detail-table tbody tr.line {
    border-bottom: 1px solid #c4987c;
}

.more-hide .detail-table tbody tr.grey {
    border-bottom: 1px solid #ccc;
}

.more-hide .detail-table tbody tr th {
    font-size: 0.81em;
    font-weight: 500;
    letter-spacing: -0.33px;
    height: 15px;
    vertical-align: middle;
    padding-left: 15px;
    word-break: keep-all;
}

.more-hide .detail-table tbody tr td {
    font-size: 0.81em;
    font-weight: 300;
    letter-spacing: -0.33px;
    height: 39px;
    vertical-align: middle;
    text-align: right;
    padding-right:15px;
}

.more-hide .con {
    font-size: 0.75em;
    line-height: 1.3em;
    padding-top: 16px;
    font-weight: 400;
}

/* 장바구니 Btn */
.add-btn {
    width: 100%;
    height: auto;
    margin: 16px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.add-btn button {
    width: auto;
    height: 32px;
    text-align: center;
    border: 1px solid #c4987c;
    color: #c4987c;
    font-size: 0.88em;
    padding: 10px 0;
    border-radius: 2px;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 0 20px;
}

.add-btn button img {
    display: inline-block;
    padding-right: 8px;
}

.add-btn button.grey {
    color: #000;
    border: 1px solid #888888;    
}

/* 장바구니 비었을 시 */
.shopping-none {
    width: 100%;
    height: 219px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    font-size: 1.0em;
    text-align: center;
    font-weight: 400;
    letter-spacing: -0.4px;
    padding: 64px 0;
}

.shopping-none img {
    display: block;
    margin: 0 auto 19px;
}

/* 장바구니 오른쪽 영역 */
/* Right-area */
.right-area.pay {
    width: 100%;
    height: 100%;
    min-height: 140px;
    background-color: rgba(255, 255, 255, 0.5);
    position: relative;
    padding: 30px 20px;
    margin-top: 16px;
}

.right-area.pay a.cart-reser-btn {
    display: block;
    width: 100%;
    height: 70px;
    background-color: #c4987c;    
    color: #fff;
    font-size: 1.38em;
    letter-spacing: -0.55px;
    text-align: center;
    border-radius: 4px;
    padding: 23px 0;
}

.right-area.pay .middle {
    margin-top: 0 !important;
}

.right-area.pay a.cart-add-btn {
    display: block;
    width: 100%;
    height: 50px;
    background-color: #fff;   
    border: 1px solid #888888; 
    color: #000;
    font-size: 1.0em;
    letter-spacing: -0.4px;
    text-align: center;
    border-radius: 4px;
    padding: 15px 0;
    margin-top: 19px;
}

.right-area.pay .cart-price {
    width: 100%;
    height: auto;
    padding: 15px 21px;
    background-color: #fff;
    border: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.right-area.pay .cart-price li {
    font-size: 0.88em;
    letter-spacing: 0.4px;
    font-weight: 400;     
}

.right-area.pay .cart-price .price {
    font-family: 'neue' !important;
    font-size: 22px;
    letter-spacing: -0.6px; 
    font-weight: 500;     
    text-align: right;
}

.right-area.pay .cart-price .price .small {    
    font-size: 17px;
    letter-spacing: -0.45px;
    font-family: 'NotoSansKR' !important;
}

.right-area.pay .cart-price .price .detail {
    display: block;
    color: #c4987c;
    font-size: 14px;
    letter-spacing: -0.35px;
    padding-top: 10px;
    font-family: 'NotoSansKR' !important;
    font-weight: 600;
}

.right-area.pay .cancel-rule {
    width: 100%;
    height: auto;
    background-color: #fff;
    padding: 13px 20px;
    margin-bottom: 32px;
}

.right-area.pay .cancel-rule .can-icon {
    font-size: 0.94em;
    letter-spacing: -0.38px;
    color: #b1886f;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.right-area.pay .cancel-rule .can-icon img {
    margin-right: 8px;
}

.right-area.pay .cancel-rule .con {
    font-size: 0.81em;
    letter-spacing: -0.33px;
    color: #000;
    line-height: 22px;
    padding-top: 9px;
    word-break: keep-all;
    font-weight: 300;
}

/* ----------------- package-pop(241017)----------------- */
.package-pop {
    display: none;
    width: 80%;
    height: auto;
    background-color: #fff;
    border-radius: 4px;
    padding: 30px 15px 0 15px;
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
    z-index: 999;
}

.package-pop .pop-con {
    width: 100%;
    height: auto;
}

.package-pop .pop-con img {
    display: block;
    margin: 0 auto 19px;
}

.package-pop .pop-con p {
  font-size: 0.88em;
  line-height: 1.43;
  letter-spacing: -0.35px;
  text-align: center;
  color: #000;
  word-break: keep-all;
  white-space: pre-line;
  margin: 0 auto 20px;
}

.package-pop button.btn {
    padding: 17px 0;
    font-size: 1.0em;
    letter-spacing: -0.4px;
    text-align: center;
    font-weight: 500;
    border-top: 1px solid #ddd;
    width: 100%;
    background-color: #fff;
    color: #b1886f;
}

.package-pop-bg {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 500;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
}

.ex-btn {
    width: 293px;
    height: 40px;
    background-color: #df2e2e;
    color: #fff;
    position: absolute;
    top: 100px;
    transform: translateX(50%);
    right: 50%;
}