@charset "UTF-8";
/**
*
* @authors Your Name (you@example.org)
* @date    2016-12-10 16:57:22
* @version $Id$
*/

/*
purple #B1658B;
red #CA2420;
blue #326295;
orange #F89829;
*/

*, *:before, *:after {
  box-sizing: Border-box;
}

.lihsi-mobile{
	display: none !important;
}

.nopadding{
	padding: 0 !important;
}

.txt-left{
	text-align: left;
}

.txt-center{
	text-align: center;
}

.txt-color-pinky{
	color: #ff406e;
}

input:focus,select:focus,textarea:focus {outline:0;}

html,body{
	letter-spacing: 3px;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "微軟正黑體", "新細明體", "蘋果儷黑體", Verdana, sans-serif;
}

html{
  box-sizing: border-box;
  
}

body{
	background: #ffffff;
	/*overflow-x: hidden;*/
}

body.noscroll{
	overflow-y: hidden!important;
}

body,input,button,select,textarea{
	font-family: "微軟正黑體", "微软雅黑","Helvetica Neue", Helvetica, Arial, sans-serif;
}

.wrap{
	position: relative;
	width: 100%;
	height: auto;

	background: #efefef;
	overflow-x: hidden;
}

.wrap.nobg{
	background: #FFF;
}

img{
	display: block;
}

img.img-full{
	width: 100%;
}

.container-full{
	display: block;
	width: 100%;
	padding: 0 15px;
	margin: 0 auto;
}

.container-long{
	display: block;
	max-width: calc(1620px + (15px * 2));
	width: 100%;
	padding: 0px 15px;

	margin: 0 auto;
}

.container-base{
	display: block;
	max-width: calc(1200px + (15px * 2));
	width: 100%;
	padding: 0px 15px;

	margin: 0 auto;
}

.cursor-pointer{
	cursor: pointer;
}


/***** loading start *****/

.loading-mask{
	display: flex;
	position: fixed;
	top: 0;
	left: 0;

	justify-content: center;
	align-items: center;

	width: 100%;
	height: 100%;
	background: #FFF;

	z-index: 999;
}

.loading-mask.complete{
	display: none;
}

@keyframes ldio-5cksq6krpib {
  0% { transform: translate(-50%,-50%) rotate(0deg); }
  100% { transform: translate(-50%,-50%) rotate(360deg); }
}
.ldio-5cksq6krpib div {
  position: absolute;
  width: 120px;
  height: 120px;
  border: 10px solid #e15b64;
  border-top-color: transparent;
  border-radius: 50%;
}
.ldio-5cksq6krpib div {
  animation: ldio-5cksq6krpib 1s linear infinite;
  top: 100px;
  left: 100px
}
.loadingio-spinner-rolling-2an3ew4770t {
  width: 200px;
  height: 200px;
  display: inline-block;
  overflow: hidden;
  /*background: #ffffff;*/
}
.ldio-5cksq6krpib {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateZ(0) scale(1);
  backface-visibility: hidden;
  transform-origin: 0 0; /* see note above */
}
.ldio-5cksq6krpib div { box-sizing: content-box; }

/***** loading end *****/

header{
	position: relative;
	display: block;
	width: 100%;

	top: 0;
	left: 0;
  
  padding: 5px 0px;
  background: #FFF;

	/*border-bottom: 2px solid #d0214a;*/
	z-index: 10;
}

header.scroll{
	position: fixed;
}

header .collection{
	display: flex;
	align-items: center;
}

header .collection .logo{
	width: calc(270px * 0.85);
	display: inline-block;
}

header .collection .logo img{
	display: inline-block;
	width: 100%;
}

header .collection .logo a{
	display: inline-block;
}

header .collection nav{
	display: inline-block;
	flex: 1;
	padding: 0 15px 0 0;
	text-align: right;
}

header .collection nav.open{
	display: inline-block !important;
}


header .collection nav ul{
	display: flex;
	padding: 0;
	margin: 0;
	justify-content: flex-end;
	align-items: center;
	list-style: none;
}

header .collection nav ul li{
	position: relative;
	display: inline-block;
	float: left;

	padding: 0 15px;
}

header .collection nav ul li:last-child{
	padding-right: 0;
}

header .collection nav ul li a{
	display: flex;
	padding-left: 55px;

	align-items: center;
	min-height: 30px;

	font-size: 18px;
	font-weight: bold;
	text-decoration: none;

	color: #d2333a;
	
	letter-spacing: 0;
}

header .collection nav ul li a:hover{
	color: #ff686f;
}

header .collection .contact{
	width: 252px;
	align-items: center;
	display: inline-block;
}

header .collection .contact a{
	display: block;
}

header .collection .contact a img{
	width: 100%;
}

header .collection .product{
	flex: 1;
	text-align: right;
}

header .collection .product a{
	display: inline-block;
	padding-top: 32px;

	letter-spacing: 0;

	color: #d0214a;
	text-decoration: none;

	background: url("../images/nav_m_icon_1.jpg");
	background-size: calc(30px * 1) calc(25px * 1) !important; /*53*61*/
	background-repeat: no-repeat !important;
	background-position: top center !important;
}

header .collection .product a:hover{
	color: #d0214a;
	text-decoration: none;
}

header .collection .product a:first-child{

	padding-left: 10px;
	padding-right: 10px;

	border-right: 1px solid #c2c2c2;
}

header .collection .switch{
	display: none;
}

header .collection .switch a{
	position: relative;
	display: inline-block;
	width: 50px;
	height: 50px;

	background: url("../images/switch_open.png");
	background-size: 30px 30px;
	background-repeat: no-repeat;
	background-position: center center;

	text-indent: -999999px;
}

