@charset "utf-8";
/**
 * @File Name : main.css
 * @Description : Layout[main] | Contents[main]
 * @Modification Information
 * <pre>
 * 수정일 | 수정자 | 수정내용
 * 2018.07.04 | 문영신 | 최초 등록
 * 2018.07.18 | 문영신 | 요구반영. 결함개선. 고도화.
 * </pre>
 * @author 웹표준화실 문영신
 * @since 2018.07.04
 *
 * @Copyright (C) IACTS.CO.KR All rights reserved.
 */

/* ◇◆ Layout[main] ◇◆◇◆◇◆◇◆◇◆ */


/* 배치.메인 20180717 */
#wrap{}
	#wrap>.container{max-width:none;margin:auto;}
	#body{
		z-index:0; /* ☆ */
		position:relative;
		min-height:0; /* ☆ 배치 후 최종화면 확인! */
		margin:auto;
		padding:0;
		color:#555;
		line-height:1.375;
	}
		#body [class*='mainbody']{position:relative;}
			#body .mainbody1{}
			#body .mainbody2{}
			#body .mainbody3{background:#dae6f5}
				#body .container{
					padding:0; /* ((( all.css 에서 .container 는 margin 값으로 좌우여백 만드므로.. */
				}
					#body .mainbody1>.container{margin:auto;}
					#body .mainbody2>.container{margin:auto}
					#body .mainbody3>.container{padding:40px 0}
						/* #body [class*='mainwrap']{} */

#wing{}


html.IE8 #body .mainbody7{}


/* #head */
#head_s1{height:auto;}
	#tnb1 .b1.toggle{top:20px;}

/* #body */





/* ☆공용 20180713 */
/* none */
.init img{max-width:100%;} /* ☆ */

#menu1{display:none;}


/* 비쥬얼.PR로테이터. 20180713 [JS] jQmPR1(); */
#vpr1{display:block;
	position:relative;
	margin:auto;
	overflow:hidden;
}
#vpr1 .wrap1{padding:0 0 40px ;}
#vpr1 .mView{
	z-index:0; /* ☆ */
	position:relative;
	height:0; /* 정보 안잘리게 >=768*(840/1920) */
	padding:0 0 60%;/* padding:0 0 47.5%; */
	overflow:hidden;
}
#vpr1 .mCont{position:absolute;left:0;right:0;top:0;bottom:0;width:100%;height:100%;}
#vpr1 .mContC{display:block;position:absolute;left:0;top:0;width:100%;height:100%;background:#fff;}
#vpr1 .mContC:first-child{z-index:1;}
#vpr1 .mContC.on{display:block;}
#vpr1 .mContC .c{display:block;position:absolute;left:0;right:0;top:0;bottom:0;overflow:hidden;}
#vpr1 .mContC a[href]{text-decoration:none;cursor:pointer;}
#vpr1 .mContC .f1{display:block;position:absolute;left:0;right:0;top:0;bottom:0;overflow:hidden;}
#vpr1 .mContC .f1p1{display:block;position:absolute;left:0;right:0;top:0;bottom:0;margin:0 -100px}
#vpr1 .mContC .f1p1 img{display:block;width:100%;height:auto;margin:auto;}

