/* -------------------------------- 

Primary style

-------------------------------- */
html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-size: 100%;
  font-family:'微軟正黑體', PT Sans, sans-serif;
  color: #505260;
  background-color: #F5F3F3;
}

a {
  color: #2f889a;
  text-decoration: none;
}

img {
  max-width: 100%;
}

input, textarea {
  font-family:'微軟正黑體', PT Sans, sans-serif;
  font-size: 14px;
}

.login{
  font-size: 20px!important;
  padding: 8px 0!important;
  border-radius: 4px!important;
}
input::-ms-clear, textarea::-ms-clear {
  display: none;
}

/* -------------------------------- 

Main components 

-------------------------------- */
header[role=banner] {
  position: relative;
  height: 50px;
  background: #343642;
}
header[role=banner] #cd-logo {
  float: left;
  margin: 4px 0 0 5%;
  /* reduce logo size on mobile and make sure it is left aligned with the transform-origin property */
  -webkit-transform-origin: 0 50%;
  -moz-transform-origin: 0 50%;
  -ms-transform-origin: 0 50%;
  -o-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -o-transform: scale(0.8);
  transform: scale(0.8);
}
header[role=banner] #cd-logo img {
  display: block;
}
header[role=banner]::after {
  /* clearfix */
  content: '';
  display: table;
  clear: both;
}
@media only screen and (min-width: 768px) {
  header[role=banner] {
    height: 80px;
  }
  header[role=banner] #cd-logo {
    margin: 20px 0 0 5%;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}



.cd-user-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(52, 54, 66, 0.9);
  z-index: 3;
  overflow-y: auto;
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.3s 0, visibility 0 0.3s;
  -moz-transition: opacity 0.3s 0, visibility 0 0.3s;
  transition: opacity 0.3s 0, visibility 0 0.3s;
}
.cd-user-modal.is-visible {
  visibility: visible;
  opacity: 1;
  -webkit-transition: opacity 0.3s 0, visibility 0 0;
  -moz-transition: opacity 0.3s 0, visibility 0 0;
  transition: opacity 0.3s 0, visibility 0 0;
}
.cd-user-modal.is-visible .cd-user-modal-container {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

.cd-user-modal-container {
  position: relative;
  width: 90%;
  max-width: 600px;
  background: #FFF;
  margin: 3em auto 4em;
  cursor: auto;
  border-radius: 0.25em;
  -webkit-transform: translateY(-30px);
  -moz-transform: translateY(-30px);
  -ms-transform: translateY(-30px);
  -o-transform: translateY(-30px);
  transform: translateY(-30px);
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
}


.cd-form {
  padding:10px 20px;
  clear: both;
}
.cd-form .fieldset {
  position: relative;
  margin: 14px 0;
}
.cd-form .fieldset:first-child {
  margin-top: 0;
}
.cd-form .fieldset:last-child {
  margin-bottom: 0;
}
.cd-form label {
  font-size: 14px;
  font-size: 0.875rem;
}
.cd-form label.image-replace {
  /* replace text with an icon */
  display: inline-block;
  position: absolute;
  left: 15px;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 20px;
  width: 20px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  color: transparent;
  text-shadow: none;
  background-repeat: no-repeat;
  background-position: 50% 0;
}
.cd-form label.cd-username {
  background-image: url("../img/cd-icon-username.png");

}
.cd-form label.cd-email {
  background-image: url("../img/cd-icon-email.png");

}
.cd-form label.cd-password {
  background-image: url("../img/cd-icon-password.png");

}
.cd-form label.cd-mobile {
  background-image: url("../img/cd-icon-mobile.png");

}


.cd-form input {
  margin: 0;
  padding: 0;
  border-radius: 0.25em;
}
.cd-form input.full-width {
  width: 100%;
}
.cd-form input.has-padding {
  padding: 12px 20px 12px 50px;
}
.cd-form input#signin-captcha {
  width:calc(100% - 114px);
}

 .cd-form img {
  	position:absolute;
  	height:47px;
  	padding-left:20px;
}

