@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;
	max-width: 2560px;
	margin: 0 auto;
	overflow-x: hidden;
}

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

img{
	display: block;
}

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

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

.container-spec{
	display: block;
	width: 100%;
	max-width: calc(1170px + (15px * 2));
	padding: 0 15px;
	margin: 0 auto;
}

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

	margin: 0 auto;
}

.cursor-pointer{
	cursor: pointer;
}

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

	top: 0;
	left: 0;
  
  padding: 20px 0px;

	z-index: 10;
}

.wrap.scroll header{
	position: fixed;
	top: 0;
	left: 0;

	padding: 25px 0;

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

	background: #FFF;

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

header .pioneer{
	position: absolute;
	width: 110px;

	top: 20px;
	left: 20px;
	z-index: 3;
}

.wrap.scroll header .pioneer{
	width: 110px;
	top: 50%;
	transform: translateY(-50%);
}

header .pioneer a{
	display: inline-block;
}

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

header .collection .logo{
	display: none;
	width: 120px;
}

.wrap.scroll header .collection .logo{

}

header .collection nav{
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	padding: 0px;
}

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

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

	padding: 0 0 0 0;
}

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

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

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

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

header .collection nav ul li ul.social{
	display: flex;
}

header .collection nav ul li ul.social li{
	padding-left: 5px;
}

header .collection nav ul li ul.social li:first-child{
	padding-left: 0;
}

header .collection nav ul li ul.social li a{
	width: 42px;
}

/*
.wrap.scroll header .collection a{
	color: #6c2e86;
}


header .collection nav ul li a:hover, header .collection nav ul li a.chs, .wrap.scroll header .collection nav ul li a:hover, .wrap.scroll header .collection nav ul li a.chs{
	color: #d2acdd;
}
*/

.wrap.scroll header .collection a{
	/*color: #9d58b5;*/
	color: #5e237e;
}

.wrap.scroll header .collection nav ul li a:hover, .wrap.scroll header .collection nav ul li a.chs{
	/*color: #5e237e;*/
	color: #b9306b;
}


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;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;

	min-height: 100vh;

	padding-top: 70px;

	background: url(../images/kv_bg.png);
	background-repeat: repeat-x;
	background-size: auto 100%;
	background-position: center top;
}

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

	margin-bottom: -110px;
}

section.kv .movie video{
	border-radius: 15px;
}

section.kv .movie .theather{
	display: block;
	width: 100%;
	margin: 0 auto;
}

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

section.kv .logistics .area{
	position: relative;
	width: 100%;

	z-index: 3;
}

section.kv .logistics .area .slogan{
	position: absolute;
	width: calc(576px * 0.95);
	left: calc(50% - 698px);

	top: -136px;
	z-index: 3;
}

section.kv .logistics .area .house{
	position: absolute;
	width: calc(367px * 0.95);
	left: calc(50% + 348px);

	top: -82px;

	z-index: 1;
}

section.kv .logistics .area .mountain{
	position: relative;
	width: 2560px;
	left: calc(50% - 1280px);

	z-index: 2;
}

section.kv .logistics .area a.movbtn{
	position: absolute;
	display: inline-flex;
	align-items: center;

	top: 110px;
	left: calc(50% + 360px);

	background: #f0c528;
	padding: 8px 20px 8px 10px;
	border-radius: 50px;
	font-size: 26px;
	font-weight: 500;
	letter-spacing: 0;
	color: #FFF;

	text-decoration: none;

	z-index: 3;
}

section.kv .logistics .area a.movbtn:hover{
	text-decoration: none;
	background: #c03e88;
}

section.kv .logistics .area a.movbtn span{
	display: inline-flex;

	width: 50px;
	height: 50px;

	margin-right: 10px;

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

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

	background: #e29806;
	border-radius: 50%;
}

section.kv .kv-main-mobile{
	display: none;
}

/*
main{
	display: block;
	width: 100%;
	
	background-color: #f4d7eb;
	background-image: url(../images/main_bg.png);
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center top;

	overflow-x: hidden;
	overflow-y: hidden;
}
*/

.mainblock{
	display: block;
	width: 100%;

	background-color: #f4d7eb;
	background-image: url(../images/main_bg.png);
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center top;
}

section.care{
	position: relative;
	display: block;
	padding: 50px 0 100px 0;
	z-index: 3;
}

section.care .leftcloud{
	position: absolute;
	top: 200px;
	left: calc(50% - 860px);

	width: 245px;
}

section.care .rightcloud{
	position: absolute;
	top: -25px;
	left: calc(50% + 760px);

	width: 223px;
}