header .collection .switch a.close{

	background: url("../images/switch_close.png");
	background-size: 30px 30px;
	background-repeat: no-repeat;
	background-position: center center;
}

.kv{
	position: relative;
	background: #faf8f0;
}

.kv img.kv-full-img{
	width: 100% !important;
	height: auto !important;
}

.kv .slogan{
	position: absolute;
	top: 58%;
	left: 50%;

	width: 25vw;
	max-width: calc(491px * 0.85);
}

.kv .slogan.spec{
	left: 15%;
}

.kv .slogan.newstyle{
	left: 18%;
	top: 42%;
}

.kv .theater .catalogue{
	position: relative;
	display: flex;
	width: 100%;
	padding-top: 20px;
	flex-direction: row;
}

/********/
.headline .title-group{
	position: relative;
	display: inline-flex;
	padding: 20px calc(170px + 50px) 20px calc(70px + 50px);
	margin-bottom: 40px;
	border-left: 1px solid #818181;
	border-right: 1px solid #818181;
	border-bottom: 1px solid #818181;
}

.headline .title-group:before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 70px;
	height: 1px;
	background: #818181;
}

.headline .title-group:after{
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 170px;
	height: 1px;
	background: #818181;
}

.headline .title-group .main-title{
	display: inline-block;
	margin-top: -45px;
	font-size: 34px;
	font-weight: bold;
	font-family: PMingLiU;
}

.headline .title-group .main-title span.sub-title{
	display: block;
	padding-top: 10px;
	font-size: 18px;
	font-weight: normal;
	letter-spacing: 0;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "微軟正黑體", "新細明體", "蘋果儷黑體", Verdana, sans-serif;

	color: #6f6f6f;
}
/********/

