@charset "utf-8";

.com-card {
  width: 17.5rem;
  height: 100%;
  margin: 0 auto;
}

/* 头部 */
:root {
  --mainColor: #d2783e;
}
body{
  max-width: 100%;
}
.taditionalBoxheader {
  width: 100%;
  height: 1.1125rem;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: #fff;

}

.taditionalBoxheader .logo {
  width: 1.3875rem;
  height: auto;
} 
.taditionalBoxheader .logo   image{
  width: 100%;
  height: auto;
  object-fit: cover;
}
.menu-level1 { 
  height: 100%;

}

.menu-level1>li {
  height: 100%;
  display: flex;
  margin-right: .625rem;
}

.menu-level1>li a {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  font-size: .2rem;
  color: #000000;
}

.menu-level1>li>a::after {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  content: '';
  display: block;
  width: 0;
  height: .0375rem;
  background-color: var(--mainColor);
  transition: all 0.3s;
}
.menu-level1>li:hover a,
.menu-level1>li a.active
{
  color: var(--mainColor);
}
.menu-level1>li:hover a::after,
.menu-level1>li  a.active::after  {
  width: 100%;
}



.index_banner {
  position: relative;
  width: 100%;
  height: auto;
  margin-top: 1.1125rem;
}

.index_banner .bg {
  width: 100%;
  height: auto;
  vertical-align: bottom;
  object-fit: cover;
}

