@charset "utf-8";
/* CSS Document */
/*a.more*/
a.more{ width: 120px; height: 50px; line-height: 50px; display: inline-block; margin: 0 6px 0 0; text-align: center; color: rgba(0,0,0,1); border-radius:100px; border: 1px solid rgba(0,0,0,0.2); background-color: rgba(0,0,0,0.1); transition: background-color 0.3s;}
a.more:hover{background-color: rgba(0,0,0,0.3);}
.Rtxt a.more{ float:right;}
a.more1{ width: 120px; height: 50px; line-height: 50px; display: inline-block; margin: 0 6px 0 0; text-align: center; color: rgba(255,255,255,1); border-radius:100px; border: 1px solid rgba(0,0,0,1); background-color: rgba(0,0,0,1); transition: background-color 0.3s;}
a.more1:hover{background-color: rgba(0,0,0,0.5);}
.Rtxt a.more1{ float:right;}
a.more2{ width: 120px; height: 50px; line-height: 50px; display: inline-block; margin: 0 6px 0 0; text-align: center; color: rgba(255,255,255,1); border-radius:100px; border: 1px solid rgba(255,255,255,0.5); background-color: rgba(255,255,255,0.1); transition: background-color 0.3s;}
a.more2:hover{background-color: rgba(255,255,255,0.3);}
.Rtxt a.more2{ float:right;}
a.more3{ width: 120px; height: 50px; line-height: 50px; display: inline-block; margin: 0 6px 0 0; text-align: center; color: rgba(0,0,0,1); border-radius:100px; border: 1px solid rgba(255,255,255,1); background-color: rgba(255,255,255,1); transition: background-color 0.3s;}
a.more3:hover{background-color: rgba(255,255,255,0.5);}
.Rtxt a.more3{ float:right;}
a.more4{ width: 120px; height: 50px; line-height: 50px; display: inline-block; margin: 0 6px 0 0; text-align: center; color: rgba(255,0,0,1); border-radius:100px; border: 1px solid rgba(255,0,0,0.2); background-color: rgba(255,0,0,0.1); transition: background-color 0.3s;}
a.more4:hover{background-color: rgba(255,0,0,0.3);}
.Rtxt a.more4{ float:right;}
a.more5{ width: 120px; height: 50px; line-height: 50px; display: inline-block; margin: 0 6px 0 0; text-align: center; color: rgba(255,255,255,1); border-radius:100px; border: 1px solid rgba(255,0,0,1); background-color: rgba(255,0,0,1); transition: background-color 0.3s;}
a.more5:hover{background-color: rgba(255,0,0,0.5);}
.Rtxt a.more5{ float:right;}
a.more6{ width: 120px; height: 50px; line-height: 50px; display: inline-block; margin: 0 6px 0 0; text-align: center; color: rgba(3,151,215,1); border-radius:100px; border: 1px solid rgba(3,151,215,0.2); background-color: rgba(3,151,215,0.1); transition: background-color 0.3s;}
a.more6:hover{background-color: rgba(3,151,215,0.3);}
.Rtxt a.more6{ float:right;}
a.more7{ width: 120px; height: 50px; line-height: 50px; display: inline-block; margin: 0 6px 0 0; text-align: center; color: rgba(255,255,255,1); border-radius:100px; border: 1px solid rgba(3,151,215,1); background-color: rgba(3,151,215,1); transition: background-color 0.3s;}
a.more7:hover{background-color: rgba(3,151,215,0.5);}
.Rtxt a.more7{ float:right;}
a.more8{ width: 120px; height: 50px; line-height: 50px; display: inline-block; margin: 0 6px 0 0; text-align: center; color: rgba(122,193,65,1); border-radius:100px; border: 1px solid rgba(122,193,65,0.2); background-color: rgba(122,193,65,0.1); transition: background-color 0.3s;}
a.more8:hover{background-color: rgba(122,193,65,0.3);}
.Rtxt a.more8{ float:right;}
a.more9{ width: 120px; height: 50px; line-height: 50px; display: inline-block; margin: 0 6px 0 0; text-align: center; color: rgba(255,255,255,1); border-radius:100px; border: 1px solid rgba(122,193,65,1); background-color: rgba(122,193,65,1); transition: background-color 0.3s;}
a.more9:hover{background-color: rgba(122,193,65,0.5);}
.Rtxt a.more9{ float:right;}
a.more10{ width: 120px; height: 50px; line-height: 50px; display: inline-block; margin: 0 6px 0 0; text-align: center; color: rgba(248,152,40,1); border-radius:100px; border: 1px solid rgba(248,152,40,0.2); background-color: rgba(248,152,40,0.1); transition: background-color 0.3s;}
a.more10:hover{background-color: rgba(248,152,40,0.3);}
.Rtxt a.more10{ float:right;}
a.more11{ width: 120px; height: 50px; line-height: 50px; display: inline-block; margin: 0 6px 0 0; text-align: center; color: rgba(255,255,255,1); border-radius:100px; border: 1px solid rgba(248,152,40,1); background-color: rgba(248,152,40,1); transition: background-color 0.3s;}
a.more11:hover{background-color: rgba(248,152,40,0.5);}
.Rtxt a.more11{ float:right;}
a.more12{ width: 120px; height: 50px; line-height: 50px; display: inline-block; margin: 0 6px 0 0; text-align: center; color: rgba(251,190,1,1); border-radius:100px; border: 1px solid rgba(251,190,1,0.2); background-color: rgba(251,190,1,0.1); transition: background-color 0.3s;}
a.more12:hover{background-color: rgba(251,190,1,0.3);}
.Rtxt a.more12{ float:right;}
a.more13{ width: 120px; height: 50px; line-height: 50px; display: inline-block; margin: 0 6px 0 0; text-align: center; color: rgba(255,255,255,1); border-radius:100px; border: 1px solid rgba(251,190,1,1); background-color: rgba(251,190,1,1); transition: background-color 0.3s;}
a.more13:hover{background-color: rgba(251,190,1,0.5);}
.Rtxt a.more13{ float:right;}
a.more14{ width: 120px; height: 50px; line-height: 50px; display: inline-block; margin: 0 6px 0 0; text-align: center; color: rgba(93,57,25,1); border-radius:100px; border: 1px solid rgba(93,57,25,0.2); background-color: rgba(93,57,25,0.1); transition: background-color 0.3s;}
a.more14:hover{background-color: rgba(93,57,25,0.3);}
.Rtxt a.more14{ float:right;}
a.more15{ width: 120px; height: 50px; line-height: 50px; display: inline-block; margin: 0 6px 0 0; text-align: center; color: rgba(255,255,255,1); border-radius:100px; border: 1px solid rgba(93,57,25,1); background-color: rgba(93,57,25,1); transition: background-color 0.3s;}
a.more15:hover{background-color: rgba(93,57,25,0.5);}
.Rtxt a.more15{ float:right;}
/*view*/
.view{ position: relative;width: 100%; background-color: #FFF; overflow: hidden;box-sizing: border-box; }
.view .swiper-wrapper{}
.view .swiper-slide{ width: 100%; height: 100%; position: relative; }
.view .view-pages{ width: 100%; z-index: 1; position: absolute; bottom: 10px; left: 0; text-align: center;}
.swiper-pagination-clickable .swiper-pagination-bullet{ margin: 0 5px;}
.view .swiper-slide .in{ position: absolute; top:90px; left: 50%; margin: 0 -480px; width: 960px;box-sizing: border-box; }
.view .swiper-slide .Ltxt{ padding:0 480px 0 0; }
.view .swiper-slide .Rtxt{ text-align: right;padding:0 0 0 480px; }
.view .swiper-slide .in h2{ font-size:2.688rem; color:#666666; font-weight: bold; text-shadow: 0px 0px 3px rgba(255,255,255,1);}
.view .swiper-slide .in h3{ font-size:1.875rem; color:#333333; font-weight: normal;  text-shadow: 0px 0px 3px rgba(255,255,255,1); margin: 15px 0;}
.view .swiper-slide .in p{ line-height: 1.75; font-size: 1.500rem; text-shadow: 0px 0px 3px rgba(255,255,255,1); margin:0 0 30px;}
/*chairman*/
.chairman{position: relative; width: 100%; background-color: #FFF; overflow: hidden; box-sizing: border-box; }
.chairman img{ width: 100%; height: auto;}
.chairman .in{ position: absolute; top:90px; left: 50%; margin: 0 -480px; width: 960px;box-sizing: border-box; }
.chairman .Ltxt{ padding:0 400px 0 0; }
.chairman .Rtxt{ text-align: right;padding:0 0 0 400px; }
.chairman .in h2{ font-size:2.688rem; color:#fff; font-weight: bold; text-shadow: 0px 0px 3px rgba(255,255,255,0.7);}
.chairman .in p{color:#fff; line-height: 1.75; font-size: 1.500rem;text-shadow: 0px 0px 3px rgba(255,255,255,1);  margin:0 0 30px;}
.chairman .chairman-pages{ width: 100%; z-index: 1; position: absolute; bottom: 10px; left: 0; text-align: center;}
.chairman .swiper-pagination-bullet{ background: #fff; opacity: 0.6;}
.chairman .swiper-pagination-bullet-active{background: #007aff; opacity: 1;}
/*video*/
.video{position: relative;width: 100%; background-color: #000; overflow: hidden;box-sizing: border-box; }
.video img{ width: 100%; height: auto;}
.video .in{ position: absolute; top:90px; left: 50%; margin: 0 -480px; width: 960px;box-sizing: border-box; }
.video .Ltxt{ padding:0 400px 0 0; }
.video .Rtxt{ text-align: right;padding:0 0 0 400px; }
.video .in h2{ font-size:2.688rem; color:#fff; font-weight: bold;text-shadow: 0px 0px 6px rgba(0,0,0,0.5); }
.video .in p{color:#fff; line-height: 1.75; font-size: 1.500rem; text-shadow: 0px 0px 6px rgba(0,0,0,0.6); margin:0 0 30px;}
/*news*/
.news{ position: relative;width: 100%; background-color: #000; overflow: hidden;box-sizing: border-box; }
.news img{ width: 100%; height: auto;}
.news .in{ position: absolute; top:70px; left: 50%; margin: 0 -480px; width: 960px;box-sizing: border-box; }
.news .Ltxt{ padding:0 311px 0 0; }
.news .Rtxt{ text-align: right;padding:0 0 0 311px; }
.news .in ul.tab{ font-size: 1.375rem; margin:0 0 30px;}
.news .in ul.tab li{ display:inline-block;}
.news .in ul.tab li a{ padding:5px 12px; color: #fff; border-bottom:  2px solid rgba(255,255,255,0); transition: border 0.3s;}
.news .in ul.tab li a:hover,.news .in ul.tab li a.current{ padding:5px 12px; color: #fff; border-bottom:  2px solid rgba(255,255,255,1);}
.news .in ul.info li{ margin: 0 0 15px; cursor: pointer; }
.news .in ul.info p{color:rgba(255,255,255,1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; box-sizing:border-box; font-size: 1.125rem; text-shadow: 0px 0px 6px rgba(0,0,0,0.5); transition:color 0.3s;}
.news .in ul.info li:hover > p{color:rgba(255,255,255,0.8);}
.news .date{color:rgba(255,255,255,0.8); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; box-sizing:border-box; font-size: 0.875rem; text-shadow: 0px 0px 6px rgba(0,0,0,0.5); transition:color 0.3s;}
.news a.more{ margin: 20px 0 0;}
.news a.more1{ margin: 20px 0 0;}
.news a.more2{ margin: 20px 0 0;}
.news a.more3{ margin: 20px 0 0;}
.news a.more4{ margin: 20px 0 0;}
.news a.more5{ margin: 20px 0 0;}
.news a.more6{ margin: 20px 0 0;}
.news a.more7{ margin: 20px 0 0;}
.news a.more8{ margin: 20px 0 0;}
.news a.more9{ margin: 20px 0 0;}
.news a.more10{ margin: 20px 0 0;}
.news a.more11{ margin: 20px 0 0;}
.news a.more12{ margin: 20px 0 0;}
.news a.more13{ margin: 20px 0 0;}
.news a.more14{ margin: 20px 0 0;}
.news a.more15{ margin: 20px 0 0;}
/*threeBox*/
.threeBox{width: 100%; background-color: #000; overflow: hidden; box-sizing: border-box;}
.threeBox ul{ display: flex; height: 100%;}
.threeBox ul li{ position: relative; width: clac(100%/3); overflow: hidden;box-sizing: border-box; text-align: center;}
.threeBox ul li img{width:100%  ; height:auto;}
.threeBox ul li h2{  position: absolute; font-size: 2.688rem; top:60px; left: 0; width: 100%; text-align: center; color:#fff;text-shadow: 0px 0px 3px rgba(255,255,255,0.7);}
.threeBox ul li a.more{ position: absolute; bottom:40px; left: 50%; margin: 0 -60px; }
.threeBox ul li a.more1{ position: absolute; bottom:40px; left: 50%; margin: 0 -60px; }
.threeBox ul li a.more2{ position: absolute; bottom:40px; left: 50%; margin: 0 -60px; }
.threeBox ul li a.more3{ position: absolute; bottom:40px; left: 50%; margin: 0 -60px; }
.threeBox ul li a.more4{ position: absolute; bottom:40px; left: 50%; margin: 0 -60px; }
.threeBox ul li a.more5{ position: absolute; bottom:40px; left: 50%; margin: 0 -60px; }
.threeBox ul li a.more6{ position: absolute; bottom:40px; left: 50%; margin: 0 -60px; }
.threeBox ul li a.more7{ position: absolute; bottom:40px; left: 50%; margin: 0 -60px; }
.threeBox ul li a.more8{ position: absolute; bottom:40px; left: 50%; margin: 0 -60px; }
.threeBox ul li a.more9{ position: absolute; bottom:40px; left: 50%; margin: 0 -60px; }
.threeBox ul li a.more10{ position: absolute; bottom:40px; left: 50%; margin: 0 -60px; }
.threeBox ul li a.more11{ position: absolute; bottom:40px; left: 50%; margin: 0 -60px; }
.threeBox ul li a.more12{ position: absolute; bottom:40px; left: 50%; margin: 0 -60px; }
.threeBox ul li a.more13{ position: absolute; bottom:40px; left: 50%; margin: 0 -60px; }
.threeBox ul li a.more14{ position: absolute; bottom:40px; left: 50%; margin: 0 -60px; }
.threeBox ul li a.more15{ position: absolute; bottom:40px; left: 50%; margin: 0 -60px; }

@media screen and (max-width: 1024px){
	
	
	.view .swiper-slide .in{ position: absolute; top:40px; left: 50%; margin: 0 -350px; width: 700px;box-sizing: border-box; }
	.view .swiper-slide .Ltxt{ padding:0 248px 0 0; }
	.view .swiper-slide .Rtxt{ text-align: right;padding:0 0 0 248px; }
	.view .swiper-slide .in h2{font-size:2.375rem;}
	.view .swiper-slide .in h3{margin:7px 0;}
	.view .swiper-slide .in p{font-size:1.250rem; line-height: 1.6; margin:0 0 20px;}
	
	.chairman .in{ position: absolute; top:40px; left: 50%; margin: 0 -350px; width: 700px;box-sizing: border-box; }
	.chairman .Ltxt{ padding:0 200px 0 0; }
	.chairman .Rtxt{ text-align: right;padding:0 0 0 200px; }
	.chairman .in h2{font-size:2.375rem;}
	.chairman .in p{font-size:1.250rem; line-height: 1.6; margin:0 0 20px;}
	.video .in{ position: absolute; top:40px; left: 50%; margin: 0 -350px; width: 700px;box-sizing: border-box; }
	.video .Ltxt{ padding:0 200px 0 0; }
	.video .Rtxt{ text-align: right;padding:0 0 0 200px; }
	.video .in h2{font-size:2.375rem;}
	.video .in p{font-size:1.250rem; line-height: 1.6; margin:0 0 20px;}
	.news .in{ position: absolute; top:30px; left: 50%; margin: 0 -350px; width: 700px;box-sizing: border-box; }
	.news .Ltxt{ padding:0 260px 0 0; }
	.news .Rtxt{ text-align: right;padding:0 0 0 260px; }
	.news .in ul.tab{ font-size: 1.250rem; margin:0 0 20px;}
	.news .in ul.info li{ margin: 0 0 7px;}
	.news .in ul.info p{font-size: 1rem; }
	.news a.more{ margin:10px 0 0;}
	.news a.more1{ margin:10px 0 0;}
	.news a.more2{ margin:10px 0 0;}
	.news a.more3{ margin:10px 0 0;}
	.news a.more4{ margin:10px 0 0;}
	.news a.more5{ margin:10px 0 0;}
	.news a.more6{ margin:10px 0 0;}
	.news a.more7{ margin:10px 0 0;}
	.news a.more8{ margin:10px 0 0;}
	.news a.more9{ margin:10px 0 0;}
	.news a.more10{ margin:10px 0 0;}
	.news a.more11{ margin:10px 0 0;}
	.news a.more12{ margin:10px 0 0;}
	.news a.more13{ margin:10px 0 0;}
	.news a.more14{ margin:10px 0 0;}
	.news a.more15{ margin:10px 0 0;}
}
@media screen and (max-width: 767px){
	
	.mBlock{ display: block;}
	.mHide{ display: none;}
	
	a.more{ width: 80px; height: 30px; line-height: 30px;font-size:0.8rem; }
	a.more1{ width: 80px; height: 30px; line-height: 30px;font-size:0.8rem; }
	a.more2{ width: 80px; height: 30px; line-height: 30px;font-size:0.8rem; }
	a.more3{ width: 80px; height: 30px; line-height: 30px;font-size:0.8rem; }
	a.more4{ width: 80px; height: 30px; line-height: 30px;font-size:0.8rem; }
	a.more5{ width: 80px; height: 30px; line-height: 30px;font-size:0.8rem; }
	a.more6{ width: 80px; height: 30px; line-height: 30px;font-size:0.8rem; }
	a.more7{ width: 80px; height: 30px; line-height: 30px;font-size:0.8rem; }
	a.more8{ width: 80px; height: 30px; line-height: 30px;font-size:0.8rem; }
	a.more9{ width: 80px; height: 30px; line-height: 30px;font-size:0.8rem; }
	a.more10{ width: 80px; height: 30px; line-height: 30px;font-size:0.8rem; }
	a.more11{ width: 80px; height: 30px; line-height: 30px;font-size:0.8rem; }
	a.more12{ width: 80px; height: 30px; line-height: 30px;font-size:0.8rem; }
	a.more13{ width: 80px; height: 30px; line-height: 30px;font-size:0.8rem; }
	a.more14{ width: 80px; height: 30px; line-height: 30px;font-size:0.8rem; }
	a.more15{ width: 80px; height: 30px; line-height: 30px;font-size:0.8rem; }
	
	.view{width: 100%;  display: block;}
	.view .swiper-slide .in{ top:20px; left:50%; margin: 0 -50%; width: 100%; box-sizing: border-box; }
	.view .swiper-slide .Ltxt{ text-align: left; padding:0 25% 0 20px; }
	.view .swiper-slide .Rtxt{ text-align: right; padding:0 20px 0 25%; }
	.view .swiper-slide{ position: relative; text-align: center; overflow: hidden;}
	.view .swiper-slide img{ position: absolute; left:-15%; width: 130%; height: auto;}
	.view .swiper-slide .in h2{ font-size:1.500rem;line-height: 1.2;}
	.view .swiper-slide .in h3{font-size:1rem;color: #fff;text-shadow: 0px 0px 6px rgba(0,0,0,0.6); margin: 0;}
	.view .swiper-slide .in p{display:none;}
	.chairman{width: 100%;}
	.chairman .swiper-slide{ position: relative; text-align: center; overflow: hidden;}
	.chairman img{position: absolute; left:-15%; width: 130%; height: auto;  opacity: 0.8;}
	.chairman .in{ top:20px; left:50%; margin: 0 -50%; width: 100%; box-sizing: border-box; }
	.chairman .in h2{ font-size:1.500rem; line-height: 1.2;}
	.chairman .in p{display:none;}
	.chairman .Ltxt{ text-align: left; padding:0 10px 0 20px; }
	.chairman .Rtxt{ text-align: right; padding:0 20px 0 10px; }
	.video{width: 100%;}
	.video img{position: absolute;  left:-15%; width: 130%; height: auto; opacity: 0.8;}
	.video .in{ top:20px; left:50%; margin: 0 -50%; width: 100%; box-sizing: border-box; }
	.video .in h2{ font-size:1.500rem; line-height: 1.2;}
	.video .in p{ font-size:0.97rem; letter-spacing:1px;line-height: 1.2;margin:10px 0;}
	.video .Ltxt{ text-align: left; padding:0 10px 0 20px; }
	.video .Rtxt{ text-align: right; padding:0 20px 0 10px; }
	.news{width: 100%; height: 290px;}
	.news img{position: absolute;  left:0; width:auto ; height: 100%; opacity: 0.5;}
	.news .in{ top:20px; left:50%; margin: 0 -50%; width: 100%; box-sizing: border-box; }
	.news .Ltxt{ text-align: left; padding:0 20px; }
	.news .Rtxt{ text-align: left; padding:0 20px; }
	.news .in ul.tab{  text-align: center; font-size: 1rem; margin:0 0 30px;}
	.news .in ul.info li{ border-bottom:1px dotted rgba(255,255,255,0.3);}
	.news a.more{ float: none; display: block; margin: 10px auto 0;}
	.news a.more1{ float: none; display: block; margin: 10px auto 0;}
	.news a.more2{ float: none; display: block; margin: 10px auto 0;}
	.news a.more3{ float: none; display: block; margin: 10px auto 0;}
	.news a.more4{ float: none; display: block; margin: 10px auto 0;}
	.news a.more5{ float: none; display: block; margin: 10px auto 0;}
	.news a.more6{ float: none; display: block; margin: 10px auto 0;}
	.news a.more7{ float: none; display: block; margin: 10px auto 0;}
	.news a.more8{ float: none; display: block; margin: 10px auto 0;}
	.news a.more9{ float: none; display: block; margin: 10px auto 0;}
	.news a.more10{ float: none; display: block; margin: 10px auto 0;}
	.news a.more11{ float: none; display: block; margin: 10px auto 0;}
	.news a.more12{ float: none; display: block; margin: 10px auto 0;}
	.news a.more13{ float: none; display: block; margin: 10px auto 0;}
	.news a.more14{ float: none; display: block; margin: 10px auto 0;}
	.news a.more15{ float: none; display: block; margin: 10px auto 0;}
	.news .in ul.info p{color:rgba(255,255,255,1); transition: all 0s;} 
	.threeBox ul{display: flex; width: 100%; height: 750px; flex-direction:column;}
	.threeBox ul li{position: relative; width: 100%; height: 50%; overflow: hidden; box-sizing: border-box; text-align: center;}
	.threeBox ul li img{ opacity: 1;}
	.threeBox ul li h2{ padding: 0 15px; font-size: 1.500rem; position: absolute; top:10px;}
	.threeBox ul li a.more{ bottom: 10px; margin: 0 -40px; }
	.threeBox ul li a.more1{ bottom: 10px; margin: 0 -40px; }
	.threeBox ul li a.more2{ bottom: 10px; margin: 0 -40px; }
	.threeBox ul li a.more3{ bottom: 10px; margin: 0 -40px; }
	.threeBox ul li a.more4{ bottom: 10px; margin: 0 -40px; }
	.threeBox ul li a.more5{ bottom: 10px; margin: 0 -40px; }
	.threeBox ul li a.more6{ bottom: 10px; margin: 0 -40px; }
	.threeBox ul li a.more7{ bottom: 10px; margin: 0 -40px; }
	.threeBox ul li a.more8{ bottom: 10px; margin: 0 -40px; }
	.threeBox ul li a.more9{ bottom: 10px; margin: 0 -40px; }
	.threeBox ul li a.more10{ bottom: 10px; margin: 0 -40px; }
	.threeBox ul li a.more11{ bottom: 10px; margin: 0 -40px; }
	.threeBox ul li a.more12{ bottom: 10px; margin: 0 -40px; }
	.threeBox ul li a.more13{ bottom: 10px; margin: 0 -40px; }
	.threeBox ul li a.more14{ bottom: 10px; margin: 0 -40px; }
	.threeBox ul li a.more15{ bottom: 10px; margin: 0 -40px; }
}

/*公司網首頁文字出界問題*/
.swiper-container{
     z-index: 0;
}
.swiper-container .in {
    -webkit-transition:all .3s ease-in-out;
    -moz-transition:all .3s ease-in-out;
    -ms-transition:all .3s ease-in-out;
    transition:all .3s ease-in-out;
}

@media screen and (min-width: 768px) {
    .swiper-container {
        min-height: 28rem;
    }

}
@media screen and (max-width: 767px) {
    .swiper-container {
        min-height: 12rem;
    }
}