@charset "utf-8";
/**
 * @File Name : all.css
 * @Description : Base Adjust + Layout[main+sub] Mobile First!
 * @Modification Information
 * <pre>
 * 수정일 | 수정자 | 수정내용
 * 2018.10.15 | 문영신 | 최초 등록
 * 2018.10.19 | 문영신 | 요구반영. 결함개선. 고도화.
 * </pre>
 * @author 웹표준화실 문영신
 * @since 2018.08.29
 *
 * @Copyright (C) IACTS.CO.KR All rights reserved.
 */

/* Table of contents ))
 | Base Adjust
 | Layout[main+sub] Mobile First!
 | clearfix
 | #head, ..
 | ETC
 | @media print{} ))) sub.css
 | RWD ◇◆
 | @keyframes ◇◆
 */

/* ◇◆ Base Adjust ◇◆◇◆◇◆◇◆◇◆ */

/* ☆@import url(base.css); */

/* base.css )) Overwrite. 20181015 ◆◆◆ */

body{
	background:#fff;
	color:#555;
	font-weight:400;
	font-size:160%; /* (((16px */
	line-height:1.75; /* ☆ */
	letter-spacing:-.03125em; /* (-.5px/16px) */
	overflow:hidden; /* ★ */
}

[lang|='ko'],
[lang|='ko']>*{
	font-family:
		'Apple SD Gothic Neo',
		'Open Sans',
		'Microsoft JhengHei',
		'Meiryo',
		/* '나눔고딕',NanumGothic,'Nanum Gothic', */
		'맑은 고딕','Malgun Gothic',
		'돋움',Dotum,
		Helvetica,'Helvetica Neue',
		Arial,sans-serif;
}

/* [IE8] *.eot 폰트 지저분하여 맑은 고딕 사용 */
.IE8[lang|='ko'],
.IE8[lang|='ko']>*,
.IE8 [lang|='ko'],
.IE8 [lang|='ko']>*{
	font-family:
		'Apple SD Gothic Neo',
		'Open Sans',
		'Microsoft JhengHei',
		'Meiryo',
		'맑은 고딕','Malgun Gothic',
		'돋움',Dotum,
		Helvetica,'Helvetica Neue',
		Arial,sans-serif;
}

/* [IE8]fix) */
.bsContain>div>img,
.bsCover>div>img{ /* [IE8]fix) */
	visibility:inherit !important;
}


/* ◇◆ 공용 ◇◆ */


/* ◇◆ Layout[main+sub] ◇◆◇◆◇◆◇◆◇◆ */


/* 배치.전체 20181016. ☆ z-index 쌓임맥락 안만들고.. 개별 콘텐츠에서 z-index 지정 권장! */
html,
body,
#container, #wrap, #body{min-height:100%;}
.container{position:relative;
	min-width:280px; /* ☆ */
	margin:0 20px; /* ☆ */
}
#container{position:relative;}
	div.bg2top{}
		div.bg2top>div{}
	div.bg2btm{}
		div.bg2btm>div{}
	#head{clear:both;
		position:relative;
	}
		div.bg2head{}
			div.bg2head>div{}
		#head_s1{
			z-index:10; /* ☆ */
			position:relative;
			height:70px;
			margin:40px 0 0;
			background:url(../../img/inc/b.000000.opacity.50.png);
		}
		#head_s2{
			position:relative;
		}
		#head_s3{
			position:relative;
		}
			[id*='head_']>.container{
				margin:auto;
			}
			#head_s1>.container{}
			#head_s2>.container{}
			#head_s3>.container{
				position:static; /* ☆ 다른거 펼치면 밀리는 콘텐츠 */
			}
	#wrap{
		clear:both;
		position:relative;
		min-height:50px; /* ☆ 펼친 콘텐츠 높이 고려. */
		background:#fff;
		border-bottom:1px solid #ccc;
	}
		#wrap>.container{} /* ))) sub.css, main.css */
			#body{
				z-index:0; /* ☆ 다른 펼쳐지는거 보다 낮춤 */
				position:relative;
			}
	#wing{display:block;z-index:10;position:relative;} /* ((( sub.css */
	#foot{clear:both;position:relative;
		background:#fff;
	}
		div.bg2foot{}
			div.bg2foot>div{}
		#foot_s1{
			position:relative;
		}
			[id*='foot_']>.container{}
			#foot_s1>.container{padding:20px 0 30px;}


