.ycl2 dd .con{justify-content: center;-webkit-justify-content: center;align-items: center;-webkit-align-items: center;display: flex;display: -webkit-flex;display: -ms-flex;flex-direction: column;-webkit-flex-direction: column;-ms-flex-direction: column;transition: All 0.5s ease;-webkit-transition: All 0.5s ease;-moz-transition: All 0.5s ease;-o-transition: All 0.5s ease;}
.ycl2 .light2{width:11.85rem;background: url('../images/dy.png') no-repeat center;height:4.62rem;position:absolute;top:1.2rem;left:50%;transform: translateX(-50%);background-size: 100%}
.ycl2 .light{
  width: 9.4rem;
  height: 4.79rem;
  position: absolute;
  z-index: 10;
  left: 50%;
  right: auto;
  top: 0rem;
  bottom: auto;
  margin-left: -4.7rem;
}
.ycl2{height:7.5rem;position: relative;background: url('../images/ycl2.jpg') no-repeat center;background-size: cover}
.ycl2 .light canvas {width: 100%; }
.ycl2 h2.title {
  color: #b00000;
  text-align: center;
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  top: 1.12rem;
  bottom: auto;
  font-size: 0.415rem;
  font-weight: bold;

  
}
.ycl2 dd {
  position: absolute;
  z-index: 10;
  left: 50%;
  right: auto;
  top: 2.5rem;
  bottom: auto;
  margin-left: -.99rem;
  text-align: center; 
  font-size: 0.18rem;
}
.ycl2 dd .con{background: url("../images/cir1.png") center no-repeat;background-size: 100%; width: 1.98rem;height: 1.98rem;color: #b00000; animation: upDown 3s infinite linear;
  -webkit-animation: upDown 3s infinite linear; }
.ycl2 dd .icon{margin-bottom: 0.2rem;width: 100%;height: 0.53rem;}
.ycl2 dd.dd_01 .icon{background: url('../images/y_icon1.png') no-repeat center;}
.ycl2 dd.dd_02 .icon{background: url('../images/y_icon2.png') no-repeat center;}
.ycl2 dd.dd_03 .icon{background: url('../images/y_icon3.png') no-repeat center;}
.ycl2 dd.dd_04 .icon{background: url('../images/y_icon4.png') no-repeat center;}