.cd-form input.has-border {
  border: 1px solid #B8B8B8;

  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
}
.cd-form input.has-border:focus {
  border-color: #343642;
  box-shadow: 0 0 5px rgba(52, 54, 66, 0.1);
  outline: none;
}
.cd-form input.has-error {
  border: 1px solid #d76666;
}
.cd-form input[type=password] {
  /* space left for the HIDE button */
  padding-right: 65px;
}
.cd-form input#btnLogin {
  padding: 16px 0;
  cursor: pointer;
  background: #eb6719;
  color: #FFF;
  font-weight: bold;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
}
.no-touch .cd-form input#btnLogin:hover, .no-touch .cd-form input#btnLogin:focus {
  background: #df5301;
  outline: none;
}
.cd-form .show-password {
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;
  padding: 6px 15px;
  border-left: 1px solid #d2d8d8;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 14px;
  font-size: 0.875rem;
  color: #343642;
}
.cd-form .cd-error-message {
  display: inline-block;
  position: absolute;
  left: -5px;
  bottom: -20px;
  background: rgba(215, 102, 102, 0.9);
  padding: .5em;
  z-index: 2;
  color: #FFF;
  font-size: 13px;
  font-size: 0.8125rem;
  border-radius: 0.25em;
  /* prevent click and touch events */
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.2s 0, visibility 0 0.2s;
  -moz-transition: opacity 0.2s 0, visibility 0 0.2s;
  transition: opacity 0.2s 0, visibility 0 0.2s;
}
.cd-form .cd-error-message::after {
  /* triangle */
  content: '';
  position: absolute;
  left: 22px;
  bottom: 100%;
  height: 0;
  width: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid rgba(215, 102, 102, 0.9);
}
.cd-form .cd-error-message.is-visible {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.2s 0, visibility 0 0;
  -moz-transition: opacity 0.2s 0, visibility 0 0;
  transition: opacity 0.2s 0, visibility 0 0;
}

.title{
  margin-top: 18px;
  clear:both;
  display: inline-block;
  width:100%;
}
.title img{
  width: 100%;
  padding:0 10px; 
}

.topinfo{
  max-width: 500px;
  position: relative;
  left:0;
  right:0;
  margin:auto;
}

.titlespan{
  width:100%;
  color:#3DB032;
  text-align: center;
  font-size: 12px; 
  line-height: 18px;
}
.other{
  padding: 20px 20px 0 30px;
}

.fb_log{
  border:1px solid #3c5a98;
  height:40px;
  border-radius: 5px;
  width: 47%;
  background: #fff;
  margin-right: 3%;
  float: left;
  color:#3c5a98;
  line-height: 38px;
  text-align: center;
  cursor: pointer;
  transition:.2s;
}
.fb_log:hover{
  border:1px solid #3c5a98;
  background: #3c5a98;
  color:#fff;  
  transition:.2s;

}
.g_log{
  border:1px solid #dd4b39;
  background: #fff;
  height:40px;
  border-radius: 5px;
  width: 47%;
  float: left;
  color:#dd4b39;
  line-height: 38px;
  text-align: center;
  cursor: pointer;
  margin-bottom: 100px;
  transition:.2s;
}
.g_log:hover{
  border:1px solid #dd4b39;
  background: #dd4b39;
  color:#fff;

  transition:.2s;
}

.fb_log i,.g_log i{
  font-size: 24px;
  margin-right: 5px;
  position: relative;
  top:2px;

}

@media only screen and (min-width: 600px) {
  .cd-form {
    padding: 2em;
  }
  .tabbtn{
    padding: 0 30px;
  }
  .cd-form .fieldset {
    margin: 16px 0;
  }
  .cd-form .fieldset:first-child {
    margin-top: 0;
  }
  .cd-form .fieldset:last-child {
    margin-bottom: 0;
  }
  .cd-form input.has-padding {
    padding: 12px 10px 12px 40px;
  }
  .cd-form input#btnLogin {
    padding: 16px 0;
  }
  .cd-form input#signin-captcha {
    width: calc(100% - 128px);
  }
  
  .cd-form img {
    position:absolute;
    height:54px;
    padding-left:20px;
  }
}

.cd-form-message {
  padding: 1.4em 1.4em 0;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.4;

}
@media only screen and (min-width: 600px) {
  .cd-form-message {
    padding: 2em 2em 0;
  }
}

