@charset "utf-8";

@font-face {
  font-family: "18TRIPSansFunnyMedium";
  src: url("./images/18TRIPSansFunny-Medium.woff2") format("woff2"),url("./images/18TRIPSansFunny-Medium.woff") format("woff")
}
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP:wght@100;200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');
@font-face {
  font-family: "Roboto Condensed", sans-serif;
	src: url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap");
	unicode-range: U+0020-007F;
}
@font-face {
    font-family: 'NanumSquareRound';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NanumSquareRound.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
	font-family: "M PLUS Rounded 1c";
	src: url("https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@100..900&display=swap");
	unicode-range: U+3040-309F, U+30A0-30FF, U+4E00-9FFF; /* 일본어 문자 */
}
@keyframes slideDown {
	to {
			opacity: 1;
			transform: translateY(0);
	}
}
@keyframes slideIn  {
	to {
			opacity: 1;
			transform: translateX(0);
	}
}
/* 목차 */
/* 01. global setting */
/* 02. cover */
/* 03. list */
/* 04. copyright */
.trip18 {
	font-family: '18TRIPSansFunnyMedium', sans-serif !important;
}
/* font-family: '18TRIPSansFunnyMedium', sans-serif;
font-variant-ligatures: discretionary-ligatures; */

/* 01. global setting */
* {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
	text-decoration: none;

	/* cursor: url(https://cur.cursors-4u.net/cursors/cur-9/cur817.cur), auto !important; */
	/* cursor: url(https://cur.cursors-4u.net/others/oth-6/oth660.cur), auto !important; */
	cursor: url(https://cur.cursors-4u.net/cursors/cur-9/cur820.cur), auto !important;
	/* cursor: url(https://cur.cursors-4u.net/cursors/cur-9/cur829.cur), auto !important; */
}

.fa-solid  {
  /* animation: fa-shake 2s infinite linear !important; */
}

body {
	/* font-family: "Roboto Condensed", "M PLUS Rounded 1c", sans-serif; */
	font-family: 'NanumSquareRound';
}

/* body:lang(ja) {
	font-family: "M PLUS Rounded 1c", sans-serif;
} */
:root {
	--color-primary: #8ea7ce;
	--font-color: #323232;
	--theme-color: #C8FF46;
	--point-navy: #2B3240;
	--cate-color: #282828;
	--grey-blue: #DCE6EB;
	--default-header: #CBCCC6;
	--default-sidebar: #E0E1D1;
	--image-cover-padding: 10px;
	--bell: #fff;
	--side-radius: 5px;
	--popup-bg: #F8F8F0;
	--article-bg: #f0f0ec;
	--cntr-height: 30px;
	--send-msg-bg: #fafafa;
	--receive-msg-bg: #3687dd;
	--receive-msg-color: #f0f0f0;
	--ssr-gradient: linear-gradient(145deg, rgba(255,255,255,0) 74%, rgba(242,202,19,0.37307422969187676) 79%, rgba(241,127,104,0.6027661064425771) 84%, rgba(244,30,191,0.5467436974789917) 89%, rgba(243,56,109,0.8464635854341737) 95%, rgba(240,70,60,0.8800770308123249) 98%);


  /* --send-bg: #0B93F6; */
	--send-bg: #428ad7;
  --send-color: #f0f0f0;
  --receive-bg: #E5E5EA;
	/* --receive-bg: #dadadf; */
  --receive-text: #454545;
  --page-background: var(--article-bg);
}

a {
	color: var(--font-color);
}

img {
	/* width: 100%; */
}

#mainContainer {
	width: 100%;
	height: 100%;
	background-image: url('./images/members_bg2.png');
	/* background-image: url('https://18trip.jp/shared/img/top/members_bg2.png'); */
	/* background-image: url('./images/detail_bg.png'); */
	background-size: cover;
	background-size: 2340px 1400px;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #F5F5F5;
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-thumb {
	background-color: var(--color-scrollbar-thumb);
	border-radius: 6px;
}

::-webkit-scrollbar-track {
	background-color: var(--color-scrollbar-track);
}

::selection {
	color: var(--color-select-font);
	background-color: var(--color-select-bg);
}
/* ********************** */
/* 색은 스킨에 맞게 수정하셔도 되나, 거의 안 보일 정도로의 변경만 피해 주세요 ㅜㅜ... */
.copy a {
  text-decoration: none;
  color: #555;
  font-size: 17px;
	display: none;
}
.copy {
  position: fixed;
  left: 1px;
  bottom: 1px;
  font-size: 15px;
  z-index: 100;
	padding: 8px;
	display: none;
}

.copy .hidden {
	display: none;
	margin-left: -3px;
}

.copy:hover .hidden {
	display: inline-block;
}

/* ********************** */
#mainWrap {	
}
#mainContainer {
	display: flex;
	height: 100vh;
	overflow: auto;
}
.sideBar {
	/* opacity: 1;
	width: 290px;
	background-color: var(--default-sidebar);
	height: 100vh;
	overflow: hidden;
	position: sticky;
	top: 0;
	transform: translateX(-20vw);
	animation: slideIn 0.6s ease-out forwards; */
	opacity: 1;
	width: 290px;
	background-color: var(--default-sidebar, lightgray);
	height: 100vh;
	overflow: hidden;
	position: sticky; /* 또는 fixed로 설정할 수 있습니다. */
	top: 0;
	/* transform: translateX(-20vw); 화면이 클 때의 기본 위치 */
	transition: transform 0.6s ease-out, opacity 0.4s ease-out;
	z-index: 1000; /* 사이드바를 최상단에 표시합니다. */
}
.mobileSidebarHeader {
	display: none;
}
.sideHeader {
	display: none;
}
.sideBarContent {
	padding: 26px 0 0 0;
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100vh;
}
.logoImage {
	/* display: flex; */
	align-items: center;
	width: 80%;
	max-width: 250px;
	min-width: 150px;
}
.logoImage img {
	width: 60%;
	margin: auto;
	align-self: center;
	display: flex;
	transition: filter 0.4s ease;
}
.logoImage img:hover {
	filter: invert(82%) sepia(23%) saturate(663%) hue-rotate(37deg) brightness(110%) contrast(105%);
}

