@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: 65%;
    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;
}

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

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

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

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

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

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

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

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

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

.contents-login .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;
} */
.contents-login .join-wrap .member-info-box input[type="text"],
.contents-login .join-wrap .member-info-box input[type="number"],
.contents-login .join-wrap .member-info-box input[type="password"] {
    height: 48px;
    background-color: #f4f4f4;
    border: 0;
    text-indent: 20px;
    font-size: 16px !important;
    font-weight: 300;
}

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

.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: 56px;
    font-size: 1.250em;
    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;
    width: 87%;
    margin: 0 auto;
}

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

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


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

.join-wrap-02 {
    width: 70%;
    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 {
    cursor: pointer;
    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 {
    cursor: pointer;
    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.938em;
    line-height: 1.5em;
    word-break: keep-all;
    width: 81%;
    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.125em;
    font-weight: 300;
}

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

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

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

.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 !important;
    text-indent: 19px;
}

.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: 500;
    line-height: 56px;
    font-size: 1.250em;
    text-align: center;
}

/*join-select*/
.join-select {
    background: #f4f4f4;
    text-align: left;
    cursor: pointer;
    position: relative;
    text-indent: 19px;
    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-tablet {
    background: url(/images/join/join_bg_ta.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-mobile {
    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-type-box {
    width: 100%;
}

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

.join-wrap-03 .tit-text {
    font-size: 0.938em;
    color: #fff;
    font-weight: 200;
    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"],
.login-wrap-03 input[type="password"],
.login-wrap-03 input[type="number"] {
    width: 100%;
    height: 48px !important;
    background-color: #f4f4f4 !important;
    border: 0;
    text-indent: 34px !important;
    font-size: 1.0em !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.938em;
    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.250em;
    letter-spacing: -1px;
    margin-bottom: 10px;
}

.login-wrap-03 .pin-code {
    width: 100%;
    border: 1px solid #ffffff;
    height: 40px;
    text-align: center;
    padding: 10px 0;
    font-size: 1.000em;
    color: #ffffff;
    cursor: pointer;
}

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


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

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

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

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

.content-box .basic-title {
    font-size: 1.625em;
    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: 15px;
    color: #5f6668;
    border: 1px solid #dddddd;
    width: 33.3%;
    height: 48px;
    text-align: center;
    font-weight: 400;
    padding: 17px 0;
    cursor: pointer;
    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-mobile {
    display: none;
}

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

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

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

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

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

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

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

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

.mypage-table-pc 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-pc tr td .my-cancel-btn:last-child {
    margin-right: 0;
}

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


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

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

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

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

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

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

.customer-bg {
    background: url(/images/customer/customer_bg_ta.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: 94%;
    margin: 0 auto;
}

.table-line {
    position: relative;
}

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

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

.customer-table-pc tr {
    border-bottom: 1px solid #ddd;
}

.customer-table-pc tr th {
    font-weight: 500;
    vertical-align: middle;
    text-align: left;
    padding-left: 15px;
}

.customer-table-pc tr .left {
    vertical-align: top;
    padding-top: 20px;
}

.customer-table-pc tr td {
    vertical-align: middle;
    padding: 20px 0 20px 15px;
    font-weight: 300;
    position: relative;
}

.table-line tbody tr td::after {
    content: '';
    width: 1px;
    height: 24px;
    background-color: #b4bbbc;
    position: absolute;
    bottom: 0;
    right: 0;
}

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

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

.check-one {
    width: 100%;
    vertical-align: middle;
}

.check-one span {
    width: 27px;
    height: 27px;
    display: inline-block;
    line-height: 25px;
}

.check-one span:first-child {
    margin: 0 -6px 0 0;
}

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

.check-one input[type=radio]+label {
    cursor: pointer;
    background-repeat: no-repeat;
    background-image: url('/images/customer/check.svg');
    background-size: 16px 16px;
    font-size: 0;
    padding: 13px;
}

.check-one input[type=radio]:checked+label {
    background-image: url('/images/customer/check_on.svg');
    background-size: 16px 16px;
}

.custo-write-01 {
    width: 98%;
    height: 48px;
    background-color: #fff;
    border: 0;
    box-sizing: border-box;
    font-size: 15px;
    font-weight: 300;
    padding: 15px 15px;
    word-break: keep-all;
    line-height: 1.5em;
    overflow: hidden;
    float: right;
}

.custo-write-02 {
    width: 98%;
    height: 220px;
    background-color: #fff;
    border: 0;
    box-sizing: border-box;
    font-size: 15px;
    font-weight: 300;
    padding: 20px 15px;
    line-height: 1.5em;
    word-break: keep-all;
    float: right;
}

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

.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-mobile {
    display: none;
}

.basic-btn-pc {
    font-size: 1.375em;
    font-weight: 400;
    float: right;
}

.basic-btn-pc .short-btn {
    display: inline-block;
    width: 200px;
    padding: 18px 0;
    border: 1px solid #b1886f;
    color: #b1886f;
    text-align: center;
    margin-right: 16px;
}

.basic-btn-pc .long-btn {
    display: inline-block;
    width: 380px;
    padding: 19px 0;
    background-color: #b1886f;
    color: #fff;
    text-align: center;
}

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

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

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

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

#lodge-section-01 .lodge-bg {
    background: url(/images/tablet/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-tablet {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
}

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

.fade-out-tablet {
    position: absolute;
    display: inline-block;
    top: 43%;
    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: 88%;
}

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

#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: 83%;
    margin: 0 auto;
}

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

#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: 1.063em;
    line-height: 1.5em;
    font-weight: 100;
    word-break: keep-all;
    letter-spacing: -0.43px;
}

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

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

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

#lodge-section-03 .section-03-tablet {
    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(177%);
}

#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(10%);
}

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

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

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

#lodge-section-03 .text-area h2 {
    font-family: 'Noto Sans KR';
    color: #b1886f;
    font-size: 2.000em;
    margin-bottom: 24px;
    line-height: 44px;
    font-weight: 300;
    letter-spacing: -0.8px;
}

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

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

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

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

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

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

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

#lodge-section-04 .img-area-tablet-01 {
    margin: 150px 0 60px;
}

#lodge-section-04 .img-area-tablet-02 {
    width: 370px;
    height: auto;
    margin-left: 8.5%;
}

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

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

#lodge-section-04 .right-con .text-area .lodge-num {
    width: 100%;
    height: auto;
    font-size: 15px;
    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: 11px;
    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: 14px;
    margin-left: 1%;
}

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

