section.p-t-160{padding-top: 92px;} /* slick arrow */ .arrow_wrap {box-sizing: border-box; padding: 0 20px; width: 100%; z-index: 5; position:absolute; top: 50%; transform: translateY(-50%); display: flex; justify-content: space-between;} .arrow_wrap button{position: relative;} /* 페이지네이션 */ .pagination{position: relative; display: flex; justify-content: center; column-gap: 7px;} .pagination>a, .pagination>strong{font-family: 'SUIT'; display: flex; justify-content: center; align-items: center; width: 46px; height: 46px; border-radius: 46px; color: #777; font-weight: 600;} .pagination>strong{color: #FFF; font-weight: 700; background-color: #000;} .pagination>a.dir{border: 1px solid #c9c9c9; font-size: 20px; color: #000;} .pagination>a.dir.prev2>i{position: block; width: 20px; height: 20px; background:url(../_img/common/pagination_prev.png) no-repeat center / cover;} .pagination>a.dir.next2>i{position: block; width: 20px; height: 20px; background:url(../_img/common/pagination_next.png) no-repeat center / cover;} /* 체크박스 */ input[type="checkbox"]{position: relative; appearance: none; width: 24px; height: 24px; border-radius: 6px; border: 1px solid #CCC; background-color: #FFF;} input[type="checkbox"]::after{content:''; display:block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background:url(/_img/common/check.png) no-repeat center / cover; width: 12px; height: 9px;} input[type="checkbox"]:checked{background-color:#1C95C5; border: 1px solid #1C95C5;} input[type="checkbox"]:checked::after{background:url(/_img/common/check_checked.png) no-repeat center / cover;} /* 텍스트 박스 */ input[type="text"],input[type="email"], input[type="password"], select{border: 1px solid #DDD; border-radius: 6px; padding: 0 20px; font-size: 16px; font-weight: 400; color: #444; width: 100%; box-sizing: border-box; height: 52px; font-family: 'Pretendard';} select{appearance: none; background: url(/_img/common/select_arrow.png) no-repeat; background-size: 14px 8px; background-position: 85% 50%;} /* 버튼 체크박스, 라디오 */ .btn_label{border: 1px solid #DDD; border-radius: 6px; display: flex; height: 52px; box-sizing: border-box; align-items: center; column-gap: 4.5px; padding-left: 15px; width: 100%;} /* 라디오 */ input[type="radio"]{position: relative; appearance: none; width: 24px; height: 24px; border-radius: 24px; border: 1px solid #CCC; background-color: #FFF;} input[type="radio"]::after{content:''; display:block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background:url(/_img/common/check.png) no-repeat center / cover; width: 12px; height: 9px;} input[type="radio"]:checked{background-color:#1C95C5; border: 1px solid #1C95C5;} input[type="radio"]:checked::after{background:url(/_img/common/check_checked.png) no-repeat center / cover;} /* 마크 리스트 */ ul.mark_list li{display: block; position: relative; padding-left: 28px;} ul.mark_list li::before{content:''; display: block; position: absolute; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; border-radius: 4px; background-color: #000; left: 8px;} @media screen and (max-width: 500px){ section.p-t-160{padding-top: 40px;} .pagination{column-gap: 6px;} .pagination>a{border: 1px solid #DDD;} .pagination>a, .pagination>strong{width: 36px; height: 36px; font-size: 14px;} .pagination>a.dir{display: none;} input[type="checkbox"]{width: 18px; height: 18px;} input[type="checkbox"]::after{width: 8px; height: 5px;} input[type="radio"]{width: 18px; height: 18px;} input[type="radio"]::after{width: 8px; height: 5px;} input[type="text"], input[type="password"], select{height: 42px; font-size: 14px; padding: 0 10px;} .btn_label{height: 42px; font-size: 14px; padding-left: 10px;} ul.mark_list li{padding-left: 24px;} } /* 서브페이지 리뷰 컨텐츠 */ .review_info .right_tit{display: flex; align-items: center; column-gap: 10px;} .review_info .right_tit p{font-size: 14px; color: #000; line-height: 1.6em;} .review_info .right_tit p .total_review{font-weight: 400;} .review_info .right_tit a.more_review_btn{display: block; padding: 6px 20px; font-size: 14px; font-weight: 600; color: #000; line-height: 1.6em; border: 1px solid #CCC; border-radius: 34px;} .review_page{display: flex; flex-wrap: wrap; justify-content: space-between;} .review_page .review_con{width: 46.6%; box-sizing: border-box; position: relative; border-bottom: 1px solid #CCC; padding: 40px 0;} .review_page .review_con::after{content:''; display: block; position: absolute; right: -40px; top: 50%; transform: translateY(-50%); width: 1px; height: 140px; background-color: #CCC;} .review_page .review_con:nth-child(2n)::after{display: none;} .review_page .review_con>a{display: flex; width: 100%; height: 100%; justify-content: space-between;} .review_page .review_con>a .txt_wrap{width: calc(100% - 160px);} .review_page .review_con>a .txt_wrap .stars{color: #F83131; font-size: 20px; line-height: 1em; display: flex;} .review_page .review_con>a .txt_wrap .writer_info{font-size: 14px; font-weight: 600; color: #000; display: flex; column-gap: 10px; align-items: center; margin-top: 10px; margin-bottom: 20px;} .review_page .review_con>a .txt_wrap .writer_info .date{font-size: 14px; font-weight: 400; color: #666;} .review_page .review_con>a .txt_wrap h4{font-size: 20px; font-weight: 700; color: #000; line-height: 1.6em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .review_page .review_con>a .txt_wrap p{font-size: 16px; font-weight: 400; color: #000; line-height: 1.6em; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;} .review_page .review_con>a .img_wrap{width: 120px; height: 120px; border-radius: 20px; overflow: hidden; position: relative;} .review_page .review_con>a .img_wrap img{width: 100%; height: 100%;} .review_page .review_con>a .img_wrap .review_num{position: absolute; right: 10px; bottom: 10px; color: #FFF; background-color: rgba(0,0,0,0.8); border-radius: 25px; padding: 4px 10px; text-align: center;} /* 리뷰 팝업 */ .review_pop{position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background: rgba(0,0,0,0.5); z-index: 9999; display: none;} .review_pop>div{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 10px; background-color: #FFF;padding: 30px; padding-right: 10px; box-sizing: border-box; height: 85%; box-sizing: border-box; } .review_pop>div .box_inner{overflow-y: auto; height: 100%; padding-right: 20px; box-sizing: border-box;} .review_pop>div .box_inner::-webkit-scrollbar{width: 3px; background-color: #EEE;} .review_pop>div .box_inner::-webkit-scrollbar{width: 3px;} .review_pop>div .box_inner::-webkit-scrollbar-thumb{background-color: #1C94C5;} .review_pop>div>.box_inner>.tit_wrap{display: flex; align-items: center; justify-content: space-between; } .review_pop>div>.box_inner>.tit_wrap h3{font-size: 18px; font-weight: 600; color: #000;} .review_pop>div>.box_inner>.tit_wrap .close_btn{font-size: 18px; font-weight: 400;} .review_pop>div>.box_inner>.border_wrap{border-top: 2px solid #000; border-bottom: 1px solid #DDD; display: flex;} .review_pop>div>.box_inner>.border_wrap a{font-size: 16px; font-weight: 400; color: #999;} .review_pop>div>.box_inner>.border_wrap a.active{font-weight: 600; color: #000;} .review_pop>div .stars{color: #F83131; font-size: 28px; line-height: 1em; display: flex;} .review_pop>div .stars span{font-size: 16px; font-weight: 500; color: #000; margin-left: 10px;} .review_pop>div .writer_info{font-size: 14px; font-weight: 600; color: #000; display: flex; column-gap: 10px; align-items: center; margin-top: 10px; margin-bottom: 20px;} .review_pop>div .date{font-size: 14px; font-weight: 400; color: #666;} .review_pop>div h4{font-size: 20px; font-weight: 700; color: #000; line-height: 1.6em;} .review_pop>div p{font-size: 16px; font-weight: 400; color: #000; line-height: 1.6em; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 10px;} .review_pop .pagination{margin-top: 40px;} /* 리뷰팝업 - 리스트 팝업 */ .review_pop>div.list_box{width: 1200px; display: none;} .review_pop>div.list_box>.box_inner>.border_wrap{column-gap: 20px;} .review_pop>div.list_box>.box_inner>.border_wrap.mob{display: none;} .review_list .r_list>li{border-bottom: 1px solid #DDD; padding: 40px 0;} .review_list .r_list>li>a{display: flex;} .review_list .r_list>li>a .left_wrap{width: 71%;} .review_list .r_list>li>a .left_wrap .flex_wrap{display: flex; column-gap: 30px; margin: 26px 0;} .review_list .r_list>li>a .left_wrap .flex_wrap .img_wrap{position: relative; width: 120px; height: 120px; border-radius: 20px; overflow: hidden;} .review_list .r_list>li>a .left_wrap .flex_wrap .img_wrap img{width: 100%; height: 100%; object-fit: cover; object-position: center;} .review_list .r_list>li>a .left_wrap .flex_wrap .img_wrap .img_num{font-size: 14px; font-weight: 600; color: #FFF; padding: 4px 10px; line-height: 1.2em; background: rgba(0,0,0,0.8); border-radius: 25px; position: absolute; right: 10px; bottom: 10px;} .review_list .r_list>li>a .left_wrap .flex_wrap .txt_wrap{width: calc(100% - 150px); box-sizing: border-box; padding-right: 40px;} .review_list .r_list>li>a .left_wrap .flex_wrap .txt_wrap p.trip_name{font-size: 14px; font-weight: 500; color: #666; margin-top: 10px;} .review_list .r_list>li>a .recomm_wrap{display: flex; column-gap: 15px; align-items: center;} .review_list .r_list>li>a .recomm_wrap button{color: #AAA; font-size: 16px; display: flex; align-items: center; column-gap: 5px;} .review_list .r_list>li>a .recomm_wrap button.recomm{color: #000;} .review_list .r_list>li>a .right_wrap{position: relative; width: 29%; border-left: 1px solid #DDD; box-sizing: border-box; padding: 10px 40px;} .review_list .r_list>li>a .right_wrap p.date{position: absolute; bottom: 10px; } .review_list .r_list>li>a .stars{color: #F83131; font-size: 28px; line-height: 1em; display: flex;} .review_list .r_list>li>a .stars span{font-size: 16px; font-weight: 500; color: #000; margin-left: 10px;} /* 리뷰팝업 - 상세 팝업 */ .review_pop>div.view_box{width: 960px; display: none;} .review_pop>div.view_box .border_wrap {justify-content: space-between; align-items: center; padding: 17px 0;} .review_pop>div.view_box .border_wrap .border_left{display: flex; column-gap: 20px; align-items: center; justify-content: space-between;} .review_pop>div.view_box .border_wrap .border_left .writer_info{margin: 0;} .review_pop>div.view_box .border_wrap .border_left .date{margin: 0;} .review_pop>div.view_box .border_wrap .stars{margin: 0;} .review_pop>div.view_box .border_wrap .stars span{ margin-left: 0; margin-right: 10px;} .review_pop>div.view_box .review_con{position: relative; } .review_pop>div.view_box .review_con .review_sli_wrap{position: relative; margin: 0 auto; width: 95.6%; min-height: 300px;} .review_pop>div.view_box .review_con .review_sli{position: relative; width: 100%; min-height: 300px;} .review_pop>div.view_box .review_con .review_sli .img_wrap{width: 100%; height: auto; min-height: 300px; display: flex; align-items: center; justify-content: center; overflow: hidden;} .review_pop>div.view_box .review_con .review_sli .img_wrap img{width: 100%; height: auto; max-height: 600px; object-fit: contain; display: block !important; visibility: visible !important; opacity: 1 !important;} .review_pop>div.view_box .review_con .review_sli.slick-initialized{min-height: 300px;} .review_pop>div.view_box .review_con .review_sli.slick-initialized .slick-list{min-height: 300px; display: block !important;} .review_pop>div.view_box .review_con .review_sli.slick-initialized .slick-track{min-height: 300px; display: block !important;} .review_pop>div.view_box .review_con .review_sli.slick-initialized .slick-slide{display: block !important; min-height: 300px;} .review_pop>div.view_box .review_con .review_sli.slick-initialized .slick-slide.slick-active{display: block !important; opacity: 1 !important; visibility: visible !important;} .review_pop>div.view_box .review_con .review_sli.slick-initialized .slick-slide .img_wrap{width: 100%; height: auto; min-height: 300px; display: flex !important; align-items: center; justify-content: center; overflow: hidden;} .review_pop>div.view_box .review_con .review_sli.slick-initialized .slick-slide .img_wrap img{width: 100% !important; height: auto !important; max-height: 600px !important; object-fit: contain !important; display: block !important; visibility: visible !important; opacity: 1 !important;} .review_pop>div.view_box .review_con .review_sli.slick-initialized .slick-slide.slick-active .img_wrap img{display: block !important; visibility: visible !important; opacity: 1 !important;} .review_pop>div.view_box .review_con .arrow_wrap{padding: 0; width: 100%; position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;} .review_pop>div.view_box .review_con .arrow_wrap .re_prev_arrow{position: relative; left: -15px;} .review_pop>div.view_box .review_con .arrow_wrap .re_next_arrow{position: relative; right: -15px;} .review_pop>div.view_box .review_con .review_txt_wrap{position: relative; margin: 0 auto; width: 95.6%; font-size: 16px; font-weight: 400; color: #000; margin-top: 20px; line-height: 1.8em;} .review_pop>div.view_box .review_con .recomm_wrap{margin-top: 60px; display: flex; justify-content: center; column-gap: 6px;} .review_pop>div.view_box .review_con .recomm_wrap button{width: 200px; padding: 14px 0; border-radius: 50px; border: 1px solid #DDD; border-radius: 50px; display: flex; align-items: center; justify-content: center; flex-direction: column; row-gap: 5px;} .review_pop>div.view_box .review_con .recomm_wrap button span{color: #AAA;} .review_pop>div.view_box .review_con .recomm_wrap button span.txt{display: flex; column-gap: 5px; align-items: center; font-size: 16px; font-weight: 400;} .review_pop>div.view_box .review_con .recomm_wrap button span.txt i{font-size: 18px;} .review_pop>div.view_box .review_con .recomm_wrap button.active span{color: #000;} .review_pop>div.view_box .btn_wrap{display: flex; justify-content: center; column-gap: 4px; } .review_pop>div.view_box .btn_wrap>a{display: block; position: relative; width: 160px; height: 48px; line-height: 48px; text-align: center; border-radius: 48px; color: #000; background-color: #FFF; font-weight: 400; font-size: 16px; border: 1px solid #CCC;} .review_pop>div.view_box .btn_wrap>a.edit_btn{background-color:#000; border: 1px solid #000; color:#FFF; font-weight: 600;} .review_pop>div.view_box .btn_wrap>a.delete_btn{background-color:#444; border: 1px solid #444; color:#FFF; font-weight: 600;} @media screen and (max-width: 1280px){ .review_pop>div.list_box{width: 96%;} } @media screen and (max-width: 1024px){ .review_pop>div.view_box{width: 96%;} } @media screen and (max-width: 768px){ .review_pop>div.list_box>.box_inner>.border_wrap.mob{display: flex; border-top: 1px solid #DDD;} .review_pop>div>.box_inner>.tit_wrap h3 span.pc{display: none;} .review_pop>div>.box_inner>.tit_wrap h3 span.mob{display: block;} .review_pop>div.review_list{width: 100%; height: 100vh; border-radius: 0; left: 0; top: 0; transform: translate(0); padding: 0;} .review_pop>div .box_inner{padding: 0; padding-bottom: 50px;} .review_pop>div>.box_inner>.tit_wrap{padding: 20px;} .review_list .r_list{padding: 0 20px; box-sizing: border-box;} .review_list>.box_inner>.border_wrap.pc{display: none;} .review_list>.box_inner>.border_wrap.mob{display: block;} .review_list>.box_inner>.border_wrap.mob {display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; padding: 0 20px; padding-top: 20px; padding-bottom: 10px; border-bottom: 0;} .review_list>.box_inner>.border_wrap.mob .cnt{font-size: 14px; font-weight: 400; margin: 0;} .review_list>.box_inner>.border_wrap.mob .review_pop_mo_sort{position: relative;} .review_list>.box_inner>.border_wrap.mob .review_pop_mo_sort button{position: relative; display: flex; align-items: center; column-gap: 10px; font-size: 14px;} .review_list>.box_inner>.border_wrap.mob .review_pop_mo_sort .sort_wrap{position: absolute; background-color: #FFF; border-radius: 10px; box-shadow: 0 0 7px rgba(0,0,0,0.2); padding: 15px; width: 42px; right: 0;display: block; z-index: 5; display: none;} .review_list>.box_inner>.border_wrap.mob .review_pop_mo_sort .sort_wrap>a{display: block;} .review_list .r_list>li>a .left_wrap{width: 100%;} .review_list .r_list>li>a .stars span{display: none;} .review_list .r_list>li>a .stars{position: absolute; left: 140px; margin: 0; top: 20px;} .review_list .r_list>li>a{display: block; position: relative;} .review_list .r_list>li>a .left_wrap .flex_wrap{display: block; margin: 0;} .review_list .r_list>li>a .left_wrap .flex_wrap .img_wrap .img_num{display: block;} .review_list .r_list>li>a .left_wrap .flex_wrap .txt_wrap{width: 100%; padding: 0; margin-top: 20px;} .review_list .r_list>li>a .left_wrap .recomm_wrap{display: none;} .review_list .r_list>li>a .right_wrap{position: absolute; left: 140px; top: 50px; padding: 0; border-left: 0; width: calc(100% - 140px);} .review_list .r_list>li>a .right_wrap p.date{position: relative; bottom: 0;} .review_pop>div .writer_info{margin: 0;} .review_pop>div .r_list .stars span{display: none;} .review_pop>div .r_list .stars{position: absolute; left: 140px; margin: 0; top: 20px;} .review_pop>div.view_box{width: 100%; height: 100%; left: 0; top: 0; transform: translate(0); border-radius: 0; padding: 0;} .review_pop>div>.box_inner>.tit_wrap h3{font-size: 16px;} .review_pop>div.view_box .border_wrap{padding: 0; box-sizing: border-box; flex-direction: column; align-items: flex-start; border-top: 1px solid #CCC; margin: 0;} .review_pop>div.view_box .border_wrap .border_right {order: 1; border-bottom: 1px solid #CCC; width: 100%; box-sizing: border-box; padding: 20px;} .review_pop>div.view_box .border_wrap .border_right p.stars{margin-bottom: 10px; display: flex; align-items: center;} .review_pop>div.view_box .border_wrap .stars span{order: 2; margin-right: 0; margin-left: 10px;} .review_pop>div.view_box .border_wrap .border_right h3.mob{display: block; font-size: 18px;} .review_pop>div.view_box .border_wrap .border_left {order: 2; box-sizing: border-box; padding: 20px; width: 100%;} .review_pop>div.view_box .review_con .review_sli_wrap{position: relative; width: 100%; min-height: 250px;} .review_pop>div.view_box .review_con .review_sli{min-height: 250px;} .review_pop>div.view_box .review_con .review_sli .img_wrap{min-height: 250px;} .review_pop>div.view_box .review_con .review_sli_wrap .slick-track img{width: 100%; height: auto; max-height: 500px; object-fit: contain;} .review_pop>div.view_box .review_con .review_sli_wrap .img_cnt.mob{display: flex; align-items: center; column-gap: 4px; position: absolute; right: 10px; bottom: 10px; font-size: 14px; color:#FFF; background: rgba(0, 0, 0, 0.8); padding: 4px 10px; border-radius: 60px;} .review_pop>div.view_box .review_con .arrow_wrap{width: 90%; left: 50%; transform: translate(-50%, -50%);} .review_pop>div.view_box .review_con .arrow_wrap .re_prev_arrow{left: 0;} .review_pop>div.view_box .review_con .arrow_wrap .re_next_arrow{right: 0;} .review_pop>div.view_box .review_con .recomm_wrap button>span>span{display: none;} .review_pop>div.view_box .btn_wrap{border-top: 1px solid #CCC; padding-top: 30px;} .review_pop>div.view_box .review_con .review_txt_wrap{width: 100%; box-sizing: border-box; padding: 0 20px;} } @media screen and (max-width: 500px){ .review_pop>div .box_inner{padding-bottom: 30px;} .review_list .r_list>li{padding: 20px 0;} .review_list .r_list>li>a .stars{top: 25px; font-size: 20px;} .review_pop>div .r_list .stars{top: 25px;} .review_pop>div .stars{font-size: 20px;} .review_pop>div h4{font-size: 18px;} .review_pop>div p{font-size: 14px;} .review_pop>div .writer_info{font-size: 16px;} .review_pop .pagination{margin-top: 20px;} .review_pop>div>.box_inner>.tit_wrap h3 span.mob{font-size: 16px;} .review_pop>div.view_box .border_wrap .border_left .writer_info{font-size: 14px;} .review_pop>div.view_box .review_con .review_txt_wrap{font-size: 15px;} .review_pop>div.view_box .review_con .recomm_wrap{margin-top: 20px;} .review_pop>div.view_box .review_con .recomm_wrap button{width: 120px; height: 55px;} .review_pop>div.view_box .btn_wrap{padding: 0 20px; padding-top: 20px; margin-top: 20px; margin-bottom: 0;} .review_pop>div.view_box .btn_wrap>a{width: 105px; height: 38px; line-height: 38px; font-size: 14px;} } /* product_list */ .sub_top{position: relative; height: 360px;} .sub_top .txt_wrap{position: absolute; width: 1600px; left: 50%; bottom: 75px; transform: translateX(-50%); color: #FFF;} .sub_top .txt_wrap h2{font-size: 40px; margin-bottom: 20px; line-height: 1.2em;} .sub_top .txt_wrap p.info_txt{font-size: 18px; font-weight: 500; color: #FFF; line-height: 1.6em;} @media screen and (max-width: 1660px){ .sub_top .txt_wrap{width: 96%;} } @media screen and (max-width: 1024px){ .sub_top{margin-top: 103px;} #pList .trip_list li{width: 49%;} } @media screen and (max-width: 768px){ .sub_top{margin-top: 0px;} .sub_top .txt_wrap{width: 100%; box-sizing: border-box; padding: 0 20px;} } @media screen and (max-width: 500px){ .sub_top{height: 160px; background-position: 90% 50% !important;} .sub_top::after{content:''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.2);} .sub_top .txt_wrap{bottom: 20px; z-index: 5;} .sub_top .txt_wrap h2{font-size: 20px; margin-bottom: 0;} .sub_top .txt_wrap p{display: none;} } /* product_view */ #pView{position: relative;} #pView .view_top{position: relative;} #pView .view_top .gallery_top{position: relative; display: flex; justify-content: space-between; height: 480px;} #pView .view_top .gallery_top>.big{width: 49.7%; height: 100%;} #pView .view_top .gallery_top>.small{height: 100%; width: 49.7%; display: flex; flex-wrap: wrap; justify-content: space-between; row-gap: 10px;} #pView .view_top .gallery_top>div>a{display: block; overflow: hidden; border-radius: 20px; width: 100%; height: 100%;} #pView .view_top .gallery_top>div>a img{width: 100%; height: 100%; object-fit: cover;} #pView .view_top .gallery_top>.small>a{width: 49.4%; height: 49%;} #pView .view_top .swiper-wrap-area .img_cnt{position: absolute; right: 20px; bottom: 20px; z-index: 5; background: rgba(0,0,0,0.8); display: flex; justify-content: center; align-items: center; width: 82px; height: 36px; font-size: 16px; font-weight: 600; color: #FFF; column-gap: 6px; border-radius: 36px; z-index: 1;} @media screen and (max-width: 768px){ #pView{margin-top: 20px;} #pView .view_top .gallery_top{display: block; height: auto; box-sizing: border-box; padding-left: 20px;} #pView .view_top .gallery_top .swiper-slide{border-radius: 20px; overflow: hidden; width: 266px !important; aspect-ratio: 1 / 1;} #pView .view_top .gallery_top .swiper-slide>a{display: block; width: 100%; height: 100%; object-fit: cover;} #pView .view_top .gallery_top .swiper-slide img{width: 100%; height: 100%; object-fit: cover; display: block;} #pView .view_top .gallery_top .swiper-pagination{display: none !important;} #pView .view_top .swiper-wrap-area .img_cnt{left: 30px; bottom: 10px;} } @media screen and (max-width: 500px){ #pView .view_top .gallery_top{overflow: hidden; padding: 0; left: 10px; width: calc(100% - 20px);} #pView .view_top .gallery_top .swiper-slide{border-radius: 20px; overflow: hidden; width: 194px !important; aspect-ratio: 1 / 1;} #pView .view_top .swiper-wrap-area .img_cnt{left: 30px; bottom: 10px; font-size: 12px; width: 59px; height: 22px;} } /* 갤러리팝업 */ #pView .view_top .gallery_pop{position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background: rgba(0,0,0,0.5); z-index: 9999; display: none;} #pView .view_top .gallery_pop .gallery_pop_box{background-color: #FFF; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 1400px; height: 88%; border-radius: 20px; box-sizing: border-box; overflow: hidden;} #pView .view_top .gallery_pop .gallery_pop_box .tit_wrap{position: relative; text-align: center; padding: 20px; width: 100%; background-color: #FFF; box-sizing: border-box;} #pView .view_top .gallery_pop .gallery_pop_box .tit_wrap h2.tit{font-size: 20px; font-weight: 700; color: #000;} #pView .view_top .gallery_pop .gallery_pop_box .tit_wrap .close_btn{position: absolute; left: 20px; top: 50%; transform: translateY(-50%); font-size: 18px; color: #000; cursor: pointer;} #pView .view_top .gallery_pop .gallery_pop_box .big_sli_wrap{position: relative; background-color: #f7f7f7; height: 73%;} #pView .view_top .gallery_pop .gallery_pop_box .big_sli_wrap .big_sli, #pView .view_top .gallery_pop .gallery_pop_box .big_sli_wrap .slick-list, #pView .view_top .gallery_pop .gallery_pop_box .big_sli_wrap .slick-track{height: 100%;} #pView .view_top .gallery_pop .gallery_pop_box .big_sli_wrap .slick-slide{height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden;} #pView .view_top .gallery_pop .gallery_pop_box .big_sli_wrap .slick-slide img{height: 100%;} #pView .view_top .gallery_pop .gallery_pop_box .small_sli_wrap{background-color: #FFF; height: 108px; margin-top: 20px; padding-left: 20px; box-sizing: border-box; width: 100%;} #pView .view_top .gallery_pop .gallery_pop_box .small_sli_wrap .slick-slide{width: 108px; height: 108px; border-radius: 20px; overflow: hidden; object-fit: cover; cursor: pointer; margin-right: 20px;} #pView .view_top .gallery_pop .gallery_pop_box .small_sli_wrap .slick-slide img{width: 100%; height: 100%; object-fit: cover;} @media screen and (max-width: 1440px){ #pView .view_top .gallery_pop .gallery_pop_box{width: 96%;} } @media screen and (max-width: 768px){ #pView .view_top .gallery_pop{background-color: #000} #pView .view_top .gallery_pop .gallery_pop_box{background: none; transform: translate(0); left: 0; top: 0; width: 100%; height: 100vh; border-radius: 0;} #pView .view_top .gallery_pop .gallery_pop_box .tit_wrap{background: none; padding: 10px 0; text-align: left;} #pView .view_top .gallery_pop .gallery_pop_box .tit_wrap h2.tit{display: none;} #pView .view_top .gallery_pop .gallery_pop_box .tit_wrap .close_btn{color: #FFF; left: 10px; position: relative; text-align: left; transform: translate(0); top: 0;} #pView .view_top .gallery_pop .gallery_pop_box .big_sli_wrap{height: 65.104vw; background: none; position: relative; top: 45%; transform: translateY(-50%); z-index: 1;} #pView .view_top .gallery_pop .gallery_pop_box .small_sli_wrap{display: none;} } #pView .view_bottom>.tit_wrap{display: flex; justify-content: space-between; align-items: center;} #pView .view_bottom>.tit_wrap.mob{display: none;} #pView .view_bottom>.tit_wrap p.cate{font-size: 16px; color: #666; line-height: 1.4em;} #pView .view_bottom>.tit_wrap h2{font-size: 28px; font-weight: 700; color: #000; margin-top: 8px; line-height: 1.4em;} #pView .view_bottom>.tit_wrap .add_btn{display: flex; column-gap: 15px; align-items: center;} #pView .view_bottom>.tit_wrap .add_btn>li>a{font-size: 14px; font-weight: 500; color: #444; display: flex; align-items: center; column-gap: 4px;} #pView .view_bottom>.tit_wrap .price_txt{font-size: 24px; color: #000;font-weight: 700; text-align: right; margin-top: 10px; line-height: 1.4em;} #pView .view_bottom>.tit_wrap .price_txt .unit{font-weight: 400;} #pView .view_bottom>.info_wrap{position: relative; display: flex; justify-content: space-between;} #pView .view_bottom>.info_wrap>.left_wrap{width: calc(100% - 440px);} #pView .view_bottom>.info_wrap>.left_wrap .info_tabs{display: flex; border-top: 2px solid #000;} #pView .view_bottom>.info_wrap>.left_wrap .info_tabs>li{position: relative; width: 25%; border-bottom: 1px solid #CCC;} #pView .view_bottom>.info_wrap>.left_wrap .info_tabs>li.active::after{position: absolute; content: ''; display: block; width: 100%; height: 4px; background-color: #1C95C5; left: 0; bottom: -3px; z-index: 5;} #pView .view_bottom>.info_wrap>.left_wrap .info_tabs>li>a{display: block; width: 100%; height: 50px; text-align: center; line-height: 50px; font-size: 18px; font-weight: 600; color: #000;} #pView .view_bottom>.info_wrap>.left_wrap>div:not(:last-child){border-bottom: 1px solid #DDD;} #pView .view_bottom>.info_wrap>.left_wrap>div h3{font-size: 24px; font-weight: 600; color: #000; line-height: 1.6em; margin-bottom: 20px;} #pView .view_bottom>.info_wrap>.left_wrap .trip_info .trip_info_wrap{font-size: 18px; font-weight: 400; color: #000; line-height: 1.6em;} #pView .view_bottom>.info_wrap>.left_wrap .trip_info .trip_info_wrap img{max-width: 100%;} #pView .view_bottom>.info_wrap>.left_wrap .trip_sche .sche_tabs{display: flex; column-gap: 4px;} #pView .view_bottom>.info_wrap>.left_wrap .trip_sche .sche_tabs>li>button{display: block; width: 112px; height: 35px; border-radius: 35px; line-height: 35px; border: 1px solid #CCC; background-color: #FFF; text-align: center; font-size: 16px; font-weight: 500; color: #000; transition-duration: 0.3s; font-family: 'Pretendard'; cursor: pointer;} #pView .view_bottom>.info_wrap>.left_wrap .trip_sche .sche_tabs>li.active>button{color: #FFF;background-color: #000; border: 1px solid #000; } #pView .view_bottom>.info_wrap>.left_wrap .trip_sche .date_box{border: 1px solid #CCC; box-sizing: border-box;} #pView .view_bottom>.info_wrap>.left_wrap .trip_sche .date_box:not(:first-child){border-top: none;} #pView .view_bottom>.info_wrap>.left_wrap .trip_sche .date_box .date_tit_wrap{position: relative; background-color: #f8f8f8; padding: 20px 30px; display: flex; justify-content: space-between; align-items: center; width: 100%; cursor: pointer;} #pView .view_bottom>.info_wrap>.left_wrap .trip_sche .date_box .date_tit_wrap>.left_wrap{display: flex; align-items: center; column-gap: 30px} #pView .view_bottom>.info_wrap>.left_wrap .trip_sche .date_box .date_tit_wrap>.left_wrap h4{font-size: 28px; font-weight: 700; color: #000;} #pView .view_bottom>.info_wrap>.left_wrap .trip_sche .date_box .date_tit_wrap>.left_wrap p.place{font-size: 18px; font-weight: 700; color: #000; line-height: 1.2em; margin-bottom: 5px; text-align: left;} #pView .view_bottom>.info_wrap>.left_wrap .trip_sche .date_box .date_tit_wrap>.left_wrap p.act{font-size: 18px; font-weight: 400; color: #444; line-height: 1.2em;} #pView .view_bottom>.info_wrap>.left_wrap .trip_sche .date_box .date_tit_wrap>.right_wrap{position: relative;} #pView .view_bottom>.info_wrap>.left_wrap .trip_sche .date_box .date_tit_wrap>.right_wrap>i{transition-duration: 0.3s;} #pView .view_bottom>.info_wrap>.left_wrap .trip_sche .date_box .date_con_wrap{position: relative; padding: 0 60px 0 30px; display: none;} #pView .view_bottom>.info_wrap>.left_wrap .trip_sche .date_box:first-child .date_con_wrap{display: block;}/* 1일차 기본 활성화 */ #pView .view_bottom>.info_wrap>.left_wrap .trip_sche .date_box .date_con_wrap::before{content:''; display: block; position: absolute; left: 64px; width: 1px; height: 100%; background-color: #EEE;} #pView .view_bottom>.info_wrap>.left_wrap .trip_sche .date_box .date_con_wrap>div{position: relative; font-size: 18px; font-weight: 400; color: #444; line-height: 1.2em; display: flex; margin-bottom: 40px; flex-wrap: wrap;} #pView .view_bottom>.info_wrap>.left_wrap .trip_sche .date_box .date_con_wrap>div.big_icon{margin: 62px 0;} #pView .view_bottom>.info_wrap>.left_wrap .trip_sche .date_box .date_con_wrap>div>div{display: block; padding-left: 20px; box-sizing: border-box; width: calc(100% - 68px);} #pView .view_bottom>.info_wrap>.left_wrap .trip_sche .date_box .date_con_wrap>div.big_icon>div{color: #000; font-weight: 700;} #pView .view_bottom>.info_wrap>.left_wrap .trip_sche .date_box .date_con_wrap>div .img_wrap{position: relative; width: 100%; display: flex; margin-top: 20px; flex-wrap: wrap; row-gap: 10px; justify-content: space-between;} #pView .view_bottom>.info_wrap>.left_wrap .trip_sche .date_box .date_con_wrap>div .img_wrap>div{width: 49.5%;} #pView .view_bottom>.info_wrap>.left_wrap .trip_sche .date_box .date_con_wrap>div .img_wrap>div img{width: 100%;} #pView .view_bottom>.info_wrap>.left_wrap .trip_sche .date_box .date_con_wrap>div .mark{position: relative; width: 68px; height: 25px; display: flex; justify-content: center; align-items: center;} #pView .view_bottom>.info_wrap>.left_wrap .trip_sche .date_box .date_con_wrap>div .mark::before{content:''; display: block; position: absolute; left: 50%; transform: translateX(-50%); width: 25px; height: 25px; border-radius: 25px; background: rgba(28,149,197,0.2);} #pView .view_bottom>.info_wrap>.left_wrap .trip_sche .date_box .date_con_wrap>div .mark::after{content:''; display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 12px; height: 12px; border-radius: 12px; background: #1C95C5; } #pView .view_bottom>.info_wrap>.left_wrap .trip_sche .date_box .date_con_wrap>div.big_icon .mark::before{left: 0; top: -22px; width: 68px; height: 68px; border-radius: 68px; border: 1px solid #CCC; background-color: #FFF; transform: translateX(0);} #pView .view_bottom>.info_wrap>.left_wrap .trip_sche .date_box .date_con_wrap>div.big_icon .mark::after{left: 50%; top: 50%; width: 32px; height: 32px; background: url(/_img/sub/p_view_location.png) no-repeat center / cover;} #pView .view_bottom>.info_wrap>.left_wrap .fee_info img{max-width: 100%;} #pView .view_bottom>.info_wrap>.left_wrap .announce .announce_wrap{font-size: 16px; font-weight: 400; color: #000; line-height: 1.6em;} #pView .view_bottom>.info_wrap>.left_wrap .announce .announce_wrap h4{font-size: 18px; font-weight: 700; margin-top: 20px;} #pView .view_bottom>.info_wrap>.left_wrap .announce .announce_wrap h4:first-child{margin-top: 0;} #pView .view_bottom>.info_wrap>.left_wrap .review_info .tit_wrap{display: flex; justify-content: space-between; align-items: center;} #pView .view_bottom>.info_wrap>.left_wrap .review_info .tit_wrap>.left_tit{display: flex; align-items: center; column-gap: 15px;} #pView .view_bottom>.info_wrap>.left_wrap .review_info .tit_wrap h3{margin-bottom: 0;} #pView .view_bottom>.info_wrap>.right_wrap{position: sticky; position: -webkit-sticky; top: 50px; height: 555px; width: 360px;} #pView .view_bottom>.info_wrap>.right_wrap .apply_box{border: 1px solid #CCC; border-radius: 20px; background-color: #FFF; margin-bottom: 10px; box-sizing: border-box; padding: 30px;} #pView .view_bottom>.info_wrap>.right_wrap .apply_box dl{display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; font-size: 16px; font-weight: 400; color: #000; line-height: 1.5em;} #pView .view_bottom>.info_wrap>.right_wrap .apply_box dl>dd{width: 200px; text-align: right;} #pView .view_bottom>.info_wrap>.right_wrap .apply_box button.open_date_pop{cursor: pointer; border: 1px solid #000; border-radius: 6px; width: 100%; padding: 9.5px; display: flex; align-items: center; justify-content: center; column-gap: 6px; font-family: 'Pretendard';} #pView .view_bottom>.info_wrap>.right_wrap .apply_box button.open_date_pop>i{font-size: 18px;} #pView .view_bottom>.info_wrap>.right_wrap .apply_box button.open_date_pop>span{font-size: 16px;} #pView .view_bottom>.info_wrap>.right_wrap .apply_box dl.remaining dd .apply_mem{color: #1C95C5;} #pView .view_bottom>.info_wrap>.right_wrap .apply_box dl.trip_member dd{display: flex; align-items: center; justify-content: right;} #pView .view_bottom>.info_wrap>.right_wrap .apply_box dl.trip_member dd button, #pView .view_bottom>.info_wrap>.right_wrap .apply_box dl.trip_member dd span{width: 32px; height: 32px; display: flex; justify-content: center; align-items: center;} #pView .view_bottom>.info_wrap>.right_wrap .apply_box dl.trip_member dd button{border: 1px solid #CCC; border-radius: 32px; cursor: pointer;} #pView .view_bottom>.info_wrap>.right_wrap .apply_box dl.trip_discount dd{display: flex; align-items: center; justify-content: right;} #pView .view_bottom>.info_wrap>.right_wrap .apply_box dl.trip_discount dd span{font-weight: 500;} #pView .view_bottom>.info_wrap>.right_wrap .apply_box dl.total_price{padding-top: 20px; border-top: 1px solid #DDD;} #pView .view_bottom>.info_wrap>.right_wrap .apply_box dl.total_price dd{color: #1C95C5; font-size: 20px; line-height: 1.4em;} #pView .view_bottom>.info_wrap>.right_wrap .apply_box .apply_btn{display: block; width: 100%; height: 52px; border-radius: 52px; background-color: #000; text-align: center; line-height: 52px; color: #FFF; font-size: 18px; font-weight: 600;} #pView .view_bottom>.info_wrap>.right_wrap .btn_wrap>a{display: block; width: 100%; text-align: center; height: 52px; border-radius: 52px; line-height: 52px; border: 1px solid #CCC; color: #000; font-size: 16px; font-weight: 400;} #pView .view_bottom>.info_wrap>.right_wrap .btn_wrap>a.highlight{background-color: #1C95C5; color: #FFF; margin-bottom: 10px;} @media screen and (max-width: 1024px){ #pView .view_bottom>.info_wrap>.left_wrap{width: 100%;} #pView .view_bottom>.info_wrap>.right_wrap{position: fixed; z-index: 9800; width: 100%; bottom: 0; left: 0; height: 85px; top: auto; box-shadow: 0 -2px 4px rgba(0,0,0,0.05); display: flex; align-items: center;background-color: #FFF; justify-content: space-between; padding: 20px; box-sizing: border-box;} #pView .view_bottom>.info_wrap>.right_wrap .apply_box{margin-bottom: 0; padding: 0; border-radius: 0; border: none; width: auto;} #pView .view_bottom>.info_wrap>.right_wrap .apply_box dl{margin-bottom: 0; display: block;} #pView .view_bottom>.info_wrap>.right_wrap .apply_box dl.shop_date_select{display: none;} #pView .view_bottom>.info_wrap>.right_wrap .apply_box dl.mem_discount{display: none;} /* 모바일에서 member_discount_dl 숨김 */ #pView #member_discount_dl{display: none !important;} #pView .view_bottom>.info_wrap>.right_wrap .apply_box dl.remaining{display: none;} #pView .view_bottom>.info_wrap>.right_wrap .apply_box dl.trip_member{display: none;} #pView .view_bottom>.info_wrap>.right_wrap .apply_box dl.total_price{display: none;} #pView .view_bottom>.info_wrap>.right_wrap .btn_wrap{display: none;} #pView .view_bottom>.info_wrap>.right_wrap .apply_box .apply_btn{display: none;} #pView .view_bottom>.info_wrap>.right_wrap .apply_box dl>dd{text-align: left; font-size: 18px;} #pView .view_bottom>.info_wrap>.right_wrap .open_option_pop.mob{display: block; display: block; width: 120px; height: 45px; border-radius: 45px; text-align: center; line-height: 45px; font-size: 16px; color: #FFF; font-weight: 500; background-color: #1C95C5;} #pView .view_bottom>.tit_wrap.pc{display: none;} #pView .view_bottom>.tit_wrap.mob{display: block;} #pView .view_bottom>.tit_wrap .left_wrap{display: flex; align-items: center; justify-content: space-between;} #pView .view_bottom>.tit_wrap .left_wrap .add_btn{display: flex;} #pView .view_bottom>.tit_wrap .price_txt{text-align: left;} } @media screen and (max-width: 768px){ #pView .view_bottom{ box-sizing: border-box; background-color: #f5f5f5;} #pView .view_bottom>.tit_wrap.mob{padding: 0 20px; padding-bottom: 30px; border-bottom: 1px solid #DDD; margin: 0; background-color: #FFF; margin-bottom: 10px;} #pView .view_bottom>.info_wrap>.left_wrap .info_tabs{display: none;} #pView .view_bottom>.info_wrap>.left_wrap>div{ box-sizing: border-box; padding: 0 20px; background-color: #FFF; margin: 0; padding-top: 20px;} #pView .view_bottom>.info_wrap>.left_wrap>div:not(:last-child){margin-bottom: 10px; padding-bottom: 20px;} #pView .view_bottom>.info_wrap>.left_wrap .trip_sche .date_box .date_con_wrap{padding: 0 30px;} .review_page .review_con{width: 100%;} .review_page .review_con::after{display: none;} .review_page .review_con>a{flex-direction: column;} .review_page .review_con>a .txt_wrap{order: 2; margin-top: 20px; width: 100%;} .review_page .review_con>a .txt_wrap .mob_layout{position: absolute; left: 140px; top: 65px;} .review_page .review_con>a .txt_wrap .writer_info{flex-direction: column; align-items: flex-start;} .review_page .review_con>a .img_wrap{order: 1;} #pView .view_bottom>.info_wrap>.left_wrap .trip_sche .date_box .date_con_wrap>div .img_wrap>div{width: 100%;} } @media screen and (max-width: 500px){ #pView .view_bottom{margin-top: 20px;} #pView .view_bottom>.tit_wrap p.cate{font-size: 14px;} #pView .view_bottom>.tit_wrap h2{font-size: 20px;} #pView .view_bottom>.tit_wrap .price_txt{font-size: 16px; margin-top: 5px;} #pView .view_bottom>.info_wrap>.left_wrap>div h3{font-size: 18px; margin-bottom: 20px;} #pView .view_bottom>.info_wrap>.left_wrap .trip_sche .sche_tabs>li{width: 32%;} #pView .view_bottom>.info_wrap>.left_wrap .trip_sche .sche_tabs>li>button{width: 100%;} #pView .view_bottom>.info_wrap>.left_wrap .trip_sche .date_box .date_tit_wrap{padding: 15px 20px;} #pView .view_bottom>.info_wrap>.left_wrap .trip_sche .date_box .date_tit_wrap>.left_wrap{column-gap: 20px;} #pView .view_bottom>.info_wrap>.left_wrap .trip_sche .date_box .date_tit_wrap>.left_wrap h4{font-size: 16px; font-weight: 700;} #pView .view_bottom>.info_wrap>.left_wrap .trip_sche .date_box .date_tit_wrap>.left_wrap p.place{font-size: 16px; margin: 0;} #pView .view_bottom>.info_wrap>.left_wrap .trip_sche .date_box .date_tit_wrap>.left_wrap p.act{display: none;} #pView .view_bottom>.info_wrap>.left_wrap .trip_sche .date_box .date_con_wrap{padding: 0 20px;} #pView .view_bottom>.info_wrap>.left_wrap .trip_sche .date_box .date_con_wrap::before{left: 39px;} #pView .view_bottom>.info_wrap>.left_wrap .trip_sche .date_box .date_con_wrap>div{margin-bottom: 20px;} #pView .view_bottom>.info_wrap>.left_wrap .trip_sche .date_box .date_con_wrap>div>div{width: calc(100% - 38px);} #pView .view_bottom>.info_wrap>.left_wrap .trip_sche .date_box .date_con_wrap>div .mark{width: 38px;} #pView .view_bottom>.info_wrap>.left_wrap .trip_sche .date_box .date_con_wrap>div.big_icon{margin: 29.5px 0; font-size: 16px;} #pView .view_bottom>.info_wrap>.left_wrap .trip_sche .date_box .date_con_wrap>div.big_icon .mark::before{width: 38px; height: 38px; top: -10px;} #pView .view_bottom>.info_wrap>.left_wrap .trip_sche .date_box .date_con_wrap>div.big_icon .mark::after{width: 20px; height: 20px; top: 43%; left: 53%;} #pView .view_bottom>.info_wrap>.left_wrap .trip_sche .date_box .date_con_wrap>div .mark::before{width: 20px; height: 20px;} #pView .view_bottom>.info_wrap>.left_wrap .trip_sche .date_box .date_con_wrap>div>div{font-size: 16px;} #pView .view_bottom>.info_wrap>.left_wrap .trip_sche .date_box .date_con_wrap>div .img_wrap{margin-top: 10px;} #pView .view_bottom>.info_wrap>.left_wrap .trip_info .trip_info_wrap{font-size: 16px;} #pView .review_page{border-top: 2px solid #000;} .review_page .review_con{padding: 20px 0;} .review_page .review_con>a .txt_wrap .writer_info{font-size: 16px; margin-bottom: 0;} .review_page .review_con>a .txt_wrap h4{font-size: 18px; margin-bottom: 5px;} .review_page .review_con>a .txt_wrap p{font-size: 14px;} .review_page .review_con>a .img_wrap .review_num{font-size: 14px;} #pView .view_bottom>.info_wrap>.right_wrap .apply_box dl>dd{font-size: 14px;} } @media screen and (max-width: 340px){ .review_page .review_con>a .txt_wrap .mob_layout{top: 30px;} } /* 출발일선택 팝업 */ #pView .date_pop{position: fixed; width: 100%; height: 100vh; background: rgba(0,0,0,0.5); left: 0; top: 0; z-index: 9999; display: none;} #pView .date_pop .date_pop_box{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 1200px; height: 745px; background: #FFF; border-radius: 10px; overflow: hidden; box-sizing: border-box; padding: 0 29px; display: none;} #pView .date_pop .date_pop_box .tit_wrap{display: flex; justify-content: space-between; border-bottom: 2px solid #000; padding-bottom: 20px; padding-top: 31px; align-items: center;} #pView .date_pop .date_pop_box .tit_wrap h4{font-size: 18px; font-weight: 600; color: #000; line-height: 1em;} #pView .date_pop .date_pop_box .tit_wrap .close_btn{font-size: 18px; line-height: 1.4em; cursor: pointer;} #pView .date_pop .date_pop_box .bottom_wrap{display: flex; justify-content: space-between;} #pView .date_pop .date_pop_box .bottom_wrap .date_wrap{width: 48.8%;} /* 달력 공통 */ .calendar_wrap .month{display: flex; justify-content: center; column-gap: 20px; align-items: center; } .calendar_wrap .month button{border: 1px solid #CCC; color: #CCC; font-size: 14px; width: 28px; height: 28px; border-radius: 28px;} .calendar_wrap .month button.next_month{border: 1px solid #000; color: #000;} .calendar_wrap .month .month_txt{font-size: 18px; font-weight: 600; color: #000;} .calendar_wrap .days>div{display: flex; justify-content: space-between;} .calendar_wrap .days>div>button{width: 10.4%; text-align: center;} .calendar_wrap .days>div>button.day-name{font-size: 14px; font-weight: 600; color: #000; padding: 10px 0; line-height: 1em;} .calendar_wrap .days>div>button.day{position: relative; height: 68px; border-radius: 6px; background-color: #FFF; transition-duration: 0.3s; display: flex; flex-direction: column; align-items: center; box-sizing: border-box;} .calendar_wrap .days>div>button.day .dots{position: absolute; left: 51%; transform: translateX(-50%); top: 13px; display: block; width: 4px; height: 4px; border-radius: 4px; background-color: #1C95C5;} .calendar_wrap .days>div>button.day .day-num{font-size: 16px; font-weight: 500; color: #222; padding-top: 20px; margin-bottom: 3px;} .calendar_wrap .days>div>button.day .num{font-size: 12px; font-weight: 400; color: #777; line-height: 1em;} .calendar_wrap .days>div>button.day-prev .dots{background-color: #CCC;} .calendar_wrap .days>div>button.day-prev .day-num{color: #CCC;} .calendar_wrap .days>div>button.day.today{background-color: #1C95C5;} .calendar_wrap .days>div>button.day.today .dots{background-color: #FFF;} .calendar_wrap .days>div>button.day.today .day-num{color: #FFF;} .calendar_wrap .days>div>button.day.today .num{color: #FFF;} #pView .date_pop .date_pop_box .bottom_wrap .date_wrap .color_box{background-color: #F2F2F2; display: flex; justify-content: center; padding: 18px; box-sizing: border-box; column-gap: 20px; align-items: center; border-radius: 85px;} #pView .date_pop .date_pop_box .bottom_wrap .date_wrap .color_box p{display: flex; font-size: 14px; font-weight: 500; color: #000; line-height: 1.6em; align-items: center; column-gap: 8px;} #pView .date_pop .date_pop_box .bottom_wrap .date_wrap .color_box p i{display: block; width: 14px; height: 14px; border-radius: 14px;} #pView .date_pop .date_pop_box .bottom_wrap .product_wrap{width: 48.8%; position: relative;} #pView .date_pop .date_pop_box .bottom_wrap .product_wrap .sorting{display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 10px;} #pView .date_pop .date_pop_box .bottom_wrap .product_wrap .sorting label{display: flex; align-items: center; column-gap: 5px; font-size: 16px; font-weight: 400; color: #000; cursor: pointer;} #pView .date_pop .date_pop_box .bottom_wrap .product_wrap .sorting ul{display: flex; column-gap: 10px;} #pView .date_pop .date_pop_box .bottom_wrap .product_wrap .sorting ul>li>a{font-size: 14px; font-weight: 400; color: #666;} #pView .date_pop .date_pop_box .bottom_wrap .product_wrap .sorting ul>li.active>a{font-weight: 600; color: #000;} .date_pop .date_pop_box .p_list{height: 65%; overflow-y: auto; position: relative;} .date_pop .date_pop_box .p_list::-webkit-scrollbar{width: 3px; background-color: #EEE;} .date_pop .date_pop_box .p_list::-webkit-scrollbar{width: 3px;} .date_pop .date_pop_box .p_list::-webkit-scrollbar-thumb{background-color: #1C94C5;} .date_pop .date_pop_box .p_list ul{width: calc(100% - 13px);} .date_pop .date_pop_box .p_list ul>li{border: 1px solid #CCC; border-radius: 10px; padding: 15px 20px; box-sizing: border-box; margin-bottom: 10px;} .date_pop .date_pop_box .p_list ul>li.active{border: 1px solid #1C95C5;} .date_pop .date_pop_box .p_list ul>li>a{display: flex;align-items: center; width: 100%; column-gap: 20px;} .date_pop .date_pop_box .p_list ul>li>a .state{display: flex; justify-content: center; align-items: center; width: 56px; height: 56px; border-radius: 56px; font-size: 14px; line-height: 1em; color: #FFF;} .date_pop .date_pop_box .p_list ul>li>a .state.available{background-color: #1C94C5;} .date_pop .date_pop_box .p_list ul>li>a .state.wating{background-color: #F9B806;} .date_pop .date_pop_box .p_list ul>li>a .state.closed{background-color: #999;} .date_pop .date_pop_box .p_list ul>li>a p.date{font-size: 16px; font-weight: 400; color: #000;} .date_pop .date_pop_box .p_list ul>li>a .price_wrap{display: flex; column-gap: 10px; align-items: center;} .date_pop .date_pop_box .p_list ul>li>a .price_wrap .price{color: #000; font-size: 18px; margin: 6px 0;} .date_pop .date_pop_box .p_list ul>li>a .price_wrap .sijung_price{color: #999; font-weight: 500; font-size: 16px; text-decoration: line-through;} .date_pop .date_pop_box .p_list ul>li>a .price_wrap .special_price{display: inline-block; background-color: #EF5B7C; color: #FFF; border-radius: 48px; padding: 3px 12.5px; font-size: 13px; font-weight: 600; line-height: 1.4em;} .date_pop .date_pop_box .p_list ul>li>a .price_wrap .alarm_btns{display: inline-block; background-color: #9B59B6; color: #FFF; border-radius: 48px; padding: 3px 12.5px; font-size: 13px; font-weight: 600; line-height: 1.4em; cursor: pointer;} .date_pop .date_pop_box .p_list ul>li>a .apply_mem{display: flex; color: #000; font-size: 16px; font-weight: 400;} .date_pop .date_pop_box .p_list ul>li>a .apply_mem .blue{color: #1C95C5;} .date_pop .date_pop_box .p_list ul>li>a .apply_mem .pink{color: #EF5B7C;} @media screen and (max-width: 1280px){ #pView .date_pop .date_pop_box{width: 96%;} } @media screen and (max-width: 1024px){ .date_pop .date_pop_box .p_list{width: 100%;} .date_pop .date_pop_box .p_list ul{width: 100%;} #pView .date_pop .date_pop_box.pc{display: none !important;} #pView .date_pop .date_pop_box.mob{display: block; width: 100%; height: 100%; border-radius: 0; top: 0; transform: translate(0); left: 0; padding: 0;} #pView .date_pop .date_pop_box .bottom_wrap{display: block; overflow-y: auto; height: calc(100% - 65px);} #pView .date_pop .date_pop_box .tit_wrap{border-bottom: 1px solid #CCC; padding: 20px; margin-bottom: 0;} #pView .date_pop .date_pop_box dl.shop_date_select{padding: 20px; box-sizing: border-box; position: relative;} #pView .date_pop .date_pop_box dl.shop_date_select dd{position: relative; margin-top: 10px;} #pView .date_pop .date_pop_box dl.shop_date_select dd>i{position: absolute; z-index: 5; top: 47%; transform: translateY(-50%); left: 15px;} #pView .date_pop .date_pop_box dl.shop_date_select select{background: none; border: 1px solid #000; height: 43px; font-size: 16px; font-weight: 400; padding-left: 40px; color: #000;} #pView .date_pop .date_pop_box dl.trip_member{padding: 20px; box-sizing: border-box; display: flex; align-items: center; border-top: 10px solid #f5f5f5; justify-content: space-between;} #pView .date_pop .date_pop_box dl.trip_member dd{display: flex;} #pView .date_pop .date_pop_box dl.trip_member dd button, #pView .date_pop .date_pop_box dl.trip_member dd span{display: block; width: 32px; height: 32px; border-radius: 32px; font-size: 14px; color: #000; text-align: center; line-height: 32px;} #pView .date_pop .date_pop_box dl.trip_member dd button{border: 1px solid #CCC;} #pView .date_pop .date_pop_box dl.trip_discount{padding: 20px; box-sizing: border-box; display: flex; align-items: center; border-top: 10px solid #f5f5f5; border-bottom: 10px solid #f5f5f5; justify-content: space-between;} #pView .date_pop .date_pop_box dl.trip_discount dd{display: flex; align-items: center; justify-content: flex-end;} #pView .date_pop .date_pop_box dl.trip_discount dd span{font-size: 16px; font-weight: 500; color: #000;} #pView .date_pop .date_pop_box dl.shop_p_select{box-sizing: border-box; padding: 20px; padding-bottom: 140px;} #pView .date_pop .date_pop_box dl dt{font-size: 16px; font-weight: 700; line-height: 1.5em; color: #000;} #pView .date_pop .date_pop_box .bottom_wrap .product_wrap{width: 100%; margin-top: 20px;} #pView .date_pop .fixed_wrap{position: fixed; bottom: 0; background-color: #FFF; z-index: 9999; width: 100%; padding: 20px; box-sizing: border-box; box-shadow: 0 -2px 4px rgba(0,0,0,0.05);} #pView .date_pop .fixed_wrap .total_price dt{font-size: 14px; font-weight: 400; color: #444;} #pView .date_pop .fixed_wrap .total_price dd{font-size: 18px; font-weight: 700; color: #000; line-height: 1.4em;} #pView .date_pop .fixed_wrap .btn_wrap{display: flex; justify-content: space-between; margin-top: 10px;} #pView .date_pop .fixed_wrap .btn_wrap>a, #pView .date_pop .fixed_wrap .btn_wrap>button{width: 49.5%; height: 45px; border-radius: 45px; background-color: #000; color: #FFF; font-size: 16px; font-weight: 500; text-align: center; line-height: 45px;} #pView .date_pop .fixed_wrap .btn_wrap>a.highlight{background-color: #1C95C5;} } @media screen and (max-width: 500px){ .date_pop .date_pop_box .p_list ul>li{padding: 15px;} .date_pop .date_pop_box .p_list ul>li>a{flex-direction: column; row-gap: 10px; align-items: flex-start;} .date_pop .date_pop_box .p_list ul>li>a .state{display: block; width: auto; height: auto; padding: 5px 10px;} .date_pop .date_pop_box .p_list ul>li>a .state br{display: none;} .date_pop .date_pop_box .p_list ul>li>a p.date{font-size: 14px;} .date_pop .date_pop_box .p_list ul>li>a .price_wrap .price{font-size: 16px; margin: 5.5px 0;} .date_pop .date_pop_box .p_list ul>li>a .apply_mem{font-size: 14px;} .date_pop .date_pop_box .p_list ul>li>a .apply_mem .blue{font-weight: 500;} } /* 예약정보입력 및 결제 */ #reserve{position: relative;} #reserve h2>a{font-size: 28px; display: flex; align-items:center; column-gap: 10px; color: #000; display: inline-block;} #reserve .reserve_wrap{display: flex; justify-content: space-between;} #reserve .reserve_wrap .left_wrap{width: 66.3%;} #reserve .reserve_wrap .left_wrap .input_wrap{border-bottom: 1px solid #DDD; padding-bottom: 40px;} #reserve .reserve_wrap .left_wrap .input_wrap:last-child{border-bottom: 0; padding-bottom: 0;} #reserve .reserve_wrap .left_wrap .input_wrap .tit_wrap{display: flex; justify-content: space-between; align-items: center;} #reserve .reserve_wrap .left_wrap .input_wrap .tit_wrap h3{font-size: 20px; font-weight: 600; color: #000; line-height: 1.6em;} #reserve .reserve_wrap .left_wrap .input_wrap .tit_wrap p{font-size: 16px; font-weight: 500;} #reserve .reserve_wrap span.important{color: #ff0000;} #reserve .reserve_wrap .left_wrap .input_wrap .input_box{display: flex; justify-content: space-between; flex-wrap: wrap;} #reserve .reserve_wrap .left_wrap .input_wrap .input_box>dl{width: 49%;} #reserve .reserve_wrap .left_wrap .input_wrap .input_box>dl>dt{font-size: 16px; font-weight: 600; margin-bottom: 10px; color: #444;} #reserve .reserve_wrap .left_wrap .input_wrap .input_box>dl>dd .info_txt{font-size: 14px; font-weight: 500; color: #777; margin-top: 10px; display: block;} #reserve .reserve_wrap .left_wrap .input_wrap .input_box>dl>dd.flex_dd{display: flex; flex-wrap:wrap; row-gap: 4px; justify-content: space-between;} #reserve .reserve_wrap .left_wrap .input_wrap .input_box>dl>dd select{background-position: 95% 50%;} #reserve .reserve_wrap .left_wrap .input_wrap .input_box>dl>dd.flex_dd label{width: 49.7%;} #reserve .reserve_wrap .left_wrap .input_wrap.point_wrap{padding-bottom: 75px;} #reserve .reserve_wrap .left_wrap .input_wrap.point_wrap .point_box{position: relative; display: flex; justify-content: space-between;} #reserve .reserve_wrap .left_wrap .input_wrap.point_wrap .point_box .point_info{position: relative; box-sizing: border-box; padding-left: 20px; width: 49%;} #reserve .reserve_wrap .left_wrap .input_wrap.point_wrap .point_box .point_info::before{content:''; display:block; position: absolute; left: 0; top: 0; width: 4px; height: 100%; background-color: #DDD;} #reserve .reserve_wrap .left_wrap .input_wrap.point_wrap .point_box .point_info dl{display: flex; justify-content: space-between; align-items: center;} #reserve .reserve_wrap .left_wrap .input_wrap.point_wrap .point_box .point_info dl dt{font-size: 16px; font-weight: 600; color: #444; line-height: 1.8em;} #reserve .reserve_wrap .left_wrap .input_wrap.point_wrap .point_box .point_info dl dt span{font-size: 14px; font-weight: 400; color: #444;} #reserve .reserve_wrap .left_wrap .input_wrap.point_wrap .point_box .point_info dl dd{font-size: 16px; font-weight: 400; color: #444;} #reserve .reserve_wrap .left_wrap .input_wrap.point_wrap .point_box .point_info dl.p_point dd{color: #1C95C5; font-weight: 600;} #reserve .reserve_wrap .left_wrap .input_wrap.point_wrap .use_point{display: flex; column-gap: 6px; width: 49%;} #reserve .reserve_wrap .left_wrap .input_wrap.point_wrap .use_point button{width: 120px; height: 52px; background-color: #000; color: #FFF; font-size: 16px; font-weight: 600;} #reserve .reserve_wrap .left_wrap .input_wrap.point_wrap .use_input_box{position: relative; width: calc(100% - 126px);} #reserve .reserve_wrap .left_wrap .input_wrap.point_wrap .use_input_box p.txt01{position: absolute; z-index: 5; top: 45%; transform: translateY(-50%); left: 20px; color: #444; font-size: 16px; font-weight: 400;} #reserve .reserve_wrap .left_wrap .input_wrap.point_wrap .use_input_box p.txt02{position: absolute; z-index: 5; top: 45%; transform: translateY(-50%); right: 20px; color: #1C95C5; font-weight: 600; font-size: 16px;} #reserve .reserve_wrap .left_wrap .input_wrap.point_wrap .use_input_box input[type="text"]{text-align: right; padding-right: 33px; padding-left: 68px; color: #1C95C5; font-weight: 600; font-size: 16px;} #reserve .reserve_wrap .left_wrap .input_wrap.point_wrap .use_all_point_check{position: absolute; right: 0; bottom: -35px; display: flex; align-items: center; column-gap: 6px; font-size: 16px; font-weight: 400;} #reserve .reserve_wrap .left_wrap .input_wrap.point_wrap .use_all_point_check input[type="checkbox"]{border-radius: 24px;} #reserve .reserve_wrap .left_wrap .input_wrap.payment_method .pay_list{display: flex; flex-wrap: nowrap; row-gap: 4px; column-gap: 4px; justify-content: flex-start;} #reserve .reserve_wrap .left_wrap .input_wrap.payment_method .pay_list>li{border: 1px solid #DDD; border-radius: 6px; flex-shrink: 0; } #reserve .reserve_wrap .left_wrap .input_wrap.payment_method .pay_list>li>a{display: flex; justify-content: center; align-items: center; height: 52px; color: #000; font-weight: 500; font-size: 16px; transition: all 0.3s ease;} #reserve .reserve_wrap .left_wrap .input_wrap.payment_method .pay_list>li>a img{max-width: 100%;} #reserve .reserve_wrap .left_wrap .input_wrap.payment_method .pay_list>li>a.active{background-color: #1C95C5; color: #FFF; border-color: #1C95C5;} #reserve .reserve_wrap .left_wrap .input_wrap.account .account_wrap{width: 100%;} #reserve .reserve_wrap .left_wrap .input_wrap.account .account_wrap select{width: 100%; height: 52px; border: 1px solid #DDD; border-radius: 6px; padding: 0 20px; font-size: 16px; font-weight: 400; color: #444; background-position: 95% 50%;} #reserve .reserve_wrap .left_wrap .input_wrap.cancel .cancle_wrap{background-color: #f8f8f8; border-radius: 10px; padding: 20px 25px;} #reserve .reserve_wrap .left_wrap .input_wrap.cancel .cancle_wrap p{font-size: 16px; font-weight: 400; color: #444; line-height: 1.6em;} #reserve .reserve_wrap .right_wrap{width: 22.5%;} #reserve .reserve_wrap .right_wrap>div{border-radius: 20px; border: 1px solid #CCC; box-sizing: border-box; padding: 30px;} #reserve .reserve_wrap .right_wrap>div h3{font-size: 20px; font-weight: 700; color: #000; margin-bottom: 20px; line-height: 1.4em;} #reserve .reserve_wrap .right_wrap>div dl{display: flex; justify-content: space-between; align-items: center;} #reserve .reserve_wrap .right_wrap>div dl dt{font-size: 16px; font-weight: 400; color: #000;} #reserve .reserve_wrap .right_wrap>div dl dd{font-size: 16px; font-weight: 400; color: #000;} #reserve .reserve_wrap .right_wrap>div dl dd.bold{font-weight: 600;} #reserve .reserve_wrap .right_wrap>div dl dd.medium{font-weight: 500;} #reserve .reserve_wrap .right_wrap>div dl dd span.blue{color: #1C95C5;} #reserve .reserve_wrap .right_wrap .p_info{margin-bottom: 10px;} #reserve .reserve_wrap .right_wrap .p_info p.cate{font-size: 14px; font-weight: 500; color: #666; margin-bottom: 5px;} #reserve .reserve_wrap .right_wrap .p_info .img_wrap{width: 100%; height: 180px; object-position: center; overflow: hidden; border-radius: 20px;} #reserve .reserve_wrap .right_wrap .p_info .img_wrap img{width: 100%; height: 100%; object-fit: cover;} #reserve .reserve_wrap .right_wrap .pay_info dt{line-height: 2em;} #reserve .reserve_wrap .right_wrap .pay_info .total_agree{border-top: 1px solid #DDD; padding-top: 20px;} #reserve .reserve_wrap .right_wrap .pay_info .total_price dt{font-size: 16px; font-weight: 500; color: #000;} #reserve .reserve_wrap .right_wrap .pay_info .total_price dd{font-size: 20px; font-weight: 700; color: #1C95C5;} #reserve .reserve_wrap .right_wrap .pay_info .agree_wrap button{background-color: #F8F8F8; border-radius: 6px; padding: 12px 15px; box-sizing: border-box; display: flex; justify-content: space-between; width: 100%; align-items: center;} #reserve .reserve_wrap .right_wrap .pay_info .agree_wrap button>span{display: flex; font-size: 16px; font-weight: 500; color: #000; column-gap: 10px; align-items: center;} #reserve .reserve_wrap .right_wrap .pay_info .agree_wrap button>i{position: relative; font-size: 16px; color: #000; transition-duration: 0.3s;} #reserve .reserve_wrap .right_wrap .pay_info .agree_wrap button>i.active{transform: rotate(180deg);} #reserve .reserve_wrap .right_wrap .pay_info .agree_wrap ul{margin-top: 10px; display: none;} #reserve .reserve_wrap .right_wrap .pay_info .agree_wrap ul>li{display: flex; padding: 8px 15px; box-sizing: border-box; justify-content: space-between; align-items: center;} #reserve .reserve_wrap .right_wrap .pay_info .agree_wrap ul>li label{display: flex; align-items: center; column-gap: 10px; font-size: 15px; color: #222; cursor: pointer;} #reserve .reserve_wrap .right_wrap .pay_info .agree_wrap ul>li a{color: #000;} #reserve .reserve_wrap .right_wrap .pay_info a.jumun_btn{display: block; width: 100%; border-radius: 52px; background-color: #000; color: #FFF; font-size: 18px; font-weight: 600; line-height: 1.5em; text-align: center; padding: 12.5px 0;} @media screen and (max-width: 1660px){ #reserve .reserve_wrap .right_wrap{width: 29.5%;} } @media screen and (max-width: 1180px){ #reserve .reserve_wrap .right_wrap>div dl{display: block;} } @media screen and (max-width: 1024px){ #reserve .reserve_wrap{display: block;} #reserve .reserve_wrap .left_wrap{width: 100%;} #reserve .reserve_wrap .right_wrap{width: 100%;} #reserve .reserve_wrap .right_wrap>div dl{display: flex;} } @media screen and (max-width: 768px){ #reserve{background-color: #f5f5f5; margin-bottom: 0;} #reserve h2{margin-bottom: 10px;} #reserve h2>a{background-color: #FFF; padding: 20px; display: block;} #reserve .reserve_wrap .right_wrap .p_info{background-color: #FFF;border: none; border-radius: 0; padding: 20px;} #reserve .reserve_wrap .right_wrap .p_info .img_wrap{height: 280px;} #reserve .reserve_wrap .left_wrap .input_wrap{margin-bottom: 10px; padding: 20px; background-color: #FFF; border: none;} #reserve .reserve_wrap .left_wrap .input_wrap:last-child{padding-bottom: 20px;} #reserve .reserve_wrap .left_wrap .input_wrap.point_wrap{padding-bottom: 60px;} #reserve .reserve_wrap .left_wrap .input_wrap .tit_wrap{margin-bottom: 20px;} #reserve .reserve_wrap .left_wrap .input_wrap .input_box>dl{width: 100%; margin-top: 20px;} #reserve .reserve_wrap .left_wrap .input_wrap .input_box>dl:first-child{margin-top: 0;} #reserve .reserve_wrap .left_wrap .input_wrap.cancel .cancle_wrap{background-color: #FFF; padding: 0; border-radius: 0;} #reserve .reserve_wrap .right_wrap .pay_info{ border: none; border-radius: 0; background-color: #FFF; box-sizing: border-box; padding: 20px;} #reserve .reserve_wrap .left_wrap .input_wrap.point_wrap .point_box{display: block;} #reserve .reserve_wrap .left_wrap .input_wrap.point_wrap .point_box .point_info{width: 100%;} #reserve .reserve_wrap .left_wrap .input_wrap.point_wrap .use_point{width: 100%; margin-top: 20px;} } @media screen and (max-width: 500px){ #reserve h2>a{font-size: 16px;} #reserve .reserve_wrap .right_wrap>div h3{font-size: 18px; margin-bottom: 10px;} #reserve .reserve_wrap .right_wrap .p_info .img_wrap{height: 214px;} #reserve .reserve_wrap .right_wrap>div dl dt{font-size: 15px;} #reserve .reserve_wrap .right_wrap>div dl dd{font-size: 15px;} #reserve .reserve_wrap .left_wrap .input_wrap .tit_wrap h3{font-size: 18px; font-weight: 600;} #reserve .reserve_wrap .left_wrap .input_wrap .tit_wrap p{font-size: 14px;} #reserve .reserve_wrap .left_wrap .input_wrap .input_box>dl>dt{font-size: 15px;} #reserve .reserve_wrap .left_wrap .input_wrap .input_box>dl>dd.flex_dd label{width: 49%;} #reserve .reserve_wrap .left_wrap .input_wrap.point_wrap .point_box .point_info{padding-left: 10px;} #reserve .reserve_wrap .left_wrap .input_wrap.point_wrap .point_box .point_info::before{width: 2px; height: 95%;} #reserve .reserve_wrap .left_wrap .input_wrap.point_wrap .point_box .point_info dl dt{font-size: 15px; line-height: 1.8em;} #reserve .reserve_wrap .left_wrap .input_wrap.point_wrap .point_box .point_info dl dt span{font-size: 12px;} #reserve .reserve_wrap .left_wrap .input_wrap.point_wrap .point_box .point_info dl dd{font-size: 15px;} #reserve .reserve_wrap .left_wrap .input_wrap.point_wrap .use_point button{height: 42px; line-height: 42px; font-size: 15px; font-weight: 600;} #reserve .reserve_wrap .left_wrap .input_wrap.point_wrap .use_input_box p.txt01{font-size: 15px; left: 12px; top: 48%;} #reserve .reserve_wrap .left_wrap .input_wrap.point_wrap .use_input_box p.txt02{font-size: 15px; right: 12px; top: 48%;} #reserve input[type="checkbox"]{width: 24px; height: 24px;} #reserve input[type="checkbox"]::after{width: 12px; height: 9px;} #reserve input[type="radio"]{width: 24px; height: 24px;} #reserve input[type="radio"]::after{width: 12px; height: 9px;} #reserve .reserve_wrap .left_wrap .input_wrap.point_wrap .use_all_point_check input[type="checkbox"]{width: 20px; height: 20px;} #reserve .reserve_wrap .left_wrap .input_wrap.point_wrap .use_all_point_check input[type="checkbox"]::after{width: 10px; height: 7px;} } /* 예약완료 */ #reserve_com h2{font-size: 28px;} #reserve_com .p_info_wrap{border: 1px solid #CCC; border-radius: 20px; padding: 30px; box-sizing: border-box; display: flex; column-gap: 30px; align-items: center;} #reserve_com .p_info_wrap .img_wrap{width: 280px; height: 172px; border-radius: 20px; overflow: hidden; object-position: center;} #reserve_com .p_info_wrap .img_wrap img{width: 100%; height: 100%; object-fit: cover;} #reserve_com .p_info_wrap .txt_wrap{width: calc(100% - 310px);} #reserve_com .p_info_wrap h3{font-size: 28px; font-weight: 700; color: #000; line-height: 1.4em;} #reserve_com .p_info_wrap h3.mob{display: none;} #reserve_com .p_info_wrap .txt_wrap p.tags{font-size: 15px; font-weight: 500; color: #999; display: flex; flex-wrap: wrap; gap: 8px; margin: 15px 0;} #reserve_com .p_info_wrap .txt_wrap .price_wrap{display: flex; column-gap: 10px; align-items: flex-end;} #reserve_com .p_info_wrap .txt_wrap .price_wrap p.price{font-size: 20px; font-weight: 700; color: #000; line-height: 1.4em;} #reserve_com .p_info_wrap .txt_wrap .price_wrap p.sijung_price{text-decoration: line-through; color: #999; font-weight: 500; font-size: 16px; line-height: 1.4em;} #reserve_com .reserve_wrap .con_wrap h4{font-size: 20px; font-weight: 600; color: #000;} #reserve_com .reserve_wrap .con_wrap .con_box{border: 1px solid #ccc; border-radius: 20px; box-sizing: border-box; padding: 10px 30px; display: flex; flex-wrap: wrap;} #reserve_com .reserve_wrap .con_wrap .con_box dl{display: flex; align-items: center;padding: 20px 0; width: 50%;} #reserve_com .reserve_wrap .con_wrap .con_box dl.long{width: 100%;} #reserve_com .reserve_wrap .con_wrap .con_box dl dt{font-size: 16px; font-weight: 600; color: #000; width: 160px; border-right: 1px solid #CCC;} #reserve_com .reserve_wrap .con_wrap .con_box dl dd{width: calc(100% - 160px); box-sizing: border-box; padding: 0 30px; font-size: 16px; font-weight: 400; color: #444;} #reserve_com .reserve_wrap .con_wrap .con_box dl.bold dd{font-weight: 700;} #reserve_com .reserve_wrap .con_wrap.con_wrap03 .con_box dl dd{color: #222;} #reserve_com .reserve_wrap .con_wrap .con_box dl.total_price dd{color: #1C95C5; font-weight: 700;} #reserve_com .btn_wrap{display: flex; align-items: center; justify-content: center; column-gap: 10px;} #reserve_com .btn_wrap>a{width: 200px; height: 52px; border: 1px solid #CCC; color: #000; font-size: 16px; font-weight: 400; height: 52px; line-height: 52px; border-radius: 52px;} #reserve_com .btn_wrap>a.mypage_btn{background-color: #000; color: #FFF; border: 1px solid #000;} /* 예약 상세정보 (마이페이지 내부) */ .reserve_detail_wrap .reserve_tit{font-size: 28px; font-weight: 700; color: #000;} .reserve_detail_wrap .p_info_wrap{border: 1px solid #CCC; border-radius: 20px; padding: 30px; box-sizing: border-box; display: flex; column-gap: 30px; align-items: center;} .reserve_detail_wrap .p_info_wrap .img_wrap{width: 280px; height: 172px; border-radius: 20px; overflow: hidden; object-position: center;} .reserve_detail_wrap .p_info_wrap .img_wrap img{width: 100%; height: 100%; object-fit: cover;} .reserve_detail_wrap .p_info_wrap .txt_wrap{width: calc(100% - 310px);} .reserve_detail_wrap .p_info_wrap h3{font-size: 28px; font-weight: 700; color: #000; line-height: 1.4em;} .reserve_detail_wrap .p_info_wrap h3.mob{display: none;} .reserve_detail_wrap .p_info_wrap .txt_wrap p.tags{font-size: 15px; font-weight: 500; color: #999; display: flex; flex-wrap: wrap; gap: 8px; margin: 15px 0;} .reserve_detail_wrap .p_info_wrap .txt_wrap .price_wrap{display: flex; column-gap: 10px; align-items: flex-end;} .reserve_detail_wrap .p_info_wrap .txt_wrap .price_wrap p.price{font-size: 20px; font-weight: 700; color: #000; line-height: 1.4em;} .reserve_detail_wrap .p_info_wrap .txt_wrap .price_wrap p.sijung_price{text-decoration: line-through; color: #999; font-weight: 500; font-size: 16px; line-height: 1.4em;} .reserve_detail_wrap .reserve_wrap .con_wrap h4{font-size: 20px; font-weight: 600; color: #000;} .reserve_detail_wrap .reserve_wrap .con_wrap .con_box{border: 1px solid #ccc; border-radius: 20px; box-sizing: border-box; padding: 10px 30px; display: flex; flex-wrap: wrap;} .reserve_detail_wrap .reserve_wrap .con_wrap .con_box dl{display: flex; align-items: center; padding: 20px 0; width: 50%;} .reserve_detail_wrap .reserve_wrap .con_wrap .con_box dl.long{width: 100%;} .reserve_detail_wrap .reserve_wrap .con_wrap .con_box dl dt{font-size: 16px; font-weight: 600; color: #000; width: 160px; border-right: 1px solid #CCC;} .reserve_detail_wrap .reserve_wrap .con_wrap .con_box dl dd{width: calc(100% - 160px); box-sizing: border-box; padding: 0 30px; font-size: 16px; font-weight: 400; color: #444;} .reserve_detail_wrap .reserve_wrap .con_wrap .con_box dl.bold dd{font-weight: 700;} .reserve_detail_wrap .reserve_wrap .con_wrap.con_wrap03 .con_box dl dd{color: #222;} .reserve_detail_wrap .reserve_wrap .con_wrap .con_box dl.total_price dd{color: #1C95C5; font-weight: 700;} .reserve_detail_wrap .reserve_wrap .con_wrap .con_box dl.total_price dt{font-weight: 700;} .reserve_detail_wrap .reserve_wrap .con_wrap .con_box dl.payment_info dd{font-weight: 700;} .reserve_detail_wrap .reserve_wrap .con_wrap .con_box dl.mem_discount dd span{color: #1C95C5;} .reserve_detail_wrap .btn_wrap{display: flex; align-items: center; justify-content: center; column-gap: 10px;} .reserve_detail_wrap .btn_wrap>a{width: 200px; height: 52px; border: 1px solid #CCC; color: #000; font-size: 16px; font-weight: 400; height: 52px; line-height: 52px; border-radius: 52px; text-align: center; display: flex; align-items: center; justify-content: center;} @media screen and (max-width: 768px){ .reserve_detail_wrap .reserve_tit{padding: 20px; background-color: #FFF; margin-bottom: 10px; font-size: 20px;} .reserve_detail_wrap .p_info_wrap{background-color: #FFF; box-sizing: border-box; padding: 20px; border: none; border-radius: 0; display: block;} .reserve_detail_wrap .p_info_wrap h3.pc{display: none;} .reserve_detail_wrap .p_info_wrap h3.mob{display: block; font-size: 18px;} .reserve_detail_wrap .p_info_wrap .img_wrap{width: 100%; height: 214px; margin: 10px 0;} .reserve_detail_wrap .p_info_wrap .txt_wrap{width: 100%;} .reserve_detail_wrap .p_info_wrap .txt_wrap p.tags{row-gap: 0;} .reserve_detail_wrap .reserve_wrap .con_wrap{background-color: #FFF; margin-bottom: 10px; padding: 20px;} .reserve_detail_wrap .reserve_wrap .con_wrap:last-child{margin-bottom: 0;} .reserve_detail_wrap .reserve_wrap .con_wrap h4{margin-bottom: 20px; font-size: 18px;} .reserve_detail_wrap .reserve_wrap .con_wrap .con_box{border-radius: 0; border: none; padding: 0;} .reserve_detail_wrap .reserve_wrap .con_wrap .con_box>dl{width: 100%; padding: 0; margin-bottom: 10px; align-items: flex-start;} .reserve_detail_wrap .reserve_wrap .con_wrap .con_box>dl:last-child{margin-bottom: 0;} .reserve_detail_wrap .reserve_wrap .con_wrap .con_box>dl dt{border-right: none; line-height: 1.5em; width: auto; margin-bottom: 5px;} .reserve_detail_wrap .reserve_wrap .con_wrap .con_box>dl dd{width: 100%; padding: 0; text-align: right;} .reserve_detail_wrap .reserve_wrap .con_wrap.con_wrap03 .con_box dl dd{text-align: right;} .reserve_detail_wrap .reserve_wrap .con_wrap.con_wrap03 .con_box .payment_info{order: 1;} .reserve_detail_wrap .reserve_wrap .con_wrap.con_wrap03 .con_box .payment_method{order: 2;} .reserve_detail_wrap .reserve_wrap .con_wrap.con_wrap03 .con_box .total_price{order: 3; margin-bottom: 10px;} .reserve_detail_wrap .reserve_wrap .con_wrap.con_wrap03 .con_box .price{order: 4; margin-bottom: 0;} .reserve_detail_wrap .reserve_wrap .con_wrap.con_wrap03 .con_box .mem_discount{order: 5; margin-bottom: 0;} .reserve_detail_wrap .reserve_wrap .con_wrap.con_wrap03 .con_box .use_point{order: 6; margin-bottom: 0;} .reserve_detail_wrap .reserve_wrap .con_wrap.con_wrap03 .con_box .mob_wrap{position: relative; padding-left: 10px; box-sizing: border-box;} .reserve_detail_wrap .reserve_wrap .con_wrap.con_wrap03 .con_box .mob_wrap::before{content: ''; display: block; position: absolute; left: 0; top: 0%; width: 2px; background-color: #CCC; height: 100%;} .reserve_detail_wrap .btn_wrap{background-color: #FFF; padding-top: 40px; margin-top: 0;} } @media screen and (max-width: 500px){ .reserve_detail_wrap .reserve_tit{font-size: 16px;} .reserve_detail_wrap .p_info_wrap h3.mob{font-size: 18px;} .reserve_detail_wrap .p_info_wrap .img_wrap{width: 100%; height: 214px;} .reserve_detail_wrap .p_info_wrap .txt_wrap p.tags{font-size: 12px; line-height: 1.4em;} .reserve_detail_wrap .p_info_wrap .txt_wrap .price_wrap p.price{font-size: 18px; font-weight: 700;} .reserve_detail_wrap .p_info_wrap .txt_wrap .price_wrap p.sijung_price{font-size: 14px;} .reserve_detail_wrap .reserve_wrap .con_wrap h4{font-size: 18px;} .reserve_detail_wrap .reserve_wrap .con_wrap .con_box dl dt{width: 120px; font-size: 15px;} .reserve_detail_wrap .reserve_wrap .con_wrap .con_box dl dd{width: calc(100% - 120px); font-size: 15px;} .reserve_detail_wrap .btn_wrap{column-gap: 0; justify-content: space-between; box-sizing: border-box; padding: 0 20px;} .reserve_detail_wrap .btn_wrap>a{width: 49%; height: 42px; line-height: 42px; font-size: 14px;} } @media screen and (max-width: 768px){ #reserve_com{background-color: #f5f5f5;} #reserve_com h2{padding: 20px; background-color: #FFF; margin-bottom: 10px;} #reserve_com .p_info_wrap{background-color: #FFF; box-sizing: border-box; padding: 20px; border: none; border-radius: 0; display: block;} #reserve_com .p_info_wrap h3.pc{display: none;} #reserve_com .p_info_wrap h3.mob{display: block;} #reserve_com .p_info_wrap .img_wrap{margin: 10px 0;} #reserve_com .p_info_wrap .txt_wrap{width: 100%;} #reserve_com .p_info_wrap .txt_wrap p.tags{row-gap: 0;} #reserve_com .reserve_wrap .con_wrap{background-color: #FFF; margin-bottom: 10px; padding: 20px;} #reserve_com .reserve_wrap .con_wrap:last-child{margin-bottom: 0;} #reserve_com .reserve_wrap .con_wrap h4{margin-bottom: 20px;} #reserve_com .reserve_wrap .con_wrap .con_box{border-radius: 0; border: none; padding: 0;} #reserve_com .reserve_wrap .con_wrap .con_box>dl{width: 100%; padding: 0; margin-bottom: 10px; align-items: flex-start;} #reserve_com .reserve_wrap .con_wrap .con_box>dl:last-child{margin-bottom: 0;} #reserve_com .reserve_wrap .con_wrap .con_box>dl dt{border-right: none; line-height: 1.5em;} #reserve_com .reserve_wrap .con_wrap .con_box>dl dd{padding: 0;} #reserve_com .reserve_wrap .con_wrap.con_wrap03 .con_box dl dd{text-align: right;} #reserve_com .reserve_wrap .con_wrap.con_wrap03 .con_box .payment_info{order: 1;} #reserve_com .reserve_wrap .con_wrap.con_wrap03 .con_box .payment_method{order: 2;} #reserve_com .reserve_wrap .con_wrap.con_wrap03 .con_box .total_price{order: 3; margin-bottom: 10px;} #reserve_com .reserve_wrap .con_wrap.con_wrap03 .con_box .price{order: 4; margin-bottom: 0;} #reserve_com .reserve_wrap .con_wrap.con_wrap03 .con_box .mem_discount{order: 5; margin-bottom: 0;} #reserve_com .reserve_wrap .con_wrap.con_wrap03 .con_box .use_point{order: 6; margin-bottom: 0;} #reserve_com .reserve_wrap .con_wrap.con_wrap03 .con_box .mob_wrap{position: relative; padding-left: 10px; box-sizing: border-box;} #reserve_com .reserve_wrap .con_wrap.con_wrap03 .con_box .mob_wrap::before{content: ''; display: block; position: absolute; left: 0; top: 0%; width: 2px; background-color: #CCC; height: 100%;} #reserve_com .btn_wrap{background-color: #FFF; padding-top: 40px; margin-top: 0;} } @media screen and (max-width: 500px){ #reserve_com h2{font-size: 16px;} #reserve_com .p_info_wrap h3.mob{font-size: 18px;} #reserve_com .p_info_wrap .img_wrap{width: 100%; height: 214px;} #reserve_com .p_info_wrap .txt_wrap p.tags{font-size: 12px; line-height: 1.4em;} #reserve_com .p_info_wrap .txt_wrap .price_wrap p.price{font-size: 18px; font-weight: 700;} #reserve_com .p_info_wrap .txt_wrap .price_wrap p.sijung_price{font-size: 14px;} #reserve_com .reserve_wrap .con_wrap h4{font-size: 18px;} #reserve_com .reserve_wrap .con_wrap .con_box dl dt{width: 120px; font-size: 15px;} #reserve_com .reserve_wrap .con_wrap .con_box dl dd{width: calc(100% - 120px); font-size: 15px;} #reserve_com .btn_wrap{column-gap: 0; justify-content: space-between; box-sizing: border-box; padding: 0 20px;} #reserve_com .btn_wrap>a{width: 49%; height: 42px; line-height: 42px; font-size: 14px;} } /* 투표방법 안내 */ .vote_discount h2{font-size: 48px; font-weight: 700; color: #000; line-height: 1.4em;} .vote_discount .flex_wrap{display: flex; justify-content: space-between;} .vote_discount .flex_wrap .left_wrap h3{font-size: 28px; font-weight: 700; color: #1C95C5; line-height: 1.4em;} .vote_discount .mark_list>li{font-size: 20px; font-weight: 500; line-height: 1.6em; color: #000; line-height: 1.6em; padding-left: 45px;} .vote_discount .mark_list>li::before{left: 18px; transform: translate(0); top: 14px; width: 6px; height: 6px;} .vote_discount .flex_wrap .left_wrap .vote_discount_txt{margin-top: 20px; margin-bottom: 10px; display: block; padding: 40px 178px; font-size: 18px; font-weight: 400; color: #444; line-height: 1.6em; border: 1px solid #CCC; border-radius: 10px;} .vote_discount .flex_wrap .left_wrap .vote_discount_txt .blue{font-weight: 700; color: #1C95C5;} .vote_discount .flex_wrap .left_wrap .info_txt_wrap>p{font-size: 16px; font-weight: 400; color: #777; line-height: 1.6em;} .vote_discount .flex_wrap .right_wrap{position: relative; margin-top: -26px;} .vote_discount .flex_wrap .right_wrap img{max-width: 100%;} .vote_discount .process ul.mark_list{margin-bottom: 10px;} .vote_discount .process .process_list{display: flex; column-gap: 0.6%;} .vote_discount .process .process_list>li{width: 24.55%; background-color: #F8F8F8; border-radius: 10px; display: flex; flex-direction: column; justify-content: center; align-items: center; row-gap: 20px; min-height: 238px; padding: 35.5px 0; justify-content: flex-end; box-sizing: border-box;} .vote_discount .process .process_list>li .txt_wrap{text-align: center;} .vote_discount .process .process_list>li .txt_wrap p.numbering{font-size: 36px; font-weight: 700; color: #000; line-height: 1em;} .vote_discount .process .process_list>li .txt_wrap h4{font-size: 16px; font-weight: 400; color: #444; line-height: 1.6em; margin-top: 5px;} .vote_discount .btn_wrap{display: flex; align-items: center; justify-content: center; column-gap: 10px;} .vote_discount .btn_wrap>a{width: 280px; height: 64px; font-size: 20px; border-radius: 64px;} .vote_discount .btn_wrap>a.join_vote_btn{background-color: #000; color: #FFF; border: 1px solid #000; font-weight: 600;} .vote_discount .btn_wrap>a.my_vote_btn{background-color: #FFF; color: #000; border: 1px solid #CCC; font-weight: 400;} @media screen and (max-width: 1660px){ .vote_discount .flex_wrap .left_wrap{width: 50%;} .vote_discount .flex_wrap .left_wrap .vote_discount_txt{padding: 40px 0; text-align: center;} .vote_discount .flex_wrap .right_wrap{width: 48%;} } @media screen and (max-width: 1024px){ .vote_discount{margin-top: 160px;} .vote_discount .flex_wrap{flex-direction: column;} .vote_discount .flex_wrap .left_wrap{width: 100%; position: relative; z-index: 2;} .vote_discount .flex_wrap .right_wrap{width: 100%; position: relative; z-index: 1;} .vote_discount .flex_wrap .right_wrap img{width: 100%;} } @media screen and (max-width: 768px){ .vote_discount{margin-top: 60px;} .vote_discount h2{font-size: 38px;} .vote_discount .flex_wrap .left_wrap h3{font-size: 20px;} .vote_discount .mark_list>li{font-size: 16px; padding-left: 28px;} .vote_discount .mark_list>li::before{width: 4px; height: 4px; top: 10px; left: 14px;} .vote_discount .process .process_list{flex-wrap: wrap; row-gap: 10px;} .vote_discount .process .process_list>li{width: 100%; flex-direction: row; justify-content: flex-start; padding: 15px 0; padding-left: 20px; min-height: 0;} .vote_discount .process .process_list>li .icon_wrap{width: 120px; display: flex; justify-content: center;} .vote_discount .process .process_list>li .icon_wrap img{max-width: 100%;} .vote_discount .process .process_list>li .txt_wrap{width: calc(100% - 140px); padding-left: 20px; text-align: left; display: flex; align-items: center; column-gap: 10px; align-items: center;} .vote_discount .process .process_list>li .txt_wrap p.numbering{font-size: 26px;} .vote_discount .process .process_list>li .txt_wrap h4{margin-top: 0;} .vote_discount .btn_wrap>a{font-size: 18px; width: 220px;} } @media screen and (max-width: 500px){ .vote_discount{margin-top: 20px;} .vote_discount h2{font-size: 20px;} .vote_discount .flex_wrap .left_wrap h3{font-size: 16px;} .vote_discount .mark_list>li{font-size: 14px;} .vote_discount .flex_wrap .left_wrap .vote_discount_txt{font-size: 16px; padding: 20px 0;} .vote_discount .flex_wrap .left_wrap .info_txt_wrap>p{font-size: 14px;} .vote_discount .flex_wrap .right_wrap{margin-top: -16px;} .vote_discount .process .process_list>li{justify-content: space-between; box-sizing: border-box; padding-right: 20px;} .vote_discount .process .process_list>li .icon_wrap{width: 70px;} .vote_discount .process .process_list>li .txt_wrap{flex-direction: column; align-items: flex-end; width: calc(100% - 90px);} .vote_discount .process .process_list>li .txt_wrap p.numbering{font-size: 16px;} .vote_discount .process .process_list>li .txt_wrap h4{margin-top: 5; font-size: 14px;} .vote_discount .btn_wrap{column-gap: 0; justify-content: space-between;} .vote_discount .btn_wrap>a{font-size: 14px; width: 49%; height: 55px;} } /* 투표 공통 */ section.vote .vote_info{display: flex; justify-content: space-between;} section.vote .vote_info dl{display: flex; width: 49.5%; border: 1px solid #CCC; padding: 20px; justify-content: space-between; align-items: center; box-sizing: border-box; border-radius: 10px;} section.vote .vote_info dl dt{font-size: 16px; font-weight: 700; color: #000; line-height: 1.6em;} section.vote .vote_info dl dd{font-size: 16px; color: #444; font-weight: 500;} section.vote .vote_status dl{display: flex; align-items: center; justify-content: space-between; margin-bottom: 0; position: relative; height: 100%; box-sizing: border-box; z-index: 2;padding: 0 15px;} section.vote .vote_status dl dt{font-size: 14px; font-weight: 500; color: #000;} section.vote .vote_status dl dd{font-size: 14px; font-weight: 500; color: #000; width: auto !important;} section.vote .vote_status .vote_result_wrap{border-bottom: 1px solid #DDD; padding-bottom: 20px; margin: 20px 0;} section.vote .vote_status .vote_result_wrap>div{position: relative; border-radius: 10px; background-color: #f5f5f5; height: 42px; margin-bottom: 10px;} section.vote .vote_status .vote_result_wrap>div:last-child{margin-bottom: 0;} section.vote .vote_status .vote_result_wrap>div .color_bar{position: absolute; left: 0; top: 0; height: 100%; z-index: 1; border-radius: 10px;} section.vote .vote_status .vote_result_wrap>div.vote_bar01 .color_bar{background-color: #69BBFD;} section.vote .vote_status .vote_result_wrap>div.vote_bar02 .color_bar{background-color: #60D5E2;} section.vote .vote_status .vote_result_wrap>div.vote_bar03 .color_bar{background-color: #ACAAFF;} section.vote .vote_status .vote_result_wrap>div.vote_bar04 .color_bar{background-color: #D9E774;} section.vote .vote_status .vote_result_wrap>div.vote_bar05 .color_bar{background-color: #E260B2;} section.vote .vote_status .vote_result_wrap>div.vote_bar06 .color_bar{background-color: #E26062;} section.vote .pop_wrap .text1 span.bk{display: block; color: #000; font-weight: 400;} section.vote .pop_wrap #vote_complete_btn{background-color: #000; color: #FFF; display: block; width: 120px; height: 42px; font-size: 14px; font-weight: 700; color: #FFF; text-align: center; line-height: 42px; border-radius: 42px;} @media screen and (max-width: 1180px){ section.vote .vote_info{flex-direction: column; row-gap: 6px;} section.vote .vote_info dl{width: 100%;} } @media screen and (max-width: 1024px){ section.vote .vote_status{width: 100% !important;} section.vote .vote_status h3{display: none;} section.vote .vote_status dl{display: flex !important; order: 2; padding: 0;} section.vote .vote_status dl dd{font-weight: 500; font-size: 14px !important;} section.vote .vote_status .open_vote{display: flex; justify-content: center; column-gap: 10px; align-items: center; background-color: #000; color: #FFF; margin-bottom: 10px; border-radius: 60px; padding: 5.5px 15px; line-height: 1.6em;} section.vote .vote_status .open_vote>i{position: relative; transition-duration: 0.3s;} section.vote .vote_status .open_vote.active>i{transform: rotate(180deg);} section.vote .vote_status .vote_result_wrap{border: none; padding: 0; margin: 0; margin-top: 10px; border-radius: 10px; border: 1px solid #CCC; box-sizing: border-box; padding: 20px; display: none;} section.vote .vote_status .vote_result_wrap>div{background: none; border-radius: 0; height: auto; display: flex; flex-direction: column; row-gap: 4px;} section.vote .vote_status .vote_result_wrap>div .color_bar{position: relative; height: 2px; border-radius: 2px; order: 1;} } @media screen and (max-width: 500px){ section.vote .vote_info dl{flex-direction: column; align-items: flex-start; row-gap: 0; padding: 15px; line-height: 1.5em;} section.vote .vote_status .apply_btn{font-size: 16px; height: 42px; line-height: 42px;} section.vote .vote_info dl dt{font-size: 15px;} section.vote .vote_info dl dd{font-size: 15px;} section.vote .pop_wrap .btn_wrap{width: 100%; margin-top: 20px;} section.vote .pop_wrap #vote_complete_btn{width: 100%;} } /* 투표 리스트 */ .vote_menu_list{border-bottom: 1px solid #CCC;} .vote_menu_list ul{display: flex; column-gap: 40px;} .vote_menu_list ul>li>a{display: block; padding: 20px 0; box-sizing: border-box; font-size: 18px; font-weight: 400; color: #000; } .vote_menu_list ul>li.active>a{border-bottom: 3px solid #1C95C5; color: #1C95C5;} .vote_list#pList .vote_top_wrap .flex_wrap{display: flex; justify-content: space-between; align-items: flex-end;} .vote_list#pList .vote_top_wrap .flex_wrap p.txt{font-size: 20px; font-weight: 600; color: #000; line-height: 1.6em;} .vote_list#pList .vote_top_wrap .flex_wrap p.txt span.big{font-size: 24px; font-weight: 700;} .vote_list#pList .vote_top_wrap .flex_wrap a.vote_join_btn{display: block; padding: 10px 30px; font-size: 14px; color: #FFF; background-color: #000; border-radius: 42px;} section.vote.vote_list .vote_status .vote_result_wrap{box-sizing: border-box; padding: 30px; border: 1px solid #CCC; border-radius: 10px; margin-bottom: 40px;} .vote_list#pList .trip_list li .txt_wrap h3{margin: 0; text-align: center; font-size: 20px;} .vote_list#pList .pop_wrap>div{display: none;} .vote_list#pList .pop_wrap .pop_vote{width: 1200px; height: 775px;} .vote_list#pList .pop_wrap .pop_vote .tit_wrap{display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #000;} .vote_list#pList .pop_wrap .pop_vote .tit_wrap h3{font-size: 18px; font-weight: 600; color: #000;} .vote_list#pList .pop_wrap .pop_vote .con_list{display: flex; flex-wrap: wrap; column-gap: 2%; row-gap: 30px;} .vote_list#pList .pop_wrap .pop_vote .tit_wrap .close_btn{font-size: 18px; font-weight: 400; color: #000;} .vote_list#pList .pop_wrap .pop_vote .con_list>li{width: 32%;} .vote_list#pList .pop_wrap .pop_vote .con_list>li label{position: relative; width: 100%; height: 225px; cursor: pointer; display: block;} .vote_list#pList .pop_wrap .pop_vote .con_list>li label input[type="radio"]{border: none; background: transparent; position: absolute; width: 100%; height: 100%; border-radius: 20px; left: 0; top: 0; box-sizing: border-box; cursor: pointer;} .vote_list#pList .pop_wrap .pop_vote .con_list>li label input[type="radio"]::after{display: none;} .vote_list#pList .pop_wrap .pop_vote .con_list>li label input[type="radio"]:checked{border: 6px solid #1C95C5;} .vote_list#pList .pop_wrap .pop_vote .con_list>li .img_wrap{width: 100%; height: 100%; object-position: center; overflow: hidden; border-radius: 20px; } .vote_list#pList .pop_wrap .pop_vote .con_list>li .img_wrap img{width: 100%; height: 100%; object-fit: cover;} .vote_list#pList .pop_wrap .pop_vote .con_list>li h4{font-size: 16px; font-weight: 700; color: #000; text-align: center; margin-top: 10px;} .vote_list#pList .pop_wrap .pop_vote button#vote_btn{display: block; width: 140px; height: 42px; line-height: 42px; background-color: #000; color: #FFF; font-size: 14px; font-weight: 700; border-radius: 42px; text-align: center; margin: 0 auto;} @media screen and (max-width: 1280px){ .vote_list#pList .pop_wrap .pop_vote{width: 90%; height: 90%;} .vote_list#pList .box_inner{height: 100%; overflow-y: auto;} .vote_list#pList .pop_wrap .pop_vote .con_list>li label{height: 160px;} } @media screen and (max-width: 1024px){ .vote_list#pList .vote_top_wrap .flex_wrap{flex-direction: column; align-items: flex-start; row-gap: 20px;} } @media screen and (max-width: 768px){ .vote_list#pList .pop_wrap .pop_vote{width: 100%; height: 100%; left: 0; top: 0; transform: translate(0); border-radius: 0; padding: 0;} .vote_list#pList .pop_wrap .pop_vote .tit_wrap{padding: 20px; box-sizing: border-box; border-bottom: 1px solid #CCC;} .vote_list#pList .pop_wrap .pop_vote .con_list>li{width: 49%;} .vote_menu_list ul{box-sizing: border-box; padding: 0 20px;} .vote_list#pList .pop_wrap .pop_vote .vote_con_list{box-sizing: border-box; padding: 0 20px;} .vote_list#pList .pop_wrap .pop_vote .btn_wrap{padding-bottom: 20px;} .vote_list#pList .pop_wrap .pop_vote button#vote_btn{width: calc(100% - 40px);} .vote_list#pList .vote_top_wrap .flex_wrap .vote_join_btn_wrap{position: fixed; bottom: 0; background-color: #FFF; left: 0; width: 100%; padding: 20px; box-sizing: border-box; z-index: 500; box-shadow: 0 -2px 4px rgba(0,0,0,0.05);} .vote_list#pList .vote_top_wrap .flex_wrap .vote_join_btn_wrap>a{text-align: center;} } @media screen and (max-width: 500px){ .vote_menu_list{margin-bottom: 40px;} .vote_menu_list ul{column-gap: 10px;} .vote_menu_list ul>li>a{font-size: 14px; font-weight: 400; padding: 10px 0; line-height: 1.2em;} .vote_list#pList .vote_info{margin: 15px 0; margin-top: 30px;} .vote_list#pList .vote_top_wrap .flex_wrap{row-gap: 15px;} .vote_list#pList h2{font-size: 18px; margin-bottom: 10px;} .vote_list#pList .vote_top_wrap .flex_wrap p.txt{font-size: 15px; font-weight: 400; line-height: 1.4em} .vote_list#pList .vote_top_wrap .flex_wrap p.txt span.big{font-size: 15px; font-weight: 400; line-height: 1.4em;} section.vote.vote_list .vote_status .vote_result_wrap{padding: 20px;} section.vote#pList .vote_status .vote_result_wrap{margin-bottom: 20px;} .vote_list#pList .pop_wrap .pop_vote .con_list{row-gap: 10px;} .vote_list#pList .trip_list li .img_wrap{border-radius: 20px; height: 160px;} .vote_list#pList .trip_list li .txt_wrap{margin-top: 5px;} .vote_list#pList .trip_list li .txt_wrap h3{font-size: 14px; text-align: left;} .vote_list#pList .pop_wrap .pop_vote .tit_wrap h3{font-size: 16px;} } /* vote_view 투표 모달 스타일 */ .vote_view#pView .pop_wrap>div{display: none;} .vote_view#pView .pop_wrap .pop_vote{width: 1200px; height: 775px;} .vote_view#pView .pop_wrap .pop_vote .tit_wrap{display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #000;} .vote_view#pView .pop_wrap .pop_vote .tit_wrap h3{font-size: 18px; font-weight: 600; color: #000;} .vote_view#pView .pop_wrap .pop_vote .con_list{display: flex; flex-wrap: wrap; column-gap: 2%; row-gap: 30px;} .vote_view#pView .pop_wrap .pop_vote .tit_wrap .close_btn{font-size: 18px; font-weight: 400; color: #000;} .vote_view#pView .pop_wrap .pop_vote .con_list>li{width: 32%;} .vote_view#pView .pop_wrap .pop_vote .con_list>li label{position: relative; width: 100%; height: 225px; cursor: pointer; display: block;} .vote_view#pView .pop_wrap .pop_vote .con_list>li label input[type="radio"]{border: none; background: transparent; position: absolute; width: 100%; height: 100%; border-radius: 20px; left: 0; top: 0; box-sizing: border-box; cursor: pointer;} .vote_view#pView .pop_wrap .pop_vote .con_list>li label input[type="radio"]::after{display: none;} .vote_view#pView .pop_wrap .pop_vote .con_list>li label input[type="radio"]:checked{border: 6px solid #1C95C5;} .vote_view#pView .pop_wrap .pop_vote .con_list>li .img_wrap{width: 100%; height: 100%; object-position: center; overflow: hidden; border-radius: 20px; } .vote_view#pView .pop_wrap .pop_vote .con_list>li .img_wrap img{width: 100%; height: 100%; object-fit: cover;} .vote_view#pView .pop_wrap .pop_vote .con_list>li h4{font-size: 16px; font-weight: 700; color: #000; text-align: center; margin-top: 10px;} .vote_view#pView .pop_wrap .pop_vote button#vote_btn{display: block; width: 140px; height: 42px; line-height: 42px; background-color: #000; color: #FFF; font-size: 14px; font-weight: 700; border-radius: 42px; text-align: center; margin: 0 auto;} @media screen and (max-width: 1280px){ .vote_view#pView .pop_wrap .pop_vote{width: 90%; height: 90%;} .vote_view#pView .box_inner{height: 100%; overflow-y: auto;} .vote_view#pView .pop_wrap .pop_vote .con_list>li label{height: 160px;} } @media screen and (max-width: 768px){ .vote_view#pView .pop_wrap .pop_vote{width: 100%; height: 100%; left: 0; top: 0; transform: translate(0); border-radius: 0; padding: 0;} .vote_view#pView .pop_wrap .pop_vote .tit_wrap{padding: 20px; box-sizing: border-box; border-bottom: 1px solid #CCC;} .vote_view#pView .pop_wrap .pop_vote .con_list>li{width: 49%;} .vote_view#pView .pop_wrap .pop_vote .vote_con_list{box-sizing: border-box; padding: 0 20px;} .vote_view#pView .pop_wrap .pop_vote .btn_wrap{padding-bottom: 20px;} .vote_view#pView .pop_wrap .pop_vote button#vote_btn{width: calc(100% - 40px);} } @media screen and (max-width: 500px){ .vote_view#pView .pop_wrap .pop_vote .con_list{row-gap: 10px;} .vote_view#pView .pop_wrap .pop_vote .tit_wrap h3{font-size: 16px;} } /* 투표 상세페이지 */ .vote_view#pView .view_bottom>.info_wrap>.left_wrap>div:not(:last-child){border: 0;} .vote_view#pView .view_bottom .vote_con .con_top{background-color: #f9f9f9; border-radius: 20px; padding: 20px; box-sizing: border-box;} .vote_view#pView .view_bottom>.info_wrap>.left_wrap{position: relative; font-size: 18px; font-weight: 700; color: #000; line-height: 1.6em;} .vote_view#pView .view_bottom>.info_wrap>.left_wrap img{max-width: 100%;} .vote_view#pView .view_bottom>.info_wrap>.right_wrap{height: 775px;} .vote_view#pView .view_bottom>.info_wrap>.right_wrap .vote_wrap .form_wrap>li:not(:last-child){margin-bottom: 10px;} .vote_view#pView .view_bottom>.info_wrap>.right_wrap .vote_wrap .form_wrap>li label{display: flex; align-items: center; column-gap: 4.5px; cursor: pointer; font-size: 16px; font-weight: 400;} .vote_view#pView .view_bottom>.info_wrap>.right_wrap .vote_wrap .form_wrap>li label input[type="radio"]:checked{background-color: #000; border: 1px solid #000;} .vote_view#pView .view_bottom>.info_wrap>.right_wrap .vote_wrap button{margin-top: 20px;} @media screen and (max-width: 1280px){ .vote_view#pView .view_bottom>.info_wrap>.left_wrap{width: calc(100% - 380px);} } @media screen and (max-width: 1024px){ .vote_view#pView .view_bottom>.info_wrap{flex-direction: column; row-gap: 20px} .vote_view#pView .view_bottom>.info_wrap>.left_wrap{width: 100%;} .vote_view#pView .view_bottom>.info_wrap>.right_wrap{ z-index: 1;height: auto; position: relative; top: auto; left: auto; background: none; width: 100%; box-shadow: none; padding: 0;} .vote_view#pView .view_bottom>.info_wrap>.right_wrap .vote_wrap{position: fixed; width: 100%; bottom: 0; left: 0; background-color: #FFF; box-sizing: border-box; padding: 20px; box-shadow: 0 -2px 4px rgba(0,0,0,0.05); z-index: 500; margin-bottom: 0; padding-bottom: 92px;} .vote_view#pView .view_bottom>.info_wrap>.right_wrap .vote_wrap .form_wrap{display: flex; column-gap: 2%; row-gap: 10px; flex-wrap: wrap;} .vote_view#pView .view_bottom>.info_wrap>.right_wrap .vote_wrap .form_wrap>li{width: 32%;} .vote_view#pView .view_bottom>.info_wrap>.right_wrap .vote_wrap .form_wrap>li:not(:last-child){margin-bottom: 0;} .vote_view#pView .view_bottom>.info_wrap>.right_wrap .vote_status .apply_btn{position: fixed; bottom: 20px; z-index: 501; display: block; width: calc(100% - 40px); left: 50%; transform: translateX(-50%); box-sizing: border-box;} } @media screen and (max-width: 768px){ .vote_view#pView .view_bottom>.tit_wrap{box-sizing: border-box; padding: 0 20px; margin-bottom: 10px; background-color: #FFF; padding-bottom: 30px;} .vote_view#pView .view_bottom>.tit_wrap .left_wrap{width: 100%; } .vote_view#pView .view_bottom>.tit_wrap h2{margin-top: 0;width: 100%; display: block;} .vote_view#pView .view_bottom>.info_wrap{row-gap: 0px;} .vote_view#pView .view_bottom>.info_wrap>.left_wrap>div{padding-bottom: 20px;} .vote_view#pView .view_bottom>.info_wrap>.right_wrap{box-sizing: border-box; padding: 0 20px; background-color: #FFF;} .vote_view#pView .view_bottom>.info_wrap>.right_wrap .vote_wrap .form_wrap>li{width: 49%;} } @media screen and (max-width: 500px){ .vote_view#pView .view_bottom>.tit_wrap{box-sizing: border-box; padding: 0 20px; margin-bottom: 10px; background-color: #FFF; padding-bottom: 30px;} .vote_view#pView .view_bottom>.tit_wrap .left_wrap{width: 100%; } .vote_view#pView .view_bottom>.tit_wrap h2{margin-top: 0;width: 100%; display: block;} .vote_view#pView .view_bottom>.info_wrap{row-gap: 0px;} .vote_view#pView .view_bottom>.info_wrap>.left_wrap{font-size: 15px;} .vote_view#pView .view_bottom>.tit_wrap h2{font-size: 20px;} .vote_view#pView .view_bottom>.info_wrap>.left_wrap>div{padding-bottom: 20px;} .vote_view#pView .view_bottom>.info_wrap>.right_wrap{box-sizing: border-box; padding: 0 20px; background-color: #FFF;} .vote_view#pView .view_bottom>.info_wrap>.right_wrap .vote_wrap{padding-bottom: 82px;} .vote_view#pView .view_bottom>.info_wrap>.right_wrap .vote_wrap .form_wrap>li{width: 100%;} .vote_view#pView .view_bottom>.info_wrap>.right_wrap .vote_wrap .form_wrap>li input[type="radio"]{width: 24px; height: 24px;} .vote_view#pView .view_bottom>.info_wrap>.right_wrap .vote_wrap .form_wrap>li input[type="radio"]::after{width: 12px; height: 9px;} .vote_view#pView .view_bottom>.info_wrap>.right_wrap .vote_wrap .form_wrap>li label{font-size: 15px;} } /* 여행 달력 */ #calendar .calendar_wrap .month{border-top: 2px solid #000; border-bottom: 1px solid #000; padding: 20px 0; margin-bottom: 40px;} #calendar .calendar_wrap .month .month_txt{font-size: 20px;} #calendar .calendar_wrap .days>div>.day-name{width: 13.5%; font-size: 18px; color: #000; font-weight: 600; border-bottom: 1px solid #DDD; padding: 10px; padding-bottom: 20px; box-sizing: border-box;} #calendar .calendar_wrap .days>div>.day{width: 13.5%; text-align: left; align-items: flex-start; box-sizing: border-box; padding: 20px 10px;} #calendar .calendar_wrap .days>div>.day{height: 180px; border-bottom: 1px solid #DDD; border-radius: 0; background-color: #FFF; row-gap: 20px;} #calendar .calendar_wrap .days>div>.day.today{background-color: #FFF; border: 1px solid #000;} #calendar .calendar_wrap .days>div>.day.today span{color: #000;} #calendar .calendar_wrap .days>div>.day .dots{display: none;} #calendar .calendar_wrap .days>div>.day .day-num{padding-top: 0; font-size: 18px; font-weight: 500; color: #000; line-height: 1em; transition-duration: 0.3s;} #calendar .calendar_wrap .days>div>.day p.cal_trip{display: block;width: 100%;} #calendar .calendar_wrap .days>div>.day p.cal_trip>span{display: block; font-size: 14px; font-weight: 400; color: #444; line-height: 1em; margin-bottom: 6px; transition-duration: 0.3s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%;} #calendar .calendar_wrap .days>div>.day p.cal_trip>span:last-child{margin-bottom: 0;} #calendar .calendar_wrap .days>div>.day.holiday .day-num{color: #F83131;} #calendar .calendar_wrap .days>div>.day.day-prev{background-color: #FFF !important; cursor: default;} #calendar .calendar_wrap .days>div>.day.day-prev .day-num{color: #999 !important;} /* hover */ #calendar .calendar_wrap .days>div>.day:hover, #calendar .calendar_wrap .days>div>.day:active{background-color: #1C95C5;} #calendar .calendar_wrap .days>div>.day:hover .day-num, #calendar .calendar_wrap .days>div>.day:active .day-num{color: #FFF;} #calendar .calendar_wrap .days>div>.day:hover p.cal_trip>span, #calendar .calendar_wrap .days>div>.day:active p.cal_trip>span{color: #FFF;} #calendar .calendar_wrap .days>div>.day.today:hover, #calendar .calendar_wrap .days>div>.day.today:active{background-color: #1C95C5; border: 1px solid #1C95C5;} #calendar .calendar_wrap .days>div>.day.today:hover span, #calendar .calendar_wrap .days>div>.day.today:active span{color: #FFF;} /* popup */ #calendar .date_pop_box{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: #FFF; width: 680px; height: 745px; border-radius: 10px; box-sizing: border-box; padding: 32px 19px;} #calendar .date_pop_box .pop_inner{height: 100%;} #calendar .date_pop_box .tit_wrap{display: flex; justify-content: space-between; margin-bottom: 40px; border-bottom: 2px solid #000; padding-bottom: 20px; align-items: center;} #calendar .date_pop_box .tit_wrap h3{font-size: 18px; font-weight: 600; color: #000; line-height: 1em;} #calendar .date_pop_box .tit_wrap button.close_btn{font-size: 18px;} #calendar .date_pop_box .p_list{padding: 1px; padding-right: 7px; box-sizing: border-box; height: 86%; } #calendar .date_pop_box .p_list>ul{width: 100%;} #calendar .date_pop_box .p_list>ul>li{height: 123px; padding: 0;} #calendar .date_pop_box .p_list>ul>li:last-child{margin-bottom: 0;} #calendar .date_pop_box .p_list>ul>li>a{display: flex; height: 100%; width: 100%;} #calendar .date_pop_box .p_list>ul>li .img_wrap{width: 200px; overflow: hidden; border-radius: 10px; height: 100%; object-position: center;} #calendar .date_pop_box .p_list>ul>li .img_wrap img{width: 100%; height: 100%; object-fit: cover;} #calendar .date_pop_box .p_list>ul>li .txt_wrap h4{font-size: 20px; font-weight: 700; color: #000;} @media screen and (max-width: 1024px){ #calendar .calendar_wrap .days>div>.day{height: 160px;} } @media screen and (max-width: 768px){ #calendar{box-sizing: border-box; padding: 0 20px;} #calendar .calendar_wrap .month{border: none; padding: 0; margin-bottom: 20px;} #calendar .calendar_wrap .days>div{margin-bottom: 10px;} #calendar .calendar_wrap .days>div:last-child{margin-bottom: 0;} #calendar .calendar_wrap .days>div>.day{height: 61px; text-align: center; justify-content: flex-end; align-items: center; row-gap: 5px; padding: 0; border: none; padding-bottom: 8px; border-radius: 6px;} #calendar .calendar_wrap .days>div>.day .dots{display: block;} #calendar .calendar_wrap .days>div>.day-name{border: none; text-align: center;} #calendar .calendar_wrap .days>div>.day .day-num{margin-bottom: 0;} #calendar .calendar_wrap .days>div>.day p.cal_trip{display: none;} #calendar .calendar_wrap .days>div>.day.today{background-color: #1C95C5; border: 1px solid #1C95C5;} #calendar .calendar_wrap .days>div>.day.today span{color: #FFF;} #calendar .calendar_wrap .days>div>.day.day-prev{text-indent: -9999px;} #calendar .calendar_wrap .days>div>.day.day-prev .dots{display: none;} #calendar .date_pop_box{width: 100%; height: 100%; left: 0; top: 0; transform: translate(0); border-radius: 0; padding: 0;} #calendar .date_pop_box .tit_wrap{padding: 20px; border-bottom: 1px solid #DDD; margin: 0;} #calendar .date_pop_box .p_list{padding: 0; height: calc(100% - 63px);} #calendar .date_pop_box .p_list>ul>li{border: none; border-bottom: 1px solid #CCC; border-radius: 0; box-sizing: border-box; padding: 20px; height: auto;} #calendar .date_pop_box .p_list>ul>li .img_wrap{width: 80px; height: 80px;} #calendar .date_pop_box .p_list>ul>li .txt_wrap{width: calc(100% - 100px);} } @media screen and (max-width: 500px){ #calendar{margin-top: 40px; margin-bottom: 40px;} #calendar .calendar_wrap .month .month_txt{font-size: 16px;} #calendar .calendar_wrap .days>div>.day-name{font-size: 14px; padding: 0;} #calendar .calendar_wrap .days>div>.day{height: 41px; padding-bottom: 6px;} #calendar .calendar_wrap .days>div>button.day .dots{top: 8px;} #calendar .calendar_wrap .days>div>.day .day-num{line-height: 1em; font-size: 16px;} #calendar .date_pop_box .p_list>ul>li>a{flex-direction: row;} #calendar .date_pop_box .p_list>ul>li .txt_wrap h4{font-size: 18px; margin-bottom: 6px;} #calendar .date_pop_box .tit_wrap h3{font-size: 16px;} #calendar .date_pop .date_pop_box .p_list ul>li>a .price_wrap{flex-wrap: wrap;} #calendar .date_pop .date_pop_box .p_list ul>li>a .price_wrap .price{display: block; width: 100%; margin: 0;} #calendar .date_pop .date_pop_box .p_list ul>li>a .apply_mem .bar{display: none;} #calendar .date_pop .date_pop_box .p_list ul>li>a .apply_mem p{display: flex; flex-wrap: wrap;} #calendar .date_pop .date_pop_box .p_list ul>li>a .apply_mem p span.txt{display: block; width: 100%; line-height: 1.4em;} .date_pop .date_pop_box .p_list ul>li>a .price_wrap .special_price{font-size: 12px; padding: 2px 13.5px;} } /* 지놀할인 */ #discount>.inner>div h3{font-size: 28px; font-weight: 700; color: #000; line-height: 1.2em;} #discount .mem_grade .grade_list{display: flex; flex-wrap: wrap; row-gap: 30px; justify-content: space-between;} #discount .mem_grade .grade_list>li{width: 48%; display: flex; column-gap: 32px;} #discount .mem_grade .grade_list>li .icon_wrap{width: 150px; height: 150px; display: flex; justify-content: center; align-items: center; border-radius: 20px; background-color: #f8f8f8;} #discount .mem_grade .grade_list>li .icon_wrap img{filter: drop-shadow(0 10px 5px rgba(0,0,0,0.15));} #discount .mem_grade .grade_list>li.grade1 .icon_wrap img{max-width: 80px; max-height: 70px;} #discount .mem_grade .grade_list>li.grade2 .icon_wrap img{max-width: 74px; max-height: 67px;} #discount .mem_grade .grade_list>li.grade3 .icon_wrap img{max-width: 70px; max-height: 70px;} #discount .mem_grade .grade_list>li.grade4 .icon_wrap img{max-width: 70px; max-height: 68px;} #discount .mem_grade .grade_list>li.grade5 .icon_wrap img{max-width: 70px; max-height: 79px;} #discount .mem_grade .grade_list>li .txt_wrap{width: calc(100% - 182px);} #discount .mem_grade .grade_list>li .txt_wrap h4{font-size: 24px; font-weight: 700; margin-bottom: 12px; line-height: 1.2em;} #discount .mem_grade .grade_list>li.grade1 .txt_wrap h4{color: #1C95C5;} #discount .mem_grade .grade_list>li.grade2 .txt_wrap h4{color: #52C3F1;} #discount .mem_grade .grade_list>li.grade3 .txt_wrap h4{color: #F9B806;} #discount .mem_grade .grade_list>li.grade4 .txt_wrap h4{color: #ACAAFF;} #discount .mem_grade .grade_list>li.grade5 .txt_wrap h4{color: #E260B2;} #discount .mem_grade .grade_list>li .benefit_list>li{font-size: 18px; font-weight: 400; line-height: 1.6em; color: #444; display: flex; column-gap: 10px;} #discount .mem_grade .grade_list>li .benefit_list>li i{color: #F83131; line-height: 1.6em;} #discount .mem_point .txt1{font-size: 20px; font-weight: 500; line-height: 1.6em; color: #000;} #discount .mem_point .point_list{display: flex; justify-content: space-between;} #discount .mem_point .point_list>li{width: 32.9%; height: 285px; border-radius: 10px; display: flex; flex-direction: column; padding-top: 30px; align-items: center;} #discount .mem_point .point_list>li.blue{background-color: #1C95C5;} #discount .mem_point .point_list>li.yellow{background-color: #F9B806;} #discount .mem_point .point_list>li.pink{background-color: #E260B2;} #discount .mem_point .point_list>li p.numbering{font-size: 36px; color: #FFF; font-weight: 700; margin-top: 20px; margin-bottom: 10px; line-height: 1em;} #discount .mem_point .point_list>li h4{font-size: 18px; font-weight: 500; line-height: 1.6em; color: #FFF;text-align: center;} #discount .mem_point .txt2{font-size: 16px; font-weight: 500; color: #777; line-height: 1.6em;} #discount .vote_discount .flex_wrap{display: block;} #discount .vote_discount .flex_wrap .mark_list{display: flex; flex-wrap: wrap; justify-content: space-between;} #discount .vote_discount .flex_wrap .mark_list>li{width: 49%; box-sizing: border-box;} #discount .vote_discount .flex_wrap .left_wrap .vote_discount_txt{text-align: center;} @media screen and (max-width: 1660px){ #discount .vote_discount .flex_wrap .left_wrap{width: 100%;} } @media screen and (max-width: 1024px){ #discount .mem_grade .grade_list>li{width: 100%; column-gap: 20px;} #discount .mem_grade .grade_list>li .icon_wrap{width: 120px; height: 120px;} #discount .mem_grade .grade_list>li .txt_wrap{width: calc(100% - 140px);} #discount .mem_point .point_list>li{box-sizing: border; padding: 0 10px; padding-top: 30px; width: 32%; box-sizing: border-box; height: 320px;} #discount .mem_point .point_list>li h4{word-break: keep-all;} #discount .mem_point .point_list>li h4 br{display: none;} #discount .vote_discount .flex_wrap .mark_list{display: block;} #discount .vote_discount .flex_wrap .mark_list>li{width: 100%;} } @media screen and (max-width: 768px){ #discount .mem_point .point_list{flex-direction: column; row-gap: 10px;} #discount .mem_point .point_list>li{width: 100%; height: auto; flex-direction: row; padding: 20px; padding-top: 20px; column-gap: 20px; align-items: center;} #discount .mem_point .point_list>li .icon_wrap{width: 120px;} #discount .mem_point .point_list>li .icon_wrap img{width: 100%;} #discount .mem_point .point_list>li .txt_wrap{width: calc(100% - 140px); display: flex; align-items: center; column-gap: 20px;} #discount .mem_point .point_list>li p.numbering{margin: 0;} #discount .mem_point .point_list>li h4{text-align: left;} #discount .mem_point .point_list>li h4 br{display: block;} #discount .vote_discount .flex_wrap .left_wrap{width: 100%;} } @media screen and (max-width: 500px){ #discount>.inner>div h3{font-size: 18px;} #discount .mem_grade .grade_list>li .icon_wrap{width: 70px; height: 70px;} #discount .mem_grade .grade_list>li .icon_wrap img{width: 60%;} #discount .mem_grade .grade_list>li .txt_wrap{width: calc(100% - 90px);} #discount .mem_grade .grade_list>li .txt_wrap h4{font-size: 16px; margin-bottom: 5px;} #discount .mem_grade .grade_list>li .benefit_list>li{font-size: 14px; column-gap: 6px;} #discount .mem_point .txt1{font-size: 14px;} #discount .mem_point .point_list>li .icon_wrap{width: 70px;} #discount .mem_point .point_list>li .txt_wrap{width: calc(100% - 90px); flex-direction: column; row-gap: 6px; align-items: flex-start;} #discount .mem_point .point_list>li p.numbering{font-size: 16px;} #discount .mem_point .point_list>li h4{font-size: 14px; line-height: 1.4em;} #discount .mem_point .txt2{font-size: 14px;} } /* 지놀소개 */ #about_us>div{position: relative; margin-bottom: 100px;} #about_us>div:last-child{margin-bottom: 0;} #about_us>div h2{font-size: 48px; font-weight: 700; color: #000; line-height: 1.4em; word-break: keep-all;} #about_us>div .txt_wrap dl dt{font-size: 28px; font-weight: 700; line-height: 1.4em;} #about_us>div .txt_wrap dl.txt1 dt{color: #1C95C5;} #about_us>div .txt_wrap dl.txt2 dt{color: #61C7F1;} #about_us>div .txt_wrap dl.txt3 dt{color: #F9B806;} #about_us>div .txt_wrap dl.txt4 dt{color: #545ACE;} #about_us>div .txt_wrap dl.txt5 dt{color: #E260B2;} #about_us>div .txt_wrap dl.txt6 dt{color: #F96400;} #about_us>div .txt_wrap dl dd{font-size: 20px; font-weight: 500; color: #000; line-height: 1.6em; word-break: keep-all;} #about_us .about_us .img_list{display: flex; justify-content: space-between;} #about_us .about_us .img_list>li{width: 32.5%; height: 680px; border-radius: 20px; overflow: hidden; object-position: center;} #about_us .about_us .img_list>li img{width: 100%; height: 100%; object-fit: cover;} #about_us .about_us .txt_wrap{position: relative;} #about_us .about_us .txt_wrap .dl_box{position: relative; z-index: 6;} #about_us .about_us .txt_wrap .object{position: absolute; right: -71px; bottom: -155px; z-index: 5; } #about_us .mid_wrap{height: 440px; position: relative; width: 100%; background: url(/_img/sub/aboutus_mid_bg.jpg) no-repeat center / cover;} #about_us .mid_wrap .logo_wrap{width: 340px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);} #about_us .mid_wrap .logo_wrap img{width: 100%; } #about_us .philosophy ul{display: flex; justify-content: space-between;} #about_us .philosophy ul>li{width: 49.4%;} #about_us .philosophy ul>li .img_wrap{width: 100%; height: 440px; border-radius: 20px; overflow: hidden; object-position: center;} #about_us .philosophy ul>li .img_wrap img{width: 100%; height: 100%; object-fit: cover;} #about_us .philosophy ul>li p{font-size: 20px; line-height: 1.6em; color: #000; font-weight: 500; margin-top: 10px;} #about_us .directionality .dir_list{display: flex; column-gap: 0.7%;} #about_us .directionality .dir_list>li{border-radius: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; row-gap: 30px; width: 19.7%; height: 392px;} #about_us .directionality .dir_list>li.dir1{background-color: #1C94C5;} #about_us .directionality .dir_list>li.dir2{background-color: #61C7F1;} #about_us .directionality .dir_list>li.dir3{background-color: #F9B806;} #about_us .directionality .dir_list>li.dir4{background-color: #ACAAFF;} #about_us .directionality .dir_list>li.dir5{background-color: #E260B2;} #about_us .directionality .dir_list>li .icon_wrap img{filter: drop-shadow(0 25px 20px rgba(0,0,0,0.25));} #about_us .directionality .dir_list>li p{text-align: center; color: #FFF; font-weight: 700; font-size: 20px; line-height: 1.6em;} #about_us .join{position: relative;} #about_us .join .txt_wrap{position: relative;} #about_us .join .txt_wrap .dl_box{position: relative; z-index: 2;} #about_us .join .txt_wrap .img_list{ position: absolute; right: 0; top: 230px; display: flex; column-gap: 20px; z-index: 1;} #about_us .join .txt_wrap .img_list>div{position: relative; width: 330px; height: 465px; border-radius: 20px; overflow: hidden; object-position: center;} #about_us .join .txt_wrap .img_list>div img{width: 100%; height: 100%; object-fit: cover;} #about_us .join .txt_wrap .img_list>div.img02{margin-top: 75px;} #about_us .join .join_benefit{display: flex; flex-wrap: wrap; row-gap: 20px; justify-content: space-between;} #about_us .join .join_benefit>li{width: 49%; display: flex; align-items: center; column-gap: 10px;} #about_us .join .join_benefit>li .img_wrap{width: 280px; height: 210px; overflow: hidden; border-radius: 20px; object-position: center;} #about_us .join .join_benefit>li .img_wrap img{width: 100%; height: 100%; object-fit: cover;} #about_us .join .join_benefit>li .txt_wrap{border-radius: 20px; background-color: #f8f8f8; padding: 0 30px; box-sizing: border-box; height: 210px; display: flex; flex-direction: column; justify-content: center; width: calc(100% - 290px);} #about_us .join .join_benefit>li .txt_wrap h3{font-size: 20px; font-weight: 700; color: #000; line-height: 1.6em; margin-bottom: 10px;} #about_us .join .join_benefit>li .txt_wrap p.info_txt{font-size: 18px; font-weight: 500; color: #000; line-height: 1.6em;} #about_us .join .join_benefit>li .txt_wrap p.trip_txt{font-size: 16px; font-weight: 400; color: #000; line-height: 1.6em;} @media screen and (max-width: 1800px){ #about_us .about_us .txt_wrap .object{right: 0;} } @media screen and (max-width: 1660px){ #about_us .about_us .txt_wrap .object{opacity: 0.3; bottom: 0px;} #about_us .join .txt_wrap .img_list{opacity: 0.3;} } @media screen and (max-width: 1440px){ #about_us .join .join_benefit>li{width: 100%;} } @media screen and (max-width: 1280px){ #about_us .directionality .dir_list{flex-wrap: wrap; justify-content: center; row-gap: 10px;} #about_us .directionality .dir_list>li{width: 32%;} } @media screen and (max-width: 768px){ #about_us>div{margin-bottom: 60px;} #about_us>div h2{font-size: 28px;} #about_us>div .txt_wrap dl dt{font-size: 24px;} #about_us>div .txt_wrap dl dd{font-size: 18px;} #about_us .about_us .img_list{flex-wrap: wrap; row-gap: 10px; margin-bottom: 40px;} #about_us .about_us .img_list>li{width: 49%; height: 200px;} #about_us .about_us .img_list>li:last-child{width: 100%;} #about_us .about_us .txt_wrap .object{opacity: 0.1; width: 100%; display: flex; justify-content: center;} #about_us .about_us .txt_wrap .object img{max-width: 100%;} #about_us .mid_wrap{height: 340px; background-position: 90% 50%;} #about_us .philosophy ul{flex-wrap: wrap; row-gap: 30px;} #about_us .philosophy ul>li{width: 100%;} #about_us .philosophy ul>li .img_wrap{height: 200px;} #about_us .directionality .dir_list{justify-content: space-between;} #about_us .directionality .dir_list>li{width: 100%; flex-direction: row; justify-content: left; height: auto; box-sizing: border-box; padding: 20px; column-gap: 20px;} #about_us .directionality .dir_list>li .icon_wrap{max-width: 120px;} #about_us .directionality .dir_list>li .icon_wrap img{width: 100%;} #about_us .directionality .dir_list>li p{text-align: left; font-size: 18px;} #about_us .join>.txt_wrap{display: flex; flex-direction: column;} #about_us .join>.txt_wrap .dl_box{order: 2;} #about_us .join>.txt_wrap .img_list{order: 1; opacity: 1; position: relative; top: 0; column-gap: 0; justify-content: space-between; margin-bottom: 40px;} #about_us .join .txt_wrap .img_list>div{ height: 200px; width: 49%;} #about_us .join .txt_wrap .img_list>div.img02{margin-top: 0;} #about_us .join .join_benefit>li .img_wrap{width: 20%;} #about_us .join .join_benefit>li .txt_wrap{width: calc(100% - 20%);} } @media screen and (max-width: 500px){ #about_us>div{margin-bottom: 40px;} #about_us>div h2{font-size: 18px;} #about_us>div .txt_wrap dl.m-b-60{margin-bottom: 20px;} #about_us>div .txt_wrap dl dt{font-size: 16px;} #about_us>div .txt_wrap dl dd{font-size: 14px; word-break: keep-all;} #about_us>div .txt_wrap dl dd br{display: none;} #about_us .about_us .img_list{margin-bottom: 20px;} #about_us .about_us .img_list>li{height: 150px;} #about_us .mid_wrap{height: 150px;} #about_us .mid_wrap .logo_wrap{width: 180px;} #about_us .directionality .dir_list>li .icon_wrap{width: 60px;} #about_us .directionality .dir_list>li p{font-size: 14px;} #about_us .philosophy ul>li .img_wrap{height: 150px;} #about_us .philosophy ul>li p{font-size: 14px;} #about_us .join>.txt_wrap{margin-bottom: 40px;} #about_us .join>.txt_wrap .img_list{margin-bottom: 20px;} #about_us .join .txt_wrap .img_list>div{height: 150px;} #about_us .join .join_benefit>li{flex-direction: column; row-gap: 10px;} #about_us .join .join_benefit>li .img_wrap{width: 100%; height: 150px;} #about_us .join .join_benefit>li:nth-child(3) .img_wrap{object-position: 10% 80%;} #about_us .join .join_benefit>li .txt_wrap{width: 100%; height: auto; box-sizing: border-box; padding: 20px;} #about_us .join .join_benefit>li .txt_wrap h3{font-size: 16px; margin-bottom: 5px;} #about_us .join .join_benefit>li .txt_wrap p.info_txt{font-size: 14px;} #about_us .join .join_benefit>li .txt_wrap p.trip_txt{font-size: 14px;} } /* 지놀이용방법 */ #guide .vote_discount .con_wrap{display: flex; column-gap: 32px; align-items: center; margin-top: 20px;} #guide .vote_discount .con_wrap .icon_wrap{width: 150px; height: 150px; border-radius: 20px; background-color: #f8f8f8; display: flex; align-items: center; justify-content: center;} #guide .vote_discount .con_wrap .txt_wrap{width: calc(100% - 182px);} #guide .vote_discount .con_wrap .txt_wrap h4{font-size: 24px; font-weight: 700; line-height: 1.2em; margin-bottom: 12px;} #guide .vote_discount .con_wrap .txt_wrap p{font-size: 18px; font-weight: 400; color: #444; line-height: 1.6em;} #guide .mid_wrap{position: relative; height: 440px; background: url(/_img/sub/guide_mid_bg.jpg) no-repeat center / cover; margin: 100px 0;} #guide .mid_wrap .logo_wrap{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 340px;} #guide .mid_wrap .logo_wrap img{width: 100%;} #guide .uni_guide .uni_info h3{font-size: 28px; font-weight: 700; color: #F9B806; line-height: 1.4em;} #guide .uni_guide .uni_info .con{margin-top: 40px} #guide .uni_guide .uni_info .con h4{font-size: 24px; font-weight: 700; color: #000; margin-bottom: 15px;} #guide .uni_guide .uni_info .con .grade_list{display: flex; justify-content: space-between;} #guide .uni_guide .uni_info .con .grade_list>li{width: 24.2%; border-radius: 20px; border: 1px solid #DDD; padding: 40px 30px; height: 380px; box-sizing: border-box; box-shadow: 0 5px 8px rgba(0,0,0,0.05);} #guide .uni_guide .uni_info .con .grade_list>li .list_top{display: flex; align-items: center; column-gap: 20px;} #guide .uni_guide .uni_info .con .grade_list>li .list_top .icon_wrap{width: 80px; height: 80px; border-radius: 80px; background-color: #EEE; display: flex; align-items: center; justify-content: center;} #guide .uni_guide .uni_info .con .grade_list>li .list_top .icon_wrap img{filter: drop-shadow(0 10px 5px rgba(0,0,0,0.15));} #guide .uni_guide .uni_info .con .grade_list>li .list_top h5{font-size: 24px; color: #000; line-height: 1.6em;} #guide .uni_guide .uni_info .con .grade_list>li>ul{margin-top: 20px;} #guide .uni_guide .uni_info .con .grade_list>li>ul>li{display: flex; column-gap: 10px; font-size: 16px; font-weight: 400; color: #000; line-height: 1.6em; margin-bottom: 5px;} #guide .uni_guide .uni_info .con .grade_list>li>ul>li:last-child{margin-bottom: 0;} #guide .uni_guide .uni_info .con .grade_list>li>ul>li>i{line-height: 1.8em; color: #F83131;} .about_uni .tit_wrap h3{color: #545ACE; font-size: 28px; font-weight: 700; line-height: 1.4em;} .about_uni .universe_list{display: flex; justify-content: space-between;} .about_uni .universe_list>li{position: relative; width: 32.5%; height: 680px; border-radius: 20px;} .about_uni .universe_list>li .txt_wrap{position: absolute; bottom: 40px; left: 30px; color: #FFF; width: calc(100% - 60px);} .about_uni .universe_list>li .txt_wrap .txt_tit{font-size: 24px; font-weight: 700; color: #FFF; line-height: 1.6em;} .about_uni .universe_list>li .txt_wrap p{font-size: 18px; font-weight: 400; color: #FFF; line-height: 1.6em; margin-top: 5px;} .about_uni p.txt{font-size: 20px; font-weight: 500; color: #000; line-height: 1.6em;} @media screen and (max-width: 1660px){ #guide .vote_discount .flex_wrap.flex_wrap02 .left_wrap{width: 100%;} #guide .uni_guide .uni_info .con .grade_list>li{height: 460px;} } @media screen and (max-width: 1280px){ #guide .uni_guide .uni_info .con .grade_list{flex-wrap: wrap; row-gap: 10px;} #guide .uni_guide .uni_info .con .grade_list>li{width: 49%; height: auto;} } @media screen and (max-width: 1024px){ .about_uni .universe_list{flex-wrap: wrap; row-gap: 10px;} .about_uni .universe_list>li{width: 49.4%; height: 250px;} .about_uni .universe_list>li:last-child{width: 100%;} } @media screen and (max-width: 768px){ #guide .vote_discount .con_wrap .txt_wrap h4{font-size: 20px;} #guide .vote_discount .con_wrap .txt_wrap p{font-size: 16px;} #guide .mid_wrap{height: 340px; background-position: 90% 50%;} #guide .uni_guide .uni_info h3{font-size: 20px;} #guide .uni_guide .uni_info .con .grade_list>li{width: 100%; padding: 20px;} #guide .uni_guide .uni_info .con h4{font-size: 18px;} #guide .uni_guide .uni_info .con .grade_list>li .list_top h5{font-size: 18px;} .about_uni .tit_wrap h3{font-size: 24px;} .about_uni .universe_list>li .txt_wrap{left: 20px; bottom: 20px; width: calc(100% - 40px);} .about_uni .universe_list>li .txt_wrap .txt_tit{font-size: 20px;} .about_uni .universe_list>li .txt_wrap p{font-size: 14px; margin-top: 0;} .about_uni p.txt{font-size: 16px;} } @media screen and (max-width: 500px){ #guide .vote_discount .con_wrap{column-gap: 20px; align-items: flex-start; flex-direction: column; row-gap: 20px;} #guide .vote_discount .con_wrap .icon_wrap{width: 80px; height: 80px;} #guide .vote_discount .con_wrap .icon_wrap img{width: 55%;} #guide .vote_discount .con_wrap .txt_wrap{width: 100%;} #guide .vote_discount .con_wrap .txt_wrap h4{font-size: 16px;} #guide .vote_discount .con_wrap .txt_wrap p{font-size: 14px;} #guide .mid_wrap{height: 150px; margin: 40px 0;} #guide .mid_wrap .logo_wrap{width: 180px;} #guide .uni_guide .uni_info h3{font-size: 18px;} #guide .uni_guide .uni_info .con{margin-top: 20px;} #guide .uni_guide .uni_info .con h4{font-size: 16px;} #guide .uni_guide .uni_info .con .grade_list>li .list_top h5{font-size: 16px;} #guide .uni_guide .uni_info .con .grade_list>li>ul>li{font-size: 14px; margin-bottom: 0;} .about_uni .tit_wrap h3{font-size: 18px; margin-bottom: 10px;} .about_uni .universe_list>li{width: 100%; height: 200px;} .about_uni .universe_list>li .txt_wrap .txt_tit{font-size: 16px;} .about_uni p.txt{font-size: 14px;} } /* 리뷰 */ .board_top{display: flex; align-items: flex-end; justify-content: space-between; border-bottom: 2px solid #000;} .board_top .total{display: flex; column-gap: 4px;} .board_top .total p{font-size: 16px; font-weight: 400; color: #000; line-height: 1em;} .board_top .total p span.semibold{font-weight: 600;} .board_top .form_inner{display: flex; column-gap: 5px;} .board_top .form_inner input[type="text"]{border-radius: 0; height: 48px; width: 290px;} .board_top .form_inner button{background-color: #000; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;} .board_top .form_inner button i{font-size: 24px; color: #FFF;} #review .board_top{margin-bottom: 0;} #review .border_wrap{border-bottom: 1px solid #DDD; padding: 20px; display: flex; column-gap: 20px; align-items: center; box-sizing: border-box;} #review .border_wrap>a{font-size: 16px; font-weight: 400; color: #999;} #review .border_wrap>a.active{color: #000; font-weight: 600;} #review .review_list .r_list>li>a .left_wrap .flex_wrap .txt_wrap h3{font-size: 20px; font-weight: 700; color: #000;} #review .review_list .r_list>li>a .left_wrap .flex_wrap .txt_wrap p.review{font-size: 16px; font-weight: 400; color: #000; line-height: 1.6em; margin-top: 10px; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; text-overflow: ellipsis; -webkit-box-orient: vertical;} #review .review_list .r_list>li>a .right_wrap p.writer_info{font-size: 16px; font-weight: 600; color: #000;} #review .review_list .r_list>li>a .right_wrap p.date{font-size: 14px; font-weight: 400; color: #666; line-height: 1em;} @media screen and (max-width: 768px){ .board_top{flex-direction: column; row-gap: 10px; align-items: flex-start;} #review .review_list .r_list{padding: 0;} #review .review_list .r_list>li>a .right_wrap p.writer_info{margin: 10px 0; line-height: 1em;} #review .review_list .r_list>li>a .left_wrap .flex_wrap .txt_wrap p.review{line-height: 1.4em; margin-top: 5px;} #review .review_list .r_list>li>a .left_wrap .flex_wrap .txt_wrap p.trip_name{display: none;} } @media screen and (max-width: 500px){ .board_top .total p{font-size: 14px;} .board_top .search_wrap{width: 100%;} .board_top .form_inner input[type="text"]{height: 38px; width: calc(100% - 44px);} .board_top .form_inner button{width: 38px; height: 38px;} #review .border_wrap{padding: 0px;} #review .list_box>.box_inner>.border_wrap{padding: 10px;} #review .border_wrap>a{font-size: 14px;} #review .review_list .r_list>li>a .left_wrap .flex_wrap .txt_wrap h3{font-size: 18px;} #review .review_list .r_list>li>a .left_wrap .flex_wrap .txt_wrap p.review{font-size: 14px;} } /* 블로그 리뷰 */ #review_blog{margin-bottom: 113px;} #review_blog .blog_re_list{display: flex; flex-wrap: wrap; column-gap: 1.5%; row-gap: 40px;} #review_blog .blog_re_list>li{width: 18.7777%;} #review_blog .blog_re_list>li .img_wrap{width: 100%; height: 460px; position: relative;} #review_blog .blog_re_list>li .img_wrap>a{display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 20px; background-size: cover; background-position: center; background-repeat: no-repeat;} #review_blog .blog_re_list>li .img_wrap>div{display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 20px; background-size: cover; background-position: center; background-repeat: no-repeat;} #review_blog .blog_re_list>li .txt_wrap{margin-top: 20px;} #review_blog .blog_re_list>li .txt_wrap h3{font-size: 20px; font-weight: 700; color: #000; line-height: 1.4em;} #review_blog .blog_re_list>li .txt_wrap p{font-size: 14px; font-weight: 500; color: #666; margin-top: 15px; line-height: 1em;} @media screen and (max-width: 1280px){ #review_blog .blog_re_list>li{width: 23.87%;} } @media screen and (max-width: 1024px){ #review_blog .blog_re_list{column-gap: 2%;} #review_blog .blog_re_list>li{width: 32%;} } @media screen and (max-width: 768px){ #review_blog .blog_re_list>li{width: 49%;} } @media screen and (max-width: 500px){ #review_blog{margin-bottom: 60px;} #review_blog .blog_re_list>li{width: 100%;} #review_blog .blog_re_list>li .img_wrap{height: 350px;} #review_blog .blog_re_list>li .txt_wrap{margin-top: 10px;} #review_blog .blog_re_list>li .txt_wrap h3{font-size: 16px;} #review_blog .blog_re_list>li .txt_wrap p{margin-top: 5px;} } /* 견적문의 */ .inquiry#join2 dl dd input::placeholder{color: #999;} .inquiry#join2 dl dd>div.box.tel_input1{column-gap: 0; justify-content: space-between;} .inquiry#join2 dl dd>div.box.tel_input1 select{max-width: 25%;} .inquiry#join2 dl dd>div.box.tel_input1 input{max-width: 36%;} .inquiry#join2 dl dd textarea{resize: none; width: 100%; height: 200px; border: 1px solid #DDD; border-radius: 6px; box-sizing: border-box; padding: 20px; font-family: 'Pretendard'; font-size: 16px;} .inquiry#join2 dl dd textarea::placeholder{color: #999;} .inquiry#join2 dl dd p.letter_length{font-size: 14px; font-weight: 300; color: #666; margin-top: 6px; line-height: 1em;} .inquiry#join2 dl dd select{background-position: 93% 50%;} .inquiry#join2 dl dd.add_file_wrap{display: flex; justify-content: space-between;} .inquiry#join2 dl dd.add_file_wrap input[type="text"]{width: calc(100% - 126px);} .inquiry#join2 dl dd.add_file_wrap button{width: 120px; border: 1px solid #222; color: #222; font-size: 16px; font-weight: 400; border-radius: 6px;} .inquiry .pop_complete .text1{color: #000; font-weight: 500;} .inquiry .pop_complete .btn_wrap{display: flex; column-gap: 6px; justify-content: center;} .inquiry .pop_complete .btn_wrap>a{width: 120px; border-radius: 60px; font-size: 14px; font-weight: 500; height: 42px; line-height: 42px; text-align: center;} .inquiry .pop_complete .btn_wrap>a#inquiry_complete_btn{background-color: #000; color: #FFF; font-weight: 700;} .inquiry .pop_complete .btn_wrap>a#mypage_btn{background-color: #FFF; border: 1px solid #CCC; color: #444;} @media screen and (max-width: 500px){ .inquiry#join2 dl dd.add_file_wrap input[type="text"]{width: calc(100% - 96px);} .inquiry#join2 dl dd.add_file_wrap button{font-size: 14px; width: 90px;} .inquiry#join2 dl dd textarea{font-size: 14px; padding: 15px; height: 150px;} .inquiry .pop_complete .btn_wrap>a{width: 95px; height: 35px; line-height: 35px;} }