@charset "UTF-8";

/* scale *******************************************************************************************************************/
.case-list ul li a .pic img,
.products-grid-2 ul li a .pic img,
.product-list ul li a .pic img,
.related-list ul li a .pic img,
.case-device .items .item .pic img,
.news-list-pic ul li a .pic img
{ 
  -webkit-transition: transform 0.5s ease; -moz-transition: transform 0.5s ease; -ms-transition: transform 0.5s ease; transition: transform 0.5s ease; 
}

.case-list ul li a:hover .pic img,
.products-grid-2 ul li a:hover .pic img,
.product-list ul li a:hover .pic img,
.related-list ul li a:hover .pic img,
.case-device .items .item:hover .pic img,
.news-list-pic ul li a:hover .pic img
{
  -webkit-transform: scale(1.15); -moz-transform: scale(1.15); -ms-transform: scale(1.15); transform: scale(1.15);
}



/* ring *******************************************************************************************************************/
.ring { position: relative; width: 182px; height: 182px; }
.ring .ring-r,
.ring .ring-l { position: absolute; top: 0; width: 91px; height: 182px; overflow: hidden; }
.ring .ring-r { right: 0; }
.ring .ring-l { left: 0; }
.ring .ring-right,
.ring .ring-left { position: absolute; top: 0; width: 172px; height: 172px; border-radius: 50%; border: 5px solid transparent; 
  -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); 
}
.ring .ring-right { right: 0; border-top-color: #099f00; border-right-color: #099f00; }
.ring .ring-left { left: 0; border-bottom-color: #099f00; border-left-color: #099f00; }

@media (max-width: 1366px){
.ring { width: 160px; height: 160px; }
.ring .ring-r,
.ring .ring-l { width: 80px; height: 160px; }
.ring .ring-right,
.ring .ring-left { width: 150px; height: 150px; border-width: 5px; }
}
@media (max-width: 1024px){
.ring { width: 140px; height: 140px; }
.ring .ring-r,
.ring .ring-l { width: 70px; height: 140px; }
.ring .ring-right,
.ring .ring-left { width: 132px; height: 132px; border-width: 4px; }
}
@media (max-width: 750px){
.ring { width: 120px; height: 120px; }
.ring .ring-r,
.ring .ring-l { width: 60px; height: 120px; }
.ring .ring-right,
.ring .ring-left { width: 114px; height: 114px; border-width: 3px; }
}



/* ring animation ************************/
.superiority-active .ring-1 .ring-right {
  -webkit-animation: ring_1_right 4s linear 0.5s; -moz-animation: ring_1_right 4s linear 0.5s; -ms-animation: ring_1_right 4s linear 0.5s; animation: ring_1_right 4s linear 0.5s; 
  -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; animation-fill-mode: forwards; 
}
.superiority-active .ring-1 .ring-left {
  -webkit-animation: ring_1_left 4s linear 0.5s; -moz-animation: ring_1_left 4s linear 0.5s; -ms-animation: ring_1_left 4s linear 0.5s; animation: ring_1_left 4s linear 0.5s; 
  -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; animation-fill-mode: forwards; 
}

.superiority-active .ring-2 .ring-right {
  -webkit-animation: ring_2_right 5s linear 1s; -moz-animation: ring_2_right 5s linear 1s; -ms-animation: ring_2_right 5s linear 1s; animation: ring_2_right 5s linear 1s; 
  -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; animation-fill-mode: forwards; 
}
.superiority-active .ring-2 .ring-left {
  /*
  -webkit-animation: ring_2_right 5s linear 1s; -moz-animation: ring_2_right 5s linear 1s; -ms-animation: ring_2_right 5s linear 1s; animation: ring_2_right 5s linear 1s; 
  -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; animation-fill-mode: forwards; 
  */
}

.superiority-active .ring-3 .ring-right {
  -webkit-animation: ring_3_right 4s linear; -moz-animation: ring_3_right 4s linear; -ms-animation: ring_3_right 4s linear; animation: ring_3_right 4s linear; 
  -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; animation-fill-mode: forwards; 
}
.superiority-active .ring-3 .ring-left {
  -webkit-animation: ring_3_left 4s linear; -moz-animation: ring_3_left 4s linear; -ms-animation: ring_3_left 4s linear; animation: ring_3_left 4s linear; 
  -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; animation-fill-mode: forwards; 
}

.superiority-active .ring-4 .ring-right {
  -webkit-animation: ring_4_right 4s linear 0.2s; -moz-animation: ring_4_right 4s linear 0.2s; -ms-animation: ring_4_right 4s linear 0.2s; animation: ring_4_right 4s linear 0.2s; 
  -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; animation-fill-mode: forwards; 
}
.superiority-active .ring-4 .ring-left {
  -webkit-animation: ring_4_left 4s linear 0.2s; -moz-animation: ring_4_left 4s linear 0.2s; -ms-animation: ring_4_left 4s linear 0.2s; animation: ring_4_left 4s linear 0.2s; 
  -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; animation-fill-mode: forwards; 
}



/* ring keyframes ************************/

/* ring_1_right */
@-webkit-keyframes ring_1_right {
  0% { -webkit-transform: rotate(-135deg); transform: rotate(-135deg); }
  50%,100% { -webkit-transform: rotate(45deg); transform: rotate(45deg); }
}
@-moz-keyframes ring_1_right {
  0% { -moz-transform: rotate(-135deg); transform: rotate(-135deg); }
  50%,100% { -moz-transform: rotate(45deg); transform: rotate(45deg); }
}
@keyframes ring_1_right {
  0% { -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); }
  50%,100% { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
}


/* ring_1_left */
@-webkit-keyframes ring_1_left {
  0%, 50% { -webkit-transform: rotate(-135deg); transform: rotate(-135deg); }
  80%,
  100% { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); }
}
@-moz-keyframes ring_1_left {
  0%, 50% { -moz-transform: rotate(-135deg); transform: rotate(-135deg); }
  80%,
  100% { -moz-transform: rotate(-90deg); transform: rotate(-90deg); }
}
@keyframes ring_1_left {
  0%, 50% { -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); }
  80%,
  100% { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); }
}


