		

		.media-account {
		  width: 90%;
		  border-top: 0.5px solid #444444;
		  margin-left: 5%;
		  margin-right: 5%;
		  margin-top: 20px;
		}

		.media-account h2 {
		  width: 100%;
		  font-family: 'Noto Sans TC', sans-serif;
		  font-size: 1.2rem;
		  font-weight: 400;
		  letter-spacing: 1.5px;
		  line-height: 2;
		  text-align: center;
		  margin-top: 20px;
		  color: #444444;
		}

		.media-account .media-logo {
		  width: 100%;
		  margin: 15px auto;
		}

		.media-account .media-logo ul {
		  width: 60%;
		  margin-left: 20%;
		  margin-right: 20%;
		  display: flex;
		  justify-content: center;
		}

		.media-account .media-logo ul li {
		  width: 20%;
		  margin-right: 4px;
		  margin-left: 4px;
		}

		.media-account .media-logo img {
		  width: 100%;
		}

		.media-account .media-logo-w {
		  display: none;
		}

		.form {
		  width: 80%;
		  margin-left: 10%;
		  margin-right: 10%;
		  margin-top: 15px;
		}

		.form h2 {
		  width: 100%;
		  font-family: 'Noto Sans TC', sans-serif;
		  font-size: 1.2rem;
		  font-weight: 400;
		  letter-spacing: 1.5px;
		  line-height: 2;
		  text-align: center;
		  margin-top: 20px;
		  color: #444444;
		}

		.form input[type="text"],
		.form input[type="password"] {
		  width: 100%;
		  margin-top: 5px;
		  outline: none;
		  border: 0.5px solid #aaaa;
		  display: block;
		  background: none;
		  text-align: left;
		  padding: 8px 0 8px 10px;
		  font-family: 'Noto Sans TC', sans-serif;
		  color: #444444;
		  font-size: 0.8rem;
		  letter-spacing: 3px;
		  font-weight: 300;
		  border-radius: 8px;
		  transition: .5s;
		}

		.form ::-webkit-input-placeholder {
		  font-family: 'Noto Sans TC', sans-serif;
		  color: #aaaa;
		  font-size: 0.8rem;
		  letter-spacing: 1.5px;
		  font-weight: 300;
		}

		.form input[type="text"]:focus,
		.form input[type="password"]:focus {
		  border-color: #444444;
		}

		.form .email {
		  width: 100%;
		  margin-top: 30px;
		}

		.form .password,
		.form .check-password,
		.form .username,
		.form .address,
		.form .phonenumber {
		  width: 100%;
		  margin-top: 20px;
		}

		.form .email h3,
		.form .password h3,
		.form .check-password h3,
		.form .phonenumber h3 {
		  width: 100%;
		  font-family: 'Noto Sans TC', sans-serif;
		  font-size: 0.9rem;
		  font-weight: 400;
		  letter-spacing: 1.5px;
		  line-height: 2;
		  text-align: left;
		  margin-top: 20px;
		  color: #444444;
		}

		.form .email h3:after,
		.form .password h3:after,
		.form .check-password h3:after,
		.form .username h3:after,
		.form .address h3:after,
		.form .phonenumber h3:after {
		  content: '*';
		  color: red;
		}

		.form .username,
		.form .address {
		  display: flex;
		  flex-wrap: wrap;
		  margin: 0;
		}

		.form .username h3 {
		  width: 15%;
		  font-family: 'Noto Sans TC', sans-serif;
		  font-size: 0.9rem;
		  font-weight: 400;
		  letter-spacing: 1.5px;
		  line-height: 2;
		  text-align: left;
		  margin-top: 20px;
		  color: #444444;
		}

		.form .username h4 {
		  width: 80%;
		  font-family: 'Noto Sans TC', sans-serif;
		  font-size: 0.7rem;
		  font-weight: 400;
		  letter-spacing: 1.5px;
		  line-height: 3;
		  text-align: left;
		  margin-top: 20px;
		  color: #444444;
		}

		.form .username input[type="text"] {
		  width: 45%;
		}

		.form .username input[type="radio"] {
		  display: none;

		}

		.form .username input[type="radio"]+label span {
		  border: 0.5px solid #444444;
		  padding: 5px 5px;
		  display: inline-block;
		  /*background: #aaaa;*/
		  margin: auto;
		  transition: .5s;
		}

		.form .username input[type="radio"]:checked+label span {
		  border: 0.5px solid #444444;
		  padding: 5px 5px;
		  display: inline-block;
		  background: #444444;
		}

		.form .username label {
		  display: flex;
		  margin-left: 10px;
		  margin-bottom: 0;
		  margin-top: 5px;
		}

		.form .username span {
		  margin: auto;
		  margin-right: 1px;
		}

		.form .username p {
		  font-family: 'Noto Sans TC', sans-serif;
		  font-size: 0.9rem;
		  font-weight: 300;
		  letter-spacing: 1.5px;
		  line-height: 2;
		  text-align: left;
		  /*margin-top: 20px;*/
		  color: #444444;
		  margin-top: auto;
		  margin-bottom: auto;
		  /*margin-left: 10px;*/
		  padding-left: 3px;
		}

		.form .address h3 {
		  width: 25%;
		  font-family: 'Noto Sans TC', sans-serif;
		  font-size: 0.9rem;
		  font-weight: 400;
		  letter-spacing: 1.5px;
		  line-height: 2;
		  text-align: left;
		  margin-top: 20px;
		  color: #444444;
		}

		.form .address h4 {
		  width: 80%;
		  font-family: 'Noto Sans TC', sans-serif;
		  font-size: 0.7rem;
		  font-weight: 400;
		  letter-spacing: 1.5px;
		  line-height: 3;
		  text-align: left;
		  margin-top: -10px;
		  color: #444444;
		}

		.form .address .zipcode3 {
		  width: 100%;
		  display: flex;
		}

		.f3 {
		  float: left;
		  /*margin-left:5px;*/
		  margin-right: 5px;
		  width: 45%;
		}

		.city,
		.town {
		  padding: 5px 0 5px 5px;
		  font-family: 'Noto Sans TC', sans-serif;
		  font-size: 0.9rem;
		  font-weight: 300;
		  letter-spacing: 1.5px;
		  line-height: 2;
		  text-align: left;
		  margin-top: 5px;
		  color: #444444;
		  border-radius: 10px;
		  border: 0.5px solid #444444;
		  outline: none;
		}

		.f4 {
		  float: left;
		  width: 45%;
		}

		.loginbox {
		  width: 100%;
		  margin-top: 20px;
		  display: flex;
		}

		.loginbox .txtRight {
		  width: 20%;
		  font-family: 'Noto Sans TC', sans-serif;
		  font-size: 0.9rem;
		  font-weight: 400;
		  letter-spacing: 1.5px;
		  line-height: 2;
		  text-align: left;
		  margin-top: 20px;
		  margin-right: 10px;
		  color: #444444;
		}

		.loginbox .txtRight:after {
		  content: '*';
		  color: red;
		}

		.loginbox .txtCenter {
		  width: 50%;
		}

		.loginbox .txtCenter input[type="text1"] {
		  width: 80%;
		  margin-left: 8px;
		  outline: none;
		  padding: 8px 5px;
		  border-radius: 10px;
		  border: 0.5px solid #aaaa;
		  color: #444444;
		  font-family: 'Noto Sans TC', sans-serif;
		  font-size: 0.9rem;
		  font-weight: 300;
		  letter-spacing: 1.5px;
		}

		.loginbox .txtCenter input[type="text1"]:focus {
		  border: 0.5px solid #444444;
		}

		.loginbox .textLeft {
		  width: 10%;
		}

		.loginbox .txtLeft input[type="button"] {
		  background: #444444;
		  outline: none;
		  border: none;
		  padding: 7px 10px;
		  color: #fff;
		  font-family: 'Noto Sans TC', sans-serif;
		  letter-spacing: 3px;
		  border-radius: 10px;
		}

		.term {
		  width: 100%;
		  margin-top: 20px;
		  margin-bottom: 20px;
		}

		.term label {
		  width: 100%;
		  display: flex;
		}

		.term p {
		  width: 100%;
		  font-family: 'Noto Sans TC', sans-serif;
		  font-size: 0.8rem;
		  font-weight: 300;
		  letter-spacing: 1.5px;
		  /*line-height: 2;   */
		  margin-top: 10px;
		}

		.term input[type="checkbox"] {
		  /*width: 20%; */
		  display: none;
		}

		.term input[type="checkbox"]+label span {
		  border: 0.5px solid #444444;
		  padding: 5px 5px;
		  display: inline-block;
		  margin: 10px 8px 0 0;
		}

		.term input[type="checkbox"]:checked+label span {
		  border: 0.5px solid #444444;
		  background: #444444;
		}

		input[type="submit"] {
		  width: 100%;
		  background: #aaaa;
		  border: none;
		  font-family: 'Noto Sans TC', sans-serif;
		  font-size: 0.9rem;
		  color: #000;
		  letter-spacing: 5px;
		  padding: 5px 0;

		}





		@media screen and (min-width: 768px) {
		  
		  .media-account {
		    width: 98%;
		    border-top: 0.5px solid #444444;
		    margin-left: 1%;
		    margin-right: 1%;
		    margin-top: 20px;
		  }

		  .media-account h2 {
		    width: 100%;
		    font-family: 'Noto Sans TC', sans-serif;
		    font-size: 1.5rem;
		    font-weight: 400;
		    letter-spacing: 1.5px;
		    line-height: 2;
		    text-align: center;
		    margin-top: 40px;
		    color: #444444;
		  }

		  .media-account .media-logo {
		    display: none;
		  }

		  .media-account .media-logo-w {
		    width: 30%;
		    margin-right: 35%;
		    margin-left: 35%;
		    display: flex;
		    margin-top: 20px;
		  }

		  .media-account .media-logo-w ul {
		    width: 100%;
		  }

		  .media-account .media-logo-w ul li {
		    width: 100%;
		    margin-top: 30px;
		  }

		  .media-account .media-logo-w img {
		    width: 90%;
		    margin-left: 5%;
		    margin-right: 5%;
		  }

		  .form {
		    width: 54%;
		    margin-left: 23%;
		    margin-right: 23%;
		    margin-top: 15px;
		  }

		  .form .title {
		    margin-bottom: 100px;
		  }

		  .form h2 {
		    width: 100%;
		    font-family: 'Noto Sans TC', sans-serif;
		    font-size: 1.5em;
		    font-weight: 400;
		    letter-spacing: 1.5px;
		    line-height: 2;
		    text-align: center;
		    margin-top: 40px;
		    color: #444444;
		  }

		  .form input[type="text"],
		  .form input[type="password"] {
		    width: 100%;
		    margin-top: 8px;
		    outline: none;
		    border: 0.5px solid #aaaa;
		    display: block;
		    background: none;
		    text-align: left;
		    padding: 12px 0 12px 15px;
		    font-family: 'Noto Sans TC', sans-serif;
		    color: #444444;
		    font-size: 0.8rem;
		    letter-spacing: 3px;
		    font-weight: 300;
		    border-radius: 12px;
		    transition: .5s;
		  }

		  .form ::-webkit-input-placeholder {
		    font-family: 'Noto Sans TC', sans-serif;
		    color: #aaaa;
		    font-size: 1.1rem;
		    letter-spacing: 4px;
		    font-weight: 300;
		  }

		  .form input[type="text"]:focus,
		  .form input[type="password"]:focus {
		    border-color: #444444;
		  }

		  .form .email {
		    width: 100%;
		    margin-top: 30px;
		  }

		  .form .password,
		  .form .check-password,
		  .form .username,
		  .form .address,
		  .form .phonenumber {
		    width: 100%;
		    margin-top: 20px;
		  }

		  .form .email h3,
		  .form .password h3,
		  .form .check-password h3,
		  .form .phonenumber h3 {
		    width: 100%;
		    font-family: 'Noto Sans TC', sans-serif;
		    font-size: 1.2rem;
		    font-weight: 400;
		    letter-spacing: 1.5px;
		    line-height: 2;
		    text-align: left;
		    margin-top: 30px;
		    color: #444444;
		  }

		  .form .email h3:after,
		  .form .password h3:after,
		  .form .check-password h3:after,
		  .form .username h3:after,
		  .form .address h3:after,
		  .form .phonenumber h3:after {
		    content: '*';
		    color: red;
		  }

		  .form .username,
		  .form .address {
		    display: flex;
		    /*flex-wrap: wrap;*/
		    margin: 0;
		  }

		  .form .username h3 {
		    width: 70px;
		    font-family: 'Noto Sans TC', sans-serif;
		    font-size: 1.2rem;
		    font-weight: 400;
		    letter-spacing: 1.5px;
		    line-height: 2;
		    text-align: left;
		    margin-top: 30px;
		    color: #444444;
		  }

		  .form .username h4 {
		    width: 80%;
		    font-family: 'Noto Sans TC', sans-serif;
		    font-size: 0.9rem;
		    font-weight: 300;
		    letter-spacing: 1.5px;
		    line-height: 2.5;
		    text-align: left;
		    margin-top: 30px;
		    color: #444444;
		  }

		  .form .username input[type="text"] {
		    width: 60%;
		  }

		  .form .username input[type="radio"] {
		    display: none;

		  }

		  .form .username input[type="radio"]+label span {
		    border: 1px solid #444444;
		    padding: 8px 8px;
		    display: inline-block;
		    /*background: #aaaa;*/
		    margin: auto;
		    transition: .5s;
		  }

		  .form .username input[type="radio"]:checked+label span {
		    border: 1px solid #444444;
		    padding: 8px 8px;
		    display: inline-block;
		    background: #444444;
		  }

		  .form .username label {
		    display: flex;
		    margin-left: 20px;
		    margin-bottom: 0;
		    margin-top: 5px;
		  }

		  .form .username span {
		    margin: auto;
		    margin-right: 1px;
		  }

		  .form .username p {
		    font-family: 'Noto Sans TC', sans-serif;
		    font-size: 1.2rem;
		    font-weight: 400;
		    letter-spacing: 1.5px;
		    line-height: 2;
		    text-align: left;
		    /*margin-top: 20px;*/
		    color: #444444;
		    margin-top: auto;
		    margin-bottom: auto;
		    /*margin-left: 10px;*/
		    padding-left: 5px;
		  }

		  .form .address {
		    width: 100%;
		    display: flex;
		  }

		  .form .address h3 {
		    width: 100px;
		    font-family: 'Noto Sans TC', sans-serif;
		    font-size: 1.2rem;
		    font-weight: 400;
		    letter-spacing: 1.5px;
		    line-height: 2;
		    text-align: left;
		    margin-top: 30px;
		    color: #444444;
		  }

		  .form .address h4 {
		    width: 80%;
		    font-family: 'Noto Sans TC', sans-serif;
		    font-size: 0.9rem;
		    font-weight: 300;
		    /*letter-spacing: 1.5px;*/
		    line-height: 3;
		    text-align: left;
		    color: #444444;
		    margin-top: 30px;
		  }

		  .form .address .zipcode3 {
		    width: 100%;
		    display: flex;
		    flex-wrap: wrap;
		  }

		  .f3 {
		    float: left;
		    /*margin-left:5px;*/
		    margin-right: 5px;
		    width: 50%;
		  }

		  .city,
		  .town {
		    padding: 8px 0 8px 8px;
		    font-family: 'Noto Sans TC', sans-serif;
		    font-size: 1rem;
		    font-weight: 300;
		    letter-spacing: 1.5px;
		    line-height: 2;
		    text-align: left;
		    margin-top: 5px;
		    color: #444444;
		    border-radius: 10px;
		    border: 0.5px solid #444444;
		    outline: none;
		    margin-bottom: 5px;
		  }

		  .f4 {
		    float: left;
		    width: 40%;
		  }

		  .loginbox {
		    width: 100%;
		    margin-top: 30px;
		    display: flex;
		  }

		  .loginbox .txtRight {
		    width: 25%;
		    font-family: 'Noto Sans TC', sans-serif;
		    font-size: 1.2rem;
		    font-weight: 400;
		    letter-spacing: 1.5px;
		    line-height: 2;
		    text-align: left;
		    margin-top: 20px;
		    margin-right: 10px;
		    color: #444444;
		  }

		  .loginbox .txtRight:after {
		    content: '*';
		    color: red;
		  }

		  .loginbox .txtCenter {
		    width: 60%;
		  }

		  .loginbox .txtCenter input[type="text1"] {
		    width: 80%;
		    margin-left: 8px;
		    outline: none;
		    padding: 8px 5px;
		    border-radius: 10px;
		    border: 0.5px solid #aaaa;
		    color: #444444;
		    font-family: 'Noto Sans TC', sans-serif;
		    font-size: 0.9rem;
		    font-weight: 300;
		    letter-spacing: 1.5px;
		  }

		  .loginbox .txtCenter input[type="text1"]:focus {
		    border: 0.5px solid #444444;
		  }

		  .loginbox .textLeft {
		    width: 10%;
		  }

		  .loginbox .txtLeft input[type="button"] {
		    background: #444444;
		    outline: none;
		    border: none;
		    padding: 7px 10px;
		    color: #fff;
		    font-family: 'Noto Sans TC', sans-serif;
		    letter-spacing: 3px;
		    border-radius: 10px;
		  }

		  .term {
		    width: 100%;
		    margin-top: 30px;
		    margin-bottom: 30px;
		  }

		  .term label {
		    width: 100%;
		    display: flex;
		  }

		  .term p {
		    width: 100%;
		    font-family: 'Noto Sans TC', sans-serif;
		    font-size: 1.1rem;
		    font-weight: 300;
		    letter-spacing: 2.5px;
		    /*line-height: 2;   */
		    margin-top: 20px;
		  }

		  .term input[type="checkbox"] {
		    /*width: 20%; */
		    display: none;
		  }

		  .term input[type="checkbox"]+label span {
		    border: 0.5px solid #444444;
		    padding: 8px 8px;
		    display: inline-block;
		    margin: 20px 12px 0 0;
		  }

		  .term input[type="checkbox"]:checked+label span {
		    border: 0.5px solid #444444;
		    background: #444444;
		  }

		  input[type="submit"] {
		    width: 100%;
		    background: #aaaa;
		    border: none;
		    font-family: 'Noto Sans TC', sans-serif;
		    font-size: 1.2rem;
		    color: #000;
		    letter-spacing: 5px;
		    padding: 10px 0;
		    margin-top: 20px;

		  }







		}