@charset "utf-8";
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;color:#fff;text-decoration:none;}
body{font:12px/180%;font-family: Calibri, sans-serif;background-color:#f0f2f6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing: grayscale;font-smooth:subpixel-antialiase;}
h5,h6{font-size:21px;}
section{margin:4em 0;}
.clear{ clear:both; height:1px; line-height:1px;}
/*-------------------------------------------------------以下为电脑CSS样式表----------------*/
@media screen and (min-width:900px) { 
.toolbar{ display: none;}

.header{ width: 90%; height: 110px; margin: 0 auto; }	
.headerleft{ width:20%; float: left; margin-top: 25px; padding-left: 15px;}
.headerleft img{ width:auto;height: 70px;}	
.headerright{ width:65%; float: right;}		
.headerrightsearch{ width:100%; float: right;}
.headerrightnav{ width:100%; float: right; margin-top: 10px;}	
.bannerpicaboutus{width: 100%;}
.bannerpicc-blue{width: 100%;position:relative;z-index: -1;}	
.bannerpicc-bluetitle{width: 550px;;position:absolute; top:20%; left:7%;font-family: Calibri, sans-serif;font-weight:300;font-size:17px;color:#444444;}
.bannerpicc-bluetitle h1{width: auto; color:#e5007e;font-weight: normal; }
.bannerpicc-bluetitle h2{width: auto;color:#e5007e;line-height: 25px;font-family: Calibri, sans-serif; font-weight:300;font-size:19px;}
/*menu*/
.cur{ background:#D96C00; font-weight:bold;}
#navigationmenu {float: right; display:block; padding-top: 15px; width:90%;height:4.2vh; line-height: 4.2vh;}
#navigationmenu .mainlevel { float:left; height:5.2vh; line-height: 5.2vh;text-align: center;margin-right: 2.8%; text-align: left;/*IE6 only*/}
#navigationmenu .mainlevel a {color:#000; text-decoration:none; height:5.2vh; line-height: 5.2vh; display:block; padding:0 6px; width:100%; font-size: 1.5vw;font-weight: 400;}
#navigationmenu .mainlevel a:hover {color:#555; text-decoration:none;font-size: 1.5vw; height:5.2vh; line-height: 5.2vh;text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff; font-weight: 400;}
#navigationmenu .mainlevel ul {width:auto;display:none; position:absolute; line-height: 5.2vh;overflow: hidden;}
#navigationmenu .mainlevel li { width:auto;/*IE6 only*/}

#navigationmenu .mainlevel2 {height: 4.2vh; line-height: 4.2vh; background:#eee;width:inherit;}	
#navigationmenu .mainlevel2 li {border-top:1px solid #000; height: 4.2vh; line-height: 4.2vh;width: inherit; /*IE6 only*/}
#navigationmenu .mainlevel2 a {border-top:1px solid #000;color:#000; text-decoration:none; display:block; padding-left: 7px; padding-right: 20px; height: 4.2vh; line-height: 4.2vh; font-size: 1.1vw; text-align: left;}
#navigationmenu .mainlevel2 a:hover {color:#666; text-decoration:none;font-size: 1.1vw;height: 4.2vh; line-height: 4.2vh; }

.pcsearch{ width: 20px;border:1px solid #fff; float:right; }	
.search{position:relative;display:block;float:right;margin-top: 15px;}
.search .input{display:block;margin:0;padding:3px 30px 3px 10px;width:120px;height:20px;line-height:20px;color:#222;border:1px solid #555;border-radius:1.2px;background:none;outline: none;}
.search .submit{position:absolute;top:0;right:0;display:block;width:40px;height:28px;line-height:28px;text-indent:-9999px;color:#fff;border:none;background:url(search.png) no-repeat center;cursor:pointer;_text-indent:0;overflow:hidden;}	
	
/*----------------------------------------------------above wap nav------------*/

/*----------------------------------------------------below PC banner------------*/
.bannerbg{ width: 100%;height: 52.5vh;overflow: hidden;background: white;background: linear-gradient(45deg, #ffffff 0%, rgba(187, 147, 252, 0.8) 36%, #ddd 50%);display: -webkit-flex;display: flex;align-items: center;}
.banner{ width: 84%; margin: 0 auto; overflow: auto;display: -webkit-flex;display: flex;align-items: center;justify-content: space-between;}
.banner-left{ width: 48%; line-height: 4.5vh; font-family: Calibri, sans-serif; font-weight:200; color: #111111; font-size: 1.4vw;}
.banner-left h1{ line-height: 7.5vh; font-family: Acumin Pro;  font-weight:bold; color: #333; font-size: 2.3vw; }	
.banner-right{ width: 47%; }	
.banner-right img{width: 90%; height: auto;}	
/*----------------------------------------------------above PC banner------------*/
	
/*----------------------------------------------------below eyebrow pencil recommend------------*/	
.eyebrowpencilrecommend{ width: 88%; margin: 0 auto; overflow: auto;display: -webkit-flex;display: flex;align-items: center;justify-content: space-between;margin-top: 5vh;margin-bottom: 5vh;}
.eyebrowpencilrecommend-left{ width: 47%; line-height: 4.0vh; font-family: Calibri, sans-serif; font-weight:300; color: #111111; font-size: 1.33vw;hyphens: auto;}
.eyebrowpencilrecommend-left h2{ line-height: 5.5vh; font-family: Calibri, sans-serif; font-weight:600; color: #111111; font-size: 2.2vw; }
.eyebrowpencilrecommend-left p{ line-height: 6vh; font-family: Calibri, sans-serif; font-weight:500; color: red; font-size: 1.6vw; }	
.eyebrowpencilrecommend-right{ width: 47%; }	
.eyebrowpencilrecommend-right img{width: 100%; height: 100%;display: block;vertical-align: middle;}	
/*----------------------------------------------------above eyebrow pencil recommend------------*/		
.buttonmore { display: flex;height: 30px;justify-content: left;text-align: center; width: 100%;font-family: Calibri, sans-serif; font-weight:300; margin-top: 2vh; }
.btn {cursor: pointer;font-size: 1.2vw;font-weight: 400;line-height: 40px;margin: 0 0 2em;max-width: 160px;position: relative;text-decoration: none;text-transform: uppercase;width: 100%;margin: 0 1em 2em;color: #333;background: #dfe6f4;}
.btn:hover {text-decoration: none;}
.btn-1 {background: #dfe6f4;font-weight: 100;}
.btn-1 svg {height: 40px;left: 0;position: absolute;top: 0;width: 100%;}
.btn-1 rect {fill: none;stroke: #777; stroke-width: 2;stroke-dasharray: 422, 0;transition: all 0.35s linear;}
.btn-1:hover { font-weight: 900;letter-spacing: 1px;background: #dfe6f4;}
.btn-1:hover rect {stroke-width: 5;stroke-dasharray: 15, 310;stroke-dashoffset: 48;transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);background: #dfe6f4;}

	
/*----------------------------------------------------below PC product show------------*/	
.eyebrowpencilbg { width: 100%; background: #dfe6f4;padding-bottom: 4vh;}	
.eyebrowpencilbg h2{ padding-top: 3vh; line-height: 10vh; font-family: Acumin Pro; font-weight:bold; color: #333; font-size: 2vw; margin-top: 3vh;text-align: center;}	
	
.selectcard{text-align: center;}
.headline{ margin: 0 auto; text-align: center; margin-top: 2vh;} 
.headline ul{ margin: 0 auto; display: inline-block;margin-bottom: 10px;width: 45%; text-align: center;} 	
.headline ul li {display:block; float:left;list-style:none;  text-align: center; line-height: 50px; font-size: 35px;font-family: Calibri, sans-serif; font-weight:500;cursor: default; width:48%;}
.select { width: 90%; margin: 0 auto;}
.selectchoice {border-bottom:4px solid #111; with:268px;}
.selectsubtitle	{ width: 55%; line-height: 24px; font-size: 19px;font-family: Calibri, sans-serif;font-weight:300;text-align: center; margin: 0 auto; padding-top: 5px; padding-bottom: 15px;color:#444444;}
	
	
.product{ width: 100%; word-wrap: break-word;overflow-wrap: break-word;}
.product img{width: 100%; height: 100%;}
.product h5{ width: 98%; line-height: 4.2vh; font-size: 1.3vw;font-family: Calibri, sans-serif;font-weight:300; margin-top: 2vh; margin-left: 1%;margin-right: 1%; text-align: center;margin-bottom: 6vh;}
	
.product p{ width: 98%; height: 52px; font-size: 17px;line-height: 20px; margin-bottom: 10vh;font-family: Calibri, sans-serif;font-weight:300;margin-left: 1%;margin-right: 1%;text-align: left;}
	
.picscale {width:100%;position:relative;overflow: hidden;border:1px solid #aaaaa;border-radius: 2%;display: grid;-moz-box-shadow:2px 2px 3px #f8da99;-webkit-box-shadow:2px 2px 3px #333;box-shadow:2px 2px 3px #aaaaaa;background:#ffffff;
filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color='#f8da99');}
.picscale img{width:100%;cursor: pointer; transition: all 0.6s;}
.picscale img:hover{width:100%;transform: scale(1.1);}	
/*----------------------------------------------------above PC product show------------*/
	
/*----------------------------------------------------below product custom option------------*/	
.productbg { width: 100%; padding-bottom: 4vh;}	
.productbg h2{ padding-top: 3vh; line-height: 10vh; font-family: Acumin Pro; font-weight:bold; color: #333; font-size: 2vw; margin-top: 3vh;text-align: center;}	
.producttitle { width: 75%; margin: 0 auto;line-height: 4vh;overflow: hidden; font-family: Calibri, sans-serif; font-weight:300; color: #444; font-size: 1.28vw; text-align: center;}		
/*----------------------------------------------------above PC product------------*/	
.content-wrap{ width: 88%; margin: 0 auto; overflow: auto;display: -webkit-flex;display: flex;align-items: center; justify-content: space-between;flex-direction: row;flex-wrap: nowrap;margin-top: 5vh;margin-bottom: 5vh;}
.content-wrap2{ width: 100%; margin: 0 auto; }	
.content-wrap-left{ width: 47%;}
.content-wrap-left img{width: 100%; height: 100%;display: block;vertical-align: middle;}
.content-wrap-right{ width: 47%; line-height: 4.0vh; font-family: Calibri, sans-serif; font-weight:300; color: #111111; font-size: 1.33vw; hyphens: auto;}	
.content-wrap-right h3{ line-height: 5.5vh; font-family: Calibri, sans-serif; font-weight:500; color: #111111; font-size: 1.9vw; }	
.content-box{ width: 88%; margin: 0 auto; overflow: auto;display: -webkit-flex;display: flex;align-items: center;justify-content: space-between;margin-top: 5vh;margin-bottom: 5vh;}
.content-box-left{ width: 47%; line-height: 4.0vh; font-family: Calibri, sans-serif; font-weight:300; color: #111111; font-size: 1.33vw;hyphens: auto;}
.content-box-left h3{ line-height: 5.5vh; font-family: Calibri, sans-serif; font-weight:500; color: #111111; font-size: 1.9vw; }	
.content-box-right{ width: 47%; }	
.content-box-right img{width: 100%; height: 100%;display: block;vertical-align: middle;}		
/*----------------------------------------------------above product custom option------------*/	

/*----------------------------------------------------below PC aboutus------------*/
.aboutusbg { width: 100%;background: #dfe6f4; padding-bottom: 5vh;} 	
.aboutus { width: 88%;line-height: 4.2vh;overflow: hidden; font-family: Calibri, sans-serif; font-weight:300; color: #111111; font-size: 1.35vw; margin: 0 auto;hyphens: auto; } 
.aboutus h2{ line-height: 9vh; font-family: Acumin Pro; font-weight:bold; color: #333; font-size: 2vw; margin-top: 3vh; }	
.aboutusdevelop{width: 100%; overflow: auto;display: -webkit-flex;display: flex;align-items: center; justify-content: space-between;flex-direction: row;flex-wrap: wrap;margin-top: 4vh;}
.aboutusdevelop-content{width: 23%; text-align: center; line-height: 6vh;font-size: 1.5vw;}	
.aboutusdevelop-content p{font-family: Calibri, sans-serif; font-weight:600; color: #111111; font-size: 3.5vw;line-height: 8vh;text-align: center;}
.aboutusdevelop-content span{font-size: 2vw;}	
/*----------------------------------------------------above PC aboutus------------*/
/*----------------------------------------------------below how to custom------------*/
.howtocustombg { width:100%; padding-bottom: 5vh;}
.howtocustombg h2{ padding-top: 3vh; line-height: 10vh; font-family: Acumin Pro; font-weight:bold; color: #333; font-size: 2vw; margin-top: 3vh;text-align: center;}	
.howtocustom{width: 88%; overflow: auto;display: -webkit-flex;display: flex; justify-content: space-between;flex-direction: row;flex-wrap: wrap; margin: 0 auto; padding-top: 2vh;}
.howtocustom-content{width: 23%; text-align: center; line-height: 4vh;font-size: 1.3vw;font-family: Calibri, sans-serif; font-weight:300;}
.howtocustom-content p{ text-align: center; line-height: 9vh;font-size: 3vw;}	
.howtocustom-content h4{ text-align: center; line-height: 5.5vh;font-size: 1.6vw;}	
/*----------------------------------------------------above PC how to custom------------*/
.faqbg { width:100%; background: #dfe6f4;}		
.faq-wrap{ width: 88%; margin: 0 auto; overflow: auto;display: -webkit-flex;display: flex;align-items: center; justify-content: space-between;flex-direction: row;flex-wrap: nowrap;margin-top: 5vh;}
.faq-wrap-left{ width: 47%; margin: 0 auto;}
.faq-wrap-left h2{ width: 80%; margin: 0 auto; line-height: 8vh;font-size: 3vw;font-family: Calibri, sans-serif; font-weight:500;text-align: left;}	
.faq-wrap-left p{ width: 80%; margin: 0 auto;line-height: 4vh;font-size: 1.3vw;font-family: Calibri, sans-serif; font-weight:200;text-align: left;}	
.faq-wrap-right{ width: 47%; line-height: 4.0vh; font-family: Calibri, sans-serif; font-weight:300; color: #111111; padding-top: 3vh;margin-bottom: 3vh;}
.faqfold {max-width: 40vw;width: 100%;color: #b9b9b9;font-weight: 100;letter-spacing: 0.035em;font-size: 1.25vw;margin: 0 auto;}
.faqfold ul {margin: 0;padding: 0;}
.faqfold li {list-style: none;padding: 0;}
.faqfold ul > li:first-child h3 {border-top: 1px solid rgba(0, 0, 0, 0.1);}
.faqfold h3 {padding: 0.5rem 1rem 0.5rem 0.3rem;margin: 0;border-bottom: 1px solid rgba(0, 0, 0, 0.07);display: block;font-weight: 100;position: relative;font-size: 1.2vw;color: #000000;font-family: Calibri, sans-serif; font-weight:300; }
.faqfold ul ul {display: none;height: 100%;}
.faqfold ul ul li {font-family: Calibri, sans-serif; font-weight:300; line-height: 3.8vh; color: #555555;font-size: 1.2vw; padding-left: 0.5vw; margin-top: 1.4vh; margin-bottom: 1vh;hyphens: auto;}
.faqfold .arrow {display: inline-block;width: 0.49vw;height: 1vh; float: right; margin-top: 1vh;border-top: 1px solid var(--light-gray);
 border-right: 1px solid var(--light-gray); -webkit-transform: rotate(135deg);transform: rotate(135deg);-webkit-transform-origin: center;
 transform-origin: center;transition: -webkit-transform 600ms cubic-bezier(0.175, 0.885, 0.32, 1);transition: transform 600ms cubic-bezier(0.175, 0.885, 0.32, 1);transition: transform 600ms cubic-bezier(0.175, 0.885, 0.32, 1), -webkit-transform 600ms cubic-bezier(0.175, 0.885, 0.32, 1);
}
.faqfold .arrow.closed {-webkit-transform: rotate(-45deg);transform: rotate(-45deg);border-top: 1px solid var(--dark-gray);
border-right: 1px solid var(--dark-gray);}
:root {--dark-gray: #444444;--light-gray: #c9c9c5;}
		
/*-------------------------------------------------------below Testimony----------------*/
.reviewbg{ width: 88%; margin: 0 auto;margin-bottom:30px;}
.reviewbg h2{ line-height: 9vh; font-family: Acumin Pro; font-weight:bold; color: #333; font-size: 2vw; }
.review{ width: 100%; word-wrap: break-word;overflow-wrap: break-word; margin: 0 auto; padding-bottom: 2vh; padding-top: 2vh;}
.reviewcircle {width: 66px;height: 66px; margin: 0 auto;border-radius: 50%; margin-top: 20px;margin-bottom: 10px; }	
.reviewcircle img{width: 100%; height: 100%;border-radius:50%;text-align: center;}
.review h6{ width: 100%; line-height: 22px; font-size: 22px;text-align: center;font-family: Calibri, sans-serif; font-weight:500;}
.review p{ width: 88%;  font-size: 1.35vw;line-height: 4.2vh; padding-bottom: 20px;text-align: center; margin: 0 auto;font-family: Calibri, sans-serif; font-weight:300;hyphens: auto;}
.swiper-button-prev, .swiper-button-next {--swiper-navigation-size:40px;}
/*-------------------------------------------------------above Testimony----------------*/	
/*-------------------------------------------------------below bottom----------------*/		
.bottombg { width:100%; background: #000;clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 100%); height: 35vh;}
.bottom{ width: 88%; margin: 0 auto; overflow: auto;display: -webkit-flex;display: flex;align-items: center; justify-content: space-between;flex-direction: row;flex-wrap: nowrap; padding-top: 7vh;}
.bottom-left{ width: 25%; color:#fff;text-align: center;}
.bottom-left img{width:60%;height: auto;}
.bottom-left p{width:60%;height: auto; width: 80%; margin: 0 auto; line-height: 3.5vh;font-family: Calibri, sans-serif; font-weight:300;margin-top: 2vh;}	
.bottom-center{ width: 55%; line-height: 4.0vh; font-family: Calibri, sans-serif; font-weight:300; color: #fff; font-size: 1.13vw; }
.bottom-right{ width: 20%; }
.bottom-right-version{ width: 10vw;  border:1px solid #fff; color: #000; line-height: 5vh; margin-bottom: 3vh; text-align: center; background: #F2EFEF;}	
/*-------------------------------------------------------above bottom----------------*/		
	
/*----------------------------------------------------以下为电脑端列表页底部介绍------------*/	
}	
/*----------------------------------------------------以上为电脑端css End------------*/

/*----------------------------------------------------以下手机端为顶部导航------------*/
@media screen and (max-width:900px) { 

.header{ display: none;}
	
.toolbar{position:fixed;top:0;left:0;right:0; line-height:40px;border-top:2px solid #000000; height: 40px; background-color: rgba(100,100,100,0.5)!important;;background: url(../images/midlogo.png) no-repeat center center;background-size: contain;}	
.toolbarright{ height: 38px; z-index:999; float: right;}
.menu-button{position:relative;height:30px;width:34px;cursor:pointer; padding-top: 7px;margin-left: 10px;}
.menu-button:before{content:"";position:absolute;right:1px;border-bottom:4px solid #000;border-top:4px solid #000;width:34px;height:4px; padding-bottom: 2.2px;}
.menu-button:after{content:"";position:absolute;right:1px;border-bottom:4px solid #000;width:34px;height:10px; margin-top: 11px; }	
.menu-leftl{float:left;z-index: 997;display:block;}
.menu-left{float:right;margin-right:0.5em; z-index: 997;display:block;}

/*----------------------------------------------------below WAP search------------*/
.flexbox {width: 100%;height: 36px;display: flex;justify-content: center;align-items: center;float: right;}
.search8 {width: 50%;}
.search8 > div {display: inline-block;position: relative;}
.search8 > div:after {content: "";background: #000;width: 2px;height: 10px;position: absolute;top: 20px;right: -3px;transform: rotate(135deg);box-shadow: 1px 0 #000;margin-right:0.8em;}
.search8 > div > input {color: #000000;font-size: 16px;background: transparent;width: 20px;height: 20px;padding: 1px;border: solid 2px #000;outline: none;border-radius: 35px;transition: width 0.5s;float: left;margin-right:0.8em;font-size: 13px;}
.search8 > div > input::placeholder {color: #000;opacity: 1;padding-left: 16px;}
.search8 > div > input::-ms-placeholder {color: #000;padding-left: 16px;}
.searc8h > div > input::-ms-input-placeholder {color: #000;padding-left: 16px;}
.search8 > div > input:focus,
.search8 > div > input:valid {width: 150px; padding-left: 10px;background:#f0f2f6;}
	
/*----------------------------------------以下为手机端右侧导航------------*/	
.sidebar{margin:0;padding-top:1em;color:black; z-index:999; background-color: #000000;}
.subNav{cursor:pointer; text-align: center;color: #ffffff; font-size: 14px; line-height: 3.5vh;}
.subNav span{ width: 100%; font-size: 5vw; color: #FDFAFA; margin: 0 auto;display: block;line-height: 4vh;}	
.subNav img{text-align: center; }
.subNav p{margin:0.8em;padding:0;font-weight:300; height: 20px;font-size: 19px;color: #ffffff; font-family: Calibri, sans-serif; font-weight:300; text-align: left;}
.subNav li{margin:0.5em 0;padding:0 1em;font-size: 16px; line-height: 28px;color: #ffffff;}
.subNav li hover{margin:0.5em 0;padding:0 1em;background-color:#e84e40; line-height: 28px;font-size: 16px;color: #ffffff;}
.subNav hr{ border:0;padding:0;width:98%;height:1px;background-color:#ffffff; text-align: center;}		
.navContent{display:none;color:#999;color: #ffffff; margin-top: -5px; margin-bottom: -5px;}
.navContent li{margin-left: 1vw;line-height: 30px;font-size: 16px;color: #ffffff;}	
.navContent a{margin:0.5em 0;padding:0 1em; line-height: 30px;font-size: 16px;color: #ffffff;font-family: Calibri, sans-serif; font-weight:300;}
.navContent a:hover{margin:0.5em 0;padding:0 1em; line-height: 30px;font-size: 16px;color: #ffffff;font-family: Calibri, sans-serif; font-weight:300;}
	
/*----------------------------------------------------above wap nav------------*/
/*----------------------------------------------------below WAP banner------------*/	
.bannerbg{ width: 100%;overflow: hidden;background: white;background: linear-gradient(45deg, #ffffff 0%, rgba(187, 147, 252, 0.8) 26%, #94edff 50%);display: -webkit-flex;display: flex;align-items: center;}
.banner{ width: 90%; margin: 0 auto; overflow: auto;display: flex;row-gap: 4vh;flex-wrap: wrap;align-items: stretch;margin-top: 5vh;margin-bottom: 4vh;flex-direction: column; }	
.banner-left{ width: 100%; line-height: 3.5vh; font-family: Calibri, sans-serif; font-weight:300; color: #111111; font-size: 4.5vw;text-align: center;}
.banner-left h1{ line-height: 5.5vh; font-family: Acumin Pro; color: #111111; font-size:7vw; }	
.banner-right{ width: 100%; order: -1; margin-top: 5vh; text-align: center;}	
.banner-right img{width: 95%; height: auto;}		
/*----------------------------------------------------above WAP banner------------*/
	
/*----------------------------------------------------below eyebrow pencil recommend------------*/
.eyebrowpencilrecommend{ width: 96%; margin: 0 auto; overflow: auto;display: flex;row-gap: 30px;flex-wrap: wrap;align-items: center;margin-top: 5vh;margin-bottom: 5vh; }
.eyebrowpencilrecommend-left{ width: 100%; font-family: Calibri, sans-serif; font-weight:300; color: #111111; line-height: 3.5vh; font-size: 4.2vw;}
.eyebrowpencilrecommend-left h2{ line-height: 5vh; font-size: 6vw; font-family: Calibri, sans-serif; font-weight:500; color: #111111; }	
.eyebrowpencilrecommend-left p{ font-family: Calibri, sans-serif; font-weight:300; color: red; font-size: 5vw; line-height:4.5vh;}		
.eyebrowpencilrecommend-right{ width: 100%; order: -1; text-align: center;}	
.eyebrowpencilrecommend-right img{width: 90%; height: auto;}		
/*----------------------------------------------------above eyebrow pencil recommend------------*/		
.buttonmore { display: flex;height: 40px;justify-content: center;text-align: center; width: 100%;font-family: Calibri, sans-serif; font-weight:300; margin-top: 4vh; }
.btn {cursor: pointer;font-size: 4.2vw;font-weight: 400;line-height: 40px;margin: 0 0 2em;max-width: 160px;position: relative;text-decoration: none;text-transform: uppercase;width: 100%;margin: 0 1em 2em;color: #333;}
.btn:hover {text-decoration: none;}
.btn-1 {background: #dfe6f4;font-weight: 100;}
.btn-1 svg {height: 40px;left: 0;position: absolute;top: 0;width: 100%;}
.btn-1 rect {fill: none;stroke: #777; stroke-width: 2;stroke-dasharray: 422, 0;transition: all 0.35s linear;}
.btn-1:hover { font-weight: 900;letter-spacing: 1px;background: #dfe6f4;}
.btn-1:hover rect {stroke-width: 5;stroke-dasharray: 15, 310;stroke-dashoffset: 48;transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);}

/*----------------------------------------------------below wap product show------------*/	
.eyebrowpencilbg { width: 100%; background: #dfe6f4;padding-bottom: 2vh;}	
.eyebrowpencilbg h2{ line-height: 5vh; font-size: 6vw; font-family: Acumin Pro; color: #333;  padding-top: 2.2vh; text-align: center;}	
selectcard{text-align: center;}
.headline{ margin: 0 auto; text-align: center;margin-top: 2vh;} 
.headline ul{ margin: 0 auto; display: inline-block;margin-bottom: 6px; width:95%;} 	
.headline ul li {display:block; float:left;list-style:none;width:48%;line-height: 40px; font-size: 4.5vw;font-family: Calibri, sans-serif; font-weight:400;}
.select {width: 95%; text-align: left; margin: 0 auto;}
.selectchoice {border-bottom:4px solid #111;}	
.selectsubtitle	{ width: 98%; line-height: 3.2vh;overflow: hidden; font-family: Calibri, sans-serif; font-weight:300; color: #444; font-size: 4vw;text-align: center; margin: 0 auto; padding-top: 1px; padding-bottom: 10px; color:#444444;}	
	
	
.product{ width: 100%;word-wrap: break-word;overflow-wrap: break-word;}
.product img{width: 100%; height: 100%;}
.product h5{ width: 98%; line-height: 4vh;font-size: 4.2vw;font-family: Calibri, sans-serif;font-weight:300; margin-top: 2vh; margin-left: 1%;margin-right: 1%; text-align: center;margin-bottom: 4vh;}
.product p{ width: 98%; height: 44px; font-size: 15px;line-height: 20px; margin-bottom: 30px;font-family: Calibri, sans-serif;font-weight:300;margin-left: 1%;margin-right: 1%;text-align: left;}

.picscale {width:100%;position:relative;overflow: hidden;border:1px solid #aaaaa;border-radius: 2%;display: grid;-moz-box-shadow:2px 2px 3px #f8da99;-webkit-box-shadow:2px 2px 3px #333;box-shadow:2px 2px 3px #aaaaaa;background:#ffffff;
filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color='#f8da99');}
.picscale img{width:100%;cursor: pointer; transition: all 0.6s;}
.picscale img:hover{width:100%;transform: scale(1.1);}	
	
/*----------------------------------------------------above wap product show------------*/		
	

	
/*----------------------------------------------------below wap custom option------------*/	
.productbg { width: 100%;  padding-bottom: 2vh;}	
.productbg h2{ line-height: 5vh; font-size: 6vw; font-family: Acumin Pro; color: #333;  padding-top: 2.2vh; text-align: center;}
.producttitle { width: 94%; margin: 0 auto;line-height: 3.2vh;overflow: hidden; font-family: Calibri, sans-serif; font-weight:300; color: #444; font-size: 4vw; text-align: center;}
.content-wrap{ width: 96%; margin: 0 auto; overflow: auto;display: flex;flex-direction: column;flex-wrap: wrap;align-items: center;margin-top: 5vh;margin-bottom: 5vh;row-gap: 30px;}
.content-wrap-left{ width: 100%; text-align: center; }
.content-wrap-left img{width: 90%; height: auto;}
.content-wrap-right{ width: 100%; font-family: Calibri, sans-serif; font-weight:300; color: #111111; line-height: 3.5vh; font-size: 4.2vw;}	
.content-wrap-right h3{ line-height: 40px; font-family: Calibri, sans-serif; font-weight:500; color: #111111; font-size: 5.5vw; }	
.content-box{ width: 96%; margin: 0 auto; overflow: auto;display: flex;row-gap: 30px;flex-wrap: wrap;align-items: center;margin-top: 5vh;margin-bottom: 5vh; }
.content-box-left{ width: 100%; font-family: Calibri, sans-serif; font-weight:300; color: #111111; line-height: 3.5vh; font-size: 4.2vw;}
.content-box-left h3{ line-height: 40px; font-family: Calibri, sans-serif; font-weight:500; color: #111111; font-size:5.5vw; }	
.content-box-right{ width: 100%; order: -1; text-align: center;}	
.content-box-right img{width: 90%; height: auto;}	
/*----------------------------------------------------above wap product------------*/	
.eyebrowpencilbg { width: 100%; background: #dfe6f4;padding-bottom: 2vh;}	
.eyebrowpencilbg h2{ line-height: 5vh; font-size: 6vw; font-family: Acumin Pro; color: #333;  padding-top: 2.2vh; text-align: center;}		
.eyebrowpencilcenter { width: 96%; margin: 0 auto;}
.eyebrowpencil{ width: 100%;word-wrap: break-word;overflow-wrap: break-word;}
.eyebrowpencil img{width: 100%; height: 100%;}
.eyebrowpencil h5{ width: 98%; line-height: 20px; font-size: 15px;font-family: Calibri, sans-serif;font-weight:600; margin-top: 6px; margin-left: 1%;margin-right: 1%; text-align: left;}
.eyebrowpencil p{ width: 98%; height: 64px; font-size: 15px;line-height: 22px; margin-bottom: 30px;font-family: Calibri, sans-serif;font-weight:300;margin-left: 1%;margin-right: 1%;text-align: left;color: #555555;display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp:4;  overflow: hidden;}	
.picscale {width:100%;position:relative;overflow: hidden;border:1px solid #aaaaa;border-radius: 2%;display: grid;-moz-box-shadow:2px 2px 3px #f8da99;-webkit-box-shadow:2px 2px 3px #333;box-shadow:2px 2px 3px #aaaaaa;background:#ffffff;
filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color='#f8da99');}
.picscale img{width:100%;cursor: pointer; transition: all 0.6s;}
.picscale img:hover{width:100%;transform: scale(1.1);}	
/*----------------------------------------------------above wap custom option------------*/		

/*----------------------------------------------------below WAP aboutus------------*/
.aboutusbg { background: #dfe6f4;padding-bottom: 3vh;} 	
.aboutus { padding-bottom: 2.2vh;width: 96%;line-height: 3.5vh; color: #111111; font-size: 4.2vw; font-family: Calibri, sans-serif; font-weight:300; margin: 0 auto;hyphens: auto;} 
.aboutus h2{ line-height: 5vh; font-size: 6vw; font-family: Acumin Pro; color: #333;  margin-top: 3vh; }
.aboutusdevelop{width: 100%; overflow: auto;display: -webkit-flex;display: flex; justify-content: center;flex-direction: row;flex-wrap: wrap; margin-top: 4vh;row-gap: 5vh;}
.aboutusdevelop-content{width: 50%; text-align: center;}
.aboutusdevelop-content p{font-family: Calibri, sans-serif; font-weight:600; color: #111111; font-size: 8vw;line-height: 8vh;text-align: center;text-align: center;}
.aboutusdevelop-content span{font-size: 4vw;}
/*----------------------------------------------------above WAP aboutus------------*/
/*----------------------------------------------------below how to custom------------*/
.howtocustombg { width:100%;}
.howtocustombg h2{ line-height: 5vh; font-size: 6vw; font-family: Acumin Pro; color: #333;  padding-top: 2.2vh; text-align: center;}	
.howtocustom{width: 96%; overflow: auto;display: -webkit-flex;display: flex;align-items: center; justify-content: space-between;flex-direction: row;flex-wrap: wrap; margin: 0 auto; padding-top: 2vh;}
.howtocustom-content{width: 100%; text-align: center; line-height: 4vh;font-size: 4.2vw;font-family: Calibri, sans-serif; font-weight:300;}
.howtocustom-content p{ text-align: center; line-height: 8vh;font-size: 8vw;}	
.howtocustom-content h4{ text-align: center; line-height: 5.5vh;font-size: 5vw;}	
/*----------------------------------------------------above PC how to custom------------*/
/*----------------------------------------------------below FAQ------------*/	
.faqbg { width:100%; background: #dfe6f4;padding-bottom: 3.5vh;}		
.faq-wrap{ width: 94%; margin: 0 auto; overflow: auto;display: flex;flex-direction: column;flex-wrap: wrap;align-items: center;margin-top: 5vh;row-gap: 10px;}
.faq-wrap-left{ width: 100%; }
.faq-wrap-left h2{ width: 88%; margin: 0 auto; line-height: 5vh;font-size: 6vw;font-family: Calibri, sans-serif; font-weight:500;text-align: left;}	
.faq-wrap-left p{ width: 88%; margin: 0 auto;line-height: 3.5vh;font-size: 4vw;font-family: Calibri, sans-serif; font-weight:300;text-align: left;color: #555;}
.faq-wrap-right{ width: 100%; line-height: 28px; font-family: Calibri, sans-serif; font-weight:300; color: #111111;}	
	
.faqfold {width: 100%;color: #b9b9b9;font-weight: 100;letter-spacing: 0.035em;font-size: 1.25vw;margin: 0 auto;}
.faqfold ul {margin: 0;padding: 0;}
.faqfold li {list-style: none;padding: 0;}
.faqfold ul > li:first-child h3 {border-top: 1px solid rgba(0, 0, 0, 0.1);}
.faqfold h3 {padding: 0.4rem 0.01rem 0.4rem 0.01rem;margin: 0;border-bottom: 1px solid rgba(0, 0, 0, 0.07);display: block;position: relative;font-size: 4vw;color: #000000;font-family: Calibri, sans-serif; font-weight:300; }
.faqfold ul ul {display: none;height: 100%;}
.faqfold ul ul li {font-family: Calibri, sans-serif; font-weight:300; line-height: 3.8vh; color: #555;font-size: 4vw;  margin-top: 1.4vh; margin-bottom: 1vh;hyphens: auto;}
.faqfold .arrow {display: inline-block;width: 2vw;height: 1vh; float: right; margin-top: 1vh;border-top: 1px solid var(--light-gray);
 border-right: 1px solid var(--light-gray); -webkit-transform: rotate(135deg);transform: rotate(135deg);-webkit-transform-origin: center;
 transform-origin: center;transition: -webkit-transform 600ms cubic-bezier(0.175, 0.885, 0.32, 1);transition: transform 600ms cubic-bezier(0.175, 0.885, 0.32, 1);transition: transform 600ms cubic-bezier(0.175, 0.885, 0.32, 1), -webkit-transform 600ms cubic-bezier(0.175, 0.885, 0.32, 1);
}
.faqfold .arrow.closed {display: inline-block;width: 1.8vw;height: 1.4vh;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);border-top: 1px solid var(--dark-gray);
border-right: 1px solid var(--dark-gray);}
:root {--dark-gray: #444444;--light-gray: #c9c9c5;}	
/*----------------------------------------------------above FAQ------------*/	
	
/*-------------------------------------------------------below Testimony----------------*/
.reviewbg{ width: 100%; margin-bottom:30px; }
.review{ width: 92%; word-wrap: break-word;overflow-wrap: break-word; margin: 0 auto; padding-bottom: 4vh; }
.reviewcircle {width: 60px;height: 60px; margin: 0 auto;border-radius: 50%; margin-top: 20px; margin-bottom: 20px;}	
.reviewcircle img{width: 100%; height: 100%;border-radius:50%;text-align: center;}
.review h6{ width: 100%; line-height: 5vh; font-size: 5.5vw;text-align: center;font-family: Calibri, sans-serif; font-weight:500; margin-top:15px;}
.review p{ width: 88%;  font-size: 4.2vw;line-height: 3.5vh; padding-bottom: 2vh;text-align: center; margin: 0 auto;font-family: Calibri, sans-serif; font-weight:300;hyphens: auto;}
.swiper-button-prev, .swiper-button-next {--swiper-navigation-size:30px;}
/*-------------------------------------------------------above Testimony----------------*/	
/*-------------------------------------------------------below bottom----------------*/		
.bottombg { width:100%; background: #000;clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 100%);}
.bottom{ width: 88%; margin: 0 auto; overflow: auto;display: -webkit-flex;display: flex;align-items: center; justify-content: space-between;flex-direction: column;flex-wrap: nowrap; padding-top: 7vh;}
.bottom-left{ width: 100%; color:#fff;text-align: center;}
.bottom-left img{width:60%;height: auto;}
.bottom-left p{width:60%;height: auto; width: 80%; margin: 0 auto; line-height: 3.5vh;font-family: Calibri, sans-serif; font-weight:300;margin-top: 2vh;}	
.bottom-center{ width:100%; line-height: 4.2vh; font-family: Calibri, sans-serif; font-weight:300; color: #fff; font-size: 3.9vw;margin-top: 2vh; }
.bottom-right{ width: 100%; display: -webkit-flex;display: flex;align-items: center; justify-content: center;flex-direction: row;flex-wrap: nowrap;margin-top:2vh;}
.bottom-right-version{ width: 30vw;  border:1px solid #fff; color: #000; line-height: 4.5vh; margin-bottom: 3vh; text-align: center; background: #F2EFEF; margin-right: 4vw;font-size: 3.8vw;}	
/*-------------------------------------------------------above bottom----------------*/		
	
.icono-caretLeft {
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  color: #000000;
  width: 20px;
  height: 20px;
  border-top: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: rotate(-45deg);
  margin-left: 10px;
  margin-top: 9px;
}
		
/*-------------------------------------------------------返回顶部按钮整体开始----------------*/	

/*-------------------------------------------------------返回顶部按钮结束----------------*/		
/*----------------------------------------------------以上为手机端css End------------*/	
}