html,body {position:relative; width:100%; height:100% !important; background:rgba(255,255,255,1) !important}
.main_visual {height: 100vh;overflow: hidden;}
.player {width: 100%;height: 100%;background-color: #000;background-image: url('/vod/0.jpg');background-repeat: no-repeat;-webkit-background-size: cover;background-size: cover;background-position: center center;}
.mid_cont {height: 600px;}
/*.fp-viewing-secondPage .header h1 a {background-image: url(/img/common/logo-black.png);}*/
/* =====================================
   세로 마우스휠 슬라이드
===================================== */
	#fullpage{z-index:auto; /* ☆ */position:relative;min-height:0; /* ☆ 배치 후 최종화면 확인! */margin:auto;padding:0;}
		#fullpage [class*='mainbody']{position:relative;/*transition: all 0.5s ease-in-out; height:auto !important;*/; background-size:cover !important;  overflow-x:hidden}
			
			#fullpage .mainbody1 .fp-overflow, #fullpage .mainbody2 .fp-overflow {max-height:none}
			#fullpage .mainbody2{
				background:#f2f2f2;
				
			}

			/*.fp-scroll-mac.fp-viewing-secondPage .gnb > ul .dropdown .one{color:#333}*/
			#fullpage .mainbody3{
				
			}
			#fullpage .mainbody4{

			}

#fullpage .section .sectit {display:flex; height:20vh; flex-flow:column wrap; justify-content:center; position:relative; color:#333; font-weight:300; text-align:center; font-size:1.0rem;}
#fullpage .section .sectit h3 {font-size:2rem; font-family: 'Cormorant Garamond', serif; font-weight:500;}
#fullpage .mainbody1 {position:relative;  /*overflow:hidden; */justify-content:flex-start}
#fullpage [class*='mainbody'] .inner{width:100%;display:flex;flex-flow:row wrap;align-items:center; justify-content:center}
#fullpage .mainbody2 .inner {/*height:100vh*/}
#fullpage .section .txt {max-width:500px; text-align:center}
#fullpage .section .txt h3 {font-family: 'KimjungchulGothic'; font-weight:400; letter-spacing:-0.1em; color:#fff; font-size:3rem; margin-bottom:1rem}
#fullpage .section .txt h3 span {font-size:0.925em}
#fullpage .section .txt p{font-size:0.925rem; color:#fff6d4; text-align:Center;line-height:1.4rem; margin-bottom:var(--margin-m)}
#fullpage .section .txt p span.point {
	display:block;
	font-family: var(--point-font4); 
	font-size:1.5em;  
	line-height:1.2; 
	white-space:nowrap; 
	color:#fff6d4;
	letter-spacing:var(--spacing-narrow-0)
}
#fullpage .section .txt p span.point em {font-size:0.675em}
#fullpage .section{position:relative;}
#fullpage .swiper-slide.swiper-slide-active .txt{opacity:1;transform:translate(-50%,-50%);transition:all 1.5s ease}
#fullpage .section .txt{display:none; opacity:1;width:70%;position:absolute;left:50%;top:40%;transform:translate(-50%,-50%); text-shadow: 0 0 6px rgb(0 0 0 / 60%);z-index:90}
#fullpage .section .txt .eng{font-family: 'Montserrat', sans-serif; font-size:0.825rem; text-transform: uppercase; font-weight:400;letter-spacing:6px;padding-bottom:20px}
#fullpage p.pcolor1 {color:#4d4338 !important}