/* 고도화 */
#vpr1 .mContC .c:focus{border:1px dotted #000;}
#vpr1 .mContC .c:focus .f1{margin:-1px;}
#vpr1 .mContC.on .a1{}
#vpr1 .mContC.off .a1{}
#vpr1 .mContC.prev-on .a1{}
#vpr1 .mContC.next-on .a1{}
/* 메뉴 */
#vpr1 .menu{display:block;
	z-index:10;
	position:absolute;left:0;right:0;bottom:70px;
	width:100%;
	margin:0; /* ☆ */
	font-size:0;
}
#vpr1 .menu .m{display:inline-block;position:relative;
	box-sizing:border-box; /* ☆ */
	margin:0;padding:0;border-radius:0;border:0;
	background:url(../../img/main/b.png);
	line-height:1;
	vertical-align:middle;
	cursor:pointer;
}
#vpr1 .menu .m .ic1{float:left;
	position:absolute;left:50%;top:50%;
	width:20px;height:20px;margin:-10px;
	background:url() no-repeat center center;background-size:contain;overflow:hidden;
}
/* 제어 */
#vpr1 .menu .w1{display:block;
	position:relative;
	height:40px;
	background:#000;
	overflow:hidden
}
#vpr1 .mControl{display:block;
	height:0;
	vertical-align:middle;
	text-align:right;
}
#vpr1 .mControl .m{
	width:40px;height:40px;
	background:#333;
}
#vpr1 .mControl .m .ic1{
	margin:-20px;
	width:40px;height:40px;
	background:url(../../img/main/ic80a1c0pause1.png) no-repeat;
	background-size:contain;
}
/* 순번 */
#vpr1 .mNum{display:inline-block;
	position:relative;
	vertical-align:middle;
	height:40px;
	padding:0 0 0 10px;
}
#vpr1 .mNum .m{display:inline-block;
	width:auto;height:auto;
	padding:10px 5px;
	background:url(../../img/main/b.png);
	color:#fff;
	font-size:14px;
	line-height:18px;
	text-align:center;
	vertical-align:top;
}
#vpr1 .mNum .m .ic1{display:inline-block;
	position:relative;left:auto;top:auto;
	vertical-align:middle;
	width:10px;height:10px;
	margin:0 5px 0 0;
	background-image:none;
	border:4px solid #fff;
	border-radius:100%;
	text-align:center;
}
#vpr1 .menu .m .t1{display:none;}
#vpr1 .mNum .m.on .ic1{border:0;width:18px;height:18px;background:#c9161e;}

/* 고도화 */
#vpr1.nodo .menu,
#vpr1.nodo .mControl2{display:none;}



/* menu2 */
#menu2{display:block;position:relative;margin:-40px auto 0;overflow:hidden;}
#menu2 .wrap1{}
#menu2 li{display:inline}
#menu2 li>.a1{display:block;
	position:relative;
	float:left;
	padding:1%;
	width:31.333%;height:auto;
	color:#fff;text-align:center;
	text-decoration:none;
	overflow:hidden;
}
#menu2 li>.a1 .t1{display:block;
	font-size:18px;
	margin:25px 0 20px;
}
#menu2 li>.a1 .t2{display:none;}
#menu2 li>.a1 .ic1{display:block;
	margin:10px auto 0;
	width:60px;height:60px;
	background:url() no-repeat;
	background-size:contain;
}
#menu2 li>.a1:before{content:'';display:block;
	position:absolute;left:50%;top:0;
	margin:85px 0 0 -10px;
	width:20px;
	border-top:1px solid #fff;
}


#menu2 li.m4>.a1:before{margin: 55px 0 0 -10px;}
#menu2 li.m5>.a1:before{margin: 55px 0 0 -10px;}


#menu2 li.m1>.a1{background:#7361c5}
#menu2 li.m2>.a1{background:#4c59b9}
#menu2 li.m3>.a1{background:#33518d}
#menu2 li.m4>.a1{background:#cd4747}
#menu2 li.m5>.a1{background:#1d8893;}

#menu2 li.m1>.a1 .ic1{background-image:url(../../img/main2/menu2p01.png)}
#menu2 li.m2>.a1 .ic1{background-image:url(../../img/main2/menu2p02.png)}
#menu2 li.m3>.a1 .ic1{background-image:url(../../img/main2/menu2p03.png)}
#menu2 li.m4>.a1 .ic1{background-image:url(../../img/main2/menu2p04.png)}
#menu2 li.m5>.a1 .ic1{background-image:url(../../img/main2/menu2p05.png)}

/* #menu2 li.m4 디자인 변경 */
#menu2 li.m4>.a1{
	width:50%;height:120px;
	padding:0;
}
#menu2 li.m4>.a1 .ic1{
	position:absolute;left:50%;bottom:0;
	width:95px;height:61px;
	margin:0 0 0 -45px;
}
/*#menu2 li.m4>.a1:before{border:0;}*/