/* 배치.유틸 20181016 */
.width1expand1{
	margin-left:-20px;
	margin-right:-20px;
}
.width1expand2{
	margin-left:-20px;
	margin-right:-20px;
}


/* ☆ 모바일 감춤 20181015 */
/* #anb1{display:none;} */


/* only Desktop BG image Preload 20181015 */
/* none */


/* #head */


/* 로고 20181015 */
h1#logo{display:block;
	position:relative;
	margin:13px 110px 9px 10px; /* (화면확인) (우요소) (화면확인) (좌요소) */
	font-size:0;
	text-align:left;
}
h1#logo>a{position:relative;
	z-index:10;
}
h1#logo>a>img{
	width:auto;
	height:40px;
}


/* 글로벌내비.분리 20181015 */
#gn1{
	z-index:10;
	position:absolute;left:0;right:0;top:-110px;
	box-sizing:border-box; /* ☆ */
	height:40px;
	overflow:hidden;
}
#gn1 ul{
	padding:0 12px;
	font-size:0;
	text-align:right;
}
#gn1 li{display:inline-block;
	padding:0 0 0 1px;
	background:url(../../img/inc/gn1s.png) no-repeat 0 50%;
}
#gn1 li:first-child{
	padding:0;
	background:none;
}
#gn1 a{display:block;position:relative;
	padding:10px 14px;
	color:#fff;
	line-height:18px;
}
#gn1 a .t1{display:inline-block;
	font-size:13px;
	vertical-align:middle;
}
#gn1 a .ic1{}



/* #tnb1 ))) 미디어쿼리 max-width:1259px 안으로 보냄 */


/* #wing */


/* 위로 20181015 */
#gotop1{display:inline-block;
	float:right;
	z-index:50;
	position:relative;
	text-align:center;
}
#gotop1 .ic1{display:inline-block;
	width:32px;height:32px;
	margin:0 0 -6px;
	background:url(../../img/inc/ic32a2c1up1.png) no-repeat center center;
	background-size:contain;text-indent:-9999px;overflow:hidden;
	vertical-align:middle;
}
#gotop1 .t1{display:block;
	color:#000;
	font-weight:400;
	font-size:13px;
	letter-spacing:0;
}


/* #foot */


/* 작성자(연락처/저작권) 20181015 */
#author1{
	position:relative;
	min-width:280px;
	font-size:14px;
	line-height:1.75;
	overflow:hidden;
}
#author1 a{ /* iOS 는 000-000 를 자동으로 <a href="tel:" /> 로 마크업되니 주의! */
	color:#000;
}
#author1 .copyright{display:block;
	margin:0 0 1em;
	color:#444;
	letter-spacing:0;
	/* text-transform:uppercase; */
}
/* #author1 br{display:none;} */


/* ETC */


/* ◇◆ StyleName. YYYYMMDD. @Who	 ◇◆ */


