:root { --primary-color: #3A6FE8; --primary-color-hover:#2355C9; --red-color:#f54545; --black-color:#282828; --sky-bg:#EAF2FF; --sky-bg2:#E2EFF9; --blue-color:#278EEF; --blue-color2:#526CA8; --black-color:#282828; } /* --primary-color: #3A6FE8; --primary-color-hover:#2355C9; */ .header{position:absolute; top:0; left:0; width:100%; padding:10px 0; border-bottom:1px solid #ddd; background-color:#fff; z-index:99} .header .logo{display:flex; align-items:center; justify-content:start; gap:0 10px;} .header .logo img{max-width:120px;} .header .logo span{font-size:1.25rem; font-weight:600} .header .inner{display:flex; justify-content:space-between;} .header .check-booking{display:flex; padding:6px 8px; align-items:center; gap:0 5px; border:1px solid #96b6d3; border-radius:10px; color:var(--blue-color); } .header .check-booking:hover{color:var(--primary-color)} .header .check-booking img{max-width:25px;} .header .check-booking span{font-size:1rem; font-weight:600} .booking .badge{display:inline-block; padding:3px 6px; font-size:13px; background-color:var(--sky-bg); color:var(--primary-color); font-weight:600; border-radius:5px;} .booking .badge.badge-02{background-color:var(--blue-color); color:#fff;} .inner{width:1400px; margin:0 auto} .inner-small{width:1100px; margin:0 auto} .sub-con{margin-top:60px; } .booking .top-con{display:flex; gap:0 30px;} .booking .top-con .thumb,.booking .main-con .left-wrap{width:800px;} .booking.hotel-sub .top-con .thumb,.booking.hotel-sub .main-con .left-wrap{} .footer{position:relative; margin-top:30px; background:#f9f9f9; padding:30px 0; } .footer .inner{text-align:center;} .footer .img-wrap img{mix-blend-mode:multiply; filter: grayscale(100%); opacity:.5; max-width:110px} .footer .txt-wrap ul{display:flex; padding-top:5px; gap:0 15px; justify-content:center; font-size:.875rem; flex-wrap:wrap} .footer .txt-wrap li{color:#888; font-size:.875rem; line-height:1.4} .footer .copy{padding-top:2px; color:#888; font-size:.875rem} @media only screen and (max-width:1400px){ .inner{width:92%; left:4%} .booking .top-con .thumb,.booking .main-con .left-wrap{width:700px;} } @media only screen and (max-width:1300px){ .booking .top-con .thumb,.booking .main-con .left-wrap{width:55%;} } @media only screen and (max-width:1200px){ .inner-small{width:92%; left:4%} } @media only screen and (max-width:1024px){ /*.footer{display:none;}*/ body:has(.booking,.pay) .footer{padding-bottom:100px;} .footer .txt-wrap ul{gap:0 7px;} } @media only screen and (max-width:768px){ .footer .txt-wrap li,.footer .copy{font-size:.813rem} .main+.footer .img-wrap{display:none;} .footer .img-wrap img{max-width:90px;} } @media only screen and (max-width:560px){ .sub-con{padding: 20px 0 40px;} } .ui-dim{position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;z-index:9998;} .login-pop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;z-index:9999;padding:24px;} .login-pop__box{position:relative;width:min(420px,92vw);background:#fff;border-radius:16px;padding:25px;box-shadow:0 20px 60px rgba(0,0,0,.25);} .login-pop__close{position:absolute;right:18px;top:18px;width:36px;height:36px;border:0;background:transparent;font-size:26px;line-height:1;cursor:pointer;} .login-pop__title{margin:0 0 20px;font-size:1.375rem;font-weight:600;color:#333;} .login-pop__desc{margin:0 0 14px;font-size:.938rem;color:#6b7280;} .login-pop__field{margin:0 0 10px;} .login-pop__label{display:block;font-size:.938rem;color:#374151;margin:0 0 4px;} .login-pop__input{width:100%; border:1px solid #ddd;border-radius:10px;padding:10px 12px;outline:none;} .login-pop__input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.15);} .login-pop__input::placeholder{color:#aaa; font-size:.875rem} .login-pop__submit{width:100%; margin-top:8px; padding:12px 0; border:0;border-radius:12px;background:var(--primary-color,#2563eb);color:#fff;font-weight:700;cursor:pointer; text-align:center;} .login-pop__submit:hover{background:var(--primary-color-hover)} .ui-dim.is-open{opacity:1;visibility:visible;} .login-pop.is-open{opacity:1;visibility:visible;} body.no-scroll{overflow:hidden;} .main+footer{;} .main+footer .img-wrap{display:none;} .main+footer .img-wrap img{filter:invert(1) brightness(2); opacity:.25} .main-bg{position:fixed; width:100%; height:100%; left:0; top:0; background:url(/ch-cruise/assets/img/visual.png) no-repeat center / cover; transform:scale(1.8); animation:bgZoomOut 12s ease-out forwards; z-index:1} .main-bg:before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.39); z-index:1} @keyframes bgZoomOut{ from{ transform:scale(1.08); } to{ transform:scale(1); } } .main-con-wrap{position:relative; display:flex; align-items:center; justify-content:center; flex-flow:column; height:100vh; color:#fff; z-index:10} .main-con-wrap .sub-tit{font-size:1.5rem;} .main-con-wrap h1{padding:12px 0 30px; font-size:4.375rem} .main-inner-con-wrap .main-con{margin-top:20px; display:flex; align-items:stretch; background-color:#fff; border-radius:20px; color:#333; width:1000px; box-shadow:0 5px 10px rgba(0,0,0,.15)} .main-inner-con-wrap .main-con .img-wrap{display:flex; width:350px; height:220px; flex-shrink:0;} .main-inner-con-wrap .main-con .img-wrap img{flex:1; width:100%; height:100%; object-fit:cover; border-radius:20px 0 0 20px;} .main-inner-con-wrap .main-con .txt-wrap{padding:40px 40px 30px; flex-grow:1 } .main-inner-con-wrap .main-con .txt-wrap .tit{font-size:1.625rem; font-weight:600} .main-inner-con-wrap .main-con .txt-wrap .txt{padding-top:3px; font-size:1.125rem; color:#777; word-break:break-all; line-height:1.4} .main-inner-con-wrap .main-con .bottom{display:flex; padding-top:30px; align-items:center; justify-content:space-between;} .main-inner-con-wrap .main-con .txt-wrap .price{font-size:1.313rem; font-weight:600;} .main-inner-con-wrap .main-con .txt-wrap .main-btn{padding:10px 20px; background:var(--primary-color); color:#fff; border-radius:13px; font-weight:600; font-size:1.063rem} .main-inner-con-wrap .main-con .txt-wrap .main-btn.two{} .main-inner-con-wrap .main-con .txt-wrap .main-btn:hover{background-color:var(--primary-color-hover)} @media only screen and (max-width:1400px){ .main-con-wrap .sub-tit{font-size:1.25rem} .main-con-wrap h1{padding:10px 0 15px; font-size:3.25rem} .main-inner-con-wrap{align-self:stretch;} .main-inner-con-wrap .main-con{margin-top:15px; width:90%; justify-self:center;} .main-inner-con-wrap .main-con .bottom{padding-top:12px;} .main-inner-con-wrap .main-con .img-wrap{width:230px; height:180px} .main-inner-con-wrap .main-con .txt-wrap{padding:30px 30px 25px} .main-inner-con-wrap .main-con .txt-wrap .tit{font-size:1.5rem;} .main-inner-con-wrap .main-con .txt-wrap .txt{font-size:1.063rem;} .main-inner-con-wrap .main-con .txt-wrap .price{font-size:1.25rem} } @media only screen and (max-width:768px){ .main-inner-con-wrap .main-con .img-wrap{width:200px; } .main-inner-con-wrap .main-con .txt-wrap{padding:30px 25px 15px;} } @media only screen and (max-width:650px){ .main-con-wrap h1{padding:7px 0 15px; font-size:2.5rem} .main-inner-con-wrap .main-con{width:100%;} .main-inner-con-wrap .main-con .img-wrap{width:120px; height:auto;} .main-inner-con-wrap .main-con .txt-wrap{padding:20px 20px 15px} .main-inner-con-wrap .main-con .bottom{padding-top:7px;} .main-inner-con-wrap .main-con .txt-wrap .tit{font-size:1.25rem; font-weight:600} .main-inner-con-wrap .main-con .txt-wrap .txt{font-size:1rem;} .main-inner-con-wrap .main-con .txt-wrap .price{font-size:1.125rem} } .booking .main-con .left-wrap{padding-top:25px;} .booking .top-con .thumb .swiper{width:100%; aspect-ratio:1.5 / 1; height:auto;} .booking .top-con .thumb .swiper-wrapper,.booking .top-con .thumb .swiper-slide{height:100%;} .booking .top-con .thumb .swiper-wrapper,.booking .top-con .thumb .swiper-slide img{border-radius:20px;} .booking .top-con .thumb :where(.swiper-button-next,.swiper-button-prev){padding:17px 25px; width:auto; height:auto; background-color:rgba(0,0,0,.6); color:#fff; border-radius:7px;} .booking .top-con .thumb .swiper-button-next:after,.booking .top-con .thumb .swiper-button-prev:after{font-size:1.475rem} .booking .top-con .txt-wrap{padding-top:25px; } .booking .top-con .txt-wrap .tag{display:flex; align-items:center; gap:0 10px;} .booking .top-con .txt-wrap .code-wrap{display:flex; align-items:center; gap:0 5px; font-size:14px;} .booking .top-con .txt-wrap .code-wrap .name{color:#777;} .booking .top-con .txt-wrap .code-wrap .num{color:#484848} .booking h1{padding-top:20px; font-size:1.5rem; font-weight:600; line-height:1.3} .booking .sub-tit{padding-top:10px; font-size:.938rem; color:#666; } .booking .price{padding-top:25px; font-size:1.625rem; font-weight:700} .booking .main-con{display:flex; gap:0 50px; } /* ✅ 상단 탭(스티키) */ .booking .main-con .top-tabs { position: sticky; /*top: 80px;*/ top:0; z-index: 50; background: #fff; } .booking .main-con .tabs { display: flex; height: var(--tabH); align-items: flex-end; } .booking .main-con .tab { flex:1; padding: 18px 2px 14px; cursor: pointer; border: 0; background: transparent; font-size: 16px; color: #888; position: relative; border-bottom: 1px solid #ddd;} .booking .main-con .tab.is-active { color: var(--text); font-weight: 700; border-bottom:2px solid var(--black-color); } .booking .main-con .tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--text); border-radius: 2px; } @media only screen and (max-width:1024px){ .booking .top-con .thumb,.booking .main-con .left-wrap{width:100%;} .booking .top-con{display:block} .booking .main-con{display:block} } /* ✅ 날짜 스와이퍼 */ .booking .main-con .date-row { padding: 18px 0 10px; } .booking .main-con .date-head { display: flex; align-items: center; justify-content: space-between; margin: 35px 0 12px; } .booking .main-con .date-head h2 { margin: 0; font-size: 1.375rem; } .booking .main-con .date-head .mini { font-size: .938rem; color: var(--muted); display: flex; gap: 7px; align-items: center; cursor:pointer;} .booking .main-con .date-head .mini .cal { width: 19px; display: flex; align-items:center; } .booking .main-con .date-head .mini .cal img{max-width:100%} .booking .main-con .date-swiper-wrap { padding-top:22px; display: flex; align-items: center; gap: 0; } .booking .main-con .nav-btn {position:relative; width: 36px; height: 36px; border: 1px solid var(--line); background: #fff; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .booking .main-con .nav-btn .icon{position:absolute; width:100%; height:100%; left:50%; top:15px; transform:translate(-50%,-50%);} .booking .main-con .nav-btn .icon:before{content:''; position:absolute; width:13px; height:2px; background-color:var(--black-color); transform:rotate(-45deg)} .booking .main-con .nav-btn .icon:after{content:''; position:absolute; top:9px; width:13px; height:2px; background-color:var(--black-color); transform:rotate(45deg)} .booking .main-con .nav-btn.prev .icon{top:30px; left:0;} .booking .main-con .nav-btn.next .icon{transform:scaleX(-1)} .booking .main-con .nav-btn:disabled { opacity: .35; cursor: not-allowed; } .booking .main-con .swiper { width: 100%; } .booking .main-con .swiper-slide { width: auto; } .booking .main-con .date-pill { min-width: 115px; border: 2px solid #fff; background: #F5F6F7; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 1px; cursor: pointer; user-select: none; text-align:center;} .booking .main-con .date-pill .d { font-size: .938rem; color: #444; } .booking .main-con .date-pill .p { font-size: .875rem; color: #777; } .booking .main-con .date-pill.is-active { border: 2px solid var(--primary-color); background: #fff; } .booking .main-con .date-pill.is-active .d{ font-weight: 700; } .booking .main-con .date-pill.is-active .d,.booking .main-con .date-pill.is-active .p { color: var(--primary-color);} .booking .main-con .card{display:flex; margin-top:18px; border: 1px solid #ddd; border-radius: 18px; padding: 25px 40px 25px; background: #fff; transition:all .3s} .booking .main-con .card:hover{border-color:var(--primary-color); cursor:pointer; box-shadow:0 0 10px rgba(0,0,0,.1)} .booking .main-con .card-info-wrap{flex-grow:1;} .booking .main-con .card .card-top{display:flex; gap:0 12px; align-items:center} .booking .main-con .card .card-top .status{display:flex; gap:0 12px; align-items:center} .booking .main-con .card .card-top .status b{color:var(--blue-color); font-weight:500} .booking .main-con .card .card-top .status :where(.current,.remain,.min){font-size:.938rem; color:#666;} .booking .main-con .card .card-top .status .current{position:relative; padding-right:12px;} .booking .main-con .card .card-top .status .current:before{content:''; position:absolute; top:50%; right:0; width:1px; height:70%; transform:translateY(-50%); background-color:#ddd;} .booking .main-con .option-tit{display:flex; align-items:center; padding-top:15px; gap:0 7px;} .booking .main-con .option-tit img{max-height:18px;} .booking .main-con .option-tit .name{font-size:.938rem; color:#555;} .booking .main-con .option-tit .date{font-size:1.125rem; color:#3d3d3d; font-weight:600} .booking .main-con .option-desc{padding-top:3px; color:#777;} .booking .main-con .option-cta{display:flex; flex-flow:column; gap:7px 0}/* align-items:center; justify-content:space-between; */ .booking .main-con .option-price{padding-top:5px; font-size:1.438rem; font-weight:600; color:var(--black-color)} .booking .main-con .option-btn{display:none; border:1px solid #96989E; border-radius:7px;} .booking .main-con .option-btn .inner-btn{display:flex; align-items:center; justify-content:center; padding:8px 0 6px; width:100%; border-radius:7px; font-size:1.063rem; color:var(--primary-color); background-color:#fff; font-weight:500; border:none;} .booking .main-con .option-btn .inner-btn .arrow-down{position:relative; display:inline-block; margin-left:3px; width:13px; height:25px;} .booking .main-con .option-btn .inner-btn .arrow-down:before{content:''; position:absolute; top:8px; left:7px; width:7px; height:7px; border-top:1px solid var(--primary-color); border-right:1px solid var(--primary-color); transform:translateX(-50%) rotate(45deg)} .opt-modal .c-type{padding:10px 0; } .opt-modal .c-type ul{display:grid; grid-template-columns:repeat(3,1fr); gap:15px 0;} .opt-modal .c-type ul li{text-align:center;} .opt-modal .c-type ul li .tit{color:#333; font-weight:500} .opt-modal .c-type ul li .txt{font-size:13px; color:#777;} .opt-modal .c-type ul li .per-price{padding:2px 0 9px; font-size:.875rem; color:var(--black-color); font-weight:500; opacity:.8} .opt-modal .c-type .count-box { display:inline-flex; align-items:center; border:1px solid #e5e5ea; border-radius:12px; height:44px; overflow:hidden; background:#fff; } .opt-modal .c-type .count-box .btn { width:40px; height:40px; border:0; background:transparent; font-size:20px; font-weight:400; color:#555; cursor:pointer; } .opt-modal .c-type .count-box .btn:active { background:#f2f2f6; } .opt-modal .c-type .count-box .num { width:44px; text-align:center; font-size:16px; font-weight:700; color:var(--black-color); } .opt-modal-summary{display:flex; gap:0 8px; flex-wrap:wrap; align-items:center; padding:10px 25px; border-bottom:1px solid #eee; background-color:#eff5fb} .opt-modal-summary .s-badge{display:inline-block; font-size:12px; padding:4px 8px; border-radius:999px; } .opt-modal-summary .s-title{font-weight:700; line-height:1.3; } .opt-modal-summary .s-desc{width:100%; font-size:13px; color:#666; margin-bottom:10px;} .opt-modal-summary .s-price{font-weight:900; font-size:16px;} .opt-modal .c-type .go-cart{display:block; margin-top:25px; padding:10px; border-radius:10px; width:100%; background:var(--primary-color); color:#fff; font-weight:500; border:none; font-size:1.125rem} .opt-modal .c-type .go-cart:hover{background-color:var(--primary-color-hover)} .booking .main-con .option-btn .c-type { display:none; } .booking .main-con .option-btn.open .arrow-down { transform:rotate(180deg); } .booking .main-con .option-btn .arrow-down { display:inline-block; transition:transform .2s ease; } .booking .main-con .option-btn .arrow-down { display:inline-block; transition:transform .25s ease; } .booking .main-con .option-btn.open .arrow-down { transform:rotate(180deg); } .booking .prod-info-wrap{margin-top:80px;} .booking .prod-info-wrap .d-img-wrap{padding:25px 0 50px;} .booking .prod-info-wrap .d-img-wrap img{max-width:100%;} .booking .prod-info-wrap .image{margin:0;} .booking .prod-info-wrap .image img{max-width:100%} .opt-modal{position:fixed; inset:0; z-index:99999; display:none;} .opt-modal.is-open{display:block;} .opt-modal-dim{position:absolute; inset:0; background:rgba(0,0,0,.45);} .opt-modal-panel{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(92vw, 520px); max-height:min(78vh, 640px); background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,.18);} .opt-modal-head{display:flex; align-items:center; justify-content:space-between; padding:14px 16px 7px; border-bottom:1px solid #eee;} .opt-modal-head .title{font-weight:700;} .opt-modal-head .x{width:36px; height:36px; border:0; background:transparent; font-size:22px; cursor:pointer;} .opt-modal-body{padding:14px 16px; overflow:auto; max-height:calc(min(78vh, 640px) - 56px);} #optModalSummary .s-desc{display:none;} @media only screen and (max-width:560px){ .booking .main-con .card{display:block} .booking .main-con .card .card-top{gap:0 8px;} .booking .main-con .option-cta{flex-flow:row; justify-content:end; align-items:center; gap:0 5px;} .booking .main-con .option-price{font-size:1.25rem} .booking .main-con .option-btn .inner-btn{padding:4px 8px;font-size:.938rem; padding:4px 8px;} .booking .main-con .option-btn .inner-btn .hidden{display:none} .booking .main-con .option-tit{padding-top:10px} .booking .main-con .option-desc{padding-top:0} .booking .main-con .option-btn .inner-btn .arrow-down{height:15px; margin-left:0; } .booking .main-con .option-btn .inner-btn .arrow-down:before{top:4px;} } /* 달력 */ .main-cal-layer{position:fixed; inset:0; z-index:99999; display:none;} .main-cal-layer.is-open{display:block;} .main-cal-layer .cal-dim{position:absolute; inset:0; background:rgba(0,0,0,.65); z-index:1;} /* 달력 패널은 dim 위 */ .main-cal-layer .panel{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;} .main-cal-layer .panel{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(920px, calc(100% - 36px)); background:#fff; border-radius:18px; box-shadow:0 20px 60px rgba(0,0,0,.18); overflow:hidden;} .main-cal-layer .head{display:flex; align-items:center; justify-content:space-between; padding:10px 18px 5px; border-bottom:1px solid #eee;} .main-cal-layer .head .title{font-weight:800; font-size:1.125rem; text-align:center} .main-cal-layer .head .x{position:absolute; top:5px; right:15px; width:36px; height:36px; border:0; border-radius:10px; cursor:pointer; font-size:25px; background:none;} .main-cal-layer .head .sp{width:36px; height:36px;} .main-cal-layer .body{display:flex; align-items:stretch; gap:10px; padding:14px 14px 10px;} .main-cal-layer .nav{display:flex; align-items:center; justify-content:center; width:40px; border:0; border-radius:12px; cursor:pointer; font-size:30px; font-weight:800; background:none;} .main-cal-layer .nav .icon{display:block; position:relative; width:13px; height:13px; border-top:1px solid var(--black-color); border-right:1px solid var(--black-color); transform:rotate(45deg)} .main-cal-layer .nav.prev .icon{transform:rotate(-135deg)} .main-cal-layer .nav:disabled{opacity:.25} .main-cal-layer .months{flex:1; display:grid; grid-template-columns:1fr 1fr; gap:16px; min-height:360px;} .main-cal-layer .month{padding:6px 4px;} .main-cal-layer .m-head{display:flex; align-items:center; justify-content:center; font-weight:900; font-size:18px; margin:10px 0 14px;} .main-cal-layer .dow{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; font-size:12px; color:#666; padding:0 8px 10px; border-bottom:1px solid #eee;} .main-cal-layer .dow span{text-align:center; padding:4px 0;} .main-cal-layer .grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; padding:12px 8px 6px;} .main-cal-layer .cell{height:46px; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:start; cursor:pointer; user-select:none;} .main-cal-layer .cell .d{padding-top:5px; font-weight:800; font-size:14px; line-height:1;} .main-cal-layer .cell .p{font-size:12px; margin-top:4px; color:#333; } .main-cal-layer .cell.disabled{opacity:.25; cursor:not-allowed;} .main-cal-layer .cell:not(.disabled):hover{background:#f5f7ff;} .main-cal-layer .cell.sel{outline:2px solid #2563eb; background:#fff;} .main-cal-layer .foot{padding:14px; border-top:1px solid #eee;} .main-cal-layer .ok{width:100%; height:52px; border:0; border-radius:14px; background:var(--primary-color); color:#fff; font-weight:700; font-size:1.25rem; cursor:pointer;} .main-cal-layer .ok:disabled{background:#e5e7eb; color:#9ca3af; cursor:not-allowed;} /* 달력 주말 컬러 */ .main-cal-layer .cell.sun .d { color:#4285ff; } /* 일요일 */ .main-cal-layer .cell.sat .d { color:#ff7373; } /* 토요일 */ @media (max-width:1024px){ .main-cal-layer .nav{ display:none !important; } .main-cal-layer .months{display:block; max-height: 62vh; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-right: 6px;} /* 두달 동시 출력 대신 1개 컨테이너만 사용 */ .main-cal-layer .month#m2{ display:none;} /* 달 간격 */ .main-cal-layer .month .m-head{position: sticky; top: 0; background:#fff; padding: 12px 0 8px; z-index: 2;} .main-cal-layer .month + .month{ margin-top: 18px; } } @media (max-width: 720px){ .main-cal-layer .panel{top:auto; bottom:12px; transform:translate(-50%,0); border-radius:18px;} .main-cal-layer .months{grid-template-columns:1fr;} .main-cal-layer #m2{display:none;} .main-cal-layer .nav{width:44px;} } @media only screen and (max-width:560px){ .main-cal-layer .cell .p{font-size:10px; color:#666;} .booking .main-con .nav-btn{width:25px; height:36px; flex-shrink:0;} .booking .main-con .nav-btn .icon:before,.booking .main-con .nav-btn .icon:after{width:10px;} .booking .main-con .nav-btn .icon:after{top:6px} } .booking .right-wrap{position:relative; flex-grow:1;} .booking .right-wrap .box{position:sticky; top:20px; padding:35px 45px; border-radius:15px; background-color:#fff; box-shadow:0 0 20px rgba(0,0,0,.1)} .booking .right-wrap .tit{font-size:1.313rem; font-weight:600} .booking .right-wrap .txt{font-size:.875rem; color:#777} .booking .right-wrap .prod-list{margin-top:10px; max-height:70vh; overflow-y:auto; display:block} .booking .right-wrap .prod-list li{position:relative; margin-top:12px; padding:15px 25px; box-shadow: inset 0 0 0 1px #ddd; border-radius:12px; cursor:pointer;} .booking .right-wrap .prod-list li .del{background:none; position:absolute; top:9px; right:12px; border:none; font-size:24px; } .booking .right-wrap .prod-list li .del img{max-width:18px; opacity:.5} .booking .right-wrap .prod-list li.active{box-shadow: inset 0 0 0 3px var(--primary-color);} .booking .right-wrap .prod-list li .info-wrap{display:flex; gap:0 8px;} .booking .right-wrap .prod-list li .info-wrap .icon{padding-top:1.5px;} .booking .right-wrap .prod-list li .info-wrap .icon img{max-width:18px} .booking .right-wrap .prod-list li .info-wrap .date{font-weight:500; color:#353535;} .booking .right-wrap .prod-list li .info-wrap .person .tit{font-size:14px; color:var(--black-color);} .booking .right-wrap .prod-list li .info-wrap .person .txt{color:#555;} .booking .right-wrap .prod-list li .price-wrap{display:flex; align-items:center; justify-content:end; gap:0 8px; } .booking .right-wrap .prod-list li .price-wrap .txt{font-size:14px;color:var(--black-color)} .booking .right-wrap .prod-list li .price-wrap .tit{font-size:16px;color:var(--black-color)} .booking .right-wrap .total-price{padding:25px 0 15px; display:flex; align-items:center; justify-content:space-between;} .booking .right-wrap .total-price .txt{font-size:1.063rem; color:var(--black-color); font-weight:500} .booking .right-wrap .total-price .tit{font-size:1.438rem; color:var(--primary-color); font-weight:600} .booking .right-wrap .go-pay{display:block; padding:12px; background-color:var(--primary-color); color:#fff; border-radius:10px; text-align:center; font-size:1.125rem; font-weight:500} .booking .right-wrap .go-pay:hover{background:var(--primary-color-hover)} .sheet-dim{position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:9998; display:none;} .sheet-dim.is-open{display:block;} .booking .right-wrap .box .m-hidden{position:relative; z-index:9999;} .btn-close-icon{display:none;} @media only screen and (max-width:1400px){ .booking .right-wrap .box{padding:35px;} } @media only screen and (max-width:1024px){ .booking .right-wrap .box .m-hidden{display:none; } .booking .right-wrap .box{position:fixed; padding:15px 20px; width:100%; top:auto; left:0; bottom:0px; z-index:100; border-radius:15px 15px 0 0; z-index:9999} .booking .right-wrap .prod-list{max-height:240px;} .booking .right-wrap .prod-list li:first-child{margin-top:20px;} .btn-close-icon{position:absolute; right:15px; width:38px; height:38px; border:0; border-radius:12px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.15s; background:none;} .btn-close-icon svg{width:18px; height:18px; color:#222;} .btn-close-icon:hover{background:#e9ecef;} .btn-close-icon:active{transform:scale(.95);} .booking .right-wrap .total-price{padding:20px 0 10px;} } @media only screen and (max-width:560px){ .header .logo img{max-width:50px;} .booking h1{font-size:1.375rem} .booking .price{padding-top:10px;} .booking .main-con .date-pill{min-width:auto} .booking .main-con .date-swiper-wrap{gap:0;} .booking .main-con .card{margin-top:13px; padding:20px 22px 17px;} .btn-close-icon{right:-10px} .booking .main-con .card .card-top .status{gap:0 7px;} .booking .main-con .card .card-top .status .current{padding-right:7px;} .opt-modal .c-type{padding:10px 15px;} .opt-modal .c-type ul{grid-template-columns:repeat(1,1fr)} .opt-modal .c-type ul li{display:flex; justify-content:space-between;} .opt-modal .c-type ul li > div{display:flex; align-items:center; gap:0 3px; flex-wrap:wrap;} .opt-modal .c-type ul li > div p{text-align:left;} .opt-modal .c-type ul li > div p:nth-child(3){flex: 0 0 100%} .opt-modal .c-type ul li .txt{font-size:12px} .opt-modal .c-type ul li .per-price{padding:2px 0 0; text-align:left; } .opt-modal .c-type .count-box{width:110px; flex-shrink:0;} .opt-modal .c-type .count-box .btn{width:35px;} .opt-modal .c-type .count-box .num{width:30px} .booking .prod-info-wrap{margin-top:65px;} .booking .prod-info-wrap .d-img-wrap{padding:15px 0 50px;} .booking .right-wrap .prod-list li{padding:15px 22px;} .booking .right-wrap .prod-list li .price-wrap .tit{font-weight:500px; opacity:.8; font-size:15px;} .booking .right-wrap .total-price .tit{font-size:1.563rem} .booking h1{font-size:1.375rem; line-height:1.35} .booking .price{font-size:1.5rem} } .pay .main-con .left-wrap{width:900px;} .pay .top-con{align-items:start; gap:0 20px;} .pay .pay-thumb{width:80px; aspect-ratio:1/1; overflow:hidden; flex-shrink:0; border-radius:10px;} .pay .pay-thumb img{width:100%; height:100%; object-fit:cover;} .pay .top-con .txt-wrap{padding:0; padding-right:10px;} .pay .top-con .txt-wrap .info{display:flex; flex-wrap:wrap; gap:0 12px; padding-top:2px; font-size:.938rem; color:#868895} .pay .top-con .txt-wrap .info span{position:relative; } .pay .top-con .txt-wrap .info span:after{content:''; position:absolute; top:10px; right:-6px; width:2px; height:2px; border-radius:100px; background:var(--primary-color)} .pay .top-con .txt-wrap .info span:last-child:after{display:none} .pay .txt-wrap h1{word-break:break-all; padding-top:0; font-size:1.125rem; color:#272a31; font-weight:600; line-height:1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;} .pay .pay-schedule-wrap{margin-top:17px; padding:20px; background-color:#edf3f7; border-radius:10px;} /* eff5fb */ .pay .pay-schedule-wrap .tit{display:inline-block; margin-bottom:7px; color:#5791c3; font-size:.938rem; border-radius:5px; font-weight:500} .pay .pay-schedule-wrap .pay-schedule:first-of-type{border-top:0; border-radius:10px 10px 0 0} .pay .pay-schedule-wrap .pay-schedule:last-of-type{border-radius:0 0 10px 10px} .pay .pay-schedule{display:flex; align-items:start; gap:0 10px; padding:20px; background-color:#fff; border-top:1px solid #eff5fb} .pay .pay-schedule > img{max-width:18px; opacity:.8} .pay .pay-schedule .badge{padding:5px 6px; display:flex; align-items:center; justify-content:center; background-color:#eff5fb; line-height:1.2} .pay .pay-schedule .info{flex-grow:1; display:flex; align-items:center; justify-content:space-between;} .pay .pay-schedule .info .date{font-weight:500; line-height:1.4; font-size:.938rem} .pay .pay-schedule .info .kind{color:#777; font-size:.875rem; line-height:1.4} .pay .pay-schedule .info .price{padding:0; font-size:.938rem; color:#555; font-weight:500} .pay .prod-con{position:relative; margin-top:13px; padding:25px 28px 20px; border:1px solid #e5e5e5; border-radius:15px;} .pay .prod-con.first{margin-top:0} .pay .top-header{position:relative; padding-bottom:7px; display:flex; justify-content:end;} .pay .top-header .name{font-size:1rem; color:var(--primary-color); font-weight:500} .pay .btn-close-x{position:absolute; width:18px; height:18px; background:none; border:none;} .pay .btn-close-x:before{content:""; position:absolute; left:50%; top:50%; width:15px; height:1px; background:#aaa; transform:translate(-50%,-50%) rotate(45deg);} .pay .btn-close-x:after{content:""; position:absolute; left:50%; top:50%; width:15px; height:1px; background:#aaa; transform:translate(-50%,-50%) rotate(-45deg);} .pay .prod-con .item-price{margin-top:12px; display:flex; justify-content:end; align-items:center; gap:0 8px} .pay .prod-con .item-price .tit{font-size:.938rem; color:#8c9199; } .pay .prod-con .item-price .txt{font-size:1.25rem; font-weight:600} .pay .schedule{margin-top:13px; padding:14px 30px; display:flex; align-items:center; justify-content:center; background-color:#eff5fb; border-radius:12px; gap:0 35px;} /* #EEF5FE */ .pay .schedule .detail{text-align:center;} .pay .schedule .detail .txt{color:#555; font-size:.938rem; line-height:1.3} .pay .schedule .detail .date{font-size:1rem; color:#3f3f3f; line-height:1.4; font-weight:600} .pay .schedule .detail .txt-02{font-size:.938rem; color:var(--blue-color2)} .pay .schedule .duration{text-align:center;} .pay .schedule .duration .badge{padding:3px 8px; background:#a3b7cb; color:#fff; border-radius:100px; font-weight:400;} /* #6E8AC7 */ .pay .schedule .duration .kind{padding-top:3px; display:flex; align-items:center; gap:0 5px;} .pay .schedule .duration .kind img{max-width:25px;} .pay .schedule .duration .kind span{font-size:.938rem; color:var(--black-color); font-weight:500;} .pay .info-wrap{margin-top:20px; } .pay .info-wrap ul{display:flex; align-items:center; padding:12px 5px; border-bottom:1px solid #eee;} .pay .info-wrap ul li.tit{width:90px; flex-shrink:0; font-size:1rem; color:#333; font-weight:500;} .pay .info-wrap ul li.txt{font-size:.938rem; color:#666;} .pay .info-wrap ul li.txt.point{color:var(--black-color); font-weight:500} .pay .info-wrap ul.sch li.txt{} .pay .info-wrap ul.sch li span{} .pay .info-wrap ul.sch li span strong{font-weight:500; color:var(--black-color)} .pay .info-wrap ul.sch li span.color{display:block; color:var(--primary-color)} .pay .info-wrap .summary{display:flex; align-items:center; gap:0 10px} .pay .list-sub-tit{margin-bottom:25px; padding-bottom:15px; font-size:1.5rem; font-weight:600; border-bottom:1px solid #555;} .pay .sub-space{margin-top:50px;} .pay .boarding-list .cont{margin-top:25px; padding-bottom:35px; border-bottom:1px solid #ddd;} .pay .boarding-list .cont:last-child{padding-bottom:0; border-bottom:0;} .pay .boarding-list .cont > .tit{padding-bottom:8px; font-size:1.125rem; color:var(--primary-color); font-weight:500} .pay .boarding-list .cont ul{display:grid; grid-template-columns:repeat(2,1fr); gap:15px 15px} .pay .boarding-list .cont ul li{width:100%} .pay .boarding-list .cont ul li label{display:block; padding-bottom:7px;} .pay .boarding-list .cont ul li input{width:100%; border-radius:10px;} .pay .boarding-list .cont ul li input::placeholder{color:#aaa} .pay .question textarea{border-radius:13px; min-height:150px;} .pay .question textarea::placeholder{color:#aaa;} .pay .caution ul.main-c{padding:25px 30px; border-radius:10px; background-color:#fff; box-shadow:0 0 10px rgba(0,0,0,.1)} .pay .caution ul.main-c li{position:relative; margin:2px 0; padding:0 0 0 15px; font-size:1rem; color:var(--primary-color); font-weight:500} .pay .caution ul.main-c li:before{content:''; position:absolute; top:8px; left:0; width:6px; height:6px; border-radius:100px; border:1px solid var(--primary-color);} .pay .caution ul.sub-c{margin-top:15px; } .pay .caution ul.sub-c li{position:relative; margin:2px 0; padding:0 0 0 15px; font-size:.938rem; color:#666;} .pay .caution ul.sub-c li:before{content:''; position:absolute; top:10px; left:0; width:5px; height:1px; background-color:#aaa;} .pay .agree{margin-top:18px;} .pay .agree-all{display:flex; align-items:center; gap:10px; margin-bottom:14px; cursor:pointer; user-select:none;} .pay .agree-list{display:flex; flex-direction:column; gap:10px;} .pay .agree-list li{position:relative; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 16px; border:1px solid #e5e7eb; border-radius:12px; background:#fff;} .pay .agree-row{display:flex; align-items:center; padding:12px 0;gap:8px; width:100%; cursor:pointer; user-select:none;} .pay .agree-item{display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none;} .pay .agree input{position:absolute; opacity:0; width:0; height:0;} /* 위(전체동의) 체크는 그대로 원형 */ .pay .agree-all .chk{width:22px; height:22px; border:2px solid #bdbdbd; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 22px;} .pay .agree-all .chk:before{content:""; width:10px; height:6px; border-left:2px solid transparent; border-bottom:2px solid transparent; transform:rotate(-45deg); margin-top:-2px;} .pay .agree-all input:checked + .chk{border-color:var(--primary-color);} .pay .agree-all input:checked + .chk:before{border-left-color:var(--primary-color); border-bottom-color:var(--primary-color);} /* 아래(리스트) 체크는 연한 체크 -> 파란 체크 */ .pay .agree-list .chk{width:18px; height:18px; border:0; border-radius:0; display:inline-flex; align-items:center; justify-content:center; flex:0 0 18px;} .pay .agree-list .chk:before{content:""; width:10px; height:6px; border-left:2px solid #cbd5e1; border-bottom:2px solid #cbd5e1; transform:rotate(-45deg); margin-top:-2px;} .pay .agree-list input:checked + .chk:before{border-left-color:var(--primary-color); border-bottom-color:var(--primary-color);} .pay .agree .txt{font-size:15px; color:#333;} .pay .agree-link{font-size:14px; color:#6b7280; text-decoration:none; white-space:nowrap;} .pay .agree-link:hover{text-decoration:underline;} .pay .agree-hint{margin-top:10px; font-size:13px; color:#9ca3af;} .pay .pay-method{display:flex; flex-direction:column; gap:16px;} .pay .pay-method .pm-item{display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none;} .pay .pay-method .pm-item input{position:absolute; opacity:0; width:0; height:0;} .pay .pay-method .pm-radio{width:20px; height:20px; border:1px solid #d1d5db; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 20px;} .pay .pay-method .pm-radio:before{content:""; width:8px; height:8px; border-radius:999px; background:transparent;} .pay .pay-method .pm-item input:checked + .pm-radio{border-color:#2563eb; border-width:5px;} /*.pay .pay-method .pm-item input:checked + .pm-radio:before{background:#2563eb;}*/ .pay .pay-method .pm-txt{font-size:1rem; color:var(--black-color); font-weight:500;} .pay .pay-method .pm-detail{display:none; padding-left:28px; margin-top:-6px; gap:10px; flex-direction:column;} .pay .pay-method .pm-detail.is-open{display:flex;} .pay .pay-method .pm-select{height:44px; padding:0 14px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; width:100%;} .pay .pm-drop{position:relative;} .pay .pm-drop-btn{width:100%; height:48px; border:1px solid #e5e7eb; border-radius:12px; background:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 16px; font-size:15px; cursor:pointer;} .pay .pm-drop-btn .val{color:#333; } .pay .pm-drop-btn .arrow{font-size:12px; color:#9ca3af;} .pay .pm-drop-list{position:absolute; left:0; top:52px; width:100%; background:#fff; border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.12); padding:6px 0; display:none; z-index:50;} .pay .pm-drop-list li{padding:12px 16px; font-size:14px; cursor:pointer; color:#111827;} .pay .pm-drop-list li:hover{background:#f3f4f6;} .pay .pm-drop.is-open .pm-drop-list{display:block;} .pay .final-price li{display:flex; justify-content:space-between; align-items:center; padding:5px; } .pay .final-price li .kind{color:#666;} .pay .final-price li .num{font-size:1.063rem; color:var(--black-color;); font-weight:500} .pay .right-wrap .total-price{margin-top:15px; padding:15px 0 ; border-top:1px solid #ddd;} .gender-radio{display:flex; gap:10px;} .gender-radio input{position:absolute; opacity:0; width:0; height:0;} .pay .boarding-list .cont ul li .gender-radio label{display:flex; align-items:center; min-width:50px; height:46px; padding:0 18px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; color:#9ca3af; font-weight:700; display:flex; align-items:center; justify-content:center; cursor:pointer; user-select:none; transition:.15s;} .gender-radio input:checked + label{border-color:#111827; color:#111827;} .gender-radio input:focus-visible + label{outline:3px solid rgba(37,99,235,.25); outline-offset:2px;} @media only screen and (max-width:1400px){ .pay .main-con .left-wrap{flex-grow:1; width:auto; } .pay .right-wrap{width:350px; flex-shrink:0;} } @media only screen and (max-width:1024px){ .pay .top-con{display:flex;} .pay .main-con .left-wrap{padding-top:0} .pay .schedule{gap:0 50px} .pay .schedule .detail .date .hidden{display:none} .pay .right-wrap{margin-top:50px; } .pay .right-wrap .box{position:relative; padding:0; box-shadow:none; } .pay .right-wrap{width:100%;} .pay .right-wrap .tit{font-size:1.5rem; margin-bottom:25px; padding-bottom:15px; border-bottom:1px solid #555;} .pay .right-wrap .go-pay{position:fixed; width:calc(100% - 8%); bottom:20px} .pay .right-wrap .total-price .tit{margin-bottom:0; padding-bottom:0; border:none} } @media only screen and (max-width:560px){ .pay .schedule{gap:0 10px} .pay .top-con{gap:0 15px;} .pay .txt-wrap h1{font-size:1.125rem} .pay .schedule{padding:15px 5px;} .pay .schedule .detail .date{font-size:1rem} .pay .schedule .duration .kind span{font-size:.875rem;} .pay .schedule .duration .badge{font-weight:500; font-size:11px;} .pay .boarding-list .cont ul{gap:15px 10px} .pay .boarding-list .cont ul li label{padding-bottom:3px;} .pay .boarding-list .cont ul li input{padding:10px 15px;} .pay .boarding-list .cont{margin-top:20px; padding-bottom:30px; } .pay .caution ul.main-c{padding:20px} .pay .list-sub-tit{margin-bottom:15px; font-size:1.375rem} .sub-con{margin-bottom:50px;} .pay .pay-thumb{width:50px;} .pay .prod-con{padding:17px 20px 15px;} .pay .sub-space{margin-top:45px;} .pay .pay-schedule{padding:15px; gap:0 10px;} .pay .pay-schedule .badge{padding:4px 5px; font-size:12px;} .pay .pay-schedule .badge > span{display:none;} .pay .pay-schedule .info .date > span{display:none;} .pay .pay-schedule .info .price{font-size:.938rem} .pay .pay-schedule .info .kind{font-size:.813rem} } .dim{position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:998; opacity:0; visibility:hidden; pointer-events:none;transition:all .25s;} .dim.active{opacity:1; visibility:visible; pointer-events:auto;} .modal{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:20px; z-index:999;} .modal[hidden], .dim[hidden]{display:none;} .modal-box{width:min(420px, 100%); background:#fff; border-radius:18px; box-shadow:0 20px 60px rgba(0,0,0,.18); overflow:hidden;} .modal-top{padding:20px 25px 20px;} .modal-title{display:block; font-size:1.25rem; font-weight:700; color:#111827; line-height:1.3;} .modal-desc{margin-top:6px; font-size:13px; color:#6b7280; line-height:1.4; max-height:50vh; overflow-y:auto; word-break:break-all;} .modal-desc.big{font-size:.875rem; color:var(--primary-color)} .modal-btns{display:flex; gap:10px; padding:14px 25px 18px;} .btn{flex:1; height:44px; border-radius:12px; font-size:14px; font-weight:600; border:1px solid transparent; cursor:pointer;} .btn-ghost{background:#f3f4f6; color:#111827; border-color:#e5e7eb;} .btn-danger{background:var(--primary-color); color:#fff;} .btn:active{transform:translateY(1px);} .refund-info{margin-top:15px; padding:0; border-top:1px dotted #999; border-bottom:1px dotted #999;} .refund-info li{position:relative; padding:6px 0; flex:1; display:flex; align-items:center; justify-content:space-between; text-align:center; font-size:.813rem} .refund-info li:last-child:after{display:none} .refund-info li:after{content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; border-bottom:1px dotted #ddd} .refund-info li .tit{font-weight:500} .refund-info li .tit,.refund-info li .txt{line-height:1.35} .refund-info li .txt{color:var(--primary-color); font-weight:600} .modal-caution{padding-top:10px; } .modal-caution li{position:relative; padding:1px 0 1px 10px; margin:3px 0; font-size:.75rem; line-height:1.2; color:#666; word-break:break-all} .modal-caution li:before{content:''; position:absolute; top:5px; left:0; width:5px; height:4.5px; border:1px solid #ddd; border-radius:100px} .modal-terms{width:min(720px, 100%);} .modal-head{display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid #eee;} .modal-head .modal-title{font-size:1.125rem;} .modal-body{max-height:min(65vh, 560px); overflow:auto; padding:18px 20px; line-height:1.6; color:#374151;} .modal-body h3{margin:0 0 10px; font-size:1rem;} .modal-body p{margin:0 0 10px;} .layer-close{position:relative; width:28px; height:28px; background:none; border:0; cursor:pointer;} .layer-close:before{content:""; position:absolute; left:50%; top:50%; width:16px; height:2px; background:#9ca3af; transform:translate(-50%,-50%) rotate(45deg);} .layer-close:after{content:""; position:absolute; left:50%; top:50%; width:16px; height:2px; background:#9ca3af; transform:translate(-50%,-50%) rotate(-45deg);} #dim{ z-index: 2147483 !important; } #delModal, #layerModal, #refundModal,#inquiryCheckModal{ z-index: 2147487 !important; } @media only screen and (max-width:560px){ .modal-box{width:92%} } /* 마이페이지 */ /* ========================= 마이페이지 스타일 (mypage 네임스페이스) ========================= */ .mypage{background-color:#f8fafc;} .mypage .mypage-head{margin-bottom:25px;} .mypage .mypage-title{font-size:2.125rem;margin:0 0 8px;} .mypage .mypage-sub{margin:10px 0 0 ;color:#6b7280;font-size:1rem;} .mypage .mypage-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:25px;box-shadow:0 0 17px rgba(0,0,0,.06);} .mypage .mypage-profile{margin-bottom:25px;} .mypage .profile-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:5px;} .mypage .profile-top h2{padding-bottom:5px; margin:0;font-size:1rem; font-weight:500} .mypage .profile-actions{display:flex;gap:8px;flex-wrap:wrap;} .mypage .btn-line{border:1px solid #e5e7eb;background:#fff;border-radius:10px;padding:8px 10px;font-size:12px;cursor:pointer;} .mypage .profile-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;} .mypage .profile-grid .item{border:1px solid #e0e8f1;background:#f1f5f9;border-radius:12px;padding:15px;} .mypage .profile-grid .label{display:flex; align-items:center; gap:0 5px; margin:0 0 3px;font-size:.875rem;color:#6b7280;} .mypage .profile-grid .label img{max-height:13px; opacity:.6} .mypage .profile-grid .value{margin:0;font-size:1rem;font-weight:600;color:var(--black-color);} .mypage .profile-note{display:none; margin-top:10px;font-size:.813rem;color:#6b7280;} .mypage .mono{/*font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;*/} .mypage .mypage-orders .orders-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:8px 0 12px;} .mypage .mypage-orders .orders-head.space-big{margin:35px 0 12px} .mypage .mypage-orders h2{flex-grow:1; margin:0; padding:35px 0 7px; font-size:1.375rem; font-weight:600; color:var(--black-color)} .mypage .orders-filter{display:flex;gap:8px;flex-wrap:wrap;} .mypage .chip{border:1px solid #e5e7eb;background:#fff;border-radius:999px;padding:7px 10px;font-size:12px;cursor:pointer;} .mypage .chip.is-active{border-color:var(--primary-color,#2563eb);color:var(--primary-color,#2563eb);background:#eff6ff;} .mypage .order-card{margin-top:17px; padding-top:17px; background:#fff; border-top:1px solid #e5e7eb; display:flex; align-items:start; justify-content:space-between;gap:30px;align-items:center;} .mypage .order-left{position:relative; display:flex;gap:20px;min-width:0;flex:1 1 auto; align-items:center;} .mypage .order-right{width:90px;flex:0 0 90px;display:flex;flex-direction:column;gap:10px; justify-content:center;} .mypage .order-card.top{border:0; padding:0; margin:0} .mypage .order-card.disabled .prod-name{} .mypage .order-card.disabled .meta-line .date{color:#374151; font-weight:500} .mypage .order-card.cancel .badge.red{background:#ffe8e8; color:#f95959!important} .mypage .order-card.cancel .prod-name{text-decoration:line-through; color:#aaa;} .mypage .order-card.cancel .meta-line .v{position:relative; color:#aaa; text-decoration:line-through} .mypage .order-card.cancel .meta-line .v.date{} .mypage .order-card.cancel .meta-line .v.date:after{content:'취소'; position:absolute; right:-30px; text-decoration:none; color:#fb7878; background-color:#fff; font-weight:500; } .mypage .order-card.cancel .price .value{color:#6b7280; text-decoration:line-through; opacity:.7} .mypage .thumb{width:150px; aspect-ratio:4/3.5; border-radius:14px;overflow:hidden; flex:0 0 120px; align-self:start;} .mypage .thumb img{width:100%;height:100%;object-fit:cover;display:block;} .mypage .order-wrap{margin-top:7px; padding:30px 25px; background-color:#fff; box-shadow:0 0 17px rgba(0,0,0,.06); border-radius:15px;} .mypage .order-card-wrap{margin-top:15px; padding:20px; border-radius:15px; border:1px solid #e5e7eb; } .mypage .order-wrap .order-card-wrap .order-card:first-child{margin-top:0; padding-top:0; border:none;} .mypage .prod-main-img{aspect-ratio:4/3} .mypage .order-card .thumb{width:100px; flex:0 0 100px; aspect-ratio:4/3} .mypage .thumb.icon-plus{display:flex; align-items:center; justify-content:center; aspect-ratio:initial; width:auto; flex:0 0 auto } .mypage .thumb.icon-plus .icon{display:flex; flex-flow:column; gap:2px; align-items:center; justify-content:center; width:60px; height:60px; border-radius:100px; background:#f3f4f6;} .mypage .thumb.icon-plus .icon.before{background-color:#e9f2ff;} .mypage .thumb.icon-plus .icon.before .txt{color:var(--primary-color);} .mypage .thumb.icon-plus .icon .txt{padding-top:1px; display:block; font-size:.75rem; color:#a1a1a1; font-weight:600; line-height:1.2} .mypage .thumb.icon-plus .icon img{width:auto; height:auto; max-width:35%; object-fit:contain} .mypage .info-wrap{display:flex; align-items:center; flex-grow:1;} .mypage .order-info{min-width:0; flex-grow:1} .mypage .row-top{display:flex;gap:10px;align-items:center;margin-bottom:8px;} .mypage .order-no{font-size:.813rem;color:#6b7280;} .mypage .prod-name{font-size:1.188rem; line-height:1.3; color:var(--black-color);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; font-weight:600} .mypage .meta{padding:2px 0; display:flex;flex-direction:column;gap:0; } .mypage .meta-line{display:flex;gap:8px;align-items:flex-start;} .mypage .meta-line .k{font-size:.938rem;color:#6b7280;width:40px;flex:0 0 40px;} .mypage .meta-line .v{font-size:.938rem;color:#374151;min-width:0; font-weight:400} .mypage .meta-line .date{color:var(--primary-color); font-weight:500} .mypage .badge{display:inline-flex;align-items:center;justify-content:center;padding:3px 10px;border-radius:999px;font-size:.813rem;font-weight:600;} .mypage .badge.blue{background:var(--blue-color,#2563eb);color:#fff;} .mypage .badge.gray{background:#eef2f7;color:#7f8791;} .mypage .badge.red{background:#fb7878;color:#fff;} .mypage .badge.complate{} .mypage .price{display:flex; align-items:center; gap:0 10px; flex-flow:column;} .mypage .price .label{display:block;font-size:.875rem;color:#6b7280;} .mypage .price .value{font-size:.938rem;font-weight:500;color:#777} .mypage .btns{display:flex;flex-direction:column;gap:8px;} .mypage .btn-primary,.mypage .btn-ghost,.mypage .btn-danger,.mypage .btn-complete{display:inline-flex;align-items:center;justify-content:center; padding:8px; border-radius:10px;font-size:.938rem;font-weight:700;cursor:pointer;text-decoration:none; } .mypage .btn-primary{color:#fff; border:1px solid var(--primary-color); background:none; color:var(--primary-color)} .mypage .btn-primary:hover{background:var(--primary-color-hover); color:#fff;} .mypage .btn-ghost{background:#fff;color:#111827;border:1px solid #e5e7eb;} .mypage .btn-danger{background:#fff;color:#666;border:1px solid #ddd;} /* color:#f58787;border:1px solid #ffa4a4; */ .mypage .btn-danger:disabled{border:none; color:#888; } .mypage .btn-complete{background:#fff;color:#888;background-color:#f5f5f5; border:none} .mypage .empty{border:1px dashed #e5e7eb;border-radius:16px;padding:18px;background:#fff;text-align:center;} .mypage .empty .t{margin:0 0 6px;font-weight:800;} .mypage .empty .s{margin:0;color:#6b7280;font-size:13px;} /* ✅ 추가: 주문 요약바(예약번호+총결제+결제상세 버튼) */ .mypage .order-summary{padding:5px 0;display:flex;align-items:center;justify-content:space-between;gap:12px;} .mypage .order-summary-left{display:flex;flex-wrap:wrap;align-items:center;gap:10px;min-width:0;} .mypage .order-summary-title{font-size:1rem;color:#6b7280;font-weight:700;} .mypage .order-summary-kv{display:flex;align-items:center;gap:10px;flex-wrap:wrap;} .mypage .order-summary-item{display:flex;align-items:center;gap:6px;white-space:nowrap;} .mypage .order-summary-item .k{font-size:.938rem;color:#6b7280;} .mypage .order-summary-item .v{font-size:.938rem;color:#666;font-weight:600;} .mypage .order-summary-total .v{font-size:1rem;color:var(--black-color);font-weight:600;} .mypage .order-summary-right{display:flex;align-items:center;gap:8px;flex:0 0 auto;} .mypage .order-summary-btn{padding:10px 12px;border-radius:10px;border:1px solid #d5d8dd;background:#fff;color:#666;font-weight:800;font-size:13px;cursor:pointer;} .mypage .order-summary-badge{display:inline-flex;align-items:center;justify-content:center;height:28px;padding:0 10px;border-radius:999px;font-size:13px;font-weight:600;background:#efefef;color:#666;} .mypage .order-summary-badge.cancel{color:#f58787; background-color:#ffeaea;} .mypage .order-summary-sep{width:1px;height:12px;background:#e5e7eb;display:inline-block;} /* ✅ pay-detail-modal (중복 제거한 최종본) */ .pay-detail-modal{position:fixed; inset:0; z-index:9999; display:none;} .pay-detail-modal.active{display:block;} .pay-detail-modal-dim{position:absolute; inset:0; background:rgba(0,0,0,.45); opacity:0; transition:.25s;} .pay-detail-modal-box{position:absolute; left:50%; top:50%; transform:translate(-50%,-45%); width:520px; max-width:92%; background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 10px 40px rgba(0,0,0,.25); opacity:0; transition:.25s;} .pay-detail-modal.active .pay-detail-modal-dim{opacity:1;} .pay-detail-modal.active .pay-detail-modal-box{opacity:1; transform:translate(-50%,-50%);} .pay-detail-modal-head{display:flex; justify-content:space-between; align-items:center; padding:18px 20px; border-bottom:1px solid #eee;} .pay-detail-modal-head h3{font-size:18px; font-weight:800; margin:0;} .pay-detail-modal-close{border:0; background:none; font-size:20px; cursor:pointer;} .pay-detail-modal-body{padding:18px 20px; max-height:62vh; overflow-y:auto;} .pay-detail-modal-foot{padding:14px 20px; border-top:1px solid #eee;} .pay-detail-modal-ok{width:100%; height:46px; border:0; border-radius:12px; background:#2563eb; color:#fff; font-weight:800; cursor:pointer;} .pay-detail-section{padding:14px 14px; border:1px solid #f0f2f5; border-radius:14px; background:#fafbfc; margin-bottom:12px;} .pay-detail-section-title{font-size:.875; font-weight:700; color:#111; margin-bottom:10px;} .pay-detail-row{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:8px 0; border-bottom:1px dashed #e8eaee;} .pay-detail-row:last-child{border-bottom:0;} .pay-detail-label{font-size:14px; color:#667085;} .pay-detail-sub{font-size:12px; color:#98a2b3; margin-left:6px;} .pay-detail-value{font-size:14px; color:#111; font-weight:500; text-align:right;} .pay-detail-divider{height:1px; background:#e8eaee; margin:10px 0;} .pay-detail-minus{color:#e11d48;} .pay-detail-total .pay-detail-label{color:var(--black-color); font-weight:700;} .pay-detail-total .pay-detail-value{font-size:16px; font-weight:800; color:#2563eb;} .pay-detail-status{font-weight:700;} .pay-detail-status.done{color:#2563eb;} .pay-detail-status.cancel{color:#e11d48;} .pay-detail-prodline{align-items:flex-start;} .pay-detail-prodname{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; white-space:normal; line-height:1.35; max-width:70%;} .prod-detail-modal{position:fixed; inset:0; z-index:9999; display:none;} .prod-detail-modal.active{display:block;} .prod-detail-modal-dim{position:absolute; inset:0; background:rgba(0,0,0,.45); opacity:0; transition:.25s;} .prod-detail-modal-box{position:absolute; left:50%; top:50%; transform:translate(-50%,-45%); width:520px; max-width:92%; background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 10px 40px rgba(0,0,0,.25); opacity:0; transition:.25s;} .prod-detail-modal.active .prod-detail-modal-dim{opacity:1;} .prod-detail-modal.active .prod-detail-modal-box{opacity:1; transform:translate(-50%,-50%);} .prod-detail-modal-head{display:flex; justify-content:space-between; align-items:center; padding:18px 20px; border-bottom:1px solid #eee;} .prod-detail-modal-head h3{font-size:18px; font-weight:800; margin:0;} .prod-detail-modal-close{border:0; background:none; font-size:20px; cursor:pointer;} .prod-detail-modal-body{padding:18px 20px; max-height:62vh; overflow-y:auto;} .prod-detail-modal-foot{padding:14px 20px; border-top:1px solid #eee;} .prod-detail-modal-ok{width:100%; height:46px; border:0; border-radius:12px; background:#2563eb; color:#fff; font-weight:800; cursor:pointer;} .prod-detail-section{padding:14px 14px; border:1px solid #f0f2f5; border-radius:14px; background:#fafbfc; margin-bottom:12px;} .prod-detail-section-title{font-size:13px; font-weight:800; color:#111; margin-bottom:10px;} .prod-detail-row{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:8px 0; border-bottom:1px dashed #e8eaee;} .prod-detail-row:last-child{border-bottom:0;} .prod-detail-row.last{border-bottom:1px solid #ddd;} .prod-detail-row .k{font-size:14px; color:#667085;} .prod-detail-row .v{font-size:14px; color:#111; font-weight:500; text-align:right;} .prod-detail-row .v.light{font-weight:400} .prod-detail-divider{height:1px; background:#e8eaee; margin:10px 0;} .prod-detail-row .minus{color:#e11d48;} .prod-detail-row.total .k{color:#111; font-weight:800;} .prod-detail-row.total .v{font-size:16px; font-weight:900; color:#2563eb;} .prod-detail-row.refund-strong .v{color:#2563eb;font-weight:800;} .prod-detail-refund-title{display:block;margin:14px 0 10px;font-size:14px;font-weight:700;color:#111827;} #pd_cancel_state{font-weight:800;color:#ef4444;} .cancel-state{color:#ef4444;font-weight:800;} .minus{color:#e11d48;} .total .k{color:#111; font-weight:800;} .total .v{font-size:16px; font-weight:900; color:#2563eb;} @media (max-width:1024px){ .mypage .profile-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .mypage .order-right{flex:0 0 auto; width:auto;} .mypage .order-summary{/*flex-direction:column;*/ align-items:center;;} .mypage .order-summary-right{/*width:100%;*/} .mypage .order-summary-btn{width:100%;} .mypage .order-card .btns{align-items:flex-end; } .mypage .order-card .btns button{flex:0 0 auto; width:150px;} .mypage .info-wrap{flex-flow:column; flex-grow:1; align-items:start;} .mypage .order-left{} .mypage .order-left .price{flex-flow:row; gap:0 7px;} .mypage .order-left .price .label{order:2; display:none;} .mypage .order-left .price .value{order:1} } @media only screen and (max-width:768px){ .mypage .order-card{flex-direction:column;} .mypage .btns{flex-direction:row;flex-wrap:wrap;} .mypage .btn-primary,.mypage .btn-ghost,.mypage .btn-danger{flex:1 1 120px;} .mypage .order-card{align-items:start;} .mypage .order-right{width:100%;} .mypage .order-card .btns button{flex:1 1 auto} .mypage .order-card .btns button:nth-child(1){order:2} .mypage .order-card .btns button:nth-child(2){order:1} } @media (max-width:560px){ .mypage .thumb{width:96px;height:72px;flex-basis:96px;} .mypage .meta-line .k{width:38px;flex-basis:38px;} .mypage .thumb{width:70px; flex-basis:70px; aspect-ratio:1/1; height:auto; } .mypage .row-top{} .mypage .order-card{gap:15px;} .mypage .order-left{gap:0 16px;} .mypage .mypage-head{margin:15px 0 15px;} .mypage .mypage-title{font-size:1.75rem; font-weight:700} .mypage .mypage-sub{margin:3px 0 0} .mypage .profile-grid{gap:8px;} .mypage .mypage-orders h2{padding-bottom:2px; font-size:1.375rem;} .mypage .order-summary{gap:15px 0; align-items:center;} .mypage .order-summary-sep{display:none;} .mypage .order-summary-kv{gap:4px 0} .mypage .order-summary-left{gap:0 10px;} .mypage .order-summary-item{position:relative; margin-right:20px;} .mypage .order-summary-item:first-child:before{content:''; position:absolute; right:-10px; top:20%; width:1px; height:60%; background-color:#ddd;} .mypage .order-summary-item.order-summary-total{margin-right:0} .mypage .order-summary-kv .order-summary-item:first-child{/*width:100%;*/} .mypage .order-summary-item .k{width:70px; display:none;} .mypage .order-summary-badge{margin-left:5px; height:23px; padding:0 6px; font-weight:500; font-size:11px} .mypage .order-summary-title{font-size:1rem} .mypage .order-wrap{margin-top:0; padding:20px;} .mypage .order-card-wrap{padding:15px;} .mypage .order-card{/*padding:23px*/; padding-top:15px; margin-top:15px;} .mypage .badge{padding:3px 8px 1px;} .mypage .prod-name{margin:0; } .mypage .meta{gap:0;} .mypage .meta-line{gap:3px;} .mypage .meta-line .v{line-height:1.4} .mypage .order-summary-item .v{font-size:.875rem} .mypage .meta-line .v.date{font-size:1rem; line-height:1.3} .mypage .price .value{font-size:.875rem} } .modal-terms h3{font-size:1.125rem;margin-bottom:12px} .modal-terms h4{margin-top:16px;font-size:.938rem} .modal-terms p{margin-top:6px;line-height:1.6;color:#444} /* 메인 */ .main-con{} .main-space{margin:85px 0;} .main-space-md{margin:70px 0;} .main-space-inner{padding:85px 0;} .main-space-inner-md{padding:60px 0;} .trip-member{width:100%; font-size:13px; margin:7px 0; text-align:right;} .trip-member a{margin-left:12px; color:#555; text-decoration:none} .trip-header{background:#fff; border-bottom:1px solid #e5e7eb} .trip-header-inner{display:flex; align-items:center; justify-content:space-between; padding:13px 0; gap:28px; width:1400px; margin:0 auto;} .trip-header-left{display:flex; align-items:center; gap:0 27px;} .trip-logo a{display:flex; align-items:center; color:var(--primary-color); font-weight:800} .trip-logo a span{line-height:1.3; display:block; text-align:center;} .trip-logo a small{display:block; font-size:.875rem; font-weight:500; color:#888; text-align:center; line-height:1; letter-spacing:.05rem} .trip-logo img{height:48px} .trip-search{flex:1; } .trip-search-box{display:flex; width:540px; align-items:center; height:50px; padding:0 25px; background:#f3f4f6; border-radius:40px; text-decoration:none} .trip-search-icon{display:flex; align-items:center; margin-right:10px} .trip-search-icon img{max-width:18px;} .trip-search-text{flex:1; padding-left:2px;; color:#333; background:none; border:none; font-weight:500} .trip-search-text::placeholder{color:#aaa;} .trip-search-btn{display:flex; align-items:center; margin-left:auto} .trip-search-btn img{max-width:18px;} .trip-util{display:flex; flex-direction:column; align-items:flex-end} .trip-quick{display:flex; gap:35px} .trip-quick-item{display:flex; flex-direction:column; align-items:center; text-decoration:none; color:var(--black-color)} .trip-quick-icon img{height:24px; display:block;} .trip-quick-text{font-size:13px; margin-top:4px} .trip-cate-swiper{margin:17px 0;} .trip-cate-swiper .swiper-wrapper{gap:0 35px; justify-content:center;} .trip-cate-swiper .swiper-slide{width:auto!important; flex-shrink:0; margin-right:0 !important;} .trip-cate-swiper .swiper-slide > a{display:flex; align-items:center; gap:0 8px} .trip-cate-swiper .swiper-slide > a img{max-height:40px} .trip-cate-swiper .swiper-slide > a .trip-cate-text{font-size:1.125rem; font-weight:600; color:var(--black-color)} .trip-cate-swiper .swiper-slide a,.trip-cate-swiper .swiper-slide button{white-space:nowrap;} .trip-header{position:relative; z-index:100; background:#fff; border-bottom:1px solid #e5e7eb; transition:box-shadow .25s ease, transform .25s ease;} .trip-header.is-fixed{position:fixed; top:0; left:0; width:100%; z-index:1000; box-shadow:0 6px 18px rgba(0,0,0,.08);} .trip-header.is-fixed .trip-header-inner{padding:15px 0;} body.header-fixed{padding-top:85px;} @media (max-width:768px){ body.header-fixed{padding-top:64px;} .trip-header.is-fixed .trip-header-inner{padding:10px;} .trip-logo a span{font-size:1.625rem} .trip-logo a small{font-size:.75rem; letter-spacing:0;} } .main-visual-swiper{position:relative; overflow:hidden} .main-visual-swiper .swiper-slide{transition:opacity .3s ease, transform .3s ease} .main-visual-item{position:relative; display:block; border-radius:32px; overflow:hidden; text-decoration:none} .main-visual-thumb{position:relative; height:550px} .main-visual-thumb img{width:100%; height:100%; object-fit:cover; display:block} .main-visual-dim{position:absolute; left:60px; top:0; width:450px; height:100%; background:linear-gradient(to bottom, rgba(196,101,60,0.8) 0%, rgba(124,86,71,0.35) 66%, rgba(102,102,102,0.3) 100%); z-index:1} .main-visual-dim.blue{background: linear-gradient(180deg, rgba(63,115,185,0.85) 0%, rgba(79,130,199,0.55) 45%, rgba(79,130,199,0.2) 70%, rgba(79,130,199,0) 100%);} .main-visual-dim.blue-02{background: linear-gradient(180deg, rgba(47,124,199,0.85) 0%, rgba(63,142,216,0.55) 40%, rgba(63,142,216,0.25) 65%, rgba(63,142,216,0) 100%);} .main-visual-swiper .swiper-slide.first .main-visual-dim{background: linear-gradient(180deg, rgba(11,116,205,0.9) 0%, rgba(0,164,199,0.5) 60%,rgba(79,130,199,0) 100%);} .main-visual-swiper .swiper-slide.first .main-visual-sub{color:#f9e97c; font-weight:600;} .main-visual-swiper .swiper-slide.second .main-visual-dim{background:linear-gradient(180deg,rgba(0,104,115,.8) 0%,rgba(76,193,192,.42) 58%,rgba(79,130,199,0) 100%);} .main-visual-swiper .swiper-slide.second .main-visual-sub{color:#f9e97c; font-weight:600;} .main-visual-text{position:absolute; left:115px; top:12%; z-index:2; color:#fff} .main-visual-sub{margin:0 0 15px; font-size:1.25rem; font-weight:700; color:#ffd57b} .main-visual-sub.blue{color:#a8ecff} .main-visual-title{margin:0; font-size:2.375rem; line-height:1.25; font-weight:600} .main-visual-tag{margin:28px 0 0; color:rgba(255,255,255,.82)} .main-visual-swiper .swiper-slide:not(.swiper-slide-active){opacity:.55} .main-visual-prev,.main-visual-next{position:absolute; top:50%; transform:translateY(-50%); z-index:10; width:52px; height:52px; border-radius:50%; background:rgba(0,0,0,.35); cursor:pointer; transition:all .3s} .main-visual-prev:hover,.main-visual-next:hover{background:rgba(0,0,0,.75);} .main-visual-prev{left:24px} .main-visual-next{right:24px} .main-visual-swiper .swiper-pagination-bullet{background:#fff} .main-visual-prev:after,.main-visual-next:after{content:''; position:absolute; left:calc(50% - 2px); top:50%; width:11px; height:11px; border-top:2px solid #fff; border-right:2px solid #fff; transform:translate(-50%,-50%) rotate(45deg)} .main-visual-prev:after{transform:rotate(-135deg); margin-top:-5px;} .main-visual-pagination{position:absolute; left:0; right:0; bottom:26px; z-index:10; text-align:center} .prod-list{display:grid; grid-template-columns:repeat(4,1fr); gap:45px 30px;} .prod-tit{padding-bottom:15px; font-size:1.75rem; font-weight:600} .prod-item .img-wrap{aspect-ratio:4/3; overflow:hidden} .prod-item .img-wrap img{width:100%; height:100%; object-fit:cover; display:block; border-radius:15px} .prod-item .txt-wrap{padding-top:13px;} .prod-item .txt-wrap .point{padding-bottom:2px; color:var(--primary-color); font-size:1rem} .prod-item .txt-wrap .name{font-size:1.063rem; color:#222; } .prod-item .txt-wrap .date{padding-top:3px; font-size:.875rem; color:#777;} .prod-item .txt-wrap .price{padding-top:7px; font-size:1.25rem; font-weight:600;} .prod-list.row{ grid-template-columns:repeat(2,1fr); gap:20px 20px;} .prod-list.row.one{ grid-template-columns:repeat(1,1fr);} .prod-list.row .prod-item > a{display:flex; align-items:center; gap:0 25px;} .prod-list.row .img-wrap{position:relative; width:230px;} .prod-list.row .img-wrap .badge{position:absolute; left:10px; bottom:10px; padding:0.5px 6px; border-radius:100px; background-color:#fbce5a; font-size:12px; font-weight:500} .prod-list .swiper-pagination{position:relative; margin-top:20px} :where(.trip-swiper-4,.trip-swiper-2){width:100%} :where(.trip-swiper-4,.trip-swiper-2) .swiper-wrapper{display:grid;grid-template-columns:repeat(4,1fr); gap:20px 0} :where(.trip-swiper-4,.trip-swiper-2) .swiper-slide{width:auto} .trip-swiper-2 .swiper-wrapper{gap:0} .trip-swiper-2 .swiper-pagination{position:relative; width:auto; font-size:14px; text-align:center; color:#333; bottom:0;} @media only screen and (max-width:1400px){ .trip-header-inner{width:92%; left:4%} } @media only screen and (max-width:1200px){ .trip-search-box{width:350px;} } @media only screen and (max-width:1024px){ .trip-logo img{height:45px;} .trip-header-left{gap:0 20px;} .trip-quick-icon img{height:20px;} .trip-cate-swiper{margin:11px;} .trip-cate-swiper .swiper-wrapper{} .trip-cate-swiper .swiper-slide > a .trip-cate-text{font-size:1.063rem} .trip-cate-swiper .swiper-slide > a img{max-height:35px;} .main-visual-thumb{height:450px} .main-visual-dim{left:40px} .main-visual-text{left:80px} .main-visual-sub{font-size:1.25rem} .main-visual-title{font-size:2.25rem} .main-visual-tag{margin:10px 0 0} } @media(max-width:768px){ .trip-quick{gap:20px;} .main-space{margin:70px 0;} .main-space-md{margin:50px 0;} .main-space-inner{padding:70px 0} .main-space-inner-md{padding:50px 0;} .trip-logo img{height:40px;} .trip-header-left{flex-grow:1; justify-content:space-between;} .trip-search-box{justify-self:end;} .trip-cate-swiper .swiper-wrapper{gap:0 50px} .trip-header-inner{padding:12px 15px; width:100%; left:0; gap:0;} :where(.trip-swiper-4,.trip-swiper-2) .swiper-wrapper{display:flex;gap:0} :where(.trip-swiper-4,.trip-swiper-2) .swiper-slide{width:calc((100% - 12px)/1.5);margin-right:12px} .prod-tit{padding-bottom:15px; font-size:1.563rem} .trip-cate-swiper .swiper-slide > a img{max-height:30px} .prod-item .img-wrap{aspect-ratio:4/2.5} .trip-cate-swiper{margin:15px 0 18px; padding:0 20px!important} .trip-cate-swiper .swiper-wrapper{/*justify-content:start;*/} .trip-cate-swiper .swiper-slide > a{flex-flow:column;} .trip-cate-swiper .swiper-slide > a .trip-cate-text{font-size:.938rem; color:#333;} } @media only screen and (max-width:650px){ .main-space{margin:60px 0;} .main-space-inner{padding:60px 0;} .trip-header-inner{padding:12px 13px;} .trip-logo img{height:33px;} .trip-search-box{padding:0 20px; width:250px; height:45px} .trip-search-icon{margin-right:5px;} .trip-search-icon img{max-width:13px;} .trip-search-text{width:150px;} .trip-cate-swiper .swiper-wrapper{gap:0 20px;} .trip-cate-swiper .swiper-slide > a{gap:0 3px;} .trip-cate-swiper .swiper-slide > a img{max-height:30px;} .prod-item .txt-wrap .name{line-height:1.4} .prod-tit{font-size:1.438rem} } .travel-theme{padding:60px 0; background:var(--sky-bg2)} .travel-theme .ui-tab{display:flex; gap:0 55px; padding-top:20px;} .travel-theme .ui-tab .ui-tab-menu{display:flex; flex-flow:column; flex-shrink:0; width:330px; gap:12px 0; padding-bottom:0} .travel-theme .ui-tab .ui-tab-menu .ui-tab-btn{position:relative; display:flex; padding:9px; align-items:center; gap:0 11px; background:none; font-size:1.125rem; border:none; box-shadow:0 0 0 1px #c4d7e5; } .travel-theme .ui-tab .ui-tab-menu .ui-tab-btn.active{background:#fff; box-shadow:0 0 0 2px var(--primary-color); color:var(--primary-color); font-weight:600} .travel-theme .ui-tab .ui-tab-menu .ui-tab-btn.active:after{content:''; position:absolute; right:25px; top:50%; transform:translateY(-50%) rotate(45deg); width:10px; height:10px; border-top:2px solid var(--primary-color); border-right:2px solid var(--primary-color)} .travel-theme .ui-tab .ui-tab-menu .ui-tab-btn img{max-width:53px; border-radius:100px;} .travel-theme .ui-tab .ui-tab-panels{flex-grow:1; min-width:0} .theme-swiper{overflow:visible;} .theme-swiper .swiper-slide{/*width:31.5%; */} .theme-card{position:relative;display:block;overflow:hidden;border-radius:24px;color:#fff;text-decoration:none;} .theme-thumb{position:relative; aspect-ratio:4/4; height:100%;} .theme-thumb img{display:block;width:100%;height:100%;object-fit:cover;} .theme-dim{position:absolute;left:0;top:0;width:100%;height:100%;background:linear-gradient(to top,rgba(0,0,0,.7) 0%,rgba(0,0,0,.28) 38%,rgba(0,0,0,.08) 100%);z-index:1;} .theme-cont{position:absolute;left:26px;right:26px;bottom:24px;z-index:2;} .theme-title{margin:0;font-size:1.313rem;line-height:1.35;font-weight:500;word-break:keep-all;} .theme-loc{position:relative;margin:12px 0 0;padding:16px 0 0 17px; color:rgba(255,255,255,.92); border-top:1px solid rgba(255,255,255,.3)} .theme-loc:after{content:""; position:absolute; width:10px; height:14px; left:0; top:calc(50% + 8px); transform:translateY(-50%); background:url("/assets/triveon/img/icon-pin2.png") no-repeat left center/cover;} .theme-swiper-scrollbar{position:relative !important;left:auto !important;bottom:auto !important;width:100% !important;height:4px !important;margin-top:24px;background:rgba(0,0,0,.08);} .theme-swiper-scrollbar .swiper-scrollbar-drag{background:#111;} .who-with .swiper-controls{display:flex; justify-content:center; gap:0 25px; margin-top:15px; align-items:center;} .who-with :where(.swiper-button-next,.swiper-button-prev){position:relative!important; width:35px!important; height:35px!important; color:#333!important; top:auto!important; margin-top:auto!important; border:1px solid #ddd; border-radius:8px;} .who-with :where(.swiper-button-next,.swiper-button-prev):after{ font-size:10px!important;} .who-with .ui-tab-menu{display:flex; flex-wrap:wrap; gap:5px;} .full-banner a{position:relative; display:flex; align-items:center; justify-content:space-between; padding:40px 90px; background:#f9dc7e url(/assets/triveon/img/banner-img.png) no-repeat center right 27%; border-radius:15px;} .full-banner a .tit{font-size:1.563rem; font-weight:600} .full-banner .go{padding:6px 20px; border-radius:5px; background-color:#fff; font-size:1.063rem; color:var(--black-color); font-weight:500} .full-banner:hover .go{background-color:} .e-pick{} .e-pick .prod-tit{width:100%; color:var(--primary-color)} .e-pick .con-wrap{display:flex; flex-wrap:wrap; gap:0 35px; padding:25px; border:2px solid var(--primary-color); border-radius:20px;} .e-pick :where(.visual-wrap,.list-wrap){flex:1} .e-pick .visual-wrap{position:relative; padding:35px 40px; background:url(/assets/triveon/img/ep-bg.jpg) no-repeat center / cover; border-radius:15px;} .e-pick .visual-wrap:before{content:''; position:absolute; left:0; bottom:0; width:100%; height:50%; background:linear-gradient(to bottom, transparent, rgba(0,0,0,.55)); border-radius:0 0 15px 15px} .e-pick .visual-wrap .txt-wrap{position:absolute; bottom:35px; color:#fff;} .e-pick .visual-wrap .txt-wrap .sub-tit{} .e-pick .visual-wrap .txt-wrap .tit{font-size:2.063rem; font-weight:600; line-height:1.4} .e-pick .visual-wrap .txt-wrap .txt{font-weight:300} .e-pick .visual-wrap .txt-wrap > a{position:relative; margin-top:20px; padding:6px 30px 6px 13px; background-color:var(--primary-color); color:#fff; border-radius:6px;} .e-pick .visual-wrap .txt-wrap > a:hover{background:var(--primary-color-hover)} .e-pick .visual-wrap .txt-wrap > a:before{content:''; position:absolute; right:16px; top:50%; transform:translateY(-50%) rotate(45deg); width:8px; height:8px; border-top:2px solid #fff; border-right:2px solid #fff; } .e-pick .list-wrap{padding:20px 0;} .e-pick .prod-list.row{grid-template-columns:repeat(1,1fr); gap:15px 15px;} .e-pick .prod-list.row .img-wrap{width:108px; flex-shrink:0} .e-pick .prod-item .txt-wrap{padding-top:0;} .e-pick .prod-item .txt-wrap .name{font-size:1rem} .e-pick .prod-item .txt-wrap .price{padding-top:3px; font-size:1.063rem; } .main-recommend .basic-slide{padding-top:10px;} .main-review-card{display:flex; gap:0 20px} .main-review-card .img-wrap{width:250px; aspect-ratio:1/1; overflow:hidden; flex-shrink:0; border-radius:10px;} .main-review-card .img-wrap img{width:100%; height:100%; object-fit:cover;} .main-review-card .info-wrap .rating{position:relative; width:83px; height:15px; background:url(/assets/triveon/img/rating-gray.png) no-repeat left center / auto 100%;} .main-review-card .info-wrap .rating span{position:absolute; left:0; width:100%; height:100%; background:url(/assets/triveon/img/rating.png) no-repeat left center / auto 100%; } .main-review-card .info-wrap .txt{padding-top:10px; font-size:1.063rem; line-height:1.45; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;} .main-review-card .info-wrap .name{margin-top:15px; padding-top:15px; border-top:1px solid #ddd; font-size:.875rem; color:#777;} .pay .pay-thumb{width:80px; aspect-ratio:1/1; overflow:hidden; flex-shrink:0; border-radius:10px;} .pay .pay-thumb img{width:100%; height:100%; object-fit:cover;} .basic-slide{width:100%;overflow:hidden} .basic-slide .swiper-slide{height:auto} @media only screen and (max-width:1400px){ .travel-theme .ui-tab{gap:0 40px;} /*.travel-theme .ui-tab .ui-tab-menu .ui-tab-btn{width:300px} .theme-swiper .swiper-slide{width:auto;}*/ } @media only screen and (max-width:1200px){ .travel-theme .ui-tab .ui-tab-menu{width:290px} .theme-thumb{aspect-ratio:3/4} } @media only screen and (max-width:1024px){ .travel-theme{} .travel-theme .ui-tab{padding-top:10px;} .travel-theme .ui-tab .ui-tab-menu .ui-tab-btn img{max-width:40px} .full-banner a{padding:40px 70px;} .full-banner .go{font-size:1rem} .e-pick .visual-wrap .txt-wrap .tit{font-size:1.563rem} .travel-theme .ui-tab .ui-tab-menu{width:250px} .theme-thumb{aspect-ratio:4/4} } @media only screen and (max-width:768px){ .travel-theme .ui-tab .ui-tab-menu .ui-tab-btn{width:250px} .trip-swiper-2 .swiper-pagination{margin-top:0;} .prod-list.row .prod-item > a{gap:0 20px;} } @media only screen and (max-width:650px){ .travel-theme{padding:50px 0} .travel-theme .ui-tab{gap:0 20px} .travel-theme .ui-tab .ui-tab-menu{width:130px; gap:10px 0} .travel-theme .ui-tab .ui-tab-menu .ui-tab-btn{padding:6px; gap:0 5px; width:130px; font-size:1rem} .travel-theme .ui-tab .ui-tab-menu .ui-tab-btn img{max-width:35px;} .travel-theme .ui-tab .ui-tab-menu .ui-tab-btn p span{display:none;} .travel-theme .ui-tab .ui-tab-menu .ui-tab-btn.active:after{width:7px; height:7px; right:15px;} .theme-thumb{aspect-ratio:3.7/4} .prod-item .txt-wrap .price{padding-top:4px;} .who-with .prod-item .img-wrap{aspect-ratio:4/4} .main-review-card{flex-flow:column; gap:12px 0;} .main-review-card .img-wrap{width:100%; aspect-ratio:4/3} .main-review-card .info-wrap .txt{-webkit-line-clamp:3;} .full-banner .go{padding:6px 15px;} } .cs-section{} .cs-wrap{display:flex;gap:28px;align-items:stretch} .cs-info{width:36%;padding:38px;background:linear-gradient(135deg,#1b5fc6 0%,#2192d0 100%);border-radius:24px;color:#fff;box-sizing:border-box} .cs-sub{margin:0 0 8px;font-size:0.875rem;font-weight:500;opacity:.8} .cs-title{margin:0 0 17px;font-size:2rem;font-weight:700;line-height:1.2} .cs-phone-box{padding:18px 25px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:18px} .cs-phone-box .label{font-size:0.938rem;font-weight:500;opacity:.85; line-height:1.3} .cs-phone-box .phone{margin:0;font-size:2.125rem;font-weight:800;line-height:1;letter-spacing:-0.03em} .cs-meta{margin-top:22px} .cs-meta p{display:flex;gap:18px 10px;margin:0;padding:2px 0;line-height:1.5;color:rgba(255,255,255,.95)} .cs-meta p span{display:inline-block;min-width:65px;font-weight:700;color:#fff} .cs-kakao-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:170px;height:52px;margin-top:26px;padding:0 22px;background:#fee500;border-radius:999px;font-size:1rem;font-weight:700;color:#191919;text-decoration:none;transition:all .2s ease} .cs-kakao-btn img{max-width:22px} .cs-kakao-btn:hover{transform:translateY(-2px)} .cs-notice{flex:1;padding:50px 38px;background:#fff;border:1px solid #e8eef5;border-radius:24px;box-sizing:border-box;box-shadow:0 10px 30px rgba(15,23,42,.05)} .notice-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px} .notice-head h3{margin:0;font-size:1.5rem;font-weight:700;color:#111} .notice-head .more{font-size:0.938rem;font-weight:600;color:#666;text-decoration:none} .notice-list{margin:0;padding:0;list-style:none} .notice-list li{border-bottom:1px solid #dde2e5} /* e8edf1 */ .notice-list li:first-child{} .notice-list li a{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0;text-decoration:none} .notice-list li .tit{flex:1;margin:0;font-size:1rem;font-weight:500;line-height:1.5;color:#222;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .notice-list li .date{flex-shrink:0;font-size:0.875rem;color:#8a94a6} @media(max-width:1024px){ .cs-wrap{gap:20px} } @media(max-width:768px){ .cs-wrap{flex-direction:column} .cs-info{width:100%} .cs-notice{width:100%} .cs-section{margin:56px 0} .cs-wrap{gap:16px}.cs-info{padding:26px;border-radius:20px} .cs-title{margin-bottom:20px;font-size:1.625rem} .cs-phone-box{padding:18px 18px;border-radius:16px} .cs-phone-box .phone{font-size:1.75rem} .cs-meta{margin-top:18px} .cs-meta p{} .cs-meta p span{display:block;min-width:auto;margin-bottom:2px;font-size:0.875rem;opacity:.8} .cs-kakao-btn{width:100%;height:48px;margin-top:20px;font-size:0.938rem} .cs-notice{padding:24px 22px;border-radius:20px}.notice-head{margin-bottom:14px} .notice-head h3{font-size:1.25rem}.notice-list li a{display:block;padding:14px 0} .notice-list li .tit{margin-bottom:6px;font-size:0.938rem;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .notice-list li .date{display:block;font-size:0.813rem} .season .prod-list{grid-template-columns:repeat(2, 1fr); gap:35px 20px} .e-pick .visual-wrap .txt-wrap{position:relative; bottom:auto} .e-pick .visual-wrap .txt-wrap .sub-tit{padding-bottom:3px;} .e-pick .visual-wrap:before{background:linear-gradient(to right, rgba(0,0,0,.55), transparent)} } @media(max-width:1024px){ .theme-swiper .swiper-slide{/*width:42%;*/} .theme-title{font-size:1.5rem;} .theme-loc{font-size:1rem;} } @media(max-width:768px){ .theme-swiper .swiper-slide{/*width:78%;*/} .theme-card{border-radius:20px;} .theme-cont{left:20px;right:20px;bottom:20px;} .theme-title{font-size:1.25rem;} .theme-loc{margin-top:16px;padding-top:14px;font-size:.938rem;} .full-banner a{padding:30px 40px; background-size:270px;} .e-pick .visual-wrap{padding:30px 35px;} .e-pick .visual-wrap:before{height:100%; border-radius:15px 0 0 15px} .e-pick .visual-wrap .txt-wrap .txt{display:none} .e-pick .con-wrap{flex-flow:column; padding:20px} .e-pick .list-wrap{padding:15px 0 0} .e-pick .prod-list.row{gap:10px;} } @media only screen and (max-width:650px){ .full-banner a .tit{font-size:1.25rem} .full-banner a{padding:30px 30px; background-image:none;} .e-pick .con-wrap{padding:15px;} .cs-phone-box{padding:15px;} .cs-title {margin-bottom:15px;} .cs-phone-box .label{margin:0;} } /* 탭 */ .ui-tab-panel{display:none;} .ui-tab-panel.active{display:block;} .ui-tab-menu{padding-bottom:25px; } .filter{padding-bottom:25px;} .filter-btn,.ui-tab-btn{padding:8px 17px; background:#fff; border:1px solid #ddd; border-radius:100px; color:#353535; font-size:1rem} .filter-btn.active,.ui-tab-btn.active{background-color:#282828; color:#fff; border:none;} @media only screen and (max-width:768px){ /*body{padding-bottom:64px} .trip-quick{position:fixed; left:0; right:0; bottom:0; height:64px; background:#fff; border-top:1px solid #e5e7eb; display:flex; justify-content:space-around; align-items:center; z-index:1000; padding-bottom:env(safe-area-inset-bottom);} .trip-quick-item{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; } .trip-member{display:none} */ .ui-tab-menu{padding-bottom:20px} .main-visual-thumb{height:400px} .main-visual-item{border-radius:22px} .main-visual-dim{width:350px} .main-visual-text{left:75px; top:14%} .main-visual-sub{margin:0 0 12px; font-size:1rem} .main-visual-title{font-size:2rem} .main-visual-tag{margin:16px 0 0; font-size:.938rem} .main-visual-prev,.main-visual-next{display:none} } @media only screen and (max-width:650px){ .main-visual-thumb{height:340px;} .main-visual-dim{left:0; width:100%;} .main-visual-sub{margin:0 0 10px} .main-visual-title{font-size:1.875rem} .main-visual-text{top:13%; left:35px;} .main-visual-tag{margin:7px 0 0} .filter-btn, .ui-tab-btn{padding:7px 14px;} .who-with .ui-tab-menu .ui-tab-btn{padding:7px 11px;} .who-with .ui-tab-menu{gap:4px;} .prod-item .img-wrap{aspect-ratio:4/3.2} .ui-tab-menu{padding-bottom:15px;} } /* 검색 */ body.scroll-lock{overflow:hidden;} .tour-sub{margin:15px auto 70px;} .tour-sub-p{padding:70px 0;} .tour-page{padding:0 0 80px;} .tour-topbar{padding:0 0 15px;border-bottom:2px solid #222;} .tour-topbar-left{display:flex;align-items:center;flex-wrap:wrap;gap:0 22px;} .tour-total{font-size:1.125rem;font-weight:700;color:#111;} .tour-total span{color:#356af6;} .tour-topbar-line{width:1px;height:22px;background:#d9d9d9;} .tour-period{display:flex;align-items:center;gap:0 12px;} .tour-topbar-label{font-size:1rem;color:#565656;font-weight:500;} .tour-period-text{font-size:1.125rem;color:#222;font-weight:600;} .tour-change-btn{display:inline-flex;align-items:center;gap:0 3px; padding:5px 10px;border:1px solid #aaa;border-radius:8px;background:#fff;font-size:.875rem; font-weight:500; color:#555;cursor:pointer;} .tour-change-btn img{max-width:17px; opacity:.8} .tour-depart{display:flex;align-items:center;gap:0 14px;} .tour-depart-chips{display:flex;align-items:center;gap:0 5px;} .tour-top-chip{padding:5px 12px;border:1px solid #d7d7d7;border-radius:999px;background:#fff;font-size:.875rem;color:#555;cursor:pointer;} .tour-top-chip.active{background:#222;color:#fff;border-color:#222;} .tour-layout{display:flex;align-items:flex-start;gap:0 55px;padding-top:40px;} .tour-filter{width:300px;flex:0 0 300px;} .tour-filter-title{padding:10px 0 28px;font-size:1.313rem;color:#222;font-weight:600;} .tour-filter-group{padding:0 0 20px;margin:0 0 25px;border-bottom:1px solid #ececec;} .tour-filter-label{padding-bottom:11px;font-size:.938rem;color:#565656;font-weight:600;} .tour-select-wrap{padding-bottom:16px;} .tour-select-btn{display:flex;align-items:center;justify-content:space-between;width:100%;height:54px;padding:0 16px;border:1px solid #d7d7d7;border-radius:8px;background:#fff;font-size:1rem;color:#555;cursor:pointer;} .tour-select-btn span{position:relative; width:100%; display:block; text-align:left;} .tour-select-btn span:before{content:''; position:absolute; top:50%; right:0; width:8px; height:8px; border-left:1px solid #aaa; border-bottom:1px solid #aaa; transform:translateY(-50%) rotate(-45deg)} .tour-chip-wrap{display:flex;align-items:center;flex-wrap:wrap;gap:8px 6px;} .tour-filter-chip{padding:5px 11px;border:1px solid #d9d9d9;border-radius:999px;background:#fff;font-size:.875rem;color:#666;cursor:pointer;transition:all .2s ease;} .tour-filter-chip.active{border-color:#4a6cf7;color:#4a6cf7;background:#f8faff; font-weight:600} .tour-range-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px;} .tour-range-value{font-size:1rem;color:#5a6792;font-weight:600;} .tour-range-box{position:relative;height:28px;} .tour-range-track{position:absolute;top:13px;left:0;width:100%;height:3px;background:#d9dbe3;border-radius:999px;} .tour-range-progress{position:absolute;top:13px;height:3px;background:#98a1b7;border-radius:999px;} .tour-range-thumb{position:absolute;top:5px;width:20px;height:20px;border:1px solid #d8d8d8;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08);cursor:pointer;transform:translateX(-50%); touch-action:none;} .tour-range-thumb.left{left:0;} .tour-range-thumb.right{left:46%;} .tour-content{flex:1;min-width:0;} .tour-content-top{position:sticky; top:80px; display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 0; z-index:99; background-color:#fff;} .tour-filter-open{display:none;height:42px;padding:0 16px;border:1px solid #aaa;border-radius:999px;background:#fff;font-size:.938rem;color:#555;cursor:pointer;} .tour-filter-open i{margin-right:6px;} .tour-filter-open img{display:block; margin-right:2px; max-width:17px; } .tour-selected-swiper{margin-left:15px!important; padding-right:30px!important;} .tour-selected-swiper .swiper-slide{width:auto;} .tour-selected-swiper:before{content:''; position:absolute; right:0; top:0; width:40px; height:100%; background:linear-gradient(to right, transparent, #fff); z-index:5} .tour-selected-list{display:flex;align-items:center; gap:10px 15px; min-width:0} .tour-reset-btn{position:relative; display:inline-flex;align-items:center;gap:0 5px;height:42px;padding:0 16px;border:none;border-radius:999px;background:#f2f5fb;font-size:1rem;color:#8591b3;cursor:pointer;} .tour-reset-btn:after{content:''; position:absolute; right:-15px; top:20%; width:1px; height:60%; background-color:#ddd;} .tour-reset-btn img{max-width:16px;} .tour-selected-chip{display:inline-flex;align-items:center;gap:0 10px; padding:7px 16px;border:1px solid #d9d9d9;border-radius:999px;background:#fff;font-size:.938rem;color:#555;cursor:pointer;} .tour-selected-chip .del{display:inline-block; position:relative; width:13px; height:13px; } .tour-selected-chip .del:before,.tour-selected-chip .del:after{content:''; position:absolute; left:0; top:6px; width:100%; height:1px; background-color:#bbb; transform:rotate(45deg)} .tour-selected-chip .del:after{transform:rotate(-45deg)} .tour-sort-btn{display:inline-flex;align-items:center;gap:0 5px;border:none;background:none;font-size:1rem;color:#999;cursor:pointer;white-space:nowrap;} .tour-sort-btn > img{max-width:18px;} .tour-sort{display:none; position:absolute; top:42px; right:0; padding:3px 0; border:1px solid #777; border-radius:10px; z-index:999; background-color:#fff;} .tour-sort li{padding:7px 12px; cursor:pointer; font-size:.813rem; color:#666;} .tour-sort li:hover{background-color:#efefef;} .tour-sort li:first-child:hover{border-radius:10px 10px 0 0} .tour-sort li:last-child:hover{border-radius:0 0 10px 10px} .tour-card-list{display:flex;flex-direction:column;} .tour-card-item{padding:22px 0;border-bottom:1px solid #ececec;} .tour-card-head{display:flex;align-items:flex-start;gap:0 24px;} .tour-card-thumb{position:relative;width:236px;flex:0 0 236px;border-radius:18px;overflow:hidden;} .tour-card-thumb img{display:block;width:100%;height:178px;object-fit:cover;} .tour-card-badge{position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:center;justify-content:center;min-width:56px;height:28px;padding:0 8px;border-radius:6px;background:#3891ff;font-size:.813rem;color:#fff;font-weight:600;} .tour-card-main{display:flex; flex-flow:column; align-items:flex-start; align-self:stretch; justify-content:space-between;gap:0 24px;flex:1;min-width:0;} .tour-card-info{flex:1;min-width:0;} .tour-card-title{padding-bottom:14px;font-size:1.25rem;line-height:1.5;color:var(--black-color);font-weight:600;word-break:break-all;} .tour-card-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 0;padding-bottom:40px;} .tour-card-meta span{position:relative;padding-right:14px;margin-right:14px;font-size:.938rem;color:#777;line-height:1.2;} .tour-card-meta span:last-child{padding-right:0;margin-right:0;} .tour-card-meta span:last-child:after{display:none;} .tour-card-meta span:after{content:'';position:absolute;top:50%;right:0;width:1px;height:12px;background:#ddd;transform:translateY(-50%);} .tour-card-score{color:var(--black-color)!important;font-weight:600;} .tour-card-score a{display:flex; align-items:center; gap:0 5px;} .tour-card-score .star{padding:0; margin:0; margin-top:-2px; display:inline-block; width:16px; height:16px; background:url(/assets/triveon/img/rating.png) no-repeat center left / auto 100%} .tour-card-score .star:after{background: none;} .tour-card-score .thin{font-weight:400; color:#555;} .tour-card-score i{margin-right:4px;} .tour-card-date-row{display:flex;align-items:center;gap:0;} .tour-date-toggle{display:inline-flex;align-items:center;gap:0 5px;border:none;background:none;font-size:.938rem;color:#444;cursor:pointer;} .tour-date-toggle > img{max-width:19px} .tour-card-option{display:flex; align-items:center; justify-content:space-between; width:100%; } .tour-date-selected{border:none;background:none;font-size:.938rem;color:var(--primary-color);font-weight:600;cursor:pointer;} .tour-card-side{display:flex;align-items:center;gap:0 18px; white-space:nowrap;} .tour-card-price{font-size:1.25rem;color:#111;font-weight:700;} .tour-book-btn{display:inline-flex;align-items:center;justify-content:center;min-width:104px;height:48px;padding:0 18px;border:1px solid var(--primary-color);border-radius:8px;background:#fff;font-size:1rem;color:var(--primary-color);font-weight:600;text-decoration:none;} .tour-book-btn:hover{background-color:var(--primary-color); color:#fff;} .tour-date-panel{display:none;margin-top:20px;padding:22px 24px 18px;border-radius:14px;background:#f7f8fa;} .tour-date-month{display:flex;align-items:center;justify-content:center;gap:0 18px;padding-bottom:2px;} .tour-date-month strong{font-size:1.25rem;color:#444;font-weight:700;} .tour-month-arrow{display:flex; align-items:center; border:none;background:none;font-size:1.375rem;color:#555;cursor:pointer;} .tour-month-arrow .arrow{display:inline-block; width:9px; height:9px; border-top:1px solid #333; border-left:1px solid #333; transform:rotate(-45deg)} .tour-month-arrow.next .arrow{transform:rotate(135deg)} .tour-date-swiper{overflow:hidden;} .tour-date-swiper .swiper-slide{width:64px;} .tour-date-day{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:92px;padding:10px 0 0;border-radius:10px; cursor:pointer;} .tour-date-day .week{width:100%; text-align:center; padding:4px 0;font-size:.938rem;color:#777;font-weight:500; background-color:#eef4fd} .tour-date-day .week.sun{color:#ff7b7b;} .tour-date-day .week.sat{color:#5f9fff;} .tour-date-day .num{margin:5px 0 4px; padding:10px 7px;font-size:.875rem;color:#4b4b4b;font-weight:500;line-height:1;} .tour-date-day .price{font-size:.813rem;color:#9a9a9a;line-height:1.2;} .tour-date-day.active{} .tour-date-day.active .num{display:flex;align-items:center;justify-content:center; border-radius:8px;background:#4a6cf7;color:#fff;font-weight:700;} .tour-date-day.disabled .num{color:#bbb;} .tour-calendar-dim{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.35);opacity:0;visibility:hidden;z-index:1200;transition:all .25s ease;} .tour-calendar-dim.active{opacity:1;visibility:visible;} .tour-calendar-popup{position:fixed;top:50%;left:50%;width:420px;max-width:calc(100% - 32px);border-radius:18px;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.16);opacity:0;visibility:hidden;transform:translate(-50%,-46%);z-index:1300;transition:all .25s ease;} .tour-calendar-popup.active{opacity:1;visibility:visible;transform:translate(-50%,-50%);} .tour-calendar-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid #eee;} .tour-calendar-head strong{font-size:1.313rem;color:#222;font-weight:700;} .tour-calendar-close{position:relative; border:none;background:none;font-size:1.25rem;color:#555;cursor:pointer;} .tour-calendar-close .icon{position:relative; display:inline-block; width:25px; height:25px; } .tour-calendar-close .icon:before,.tour-calendar-close .icon:after{content:''; position:absolute; left:0; top:calc(50% + 2px); width:100%; height:1px; background-color:#666; transform:rotate(45deg);} .tour-calendar-close .icon:after{transform:rotate(-45deg);} .tour-calendar-body{padding:18px 18px 20px;} .tour-calendar-month-head{display:flex;align-items:center;justify-content:center;gap:0 18px;padding-bottom:16px;} .tour-calendar-month-head strong{font-size:1.188rem;color:#222;font-weight:700;} .tour-calendar-arrow{border:none;background:none;font-size:1.25rem;color:#555;cursor:pointer;} .tour-calendar-week{display:grid;grid-template-columns:repeat(7,1fr);padding-bottom:8px;} .tour-calendar-week span{font-size:.938rem;color:#888;text-align:center;} .tour-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;} .tour-calendar-grid button{height:46px;border:none;border-radius:10px;background:#fff;font-size:1rem;color:#555;cursor:pointer;} .tour-calendar-grid button.empty{cursor:default;} .tour-calendar-day.active{background:#4a6cf7;color:#fff;font-weight:700;} .tour-calendar-foot{padding-top:18px;} .tour-calendar-confirm{width:100%;height:50px;border:none;border-radius:10px;background:#222;font-size:1rem;color:#fff;font-weight:600;cursor:pointer;} @media only screen and (min-width:1025px){ .tour-filter-close{display:none} } @media only screen and (max-width:1400px){ .tour-card-meta{} .tour-card-main{flex-flow:column} .tour-filter{width: 220px; flex: 0 0 220px;} } @media(max-width:1200px){ .tour-layout{gap:0 28px;} .tour-filter{width:260px;flex:0 0 260px;} .tour-card-thumb{width:190px;flex:0 0 190px;} .tour-card-thumb img{height:150px;} .tour-card-title{padding-bottom:5px; font-size:1.125rem; line-height:1.47} .tour-card-price{font-size:1.125rem} .tour-date-panel{margin-top:20px; padding:20px 20px 18px;} .tour-date-month strong{font-size:1.125rem} .tour-book-btn{height:auto; padding:11px 15px;} .tour-date-toggle,.tour-date-selected{font-size:.875rem} .tour-date-selected{padding:0;} .tour-card-side{gap:0 12px;} } @media(max-width:1024px){ .tour-sub{margin:15px auto 50px; } .tour-sub-p{padding:50px 0; } .tour-topbar{padding-bottom:18px;} .tour-topbar-left{gap:12px 16px;} .tour-total{} .tour-period-text{} .tour-top-chip{} .tour-layout{display:block;padding-top:20px;} .tour-filter-close{position:absolute; right:20px; background:none; border:none;} .tour-filter-close .icon{position:relative; display:inline-block; width:25px; height:25px; } .tour-filter-close .icon:before,.tour-filter-close .icon:after{content:''; position:absolute; left:0; top:calc(50% + 2px); width:100%; height:1px; background-color:#666; transform:rotate(45deg);} .tour-filter-close .icon:after{transform:rotate(-45deg);} .tour-filter{width:100%;margin-bottom:28px; position:fixed; top:0; left:0; width:320px; height:100vh; background:#fff; z-index:1200; transform:translateX(-100%); transition:transform .3s ease; overflow:auto; padding:30px 20px;} .tour-filter.active{transform:translateX(0);} .tour-content-top{} .tour-sort-btn{} .tour-card-head{} .tour-card-thumb{} .tour-card-thumb img{height:130px;} .tour-card-main{} .tour-date-panel{margin-top:15px; padding:15px;} .tour-card-meta{padding-bottom:15px;} .tour-card-side{justify-content:flex-end;} .tour-reset-btn,.tour-filter-open{padding:7px 16px; height:auto;} .tour-reset-btn{font-size:0; gap:0; padding:9px} .tour-filter-open{display:inline-flex;align-items:center; border-color: #4a6cf7; color: #4a6cf7; background: #f8faff;} } @media(max-width:768px){ .tour-sub{margin:15px auto 35px; } .tour-sub-p{padding:35px 0;} .tour-layout{padding-top:5px;} .tour-page{padding-bottom:60px;} .tour-topbar-left{flex-flow:column; gap:0px 15px; align-items:start;} .tour-total{font-size:1.375rem} .tour-topbar-line{display:none;} .tour-period{flex-wrap:wrap;gap:8px 10px;} .tour-period .tour-topbar-label{display:none;} .tour-topbar-label{} .tour-period-text{} .tour-topbar{padding-bottom:10px} .tour-depart{width:100%; margin-top:8px; padding-top:10px; border-top:1px solid #ddd;} .tour-depart .tour-topbar-label{font-size:1.063rem; color:var(--black-color); font-weight:600} .tour-change-btn img{max-width:15px;} .tour-selected-list{gap:6px;} .tour-depart-chips{flex-wrap:wrap;} .tour-top-chip{} .tour-filter-title{padding-bottom:22px;font-size:1.625rem;} .tour-filter-group{padding-bottom:18px;margin-bottom:18px;} .tour-filter-label{padding-bottom:10px;font-size:1.125rem;} .tour-select-btn{height:48px;font-size:.938rem;} .tour-filter-chip{height:38px;padding:0 15px;font-size:.938rem;} .tour-content-top{top:70px} .tour-reset-btn,.tour-selected-chip{} .tour-reset-btn:after{right:-10px} .tour-sort-btn{font-size:.938rem;} .tour-card-item{padding:18px 0;} .tour-card-thumb{max-width:none;border-radius:14px;} .tour-card-thumb img{height:140px} .tour-card-title{padding-bottom:7px;} .tour-card-meta{padding-bottom:10px;} .tour-card-meta span{padding-right:10px;margin-right:10px;font-size:.875rem;} .tour-card-date-row{gap:0 3px;flex-wrap:wrap;} .tour-date-toggle,.tour-date-selected{font-size:.938rem;} .tour-date-toggle{padding-left:0;} .tour-date-toggle > img{max-width:16px;} .tour-card-side{justify-content:space-between;gap:0 12px;} .tour-card-price{font-size:1rem;} .tour-book-btn{min-width:auto; padding:9px 15px} .tour-date-panel{padding:12px 14px;} .tour-date-month{gap:0 14px;padding-bottom:0;} .tour-date-month strong{font-size:1.125rem;} .tour-date-swiper .swiper-slide{width:56px;} .tour-date-day{min-height:82px;padding-top:8px;} .tour-date-day .week{font-size:.813rem;} .tour-date-day .num{} .tour-date-day .price{font-size:.75rem;} .tour-calendar-popup{width:calc(100% - 24px);} } @media(max-width:650px){ .tour-card-head{gap:0 15px} .tour-card-thumb{width:90px; flex:0 0 90px} .tour-card-thumb img{height:120px;} .tour-card-title{margin-bottom:5px; font-size:1.063rem; line-height:1.45; max-height:3em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;} .tour-card-meta span{padding-right:8px; margin-right:8px;} .tour-card-score a{gap:0 3px} .tour-card-badge{top:8px; left:8px;} .tour-card-side{gap:0 10px;} .tour-content-top{top:64px; gap:0;} .tour-reset-btn, .tour-filter-open{padding:7px 10px;} .tour-reset-btn{padding:10px;} .tour-selected-chip{padding:7px 10px;} .tour-date-selected{display:none;} .tour-date-toggle{gap:0 3px;} .tour-date-toggle > img{max-width:15px;} .tour-date-day .num{padding:8px;} .tour-book-btn{padding: 7px 11px;} .tour-date-swiper .swiper-slide{width:50px;} } .sub-space-new{margin-top:50px;} .booking .meta-actions{padding-top:25px;} .booking .meta-actions ul{display:flex; gap:0 12px} .booking .meta-actions ul li{cursor:pointer;} .booking .meta-actions ul li img{max-height:20px; opacity:.5} @media only screen and (min-width:1024px){ .booking .right-wrap .box{/*top:100px*/ top:20px} } .booking .main-con .date-head h2{font-size:1.625rem} .trip-summary .box{padding:35px; display:flex; align-items:center; justify-content:space-around; background:var(--sky-bg); border-radius:15px;} .trip-summary .box .block{text-align:center;} .trip-summary .box .block .sub-txt{font-size:.938rem; color:#555;} .trip-summary .box .block .time{font-size:1.063rem; color:var(--black-color); font-weight:500} .trip-summary .box .block .trans{color:var(--blue-color2); font-size:.875rem} .trip-summary .box .badge{padding:4px 10px; background-color:#6e8ac7; color:#fff; border-radius:100px; font-weight:400} .trip-summary .box .c-info{ text-align:center;} .trip-summary .box .kind{padding-top:5px; display:flex; align-items:center; gap:0 7px; font-size:.938rem; color:var(--black-color);} .trip-summary .box .kind img{display:block; max-width:20px;} .trip-summary .list{padding-top:15px;} .trip-summary .list dl{display:flex; padding:12px 0; border-bottom:1px solid #eee;} .trip-summary .list dl dt{padding-left:10px; width:110px; flex-shrink:0; color:#555; font-weight:500} .trip-summary .list dl dd{font-size:.938rem; color:#666;} .booking .prod-info-wrap{margin-top:100px} .booking .prod-info-wrap .d-img-wrap{padding:50px 0} .caution{padding-top:25px;} .caution li{position:relative; margin:3px 0; padding-left:15px; font-size:.938rem; color:#888; font-weight:300} .caution li:before{content:''; position:absolute; top:10px; left:0; width:5px; height:2px; background-color:#ddd;} .caution.dark li{color:#555;} .caution.dark li:before{background-color:#aaa;} .caution.circle li{color:#777;} .caution.circle li:before{top:8px; width:6px; height:6px; border-radius:100px; border:1px solid #bbb; background:none} .pro-d .box{padding:35px; background:var(--sky-bg); border-radius:15px;} .pro-d .tit{position:relative; margin-top:20px; padding-left:21px; font-size:1.25rem; font-weight:500} .pro-d .tit.first{margin-top:0;} .pro-d .tit:before{content:''; position:absolute; left:0; top:14px; width:5px; height:2px; background-color:#333; transform:rotate(45deg)} .pro-d .tit:after{content:''; position:absolute; left:2px; top:13px; width:11px; height:2px; background-color:#333; transform:rotate(-45deg)} .pro-d .caution{padding-top:5px} .pro-d .include{margin-top:30px; display:flex; gap:0 100px;} .pro-d .include .block{position:relative; flex:1} .pro-d .include .block:first-child:before{content:''; position:absolute; right:-50px; top:0; width:1px; height:100%; background-color:#ddd;} .pro-d .include .tit{margin-top:0; padding:0; display:flex; align-items:center; gap:0 7px; } .pro-d .include .tit:before,.pro-d .include .tit:after{display:none;} .pro-d .include .tit .icon{position:relative; display:inline-block; width:20px; height:20px; } .pro-d .include .tit .icon:before{content:''; position:absolute; left:0; width:100%; height:100%; border-radius:200px; border:2px solid var(--black-color)} .pro-d .include .tit .icon.x:before{width:100%; height:2px; top:8px; transform:rotate(45deg); border:none; background-color:var(--black-color);} .pro-d .include .tit .icon.x:after{content:''; position:absolute; width:100%; height:2px; top:8px; transform:rotate(135deg); border:none; background-color:var(--black-color);} .cancel-charge .txt{padding-top:10px; font-size:.938rem; color:#666;} .cancel-charge .tit{padding:35px 0 6px; color:var(--black-color); font-weight:500} .cancel-charge .caution{padding:0} table{margin-top:25px; width:100%; border-top:2px solid var(--black-color)} table th,table td{padding:15px 10px; text-align:center;} table thead{background-color:#f3f4f5} table th{font-weight:500; background-color:#f3f4f5; border-bottom:1px solid #eee;} table td{border-bottom:1px solid #eee; font-size:.938rem} table td .light{color:#777;} table.small{margin-top:15px;} table.small th,table.small td{padding:10px; line-height:1.1; font-size:.813rem} table.inline{border-left:1px solid #eee;} .remark-field{position: relative; top: -2px; left: 2px; display: inline-block; color: var(--red-color);} .remark{padding-top: 10px;} .remark li{position: relative; padding-left: 10px; font-size: .813rem; text-align: left; color:#666;} .remark li:before{content: '*'; position: absolute; left: 0; top: 0; color: #f04141;} .booking .color{color:var(--primary-color)} .h3{padding-bottom:17px;} .pb-10{padding-bottom:10px!important} .prod-review{padding:80px 0;} .prod-review .review-overview{margin-top:24px;} .prod-review .review-score-box{padding:45px 30px; border-radius:24px; background:var(--sky-bg); text-align:center;} .prod-review .review-score-box .score{display:flex; align-items:center; justify-content:center; gap:5px; margin:0; color:#2d2d2d;} .prod-review .review-score-box .score .star{width:25px; height:26px; background:url(/assets/triveon/img/rating.png) no-repeat center / cover;} .prod-review .review-score-box .score strong{font-size:1.625rem; font-weight:600; line-height:1;} .prod-review .review-score-box .score em{font-style:normal; color:#8f8f8f; line-height:1;} .prod-review .review-score-box .summary{margin:10px 0 0; font-size:1.063rem; color:#555; font-weight:500;} .prod-review .keyword-list{display:flex; flex-wrap:wrap; justify-content:center; gap:5px; margin-top:24px;} .prod-review .keyword-list span{display:inline-flex; align-items:center; padding:7px 10px; border-radius:10px; background:#fff; font-size:.875rem; color:#555; white-space:nowrap;} .prod-review .review-media-preview{margin-top:42px;} .prod-review .review-media-preview .media-tit{margin:0 0 16px; font-size:1.125rem; font-weight:500; color:#222;} .prod-review .media-thumb-list{display:flex; gap:14px; margin:0; padding:0; list-style:none;} .prod-review .media-thumb-list li{flex:1;} .prod-review .thumb-btn{position:relative; display:block; width:100%; height:180px; padding:0; border:0; border-radius:20px; overflow:hidden; background:none; cursor:pointer;} .prod-review .thumb-btn img{display:block; width:100%; height:100%; object-fit:cover;} .prod-review .thumb-btn.more-btn span{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:1.125rem; font-weight:500; color:#fff; z-index:2;} .prod-review .thumb-btn.more-btn:before{content:''; position:absolute; inset:0; background:rgba(0,0,0,.35); z-index:1;} .prod-review .review-list{margin-top:54px;} .prod-review .sort-row{position:relative; display:flex; align-items:center; margin-bottom:22px;} .prod-review .sort-btn{position:relative; display:inline-flex; align-items:center; gap:4px; padding:0; border:0; background:none; font-size:22px; font-weight:600; color:#333; cursor:pointer;} .prod-review .sort-btn:before{content:''; position:absolute; right:-15px; width:8px; height:8px; transform:rotate(45deg); border-right:2px solid #333; border-bottom:2px solid #333;} .prod-review .sort-row ul{display:none; position:absolute; top:40px; min-width:70px; border:1px solid #666; border-radius:10px; z-index:2; background-color:#fff;} .prod-review .sort-row ul li{padding: 7px 12px; cursor: pointer; font-size: .813rem; color: #666;} .prod-review .sort-row ul li:first-child{border-radius:10px 10px 0 0} .prod-review .sort-row ul li:last-child{border-radius:0 0 10px 10px} .prod-review .sort-row ul li:hover{background-color:#efefef;} .prod-review .review-card{padding-top:8px;} .prod-review .review-top{display:flex; align-items:center; justify-content:space-between; gap:20px;} .prod-review .review-meta{display:flex; align-items:center; gap:14px;} .prod-review .review-meta .stars{position:relative; margin:0; top:0; width:83px; height:15px; background:url(/assets/triveon/img/rating-gray.png) no-repeat center / auto 100%;} .prod-review .review-meta .stars > span{position:absolute; left:0; width:100%; height:100%; background:url(/assets/triveon/img/rating.png) no-repeat center / auto 100%; } .prod-review .review-meta .user{margin:0; font-weight:500; color:#444;} .prod-review .review-meta .user span{margin-left:8px; color:#666;} .prod-review .review-top .date{margin:0; font-size:.875rem; color:#8b8b8b;} .prod-review .review-card > .keyword-list{justify-content:flex-start; margin-top:15px;} .prod-review .review-card > .keyword-list span{background:#fff; border:1px solid #ddd;} .prod-review .review-desc{margin-top:20px;} .prod-review .review-desc p{margin:0 0; color:#666; word-break:break-all;} .prod-review .review-desc p:last-child{margin-bottom:0;} .prod-review .review-photo-list{display:flex; gap:14px; margin:25px 0 0; padding:0; list-style:none;} .prod-review .review-photo-list li{width:260px;} .prod-review .review-photo-btn{display:block; width:100%; height:170px; padding:0; border:0; border-radius:18px; overflow:hidden; background:none; cursor:pointer;} .prod-review .review-photo-btn img{display:block; width:100%; height:100%; object-fit:cover;} @media all and (max-width:768px){ .prod-review{padding:56px 0;} .prod-review .review-score-box{padding:28px 18px; border-radius:18px;} .prod-review .review-score-box .score strong{font-size:32px;} .prod-review .review-score-box .score em{font-size:18px;} .prod-review .review-score-box .summary{font-size:16px;} .prod-review .keyword-list{margin-top:18px; justify-content:flex-start;} .prod-review .keyword-list span{min-height:36px; padding:0 12px; border-radius:10px; font-size:13px;} .prod-review .review-media-preview{margin-top:28px;} .prod-review .review-media-preview .media-tit{font-size:22px;} .prod-review .media-thumb-list{gap:10px; overflow-x:auto; padding-bottom:4px;} .prod-review .media-thumb-list li{flex:0 0 140px;} .prod-review .thumb-btn{height:160px; border-radius:14px;} .prod-review .thumb-btn.more-btn span{font-size:22px;} .prod-review .review-list{margin-top:38px;} .prod-review .sort-btn{font-size:18px;} .prod-review .review-top{} .prod-review .review-meta{} .prod-review .review-meta .stars{font-size:18px;} .prod-review .review-meta .user{margin-top:6px; font-size:18px;} .prod-review .review-meta .user span{font-size:14px;} .prod-review .review-top .date{font-size:15px;} .prod-review .review-desc{margin-top:15px;} .prod-review .review-desc p{font-size:15px; line-height:1.7;} .prod-review .review-photo-list{gap:10px; margin-top:24px; overflow-x:auto; padding-bottom:4px;} .prod-review .review-photo-list li{width:180px; flex:0 0 180px;} .prod-review .review-photo-btn{height:120px; border-radius:14px;} } .review-modal{display:none; position:fixed; inset:0; z-index:9999;} .review-modal.is-open{display:block;} .review-modal-dim{position:absolute; inset:0; background:rgba(0,0,0,.45);} .review-modal-dialog{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(100%,1024px); padding:40px 35px; border-radius:28px; background:#fff; box-sizing:border-box;} .review-modal-close{position:absolute; right:28px; top:16px; width:44px; height:44px; padding:0; border:0; background:none; font-size:42px; line-height:1; color:#333; cursor:pointer; z-index:5;} .review-modal-close:before,.review-modal-close:after{content:''; position:absolute; left:50%; top:50%; width:22px; height:2px; background-color:#333; transform:translate(-50%,-50%) rotate(45deg);} .review-modal-close:after{transform:rotate(-45deg); left:calc(50% - 11px); top:calc(50% - 1px)} .review-detail-modal-top{display:flex; align-items:center; gap:0 8px; padding-bottom:10px; } .review-detail-modal-top .tit{font-size:1.25rem; font-weight:600;} .review-detail-modal-top .all-btn{position:relative; color:#807878; cursor:pointer} .review-detail-modal-top .all-btn:after{content:''; position:absolute; right:-10px; top:50%; transform:translateY(-50%) rotate(45deg); width:6px; height:6px; border-top:1px solid #807878; border-right:1px solid #807878;} .review-gallery-wrap{height:100%;} .review-gallery-wrap h3{margin:0 0 24px; font-size:1.25rem; font-weight:600; color:#222;} .review-gallery-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin:0; padding:0; list-style:none; max-height:70vh; overflow-y:auto} .review-gallery-grid li{min-width:0;} .review-gallery-grid .gallery-item{display:block; width:100%; height:180px; padding:0; border:0; border-radius:18px; overflow:hidden; background:none; cursor:pointer;} .review-gallery-grid .gallery-item img{display:block; width:100%; height:100%; object-fit:cover;} .review-detail-wrap{display:flex; gap:34px; height:100%; box-sizing:border-box;} .review-detail-left{position:relative; flex:0 0 400px; display:flex; flex-direction:column; justify-content:center; min-width:0; overflow:hidden;} .review-detail-right{flex:1; min-width:0; overflow:auto; padding-right:12px;} .review-detail-main{width:100%; border-radius:24px; overflow:hidden; background:#f5f5f5;} .review-detail-main .swiper{width:100%; height:100%;} .review-detail-main .swiper-wrapper{height:100%;} .review-detail-main .swiper-slide{width:100% !important; aspect-ratio:1/1} .review-detail-main img{display:block; width:100%; height:100%; object-fit:cover;} .review-detail-thumbs{margin:8px 0 0;padding:0;list-style:none;overflow:hidden;} .review-detail-thumbs .swiper-wrapper{display:flex;align-items:center;} .review-detail-thumbs .swiper-slide{width:82px!important;flex-shrink:0;} .review-detail-thumbs button{display:block;width:82px;height:58px;padding:0;border:2px solid transparent;border-radius:12px;overflow:hidden;background:none;opacity:.55;cursor:pointer;} .review-detail-thumbs .swiper-slide-thumb-active button{border-color:#222;opacity:1;} .review-detail-thumbs img{display:block;width:100%;height:100%;object-fit:cover;} .review-detail-arrow{position:absolute; top:calc(50% - 30px); transform:translateY(-50%); width:48px; height:48px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.95); box-shadow:0 4px 16px rgba(0,0,0,.12); font-size:38px; line-height:1; color:#555; cursor:pointer; z-index:3;} .review-detail-arrow:before{content:''; position:absolute; left:calc(50% - 3px); top:calc(50% - 5px); transform:rotate(-45deg); width:10px; height:10px; border-top:1px solid #333; border-left:1px solid #333;} .review-detail-arrow.next:before{transform:rotate(135deg); left:calc(50% - 7px);} .review-detail-arrow.prev{left:16px;} .review-detail-arrow.next{right:16px;} .review-detail-right .review-top{display:flex; align-items:center; justify-content:space-between; gap:20px;} .review-detail-right .review-meta{display:flex; align-items:center; gap:14px;} .review-detail-right .review-meta .stars{position:relative; flex-shrink:0; margin:0; top:0; width:83px; height:15px; background:url(/assets/triveon/img/rating-gray.png) no-repeat center / auto 100%;} .review-detail-right .review-meta .stars > span{position:absolute; left:0; width:100%; height:100%; background:url(/assets/triveon/img/rating.png) no-repeat center / auto 100%; } .review-detail-right .review-meta .user{margin:0; font-weight:500; color:#333;} .review-detail-right .review-meta .user span{margin-left:8px; } .review-detail-right .date{margin:0; font-size:.875rem; color:#666;} .review-detail-right .keyword-list{display:flex; flex-wrap:wrap; gap:7px; margin-top:15px;} .review-detail-right .keyword-list span{display:inline-flex; align-items:center; padding:7px 10px; border:1px solid #dcdcdc; border-radius:10px; background:#fff; font-size:15px; color:#555; white-space:nowrap;} .review-detail-right .review-desc{margin-top:28px; max-height:320px; overflow-y:auto} .review-detail-right .review-desc p{margin:0 0 14px; color:#666; word-break:break-all;} body.modal-open{overflow:hidden;} @media all and (max-width:768px){ .review-modal-dialog{width:calc(100vw - 24px); height:calc(100vh - 24px); padding:20px 16px 16px; border-radius:20px;} .review-modal-close{right:14px; top:12px; width:36px; height:36px; font-size:32px;} .review-gallery-wrap h3{margin-bottom:16px; font-size:26px;} .review-gallery-grid{grid-template-columns:repeat(3,1fr); gap:10px;} .review-gallery-grid .gallery-item{height:110px; border-radius:12px;} .review-detail-wrap{display:block; padding-top:18px;} .review-detail-left{width:100%;} .review-detail-main{height:280px; border-radius:16px;} .review-detail-thumbs{padding:0 34px; margin-top:12px;} .review-detail-thumbs li{width:56px; flex:0 0 56px;} .review-detail-thumbs button{height:42px; border-radius:10px;} .review-detail-arrow{width:34px; height:34px; font-size:28px;} .review-detail-arrow.prev{left:6px;} .review-detail-arrow.next{right:6px;} .review-detail-right{margin-top:20px; max-height:calc(100vh - 430px); padding-right:0;} .review-detail-right .review-top{display:block;} .review-detail-right .review-meta{display:block;} .review-detail-right .review-meta .stars{font-size:18px;} .review-detail-right .review-meta .user{margin-top:8px; font-size:18px;} .review-detail-right .review-meta .user span{font-size:14px;} .review-detail-right .date{margin-top:8px; font-size:15px;} .review-detail-right .keyword-list{gap:8px; margin-top:18px;} .review-detail-right .keyword-list span{min-height:36px; padding:0 12px; border-radius:10px; font-size:13px;} .review-detail-right .review-desc{margin-top:18px;} .review-detail-right .review-desc p{font-size:15px; line-height:1.7;} } .save-list .block{} .save-list .page-tit{padding-bottom:15px; font-size:1.375rem; font-weight:600} .save-list .block.first{padding-top:0;} .save-list .block{position:relative; display:flex; gap:0 25px; padding:20px 0; border-bottom:1px solid #ddd;} .save-list .block .close{position:relative; padding:7px 15px; border-radius:8px; flex-shrink:0; font-size:.875rem; color:#353535; align-self:center; background:none; border:1px solid #ddd; background-color:#fff;} .save-list .block .close:hover{color:var(--black-color); border-color:var(--black-color)} .save-list .block .close > img{max-width:22px;} /*.save-list .block .close:before,.save-list .block .close:after{content:''; position:absolute; left:11px; top:23px; width:22px; height:2px; transform:rotate(45deg); border:none; background-color:var(--black-color);} .save-list .block .close:after{transform:rotate(135deg);}*/ .save-list .block .img-wrap{width:200px; aspect-ratio:4/3; flex-shrink:0;} .save-list .block .img-wrap img{display:block; width:100%; border-radius:15px; height:100%; object-fit:cover; max-width:100%;} .save-list .block .txt-wrap{flex-grow:1; padding:10px 0; display:flex; flex-flow:column; justify-content:space-between; } .save-list .block .txt-wrap .txt{font-size:.938rem} .save-list .block .txt-wrap .tit{padding-top:3px; font-size:1.063rem; font-weight:600; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; word-break:break-word;} .save-list .block .price{align-items:start;} @media only screen and (max-width:768px){ .save-list .page-tit{padding-bottom:10px;} .save-list .block .img-wrap{width:130px; aspect-ratio:4/3.5;} .save-list .block .txt-wrap{padding:5px 0} .save-list .block{padding:15px 0; gap:0 20px} .save-list .block.first{padding-top:15px} } @media only screen and (max-width:650px){ .save-list .block .img-wrap{width:90px; aspect-ratio:1/1} .save-list .block{gap:0 15px} .save-list .block .txt-wrap{padding:0;} .save-list .block .txt-wrap .txt{font-size:.875rem} .save-list .block .txt-wrap .tit{line-height:1.45} } /* 로그인 */ .login{background-color:var(--sky-bg); height:100dvh;} .login .con{margin:0 auto; padding:50px 30px 30px; max-width:768px; background-color:#fff; height:100dvh;} .login .con .logo{text-align:center; display:block} .login .con .logo img{display:block; max-width:120px; margin:0 auto} .login .con .channel{padding-top:13px;} .login .con .channel button{display:flex; align-items:center; gap:0 8px; justify-content:center; margin:8px 0; padding:15px 0; width:100%; border:none; background-color:#f6f6f6; border-radius:10px; color:#333; font-weight:600; font-size:1.063rem} .login .con .channel button img{max-height:16px;} .login .con .channel button.kakao{background-color:#fae104; color:#381d1e} .login .con .channel button.naver{background-color:#03c75a; color:#fff} .login .con .txt-line{position:relative; margin:21px 0; color:#666; font-size:.938rem; text-align:center;} .login .con .txt-line span{position:relative; padding:0 25px; background-color:#fff; z-index:2; font-size:1rem} .login .con .txt-line:before{content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%; height:1px; background-color:#eee} .login input{margin:5px 0; width:100%; border-radius:10px; font-weight:500; font-size:1rem} .login input::placeholder{color:#bbb;} .login .check-box-c{padding:7px 0;} .login .check-box-c.space.bottom{padding:7px 0 23px;} .login .txt-group{display:flex; gap:0 20px; justify-content:center; padding:5px 0 20px;} .login .txt-group li a{padding:10px 0;} .check-box-c{display:flex; align-items:center;} .check-box-c-input{position:absolute; opacity:0; width:0; height:0;} .check-box-c-label{position:relative; display:inline-flex; align-items:center; gap:7px; font-size:.938rem; color:#555; cursor:pointer; user-select:none;} .check-box-c-label::before{content:''; width:24px; height:24px; border-radius:5px; background:#f3f3f3; box-sizing:border-box; flex:0 0 22px; transition:.2s;} .check-box-c-input:checked + .check-box-c-label::before{background:var(--sky-bg); } .check-box-c-input:checked + .check-box-c-label::after{content:'✓'; position:absolute; left:5px; top:1px; font-size:15px; font-weight:700; color:#6c8cff;} .check-box-c-input:focus-visible + .check-box-c-label::before{outline:2px solid #c9d8ff; outline-offset:2px;} .agree-box{position:relative; display:flex; align-items:center; padding:11px 0 11px 20px;} .agree-box-input{position:absolute; opacity:0; width:0; height:0;} .agree-box-label{position:relative; display:flex; align-items:center; gap:10px; width:100%; font-size:1.063rem; font-weight:500; color:#555; cursor:pointer; user-select:none;} .agree-box-label::before{content:''; width:24px; height:24px; border-radius:5px; box-sizing:border-box; flex:0 0 24px; transition:.2s; border:1px solid #ccc;} .agree-box-label::after{content:'✓'; position:absolute; left:6px; top:1px; font-size:15px; font-weight:700; color:#ddd;} .agree-box-input:checked + .agree-box-label::before{border-color:var(--primary-color)} .agree-box-input:checked + .agree-box-label::after{color:#6c8cff; } .agree-box-input:focus-visible + .agree-box-label::before{outline:2px solid #c9d8ff; outline-offset:2px;} .agree-box .more-btn{position:absolute; right:0; margin-left:auto; background:none; border:none;} .agree-box .more-btn span{position:relative; display:block; width:20px; height:20px;} .agree-box .more-btn span:before{content:''; position:absolute; top:50%; width:7px; height:7px; border-top:1px solid #999; border-right:1px solid #999; transform:translateY(-50%) rotate(45deg)} .agree-box-wrap{padding:10px 0 25px;} .agree-box.all{padding:13px 20px; border-radius:10px; border:1px solid #ccc;} .agree-box.all:has(.agree-box-input:checked){border-color:var(--primary-color)} .agree-box.all .agree-box-label:before{border:none; background-color:#f5f5f5;} .agree-box.all .agree-box-label:after{color:#ccc;} .agree-box.all .agree-box-input:checked + .agree-box-label{color:var(--primary-color); } .agree-box.all .agree-box-input:checked + .agree-box-label::before{border-color:var(--primary-color); background-color:var(--primary-color)} .agree-box.all .agree-box-input:checked + .agree-box-label::after{color:#fff; } .join .id-btn-wrap{display:flex; gap:0 5px; align-items:center;} .join .id-btn-wrap button{padding:12px; border:1px solid var(--primary-color); color:var(--primary-color); background:none; border-radius:10px; font-weight:500; font-size:.938rem} .join .id-btn-wrap button:hover{background:var(--sky-bg)} .join .btn-wrap{padding:15px 0 0;} .btn-basic{width:100%; margin:0 auto; padding:15px; background:var(--primary-color); color:#fff; border-radius:10px; text-align:center; font-weight:600; font-size:1.188rem; border:none;} .btn-basic.disabled{background-color:#eee; color:#999} .btn-basic.disabled:hover{background-color:#eee; color:#999} .btn-basic:hover{background:var(--primary-color-hover)} .btn-basic.no-bg{padding:3px; width:auto; background:none; color:#555; border-bottom:1px solid #888; border-radius:0; } .btn-basic.no-bg:hover{color:var(--primary-color); border-color:var(--primary-color)} .btn-basic.mini{padding:8px 12px; width:auto; font-size:.875rem} .btn-primary{background-color:var(--primary-color); color:#fff;} .btn-primary:hover{background-color:var(--primary-color-hover)} .login .prev{font-size:1.125rem; font-weight:600; color:#888;} .login .prev:hover{color:var(--primary-color);} .join .con{padding:30px;} .join .tit{padding:40px 0 23px; text-align:center; font-size:1.538rem; font-weight:600;} .complete .con{text-align:center;} .complete .con > img{padding-top:25px; display:block; margin:0 auto; max-width:135px;} .complete .con .txt{padding-top:35px; font-size:1.188rem; font-weight:500; color:var(--primary-color);} .complete .con .tit{padding:3px 0 25px; font-size:1.375rem; font-weight:600} #agreeModal{display:none;} #agreeModal .modal-top{padding-bottom:0;} #agreeModal .modal-desc{margin-top:10px;} .modal-box.position{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%)} .id-find-result{margin-bottom:10px; padding:25px; background:var(--sky-bg); border-radius:10px; text-align:center;} .id-find-result .name{font-size:1.125rem; font-weight:600} @media only screen and (max-width:650px){ .btn-basic{padding:16px;} .login .con{padding:50px 20px 20px;} .login input{font-size:1.125rem} .join .id-btn-wrap button{font-size:1.063rem} .join .con{padding:15px 20px;} .join .id-btn-wrap button{padding:15px 12px;} } .mypage.member .mypage-wrap{display:flex; gap:0 60px; align-items:start;} .mypage.member .mypage-wrap .mypage-menu{position:sticky; top:15px; width:250px; flex:0 0 250px;} .mypage.member .mypage-wrap .mypage-menu ul{border:1px solid #ddd; border-radius:15px; } .mypage.member .mypage-wrap .mypage-menu ul li:first-child{padding:20px 20px 10px;border-radius:15px 15px 0 0; background-color:#fff; font-weight:600; font-size:1.25rem} .mypage.member .mypage-wrap .mypage-menu ul li:first-child a{padding:0; border:none;} .mypage.member .mypage-wrap .mypage-menu ul li:first-child a:hover{background:none;} .mypage.member .mypage-wrap .mypage-menu ul li a{display:block; padding:15px 20px; border-bottom:1px dotted #eee; background-color:#fff; } .mypage.member .mypage-wrap .mypage-menu ul li a:hover{background:var(--sky-bg)} .mypage.member .mypage-wrap .mypage-menu ul li:first-child a{border-radius:15px 15px 0 0} .mypage.member .mypage-wrap .mypage-menu ul li:last-child a{border-bottom:0; border-radius:0 0 15px 15px;} .mypage.member .mypage-wrap .mypage-menu.mypage-booking-list ul li.mypage-booking-list a{color:var(--primary-color); font-weight:600} .mypage.member .mypage-wrap .mypage-menu.mypage-booking-list ul li.mypage-booking-list a:hover{background:none;} .mypage.member .mypage-wrap .mypage-menu.mypage-save-list ul li.mypage-save-list a{color:var(--primary-color); font-weight:600} .mypage.member .mypage-wrap .mypage-menu.mypage-save-list ul li.mypage-save-list a:hover{background:none;} .mypage.member .mypage-wrap .mypage-menu.mypage-review ul li.mypage-review a{color:var(--primary-color); font-weight:600} .mypage.member .mypage-wrap .mypage-menu.mypage-review ul li.mypage-review a:hover{background:none;} .mypage.member .mypage-wrap .mypage-menu.board-notice ul li.board-notice a{color:var(--primary-color); font-weight:600; background-color:#fff; border-radius:100px;} .mypage.member .mypage-wrap .mypage-menu.board-notice ul li.board-notice a:hover{background:none;} .mypage.member .mypage-wrap .mypage-menu.board-inquiry ul li.board-inquiry a{color:var(--primary-color); font-weight:600; background-color:#fff; border-radius:100px;} .mypage.member .mypage-wrap .mypage-menu.board-inquiry ul li.board-inquiry a:hover{background:none;} .mypage.member .mypage-wrap .mypage-con{flex-grow:1;} .mypage.member .mypage-wrap .mypage-con .search-box{display:flex; align-items:center; margin-bottom:0; padding:15px; background-color:#fff; border:1px solid #f3f3f3; border-radius:10px;} .mypage.member .mypage-wrap .mypage-con .search-box button{background:none; border:none; font-size:.938rem; color:#666;} .mypage.member .mypage-wrap .mypage-con .search-box button.active{color:var(--primary-color); font-weight:600} .mypage.member .mypage-wrap .mypage-con .search-box .date-range-wrap{position:relative; margin-left:15px;} .mypage.member .mypage-wrap .mypage-con .search-box .date-range-wrap:after{content:''; position:absolute; top:50%; transform:translateY(-50%); right:10px; width:18px; height:18px; background:url(/assets/triveon/img/icon-cal.png) no-repeat center / 18px auto; opacity:.5} .mypage.member .mypage-wrap .mypage-con .search-box .date-range{ padding:8px 18px; font-size:.938rem; background:#f5f5f5; border:none;} .flatpickr-calendar{padding:15px!important;} .flatpickr-current-month{display:flex !important; align-items:center; justify-content:center;} .flatpickr-months .flatpickr-prev-month.flatpickr-prev-month{left:10px!important; top:10px!important} .flatpickr-months .flatpickr-next-month.flatpickr-next-month{right:10px!important; top:10px!important;} .flatpickr-current-month{padding:0!important} .flatpickr-current-month .numInputWrapper{order:-1;} .flatpickr-current-month .cur-month{order:1;} .mypage-summary{padding:32px; border:1px solid #e5e7eb; border-radius:24px; background:#fff} .mypage-summary-head{margin-bottom:24px} .mypage-summary-name{margin:0; font-size:30px; line-height:1.3; font-weight:700; color:#111827} .mypage-summary-desc{margin:8px 0 0; font-size:15px; line-height:1.5; color:#6b7280} .mypage-summary-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px} .mypage-summary-card{display:flex; flex-direction:column; justify-content:space-between; min-height:148px; padding:22px 20px; border:1px solid #e5e7eb; border-radius:20px; background:#f8fafc; text-decoration:none; transition:all .2s ease} .mypage-summary-card:hover{transform:translateY(-2px); border-color:#cbd5e1; background:#fff; box-shadow:0 10px 24px rgba(15,23,42,.06)} .mypage-summary-label{display:block; font-size:14px; line-height:1.4; color:#6b7280} .mypage-summary-value{display:block; margin-top:18px; font-size:32px; line-height:1.2; font-weight:700; color:#111827} .mypage-summary-sub{display:block; margin-top:10px; font-size:13px; line-height:1.4; color:#94a3b8} @media (max-width:1200px){ .mypage-summary-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:767px){ .mypage-summary{padding:24px; border-radius:20px} .mypage-summary-name{font-size:26px} .mypage-summary-grid{grid-template-columns:1fr; gap:12px} .mypage-summary-card{min-height:auto; padding:18px 16px} .mypage-summary-value{margin-top:12px; font-size:28px} } .mypage-con{min-width:0} .mypage.no-bg{background-color:#fff;} .mypage.member .mypage-head{margin-bottom:20px} .mypage.member .ui-tab-menu{padding-bottom:15px;} .mypage.member .order-card{} .mypage.member .meta-line .k,.mypage.member .meta-line .v,.mypage.member .meta-line .date{font-size:.875rem} .mypage.member .meta-line .v{color:#666; font-weight:500} .mypage.member .order-card.disabled .meta-line .date{font-weight:400; color:#666;} .mypage.member .meta-line .date{color:var(--primary-color); font-weight:600} .mypage.member .order-summary.no-space{margin-top:0;} .mypage.member .order-summary{margin:35px 0 7px; background:none; border:none; padding:0; box-shadow:none;} .mypage.member .order-summary.soon{margin:10px 0;} .mypage.member .order-summary.breakdown{border-color:#aaa;} .mypage.member .order-summary-title{color:var(--black-color); font-weight:600; font-size:1rem} .mypage.member .order-summary-total .v{color:#666; font-weight:500} .mypage.member .order-summary-item .v{font-weight:500; color:#999; font-size:.875rem} .mypage.member .order-summary-item .k{font-size:.813rem;} .mypage.member .prod-name{} .mypage.member .mypage-title.with a{display:flex; align-items:center; gap:0 10px; transition:all .3s} .mypage.member .mypage-title.with a:hover{color:var(--primary-color); ; transition:all .3s} .mypage.member .mypage-title.with a:hover .icon{border-color:var(--primary-color)} .mypage.member .mypage-title.with .arrow-icon .icon{display:inline-block; width:13px; height:13px; border-top:2px solid #333; border-right:2px solid #333; transform:rotate(45deg)} .mypage.member .mypage-orders .orders-head.with h2{display:flex; align-items:center; justify-content:space-between;} .mypage.member .mypage-orders .orders-head.with h2 > a{font-size:.938rem; font-weight:500} .mypage.member .mypage-orders .orders-head.with h2 > a:hover{color:var(--primary-color)} .mypage.member .order-summary-badge{background-color:#efefef;} .mypage-booking-list{} .main-wish-list .price{align-items:start;} .main-wish-list{width:100%} .main-wish-list .prod-swiper{width:100%; overflow:hidden} .mypage.member .profile-grid .value{font-size:1.25rem;} .mypage.member .profile-grid .item{} .mypage-review-wrap .block{margin-top:30px; } .mypage-review-wrap .block.first{margin-top:10px} .mypage-review-wrap .mypage-prod-review-block{padding:25px 25px 30px; background-color:#fff;border:1px solid #eaeaea; border-radius:20px;} .mypage-review-wrap .write-date{padding-bottom:7px; font-weight:500;} .mypage-review-wrap .prod-list.row{grid-template-columns:repeat(1,1fr); padding:15px; background-color:#fff; border-radius:20px; background-color:#f3f5f9} .mypage-review-wrap .prod-list.row .prod-item > a{gap:0 15px} .mypage-review-wrap .prod-list.row .img-wrap{width:80px;} .mypage-review-wrap .prod-list.row .img-wrap img{border-radius:10px;} .mypage-review-wrap .prod-item .txt-wrap{padding-top:0;} .mypage-review-wrap .prod-item .txt-wrap .name{font-size:.938rem} .mypage-review-wrap .prod-item .txt-wrap .date{padding-top:0; font-size:.813rem} .mypage-review-wrap .prod-review{padding:10px 0;} .mypage-review-wrap .prod-review .review-card{padding:10px 0 0;} .mypage-review-wrap .prod-review .review-card > .keyword-list{margin-top:10px;} .mypage-review-wrap .prod-review .review-card > .keyword-list span{padding:6px; font-size:.813rem; min-height:auto;} .mypage-review-wrap .prod-review .review-desc{font-size:.938rem;} .mypage-review-wrap .prod-review .review-desc p{line-height:1.6} .mypage-review-wrap .prod-review .review-meta{gap:5px} .my-review-write .prod-list.row{background-color:#fff; border:1px solid #eee;} .my-review-write .prod-list.row .txt-wrap{flex-grow:1;} .my-review-write .prod-list.row button{} .my-review-modal .star-rating{padding:15px 0; text-align:center;} .my-review-modal .star-rating img{max-width:28px; cursor:pointer;} .my-review-modal .file-upload-box input[type=file]{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0} .my-review-modal .file-upload-box img{max-width:22px; opacity:.8} .my-review-modal .file-upload-btn{display:flex; align-items:center; justify-content:center; gap:0 7px; width:100%; height:56px; border:1px solid #dcdcdc; border-radius:12px; background:#fff; font-size:1rem; font-weight:600; cursor:pointer} .my-review-modal textarea{font-size:.938rem; min-height:150px} .notice-page{margin-top:35px; } .notice-page .inner{max-width:1200px;margin:0 auto;padding:0 20px} .notice-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:28px} .notice-head-left{flex:1;min-width:0} .notice-title{margin:0;font-size:2rem;font-weight:700;line-height:1.3;color:#111} .notice-sub{margin:8px 0 0;font-size:1rem;line-height:1.6;color:#777} .notice-head-right{flex-shrink:0} .notice-search{display:flex;align-items:center;gap:8px;width:360px;max-width:100%} .notice-search input{flex:1;height:48px;padding:0 16px;border:1px solid #e5e7eb;border-radius:14px;background:#fff;font-size:.938rem;color:#111;outline:none} .notice-search input::placeholder{color:#aaa} .notice-search input:focus{border-color:var(--primary-color);box-shadow:0 0 0 4px rgba(59,130,246,.08)} .notice-search button{height:48px;padding:0 18px;border:0;border-radius:14px;background:#111;color:#fff;font-size:.938rem;font-weight:600;cursor:pointer} .notice-board{border-top:2px solid #111} .notice-list{margin:0;padding:0;list-style:none} .notice-item{} .notice-item > a{display:flex; justify-content:space-between; align-items:center;gap:0;text-decoration:none;padding:22px 0;transition:background .2s ease} .notice-item > a:hover{background:#fafbfc} .notice-item .col-cate{display:flex;align-items:center;justify-content:center;padding:0 10px} .notice-item .col-title{min-width:0;padding-right:20px} .notice-item .col-date{font-size:.938rem;color:#888;text-align:center} .notice-badge{display:inline-flex; margin:-2px 7px 0 0; align-items:center;justify-content:center;padding:4px 10px 3px;border-radius:999px;background:#333;color:#fff;font-size:.813rem;font-weight:700; vertical-align:top} .notice-cate{display:inline-flex;align-items:center;justify-content:center;min-width:58px;height:30px;padding:0 12px;border-radius:999px;background:#f3f4f6;color:#555;font-size:.813rem;font-weight:600} .notice-item-title{margin:0;font-size:1rem;font-weight:600;line-height:1.5;color:#333;word-break:keep-all} .board-pagination{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:36px} .board-pagination a{text-decoration:none} .board-pagination .page-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid #e5e7eb;border-radius:12px;background:#fff;color:#555;font-size:.875rem} .board-pagination .page-btn:hover{border:1px solid #aaa;} .board-pagination .page-btn.disabled{pointer-events:none;opacity:.35} .board-pagination .arrow{width:8px; height:8px; border-top:1px solid #666; border-left:1px solid #666; transform:rotate(-45deg); margin:0 0 0 2px} .board-pagination .arrow.next{transform:rotate(135deg); margin:0 2px 0 0} .board-pagination .page-num{display:flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 10px;border-radius:12px;background:#fff;color:#666;font-size:.938rem;font-weight:500} .board-pagination .page-num:hover,.board-pagination .page-num.active{background:#111;color:#fff;font-weight:700} .notice-wrap{padding:80px 0 100px;} .notice-wrap .inner{max-width:1160px; margin:0 auto; padding:0 20px;} .notice-title{margin:0 0 36px; font-size:52px; font-weight:700; line-height:1.2; color:#222;} .notice-view{border-top:2px solid #2b2b2b;} .notice-view-head{display:flex; gap:15px; align-items:flex-start; padding:25px 0; border-bottom:1px solid #e5e5e5;} .notice-view-label{display:inline-flex; margin:1px 7px 0 0; align-items:center;justify-content:center;padding:4px 10px 3px;border-radius:999px;background:#333;color:#fff;font-size:.813rem;font-weight:700; vertical-align:top} .notice-view-tit-wrap{flex:1; min-width:0;} .notice-view-tit{margin:0; font-size:1.5rem; font-weight:600; line-height:1.3; color:#333; word-break:keep-all;} .notice-view-date{margin:5px 0 0; line-height:1.4; color:#8a8f98; font-size:.938rem} .notice-view-body{padding:50px 0; border-bottom:1px solid #e5e5e5; font-weight:400; line-height:1.9; color:#444; word-break:keep-all;} .notice-view-body p{margin:0;} .notice-view-body strong{font-weight:700; color:#222;} .notice-view-foot{display:flex; justify-content:center; padding-top:40px;} .notice-btn-list{display:inline-flex; align-items:center; justify-content:center; min-width:160px; height:56px; padding:0 28px; border:1px solid #d9d9d9; border-radius:12px; background:#fff; font-size:17px; font-weight:600; color:#222; text-decoration:none; transition:all .2s ease;} .notice-btn-list:hover{border-color:#222; background:#222; color:#fff;} .inquiry-page{width:100%;} .inquiry-list-wrap{position:relative; } .inquiry-board-top{display:flex; justify-content:flex-end; gap:10px; margin-bottom:15px;} .inquiry-board-top > a{gap:0; position:absolute; top:0;} .inquiry-btn-write,.inquiry-btn-check,.inquiry-btn-list,.inquiry-btn-submit{display:inline-flex; align-items:center; justify-content:center; min-width:120px; padding:10px 18px; border-radius:10px; font-size:15px; font-weight:500; text-decoration:none; box-sizing:border-box;} .inquiry-btn-write,.inquiry-btn-submit{background:#111; color:#fff; border:1px solid #111;} .inquiry-btn-check,.inquiry-btn-list{background:#fff; color:#333; border:1px solid #dcdcdc;} .inquiry-board{border-top:2px solid #111; border-bottom:1px solid #e5e5e5; background:#fff;} .inquiry-list{margin:0; padding:0; list-style:none;} .inquiry-item{border-bottom:1px solid #eee;} .inquiry-item:last-child{border-bottom:0;} .inquiry-item a{display:flex; align-items:center; gap:20px; padding:22px 0; text-decoration:none;} .inquiry-item .col-state{flex:0 0 94px;} .inquiry-item .col-title{flex:1; min-width:0;} .inquiry-item .col-date{display:flex; gap:0 20px; flex:0 0 150px; font-size:.875rem; color:#888; text-align:right;} .inquiry-item-title{margin:0; font-size:16px; color:#222; line-height:1.5; word-break:keep-all;} .inquiry-item.secret .inquiry-item-title{color:#888;} .inquiry-item .m-r{display:flex; justify-content:space-between; flex:1; gap:0 50px;} .inquiry-page .state{display:inline-flex; align-items:center; justify-content:center; padding:7px 12px; border-radius:999px; font-size:13px; font-weight:600; box-sizing:border-box;} .inquiry-page .state.waiting{background:#f4f4f4; color:#666;} .inquiry-page .state.done{background:#eef5ff; color:#2f6bff;} .inquiry-write,.inquiry-check,.inquiry-view{border-top:2px solid #111; } .inquiry-write-head,.inquiry-check-head{padding:28px 0 20px;} .inquiry-write-desc,.inquiry-check-desc{margin:0; font-size:15px; color:#333; line-height:1.6;} .inquiry-write-desc.sub{margin-top:4px; font-size:14px; color:#888;} .inquiry-form{padding:0 0 28px;} .inquiry-form-list{margin:0; padding:0; list-style:none; } .inquiry-form-list li.full{align-items:flex-start; padding:0;} .inquiry-form-list label,.inquiry-check-list label{flex:0 0 140px; font-size:15px; font-weight:500; color:#222;} .inquiry-form-list label{display:block; margin:12px 0 5px;} .inquiry-form-list input,.inquiry-check-list input,.form-select select{width:100%; height:48px; padding:0 16px; border:1px solid #dcdcdc; border-radius:8px; font-size:15px; color:#222; background:#fff; box-sizing:border-box;} .inquiry-form-list textarea{width:100%; height:220px; padding:16px; border:1px solid #dcdcdc; border-radius:8px; font-size:15px; color:#222; line-height:1.6; resize:none; box-sizing:border-box;} .inquiry-form-list li > div,.inquiry-form-list li > input,.inquiry-form-list li > textarea,.inquiry-check-list li > input{flex:1;} .form-select{flex:1;} .inquiry-agree{margin-top:20px;} .check-label{display:inline-flex; align-items:center; gap:10px; cursor:pointer;} .check-label input{display:none;} .check-label .chk{position:relative; width:22px; height:22px; border:1px solid #cfcfcf; border-radius:6px; box-sizing:border-box; background:#fff;} .check-label input:checked + .chk{border-color:#111; background:#111;} .check-label input:checked + .chk:before{content:''; position:absolute; left:7px; top:3px; width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);} .check-label .txt{font-size:14px; color:#333;} .inquiry-write-foot,.inquiry-check-foot,.inquiry-view-foot{display:flex; justify-content:center; gap:10px; padding:28px 0 0;} .inquiry-check{max-width:720px;} .inquiry-check-form{padding:0 0 10px;} .inquiry-check-hint{margin:20px 0 0; font-size:14px; color:#888; text-align:center;} .inquiry-view-head{padding:28px 0 22px; border-bottom:1px solid #eee;} .inquiry-view-tit-wrap{display:flex; flex-direction:column; gap:0px; align-items:start;} .inquiry-view-state{display:inline-flex; align-items:center; justify-content:center; width:auto; min-width:74px; height:32px; padding:0 12px; border-radius:999px; font-size:13px; font-weight:600;} .inquiry-view-state.waiting{background:#f4f4f4; color:#666;} .inquiry-view-state.done{background:#eef5ff; color:var(--primary-color);} .inquiry-view-tit{margin:10px 0 0; font-size:1.413rem; font-weight:600; color:#111; line-height:1.45; word-break:keep-all;} .inquiry-view-info{display:flex; align-items:center; gap:14px;} .inquiry-view-info span{position:relative; font-size:14px; color:#888;} .inquiry-view-info span + span:before{content:''; position:absolute; left:-8px; top:50%; width:1px; height:12px; background:#ddd; transform:translateY(-50%);} .inquiry-view-body{padding:32px 0 0;} .inquiry-question,.inquiry-answer{padding:0 0 32px;} .inquiry-answer{border-top:1px solid #eee; padding-top:32px;} .inquiry-q-label,.inquiry-a-label{margin:0 0 12px; font-size:.938rem; font-weight:700; color:#111;} .inquiry-q-cont,.inquiry-a-cont{padding:22px 24px; border-radius:12px; background:#fafafa;} .inquiry-q-cont p,.inquiry-a-cont p{margin:0; color:#333; line-height:1.7; word-break:keep-all;} .inquiry-a-cont.empty{background:#f8f8f8;} .inquiry-a-cont.empty p{color:#888;} .inquiry-a-date{margin:14px 0 0; font-size:13px; color:#999; text-align:right;} .inquiry-check-modal .modal-top{position:relative; padding-bottom:14px;} .inquiry-check-modal .modal-close-x{position:absolute; top:18px; right:20px; width:28px; height:28px; border:0; background:none; cursor:pointer;} .inquiry-check-modal .modal-close-x:before{content:""; position:absolute; left:50%; top:50%; width:16px; height:2px; background:#9ca3af; transform:translate(-50%,-50%) rotate(45deg);} .inquiry-check-modal .modal-close-x:after{content:""; position:absolute; left:50%; top:50%; width:16px; height:2px; background:#9ca3af; transform:translate(-50%,-50%) rotate(-45deg);} .inquiry-check-modal .modal-body{padding:0 25px 8px;} .inquiry-check-modal .inquiry-check-list{margin:0; padding:0; list-style:none;} .inquiry-check-modal .inquiry-check-list li{display:block; margin-top:14px;} .inquiry-check-modal .inquiry-check-list li:first-child{margin-top:0;} .inquiry-check-modal .inquiry-check-list label{display:block; margin-bottom:7px; font-size:14px; font-weight:500; color:#222;} .inquiry-check-modal .inquiry-check-list input{width:100%; height:46px; padding:0 14px; border:1px solid #dcdcdc; border-radius:10px; font-size:14px; color:#222; box-sizing:border-box;} .inquiry-check-modal .inquiry-check-list input::placeholder{color:#aaa;} .inquiry-check-modal .modal-btns .btn-danger{background:var(--primary-color);} .inquiry-check-modal .modal-btns .btn-danger:hover{background:var(--primary-color-hover);} @media all and (max-width:1024px){ .notice-head{align-items:start;flex-direction:column} .notice-head-right{width:100%} .notice-search{width:100%} .inquiry-board-top{gap:8px;} .inquiry-btn-write,.inquiry-btn-check,.inquiry-btn-list,.inquiry-btn-submit{min-width:auto; font-size:.875rem;} .inquiry-item a{align-items:flex-start; flex-wrap:wrap; gap:0 15px; padding:18px 0;} .inquiry-item .col-state{flex:0 0 auto;} .inquiry-item .col-title{flex:1 1 100%;} .inquiry-item .col-date{flex:1 1 100%; text-align:left; font-size:13px; gap:0 10px;} .inquiry-item-title{font-size:15px;} .inquiry-item .m-r{flex-flow:column;} .inquiry-form-list li,.inquiry-check-list li{display:block; min-height:auto; } .inquiry-form-list li.full{} .inquiry-form-list label,.inquiry-check-list label{display:block; margin-bottom:10px; font-size:14px;} .inquiry-form-list input,.inquiry-check-list input,.form-select select{height:46px; font-size:14px;} .inquiry-form-list textarea{height:180px; font-size:14px;} .inquiry-write-head,.inquiry-check-head{padding:22px 0 16px;} .inquiry-write-desc,.inquiry-check-desc{font-size:14px;} .inquiry-view-head{padding:22px 0 18px;} .inquiry-view-tit{font-size:1.25rem;} .inquiry-view-info{flex-wrap:wrap; gap:12px;} .inquiry-view-info span{font-size:.875rem} .inquiry-view-info span + span:before{left:-6px} .inquiry-view-body{padding-top:24px;} .inquiry-question,.inquiry-answer{padding-bottom:24px;} .inquiry-answer{padding-top:24px;} .inquiry-q-cont,.inquiry-a-cont{padding:18px 16px; border-radius:10px;} .inquiry-q-cont p,.inquiry-a-cont p{font-size:14px;} } @media all and (max-width:768px){ .notice-page{margin-top:25px;} .notice-title{font-size:1.5rem} .notice-sub{font-size:.875rem} .notice-board-head{display:none} .notice-item > a{display:block;padding:18px 0} .notice-item .col-cate{justify-content:flex-start;padding:0;margin-bottom:12px} .notice-item .col-title{padding-right:0} .notice-item .col-date{text-align:left;margin-top:3px;font-size:.813rem} .notice-item-title{font-size:1.063rem} .board-pagination{gap:6px;margin-top:28px} .board-pagination .page-btn{width:36px;height:36px;border-radius:10px} .board-pagination .page-num{min-width:36px;height:36px;border-radius:10px;font-size:.875rem} .notice-wrap{} .notice-wrap .inner{padding:0 16px;} .notice-title{margin-bottom:24px; font-size:34px;} .notice-view-head{gap:14px; padding:22px 0 24px;} .notice-view-tit{font-size:1.25rem; line-height:1.3;} .notice-view-label{margin:-1px 5px 0 0} .notice-view-date{margin-top:10px; font-size:14px;} .notice-view-body{padding:32px 0 40px; font-size:15px; line-height:1.8;} .notice-btn-list{width:100%; max-width:160px; height:50px; font-size:15px;} .inquiry-board-top{margin-bottom:15px;} .inquiry-board-top > a{} .inquiry-page .state{padding:7px 11px; font-size:.875rem;} .inquiry-form-list label{margin:12px 0 5px;} .inquiry-write-desc.sub{margin-top:2px;} } @media only screen and (max-width:1200px){ .mypage.member .mypage-wrap{gap:0 40px} .mypage.member .order-right{width:110px; flex:0 0 110px} .mypage.member .mypage-wrap .mypage-menu{width:180px; flex:0 0 180px} .mypage.member .mypage-orders .orders-head.with h2{font-size:1.25rem} .mypage.member .order-summary{} .mypage.member .btn-primary, .mypage.member .btn-ghost, .mypage.member .btn-danger, .mypage .btn-complete{font-size:.875rem} } @media only screen and (max-width:1024px){ .mypage.member .mypage-title{font-size:2rem;} .mypage.member .mypage-head{margin-bottom:15px;} .mypage.member .mypage-wrap{gap:0 30px} .mypage.member .mypage-wrap .mypage-menu{width:160px; flex:0 0 160px} .mypage.member .order-card{gap:25px;} .mypage.member .thumb{} .mypage.member .order-card .btns button{width:90px} .mypage.member .order-right{align-items:center;} .mypage.member .meta-line .k{width:32px; flex:0 0 32px} .mypage.member .order-summary-left{gap:2px 10px} .mypage.member .order-summary-sep{display:none} } @media only screen and (max-width:768px){ .mypage.member .mypage-wrap{flex-flow:column;} .mypage.member .mypage-wrap .mypage-menu{order:2;} .mypage.member .mypage-wrap .mypage-con{width:100%;} .mypage.member .order-right{flex:0 0 auto} .mypage.member .order-right,.mypage.member .order-card .btns{width:100%} .mypage.member .mypage-wrap .mypage-menu{margin-top:35px; width:100%; flex:0 0 auto; } .mypage.member .mypage-wrap .mypage-menu ul{padding-top:35px; border:none; border-top:1px solid #ddd; border-radius:0} .mypage.member .mypage-wrap .mypage-menu ul li:first-child{padding:10px 0; background:none;} .mypage.member .mypage-wrap .mypage-menu ul li:first-child a{font-size:.938rem; font-weight:400; color:#aaa; } .mypage.member .mypage-wrap .mypage-menu ul li a{background:none; padding:15px 0; font-size:1.188rem; color:var(--black-color); border-bottom:none; font-weight:600} .mypage.member.board-wrap .mypage-wrap .mypage-menu{position:relative; top:0; margin:0 0 35px; padding:8px; order:inherit; background-color:var(--sky-bg); border-radius:100px;} .mypage.member.board-wrap .mypage-wrap .mypage-menu ul{display:flex; padding:0; border:0;} .mypage.member.board-wrap .mypage-wrap .mypage-menu ul li{flex:1; text-align:center;} .mypage.member.board-wrap .mypage-wrap .mypage-menu ul li a{padding:12px 0; font-size:1.125rem; color:rgba(0,0,0,.5)} .mypage.member.board-wrap .mypage-wrap .mypage-menu ul li:first-child{display:none;} .prod-review .review-meta .user{margin-top:0} .prod-review .review-meta .user span{margin-left:5px;} } @media only screen and (max-width:650px){ .mypage.member .mypage-orders .orders-head h2{font-size:1.188rem} .mypage.member .mypage-wrap .mypage-con .search-box{flex-flow:column; align-items:start; gap:7px; } .mypage.member .mypage-wrap .mypage-con .search-box .date-range-wrap,.mypage.member .mypage-wrap .mypage-con .search-box .date-range-wrap input{margin-left:0; width:100%;} .mypage.member .thumb{} .mypage.member .order-card{gap:15px;} .mypage.member .meta{gap:1px;} .mypage.member .order-left .price{padding-top:5px;} .mypage.member .mypage-title{font-size:1.513rem} .mypage.member .mypage-title.with a{gap:0 6px;} } @media only screen and (max-width:560px){ .mypage-review-wrap .mypage-prod-review-block{padding:20px 20px 25px;} .mypage-review-wrap .prod-list.row{padding:13px;} .mypage-review-wrap .prod-review .review-card{padding:5px 0 0;} .mypage-review-wrap .prod-review .review-card > .keyword-list{margin-top:5px;} } .sub-visual .region-block{position:relative; padding:50px 37px; display:flex; flex-flow:column; justify-content:space-between; height:500px; background:url(/assets/triveon/img/thumb-07.jpg) no-repeat center / cover; border-radius:30px; box-sizing:border-box; color:#fff; } .sub-visual .region-block.se{background-image:url(/assets/triveon/img/thumb-08.jpg);} .sub-visual .region-block.gy{background-image:url(/assets/triveon/img/thumb-09.jpg);} .sub-visual .region-swiper .swiper-slide > a{display:block; transition:all .3s} .sub-visual .region-swiper .swiper-slide > a:hover .region-block:before{background:rgba(0,0,0,.2);} .sub-visual .region-swiper .swiper-slide > a:hover .arrow{background-color:rgba(255,255,255,.7); color:#333;} .sub-visual .region-block > *{position:relative; z-index:2} .sub-visual .region-block:before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.1); border-radius:30px; transition:all .3s} .sub-visual .region-block:after{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(to bottom, transparent 60%, rgba(0,0,0,.3)); border-radius:30px} .sub-visual .region-header{display:flex; justify-content:space-between; } .sub-visual .region-header .tit{font-size:2.513rem; font-weight:600} .sub-visual .region-header .arrow{display:flex; justify-content:center; align-items:center; width:50px; height:50px; border-radius:100px; background-color:rgba(255,255,255,.2); font-size:1.375rem; transition:all .3s} .sub-visual .region-footer .tit{font-size:1.5rem; font-weight:500} .sub-visual .region-footer .txt{padding-top:5px; font-weight:300} .region-swiper .swiper-controls{display:flex; justify-content:center; gap:0 25px; margin-top:15px; align-items:center;} .region-swiper :where(.swiper-button-next,.swiper-button-prev){position:relative!important; width:35px!important; height:35px!important; color:#333!important; top:auto!important; margin-top:auto!important; border:1px solid #ddd; border-radius:8px;} .region-swiper :where(.swiper-button-next,.swiper-button-prev):after{ font-size:10px!important;} .region-swiper .ui-tab-menu{display:flex; flex-wrap:wrap; gap:5px;} .prod-list.row .img-wrap .badge.rank{top:10px; bottom:auto; width:30px; height:30px; border-radius:8px; font-size:.938rem; display:flex; align-items:center; justify-content:center; padding:0; background-color:var(--primary-color); color:#fff;} .who-with.bg{background:#e7f1fb} .good-trip .box-wrap{display:flex; border:1px solid #ebebe5; border-radius:35px} .good-trip .box-wrap > *{min-width:0} .good-trip .box-wrap .tit-box{position:relative; display:flex; flex-flow:column; align-items:center; justify-content:center; width:350px; flex-shrink:0; background:#f3efca; text-align:center; border-radius:35px;} .good-trip .box-wrap .tit-box:before{content:''; position:absolute; left:0; top:0; width:100%; height:100%; background:url(/assets/triveon/img/thumb-06.jpg) no-repeat; opacity:.05; border-radius:35px;} .good-trip .box-wrap .tit-box .sub-tit{font-size:.938rem; color:#383838;} .good-trip .box-wrap .tit-box .tit{padding-top:13px; font-size:1.75rem; font-weight:600; line-height:1.25} .good-trip .box-wrap .ui-tab{padding:35px 50px;} @media only screen and (max-width:1400px){ .sub-visual .region-block{padding:40px 35px; height:400px} .sub-visual .region-header .tit{font-size:2.25rem} .sub-visual .region-footer .tit{font-size:1.375rem} } @media only screen and (max-width:1200px){ .good-trip .box-wrap .tit-box{width:300px} .good-trip .box-wrap .ui-tab{padding:35px;} } @media only screen and (max-width:1024px){ .sub-visual .region-block{height:300px} .sub-visual .region-header .tit{font-size:2rem} .sub-visual .region-footer .txt{padding-top:2px} .good-trip .box-wrap .tit-box{width:250px} .good-trip .box-wrap .ui-tab{padding:30px;} } @media only screen and (max-width:768px){ .sub-visual .region-block{padding:35px 30px 30px 30px;} .good-trip .box-wrap{border-radius:30px} .good-trip .box-wrap .tit-box{width:200px; border-radius:30px;} .good-trip .box-wrap .tit-box:before{border-radius:30px} .good-trip .box-wrap .tit-box .tit{font-size:1.438rem} } @media only screen and (max-width:650px){ .good-trip .box-wrap .tit-box{display:none;} .good-trip .box-wrap .ui-tab{padding:20px;} } /* 호텔 */ @media (min-width:769px){ .hotel-sub .thumb .mySwiper{height:420px;aspect-ratio:auto;} .hotel-sub .thumb .mySwiper .swiper-wrapper{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:8px;height:100%;transform:none !important;} .hotel-sub .thumb .mySwiper .swiper-slide{width:auto !important;height:100% !important;margin:0 !important;overflow:hidden;} .hotel-sub .thumb .mySwiper .swiper-slide:nth-child(n+6){display:none;} .hotel-sub .thumb .mySwiper .swiper-slide:first-child{grid-row:1/3;} .hotel-sub .thumb .mySwiper img{width:100%;height:100%;object-fit:cover;display:block;} .hotel-sub .thumb .swiper-button-prev,.hotel-sub .thumb .swiper-button-next{display:none;} } .hotel-sub h1{} .hotel-sub .top-con{display:block;} .hotel-sub .top-con .thumb{position:relative; width:auto;} .hotel-sub .top-con .thumb .swiper{aspect-ratio:auto;} .hotel-sub .top-con .thumb .photo-view{position:absolute; right:20px; bottom:20px; padding:10px 15px; border-radius:100px; background:var(--primary-color); color:#fff; z-index:99; font-weight:600; letter-spacing:0; cursor:pointer; transition:all .3s} .hotel-sub .top-con .thumb .photo-view:hover{background:var(--primary-color-hover)} .hotel-sub .top-con .txt-wrap{padding:20px 0; border-bottom:1px solid #ddd;} .hotel-sub .top-con .txt-wrap .price{padding-top:0} .hotel-sub .main-con .left-wrap{padding-top:0;} .hotel-sub .right-wrap{padding-top:35px;} .hotel-sub .sub-tit{padding-top:5px} .hotel-sub .right-wrap .prod-list li .info-wrap .date span{color:var(--primary-color);} .hotel-sub .main-con .date-head{display:block;} .hotel-sub .hotel-date-range{position:absolute; left:0; top:100%; width:1px; height:1px; opacity:0; pointer-events:none;} .hotel-sub .right-wrap .prod-list li .info-wrap .info{flex-grow:1;} .hotel-sub .right-wrap .prod-list li .info-wrap .option{display:flex; margin-top:10px; align-items:center; padding:3px 13px; border-radius:5px; background-color:#f1f1f1;} .hotel-sub .right-wrap .prod-list li .info-wrap .option span{flex-grow:1; display:block; border-radius:5px; color:#777; font-size:.813rem} .hotel-sub .right-wrap .prod-list li .info-wrap .option .delete{position:relative; width:15px; height:15px; background:none; border:none;} .hotel-sub .right-wrap .prod-list li .info-wrap .option .delete:before,.hotel-sub .right-wrap .prod-list li .info-wrap .option .delete:after{content:''; position:absolute; left:50%; top:50%; transform:translateY(-50%) rotate(45deg); width:80%; height:1px; background-color:#666;} .hotel-sub .right-wrap .prod-list li .info-wrap .option .delete:after{transform:rotate(-45deg); } .pay .top-con .txt-wrap{flex-grow:1;} .pay .top-con .txt-wrap .info.hotel{color:#6a6f73} .pay .top-con .txt-wrap .info.option{display:inline-block; color:#999;} .pay .top-con .txt-wrap .info.option span{font-size:.813rem;} .pay .top-con .txt-wrap .info.option.no-dot span:after{display:none;} .stay .booking-select{position:sticky; top:0px; margin-top:20px; padding:10px 0; background-color:#fff; z-index:99} .stay .booking-select .inner-wrap{padding:20px; border:1px solid var(--primary-color); flex-grow:1; border-radius:17px; color:#333; text-align:left; display:flex; align-items:center; gap:0 50px; justify-content:space-between;} .stay .booking-select .inner-wrap > div{flex-grow:1; display:flex; align-items:center; gap:0 50px; justify-content:space-between; } .stay .booking-select .date-con{position:relative; display:flex; align-items:center; justify-content:center; flex-grow:1; padding:0 20px; gap:0 20px; cursor:pointer;} .stay .booking-select .date-con:before{content:''; position:absolute; top:10%; right:0; width:1px; height:80%; background-color:#ddd;} .stay .booking-select .date-con > input{cursor:pointer;} .stay .booking-select .date-con .date{text-align:center;} .stay .booking-select .date-con .night-count{padding:5px 10px; border-radius:100px; color:var(--primary-color); background-color:var(--sky-bg2); font-size:.875rem; font-weight:500} .stay .booking-select .date-con .arrow img{max-width:20px} .stay .booking-select .txt{font-size:.875rem; letter-spacing:.2px; color:#777;} .stay .booking-select .state{font-size:1.063rem; font-weight:600; letter-spacing:0; text-align:center;} .stay .booking-select .state input{font-size:1.063rem; font-weight:600; padding:0; border:0; width:100%; letter-spacing:0; text-align:center;} .stay .booking-select .person .state input{width:120px;text-align:center;} .stay .booking-select .state input::placeholder{color:#333;} .stay .booking-select .state input::focus{outline:none;} .stay .booking-select .person-con{position:relative; display:flex; text-align:center; gap:0 30px; cursor:pointer;} .stay .booking-select .btn-con{background-color:#333; padding:0 50px; align-self:stretch; align-content:center; color:#fff; border-radius:10px; font-weight:500} .stay .booking-select .btn-con:hover{background-color:var(--primary-color)} .stay .person-select-pop{display:none; position:absolute; left:-40px; top:83px; width:290px; background-color:#fff; transform:none; padding:25px 25px 20px; box-shadow:0 0 20px rgba(0,0,0,.3); border-radius:10px; z-index:99} .stay .person-select-pop .person-list{display:flex; align-items:center; padding:6px 0; justify-content:space-between;} .stay .person-select-pop .person-list .count-wrap{display:flex; justify-content:space-between; align-items:center; gap:0 20px; width:120px;} .stay .person-select-pop .person-list .count-wrap .count{width:35px; height:35px; border-radius:100px; border:1px solid #ddd; background:url(/assets/triveon/img/icon-minus.png) no-repeat center / 25%; } .stay .person-select-pop .person-list .count-wrap .count.plus{background:url(/assets/triveon/img/icon-plus.png) no-repeat center / 25%; } .stay .person-select-pop .person-list .count-wrap .count:hover{background-color:#f5f5f5;} .stay .person-select-pop .person-list .count-wrap .num{font-size:1.063rem; font-weight:600;} .stay .person-select-pop .person-list.room{padding-bottom:15px; margin-bottom:15px; border-bottom:1px solid #ddd;} .stay .person-select-pop .btn{display:block; margin-top:18px; padding:10px; border:1px solid var(--primary-color); color:var(--primary-color); border-radius:5px;} .stay .person-select-pop .btn:hover{background-color:var(--primary-color); color:#fff;} .stay .room-type{display:flex; gap:0 45px; margin-top:25px; padding:20px; border-radius:20px; border:1px solid #ddd;} .stay .room-type .img{width:380px; height:250px; background-image:url(../img/stay-main-type-01.jpg); background-repeat:no-repeat; background-position:center; background-size:cover; border-radius:20px;} /*.stay .room-type.terrace .img{background:url(../img/stay-main-type-02.jpg) no-repeat center / cover;} .stay .room-type.suite .img{background:url(../img/stay-main-type-05.jpg) no-repeat center / cover;}*/ .stay .room-type .cont{display:flex; flex-grow:1; flex-direction:column; justify-content:space-between; padding:17px 0} .stay .room-type .cont h2{font-size:1.375rem; font-weight:600; line-height:1.25;} .stay .room-type .cont .sub-txt{padding-top:11px; letter-spacing:0} .stay .room-type .cont .detail{font-size:.938rem; letter-spacing:0} .stay .room-type .cont .rate{padding-top:7px; font-size:.938rem; color:#666; line-height:1.2} .stay .room-type .cont .rate span{ font-size:1.375rem; font-weight:600; color:var(--primary-color); letter-spacing:-.2px} .stay .room-type .cont .other{display:flex; align-items:end; justify-content:space-between; gap:0 15px;} .stay .room-type .cont .other a{display:inline-block; margin-bottom:7px; padding:12px 25px; border:1px solid #333; color:#333; border-radius:5px; font-weight:600} .stay .room-type .cont .other a:hover{background-color:#333; color:#fff;} .stay .room-type .room-img-swiper img{width:100%; height:250px; border-radius:20px;} .stay .room-type .room-img-swiper .swiper-pagination-bullet-active{background-color:#fff;} .stay .room-type .room-img-swiper :where(.swiper-button-next,.swiper-button-prev){padding: 12px 18px; width: auto!important; height: auto!important; background-color: rgba(0, 0, 0, .6); color: #fff!important; border-radius: 7px;} .stay .room-type .room-img-swiper .swiper-button-next:after,.stay .room-type .room-img-swiper .swiper-button-prev:after{font-size:1rem} .stay .room-type .room-img-swiper .swiper-pagination-bullet{background-color:#f5f5f5;} .opt-modal-panel.hotel{width:min(92vw, 1000px); max-height:min(85vh, 1200px); overflow-y:auto} .hotel-photo-view {display: none;} .hotel-photo-view.is-open{display: block;} .hotel-photo-view .photoModalSwiper{width: 100%;} .hotel-photo-view .photoModalSwiper .swiper-slide img{width: 100%; height: auto; display: block;} .hotel-photo-view :where(.swiper-button-next,.swiper-button-prev){padding: 17px 25px; width: auto!important; height: auto!important; background-color: rgba(0, 0, 0, .6); color: #fff!important; border-radius: 7px;} .hotel-photo-view .swiper-button-next:after,.hotel-photo-view .swiper-button-prev:after{font-size:1.475rem} .flatpickr-calendar{margin-top:10px;} .opt-modal.hotel-sub .c-type{padding:10px 15px;} .opt-modal.hotel-sub .c-type ul{grid-template-columns:repeat(1,1fr)} .opt-modal.hotel-sub .c-type ul li{display:flex; justify-content:space-between;} .opt-modal.hotel-sub .c-type ul li > div{display:flex; align-items:center; gap:0 3px; flex-wrap:wrap;} .opt-modal.hotel-sub .c-type ul li > div p{text-align:left;} .opt-modal.hotel-sub .c-type ul li > div p:nth-child(3){flex: 0 0 100%} .opt-modal.hotel-sub .c-type ul li .txt{font-size:12px} .opt-modal.hotel-sub .c-type ul li .per-price{padding:0; text-align:left; } .opt-modal.hotel-sub .c-type .count-box{width:110px; flex-shrink:0;} .opt-modal.hotel-sub .c-type .count-box .btn{width:35px;} .opt-modal.hotel-sub .c-type .count-box .num{width:30px} .opt-modal.hotel-sub .c-type ul li .tit{font-weight:600} .booking .right-wrap .tit{padding-bottom:5px;} @media only screen and (max-width:1400px){ .stay .booking-select .inner-wrap{gap:0 25px;} .stay .booking-select .state input{width:230px;} } @media only screen and (max-width:1300px){ .stay .booking-select .date-con{padding:0} .stay .booking-select .btn-con{padding:0 30px} } @media only screen and (min-width:1025px) and (max-width:1400px){ .stay .booking-select .inner-wrap{gap:0 15px} .stay .booking-select .inner-wrap > div{gap:0} .stay .room-type .img{width:40%;} } @media only screen and (max-width:1024px){ .stay .person-select-pop{top:80px; } } @media only screen and (max-width:860px){ .stay .person-select-pop{top:54px} } @media only screen and (max-width:768px){ .hotel-sub .top-con .thumb .photo-view{display:none;} .stay .person-select-pop{width:250px; } .stay .person-select-pop .btn{padding:8px;} .stay .person-select-pop .person-list{padding:4px 0} .stay .person-select-pop .person-list.room{padding-bottom:12px; margin-bottom:12px;} .stay .room-type{margin-top:20px; padding:25px} .stay .room-type .cont .other{gap:0 20px} .stay .room-type .cont .other > div{} .stay .room-type .img{width:300px; height:200px} .stay .room-type .room-img-swiper img{height:200px;} .stay .room-type .cont h2{font-size:1.625rem} .stay .room-type .cont .sub-txt{padding-top:9px;} .stay .room-type .cont .rate{padding-top:4px;} .stay .booking-select .txt{display:none;} .stay .booking-select{} .stay .booking-select .inner-wrap{padding:10px 10px 10px 0; border-radius:12px;} .stay .booking-select .date-con:before{height:60%; top:20%;} .stay .booking-select .inner-wrap > div{gap:0 20px;} .stay .booking-select .state input{width:100%; font-size:1rem;} .stay .booking-select .btn-con{padding:7px 15px;} .stay .booking-select .person .state input{width:100px; font-size:1rem} } @media only screen and (max-width:650px){ .stay .person-select-pop{padding:20px 20px 15px; top:48px; left:50%; transform:translateX(-50%);} .stay .room-type{display:block; margin-top:16px; padding:0;} .stay .room-type .img{width:100%; height:230px; border-radius:20px 20px 0 0;} .stay .room-type .room-img-swiper img{height:230px; border-radius:20px 20px 0 0} .stay .room-type .cont{padding:28px 22px;} .stay .room-type .cont h2{font-size:1.375rem} .stay .room-type .cont .rate span{display:block; font-size:1.375rem; line-height:1.3} .stay .room-type .cont .other a{margin-bottom:0; padding:9px 30px;} .stay .room-type .cont .sub-txt{padding-top:3px;} .stay .room-type .cont .detail{padding-top:1px; font-size:.813rem; color:#666;} .stay .room-type .cont .detail:before{content:'· '} .stay .room-type .cont .rate{display:flex; align-items:center; gap:0 3px; padding-top:15px; font-size:.875rem} .hotel-sub h1{padding-top:15px;} .hotel-sub .sub-tit{padding-top:2px} .stay .booking-select{margin-top:5px;} } @media only screen and (max-width:560px){ .stay .booking-select .inner-wrap{gap:0 5px;} .stay .booking-select .inner-wrap > div{gap:0;} .booking .main-con .date-head h2{font-size:1.563rem} .hotel-sub .btn-close-icon{right:10px;} } .mypage .pay .schedule{} .mypage .info.hotel{color:#6a6f73} .mypage .info.option{display:inline-block; color:#999;} .mypage .info.option span{font-size:.813rem;} .mypage .info.option.no-dot span:after{display:none;} .mypage .meta-line.no-flex{display:block;} .mypage .meta-line.no-flex .v{display:block} .mypage .final-price{padding-top:10px;} /* 메인 */ .wrap.stay{max-width:1400px; margin:0 auto} .wrap.stay .inner-con{padding:0} .wrap .cate{margin-top:50px;} .wrap .cate ul{padding:0; text-align:center;} .wrap .cate ul li{display:inline-block; margin:0 2px} .wrap .cate ul li a{display:inline-block; padding:11px 17px; background-color:#f1f1f1; border-radius:10px; letter-spacing:-.2px; color:#666;} .wrap .cate ul li a:hover{background-color:var(--primary-color); color:#fff;} .wrap .cate ul li.active a{background-color:var(--primary-color); color:#fff;} .inner-con{margin-top:15px; padding:70px 80px; background-color:#eaf4fd; border-radius:27px} .day .top{display:flex; gap:0 50px} .day .top .img-wrap{width:290px; flex-shrink:0;} .day .top .img-wrap img{display:block; max-width:100%; border-radius:22px} .day .top .txt-wrap{display:flex; flex-direction:column; justify-content:space-between; align-items:start; flex-grow:1; padding:15px 0} .day .top .txt-wrap .cate-txt{color:var(--secondary-color); font-size:1.188rem; font-weight:500} .day .top .txt-wrap h1{margin-top:20px; color:var(--primary-color); font-size:1.875rem; font-weight:600; letter-spacing:-1px; line-height:1.2} .day .top .txt-wrap .txt{margin-top:10px; font-size:1.125rem; color:#838b95} .day .top .txt-wrap .btn{display:flex; gap:0 9px; align-items:center; padding:10px 20px; background-color:var(--primary-color); color:#fff; border-radius:7px; font-size:1.125rem} .day .top .txt-wrap .btn span{position:relative; display:inline-block; margin-top:-2px; width:17px; height:17px; border:2px solid #fff; border-radius:100px} .day .top .txt-wrap .btn span:before{content:''; position:absolute; top:13px; left:12px; width:7px; height:2px; background-color:#fff; border-radius:100px; transform:rotate(45deg)} .day .top .txt-wrap .btn:hover{background-color:var(--primary-color-hover)} .stay-farm-header{padding-top:15px; max-width:1400px; margin:0 auto; z-index:5; background-color:#fff;} .stay-farm-header .visual-nav{display:flex; align-items:center; justify-content:space-between;} .stay-farm-header .visual-logo{color:#fff; font-size:1.125rem; font-weight:700; letter-spacing:0; text-shadow:0 2px 10px rgba(0,0,0,.35);} .stay-farm-header .visual-logo img{max-width:120px} .stay-farm-header .visual-reserve{display:inline-flex; align-items:center; justify-content:center; gap:0 5px; padding:10px 24px; border-radius:100px; background:#fff; color:#222; font-size:.938rem; font-weight:700; box-shadow:0 8px 20px rgba(0,0,0,.18);} .stay-farm-header .visual-reserve img{display:block; max-width:18px; margin-top:-2px} .stay.main .visual{position:relative; padding:280px 50px; text-align:center; color:#fff; z-index:2; } .stay.main .visual:before{content:''; position:absolute; width:100%; height:100%; left:0; top:0; border-radius:27px 27px 0 0; background:url(/assets/triveon/img/farm/thumb-01.jpg) no-repeat center / cover; position:absolute; filter: blur(.5px);} .stay.main .visual:after{content:''; position:absolute; width:100%; height:100%; left:0; top:0; background:linear-gradient(to bottom, transparent, rgba(0,0,0,.5)); z-index:1} .stay.main .visual h1{position:relative; font-size:3.25rem; font-weight:600; z-index:3} .stay.main .visual .visual-tit{position:relative; padding-top:8px; font-size:1.125rem; letter-spacing:5px; z-index:3} .stay.main .room-intro{padding:100px 0 80px;} .stay.main .room-intro .swiper-slide{text-align:center; } .stay.main .room-intro .swiper-slide .img-wrap{height:450px;} .stay.main .room-intro .swiper-slide .img-wrap img{width:100%; height:100%; object-fit:cover; display:block;border-radius:22px;} .stay.main .room-intro .swiper-slide h2{padding-top:30px; font-size:1.875rem; font-weight:500;} .stay.main .room-intro :where(.swiper-slide-next,.swiper-slide-prev){opacity:.5} .stay.main .room-intro .swiper-slide p{padding-top:12px; letter-spacing:.2px; font-weight:400} .stay.main .package{padding:0px 100px 120px} .stay.main .package h2{font-size:1.563rem; font-weight:600; color:#333; } .stay.main .package ul{display:flex; gap:0 25px; margin-top:25px;} .stay.main .package ul li img{max-width:100%; border-radius:20px;} .stay.main .package ul li .con-wrap{display:flex; gap:0 13px; padding-top:20px; } .stay.main .package ul li .con-wrap .icon{display:flex; flex-shrink:0; align-items:center; justify-content:center; width:42px; height:42px; border:1.5px solid #9caab9; border-radius:100px;} .stay.main .package ul li .con-wrap .icon > img{max-width:55%; border-radius:0; opacity:.6} .stay.main .package ul li h3{padding-top:5px; font-size:1.313rem; font-weight:500} .stay.main .package ul li p{padding-top:7px; font-size:.938rem; line-height:1.35; color:#666;} .stay.main .package ul li a{display:inline-block; margin-top:30px; padding:9px 38px; background-color:#333; color:#fff; border-radius:7px; letter-spacing:0} .stay.main .booking-select{position:absolute; top:auto; bottom:40px; width:calc(100% - 100px); padding:0; border:0; border-radius:17px;} .stay.main .booking-select .inner-wrap{border:0; } .stay-footer{margin-top:90px; padding:48px 0; border-top:1px solid rgba(20,40,60,.12);} .stay-footer .footer-inner{display:flex; justify-content:space-between; gap:40px; max-width:1400px; margin:0 auto;} .stay-footer .footer-copy h2{font-size:28px; line-height:1.45; font-weight:600; color:#313941;} .stay-footer .footer-copy p{margin-top:5px; font-size:.938rem; color:#536476;} .stay-footer .footer-info{text-align:right; font-size:14px; line-height:1.8; color:#536476;} .stay-footer .footer-info strong{font-size:17px; color:#313941;} @media only screen and (max-width:1400px){ .wrap.stay,.stay-footer .footer-inner,.stay-farm-header{max-width:92%; margin:0 4%} } @media only screen and (max-width:1024px){ .stay.main .visual{padding:200px 35px;} .stay.main .booking-select{width:calc(100% - 70px); bottom:30px;} .stay.main .room-intro{padding:70px 0 50px} .stay.main .package{padding:0 50px 50px} .stay.main .room-intro .swiper-slide .img-wrap{height:400px;} } @media only screen and (max-width:768px){ .stay-farm-header{padding-top:5px;} .stay.main .visual h1{font-size:3rem;} .stay-farm-header .visual-logo img{max-width:100px} .stay.main .room-intro{padding:50px 0} .stay.main .room-intro .swiper-slide .img-wrap{height:360px;} .stay.main .package{padding:0 35px 50px;} .stay.main .package ul li .con-wrap{padding-top:15px;} .stay.main .package ul li .con-wrap .icon{width:37px; height:37px;} } @media only screen and (max-width:650px){ .stay.main .package h2{font-size:1.375rem} .stay.main .package ul{flex-flow:column; gap:20px 0; margin-top:20px;} .footer-copy{display:none;} .stay-footer .footer-info{text-align:left; flex-grow:1;} .stay-footer .footer-info p:first-child{margin-bottom:10px;} .stay-footer{margin-top:50px; padding:35px 0;} } @media only screen and (max-width:560px){ .stay.main .visual{padding:150px 13px;} .stay.main .visual h1{font-size:2rem} .stay.main .booking-select{width:calc(100% - 26px); bottom:25px;} .stay.main .booking-select .inner-wrap{gap:0;} .stay.main .booking-select .date-con{gap:0 5px;} .stay.main .package{padding:0 20px 45px;} .stay.main .package ul li .con-wrap{padding-top:7px; gap:0 7px;} .stay.main .package ul li .con-wrap .icon{width:35px; height:35px;} .stay.main .package ul li h3{font-size:1.188rem} .stay.main .package ul li p{} .stay.main .room-intro .swiper-slide .img-wrap{height:300px;} } /* 게시판 상세 일정 테이블 */ .trip-schedule-table{border-collapse:collapse;border:1px solid #ddd; font-size:14px;line-height:1.6;} .trip-schedule-table .head{text-align:center;background:#f8f9fa;} .trip-schedule-table .day{background:#fafafa;text-align:center;} .trip-schedule-table .transport{color:#2b6cb0;text-align:center;} .trip-schedule-table .schedule-cell{text-align:left;vertical-align:top;} .trip-schedule-table .item{margin-bottom:18px; display:flex; align-items:start; gap:0 7px; word-break:break-all} .trip-schedule-table .item:has(.item-tit){flex-wrap:wrap; flex-flow:column;} .trip-schedule-table .item:last-child{margin-bottom:0;} .trip-schedule-table .item-tit{margin-bottom:4px; display:flex; align-items:start; gap:7px;} .trip-schedule-table .time{background:#f1f3f5;color:#495057;font-size:13px;} .trip-schedule-table .time strong{display:inline-block;width:50px;padding:3px 6px;margin-right:8px;text-align:center;border-radius:4px;} .trip-schedule-table .place{color:#1a0dab;font-size:14px;} .trip-schedule-table .normal{color:#222;font-size:14px;} .trip-schedule-table .desc{padding-left:70px;color:#666;font-size:13px;} .trip-schedule-table .meal{display:flex;gap:5px;margin-bottom:18px;} /* 메인비주얼 변경 */ .main-visual-text.origin{max-width:1400px; top:50%; left:50%; transform:translate(-50%,-50%); } .visual-full .main-visual-thumb img{object-position:center center} .visual-full .main-visual-dim{display:none; background:rgba(0,0,0,.15); width:100%; height:100%; left:0} .visual-full .main-visual-item{border-radius:0;} .visual-full .main-visual-title,.visual-full .main-visual-tag{text-align:left;} .visual-full .main-visual-title{font-size:2.625rem; line-height:1.2} .visual-full .main-visual-tag{margin-top:10px; font-size:1.188rem} .visual-full .main-visual-btn{margin-top:39px; padding:11px 39px; background-color:#fff; color:var(--primary-color); display:block; text-align:center; width:fit-content; font-size:1.125rem; font-weight:700} .visual-full .main-visual-btn.orange{color:#ee764a} .visual-full .swiper-pagination-bullet-active{background-color:#fff;} @media only screen and (max-width:1600px){ .main-visual-text.origin{left:150px; transform: translateX(0) translateY(-50%);} } @media only screen and (max-width:1024px){ .main-visual-text.origin{left:100px;} .visual-full .main-visual-title{} .visual-full .main-visual-tag{margin-top:7px;} } @media only screen and (max-width:768px){ .main-visual-text.origin{left:60px;} .visual-full .main-visual-title{font-size:2.375rem} .visual-full .main-visual-tag{font-size:1.125rem} .visual-full .main-visual-btn{margin-top:30px; font-size:1.063rem} } @media only screen and (max-width:560px){ .main-visual-text.origin{left:28px;} .visual-full .main-visual-title{font-size:1.938rem} .visual-full .main-visual-tag{font-size:1rem} .visual-full .main-visual-btn{margin-top:25px; padding:9px 22px 8px; font-size:1.063rem} .visual-full .main-visual-thumb img{object-position:22% center;} } /* 기간달력 */ .flatpickr-calendar{width:640px!important;} @media only screen and (max-width:768px){ .flatpickr-calendar{width:330px!important;} }