@charset "UTF-8";

/* 
15:24 2019-06-24 update for big cluster icon
9:14 2019-06-26 guidebook
17:01 2019-07-09 Rich Text cannot add "a.moreAbout", change it
14:35 2019-07-11 rename style_addon.css to guidebook_style_addon.css
15:23 2019-07-11 handle case for NO "More URL"
15:45 2019-07-16 adjust writesup orange panel
14:03 2019-07-18 set bottom margin so that it equals text line-height
14:35 2019-07-18 hover will scale to 1.1, so retain some space for text not out of area
2019-10-04 16:35:44.712 fix cluster leftmenu deeper color
10:19 2020-07-07 use guidebook to fix for flash on want to and item
17:08 2021-09-17 font size make smaller for sub-cat rect box item
15:37 2021-10-21 for TD case long text
*/

/* 9:34 2019-06-14 govhk amend to adjust for original background */
/* .lightGrayBarkground { */
body.innerPage main.lightGrayBarkground .mainHolder,
body.innerPage main.lightGrayBarkground > nav.contentWrapper:first-child { 
  background-color: #efeeee;
  display: block; }

/* 9:34 2019-06-14 govhk amend to adjust for original background */  
/* .lightOrangeBarkground { */
body.innerPage main.lightOrangeBarkground .mainHolder,
body.innerPage main.lightOrangeBarkground > nav.contentWrapper:first-child { 
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fbebda+0,fdf9f5+100 */
  background: #fbebda;
  /* Old browsers */
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #fbebda 0%, #fdf9f5 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbebda', endColorstr='#fdf9f5',GradientType=1 );
  /*IE6-9 fallback on horizontal gradient */
  display: block; }

/* 2019-10-04 16:35:44.712 fix cluster leftmenu deeper color
.tagBlock .blockTag {
  background-color: #fcd9c4; }
  */

