@CHARSET "UTF-8";

/* 1차 상단바 작업   by 안규태 사원 */
/* 2016 . 03 . 07 - am 10:36   */

 /* 상단 컨테이너 */
.top_container{
	top:0;
	width:100%;
	position:fixed;
	z-index:10;
	background-color: rgba( 255, 255, 255, 0.7 );
	height:80px;
	-webkit-transition: height 1s ease, background 1s ease; /* 높이에 대한 애니메이션 */
	-moz-transition: height 1s ease, background 1s ease;
	-ms-transition: height 1s ease, background 1s ease;
	-o-transition: height 1s ease, background 1s ease;
	transition: height 1s ease, background 1s ease;
	
}

 /* 상단 로고 */
.top_logo{
	width:180px;
	height:30px;
	
	opacity:1;
	margin-top:25px;	  /* 기본마진 20px (상단바 80px 일때 25px , 60px일때 15px) */
	margin-left:90px;
	float:left;
	
	background: url('../image/top/logo.png');
	background-size:180px 30px;
	
	-webkit-transition: height 1s ease, margin 1s ease; /* 높이에 대한 애니메이션 */
	-moz-transition: height 1s ease, margin 1s ease;
	-ms-transition: height 1s ease, margin 1s ease;
	-o-transition: height 1s ease, margin 1s ease;
	transition: height 1s ease, margin 1s ease;
}


/* 상단 메뉴 */
.top_section1{
	height:47px;
	
	margin-top:30px;	 
	margin-left:51%;
	float:left;
}

.top_section2{
	height:47px;
	
	margin-top:30px;
	margin-left:58px;
	float:left;
}

/* 상단 메뉴 오버효과 */
.top_ts a:hover{
	font-weight: bold;
	margin-top:30px;
	color:#116ec6;
}

.top_section1:hover{
	border-bottom: 3px solid #116ec6;
}

.top_section2:hover{
	border-bottom: 3px solid #116ec6;
}


/* 메뉴(모바일) */
.top_menu{
	width:30px;
	height:30px;
	margin-top:25px;
	float:left;
	
	position:absolute;
	right:20px;
	display:none;
	
	background:url("../image/top/menu1.png") ;
	background-size: 30px 30px;
	
	transition: transform 150ms ease;
}

.top_menu:hover{
	cursor: pointer;
}


/* 메뉴 클릭이벤트 */
.top_menu_over{  
	background:url("../image/top/menu2.png") ;
	background-size: 30px 30px;
}
.top_menu_out{
	background:url("../image/top/menu1.png") ;
	background-size: 30px 30px;
}

/* 모바일 네비 */
.top_mobile_navi{
	right:-300px;
	width:35%;
	height:265px;
	background:#333;
	color:white;
	position:absolute;
	top:80px;
	text-align:center;
	font-size:10pt;
	
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
	
	display:none;
	opacity:0.9;
}

.top_mobile_navi p{
	color:white;
	margin-top:30px;
}

.top_mobile_navi p a{
	color:white;
	cursor:pointer;
}

/* 공통 트랜지션 */
.top_ts{
	-webkit-transition: height 1s ease, margin 1s ease, transform 550ms ease; /* 높이에 대한 애니메이션 */
	-moz-transition: height 1s ease, margin 1s ease, transform 550ms ease;
	-ms-transition: height 1s ease, margin 1s ease, transform 550ms ease;
	-o-transition: height 1s ease, margin 1s ease, transform 550ms ease;
	transition: height 1s ease, margin 1s ease, transform 550ms ease;
}


/* 반응형 쿼리  */

@media (max-width:1700px){
	.top_section1{
		margin-left:45%;
	}
}

@media (max-width:1600px){
	.top_section1{
		margin-left:40%;
	}
}

@media (max-width:1500px){
	.top_section1{
		margin-left:35%;
	}
}

@media (max-width:1400px){
	.top_section1{
		margin-left:30%;
	}
}

@media (max-width:1300px){
	.top_section1{
		margin-left:25%;
	}
}

@media (max-width:1200px){
	.top_section1{
		margin-left:20%;
	}
}

@media (max-width:1100px){
	.top_section1{
		margin-left:12%;
	}
}

@media (max-width:901px){
	.top_section1{
		margin-left:7%;
	}
}

@media (max-width:900px){
	.top_section1{
		display:none;
	}
	.top_section2{
		display:none;
	}
	.top_menu{
		display:block;
	}
	
	.top_mobile_navi{
		display:block;
	}
}