@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Montserrat+Subrayada:wght@400;700&family=Noto+Sans+JP:wght@400;900&display=swap');

/* common */
body{
	font-family: "Noto Sans JP","游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
	font-weight: 400;
}
.font_bold{font-weight: 900;}
.en_font{
	font-family: "Montserrat Subrayada","Noto Sans JP","游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
}
.point_none{pointer-events: none;}
#loader{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 9999;
}
#loader::after{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}
#loader img{
	display: block;
	width: 200px;
	z-index: 2;
}
#wrap,main{
	position: relative;
}
header{
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 2;
}
h1{position: relative;padding: 20px;}
h1::after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 220px 220px 0 0;
	top: 0;
	left: 0;
	z-index: -1;
}
h1 img{width: 180px;}
.sns_links li{margin-right: 20px;}
.sns_links li:last-of-type{margin-right: 0px;}
.sns_links li a{display: block; transition: ease 0.3s;}
.sns_links li a:hover{transform: translateY(-3px);opacity: 0.5;}
.sns_links img{width: 40px;}

#menu_bt{
	position: fixed;
	top: 40px;
	right: 20px;
	width: 70px;
	height: 60px;
	z-index: -1;
	opacity: 0;
	transition: ease 0.3s;
	border-radius: 3px;
	cursor: pointer;
}
#menu_bt:hover{opacity: 0.6!important;}
#menu_bt.sc,#menu_bt.active{
	z-index: 99;
	opacity: 1;
}
#menu_bt::before,#menu_bt::after{
	content: "";
	width: 50px;
	height: 2px;
	background-color: #fff;
	position: absolute;
	left: 10px;
	transition: ease 0.3s;
}
#menu_bt::before{
	top: 15px;
}
#menu_bt::after{
	bottom: 15px;
}
#menu_bt span{
	width: 50px;
	height: 2px;
	background-color: #fff;
	position: absolute;
	top: 50%;
	left: 10px;
	transform: translateY(-50%);
	transition: ease 0.3s;
}
#menu_bt.sc:hover::before{width: 50px;}
#menu_bt.sc:hover span{width: 45px;}
#menu_bt.sc:hover::after{width: 40px;}

#menu_bt.active span{
	width: 0;
	opacity: 0;
}
#menu_bt.active::before{
	top: 29px;
	transform: rotate(45deg);
}
#menu_bt.active::after{
	bottom: 29px;
	transform: rotate(-45deg);
}
#menu_bt.active:hover::before,#menu_bt.active:hover span,#menu_bt.active:hover::after{width: 50px;}


#menu_wrap{
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 98;
	box-sizing: border-box;
	overflow-x: hidden;
	overflow-y: auto;
	padding-top: 150px;
}
#menu_wrap::after{
	content: "";
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	opacity: 0.95;
}
#menu_wrap nav,#menu_wrap .sns_links{position: relative;z-index: 2;}
#menu_wrap nav ul li{margin-bottom: 30px;width: 50%; padding: 10px;box-sizing: border-box;overflow: hidden;}
#menu_wrap nav ul li a{display: block;position: relative;border-bottom: 1px solid;}	
#menu_wrap nav ul li a .title1{z-index: 2;text-shadow: 0 2px 4px rgba(0,0,0,0.1);}	
#menu_wrap nav ul li a .title2{position: absolute;left: 20px;bottom: 10px;opacity: 0.2;font-size: 30px;z-index: 1;white-space: nowrap;}	

footer #footer{padding: 100px 50px;position: relative;}
footer #footer::after{content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1;opacity: 0.5;}
footer #footer #map,footer #footer #footer_box{position: relative;z-index: 2;}
footer #footer #map{padding-right: 25px;}
footer #footer #footer_box{padding-left: 25px;}
footer #footer #map iframe{
	width: 100%;
	height: 500px;
}
footer #footer_bottom ul li{margin-right: 30px;}
footer #footer_bottom ul li:last-of-type{margin-right: 0px;}
footer #footer_bottom #copyright{padding-right: 65px;}

#page_top{bottom: 0;right: 0; width: 60px;height: 58px;z-index: 96;cursor: pointer;text-shadow: 0 0 4px rgba(0,0,0,0.2);transition: ease 0.3s;}
#page_top:hover{transform: translateY(-3px)}