/********/
.about{
	position: relative;
	width: 100%;

	padding: 120px 0;

	background: url("../images/about_bg.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.about .intro{
	display: block;
	padding-top: 60px;
	padding: 60px 60px 0 60px;

	line-height: 1.6;
}

.about .intro .summary{
	display: block;
	padding-bottom: 100px;
	font-size: 20px;
	color: #000;
}

.about .intro .summary span.highlight{
	font-weight: bold;
	color: #397f7e;
}

.about .intro .company{
	display: block;
}

.about .intro .company .item{
	display: flex;
	align-items: flex-start;
	padding-bottom: 100px;
}

.about .intro .company .item .cover{
	width: 331px;
}

.about .intro .company .item .cover img{
	width: 100%;
	max-width: 331px;
	margin: 0 auto;
}

.about .intro .company .item .info{
	display: block;
	flex: 1;
	padding-left: 80px;
}

.about .intro .company .item .info span.title{
	display: inline-block;
	width: 100%;
	font-size: 24px;
	font-weight: bold;
	padding-bottom: 30px;
}

.about .intro .company .item .info .detail{
	font-size: 20px;
	line-height: 1.6;
}

.about .intro .company .item .info .detail .album{
	display: flex;
	padding-top: 10px;
}

.about .intro .company .item .info .detail .album .cell{
	position: relative;
	flex: 1;
	border-right: 1px solid #FFF;
}

.about .intro .company .item .info .detail .album .cell:last-child{
	border-right: 0;
}

.about .intro .company .item .info .detail .album .cell span.alias{
	position: absolute;
	bottom: 0;
	left: 0;

	width: 100%;
	padding: 5px;

	color: #000;

	font-weight: 500;
	letter-spacing: 0;

	text-align: center;

	background: rgba(255, 255, 255, 0.7);
}

.about .intro .company .item .info .detail .album .cell img{
	width: 100%;
}


.about .intro .company .item .info .detail .history{
	padding-top: 30px;
}

.about .intro .company .item .info .detail .history .cell{
	display: flex;
	align-items: flex-start;
}

.about .intro .company .item .info .detail .history .cell span.year{
	display: inline-block;
	padding-right: 15px;
	min-width: 70px;
	letter-spacing: 0;
}

.about .intro .company .item .info .detail .history .cell span.memo{
	flex: 1;
	text-align: left;
}



/*
.about .cover{
	display: flex;
	width: 50%;
	padding: 0 30px;
}

.about .cover img{
	width: 100%;
	max-width: 329px;
}

.about .detail{
	flex: 1;
	padding-left: 30px;
	font-size: 20px;
	letter-spacing: 0;
	line-height: 32px;
	color: #000;
}

.about .detail .milestone{
	padding-top: 50px;
}

.about .detail .milestone ul{
	display: inline-block;
	padding: 0;
	margin: 0;
	width: 100%;
	list-style: none;
}

.about .detail .milestone ul li{
	display: inline-block;
	width: 100%;
}

.about .detail .milestone ul li span.year{
	display: inline-block;
	padding-right: 5px;
	font-size: 26px;
	font-weight: bold;

	color: #44b2bc;
}

.about .detail .brand{
	padding-top: 50px;
}

.about .detail .brand ul{
	display: inline-block;
	padding: 0;
	margin: 0;
	width: 100%;
	list-style: none;
}

.about .detail .brand ul li{
	display: inline-block;
	width: 100%;
	font-weight: bold;
}
*/

/********/

.territory{
	position: relative;
	width: 100%;

	padding: 120px 0;

	background: url("../images/about_bg.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.territory .category-title{
	display: block;

	padding-bottom: 30px;
}

.territory .category-title span{
	display: inline-block;
	padding: 5px 15px;

	border: 3px solid #cbcccc;

	background: #3b7f7e;
	font-size: 32px;
	font-weight: bold;
	letter-spacing: 0;
	color: #FFF;
}

.territory .category-title.spec span{

	background: #777777;
}

.territory .timesheet{
	width: 100%;
	padding-bottom: 80px;
}

.territory .showcase{
	display: flex;
	flex-wrap: wrap;

	align-items: flex-start;
	justify-content: space-between;
}

.territory .showcase .item{
	width: calc(50% - 30px);
	padding-bottom: 60px;
}

.territory .showcase .item .cover{
	position: relative;
	width: 100%;
	padding: 0px 0 30px 30px;
	z-index: 1;
}

.territory .showcase .item .cover:after{
	content: "";
	position: absolute;
	width: 70%;
	height: calc(70% - 30px);
	bottom: 0;
	left: 0;
	background: #ededed;

	z-index: -1;
}

.territory .showcase .item .info{
	padding-top: 20px;
	padding-left: 30px;
}

.territory .showcase .item .info span.title{
	display: block;
	padding-bottom: 10px;

	font-weight: bold;
	font-size: 22px;
	letter-spacing: 0;
	color: #397f7e;
}

.territory .showcase .item .info .detail{
	font-size: 18px;
	letter-spacing: 0;
	line-height: 2;
	color: #343434;
}

/********/
.caption-group{
	text-align: center;
	padding-bottom: 20px;
}

.caption-group span.caption{
	display: inline-block;
	width: 100%;
	padding-bottom: 30px;
	font-size: 36px;
	font-weight: bold;
	font-family: PMingLiU;
	color: #333;
}

.caption-group p{
	margin: 0;
	padding-bottom: 50px;
	font-size: 20px;
	letter-spacing: 0;
}
/********/

.belief{
	position: relative;
	width: 100%;

	padding: 120px 0 0 0;

	background: url("../images/belief_bg.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.belief .organizational{
	width: 100%;
	text-align: center;
}

.belief .organizational img{
	width: 100%;
	max-width: 880px;
	margin: 0 auto;
}

.belief .office{
	position: relative;
	width: 100%;
}

.belief .office img{
	position: relative;
	width: 100%;
}

/*
.belief .office{
	position: relative;
	width: 100%;
	padding-top: 800px;

	background: url("../images/office_meeting.png");
	background-size: 1920px;
	background-repeat: no-repeat;
	background-position: center bottom;
}

.belief .office .item{
	position: absolute;
	width: 110px;

	bottom: 280px;
}

.belief .office .item img{
	width: 100%;
}

.belief .office .item.i1{
	left: calc(50% - 655px);
}

.belief .office .item.i2{
	left: calc(50% - 355px);
}

.belief .office .item.i3{
	left: calc(50% - 55px);
}

.belief .office .item.i4{
	left: calc(50% + 245px);
}

.belief .office .item.i5{
	left: calc(50% + 545px);
}

.belief .office .item img{
	width: 100%;
}
*/

/********/

/********/
.performance{
	position: relative;
	width: 100%;

	padding: 120px 0;

	background: url("../images/performance_bg.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center bottom;
}

.performance .album{
	display: block;
}

.performance .album .item{
	float: left;
	width: 33.3333%;

	padding: 0 15px;
}

.performance .album .item .cover{
	position: relative;
	width: 100%;
	padding-top: 128%;

	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center center;

	-webkit-transition: background-size 500ms;
	-moz-transition: background-size 500;
	-o-transition: background-size 500;
	-ms-transition: background-size 500ms;
	transition: background-size 500ms;
}

.performance .album .item a:hover .cover{
	background-size: 110%;
}





.performance .chsyear{
	text-align: right;
	padding-bottom: 20px;
}

.performance .chsyear select{

	padding: 10px 36px 10px 10px;

	background: rgba(0, 0, 0, 0);
	background-image: url("../images/select_icon.png");
	background-size: 16px 10px;
	background-repeat: no-repeat;
	background-position: center right 10px;

	border-top: 0;
	border-bottom: 1px solid #afafaf;
	border-left: 0;
	border-right: 0;
	border-radius: 0;


	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;

	font-size: 18px;
	color: #afafaf;
}

.performance .arrow{
	display: flex;
	justify-content: space-between;

	padding: 10px 0 20px 0;
}

.performance .arrow a{
	display: inline-block;
	width: 73px;
}

.performance .arrow a:hover{
	opacity: 0.8;
}

.performance .arrow a img{
	width: 100%;
}

.performance .classics{
	display: inline-block;
	width: 100%;
	margin-bottom: 160px;
}

.performance .classics .item{
	float: left;
	width: 33.3333%;

	padding: 0 15px;
}

.performance .classics .item .cover{
	position: relative;
	width: 100%;
	padding-top: 128%;

	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center center;

	-webkit-transition: background-size 500ms;
	-moz-transition: background-size 500;
	-o-transition: background-size 500;
	-ms-transition: background-size 500ms;
	transition: background-size 500ms;
}

.performance .classics .item a:hover .cover{
	background-size: 110%;
}

.performance .classics .item a:hover .cover:before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
}

.performance .classics .item .cover p{
	position: absolute;
	display: none;
	margin: 0;
	padding: 0;

	top: 50%;
	left: 50%;

	transform: translate(-50%, -50%);

	text-align: center;
	color: #FFF;
}

.performance .classics .item .cover p span.city{
	display: inline-block;
	width: 100%;
	padding-bottom: 10px;
	font-size: 20px;
}

.performance .classics .item .cover p span.title{
	display: inline-block;
	width: 100%;
	font-size: 22px;
}

.performance .classics .item a, .performance .classics .item a:hover{
	text-decoration: none;
}

.performance .classics .item a:hover .cover p{
	display: inline-block;
}

.performance .classics .item .detail{
	padding-top: 20px;

	color: #333333;
}

.performance .classics .item .detail span.city{
	display: block;

	padding-bottom: 5px;
	font-size: 20px;

	text-align: center;
	letter-spacing: 0;
}

.performance .classics .item .detail span.title{
	display: block;
	font-size: 22px;

	text-align: center;
	letter-spacing: 0
}

.performance .overseas{
	display: inline-block;
	width: 100%;

	padding: 0 15%;
}

.performance .overseas .item{
	float: left;
	width: 50%;

	padding: 0 30px;
}

.performance .overseas .item .cover{
	position: relative;
	width: 100%;
	padding-top: 128%;

	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center center;

	-webkit-transition: background-size 500ms;
	-moz-transition: background-size 500;
	-o-transition: background-size 500;
	-ms-transition: background-size 500ms;
	transition: background-size 500ms;
}

.performance .overseas .item a:hover .cover{
	background-size: 110%;
}

.performance .overseas .item a, .performance .overseas .item a:hover{
	text-decoration: none;
}

.performance .overseas .item .detail{
	padding-top: 20px;
	color: #333333;
}


.performance .overseas .item .detail span.title{
	display: block;
	font-size: 22px;

	text-align: left;
	letter-spacing: 0
}

.more{
	padding-top: 60px;
	text-align: right;
}

.more a{
	display: inline-block;
	padding-right: 30px;
	padding-bottom: 10px;

	text-decoration: none;

	font-size: 16px;
	font-weight: bold;
	color: #999999;

	background: url("../images/more.png");
	background-size: 73px 15px;
	background-repeat: no-repeat;
	background-position: right bottom;
}

.more a:hover{
	color: #000;
}

/********/

.case{
	position: relative;
	width: 100%;

	padding: 120px 0;

	background: url("../images/case_bg.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center bottom;
}

.case .album{
	position: relative;
	padding-top: 30px;
}

.case .album .group{
	display: flex;
	align-items: center;
}

.case .album .group .item{
	width: 30%;
	padding: 20px;
}

.case .album .group .item:nth-child(2){
	width: 40%;
}

.case .album .group .item .cover{
	width: 100%;
	-webkit-box-shadow: 6px 7px 9px -5px rgba(0,0,0,0.75);
	-moz-box-shadow: 6px 7px 9px -5px rgba(0,0,0,0.75);
	box-shadow: 6px 7px 9px -5px rgba(0,0,0,0.75);
}

.case .album .group .item .cover img{
	width: 100%;
}

.case .album .group .item .detail{
	padding-top: 20px;
	color: #333333;
}

.case .album .group .item .detail a{
	display: inline-block;
	margin-top: 5px;
	text-decoration: none;
	color: #2ca5ea;
}

.case .album .group .item .detail a:hover{
	text-decoration: none;
	color: #1d72a2;
}

.case .album .group .item .detail span.city{
	display: block;

	padding-top: 5px;
	padding-bottom: 5px;
	font-size: 20px;
	line-height: 28px;

	text-align: center;
	letter-spacing: 0;
}

.case .album .group .item .detail span.title{
	display: block;
	font-size: 22px;

	text-align: center;
	letter-spacing: 0
}

.case .album a.arrow{
	position: absolute;
	display: inline-block;

	top: 10px;

	width: 73px;
}

.case .album a.arrow.pre{
	left: 0;
}

.case .album a.arrow.next{
	right: 0;
}

/********/
.contact{
	position: relative;
	width: 100%;

	padding: 120px 0;

	background: url("../images/contact_bg.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center bottom;
}

.contact .form-group-full{
	display: flex;
	align-items: flex-start;

	padding: 20px 0;
}

.contact .form-group-full .item{
	display: inline-block;
	width: 50%;

	padding: 0 15px;
}

.contact .form-group-full .item.full{
	width: 100%;
}

.contact .form-group-full .item span.title{
	display: inline-block;
	width: 100%;
	padding-bottom: 5px;
	font-size: 20px;
	font-weight: bold;
	color: #333333;
}

.contact .form-group-full .item span.title ei{
	color: red;
}

.contact .form-group-full .item input[type='text']{
	padding: 10px 15px 10px 15px;
	font-size: 20px;
	font-weight: normal;

	border: 1px solid #b2b2b2;
}

.contact .form-group-full .item input[type='text'].fullinputtext{
	width: 100%;
}

.contact .form-group-full .item textarea.fullinputtext{
	width: 100%;
	height: 200px;
	padding: 15px;
	border: 1px solid #b2b2b2;
}

.contact .form-group-full .item .recaptch{
	display: flex;
	align-items: center;
}

.contact .form-group-full .item .recaptch input[type='text']{
	flex: 1;
}

.contact .form-group-full .item .recaptch span.code{
	display: inline-block;
	padding: 10px 15px 5px 15px;
	margin-left: 10px;
	font-size: 20px;

	border: 1px solid #989898;
	background: #f8f8f8;
}

.contact .form-group-full .item .recaptch span.memo{
	padding-left: 10px;
	font-size: 16px;
}

.contact a.sendbtn{
	position: relative;
	display: inline-flex;

	padding: 15px 80px 15px 20px;

	background: #e76969;
	border-left: 5px solid #d2333a;

	letter-spacing: 0;

	font-size: 20px;
	text-decoration: none;
	color: #FFF;
}

.contact a.sendbtn:after{
	content: "";

	position: absolute;
	
	top: 50%;
	right: 15px;

	transform: translateY(-50%);

	width: 32px;
	height: 12px;
	background: url("../images/btn_send_arrow.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.contact a.sendbtn:hover{
	color: #FFF;
	background: #d2333a;
}

/********/

.team{
	position: relative;
	width: 100%;

	padding: 120px 0;

	background: url("../images/performance_bg.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center bottom;
}

.team .theater{
	position: relative;
	width: 1380px;
	margin: 0 auto;
}

.team .theater .item{
	position: absolute;
	display: inline-block;
	width: 642px;
}

.team .theater .item.s1{
	top: 220px;
	right: 16px;
}

.team .theater .item.s2{
	top: 660px;
	left: 80px;
}

.team .theater .item.s3{
	top: 1000px;
	left: 600px;
}

.team .theater .item.s4{
	top: 1430px;
	left: 230px;
}

.team .theater .extra{
	position: absolute;
	font-size: 16px;
	letter-spacing: 0;
}

.team .theater .extra.left{
	padding-left: 20px;
}

.team .theater .extra.left:before{
	content: "▼";
	position: absolute;
	top: 0;
	left: 0;
	display: inline-block;

	-moz-transform:rotate(90deg);
  -webkit-transform:rotate(90deg);
  -o-transform:rotate(90deg);
  -ms-transform:rotate(90deg);
  transform:rotate(90deg);
}

.team .theater .extra.right{
	padding-right: 20px;
}

.team .theater .extra.right:before{
	content: "▼";
	position: absolute;
	top: 0;
	right: 0;
	display: inline-block;

	-moz-transform:rotate(-90deg);
  -webkit-transform:rotate(-90deg);
  -o-transform:rotate(-90deg);
  -ms-transform:rotate(-90deg);
  transform:rotate(-90deg);
}

.team .theater .extra.s1{
	top: 336px;
	left: 722px;
}

.team .theater .extra.s2{
	top: 766px;
	left: 606px;
}


.team .theater .extra.s3{
	top: 912px;
	left: 960px;
}


.team .theater .item span.title{
	display: inline-block;
	width: 100%;

	padding-bottom: 15px;

	font-size: 26px;
	font-weight: bold;
	font-family: PMingLiU;
}

.team .theater .item .memo{
	font-size: 18px;
	line-height: 26px;

	letter-spacing: 0;

	color: #000;
}

.team .theater img.bg{
	width: 100%;
}

/********/
footer{
	position: relative;
	display: block;
	background: #2c2c2c;
	z-index: 1;
}

footer .memo{
	position: relative;
	padding: 25px 0px;
	text-align: center;

	margin: 0 auto;
}

footer .memo .sub-logo{
	width: calc(270px * 0.75);
	padding-bottom: 15px;
	margin: 0 auto;
}

footer .memo .sub-logo a{
	display: inline-block;
}

footer .memo .sub-logo img{
	width: 100%;
}

footer .memo .info{
	display: flex;
	justify-content: center;

	padding-bottom: 10px;
}

footer .memo .info span{
	padding-right: 15px;
	margin-right: 15px;

	border-right: 1px solid #FFF;

	letter-spacing: 0;
	color: #fefefe;
	font-size: 16px;
}

footer .memo .info span:last-child{
	padding-right: 0;
	margin-right: 0;
	border-right: 0;
}

footer .memo .address{
	text-align: center;
	font-size: 18px;
	letter-spacing: 0;
	color: #fefefe;
}

footer .detail{
	padding: 15px 0px;
	background: #bf262c;

	font-size: 16px;
	font-weight: normal;
	color: #FFF;
	letter-spacing: 0;
}

footer .detail .extra{
	display: flex;
	justify-content: space-between;

	font-size: 16px;

	color: #FFF;
}

footer .detail .extra .item a{
	color: #FFF;
	text-decoration: none;
}

footer .detail .extra a:hover{
	color: #FFF;
	text-decoration: underline;
}


/*大於等於1921*/
@media (min-width: 1921px) {
}


/*小於等於1920*/
@media (max-width: 1920px) {

	.belief .office img{
		position: relative;
		width: 1920px;
		margin: 0 calc(50% - 960px);
	}
}

/*小於等於1800*/
@media (max-width: 1800px) {
}

/*小於等於1600*/
@media (max-width: 1600px) {
}

/*小於等於1441*/
@media (max-width: 1441px) {

	.container-base{
		max-width: calc(1250px + (15px * 2));
	}

	header .collection .logo{
		width: calc(270px * 0.75);
	}

	header .collection nav ul li a{
		padding-left: 30px;
	}

	.headline .title-group{
		padding: 16px calc(150px + 30px) 16px calc(50px + 30px);
		margin-bottom: 30px;
	}

	.headline .title-group:before{
		width: 50px;
	}

	.headline .title-group:after{
		width: 150px;
	}

	.headline .title-group .main-title{
		margin-top: -34px;
		font-size: 28px;
	}

	.headline .title-group .main-title span.sub-title{
		padding-top: 5px;
		font-size: 15px;
	}

	.caption-group span.caption{
		padding-bottom: 20px;
		font-size: 28px;
	}

	.caption-group p{
		font-size: 18px;
	}


	.about{
		padding: 80px 0;
	}

	.about .intro .summary{
		padding-bottom: 80px;
		font-size: 18px;
	}

	.about .intro .company .item{
		padding-bottom: 80px;
	}

	.about .intro .company .item .cover{
		width: 260px;
	}

	.about .intro .company .item .info{
		padding-left: 60px;
	}

	.about .intro .company .item .info span.title{
		font-size: 22px;
		padding-bottom: 20px;
	}

	.about .intro .company .item .info .detail{
		font-size: 18px;
	}

	.about .intro .company .item .info .detail .history .cell span.year{
		min-width: 55px;
	}
	/*

	.about .detail{
		font-size: 18px;
	}

	.about .detail .milestone ul li span.year{
		font-size: 24px;
	}
	*/

	
	.territory{
		padding: 80px 0;
		background: url("../images/about_bg.png");
		background-size: 1440px auto;
		background-repeat: no-repeat;
		background-position: center top;
	}

	.territory .timesheet{
		padding-bottom: 60px;
	}

	.belief{
		padding: 80px 0 0 0;
	}

	/*
	.belief .office{
		padding-top: 760px;
		background-size: 1440px;
	}

	.belief .office .item{
		width: 96px;
		bottom: 240px;
	}

	.belief .office .item.i1{
		left: calc(50% - 440px);
	}

	.belief .office .item.i2{
		left: calc(50% - 270px);
	}

	.belief .office .item.i4{
		left: calc(50% + 150px);
	}

	.belief .office .item.i5{
		left: calc(50% + 360px);
	}
	*/

	.belief .office img{
		width: 1440px;
		margin: 0 calc(50% - 720px);
	}

	.performance{
		padding: 80px 0;
	}

	.performance .classics .item .cover p span.city{
		font-size: 18px;
	}

	.performance .classics .item .cover p span.title{
		font-size: 20px;
	}

	.performance .classics .item .detail{
		padding-top: 15px;
	}

	.performance .classics .item .detail span.city{
		font-size: 18px;
	}

	.performance .classics .item .detail span.title{
		font-size: 20px;
	}

	.performance .overseas .item .detail{
		padding-top: 15px;
	}

	.performance .overseas .item .detail span.title{
		font-size: 20px;
	}

	.case{
		padding: 80px 0;
	}

	.case .album .group .item .detail{
		padding-top: 15px;
	}

	.case .album .group .item .detail span.city{
		font-size: 18px;
		line-height: 26px;
	}

	.case .album .group .item .detail span.title{
		font-size: 20px;
	}

	.contact{
		padding: 80px 0;
	}

	.contact .form-group-full .item span.title{
		font-size: 18px;
	}

	.contact .form-group-full .item input[type='text']{
		padding: 8px 10px;
		font-size: 18px;
	}

	.contact .form-group-full .item .recaptch span.code{
		font-size: 18px;
		letter-spacing: 0;
	}

	.contact .form-group-full .item .recaptch span.memo{
		font-size: 14px;
		letter-spacing: 0;
	}

	.contact a.sendbtn{
		padding: 15px 60px 15px 20px;
		font-size: 18px;
	}

	.team{
		padding: 80px 0;
	}

	.team .theater{
		width: 960px;
	}

	.team .theater .item{
		position: absolute;
		display: inline-block;
		width: 460px;
	}

	.team .theater .item.s1{
		top: 100px;
		right: 0px;
	}

	.team .theater .item.s2{
		top: 430px;
		left: 20px;
	}

	.team .theater .item.s3{
		top: 690px;
		left: 418px;
	}

	.team .theater .item.s4{
		top: 970px;
		left: 150px;
	}

	.team .theater .extra{
		font-size: 14px;
	}

	.team .theater .extra.left{
		padding-left: 15px;
	}

	.team .theater .extra.right{
		padding-right: 15px;
	}

	.team .theater .extra.s1{
		top: 236px;
		left: 502px;
	}

	.team .theater .extra.s2{
		top: 540px;
		left: 384px;
	}

	.team .theater .extra.s3{
		top: 632px;
		left: 652px;
	}

	.team .theater .item span.title{
		font-size: 24px;
	}

	.team .theater .item .memo{
		font-size: 16px;
	}

	footer .memo{
		padding: 15px 0;
	}


	footer .memo .sub-logo{
		width: calc(270px * 0.65);
	}

	footer .detail{
		padding: 10px;
	}


}

/*小於等於1280*/
@media (max-width: 1280px) {

}

/*小於等於1160*/
@media (max-width: 1160px) {

	
}

/*小於等於1024*/
/* pad default */
@media (max-width: 1024px) {

	header .collection .logo{
		width: calc(270px * 0.65);
	}

	header .collection nav ul li{
		padding-right: 0;
	}

	header .collection nav ul li a{
		padding-left: 15px;
	}

	footer .memo .sub-logo{
		width: calc(270px * 0.55);
	}

}

/*小於等於992*/
@media (max-width: 992px) {

}

/*小於等於960*/
@media (max-width: 960px) {

	.container-base{
		max-width: calc(730px + (15px * 2));
	}

	.contact .form-group-full .item.spec{
		width: 100%;
	}

	.about .intro .company .item .info{
		padding-left: 40px;
	}

	.territory .showcase .item{
		width: calc(50% - 20px);
		padding-bottom: 40px;
	}

	.territory .showcase .item .cover{
		padding: 0px 0 20px 20px;
	}

	.territory .showcase .item .cover:after{
		width: 80%;
		height: calc(80% - 20px);
	}

	.territory .showcase .item .info{
		padding-top: 20px;
		padding-left: 20px;
	}

	.territory .showcase .item .info span.title{
		padding-bottom: 5px;
		font-size: 20px;
	}

	.territory .showcase .item .info .detail{
		font-size: 16px;
		line-height: 1.6;
	}

	.team .theater{
		width: 700px;
	}

	.team .theater .item{
		width: 320px;
	}

	.team .theater .item.s1{
		top: 60px;
		right: 0px;
	}

	.team .theater .item.s2{
		top: 318px;
		left: 34px;
	}

	.team .theater .item.s3{
		top: 500px;
		left: 306px;
	}

	.team .theater .item.s4{
		top: 720px;
		left: 150px;
	}

	.team .theater .extra{
		font-size: 13px;
	}

	.team .theater .extra.left{
		padding-left: 15px;
	}

	.team .theater .extra.right{
		padding-right: 15px;
	}

	.team .theater .extra.s1{
		top: 164px;
		left: 382px;
	}

	.team .theater .extra.s2{
		top: 408px;
		left: 266px;
	}

	.team .theater .extra.s3{
		top: 458px;
		left: 462px;
	}

	.team .theater .item span.title{
		padding-bottom: 5px;
		font-size: 18px;
		letter-spacing: 0;
	}

	.team .theater .item .memo{
		font-size: 14px;
		line-height: 20px;
	}

}

/*小於等於768*/
@media (max-width: 768px) {

	header{
		position: fixed;
	}

	header .collection{
		justify-content: space-between;
	}

	header .collection .logo{
		width: calc(270px * 0.55);
	}

	header .collection .switch{
		display: inline-block;
	}

	header .collection nav{
		display: none;
		position: fixed;
		width: 70%;
		height: calc(100vh - 60px);
		top: 60px;
		right: 0;
		padding: 30px 0 0 0;
		background: rgba(0, 0, 0, 0.8);
		overflow-y: hidden;
	}

	header .collection nav ul{
		flex-wrap: wrap;
	}

	header .collection nav ul li{
		width: 100%;

		padding: 15px 0;
	}

	header .collection nav ul li a{
		padding-left: 0;
		justify-content: center;
		font-size: 18px;
	}

	.about .intro{
		padding: 60px 30px 0 30px;
	}

	.about .intro .company .item .info{
		padding-left: 20px;
	}

	.about .intro .company .item .info .detail .album{
		display: flex;
		flex-wrap: wrap;
	}

	.about .intro .company .item .info .detail .album .cell{
		position: relative;
		flex: none;
		width: 50%;
		border-right: 1px solid #FFF;
	}

	/*
	.belief .office{
		padding-top: 760px;
		background-size: 1440px;
	}

	.belief .office .item{
		width: 80px;
		bottom: 240px;
	}

	.belief .office .item.i1{
		left: 5%;
	}

	.belief .office .item.i2{
		left: 22%;
	}

	.belief .office .item.i4{
		left: 65%;
	}

	.belief .office .item.i5{
		left: auto;
		right: 5%;
	}
	*/

	.belief .office img{
		width: 768px;
		margin: 0 calc(50% - 384px);
	}

	

	.performance .overseas .item{
		padding: 0 20px;
	}

	.case .album .group .item{
		padding: 15px;
	}

	.territory .category-title{
		padding-bottom: 20px;
	}

	.territory .category-title span{
		font-size: 22px;
	}

	footer .memo .sub-logo{
		width: calc(270px * 0.5);
	}

	footer .memo .info span{
		font-size: 14px;
		padding-right: 10px;
		margin-right: 10px;
	}

	footer .memo .address{
		font-size: 14px;
	}

	footer .detail .extra{
		font-size: 13px;
	}
}

/*小於等於575*/
/*mobile*/
@media (max-width: 575px) {

	.lihsi-desktop{
		display: none !important;
	}

	.lihsi-mobile{
		display: block !important;
	}

	.headline .title-group{
		padding: 10px calc(100px + 30px) 10px calc(0px + 30px);
		margin-bottom: 20px;
	}

	.headline .title-group:before{
		width: 20px;
	}

	.headline .title-group:after{
		width: 120px;
	}

	.headline .title-group .main-title{
		margin-top: -26px;
		font-size: 24px;
	}

	.headline .title-group .main-title span.sub-title{
		font-size: 13px;
	}

	.caption-group span.caption{
		font-size: 24px;
		letter-spacing: 0;
	}

	.caption-group p{
		padding-bottom: 20px;
		font-size: 16px;
		line-height: 26px;
		text-align: left;
	}

	.kv{
		height: 550px;
	}

	.kv img.kv-full-img{
		width: 1400px !important;
		margin-left: calc(50% - 700px);
	}

	.kv.newstyle img.kv-full-img{
		width: 1400px !important;
		margin-left: calc(50% - 940px);
	}

	.kv .slogan{
		width: 70vw;
		left: calc(50% - 35vw);
	}

	.kv .slogan.newstyle{
		top: 38%;
		left: calc(50% - 38vw);
	}

	.kv .slogan img{
		width: 100%;
	}

	.about{
		padding: 40px 0;
	}

	.about .intro{
		flex-wrap: wrap;
		padding: 30px 15px 0 15px;
	}

	.about .intro .summary{
		padding-bottom: 60px;
		font-size: 16px;
	}

	.about .intro .company .item{
		flex-wrap: wrap;
		padding-bottom: 60px;
	}

	.about .intro .company .item .cover{
		width: 100%;
		padding-bottom: 15px;
	}

	.about .intro .company .item .cover img{
		width: 50vw;
	}

	.about .intro .company .item .info{
		width: 100%;
		padding-left: 0;
	}

	.about .intro .company .item .info span.title{
		padding-bottom: 10px;
		text-align: center;
		font-size: 20px;
	}

	.about .intro .company .item .info .detail{
		font-size: 16px;
	}

	.territory{
		padding: 40px 0;
		background: url("../images/about_bg.png");
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center top;
	}

	.territory .timesheet{
		padding-bottom: 30px;
	}

	.territory .showcase .item{
		width: 100%;
		padding-bottom: 60px;
	}

	.territory .showcase .item .info{
		padding-top: 10px;
		padding-left: 20px;
	}

	.territory .showcase .item .info span.title{
		padding-bottom: 5px;
		font-size: 18px;
	}

	.territory .showcase .item .info .detail{
		font-size: 14px;
		line-height: 1.6;
	}

	/*
	.about .intro .cover{
		padding: 0;
		width: 100%;
		padding-bottom: 15px;
		justify-content: center;
	}

	.about .detail{
		padding: 0;
		font-size: 16px;
	}

	.about .detail .milestone{
		padding-top: 20px;
	}

	.about .detail .milestone ul li span.year{
		font-size: 20px;
	}

	.about .detail .brand{
		padding-top: 20px;
	}
	*/

	.belief{
		padding: 40px 0 0 0;
	}

	.performance{
		padding: 40px 0;
	}

	.case{
		padding: 40px 0;
	}

	.contact{
		padding: 40px 0;
	}

	/*
	.belief .office{
		padding-top: 550px;
		background-size: 960px;
	}

	.belief .office .item{
		width: 60px;
		bottom: 200px;
	}

	.belief .office .item.i1{
		left: 15%;
	}

	.belief .office .item.i2{
		left: 30%;
	}

	.belief .office .item.i3{
		left: calc(50% - 30px);
	}

	.belief .office .item.i4{
		left: 55%;
	}

	.belief .office .item.i5{
		right: 15%;
	}
	*/

	.belief .office img{
		width: 575px;
		margin: 0 calc(50% - 287px);
	}

	.performance .classics .item{
		padding: 5px;
	}

	.performance .classics .item .detail span.city{
		font-size: 14px;
	}

	.performance .classics .item .detail span.title{
		font-size: 16px;
	}

	.performance .classics{
		margin-bottom: 80px;
	}

	.performance .overseas{
		padding: 0;
	}

	.performance .overseas .item{
		padding: 0 10px;
	}

	.performance .overseas .item .detail span.title{
		font-size: 16px;
	}

	.case .album .group .item .detail span.city{
		font-size: 14px;
		line-height: 22px;
	}

	.case .album .group .item .detail span.title{
		font-size: 16px;
	}

	.case .album .group .item{
		padding: 10px;
		width: 10%;
	}

	.case .album .group .item:nth-child(2){
		width: 80%;
	}

	.contact .form-group-full{
		flex-wrap: wrap;
		padding: 0;
	}

	.contact .form-group-full .item{
		width: 100%;
		padding: 0 0 15px 0;
	}

	.contact .form-group-full .item span.title{
		font-size: 16px;
	}

	.contact .form-group-full .item input[type='text']{
		padding: 6px 8px;
		font-size: 16px;
	}

	.contact .form-group-full .item .recaptch span.code{
		padding: 5px 10px;
		margin-left: 5px;
	}

	.contact .form-group-full .item .recaptch span.memo{
		padding-left: 5px;
		font-size: 11px;
	}

	.contact .form-group-full .item .recaptch input[type='text']{
		flex: none;
		width: 150px;
	}

	.contact .form-group-full .item textarea.fullinputtext{
		height: 120px;
	}

	.contact a.sendbtn{
		padding: 10px 50px 10px 15px;
		font-size: 16px;
	}

	.team{
		padding: 40px 0;
	}

	.team .theater{
		width: 370px;
	}

	.team .theater .item{
		width: 100%;
		padding: 0 15px;
	}

	.team .theater .item.s1{
		top: 390px;
		right: 0px;
	}

	.team .theater .item.s2{
		top: 990px;
		left: 0px;
	}

	.team .theater .item.s3{
		top: 1480px;
		left: 0;
	}

	.team .theater .item.s4{
		top: 1930px;
		left: 0;
	}

	.team .theater .extra{
		font-size: 12px;
	}

	.team .theater .extra.left{
		padding-left: 0px;
		padding-right: 15px;
	}

	.team .theater .extra.left:before{

		left: auto;
		right: 0;

		-moz-transform:rotate(180deg);
	  -webkit-transform:rotate(180deg);
	  -o-transform:rotate(180deg);
	  -ms-transform:rotate(180deg);
	  transform:rotate(180deg);
	}

	.team .theater .extra.right{
		padding-right: 15px;
	}

	.team .theater .extra.s1{
		top: 342px;
		left: 38px;
	}

	.team .theater .extra.s2{
		top: 820px;
		left: 20px;
	}

	.team .theater .extra.s3{
		top: 960px;
		left: 148px;
	}

	.team .theater .item span.title{
		padding-bottom: 10px;
		font-size: 20px;
		letter-spacing: 0;
	}

	.team .theater .item .memo{
		font-size: 14px;
		line-height: 22px;
	}

	footer .memo .info{
		flex-wrap: wrap;
	}

	footer .memo .info span:nth-child(2){
		border-right: 0;
		padding-right: 0;
		margin-right: 0;
	}

	footer .memo .info span:nth-child(3){
		width: 100%;
		border-right: 0;
		padding-top: 10px;
		padding-right: 0;
	}

	footer .detail .extra{
		flex-wrap: wrap;
	}

	footer .detail .extra .item{
		width: 100%;
		text-align: center;
	}

	footer .detail .extra .item:last-child{
		padding-top: 10px;
	}

}

@media (max-width: 480px) {
}

/*小於等於414*/
@media (max-width: 414px) {
}

/*小於等於350*/
@media (max-width: 350px) {
}