/******************** Desktop ********************/
/********** banner **********/
.mainBannerContainer {
	position: relative;
/*	width: 960px;*/
	max-width:1280px;
	height: 480px;
	margin: 0 auto;
}
.mainBanner {
	position: absolute;
	top: 0;
	width: 100%;
	height: 480px;
	overflow: hidden;
}
.mainBanner .toggleBtn {
	position:absolute;
	bottom:63px; left:50%;
	margin-left:-15px;
	z-index:1;
	background:#000;
	border-radius:4px;
	color:#fff;
}
.mainBanner .toggleBtn span {
	display:block;
}
.mainBanner .toggleBtn span.hide {
	display:none !important;
}
.mainBanner .toggleBtn span svg {
	display:block;
	width:30px; height:30px;
	fill:#fff;
}
@media (max-width:768px) {
	.mainBanner .toggleBtn {
		bottom:5px;
	}
}
.sliderContainer {
	position: relative;
	width: 100%;
	z-index: 1;
}
.sliderContainer .slider {
	position: absolute;
	width: 100%;
}

.mansaySliderContainer .sliderContainer .slider {
	position: absolute;
	width: 100%;
	height: 610px;
	background-image: url('../images/img_mansay_loop01.jpg');
	background-size: cover;
	background-repeat: no-repeat; 
}

