html,body {width:100%; height:100%; 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: 'SBAggroB';*/font-family: 'Sunflower', sans-serif; font-weight:700; 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-weight: 700; font-size:0.925rem; color:#fff6d4; text-align:Center;line-height:1.4rem;}
#fullpage .section .txt p span {font-size:1.5em; font-weight:400; white-space:nowrap; color:#fff6d4; font-family: 'East Sea Dokdo', cursive; }
#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:50%;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: 65%; 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;
	}

@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)
    )
	}
}
	




/* =====================================
   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%; max-width:640px; padding:1rem 1rem 1rem 1rem}
.inner .tit {position:relative; color:#333; font-weight:300; font-size:1.0rem; margin-bottom:1rem}
.inner .tit h3 {font-size:2rem; font-family: 'Cormorant Garamond', serif;}
.inner .tit .more {position:absolute; right:0; top:50%;  transform:translateY(-50%); display:block;}
.inner .tit .more:before {content: "\e90b"; font-family: xeicon!important; font-size:2rem; color:#555}
.bbsBox .bbs li {display:flex; flex-flow:column wrap; border:1px solid #ccc; background:#fff; margin-bottom:1rem}
.bbsBox .bbs li a {display:block; padding:1rem}
.bbsBox .bbs li span.date {font-family: 'Montserrat', sans-serif; font-weight:400;font-size:0.825rem; letter-spacing:-0.05em; color:#ccc}
.bbsBox .bbs li p.bbstit {font-weight:700; color:#333; font-size:1.125rem}


/*포토갤러리*/
.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);
		}

.ph_button {position:relative; width:10em; display:flex; justify-content:space-between; align-items:center;  padding:1.5rem 1rem; margin:0 auto}
.ph_button:before {content:""; width:3em; height:1px; background:#333; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%)} 
.ph_button .swiper-button-prev-ph,
.ph_button .swiper-button-next-ph {position:relative; width: 3.5em; height: 3.5em; background: #333; border-radius: 50vw; text-indent: inherit; font-family: 'Montserrat'; font-weight: 300; -webkit-font-smoothing:antialiased; text-rendering:auto; text-align: center; font-size: 7.5pt; color:#fff;}
.ph_button .swiper-button-prev-ph:before,.ph_button .swiper-button-next-ph:before {font-family: xeicon!important; font-size:1.125rem; color:#ccc; display:block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.ph_button .swiper-button-prev-ph:before {content:'\e93c'; }
.ph_button .swiper-button-next-ph:before {content:'\e93f'; }

.ph_button .swiper-button-prev-ph:hover,
.ph_button .swiper-button-next-ph:hover {background:#000; transition: 1s;}

/*이용안내*/
.mb1Sec {
	/*position:absolute;
	z-index:1;*/
	display:flex; 
	flex-flow:row wrap; 
	justify-content:center; 
	/*max-width:1600px;*/
	margin:0 auto; 
	text-align:center
	}
.mb1Sec>div {
		display:flex;
		width:calc(100% - 0rem);
		transform: translateY(0px); 
		transition:.2s ease-out; 
		margin:0 0 0 0; 
		/*padding:1.5rem 1rem;*/
		color:#fff
		}
.mb1Sec>div>dl,.mb1Sec>div>ul {padding:1.5rem 1rem;}
.mb1Sec>div:nth-of-type(1) {background-color:rgba(106,177,76,0.9); justify-content: end; }
.mb1Sec>div:nth-of-type(2) {background-color:rgba(126,96,72,0.9);}

.mb1Sec>div>dl {width:100%; max-width:800px; text-align:left}
.mb1Sec>div>dl>dt {font-size:0.925rem; margin-bottom:0.333rem}
.mb1Sec>div>dl>dt:nth-of-type(2) {margin-top:1rem}
.mb1Sec>div>dl>dd>ul {display:flex; flex-flow:row wrap}
.mb1Sec>div>dl>dd>ul>li{}
.mb1Sec>div>dl>dd>ul>li>span {margin-right:1rem; font-weight:700}
.mb1Sec>div>dl>dd.num {font-family: 'Montserrat', sans-serif; font-weight:400;}
.mb1Sec>div>dl>dd.num>a {color:#fff !important}
.mb1Sec>div>dl>dd.num>a>span {font-size:1.25rem; font-weight:700;color:#fff !important}
.mb1Sec>div>dl>dd.num>a>em {font-family: 'Pretendard'; font-weight:400; margin-left:5px}
/*가온밸리 로고*/
.gaonvalley {
	height:100%; 
	background:#548142;
	display: flex;
	flex-direction: column;
	align-items:center;
	justify-content: center;
	padding:0 1rem;
}
.gaonvalley>a {color:#fff}
.gaonvalley>a>img {max-width:112px; margin:0 auto 0.333rem auto}
.gaonvalley .visitBTN {
	position:relative;
	display:inline-block;
	background:#225720;
	color:#83c967;
	border-radius:30px;
	text-align:center;
	padding:0.1rem 2rem 0.1rem 1rem;
	margin-top:1rem;
	font-size:0.875rem;
	font-weight:500;

}
.gaonvalley .visitBTN:after {
	content:"\e93f";
	font-family: xeicon!important;
	font-size:1.25rem; 
	display:block; 
	position: absolute; 
	top: 50%; 
	right: 0; 
	transform: translate(-50%, -50%);
	transition:.2s ease-out;
}

.gaonvalley>a:hover .visitBTN:after
{
	transform: translate(-20%, -50%);
	transition:.2s ease-out;
}

/*바로가기*/
.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}

}
@media all and (min-width:1200px) {
#fullpage .section .txt h3 {font-size:2.5rem; line-height:1.0em}
#fullpage .section .txt h3 span,#fullpage .section .txt p span {display:block}
.mb1Sec>div {width:50%; /*padding:2rem*/}
.mb1Sec>div>dl,.mb1Sec>div>ul {padding:2rem;}
.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;}
.bbsBox{padding:1rem 4rem 0 4rem}
.bbsBox .bbs li p.bbstit {font-size:1.25rem}
.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}
}


@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:15vh;}

	#fullpage .section .txt h3 {font-size:3rem}
	#fullpage .section .txt p span{font-size:3em;}
}

@media (min-width: 2000px){
	
	#fullpage .mainbody2:before {
		content:"";
		font-family:'Quentin'; 
		text-align:left;
		font-size:10rem;
		color:#e4e4e4;
		position:absolute;	
		width:50%;
		top:0;
		left:0;
		transform:translate(0,0)
	}
	#fullpage .mainbody2:after {
		content:"Healing life";
		font-family: 'Quentin'; 
		text-align:right;
		font-size:12rem;
		/*text-transform:uppercase;*/
		color:#e4e4e4;
		position:absolute;	
		width:80%;
		bottom:-5%;
		right:0;
		transform:translate(0,0);
		z-index:1;
	}
}






.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}
}