@charset "UTF-8";

div.top-menu { height: 70px; position: fixed; left:0; right: 0; top: 0; z-index: 1000; }
div.top-menu > div { height: 70px; position: relative; }
	
@media only screen and (min-width:1200px) {
	div.top-menu { background-color: rgba(255,255,255,0.95); box-shadow: 0 3px 5px #dddddd; }
	div.top-menu > div { width: 1200px; overflow: hidden; padding: 0; margin: 0 auto; text-align: right; }
	div.top-menu > div a.logo { display: block; position: absolute; left: 105px; top: 0; width: 158px; height: 70px; background: url('logo.svg') no-repeat center center; background-size: 158px 55px; cursor: pointer; }
	div.top-menu > div ul { height: 70px; overflow: hidden; padding: 0; margin: 0; list-style: none; text-align: right; }
	div.top-menu > div ul li { height: 70px; line-height: 70px; display: inline-block; text-align: center; vertical-align: middle; position: relative; }
	div.top-menu > div ul li a { display: inline-block; vertical-align: middle; font-size: 16px; font-weight: 300; margin: 0 33px 0 33px; }
	div.top-menu > div ul li.act:before { display: block; background-color: #E63517; height: 3px; content:''; position: absolute; top: 0; left: 0; right: 0; border-radius: 3px; }
	div.top-menu > div ul li.act:after { display: block; background-color: #E63517; height: 3px; content:''; position: absolute; bottom: 0; left: 0; right: 0; border-radius: 3px; }
	div.top-menu > div ul li.act a { font-weight: 500; }
	
	div.top-menu a.burger { display: none; }
	
	ul.bottom-menu { width: 1200px; line-height: 25px; overflow: hidden; padding: 15px 0 0 0; margin: 0 auto; list-style: none; display: flex; flex-direction: row; }
	ul.bottom-menu li { flex: auto; text-align: center; vertical-align: middle; }
	ul.bottom-menu li a { color: #3C3C3B; font-weight: 300; font-size: 14px; vertical-align: middle; }
	ul.bottom-menu li.sep { flex: none; color: #3C3C3B; font-weight: 300; font-size: 14px; }
}

@media only screen and (max-width:1199px) {
	div.top-menu { background-color: rgba(255,255,255,0.95); box-shadow: 0 3px 5px rgba(78,78,78,0.28); }
	div.top-menu.mp { background-color: transparent; box-shadow: none; }
	div.top-menu div a.logo { display: block; position: absolute; left: 20px; top: 0; width: 141px; height: 70px; background: url('logo.svg') no-repeat center center; background-size: 141px 48px; cursor: pointer; }
	div.top-menu.mp > div a.logo { display: none; }
	div.top-menu > div a.burger { display: block; position: absolute; right: 20px; top: 22px; width: 35px; height: 25px; background-image: url('burger.svg'); background-repeat: no-repeat; background-position: center center; background-size: 35px 25px; cursor: pointer; }
	div.top-menu.open { background-color: rgba(255,255,255,0.95); box-shadow: 0 3px 5px rgba(78,78,78,0.28); }
	div.top-menu.mp.open { background-color: rgba(255,255,255,0.95); box-shadow: 0 3px 5px rgba(78,78,78,0.28); }
	div.top-menu.open > div a.burger { background-image: url('burger-x.svg'); background-size: 18px 18px; }
	div.top-menu.mp.open > div a.logo { display: block; position: absolute; left: 20px; top: 0; width: 141px; height: 70px; background: url('logo.svg') no-repeat center center; background-size: 141px 48px; cursor: pointer; }
	div.top-menu > div > ul { display: none;  }
	
	div.top-mobile { display: block; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 10; background-color: rgba(0,0,0,0.55); }
	div.top-mobile > div { display: block; overflow: hidden; border-radius: 0 0 0 30px; z-index: 15; margin: 0; padding: 0; position: fixed; right: 0; width: 296px; top: 70px; bottom: 0; background-color: white; }
	div.top-mobile > div > div { position: absolute; overflow: auto; top: 30px; bottom: 100px; left: 0; right: 0; text-align: center; }
	div.top-mobile > div > div ul { display: inline-block; padding: 0; margin: 0; list-style: none; text-align: center; }
	div.top-mobile > div > div ul li { height: 70px; line-height: 70px; display: block; text-align: center; vertical-align: middle; position: relative; }
	div.top-mobile > div > div ul li a { display: inline-block; vertical-align: middle; font-size: 16px; font-weight: 300; margin: 0 33px 0 33px; }
	div.top-mobile > div > div ul li.act:before { display: block; background-color: #E63517; height: 3px; content:''; position: absolute; top: 0; left: 0; right: 0; border-radius: 3px; }
	div.top-mobile > div > div ul li.act:after { display: block; background-color: #E63517; height: 3px; content:''; position: absolute; bottom: 0; left: 0; right: 0; border-radius: 3px; }
	div.top-mobile > div > div ul li.act a { font-weight: 500; }
	div.top-mobile > div > p { position: absolute; bottom: 28px; left: 70px; right: 70px; height: 40px; padding: 0; margin: 0; }
	div.top-mobile > div > p > a { display: inline-block; width: 40px; height: 40px; cursor: pointer; margin: 0 18px 0 0; background-repeat: no-repeat; background-position: center center; background-size: 40px 40px; }
	div.top-mobile > div > p > a:last-child { margin: 0; }
	div.top-mobile > div > p > a.gplay { background-image: url('gplay.svg'); }
	div.top-mobile > div > p > a.fbook { background-image: url('fbook.svg'); }
	div.top-mobile > div > p > a.tomap { background-image: url('tomap.svg'); }
	
	ul.bottom-menu { line-height: 25px; overflow: hidden; padding: 15px 0 0 0; margin: 0; list-style: none; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; }
	ul.bottom-menu li { flex: auto; text-align: center; vertical-align: middle; }
	ul.bottom-menu li a { color: #3C3C3B; font-weight: 300; font-size: 14px; vertical-align: middle; }
	ul.bottom-menu li.sep { flex: none; color: #3C3C3B; font-weight: 300; font-size: 14px; }
}