* {
 box-sizing:border-box;
}
.fleft {
 float:left;
}
.fright {
 float:right;
}
.after::after {
 content:'';
 display:block;
 clear:both;
}
.all-center-a,
.creature>div>span,
.circle-container span>i::before,
#clover_container li div,
#clover_container li span>img::before {
 position:absolute;
 top:50%;
 left:50%;
 -webkit-transform:translate(-50%,-50%);
 -moz-transform:translate(-50%,-50%);
 -ms-transform:translate(-50%,-50%);
 transform:translate(-50%,-50%);
}
.x-center-a,
.circle-container span strong,
#circle_navigate,
#circle_h,
.pattern-style-1,
.pattern-style-2,
.pattern-style-3,
.oval-container .oval-inner,
#clover_container li span strong {
 position:absolute;
 left:50%;
 -webkit-transform:translateX(-50%);
 -moz-transform:translateX(-50%);
 -ms-transform:translateX(-50%);
 transform:translateX(-50%);
}
.x-center-r {
 position:relative;
 left:50%;
 -webkit-transform:translateX(-50%);
 -moz-transform:translateX(-50%);
 -ms-transform:translateX(-50%);
 transform:translateX(-50%);
}
.y-center-a {
 position:absolute;
 top:50%;
 -webkit-transform:translateY(-50%);
 -moz-transform:translateY(-50%);
 -ms-transform:translateY(-50%);
 transform:translateY(-50%);
}
.y-center-r {
 position:relative;
 top:50%;
 -webkit-transform:translateY(-50%);
 -moz-transform:translateY(-50%);
 -ms-transform:translateY(-50%);
 transform:translateY(-50%);
}
.flip-h {
 -moz-transform:scaleX(-1);
 -o-transform:scaleX(-1);
 -webkit-transform:scaleX(-1);
 transform:scaleX(-1);
 filter:FlipH;
 -ms-filter:"FlipH";
}
.sudden {
 -moz-transition:all 0s ease !important;
 -o-transition:all 0s ease !important;
 -webkit-transition:all 0s ease !important;
 transition:all 0s ease !important;
}
.sudden * {
 -moz-transition:all 0s ease !important;
 -o-transition:all 0s ease !important;
 -webkit-transition:all 0s ease !important;
 transition:all 0s ease !important;
}
@-webkit-keyframes upDown {
 0% {
  margin-top:-20px;
 }
 100% {
  margin-top:20px;
 }
}
@-moz-keyframes upDown {
 0% {
  margin-top:-20px;
 }
 100% {
  margin-top:20px;
 }
}
@-o-keyframes upDown {
 0% {
  margin-top:-20px;
 }
 100% {
  margin-top:20px;
 }
}
@-ms-keyframes upDown {
 0% {
  margin-top:-20px;
 }
 100% {
  margin-top:20px;
 }
}
@keyframes upDown {
 0% {
  margin-top:-20px;
 }
 100% {
  margin-top:20px;
 }
}
@-webkit-keyframes downUp {
 0% {
  margin-top:20px;
 }
 100% {
  margin-top:-20px;
 }
}
@-moz-keyframes downUp {
 0% {
  margin-top:20px;
 }
 100% {
  margin-top:-20px;
 }
}
@-o-keyframes downUp {
 0% {
  margin-top:20px;
 }
 100% {
  margin-top:-20px;
 }
}
@-ms-keyframes downUp {
 0% {
  margin-top:20px;
 }
 100% {
  margin-top:-20px;
 }
}
@keyframes downUp {
 0% {
  margin-top:20px;
 }
 100% {
  margin-top:-20px;
 }
}
@keyframes leftMove {
 0% {
  -webkit-transform:translateX(0);
  -moz-transform:translateX(0);
  -ms-transform:translateX(0);
  transform:translateX(0);
 }
 100% {
  -webkit-transform:translateX(-10px);
  -moz-transform:translateX(-10px);
  -ms-transform:translateX(-10px);
  transform:translateX(-10px);
 }
}
@keyframes rightMove {
 0% {
  -webkit-transform:translateX(0);
  -moz-transform:translateX(0);
  -ms-transform:translateX(0);
  transform:translateX(0);
 }
 100% {
  -webkit-transform:translateX(10px);
  -moz-transform:translateX(10px);
  -ms-transform:translateX(10px);
  transform:translateX(10px);
 }
}
.wrapper {
 margin:0 auto;
 width:100%;
 max-width:1253px;
}
#bubble_container {
 position:relative;
 width:100%;
 top:376px;
 height:320px;
 overflow:hidden;
 background-color:#e5e5e5;
}
#bubble_container.active .creature>div,
#bubble_container:hover .creature>div {
 -webkit-animation:upDown 5s ease-in-out infinite alternate;
 -moz-animation:upDown 5s ease-in-out infinite alternate;
 -o-animation:upDown 5s ease-in-out infinite alternate;
 -ms-animation:upDown 5s ease-in-out infinite alternate;
 animation:upDown 5s ease-in-out infinite alternate;
}
#bubble_container.active .creature:nth-child(odd)>div,
#bubble_container:hover .creature:nth-child(odd)>div {
 -webkit-animation:downUp 5s ease-in-out infinite alternate;
 -moz-animation:downUp 5s ease-in-out infinite alternate;
 -o-animation:downUp 5s ease-in-out infinite alternate;
 -ms-animation:downUp 5s ease-in-out infinite alternate;
 animation:downUp 5s ease-in-out infinite alternate;
}
.creature {
 width:9.25em;
 height:9.25em;
 margin-left:calc(calc(9.25em/2)*(-1));
 margin-top:calc(calc(9.25em/2)*(-1));
 color:#fff;
 -webkit-border-radius:50%;
 -moz-border-radius:50%;
 -ms-border-radius:50%;
 border-radius:50%;
 display:inline-block;
 position:absolute;
 z-index:2;
 cursor:pointer;
}
.creature:nth-child(15) {
 -webkit-transform:scale(.93);
 -moz-transform:scale(.93);
 -ms-transform:scale(.93);
 transform:scale(.93);
}
.creature:nth-child(12) {
 -webkit-transform:scale(.9);
 -moz-transform:scale(.9);
 -ms-transform:scale(.9);
 transform:scale(.9);
}
.creature:nth-child(2) {
 -webkit-transform:scale(.88);
 -moz-transform:scale(.88);
 -ms-transform:scale(.88);
 transform:scale(.88);
}
.creature:nth-child(16) {
 -webkit-transform:scale(.85);
 -moz-transform:scale(.85);
 -ms-transform:scale(.85);
 transform:scale(.85);
}
.creature:nth-child(6) {
 -webkit-transform:scale(.82);
 -moz-transform:scale(.82);
 -ms-transform:scale(.82);
 transform:scale(.82);
}
.creature:nth-child(10) {
 -webkit-transform:scale(.78);
 -moz-transform:scale(.78);
 -ms-transform:scale(.78);
 transform:scale(.78);
}
.creature:nth-child(14) {
 -webkit-transform:scale(.74);
 -moz-transform:scale(.74);
 -ms-transform:scale(.74);
 transform:scale(.74);
}
.creature:nth-child(11) {
 -webkit-transform:scale(.65);
 -moz-transform:scale(.65);
 -ms-transform:scale(.65);
 transform:scale(.65);
}
.creature:nth-child(1),
.creature:nth-child(7) {
 -webkit-transform:scale(.63);
 -moz-transform:scale(.63);
 -ms-transform:scale(.63);
 transform:scale(.63);
}
.creature:nth-child(8),
.creature:nth-child(17) {
 -webkit-transform:scale(.6);
 -moz-transform:scale(.6);
 -ms-transform:scale(.6);
 transform:scale(.6);
}
.creature:nth-child(3),
.creature:nth-child(4) {
 -webkit-transform:scale(.55);
 -moz-transform:scale(.55);
 -ms-transform:scale(.55);
 transform:scale(.55);
}
.creature:nth-child(9) {
 -webkit-transform:scale(.44);
 -moz-transform:scale(.44);
 -ms-transform:scale(.44);
 transform:scale(.44);
}
.creature:nth-child(5) {
 -webkit-transform:scale(.35);
 -moz-transform:scale(.35);
 -ms-transform:scale(.35);
 transform:scale(.35);
}
.creature>div {
 display:inline-block;
 width:100%;
 height:100%;
 -webkit-border-radius:50%;
 -moz-border-radius:50%;
 -ms-border-radius:50%;
 border-radius:50%;
 -moz-transition:all .3s ease;
 -o-transition:all .3s ease;
 -webkit-transition:all .3s ease;
 transition:all .3s ease;
 -webkit-box-shadow:5px 5px 20px 0 rgba(0,0,0,.42);
 -moz-box-shadow:5px 5px 20px 0 rgba(0,0,0,.42);
 box-shadow:5px 5px 20px 0 rgba(0,0,0,.42);
 -webkit-animation:upDown 4s ease-in-out infinite alternate;
 -moz-animation:upDown 4s ease-in-out infinite alternate;
 -o-animation:upDown 4s ease-in-out infinite alternate;
 -ms-animation:upDown 4s ease-in-out infinite alternate;
 animation:upDown 4s ease-in-out infinite alternate;
}
.creature>div>span {
 position:relative;
 display:inline-block;
 text-align:center;
}
.creature>div>span i {
 font-size:2em;
 margin-bottom:.5rem;
}
.creature:nth-child(odd)>div {
 -webkit-animation:downUp 4s ease-in-out infinite alternate;
 -moz-animation:downUp 4s ease-in-out infinite alternate;
 -o-animation:downUp 4s ease-in-out infinite alternate;
 -ms-animation:downUp 4s ease-in-out infinite alternate;
 animation:downUp 4s ease-in-out infinite alternate;
}
.creature.active,
.creature:hover {
 z-index:11 !important;
 -webkit-filter:blur(0) !important;
 filter:blur(0) !important;
}
.creature.active>div,
.creature:hover>div {
 -webkit-transform:scale(1.2);
 -moz-transform:scale(1.2);
 -ms-transform:scale(1.2);
 transform:scale(1.2);
}
.creature:nth-child(1)>div,
.creature:nth-child(3)>div,
.creature:nth-child(5)>div,
.creature:nth-child(6)>div,
.creature:nth-child(10)>div,
.creature:nth-child(11)>div,
.creature:nth-child(13)>div,
.creature:nth-child(15)>div {
 background-color:#009bd6;
}
.creature:nth-child(2)>div,
.creature:nth-child(9)>div,
.creature:nth-child(14)>div {
 background-color:#fff;
 color:#000;
}
.creature:nth-child(2)>div i,
.creature:nth-child(9)>div i,
.creature:nth-child(14)>div i {
 color:#009bd6;
}
.creature:nth-child(4)>div,
.creature:nth-child(7)>div,
.creature:nth-child(8)>div {
 background-color:#aeacb9;
}
.creature:nth-child(12)>div,
.creature:nth-child(16)>div,
.creature:nth-child(17)>div {
 background-color:#342b88;
}
.clover-container {
 position:relative;
 width:400em;
 height:400em;
 padding:0;
 border-radius:50%;
 list-style:none;
 margin:4em auto 0;
 border:solid 2px transparent;
 position:absolute;
 left:calc(50% - 200em);
}
.clover-container>* {
 display:block;
 position:absolute;
 top:50%;
 left:50%;
 width:5rem;
 height:5rem;
 margin:-2.5rem;
}
.clover-container>*:nth-of-type(1) {
 transform:rotate(0deg) translate(200em) rotate(-270deg);
 x:0;
}
.clover-container>*:nth-of-type(2) {
 transform:rotate(5.625deg) translate(200em) rotate(-270deg);
 x:-5.625;
}
.clover-container>*:nth-of-type(3) {
 transform:rotate(11.25deg) translate(200em) rotate(-270deg);
 x:-11.25;
}
.clover-container>*:nth-of-type(4) {
 transform:rotate(16.875deg) translate(200em) rotate(-270deg);
 x:-16.875;
}
.clover-container>*:nth-of-type(5) {
 transform:rotate(22.5deg) translate(200em) rotate(-270deg);
 x:-22.5;
}
.clover-container>*:nth-of-type(6) {
 transform:rotate(28.125deg) translate(200em) rotate(-270deg);
 x:-28.125;
}
.clover-container>*:nth-of-type(7) {
 transform:rotate(33.75deg) translate(200em) rotate(-270deg);
 x:-33.75;
}
.clover-container>*:nth-of-type(8) {
 transform:rotate(39.375deg) translate(200em) rotate(-270deg);
 x:-39.375;
}
.clover-container>*:nth-of-type(9) {
 transform:rotate(45deg) translate(200em) rotate(-270deg);
 x:-45;
}
.clover-container>*:nth-of-type(10) {
 transform:rotate(50.625deg) translate(200em) rotate(-270deg);
 x:-50.625;
}
.clover-container>*:nth-of-type(11) {
 transform:rotate(56.25deg) translate(200em) rotate(-270deg);
 x:-56.25;
}
.clover-container>*:nth-of-type(12) {
 transform:rotate(61.875deg) translate(200em) rotate(-270deg);
 x:-61.875;
}
.clover-container>*:nth-of-type(13) {
 transform:rotate(67.5deg) translate(200em) rotate(-270deg);
 x:-67.5;
}
.clover-container>*:nth-of-type(14) {
 transform:rotate(73.125deg) translate(200em) rotate(-270deg);
 x:-73.125;
}
.clover-container>*:nth-of-type(15) {
 transform:rotate(78.75deg) translate(200em) rotate(-270deg);
 x:-78.75;
}
.clover-container>*:nth-of-type(16) {
 transform:rotate(84.375deg) translate(200em) rotate(-270deg);
 x:-84.375;
}
.clover-container>*:nth-of-type(17) {
 transform:rotate(90deg) translate(200em) rotate(-270deg);
 x:-90;
}
.clover-container>*:nth-of-type(18) {
 transform:rotate(95.625deg) translate(200em) rotate(-270deg);
 x:-95.625;
}
.clover-container>*:nth-of-type(19) {
 transform:rotate(101.25deg) translate(200em) rotate(-270deg);
 x:-101.25;
}
.clover-container>*:nth-of-type(20) {
 transform:rotate(106.875deg) translate(200em) rotate(-270deg);
 x:-106.875;
}
.clover-container>*:nth-of-type(21) {
 transform:rotate(112.5deg) translate(200em) rotate(-270deg);
 x:-112.5;
}
.clover-container>*:nth-of-type(22) {
 transform:rotate(118.125deg) translate(200em) rotate(-270deg);
 x:-118.125;
}
.clover-container>*:nth-of-type(23) {
 transform:rotate(123.75deg) translate(200em) rotate(-270deg);
 x:-123.75;
}
.clover-container>*:nth-of-type(24) {
 transform:rotate(129.375deg) translate(200em) rotate(-270deg);
 x:-129.375;
}
.clover-container>*:nth-of-type(25) {
 transform:rotate(135deg) translate(200em) rotate(-270deg);
 x:-135;
}
.clover-container>*:nth-of-type(26) {
 transform:rotate(140.625deg) translate(200em) rotate(-270deg);
 x:-140.625;
}
.clover-container>*:nth-of-type(27) {
 transform:rotate(146.25deg) translate(200em) rotate(-270deg);
 x:-146.25;
}
.clover-container>*:nth-of-type(28) {
 transform:rotate(151.875deg) translate(200em) rotate(-270deg);
 x:-151.875;
}
.clover-container>*:nth-of-type(29) {
 transform:rotate(157.5deg) translate(200em) rotate(-270deg);
 x:-157.5;
}
.clover-container>*:nth-of-type(30) {
 transform:rotate(163.125deg) translate(200em) rotate(-270deg);
 x:-163.125;
}
.clover-container>*:nth-of-type(31) {
 transform:rotate(168.75deg) translate(200em) rotate(-270deg);
 x:-168.75;
}
.clover-container>*:nth-of-type(32) {
 transform:rotate(174.375deg) translate(200em) rotate(-270deg);
 x:-174.375;
}
.clover-container>*:nth-of-type(33) {
 transform:rotate(180deg) translate(200em) rotate(-270deg);
 x:-180;
}
.clover-container>*:nth-of-type(34) {
 transform:rotate(185.625deg) translate(200em) rotate(-270deg);
 x:-185.625;
}
.clover-container>*:nth-of-type(35) {
 transform:rotate(191.25deg) translate(200em) rotate(-270deg);
 x:-191.25;
}
.clover-container>*:nth-of-type(36) {
 transform:rotate(196.875deg) translate(200em) rotate(-270deg);
 x:-196.875;
}
.clover-container>*:nth-of-type(37) {
 transform:rotate(202.5deg) translate(200em) rotate(-270deg);
 x:-202.5;
}
.clover-container>*:nth-of-type(38) {
 transform:rotate(208.125deg) translate(200em) rotate(-270deg);
 x:-208.125;
}
.clover-container>*:nth-of-type(39) {
 transform:rotate(213.75deg) translate(200em) rotate(-270deg);
 x:-213.75;
}
.clover-container>*:nth-of-type(40) {
 transform:rotate(219.375deg) translate(200em) rotate(-270deg);
 x:-219.375;
}
.clover-container>*:nth-of-type(41) {
 transform:rotate(225deg) translate(200em) rotate(-270deg);
 x:-225;
}
.clover-container>*:nth-of-type(42) {
 transform:rotate(230.625deg) translate(200em) rotate(-270deg);
 x:-230.625;
}
.clover-container>*:nth-of-type(43) {
 transform:rotate(236.25deg) translate(200em) rotate(-270deg);
 x:-236.25;
}
.clover-container>*:nth-of-type(44) {
 transform:rotate(241.875deg) translate(200em) rotate(-270deg);
 x:-241.875;
}
.clover-container>*:nth-of-type(45) {
 transform:rotate(247.5deg) translate(200em) rotate(-270deg);
 x:-247.5;
}
.clover-container>*:nth-of-type(46) {
 transform:rotate(253.125deg) translate(200em) rotate(-270deg);
 x:-253.125;
}
.clover-container>*:nth-of-type(47) {
 transform:rotate(258.75deg) translate(200em) rotate(-270deg);
 x:-258.75;
}
.clover-container>*:nth-of-type(48) {
 transform:rotate(264.375deg) translate(200em) rotate(-270deg);
 x:-264.375;
}
.clover-container>*:nth-of-type(49) {
 transform:rotate(270deg) translate(200em) rotate(-270deg);
 x:-270;
}
.clover-container>*:nth-of-type(50) {
 transform:rotate(275.625deg) translate(200em) rotate(-270deg);
 x:-275.625;
}
.clover-container>*:nth-of-type(51) {
 transform:rotate(281.25deg) translate(200em) rotate(-270deg);
 x:-281.25;
}
.clover-container>*:nth-of-type(52) {
 transform:rotate(286.875deg) translate(200em) rotate(-270deg);
 x:-286.875;
}
.clover-container>*:nth-of-type(53) {
 transform:rotate(292.5deg) translate(200em) rotate(-270deg);
 x:-292.5;
}
.clover-container>*:nth-of-type(54) {
 transform:rotate(298.125deg) translate(200em) rotate(-270deg);
 x:-298.125;
}
.clover-container>*:nth-of-type(55) {
 transform:rotate(303.75deg) translate(200em) rotate(-270deg);
 x:-303.75;
}
.clover-container>*:nth-of-type(56) {
 transform:rotate(309.375deg) translate(200em) rotate(-270deg);
 x:-309.375;
}
.clover-container>*:nth-of-type(57) {
 transform:rotate(315deg) translate(200em) rotate(-270deg);
 x:-315;
}
.clover-container>*:nth-of-type(58) {
 transform:rotate(320.625deg) translate(200em) rotate(-270deg);
 x:-320.625;
}
.clover-container>*:nth-of-type(59) {
 transform:rotate(326.25deg) translate(200em) rotate(-270deg);
 x:-326.25;
}
.clover-container>*:nth-of-type(60) {

 transform:rotate(331.875deg) translate(200em) rotate(-270deg);
 x:-331.875;
}
.clover-container>*:nth-of-type(61) {
 transform:rotate(337.5deg) translate(200em) rotate(-270deg);
 x:-337.5;
}
.clover-container>*:nth-of-type(62) {
 transform:rotate(343.125deg) translate(200em) rotate(-270deg);
 x:-343.125;
}
.clover-container>*:nth-of-type(63) {
 transform:rotate(348.75deg) translate(200em) rotate(-270deg);
 x:-348.75;
}
.clover-container>*:nth-of-type(64) {
 transform:rotate(354.375deg) translate(200em) rotate(-270deg);
 x:-354.375;
}
.clover-container li {
 background-color:#fff;
 -webkit-border-radius:50%;
 -moz-border-radius:50%;
 -ms-border-radius:50%;
 border-radius:50%;
 text-align:center;
 line-height:3em;
 font-weight:bold;
}
.planet-container2 {
 position:relative;
 width:400em;
 height:400em;
 padding:0;
 border-radius:50%;
 list-style:none;
 margin:4em auto 0;
 position:absolute;
 border:solid 2px #fff;
 left:calc(50% - 200em);
}
.planet-container2>* {
 display:block;
 position:absolute;
 top:50%;
 left:50%;
 width:.8em;
 height:.8em;
 margin:-.4em;
}
.planet-container2>*:nth-of-type(1) {
 transform:rotate(0deg) translate(200em) rotate(0deg);
}
.planet-container2 li {
 background-color:#fff;
 -webkit-border-radius:50%;
 -moz-border-radius:50%;
 -ms-border-radius:50%;
 border-radius:50%;
}
.planet-container {
 position:relative;
 width:64em;
 height:64em;
 padding:0;
 border-radius:50%;
 list-style:none;
 margin:4em auto 0;
 border:solid 2px transparent;
 position:absolute;
 left:calc(50% - 32em);
}
.planet-container>* {
 display:block;
 position:absolute;
 top:50%;
 left:50%;
 width:.8em;
 height:.8em;
 margin:-.4em;
}
.planet-container>*:nth-of-type(1) {
 transform:rotate(0deg) translate(32em) rotate(0deg);
}
.planet-container li {
 background-color:#fff;
 -webkit-border-radius:50%;
 -moz-border-radius:50%;
 -ms-border-radius:50%;
 border-radius:50%;
}
.circle-container {
 position:relative;
 width:64em;
 height:64em;
 padding:0;
 border-radius:50%;
 list-style:none;
 margin:4em auto 0;
 border:solid 2px #fff;
 -moz-transition:all .2s ease;
 -o-transition:all .2s ease;
 -webkit-transition:all .2s ease;
 transition:all .2s ease;
}
.circle-container>* {
 display:block;
 position:absolute;
 top:50%;
 left:50%;
 width:9.5em;
 height:9.5em;
 margin:-4.75em;
}
.circle-container>*:nth-of-type(1) {
 transform:rotate(-197.5deg) translate(32em) rotate(-162.5deg);
}
.circle-container>*:nth-of-type(2) {
 transform:rotate(-170.625deg) translate(32em) rotate(-189.375deg);
}
.circle-container>*:nth-of-type(3) {
 transform:rotate(-143.75deg) translate(32em) rotate(-216.25deg);
}
.circle-container>*:nth-of-type(4) {
 transform:rotate(-116.875deg) translate(32em) rotate(-243.125deg);
}
.circle-container>*:nth-of-type(5) {
 transform:rotate(-90deg) translate(32em) rotate(-270deg);
}
.circle-container>*:nth-of-type(6) {
 transform:rotate(-63.125deg) translate(32em) rotate(-296.875deg);
}
.circle-container>*:nth-of-type(7) {
 transform:rotate(-36.25deg) translate(32em) rotate(-323.75deg);
}
.circle-container>*:nth-of-type(8) {
 transform:rotate(-9.375deg) translate(32em) rotate(-350.625deg);
}
.circle-container>*:nth-of-type(9) {
 transform:rotate(17.5deg) translate(32em) rotate(-377.5deg);
}
.circle-container.step-clockwise {
 transform:rotate(26.875deg);
}
.circle-container.step-clockwise i {
 transform:rotate(-26.875deg);
}
.circle-container.step-clockwise strong {
 width:0;
 transform-origin:top center;
}
.circle-container.step-clockwise>li {
 transition:none;
}
.circle-container.step-counter-clockwise {
 transform:rotate(-26.875deg);
}
.circle-container.step-counter-clockwise i {
 transform:rotate(26.875deg);
}
.circle-container.step-counter-clockwise strong {
 width:0;
 transform-origin:top center;
}
.circle-container.step-counter-clockwise>li {
 transition:none;
}
.circle-container.step-clockwise-half {
 transform:rotate(13.4375deg);
}
.circle-container.step-clockwise-half i,
.circle-container.step-clockwise-half strong {
 transform:rotate(-13.4375deg);
}
.circle-container.step-clockwise-half strong {
 width:0;
 transform-origin:top center;
}
.circle-container.step-clockwise-half>li {
 transition:none;
}
.circle-container.step-counter-clockwise-half {
 transform:rotate(-13.4375deg);
}
.circle-container.step-counter-clockwise-half i {
 transform:rotate(13.4375deg);
}
.circle-container.step-counter-clockwise-half strong {
 width:0;
 transform-origin:top center;
}
.circle-container.step-counter-clockwise-half>li {
 transition:none;
}
.circle-container.step-clockwise>li:nth-child(4)>span,
.circle-container.step-clockwise-half>li:nth-child(4)>span {
 -webkit-transform:scale(.8);
 -moz-transform:scale(.8);
 -ms-transform:scale(.8);
 transform:scale(.8);
}
.circle-container.step-clockwise>li:nth-child(3)>span,
.circle-container.step-clockwise>li:nth-child(5)>span,
.circle-container.step-clockwise-half>li:nth-child(3)>span,
.circle-container.step-clockwise-half>li:nth-child(5)>span {
 -webkit-transform:scale(.7);
 -moz-transform:scale(.7);
 -ms-transform:scale(.7);
 transform:scale(.7);
}
.circle-container.step-clockwise>li:nth-child(1)>span,
.circle-container.step-clockwise>li:nth-child(2)>span,
.circle-container.step-clockwise>li:nth-child(6)>span,
.circle-container.step-clockwise>li:nth-child(7)>span,
.circle-container.step-clockwise-half>li:nth-child(1)>span,
.circle-container.step-clockwise-half>li:nth-child(2)>span,
.circle-container.step-clockwise-half>li:nth-child(6)>span,
.circle-container.step-clockwise-half>li:nth-child(7)>span {
 -webkit-transform:scale(.6);
 -moz-transform:scale(.6);
 -ms-transform:scale(.6);
 transform:scale(.6);
}
.circle-container.step-clockwise>li:nth-child(8)>span,
.circle-container.step-clockwise>li:nth-child(9)>span,
.circle-container.step-clockwise-half>li:nth-child(8)>span,
.circle-container.step-clockwise-half>li:nth-child(9)>span {
 -webkit-transform:scale(.2);
 -moz-transform:scale(.2);
 -ms-transform:scale(.2);
 transform:scale(.2);
}
.circle-container.step-clockwise>li>span strong,
.circle-container.step-clockwise-half>li>span strong {
 overflow:hidden;
 opacity:0;
}
.circle-container.step-counter-clockwise>li:nth-child(6)>span,
.circle-container.step-counter-clockwise-half>li:nth-child(6)>span {
 -webkit-transform:scale(.8);
 -moz-transform:scale(.8);
 -ms-transform:scale(.8);
 transform:scale(.8);
}
.circle-container.step-counter-clockwise>li:nth-child(5)>span,
.circle-container.step-counter-clockwise>li:nth-child(7)>span,
.circle-container.step-counter-clockwise-half>li:nth-child(5)>span,
.circle-container.step-counter-clockwise-half>li:nth-child(7)>span {
 -webkit-transform:scale(.7);
 -moz-transform:scale(.7);
 -ms-transform:scale(.7);
 transform:scale(.7);
}
.circle-container.step-counter-clockwise>li:nth-child(3)>span,
.circle-container.step-counter-clockwise>li:nth-child(4)>span,
.circle-container.step-counter-clockwise>li:nth-child(8)>span,
.circle-container.step-counter-clockwise>li:nth-child(9)>span,
.circle-container.step-counter-clockwise-half>li:nth-child(3)>span,
.circle-container.step-counter-clockwise-half>li:nth-child(4)>span,
.circle-container.step-counter-clockwise-half>li:nth-child(8)>span,
.circle-container.step-counter-clockwise-half>li:nth-child(9)>span {
 -webkit-transform:scale(.6);
 -moz-transform:scale(.6);
 -ms-transform:scale(.6);
 transform:scale(.6);
}
.circle-container.step-counter-clockwise>li:nth-child(1)>span,
.circle-container.step-counter-clockwise>li:nth-child(2)>span,
.circle-container.step-counter-clockwise-half>li:nth-child(1)>span,
.circle-container.step-counter-clockwise-half>li:nth-child(2)>span {
 -webkit-transform:scale(.2);
 -moz-transform:scale(.2);
 -ms-transform:scale(.2);
 transform:scale(.2);
}
.circle-container.step-counter-clockwise>li>span strong,
.circle-container.step-counter-clockwise-half>li>span strong {
 overflow:hidden;
 opacity:0;
}
.circle-container>li {
 cursor:pointer;
 -moz-transition:all .3s ease;
 -o-transition:all .3s ease;
 -webkit-transition:all .3s ease;
 transition:all .3s ease;
}
.circle-container>li:nth-child(5)>span {
 -webkit-transform:scale(.8);
 -moz-transform:scale(.8);
 -ms-transform:scale(.8);
 transform:scale(.8);
}
.circle-container>li:nth-child(4)>span,
.circle-container>li:nth-child(6)>span {
 -webkit-transform:scale(.7);
 -moz-transform:scale(.7);
 -ms-transform:scale(.7);
 transform:scale(.7);
}
.circle-container>li:nth-child(2)>span,
.circle-container>li:nth-child(3)>span,
.circle-container>li:nth-child(7)>span,
.circle-container>li:nth-child(8)>span {
 -webkit-transform:scale(.6);
 -moz-transform:scale(.6);
 -ms-transform:scale(.6);
 transform:scale(.6);
}
.circle-container>li:nth-child(1)>span,
.circle-container>li:nth-child(9)>span {
 -webkit-transform:scale(.2);
 -moz-transform:scale(.2);
 -ms-transform:scale(.2);
 transform:scale(.2);
}
.circle-container>li:nth-child(1)>span>strong,
.circle-container>li:nth-child(2)>span>strong,
.circle-container>li:nth-child(3)>span>strong,
.circle-container>li:nth-child(4)>span>strong {
 left:-1em;
 top:38%;
 transform:translate(-100%,-50%);
}
.circle-container>li:nth-child(6)>span>strong,
.circle-container>li:nth-child(7)>span>strong,
.circle-container>li:nth-child(8)>span>strong,
.circle-container>li:nth-child(9)>span>strong {
 right:-1em;
 top:38%;
 transform:translate(100%,-50%);
}
.circle-container>li.active>span,
.circle-container>li:hover>span {
 -webkit-transform:scale(1);
 -moz-transform:scale(1);
 -ms-transform:scale(1);
 transform:scale(1);
 background-color:#fff;
 color:#594f74;
 border:solid 10px rgba(89,79,116,.2);
 -webkit-box-shadow:0 0 20px 0 rgba(255,255,255,.8);
 -moz-box-shadow:0 0 20px 0 rgba(255,255,255,.8);
 box-shadow:0 0 20px 0 rgba(255,255,255,.8);
}
.circle-container>li.active>span strong,
.circle-container>li:hover>span strong {
 overflow:hidden;
 opacity:0;
}
.circle-container span {
 background-color:#594f74;
 display:inline-block;
 width:100%;
 height:100%;
 position:absolute;
 color:#fff;
 border-radius:50%;
 border:solid 2px #fff;
 transition:.15s;
}
.circle-container span strong {
 text-align:center;
 position:absolute;
 white-space:nowrap;
 color:#fff !important;
 top:-1.35em;
 opacity:1;
 font-size:2.5em;
 font-weight:normal;
 -moz-transition:all .3s ease;
 -o-transition:all .3s ease;
 -webkit-transition:all .3s ease;
 transition:all .3s ease;
}
.circle-container span>i {
 font-size:3em;
 display:inline-block;
 width:100%;
 height:100%;
 position:relative;
 -moz-transition:all .2s ease;
 -o-transition:all .2s ease;
 -webkit-transition:all .2s ease;
 transition:all .2s ease;
}
#circle_menu_container {
 cursor:pointer;
 position:relative;
 padding-top:2.5rem;
 height:20rem;
 overflow:hidden;
 z-index:3;
 width:100%;
 margin-top:-66px;
}
#circle_menu_container .search-bg {
 position:absolute;
 bottom:0;
 left:0;
 width:100%;
 height:100px;
 text-align:center;
 padding-top:10px;
}
#circle_menu_container .search-bg.down {
 z-index:5;
 margin-bottom:50px;
 height:70px;
}
#circle_navigate {
 text-align:center;
 font-size:3em;
 z-index:2;
 bottom:2.2em;
 width:5.5em;
 margin:0 auto;
 display:inline-block;
 text-align:center;
}
#circle_navigate img {
 display:inline-block;
 max-height:45px;
 position:relative;
}
#circle_navigate a {
 display:inline-block;
 max-height:45px;
 position:relative;
 border:none;
}
#circle_h {
 pointer-events:none;
 margin:0 auto;
 display:inline-block;
 color:#3b3b3b;
 font-size:1.639em;
 text-align:center;
 bottom:6.5em;
 max-width:600px;
 font-weight:500;
}
#circle_h.blue {
 color:#fff;
}
#circle_h.blue span {
 color:#fff;
}
#circle_h.blue span.down {
 color:#fff !important;
}
#circle_h span {
 font-weight:300;
 font-size:.9em;
 color:#594f74;
}
#circle_h.down {
 top:.4em;
 bottom:4em;
}
#circle_h.down span {
 display:block;
}
#circle_h.down span.down {
 margin-top:9em;
 color:#3b3b3b;
 display:inline-block;
}
.rotate360 {
 -webkit-transform:rotate(360deg);
 -moz-transform:rotate(360deg);
 -ms-transform:rotate(360deg);
 transform:rotate(360deg);
 -moz-transition:all 1s ease;
 -o-transition:all 1s ease;
 -webkit-transition:all 1s ease;
 transition:all 1s ease;
}
.rotate360.slow {
 -moz-transition:all 5s ease;
 -o-transition:all 5s ease;
 -webkit-transition:all 5s ease;
 transition:all 5s ease;
}
.wrapper-inner {
 width:100%;
 height:20.5rem;
 overflow:hidden;
 position:absolute;
 margin-top:-76px;
 z-index:2;
}
#circle_hover {
 width:100%;
 height:23em;
 overflow:hidden;
 position:absolute;
}
.oval-container {
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 overflow:hidden;
}
.pattern-style-1,
.pattern-style-2,
.pattern-style-3 {
 top:0;
 background-color:#635f98;
 width:2880px;
 height:575px;
 -webkit-border-radius:50% 50% 0 0;
 -moz-border-radius:50% 50% 0 0;
 -o-border-radius:50% 50% 0 0;
 border-radius:50% 50% 0 0;
 overflow:hidden;
}
.pattern-style-1::before,
.pattern-style-2::before,
.pattern-style-3::before {
 content:url("bg_pattern1.html");
 position:absolute;
 left:0;
 top:0;
}
.pattern-style-1::after,
.pattern-style-2::after,
.pattern-style-3::after {
 content:url("bg_pattern2.html");
 position:absolute;
 right:0;
 top:0;
}
.pattern-style-2 {
 background-image:url("circle-parent-bg.html");
 background-position:center -1.5em;
}
.pattern-style-2::before,
.pattern-style-2::after {
 display:none;
}
.pattern-style-3 {
 border:solid 1px #594f74;
 background-image:url("circle-parent-bg2.html");
 background-position:center -1.5em;
}
.pattern-style-3::before,
.pattern-style-3::after {
 display:none;
}
.left-arrow {
 -webkit-animation:leftMove 1s ease-in-out infinite alternate;
 -moz-animation:leftMove 1s ease-in-out infinite alternate;
 -o-animation:leftMove 1s ease-in-out infinite alternate;
 -ms-animation:leftMove 1s ease-in-out infinite alternate;
 animation:leftMove 1s ease-in-out infinite alternate;
}
.right-arrow {
 -webkit-animation:rightMove 1s ease-in-out infinite alternate;
 -moz-animation:rightMove 1s ease-in-out infinite alternate;
 -o-animation:rightMove 1s ease-in-out infinite alternate;
 -ms-animation:rightMove 1s ease-in-out infinite alternate;
 animation:rightMove 1s ease-in-out infinite alternate;
}
.wrapper-inner.small {
 height:280px;
}
.oval-container .oval-inner {
 display:inline-block;
 width:120%;
 height:150px;
 background-color:#008080;
 top:150px;
}
.field {
 width:80px;
 height:80px;
 position:absolute;
 background-color:#fff;
 text-align:center;
 margin-left:-40px;
 pointer-events:none;
 -webkit-border-radius:50%;
 -moz-border-radius:50%;
 -ms-border-radius:50%;
 border-radius:50%;
 -webkit-user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 user-select:none;
}
.debug-time,
.debug-pct,
.debug-btn {
 position:absolute;
 top:300px;
 width:100%;
 height:1em;
 color:#000;
 z-index:10;
 left:0;
 text-align:center;
}
.debug-pct {
 top:330px;
}
.debug-btn {
 top:400px;
}
#clover_container {
 -moz-transition:transform 1.5s cubic-bezier(.51,.11,.78,1.25);
 -o-transition:transform 1.5s cubic-bezier(.51,.11,.78,1.25);
 -webkit-transition:transform 1.5s cubic-bezier(.51,.11,.78,1.25);
 transition:transform 1.5s cubic-bezier(.51,.11,.78,1.25);
}
#clover_container.no-event li {
 pointer-events:none;
}
#clover_container a {
 -webkit-user-drag:none;
 border:none;
}
#clover_container a.active>li>div {
 width:6.385rem;
 height:6.385rem;
 -webkit-box-shadow:19px 13px 20px 0 rgba(0,0,0,.15);
 -moz-box-shadow:19px 13px 20px 0 rgba(0,0,0,.15);
 box-shadow:19px 13px 20px 0 rgba(0,0,0,.15);
}
#clover_container a.active>li>div span {
 border:solid .625em #fff;
 background-color:transparent !important;
}
#clover_container a.active>li>div span i {
 color:#594f74 !important;
 opacity:0;
}
#clover_container a.active>li>div span strong {
 top:7rem;
 color:#594f74 !important;
 font-weight:400;
}
#clover_container li * {
 cursor:pointer;
 -moz-user-select:none;
 -webkit-user-select:none;
 -ms-user-select:none;
 user-select:none;
 -o-user-select:none;
}
#clover_container li.active>div {
 width:11.385em;
 height:11.385em;
 -webkit-box-shadow:19px 13px 20px 0 rgba(0,0,0,.15);
 -moz-box-shadow:19px 13px 20px 0 rgba(0,0,0,.15);
 box-shadow:19px 13px 20px 0 rgba(0,0,0,.15);
}
#clover_container li.active>div span {
 border:solid .625em #fff;
 background-color:transparent !important;
}
#clover_container li.active>div span i {
 color:#594f74 !important;
 opacity:0;
}
#clover_container li.active>div span strong {
 top:6.8em;
 color:#594f74 !important;
 font-weight:bold;
}
#clover_container li div {
 -webkit-border-radius:50%;
 -moz-border-radius:50%;
 -ms-border-radius:50%;
 border-radius:50%;
 position:absolute;
 display:inline-block;
 width:100%;
 height:100%;
 background-color:#fff;
 background-position:center;
 background-repeat:no-repeat;
 background-size:cover;
 -moz-transition:all .3s ease;
 -o-transition:all .3s ease;
 -webkit-transition:all .3s ease;
 transition:all .3s ease;
 -webkit-box-shadow:19px 13px 20px 0 rgba(0,0,0,.15);
 -moz-box-shadow:19px 13px 20px 0 rgba(0,0,0,.15);
 box-shadow:19px 13px 20px 0 rgba(0,0,0,.15);
 pointer-events:none;
}
#clover_container li span {
 font-size:1em;
 background-color:#594f74;
 display:inline-block;
 width:100%;
 height:100%;
 left:0;
 top:0;
 color:#fff;
 border-radius:50%;
 -moz-transition:all .3s linear;
 -o-transition:all .3s linear;
 -webkit-transition:all .3s linear;
 transition:all .3s linear;
}
#clover_container li span strong {
 text-align:center;
 position:absolute;
 white-space:nowrap;
 color:#3b3b3b !important;
 top:5rem;
 opacity:1;
 font-size:1.25em;
 font-weight:normal;
 -moz-transition:all .3s ease;
 -o-transition:all .3s ease;
 -webkit-transition:all .3s ease;
 transition:all .3s ease;
}
#clover_container li span>img {
 position:absolute;
 top:50%;
 left:50%;
 -webkit-transform:translate(-50%,-50%);
 -moz-transform:translate(-50%,-50%);
 -ms-transform:translate(-50%,-50%);
 transform:translate(-50%,-50%);
 width:3.3rem;
 height:3.3rem;
}
#clover_container.blue a {
 border:none;
}
#clover_container.blue a.active>li>div span {
 background:transparent !important;
}
#clover_container.blue a.active>li>div span img {
 display:none;
}
#clover_container.blue a.active>li>div span strong {
 color:#fff !important;
}
#clover_container.blue li span {
 border:solid 2px #fff;
 background:#635f98;
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#d6eff6',GradientType=0);
}
#clover_container.blue li span strong {
 color:#fff !important;
}
#clover_container.blue li span i {
 color:#0099ca;
}
#clover_container.blue li.active>div span {
 background:transparent !important;
}
#clover_container.blue li.active>div span img {
 display:none;
}
#clover_container.blue li.active>div span strong {
 color:#fff !important;
}
#clover_container.blue a:hover>li div span strong {
 color:#fff !important;
}
#clover_container,
.planet-container2 {
 margin-top:8.5em;
 border-color:#0099ca;
}
#clover_container.blue,
.planet-container2.blue {
 margin-top:4.5em;
 border-color:#fff;
}
#circle_hover.active #clover_container.blue,
#circle_hover.active .planet-container2.blue,
#circle_hover:hover #clover_container.blue,
#circle_hover:hover .planet-container2.blue {
 border-color:#fff;
}
@media only screen and (max-width:1921px) {
 #circle_menu_container {
  font-size:.95em;
 }
}
@media only screen and (max-width:1601px) {
 #circle_menu_container {
  font-size:1em;
 }
}
@media only screen and (max-width:1281px) {
 #circle_menu_container {
  font-size:.9em;
 }
}
@media only screen and (max-width:1199px) {
 #circle_menu_container .search-bg.down {
  height:58px;
  margin-bottom:35px;
 }
 #circle_h.down {
  top:5px;
  bottom:5em;
  width:300px;
  font-size:2.625em;
 }
 #circle_h {
  font-size:1.1em;
 }
 .pattern-style-3 {
  height:300px;
 }
 .pattern-style-1,
 .pattern-style-2,
 .pattern-style-3,
 .pattern-style-2,
 .pattern-style-3 {
  width:250%;
 }
 .wrapper-inner {
  height:21rem;
  margin-top:-15px;
 }
 #circle_menu_container {
  height:20rem;
  font-size:.5em;
  margin-top:0;
 }
 #clover_container.blue,
 .planet-container2.blue {
  margin-top:6.5em;
 }
 #clover_container {
  -moz-transition:transform .8s cubic-bezier(.51,.11,.78,1.25);
  -o-transition:transform .8s cubic-bezier(.51,.11,.78,1.25);
  -webkit-transition:transform .8s cubic-bezier(.51,.11,.78,1.25);
  transition:transform .8s cubic-bezier(.51,.11,.78,1.25);
 }
 #clover_container li span>img {
  width:35px;
  height:35px;
 }
 .search-bg .input-group {
  width:90%;
  max-width:500px;
 }
 #circle_hover {
  height:20rem;
 }
}
@media only screen and (max-width:1023) {
 #circle_menu_container {
  font-size:.5em;
 }
}
@media only screen and (max-width:767px) {
 #clover_container li span strong {
  top:5.25rem;
  font-size:1rem;
 }
 #circle_menu_container {
  margin-top:0;
 }
 #circle_menu_container {
  font-size:.475em;
 }
 #clover_container.blue,
 .planet-container2.blue {
  margin-top:4.5rem;
 }
}
@media only screen and (max-width:600px) {
 #circle_menu_container {
  font-size:.4em;
 }
}
@media only screen and (max-width:500px) {
 #circle_menu_container {
  font-size:.475em;
 }
}