/* RWD ◇◆◇◆◇◆◇◆◇◆◇◆ */
@media all and (max-width:767px){/* small medium large ◇◆◇◆◇◆◇◆◇◆ */


/* 주메뉴 20181015. makeActive2ClickHover('#tnb1'); */
	#tnb1{
		position:absolute;left:0;right:0;top:0;
		width:100%;
		margin:auto;
		line-height:1.375;
	}
	#tnb1 .b1.toggle{float:left;
		z-index:10;
		position:absolute;
		right:20px;
		top:-55px; /* (화면확인) */
		box-sizing:border-box; /* ☆ */
		width:40px;height:40px;
		border:1px solid #bbb;
		border-radius:0;
		background:none;
		overflow:hidden;text-indent:-9999px;
	}
	#tnb1 .b1.toggle .ic1{float:left;position:absolute;left:50%;top:50%;
		width:40px;height:40px;margin:-20px;
		background:url(../../img/inc/ic80a1c0bars2@2x.png) no-repeat;background-size:contain;
	}
	#tnb1 .b1.toggle.on{}
	#tnb1 .b1.toggle.on .ic1{
		width:40px;height:40px;margin:-20px;
		background-image:url(../../img/inc/ic80a1c0close1@2x.png);
	}
	#tnb1c{display:block !important; /* ☆ */
		visibility:hidden; /* ☆ */
		z-index:100; /* ☆ */
		position:fixed; /* ☆ */
		left:auto;right:-280px;top:0;bottom:0;
		width:280px;
		/* margin:100px 0 0; */ /* (#height 높이) */
		overflow-y:visible; /* ☆ */
		transition:.0s;
	}
	#tnb1c.on{display:block;visibility:visible;
		right:0;
		transition:.2s .2s;
	}
	#tnb1c>.bg{visibility:hidden;
		position:fixed;left:0;right:0;top:0;bottom:0;
		/* margin:100px 0 0; */ /* (#height 높이) */
		background:url(../../img/inc/b.000000.opacity.50.png);
		opacity:0;
		transition:.0s;
	}
	#tnb1c.on>.bg{visibility:visible;
		opacity:1;
		transition:.2s;
	}
	#tnb1c .b2{display:inline-block;
		z-index:110;
		position:absolute;
		left:-50px;top:0;
		width:40px;height:40px;
		margin:10px;
	}
	#tnb1c .b2>.ic1{float:left;position:absolute;left:50%;top:50%;
		width:40px;height:40px;margin:-20px;
		background:url() no-repeat;background-size:contain;
	}
	#tnb1c .b2.close{}
	#tnb1c .b2.close>.ic1{background-image:url(../../img/inc/ic80a1c0close1@2x.png);}
	#tnb1c>div.cont{
		position:relative;
		right:-200%;
		width:280px;
		height:100%;
		background:#222;
		overflow-y:auto; /* ☆ */
	}
	#tnb1c.on>div.cont{
		right:0;
	}
	/* depth1~depth4 */
	/* depth1 */
	#tnb1 div.d1{clear:both;position:relative;min-height:100%;}
	#tnb1 div.d1>ul{position:relative;overflow:hidden;}
	#tnb1 div.d1>ul>li{display:inline;position:relative;} /* ☆ */
	#tnb1 div.d1>ul>li>a{display:table;
		table-layout:fixed; /* ☆ */
		z-index:20; /* .d2 보다 높여준다 */
		position:relative;
		box-sizing:border-box; /* ☆ */
		width:100%;
		border-bottom:1px solid #333;
		border-color:rgba(255,255,255, .05);
		background:url() no-repeat 95% 50%;
		color:#fff;
		font-size:18px;
		word-break:keep-all;
		word-wrap:break-word;
	}
	#tnb1 div.d1>ul>li>a>.t1{display:block; /* ☆ */
		padding:.833em 20px; /* ☆ */
		vertical-align:middle;
	}
	#tnb1 div.d1>ul>li.hasSub>a{
		background-image:url(../../img/inc/tnb1d1bg1has.png);
	}
	#tnb1 div.d1>ul>li>a:hover,
	#tnb1 div.d1>ul>li>a:focus{}
	/* depth1 활성 */
	#tnb1 div.d1>ul>li.on>a{
		background-image:url(../../img/inc/tnb1d1bg1on.png);
		/* font-weight:600; */
	}
	/* depth2~3 */
	#tnb1 li>div[class^='d']{
		display:none;visibility:hidden;
		height:0;opacity:0;
		/* transition:.2s; */
	}
	#tnb1 li.on>div[class^='d']{
		display:block;visibility:visible;
		height:auto;opacity:1;
	}
	/* depth2 */
	#tnb1 li>div.d2{
		background:#333;
	}
	#tnb1 div.d2>.bg{display:none;} /* ☆ */
	#tnb1 div.d2>.hg1{display:none;} /* ☆ */
	#tnb1 div.d2>ul{margin:-1px 0 0;}
	#tnb1 div.d2>ul>li{position:relative;}
	#tnb1 div.d2>ul>li>a{display:block;
		z-index:10;
		position:relative;
		padding:.583em 42px;
		border-top:1px solid #444;
		border-color:rgba(255,255,255, .05);
		background:url(../../img/inc/tnb1d2bg1.png) no-repeat 20px 50%;
		color:#fff;
		font-size:16px;
	}
	#tnb1 div.d2>ul>li.hasSub>a{
		background-image:url(../../img/inc/tnb1d2bg1has.png);
	}
	#tnb1 li.on>div.d2>ul>li.on>a{
		background-image:url(../../img/inc/tnb1d2bg1on.png);
		color:#fff;
		/* font-weight:600; */
	}
	/* depth3 */
	#tnb1 li>div.d3{
		background:#444;
	}
	#tnb1 div.d3>.bg{display:none;} /* ☆ */
	#tnb1 div.d3>ul{margin:-1px 0 0;}
	#tnb1 div.d3>ul>li{position:relative;}
	#tnb1 div.d3>ul>li>a{display:block;
		z-index:10;
		position:relative;min-height:0;
		padding:.583em 42px;
		border-top:1px solid #555;
		border-color:rgba(255,255,255, .05);
		background:url(../../img/inc/tnb1d3bg1.png) no-repeat 30px 50%;
		color:#fff;
		font-size:14px;
	}
	#tnb1 div.d3>ul>li.hasSub>a{
		/* background-image:url(../../img/inc/tnb1d3g1has.png); */
	}
	#tnb1 li.on>div.d3>ul>li.on>a{
		/* background-image:url(../../img/inc/tnb1d3bg1on.png); */
		color:#fff;
		/* font-weight:600; */
	}
	/* depth4 */
	#tnb1 li>div.d4{
		background:#555;
	}
	#tnb1 div.d4>.bg{display:none;} /* ☆ */
	#tnb1 div.d4>ul{margin:-1px 0 0;}
	#tnb1 div.d4>ul>li{position:relative;}
	#tnb1 div.d4>ul>li>a{display:block;
		z-index:10;
		position:relative;min-height:0;
		padding:.333em 42px;
		border-top:0 solid #666;
		background:url(../../img/inc/tnb1d4bg1.png) no-repeat 30px 50%;
		color:#fff;
		font-size:13px;
	}
	#tnb1 div.d4>ul>li.hasSub>a{
		/* background-image:url(../../img/inc/tnb1d4g1has.png); */
	}
	#tnb1 li.on>div.d4>ul>li.on>a{
		/* background-image:url(../../img/inc/tnb1d4bg1on.png); */
		color:#fff;
		/* font-weight:600; */
	}
	/* 서브메인링크 */
	#tnb1 a.smain{display:block;
		position:relative;
		padding:.75em 42px;
		background-color:#f7f7f7;
		color:#333;
		font-size:13px;
	}
	#tnb1 a.smain>.ic1{
		position:absolute;left:0;top:50%;
		width:20px;height:20px;
		margin:-10px 16px;
		background:url(../../img/inc/ic40fa1c1home1.png) no-repeat center center;
		background-size:contain;
	}


} /* /(max-width:767px) */
@media all and (min-width:768px){/* medium ◇◆◇◆◇◆◇◆◇◆ */


	#head{}
		#head_s1{}
		#head_s2{}
		#head_s3{}
			#head_s1>.container{}
			#head_s2>.container{}
			#head_s3>.container{}


h1#logo{margin-top:8px;}
h1#logo>a>img{height:50px;}



/* 주메뉴 20181015. makeActive2ClickHover('#tnb1'); ))) 모바일과 많이 다르니, 스타일 복제하여 재정의 (분리 사용 가능)
 * 1차 가로배치. 하위absolute배치. 2차 block배치. 3차 inline배치.
 */
#tnb1{float:left;
	z-index:10;
	position:absolute;
	left:210px;right:0;
	top:-70px;
	width:auto;
	height:70px;
	line-height:1.375;
}
/* 데스크탑 감춤 */
#tnb1 .b1.toggle,
#tnb1c .b2,
#tnb1logo,
#tnb1head_s1,
#tnb1head_s2,
#tnb1c>div.cont>.bg,
#tnb1c>div.cont:before{display:none;}
#tnb1c{
	display:block !important; /* ☆ */
	position:relative; /* ☆ */
	width:100%;
	height:70px;
}
#tnb1c.on{}
#tnb1c>.bg{}
#tnb1c.on>.bg{}
#tnb1c>div.cont{
	position:relative;
	max-width:1200px;
	min-height:100%;
	margin:auto;
}
#tnb1c.on>div.cont{}

