@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;
}

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

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



.nopadding{
	padding: 0 !important;
}

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

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

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

html,body{
	letter-spacing: 3px;
	font-family: "Noto Sans TC", "Microsoft JhengHei", "微軟正黑體", "Arial", "新細明體", "蘋果儷黑體", Verdana, sans-serif;
	font-weight: 400;
}

html{
  box-sizing: border-box;
}

body{
	background: #FFF;
	font-family: "Noto Sans TC", "Microsoft JhengHei", "微軟正黑體", "Arial", "新細明體", "蘋果儷黑體", Verdana, sans-serif;
	font-size: inherit;

	-webkit-font-smoothing: antialiased;
}

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

body,input,button,select,textarea{
}

.wrap{
	position: relative;
	display: flex;
	flex-flow: column;
	width: 100%;
	min-height: 100vh;	
	overflow-x: hidden;

}

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

sup{
	vertical-align: super;
	font-size: 9px;
	margin-left: 2px;
	line-height: 0;
}

img{
	display: block;
}

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

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

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

	margin: 0 auto;
}

.cursor-pointer{
	cursor: pointer;
}

.unit-title-base{
	position: relative;
	display: inline-block;
	width: 100%;
	padding: 15px;
	margin-bottom: 20px;

	background: #fae67a;

	border-radius: 10px;
	
	font-size: 24px;
	font-weight: bold;
	letter-spacing: 0;
	color: #000;

}

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

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

  background: #FFF;

	z-index: 50;
}

.wrap.scroll header{
	position: fixed;

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

	background: #FFF;

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

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

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

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

header .collection .logogroup .logo{
	display: inline-block;
	width: 350px;
	padding-right: 30px;
	box-sizing: border-box;
}

header .collection .logogroup .sysname{
	display: inline-block;
	font-size: 24px;
	font-weight: bold;
	letter-spacing: 0;
	color: #af860a;
}

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: 5px 10px 5px 10px;

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

	color: #2c2e2e;

	border-top: 3px solid rgba(255, 255, 255, 0);
	border-bottom: 3px solid rgba(255, 255, 255, 0);
	
	letter-spacing: 0;
}

header .collection nav ul li a:hover, header .collection nav ul li a.chs{
	border-bottom: 3px solid #FFBF27;
}

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%;
	background: linear-gradient(#7aebec 0%, #e5fcfe 70%, #FFF 90%,#FFF 100%);
	z-index: 0;
}

section.kv .theater{
	position: relative;
	width: 100%;
	height: 400px;
}

section.kv .cloudleft{
	position: absolute;
	width: 384px;
	top: 138px;
	left: calc(50% - 930px);

	z-index: 0;
}

section.kv .cloudcenterright{
	position: absolute;
	width: 543px;
	top: 78px;
	left: calc(50% - 32px);

	z-index: 0;
}

section.kv .cloudright{
	position: absolute;
	width: 283px;
	top: 40px;
	left: calc(50% + 532px);

	z-index: 0;
}

section.kv .mountainleft{
	position: absolute;
	width: 360px;
	top: 100px;
	left: 0;

	z-index: 1;
}

section.kv .treeback{
	position: absolute;
	width: 50px;
	top: 266px;
	left: calc(50% + 320px);

	z-index: 1;
}

section.kv .bird{
	position: absolute;
	width: 50px;
	top: 30px;
	left: calc(50% + 440px);

	z-index: 1;
}

section.kv .grass{
	position: absolute;
	width: 30px;
	top: 315px;
	left: calc(50% - 60px);

	z-index: 1;
}

section.kv .mountainleft{
	position: absolute;
	width: 360px;
	top: 64px;
	left: calc(50% - 650px);

	z-index: 1;
}

section.kv .billboard{
	position: absolute;
	width: 638px;
	top: 42px;
	left: calc(50% - 319px);

	z-index: 2;
}

section.kv .progress{
	position: absolute;
	display: flex;
	align-items: center;
	width: 100%;
	top: 0;
	left: 0;
	padding: 20px 25px;
}

section.kv .progress .conclusion{
	display: flex;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
	width: 246px;
	min-height: 118px;
	background: red;
	padding-left: 70px;
	padding-right: 15px;

	background: url("../images/kv_progress_icon.png");
	background-repeat: no-repeat;
	background-size: 134px auto;
	background-position: left center;
}

section.kv .progress .conclusion .title{
	display: inline-block;
	width: 100%;
	letter-spacing: 0;
	font-size: 20px;
	font-weight: bold;
	text-align: right;
	color: #000;
}

