@charset "UTF-8";

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video {
  margin: 0;
  padding: 0;
  font-size: 100%;
  font: inherit;
  
}


/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

.Box ol, 
.Box ul {
  list-style: none; 
  margin: 0;
  padding: 0;
  font-size: 100%;
  font: inherit;
}

blockquote, 
q {
  quotes: none;
}

blockquote:before, 
blockquote:after, 
q:before, 
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

@font-face {
  font-family: "f_Medium";
  font-style: normal;
//  src: url("fonts/NotoSansTC-Medium.woff2") format("woff2");
}

@font-face {
  font-family: "f_Regular";
  font-style: normal;
////  src: url("fonts/NotoSansTC-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "f_num";
  font-style: normal;
//  src: url("fonts/DIN_2014.eot") format("opentype");
//  src: url("fonts/DIN_2014.eot?#iefix") format("embedded-opentype"), url("fonts/DIN_2014.woff2") format("woff2"), url("fonts/DIN_2014.woff") format("woff"), url("fonts/DIN_2014.ttf") format("truetype"), url("fonts/DIN_2014.svg#DIN2014-Demi") format("svg");
}

html, 
body {
  font-family: "f_Regular", Arial, sans-serif;
  color: #000000;
  line-height: 1.3;
  word-break: break-all;
}

@media screen and (max-width: 1023px) {
  html, 
  body {
    font-size: 1.0625rem;
  }
}

* {
  text-decoration: none;
  font-family: "f_Regular", Arial, sans-serif;
}

img {
  max-width: 100%;
  vertical-align: bottom;
}

/* My Favorite */
.wpsTableDataMiddle > div > span > a >  img, .wpsTableDataEnd > div > span > a >  img {
  max-width: none;
}
.portlet-form-input-field {
  width: 25%;	
}
/* My Favorite */

.p1rem {
  padding: 1rem;
}

@media screen and (max-width: 1023px) {
  .m_plr0 {
    padding-left: 0;
    padding-right: 0;
  }
}

@media screen and (max-width: 1023px) {
  .m_plr1rem {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.mlp5rem {
  margin-left: 0.5rem;
}

.space.hp5rem {
  padding: 0.25rem 0;
}

.space.h1rem {
  padding: 0.5rem 0;
}

.space.h2rem {
  padding: 1rem 0;
}

.space.h3rem {
  padding: 1.5rem 0;
}

@media screen and (max-width: 1023px) {
  .m_none {
    display: none !important;
  }
}

.c_none_df {
  display: none !important;
}

@media screen and (max-width: 1023px) {
  .c_none_df {
    display: flex !important;
  }
}

@media screen and (min-width: 1024px) {
  .c_none {
    display: none !important;
  }
}

/* added by Evan for safari */
input, textarea, keygen, select, button{
  font-size: 1rem;
}

.select_box {
  position: relative;
  width: 100%;
}

.select_box select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  border: 1px solid black;
  outline: none;
  
  height: 30px;
  border-radius: 3px;
  padding-left: 0.5rem;
  padding-right: 2rem;
}


.select_box select::-ms-expand {
  display: none;
}

.select_box i {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  color: #014099;

  pointer-events: none;
  
}



.select_box2 {
  position: relative;
  width: auto;
}

.select_box2 select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /*width: 100%;*/
  border: 1px solid rgba(33, 134, 224, 0.2);
  outline: none;
  height: 30px;
  border-radius: 3px;
  padding-left: 0.5rem;
  padding-right: 2rem;
}

@media screen and (max-width: 1023px) {
  .select_box2 select {
    white-space: nowrap;
    overflow: hidden;
    width: 10rem;
  }
}

.select_box2 select::-ms-expand {
  display: none;
}

.select_box2 i {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  color: #014099;
  pointer-events: none;
}




input {
  /* Commented by Alex Yang								
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
*/
  border: 1px solid black;
  border-radius: 3px;
  padding-left: 0.5rem;
  box-sizing: border-box;
  outline: none;
  width: 100%;
  /* Commented by David 20210527
  height: 30px;
 */
  height: 30px;
  color: #000000;
  /*font-size: 1rem; Commented by David 20210527 */
}

input:focus {
  border: 1px solid blue;
}

.newTextStyle {
  /* Commented by Alex Yang								
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
*/
  border: 1px solid rgba(33, 134, 224, 0.2);
  border-radius: 3px;
  padding-left: 0.5rem;
  box-sizing: border-box;
  width: auto;
  outline: none;
  height: 30px;
  color: #000000;
  font-size: 1rem;
}

.btn {
  display: flex;
  align-items: center;
  padding: 0 0.5rem 0 0;
  border-radius: 3px;
  overflow: hidden;
  color: #FFF;
  font-size: 0.8125rem;
}

.btn.red {
  background: #b6000e;
}

.btn.red span {
  background: #9c0007;
}

.btn.yellow {
  background: #d3ab21;
}

.btn.yellow span {
  background: #c18f12;
}

.btn span {
  display: flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  margin: 0 0.5rem 0 0;
}

.btn span img {
  width: 15px;
}

.btn2 {
  min-width: 75px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  box-sizing: border-box;
  color: #FFF;
  font-size: 0.8125rem;
  border-radius: 3px;
  outline: none;
  border: none;
}

/*Added by Tina Chiang*/
.btn:disabled ,.btn2:disabled ,.btn3:disabled {
  color: #CCCCCC !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
  border: 1px solid #DDD;
}

/*Added by Tina Chiang end*/

@media screen and (max-width: 1023px) {
  .btn2 {
    min-height: 32px;
  }
}

.btn2.gray {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f2f2f2+0,d5d5d5+100 */
  background: #f2f2f2;
  /* Old browsers */
  background: -moz-linear-gradient(top, #f2f2f2 0%, #d5d5d5 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #f2f2f2 0%, #d5d5d5 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #f2f2f2 0%, #d5d5d5 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#d5d5d5', GradientType=0);
  /* IE6-9 */
  color: #000000;

  box-shadow: 1px 1px 2px 1px #aaa; /* added by Evan */
}

.btn.gray:active,.btn2.gray:active,.btn3.gray:active{ /* added by Evan */
  color: white !important;
  background: #666666 !important;
}

.btn2.blue {
  background: #1166d3;
  box-shadow: 1px 1px 2px 1px #aaa;
}

.btn.blue:active ,.btn2.blue:active,.btn3.blue:active  { /* added by Evan */
  color: white !important;
  background: #014099 !important;
}

.btn2.blue:hover {
  color: white !important;
}

.sign_box {
 // background: url(../Images/bg_tt.svg) no-repeat left top, url(../Images/bg_t.svg) no-repeat right bottom, url(../Images/bg_color.svg), url(../Images/bg_img.png) center;
  background-size: 50%, 50%, cover, cover;
  display: flex;
  width: 100%;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 767px) {
  .sign_box {
    background-size: 100%, 100%, cover, cover;
    align-items: flex-start;
    /* padding: 5rem 0 0 0; */
    box-sizing: border-box;
    flex-flow: row wrap;
    height: 100%;
  }
}

.sign_box .main_box {
  margin: auto;
  /* Added by Alex Yang */
  width: calc(100% - 2rem);
  max-width: 700px;
  background: #FFF;
  border-radius: 10px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.4);
  padding: 50px 100px;
  box-sizing: border-box;
  text-align: center;
  /* height: 70vh; */
}

@media screen and (max-width: 767px) {
  .sign_box .main_box {
    padding: 3.5rem 1.5rem;
    width: calc(100% - 3rem);
  }
}

@media screen and (max-width: 767px) {
  .sign_box .main_box .logo {
    width: 210px;
  }
}

.sign_box .main_box .input_box label {
  position: relative;
  margin: 2rem 0 0 0;
  display: block;
}

.sign_box .main_box .input_box label img {
  position: absolute;
  left: 1rem;
  top: 33%;
  transform: translateY(-50%);
}

@media screen and (max-width: 767px) {
  .sign_box .main_box .input_box label img {
    left: 0.5rem;
  }
}

.sign_box .main_box .input_box label input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  border-bottom: 1px solid #000000;
  width: 100%;
  height: 55px;
  padding: 0 0 0 3.5rem;
  box-sizing: border-box;
  outline: none;
  transition: border 0.15s ease-out;
}

@media screen and (max-width: 767px) {
  .sign_box .main_box .input_box label input {
    padding: 0 0 0 2.5rem;
  }
}

.sign_box .main_box .input_box label input::placeholder {
  color: #b7b7b7;
  font-size: 1rem;
}

.sign_box .main_box .input_box label input:focus {
  border-bottom: 1px solid #2186E0;
}

.sign_box .main_box .input_box label a {
  display: block;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 35px;
  height: 35px;
}

@media screen and (max-width: 767px) {
  .sign_box .main_box .input_box label a {
    right: 0.5rem;
  }
}

.sign_box .main_box .input_box label a img {
  transform: none;
  position: unset;
  left: auto;
  top: auto;
}

.sign_box .main_box .input_box p {
  text-align: right;
  padding: 1rem 0 0 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.sign_box .main_box .input_box p a {
  color: #2186E0;
  font-size: 0.875rem;
  border-right: 1px solid #707070;
  padding: 0 0.75rem;
  height: 18px;
  display: flex;
  align-items: center;
}

.sign_box .main_box .input_box p a:last-child {
  border: none;
}

.sign_box .main_box .input_box div {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 0 0 0;
}

@media screen and (max-width: 767px) {
  .sign_box .main_box .input_box div {
    flex-flow: row wrap;
  }
}

@media screen and (max-width: 767px) {
  .sign_box .main_box .input_box div span {
    width: 100%;
    padding: 0 0 1rem 0;
  }
}

.sign_box .main_box .input_box div a {
  color: #2186E0;
  border: 1px solid #2186E0;
  padding: 6px 9px;
  margin: 0 0 0 9px;
}

.sign_box .footer {
  position: absolute;
  bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  /* height: 60px; */
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 1rem;
  font-size: 0.875rem;
  box-sizing: border-box;
  letter-spacing: 0.25px;
  left: 0;
}

@media screen and (max-width: 767px) {
  .sign_box .footer {
    position: unset;
    border: none;
    /*padding: 5rem 2.5rem 1.5rem 2.5rem  Commented by Alex Yang*/
    justify-content: flex-start;
    line-height: 1.5;
    font-size: 1rem;
    display: block;
  }
}

.sign_box .footer p {
  color: #92C1FF;
  margin: 0 0 0.75rem 0;
}

.sign_box .footer p a {
  color: #D9EAFF;
}

@media screen and (max-width: 767px) {
  .sign_box .footer p o {
    display: block;
  }
}

@media screen and (max-width: 767px) {
  .sign_box .footer p span {
    display: block;
  }
}

@media screen and (max-width: 767px) {
  .sign_box .footer p.copy {
    padding: 1rem 0 0 0;
    font-size: 1rem;
    text-align: center;
  }
}

.Box {
  display: flex;
  flex-flow: row wrap;
  background: #f8f8f8;
  min-height: 100vh;
  width: fit-content;
  min-width: 100%;
  z-index: 10;
}

.box_mask{
position: fixed;
top: 0;
left: 0;
background-color: #acacac;
opacity: 0.3;
width: 100vw;
height: 100vh;
z-index: 5;
}

.Box.open .left_menu_box {
  left: 0;
}

.Box.open .right_box {
  padding: 0 0 0 230px;
  box-sizing: border-box;
}

/* added by Evan*/
/* @media screen and (max-width: 1023px) { 
  .Box.open .right_box {
    padding: 0;
  }
} */

.Box .black_bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
}