/* #menu2 li.m5 디자인 변경 */
#menu2 li.m5>.a1{
	width: 50%;
	height:120px;
	padding:0;
}
#menu2 li.m5>.a1 .ic1{
	position:absolute;left:50%;bottom:0;
	width:95px;height:61px;
	margin:0 0 0 -45px;
}


/* 카드.롤링. 20170927. [JS] $('mpr1').jQmPrevNext3({interval: 12000}); */
#cpr1{display:block;position:relative;
	padding:0 0 40px;
	margin:0 auto 30px;
}
#cpr1 .wrap1{}
#cpr1 .h1{display:block;margin:0 auto 40px;text-align:center;color:#000;font-size:32px;font-weight:bold;;}
#cpr1 .h1 span{color:#c9161e}
#cpr1 .h1>.ic1{display:block;
	margin:0 auto 20px;
	width:188px;height:56px;
	background:url(../../img/main/cpr1title1@2x.png) no-repeat;
}
#cpr1 .mView{z-index:0;
	position:relative;
	width:300px;
	height:305px;
	margin:auto auto 20px;
	overflow:visible;
}
#cpr1 .mCont{position:relative;width:100%;height:100%;}
#cpr1 .mContC{display:block;
	position:absolute;left:0;
	top:0 !important; /* ☆ 창조절시 JS에서 값 변경되는거 방지 */
	width:100%;
	height:100%;
	overflow:hidden;
	transition:.8s; /* ☆ */
	z-index:0 !important;
}
#cpr1 .mContC.on{}
#cpr1 .mContC .a1{display:block;
	position:relative;
	width:280px;height:100%;
	margin:0 10px;
	background:#fff;
	color:#000;font-size:14px;
	text-decoration:none;
	overflow:hidden;
	cursor:pointer;
}
#cpr1 .mContC .f1{display:block;position:relative;
	width:100%;height:175px;
	margin:0 auto;
	padding:0;
	background:#eee;
	overflow:hidden;
}
#cpr1 .mContC .f1 .f1p1{display:block;position:absolute;left:-100%;right:-100%;top:0;bottom:0;overflow:hidden;}
#cpr1 .mContC .f1 img{display:block;position:relative;width:auto;height:100%;min-width:33.4%;max-width:100%;margin:0 auto;}
#cpr1 .mContC .w1{display:block;
	position:relative;
	padding:20px;
	width:240px;height:90px;
	overflow:hidden;
}
#cpr1 .mContC .w1 .t1{display:block;
	width:100%;height:58px;
	overflow:hidden;
	font-size:17px
}
#cpr1 .mContC .w1 .t2{display:block;
	color:#555;
	height:40px;
	overflow:hidden;
}
#cpr1 .mContC .s1p1{display:block;
	z-index:10;
	position:absolute;right:0;top:138px;
	width:37px;height:37px;
	background:#104bb9;
	color:#fff;
	line-height:37px;
	text-align:center;
	font-weight:bold;
	font-size:20px;
}
/* 텍스트형 */
#cpr1 .mContC.li2 .a1{color:#fff;background:#104bb9}
#cpr1 .mContC.li2 .w1{height:265px;}
#cpr1 .mContC.li2 .w1 .t1{height:230px;}
#cpr1 .mContC.li2 .s1p1{
	color:#104bb9;background:#fff;
	top:auto;bottom:0;
}
/* 고도화 */
/* #cpr1 .mContC .a1:focus{border:1px dotted #000;}
#cpr1 .mContC .a1:focus .f1{margin:-1px;} */
#cpr1 .mContC.on{}
/* .off */
#cpr1 .mContC.off{
	opacity:0;
}
#cpr1 .mContC.on,
#cpr1 .mContC[class*='-on']{
	opacity:1;
}
/* 메뉴 */
#cpr1 .menu{display:inline;} /* 위치기준안만듦 */
#cpr1 .menu .m{display:inline-block;position:relative;
	box-sizing:border-box; /* ☆ */
	margin:0;padding:0;border-radius:0;border:0;background:transparent;
	line-height:1;vertical-align:middle;
	cursor:pointer;overflow:visible;
}
#cpr1 .menu .m .ic1{display:inline-block;
	position:absolute;left:50%;top:50%;
	width:20px;height:20px;margin:-10px;
	background:url() no-repeat center center;background-size:contain;overflow:hidden;
}
/* 쪽수 */
#cpr1 .mPage{display:block;
	position:absolute;left:0;right:0;bottom:-10px;
	font-size:13px;
	text-align:center;
}
#cpr1 .mPage .text{display:inline-block;
	margin:0 0 -2px;
	padding:4px 10px;
	background:#000;
	color:#fff;
	border-radius:20px;
}
#cpr1 .mPage .text .total,
#cpr1 .mPage .text .on{
	font-weight:400;
}
#cpr1 .mPage .text .sep{
	margin:0 2px;
	color:#eee;
}
/* 제어 */
#cpr1 .mControl{display:block;
	z-index:20;
	position:absolute;left:0;right:0;bottom:-25px;
	height:0;
	margin:0;
	font-size:0;
	text-align:center;
}
#cpr1 .mControl .m{position:absolute;bottom:0;
	height:53px;
	border:0;
}
#cpr1 .mControl .m .ic1{display:inline-block;
	position:relative;left:auto;top:auto; /* [IE8]fix) .bsContain 있으면 position:relative; 되므로.. */
	width:53px;height:53px;
	margin:0;
	vertical-align:middle;
}
#cpr1 .mControl .prev{left:0;}
#cpr1 .mControl .next{right:0;}
#cpr1 .mControl .prev .ic1{background-image:url(../../img/main/ic106a1c1left1.png);}
#cpr1 .mControl .next .ic1{background-image:url(../../img/main/ic106a1c1right1.png);}
/* 페이지순번 */
#cpr1 .w{display:none;
	z-index:20;
	position:absolute;left:0;right:0;bottom:20px;
	height:0;
	font-size:0;
	text-align:center;
}
#cpr1 .mPageNum{display:inline-block;}
#cpr1 .mPageNum .m{display:inline-block;
	width:18px;height:18px;
	margin:0 3px;
	vertical-align:middle;
}
#cpr1 .mPageNum .m .ic1{display:block;
	position:absolute;
	left:auto;top:auto;margin:0;
	width:10px;height:10px;
	background:transparent;
	border:4px solid #aaa;
	border-radius:100%;

}
#cpr1 .mPageNum .m.on{
	width:24px;height:24px;
}
#cpr1 .mPageNum .m.on .ic1{
	width:100%;height:100%;
	border:0;
	background:url(../../img/main/ic24a1c1hexagon1.png) no-repeat;
}
#cpr1 .mControl2{display:inline-block;}
#cpr1 .mControl2 .m{display:inline-block;
	width:19px;height:19px;
}
#cpr1 .mControl2 .m .ic1{
	display:block;
	width:100%;height:100%;
	background:url() no-repeat;;
}
#cpr1 .mControl2 .play .ic1{background-image:url(../../img/main/ic38a1c0play1.png)}
#cpr1 .mControl2 .stop .ic1{background-image:url(../../img/main/ic38a1c0pause1.png)}