/* index */
#main_img{
	width: 100%;
	height: 100vh;
	min-height: 800px;
	box-sizing: border-box;
	padding-bottom: 100px;
	position: relative;
	z-index: 1;
}
#main_img::after{
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
#main_img::after{
	background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,0) 0%, rgba(0,0,0,0.3) 100%);
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,0) 0%,rgba(0,0,0,0.3) 100%);
	background: radial-gradient(ellipse at center,  rgba(255,255,255,0) 0%,rgba(0,0,0,0.3) 100%);
	z-index: 2;
}
.sm-slider::after{opacity: 0.3;z-index: 1;}

#main_img h2{position: relative;z-index: 3;overflow: hidden;}
#main_img h2 span{transform: translateY(100%);transition: ease 0.8s;}
#main_img.active h2 span{transform: translateY(0);}
#main_nav{
	position: absolute;
	top: 0;
	left: 0;
	transform: translateY(-100%);
	padding: 0 50px 50px;
	z-index: 2;
}
#main_nav ul{padding: 20px 10px;position: relative;}
#main_nav ul::before,#main_nav ul::after{
	content: "";
	width: 100%;
	height: 2px;
	position: absolute;
	left: 0;
}
#main_nav ul::before{
	top: 0;
	background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
	background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
}
#main_nav ul::after{
	bottom: 0;
	background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
}
#main_nav ul li{
	margin-right: 50px;
}
#main_nav ul li:last-of-type{
	margin-right: 0;
}
#main_nav ul li a{display: block;transition: ease 0.3s;}
#main_nav ul li a:hover{transform: translateX(3px);opacity: 0.5;}

#intro #intro_box{position: relative;}
#intro #intro_box::after{content: "";position: absolute;top: 0;left: 0;z-index: 1;width: 30%;height: 100%;background-color: white;}
#intro #intro_box #intro_img{position: relative;z-index: 2;transform: translateY(-100px);}
#intro #intro_box #intro_txt{width: 50%; position: absolute;z-index: 3;top: 0;right: 0;box-sizing: border-box;overflow: hidden;}
#intro #intro_box #intro_txt h3{position: relative;}
#intro #intro_box #intro_txt h3 span{position: relative;z-index: 2;}
#intro #intro_box #intro_txt h3::after{width: 100%; position: absolute;z-index: 1;font-size: 60px;opacity: 0.1;top: 0;left: 0;transform: translateY(-50%); line-height: 1;text-align: center;white-space: nowrap;}

#intro.on #intro_box{padding-bottom: 50px;}
#intro.on #intro_box #intro_img{position: absolute;top: 0;left: 0;}
#intro.on #intro_box #intro_txt{position: relative;margin-left: 50%;}


#contents_links .box_wrap{
	padding-bottom: 100px;
	overflow: hidden;
	width: 100%;
}
#contents_links .box_wrap .box{
	border: 10px solid #fff;
	transition: ease 1s;
}
#contents_links .box_wrap .box:nth-of-type(odd){
	border-left: 20px solid #fff;
	transform: translate(-100px,0);
}
#contents_links .box_wrap .box:nth-of-type(even){
	border-right: 20px solid #fff;
	transform: translate(100px,100px);
}
#contents_links .box_wrap .box.active:nth-of-type(odd){
	transform: translate(0,0);
	opacity: 1!important;
}
#contents_links .box_wrap .box.active:nth-of-type(even){
	transform: translate(0,100px);
	opacity: 1!important;
}
#contents_links .box_wrap .box a{
	display: block;
	padding: 100px 50px 50px;
	position: relative;
	overflow: hidden;
}
#contents_links .box_wrap .box a h4,#contents_links .box_wrap .box a p,#contents_links .box_wrap .box a div{position: relative;z-index: 2;}
#contents_links .box_wrap .box a h4{
	padding: 10px 30px;
	text-shadow: 0 3px 6px rgba(0,0,0,0.2);
}
#contents_links .box_wrap .box a p{
	margin-bottom: 100px;
	text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
