/*
18:45 2020-04-16 update iconCheckBox comment
14:38 2020-04-21 adjust bullet and the arrow 
*/
.contentWrapper,
.mainHolder {
  background: none !important; }

b {
  font-weight: bold; }

ol {
  padding: 0 0 0 22px; }

P {
  margin-bottom: 6px; }

main.guidebookIndex {
  background-image: url(/images/main-banner.jpg);
  background-repeat: repeat-x;
  background-size: auto 400px;
  background-position: top center;
  display: block; }
  @media screen and (max-width: 768px) {
    main.guidebookIndex {
      background-size: auto 282px; } }
  @media screen and (max-width: 480px) {
    main.guidebookIndex {
      background-size: auto 242px; } }

body.innerPage .articleHolder {
  background: transparent !important;
  padding: 0 !important;
  font-size: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: stretch;
  align-items: stretch; }
  @media print {
    body.innerPage .articleHolder {
      display: block; } }
body.innerPage .articleTitle.forBanner {
  padding: 76px 0 128px;
  background-image: url(/images/main-banner-object.svg);
  background-size: 440px 253px;
  background-repeat: no-repeat;
  background-position: 105% center;
  margin-bottom: 28px; }
  @media screen and (max-width: 768px) {
    body.innerPage .articleTitle.forBanner {
      padding: 58px 0 60px;
      background-size: 268px; } }
  @media screen and (max-width: 480px) {
    body.innerPage .articleTitle.forBanner {
      padding-top: 24px;
      background-size: 150px;
      background-position: 105% bottom; } }
  @media screen and (max-width: 350px) {
    body.innerPage .articleTitle.forBanner {
      background-size: 144px; } }