.logoImage img:active {
	scale: 1.1;
}

.logoImage .logoText {
  font-family: "18TRIPSansFunnyMedium";
	font-size: 12px;
	margin-top: 20px;
}
.iconWrap {
	display: none;
}
.categoeyWrap {
	width: 80%;
}

@media (max-width: 1200px) {	
	.mobileSidebarHeader {
		/* display: inline-block; */
		background-color: #d7d6d1;
		width: 100%;
		height: 50px;
		overflow: hidden;
		/* position: sticky; */
		position: absolute;
		top: 0;
		animation: none;
		transform: none;
		z-index: 999;
		display: flex; 
		justify-content: flex-end;
	}

	.menuHam {
		background-color: var(--point-navy);
		width: 60px;
		height: 100%;
		margin-right: 20px;
	}
	
	/* .menuHam {
		width: 60px; height: 55px;
		position: absolute;
		top: 50%; left: 50%;
		transform: translate(-50%, -50%);
		cursor: pointer;
	} */
	.menuHam span {
		display: block;
		background: #fff;
		width: 42px;
		height: 4px;
		border-radius: 3px;
		transition: margin 0.25s 0.25s, transform 0.25s ;
		margin: auto;
	}
	.menuHam .bar1 {margin-bottom: 8px; margin-top: 10px;}
	.menuHam .bar2 {}
	.menuHam .bar3 {margin-top: 8px;}

	.menuHam.active span {
		transition: margin 0.25s , transform 0.25s 0.25s;}

	.menuHam.active .bar1 {
		margin-bottom: -4px;
		/* margin-top: 8px; */
		margin-top: 23px;
		transform: rotate(45deg);
	}
	.menuHam.active .bar2 {
		transform: rotate(45deg);
	}
	.menuHam.active .bar3 {
		margin-top: -4px;
		transform: rotate(135deg);}	 

	
	.sideBar {
		opacity: 0;
		transform: translateX(-100%); /* 숨김 처리 */
		position: fixed; /* 사이드바를 화면 고정 */
		z-index: 1000; /* 화면이 작을 때도 최상단에 표시 */
	}

	.sideBar.active {
		opacity: 1;
		transform: translateX(0); /* 사이드바를 보이도록 설정 */
	}

	.articleWrap {
		width: 80% !important;
		/* margin: 100px auto !important; */
	}
}

#contentWrap {
	/* background-color: aliceblue; */
	/* width: 540px; */
	width: 100vw;
	/* height: 100vh; */
	
  display: flex;
  flex-direction: column;
  /* gap: 56px; */
  /* margin: 96px auto; */
  order: 2;
}

.cover {
	/* margin-bottom: 56px; */
	width: 50%;
	/* background-color: #fff; */
	border-radius: 16px;
	margin: 30px auto 50px auto ;
  /* margin: 96px auto;
    z-index: 1;
	position: absolute;
	top: 25%;          
	left: 63.5%;         
	transform: translate(-50%, -50%);  */
	padding: 20px;
}
.cover img {
	width: 100%;
}
.type-message {
	
	padding: 20px;
	width: 50%;
	/* background-color: #fff; */
	border-radius: 16px;
	margin: 10px auto 50px auto ;
}
/* ---------- 커버 ----------- */
.cover-item-noti {
	border-bottom: 1px solid var(--point-navy);
}
.cover-item-noti:nth-last-child(1){
	border: none;
}
.cover .type-noti {

}
.map {
		width: 100%;
		height: auto;
}
.country {
		stroke: #fff;
		stroke-width: 0.5;
}
.country:hover {
		fill: var(--theme-color);
}
/* ----- 카테고리 ------- */
.link_tit {
	display: none;
}

.tt_category {
  font-family: "18TRIPSansFunnyMedium";
	font-variant-ligatures: discretionary-ligatures;
	text-transform: uppercase;
	margin-bottom: 86px;
}
.decoWrap {
  font-family: "18TRIPSansFunnyMedium";
	font-variant-ligatures: discretionary-ligatures;
	margin-bottom: -40px;
	width: 100%;
	height: 100%;
}
.decoText {
	display: flex;
	justify-content: space-between;
	border-bottom: 3px solid #000;
	margin: 14px 0;
	padding: 4px 0;
	align-items: flex-end;
}
.decoNumber {
	font-size: 0.85rem;
}
.decoID {
	font-size: 1.2rem;
}
.decoTime {
	display: flex;
	justify-content: space-between;
}
.decoBox {
	width: 50%;
	background-color: #282828;
}
.decoBox span {	
	font-size: 7px;
	color: var(--default-sidebar);
	display: inline-block;
	transform: scaleY(3);
	padding: 8px;
	letter-spacing: 3px;
}
.timeTask {
	/* margin-bottom: 4px; */
	font-size: 12px;
	line-height: 18px;
}
.hamaTrip {	
  font-family: "Libre Barcode 39", system-ui;
	font-size: 2rem;
	line-height: 7rem;
	display: inline-block;
	transform: scaleY(2); 
}

.category_list li {
	margin-bottom: 10px;
}

.category_list li a {
	color: var(--cate-color);
	font-size: 1.2rem;
}

.sub_category_list {
	display: none;
	margin-left: 20px; /* 서브 카테고리 들여쓰기 */
}

.sub_category_list:nth-child(1) {
	margin-top: 12px;
}

/* ------- 카테고리 페이지 ----- */
.searchList ol {
}