/* 11:58 2019-07-08 GOVHK  change ".item" to ".item.bannerGuidebook" 
as it affects "I Want To" and "Expand Item" (in sub-sub cat)
body.innerPage .innerPageListGrid .item {	
  padding: 17px 17px 0 0; } */


  
  body.innerPage .innerPageListGrid .item.bannerGuidebook {
    /* margin-top: 17px; 12:24 2019-07-08 GOVHK remark*/
	margin-bottom: 17px; /* 12:23 2019-07-08 GOVHK added */
    padding: 0 17px 0 0;
    width: 100%;
    min-height: 100px;
    background: #CA4B02; }



	
    @media screen and (max-width: 1200px) {
      body.innerPage .innerPageListGrid .item.bannerGuidebook {
        margin: 0; 
		margin-bottom: 17px; /* 12:23 2019-07-08 GOVHK added */
		} 
	  }

  /* 10:19 2020-07-07 use guidebook to fix for flash on want to and item */
  body.innerPage .innerPageListGrid .item.bannerGuidebook.line {
	 min-height: 1px;
    height: 1px;
	margin-bottom:0px;
    background: transparent; }
	  
    body.innerPage .innerPageListGrid .item.bannerGuidebook a span {
      color: #fff; }
    body.innerPage .innerPageListGrid .item.bannerGuidebook .bannerTitle {
      margin: 25px 0 20px;
      display: block;
      width: -webkit-max-content;
      width: -moz-max-content;
      width: max-content;
      /* max-width: 100%; 14:35 2019-07-18 hover will scale to 1.1, so retain some space for text not out of area */
	  max-width: 93%;
      display: inline-block;
      -webkit-transform-origin: left center;
              transform-origin: left center; }
    body.innerPage .innerPageListGrid .item.bannerGuidebook .bannerContent {
      padding: 20px 32px; }
      body.innerPage .innerPageListGrid .item.bannerGuidebook .bannerContent .bannerItemContainer {
        display: table;
        width: 100%; }

		/* 15:20 2019-07-11 tricky: If SectionItem Exist and as last-child (NO "More"), it will have more padding bottom */
		body.innerPage .innerPageListGrid .item.bannerGuidebook .bannerContent .bannerItemContainer:last-child {
			padding-bottom:20px;
		}
		
		
        body.innerPage .innerPageListGrid .item.bannerGuidebook .bannerContent .bannerItemContainer :lang(zh-cn) {
          vertical-align: -webkit-baseline-middle; }
        @media screen and (max-width: 1200px) {
          body.innerPage .innerPageListGrid .item.bannerGuidebook .bannerContent .bannerItemContainer {
            width: 100%;
            text-align: left;
            display: block;
            max-width: 600px; } }
        body.innerPage .innerPageListGrid .item.bannerGuidebook .bannerContent .bannerItemContainer a.bannerItem {
          display: table-cell;
          padding: 0 16px 0 0;
          max-width: 280px; }
          @media screen and (min-width: 501px) and (max-width: 1200px) {
            body.innerPage .innerPageListGrid .item.bannerGuidebook .bannerContent .bannerItemContainer a.bannerItem {
              display: inline-block;
              width: calc( 50% - 16px );
              vertical-align: top;
              padding: 0 0 15px 0;
              max-width: initial;
              margin: 0; } }
          @media screen and (max-width: 500px) {
            body.innerPage .innerPageListGrid .item.bannerGuidebook .bannerContent .bannerItemContainer a.bannerItem {
              width: calc( 100% - 18px );
              padding: 0 0 12px 0;
              margin: 0;
              display: block;
              max-width: initial; } }
          @media print {
            body.innerPage .innerPageListGrid .item.bannerGuidebook .bannerContent .bannerItemContainer a.bannerItem {
              display: inline-block;
              width: calc( 50% - 16px );
              vertical-align: top;
              padding: 0 0 15px 0;
              max-width: initial;
              margin: 0; } }
          body.innerPage .innerPageListGrid .item.bannerGuidebook .bannerContent .bannerItemContainer a.bannerItem .bannerItemicon {
            display: inline;
            width: 40px;
            height: 40px;
            background-position: center;
            background-size: 40px;
            display: inline-block;
            float: left;
            margin: 0 8px 0 0; }
            @media screen and (max-width: 1200px) {
              body.innerPage .innerPageListGrid .item.bannerGuidebook .bannerContent .bannerItemContainer a.bannerItem .bannerItemicon {
                float: initial;
                display: inline-block;
                vertical-align: middle; } }
          @media screen and (max-width: 1200px) {
            body.innerPage .innerPageListGrid .item.bannerGuidebook .bannerContent .bannerItemContainer a.bannerItem .bannerItemText {
              display: inline-block;
              width: calc( 100% - 54px ); /* 15:50 2019-07-16 space at right is to use for 2 items on a row, not change */
              vertical-align: middle; } }
      body.innerPage .innerPageListGrid .item.bannerGuidebook .bannerContent a.bannerMoreBtn {
        margin: 15px 0 10px;
        display: block;
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;
        max-width: 100%;
        -webkit-transform-origin: center left;
                transform-origin: center left; }
      body.innerPage .innerPageListGrid .item.bannerGuidebook .bannerContent a {
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease; }
        :not(.bannerTitleSec) body.innerPage .innerPageListGrid .item.bannerGuidebook .bannerContent a:hover {
          -webkit-transform: scale(1.1);
                  transform: scale(1.1); }
        @media screen and (max-width: 1200px) {
          body.innerPage .innerPageListGrid .item.bannerGuidebook .bannerContent a:hover {
            -webkit-transform: scale(1) !important;
                    transform: scale(1) !important; } }
        body.innerPage .innerPageListGrid .item.bannerGuidebook .bannerContent a span.bannerMoreBtn:after, body.innerPage .innerPageListGrid .item.bannerGuidebook .bannerContent a span.bannerItemText:after, body.innerPage .innerPageListGrid .item.bannerGuidebook .bannerContent a.bannerMoreBtn span:after, body.innerPage .innerPageListGrid .item.bannerGuidebook .bannerContent a.bannerTitle span:after {
          content: url(/images/common_icons/icon-arrow-left.svg);
          width: 0.7em;
          height: 0.7em;
          display: inline-block;
          position: relative;
          left: 3px;
          top: 0.1em; }
        body.innerPage .innerPageListGrid .item.bannerGuidebook .bannerContent a.bannerTitleSec:before {
          content: url(/images/common_icons/icon-ball.png);
          display: inline-block;
          position: relative;
          vertical-align: middle;
          margin: -5px 5px 0 0; }

		/* 15:09 2019-06-24 GovHK added */
		body.innerPage .innerPageListGrid .item.bannerGuidebook .bannerContent a.bannerTitleThird {
			/* line-height:49px; 14:22 2019-07-16 adjust for TIR */
			/* 14:22 2019-07-16 NOTE: it is original CSS background, change to span for allow different icons */
			
			/* line-height:42px; 11:02 2019-07-18 */
			line-height:35px;
			
		}
		body.innerPage .innerPageListGrid .item.bannerGuidebook .bannerContent a.bannerTitleThird span.bannerItemicon  {
		  
		  /* original height:53px but it is "::before" icon */
		  /*
		  width:43px;
		  height:49px; 
		  12:13 2019-07-18 change to square and 50px for easy remember
		  */
		  width:50px;
		  height:50px; 
		  
		  background-position: center;
		  float:left;
		  background-repeat: no-repeat;
		  
          display: inline-block;
          position: relative;
          /* vertical-align: middle; */
          /* margin: -5px 5px 0 0;  14:28 2019-07-16 original */
		  /* margin: -5px 10px 0 0; 10:58 2019-07-18 org */
		  /* CAUTION: 14:03 2019-07-18 set bottom margin so that it equals text line-height (50-10-5=35px) */
		  margin: -10px 10px -5px 0;
		  
		  }
		body.innerPage .innerPageListGrid .item.bannerGuidebook .bannerContent a.bannerTitleThird span.bannerItemicon:after  {  
			content:"";
		}
		/* 15:09 2019-06-24 GovHK added -end */  
		  
/* 10:58 2019-07-09 move to layout.css 
.shareWechat {
  background: rgba(255, 255, 255, 0) url(/images/common_icons/icon_share_wechat.svg) no-repeat center center;
  background-size: 19px 19px;
  width: 19px;
  height: 19px;
  display: inline-block;
  margin-right: 11px; }
*/  

body.innerPage .innerPageListGrid .item.bannerGuidebook .bannerContent a.bannerTitle span {
  font-weight: 900;
  font-size: 21px; }
  :lang(zh-hk) body.innerPage .innerPageListGrid .item.bannerGuidebook .bannerContent a.bannerTitle span, :lang(zh-cn) body.innerPage .innerPageListGrid .item.bannerGuidebook .bannerContent a.bannerTitle span {
    font-size: 22px;
    font-weight: normal;
    vertical-align: initial; }
body.innerPage .innerPageListGrid .item.bannerGuidebook .bannerContent a span {
  font-weight: 800;
  font-size: 15px; }
  :lang(zh-hk) body.innerPage .innerPageListGrid .item.bannerGuidebook .bannerContent a span, :lang(zh-cn) body.innerPage .innerPageListGrid .item.bannerGuidebook .bannerContent a span {
    vertical-align: -webkit-baseline-middle;
    font-size: 16px; }

@font-face {
  font-family: iconFont;
  src: url(fonts/iconFonts/icon.ttf); }
/* 16:45 2019-07-05 GOVHK: no need, use externalLink  
.moreAbout:after {
  font-family: iconFont !important;
  content: " \65";
  font-size: 0.65em; }
*/  

.bottomBar {
  margin: 20px auto; }
  
/* 9:34 2019-06-14 govhk amend to adjust for original background */
/* 9:35 2019-06-14 comment it
.contentWrapper, .mainHolder {
  background: none !important; }
*/  

.articleHolder {
  background: transparent !important;
  padding: 0 !important; }
  .articleHolder .articleItem {
    background: #fcd9c4;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    margin-bottom: 20px; }
    .articleHolder .articleItem:hover {
      background: #ffc29d; }
    .articleHolder .articleItem.isOpen {
      background: #fff; }
    .articleHolder .articleItem .articleContentContainer {
      padding: 0 90px 30px;
      display: none; }
      @media print {
        .articleHolder .articleItem .articleContentContainer {
          display: block !important; } }
	  /* 17:04 2019-07-09 1st class is vendor, 2nd line is for Rich Text without "moreAbout" */	  
      body.innerPage .articleHolder .articleItem .articleContentContainer .moreAbout,
	  body.innerPage .articleHolder.guidebookContentExpand .articleItem .articleContentContainer a {
        display: inline-block;
        width: auto; }
		
		
		/* 16:46 2019-07-05 GOVHK: no need
      .articleHolder .articleItem .articleContentContainer .moreAbout:after {
        content: " \65";
        font-size: 0.65em; }
		*/
      @media screen and (max-width: 767px) {
        .articleHolder .articleItem .articleContentContainer {
          padding: 0 30px 30px; } }
      .articleHolder .articleItem .articleContentContainer a {
        width: auto; }
        @media screen and (max-width: 767px) {
          .articleHolder .articleItem .articleContentContainer a {
            width: 100%; } }
      .articleHolder .articleItem .articleContentContainer ol, .articleHolder .articleItem .articleContentContainer ul {
        padding: 0 0 0;
        margin: 0 0;
        list-style: initial; }
		
	/* 11:23 2019-07-08 GOVHK: added for order list, e.g. 1,2,3 */
	.articleHolder .articleItem .articleContentContainer ol {
		list-style:decimal;
	}
        .articleHolder .articleItem .articleContentContainer ol li, .articleHolder .articleItem .articleContentContainer ul li {
          padding: 0 0 10px;
          margin: 0 0 0 22px; }
      .articleHolder .articleItem .articleContentContainer ul {
        list-style: disc; }
      .articleHolder .articleItem .articleContentContainer b {
        font-weight: bold; }
      .articleHolder .articleItem .articleContentContainer P {
        margin-bottom: 10px; 
		
		/* 17:17 2019-07-05 GOVHK add for green button */
		display:block;
		float:none;
		clear:both;
		}
		/* 16:53 2019-07-05 GOVHK: this make green button full width 
        .articleHolder .articleItem .articleContentContainer P a:not(.btn).appslink {
          float: initial; 
		  }
		  */
		 /* 10:28 2019-07-08 fix the green action button at end of paragraph and without bottom margin or padding */ 
		.articleHolder .articleItem .articleContentContainer P::after {
			  content: "";
			  clear: both;
			  display: table;
		}
		  

.dropDowntrigger {
  display: inline-block !important;
  width: 100%;
  padding: 30px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  position: relative;
  background-color: transparent;
  border: none;
  text-align: left;
  font-weight: normal; }
  .dropDowntrigger:focus {
    outline: none; }
  @media screen and (max-width: 767px) {
    .dropDowntrigger {
      padding: 20px 15px; } }
  .dropDowntrigger:after {
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    background: url(/images/common_icons/icon-drop-01.svg) no-repeat center center;
    background-size: 100% 100%;
    position: absolute;
    right: 35px;
    top: 50%;
    margin-top: -20px;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease; }
    @media screen and (max-width: 767px) {
      .dropDowntrigger:after {
        width: 30px;
        height: 30px;
        margin-top: -15px;
        right: 12px; } }
    @media print {
      .dropDowntrigger:after {
        display: none; } }
  .isOpen .dropDowntrigger:after {
    background-image: url(/images/common_icons/icon-drop-00.svg); }
  .dropDowntrigger:hover {
    text-decoration: none; }
    .dropDowntrigger:hover h2 {
      color: #000; }
  .dropDowntrigger .iconCheckBox {
    color: #000;
    padding: 0 60px 0;
    background: url(/images/common_icons/icon-check-box-01.svg) no-repeat center left;
    background-size: 40px 40px;
    line-height: 40px;
    position: relative;
    display: block; }
    @media screen and (max-width: 767px) {
      .dropDowntrigger .iconCheckBox {
        padding: 0 45px 0;
        background-size: 30px 30px;
        line-height: 30px; } }

body.innerPage .innerPageHolder a:not(.btn).dropDowntrigger {
  text-decoration: none; }
  body.innerPage .innerPageHolder a:not(.btn).dropDowntrigger > span {
    color: #2f2f2f; }

a#moreGuideBook {
  display: block;
  clear: both;
  width: 250px;
  text-align: center;
  background-color: #e55b00;
  color: #fff;
  font-weight: bold;
  padding: 20px 30px;
  border-radius: 30px;
  margin: 10px 5px 15px; }
  a#moreGuideBook:hover {
    background-color: #e55b00aa; }
  @media screen and (max-width: 767px) {
    a#moreGuideBook {
      padding: 15px 25px; } }

/* 17:06 2019-07-09 GOVHK: 1st is vendor, 2nd is Rich Text without "moreAbout" */	  
.moreAbout span,
body.innerPage .articleHolder.guidebookContentExpand .articleItem .articleContentContainer a span {
  font-size: 15px; }

.bottomOption {
  padding-top: 5px; }

.dropDowntrigger span {
  font-size: 21px; }
  :lang(zh-hk) .dropDowntrigger span, :lang(zh-cn) .dropDowntrigger span {
    font-size: 22px;
    font-family: 微軟正黑體, "Arial", sans-serif; }

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

.articleContentContainer {
  font-size: 15px; }
  :lang(zh-hk) .articleContentContainer, :lang(zh-cn) .articleContentContainer {
    font-size: 16px; }
  .articleContentContainer li, .articleContentContainer p, .articleContentContainer a, .articleContentContainer span, .articleContentContainer b, .articleContentContainer strong {
    font-size: 15px; }
    :lang(zh-hk) .articleContentContainer li, :lang(zh-cn) .articleContentContainer li, :lang(zh-hk) .articleContentContainer p, :lang(zh-cn) .articleContentContainer p, :lang(zh-hk) .articleContentContainer a, :lang(zh-cn) .articleContentContainer a, :lang(zh-hk) .articleContentContainer span, :lang(zh-cn) .articleContentContainer span, :lang(zh-hk) .articleContentContainer b, :lang(zh-cn) .articleContentContainer b, :lang(zh-hk) .articleContentContainer strong, :lang(zh-cn) .articleContentContainer strong {
      font-size: 16px; }

#moreGuideBook {
  font-size: 16px; }
  @media screen and (max-width: 767px) {
    #moreGuideBook {
      font-size: 14px; } }
  :lang(zh-hk) #moreGuideBook, :lang(zh-cn) #moreGuideBook {
    font-size: 15px; }

.contentWrapper .innerPageHolder.articleHolder {
  font-size: 0; }
  .contentWrapper .innerPageHolder.articleHolder a.cateGuidebook {
    display: inline-block;
    width: calc( 25% - 9px );
    /* min-height: 340px; 15:16 2021-10-21 */
	min-height: 390px;
	
    vertical-align: top;
    margin: 0 12px 12px 0;
    padding: 25px;
    text-decoration: none;
    border: 1px solid #d2d2d2;
    position: relative;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease; }
    .contentWrapper .innerPageHolder.articleHolder a.cateGuidebook:nth-child(4n) {
      margin: 0 0 12px; }
    @media screen and (min-width: 768px) and (max-width: 850px) {
      .contentWrapper .innerPageHolder.articleHolder a.cateGuidebook {
        /* min-height: 260px;  15:17 2021-10-21 */
		min-height: 330px; 
		
		} }
    @media screen and (min-width: 501px) and (max-width: 767px) {
      .contentWrapper .innerPageHolder.articleHolder a.cateGuidebook {
        width: calc( 33.33333% - 8px );
        /* min-height: 220px; 15:15 2021-10-21 org */
		min-height: 280px;
		
        padding: 20px; }
        .contentWrapper .innerPageHolder.articleHolder a.cateGuidebook:nth-child(3n) {
          margin: 0 0 12px; }
        .contentWrapper .innerPageHolder.articleHolder a.cateGuidebook:nth-child(4n) {
          margin: 0 12px 12px 0; } }
    @media screen and (max-width: 500px) {
      .contentWrapper .innerPageHolder.articleHolder a.cateGuidebook {
        padding: 15px;
       /* min-height: 180px; 15:37 2021-10-21 org */
		min-height: 220px;
		
        width: calc(  50% - 6px ); }
        .contentWrapper .innerPageHolder.articleHolder a.cateGuidebook:nth-child(2n) {
          margin: 0 0 12px; }
        .contentWrapper .innerPageHolder.articleHolder a.cateGuidebook:nth-child(3n):nth-child(4n) {
          margin: 0 12px 12px 0; } }
    @media print {
      .contentWrapper .innerPageHolder.articleHolder a.cateGuidebook {
        width: 100%;
        min-height: auto;
        min-height: initial; } }

	/* 9:18 2019-06-26 GovHK move inline style to CSS */	
    .contentWrapper .innerPageHolder.articleHolder a.cateGuidebook:nth-child(8n+1) {
		background: #DA7A0C;
		background: linear-gradient(130deg,#DA7A0C 0%, #e65f03 100%);
	}
    .contentWrapper .innerPageHolder.articleHolder a.cateGuidebook:nth-child(8n+2) {
		 background: #7430b4;
		background: linear-gradient(130deg, #7430b4 0%, #4c1f75 100%);
	}
    .contentWrapper .innerPageHolder.articleHolder a.cateGuidebook:nth-child(8n+3) {
		background: #39A2AD;
		background: linear-gradient(130deg, #39A2AD 0%, #216c73 100%);	
	}
	.contentWrapper .innerPageHolder.articleHolder a.cateGuidebook:nth-child(8n+4) {
		background: #393939;
		background: linear-gradient(130deg, #393939 0%, #1e1e1e 100%);
	}
	.contentWrapper .innerPageHolder.articleHolder a.cateGuidebook:nth-child(8n+5) {
		background: #B18E3F;
		background: linear-gradient(130deg, #B18E3F 0%, #776a49 100%)
	}
	.contentWrapper .innerPageHolder.articleHolder a.cateGuidebook:nth-child(8n+6) {
		background: #7e7e7e;
		background: linear-gradient(130deg, #7e7e7e 0%, #686868 100%);
	}
	.contentWrapper .innerPageHolder.articleHolder a.cateGuidebook:nth-child(8n+7) {
		background: #3e48a5;
		background: linear-gradient(130deg, #3e48a5 0%, #29306e 100%);
	}
	.contentWrapper .innerPageHolder.articleHolder a.cateGuidebook:nth-child(8n) {
		background: #613341;
		background: linear-gradient(130deg, #613341 0%, #3f212a 100%);
	}	
	
    .contentWrapper .innerPageHolder.articleHolder a.cateGuidebook span {
      -webkit-transition: all 0.3s ease;
      transition: all 0.3s ease; }
    .contentWrapper .innerPageHolder.articleHolder a.cateGuidebook span.catename {
      text-decoration: none;
      color: #fff;
      font-weight: 700;
      display: inline-block; 
	  }
      .trident .contentWrapper .innerPageHolder.articleHolder a.cateGuidebook span.catename {
        text-decoration: none; }

      .contentWrapper .innerPageHolder.articleHolder a.cateGuidebook span.catename:after {
		content: url(/images/common_icons/icon-arrow-left.svg);
        width: 0.5em;
        height: 0.5em;
        display: inline-block;
        position: relative;
        vertical-align: inherit; 
		

		}
    .contentWrapper .innerPageHolder.articleHolder a.cateGuidebook span.showWhenPrint {
      display: none; }
      @media print {
        .contentWrapper .innerPageHolder.articleHolder a.cateGuidebook span.showWhenPrint {
          display: block;
          font-size: 16px; } }
    .contentWrapper .innerPageHolder.articleHolder a.cateGuidebook:hover span.cateIcon {
      -webkit-transform: scale(1.3);
              transform: scale(1.3); }
      @media screen and (max-width: 1200px) {
        .contentWrapper .innerPageHolder.articleHolder a.cateGuidebook:hover span.cateIcon {
          -webkit-transform: initial;
                  transform: initial; } }
    .contentWrapper .innerPageHolder.articleHolder a.cateGuidebook:hover span.catename {
      text-decoration: underline; }
    .contentWrapper .innerPageHolder.articleHolder a.cateGuidebook span.cateIcon {
      display: block;
      width: 60px;
      height: 60px;
      background-position: center;
      background-repeat: no-repeat;
      position: absolute;
      bottom: 55px;
      left: 25px;
      -webkit-transform-origin: center left;
              transform-origin: center left; }
      @media screen and (min-width: 768px) and (max-width: 850px) {
        .contentWrapper .innerPageHolder.articleHolder a.cateGuidebook span.cateIcon {
          bottom: 25px; } }
      @media screen and (min-width: 441px) and (max-width: 767px) {
        .contentWrapper .innerPageHolder.articleHolder a.cateGuidebook span.cateIcon {
          left: 20px;
          width: 50px;
          height: 50px;
          bottom: 20px; } }
      @media screen and (max-width: 440px) {
        .contentWrapper .innerPageHolder.articleHolder a.cateGuidebook span.cateIcon {
          left: 15px;
          height: 40px;
          width: 40px;
          bottom: 25px; } }



/*  16:50 2021-09-17 try change */
.catename {
  font-size: 21px; 
  }
  @media screen and (min-width: 651px) and (max-width: 850px) {
    .catename {
      font-size: 18px; } }
  @media screen and (min-width: 441px) and (max-width: 650px) {
    .catename {
      font-size: 16px; }
      :lang(zh-hk) .catename, :lang(zh-cn) .catename {
        font-size: 18px; } }
  @media screen and (max-width: 440px) {
    :not(.mobile) .catename {
      font-size: 16px; }
    :lang(zh-hk) .catename, :lang(zh-cn) .catename {
      font-size: 18px; } }

  
/* 16:53 2021-09-17 remark original below  
.catename {
  font-size: 26px;  
  }
  @media screen and (min-width: 651px) and (max-width: 850px) {
    .catename {
      font-size: 22px; } }
  @media screen and (min-width: 441px) and (max-width: 650px) {
    .catename {
      font-size: 18px; }
      :lang(zh-hk) .catename, :lang(zh-cn) .catename {
        font-size: 22px; } }
  @media screen and (max-width: 440px) {
    :not(.mobile) .catename {
      font-size: 18px; }
    :lang(zh-hk) .catename, :lang(zh-cn) .catename {
      font-size: 22px; } }
*/

.lightGrayBarkground {
  background-color: f6f6f6; }

/* 2019-10-04 16:35:44.712 fix cluster leftmenu deeper color
.tagBlock .blockTag {
  background-color: #fcd9c4; }
  .tagBlock .blockTag.active:before {
    background: #cc4c02; }
*/	

@media screen and (max-width: 1200px) {
  .expandable.expandTb .blockHead {
    border-bottom: none; } }
/* 16:44 2019-07-05 GOVHK: no need	
.externalLink:after {
  color: #eb7422; }
*/  

body.innerPage .bottomBar .lastRevision {
  position: relative; }

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