/* colors */
/* clearBoth */
/* breakpoints */
/* font */
.FixedTop {
  clear: both;
  zoom: 1;
  position: relative;
  transition: top 0.35s ease-in-out; }
  .FixedTop:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0; }
  @media screen and (max-width: 50rem) {
    .FixedTop.hidemenu {
      top: -41px; } }
  .FixedTop.hidemenu .TopAdBox {
    display: none; }
  @media screen and (max-width: 64rem) {
    .FixedTop {
      position: relative;
      width: 100%;
      top: 0;
      z-index: 5; }
      .FixedTop .TopAdBox {
        display: none; } }

.FixedTop.hidemenu .mb-scroll-icon {
  display: none; }

.FixedTop.hidemenu .main-menu-ul li.current .sub-menu {
  display: none; }

.FixedTop.hidemenu .menu-toggle.PCshowInline {
  display: none; }

@media screen and (max-width: 64rem) {
  .FixedTop.hidemenu .main-menu {
    display: none; } }

@media screen and (max-width: 64rem) {
  .FixedTop.hidemenu .side-menu {
    top: 70px; } }

@media screen and (max-width: 37.5rem) {
  .FixedTop.hidemenu .side-menu {
    top: 60px; } }

@media screen and (max-width: 20rem) {
  .FixedTop.hidemenu .side-menu {
    top: 54px; } }

@media screen and (max-width: 37.5rem) {
  .menuOpen header {
    height: 100%; } }