.index_bannerCon {
  width: 100%;
  height: auto;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.index_bannerCon .text {
  width: 5.875rem;
}

.index_bannerCon .icon {
  width: 100%;
  height: auto;
  object-fit: cover;

}


.index_bannerCon h5 {
  font-family: SourceHanSansCN-Bold;
  font-size: .45rem;
  color: var(--mainColor);
  margin: .125rem 0 .1875rem 0;
}

.index_bannerCon p {
  font-size: .225rem;
  color: #000000;
  padding-bottom: .125rem;
  border-bottom: solid .0125rem #b5b5b5;
}

.index_bannerCon h6 {
  font-size: .3rem;
  color: #000000;
  margin: .1875rem 0 .25rem 0;
}

.index_bannerCon a {
  display: inline-block;
  width: fit-content;
  height: .675rem;
  line-height: .675rem;
  padding: 0 .825rem;
  background-color: #d5773f;
  border-radius: .0625rem;
  font-size: .225rem;
  text-align: center;
  color: #ffffff;
}

.taditionalBox1 {
  width: 100%;
  height: auto;
  margin: .125rem 0;
}

.taditionalBox1 a {
  display: flex;
  align-items: center;
  font-size: .2rem;
  color: #000000;
  transition: all 0.3s;
}

.taditionalBox1 a::after {
  display: block;
  content: '»';
  margin: 0 .0625rem;
  font-size: .2rem;
  color: #000000;
}

.taditionalBox1 a:last-child::after {
  display: none;
}

.taditionalBox1 a:hover {
  color: var(--mainColor);
}

.taditionalBox2 {
  width: 100%;
  height: auto;
  margin: .9125rem 0;

}

.taditionalBox2 .top {
  width: 100%;
  height: 8.4375rem;
  background: url(/public/static/images/home/en-us/ic1-4.png) right no-repeat;
  background-size: contain;
  box-shadow: 0px 0px .4375rem 0px rgba(0, 0, 0, 0.11);
  padding: 1.7125rem 0 0 .6rem;
}

.taditionalBox2 .lt {
  position: relative;
  width: 10.6375rem;
  height: 4.55rem;
  background: url(/public/static/images/home/en-us/ic1-5.png) no-repeat;
  background-size: cover;
}

.taditionalBox2 .nu {
  font-weight: bold;
  font-size: .9rem;
  color: var(--mainColor);
  line-height: .9rem;
}

.taditionalBox2 .con {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.taditionalBox2 .con p {
  font-size: .375rem;
  color: var(--mainColor);
}

.taditionalBox2 .icon {
  width: 2.075rem;
  object-fit: cover;
  height: 2.075rem;
  transition: all 0.5s;

}

.taditionalBox2 .item {
  position: absolute;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.taditionalBox2 .item:hover .icon {
  transform: rotate(360deg);
}

.taditionalBox2 .name {
  font-size: .3rem;
  color: var(--mainColor);
}

.taditionalBox2 .lt .item:nth-child(1) {
  top: -1.2875rem;
  left: 1.1rem;
}

.taditionalBox2 .lt .item:nth-child(2) {
  top: -1.2875rem;
  right: 1.1375rem;
}

.taditionalBox2 .lt .item:nth-child(3) {
  flex-direction: column-reverse;
  left: 1.1rem;
  bottom: -1.625rem;
}

.taditionalBox2 .lt .item:nth-child(4) {
  flex-direction: column-reverse;
  bottom: -1.625rem;
  right: 1.1375rem;
}

.taditionalBox2Bto {
  width: 100%;
  height: 8.4375rem;
  box-shadow: 0px 0px .4375rem 0px rgba(0, 0, 0, 0.11);
  margin-top: .5875rem;
}

.taditionalBox2Bto .rt {
  flex: 1;
}

.taditionalBox2Bto .rt .tl {
  padding: .3125rem .15rem .375rem .15rem;
  justify-content: space-between;
}

.taditionalBox2Bto .lr {
  width: 5.6625rem;
  height: 100%;
  background-color: var(--mainColor);

  padding: .625rem .375rem .375rem .25rem;
}

.taditionalBox2Bto .lr h6 {
  font-size: .45rem;
  line-height: .6rem;
  color: #ffffff;
}

.taditionalBox2Bto .lr .text {
  font-size: .225rem;
  line-height: .375rem;
  color: #ffffff;
}

.taditionalBox2Bto .lr .text P {
  margin-top: .4375rem;
}



.taditionalBox2Bto .rt .img {
  width: 9.625rem;
  height: auto;

}

.taditionalBox2Bto .rt .img img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
  object-fit: cover;
}

.taditionalBox2Bto .rt .img li {
  width: calc(100% / 5);
  font-size: .2rem;
  font-weight: 600;
  color: var(--mainColor);
}

.taditionalBox2Bto .rt .img li:first-child {
  padding-left: .4375rem;
}

.taditionalBox2Bto .rt .img li:nth-child(2) {
  padding-left: .1875rem;
}

.taditionalBox2Bto .rt .img li:nth-child(5) {
  padding-left: .35rem;
}

.taditionalBox2Bto .rt .log .icon {
  width: auto;
  height: 1.0875rem;
  object-fit: contain;
}


.taditionalBox2Bto .rt .log p {
  font-size: 12px;
  color: #000000;
  margin: .1125rem 0;
}


.taditionalBox2Bto .rt .log .ls {
  font-size: 10px;
  letter-spacing: 1px;
  color: #000000;
}

.taditionalBox2Bto .bottom .imgs {
  width: 6.7625rem;
  object-fit: cover;
  vertical-align: bottom;
  height: 3.6375rem;
  margin-right: .4375rem;

}

.taditionalBox2Bto .bottom {
  width: 100%;
  padding: 0 .375rem;

  height: auto;
}

.taditionalBox2Bto .bottom .cons {
  width: 100%;
  border-top: 1px solid #e3e3e3;
  padding: .25rem 0;
}

.taditionalBox2Bto .bottom .lrs {
  flex: 1;
}

.taditionalBox2Bto .bottom li {
  width: 100%;
  border-bottom: 1px solid #d9d9d9;
  margin-bottom: .125rem;
  padding-bottom: .0625rem;

}

.taditionalBox2Bto .bottom li h6 {
  font-size: .2rem;
  color: var(--mainColor);
  font-weight: 600;
  margin-bottom: .125rem;
}

.taditionalBox2Bto .bottom li p {
  display: flex;
  align-items: center;
  font-size: .175rem;
  line-height: .3rem;
  color: #000000;
}

.taditionalBox2Bto .bottom li p::before {
  display: block;
  content: '';
  width: .075rem;
  height: .075rem;
  background-color: #d5773f;
  margin-right: .05rem;
  border-radius: 50%;
}

.taditionalBox2Bto .bottom li:last-child {
  border-bottom: none;
}

.com-tl.con {
  text-align: center;
}

.com-tl h3 {
  font-size: .45rem;
  font-weight: 600;
  color: var(--mainColor);
}

.com-tl p {
  font-size: .2rem;
  margin-top: .25rem;
  color: #000000;
}
.taditionalBox3{
  width: 100%;
  padding-top: .75rem;
}
.taditionalBox3 .img {
  cursor: pointer;
  width: 100%;
  height: auto;
  vertical-align: bottom;
  object-fit: cover;
}

.taditionalBox3 a {
  display: inline-block;
  width: 100%;
  height: auto;
  margin-top: .625rem;
}

/* 视频播放 */

.cboxOverlay {
  position: fixed;
  z-index: 100001;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: none;
}



.colorbox {
  position: fixed;
  width: 90%;
  height: 80%;
  top: 10%;
  left: 5%;
  background: #ffffff;
  z-index: 100002;
  display: none;
}

.colse_click {
  position: absolute;
  top: -30px;
  right: 0;
  width: 25px;
  height: 25px;
  background: url("https://youibot.usa18.mega--cloud.com/public/static/images/home/en-us/reset/closeVideo.png") no-repeat center;
  cursor: pointer;
}

.colorbox iframe {
  width: 100%;
  height: 100%;
}

.taditionalBox4 {
  width: 100%;
  height: auto;
  padding: 1.375rem 0 1.625rem 0;
}

.taditionalBox4 .lt {
  flex: 1;
}

.taditionalBox4 .lt .text {
  margin-bottom: .375rem;
}

.taditionalBox4 .lt .text p {
  font-size: .2rem;
  line-height: .375rem;
  color: #000000;
  margin-top: .25rem;
}

.taditionalBox4 .lt li {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.taditionalBox4 .lt li h6 {
  font-size: .6rem;
  line-height: .45rem;
  font-weight: 600;
  color: var(--mainColor);
}

.taditionalBox4 .lt li p {
  font-size: .225rem;
  color: #000000;
  margin-top: .1875rem;
}

.taditionalBox4 .img {
  width: 8.875rem;
  height: 6.2125rem;
  vertical-align: bottom;
  object-fit: cover;
  margin-left: .75rem;
}

.taditionalBox5 {
  width: 100%;
  height: auto;
  background-color: #f3f2f3;
  padding: 1rem 0 .375rem 0;
}

.taditionalBox5Swiper {
  width: 100%;
  height: auto;
  overflow: hidden;
  margin-top: .6875rem;
}

.taditionalBox5Swiper .img {
  width: 100%;
  height: 4.8125rem;
  overflow: hidden;
  border-bottom: .025rem solid var(--mainColor);
}

.taditionalBox5Swiper .swiper-slide:hover img {
  transform: scale(1.2);
}

.taditionalBox5Swiper .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: bottom;
  transition: all 0.3s;
}

.taditionalBox5Swiper .text {
  width: 100%;
  height: 3.3375rem;
  background-color: #ffffff;
  box-shadow: 0px 0px .3375rem 0px rgba(108, 108, 108, 0.2);
  border-radius: .125rem;
  padding: .1875rem 1.25rem .1875rem .375rem;
}

.taditionalBox5Swiper h6 {
  font-size: .3rem;
  color: #000000;
}

.taditionalBox5Swiper p {
  font-size: .225rem;
  line-height: .3rem;
  color: #000000;
  margin: .125rem 0 .3125rem 0;
}

.taditionalBox5Swiper li {
  align-items: flex-start;
}

.taditionalBox5Swiper li .nu {
  font-size: .45rem;
  line-height: .45rem;
  font-weight: bold;
  color: var(--mainColor);
}

.taditionalBox5Swiper li .ls {
  font-size: .225rem;
  margin-top: .1875rem;
  color: #000000;
}

.taditionalBox5-pagination {
  margin-top: .625rem;
}

.taditionalBox5-pagination .swiper-pagination-bullet,
.taditionalBox6-pagination .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: transparent;
  border: solid 1px #bfbfbf;
  margin: 0 5px;
  opacity: 1;
  transition: all 0.3s;
}

.taditionalBox5-pagination .swiper-pagination-bullet-active,
.taditionalBox6-pagination .swiper-pagination-bullet-active {
  background-color: var(--mainColor);
  border: none;
}

.taditionalBox6 {
  width: 100%;
  height: auto;
  padding: .75rem 0;
}

.taditionalBox6 ul {
  margin-top: .5625rem;
}

.taditionalBox6 li {
  width: 2.25rem;
  height: 1.05rem;
  background-color: #ffffff;
  box-shadow: 0px 0px .3375rem 0px rgba(0, 0, 0, 0.11);
  margin: 0 .2875rem .2625rem 0;
  transition: all 0.3s;
}

.taditionalBox6 li:nth-child(7n) {
  margin-right: 0;
}

.taditionalBox6 li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: bottom;

}