.Box .black_bg:focus {
  opacity: 1;
  pointer-events: inherit;
}

.Box .left_menu_box {
  width: 230px;
  background: #ebebeb;
  position: fixed;
  z-index: 6;
  left: -230px;
  transition: left 0.15s ease-out;
}

@media screen and (max-width: 1023px) {
  .Box .left_menu_box {
    width: 100%;
    left: 0;
    height: 100%;
    overflow: hidden;
    padding-top: 60px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease-out;
  }
}

@media screen and (max-width: 1023px) {
  .Box .left_menu_box.focus {
    opacity: 1;
    pointer-events: inherit;
  }
}

.Box .left_menu_box .m_page {
  display: none;
}

@media screen and (max-width: 1023px) {
  .Box .left_menu_box .m_page {
    display: flex;
    justify-content: space-between;
    position: fixed;
    height: 60px;
    align-items: center;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
    background: #014099;
    box-sizing: border-box;
    padding: 0 0.5rem 0 1rem;
  }
}

.Box .left_menu_box .m_page .back {
  color: #FFF;
  transition: opacity 0.15s ease-out;
  opacity: 1;
}

.Box .left_menu_box .m_page .back i {
  margin: 0 0.5rem 0 0;
}

.Box .left_menu_box .m_page .back.none {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease-out;
}