.searchList h3 {
  font-family: "18TRIPSansFunnyMedium";
	font-variant-ligatures: discretionary-ligatures;
	text-transform: uppercase;
	background-color: var(--default-header);
	color: var(--point-navy);	
	width: 100%;
	align-items: center;
	justify-content: flex-start;
	height: 80px;
	line-height: 80px;
	font-size: 35px;
	margin-bottom: 26px;
	position: sticky;
	top: 0;
	transform: translateY(-130px);
	animation: slideDown 0.4s ease-out forwards;
	animation-delay: 0.4s;
}

.searchList img {
	/* width: 500px; */
	width: 100%;
}

.list-gallery ol {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 24px;
	margin: 0 24px;
}

.list-gallery ol img {
	width: 100%;
	aspect-ratio: 1.8 / 1;
	object-fit: cover;
	overflow: hidden;
}

.list-gallery .listContentWrap  {
	display: none;
}

.list-gallery ol li {
	transition: transform 0.4s ease;
}
.list-gallery ol li:hover {
	transform: rotate(2deg);
	scale: 1.03;
	box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.35);
	transition: transform 0.4s ease;
}
.list-gallery ol li:active {
	scale: 1;
	transition: transform 0.4s ease;
}

.list-gallery .listImageTitle {
	margin-top: 6px;
	font-size: 18px;
	/* font-family: "M PLUS Rounded 1c", "SUSE"; */
	/* font-family: "SUSE", sans-serif */
  display: inline-block;
  position: relative;
  background: linear-gradient(to left, var(--point-navy) 50%, var(--color-primary) 50%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  transition: background-position 0.5s ease;
  background-size: 200% 100%;
  background-position: 100% 0%;
}
.list-gallery ol li:hover .listImageTitle {
  background-position: 0% 0%;
}



@media (max-width: 1000px) {
	.list-gallery ol {
		display: grid;
		grid-template-columns: 1fr;
		gap: 24px;
		margin: 0 24px;
	}
	.list-gallery ol img {
		width: 100%;
		aspect-ratio: 1.8 / 1;
		object-fit: cover;
	}
}

.list-gallery .listImageCover {
	background-color: #fff;
	padding: var(--image-cover-padding);
	border: #aaa solid 1px;
	border-radius: 3px;	
	position: relative;
	display: inline-block;
}


.list-gallery .listImageCover::after {
	content: '';
	position: absolute;
	top: 0;
    z-index: 1;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--ssr-gradient);
	pointer-events: none;
	margin: var(--image-cover-padding) var(--image-cover-padding) 46px var(--image-cover-padding);
}

.list-card {
	/* display: none; */
	overflow: hidden;
}
.list-card .listImageCover {
	display: none;

}
.list-card ol  {
	padding: 0px 40px;
}
.list-card ol li {
	/* margin-bottom: 12px; */
}


.list-card .listContentWrap {
	padding: var(--image-cover-padding);
	width: 90%;
	margin: auto;
	font-family: '18TRIPSansFunnyMedium', sans-serif;
	font-variant-ligatures: discretionary-ligatures;
}

.list-card .listCover {
	border: #565656 solid 2px;
	color: var(--font-color);
	padding: 20px;
	display: flex;
}
.list-card ol li:nth-child(3n+1) .listContentWrap {
	background-color: #ffffff8e;
}

.list-card ol li:nth-child(3n+1) .listCover {
	background-color: #ffffff77;
}

.list-card ol li:nth-child(3n+2) .listContentWrap {
	background-color: #eee0c68c;
}

.list-card ol li:nth-child(3n+2) .listCover {
	background-color: #EEE0C677;
}

.list-card ol li:nth-child(3n) .listContentWrap {
	background-color: #dedcc581;
}

.list-card ol li:nth-child(3n) .listCover {
	background-color: #dedcc53a;
}
.listDecoTItle {
	color: #fff;
	font-size: 20px;
	font-weight: 100;
}
.listDecoLeft {
	border-right: #565656 solid 2px;
	margin-right: 10px;
	/* padding-right: 20px; */
	width: 20%;
}
.decoDate {
	font-size: 2.5rem;
	font-weight: 600;
  /* font-family: "Vidaloka", serif; */
	font-family: "Imbue", serif;
  /* font-weight: 400; */
  /* font-style: normal; */
	transform: scaleY(1.5);
	/* letter-spacing: 5px; */
	margin-bottom: 10px;
}
.decoPass {	
	border-top: #565656 solid 2px;
	margin-top: 10px;
	display: flex;
	font-size: 11px;
}
.decoPassLeft {
	border-right: #565656 solid 2px;
	padding: 10px 10px 10px 0;
}
.decoPassRight {
	/* border-right: #565656 solid 2px; */
	padding: 10px;
}
.listDecoRight {
	/* margin: auto 0; */
	position: relative;  
	height: 130px;     
	display: flex;
	/* justify-content: center; */
	padding-left: 10px;
	width: 100%;
}
.listDecoRight .listTitle {
	align-self: center;
	font-size: 1.8rem;
	font-weight: 600;
	font-family: 'NanumSquareRound';
}
.listDecoRight .listDecoTItle {
	position: absolute;
	bottom: 0;                 
	width: 100%;              
	/* text-align: center;    */
}
/* 리스트의 번호를 세기 위한 counter 초기화
.list-card ol {
		counter-reset: list-counter;
		list-style: none;
		padding: 0;
}

.list-card li {
		counter-increment: list-counter;
		margin: 5px 0;
		padding-left: 20px; 
		position: relative; 
}

.list-card li .listDecoLeft::before {
		content: "EP - A0"counter(list-counter); 
} */



/* .list-card .swiperBody {
	background: #eee;
	margin: 0;
	padding: 0;
} */

/* .list-card .swiper {
	width: 100%;
	height: 100%;
} */

.list-card .swiper {
	height: 100vh;
}

.list-card .swiper-slide {
	/* height: 100% !important; */
	/* display: flex;
	justify-content: center;
	align-items: center; */
	scale: 0.85;
}