.cd-form-bottom-message {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: -30px;
  text-align: center;
  font-size: 14px;
  font-size: 0.875rem;
}
.cd-form-bottom-message a {
  color: #FFF;
  text-decoration: underline;
}

.cd-close-form {
  /* form X button on top right */
  display: block;
  position: absolute;
  width: 40px;
  height: 40px;
  right: 0;
  top: -40px;
  background: url("../img/cd-icon-close.svg") no-repeat center center;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}



@media only screen and (min-width: 1170px) {
  .cd-close-form {
    display: none;
  }
}

#cd-login, #cd-signup, #cd-reset-password {
  display: none;
}

#cd-login.is-selected, #cd-signup.is-selected, #cd-reset-password.is-selected {
  display: block;
}
#cd-login{

  position: relative;
  left:0;
  right:0;
  margin:auto;
}
.cd2{
    padding: 0 60px;
}

.toptop{
  background: #FaF8F8;
  height:auto;
  box-shadow: 2px 5px 20px #DFDFDF;
}

.topinfo img{
  width: 40%;
  display: inline-block;
  float: left;
  padding: 0 0 20px 0;
}
.top1{ 

  font-size: 18px;
  color:#602220;
  display: inline-block;
  float:left;
  margin-top:13%;
  width:60%;
  font-weight: bold;
}
.top2{

  font-size: 16px;
  color:#865655;
  display: inline-block;
  float:left;
  margin-top:10px;
  width:60%;
  font-weight: bold;
}

@media only screen and (max-width:550px) {
  .cd2{
  padding: 0 10px;
}
}

@media only screen and (max-width: 1020px and min-width:768px;) {
  .top1{ 
  font-size: 14px;
}
.top2{

  font-size: 12px;
}
}
@media only screen and (max-width: 500px) {
  .top1{ 
  width:65%;
  font-size: 12px;
  margin-top:13%;
}
.top2{
  width:65%;
  font-size: 10px;
  margin-top:2%;
}
.topinfo img{
  width: 35%;
  display: inline-block;
  float: left;
  margin-top: 20px;
  padding-bottom:10px;
}
input, textarea { 
  font-size: 12px;
}

}


@media only screen and (max-width: 480px) {
.fb_log{
  
  width: 100%;

}
.g_log{
  margin-top:20px;
  width:100%;
}

.fb_log i,.g_log i{
  font-size: 20px;
  margin-right: 5px;

}
.other{
  padding: 20px 20px 0 20px;
}
}

@media only screen and (min-width:1440px) {
.top1{ 
  font-size: 20px;
}
.top2{
  font-size: 16px;
}
}


.treemalllogo{
  width:56%;
  margin-left: 22%;
  margin-right: 22%;
  margin-top: 30px;
}
.tabbtn{
  margin-top: 10px;
  width: 100%;
  height:50px;
  padding: 0 20px;
  text-align: center;
}

.arrow{
  position: relative;
  top:-50px;
}
.activebtn:after{
  content: "";
  position: relative;
  top:6px;
  left:0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 15px 15px 15px;
  border-color: transparent transparent #f5f3f3  transparent;

}
.logoinbtn{
  width: 50%;
  height:50px;
  margin-right: .5%;
  background: #beb1a5;
  display: inline-block;
  float: left;
  line-height: 50px;
  color:#fff;
  font-size: 14px;
  border-radius: 10px 0 0 0;
  cursor: pointer;
}
.registerbtn{
  width: 49%;
  height:50px;
  margin-left: .5%;
  background: #8f8275;
  display: inline-block;
  float: left;
  line-height: 50px;
  color:#fff;
  font-size: 14px;
  border-radius: 0 10px 0 0;
  cursor: pointer;
}
.logoinbtn:hover,.registerbtn:hover{
  opacity: .8;
  transition:.5s;
}
.login2{
  background: #3FB335!important;
  transition:1s;

}
.login2:hover{
  background: #35972C!important;
  transition:1s;
}
.forget{
  font-size: 13px;
  text-decoration: underline;
  float:right;
  padding-bottom: 10px;
}

#phoneCheckCode{
Width:65%;}

@media only screen and (min-width: 600px) {  
  .tabbtn{
    padding: 0 2em;
  }