#lodge-section-04 .text-area h2 {
    font-family: 'neue';
    color: #b1886f;
    font-size: 2.000em;
    margin-bottom: 55px;
    line-height: 44px;
    font-weight: 400;
    letter-spacing: -0.8px;
}

#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: 1.063em;
    line-height: 1.5em;
    font-weight: 100;
    word-break: keep-all;
    letter-spacing: -0.43px;
}

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

#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-section-01 .stay-bg {
    background: url(/images/tablet/stay/lodge_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%;
}

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

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

.fade-out-tablet {
    position: absolute;
    display: inline-block;
    top: 43%;
    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-tablet {
    background-color: #f3ede6;
    width: 100%;
    height: 750px;
    overflow: hidden;
    padding-bottom: 13%;
    position: relative;
}

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

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

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

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

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

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

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

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

#stay-section-02-tablet .right-con {
    width: clamp(31.25rem, 21.2291rem + 15.6425vw, 40rem);
    height: 345px;
    background-color: rgba(255, 255, 255, 0.8);
    float: left;
    position: absolute;
    z-index: 1;
    top: 366px !important;
}

#stay-section-02-tablet .right-con .text-area {
    width: 80%;
    margin: 0 auto;
    padding: clamp(3.125rem, 0.4821rem + 4.1295vw, 5.4375rem) 0;
    word-break: keep-all;
}

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

#stay-section-02-tablet .right-con .text-area p {
    font-size: 0.875em;
    font-weight: 200;
    color: #000;
    letter-spacing: -0.431px;
    padding-bottom: 30px;
    line-height: clamp(1.375rem, 1.2184rem + 0.3909vw, 1.6875rem);
    width: 90%;
    word-break: keep-all;
}

#stay-section-02-tablet .right-con .text-area .more-btn {
    width: 140px;
    height: 40px;
    text-align: center;
    border-radius: 4px;
    border: 1px solid #c4987c;
    font-size: 1.0em;
    color: #c4987c;
    padding: 10px 0;
}

/*stay_gallery layer popup*/
.spa-layer-pop {
    width: 650px;
    height: 85%;
    margin: 0 auto;
    color: #fff;
    z-index: 2000;
    position: fixed;
    right: 50%;
    top: 5%;
    transform: translateX(50%);
}

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

.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.375em;
    float: left;
    font-weight: 400;
    color: #000;
}

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

.roomSlider {
    width: 680px;
    height: 340px;
    display: block;
    margin: 20px auto;
}

.roomSlider img {
    width: 680px;
    height: 340px;
    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 {
    margin-bottom: 30px;
    width: 100%;
}

.spa-layer-wrap .slick-dots {
    position: absolute;
    bottom: 20px !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;
    padding-bottom: 50px;
    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-reser {
    display: flex;
    justify-content: flex-end;
}

.gallery-con .room-btn {
    width: 240px;
    height: 60px;
    background-color: #c4987c;
    border-radius: 4px;
    color: #fff;
    font-size: 1.125em;
    text-align: center;
    padding: 16px 0;
    font-weight: 400;
    float: right;
}


/*------- stay section03 -------*/
#stay-section-03-tablet {
    background-color: #f3ede6;
    width: 100%;
    height: 750px;
    overflow: hidden;
    padding-bottom: 22%;
    position: relative;
}

#stay-section-03-tablet .left-con {
    width: 100%;
    height: 100%;
    padding: 60px 0;
}

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