.list-card .swiper-slide-active {
	scale: 1;
}


/* ------------ bell ----------- */
@keyframes ring {
  0%, 100% {
    transform: rotate(0deg);
  }
  5% {
    transform: rotate(-30deg);
  }
  10% {
    transform: rotate(25deg);
  }
  15% {
    transform: rotate(-25deg);
  }
  20% {
    transform: rotate(20deg);
  }
  25% {
    transform: rotate(-20deg);
  }
  30% {
    transform: rotate(15deg);
  }
  35% {
    transform: rotate(-15deg);
  }
  40% {
    transform: rotate(15deg);
  }
  45% {
    transform: rotate(0deg);
  }
}

.bell {
  animation-name: ring;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  background-color: var(--bell);
  border-radius: 50% 50% 0 0;
  height: 75px;
  position: relative;
  transform: rotate(-30deg);
  transform-origin: top center;
  width: 80px;
	scale: 0.25;
	display: none;
}

.bell::before {
  background-color: var(--bell);
  border-radius: 50%;
  content: '';
  height: 20px;
  left: 50%;
  position: absolute;
    z-index: 1;
  top: 0;
  transform: translate(-50%, -50%);
  width: 20px;
}

.bell::after {
  background-color: var(--bell);
  border-radius: 5px;
  content: '';
  height: 10px;
  left: 50%;
  position: absolute;
    z-index: 1;
  bottom: 0;
  transform: translate(-50%, 50%);
  width: 100px;
}

.tongue {
  background-color: var(--bell);
  position: absolute;
  bottom: -15px;
    z-index: 1;
  left: 50%;
  height: 10px;
  width: 20px;
  transform: translate(-50%, 50%);
  border-radius: 0 0 10px 10px;
}


/* 플레이리스트*/
.list-playlist .plist_s {
	display: none;
}

.list-playlist .playlist .list_thumb,
.list-playlist .playlist .list_date,
.list-playlist .playlist .list_s,
.list-playlist .playlist .list_title {
	display: none;
}

.list-playlist .playlist .list_content {
	padding: 20px;
	/* border-bottom: 1px solid var(--border_color); */
}
.list-playlist .playlist_content {
	width: 560px;
	margin: auto;
}
.list-playlist .playlist .list_info {
	font-weight: bold;
	/* margin-bottom: 10px; */
}
.list-playlist .list_info {
  /* width: 100%; */
	width: 560px;
  /* max-width: 50%; */
	margin: auto;

	
    background-color: #ffffffaa;
    padding: var(--image-cover-padding);
    border: #aaa solid 1px;
    border-radius: 3px;
}
.list-playlist .playlist_content {
  /* margin-top: 20px; */
}
.lyricBtn {
	background-image: url('https://18trip.jp/shared/img/top/icon_autoplay_cr.png');
}
#plist_ly {
	display: none;
}

.trigger-area {	
	display: flex;
	flex-direction: column;
	margin: 24px 0;
}

.topTrigger {	
	/* display: inline-block; */
	/* width: 80%; */
	height: 30px;
	padding: 0 15px;
	line-height: 35px;
	/* background-color: #000; */
	/* color: #fff; */
	border: 1px solid #000;
	font-family: '18TRIPSansFunnyMedium', sans-serif;
	font-variant-ligatures: discretionary-ligatures;
	text-transform: uppercase;
	border-radius: var(--side-radius);
}

.bottomTrigger {	
	/* display: inline-block; */
	/* width: 80%; */
	height: 40px;
	padding-left: 15px;
	line-height: 40px;
	background-color: #000;
	color: #fff;
	font-family: '18TRIPSansFunnyMedium', sans-serif;
	font-variant-ligatures: discretionary-ligatures;
	text-transform: uppercase;
	border-radius: var(--side-radius);
}
.bottomTrigger:hover {
  /* transform: scaleX(0.95);	 */
}

/* 기본 팝업 스타일 */
.popup-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: flex; /* display를 flex로 변경하여 애니메이션이 부드럽게 작동하도록 */
	justify-content: center;
	align-items: center;
	z-index: 1000;
	visibility: hidden; /* 초기 상태에서 보이지 않도록 */
	opacity: 0; /* 투명도 0으로 설정 */
	transition: visibility 0s, opacity 0.3s ease;
}

/* 팝업 컨텐츠 스타일 */
.popup {
	/* background: #fff; */
	/* border-radius: 8px; */
	width: 100%;
	max-width: 500px;
	/* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); */
	transform: translateY(-30px); /* 초기 애니메이션 위치 */
	opacity: 0; /* 초기 투명도 */
	transition: all 0.3s ease; /* 팝업 컨텐츠의 애니메이션 효과 */
}

/* 팝업이 열렸을 때 스타일 */
.popup-overlay.active {
    visibility: visible; /* 팝업 배경 표시 */
    opacity: 1; /* 팝업 배경 투명도 설정 */
}

.popup-overlay.active .popup {
    transform: translateY(0); /* 팝업이 자연스럽게 올라옴 */
    opacity: 1; /* 팝업이 서서히 나타남 */
}

/* 닫기 버튼 스타일 */
.close-btn {
    position: absolute;
    top: 8px;
    right: -45px;
    font-size: 25px;
}

.popup h2 {
	font-family: '18TRIPSansFunnyMedium', sans-serif;
	font-weight: 300;
	font-variant-ligatures: discretionary-ligatures;
	background-color: var(--theme-color);
	width: 100%;
	height: 20px;
	padding: 15px 30px;
	text-align: center;
}
.popupContent {
	display: flex;
	flex-direction: column;
}
.popupText {	
	width: 100%;
	padding: 15px 30px;
	background:radial-gradient(circle at top left, transparent 0px, var(--popup-bg) 0) top left,
			radial-gradient(circle at top right, transparent 0px, var(--popup-bg) 0)top right,
			radial-gradient(circle at bottom right, transparent 15px, var(--popup-bg) 0) bottom right,
			radial-gradient(circle at bottom left, transparent 15px, var(--popup-bg) 0) bottom left;
	background-size:50% 50%;
	background-repeat:no-repeat;
}
.popupBtnWrap {
	width: 100%;
	padding: 15px 30px;
	background:radial-gradient(circle at top left, transparent 15px, white 0) top left,
			radial-gradient(circle at top right, transparent 15px, white 0)top right,
			radial-gradient(circle at bottom right, transparent 0px, white 0) bottom right,
			radial-gradient(circle at bottom left, transparent 0px, white 0) bottom left;
	background-size:50% 50%;
	background-repeat:no-repeat;
	display: flex;
	justify-content: space-evenly;
}

