@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: #FFF;
	/*overflow-x: hidden;*/
}

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

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

.wrap{
	position: relative;
	width: 100%;
	height: auto;
	overflow-x: hidden;
}

.wrap.scroll{
	padding-top: 82px;
}

img{
	display: block;
}

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

.sendbtnhide{
	display: none !important;
}

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

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

.container-base{
	display: block;
	max-width: calc(1190px + (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: #f7f6f0;

	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 *****/

.global-bg{
	position: absolute;
	width: 2253px;
}

.global-bg.g1{
	top: 800px;
	left: calc(50% - 2030px);
}

.global-bg.g2{
	top: 2400px;
	left: calc(50% + 350px);
}

.global-bg.g3{
	top: 3900px;
	left: calc(50% - 2150px);
}

.global-bg.g4{
	top: 5400px;
	left: calc(50% + 380px);
}

header{
	position: absolute;
	display: flex;
	width: 100%;

	top: 0;
	left: 0;
  
  padding: 15px 0px;

	/*
	background-image: -webkit-linear-gradient(to bottom, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0));
  background-image: -o-linear-gradient(to bottom, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0));
  background-image: -moz-linear-gradient(to bottom, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0));
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0));
	*/

	z-index: 10;
}

.wrap.scroll header{
	position: fixed;

	padding: 10px 0;

	top: 0;
	left: 0;

	background: #FFF;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 25px 20px -20px;

	animation-name: headermove;
  animation-duration: 0.25s;
  animation-delay: 0s;
}

@keyframes headermove {
  0%   {top: -50px;}
  100%   {top: 0px; }
}

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

header .collection .logo{
	display: inline-block;
	width: 220px;

	padding-top: 20px;
}

.wrap.scroll header .collection .logo{
	padding-top: 0;
}

header .collection .logo img.white{
	display: block;
}

header .collection .logo img.color{
	display: none;
}

.wrap.scroll header .collection .logo img.white{
	display: none;
}

.wrap.scroll header .collection .logo img.color{
	display: block;
}

header .collection .logo span{
	position: relative;
	display: flex;
	width: 100%;
	margin-top: 10px;
	padding-left: 26px;
	padding-right: 26px;
}

header .collection .logo span:before{
	content: "";
	position: absolute;
	width: 20px;
	height: 1px;
	margin-left: 5px;
	top: 50%;
	left: 0;

	transform: translateY(-50%);
	background: #333;
}

header .collection .logo span:after{
	content: "";
	position: absolute;
	width: 20px;
	height: 1px;
	margin-right: 5px;
	top: 50%;
	right: 0;

	transform: translateY(-50%);
	background: #333;
}

header .collection .logo h1{
	display: inline-block;
	width: 100%;
	margin: 0;
	font-size: 18px;
	font-weight: normal;
	letter-spacing: 2px;
	text-align: center;

	color: #333;
}


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

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;

	padding: 0 0 0 15px;
}

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

	padding: 0 20px;

	font-size: 20px;
	font-weight: 500;
	text-decoration: none;

	color: #2c2e2e;
	
	letter-spacing: 0;
}

header .collection nav ul li a:hover, header .collection nav ul li a.chs{
	color: #007ABB;
}

header .collection nav ul li a:hover:before, header .collection nav ul li a.chs:before{
	content: "";
	position: absolute;
	width: 130px;
	height: 19px;
	bottom: -8px;
	left: 50%;
	transform: translateX(-50%);
	background: url(../images/nav-chs-over-bg.png);
	background-size: 130px 19px;
	background-repeat: no-repeat;
	background-position: center center;

	z-index: -1;
}

header .collection .switch{
	display: none;
	flex: 1;
	text-align: right;
}

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

	background: url(../images/switch-menu.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center center;
}

header .collection .switch.open a{

	background: url(../images/switch-close.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center center;
}

section.kv{
	position: relative;
	width: 100%;
}

section.kv .theater{
	position: relative;
	width: 100%;
	height: 100vh;
	min-height: 900px;

	background: #92C865;
}

section.kv .theater .object{
	position: absolute;

	z-index: 3;
}

section.kv .theater .object.bg-1{
	width: 320px;
	top: 50%;
	left: -180px;

	transform: translateY(-50%);

	z-index: 1;
}

section.kv .theater .object.bg-2{
	width: 212px;
	top: 50%;
	right: 0;
	transform: translateY(-50%);

	z-index: 1;
}

section.kv .theater .object.bg-3{
	width: 160px;
	top: 38%;
	right: 100px;

	z-index: 1;
}

section.kv .theater .object.bg-4{
	width: 706px;
	top: -140px;
	left: calc(50% - 280px);

	z-index: 1;
}

section.kv .theater .object.bg-5{
	width: 420px;
	top: 0px;
	right: 0;

	z-index: 5;
}

section.kv .theater .object.pineapple{
	width: 111px;
	top: calc(50% - 220px);
	left: calc(50% + 460px);
}

section.kv .theater .object.paperplane{
	width: 100px;
	top: calc(50% - 300px);
	left: calc(50% - 800px);
}

section.kv .theater .object.map{
	width: 300px;
	bottom: 150px;
	left: calc(50% + 400px);
}

section.kv .theater .object.lighthouse{
	width: 100px;
	top: calc(50% + 120px);
	left: calc(50% + 300px);
}

section.kv .theater .object.people{
	width: 740px;
	left: calc(50% - 960px);
	bottom: 140px;
	z-index: 1;
}


section.kv .theater .object.role{
	top: 50%;
	left: 50%;

	transform: translate(-50%, -70%);
	z-index: 3;
}

section.kv .theater .object.role .highlight{
	position: relative;
	display: block;
	width: 520px;
	height: 118px;

	padding-top: 75px;
	padding-left: 40px;

	margin: 0 100px 0 auto;

	font-size: 18px;
	font-weight: 500;

	color: #000;

	letter-spacing: 0;

	background: url(../images/kv_illustration_object_highlight.png);
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: left center;
}

section.kv .theater .object.role .main{
	position: relative;
	width: 917px;
	z-index: 2;
}

section.kv .theater .object.role .main .rsfull{
	width: 100% !important;
	height: auto !important;
}

section.kv .theater .object.role ul.business-line{
	position: relative;
	display: flex;

	margin: -70px 0 0 0;

	padding: 0px 0 0 110px;

	list-style: none;
}

section.kv .theater .object.role ul.business-line li{
	font-size: 22px;
	font-weight: 500;

	color: #FFF;
}

section.kv .theater .object.role ul.business-line li:after{
	content: "╳";

	padding: 0 2px;

	font-size: 18px;
}

section.kv .theater .object.role ul.business-line li:last-child:after{
	content: "";
}

section.kv .theater .object.role ul.intro{
	position: relative;
	display: block;
	width: 100%;

	margin: 30px auto 0 110px;
	padding: 0;

	list-style: none;
}

section.kv .theater .object.role ul.intro li{
	display: block;
	width: 100%;

	padding-left: 40px;
	padding-bottom: 10px;
	background: url(../images/kv_illustration_object_check.png);
	background-size: 32px 32px;
	background-repeat: no-repeat;
	background-position: left top;

	font-size: 20px;
	font-weight: 500;
	color: #000;
	line-height: 26px;
	letter-spacing: 2px;
}

section.kv .theater .object.role ul.intro li span.point{
	display: inline-block;
	padding: 0 5px;
	font-size: 24px;
	font-weight: bold;
	line-height: 32px;
	color: #E36C8C;
}

section.kv .theater .object.role .btn-group{
	display: flex;
	width: 100%;

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

	padding-top: 20px;
}

section.kv .theater .object.role .btn-group a{
	display: flex;
	width: 180px;
	height: 76px;

	padding-top: 10px;
	margin: 0 20px;

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

	font-size: 22px;
	font-weight: bold;
	color: #FFF;
	text-decoration: none;
}

section.kv .theater .object.role .btn-group a:hover{
	color: #FFF;
	text-decoration: none;
}

section.kv .theater .object.role .btn-group a.btn1{
	background: url(../images/btn_style_1.svg);
	background-size: 180px 76px;
	background-repeat: no-repeat;
	background-position: center center;
}

section.kv .theater .object.role .btn-group a.btn2{
	background: url(../images/btn_style_2.svg);
	background-size: 180px 76px;
	background-repeat: no-repeat;
	background-position: center center;
}

section.kv .wave{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 2;
}

section.kv .wave .area{
	width: 100%;
	padding-bottom: 15px;
	background: #FFF;
}

section.kv .wave .area .group{
	display: flex;
	flex-wrap: wrap;

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

section.kv .wave .area .group .item{
	text-align: center;
	padding: 0 30px;
}

section.kv .wave .area .group .item span.count{
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 90px;
	min-width: 110px;

	font-size: 28px;
	font-weight: bold;
	letter-spacing: 0;

	color: #000;
}

section.kv .wave .area .group .item.i1 span.count{
	background: url(../images/area_item_1.png);
	background-size: 110px auto;
	background-repeat: no-repeat;
	background-position: center center;
}

section.kv .wave .area .group .item.i2 span.count{
	background: url(../images/area_item_2.png);
	background-size: 110px auto;
	background-repeat: no-repeat;
	background-position: center center;
}

section.kv .wave .area .group .item.i3 span.count{
	background: url(../images/area_item_3.png);
	background-size: 110px auto;
	background-repeat: no-repeat;
	background-position: center center;
}

section.kv .wave .area .group .item.i4 span.count{
	font-size: 62px;
	color: #FD4C83;
}

section.kv .wave .area .group .item .detail{
	display: inline-block;
	text-align: center;
	padding-top: 10px;

	font-size: 16px;
	font-weight: 500;
	color: #000;
}

.head-title{
	display: block;
	width: 316px;
	min-height: 64px;

	margin: 0 auto;

	text-align: center;

	font-size: 38px;
	font-weight: bold;

	background: url(../images/title_bg.svg);
	background-size: 100% auto !important;
	background-repeat: no-repeat !important;
	background-position: top 10px center !important;
}

.head-title .extra{
	position: relative;
	display: inline-block;
	margin-top: 25px;
	padding: 0 50px;
	font-size: 16px;
	font-weight: 300;

	color: #666666;
}

.head-title .extra:before{
	content: "";
	position: absolute;

	width: 30px;
	height: 1px;

	top: 50%;
	left: 0;

	transform: translateY(-50%);

	background-color: #666666;
}

.head-title .extra:after{
	content: "";
	position: absolute;

	width: 30px;
	height: 1px;

	top: 50%;
	right: 0;

	transform: translateY(-50%);

	background-color: #666666;
}

section.about{
	position: relative;
	padding: 120px 0;

	overflow: hidden;
}

section.about:before{
	content: "";
	position: absolute;

	width: 396px;
	height: 396px;

	top: 20%;
	left: 0%;

	transform: translateX(-30%);

	background: url(../images/about_left_bg.svg);
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center center;

	z-index: -1;
}

section.about:after{
	content: "";
	position: absolute;

	width: 320px;
	height: 320px;

	bottom: 10%;
	right: 0%;

	transform: translateX(30%);

	background: url(../images/about_right_bg.svg);
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center center;

	z-index: -1;
}




section.about .summary{
	position: relative;
	display: block;

	padding-top: 60px;

	font-size: 32px;
	font-weight: 500;
	letter-spacing: 0;

	text-align: center;
}

section.about .summary span.extra{
	position: relative;
	display: block;

	padding-top: 15px;

	font-size: 24px;
	letter-spacing: 0;
	color: #9B9B9B;

	text-align: center;
}

section.about .viewpoint{
	display: flex;
	max-width: 80%;
	margin: 0 auto;
	padding-top: 60px;
	align-items: center;
}

section.about .viewpoint .cover{
	width: 130px;
}

section.about .viewpoint .info{
	flex: 1;
	padding-left: 30px;
}

section.about .viewpoint .info .pilot{
	display: flex;
	width: 100%;

	padding-bottom: 10px;

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

section.about .viewpoint .info .pilot span.alias{
	display: inline-block;

	padding: 5px 10px;

	font-size: 20px;
	font-weight: 500;

	color: #FFF;

	border-radius: 30px;
	background-color: #9ACADB;
}

section.about .viewpoint .info .pilot ul{
	display: flex;
	position: relative;
	flex: 1;

	list-style: none;
	margin: 0;
	padding: 10px 0 0px 36px;
}

section.about .viewpoint .info .pilot ul:before{
	content: "";
	position: absolute;
	display: inline-block;
	top: -5px;
	left: 10px;

	width: 26px;
	height: 26px;

	background: url(../images/about_hashtag_icon.svg);
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center center;
}

section.about .viewpoint .info .pilot ul li{
	padding: 0 5px;
	letter-spacing: 0;
}

section.about .viewpoint .info .pilot ul li a{
	color: #9B9B9B;
	text-decoration: none;
}

section.about .viewpoint .info .pilot ul li a:hover{
	color: #1C1C1C;
	text-decoration: none;
}

section.about .viewpoint .info .pilot ul li:before{
	content: "#";
	padding-right: 3px;
	color: #9B9B9B;
}

section.about .viewpoint .info .detail{
	display: block;

	padding: 15px;
	border: 3px dashed #ADC3B8;
	border-radius: 15px;

	text-align: justify;

	font-size: 20px;
	font-weight: 500;
	line-height: 1.6;
}

section.about .intro{
	display: block;
	display: flex;

	align-items: center;

	padding-top: 60px;
}

section.about .intro .cover{
	width: 320px;
}

section.about .intro .detail{
	flex: 1;
	padding-left: 30px;

	font-size: 18px;
	line-height: 1.6;
	letter-spacing: 0;
	text-align: justify;
	color: #000;
}

section.about .intro .detail span.highlight{
	font-weight: bold;
	color: #3F8B00;
}









.sticky{
	position: fixed;
	width: 100px;
	bottom: 2%;
	right: 15px;

	z-index: 5;
}

.wrap.scroll .sticky{
	bottom: 15%;
}

footer{
	padding: 70px 0 30px 0;
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: 0;
	color: #333333;
	text-align: justify;
}

footer span.title{
	display: inline-block;
	font-size: 18px;
	font-weight: bold;
}

footer span.underline{
	text-decoration: underline;
}

footer span.highlight{
	color: #1e9bd7 !important;
}

footer span.focus{
	font-weight: bold;
	color: #000;
}

footer span.extra{
	display: inline-block;
	font-size: 12px;
}


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


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

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

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

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

	header .collection .logo{
		width: 180px;
		padding-top: 0px;
	}

	header .collection .logo span{
		padding-left: 20px;
		padding-right: 20px;
		margin-top: 5px;
	}

	header .collection .logo span:before{
		width: 15px;
		height: 1px;
		margin-left: 2px;
	}

	header .collection .logo span:after{
		width: 15px;
		margin-right: 2px;
	}

	header .collection .logo h1{
		font-size: 16px;
		letter-spacing: 3px;
	}

	section.kv .theater{
		min-height: 680px;
	}

	section.kv .theater .object.bg-1{
		width: calc(320px * 0.65);
		left: -110px;
	}

	section.kv .theater .object.bg-2{
		width: calc(212px * 0.65);
		left: calc(50% + 580px);
		right: auto;
	}

	section.kv .theater .object.bg-3{
		width: calc(160px * 0.65);
		left: calc(50% + 540px);
		right: auto;
	}

	section.kv .theater .object.bg-4{
		width: calc(706px * 0.65);
		top: -100px;
		left: calc(50% - 220px);
	}

	section.kv .theater .object.bg-5{
		width: calc(420px * 0.65);
		right: 0;
	}

	section.kv .theater .object.pineapple{
		width: calc(111px * 0.65);
		top: calc(50% - 220px);
		left: calc(50% + 460px);
	}

	section.kv .theater .object.paperplane{
		width: calc(100px * 0.65);
		top: calc(50% - 240px);
		left: calc(50% - 560px);
	}

	section.kv .theater .object.map{
		width: calc(300px * 0.65);
		bottom: 130px;
		left: calc(50% + 360px);
	}

	section.kv .theater .object.lighthouse{
		width: calc(100px * 0.65);
		top: calc(50% + 60px);
		left: calc(50% + 250px);
	}

	section.kv .theater .object.people{
		width: calc(740px * 0.65);
		left: calc(50% - 680px);
		bottom: 120px;
	}

	section.kv .theater .object.role{
		transform: translate(-50%, -70%);
	}

	section.kv .theater .object.role .highlight{
		width: calc(520px * 0.75);
		height: calc(118px * 0.75);

		padding-top: 56px;
		padding-left: 20px;

		margin: 0 80px 0 auto;

		font-size: 14px;
	}

	section.kv .theater .object.role .main{
		width: calc(917px * 0.75);
	}

	section.kv .theater .object.role ul.business-line{

		margin: -50px 0 0 0;

		padding: 0px 0 0 86px;
	}

	section.kv .theater .object.role ul.business-line li{
		font-size: 16px;
		letter-spacing: 2px;
	}

	section.kv .theater .object.role ul.business-line li:after{
		font-size: 13px;
	}

	section.kv .theater .object.role ul.intro{
		margin: 15px auto 0 86px;
	}

	section.kv .theater .object.role ul.intro li{

		padding-left: 26px;
		padding-bottom: 8px;
		background: url(../images/kv_illustration_object_check.png);
		background-size: 20px 20px;
		background-repeat: no-repeat;
		background-position: left top;

		font-size: 16px;
		line-height: 20px;
		letter-spacing: 0px;
	}

	section.kv .theater .object.role ul.intro li span.point{
		padding: 0 3px;
		font-size: 20px;
		line-height: 20px;
	}

	section.kv .theater .object.role .btn-group{
		padding-top: 10px;
	}

	section.kv .theater .object.role .btn-group a{
		width: calc(180px * 0.7);
		height: calc(76px * 0.7);

		padding-top: 10px;
		margin: 0 20px;

		font-size: 18px;
	}

	section.kv .theater .object.role .btn-group a.btn1{
		background: url(../images/btn_style_1.svg);
		background-size: calc(180px * 0.7) calc(180px * 0.7);
		background-repeat: no-repeat;
		background-position: center center;
	}

	section.kv .theater .object.role .btn-group a.btn2{
		background: url(../images/btn_style_2.svg);
		background-size: calc(180px * 0.7) calc(180px * 0.7);
		background-repeat: no-repeat;
		background-position: center center;
	}

	section.kv .wave{
		width: 1680px;
		margin: 0 calc(50% - 840px);
	}

	section.kv .wave .area .group .item span.count{
		min-height: 76px;

		font-size: 26px;
		min-width: 86px;
	}

	section.kv .wave .area .group .item.i1 span.count{
		background-size: 86px auto;
	}

	section.kv .wave .area .group .item.i2 span.count{
		background-size: 86px auto;
	}

	section.kv .wave .area .group .item.i3 span.count{
		background-size: 86px auto;
	}

	section.kv .wave .area .group .item.i4 span.count{
		font-size: 58px;
	}

	section.kv .wave .area .group .item .detail{
		padding-top: 5px;

		font-size: 14px;
		letter-spacing: 0;
	}
	
}

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

}

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

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

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

	section.kv .theater{
		min-height: 610px;
	}

	section.kv .theater .object.bg-1{
		width: calc(320px * 0.5);
		left: -86px;
	}

	section.kv .theater .object.bg-2{
		width: calc(212px * 0.5);
		left: calc(50% + 420px);
		right: auto;
	}

	section.kv .theater .object.bg-3{
		width: calc(160px * 0.5);
		left: calc(50% + 410px);
		right: auto;
	}

	section.kv .theater .object.bg-4{
		width: calc(706px * 0.5);
		top: -80px;
		left: calc(50% - 140px);
	}

	section.kv .theater .object.bg-5{
		width: calc(420px * 0.5);
		right: 0;
	}

	section.kv .theater .object.pineapple{
		width: calc(111px * 0.5);
		top: calc(50% - 180px);
		left: calc(50% + 320px);
	}

	section.kv .theater .object.paperplane{
		width: calc(100px * 0.5);
		top: calc(50% - 180px);
		left: calc(50% - 420px);
	}

	section.kv .theater .object.map{
		width: calc(300px * 0.5);
		bottom: 100px;
		left: calc(50% + 274px);
	}

	section.kv .theater .object.lighthouse{
		width: calc(100px * 0.5);
		top: calc(50% + 70px);
		left: calc(50% + 180px);
	}

	section.kv .theater .object.people{
		width: calc(740px * 0.5);
		left: calc(50% - 520px);
		bottom: 100px;
	}

	section.kv .theater .object.role{
		transform: translate(-50%, -70%);
	}

	section.kv .theater .object.role .highlight{

		margin: 0 70px 0 auto;
	}

	section.kv .theater .object.role .main{
		width: calc(917px * 0.7);
	}

	section.kv .theater .object.role ul.business-line{

		margin: -50px 0 0 0;

		padding: 0px 0 0 84px;
	}

	section.kv .theater .object.role ul.business-line li{

		letter-spacing: 0px;
	}

	section.kv .theater .object.role ul.intro li{

		font-size: 14px;
		line-height: 18px;
		letter-spacing: 1px;
	}

	section.kv .theater .object.role ul.intro li span.point{
		padding: 0 3px;
		font-size: 18px;
	}

	section.kv .theater .object.role .btn-group a{
		width: calc(180px * 0.65);
		height: calc(76px * 0.65);

		font-size: 16px;
	}

	section.kv .theater .object.role .btn-group a.btn1{
		background: url(../images/btn_style_1.svg);
		background-size: calc(180px * 0.65) calc(180px * 0.65);
		background-repeat: no-repeat;
		background-position: center center;
	}

	section.kv .theater .object.role .btn-group a.btn2{
		background: url(../images/btn_style_2.svg);
		background-size: calc(180px * 0.65) calc(180px * 0.65);
		background-repeat: no-repeat;
		background-position: center center;
	}

	section.kv .wave{
		width: 1200px;
		margin: 0 calc(50% - 600px);
	}

	section.kv .wave .area .group .item span.count{
		min-height: 66px;

		font-size: 22px;
		min-width: 76px;
	}

	section.kv .wave .area .group .item.i1 span.count{
		background-size: 76px auto;
	}

	section.kv .wave .area .group .item.i2 span.count{
		background-size: 76px auto;
	}

	section.kv .wave .area .group .item.i3 span.count{
		background-size: 76px auto;
	}

	section.kv .wave .area .group .item.i4 span.count{
		font-size: 46px;
	}

	section.about{
		padding: 80px 0;
	}

	.head-title{
		width: 260px;
		font-size: 32px;
	}

	.head-title .extra{
		margin-top: 15px;
		font-size: 14px;
	}

	section.about:before{
		top: 10%;
		width: 200px;
		height: 200px;
	}

	section.about:after{
		width: 200px;
		height: 200px;
		bottom: 0;
	}

	section.about .summary{
		padding-top: 40px;
		font-size: 26px;
	}

	section.about .summary span.extra{
		padding-top: 10px;
		font-size: 20px;
	}

	section.about .viewpoint{
		max-width: 100%;
		padding-top: 40px;
	}

	section.about .viewpoint .cover{
		width: 110px;
	}

	section.about .viewpoint .info{
		padding-left: 15px;
	}

	section.about .viewpoint .info .pilot span.alias{
		font-size: 18px;
	}

	section.about .viewpoint .info .detail{
		padding: 10px;
		font-size: 18px;
		letter-spacing: 0;
	}

	section.about .intro{
		padding-top: 40px;
	}

	section.about .intro .cover{
		width: 220px;
	}

	section.about .intro .detail{
		padding-left: 20px;
		font-size: 16px;
		letter-spacing: 0;
	}
}

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

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

	
}

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

	section.kv .theater{
		min-height: 800px;
	}

	section.kv .theater .object.people{
		left: calc(50% - 480px);
	}

	section.kv .theater .object.paperplane{
		top: calc(50% - 220px);
		left: calc(50% - 320px);
	}

	section.kv .theater .object.lighthouse{
		top: calc(50% + 30px);
		left: calc(50% + 160px);
	}

	section.kv .theater .object.map{
		left: calc(50% + 204px);
	}


	section.kv .wave .area .group .item{
		padding: 0 15px;
	}

	section.about:after{
		display: none;
	}

	section.about .intro{
		flex-wrap: wrap;
		flex-direction: column-reverse;
	}

	section.about .intro .cover{
		width: 80%;
	}

	section.about .intro .detail{
		flex: 1;
		padding-left: 0;
		padding-bottom: 30px;
	}

	.sticky{
		width: 80px;
	}

}


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

	header{
		padding: 10px 0;
	}

	header .collection .logo{
		width: 140px;
	}

	header .collection .logo span{
		padding-left: 10px;
		padding-right: 10px;
	}

	header .collection .logo span:before{
		width: 10px;
	}

	header .collection .logo span:after{
		width: 10px;
	}

	header .collection .logo h1{
		font-size: 14px;
		letter-spacing: 1px;
	}

	section.kv .theater{
		min-height: auto;
		padding-bottom: 950px;
	}

	section.kv .theater .object.bg-1{
		width: calc(320px * 0.3);
		top: auto;
		bottom: 160px;
		left: -50px;
	}

	section.kv .theater .object.bg-2{
		width: calc(212px * 0.4);
		left: auto;
		right: 0;
		top: auto;
		bottom: 290px;
	}

	section.kv .theater .object.bg-3{
		width: calc(160px * 0.3);
		left: calc(50% + 80px);
		top: auto;
		bottom: 390px;
	}

	section.kv .theater .object.bg-4{
		display: none;
	}

	section.kv .theater .object.bg-5{
		display: none;
	}

	section.kv .theater .object.paperplane{
		top: auto;
		bottom: 380px;
		left: calc(50% - 170px);
	}

	section.kv .theater .object.pineapple{
		top: auto;
		bottom: 340px;
		left: calc(50% - 10px);
	}

	section.kv .theater .object.lighthouse{
		left: calc(50% + 120px);
		top: auto;
		bottom: 260px;
	}

	section.kv .theater .object.map{
		display: none;
	}

	section.kv .theater .object.people{
		width: calc(740px * 0.35);
		left: calc(50% - 200px);

		bottom: 240px;
	}

	section.kv .theater .object.role{
		top: 60px;
		left: 0;
		transform: none;
	}

	section.kv .theater .object.role .highlight{
		width: calc(520px * 0.65);
		height: calc(118px * 0.65);
		padding-top: 42px;
		padding-left: 0px;
		margin: 0 auto;
		font-size: 11px;
	}

	section.kv .theater .object.role .main{
		width: 100%;
	}

	section.kv .theater .object.role ul.business-line{
		display: none;
	}

	section.kv .theater .object.role ul.intro{
		width: 100%;
		margin: 0 auto;
		padding: 0 15px;
	}

	section.kv .theater .object.role ul.intro li span.point{
		font-size: 16px;
		letter-spacing: 0;
	}

	section.kv .theater .object.role .btn-group a{
		width: calc(180px * 0.75);
		height: calc(76px * 0.75);

		margin: 0 10px;
		font-size: 18px;
	}

	section.kv .theater .object.role .btn-group a.btn1{
		background-size: calc(180px * 0.75) calc(180px * 0.75);
	}

	section.kv .theater .object.role .btn-group a.btn2{
		background-size: calc(180px * 0.75) calc(180px * 0.75);
	}

	section.kv .wave{
		width: 100%;
		margin: 0 auto;
	}

	section.kv .wave .area .group{
	}

	section.kv .wave .area .group .item{
		width: 50%;
		padding: 15px;
	}

	.head-title{
		width: 200px;
		font-size: 26px;
	}

	.head-title .extra{
		font-size: 13px;
	}

	section.about:before{
		top: 6%;
		transform: translateX(-50%);
	}

	section.about .summary{
		padding-top: 20px;
		font-size: 18px;
	}

	section.about .summary span.extra{
		padding-top: 5px;
		font-size: 14px;
	}

	section.about .viewpoint{
		padding-top: 20px;
	}

	section.about .viewpoint .cover{
		width: 60px;
	}

	section.about .viewpoint .info{
		padding-left: 10px;
	}

	section.about .viewpoint .info .pilot span.alias{
		font-size: 14px;
	}

	section.about .viewpoint .info .pilot ul{
		padding: 5px 0 0px 20px;
	}

	section.about .viewpoint .info .pilot ul:before{
		left: 2px;
		width: 18px;
		height: 18px;
	}

	section.about .viewpoint .info .pilot ul li{
		padding: 0 2px;
		font-size: 13px;
		letter-spacing: 0;
	}

	section.about .viewpoint .info .pilot ul li:before{
		padding-right: 0;
	}

	section.about .viewpoint .info .detail{
		font-size: 14px;
		border: 2px dashed #ADC3B8;
	}

	section.about .intro .detail{
		font-size: 14px;
	}

	.sticky, .wrap.scroll .sticky{
		width: 68px;
		bottom: 5%;
	}

}

@media (max-width: 480px) {

}

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

/*小於等於390*/
@media (max-width: 390px) {
	section.about .summary{
		font-size: 16px;
	}
}

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