#stay-section-03-tablet .right-con {
    width: clamp(31.25rem, 21.2291rem + 15.6425vw, 40rem);
    height: 345px;
    background-color: rgba(255, 255, 255, 0.8);
    float: left;
    position: absolute;
    z-index: 1;
    top: 366px;
}

#stay-section-03-tablet .right-con .text-area {
    width: 80%;
    margin: 0 auto;
    padding: clamp(4.125rem, 0.4821rem + 4.1295vw, 5.4375rem) 0;
    word-break: keep-all;
}

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

#stay-section-03-tablet .right-con .text-area p {
    font-size: 0.875em;
    font-weight: 200;
    color: #000;
    letter-spacing: -0.431px;
    padding-bottom: 30px;
    line-height: 27px;
    width: 90%;
    word-break: keep-all;
}

#stay-section-03-tablet .right-con .text-area .more-btn {
    width: 140px;
    height: 40px;
    text-align: center;
    border-radius: 4px;
    border: 1px solid #c4987c;
    font-size: 1.0em;
    color: #c4987c;
    padding: 10px 0;
}

/*------- stay section04 -------*/
#stay-section-04-tablet {
    background-color: #f3ede6;
    width: 100%;
    height: 750px;
    overflow: hidden;
    padding-bottom: 22%;
    position: relative;
}

#stay-section-04-tablet .left-con {
    width: 100%;
    height: 100%;
    padding: 60px 0;
}

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

#stay-section-04-tablet .right-con {
    width: clamp(31.25rem, 21.2291rem + 15.6425vw, 40rem);
    height: 345px;
    background-color: rgba(255, 255, 255, 0.8);
    float: left;
    position: absolute;
    z-index: 1;
    top: 366px;
}

#stay-section-04-tablet .right-con .text-area {
    width: 80%;
    margin: 0 auto;
    padding: clamp(3.125rem, 0.4821rem + 4.1295vw, 5.4375rem) 0;
    word-break: keep-all;
}

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

#stay-section-04-tablet .right-con .text-area p {
    font-size: 0.875em;
    font-weight: 200;
    color: #000;
    letter-spacing: -0.431px;
    padding-bottom: 30px;
    line-height: 27px;
    width: 90%;
    word-break: keep-all;
}

#stay-section-04-tablet .right-con .text-area .more-btn {
    width: 140px;
    height: 40px;
    text-align: center;
    border-radius: 4px;
    border: 1px solid #c4987c;
    font-size: 1.0em;
    color: #c4987c;
    padding: 10px 0;
}

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

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

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

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

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

.fade-out-tablet {
    position: absolute;
    display: inline-block;
    top: 43%;
    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(159.0625rem, 84.7952rem + 185.3786vw, 203.4375rem);
    background-color: #f3ede6;
}

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

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

.intro-bg .intro-01 {
    background-color: rgba(255, 255, 255, 0.9);
    width: 90%;
    height: 215px;
    text-align: center;
    margin: 0 auto;
    position: absolute;
    right: 50%;
    top: 365px;
    transform: translateX(50%);
}

.intro-bg .intro-01 h3,
.intro-02 h3 {
    font-size: clamp(1.625rem, 0.999rem + 1.5625vw, 2rem);
    line-height: 44px;
    color: #b1886f;
    font-weight: 500;
    text-transform: uppercase;
    margin-top: 45px;
}

.intro-bg .intro-01 p,
.intro-02 p {
    font-size: clamp(0.75rem, 0.437rem + 0.7813vw, 0.9375rem);
    line-height: clamp(1.25rem, 0.749rem + 0.7821vw, 1.6875rem);
    letter-spacing: -0.43px;
    color: #000;
    font-weight: 200;
    padding-top: 13px;
}

.intro-bg .intro-02 {
    width: 80%;
    height: 240px;
    text-align: center;
    margin: 0 auto;
    position: absolute;
    right: 50%;
    top: 600px;
    transform: translateX(50%);
}

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

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

.food-bg .intro-03 h3 {
    font-size: clamp(1.625rem, 0.999rem + 1.5625vw, 2rem);
    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.437rem + 0.7813vw, 0.9375rem);
    line-height: clamp(1.125rem, 0.3928rem + 1.8277vw, 1.5625rem);
    letter-spacing: -0.43px;
    color: #fff;
    font-weight: 200;
    padding-top: 13px;
    width: 70%;
    margin: 0 auto;
    word-break: keep-all;
}

.food-wrap-mo {
    display: none;
}

.food-wrap {
    width: 90%;
    height: clamp(26.875rem, 13.2751rem + 21.2291vw, 38.75rem);
    margin: 0 auto;
    margin-top: clamp(1.25rem, -3.0447rem + 6.7039vw, 5rem);
    position: relative;
    top: 750px;
}

.dinner-con {
    width: 100%;
    height: clamp(16.25rem, -1.5323rem + 44.3864vw, 26.875rem);
}

.dinner-con .dinner-left {
    width: 50%;
    position: absolute;
    top: 0;
}

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

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

