:root {
    --primary-color: #100354;
    --secondary-color: #111;
    --third-color:#fff;
    --font-size-base: 16px;
    }
section{ font-family: 'Pretendard';
        width: 100%; }
    
.wrap_1300 h1 {font-family: 'RiaSans-ExtraBold';font-size: 2.25rem; color:#E8E8E8;}

.wrap_1300 h2 {font-family: 'RiaSans-ExtraBold'; font-size: 2.25rem; margin-top: 80px; ;}

main.sub  > #item_list > .titleBox_sub {margin-bottom: 0;}
main.sub  > #item_list.mb70{margin-bottom: 0 !important;}
/* 첫번째 section */

.wrap_1300 {max-width: 1300px; margin: 0 auto; text-align: left; }
.main_visual strong{color: var(--secondary-color); padding-left: 60px;}
.main_visual .wrap_1300 > p {margin-top: 60px; color: var(--secondary-color); margin-bottom: 10px; }
.main_visual .wrap_1300 h1 {margin: 0; line-height: 140%}
.main_visual .wrap_1300 h1 span::after {content: ''; display: inline-block;
    width: 90px; border-bottom: 2px solid #efefef;}
.hashtag_txt {position: relative; top: 5px;
    margin-top: 20px; font-size: 1.13em; color:#555555; line-height: 140%;}
.cont_wrap ul {display: flex; gap: 4%; }

/* 효과 */
.cont_wrap { margin-top: 40px;}
.cont_wrap ul li { padding: 32px; overflow: hidden; 
    list-style: none; position: relative; width: 400px; height: 360px; 
    border-radius: 10px; 
}
.cont_wrap ul li img {position: absolute; left: 0; top: 0; z-index: -10; border-radius: 10px; transition: all 0.3s;}
   
.cont_wrap ul li h2 {font-size:1.75rem; margin-top: 0; color: #fff; margin-bottom: 12px;}
.cont_wrap ul li p{color:#fff; line-height: 120%;  position: relative;}
.cont_wrap ul li p::after {position: absolute; top: 60px; left: 0;
    content: ''; width: 40px; height: 40px; 
    display: inline-block; background: url(/images/rending/review_more.png)no-repeat center center;}

.cont_wrap ul li:hover img {transform: scale(1.15);
     transition: transform 0.3s ease-in-out; /* 회전 애니메이션 */}
    

/* 두번째 section */
.middle_visual {background: url(/images/rending/middle_back.jpg)no-repeat top center;
     background-size: cover; width: 100%; padding: 100px 0 100px 0;
}
.middle_visual h2 {text-align: center; margin-bottom: 72px; font-size: 2.25rem;}

.rentsecond_con {margin-top: 48px; display: flex; 
    justify-content: space-between; align-items:center;}

.rentsecond_con div strong {font-weight: 600; color:#BAACFF;}

.rentsecond_con div img {border-radius: 10px;}

.rentsecond_con div:first-child{flex-basis: 50%;}
.rentsecond_con div:last-child {flex-basis: 50%; margin-left: 40px;}

.rentsecond_con div h3 {font-size: 1.75rem; margin: 5px 0 20px; font-weight: 800;}
.rentsecond_con div p {font-size: 1.25em; line-height: 24px;}


/* 세번째 section */
.rendingreview_wrap .wrap_1300 {display: flex;}
.rendingreview_wrap {position: relative}
.review_left {margin-right:150px; position: sticky; top: 0; height:100%;}
.review_left p {margin: 20px  0 32px 0; font-size: 1.25rem;} 

.review_left ul li{position: relative; transition: all 0.5s; cursor: pointer;
    padding: 18px 18px 18px 120px; color: var(--primary-color); border:1px solid #100354;
    border-radius: 10px; margin-bottom: 10px; font-size: 1.25rem;}
.review_left ul li::before {content: ''; background: url(/images/rending/arrow_02.png)no-repeat center; width: 40px; height: 7px; 
    position: absolute; left: 18px; top: calc(50% - 4px);}
.review_left ul li.hover {background: var(--primary-color); color: #fff; padding: 18px 120px 18px 18px;}
.review_left ul li.hover::before {background: url(/images/rending/arrow_01.png)no-repeat center; width: 40px; height: 7px; left: 140px;}
.review_right {margin-top: 120px; overflow: hidden;}

.review_right ul li {background: #fff; position: relative; box-shadow: 0px 2px 5px #89898929;
    padding: 12px; margin-bottom: 60px; border-radius: 15px;}
.review_right ul li > div{
    display: flex; flex-wrap: nowrap; padding: 18px; background: #F8FBFF; align-items: center;
    border-radius: 15px;}
.review_right ul li:nth-child(odd)::after { content:""; position: absolute; right: 40px; bottom: -13px; 
    width: 26px; height: 26px; background: #fff; transform: rotate(-45deg);
    border-left: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf;
    border-radius: 3px;
}
.review_right ul li:nth-child(even)::after { content:""; position: absolute; left: 40px; bottom: -13px; 
    width: 26px; height: 26px; background: #fff; transform: rotate(-45deg);
    border-left: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf;
    border-radius: 3px;}

.review_right ul li:nth-child(odd) {margin-left: 80px;}
.review_right ul li:nth-child(even) {margin-right: 80px;}
.review_right ul li .re_right_img {flex-basis: 50%;}
.review_right ul li .re_right_img img{width: 150px; height: 150px; object-fit: cover; overflow: hidden; border-radius: 10px;}
.review_right ul li .re_right_txt {padding: 0 20px; flex-basis: 200%;}
.rate_list {border: none;}
.rate_list span {background: url(/images/rending/star_on.png)no-repeat; width: 14px; height: 14px; 
display: inline-block; }
.reviewStar {display: flex; justify-content: space-between; padding: 10px 0;}
.rate_list {flex-basis: 75%;}
.re_right_txt h4 {border-bottom: 1px dashed #D6D6D6;padding-bottom: 10px; color: var(--primary-color);font-weight: 600;}
.re_right_txt h4::after {content: ''; background: url(/images/rending/review_more_small.png)no-repeat center center; width: 18px; height: 18px;
display: inline-block; margin-left: 10px; position: relative; top: 5px;}
.re_right_txt strong {color: #555555;}
.re_right_txt data {color: #999999;}
.re_right_txt p {color:#555555;}

/* 마지막 section */
.rentmiddle_wrap {margin-top: 120px; padding-top: 10px; background:#F1F1F1; width: 100%;}
.rentmiddle_wrap .wrap_1300 {text-align: center;}

.rentmiddle_wrap .wrap_1300 p {color:#111; font-size: 1.25em; line-height: 28px; margin: 24px 0 32px 0;}

.middlelist_wrap {display: grid; grid-template-columns: 0.5fr 1fr 1fr 1fr; gap: 2%; }
.rentmiddle_list {background: #fff; border-radius: 10px; font-size: 1.15rem; 
    box-shadow: 0px 0px 10px #00000029; margin-bottom: 32px; display: flex; flex-direction: column}
.rentmiddle_list dt {padding: 20px 0;color:#fff;border-radius: 10px 10px 0 0;}

.rentmiddle_list dd:last-child {border-radius: 0 0 10px 10px;}

.rentmiddle_list dd {padding: 15px 0;}


.rentmiddle_list dd:nth-child(even) {background: #F3F9FF;}

.middlelist_wrap .list01 dt {background: var(--secondary-color);}
.middlelist_wrap dt {background: var(--primary-color);}
.rentmiddle_list dd:first-of-type {
    height: 120px; display: flex; 
    align-items: center;
    justify-content: center;}

.review_button p {display: inline-block; position: relative; transition: all 0.3s;
    padding: 18px 18px 18px 120px; color: var(--primary-color); border:1px solid #100354;
    border-radius: 10px; margin-bottom: 10px; font-size: 1.25rem;}
.review_button p::before {content: ''; background: url(/images/rending/arrow_02.png)no-repeat center; width: 40px; height: 7px; 
    position: absolute; left: 18px; top: calc(50% - 4px);}
.review_button p:hover {padding:18px 120px 18px 18px; background: var(--primary-color);color: #fff;}
.review_button p:hover::before {background: url(/images/rending/arrow_01.png)no-repeat center; width: 40px; height: 7px; left: 200px;}

/* 메오광고페이지  */

.flex_row {
    display: flex;
    flex-wrap: wrap;
}
.flex_col {
    display: flex;
    flex-direction: column;
}

.taste_coupon>p::before {
    content: '*';
    color: #FF7D7D;
    margin-right: 5px;
}
.couponde_wrap .flex_col p {
    font-size: 1.2rem;
    font-weight: 600;
    color: #111;
    margin-top: 10px;}

.couponde_wrap {
    border: 1px solid #ddd;
    padding: 16px;
    border-radius: 6px;
    margin-top: 15px;
    display: inline-block;
    width: 50%;
}

.couponde_wrap strong {
    background: #FF7D7D;
    padding: 10px;
    text-align: center;
    display: block;
    color: #fff;
    border-radius: 4px;
    margin-bottom: 10px;
}
.coupon_down {
    cursor: pointer;
    font-size: 16px;
    line-height: 40px;
    width: 116px;
    height: 40px;
    display: flex;
    justify-content: center;
    background: #fff;
    border: 1px solid #999999;
    border-radius: 5px;
    margin-top: 14px;}
    .couponde_wrap .flex_col span {
        overflow: hidden;
        margin-top: 14px;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;}

.couponde_wrap .flex_row>img {
    width: 200px;
    height: 128px;
    border-radius: 5px; margin-right: 20px;
}
.detail_section {
    margin-top: 20px;
    border-radius: 10px;
    border: 1px solid #ddd;
    padding: 24px;
    text-align: left;
}

.detail_section h3 {
    padding-bottom: 14px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 14px;
}

.detail_section p {
    color: #555
}

.taste_coupon>p::before {
    content: '*';
    color: #FF7D7D;
    margin-right: 5px;
}
.appdown_wrap{
    background: #F7F7F7; padding: 20px 40px; margin:15px 0 0 15px; border-radius: 5px; width: 48%}
.appdown_wrap > .flex_row {justify-content: center; gap: 20px;}
.appdown_wrap p {font-size: 1.5rem; font-family: 'RiaSans-ExtraBold'; margin-top: 20px; margin-left: 10px;
    position: relative; color: #111;}
.appdown_wrap p strong {color: #157CED; font-family: 'RiaSans-ExtraBold';}
.appdown_wrap p::after {content: ''; display: inline-block; background: url(/images/tastetop/app_banner.png)no-repeat; 
    width: 194px; height: 140px; position: absolute; right: 0; top: -30px; z-index: 0; }
.appdown_wrap a {margin-top: 30px; z-index: 10; display: inline-block; transition: all 0.3s; width: 160px; height: 40px;
    border-radius: 5px; color: #111; background: #fff; text-align: center; line-height: 40px;
   box-shadow: 3px 3px 0px #00000029;}
.appdown_wrap button {font-size: 16px; background: none; cursor: pointer; text-align: center;}
.appdown_wrap button img {margin-right: 10px; width: 18px; height: 18px; display: inline-block; margin-top: -2px;}
.appdown_wrap a:hover {background: #111; color: #fff;}
.appdown_wrap a:hover button {color: #fff; opacity: 1;}

.advertising_meo .main_visual {background: url(/images/meo_ad/meo_ad_main.webp) no-repeat right; width: 100%; background-size: cover;}
.advertising_meo .main_visual .wrap_1300 > p {margin-top: 0;}
.advertising_meo .txt_center {text-align: center; padding-top: 140px; color:#fff;}
.advertising_meo .txt_center .txt_box {color:#fff; font-size: 1.2rem; 
    background: #157ced; padding:10px 32px; display: inline-block; border-radius: 50px; margin-bottom: 20px;}
.advertising_meo .txt_center h1 {font-size: 3.0rem; margin-bottom: 10px; display: block;}
.advertising_meo .txt_center strong {color: #fff; padding-left: 0; font-size: 2.0rem; padding-bottom: 10px; display: inline-block; }
.advertising_meo .txt_center p {font-size: 1.2rem;}
.advertising_meo .txt_center .box_black {padding:12px 52px; margin-top: 20px; background: #111; display: inline-block;}
.advertising_meo .cont_wrap ul {justify-content: center;}
.advertising_meo .cont_wrap ul li {height: auto; padding: 24px; margin-bottom: 58px; width: 500px;
    background: rgba(255, 255, 255, 0.5) no-repeat; position: relative;
    border-radius: 10px;
    backdrop-filter: brightness(1.5) blur(25px);
    -webkit-backdrop-filter: blur(21px);}
.advertising_meo .cont_wrap ul li a::after { position: absolute; top: calc(50% - 20px); right: 24px;
    content: ''; display: inline-block;width: 40px; height: 40px;
    background: url(/images/meo_ad/meo_ad_arrow.png)no-repeat;}
.advertising_meo .cont_wrap ul li p::after {display: none;}
.advertising_meo .cont_wrap ul li a span {color: #111; background: #fff; padding: 6px 14px; border-radius: 16px;
  display: inline-block; }
.advertising_meo .cont_wrap ul li a p {color: #111; font-size: 1.2rem;}
.advertising_meo .cont_wrap ul li a h2 {margin: 8px 0;color: #157ced;}
.advertising_meo .detail_section {margin-top: 60px;}
.advertising_middle h2 {text-align: center;}
.advertising_middle .wrap_1300 > p {text-align: center;
    font-size: 1.25rem; font-weight: 300; margin-top: 10px;}
.advertising_middle .rentsecond_con strong {color:#157CED}
.advertising_middle .rentsecond_con {border-bottom: 1px solid #ddd; padding-bottom: 60px;}
.advertising_middle .reservation {font-size: 1.25rem; color: #fff; background: #111; width: 240px;
height: 44px; line-height: 44px; display: inline-block; text-align: center; border-radius: 5px; margin-top: 20px; transition: all 0.3s;}
.advertising_middle .reservation:hover {background: #157ced; color:#fff;}
.advertising_meo .end_visual {padding: 118px 0; background: url(/images/meo_ad/meo_ad_tail.webp) no-repeat;
width: 100%; background-size: cover;}
.advertising_meo .end_visual .flex_row {justify-content: space-between;}
.tail_imgwrap img{border-radius: 10px;}
.advertising_meo .end_visual p {color: #fff; font-size: 1.5rem; margin-bottom: 72px; line-height: 140%;}
.advertising_meo .end_visual .open_talk { transition: all 0.3s;
    background: #fff; height: 44px; padding: 0 20px; border-radius: 5px;}
.advertising_meo .end_visual .open_talk p {color: #111; line-height: 44px; font-size: 1.25rem;}
.advertising_meo .end_visual .open_talk p::before {content: ''; background: url(/images/meo_ad/kakao_icon.png)no-repeat; position: relative; top: 4px;
    display: inline-block; width: 25px; height: 21px;}
.advertising_meo .end_visual .open_talk:hover  {background: #157CED;}
.advertising_meo .end_visual .open_talk:hover p {color:#fff;}


/* 반응형 */

@media screen and (max-width: 1200px) {
    
    .middle_visual {padding-top: 0;}
    .middle_visual h2 {margin-bottom: 0;}
    .review_left {margin-right: 0; text-align: center;position: static;}
    .review_right ul li .re_right_img {flex-basis:inherit;}
    .review_left ul {display: flex; gap: 3%;}
    .review_left ul li {padding: 10px 20px;}
    .review_left ul li::before {display: none;}
    .review_left ul li:hover{color: inherit;transform: none; background: inherit; padding: 10px 20px; }
    .review_left ul li.hover {color: inherit; transform: none; background: inherit; padding: 10px 20px;}
    .review_right ul li > div {text-align: left;}
    .review_right ul li .re_right_txt {flex-basis: 150%;}
    .review_right ul li .re_right_img img {min-width: 150px;}
    .review_right ul li:nth-child(odd) {margin-left: 0;}
    .review_right ul li:nth-child(even) {margin-right: 0;}
    .rendingreview_wrap .wrap_1300 {flex-direction: column; align-items: center}
    .review_left p {margin: 18px 0 24px 0;}
    .review_right {margin-top: 24px;}
    .middlelist_wrap {min-width: 800px; max-width: 100%;}
}

@media screen and (max-width: 800px) {
    .advertising_meo .txt_center .box_black {padding:12px 24px}
    .main_visual .wrap_1300 > p {margin-top: 80px;}
    .advertising_middle .wrap_1300 h2 {margin-top: 40px;}
    .middlelist_wrapper {overflow-x: auto;}
    .middlelist_wrapper::-webkit-scrollbar { height: 5px; }
    .middlelist_wrapper::-webkit-scrollbar-thumb {background: var(--primary-color); border-radius: 5px;}
    .middlelist_wrapper::-webkit-scrollbar-track {background: #fff; border-radius: 5px;}
    .cont_wrap ul {overflow-x: auto; scroll-snap-type: x mandatory; }
    .cont_wrap ul li:hover img {transform: none;}
    .wrap_1300{text-align: center;}
    .main_visual .wrap_1300 h1 span {display: none;}
    .main_visual .wrap_1300 h1 {margin-top: -40px;}
    .main_visual strong {padding-left: 0; font-size: 2rem; word-break: keep-all;}
    .hashtag_txt {margin-top: 10px; }
    .cont_wrap ul {flex-wrap: nowrap; }
    .cont_wrap ul::-webkit-scrollbar {height: 5px; /* 스크롤바 높이 */} 
    .cont_wrap ul::-webkit-scrollbar-thumb { background: var(--primary-color) /* 스크롤바 색상 */; border-radius: 5px; /* 둥근 모서리 */} 
    .cont_wrap ul::-webkit-scrollbar-track { background: #efefef; }
    .cont_wrap ul li {text-align: left; flex: 0 0 auto; margin-bottom: 16px;
        width: 232px;  height: 220px; display: flex;
        flex-direction: column; justify-content: flex-start; align-items: flex-start;}
    
    .wrap_1300 h1 {margin-top: 72px;font-size: 2rem;}
    .wrap_1300 h2 {font-size: 1.95rem; line-height: 120%;}
    .rentsecond_con {flex-direction: column; row-gap: 20px; text-align: left; align-items: flex-start; padding: 0 20px;}
    .rentsecond_con div:last-child {margin-left: 0;}
    .middle_visual .wrap_1300 > div:nth-child(2) {flex-direction: column-reverse} 
    .middle_visual .wrap_1300 > div:nth-child(4) {flex-direction: column-reverse} 
    .rate_list {flex-basis: 50%;}
 
    .cont_wrap {margin-top: 28px;}

    .wrap_1300 > p {margin-top: 24px;}

    .more_wrap {width: 80%;}
    .rentmiddle_wrap {margin-top: 80px;}
    
    .advertising_meo .cont_wrap ul {flex-direction: column; align-items: center; padding-bottom: 60px;}
    .advertising_meo .cont_wrap ul li {margin-bottom: 20px; padding: 18px; width: 100%;}
    .advertising_meo .txt_center {padding-top: 120px;}
    .advertising_meo .main_visual .wrap_1300 h1 {margin-top: 0;}
    .advertising_meo .couponde_wrap {width: 100%; overflow: hidden;}
    .appdown_wrap {width: 100%; margin: 15px 0 0 0;}
    .cont_wrap ul li h2 {font-size: 1.5rem;}
    .advertising_meo .end_visual p {margin-bottom: 20px;}
    .advertising_meo .end_visual {padding: 80px 20px;}
    .tail_imgwrap {margin:40px 0; flex-wrap: nowrap; gap: 20px;
        flex-direction: row; overflow-x: auto;}
    .tail_imgwrap img {margin-bottom: 20px;}
    .tail_imgwrap::-webkit-scrollbar { height: 5px; }
    .tail_imgwrap::-webkit-scrollbar-thumb {background: var(--primary-color); border-radius: 5px;}
    .tail_imgwrap::-webkit-scrollbar-track {background: #fff; border-radius: 5px;}

}
@media screen and (max-width: 540px) {
    .couponde_wrap .flex_row>img {width: 100%; height: 180px;}
    .flex_col {flex-direction: column;}
    .appdown_wrap a {width: 45%; margin-top: 20px;}
    .appdown_wrap p {margin-top: 0;}
    .appdown_wrap {padding: 20px};
    .appdown_wrap p::after {opacity: 0; display: none;}
    .couponde_wrap .flex_row>img {margin-right: 0;}
}



@media screen and (max-width: 480px) {
    .appdown_wrap p::after {display: none;}
    .review_button p {padding: 12px 12px 12px 80px; border-radius: 10px; margin-bottom: 10px; font-size: 1.15rem;}
    .review_button p::before{left: 12px;}
    .review_button p:hover {padding:12px 12px 12px 80px; background: var(--primary-color);color: #fff;}
    .review_button p:hover::before {background: url(/images/rending/arrow_01.png)no-repeat center; width: 40px; height: 7px; left: 12px;}
    .wrap_1300{padding: 0 10px;}
    .review_right ul li {margin-bottom: 30px;}
    .review_right ul li > div {flex-direction: column;}
    .review_right ul li .re_right_txt {padding:0; margin-top: 20px;}
    .review_right ul li .re_right_img {width: 100%;}
    .review_right ul li .re_right_img img {width: 100%;}
    .review_left ul li {font-size: 16px; padding: 10px;}
    .review_left ul li:hover{color: inherit;transform: none; background: inherit; padding: 10px}
    .review_left ul li.hover {color: inherit; transform: none; background: inherit; padding: 10px}
    .advertising_middle .rentsecond_con {text-align: center; padding-bottom: 40px;}
    .rentsecond_con div p {font-size: 1.0rem; line-height: 120%;}
    .rentsecond_con div p br {display: none;}
    .advertising_meo .end_visual p {font-size: 1.2rem;}
    .advertising_meo .end_visual p br{display: none;}
    .advertising_meo .end_visual .open_talk {margin:0 auto;}
    .advertising_meo .detail_section {padding: 20px; margin-top: 40px;}
    .appdown_wrap {word-break: break-all;}
    .appdown_wrap br {display: none;}
    .appdown_wrap button img {display: none;}
    .advertising_meo .txt_center h1 {font-size: 2.5rem;}
    .advertising_meo .txt_center strong {font-size: 1.5rem;}
    .rentsecond_con {padding: 0;}
    .advertising_meo .txt_center .txt_box {padding: 12px 20px;}
    .taste_coupon .coupon_only {align-items: center}
    .taste_coupon .flex_row{justify-content: center;}
}