.input_container{
	max-width: 600px;
    margin: 0 auto;
    padding: 0 24px;
}

.input_info{
	color: #8081ff; 
	margin: 2em 0;
	line-height: 1.5em;
}
.input_info_gray{
  color: #777; 
  list-style-type: disc;
  padding-left: 1.5em;
  line-height: 1.5em;
}
.input_info a{
	border-bottom:solid 1px #8081ff;
	padding: 0 .4em .2em .4em;
}

/* 表格共用設定 */ 
form{width: 100%;height: 100%;}
form li{ position:relative; margin-bottom:1em; line-height:2em;}
form li label{ position:relative; display:block; font-size:inherit; line-height:2em; padding:.8em 0;}
form li.must label:before{ content:'*'; color:#F44336; position:absolute; left:-.6em; top:.7em;}
form li input ,form li textarea{ border:solid 1px #8081ff; border-radius:4px; outline:0; padding:.8em; box-sizing:border-box; width:100%; transition:all .6s; }
form li textarea{ resize:none; height:4em; min-height:4em; transition:all .6s; }
form li input:focus ,form li textarea:focus{ border-color:#cf7ffa; }
form li textarea:focus{ resize:vertical; height:10em; min-height:10em; }
form li input[type="checkbox"] ,form li input[type="radio"]{ position:absolute; top:0; left:0; width:100%; height:100%;cursor:pointer; z-index:1; border:none;  opacity:0;}

/* ------------------------------------------------------------------ */
.GID{ margin-right: 1em; align-items: center; font-weight: bold;line-height: 50px;}
/* 提示文字 */
.msg{ font-weight: 900;padding-top:.2em; display: flex; justify-content:space-between;}
.agree .check-style .msg .error{position: relative;}
#agree ~ a{color: #8081ff; padding:1.2em 1em;text-decoration:underline;}
/* 重要資訊 */
.important{color: #8081ff;padding-left: .6em;font-size: .8em;}
/* 錯誤時 display: block; 正確 display: none; */
.error,.error_3{color: #e60012; display: block;position: absolute;}
/* 忘記密碼 */
.forget{position: absolute; right:0;}
.forget a,.change a{ border-bottom:solid 1px #8081ff; color:#8081ff; padding-bottom:.2em;}
/* 驗證碼 */
.captcha_block{display:flex; justify-content: flex-start;}
.captcha_block > input{width: 56%;}
.captcha{background-color: gray; width:calc(100%/2); margin-left:8px;}
.change{text-align: right; position: absolute; right:0;}
.change span{margin-right:.6em;}
/* 倒數計時 */
.time_block{text-align: center; margin: 2em 0;}
.time{font-size: 100px; color: #8081ff;}


/* 下拉選單 */
.select-style{ display:flex; justify-content: space-between; align-items: center;}
.select-style li{ position:relative; display:inline-block; outline:0; width:100%; margin-bottom:0; margin-right:8px;}
.select-style li:last-child{margin-right:0;}
.select-style ~ input{margin-top:8px;}
.select-area{width: 20%;color:#8081ff; }
.select-style li:after{ content:'\f107'; font-weight:900; color:#8081ff; position:absolute; right:0; top:0; display:inline-block; padding:.8em; height:100%; box-sizing:border-box; pointer-events:none;}
.select-style li select{ position:relative; border:1px solid #8081ff; border-radius:3px; pointer-events:auto; box-sizing:border-box; padding:.8em; -moz-padding:0;  width:100%; outline:none; color:#8081ff; letter-spacing:.1rem; cursor:pointer;}
.select-style li select option{ background:#fff; color:#8081ff; border:none; outline:none; padding:.4rem;}
.select-style select:disabled{ background:#ebebe4; pointer-events:none; }
.select-style li::-ms-expand{ display:none; }
.tel-style li select option:nth-child(-n+5){background:#e6e6ff;color:#8081ff;}
.during{ display:block; width:100%;}
.during .select-style ,.other .during .select-style{ display:flex; width:100%; }
.during .select-style li ,.during .select-style span{ padding:0 4px; }
.during .select-style li:nth-of-type(1){ padding-left:0; }
.during .select-style li:nth-last-of-type(1){ padding-right:0; }

/* 輸入 */
form input[type=date]::-webkit-inner-spin-button ,form input[type=number]::-webkit-inner-spin-button{ visibility:hidden;}
form input[type=number]{ -moz-appearance:textfield; }
form input[type="color"]{ padding:0; height:3rem; width:3rem;}
form input[type="color"]::-webkit-color-swatch ,form input[type="color"]::color-swatch{ border:none; } 
form input[type="color"]::-webkit-color-swatch-wrapper ,form input[type="color"]::color-swatch-wrapper{ padding:0; }
form input[type="password"]+.msg {
    height: 19px;
    line-height: 21px;
}
form input[type="password"]+.msg>.error {
    width: 75%;
}
#registerForm .input-style li div.msg{
  height: 19px;
  line-height: 21px;
}
#registerForm .input-style li div.msg .error{
  width: 75%;
}
#registerForm .input-style li .gender li{
  margin-bottom: 0;
}
#registerForm .input-style li .gender .msg{
  position: absolute;
  width: 100%;
  margin: 1rem 0 0 0;
}

/* 單選 */
.gender{display: flex; align-items: center;}
.gender li{margin-right:16px;}
.check-style li input[type="radio"] + label:before{
	content:'\f111';
	padding-right:.35em;
	font-size:1.5em;
	color: #8081ff;

}
.check-style li input[type="radio"]:checked + label:before{
	content:'\f192';
	font-weight:900;
}

/* 複選 */
.check-style li input[type="checkbox"] + label:before{ content:'\f0c8'; padding-right:.35em; font-weight:400;}
.check-style li input[type="checkbox"]:checked + label:before{ content:'\f14a'; font-weight:900; }
.agree .check-style{text-align: center;}
.agree .check-style li{margin-bottom:0;}
.agree_block{
  display: flex;
  justify-content:center;
}


/* 其他資料輸入 */
.accordion {
  width: 100%;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  margin:0;
}
.accordion .item {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.accordion .item label.menulabel {
  width: 50%;
  background-color: #fff;
  color: #8081ff;
  font-size: 20px;
  font-weight: normal;
  display: flex;
  justify-content:center;
  cursor: pointer;
  position: relative;
  margin: 0 auto;
  padding: .2em 0;
  overflow: hidden;
  border-bottom: 1px solid #8081ff;
}
.accordion .item label.menulabel:after {
  content: "\f0d7";
  /* font-family: 'Font Awesome 5 Free'; */
  font-weight: 900;
  font-size: 1.2em;
  padding:.1em .4em;
  color: #8081ff;
  transition: transform 200ms ease-out;
  -webkit-transition: transform 200ms ease-out;
  -moz-transition: transform 200ms ease-out;
}
.accordion .item input[type="radio"],
.accordion .item input[type="checkbox"] {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  z-index: 999;
}
.accordion .item input[type="radio"][hidden="hidden"],
.accordion .item input[type="checkbox"][hidden="hidden"] {
  visibility: hidden;
  top: -100%;
}
.accordion .item input[type="radio"][hidden="hidden"] + label:after,
.accordion .item input[type="checkbox"][hidden="hidden"] + label:after {
  display: block;
}
.accordion .item input[type="radio"]:focus,
.accordion .item input[type="checkbox"]:focus {
  outline: none;
}
.accordion .item input[type="radio"]:checked ~ .acoordion-content,
.accordion .item input[type="checkbox"]:checked ~ .acoordion-content {
  /* padding: 10px 20px; */
  height: auto;
}
.accordion .item input[type="radio"]:checked + label.menulabel,
.accordion .item input[type="checkbox"]:checked + label.menulabel {
  color: #8081ff;
}
.accordion .item input[type="radio"]:checked + label.menulabel:after,
.accordion .item input[type="checkbox"]:checked + label.menulabel:after {
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
}
.accordion .item .acoordion-content {
  height: 0px;
  margin: 1em 0;
  color: #333;
  overflow: hidden;
  transition: padding 200ms ease-in-out;
  -webkit-transition: padding 200ms ease-in-out;
  -moz-transition: padding 200ms ease-in-out;
}

/* 申請日期&門市 */
.application{display: flex;}
.application div{margin-right: 2em;}

/* 卡片 */
.card_block{
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
.card_block img{
    width: 100%;
    height: auto;
    margin: 24px auto;
}
.binding_block{
  text-align: center;
  margin-top: 24px;
}
/* .card_block{
  display: flex;
  justify-content:space-around;
}
.card{
  width: 100%;
  height: 160px;
  border-radius: 8px;
  margin-right:.4em;
  background-color: #f5f5f5;

}
.card:last-child{
  margin-right:0;
} */




/* 個人資料欄位 */
.personal_info{
  display: flex;
  justify-content: center;
  align-items: center;
  margin:3em auto;
}

.personal{padding-left:2em;}
.edit_phone:after{
  content: '\f044';
  font-weight: 900;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(0%,0%);
  line-height: 1.5em;
  color: #8081ff;
}
.edit_phone:hover:after{
  color: #cf7ffa;
}

/* 同意書卷軸 */
.join_notice{
  height: 400px;
  overflow-y: scroll;
  background: #f5f5f5;
  padding: 2em;
  border-radius: 8px;
}
.join_notice h1{
  text-align: center;
  padding-bottom: .4em;
}


/* 訂閱 */
.subscribe_area{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.subscribe_box{
  width: calc(100%/4);
  padding: .4em;
  box-sizing: border-box;
}
.subscribe_title{
  text-align: center;
  color: #fff;
  background-color:#D8D8D8;
  font-size: 1.2em;
  font-weight: bold;
  border-radius:8px;
}
.subscribe{
  color: #fff;
  background-color: #8081ff;
}
.subscribe_box .image-container{
  width: 60%;
  display: block;
  overflow: hidden;
  margin: 1em auto 0 auto;
}
.subscribe_box .image{
  width: 60%;
  display: block;
  padding-top: 60%;
  -webkit-background-size: contain;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transform:scale(1,1);
  transition: all .3s ease-out;
}
.subscribe_btn{
  display: flex;
  flex-direction: column;
  margin: 0;
}
.sub_btn ~ label{
  padding: 0;
  font-size: .8em;
}

.subcheck-style{
  font-size: 1.4em;
  /* margin-top: 1em; */
}

/* 191120 */
.subscribe_box{ display:flex; flex-wrap:wrap; width:100%; }
.subscribe_box li{ position:relative; width:calc(100% / 4 - .6em); margin:.3em; padding:.6em; box-sizing:border-box; text-align:center; color:#fff; font-size:1.2em; font-weight:bold; border-radius:8px; overflow:hidden;}
.subscribe_box li label{ position:relative; /* z-index:2;  */ z-index:0; pointer-events:none; }
.subscribe_box li input[type="checkbox"]{ position:absolute; width:100%; height:100%; left:0; top:0; /* background:#D8D8D8; */ opacity: 0; z-index:2; cursor:pointer; }
.subscribe_box li:before{ content: ''; display: block; position:absolute; width:100%; height:100%; left:0; top:0; background:#D8D8D8; z-index:0; cursor:pointer; opacity: 1;}
.subscribe_box li.checkla:before{ background:#8081ff; }
.subscribe_box li input[type="checkbox"] + label:before{ content:'\f0c8'; font-weight:bold; color:#fff; margin-right:.4em; }
.subscribe_box li.checkla input[type="checkbox"] + label:before{ content:'\f14a'; }
/* .subscribe_box li input[type="checkbox"]:checked{ background:#8081ff; } */
/* .subscribe_box li input[type="checkbox"]:checked + label:before{ content:'\f14a'; } */

/* cancel button*/
.btnCancel{
	width: 54px;
	margin: 10px;
	background-color: #fff;
	font-size: 1em;
	font-weight: bold;
	color: #AAAAAA; 
	line-height: 1.5em;
}


/* mobile */
@media screen and (min-width:326px) and (max-width:1199.98px){
	/* 表格共用設定 */ 
	form{ margin-bottom:1em;}
  .join_notice{
    padding: 2em 1em;
    box-sizing: border-box;
  }
	/* 下拉選單 */
	.select-style{ display:flex; justify-content: space-between; flex-direction:column; align-items: normal;}
	.select-style li{ width:100%; margin-bottom:8px; margin-right:0;}
  .select-area {padding: 1em 0;}

  /* 提示文字 */
  .msg{ display:block;}
  /* 同意 */
  #agree ~ a{padding:1.2em .6em;}

  /* 驗證碼 */
  .change{text-align: left;}

  /* 訂閱 */
  .sub_title{font-size: 1.2em;}
  .subscribe_area{
    flex-direction: column;
  }
  .subscribe_box{
    width:100%;
    margin: 0;
  }
  .subcheck-style{
    margin-top: .4em;
  }
  .subscribe_box li{ width:100%; }

}

/* -----------------------iphone 5---------------------------- */
@media( max-width:325px ){
  
  /* 表格共用設定 */ 
  .input_container {padding: 0 16px;}
  form{ margin-bottom:1em;}
  .join_notice{
    padding: 2em 1em;
    box-sizing: border-box;
  }
  /* 下拉選單 */
  .select-style{ display:flex; justify-content: space-between; flex-direction:column; align-items: normal;}
  .select-style li{ width:100%; margin-bottom:8px; margin-right:0;}
  .select-area {padding: 1em 0;}

  /* 提示文字 */
  form li.must label:before{top:0;}
  .msg{ display:block;}
  /* 同意 */
  #agree ~ a{padding:1.2em .6em;}

  /* 驗證碼 */
  .change{text-align: left;}
  .captcha_block > input{width: 100%;}
  .captcha_block .btn-style{margin: 0 0 0 4px;}

  /* 訂閱 */
  .sub_title{font-size: 1.2em;}
  .subscribe_area{
    flex-direction: column;
  }
  .subscribe_box{
    width:100%;
    margin: 0;
  }
  .subcheck-style{
    margin-top: .4em;
  }
  .subscribe_box li{ width:100%; }

  /* 勾選同意按鈕 */
  .agree_block{
    display: block;
  }
  form li input[type="checkbox"] ,form li input[type="radio"]{
    height: 10px;
  }
  form li label{
    padding:0;
  }
  #agree ~ a{
    padding:0;
  }
  /* 彈跳視窗 */
  .ID {
    margin: 0;
    padding: .4em;
  }
  .ID-title{
    padding: 0;
  }
  .popup .code_block .close {
    left: 42%;
  }
  /* register */
  .select-style li:after{
    padding: .2em .8em;
  }

}