.dinner-con .dinner-right {
    width: 56%;
    height: 428px;
    position: absolute;
    top: -70px;
    left: 50%;
}

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

.dinner-bg {
    width: 100%;
    height: 186px;
    background: url('/images/dine/menu_02.png') no-repeat center center;
    background-size: 100%;
    position: absolute;
    top: clamp(7.1875rem, -8.5028rem + 39.1645vw, 16.5625rem);
}

.bar-con {
    width: 100%;
    height: clamp(14.0625rem, 11.9705rem + 5.2219vw, 15.3125rem);
    position: relative;
    padding-top: 20px;
}

.bar-con .bar-left {
    width: 50%;
    position: absolute;
    right: 50%;
}

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

.bar-con .bar-right {
    width: 44%;
    height: auto;
    position: absolute;
    left: 53%;
}

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

.bar-con .bar-right p {
    font-size: clamp(0.75rem, 0.437rem + 0.7813vw, 0.9375rem);
    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: relative;
    top: clamp(0rem, -8.3681rem + 20.8877vw, 5rem);
}

.break-con .break-left {
    width: 56%;
    position: absolute;
    right: 50%;
}

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

.break-con .break-right {
    width: 50%;
    height: auto;
    position: absolute;
    left: 53%;
}

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

.break-con .break-right p {
    font-size: clamp(0.75rem, 0.437rem + 0.7813vw, 0.9375rem);
    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%;
}

.library-wrap-mo {
    display: none;
}

.library-wrap {
    width: 90%;
    height: 100%;
    margin: 0 auto;
    position: relative;
    top: clamp(65.625rem, 18.5542rem + 117.4935vw, 93.75rem);
}

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

.library-01 h4 {
    font-size: clamp(1.75rem, 1.25rem + 0.625vw, 2rem);
    line-height: 44px;
    color: #b1886f;
    font-weight: 500;
}

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

.dinner-02 {
    position: absolute;
    top: clamp(7.8125rem, 10.3177rem + -3.9106vw, 5.625rem);
    right: 50%;
    transform: translateX(50%);
    width: 111%;
}

.dinner-02 img {
    width: 100%;
}

.library-02-txt {
    height: auto;
    position: absolute;
    bottom: clamp(2.6875rem, -12.689rem + 38.3812vw, 11.875rem);
    left: 51.5%;
    width: 45%;
}

.library-02-txt h4 {
    font-size: clamp(1.75rem, 1.25rem + 0.625vw, 2rem);
    line-height: 44px;
    color: #b1886f;
    font-weight: 500;
    padding-bottom: 10px;
}

.library-02-txt p {
    font-size: clamp(0.875rem, 0.5rem + 0.4688vw, 1.0625rem);
    line-height: clamp(1.25rem, 0.749rem + 0.7821vw, 1.6875rem);
    letter-spacing: -0.43px;
    color: #000;
    font-weight: 200;
}

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

#dine-section-03 {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: clamp(62.5rem, 20.6593rem + 104.4386vw, 87.5rem);
    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;
    width: 380px;
    height: 80px;
    position: absolute;
    top: 40px;
    right: 6%;
}

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

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

.chef-01 ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

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

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

.chef-01 ul .chef-photo .sub-photo {
    width: 100%;
    height: 100%;
    position: absolute;
    right: -40px;
    top: -40px;
}

.chef-01 ul .chef-photo .sub-photo img {
    width: 80px !important;
    height: 80px !important;
}

.chef-01 ul .chef-txt {
    width: 62%;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 30px;
}

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

.chef-01 ul li p {
    font-size: clamp(0.875rem, 0.5rem + 0.4688vw, 1.0625rem);
    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: 10px auto;
}

.chef-02 ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chef-02 ul .chef-txt {
    width: 62%;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 50px 30px;
}

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

.chef-02 ul li p {
    font-size: clamp(0.875rem, 0.5rem + 0.4688vw, 1.0625rem);
    line-height: clamp(1.25rem, 0.749rem + 0.7821vw, 1.6875rem);
    letter-spacing: -0.43px;
    color: #000;
    font-weight: 200;
    padding: 10px clamp(2.1875rem, -4.6124rem + 10.6145vw, 8.125rem) 0 0;
    word-break: keep-all;
}

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

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

.chef-02 ul .chef-photo .sub-photo {
    width: 100%;
    height: 100%;
    position: absolute;
    left: -40px;
    top: -40px;
}

.chef-02 ul .chef-photo .sub-photo img {
    width: 80px !important;
    height: 80px !important;
}

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

.chef-03 ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

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

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

.chef-03 ul .chef-photo .sub-photo {
    width: 100%;
    height: 100%;
    position: absolute;
    right: -40px;
    top: -40px;
}

.chef-03 ul .chef-photo .sub-photo img {
    width: 80px !important;
    height: 80px !important;
}

.chef-03 ul .chef-txt {
    width: 62%;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 30px;
}

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

