body{
	margin: 0px;
	padding: 0px;
}

/*
 * Font Style
*/

.font-normal, input, button, select, textarea, .ko body, .ko table, .ko input, .ko textarea, .ko select, .ko button{
	font-family: "Nanum Gothic", "NanumGothic", "나눔고딕", "Dotum", "돋움", "Arial";
	font-size: 12px;
	color: #333;
}

.font-normal.font-14{
	font-size: 14px;
}

.font-normal.font-16{
	font-size: 18px;
}

.font-normal.font-18{
	font-size: 18px;
}

.font-normal.font-22{
	font-size: 22px;
}


.font-normal.font-24{
	font-size: 24px;
}

.font-normal.font-28{
	font-size: 28px;
}

.font-normal.font-keycolor{
	color: #0781ef;
}

.font-normal.font-white{
	color: #fff;
}

/*
 * Login
*/

.login-container{
	background: #000 url("../images/login_bg.jpg") no-repeat top center;
	width: 100%;
	padding: 35px 0px;
}

.login-container #login{
	max-width: 610px;
	width: 100%;
	height: 610px;
	margin: 0 auto;
	border: 2px solid #2481fa;
	background: url("../images/login_form_bg.png");
	position: relative;
}

.login-container #login h1{
	padding: 45px 0px;
	margin: 15px 0px 0px 0px;
	text-align: center;
}

.login-container #login .login-message,
.login-container #login #loginform,
.login-container #login .login_error{
	width: 75%;
	margin: 0 auto;
	margin-bottom: 30px;
	line-height: 22px;
}

.login-container #login .login_error{
	margin-bottom: 0px;
}

.login-container select{
	border: 0px solid #fff;
	width: 100%;
	height: 35px;
	font-size: 16px;
	margin-top: 20px;
}

.login-container #login #loginform label{
	display: none;
}

.login-container #login input[type=text], .login-container #login input[type=password] {
	width: 100%;	
    height: 50px;
    border-style: none;
    outline: none;
    border-bottom: 2px solid #fff;
    font-size: 20px;
    background: none;
    color: #fff;
}

.login-container .sso-submit {
    width: 100%;
    text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
}

.login-container .sso-submit .btn-normal.btn-large{
	background: #2481fa;
	border: 0px solid #fff;
	border-radius: 4px;
	width: 100%;
	padding: 15px 40px;
	color: #fff;
	cursor: pointer;
}

.login-container .submit {
    width: 100%;
    text-align: center;
	margin-top: 45px;
}

.login-container .submit .btn-normal.btn-large{
	background: #2481fa;
	border: 0px solid #fff;
	border-radius: 4px;
	width: 170px;
	padding: 15px 40px;
	color: #fff;
	cursor: pointer;
}

.site-footer.login {
    border: 0px solid #fff;
    background: #2c2e32;
    height: auto;
    padding: 7px 0px;
    margin: 0px;
    float: left;
    width: 100%;
	color: #fff;
	text-align: center;
}

/*
 * Login Commons-info
*/

.commons-info,
.commons-feature,
.commons-feature .commons-feature-img
{width: 100%;text-align:center;}

