@charset "utf-8";
/* @container (min-width: 1920px) { } */
/*aspect-ratio: 16 / 9.3; */
/*border:1px solid red;*/
	.page_box {
		.trct_box {
			/*border:1px solid blue;*/
			position:relative;
			width:100%;
			margin-top: min(20px, 2.6vw);padding:0;
			overflow: hidden;
			/*box-shadow:0 10px 30px rgba(0,0,0,0.1);*/
			.trct_list {
				display:block;
				width:100%;
				white-space: nowrap;
				padding:0 min(20px, 2.6vw);
				transition:transform .3s ease;
				overflow:auto;
				font-family: 'Inter-Variable';
				user-select:none;
				-webkit-overflow-scrolling:touch;
				scroll-behavior:smooth;

				/* 스크롤바 숨김 */
				touch-action:pan-y;
				-webkit-overflow-scrolling: touch; 
				-ms-overflow-style: none;
				scrollbar-width: none;
				&::-webkit-scrollbar { display: none; }

				.trct_item {
					display:inline-block;
					cursor:pointer;
					text-align:center;
					border:2px solid #eeeeee;
					padding:min(20px, 2.6vw);
					width:auto; min-width:min(160px, 21.05vw);
					height:min(40px, 5vw); line-height:min(40px, 5vw);
					border-radius:999px;
					font-weight:600;
					font-size:1.2rem;
					&.on {
						font-weight:700;
						color:#ffffff;
						background-color: #2794bb;
					}
				}
			}
		}
		.tr_line {
			position: relative;
			text-align:left;
			margin: min(30px, 3.94vw);
			.tr_total {
				font-family: 'Inter-Variable';
				font-size:1.2rem;
				.title {
					font-weight:400;
					color:#a1a1a1;
				}
			}
			.tr_view {
				position: absolute;
				display:inline-block;
				text-align:right;
				top:0; right:0;
				z-index:10;

				&:hover {
					& > .tr_title > .keyup {
						transform: scaleY(-1);
						/*transform: rotateX(180deg);*/
					}
					& > .tr_sort { display:block; }
				}
				.tr_title {
					display:block;
					padding:0;
					width:auto;
					text-align:right;
					font-size:1.2rem;
					font-weight:500;
					color:#29292c;
					.keyup {
						vertical-align:middle;
					}
				}
				.tr_sort {
					display:none;
					width:auto; height:auto;
					margin-top:min(10px, 1.3vw); 
					padding:min(30px, 3.94vw);
					font-size:1.2rem;
					font-weight:500;
					color:#cccccc;
					text-align:left;
					background-color:#f8f8f8;
					box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
					border-radius:10px;
					li {	
						line-height:1.8em;
						border-top:1px solid #eaeaea;
						&:first-child { border-top:none;}

						&.off { 
						   color:#cccccc;
							cursor:pointer;
							&:hover {
								background-color:#004080;
								color:#ffffff;
							}
						}
						&.on { 
							color:#29292c;
							cursor:default;
						}
					}
				}
			}
		} /*tr_line*/
		.tr_zone {
			/*border:1px solid red;*/
			display:flex;
			flex-wrap:wrap;
			margin: min(30px, 3.94vw);
			justify-content: space-around;
			gap: min(50px, 7vw) 4px;
			z-index:1;
			.tr_block {
				display:inline-block;
				vertical-align:top;
				width:48%;
				/*border:1px solid red;*/
				.tr_box {
					text-align:left;
					.tr_pic {
						position:relative;
						.tr_sm {
							width:100%; height:auto;
							aspect-ratio: 35 / 38;
							border-radius:10px;
							border:2px solid #e7e7e7;
							background-color:#f2f2f2;
						}
						.tr_pin {
							position:absolute;
							display:none;
							&.on { display:inline-block;}
							left:min(25px, 3.15vw); top:min(25px, 3.15vw);
							width:min(70px, 9.21vw);
							height:auto; /*min(35px, 4.6vw); line-height:min(35px, 4.6vw)*/
							padding:0 4px;
							border-radius:4px;
							font-family: 'Inter-Variable';
							font-size:1.2rem;
							font-weight:400;
							color:#29292c;
							background-color:#ffffff;
						}
					}
					.tr_title {
						display:block;
						margin-top:min(20px, 2.63vw);
						.tr_sub {
							display:block;						
							width:100%;
							font-size:1.2rem;
							font-weight:750;
							color:#000000;
							white-space: nowrap;
							overflow:hidden;
							text-overflow: ellipsis;
						}
						.tr_main {
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2; /* 표시할 줄 수 */	
							min-height:2em;
							height:2.5em;
							overflow: hidden;
							text-overflow: ellipsis;
							font-size:1.2rem;
							font-weight:750;
							color:#000000;
							margin: min(10px, 1.3vw) 0 min(20px, 2.63vw) 0;
						}
					}
					.tr_pr {
						display:block;
						padding-left:min(40px, 5.2vw);
						background-image: url('/common/images/tours/bill.png');
						background-repeat: no-repeat;
						background-position:0 50%;
						background-size:contain; /*cover contain;*/
						color:#29292c;
					}
					.tr_key {
						display:block;
						padding-left:min(40px, 5.2vw);
						background-image: url('/common/images/tours/kind.png');
						background-repeat: no-repeat;
						background-position:0 50%;
						background-size:contain; /*cover contain;*/
						margin-top: min(10px, 1.3vw);
						text-align:left;
						color:#919191;
						span {
							display:inline;
							margin:0;padding:0;
							/*border:1px solid red;*/
							&.dot {
								margin:4px;								
							}
						}
					}

				}
			}
		} /*tr_zone*/
	}

	/* sub09_view - 슬라이드 영역 */
	.slider {
		position:relative;
		width:100%;
		margin:0 auto;
		background:#fff;
		/*border-radius:20px;*/
		overflow:hidden;
		box-shadow:0 10px 30px rgba(0,0,0,0.1);

		.slide_wrap {
			overflow:hidden;
			position:relative;
			touch-action:pan-y;

			.slides {
				display:flex;
				transition:transform .3s ease;

				.slide {
					min-width:100%;
					user-select:none;
					position:relative;
					 img {
						width:100%;
						display:block;
						pointer-events:none;
					}
				}
			}
		}
		/* 도트 */
		.dots {
			position:absolute;
			left:50%;
			bottom:5%;
			transform:translateX(-50%);
			display:inline-block;
			width:auto;
			.dot {
				display:inline-block;
				margin: min(25px, 1vw);
				width:min(30px, 3.94vw);
				height:min(30px, 3.94vw);
				border-radius:50%;
				font-size:0;
				transition:.25s;
				cursor:pointer;
				background-color:#e8e8e8;
				color:#e8e8e8;
				&.on {
					background-color:#2794bb;
					color:#2794bb;
				}
			}
		}
	}
	/* 슬라이드 영역 - 끝 */

	.tr_info {
		text-align:left;
		margin:min(30px, 3.94vw);
		.tr_title {
			display:block;
			margin:min(20px, 2.63vw) 0;
			.tr_sub {
				font-size:1.9rem;
				font-weight:750;
				color:#000000;
			}
			.tr_main {
				font-size:1.9rem;
				font-weight:750;
				color:#000000;
				line-height:1em;
			}
		}
		.tr_pr {
			display:block;
			font-family: 'Inter-Variable';
			font-size:1.4rem;
			padding-left:min(70px, 9.21vw);
			background-image: url('/common/images/tours/bill.png');
			background-repeat: no-repeat;
			background-position:0 50%;
			background-size:contain; /*cover contain;*/
			color:#29292c;
		}
		.tr_key {
			display:block;
			font-family: 'Inter-Variable';
			font-size:1.4rem;
			padding-left:min(70px, 9.21vw);
			background-image: url('/common/images/tours/kind.png');
			background-repeat: no-repeat;
			background-position:0 50%;
			background-size:contain; /*cover contain;*/
			margin-top: min(10px, 1.3vw);
			text-align:left;
			color:#919191;
			span {
				display:inline;
				margin:0;padding:0;
				/*border:1px solid red;*/
				&.dot {
					margin:4px;								
				}
			}
		}
	}

	.tr_tab {
		text-align:center;
		li {
			display:inline-block;
			width:calc(50% - 4px);
			margin:min(30px, 3.9vw) 0;
			height:min(70px, 9.2vw); line-height:min(70px, 9.2vw);

			&.on {
				border-bottom:min(4px, 0.6vw) solid #2794bb;
				font-size:1.65rem;
				font-weight:700;
				color: #2794bb;
			}
			&.off {
				border-bottom:min(4px, 0.6vw) solid #ffffff;
				font-size:1.6rem;
				font-weight:500;
			}
		}
	}
    .tr_content {
		/* border: 1px solid red; */
		text-align: left;
		margin: 0 min(30px, 3.9vw);
		.tr_overview {
			&.on { display:block; }
			&.off { display:none; }
			position: relative;
			font-family: 'Inter-Variable';
			font-size:1.3rem;
			margin-top:min(30px, 3.9vw);
			padding:min(30px, 3.9vw);

			height:auto; 
			max-height:min(500px, 65.78vw);
			line-height:1.8em;
			background-color:#f0f0f0;
			overflow-x: hidden;
			overflow-y: auto;
			text-align:left;
		}
		.tr_location {
			&.on { display:block; }
			&.off { display:none; }
			margin-top:min(30px, 3.9vw);
			.tr_map {
				position: relative;
				height:auto;
				z-index:0;
				/*border: 1px solid blue;*/
				#map {
					width:100%; height:300px;
					/*aspect-ratio: 7 / 5;*/
					/*border: 1px solid red;*/
					background-color:#f0f0f0;

				}
				.tr_edr {
					position:absolute;
					bottom:0;
					height:auto; max-height:min(150px, 19.73vw);
					margin:0;
					padding:min(30px, 3.9vw);
					z-index:100;
					background-color:rgba(230,230, 230, 0.90);
					.title {
						font-size:1.4rem;
						font-weight:750;
						color:#000000;
						margin-bottom:min(20px, 2.63vw);
					}
					.edr {
						font-family: 'Inter-Variable';
						font-size:1.25rem;
						font-weight:450;
						color:#000000;
					}
				}
			}
			.tr_detail {
				display:block;
				position: relative;
				font-family: 'Inter-Variable';
				font-size:1.3rem;
				margin-top:min(30px, 3.9vw);
				padding:min(30px, 3.9vw);

				height:auto; 
				max-height:min(500px, 65.78vw);
				line-height:1.8em;
				background-color:#f0f0f0;
				overflow-x: hidden;
				overflow-y: auto;
				text-align:left;
			}
		}
	}
	.goto_line {
		display:block;
		font-family: 'Inter-Variable';
		font-size:1.5rem;
		margin:min(30px, 3.9vw);
		height:min(90px, 11.84vw);
		line-height:min(90px, 11.84vw);
        color: #ffffff;
        background-color: #2794bb;
		border-radius:10px;
		a {
			color: #ffffff;
		}
	}

		.saved_page {
			display: flex;
			justify-content: space-between;
			align-items: center; /* 수직(교차축) 중앙 정렬 */
			height:min(150px, 19.73vw);
			line-height:min(150px, 19.73vw);
			margin:0 0 min(20px, 2.6vw) 0;
			padding:min(30px, 4vw);
			/*border:1px solid red;*/
			/*box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);*/
			.arr {
				width:16px; height:auto;
			}
			.num {
				display:inline-block;
				text-align:center;
				width:35px; height:35px; line-height:35px;
				/*border:1px solid red;*/
				border-radius:50px;
				font-size:16px; /*1.28rem;*/
				font-weight:500;

				&.none {
					img { width:90% }
				}
				&.on { 
					background-color:#2793ba;
					color:#ffffff;

				}
			}
		}