section.care .pannel{
	position: relative;
	padding: 100px 50px 60px 50px;
	margin: 95px 0 30px 0;

	width: 100%;
	border-radius: 30px;
	border: 3px solid #eeb3c8;

	text-align: center;

	font-size: 22px;
	line-height: 38px;
	font-weight: 500;
	color: #000;

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

section.care .pannel span.highlight{
	font-size: 26px;
	font-weight: bold;
	color: #9d58b5;
}

section.care .pannel .title{
	position: absolute;
	width: 978px;

	top: -95px;
	left: 50%;
	transform: translateX(-50%);
}

section.care .pannel .leftpeople{
	position: absolute;
	width: 186px;

	bottom: -30px;
	left: 40px;
}

section.care .pannel .rightpeople{
	position: absolute;
	width: 250px;

	bottom: -30px;
	right: 10px;
}

section.sport{
	position: relative;
	display: block;
	padding: 50px 0 100px 0;
}

section.sport .leftarrow{
	position: absolute;
	width: 370px;
	top: 100px;
	left: calc(50% - 660px);
}

section.sport .rightarrow{
	position: absolute;
	width: 227px;
	top: 250px;
	left: calc(50% + 400px);
}

section.sport .pannel{
	position: relative;
	padding: 100px 50px 60px 50px;
	margin: 160px 0 50px 0;

	width: 100%;
	border-radius: 30px;

	text-align: center;

	font-size: 22px;
	line-height: 38px;
	color: #000;

	background: #FFF;

	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

section.sport .pannel .title{
	position: absolute;
	width: 874px;

	top: -160px;
	left: 0;
}

section.sport .pannel .people{
	position: absolute;
	width: 212px;

	top: -120px;
	right: 30px;
}

section.sport .pannel .intro{
	display: flex;
	align-items: center;
}

section.sport .pannel .intro .summary{
	width: 45%;
}

section.sport .pannel .intro .summary .item{
	display: flex;
	align-items: center;

	padding-bottom: 20px;
}

section.sport .pannel .intro .summary .item:last-child{
	padding-bottom: 0px;
}

section.sport .pannel .intro .summary .item .cover{
	width: 108px;
}

section.sport .pannel .intro .summary .item .detail{
	flex: 1;
	padding-left: 15px;
	text-align: left;
}

section.sport .pannel .intro .summary .item .detail span.alias{
	font-size: 26px;
	font-weight: bold;

	color: #5e237e;
}

section.sport .pannel .intro .summary .item .detail .memo{
	font-size: 22px;
	color: #333333;
}


section.sport .pannel .intro .movie{
	position: relative;
	flex: 1;
	margin-left: 15px;

	border-radius: 5px;
	border: 3px solid #f3c175;
}

section.sport .pannel .intro .movie .player{
	display: inline-block;
	width: 100%;

	padding-top: 56.25%;
}

section.sport .pannel .intro .movie .player iframe{
	position: absolute; 
	top: 0px; 
	right: 0px; 
	bottom: 0px; 
	left: 0px; 
	width: 100%; 
	height: 100%;
}

section.game{
	position: relative;
	display: block;
	padding: 50px 0 100px 0;
}

section.game .title{
	position: relative;
	width: 835px;

	padding-bottom: 30px;
}

section.game .leftgrassland{
	position: absolute;
	width: 1102px;

	left: calc(50% - 1260px);
	top: 460px;
}

section.game .rightball{
	position: absolute;
	width: 113px;

	left: calc(50% + 580px);
	top: 540px;
}

section.game .pannel{
	position: relative;
	display: flex;
	align-items: flex-start;

	flex-wrap: wrap;

	margin: 0 0 100px 0;
}

section.game .pannel .project{
	flex: 1;
}

section.game .pannel .project ul.menu{
	display: flex;
	justify-content: flex-start;
	padding: 0;
	margin: 0;
	list-style: none;
}

section.game .pannel .project ul.menu li{
	flex: 1;
}

section.game .pannel .project ul.menu li a{
	display: flex;

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

	width: 100%;
	padding: 15px 0px 10px 0;
	color: #333333;

	border-radius: 20px 20px 0 0;

	font-size: 22px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;

	letter-spacing: 0;
}

section.game .pannel .project ul.menu li a.chs{
	color: #1b2e8e;
	background: #FFF;
}

section.game .pannel .project ul.menu li a:hover{
	color: #1b2e8e;
}

section.game .pannel .project ul.menu li a span.count{
	font-size: 26px;
	font-style: italic;
}

section.game .pannel .project ul.menu li a:before{
	content: "";
	display: inline-block;
	width: 26px;
	height: 26px;

	margin-right: 5px;

	background-size: cover !important;
	background-repeat: no-repeat !important;
}


section.game .pannel .project ul.menu li a.i1:before{
	background: url(../images/game_menu_icon_1.png);
	
}

section.game .pannel .project ul.menu li a.i2:before{
	background: url(../images/game_menu_icon_2.png);
}

section.game .pannel .project ul.menu li a.i3:before{
	background: url(../images/game_menu_icon_3.png);
}

section.game .pannel .project ul.menu li a.chs:after{
	width: 1px;
	visibility: hidden;
}

section.game .pannel .project ul.menu li a span.alias{
	display: inline-block;
	padding-left: 10px;
	font-size: 26px;
}

section.game .pannel .project .item{
	display: none;
	padding: 30px 30px;
	border-radius: 30px;
	background: #FFF;

	border-radius: 30px;

	box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
	background: #FFF;
}

section.game .pannel .project .item.chs{
	display: block;
}

section.game .pannel .project .item.spec-noleftradius{
	border-radius: 0 20px 30px 20px;
}

section.game .pannel .project .item.spec-norightradius{
	border-radius: 30px 0px 30px 30px;
}

section.game .pannel .project .item .explan{
	display: block;

	font-size: 24px;
	font-weight: 500;
	color: #1b2e8e;
	letter-spacing: 0;
}

section.game .pannel .project .item .memo{
	display: block;
	padding-top: 20px;

	font-size: 22px;
	line-height: 1.6;
	color: #333333;
	letter-spacing: 0;
}

section.game .pannel .project .item .memo .nickname{
	display: block;
	padding-bottom: 5px;

	font-size: 26px;
	font-weight: bold;
	color: #1b2e8e;
	letter-spacing: 0;
}

section.game .pannel .album{
	display: block;
	width: 560px;
	padding-left: 10px;
}

section.game .pannel .album .item{
	display: none;
	flex-wrap: wrap;
	justify-content: space-between;
}

section.game .pannel .album .item.chs{
	display: flex;
}

section.game .pannel .album .item .genus{
	width: calc(50% - 5px);
	margin-bottom: 10px;
	padding-top: 36.25%;

	border-radius: 15px;
	border: 3px solid #FFF;

	background-repeat: no-repeat !important;
	background-size: cover !important;
	background-position: center center !important;
}

section.footprint{
	position: relative;
	display: block;
	padding: 50px 0 100px 0;
}

section.footprint .rightgrassland{
	position: absolute;
	width: 1231px;
	left: calc(50% + 130px);
	bottom: 100px;
}

section.footprint .pannel{
	position: relative;
	display: flex;
	flex-wrap: wrap;

	margin: 0 0 100px 0;
}

section.footprint .pannel .map{
	display: none;
	flex: 1;
	align-content: center;
}

section.footprint .pannel .map.chs{
	display: block;
	flex: 1;
	align-content: center;
}

section.footprint .pannel .information{
	display: block;
	width: 847px;
	padding-left: 10px;
}

section.footprint .pannel .information .title{
	display: block;
	width: 100%;
	padding-bottom: 30px;
}

section.footprint .pannel .information ul.menu{
	display: flex;
	flex-wrap: wrap;
	padding: 0px 0 30px 0;
	margin: 0;
	list-style: none;
}

section.footprint .pannel .information ul.menu li{
	padding-right: 10px;
}

section.footprint .pannel .information ul.menu li a{
	display: inline-block;

	padding: 10px 30px;
	
	border-radius: 30px;

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

	letter-spacing: 0;
	color: #333333;
	
	text-decoration: none;
	background: #f4f2f2;
}

section.footprint .pannel .information ul.menu li a:hover, section.footprint .pannel ul.menu li a.chs{
	background: #ce3f91;
	color: #FFF;

	text-decoration: none;
}

section.footprint .pannel .information .intro{
	display: block;
	color: #ca2e89;

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

	padding-bottom: 30px;
}

section.footprint .pannel .information .album{
	position: relative;
	display: none;
	color: #ca2e89;

	font-size: 22px;
	font-weight: 500;
}

section.footprint .pannel .information .album.chs{
	display: block;
}

section.footprint .pannel .information .album .group{
	position: relative;
	display: block;

	color: #ca2e89;

	font-size: 22px;
	font-weight: 500;
}

section.footprint .pannel .information .album .group .item{
	position: relative;
	display: inline-block;
	width: 100%;

	border-radius: 10px;
	border: 2px solid #ededed;

	padding-top: 75%;

	overflow: clip;

	background-repeat: no-repeat !important;
	background-size: cover !important;
	background-position: center center !important;
}

section.footprint .pannel .information .album .group .item .mask{
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0;

	padding: 10px;

	color: #FFF;

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

	background: rgba(0, 0, 0, 0.6);
}

section.footprint .pannel .information .album a.footprint_arrow_left{
	position: absolute;
	top: 50%;
	width: 27px;

	left: calc(-27px - 20px);

	transform: translateY(-100%);
}

section.footprint .pannel .information .album a.footprint_arrow_right{
	position: absolute;
	top: 50%;
	width: 27px;

	right: calc(-27px - 20px);

	transform: translateY(-100%);
}

section.footprint .pannel .information .album .group .item .mask span.area{
	display: inline-block;
	width: 100%;
}

section.footprint .pannel .information .album .group .item .mask span.location{
	display: inline-block;
	width: 100%;
	padding-top: 5px;
}

section.footprint .pannel .information .album .open-popup-footprint{
	display: none;
}

section.news{
	position: relative;
	display: block;
	padding: 50px 0 100px 0;
}

section.news .leftgrassland{
	position: absolute;
	width: 867px;
	left: calc(50% - 1130px);
	bottom: 60px;
}

section.news .pannel{
	position: relative;
	display: flex;
	flex-wrap: wrap;

	margin-bottom: 60px;
}

section.news .pannel .title{
	display: block;
	width: 354px;
	padding-bottom: 50px;
}

section.news .pannel .group{
	position: relative;
	display: flex;

	width: 100%;

	flex-wrap: wrap;

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

section.news .pannel .group .item{
	width: 100%;

	padding: 5px;

	border-radius: 10px;
	border: 2px solid #FFF;

	background: #FFF;

	box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

section.news .pannel .group .item .cover{
	width: 100%;
	padding-top: 56.25%;

	border-radius: 10px;

	background-size: cover !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
}

section.news .pannel .group .item span.alias{
	display: inline-block;
	width: 100%;
	min-height: 90px;

	padding: 15px 2px 0 2px;

	color: #040404;

	font-size: 22px;
	font-weight: 500;
	letter-spacing: 0;
}


section.news .pannel .group .item:hover span.alias{
	color: #9d58b5;
}

section.news .pannel .group .item span.date{
	display: inline-block;
	width: 100%;
	
	padding: 15px 2px 0 2px;

	color: #040404;

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

section.news .pannel .group a.news_arrow_left{
	position: absolute;
	top: 50%;
	width: 27px;

	left: calc(-27px - 20px);

	transform: translateY(-100%);
}

section.news .pannel .group a.news_arrow_right{
	position: absolute;
	top: 50%;
	width: 27px;

	right: calc(-27px - 20px);

	transform: translateY(-100%);
}

section.contact{
	position: relative;
	display: block;
	padding: 50px 0 50px 0;
	margin-bottom: 60px;
}

section.contact .leftcloud{
	position: absolute;
	width: 228px;
	left: calc(50% - 820px);
	bottom: 60px;
}

section.contact .rightcloud{
	position: absolute;
	width: 261px;
	left: calc(50% + 630px);
	bottom: 0px;
}

section.contact .pannel{
	position: relative;
	display: flex;
	flex-wrap: wrap;
}

section.contact .pannel .title{
	display: block;
	width: 347px;
	padding-bottom: 50px;
}

section.contact .pannel .detail{
	display: block;
	width: 100%;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.6;
	color: #000;

	text-align: center;
}

.sticky{
	position: fixed;
	display: none;
	width: 147px;
	top: 55%;
	right: 15px;

	z-index: 6;
}

.sticky.show{
	display: block;
}

.sticky a{
	display: inline-block;
	width: 100%;
	padding-bottom: 10px;
}

footer{
	display: block;
	width: 100%;
	padding: 50px 0 0 0;
	background-image: url(../images/footer_illustrator_bg.png);
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center bottom;
}

footer .pannel{
	position: relative;
	display: flex;
	flex-wrap: wrap;

	justify-content: center;

	padding-bottom: 200px;
}

footer .pannel .award{
	display: block;
	width: 833px;
	padding-bottom: 20px;
	margin: 0 auto
}

footer .pannel ul.info{
	display: flex;
	padding: 20px;
	border: 5px solid #5f1a83;
	border-radius: 50px;
	list-style: none;

	background: #FFF;
}

footer .pannel ul.info li{
	width: 50%;
}

footer .pannel ul.info li:first-child{
	border-right: 1px solid #5f1a83;
}

footer .pannel ul.info li span.alias{
	display: inline-block;
	width: 100%;

	padding-bottom: 10px;

	font-size: 18px;
	font-weight: 500;
	color: #5f1a83;
	letter-spacing: 0;

	text-align: center;
}

footer .pannel ul.info li span.email, footer .pannel ul.info li span.tel{
	display: inline-block;
	width: 100%;
	font-size: 18px;
	font-weight: bold;
	color: #5f1a83;
	letter-spacing: 0;

	text-align: center;
}

footer .pannel ul.info li span.email, footer .pannel ul.info li span.tel a{
	color: #5f1a83;
	text-decoration: none;
}

footer .pannel ul.info li span.tel{
	display: inline-block;
	width: 100%;
	font-size: 22px;
	font-weight: bold;
	color: #5f1a83;
	letter-spacing: 0;

	text-align: center;
}


footer .pannel .copyright{
	display: block;
	width: 100%;
	text-align: right;
	letter-spacing: 0;
	color: #FFF;
	padding-top: 50px;
}

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

}


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

	section.kv .logistics .area .mountain{
		width: 1920px;
		left: calc(50% - 960px);
	}

	section.kv .logistics .area .slogan{
		top: -150px;
	}

	section.kv .logistics .area .house{
		top: -100px;
	}

	.mainblock{
		background-color: #f4d7eb;
		background-image: url(../images/main_bg.png);
		background-repeat: no-repeat;
		background-size: 1920px auto;
		background-position: center top;
	}

	footer{
		background-image: url(../images/footer_illustrator_bg.png);
		background-repeat: no-repeat;
		background-size: 1920px auto;
		background-position: center bottom;
	}

}

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

/*小於等於1600*/
@media (max-width: 1600px) {
	
	.container-spec{
		max-width: calc(910px + (15px * 2));
	}

	.sticky{
		width: 100px;
	}

	
	header .collection nav ul li a{
		font-size: 22px;
	}

	header .collection nav ul li ul.social li a{
		width: 36px;
	}

	.wrap.scroll header .pioneer{
		width: 100px;
	}

	header .pioneer{
		width: 100px;
	}

	section.kv{
		padding-top: 65px;
	}

	section.kv .logistics .area .slogan{
		width: calc(576px * 0.65);
		top: -110px;
		left: calc(50% - 530px);
	}

	section.kv .logistics .area .house{
		width: calc(367px * 0.65);
		top: -50px;
		left: calc(50% + 290px);
	}

	section.kv .logistics .area .mountain{
		width: 1600px;
		left: calc(50% - 800px);
	}

	section.kv .logistics .area a.movbtn{
		top: 66px;
		left: calc(50% + 300px);

		padding: 4px 15px 4px 5px;

		font-size: 22px;
	}

	section.kv .logistics .area a.movbtn span{
		font-size: 16px;
		width: 36px;
		height: 36px;
	}

	.mainblock{
		background-size: 1600px auto;
	}

	section.care{
		padding: 30px 0 60px 0;
	}

	section.sport{
		padding: 30px 0 60px 0;
	}

	section.game{
		padding: 30px 0 60px 0;
	}

	section.game .leftgrassland{
		width: calc(1102px * 0.8);
		left: calc(50% - 1080px);
		top: 320px;
	}

	section.game .rightball{
		width: calc(113px * 0.8);
		left: calc(50% + 560px);
		top: 500px;
	}

	section.footprint{
		padding: 30px 0 60px 0;
	}

	section.footprint .rightgrassland{
		width: calc(1231px * 0.8);
		left: calc(50% + 150px);
	}

	section.news{
		padding: 30px 0 60px 0;
	}

	section.news .leftgrassland{
		width: calc(867px * 0.8);
		left: calc(50% - 970px);
	}

	section.contact{
		padding: 30px 0;
		margin-bottom: 30px;
	}

	footer{
		padding: 30px 0 0 0;
		background-size: 1600px auto;
	}

	footer .pannel{
		padding-bottom: 130px;
	}

	footer .pannel .award{
		width: calc(833px * 0.8);
	}

	footer .pannel .copyright{
		padding-top: 30px;
	}

}

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

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

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

		margin: 0 auto;
	}

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

	.sticky{
		width: 80px;
	}
	
	header .collection nav ul li a{
		font-size: 16px;
	}

	.wrap.scroll header .pioneer{
		width: 100px;
	}

	header .pioneer{
		width: 100px;
	}

	section.kv{
		padding-top: 65px;
	}

	section.kv .logistics .area .slogan{
		width: calc(576px * 0.55);
		top: -60px;
		left: calc(50% - 426px);
	}

	section.kv .logistics .area .house{
		width: calc(367px * 0.55);
		top: -40px;
		left: calc(50% + 230px);
	}

	section.kv .logistics .area .mountain{
		width: 1400px;
		left: calc(50% - 700px);
	}

	section.kv .logistics .area a.movbtn{
		top: 66px;
		left: calc(50% + 240px);

		padding: 4px 15px 4px 5px;

		font-size: 20px;
	}

	section.kv .logistics .area a.movbtn span{
		font-size: 14px;
		width: 28px;
		height: 28px;
	}

	.mainblock{
		background-size: 1280px auto;
	}

	section.care{
		padding: 30px 0 30px 0;
	}

	section.care .leftcloud{
		width: calc(245px * 0.6);
		top: 150px;
		left: calc(50% - 560px);
	}

	section.care .pannel{
		margin: 60px 0 0px 0;
		line-height: 1.6;
	}

	section.care .pannel .title{
		width: calc(978px * 0.6);
		top: -60px;
	}

	section.care .pannel{
		padding: 50px 25px 30px 25px;
		font-size: 18px;
	}

	section.care .pannel span.highlight{
		font-size: 22px;
	}

	section.care .pannel .leftpeople{
		width: calc(186px * 0.6);
		left: -15px;
	}

	section.care .pannel .rightpeople{
		width: calc(250px * 0.6);
		right: -50px;
	}

	section.sport{
		padding: 15px 0 30px 0;
	}

	section.sport .leftarrow{
		width: calc(370px * 0.6);
		top: 130px;
		left: calc(50% - 450px);
	}

	section.sport .rightarrow{
		width: calc(227px * 0.6);
		top: 226px;
		left: calc(50% + 296px);
	}

	section.sport .pannel{
		padding: 50px 25px 30px 25px;
	}

	section.sport .pannel .intro .summary .item .cover{
		width: 60px;
	}

	section.sport .pannel .intro .summary .item{
		padding-bottom: 10px;
	}

	section.sport .pannel .intro .summary .item .detail span.alias{
		font-size: 22px;
		letter-spacing: 0;
	}

	section.sport .pannel .intro .summary .item .detail .memo{
		font-size: 18px;
		line-height: 1.4;
		letter-spacing: 0;
	}

	section.sport .pannel .title{
		width: calc(874px * 0.6);
		top: -100px;
	}

	section.sport .pannel .people{
		width: calc(212px * 0.6);
		top: -66px;
	}

	section.game{
		padding: 15px 0 30px 0;
	}

	section.game .leftgrassland{
		width: calc(1102px * 0.6);
		left: calc(50% - 770px);

		top: 230px;
	}

	section.game .rightball{
		width: calc(113px * 0.6);
		left: calc(50% + 380px);
		top: 340px;
	}

	section.game .title{
		width: calc(835px * 0.6);
	}

	section.game .pannel{
		margin: 0 0 50px 0;
	}

	section.game .pannel .project ul.menu li a{
		font-size: 18px;
	}

	section.game .pannel .project ul.menu li a span.count{
		font-size: 22px;
	}

	section.game .pannel .project ul.menu li a span.alias{
		padding-left: 5px;
		font-size: 20px;
	}

	section.game .pannel .project .item{
		padding: 15px 15px;
	}

	section.game .pannel .project .item .explan{
		font-size: 18px;
	}

	section.game .pannel .project .item .memo .nickname{
		font-size: 22px;
	}

	section.game .pannel .project .item .memo{
		font-size: 18px;
		line-height: 1.4;
	}

	section.game .pannel .album{
		width: 390px;
		padding-left: 5px;
	}

	section.footprint{
		padding: 15px 0 30px 0;
	}

	section.footprint .rightgrassland{
		width: calc(1231px * 0.6);
		bottom: 30px;
		left: calc(50% + 120px);
	}

	section.footprint .pannel{
		margin: 0 0 50px 0;
	}

	section.footprint .pannel .information{
		width: 520px;
	}

	section.footprint .pannel .information .title{
		padding-bottom: 15px;
	}

	section.footprint .pannel .information ul.menu li a{
		font-size: 18px;
		padding: 5px 15px;
	}

	section.footprint .pannel .information .intro{
		font-size: 18px;
		padding-bottom: 15px;
	}

	section.footprint .pannel .information .album .group .item .mask{
		font-size: 16px;
	}

	section.footprint .pannel .information .album a.footprint_arrow_left{
		width: 16px;
		left: calc(-16px - 10px);
	}

	section.footprint .pannel .information .album a.footprint_arrow_right{
		width: 16px;
		right: calc(-16px - 10px);
	}

	section.news{
		padding: 15px 0 30px 0;
	}

	section.news .leftgrassland{
		width: calc(867px * 0.6);
		left: calc(50% - 700px);
	}

	section.news .pannel{
		margin-bottom: 30px;
	}

	section.news .pannel .title{
		width: calc(354px * 0.6);
		padding-bottom: 20px;
	}

	section.news .pannel .group a.news_arrow_left{
		width: 16px;
		left: calc(-16px - 10px);
	}

	section.news .pannel .group a.news_arrow_right{
		width: 16px;
		right: calc(-16px - 10px);
	}

	section.news .pannel .group .item span.alias{
		padding: 10px 2px 0 2px;
		min-height: 80px;
		font-size: 18px;
	}

	section.news .pannel .group .item span.date{
		font-size: 13px;
	}

	section.contact{
		padding: 15px;
		margin-bottom: 15px;
	}

	section.contact .pannel .title{
		width: calc(347px * 0.6);
		padding-bottom: 25px;
	}

	section.contact .pannel .detail{
		font-size: 18px;
	}

	footer{
		padding: 15px 0;

		background-size: 1280px auto;
	}

	footer .pannel{
		padding-bottom: 90px;
	}

	footer .pannel .award{
		width: calc(833px * 0.6);
	}

	footer .pannel ul.info{
		padding: 10px;
		border: 3px solid #5f1a83;
	}

	footer .pannel .copyright{
		padding-top: 15px;
		font-size: 14px;
	}

}

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

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

	header .collection nav ul li a{
		font-size: 16px;
	}

}

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

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

	.container-spec{
		width: 100%;
		max-width: 960px;
		padding: 0;
	}

	.wrap{
		min-width: 745px;
	}

	header{
		position: fixed !important;
		padding: 0 !important;

		background: #5e237e !important;
	}

	header .pioneer{
		display: none;
	}

	header .collection{
		flex-wrap: wrap;
	}

	header .collection .logo{
		display: inline-block;
		padding: 10px 0 10px 15px;
	}

	header .collection nav{
		display: none;
		position: absolute;
		top: 0px;
		width: 100%;
		align-items: flex-start;
		height: calc(100vh - 85px);

		flex: auto;
		margin-top: 85px;

		background: #5e237e;
	}

	header .collection nav.open{
		display: flex;
	}

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

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

	header .collection nav ul li a{
		display: inline-block;
		width: 100%;
		padding: 15px;
		text-align: center;

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

		color: #d2acdd;
	}

	header .collection nav ul li ul.social{
		width: 100%;
		padding-bottom: 15px;
		justify-content: center;
	}

	header .collection nav ul li ul.social li{
		width: 70px;
		padding: 10px;
	}

	header .collection nav ul li ul.social li:first-child{
		padding: 10px;
	}

	header .collection nav ul li ul.social li a{
		display: inline-block;
		width: 100%;
		padding: 0;
	}

	.wrap.scroll header .collection a{
		color: #d2acdd;
	}

	.wrap.scroll header .collection nav ul li a:hover, .wrap.scroll header .collection nav ul li a.chs{
		color: #FFF;
	}

	header .collection .switch{
		display: block;
		padding: 0 15px 0 0;
	}

	section.kv{
		padding-top: 85px;
		min-height: auto;

		background: none;
	}

	section.kv .movie video{
		border-radius: 0;
	}

	section.kv .movie{
		margin-bottom: -70px;
	}

	section.kv .logistics .area .mountain{
		width: 1000px;
		left: calc(50% - 500px);
	}

	section.kv .logistics .area .slogan{
		width: 30vw;
		left: 5vw;
		top: -10vw;
	}

	section.kv .logistics .area .house{
		width: 20vw;
		right: 7vw;
		left: auto;

		top: -4vw;
	}	

	section.kv .logistics .area a.movbtn{
		right: 10vw;
		left: auto;
	}
}

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

	section.care .pannel .leftpeople{
		width: calc(186px * 0.45);
	}

	section.care .pannel .rightpeople{
		width: calc(250px * 0.45);
		right: -26px;
	}

	section.sport .pannel .intro .summary{
		width: 50%;
	}

	section.game .pannel .project{
		width: 100%;
		flex: none;
	}

	section.game .pannel .album{
		width: 100%;

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

	section.game .leftgrassland{
		display: none;
	}

	section.game .rightball{
		display: none;
	}

}


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

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

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

	.wrap{
		min-width: auto;
	}

	.sticky{
		top: auto;
		bottom: 5vw;
	}

	section.kv .kv-main-mobile{
		display: block;
	}

	section.kv .movie{
		display: none;
	}

	section.kv .logistics{
		position: absolute;
		width: auto;
		bottom: 30vw;
		left: 50%;
		transform: translateX(-50%);
	}

	section.kv .logistics .area a.movbtn{
		position: relative;
		display: inline-block;

		padding: 10px 30px 8px 20px;

		top: inherit;
		right: inherit;
		left: inherit;
		bottom: inherit;
	}

	section.kv .logistics .area .slogan, section.kv .logistics .area .house, section.kv .logistics .area .mountain{
		display: none;
	}

	section.care{
		padding: 60px 0 30px 0;
	}

	section.care .pannel .title{
		width: 100%;

		top: -18vw;
	}

	section.care .pannel{
		padding: 40px 10px 80px 10px;
		letter-spacing: 0;
	}

	section.care .pannel span.highlight{
		font-size: 20px;
	}

	section.sport .pannel .title{
		width: 100%;

		top: -31vw;
	}

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

	section.sport .pannel .intro .movie{
		width: 100%;
		margin-left: 0;
		margin-bottom: 30px;
	}

	section.sport .pannel .intro .summary{
		width: 100%;
	}

	section.sport .pannel{
		padding: 30px 15px 50px 15px;
	}

	section.sport .leftarrow{
		width: calc(370px * 0.3);
		top: 30px;
		left: calc(50% - 200px);
	}

	section.sport .rightarrow{
		width: calc(227px * 0.3);
		top: auto;
		bottom: 30px;
		left: calc(50% - 30px);
	}

	section.sport .pannel .people{
		top: auto;
		bottom: -40px;
	}

	section.game .title{
		width: 100%;
	}

	section.game .pannel{
		margin: 0;
	}

	section.game .pannel .project ul.menu li a{
		font-size: 16px;
	}

	section.game .pannel .project ul.menu li a:before{
		margin-right: 2px;
		width: 20px;
		height: 20px;
	}

	section.game .pannel .project ul.menu li a span.alias{
		font-size: 20px;
		padding-left: 5px;
	}

	section.game .pannel .project .item.spec-noleftradius{
		padding: 15px;
	}

	section.sport .pannel .intro .summary .item .detail{
		padding-left: 10px;
	}

	section.footprint .spec-title{
		display: block;
		width: 100%;
		padding-bottom: 25px;
	}

	section.footprint .pannel .information .title{
		display: none;
	}

	section.footprint .pannel{
		display: block;
		margin: 0;
	}

	section.footprint .pannel .map{
		width: 100%;
		padding: 0 15vw 25px 15vw;
	}

	section.footprint .pannel .information{
		width: 100%;
		padding-left: 0;
	}

	section.footprint .pannel .information ul.menu{
		justify-content: center;
		padding-bottom: 15px;
	}

	section.footprint .pannel .information ul.menu li{
		width: 50%;
		padding: 0 5px;
		margin-bottom: 10px;
	}

	section.footprint .pannel .information ul.menu li a{
		padding: 5px;
		width: 100%;
		text-align: center;
	}

	section.footprint .pannel .information .intro{
		letter-spacing: 0;
	}

	section.footprint .pannel .information .album a.footprint_arrow_left, section.footprint .pannel .information .album a.footprint_arrow_right{
		display: none;
	}

	section.news .pannel .title{
		width: 52%;
	}

	section.news .pannel .group a.news_arrow_left, section.news .pannel .group a.news_arrow_right{
		display: none;
	}

		section.news .pannel .group .item span.alias{
		min-height: auto;
	}

	section.contact .pannel .title{
		width: 52%;
	}

	section.contact .pannel .detail{
		letter-spacing: 0;
		font-size: 20px;
	}

	footer{
		background-position: left -80px bottom;
	}

	footer .pannel{
		padding-bottom: 20px;
	}

	footer .pannel ul.info{
		flex-wrap: wrap;
		border: 5px solid #5f1a83;

		padding: 10px 10vw;
	}

	footer .pannel ul.info li{
		width: 100%;
		padding: 10px 0;
	}

	footer .pannel ul.info li:first-child{
		border-right: 0;
		border-bottom: 1px solid #5f1a83;
	}

	footer .pannel ul.info li span.alias{
		padding-bottom: 5px;
	}

	footer .pannel .copyright{
		padding-top: 220px;
		text-align: center;
	}

}

@media (max-width: 480px) {

}

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

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

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