﻿

.lefter {
	width:150px;
	height:100%;
	position:fixed;
	top:50px;
	left:50px;
   
}



/* HEXAGON STARTS HERE */
.hex {
	width:80px;
	height:45px;
	background-color: #ccc;
	background-repeat: no-repeat;
	background-position: 50% 50%;			
	-webkit-background-size: auto 173px;							
	-moz-background-size: auto 173px;							
	-ms-background-size: auto 173px;							
	-o-background-size: auto 173px;							
	position: relative;
	float:left;
	margin:25px 5px;
	text-align:center;
	zoom:1;
    margin-bottom:25px;
   
}
	
	.hex.hex-gap {
		margin-left: 0px;
	}
	
	.hex a {
		display:block;
		width: 100%;
		height:100%;
		text-indent:-9999em;
		position:absolute;
		top:0;
		left:0;
	}

	.hex .corner-1,
	.hex .corner-2 {
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		background: inherit;								
		z-index:-2;						
		overflow:hidden;
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		-o-backface-visibility: hidden;			
		backface-visibility: hidden;	
        		
	}
	
	.hex .corner-1 {
		z-index:-1;
		-webkit-transform: rotate(60deg);
		-moz-transform: rotate(60deg);
		-ms-transform: rotate(60deg);
		-o-transform: rotate(60deg);
		transform: rotate(60deg);
       
	}
	
	.hex .corner-2 {
		-webkit-transform: rotate(-60deg);
		-moz-transform: rotate(-60deg);
		-ms-transform: rotate(-60deg);
		-o-transform: rotate(-60deg);
		transform: rotate(-60deg);
        
	}
	
	.hex .corner-1:before,
	.hex .corner-2:before {
		width: 173px;
		height:	173px;
	  content: '';
	  position: absolute;
	  background: inherit;
	  top:0;
	  left: 0;
	  z-index: 1;
	  background: inherit;
	  background-repeat:no-repeat;
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		-o-backface-visibility: hidden;	
		backface-visibility: hidden;				  
	}			
	

	.hex .corner-1:before {
		-webkit-transform: rotate(-60deg) translate(-87px, 0px);
		-moz-transform: rotate(-60deg) translate(-87px, 0px);
		-ms-transform: rotate(-60deg) translate(-87px, 0px);
		-o-transform: rotate(-60deg) translate(-87px, 0px);
		transform: rotate(-60deg) translate(-87px, 0px);	
	  -webkit-transform-origin: 0 0;
	  -moz-transform-origin: 0 0;
	  -ms-transform-origin: 0 0;
	  -o-transform-origin: 0 0;
	  transform-origin: 0 0;
	}			
	
	.hex .corner-2:before {
		-webkit-transform: rotate(60deg) translate(-48px, -11px);
		-moz-transform: rotate(60deg) translate(-48px, -11px);
		-ms-transform: rotate(60deg) translate(-48px, -11px);
		-o-transform: rotate(60deg) translate(-48px, -11px);
		transform: rotate(60deg) translate(-48px, -11px);	
		bottom:0;
	}		


	
	/* Custom styles*/
	.hex .inner {		
		color:#eee;
	}
	
	
	
	.hex hr {
		border:0;
		border-top:1px solid #eee;
		width:60%;
		margin:15px auto;
	}
	
	.hex p {
		font-size:10px;
		font-family:'Microsoft YaHei', serif;
		width:80%;
		margin:0 auto;
        padding-top:3px;
	}

	.hex.hex-1 {
		background: #6CC6FF;
	}
	
	.hex.hex-2 {
		background: #1795E1;
	}
	
	.hex.hex-3 {
		background: #80b971;
	}

    .left_erweima{width:80px; background-color:#ccc;overflow:hidden; text-align:center;padding:4px;}

    .left_phone:hover{}
    .left_phone_box{ background-color:#1795E1;width:228px; height:90px;padding:10px;overflow:hidden;border-radius:0.7em; position:absolute;top:-24px; right:-250px;}