.popupBtn {
	border: 1px solid #000;
	padding: 10px 80px;
	border-radius: var(--side-radius);
	background-color: #fff;
	transform: 0.4 ease;
}
.popupBtn:nth-child(2) {
	background-color: var(--theme-color);
}

.popupBtn:hover {
	filter: brightness(80%); 
}
.popupBtn:active {
	scale: 0.95;
	transform: 0.4 ease;
}

.clickable-area {
	overflow: auto;
	position: relative;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.dot {
	position: absolute;
	width: 5px;
	height: 5px;
	background-color: #FF8A7A; /* 점의 색상 */
	border-radius: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.mapImage {
	position: absolute;
	transform: translate(-50%, -100%);
	transform-origin: bottom center;
	pointer-events: none;
	animation: wobble 0.7s ease-in-out infinite;
}

@keyframes wobble {
	0%, 100% {
			transform: translate(-50%, -100%) rotate(0deg) scale(0.7);
	}
	25% {
			transform: translate(-50%, -100%) rotate(8deg) scale(0.8);
	}
	50% {
			transform: translate(-50%, -100%) rotate(-8deg) scale(0.7);
	}
	75% {
			transform: translate(-50%, -100%) rotate(3deg) scale(0.75);
	}
}


#BGM {
	margin-top: 24px 0;
}
.bgmTitle {
	height: 30px;
	margin: 10px 0;
	line-height: 35px;
	border: 1px solid #000;
	font-family: '18TRIPSansFunnyMedium', sans-serif;
	font-variant-ligatures: discretionary-ligatures;
	/* text-transform: uppercase; */
	border-radius: var(--side-radius);
	overflow: hidden;
}
.bgmController{
	 display: flex;
	 justify-content: space-between;

}
.bgm-btn{
	width: 40px;
	height: 40px;
	background-size: cover; /* 이미지를 버튼 크기에 맞게 조정 */
	background-position: center; /* 이미지 위치를 가운데로 */
	background-repeat: no-repeat; /* 이미지를 반복하지 않도록 설정 */
	border: none; /* 버튼 테두리 제거 */

}

.bgm-btn:hover,
.paging a:hover {
	filter: brightness(80%);
}
.bgm-btn:active,
.paging a:active {
	scale: 0.9;
}

.prevPlay {
	background-image: url('https://18trip.jp/shared/img/top/icon_prev.png');
}
.toggleBgm {
	background-image: url('https://18trip.jp/shared/img/top/icon_autoplay_cr.png');
}
.nextPlay {
	background-image: url('https://18trip.jp/shared/img/top/icon_next.png');
}



#bgm-box {
    width: 100%; /* 마키 영역의 너비를 100%로 설정 */
    overflow: hidden; /* 넘치는 텍스트를 숨김 */
    white-space: nowrap; /* 텍스트가 줄바꿈 없이 한 줄로 표시되도록 설정 */
}
.list-webzine {
	display: flex;
	flex-direction: column; /* 세로로 정렬 */
	justify-content: center; /* 세로 중앙 정렬 */
	height: 100%; /* 부모의 높이를 100%로 설정 */
}
.list-webzine ol {
	width: 80vw;
	margin: auto;
}
.list-webzine img {
	aspect-ratio: 1 / 1.414;
}
.list-webzine .owl-item > li {
  cursor: pointer;
  margin: 6% 8%;
  transition: margin 0.4s ease;
}
.list-webzine .owl-item.center > li {
  cursor: auto;
  margin: 0;
}
.list-webzine .owl-item:not(.center) > li:hover {
  opacity: .75;
}

.list-webzine .listCover {
	display: none;
}
.list-webzine .listImageCover {
	/* border: #aaa solid 1px; */
	background-color: #ffffffaa;
	padding: var(--image-cover-padding);
	border-radius: 3px;
	position: relative;
	display: inline-block;
}
.list-webzine .listImageCover img {
	/* background-color: #fff; */
	/* padding: 20px; */
	/* border: 1px #565656 solid; */
	
    /* background-color: #ffffffaa; */
    /* padding: var(--image-cover-padding); */
    border: #aaa solid 1px;
    border-radius: 3px;
    /* position: relative; */
    /* display: inline-block; */
}
.list-webzine .listImageTitle {
	text-align: center;
	font-size: 20px;
	margin-top: 10px;
}
.owl-carousel {
	display: none !important;
}

.hidden {
	display: none;
}
.show  {
	display: block !important;
}



/* 기본적으로 <ol> 숨기기 */
.searchList .owl-carousel,
.searchList .swiperWrap {
  display: none !important;
}
.defaultCategory,
.paging {
	/* display: block; */
	opacity: 0;
	transform: translateY(5vh);
	animation: slideDown 0.4s ease-out forwards;
	animation-delay: 0.8s;
}
/* 카테고리 A일 때만 <ol> 보이기 */
.searchList.list-webzine .owl-carousel,
.searchList.list-card .swiperWrap {
  display: block !important;
}

.searchList.list-webzine .defaultCategory,
.searchList.list-card .defaultCategory {
  display: none !important;
}
/* 카테고리 B일 때는 <ol> 숨기고 다른 스타일 적용
.searchList.category-B .owl-carousel {
  display: none;
} 

.searchList.category-B .category-description {
  color: blue;
  font-weight: bold;
}*/



