a,a:hover,a:focus{ text-decoration:none; outline:none;}

.hole { position: relative; width: 420px; height: 420px; background: none; z-index: 300; }

.left_top_1 { position: relative; z-index: 40; width: 400px; height: 400px; background: none; border: 0px solid #c00; clip: rect(0,0,0,0px); border-radius: 200px; text-indent: -99999px; }
.left_top_2 { position: absolute; z-index: 41; left: 0px; top: 0; margin-left: 0px; margin-top: 0px; width: 200px; height: 200px; background: #1a1a1a; opacity: 0.66; clip: rect(0px,200px,200px,0px); border-radius: 200px 0px 0px 0px; }
.left_top_2:hover, .left_top_3:hover, .left_top_4:hover, .left_top_5:hover { background: #1a1a1a; opacity: 0.5; }
.left_top_2 a:hover, .left_top_3 a:hover, .left_top_4 a:hover, .left_top_5 a:hover font {transform:scale(1.1,1.1); -webkit-transform:scale(1.1,1.1); transition:all 0.4s linear;-ms-transition:all 0.4s linear;-moz-transition:all 0.4s linear;-webkit-transition:all 0.4s linear;-o-transition:all 0.4s linear;}
.left_top_2 a { width: 200px; height: 200px; float: left; left: 0px; top: 0px; font-family: 'Microsoft YaHei'; font-size: 18px; color: #fff; text-align: center; text-decoration: none;  }
.left_top_2 a font { width: 148px; height: 40px; float: left; margin: 80px 0 0 40px; font-family: 'Microsoft YaHei'; font-size: 18px; color: #fff; text-align: center; text-decoration: none; }

.left_top_3 { position: absolute; z-index: 42; right: -0px; top: 0; margin-left: 0px; margin-top: 0px; width: 200px; height: 200px; background: #1a1a1a; opacity: 0.66; clip: rect(0px,200px,200px,0px); border-radius: 0px 202px 0px 0px; }

.left_top_3 a { width: 200px; height: 200px; float: left; left: 0px; top: 0px; font-family: 'Microsoft YaHei'; font-size: 18px; color: #fff; text-align: center; text-decoration: none; }
.left_top_3 a font { width: 148px; height: 40px; float: left; margin: 80px 0 0 20px; font-family: 'Microsoft YaHei'; font-size: 18px; color: #fff; text-align: center; text-decoration: none; }



.left_top_4 { position: absolute; z-index: 43; width: 200px; height: 200px; opacity: 0.66; right: 0px; top: 200px; background: #1a1a1a; clip: rect(0px,200px,200px,0px); border-radius: 0px 0px 202px 0px; }
.left_top_4 a { width: 200px; height: 200px; float: left; left: 0px; top: 0px; font-family: 'Microsoft YaHei'; font-size: 18px; color: #fff; text-align: center; text-decoration: none; }
.left_top_4 a font { width: 148px; height: 40px; float: left; margin: 80px 0 0 20px; font-family: 'Microsoft YaHei'; font-size: 18px; color: #fff; text-align: center; text-decoration: none; }


.left_top_5 { position: absolute; z-index: 44; left: 0; top: 200px; width: 200px; height: 200px; background: #1a1a1a; opacity: 0.66; clip: rect(0px,200px,200px,-2px); border-radius: 0px 0px 0px 207px; }

.left_top_5 a { width: 200px; height: 200px; float: left; left: 0px; top: 0px; font-family: 'Microsoft YaHei'; font-size: 18px; color: #fff; text-align: center; text-decoration: none; }
.left_top_5 a font { width: 148px; height: 40px; float: left; margin: 80px 0 0 40px; font-family: 'Microsoft YaHei'; font-size: 18px; color: #fff; text-align: center; text-decoration: none; }


/*--------------------------------------------------------------------------------------------*/


/*上面的是 4个椭圆的*/
/*导航外层div设为圆形*/

.css-transforms{position:relative; z-index:200;}

.css-transforms .menu-wrapper { overflow: hidden; zoom: 1; position: relative; z-index:105; width: 660px; height: 660px; margin:0; float:left; border-radius: 50%; background: transparent; pointer-events: auto; border: 0px solid #fff; }

/*覆盖a标签的内侧靠近圆心的部分, 避免鼠标点击事件*/
.css-transforms .menu-wrapper:after { color: transparent; content: "."; display: block; position: absolute; z-index: 200; left: 50%; top: 50%; margin-left: -80px; margin-top: -80px; width: 159px; height: 159px; background: url(../images/fuw1.png) no-repeat center center; }
.css-transforms .menu-wrapper{position:relative; z-index:120;}
 
.css-transforms .menu-wrapper li { position: relative; z-index: 40; top: 0px; left: 0px; overflow: hidden; width: 330px; height: 330px; transform-origin: 100% 100%; transform: skew(0deg) rotate(0deg) scale(0); pointer-events: none; }
.css-transforms .menu-wrapper li:hover{opacity:0.8; background:#000;}

/*a标签反倾斜角度为-(90-x),旋转角度为-x,x为我们想要的圆心角,在这个demo里,有8个列表项,半圆,得出圆心角为60*/
.css-transforms .menu-wrapper li a { position: absolute; z-index: 30; right: -10px; bottom: -10px; display: block; width: 450px; height: 450px; font-family: 'Microsoft YaHei'; font-size: 16px; color: #fff; text-align: center; text-decoration: none; /*先斜切后旋转,不可颠倒*/ transform: skew(0deg) rotate(0deg) scale(1); pointer-events: auto; }

/*.css-transforms .menu-wrapper li a span { width: 140px; display: block; }*/

/*列表项倾斜角度为90-x,每个列表项的旋转角度依次间隔 >2 */
.css-transforms .menu-wrapper li:first-child { transform: rotate(0deg) skew(46deg); position: absolute; z-index: 43; }
.css-transforms .menu-wrapper li:nth-child(2) { transform: rotate(45deg) skew(46deg); position: absolute; z-index: 43; }
.css-transforms .menu-wrapper li:nth-child(3) { transform: rotate(90deg) skew(46deg); position: absolute; z-index: 43; }
.css-transforms .menu-wrapper li:nth-child(4) { transform: rotate(135deg) skew(46deg); position: absolute; z-index: 43; }
.css-transforms .menu-wrapper li:nth-child(5) { transform: rotate(180deg) skew(46deg); position: absolute; z-index: 43; }
.css-transforms .menu-wrapper li:nth-child(6) { transform: rotate(225deg) skew(46deg); position: absolute; z-index: 43; }
.css-transforms .menu-wrapper li:nth-child(7) { transform: rotate(270deg) skew(46deg); position: absolute; z-index: 43; }
.css-transforms .menu-wrapper li:nth-child(8) { transform: rotate(315deg) skew(46deg); position: absolute; z-index: 43; }



/*.css-transforms .menu-wrapper li a span { display: block; position: absolute; background:#ff6a00;   }*/
.css-transforms .menu-wrapper li:first-child a { position: absolute; background: radial-gradient(transparent 0%, #1a1a1a 0%); transform: rotate(0deg); opacity: 0.39; }
.css-transforms .menu-wrapper li:nth-child(2) a { background: radial-gradient(transparent 0%, #1a1a1a 0%); opacity: 0.39; }
.css-transforms .menu-wrapper li:nth-child(3) a { background: radial-gradient(transparent 0%, #1a1a1a 0%); opacity: 0.39; }
.css-transforms .menu-wrapper li:nth-child(4) a { background: radial-gradient(transparent 0%, #1a1a1a 0%); opacity: 0.39; }
.css-transforms .menu-wrapper li:nth-child(5) a { background: radial-gradient(transparent 0%, #1a1a1a 0%); opacity: 0.39; }
.css-transforms .menu-wrapper li:nth-child(6) a { background: radial-gradient(transparent 0%, #1a1a1a 0%); opacity: 0.39; }
.css-transforms .menu-wrapper li:nth-child(7) a { background: radial-gradient(transparent 0%, #1a1a1a 0%); opacity: 0.39; }
.css-transforms .menu-wrapper li:nth-child(8) a { background: radial-gradient(transparent 0%, #1a1a1a 0%); opacity: 0.39; }



.css-transforms .css_text{  float:left; position:absolute; z-index:100;  background:transparent; }


.css-transforms .css_text a.sp01 { width: 130px; height: auto; float: left; position: absolute; z-index: 45; left:26px; top: 220px; font-family: 'Microsoft YaHei'; font-size: 16px; color: #fff; line-height: 50px; text-align: center; font-weight: normal;  text-decoration:none; transition:all 0.4s linear;
-ms-transition:all 0.4s linear;
-moz-transition:all 0.4s linear;
-webkit-transition:all 0.4s linear;
-o-transition:all 0.4s linear;}

.css-transforms .css_text a:hover.sp01 {transform:scale(1.1,1.1); -webkit-transform:scale(1.1,1.1); transition:all 0.4s linear;-ms-transition:all 0.4s linear;-moz-transition:all 0.4s linear;-webkit-transition:all 0.4s linear;-o-transition:all 0.4s linear;}

.css-transforms .css_text a.sp02 { width: 120px; height: auto; float: left; position: absolute; z-index: 45; left: 170px; top: 80px; font-family: 'Microsoft YaHei'; font-size: 16px; color: #fff; line-height: 50px; text-align: center; font-weight: normal;text-decoration:none; transition:all 0.4s linear;
-ms-transition:all 0.4s linear;
-moz-transition:all 0.4s linear;
-webkit-transition:all 0.4s linear;
-o-transition:all 0.4s linear;}

.css-transforms .css_text a:hover.sp02 {transform:scale(1.1,1.1); -webkit-transform:scale(1.1,1.1); transition:all 0.4s linear;-ms-transition:all 0.4s linear;-moz-transition:all 0.4s linear;-webkit-transition:all 0.4s linear;-o-transition:all 0.4s linear;}
.css-transforms .css_text a.sp03 { width: 145px; height: auto; float: left; position: absolute; z-index: 45; left:370px; top: 80px; font-family: 'Microsoft YaHei'; font-size: 16px; color: #fff; line-height: 50px; text-align: center; font-weight: normal; text-decoration:none; transition:all 0.4s linear;
-ms-transition:all 0.4s linear;
-moz-transition:all 0.4s linear;
-webkit-transition:all 0.4s linear;
-o-transition:all 0.4s linear;}

.css-transforms .css_text a:hover.sp03 {transform:scale(1.1,1.1); -webkit-transform:scale(1.1,1.1); transition:all 0.4s linear;-ms-transition:all 0.4s linear;-moz-transition:all 0.4s linear;-webkit-transition:all 0.4s linear;-o-transition:all 0.4s linear;}

.css-transforms .css_text a.sp04 { width: 136px; height: 40px; float: left; position: absolute; z-index: 45; left: 510px; top: 200px; font-family: 'Microsoft YaHei'; font-size: 16px; color: #fff; line-height: 50px; text-align: center; font-weight: normal;   text-decoration:none; transition:all 0.4s linear;
-ms-transition:all 0.4s linear;
-moz-transition:all 0.4s linear;
-webkit-transition:all 0.4s linear;
-o-transition:all 0.4s linear;}

.css-transforms .css_text a:hover.sp04 {transform:scale(1.1,1.1); -webkit-transform:scale(1.1,1.1); transition:all 0.4s linear;-ms-transition:all 0.4s linear;-moz-transition:all 0.4s linear;-webkit-transition:all 0.4s linear;-o-transition:all 0.4s linear;}

.css-transforms .css_text a.sp05 { width: 114px; height: auto; float: left; position: absolute; z-index: 45; left:510px; top:  410px; font-family: 'Microsoft YaHei'; font-size: 16px; color: #fff; line-height: 30px; text-align: center; font-weight: normal;   text-decoration:none; transition:all 0.4s linear;
-ms-transition:all 0.4s linear;
-moz-transition:all 0.4s linear;
-webkit-transition:all 0.4s linear;
-o-transition:all 0.4s linear;}

.css-transforms .css_text a:hover.sp05 {transform:scale(1.1,1.1); -webkit-transform:scale(1.1,1.1); transition:all 0.4s linear;-ms-transition:all 0.4s linear;-moz-transition:all 0.4s linear;-webkit-transition:all 0.4s linear;-o-transition:all 0.4s linear;}
.css-transforms .css_text a.sp06 { width: 161px; height: auto; float: left; position: absolute; z-index: 45; left: 360px; top:540px; font-family: 'Microsoft YaHei'; font-size: 16px; color: #fff; line-height:30px; text-align: center; font-weight: normal;   text-decoration:none; transition:all 0.4s linear;
-ms-transition:all 0.4s linear;
-moz-transition:all 0.4s linear;
-webkit-transition:all 0.4s linear;
-o-transition:all 0.4s linear;}

.css-transforms .css_text a:hover.sp06 {transform:scale(1.1,1.1); -webkit-transform:scale(1.1,1.1); transition:all 0.4s linear;-ms-transition:all 0.4s linear;-moz-transition:all 0.4s linear;-webkit-transition:all 0.4s linear;-o-transition:all 0.4s linear;}

.css-transforms .css_text a.sp07 { width: 87px; height: auto; float: left; position: absolute; z-index: 45; left:170px; top:  540px; font-family: 'Microsoft YaHei'; font-size: 16px; color: #fff; line-height: 30px; text-align: center; font-weight: normal; text-decoration:none; transition:all 0.4s linear;
-ms-transition:all 0.4s linear;
-moz-transition:all 0.4s linear;
-webkit-transition:all 0.4s linear;
-o-transition:all 0.4s linear;}

.css-transforms .css_text a:hover.sp07 {transform:scale(1.1,1.1); -webkit-transform:scale(1.1,1.1); transition:all 0.4s linear;-ms-transition:all 0.4s linear;-moz-transition:all 0.4s linear;-webkit-transition:all 0.4s linear;-o-transition:all 0.4s linear;}

.css-transforms .css_text a.sp08 { width: 93px; height: auto; float: left; position: absolute; z-index: 45; left: 50px; top: 410px; font-family: 'Microsoft YaHei'; font-size: 16px; color: #fff; line-height: 30px; text-align: center; font-weight: normal;   text-decoration:none; transition:all 0.4s linear;
-ms-transition:all 0.4s linear;
-moz-transition:all 0.4s linear;
-webkit-transition:all 0.4s linear;
-o-transition:all 0.4s linear;}

.css-transforms .css_text a:hover.sp08 {transform:scale(1.1,1.1); -webkit-transform:scale(1.1,1.1); transition:all 0.4s linear;-ms-transition:all 0.4s linear;-moz-transition:all 0.4s linear;-webkit-transition:all 0.4s linear;-o-transition:all 0.4s linear;}


/*不支持css3*/
.no-transforms .menu-wrapper { margin: 10em auto; overflow: hidden; text-align: center; padding: 1em; border: 1px solid #000; }
.no-transforms .menu-wrapper ul { display: inline-block; }
.no-transforms li { width: 120px; height: 50px; float: left; line-height: 50px; text-align: center; margin-right: 20px; background-color: #fff; /*border: 1px solid red;*/ }
.no-transforms li a { display: block; height: 100%; width: 100%; line-height: 50px; text-decoration: none; color: #fff; }
.no-transforms .menu-wrapper li a span { display: block; }
.no-transforms .menu-wrapper li a img { display: none; }
.no-transforms li a.first { background-color: #e88503; }
.no-transforms li a.second { background-color: #b40303; }
.no-transforms li a.last { background-color: #028b09; }
.no-transforms .menu-wrapper li a:hover,
.no-transforms .menu-wrapper li a:active,
.no-transforms .menu-wrapper li a:focus { -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); }