/* ◇◆ StyleName. YYYYMMDD. @Who	 ◇◆ */



/* RWD ◇◆◇◆◇◆◇◆◇◆◇◆ */
@media all and (min-width:400px){/* medium ◇◆◇◆◇◆◇◆◇◆ */
	#menu2{margin:-60px auto 0;}
}

@media all and (min-width:480px){/* medium ◇◆◇◆◇◆◇◆◇◆ */
	
	#menu2{margin:-70px auto 0;}

} /* /(min-width:480px) */
@media all and (min-width:670px){/* medium ◇◆◇◆◇◆◇◆◇◆ */
    #vpr1 .mView{padding:0 0 50%; }
	#menu2{margin:-40px auto 0;}

} /* /(min-width:670px) */
@media all and (min-width:768px){/* medium ◇◆◇◆◇◆◇◆◇◆ */


#vpr1 .wrap1{padding:0;}
#vpr1 .menu{bottom:60px;text-align:center;}
#vpr1 .menu .w1{display:inline-block;
	text-align:center;
	padding:0 50px 0 0;
	border-radius:20px;
	background:url(../../img/lib/b.000000.opacity.50.png)
}
#vpr1 .mControl{position:absolute;right:0;}
#vpr1 .mControl .m{display:block;border-radius:100%;}
#vpr1 .mNum .m.on .ic1{background:transparent;
	border:4px solid #fff;
	width:10px;height:10px;
}
#vpr1 .menu .m.on .t1{display:inline-block;margin:0 10px 0 0;}

