@media print{
   .noprint {display:none !important;}
	#right-col {padding: 40px !important; float: left;}
	.printonly {display: block !important; width: 200px; height: auto; margin:0 0 40px -20px;}
	* {font-size: 1rem !important; line-height: 1.3rem !important;}
	p, h1, h2, h3 {margin-bottom: 1em !important;}
	ul {margin-bottom: 2em !important;}
	.btnArea {display: none !important;}
}

body, html {height: 100%; margin:0; padding:0; font-size: 13px; background: #1f1f1f}

.clearfix {clear:both;}

.mobile-off {display: block}
.mobile-on {display:none}
.printonly {display:none}
* {box-sizing: border-box;}

img {max-width: 100%; display: inline-block;}

#page-container {width: 100%; max-width: 1920px; height: 100%; margin: 0 auto; position: relative; background: #fff;}

nav #mobile-nav {display: none;}

#logo {z-index: 9000;}
#logo .mobile-off {width: 300px;}

#sign-out{color: #ffffff; font-size: 19px; font-weight: 700; padding: 20px 10px 10px; background: #fb4426; font-family: 'NanumBarunGothic', sans-serif !important; display: block; margin: 0 10px 10px 10px; text-align: center; text-decoration: none;	position: fixed; right: 163px; top: -10px; z-index: 500; transition: top .3s; line-height: 26px;}
#sign-out:hover {top: 0px;}

#lang {position: fixed; right: 20px; top: -10px; z-index: 500; transition: top .3s;}
#lang:hover {top: 0px}
#lang a {display: block; line-height: 2rem; font-size: 1.5rem; padding: 20px 20px 10px; text-decoration: none !important; text-transform: uppercase; color: #fff !important; background: #3b5ec2; text-align: center;font-weight: bold; font-family: Century Gothic, sans-serif !important; }

#staff-only {position: absolute; right: calc(14% + 184px); top: -10px; z-index: 5; transition: top 0.3s;}
#staff-only:hover {top: 0px;}
#staff-only a {display: block; line-height: 40px; padding: 10px 20px 0px; text-decoration: none !important; text-transform: uppercase; color: #fff !important; background: #3b5ec2;}

#access>.login-header h1 {line-height: 2.5rem !important;}
#access>.login-body a {background-color: #3b5ec2 !important; color: #fff !important;}
.xm select, .xm textarea, .xm input[type="text"], .xm input[type="password"], .xm input[type="datetime"], .xm input[type="datetime-local"], .xm input[type="date"], .xm input[type="month"], .xm input[type="time"], .xm input[type="week"], .xm input[type="number"], .xm input[type="email"], .xm input[type="url"], .xm input[type="search"], .xm input[type="tel"], .xm input[type="color"] {height: 32px; font-family: 'NanumBarunGothic', sans-serif !important;}

footer {background: #1f1f1f; text-align: center; padding: 30px 10px 30px;}
footer p {color: #999; margin: 0px 0px 10px; padding: 0px; font-size: 14px;}
footer a {color: #999; text-decoration: none;}
footer #footer-admin {text-align: right}
#footer-logo {width: 180px; height: auto; margin-bottom: 20px;}
#footer-address-container {width: 400px; margin: 0 auto;}
#footer-address-container p {width: 50%; float: left;}

.bxslider {
   backface-visibility: hidden;
   perspective: 2000;
   -webkit-perspective: 2000;
   -webkit-backface-visibility: hidden;
}

@media all and (max-width:1024px) {
	#staff-only {right: 244px;}
	#lang {top: 0px; right: 0px}
	#lang a {padding: 10px 20px;}
	#sign-out {right: 140px}
}

@media all and (max-width:767px) {
	body, html {font-size: 12px;}
	#page-container {height: auto;}      

	#lang {width: 100%; position: fixed; top: auto; right: auto;}
	#lang a {padding: 0 27px 0 13px; text-align:center; position: fixed; bottom: 12px; right: 12px; width: 0; border: 2px solid #ffffff; border-radius: 40px; line-height: 40px; transition: width .5s;}
	#lang a.show {width: 150px; transition: width 0s; padding: 0 10px;}
	#lang-text {display: none;}
	
	#sign-out {padding: 0;
    text-align: center;
    position: fixed;
    bottom: 12px;
    left: 12px;
    width: 133px;
    border: 2px solid #ffffff;
    border-radius: 40px;
    line-height: 40px;
    transition: width .5s;
    height: 44px;
    top: auto;
    margin: 0;
    right: auto; font-size:1.5rem;}
	
	footer {padding-bottom: 60px;}

	#logo img {width: auto; height: 60px; margin-left:10px;}

	nav {background: rgba(0,0,0,0.8) !important; position: absolute;}  

	nav #mobile-nav {width: 100%; height: 60px; background: #3b5ec2; position: fixed;z-index: 10;} 	
	nav #mobile-nav #mobile-nav-button {background: #3b5ec2; font-weight: 500; font-size: 18px; line-height: 60px; color: #fff; width: 60px; float: right; text-align: center; cursor: pointer;}
	.mobile-nav-button {width:60px; height: 60px; display: block}


	nav > ul {margin-top: 60px !important;}
	nav > ul > li {width: 100%; margin: 0; background-image: none !important; background-repeat: repeat !important;}  
	nav > ul > li:nth-child(2) {background: #4098a5 !important;}
	nav > ul > li:nth-child(3) {background: #9e63e8 !important;}
	nav > ul > li:nth-child(4) {background: #38a85d !important;}
	nav > ul > li:nth-child(5) {background: #d98e6d !important;}

	nav > ul > li > ul > li > a {line-height: 2rem; font-size: 1.2rem;}

	.nav-height {padding-bottom:10px !important;}

	#staff-only {display: none;}


}

@media all and (max-width:356px) {
	#lang a, #sign-out {font-size: 14px;}		
	nav #mobile-nav {font-size: 14px !important;}		
}