/*#fullpage .section, #fullpage [class*='mainbody']{background-size: cover;background-attachment: fixed;background-repeat:no-repeat; background-position: center;}*/
.fp-arrow.fp-prev,.fp-arrow.fp-next {width:4rem; height:4rem;border-width:0 !important;}	
.fp-arrow.fp-prev:after,.fp-arrow.fp-next:after {font-family: xeicon!important; color:rgba(255,255,255,.5); transition:all 1.0s ease; font-size:4rem}
.fp-arrow.fp-prev:after {content: "\e93d"; }
.fp-arrow.fp-next:after {content: "\e940"; }
.fp-arrow.fp-next:hover:after {color:rgba(255,255,255,.9);}
.fp-warning, .fp-watermark {display:none}


	
	.myVideoW>div.mMovie {position:relative; padding-bottom: 56.25%; overflow:hidden}
	.mMovie iframe {position:absolute;top:-150px;left:0;bottom: 0; right:0; width:100%;height:100%;}
	.mMobileMovie iframe {position:absolute;top:-60px;left:0;bottom: 0; right:0; height:100%;}
	#myVideo{
		position: absolute;
		right: 0;
		bottom: 0;
		top:0;
		width: 100%;
		height: 100%;
		background-size: 100% 100%;
 		background-color: black; /* in case the video doesn't fit the whole page*/
  		background-image: /* our video */;
  		background-position: center center;
  		background-size: contain;
   		object-fit: cover; /*cover video background */
   		z-index:-1;
	}


	/* 
	   모바일일때 변경됨 myVideo => myMobileVideo
						 mMovie  => mMobileMovie                  
	   비디오 크기 다시 정의 하세요.
	*/
	.mMobileMovie {
		position: relative;
		width:100%;
		padding-bottom: 65%;
		overflow: hidden;
	}
	#myMobileVideo {height:100%; position:absolute; right: 0;bottom: 0;top:0; left:0}



	/* Layer with position absolute in order to have it over the video
	* --------------------------------------- */
	#section0 .layer{
		position: absolute;
		z-index: 4;
		width: 100%;
		left: 0;
		top: 43%;

		/*
		* Preventing flicker on some browsers
		* See http://stackoverflow.com/a/36671466/1081396  or issue #183
		*/
		-webkit-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
	}

	/*solves problem with overflowing video in Mac with Chrome */
	#section0{
		overflow: hidden;
	}


	/* Bottom menu
	* --------------------------------------- */
	#infoMenu li a {
		color: #fff;
	}


	/* Hiding video controls
	* See: https://css-tricks.com/custom-controls-in-html5-video-full-screen/
	* --------------------------------------- */
	video::-webkit-media-controls {
	  display:none !important;
	}


#main_bnr_area .main_img_wrap{position:relative;overflow:hidden;z-index:2;width:100%;height:100%}
#main_bnr_area .main_img_wrap .swiper-wrapper{}
#main_bnr_area .main_img_wrap .main_slider{position:relative}

/*메인텍스트*/
#main_bnr_area .main_slider .main_txt_box{position:absolute;z-index:3;left:130px;bottom:300px;width:40%}
#main_bnr_area .main_txt_box .big_tit{margin-bottom:20px;font-weight:700;font-size:107px;letter-spacing:-1px;line-height:114px;color:#fff;text-shadow:5px 5px 10px rgba(0,0,0,.05);font-family: 'Josefin Sans', sans-serif}
#main_bnr_area .main_txt_box .s_tit{font-weight:600;font-size:21px;letter-spacing:-1px;color:#fff;font-family: 'Josefin Sans', sans-serif}
#main_bnr_area .main_txt_box .big_tit p{overflow:hidden;position:relative;width:100%;height:114px}
#main_bnr_area .main_txt_box .big_tit p span{position:absolute;top:-114px}
#main_bnr_area .main_txt_box .big_tit .d1{animation-delay:.7s}
#main_bnr_area .main_txt_box .big_tit .d2{animation-delay:1s}

#main_bnr_area .txt_bg{position:absolute;z-index:1;top:270px;left:0;width:200%;font-weight:700;font-size:497px;letter-spacing:-35px;font-style:italic;color:#fff;opacity:0.05;font-family: 'Josefin Sans', sans-serif}
#main_bnr_area .main_slider .half_bg{position:absolute;z-index:2;right:-100%;top:0;width:40%;height:100%;background:#6727a6;opacity:.2}
#main_bnr_area .main_slider .main_img{position:absolute;z-index:4;bottom:0;opacity:0}

#main_bnr_area .slide01 .main_img{right:300px}
#main_bnr_area .slide02 .main_img{right:0}
#main_bnr_area .slide03 .main_img{right:0}

#main_bnr_area .main_img_wrap .swiper-slide{opacity:0  !important}
#main_bnr_area .main_img_wrap .swiper-slide-active{opacity:1  !important}

@media all and (min-width:1400px) {
#fullpage .section .txt{display:block;}
} 

@media all and (min-width:1600px) {
	.myVideoW {height: 85vh; overflow:hidden}
	.mMovie:after {
	content:""; 
	display:block; 
	position:absolute; 
	width:100%; 
	height:100%; 
	/*background:rgba(0,0,0,0.3);*/
	background: linear-gradient(
	  rgba(0, 0, 0, 0.4), 20%,
	  rgba(0, 0, 0, 0)
    )
	}
}
	

/* =====================================
   시설안내  slider
===================================== */
#mainVisual{overflow:hidden;position:relative;width:100%;height:70vh}

