@charset "utf-8";
*{margin: 0;padding: 0;list-style: none;}

#order_nav {  position: relative;  position: relative; }
#order_nav .list { width: 160px; margin: 0 auto; }
#order_nav .list li { width: 66px; height: 66px;  border-radius: 50%; position: relative; margin: 0 0px 25px 20px; position: relative; cursor: pointer; -webkit-transition: .4s all; -moz-transition: .4s all; -ms-transition: .4s all; transition: .4s all; }
#order_nav .list li a { display: block; width: 100%; height: 100%; }
#order_nav .list li .cycle_mark { position: absolute; left: 0; top: 0; z-index: 2; }
#order_nav .list li .ico { width: 52px; height: 52px; position: absolute; left: 7px; top: 7px; background: #2d85e4 url(../image/12/rotate.png); border-radius: 50%; z-index: 1; -webkit-transition: .4s all; -moz-transition: .4s all; -ms-transition: .4s all; transition: .4s all; }
#order_nav .list li ._1 { background-position: 0px 0px; }
#order_nav .list li ._2 { background-position: -52px 0px; }
#order_nav .list li ._3 { background-position: -104px 0px; }
#order_nav .list li ._4 { background-position: -156px 0px; }
#order_nav .list li ._5 { background-position: -208px 0px; }
#order_nav .list li ._6 { background-position: -260px 0px; }
#order_nav .list li ._7 { background-position: -312px 0px; }
#order_nav .list li ._8 { background-position: -364px 0px; }
#order_nav .list li p { width: 150px; position: absolute; left: 0; top: 70px; text-align:left; }
#order_nav .list li p span { font-size: 14px; color: #ffffff; display: block; font-weight: bold; }
#order_nav .list li p span a { font-size: 14px; color: #ffffff; display: block; font-weight: bold; }
#order_nav .list li p span a:hover { font-size: 14px; color: #7c9ff7; display: block; font-weight: bold; }
#order_nav .list li p strong { font-size: 12px; color: #f00; display: block; }
#order_nav .list li.on { background: #f5c3cb; }
#order_nav .list li.on .ico { background-color: #fc0047; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }

#order_nav2 {  position: relative;  position: relative; }
#order_nav2 .list { width: 160px; margin: 0 auto; }
#order_nav2 .list li { width: 66px; height: 66px;  border-radius: 50%; position: relative; margin: 0 0px 25px 20px; position: relative; cursor: pointer; -webkit-transition: .4s all; -moz-transition: .4s all; -ms-transition: .4s all; transition: .4s all; }
#order_nav2 .list li a { display: block; width: 100%; height: 100%; }
#order_nav2 .list li .cycle_mark { position: absolute; left: 0; top: 0; z-index: 2; }
#order_nav2 .list li .ico { width: 52px; height: 52px; position: absolute; left: 7px; top: 7px; background: #2d85e4 url(../image/12/rotate.png); border-radius: 50%; z-index: 1; -webkit-transition: .4s all; -moz-transition: .4s all; -ms-transition: .4s all; transition: .4s all; }
#order_nav2 .list li ._1 { background-position: -416px 0px; }
#order_nav2 .list li ._2 { background-position: -468px 0px; }
#order_nav2 .list li ._3 { background-position: -520px 0px; }
#order_nav2 .list li ._4 { background-position: -572px 0px; }
#order_nav2 .list li ._5 { background-position: -624px 0px; }
#order_nav2 .list li ._6 { background-position: -676px 0px; }
#order_nav2 .list li ._7 { background-position: -728px 0px; }
#order_nav2 .list li ._8 { background-position: -780px 0px; }
#order_nav2 .list li p { width: 150px; position: absolute; left: 0; top: 70px; text-align:left; }
#order_nav2 .list li p span { font-size: 14px; color: #ffffff; display: block; font-weight: bold; }
#order_nav2 .list li p span a { font-size: 14px; color: #ffffff; display: block; font-weight: bold; }
#order_nav2 .list li p span a:hover { font-size: 14px; color: #7c9ff7; display: block; font-weight: bold; }
#order_nav2 .list li p strong { font-size: 12px; color: #f00; display: block; }
#order_nav2 .list li.on { background: #f5c3cb; }
#order_nav2 .list li.on .ico { background-color: #fc0047; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }