@import url('https://fonts.googleapis.com/css2?family=Tiro+Devanagari+Hindi&display=swap');
* {
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important; /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}

html,body {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
    scroll-behavior: smooth;
}
.downloadImg {
  position: relative;
  width: 100%;
  padding-top: 70%;
  -webkit-touch-callout: default; 
  overflow: hidden;
}
.downloadImg img {
  -webkit-touch-callout: default; 
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}
html{
  touch-action: manipulation !important;
  -ms-touch-action: manipulation !important;
}
body{
  background-color: #fbf9f7;
  -webkit-overflow-scrolling: touch;  
  padding-top: constant(safe-area-inset-top);   /* 針對ios APP */
  padding-right: constant(safe-area-inset-right);  /* 針對ios APP */
  padding-bottom: constant(safe-area-inset-bottom); /* 針對ios APP */
  padding-left: constant(safe-area-inset-left); /* 針對ios APP */
}
/* 通用 */
.clear{clear:both;}
.link,a:hover{color:var(--second);}
.gap-25{height: 25px;}
.d-inline-block{display: inline-block !important;}
.w-100 {
    width: 100%;
}
.f20{font-size: 20px !important;}
.f15{font-size: 15px !important;}
.d-flex{
  display: flex;
}
.d-block{
  display: block;
}
.justify-content-between{
  justify-content: space-between;  
}
.align-items-center{
  align-items: center;
}
.align-items-end{
  align-items: end;
}
.main{
  overflow: visible;
}
.text-primary{color:var(--main);}
.bg-main{
  background-color: var(--main);
}
.main.rent .bg-main{
  filter:hue-rotate(161deg) grayscale(.4);
}
.bg-main-light{
  background-color: var(--mainlight);
}
.page.fullscreen.bg-main-light{
  background-color: #e7dfd0;
}
.bg-main-light.lt{
  background-color:#fbf9f7;
}
.bg-main-dark{
  background-color: var(--maindark);
}
.bg-second{
  background-color: var(--second);
}
.bg-second-light{
  background-color: var(--secondlight);
}
.bg-second-light.lt{
  background-color: var(--secondlighter);
}
.bg-second-dark{
  background-color: var(--seconddark);
}
.text-main-dark{
  color: var(--maindark);
}
.menu_bar span{
  position: relative;
  display: block;
  width: 20px;
  height: 1px;
  margin: 7px auto;
  border-top: 1px solid #fff;
  transition: .3s cubic-bezier(.45,0,.55,1);
}
#slide-out{
  /* padding-top: calc((100vh - 180px) / 2); */
  border-radius: 60px 0 0 60px;
  background: url(../img/page/menu_bg.png) center/cover;
  filter: brightness(1.3) grayscale(.5);
  height: 100vh;
  max-width: 200px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}
#slide-out.share{
  display: block;
}
.share#slide-out{
  padding-top: 0vw;
}
#slide-out.side-nav  li{width: 100%;}
.opacity-5{opacity: .5;}
.opacity-6{opacity: .6;}
.opacity-7{opacity: .7;}
.opacity-8{opacity: .8;}
h1.title{color: #62553e;font-weight: 500; letter-spacing: 2px;overflow: hidden; text-overflow: ellipsis;white-space: nowrap;}
h6.title{color:var(--maindark);font-size: 18px;font-family: "Tiro Devanagari Hindi",var(--font);opacity: .5;}
.header{
  position: relative;
  background-color: var(--mainlighter);
  width: 100%;
  top: 0;
  padding: 13% 0 5%;
  border-radius: 0 0 0 60px;
}
.needs .header,.needs .primary-color{
  filter: grayscale(1);
}
/* .header::after{
  content: '';
  width: 60px;
  height: 70px;
  line-height: 100px;
  display: block;
  text-align: center;
  background-image: radial-gradient(60px at 60px 0px, #fff0 60px, #fbf9f7 60px);
  position: absolute;
  bottom: -10px;
  left: 0px;
} */
.header::before{
  content: '';
  background-image: url(../img/main.png);
  background-size: cover;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  opacity: .2;
  background-position: 30%;
  border-radius: 0 0 0 60px;
}
.contact.header::before{
    bottom: 38px;
    left: 0px;
}
.fullscreen .contact.header::before{
    bottom: -10px
}
#toolbar.primary-color.nobg{
  background-color: transparent !important;
}