.chef-03 ul li p {
    font-size: clamp(0.875rem, 0.5rem + 0.4688vw, 1.0625rem);
    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  --------------------------*/
.xper-video-pc {
    display: none;
}

.xper-video-mobile {
    display: none;
}

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

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

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

.fade-out-tablet {
    position: absolute;
    display: inline-block;
    top: 43%;
    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-tablet {
    width: 100%;
    height: auto;
}

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

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

#exper-section-02-tablet {
    background-color: #f3ede6;
    width: 100%;
    height: 750px;
    overflow: hidden;
    padding-bottom: 13%;
    position: relative;
}

#exper-section-02-tablet .left-con {
    width: 100%;
    height: 384px;
    padding-top: 60px;
    overflow: hidden;
}

#exper-section-02-tablet .left-con img {
    width: 770px;
}

#exper-section-02-tablet .right-con {
    width: clamp(31.25rem, 21.2291rem + 15.6425vw, 40rem);
    height: 320px;
    background-color: rgba(255, 255, 255, 0.8);
    float: left;
    position: absolute;
    z-index: 1;
    top: 300px !important;
    right: 0;
    padding: 50px 0;
}

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

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

#exper-section-02-tablet .right-con .text-area p {
    font-size: 0.875em;
    font-weight: 200;
    color: #000;
    letter-spacing: -0.431px;
    padding-bottom: 30px;
    line-height: clamp(1.375rem, 1.2184rem + 0.3909vw, 1.6875rem);
    width: 90%;
    word-break: keep-all;
}

/*------- exper section03 -------*/
#exper-section-03-tablet {
    background-color: #f3ede6;
    width: 100%;
    height: 750px;
    overflow: hidden;
    padding-bottom: 13%;
    position: relative;
}

#exper-section-03-tablet .left-con {
    width: 100%;
    height: 384px;
    overflow: hidden;
}

#exper-section-03-tablet .left-con img {
    width: 770px;
}

#exper-section-03-tablet .right-con {
    width: clamp(31.25rem, 21.2291rem + 15.6425vw, 40rem);
    height: 320px;
    background-color: rgba(255, 255, 255, 0.8);
    float: left;
    position: absolute;
    z-index: 1;
    top: 300px !important;
    left: 0;
    padding: 30px 0;
}

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

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

#exper-section-03-tablet .right-con .text-area p {
    font-size: 0.875em;
    font-weight: 200;
    color: #000;
    letter-spacing: -0.431px;
    padding-bottom: 30px;
    line-height: clamp(1.375rem, 1.2184rem + 0.3909vw, 1.6875rem);
    width: 90%;
    word-break: keep-all;
}

#exper-section-03-tablet .right-con .text-area .more-btn {
    width: 140px;
    height: 40px;
    text-align: center;
    border-radius: 4px;
    border: 1px solid #c4987c;
    font-size: 1.0em;
    color: #c4987c;
    padding: 10px 0;
    float: right;
}

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

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

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

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

/*exper layer popup*/
.exper-layer-pop {
    width: 80%;
    height: 85%;
    margin: 0 auto;
    color: #fff;
    z-index: 2000;
    position: fixed;
    right: 50%;
    top: 8%;
    transform: translateX(50%);
    overflow: auto;
}

.overlay-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(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.375em;
    float: left;
    font-weight: 400;
    color: #000;
}

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

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

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

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

.spa-con ul .txt {
    font-size: 0.875em;
    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 section04 -------*/
#exper-section-04-tablet {
    background-color: #f3ede6;
    width: 100%;
    height: 750px;
    overflow: hidden;
    padding-bottom: 13%;
    position: relative;
}

#exper-section-04-tablet .left-con {
    width: 100%;
    height: 384px;
    overflow: hidden;
}

#exper-section-04-tablet .left-con img {
    width: 770px;
}

#exper-section-04-tablet .right-con {
    width: clamp(31.25rem, 21.2291rem + 15.6425vw, 40rem);
    height: 320px;
    background-color: rgba(255, 255, 255, 0.8);
    float: left;
    position: absolute;
    z-index: 1;
    top: 300px !important;
    right: 0;
    padding: 15px 0;
}

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

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

#exper-section-04-tablet .right-con .text-area p {
    font-size: 0.875em;
    font-weight: 200;
    color: #000;
    letter-spacing: -0.431px;
    padding-bottom: 30px;
    line-height: clamp(1.375rem, 1.2184rem + 0.3909vw, 1.6875rem);
    width: 90%;
    word-break: keep-all;
}

#exper-section-04-tablet .right-con .text-area .more-btn {
    width: 140px;
    height: 40px;
    text-align: center;
    border-radius: 4px;
    border: 1px solid #c4987c;
    font-size: 1.0em;
    color: #c4987c;
    padding: 10px 0;
    float: right;
}

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

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

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

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

/*------- exper section05 -------*/
#exper-section-05-tablet {
    background-color: #f3ede6;
    width: 100%;
    height: 750px;
    overflow: hidden;
    padding-bottom: 13%;
    position: relative;
}

#exper-section-05-tablet .left-con {
    width: 100%;
    height: 384px;
    overflow: hidden;
}

