@charset "utf-8";

.story-con .more-btn a{ display: inline-block; writing-mode: vertical-lr; text-align: center;  padding-bottom: 0;}
.story-con .more-btn a::before{ content: ''; writing-mode: vertical; position: absolute; right: -10px; top:0px; width: 1px; height: 0%;  opacity: 1; background-color: #9ba4aa; animation: scroll-d 2s infinite; }
.story-con .more-btn a:hover::after{ content:''; display: none; }

@keyframes scroll-d{
    0%{ height:0%; }
    100%{ height: 100%;}
}

/* notice */
.notice .notice-in{ width: 1600px; margin: 0 auto;  padding: 0 30px;}
.notice .notice-in .noticeTit{ margin-bottom: 50px;}
.notice .notice-in .noticeTit h3{ font-size: 20px; color: #000; font-weight: 400;}
.notice-con{ display: flex; justify-content: space-between; align-items:flex-start; position: relative;}
.notice-con .notice-l{ width: 50%; margin-right: 60px;}

.notice-con .notice-r{ width: 50%; padding-top: 20px; position: sticky; top: 120px; left: 0;}
.notice-r .notice-num{ margin-bottom: 30px;}
.notice-r .notice-num p{ color: #000; font-size: 15px; line-height: 1.5em;}
.notice-r .notice-num p span{ font-weight: 600;}
.notice-r .noticeTxt p{ font-size: 14px; font-weight: 400; line-height: 1.5em;}

.notice-r .more-btn{ position: absolute; top: 20px; right: 0; padding-bottom: 5px; border-bottom: 1px solid #9ba4aa; transition: all 0.3s ease-in-out}
.notice-r .more-btn a{color: #9ba4aa; transition: all 0.3s ease-in-out; display: block;}
.notice-r .more-btn:hover{ border-bottom: 1px solid #000; }
.notice-r .more-btn:hover a{ color: #000; }

/* 유의사항 */
.note{ margin: 80px auto;}
.note .note-in{ width: 1600px; margin: 0 auto; border-top: 1px solid #eaeaea; padding:80px 30px; display: flex; justify-content: space-around; align-items: flex-start; }
.noteTit h3{ font-size: 20px; color: #000; font-weight: 400; margin-bottom: 35px;}
.note-l{ width: 50%; margin-right: 30px; margin-top: 50px;}
.note-l p{ font-size: 14px; margin-bottom: 15px; }
.note-l p:last-child{ line-height: 1.5em;}
.note-r{ width: 50%; aspect-ratio: 4/3;}
.note-r .note-img{ width: 100%; height: 100%; border-radius: 30px;  background: url(../img/main/image15.jpg) no-repeat center/cover; }

/* 환불규정 */
.refund{ margin: 80px auto; }
.refund .refund-in{ width: 1600px; margin: 0 auto; border-top: 1px solid #eaeaea; padding: 80px 30px 0;}
.refundTit h3{ font-size: 20px; color: #000; font-weight: 400; margin-bottom: 35px;}
.refundTxt{ margin-top: 50px;}
.refundTxt p{ font-size: 14px; line-height: 1.5em; margin-bottom: 8px;}

/*떠나요*/
#price{ display: block;}
/* .priceTable td{ padding: 50px 0 !important; } */
.priceTable { font-weight: 200; }
.priceTable th.ss { background: #eee !important; }
.priceTable th.wk{ width: auto !important;}
.priceTable th.ad { display: none; }
.priceTable tr .ad { display: none; }
.rsv_cal_b td{ padding: 15px 0 !important;}
.rsv_cal_t{ margin-bottom: 15px;}


.cancelfee { font-weight: 200; width: 100%; } 
.cancelfee th { background-color:#eee; } 
.reserve-refund-txt>ul>li { font-size:15px; font-weight:400; line-height:25px; } 
.reserve-refund-txt>ul>li span { margin-right:10px; font-weight:600; } 
.cancelfee th, .cancelfee td { padding:10px 10px !important; }

/* 오시는길 */
.location{ margin: 80px auto; }
.location .loc-in{ width: 1600px; margin: 0 auto; padding: 80px 30px 0; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #eaeaea; padding: 80px 30px 0; }

.loc-l{ width: 50%; margin-right: 30px; }
.loc-l .locTit h3{ font-size: 20px; color: #000; font-weight: 400; }
.loc-l .locTxt {margin-top: 50px;}
.loc-l .locTxt p{ font-size: 14px; line-height: 1.5em; }
.loc-l .locTxt p:last-child{ margin-top: 20px; }
.loc-l .addTxt{ margin-top: 50px;}
.loc-l .addTxt p{ font-size: 14px; line-height: 1.5em; color: #343434;  }

.loc-r{ width: 50%;}

@media all and (max-width:1600px) { 
    /* section { width: 100%; padding: 100px 20px; }  */
    /* #price { width: 96%; }  */

    .notice {margin: 120px auto 80px;}
    .note{ margin: 0 auto;}
    .refund{ margin: 0 auto;}
    .notice .notice-in, .note .note-in, .refund .refund-in, .location .loc-in{ width: 95%;}
    .story{ margin: 120px auto 0;}
}

@media all and (max-width: 1024px) { 
    /* section { flex-direction: column; } 
    section> div:first-child { width: 100%; } 
    section> :last-child { width: 100%; padding-left: 0px; }  */

    .story{ margin: 120px auto 100px;}

    .priceTable { font-size: 12px; } 

    .notice .notice-in, .note .note-in, .refund .refund-in, .location .loc-in{ width: 100%;}
    .loc-l{ margin-right: 30px;}
    .notice-con .notice-r .noticeTxt { margin-bottom: 80px; }
    .notice-r .more-btn { position: relative; top: 0; padding: 0 12px 5px; width: max-content;  }
}


@media all and (max-width: 768px) { 
    

    .notice{ margin: 50px auto 80px;}

    .story-con{align-items: flex-start;}
    .story-con .story-txt{ margin-top: 30px; }
    .story-con .story-txt{ text-align: left;}
    .story{ margin-bottom: 30px;}
    .story-con .more-btn a{ display: none;}

    .notice .notice-in .noticeTit{ margin-bottom: 0;}

    .notice-con{ flex-direction: column-reverse;}
    .notice-con .notice-r, .notice-con .notice-l{ width: 100%; margin-bottom: 60px; }
    .notice-con .notice-l{ margin-bottom: 0; margin-right: 0;}
    .notice-con .notice-r{ position: static;}
    .notice-con .notice-r .noticeTxt{ margin-bottom: 50px;}
    .notice .notice-in, .note .note-in, .refund .refund-in, .location .loc-in{ flex-direction: column;}
    .loc-l, .loc-r, .note-l, .note-r{ width: 100%;}
    .loc-l{ margin-right: 0; margin-bottom: 50px;}
    .note-l{ margin-right: 0; margin-top: 0px; margin-bottom: 50px; }
    .notice-l{ position: relative;}
    /* .notice-r .more-btn{ } */
    
 }

@media all and (max-width: 500px){
 .priceTable tr .type { width: 110px;} 
 .priceTable tr .type p {font-size: 12px;} 
 .priceTable tr .wk { padding: 7px 5px; } 

 .notice{ margin: 80px auto;}
 .notice .notice-in, .note .note-in, .refund .refund-in, .location .loc-in{ padding: 0 10px;}
 .note-l, .refund .refund-in{ margin-top: 50px;}
 .refund .refund-in{ padding-top: 50px;}

 .loc-l{ margin-top: 80px;}

 .root_daum_roughmap .wrap_map  { height: 350px !important;}
 .notice-con .notice-r .noticeTxt { margin-bottom: 40px; }

 }