@charset "utf-8";

/* 메인페이지 스타일만 정의 */
.main .bg {
	z-index:-1; position:fixed; left:0; top:0; width:100%; height:100%;
	background:url(../images/slider/slider1.jpg)no-repeat center; background-size:cover;
}
.main .innerWrap {position:relative; width:100%; height:100%; min-height:800px; text-align:center; color:#fff;}
.main .innerWrap .slogan {position:relative;}
.main .innerWrap .slogan>span {text-transform:uppercase; font-family:"Abel"; letter-spacing:7px; opacity:.8; position:relative; display:inline-block;}
.main .innerWrap .slogan>span:before {content:""; position:absolute; top:-5px; left:-25px; display:block; width:6px; height:31px; background:url(../images/main/slogan_left.png)no-repeat center;}
.main .innerWrap .slogan>span:after {content:""; position:absolute; top:-5px; right:-25px; display:block; width:6px; height:31px; background:url(../images/main/slogan_right.png)no-repeat center;}
.main .innerWrap .slogan h2 {font-family:"NotoSansKR-Thin"; font-size:70px; font-weight:normal; color:#fff; line-height:1; letter-spacing:-2px;}
.main .innerWrap .slogan h2>span {font-size:70px; font-family:"NotoSansKR-Medium"; display:inline-block; width:100%; margin-top:20px;}
.main .innerWrap .slogan li {padding-top:250px;}
.main .innerWrap .slogan li a {
	color:#fff; border:2px solid #fff; display:inline-block; width:auto !important; height:auto !important;
	padding:10px 50px 10px 25px; line-height:1; font-size:20px; letter-spacing:0; margin-top:30px; background:url(../images/main/more_arrow.png)no-repeat 85px center; border-radius:20px;
}
.main .innerWrap .slogan li a:hover {background:rgba(255,255,255,.2) url(../images/main/more_arrow.png)no-repeat 85px center;}


/* 퀵배너 */
.main .quick {position:absolute; width:100%; bottom:150px;}
.main .quick ul {padding:0; margin:0; font-size:0; text-align:center;}
.main .quick ul li {display:inline-block; margin:0 15px; text-align:center; color:#fff;}
.main .quick a {
	position:relative; display:block; line-height:1; width:120px; height:120px; border-radius:50%; overflow:hidden;
	background:rgba(0,0,0,.3); background-repeat:no-repeat; background-position:center;
}
.main.ie .quick svg {display:none;}
.main.ie .quick a {background-color:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.1);}
.main.ie .quick a:hover {background-color:#02a58c;}
.main.ie .quick a:hover+span {color:#00d8b7;}

.main.ieNone .quick a circle {/* ie가 아닐 때 */
	fill: transparent;
	stroke: #02a58c;
	stroke-width:4;
	stroke-dasharray:534;
	stroke-dashoffset:537;
	transition: stroke-dashoffset 0.5s;
	-webkit-animation-play-state: paused;
	-moz-transform: rotate(-89deg) translateX(-190px); /* firefox bug fix - won't rotate at 90deg angles */
}
.ieNone .quick a circle:hover {stroke-dashoffset: 134 !important; -webkit-animation-play-state: running;}
.main .quick ul li:nth-child(1) a {background-image:url(../images/main/i_gis.png);}
.main .quick ul li:nth-child(2) a {background-image:url(../images/main/i_dro.png);}
.main .quick ul li:nth-child(3) a {background-image:url(../images/main/i_big.png);}
.main .quick ul li:nth-child(4) a {background-image:url(../images/main/i_bio.png);}
.main .quick ul li:nth-child(5) a {background-image:url(../images/main/i_pla.png);}
.main .quick ul li span {display:inline-block; width:100%; padding:5px; font-size:16px; letter-spacing:0;}


/* 게시물 */
.main .bar {position:absolute; bottom:0; overflow:hidden; width:100%; background:#fff; text-align:left; height:70px;}
.main .bar .inner {max-width:1200px; margin:0 auto;}
.main .bar .inner>div {float:left; width:50%; height:70px; padding-right:90px;}
.main .bar .inner>div>* {display:inline-block;}
.main .bar .inner>div h3 {font-family:"NotoSansKR-Medium"; font-size:14px; color:#089d81; padding-top:28px; width:20%;}
.main .bar .inner>div ul li a {
	width:77%; height:70px; line-height:70px;
	font-size:14px; color:#000;
	background:url(../images/common/dot_black.png)no-repeat 1px center; padding-left:10px;
	overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-right:100px; position:relative;
	margin-left:90px;
}
.main .bar .inner>div ul li a span {text-align:right; color:#999; letter-spacing:0; position:absolute; top:0; right:0;}
.main .bar .inner>div.obtain {padding-left:50px;}
.main .bar .inner>div.obtain ul li a {padding-left:60px; background-position-x:51px;}


.main .footer {clear:both; position:relative;}
.main #gotop {display:none;}


/* ************************ 태블릿 이하(~991) ************************ */
@media screen and (max-width: 991px) {
	
	/* body {border:3px solid yellow;} */
	
	.main .innerWrap .slogan h2,
	.main .innerWrap .slogan h2>span {font-size:60px;}
	.main .innerWrap .bar .inner>div {padding-left:30px !important; padding-right:30px !important;}
	.main .innerWrap .bar .inner>div.obtain {border-left:1px solid rgba(0,0,0,.05);}
	.main .innerWrap .bar .inner>div.obtain ul li a {background-position-x:31px !important; padding-left:40px !important;}
	.main .innerWrap .bar .inner>div ul li a {width:73% !important;}
	
	
}

/* ************************ 모바일 (0~767) ************************ */
@media screen and (max-width: 767px) {

	/* body {border:3px solid skyblue;} */
	
	.main .innerWrap {min-height:auto; padding-top:160px;}
	.main .innerWrap .slogan {height:280px;}
	.main .innerWrap .slogan li {padding-top:0; height:auto;}
	.main .innerWrap .slogan h2 {font-size:40px; padding:0 70px; word-break:keep-all;}
	.main .innerWrap .slogan h2>span {font-size:40px;}
	
	.main .quick {position:static; margin-top:10px;}
	
	.main .innerWrap .bar {overflow:initial; position:static; margin-top:50px;}
	.main .innerWrap .bar .inner>div {width:100%; overflow:hidden; padding-left:30px ! important; padding-right:15px !important;}
	.main .innerWrap .bar .inner>div.obtain {background:#fff; border-left:0; border-top:1px solid rgba(0,0,0,.05);}
	.main .innerWrap .bar .inner>div h3 {width:25%;}
	.main .innerWrap .bar .inner>div ul li a {background-position-x:31px !important; padding-left:40px !important; width:75% !important; padding-right:30px;}
	.main .innerWrap .bar .inner>div ul li a span {display:none;}
	.main .innerWrap .slogan li a {
		color:#fff; border:2px solid #fff; display:inline-block; width:auto !important; height:auto !important;
		padding:10px 50px 10px 25px; line-height:1; font-size:16px; letter-spacing:0; margin-top:30px; background:url(../images/main/more_arrow.png)no-repeat 85px center; border-radius:20px;
	}
	.main .innerWrap .slogan li a:hover {background:rgba(255,255,255,.2) url(../images/main/more_arrow.png)no-repeat 85px center;}
	.main .quick ul li span {font-size:14px;}
	
	.main .footer {background:#7f7f7f;}

}