@charset "UTF-8";


/***********************************************************************************************
	서체지정
***********************************************************************************************/
	#main-menu > input,
	#main-menu > ul > li > h1,
	h1.title,
	#visual .items > li > a > h1,
	#visual .items > li > a > h2{
		font-family: "NanumSquare";
	}



/***********************************************************************************************
	MAIN
***********************************************************************************************/
	.main-top,
	#visual,
	#visual .items > li > a{
		display: block;
		position: relative;
		height: 500px;
		word-break: keep-all;
	}


	/** Rolling Banners **/
	#visual{
		width: 54.545%;
		overflow: hidden;
	}
	#visual:after{
		clear: both;
		display: block;
		height: 0;
		content: "";
	}

	#visual .items > li{
		position: absolute;
		top: 0;
		left: 0;
	}
	#visual .items > li:first-child{ position: relative }
	#visual .items > li > a{ background-color: #EBEEF0 }
	#visual .items > li > a > h1,
	#visual .items > li > a > h2,
	#visual .items > li > a > h3{
		position: relative;
		padding-top: 2em;
		padding-left: 40px;
		font-weight: normal;
		color: #45484C;
		z-index: 2;
	}
	#visual .items > li > a > h1{
		font-size: 1.95em;
		color: #004EA2;
	}
	#visual .items > li > a > h2{
		font-size: 1.3em;
	}
	#visual .items > li > a > h3{
		letter-spacing: -1px;
	}
	#visual .items > li > a > img{
		position: absolute;
		right: 0;
		bottom: 0;
		z-index: 1;
	}


	/** Page 버튼 **/
	#visual .bx-pager{
		position: absolute;
		left: 20px;
		bottom: 20px;
		font-size: 0;
		line-height: 0;
		z-index: 99;
	}
	#visual .bx-pager > div{
		float: left;
		padding-right: 6px;
	}
	#visual .bx-pager > div > a{
		display: block;
		width: 15px;
		height: 15px;
		background: url("/jsp/user4/assets/img/main/bullet_off.png") no-repeat center center;
		text-indent: -99999px;
	}
	#visual .bx-pager > div > a.active{ background-image: url("/jsp/user4/assets/img/main/bullet_on.png") }
	
	/* 20170526 배너 재생버튼  */
	#banner_btnBox{position:absolute;z-index:100;left:495px;bottom:7px;}
	#banner_btnBox a{display:inline-block;width:30px;height:30px;overflow:hidden;}
	
	#visual .bx-controls-auto{ display: none }
	/* ================ */

	/** Start/Stop 버튼 **/
	/**
	#visual .bx-controls-auto{ display: none }
	#visual .bx-controls-auto-item > a{
		width: 15px;
		height: 15px;
		text-indent: -99999px;
	}
	#visual .bx-controls-auto-item > .bx-start{ background-position: -16px 0 }
	#visual .bx-controls-auto-item > .bx-stop{ background-position: -16px -16px }
	/**/


	/** Prev/Next 버튼 **/
	/**
	#visual .bx-controls-direction{ display: none }
	/**/
	

	
	
	#main-menu{
		float: left;
		width: 45.46%;
		height: 100%;
		font-size: 0;
	}
	#main-menu > input{
		box-sizing: border-box !important;
		display: block;
		float: left;
		width: 50%;
		height: 46px;
		margin: 0;
		padding-left: 0;
		padding-right: 0;
		border: 0;
		border-radius: 0;
		border-bottom: 1px solid #004EA2;
		background: #E0E0E0 url("/jsp/user4/assets/img/main/tab_bg_left.png") no-repeat left top;
		font-size: 20px;
		color: #454D57;
		cursor: pointer;
	}
	#main-menu > input:first-child{ background: #E0E0E0 url("/jsp/user4/assets/img/main/tab_bg_right.png") no-repeat right top }
	#main-menu > ul{
		display: none;
		float: left;
		width: 100%;
		height: 454px;
	}
	#main-menu > ul > li{
		box-sizing: border-box !important;
		position: relative;
		float: left;
		width: 50%;
		height: 50%;
		padding: 2.8% 0 0 6%;
		background-size: cover !important;
		letter-spacing: -1px;
		color: #FFF;
	}
	#main-menu > ul > li > h1{
		min-height: 50px;
		font-size: 24px;
		font-weight: normal;
	}
	#main-menu > ul > li > h2{
		font-size: 14px;
		font-weight: normal;
	}
	#main-menu > ul > li > hr{
		display: block;
		width: 50px;
		height: 1px;
		margin: 12px auto 10px 0 !important;
		border: 0;
		background-color: #FFF;
		visibility: visible;
	}
	#main-menu > ul > li > a{
		position: absolute;
		right: 30px;
		bottom: 20px;
	}

	#main-menu li.type1{ background: url("/jsp/user4/assets/img/main/bg_type1.jpg") }
	#main-menu li.type2{ background: url("/jsp/user4/assets/img/main/bg_type2.jpg") }
	#main-menu li.type3{ background: url("/jsp/user4/assets/img/main/bg_type3.jpg") }
	#main-menu li.type4{ background: url("/jsp/user4/assets/img/main/bg_type4.jpg") }

	.type-business > input.tab1,
	.type-user > input.tab2{
		background: #004EA2 !important;
		color: #FFF !important;
	}
	
	.type-business > .menu-business,
	.type-user > .menu-user{ display: block !important }



	/** Banners **/
	.main-middle,
	.circle-banner{
		clear: both;
		margin: 60px 0;
		font-size: 0;
	}

	.main-middle > a > img{ width: 33.3333% }

	.circle-banner a{ margin-left: 5% }
	.circle-banner a:first-child{ margin-left: 0 }
	.circle-banner a > img{ max-width: 15.5% }



	/** 항목별 타이틀 **/
	h1.title{
		position: relative;
		margin-bottom: 25px;
		padding: 8px 0 6px;
		border-bottom: 2px solid #00387F;
		text-align: left;
		font-size: 0;
		font-weight: normal;
	}
	h1.title > .kr{
		font-size: 24px;
		color: #222738;
	}
	h1.title > .en{
		font-size: 20px;
		color: #00387F;
	}
	h1.title > span{
		display: inline-block;
		margin-right: 10px;
		letter-spacing: -0.05em;
		line-height: 1em;
	}
	h1.title > a{
		position: absolute;
		top: 0;
		right: 14px;
		padding: 6px;
	}


	/** 최근게시물 **/
	.main-board{ clear: both }
	.main-board > section{
		display: inline-block;
		width: 47.3%;
		vertical-align: top;
		font-size: 0;
	}
	.main-board > section.news{ float: right }
	.main-board > section > ul{
		padding: 0 10px;
		font-size: 0;
	}
	.main-board > section > ul > li{
		padding: 4px 12px 6px;
		background: url("/jsp/user4/assets/img/main/icon_dot.gif") no-repeat left center;
	}
	.main-board > section > ul > li > a,
	.main-board > section > ul > li > span{
		display: inline-block;
		white-space: nowrap;
		line-height: 1.3em;
		overflow: hidden;
	}
	.main-board > section > ul > li > a{
		width: 80%;
		font-size: 14px;
		color: #454D57;
	}
	.main-board > section > ul > li > span{
		width: 20%;
		text-align: right;
		font-size: 12px;
		color: #677480;
	}



	.download-center,
	.download-center .content{
		float: left;
	}
	.download-center .content{
		padding-bottom: 90px;
		font-size: 0;
	}
	.download-center .content a{
		display: inline-block;
		float: left;
		width: 24%;
		margin-left: 2.26%;
		padding: 0.8em 3%;
		border: 2px solid #EBEBEB;
		background: #FFF url("/jsp/user4/assets/img/main/icon_link.png") no-repeat 90% center;
		text-align: left;
		font-size: 14px;
		color: #45484D;
		cursor: pointer;
	}