/* .marquee {
  width: 100%; 
  overflow: hidden; 
  position: relative;
  background-color: #f5f5f5;
} */

/* 마키 내부 텍스트 영역 설정 */
#current-bgm {
  display: flex; /* flexbox를 사용하여 텍스트를 수평으로 배치 */
  white-space: nowrap; /* 텍스트 줄바꿈 방지 */
  animation: marquee 5s linear infinite; /* 애니메이션 적용 */
}

/* 연속 애니메이션 효과 */
@keyframes marquee {
  0% {
    transform: translateX(100%); /* 텍스트가 화면 왼쪽에서 시작 */
  }
  100% {
    transform: translateX(-100%); /* 텍스트가 화면 왼쪽으로 완전히 나감 */
  }
}

.articleWrap {
	padding: 10px 25px;
	margin: 80px auto 40px auto;
	width: 70%;
	max-width: 850px;
	color: #323232;
	/* margin-bottom: 75px; */
	background-color:var(--article-bg);
	border-radius: 10px;
	border: 1px solid #ccc;
}
.articleWrap .subTitle {
	font-family: '18TRIPSansFunnyMedium', sans-serif;
}
.idWrap {
	font-family: '18TRIPSansFunnyMedium', sans-serif;
	font-size: 0.8rem;
}
.idWrap .idText {
	/* line-height: 2rem; */
	/* vertical-align: text-bottom; */
}
.numberText {
	display: flex;
}
.titleWrap, .dataWrap, .idWrap {
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #000;
	padding: 10px 0;
}
.titleWrap .title:nth-child(2) {
	/* display: flex; */
	border-left: 1px solid #000;
	padding-left: 10px;
	margin: 10px 0;
}
.articleTitle {
	font-family: 'NanumSquareRound';
	font-weight: 900;
	font-size: 1.4rem;
	margin-top: 10px;
}
.titleWrap .mainTitle {
	font-size: 2rem;
	font-weight: 500;
  /* font-family: "Vidaloka", serif; */
  font-family: "Imbue", serif;
}
.titleWrap .cntrWrap {
	margin-top: 12px;
	justify-content: space-between;
	display: flex;
	gap: 10px;
}
.titleWrap .cntrImg {
	width: var(--cntr-height);
	height: var(--cntr-height);
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid #aaa; 
}
.titleWrap .cntrName {
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: 3px;
	line-height: var(--cntr-height);
}
.titleWrap .cntrTag {
	background-color: #000;
	color:var(--article-bg);
	padding: 2px 13px;
	margin-top: 3px;
	line-height: 20px;
	height: 20px;
}
.dataWrap {
	font-family: '18TRIPSansFunnyMedium', sans-serif;
	/* font-variant-ligatures: discretionary-ligatures; */
	/* font-weight: 300 !important; */
}
.dataWrap .titleText {
  font-family: "Imbue", serif;
	font-size: 1.5rem;
	font-weight: 500;
}
.titleWrap .subTitle,
.dataWrap .subTItle {
  font-family: "M PLUS 2", sans-serif;
	white-space: nowrap;
	/* font-size: 1.5rem; */
	/* font-weight: 500; */
}
.article {
	padding: 30px;
	align-items: center;
}
.article a {
	color: var(--color-primary);
  text-decoration: underline;
}
.article a:hover {
	color: var(--color-primary);
	filter: brightness(80%);   
}
.article u {
  text-decoration: underline;
}
#tt-body-page figure.imageblock img, figure.imageblock img {
	max-width: 500px;
}
.article img {
	border-width: 20px 20px 55px 20px; /* padding처럼 보이는 border 크기 */
	border-style: solid;
	border-image: linear-gradient(to bottom, #ffffff, #fafafa) 1; /* 그라데이션이 적용된 border */
	border-radius: 3px; /* 모서리를 둥글게 처리 */
	box-sizing: border-box; /* border가 box의 크기에 포함되도록 */
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* 그림자 유지 */
	background: #ffffff; /* 내부 배경을 흰색으로 설정 */
	transition: 0.4s ease;
}
.article img:hover {
	scale: 1.02;
	/* transform: rotate(1deg); */
	box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.3); /* 그림자 유지 */
	transition: 0.4s ease;
}
.tt_article_useless_p_margin {
	border-bottom: 1px solid #000;
	margin: 24px 0;
	padding: 24px 0;
}
.container_postbtn {
	display: none !important;
}
.titleWrap .category {
}
.titleWrap .category a {	
}
.titleWrap .date {	
}


.hljs {
	color: #aaa !important;
	background-color: #1E1E1E !important;
	border-radius: 5px;
	margin-bottom: 10px;
}

.blockquote[data-ke-style='style3'], 
#tt-body-page blockquote[data-ke-style='style3'] {
	/* background-color: var(--article-bg); */
	filter: brightness(92%);
	border-radius: 3px;
}

/* div[data-ke-type='moreLess'] .btn-toggle-moreless {
	width: fit-content;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2px 14px;
	color: var(--color-primary) !important;
	font-weight: 600 !important;
	font-family: var(--font-family) !important;
	font-size: calc(var(--font-size) - 1px) !important;
	border: 1px solid var(--color-primary);
	border-radius: 5px;
	transition: all var(--transition);
}
div[data-ke-type='moreLess'].open .btn-toggle-moreless {
	color: white !important;
	background-color: var(--color-primary) !important;
} */

div[data-ke-type='moreLess'].open {
	border-radius: 4px;
	border: 1px solid #ddd;
}

