.loader__container {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	        align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	        justify-content: center;
	pointer-events: none;
	z-index: 0
}

body>.loader__container {
	background: #eb4c49;
	position: fixed;
	z-index: 1000;
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
	visibility: hidden;
	overflow: hidden;
	-webkit-box-align: start;
	-ms-flex-align: start;
	-webkit-align-items: flex-start;
	        align-items: flex-start
}
.brand{padding-top: 33px;}
.index-banner{margin-top:9%; padding:0 0 120px 60px;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;position: relative;-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end;}
.index-title{padding-right:60px;font-size: 80px;font-weight: bold;  color: #000; line-height: 1;-webkit-flex-shrink: 0;-ms-flex-negative: 0;flex-shrink: 0;}
.index-summary{padding: 25px 0 5px 0;font-size: 18px; color: #898989;}
.title-side{position: absolute; left: 0px;top:10px; -webkit-transform-origin:left top; transform-origin:left top; -webkit-transform:rotate(-90deg) translateX(-100%); transform:rotate(-90deg) translateX(-100%);font-weight: bold; letter-spacing: 2px; }
.index-title .red{color: #ff171f;}
.mouse{position: absolute;bottom:20px; left: 60px;width: 26px; height: 40px; border-radius:26px; border:solid 2px #000;}
.r-circle,.b-circle{position:absolute; left:50%; margin-left:-2px;display: inline-block; width: 4px;height: 4px; border-radius: 50%;}
.r-circle{background-color:  #ff171f; top:20%;-webkit-animation: flash_fan 1s linear infinite;
    		animation: flash_fan 1s linear infinite;}
.b-circle{background-color: #000; top:20%;
-webkit-animation: flash_fan 1s linear infinite;
    		animation: flash_fan 1s linear infinite;
    		-webkit-animation-delay: 80ms;
	animation-delay: 80ms;
    		}

@-webkit-keyframes flash_fan{
	0% {top:20%;}
	50% {top:70%;}
	100% {top:20%;}		
}
@-webkit-keyframes flash_fan2{
	0% {top:20%;}
	50% {top:70%;}
	100% {top:20%;}				
}
@keyframes flash_fan2{
	0% {top:20%;}
	50% {top:70%;}
	100% {top:20%;}				
}

.index-product-box{padding:5% 0;background-position: center top;background-size: cover; background-image: url("../../public/picture/index/product-list-bg.jpg"); color: #fff; }
.index-product-box ul{display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}
.index-product li{padding:30px 0;width: 33.3%; text-align: center;}
.index-product:after {
  content: "";
  -webkit-box-flex: 1;
  -webkit-flex: auto;
      -ms-flex: auto;
          flex: auto;
}
.index-product li a{display:block;font-size: 20px; color: #fff; }
.index-product li a img{max-width: 60%; width: 200px; display: inline !important;}
.index-product li a:hover{text-decoration: underline;}
.index-product li span{display: block; margin-top: 15px;}

.rel{position: relative; overflow: hidden; margin-bottom: 50px}
.index-promise-bg{position: absolute; width: 30%; height:100%; background: #f7f7f7 ;}
.rel .main{position: relative;}
.index-promise-cont{padding-bottom: 300px;}
.index-promise{margin-left: 50%;}
.index-cont-title {margin-top:140px; font-size: 60px;font-weight: bold;line-height: 1; }
.rel>.index-cont-title{padding-left: 60px; margin-top: 0; padding-bottom: 40px;}
.index-cont-title span{display: block;}
.index-cont-subTitle{margin-top:15px;font-size: 18px; color: #898989;}
.index-promise-list{padding-top:60px;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}
.index-promise-list dl{margin-top: 20px;padding: 0 2%;}
.index-promise-list dd{margin-top:20px;font-size: 24px; font-weight: bold;}
.mt180{margin-top: -80px;}


.slider , .cases {
    position: relative;
    margin-top: 120px;
}
.case-preview a {
	display: block
}

.case-preview a:hover .case-visuel {
	-webkit-transform: scale(.95)!important;
	transform: scale(.95)!important
}

.case-preview a:hover .case-visuel .visuel {
	-webkit-transform: scale(1.35)!important;
	transform: scale(1.35)!important
}

.case-preview .case-visuel {
	overflow: hidden;
	position: relative;
	-webkit-transform-origin: center center;
	transform-origin: center center;
	-webkit-transition: all .4s cubic-bezier(.215, .61, .355, 1);
	transition: all .4s cubic-bezier(.215, .61, .355, 1);
	position: relative
}

.case-preview .case-visuel:before {
	content: '';
	display: block;
	width: 100%;
	padding-top: 60%;
	background: #efefef;
	position: relative;
	z-index: 0
}

.case-preview .case-visuel .visuel {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-size: cover;
	background-position: center center;
	z-index: 1;
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
	-webkit-transition: -webkit-transform 1.2s cubic-bezier(.215, .61, .355, 1);
	transition: -webkit-transform 1.2s cubic-bezier(.215, .61, .355, 1);
	transition: transform 1.2s cubic-bezier(.215, .61, .355, 1);
	transition: transform 1.2s cubic-bezier(.215, .61, .355, 1), -webkit-transform 1.2s cubic-bezier(.215, .61, .355, 1)
}

.case-preview .inner {
	padding-top: 30px;
	position: relative;
	min-height: 140px;
	padding-bottom: 30px
}

@media screen and (min-width:1200px) {
	.case-preview .inner {
		min-height: 150px
	}
}

@media screen and (min-width:1460px) {
	.case-preview .inner {
		min-height: 170px
	}
}

.case-title {
	color: #333;
	font-weight: bold;
	font-size: 24px;
	-webkit-transition: all .4s cubic-bezier(.7, 0, .3, 1);
	transition: all .4s cubic-bezier(.7, 0, .3, 1);
	line-height: 1;
}
.case-time{
	margin-top: 10px;
	font-size: 18px;
}
.case-time span{font-weight: bold;}


.case-preview .view-details {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 30px;
	overflow: hidden;
	display: inline-block;
}
.case-preview a:hover .more,.case-preview a:hover .details{
	-webkit-transform: translateY(-30px);
	        transform: translateY(-30px);
}
.more,.details{height:30px; line-height:30px;display:block; margin-left: 10px;  color: #000;font-weight: bold;-webkit-transition: all .4s cubic-bezier(.7, 0, .3, 1);
	transition: all .4s cubic-bezier(.7, 0, .3, 1);}
.details{top:30px;-webkit-transition: all .4s cubic-bezier(.7, 0, .3, 1) 0.1s;transition: all .4s cubic-bezier(.7, 0, .3, 1) 0.1s;}
.view-details:after{content: "+";position: absolute; left: 0;top:0; line-height: 30px; font-weight: bold; color: #000;-webkit-transition: all .4s cubic-bezier(.7, 0, .3, 1);transition: all .4s cubic-bezier(.7, 0, .3, 1);}
.index-promise-details:hover:after,.case-preview a:hover .view-details:after{-webkit-transform: rotate(180deg);transform: rotate(180deg); color: #000;}
.view-details:before{position: absolute;left:10px; top:-5px; content: ""; width: 100%; height: 100%;border-bottom:solid 2px #000;-webkit-transition: all .4s cubic-bezier(.7, 0, .3, 1);transition: all .4s cubic-bezier(.7, 0, .3, 1);}
.case-preview a:hover .view-details:before{-webkit-transform:translateY(30px);transform:translateY(30px);}

.index-promise-details{margin:50px 0 0 50%;position:relative;height: 60px; overflow: hidden; display: inline-block;font-size: 25px;}
.index-promise-details:before{border-bottom:solid 4px #ff171f ; }
.index-promise-details:after{line-height: 60px; color: #ff171f;}
.index-promise-details .more,.index-promise-details .details{height: 60px; line-height: 60px; margin-left: 20px;}
.index-promise-details .more{color: #ff171f;}
.index-promise-details:hover .more ,.index-promise-details:hover .details{-webkit-transform: translateY(-60px);transform: translateY(-60px);}
.index-promise-details:hover:before{-webkit-transform:translateY(60px);transform:translateY(60px);} 


.cases .slider .swiper-container {
	overflow: visible
}

.cases .slider .swiper-slide {
	opacity: .3;
	pointer-events: none;
	-webkit-transition: opacity .4s cubic-bezier(.7, 0, .3, 1);
	transition: opacity .4s cubic-bezier(.7, 0, .3, 1)
}

.cases .slider .swiper-slide.swiper-slide-visible {
	opacity: 1;
	pointer-events: all
}

 .swiper-buttons {
	position: absolute;
	bottom: 100%;
	right: 0;
	margin-bottom: 40px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	        align-items: center;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	-webkit-justify-content: flex-end;
	        justify-content: flex-end;
	z-index: 10
}

.index-reviewer-box .swiper-buttons{bottom:-90px; right:50px;margin-bottom: 0;}

.swiper-buttons .swiper-button-next,
.swiper-buttons .swiper-button-prev {
	position: relative;
	top: 0;
	left: 0;
	right: 0;
	float: none;
	margin: 0;
	width: 40px;
	height: 40px;
	background: #eb4c49;
	border-radius: 50%;
}
.swiper-buttons .swiper-button-prev{margin-right: 20px;}

@media screen and (min-width:1200px) {
	.swiper-buttons .swiper-button-next,
	.swiper-buttons .swiper-button-prev {
		width: 50px;
		height: 50px
	}
}

.swiper-button-next i,
.swiper-button-prev i {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -60%);
	transform: translate(-50%, -60%);
	color: #fff;
	font-style: normal;
	font-size: 50px;
	font-weight: 300;
	-webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

.swiper-button-next i{left: 52%;}


.index-review-bg{margin-top: 100px; padding: 150px 0; background: #000; color: #fff;}
.index-review,.index-reviewer{display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between;}
.index-review .rel{margin-right: 40px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0}
.index-review img{max-width: 100%;}
.index-reviewer{padding-bottom: 200px;}
.index-reviewer-bg{position: absolute; right: 0;top:0; width: 60%; height: 100%; background: #f7f7f7;}
.index-reviewer-box{margin-top:120px;position:relative;width: 60%; padding:20px 50px 0 50px; background:url("../../public/picture/index/quotes.png") left top no-repeat  ; font-size: 18px; color: #898989;}
.index-reviewer-box:after{position: absolute; content: ""; width:27px; height: 22px; right:0; bottom:0; background:url("../../public/picture/index/quotes.png") left top no-repeat ;  -webkit-transform: rotate(180deg);  transform: rotate(180deg);}
.reviewer{margin-top:30px;display: block; text-align: right; font-weight: bold;}


@media all and (max-width:1280px){
	.index-title{font-size: 60px;}
	.index-cont-title{font-size: 50px;}
	.index-promise-list dd{font-size: 20px;}
}
@media all and (max-width:1023px){
.index-banner{display: block;}
.index-product li a,.index-promise-list dd{font-size: 18px;}

}
@media all and (max-width:768px){
	.index-product li a, .index-promise-list dd{font-size: 16px;}
	.index-product li{min-width: 150px;}
	/*.index-product:after {
	  content: "";
	  -webkit-box-flex: 1;
	  -webkit-flex: auto;
	      -ms-flex: auto;
	          flex: auto;
	}*/
	.index-promise{margin-left: 0;}
	.index-promise-details{margin: 30px 0 0 0 ;}
	.index-promise-list{-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;}
	.index-promise-list dl{width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center;}
	.index-promise-list dt{margin:20px 40px;}
	}
@media all and (max-width:680px){
	.index-title{font-size: 50px;}
	.index-cont-title{font-size: 40px; margin-top: 100px;}
	.index-review,.index-reviewer{display: block;}
	.index-reviewer-box{width: 100%; margin-top: 40px;}
	.index-review .rel{padding-bottom: 40px;}
	}
@media all and (max-width:479px){.index-product:after {
	  content: "";
	  display: none;
	}}
@media all and (max-width:420px){
	.index-title{font-size: 40px;}
	.index-cont-title{font-size: 36px;}
	}