.Box .left_menu_box .m_page .close_menu {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Box .left_menu_box .m_page .close_menu img {
  width: 20px;
}

.Box .left_menu_box .f_title {
  background: #014099;
  color: #FFF;
  display: flex;
  align-items: center;
  height: 45px;
  padding: 0 1.2rem 0 1rem;
  justify-content: space-between;
  position: static;
  top: auto;
  opacity: 1;
  pointer-events: inherit;
  box-sizing: border-box;
}

.Box .left_menu_box .f_title span {
  font-size: 0.8125rem;
  text-transform: uppercase;
  padding: 0 0 0 0.5rem;
}

.Box .left_menu_box .favourite {
  background: #014099;
  padding: 0 0 10px 0;
  height: auto;
  opacity: 1;
  pointer-events: inherit;
  position: static;
  top: auto;
}

@media screen and (max-width: 1023px) {
  .Box .left_menu_box .favourite {
    padding: 0.25rem;
    box-sizing: border-box;
  }
}

.Box .left_menu_box .favourite.menu3 {
  position: unset;
  background: #014099;
  height: auto;
}

.Box .left_menu_box .favourite.menu2 {
  position: unset;
  background: #014099;
  height: auto;
}

.Box .left_menu_box .favourite.menu1 {
  position: unset;
  background: #014099;
  height: auto;
}

.Box .left_menu_box .favourite ul {
  opacity: 1;
  pointer-events: inherit;
  display: block;
  padding: 0;
  overflow-y: auto;
  max-height: calc((100vh - 354px)/2);
  background: #1166d3;
}

@media screen and (max-width: 1023px) {
  .Box .left_menu_box .favourite ul {
    max-height: calc((100vh - 252px)/2);
  }
}

.Box .left_menu_box .favourite ul::-webkit-scrollbar-track {
  width: 4px;
  border-radius: 0.5rem;
  overflow: hidden;
  background: none;
  margin: 0.25rem 0 0 0;
}

.Box .left_menu_box .favourite ul::-webkit-scrollbar {
  width: 4px;
  background: none;
  border-radius: 0.5rem;
}

.Box .left_menu_box .favourite ul::-webkit-scrollbar-thumb {
  width: 4px;
  background: none;
  background-color: #fbff97;
}

.Box .left_menu_box .favourite ul>li.hh>div>.pin>a {
  background: url(../Images/icon/pin_full.svg) no-repeat center;
  background-size: 14px;
}

.Box .left_menu_box .favourite ul>li.hh>div>a.h {
  color: #014099;
  background: #f5f5f5 url(../Images/icon/arrow_right_blue.png) no-repeat center right 1rem;
  background-size: 15px;
}

.Box .left_menu_box .favourite ul>li>div>a {
  color: #FFF;
  padding: 0 0 0 2.5rem;
  background: #1166d3;
  font-size: 1rem;
}

@media screen and (max-width: 1023px) {
  .Box .left_menu_box .favourite ul>li>div>a {
    padding: 0 0 0 2.75rem;
  }
}

.Box .left_menu_box .favourite ul>li>div>a.h {
  background: #1166d3 url(../Images/icon/arrow_right_white.png) no-repeat center right 1rem;
  background-size: 15px;
}

.Box .left_menu_box .favourite ul>li>div .pin {
  opacity: 1;
  pointer-events: inherit;
}

@media screen and (max-width: 1023px) {
  .Box .left_menu_box .favourite ul>li>div .pin {
    left: 0.75rem;
  }
}

.Box .left_menu_box .favourite ul>li>div .pin a {
  background: url(../Images/icon/pin_full_yellow.svg) no-repeat center;
  background-size: 14px;
}

@media screen and (max-width: 1023px) {
  .Box .left_menu_box .favourite ul>li>div .pin a {
    background-size: 18px;
  }
}

.Box .left_menu_box .favourite ul>li>div .pin a:hover {
  background: url(../Images/icon/pin_b_yellow.svg) no-repeat center;
  background-size: 14px;
  transition: background 0.15s ease-out;
}

@media screen and (max-width: 1023px) {
  .Box .left_menu_box .favourite ul>li>div .pin a:hover {
    background-size: 18px;
  }
}

.Box .left_menu_box .favourite ul>li:hover>div>a {
  color: #014099;
  background: #f5f5f5;
}

.Box .left_menu_box .favourite ul>li:hover>div>a.h {
  background: #f5f5f5 url(../Images/icon/arrow_right_blue.png) no-repeat center right 1rem;
  background-size: 15px;
}

@media screen and (max-width: 1023px) {
  .Box .left_menu_box .favourite ul>li:hover>div>a.h {
    background-size: 18px;
  }
}

.Box .left_menu_box .favourite ul>li:hover>div .pin a {
  background: url(../Images/icon/pin_full.svg) no-repeat center;
  background-size: 14px;
}

@media screen and (max-width: 1023px) {
  .Box .left_menu_box .favourite ul>li:hover>div .pin a {
    background-size: 18px;
  }
}

.Box .left_menu_box .favourite ul>li:hover>div .pin a:hover {
  background: url(../Images/icon/pin_b.svg) no-repeat center;
  background-size: 14px;
  transition: background 0.15s ease-out;
}

@media screen and (max-width: 1023px) {
  .Box .left_menu_box .favourite ul>li:hover>div .pin a:hover {
    background-size: 18px;
  }
}

.Box .left_menu_box ul {
  width: 230px;
  top: 0;
}

@media screen and (max-width: 1023px) {
  .Box .left_menu_box ul {
    width: 100%;
  }
}
.Box .left_menu_box ul li.hh {
  background: #b9ddfd;
}
.Box .left_menu_box ul li.hh>div>.pin {
  opacity: 1;
  pointer-events: inherit;
}

.Box .left_menu_box ul li.hh>div>.pin>a {
  background: url(../Images/icon/pin_b.svg) no-repeat center;
  background-size: 14px;
}

.Box .left_menu_box ul li.hh>div>a {
  color: #014099;
  padding: 0 0 0 2.5rem;
}

.Box .left_menu_box ul li.hh>div>a.h {
  background: url(../Images/icon/arrow_right_blue.png) no-repeat center right 1rem;
  background-size: 15px;
  transition: background 0.15s ease-out;
}

.Box .left_menu_box ul li.like.hh>div>.pin>a {
  background: url(../Images/icon/pin_full.svg) no-repeat center;
  background-size: 14px;
}

.Box .left_menu_box ul li.like>div>.pin {
  opacity: 1;
  pointer-events: inherit;
}

.Box .left_menu_box ul li.like>div>.pin>a {
  background: url(../Images/icon/pin_full.svg) no-repeat center;
  background-size: 14px;
}

@media screen and (max-width: 1023px) {
  .Box .left_menu_box ul li.like>div>.pin>a {
    background: url(../Images/icon/pin_full.svg) no-repeat center;
    background-size: 18px;
  }
}

.Box .left_menu_box ul li.like>div>.pin>a:hover {
  background: url(../Images/icon/pin_b.svg) no-repeat center;
  background-size: 14px;
  transition: background 0.15s ease-out;
}

@media screen and (max-width: 1023px) {
  .Box .left_menu_box ul li.like>div>.pin>a:hover {
    background: url(../Images/icon/pin_full.svg) no-repeat center;
    background-size: 18px;
  }
}

.Box .left_menu_box ul li.like>div>a {
  padding: 0 0 0 2.5rem;
}

@media screen and (max-width: 1023px) {
  .Box .left_menu_box ul li.like>div>a {
    padding: 0 0 0 3rem;
  }
}

.Box .left_menu_box ul li div {
  position: relative;
}

.Box .left_menu_box ul li div .pin {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  height: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease-out;
  z-index: 3;
}

@media screen and (max-width: 1023px) {
  .Box .left_menu_box ul li div .pin {
    opacity: 1;
    pointer-events: inherit;
    height: 32px;
  }
}

.Box .left_menu_box ul li div .pin a {
  display: flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  background: url(../Images/icon/pin_b.svg) no-repeat center;
  background-size: 14px;
}

@media screen and (max-width: 1023px) {
  .Box .left_menu_box ul li div .pin a {
    width: 32px;
    height: 32px;
    background-size: 18px;
  }
}

.Box .left_menu_box ul li div .pin a:hover {
  background: url(../Images/icon/pin_full.svg) no-repeat center;
  background-size: 14px;
  transition: background 0.15s ease-out;
}

@media screen and (max-width: 1023px) {
  .Box .left_menu_box ul li div .pin a:hover {
    background-size: 18px;
  }
}

.Box .left_menu_box ul li div>a {
  height: 52px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 0 0 1rem;
  font-size: 0.875rem;
  color: #000000;
  transition: padding 0.15s ease-out;
}

@media screen and (max-width: 1023px) {
  .Box .left_menu_box ul li div>a {
    padding: 0 0 0 3rem;
    font-size: 1rem;
  }
}

.Box .left_menu_box ul li div>a.h {
  background: url(../Images/icon/arrow_right.png) no-repeat center right 1rem;
  background-size: 15px;
  position: absolute;
  width: 52px;
  right: 0;
  top: 0;
  height: 52px;
  z-index: 2;
  padding: 0;
}

.Box .left_menu_box ul li div:hover .pin {
  opacity: 1;
  pointer-events: inherit;
}

.Box .left_menu_box ul li div:hover>a {
  padding: 0 0 0 2.5rem;
}

@media screen and (max-width: 1023px) {
  .Box .left_menu_box ul li div:hover>a {
    padding: 0 0 0 3rem;
  }
}

.Box .left_menu_box ul li:hover>div>a {
  color: #014099;
}

.Box .left_menu_box ul li:hover>div>a.h {
  background: url(../Images/icon/arrow_right_blue.png) no-repeat center right 1rem;
  background-size: 15px;
  transition: background 0.15s ease-out;
}

.Box .left_menu_box>div {
  position: relative;
}

@media screen and (max-width: 1023px) {
  .Box .left_menu_box>div {
    height: 100%;
  }
}

.Box .left_menu_box>div>div {
  opacity: 0;
  pointer-events: none;
}

@media screen and (max-width: 1023px) {
  .Box .left_menu_box>div>div {
    height: auto;
    width: 100%;
    overflow-y: auto;
    transition: opacity 0.15s ease-out;
  }
}

.Box .left_menu_box>div>div.focus {
  opacity: 1;
  pointer-events: inherit;
}

@media screen and (max-width: 1023px) {
  .Box .left_menu_box>div>div.focus {
    transition: opacity 0.15s ease-out;
  }
}

.Box .left_menu_box>div>div ul {
  display: none;
  padding-bottom: 3rem;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}

.Box .left_menu_box>div>div ul::-webkit-scrollbar-track {
  width: 4px;
  border-radius: 0.5rem;
  overflow: hidden;
  background: none;
  margin: 0.25rem 0 0 0;
  pointer-events: none;
}

.Box .left_menu_box>div>div ul::-webkit-scrollbar {
  width: 4px;
  background: none;
  border-radius: 0.5rem;
  pointer-events: none;
}

.Box .left_menu_box>div>div ul::-webkit-scrollbar-thumb {
  width: 4px;
  background: none;
  background-color: #2186E0;
  pointer-events: none;
}

.Box .left_menu_box .menu1 {
  background: #ebebeb;
  opacity: 1;
  pointer-events: inherit;
  position: unset;
}

@media screen and (max-width: 1023px) {
  .Box .left_menu_box .menu1 {
    left: 100%;
  }
}

.Box .left_menu_box .menu1 ul {
  display: block;
}

.Box .left_menu_box .menu1 ul li div a {
  font-size: 1rem; /* edited by Evan*/
}

.Box .left_menu_box .menu2 {
  left: 226px;
  position: absolute;
  background: #f0f0f0;
  z-index: 1;
  top: 0;
  position: absolute;
  height: 100%;
}

@media screen and (max-width: 1023px) {
  .Box .left_menu_box .menu2 {
    left: 100%;
    height: 100%;
  }
}

.Box .left_menu_box .menu3 {
  left: 452px;
  position: absolute;
  background: #f5f5f5;
  z-index: 1;
  top: 0;
  position: absolute;
  height: 100%;
}

@media screen and (max-width: 1023px) {
  .Box .left_menu_box .menu3 {
    left: 200%;
    height: 100%;
  }
}

.Box .left_menu_box .menu3.f_in {
  left: 226px;
  height: 100%;
}

@media screen and (max-width: 1023px) {
  .Box .left_menu_box .menu3.f_in {
    left: auto;
  }
}

.Box .left_menu_box .menu4 {
  background: #fdfdfd;
  left: 678px;
  position: absolute;
  z-index: 1;
  top: 0;
  position: absolute;
  height: 100%;
}

@media screen and (max-width: 1023px) {
  .Box .left_menu_box .menu4 {
    left: 300%;
    height: 100%;
  }
}

.Box .left_menu_box .menu4.f_in {
  left: 456px;
}

@media screen and (max-width: 1023px) {
  .Box .left_menu_box .menu4.f_in {
    left: auto;
  }
}

.Box .left_menu_box .menu4.f_in2 {
  left: 226px;
}

@media screen and (max-width: 1023px) {
  .Box .left_menu_box .menu4.f_in2 {
    left: auto;
  }
}

.Box .right_box {
  width: 100%;
  transition: padding 0.15s ease-out;
}

.Box .right_box .top {
  height: 55px;
  display: flex;
  justify-content: space-between;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
  background: #FFF;
  position: fixed;
  width: 100%;
  z-index: 1;
}

@media screen and (max-width: 1023px) {
  .Box .right_box .top {
    box-shadow: none;
    height: 66px;
  }
}

.Box .right_box .top .left {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 0 0 1rem;
  flex-shrink: 0;
}

@media screen and (max-width: 1023px) {
  .Box .right_box .top .left {
    padding: 0 0 0 0.25rem;
  }
}

.Box .right_box .top .left .menu-btn {
  display: block;
  width: 50px;
  height: 50px;
  cursor: pointer;
  position: relative;
}

.Box .right_box .top .left .menu-btn span {
  display: block;
  position: absolute;
  top: 13px;
  left: 8px;
  height: 3px;
  width: 35px;
  background: #3e3e3e;
  transition: all .3s ease-out;
  border-radius: 10px;
}

@media screen and (max-width: 1023px) {
  .Box .right_box .top .left .menu-btn span {
    background: #8c8c8c;
    width: 22px;
    left: 13px;
    top: 17px;
    height: 2px;
  }
}

.Box .right_box .top .left .menu-btn span.line-2 {
  top: 24px;
}

.Box .right_box .top .left .menu-btn span.line-3 {
  top: 34px;
}

@media screen and (max-width: 1023px) {
  .Box .right_box .top .left .menu-btn span.line-3 {
    top: 31px;
  }
}

.Box .right_box .top .left .menu-btn.focus span.line-1 {
  top: 24px;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.Box .right_box .top .left .menu-btn.focus span.line-2 {
  opacity: 0;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.Box .right_box .top .left .menu-btn.focus span.line-3 {
  top: 24px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.Box .right_box .top .left .logo {
  margin: 0 0 0 1rem;
  display: flex;
  align-items: center;
  height: 60px;
}

@media screen and (max-width: 1023px) {
  .Box .right_box .top .left .logo {
    margin: 0 0 0 0;
  }
}

.Box .right_box .top .left .logo a {
  height: 60px;
  display: flex;
  align-items: center;
}

.Box .right_box .top .left .logo img {
  height: 50px;
}

@media screen and (max-width: 1023px) {
  .Box .right_box .top .left .logo img {
    height: 28px;
  }
}

.Box .right_box .top .left .logo span {
  font-size: 1.5625rem;
  color: #0862b6;
  border-left: 1px solid #014099;
  padding: 0 0 0 1rem;
  margin: 12px 0 0 1rem;
}

@media screen and (max-width: 1023px) {
  .Box .right_box .top .left .logo span {
    font-size: 1rem;
    padding: 0 0 0 0.4rem;
    margin: 4px 0 0 0.4rem;
    color: #2186E0;
    border-left: 1px solid #2186E0;
  }
}

.Box .right_box .top .right {
  display: flex;
  flex-shrink: 0;
}

.Box .right_box .top .right.focus {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#2994e6+0,1bb3ee+100 */
  background: #2994e6;
  /* Old browsers */
  background: -moz-linear-gradient(left, #2994e6 0%, #1bb3ee 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #2994e6 0%, #1bb3ee 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #2994e6 0%, #1bb3ee 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2994e6', endColorstr='#1bb3ee', GradientType=1);
  /* IE6-9 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  padding: 1rem;
  box-sizing: border-box;
  display: block;
  left: -100%;
  animation: show 0.3s forwards;
}

@keyframes show {
  from {
    opacity: 0;
    left: 100%;
  }
  to {
    opacity: 1;
    left: 0;
  }
}

.Box .right_box .top .right.focus .who {
  display: none;
}

.Box .right_box .top .right.focus .who_m {
  display: block;
  color: #FFF;
  padding: 2rem 0.5rem 1rem 0.5rem;
  line-height: 1.5;
  border-bottom: 1px solid #FFF;
  margin: 0 0 1rem 0;
}

.Box .right_box .top .right.focus a {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  width: 100%;
  height: 60px;
  padding: 0 0 0 0.5rem;
}

.Box .right_box .top .right.focus a img {
  margin: 0 0.75rem 0 0;
  padding: 0;
}

.Box .right_box .top .right.focus a.board {
  background: none;
}

.Box .right_box .top .right.focus a.doubt {
  background: none;
}

.Box .right_box .top .right.focus a.out {
  background: none;
  position: absolute;
  bottom: 0.75rem;
  left: 1rem;
  padding: 0.75rem 0 0 0;
  justify-content: center;
  border-top: 1px solid #FFF;
  width: calc(100% - 2rem);
}

.Box .right_box .top .right.focus a.close_user {
  display: block;
  position: fixed;
  right: 1rem;
  top: 1rem;
  height: 32px;
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.Box .right_box .top .right.focus a.close_user img {
  width: 20px;
  margin: 0;
}

.Box .right_box .top .right a {
  width: 65px;
  height: 55px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  color: #FFF;
  font-size: 0.875rem;
  padding: 0.25rem 0 0 0;
  box-sizing: border-box;
}

@media screen and (max-width: 1023px) {
  .Box .right_box .top .right a {
    display: none;
  }
}

.Box .right_box .top .right a img {
  width: 25px;
  padding: 0 0 6px 0;
}

.Box .right_box .top .right a.board {
  background: #2186E0;
}

.Box .right_box .top .right a.doubt {
  background: #1166d3;
}

.Box .right_box .top .right a.out {
  background: #002e70;
}

.Box .right_box .top .right a.close_user {
  display: none;
}

.Box .right_box .top .right .who_m {
  display: none;
}

.Box .right_box .top .right .who {
  background: #014099;
  color: #FFF;
  display: flex;
  align-items: center;
  padding: 0 2rem;
  justify-content: center;
  letter-spacing: 1px;
}

@media screen and (max-width: 1023px) {
  .Box .right_box .top .right .who {
    color: #8c8c8c;
    background: none;
    font-size: 1rem;
    padding: 0 1rem 0 0;
    /* background: url(../Images/icon/user2.svg) no-repeat center left; */
    background-size: 15px;
  }
}

@media screen and (max-width: 1023px) {
  .Box .right_box .top .right .who span {
    display: none;
  }
}
/* 20210730 我的最愛 added by Evan */
.Box .right_box .top .right a.favorite {
  background: #1166d3;
  display: flex;
}
.Box .right_box .top .right.focus .favorite {
  display: none;
}
@media screen and (max-width: 1023px) {
  .Box .right_box .top .right a.favorite {
    width: 50px;
    background: unset;
    height: auto;
  }
  .Box .right_box .top .right .favorite span {
    display: none;
  }
  .Box .right_box .top .right a.favorite img{
    width: 20px;
    filter: brightness(0.7);
    padding-right: 25%;
    border-right: solid 1px #8c8c8c;
  }
}
/* 20210730 我的最愛end added by Evan */

.Box .content_box {
  padding: 15px;
  padding-top: 70px;
  /* min-height: calc(100vh - 85px); Comment by Alex 修正電腦版有Scroll bar問題*/
  min-height: calc(100vh - 110px);
  /* Comment by Alex 修正電腦版有Scroll bar問題*/
  box-sizing: border-box;
}

@media screen and (max-width: 1023px) {
  .Box .content_box {
    padding: 1rem;
    min-height: unset;
    padding-top: calc(1rem + 66px);
  }
}
/* font size by Evan */

.Box .content_box .bread {
  font-size: 0.875rem;
  color: #828282;
  padding: 0 0 20px 0;
  color: #014099;
}

@media screen and (max-width: 1023px) {
  .Box .content_box .bread {
    display: none;
  }
}

.Box .content_box .bread a {
  color: #828282;
}

.Box .content_box .bread a:after {
  content: "/";
  font-size: 0.75rem;
  padding: 0 0.5rem;
}

/* font size by Evan */
.Box footer {
  color: #828282;
  text-align: right;
  font-size: 0.875rem;
  line-height: 1.5;
  padding: 1rem;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .Box footer {
    text-align: center;
    font-size: 1rem;
  }
}

@media screen and (max-width: 767px) {
  .Box footer .www {
    display: none;
  }
}

.index_box.one .abgne_tab .tabs li {
  display: none;
}

.index_box.one .abgne_tab .tabs li.only {
  width: 100%;
  display: flex;
}

.index_box.one .tab_container.ri {
  justify-content: flex-end;
}

.index_box.one .tab_container .tab_content {
  display: none;
}

.index_box.one .tab_container .tab_content.only {
  display: flex;
}

.index_box.one .tab_container .tab_content.only#tab1 {
  width: 100%;
}

.index_box.one .tab_container .tab_content.only#tab2 {
  width: 100%;
}

.index_box .abgne_tab .tabs {
  display: flex;
  justify-content: space-between;
}

@media screen and (max-width: 1023px) {
  .index_box .abgne_tab .tabs {
    padding: 0.5rem 0 1.25rem 0;
  }
}

.index_box .abgne_tab .tabs li {
  width: calc(50% - 12px);
  padding: 0 0 0.5rem 0;
  display: flex;
  justify-content: space-between;
  transition: width 0.3s ease-out;
}

@media screen and (max-width: 1023px) {
  .index_box .abgne_tab .tabs li {
    justify-content: center;
  }
}

.index_box .abgne_tab .tabs li.l {
  width: calc(50% - 12px);
}

@media screen and (max-width: 1023px) {
  .index_box .abgne_tab .tabs li.l {
    width: calc(50% - 12px);
  }
}

.index_box .abgne_tab .tabs li.r {
  width: calc(50% - 12px);
}

@media screen and (max-width: 1023px) {
  .index_box .abgne_tab .tabs li.r {
    width: calc(50% - 12px);
  }
}

@media screen and (max-width: 1023px) {
  .index_box .abgne_tab .tabs li.active .c {
    color: #2186E0;
    opacity: 1;
    position: relative;
  }
}

@media screen and (max-width: 1023px) {
  .index_box .abgne_tab .tabs li.active .c:after {
    content: "";
    position: absolute;
    width: 50%;
    height: 2px;
    bottom: -8px;
    left: 25%;
    background: #2186E0;
  }
}

.index_box .abgne_tab .tabs li p {
  display: flex;
  align-items: flex-end;
}

.index_box .abgne_tab .tabs li p.l {
  padding: 0 0 0 1rem;
}

.index_box .abgne_tab .tabs li p.all {
  font-size: 0.875rem;
}

@media screen and (max-width: 1023px) {
  .index_box .abgne_tab .tabs li p.all {
    display: none;
  }
}

.index_box .abgne_tab .tabs li p.all .btn2 {
  margin: 0 0.5rem 0 0;
}

.index_box .abgne_tab .tabs li p.all .num {
  font-family: "f_num", Arial, sans-serif;
  color: #014099;
  padding: 0 0.25rem;
}

.index_box .abgne_tab .tabs li .c {
  pointer-events: none;
  font-size: 1.3125rem;
  font-family: "f_Medium", Arial, sans-serif;
  color: #2186E0;
}

@media screen and (max-width: 1023px) {
  .index_box .abgne_tab .tabs li .c {
    font-size: 16px;
    pointer-events: inherit;
    color: #2d2d2d;
    opacity: 0.6;
  }
}

.index_box .abgne_tab .tabs li .more {
  background: #014099;
  color: #FFF;
  border-radius: 3px;
  display: inline-block;
  font-size: 0.75rem;
  font-weight: bolder;
  padding: 2px 0.4rem;
  margin: 0.25rem 0 0 0.5rem;
  text-transform: uppercase;
  transform: scale(0.85);
}

@media screen and (max-width: 1023px) {
  .index_box .abgne_tab .tabs li .more {
    display: none;
  }
}

.index_box .abgne_tab .tabs li .r {
  background: #014099;
  width: 17px;
  height: 17px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 0 0.5rem;
}

.index_box .abgne_tab .tabs li .r img {
  width: 13px;
}

.index_box .abgne_tab .tabs li .btn {
  margin: 0 1rem 0 0;
}

.index_box .tab_container {
  display: flex;
  justify-content: space-between;
}

.index_box .tab_container .tab_content {
  width: calc(50% - 12px);
  transition: width 0.3s ease-out;
}

.index_box .tab_container .tab_content#tab1 {
  width: calc(50% - 12px);
}

@media screen and (max-width: 1023px) {
  .index_box .tab_container .tab_content#tab1 {
    width: 100%;
  }
}