.btn-toggle-moreless {
	display: block;
	padding: 15px;
	color: #555;
	font-size: 16px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	word-spacing: 3px;
	text-decoration: none;
	/* background-color: #f5f5f5; */
	background-color: var(--article-bg);
	filter: brightness(95%);
	border-color: #ddd;
	/* margin-bottom: 20px; */
	/* background-color: #fff; */
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
	box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.moreless-content {
	padding: 15px;
	/* padding: 10px; */
	/* margin-top: 10px; */
  /* border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc; */
	background-color: var(--article-bg);
	filter: brightness(103%);
	/* border-radius: 5px; */
	/* filter: brightness(92%); */
	/* transition: all var(--transition); */
}

div[data-ke-type='moreLess'] .btn-toggle-moreless  a:before {
   font-family: 'Glyphicons Halflings';
   content: "\e114";
   float: right;
   transition: all 0.5s;
}
div[data-ke-type='moreLess'].open .btn-toggle-moreless:before {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	transform: rotate(180deg);
} 

/* ul[data-ke-list-type='circle'], 
ul[data-ke-list-type='circle'] 
li, #tt-body-page ul[data-ke-list-type='circle'], 
#tt-body-page ul[data-ke-list-type='circle'] > li */
/* li[data-ke-list-type='disc']::marker {
	content: "→ "; 
	font-weight: 700;
	font-size: 1em;
} */



/* ul, li {
  list-style: none !important;
  padding-left: 0;
}

ul li {
  position: relative;
  padding-left: 1.5em;
}

ul li::before {
  content: "→ ";
  position: absolute;
  left: 0;
  font-weight: 700;
  font-size: 1em;
} */



/* 뭔가 뭔가다 */
/* .list--custom ul[data-ke-list-type='circle'] li::before {
	content: '\f061' !important;
	font-size: var(--font-size-s);
	font-family: FontAwesome !important;
	margin-left: -20px;
	padding-right: 10px;
	transition: color var(--transition);
} */

/* .list--custom ul[data-ke-list-type='circle'] > li > ul > li::before {
    content: '\f00c' !important;
    margin-left: -18px;
    padding-right: 8px;
    font-family: FontAwesome !important;
}
.list--custom ul[data-ke-list-type='circle'] > li > ul > li > ul > li::before {
    content: '\f054' !important;
    margin-left: -18px;
    padding-right: 10px;
    font-family: FontAwesome !important;
}
div[data-ke-type='moreLess'] .btn-toggle-moreless {
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 14px;
    color: var(--color-primary) !important;
    font-weight: 600 !important;
    font-family: var(--font-family) !important;
    font-size: calc(var(--font-size) - 1px) !important;
    border: 1px solid var(--color-primary);
    border-radius: var(--round-s);
    transition: all var(--transition);
}
div[data-ke-type='moreLess'].open .btn-toggle-moreless {
    color: var(--color-icon) !important;
    background-color: var(--color-primary) !important;
}

.moreless-content {
    padding: var(--moreless-padding);
    margin-top: 10px;
    border: var(--border-solid);
    border-radius: var(--round);
    background-color: var(--color-content-sub);
    transition: all var(--transition);
}

.link--effect a:link, .link--effect a:visited {
    display: inline-block;
    position: relative;
    color: var(--color-primary);
    line-height: var(--line-h-m);
}

.fileblock a:hover, .fileblock a:active {
    border-color: var(--color-primary) !important;
}

.link--effect a:link, .link--effect a:visited {
    display: inline-block;
    position: relative;
    color: var(--color-primary);
    line-height: var(--line-h-m);
} */


.type-message .cover-item {
	display: flex;
	width: 100%;
	gap: 8px;
}

.type-message .cover-item:nth-child(1) {
	opacity: 0;
	transform: translateY(50px);
	animation: slideDown 0.6s ease-out forwards;
}
.type-message .cover-item:nth-child(2) {
	opacity: 0;
	transform: translateY(50px);
	animation: slideDown 0.6s ease-out forwards;
	animation-delay: 0.3s;
}
.type-message .cover-item:nth-child(3) {
	opacity: 0;
	transform: translateY(50px);
	animation: slideDown 0.6s ease-out forwards;
	animation-delay: 0.6s;
}
.type-message .thumb-img {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 1px solid #aaa;
	background-size: contain;
}
.type-message .article-content {
	display: inline-block;
	max-width: 70%;
}
.type-message a[href="right"] {
	display: flex;
	flex-direction: row-reverse;
	gap: 4px;
	margin-top: 6px;
	align-items: end;
}
.type-message .article-summary {
	max-width: 80%;
	padding: 8px 16px;
	margin: 6px;
	color: var(--receive-msg-color);
	background-color: var(--receive-msg-bg);
	border-radius: 0px 25px 25px 25px;

}
.type-message a[href="right"] .article-summary {
	/* border: 1px solid #000; */
	background-color: var(--send-msg-bg);
	color: #454545;
	border-radius: 25px 0px 25px 25px;
	display: inline-flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 6px;
}
.type-message a[href="right"] .article-content {
	/* display: flex; */
	flex-direction: row-reverse;
	/* margin-left: auto; */
	gap: 6px;
}

.type-message a[href="right"] .article-title {
	text-align: end;
	margin-right: 15px;
}

#chartdiv {
  width: 100%;
  height: 500px;
}

.list-list .lyricBtn {
	display: none;
}

.list-list img {
	width: 100px;
	height: 100px;
	object-fit: cover;
}
.list-list ol {
	width: 80%;
	margin: auto;
}
.list-list li {
	margin-bottom: 12px;
	background-color: #fff;
	padding: 18px 36px;
	border-radius: 5px;
	border: 1px solid #ccc;
}
.list-list li img {
	border: 1px solid #ccc;
	padding: 4px;
}
.list-list li a .listImageCover{
	display: flex;
	/* justify-content: space-between; */
	gap: 30px;
}

.list-list .listContentWrap{
	display: none;
}


.category_list li a:hover {
	color: var(--theme-color);
	position: relative;
}

.category_list li a,
.cate_main-wrap,
.link_tit {
    position: relative;
}