header {
  background-color: #232323;
  text-align: center;
  clear: both;
  zoom: 1; }
  header:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0; }
  header a:link {
    color: #ffffff; }
  header a:active {
    color: #ffffff; }
  header a:visited {
    color: #ffffff; }
  header a:hover {
    color: #ffffff; }
  @media screen and (max-width: 37.5rem) {
    header {
      width: 100vw; } }

.logo {
  display: block;
  padding: 24px 0;
  margin: 0 auto;
  width: 60%; }
  .logo svg {
    width: 320px;
    height: 37px;
    vertical-align: middle; }
  @media screen and (max-width: 64rem) {
    .logo {
      padding: 16px 0; } }
  @media screen and (max-width: 37.5rem) {
    .logo svg {
      width: 200px;
      height: 28px; } }
  @media screen and (max-width: 20rem) {
    .logo svg {
      width: 150px;
      height: 21px; } }

.menu {
  border-top: 1px solid #4C4B4B;
  text-align: left; }
  @media screen and (max-width: 50rem) {
    .menu::after {
      content: '';
      display: block;
      position: absolute;
      width: 64px;
      height: 35px;
      bottom: 0;
      right: 0;
      background: #232323;
      background: linear-gradient(90deg, rgba(35, 35, 35, 0) 0%, #232323 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#232323",endColorstr="#232323",GradientType=1); } }

.mb-scroll-icon {
  display: none;
  position: absolute;
  right: 0;
  bottom: 12px;
  z-index: 2; }
  .mb-scroll-icon svg {
    width: 24px;
    height: 24px;
    vertical-align: middle; }
  @media screen and (max-width: 50rem) {
    .mb-scroll-icon {
      display: block; } }

.main-menu {
  display: inline-block;
  vertical-align: middle; }
  @media screen and (max-width: 50rem) {
    .main-menu {
      overflow: auto;
      position: relative;
      display: block; } }

.main-menu-ul > li {
  display: inline-block;
  vertical-align: middle;
  position: relative; }

.main-menu-ul > li.current::after {
  content: '';
  display: block;
  height: 2px;
  background-color: #93c9fc;
  width: 100%;
  position: absolute;
  bottom: 0px; }

.main-menu-ul > li.current > a:link {
  color: #93c9fc; }

.main-menu-ul > li.current > a:active {
  color: #93c9fc; }

.main-menu-ul > li.current > a:visited {
  color: #93c9fc; }

.main-menu-ul > li.current > a:hover {
  color: #93c9fc; }

.main-menu-ul a {
  display: inline-block;
  vertical-align: middle;
  font-size: 1.125rem;
  margin-right: 16px;
  padding: 16px 0; }
  .main-menu-ul a:last-child {
    margin-right: 0; }

@media screen and (max-width: 37.5rem) {
  .main-menu-ul a {
    font-size: 1rem;
    padding: 0;
    height: 48px;
    line-height: 48px; } }

@media screen and (max-width: 20rem) {
  .main-menu-ul a {
    font-size: 0.875rem; } }

.main-menu-ul li.current .sub-menu {
  display: block; }
  @media screen and (max-width: 64rem) {
    .main-menu-ul li.current .sub-menu {
      display: none; } }

.sub-menu {
  display: none;
  position: absolute;
  top: 57px;
  left: 0;
  width: 272px;
  background-color: #232323;
  padding: 16px;
  z-index: 2; }
  .sub-menu li {
    border-bottom: 1px solid #CDCDCD; }
    .sub-menu li:last-child {
      border-bottom: none; }
  .sub-menu a {
    display: block;
    font-size: 1rem; }
  .sub-menu .wrap {
    width: 240px;
    height: 150px;
    margin-bottom: 16px; }

@media screen and (max-width: 50rem) {
  .scroll-layer {
    position: relative;
    width: 880px;
    overflow: hidden; } }

@media screen and (max-width: 37.5rem) {
  .scroll-layer {
    width: 850px; } }

@media screen and (max-width: 20rem) {
  .scroll-layer {
    width: 680px; } }

/* Edition */
.Edition {
  right: 100px; }
  @media screen and (max-width: 64rem) {
    .Edition {
      display: none; } }

.Search {
  right: 0; }
  .Search .optionBox {
    width: 368px;
    padding: 24px; }
  .Search .magnifier {
    margin-top: -11.2px; }
  .Search .searchBlock {
    margin-bottom: 0; }
  .Search .searchInput {
    width: 100%; }
  @media screen and (max-width: 64rem) {
    .Search {
      display: none; } }

.DropDownStyle {
  width: 100px;
  cursor: pointer;
  position: absolute;
  top: 8px;
  z-index: 100; }
  .DropDownStyle span {
    display: inline-block;
    vertical-align: middle; }
  .DropDownStyle .arrow {
    display: inline-block;
    vertical-align: middle;
    transform: rotate(0deg); }
  .DropDownStyle svg {
    width: 10px;
    height: 10px;
    display: inline-block;
    vertical-align: middle; }
    .DropDownStyle svg.prevm {
      width: 16px;
      height: 16px; }
  .DropDownStyle .current-option {
    color: #ffffff; }

.DropDownStyle.dropdown .optionBox {
  display: block; }

.DropDownStyle.dropdown .arrow {
  transform: rotateX(180deg); }

.optionBox {
  display: none;
  position: absolute;
  right: 0;
  padding: 16px;
  width: 116px;
  text-align: left;
  border-radius: 4px;
  background-color: rgba(35, 35, 35, 0.8);
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.5); }
  .optionBox a {
    font-size: 12px;
    display: block;
    line-height: 1.4;
    font-family: Roboto, sans-serif, "Noto Sans TC";
    margin-bottom: 8px; }
    .optionBox a:last-child {
      margin-bottom: 0; }
    .optionBox a:link {
      color: #ffffff; }
    .optionBox a:active {
      color: #ffffff; }
    .optionBox a:visited {
      color: #ffffff; }
    .optionBox a:hover {
      color: #ffffff; }

/* side menu */
.menuOpen .side-menu {
  display: block; }

.side-menu {
  display: none;
  width: 30rem;
  position: absolute;
  left: 0;
  top: 142px;
  z-index: 100;
  background-color: #232323;
  overflow: auto;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  -webkit-box-flex: 1; }
  .side-menu::-webkit-scrollbar {
    display: none; }
  @media screen and (max-width: 64rem) {
    .side-menu {
      position: fixed;
      left: 0;
      top: 111px;
      height: 100vh; } }
  @media screen and (max-width: 37.5rem) {
    .side-menu {
      width: 100vw;
      top: 102px; } }
  @media screen and (max-width: 20rem) {
    .side-menu {
      top: 95px; } }

.side-height {
  padding: 32px; }
  @media screen and (max-width: 64rem) {
    .side-height {
      padding: 32px 32px 180px 32px; } }
  @media screen and (max-width: 37.5rem) {
    .side-height {
      padding: 32px 32px 120px 32px; } }

.CateCollection {
  text-align: left; }
  .CateCollection li {
    position: relative;
    padding: 16px 0;
    border-bottom: 1px solid #595959; }
    .CateCollection li > a {
      font-weight: bold;
      line-height: 1.5;
      font-size: 1.125rem; }
    .CateCollection li:last-child {
      border-bottom: none; }
    .CateCollection li.hasarrow::after {
      content: '';
      display: block;
      background-image: url(../img/rightarrow.svg);
      background-position: center center;
      background-repeat: no-repeat;
      width: 20px;
      height: 20px;
      position: absolute;
      right: 0;
      top: 16px;
      background-size: 100%; }
  .CateCollection a {
    font-family: Roboto, sans-serif, "Noto Sans TC";
    display: block; }
    .CateCollection a:link {
      color: #ffffff; }
    .CateCollection a:active {
      color: #ffffff; }
    .CateCollection a:visited {
      color: #ffffff; }
    .CateCollection a:hover {
      color: #ffffff; }
  .CateCollection a[class^="icon-"] {
    display: inline-block;
    vertical-align: middle; }
  @media screen and (max-width: 20rem) {
    .CateCollection li > a {
      font-size: 1rem; } }

.submenu {
  margin-top: 16px; }

.subgroup {
  display: inline-block;
  vertical-align: top;
  margin-right: 64px; }
  .subgroup:last-child {
    margin-right: 0; }
  .subgroup a {
    font-size: 1rem;
    line-height: 1.4;
    margin-bottom: 8px;
    padding: 10px 0; }
    .subgroup a:last-child {
      margin-bottom: 0; }
  @media screen and (max-width: 20rem) {
    .subgroup a {
      font-size: 0.875rem; } }

a[class^="icon-"] {
  text-align: center;
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 100%;
  background-color: #ffffff;
  overflow: hidden;
  margin-right: 16px; }
  a[class^="icon-"] svg {
    width: 26px;
    height: 26px;
    vertical-align: middle; }

.menu-toggle {
  display: inline-block;
  vertical-align: middle;
  margin-right: 32px; }

.toggleStyle {
  cursor: pointer; }
  .toggleStyle svg {
    width: 32px;
    height: 32px;
    vertical-align: middle; }
  @media screen and (max-width: 64rem) {
    .toggleStyle {
      position: absolute;
      left: 16px;
      top: 20px;
      z-index: 2; } }
  @media screen and (max-width: 37.5rem) {
    .toggleStyle {
      top: 16px; }
      .toggleStyle svg {
        width: 24px;
        height: 24px; } }

.menu-icon {
  display: block; }

.menu-close {
  display: none; }

.menuOpen .menu-icon {
  display: none; }

.menuOpen .menu-close {
  display: block; }

/* search */
.searchBlock {
  position: relative;
  margin-bottom: 8px; }

.magnifier {
  position: absolute;
  left: 16px;
  top: 50%;
  margin-top: -12px; }
  .magnifier svg {
    width: 24px;
    height: 24px;
    vertical-align: middle; }

.toSearch {
  position: absolute;
  right: 8px;
  top: 50%;
  margin-top: -20px;
  padding: 8px; }
  .toSearch svg {
    width: 24px;
    height: 12px;
    vertical-align: middle; }

.searchInput {
  width: 26rem;
  height: 3rem;
  padding: 0 8px 0 48px;
  outline: none;
  border: none; }
  @media screen and (max-width: 37.5rem) {
    .searchInput {
      width: 100%;
      font-size: 1rem;
      line-height: 1.4; } }
  @media screen and (max-width: 20rem) {
    .searchInput {
      font-size: 0.875rem; } }

.PadOverlay {
  display: none;
  background-color: transparent;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2; }
  .PadOverlay.open {
    display: block; }

.menuOpen .PadOverlay {
  display: block; }
  @media screen and (max-width: 50rem) {
    .menuOpen .PadOverlay {
      display: none; } }

/* sticky */
@media screen and (max-width: 50rem) {
  .sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0; }
  .sticky:before,
  .sticky:after {
    content: '';
    display: table; } }

.appInfo {
  display: none;
  background-color: #EEF0F3;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  font-family: "Merriweather", serif;
  font-weight: 700;
  font-size: 14px; }
  @media screen and (max-width: 50rem) {
    .appInfo {
      display: flex;
      padding: 8px 16px; } }
  .appInfo .appInfoIcon > * {
    vertical-align: middle; }
  .appInfo .appInfoIcon span {
    padding-left: 10px; }
    @media screen and (max-width: 37.5rem) {
      .appInfo .appInfoIcon span {
        padding-left: 6px; } }
  .appInfo a.appInfoBtn {
    font-size: 14px;
    color: #004E98;
    border: 1px solid #004E98;
    padding: 2px 6px; }
    @media screen and (max-width: 37.5rem) {
      .appInfo a.appInfoBtn {
        font-size: 12px; } }