@charset "utf-8";

/* 웹 폰트 */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap');

/*초기화*/
*{margin:0;padding:0}
html{overflow-x:hidden;overflow-y:auto;width:100%;height:100%;}
body{font-size:.74em}*{font-family: 'Noto Sans KR', sans-serif !important;}
body{
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;
	color:#000;
	font-size:0.8em;
	letter-spacing:-0.05em;
	word-spacing:0em;
	word-break: normal;
	word-wrap:break-word;
	}

p, div, ul, ol, li, dt, dl, dd, header, nav, aside, article, section, footer, figure, address, h1, h2, h3, h4, h5, h6{border:0px;margin:0px;padding:0px;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
/*HTML5*/article, aside, hgroup, header, footer, figure, figcaption, nav, section,time, mark, canvas, video, audio, details, summary{display:block;}

table{border-spacing:0;border-collapse:collapse;}
fieldset,img{border:0;}
ul{list-style:none;}
hr{display:none;}

a         {text-decoration:none;color:#212121;}
a:link    {text-decoration:none;color:#212121;}
a:visited {text-decoration:none;color:#212121;}
a:active  {text-decoration:none;color:#212121;}
a:hover   {text-decoration:none;color:#212121;}

/* 공통 */
* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.clearfix {*zoom: 1}
.clearfix:after {display: block; width: 0; height: 0; content: ""; clear: both;}
.hidden {display: none !important;}

/* 미지원 브라우저 */
.browserupgrade {display:block;position:absolute;left:0;top:0;background:#fff;z-index:1001;}

/*Intro 페이지*/

.intro{position:relative; max-width:1280px; margin: 0 auto; overflow:hidden;  }
.intro.top{padding-top:100px;}
.intro.bottom{position:relative; max-width:1280px; margin: 0 auto; overflow:hidden;  }
.container{background:url(../images/intro/intro_dev_bg_2.jpg) center; background-size:auto 120%; min-height:655px; height:100%; }
.award{width:364px;height:170px;background:url(../images/intro/award.png) no-repeat center top;background-size:100%;float:right;	text-indent:-99999px;}
.logo{width:364px;height:170px;background:url(../images/intro/intro_logo.png) no-repeat center top;background-size:100%;float:left;	text-indent:-99999px;}
.area{width:400px;float:right; margin-right:300px;}
.area a{display:block;color:#FFF;font-size:21px;padding:10px 20px;position:relative;}
.area h2{background:#EB834C;color:#FFF;font-size:30px;padding:10px 20px;text-align:center;border-bottom:1px solid #68d7e1;}
.area_1 li{background:#178C70; border-bottom:1px solid #68d7e1;opacity: 0.9; }
.area_2 li{background:#DC0000; margin-top:1px; opacity: 0.9;}
.area_3 li{background:#0168B7; margin-top:1px; opacity: 0.9;}
.area_4 li{background:#808000; margin-top:1px; opacity: 0.9;}
.area_5 li{background:#30C0FF; margin-top:1px; opacity: 0.9;}
.area_1 a{padding:20px 20px;}
.area_2 a{padding:20px 20px;}
.area_3 a{padding:20px 20px;}
.area_4 a{padding:20px 20px;}
.area_5 a{padding:20px 20px;}
.area_1 a:after{content:"";display:block;width:24px;height:24px;position:absolute;right:15px;top:22px;}
.area_2 a:after{content:"";display:block;width:24px;height:24px;position:absolute;right:15px;top:22px;}
.area_3 a:after{content:"";display:block;width:24px;height:24px;position:absolute;right:15px;top:22px;}
.area_4 a:after{content:"";display:block;width:24px;height:24px;position:absolute;right:15px;top:22px;}
.area_5 a:after{content:"";display:block;width:24px;height:24px;position:absolute;right:15px;top:22px;}
.area_1 a:after{background:url(../images/intro/Arrow10.png) no-repeat center;}
.area_2 a:after{background:url(../images/intro/Arrow10.png) no-repeat center;}
.area_3 a:after{background:url(../images/intro/Arrow10.png) no-repeat center;}
.area_4 a:after{background:url(../images/intro/Arrow10.png) no-repeat center;}
.area_5 a:after{background:url(../images/intro/Arrow10.png) no-repeat center;}
.area li:hover{background-color:#484F56;}
footer{color:#FFFFFF;text-align:right;padding:20px 0;width:100%;position:absolute; left:0; bottom:0; background:rgba( 0,0,128,0.6 );}
address{min-height:10px;font-style:normal;}
address span{padding-left:15px;}
.copyright{padding-top:5px;}

/*미디어 쿼리*/

@media only screen and (max-height:665px){
	footer{position: static; left: auto; bottom: auto; background:rgba( 0,0,128,0.6 );}
}

@media only screen and (max-width:1280px){
	.intro{max-width:100%;padding:0 20px;}
		
@media only screen and (max-width:1105px){
	.intro{max-width:100%;padding:0 20px;}
	.area{position:relative;float:left; margin-right:0px;}	
	
@media only screen and (max-width:805px){
	.logo{width:45%;}
	.area{width:50%;}
}
@media only screen and (max-width:640px){
	
	.container{min-height:100%; height:auto;}
	.intro.top{padding-top:20px;}
	.logo{width:320px;float:none;margin:0 auto;}
	.area{width:80%;float:none;margin:0 auto;margin-bottom:50px;}
/* 모바일 최적화 작업 */	
	.area a{display:block;color:#FFF;font-size:16px;padding:5px 20px;position:relative;}
	.area_1 li{background:#178C70; border-bottom:1px solid #68d7e1;opacity: 0.9; }
	.area_2 li{background:#DC0000; margin-top:1px; opacity: 0.9;}
	.area_3 li{background:#0168B7; margin-top:1px; opacity: 0.9;}
	.area_4 li{background:#808000; margin-top:1px; opacity: 0.9;}
	.area_5 li{background:#30C0FF; margin-top:1px; opacity: 0.9;}
	.area_1 a{padding:5px 20px;}
	.area_2 a{padding:5px 20px;}
	.area_3 a{padding:5px 20px;}
	.area_4 a{padding:5px 20px;}
	.area_5 a{padding:5px 20px;}
	.area_1 a:after,
	.area_2 a:after{content:"";display:block;width:24px;height:24px;position:absolute;right:15px;top:2px;}
	.area_3 a:after{content:"";display:block;width:24px;height:24px;position:absolute;right:15px;top:2px;}
	.area_4 a:after{content:"";display:block;width:24px;height:24px;position:absolute;right:15px;top:2px;}
	.area_5 a:after{content:"";display:block;width:24px;height:24px;position:absolute;right:15px;top:2px;}
	.area_1 a:after{background:url(../images/intro/Arrow10.png) no-repeat center;}
	.area_2 a:after{background:url(../images/intro/Arrow10.png) no-repeat center;}
	.area_3 a:after{background:url(../images/intro/Arrow10.png) no-repeat center;}
	.area_4 a:after{background:url(../images/intro/Arrow10.png) no-repeat center;}
	.area_5 a:after{background:url(../images/intro/Arrow10.png) no-repeat center;}
	
	footer{text-align:center;}
	address{background:none;padding-left:0;}
	address span{display:block;margin:5px 0;}
	address span{padding-left:0;}
}
@media only screen and (max-width:350px){
	.area h2{font-size:17px;}
	.area a{font-size:13px;}
	.area_1 a:after,
	.area_2 a:after{width:14px;height:14px;top:12px;}
	.area_3 a:after{width:14px;height:14px;top:12px;}
	.area_4 a:after{width:14px;height:14px;top:12px;}
	.area_5 a:after{width:14px;height:14px;top:12px;}
}