@charset "utf-8";

/* ==========================================================================
   contents
   ========================================================================== */

/*메인*/
.main #header{background:none;border:none;-webkit-transition: background 2s; /* Safari */
    transition: background 2s;}
.main #header.add_bg{ -webkit-transition: background 2s; /* Safari */
    transition: background 2s;background:rgba(0,0,0,0.5)}
.main .head_util li:first-child a{background:url(../images/common/btn_menu.png) no-repeat 50% 50%;}
.main .head_util li:first-child + li a{background:url(../images/common/btn_twitter.png) no-repeat 50% 50%;}
.main .head_util li:first-child + li + li a{background:url(../images/common/btn_blog.png) no-repeat 50% 50%;}
.main #container{background:none;padding:0}
.main #content{margin:0}
.lt-ie8 .main{max-width:1600px;margin:0 auto}
.lt-ie8 .main #header{max-width:1600px}

.main #content{background:url(../images/main/bg_main_pt.gif) repeat-y fixed 50% 0;background-size:100% auto}
.slide_control{position:fixed;right:20px;top:50%;margin-top:-50px;z-index:98}
.slide_control > li > a{display:block;width:16px;height:16px;text-indent:-9999em;border:2px solid #999;border-radius:10px;margin:10px 0;background:none;}
.slide_control > li > a:hover, .slide_control > li > a:focus, .slide_control > li > a:active, .slide_control > li.active > a{background:#333;border-color:#333}
.slide_control.bs_white > li > a{border-color:#fff;background:none;opacity:0.7;filter:alpha(opacity=70);}
.slide_control.bs_white > li > a:hover, .slide_control.bs_white > li > a:focus, .slide_control.bs_white > li > a:active, .slide_control.bs_white > li.active > a{background:#fff;opacity:1;filter:alpha(opacity=100);}
.homeSlide{min-height:800px;}
.dataCont{position:relative;}
.bcg {
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	height: 100%;
	width: 100%;
	-webkit-transition: background 1s ease;
	-moz-transition: background 1s ease;
	-ms-transition: background 1s ease;
	-o-transition: background 1s ease;
	transition: background 1s ease;
}
.hsContainer{text-align:center;position:relative;height:100%;width:100%;overflow:hidden}
.hsTitle{color:#fff;position:absolute;top:20%;left:50%;width:684px;padding:10px 30px 30px;margin-left:-372px;}
.hsTitle h2{font-size:48px;letter-spacing:-0.05em;font-family:Arial;}
.hsTitle h2 > span{font-weight:900}
.hsTitle p{font-size:16px}
.read_more{position:absolute;bottom:60px;left:50%;margin-left:-80px;padding-bottom:80px;background:url('../images/main/bg_mouse_gr.png') no-repeat 50% 100%}

#slide-1 .bcg{background-image:url('../images/main/bg_main01.jpg');}
	#slide-1 .hsTitle{border:6px solid #fff;top:30%;}
	#slide-1 .read_more{background-image:url('../images/main/bg_mouse_wh.png');}
#slide-2 {position:relative}
#slide-2 .ctr_triangle{position:absolute;top:0;left:0;right:0;margin-top:-150px}
#slide-2 .ctr_triangle img{width:100%;height:300px}
	#slide-2 .hsTitle{top:16%}
	#slide-2 .hsTitle h2{color:#444}
	#slide-2 .hsTitle h2 > span{color:#1a92d7}
	#slide-2 .hsTitle p{color:#333;}
	#slide-2 .hsContent{}
	#slide-2 .hsContent > ul{width:780px;position:absolute;top:33%;left:50%;margin-left:-390px;overflow:visible}
	#slide-2 .hsContent > ul > li{float:left;margin:0 11px;background-image:url('../images/main/bg_list04.png');background-repeat: no-repeat;background-position:50% 100%;background-size:100%;position:relative;}
	#slide-2 .hsContent > ul > li:first-child, #slide-2 .hsContent > ul > li:first-child + li, #slide-2 .hsContent > ul > li:first-child + li + li{background-image:url('../images/main/bg_list_black.png');z-index:5}
	#slide-2 .hsContent > ul > li:first-child + li + li + li{margin:-110px 11px 0 140px}
	#slide-2 .hsContent > ul > li:first-child + li + li + li + li{margin-top:-110px}
	#slide-2 .hsContent > ul > li a{display:block;width:238px;height:138px;padding-top:100px;color:#333;}
	#slide-2 .hsContent > ul > li:first-child a{padding-top:137px;color:#fff;background:url('../images/main/ic_list01.png') no-repeat 50% 0;-webkit-transition: background 1s;transition: background 1s;}
	#slide-2 .hsContent > ul > li:first-child + li a{padding-top:137px;color:#fff;background:url('../images/main/ic_list02.png') no-repeat 50% 0;-webkit-transition: background 1s;transition: background 1s;}
	#slide-2 .hsContent > ul > li:first-child + li + li a{padding-top:137px;color:#fff;background:url('../images/main/ic_list03.png') no-repeat 50% 0;-webkit-transition: background 1s;transition: background 1s;}
	#slide-2 .hsContent > ul > li:first-child a:hover{background:url('../images/main/bg_list01.png') no-repeat 50% 100%;}
	#slide-2 .hsContent > ul > li:first-child + li a:hover{background:url('../images/main/bg_list02.png') no-repeat 50% 100%;}
	#slide-2 .hsContent > ul > li:first-child + li + li a:hover{background:url('../images/main/bg_list03.png') no-repeat 50% 100%;}

#slide-3{border-top:1px solid #ddd;background:#fff url('../images/main/bg_gray.gif') repeat-y 50% 0;overflow:hidden;min-height:440px;max-height:440px}
	#slide-3 > div{float:left;width:50%;text-align:center;padding:100px 0}
	#slide-3 > div > h2{font-size:1.8em;color:#444;padding-top:80px;background:url('../images/main/bg_slide0301.gif') no-repeat 50% 0;}
	#slide-3 > div > h2:hover, #slide-3 > div > h2:focus, #slide-3 > div > h2:active{/*-webkit-animation-name: shakeCont;animation-name: shakeCont;-webkit-animation-duration: 1s; animation-duration: 1s;*/}
	#slide-3 > div > p{padding-top:25px;color:#666}
	#slide-3 > div > p.m_view{font-size:24px;font-family:Arial;}
	#slide-3 > div > p.m_view + p{padding-top:6px}
	#slide-3 > div + div > h2{background-image:url('../images/main/bg_slide0302.gif')}

@keyframes shakeCont {
  0%, 100% {
    background-position:50% 0
  }

  10%, 30%, 50%, 70%, 90% {
    background-position:47% 0
  }

  20%, 40%, 60%, 80% {
    background-position:53% 0
  }
}
@-webkit-keyframes shakeCont {
  0%, 100% {
    background-position:50% 0
  }

  10%, 30%, 50%, 70%, 90% {
    background-position:47% 0
  }

  20%, 40%, 60%, 80% {
    background-position:53% 0
  }
}


/* ========================================================================== 
   ie fix
   ========================================================================== */



/* ==========================================================================
   Media Queries for Responsive Design.
   ========================================================================== */

@media only screen and (max-width: 900px) {
	
	.homeSlide{}
	.slide_control{display:none}
	.hsTitle{width:74%;padding:3%;left:10%;margin-left:0;}
	.hsTitle h2{line-height:1.2em;padding-bottom:0.4em;font-size:36px}
	.hsTitle h2 > span{display:block}

	#slide-1 {min-height:550px}
	#slide-1 .hsTitle{top:20%;}
	#slide-2 {min-height:920px}
	#slide-2 .hsContainer{height:920px;}
		#slide-2 .ctr_triangle{margin-top:-100px}
		#slide-2 .ctr_triangle img{width:100%;height:200px}
		#slide-2 .hsTitle{top:8%}
		#slide-2 .hsContent > ul{width:70%;top:26%;left:15%;margin:0}
		#slide-2 .hsContent > ul > li{float:none;margin:10px auto;background:#fff;font-family:NGB}
	/*	#slide-2 .hsContent > ul > li:first-child{padding:25px;background:#333 url('../images/main/bg_mlist01.gif') no-repeat 0 50%;background-size:auto 100%}
		#slide-2 .hsContent > ul > li:first-child + li{padding:25px;background:#333 url('../images/main/bg_mlist02.gif') no-repeat 0 50%;background-size:auto 100%;}
		#slide-2 .hsContent > ul > li:first-child + li + li{padding:25px;background:#333 url('../images/main/bg_mlist03.gif') no-repeat 0 50%;background-size:auto 100%;}*/
		#slide-2 .hsContent > ul > li:first-child + li + li + li{margin:10px auto;border:3px solid #000}
		#slide-2 .hsContent > ul > li:first-child + li + li + li + li{margin:10px auto;border:3px solid #000;}

		#slide-2 .hsContent > ul > li:first-child, #slide-2 .hsContent > ul > li:first-child + li, #slide-2 .hsContent > ul > li:first-child + li + li{background:#333 url('../images/main/bg_mlist.png') no-repeat -800px 50%;-webkit-transition: background 1s;transition: background 1s;background-size:initial } 
		#slide-2 .hsContent > ul > li:first-child:hover, #slide-2 .hsContent > ul > li:first-child + li:hover, #slide-2 .hsContent > ul > li:first-child + li + li:hover{background-position:100% 50% } 
		#slide-2 .hsContent > ul > li a{width:auto; height:auto;padding:20px 25px 20px 80px;}
		#slide-2 .hsContent > ul > li:first-child a{padding-top:20px;background-position:0 50%;}
		#slide-2 .hsContent > ul > li:first-child + li a{padding-top:20px;background-position:0 50%;}
		#slide-2 .hsContent > ul > li:first-child + li + li a{padding-top:20px;background-position:0 50%;}
		#slide-2 .hsContent > ul > li:first-child a:hover{background:url('../images/main/ic_list01.png') no-repeat 0 50%;}
		#slide-2 .hsContent > ul > li:first-child + li a:hover{background:url('../images/main/ic_list02.png') no-repeat 0 50%;}
		#slide-2 .hsContent > ul > li:first-child + li + li a:hover{background:url('../images/main/ic_list03.png') no-repeat 0 50%;}

	#slide-3{background:#fff;border-top:none;min-height:680px;max-height:680px;}
		#slide-3 > div{border-top:1px solid #ddd;float:none;width:100%;padding:50px 0}
		
}

@media only screen and (max-width: 526px) {
	
	.homeSlide{min-height:600px;}
	.hsTitle h2{font-size:28px}
	.hsTitle p{font-size:10px}

	.read_more{background-image:url('../images/main/bg_hand_gr.png');bottom:30px;background-size:auto 18px}
	#slide-1 .read_more{background-image:url('../images/main/bg_hand_wh.png');}
	#slide-2 {min-height:760px}
		#slide-2 .hsContainer{height:760px;}
		#slide-2 .hsContent > ul > li{font-size:11px}
		#slide-2 .hsContent > ul > li:first-child, #slide-2 .hsContent > ul > li:first-child + li, #slide-2 .hsContent > ul > li:first-child + li + li{background-position: -840px 50%;} 
		#slide-2 .hsContent > ul > li a{padding:15px 10px 15px 50px}
		#slide-2 .hsContent > ul > li:first-child a{padding-top:15px;background-position:-10px 50%;background-size:auto 100%}
		#slide-2 .hsContent > ul > li:first-child + li a{padding-top:15px;background-position:-10px 50%;background-size:auto 100%}
		#slide-2 .hsContent > ul > li:first-child + li + li a{padding-top:15px;background-position:-10px 50%;background-size:auto 100%}
		#slide-2 .hsContent > ul > li:first-child a:hover , #slide-2 .hsContent > ul > li:first-child + li a:hover, #slide-2 .hsContent > ul > li:first-child + li + li a:hover{background-position:-10px 50%;background-size:auto 100%}
}