/*  *** RESET *** */
/*
IE11 FLEXBOX BUG FIXES: See comment in CSS
IE EDGE bug fix: content overflowing bottom (should be in viewport)
*/
html *,
html *:after,
html *:before {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

html,
body {
  /*font-family: "Verdana", "Helvetica", "LiHei Pro", Sans-Serif;*/
  font-family: '微軟正黑體', 'Microsoft JhengHei', 'Helvetica Neue', 'Verdana', 'Microsoft YaHei', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif';
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: column nowrap;
  height: 100vh; /* fix IE11 */
  min-height: 100%; /* fix IE11 */
  font-size: 100%;
  /*font-size:1em;*/
  /*font-size: 16px; 1em*/
}

input, textarea {
  font-family: '微軟正黑體', 'Microsoft JhengHei', 'Helvetica Neue', 'Verdana', 'Microsoft YaHei', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif';
}


ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}

a, a:visited, a:link {
  color: #0C0292;
  /*color: #0000CC;*/
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}


/*img {display: block;} !* prevent blank space after image *!*/

/*  *** MY CSS Classes *** */
.flex-row {
  display: flex;
  flex-flow: row nowrap;
}

.flex-column {
  display: flex;
  flex-flow: column nowrap;
}

.flex.wrap {
  flex-wrap: wrap;
}

.flex.nowrap {
  flex-wrap: nowrap;
}

.img-responsive {
  /* width: 100%; */ /* image to scale both up and down on responsiveness */
  max-width: 100%; /* image to scale down if it has to, but never scale up to be larger than its original size */
  height: auto;
  align-self: flex-start; /*Fix IOS Safari image stretch issue*/
}

/* --- Logo --- */
.logo {
  flex: 0 0 auto;
  max-width: 1003px;
  position: relative;
}

/* --- Logo invisible clickable areas --- */
.logoClickLeft,
.logoClickRight {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 10;
}

.logoClickLeft {
  left: 0;
  width: 30%;
  /* background-color: #0000CC33; */
}

.logoClickRight {
  left: 40%;
  right: 29%;
  /* background-color: #cc110033; */
}