#contents_links .box_wrap .box a p span{
	padding: 10px 20px;
}
#contents_links .box_wrap .box a div span{
	padding: 10px 20px;
	display: inline-block;
	position: relative;
	overflow: hidden;
}
#contents_links .box_wrap .box a div span::after{
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transform: translateX(-100%);
	background-color: #000;
	z-index: -1;
	opacity: 0;
	transition: ease 0.3s;
}
#contents_links .box_wrap .box a:hover div span::after{transform: translateX(0);opacity: 1;}
#contents_links .box_wrap .box a::after{
	content: "";
	background-position: center center;
	background-size: cover;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: ease 0.6s;
	z-index: 1;
	opacity: 0.5;
}
#contents_links .box_wrap .box a:hover::after{
	transform: scale(1.05);
	opacity: 0.9;
}
#contents{
	position: relative;
	padding-top: 100px;
	padding-bottom: 100px;
}
#contents h3,#contents div{
	position: relative;
	z-index: 3;
}
#contents h3{
	font-size: 100px;
	margin-bottom: 200px;
	line-height: 1;
}
#contents div{
	width: 50%;
	box-sizing: border-box;
	margin-left: 45%;
}
#contents div h4,#contents div p{position: relative;z-index: 2;}
#contents div::after{
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0.7;
	z-index: 1;
}
#contents::before,#contents::after{
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
#contents::before{
	z-index: 2;
	background-image: url("../Dup/img/bg_black.png");
	background-position: left top;
	background-size: 100% 100%;
	opacity: 0.5;
}
#contents::after{
	z-index: 1;
	background-position: center center;
	background-size: cover;
}
#top_cms .top_cms_box:last-of-type{margin-bottom: 0;}
#top_cms .top_cms_box .top_cms_title{
	position: relative;
}
#top_cms .top_cms_box .top_cms_title h3{position: relative;z-index: 2;}
#top_cms .top_cms_box .top_cms_title p{
	position: absolute;
	font-size: 70px;
	opacity: 0.05;
	bottom: 0;
	left: 20px;
	z-index: 1;
	letter-spacing: 6px;
}
#top_cms .top_cms_box .more a{
	padding: 10px 20px;
	display: inline-block;
	position: relative;
	overflow: hidden;
}
#top_cms .top_cms_box .more a span{
	display: block;
	position: relative;
	z-index: 2;
}
#top_cms .top_cms_box .more a::after{
	content: "";
	background-color: #000;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: ease 0.3s;
	opacity: 0;
	transform: translateX(-100%);
	z-index: 1;
}
#top_cms .top_cms_box .more a:hover::after{opacity: 1;transform: translateX(0);}
/* other */
.other #main_nav{
	position: relative;
	transform: translateY(0);
	z-index: 3;
}
#page_title{
	padding-top: 300px;
	padding-bottom: 50px;
	background-position: center center;
	background-size: cover;
	position: relative;
	z-index: 1;
}
#page_title > div{
	position: relative;
	z-index: 3;
	margin-bottom: 100px;
}
#page_title > div h2{
	position: relative;
	z-index: 2;
	letter-spacing: 4px;
	text-shadow: 0 0 5px rgba(0,0,0,0.2);
}
#page_title > div p{
	position: absolute;
	bottom: 0;
	width: 100%;
	opacity: 0.4;
	font-size: 60px;
	letter-spacing: 10px;
	z-index: 1;
	opacity: 0;
	transform: translateY(10px);
	transition: ease 1.2s;
}
#page_title.active > div p{
	opacity: 0.4;
	transform: translateY(0px);
}
#page_title::before,#page_title::after{
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
#page_title::after{
	background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,0) 0%, rgba(0,0,0,0.3) 100%);
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,0) 0%,rgba(0,0,0,0.3) 100%);
	background: radial-gradient(ellipse at center,  rgba(255,255,255,0) 0%,rgba(0,0,0,0.3) 100%);
	z-index: 2;
}
#page_title::before{opacity: 0.3;z-index: 1;}

.pager{}
.pager li a{padding: 10px 20px;}

.cate_list li{position: relative;margin: 10px 20px 20px;}
.cate_list li a{position: relative;z-index: 2;padding: 10px;transition: ease 0.3s;}
.cate_list li .cate_no{position: absolute;z-index: 1;font-size: 30px;bottom: 20px;left: 0;opacity: 0.3;transition: ease 0.3s;}
.cate_list li:hover a{opacity: 0.6;transform: translateY(-5px);}
.cate_list li:hover .cate_no{transform: translateY(-5px);opacity: 0.6;}