.taditionalBox6 li:hover {
  transform: translateY(-10%);
}

.taditionalBox6Con {
  position: relative;
  width: 100%;
  height: 9.5625rem;
  overflow: hidden;
  padding: .4375rem 1.1875rem;
  border: solid 1px #e5e5e5;
}

.taditionalBox6Swiper {
  width: 100%;
  height: 8.0375rem;
  overflow: hidden;
}

.taditionalBox6-pagination {
  margin-top: .4625rem;
}

.taditionalBox6Swiper img {
  width: 100%;
  height: 100%;
  vertical-align: bottom;
  object-fit: cover;
}

.taditionalBox6-next,
.taditionalBox6-prev {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: .2625rem;
  height: .3625rem;
  background: url(/public/static/images/home/en-us/ic8-1.png) no-repeat;
  background-size: contain;

}

.taditionalBox6-next {
  left: .4375rem;
}

.taditionalBox6-prev {
  right: .4375rem;
  transform: rotate(180deg);
}

.taditionalBox6-prev:hover {
  background: url(/public/static/images/home/en-us/ic8-2.png) no-repeat;
  background-size: contain;
  transform: rotate(0);
}

.taditionalBox6-next:hover {
  transform: translateY(-50%) rotate(180deg);
  background: url(/public/static/images/home/en-us/ic8-2.png) no-repeat;
  background-size: contain;
}

