/** Loading **/
#page-loading{
  height: 100vh;
  width: 100%;
  top:0;
  left:0;
  transition :0.3s;
  background-color: #fff;
  position: fixed!important;
  overflow: auto;
  z-index: -1;
  opacity:0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#page-loading.active{
  opacity: .7;
  z-index: 999999;
}

/** Title **/
.title, .title-icon, .title-underline {
  color: #C1996B;
  font-size: 1.8rem;
  letter-spacing: 8px;
}

.title-underline {
  border-bottom: solid 2px #C1996B;
}

.title-icon:before {
  content: '';
  height: 30px;
  width: 40px;
  display: inline-block;
	background: url(/media/uploads/default/icon/會員中心ICON30X30.png) no-repeat;
}

.title-md {
  color: #734B23;
	font-size: 1.2rem;
}

.sub-title-md {
  color: #734B23;
	font-size: 0.6rem;
}

.title-sub {
  font-size: 0.8rem;
}

/** Content **/
.text-focus {
  color: #EB651A;
  font-weight: bolder;
}

.search-focus {
  background-color: #FFE386;
}

.content-lg-light {
  color: #C1996B;
  font-size: 1.2rem;
  letter-spacing: 2px;
}

.content-lg-dark {
  font-size: 1.2rem;
  letter-spacing: 2px;
}

.content-md,
.content-md-icon {
  color: #C1996B;
}

.content-md-icon:before {
  content: '';
  height: 20px;
  width: 27px;
  display: inline-block;
	background: url(/media/uploads/default/icon/紅圈20X20.png) no-repeat;
}

.content-sm {
  font-size: 0.8rem
}

.message-focus {
  font-size: 1rem;
  margin-left: 10px;
  color: #EB651A;
  font-weight: bolder;
  letter-spacing: 1px;
}

.slogan-focus {
  font-size: 1.5rem;
  font-weight: bolder;
}

/** 細項 **/
.detail-item {
	margin-bottom: 0.2rem;
	color: #C1996B;
	font-size: 1.2rem;
	letter-spacing: 2px;
}

.detail-item-title {
	display: inline-block;
	width: 165px;
}

.detail-item-content {
  margin-left: 10px;
  color: #734B23;
  letter-spacing: 1px;
}

.detail-item-content-focus {
  margin-left: 10px;
  color: #EB651A;
  font-weight: bolder;
  letter-spacing: 1px;
}

/** Block **/

.block-shadow {
  background: #fff;
  box-shadow: 5px 5px 12px -9px #000;
}

/** Input pwd encrypt **/
.password-block {
  position: relative;
}

.show-password-icon {
  position: absolute;
  bottom: 8px;
  right: 5px;
  width: 30px;
  height: 20px;
  background: url(/media/uploads/default/icon/眼睛icon60x302.png) no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}

.show-password-icon.active {
  position: absolute;
  bottom: 10px;
  right: 5px;
  width: 30px;
  height: 16px;
  background: url(/media/uploads/default/icon/眼睛icon60x30.png) no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}

/** Birthday **/
.year,
.month {
  font-size: 1.2rem;
  color: #C1996B;
  padding-top: 5px;
  text-align: center;
}

/** 開團跟團 揪友自取 流程模版 **/
#nav-group-buy-shop-process.step-line,
#nav-group-buy-shop.step-line {
  display: flex;
  width: 100%;
  height: 5px;
  margin: 40px 0 70px 0;
  background-color: #C1996B;
  /*
  position:sticky;
  top: 65px; */
}

#nav-group-buy-shop-process.step-line .step-anchor,
#nav-group-buy-shop.step-line .step-anchor{
  position: relative;
  flex: 1;
}

#nav-group-buy-shop-process.step-line .step-anchor .step-circle,
#nav-group-buy-shop.step-line .step-anchor .step-circle {
  position: absolute;
  top: -30px;
  left: calc(50% - 20px);
  width: 60px;
  height: 60px;
  padding: 5px;
  text-align: center;
  vertical-align: middle;
  font-size: 26px;
  font-weight: bolder;
  color: #FFF;
  background: radial-gradient(circle, #C1996B, #886138);
  border: solid 5px #C1996B;
  border-radius: 50%;
  transition: 0.5s;
}

#nav-group-buy-shop-process.step-line .step-anchor .step-msg,
#nav-group-buy-shop.step-line .step-anchor .step-msg {
  position: absolute;
  top: 40px;
  left: 10px;
  width: 100%;
  height: 40px;
  padding: 5px;
  vertical-align: middle;
  text-align: center;
  font-size: 1.2rem;
  font-weight: bolder;
  color: #C1996B;
  transition: 0.5s;
}

#nav-group-buy-shop-process.step-line .step-anchor .step-circle.active,
#nav-group-buy-shop.step-line .step-anchor .step-circle.active{
  color: #FFF;
  background: radial-gradient(circle, #E61F19, #8B1C21);
  transition: 0.5s;
  box-shadow: 5px 5px 10px -5px #000;
}

#nav-group-buy-shop-process.step-line .step-anchor .step-msg.active,
#nav-group-buy-shop.step-line .step-anchor .step-msg.active{
  color: #5E3819;
  transition: 0.5s;
}

/** 錯誤input, div警示 **/
.input-attention{
  border-color:red !important;
}

.div-attention{
  border: 1px red solid;
  border-radius: 0.25rem;
}

/** label radio, label checkbox, show-menu  **/
.label-radio,
.label-checkbox,
.show-menu {
  cursor: pointer;
}

.label-radio::before {
  display: inline-block;
  content: '';
  height: 15px;
  width: 20px;
  background: url(/media/uploads/default/icon/圈選2ICON30X30.png) no-repeat;
  background-size: 15px 15px;
}

.label-radio.active::before {
  background: url(/media/uploads/default/icon/圈選1ICON30X30.png) no-repeat;
  background-size: 15px 15px;
}

.label-checkbox::before {
  display: inline-block;
  content: '';
  height: 15px;
  width: 20px;
  background: url(/media/uploads/default/icon/打勾1ICON30X30.png) no-repeat;
  background-size: 15px 15px;
}

.label-checkbox.active::before {
  background: url(/media/uploads/default/icon/打勾2ICON30X30.png) no-repeat;
  background-size: 15px 15px;
}

.show-menu::before {
  display: inline-block;
  content: '';
  height: 15px;
  width: 20px;
  background: url(/media/uploads/default/icon/隱藏商品往下箭頭30X30.png) no-repeat;
  background-size: 15px 15px;
}

.show-menu.active::before {
  background: url(/media/uploads/default/icon/隱藏商品往上箭頭30X30.png) no-repeat;
  background-size: 15px 15px;
}

/** table **/
.table-seq {
  vertical-align: baseline;
}

.table-show-detail-content {
  position: relative;
}

.table-detail-content {
  display: none;
}

.table-arrow {
  position: absolute;
  top: 10px;
  width: 30px;
  height: 30px;
  background: url(/media/uploads/default/icon/icon30x30分箭頭1.png) no-repeat;
}

.table-arrow:hover {
  background: url(/media/uploads/default/icon/icon30x30分箭頭3.png) no-repeat;
  cursor: pointer;
}

.table-arrow.active {
  background: url(/media/uploads/default/icon/icon30x30分箭頭2.png) no-repeat;
  cursor: pointer;
}

.table-arrow.active:hover {
  background: url(/media/uploads/default/icon/icon30x30分箭頭4.png) no-repeat;
  cursor: pointer;
}

/** icon **/
.icon-show {
  display: inline-block;
  content: '';
  height: 20px;
  width: 20px;
  background-size: 20px 20px;
}