.commons-info{background:#fff;}

.commons-triangle-bg {
	width: 100%;
	height: 105px;
	background: url("../images/commons_bg_triangle.png") no-repeat top center;
}

.commons-feature h1,
.commons-feature span {
	display: block;
	max-width: 730px;
	margin: 0 auto;
	text-align: center;
	font-weight: normal;
	line-height: 22px;
}

.commons-feature h1{
	margin-bottom: 25px;
	line-height: 42px;
	padding: 0px 10px;
}

.commons-feature .commons-feature-img ul{
	width: 1280px;
	margin: 0px auto;
	margin-top: 30px;
	padding: 0px;
	-webkit-padding-start: 0px;
	-webkit-margin-before: 0px;
	-webkit-margin-after: 0px;
	-webkit-margin-start: 0px;
	-webkit-margin-end: 0px;
	display: inline-block;
	list-style: none;
	text-align: center;
}


.commons-feature .commons-feature-img ul li{
	background-position: top center;
	background-repeat: no-repeat;
	width: 420px;
	display: inline-block;
	margin: 50px 0px;
	position: relative;
	vertical-align: top;
}

.commons-feature .commons-feature-img.commons-feature-img-1 ul li{height:446px;}

.commons-feature .commons-feature-img ul li i{display: block; text-indent: -9999px;}

.commons-feature .commons-feature-img.commons-feature-img-1 ul li{
	background-image: url("../images/commons-feature-img-1-1.png");
}

.commons-feature .commons-feature-img.commons-feature-img-1 ul li.commons-feature-img-1-2{
	background-image: url("../images/commons-feature-img-1-2.png");
}

.commons-feature .commons-feature-img.commons-feature-img-1 ul li.commons-feature-img-1-3{
	background-image: url("../images/commons-feature-img-1-3.png");
}

.commons-feature.commons-feature-2{
	background: #f5f5f5;
	padding: 50px 0px 0px 0px;
}

.commons-feature .commons-feature-img.commons-feature-img-2{
	background: url("../images/commons_feature_social.png") no-repeat top center;
	padding-top: 100px;
	margin-top: 40px;
}

.commons-feature .commons-feature-img.commons-feature-img-2 ul li{
	background-image: url("../images/commons-feature-img-2-1.png");
	min-height: 340px;
}

.commons-feature .commons-feature-img.commons-feature-img-2 ul li.commons-feature-img-1-2{
	background-image: url("../images/commons-feature-img-2-2.png");
}

.commons-feature .commons-feature-img.commons-feature-img-2 ul li.commons-feature-img-1-3{
	background-image: url("../images/commons-feature-img-2-3.png");
}

.commons-feature .commons-feature-img.commons-feature-img-2 ul li div{
	width: 90%;
	margin: 0 auto;
	margin-top: 210px;
}

.commons-feature .commons-feature-img.commons-feature-img-2 ul li div span{
	width: 100%;
	display: block;
	margin: 25px 0px;
	line-height: 28px;
}

.commons-feature .commons-feature-img.commons-feature-img-2 ul li div span.font-14{
	line-height: 20px;
}

.commons-feature.commons-feature-3{
	padding: 50px 0px 0px 0px;
}

.commons-feature .commons-feature-img.commons-feature-img-3 ul li {background:none;}

.commons-feature .commons-feature-img.commons-feature-img-3 ul li div{
	width: 90%;
	margin: 0 auto;
	margin-top: 0px;
	padding-top: 195px;
	background-position: top center;
	background-repeat: no-repeat;
}

.commons-feature .commons-feature-img.commons-feature-img-3 ul li div{
	background-image: url("../images/commons_feature_ex_1.png");
}

.commons-feature .commons-feature-img.commons-feature-img-3 ul li.commons-feature-img-1-2 div{
	background-image: url("../images/commons_feature_ex_2.png");
}

.commons-feature .commons-feature-img.commons-feature-img-3 ul li.commons-feature-img-1-3 div{
	background-image: url("../images/commons_feature_ex_3.png");	
}

.commons-feature .commons-feature-img.commons-feature-img-3 ul li div span.font-normal{
	padding: 13px 20px;
	text-align: left;
	background: #f5f5f5;
}
.commons-feature .commons-feature-img.commons-feature-img-3 ul li div span.font-normal.font-18{
	background: #2c2e32;
}

.commons-feature .commons-feature-img.commons-feature-img-3 ul li div span.font-normal.font-14{
	border: 1px solid #e9e9e9;
	border-top-style: none;
}

/**
 * Media Queries
 */

@media screen and (max-width: 1200px) {
	.commons-feature .commons-feature-img ul{
		width: 95%;
		background: none;
		padding: 0px;
	}
	
	.commons-feature .commons-feature-img ul li{
		width: 320px;
		background-size: contain;
	}	
	
	.commons-feature .commons-feature-img.commons-feature-img-2 ul li div{margin-top:200px;width:95%;}
	
	.commons-feature .commons-feature-img.commons-feature-img-3 ul li div{padding-top: 120px;}
	.commons-feature .commons-feature-img.commons-feature-img-3 ul li div span.font-normal{padding: 13px 10px;}
}

@media screen and (max-width: 760px) {
	.commons-feature .commons-feature-img ul{
		width: 80%;
		background: none;
		padding: 0px;
	}
	
	.commons-feature .commons-feature-img ul li{
		width: 100%; background-size: contain;
	}
	
	.commons-feature .commons-feature-img.commons-feature-img-3 ul li{width: 450px;}
	
	.menu-main-container ul{border-right: 1px solid #0e498b;}
	
	.menu-main-container li,
	.menu-main-container li a {		
		width: 50px;
		font-size: 12px;
		background: #1056a3;
		color: #b8cde4;
		border-style: none;
		padding: 0px;
	}
	
	.menu-main-container li a i{
		display: block;
		margin: 0 auto;
		width: 20px;
		height: 20px;
		background: url("images/icons_mobile.png") -20px 0px;
		margin-top: 2px;
		margin-bottom: 2px;
	}
	.menu-main-container li.menu-item-contents a i{background-position: -20px -20px;}
	
	.menu-main-container li.current-menu-item a i{background-position: 0px 0px}
	.menu-main-container li.menu-item-contents.current-menu-item a i{background-position: 0px -20px}
		
	.menu-main-container li a{border-right: 1px solid #1056a3;}
	.menu-main-container li.current-menu-item a{background: #1e75d6;border-color:#408adc;border-left: 1px solid #408adc;}

	.menu-main-container .xn-menu-prefix {
		display: none;
	}
	
	#xn-site-header-menu,
	.xn-service-top-menu .dropdown .btn,
	.menu-main-container li a:hover {
		background: #1056a3;
		color: #b8cde4;
	}
	
	.xn-service-top-menu .dropdown .btn{
		border-color: #1056a3;
		color: #b8cde4 !important;
		border-radius: 2px;
	}
	
	.xn-service-top-menu .dropdown.open .btn {
		color: #333 !important;
		background: #fff;
		border-color: #0e498b;
		box-shadow: inset 0px 0px 0px #888;
	}

	.site-footer {
		height: 0px;
	}

	.xn-service-top-menu {
		height: 40px;
		border-color: #1e75d6;
	}

	.xn-service-top-menu .service_logo {
		margin-top: 6px;
		margin-left: 10px;
	}

	.xn-service-top-menu .service_logo img {
		width: 80%;
		height: 80%;
	}
	
	.xn-service-top-menu .dropdown {
		margin: 10px 5px 0px 0px;
	}
}
@media screen and (max-width: 480px) {
	.login-container{padding:0px;}
	.commons-triangle-bg{background:none;height:30px;}
	.commons-feature .commons-feature-img.commons-feature-img-2{background:none;padding:0px;}
	.commons-feature .commons-feature-img ul {width:95%;}
	.commons-feature .commons-feature-img ul li {width: 100% !important; height: 300px !important; margin: 10px 0px;}
	.commons-feature .commons-feature-img.commons-feature-img-2 ul li div{margin-top:170px;width:90%;}
	.commons-feature .commons-feature-img.commons-feature-img-2 ul li div span{margin: 5px 0px;}
	#page .font-normal.font-28{font-size:22px;font-weight:bold;}
	#page .font-normal.font-22{font-size:20px;}
}