#page07 .box_wrap .box{position: relative;opacity: 0;}
#page07 .box_wrap .box::after{
	content: "";
	width: 100%;
	height: 2px;
	position: absolute;
	left: 0;
}
#page07 .box_wrap .box::after{
	top: 100%;
	background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
}
#page08 #tel_contact{padding: 50px 20px;text-shadow: 0 0 4px rgba(0,0,0,0.2);}
#page08 #mail_contact #form_bt .bt{overflow: hidden;}
#page08 #mail_contact #form_bt .bt input{
	position: relative;
	z-index: 2;
	padding: 10px 50px;
	background-color: transparent;
	cursor: pointer;
}
#page08 #mail_contact #form_bt .bt span{
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	transform: translateX(-100%);
	transition: ease 0.3s;
	opacity: 0;
}
#page08 #mail_contact #form_bt .bt:hover span{
	transform: translateX(0);
	opacity: 1;
}
#page10 .box:last-of-type{margin-bottom: 0;}
#page10 .box a{
	position: relative;
	display: block;
	overflow: hidden;
	padding: 20px;
	border-left: 5px solid;
	border-bottom: 1px solid;
	box-sizing: border-box;
}
#page10 .box a > div{
	position: relative;
	z-index: 2;
	padding-top: 20px;
}
#page10 .box a > div h3{
}
#page10 .box a > div p{
	position: absolute;
	font-size: 60px;
	opacity: 0.05;
	bottom: 0;
	left: 20px;
	z-index: 1;
	letter-spacing: 6px;
	white-space: nowrap;
}
#page10 .box a::after{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
	transform: translateX(-50%);
	transition: 1s;
}
#page10 .box a:hover::after{
	opacity: 1;
	transform: translateX(0);
}
/* animation */
.sc_anime.fade_anime.active{
	animation-name: fadein;
	animation-duration: 1.0s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
.sc_anime.left_anime.active{
	animation-name: leftin;
	animation-duration: 1.0s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
.sc_anime.right_anime.active{
	animation-name: rightin;
	animation-duration: 1.0s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}

@keyframes loader {
  0% {transform: scale(1) translate(-50%,-50%);}
  50% {transform: scale(0.99) translate(-50%,-50%);}
  100% {transform: scale(1) translate(-50%,-50%);}
}
@keyframes fadein {
	0% {opacity:0;transform: translateY(50px);}
	100% {opacity:1;transform: translateY(0px);}
}
@keyframes leftin {
	0% {opacity:0;transform: translateX(-50px);}
	100% {opacity:1;transform: translateX(0);}
}
@keyframes rightin {
	0% {opacity:0;transform: translateX(50px);}
	100% {opacity:1;transform: translateX(0);}
}
/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
}
/* ---------- 1280px~ ---------- */
@media screen and (max-width: 1281px){
/* common */
	h1::after {
		border-width: 200px 200px 0 0;
	}
	h1 img{width: 140px;}
	footer #footer #footer_box .tel a{font-size: 24px;}
	footer #footer_bottom #copyright{width: 100%;padding-top: 20px;}
/* index */
	#main_img h2{font-size: 30px;width: 60%!important;}
	#main_nav{
		padding: 0 30px 30px;
	}
	#main_nav a{font-size: 14px;}
	#intro h3{font-size: 26px;}
	#intro #intro_box #intro_txt{width: 60%;}
	#intro.on #intro_box #intro_txt{margin-left: 40%;}
	#intro #intro_box #intro_txt h3::after{font-size: 40px;transform: translateY(-20%);}
	#contents h3,#top_cms .top_cms_box .top_cms_title p{font-size: 60px;}
	#top_cms{
		padding-left: 50px;
		padding-right: 50px;
	}
/* other */
	#page10 .box a > div p{
		font-size: 46px;
		bottom: 15px;
	}
/* animation */
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
/* common */
	footer #footer{padding: 50px;}
	footer #footer #map,footer #footer #footer_box{position: relative;z-index: 2;}
	footer #footer #map{padding-right: 0;margin-bottom: 50px;}
	footer #footer #footer_box{padding-left: 0;}
	footer #footer #map iframe{
		width: 100%;
		height: 300px;
	}
	footer #footer_bottom #copyright{width: 100%;padding-top: 0px;padding-right: 0}
	#page_top{bottom: 0;right: 0; width: 60px;height: 52px;}
	#page_top:hover{transform: translateY(0px)}
	#menu_bt{
		z-index: 99;
		opacity: 1;
	}
	#menu_bt:hover{opacity: 1!important;}
	#menu_bt.sc:hover::before{width: 50px;}
	#menu_bt.sc:hover span{width: 50px;}
	#menu_bt.sc:hover::after{width: 50px;}
	#menu_bt.active:hover::before,#menu_bt.active:hover span,#menu_bt.active:hover::after{width: 50px;}
	#menu_wrap nav ul li{margin-bottom: 0px;width: 100%;padding: 0;}
	#menu_wrap nav ul li a{padding-top: 30px}