#exper-section-05-tablet .left-con img {
    width: 770px;
}

#exper-section-05-tablet .right-con {
    width: clamp(31.25rem, 21.2291rem + 15.6425vw, 40rem);
    height: 320px;
    background-color: rgba(255, 255, 255, 0.8);
    float: left;
    position: absolute;
    z-index: 1;
    top: 300px !important;
    left: 0;
    padding: 30px 0;
}

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

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

#exper-section-05-tablet .right-con .text-area p {
    font-size: 0.875em;
    font-weight: 200;
    color: #000;
    letter-spacing: -0.431px;
    padding-bottom: 30px;
    line-height: clamp(1.375rem, 1.2184rem + 0.3909vw, 1.6875rem);
    width: 90%;
    word-break: keep-all;
}

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

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

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

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

/*------- exper section06 -------*/
#exper-section-06-tablet {
    background-color: #f3ede6;
    width: 100%;
    height: 750px;
    overflow: hidden;
    padding-bottom: 13%;
    position: relative;
}

#exper-section-06-tablet .left-con {
    width: 100%;
    height: 384px;
    overflow: hidden;
}

#exper-section-06-tablet .left-con img {
    width: 770px;
}

#exper-section-06-tablet .right-con {
    width: clamp(31.25rem, 21.2291rem + 15.6425vw, 40rem);
    height: 310px;
    background-color: rgba(255, 255, 255, 0.8);
    float: left;
    position: absolute;
    z-index: 1;
    top: 315px !important;
    right: 0;
    padding: 50px 0;
}

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

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

#exper-section-06-tablet .right-con .text-area p {
    font-size: 0.875em;
    font-weight: 200;
    color: #000;
    letter-spacing: -0.431px;
    padding-bottom: 30px;
    line-height: clamp(1.375rem, 1.2184rem + 0.3909vw, 1.6875rem);
    width: 90%;
    word-break: keep-all;
}

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

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

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

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

/*------- exper section07 -------*/
#exper-section-07-tablet {
    background-color: #f3ede6;
    width: 100%;
    height: 750px;
    overflow: hidden;
    padding-bottom: 13%;
    position: relative;
}

#exper-section-07-tablet .left-con {
    width: 100%;
    height: 384px;
    overflow: hidden;
}

#exper-section-07-tablet .left-con img {
    width: 770px;
}

#exper-section-07-tablet .right-con {
    width: clamp(31.25rem, 21.2291rem + 15.6425vw, 40rem);
    height: 310px;
    background-color: rgba(255, 255, 255, 0.8);
    float: left;
    position: absolute;
    z-index: 1;
    top: 315px !important;
    left: 0;
    padding: 50px 0;
}

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

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

#exper-section-07-tablet .right-con .text-area p {
    font-size: 0.875em;
    font-weight: 200;
    color: #000;
    letter-spacing: -0.431px;
    padding-bottom: 30px;
    line-height: clamp(1.375rem, 1.2184rem + 0.3909vw, 1.6875rem);
    width: 90%;
    word-break: keep-all;
}

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

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

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

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

/*------- exper section08 -------*/
#exper-section-08-tablet {
    background-color: #f3ede6;
    width: 100%;
    height: 750px;
    overflow: hidden;
    padding-bottom: 13%;
    position: relative;
}

#exper-section-08-tablet .left-con {
    width: 100%;
    height: 384px;
    overflow: hidden;
}

#exper-section-08-tablet .left-con img {
    width: 770px;
}

#exper-section-08-tablet .right-con {
    width: clamp(31.25rem, 21.2291rem + 15.6425vw, 40rem);
    height: 340px;
    background-color: rgba(255, 255, 255, 0.8);
    float: left;
    position: absolute;
    z-index: 1;
    top: 315px !important;
    right: 0;
    padding: 50px 0;
}

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

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

#exper-section-08-tablet .right-con .text-area p {
    font-size: 0.875em;
    font-weight: 200;
    color: #000;
    letter-spacing: -0.431px;
    padding-bottom: 30px;
    line-height: clamp(1.375rem, 1.2184rem + 0.3909vw, 1.6875rem);
    width: 90%;
    word-break: keep-all;
}

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

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

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

#exper-section-08-tablet .right-con .text-area .time-area p span {
    float: right;
    font-weight: 400;
    color: #033f64;
}

/*------- exper section09 -------*/
#exper-section-09-tablet {
    background-color: #f3ede6;
    width: 100%;
    height: 750px;
    overflow: hidden;
    padding-bottom: 13%;
    position: relative;
}

#exper-section-09-tablet .left-con {
    width: 100%;
    height: 384px;
    overflow: hidden;
}

#exper-section-09-tablet .left-con img {
    width: 770px;
}

#exper-section-09-tablet .right-con {
    width: clamp(31.25rem, 21.2291rem + 15.6425vw, 40rem);
    height: 340px;
    background-color: rgba(255, 255, 255, 0.8);
    float: left;
    position: absolute;
    z-index: 1;
    top: 315px !important;
    left: 0;
    padding: 35px 0;
}

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

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

