@charset "utf-8";

body {

}
body.active-body {overflow:hidden;}

#wrap {
	min-width:320px;
}

.dim {position:fixed; top:0; left:0; width:100%; height:100%; background-color:#3b3c3c; opacity:0.7; z-index:9; display:none;}

/* header */
header {

}
header .logo {position:absolute; top:20px; left:20px; display:block; z-index:3;}
header .logo img {width:46px;}
header .m-menu {position:fixed; top:20px; right:10px; width:32px; font-size:0; line-height:0; text-align:center; z-index:12;}
header .m-menu > a {display:block; position:relative;}
header .m-menu span {display:inline-block; width:22px; height:4px; margin-top:3px; background-color:#333; transition:.3s all ease-in-out;}
header .m-menu span:first-child {margin-top:0;}
header .meun-box {display:none; position:fixed; top:0; left:0; right:0; height:100vh; background-color:rgba(89,43,95,0.95); box-sizing:border-box; text-align:center; z-index:11;}
header.active .m-menu span {position:absolute; top:0; left:0; background-color:#fff;}
header.active .m-menu span:nth-child(1) {top:3px; transform:rotate(45deg);}
header.active .m-menu span:nth-child(2) {opacity:0;}
header.active .m-menu span:nth-child(3) {transform:rotate(-45deg);}
header.active .meun-box {display:block;}
header.active .meun-box > div {position:relative; font-size:0; line-height:0;}
header.active .meun-box .tit {height:13.62vh; padding-top:25.08vh;}
header.active .meun-box .tit a {display:inline-block; width:86px; height:52px; background:url("../images/m_logo01.png") no-repeat 0 0; background-size:86px 52px; font-size:0; line-height:0; text-indent:-9999px;}
#gnb > ul > li > a {display:block; height:6vh; line-height:6vh; color:#fff; font-family:'Raleway'; font-size:15px; font-weight:700;}

/* dBody */
#dBody {
	padding:80px 0 50px 0;
}
#dBody > div {padding-bottom:30px;}

/* footer */
footer {
	padding:0 0 20px 0;
	text-align:center;
}
footer .copy {display:inline-block; color:#333; font-family:'Raleway'; font-size:12px; line-height:16px; vertical-align:middle;}
footer .m-top {display:inline-block; width:22px; height:16px; margin-left:4px; background:url("../images/foot_top.png") no-repeat center center; background-size:16px 10px; vertical-align:middle;}

/* PC _ 1200 ~ */
@media all and (min-width:1200px) {

	/* header */
	header {
		position:fixed; top:-100px; left:0;
		width:100%;
		height:80px;
		padding:0 0 0 25px;
		background-color:rgba(255,255,255,0.7);
		z-index:11;
		box-shadow:0 0 3px 3px rgba(0,0,0,0.11);
		box-sizing:border-box;
		transition:.3s all ease-in-out;
	}
	header:hover {background-color:rgba(255,255,255,1);}
	header.fix-active {top:0;}
	header > div {position:relative; width:1160px; margin:0 auto;}
	header .logo {position:absolute; top:19px; left:19px;}
	header .logo img {width:66px;}
	header .m-menu {display:none;}
	header .meun-box {display:block; position:static; height:auto; background-color:transparent; text-align:left;}
	header .meun-box .tit {display:none;}
	#gnb {padding:0 0 0 500px; overflow:hidden;}
	#gnb > ul > li {float:left; width:110px; text-align:center;}
	#gnb > ul > li > a {display:block; height:80px; line-height:78px; color:#c9c8ca; font-family:'Raleway'; font-size:14px; font-weight:300;}
	#gnb > ul > li > a span {display:block; margin:0 10px; border-bottom:3px solid transparent;}
	#gnb > ul > li > a.active {color:#646369; font-weight:700;}
	#gnb > ul > li > a.active span {border-color:#5a2b5f;}

	/* dBody */
	#dBody {
		padding:80px 0 50px 0;
	}
	#dBody > div {position:relative; width:1200px; margin:0 auto; padding-bottom:100px; box-sizing:border-box; z-index:2;}
	#dBody > div:before {content:''; display:block; position:absolute; top:0; right:50%; margin-right:600px; width:2195px; height:249px; background:url("../images/title_bg.jpg") no-repeat right 0;}

	/* footer */
	footer {
		padding:0 0 30px 0;
		text-align:center;
	}
	footer .copy {display:inline-block; color:#333; font-family:'Raleway'; font-size:12px; line-height:16px; vertical-align:middle;}
	footer .m-top {display:none;}

}