.ycl2 dd.active .con{background: url("../images/cir2.png") center no-repeat;color: #fff}
.ycl2 dd.dd_01.active .icon{background: url('../images/y_icon11.png') no-repeat center;}
.ycl2 dd.dd_02.active .icon{background: url('../images/y_icon22.png') no-repeat center;}
.ycl2 dd.dd_03.active .icon{background: url('../images/y_icon33.png') no-repeat center;}
.ycl2 dd.dd_04.active .icon{background: url('../images/y_icon44.png') no-repeat center;}

.ycl2 dd.dd_01 {
  margin-left: -6.8rem;
  top:2.7rem;
}
.ycl2 dd.dd_02 {
  margin-left: -2.95rem;
  top: 4.9rem; }
.ycl2 dd.dd_03 {
  margin-left: 0.8rem;
  top: 4.9rem;
 }
.ycl2 dd.dd_04 {
  margin-left: 4.82rem;
  top: 2.7rem;
}

.showIn{
  -webkit-animation-name: showIn;
  animation-name: showIn;
}
.showIn1{
  -webkit-animation-name: showIn1;
  animation-name: showIn1;
}
.showIn2{
  -webkit-animation-name: showIn2;
  animation-name: showIn2;
}
.showIn3{
  -webkit-animation-name: showIn3;
  animation-name: showIn3;
}
.showIn4{
  -webkit-animation-name: showIn4;
  animation-name: showIn4;
}

@keyframes showIn {
    0% {
      opacity: 0;
      margin-top: 1rem;
    }
    100% {
      opacity: 1;
      margin-top: 0;
    }
}
@-webkit-keyframes showIn {
    0% {
      opacity: 0;
      margin-top: 1rem;
    }
    100% {
      opacity: 1;
      margin-top: 0;
    }
}

@keyframes showIn1{
    0% {
     top: 2.5rem;
     margin-left: -.99rem;
     opacity: 0;
     transform: scale(0.5);
     -webkit-transform: scale(0.5);
     -moz-transform: scale(0.5);
     -o-transform: scale(0.5);
    }
    100% {

     opacity: 1;
     transform: scale(1);
     -webkit-transform: scale(1);
     -moz-transform: scale(1);
     -o-transform: scale(1); 
     margin-left: -6.8rem;
     top:2.7rem;
    }
}
@-webkit-keyframes showIn1{
    0% {
      top: 2.5rem;
      margin-left: -.99rem;
      opacity: 0;
      transform: scale(0.5);
      -webkit-transform: scale(0.5);
      -moz-transform: scale(0.5);
      -o-transform: scale(0.5);
    }
    100% {
      opacity: 1;
      transform: scale(1);
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -o-transform: scale(1); 
      margin-left: -6.8rem;
      top:2.7rem;
    }
}

@keyframes showIn2{
    0% {
     top: 2.5rem;
     margin-left: -.99rem;
     opacity: 0;
     transform: scale(0.5);
     -webkit-transform: scale(0.5);
     -moz-transform: scale(0.5);
     -o-transform: scale(0.5);
    }
    100% {

     opacity: 1;
     transform: scale(1);
     -webkit-transform: scale(1);
     -moz-transform: scale(1);
     -o-transform: scale(1); 
     margin-left: -2.95rem;
     top: 4.9rem;
    }
}
@-webkit-keyframes showIn2{
    0% {
      top: 2.5rem;
      margin-left: -.99rem;
      opacity: 0;
      transform: scale(0.5);
      -webkit-transform: scale(0.5);
      -moz-transform: scale(0.5);
      -o-transform: scale(0.5);
    }
    100% {
      opacity: 1;
      transform: scale(1);
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -o-transform: scale(1); 
      margin-left: -2.95rem;
      top: 4.9rem;
    }
}
@keyframes showIn3{
    0% {
     top: 2.5rem;
     margin-left: -.99rem;
     opacity: 0;
     transform: scale(0.5);
     -webkit-transform: scale(0.5);
     -moz-transform: scale(0.5);
     -o-transform: scale(0.5);
    }
    100% {

     opacity: 1;
     transform: scale(1);
     -webkit-transform: scale(1);
     -moz-transform: scale(1);
     -o-transform: scale(1); 
     margin-left: 0.8rem;
     top: 4.9rem;
    }
}
@-webkit-keyframes showIn3{
    0% {
      top: 2.5rem;
      margin-left: -.99rem;
      opacity: 0;
      transform: scale(0.5);
      -webkit-transform: scale(0.5);
      -moz-transform: scale(0.5);
      -o-transform: scale(0.5);
    }
    100% {
      opacity: 1;
      transform: scale(1);
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -o-transform: scale(1); 
      margin-left: 0.8rem;
      top: 4.9rem;
    }
}
@keyframes showIn4{
    0% {
     top: 2.5rem;
     margin-left: -.99rem;
     opacity: 0;
     transform: scale(0.5);
     -webkit-transform: scale(0.5);
     -moz-transform: scale(0.5);
     -o-transform: scale(0.5);
    }
    100% {

     opacity: 1;
     transform: scale(1);
     -webkit-transform: scale(1);
     -moz-transform: scale(1);
     -o-transform: scale(1); 
     margin-left: 4.82rem;
     top: 2.7rem;
    }
}
@-webkit-keyframes showIn4{
    0% {
      top: 2.5rem;
      margin-left: -.99rem;
      opacity: 0;
      transform: scale(0.5);
      -webkit-transform: scale(0.5);
      -moz-transform: scale(0.5);
      -o-transform: scale(0.5);
    }
    100% {
      opacity: 1;
      transform: scale(1);
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -o-transform: scale(1); 
      margin-left: 4.82rem;
      top: 2.7rem;
    }
}

@keyframes upDown {
    0% {
      transform: translateY(0); }
    25% {
      transform: translateY(-0.1rem); }
    50% {
      transform: translateY(0); }
    75% {
      transform: translateY(0.1rem); }
    100% {
      transform: translateY(0); }
}
@-webkit-keyframes upDown {
    0% {
      -webkit-transform: translateY(0); }
    25% {
      -webkit-transform: translateY(-0.1rem); }
    50% {
      -webkit-transform: translateY(0); }
    75% {
      -webkit-transform: translateY(0.1rem); }
    100% {
      -webkit-transform: translateY(0); } 
}