@media all and (max-width: 1120px)
{
	#visual{ width: 52% }
	#main-menu{ width: 48% }
	#main-menu > ul > li > h1{ font-size: 22px }
	#main-menu > ul > li > h2{ font-size: 12px }
}



@media all and (max-width: 800px)
{
	#visual,
	#main-menu{ width: 50% }

	#main-menu > ul > li > h1{ font-size: 20px }

	.download-center .content a{ margin-left: 2% }
}



@media all and (max-width: 720px)
{
	#visual .items > li > a > h1,
	#visual .items > li > a > h2,
	#visual .items > li > a > h3,
	#main-menu > ul > li > h1 > br,
	.main-board .title > .kr,
	.main-board .title > .en{
		display: none;
	}

	#visual,
	#main-menu{
		width: auto;
	}

	#visual,
	#visual .items > li > a,
	#visual .items > li > a > img,
	#main-menu{
		height: auto;
	}

	#visual .items > li > a{ padding: 0 }
	#visual .items > li > a > img{
		display: none;
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		bottom: auto;
		width: 100%;
	}

	#visual .bx-pager{
		position: absolute;
		left: 0;
		bottom: 10%;
		width: 100%;
		text-align: center;
	}
	#visual .bx-pager > div{
		display: inline-block;
		float: none;
		padding-right: 6px;
	}
	#visual .bx-pager > div > a{
		display: block;
		width: 6px;
		height: 6px;
		background-size: 100% 100%;
	}
	

	#main-menu{
		position: relative !important;
		float: none;
	}
	#main-menu > input{
		display: inline-block;
		float: none;
	}
	#main-menu > ul{ height: 370px }
	#main-menu > ul > li{
		display: inline-block;
		vertical-align: top;
	}
	#main-menu > ul > li > h1{
		min-height: 0;
		font-size: 24px;
	}
	#main-menu > ul > li > h2{ font-size: 14px }



	.main-board{ margin: 1.2em 10px }
	.main-board > section{
		position: absolute;
		top: 0;
		left: 0;
		float: none !important;
		width: 100%;
		z-index: 2;
		visibility: hidden;
	}
	.main-board > section.active{
		position: relative;
		visibility: visible;
	}
	.main-board .title{
		height: 40px;
		padding: 0;
	}
	
	.main-board > .tab1,
	.main-board > .tab2{
		position: absolute;
		top: 0;
		left: 0;
		width: 30%;
		height: 30px;
		padding-top: 8px;
		border: 2px solid #E0E0E0;
		border-bottom: 0;
		background-color: #FFF;
		text-align: center;
		z-index: 3;
	}
	.main-board > .tab2{ left: 30% }
	.main-board > a.active{
		padding-bottom: 2px;
		border-color: #00387F;
		z-index: 4;
	}

	.download-center,
	.download-center .content{
		float: none;
		width: auto !important;
	}
	.download-center{
		margin: 10px;
		padding-bottom: 0;
	}
	.download-center .title .kr{ font-size: 20px }
	.download-center .title .en{ font-size: 16px }
	.download-center .content{ text-align: center }
	.download-center .content a{ float: none }
	.download-center .content a:first-child{ margin-left: 0 }
}