#exper-section-09-tablet .right-con .text-area p {
    font-size: 0.875em;
    font-weight: 200;
    color: #000;
    letter-spacing: -0.431px;
    padding-bottom: 30px;
    line-height: clamp(1.375rem, 1.2184rem + 0.3909vw, 1.6875rem);
    width: 90%;
    word-break: keep-all;
}

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

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

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

#exper-section-09-tablet .right-con .text-area .time-area p span {
    float: right;
    font-weight: 400;
    color: #033f64;
}

/*------- exper section10 -------*/
#exper-section-10-tablet {
    background-color: #f3ede6;
    width: 100%;
    height: 280px;
    overflow: hidden;
    padding-bottom: 13%;
    position: relative;
}

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

.sample-con .text-area {
    width: 90%;
    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: 22.5px 0;
}

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

.sample-con .text-box p {
    font-size: 0.875em;
    font-weight: 200;
    color: #000;
    letter-spacing: -0.431px;
    padding-bottom: 15px;
    line-height: 22px;
    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: center;
}

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

.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.813em;
    font-weight: 200;
    padding-bottom: 25px;
    line-height: 19px;
    width: 96%;
    text-align: left;
    color: #000;
    letter-spacing: -0.33px;
}

/*------- exper section11 -------*/
#exper-section-11-tablet {
    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: 40px;
    color: #8c9ba4;
    font-weight: 500;
    text-align: center;
    text-transform: uppercase;
    padding-bottom: 10px;
}

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

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

.etc-con ul li {
    display: inline-block;
    margin-right: 1%;
    width: 33%;
}

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

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

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

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

.etc-con ul li .etc-sub {
    font-size: 0.875em;
    color: #033f64;
    line-height: 22px;
}

