@import url('./common.css');

.pro_wrap img {display: block; width:100%;}
.close:after {background-color: transparent;}
.slide_content {position: static !important; background-color: transparent !important;}

/*--------------------------------------------------------------------------------
	# 공통 - 유의사항
---------------------------------------------------------------------------------*/
.pro_wrap .note_wrap div button {width: 90%; height: 12.9412vw; border: 1px solid red}

/*--------------------------------------------------------------------------------
	# 공통 - pagination
---------------------------------------------------------------------------------*/fmodal
.pro_wrap .swiper-pagination {position: static !important; margin-top: 1.4rem !important;}

/*--------------------------------------------------------------------------------
	# visual
---------------------------------------------------------------------------------*/
.pro_wrap .pro_main .btn_wrap a {position: absolute; display: block; width: 50px; height: 50px; border: 1px solid blue}

/* 1 - 단독특전 */
.pro_wrap .pro_main .btn_wrap a:nth-of-type(1) {left: 22.7vw; bottom: 49.4vw; width: 28.2353vw; height: 36.7059vw; transform: rotate(-27deg);}
/* 2 - 럭키드로우 */
.pro_wrap .pro_main .btn_wrap a:nth-of-type(2) {left: 0; bottom: 34.8282vw; width: 28.2353vw; height: 36.7059vw; border-radius: 13vw;}
/* 3 - 타임세일 */
.pro_wrap .pro_main .btn_wrap a:nth-of-type(3) {left: 33vw; bottom: 26.5vw; width: 28.4vw; height: 28.4vw; border-radius: 100%;}
/* 4 - 여행특가 */
.pro_wrap .pro_main .btn_wrap a:nth-of-type(4) {right: 2.1vw; bottom: 36.5vw; width: 28.2353vw; height: 36.7059vw; transform: rotate(353deg);}
/* 5 - 항공특가 */
.pro_wrap .pro_main .btn_wrap a:nth-of-type(5) {left: 8.6835vw; bottom: 0; width: 28.2576vw; height: 36.7059vw}
/* 5 - 호텔특가 */
.pro_wrap .pro_main .btn_wrap a:nth-of-type(6) {right: 28.2vw; bottom: 4.8vw; width: 25.74vw; height: 25.74vw; transform: rotate3d(0.1, 2.1, 0, 37deg) rotate(225deg);}
/* 6 - 이벤트 */
.pro_wrap .pro_main .btn_wrap a:nth-of-type(7) {right: 0.7vw; bottom: 0; width: 28.2353vw; height: 36.7059vw; transform: rotate(11deg); border-radius: 13vw;}


/*--------------------------------------------------------------------------------
	# 플로팅
---------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------
	# �뚮줈��
---------------------------------------------------------------------------------*/
.pro_wrap .floating_menu {position: absolute; }
.pro_wrap .floating_menu.ulFixed {position: fixed;  top: 0; z-index: 5; }
/*
.pro_wrap .floating_menu {position: absolute; max-width: 850px;}
/* .pro_wrap .floating_menu ul{display: flex; margin: 0 auto; width: fit-content; } */
/* .pro_wrap .floating_menu ul li {cursor: pointer; width: 100px; height: 100%;} */
.pro_wrap .floating_menu ul li img.menu_active {display: none;}

.pro_wrap .floating_menu ul li.tabSelect > img {display: none;}
.pro_wrap .floating_menu ul li.tabSelect > .menu_active {display: block;} */

.floating_menu {
	height: 250px;
	line-height: 250px;
	overflow: hidden;
}
.floating_menu::-webkit-scrollbar{
  display:none;
}
.floating_menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
	font-size: 50px;
}
.floating_menu ul li {
	float: left;
	width: 227px;
	height: 100%;
	margin: 0 1px 0 0;
	padding: 0;
	color: #ddd;
	text-align: center;
	cursor: pointer;
}

.floating_menu ul li ul li ul li, .activetop>a {color: red; font-weight: 600;}
.floating_menu ul li ul li ul li, .activetop>a:after {content: ""; display: block; width:100%; border-bottom: 2px solid red; margin: 15px 0px 0px 0px;}