.sliderContainer .slides {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.sliderContainer .slides img {
	display: block;
	position: absolute;
	left: 50%;
}
.sliderBtnPrev, .sliderBtnNext {
	position: absolute;
	display: block;
	width: 28px;
	height: 40px;
	top: 225px;
	margin-top: -20px;
	z-index: 6;
	background: #000;
	border-radius: 4px;
	color:#fff;
}
.sliderInner {
	position: absolute;
	width: 960px;
	left: 50%;
	margin-left: -480px;
}
.sliderBtnPrev {
	left: 20px;
}
.sliderBtnNext {
	right: 20px;
}


.mainBanner .slides img {
	margin-left: -640px;
}
.sliderContainer .banText {
	position: absolute;
	width: 100%;
	text-align: center;
	color: #fff;
	z-index: 1;
}
.mainBanner .banText {
	bottom: 20%;
}
.mainBanner .banText span {
	display: inline-block;
	line-height: 1em;
	padding: 10px 20px;
	/* background: url(../images/img_mainban_textdimbg.png) repeat; */
	background-color: #920883;
}
.mainBanner .banText .title {
	font-size: 300%;
}
.mainBanner .banText .txt {
	font-size: 270%;
}
.mainBanner .banText a {
	display: inline-block;
	padding: 11px 70px 9px;
	font-size: 160%;
	color: #fff;
	border: 1px solid #fff;
	margin-top: 18px;
}
.mainBanner .banText a:hover {
	background-color: #fff;
	color: #920883;
}


/********** front page **********/
.activities {
	    position: relative;
    top: 0;
    font-size: 150%;
    margin-top: 40px;
    padding-bottom: 40px;
}
.activities > a {
	display: block;
	float: left;
	color: #333;
	background-color: #efefef;
}

.activities span.txt {
	padding: 30px 20px 0;
	text-align: left;
}
.activities .left span.txt {
	width: 344px;
}
.activities .right span.txt {
	width: 152px;
}
.activities span.txt span.message {
	line-height: 1.4em;
}
.activities span.txt span.title {
	display: block;
	font-weight: bold;
	margin-bottom: 5px;
}
.activities .img {
	position: relative;
	width: 192px;
}
.activities .img:after {
	position: absolute;
	width: 0;
	height: 0;
	/*content: '';*/
	top: 50%;
	margin-top: -16px;
	border-top: 14px solid transparent;
	border-bottom: 14px solid transparent;
}
.activities .img img {
	width: 100%;
	display: block;
}

.activities .one {
	width: 100%;
}
.activities .one span.txt {
	float: left;
	width: 670px;
}
.activities .one .img {
	float: left;
}
.activities .one .img:after {
	left: 0;
	border-left: 16px solid #efefef;
}
.activities .two {
	width: 384px;
	text-align: right;
}
.activities .two span.txt {
	float: left;
	width: 152px;
}
.activities .two .img {
	float: right;
}
.activities .two .img:after {
	left: 0;
	border-left: 16px solid #efefef;
}

.activities .three {
	width: 576px;
	text-align: left;
}
.activities .three span.txt {
	float: right;
	width: 344px;
}
.activities .three .img {
	float: left;
}
.activities .three .img:after {
	right: 0;
	border-right: 16px solid #efefef;
}

.activities .four {
	width: 384px;
}
.activities > a:hover {
	display: block;
	float: left;
	color: #fff;
	background-color: #920883;
}
.activities .one:hover .img:after,
.activities .two:hover .img:after {
	border-left: 16px solid #920883;
}
.activities .three:hover .img:after{
	border-right: 16px solid #920883;
}
.activities > a.noLink:hover {
	cursor: default;
}

.responsive780 .activities .one {
	-webkit-transform : translate(-50px, 0);
	-moz-transform : translate(-50px, 0);
	-ms-transform : translate(-50px, 0);
	-o-transform : translate(-50px, 0);
	transform : translate(-50px, 0);
}
.responsive780 .activities .two {
	-webkit-transform : translate(50px, 0);
	-moz-transform : translate(50px, 0);
	-ms-transform : translate(50px, 0);
	-o-transform : translate(50px, 0);
	transform : translate(50px, 0);
	
	-webkit-transition-delay: 0.2s;
	-moz-transition-delay: 0.2s;
	-ms-transition-delay: 0.2s;
	-o-transition-delay: 0.2s;
	transition-delay: 0.2s;
}
.responsive780 .activities .three {
	-webkit-transform : translate(-50px, 0);
	-moz-transform : translate(-50px, 0);
	-ms-transform : translate(-50px, 0);
	-o-transform : translate(-50px, 0);
	transform : translate(-50px, 0);
	
	-webkit-transition-delay: 0.4s;
	-moz-transition-delay: 0.4s;
	-ms-transition-delay: 0.4s;
	-o-transition-delay: 0.4s;
	transition-delay: 0.4s;
}
.responsive780 .activities .four {
	-webkit-transform : translate(50px, 0);
	-moz-transform : translate(50px, 0);
	-ms-transform : translate(50px, 0);
	-o-transform : translate(50px, 0);
	transform : translate(50px, 0);
	
	-webkit-transition-delay: 0.6s;
	-moz-transition-delay: 0.6s;
	-ms-transition-delay: 0.6s;
	-o-transition-delay: 0.6s;
	transition-delay: 0.6s;
}
.responsive780 .activities a {
	opacity:0;
	-webkit-transition: -webkit-transform 1s, opacity 1s;
	-moz-transition: -moz-transform 1s, opacity 1s;
	-ms-transition: -ms-transform 1s, opacity 1s;
	-o-transition: -o-transform 1s, opacity 1s;
	transition: transform 1s, opacity 1s;
}
.responsive780 .activities a.active {
	opacity:1;
	-webkit-transform : translate(0, 0);
	-moz-transform : translate(0, 0);
	-ms-transform : translate(0, 0);
	-o-transform : translate(0, 0);
	transform : translate(0, 0);
}

.frontTitle {
	position: relative;
	font-size: 300%;
	width: 700px;
	margin: 0 auto 7px;
	padding-bottom: 20px;
	border-bottom: 1px solid #999;
}
.frontTitle > span {
	position: absolute;
	width: 100%;
	display: block;
	bottom: -11px;
}
.frontTitle > span > span {
	display: inline-block;
	line-height: 1.4em;
	font-size: 52%;
	padding: 0 10px;
	background-color: #f6f6f6;
}
.service {
	padding: 20px 0 60px;
}
.service .listWrapper {
	position: relative;
	width: 100%;
}

.responsive780 .service .listWrapper a.listArrowL,
.responsive780 .service .listWrapper a.listArrowR {
	display: none;
}
.responsive0 .service .listWrapper a.listArrowL,
.responsive0 .service .listWrapper a.listArrowR {
	display: none;
	position: absolute;
	height: 30px;
	top: 55%;
	margin-top: -15px;
}

.service .listContainer {
	position: relative;
	width: 850px;
/*	height: 155px;*/
	margin: 0 auto;
	overflow: hidden;
}
.responsive780 .service .listContainer {
/*	height: 205px;*/
}
.serviceList {
/*
	position: absolute;
	top: 0;
	left: 0;
	width: 1000%;
	overflow: hidden;
*/
/*	text-align: left;*/
}
/*
.responsive0 .serviceList {
	position: absolute;
	top: 0;
	left: 0;
	width: 1000%;
	text-align: left;
	overflow: hidden;
}
*/

.responsive780 .serviceList {
	padding-top: 30px;
}
.serviceList a {
	display: inline-block;
	width: 130px;
	text-align: center;
	vertical-align: text-top;
	color: #2d2d2d;
	margin: 15px 20px;
}
.serviceList a span {
	display: block;
	width: 100%;
	font-size: 150%;
	margin-top: 8px;
}

.responsive780 .service .frontTitle {
	opacity: 0;
}
.responsive780 .serviceList a {
	opacity: 0;
	-webkit-transform : translate(0, -50px);
	-moz-transform : translate(0, -50px);
	-ms-transform : translate(0, -50px);
	-o-transform : translate(0, -50px);
	transform : translate(0, -50px);
	
	-webkit-transition-delay: 0.2s;
	-moz-transition-delay: 0.2s;
	-ms-transition-delay: 0.2s;
	-o-transition-delay: 0.2s;
	transition-delay: 0.2s;
	
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
.responsive780 .serviceList a.active {
	opacity: 1;
	-webkit-transform : translate(0, 0);
	-moz-transform : translate(0, 0);
	-ms-transform : translate(0, 0);
	-o-transform : translate(0, 0);
	transform : translate(0, 0);
}

/********** banner **********/
.mansaySliderContainer {
	position: relative;
/*	width: 960px;*/
	height: 612px;
	margin: 0 auto;
}
.mansaySlider {
	position: absolute;
	top: 0;
	/* left: 50%; */
	width: 100%;
	height: 612px;
	/* margin-left: -640px; */
	overflow: hidden;
}
.mansaySlider .slides img {
	margin-left: -890px;
}

.mansaySlider .banText {
	top: 9%;
}
.mansaySlider .banText span {
	display: inline-block;
	line-height: 1.3em;
	padding: 20px 0;
}
.mansaySlider .banText span.thumb {
	display: block;
	width: 170px;
	background: none;
	margin: 0 auto;
	padding: 0;
}
.mansaySlider .banText span.thumb img {
	position: relative;
	left: inherit;
	top: inherit;
	margin-left: auto;
}
.mansaySlider .banText .banText__inner {
	display: inline-block;
	background-color: #920883;
	padding: 20px;
}
.mansaySlider .banText .title {
	position: relative;
	font-size: 220%;
	max-width: 700px;
}
.mansaySlider .banText .title:after {
	position: absolute;
	width: 140px;
	height: 1px;
	content: '';
	bottom: 0;
	left: 50%;
	margin-left: -70px;
	background-color: #fff;
	opacity: 0.4;
}
.mansaySlider .banText .txt {
	font-size: 150%;
}
.mansaySlider .banText a {
	display: inline-block;
	padding: 11px 70px 9px;
	font-size: 160%;
	color: #fff;
	border: 1px solid #fff;
	margin-top: 30px;
}
.mansaySlider .sliderBtnPrev,
.mansaySlider .sliderBtnNext {
	display: none;
}


.actionArea {
	position: relative;
	top: -97px;
	margin-bottom: -35px;
}
.actionItem {
	display: inline-block;
	width: 230px;
	vertical-align: top;
	margin: 0 5px;
}
.actionItem img {
	display: block;
}
.actionItem .text {
	display: block;
	font-size: 210%;
	color: #fff;
	line-height: 1em;
	padding: 14px 0;
}
.actionItem.act01 .text {
	background-color: #b65e00;
}
.actionItem.act02 .text {
	background-color: #007a90;
}
.actionItem.act03 .text {
	background-color: #287800;
}
.actionItem.act04 .text {
	background-color: #920883;
}
.actionItem.act02,
.actionItem.act04 {
	margin-top: 20px;
}

.responsive780 .actionArea .act01 {
	-webkit-transform : translate(0, -50px);
	-moz-transform : translate(0, -50px);
	-ms-transform : translate(0, -50px);
	-o-transform : translate(0, -50px);
	transform : translate(0, -50px);
}
.responsive780 .actionArea .act02 {
	-webkit-transform : translate(0, 50px);
	-moz-transform : translate(0, 50px);
	-ms-transform : translate(0, 50px);
	-o-transform : translate(0, 50px);
	transform : translate(0, 50px);
	
	-webkit-transition-delay: 0.2s;
	-moz-transition-delay: 0.2s;
	-ms-transition-delay: 0.2s;
	-o-transition-delay: 0.2s;
	transition-delay: 0.2s;
}
.responsive780 .actionArea .act03 {
	-webkit-transform : translate(0, -50px);
	-moz-transform : translate(0, -50px);
	-ms-transform : translate(0, -50px);
	-o-transform : translate(0, -50px);
	transform : translate(0, -50px);
	
	-webkit-transition-delay: 0.4s;
	-moz-transition-delay: 0.4s;
	-ms-transition-delay: 0.4s;
	-o-transition-delay: 0.4s;
	transition-delay: 0.4s;
}
.responsive780 .actionArea .act04 {
	-webkit-transform : translate(0, 50px);
	-moz-transform : translate(0, 50px);
	-ms-transform : translate(0, 50px);
	-o-transform : translate(0, 50px);
	transform : translate(0, 50px);
	
	-webkit-transition-delay: 0.6s;
	-moz-transition-delay: 0.6s;
	-ms-transition-delay: 0.6s;
	-o-transition-delay: 0.6s;
	transition-delay: 0.6s;
}
.responsive780 .actionArea a {
	opacity:0;
	-webkit-transition: -webkit-transform 1s, opacity 1s;
	-moz-transition: -moz-transform 1s, opacity 1s;
	-ms-transition: -ms-transform 1s, opacity 1s;
	-o-transition: -o-transform 1s, opacity 1s;
	transition: transform 1s, opacity 1s;
}
.responsive780 .actionArea a.active {
	opacity:1;
	-webkit-transform : translate(0, 0);
	-moz-transform : translate(0, 0);
	-ms-transform : translate(0, 0);
	-o-transform : translate(0, 0);
	transform : translate(0, 0);
}


/******************** mobile setting ********************/

.responsive0 .sliderInner {
	width: 100%;
	left: inherit;
	margin-left: inherit;
}
.responsive0 .mainBanner .sliderBtnPrev,
.responsive0 .mainBanner .sliderBtnNext {
	top: 165px;
}
.responsive0 .mainBannerContainer,
.responsive0 .mainBanner,
.responsive0 .mainBanner .slides > img {
	height: 300px;
}
.responsive0 .mainBanner .slides > img {
	margin-left: -400px;
}

.responsive0 .mansaySlider .sliderBtnPrev,
.responsive0 .mansaySlider .sliderBtnNext {
	display: none;
	top: 90px;
}
.responsive0 .mansaySliderContainer,
.responsive0 .mansaySlider,
.responsive0 .mansaySlider .slides > img {
	height: 450px;
}
.responsive0 .mansaySlider .slides > img {
	margin-left: -412px;
}

.responsive0 .mainBanner .banText {
	width: 80%;
	padding: 0 10%;
	bottom: 10%;
}
.responsive0 .mainBanner .banText span {
	padding: 10px 15px;
}
.responsive0 .mainBanner .banText .title {
	font-size: 170%;
}
.responsive0 .mainBanner .banText .txt {
	font-size: 150%;
}

.responsive0 .mansaySlider .banText {
	width: 94%;
	padding: 0 3%;
	top: 7%;
}
.responsive0 .mansaySlider .banText span {
	padding: 10px 15px;
}
.responsive0 .mansaySlider .banText .title {
	font-size: 130%;
}
.responsive0 .mansaySlider .banText .txt {
	font-size: 110%;
}

.responsive0 .mansaySlider .banText span.thumb {
	display: block;
	width: 128px;
	background: none;
	margin: 0 auto 20px;
	padding: 0;
}
.responsive0 .mansaySlider .banText span.thumb img {
	width: 100%;
}

.responsive0 .actionArea {
    top: -70px;
}

.responsive0 .frontTitle {
	font-size: 190%;
	width: auto;
	font-weight: bold;
	padding-bottom: 35px;
	margin: 0 auto 40px;
}
.responsive0 .service .frontTitle > span {
	bottom: -18px;
}
.responsive0 .frontTitle > span > span {
	display: inline-block;
	line-height: 1.4em;
	font-size: 70%;
	font-weight: normal;
	padding: 0 10px;
	background-color: #f6f6f6;
}


.responsive0 .activities {
	font-size: 130%;
	top: 0;
}
.responsive0 .activities > a {
	float: none;
	width: 100%;
}
.responsive0 .activities span.txt {
	width: 61%;
	padding: 5% 3%;
}
.responsive0 .activities span.txt span.massage {
	line-height: 1.4em;
	overflow: hidden;
	display: block;
}
.responsive0 .activities .img {
	width: 33%;
	overflow: hidden;
}
.responsive0 .activities .img img {
	position: relative;
	width: 100%;
	display: block;
}
.responsive0 .activities .two span.txt,
.responsive0 .activities .three .img {
	float: right;
}
.responsive0 .activities .two .img,
.responsive0 .activities .three span.txt {
	float: left;
}
.responsive0 .activities .two .img:after {
	left: auto;
	border-left: none;
	right: 0;
	border-right: 16px solid #efefef;
}
.responsive0 .activities .three .img:after {
	right: auto;
	border-right: none;
	left: 0;
	border-left: 16px solid #efefef;
}
.responsive0 .activities .two:hover .img:after {
	border-right: 16px solid #920883;
}
.responsive0 .activities .one:hover .img:after,
.responsive0 .activities .three:hover .img:after{
	border-left: 16px solid #920883;
}


.responsive0 .service {
	padding: 35px 3%;
}
.responsive0 .service .listWrapper a.listArrowL {
	left: 0;
}
.responsive0 .service .listWrapper a.listArrowR {
	right: 0;
}
.responsive0 .service .listContainer {
/*
	width: 270px;
	height: 336px;
*/
	width: 100%;
}
/*
.responsive0 .service .mPartition {
	display: inline-block;
	width: 270px;
	vertical-align: top;
}
*/
.responsive0 .service .serviceList a {
	margin: 15px 8%;
	width: 32%;
}
.responsive0 .service .serviceList a img {
	width: 100%;
}

.responsive0 .actionItem {
	width: 46%;
	margin: 0 2%;
}
.responsive0 .actionItem img {
	display: block;
	width: 100%;
}
.responsive0 .actionItem .text {
	font-size: 150%;
	padding: 10px 0;
}
.responsive0 .actionItem.act02, .responsive0 .actionItem.act04 {
	margin-top: 20px;
}