section.kv .progress .conclusion .title{
	display: inline-block;
	width: 100%;
	letter-spacing: 0;
	font-size: 20px;
	font-weight: bold;
	color: #000;
}

section.kv .progress .conclusion .information{
	display: inline-block;
	width: 100%;
	letter-spacing: 0;
	font-size: 22px;
	font-weight: bold;
	color: #000;
	text-align: right;
}

section.kv .progress .conclusion .information span.highlight{
	color: #dc164b;
}

section.kv .progress .particular{
	flex: 1;
}

section.kv .progress .particular .title{
	display: inline-block;
	position: relative;
	width: 100%;
	padding-left: 10px;
	padding-top: 8px;
	padding-bottom: 8px;
	margin-bottom: 10px;
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 0;
	color: #000;

	background: url("../images/kv_progress_brush.png");
	background-repeat: no-repeat;
	background-size: auto 35px;
	background-position: left center;
}

section.kv .progress .particular .list{
	position: relative;
	display: inline-block;
	width: 100%;
	padding: 8px;

	border-radius: 5px;
	background: #FFF;
}

section.kv .progress .particular .list .item{
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	padding-top: 5px;
	padding-bottom: 5px;

	border-bottom: 1px dashed #ebebeb;

	font-size: 16px;
	font-weight: bold;
	letter-spacing: 0;
	color: #000;
}

section.kv .progress .particular .list .item:first-child{
	padding-top: 0px;
}

section.kv .progress .particular .list .item:last-child{
	padding-bottom: 0px;
	border-bottom: none;
}

section.kv .progress .particular .list .item .honorific{
	position: relative;
	display: inline-block;
	width: 190px;
	color: #ff7e00;
	font-size: 16px;
}

section.kv .progress .particular .list .item .honorific span.extra{
	color: #999;
}


section.kv .progress .particular .list .item .hp{
	flex: 1;
	text-align: right;

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

	color: #000;
}

section.kv .progress .particular .list .item .hp span.highlight{
	color: #dc164b;
}


section.kv .road{
	position: absolute;
	width: 100%;
	height: 39px;
	top: 327px;
	left: 0;

	text-indent: -999999px;

	background: url(../images/kv-road.png);
	background-repeat: repeat-x;
	background-size: auto 100%;
	background-position: center center;

	z-index: 3;
}

section.kv .land{
	position: absolute;
	width: 100%;
	height: 34px;
	top: 366px;
	left: 0;

	text-indent: -999999px;

	background: #ffe4af;

	z-index: 3;
}

section.kv .bluecar{
	position: absolute;
	width: 72px;
	top: 298px;
	left: calc(50% + 40px);

	z-index: 4;
}

section.kv .redcar{
	position: absolute;
	width: 95px;
	top: 278px;
	left: calc(50% - 190px);

	z-index: 4;
}

section.kv .chargingstation{
	position: absolute;
	width: 51px;
	top: 316px;

	z-index: 4;
}

section.kv .chargingstation.c1{
	left: calc(50% + 240px);
}

section.kv .chargingstation.c2{
	left: calc(50% + 290px);
}

section.kv .chargingstation.c3{
	left: calc(50% + 350px);
}

section.kv .flower{
	position: absolute;
	width: 32px;
	top: 358px;

	z-index: 4;
}

section.kv .flower.f1{
	left: calc(50% - 470px);
}

section.kv .flower.f2{
	left: calc(50% + 190px);
}

section.kv .frontgrass{
	position: absolute;
	width: 40px;
	top: 370px;
	left: calc(50% - 590px);

	z-index: 4;
}

section.kv .mountainright{
	position: absolute;
	width: 1008px;
	top: 212px;
	left: calc(50% + 390px);

	z-index: 4;
}

section.kv .treefront{
	position: absolute;
	width: 178px;
	top: 210px;
	left: calc(50% + 380px);

	z-index: 5;
}

section.mainsession{
	position: relative;
	flex-grow: 1;
	width: 100%;
	text-align: center;
}