@media all and (max-width: 640px)
{
	#main-menu hr,
	.main-middle,
	.circle-banner{
		display: none !important;
	}

	.main-top{ height: auto }

	#main-menu > input{
		height: 40px;
		font-size: 18px;
	}
	#main-menu > ul{ height: 420px }
	#main-menu > ul > li > h1{ height: 3em }
	#main-menu > ul > li > h1 > br{ display: block }
	#main-menu > ul > li > a{
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	#main-menu > ul > li > a > img{ display: none }

	.download-center .title{ margin-top: 30px }
}



@media all and (max-width: 480px)
{
	.download-center{ display: none }


	#main-menu > input{
		height: 36px;
		font-size: 15px;
	}
	#main-menu > ul{ height: 340px }
	#main-menu > ul > li{
		padding: 4% 0 0 3%;
	}
	#main-menu > ul > li > h1{ font-size: 19px }
	#main-menu > ul > li > h2{ font-size: 12px }

	.main-board > section > ul{ padding: 0 5px }
	.main-board > section > ul > li{
		padding: 2px 0 4px 8px;
		background-size: 4px auto;
	}
	.main-board > section > ul > li > a{ font-size: 11px }
	.main-board > section > ul > li > span{ font-size: 10px }
}



@media all and (max-width: 320px)
{
	#main-menu > input{
		height: 30px;
		font-size: 14px;
	}
	#main-menu > ul{ height: 300px }
	#main-menu > ul > li > h1{ font-size: 15px }
	#main-menu > ul > li > h2{ font-size: 11px }

	.main-board > section > ul > li > a{ font-size: 11px }
	.main-board > section > ul > li > span{ font-size: 10px }
}