.articleItem {
  display: inline-block;
  width: 32%;
  margin-right: 2%;
  margin-bottom: 20px;
  vertical-align: top;
  background-color: #FFF;
  border: 1px solid #cccdce;
  position: relative;
  flex: 0 auto;
  align-self: auto;
  transition: all 0.3s ease;
  z-index: 1;
  border-radius:10px }
  @media screen and (min-width: 1200px) {
    .articleItem:nth-child(3n) {
      margin-right: 0; } }
  @media screen and (max-width: 1200px) and (min-width: 640px) {
    .articleItem {
      width: 48%; }
      .articleItem:nth-child(2n) {
        margin-right: 0; } }
  @media screen and (max-width: 640px) {
    .articleItem {
      margin-right: 0;
      width: 100%; } }
  @media print {
    .articleItem {
      margin-right: 0;
      width: 100%;
      display: block; } }
  .articleItem:before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 15px;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1;
	  border-radius:9px 0px 0px 9px }
    @media print {
      .articleItem:before {
        display: none !important; } }
  .articleItem:after {
    content: "";
    display: inline-block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
    background-color: #FFF;
    transition: all 0.3s ease;
	  border-radius:10px  }
    @media print {
      .articleItem:after {
        display: none !important; } }
  .articleItem01:before, .articleItem01 li:before {
    background-color: #e96d0b; }
  .articleItem02:before, .articleItem02 li:before {
    background-color: #7430b4; }
  .articleItem03:before, .articleItem03 li:before {
    background-color: #2c8e97; }
  .articleItem04:before, .articleItem04 li:before {
    background-color: #c19b45; }
  .articleItem05:before, .articleItem05 li:before {
    background-color: #747474; }
  .articleItem06:before, .articleItem06 li:before {
    background-color: #3e48a4; }
  .articleItem07:before, .articleItem07 li:before {
    background-color: #3b3b3b; }
  .articleItem08:before, .articleItem08 li:before {
    background-color: #5f2133; }
  .articleItem09:before, .articleItem09 li:before {
    background-color: #ea6e0b; }
  .articleItem10:before, .articleItem10 li:before {
    background-color: #59258a; }
  .articleItem11:before, .articleItem11 li:before {
    background-color: #29838b; }
  .articleItem12:before, .articleItem12 li:before {
    background-color: #c39f50; }
  .articleItem13:before, .articleItem13 li:before {
    background-color: #696969; }
  .articleItem14:before, .articleItem14 li:before {
    background-color: #3e47a4; }
  .articleItem01:hover:after {
    background-color: #e96d0b22; }
  .articleItem02:hover:after {
    background-color: #7430b422; }
  .articleItem03:hover:after {
    background-color: #2c8e9722; }
  .articleItem04:hover:after {
    background-color: #c19b4522; }
  .articleItem05:hover:after {
    background-color: #74747422; }
  .articleItem06:hover:after {
    background-color: #3e48a422; }
  .articleItem07:hover:after {
    background-color: #3b3b3b22; }
  .articleItem08:hover:after {
    background-color: #5f213322; }
  .articleItem09:hover:after {
    background-color: #ea6e0b22; }
  .articleItem10:hover:after {
    background-color: #59258a22; }
  .articleItem11:hover:after {
    background-color: #29838b22; }
  .articleItem12:hover:after {
    background-color: #c39f5022; }
  .articleItem13:hover:after {
    background-color: #69696922; }
  .articleItem14:hover:after {
    background-color: #3e47a422; }
  .articleItem ul {
    margin-bottom: 0; }
  .articleItem li {
    padding-left: 20px;
    position: relative;
    font-weight: bold; }
    .articleItem li:before {
      content: "";
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 10px;
      position: absolute;
      left: 0;
      top: 7px; }
      @media screen and (max-width: 768px) {
        .articleItem li:before {
          /* top: 4px; 14:31 2020-04-21 remark this as it make bullet up on small width */
          width: 8px;
          height: 8px; } }
      @media print {
        .articleItem li:before {
          display: none !important; } }
    .articleItem li a:after {
      content: " >";
      display: inline-block;
      padding-left: 6px;
      bottom: 0px;
      position: absolute; }
      @media print {
        .articleItem li a:after {
          display: none !important; } }
  .articleItem .contentRemark {
    padding-left: 20px;
    display: inline-block; }

.dropDowntrigger {
  display: inline-block !important;
  width: 100%;
  padding: 30px 30px 26px 45px;
  transition: all 0.3s ease;
  position: relative;
  cursor: unset;
  pointer-events: none; }
  .dropDowntrigger a {
    text-decoration: none; }
  @media print {
    .dropDowntrigger {
      display: block; } }
  @media screen and (max-width: 640px) {
    .dropDowntrigger {
      padding: 20px;
      padding: 30px 60px 26px 32px;
      pointer-events: initial; }
      .dropDowntrigger:after {
        content: '';
        display: block;
        width: 30px;
        height: 30px;
        background: url(../images/common_icons/icon-drop-01.svg) no-repeat center center;
        background-size: 100% 100%;
        position: absolute;
        top: 50%;
        margin-top: -15px;
        right: 20px; }
      .isOpen .dropDowntrigger:after {
        background-image: url(../images/common_icons/icon-drop-00.svg); }
      .dropDowntrigger:hover {
        text-decoration: underline;
        color: #000; }
      .dropDowntrigger .iconCheckBox {
        color: #000;
        padding: 0 36px 0 0;
        background: url(../images/common_icons/icon-check-box-01.svg) no-repeat center left;
		/* 18:44 2020-04-16 this override by inline background in html generated */
        background-size: 30px 30px;
        line-height: 30px;
        position: relative;
        display: block; } }

body.innerPage .innerPageHolder a:not(.btn) {
  text-decoration: none;
  color: #2f2f2f; }
  body.innerPage .innerPageHolder a:not(.btn):hover {
    color: #2f2f2f;
    text-decoration: underline; }
  body.innerPage .innerPageHolder a:not(.btn).dropDowntrigger {
    text-decoration: none; }
    @media screen and (max-width: 640px) {
      body.innerPage .innerPageHolder a:not(.btn).dropDowntrigger {
        cursor: pointer; } }
    body.innerPage .innerPageHolder a:not(.btn).dropDowntrigger > h2 {
      display: block;
      color: #2f2f2f;
      padding-right: 40px;
      background-position: 98% 6px;
      background-repeat: no-repeat;
      background-size: 28px 28px; }
      @media screen and (max-width: 768px) {
        body.innerPage .innerPageHolder a:not(.btn).dropDowntrigger > h2 {
          background-position: right 2px;
          background-size: 24px 24px; } }
      @media screen and (max-width: 640px) {
        body.innerPage .innerPageHolder a:not(.btn).dropDowntrigger > h2 {
          display: inline;
          max-width: calc( 100% - 20px);
          background-size: 23px 23px; } }

.articleContentContainer {
  padding: 0 30px 30px 45px; }
  @media screen and (max-width: 768px) {
    .articleContentContainer {
      padding: 0 30px 30px 36px; } }
  @media screen and (min-width: 641px) {
    .articleContentContainer {
      display: block !important; } }
  @media screen and (max-width: 640px) {
    .articleContentContainer {
      padding: 0 30px 12px;
      display: none; } }
  @media print {
    .articleContentContainer {
      display: block; } }

@media screen and (max-width: 480px) {
  body.innerPage .guidebookIndex .innerPageWrapper.first {
    padding-top: 0; }

  body.innerPage .articleTitle.forBanner {
    padding-top: 20px;
    padding-bottom: 30px;
    margin-bottom: 10px; }

  main.guidebookIndex {
    background-size: auto 176px; } }
@media screen and (max-width: 380px) {
  body.innerPage .articleTitle.forBanner {
    background-size: 125px; }

  main.guidebookIndex {
    background-size: auto 178px; } }
.hmNewHeader__subMenuHr {
  position: relative;
  width: 100%;
  height: 1px;
  display: block;
  margin: 30px 0;
  padding: 0 10px;
  float: left;
  clear: both; }
  .hmNewHeader__subMenuHr:before {
    content: '';
    position: relative;
    width: 100%;
    height: 1px;
    display: block;
    background: #d2d2d2; }
  @media screen and (max-width: 1200px) {
    .hmNewHeader__subMenuHr {
      display: none; } }

@media screen and (max-width: 480px) {
  header nav .subMenu .subMenuCol .infoItem a span {
    font-size: 1rem; } }

body.innerPage h1.articleTitle,
body.innerPage h2.articleTitle {
  font-size: 40px; }
  @media screen and (max-width: 768px) {
    body.innerPage h1.articleTitle,
    body.innerPage h2.articleTitle {
      font-size: 30px; } }

.dropDowntrigger > h2 {
  font-size: 30px; }
  @media screen and (max-width: 768px) {
    .dropDowntrigger > h2 {
      font-size: 21px; } }

.articleItem li {
  font-size: 18px; }
  :lang(en) .articleItem li {
    font-size: 21px; }
  @media screen and (max-width: 768px) {
    .articleItem li {
      font-size: 16px; } }
  .articleItem li a:after {
    font-size: 18px; }
    @media screen and (max-width: 768px) {
      .articleItem li a:after {
        font-size: 12px; 
		 /* 14:38 2020-04-21 add to adjust the arrow (tc sc) */
		 bottom:3px; } 
	  :lang(en)	.articleItem li a:after {
		 /* 14:38 2020-04-21 add to adjust the arrow (en) */
		 bottom:5px; }
	}

:lang(en) .articleHolder a.dropDowntrigger > h2 {
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: bold; }

#moreGuideBook {
  font-size: 16px; }
  @media screen and (max-width: 767px) {
    #moreGuideBook {
      font-size: 14px; } }

@font-face {
  font-family: iconFont;
  src: url(fonts/iconFonts/icon.ttf); }
.moreAbout:after {
  font-family: iconFont !important;
  content: " \65";
  font-size: 0.65em; }

/*# sourceMappingURL=style_addon.css.map */