.index_box .tab_container .tab_content#tab2 {
  width: calc(50% - 12px);
}

@media screen and (max-width: 1023px) {
  .index_box .tab_container .tab_content#tab2 {
    width: 100%;
  }
}

.index_box .tab_container .tab_content ul {
  width: 100%;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

@media screen and (max-width: 1023px) {
  .index_box .tab_container .tab_content ul {
    box-shadow: none;
    border-radius: 0;
  }
}

.index_box .tab_container .tab_content ul li {
  display: flex;
  box-sizing: border-box;
  background: #FFF;
}

@media screen and (max-width: 1023px) {
  .index_box .tab_container .tab_content ul li {
    flex-flow: row wrap;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    margin: 0 0 0.75rem 0;
  }
}

.index_box .tab_container .tab_content ul li:nth-child(odd) {
  background: #f2f5fa;
}

.index_box .tab_container .tab_content ul li.f {
  background: #2186E0;
  color: #FFF;
}

@media screen and (max-width: 1023px) {
  .index_box .tab_container .tab_content ul li.f {
    display: none;
  }
}

.index_box .tab_container .tab_content ul li.f p {
  text-align: left !important;
  display: flex;
  align-items: center;
}

.index_box .tab_container .tab_content ul li.f p img {
  width: 8px;
  margin: 0 0 0 0.5rem;
}

.index_box .tab_container .tab_content ul li.new .name {
  position: relative;
}

@media screen and (max-width: 1023px) {
  .index_box .tab_container .tab_content ul li.new .name {
    padding-right: 3rem;
  }
}

.index_box .tab_container .tab_content ul li.new .name:before {
  content: "NEW";
  position: absolute;
  font-size: 0.75rem;
  background: #b6000e;
  color: #FFF;
  top: 1px;
  left: 0;
  padding: 2px 8px 1px 8px;
  border-radius: 20px;
  transform: scale(0.65);
  font-family: "f_Medium", Arial, sans-serif;
}

@media screen and (max-width: 1023px) {
  .index_box .tab_container .tab_content ul li.new .name:before {
    right: 0.5rem;
    top: 0.75rem;
    left: auto;
  }
}

.index_box .tab_container .tab_content ul li.not .now {
  color: #b6000e;
}

.index_box .tab_container .tab_content ul li p {
  padding: 1rem 0.5rem;
  box-sizing: border-box;
  border-right: 1px solid #dfe2e8;
  font-size: 0.875rem;
}

@media screen and (max-width: 1023px) {
  .index_box .tab_container .tab_content ul li p {
    border: none;
    padding: 0.25rem 0.5rem 0.5rem 0.5rem;
  }
}

.index_box .tab_container .tab_content ul li p:last-child {
  border: none;
}

@media screen and (max-width: 1023px) {
  .index_box .tab_container .tab_content ul li p.name {
    padding: 0.75rem 0.5rem;
    margin: 0 0 0.25rem 0;
    order: 1;
    background: #2186E0;
  }
}

.index_box .tab_container .tab_content ul li p.name a {
  color: #014099;
}

@media screen and (max-width: 1023px) {
  .index_box .tab_container .tab_content ul li p.name a {
    color: #FFF;
  }
}

.index_box .tab_container .tab_content ul li p.time {
  color: #8e8e8e;
  font-family: "f_num", Arial, sans-serif;
  font-size: 0.8125rem;
}

.index_box .tab_container .tab_content ul li p.now {
  color: #676767;
}

.index_box .tab_container .tab_content ul.one li p:nth-child(1) {
  flex: 0 0 120px;
}

@media screen and (max-width: 1023px) {
  .index_box .tab_container .tab_content ul.one li p:nth-child(1) {
    flex: 0 0 100%;
    order: 2;
  }
}

.index_box .tab_container .tab_content ul.one li p:nth-child(2) {
  width: 100%;
}

.index_box .tab_container .tab_content ul.one li p:nth-child(3) {
  flex: 0 0 78px;
  text-align: center;
}

@media screen and (max-width: 1023px) {
  .index_box .tab_container .tab_content ul.one li p:nth-child(3) {
    flex: 0 0 auto;
    color: #8e8e8e;
    order: 3;
  }
}

@media screen and (max-width: 1023px) {
  .index_box .tab_container .tab_content ul.one li p:nth-child(3):before {
    content: "送出者：";
  }
}

.index_box .tab_container .tab_content ul.one li p:nth-child(4) {
  flex: 0 0 63px;
  text-align: center;
}

@media screen and (max-width: 1023px) {
  .index_box .tab_container .tab_content ul.one li p:nth-child(4) {
    display: none;
  }
}

.index_box .tab_container .tab_content ul.one li p:nth-child(5) {
  flex: 0 0 90px;
}

@media screen and (max-width: 1023px) {
  .index_box .tab_container .tab_content ul.one li p:nth-child(5) {
    order: 4;
    flex: 0 0 auto;
  }
}

.index_box .tab_container .tab_content ul.one li p:nth-child(6) {
  flex: 0 0 66px;
  text-align: center;
}

@media screen and (max-width: 1023px) {
  .index_box .tab_container .tab_content ul.one li p:nth-child(6) {
    display: none;
  }
}

.index_box .tab_container .tab_content ul.two li p:nth-child(1) {
  flex: 0 0 120px;
}

@media screen and (max-width: 1023px) {
  .index_box .tab_container .tab_content ul.two li p:nth-child(1) {
    flex: 0 0 100%;
    order: 2;
  }
}

.index_box .tab_container .tab_content ul.two li p:nth-child(2) {
  flex: 0 0 90px;
}

@media screen and (max-width: 1023px) {
  .index_box .tab_container .tab_content ul.two li p:nth-child(2) {
    order: 3;
    flex: 0 0 auto;
    color: #8e8e8e;
  }
}

.index_box .tab_container .tab_content ul.two li p:nth-child(3) {
  width: 100%;
}

.index_box .tab_container .tab_content ul.two li p:nth-child(4) {
  flex: 0 0 90px;
}

@media screen and (max-width: 1023px) {
  .index_box .tab_container .tab_content ul.two li p:nth-child(4) {
    order: 4;
    flex: 0 0 auto;
  }
}

.form_box .title, 
.form_box .footer {
  background: #dcecfa;
}

.form_box .title .top_link {
  display: flex;
  justify-content: flex-end;
  padding: 0.75rem 0.75rem 0.5rem 0.75rem;
}

.form_box .title .top_link a {
  margin: 0 0 0 0.5rem;
}

.form_box .title h1 {
  font-size: 1.5625rem;
  font-weight: bolder;
  text-align: center;
  color: #2d2d2d;
}

.form_box .title .bt_link {
  display: flex;
  /*modify by eric*/
  justify-content: flex-end;
  /*modify by eric*/
  padding: 0.5rem 0rem 0.75rem 0rem;
}

@media screen and (max-width: 1023px) {
  .form_box .title .bt_link {
    padding: 0;
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    /* Edit by Evan  */
    z-index: 1;
    width: 100%;
  }
}

.form_box .title .bt_link .switch {
  width: 70px;
  height: 70px;
  align-items: center;
  justify-content: center;
  background: #FFF;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  margin: 0 auto -35px auto;
  color: #014099;
}

.form_box .title .bt_link .switch i {
  margin: 0 0 30px 0;
  transition: transform 0.15s ease-out;
}

.form_box .title .bt_link .switch.focus i {
  transform: rotate(180deg);
}

.form_box .title .bt_link .l {
  width: 100%;
  flex-flow: row wrap;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
}

@media screen and (max-width: 1023px) {
  .form_box .title .bt_link .l {
    width: 100vw; 
    /* Edit by Evan */
    flex-flow: row wrap;
    background: #FFF;
    box-sizing: border-box;
    padding: 0.5rem;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    justify-content: start;
  }
}


/* modify by eric */

.form_box .title .bt_link .l a, 
.form_box .title .bt_link .l button, 
.form_box .title .bt_link .l input {
  margin: 0 0.5rem 0.5rem 0;
}

/* added by Evan */
.form_box .footer .bt_link .l a, 
.form_box .footer .bt_link .l button, 
.form_box .footer .bt_link .l input {
  margin: 0 0.5rem 0.5rem 0;
}

@media screen and (max-width: 1023px) {
  .form_box .title .bt_link .l a, 
  .form_box .title .bt_link .l button {
    width: calc((100% - 1.5rem) / 4);
    padding: 0 0.5rem;
    margin-bottom: 0.5rem;
  }
  .form_box .title .bt_link .l a:nth-child(4n), 
  .form_box .title .bt_link .l button:nth-child(4n) {
    margin: 0;
  }
  .form_box .title .bt_link .l a:nth-last-child(-n+4), 
  .form_box .title .bt_link .l button:nth-last-child(-n+4) {
    margin-bottom: 0;
  }
}

.form_box .title .bt_link .l input:focus {
  border: none;
}


/* modify by eric */

.form_box .footer .bt_link {
  display: flex;
  /*modify by eric*/
  justify-content: flex-end;
  /*modify by eric*/
  padding: 0.5rem 0rem 0.75rem 0rem;
}

@media screen and (max-width: 1023px) {
  .form_box .footer .bt_link {
    padding: 0;
    display: block;
    position: fixed;
    bottom: 0;
    left: 0; 
    /* Edit by Evan  */
    z-index: 1;
    width: 100%;
  }
}

.form_box .footer .bt_link .switch {
  width: 70px;
  height: 70px;
  align-items: center;
  justify-content: center;
  background: #FFF;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  margin: 0 auto -35px auto;
  color: #014099;
}

.form_box .footer .bt_link .switch i {
  margin: 0 0 30px 0;
  transition: transform 0.15s ease-out;
}

.form_box .footer .bt_link .switch.focus i {
  transform: rotate(180deg);
}

.form_box .footer .bt_link .l {
  width: 100%;
  flex-flow: row wrap;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
}

@media screen and (max-width: 1023px) {
  .form_box .footer .bt_link .l {
    width: 100vw; 
    /* Edit by Evan */
    flex-flow: row wrap;
    background: #FFF;
    box-sizing: border-box;
    padding: 0.5rem;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    justify-content: start;
  }
}


/* modify by eric */

.form_box .footer .bt_link .l a, 
.form_box .footer .bt_link .l button, 
.form_box .footer .bt_link .l input {
  margin: 0 0.5rem 0.5rem 0;
}

@media screen and (max-width: 1023px) {
  .form_box .footer .bt_link .l a, 
  .form_box .footer .bt_link .l button {
    width: calc((100% - 1.5rem) / 4);
    padding: 0 0.5rem;
    margin-bottom: 0.5rem;
  }
  .form_box .footer .bt_link .l a:nth-child(4n), 
  .form_box .footer .bt_link .l button:nth-child(4n) {
    margin: 0;
  }
  .form_box .footer .bt_link .l a:nth-last-child(-n+4), 
  .form_box .footer .bt_link .l button:nth-last-child(-n+4) {
    margin-bottom: 0;
  }
}

.form_box .footer .bt_link .l input:focus {
  border: none;
}


/* modify by eric */


/*add by eric*/

.form_box .title .bt_link_center {
  display: flex;
  justify-content: center;
  padding: 0.5rem 0.75rem 0.75rem 0.75rem;
}

@media screen and (max-width: 1023px) {
  .form_box .title .bt_link_center {
    padding: 0;
    display: block;
    position: fixed;
    bottom: 0;
    z-index: 1;
    width: 100%;
  }
}

.form_box .title .bt_link_center .switch {
  width: 70px;
  height: 70px;
  align-items: center;
  justify-content: center;
  background: #FFF;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  margin: 0 auto -35px auto;
  color: #014099;
}

.form_box .title .bt_link_center .switch i {
  margin: 0 0 30px 0;
  transition: transform 0.15s ease-out;
}

.form_box .title .bt_link_center .switch.focus i {
  transform: rotate(180deg);
}

.form_box .title .bt_link_center .l {
  display: flex;
}

@media screen and (max-width: 1023px) {
  .form_box .title .bt_link_center .l {
    width: 100%;
    flex-flow: row wrap;
    background: #FFF;
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }
}


/* modify by eric */

.form_box .title .bt_link_center .l a, 
.form_box .title .bt_link_center .l button, 
.form_box .title .bt_link_center .l input {
  margin: 0 0.5rem 0 0;
}

@media screen and (max-width: 1023px) {
  .form_box .title .bt_link_center .l a, 
  .form_box .title .bt_link_center .l button {
    width: calc((100% - 1.5rem) / 4);
    padding: 0 0.5rem;
    margin-bottom: 0.5rem;
  }
  .form_box .title .bt_link_center .l a:nth-child(4n), 
  .form_box .title .bt_link_center .l button:nth-child(4n) {
    margin: 0;
  }
  .form_box .title .bt_link_center .l a:nth-last-child(-n+4), 
  .form_box .title .bt_link_center .l button:nth-last-child(-n+4) {
    margin-bottom: 0;
  }
}

.form_box .title .bt_link_center .l input:focus {
  border: none;
}


/* modify by eric */

.form_box .title .bt_link_left {
  display: flex;
  justify-content: end;
  padding: 0.5rem 0.75rem 0.75rem 0.75rem;
}

@media screen and (max-width: 1023px) {
  .form_box .title .bt_link_left {
    padding: 0;
    display: block;
    position: fixed;
    bottom: 0;
    z-index: 1;
    width: 100%;
  }
}

.form_box .title .bt_link_left .switch {
  width: 70px;
  height: 70px;
  align-items: center;
  justify-content: center;
  background: #FFF;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  margin: 0 auto -35px auto;
  color: #014099;
}

.form_box .title .bt_link_left .switch i {
  margin: 0 0 30px 0;
  transition: transform 0.15s ease-out;
}

.form_box .title .bt_link_left .switch.focus i {
  transform: rotate(180deg);
}

.form_box .title .bt_link_left .l {
  display: flex;
}

@media screen and (max-width: 1023px) {
  .form_box .title .bt_link_left .l {
    width: 100%;
    flex-flow: row wrap;
    background: #FFF;
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }
}


/* modify by eric */

.form_box .title .bt_link_left .l a, 
.form_box .title .bt_link_left .l button, 
.form_box .title .bt_link_left .l input {
  margin: 0 0.5rem 0 0;
}

@media screen and (max-width: 1023px) {
  .form_box .title .bt_link_left .l a, 
  .form_box .title .bt_link_left .l button {
    width: calc((100% - 1.5rem) / 4);
    padding: 0 0.5rem;
    margin-bottom: 0.5rem;
  }
  .form_box .title .bt_link_left .l a:nth-child(4n), 
  .form_box .title .bt_link_left .l button:nth-child(4n) {
    margin: 0;
  }
  .form_box .title .bt_link_left .l a:nth-last-child(-n+4), 
  .form_box .title .bt_link_left .l button:nth-last-child(-n+4) {
    margin-bottom: 0;
  }
}

.form_box .title .bt_link_left .l input:focus {
  border: none;
}


/* modify by eric */


/*add by eric*/

.form_box .form_content {
  padding: 1rem;
  font-size: 0.875rem;
}

@media screen and (max-width: 1023px) {
  .form_box .form_content {
    width: calc(100% - 2rem);
    margin: auto; /* Edit by Evan */
    /*margin-top: 1.5rem; Commented by Tina,1.5rem will cover header*/ /* Edit by Evan */
	margin-top: 3rem;
    margin-bottom: 5rem; /* Edit by Evan */
    box-sizing: border-box;
    background: #FFF;
    transform: translateY(-20px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    padding: 1rem 1rem 1rem 1rem;
    border-radius: 3px;
  }
}

.form_box .form_content .now {
  padding: 0.5rem 0;
  margin: 0 0 1rem 0;
}

.form_box .form_content .remind {
  padding: 0 0 0.5rem 0;
}

.form_box .form_content .remind span {
  color: #b6000e;
}

.form_box .form_content .form {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  border-radius: 5px;
  overflow: hidden;
  margin: 0 0 0.75rem 0;
}

.form_box .form_content .form>div {
  display: none;
}

.form_box .form_content .form .unit {
  padding: 0.5rem 1rem;
  color: #014099;
  font-weight: bolder;
  font-size: 1.0625rem;
  display: flex;
  align-items: center;
  cursor: pointer;
}

@media screen and (max-width: 1023px) {
  .form_box .form_content .form .unit {
    border-bottom: 1px solid #dadde1;
    padding: 0.5rem;
  }
}

.form_box .form_content .form .unit.focus span {
  transform: rotate(180deg);
  background: #014099;
  color: #FFF;
}

.form_box .form_content .form .unit span {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9375rem;
  background: #014099;
  width: 30px;
  height: 30px;
  margin: 0 0 0 0.5rem;
  transition: transform 0.15s ease-out;
  color: #FFF; /* Edit by Evan */
}

.flex_box {
  display: flex;
}

/* remarks by Sei
@media screen and (max-width: 350px) {
  .flex_box {
    display: block;
  }
}*/

.flex_box.jc {
  justify-content: center;
}

@media screen and (max-width: 1023px) {
  .flex_box.mjr {
    justify-content: flex-end;
  }
}


/*Added by Tina Chiang*/

.flex_box_2 {
  display: flex;
}

@media screen and (max-width: 1023px) {
  .flex_box_2 {
    display: inline-grid;
  }
}


/*Added by Tina Chiang end*/

.table_form {
  border-radius: 15px;
  border: 1px solid #cacdd1;
}

.table_form>tbody>tr {
  display: flex;
  vertical-align: middle;
  border: 1px solid #cacdd1;
}

@media screen and (max-width: 1023px) {
  .table_form>tbody>tr {
    flex-flow: row wrap;
    border: none;
  }
}

.table_form>tbody>tr:last-child {
  border-bottom: 1px solid #cacdd1;
}

.table_form>tbody>tr:first-child {
  border-top: 1px solid #cacdd1;
}

.table_form>tbody>tr>th, 
.table_form>tbody>tr>td {
  padding: 0.5rem 1rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-height: 30px;
}

@media screen and (max-width: 1023px) {
  .table_form>tbody>tr>th, 
  .table_form>tbody>tr>td {
    min-height: inherit;
    padding: 0.5rem;
  }
}

@media screen and (max-width: 1023px) {
  .table_form>tbody>tr>th.null, 
  .table_form>tbody>tr>td.null {
    display: none;
  }
}

.table_form>tbody>tr>th {
  background: #e5ecf5;
  width: 150px;
  justify-content: flex-end;
  white-space: nowrap; 
  /* Edit by Evan */
}

@media screen and (max-width: 1023px) {
  .table_form>tbody>tr>th {
    width: 100%;
    justify-content: flex-start;
    padding: 0.5rem;
    font-family: "f_Medium", Arial, sans-serif;
    background: none;
  }
}

.table_form>tbody>tr>th.m:before, 
.table_form>tbody>tr>td.m:before, 
.table_form>tbody>tr>th.form_text_3.m:before, 
.table_form>tbody>tr>td.form_text_3.m:before {
  color: #b6000e;
  content: "*";
}

.table_form2>tbody>tr>th.m:before, 
.table_form2>tbody>tr>td.m:before, 
.table_form2>tbody>tr>th.form_text_3.m:before, 
.table_form2>tbody>tr>td.form_text_3.m:before {
  color: #b6000e;
  content: "*";
}

@media screen and (max-width: 1023px) {
  .table_form>tbody>tr>td {
    border-bottom: 1px solid #efefef;
  }
}

.table_form>tbody>tr>td>div {
  width: 100%;
}

.table_form>tbody>tr>td .btn2 {
  min-height: 30px;
  flex-shrink: 0;
  margin: 0 0 0 0.5rem;
}

.table_form>tbody>tr>td .btn2.date {
  width: 30px;
  padding: 0;
  min-width: inherit;
  font-size: 1.1875rem;
}

.table_form>tbody>tr.row_2>td {
  width: calc(50% - 150px);
}

@media screen and (max-width: 1023px) {
  .table_form>tbody>tr.row_2>td {
    width: 100%;
  }
}

.table_form>tbody>tr.row_1>td {
  width: 100%;
}

@media screen and (max-width: 1023px) {
  /* Edit By Evan*/
  .outter_table_form2 {
    overflow: auto;
  }
  .table_form2 {
    max-width: fit-content;
    min-width: 100%;
  }
  /* Edit By Evan End*/
  .table_form2 tr {
    /* Edit by Evan 
    display: flex;
    */
    flex-flow: row wrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    margin: 0 0 0.75rem 0;
    border-radius: 3px;
    overflow: hidden;
  }
}

.table_form2 tr th {
  background: #e5ecf5;
  padding: 0.5rem 1rem;
  vertical-align: middle;
  border-right: 1px solid #cacdd1;
  border-bottom: 1px solid #cacdd1;
  /* Edit By Evan */
  /*white-space: nowrap;*/ /* comment by eric */
  /* Edit By Evan end */
}

@media screen and (max-width: 1023px) {
  .table_form2 tr th {
    border: none;
  }
}

.table_form2 tr td {
  text-align: center;
  padding: 0.5rem 1rem;
  border-right: 1px solid #dadde1;
  border-bottom: 1px solid #dadde1;
  /* Edit By Evan */
  /*white-space: nowrap;*/ /* comment by eric */
  /* Edit By Evan end */
}

@media screen and (max-width: 1023px) {
  .table_form2 tr td {
    border: none;
    box-sizing: border-box;
    text-align: left;
    padding: 0.5rem;
  }
}


/*Added by Tina Chiang*/

.table_form2>tbody>tr>td>div {
  width: 100%;
}

.table_form2>tbody>tr>td .btn2.date {
  width: 30px;
  padding: 0;
  min-width: inherit;
  font-size: 1.1875rem;
}

/*@media screen and (max-width: 1023px) {
  .table_form2 tr td:before {
    content: attr(m_t);
  }
}Commented by Tina to remove before element at safari*/

@media screen and (max-width: 1023px) {
  .table_form2 tr .m100 {
    width: 100%;
  }
  .table_form2 tr .mh {
    width: 50%;
  }
  .table_form2 tr .mtr {
    text-align: right;
  }
  .table_form2 tr .m_main {
    background: #2086e0;
    color: #FFF;
  }
}


/* table_form3 added by Evan for 小卡 */

@media screen and (max-width: 1023px) {
  .table_form3 {
    max-width: fit-content;
    min-width: 100%;
  }
  /* Edit By Evan End*/
  .table_form3 tr {
    display: flex;
    flex-flow: row wrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    margin: 0 0 0.75rem 0;
    border-radius: 3px;
    overflow: hidden;
  }
}

.table_form3 tr th {
  background: #e5ecf5;
  padding: 0.5rem 1rem;
  vertical-align: middle;
  border-right: 1px solid #cacdd1;
  border-bottom: 1px solid #cacdd1;
  /* Edit By Evan */
  white-space: nowrap;
  /* Edit By Evan end */
}

@media screen and (max-width: 1023px) {
  .table_form3 tr th {
    border: none;
  }
}

.table_form3 tr td {
  text-align: center;
  padding: 0.5rem 1rem;
  border-right: 1px solid #dadde1;
  border-bottom: 1px solid #dadde1;
  /* Edit By Evan */
  white-space: nowrap;
  /* Edit By Evan end */
}

@media screen and (max-width: 1023px) {
  .table_form3 tr td {
    border: none;
    box-sizing: border-box;
    text-align: left;
    padding: 0.5rem;
  }
}


/*Added by Tina Chiang*/

.table_form3>tbody>tr>td>div {
  width: 100%;
}

.table_form3>tbody>tr>td .btn2.date {
  width: 30px;
  padding: 0;
  min-width: inherit;
  font-size: 1.1875rem;
}

@media screen and (max-width: 1023px) {
  .table_form3 tr td:before {
    content: attr(m_t);
  }
}

@media screen and (max-width: 1023px) {
  .table_form3 tr .m100 {
    width: 100%;
  }
  .table_form3 tr .mh {
    width: 50%;
  }
  .table_form3 tr .mtr {
    text-align: right;
  }
  .table_form3 tr .m_main {
    background: #2086e0;
    color: #FFF;
  }
}

.table_form3 .form_text_3 {
  background: #FFFFFF;
}


/* table_form3 added by Evan for 小卡 */

.search_box {
  display: flex;
  padding: 0 0 0.5rem 0;
}

@media screen and (max-width: 1023px) {
  .search_box {
    flex-flow: row wrap;
  }
}

.search_box .time_s {
  display: flex;
  align-items: flex-end;
}

.search_box .time_s .btn2 {
  height: 30px;
  min-width: inherit;
  margin: 0 0.5rem 0 0;
}

@media screen and (max-width: 1023px) {
  .search_box .time_s .btn2 {
    margin: 0.5rem;
  }
}

.search_box label {
  display: flex;
  align-items: center;
  margin: 0 0.5rem 0 0;
  font-size: 0.9375rem;
  flex-flow: column;
}

@media screen and (max-width: 1023px) {
  .search_box label {
    width: 100%;
    margin: 0 0 0.5rem 0;
  }
}

.search_box label o {
  width: 100%;
  font-size: 0.8125rem;
  padding: 0 0 0.25rem 0;
}

.search_box label input {
  width: 200px;
}

@media screen and (max-width: 1023px) {
  .search_box label input {
    width: 100%;
  }
}

.search_box label .select_box {
  width: auto;
}

@media screen and (max-width: 1023px) {
  .search_box label .select_box {
    width: 100%;
  }
}

.search_box label .select_box select {
  min-width: 150px;
}

.search_box label .text_box {
  display: flex;
  align-items: center;
}

@media screen and (max-width: 1023px) {
  .search_box label .text_box {
    width: 100%;
  }
}

.search_box label .text_box .btn2 {
  height: 30px;
  margin: 0 0 0 0.5rem;
}

.step {
  display: flex;
  padding: 0 0 0.5rem 0;
}

.step label {
  display: flex;
  align-items: center;
  margin: 0 0.5rem 0 0;
  font-size: 0.9375rem;
  flex-flow: column;
}

@media screen and (max-width: 1023px) {
  .step label {
    width: 100%;
  }
}

.step label o {
  width: 100%;
  font-size: 0.8125rem;
  padding: 0 0 0.25rem 0;
}

.step label .select_box {
  width: auto;
}

@media screen and (max-width: 1023px) {
  .step label .select_box {
    width: 100%;
  }
}

.step label .select_box select {
  min-width: 150px;
}

.list_box table {
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

@media screen and (max-width: 1023px) {
  .list_box table {
    box-shadow: none;
    overflow: auto;
  }
}

.list_box table thead tr {
  background: #FFF;
}

@media screen and (max-width: 1023px) {
  .list_box table thead tr {
    display: flex;
    flex-flow: row wrap;
    margin: 0 0 0.75rem 0;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    overflow: hidden;
  }
  .list_box table thead tr:first-child {
    display: none;
  }
  .list_box table thead+tbody tr:first-child {
    display:flex;;
  }
}

.list_box table thead tr th, 
.list_box table thead tr td {
  padding: 0.7rem 0.3rem;
  box-sizing: border-box;
  border-right: 1px solid #dfe2e8;
   font-size: 0.875rem;
}

.list_box table thead tr th {
  background: #2186E0;
  color: #FFF;
}

.list_box table tbody tr {
  background: #FFF;
}

@media screen and (max-width: 1023px) {
  .list_box table tbody tr {
    display: flex;
    flex-flow: row wrap;
    margin: 0 0 0.75rem 0;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    overflow: hidden;
  }
  .list_box table tbody tr:first-child {
    display: none;
  }
   /* font size by Evan */
  .list_box table thead tr th, 
.list_box table thead tr td { 
  font-size: 1rem;
}
}

.list_box table tbody tr th, 
.list_box table tbody tr td {
  /* padding: 1rem 0.5rem; Commented by Alex Yang*/
  padding: 0.7rem 0.3rem; 
  /* Added by Alex Yang*/
  box-sizing: border-box;
  border-right: 1px solid #dfe2e8;
  font-size: 0.875rem; /* edited by Evan*/
}
@media screen and (max-width: 1023px) { 
  .list_box table tbody tr th, 
.list_box table tbody tr td {
  font-size: 1rem;
}
}

.list_box table tbody tr th {
  background: #2186E0;
  color: #FFF;
}

.list_box table tbody tr:nth-child(odd) td {
  background: #f2f5fa;
}

@media screen and (max-width: 1023px) {
  .list_box table tbody tr:nth-child(odd) td {
    background: #FFF;
  }
}

@media screen and (max-width: 1023px) {
  .list_box table tbody tr td {
    order: 2;
    width: 50%;
    padding: 0.25rem 0.5rem 0.5rem 0.5rem;
    border: none;
  }
}

.list_box table tbody tr td.c {
  text-align: center;
}

.list_box table tbody tr td .btn2 {
  min-height: 30px;
  flex-shrink: 0;
  margin: 0 0 0 0.5rem;
}

@media screen and (max-width: 1023px) {
  .list_box table tbody tr td.m_tl {
    text-align: left;
  }
}

.list_box table tbody tr td.name a {
  color: #014099;
}

@media screen and (max-width: 1023px) {
  .list_box table tbody tr td.name {
    padding: 0.75rem 0.5rem;
    margin: 0 0 0.25rem 0;
    order: 1;
    background: #2186E0;
    width: 100%;
	color: #FFF;
  }
  .list_box table tbody tr td.name a {
    color: #FFF;
  }
}

@media screen and (max-width: 1023px) {
  .list_box table tbody tr td.m_full {
    order: 2;
    width: 100%;
  }
}

.list_box table tbody td.new:before {
  content: "NEW";
  font-size: 0.75rem;
  background: #b6000e;
  color: #FFF;
  top: 1px;
  left: 0;
  padding: 2px 8px 1px 8px;
  border-radius: 20px;
  transform: scale(0.65);
  font-family: "f_Medium", Arial, sans-serif;
}

.list_box table tbody td.now {
	color: #b6000e;
}

.page_box {
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 1rem 0 0 0;
}

@media screen and (max-width: 1023px) {
  .page_box {
    flex-flow: row wrap;
  }
}

@media screen and (max-width: 1023px) {
  .page_box .all {
    width: 100%;
    text-align: center;
  }
}

.page_box .cho {
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
}

@media screen and (max-width: 1023px) {
  .page_box .cho {
    justify-content: center;
    width: 100%;
    padding: 0 0 1rem 0;
    flex-flow: row wrap;
    justify-content: space-between;
  }
}

.page_box .cho a {
  margin: 0 0.25rem;
  /* Add by Eric */
  min-width: 15px;
  padding: 10px;
  /* Add by Eric */
}

@media screen and (max-width: 1023px) {
  .page_box .cho a {
    order: 2;
    width: calc((100% - 1rem)/2);
    margin: 0 0.25rem 0.5rem 0.25rem;
  }
}

@media screen and (max-width: 1023px) {
  .page_box .cho span {
    order: 1;
    width: 100%;
    text-align: center;
    padding: 0.5rem 0;
  }
}

.page_box .jump {
  display: flex;
  align-items: center;
}

@media screen and (max-width: 1023px) {
  .page_box .jump {
    justify-content: center;
    width: 100%;
  }
}

.page_box .jump input {
  width: 75px;
  height: 30px;
  margin: 0 0.5rem;
}


/*0517新增*/

.YL_TableTitle {
  width: 100%;
  text-align: center !important;
}

@media screen and (max-width: 1023px) {
  .bottom_merge {
    margin: 0 !important;
    box-shadow: none !important;
  }
}


/*0518新增*/

.tabs_a {
  display: flex;
  flex-flow: row wrap;
  padding: 0.5rem 0 1.5rem 0;
  justify-content: center;
}

.tabs_a a {
  background: #FFF;
  color: #000000;
  border-bottom: 3px solid #CCC;
  padding: 0.5rem 1.5rem;
  display: block;
  margin: 0 0.5rem 0 0;
  transition: color 0.15s ease-out, border-bottom 0.15s ease-out;
}

.tabs_a a.focus, 
.tabs_a a:hover {
  border-bottom: 3px solid #2186E0;
  color: #2186E0;
}

.text_a>div {
  display: flex;
}

.text_a>div.cl {
  /*靠左*/
}

.text_a>div.cl a {
  margin: 0 0.5rem 0 0;
}

.text_a>div.cc {
  /*置中*/
  justify-content: center;
}

.text_a>div.cc a {
  margin: 0 0.25rem;
}

.text_a>div.cr {
  /*靠右*/
  justify-content: flex-end;
}

.text_a>div.cr a {
  margin: 0 0 0 0.5rem;
}

.text_a>div.ml {
  /*手機板靠左*/
}

@media screen and (max-width: 1023px) {
  .text_a>div.ml {
    justify-content: flex-start;
  }
  .text_a>div.ml a {
    margin: 0 0.5rem 0 0;
  }
}

.text_a>div.mc {
  /*手機板置中*/
}

@media screen and (max-width: 1023px) {
  .text_a>div.mc {
    justify-content: center;
  }
  .text_a>div.mc a {
    margin: 0 0.25rem;
  }
}

.text_a>div.mr {
  /*手機板靠右*/
}

@media screen and (max-width: 1023px) {
  .text_a>div.mr {
    justify-content: flex-end;
  }
  .text_a>div.mr a {
    margin: 0 0 0 0.5rem;
  }
}


/* Start customized by Alex Yang */

input:-moz-read-only {
  border-color: #E8E8E8;
}

input:read-only {
  border-color: #E8E8E8;
}

input:disabled {
  border-color: #E8E8E8;
}

a:hover {
  text-decoration: none;
}

.warning {
  text-align: center;
  text-transform: uppercase;
  color: #FFFFFF;
  border: 0px #ccc solid;
  border-radius: 5px;
  background-color: #00C4C4;
  padding-right: 5px;
  padding-left: 5px;
}

input[type="checkbox"] {
  width: 17px;
  height: 17px;
}

input[type="radio"] {
  width: 17px;
  height: 17px;
}

input[type="button"] {
  width: auto;

  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f2f2f2+0,d5d5d5+100 */
  background: #f2f2f2;
  /* Old browsers */
  background: -moz-linear-gradient(top, #f2f2f2 0%, #d5d5d5 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #f2f2f2 0%, #d5d5d5 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #f2f2f2 0%, #d5d5d5 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#d5d5d5', GradientType=0);
  /* IE6-9 */
  color: #000000;
  border: none;

  box-shadow: 1px 1px 2px 1px #aaa; /* added by Evan */
}

input[type="button"]:active{ /* added by Evan */
  color: white !important;
  background: #666666 !important;
}

input[type="submit"] {
  width: auto;

  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f2f2f2+0,d5d5d5+100 */
  background: #f2f2f2;
  /* Old browsers */
  background: -moz-linear-gradient(top, #f2f2f2 0%, #d5d5d5 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #f2f2f2 0%, #d5d5d5 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #f2f2f2 0%, #d5d5d5 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#d5d5d5', GradientType=0);
  /* IE6-9 */
  color: #000000;
  border: none;
  
  box-shadow: 1px 1px 2px 1px #aaa; /* added by Evan */
}

input[type="submit"]:active{ /* added by Evan */
  color: white !important;
  background: #666666 !important;
}

.wpthemeControlHeader {
  display: table;
  width: 100%;
  background-color: transparent;
  background-image: none;
  border-bottom: 1px solid #E5E5E5;
  border: 0px #000000;
  margin: 0;
}


/* End customized by Alex Yang */
@media screen and (max-width: 1023px) {
  .bottom_merge {
    margin: 0 !important;
    box-shadow: none !important;
  }
}

.YL_TableTitle {
  width: 100%;
  text-align: center;
}

@media screen and (max-width: 1023px) {
  .YL_TableTitle {
    width: 100%;
    text-align: center !important;
  }
}


/* button customized by Paul */

.btn3 {
  min-width: 75px;
  height: 30px;
  margin-top: 20px;
  display: block;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  box-sizing: border-box;
  color: #FFF;
  font-size: 0.8125rem;
  border-radius: 3px;
  outline: none;
  border: none;
}

.btn3.blue {
  background: #014099;
}


/*add by Eric*/

textarea {
  /* Commented by Alex Yang								
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
*/
  border: 1px solid black;
  border-radius: 3px;
  padding-left: 0.5rem;
  box-sizing: border-box;
  outline: none;
  /*width: 100%; Commented by Tina Chiang 20210528*/
  color: #000000;
  font-size: 1rem;
}

textarea:focus {
  border: 1px solid blue;
}

textarea:-moz-read-only {
  border-color: #E8E8E8;
}

textarea:read-only {
  border-color: #E8E8E8;
}

textarea:disabled {
  border-color: #E8E8E8;
}

.list_box_norwd table {
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.list_box_norwd table thead tr {
  background: #FFF;
}

.list_box_norwd table thead tr th, 
.list_box_norwd table thead tr td {
  padding: 1rem 0.5rem;
  box-sizing: border-box;
  border-right: 1px solid #dfe2e8;
   font-size: 0.875rem; 
}

 /* font size by Evan */
@media screen and (max-width: 1023px) {
  .list_box_norwd table thead tr th, 
.list_box_norwd table thead tr td {
  font-size: 1rem;
}
}

.list_box_norwd table thead tr th {
  background: #2186E0;
  color: #FFF;
}

.list_box_norwd table tbody tr {
  background: #FFF;
}

.list_box_norwd table tbody tr th, 
.list_box_norwd table tbody tr td {
  /* padding: 1rem 0.5rem; Commented by Alex Yang*/
  padding: 0.7rem 0.3rem; 
  /* Added by Alex Yang*/
  box-sizing: border-box;
  border-right: 1px solid #dfe2e8;
  font-size: 0.875rem;
}
@media screen and (max-width: 1023px) {

  .list_box_norwd table tbody tr th, 
  .list_box_norwd table tbody tr td {/*added by Evan*/
    font-size: 1rem;
  }
}

.list_box_norwd table tbody tr th {
  background: #2186E0;
  color: #FFF;
}

.list_box_norwd table tbody tr:nth-child(odd) td {
  background: #f2f5fa;
}

.list_box_norwd table tbody tr td.c {
  text-align: center;
}

.list_box_norwd table tbody tr td .btn2 {
  min-height: 30px;
  flex-shrink: 0;
}

.list_box_norwd table tbody tr td.name a {
  color: #014099;
}

.list_box_norwd table input, 
.list_box_norwd table button {
  margin-right: 0.5rem;
}

.Box .content_box_norwd {
  padding: 20px;
  min-height: calc(100vh - 85px);
  box-sizing: border-box;
}

.Box .content_box_norwd .bread {
  font-size: 0.875rem;
  color: #828282;
  padding: 0 0 20px 0;
  color: #014099;
}

.Box .content_box_norwd .bread a {
  color: #828282;
}

.Box .content_box_norwd .bread a:after {
  content: "/";
  font-size: 0.75rem;
  padding: 0 0.5rem;
}

.search_box_norwd {
  display: flex;
  padding: 0 0 0.5rem 0;
}

.search_box_norwd .time_s {
  display: flex;
  align-items: flex-end;
}

.search_box_norwd .time_s .btn2 {
  height: 30px;
  min-width: inherit;
  margin: 0 0.5rem 0 0;
}

.search_box_norwd label {
  display: flex;
  align-items: center;
  margin: 0 0.5rem 0 0;
  font-size: 0.9375rem;
  flex-flow: column;
}

.search_box_norwd label o {
  width: 100%;
  font-size: 0.8125rem;
  padding: 0 0 0.25rem 0;
}

.search_box_norwd label input {
  width: 200px;
}

.search_box_norwd label .search_box_norwd {
  width: auto;
}

.search_box_norwd label .search_box_norwd select {
  min-width: 150px;
}

.search_box_norwd label .text_box {
  display: flex;
  align-items: center;
}

.search_box_norwd label .text_box .btn2 {
  height: 30px;
  margin: 0 0 0 0.5rem;
}

.page_box_norwd {
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 1rem 0 0 0;
}

.page_box_norwd .cho {
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
}

.page_box_norwd .cho a {
  margin: 0 0.25rem;
  /* Add by Eric */
  min-width: 15px;
  padding: 10px;
  /* Add by Eric */
}

.page_box_norwd .jump {
  display: flex;
  align-items: center;
}

.page_box_norwd .jump input {
  width: 75px;
  height: 30px;
  margin: 0 0.5rem;
}


/*add by Eric*/


/* Add by Alex for Index RWD - Start */

.index_box .tab_container>table>tbody>tr {
  display: flex;
  justify-content: space-between;
}

.index_box .tab_container>table>tbody>tr>td:first-child {
  width: calc(50% - 12px);
}

@media screen and (max-width: 1023px) {
  .index_box .tab_container>table>tbody>tr>td:first-child {
    width: 100%;
  }
}

.index_box .tab_container>table>tbody>tr>td:nth-child(2) {
  width: calc(50% - 12px);
}

@media screen and (max-width: 1023px) {
  .index_box .tab_container>table>tbody>tr>td:nth-child(2) {
    width: 100%;
  }
}


/* Add by Alex for Index RWD - End */


/* Add by Sei - Start */

.td_nowrap {
  white-space: nowrap;
}

@media screen and (max-width: 1023px) {
  .footer_button {
    display: none !important;
  }
}

@media screen and (max-width: 1023px) {
  .textarea {
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    height: 300px;
    border: 1px solid;
    background: #F5FFFA;
    overflow: auto;
  }
}

.no_background {
  background: none !important;
}

@media screen and (max-width: 1023px) {
  .eip_footer {
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
  }
}

.t_subtitle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

@media screen and (max-width: 1023px) {
  .t_subtitle {
    display: inline-block;
    text-align: center;
    position: unset;
    left: 0%;
    transform: unset;
  }
}

.interval_color tr:nth-child(odd) {
	background: #FFFDD3
}

.interval_color tr:nth-child(even) {
}

.redFont {
	color: #FF0000;
}

.Form_title {
	font-family: "Arial", "Helvetica", "sans-serif";
    font-size: 24px;
    line-height: 35px;
    font-weight: bold;
}
/* select tag content set min-content */
@media screen and (max-width: 1023px) {
	select.mc {
		width: min-content;
	}
}

input[type="button"]:disabled {
  color: #CCCCCC !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
  border: 1px solid #DDD;
}
/* Add by Sei - End */


/*********************************
Add by Evan (refactor)
*********************************/

.form_text_3 {
  font-size: 1rem;
  color: #000000;
  text-decoration: none;
  border: 1px solid #cacdd1;
  background: #e5ecf5;
  justify-content: flex-end;
}

.form_text_4 {
  font-size: 1rem;
  color: #000000;
  text-decoration: none;
  border: 1px #cacdd1 solid;
  background: #FFFFFF;
}

.form_text_3 {
  background: #e5ecf5;
  text-align: end;
}

.table_form>tbody>tr>th, 
.table_form>tbody>tr>td {
  display: table-cell;
}

.table_form>tbody>tr {
  display: table-row;
}

.table_form>tr {
  border: 1px solid #cacdd1;
}

.section_title {
  padding: 0.5rem 1rem;
  color: #014099;
  font-weight: bolder;
  font-size: 1.0625rem;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.section_title span {
  /* Add by Evan*/
  background: #014099;
  color: white;
  border-radius: 50%;
  margin: 4px;
  padding: 0px 6px 2px 6px;
  line-height: 30px;
}

@media screen and (max-width: 1023px) {
  .form_text_3 {
    /* height: 40px; */
    text-align: left;
  }
  .table_form>tbody>tr {
    display: flex;
  }
  .table_form>tbody>tr>th {
    text-align: left;
  }
  /* .table_form>tbody>tr :last-child {
    border-right: unset;
  } */
  .table_form>tbody>tr>th, 
  .table_form>tbody>tr>td {
    width: 100% !important;
	  border: 1px solid #cacdd1;
  }
  .table_form>tbody>tr>th {
    background: #e5ecf5;
  }
  /* input {
    width: fit-content;
  } */
}


/*********************************
Add by Evan (refactor) end
*********************************/


/*********************************
Add by Evan (scroll-div)
*********************************/

@media screen and (max-width: 1023px) {
  .outter-container {
    overflow: scroll;
    width: calc(100vw - 3rem);
  }
  .inner-container {
    width: fit-content;
    min-width: -webkit-fill-available;
  }
}


/*********************************
Add by Evan (scroll-div) end
*********************************/


/*Add by Tina Chiang*/

.inputYTextulon {
  width: auto;
}

@media screen and (max-width: 1023px) {
  .inputYTextulon {
    width: fit-content;
  }
}


/*Add by Tina Chiang end*/

@media print {
  /*Added by Evan */
  * {
    -webkit-print-color-adjust: exact !important;
  }
}

/*add by Eric*/
s {
    text-decoration: line-through;
}
strong {
    font-weight: bold;
}
em {
    font-style: italic;
}
/*add by Eric*/

/* Add by Alex Yang */
@media print {
	html {zoom: 60%;}
	@page{ 
    margin: 0.5cm;
     /* size : A4 portrait; */
     }	 
}

.layoutRow {
  width: 100% !important;
}

.Box .right_box .top .right.padding-right {
	padding-right: 230px;
}

.cshow {
	display: block;
}

@media screen and (max-width: 1024px) {
	.cshow {
		display: none;
	}
}

.mshow {
	display: none;
}

@media screen and (max-width: 1024px) {
	.mshow {
		display: block;
	}
}

/* for edge password */
input::-ms-reveal,
input::-ms-clear {
  display: none;
}
/* for safari input */
input::-webkit-contacts-auto-fill-button,
input::-webkit-caps-lock-indicator,
input::-webkit-credentials-auto-fill-button {
  visibility: hidden;
}

/* set font-size for tablet */
@media (min-width: 768px) and (max-width: 1024px) {
  /* 
  0.8125rem     13px
  0.875rem      14px
  0.9375rem     15px
  1rem          16px
  1.0625rem     17px
  1.125rem      18px
  1.1875rem     19px
  1.25rem       20px
   */
  html,body { /* <1023 */
    font-size: 1.0625rem;
  }
  input, textarea, keygen, select, button{
    font-size: 1.125rem;
  }
  .newTextStyle {
    font-size: 1.125rem;
  }
  .btn {
    font-size: 1rem;
  }
  .btn2 {
    font-size: 1rem;
  }
  .sign_box .main_box .input_box label input::placeholder {
    font-size: 1.125rem;
  }
  .sign_box .main_box .input_box p a {
    font-size: 1rem;
  }
  .sign_box .footer { /* <767 1rem */
    font-size: 1.125rem;
  }
  .sign_box .footer p.copy { /* <767 1rem */
    font-size: 1.125rem;
  }
  .Box .left_menu_box .f_title span {
    font-size: 0.875rem;
  }
  .Box .left_menu_box .favourite ul>li>div>a {
    font-size: 1.125rem;
  }
  .Box .left_menu_box ul li div>a { /* <1023 1rem */
    font-size: 1rem;
  }
  .Box .left_menu_box .menu1 ul li div a {
    font-size: 1.125rem; 
  }
  .Box .right_box .top .left .logo span {/* <1023 1rem */
    font-size: 1rem;
  }
  .Box .right_box .top .right .who {/* <1023 1rem */
    font-size: 1rem;
  }
  .Box .content_box .bread {
    font-size: 1rem;
  }
  .Box .content_box .bread a:after {
    font-size: 1rem;
  }
  .Box footer { /* <767 1rem */
    font-size: 1.125rem;
  }
  .index_box .abgne_tab .tabs li p.all {
    font-size: 1rem;
  }
  .index_box .abgne_tab .tabs li .c {/* <1023 1rem */
    font-size: 1rem;
  }
  .index_box .abgne_tab .tabs li .more {
    font-size: 1rem;
  }
  .index_box .tab_container .tab_content ul li.new .name:before {
    font-size: 1rem;
  }
  .index_box .tab_container .tab_content ul li p {
    font-size: 1rem;
  }
  .index_box .tab_container .tab_content ul li p.time {
    font-size: 1rem;
  }
  .form_box .title h1 {
   font-size: 1.5625rem;  /*  25px  先不動*/
  }
  .form_box .form_content {
    font-size: 1rem;
  }
  .form_box .form_content .form .unit {
    font-size: 1.125rem;
  }
  .form_box .form_content .form .unit span {
    font-size: 1rem;
  }
  .table_form>tbody>tr>td .btn2.date {
    font-size: 1.25rem;
  }
  .table_form2>tbody>tr>td .btn2.date {
    font-size: 1.25rem;
  }
  .table_form3>tbody>tr>td .btn2.date {
    font-size: 1.25rem;
  }
  .search_box label {
    font-size: 1rem;
  }
  .search_box label o {
    font-size: 1rem;
  }
  .step label {
    font-size: 1rem;
  }
  .step label o {
    font-size: 1rem;
  }
  .list_box table thead tr th, 
  .list_box table thead tr td {/* <1023 1rem */
     font-size: 1rem;
  }
  .list_box table tbody tr th, 
  .list_box table tbody tr td {/* <1023 1rem */
    font-size: 1rem;
  }
  .list_box table tbody td.new:before {
    font-size: 1rem;
  }
  .page_box {
    font-size: 1rem;
  }
  .btn3 {
    font-size: 1rem;
  }
  textarea {
    font-size: 1.125rem;
  }
  .list_box_norwd table thead tr th, 
  .list_box_norwd table thead tr td {/* <1023 1rem */
    font-size: 1rem; 
  }
  .list_box_norwd table tbody tr th, 
  .list_box_norwd table tbody tr td {/* <1023 1rem */
    font-size: 1rem;
  }
  .Box .content_box_norwd .bread {
    font-size: 1rem;
  }
  .Box .content_box_norwd .bread a:after {
    font-size: 1rem;
  }
  .search_box_norwd label {
    font-size: 1rem;
  }
  .search_box_norwd label o {
    font-size: 1rem;
  }
  .page_box_norwd {
    font-size: 1rem;
  }
  .Form_title {
    font-size: 25px;
  }
  .form_text_3 {
    font-size: 1.125rem;
  }
  .form_text_4 {
    font-size: 1.125rem;
  }
  .section_title {
    font-size: 1.125rem;
  }
}

/* for order */
@media (max-width: 1023px) {
  .m_order_1{
    order:1;
  }
  .m_order_2{
    order:2;
  }
  .m_order_3{
    order:3;
  }
  .m_order_4{
    order:4;
  }
  .m_order_5{
    order:5;
  }
  .m_order_6{
    order:6;
  }
  .m_order_7{
    order:7;
  }
  .m_order_8{
    order:8;
  }
  .m_order_9{
    order:9;
  }
  .m_order_10{
    order:10;
  }
  .m_order_-1{
    order:-1;
  }
  .m_order_-2{
    order:-2;
  }
  .m_order_-3{
    order:-3;
  }
}