/* depth1~depth4 */
/* depth1 */
#tnb1 div.d1{
	position:relative;
	width:100%;
	min-height:100%;
}
#tnb1 div.d1>ul{}
#tnb1 div.d1>ul>li{
	float:left;
	width:20%;
}
#tnb1 div.d1>ul>li>a{display:block;
	position:relative;
	height:70px;
	/* padding:0 20px; */ /* (약간 여유) */
	color:#fff;
	font-size:0;
	font-weight:400;
	text-align:center;
}
#tnb1 div.d1>ul>li>a>.ic1{display:inline-block;
	width:0;
	height:100%;
	vertical-align:middle;
}
#tnb1 div.d1>ul>li>a>.t1{display:inline-block;
	position:relative;
	padding:23px 0;
	font-size:18px;
	line-height:24px;
	vertical-align:middle;
}
#tnb1 div.d1>ul>li>a>.t1:before{content:'';
	display:none;
	position:absolute;left:0;right:0;bottom:0;
	border-bottom:1px solid #5bdcff;
}
#tnb1 div.d1>ul>li.hasSub>a{}
#tnb1 div.d1>ul>li.on>a{}
#tnb1 div.d1>ul>li>a:hover,
#tnb1 div.d1>ul>li>a:focus{
	color:#5bdcff;
}
#tnb1 div.d1>ul>li>a:hover>.t1:before,
#tnb1 div.d1>ul>li>a:focus>.t1:before{
	display:block;
}



} /* /(min-width:768px) */
@media all and (min-width:1000px) and (max-width:1259px){/* large ◇◆◇◆◇◆◇◆◇◆ */


.container{position:relative;
	max-width:940px; /* ☆ */
	margin:auto; /* ☆ */
}

.width1expand1{
	margin-left:-160px; /* (1260-940)/2 */
	margin-right:-160px;
}
.width1expand2{
	margin-left:0;
	margin-right:0;
}

#tnb1{
	max-width:940px;
}
#tnb1 .b1.toggle{
	right:0;
}


} /* /(min-width:1000px) and (max-width:1259px) */
@media all and (min-width:1260px){/* xlarge (1200+20*2+16+2*2) ◇◆◇◆◇◆◇◆◇◆ */


.container{
	max-width:none; /* ☆ */
	width:1200px; /* ☆ */
	margin:auto;
}
	#head{}
		#head_s1{
			margin-top:0;
		}
		#head_s2{}
		#head_s3{}
			#head_s1>.container{}
			#head_s2>.container{}
			#head_s3>.container{}