/* 텍스트 */
#mainVisual .info {
    opacity: 0;
    transform: translateX(60px);
    display: flex;
    flex-flow: column;
    justify-content: center;
    position: relative;
    z-index: 10;
	height:100%;;
    padding: 0 4% 0 2%;
    background:rgba(35,66,108,0.9);
    transition: all .8s cubic-bezier(0.165, 0.840, 0.440, 1)
}

#mainVisual .swiper-slide-active .info {
	opacity:1;
}

#mainVisual .main_txt{
display:flex;
justify-content:flex-end;
width:100%;
height:100%;
position:absolute;
top:50%;
left:50%; 
z-index:10;
-webkit-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
color:var(--color-w)
}
#mainVisual .main_txt .tit{
font-family:var(--sec-title-R); 
margin-bottom:var(--margin-m);
font-size:var(--text-3xl);
}

#mainVisual .main_txt .desc {
	font-size:var(--text-sm);
	color:var(--color-c);
	margin-bottom:var(--margin-1)
}

/* 배경이미지 */
#mainVisual .main_slide{width:100%;height:100%;background:#000}
#mainVisual .main_slide .swiper-slide{height:100%;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden}
#mainVisual .main_bg{opacity:.9;position:absolute;left:0;top:0;z-index:-1;width:100%;height:100vh;background:center no-repeat;background-size:cover}



@media all and (min-width:1000px) {
#mainVisual {height:100vh}
#mainVisual .info {
	width: 30%;
}

}

/* =====================================
   photo slider
===================================== */
#atc02{overflow:hidden;position:relative;padding:50px 0;font-size:15px;font-weight:400;color:#000;font-family:"Pretendard"}
#atc02 .tit_area{margin-bottom:88px;color:#fff;text-align:center;white-space:pre-line}
#atc02 .tit_area p{
	margin-bottom:20px;
	font-family:"Italiana", sans-serif;
	font-size:var(--msecTit);
	line-height:1;
	text-align:center;
	/*text-transform:uppercase;*/
	
}
#atc02 .tit_area p em {display:block; font-size:1.25em}
#atc02 .tit_area a{display:block;position:relative;width:250px;height:48px;margin:55px auto 0;border-radius:24px;border:1px solid #000;line-height:48px;text-align:center;color:#000;background:#fff;transition:all .35s ease;}

#atc02 .tit_area span{line-height:1.8}

#atc02 .atc02_slide{overflow-y:visible}
#atc02 ul li {width:max-content;text-align:center}
#atc02 ul li a{display:block}
#atc02 ul li img{width:886px; transform:scale(.65) rotate(10deg);transition:all .6s}
#atc02 ul li.on img{transform:scale(0.95) rotate(0)}
#atc02 ul li:before{opacity:0;display:block;content:"";position:absolute;left:0;bottom:10px;width:80%;height:75%;transform:rotate(0);background:#000;transition:all .2s}
#atc02 ul li.on:before{opacity:1;transform:rotate(-10deg);transition-duration:.6s;transition-delay:.3s}

@media(hover:hover){
#atc02 .tit_area a:hover{border-color:#000;color:#fff;background:#000;transform:translateY(-5px);box-shadow:0 4px 20px 1px rgba(0,0,0,.25)}
}

@media(max-width:1024px){
#atc02 .tit_area{padding:0 20px}
#atc02 ul li{width:80%}
#atc02 ul li img{width:100%}
}
@media(max-width:768px){
#atc02{padding-top:100px}
#atc02 .tit_area p{font-size:60px}
#atc02 .tit_area a{font-size:20px}
}
@media(max-width:480px){
#atc02{padding:60px 0 }
#atc02 .tit_area{margin-bottom:40px}
#atc02 .tit_area p{font-size:40px}
#atc02 .tit_area a{margin-top:30px;font-size:14px}
}



/* =====================================
   village slider
===================================== */

