@charset "UTF-8";

body			{ background: #2a2a2a; }
.fix-layout		{ position: relative; max-width: 640px; margin: 0 auto; }

.txt-center	{ text-align: center !important; }


#header	{
	position: relative;
	background: url('/m/images/cmm/bak_header.png');
	z-index: 50;
}

#header #logo	{
	position: relative;
	width: 35%;
	margin: 0 auto;
}
#header #logo:before	{
	content: "";
	display: block;
	position: relative;
	padding-top: 60%;
}
#header #logo a	{
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}
#header #logo a img	{ width: 100%; }
#header .btn-header	{
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	width: 12.5%;
	text-indent: -999px;
	overflow: hidden;
}
#header .btn-header:before	{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: contain;
}
#header #gnb_control		{ left: 0; }
#header #gnb_control:before	{ background-image: url('/m/images/cmm/btn_gnb_control.png'); }

#header #tel_control		{ right: 0; }
#header #tel_control:before	{ background-image: url('/m/images/cmm/btn_tel_control.png'); }



#footer	{
	position: relative;
	clear: both;
	color: #8e8f90;
}

#footer .sns	{
	background: #1d1d1d;
	border-bottom: 1px solid #161616;
}
#footer .sns a	{
	display: block;
	position: relative;
	width: 33.33%;
	float: left;
	padding: 1.0em 0;
	text-align: center;
	box-sizing: border-box;
}
#footer .sns a + a:before	{
	content: "";
	display: block;
	position: absolute;
	top: 1.2em;
	bottom: 1.2em;
	width: 1px;
	background: #383838;
}
#footer .sns:after	{
	content: "";
	display: block;
	clear: both;
}

#footer .f-content	{
	padding: 1.7em 0;
	text-align: center;
}
#footer .f-content .logo		{ padding-bottom: 1.25em; }
#footer .f-content .copy,
#footer .f-content address		{ font-size: 0.85em; }
#footer .f-content .copy		{ padding-top: 1.5em; }
#footer .f-content .copy strong	{ color: #ea2016; }






#menu {
  position: fixed;
  width: 420px;
  height: 100%;
  top: 0;
  left: -420px;
  overflow: hidden;
  overflow-y: auto;
  background-color: #2a2a2a;
  
}

@media all and (max-width: 640px) {
	#menu {
		width: 70%;
		left: -70%;
	}
}

#menu ul {
  text-align: left;
  background-color: transparent;
}

#menu ul li { display: block; }

#menu ul li a { display: block; }

#menu ul li a > i.fa-angle-down { 
	position: absolute;
	right: 20px; 
	top: 50%;
	margin: -10px 0 0 0;
}

#menu ul li ul {
  display: none;
  position: static;
  width: 100%;
  background-color: #222222;
}

#menu ul li:hover > ul { display: none; }

#menu ul li:hover > a > i { 
	transform: rotateZ(0); 
	font-weight: bold;
}

/*#menu ul li.open > a { background-color: rgba(0, 0, 0, 0.3); }*/

/*#menu ul li.open > a > i { transform: rotateZ(90deg); }*/

#menu ul li.open > ul { display: block; }

div#overlay {
  display: block;
  visibility: hidden;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  transition: all ease-out 0.3s;
  z-index: 110;
  opacity: 0;
}
#menu .slide-logo {
	background:url('/m/images/common/slide-line.png') repeat-x left bottom;
	height: 5em;
	line-height: 5em;
	padding: 0 1.0em 2px 1.0em;
	text-align: left;
}
#menu .slide-logo img {
	vertical-align: middle;
	margin: 0;
	height: 2.3em;
	width: auto;
}
#menu li.menu-title a {
	position: relative;
	display: block;
	font-size: 1.2em;
	font-weight:bold;
	padding: 0 0 0 1.25em;
	height: 3.25em;
	line-height: 3.25em;
	background:url('/m/images/common/slide-line.png') repeat-x left bottom;
	color: #fff;
}



#menu li.menu-title a i.ico {
	float: none;
	display: inline-block;
	width: 25px;
	height: 25px;
	margin: 0 1.0em 0 0;
	vertical-align: middle;
	background-image:url('/m/images/common/ico-sidemenu.png');
	background-repeat: no-repeat;
}
#menu li.menu-1 a i.ico {background-position: 0 0;}
#menu li.menu-2 a i.ico {background-position: 0 -62px;}
#menu li.menu-3 a i.ico {background-position: 0 -126px;}
#menu li.menu-4 a i.ico {background-position: 0 -184px;}
#menu li.menu-5 a i.ico {background-position: 0 -235px;}
#menu li.menu-6 a i.ico {background-position: 0 -294px;}
#menu li.menu-7 a i.ico {background-position: 0 -359px;}
#menu li.menu-8 a i.ico {background-position: 0 -294px;}
#menu li.menu-title.open a {color: #ea2016;}
#menu ul li.open > a > i.ico {transform: none;}
#menu li.menu-1.open > a i.ico {background-position: 0 -26px;}
#menu li.menu-2.open > a i.ico {background-position: 0 -88px;}
#menu li.menu-3.open > a i.ico {background-position: 0 -151px;}
#menu li.menu-4.open > a i.ico {background-position: 0 -210px;}
#menu li.menu-5.open > a i.ico {background-position: 0 -261px;}
#menu li.menu-6.open > a i.ico {background-position: 0 -319px;}
#menu li.menu-7.open > a i.ico {background-position: 0 -385px;}
#menu li.menu-8.open > a i.ico {background-position: 0 -319px;}

#menu li.menu-title.open ul li a {
	color: #fff;
	font-size: 1.1em;
	font-weight: normal;
	padding: 0 0 0 1.5em;
	height: 3.0em;
	line-height: 3.0em;
}
#menu li.menu-title.open ul li a i {
	color: #535353;
	margin: 0 1.0em 0 0;
	font-size: 1.25em;
}

html.open-menu { overflow: hidden; }

html.open-menu div#overlay {
  visibility: visible;
  opacity: 1;
  left: 0;
}
/*
html.open-menu a#toggle,
html.open-menu #content { transform: translateX(250px); }
*/

html.open-menu nav#menu {
  z-index: 120;
  left: 0;
  transition: all ease-out 0.3s;
}

#menu .slide-close {
	position: absolute;
	top: 2em;
	right: 1.5em;
	width: 1.3em;
	height: 1.3em;
	font-size: 1.0em;
	background: transparent;
}