img{
	user-select: none;
}


.section-title{
    padding-top: 17rem;
}
.swiper-video{
	width: 100%;
	padding-top: 56.25%;
}
.swiper-video iframe{
	width: 100%;
	height: 100%;
	    position: absolute;
    left: 0;
    top: 0;
}

.swiper-list{position: relative;}

.swiper-button-next:after,.swiper-button-prev:after{
	content: none;
}

.swiper-button-next{
	width: 20px;
	height: auto;
	right: 0;
	transform: translate(150%,-50%);
}
.swiper-button-prev{
	width: 20px;
	height: auto;
	left: 0;
	transform: translate(-150%,-50%);

}

/* mi */


.milestones{
   padding-top: 15rem;
   padding-bottom: 24rem;
}
.milestones-slogen{
	position: absolute;
	width: 73.6rem;
	right: 0;
	top: 0;
}
.milestones .text-con{
	padding: 0;
}
.milestones .container2{
   margin-top: 24rem;
}
.milestones .container2 .row{
   justify-content: space-between;
   align-items: flex-start;
   width: 100%;
}
.counts-list-row{
   display: flex;
   justify-content: flex-end;
   align-items: flex-end;
}
.counts-list{
   display: flex;
   align-self: flex-end;
}
.counts-box{
   margin: 0 1.6rem;
   width: 34.3rem;
   height: 34.3rem;
   border-radius: 50%;
   border: 1px solid #231815;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
}
.counts-box h3{font-size: 3.8rem;}

.counts-num span:nth-child(1){
   font-family:'Canela','Noto Serif TC','微軟正黑體', 'Microsoft JhengHei', sans-serif;
   color: #3C2313;
   font-weight: bold;
   font-size: 9.3rem;
   line-height: 1em;
}
.counts-num span:nth-child(2){
   font-family:'Noto Serif TC','微軟正黑體', 'Microsoft JhengHei', sans-serif;
   font-size: 2.9rem;color: #3E3A39;font-weight: bold;
}


/* sec1 */

.sec1{
	margin:13rem 0 ;
}



.text-con{
	padding-left: 13rem;
	padding-right: 10rem;
}

.sec1 .text-con h3{
	margin-bottom: 6.5rem;
}
.sec1 .text-con h4{margin-bottom: .75em;}



.sec2{
	padding-top: 11.5rem;
	padding-bottom: 11.5rem;
}
.sec2 .row{align-items: center;}
.sec2 .text-con h2{
	margin-bottom: 0rem;
}
.sec2 .text-con h2+ .title-tip{margin-bottom: 3em;margin-top: 1em;}
.sec2 .text-con h4{margin-bottom: 0em;}

.sec2 .text-con{
	padding-left: 0rem;
	padding-right: 10rem;
}

@media (min-width: 1024px){
	
}
@media (max-width: 767px){
	.kv{height: auto}


	.milestones{padding-bottom: 5rem;}
	   .milestones .container2{margin-top: 5rem;}
	   .counts-box{
	      margin: 0 .8rem;
	      width: 18.5rem;
	      height: 18.5rem;
	   }
	   .milestones-slogen{
	           position: absolute;
	               right: 0;
    top: -10rem;
    transform: rotate(25deg);
        width: 40rem;
	   }
	   .counts-list{width: 100%;justify-content: center;}
	   .counts-box h3{font-size: 2rem;}

	   .counts-num span:nth-child(1){
	      font-size: 5rem;
	      line-height: 1em;
	   }
	   .counts-num span:nth-child(2){
	      font-size: 1.6rem;
	   }


	.sec1 .container{
		width: calc(100% - 11rem);
	}
	.text-con{
        padding: 0;
    }
    .sec1 {        margin: 1.1rem 0 0 0;    }
    .sec1 .btn{justify-self: flex-end;}
    .sec1 .text-con h3{margin-bottom: 0rem;}

    .sec1 .pic{margin: 5rem 0;}

    .sec2 .row{align-items: flex-end;}
    .sec2 .text-con h2{
    	margin-bottom: 1rem;
    }
    .sec2 .text-con h4{margin-bottom: .5em;}
    .sec2 .text-con{padding-right: 1rem;}
    .sec2-btn{
    	margin-top: 4.5rem;
    	display: flex;
    	justify-content: flex-end;
    }
    .sec2-txts{width: calc(100% - 24.5rem);}
    .pic2{width: 24.5rem;}
}