.mvSwiper{position:relative; width:100%; height:432px; overflow:hidden}
.mvSwiper .swiper-slide { background-position: center  center; background-size: cover;}
.mvSwiper img {width:100%}
.mvSwiper .txt{min-width:320px;position:absolute;width:90%; max-width:1600px; margin:0 auto;text-align:center; text-shadow: 0px 1px 6px #323232; left:50%;top:50%; z-index:3; -webkit-transform: translate(-50%, -50%);  -moz-transform: translate(-50%, -50%);  -ms-transform: translate(-50%, -50%);  -o-transform: translate(-50%, -50%);  transform: translate(-50%, -50%);}
.mvSwiper .swiper-slide .txt p {position:Relative;color:#fff;}
.mvSwiper .swiper-slide .txt .mbtxt{opacity:0;line-height:1em; font-weight:500; letter-spacing:-0.025em; -webkit-transform:translateX(-4%);-moz-transform:translateX(-4%); -ms-transform:translateX(-4%);-o-transform:translateX(-4%);}
.mvSwiper .swiper-slide .txt .bbtxt {opacity:0; display:block; font-family: 'OTEnjoystoriesBA';  font-size:3em; line-height:2em; transform:translateX(4%);}
.mvSwiper .swiper-slide-active .txt p {transition-delay: 0.6s; -webkit-transition: transform 1s;-moz-transition: transform 1s;-o-transition: transform 1s;transition: transform 1s}
.mvSwiper .swiper-slide-active .txt .mbtxt{opacity:1;-webkit-transform:translateX(0);-moz-transform:translateX(0); -ms-transform:translateX(0);-o-transform:translateX(0);}
.mvSwiper .swiper-slide-active .txt .bbtxt {opacity:1; transform:translateX(0);}
.mvSwiper .swiper-pagination-bullet-active {background:#7e6048 !important}

.mv_button {position:absolute; z-index:9990; left:50%; bottom:20%; transform:translate(-50%,-50%); width:150px; height:20px; display:flex; justify-content:space-between; margin:0 1rem margin:0 auto}
.mvSwiper .swiper-button-prev-mv,.mvSwiper .swiper-button-next-mv {width:60px; height:20px; padding:1rem; background-repeat:no-repeat; background-position:center; cursor:pointer; opacity:0.6; transition: opacity 0.6s, width 0.6s, height 0.6s;}
.mvSwiper .swiper-button-prev-mv {background-image:url(/img/arr_basic_white.svg); transform: rotate(180deg);}
.mvSwiper .swiper-button-next-mv {background-image:url(/img/arr_basic_white.svg)}
.mvSwiper .swiper-button-next-mv .cursor{position: absolute; border-radius: 50%; border: 1px solid white; top: 0; left: 0; pointer-events: none; user-select: none; transform: translate(-50%,-50%); opacity: 0; width: 40%; height: 40%; transition: opacity 0.6s, width 0.6s, height 0.6s;}
.mvSwiper .swiper-button-next-mv .cursor.on{opacity: 1; width: 100%; height: 100%;}
.mvSwiper .swiper-button-prev-mv:hover,.mvSwiper .swiper-button-next-mv:hover {opacity:1}



#wingmenu ul {position: fixed; display:flex; flex-flow:column wrap; top: 50%; right:1rem; z-index: 50;}
#wingmenu li {width:14px; height:14px;  display:block; ; margin: 7px;}
#wingmenu li a {position:relative; font-size: 14px;color: rgba(255,255,255,.3);}
#wingmenu li a span {
	border-radius: 50%;
    position: absolute;
    z-index: 1;
    height: 4px;
    width: 4px;
    border: 0;
    background: #333;
    left: 50%;
    top: 50%;
    margin: -2px 0 0 -2px;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;}
#wingmenu li.active a span {color: rgba(255,255,255,1); width:12px; height:12px; margin: -6px 0 0 -6px}
#wingmenu ul.black li a {font-size: 14px;color: rgba(0,0,0,.3);}
#wingmenu ul.black li.active a {color: rgba(0,0,0,1);}
#wingmenu ul.black {border-color: rgba(0,0,0,.3);}




.mainbody2 .mb2Sec1,.mainbody2 .mb2Sec2 {width:100%}
/*공지사항*/

.bbsBox{position:relative; z-index:2; width:100%; overflow:hidden}
.bbsBox .bbsSwiper {position:relative}
.bbsBox h3 {position:relative; display:flex; gap:1rem;  align-items:center; font-size:2rem;}
.more {
	display:inline-block;
	width:30px;
	height:30px;
}
.more:before {
	content: ""; 
	display:block;
	width:100%;
	height:100%;
	mask-image:url(/img/icon/add.svg);
	-webkit-mask-image:url(/img/icon/add.svg);
	background-color:var(--color-6);
	mask-repeat: no-repeat;
	mask-position: center;
}

.bbsBox .bbsSwiper a {display:block; padding:1rem; border:1px solid #ccc; }
.bbsBox .bbsSwiper a  span.date {font-family: 'Montserrat', sans-serif; font-weight:400;font-size:0.825rem; letter-spacing:-0.05em; color:#ccc}
.bbsBox .bbsSwiper a  p.bbstit {font-weight:700; line-height:1.2; letter-spacing:var(--spacing-narrow-0); color:#333; font-size:1.125rem; margin-bottom:var(--margin-m)}
.bbsBox .bbsSwiper a  p {font-size:var(--text-sm)};

/*포토갤러리*/
.galleryBox {position:relative; width:100%; max-width:1040px;  padding:1rem 1rem 1rem 1rem}
.phSwiper {max-height:500px; overflow:hidden}
.phSwiper .swiper-slide {position:relative;  background-position: center  center; height:auto;  padding-bottom:43%}
/* thumbnail overlay background */
		.thumbnail-overlay {
			width:100%;
			text-align:center;
			position:absolute;
			z-index:2;
			bottom:10%;
			transform:translateY(0);
			transition: transform 0.6s ease-in-out;
			}
		.media-box a {display:block; width:100%; height:100%}
		.media-box a:before{
			content:"";
			display:block;
			opacity:1;	
			position:absolute;
			z-index:1;
			width:100%;
			height:100%;
			left:0;
			top:0;
    		/*background-color: rgba(0,0,0, .20);*/
			
    		-webkit-transition: background-color 0.2s ease-out;
		       -moz-transition: background-color 0.2s ease-out;
		         -o-transition: background-color 0.2s ease-out;
		            transition: background-color 0.2s ease-out;

			
			background: repeating-linear-gradient(rgba(0,0,0, 0), rgba(0,0,0, .20) 100% );
		}


	
		.media-box a:hover:before{
			opacity:1;
    		background-color: rgba(0,0,0, .40) !important;
		}
		.thumbnail-overlay>div {position:relative;width:100%; text-align:center; color:#fff; text-shadow:0 0 6px rgb(0 0 0 / 60%); transition: transform 0.6s ease-in-out;}
		.media-box:hover .thumbnail-overlay{transform:translateY(-50px); transition: transform 0.6s ease-in-out;}
		
		/* hover effect on the image */
		.media-box img{
		    -webkit-transition: transform 0.6s ease-in-out;
		       -moz-transition: transform 0.6s ease-in-out;
		         -o-transition: transform 0.6s ease-in-out;
		        -ms-transition: transform 0.6s ease-in-out;
		            transition: transform 0.6s ease-in-out;

		    -webkit-transform-origin: bottom left;
		       -moz-transform-origin: bottom left;
		         -o-transform-origin: bottom left;
		        -ms-transform-origin: bottom left;
		            transform-origin: bottom left;
		}
		.media-box:hover img{
		    -webkit-transform: scale(1.2) translate(-20px);
		       -moz-transform: scale(1.2) translate(-20px);
		         -o-transform: scale(1.2) translate(-20px);
		        -ms-transform: scale(1.2) translate(-20px);
		            transform: scale(1.2) translate(-20px);
		}

.bbs_button {
	position:absolute;
	right:0;
	top:0;
	width:10em; 
	display:flex; 
	justify-content:space-between; 
	align-items:center;  
	margin:0 auto
	}
.bbs_button:before {
	content:""; 
	width:3em; 
	height:1px;
	background:#333; 
	position:absolute; 
	left:50%; 
	top:50%; 
	transform:translate(-50%,-50%)
	
} 
.bbs_button>div {
	position:relative; 
	width: 3.5em; 
	height: 3.5em; 
	background: #333; 
	border-radius: 50vw; 
	text-indent: inherit; 
	font-weight: 300; 
	-webkit-font-smoothing:antialiased; 
	text-rendering:auto; 
	text-align: center; 
	font-size: 7.5pt; 
	color:#fff;
	transition:.2s ease-out;
}
.bbs_button>div:before {
	content:"";
	 mask-image:url(/img/common/right_wght100.svg);
	-webkit-mask-image:url(/img/common/right_wght100.svg);
	/*background-image:url(/img/common/right_wght100.svg);*/
	background-color:var(--color-w);
	mask-repeat: no-repeat;
	mask-position: center;
	width:26px;
	height:34px;
	display:block; 
	position: absolute; 
	top: 50%; 
	left: 50%; 
	transform: translate(-50%, -50%);
	cursor: pointer;
	transition:.2s ease-out;
}
.bbs_button .swiper-button-prev-bbs:before {transform: translate(-50%, -50%) rotate(180deg);}
.bbs_button .swiper-button-next-bbs:before {}

.bbs_button .swiper-button-prev-bbs:hover,
.bbs_button .swiper-button-next-bbs:hover {background:var(--theme-color); transition:.2s ease-out;}

/*이용안내*/
.mb1Sec {
	/*position:absolute;
	z-index:1;*/
	width:100%;
	display:flex;
	/*gap:1rem;*/
	flex-flow:row wrap; 
	justify-content:center; 
	max-width:1600px;
	margin:2rem auto; 
	text-align:center
	}
.mb1Sec>div {
		position:relative;
		display:flex;
		flex-flow:column wrap;
		width:calc(100% - 1rem);
		transform: translateY(0px); 
		transition:.2s ease-out; 
		margin:0 0 0 0;
		text-align:left
		}
.mb1Sec>div:nth-of-type(1):after{
	content:"";
	position:absolute;
	right:calc(20% - 70px);
	width:75px;
	height:85px;
	background-image:url(/img/main/service.svg);
	background-repeat:no-repeat;
}

/*.mb1Sec>div:nth-of-type(2) .swiper-wrapper {gap:1rem}*/

.mb1Sec h3 {font-family: 'KimjungchulGothic'; font-size:1.5rem; color:#222; text-align:left; margin-bottom:var(--margin-s)}
.mb1Sec .serviceNum {font-family: 'Montserrat', sans-serif; font-size:var(--text-3xl); margin-bottom:1rem}
.mb1Sec .serviceNum span {font-weight:700}
.mb1Sec>div>dl {display:flex; flex-flow:row wrap; width:100%; max-width:800px; text-align:left; margin-bottom:var(--secgap)}
.mb1Sec>div>dl>dt {width:90px; font-size:0.925rem; margin-bottom:0.333rem}
.mb1Sec>div>dl>dd {width:calc(100% - 100px)}
.mb1Sec>div>dl>dd>p {font-size:0.875rem; color:#666}


/*바로가기*/
.mbaro {display:flex; flex-flow:row wrap; width:100%; max-width:800px}
.mbaro li { width:calc(50% - 1rem); margin:0 0.5rem}
.mbaro li a {display:block; color:#fff; text-align:center;}
.mbaro li a:before {display:block; content:""; width:80px; height:80px; margin:0 auto; background-size:80%; background-position:center center; background-repeat:no-repeat;}
.mbaro li:nth-of-type(1) a:before {background-image:url(/img/main/mIcon1.svg)}
.mbaro li:nth-of-type(2) a:before {background-image:url(/img/main/mIcon2.svg)}
.mbaro li:nth-of-type(3) a:before {background-image:url(/img/main/mIcon3.svg)}
.mbaro li:nth-of-type(4) a:before {background-image:url(/img/main/mIcon4.svg)}


@media all and (min-width:980px) {
#wingmenu ul {right:2rem}
.galleryBox {overflow:hidden}
.mb1Sec>div:nth-of-type(1):after{
	width:150px;
	height:170px;
	bottom:0rem;
	}
.mb1Sec h3 {margin-bottom:var(--margin-1)}
.mb1Sec>div>dl {margin-bottom:0}

}
@media all and (min-width:1200px) {
#fullpage .section .txt h3 {font-size:2.5rem; line-height:1.0em}
.mb1Sec>div:nth-of-type(1) {width:40%;}
.mb1Sec>div:nth-of-type(2) {width:calc(60% - 1rem);}
.mbaro li {width:calc(25% - 2rem);  margin:0 1rem}
.mainbody2 .mb2Sec1,.mainbody2 .mb2Sec2 {display: flex; align-items: center;}
.mainbody2 .mb2Sec1{width:40%; justify-content: end;}
.mainbody2 .mb2Sec2{width:60%; justify-content: start;}
.galleryBox {padding:1rem 0 0 8rem}
.mb1Sec>div>dl>dd>ul>li{font-size:1.125em} 
.mb1Sec>div>dl>dd>ul>li:last-child {color:#ffff00}
.mb1Sec>div>dl>dd.num {font-size:1.25rem}

.bbsBox .bbsSwiper {height:200px}

}


@media (min-width: 1400px){
	#fullpage .section .sectit {font-size:1.25em}
	#fullpage .section .sectit h3 {font-size:2.5rem}
	#fullpage .section .txt p{font-size:1.125rem; }
	/*#fullpage .mainbody2:before {content:""; width: 55%; height:100vh; background:#f2f2f2; position:absolute; z-index:-1; left:0; top:0}*/
	
	#fullpage .mainbody2 .inner:after {content:""; width: 45%; height:100vh; background:#fff; position:absolute; z-index:-1; right:0; top:0}
	.inner .tit {margin-bottom:2rem}
	.bbsBox .bbs li a {padding:1.5rem}
	.phSwiper .swiper-slide:nth-of-type(odd) {transform:translateY(40px)}
	.ph_button {margin-top:40px}
	.mvSwiper {height:85vh}
	.mvSwiper .txt {top:40%;}
	.mvSwiper .swiper-slide .txt .bbtxt {font-size:3.5em}
	.mb1Sec {height:20vh;}

	#fullpage .section .txt h3 {font-size:2.0vw}
	#fullpage .section .txt p span.point{font-size:5vw;}
}

@media (min-width: 2000px){
	
	#fullpage .mainbody2:before, #fullpage .mainbody2:after {
		position:absolute;	
		width:50%;
		transform:translate(0,0);
		z-index:2;
		font-family:var(--title-font);
		text-align:right;
		letter-spacing:var(--spacing-narrow-0)
	}
	#fullpage .mainbody2:before {
		content:"Isabu Dokdo";
		font-family:var(--title-font); 
		font-size:10rem;
		font-weight:400;
		color:#e4e4e4;
		letter-spacing:-0.04em;
		bottom:0;
		right:1rem;
		transform:translateY(-30%)
	}
	#fullpage .mainbody2:after {
		content:"Memorial Center"; 
		font-size:6rem;
		font-weight:700;
		/*text-transform:uppercase;*/
		color:transparent;
		-webkit-text-stroke:1px rgba(255,255,255,.5);
		bottom:0;
		right:1rem;
		
	}
}



.accordion {
  width: 100%;
  height: 80vh;
}

.accordion ul {
  width: 100%;
  height: 80vh;
  /*display: flex;
  justify-content: space-between;
  align-items: center;*/
  display:table;
  margin: 0;
  padding: 0;
}

.accordion ul li {
  display:table-cell;
  background:#f5f5f5;
  vertical-align: bottom;
  position: relative;
  width: 33.333%;
  height:calc((80vh - 0px) / 3);
  background-size:cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-filter: grayscale(80%);
  transition: all 500ms ease;
}

.accordion ul li div {
  display: block;
  overflow: hidden;
  width: 100%;
  height:100%
}

.accordion ul li div a {
  display: flex;
  flex-flow:column wrap;
  justify-content:center;
  align-items:center;
  width: 100%;
  height:100%; 
  position: relative;
  z-index: 3001;
  vertical-align: bottom;
  padding: 15px 20px;
  box-sizing: border-box;
  color: #fff;
  text-decoration: none;
  transition: all 200ms ease;
}

.accordion ul li div a * {
  display:block;
  text-align:center;
  text-overflow: ellipsis;
  color:#fff; 
  position: relative;
  z-index: 5;
  white-space: nowrap;
  overflow: hidden;
  -webkit-transition: all 400ms ease;
  transition: all 400ms ease;
}

.accordion ul li div a h4 {
  font-family: 'Sunflower', sans-serif;
  /*font-family: 'Cormorant Garamond', serif;*/
  font-weight:700;
  text-overflow: clip;
  font-size: 1.5rem;
  text-transform: uppercase;
  margin-bottom:1rem;

}

.accordion ul li div a p {
  font-size: 13.5px;
}

.accordion ul li:nth-child(1) { background-image: url("http://gagok2023.cdn1.cafe24.com/slideImg1.jpg"); }
.accordion ul li:nth-child(2) { background-image: url("http://gagok2023.cdn1.cafe24.com/slideImg2.jpg"); }
.accordion ul li:nth-child(3) { background-image: url("http://gagok2023.cdn1.cafe24.com/slideImg3.jpg"); }
.accordion ul:hover li { width: 20%; }
.accordion ul:hover li a * {color:rgba(255,255,255,0)}
.accordion ul:hover li:hover {width: 60%; -webkit-filter: grayscale(0);}
.accordion ul:hover li a{background: rgba(0, 0, 0, 0.5);}

.accordion ul:hover li:hover a { background: rgba(0, 0, 0, 0.1);}

.accordion ul:hover li:hover a * {

  -webkit-transform: translateX(0);
  transform: translateX(0);
  color:rgba(255,255,255,1)

}
 
 @media screen and (max-width: 600px) {

.accordion { height: auto; }

.accordion ul li,
.accordion ul li:hover,
.accordion ul:hover li,
.accordion ul:hover li:hover {
  position: relative;
  display: table;
  table-layout: fixed;
  width: 100%;
  -webkit-transition: none;
  transition: none;
}
}

.kv-toggle {
	position: absolute;
	z-index: 2;
	right: 5.5556vw;
	bottom: 8.3333vw;
	width: 3.1944vw;
	height: 5.9722vw;
	padding: 0;
	border: none;
	margin: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: transparent;
	line-height: 1;
	pointer-events: none;
}

.kv-toggle > span, .kv-toggle:before {
	position: absolute;
	top: 1.1111vw;
	right: -0.9722vw;
	display: block;
	width: 4.3056vw;
	height: 1px;
	background-color: #ffffff;
	opacity: 1;
}

.kv-toggle::before {
	content: '';
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}



@keyframes kv-toggleOpenTop {
	0% {
		right: 0;
		width: 3.2813vw;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	100% {
		right: -0.3906vw;
		width: 2.1875vw;
		-webkit-transform: translateY(-0.7813vw) rotate(45deg);
		transform: translateY(-0.7813vw) rotate(45deg);
	}
}

@-webkit-keyframes kv-toggleOpenBottom {
	0% {
		right: 0;
		width: 3.2813vw;
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	100% {
		right: -0.3906vw;
		width: 2.1875vw;
		-webkit-transform: translateY(0.7813vw) rotate(-45deg);
		transform: translateY(0.7813vw) rotate(-45deg);
	}
}

@keyframes kv-toggleOpenBottom {
	0% {
		right: 0;
		width: 3.2813vw;
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	100% {
		right: -0.3906vw;
		width: 2.1875vw;
		-webkit-transform: translateY(0.7813vw) rotate(-45deg);
		transform: translateY(0.7813vw) rotate(-45deg);
	}
}

@-webkit-keyframes kv-toggleCloseTop {
	0% {
		right: -0.3906vw;
		width: 2.1875vw;
		-webkit-transform: translateY(-0.7813vw) rotate(45deg);
		transform: translateY(-0.7813vw) rotate(45deg);
	}
	100% {
		right: 0;
		width: 3.2813vw;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}

@keyframes kv-toggleCloseTop {
	0% {
		right: -0.3906vw;
		width: 2.1875vw;
		-webkit-transform: translateY(-0.7813vw) rotate(45deg);
		transform: translateY(-0.7813vw) rotate(45deg);
	}
	100% {
		right: 0;
		width: 3.2813vw;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}

@-webkit-keyframes kv-toggleCloseBottom {
	0% {
		right: -0.3906vw;
		width: 2.1875vw;
		-webkit-transform: translateY(0.7813vw) rotate(-45deg);
		transform: translateY(0.7813vw) rotate(-45deg);
	}
	100% {
		right: 0;
		width: 3.2813vw;
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
	}
}

@keyframes kv-toggleCloseBottom {
	0% {
		right: -0.3906vw;
		width: 2.1875vw;
		-webkit-transform: translateY(0.7813vw) rotate(-45deg);
		transform: translateY(0.7813vw) rotate(-45deg);
	}
	100% {
		right: 0;
		width: 3.2813vw;
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
	}
}

@media screen and (max-width: 767px) {
 .kv-toggle > span {
		top: 4.1667vw;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
}
}

@media screen and (min-width: 768px) {

	.kv-toggle {
		bottom: 4.6875vw;
		left: 50%;
		width: 3.2813vw;
		height: 3.2813vw;
		cursor: pointer;
		-webkit-transform: translateX(-50%);
		 transform: translateX(-50%); 
	}

	.kv-toggle > span, .kv-toggle::before {
		right: 0;
		width: 3.2813vw;
	}
	.kv-toggle::before {
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.kv-toggle.-close > span, .kv-toggle.-close::before {
		width: 3.2813vw;
	}
	.kv-toggle.-close > span {
		-webkit-animation: kv-toggleCloseTop 0.6s ease;
		animation: kv-toggleCloseTop 0.6s ease;
	}
	.kv-toggle.-close::before {
		-webkit-animation: kv-toggleCloseBottom 0.6s ease;
		animation: kv-toggleCloseBottom 0.6s ease;
	}

    .accordion ul li:hover .kv-toggle > span, .accordion ul li:hover .kv-toggle::before {
 		right: -0.3906vw;
		width: 2.1875vw;
	}

	.accordion ul li:hover .kv-toggle > span,.accordion ul li .kv-toggle.on > span {
		-webkit-animation: kv-toggleOpenTop 0.6s ease;
		animation: kv-toggleOpenTop 0.6s ease;
		-webkit-transform: translateY(-0.7813vw) rotate(45deg);
		transform: translateY(-0.7813vw) rotate(45deg);
	}
	.accordion ul li:hover .kv-toggle:before,.accordion ul li .kv-toggle.on:before {
		-webkit-animation: kv-toggleOpenBottom 0.6s ease;
		animation: kv-toggleOpenBottom 0.6s ease;
		-webkit-transform: translateY(0.7813vw) rotate(-45deg);
		transform: translateY(0.7813vw) rotate(-45deg);
	}

}


@media screen and (min-width: 1000px) {
.accordion ul li div a h4 {font-size:2.0rem}
.mTB {margin-top:2rem; margin-bottom:2rem}
}