.category_list li a::before,
.cate_main-wrap::before,
.link_tit::before {
	content: "";
	display: block;
	width: 14px;
	height: 19px;
	background: url(https://18trip.jp/shared/img/common/icon_pin.png) center center no-repeat;
	background-size: cover;
	position: absolute;
	left: -20px;
	top: 50%;
	transform: translateY(-150%); /* 시작 위치를 위로 설정 */
	opacity: 0;
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.category_list li a:hover::before,
.cate_main-wrap:hover::before,
.link_tit:hover::before {
	opacity: 1;
	transform: translateY(-50%); /* hover 시 원래 위치로 이동 */
}

.paging {
	/* width: 80%; */
	margin: 12px 24px 20px 24px;
	display: flex;
	justify-content: space-between;
}
.paging a {
	width: 40px;
	height: 40px;
	display: inline-block;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border: none;
}

.list-banner .plist_s,
.list-banner .listImageTitle {
	display: none;
}

.list-banner ol {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 12px;
	margin: 0 24px;
}

.list-banner li {
}

.list-banner .defaultCategory li img {
	width: calc(100% - 20px);
	border: 1px solid #555;
	border-radius: 3px;
	padding: 10px;
	transition: background-color 0.2s ease; /* 'transform' -> 'transition'으로 수정 */
}

.list-banner .defaultCategory li:hover img {
	background-color: var(--point-navy);
	filter: brightness(105%); 
}
.list-banner .defaultCategory li:active {
	scale: 0.95;
}


.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; /* 오버플로우 숨김 */
	z-index: 99999;
	pointer-events: none;
}

.loader div {
  position: absolute;
  top: 0;
  left: -100%; /* 애니메이션 시작 위치 */
  width: 100%;
  height: 100%;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1; /* 한 번만 실행 */
}

.box1 {
  background-color: #323232;
  animation: slideInOut 1.2s forwards;
}

.box2 {
  background-color: #ff8c78;
  animation: slideInOut 0.95s forwards;
  animation-delay: 0.15s;
}

.box3 {
  background-color: #c8ff46;
  animation: slideInOut 0.7s forwards;
  animation-delay: 0.3s;
}

@keyframes slideInOut {
  0% {
    left: -100%; /* 왼쪽 바깥에서 시작 */
  }
  40% {
    left: 0%; /* 화면을 완전히 덮음 */
  }
  60% {
    left: 0%; /* 화면을 덮은 상태로 대기 */
  }
  100% {
    left: -100%; /* 오른쪽으로 사라짐 */
  }
}

.editWrap {	
	opacity: 0.5;
	margin-right: 12px;
	/* font-family: "Imbue", serif;
	font-size: 1.5rem;
	font-weight: 500; */
}



.articleMSG {
  margin: 20px auto 0px auto;
  display: flex;
  flex-direction: column;
}
p.send {
	color: var(--send-msg-bg);
}
p.send,
p.receive {
  /* max-width: 255px; */
  max-width: 60%;
  word-wrap: break-word;
  margin-bottom: 12px !important;
  line-height: 22px;
  position: relative;
  padding: 10px 15px !important;
  border-radius: 20px;
	transform: 0.4 ease;
}
p.send:hover,
p.receive:hover {
	color: var(--theme-color);
	transform: 0.4 ease;
}
p.send:active,
p.receive:active {	
  display: inline-block;
  margin: 0 0.5rem;

  animation: rubberBand; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 0.3s; /* don't forget to set a duration! */
}

p.send:before,
p.receive:before,
p.send:after,
p.receive:after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 25px;
}

.send {
  color: var(--send-color);
  background: var(--send-bg);
  align-self: flex-end;
}

.send:before {
  right: -7px;
  width: 20px;
  background-color: var(--send-bg);
  border-bottom-left-radius: 16px 14px;
}

.send:after {
  right: -26px;
  width: 26px;
  background-color: var(--page-background);
  border-bottom-left-radius: 10px;
}

.receive {
  background: var(--receive-bg);
  color: var(--receive-text);
  align-self: flex-start;
}

.receive:before {
  left: -7px;
  width: 20px;
  background-color: var(--receive-bg);
  border-bottom-right-radius: 16px 14px;
}

.receive:after {
  left: -26px;
  width: 26px;
  background-color: var(--page-background);
  border-bottom-right-radius: 10px;
}



@media (max-width: 800px) {
	#mainWrap {
		/* width: 100vw; */
		/* overflow: hidden; */
	}
	#mainContainer {
		display: block;
	}
	#contentWrap {
		/* padding: 0 20px; */
		width: auto !important;
	}
	.searchList h3 {
    margin-top: 50px;
    left: 0;
    font-size: 30px;
	}
	.list-card ol {
		padding: 0 !important;
	}
	.listDecoTItle {
		font-size: 12px !important;
	}
	.decoDate {
		font-size: 2.1rem;
		margin-left: 7px;
		transform: none;
		font-weight: 400;
	}
	.listTitle {
		margin: 15px 0;
		font-size: 1.2rem !important;
	}
	.listDecoLeft {
		display: flex;
		/* border-bottom: #565656 solid 2px; */
    justify-content: space-between;
		border: none;
		width: 100% !important;
		border-bottom: #565656 solid 2px;
	}
	.listDecoLeft span {
		/* display: none; */
	}
	.listDecoRight {
		height: auto !important;
		display: block;
	}
	.listDecoRight .listDecoTItle {
		position: unset;
	}
	.list-card .listCover {
		padding: 10px;
		display: block !important;
	}
	.decoPass {
		margin: 0;
		border-top: none;
		/* border-bottom: #565656 solid 2px; */
	}
	.decoPassRight {
		border-left: #565656 solid 2px;
	}
	.decoPassLeft {
		border-left: #565656 solid 2px;
		border-right: none;
		padding: 10px;
	}
	.BORDING {
		display: none;
	}
	.list-banner ol {
		grid-template-columns: 1fr;
	}
}