.row .col.s45 {
    width: 45%;
    margin-left: auto;
    left: auto;
    right: auto;
}
.row .s_10 {
    width: 10%;
    margin-left: auto;
    left: auto;
    right: auto;
}
.shop-banner .btn-icon {
    width: 60px !important;
    margin: 0 auto 15px;
}
.shop-banner:first-child .valign-wrapper {
    border-right: 1px solid #eee;
}
.hero-material .tbl{height: 100%;}
.justify-content-center{
  justify-content: center;
}
input[readonly]{background-color: #efefef;color: #666;}
.box_title{
  position: relative;
  background: #e3e8ef;
  padding: 4px 5px 5px 50px !important;
  font-size: 20px;
  color: #474747;
  border-radius: 0 10px 10px 0;
  font-weight: 500;
  width: calc(100% - 20px) !important;
  left: 14px !important;
}

.box_title:before {
  font-family: 'Line Awesome Free';
  content: "\f101";
  display: inline-block;
  line-height: 40px;
  position: absolute;
  padding: 0em;
  color: white;
  background: var(--second);
  font-weight: 900;
  width: 40px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  left: -10px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border-radius: 50%;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.29);
}
.box_title span{
    background-color: #f6f6f6;
    padding: 2px 10px;
    z-index: 2;
    font-weight: 500;
    color: var(--maindark);
    position: relative;
    display: inline-block;
}
/* .box_title{position: relative;}
.box_title span{
    background-color: #f6f6f6;
    padding: 2px 10px;
    z-index: 2;
    font-weight: 500;
    color: var(--maindark);
    position: relative;
}
.box_title.s12{padding-left: 0;margin-bottom: 40px;}
.box_title::before{
  content: '';
  width: calc(100% - 15px);
  position: absolute;
  top: 10px;
  left: 0;
  border-top: 1px solid var(--maindark);
} */
/* modal */
.modal.top-sheet {
    top: auto;
    top: 0% !important; 
    margin: 0;
    width: 100%;
    max-height: 65vh;
    border-radius: 0;
    overflow-y: hidden;
    will-change: top, opacity;
}
.modal.top-sheet .modal-content{
  padding: 0;
}
#modal_copy{
  border-radius: 15px;
}
#modal_copy i.la-check-circle{
    color: cadetblue;
    font-size: 50px;
    display: inline-block;
    margin-bottom: 10px;

}
.share_title {
    position: relative;
    padding: 7px 5px 7px 42px;
    background: var(--second);
    font-size: 18px;
    color: white;
    margin-left: -33px;
    line-height: 1.3;
    z-index: -1;

}
#slide-out .share_title::before{
  border-left:solid 40px #c1bcb6;
}
.share_title::before {
position: absolute;
  content: '';
  left: -2px;
  top: -2px;
  border: none;
  border-left: solid 40px white;
  border-bottom: solid 45px transparent;
  z-index:-2
}
label~p{
  position: relative;
  display: none;
  text-align: left;
  color: #d14949;
  font-size: 12px;
  transform: translate(6px,-10px);
}
textarea~label~p{
  transform: translateY(-15px);
}
[type="date"] ~p,[type="number"] ~p{
  transform: translate(6px,0px);
}
select~p{
  transform: translate(6px,-10px);
}
[type="checkbox"] ~p{
   transform: translate(-20px,13px);
}
.input-field select~label{
  display: none;
}
#filter_city_list,.modal_li{
  background-color: #fff;
  margin: 0;
}
#filter_city_list li,.modal_li li{
  padding: 11px 20px;
  border-bottom: 1px solid #ebedf0;
}
#filter_city_list li.active ,.modal_li li.active ,.modal_li li.active a{
  background-color: var(--main);
  color: #fff;
}
.filter_title{
  border-bottom: 1px solid #eee;
}
.filter_content .row .s6{padding: 0;}
.filter_content .row .s6:first-child > span.filter_title{
    font-weight: 600;
    color: #936424;
    font-size: 14px;
    border-bottom: 1px solid #936424;
}
.filter_content .row .s6:last-child > span.filter_title{
    font-weight: 600;
    color: #2a6089;
    font-size: 14px;
    border-bottom: 1px solid #2a6089;
}
.filter_content .row .s6:first-child > span.filter_title + .row .s6:not(:last-child){
  border-right:1px solid #e8cba4;
}
.filter_content .row .s6:last-child > span.filter_title + .row .s6:not(:last-child){
  border-right:1px solid #bfdaef;
}
#region_check{line-height: .3; background-color:#fafafa;}
#region_check label{
  display: block;
  text-align: initial;
  padding: 5px 20px 5px 15px;
  border-bottom: 1px solid #ebedf0;
  height: auto;
  line-height: 2.3;
  margin-right: 0;
}
#region_check [type="checkbox"]+label:before{
    right: 10px;
    left: auto;
    top: 6px;
}
#region_check [type="checkbox"]:checked+label:after{
    right: 21px;    
    top: 6px;
    left: auto;
}
.scoll_area{
  height: calc(65vh - 120px);
  overflow: scroll;
  position: absolute;
  top: 48px;
  width: 100%;
}
.scoll_area > .col.s6{
  overflow-y: auto;   
  overflow-x: hidden;     
  -webkit-overflow-scrolling: touch;       
  height: 100%;        
  float: left;
}
#filter_1,#filter_2,#filter_3,#filter_4{
  position: relative;
  min-height: 65vh;
}
#filter_2{
  min-height: 53vh;
}
#filter_3{
  min-height: 54vh;
}
#filter_4{
  min-height: 65vh;
}
.fix_area{
  padding: 10px 0;
  position: absolute;
  width: 100%;
  bottom: 0px;
}
ul.filter_cate {
    list-style: none;
    padding: 10px;
    margin: 0;
    text-align: start;
}
ul.filter_cate li{
  display: inline;
}
ul.filter_cate li label{
    display: inline-block;
    background-color: rgba(255, 255, 255, .9);
    border: 1px solid rgba(139, 139, 139, .5);
    color: #828181;
    border-radius: 5px;
    white-space: nowrap;
    margin: 3px 0px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: all .2s;
}

ul.filter_cate li label ,ul.filter_cate li:not(:checked) label{
    padding: 2px 30px;
    margin-right: 0;
    cursor: pointer;
    text-align: center;
    width: calc(100% / 3.1);
    height: auto;
}

