/*-- t_093 start --*/

	
	.con-pad-box { padding: 0 4.5rem;}	
	
	/* index */
	#index { background: top; background-size: cover; margin-top: 250px; }
		.index-top-con { position: relative; width: 1240px; margin: 0 auto;}
			.index-top-con> svg { margin-top: -180px;}
			.index-top-text { position: absolute; color: #fff; width: 33%; padding: 3rem 0; top: 0; right: 0;}
		.index-bottom-con { position: relative; margin-top: -170px; top: -6rem;}
			.index-bottom-con .con-box { color: #fff; margin-right: 50%; padding-left: 2rem;}
			
		.index-map { width: 1240px; margin: 0 auto; margin-top: -245px;}
			.index-map text { fill: #fff; }
	
	.show-in-up, .show-in-right, .show-in-down, .show-in-left { position: relative; opacity: 0; transition: all .5s;}	
		
	.show-in-up { transform: translateY(-40px);} 
	.show-in-right { transform: translateX(40px);} 
	.show-in-down { transform: translateY(40px);}
	.show-in-left { transform: translateX(-40px);}
	
	.in .show-in-up,
	.in .show-in-down { transform: translateY(0); opacity: 1;}
	.in .show-in-right,
	.in .show-in-left { transform: translateX(0); opacity: 1;}
	
	.show-line.i { stroke-dasharray: 1500; animation: line-dash-desc-i 1s ease-in-out forwards;}
	
	.in .show-line.i { stroke-dasharray: 1500; stroke-dashoffset: 1500;}
	
	.mobile-text { display: none; text-align: center; color: #fff; line-height: 1.5; padding: 2rem 0;}
		.mobile-text li { display: inline-block; margin: .5rem; padding: 1rem 0; width: 100px; border: 3px solid #5e8991;}
		.mobile-text span { display: block; font-size: .8rem;}
	
	@keyframes line-dash-desc-i {
	  to {
		  stroke-dashoffset: 1500;
	  }
	}
		
	/* service */
	#service { background-color: #5e8991; color: #fff;}
		.service-top-con { position: relative; padding: 4rem 4rem 0 8rem; margin-left: 50%; z-index: 2;}
			.service-top-con h2 { margin-bottom: 1rem;}
		.service-bottom-con { padding: 4rem 2rem; margin-bottom: 2.5rem;} 
		
		.service-map { position: relative; width: 1160px; margin: 0 auto; margin-top: -286px; font-size: 1.2rem;}
			.service-map text { fill: #fff;}
		
		.service-t-btns { transition: all .3s;}	
		.service-t-btns:hover { fill: cyan; transform: translate(365px,345px);}
			
	.show-line {
		stroke-dasharray: 850;
		stroke-dashoffset: 0;
		animation: line-dash-desc 1s ease-in-out forwards;
	}
	
	.in .show-line {
		stroke-dasharray: 850;
		stroke-dashoffset: 850;
		animation: line-dash 1s ease-in-out forwards;
	}
	
	@keyframes line-dash-desc {
	  to {
		  stroke-dashoffset: 850;
	  }
	}
	
	@keyframes line-dash {
	  to {
		  stroke-dashoffset: 0;
	  }
	}
	
	.show-in {
		animation: opacity-out .8s forwards;
	}
	.in .show-in {
		opacity: 0;
		animation: opacity-in .8s forwards;
	}
	@keyframes opacity-out {
		to {
			opacity: 0;
		}
	}
	@keyframes opacity-in {
		to {
			opacity: 1;
		}
	}
	
@media (max-width:1500px){
	.index-top-con, .index-map, .service-map { width: 950px;}
	
	#animate svg { width: 100%; height: auto;}
	#index { margin-top: 160px}
	.index-map { margin-top: -185px;}
	.index-top-con> svg { margin-top: -138px;}
	
	.index-top-text { width: 50%; padding-left: 3rem;}
	
	.index-bottom-con { top: -1rem;}
	.index-bottom-con .con-box { }
	
	
}

@media (max-width:1200px){
	.con-pad-box { padding: 0 2rem;}
	
	.index-top-con, .index-map, .service-map { width: 100%;}
	#index { margin-top: 100px;  padding-bottom: 4rem; margin-bottom: 2rem;}
	
	.index-map {  margin-top: 0;}

	.index-top-con { text-align: center;}
	.index-top-con svg { display: none;}
		.index-top-con:before { content: url(../images/icon/icon-logo.svg); padding: 2rem 0; display: block;}
		
		.index-top-text { position: relative; text-align: left; width: auto; padding: 1rem; }
		
		
		.index-bottom-con { top: 0; margin: 0 1rem; border: 3px solid #fff; padding: 1rem; }
		.index-bottom-con .con-box { padding: 0; margin-right: 0;}
	
	.index-map svg { display: none;}
	.mobile-text { display: block;}
	
		
	.service-top-con { margin: 0; padding: 2rem 0; text-align: center;}
		.service-top-con .con-box { text-align: center;}
		
		.service-map { margin-top: 0;}
}

@media (max-width: 768px){
	.con-pad-box { padding: 0 1rem;}
	.index-top-con, .index-map, .service-map { width: 100%;}
	
	.index-bottom-con { width: auto; }
	
	.index-bottom-con { }
	
	#index { margin-top: 4rem; padding-bottom: 2rem;}
	
	
}
	
	
/*-- t_093 end --*/