@charset "utf-8";
/* CSS Document */
html, body{
	width: 100%;
	height: 100%;
	position: relative;
	font-size: 16px;
	line-height: 30px;
	font-family: 'Lato', '微軟正黑體', sans-serif;
}


a{	color: inherit;}
a:focus,a:hover{ text-decoration: none;}


.c-ffffff{color:#ffffff;}
.c-4c397b{color:#4c397b;}
.c-ff6600{color:#ff6600;}
.bg-ffffff{background-color:#ffffff;}
.bg-4c397b{background-color:#4c397b;}
.bg-ff6600{background-color:#ff6600;}
.btn-4c397b{background-color: #4c397b;color: #ffffff;}
.btn-4c397b:focus,.btn-4c397b:hover{color:#ffffff!important;}
.btn-ff6600{background-color: #ff6600;color: #ffffff;}
.btn-ff6600:focus,.btn-ff6600:hover{color:#ffffff!important;}
.fw-400{font-weight: 400;}
.fw-600{font-weight: 600;}
.fw-700{font-weight: 700;}
.fw-900{font-weight: 900;}
.fw-bold{font-weight: bold;}




.wrap{
	width: 100%;
	min-height: 100%;
	display: block;
	position: relative;
	/* overflow-x: hidden; */
	/* background-color: #eeeeee; */
}

/* section & deco ============================================= */
section{
	width: 100%;
	position: relative;
}
.deco-sec .line{
	width: 2px;
	height: 100%;
	background-color: #c9c3d7;
	position: absolute;
	left: 65px;
	top: 0;
}

.deco-sec{
	width: 20%;
	display: block;
	position: absolute;
	pointer-events: none;
	left: 10%;
	z-index: 300;
}
.deco-sec01{
	height: 700px;
	top: 400px;
}
@media screen and (min-width:1400px){
	.deco-sec01{
		height: 700px;
		top: 480px;
}
}
.deco-sec01>a{
	display: block;
	position: absolute;
	top: 350px;
	left: 15px;
	pointer-events: auto;
}

.deco-sec02{
	height: 200px;
	bottom: -35px;
}
.deco-sec03{
	height: 100px;
	bottom: -35px;
}
.deco-sec04{
	height: 120px;
	bottom: -20px;
}
.deco-sec05{
	height: 100px;
	bottom: -20px;
}

.deco-sec06{
	height: 280px;
	bottom: 150px;
}
.deco-sec06>a{
	display: block;
	position: absolute;
	top: 300px;
	left: 15px;
	pointer-events: auto;
}
@media screen and (max-width:1200px){
	.deco-sec{
		display: none;
	}
}


/* page */
.page{
	width: 100%;
	display: block;
	position: relative;
	padding: 1rem 0;
	text-align: center;
}
.page .pagination{
	border-top: 1px solid #e0e0e0;
	justify-content: center;
	align-items: center;
	padding: 2rem 0 0;
}
.page .pagination .page-item .page-link{
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	padding: 0;
	margin: 0 3px;
	border: 0;
	border-radius: 50%;
	background-color: #ffffff;
	color: #000000;
	transition: .3s .03s;
	font-size: 12px;
	font-weight: 700;
}
.page .pagination .page-item .page-link.page-link-btn{
	width: 130px;
	height: 50px;
	border-radius: 0;
	border: 1px solid #e0e0e0;
	padding: 5px 5px;
}
.page .pagination .page-item .page-link.page-link-btn>span{
	width: 14px;
	/* height: 10px; */
	display: inline-block;
	background-image: url('../images/icon-arrow14.png');
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	color: #cccccc;
	margin: 0;
	transition: .3s .03s;
}
.page .pagination .page-item:first-child .page-link.page-link-btn>span{
	transform: rotateZ(180deg);
}
.page .pagination .page-item .page-link:hover.page-link-btn>span{
	background-image: url('../images/icon-arrow2.png');
}
.page .pagination .page-item.active .page-link,
.page .pagination .page-item .page-link:focus,
.page .pagination .page-item .page-link:hover{
	background-color: #4c397b;
	color: #ffffff;
}
.page .pagination .page-item.active .page-link.page-link-btn>span,
.page .pagination .page-item .page-link.page-link-btn:focus>span,
.page .pagination .page-item .page-link.page-link-btn:hover>span{
	color: #ffffff;
}
@media (min-width: 992px) {
	.page .pagination{
		justify-content: flex-end;
	}
	.page .pagination .page-item .page-link.page-link-btn{
		width: 150px;
		height: 50px;
		border-radius: 0;
		border: 1px solid #e0e0e0;
		padding: 5px 5px;
		text-align: center;
	}
	.page .pagination .page-item{
		margin: 0 3px;
	}

}

@media (max-width: 350px) {
	.page .pagination{
		transform: scale(0.8);
	}
}















/* footer==================================================== */
.footer{
	width: 100%;
	display: block;
	position: relative;
	overflow-x: hidden;
	/* z-index: 50; */
}

/* 地圖 */
.footer .map{
	width: 100%;
	height: 200px;
	display: block;
	position: relative;
	background-size: cover;
	background-position: left top;
}
.footer .map a.map-link{
	width: 100%;
	height: 100%;
	display: block;
	position: relative;
}
.footer .map .text{
	width: 100px;
	height: 100px;
	padding: 15px;
	background-color: #4c397b;
	color: #ffffff;
	font-size: 10px;
	line-height: 14px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 12.5%;
	margin: auto;
}
.footer .map a.btn-goTop{
	color: #ffffff;
	position: absolute;
	bottom: 20px;
	right: 10vw;
	font-size: 12px;
	font-weight: bold;
	display: none;
}
.footer .map a.btn-goTop>span{
	font-size: 18px;
}
@media (min-width: 768px) {
	.footer .map{
		height: 380px;
	}
	.footer .map .text{
		width: 190px;
		height: 190px;
		padding: 45px;
		font-size: 15px;
		line-height: 22px;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 12.5%;
		margin: auto;
	}
}
@media (min-width: 1200px) {
	.footer .map{
		width: 60vw;
		height: 765px;
		left: 40vw;
		background-position: 60% top;
	}
	.footer .map .text{
		top: 80px;
		bottom: auto;
		margin: 0;
		left: 20vw;
	}
	.footer .map a.btn-goTop{
		display: block;
	}
}


/* 網站地圖 */
.footer-menu{
	width: 100%;
	padding: 40px 25vw;
	display: block;
	position: relative;
	background-color: #ffffff;
}
.footer-list{
	width: 100%;
	display: block;
	margin-bottom: 15px;
}
.footer-list .list-title{
	width: 100%;
	display: block;
	font-weight: 700;
	font-size: 12px;
	line-height: 18px;
	position: relative;
	color: #000000;
}
.footer-list .list-title:after{
	content: '';
	width: 12px;
	height: 7px;
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	background-image: url('../images/icon-arrow.png');
	background-size: cover;
	background-position: center center;
}
.footer-list .list-title[aria-expanded="true"]:after{
	transform: rotateZ(180deg);
}
.footer-list .list-item{
	width: 100%;
	display: block;
	position: relative;
	font-size: 10px;
	line-height: 14px;
	margin: 8px 0;
	color: #000000;
	opacity: .6;
	transition: .3s .03s;
}
.footer-list .list-item:focus,
.footer-list .list-item:hover{
	opacity: 1;
}
@media (min-width: 768px) {
	.footer-menu{
		padding: 40px 8.3vw;
	}
	.footer-list{
		margin-bottom: 20px;
		padding: 0 8px;
	}
	.footer-list .list-title:after{
		display: none;
	}
	.footer-list .list-title,
	.footer-list .list-item{
		font-size: 15px;
		line-height: 30px;
	}
}
@media (min-width: 1200px) {
	.footer-menu{
		width: 60vw;
		height: 640px;
		padding: 60px 10vw 0;
		position: absolute;
		top: 0;
		left: 0;
		/* overflow-y: auto; */
		-ms-overflow-style: none;
	}
	.footer-menu::-webkit-scrollbar{
    display: none;
  }
	.footer-list{
		margin-bottom: 35px;
	}
	.footer-list .list-title{
		margin-bottom: 20px;
		line-height: 20px;
		cursor: auto;
	}
}


/* 電話 */
.footer-tel{
	width: 100%;
	padding: 0 12.5vw;
	display: block;
	position: relative;
	background-color: #f3f1f7;
	text-align: center;
}
.footer-tel .tel-icon{
	width: 100%;
	padding: 30px 0;
	display: block;
	font-size: 16px;
	line-height: 20px;
	font-weight: 900;
	color: #4c397b;
}
.footer-tel .tel-icon>img{
	width: 20px;
	height: 20px;
	margin-top: -3px;
}
.footer-tel .copyright{
	width: 100%;
	padding: 30px 12vw;
	display: block;
	font-size: 10px;
	line-height: 14px;
	color: #8d8d8d;
	border-top: 1px solid #ccc9d4;
}
@media (min-width: 1200px) {
	.footer-tel{
		width: 40vw;
		padding-top: 0 ;
		padding-right:30px;
		padding-bottom:  0;
		padding-left: calc(10vw+30px);
		display: block;
		position: relative;
		background-color: #f3f1f7;
		text-align: left;
		margin-top: -125px;
	}
	.footer-tel .tel-icon{
		font-size: 25px;
		line-height: 25px;
		padding: 50px 0;
	}
	.footer-tel .copyright{
		width: 100%;
		padding: 30px 0;
	}
}



/* design */
.footer-bottom{
	width: 100%;
	padding: 30px 0;
	display: block;
	background-color: #ffffff;
	color: #8d8d8d;
	text-align: center;
}
@media (min-width: 1200px) {
	.footer-bottom{
		width: 60vw;
		padding: 30px 10vw 30px 0;
		display: block;
		position: relative;
		right: 0;
		left: 40vw;
		margin-top: -75px;
		text-align: right;
		z-index: -1;
		line-height: 15px;
	}
}























/* header====================================================== */
.header-block{
	width: 100%;
	display: block;
	position: relative;
	font-size: 0;
}
.header-block>h1{
	color: transparent;
	font-size: 0;
}
.header{
	width: 100%;
	display: flex;
	justify-content: space-between;
	position: absolute;
	top: 0;
	background-color: #ffffff;
	transition: 0s;
	z-index: 10;
}
.header .navbar{
	width: 100%;
}
.header .navbar-brand{
	width: 80px;
	height: 36px;
	position: relative;
}
.header .navbar-brand>img{
	width: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
}
.header .menu-right{
	background-color: #4c397b;
}
.header .menulist-btn{
	width: 50px;
	height: 100%;
	padding: 0;
	display: block;
	position: relative;
	background-color: transparent;
	border: 0;
}
.header .menulist-btn img{
	width: 12px;
	position: absolute;
	top: 0;bottom: 0;
	left: 0;right: 0;
	margin: auto;
}
.header .menu-right .menu-right-pc{
	display: none;
}

.header .navbar-menu{
	padding: 0;
	list-style: none;
	position: relative;
	margin: 0;
	font-weight: bold;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.header .navbar-menu>li{
	display: inline-block;
}
.icon-search{
	content: '';
	width: 15px;
	height: 15px;
	display: block;
	position: relative;
	margin-right: 20px;
	z-index: 550;
}
.icon-search>img{
	width: 100%;
	margin: 0;
	padding: 0;
	display: block;
}
@media screen and (max-width:330px){
	.icon-search{
		width: 12px;
		height: 12px;
		/* top: 2px; */
	}
}
@media (min-width: 768px) {
	.icon-search{
		width: 18px;
		height: 18px;
		/* top: 2px; */
		margin-right: 30px;
	}	
}
.menu-cart{
	font-size: 12px;
	transition: .3s .03s;
}
.menu-cart:focus,
.menu-cart:hover{
	color: #4c397b;
}
.menu-cart .icon-cart{
	width: 20px;
	height: 20px;
	display: inline-block;
	position: relative;
	top: 5px;
	margin: 0 10px;
}
.menu-cart .icon-cart>img{
	width: 100%;
	position: absolute;
}
.menu-cart .cart-num{
	width: 20px;
	height: 20px;
	display: inline-block;
	background-color: #4c397b;
	color: #ffffff;
	border-radius: 50%;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
	margin: 0 10px;
	transition: .3s .03s;
}
.menu-cart .cart-num:focus,
.menu-cart .cart-num:hover{
	background-color: #ff6600;
}

.navbar-menulist{
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	background-color: #4c397b;
	z-index: 500;
	opacity: 0;
	transition: .5s;
	pointer-events: none;
	display: flex;
	flex-direction: column;
	text-align: center;
	color: #ffffff;
}
.navbar-menulist.show{
	opacity: 1;
	pointer-events: auto;
	z-index: 1000;
}
.menulist-btnclose{
	width: 30px;
	height: 30px;
	position: absolute;
	background-color: transparent;
	border: 0;
	top: 10vh;
	right: 30px;
}
.menulist-btnclose:focus,
.menulist-btnclose:hover{
	outline: 0;
}
.navbar-menulist strong{
	font-size: 36px;
	margin: 10vh 0 40px;
	font-weight: 900;
}
.navbar-menulist .navbar-nav .nav-item .nav-link{
	padding: 1rem;
	font-size: 18px;
	font-weight: bold;
}
.navbar-menulist .navbar-nav .nav-item .nav-link:focus,
.navbar-menulist .navbar-nav .nav-item .nav-link:hover{
	color: inherit;
}

@media (min-width: 768px) {
	.header .navbar-brand{
		width: 180px;
		height: 80px;
		margin-right: 2.5rem;
	}
	.header .menulist-btn{
		width: 96px;
		height: 100%;
		padding: 0;
		display: block;
		position: relative;
		background-color: transparent;
		border: 0;
	}
	.header .menulist-btn img{
		width: 20px;
	}
	.menu-cart{
		font-size: 13px;
		line-height: 20px;
	}
	.menu-cart .icon-cart{
		width: 24px;
		height: 24px;
		top: 5px;
	}
	.menu-cart .cart-num{
		width: 30px;
		height: 30px;
		font-size: 14px;
		line-height: 30px;
	}
}
@media (min-width: 1190px) {
	.navbar-menulist{
		transition: 0s;
	}
}
@media (min-width: 1200px) {
	.header{
		width: 100%;
		display: flex;
		justify-content: space-between;
		position: absolute;
		left: 0;
		top: 0;
		background-color: #ffffff;
	}
	.header .menu-right{
		background-color: #4c397b;
	}
	.header .menulist-btn{
		display: none;
	}
	.header .menu-right .menu-right-pc{
		width: 180px;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #ffffff;
		font-size: 13px;
		line-height: 15px;
		font-weight: bold;
	}
	.header .menu-right .menu-right-pc>img{
		max-width: 16px;
		max-height: 16px;
		margin: 0 10px;
	}
	.navbar-menulist .navbar-nav{
		width: 100%;
		padding: 0;
		justify-content: space-around;
	}
	.icon-search{
		margin-right: 80px;
		margin-left: 5px;
	}	
	.navbar-menulist{
		width: calc(100% - 500px);
		height: 60px;
		position: relative;
		top: 0;
		left: 0;
		background-color: #ffffff;
		opacity: 1;
		pointer-events: auto;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		text-align: center;
		color: #000000;
	}
	.navbar-menulist strong,
	.menulist-btnclose{
		display: none;
	}
	.navbar-menulist .navbar-nav .nav-item .nav-link{
		padding: 1rem;
		font-size: 13px;
		font-weight: bold;
		transition: .3s .03s;
	}
	.navbar-menulist .navbar-nav .nav-item .nav-link:focus,
	.navbar-menulist .navbar-nav .nav-item .nav-link:hover{
		/* color: #4c397b; */
		color: #ff6600;
	}
	.menu-cart .icon-cart{
		margin: 0 0;
	}
}
@media (min-width: 1400px) {
	.header .navbar{
		padding: .5rem 1rem .5rem 0;
	}
	.header-block{
		display: none;
	}
	.header{
		width: 90%;
		display: flex;
		justify-content: space-between;
		position: absolute;
		left: 5%;
		top: 0;
		background-color: #ffffff;
	}
	.header:before{
		content: '';
		width: 10vw;
		height: 100%;
		display: block;
		position: absolute;
		left: -5vw;
		background-color: #ffffff;
	}
	.header .menu-right .menu-right-pc{
		width: 250px;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #ffffff;
		font-size: 13px;
		transition: .3s .03s;
	}
	.header .menu-right .menu-right-pc:focus,
	.header .menu-right .menu-right-pc:hover{
		background-color: #ff6600;
	}
	.header .navbar-menu{
		width: 300px;
		justify-content: space-around;
	}
	.icon-search{
		margin-right: 20px;
	}	
	.navbar-menulist{
		width: calc(100% - 420px);
		height: 60px;
		position: relative;
		top: 0;
		left: 0;
		background-color: #ffffff;
		opacity: 1;
		pointer-events: auto;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		text-align: center;
		color: #000000;
	}
	.menu-cart .icon-cart{
		margin: 0 10px;
	}
}
@media (min-width: 1600px) {
	.header{
		width: 80%;
		display: flex;
		justify-content: space-between;
		position: absolute;
		left: 10%;
		top: 0;
		background-color: #ffffff;
	}
	.header:before{
		content: '';
		width: 20vw;
		height: 100%;
		display: block;
		position: absolute;
		left: -10vw;
		background-color: #ffffff;
	}
	.header .menu-right .menu-right-pc{
		width: 300px;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #ffffff;
		font-size: 13px;
		font-style: 
	}
}

.header.fixed{
	position: fixed;
	top: -100px;
	z-index: 500;
	transition: 0s;
}
.header.fixed.show{
	top: 0;
	transition: .5s;
}
@keyframes headerfixre{
	from{ top: 0px; }
	to{ top: -100px; }
}
.ani-refix{
	/* animation: headerfixre .5s; */
}

@media screen and (max-width:330px){
	.menu-cart .icon-cart{
		width: 15px;
		height: 15px;
		top: 3px;
		margin: 0 0;
		font-size: 12px;
	}
	.menu-cart .cart-num{
		width: 15px;
		height: 15px;
		display: inline-block;
		background-color: #4c397b;
		color: #ffffff;
		border-radius: 50%;
		font-size: 12px;
		line-height: 15px;
		text-align: center;
		margin: 0 5px;
		transition: .3s .03s;
	}
}


.search-block{
	width: 100%;
	height: 300px;
	display: block;
	background-color: #4c397b;
	color: #ffffff;
	padding: 100px 12%;
	position: relative;
	margin-top: -300px;
	transition: .3s;
}
.search-block.show{
	margin-top: 0;
}
.search-block .form-group{
	width: 100%;
	display: block;
	position: relative;
	padding: 0;
	margin: 0;
}
.search-block .form-group>.form-control{
	background-color: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	border-bottom: 1px solid #8E86AB;
	color: #ffffff;
	font-size: 22px;
}
.search-block .form-group>label{
	color: #8E86AB;
	font-size: 14px;
}
.search-block .form-group>.form-control::placeholder{
	color: #8E86AB;
}
.search-block .closeSearch{
	position: absolute;
	right: 20px;
	top: 10px;
	font-size: 24px;
	/* transition: .3s .03s; */
	color: #ffffff;
}
@media (min-width: 768px) {
	.search-block{
		padding: 100px 15%;
	}
	.search-block .form-group>.form-control{
		font-size: 28px;
	}
	.search-block .form-group>label{
		font-size: 16px;
	}
}
@media (min-width: 1200px) {
	.search-block{
		height: 500px;
		padding: 200px 35%;
		margin-top: -500px;
	}
	.search-block .form-group>.form-control{
		font-size: 36px;
	}
	.search-block .form-group>label{
		font-size: 18px;
	}
}








/* banner==================================================== */
.banner{
	width: 100%;
	display: block;
}
.banner .carousel-indicators{
	width: 90%;
	margin-right: 5%;
	margin-left: 5%;
	display: none;
	position: absolute;
	bottom: 80px;
	justify-content: flex-end;
}
.banner .carousel-indicators>li{
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: #4c397b;
	opacity: .4;
}
.banner .carousel-indicators>li:hover{
	opacity: 1;
}
.banner .carousel-indicators>li.active{
	background-color: #ff6600;
	opacity: 1;
}
.banner .carousel-control-prev{
	width: 35px;
	height: 35px;
	line-height: 35px;
	text-align: center;
	border-radius: 50%;
	background-color: #d5d4da;
	color: #ffffff;
	opacity: 1;
	font-size: 16px;
	font-weight: 900;
	top: auto;
	bottom: 30px;
	right: 100px;
	left: auto;
	transition: .3s .03s;
}
/* .banner .carousel-control-prev:hover{
	transform: translateX(-10px);
} */
.banner .carousel-control-next{
	width: 35px;
	height: 35px;
	line-height: 35px;
	text-align: center;
	border-radius: 50%;
	background-color: #ffffff;
	color: #4c397b;
	opacity: 1;
	font-size: 16px;
	font-weight: 900;
	top: auto;
	bottom: 30px;
	right: 40px;
	left: auto;
	transition: .3s .03s;
}
/* .banner .carousel-control-next:hover{
	transform: translateX(10px);
} */

.banner-content{
	width: 100%;
	height: 400px;
	display: block;
	position: relative;
}
.banner-content .img{
	width: 75%;
	height: 100%;
	display: block;
	background-size: cover;
	background-position: center center;
	position: absolute;
	right: 0;
	top: 0;
}
.banner-content .carousel-caption{
	width: 62.5%;
	min-height: 250px;
	max-height: 70%;
	padding: 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: rgba(240, 239, 246, .8);
	color: #000000;
	left: 0;
	top: 0;
	text-align: left;
	font-weight: 700;
	overflow: hidden;
}
.banner-content .carousel-caption .banner-title{
	font-size: 22px;
}
.banner-content .carousel-caption .banner-deco{
	width: 100px;
	height: 2px;
	display: inline-block;
	background-color: #4c397b;
	vertical-align: middle;
	margin: -5px 10px 0;
}
.banner-content .carousel-caption .banner-btn{
	width: 150px;
	padding: 10px 10px;
	display: block;
	background-color: #4c397b;
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	margin: 10px 0;
	transition: .3s .03s;
}
.banner-content .carousel-caption .banner-btn>img{
	width: 15px;
	margin-top: -3px;
}
.banner-content .carousel-caption .banner-btn:focus,
.banner-content .carousel-caption .banner-btn:hover{
	background-color: #ff6600;
	color: #ffffff;
}
@media (min-width: 768px) {
	.banner-content{
		height: 600px;
	}
	.banner-content .carousel-caption{
		width: 66%;
		min-height: 300px;
		max-height: 50%;
		padding: 30px 50px;
		top: 100px;
	}
	.banner-content .carousel-caption .banner-title{
		font-size: 40px;
		line-height: 45px;
	}
}
@media (min-width: 1200px) {
	.banner-content{
		height: 960px;
		/* height: 100vh; */
	}
	.banner-content .img{
		width: 60%
	}
	.banner-content .carousel-caption{
		width: 	50%;
		min-height: 300px;
		max-height: 20%;
		padding: 30px 50px;
		top: 120px;
		left: 10%;
	}
	.banner-content .carousel-caption .banner-title{
		font-size: 40px;
		line-height: 54px;
	}
	.banner .carousel-control-prev,
	.banner .carousel-control-next{
		display: none;
	}
	.banner .carousel-indicators{
		display: flex;
	}
}
@media (min-width: 1400px) {
	.banner-content .carousel-caption{
		width: 40%;
		top: 200px;
	}
}

/* bannerNEWS */
.banner-news{
	width: 100%;
	display: none;
	position: relative;
}
.banner-news .carousel-inner{
	width: 75%;
	right: 0;
	left: 25%;
}
.banner-news .carousel-control-prev{
	width: 12.5%;
	opacity: 1;
	left: 0;
}
.banner-news .carousel-control-next{
	width: 12.5%;
	opacity: 1;
	left: 12.5%;
}
.banner-news .carousel-control-next .banner-news-icon{
	width: 100%;
	transform: rotateY(180deg);
}
.banner-news .banner-news-icon>img{
	width: 60px;
	max-width: 100%;
	transition: .3s .03s;
}
.banner-news .banner-news-icon:hover>img{
	/* transform: translateX(-10px); */
}
.banner-news .banner-news-block{
	width: 100%;
	height: 220px;
	background-color: #ffffff;
	display: flex;
}
.banner-news .banner-news-block .img{
	width: 33%;
	height: 100%;
	display: block;
	background-size: cover;
	background-position: center center;
}
.banner-news .banner-news-block .text{
	width: 67%;
	padding: 40px 50px;
	font-size: 22px;
	line-height: 30px;
}

.banner-news .banner-news-block .text .title{
	width: 100%;
	height: 90px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	margin-bottom: 10px;
}
.banner-news .banner-news-block .text .banner-news-btn{
	font-size: 13px;
	font-weight: 900;
	display: inline-block;
	transition: .3s .03s;
}
.banner-news .banner-news-block .text .banner-news-btn:hover{
	color: #4c397b;
}
.banner-news .banner-news-block .text .banner-news-btn>span{
	display: inline-block;
	transition: .3s .03s;
	transform: translateX(20px);
}
.banner-news .banner-news-block .text .banner-news-btn>span>img{
	width: 15px;
	margin-top: -3px;
}
.banner-news .banner-news-block .text .banner-news-btn:hover>span{
	transform: translateX(30px);
}
@media (min-width: 768px) {
	.banner-news{
		display: block;
	}
}
@media (min-width: 1200px) {
	.banner-news{
		width: 50%;
		position: absolute;
		left: 30%;
		bottom: 80px;
		z-index: 1000;
	}
	.banner-news .carousel-control-prev{
		width: 20%;
		opacity: 1;
		left: 0;
	}
	.banner-news .carousel-control-next{
		width: 20%;
		opacity: 1;
		left: auto;
		right: 0;
	}
	.banner-news .carousel-inner{
		width: 60%;
		right: 0;
		left: 20%;
	}
	.banner-news .banner-news-icon:hover>img{
		transform: translateX(-10px);
	}
}



















/* index-product================================================ */
.index-product{
	width: 100%;
	display: block;
	position: relative;
}
.index-product .index-product-bg{
	width: 100%;
	height: 320px;
	display: block;
	position: relative;
	background-size: 120%;
	background-position: 0px -50px;
}
.index-product .index-product-title{
	width: 62.5%;
	padding: 20px;
	display: block;
	font-size: 22px;
	background-color: rgba(240, 239, 246, .8);
	text-align: left;
	font-weight: 700;
	overflow: hidden;
	position: absolute;
	top: 70px;
	z-index: 5;
}
.index-product .index-product-title .deco{
	width: 150px;
	height: 2px;
	display: inline-block;
	background-color: #4c397b;
	vertical-align: middle;
	margin: -5px 	0px 0;
}
.index-product .index-product-bg .more-btn{
	width: 150px;
	padding: 10px 10px;
	display: block;
	background-color: #4c397b;
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	margin: 10px 0;
	transition: .3s .03s;
	position: absolute;
	left: 20px;
	top: 240px;
}
@media screen and (max-width:350px){
	.index-product .index-product-bg .more-btn{
		top: 260px;
	}
}
.index-product .index-product-bg .more-btn:focus,
.index-product .index-product-bg .more-btn:hover{
	background-color: #ff6600;
	color: #ffffff;
}
.index-product-list{
	width: 100%;
	display: block;
	position: relative;
	background-color: #ffffff;
	padding: 30px 12.5%;
}

.index-product-list>ul{
	width: 100%;
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	font-size: 0;
	list-style: none;
}
.index-product-list>ul>li{
	width: 100%;
	display: block;
	font-size: 16px;
}
.index-product-list>ul>li>a{
	width: 100%;
	display: flex;
	align-items:center;
	position: relative;
	padding: 20px 0;
	border-bottom: 1px solid #e0e0e0;
	transition: .3s .03s;
}
.index-product-list>ul>li>a:focus,
.index-product-list>ul>li>a:hover{
	color: #ff6600;
}
.index-product-list>ul:last-child>li:last-child>a{
	border: 0;
}
.index-product-list>ul>li>a div{
	/* width: 100%; */
	/* outline: 1px solid #0f0; */
}
.index-product-list>ul>li>a .icon{
	width: 150px;
	height: 50px;
	line-height: 50px;
	font-size: 30px;
	font-weight: 700;
	color: #4c397b;
}
.index-product-list>ul>li>a .arrow{
	width: 50px;
	text-align: right;
	vertical-align: middle;
}
.index-product-list>ul>li>a .text{
	width: 100%;
	font-size: 12px;
	color: #999999;
}
.index-product-list>ul>li>a .text strong{
	width: 100%;
	display: block;
	font-size: 18px;
	font-weight: 400;
	line-height: 20px;
	padding: 5px 0;
	opacity: 1;
	color: #000000;
	transition: .3s .03s;
}
.index-product-list>ul:last-child>li:last-child>a .text strong{
	font-size: 13px;
	font-weight: 900;
	margin-top: 3px;
}
.index-product-list>ul>li>a:focus .text strong,
.index-product-list>ul>li>a:hover .text strong{
	color: #ff6600;
}
@media (min-width: 768px) {
	.index-product .index-product-title{
		width: 50%;
		height: 320px;
		padding: 50px 15% 100px 8.4%;
		position: absolute;
		top: 25px;
		font-size: 32px;
		line-height: 40px;
	}
	.index-product .index-product-bg .more-btn{
		display: none;
	}
	.index-product .index-product-title .deco{
		width: 200px;
		height: 2px;
		display: inline-block;
		background-color: #4c397b;
		vertical-align: middle;
		margin: 20px 	0px 0;
	}
	.index-product .index-product-bg{
		width: 100%;
		height: 1000px;
		display: block;
		position: relative;
		background-size: 125%;
		background-position: 0 -20px;
	}
	.index-product-list{
		width: 50%;
		display: block;
		position: absolute;
		background-color: #ffffff;
		padding: 30px 8.4%;
		left: 0;
		top: 320px;
		z-index: 5;
	}
}

@media (min-width: 1200px) {
	.index-product .index-product-bg{
		width: 60%;
		height: 1000px;
		display: block;
		position: relative;
		background-size: 110%;
		background-position: -60px 0;
		left: 40%;
	}
	.index-product:after{
		content: '';
		width: 40%;
		height: 140px;
		display: block;
		position: absolute;
		background-color: #f4f2f8;
		left: 0;
		bottom: 0;
	}
	.index-product .index-product-title{
		width: 40%;
		height: 250px;
		padding: 60px 60px 60px 50px;
		position: absolute;
		top: 180px;
		left: 10%;
		font-size: 40px;
		line-height: 54px;
	}
	.index-product .index-product-title .deco{
		width: 200px;
		height: 2px;
		display: inline-block;
		background-color: #4c397b;
		vertical-align: middle;
		margin: 20px 	0px 0;
	}
	.index-product-list{
		width: 40%;
		display: flex;
		position: absolute;
		background-color: #ffffff;
		padding: 50px 10px;
		left: 10%;
		top: 430px;
		align-content: flex-start;
	}
	.index-product-list>ul{
		width: 50%;
		padding: 0 20px;
	}
	.index-product-list>ul>li:last-child>a{
		border: 0;
	}
	.index-product-list>ul>li{
		width: 100%;
		height: 110px;
		display: block;
		font-size: 14px;
	}
	.index-product-list>ul>li>a{
		width: 100%;
		padding: 20px 0;
	}
	.index-product-list>ul>li>a .arrow{
		width: 30px;
		text-align: right;
		vertical-align: middle;
	}
	.index-product-list>ul>li>a .text strong{
		font-size: 18px;
		line-height: 20px;
		padding: 5px 0;
	}
	.index-product-list>ul:last-child>li:last-child>a .text strong{
		font-size: 13px;
	}
}
@media (min-width: 1400px) {
	.index-product-list>ul{
		width: 50%;
		padding: 0 30px;
	}
}
@media (min-width: 1600px) {
	.index-product-list>ul{
		width: 50%;
		padding: 0 40px;
	}
}




/* index-service=================================== */
#indexService{
	width: 0;
	height: 0;
	display: block;
	pointer-events: none;
	position: absolute;
	left: 0;
	top: -50px;
}
.index-service{
	width: 100%;
	display: block;
	position: relative;
	background-color: #f4f2f8;
	padding: 50px 12.5%;
}
.index-service .title{
	width: 100%;
	display: block;
	position: relative;
}
.index-service .title>strong{
	font-size: 22px;
	/* font-weight: 700; */
	display: inline-block;
	margin-bottom: 20px;
}
.index-service .title .contact-btn{
	width: 150px;
	padding: 10px 10px;
	display: block;
	background-color: #4c397b;
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	transition: .3s .03s;
	margin-bottom: 20px;
}
.index-service .title .contact-btn:focus,
.index-service .title .contact-btn:hover{
	background-color: #ff6600;
	color: #ffffff;
}

.index-service .service-content{
	width: 100%;
	display: block;
	position: relative;
}
.index-service .service-item{
	width: 100%;
	display: block;
	position: relative;
	padding: 20px 0;
}
.index-service .service-item>img{
	max-width: 100%;
	margin-bottom: 20px;
}
.index-service .service-item>strong{
	display: block;
	font-weight: 700;
	font-size: 16px;
	line-height: 30px;
	margin-bottom: 10px;
}
.index-service .service-item>p{
	display: block;
	font-size: 14px;
	line-height: 18px;
}
@media (min-width: 768px) {
	.index-service{
		padding: 50px 8.4%;
	}
	.index-service .title>strong{
		font-size: 40px;
		margin-bottom: 40px
	}
	.index-service .title .deco{
		width: 200px;
		height: 2px;
		display: inline-block;
		background-color: #4c397b;
		vertical-align: middle;
		margin: 0px 	10px 0;
	}
	.index-service .service-item>strong{
		font-size: 20px;
		line-height: 30px;
	}
	.index-service .service-item>p{
		font-size: 15px;
		line-height: 25px;
	}
}
@media (min-width: 1200px) {
	.index-service{
		padding: 80px 12% 120px;
	}
	.index-service .title .deco{
		width: 280px;
		margin: -10px	30px 0;
	}
	.index-service .title .contact-btn{
		width: 150px;
		padding: 10px 10px;
		position: absolute;
		right: 0;
		top: 0;
		font-size: 12px;
		font-weight: 700;
		margin-bottom: 20px;
	}
}












/* index-news============================================ */
.index-news{
	width: 100%;
	display: block;
	background-color: #ffffff;
	padding: 20px 0;
}
@media (min-width: 400px) {
	.index-news{
		/* padding: 50px 0; */
	}
}
.index-news .title{
	width: 100%;
	padding: 10px 12.5% 5px;
	position: relative;
}
.index-news .title>strong{
	font-size: 22px;
	/* font-weight: 700; */
	display: inline-block;
	margin-bottom: 20px;
	margin-top: 20px;
}
.index-news .title .more-btn{
	width: 150px;
	height: 50px;
	padding: 10px 10px;
	display: block;
	background-color: #4c397b;
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	transition: .3s .03s;
	margin-bottom: 10px;
	position: absolute;
	right: 8.4%;
	top: 0;
	bottom: 0;
	margin: auto;
}
.index-news .title .more-btn:focus,
.index-news .title .more-btn:hover{
	background-color: #ff6600;
	color: #ffffff;
}

.index-news-list{
	width: 100%;
	display: block;
	position: relative;
}
.news-item{
	width: 100%;
	display: block;
	position: relative;
	transition: .3s .03s;
}
.news-item:focus,
.news-item:hover{
	box-shadow: 0 0 40px rgba(206, 202, 215, .7);
}
.news-item .img{
	width: 100%;
	padding-bottom: 60%;
	display: block;
	background-size: cover;
	background-position: center center;
	position: relative;
}
.news-item .text{
	width: 100%;
	display: block;
	padding: 20px 12.5% 20px;
}
.news-item .text .date{
	font-size: 12px;
	line-height: 18px;
	color: #a1a1a1;
	margin-bottom: 5px;
}
.news-item .text .news-title{
	width: 100%;
	height: 72px;
	font-size: 18px;
	line-height: 24px;
	font-weight: 400;
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	margin-bottom: 30px;
	color: #000000;
}
.news-item .text .more{
	width: 100%;
	display: block;
	font-size: 14px;
	font-weight: 900;
	color: #000000;
	margin-bottom: 20px;
}
.news-item .text .more>img{
	width: 15px;
	margin-top: -3px;
}
.index-news .news-deco{
	display: none;
}
@media (min-width: 768px) {
	.index-news .title{
		padding: 30px 8.4%;
		position: relative;
		margin-bottom: 30px;
	}
	.index-news .title>strong{
		font-size: 40px;
	}
	.index-news .title .more-btn{
		position: absolute;
		right: 8.4%;
		/* top: 30px; */
	}
	.index-news .news-deco{
		width: 100%;
		display: block;
		position: relative;
		text-align: center;
		padding: 50px 0 30px; 
	}
	.index-news .news-deco>img{
		width: 360px;
		display: block;
		margin: auto;
	}
}
@media (min-width: 1200px) {
	.index-news .title{
		padding: 30px 12%;
	}
	.index-news .title .more-btn{
		right: 12%;
	}
	.index-news-list{
		padding: 0 10%;
	}
}
















/* inner page====================================================== */
.path{
	width: 100%;
	display: block;
	position: relative;
	padding: 0 1rem;
	background-color: #f1eff6;
	font-size: 12px;
	line-height: 20px;
	font-weight: 700;
	text-transform:uppercase;
}
.path .breadcrumb{
	width: 100%;
	background-color: transparent;
	padding: 15px 0;
	margin: 0;
}
.path .breadcrumb-item+.breadcrumb-item::before{
	content: '>';
	color: #000000;
	opacity: .5;
	font-weight: 900;
	font-size: 14px;
}
.path .breadcrumb-item a{
	color: #000000;
	transition: .3s .03s;
}
.path .breadcrumb-item a:hover{
	color: #ff6600;
}
.path .breadcrumb-item.active a{
	color: #4c397b;
}
@media (min-width: 768px) {
	.path{
		padding: 0 calc(1rem + 5px);
	}
}
@media (min-width: 1200px) {
	.path{
		/* line-height: 30px; */
	}
	.path .breadcrumb{
		padding: 20px 0;
	}
	.path.pcHide{
		display: none;
	}
	.path.pcHidePath .breadcrumb{
		display: none;
	}
}
@media (min-width: 1400px) {
	.path{
		width: 95%;
		padding: 0 1rem 0 calc(5% + 5px);
		font-size: 12px;
		line-height: 30px;
	}
	.path:before{
		content: '';
		width: 100%;
		height: 96px;
		display: block;
		position: relative;
	}
	.path .breadcrumb{
		padding: 25px 0;
	}
}
@media (min-width: 1600px) {
	.path{
		width: 90%;
		padding: 0 1rem 0 calc(10% + 5px);
	}
}

.ul-click{
	width: 100%;
	display: block;
	padding: 0;
	margin: 0;
	list-style: none;
}
.ul-click>li{
	padding-left: 30px;
	background-image: url('../images/icon-check.png');
	background-repeat: no-repeat;
	background-position: 5px 12px;
}


.white-table{
	color: #ffffff;
}
.white-table>thead>tr>th,
.white-table>tbody>tr>td{
	vertical-align: middle;
	padding: .5rem .75rem .5rem 0;
	border-top: 1px solid rgba(225, 225, 225, .1);
	font-weight: 300;
}
.white-table>thead>tr>th{
	border-top: 0;
	border-bottom: 1px solid rgba(225, 225, 225, .1);
	font-size: 20px;
	font-weight: 400;
}


.form-control:focus{
	border-color: #4c397b;
  -webkit-box-shadow: 0 0 1px #4c397b;
  box-shadow: 0 0 1px #4c397b;
}


















/* product========================================================== */
.page-product-title{
	width: 100%;
	padding: 2rem 1rem;
	display: block;
	position: relative;
	font-size: 30px;
	font-weight: 700;
}
.productIndex-title-block{
	width: 100%;
	display: block;
	position: relative;
	background-color: rgba(241, 239, 246, .8);
	padding: 2rem 1rem;
}
.productIndex-title-block>strong{
	width: 110px;
	display: inline-block;
	font-size: 20px;
	/* font-weight: 700; */
}
.productIndex-title-block>span{
	width: 150px;
	height: 2px;
	display: inline-block;
	background-color: #4c397b;
	vertical-align: middle;
	margin: -5px 10px 0;
}
.productIndex-title-block>p{
	width: 100%;
	display: block;
	position: relative;
	margin: 10px 0 10px;
	font-size: 14px;
	font-weight: 300;
}
.product-3Dmodel{
	width: 100%;
	display: block;
	position: relative;
	height: 900px;
	background-color: #4c397b;
	/* background-image: url('../images/product-3d-model.jpg');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat; */
}

.product-3Dmodel .category-show{
	width: 300px;
	display: block;
	position: absolute;
	bottom: 50px;
	right: 0;
	padding: 20px 0;
	border-bottom: 1px solid #ffffff;
	color: #ffffff;
	font-size: 12px;
	font-weight: 900;
	line-height: 30px;
}
.product-3Dmodel .category-show>img{
	width: 30px;
	height: 30px;
	display: inline-block;
	margin-right: 10px;
}
.productIndex-list{
	width: 100%;
	display: block;
	position: relative;
	background-color: #ffffff;
	padding: 1rem;
}
@media (min-width: 768px) {
	.page-product-title{
		font-size: 60px;
		padding: 4rem 8.4%;
	}
	.productIndex-title-block{
		padding: 3rem 8.4%;
	}
	.productIndex-title-block>strong{
		width: auto;
		font-size: 30px;
		line-height: 40px;
	}
	.productIndex-title-block>span{
		width: 120px;
	}
	.productIndex-title-block>p{
		font-size: 16px;
	}
	.product-3Dmodel{
		height: 1200px;
	}
	.product-3Dmodel .category-show{
		width: 83.2%;
		left: 0;
		right: 0;
		margin: 0 auto;
	}
	.productIndex-list{
		padding: 1rem 10%;
	}
}
@media (min-width: 1200px) {
	.product-3Dmodel{
		width: 60%;
		height: 1550px;
		background-position: center -20px;
		left: 40%;
	}
	.product-3Dmodel .category-show{
		width: 20%;
		left: auto;
		right: 0;
		margin: 0;
		bottom: 250px;
	}
	.page-product-title{
		width: 30%;
		padding: 80px 1.5rem;
		font-size: 60px;
		line-height: 60px;
		position: absolute;
		left: 0%;
		top: 0;
	}
	.productIndex-title-block{
		width: 50%;
		height: 210px;
		position: absolute;
		left: 0%;
		top: 220px;
		z-index: 5;
		padding: 60px 4rem;
	}
	.productIndex-list{
		width: 50%;
		position: absolute;
		left: 0%;
		top: 430px;
		padding: 40px 4rem;
	}
}
@media (min-width: 1400px) {
	.page-product-title{
		width: 30%;
		font-size: 60px;
		line-height: 60px;
		position: absolute;
		left: 5%;
		top: 0;
	}
	.productIndex-title-block{
		width: 45%;
		left: 5%;
		padding: 60px 1.5rem;
	}
	.productIndex-list{
		width: 45%;
		left: 5%;
		padding: 40px 1.5rem;
	}
}
@media (min-width: 1600px) {
	.page-product-title{
		width: 30%;
		left: 10%;
	}
	.productIndex-title-block{
		width: 40%;
		left: 10%;
	}
	.productIndex-list{
		width: 40%;
		left: 10%;
	}
}







.product-list-item{
	width: 100%;
	display: block;
}
.product-list-item>.title{
	width: 100%;
	display: flex;
	align-items:center;
	padding: 2rem 0;
	border-top: 1px solid #e0e0e0;
	transition: .3s .03s;
}
/* .product-list-item.active>.title, */
.product-list-item>.title[aria-expanded="true"]{
	border-top: 3px solid #ff6600;
}
.product-list-item>.title .icon{
	width: 120px;
	height: 50px;
	line-height: 50px;
}
.product-list-item>.title .arrow{
	width: 50px;
	text-align: right;
	vertical-align: middle;
}
.product-list-item>.title .text{
	width: 100%;
	font-size: 12px;
	color: #999999;
}
.product-list-item>.title .text strong{
	width: 100%;
	display: block;
	font-size: 18px;
	font-weight: 400;
	opacity: 1;
	color: #000000;
	transition: .3s .03s;
}
.product-list-item>.title:hover .text strong{
	color: #4c397b;
}
/* .product-list-item.active>.title .text strong, */
.product-list-item>.title[aria-expanded="true"] .text strong{
	color: #ff6600;
}
.product-list-item.viewAll>.title .num{
	width: 120px;
	height: 50px;
	line-height: 50px;
	font-size: 32px;
	font-weight: 700;
	color: #4c397b;
}
.product-list-item.viewAll>.title .text strong{
	font-size: 13px;
	font-weight: 700;
	margin-top: 5px;
}
.product-list-item.viewAll>.title:hover .text strong{
	color: #ff6600;
}

.product-list-item>.collapse{
	width: 100%;
}
.product-list-ul{
	width: 100%;
	display: block;
	list-style: none;
	padding: 0;
}
.product-list-ul>li{
	width: 100%;
	display: block;
}
.product-list-ul>li+li{
	border-top: 1px solid #ececec;
}
.product-list-ul>li>a{
	width: 100%;
	display: block;
	position: relative;
	padding: 10px 1rem;
	font-size: 16px;
	line-height: 20px;
	font-weight: 400;
	color: #000000;
	transition: .3s .03s;
}
@media screen and (max-width:350px){
	.product-list-ul>li>a{
		font-size: 12px;
	}
}
.product-list-ul>li.active>a,
.product-list-ul>li>a:focus,
.product-list-ul>li>a:hover{
	background-color: #f4f2f8;
	color: #000000;
	border-color: #f4f2f8;
}

/* .product-list-ul>li.active>a:after,
.product-list-ul>li>a:focus:after,
.product-list-ul>li>a:hover:after{ */
.product-list-ul>li.active>a:after{
	content: '';
	width: 15px;
	height: 15px;
	display: inline-block;
	background-image: url('../images/icon-arrow15.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	color: #ff6600;
	margin: 0 1rem;
	position: relative;
	top: 3px;
}
@media (min-width: 1200px) {
	.product-list-item.viewAll .title{
		justify-content: flex-end;
	}
	.product-list-item.viewAll>.title .num{
		width: auto;
		padding-right: 30px;
	}
	.product-list-item.viewAll>.title .text{
		width: auto;
	}
	.product-list-item.viewAll>.title .text strong{
	}
	.product-list-item>.title:hover .text strong{
		color: #ff6600;
	}
}





.last-product-list{
	width: 100%;
	display: block;
	position: relative;
	background-color: #f4f2f8;
	padding: 2rem 1rem;
}
.last-product-title{
	width: 100%;
	display: block;
	position: relative;
	margin-bottom: 5rem;
}
.last-product-title>strong{
	/* font-weight: 900; */
	font-size: 20px;
	display: inline-block;
}
.last-product-title>.deco{
    width: 150px;
    height: 2px;
    display: inline-block;
    background-color: #4c397b;
    vertical-align: middle;
    margin: -5px 10px 0;
}
.productIndex-last-moreBTN{
	width: 260px;
	background-color: #4c397b;
	color: #ffffff;
	padding: 1rem 1.5rem;
	font-size: 12px;
	font-weight: 700;
	display: block;
	position: relative;
	transition: .3s .03s;
	margin: 40px 0;
	text-align: center;
}
.productIndex-last-moreBTN>img{
	width: 20px;
	height: 20px;
	margin: -2px 10px 0 20px;
	transition: .3s .03s;
}
.productIndex-last-moreBTN:hover{
	color: #ffffff;
	background-color: #ff6600;
}
.productIndex-last-moreBTN:hover>img{
	/* transform: translateX(10px); */
}
@media (min-width: 768px) {
	.last-product-list{
		padding: 3rem 15%; 
	}
	.last-product-title>strong{
		font-size: 40px;
	}
	.last-product-title>.deco{
	    width: 220px;
	    margin: -5px 0 0 20px;
	}
}
@media (min-width: 1200px) {
	.last-product-list{
		padding: 5rem 12%; 
	}
	.last-product-list:before{
		content: '';
		width: 40%;
		height: 30px;
		display: block;
		background-color: #f4f2f8;
		position: absolute;
		left: 0;
		top: -30px;
	}
	.last-product-title>.deco{
	    width: 300px;
	    margin: -5px 0 0 20px;
	}
	.productIndex-last{
		width: 100%;
		display: block;
		position: relative;
		padding: 0 5%;
	}
	.productIndex-last-moreBTN{
		left: 0;
		right: 0;
		margin: 40px auto;
	}
}




/* product-list-page==================================== */
.product-list-page{
	width: 100%;
	display: block;
	position: relative;
	padding: 1rem;
}
.product-list-collapse{
	width: 100%;
	display: block;
	position: relative;
	/* border-bottom: 1px solid #e0e0e0; */
}
.product-list-collapse>.collapse{
	border-bottom: 1px solid #e0e0e0;
}
.product-listR{
	width: 100%;
	display: block;
	position: relative;
	padding: 1rem 0 2.5rem;
	border-bottom: 1px solid #e0e0e0;
	margin-bottom: -1px;
}
.product-listR>strong{
	font-size: 20px;
	line-height: 30px;
}
.product-listR>a{
	width: 30px;
	height: 30px;
	display: block;
	position: absolute;
	right: 0;
	top: 1rem;
}
.product-listR>a>img{
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	transition: .3s .03s;
	transform: rotateX(180deg);
}
.product-listR>a[aria-expanded="true"]>img{
	transform: rotateX(0deg);
}
.product-content{
	width: 100%;
	display: block;
	position: relative;
}
.product-content>h3{
	width: 100%;
	display: block;
	font-weight: bold;
	font-size: 20px;
	line-height: 30px;
	padding: 1rem 0;
}
.category-title{
	width: 100%;
	display: block;
	padding: 1rem 0;
	margin-bottom: 1rem;
	position: relative;
}
.category-title:before{
	content: '';
	width: 100%;
	height: 1px;
	background-color: #e0e0e0;
	position: absolute;
	left: 0;
	top: 0;bottom: 0;
	margin: auto 0;
	z-index: -1;
}
.category-title>strong{
	display: inline-block;
	padding: 5px 1rem 5px 10px;
	border-radius: 999px;
	background-color: #4c397b;
	color: #ffffff;
	font-size: 16px;
	line-height: 30px;
	font-weight: 400;
}
.category-title>strong>span{
	display: inline-block;
	min-width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .2);
	font-size: 14px;
	text-align: center;
	margin: 0 5px 0 0;
}
.category-more{
	width: 150px;
	display: block;
	border: 1px solid #e0e0e0;
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	padding: 10px;
	margin: 10px 0 30px;
	transition: .3s .03s;
}
.category-more>span{
	width: 15px;
	height: 15px;
	background-image: url('../images/icon-arrow5.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	/* color: #cccccc; */
	margin-left: 10px;
	transition: .3s .03s;
}
.category-more:hover{
	background-color: #4c397b;
	color: #ffffff;
}
.category-more:hover>span{
	background-image: url('../images/icon-arrow2.png');
}
@media (min-width: 768px) {
	.product-list-collapse{
		width: 80%;
		left: 10%;
	}
	.product-content{
		width: 80%;
		left: 10%;
	}
}
@media (min-width: 992px) {
	.product-list-page{
		display: flex;
		justify-content: space-around;
	}
	.product-list-collapse{
		width: 30%;
		left: 0;
		margin-right: 20px;
	}
	.product-listR>a{
		display: none;
	}
	.product-list-collapse>.collapse{
		display: block;
	}
	.product-content{
		width: 70%;
		left: 0;
		margin-left: 20px;
	}
	.product-content>h3,
	.product-listR>strong{
		font-size: 32px;
	}
}
@media (min-width: 1200px) {
	.product-list-collapse{
		margin-bottom: 100px;
	}
}
@media (min-width: 1400px) {
	.product-list-page{
		width: 90%;
		left: 5%;
		padding: 4rem 0 2rem;
	}
	.product-list-collapse{
		width: 20%;
		margin-right: 20px;
	}
	.product-content{
		width: 80%;
		margin-left: 20px;
	}
}
@media (min-width: 1600px) {
	.product-list-page{
		width: 80%;
		left: 10%;
	}
	.product-list-collapse{
		width: 20%;
		margin-right: 20px;
		padding: 0 0 0 5px;
	}
	.product-content{
		width: 80%;
		margin-left: 20px;
		padding: 0 0 0 40px;
	}
}






/* product-item=================================== */
.product-item{
	width: 100%;
	max-width: 210px;
	display: block;
	position: relative;
	left: 0;right: 0;
	margin: 0 auto 10px;
}
.product-item .productImg{
	width: 100%;
	padding-bottom: 100%;
	display: block;
	position: relative;
	background-color: #ffffff;
	background-size: cover;
	background-position: center center;
	margin-bottom: 30px;
}
.product-item .productText{
	width: 100%;
	height: 100px;
	display: block;
}
.product-item .productName{
	width: 100%;
	display: block;
	position: relative;
	font-size: 20px;
	line-height: 27px;
	font-weight: 400;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	/* margin-bottom: 5px; */
	transition: .3s .03s;
}
.product-item .productID{
	width: 100%;
	display: block;
	font-size: 14px;
	color: #a3a3a3;
}
.product-item .productID.related{
	color: #ff6600;
	font-size: 13px;
	font-weight: 400;
}
.product-item:hover .productName{
	color: #ff6600;
}
.btn-details{
	width: 100%;
	display: block;
	font-weight: 700;
	font-size: 12px;
	color: #000000;
}
.btn-details>img{
	width: 15px;
	height: 15px;
	margin: 0 10px;
	transition: .3s .03s;
}
.btn-details:hover{
	color: #000000;
}
.btn-details:hover>img{
	transform: translateX(10px);
}
.btn-addcart{
	width: 40px;
	height: 40px;
	margin: 15px 0 5px;
	display: block;
	position: relative;
	background-image: url('../images/icon-cartBtn.png');
	background-size: cover;
	transition: .3s .03s;
}
.btn-addcart.active,
.btn-addcart:hover{
	background-image: url('../images/icon-cartBtnActive.png');
}

.product-item.new-product-icon:after{
	content: 'NEW';
	width: 60px;
	display: block;
	border-radius: 999px;
	background-color: #ff6600;
	color: #ffffff;
	font-size: 12px;
	line-height: 24px;
	font-weight: 700;
	/* padding: .5rem; */
	text-align: center;
	position: absolute;
	top: 10px;
	left: -15px;
	transform: scale(0.8);
}
@media (min-width: 768px) {
	.product-item.new-product-icon:after{
		top: 15px;
		left: -15px;
		transform: scale(1);
	}
}
@media (min-width: 1200px) {
	.product-item.new-product-icon:after{
		top: 10px;
		left: -10px;
		transform: scale(1);
	}
}






/* product details page========================================= */


/* info */
.product-info{
	width: 100%;
	display: block;
	position: relative;
	padding: 0;
	margin: 20px 0;
}
.product-img-slick{
	width: 100%;
	display: block;
	position: relative;
}
.product-img-slick.new-product-icon:after{
	content: 'NEW';
	width: 60px;
	display: block;
	border-radius: 999px;
	background-color: #ff6600;
	color: #ffffff;
	font-size: 12px;
	line-height: 24px;
	font-weight: 700;
	text-align: center;
	position: absolute;
	top: 15px;
	left: 1rem;
	transform: scale(0.9);
}
.product-img-slick .slider-for{
	width: 100%;
	display: block;
	position: relative;
	/* outline: 1px solid #f00; */
}
.product-img-slick .slider-for .img-item{
	width: 100%;
	padding-bottom: 100%;
	display: block;
	position: relative;
	background-size: cover;
	background-position: center center;
}
.product-img-slick .slider-nav{
	width: 80%;
	display: block;
	position: relative;
	left: 0;right: 0;
	top: 0;
	margin: 0 auto;
	padding: 0 40px;
	transform: translateY(-50%);
}
.product-img-slick .slider-nav .img-item{
	width: 100%;
	display: block;
	padding: 10px;
	position: relative;
}
.product-img-slick .slider-nav .slick-slide .img-item>div{
	width: 100%;
	padding-bottom: 100%;
	display: block;
	position: relative;
	background-size: cover;
	background-position: center center;
	border: 2px solid #ffffff;
	transition: .3s;
}
.product-img-slick .slider-nav .slick-slide.slick-current .img-item>div{
	border: 2px solid #ff6600;
}
.product-img-slick .slick-arrow{
	width: 40px;
	height: 40px;
	background-color: transparent;
	border: 0;
	font-size: 0;
	background-image: url('../images/icon-arrow6.png');
	background-size: cover;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto 0;
	transition: .3s .03s;
	transform: translateX(0px) rotateZ(0deg);
}
.product-img-slick .slick-arrow.slick-prev{
	left: 0;
	transform: rotateZ(-90deg);
}
.product-img-slick .slick-arrow.slick-prev:focus,
.product-img-slick .slick-arrow.slick-prev:hover{
	outline: 0;
	transform: translateX(-10px) rotateZ(-90deg);
}
.product-img-slick .slick-arrow.slick-next{
	right: 0;
	transform: rotateZ(90deg);
}
.product-img-slick .slick-arrow.slick-next:focus,
.product-img-slick .slick-arrow.slick-next:hover{
	outline: 0;
	transform: translateX(10px) rotateZ(90deg);
}
.product-title{
	width: 100%;
	display: block;
	position: relative;
	padding: 0 12%;
}
.product-title .productName{
	display: block;
	font-size: 30px;
	line-height: 32px;
	font-weight: bold;
	padding: .5rem 0;
}
.product-title .productID{
	color: #ff6600;
	font-weight: normal;
	font-size: 16px;
	padding: .5rem 0;
}
.product-title .productText{
	font-size: 16px;
	line-height: 24px;
	font-weight: 300;
}
.product-btn{
	width: 100%;
	display: block;
	position: relative;
	padding: .5rem 12%;
}
.product-btn>div{
	border-top: 1px solid #e0e0e0;
	padding: 1rem 0;
}
.product-btn a{
	width: 150px;
	padding: 10px;
	color: #ffffff;
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	transition: .3s .03s;
	margin: 0 10px 10px 0;
}
.product-btn a.addCart{
	background-color: #ff6600;
}
.product-btn a.addCart>img{
	width: 20px;
	height: 20px;
	margin-right: 5px;
}
.product-btn a.addCart:focus,
.product-btn a.addCart:hover{
	background-color: #4c397b;
	/* transform: scale(1.05); */
}
.product-btn a.viewCart{
	background-color: #4c397b;
}
.product-btn a.viewCart:focus,
.product-btn a.viewCart:hover{
	background-color: #ff6600;
	/* transform: scale(1.05); */
}
@media (min-width: 768px) {
	.product-info{
		display: flex;
		padding: 0 8.4%;
		flex-wrap: wrap;
	}
	.product-img-slick{
		width: 50%;
	}
	.product-img-slick.new-product-icon:after{
		top: 15px;
		left: -15px;
		transform: scale(1);
	}
	.product-title{
		width: 50%;
		padding: 0 0 0 8%;
	}
	.product-btn{
		padding: .5rem 0;
	}
	.product-img-slick .slider-nav{
		width: calc(100% + 10px);
		padding: 0;
		margin-left: -5px;
		padding-bottom: 50px;
		transform: translateY(0);
	}
	.product-img-slick .slider-nav .img-item{
		padding: 5px;
	}
	.product-img-slick .slick-arrow{
		top: auto;
		bottom: 0;
	}
	.product-img-slick .slick-arrow.slick-next{
		right: auto;
		left: 50px;
	}
}
@media (min-width: 1200px) {
	.product-info{
		display: block;
		padding: 0 15%;
		margin: 60px 0 40px;
	}
	.product-info:after{
		content: '';
		width: 100%;
		display: block;
		clear: both;
	}
	.product-img-slick{
		width: 50%;
		float: left;
	}
	.product-img-slick.new-product-icon:after{
		width: 80px;
		font-size: 14px;
		line-height: 32px;
		top: 15px;
		left: -15px;
		transform: scale(1);
	}
	.product-title{
		width: 50%;
		height: auto;
		padding: 0 0 0 80px;
		float: right;
		margin-bottom: 20px;
	}
	.product-btn{
		width: 50%;
		padding: .5rem 0 .5rem 80px;
		float: right;
	}
	.product-img-slick .slider-nav{
		width: 90%;
		left: 5%;
		padding: 0 40px;
		margin-left: 0px;
		padding-bottom: 0px;
		transform: translateY(-50%);
	}
	.product-img-slick .slider-nav .img-item{
		padding: 10px;
	}
	.product-img-slick .slick-arrow{
		top: 0;
		bottom: 0;
	}
	.product-img-slick .slick-arrow.slick-next{
		right: 0;
		left: auto;
	}
	.product-title .productName{
		font-size: 60px;
		line-height: 72px;
		padding: 0;
		margin-top: -12px;
	}
	.product-title .productID{
		font-size: 20px;
		margin-top: 15px;
		margin-bottom: 40px;
	}
}
@media (min-width: 1400px) {
	.product-img-slick{
		width: 40%;
	}
	.product-title,
	.product-btn{
		width: 60%;
	}
	.product-img-slick .slider-nav{
		/* top: -40px; */
	}
}
@media (min-width: 1600px) {
	.product-info{
		padding: 0 15%;
	}
}


/* details */
.product-details{
	width: 100%;
	display: block;
	position: relative;
	padding: 0;
	margin: 20px 0;
}
.product-details .nav-tabs{
	padding: 0 8%;
	border: 0;
	margin: 0;
}
.product-details .nav-tabs .nav-item{
	margin: 0;
}
.product-details .nav-tabs .nav-link{
	padding: .8rem 0;
	margin-right: 15px;
	border: 0;
	font-size: 16px;
	font-weight: bold;
	color: #000000;
	opacity: .6;
	display: inline-block;
	border-bottom: 2px solid #ffffff;
}
@media screen and (max-width:374px){
	.product-details .nav-tabs .nav-link{
		padding: .5rem 0;
		margin-right: 10px;
		font-size: 12px;
	}
}
.product-details .nav-tabs .nav-link.active{
	opacity: 1;
	border-bottom: 2px solid #ff6600;
}
.product-details .tab-content{
	width: 100%;
	display: block;
	padding: 2rem 12%;
	background-color: #4c397b;
	color: #ffffff;
}
@media (min-width: 768px) {
	.product-details .nav-tabs{
		padding: 0 8.4%;
	}
	.product-details .tab-content{
		padding: 2rem 8.4%;
	}
	.product-details .nav-tabs .nav-link{
		padding: 1rem 0 2rem;
		/* margin-right: 20px; */
		font-size: 20px;
	}
}
@media (min-width: 992px) {
	.product-details .nav-tabs .nav-link{
		/* margin-right: 120px; */
	}
}
@media (min-width: 1200px) {
	.product-details .nav-tabs{
		padding: 0 15%;
	}
	.product-details .tab-content{
		padding: 60px 15%;
	}
	.product-details .nav-tabs .nav-link{
		/* margin-right: 60px; */
		font-size: 30px;
	}
}
@media (min-width: 1400px) {
	.product-details .nav-tabs .nav-link{
		/* margin-right: 90px; */
	}
}




/* related product */
.product-related{
	width: 100%;
	display: block;
	position: relative;
	padding: 1rem 12%;
}
.product-related .title{
	width: 100%;
	display: block;
	position: relative;
	padding: 2rem 0 2rem;
	font-size: 20px;
	font-weight: 700;
}
.product-related .product-item .productText .productName{
	font-size: 16px;
	line-height: 22px;
}
@media (min-width: 768px) {
	.product-related{
		padding: 1rem 8.4%;
	}
}
@media (min-width: 1200px) {
	.product-related{
		padding: 1rem 15%;
	}
	.product-related .title{
		font-size: 30px;
	}
}











/* cart===================================================== */
.cart-form{
	width: 100%;
	display: block;
	position: relative;
	padding: 0;
	margin: 0;
}
.cart-list{
	width: 100%;
	display: block;
	position: relative;
	padding: 0;
	margin: 0 0 80px 0;
}
.cart-list .more-item-btn{
	width: 150px;
	padding: 10px;
	background-color: #ff6600;
	color: #ffffff;
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	display: block;
	position: relative;
	right: 10%;
	margin: 40px 0 40px auto;
	transition: .3s .03s;
}
.cart-list .more-item-btn:focus,
.cart-list .more-item-btn:hover{
	background-color: #4c397b;
	/* transform: scale(1.05); */
}
.cart-item{
	width: 100%;
	display: block;
	position: relative;
	padding: 1rem 10%;
	border-bottom: 1px solid #e0e0e0;
	margin-bottom: 10px;
}
.cart-item .cart-item-img{
	width: 200px;
	height: 200px;
	/* max-width: 140px; */
	/* padding-bottom: 100%; */
	display: block;
	position: relative;
	margin-bottom: 20px;
}
.cart-item .cart-item-img .img{
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	background-size: cover;
	background-position: center center;
}
.cart-item .cart-item-img>span{
	width: 30px;
	height: 30px;
	background-color: #ffffff;
	border-radius: 50%;
	line-height: 30px;
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	display: block;
	position: absolute;
	top: 15px;
	left: 15px;
}
.cart-item .cart-item-details{
	width: 100%;
	display: block;
	position: relative;
}
.cart-item .cart-item-details .remove-cart{
	width: 100%;
	display: block;
	position: relative;
	color: #000000;
	font-size: 14px;
	font-weight: 700;
	transition: .3s .03s;
	margin-bottom: 5px;
	margin-top: -8px;
}
.cart-item .cart-item-details .remove-cart img{
	margin-right: 5px;
	margin-top: -2px;
}
.cart-item .cart-item-details .remove-cart:focus,
.cart-item .cart-item-details .remove-cart:hover{
	color: #ff6600;
}
.cart-item .cart-item-details .cart-item-title{
	width: 100%;
	display: block;
	position: relative;
	font-size: 20px;
	line-height: 24px;
	/* font-weight: 700; */
	transition: .3s .03s;
}
.cart-item .cart-item-details .cart-item-title:focus,
.cart-item .cart-item-details .cart-item-title:hover{
	color: #ff6600;
}
.cart-item .cart-item-details .productID{
	width: 100%;
	display: block;
	position: relative;
	font-weight: 700;
	font-size: 14px;
	color: #ff6600;
}
.cart-item .cart-item-details .form-group .form-control{
	border: 0;
	border-radius: 0;
	background-color: #f1eff6;
	font-size: 14px;
	font-weight: 700;
	color: #000000;
	padding: 0 20px;
	position: relative;
}
.cart-item .cart-item-details .form-group .form-control::placeholder{
	color: #000000;
}
.cart-item .cart-item-details .form-group .form-control:focus::placeholder{
	color: #cccccc;
}
.cart-select{
	width: 100%;
	display: block;
	padding: 0;
	margin: 0;
	list-style: none;
	font-size: 14px;
	font-weight: 700;
	position: relative;
}
.cart-select:after{
	content: '';
	width: 20px;
	height: 20px;
	display: block;
	position: absolute;
	right: 15px;
	top: 12px;
	background-image: url('../images/icon-arrow7.png');
	background-repeat: no-repeat;
	background-position: center center;
}
.cart-select>li{
	width: 100%;
	padding: .5rem 20px;
	background-color: #f1eff6;
	outline: 1px solid #ffffff;
	z-index: 2;
	cursor: pointer; 
}
.cart-select>li:not(.init) {
	display: none;
	background: #f1eff6; 
}
.cart-select>li:not(.init):hover, 
.cart-select>li.selected:not(.init) { 
	background: #4c397b; 
	color: #ffffff;
}



.cart-form-group{
	width: 100%;
	padding: 1rem 10%;
	display: block;
	position: relative;
}
.cart-form-group .form-group{
	margin-bottom: 0.5rem;
}
.cart-form-group .form-control{
	border: 0;
	border-radius: 0;
	background-color: #f1eff6;
	color: #000000;
	padding: .5rem 20px;
	font-size: 12px;
	/* font-weight: 900; */
	position: relative;
}
.cart-form-group .form-control::placeholder{
	color: #000000;
}
.cart-form-group .form-control:focus::placeholder{
	color: #cccccc;
}
.cart-send{
	width: 150px;
	padding: 10px;
	background-color: #4c397b;
	color: #ffffff;
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	display: inline-block;
	position: relative;
	border: 0;
	margin: 20px 0;
	transition: .3s .03s;
}
.cart-send>img{
	width: 20px;
	height: 20px;
	margin-left: 8px;
}
.cart-send:focus,
.cart-send:hover{
	background-color: #ff6600;
	/* transform: scale(1.05); */
}
@media (min-width: 768px) {
	.cart-list{
		padding: 0 8%;
		margin: 0 0 50px 0;
	}
	.cart-list .more-item-btn{
		right: 0;
	}
	.cart-item{
		display: flex;
		padding: 1rem 0;
	}
	.cart-item .cart-item-img{
		width: 200px;
		height: 220px;
		margin-right: 20px;
	}
	.cart-item .cart-item-details{
		width: calc(100% - 200px);
		margin-left: 20px
	}
	.cart-form-group{
		padding: 1rem 8%;
	}
	.cart-form-group>.row>.col-12{
		padding-left: 5px;
		padding-right: 5px;
	}
}
@media (min-width: 1200px) {
	.cart-form{
		width: 100%;
		padding: 0 6%;
		display: flex;
		position: relative;
		margin-top: 50px;
	}
	.cart-list{
		width: 50%;
		padding: 0 0;
		margin: 0 40px 50px 0;
	}
	.cart-form-group{
		width: 50%;
		padding: 1rem 20px;
		display: block;
		position: relative;
		margin: 0 0 50px 40px;
	}
	.cart-item .cart-item-details .form-group .form-control,
	.cart-form-group .form-control{
		height: 48px;
	}
	.cart-form-group textarea.form-control{
		height: auto;
	}
}
@media (min-width: 1600px) {
	.cart-form{
		padding: 0 10%;
	}
	.cart-form-group{
		padding: 1rem 40px;
	}
}


























/* contact==================================================== */
.contact-page{
	width: 100%;
	display: block;
	position: relative;
	padding: 0;
	margin: 0;
}
.contact-img{
	width: 100%;
	display: block;
	position: relative;
	margin: 0;
	padding: 1rem 12.5%;
}
.contact-img>div{
	width: 100%;
	height: 180px;
	display: block;
	background-size: cover;
	background-position: center center;
}
.contact-info{
	width: 100%;
	display: block;
	position: relative;
	margin: 0;
	padding: 1rem 12.5%;
}
.contact-info .title{
	font-size: 20px;
	border-bottom: 1px solid #e0e0e0;
	padding: 0 0 1rem 0;
}
.contact-info .contact-text{
	width: 100%;
	display: block;
	padding: 1rem 0;
}
.contact-info .contact-text .info-item{
	width: 100%;
	display: block;
	padding: 0;
	margin-bottom: 20px;
}
.contact-info .contact-text .info-item>span{
	display: block;
	color: #ff6600;
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
}
.contact-info .contact-text .info-item>strong,
.contact-info .contact-text .info-item>strong>a{
	font-size: 18px;
	/* font-weight: 900; */
	color: #4c397b;
	transition: .3s .03s;
}
.contact-info .contact-text .info-item>strong.add>a{
	color: #000000;
	font-weight: 400;
}
.contact-info .contact-text .info-item>strong>a:focus,
.contact-info .contact-text .info-item>strong>a:hover{
	color: #ff6600;
}
.contact-form-block{
	width: 100%;
	display: block;
	position: relative;
	padding: 0;
	margin: 0;
}
.contact-form-block .form-title{
	width: 100%;
	display: block;
	background-color: #f1eff6;
}
.contact-form-block .form-title>strong{
	width: 87.5%;
	display: block;
	position: relative;
	left: 0;
	top: 0;
	padding: 1rem 1rem 1rem 12.5%;
	background-color: #4c397b;
	color: #ffffff;
	font-size: 18px;
	font-weight: 700;
}
.contact-form-block .contact-form{
	width: 100%;
	display: block;
	background-color: #f1eff6;
	padding: 3rem 12.5% 2rem;
}
.contact-form-block .contact-form .form-control{
	border: 0;
	border-radius: 0;
	background-color: #ffffff;
	color: #000000;
	padding: .5rem 20px;
	position: relative;
	font-size: 12px;
	height: 48px;
}
.contact-form-block .contact-form textarea.form-control{
	height: auto;
}
.contact-form-block .contact-form .form-control::placeholder{
	color: #000000;
}
.contact-form-block .contact-form .form-control:focus::placeholder{
	color: #cccccc;
}
.contact-send{
	width: 160px;
	padding: 10px;
	background-color: #ff6600;
	color: #ffffff;
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	display: inline-block;
	position: relative;
	border: 0;
	margin: 20px 0;
	transition: .3s .03s;
}
.contact-send>img{
	width: 20px;
	height: 20px;
	margin-left: 15px;
}
.contact-send:focus,
.contact-send:hover{
	/* transform: scale(1.05); */
	background-color: #4c397b;
}
@media (min-width: 768px) {
	.contact-img{
		padding: 1rem 8%;
	}
	.contact-img>div{
		height: 300px;
	}
	.contact-info{
		padding: 1rem 12.5%;
	}
	.contact-info .title{
		font-size: 45px;
		border-bottom: 1px solid #e0e0e0;
		padding: 0 0 3.5rem 0;
		margin-bottom: 3rem;
	}
	.contact-form .row>.col-12{
		padding-left: 10px;
		padding-right: 10px;
	}
	.contact-form-block .form-title>strong{
		width: 88%;
		padding: 2rem 1rem 2rem 12.5%;
		font-size: 24px;
	}
}
@media (min-width: 1200px) {
	.contact-img{
		padding: 2rem 5% 0;
	}
	.contact-img>div{
		height: 550px;
	}
	.contact-info{
		width: 50%;
		padding: 3rem 30px 1rem 8%;
		display: inline-block;
	}
	.contact-form-block .form-title{
		width: 50%;
		display: inline-block;
		position: absolute;
		top: -110px;
	}
	.contact-form-block:after{
		content: '';
		display: block;
		position: relative;
		clear: both;
	}
	.contact-form-block .form-title>strong{
		width: 90%;
		padding: 40px 1rem 40px 60px;
		font-size: 30px;
	}
	.contact-form-block .contact-form{
		width: 50%;
		display: inline-block;
		float: right;
		background-color: #f1eff6;
		padding: 3rem 10% 2rem 60px;
	}
}
@media (min-width: 1600px) {
	.contact-img{
		padding: 2rem 10% 0;
	}
	.contact-info{
		width: 50%;
		padding: 4rem 30px 1rem 15%;
		display: inline-block;
	}
	.contact-form-block .form-title>strong{
		width: 80%;
		font-size: 40px;
	}
	.contact-form-block .contact-form{
		width: 50%;
		display: inline-block;
		float: right;
		background-color: #f1eff6;
		padding: 4rem 15% 2rem 60px;
	}
}



















/* latest==================================================== */
/* news-list */
.news-page-title{
	width: 100%;
	display: block;
	position: relative;
	padding: 2rem 12.5%;
}
.news-page-title strong{
	font-size: 20px;
	font-weight: 700;
	display: block;
	margin-bottom: 20px;
}
.news-page-title .form-group{
	width: 60%;
	display: block;
}
.news-page-title .form-group>label{
	font-size: 14px;
	font-weight: 900;
	color: #787878;
	margin-bottom: 0;
}
.news-select-block.form-control{
	width: 100%;
	display: block;
	position: relative;
	padding: 0;
	border: 0;
}
.news-select{
	width: 100%;
	display: block;
	padding: 0;
	margin: 0;
	list-style: none;
	font-size: 16px;
	font-weight: 700;
	position: absolute;
	z-index: 5;
	border-top: 1px solid #e0e0e0;
	border-left: 1px solid #e0e0e0;
	border-right: 1px solid #e0e0e0;
}
.news-select:after{
	content: '';
	width: 20px;
	height: 20px;
	display: block;
	position: absolute;
	right: 15px;
	top: 12px;
	background-image: url('../images/icon-arrow8.png');
	background-repeat: no-repeat;
	background-position: center center;
	pointer-events: none;
}
.news-select>li{
	width: 100%;
	padding: .5rem 20px;
	/* background-color: #ffffff; */
	/* border-radius: .25rem; */
	z-index: 2;
	cursor: pointer;
	font-weight: 400; 
}
.news-select>li.init,
.news-select>li:last-child{
	border-bottom: 1px solid #e0e0e0;
}
.news-select>li:not(.init) {
	display: none;
	background: #ffffff; 
	/* border: 1px solid #e0e0e0; */
}
.news-select>li:not(.init):hover, 
.news-select>li.selected:not(.init) { 
	background: #4c397b; 
	color: #ffffff;
}
.news-list{
	width: 100%;
	display: block;
	position: relative;
	padding: 0;
	margin: 0 0 20px 0;
}
.news-item .news-category{
	padding: 0 1rem;
	display: inline-block;
	background-color: #ff6600;
	color: #ffffff;
	font-size: 14px;
	font-weight: 400;
	position: absolute;
	bottom: 30px;
	left: 12.5%;
}
.news-list-page{
	width: 100%;
	display: block;
	position: relative;
	padding: 0 10% 1rem;
}
@media (min-width: 768px) {
	.news-page-title{
		display: flex;
		padding: 2rem 8.4%;
		justify-content: space-between;
		align-items: flex-end;
	}
	.news-page-title strong{
		font-size: 30px;
	}
	.news-page-title .form-group{
		width: 200px;
	}
	.news-list-page{
		padding: 0 8.4% 1rem;
	}
	.news-list-page .page .pagination{
		justify-content: center;
		padding-top: 3rem;
	}
}
@media (min-width: 1200px) {
	.news-page-title{
		padding: 4rem 5% 2rem;
	}
	.news-page-title strong{
		font-size: 30px;
		padding-left: 50px;
	}
	.news-page-title .form-group{
		display: flex;
		width: 300px;
		align-items: center;
	}
	.news-page-title .form-group>label{
		margin-right: 20px;
		margin-top: 3px;
	}
	.news-list{
		padding: 0 5%;
	}
	.news-list-page{
		padding: 2rem 5% 2rem;
	}
}
@media (min-width: 1600px) {
	.news-page-title{
		padding: 4rem 10% 2rem;
	}
	.news-list{
		padding: 0 10%;
	}
	.news-list-page{
		padding: 2rem 10% 2rem;
	}
}




/* news-page */
.news-page{
	width: 100%;
	display: block;
	position: relative;
	padding-top: 2rem;
}
.news-page .news-content{
	width: 100%;
	display: block;
	position: relative;
	/* padding: 1rem 1.5rem; */
	padding: 1rem 10%;
}
.news-page .news-content .news-title{
	width: 100%;
	display: block;
	position: relative;
	padding: 1rem 0;
}
.news-page .news-content .news-title>.date{
	display: block;
	font-size: 16px;
	font-weight: 400;
	color: #a1a1a1;
	margin-bottom: 10px;
}
.news-page .news-content .news-title>strong{
	display: block;
	font-size: 20px;
	line-height: 28px;
	/* font-weight: 700; */
	color: #000000;
}
.news-page .news-content .news-text{
	width: 100%;
	display: block;
	position: relative;
	padding: 1rem 0;
	line-height: 1.5rem;
	font-weight: 300;
	font-size: 16px;
	line-height: 26px;
}
.news-related{
	width: 100%;
	display: block;
	position: relative;
	padding: 1rem 10%;
}
.news-related>.title{
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 20px;
}
.news-related>ul{
	width: 100%;
	display: block;
	position: relative;
	padding: 0;
	margin: 0 0 20px 0;
	list-style: none; 
}
.news-related>ul .related-news-item{
	width: 100%;
	display: block;
	position: relative;
	padding: 1rem 0;
}
.news-related>ul .related-news-item>.img{
	width: 100%;
	padding-bottom: 55%;
	background-size: cover;
	background-position: center center;
	margin-bottom: 15px;
}
.news-related>ul .related-news-item .date{
	font-size: 13px;
	line-height: 20px;
	/* font-weight: 700; */
	color: #a1a1a1;
	position: relative;
	top: -10px;
}
.news-related>ul .related-news-item .title{
	font-size: 16px;
	/* font-weight: 700; */
	line-height: 26px;
	transition: .3s .03s;
	position: relative;
	top: -10px;
}
.news-related>ul .related-news-item .title>img{
	display: inline-block;
	margin: 0 0 0 10px;
}
.news-related>ul .related-news-item:focus .title,
.news-related>ul .related-news-item:hover .title{
	color: #ff6600;
}
.related-more-btn{
	width: 100%;
	display: block;
	position: relative;
	padding: 1rem 0;
	margin-bottom: 20px;
	border-top: 1px solid #e0e0e0;
}
.related-more-btn>a{
	width: 150px;
	padding: 10px;
	color: #ffffff;
	background-color: #4c397b;
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	transition: .3s .03s;
	margin: 0 10px 10px 0;
}
.related-more-btn>a>img{
	width: 15px;
	height: 15px;
	margin: 0 10px;
}
.related-more-btn>a:focus,
.related-more-btn>a:hover{
	/* transform: scale(1.05); */
	background-color: #ff6600;
}
@media (min-width: 768px) {
	.news-page .news-content{
		padding: 1rem 8.4%;
	}
	.news-page .news-content .news-title>strong{
		font-size: 45px;
		line-height: 50px;
	}
	.news-related>.title{
		font-size: 36px;
	}
	.news-related>ul .related-news-item{
		display: flex;
	}
	.news-related>ul .related-news-item>.img{
		width: 150px;
		height: 100px;
		padding-bottom: 0;
		margin-bottom: 0;
	}
	.news-related>ul .related-news-item>div{
		width: 350px;
		display: block;
		padding: 0 20px 0 40px;
	}
}
@media (min-width: 1200px) {
	.news-page{
		padding: 2rem 5% 120px;
		display: flex;
	}
	.news-page .news-content{
		width: 60%;
		padding: 1rem 30px 1rem 15px;
	}
	.news-related{
		width: 40%;
		padding: 1rem 30px;
	}
	.news-related>.title{
		font-size: 30px;
		margin-top: 75px;
	}
	.news-related>ul .related-news-item .title>span{
		display: block;
		position: relative;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.news-related>ul .related-news-item .title>img{
		display: inline-block;
		margin: 0 0 0 0px;
	}
}
@media (min-width: 1600px) {
	.news-page{
		padding: 2rem 10% 120px;
		display: flex;
	}
	.news-page .news-content{
		width: 62.5%;
		padding: 1rem 50px 1rem 20px;
	}
	.news-related{
		width: 37.5%;
		padding: 1rem 50px;
	}
}















/* company================================================== */
.company-banner{
	width: 100%;
	height: 400px;
	display: block;
	position: relative;
}
.company-banner .img{
	width: 75%;
	height: 100%;
	display: block;
	position: absolute;
	right: 0;
	background-size: cover;
	background-position: left center;
}
.company-banner .company-banner-block{
	width: 80%;
	height: auto;
	min-height: 300px;
	position: absolute;
	left: 0;
	top: 50px;
	padding: 0 30px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: rgba(240, 239, 246, .8);
	color: #000000;
}
.company-banner .company-banner-block .title{
	width: 100%;
	display: block;
	position: relative;
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 20px;
}
.company-banner .company-banner-block .btn-group{
	width: 100%;
	display: block;
	position: relative;
}
.company-banner .company-banner-block .btn-group .company-btn{
	width: 115px;
	display: inline-block;
	text-align: center;
	background-color: #ffffff;
	font-size: 12px;
	padding: 10px 5px;
	/* line-height: 40px; */
	font-weight: 700;
	margin-right: 0px;
	transition: .3s .03s;
	transform: scale(.8);
	transform-origin: left top;
}
.company-banner .company-banner-block .btn-group .company-btn>span{
	width: 30px;
	height: 30px;
	background-image: url('../images/icon-arrow14.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	margin-left: 10px;
	transition: .3s .03s;
}
.company-banner .company-banner-block .btn-group .company-btn:focus,
.company-banner .company-banner-block .btn-group .company-btn:hover{
	background-color: #4c397b;
	color: #ffffff;
}
.company-banner .company-banner-block .btn-group .company-btn:focus>span,
.company-banner .company-banner-block .btn-group .company-btn:hover>span{
	color: #ffffff;
	background-image: url('../images/icon-arrow2.png');
}
@media screen and (min-width: 768px){
	.company-banner{
		height: 600px;
	}
	.company-banner .company-banner-block{
		width: 65%;
		min-height: 400px;
		padding: 50px 5% 50px 8%;
	}
	.company-banner .company-banner-block .title{
		font-size: 40px;
		line-height: 50px;
		margin-bottom: 30px;
	}
	.company-banner .company-banner-block .btn-group .company-btn{
		width: 150px;
		font-size: 12px;
		padding: 10px;
		transform: scale(1);
		margin-right: 5px;
	}
}
@media (min-width: 1200px) {
	.company-banner{
		height: 950px;
	}
	.company-banner .img{
		width: 60%;
		height: 100%;
		display: block;
		position: absolute;
		right: 0;
		background-size: cover;
		background-position: left center;
	}
	.company-banner .company-banner-block{
		width: 40%;
		min-height: 350px;
		padding: 30px 50px;
		top: 100px;
		left: 10%;
	}
	.company-banner .company-banner-block .btn-group .company-btn{
		margin-right: 10px;
	}
}
@media (min-width: 1400px) {
	.company-banner .company-banner-block{
		top: 200px;
	}
}

/* quality */
#companyQuality{
	width: 100%;
	height: 0;
	display: block;
	position: absolute;
	top: 0px;
}
.company-quality{
	width: 100%;
	display: block;
	position: relative;
	padding: 1rem 30px;
}
.company-quality .title{
	width: 100%;
	display: block;
	position: relative;
	margin: 30px 0;
}
.company-quality .title .text{
	width: auto;
	display: inline-block;
	position: relative;
}
.company-quality .title .text>span{
	font-size: 30px;
	font-weight: 700;
}
.company-quality .title .text>small{
	display: block;
	text-align: right;
	font-weight: 400;
	font-size: 12px;
	line-height: 14px;
	letter-spacing: .1rem;
}
.company-quality .title .deco{
	display: none;
}
.quality-content{
	width: 100%;
	display: block;
}
.f-20{
	font-size: 20px;
}
.quality-content-ul{
	width: 300px;
	padding:0;
	margin:0 0 20px 0;
	list-style: none;
}
@media screen and (max-width:350px){
	.quality-content-ul{
		/* max-width: 260px; */
		width: 100%;
	}
}
.quality-content-ul>li{
	width: 100%;
	display: block;
	border-bottom: 1px solid #e0e0e0;
	font-size: 20px;
	padding:.5rem 30px .5rem 0;
	background-image: url(../images/icon-check2.png);
	background-position: right center;
	background-repeat: no-repeat;
}
@media (min-width: 768px) {
	.f-md-45{
		font-size: 45px;
	}
	.company-quality{
		padding: 1rem 8%;
	}
	.company-quality .title{
		margin-bottom: 60px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 2rem 0;
	}
	.company-quality .title .text>span{
		font-size: 60px;
	}
	.company-quality .title .text>small{
		font-size: 18px;
		line-height: 24px;
		position: absolute;
		right: 0;
		bottom: -30px;
	}
	.company-quality .title .deco{
		width: 140px;
		height: 2px;
		background-color: #4c397b;
		display: block;
	}
}
@media (min-width: 992px) {
	.company-quality .title{
		margin: 60px 0 120px;
	}
	.company-quality .title .deco{
		width: 40%;
	}
}
@media (min-width: 1200px) {
	.company-quality{
		padding: 1rem 15%;
	}

}
@media (min-width: 1400px) {
	.company-quality .title .deco{
		width: 50%;
	}
}






/* history */

#companyHistory{
	width: 100%;
	height: 0;
	display: block;
	position: absolute;
	top: 0px;
}
.company-history{
	width: 100%;
	display: block;
	position: relative;
}
.company-history .title{
	width: 100%;
	display: block;
	position: relative;
	margin: 30px 0 0;
	padding: 4rem 30px 2rem;
	background-color: #f3f2f8;
}
.company-history .title .text{
	width: auto;
	display: inline-block;
	position: relative;
}
.company-history .title .text>span{
	font-size: 30px;
	font-weight: 700;
}
.company-history .title .text>small{
	display: block;
	text-align: right;
	font-weight: 400;
	font-size: 12px;
	line-height: 14px;
	letter-spacing: .1rem;
}
.company-history .title .deco{
	display: none;
}
@media (min-width: 768px) {
	.company-history .title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 7.5rem 8% 4rem;
	}
	.company-history .title .text>span{
		font-size: 60px;
	}
	.company-history .title .text>small{
		font-size: 18px;
		line-height: 24px;
		position: absolute;
		right: 0;
		bottom: -30px;
	}
	.company-history .title .deco{
		width: 140px;
		height: 2px;
		background-color: #4c397b;
		display: block;
	}
}
@media (min-width: 992px) {
	.company-history .title{
		margin: 60px 0 0;
	}
	.company-history .title .deco{
		width: 40%;
	}
}
@media (min-width: 1200px) {
	.company-history .title{
		padding: 8rem 15% 4rem;
	}

}
@media (min-width: 1400px) {
	.company-history .title .deco{
		width: 50%;
	}
}

.year-item{
	width: 100%;
	/* padding: 1rem 30px; */
	position: relative;
}
.year-item .date{
	font-size: 30px;
	font-weight: 700;
	display: block;
	color: #4c397b;
	margin-bottom: 20px;
	position: relative;
	top: -8px;
}
.year-item .date>span{
	display: inline-block;
	border-bottom: 1px solid #4c397b;
	padding: 0 0 1rem;
}



.year-1982{
	width: 100%;
	padding: 1rem 30px;
	background-color: #f3f2f8;
}
.year-1982 .img-block{
	width: 100%;
	position: relative;
	margin-bottom: 40px;
}
.year-1982 .img-block>.img{
	height: 200px;
	background-size: cover;
	background-position: center center;
}
.year-1982 .img-block>.started{
	width: 200px;
	padding: .8rem .5rem;
	text-align: center;
	background-color: #4c397b;
	color: #ffffff;
	/* font-weight: 900; */
	position: absolute;
	left: -8%;
	bottom: -25px;
}
@media (min-width: 768px) {
	.year-1982{
		width: 100%;
		padding: 1rem 0;
	}
	.year-1982:after{
		content: '';
		display: block;
		clear: both;
	}
	.year-1982 .text{
		width: 50%;
		float: right;
		padding: 0 8.4% 0 1rem;
	}
	.year-1982 .img-block{
		width: 50%;
		padding-right: 30px;
		float: left;
	}
	.year-1982 .img-block>.img{
		height: 640px;
	}
	.year-1982 .img-block>.started{
		width: 260px;
		padding: .8rem .5rem;
		font-size: 20px;
		left: 0;
		bottom: 0;
	}
}
@media (min-width: 1024px) {
	.year-1982 .img-block>.img{
		height: 490px;
	}
}
@media (min-width: 1200px) {
	.year-1982{
		width: 100%;
		padding: 2rem 15% 2rem;
	}
	.year-1982 .text{
		width: 40%;
		padding: 0;
		float: right;
		position: relative;
	}
	.year-1982 .text .date{
		position: absolute;
		left: -100px;
		top: -60px;
	}
	.year-1982 .img-block{
		width: 40%;
		padding: 0;
		float: left;
	}
	.year-1982 .img-block>.img{
		height: 350px;
		background-position: center bottom;
	}
}
@media (min-width: 1400px) {
	.year-1982 .img-block>.started{
		width: 400px;
		padding: 2.5rem .5rem;
		font-size: 35px;
		left: auto;
		right: -40px;
		bottom: -40px;
	}
}


.year-1983{
	width: 100%;
	padding: 1rem 30px;
	background-color: #f3f2f8;
}
.year-1983 .img-block{
	width: 100%;
	position: relative;
	margin-bottom: 40px;
}
.year-1983 .img-block>.img{
	height: 200px;
	background-size: cover;
	background-position: center center;
}
@media (min-width: 768px) {
	.year-1983{
		width: 100%;
		padding: 1rem 0;
	}
	.year-1983:after{
		content: '';
		display: block;
		clear: both;
	}
	.year-1983 .text{
		width: 50%;
		float: right;
		padding: 0 8.4% 0 1rem;
	}
	.year-1983 .img-block{
		width: 50%;
		padding-right: 30px;
		float: left;
	}
	.year-1983 .img-block>.img{
		height: 220px;
	}
}
@media (min-width: 1200px) {
	.year-1983{
		width: 100%;
		padding: 2rem 15% 2rem;
	}
	.year-1983 .text{
		width: 40%;
		padding: 0;
		float: right;
		position: relative;
	}
	.year-1983 .text .date{
		position: absolute;
		left: -100px;
		top: 5px;
	}
	.year-1983 .img-block{
		width: 40%;
		padding: 0;
		float: left;
	}
	.year-1983 .img-block>.img{
		height: 260px;
	}
}

.year-1995{
	width: 100%;
	height: 580px;
	display: block;
	position: relative;
}
.year-1995 .text{
	width: 100%;
	height: 450px;
	padding: 2rem 30px 100px;
	background-color: #4c397b;
	background-image: url('../images/history-1995bg.jpg');
	background-size: cover;
	background-position: center center;
	color: #ffffff;
}
.year-1995 .date{
	margin-bottom: 0;
	color: #ffffff;
}
.year-1995 .date>span{
	display: inline-block;
	border-bottom: 1px solid #ffffff;
	padding: .5rem 0;
	color: #ffffff;
}
.year-1995 .img-block{
	width: calc(100% - 60px);
	position: relative;
	margin-bottom: 40px;
	position: absolute;
	left: 30px;
	bottom: 0;
}
.year-1995 .img-block>.img{
	height: 180px;
	background-size: cover;
	background-position: center center;
}
@media (min-width: 768px) {
	.year-1995{
		height: 450px;
	}
	.year-1995 .text{
		width: 100%;
		height: 350px;
		padding: 2rem 45% 2rem 8.4%;
	}
	.year-1995 .img-block{
		width: 40%;
		margin-bottom: 40px;
		position: absolute;
		left: auto;
		right: 0;
		bottom: 0;
	}
	.year-1995 .img-block>.img{
		height: 350px;
		background-position: left -85px center;
	}
}
@media (min-width: 1200px) {
	.year-1995{
		height: 480px;
		background-image: linear-gradient(#f3f2f8 0,#f3f2f8 420px ,#ffffff 420px, #ffffff 450px);
	}
	.year-1995 .text{
		width: 50%;
		height: 400px;
		padding: 5rem 8% 1rem 22%;
		position: relative;
	}
	.year-1995 .img-block{
		width: 40%;
		margin-bottom: 40px;
		position: absolute;
		left: auto;
		right: 15%;
		bottom: 0;
	}
	.year-1995 .img-block>.img{
		height: 350px;
		background-position: center center;
	}
	.year-1995 .text .date{
		position: absolute;
		left: 30%;
		top: 4.8rem;
	}
}



.year-1998{
	width: 100%;
	padding-bottom: 20px;
	background-image: linear-gradient(#ffffff 390px ,#f3f2f8 390px);
}
.year-1998 .text{
	width: 100%;
	padding: 1rem 30px;
}
.year-1998 .img-block{
	width: calc(100% - 60px);
	position: relative;
	left: 30px;
	margin-bottom: 20px;
}
.year-1998 .img-block>.img{
	height: 200px;
	background-size: cover;
	background-position: center center;
}
@media (min-width: 768px) {
	.year-1998{
		background-image: linear-gradient(#ffffff 300px ,#f3f2f8 300px);
	}
	.year-1998 .text{
		width: 100%;
		padding: 1rem 16% 1rem 22%;
	}
	.year-1998 .text .date{
		position: absolute;
		left: 8.4%;
		top: 15px;
	}
	.year-1998 .img-block{
		width: 62.5%;
		position: relative;
		left: 0;
		margin-bottom: 20px;
	}
	.year-1998 .img-block>.img{
		height: 280px;
	}
}
@media (min-width: 1200px) {
	.year-1998{
		width: 100%;
		background-image: linear-gradient(#ffffff ,#ffffff);
	}
	.year-1998 .text{
		width: 70%;
		padding: 0;
		padding: 2rem 2% 2rem 22%;
	}
	.year-1998 .text .date{
		position: absolute;
		left: 15%;
		top: 35px;
	}
	.year-1998 .img-block{
		width: 30%;
		position: relative;
		left: 15%;
		margin-bottom: 20px;
		z-index: 2;
	}
	.year-1998 .img-block>.img{
		height: 280px;
	}
}


.year-2000{
	width: 100%;
	padding: 1rem 30px 0;
	background-color: #f3f2f8;
}
.year-2000 .text{
	width: 100%;
	display: block;
	padding-bottom: 30px;
	background-image: url('../images/icon-earth.png');
	background-size: 120px 120px;
	background-repeat: no-repeat;
	background-position: right bottom -50px;
}
.year-2000 .img-block{
	width: 100%;
	position: relative;
	margin-bottom: 40px;
}
.year-2000 .img-block>.img{
	height: 200px;
	background-size: cover;
	background-position: center center;
}
@media (min-width: 768px) {
	.year-2000{
		padding: 0 16% 0 22%;
	}
	.year-2000 .text{
		width: 100%;
		padding-bottom: 50px;
		background-size: 180px 180px;
		background-position: right bottom -80px;
	}
	.year-2000 .text .date{
		position: absolute;
		left: 8.4%;
		top: 0px;
	}
}
@media (min-width: 1200px) {
	.year-2000{
		width: 100%;
		height: 250px;
		padding: 0;
		position: relative;
		/* top: -200px; */
		background-color: #ffffff;
		margin-top: -200px;
	}
	.year-2000 .text{
		width: 65%;
		height: 250px;
		padding: 50px 16% 0 22%;
		padding-bottom: 50px;
		background-size: 180px 180px;
		background-position: right bottom -80px;
		position: absolute;
		right: 0;
		background-color: #f3f2f8;
	}
	.year-2000 .text .date{
		position: absolute;
		left: 22%;
		top: 52px;
	}
}


.year-2003{
	width: 100%;
	padding-bottom: 20px;
}
.year-2003 .text{
	width: 100%;
	padding: 1rem 30px;
}
.year-2003 .img-block{
	width: 100%;
	padding: 1rem 30px;
	background-image: linear-gradient(#ffffff 40% ,#f3f2f8 40%, #f3f2f8 60% ,#ffffff 60%);
}
@media (min-width: 768px) {
	.year-2003 .text{
		width: 100%;
		padding: 1rem 8.4%;
	}
	.year-2003 .img-block{
		width: 100%;
		padding: 1rem 0 30px;
		background-image: linear-gradient(#ffffff 40% ,#f3f2f8 40%);
		overflow-x: hidden;
	}
}
@media (min-width: 992px) {
	.year-2003 .row>.col-lg-6{
		max-width: 45%;
	}
}
@media (min-width: 1200px) {
	.year-2003 .text{
		width: 100%;
		padding: 3rem 15% 2rem;
	}
	.year-2003 .img-block{
		width: 100%;
		padding: 1rem 15% 50px;
	}
}



.year-2014-2016{
	width: 100%;
	padding: 1rem 30px;
}
.year-2014-2016 .img-block{
	width: 100%;
	position: relative;
	margin: 20px 0 40px 0;
}
.year-2014-2016 .img-block>.img{
	height: 200px;
	background-size: cover;
	background-position: center center;
}
@media (min-width: 768px) {
	.year-2014-2016{
		width: 100%;
		padding: 1rem 8.4%;
	}
	.year-2014-2016 .img-block{
		margin: 0 0 40px 0;
	}
	.year-2014-2016 .img-block>.img{
		height: 350px;
	}
	.year-2014-2016 .text{
		width: 100%;
		display: block;
		position: relative;
		padding: 0 0 0 100px;
	}
	.year-2014-2016 .text .date{
		position: absolute;
		left: 0;
		top: 5px;
	}
}
@media (min-width: 1200px) {
	.year-2014-2016{
		width: 100%;
		padding: 3rem 15%;
	}
	.year-2014-2016 .img-block>.img{
		height: 350px;
	}
	.year-2014-2016 .row>.col-lg-6{
		max-width: 45%;
	}
}





.year-2017{
	width: 100%;
	display: block;
	position: relative;
	padding: 2rem 30px;
	background-color: #4c397b;
}
.year-2017 .text{
	width: 100%;
	color: #ffffff;
}
.year-2017 .date{
	margin-bottom: 0;
	color: #ffffff;
}
.year-2017 .date>span{
	display: inline-block;
	border-bottom: 1px solid #ffffff;
	padding: .5rem 0;
	color: #ffffff;
}
.year-2017 img{
	transform: rotateZ(180deg);
}
.year-2017 .text2{
	display: none;
}
@media screen and (min-width:768px){
	.year-2017{
		padding: 5rem 8.4%;
		margin-bottom: -1px;
	}
	.year-2017 .text{
		padding: 0 0 0 100px;
		position: relative;
	}
	.year-2017 .text .date{
		position: absolute;
		left: 0;
		top: 0;
	}
}
@media screen and (min-width:1200px){
	.year-2017{
		padding: 3rem 0 150px;
		margin-bottom: 0;
		background-color: #ffffff;
		display: flex;
		align-items: center;
	}
	.year-2017 .text2{
		width: 46%;
		display: block;
		padding: 2rem  30px 2rem 15%;
	}
	.year-2017 .text2>p{
		color: #4c397b;
		font-size: 30px;
		line-height: 40px;
		margin-bottom: 40px;
	}
	.year-2017 .text{
		width: 54%;
		background-color: #4c397b;
		padding: 3rem 15% 3rem 210px;
		right: 0;
		left: auto;	
	}
	.year-2017 .text .date{
		position: absolute;
		left: calc(30% - 85px);
		top: 2.8rem;
	}
}
@media screen and (min-width:1200px){
	.year-2017 .text{
		padding: 3rem 15% 3rem calc(10% + 35px);
	}
	.year-2017 .text .date{
		left: 10%;
		top: 2.8rem;
	}
}
@media screen and (min-width:1400px){
	.year-2017 .text{
		padding: 3rem 15% 3rem 12%;
	}
	.year-2017 .text2{
		padding: 3.5rem  30px 2rem 15%;
	}
	.year-2017 .text .date{
		left: 9%;
	}
}
@media screen and (min-width:1600px){
	.year-2017 .text{
		padding: 3rem 15% 3rem calc(10% + 15px);
	}
	.year-2017 .text2{
		padding: 6rem  30px 2rem 15%;
	}
}
@media screen and (min-width:1800px){
	.year-2017 .text{
		padding: 3rem 15% 3rem 10%;
	}
}


















/* search=========================================================== */
.search-page{
	width: 100%;
	display: block;
	position: relative;
	padding: 1rem;
}

.search-keyword{
	width: 100%;
	display: block;
	position: relative;
	border-bottom: 1px solid #e0e0e0;
	text-align: center;
	padding: 50px 0;
	font-size: 24px;
	font-weight: 700;	
	text-transform:uppercase;
}
.search-keyword .keyword{
	display: inline-block;
	color: #4c397b;
	border-bottom: 2px solid #4c397b;
}
.search-page .page{
}
@media (min-width: 768px) {
	.search-page{
		padding: 1rem 8.4%;
	}
	.search-keyword{
		font-size: 36px;
	}
	.search-keyword .keyword{
		padding: .5rem 0;
	}
}
@media (min-width: 1200px) {
	.search-keyword{
		padding: 80px 0;
	}
}
@media (min-width: 1400px) {
	.search-page{
		padding: 1rem 5% 50px;
	}
}
@media (min-width: 1600px) {
	.search-page{
		padding: 1rem 10% 50px;
	}
}

.search-latest{
	width: 100%;
	display: block;
	position: relative;
}
.search-latest .text,
.search-product .text{
	width: 100%;
	display: block;
	position: relative;
	text-align: center;
	/* font-weight: 700; */
	padding: 1.5rem 0;
}
.search-latest .text>strong,
.search-product .text>strong{
	color: #4c397b;
	/* font-weight: 900; */
	font-size: 20px;
	border-bottom: 1px solid #4c397b;
}
.search-latest .text>small,
.search-product .text>small{
	display: block;
	color: #aaaaaa;
	margin-top: 1rem;
	font-size: 70%;
}
@media (min-width: 768px) {
	.search-latest .text,
	.search-product .text{
		font-size: 18px;
		padding: 2rem 0;
	}
	.search-latest .text>strong,
	.search-procust .text>strong{
		font-size: 24px;
	}
}
@media (min-width: 1200px) {
	.search-latest .text,
	.search-product .text{
		font-size: 24px;
		padding: 3rem 0;
	}
	.search-latest .text>strong,
	.search-product .text>strong{
		font-size: 32px;
	}
}



.search-list{
	width: 100%;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	/* justify-content: space-between; */
	/* justify-content: space-around; */
}

.search-list .search-item{
	width: 45%;
	margin-bottom: 30px;
}
.search-list .search-item:nth-child(odd){
	margin-right: 10%;
}
.search-list .search-item:nth-child(even){
	margin-right: 0;
}
.search-list .search-item>a{
	width: 100%;
	display: block;
}
.search-list .search-item .img{
	width: 100%;
	padding-bottom: 120%;
	background-size: cover;
	background-position: center center;
	margin-bottom: 20px;
}
.search-list .search-item .title{
	width: 100%;
	height: 40px;
	font-size: 16px;
	/* font-weight: 500; */
	line-height: 20px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	transition: .3s .03s;
}
.search-list .search-item:hover .title{
	color: #ff6600;
}
.search-list .search-item .data{
	font-size: 12px;
	color: #888888;
	/* font-weight: 700; */
	margin: 5px 0 10px;
}
.search-list .search-item .info{
	width: 100%;
	height: 80px;
	font-size: 16px;
	line-height: 20px;
	font-weight: 300;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	color: #000000;
}
@media (min-width: 768px) {
	.search-list .search-item{
		margin-bottom: 40px;
	}
	.search-list .search-item .img{
		width: 100%;
		padding-bottom: 80%;
	}
	.search-list .search-item .title{
		height: 48px;
		font-size: 22px;
		line-height: 24px;
	}
}
@media (min-width: 1200px) {
	.search-list .search-item{
		width: 18%;
		margin-bottom: 60px;
		/* margin-right: 7%; */
	}
	.search-list .search-item:nth-child(odd){
		margin-right: 9.3%;
	}
	.search-list .search-item:nth-child(even){
		margin-right: 9.3%;
	}
	.search-list .search-item:nth-child(4n){
	/* .search-list .search-item:nth-child(4n+1){ */
		margin-right: 0;
	}
	.search-list .search-item .img{
		width: 100%;
		padding-bottom: 90%;
	}
	.search-list .search-item .title{
		height: 48px;
		font-size: 22px;
		line-height: 24px;
	}
}
























@media screen and (max-width:990px){


}
@media screen and (max-width:768px){


}
@media screen and (max-width:380px){



}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}