body {

  overflow-x: hidden;

}

.container {

  /*height: 120px;

  width: 600px;

  margin: auto;

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;*/

}

.flip-container {

  perspective: 1000;

  margin: 0.116vw;

  float: left;

  cursor: pointer;

  /*  &:hover{

    .flippable {

      transform: rotateY(180deg);

    }

  }*/

}



  .flip-container:nth-of-type(7n){

    margin-right:0px !important;

  }

.flip-container .flippable {

  transition: 0.5s;

  transform-style: preserve-3d;

  position: relative;

}

.flip-container:hover .flippable {

  transform: rotateY(180deg);

}

.flip-container,

.front,

.back {

  width: 13.959vw;

  height: 13.959vw; line-height:4vw;

  text-align: center;

  font-size: 40px;

  /* border-radius: 5px; */

}

@media screen and (max-width: 1200px){

  .flip-container,

  .front,

  .back {

    width: 13.898vw;

    height: 13.898vw; line-height:4vw;

    text-align: center;

    font-size: 40px;

    /* border-radius: 5px; */

  }

  .flippable div{

    background-size:100%;

  }

  ..tixi11{

    background-size: 100%;

  }

  }

.front,

.back {

  backface-visibility: hidden;

  position: absolute;

  top: 0;

  left: 0;

}

.front {

  z-index: 2;

  color: white;

}

.front span {

  font-size: 20px;

  position: absolute;

  top: -30px;

  left: 10px;

  font-family: verdana;

}

.back {

  transform: rotateY(180deg); 

  font-size: 2.4vw;

  /* border: 1px solid; */

  font-family: Verdana;

  color: white;

}



.back p{ letter-spacing:5px;}



.ac-bicycle .front {

 /* background: #1189d1;*/

}

.ac-bicycle .back {

  background: #f9da4c;

  border-color: #f9da4c;

}

.ac-car .front {

  /*background: #18b755;*/

}

.ac-car .back {

  background: #f9da4c;

  border-color: #f9da4c;

}

.ac-truck .front {

  /*background: #f3b50b;*/

}

.ac-truck .back {

  background: #f9da4c;

  border-color: #f9da4c;

}

.ac-umbrella .front {

  /*background: #ef4809;*/

}

.ac-umbrella .back {

  background: #f9da4c;

  border-color: #f9da4c;

}

.ac-plane .front {

  /*background: #E82C0C;*/

}

.ac-plane .back {

  background: #f9da4c;

  border-color: #f9da4c;

}



.magtop1 p{padding-top: 18%;font-weight: initial;color: #ffffff;font-size: calc(100vw/31.71);}

.magtopadd p{font-size: calc(100vw/36.71);}

.magtop2 p{ font-weight: initial;color: #ffffff;font-size: calc(100vw/31.71);display: block;line-height: 400%;height: 100%;}

.magtop1 p:nth-of-type(2) {

  margin-top: -20%;

}







.tixi01{background:url("tixi01.jpg.png")/*tpa=http://huayangts.com/templets/default/images/tixi01.jpg*/ no-repeat center; }

.tixi02{background:url("tixi02.jpg.png")/*tpa=http://huayangts.com/templets/default/images/tixi02.jpg*/ no-repeat center; }

.tixi03{background:url("tixi03.jpg.png")/*tpa=http://huayangts.com/templets/default/images/tixi03.jpg*/ no-repeat center; }

.tixi04{background:url("tixi04.jpg.png")/*tpa=http://huayangts.com/templets/default/images/tixi04.jpg*/ no-repeat center; }

.tixi05{background:url("tixi05.jpg.png")/*tpa=http://huayangts.com/templets/default/images/tixi05.jpg*/ no-repeat center; }

.tixi06{background:url("tixi06.jpg.png")/*tpa=http://huayangts.com/templets/default/images/tixi06.jpg*/ no-repeat center; }

.tixi07{background:url("tixi07.jpg")/*tpa=http://huayangts.com/templets/default/images/tixi07.jpg*/ no-repeat center; }

.tixi08{background:url("tixi08.jpg.png")/*tpa=http://huayangts.com/templets/default/images/tixi08.jpg*/ no-repeat center; }

.tixi09{background:url("tixi09.jpg.png")/*tpa=http://huayangts.com/templets/default/images/tixi09.jpg*/ no-repeat center; }

.tixi10{background:url("tixi10.jpg.png")/*tpa=http://huayangts.com/templets/default/images/tixi10.jpg*/ no-repeat center; }

.tixi11{background:url("tixi11_logo.jpg")/*tpa=http://huayangts.com/templets/default/images/tixi11_logo.jpg*/ no-repeat center; }

.tixi12{background:url("tixi12.jpg.png")/*tpa=http://huayangts.com/templets/default/images/tixi12.jpg*/ no-repeat center; }

.tixi13{background:url("tixi13.jpg.png")/*tpa=http://huayangts.com/templets/default/images/tixi13.jpg*/ no-repeat center; }

.tixi14{background:url("tixi14.jpg.png")/*tpa=http://huayangts.com/templets/default/images/tixi14.jpg*/ no-repeat center; }

.tixi15{background:url("tixi15.jpg.png")/*tpa=http://huayangts.com/templets/default/images/tixi15.jpg*/ no-repeat center; }

.tixi16{background:url("tixi16.jpg.png")/*tpa=http://huayangts.com/templets/default/images/tixi16.jpg*/ no-repeat center; }

.tixi17{background:url("tixi17.jpg.png")/*tpa=http://huayangts.com/templets/default/images/tixi17.jpg*/ no-repeat center; }

.tixi18{background:url("tixi18.jpg.png")/*tpa=http://huayangts.com/templets/default/images/tixi18.jpg*/ no-repeat center; }

.tixi19{background:url("tixi19.jpg.png")/*tpa=http://huayangts.com/templets/default/images/tixi19.jpg*/ no-repeat center; }

.tixi20{background:url("tixi20.jpg.png")/*tpa=http://huayangts.com/templets/default/images/tixi20.jpg*/ no-repeat center; }

.tixi21{background:url("tixi21.jpg.png")/*tpa=http://huayangts.com/templets/default/images/tixi21.jpg*/ no-repeat center; }







@media screen and (max-width: 640px){

	body{ color:#3C9}

	.caiyicss{ width:100vw; padding-top:20px; height:45vw}

	}

	

	

.caiyicss{ width:100vw; padding: 44px 0;box-sizing: border-box;}

	





.pic iframe{ width:39vw; height:38vw;}