/*--------------------------------------------------------------------------------
	# pro_content_1 - section_1
---------------------------------------------------------------------------------*/
.pro_wrap .pro_content_1 .section_1 {background-color: #fef3f1;}

.pro_wrap .pro_content_1 .section_1 .slide_container1 {top: 55.7647vw; width: 90%;}
.pro_wrap .pro_content_1 .section_1 .slide_container2 {top: 179.8824vw; width:100%; height: fit-content;}
.pro_wrap .pro_content_1 .section_1 .slide_container2 .swiper {overflow: visible;}


.pro_wrap .pro_content_1 .section_1 .slide_container .swiper-pagination {position: relative; margin-top: 1.8rem}
.pro_wrap .pro_content_1 .section_1 .slide_container .swiper-pagination-bullet {background: #ddd !important; opacity: 1;}
.pro_wrap .pro_content_1 .section_1 .slide_container .swiper-pagination-bullet-active {background: #00A1EC !important}

.pro_wrap .pro_content_1 .section_1 .discount_btn {position: absolute; left: 50%; bottom: 20vw; transform: translateX(-50%) !important; width: 58.8235vw}
.pro_wrap .pro_content_1 .section_1 .discount_btn img {width: 100%; cursor: pointer;}
.pro_wrap .pro_content_1 .section_1 .discount_btn .dis_show {display: none;}

.pro_wrap .pro_content_1 .section_1 .btn_down {position: absolute; left: 50%; transform: translateX(-50%); bottom: 17.6471vw; width: 69.4118vw; height: 13.5294vw; cursor: pointer; border: 1px solid red}

/*--------------------------------------------------------------------------------
	# pro_content_2 - section_3
---------------------------------------------------------------------------------*/
.pro_wrap .pro_content_2 .section_3 .slide_container {top: auto; bottom: 34.4706vw; width: 94% !important}
.pro_wrap .pro_content_2 .section_3 .container_center .swiper-pagination-bullet-active {background: #DCFA23;}
.pro_wrap .pro_content_2 .section_3 .slide_container .swiper {overflow: visible;}
.pro_wrap .pro_content_2 .section_3 .slide_container .swiper .swiper-scrollbar {margin: 22px auto 0; position: static !important; width: 78%; height: 4.5px !important; border-radius: 30px; background: #ddd}
.pro_wrap .pro_content_2 .section_3 .slide_container .swiper .swiper-scrollbar-drag {top: -6px; width: 18px !important; height: 18px; border-radius: 100%; background-color: #00A1EC; filter: drop-shadow(2px 3px 8px #00000033);}
/* 전체경품 모달 */
.pro_wrap .pro_content_2 .section_3 .modal{z-index: 9999; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: #00000081; display: flex; align-items: center; justify-content: center; display: none;}
.pro_wrap .pro_content_2 .section_3 .modal.on {display: flex;}

.pro_wrap .pro_content_2 .section_3 .modal .modal_content {padding: 1.8rem 2rem 1.5rem; max-width: 94vw; background-color: #fff; border-radius: 20px;}
.pro_wrap .pro_content_2 .section_3 .modal .modal_content .modal_header {padding-bottom: 1.4rem; font-size: 1.5rem; font-family: 'Pretendard'; font-weight: bold;  text-align: center; color: #000; border-bottom: 1px solid rgba(204, 204, 204, 0.40);}
.pro_wrap .pro_content_2 .section_3 .modal .modal_content .modal_body {margin: 1.5rem 0; max-height: 60vh; overflow-y: scroll;}
.pro_wrap .pro_content_2 .section_3 .modal .modal_content .modal_footer {text-align: center;}
.pro_wrap .pro_content_2 .section_3 .modal .modal_content .modal_footer .modal_close{display: inline-block; width: 42%; height: 4.5rem; border-radius: 30px; background-color: #000; color: #fff;font-family: 'OmniGothic';font-size: 1.3rem;font-style: normal;font-weight: 400; cursor: pointer}
.pro_wrap .pro_content_2 .section_3 .modal_open {z-index: 1; position: absolute; left: 50%; bottom: 5.4%; transform: translateX(-50%); width: 47%; height: 2.1%; background-color: transparent; cursor: pointer; border: 1px solid red}

/*--------------------------------------------------------------------------------
	# pro_content_4 - section_3
---------------------------------------------------------------------------------*/
.pro_wrap .pro_content_3 .section_3 {background-color: #ddf1ee;}
.pro_wrap .pro_content_3 .section_3 .slide_container {top: 19.6%; width: 100%;}
.pro_wrap .pro_content_3 .section_3 .slide_container .swiper-pagination {position: relative; margin-top: 1.8rem}
.pro_wrap .pro_content_3 .section_3 .slide_container .swiper-pagination .swiper-pagination-bullet {background: #808281; opacity: 1;}
.pro_wrap .pro_content_3 .section_3 .slide_container .swiper-pagination .swiper-pagination-bullet-active {background: #218a79;}

.pro_wrap .pro_content_3 .section_3 .btn_wrap {position: absolute; left: 50%; top: 52.74%; transform: translateX(-50%); width: 60%; height: 5.4%;}
.pro_wrap .pro_content_3 .section_3 .btn_wrap a {display: block; width: 100%; height: 100%;}

.pro_wrap .schedule_container {padding-bottom: 4%; width: 100%; background-color: #fff;}
.pro_wrap .schedule_container .schedule_days {display: flex; margin: 0 auto; width: 90%; height: 10vw;}
.pro_wrap .schedule_container .schedule_days p{padding: 3% 0; width: 100%; text-align: center; font-family: 'OmniGothic'; font-size: 4vw;}
          
/*--------------------------------------------------------------------------------
	# pro_content_4 - section_4
---------------------------------------------------------------------------------*/
.pro_wrap .pro_content_3 .section_4 #timeGoodsContainer {background-color: #005DA5;}
.pro_wrap .pro_content_3 .section_4 #timeGoodsContainer .inner {margin: 0 auto; width: 90vw;}
.pro_wrap .pro_content_3 .section_4 #timeGoodsContainer .goodsMenu ul {display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.3529vw;}
.pro_wrap .pro_content_3 .section_4 #timeGoodsContainer .goodsMenu ul li {position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1.6471vw; height: 16.2353vw;  border-radius: 10px; background-color: #074d83;}
.pro_wrap .pro_content_3 .section_4 #timeGoodsContainer .goodsMenu ul li .week {padding: 1vw 2.5vw; display: flex; justify-content: center; align-items: center; font-size: 2.8235vw;; font-weight: 600; border-radius: 20px; color: #FFFFFF4D; background-color: #035594;}
.pro_wrap .pro_content_3 .section_4 #timeGoodsContainer .goodsMenu ul li .weekDate {font-size: 3.5294vw; font-weight: 500; color:#FFFFFF4D}

.pro_wrap .pro_content_3 .section_4 #timeGoodsContainer .goodsMenu ul li.active {background-color: #fff;}
.pro_wrap .pro_content_3 .section_4 #timeGoodsContainer .goodsMenu ul li.active .week {background-color: #005DA5; color: #fff;}
.pro_wrap .pro_content_3 .section_4 #timeGoodsContainer .goodsMenu ul li.active .weekDate {color: #005DA5; }

.pro_wrap .pro_content_3 .section_4 #timeGoodsContainer .goodsMenu ul li.active_before,
.pro_wrap .pro_content_3 .section_4 #timeGoodsContainer .goodsMenu ul li.active_after {position: relative;}
.pro_wrap .pro_content_3 .section_4 #timeGoodsContainer .goodsMenu ul li.active_before::before,
.pro_wrap .pro_content_3 .section_4 #timeGoodsContainer .goodsMenu ul li.active_after::before {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: 50%; background-position: center; background-repeat: no-repeat; cursor: auto;}
.pro_wrap .pro_content_3 .section_4 #timeGoodsContainer .goodsMenu ul li.active_before::before {background-image: url('https://img1.onlinetour.co.kr/2024/event/bigevent/0923_travel_oncefe_test/0927/images/mo/con4/tab_closed.png');}
.pro_wrap .pro_content_3 .section_4 #timeGoodsContainer .goodsMenu ul li.active_after::before {background-image: url('https://img1.onlinetour.co.kr/2024/event/bigevent/0923_travel_oncefe_test/0927/images/mo/con4/tab_coming_soon.png');}


/* 상품 리스트 */
.goodsList {display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.3529vw; margin-top: 8.2353vw;}
.goodsList > li {position: relative; min-height: 64.9412vw; height: auto; border-radius: 2.3529vw; background-color: #fff; overflow: hidden;}

.goodsList.comming_soon > li::before,
.goodsList > li.sold_out::before {z-index: 1; content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8);}
.goodsList > li.sold_out::after { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; content: ''; display: block; width: 100%; height: 100%; background-image: url('https://img1.onlinetour.co.kr/2024/event/bigevent/0923_travel_oncefe_test/0927/images/mo/con4/Sold_Out.png'); background-size: 50%; background-position: center; background-repeat: no-repeat; cursor: auto;}  
.goodsList.comming_soon > li::after { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; content: ''; display: block; width: 100%; height: 100%; background-image: url('https://img1.onlinetour.co.kr/2024/event/bigevent/0923_travel_oncefe_test/0927/images/mo/con4/Coming_Soon.png'); background-size: 73%; background-position: center; background-repeat: no-repeat; cursor: auto;}  

.goodsList > li .good_img {position: relative; height: 36.4706vw;}
.goodsList > li .good_img img {display: block; width: 100%; height: 100%; object-fit: cover;}
.goodsList > li .good_img .badge {position: absolute; right: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 11.8824vw; height: 10.5882vw; border-radius: 6px 0 0 0; background-color: #F351BF; color: #fff; font-weight: 600; font-size: 3.5294vw; letter-spacing: -0.2353vw; line-height: 4.823vw;}
.goodsList > li .good_img .badge span {display: block; font-size: 2.8235vw; letter-spacing: 0px; line-height: 2.8235vw;}
.goodsList > li .good_info {padding: 3vw 3vw 13vw; font-family: 'Pretendard Variable'; height: calc(100% - 36.4706vw);}
/* .goodsList > li .good_info .good_name {margin-bottom: 10px; font-size: 20px; font-weight: 600;  overflow: hidden; display: block; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 22.8px;} */
.goodsList > li .good_info .good_name {margin-bottom: 10px; font-size: 3.5294vw; font-weight: 600;  overflow: hidden; display: block;}
.goodsList > li .good_info .good_desc {font-size: 16px; font-weight: 500; line-height: 1.3;}

.goodsList > li .good_info .goods_wonga {position: absolute; left: 3vw; bottom: 8vw; font-size: 2.5882vw; color: #00000066; text-decoration: line-through;}
.goodsList > li .good_info .good_price {position: absolute; left: 3vw; bottom: 2vw; color: #EE67C3; font-weight: 700; font-size: 4.4706vw; letter-spacing:-1px;}
.goodsList > li .good_link {position: absolute; left: 0; top: 0; width: 100%; height: 100%;;}

/*--------------------------------------------------------------------------------
	# pro_content_5 - section_5
---------------------------------------------------------------------------------*/
.pro_wrap .pro_content_4 .section_5 {padding-top: 66vw; background: #fff; padding-bottom: 17.6471vw; background-repeat: no-repeat; background-size: contain; background-position: top;}

/* �� - 硫붾돱 */
.pro_wrap .pro_content_4 .section_5 > .tab_container > .tab_wrap01 > .menu_wrap {overflow-x: scroll; overflow-y: hidden; scrollbar-width: none;}
.pro_wrap .pro_content_4 .section_5 > .tab_container > .tab_wrap01 > .menu_wrap::-webkit-scrollbar {
	display: none; /* Chrome, Safari, Opera*/
} 
.pro_wrap .pro_content_4 .section_5 > .tab_container > .tab_wrap01 > .menu_wrap > .tab_menu {display: flex; justify-content: center; flex-wrap: wrap; gap: 1.1765vw;}
.pro_wrap .pro_content_4 .section_5 > .tab_container > .tab_wrap01 > .menu_wrap > .tab_menu li {position: relative; height: 10.5882vw; border: 1px solid #fff; border-radius: 100px; background-color: #00A7F5;}
.pro_wrap .pro_content_4 .section_5 > .tab_container > .tab_wrap01 > .menu_wrap > .tab_menu li button {position: relative; display: block; padding: 0 4.7059vw; background-color: transparent;color: #fff; font-size: 3.5294vw; font-weight: 600; line-height: 10.5882vw; cursor: pointer;}

/* �� - 而⑦뀗痢�(�곹뭹) */
.pro_wrap .pro_content_4 .section_5 .tab_container .tab_wrap01 .tab_content {padding-top: 6.8235vw; margin: 0 auto; width: 89.4118vw; }
.pro_wrap .pro_content_4 .section_5 .tab_container .tab_wrap01 .tab_content li {display: none;}
.pro_wrap .pro_content_4 .section_5 .tab_container .tab_wrap01 .tab_content li .goods_item{display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 2.3529vw; row-gap: 11.7647vw;}
.pro_wrap .pro_content_4 .section_5 .tab_container .tab_wrap01 .tab_content li .goods_item a {position: relative; display: block; border-radius: 1.1765vw;
 overflow: hidden;}
.pro_wrap .pro_content_4 .section_5 .tab_container .tab_wrap01 .tab_content li .goods_item a.sold_out::before {z-index: 1; content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgb(255 255 255 / 70%);}
.pro_wrap .pro_content_4 .section_5 .tab_container .tab_wrap01 .tab_content li .goods_item a.sold_out::after {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; content: ''; display: block; width: 100%; height: 100%; background-image: url('https://img1.onlinetour.co.kr/2024/event/bigevent/0923_travel_oncefe_test/0927/images/mo/con5/soldout.png'); background-size: 50%; background-position: center 43%; background-repeat: no-repeat; cursor: auto;} 
.pro_wrap .pro_content_4 .section_5 .tab_container .tab_wrap01 .tab_content li .goods_item a img {display: block;}
.pro_wrap .pro_content_4 .section_5 .tab_container .tab_wrap01 .tab_content li .goods_item a .price {position: absolute; left: 1.1765vw; bottom: -0.8235vw; color: #EE67C3; font-weight: 700; font-size: 4.4706vw; letter-spacing:-0.25vw; font-family: 'SUIT'; font-weight: 900;}
.pro_wrap .pro_content_4 .section_5 .tab_container .tab_wrap01 .tab_content li .goods_item a .price span {font-family: 'Pretendard Variable'; font-weight: 700; letter-spacing: -0.25vw;}

.pro_wrap .pro_content_4 .section_5 > .tab_container > .tab_wrap01 > .menu_wrap > .tab_menu > li.tabOn {background-color: #FBFA16; border: none}
.pro_wrap .pro_content_4 .section_5 > .tab_container > .tab_wrap01 > .menu_wrap > .tab_menu > li.tabOn button{color: #00A1EC}
.pro_wrap .pro_content_4 .section_5 .tab_container .tab_wrap01 .tab_content li.tabOn {display: block;}
.pro_wrap .pro_content_4 .section_5 .tab_container .tab_wrap01 .tab_content li.tabOn button {border: 1px solid #FBFA16}


/*--------------------------------------------------------------------------------
	# pro_content_5 - section_7
---------------------------------------------------------------------------------*/
.pro_wrap .pro_content_5 .section_7 .btn_wrap {position: absolute; left: 50%; top: 54.2353vw; transform: translateX(-50%); width: 71%; height: 13.5294vw;}
.pro_wrap .pro_content_5 .section_7 .btn_wrap a {display: block; width: 100%; height: 100%;}

/*--------------------------------------------------------------------------------
	# pro_content_6 - section_8
---------------------------------------------------------------------------------*/
.pro_wrap .pro_content_6 .section_8 {background-color: #fff;}
.pro_wrap .pro_content_6 .section_8 .btn_wrap {position: absolute; left: 50%; top: 66.5vw; transform: translateX(-50%); width: 71%; height: 13.5294vw;}
.pro_wrap .pro_content_6 .section_8 .btn_wrap a {display: block; width: 100%; height: 100%;}
.pro_wrap .pro_content_6 .section_8 .goods_btn {display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 2.3529vw; row-gap: 11.7647vw; margin: -14vw auto 8.2353vw; width: 89.4118vw}
.pro_wrap .pro_content_6 .section_8 .goods_btn a {position: relative; display: block; border: 1px solid red}
.pro_wrap .pro_content_6 .section_8 .goods_btn a .price {position: absolute; left: 1.1765vw; bottom: -1vw; color: #EE67C3; font-weight: 700; font-size: 4.4706vw; letter-spacing:-0.25vw; font-family: 'SUIT'; font-weight: 900;} .price {position: absolute; left: 1.1765vw; bottom: 0.8235vw; color: #EE67C3; font-weight: 700; font-size: 4.4706vw; letter-spacing:-0.25vw; font-family: 'SUIT'; font-weight: 900;}
.pro_wrap .pro_content_6 .section_8 .goods_btn a .price span {font-family: 'Pretendard Variable'; font-weight: 700; letter-spacing: -0.25vw;} .price span {font-family: 'Pretendard Variable'; font-weight: 700; letter-spacing: -0.25vw;}
/*--------------------------------------------------------------------------------
	# pro_content_7 - section_9
---------------------------------------------------------------------------------*/
.pro_wrap .pro_content_7 .section_9 .btn_wrap {position: absolute; left: 50%; transform: translateX(-50%); width: 71%; height: 14.3vw;}
.pro_wrap .pro_content_7 .section_9 .btn_wrap a {display: block; width: 100%; height: 100%;}
.pro_wrap .pro_content_7 .section_9 .btn_wrap01 {bottom: 7.16%;}
.pro_wrap .pro_content_7 .section_9 .btn_wrap02 {bottom: 47%;}
.pro_wrap .pro_content_7 .section_9 .btn_wrap03 {bottom: 3.24%;}