.index-banner{ height:100vh;}
.index-three-out{ margin: 110px auto 90px; max-width: 1315px; }
.index-three-text{ float: left; margin:0 60px; text-align: center;}
.index-three-text p{ display: block; text-align: center;}
.index-three-text p i{ font-size: 30px; vertical-align: middle; margin-right: 15px;}
.index-three-text span{ line-height: 40px; text-align: center; display: block;}
.index-three-text p{ font-size: 20px; font-weight: bold; margin-bottom: 25px;}
.index-three-text p img{ vertical-align: -8px; display: inline-block; margin-right: 15px;}

.heartfelt-words{background-color:#6e7b61; padding: 60px 0 60px 0; }
.heartfelt-words-title{ color: #fff;font-size: 26px; font-weight: bold; text-align: center; margin-bottom: 50px;}

.banner-text{ position: relative; height: 100%;}
.banner-img {  height: 100%; width: 100%; overflow: hidden;}
.banner-img ul,.banner-img ul li { display: block; width: 100%;}
.banner-img ul li{  background-position: center center; background-repeat: no-repeat;height: 100vh; background-size: cover; }
.banner-img ul li .bannerimg{ display: block; }
.banner-img ul li a{ display: block;width: 100%; height: 100%; background-position:center center;}
.banner-text-big{ position: absolute; height: 100%; width: 100%; color: #fff; z-index: 20;}
.banner-text-innder{ position: absolute;  font-size: 42px; left: 185px; bottom: 10vh;}
.banner-text-innder span{ display: inline-block; margin-right: 4px;}
.banner-text-innder .p-y-tt{ overflow: hidden;}
.banner-text-innder .p-y-tt .text-yellow{ font-size: 22px; color: #c5d700; text-align: right; overflow: hidden;transform: translateY(400%);	-webkit-transition: transform 1s , color 1s linear;	transition: transform 1s , color 1s linear; }
.banner-text-innder .p-y-tt .text-yellow span{ display: block;}
.banner-text-innder .text-wihte{ font-weight: bold;}
.banner-text-innder .text-wihte span{ overflow: hidden;}
.banner-text-innder .text-wihte span b{transform: translateY(200%); display: block;	-webkit-transition: transform 1s cubic-bezier(.79,.14,.15,.86), color 1s ease;	transition: transform 1s cubic-bezier(.79,.14,.15,.86), color 1s ease;}
.banner-text-innder .text-wihte.show span b ,.banner-text-innder .p-y-tt .text-yellow.show{ transform:translateY(0);}
.notopmargin{background: #e8e3df;}
.noto-text{ max-width: 590px; border-left: 10px solid #6E7B61; margin: 60px auto; padding-left: 95px;}
.noto-text01{font-size: 26px; letter-spacing: 5px; font-weight: bold; margin-bottom: 18px;}
.noto-text02{ font-size: 20px; color: #969696;}
.noto-text02 span{ display: block;}
.noto-text02 span i{font-size: 16px;}
.heartfelt-cont{ position: relative;}
.heartfeltitem{height: 100%; /*background: #e8e3df;*/}
.heartfeltitem a{display: block;}
.heartfeltitem img{width: 100%;}
.heartfelt-bottom {
	background: #e8e3df;
	padding: 30px 20px 30px 20px; 
	position: relative;
}
.heartfelt-bottom .heartfelt-bottom-left{ width: 145px; float: left;}
.heartfelt-bottom .heartfelt-bottom-right{float: left; width: calc(100% - 160px); margin-left: 15px;}
.heartfelt-bottom .heartfelt-bottom-right .heartfelt-title{ text-align: center; font-size: 20px;font-weight: bold; }
.heartfelt-bottom .heartfelt-bottom-right .heartfelt-title span:nth-child(1){display: block;}
.heartfelt-bottom .heartfelt-bottom-right .heartfelt-title span:nth-child(2){ color: #5e5e5e; display: block;}
.heartfelt-bottom .heartfelt-bottom-right p{ color: #969696; margin-top: 7px; margin-bottom: 9px; font-size: 16px; line-height: 20px; height: 57px;}
.heartfelt-bottom .heartfelt-bottom-right p.index_heart_s_p{
	color: #969696; 
	font-size: 16px;
	height: 82px;
	line-height: 20px;
	margin-top: 7px; 
	margin-bottom: 14px; 
	overflow: hidden;
	text-overflow: ellipsis;
}
.a-link,.a-link2{ width: 115px; height: 40px; text-align: center; line-height: 40px; color: #FFFFFF; background: #6e7b61; display: inline-block; font-size: 14px; padding: 0 10px;}
.a-link2{ background: #e8e3df; color: #6E7B61;}
.link-more{ text-align: center;}
.link-more a{ display: inline-block; margin: 0 12.5px;}
.a-link.heartfelt-link{/*position: absolute; right: 20px;bottom: 30px;*/ float: right;}
.heartfelt-bg{ background: #6E7B61; padding: 60px 0;}
.heartfelt-cont .carousel-control.right,.heartfelt-cont .carousel-control.left{ background-image:none; width: auto; opacity: 1;height: 27px; top: 50%; transform: translateY(-50%);}
.heartfelt-cont .carousel-control.right{ right: 50px; }
.heartfelt-cont .carousel-control.left{ left: 50px;}

.index-case-padding{ padding: 80px 0; background: #fff;}
.index-casebox{ position: relative; margin: 0 15px; background: #fff;}
.index-case-text{width: 225px; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.index-case-img{ width: calc(100% - 475px ); height: 640px; background-repeat: no-repeat; background-position: center center; background-size: cover;}
.newscase{ font-size: 26px; font-weight: bold; position: relative; color: #5e5e5e; height: 100px;}
.newscase:after,.index-QA-text:after{ content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 13px ; background: #6e7b61;}
.index-case-cont{ line-height: 30px;}
.index-case-cont .index-case-title{ margin-top: 30px; font-weight: bold; font-size: 20px; display: block;}
.index-case-cont .index-case-detail{ color: #969696;text-align: justify;vertical-align: top; display: block; font-size: 16px;}

#indexcase .carousel-inner>.item.active.right,#indexcase .carousel-inner>.item.next {
	left:0;
	-webkit-transform:translate3d(0,100%,0);
	transform:translate3d(0,100%,0);
}
#indexcase  .carousel-inner>.item.active.left,#indexcase  .carousel-inner>.item.prev {
	left:0;
	-webkit-transform:translate3d(0,-100%,0);
	transform:translate3d(0,-100%,0)
}
#indexcase .carousel-inner>.item.active,#indexcase .carousel-inner>.item.next.left,#indexcase .carousel-inner>.item.prev.right {
	left:0;
	-webkit-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0)
}
.btn-carousel{ position: absolute; bottom: 0; right: calc(100% - 475px ); width:66px;}
#indexcase .carousel-control.right,#indexcase  .carousel-control.left{background-image:none; width: 66px; position: static; opacity: 1;}

.gray-text{ text-align: center; font-size: 26px; font-weight: bold; background: #e8e3df; padding: 40px 0 45px; line-height: 1.5;}
.gray-text span{ display: inline-block; width: 65px; height: 3px; background-color: #6e7b61;}
.gray-text p{ margin-top: 25px;}

.index-QA-link>div>div{padding: 0 16.5px;}
.index-QA{ padding: 75px 30px 100px; overflow: hidden;}
.index-QA-text{ position: relative; height: 80px;}
.index-QA-text span{ display: block;}
.index-QA-text span:first-child{ font-size: 20px;}
.index-QA-text span:nth-child(2){ color: #969696; margin-top: 5px;}


.QA-indeximg{ position: relative; overflow: hidden;}
.QA-indeximg img{ width: 100%;}
.QA-indeximg .index-QA-t{ position: absolute; bottom: 15px; left: 10px; color: #fff;font-weight: bold;}
.QA-indeximg span{ display: block;}
.QA-indeximg .index-QA-t.index-QA-tt{ font-size: 97px; font-weight: bold; height: 390px;;}
.QA-indeximg .index-QA-t.index-QA-tt2{ font-size: 16px; left: 130px; right: 10px;}
.QA-indeximg a{ display: block;position: absolute; left: 0; top: 0;padding: 90px 30px 0 30px; background: #6e7b61; color: #fff; width: 100%; height: 100%; transform: translateY(100%);-webkit-transform: translateY(100%);transition: all 0.8s; -webkit-transition: all 0.8s}
.QA-indeximg a:hover,.QA-indeximg a:active,.QA-indeximg a:focus{ color: #fff !important;}
.QA-indeximg a .readmore{ position: absolute; bottom: 70px; left: 30px; right: 30px; border-bottom:3px solid #fff; height: 16px; text-align: right;}
.QA-indeximg a .readmore span{ background: #6e7b61; display: inline-block; height: 30px; line-height: 30px; padding: 0 15px; font-weight: bold; letter-spacing: 2px; }
.QA-indeximg a .QA-small-title{ margin-top: 60px; font-size: 16px; line-height: 36px;}
.QA-small-title{ font-weight: bold;}
.QA-indeximg:hover  a { transform: translateY(0); -webkit-transform: translateY(0);}
.index-linkmore{ margin-top: 110px;}

.index-phone-content{ padding: 20px 20px 40px; background: #fff;}
.index-phone-content .index-phone-case{text-align: center; font-size: 16px;}
.index-phone-content .index-phone-tt{ line-height: 25px; color: #969696;}
.index-phone-content .a-link{ margin: 0 auto;}
.btn-phone-carousel{ position: absolute; top: 0; left: 0;}
#phonecase .carousel-control.right,#phonecase .carousel-control.left{ width: 32px; height: 32px; top: 50%; opacity:0.9;transform: translateY(-50%);-webkit-transform: translateY(-50%);background-image:-webkit-linear-gradient(left,rgba(255,255,255,0.9) 0,rgba(255,255,255,0.9) 100%);
	background-image:-o-linear-gradient(left,rgba(255,255,255,0.9) 0,rgba(255,255,255,0.9) 100%);
	background-image:-webkit-gradient(linear,left top,right top,from(rgba(255,255,255,0.9)),to(rgba(255,255,255,0.9)));
	background-image:linear-gradient(to right,rgba(255,255,255,0.9) 0,rgba(255,255,255,0.9) 100%);
	/*filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);*/}
.phone-case-title .bottom-bg{ width: 13px; height: 3px; background: #6E7B61; display: block; margin: 10px auto 0;}
.phone-case-title{padding: 40px 0; text-align: center;}
.btn-phone-carousel>img{width: 100%; z-index: -1; position: relative;}

@media screen and (max-width:1802px) {
	.QA-indeximg a .QA-small-title.scroll {max-height: 186px; overflow-y: scroll; padding-right: 10px; text-align: justify;}
	.QA-indeximg a .QA-small-title.scroll::-webkit-scrollbar-track {background: #F5F5F5; box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);}
	.QA-indeximg a .QA-small-title.scroll::-webkit-scrollbar {background: #F5F5F5; width: 6px;}
	.QA-indeximg a .QA-small-title.scroll::-webkit-scrollbar-thumb {background: #e8e3df; box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);}
}
@media screen and (min-width:1601px) {
	.index-three-out {display: flex;}
}
@media screen and (max-width:1600px) {
	.QA-indeximg a .QA-small-title{ margin-top: 20px;}
	.QA-indeximg a{padding-top: 50px;}
	.QA-indeximg a .readmore{bottom: 30px;}
	.index-three-text{  width: 29%; margin: 0 2%;}
	.index-three-text span{ display: inline;letter-spacing: 0;}
}
@media screen and (max-width:1400px) {
	.index-case-img{ height: 540px;}
	.QA-indeximg .index-QA-t.index-QA-tt{font-size: 80px; height: 325px;}
	.QA-indeximg .index-QA-t.index-QA-tt2{left: 110px;}
	.QA-indeximg span{ display: inline;}
}
@media screen and (max-width:1280px){
	.QA-indeximg a .QA-small-title.scroll {max-height: 146px;}
}
@media screen and (max-width:1200px){
	.index-three-text span{ display: inline;}
	.index-case-img{ width: calc(100% - 260px);}
	.btn-carousel{right: calc(100% - 329px); bottom: 4px;}
	.QA-indeximg .index-QA-t.index-QA-tt{font-size: 60px; height: 240px; }
	.QA-indeximg .index-QA-t.index-QA-tt2{left: 90px;}
}
@media screen and (max-width:1145px){
	.QA-indeximg a .QA-small-title.scroll {max-height: 110px;}
}
@media screen and (max-width:1130px){
	.QA-indeximg a .QA-small-title.scroll_last {max-height: 116px; overflow-y: scroll;}
	.QA-indeximg a .QA-small-title.scroll_last::-webkit-scrollbar-track {background: #F5F5F5; box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);}
	.QA-indeximg a .QA-small-title.scroll_last::-webkit-scrollbar {background: #F5F5F5; width: 6px;}
	.QA-indeximg a .QA-small-title.scroll_last::-webkit-scrollbar-thumb {background: #e8e3df; box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);}
}
@media screen and (max-width:1025px){
	.heartfelt-bottom .heartfelt-bottom-left{width: 146px;}
	.heartfelt-bottom .heartfelt-bottom-right{width: calc(100% - 194px)}
	.alsindex{ display: none;}
	.QA-indeximg a .QA-small-title{ line-height: 25px;}
	.QA-indeximg a .QA-small-title.scroll {max-height: 102px;}
	.QA-indeximg a .QA-small-title.scroll_last {max-height: 96px;}
}
@media screen and (min-width:991px) and (max-width:1024px){
	.heartfelt-bottom .heartfelt-bottom-right p.index_heart_s_p {margin-bottom: 13px;}
}
@media screen and (min-width:1025px){
	.alsindex2{ display: none;}
}
@media screen and (max-width:992px){
	.index-QA-link>div>div{ margin-bottom: 30px;}
	.index-QA-link>div>div.index-linkmore{ margin-top: 80px;}
	.heart-content.container{width: auto;}
	.heartfelt-words{padding: 60px 30px;}
	.heartfelt-cont .carousel-control.right{right: -26px;}
	.heartfelt-cont .carousel-control.left{ left: -26px;}
	.index-case-padding{padding-left: 10px; padding-right: 10px;}
	.index-three-text p{font-size: 19px;}
	.index-three-text span{font-size: 15px;}
	.a-link.heartfelt-link{ float: none;}
	.phone-case-title{font-size: 24px;}
}
@media screen and (max-width:991px){
	.heartfelt-bottom.first {padding-bottom: 0;}
	.heartfelt-bottom {margin-bottom: 0; padding: 30px 20px 30px 20px!important;}
	.heartfelt-bottom .heartfelt-bottom-right p.index_heart_s_p {height: 51px; margin-bottom: 14px;}
}
@media screen and (max-width:767px){
	.index-banner,.banner-img ul li{ height: calc(100vh - 105px); }	
	.banner-text-innder{ left: 20px; right: 20px; text-align: left; font-size: 32px;}
	.banner-text-innder .text-wihte{ line-height: 35px;}
	.banner-text-innder .text-wihte{ margin-bottom: 0;}
	.banner-text-innder .p-y-tt .text-yellow{ text-align: left; font-size: 20px;}
	.banner-text-innder .p-y-tt .text-yellow span{ text-align: left; display: inline}
	.index-three-text{width: auto; margin:0 20px 50px;}
	.index-three-out{margin-top: 50px; margin-bottom: 0;}
	.index-three-text p{ margin-bottom: 5px;}
	.index-three-text p i{ display: block; margin: 0 auto; font-size: 75px; margin-bottom: 10px;}
	.index-three-text span{ line-height: 40px;}
	.noto-text{padding:0; border: none; text-align: center; margin: 45px 0;}
	.noto-text .noto-text02 span{ display: inline;}
	.heartfelt-cont{ margin-left: 20px; margin-right: 20px;}
	.heartfelt-bottom .heartfelt-bottom-left{width: 100px;}
	.heartfelt-bottom{padding-top: 20px; padding-bottom: 28px;}
	.a-link.heartfelt-link{ position: static; float: none;}
	.heartfelt-words{padding-left: 0;padding-right: 0;}
	.heartfelt-bottom .heartfelt-bottom-right{width: calc(100% - 116px);}
	.heartfelt-bottom .heartfelt-bottom-right P{ margin-top: 0;-webkit-line-clamp:inherit; height: auto;}
	.phone-hart { text-align: center; font-size: 16px; font-weight: bold; margin-bottom: 20px; line-height: 30px;}
	.heartfelt-cont .carousel-control.right{right:-18px}
	.heartfelt-cont .carousel-control.left{left: -18px;}
	.heartfelt-cont .carousel-control.left img,.heartfelt-cont .carousel-control.right img{width: 13px;}
	.gray-text{ font-size: 16px; line-height: 30px;}
	.index-QA{padding-bottom: 60px; padding-top: 40px;}
	.index-QA-text{ height: auto; padding-bottom: 20px;}
	.index-QA-text span:first-child{ font-size: 26px;}
	.index-QA-text span:first-child b{ display: block;}
	.index-QA-text span:nth-child(2){ font-size: 18px;}
	.a-link, .a-link2{ height: 40px; line-height: 40px; width: 120px; font-size: 14px;}
	.index-QA-link>div>div{padding: 0; padding-right: 10px; margin-bottom: 20px;}
	.index-QA-link>div>div:nth-child(2n){ padding-left: 10px; padding-right: 0;}
	.index-QA-link{ margin-left: -30px; margin-right: -30px;}
	.index-QA-link>div>div.index-linkmore{ margin-top: 40px; padding-left: 0;}
	.QA-indeximg .index-QA-t.index-QA-tt{ font-size: 42px; height: 143px; line-height: 48px; left: 5px; margin-bottom: 0;}
	.QA-indeximg .index-QA-t.index-QA-tt2{ font-size: 12px; left: 51px;margin-bottom: 0;}
	.link-more a:nth-child(1){margin-right: 5px;}
	.link-more a:nth-child(2){margin-left: 7px;}
	.QA-indeximg a{padding: 10px;}
	.QA-indeximg a .QA-small-title{font-size: 16px; line-height: 20px;}
	.QA-indeximg a .readmore{right: 10px; left: 10px; font-size: 14px;}
	.QA-indeximg a .readmore span{ letter-spacing: 1px;}
	.banner-text-innder .text-yellow span{ display: inline;}
	.index-phone-content .index-phone-case{font-size: 18px;}
	.heartfelt-words-title,.phone-case-title b,.index-QA-text span:first-child{font-size: 24px;}
	.heartfelt-bottom .heartfelt-bottom-right p.index_heart_s_p {margin-bottom: 17px;}
	#phonecase .heartfeltitem{ padding-left: 5px; padding-right: 5px;}
	.slider {height: 100%; overflow: hidden;}
}
@media screen and (min-width:554px) and (max-width:991px){
	.QA-indeximg a .QA-small-title.scroll {max-height: none; overflow-y: hidden;}
}
@media screen and (min-width:375px) and (max-width:991px){
	.QA-indeximg a .QA-small-title.scroll_last {max-height: none; overflow-y: hidden;}
}
@media screen and (min-width:320px) and (max-width:374px){
	.QA-indeximg a .QA-small-title.scroll_last {max-height: 80px; overflow-y: scroll;}
}
@media screen and (max-width:513px){
	.heartfelt-bottom .heartfelt-bottom-right p {margin-bottom: 15px;}
	.heartfelt-bottom .heartfelt-bottom-right p.index_heart_s_p {height: 60px; margin-bottom: 8px;}
}
@media screen and (max-width:378px){
	.QA-indeximg a .QA-small-title.scroll {max-height: 82px;}
}