@charset "utf-8";
body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input {margin:0;padding:0;-webkit-text-size-adjust: none}
h1, h2, h3, h4, h5, h6{font-size:12px;font-weight:normal}
body>div{margin:0 auto}
div {text-align:left}
a img {border:0}
body { color: #333; text-align: center; font: 12px "宋体"; }
ul, ol, li {list-style-type:none;vertical-align:0}
a {outline-style:none;color:#535353;text-decoration:none}
a:hover { color: #D40000; text-decoration: none}
.clear{clear:both; height:0; overflow:hidden}
.button {display: inline-block;zoom: 1; *display: inline;vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 14px/100% Arial, Helvetica, sans-serif;padding:0.25em 0.6em 0.3em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em; -moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.red {color: #faddde;border: solid 1px #980c10;background: #d81b21;background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#A51715));background: -moz-linear-gradient(top,  #ed1c24,  #A51715);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.red:hover { background: #b61318; background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115)); background: -moz-linear-gradient(top,  #c9151b,  #a11115); filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115'); color:#fff;}
.red:active {color: #de898c;background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));background: -moz-linear-gradient(top,  #aa1317,  #ed1c24);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');}
.cor_bs,.cor_bs:hover{color:#ffffff;}
/* 效果CSS开始 */
.tips { width: 702px; margin: 0 auto; line-height: 24px; padding-top: 10px; }
.bredcolor { color: #fff; }
.menuHolder { width: 100px; height: 100px; margin: 0px 0 250px 0px; position: relative; z-index: 100; }
.menuHolder ul { padding: 0; margin: 0; list-style: none; position: absolute; left: 0; top: 0; width: 0; height: 0; }
.menuHolder ul li { border-radius: 0 0 300px 0; width: 0; height: 0; }
.menuHolder ul li a { color: #000; text-decoration: none; font: bold 13px/30px arial, sans-serif; text-align: center; box-shadow: -5px 5px 5px rgba(0,0,0,0.4); -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; }
.menuHolder ul.p1 li { position: absolute; left: 0; top: 0; }
.menuHolder ul.p2 { z-index: -1; }
.menuHolder ul.p3 { z-index: -1; }
.menuHolder li.s1 > a { position: absolute; display: block; width: 100px; height: 100px; background: #c8c8c8; border-radius: 0 0 100px 0; }
.menuHolder li.s2 > a { position: absolute; display: block; width: 100px; padding-left: 100px; height: 200px; background: #ddd; border-radius: 0 0 200px 0; }
.menuHolder ul.p3 li a { position: absolute; display: block; width: 100px; padding-left: 200px; height: 300px; background: #999; border-radius: 0 0 300px 0; }
.menuHolder ul ul { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotate(90deg); -moz-transform: rotateZ(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transition: 1s; -moz-transition: 1s; -ms-transition: 1s; -o-transition: 1s; transition: 1s; }
.menuHolder li.s2:nth-of-type(6) > a { background: #888; -webkit-transform: rotate(75deg); -moz-transform: rotateZ(75deg); -ms-transform: rotate(75deg); -o-transform: rotate(75deg); transform: rotate(75deg); }
.menuHolder li.s2:nth-of-type(5) > a { background: #999; -webkit-transform: rotate(60deg); -moz-transform: rotateZ(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); }
.menuHolder li.s2:nth-of-type(4) > a { background: #aaa; -webkit-transform: rotate(45deg); -moz-transform: rotateZ(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
.menuHolder li.s2:nth-of-type(3) > a { background: #bbb; -webkit-transform: rotate(30deg); -moz-transform: rotateZ(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); }
.menuHolder li.s2:nth-of-type(2) > a { background: #ccc; -webkit-transform: rotate(15deg); -moz-transform: rotateZ(15deg); -ms-transform: rotate(15deg); -o-transform: rotate(15deg); transform: rotate(15deg); }
.menuHolder .a6 li:nth-of-type(6) > a { background: #444; -webkit-transform: rotate(75deg); -moz-transform: rotateZ(75deg); -ms-transform: rotate(75deg); -o-transform: rotate(75deg); transform: rotate(75deg); }
.menuHolder .a6 li:nth-of-type(5) > a { background: #555; -webkit-transform: rotate(60deg); -moz-transform: rotateZ(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); }
.menuHolder .a6 li:nth-of-type(4) > a { background: #666; -webkit-transform: rotate(45deg); -moz-transform: rotateZ(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
.menuHolder .a6 li:nth-of-type(3) > a { background: #777; -webkit-transform: rotate(30deg); -moz-transform: rotateZ(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); }
.menuHolder .a6 li:nth-of-type(2) > a { background: #888; -webkit-transform: rotate(15deg); -moz-transform: rotateZ(15deg); -ms-transform: rotate(15deg); -o-transform: rotate(15deg); transform: rotate(15deg); }
.menuHolder .a5 li:nth-of-type(5) > a { background: #555; -webkit-transform: rotate(72deg); -moz-transform: rotateZ(72deg); -ms-transform: rotate(72deg); -o-transform: rotate(72deg); transform: rotate(72deg); }
.menuHolder .a5 li:nth-of-type(4) > a { background: #666; -webkit-transform: rotate(54deg); -moz-transform: rotateZ(54deg); -ms-transform: rotate(54deg); -o-transform: rotate(54deg); transform: rotate(54deg); }
.menuHolder .a5 li:nth-of-type(3) > a { background: #777; -webkit-transform: rotate(36deg); -moz-transform: rotateZ(36deg); -ms-transform: rotate(36deg); -o-transform: rotate(36deg); transform: rotate(36deg); }
.menuHolder .a5 li:nth-of-type(2) > a { background: #888; -webkit-transform: rotate(18deg); -moz-transform: rotateZ(18deg); -ms-transform: rotate(18deg); -o-transform: rotate(18deg); transform: rotate(18deg); }
.menuHolder .a3 li:nth-of-type(3) > a { background: #777; -webkit-transform: rotate(60deg); -moz-transform: rotateZ(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); }
.menuHolder .a3 li:nth-of-type(2) > a { background: #888; -webkit-transform: rotate(30deg); -moz-transform: rotateZ(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); }
.menuHolder li.s1:hover ul.p2 { -webkit-transform: rotate(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); }
.menuHolder li.s2:hover ul.p3 { -webkit-transform: rotate(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); }
.menuHolder ul li:hover > a { background: #f00; color: #fff; }
.menuHolder li.s2:hover > a { background: #d00; color: #fff; }
.menuHolder .a6 li:hover > a { background: #b00; color: #fff; }
.menuHolder .a5 li:hover > a { background: #b00; color: #fff; }
.menuHolder .a3 li:hover > a { background: #b00; color: #fff; }
.menuWindow { width: 110px; height: 110px; overflow: hidden; position: absolute; left: 0; top: 0; z-index: 100; -webkit-transition: 0s 1s; -moz-transition: 0s 1s; -ms-transition: 0s 1s; -o-transition: 0s 1s; transition: 0s 1s; }
.menuHolder:hover .menuWindow { width: 310px; height: 310px; -webkit-transition: 0s 0s; -moz-transition: 0s 0s; -ms-transition: 0s 0s; -o-transition: 0s 0s; transition: 0s 0s; }
.menuHolder span { display: block; -webkit-transform: rotate(5deg); -moz-transform: rotateZ(5deg); -ms-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg); }
.menuHolder ~ img.close { width: 0; height: 0; position: fixed; z-index: -1; left: 0; top: 0; }
.menuHolder:hover ~ img.close { width: 100%; height: 100%; }
/* 效果CSS结束 */