/* index */
	#intro #intro_box{position: relative;}
	#intro #intro_box::after{width: 10%;}
	#intro #intro_box #intro_img{position: relative;transform: translateY(-50px);}
	#intro #intro_box #intro_txt{width: 80%; position: relative;margin-left: 20%;transform: translateY(-70px);}
	#intro.on #intro_box{padding-bottom: 0;}
	#intro.on #intro_box #intro_img{position: relative;top: 0;left: 0;}
	#intro.on #intro_box #intro_txt{position: relative;margin-left: 20%;}
	#contents_links .box_wrap{padding-bottom: 0;}
	#contents_links .box_wrap .box{
		width: 80%!important;
		border: none;
		margin-bottom: 20px;
	}
	#contents_links .box_wrap .box:nth-of-type(odd){
		transform: translate(-50px,0);
		border: none;
		margin-right: 20%;
	}
	#contents_links .box_wrap .box:nth-of-type(even){
		border: none;
		transform: translate(50px,0);
		margin-left: 20%;
	}
	#contents_links .box_wrap .box.active:nth-of-type(odd){
		transform: translate(0,0);
		opacity: 1!important;
	}
	#contents_links .box_wrap .box.active:nth-of-type(even){
		transform: translate(0,0);
		opacity: 1!important;
	}
	#contents_links .box_wrap .box a{
		padding: 50px 30px 30px;
	}
	#contents_links .box_wrap .box a h4{
		padding: 10px 30px;
		text-shadow: 0 3px 6px rgba(0,0,0,0.2);
	}
	#contents_links .box_wrap .box a p{
		margin-bottom: 50px;
		text-shadow: 0 2px 4px rgba(0,0,0,0.1);
	}
	#contents_links .box_wrap .box a p span{
		padding: 10px 20px;
	}
	#contents_links .box_wrap .box a div span{
		padding: 10px 40px;
	}
	#contents h3{
		margin-bottom: 100px;
	}
	#contents div{
		width: 70%;
		box-sizing: border-box;
		margin-left: 25%;
	}
	#contents h3,#top_cms .top_cms_box .top_cms_title p{font-size: 50px;}
	#contents div{width: 90%;margin-left: 5%;}
/* other */
	#page_title{
		padding-top: 300px;
		padding-bottom: 100px;
	}
	#page_title > div{
		margin-bottom: 0;
	}
	#page_title > div p{
		font-size: 40px;
		bottom: 5px;
	}
	#page08 #tel_contact .tel_txt span{display: block;width: 100%;}
	#page08 #tel_contact .tel_txt span.tb_hide{display: none;}
	#page08 #tel_contact .tel_txt span:first-of-type{border-bottom: 1px solid;}	
	#page08 #tel_contact .tel_txt span:last-of-type{padding: 10px;}	
	#page10 .box a{
		color: #fff;
		border: none;
		padding: 20px 15px 15px;
	}
	#page10 .box a > div p{
		font-size: 40px;
		bottom: 15px;
		opacity: 0.1;
	}
	#page10 .box a::after{
		opacity: 1;
		transform: translateX(0);
	}