/* --- TopMenu --- */
.topMenu {
  max-width: 1003px;
  height: 34px; /* must be 34px otherwise background picture will mistmach with logo pic*/
  background-image: url(../img/logo-bottom.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top;
  background-color: #CEE5AD;
  align-items: flex-end;
  flex: 0 0 auto;

}

.topMenu img {
  vertical-align: bottom;
}

/* --- Top separator --- */
.topSeparator {
  width: 100%;
  max-width: 1003px;
  background-color: #FBB35E;
  height: 3px;
  flex: 0 0 auto;
}

/* --- Navigator (for mobile devices) --- */
.navLogo {
  flex: 0 0 auto;
  width: 100%;
  height: 69px;
  background-image: url(../img/header_01_zh_TW.jpg);;
  background-repeat: no-repeat;
  background-size: 768px;
  background-position: top left;
  background-color: #CEE5AD;
  position: relative;
}

/* --- navLogo invisible clickable areas (mobile, separate dimensions from .logo) --- */
.navLogoClickLeft,
.navLogoClickRight {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 10;
}

.navLogoClickLeft {
  left: 0;
  width: 230px;
  /* background-color: #0000CC33; */
}

.navLogoClickRight {
  left: 306px;
  width: 238px;
  /* background-color: #cc110033; */
}

.navLogo600 {
  flex: 0 0 auto;
  width: 100%;
  position: relative;
}

/* --- navLogo600 invisible clickable areas (mobile <=599px, separate dimensions) --- */
.navLogo600ClickLeft,
.navLogo600ClickRight {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 10;
}

.navLogo600ClickLeft {
  left: 0;
  width: 42%;
  /* background-color: #0000CC33; */
}

.navLogo600ClickRight {
  left: 49%;
  right: 8%;
  /* background-color: #cc110033; */
}

.navTopMenu {
  flex: 0 0 auto;
  /*width: 100%;*/
  /*height: auto;*/
  background-image: url(../img/logo-bottom.jpg);
  background-repeat: no-repeat;
  background-size: 768px;
  background-position: top left;
  background-color: #CEE5AD;
  align-items: center;
}
.navTopMenu img {
  vertical-align: bottom;
}

.navMenu {
  width: 0;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  /*display:none;*/
  transition: 0.5s;
  /*overflow-y: auto;*/ /*Cause bug in IE11 */
  overflow-y: hidden;  /* value is change to auto on javascript openNav() */
/*  background-color: antiquewhite;*/
  /*background-color: #f67d24;*/
  background-color: #f79526;
  z-index: 100;
  text-align: left;
}

.navMenu li {
  display: block;
  width: 80vw;
}

.navMenu li a {
  padding: 8px 10px;
  text-decoration: none;
  font-size: 1.2rem;
/*  color: #818181;*/
  color: white;
  display: block;
  width: 100%;
  transition: 0.3s;
}

.navMenu li a:hover {
/*  background-color: deepskyblue;*/
}

.navMenu .closeNavMenu {
  position: absolute;
  top: 0;
  right: 10px;
  font-size: 36px;
  margin-left: 50px;
  text-decoration: none;
 /* color: #818181;*/
  color: white;
}

.disableNavItem {
  color: lightgray;
  padding: 0 0 0 10px;
  font-weight: 700;
  font-size: 1.2em;
}
.navButton {
  border-radius: 15%;
  /*border: 1px black solid;*/
  position: absolute;
  top: 3px;
  right: 10px;
  /*background-color: #90d558;*/
  width: 35px;
  height: 35px;
  padding: 5px;
  cursor: pointer;
}

.navButton:hover {
  /* background-color: red; */
}

.icon-bar { /* navButton 3 bars*/
  display: block;
  width: 30px;
  height: 5px;
  border-radius: 1px;
  margin-top: 5px;
  /* background-color: #888;*/
  /*background-color: #f67d24;  */
  background-color: #f79526;
}

/* --- Main --- */
.main {
  /* IE11 height fix */
  /* IE11 width fix */
  flex: 1 1 auto;
  overflow: hidden; /* IE EDGE overflow fix */
  max-width: 1192px; /* 171 + 43 + 789 + 189*/
  /*border: 1px green solid;*/
}

/* --- Left Menu --- */
.leftMenu {
  flex: 1 0 171px;
  background-color: #C6E3BD;
  overflow: auto;
  border-right: 3px cadetblue solid;
}

.leftMenu table {
  width: 100%;
}

.leftMenu table, .leftMenu table td {
  border-spacing: 0;
  border: 0;
  padding: 0;
  line-height: 1.8em;
}

.leftMenu table tr td:first-child {
  height: 13px;
  width: 30px; /* menu bullet image width */
  vertical-align: top;
  background-image: url(../img/dotBk.jpg);
  background-repeat: repeat-y;
  background-position: top;
  border-bottom: 2px #68BD45 solid;
}

.leftMenu table tr td:last-child {
  border-bottom: 2px #68BD45 solid;
  /*border-right: 2px cadetblue solid;*/
  background-image: url(../img/leftMenuBK.jpg);
  background-repeat: repeat-y;
  background-size: contain;
  background-position: top;
  vertical-align: middle;
}

.leftMenu a, .leftMenu a:visited, .leftMenu a:link {
  display: block;
  text-decoration: none;
  color: #0C0292;
}

.leftMenu a:hover {
  color: #0000CC;
  text-decoration: underline;
}

.menuGroup {
  color: #0C0292;
}

.subMenu:before {
  content: "• ";
  color: #e8ff79;
}

.leftMenu img {
  /*vertical-align: middle; !* prevent white space after image*!*/
  vertical-align: top;
}

.selectedMenuLink {
  background-image: url(../img/leftMenuBK1.jpg) !important;
}

.selectedMenuButtlet {
  background-image: url(../img/dotBk1.jpg) !important;
}

.zhFontMenu {
  /*font-size: 1em; !* 16px *!*/
  font-size: .875em; /* 14px */
  /*font-size: .8125em; !* 13px *!*/
  /*font-size: .75em; !* 12px *!*/
  /*font-size: 12px; !* 12px *!*/
}

.ptFontMenu {
  font-size: .75em; /* 12px */
}

.errorNote{
  color: red;
  font-size: 1em;
}
.errorField::before {
  /*content: "➜";*/
  content: "!";
  color: red;
}

/* --- Main Logo --- */
.mainLogo {
  padding: 2px 0 0 0;
  background-color: #FFF7E1;
}

/* --- Content --- */
.content {
  /*flex:1 1 auto;*/
  overflow-y: auto;
  padding: 3px 3px;
  min-width: 789px;
  background-color: #FFF7E1;
}

.content-uniaccountapp {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 5px 0 5px;
  max-width: 1003px;
  width: 100%;
  min-width: auto;
  background-color: #FFF7E1;
}

.contactContent {
  overflow-y: auto;
  padding: 3px 3px;
  min-width: 789px;
  background-color: #FFF7E1;
}

/* --- Right Menu --- */
.rightMenu {
  flex: 1 0 189px;
  /*background-color: #FFFFFF;*/
  overflow-y: auto;
}

.rightMenu a {
  padding: 10px 0 0 5px;
}

/* *** Media Queries *** */

@media screen and (max-width: 767.9999px) {
  .logo, .topMenu, .leftMenu, .mainLogo .navLogo600 {
    display: none;
  }
  .navLogo, .navTopMenu {
    display: flex;
  }
}

@media screen and (min-width: 768px) {
  .navLogo, .navTopMenu, .navLogo600 {
    display: none;
  }
}

@media screen and (max-width: 599.9999px) {
  .logo, .topMenu, .leftMenu, .mainLogo, .navLogo {
    display: none;
  }
  .content {
    padding: 0 5px 0 5px;
  }
  .navLogo600, .navTopMenu {
    display: flex;
  }
  .navTopMenu {
    background-image: none;
    background-repeat: no-repeat;
    background-size: auto;
    background-color: white;
  }
  .navButton {
    top: 0;
    right: 6px;
  }
}

@media screen and (min-width: 600px) {
  .navLogo600 {
    display:none;
  }
}

@media screen and (max-width: 391px) {
  .icon-bar, .navButton {
    width: 25px;
  }
}


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

  .content {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    /*padding: .5em;*/
    width: 100%;
    min-width: auto;
  }

  .contactContent {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: auto;
    width: 100%;
    min-width: auto;
  }

  .img-responsive {
    width: 100%; /* Fix IE11 error not responding to max-width: 100% */
    height: auto;
    align-self: flex-start; /*Fix IOS Safari image stretch issue*/
  }
}