@charset "UTF-8";
.special_00186 { padding: 100px 0; background: no-repeat center; background-size: cover; }

.special_00186 .title-box { width: 55%; position: relative; overflow: hidden; background: #fff; border-radius: 50%; margin: 0 auto; overflow: visible; }

.special_00186 .title-box::before { content: ''; display: block; padding-top: 100%; }

.special_00186 .title-box .i { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 100%; max-height: 100%; -webkit-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; }

.special_00186 .title-box .bg-0 { width: 113.24675%; position: relative; overflow: hidden; background: no-repeat center; background-size: cover; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 50%; }

.special_00186 .title-box .bg-0::before { content: ''; display: block; padding-top: 100%; }

.special_00186 .title-box .bg-0 .i { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 100%; max-height: 100%; -webkit-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; }

.special_00186 .title-box .bg-1 { width: 71.2987%; position: relative; overflow: hidden; background: no-repeat center; background-size: cover; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 50%; }

.special_00186 .title-box .bg-1::before { content: ''; display: block; padding-top: 100%; }

.special_00186 .title-box .bg-1 .i { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 100%; max-height: 100%; -webkit-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; }

.special_00186 .title-box .bg-2 { width: 87.01299%; position: relative; overflow: hidden; background: no-repeat center; background-size: cover; position: absolute; top: 50%; left: 50%; margin: -43.50649% 0 0 -43.50649%; }

.special_00186 .title-box .bg-2::before { content: ''; display: block; padding-top: 100%; }

.special_00186 .title-box .bg-2 .i { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 100%; max-height: 100%; -webkit-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; }

.special_00186 .title-box .bg-3 { width: 53.50649%; position: relative; overflow: hidden; background: no-repeat center; background-size: cover; position: absolute; top: 50%; left: 50%; margin: -26.75325% 0 0 -26.75325%; }

.special_00186 .title-box .bg-3::before { content: ''; display: block; padding-top: 100%; }

.special_00186 .title-box .bg-3 .i { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 100%; max-height: 100%; -webkit-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; }

.special_00186 .title-box .title-bg { width: 220px; height: 220px; background: rgba(255, 255, 255, 0.8); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 50%; padding: 0 15px; }

.special_00186 .list .li { position: relative; overflow: hidden; position: absolute; background: #fff; border-radius: 50%; overflow: hidden; width: 210px; }

.special_00186 .list .li::before { content: ''; display: block; padding-top: 100%; }

.special_00186 .list .li .i { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 100%; max-height: 100%; -webkit-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; }

.special_00186 .list .a-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 100%; width: 100%; position: absolute; top: 0; left: 0; }

.special_00186 .list .icon { width: 81px; position: relative; overflow: hidden; margin: 0 auto; }

.special_00186 .list .icon::before { content: ''; display: block; padding-top: 96.2963%; }

.special_00186 .list .icon .i { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 100%; max-height: 100%; -webkit-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; }

.special_00186 .list .txt { text-align: center; font-size: 28px; margin: 15px 10px 0; line-height: 1.2; }

@media (max-width: 768px) { .special_00186 .list .txt { font-size: 20px; } }

.special_00186 .list .l-1 { left: 7%; top: 0; margin-top: 0.42857%; }

.special_00186 .list .l-2 { left: 0%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }

.special_00186 .list .l-3 { left: 4.21429%; bottom: 0; margin-bottom: 0.92857%; }

.special_00186 .list .l-4 { right: 6.5%; top: 0; margin-top: 0.42857%; }

.special_00186 .list .l-5 { right: 0%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }

.special_00186 .list .l-6 { right: 3.71429%; bottom: 0; margin-bottom: 0.92857%; }

/*	pc 端	*/
@media (min-width: 769px) { @-webkit-keyframes r1 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes r1 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
  @-webkit-keyframes r2 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } }
  @keyframes r2 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } }
  .special_00186 .title-box .bg-2 { -webkit-animation: r1 60s linear infinite; animation: r1 60s linear infinite; }
  .special_00186 .title-box .bg-3 { -webkit-animation: r2 30s linear infinite; animation: r2 30s linear infinite; } }

@media (max-width: 1500px) { .special_00186 .list .l-1 { left: calc(50px + 7%); }
  .special_00186 .list .l-2 { left: 50px; }
  .special_00186 .list .l-3 { left: calc(50px + 4.21429%); }
  .special_00186 .list .l-4 { right: calc(50px + 6.5%); }
  .special_00186 .list .l-5 { right: 50px; }
  .special_00186 .list .l-6 { right: calc(50px + 3.71429%); } }

/*	1280~1440	*/
@media (max-width: 1366px) and (min-width: 1101px) { .special_00186 .list .li { width: 180px; }
  .special_00186 .list .icon { width: 60px; }
  .special_00186 .list .txt { font-size: 20px; margin-top: 5px; } }

@media (max-width: 1366px) and (min-width: 1101px) and (max-width: 768px) { .special_00186 .list .txt { font-size: 18px; } }

@media (max-width: 1100px) { .special_00186 .title-box { width: 100%; border-radius: 0; background: transparent; }
  .special_00186 .title-box::before { display: none; }
  .special_00186 .title-box .bg-0, .special_00186 .title-box .bg-1, .special_00186 .title-box .bg-2, .special_00186 .title-box .bg-3 { display: none; }
  .x-layout .special_00186 .title-box .title-bg { position: static; -webkit-transform: none; transform: none; width: 100%; height: auto; background-color: transparent !important; padding: 0; }
  .special_00186 .list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
  .special_00186 .list .li { position: relative; -webkit-transform: none; transform: none; left: auto; right: auto; top: auto; margin: 20px calc((33.33% - 210px) / 2); } }

/*	77024	*/
/*	移动端	*/
@media (max-width: 768px) { .special_00186 { padding: 40px 0; }
  .special_00186 .list { margin-top: 5px; }
  .special_00186 .list .li { width: calc((100% - 20px) / 2); margin: 10px 5px 0; }
  .special_00186 .list .icon { width: 50px; }
  .special_00186 .list .txt { margin-top: 5px; } }