@charset "utf-8";

/** 서브 공통 CSS **/

/* Layout */
#all							{ width:100%; height:auto; }
#content01					{ width:100%; height:auto; margin:0 auto; color:#777; zoom:1; }
#content01::after			{ display:block; clear:both; content:''; }
.con_area					{ max-width:1300px; margin:0 auto; padding:0;}
.con_area.bgGray			{ width:100%; margin-top:140px; padding:0 0 40px; background:#424242}
.berry .con_area.bgGray	{ background:#ffc4c7}

@media all and (max-width:1320px){
	.con_area01			{ width:100%; padding:0;}
	.photoWrap01		{ width:48%; }
}
@media all and (max-width:700px){
	.con_area01			{ width:100%; padding:0;}
	.photoWrap01		{ width:92%; }
}
@media all and (max-width:1119px){
	.con_area			{ width:92%; }
}
@media screen and (min-width:1px) and (max-width:979px){
	/* Layout */
	body					{ overflow-x:hidden;}
}


/* Sub 페이지 경로 */
#head_sec2									{ height:50px; background:#f2f8fb;}
.path											{ display:none;}
#position									{ display:flex; align-items:center; gap:5px;}
#position::after							{ display:none}
#position>li								{ position:relative; display:inline-block; }
#position .page span					{ display:block; background:url("/resources/images/common/bg_navi_arrow.png") no-repeat 0 50%; cursor:pointer;}
#position .page span a					{ display:block; padding:0 30px 0 20px; font-size:14.5px; font-weight:300; letter-spacing:-.01em; color:#000; line-height:50px; background:url("/resources/images/common/navi_on.gif") no-repeat top 50% right 1px; }
#position .page span a:hover,
#position .page span a:active,
#position .page span a:focus			{ color:var(--blue); font-weight:500; background:url("/resources/images/common/navi_ov.gif") no-repeat top 50% right 1px;}
#position .page span.ov a,
#position .page span.ov a:link,
#position .page span.ov a:visited,
#position .page span.ov a:hover,
#position .page span.ov a:active,
#position .page span.ov a:focus		{ background-image:url("/resources/images/common/navi_on.gif");}
#position .page ul						{ display:none; position:absolute; top:50px; left:50%; width:145%; max-width:185px; ;transform:translateX(-50%); -ms-transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); text-align:center; border:1px solid #8daec3; background:#fff; z-index:999;}
#position .page ul li a					{ display:block; padding:.6em .5em; font-size:14px; font-weight:300; color:#666; border-top:1px solid #eaeaea;}
#position .page ul li:first-child a		{ border-top:0;}
#position .page ul li a:hover,
#position .page ul li a:active,
#position .page ul li a:focus			{ color:#000;}
#position .navi_home					{ display:block; width:16px; height:15px; font-size:0; text-indent:-9999px; background:url("/resources/images/common/icon_home.svg") no-repeat left 50%; }


@media screen and (min-width:980px){
	/*Moblie Top*/
	#tab_menu,
	#tab_header		{ display:none;}
}
@media screen and (min-width:1px) and (max-width:979px){
	/* 모바일용 Sub 페이지 경로 */
	#head_sec2				{ height:40px;}	
	#posi					{ display:none;}
	.path						{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:.2em; width:100%; color:#666; font-size:.92rem; line-height:40px;}
	.path a					{ position:relative; display:inline-block; max-width:30%; padding:0 2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
	.path a:hover,
	.path a:focus			{ text-decoration:underline;}
	.path .navi_home		{ width:13px; height:13px; font-size:0; background:url("/resources/images/common/icon_home.svg") no-repeat 0 50%; text-indent:-9999px;}
	.path .navi_ov			{ font-weight:700;}

	/* Top Menu & GNB */
	#tab_menu			{ position:fixed; right:0%; top:0%; overflow-x: hidden;overflow-y: auto; width:0; height:100%; background-color:#373737;z-index:9999999;}
	#tab_menu h1 a		{ display:block; width:272px; height:60px; font-size:1.3rem; font-weight:bold; color:#ffc30d; text-indent:1rem; line-height:60px; letter-spacing:-.06em }
	#tab_menu #tab_lang	{ width:272px; height:30px; padding-top:8px; text-align:center; background-color:#524f4f;}
	#tab_menu #tab_lang a	{ margin-top:5px; line-height:35px;}
	#tab_menu .sitemap		{ float:left; width:272px; height:30px; margin:0; padding:5px; border-bottom:1px solid #2f2d2d;}
	#tab_menu .sitemap ul	{ margin:5px 0 0 70px;}
	#tab_menu .sitemap li	{ float:left; list-style:disc; color:#a3a3a3; font-size:80%; text-indent:0px;}
	#tab_menu .sitemap li:first-child { margin-right:40px;}
	#tab_menu .sitemap li a	{ color:#a3a3a3;}
	#tab_menu #tab_navi		{ width:272px; height:80%;}
	#tab_menu #tab_navi .title	{ float:left; border-bottom:1px solid #2f2d2d; text-indent:20px;}
	#tab_menu #tab_navi .title a { display:block; width:272px; height:45px; color:#fff; font-size:17px; line-height:45px;}
	#tab_menu #tab_navi .title a:hover,
	#tab_menu #tab_navi .title a:focus	{ background-color:#d93e3e;}
	#tab_menu #tab_navi .title2	{ float:left; border-bottom:1px solid #2f2d2d; text-indent:20px;}
	#tab_menu #tab_navi .title2 a		{ display:block; width:272px; height:45px; color:#fff; font-size:17px; line-height:45px;}
	#tab_menu #tab_navi .title2 a:hover,
	#tab_menu #tab_navi .title2 a:focus	{ background-color:#d93e3e;}

	#tab_navi .sub				{ float:left;text-indent:30px;padding:0px;margin:0px;}
	#tab_navi .sub li			{ margin:0; padding:0;}
	#tab_navi .sub a			{ display:block; width:272px; height:38px; margin:0; padding:0; font-size:15px; color:#b5b5b5; line-height:38px; border-bottom:1px solid #111; border-top:0px solid #111; background-color:#2d2d2d;}
	#tab_navi .sub a:hover	{ color:#fde926; background-color:transparent !important;}
	#tab_navi .sub .depth_3th{ padding:3px 0; background-color:#222; text-indent:30px;}
	#tab_navi .sub .depth_3th a			{ display:block; width:272px; height:20px; font-size:90%; color:#b5b5b5; line-height:20px; border:none; background-color:#222;}
	#tab_navi .sub .depth_3th a:hover	{ color:#fde926; background-color:transparent !important;}
	#tab_menu .tab_close			{ display:none;}
	#tab_menu .tab_close a			{ position:absolute; width:30px; height:30px; right:-30px; top:1rem; padding:0; font-size:0; text-indent:-9999em; transition:all ease 0.3s}
	#tab_menu .tab_close a::before	{ position:absolute; left:50%; top:35%; width:1px; height:30px; margin-top:-10px; background-color:#fff; content:''; transform:rotate(45deg); transition:transform .2s ease;}
	#tab_menu .tab_close a::after 	{ position:absolute; left:50%; top:35%; width:1px; height:30px; margin-top:-10px; background-color:#fff; content:''; transform:rotate(-45deg); transition:transform .2s ease;}

	#tab_menu .serch				{ display:block; margin:10px auto; width:96%; position:relative; background:#fff; border-radius:2em; }
	#tab_menu .serch label			{ position:absolute; width:1px; height:1px; text-indent:-9999em; }
	#tab_menu .serch .serchBox		{ width:calc(100% - 3em);  padding:0 14px; line-height:34px; border:none; background:none; }
	#tab_menu .serch .serchBtn		{ position:absolute; right:8px; top:-1px; width:34px; height:34px; border:none; background:none; cursor:pointer; }								
	#tab_menu .serch .serchBtn img	{ width:20px; height:20px; }									
}


/* Tab menu 공통 */
.locate li a:hover,
.locate_munhwa li a:hover		{ background-color:#091a1f;}



/* 여행플러스 서브 비주얼 */
.month_list_top							{ align-items:center; justify-content:center; height:400px; padding:0 3%; color:#fff; text-align:center; background:no-repeat 50% 50% / cover; }
.month_list_top.column{flex-direction:column;}
.month_list_top .small					{ display:inline-block; position:relative; margin-bottom:1.5rem; padding:.4em 2em; font-size:1.3rem; font-weight:300; letter-spacing:-.05em; background:var(--blue); border-radius:2em; z-index:1}			
.month_list_top .small::after			{ position:absolute; left:50%; bottom:-8px; width:16px; height:16px; background:var(--blue); transform:translateX(-50%) rotate(45deg); -webkit-transform:translateX(-50%) rotate(45deg); -ms-transform:translateX(-50%) rotate(45deg); -moz-transform:translateX(-50%) rotate(45deg); -o-transform:translateX(-50%) rotate(45deg); z-index:-1; content:""}
.month_list_top .underline				{ display:inline-block; position:relative; margin-bottom:.6rem; font-size:2.5rem; font-weight:700; letter-spacing:-.03em; text-decoration:underline; text-shadow:0 0 10px rgba(0,0,0,.5)}
.month_list_top .txt						{ font-size:1.45rem; letter-spacing:-.03em; }

@media all and (max-width:1024px){
	.month_list_top							{ height:320px; }
	.month_list_top .small					{ margin-bottom:1rem; padding:.3em 1.5em; font-size:1.25rem;}			
	.month_list_top .underline				{ font-size:2.2rem; line-height:1.2;}
	.month_list_top .txt						{ font-size:1.25rem;}
}
@media all and (max-width:668px){
	.month_list_top .small					{ font-size:1.1rem;}			
	.month_list_top .underline				{ font-size:1.6rem; }
	.month_list_top .txt						{ font-size:1.1rem; }
}
@media all and (max-width:468px){
	.month_list_top .small					{ font-size:1rem;}			
	.month_list_top .underline				{ font-size:1.45rem; }
	.month_list_top .txt						{ font-size:1.02rem; }
}



/* 여행정보 서브 검색 */
.info_top											{ padding:4.5rem 0; color:#fff; background:#002842}
.info_top	 .info_title							{ margin-bottom:1em; text-align:center; font-size:2.4rem; color:#fff; letter-spacing:-.02em; font-weight:700;}
.info_top	 .search_form						{ justify-content:center; gap:1.2rem 2rem}
.info_top	 fieldset								{ position:relative}
.info_top .search_stit							{ position:relative !important; display:block; height:auto !important; width:auto; clip:initial; clip-path:none; margin-bottom:.45em; font-size:1.06rem; font-weight:500; letter-spacing:-.01em; color:rgba(255,255,255,.9)}
.info_top .search_form .input				{ width:210px; height:65px; font-size:1.1rem; color:#a3a3a3; background:#fff no-repeat .9em 53% / 16px auto; border-radius:1rem}
.info_top .keyword_area .input			{ width:290px; }
.info_top .input>*							{ height:100%; width:100%; border:0; border-radius:1rem}
.info_top input[type="checkbox"]		{ width:18px; height:18px; margin-right:0; border-radius:3px}
.info_top .btn_search							{ height:65px; padding:0 1.5em; font-size:1.16rem; font-weight:700; letter-spacing:-.01em; background:var(--blue); border-radius:1rem}

.info_top .area_area .input						{ background-image:url(/resources/jns-img/sub/bg_infotop_area.svg); }
.info_top .input .area_input					{ position:relative; padding:0 2.4em 0 2.3em; }
.info_top .input .area_input::after				{ content:""; position:absolute; top:1.6em; right:1.5em; width:9px; height:9px; border:solid var(--blue); border-width:0 2px 2px 0; transform:rotate(45deg); -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); -webkit-transition:all .3s ease; transition:all .3s ease;}
.info_top .on .input .area_input::after		{ top:1.8em; transform:rotate(-135deg); -webkit-transform:rotate(-135deg); -ms-transform:rotate(-135deg); -moz-transform:rotate(-135deg); -o-transform:rotate(-135deg);}
.info_top .input .area_input em				{ display:block; overflow:hidden; color:var(--blue); font-weight:500; text-align:left; text-overflow:ellipsis; white-space:nowrap;}
.info_top .area_layer								{ display:none; position:absolute; top:65px; left:0; width:100%; overflow:hidden; color:#333; background:#fff; border:1px solid var(--blue); border-radius:1rem; z-index:10; }
.info_top .on .area_layer						{ display:block; }
.info_top .area_layer .select_area				{ gap:.5em 0; padding:1.5rem; border-bottom:1px solid var(--blue)}
.info_top .area_layer .select_area li			{ width:50%; font-size:1rem}
.info_top .area_layer .select_area .full		{ width:100%; margin-bottom:.2em;}
.info_top .area_layer .btn_area button		{ height:40px}
.info_top .area_layer .btn_area .btn_close	{ flex:1; color:var(--blue)}
.info_top .area_layer .btn_area .btn_apply	{ flex:1.5; color:#fff; background:var(--blue); }
.info_top .date_area .flex						{ align-items:center; gap:.2em}	
.info_top .date_area .wave						{ font-weight:700; font-size:1.33rem;}
.info_top .date_area .input						{ background-image:url(/resources/jns-img/sub/bg_infotop_date.svg); }
.info_top .date_area .input input				{ position:relative; padding:0 1em 0 2.1em; }
.info_top .date_area .date_select				{ position:absolute; top:-2.2em; right:0; font-size:.9rem; }
.info_top .date_area .date_select button	{ padding:.2em .8em; font-weight:300; color:rgba(255,255,255,.6); border:1px solid var(--blue); border-radius:2em}
.info_top .keyword_area .flex					{ gap:.5em}
.info_top .keyword_area .input input		{ padding:0 1.4em}
.info_top .option_area							{ width:100%}
.info_top .option_area>.flex					{ gap:2em; justify-content:center; align-items:center; font-size:.93rem; font-weight:300;}
.info_top .option_area li.flex					{ gap:.3em; align-items:center; }
.info_top .option_area .btn_reset				{ gap:.1em; align-items:center; padding:.2em .6em; border:1px solid rgba(255,255,255,.2); border-radius:5px}
.info_top .option_area .btn_reset	.icon		{ width:13px; height:12px; background:url(/resources/jns-img/sub/bg_infotop_reset.svg) no-repeat 0 0 / contain; }
.info_top .cate_area .input						{ background-image:url(/resources/jns-img/sub/bg_infotop_cate.svg); }
.info_top .cate_area .select_area li			{ width:100%; }


/* 여행정보 서브 베스트 */
.info_best															{ padding:4.5rem 0;}
.info_best .best_title												{ margin-bottom:1em; font-size:1.8rem; font-weight:700; color:#002842; letter-spacing:-.025em; text-align:center;}
.info_best .best_title em											{ color:var(--blue); font-weight:900;}
.best_wrap															{ position:relative; }
.best_wrap .swiper-button-prev:after, 
.best_wrap .swiper-button-next:after						{ display:none; }
.best_wrap .swiper-control .swiper-button-prev,
.best_wrap .swiper-control .swiper-button-next			{ top:45%; width:3.25rem; height:3rem; text-align:center; background:#333 }
.best_wrap .swiper-control .swiper-button-prev			{ left:0; }
.best_wrap .swiper-control .swiper-button-next			{ right:0; }
.best_wrap .swiper-control .swiper-button-prev img,
.best_wrap .swiper-control .swiper-button-next img	{ width:13px}
.best_wrap .rsp_img												{ border:1px solid #eaeaea; border-radius:.8rem; -webkit-transition:all .3s ease; transition:all .3s ease;}
.best_wrap .swiper-slide a:hover .rsp_img					{ box-shadow:0 0 16px rgba(0,0,0,.15); }
.best_wrap .rsp_img .mark										{ position:absolute; top:0; left:0; padding:.4em .9em; font-size:.96rem; letter-spacing:.01em; font-weight:300; color:#fff; background:var(--blue); border-radius:.8rem 0; z-index:1} 
.best_wrap .rsp_img .mark.new								{ background:#d92737}
.best_wrap .text													{ text-align:center;}
.best_wrap .text .tit												{ display:block; overflow:hidden; margin:.7em 0 .3em; font-size:1.33rem; letter-spacing:-.01em; font-weight:700; color:#111; text-overflow:ellipsis; white-space:nowrap;}
.best_wrap .text .small											{ align-items:center; justify-content:center; gap:.2em; line-height:1;}
.best_wrap .text .small .area									{ padding:.2em .6em; color:var(--blue); border:1px solid; border-radius:2em}
.best_wrap .text .small .gray									{ margin-top:-.2em; font-size:1.03rem; ;color:#767c80; font-weight:300; }

.festival_swiper .rsp_img											{ padding-top:141.2%;}
.spot_swiper .rsp_img											{ padding-top:61%;}

@media all and (max-width:1168px){
	/* 여행정보 서브 검색 */
	.info_top .search_form										{ gap:1rem 1.2rem}
	.info_top .date_area .input									{ width:160px}
	.info_top .keyword_area .input input					{ padding:0 1em}
}
@media all and (max-width:1168px) and (min-width:769px){
	.info_top .search_form .input								{ width:180px}
	.info_top .keyword_area .input							{ width:250px}
}
@media all and (max-width:1024px){
	/* 여행정보 서브 검색 */
	.info_top															{ padding:3.5rem 0}
	.info_top .info_title											{ font-size:2.2rem}
	.info_top .search_form .input,
	.info_top .btn_search											{ height:55px }
	.info_top .area_layer											{ top:55px; }
	.info_top .input .area_input::after							{ top:1.3em}
	.info_top .input .area_input.on::after					{ top:1.5em}

	/* 여행정보 서브 베스트 */
	.info_best .best_title											{ font-size:1.55rem;}
	.best_wrap .swiper											{ margin:0 2rem}
	.best_wrap .text .tit											{ font-size:1.2rem;}
	.best_wrap .text .small .area								{ font-size:.95rem;}
	.best_wrap .text .small .gray								{ font-size:.99rem;}
}
@media all and (max-width:768px){
	/* 여행정보 서브 검색 */
	.info_top .info_title											{ font-size:1.85rem; }
	.info_top .search_stit											{ font-size:1rem;}
	.info_top .input>*											{ font-size:16px;}
}
@media all and (max-width:568px){
	/* 여행정보 서브 검색 */
	.info_top															{ padding:3.5rem 0}
	.info_top .info_title											{ margin-bottom:.5em; font-size:1.65rem; }
	.info_top fieldset												{ width:100%}
	.info_top .search_form .input,
	.info_top .btn_search											{ height:45px; border-radius:8px }
	.info_top .area_layer,
	.info_top .input>*											{ border-radius:8px }
	.info_top .area_layer											{ top:45px; }
	.info_top .input .area_input::after							{ top:1em}
	.info_top .input .area_input.on::after					{ top:1.2em}
	.info_top .search_form .input button					{ text-align:left;}
	.info_top .area_area .input,
	.info_top .cate_area .input									{ width:100%;}
	.info_top .keyword_area .input							{ width:calc(100% - 5.6em)}
	.info_top .date_area .input									{ width:calc(50% - .59em)}

	.datepicker														{ width:92vw !important;}
	.datepicker.active												{ left:4vw !important; right:4vw !important}
	.-bottom-left- .datepicker--pointer, 
	.-top-left- .datepicker--pointer							{ display:none}
	.info_top .option_area>.flex								{ gap:1.1em}

	/* 여행정보 서브 베스트 */
	.info_best														{ padding:3rem 0}
	.info_best .best_title											{ font-size:1.35rem;}
	.best_wrap .swiper											{ margin:0 1rem}
	.best_wrap .swiper-control .swiper-button-prev, 
	.best_wrap .swiper-control .swiper-button-next		{ width:2.6rem; height:2.6rem}
	.best_wrap .rsp_img .month								{ padding:.2em .7em; font-size:.93rem;}
	.best_wrap .text .tit											{ font-size:1.1rem;}
	.best_wrap .text .small .area								{ font-size:.92rem;}
	.best_wrap .text .small .gray								{ font-size:.96rem;}
}
@media all and (max-width:368px){
	/* 여행정보 서브 베스트 */
	.best_wrap .festival_swiper .text .small					{ flex-direction:column-reverse; gap:.4em}
}



/*홈페이지박스*/
.homepage				{ display:block; float:right; max-width:100%; overflow:hidden; padding:2px 5px; font-size:70%; line-height:1.3; text-align:center; color:#777; text-overflow:ellipsis; white-space:nowrap; background:#f3f3f3; border:1px solid #c3c3c3;}
.go_home				{ display:block; float:right; height:20px; margin-right:3px; padding:2px 5px; font-size:85%; line-height:20px; text-align:center; color:#777; background:#f3f3f3; border:1px solid #c3c3c3; }
.go_de					{ display:block; float:right; height:20px; margin-right:6px; padding:2px 5px; font-size:85%; line-height:20px; text-align:center; color:#777; background:#fff; border:1px solid #c3c3c3;}
.go_home:hover,
.go_de:hover			{ color:#222; border:1px solid #111;}

@media screen and (min-width:1px) and (max-width:649px){
	.homepage			{ font-size:75%;text-align:left;float:left;padding:5px;}
}