:root{
    --mainColor: #f08519;
}
.comHover:hover {
  box-shadow: 0 0 15px rgba(236, 151, 24, 0.6);
  transform: translateY(-5px);
}
.com-card{
  width: 20rem;
  height: 100%;
  margin:  0 auto;
}

.flex{
  display: flex;
}
.flex-c{
  display: flex;
  align-items: center;
}
.flex-wp{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.flex-btn{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex-con{
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.iderExhibitionBox1{
  width: 100%;
  height: auto;
  padding: 1rem   0 1.625rem 0;
}

.com-tl{
  position: relative;
        font-family: var(--ant);
	font-size: .6rem;
	line-height: 140px;
	letter-spacing: .05rem;
	color: var(--mainColor);
  line-height: .75rem;
  text-align: center;
  z-index: 1;
}
.com-tl::after{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -0.1875rem;
  display: block;
  content: '';
  	width: 3.5rem;
	height: .525rem;
	background-color: var(--mainColor);
	opacity: 0.2;
  z-index: -1;
}

.coverImg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align:bottom ;
  transition: all 0.3s;
}
.hoverImg:hover  img{
  transform: scale(1.1);
}

.iderExhibitionBox1 .title{
	font-size: .2rem;
	line-height: .375rem;
  text-align: center;
  width: 60%;
  margin:  0  auto;
  margin-top: .4375rem;
	color: #6a6a6a;
}
.iderExhibitionBox1Con{
  width: 100%;
  height: auto;
  margin-top: .6875rem;
  position: relative;
}
.iderExhibitionBox1Swiper{
  width: 100%;
  height: auto;
  overflow: hidden;
}
.iderExhibitionBox1Swiper .img{
  width: 100%;
  height: 4.675rem;
  overflow: hidden;
}
.iderExhibitionBox1Swiper .name{
  width: 100%;
  height: 1.2125rem;
  padding: .1875rem  .25rem ;
  cursor: pointer;
  background-color: #fff;
  border: none;
}
.iderExhibitionBox1Swiper .name h3{
  	font-size: .225rem;
	font-family: Poppins-Regular;
	color: #000000;
  text-align: center;
}
.iderExhibitionBox1Swiper .name .mores{
  	font-size: .2rem;
	color: #6a6a6a;
    text-align: center;
    margin-top: .125rem;
    transition: all 0.3s;
}
.iderExhibitionBox1Swiper .swiper-slide:hover .mores{
  color: var(--mainColor);

  text-decoration: underline;
}
.iderExhibitionBox1-prev,
.iderExhibitionBox1-next{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  	width: .3rem;
	height: .425rem;
  background: url(../picture/im1.png)  no-repeat;
  background-size: cover;
      filter: grayscale(1);
      z-index: 99;
      transition: all 0.3s;
}


.iderExhibitionBox1-prev{
  left: -0.75rem;
  transform:translateY(-50%)  rotate(180deg);
}
.iderExhibitionBox1-next{
  right: -0.75rem;
}

.iderExhibitionBox1-next:hover,
.iderExhibitionBox1-prev:hover{
  filter: none;
}

.iderExhibitionBox2{
  width: 100%;
  height: 11.25rem;
}
.com-tl2{
  	font-size: .2rem;
	color: #f3f5fa;
}

.iderExhibitionBox2 .com-tl{
color: #fff;
}
.iderExhibitionBox2 .text{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
      justify-content: center;
    height: 100%;
}
.iderExhibitionBox2 .com-tl::after{
  opacity: 1;
}
.com-ls30{
  	font-size: .2rem;
	line-height: .375rem;
	color: #f3f5fa;
}
.iderExhibitionBox2 .com-ls30{
  width: 30%;
  margin: .625rem  0 .25rem 0;
}
.comAquote{
  cursor: pointer;
  display: block;
  	width: 3.1875rem;
	height: .7rem;
  line-height: .7rem;
	background-color: var(--mainColor);
	border-radius: .0625rem;
  	font-family: Poppins-Medium;
	font-size: .2rem;
text-align: center;
transition: all 0.3s;
	color: #ffffff;
}

.iderExhibitionBox3{
  width: 100%;
  height:auto;
  padding: .75rem 0  .375rem 0;
  background-color: #f3f5fa;
}
.iderExhibitionBox3 .title{
  color: #6a6a6a;
  width: 65%;
  text-align: center;
  margin:  0 auto;
  margin-top: .5rem;
}
.iderExhibitionBox3 .com-ls30{
    color: #6a6a6a;
}
.iderExhibitionBox3 li{
  width: 100%;
  	height: 6.05rem;
    margin-bottom: .5rem;
}

.iderExhibitionBox3 li .img{
  	width: 10.0375rem;
    height: 100%;
    overflow: hidden;
}
.iderExhibitionBox3 li .con{
  width: 100%;
  height: 100%;
}
.iderExhibitionBox3 li .text{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  background-color: #fff;
  padding: .5rem   1.25rem  .5rem  .625rem;
}
.iderExhibitionBox3  .text .mores{
  display: block;
  	width: 2.15rem;
	height: .7rem;
	border-radius: .0625rem;
	border: solid 1px var(--mainColor);
  	font-family: Poppins-Light;
	font-size: .2rem;
text-align: center;
line-height: .7rem;
	color: var(--mainColor);
  transition: all 0.3s;
}
.iderExhibitionBox3  .text .comAquote{
  	width: 2.15rem;
    margin-right: .125rem;
}
.iderExhibitionBox3 ul{
  margin-top: .5625rem;
}
.iderExhibitionBox3  .text  h3{
  font-family: var(--ant);
  	font-size: .375rem;
	letter-spacing: .025rem;
	color: #000000;
}
.iderExhibitionBox3  .text p{
	font-size: .3rem;
	color: #6a6a6a;
}

.iderExhibitionBox4{
  width: 100%;
  height: auto;
  padding: .625rem 0  .75rem 0;
}
.iderExhibitionBox4 .com-ls30{
  color: #fff;
  margin: .0625rem  0  .25rem 0;
}
.iderExhibitionBox4Swiper{
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  margin-top: 1rem;
}
.iderExhibitionBox4Swiper .swiper-slide{
  	width: 10.8125rem;
    position: relative;
}
.iderExhibitionBox4Swiper .text{
	width: 9.6rem;
	height: 10.3875rem;
  opacity: 0;
  transition: all 0.3s;
  padding: .25rem  .75rem  .625rem  .675rem;
  background-color: var(--mainColor);
}
.iderExhibitionBox4Swiper .text h3{
    	font-family: Lato-Bold;
	font-size: .375rem;
	color: #ffffff;
}

.iderExhibitionBox4Swiper .text .mores{
  	width: 2.6375rem;
	height: .725rem;
	background-color: #ffffff;
	border-radius: .0625rem;
  	font-family: Poppins-Regular;
	font-size: .225rem;
	text-align: center;
  line-height: .725rem;
	color: var(--mainColor);
  transition: all 0.3s;
}
.iderExhibitionBox4Swiper .swiper-slide-active .text{
  opacity: 1;
}
.iderExhibitionBox4Swiper  .img{
  position: absolute;
  left: .3rem;
  bottom: .25rem;
  	width: 10.8125rem;
    overflow: hidden;
	height: 6.2875rem;
}

.iderExhibitionBox5{
  width: 100%;
	height: 11.175rem;
  padding: .75rem  0  .375rem 0;
  	background-color: #f3f5fa;
}
.iderExhibitionBox5  .com-card{
  position: relative;
}
.iderExhibitionBox5 .com-tl{
  text-align: left;
  color: #000;
}
.iderExhibitionBox5 .com-tl::after{
  width: 2.175rem;
  left: 20%;
}
.iderExhibitionBox5 .text{
  width: 6.875rem;
height: auto;
position: relative;
z-index: 2;
}

.iderExhibitionBox5 .text p{
  	font-size: .3rem;
	color: #6a6a6a;
  margin: .5rem 0  .15rem 0;
}

.iderExhibitionBox5 .text .com-ls30{
  	color: #6a6a6a;
    margin-bottom: .625rem;
}
.iderExhibitionBox5 ul{
  position: absolute;
  right: 0;
  top: 0;
flex: 1;
justify-content: flex-end;
}
.iderExhibitionBox5 ul li{
  	width: 3.85rem;
	height: 3.35rem;
  cursor: pointer;
  overflow: hidden;
  margin:  0 .0375rem .0375rem 0;
}
.iderExhibitionBox5 ul li:first-child{
  margin-left: 62%;
  margin-right: 0;
}
.iderExhibitionBox5 ul li:nth-child(2){
  margin-left:23%;
}
.iderExhibitionBox5 ul li:nth-child(5){
  margin-left:13%;
}

.iderExhibitionBox4-prev,
.iderExhibitionBox4-next{
  position: absolute;
  	width: .6375rem;
	height: .775rem;
  cursor: pointer;
  background: url(../picture/im1-2.png)  no-repeat;
  background-size: cover;
  top: 68%;
  transform: translateY(-50%);
  transition: all 0.3s;
  z-index: 66;
}
.iderExhibitionBox4-prev{
  left: 5.8125rem;
}
.iderExhibitionBox4-next{
  right: 5.35rem;
  transform: translateY(-50%) rotate(180deg);
}
.iderExhibitionBox4-prev:hover{
    background: url(../picture/im1-1.png)  no-repeat;
      background-size: cover;
   transform: translateY(-50%)  rotate(180deg);
}
.iderExhibitionBox4-next:hover{
    background: url(../picture/im1-1.png)  no-repeat;
      background-size: cover;
      transform: translateY(-50%)  rotate(0);
}




@media screen and (min-width: 1920px) {

  html{
    font-size: 80px !important;
  }
}

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

 .com-card{
  width: 100%;
  padding:  0 4%;
 }
 .iderExhibitionBox1,
 .iderExhibitionBox3,
 .iderExhibitionBox4,
 .iderExhibitionBox5{
  padding: 20px 0;
 }
.com-tl{
  font-size: 18px;
  line-height: 30px;
}
.com-tl::after{
  display: none;
}
.iderExhibitionBox1 .title,
.iderExhibitionBox3 .title{
  font-size: 14px;
  line-height: 24px;
  margin-top: 5px;
 width: 100%;
 padding: 0 4%;

}

.iderExhibitionBox1Con,
.iderExhibitionBox3 ul{
  margin-top: 15px;
}
.iderExhibitionBox1Swiper .img,
.iderExhibitionBox1Swiper .name,
.iderExhibitionBox5,
.iderExhibitionBox3 li .text{
  height: auto;
}
.iderExhibitionBox1-prev, .iderExhibitionBox1-next{
  position: static;
}
.iderExhibitionBox1-prev{
  margin-right: 20px;
}
.iderExhibitionBox1Con  .bto{
  margin-top: 40px;
}
.iderExhibitionBox1Swiper .name h3,
.iderExhibitionBox3 .text h3{
  font-size: 16px;
}
.iderExhibitionBox3 .text p{
  font-size: 15px;
}
.iderExhibitionBox1Swiper .name .mores{
  font-size: 14px;
  margin-top: 5px;
}
.iderExhibitionBox1Swiper .name,
.iderExhibitionBox3 li .text{
  padding: 3%;
}
.iderExhibitionBox5 .text p{
  font-size: 16px;
  margin: 10px 0;
}
.comAquote,
.iderExhibitionBox3 .text .mores{
  font-size: 14px;
}
 .com-ls30{
  font-size: 14px;
  line-height: 24px;
 }
 .iderExhibitionBox3 .com-ls30{
  margin: 10px 0;
 }
 .iderExhibitionBox2 .com-ls30{
  width: 100%;
  margin:  10px 0 20px 0;
 }
.iderExhibitionBox2{
  padding: 15% 0 ;
  height: auto;
}
.iderExhibitionBox3 li .img{
  width: 100%;
}
.iderExhibitionBox3 li{
  flex-wrap: wrap;
  height: auto;
}

.iderExhibitionBox3 li .bto,
.iderExhibitionBox5 .com-card{
  flex-wrap: wrap;
}.iderExhibitionBox4Swiper{
  margin-top: 20px;
}.iderExhibitionBox4Swiper .swiper-slide{
  width: 100%;
}
.iderExhibitionBox4Swiper .text{
  width: 100%;
  height: auto;
  padding: 3%;
}
.iderExhibitionBox4Swiper .img{
  width: 100%;
  height: auto;
  position: static;
}
.iderExhibitionBox5 .text{
  width: 100%;
}
.iderExhibitionBox5 ul{
  position: static;
flex: none;
margin-top: 15px;
width: 100%;
    justify-content: flex-start;
}

.iderExhibitionBox5 ul li{
  height: auto;
  width: calc((100% - 20px) / 3);
  margin:  0 10px 10px 0 !important;
}
.iderExhibitionBox5 ul li:nth-child(3n){
  margin-right: 0 !important;
}


}

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

  
}

@media screen and (max-width: 600px) {
 .iderExhibitionBox4-prev{
  left: 4%;
 }
 .iderExhibitionBox4-next{
  right: 4%;
 }

 .iderExhibitionBox5 ul li{
  width: calc((100% - 10px) / 2);
}
.iderExhibitionBox5 ul li:nth-child(2n){
  margin-right: 10px !important;
}
.iderExhibitionBox5 ul li:nth-child(2n){
  margin-right: 0 !important;
}

}