.section {
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
  }
 
  
  .pin-section .content .right {
	width: 18%;
  }
  
 .pin-section .right .slide {
	position: absolute;
	width: 100%;
	top: 50%;
	transform: translateY(-50%);
	right: 0;
	opacity: 0;
	visibility: hidden;
 
  }
  
  .pin-section .right img {
	width: 100%;
	max-width: 300px;
  }

.idxPan{ background: url(../images/idxPanBg.jpg) no-repeat center center / cover;}
.idxPan .title{ width: 18.7%;}
.idxPan .more .round{ transform: rotate(-45deg) ; -webkit-transform: rotate(-45deg) ; -moz-transform: rotate(-45deg) ; -ms-transform: rotate(-45deg) ; -o-transform: rotate(-45deg) ; }
.idxPan .more:hover .round{ transform: rotate(0); -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); }
   
.idxPanCircle{ position: absolute; width: 42vw; right: -21vw; top: 50%;   margin-top: -21vw;  }


.idxPanImgUl .img{ width: 100%; height: 0; padding-bottom:62.7% ;}
.idxPanSwiper .text{  position: absolute; bottom: 0; left: 0; z-index: 10;}

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



 }

 .idxPanSwiper{ height: 100vh;}
 .idxPanSwiper .swiper-slide{   height: 50% ; transform: scale(.9); -webkit-transform: scale(.9); -moz-transform: scale(.9); -ms-transform: scale(.9); -o-transform: scale(.9); }
.idxPanSwiper .swiper-slide-active{   transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); }
.idxPanSwiper .swiper-slide img{ opacity: .5;}
.idxPanSwiper .swiper-slide-active img{ opacity: 1;}



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

	.section { height: auto;}
	 .idxPanSwiper{ height: auto;}
	.idxPanSwiper .swiper-slide{ height: 200px;} 

}