/* animation */
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
/* common */
	#loader img{
		width: 150px;
	}
	h1::after {
		border-width: 140px 140px 0 0;
	}
	h1 img{width: 100px;}
	footer #footer{padding: 0 0 50px;}
	footer #footer_bottom #copyright{padding: 0 20px;}
	#page_top{bottom: 0;right: 0; width: 40px;height: 50px;}
	#menu_bt{
		position: fixed;
		top: 20px;
		right: 20px;
		width: 50px;
		height: 40px;
		transition: ease 0.3s;
	}
	#menu_bt::before,#menu_bt::after{
		content: "";
		width: 34px;
		height: 2px;
		background-color: #fff;
		position: absolute;
		left: 8px;
	}
	#menu_bt::before{
		top: 10px;
	}
	#menu_bt::after{
		bottom: 10px;
	}
	#menu_bt.active::before{
		top: 19px;
		transform: rotate(45deg);
	}
	#menu_bt.active::after{
		bottom: 19px;
		transform: rotate(-45deg);
	}
	#menu_bt span{
		width: 34px;
		height: 2px;
		background-color: #fff;
		position: absolute;
		top: 50%;
		left: 8px;
		transform: translateY(-50%);
		transition: ease 0.3s;
	}
	#menu_bt.active span{
		width: 0;
		opacity: 0;
	}
	#menu_bt.sc:hover::before{width: 34px;}
	#menu_bt.sc:hover span{width:34px;}
	#menu_bt.sc:hover::after{width: 34px;}
	#menu_bt.active:hover::before,#menu_bt.active:hover span,#menu_bt.active:hover::after{width: 34px;}
	#menu_wrap{
		padding-top: 80px;
		padding-bottom: 20px;
	}
	#menu_wrap nav ul li{}
	#menu_wrap nav ul li a{display: block;position: relative;border-bottom: 1px solid;}	
	#menu_wrap nav ul li a .title1{z-index: 2;text-shadow: 0 2px 4px rgba(0,0,0,0.1);}	
	#menu_wrap nav ul li a .title2{position: absolute;left: 10px;bottom: 5px;opacity: 0.3;font-size: 20px;z-index: 1;white-space: nowrap;}	
		/* index */
	#main_img{
		width: 100%;
		height: 100%;
		min-height: 100%;
		padding-bottom: 0;
		padding-top: 70vh;
	}
	#main_img h2::before{
		content: "";
		position: absolute;
		z-index: 1;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	#main_img h2{
		width: 100%!important;
		padding-left: 5%;
		font-size: 20px;
		padding: 20px 5%;
	}
	#main_img h2 span{position: relative;z-index: 2;}
	#intro h3{font-size: 18px;}
	#intro #intro_box{position: relative;}
	#intro #intro_box::after{display: none;}
	#intro #intro_box #intro_img{position: relative;transform: translateY(0px);margin-bottom: 20px;}
	#intro #intro_box #intro_txt{width: 100%; position: relative;margin-left: 0%;transform: translateY(0px);}
	#intro #intro_box #intro_txt h3::after{font-size: 24px;transform: translateY(-20%);}
	#intro.on #intro_box{padding-bottom: 0;}
	#intro.on #intro_box #intro_img{position: relative;top: 0;left: 0;}
	#intro.on #intro_box #intro_txt{position: relative;margin-left: 0;}
	#contents_links .box_wrap .box{
		width: 100%!important;
		border: none;
		margin-bottom: 20px;
		transition: ease 0.6s;
	}
	#contents_links .box_wrap .box:nth-of-type(odd){
		transform: translate(0,50px);
		margin-right: 0;
	}
	#contents_links .box_wrap .box:nth-of-type(even){
		border: none;
		transform: translate(0,50px);
		margin-left: 0;
	}
	#contents_links .box_wrap .box.active:nth-of-type(odd){
		transform: translate(0,0);
		opacity: 1!important;
	}
	#contents_links .box_wrap .box.active:nth-of-type(even){
		transform: translate(0,0);
		opacity: 1!important;
	}
	#contents_links .box_wrap .box a h4{
		padding: 10px 20px;
		text-shadow: 0 3px 6px rgba(0,0,0,0.2);
	}
	#contents_links .box_wrap .box a p{
		margin-bottom: 40px;
		text-shadow: 0 2px 4px rgba(0,0,0,0.1);
	}
	#contents_links .box_wrap .box a p span{
		padding: 5px 15px;
	}
	#contents_links .box_wrap .box a div span{
		padding: 5px 30px;
		border: none;
	}
	#contents h3, #top_cms .top_cms_box .top_cms_title p{font-size: 30px;}
	#top_cms{
		padding-left: 5%;
		padding-right: 5%;
		padding-bottom: 80px;
	}
	#top_cms .top_cms_box{margin-bottom: 80px;}
	#top_cms .top_cms_box .top_cms_title p{left: 10px;bottom: 5px;}
/* other */
	#page_title{
		padding-top: 200px;
		padding-bottom: 50px;
	}
	#page_title > div p{
		font-size: 24px;
	}
	.pager li:not(.prev){display: none;}
	.cate_list li{width: 100%; margin: 0 0 40px;}
	.cate_list li:last-of-type{margin: 0;}
	.cate_list li a{padding-left: 20px; border-bottom: 1px solid;}
	.cate_list li .cate_no{position: absolute;z-index: 1;font-size: 30px;bottom: 20px;left: 0;opacity: 0.3;transition: ease 0.3s;}
	.cate_list li:hover a{opacity: 0.6;transform: translateY(-5px);}
	.cate_list li:hover .cate_no{transform: translateY(-5px);opacity: 0.6;}
	#page10 .box a{
		color: #fff;
		border: none;
		padding: 15px 15px 15px;
	}
	#page10 .box a > div p{
		font-size: 22px;
		bottom: 15px;
		left: 10px;
		letter-spacing: 2px;
		opacity: 0.1;
	}
	#page10 .box a::after{
		opacity: 1;
		transform: translateX(0);
	}

/* animation */
}