#vpr1 .mView{padding:0 0 47.5%; }
#vpr1 .mContC .f1p1{margin:0 -50px;}

/* #menu2{margin:-40px auto 0;} */

#menu2 li>.a1{width: 20%;height:130px;padding:20px 0;}
#menu2 li.m4>.a1{width:20%;padding:0;height:170px}
#menu2 li>.a1:before{margin-top:100px;}
#menu2 li.m4>.a1 .ic1{
	position:absolute;left:50%;bottom:0;
	width:135px;height:101px;
	margin:0 0 0 -65px;
}
#menu2 li.m4>.a1:before{border-top:1px solid #fff;}

#menu2 li.m5>.a1{width: 20%;padding:0;height:170px}
#menu2 li.m5>.a1 .ic1{
	position:absolute;left:50%;bottom:0;
	width:135px;height:101px;
	margin:0 0 0 -65px;
}
#menu2 li.m5>.a1:before{border-top:1px solid #fff;}


#cpr1{margin:0;}
#cpr1 .h1>.ic1{width:412px;height:58px;background-image:url(../../img/main/cpr1title1.png)}
#cpr1 .mControl{margin:0;}
#cpr1 .mPage{display:none;}
#cpr1 .mView{margin:0 auto;}

} /* /(min-width:768px) */
@media all and (min-width:1000px){/* large ◇◆◇◆◇◆◇◆◇◆ */

#body .mainbody1>.container{
	max-width:none; /* ☆ */
	#vpr1 .mContC .f1p1{margin:0}
}

} /* /(min-width:1000px) */
@media all and (min-width:1260px){/* xlarge (1200+20*2+16+2*2) ◇◆◇◆◇◆◇◆◇◆ */


#head{position:absolute;left:0;right:0;top:0;height:100px;}

#wrap>.container,
#body>.container{
	width:auto; /* ☆ */
}

	#body .mainbody1>.container{
		width:auto;
		max-width:none;
		margin:auto;
	}
	#body .mainbody2>.container{padding:40px 0;}
	#body .mainbody3>.container{padding:40px 0 60px;}





#vpr1{width:100%;height:100%;}
#vpr1 .mView{padding:0 0 100%;}
/* #vpr1 .mContC .f1p1{margin:-100px 0 0 0;} */
#vpr1 .mContC .f1p1{margin:0 0 0 0;}
#vpr1 .menu{bottom:330px;}
#vpr1 .menu .m.on .t1{font-size:20px;}



#menu1{display:block;
	position:absolute;
	left:0;right:0;bottom:30px;/* bottom:0; */
	width:100%;height:260px;
}
#menu1:before{content:'';
	display:block;
	z-index:0;
	position:absolute;left:0;right:0;top:0;bottom:0;
	margin:0 auto;
	background:#e65d5d;
	width:1300px;height:100%;border-radius:10px;
	opacity:.85;
	transition:.4s; /* ☆ */
}
#menu1:hover:before{opacity:1;}
#menu1 .wrap1{
	display:
	block;
	position:
	relative;
	z-index:1;
	margin:0 auto;
	padding: 10px 0;
	width:1200px;
	overflow:
	hidden;
}
#menu1 .hg1{display:block;
	position:absolute;left:0;top:30px;
	width:283px;height:126px;
}
#menu1 .hg1>.ic1{display:block;
	width:100%;height:100%;
	background:url(../../img/main2/menu1hg1t1_2022.png) no-repeat;
}
#menu1 .d1{padding:0 0 0 340px;}
#menu1 .d1>ul>li{display:block;
	float:left;width:25%;
}
#menu1 .d1>ul>li>a{display:block;
	color:#fff;
	font-size:22px;
	font-weight:600;
	transition:.2s; /* ☆ */
}