.taditionalBox7 {
  width: 100%;
  height: auto;
  background-color: #f3f2f3;
  padding: .75rem 0 .5625rem 0;
}

.taditionalBox7 ul li:first-child .dot {
  width: 0;
  height: 0;
  border-left: .1125rem solid transparent;
  border-right: .1125rem solid transparent;
  border-top: .2rem solid var(--mainColor);
}

.taditionalBox7 ul li:nth-child(2) .dot {
  width: .2375rem;
  height: .2375rem;
  border-radius: 50%;
  background-color: rgba(238, 119, 22, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;

}

.taditionalBox7 ul li:nth-child(2) .dot::after {
  display: block;
  content: '';
  width: .1625rem;
  height: .1625rem;
  border-radius: 50%;
  background-color: var(--mainColor);
}


.taditionalBox7 ul li:nth-child(3) .dot {
  width: .225rem;
  height: .225rem;
  background-color: rgba(238, 119, 22, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;

}

.taditionalBox7 ul {
  margin: .4375rem 0;
}

.taditionalBox7 ul li:nth-child(3) .dot::after {
  display: block;
  content: '';
  width: .175rem;
  height: .175rem;
  background-color: var(--mainColor);
}

.taditionalBox7 li {
  margin-right: 1.275rem;
}

.taditionalBox7 li:last-child {
  margin-right: 0;
}

.taditionalBox7 li p {
  font-size: .225rem;
  color: #000000;
  margin-left: .15rem;
}

.taditionalBox7Con {
  width: 100%;
  height: 5.5875rem;
}

.taditionalBox7Con .bg {
  width: auto;
  height: 100%;
  object-fit: contain;
}

.taditionalBox9 {
  width: 100%;
  height: auto;
  padding: .875rem 0;
  background-color: #f3f2f3;
}

.taditionalBox9Swiper {
  position: relative;
  width: 100%;
  height: 9.75rem;
  overflow: hidden;
  margin-top: .625rem;
}

.taditionalBox9Swiper .default {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .5rem 1.5rem .125rem .375rem;
}

.taditionalBox9Swiper .default .name {
  position: absolute;
  top: .5rem;
  left: 0;
  font-size: .375rem;
  font-weight: bold;
  color: #000000;
}

.taditionalBox9Swiper .con {
  display: inline-block;
  width: 100%;
  height: 100%;
  transition: all 0.3s;
  background-color: #ffffff;
}

.taditionalBox9Swiper .default .img {
  position: relative;
  width: 100%;
  height: 5.5625rem;
  overflow: hidden;
}

.taditionalBox9Swiper .default li {
  display: flex;
  width: calc(100% / 3);
  flex-direction: column;
  margin-bottom: .1875rem;
}

.taditionalBox9Swiper .default img {
  width: 5.9375rem;
  height: 100%;
  object-fit: cover;
  vertical-align: bottom;
}

.taditionalBox9Swiper .default .text {
  width: 100%;
  height: auto;
  padding-left: .5rem;

}

.taditionalBox9Swiper .default h6 {
  font-size: .375rem;
  color: #000000;
  margin-bottom: .3125rem;
}

.taditionalBox9Swiper .default .nu {
  font-size: .3rem;
  font-weight: bold;
  color: var(--mainColor);
}

.taditionalBox9Swiper .default li p {
  font-size: .2rem;
  color: #000000;
}


.taditionalBox9Swiper .active h5 {
  font-size: .3rem;
  color: #ffffff;
}

.taditionalBox9Swiper .active .ls {
  position: relative;
  font-size: .225rem;
  line-height: .45rem;
  color: #ffffff;
  padding-left: .575rem;
  margin-bottom: .5625rem;
}

.taditionalBox9Swiper .active .ls::after {
  display: block;
  position: absolute;
  left: 0;
  top: .1625rem;
  content: '';
  width: .2rem;
  border-radius: 50%;
  height: .2rem;
  background-color: #ffffff;
}

.taditionalBox9Swiper .active {
  display: none;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  padding: .625rem .3rem .25rem .275rem;
}

.taditionalBox9Swiper .active .text {
  overflow: hidden;
  margin-top: .5rem;
}

.taditionalBox9Swiper .con:hover  {
  background-color: var(--mainColor);
}

.taditionalBox9Swiper .con:hover .active {
  display: flex;
}

.taditionalBox9Swiper .con:hover .default {
  display: none;
}

.taditionalBox9Swiper .active .ls::before {
  display: block;
  content: '';
  position: absolute;
  top: .3375rem;
  left: .0875rem;
  width: .0125rem;
  height: 1.4rem;
  background-color: #ffffff;
}

.taditionalBox9Swiper .active .img {
  position: relative;
  cursor: pointer;
  width: 100%;
  height: 4.125rem;
  overflow: hidden;
}

.taditionalBox9Swiper .active img {
  width: 100%;
  height: 100%;
  vertical-align: bottom;
  object-fit: cover;
}
.taditionalBox9Swiper .swiper-slide {
    border-right: .025rem solid #eee;
}

.taditionalBox9Swiper .active .name {
	display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 5.8625rem;
  height: .925rem;
  font-size: .5rem;
  font-weight: bold;
  color: #fff;
  text-align: center;
  line-height: .925rem;
  background-color: rgba(238, 119, 22, 0.5);
}

.taditionalBox9-next,
.taditionalBox9-prev {
  width: .5rem;
  cursor: pointer;
  height: .5rem;
  position: absolute;
  z-index: 777;
  top: 50%;
  transform:translateY(-50%);
  transition: all 0.3s;
}
.taditionalBox9-next {
  left: .175rem;
  background: url(/public/static/images/home/en-us/ic13.png) no-repeat;
  background-size: contain;
}

.taditionalBox9-prev {
  background: url(/public/static/images/home/en-us/ic13.png) no-repeat;
  background-size: contain;
  right: .175rem;
  transform: translateY(-50%) rotate(180deg);
}

.taditionalBox9-next:hover {
  background: url(/public/static/images/home/en-us/ic13-1.png) no-repeat;
  background-size: contain;
  transform: translateY(-50%) rotate(180deg);
}

.taditionalBox9-prev:hover {
  background: url(/public/static/images/home/en-us/ic13-1.png) no-repeat;
  background-size: contain;
  transform: rotate(0) translateY(-50%);
}

.taditionalBox8 {
  width: 100%;
  height: auto;
  padding: 1.25rem 0;
}

/* biaodan */
.taditionalBox8Con{
  margin-top: .625rem;
}
.taditionalBox8Con  .info {
  width:calc((100% - .2375rem ) / 2);
  position: relative;
  	height: .675rem;
    margin-bottom: .2375rem;
}

.taditionalBox8Con  .info .tips {
  position: absolute;
  right: .25rem;
  top: 50%;
  transform: translateY(-50%);
  color: red;
}


.taditionalBox8Con .info input[type="text"],
.taditionalBox8Con   textarea {
  height: 100%;
  width: 100%;
  background-color: #ffffff;
  border-radius: 1px;
  border: solid 1px #cccccc;
  padding-left: .25rem;
}

.taditionalBox8Con  textarea {
	height: 1.4rem;
  padding-top: .125rem;
}

.taditionalBox8Con .info input::placeholder,
.taditionalBox8Con  textarea::placeholder,
.taditionalBox8Con .info select {
	font-size: .225rem;
	color: #000000;
}


.taditionalBox8Con .info input[type="submit"] {
 	width: 3.625rem;
	height: .6625rem;
  line-height: .6625rem;
	background-color: #d5773f;
	border-radius: .0625rem;
  	font-size: .225rem;
text-align: center;
	color: #ffffff;
}
.taditionalBox8Con .info select{
  width: 100%;
  height: 100%;
  padding-left: .2375rem;
}

.taditionalBox8Con .info.code .tips {
  right: 3.875rem;
}
.taditionalBox8Con  .code {
  margin-top: .1125rem;
}
.taditionalBox8Con  .code  img{
  cursor: pointer;
  	width: 2.35rem;
    object-fit: cover;
    vertical-align: bottom;
	height: .675rem;
}

.taditionalBox8Con  .code  input[type=text]{
  width: 3.5625rem ;
}


.taditionalBox10 {
  width: 100%;
  height: auto;

}
.taditionalBox10 .top{
  width: 100%;
  height: auto;
  	background-color: #3b3b3b;
    padding: .5625rem 0;
}

.taditionalBox10  .nav a{
  display: inline-block;
  	font-size: .225rem;
    padding-right: .375rem;
    margin-right: .375rem;
line-height: .25rem;
  border-right: .025rem  solid  #b9b9b9;
	color: #b9b9b9;
}

.taditionalBox10  .nav a:last-child{
  padding-right: 0;
  margin-right: 0;
  border-right: none;
}
.taditionalBox10 li {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: .225rem;
}
.taditionalBox10 li .qr{
  	width: 1.225rem;
    object-fit: cover;
	height: 1.225rem;
}
.taditionalBox10 li  p{
  	font-size: 14px;
margin-top: .0875rem;
	color: #fffefe;
}
.taditionalBox10  .con{
  margin-top: .5rem;
}
.taditionalBox10  li .icon{
  	width: .55rem;
    object-fit: cover;
    margin-right: .1625rem;
	height: .55rem;
}
.taditionalBox10    .eml{
  	width: 3.6875rem;
	height: 1.225rem;
	border-radius: 1px;
  justify-content: center;
      flex-direction: row;
	border: solid 1px  rgba(238, 234, 234, 0.1);
}

.taditionalBox10    .eml h6{
  font-size: .3rem;
	font-weight: normal;
	color: #ffffff;
}

.taditionalBox10   .bto{
  	height: 60px;
    	font-size: 14px;
      line-height: 60px;
      text-align: center;
	color: #b9b9b9;
	background-color: #292929;
}

/* --------侧边 */


.Fast_contact {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1001
}

.Fast_contact ul li.onlineservice_li {
    width: 48px;
    height: 48px;
    position: relative;
    text-align: center;
    margin-bottom: 5px;
    background-color: #333333;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

}

.Fast_contact ul li.onlineservice_li.email_click {
    display: none
}

.Fast_contact ul>li.onlineservice_li>a {
    display: inline-block;
    width: 28px;
    height: 28px;
    margin-top: 10px
}

.Fast_contact ul>li:hover .onlineservice_tips {
    -webkit-transform: rotateX(0);
    transform: rotateX(0)
}

.onlineService_qq {
    background-image: url("https://youibot.usa18.mega--cloud.com/public/static/images/home/en-us/reset/Fast.png");
    background-repeat: no-repeat;
    background-position: 0 0
}

.Fast_contact ul>li.onlineservice_li>a.onlineService_tel {
    width: 30px;
    height: 30px;
    background-image: url("https://youibot.usa18.mega--cloud.com/public/static/images/home/en-us/reset/fastPhone.png");
    background-repeat: no-repeat;
    background-position: 0 0
}

.onlineService_form {
    background-image: url("https://youibot.usa18.mega--cloud.com/public/static/images/home/en-us/reset/fastForm.png");
    background-repeat: no-repeat;
    background-position: 0 0
}

.onlineService_whatsApp {
    background-image: url("https://youibot.usa18.mega--cloud.com/public/static/images/home/en-us/reset/Fast.png");
    background-repeat: no-repeat;
    background-position: 0 -139px
}

.onlineService_email {
    background-image: url("https://youibot.usa18.mega--cloud.com/public/static/images/home/en-us/reset/Fast.png");
    background-repeat: no-repeat;
    background-position: 0 -111px
}

.onlineService_skype {
    background-image: url("https://youibot.usa18.mega--cloud.com/public/static/images/home/en-us/reset/Fast.png");
    background-repeat: no-repeat;
    background-position: 0 -28px
}

.onlineService_wechat {
    background-image: url("https://youibot.usa18.mega--cloud.com/public/static/images/home/en-us/reset/Fast.png");
    background-repeat: no-repeat;
    background-position: 0 -203px
}

.for_wechat span {
    display: block;
    text-align: center
}

.onlineservice_tips {
    padding: 5px 8px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    position: absolute;
    right: 58px;
    top: 6px;
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg);
    -webkit-transition: all .4s;
    transition: all .4s
}

.onlineservice_tips li {
    width: auto;
    height: auto;
    white-space: nowrap
}

.onlineservice_tips li a {
    display: block;
    min-height: 22px;
    text-align: center;
    line-height: 22px;
    color: #737578;
    font-size: 15px
}

.onlineservice_tips li a.for_wechat {
    height: auto
}

.onlineservice_tips li a.for_wechat img {
    max-width: 240px
}

.onlineservice_tips li a:hover {
    text-decoration: underline
}

.onlineservice_tips:after {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1px solid #ccc;
    border-color: transparent #ccc #ccc transparent;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    position: absolute;
    right: -6px;
    top: 10px;
    background-color: #fff;
    transition: all .3s;
}
.Fast_contact ul>li:hover .onlineservice_tips:after{
    border: 1px solid #ccc;
    border-color: transparent #ccc #ccc transparent;
    background-color: #fff;
    transition: all .3s;
}

.f_follow_service {
    margin-top: 0
}

.f_follow_service a {
    display: inline-block;
    margin: 1px;
    text-align: center
}

.f_follow_service a span {
    display: inline-block;
    width: 32px;
    height: 32px;
    vertical-align: middle;
    transition: all .3s
}

.Fast_contact .Fast_follow li .iconfont {
    font-size: 30px;
    color: #ffffff;
    font-weight: 600;
}


.Fast_contact .Fast_follow li {
    width: 48px;
    height: 48px;
    position: relative;
    text-align: center;
    margin-bottom: 5px;
    background-color: #333333;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.Fast_contact .Fast_follow li .iconfont {
    font-size: 30px;
    color: #ffffff;
    font-weight: 600;
}

.Fast_contact .show {
    width: 33px;
    height: 33px;
    background: #333333;
    border-radius: 5px;
    margin: 0 auto 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.Fast_contact .show .iconfont {
    transform: rotate(45deg);
    color: #ffffff;
    font-size: 20px;
}
.Fast_contact .show .iconfont {
    transform: rotate(45deg);
    color: #ffffff;
    font-size: 20px;
}

.rotate {
    transform: rotate(180deg) !important;
}


.taditionalBoxheader .langBox {
  position: relative;
    cursor: pointer;
  display: flex;
  align-items: center;
}

.en {
    display: flex;
    align-items: center;
}

i.iconfont.icon-diqiu {
    /*color: #ffff;*/
    font-size: 16px;
}

i.iconfont.icon-xiala {
    /*color: #ffff;*/
    font-size: 24px;
    font-weight: 800;
}

.taditionalBoxheader .langBox span {
    margin: 0 0px 0 .0625rem;
    display: inline-block;
    text-align: center;
    font-size: .225rem;
    font-weight: 500;
    color: #232323;
    cursor: pointer;
    transition: all .3s;
}
.taditionalBoxheader  .rt{
	height: 100%;
}
.taditionalBoxheader .langBox ul {
    position: absolute;
    z-index: 20;	    top: .7rem;
    left: 50%;
    transform: translateX(-50%);
    border: 1px solid #EEEEEE;
    background: #ffffff;
    display: none;
}

.langBox ul a {
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 28px;
    padding: 0 10px;
    color: #D2783E;
	    white-space: nowrap;
}

.langBox ul li a:hover {
    background: #D2783E;
    color: #ffffff;
}

.en:hover,
.en:hover span {
    color: #D2783E;
    transition: all 0.5s;
}

.m_header {
    display: none;
}

.footer_box .footerOther {
    background: url("https://youibot.usa18.mega--cloud.com/public/static/images/home/en-us/footBack.png") no-repeat center;
    height: 193px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.taditionalBox8Con.bto .info input[type="text"]{
    padding-left: 0;

}

.taditionalBox8Con.bto     textarea,
.taditionalBox8Con.bto  .info select{
  padding-left: 10px;
}
.taditionalBox8Con.bto  .info.code .tips {
    right: 0;
}


@media screen and (min-width: 1921px) {
  html{
    font-size: 80px !important;
  }
}

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

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

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

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

@media screen and (max-width: 1024px) {
   .com-card{
    width: 100%;
    padding: 0 4%;
   }
   .taditionalBoxheader {
   height: 60px;
}

.index_bannerCon .icon{
  display: none;
}
.taditionalBox1 a ,
.taditionalBox2Bto .lr h6,
.taditionalBox2Bto .bottom li h6,
.taditionalBox5Swiper li .nu{
    font-size: 16px;
}
.taditionalBox2Bto  {
  flex-wrap: wrap;
  height: auto;
}
.taditionalBox2Bto .bottom .cons,
.taditionalBox4 .com-card{
  flex-wrap: wrap;
}
.taditionalBox2Bto .lr {
width: 100%;
height: auto;
  padding: 2%;
}
.taditionalBox2Bto .bottom .imgs{
  width: 100%;
  height: auto;
  margin:  0 0 10px 0;

}.taditionalBox2Bto .bottom li p{
  font-size: 14px;
  margin:5px 0;
}
.taditionalBox2Bto .bottom li{
  padding-bottom: 5px;
  margin-bottom: 10px;
}
.taditionalBox2{
  margin:   15px 0;
}
.com-tl h3{
  font-size: 18px;
}
.com-tl p {
   margin-top: 8px;
}
.taditionalBox3 a{
  margin-top: 15px;
}

.taditionalBox4 .img{
  width: 100%;
  height: auto;
  margin:  10px 0 0 ;
}
.taditionalBox4,
.taditionalBox8{
  padding: 20px 0;
}
.taditionalBox5Swiper .text {
    height: auto;
    padding: 2%;
}
.taditionalBox6 li{
  margin:  0 10px 10px 0;
}
.taditionalBox6 li:nth-child(7n){
  margin-right: 10px;
}.taditionalBox6Con,
.taditionalBox6Swiper{
  height: auto;
}
.index_banner {
    margin-top: 143px;
}

.taditionalBox8Con.bto   .info {
    width: 100%;
    margin-top: 0;
}


}
@media screen and (max-width: 768px) {
  .taditionalBoxheader  .com-card,
  .menu-level1,
  .taditionalBox8Con .info-top{
    flex-wrap: wrap;
  }
    .menu-level1{
      width: 100%;
    }
  .taditionalBoxheader ,
  .taditionalBox5Swiper .img {
    height: auto;
  }
  .menu-level1>li {
   width: calc(100% / 3);
    display: flex;
    align-items: center;
    margin:  0  0 10px  0;
   
  }
.menu-level1>li a {
  display: inline-block;
  width: 100%;
 font-size: 14px;
 text-align: center;
 padding-bottom: 5px;
}

  .taditionalBoxheader  .top{
    width: 100%;
    height: auto;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 2% 4%;
  }
  .index_bannerCon h5{
    font-size: 18px;
  }
  .index_bannerCon a {
   height: 30px;
   line-height: 30px;
   padding:  0 10px;
}
.index_bannerCon h6 ,
.index_bannerCon p,
.taditionalBox2 .top,
.taditionalBox2Bto .rt .log,
.taditionalBox10 .nav,
.taditionalBox10 .eml{
  display: none;
}

.taditionalBox11.Fast_contact .Fast_follow ,
.taditionalBox11.Fast_contact .show,
#back_top{
    display: none !important;
}
.taditionalBox2Bto .rt .img,
.taditionalBox8Con  .info{
  width: 100%;
}
.taditionalBox9Swiper,
.taditionalBox9Swiper .default .img,
.taditionalBox9Swiper .active .img,
.taditionalBox7Con {
  height: auto;
}
.taditionalBox9Swiper .active .ls{
  margin-bottom: 10px;
}
.taditionalBox5,
.taditionalBox6,
.taditionalBox7,
.taditionalBox10 .top{
  padding: 20px 0;
}
.taditionalBox9Swiper .default,
.taditionalBox6Con  {
   padding:  2%;
}
.taditionalBox5Swiper,
.taditionalBox6 ul,
.taditionalBox8Con{
  margin-top: 15px;
}
.taditionalBox6-next, .taditionalBox6-prev {
   z-index: 99;
}
.taditionalBox7 ul{
  flex-wrap: wrap;
}
.taditionalBox7 li{
  flex-grow: 1;
  margin:  0 0 10px 0;
}
.taditionalBox10 li .qr{
  width: 110px;
  height: 110px;
}

.taditionalBox11.Fast_contact  .onlineservice_li{
  width: calc((100%) / 2);
  margin-bottom: 0;
  border-radius: 0;
}

.taditionalBox11.Fast_contact {
  left: 0;
  bottom: 0;
  height: auto;
  top: auto;
  transform: translateY(0);
}
.taditionalBoxheader .langBox {
    position: absolute;
    top: 15%;
    right: 2%;
}



}
@media screen and (max-width: 420px) {
	
	.taditionalBox9-next,
	.taditionalBox9-prev{
		  position: static;
	}
	.taditionalBox9{
		padding: 30px 0  10px 0 ;
	}
		.taditionalBox9-next{
			margin-right: 15px;
		}
	.taditionalBox9   .bto{
		margin-top: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
.taditionalBox9Swiper .active .name {
 width: 70%;
}
.taditionalBox6 li{
width: calc((100% - 10px) / 2);
  height: auto;
}
.taditionalBox6 li img {
    object-fit: contain;
}
.taditionalBox6 li:nth-child(2n){
  margin-right: 0;
}
.taditionalBox6 li:last-child{
  margin-right: 0;
}
.taditionalBox6-next, .taditionalBox6-prev {
    top: 41%;
}
.taditionalBox8Con  .code  input[type=text] {
    width: 70%;
}
.taditionalBox8Con  .code  img {
width:  150px;
}
.taditionalBoxheader .langBox ul {
    top: 100%;
}


}
@media screen and (max-width: 375px) {
  .taditionalBox8Con  .code  img {
    width: 114px;
}
}
@media screen and (max-width: 360px) {
  .taditionalBox10   .bto {
 height: auto;
 line-height: 25px;
 padding:  2% 4%;
}
}