ul.filter_cate li label::before{
    display: inline-block;
    background-color: transparent;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 12px;
    padding: 2px 6px 2px 2px;
    content: "";
    border: none !important;
    transition: transform .3s ease-in-out;
}
ul.filter_cate li input[type="radio"]:checked+label:after {
    top: 2px;
    left: 4px;
    width: 7px;
    height: 14px;
    border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    -webkit-transform: rotate(40deg);
    transform: rotate(40deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    background-color: transparent;
    border-radius: 0px !important;
}
ul.filter_cate li input[type="checkbox"]:checked + label::before ,
ul.filter_cate li input[type="radio"]:checked + label::before{
    content: "";
    transform: rotate(-360deg);
    background-color: transparent;
    transition: transform .3s ease-in-out;
    left: 4px;
    top: 4px;
    border: none !important;
}

ul.filter_cate li input[type="checkbox"]:checked + label::after{
    top: 4px;
    left: 8px;
}
ul.filter_cate li input[type="checkbox"]:checked + label ,
ul.filter_cate li input[type="radio"]:checked + label{
    border: 1px solid var(--second);
    background-color: var(--second);
    color: #fff;
    transition: all .2s;
}

ul.filter_cate li input[type="checkbox"],
ul.filter_cate li input[type="radio"] {
  position: absolute;
}
ul.filter_cate li input[type="checkbox"],
ul.filter_cate li input[type="radio"] {
  position: absolute;
  opacity: 0;
}
ul.filter_cate li input[type="checkbox"]:focus + label,
ul.filter_cate li input[type="radio"]:focus + label {
  border: 1px solid #f5f4f4;
}
ul.filter_cate li [type="radio"]:not(:checked)+label:before,
ul.filter_cate li [type="checkbox"]:not(:checked)+label:after {
  background-color: transparent;
}
[type="checkbox"]+label[for^=neer]{min-width: calc(100% / 2.6);}
/* 買賣物件 */
.loading.v1 .hero-material,.loading.v2 .hero-material{height: 580px;}
.loading.v1 .list_bg{
  background-image: url(../img/page/list_1.png);
  background-size: 70%;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}
.loading.v2 .list_bg{
  background-image: url(../img/page/list_2.png);
  background-size: 70%;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}
.menu_btn{
  content: '';width: 80px;
  height: 80px;
  background-size: 70%;
  width: 80px;
  height: 80px;
  background-size: 70%;
  position: relative;
  background-position: center;
  border: 2px dotted var(--main);
  background-color: #ffffff;
  padding: 10px;
  background-repeat: no-repeat;
  border-radius: 10px;
  margin: 10px auto;
}
.menu_btn:hover{
  background-color: var(--second);
  box-shadow: 0 0 10px rgb(0 0 0 / 15%);
}
.menu_btn.v1 {
  background-image: url('../img/icon/menu_1.png')
}
.menu_btn.v1:hover {
  background-image: url('../img/icon/menu_1w.png')
}
.menu_btn.v2 {
  background-image: url('../img/icon/menu_2.png')
}
.menu_btn.v2:hover {
  background-image: url('../img/icon/menu_2w.png')
}
.menu_btn.v3 {
  background-image: url('../img/icon/menu_3.png')
}
.menu_btn.v3:hover {
  background-image: url('../img/icon/menu_3w.png')
}
.menu_btn.v4 {
  background-image: url('../img/icon/menu_4.png')
}
.menu_btn.v4:hover {
  background-image: url('../img/icon/menu_4w.png')
}
.list_bg::before{
  content: '';
  position: absolute;
  width: 70vw;
  height: 3px;
  left: 15vw;
  bottom: -25px;
  /* border: 1px solid var(--main); */
  background:radial-gradient(ellipse 80% 20% at center,var(--main),#f6f6f6);
}
.list_bg h3{
  transform: translateY(61px);
  color: var(--maindark);
  font-weight: 600;
  letter-spacing: 2px;
  background-color: var(--maindark);
  display: inline-block;
  border-radius: 25px;
  color: #fff;
  padding: 5px 12px;
  font-size: 16px;
}
.filter_content{
  padding: 5px 0;
  border-bottom: 1px solid #eee;
  /* box-shadow: 0 0 15px rgba(0 0 0 /10%); */
  position: -webkit-sticky;
  position: sticky;
  background-color: #fff;
  margin-bottom: 0;
  top: 0px;
  z-index: 99;
}
.heads-up ~ .page .filter_content{
  top: 0;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.filter_content .row{
  margin-bottom: 0;
}
.filter_content .col{
  text-align: center;
}
.filter_content .col:not(:last-child){
  border-right: 1px solid #eee;
}
.filter_content .col span{
    width: calc(100% - 31px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
}
.filter_content.no_icon .col span{
  width: 100%;
}
.filter_content .col:first-child .s6.active {
    color: #fff;
    background-color: #e9a54e;
    font-weight: 500;
}
.filter_content .col:last-child .s6.active {
    color: #fff;
    background-color: #4d85b0;
    font-weight: 500;
}
.filter_content i,.modal .filter_content .col i{
    font-size: 12px;
    transform: translateY(0px);
    padding-left: 5px;
}
.modal .filter_content .col i{
  transform: translateY(0px);
}
.modal .filter_content{
  top: 0px;
  padding: 0;
}
.modal .filter_content .tabs{
  border-bottom: 2px solid #d5d5d5;
  position: absolute;
  width: 100%;
  top: 0;
  z-index: 9;
  background-color: #FFF;
}
.modal .filter_content .tabs li a{
  color: #666;
  font-weight: 600;
}
.modal .filter_content  a{
  display: block;
}
.modal .filter_content .tabs .indicator{
  opacity: 0;
}
.news_content{
  padding: 0 0 15px 0 ;
}
.news_content .row{
  position: relative;
  margin: 15px 0;
  padding: 10px 0 15px;
  border-bottom: 1px dotted var(--mainlighter);
}
.news_content h3{
  font-size: 16px;
  line-height: 1.4;
  margin-bottom: 0px;
  position: relative;
}
.news_content .s4 .cover{
  /* box-shadow:6px 6px 6px rgb(0 0 0 / 10%); */
}
.item_pre{
  margin: 0;
}
.cover{display: block;}
.item_pre li{
  position: relative;
  font-size: 13px;
  color: #666;
  padding: 0 4px;
  display: inline-block;
}
.item_pre li:first-child{
  padding-left: 0;
}
.item_pre li:not(:last-child)::before{
  border-right: 1px solid #e4e1e1;
  content: '';
  position: absolute;
  right: -2px;
  top: 2px;
  height: 15px;
}
.item_pre + p{
  font-size: 16px;
  margin-bottom: 0;
  color:#e75621;
  font-weight: 600;
  letter-spacing: 1.2px;
}
.pagination.item li input{
  background-color: #ffffff;
  text-align: center;
  width: calc(90px - 60px);
  border: 1px solid #e4e4e4;
  height: 40px;
  margin-left: -1px;
  padding: 0 33px;
}
.pagination.item li:last-child::before{
  content: '第：';
  position: absolute;
  color: #495057;
  z-index: 5;
  top: 13%;
  left: 10px;
  font-size: 12px;
  pointer-events: none;
}
.pagination.item li:last-child::after{
  content: '頁';
  position: absolute;
  color: #495057;
  z-index: 5;
  top: 13%;
  right: 10px;
  font-size: 12px;
  pointer-events: none;
}
.swiper-pagination.swiper-pagination-fraction{
    background-color: rgb(0 0 0 / 50%);
    display: inline-block;
    width: auto;
    padding: 2px 12px;
    right: 10px;
    left: auto;
    color: #fff;
    border-radius: 20px;
    bottom: 10px;
    font-size: 12px;
    font-weight: 600;
}
/* .address-data{
    background-color: #dfebf1;
    padding: 10px;
    color: #3d3d3d;
    margin: 5px 15px;
} */
.address-data {
    position: relative;
    margin: 1.5em;
    padding: 1em 1em;
    border: solid 2px var(--second);
    border-radius: 8px;
    background-color: #e9edf1;
    text-align: center;
}
.address-data .box-title {
    width: 60px;
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 0;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #fbf9f7;
    color: var(--second);
    font-weight: bold;
    text-align: center;
    margin: 0 auto;
    right: 0;
}
.address-data p {
    margin: 0; 
    padding: 0;
    color: var(--seconddark);
}
.search_input{
  padding: 10px;
  background-color: #fff;
  z-index: 100;
  position: relative;
  border-bottom: 1px solid #efefef;
}
.search_input input{
  border-radius: 5px 0 0 5px !important;
  margin-bottom: 0;
  height: 35px;
  background-color: #fafafa;
  border: 1px solid #eee;
}
.search_input button{
  height: 37px;
  border-radius: 0 5px 5px 0;
  background-color: var(--mainlighter);
  border: 1px solid var(--mainlighter);
  border-left: none;
  color: #aa9c81 !important;
}
/* table.item_data{
  border-collapse: separate;
  border-spacing: 2px;
} */
.item_data{background-color: #fff;}
table.item_data th{
  font-size: 13px;
  color: #999;
  padding:8px 5px;
  width: 67px;
  text-align: center;
  background-color: var(--bglight);
  border: 2px solid #fff;
}
table.item_data td{
  padding: 8px;
  color: #646464;
  border-bottom: 2px dotted #efefef ;
}
.cate_li{margin: 0;}
.cate_li li{
  display: inline-block;
  background-color: #eae8e1;
  color: #444;
  border-radius: 25px;
  margin: 15px 0 0px 8px;
  padding: 3px 18px;
}
.cate_li li.active{
  background-color: var(--main);
  color: #fff;
}
[for=pet5] + p {transform: translate(6px,10px);}
[type="radio"]+label,[type="checkbox"]+label{margin-bottom: 10px;}
[type="radio"]+label+p{transform: translate(6px,10px);}
/* switch */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 34px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 5px;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 24px;
  width: 24px;
  left: 2px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
.input-field.with_unit input{margin-bottom: 4px!important;}
input:checked + .slider {
  background-color: var(--main);
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
/* .always_show{display: block !important;} */
select.browser-default{
  padding: 0 20px 0 10px;
}
/* Rounded sliders */
.slider.round {
  border-radius: 34px;
  height: 30px;
}

.slider.round:before {
  border-radius: 50%;
}
.pre_tag{
  padding: 5px 5px;
  background: #ffedc8;
  color: #845e18;
  font-size: 13px;
  display: inline-block;
  width: 80px;
  border: 1px solid #aa6f02;
  line-height: 1;
  text-align: center;
  margin-bottom: 8px;
  margin-right: 5px !important;
}
.pre_tag.v2{
  background: #ffe8e2;
  border: 1px solid #961717;
  color: #961717;
}
.pre_tag.v3{
  background: #e4f8ff;
  border: 1px solid #2680ab;
  color: #2680ab;
}
.pre_tag.group{
    background: #e4f1e2;
    border: 1px solid var(--third);
    color: var(--third);
}
.address_data_box.col.s12{
  border: 1px solid var(--mainlight);
  border-radius: 0 5px 5px 5px;
  margin: 8px 0.75rem 25px;
  width: calc(100% - 1.5rem) !important;
  padding: 0 0 10px 0;
  background-color: var(--bglight);
}
.input_title.address_data_title{
  top: 5px !important;
  left: -1px !important;
  color: #fff !important;
  padding: 3px 10px !important;
  border-radius: 3px 3px 0 0 ;
  background-color: var(--main);
  text-align: center;
  display: inline-block;
}
/* 分享設定checkbox */
.cb-item_animated-marker [type="checkbox"]+label{
  height: auto;
  margin: 8px;
}
.cb-item_animated-marker [type="checkbox"]+label:before, .cb-item_animated-marker [type="checkbox"]:not(.filled-in)+label:after{
  content: none;
}
.cb-item_animated-marker,.cb-item_animated-marker *,.cb-item_animated-marker *::before,.cb-item_animated-marker *::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.cb-item_animated-marker {
    position: relative;
    display: inline-block;
    min-width: 145px;
    width: 100%;
    max-width: 280px;
    --cb_text-color: #333;
    --cb_bg-color: #f6f8f9;
    --cb_bg-color_checked: #d0b993;
    --cb_border-color: #ccc;
    --cb_marker-bg-color: #fff;
}
#slide-out .cb-item_animated-marker{
      margin-left: 25px;
}

@supports ((max-width: -webkit-max-content) or (max-width: -moz-max-content) or (max-width: max-content)) {
    .cb-item_animated-marker {
        max-width: -webkit-max-content;
        max-width: -moz-max-content;
        max-width: max-content;
    }
}

.cb-item_input {
    position: absolute;
    opacity: 0;
    z-index: -1;
}

.cb-item_animated-marker .cb-item_label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 5px 10px 5px 15px;
    cursor: pointer;
    font-size: 15px;
    line-height: 24px;
    color: #333;
    color: var(--cb_text-color);
    background-color: #f6f8f9;
    background-color: var(--cb_bg-color);
    border: 1px solid;
    border-color: #ccc;
    border-color: var(--cb_border-color);
    border-radius: 8px;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
    -webkit-tap-highlight-color: rgba(255,255,255, 0);
}

.cb-item_animated-marker .cb-item_label-content {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.cb-item_animated-marker .cb-item_marker {
    position: relative;
    display: inline-block;
    /* Needs for IE10 */
    width: 25px;
    height: 25px;
    margin-left: 15px;
    /* background-color: #fff; */
    /* background-color: var(--cb_marker-bg-color); */
    border: 1px solid;
    border-color: transparent;
    border-radius: 50%;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
}

.cb-item_marker_short-line,.cb-item_marker_long-line {
    position: absolute;
    overflow: hidden;
    height: 2px;
    background-color: transparent;
    -webkit-transform-origin: left;
    transform-origin: left;
}

.cb-item_marker_short-line {
    top: 9px;
    left: 5px;
    width: 10px;
    -webkit-transform: rotate(44.5deg);
    transform: rotate(44.5deg);
}

.cb-item_marker_long-line {
    top: 16px;
    left: 11px;
    width: 17px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.cb-item_marker_short-line::before,.cb-item_marker_long-line::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color:#fff;
    background-color: #fff;
    -webkit-transform: translateX(-110%);
    transform: translateX(-110%);
    -webkit-transform-origin: left;
    transform-origin: left;
    -webkit-transition: all .15s ease;
    transition: all .15s ease;
}
/* Checkbox with Animated Marker :checked State */
.cb-item_animated-marker .cb-item_input:checked + .cb-item_label {
    color: #fff;
    background-color: var(--cb_bg-color_checked);
}
#slide-out .cb-item_animated-marker .cb-item_input:checked + .cb-item_label {
    color: #fff;
    background-color: #ae8f5a;
}

.cb-item_animated-marker .cb-item_input:checked + .cb-item_label,.cb-item_animated-marker .cb-item_input:checked + .cb-item_label .cb-item_marker {
    border-color: transparent;
}

.cb-item_animated-marker .cb-item_input:checked + .cb-item_label .cb-item_marker_short-line::before,.cb-item_animated-marker .cb-item_input:checked + .cb-item_label .cb-item_marker_long-line::before {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.cb-item_marker_long-line::before,.cb-item_animated-marker .cb-item_input:checked + .cb-item_label .cb-item_marker_short-line::before {
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}

.cb-item_marker_short-line::before,.cb-item_animated-marker .cb-item_input:checked + .cb-item_label .cb-item_marker_long-line::before {
    -webkit-transition-delay: .12s;
    transition-delay: .12s;
}

/* Checkbox with Animated Marker :disabled State */
.cb-item_animated-marker .cb-item_input:disabled + .cb-item_label {
    cursor: default;
    color: #ccc;
    color: var(--cb_border-color);
}

/* Checkbox with Animated Marker :disabled:checked State */
.cb-item_animated-marker .cb-item_input:disabled:checked + .cb-item_label {
    background-color: #f6f8f9;
    background-color: var(--cb_bg-color);
}

.cb-item_animated-marker .cb-item_input:disabled:checked + .cb-item_label,.cb-item_animated-marker .cb-item_input:disabled:checked + .cb-item_label .cb-item_marker {
    border-color: #ccc;
    border-color: var(--cb_border-color);
}

.cb-item_animated-marker .cb-item_input:disabled:checked + .cb-item_label .cb-item_marker_short-line::before,.cb-item_animated-marker .cb-item_input:disabled:checked + .cb-item_label .cb-item_marker_long-line::before {
    background-color: #ccc;
    background-color: var(--cb_border-color);
}
.want_type_info{
  background-color: var(--second);
  color: #fff;
  text-align: center;
  padding: 5px 10px;
  margin-bottom: 40px;
}
.want_type_info i{position: relative !important;}
.shaking {
/*  width: 50px;
    height: 50px; */
    background-color: var(--main);
    position: relative;
    overflow: visible;
    margin: 0 30px;
  }
.shaking:after {
  background-color: rgb(193 179 154 / 20%);
}

.shaking:before {
  background-color: var(--main);
}
.shaking:before,
.shaking:after {
  content: '';
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  position: absolute;
  left: -5px;
  top: -5px;
  z-index: -1;
  animation: warn 1.5s ease-out 0s infinite;
}
.match_area {
    position: relative;
    margin: 2em 15px;
    padding: 5px;
    border: solid 3px #e4896b;
    background-color: #fff8f3;
    
}
.match_area .news_content .row{
  margin: 5px 0;
  padding: 10px 0;
  border-bottom: 2px dotted #dfbaae;
}
.scroll_match{
    max-height: 250px;
    overflow-y: scroll;
    overflow-x: hidden;
    /* padding-right: 1em; */
}
.match_area .box-title,.match_area .collapsible-header {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #e4896b;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.match_area .collapsible-header{
    min-height: 0;
    border-bottom: none;
    height: 35px;
    top: -35px;
    line-height: 30px;
}
.match_area .collapsible-header i{
    margin-right: 5px;
    font-size: 2rem;
}
.match_area .collapsible-header i:before{
  content: '\f150';
}
.match_area .collapsible-header.active i:before{
  content: '\f151';
}
.match_area.collapsible{padding: 0;box-shadow: none}
.match_area.collapsible li{ background: #fff8f3;}
.match_area.collapsible .collapsible-body{padding: 2px;}
.match_area .item_pre + p{
  padding: 0;
}
.match_area a{
  /* display: block; */
  margin: 10px 0;
  border-bottom: 2px dotted #e4896b;
  padding-bottom: 5px;
}
.match_area a:last-child{border-bottom:none;}
.border-right{border-right: 1px #d3cbbd solid;}
.match_area:after {
  background-color: rgb(207 82 40 / 20%);
}

.match_area:before {
  background-color: #e4896b;
}
.match_area:before,
.match_area:after {
  content: '';
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  position: absolute;
  left: -5px;
  top: -5px;
  z-index: -1;
  animation: warn 1.5s ease-out 0s infinite;
}
/* .match_area p {
    margin: 0; 
    padding: 0;
} */

@keyframes warn {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }

  30% {
    opacity: 1;
  }

  100% {
    transform: scale(1.15);
    opacity: 0;
  }
}
.scroll-top-arrow{
    /* display: none; */
    cursor: pointer;
    padding: 0;
    position: fixed;
    width: 60px;
    bottom: 180px;
    right: 0;
    padding: 6px 6px;
    padding-right: 4px;
    padding-left: 16px;
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
    z-index: 998;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    text-align: center;
    background-color: var(--mainlight);
    color: #fff;
    line-height: 1.2;
}
.scroll-top-arrow.tofooter{
    background-color: var(--secondlight); 
    bottom: 115px;
}
.scroll-top-arrow.inbox_title{
   bottom: 180px;
}
a.scroll-top-arrow.inbox_title:hover{
  color: #fff !important;
}
.scroll-top-arrow .text{
  font-size: 12px;
  font-weight: 600;
}
.download-img{
  padding: 6px 15px;
  background-color: #fff;
  border-radius: 50px;
  position: absolute;
  bottom: 7px;
  z-index: 2;
  left: 7px;
  color: #404040;
  font-size: 14px;
  display: flex;
  align-items: center;
  box-shadow: 0 0 10px rgb(0 0 0 / 20%);
}
.download-img.res{
  position: relative;
  padding: 3px;
  text-align: center;
  display: block;
  box-shadow: none;
  left: 0;
  bottom: 0;
  border-radius: 0;
  color: #383221;
  border: 1px solid var(--mainlight);
}
.bg-red {
    background: #e56856 !important;
}
.fixed-action-btn{
  right: 0;
  bottom: 50px;
  z-index: 998;
}
.fixed-action-btn .btn-floating.btn-large{
  width: 60px;
  border-radius: 40px 0 0 40px;
  line-height: 1.2;
}
.fixed-action-btn .btn-floating.btn-large i{
  padding-left: 10px;
}
.fixed-action-btn .btn-floating.btn-large i:before{
    position: absolute;
    top: -7px;
    right: 11px;
}
.fixed-action-btn .btn-floating.btn-large i:after{
    position: absolute;
    font-size: 12px;
    font-weight: 600;
    bottom: -15px;
    display: block;
    text-align: center;
    left: 14px;
    right: 0;
    text-transform: capitalize;
    width: auto;
    height: auto;
}
.fixed-action-btn .btn-floating.btn-large i.la-plus:after{
  content: 'Add';
}
.fixed-action-btn .btn-floating.btn-large i.la-pen:after{
  content: 'Edit';
}
.drag-target{right:0;}
#here{
  padding-top: 50px;
  margin-top: -50px;
}



/* 需求列表 */
.needs_items_status{
    padding: 20px 12px;
    background-color: #e3e8ef;
    box-shadow: 0 0 20px rgb(0 0 0 / 3%);
    border-radius: 15px;
}
.needs_items_status h3,.needs_items_status p{margin-bottom: 5px;}
.needs_detail .col.s5{
  width: calc(50% - 20px);
  padding: 10px;
}
.needs_detail .col.s12{
  width: calc(100% - 20px);
  padding: 10px;
}
.needs_detail .col{
  background-color: #f5f5f6;
  border-radius: 8px;
  padding: 12px;
  margin: 5px 10px !important;
}
.needs_detail .col.bg-white{
  background-color: #fff;
  padding: 0px;
  margin-bottom: 0
}
.needs_detail h3{margin-bottom: 15px;font-size: 20px;font-weight: 600;}
.needs_table p{margin-bottom: 5px;font-size: 18px;font-weight: 600;}
.needs_table strong{color:#444;font-size: 14px;font-weight:400;}
.needs_table td{border:none;padding: 20px 10px !important;vertical-align: top;}
.needs_table td:first-child{border-right:1px solid #eee;}
.needs_table td[colspan="2"]{border-right:none;}
.needs_table tr{border-bottom:1px solid #eee;}
.news-main img{    
  width: 80%;
  margin: 0 auto;
}
.news-main .opacity-overlay-gradient{
    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(top, rgb(130 116 90 / 20%) 48%, rgb(130 116 90 / 90%) 90%, var(--maindark) 100%) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) -o-linear-gradient(top, rgb(130 116 90 / 20%) 48%, rgb(130 116 90 / 90%) 90%, var(--maindark) 100%) repeat scroll 0 0;
  background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgb(130 116 90 / 20%) 48%, rgb(130 116 90 / 90%) 90%, var(--maindark) 100%) repeat scroll 0 0;
}
.main.rent .news-main .opacity-overlay-gradient{
  filter:hue-rotate(184deg) grayscale(.7)
}
#region_list label,#region_list2 label{
    width: calc(100% / 4);
    padding-left: 30px;
    transform: translateX(-22px);
    margin-right: 20px;

}
#region_list label::before,#region_list2 label::before{
    left: 0;
}
label[for="needs_city"],.input_title{
  padding-left: 0 !important;
  -webkit-transform: translateY(-150%);
  transform: translateY(-150%)
}
.tile{
    height: 70px;
    width: calc(100% / 2.1);
    position: relative;
    display: inline-block;
    margin: 2px 1px 30px;
}
.tile input[type="checkbox"],.tile input[type="radio"]{
    -webkit-appearance: none;
    position: relative;
    width: 100%;
    background-color: #ffffff;
    border-radius: 10px;
    cursor: pointer;
    border: 2px solid transparent;
    outline: none;
    box-shadow: 15px 15px 25px rgba(2,28,53,0.05);
}

.tile label{
    display: flex !important;
    background-color: #ffffff;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100% !important;
    width: 100%;
    padding-left: 0 !important;
    position: absolute !important;
    bottom: 0;
    cursor: pointer;
    border-radius: 5px;
    border: 2px solid antiquewhite;
}
.tile [type="checkbox"]+label:before,.tile  [type="checkbox"]:not(.filled-in)+label:after,
.tile [type="radio"]+label:before,.tile  [type="radio"]:not(.filled-in)+label:after{
    top: 3px;
    left: 5px;
    border-radius: 25px;
    border-color: var(--mainlight);
    background-color: var(--mainlight);
}
.tile input[type="checkbox"]:checked + label,.tile input[type="radio"]:checked + label{
    border: 2px solid var(--second);
    background-color: var(--secondlighter);
}

.tile [type="checkbox"]:checked+label:before,.tile [type="radio"]:checked+label:before{
    width: 8px;
    height: 15px;
    border-radius: 0px;
    border-color: transparent;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    -webkit-transform: rotate(40deg);
    transform: rotate(40deg);
    background-color: transparent;
    left: 10px;
    z-index: 2;
}
.tile [type="checkbox"]:checked+label:after,.tile [type="radio"]:checked+label:after{
  content: '';
  position: absolute;
  background-color:var(--second);
  width: 18px;
  height: 18px;
  border-radius: 25px;
  -webkit-transform: scale(1);
  transform: scale(1);
  border-color: var(--second);
  z-index: 0;
}
.tile [type="checkbox"]:disabled +label,.tile [type="radio"]:disabled +label{
  border-color: #eeeeee;
  background-color: #f5f5f5;
}
.tile label h6{
    font-size: 17px;
    font-weight: 400;
    color: #7b7b93;
    margin-bottom: 0;
}
.tile [type="checkbox"]:checked ~label h6,.tile [type="radio"]:checked ~label h6,
.tile [type="checkbox"]:checked  ~ label h6 ~small,
.tile [type="radio"]:checked  ~ label h6 ~small{color: var(--second)}

.with_unit{
  position: relative;
  padding-right: 40px;
  width: calc(100% - 40px);
}
.with_unit::before{
  content: attr(unit);
  position: absolute;
  top: 10px;
  right: 20px;
}
.row .col.s45[unit="B"] input{
  padding-right: 0px;
  padding-left: 40px;
  width: calc(100% - 40px);
}
[unit="B"]::before{
  left: 20px;
  right: auto;
}
.floor{
  width: 1px;
  height: 30px;
  border-right: 1px solid #aeaeae;
  transform: rotate(35deg);
  position: relative;
  right: -50%;
  top: 20px;
  text-align: center;
}
.input-field label span{color: #e97171;font-size: 12px;}
.add_item_img{
    border-radius: 10px;
    height: 50px;
    width: 50px;
    text-align: center;
    padding: 10px 5px;
    line-height: 20px;
    margin: 0 auto 30px;
    display: block;
    border: 1px solid #ddd;
    background-color: transparent;
}
.add_item_img i{
  font-size: 20px;
  color: #444;
}
.add_item_img:hover{
  background-color: var(--second);
}
.add_item_img:hover i{
  color: #fff;
}
.img_content{position: relative;}
.img_content .cover~.la-times-circle{
    position: absolute;
    top: -7px;
    right: -7px;
    font-size: 30px;
    color: #848484;
    text-shadow: 0 0 10px rgb(8 8 8 / 40%);
    background-color: #ffffff;
    border-radius: 50px;
}
[data-way],[type="radio"]:not(:checked)+label[data-way]{display: none;}
/* 聯絡我們 */
.contact-form{
  transition: box-shadow .25s;
  border-radius: 0 60px 0 0  ;
  background-color: #fbf9f7;
  margin: 0.5rem 0 0rem 0;
  padding: 30px 20px;
  box-shadow: none;
  -webkit-transition: height 0.3s ease;
  -o-transition: height 0.3s ease;
  transition: height 0.3s ease;
}
#region_list,#region_list2{
    border-radius: 10px;
    padding-bottom: 20px;
    padding-left: 30px;
    margin-bottom: 30px !important;
    margin-top: 0px;
}
#region_list [type="checkbox"]:not(:checked),#region_list [type="checkbox"]:checked,
#region_list2 [type="checkbox"]:not(:checked),#region_list2 [type="checkbox"]:checked{
  position: relative;
  left: -9999px;
  opacity: 0;
  width: 1px;
  pointer-events: none;
  transform: translateX(-30px);
}
#region_list  [type="checkbox"]:checked+label:after,
#region_list2  [type="checkbox"]:checked+label:after{
      left: 0px;
}
[type="checkbox"]:checked+label:before{
    background-color: var(--second);
}
#pet_else,#cate_else{display: none;}
.rent .max input,.rent .min input,
.buy .max input,.buy .min input{
  padding-right: 30px;
  width: calc(100% - 30px);
  margin-left: -0.75rem;
}
.rent .max::before,.rent .min::before{
  content: '元';
  position: absolute;
  right: 14px;
  top: 17%;
}
.buy .max::before,.buy .min::before{
  content: '萬';
  position: absolute;
  right: 14px;
  top: 17%;
}
.budget .text-primary{
  display: none;
}
.budget.rent .text-primary{
  display: block;
}




/* 登入 */
.signup,.show_1{
  display: none;
}
.sign_content{
  position: absolute;
  bottom: 0;
  width: 100%;
}
.member_data.sign_content{
  position: relative;
}
.member_data.sign_content .card-panel{
 min-height: calc(100vh - 220px); 
}

/* 會員中心 */
.user_cover {
    background-size: cover;
    background-position: center;
    width: 65px;
    height: 65px;
    margin-right: 10px;
    border-radius: 50%;
}
.ivcode{
  position: relative;
  padding: 5px 8px;
  font-size: 16px;
  border: 2px solid var(--maindark);
  border-radius: 10px;
  
}
.end_d {
  position: relative;
  padding: 0.6em;
  background: -webkit-repeating-linear-gradient(-45deg, #fff5df, #fff5df 4px,#ffe4b1 3px, #ffe4b1 8px);
  background: repeating-linear-gradient(-45deg, #fff5df, #fff5df 4px,#ffe4b1 3px, #ffe4b1 8px);
  border-radius: 7px;
  line-height: 1;
  color: #82745a;
  font-weight: 700;
  margin-top: 15px;
  border: 2px solid #d5c9b1;
}
.end_d:before {
    position: absolute;
    content: '';
    bottom: calc(100% + 1px);
    left: 18px;
    border: 10px solid transparent;
    border-bottom: 10px solid #d5c9b1;
    width: 0;
    height: 0;
}
.end_d:after {
    position: absolute;
    content: '';
    bottom: 100%;
    left: 20px;
    border: 8px solid transparent;
    border-bottom: 8px solid #ffebbe;
    width: 0;
    height: 0;
}
.header .ivcode{
  background-color: #f5eedf;
}
.ivcode button{
  position: absolute;
    right: 0;
    height: 100%;
    top: 0;
    line-height: 2.3;
    -webkit-appearance: none;
    background-color: var(--maindark);
    border: none;
    color: #fff;
    border-radius: 0 6px 6px 0;
    padding: 5px 12px;
}
.my_data h2,.my_data p{color: #444;}
.my_data  p.ivcode{color:var(--maindark);}
.user_cover.big {
    width: 82px;
    height: 82px;
    margin: 5px auto;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
}
.profile-image-change-text {
    position: relative;
    background: rgba(0,0,0,.5);
    font-size: 12px;
    text-align: center;
    bottom: 0;
    color: #fff;
    display: block;
    height: 40px;
    line-height: 32px;
    right: 0;
    bottom: -50px;
    width: 100%;
    z-index: 3;
}
.member_btn a{display: block;}
.member_btn{
  position: relative;
  padding: 15px 12px;
  background-color: #fff;
  box-shadow: 0 0 10px rgb(0 0 0 / 5%);
  margin: 10px;
  border: 1px solid #eee;
  border-radius: 10px;
}
.member_btn i{
  position: absolute;
  top: 38%;
  right: 15px;
  font-size: 18px;
}
.name_list.todo .todo-element label{
  font-size: 18px;
  color: #555;
}
.name_list button{
  -webkit-appearance: none;
  background-color: #eee;
  border: 1px solid #ddd;
  border-radius: 8px;
}
.name_list button i{
  font-size: 16px;
  line-height: 1.5;
}
.name_list [type="radio"]+label{padding-left: 0px; 
 -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;}
.name_list.todo input[type="radio"]:checked + label{
  text-decoration: none;
  color: var(--second);
  font-weight: 600;
}
.name_list [type="radio"]+label::before,.name_list [type="radio"]+label::after{
  display: none;
  left: -20px;
}
.name_list [type="radio"]+label::after{
  border: 2px solid var(--second);
  background-color: var(--second);
}
.quit_click.name_list [type="radio"]+label{
  padding-left: 10px; 
}
.quit_click.name_list [type="radio"]+label::before,.name_list [type="radio"]+label::after{
  display:  inline-block;
}
.quit_btns,.quit_note span{display: none;}
.company_codebox {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px var(--third);
    border-radius: 0 8px 8px 8px;
    letter-spacing: 2px;
}
.company_codebox .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: var(--third);
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.company_codebox p {
    margin: 0; 
    padding: 0;
    text-align: center;
    color: var(--third);
    font-weight: 600;
}
/* 訂單編號 */
.order-item{
  background-color: #fff;
  padding: 20px 10px;
  margin: 15px;
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(0 0 0 / 5%);
}
.order-item > div:first-child{
  flex: 0 0 170px;
}
.healding {
  position: relative;
  text-align: center;
  margin-top: 20px;

}
.primary-color-line.block{
}
.healding::before{
  content: '';
  position: absolute;
  width: 85px;
  border-top: 1px solid #d7c2a6;
  left: 30px;
  top: 15px;
}
.healding::after{
  content: '';
  position: absolute;
  width: 85px;
  border-top: 1px solid #d7c2a6;
  right: 30px;
  top: 15px;
}
.cancel_order.order-item{
    background-color: #ece9e2;
    border: 1px solid #e1d7c3;
    position: relative;
}
.cancel_order.order-item::before{
    content: '已取消';
    position: absolute;
    background-color: #d5c7ad;
    right: 0;
    top: 0;
    border-radius: 0 12px 0 12px;
    padding: 3px 12px;
    color: #602929;

}
/* 訂閱方案 */
.payment{
  padding:20px 15px;
  text-align: center;
  border-radius: 12px;
  background-color: #fff;
  margin: 15px 10px;
  overflow: hidden;
  min-height: 140px;
}
.payment_img{
  background-size: contain;
  width: 80%;
  background-position: top;
  padding-bottom: 60%;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
}
.payment_img ~ h3{
  position: relative;
  padding-bottom: 50px;
  font-size: 30px;
}
.payment_img ~ h3::before{
  content: '';
  position: absolute;
  border: 1px solid #efefef;
  bottom: 25px;
  width: 50px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.payment .col.s8 > h3{
  margin-bottom: 20px;
  font-size: 24px;
  color: var(--second);
}
.payment .col.s8 > p{
  line-height: 1.4;
  margin-bottom: 0;
  font-size: 20px;
  color: #e74c3c;
}


/* 付款完成 */
.pay_end{
  position: relative;
}
.pay_end .valign{min-height: 100vh;}
.pay_end::before{
    content: '';
    background-image: url(../img/page/deco_header.png);
    background-position: center;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100px;
    z-index: 99;
}
.pay_end::after{
    content: '';
    background-image: url(../img/page/deco_footer.png);
    background-position: center;
    background-size: contain;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 100px;
    z-index: 99;
}
.f28{
  font-size: 28px;
}
/* 20221202皓云 */
.ex_status {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 1;
    padding: 5px 9px;
    margin-bottom: 8px;
    font-size: 13px;
    letter-spacing: 0.08em;
    background-color: #84a3b7;
    color: #fff;
}
.ex_status.match{
  position: relative;
}
.ex_status.down {
  color: #fff;
  background-color: #3f3f3f;
  border: 1px solid #3f3f3f;
}
.ex_status.ing {
  color: #fff;
  background-color: #7cc5a1;
  border: 1px solid #7cc5a1;
}
.ex_status.tag {
  position: relative;
}
.match_result {
  background-color: #f8eedc;
}
.match_result:before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 0;
  background: linear-gradient(45deg, #f8eedc, #fadecb, #f8eedc);
  background-size: 400%;
  opacity: 0;
  transition: 0.5%;
  filter: blur(2px);
  opacity: 1;
  animation: color-light 8s linear infinite;
}
.match_result .text-red{
  position: relative;
}

@keyframes color-light {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 400%;
  }
}
#pets_yes{display: none;}
.fix-reflash{
  position: fixed;
  bottom: 10px;
  width: 100%;
  left: 0;
  padding: 0 25px 15px;
}
.team_area{
    position: relative;
    margin: 3em .5em 1.5em;
    padding: 1.5em .3em .3em;
    border: solid 1px var(--main);
    border-radius: 4px;
    background-color: var(--bglight);
}
.team_area .box-title{
    width: 150px;
    position: absolute;
    display: inline-block;
    top: -19px;
    left: 0;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #fbf9f7;
    color: var(--main);
    font-weight: bold;
    text-align: center;
    margin: 0 auto;
    right: 0;
    padding: 5px 20px;
    font-size: 24px;
}
.team_area .s6 .member_btn{
    margin: 5px 0;
    width: 100%;
    text-align: center;
    display: block;
}
.search_keyword {
    position: relative;
    margin: 0.5em;
    padding: 15px 7px 15px 65px;
    border: solid 2px #ebebeb;
    border-radius: 8px;
    background-color: #fff;
}
.search_keyword .box-title {
  position: absolute;
  left: 7px;
  top: 7px;
  padding: 0 9px;
  height: calc(100% - 14px);
  line-height: 21px;
  background: #e3e8ef;
  color: #4d5361;
  font-weight: bold;
  width: 50px;
  border-radius: 4px;
  text-align: center;
  display: flex;
  align-items: center;
}
.search_keyword h6{margin-bottom: 0;}







:root{
    --font:"-apple-system", "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
    --third: #517b66;
    --second:#4d5361;
    --seconddark:#333842;
    --secondlight:#8790a5;
    --secondlighter:#dfdfe1;
    --main:#aa9c81;
    --maindark:#82745a;
    --mainlight:#c1b39a;
    --mainlighter: #e6e0d0;
    --bglight: #f4f0e9;
}
::-webkit-scrollbar {
    -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
    width: 8px;
}

::-webkit-scrollbar:horizontal {
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    border: 2px solid transparent;
}

::-webkit-scrollbar-track {
    background-color: transparent; 
}

/*
| ----------------------------------------------------
| responsive
| ----------------------------------------------------
*/
@media (max-width: 1367px) {}


@media (max-width: 1025px) {}


@media (max-width: 769px) {
  .pay_end::before,.pay_end::after{
    background-size: cover;
    height: 200px;
  }
}


 /*iphone plus*/
@media (max-width: 430px) {
  .payment_img{
    background-size: 120%;
    width: 120%;
    padding-bottom: 120%;
  }
  .loading.v1 .hero-material,.loading.v2 .hero-material{height: 280px;}
  .pay_end::before,.pay_end::after{
    background-size: cover;
    height: 100px;
  }
}


/*iphone: 7px*/
@media (max-width: 400px) {
  ul.filter_cate li label ,ul.filter_cate li:not(:checked) label{
      padding: 2px 30px;
      width: calc(100% / 2.1);
  }
}



/*iphone 5*/
@media (max-width: 321px) {
  b.text-red.text-right.f16.d-block {
    font-size: 14px !important;
  }
}


/*iPhone XR*/
@media only screen 
    and (device-width : 414px) 
    and (device-height : 896px) 
    and (-webkit-device-pixel-ratio : 2) { 



}

/*iPhone XS*/
@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) { 

}

/*iPhone XS Max*/
@media only screen 
    and (device-width : 414px) 
    and (device-height : 896px) 
    and (-webkit-device-pixel-ratio : 3) { 


}
/*橫拿*/
@media screen and  (orientation:landscape) {}
/*縱拿*/
@media screen and (orientation:portrait) {}
/*設備寬高比*/
@media screen and (device-aspect-ratio: 16/9) {}