/* ring_2_right */
@-webkit-keyframes ring_2_right {
  0% { -webkit-transform: rotate(-135deg); transform: rotate(-135deg); }
  50%,100% { -webkit-transform: rotate(45deg); transform: rotate(45deg); }
}
@-moz-keyframes ring_2_right {
  0% { -moz-transform: rotate(-135deg); transform: rotate(-135deg); }
  50%,100% { -moz-transform: rotate(45deg); transform: rotate(45deg); }
}
@keyframes ring_2_right {
  0% { -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); }
  50%,100% { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
}


/* ring_2_left */
@-webkit-keyframes ring_2_left {
  0%, 50% { -webkit-transform: rotate(-135deg); transform: rotate(-135deg); }
  75%,
  100% { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
}
@-moz-keyframes ring_2_left {
  0%, 50% { -moz-transform: rotate(-135deg); transform: rotate(-135deg); }
  75%,
  100% { -moz-transform: rotate(-45deg); transform: rotate(-45deg); }
}
@keyframes ring_2_left {
  0%, 50% { -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); }
  75%,
  100% { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
}


/* ring_3_right */
@-webkit-keyframes ring_3_right {
  0% { -webkit-transform: rotate(-135deg); transform: rotate(-135deg); }
  50%,100% { -webkit-transform: rotate(45deg); transform: rotate(45deg); }
}
@-moz-keyframes ring_3_right {
  0% { -moz-transform: rotate(-135deg); transform: rotate(-135deg); }
  50%,100% { -moz-transform: rotate(45deg); transform: rotate(45deg); }
}
@keyframes ring_3_right {
  0% { -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); }
  50%,100% { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
}


/* ring_3_left */
@-webkit-keyframes ring_3_left {
  0%, 50% { -webkit-transform: rotate(-135deg); transform: rotate(-135deg); }
  75%,
  100% { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
}
@-moz-keyframes ring_3_left {
  0%, 50% { -moz-transform: rotate(-135deg); transform: rotate(-135deg); }
  75%,
  100% { -moz-transform: rotate(-45deg); transform: rotate(-45deg); }
}
@keyframes ring_3_left {
  0%, 50% { -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); }
  75%,
  100% { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
}


/* ring_4_right */
@-webkit-keyframes ring_4_right {
  0% { -webkit-transform: rotate(-135deg); transform: rotate(-135deg); }
  50%,100% { -webkit-transform: rotate(45deg); transform: rotate(45deg); }
}
@-moz-keyframes ring_4_right {
  0% { -moz-transform: rotate(-135deg); transform: rotate(-135deg); }
  50%,100% { -moz-transform: rotate(45deg); transform: rotate(45deg); }
}
@keyframes ring_4_right {
  0% { -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); }
  50%,100% { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
}


/* ring_4_left */
@-webkit-keyframes ring_4_left {
  0%, 50% { -webkit-transform: rotate(-135deg); transform: rotate(-135deg); }
  60%,
  100% { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); }
}
@-moz-keyframes ring_4_left {
  0%, 50% { -moz-transform: rotate(-135deg); transform: rotate(-135deg); }
  60%,
  100% { -moz-transform: rotate(-90deg); transform: rotate(-90deg); }
}
@keyframes ring_4_left {
  0%, 50% { -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); }
  60%,
  100% { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); }
}