오류가 왜 나는가 대체..
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box !important;
}
.every_car {
display: flex;
}
.all_car {
width: 100%;
overflow: hidden;
z-index: 55;
}
.window_car {
overflow: hidden;
width: 100%;
margin: 0 auto;
height: 350px;
}
.slide_button_car {
z-index: 99;
width: 40px;
height: 40px;
border-radius: 100%;
border: none;
cursor: pointer;
}
.container_car {
cursor: pointer;
width: 400%;
left: -240px;
height: 340px;
}
.cell_car {
width: 8%;
font-size: 30px;
text-decoration: none;
list-style: none;
text-align: center;
height: 340px;
border-radius: 10px;
display: inline-block;
margin: 10px 13px;
padding-top: 30px;
}
.button_car {
font-size: 20px;
height: 40px;
width: 40px;
margin-right: 20px;
cursor: pointer;
color: #7062E1;
background-color: white;
border: 1px solid #7062E1;
}
.button_car:hover {
background-color: #7062E1;
color: #ffffff;
}
.button-container_car {
display: flex;
justify-content: right;
}
/* 모바일 breakpoint max-width: npx */
@media screen and (max-width: 1400px) {
.cell_car {
width: 7.2%;
margin: 10px 8px;
height: 300px;
}
.container_car {
left: -340px;
height: 300px;
}
.window_car {
height: 300px;
}
}
@media screen and (max-width: 1000px) {
.cell_car {
width: 7.5%;
margin: 10px 10px;
height: 260px;
}
.container_car {
left: -340px;
height: 275px;
}
.window_car {
height: 280px;
}
}
@media screen and (max-width: 800px) {
.cell_car {
width: 10%;
margin: 10px 10px;
height: 260px;
}
.container_car {
left: -340px;
height: 275px;
}
.window_car {
height: 280px;
}
}
@media screen and (max-width: 600px) {
.cell_car {
width: 13%;
margin: 10px 8px;
height: 260px;
}
.container_car {
left: -340px;
height: 275px;
}
.window_car {
height: 270px;
}
}
@media screen and (max-width: 400px) {
.cell_car {
width: 15%;
height: 240px;
margin: 10px 6px;
}
.window_car {
height: 255px;
}
.container_car {
left: -110px;
height: 270px;
}
}
</style>
<!DOCTYPE html>
<html lang="">
<head>
<title>Test</title>
</head>
<body>
<div class="all_car">
<div class="button-container_car">
<button class="prev_car button_car slide_button_car"> ❮ </button>
<button class="next_car button_car slide_button_car"> ❯ </button>
</div>
<div class="window_car">
<ul class="container_car">
<li class="cell_car" onclick="openLink('https://blog.naver.com/jihae112/223170185703')" style="background-size: cover; background-image: url('https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F1bc624a7-b5d7-4ecd-bf0c-bfb75d138452%2FFrame_514969.png&blockId=839b6482-9793-4c5f-8558-f0bafc76580c');"></li>
<li class="cell_car" onclick="openLink('https://blog.naver.com/gjs05080/223347498972')" style="background-size: cover; background-image: url('https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2Fbc21212a-8a10-4606-9cb5-d48aadb20d02%2FFrame_514970.png&blockId=0cbf20b0-bb37-47ad-b9f2-1d1c331b1d34');"></li>
<li class="cell_car" onclick="openLink('https://m.blog.naver.com/iyoung23/223405362329')" style="background-size: cover; background-image: url('https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F9e769706-aa1b-46ed-b154-0e714ba412a5%2FFrame_514977.png&blockId=30528c41-9e48-4c2c-9a4e-352aaf488ea6');"></li>
<li class="cell_car" onclick="openLink('https://wannago.oopy.io/08231635-66e6-4066-b71c-faacf1efc693')" style="background-size: cover; background-image: url('https://oopy.lazyrockets.com/api/v2Fnotion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F37705230-d4d0-43a0-a82f-97811440367a%2FFrame_514978.png&blockId=16a0eade-dd2a-495b-babf-b4569f340437');"></li>
<li class="cell_car" onclick="openLink('https://wannago.oopy.io/8c594888-564a-429f-abfe-0a2b73d01c54')" style="background-size: cover; background-image: url('https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2Fda9ec4f5-3bc0-402c-ae73-18f492908bef%2FFrame_514979.png&blockId=20e34a2d-c2da-4ff5-8f7d-22f930b23f7c');"></li>
<li class="cell_car" onclick="openLink('https://wannago.oopy.io/1e5e114d-a360-4308-8e17-1630992055f1')" style="background-size: cover; background-image: url('https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2Fb7310d12-8c18-4b2e-a92c-057418f86f34%2FFrame_514980.png&blockId=cdf5430f-dc7f-4621-bb1a-b9d70ce144e2');"></li>
<li class="cell_car" onclick="openLink('https://wannago.oopy.io/ce4c77e4-2b41-40b6-b423-aac807b7db7e')" style="background-size: cover; background-image: url('https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F94f1bf8f-7ed9-483a-835d-a0a9564df63b%2FFrame_514981.png&blockId=1dc12771-87e2-448d-b377-ddc7c2d90b16');"></li>
</ul>
</div>
</div>
</body>
</html>
<script>
const container_car2 = document.querySelector(".container_car");
const prevBtn_car2 = document.querySelector(".prev_car");
const nextBtn_car2 = document.querySelector(".next_car");
let slideWidth_car2 = container_car2.clientWidth;
(function addEvent(){
prevBtn_car2.addEventListener('click', translateContainer.bind(this, 1));
nextBtn_car2.addEventListener('click', translateContainer.bind(this, -1));
})();
function translateContainer(direction){
const selectedBtn_car2 = (direction === 1) ? 'prev_car' : 'next_car';
container_car2.style.transitionDuration = '500ms';
// 현재 viewport의 너비를 기준으로 셀의 너비와 container의 너비를 설정
const viewportWidth_car2 = window.innerWidth;
let cellWidth_car2, containerWidth_car2;
if (viewportWidth_car2 >= 1400) {
cellWidth_car2 = 12; // 셀의 개수
containerWidth_car2 = 400; // container의 너비
} else if (viewportWidth_car2 >= 1000) {
cellWidth_car2 = 14;
containerWidth_car2 = 400;
} else if (viewportWidth_car2 >= 800) {
cellWidth_car2 = 10;
containerWidth_car2 = 400;
} else if (viewportWidth_car2 >= 600) {
cellWidth_car2 = 9;
containerWidth_car2 = 400;
} else if (viewportWidth_car2 >= 400) {
cellWidth_car2 = 8;
containerWidth_car2 = 400;
} else if (viewportWidth_car2 >= 0) {
cellWidth_car2 = 6;
containerWidth_car2 = 400;
}
// 변환 값을 계산하여 설정
const transformValue_car2 = direction * (100 / cellWidth_car2);
container_car2.style.transform = `translateX(${transformValue_car2}%)`;
// 변환 완료 후 셀을 재배치
container_car2.ontransitionend = () => reorganizeEl(selectedBtn_car2);
}
function reorganizeEl(selectedBtn_car2) {
container_car2.removeAttribute('style');
(selectedBtn_car2 === 'prev_car') ? container_car2.insertBefore(container_car2.lastElementChild, container_car2.firstElementChild) : container_car2.appendChild(container_car2.firstElementChild);
}
// 드래그(스와이프) 이벤트를 위한 변수 초기화
let startPoint_car2 = 0;
let endPoint_car2 = 0;
// PC 클릭 이벤트 (드래그)
container_car2.addEventListener("mousedown", (e) => {
startPoint_car2 = e.pageX; // 마우스 드래그 시작 위치 저장
});
container_car2.addEventListener("mouseup", (e) => {
endPoint_car2 = e.pageX; // 마우스 드래그 끝 위치 저장
if (startPoint_car2 < endPoint_car2) {
// 마우스가 오른쪽으로 드래그 된 경우
translateContainer(1);
} else if (startPoint_car2 > endPoint_car2) {
// 마우스가 왼쪽으로 드래그 된 경우
translateContainer(-1);
}
});
// 모바일 터치 이벤트 (스와이프)
container_car2.addEventListener("touchstart", (e) => {
startPoint_car2 = e.touches[0].pageX; // 터치가 시작되는 위치 저장
});
container_car2.addEventListener("touchend", (e) => {
endPoint_car2 = e.changedTouches[0].pageX; // 터치가 끝나는 위치 저장
if (startPoint_car2 < endPoint_car2) {
// 오른쪽으로 스와이프 된 경우
translateContainer(1);
} else if (startPoint_car2 > endPoint_car2) {
// 왼쪽으로 스와이프 된 경우
translateContainer(-1);
}
});
// 브라우저 화면이 조정될 때 마다 slideWidth를 변경하기 위해
window.addEventListener("resize", () => {
slideWidth_car2 = slide.clientWidth;
});
function openLink(url) {
window.open(url, '_blank');
}
</script>
<!-- 탭 버튼 영역 -->
<ul class="tab">
<li class="tab__item active">
<div href="#tab1">6월</div>
</li>
<li class="tab__item">
<div href="#tab2">7월</div>
</li>
<li class="tab__item">
<div href="#tab3">8월</div>
</li>
<li class="tab__item">
<div href="#tab4">9월</div>
</li>
<li class="tab__item">
<div href="#tab5">10월</div>
</li>
<li class="tab__item">
<div href="#tab6">11월</div>
</li>
<li class="tab__item">
<div href="#tab7">12월</div>
</li>
<li class="tab__item">
<div href="#tab8">마감</div>
</li>
</ul>
<!-- 탭 내용 영역 -->
<div class="tab__content-wrapper">
<div id="tab1" class="tab__content active">
<div class="collection_block jun" id="jun">
<div class="slide">
<!--6/29 라이커프라이데이 런파8(썸네일0507수정)(0514출발확정)-->
<div class="collection_card_list">
<div class="lb-wrap">
<div class="end_soon">
<h1 class="end_soon_txt">마감</br>임박</h1>
</div>
<div onclick="location.href='https://wannago.oopy.io/fbb42445-d6e2-4fc7-9729-4b335b141f0c' " class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%;"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F46ddd9d2-36cb-4c3a-b046-d65d32a058eb%2F049.png&blockId=ea1a0c65-598d-49af-9b6c-500021767215"></div></div>
<div class="card_text"><a class="tag1">유럽1주</a> <a class="tag3">마감임박</a><br><b>[8일]라이커프라이데이 런파</b><br>직장인을 위한 유럽</div>
</div>
<!--6월 중앙몽골 1주 0630 - 0703-->
<div class="collection_card_list">
<div onclick="location.href='https://yeswecan.oopy.io/59c19719-bf46-47ff-af33-794b9f6f56b4'" class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%;"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F574fd6ce-a69c-4568-8ddb-e0d6ea18d12b%2F025.jpg&blockId=6c60a8f9-ac19-4ce7-ba64-21cefe1f8017"></div>
<div class="card_text"><a class="tag1">중앙1주</a> <a class="tag8">!NEW!</a><br><b>[4일]중앙몽골 1주</b><br>사막+초원+은하수</div>
</div>
<!--6월 고비사막 1주 0630 - 0706-->
<div class="collection_card_list">
<div onclick="location.href='https://yeswecan.oopy.io/8fa6373a-a84a-49ee-8486-fa83657cd8f6'" class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%;"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F4f2bfc98-3060-4236-82d0-55c15a5f0d34%2F022.jpg&blockId=189ff620-7f54-4086-9ec5-feec1e8ae1dc"></div>
<div class="card_text"><a class="tag1">고비1주</a> <a class="tag8">!NEW!</a><br><b>[7일]고비사막 1주</b><br>런던부터 로마 2주</div>
</div>
<!--직장인설문, 02-01업데이트-->
<div class="collection_card_list">
<div onclick="location.href='https://wannago.oopy.io/gogo' " class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%;"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F7544b5b6-1d63-44b2-ae54-b4c6eb30ed6e%2FGroup_7.jpg&blockId=e01d1225-3065-467c-bce4-926285672d75"></div>
<div class="card_text"><a class="tag1">사전신청</a> <a class="tag2">설문</a><br><b>[2435직장인]</b><br>어디로 가볼까요?</div>
</div>
</div>
</div>
</div>
</div>
<div id="tab2" class="tab__content">
<div class="collection_block jly" id="jly">
<div onclick="location.href='https://wannago.oopy.io/a3a35d86-d369-4969-b132-70b42412f958'" class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100% !important;
height: 100% !important;"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F7130ac9f-5afc-4885-a5d3-b597402a068c%2F%25E1%2584%2589%25E1%2585%25A1%25E1%2586%25BC%25E1%2584%2589%25E1%2585%25A6%25E1%2584%2591%25E1%2585%25A6%25E1%2584%258B%25E1%2585%25B5%25E1%2584%258C%25E1%2585%25B5_%25E1%2584%258C%25E1%2585%25AE%25E1%2586%25BC%25E1%2584%2580%25E1%2585%25A1%25E1%2586%25AB%25E1%2584%2587%25E1%2585%25A2%25E1%2584%2582%25E1%2585%25A5.png&blockId=2d8d51eb-63b5-4779-9479-d5b9605b21e7">
</div>
<div class="slide">
<!--7월 라이커프라이데이 16 남프랑스벨기에0716-0731-->
<div class="collection_card_list">
<div onclick="location.href='https://wannago.oopy.io/f236fe9e-3668-4b60-9974-ea5cc3b752e3' " class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%;"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2Fff016361-0a14-4461-8dab-03c382d06723%2F010.jpg&blockId=b58bc3ba-b22c-4f76-805a-4d60d270b6e8"></div>
<div class="card_text"><a class="tag1">유럽2주</a> <a class="tag8">!NEW!</a><br><b>[16일]라이커프라이데이 2주</b><br>남프랑스부터 벨기에까지 2주 힐링 여행</div>
</div>
<!--7월 고비사막 1주 0718 - 0724-->
<div class="collection_card_list">
<div onclick="location.href='https://wannago.oopy.io/4f24c3b1-fc58-44e2-ba58-5a9d5548885c'" class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%;"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F3af994ad-3c62-49b3-8bdf-615dd49d82df%2F086.jpg&blockId=04e4a0fb-e7aa-4a91-919f-28136ccb780f"></div>
<div class="card_text"><a class="tag1">고비1주</a> <a class="tag8">!NEW!</a><br><b>[7일]고비사막 1주</b><br>인생에 한 번쯤은</div>
</div>
<!--7월 고비사막 1주 0703 - 0709-->
<div class="collection_card_list">
<div onclick="location.href='https://wannago.oopy.io/83c06ae4-8c8a-4120-a567-b799260eff24'" class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%;"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F93ff5a68-2796-4549-b1cd-a2be399d6efe%2F023.jpg&blockId=70a80c6f-e050-43c6-97ff-6c8f56c8ab56"></div>
<div class="card_text"><a class="tag1">고비1주</a> <a class="tag8">!NEW!</a><br><b>[7일]고비사막 1주</b><br>광활한 대자연을 즐기기</div>
</div>
<!--7월 고비사막 1주 0704 - 0710-->
<div class="collection_card_list">
<div onclick="location.href='https://wannago.oopy.io/1c111e6e-d83a-41b0-94a8-2e3c7c874d87'" class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%;"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F1f53b13a-346c-4fde-b649-a335698d4fc7%2F024.jpg&blockId=5ed6ed97-218c-4dfc-b7e5-3985f726d381"></div>
<div class="card_text"><a class="tag1">고비1주</a> <a class="tag8">!NEW!</a><br><b>[7일]고비사막 1주</b><br>은하수를 이불아</div>
</div>
<!--7/25 라이커프라이데이 올림픽 파리8 (썸네일0507수정)-->
<div class="collection_card_list">
<div onclick="location.href='https://wannago.oopy.io/d26ff491-73f9-46ab-a208-2d4455dbdfd9' " class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%;"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2Fe53a90aa-5d78-4dc2-bce4-4ba59b4aa316%2F056.png&blockId=01c408d0-6849-438f-8d57-affda434084b"></div>
<div class="card_text"><a class="tag1">파리1주</a> <a class="tag2">모집중</a><br><b>[8일]라이커프라이데이 파리</b><br>여유롭게 파리★림픽까지</div>
</div>
<!--7월직장인유럽(썸네일0507수정)-->
<div class="collection_card_list">
<div onclick="location.href='https://wannago.oopy.io/ae69c29a-4dd2-410e-b969-1542b6d73094'" class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%;"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F731d254e-b920-47cb-8f09-5e007f9d3b52%2F%25EC%258D%25B8%25EB%2584%25A4%25EC%259D%25BC%25EA%25B5%2590%25EC%25B2%25B4%25EC%259A%25A9-024.png&blockId=6390c147-6605-47e8-8712-727d64e95a24"></div>
<div class="card_text"><a class="tag1">유럽1주</a> <a class="tag10">출발확정</a><br><b>[10일]런파10일</b><br>직장인을 위한 유럽</div>
</div>
<!--7월직장인유럽(썸네일0507수정)-->
<div class="collection_card_list">
<div onclick="location.href='https://wannago.oopy.io/350ad125-a04e-4f3f-86c8-187815ea31e3'" class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%;"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F943225fa-b2c5-46f1-adf7-49795b9f0a84%2F%25EC%258D%25B8%25EB%2584%25A4%25EC%259D%25BC%25EA%25B5%2590%25EC%25B2%25B4%25EC%259A%25A9-025.png&blockId=dcde7d9e-d519-4ae5-83f1-b46ae769a829"></div>
<div class="card_text"><a class="tag1">유럽1주</a> <a class="tag10">지원증가</a><br><b>[10일]런파10일</b><br>직장인을 위한 유럽</div>
</div>
<!--7/27 라이커프라이데이 올림픽런파8(썸네일0507수정)-->
<div class="collection_card_list">
<div onclick="location.href='https://wannago.oopy.io/3f18a0f9-1124-4d01-ae3f-92fd0b8334b4' " class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%;"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2Fdef78b34-f723-469d-8e2b-8cf428e6aa3e%2F051.png&blockId=45be8f49-640a-42fc-b0b1-4528fe8f517a"></div>
<div class="card_text"><a class="tag1">유럽1주</a> <a class="tag2">모집중</a><br><b>[8일]라이커프라이데이 런파</b><br>런던부터 파리★림픽까지</div>
</div>
<!--7/30 라이커프라이데이 올림픽런파8(썸네일0507수정)-->
<div class="collection_card_list">
<div class="collection_item_bottom" onclick="location.href='https://wannago.oopy.io/f1729132-e9f1-4a39-a4ac-d1b1e0afc5cd';" style="cursor: pointer;"><img class="img_item" loading="lazy" style="width: 100%; height: 100%;"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F8ee9c156-ac88-4d8d-b945-f10eaa7cf751%2F052.png&blockId=1f07d122-c684-4e41-8ef2-6f7cb38c5ff8"></div>
<div class="card_text"><a class="tag1">유럽1주</a> <a class="tag2">모집중</a><br><b>[8일]라이커프라이데이 런파</b><br>런던부터 파리★림픽까지</div>
</div>
<!--직장인설문, 02-01업데이트-->
<div class="collection_card_list">
<div onclick="location.href='https://wannago.oopy.io/gogo' " class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%;"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F7544b5b6-1d63-44b2-ae54-b4c6eb30ed6e%2FGroup_7.jpg&blockId=e01d1225-3065-467c-bce4-926285672d75"></div>
<div class="card_text"><a class="tag1">사전신청</a> <a class="tag2">설문</a><br><b>[2435직장인]</b><br>어디로 가볼까요?</div>
</div>
<!--7/11 라이커프라이데이 마감-->
<div class="collection_card_list">
<div class="lb-wrap">
<div class="end">
<div>마감</div>
</div>
<div onclick="location.href='https://wannago.oopy.io/d8d51a06-a00e-4fc3-a083-2ac3c39fb236' " class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%; filter: brightness(0.4);"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F8091426b-e36e-4c8e-945e-3a87e74acae8%2F029.jpg&blockId=722eb94d-cf51-4484-94c6-2bea8d107771"></div></div>
<div class="card_text"><a class="tag1">파리1주</a> <a class="tag7">마감</a><br><b>[8일]라이커프라이데이 파리</b><br>느긋하게 파리 일주일</div>
</div>
<!--7/13 라이커프라이데이 런파8-->
<div class="collection_card_list">
<div class="lb-wrap">
<div class="end">
<div>마감</div>
</div> <div onclick="location.href='https://wannago.oopy.io/4ee764fa-b8ac-4ac7-8f16-6e992ca5c292' " class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%; filter: brightness(0.4);"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2Fb6c75aaf-a02c-40bf-b6e7-9e0865aa6105%2F009.jpg&blockId=baf6643a-6f6c-45d3-a879-66ca1187b171"></div></div>
<div class="card_text"><a class="tag1">유럽1주</a> <a class="tag7">마감</a><br><b>[8일]라이커프라이데이 런파</b><br>직장인을 위한 유럽</div>
</div>
<!--7/6 라이커프라이데이 런파8-->
<div class="collection_card_list">
<div class="lb-wrap">
<div class="end">
<div>마감</div></div>
<div onclick="location.href='https://wannago.oopy.io/d06ed1b5-3f73-47f7-a2ae-1ef18be7ad23' " class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%; filter: brightness(0.4);"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F2128c1d1-a459-4ce4-9b73-cb75e03485cf%2F007.jpg&blockId=dc7ba8e7-570e-4363-abb2-9fbb31eacb92"></div></div>
<div class="card_text"><a class="tag1">유럽1주</a> <a class="tag7">마감</a><br><b>[8일]라이커프라이데이 런파</b><br>직장인을 위한 유럽</div>
</div>
<!--7/23 라이커프라이데이 올림픽런파8(썸네일0507수정)-->
<div class="collection_card_list">
<div class="lb-wrap">
<div class="end">
<div>마감</div></div>
<div onclick="location.href='https://wannago.oopy.io/94f566f2-0677-4af7-8a95-50bcba5c5d50' " class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%; filter: brightness(0.4);"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F1be3c713-f210-4ee1-9ae1-c9a73c5d87e1%2F050.png&blockId=d4f9dcb1-a7a5-4cbe-a4c2-abea8539f09a"></div></div>
<div class="card_text"><a class="tag1">유럽1주</a> <a class="tag2">모집중</a><br><b>[8일]라이커프라이데이 런파</b><br>런던부터 파리★림픽까지</div>
</div>
</div></div>
</div>
<div id="tab3" class="tab__content">
<div class="collection_block aug" id="aug">
<div class="slide">
<!--8월 중앙몽골 4일 0801 - 0804-->
<div class="collection_card_list">
<div onclick="location.href='https://wannago.oopy.io/d5b56d84-7edc-4e87-a1d7-a64c9277aaab'" class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%;"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2Fad824b88-df82-4457-b813-5212de7c4e92%2F087.jpg&blockId=00cae384-c55c-42f7-9516-e557b258e228"></div>
<div class="card_text"><a class="tag1">중앙1주</a> <a class="tag8">!NEW!</a><br><b>[4일]중앙몽골</b><br>광활한 대자연을 즐기기</div>
</div>
<!--8월 중앙몽골 4일 0805 - 0808-->
<div class="collection_card_list">
<div onclick="location.href='https://wannago.oopy.io/d5b56d84-7edc-4e87-a1d7-a64c9277aaab'" class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%;"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F1b79111f-f6b4-4950-90a5-60a32910ed22%2F088.jpg&blockId=36fa3c9f-324c-4d50-89dc-0e4731a34690"></div>
<div class="card_text"><a class="tag1">중앙1주</a> <a class="tag8">!NEW!</a><br><b>[4일]중앙몽골</b><br>광활한 대자연을 즐기기</div>
</div>
<!--8/3 라이커프라이데이 올림픽런파8(썸네일0507수정)-->
<div class="collection_card_list">
<div onclick="location.href='https://wannago.oopy.io/74b65177-b692-4cb4-a777-5188ed424b97' " class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%;"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F36e620f2-d38b-40d6-8b47-2d0fb5765f16%2F053.png&blockId=73b28cf4-1a58-4685-81bf-97b9d758f60d"></div>
<div class="card_text"><a class="tag1">유럽1주</a> <a class="tag2">모집중</a><br><b>[8일]라이커프라이데이 런파</b><br>런던부터 파리★림픽까지</div>
</div>
<!--8월직장인 1주0804-0814(썸네일0514추가)-->
<div class="collection_card_list">
<div onclick="location.href='https://wannago.oopy.io/cfa1a764-b461-4b66-a793-2f1419889b3a'" class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%;"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F27943f8b-5972-4739-b8aa-d8eeb754eb5e%2F%25EB%2589%25B4_%25EC%258D%25B8%25EB%2584%25A4%25EC%259D%25BC-073_(1).jpg&blockId=6708ed88-7185-4715-af9f-b8003398d92d"></div>
<div class="card_text"><a class="tag1">유럽1주</a> <a class="tag2">모집중</a><br><b>[11일]스테이위드 1주</b><br>파리+스위스 1주일 살기</div>
</div>
<!--8/6 라이커프라이데이 올림픽런파8(썸네일0507수정)-->
<div class="collection_card_list">
<div class="collection_item_bottom" onclick="location.href='https://wannago.oopy.io/e4c2653c-570d-417f-af12-2cc425a73df3';" style="cursor: pointer;"><img class="img_item" loading="lazy" style="width: 100%; height: 100%;"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2Fca5460fc-bb25-4a40-98f0-3be1d129130a%2F054.png&blockId=b5bcc6a5-9145-404f-9a27-fe5969f7aef8"></div>
<div class="card_text"><a class="tag1">유럽1주</a> <a class="tag2">모집중</a><br><b>[8일]라이커프라이데이 런파</b><br>런던부터 파리★림픽까지</div>
</div>
<!--8/17 라이커프라이데이 런파8(썸네일0507수정)-->
<div class="collection_card_list">
<div onclick="location.href='https://wannago.oopy.io/479b72c4-0b4f-44bd-b106-b1fc8a375944';" class="collection_item_bottom" style="cursor: pointer;"><img class="img_item" loading="lazy" style="width: 100%; height: 100%;"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2Fb8f62cc4-c7a1-4f53-96e6-6f74657ecc0a%2F055.png&blockId=a4284e07-31fa-4465-b497-869edadd3ed8"></div>
<div class="card_text"><a class="tag1">유럽1주</a> <a class="tag10">출발확정</a><br><b>[8일]라이커프라이데이 런파</b><br>직장인을 위한 유럽</div>
</div>
<!--8/1 라이커프라이데이 올림픽 파리8 (썸네일0507수정)-->
<div class="collection_card_list">
<div onclick="location.href='https://wannago.oopy.io/168c4704-e3cc-4989-b7b9-31229dc7cbc6' " class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%;"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F45ec0fcc-87d2-45a3-8732-5031718b3141%2F057.png&blockId=5ddc3cf9-e7a7-4d39-b20f-fdfe477eb61c"></div>
<div class="card_text"><a class="tag1">파리1주</a> <a class="tag2">모집중</a><br><b>[8일]라이커프라이데이 파리</b><br>여유롭게 파리★림픽까지</div>
</div>
<!--8/8 라이커프라이데이 올림픽 파리8(썸네일0612수정)-->
<div class="collection_card_list">
<div onclick="location.href='https://wannago.oopy.io/587f3be8-b22e-4e8d-ad48-45ba73e90c7c' " class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%;"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F83ef11b8-cea8-4697-b7c9-e1e96ad78215%2F%25EC%258D%25B8%25EB%2584%25A4%25EC%259D%25BC%25EA%25B5%2590%25EC%25B2%25B4%25EC%259A%25A9-048.jpg&blockId=df85cf25-31d7-4790-a445-9e6bec79c2e8"></div>
<div class="card_text"><a class="tag1">파리1주</a> <a class="tag8">!NEW!</a><br><b>[8일]라이커프라이데이 파리</b><br>여유롭게 파리★림픽까지</div>
</div>
<!--라이커프라이데이 미서부10 0818-0827-->
<div class="collection_card_list">
<div onclick="location.href='https://wannago.oopy.io/fba03ace-8b3a-4819-95a0-5e4077e97540' " class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%;"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F504e0331-840e-48d5-8bd2-91cf51fa7898%2F010.jpg&blockId=f4b927af-1caf-4ac3-b978-b84304e54bcd"></div>
<div class="card_text"><a class="tag1">미서부 1주</a> <a class="tag10">지원증가</a><br><b>[10일]라이커프라이데이 미서부</b><br>캐년모음ZIP. 부터 화려한 도시까지</div>
</div>
<!--8월직장인인 2주0804-0819(썸네일0514추가)-->
<div class="collection_card_list">
<div onclick="location.href='https://wannago.oopy.io/73592003-adca-47e2-9b03-851e38fb1419'" class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%;"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F3fd3192f-3d1e-4189-9148-0777f8efb483%2F%25EB%2589%25B4_%25EC%258D%25B8%25EB%2584%25A4%25EC%259D%25BC-074_(1).jpg&blockId=3693d428-20a2-4dc4-9767-8e3bffdf9c7d"></div>
<div class="card_text"><a class="tag1">유럽2주</a> <a class="tag8">!NEW!</a><br><b>[16일]스테이위드 2주</b><br>인기 도시를 여유롭게</div>
</div>
<!--몽골 중간 페이지-->
<div class="collection_card_list">
<div onclick="location.href='https://wannago.oopy.io/09e2ee03-dfd4-4bc5-b870-a488cb5352bc'" class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%;"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F34385269-eb02-4cfd-b43f-a55b150c57f3%2F%25EC%25A0%259C%25EB%25AA%25A9%25EC%259D%2584_%25EC%259E%2585%25EB%25A0%25A5%25ED%2595%25B4%25EC%25A3%25BC%25EC%2584%25B8%25EC%259A%2594_-035.jpg&blockId=4206ef6c-3f44-45de-9eb9-a0827134b665"></div>
<div class="card_text"><a class="tag1">몽골</a> <a class="tag2">신청하기</a><br><b>중앙 고비 몽골</b><br>사막+초원+은하수</div>
</div>
<!--직장인설문, 02-01업데이트-->
<div class="collection_card_list">
<div onclick="location.href='https://wannago.oopy.io/gogo' " class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%;"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F7544b5b6-1d63-44b2-ae54-b4c6eb30ed6e%2FGroup_7.jpg&blockId=e01d1225-3065-467c-bce4-926285672d75"></div>
<div class="card_text"><a class="tag1">사전신청</a> <a class="tag2">설문</a><br><b>[2435직장인]</b><br>어디로 가볼까요?</div>
</div>
<!--8/10 라이커프라이데이 런파8-->
<!--<div class="collection_card_list">
<div class="lb-wrap">
<div class="end">
<h1>마감</h1>
</div>
<div onclick="location.href='https://wannago.oopy.io/8f4f57dd-6ba7-422b-a754-4f737ff4f944' " class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%; filter: brightness(0.4);"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F7d0ccaeb-6961-4c94-a565-a5d8bb6cef23%2F021.jpg&blockId=3dbd2deb-d216-4412-b426-28908157a380"></div></div>
<div class="card_text"><a class="tag1">유럽1주</a> <a class="tag7">마감</a><br><b>[8일]라이커프라이데이 런파</b><br>직장인을 위한 유럽</div>
</div>-->
<!--8/24 라이커프라이데이 런파8-->
<!--<div class="collection_card_list">
<div class="lb-wrap">
<div class="end">
<h1>마감</h1>
</div>
<div onclick="location.href='https://wannago.oopy.io/51ed5ff5-14f2-4a62-8366-c9ac43fc18e5' " class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%; filter: brightness(0.4);"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2Fcb25fc17-2e5d-4e99-ad8f-2f9b9893dd32%2F025.jpg&blockId=14766261-e5cb-4e38-a025-fec2cbb27f53"></div></div>
<div class="card_text"><a class="tag1">유럽1주</a> <a class="tag7">마감</a><br><b>[8일]라이커프라이데이 런파</b><br>직장인을 위한 유럽</div>
</div>-->
<!--8/31 라이커프라이데이 런파8-->
<!--<div class="collection_card_list">
<div class="lb-wrap">
<div class="end">
<h1>마감</h1>
</div>
<div onclick="location.href='https://wannago.oopy.io/f892e480-958a-446d-8edd-1bce78c25345' " class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%; filter: brightness(0.4);"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F4994fe66-3c1a-4d4c-bd60-ff6a3fa4354f%2F027.jpg&blockId=a7b9162e-62ad-4eba-97ed-6070b25df8c3"></div></div>
<div class="card_text"><a class="tag1">유럽1주</a> <a class="tag7">마감</a><br><b>[8일]라이커프라이데이 런파</b><br>직장인을 위한 유럽</div>
</div>-->
</div></div>
</div>
<div id="tab4" class="tab__content">
<div class="collection_block sep" id="sep">
<div class="slide">
<!--라이커런파8 0921-0928 (5/9오픈)-->
<div class="collection_card_list">
<div onclick="location.href='https://wannago.oopy.io/aad0abb4-67dd-4e85-a739-e1876c1834c1' " class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%;"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F082ef713-f2e4-4aca-a0dc-8921f6c43a05%2F043.jpg&blockId=03030356-103d-4643-86cc-5b52b13e0c72"></div>
<div class="card_text"><a class="tag1">유럽1주</a> <a class="tag8">!NEW!</a><br><b>[8일]런던파리 1주</b><br>직장인 일주일 힐링 유럽</div>
</div>
<!--라이커미서부10일 0927-1006 (5/9출발)-->
<div class="collection_card_list">
<div onclick="location.href='https://wannago.oopy.io/7483d398-34b9-4c56-880c-4b987e9278ae' " class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%;"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F8b32e637-e926-4ea4-9696-2ddacdaf1927%2F063.jpg&blockId=7e472bfe-aee7-49cb-97d5-0dad6bad570a"></div>
<div class="card_text"><a class="tag1">미국1주</a> <a class="tag8">!NEW!</a><br><b>[10일]미서부 1주</b><br>2435 직장인들과 가을 미서부</div>
</div>
<!--몽골 중간 페이지-->
<div class="collection_card_list">
<div onclick="location.href='https://wannago.oopy.io/09e2ee03-dfd4-4bc5-b870-a488cb5352bc'" class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%;"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F34385269-eb02-4cfd-b43f-a55b150c57f3%2F%25EC%25A0%259C%25EB%25AA%25A9%25EC%259D%2584_%25EC%259E%2585%25EB%25A0%25A5%25ED%2595%25B4%25EC%25A3%25BC%25EC%2584%25B8%25EC%259A%2594_-035.jpg&blockId=4206ef6c-3f44-45de-9eb9-a0827134b665"></div>
<div class="card_text"><a class="tag1">몽골</a> <a class="tag2">신청하기</a><br><b>중앙 고비 몽골</b><br>사막+초원+은하수</div>
</div>
<!--직장인설문, 02-01업데이트-->
<div class="collection_card_list">
<div onclick="location.href='https://wannago.oopy.io/gogo' " class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%;"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F7544b5b6-1d63-44b2-ae54-b4c6eb30ed6e%2FGroup_7.jpg&blockId=e01d1225-3065-467c-bce4-926285672d75"></div>
<div class="card_text"><a class="tag1">사전신청</a> <a class="tag2">설문</a><br><b>[2435직장인]</b><br>어디로 가볼까요?</div>
</div>
<!--라이커런파8 0907-0914 (5/9오픈)-->
<!--<div class="collection_card_list">
<div class="lb-wrap">
<div class="end">
<h1>마감</h1>
</div>
<div onclick="location.href='https://wannago.oopy.io/76422a22-889e-4845-87d5-71c58a0f0e2f' " class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%; filter: brightness(0.4);"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F9c12b941-b60d-4320-8362-b3b3e5ecf379%2F039.jpg&blockId=1d8319d9-1d22-4449-a996-3f3d4f34a214"></div></div>
<div class="card_text"><a class="tag1">유럽1주</a> <a class="tag7">마감</a><br><b>[8일]런던파리 1주</b><br>일주일 힐링 유럽여행</div>
</div>-->
<!--라이커런파8 0914-0921 (5/9오픈)-->
<!--<div class="collection_card_list">
<div class="lb-wrap">
<div class="end">
<h1>마감</h1>
</div>
<div onclick="location.href='https://wannago.oopy.io/9d01e0ed-03c9-4803-8a96-30de551c427d' " class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%; filter: brightness(0.4);"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F18480f2e-5c75-47ef-85c4-efdd547ee41f%2F041.jpg&blockId=5a9bd047-1343-4c0f-8c84-fba7d26b0349"></div></div>
<div class="card_text"><a class="tag1">유럽1주</a> <a class="tag7">마감</a><br><b>[8일]런던파리 1주</b><br>추석연휴 일주일 힐링 유럽</div>
</div>-->
<!--라이커파리8 0926-1003 (5/9오픈) (5/24 썸네일교체)-->
<div class="collection_card_list">
<div class="lb-wrap">
<div class="end">
<div>마감</div>
</div>
<div onclick="location.href='https://wannago.oopy.io/346fefd9-1937-476b-b714-12f83bbb5021' " class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%; filter: brightness(0.4);"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2Fae11bc9a-1cb7-42a8-8a48-a3c9bf5d3e8d%2F%25EB%2589%25B4_%25EC%258D%25B8%25EB%2584%25A4%25EC%259D%25BC-055.jpg&blockId=13fe2ffc-8e3f-47c3-b13a-e2460670491a"></div></div>
<div class="card_text"><a class="tag1">유럽1주</a> <a class="tag7">마감</a><br><b>[8일]파리 1주</b><br>직장인을 위한 일주일 파리</div>
</div>
<!--라이커런파8 0928-1005 (5/9오픈)-->
<div class="collection_card_list">
<div class="lb-wrap">
<div class="end">
<div>마감</div>
</div>
<div onclick="location.href='https://wannago.oopy.io/48052f6e-0b02-43cb-9ac2-8ac40a0ff672' " class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%; filter: brightness(0.4);"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2Fd796aeb9-5f53-4246-b1b4-8ddc17925e23%2F045.jpg&blockId=a9102885-2e29-4edc-b65b-ac6d0c95f6b8"></div></div>
<div class="card_text"><a class="tag1">유럽1주</a> <a class="tag7">마감</a><br><b>[8일]런던파리 1주</b><br>직장인 일주일 힐링 유럽</div>
</div>
</div></div>
</div>
<div id="tab5" class="tab__content">
<div class="collection_block auc" id="oct">
<div class="slide">
<!--라이커미서부10일 1018-1027(5/22오픈)-->
<div class="collection_card_list">
<div onclick="location.href='https://wannago.oopy.io/9e61dd60-3996-462d-9d4f-c77356164d73' " class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%;"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2Fb1db8d35-9364-4109-a74c-d67aadb92eb7%2F065.jpg&blockId=df2a6a4e-20b1-4b23-88b0-558695221c9e"></div>
<div class="card_text"><a class="tag1">미국1주</a> <a class="tag8">!NEW!</a><br><b>[10일]미서부 1주</b><br>2435 직장인들과 가을 미서부</div>
</div>
<!--라이커뉴욕9일 1026-1027(5/22오픈)-->
<div class="collection_card_list">
<div onclick="location.href='https://wannago.oopy.io/6213bb5b-d444-4818-bdb5-5f37161e0f09' " class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%;"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2Fa66fe059-8c00-4e2c-8ab8-a3761fc63fd1%2F067.jpg&blockId=02bd47ae-3276-4056-ba25-534a27ae9452"></div>
<div class="card_text"><a class="tag1">미국1주</a> <a class="tag8">!NEW!</a><br><b>[9일]뉴욕 1주</b><br>할로윈 시즌 일주일 뉴욕</div>
</div>
<!--몽골 중간 페이지-->
<div class="collection_card_list">
<div onclick="location.href='https://wannago.oopy.io/09e2ee03-dfd4-4bc5-b870-a488cb5352bc'" class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%;"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F34385269-eb02-4cfd-b43f-a55b150c57f3%2F%25EC%25A0%259C%25EB%25AA%25A9%25EC%259D%2584_%25EC%259E%2585%25EB%25A0%25A5%25ED%2595%25B4%25EC%25A3%25BC%25EC%2584%25B8%25EC%259A%2594_-035.jpg&blockId=4206ef6c-3f44-45de-9eb9-a0827134b665"></div>
<div class="card_text"><a class="tag1">몽골</a> <a class="tag2">신청하기</a><br><b>중앙 고비 몽골</b><br>사막+초원+은하수</div>
</div>
<!--직장인설문, 02-01업데이트-->
<div class="collection_card_list">
<div onclick="location.href='https://wannago.oopy.io/gogo' " class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%;"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F7544b5b6-1d63-44b2-ae54-b4c6eb30ed6e%2FGroup_7.jpg&blockId=e01d1225-3065-467c-bce4-926285672d75"></div>
<div class="card_text"><a class="tag1">사전신청</a> <a class="tag2">설문</a><br><b>[2435직장인]</b><br>어디로 가볼까요?</div>
</div>
</div></div>
</div>
<div id="tab6" class="tab__content">
<div class="collection_block nov" id="nov">
<div class="slide">
<!--라이커뉴욕10일 1122-1201(5/22오픈)-->
<div class="collection_card_list">
<div onclick="location.href='https://wannago.oopy.io/a4f44826-1279-4142-90b9-d7c00da28c33' " class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%;"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F2ef0014f-ab66-4de3-a75d-0acda0c511d9%2F069.jpg&blockId=7cbfeb48-ada4-4901-bc1e-709fb33cd3ee"></div>
<div class="card_text"><a class="tag1">미국1주</a> <a class="tag8">!NEW!</a><br><b>[10일]뉴욕 1주</b><br>블랙프라이데이 뉴욕 일주일!</div>
</div>
<!--몽골 중간 페이지-->
<div class="collection_card_list">
<div onclick="location.href='https://wannago.oopy.io/09e2ee03-dfd4-4bc5-b870-a488cb5352bc'" class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%;"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F34385269-eb02-4cfd-b43f-a55b150c57f3%2F%25EC%25A0%259C%25EB%25AA%25A9%25EC%259D%2584_%25EC%259E%2585%25EB%25A0%25A5%25ED%2595%25B4%25EC%25A3%25BC%25EC%2584%25B8%25EC%259A%2594_-035.jpg&blockId=4206ef6c-3f44-45de-9eb9-a0827134b665"></div>
<div class="card_text"><a class="tag1">몽골</a> <a class="tag2">신청하기</a><br><b>중앙 고비 몽골</b><br>사막+초원+은하수</div>
</div>
<!--직장인설문, 02-01업데이트-->
<div class="collection_card_list">
<div onclick="location.href='https://wannago.oopy.io/gogo' " class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%;"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F7544b5b6-1d63-44b2-ae54-b4c6eb30ed6e%2FGroup_7.jpg&blockId=e01d1225-3065-467c-bce4-926285672d75"></div>
<div class="card_text"><a class="tag1">사전신청</a> <a class="tag2">설문</a><br><b>[2435직장인]</b><br>어디로 가볼까요?</div>
</div>
</div>
</div>
</div>
<div id="tab7" class="tab__content">
<div class="collection_block nov" id="dec">
<div class="slide">
<!--몽골 중간 페이지-->
<div class="collection_card_list">
<div onclick="location.href='https://wannago.oopy.io/09e2ee03-dfd4-4bc5-b870-a488cb5352bc'" class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%;"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F34385269-eb02-4cfd-b43f-a55b150c57f3%2F%25EC%25A0%259C%25EB%25AA%25A9%25EC%259D%2584_%25EC%259E%2585%25EB%25A0%25A5%25ED%2595%25B4%25EC%25A3%25BC%25EC%2584%25B8%25EC%259A%2594_-035.jpg&blockId=4206ef6c-3f44-45de-9eb9-a0827134b665"></div>
<div class="card_text"><a class="tag1">몽골</a> <a class="tag2">신청하기</a><br><b>중앙 고비 몽골</b><br>사막+초원+은하수</div>
</div>
<!--직장인설문, 02-01업데이트-->
<div class="collection_card_list">
<div onclick="location.href='https://wannago.oopy.io/gogo' " class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%;"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F7544b5b6-1d63-44b2-ae54-b4c6eb30ed6e%2FGroup_7.jpg&blockId=e01d1225-3065-467c-bce4-926285672d75"></div>
<div class="card_text"><a class="tag1">사전신청</a> <a class="tag2">설문</a><br><b>[2435직장인]</b><br>어디로 가볼까요?</div>
</div>
</div></div>
</div>
<div id="tab8" class="tab__content">
<div class="collection_block nov" id="end">
<div class="slide">
<!--3월직장인런파9일 마감-->
<div class="collection_card_list">
<div class="lb-wrap">
<div class="end">
<div>마감</div>
</div>
<div onclick="location.href='https://wannago.oopy.io/9cb4b83c-793f-428d-a893-84b713e8bd24' " class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%; filter: brightness(0.4);"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F461e5e88-c5e8-4c8f-b535-97cb8ca330cd%2F3%25E1%2584%2585%25E1%2585%25A1_%25E1%2584%2585%25E1%2585%25A5%25E1%2586%25AB%25E1%2584%2591%25E1%2585%25A1%25E1%2584%2589%25E1%2585%25A6-min.jpg&blockId=f6db5ec1-173c-4819-8bf2-6c01e3af7810"></div></div>
<div class="card_text"><a class="tag1">유럽1주</a> <a class="tag7">마감</a><br><b>[9일]런던파리</b><br>직장인을 위한 유럽</div>
</div>
<!--4월직장인동유럽 마감(썸네일02.05수정)-->
<div class="collection_card_list">
<div class="lb-wrap">
<div class="end">
<div>마감</div>
</div>
<div onclick="location.href='https://wannago.oopy.io/7b7ba589-b191-44bc-b11b-0639df15e2bf' " class="collection_item_bottom">
<img class="img_item" loading="lazy" style="width: 100%; height: 100%; vertical-align: middle; filter: brightness(0.4);"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2Fbfa2b520-88a9-48b7-9679-caac502c5481%2F032-min.jpg&blockId=a4ec4ec9-f17b-48ec-b66b-9710489a35d1">
</div>
</div>
<div class="card_text"><a class="tag1">런파9일</a> <a class="tag7">마감</a><br><b>[9일]런던파리</b><br>직장인을 위한 유럽</div>
</div>
<!--직장인 4월 스페인 마감-->
<div class="collection_card_list">
<div class="lb-wrap">
<div class="end">
<div>마감</div>
</div>
<div onclick="location.href='https://wannago.oopy.io/25c8610c-c635-4730-bf3e-9630f192b086' " class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%;filter: brightness(0.4);"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F62c8223d-f01b-45f0-abbc-e09af243461b%2F4%25E1%2584%2585%25E1%2585%25A1_%25E1%2584%2589%25E1%2585%25B3%25E1%2584%2591%25E1%2585%25A6%25E1%2584%258B%25E1%2585%25B5%25E1%2586%25AB%25E1%2584%2589%25E1%2585%25A6-min.jpg&blockId=bdd96ef3-f4f5-443d-9d49-8bb98975c3f3"></div></div>
<div class="card_text"><a class="tag1">스페인1주</a> <a class="tag7">마감</a><br><b>[10일]스페인</b><br>4/6연휴스페인여행</div>
</div>
<!--4월미서부직장인 마감-->
<div class="collection_card_list">
<div class="lb-wrap">
<div class="end">
<div>마감</div>
</div>
<div onclick="location.href='https://wannago.oopy.io/1a71031e-f43f-4d53-8f51-f2544a466af8' " class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%; filter: brightness(0.4);"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F3d4f03fb-0b94-4f93-90a6-6c121241cb50%2F4%25E1%2584%2585%25E1%2585%25A1_%25E1%2584%2586%25E1%2585%25B5%25E1%2584%2589%25E1%2585%25A5%25E1%2584%2587%25E1%2585%25AE%25E1%2584%2589%25E1%2585%25A6-min.jpg&blockId=20052731-81ff-4313-acbd-17fdf25d1ce6"></div></div>
<div class="card_text"><a class="tag1">미서부1주</a> <a class="tag7">마감</a><br><b>[10일]미서부</b><br>5/5연휴 미국여행</div>
</div>
<!--6/27 라이커프라이데이 파리8-->
<div class="collection_card_list">
<div class="lb-wrap">
<div class="end">
<div>마감</div>
</div>
<div onclick="location.href='https://wannago.oopy.io/2f46b5d1-6c70-4c9a-b491-4e509cc5f57e' " class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%;filter: brightness(0.4);"
src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F59b17c26-1599-4580-8af8-cbfb676c645d%2F005.jpg&blockId=f3572423-d1eb-4f24-9c3a-83bbb7601faa"></div></div>
<div class="card_text"><a class="tag1">파리1주</a> <a class="tag2">!NEW!</a><br><b>[8일]라이커프라이데이 파리</b><br>느긋하게 파리 일주일</div>
</div>
</div></div>
</div>
<style>
a {
text-decoration: none;
color: inherit;
}
.tab {
display: flex;
align-items: center;
padding: 1rem;
}
.tab__item {
background-color: whitesmoke;
font-weight: 500;
cursor: pointer;
padding: 10px 20px;
margin: 6px;
position: relative;
font-size: 12px;
color: #7062E1;
border-radius: 4px;
border: 0 solid #5841D7;
float: left;
list-style: none;
}
.tab__item.active {
display: inline-block;
background-color: #712EFF;
color: white;
font-weight: bold;
}
.tab__content-wrapper {
padding: 1rem
}
.tab__content {
display: none;
}
.tab__content.active {
display: block;
}
</style>
<script>
// 1. 탭 버튼과 탭 내용 부분들을 querySelectorAll을 사용해 변수에 담는다.
const tabItem = document.querySelectorAll(".tab__item");
const tabContent = document.querySelectorAll(".tab__content");
// 2. 탭 버튼들을 forEach 문을 통해 한번씩 순회한다.
// 이때 index도 같이 가져온다.
tabItem.forEach((item, index) => {
// 3. 탭 버튼에 클릭 이벤트를 준다.
item.addEventListener("click", (e) => {
// 4. 버튼을 a 태그에 만들었기 때문에,
// 태그의 기본 동작(링크 연결) 방지를 위해 preventDefault를 추가한다.
e.preventDefault(); // a
// 5. 탭 내용 부분들을 forEach 문을 통해 한번씩 순회한다.
tabContent.forEach((content) => {
// 6. 탭 내용 부분들 전부 active 클래스를 제거한다.
content.classList.remove("active");
});
// 7. 탭 버튼들을 forEach 문을 통해 한번씩 순회한다.
tabItem.forEach((content) => {
// 8. 탭 버튼들 전부 active 클래스를 제거한다.
content.classList.remove("active");
});
// 9. 탭 버튼과 탭 내용 영역의 index에 해당하는 부분에 active 클래스를 추가한다.
// ex) 만약 첫번째 탭(index 0)을 클릭했다면, 같은 인덱스에 있는 첫번째 탭 내용 영역에
// active 클래스가 추가된다.
tabItem[index].classList.add("active");
tabContent[index].classList.add("active");
});
});
</script>
<style>
a {
text-decoration: none;
color: inherit;
}
.tab {
display: flex;
align-items: center;
padding: 1rem;
}
.tab__item {
background-color: whitesmoke;
font-weight: 500;
cursor: pointer;
padding: 10px 20px;
margin: 6px;
position: relative;
font-size: 12px;
color: #7062E1;
border-radius: 4px;
border: 0 solid #5841D7;
float: left;
list-style: none;
}
.tab__item.active {
display: inline-block;
background-color: #712EFF;
color: white;
font-weight: bold;
}
.tab__content-wrapper {
padding: 1rem
}
.tab__content {
display: none;
}
.tab__content.active {
display: block;
}
</style>
<script>
// 1. 탭 버튼과 탭 내용 부분들을 querySelectorAll을 사용해 변수에 담는다.
const tabItem = document.querySelectorAll(".tab__item");
const tabContent = document.querySelectorAll(".tab__content");
// 2. 탭 버튼들을 forEach 문을 통해 한번씩 순회한다.
// 이때 index도 같이 가져온다.
tabItem.forEach((item, index) => {
// 3. 탭 버튼에 클릭 이벤트를 준다.
item.addEventListener("click", (e) => {
// 4. 버튼을 a 태그에 만들었기 때문에,
// 태그의 기본 동작(링크 연결) 방지를 위해 preventDefault를 추가한다.
e.preventDefault(); // a
// 5. 탭 내용 부분들을 forEach 문을 통해 한번씩 순회한다.
tabContent.forEach((content) => {
// 6. 탭 내용 부분들 전부 active 클래스를 제거한다.
content.classList.remove("active");
});
// 7. 탭 버튼들을 forEach 문을 통해 한번씩 순회한다.
tabItem.forEach((content) => {
// 8. 탭 버튼들 전부 active 클래스를 제거한다.
content.classList.remove("active");
});
// 9. 탭 버튼과 탭 내용 영역의 index에 해당하는 부분에 active 클래스를 추가한다.
// ex) 만약 첫번째 탭(index 0)을 클릭했다면, 같은 인덱스에 있는 첫번째 탭 내용 영역에
// active 클래스가 추가된다.
tabItem[index].classList.add("active");
tabContent[index].classList.add("active");
});
});
</script>
<style>
/*마감*/
.end{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white; /* 버튼 텍스트 색상 */
font-size: 24px !important; /* 버튼 텍스트 크기 */
font-weight: bold; /* 버튼 텍스트 굵기 */
text-align: center; /* 텍스트 가운데 정렬 */
z-index: 1; /* 이미지 위에 텍스트 표시 */
}
/* 전체 */
.collection_block {
display: flex;
flex-direction: column !important;
}
/* 왼쪽 태그 */
.tag1 {
background-color: #ffffff !important;
border: solid #7B5AF1 1px!important;
color: #7B5AF1 !important;
border-radius: 4px;
padding: 2px 8px;
}
/* 보라 */
.tag2 {
background-color: #F2EFFF !important;
color: #7B5AF1 !important;
border-radius: 4px;
padding: 2px 8px;
}
/* 마감임박 빨강 */
.tag3 {
white-space: nowrap;
background-color: #FFEDE4 !important;
color: #FA0100 !important;
border-radius: 4px;
padding: 2px 8px;
}
/* 프로그램 비교, 보라노랑 */
.tag4 {
background-color: #856EFF !important;
color: #FFD058 !important;
border-radius: 4px;
padding: 4px 8px;
}
/* 프로그램 비교, 회색보라 */
.tag5 {
background-color: #ECECEC !important;
color: #5841D7 !important;
border-radius: 4px;
padding: 3px 8px;
}
/* 프로그램 비교, 노랑빨강 */
.tag6 {
background-color: #FBE699 !important;
color: #FF0000 !important;
border-radius: 4px;
padding: 2px 8px;
}
/* 마감 회색 */
.tag7 {
background-color: #ECECEC !important;
color: #777777 !important;
border-radius: 4px;
padding: 2px 8px;
}
/* 노란색 */
.tag8 {
background-color: #FFFBEC !important;
color: #FF9900 !important;
border-radius: 4px;
padding: 2px 8px;
}
/* 하늘색 */
.tag9 {
background-color: #C2E2FF !important;
color: #0085FF !important;
border-radius: 4px;
padding: 2px 8px;
}
/* 주황색 */
.tag10 {
background-color: #FFF0DE !important;
color: #FF5C00 !important;
border-radius: 4px;
padding: 2px 8px;
}
/* 마감 */
.end_soon {
padding: 8px 14px 8px 14px !important;
border: 2px solid black;
border-radius: 100px;
position: absolute;
top: 88%;
left: 80%;
transform: translate(-50%, -50%);
color: white;
background-color:#ED5742;
font-size: 15px !important; /* 버튼 텍스트 크기 */
font-weight: bold; /* 버튼 텍스트 굵기 */
text-align: center; /* 텍스트 가운데 정렬 */
z-index: 1; /* 이미지 위에 텍스트 표시 */
line-height: 16px;
font-weight: bold;
text-align: center;
justify-content:center;
align-items: center;
z-index: 1;
}
.lb-wrap {
position: relative;
width: 100%;
}
/* 1줄 */
.slide {
display: grid;
position: relative;
width: 100%;
height: 100%;
grid-template-columns: repeat(4, 1fr);
column-gap: 12px;
padding-top: 16px;
padding-bottom: 4px;
margin: 0 auto;
}
.end_soon_txt{
white-space:nowrap;
padding: 0px !important;
margin:0px !important;
line-height: 16px !important;
text-align: center;
justify-content: center;
align-items: center;
}
/* 이미지 */
.img_item {
width: 100%;
height: auto; /* Fixed height for all images */
object-fit: cover;
}
.img_item:hover {
filter: brightness(0.8);
}
/* 카드 리스트 */
.collection_card_list {
width: 100%;
display: flex;
flex-direction: column !important;
align-items: center;
}
/* 아이템 하단 */
.collection_item_bottom {
display: block !important;
overflow: hidden;
transition: background 100ms ease-out;
position: relative !important;
cursor: pointer;
background-color: white;
border: none;
}
/*텍스트박스*/
.card_text {
width: 100%;
padding: 3px;
white-space: pre-line;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
line-height: 20px;
}
/* 미디어 쿼리 */
@media screen and (max-width: 800px) {
.slide {
grid-template-columns: repeat(3, 1fr);
}
.end_soon {
padding: 0px 15px 0px 15px;
border: 2px solid black;
border-radius: 100px;
position: absolute;
top: 80%;
left: 80%;
transform: translate(-50%, -50%);
color: white;
background-color:#ED5742;
font-weight: bold; /* 버튼 텍스트 굵기 */
text-align: center; /* 텍스트 가운데 정렬 */
z-index: 1; /* 이미지 위에 텍스트 표시 */
line-height: 16px !important;
font-weight: bold;
text-align: center;
}
}
@media screen and (max-width: 600px) {
.slide {
grid-template-columns: repeat(2, 1fr);
}
.end_soon {
padding: 0px 12px 0px 12px;
border: 2px solid black;
border-radius: 100px;
position: absolute;
top: 80%;
left: 80%;
transform: translate(-50%, -50%);
color: white;
background-color:#ED5742;
font-weight: bold; /* 버튼 텍스트 굵기 */
text-align: center; /* 텍스트 가운데 정렬 */
z-index: 1; /* 이미지 위에 텍스트 표시 */
line-height: 16px;
font-weight: bold;
text-align: center;
z-index: 1;
}
.end_soon_txt{
white-space:nowrap;
padding: 0px !important;
line-height: 16px !important;
font-size: 6px !important; /* 버튼 텍스트 크기 */
}
}
.doz_sys h1{
font-size: 12px !important; /* 버튼 텍스트 크기 */
}
.end {
font-size: 12px;
}
.card_text {
font-size: 11px;
}
</style>
HTML
복사
