@charset "utf-8";

/**/
.inner {max-width:1200px; padding:0 30px; margin:0 auto}

/* HEADER */
#header {position:absolute; z-index:1; top:0; width:100%; height:90px; background:#fff}
#header.type2 {position:relative}
#header .logo {position:absolute; left:40px; top:17px}
#header .mb_btn_wrap {position:absolute; right:100px; top:34px}
#header .mb_btn_wrap a {display:inline-block; min-width:76px; padding:5.5px 10px; font-size:15px; color:#4c4c4c; border:2px solid #757575; border-radius:5px; text-align:center; box-sizing:border-box;}
#header .menu_btn {position:absolute; z-index:2; top:36px; right:40px; width:35px; height:25px; cursor:pointer}
#header .menu_btn:after {position:absolute; left:-30%; top:-30%; width:160%; height:160%; content:''}
#header .menu_btn span {position:absolute; width:100%; height:3px; background:#757575; transition:.3s; overflow:hidden}
#header .menu_btn .bar1 {top:0; margin-top:0}
#header .menu_btn .bar2 {top:50%; margin-top:-1.5px}
#header .menu_btn .bar3 {top:100%; margin-top:-3px}
#header .menu_btn span:before {position:absolute; left:100%; top:0; width:5px; height:100%; background:#fff; content:''}
#header .menu_btn:hover .bar1:before {left:-5px; transition:.4s}
#header .menu_btn:hover .bar2:before {left:-5px; transition:.4s .1s}
#header .menu_btn:hover .bar3:before {left:-5px; transition:.4s .2s}

/*
#header .menu_btn:hover .bar1 {top:50%; ; margin-top:-1.5px; transform:rotate(45deg)}
#header .menu_btn:hover .bar2 {width:0}
#header .menu_btn:hover .bar3 {top:50%; ; margin-top:-1.5px; transform:rotate(-45deg)}
*/
#header.menuOpen .menu_btn {position:fixed}
#header.menuOpen .menu_btn span:before {display:none}
#header.menuOpen .menu_btn .bar1 {top:50%; ; margin-top:-1.5px; transform:rotate(45deg)}
#header.menuOpen .menu_btn .bar2 {width:0}
#header.menuOpen .menu_btn .bar3 {top:50%; ; margin-top:-1.5px; transform:rotate(-45deg)}

#header.main_header {top:-90px;}
.loadOff #header.main_header {top:0; transition:.3s}

/* FOOTER */
#footer {position:relative; padding:55px 40px 28px 280px; box-sizing:border-box; background:#2b2b2e}
#footer .logo {position:absolute; top:29px; left:40px}
#footer .footer_info p {line-height:1.538; font-size:13px; color:#cbcbcb}
#footer .footer_info .copyrigyt {opacity:.3}
#footer .go_top {position:absolute; top:38px; right:40px; width:50px; height:50px; border-radius:50%; background:#fff; cursor:pointer}
#footer .go_top img {position:absolute; top:0; right:0; bottom:0; left:0; margin:auto}
#footer .go_top:hover img {animation:go_top .7s infinite linear}

#footer.main_footer {position:fixed; bottom:-140px; width:100% ;height:140px; }
.loadOff #footer.main_footer {bottom:0; transition:.3s .2s}

@keyframes go_top{
	0%{top:0}
	33%{top:-5px}
	80%{top:5px}
	100%{top:0}
}

/* MENU */
#menuContainer {position:fixed; z-index:1; top:0; left:0; width:100%; height:100%; visibility:hidden}
	.menuBg {position:absolute; ; top:0; left:0; width:100%; height:100%; background:#000; opacity:0; transition:.3s}
	.menuBox {position:absolute; right:-350px; top:0; width:350px; height:100%; padding:90px 45px 0; background:#fff; box-sizing:border-box; transition:.3s}
	.menuBox dl + dl {margin-top:50px}
	.menuBox dl dt {font-size:33px; color:#000000; letter-spacing:-1px}
	.menuBox dl dd {position:relative; margin-top:10px; line-height:1.4; font-size:24px; color:#757575}
	.menuBox dl dd a {display:block; padding-left:20px; color:inherit}
	.menuBox dl dd:before {position:absolute; top:50%; width:15px; height:3px; margin-top:-1.5px; background:#757575; transform:rotate(-66deg); transition:.3s; content:''}
	.menuBox dl dd:hover {color:#0c75a6;}
	.menuBox dl dd:hover:before {background:#0c75a6; transform:rotate(0deg)}
	.menuBox .member {display:table; table-layout:fixed; width:100%; margin-bottom:45px; border-collapse:collapse}
	.menuBox .member a {display:table-cell; padding:10px; border:1px solid #2a2a2a; text-align:center}
.menuOpen #menuContainer {visibility:visible}
.menuOpen .menuBg {opacity:.5}
.menuOpen .menuBox {right:0}