div#contarea::before {
  content: "";
  position: absolute;
  width: 120%;
  left: -10%;
  height: 400px;
  top: -215px;
  z-index: -1;
  background-color: #e20074;
  transform: rotate(173deg);
  /*background-image: linear-gradient(#9a004d 90%, #e20074 100%);
  background-image: linear-gradient(to bottom, #e20074 100%, #e50679 50%, #ff339c 0%);*/
  animation-name: anim1;
  animation-duration: 2s;
}
@keyframes anim1 {
  from {
    opacity: 0;
    transform: rotate(163deg);
  }
  to {
    opacity: 1;
    transform: rotate(173deg);
  }
}

div#contarea::after {
  content: "";
  position: absolute;
  width: 120%;
  left: -10%;
  height: 400px;
  top: -315px;
  z-index: -1;
  opacity: 0.6;
  background-color: #e20074;
  transform: rotate(-168deg);
  animation-name: anim2;
  animation-duration: 2s;
}
@keyframes anim2 {
  from {
    opacity: 0;
    transform: rotate(-158deg);
  }
  to {
    opacity: 0.6;
    transform: rotate(-168deg);
  }
}
div#contarea {
  overflow: hidden;
}

div#maincontentarea::before {
  content: "";
  position: absolute;
  width: 120%;
  left: -10%;
  height: 400px;
  top: -165px;
  z-index: -1;
  opacity: 0.4;
  background-color: #e20074;
  transform: rotate(176deg);
  /*background-image: linear-gradient(#9a004d 90%, #e20074 100%);
  background-image: linear-gradient(to bottom, #e20074 100%, #e50679 50%, #ff339c 0%);*/
  animation-name: anim3;
  animation-duration: 2s;
}
@keyframes anim3 {
  from {
    opacity: 0;
    transform: rotate(166deg);
  }
  to {
    opacity: 0.4;
    transform: rotate(176deg);
  }
}

div#maincontentarea::after {
  content: "";
  position: absolute;
  width: 120%;
  left: -10%;
  height: 400px;
  top: -165px;
  z-index: -1;
  opacity: 0.4;
  background-color: #e20074;
  transform: rotate(-176deg);
  animation-name: anim4;
  animation-duration: 2s;
}
@keyframes anim4 {
  from {
    opacity: 0;
    transform: rotate(-166deg);
  }
  to {
    opacity: 0.4;
    transform: rotate(-176deg);
  }
}

div#pic_housing {
  height: 240px;
}
div#pic_housing img {
  width: 300px;
  height: 200px;
  opacity: 1;
  animation-name: anim5;
  animation-duration: 2s;
}
@keyframes anim5 {
  from {
    width: 30px;
    height: 20px;
  }
  to {
    width: 300px;
    height: 200px;
  }
}

div#txt_welcome {
  margin-bottom: 18px;
  opacity: 1;
  animation-name: anim6;
  animation-duration: 3s;
  }
div#txt_welcome span {
  font-size: 30px;
}
@keyframes anim6 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

div#show_extMok,
div#show_dslok {
  opacity: 1;
  animation-name: anim7;
  animation-duration: 6s;
}
div#show_dslok div#show_connect_ok {
  text-align: left;
  padding-left: 70px;
}
div#show_dslok div#show_dsllte_ok {
  text-align: left;
  padding-left: 40px;
}
div#show_lteok div {
  padding-left: 74px;
}
div#show_extMok div {
  padding-left: 70px;
}
div#show_usbTethok div {
  padding-left: 72px;
}
@keyframes anim7 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media only screen and (max-width: 1023px) {
  div#pic_housing img {
    width: 300px;
    height: 200px;
  }
}

@media only screen and (max-width: 767px) {
  div#pic_housing img {
    width: 225px;
    height: 150px;
    margin-top: 36px;
  }
  div#txt_welcome span {
    font-size: 28px;
  }
  @keyframes anim5 {
    from {
      width: 30px;
      height: 20px;
    }
    to {
      width: 225px;
      height: 150px;
    }
  }
}

@media only screen and (max-width: 479px) {
  div#pic_housing {
    height: 252px;
  }
  div#txt_welcome {
    margin-bottom: 8px;
  }
  div#txt_welcome span {
    font-size: 24px;
  }
  div#show_dslok div#paddsl {
    padding-left: 56px;
  }
  div#show_dslok div#padlte {
    padding-left: 16px;
  }
  div#show_lteok div {
    padding-left: 46px;
  }
  div#show_extMok div {
    padding-left: 10px;
  }
}