/*-------------------------- 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: 32%;
    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: 560px;
    height: 380px;
    margin: 0 auto;
    color: #fff;
    z-index: 2000;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -45%);
}

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

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

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

.photo-layer-wrap .left-btn {
    position: absolute;
    top: 40%;
    left: -50px;
    display: inline-block;
}

.photo-layer-wrap .right-btn {
    position: absolute;
    top: 40%;
    right: -50px;
    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: #2f3334;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    letter-spacing: -0.6px;
    position: absolute;
    right: 50%;
    transform: translateX(50%);
    padding: 24px 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%;
}

.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: 85%;
    margin: 0 auto 110px;
    font-size: 0;
}

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

.news-list-wrap .lists .lists-item {
    width: 48.5%;
    height: 100%;
    float: left;
    margin: 0 3% 2% 0;
    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:hover .thum {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

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

.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 {
    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.125rem, 0.8413rem + 0.7092vw, 1.375rem);
    color: #000;
    position: relative;
    padding-bottom: 13px;
    display: inline-block;
    width: 97%;
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: nowrap;
}

.lists .lists-item .thum-txt ul .txt {
    font-size: clamp(0.8125rem, 0.7416rem + 0.1773vw, 0.875rem);
    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-mo {
    display: none;
}

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

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

.page-wrap ul li {
    display: inline-block;
    font-size: clamp(1.0625rem, 0.9916rem + 0.1773vw, 1.125rem);
    color: #747e81;
    position: relative;
    cursor: pointer;
    margin-right: 5%;
}

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

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

.page-wrap 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: 18px;
    color: #b1886f;
    font-weight: 200;
    padding-bottom: 10px;
}

.view-tit-box .tit {
    font-size: clamp(1.5rem, 0.8766rem + 1.5584vw, 1.875rem);
    color: #000;
    font-weight: 400;
    padding-bottom: 15px;
    line-height: 1.5em;
}

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

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

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

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

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

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

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

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

.view-txt {
    font-size: 16px;
    color: #000;
    text-align: left;
    line-height: 20px;
    padding: 20px 0;
    white-space: pre-line;
}

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

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

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

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

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

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

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

.content-box .policy-tab li {
    display: inline-block;
    font-size: 15px;
    color: #5f6668;
    border: 1px solid #dddddd;
    width: 33.3%;
    height: 48px;
    text-align: center;
    font-weight: 400;
    padding: 17px 0;
    cursor: pointer;
    vertical-align: middle;
}

.content-box .policy-tab li:last-child {
    width: 33.4% !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: 60px;
}

.policy-box h4 {
    font-size: 1.0em;
    color: #2f3334;
    font-weight: 600;
    margin-bottom: 24px;
}

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

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

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

.policy-box p {
    font-size: 0.750em;
    color: #2f3334;
    font-weight: 300;
    word-break: keep-all;
    line-height: 25px;
}


/* ----------------- 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: #ffffff;
    margin-top: 60px;
}

#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: 40px 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: 42px;
    background-color: #878787;
    color: #fff;
    text-align: center;
    font-size: 15px;
    letter-spacing: -0.38px;
    padding: 13px 0;
    margin-bottom: 8px;
}

.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 {
    margin-bottom: 20px;
    width: 100% ;
}

.package-list-wrap .slick-dots {
    position: absolute;
    bottom: 20px !important;
    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-size: 22px;
    font-weight: 400;
    padding: 20px 0;
}

.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;
    margin-right: 4px;
}

.left-area .room-txt {
    font-size: 13px;
    letter-spacing: -0.35px;
    line-height: 22px;
    word-break: keep-all;
    padding-bottom: 24px;
    border-bottom: 1px solid #dddddd;
    font-weight: 300;
}

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

.left-area .room-icon li {
    font-size: 13px;
    letter-spacing: -0.35px;
    font-weight: 300;
    display: inline-block;
    margin-right: 2%;
    padding-bottom: 10px;
}

.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: 13px;
    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: 15px !important;
    letter-spacing: -0.38px !important;
    line-height: 25px !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: 28px;
    letter-spacing: -0.7px;
    color: #b1886f;
    text-decoration: underline;
    font-family: 'neue' !important;
}

.room-type .notice01 .cancel-view button {
    width: 30%;
    font-size: 12px;
    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: 40%;
    background-color: #f9f9f9;
    padding: 23px 26px;
    border: 1px solid #dddddd;
    position: absolute;
    right: 0;
}

.room-type .notice01 .cancel-hide .tit {
    font-size: 14px;
    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: 13px;
    letter-spacing: -0.33px;
    font-weight: 300;
    padding: 8px 0;
    border-bottom: 1px solid #cccccc;
}

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

.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: 14px;
    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: 13px;
    text-align: center;
    letter-spacing: -0.33px;
    color: #b1886f;
    border-radius: 4px;
    padding: 3px 13px;
    margin-left: 10px;
}

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

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

.room-type .notice02 .price .small {
    font-size: 18px;
    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: 11px;
    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: 14px;
    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: 18px;
    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: 14px;
    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-right: 2%;
}

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

.notice04 .pack-btn {
    width: 130px;
    height: 40px;
    border-radius: 2px;
    border: 1px solid #c4987c;
    background-color: #fff;
    font-size: 16px;
    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;
}

.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;
}

.left-area .more-btn {
    width: 100%;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    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: 22px;
    font-weight: 400;
    display: flex;
    position: fixed;
    top: 0;
    width: 100%;
    height: 70px;
    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: 70%;
    height: auto;
    padding-top: 12%;
    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: 13px;
    top: -20px;
    left: 4px;
    color: #000;
}

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

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

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

.pac-sel-list .meal::after {
    position: absolute;
    content: '석식횟수';
    font-size: 13px;
    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: 15px;
    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: 13px;
    color: #000000;
    letter-spacing: -0.33px;
    line-height: 21px;
    word-break: keep-all;
}

.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;
    padding: 0 8%;
    margin-top: 26px;

}

.cla-tit li {
    font-size: 14px;
    color: #000;
}

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

.package-list-wrap .right-area .sticky-box {
    width: 70%;
    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: 14px;
    color: #000;
    padding-bottom: 8px;
}

.sticky-box .calendar-box .tit span {
    font-size: 20px;
    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: 12px;
    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: 4px;
    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: 13px;
    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: 16px;
    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: 11px;
    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: 12px;
    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: 12px;
    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: 240px;
    height: 60px;
    background-color: #c4987c;
    color: #ffffff;
    line-height: 56px;
    font-weight: 600;
    font-size: 20px;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    margin: 40px auto;
    display: block;
}


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

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

/* 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: 70%;
    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: 14px;
    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: 32px;
    vertical-align: middle;
    padding-left: 30px;
}

.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:30px;
}

.more-hide .con {
    font-size: 0.75em;
    line-height: 28px;
    padding-top: 25px;
    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 31px;
}

.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: 80px;
    background-color: #c4987c;    
    color: #fff;
    font-size: 1.38em;
    letter-spacing: -0.55px;
    text-align: center;
    border-radius: 4px;
    padding: 28px 0;
}

.right-area.pay .middle {
    margin-top: 0 !important;
}

.right-area.pay a.cart-add-btn {
    display: block;
    width: 100%;
    height: 58px;
    background-color: #fff;   
    border: 1px solid #888888; 
    color: #000;
    font-size: 1.0em;
    letter-spacing: -0.4px;
    text-align: center;
    border-radius: 4px;
    padding: 20px 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: 14px;
    letter-spacing: 0.4px;
    font-weight: 400;     
}

.right-area.pay .cart-price .price {
    font-family: 'neue' !important;
    font-size: 24px;
    letter-spacing: -0.6px; 
    font-weight: 500;     
    text-align: right;
}

.right-area.pay .cart-price .price .small {    
    font-size: 18px;
    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: 500;
}

.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: 13px;
    word-break: keep-all;
    font-weight: 300;
}

/* ----------------- package-pop(241017)----------------- */
.package-pop {
    display: none;
    width: 50%;
    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 {
    width: 80%;
    font-size: 14px;
    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: 16px;
    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%;
}