.width1expand1{
	margin-left:-360px; /* (1200-1920)/2 */
	margin-right:-360px;
}
.width1expand2{
	margin-left:0;
	margin-right:0;
}


#tnb1 div.d1>ul>li{
	width:auto;
}
#tnb1 div.d1>ul>li>a{
	padding:0 40px;
}

#gn1{
	left:auto;
	top:-55px;
	border-radius:9999px;
	border:1px solid #fff;
}


#author1{
	text-align:center;
}

#gotop1{
	position:absolute;right:0;top:20px;
}




/* ◇◆◇◆ only Desktop Contents ◇◆◇◆ */





} /* /(min-width:1260px) */
/* /RWD ◇◆◇◆◇◆◇◆◇◆◇◆ */


/* ◇◆ @keyframes [IE10+] ◇◆ */
/* @-webkit-keyframes 는 CSS3 유효성 오류 발생 */


@keyframes kfx1move1vertic1{
	0%{margin-bottom:40px;}
	50%{margin-bottom:60px;}
	100%{margin-bottom:40px;}
}
.kfx1move1vertic1{animation: kfx1move1vertic1 1.6s ease-in-out infinite;}

@keyframes kfx1move1vertic2{
	0%{transform: translateY(0);}
	50%{transform: translateY(2px);}
	100%{transform: translateY(0);}
}
.kfx1move1vertic2{animation:kfx1move1vertic2 .6s ease-in-out infinite;}

@keyframes kf1scale1rotate1{
	/* 50%{transform:scale(1.2) rotate(-6deg);} */
	50%{transform:scale(1.2) rotate(-1deg);}
}
.kf1scale1rotate1{animation: kf1scale1rotate1 12s ease-in-out infinite;}
