@font-face {
    font-family: "NotoSans Light";
    src: url('/static/fonts/NotoSans-Light.eot');
    src: url('/static/fonts/NotoSans-Light.eot?#iefix') format('embedded-opentype'),
         url('/static/fonts/NotoSans-Light.woff') format('woff'),
         url('/static/fonts/NotoSans-Light.svg#notosansbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "NotoSans Regular";
    src: url('/static/fonts/NotoSans-Regular.eot');
    src: url('/static/fonts/NotoSans-Regular.eot?#iefix') format('embedded-opentype'),
         url('/static/fonts/NotoSans-Regular.woff') format('woff'),
         url('/static/fonts/NotoSans-Regular.svg#notosansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body { background-color: #0d0d0d; }
body.ko-kr { font-size: 12px; font-family: Dotum; -webkit-text-size-adjust:none; }

a { text-decoration: none; }
a:hover { text-decoration: none; }

#container { background: #000 url("/static/images/homepage/layout/bg.jpg") center top no-repeat; color: #cfe0f6; }
#container-wrapper { width: 998px; margin: 0 auto; padding-bottom: 80px; }

#header { position:relative; margin-bottom: 14px; padding-top: 80px; z-index: 10; zoom: 1; }
#header h1 { margin-left: 5px; margin-bottom: 15px; }
#header h1 a { font-size: 45px; color: #fff; font-family: "NotoSans Light", "Malgun Gothic", "AppleSDGothicNeo", "AppleGothic", Dotum; }

#content { position: relative; z-index: 9; zoom: 1; }

.header-menu-wrapper { position: relative; height: 75px; border: 2px solid #1b232f; background-color: #0e131a; background: rgba(0, 0, 0, 0.3); border-radius: 5px; }

#header-menu { position: absolute; left: 16px; top: 16px; width: 314px; height: 44px; overflow: hidden; }
#header-menu li { float: left; width: 47%; margin-right: 3%; height: 44px; }
#header-menu li a { display: block; width: 100%; height: 100%; background-color: #111d30; text-align: center; border-radius: 5px; transition: background-color 160ms ease; -webkit-transition: background-color 160ms ease; }
#header-menu li a span { font-size: 15px; color: #2a4151; line-height: 44px; font-family: "NotoSans Regular", "Malgun Gothic", "AppleSDGothicNeo", "AppleGothic", Dotum; transition: color 160ms ease; -webkit-transition: color 160ms ease; }
#header-menu li a:hover { background-color: #16325e; }
#header-menu li a:hover span { color: #fff; }
#header-menu li a.menu-active { background-color: #16325e; }
#header-menu li a.menu-active span { color: #fff; }

#active-tabmenu { display: none; }

#header-tabmenu { float: right; padding-top: 14px; padding-right: 15px; }
#header-tabmenu li { float: left; width: 53px; height: 47px; margin-right: 5px; }
#header-tabmenu li a { display: block; width: 100%; height: 100%; padding-top: 7px; }
#header-tabmenu li a span { display: block; width: 50px; height: 35px; text-align: center; font-size: 16px; text-align: center; padding-top: 5px; font-family: "NotoSans Regular", "Malgun Gothic", "AppleSDGothicNeo", "AppleGothic", Dotum;  color: #cbd2e2; }
#header-tabmenu li a img { display: block; width: 35px; height: 35px; margin: 0 auto; }
#header-tabmenu li a:hover { background: url("/static/images/homepage/main/event-menu-over.png") no-repeat; width: 53px; height: 47px; }
#header-tabmenu li a.tab-active { background: url("/static/images/homepage/main/event-menu-over.png") no-repeat; width: 53px; height: 47px; }
#header-tabmenu li.menu-all a.tab-active { background: none; }

@media screen and (min-width:1025px) {
	#header-tabmenu {
		display: block !important;
	}
}

@media screen and (max-width:1024px) {
	#active-tabmenu { position: relative; display: block; width: 100%; }
	#active-tabmenu a { position: relative; display: block; cursor: pointer; }
	#active-tabmenu a img { position: absolute; top: 20px; right: 32px; width: 35px; height: 35px; }
	#active-tabmenu a span { position: absolute; top: 29px; right: 35px; color: #cbd2e2; font-size: 16px; font-family: "NotoSans Regular", "Malgun Gothic", "AppleSDGothicNeo", "AppleGothic", Dotum; }
	#active-tabmenu a span.arrow { position: absolute; right: 17px; top: 35px; font-size: 7px; display: inline-block; padding-left: 9px; color: #94a8d0;  }

	#header-tabmenu { display: none; position: absolute; right: 10px; top: 16px; width: 77px; height: 600px; padding: 0; background-color: #131929; border: 1px solid #102344; border-radius: 5px; }
	#header-tabmenu li { float: none; width: 76px; height: 60px; }	
	#header-tabmenu li a:hover, #header-tabmenu li a.tab-active  { background: none; width: 76px; height: 60px; }
	#header-tabmenu li.menu-all { text-align: center;  }
	#header-tabmenu li a span { width: 76px; text-align: center; }
}

@media screen and (max-width:1024px) and (min-width:768px) {
	#container-wrapper { width: 702px; }
	
	#header { margin-bottom: 10px; }
	
	#header-menu { top: 19px; width: 284px; height: 40px; }
	#header-menu li { height: 40px; }
	#header-menu li a span { font-size: 15px; line-height: 40px; }
}

@media screen and (max-width:768px) {
	#container-wrapper { width: 622px; }
	
	#header { margin-bottom: 18px; }
	
	.header-menu-wrapper { height: 69px; }

	#header-menu { top: 14px; width: 196px; }
	#header-menu li a span { font-size: 14px; }
	
	#active-tabmenu a span { position: absolute; top: 27px; right: 38px; }
	
	#header-tabmenu { position: absolute; right: 13px; top: 14px; }
}

@media screen and (max-width:640px) {
	#container-wrapper { width: auto; margin: 0 1%; }
	
	#header { margin-right: 10px; }
	#header h1 a { font-size: 30px; }

	.header-menu-wrapper { margin-right: -10px; height: 61px; }
	
	#header-menu { left: 10px; top: 9px; }	

	#active-tabmenu a span { position: absolute; top: 22px; right: 38px; }	
	#active-tabmenu a span.arrow { position: absolute; right: 19px; top: 30px; }
	#active-tabmenu a img { position: absolute; top: 15px; right: 34px; }

	#header-tabmenu { position: absolute; top: 9px; }
}