﻿@charset "utf-8";

/**/
.videoFull{ position: relative; overflow: hidden;}
.videoFull:after{ display: block; content: ""; position: absolute; width: 100%; height: 15vw; left: 0; bottom: 0; background-image: linear-gradient(0deg,#000 0,transparent); transition: opacity .3s cubic-bezier(.39,.575,.565,1); z-index: 8;}
.videoFull video{ width: 100%; object-fit: cover; }
.videoFull img{ width: 100%; object-fit: cover; }
.videoFull .videoBtn button{ position: absolute; right: 3.33%; bottom: 4%; height: 40px; width: 40px; border-radius: 20px; border: #fff 1px solid; background-color: transparent; outline: none; z-index: 9 }
.videoFull .videoBtn button.none{ display: none; }
.videoFull .videoBtn i.iconfont{ color: #FFF; }
.videoFull .videoBtn:hover button{ border-color: var(--vicolor); }
.videoFull .videoBtn:hover i.iconfont{ color: var(--vicolor); }
.videoFull .text{position: absolute; left: 3.33%; bottom: 5%; color: #FFF; text-align: left; z-index: 9}
.videoFull .text h3{ color: #FFF; font-size: 26px; margin-bottom: 20px; }
a.learnmore{ font-size: 15px; display: inline-block; background-color: #FFF; padding:10px 30px; letter-spacing: 3px;  text-transform: uppercase; width: -webkit-fill-available; text-align: center;}
a.learnmore:hover{ background-color: var(--vicolor); color: #FFF;}

@media screen and (max-width : 768px) {
	.videoFull .text{ left:0; width: 100%; text-align:center; }
	.videoFull .text h3{ margin: 0 auto 20px; font-size: 22px; }
	.videoFull .videoBtn button{ top:4%; bottom: 0; width: 28px; height: 28px; display: flex; justify-content: center; align-items: center;}
	.videoFull .videoBtn button i.iconfont{ font-size: 12px; }
	a.learnmore{ width: auto; min-width: 130px;}

}

/**/
.spokesmanbox{ display: flex; justify-content: space-between; }
.spokesmanbox .spokesman{ width: 50%; position: relative; }
.spokesmanbox .spokesman img{ width: 100%; }
.spokesmanbox .spokesman .text{position: absolute; left: 3.33%; bottom: 5%; color: #FFF; text-align: left;}
.spokesmanbox .spokesman .text h3{ color: #FFF; font-size: 26px; margin-bottom: 20px; }
.spokesmanbox .content{ width: 50%; display: flex; justify-content: center; align-items: center; text-align: center; padding: 5%; box-sizing: border-box; }
.spokesmanbox .content h3{ font-size: 33px; color: #71c4b3; padding-bottom: 30px; }
.spokesmanbox .content em{ font-size: 19px; color: #71c4b3; display: block; padding-bottom: 10px; }
.spokesmanbox .content p{ font-size: 19px; color: #727171; line-height: 1.8; padding-bottom: 10px; }
.spokesmanbox .content a{ border: #71c4b3 1px solid; color:var(--vicolor); }
@media screen and (max-width : 768px) {
	.spokesmanbox{ flex-direction: column-reverse;}
	.spokesmanbox .spokesman{ width: 100%;}
	.spokesmanbox .content{ width: 100%;padding: 70px 0;  }
	.spokesmanbox .content h3{ font-size: 24px; }
	.spokesmanbox .content em{ font-size: 16px; }
	.spokesmanbox .content p{ font-size: 16px; padding:0 10%;}
	.spokesmanbox .content p br{ display: none; }
	.spokesmanbox .spokesman .text{ left:0; width: 100%; text-align:center; }
	.spokesmanbox .spokesman .text h3{ margin: 0 auto 20px; font-size: 24px; }


}


/**/
.frmSeries{}
.frmSeries ul{ display: flex; }
.frmSeries ul li{ width: 33.333%; overflow: hidden; position: relative;}
.frmSeries ul li img{ width: 100%; transition: 0.5s; }
.frmSeries ul li:hover img{ transform: scale(1.05); }
.frmSeries ul li:hover a{background-color: var(--vicolor); color: #FFF;}
.frmSeries .text{position: absolute; left: 3.33%; bottom: 5%; color: #FFF; text-align: left; z-index: 9}
.frmSeries .text h3{ color: #FFF; font-size: 26px; margin-bottom: 20px; }
@media screen and (max-width : 768px) {
	.frmSeries ul{ display: block; }
	.frmSeries ul li{ width: 100%; }
	.frmSeries .text{ left:0; width: 100%; text-align:center; }
	.frmSeries .text h3{ margin: 0 auto 20px; }
}


/**/
.swiss{ display: flex; justify-content: center; align-items: center; padding:100px 0; }
.swiss .text{color: #FFF; text-align: center; }
.swiss .text h3{ color: var(--vicolor); font-size: 26px; margin-bottom: 20px; font-weight: bold; }
.swiss .text a.learnmore{ width: 180px; background-color: var(--vicolor); color: #FFF; padding:10px 0; font-size: 15px; display: inline-block; letter-spacing: 5px; }
.swiss .text a.learnmore:hover{ background-color: #FFF;  color: var(--vicolor);}


/**/
.store{ text-align: center; }
.store .picture{ position: relative; }
.store .picture img.colorfull{ position: absolute; opacity: 0; transition: 0.5s; }
.store .picture:hover img.colorfull{ opacity: 1;}
.store .text{color: #FFF; text-align: center; padding:50px 0 100px; }
.store .text .btn{ display: flex; justify-content: center;}
.store .text .subtn{ width: 240px; text-align: center;}
.store .text .subtn b{ color: var(--vicolor); font-size: 21px; margin-bottom: 20px; font-weight: bold; display: block; }
.store .text a.learnmore{ width: 100%; border:var(--vicolor) 1px solid; background-color: var(--vicolor); color: #FFF; padding:10px 0; font-size: 15px; display: inline-block; letter-spacing: 5px; }
.store .text a.learnmore:hover,
.store .text a.learnmore.cur{ background-color: #FFF;  color: var(--vicolor);}

@media screen and (max-width : 768px) {
	.store .picture img{ width: 60%; }
	.store .text .subtn{ width: 40%; }
}