@charset "utf-8";

.contents { padding-top: 130px; }
.section-product,
.section-review,
.section-notice { overflow: hidden; }
.main-vis { position: relative; }
.main-vis .deco { width: 38%; position: absolute; top:0px; left:50%; transform: translate(-50%,-40%); max-width: fit-content; }
.main-vis .main-vis-mark { position: absolute; width: 100%; height: 100%; left:0px; top:0px; pointer-events: none; }
.main-vis .main-vis-mark > * { pointer-events: initial; }
.main-vis .main-vis-mark a { display: block; width: 12px; height: 12px; background:#DA4646; border-radius: 50%; position: absolute; font: 400 17px 'Jua'; }
.main-vis .main-vis-mark a p { min-width:50px; padding:6px 7px 5px; position: absolute; left:50%; top:-20px; transform: translate(-50%, -100%); background:#15AA80; border-radius: 6px; color:white; box-shadow: var(--box-shadow); text-align: center; }
.main-vis .main-vis-mark a p::after { content: ''; position: absolute; left:50%; bottom:0px; transform: translate(-50%, 100%); border:8px solid transparent; border-top: 14px solid #15AA80; }
.main-vis .main-vis-mark .okinawa { left:10%; top:79%; }
.main-vis .main-vis-mark .fukuoka { left:28%; top:56%; }
.main-vis .main-vis-mark .hiroshima { left:35%; top:51%; }
.main-vis .main-vis-mark .osaka { left:47%; top:56%; }
.main-vis .main-vis-mark .nagoya { left:50%; top:57%; }
.main-vis .main-vis-mark .kyoto { left:50%; top:50%; }
.main-vis .main-vis-mark .nara { left:53%; top:60%; }
.main-vis .main-vis-mark .tokyo { left:62%; top:60%; }
.main-vis .main-vis-mark .hokkaido { left:76%; top:24%; }
.main-vis .main-vis-mark .osaka p,
.main-vis .main-vis-mark .fukuoka p { top:auto; bottom:-20px; transform: translate(-50%, 100%); }
.main-vis .main-vis-mark .osaka p::after,
.main-vis .main-vis-mark .fukuoka p::after { border-top:none; border-bottom: 14px solid #15AA80; bottom:auto; top:0px; transform: translate(-50%, -100%); }

.product-a-list { padding:30px 2px 32px; display: grid; grid-template-columns: 141px auto; align-items: center; gap:60px; border-bottom:2px solid #FAFAFA; }
.product-a-list p { font-size: 17px; font-weight: 600; }
.product-a-list ul { display: flex; flex-wrap:wrap; gap:20px 40px; font-size: 16px; font-weight: 500; }
.product-a-list .prepare a { color:#888; filter: saturate(0) brightness(1.2); }
.product-a-list a span { display: inline-block; margin-right: 2px; }
.product-a-list a span.okinawa::before { content: '🏖'; }
.product-a-list a span.fukuoka::before {  content: '🍣'; }
.product-a-list a span.hiroshima::before { content: '🎏'; }
.product-a-list a span.osaka::before { content: '🌸'; }
.product-a-list a span.nagoya::before { content: '🏯'; }
.product-a-list a span.tokyo::before { content: '🗼'; }
.product-a-list a span.hokkaido::before { content: '⛄'; }

/* 공통 */
.h3-wrap { margin-bottom: 32px; font-size: 22px ;font-weight: 600; }
.h3-wrap span { display: inline-block; padding-left: 3px; }
.h3-wrap .h3-sub { margin-top: 8px; font-size: 16px; font-weight: 400; color:var(--sub-black); }
.view-total-list { display: flex; justify-content: center; align-items: center; padding-top: 1px; margin:16px auto 0; width: 320px; height:48px; border:1px solid #DDD; border-radius: 8px;  color:#666666; font-size: 15px; font-weight: 500; transition: 0.3s ease-out; }
.view-total-list:hover { background:#FAFAFA; border-color:var(--sub-color); }
.mob-ver { display: none; }

/* 일본버스 일일투어 BEST */
.section-product { padding-top: 60px; position: relative; }
.section-product ::-webkit-scrollbar { height: 4px; }
.section-product ::-webkit-scrollbar-thumb { max-height:5px; background-color: var(--bg-color); border-radius: 2px; }
.section-product ::-webkit-scrollbar-track { background: #FAFAFA; border-radius: 2px;}
.section-product .product-list-wrap { overflow: hidden; cursor: url('/resources/img/main/drag.png') 14 12, e-resize; } 
.section-product .product-list-wrap ul { width: fit-content; }
.section-product .product-list-wrap li { width: 264px; }
.section-product .product-list-wrap .swiper-scrollbar { position: relative; width: 100%; left:0px; bottom:0px; background:#FAFAFA; }
.section-product .product-list-wrap .swiper-scrollbar .swiper-scrollbar-drag { background:var(--sub-color); }
.section-product .product-img { width: 100%; padding-bottom: 100%; border-radius: 16px; overflow: hidden; position: relative; }
.section-product .product-img > img { width: 100%; height: 100%; position: absolute; object-fit: cover; }
.section-product .product-title { margin-top: 16px; font-size: 17px; font-weight: 500; line-height: 125%; }
.section-product .product-price { margin-top: 8px; font-size: 22px; font-weight: 700; line-height: 125%; color:var(--sub-color); }
.section-product .product-price span { display: inline-block; margin-right: 2px; }
.section-product .product-hashtag { margin-top: 16px; margin-bottom: 38px; color:#666666; font-size: 14px; font-weight: 400; line-height: 125%; }
.section-product .swiper-navi { display: flex; justify-content: space-between; width: 68px; height: 24px; position: absolute; right: 0; top: 78px; }
.section-product .swiper-navi .swiper-arr { width: 22px; height: 100%; background: url('/resources/img/main/ico_best_arr.svg') no-repeat center/contain; cursor: pointer; opacity: 1; }
.section-product .swiper-navi .swiper-arr.swiper-arr-prev { }
.section-product .swiper-navi .swiper-arr.swiper-arr-next { transform: rotate(180deg); }
@media screen and (max-width: 658px){
	.section-product .swiper-navi .swiper-arr { opacity: 0; }
}

/* 파란버스투어 이용후기 */
.section-review { padding-top: 96px; }
.section-review .review-list { overflow: hidden; }
.section-review .review-list .swiper-slide { cursor: url('/resources/img/main/drag.png') 14 12, e-resize; }
.section-review .review-list .swiper-pagination { display: flex; justify-content: center; gap:5px; position: relative; margin:24px auto; }
.section-review .review-list .swiper-pagination .swiper-pagination-bullet { width:5px; height:5px; background:rgba(0,0,0,0.7); opacity: 1; }
.section-review .review-list .swiper-pagination .swiper-pagination-bullet-active { width: 12px; height: 5px; border-radius: 5px; background:var(--sub-color); }
.section-review .review-list .swiper-slide > li { padding:24px; background:#FAFAFA; position: relative; margin-bottom: 16px; }
.section-review .review-list .swiper-slide > li img { cursor: pointer; }
.section-review .review-list .swiper-slide > li.active .review-text { display: block; }
.section-review .review-list .swiper-slide > li.active .review-bot { display: flex; }
.section-review .review-list .swiper-slide > li.active .view-reivew { display: none; }
.section-review .review-top { display: grid; gap:16px; grid-template-columns: 128px auto 120px;}
.section-review .review-title { margin-bottom: 37px; max-width:640px; font-size: 17px; font-weight: 500; line-height: 125%; }
.section-review .review-text { max-width:640px; font-size: 16px; font-weight: 400; line-height: 125%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.section-review .review-img { padding-bottom: 100%; position: relative; }
.section-review .review-img img { width: 100%; height: 100%; object-fit: cover; position: absolute; left:0px; top:0px; }

.section-review .review-bot { display: none; margin-top: 40px; justify-content: space-between; align-items: end; text-align: right; }
.section-review .review-bot > ul { display: grid; grid-template-columns: repeat(5, 1fr); gap:8px; }
.section-review .review-bot > ul li { width: 48px; }
.section-review .review-bot .review-info > ul { display: flex; margin-top: 12px; color:#666666; font-size: 14px; }
.section-review .review-bot .review-info li:not(:last-child) { margin-right: 12px; padding-right: 12px; position: relative; }
.section-review .review-bot .review-info li:not(:last-child)::after { content: ''; width: 1px; height: 14px; position: absolute; top:50%; right:0px; transform: translateY(-50%); background:#666666; }
.section-review .review-bot button { width:24px; height:24px; margin-left: 8px; text-indent: -9999px; overflow: hidden; }
.section-review .review-bot button.delete { background:url('/resources/img/common/ico_delete.svg') }
.section-review .review-bot button.edit { background:url('/resources/img/common/ico_edit.svg') }
.section-review .view-reivew { position: absolute; left:168px; bottom:24px; font-weight: 500; font-size: 16px; line-height: 135%; padding-right: 24px; }
.section-review .view-reivew::after { position: absolute; top:50%; transform: translateY(-50%); right:0px; content: ''; width: 20px; height:20px; background:url('/resources/img/common/ico_drop_down.svg') no-repeat center/contain; }
.section-review .no-img { filter:saturate(0); opacity: 0.6; }
.score { text-align: right; }
.score .star { display: inline-block; width: 18px; height: 18px; background: url('/resources/img/sub/star1.png') no-repeat center/contain; }
.score .star.star_half { background: url('/resources/img/sub/star0.5.png') no-repeat center/contain; transform: translateY(1px); }
.score .star.star0 { background: url('/resources/img/sub/star0.png') no-repeat center/contain; }
	/* 리뷰 전체보기 모달 */
	.pop-box-cont:has(.entire-review-list) { max-height:calc(100vh - 120px); padding:40px 40px 30px; }
	.entire-review-list { text-align: left; }
	.entire-review-list > ul > li { padding:24px; background:#FAFAFA; position: relative; margin-bottom: 16px; border: 1px solid var(--bg-color); border-radius: 8px; }
	.entire-review-list > ul > li img { cursor: pointer; }
	.entire-review-list > ul > li.active .review-text { display: block; }
	.entire-review-list > ul > li.active .review-bot { display: flex; }
	.entire-review-list > ul > li.active .view-reivew { display: none; }
	.entire-review-list .review-top { display: grid; gap:16px; grid-template-columns: 128px auto 120px;}
	.entire-review-list .review-title { margin-bottom: 37px; max-width:640px; font-size: 17px; font-weight: 500; line-height: 125%; }
	.entire-review-list .review-text { max-width:640px; font-size: 16px; font-weight: 400; line-height: 125%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

	.entire-review-list .review-bot { display: none; margin-top: 40px; justify-content: space-between; align-items: end; text-align: right; }
	.entire-review-list .review-bot > ul { display: grid; grid-template-columns: repeat(4, 1fr); gap:8px; }
	.entire-review-list .review-bot > ul li { width: 48px; }
	.entire-review-list .review-bot .review-info > ul { display: flex; margin-top: 12px; color:#666666; font-size: 14px; }
	.entire-review-list .review-bot .review-info li:not(:last-child) { margin-right: 12px; padding-right: 12px; position: relative; }
	.entire-review-list .review-bot .review-info li:not(:last-child)::after { content: ''; width: 1px; height: 14px; position: absolute; top:50%; right:0px; transform: translateY(-50%); background:#666666; }
	.entire-review-list .review-bot button { width:24px; height:24px; margin-left: 8px; text-indent: -9999px; overflow: hidden; }
	.entire-review-list .review-bot button.delete { background:url('/resources/img/common/ico_delete.svg') }
	.entire-review-list .review-bot button.edit { background:url('/resources/img/common/ico_edit.svg') }
	.entire-review-list .view-reivew { position: absolute; left:168px; bottom:24px; font-weight: 500; font-size: 16px; line-height: 135%; padding-right: 24px; }
	.entire-review-list .view-reivew::after { position: absolute; top:50%; transform: translateY(-50%); right:0px; content: ''; width: 20px; height:20px; background:url('/resources/img/common/ico_drop_down.svg') no-repeat center/contain; }
	.entire-review-list .no-img { filter:saturate(0); opacity: 0.6; }
	/* 페이지네이션 */
	.pagination { width:100%; display:inline-block; margin: 12px auto 0; text-align: center; }
	.pagination ul { display: flex; justify-content: center; }
	.pagination button, .pagination a {	width: 26px; height: 30px; margin: 0 2px; color: #5d6473; font-size: 13px; line-height: 30px; font-weight:400; display: inline-block; text-decoration: none; vertical-align: middle; }
	.pagination button:hover, .pagination a:hover { text-decoration:underline;}
	.pagination .active { color: white; background-color: var(--main-black); font-weight: 500;}
	.pagination .active a { color:white; }
	.pagination .prev,.pagination .next, .pagination .p-prev,.pagination .n-next{ width: 26px;height: 26px; transition:.3s ease-in-out; background-image: url("/resources/img/common/page-arrow.png"); background-repeat: no-repeat; border: 1px solid white; text-indent: -999em;	vertical-align: middle;}
	.pagination .p-prev {background-position: -8px 5px;}
	.pagination .prev {background-position: -59px 5px;}
	.pagination .next { background-position: -109px 5px;}
	.pagination .n-next {background-position: -159px 5px;}
	.pagination .prev:hover,.pagination .next:hover , .pagination .p-prev:hover,.pagination .n-next:hover{	background-color: transparent;	border-color:  #4d4d4d;}
	@media screen and (max-width: 768px){
		.pagination a { margin:0; width:24px; font-size:14px;}
		.pagination .prev, .pagination .next, .pagination .p-prev, .pagination .n-next { width:24px;}
		.pagination .p-prev { background-position: -8px 15px;}
		.pagination .prev { background-position: -61px 15px;}
		.pagination .next {background-position: -110px 15px;}
		.pagination .n-next { background-position: -160px 15px;}
	}
	@media screen and (max-width: 500px){
		.section-review .review-bot > ul li { width: 46px; }
	}

/* 전체보기 클릭 */
/* .view-entire .swiper-wrapper { display: block; }
.view-entire .swiper-pagination { display: none !important; }
.view-entire + .view-total-list { display: none !important; } */

/* 파란트래블에서 알려드려요. */
.section-notice { padding-top: 52px; padding-bottom: 80px; }
.section-notice ul { display: grid; grid-template-columns: repeat(1, 1fr); gap:4px; }
.section-notice li a { display: grid; grid-template-columns: auto 90px;; justify-content: space-between; padding: 24px 32px; background: #FAFAFA; border-radius: 8px; font-size: 16px; font-weight: 500; }
.section-notice li .title { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.section-notice li .date { font-size: 15px; font-weight: 400; text-align: right; color:#666666; }


/* 비밀번호 체크 팝업 */
#password-modal p { margin-top: 16px; text-align: left; font-size: 19px; font-weight: 500; }
#password-modal #rv_pass { display: block; width: 100%; margin:24px auto 8px; border:none; background:#FAFAFA; padding:12px; }
#password-modal .pop-box-inner { max-width:500px; }

@media screen and (max-width:1024px){
	.product-a-list { gap:40px; }
	.product-a-list ul { gap: 14px 30px; }
}
@media screen and (max-width:900px){
	.product-a-list ul { gap: 30px 20px; }
}
@media screen and (max-width:768px){
	.contents { padding-top: 90px; }
	.main-vis .main-vis-mark a { width: 8px; height: 8px; font-size: 14px; }
	.product-a-list { grid-template-columns: repeat(1, 1fr); gap:24px; }

	.section-review .review-top { display: block; }
	.section-review .review-img { width: 96px; height:96px; padding-bottom: 0; }
	.section-review .score { position: absolute; top:24px; left:136px; }
	.section-review .review-title { width: 100%; position: absolute; left:0px; top:56px; padding-left:136px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
	.section-review .review-text { margin-top: 16px; }
	.section-review .view-reivew { position: relative; margin-top: 16px; left:0px; bottom:0px; }
	.section-review .review-bot { flex-wrap:wrap; }
	.section-review .review-bot > div { width: 100%; display: flex; align-items: center; justify-content: space-between; flex-direction: row-reverse; }
	.section-review .review-bot button { width: 20px; height: 20px; background-size: 20px !important; }
}
@media screen and (max-width:658px){
	.section-product .product-list-wrap ul { display: grid; grid-template-columns: repeat(2, 1fr); gap:20px; }
	.section-product .product-list-wrap li { width: 100%; }
	.section-product .product-img { height: 192px; }
	.section-product .product-img img { height: 100%; object-fit: cover; object-position: center; }
	.section-product .product-hashtag { margin-bottom: 26px; }
	.section-product .product-title { font-size: 15px; }
	.section-product .product-price { font-size: 19px; }
	.section-product .product-hashtag { font-size: 13px; }

	.h3-wrap { margin-bottom: 24px; font-size: 19px; }
	.h3-wrap .h3-sub { margin-top: 12px; font-size: 14px; }
}
@media screen and (max-width:500px){
	.pc-ver { display: none; }
	.mob-ver { display: block; }
	.main-vis .deco { width: 100%; }
	.main-vis .main-vis-mark a { width: 6px; height: 6px; font-size: 12px; }
	.main-vis .main-vis-mark a p { min-width: 40px; padding:4px 5px 2px; top:-10px; }
	.main-vis .main-vis-mark a p::after { border:5px solid transparent; border-top: 8px solid #15AA80; }
	.main-vis .main-vis-mark .osaka p, 
	.main-vis .main-vis-mark .fukuoka p { bottom:-10px; }
	.main-vis .main-vis-mark .osaka p::after,
	.main-vis .main-vis-mark .fukuoka p::after { border-bottom:8px solid #15AA80; }

	.main-vis .main-vis-mark .okinawa { left:6%; top:88%; }
	.main-vis .main-vis-mark .fukuoka { left:21%; top:64%; }
	.main-vis .main-vis-mark .hiroshima { left:35%; top:58%; }
	.main-vis .main-vis-mark .osaka { left:51%; top:57%; }
	.main-vis .main-vis-mark .nagoya { left:54%; top:58%; }
	.main-vis .main-vis-mark .kyoto { left:53%; top:53%; }
	.main-vis .main-vis-mark .nara { left:61%; top:57%; }
	.main-vis .main-vis-mark .tokyo { left:74%; top:53%; }
	.main-vis .main-vis-mark .hokkaido { left:82%; top:23%; }

	.product-a-list ul { display: grid; grid-template-columns: repeat(3, 1fr); }
	.section-product { padding-top: 40px; }
	.section-review { padding-top: 60px; }

	.section-notice li .date { text-align: left; }
	.section-notice li a { grid-template-columns: repeat(1, 1fr); gap: 12px; padding:20px; }
}
@media screen and (max-width:430px){
	.section-product .product-list-wrap ul { grid-template-columns: repeat(1, 1fr); }
	.section-product .product-img { height: 220px; }
}