#menu1 .d2{margin:10px 0 0}
#menu1 .d2>ul>li>a{display:
	block;
	color:#fff;
	font-size:17.5px;
	padding: 0;
	word-spacing:-1px;
	transition:.4s; /* ☆ */
}
#menu1 .d2>ul>li>a:before{
	content:
	'';
	display:
	inline-block;
	width:2px;height:2px;
	background:#fff;
	margin: 11px 0 0 0;
	vertical-align: top;
}
#menu1 .d2>ul>li>a[target='_blank']:after{ /* [IE8+] */
	content:'';
	display:inline-block;
	width:12px;height:12px;
	margin:0 0 4px 4px;
	background:url(../../img/inc/ic11newwindow.png) no-repeat;
	vertical-align:middle;
}
#menu1 .d1>ul>li:hover>a,
#menu1 .d1>ul>li:focus>a{color:#FDFF7B !important}
#menu1 .d2>ul>li>a:hover,
#menu1 .d2>ul>li>a:focus{text-decoration:underline;}

#menu2{overflow:visible;}
#menu2 ul{margin:0 -22px;}
#menu2 li{}
#menu2 li>.a1{width:235px !important;height:235px !important;
	border-radius:100%;
	padding:0 !important;
	overflow:hidden;
	margin:0 6px;
	transition:.4s; /* ☆ */
}
#menu2 li>.a1 .ic1{width:80px;height:80px;
	margin-top:40px;
}
#menu2 li>.a1 .t1{margin: 19px 0 2px;font-size: 20px;}
#menu2 li>.a1 .t2{display:block;}
#menu2 li>.a1:before{margin: 133px 0 0 -20px;width:40px}
#menu2 li.m4>.a1 .t1{margin: 60px 0 5px;}
#menu2 li.m4>.a1 .t2{margin-top: 5px;}
#menu2 li.m5>.a1 .t1{margin: 60px 0 5px;}
#menu2 li.m5>.a1 .t2{margin-top: 5px;}
#menu2 li>.a1:hover,
#menu2 li>.a1:focus{border-radius:20px;}

#menu2 li.m4>.a1:before{margin: 133px 0 0 -20px;}
#menu2 li.m5>.a1:before{margin: 133px 0 0 -20px;}


#cpr1{padding:0;}
#cpr1 .mCont{left:0}
#cpr1 .mContC{}
#cpr1 .mControl{margin:0;
	bottom:130px;
	left:87px;right:87px;
}
#cpr1 .mPage{display:none;}

/* ◇◆ Only Desktop ◇◆ */




} /* /(min-width:1260px) */

@media all and (min-width:1400px){
	#menu1{bottom:90px;
	/* bottom:0; */
	width:100%;
	height: 250px;
	}
} 

/* /RWD ◇◆◇◆◇◆◇◆◇◆◇◆ */


/* @-webkit-keyframes kfx1{} [CSS3]invalid)
 * [IE10+]
 */
@keyframes kfx1move1vertic1{
	0%{margin-bottom:40px;}
	50%{margin-bottom:60px;}
	100%{margin-bottom:40px;}
}
@keyframes kfx1move1vertic2{
	0%{transform: translateY(0);}
	50%{transform: translateY(2px);}
	100%{transform: translateY(0);}
}
@keyframes kfx1opacity1{
	0%{opacity:0;}
	100%{opacity:1;}
}