section.mainsession::before{
	content: "";
	position: absolute;
	width: 251px;
	height: 237px;

	bottom: 5%;
	left: calc(50% - 800px);

	background: url("../images/global-bg-left.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	z-index: -1;
}

section.mainsession::after{
	content: "";
	position: absolute;
	width: 250px;
	height: 207px;

	bottom: 2%;
	left: calc(50% + 600px);

	background: url("../images/global-bg-right.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	z-index: -1;
}

section.mainsession .landbg{
	position: absolute;
	width: 1920px;
	top: 0px;
	left: calc(50% - 960px);
}

section.mainsession .reservoir{
	position: relative;
	display: block;
	width: 100%;
	padding: 60px 30px;
	background: #FFF;
	border-radius: 30px;

	box-shadow: rgba(0, 0, 0, 0.1) 0px -20px 25px -5px, rgba(0, 0, 0, 0.04) 0px -10px 10px -5px;
}

section.mainsession .reservoir .rolemenu{
	position: relative;
	display: flex;
	justify-content: space-between;
	width: 100%;
}

section.mainsession .reservoir .rolemenu .item{
	width: calc(50% - 30px);
}

section.mainsession .reservoir .rolemenu .item span.title{
	position: relative;
	display: inline-block;
	width: 100%;

	padding: 10px;

	text-align: center;

	font-size: 22px;
	font-weight: bold;
	letter-spacing: 0;
	color: #000;

	border-radius: 10px;
	background: #fae67a;
}

section.mainsession .reservoir .rolemenu .item span.title::before{
	content: "";
	position: absolute;
	bottom: 10px;
	left: 30px;
	width: 72px;
	height: 61px;

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

section.mainsession .reservoir .rolemenu .item.shop span.title::before{

	background: url("../images/rolemenu-icon-2.png");
}

section.mainsession .reservoir .rolemenu .item.shop span.title{
	background: #a6d7f3;
}

section.mainsession .reservoir .rolemenu .item ul{
	display: inline-block;
	width: 100%;
	list-style: none;
	padding: 40px 0 0 0;
	margin: 0;
}

section.mainsession .reservoir .rolemenu .item ul li{
	display: inline-block;
	width: 100%;
	padding-bottom: 10px;
}

section.mainsession .reservoir .rolemenu .item ul li:last-child{
	padding-bottom: 0px;
}

section.mainsession .reservoir .rolemenu .item ul li a{
	display: inline-block;
	width: 100%;

	padding: 10px;

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

	text-decoration: none;
	color: #8f7900;

	border-bottom: 1px dashed #ddd;
}

section.mainsession .reservoir .rolemenu .item ul li:last-child a{
	border-bottom: 0px;
}

section.mainsession .reservoir .rolemenu .item.shop ul li a{
	color: #387293;
}

section.mainsession .reservoir .rolemenu .item ul li a:hover{
	text-decoration: none;
	color: #FFF;
	background: #8f7900;
}

section.mainsession .reservoir .rolemenu .item.shop ul li a:hover{

	background: #387293;
}


section.mainsession .reservoir p.result{
	font-size: 20px;
	font-weight: bold;
	line-height: 1.5;
	letter-spacing: 0;
}

section.mainsession .reservoir p.result span.highlight{
	color: #ff0000;
}

section.mainsession .apply{
	display: block;
	width: 100%;
	padding-top: 30px;
}

section.mainsession .apply .menugroup{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 5px;
	
	border-radius: 5px;
}

section.mainsession .apply .menugroup .item{
	display: inline-block;
	width: 320px;
	padding: 15px 15px 10px 15px;
	margin: 15px;
	border-radius: 15px;
	background: #fceabe;
}

section.mainsession .apply .menugroup .cover{
	display: inline-block;
	width: 100%;
}

section.mainsession .apply .menugroup .item span.title{
	display: inline-block;
	width: 100%;
	padding-bottom: 10px;
	text-align: left;

	font-size: 18px;
	font-weight: bold;
	letter-spacing: 0;
	color: #493e00;
}

section.mainsession .apply .menugroup .item a{
	display: inline-block;
	width: 100%;
	margin-top: 5px;
	padding-top: 5px;
	padding-bottom: 5px;

	font-size: 20px;
	font-weight: bold;
	letter-spacing: 0;
	color: #ff7800;

	text-decoration: none;
}

section.mainsession .apply .menugroup .item a:hover{
	color: #FFF;
	background: #ff7800;
	text-decoration: none;
}

section.mainsession .apply .notice{
	display: block;
	width: 100%;
	max-width: 660px;
	margin: 0 auto;
}

section.mainsession .apply .notice ol{

}

section.mainsession .apply .notice ol li{
	text-align: left;
	padding-bottom: 10px;
	font-size: 18px;
	line-height: 1.5;
}

section.mainsession .apply .notice .rulecheck{
	display: block;
	width: 100%;
	padding-bottom: 20px;
	text-align: center;
}

section.mainsession .apply .notice .rulecheck label.agreement{
	display: inline-flex;
	position: relative;
	align-items: center;
	line-height: 1.5;
	cursor: pointer;
	font-weight: bold;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	z-index: 3;
}

section.mainsession .apply .notice .rulecheck label.agreement input[type='checkbox']{
	position: relative;
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	width: 30px;
	height: 30px;

	border: 3px solid #ffc156;
	border-radius: 5px;
	cursor: pointer;

	background: #FFF;
}

section.mainsession .apply .notice .rulecheck label.agreement input[type='checkbox']:checked::after{
	content: "";
	display: inline-block;
	position: absolute;
	
	width: 16px;
	height: 16px;
	top: 50%;
	left: 50%;

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

	background: #ff7e00;
}

section.mainsession .apply .notice .rulecheck label.agreement .memo{
	padding-left: 10px;
	font-size: 18px;
	letter-spacing: 0;
	color: #3b3b3b;
}

section.mainsession .apply .result{
	display: block;
	width: 100%;
}

section.mainsession .apply .result .scrollblock{
	display: block;
	width: 100%;
}

section.mainsession .apply .result table{
	width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  text-align: center;
}

section.mainsession .apply .result table thead th {
  background-color: #4fc3c6; /* 藍綠色 */
  color: #fff;
  min-width: 98px;
  padding: 5px;
  border-right: 1px solid #fff; /* 白色分隔線 */
  text-align: left;
  letter-spacing: 0;
  vertical-align: top;
}

/* 去掉最後一個 th 的右邊線 */
section.mainsession .apply .result table thead th:last-child {
  border-right: none;
}

section.mainsession .apply .result table tbody tr{
  background-color: #f9f9f9;
}

section.mainsession .apply .result table tbody td {
  border: 1px solid #ddd;
  padding: 5px;
  text-align: left;
  letter-spacing: 0;
}

/* 交錯列顏色 */
section.mainsession .apply .result table tbody tr:nth-child(even) {
  background-color: #e0fefe;
}

/* 狀態標籤 */
section.mainsession .apply .result table tbody td span.status {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  color: #fff;
  font-weight: bold;
  font-size: 13px;
  background: #ff7800;
}

section.mainsession .apply .result table tbody td span.status a{
	color: #FFF;
	text-decoration: none;
}

section.mainsession .apply .result table tbody td span.status a:hover{
	color: #FFF;
	text-decoration: none;
}

section.mainsession .apply .result table thead input[type="text"]{
	margin-top: 5px;
	width: 100%;
}

section.mainsession .apply .result .category{
	display: flex;
	justify-content: center;
	padding-bottom: 15px;
}

section.mainsession .apply .result .category a{
	display: inline-block;
	margin: 0 5px;
	padding: 10px;

	background: #689793;
	border-radius: 5px;

	font-size: 18px;
	font-weight: bold;
	letter-spacing: 0;
	color: #FFF;

	text-decoration: none;
}

section.mainsession .apply .result .category a.chs, section.mainsession .apply .result .category a:hover{
	background: #cc4b28;
	text-decoration: none;
}

section.mainsession .login{
	display: block;
	width: 100%;
	padding-top: 30px;
	margin: 0 auto;
}

section.mainsession .login .loginbase{
	display: block;
	width: 100%;
	max-width: 450px;
	margin: 0 auto;
}

section.mainsession .login .fullform{
	display: block;
	width: 100%;
}

section.mainsession .login .fullform .irow{
	display: flex;
	width: 100%;
}

section.mainsession .login .fullform .irow .icol-6{
	width: 50%;
	padding: 0 15px;
}


section.mainsession .login .formgroup{
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	padding: 5px;
}

section.mainsession .login .formgroup span.title{
	display: inline-block;
	padding-top: 8px;
	padding-right: 10px;

	font-size: 20px;
	font-weight: bold;
	letter-spacing: 0;
	color: #000;
}

section.mainsession .login .formgroup span.title.spec{
	width: 120px; /* 統一寬度 */
  text-align: justify; /* 讓文字分散對齊 */
  font-weight: bold;
  letter-spacing: 0; /* 微調間距 */
  justify-content: space-between;

  margin-bottom: -20px;
}

section.mainsession .login .formgroup span.title.spec::after {
  content: '';
  display: inline-block;
	width: 100%;
}


section.mainsession .login .formgroup .object{
	flex: 1;
	display: inline-block;
}

section.mainsession .login .formgroup .object.long{
	flex: none;
	width: 100%;
	padding-top: 10px;
	text-align: left;
}




section.mainsession .login .formgroup .object input[type="text"], section.mainsession .login .formgroup .object input[type="password"]{
	width: 100%;
	padding: 5px;

	border: 1px solid #ddd;
	border-radius: 5px;

	font-size: 20px;
}

section.mainsession .login .formgroup .object .filezone{
	position: relative;
	display: block;
	width: 100%;
	padding: 40px 15px 15px 15px;
	border: 1px solid #999;
	border-radius: 5px;
	text-align: center;
	cursor: pointer;

	font-size: 20px;
	font-weight: bold;
	letter-spacing: 0;
	color: #999;
}

section.mainsession .login .formgroup .object .filezone:hover{
	color: #000;
}

section.mainsession .login .formgroup .object .filezone::before{
	content: "+";
	position: absolute;
	top: 15px;
	left: 50%;
	transform: translateX(-50%);
}

section.mainsession .login .formgroup a.sendcode{
	display: inline-block;
	margin-left: 5px;
	padding: 7px;

	border-radius: 5px;

	font-size: 20px;
	font-weight: bold;
	letter-spacing: 0;
	color: #FFF;

	background: #ff7800;

	text-decoration: none;
}

section.mainsession .login .formgroup a.sendcode:hover{
	background: #c15c03;
}

section.mainsession .login span.errortxt{
	display: none;
	text-align: left;
	padding-top: 5px;
	padding-bottom: 5px;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 0;
	color: #ff0000;
}

section.mainsession .login span.errortxt.txt-center{
	text-align: center;
}


section.mainsession .login span.errortxt.show{
	display: block;
}

section.mainsession .login .link{
	display: block;
	width: 100%;
	padding-top: 20px;
	text-align: center;

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

	color: #ddd;
}

section.mainsession .login .link a{
	color: #666;
	text-decoration: none;
}

section.mainsession .login .link a:hover{
	text-decoration: underline;
}

section.mainsession span.warntxt{
	display: block;
	width: 100%;
	text-align: center;
	padding-top: 20px;

	font-size: 14px;
	font-weight: bold;
	letter-spacing: 0;
	color: #ff0000;
}


.btn-item{
	display: inline-block;
	width: 100%;
	padding-top: 20px;
}

a.btn{
	display: inline-block;
	padding: 15px 30px;
	margin: 0 5px 5px 0;
	min-width: 270px;
	border-radius: 30px;
	border-bottom: 5px solid #ddd;
	color: #FFF;

	background: #000;

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

	text-decoration: none;
}

a.btn:hover{
	background: #ddd;
	border-bottom: 5px solid #000;

	color: #000;
}

a.btn.b-orange{
	background: #ff7800;
	border-bottom: 5px solid #ffc591;
}

a.btn.b-orange:hover{
	background: #ffc591;
	border-bottom: 5px solid #ff7800;
}

a.btn.b-green{
	background: #2e9557;
	border-bottom: 5px solid #69eb9d;
}

a.btn.b-green:hover{
	background: #69eb9d;
	border-bottom: 5px solid #2e9557;
}

a.btn.b-brown{
	background: #cc4b28;
	border-bottom: 5px solid #f4c7b8;
}

a.btn.b-brown:hover{
	background: #f4c7b8;
	border-bottom: 5px solid #cc4b28;
}

a.btn.b-gray{
	background: #7c6c5e;
	border-bottom: 5px solid #b9b9b9;
}

a.btn.b-gray:hover{
	background: #b9b9b9;
	border-bottom: 5px solid #7c6c5e;
}

.error-arrange{
	display: inline-block; 
	width: 100%;
	padding: 10px;

	color: red;
	text-align: left;

	border-radius: 10px;
	background: #ede3d7;
}

.stepmenu{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	padding-top: 10px;
}

.stepmenu span.item{
	display: inline-block;
	width: calc(25% - 10px);
	margin: 5px;
	padding: 5px;
	font-size: 16px;
	letter-spacing: 0;

	background: #f7f4e9;
}

.stepmenu .item.chs{
	color: #FFF;
	background: #ff7e00;
}

.step{
	display: block;
	width: 100%;
	padding-bottom: 20px;
}

.step .feature{
	display: block;
	width: 100%;
	font-size: 18px;
	letter-spacing: 0;
}

.step.hide{
	display: none;
}

.step .feature span.milestone{
	display: block;
	width: 100%;
	padding: 10px;
	margin-bottom: 10px;
	background: #E3E3E3;
	color: #000;
	letter-spacing: 0;
	text-align: left;
}

.step .feature span.inscription{
	display: block;
	width: 100%;
	padding-top: 10px;
	font-size: 20px;
	letter-spacing: 0;
	font-weight: bold;
	text-align: left;
}

.step .feature span.inscription.spec{
	line-height: 1.5;
}

.step .feature span.inscription.i-center{
	text-align: center;
}

.step .feature .brow{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	padding-bottom: 10px;
	justify-content: flex-start;
}

.step .feature .brow.hide{
	display: none;
}

.step .feature .brow [class^="bcol-"]{
	display: inline-block;
	padding: 0 5px;
	text-align: left;
}

.step .feature .brow [class^="bcol-"].setcenter{
	display: inline-block;
	padding: 0 5px;
	text-align: center;
}

setcenter

.step .feature .brow .bcol-1{
	width: calc(100% * (1/12));
}

.step .feature .brow .bcol-2{
	width: calc(100% * (2/12));
}

.step .feature .brow .bcol-3{
	width: calc(100% * (3/12));
}

.step .feature .brow .bcol-4{
	width: calc(100% * (4/12));
}

.step .feature .brow .bcol-5{
	width: calc(100% * (5/12));
}

.step .feature .brow .bcol-6{
	width: calc(100% * (6/12));
}

.step .feature .brow .bcol-7{
	width: calc(100% * (7/12));
}

.step .feature .brow .bcol-8{
	width: calc(100% * (8/12));
}

.step .feature .brow .bcol-9{
	width: calc(100% * (9/12));
}

.step .feature .brow .bcol-10{
	width: calc(100% * (10/12));
}

.step .feature .brow .bcol-12{
	width: calc(100% * (12/12));
}

.step .feature a.add_invoice, .step .feature a.remove_invoice{
	display: inline-block;
	margin-top: 10px;

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

	color: #ff7e00;
	text-decoration: none;
}

.step .feature a.add_invoice:hover, .step .feature a.remove_invoice:hover{
	text-decoration: none;
	color: #c73500;
}

.step .feature span.epitome{
	display: block;
	width: 100%;
	padding: 10px 0 5px 0;
	color: #000;
	letter-spacing: 0;
}

.step .feature span.epitome i.must{
	font-style: normal;
	color: red;
}

.step .feature span.reminder{
	display: inline-block;
	padding-top: 10px;
	color: red;
	font-size: 14px;
}

section.mainsession .step .feature input[type="text"], .step .feature input[type="password"], .step .feature select{
	width: 100%;
	padding: 10px;

	border: 1px solid #ddd;
	border-radius: 5px;

	font-size: 16px;
}

.step .feature select{
	padding: 12px;      /* 想要的內距 */
  appearance: none;        /* Chrome/Safari */
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url('../images/select_arrow.png') no-repeat right 10px center; /* 自訂箭頭 */
  background-size: 15px 10px;
  background-color: #fff;
}

.step .feature label.ck{
	display: inline-flex;
	position: relative;
	align-items: center;
	line-height: 1.5;
	cursor: pointer;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	z-index: 3;
}

.step .feature label.ck input[type='checkbox']{
	position: relative;
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	width: 25px;
	height: 25px;

	border: 2px solid #ffc156;
	border-radius: 3px;
	cursor: pointer;

	background: #FFF;
}

.step .feature label.ck input[type='checkbox']:checked::after{
	content: "";
	display: inline-block;
	position: absolute;
	
	width: 12px;
	height: 12px;
	top: 50%;
	left: 50%;

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

	background: #ff7e00;
}

.step .feature .result{
	display: inline-block;
	width: 100%;
	text-align: center;

	font-size: 18px;
}

.step .feature .result .summarize{
	display: inline-block;
	width: 100%;

	padding-bottom: 10px;

	font-size: 22px;
	font-weight: bold;
	line-height: 1.5;
}

.step .feature .result .summarize span.serial{
	color: #ff7800;
}

.step .feature .extra{
	display: inline-block;
	width: 100%;
	padding-top: 5px;
	font-size: 14px;
	letter-spacing: 0;
	color: #888888;
}

.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year{
	width: 35% !important;
}

.dropzone{
	border: 1px solid rgba(0,0,0,.3) !important;
}

.dropzone .dz-preview{
	margin: 10px !important;
}

footer{
	display: block;
	width: 100%;
	padding: 84px 0 0px 0;
	font-size: 16px;
	letter-spacing: 0;
	color: #fff8f8;

	background: url(../images/footer-bg.png);
	background-repeat: repeat-x;
	background-size: auto 84px;
	background-position: top center;
}

footer .copyright{
	display: inline-block;
	width: 100%;
	padding: 10px 0;
	background: #499d77;
	text-align: center;
}

/*大於等於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) {

}

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

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

	header .collection .logogroup .logo{
		width: 300px;
		padding-right: 15px;
	}

	header .collection .logogroup .sysname{
		font-size: 22px;
	}

	header .collection nav ul li{
		padding: 0 0 0 10px;
	}

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

}

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

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

}

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

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

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

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

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

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

	.wrap{
		min-width: 768px;
	}

	header{
		position: fixed;
		padding: 15px 0;
		box-shadow: rgba(0, 0, 0, 0.2) 0px 25px 20px -20px;

		background: #FFF;
	}

	header .collection .logogroup .logo{
		padding-right: 25px;
	}

	header .collection nav{
		display: none;
	}

	header .collection nav.open{
		display: block;
		position: absolute;
		width: 100%;
		height: 100vh;
		top: 66px;
		left: 0;

		padding: 0;
		
		background: #FFF;

		overflow-y: hidden;
	}

	header .collection nav ul{
		flex-wrap: wrap;
		padding-left: 0;
		padding-top: 30px;
		border-top: 1px solid #333;
	}

	header .collection nav ul li{
		width: 100%;
		text-align: center;
		z-index: 1;
	}

	header .collection nav ul li a{
		display: inline-block;
		padding: 15px;
	}

	.wrap.scroll header{
		animation-name: none;
	}

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

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

	section.mainsession .reservoir .rolemenu .item span.title::before, section.mainsession .reservoir .rolemenu .item.shop span.title::before{
		width: calc(72px * 0.8);
		height: calc(61px * 0.8);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center center;
	}

	section.mainsession .apply .menugroup .item{
		display: inline-block;
		width: 300px;
		padding: 15px 15px 10px 15px;
		margin: 15px;
		border-radius: 15px;
		background: #fceabe;
	}

	section.mainsession .apply .result .scrollblock{
		overflow-x: auto;
	}

	section.mainsession .apply .result table{
		width: 1000px;
	}

	section.mainsession .login .fullform .irow{
		flex-wrap: wrap;
	}

	section.mainsession .login .fullform .irow .icol-6{
		width: 100%;
		padding: 0;
		margin-top: 5px;
	}
	
}

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

	.container-base{
		width: 100%;
	}

	.container-base.spec{
		width: 100%;
	}

	section.mainsession .reservoir .rolemenu .item{
		width: calc(50% - 15px);
	}

	.step .feature .brow{
		flex-wrap: wrap;
	}

	.step .feature .brow .bcol-1{
		width: 100%;
	}

	.step .feature .brow .bcol-2{
		width: 100%;
	}

	.step .feature .brow .bcol-3{
		width: 100%;
	}

	.step .feature .brow .bcol-4{
		width: 100%;
	}

	.step .feature .brow .bcol-5{
		width: 100%;
	}

	.step .feature .brow .bcol-6{
		width: 100%;
	}

	.step .feature .brow .bcol-7{
		width: 100%;
	}

	.step .feature .brow .bcol-8{
		width: 100%;
	}

	.step .feature .brow .bcol-9{
		width: 100%;
	}

	.step .feature .brow .bcol-10{
		width: 100%;
	}

	.step .feature .brow .bcol-12{
		width: 100%;
	}
}


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

}

@media (max-width: 480px) {

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

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

	.wrap{
		min-width: auto;
	}

	.unit-title-base{
		font-size: 20px;
		padding: 10px;
		margin-bottom: 15px;
	}

	.btn-item{
		padding-top: 15px;
	}

	a.btn{
		padding: 10px 15px;
		min-width: 250px;
		font-size: 18px;
	}

	header{
		padding: 5px 0;
	}

	header .collection .logogroup{
		flex-wrap: wrap;
	}

	header .collection .logogroup .logo{
		padding-right: 5px;
		padding-bottom: 5px;
		width: 200px;
	}

	header .collection .logogroup .sysname{
		font-size: 18px;
	}

	header .collection nav.open{
		top: 60px;
	}

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

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

	header .collection nav ul li a:hover, header .collection nav ul li a.chs{
		background: rgb(255, 191, 39);
	}

	section.kv .theater{
		height: 290px;
	}

	section.kv .billboard{
		width: 356px;
		top: 20px;
		left: calc(50% - 175px);
	}

	section.kv .progress{
		padding: 10px 15px;
	}

	section.kv .progress .conclusion{
		width: 130px;
		padding: 94px 5px 0 0px;

		background-position: top center;
		background-size: 100px auto;
	}

	section.kv .progress .conclusion .title{
		text-align: center;
		font-size: 14px;
	}

	section.kv .progress .conclusion .information{
		text-align: center;
		font-size: 16px;
	}

	section.kv .progress .particular{
		width: calc(100% - 135px);
	}

	section.kv .progress .particular .title{
		padding-top: 3px;
		padding-left: 5px;
		margin-bottom: 3px;
		font-size: 14px;
		background-size: auto 20px;
	}

	section.kv .progress .particular .list{
		padding: 5px;
	}

	section.kv .progress .particular .list .item .honorific{
		width: 98px;
		font-size: 13px;
	}

	section.kv .progress .particular .list .item .honorific span.extra{
		display: inline-block;
		width: 100%;
		font-size: 11px;
	}

	section.kv .progress .particular .list .item .hp{
		width: calc(100% - 98px);
		font-size: 13px;
	}

	section.kv .road{
		height: 26px;
		top: 236px;
	}

	section.kv .bluecar{
		width: 38px;
		top: 224px;
		left: calc(50% + 40px);
	}

	section.kv .redcar{
		width: 50px;
		top: 213px;
		left: calc(50% - 80px);
	}

	section.kv .grass{
		width: 18px;
		top: 229px;
		left: calc(50% + 10px);
	}

	section.kv .land{
		top: 262px;
		height: 28px;
	}

	section.kv .chargingstation{
		width: 32px;
		top: 230px;
	}

	section.kv .chargingstation.c1{
		left: calc(50% + 100px);
	}


	section.mainsession .reservoir{
		padding: 40px 15px;
	}

	section.mainsession .reservoir .rolemenu{
		flex-wrap: wrap;
	}

	section.mainsession .reservoir .rolemenu .item{
		width: 100%;
	}

	section.mainsession .reservoir .rolemenu .item:first-child{
		padding-bottom: 40px;
	}

	section.mainsession .reservoir .rolemenu .item span.title{
		padding: 10px;
		font-size: 20px;
	}

	section.mainsession .reservoir .rolemenu .item span.title::before, section.mainsession .reservoir .rolemenu .item.shop span.title::before{
		width: calc(72px * 0.7);
		height: calc(61px * 0.7);
		left: 15px;
	}

	section.mainsession .reservoir .rolemenu .item ul{
		padding: 15px 0 0 0;
	}

	section.mainsession .reservoir .rolemenu .item ul li a{
		font-size: 18px;
	}

	section.mainsession .reservoir p.result{
		font-size: 16px;
	}

	section.mainsession .apply{
		padding: 5px 0 0 0;
	}

	section.mainsession .apply .menugroup .item{
		width: 100%;
		margin: 15px 0 0;
		padding: 15px 15px 5px 15px;
	}

	section.mainsession .apply .menugroup .item:first-child{
		margin-top: 0;
	}

	section.mainsession .apply .menugroup .item span.title{
		font-size: 16px;
	}

	section.mainsession .apply .menugroup .item a{
		padding: 5px;
		font-size: 18px;
	}

	section.mainsession .apply .notice ol li{
		font-size: 14px;
	}

	section.mainsession .apply .notice .rulecheck label.agreement .memo{
		padding-left: 5px;
		font-size: 14px;
	}

	section.mainsession .apply .result .category{
		flex-wrap: wrap;
		justify-content: space-between;
	}

	section.mainsession .apply .result .category a{
		width: calc(50% - 5px);
		margin: 0 0 5px 0;

		font-size: 16px;

	}

	section.mainsession .login{
		padding: 5px 0 0 0;
	}

	section.mainsession .login .formgroup span.title{
		font-size: 16px;
	}

	section.mainsession .login .formgroup span.title.spec{
		width: 88px;
	}

	section.mainsession .login .formgroup .object input[type="text"], section.mainsession .login .formgroup .object input[type="password"]{
		font-size: 16px;
	}

	section.mainsession .login .formgroup a.sendcode{
		font-size: 16px;
	}

	section.mainsession .login .formgroup .object .filezone{
		padding: 35px 15px 15px 15px;
		font-size: 16px;
	}

	section.mainsession .login .link{
		padding-top: 10px;
		font-size: 16px;
	}

	footer{
		padding: 60px 0 0px 0;
		font-size: 11px;

		background-size: auto 60px;
	}

}

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

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

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