@charset "utf-8";

@import url('fonts.css');

@font-face {
	font-family: 'icon';
	src: url('../fonts/icon.woff2') format("woff2"),
		url('../fonts/icon.woff') format("woff");
}

:root {
  --primary-blue: #0f3c96;
  --primary-light: #006BD7;
  --primary-dark: #03276a;
  --secondary-blue: #9ac9e5;
  --secondary-light: #c7e3f3;
  --secondary-dark: #38769c;
  
  --black: #000000;
  --white: #ffffff;
  --icon-size: 44px;
  --icon-border: 2px;
  --icon-padding: 10px;
  --icon-gap: 10px;
  --border-radius: 10px;
  --page-header-height: 100px;
  --fixed-page-header-height: 90px;
  --mobile-page-header-height: 80px;
  
  --btn-color:#003723;
  --home-btn-color:rgba(0,55,35,.5);
  --hover-btn-color:#CCF17F;
  --light-green:#A6CF4D;
  --light-green2:#6B9900;
  --light-green3:#CCF17F;
  --dark-green:#016936;
  --dark-green2:#003723;
  --dark-green3:#378500;
  --dark-green4:#008564;
  /* --brown: #9D6B22; */
  --brown: #9F6A26;  
  --yellow: #FFFCA6;
  --light-orange: #E0AC00;
  --orange: #CD4400;
  --light-grey: #F2F2F2;
  --grey: #A6A6A6;
  --purple: #83415A;
  --blue: #1A68A3;
  
  --accordionItem1Color:#008564;
  --accordionItem2Color:#6B9900;
  --accordionItem3Color:#7b7900;
  
  --strategicAreaColor1:#379854;
  --strategicAreaColor2:#E98023;
  --strategicAreaColor3:#008DA5;
  --strategicAreaColor4:#6C5DA0;
  
  --area1-color:#127A57;
  --area2-color:#9F6A26;
  --area3-color:#1A68A3;
  --area4-color:#B945A3;
  --hover-menu-color:#9D6B22;
  --hover-color:#FFFCA6;
  --hover-tool-menu-bg-color:#FFFCA6;
  
  /* --contentAarea-max-width: 1380px; */
  --contentAarea-max-width: 1480px;
  --container-max-width: 1680px;
  --container-gap: 40px;
  --mobile-container-gap: 20px;
}

[id] {
    scroll-margin-top: var(--page-header-height);
}
@layer core {
  html {
    border: 0;
    margin: 0 auto;
    padding: 0;
    min-height: 100vh;
	/* scroll-behavior: smooth; */
  }
  body {
    /* font-family: "Outfit", Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif; */
	font-family: "Roboto", Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif;
    font-variant-ligatures: none;
    font-size: 18px;
    color: #333;
    line-height: 1.2;
    font-weight: 400;
    min-height: 100vh;
  }
  body {
    opacity: 0;
  }
  body.done {
    opacity: 1;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: " ";
  }

  .clearfix:after {
    clear: both;
  }

  *:focus-visible,
  label:focus-within {
    outline: var(--black) solid 2px;
  }
  
  #wrapper.home #headerZone:not(.fixed) *:focus-visible {
    outline: var(--white) solid 2px;
  }
  
	input[type="search"]::-webkit-search-decoration,
	input[type="search"]::-webkit-search-cancel-button,
	input[type="search"]::-webkit-search-results-button,
	input[type="search"]::-webkit-search-results-decoration { display: none; }

  a{
    transition: font-size .3s ease 0s, color .3s ease 0s, background-color .3s ease 0s, padding .3s ease 0s, margin .3s ease 0s;
  }

  sub,
  sup {
    font-size: 0.777em;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }

  sup {
    top: -0.5em;
  }

  sub {
    bottom: -0.35em;
  }

  em, i{
    font-style: italic;
  }

  #skipToContent {
    float: left;
    margin: 0;
    padding: 0;
    width: 100%;
    position: relative;
    z-index: 5000;
  }

  #skipToContent a {
    background: #fff;
    font-size: 100%;
    height: 1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
  }

  #skipToContent a:focus,
  #skipToContent a:active {
    display: inline;
    height: auto;
    left: 0;
    padding: 4px;
    top: 0;
    width: 180px;
    z-index: 1000;
    background: var(--dark-green2);
    color: #fff;
  }

  .videoWrap,
  .youtubeWrap {
    position: relative;
  }

  .youtubeWrap iframe,
  .videoWrap video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .accessibility {
    height: 0;
    width: 0;
    display: inline-block;
    overflow: hidden;
    margin: 0;
    padding: 0;
    font-size: 0;
    text-indent: -9999px;
  }

  .hidden,
  .invisible {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    display: inline;
  }

  .sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
  }
  
  .underlineContent {
	text-decoration: underline;
  }

  /********* dialog ************/
  dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    border: 0;
    max-width: none;
    max-height: 100svh;
    overflow: hidden;
    padding: 0;
    /* -webkit-backdrop-filter: blur(5px);
   backdrop-filter: blur(5px); */
    background-color: rgba(0, 0, 0, .9);
  }

  dialog article {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--white);
    max-width: 850px;
    max-height: 100svh;
    width: 95%;
	border: 5px solid var(--light-green2);
    border-radius: var(--border-radius);
    box-shadow: 0 0 15px 7px rgba(0, 0, 0, 0.2);
  }

  @keyframes backdrop-fade-in {
    from {
      -webkit-backdrop-filter: blur(0);
      backdrop-filter: blur(0);
    }

    to {
      -webkit-backdrop-filter: blur(5px);
      backdrop-filter: blur(5px);
    }
  }

  @keyframes fade-in {
    from {
      top: -20%;
    }

    to {
      top: 50%;
    }
  }

  dialog[open] {
    animation: backdrop-fade-in 0.5s ease-out;
    animation-fill-mode: forwards;
  }

  dialog[open] article {
    /* animation: fade-in 0.5s ease-out; */
  }

  dialog article header {
    font-size: 1.556em;
	font-weight: 700;
    line-height: 1.2;
    padding: 35px 55px 0 25px;
	color: var(--dark-green2);
    /* background-color: var(--second-color); */
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
  }

  dialog article header>*:last-child,
  dialog article .modal-content .modal-scroll-content>*:last-child {
    margin-bottom: 0 !important;
  }

  dialog article .modal-content {
    padding: 30px 25px;
  }

  dialog article .modal-content .modal-scroll-content {
    max-height: calc(100svh - 280px);
    overflow-y: auto;
    padding-right: 5px;
  }

  .firefox dialog article .modal-content .modal-scroll-content {
    scrollbar-color: var(--light-green2) #EEF9F3;
    scrollbar-width: thin;
  }

  dialog article .modal-content .modal-scroll-content::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  dialog article .modal-content .modal-scroll-content::-webkit-scrollbar-track {
    background-color: #EEF9F3;
    border-radius: 0;
  }

  dialog article .modal-content .modal-scroll-content::-webkit-scrollbar-thumb {
    background-color: var(--light-green2);
    border-radius: 0;
  }

  dialog article footer {
    padding: 0 25px 30px;
    display: flex;
    /* justify-content: flex-end; */
    /* border-top: 1px solid var(--grey); */
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
  }

  dialog article footer.no-border {
    border-top: none;
  }

  dialog article footer.text-center {
    justify-content: center;
  }

  dialog a.close-modal-btn {
    width: 40px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    position: absolute;
    right: 10px;
    top: 10px;
    background-color: var(--btn-color);
    color: var(--yellow) !important;
    transition: all 0.3s ease 0s;
  }

  dialog a.close-modal-btn:is(:hover, :focus) {
    background-color: var(--hover-btn-color);
    color: var(--btn-color) !important;
  }

  dialog a.close-modal-btn:before,
  dialog a.close-modal-btn:after {
    content: '';
    position: absolute;
    width: 55%;
    height: 2px;
    background-color: currentColor;
    top: 19px;
    left: 9px;
  }

  dialog a.close-modal-btn:before {
    transform: rotate(45deg);
  }

  dialog a.close-modal-btn:after {
    transform: rotate(-45deg);
  }

  /****** dialog end *********/

  object {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    -moz-transition: width 0.25s ease 0s;
    -o-transition: width 0.25s ease 0s;
    -webkit-transition: width 0.25s ease;
    -webkit-transition-delay: 0s;
    transition: width 0.25s ease 0s;
  }

  ::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    color: rgba(255, 255, 255, 0.8);
  }

  :-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: rgba(255, 255, 255, 0.8);
    opacity: 1;
  }

  ::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: rgba(255, 255, 255, 0.8);
    opacity: 1;
  }

  :-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: rgba(255, 255, 255, 0.8);
  }

  ::-ms-input-placeholder {
    /* Microsoft Edge */
    color: rgba(255, 255, 255, 0.8);
  }

  ::placeholder {
    /* Most modern browsers support this now. */
    color: rgba(255, 255, 255, 0.8);
  }

  input:focus::-moz-placeholder {
    color: rgba(255, 255, 255, 0.8);
  }

  input:focus:-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.8);
  }

  input:focus::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.8);
  }

  /* Chrome, Safari, Edge, Opera */
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* Firefox */
  input[type="number"] {
    -moz-appearance: textfield;
  }

  input[type="search"] {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  strong {
    font-weight: 700;
  }

  .container {
    width: 100%;
    padding: 0 var(--container-gap);
    margin: 0 auto;
    max-width: var(--container-max-width);
    -webkit-transition: padding .3s ease 0s, gap .3s ease 0s;
    transition: padding .3s ease 0s, gap .3s ease 0s;
  }
  
  #contentWrap > .container {
	max-width: var(--contentAarea-max-width);
  }

  #wrapper {
    width: 100%;
    min-width: 320px;
    /* max-width: 3000px; */
    min-height: 100vh;
    margin: 0 auto;
    position: relative;
    background: #fff;
	overflow: clip;
  }

  #wrapper.grayscale{
    filter: grayscale(1);	
  }
  
  #headerZone {
    position: sticky;
    z-index: 1001;
    width: 100%;
    top: 0;
    left: 0;
    background-color: var(--white);
    -webkit-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.1);
    -moz-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.1);
    box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.1);
	transition: background-color .3s;
  }

  #headerTop {
    max-width: var(--container-max-width);
    display: flex;
    align-items: center;
    padding: 0 var(--container-gap);
  }
  
  #logoWrap {
    /* padding: 25px 0 35px; */
	padding: 15px 0;
    /* flex: 1; */
	transition:all .3s;
  }
  
  #logoWrap a {
  }

  #logoWrap a img {
    display: block;
    width: 100%;
	height: 100%;
	max-height: 100%;
  }
  
  #headerZone.fixed #logoWrap {
	/* padding: 15px 0 25px; */
	padding: 10px 0;
  }

  #mmenuCtrl {
    display: none;
    width: 52px;
    z-index: 2000;
  }

  #mmenuCtrl a {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
  }

  #mmenuCtrl.active {
    background-color: var(--white);
    margin-left: 8px;
  }

  #mmenuCtrl a > span {
    display: block;
    width: 42px;
    height: 42px;
  }

  #mmenuCtrl a > span {
    text-indent: -9999px;
    color: #000;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: 18px;
    height: 2px;
    background-color: var(--brown);
  }

  #mmenuCtrl a > span:before,
  #mmenuCtrl a > span:after {
    content: "";
    height: 2px;
    width: 18px;
    background-color: var(--brown);
    position: absolute;
    display: block;
  }

  #mmenuCtrl a > span,
  #mmenuCtrl a > span:before,
  #mmenuCtrl a > span:after {
    transition: width 0.3s ease 0s, transform 0.3s ease 0s, color 0.3s ease 0s;
  }

  #mmenuCtrl.active a > span,
  #mmenuCtrl.active a > span:before,
  #mmenuCtrl.active a > span:after {
    background-color: #fff;
  }

  #mmenuCtrl a > span:before {
    top: -8px;
  }

  #mmenuCtrl a > span:after {
    top: 8px;
  }

  #mmenuCtrl:hover span,
  #mmenuCtrl:hover span:before,
  #mmenuCtrl:hover span:after,
  #mmenuCtrl.focus span,
  #mmenuCtrl.focus span:before,
  #mmenuCtrl.focus span:after {
    width: 24px;
  }

  #mmenuCtrl.active a > span {
    background: transparent;
    width: 24px;
  }

  #mmenuCtrl.active a > span:before,
  #mmenuCtrl.active a > span:after {
    top: 0;
    width: 24px;
    background-color: var(--brown);
  }

  #mmenuCtrl.active a > span:before {
    transform: rotate(45deg);
  }

  #mmenuCtrl.active a > span:after {
    transform: rotate(-45deg);
  }

  #topNavWrap {
    display: flex;
    justify-content: right;
    align-items: center;
	flex:1;
  }

  #topNav {
    padding-right: 6px;
    margin-right: 15px;
    position: relative;
  }

  #topNav:after {
    content: "";
    width: 1px;
    height: 15px;
    background-color: rgba(0, 0, 0, 0.15);
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
  }

  #topNav ul li {
    display: inline-block;
    position: relative;
    padding-left: 20px;
    margin-right: 10px;
  }

  #topNav ul > li:before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #7fb61c;
    z-index: 50;
  }

  #siteTools {
    position: relative;
    padding-left: 20px;
    display: flex;
    height: 100%;
  }

  /* #siteTools:after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 100%;
  } */

  #siteTools > ul {
    margin: 0;
    text-align: right;
    display: flex;
    position: relative;
    align-items: center;
    gap: 8px;
  }

  #siteTools > ul > li {
    display: flex;
    position: relative;
    line-height: 35px;
    text-align: left;
    font-size: 1em;
    height: 100%;
	align-items:center;
  }

  #siteTools > ul > li > a {
    display: flex;
    align-items: center;
    width:38px;
	height:38px;
	text-indent:-9999px;
    position: relative;
    background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:22px 22px;
	border-radius:50%;
	background-color: var(--light-grey);
	border: 1px solid var(--light-grey);
	transition: background-color .3s, border-color .3s;
  }

  #siteTools > ul > li > a:hover,
  #siteTools > ul > li > a.focus,
  #siteTools > ul > li.active > a {
	border-color: var(--btn-color);
    background-color: var(--hover-tool-menu-bg-color);
  }

  #toolLangs > a {
	  background-image:url(../images/icon-lang.svg);
  }
  #toolFontsize > a {
	  background-image:url(../images/icon-fontsize.svg);
  }
  #toolEmail > a {
	  background-image:url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20enable-background%3D%22new%200%200%2020%2020%22%20version%3D%221.1%22%20viewBox%3D%220%200%2020%2020%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M13.45%2C12.26c-.42.31-.77.56-1%2C.73a5.94%2C5.94%2C0%2C0%2C1-1.05.54%2C3.29%2C3.29%2C0%2C0%2C1-1.23.28h0a3.29%2C3.29%2C0%2C0%2C1-1.23-.28A6.07%2C6.07%2C0%2C0%2C1%2C7.83%2C13c-.26-.17-.61-.42-1-.73L6.41%2C12%2C.74%2C17.68a1.72%2C1.72%2C0%2C0%2C0%2C1.17.44H18.34a1.72%2C1.72%2C0%2C0%2C0%2C1.17-.44L13.84%2C12ZM1.25%2C8.38a5.88%2C5.88%2C0%2C0%2C1-1.12-1v8.68l5-5Q3.62%2C10%2C1.25%2C8.38Zm13.88%2C2.67%2C5%2C5V7.4a6.25%2C6.25%2C0%2C0%2C1-1.12%2C1C17.49%2C9.41%2C16.2%2C10.31%2C15.13%2C11.05ZM2.05%2C7.18l2.28%2C1.6c.69.48%2C1.29.89%2C1.8%2C1.26l1.13.79.16.12.31.22c.24.18.45.32.61.43s.35.23.58.36a3.11%2C3.11%2C0%2C0%2C0%2C.64.31%2C2%2C2%2C0%2C0%2C0%2C.56.1h0a2.07%2C2.07%2C0%2C0%2C0%2C.56-.1%2C3.37%2C3.37%2C0%2C0%2C0%2C.64-.31c.22-.13.42-.25.58-.36l.6-.43.31-.22a.91.91%2C0%2C0%2C1%2C.17-.12L14.12%2C10l4.1-2.86a5.44%2C5.44%2C0%2C0%2C0%2C1.36-1.39%2C3%2C3%2C0%2C0%2C0%2C.55-1.69%2C1.73%2C1.73%2C0%2C0%2C0-.53-1.27%2C1.76%2C1.76%2C0%2C0%2C0-1.26-.53H1.91a1.59%2C1.59%2C0%2C0%2C0-1.32.58A2.28%2C2.28%2C0%2C0%2C0%2C.13%2C4.34%2C2.62%2C2.62%2C0%2C0%2C0%2C.74%2C5.88%2C5.55%2C5.55%2C0%2C0%2C0%2C2.05%2C7.18Z%22%20fill%3D%22%239F6A26%22%2F%3E%3C%2Fsvg%3E");
  }
  #toolShare > a {
	  background-image:url(../images/icon-share.svg);
  }
  #toolSearch {
	  display:none !important;
  }
  #toolSearch > a {
	  background-image:url(../images/icon-search.svg);
  }

  #siteTools .subnav {
    position: absolute;
    background-color: var(--dark-green);
    opacity: 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    pointer-events: none;
    transition: opacity 0.3s ease 0s, transform 0.3s ease 0s;
  }
  
  #siteTools .subnav:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid var(--dark-green);
    top: -7px;
  }

  #toolSearch .subnav:before {
    right: 13px;
  }

  #siteTools .subnav a,
  #siteTools .subnav form {
    display: none;
  }

  #siteTools > ul > li.active > .subnav a,
  #siteTools > ul > li.active > .subnav form {
    display: block;
  }

  #siteTools > ul > li.active > .subnav {
    opacity: 1;
    pointer-events: visible;
    box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.2);
  }


  #toolLangs a.trigger > span,
  #toolFontsize > a > span,
  #toolShare > a > span,
  #toolSearch > a > span {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 22px 22px;
    transition: background 0.3s ease 0s;
  }

  #toolLangs .subnav,
  #toolShare .subnav {
    position: absolute;
    left: 50%;
    top: calc(100% + 10px);
    transform: translate(-50%, 10px);
    color: var(--yellow);
    padding: 15px 0;
	text-align: center;
    z-index: 1000;
  }

  #toolLangs .subnav:before,
  #toolShare .subnav:before {
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
  }

  #toolLangs.active .subnav:before,
  #toolShare.active .subnav:before {
    opacity: 1;
  }

  #toolLangs .subnav > a,
  #toolShare .subnav > a {
    padding: 0 10px;
    line-height: 40px;
  }

  #toolLangs .subnav > a.selected,
  #toolLangs .subnav > a:hover,
  #toolLangs .subnav > a.focus {
    color: #ebd639;
  }

  #toolLangs.active .subnav,
  #toolShare.active .subnav {
    opacity: 1;
    transform: translate(-50%, 0px);
  }

  /* #toolFontsize.active > a > span:after,
  #toolFontsize > a:hover > span:after,
  #toolFontsize > a.focus > span:after {
    color: var(--white)!important;
  } */

  #toolShare .subnav a {
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 20px 20px;
    text-indent: -9999px;
    width: 40px;
    color: var(--grey);
    line-height: 40px;
  }
  #toolLangs .subnav > a.selected,
  #toolLangs .subnav > a:hover,
  #toolLangs .subnav > a.focus,
  #toolShare .subnav > a.selected,
  #toolShare .subnav > a:hover,
  #toolShare .subnav > a.focus {
    color: var(--dark-green);
    background-color: var(--yellow);
  }
  #toolShare .subnav a.btnEmail {
    background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20enable-background%3D%22new%200%200%2020%2020%22%20version%3D%221.1%22%20viewBox%3D%220%200%2020%2020%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M13.45%2C12.26c-.42.31-.77.56-1%2C.73a5.94%2C5.94%2C0%2C0%2C1-1.05.54%2C3.29%2C3.29%2C0%2C0%2C1-1.23.28h0a3.29%2C3.29%2C0%2C0%2C1-1.23-.28A6.07%2C6.07%2C0%2C0%2C1%2C7.83%2C13c-.26-.17-.61-.42-1-.73L6.41%2C12%2C.74%2C17.68a1.72%2C1.72%2C0%2C0%2C0%2C1.17.44H18.34a1.72%2C1.72%2C0%2C0%2C0%2C1.17-.44L13.84%2C12ZM1.25%2C8.38a5.88%2C5.88%2C0%2C0%2C1-1.12-1v8.68l5-5Q3.62%2C10%2C1.25%2C8.38Zm13.88%2C2.67%2C5%2C5V7.4a6.25%2C6.25%2C0%2C0%2C1-1.12%2C1C17.49%2C9.41%2C16.2%2C10.31%2C15.13%2C11.05ZM2.05%2C7.18l2.28%2C1.6c.69.48%2C1.29.89%2C1.8%2C1.26l1.13.79.16.12.31.22c.24.18.45.32.61.43s.35.23.58.36a3.11%2C3.11%2C0%2C0%2C0%2C.64.31%2C2%2C2%2C0%2C0%2C0%2C.56.1h0a2.07%2C2.07%2C0%2C0%2C0%2C.56-.1%2C3.37%2C3.37%2C0%2C0%2C0%2C.64-.31c.22-.13.42-.25.58-.36l.6-.43.31-.22a.91.91%2C0%2C0%2C1%2C.17-.12L14.12%2C10l4.1-2.86a5.44%2C5.44%2C0%2C0%2C0%2C1.36-1.39%2C3%2C3%2C0%2C0%2C0%2C.55-1.69%2C1.73%2C1.73%2C0%2C0%2C0-.53-1.27%2C1.76%2C1.76%2C0%2C0%2C0-1.26-.53H1.91a1.59%2C1.59%2C0%2C0%2C0-1.32.58A2.28%2C2.28%2C0%2C0%2C0%2C.13%2C4.34%2C2.62%2C2.62%2C0%2C0%2C0%2C.74%2C5.88%2C5.55%2C5.55%2C0%2C0%2C0%2C2.05%2C7.18Z%22%20fill%3D%22%23FFFCA6%22%2F%3E%3C%2Fsvg%3E");
  }
  #toolShare .subnav a.btnEmail:hover,
  #toolShare .subnav a.btnEmail.focus {
    background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20enable-background%3D%22new%200%200%2020%2020%22%20version%3D%221.1%22%20viewBox%3D%220%200%2020%2020%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M13.45%2C12.26c-.42.31-.77.56-1%2C.73a5.94%2C5.94%2C0%2C0%2C1-1.05.54%2C3.29%2C3.29%2C0%2C0%2C1-1.23.28h0a3.29%2C3.29%2C0%2C0%2C1-1.23-.28A6.07%2C6.07%2C0%2C0%2C1%2C7.83%2C13c-.26-.17-.61-.42-1-.73L6.41%2C12%2C.74%2C17.68a1.72%2C1.72%2C0%2C0%2C0%2C1.17.44H18.34a1.72%2C1.72%2C0%2C0%2C0%2C1.17-.44L13.84%2C12ZM1.25%2C8.38a5.88%2C5.88%2C0%2C0%2C1-1.12-1v8.68l5-5Q3.62%2C10%2C1.25%2C8.38Zm13.88%2C2.67%2C5%2C5V7.4a6.25%2C6.25%2C0%2C0%2C1-1.12%2C1C17.49%2C9.41%2C16.2%2C10.31%2C15.13%2C11.05ZM2.05%2C7.18l2.28%2C1.6c.69.48%2C1.29.89%2C1.8%2C1.26l1.13.79.16.12.31.22c.24.18.45.32.61.43s.35.23.58.36a3.11%2C3.11%2C0%2C0%2C0%2C.64.31%2C2%2C2%2C0%2C0%2C0%2C.56.1h0a2.07%2C2.07%2C0%2C0%2C0%2C.56-.1%2C3.37%2C3.37%2C0%2C0%2C0%2C.64-.31c.22-.13.42-.25.58-.36l.6-.43.31-.22a.91.91%2C0%2C0%2C1%2C.17-.12L14.12%2C10l4.1-2.86a5.44%2C5.44%2C0%2C0%2C0%2C1.36-1.39%2C3%2C3%2C0%2C0%2C0%2C.55-1.69%2C1.73%2C1.73%2C0%2C0%2C0-.53-1.27%2C1.76%2C1.76%2C0%2C0%2C0-1.26-.53H1.91a1.59%2C1.59%2C0%2C0%2C0-1.32.58A2.28%2C2.28%2C0%2C0%2C0%2C.13%2C4.34%2C2.62%2C2.62%2C0%2C0%2C0%2C.74%2C5.88%2C5.55%2C5.55%2C0%2C0%2C0%2C2.05%2C7.18Z%22%20fill%3D%22%23016936%22%2F%3E%3C%2Fsvg%3E");
  }
  #toolShare .subnav a.btnWhatsapp {
    background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20enable-background%3D%22new%200%200%2050%2050%22%20version%3D%221.1%22%20viewBox%3D%220%200%2050%2050%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23FFFCA6%22%20class%3D%22st0%22%20d%3D%22M40.5%2C9.5c-4.1-4.1-9.6-6.4-15.4-6.4c-12%2C0-21.7%2C9.7-21.7%2C21.7c0%2C3.8%2C1%2C7.6%2C2.9%2C10.9L3.2%2C46.9l11.5-3c3.2%2C1.7%2C6.7%2C2.6%2C10.4%2C2.6h0c12%2C0%2C21.7-9.7%2C21.7-21.7C46.8%2C19%2C44.6%2C13.6%2C40.5%2C9.5zM25.1%2C42.9L25.1%2C42.9c-3.2%2C0-6.4-0.9-9.2-2.5L15.2%2C40l-6.8%2C1.8l1.8-6.7l-0.4-0.7C8%2C31.5%2C7%2C28.2%2C7%2C24.8c0-9.9%2C8.1-18%2C18.1-18c4.8%2C0%2C9.4%2C1.9%2C12.8%2C5.3s5.3%2C7.9%2C5.3%2C12.8C43.1%2C34.8%2C35%2C42.9%2C25.1%2C42.9z%22%2F%3E%3Cpath%20fill%3D%22%23FFFCA6%22%20class%3D%22st0%22%20d%3D%22M36%2C30c-0.1-0.2-0.5-0.4-1-0.6c-0.5-0.3-3.2-1.6-3.7-1.8c-0.5-0.2-0.9-0.3-1.2%2C0.3c-0.4%2C0.5-1.4%2C1.8-1.7%2C2.1c-0.3%2C0.4-0.6%2C0.4-1.2%2C0.1c-0.5-0.3-2.3-0.8-4.4-2.7c-1.6-1.4-2.7-3.2-3-3.8c-0.3-0.5%2C0-0.8%2C0.2-1.1c0.6-0.7%2C1.2-1.5%2C1.4-1.9c0.2-0.4%2C0.1-0.7%2C0-1c-0.1-0.3-1.2-2.9-1.7-4c-0.4-1.1-0.9-0.9-1.2-0.9c-0.3%2C0-0.7%2C0-1%2C0c-0.4%2C0-0.9%2C0.1-1.4%2C0.7c-0.5%2C0.5-1.9%2C1.9-1.9%2C4.5c0%2C2.7%2C1.9%2C5.2%2C2.2%2C5.6c0.3%2C0.4%2C3.8%2C5.8%2C9.3%2C8.2c1.3%2C0.6%2C2.3%2C0.9%2C3.1%2C1.1c1.3%2C0.4%2C2.5%2C0.4%2C3.4%2C0.2c1-0.2%2C3.2-1.3%2C3.7-2.6C36.2%2C31.3%2C36.2%2C30.2%2C36%2C30z%22%2F%3E%3C%2Fsvg%3E");
  }
  #toolShare .subnav a.btnWhatsapp:hover,
  #toolShare .subnav a.btnWhatsapp.focus {
    background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20enable-background%3D%22new%200%200%2050%2050%22%20version%3D%221.1%22%20viewBox%3D%220%200%2050%2050%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23016936%22%20class%3D%22st0%22%20d%3D%22M40.5%2C9.5c-4.1-4.1-9.6-6.4-15.4-6.4c-12%2C0-21.7%2C9.7-21.7%2C21.7c0%2C3.8%2C1%2C7.6%2C2.9%2C10.9L3.2%2C46.9l11.5-3c3.2%2C1.7%2C6.7%2C2.6%2C10.4%2C2.6h0c12%2C0%2C21.7-9.7%2C21.7-21.7C46.8%2C19%2C44.6%2C13.6%2C40.5%2C9.5zM25.1%2C42.9L25.1%2C42.9c-3.2%2C0-6.4-0.9-9.2-2.5L15.2%2C40l-6.8%2C1.8l1.8-6.7l-0.4-0.7C8%2C31.5%2C7%2C28.2%2C7%2C24.8c0-9.9%2C8.1-18%2C18.1-18c4.8%2C0%2C9.4%2C1.9%2C12.8%2C5.3s5.3%2C7.9%2C5.3%2C12.8C43.1%2C34.8%2C35%2C42.9%2C25.1%2C42.9z%22%2F%3E%3Cpath%20fill%3D%22%23016936%22%20class%3D%22st0%22%20d%3D%22M36%2C30c-0.1-0.2-0.5-0.4-1-0.6c-0.5-0.3-3.2-1.6-3.7-1.8c-0.5-0.2-0.9-0.3-1.2%2C0.3c-0.4%2C0.5-1.4%2C1.8-1.7%2C2.1c-0.3%2C0.4-0.6%2C0.4-1.2%2C0.1c-0.5-0.3-2.3-0.8-4.4-2.7c-1.6-1.4-2.7-3.2-3-3.8c-0.3-0.5%2C0-0.8%2C0.2-1.1c0.6-0.7%2C1.2-1.5%2C1.4-1.9c0.2-0.4%2C0.1-0.7%2C0-1c-0.1-0.3-1.2-2.9-1.7-4c-0.4-1.1-0.9-0.9-1.2-0.9c-0.3%2C0-0.7%2C0-1%2C0c-0.4%2C0-0.9%2C0.1-1.4%2C0.7c-0.5%2C0.5-1.9%2C1.9-1.9%2C4.5c0%2C2.7%2C1.9%2C5.2%2C2.2%2C5.6c0.3%2C0.4%2C3.8%2C5.8%2C9.3%2C8.2c1.3%2C0.6%2C2.3%2C0.9%2C3.1%2C1.1c1.3%2C0.4%2C2.5%2C0.4%2C3.4%2C0.2c1-0.2%2C3.2-1.3%2C3.7-2.6C36.2%2C31.3%2C36.2%2C30.2%2C36%2C30z%22%2F%3E%3C%2Fsvg%3E");
  }

  #toolSearch .searchForm {
    position: absolute;
    right: 0;
    top: 100%;
    width: 360px;
    background-color: var(--dark-green);
    padding: 15px;
    color: #262626;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    transform: translateY(10px);
    z-index: 1000;
    transition: opacity 0.3s ease 0s, transform 0.3s ease 0s;
  }

  #toolSearch.active .searchForm {
    opacity: 1;
    transform: translateY(10px);
  }  

  #toolSearch .searchForm form .inputWrap {
    position: relative;
  }

  #toolSearch .searchForm form .inputWrap label {
    position: absolute;
    left: 0;
    top: 0;
  }

  #toolSearch .searchForm form .inputWrap input {
    height: 40px;
    color: var(--yellow);
    padding: 0 22px 0 0;
    width: 100%;
    display: inline-block;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    transition: border-bottom-color 0.3s ease 0s;
    background: transparent;
	outline-color: var(--white);
  }

  #toolSearch .searchForm form .inputWrap input:focus {
    border-bottom: 1px solid rgba(255, 255, 255, 1);
  }

  #toolSearch .searchForm .btnSearch {
    position: absolute;
    text-align: left;
    width: 22px;
    height: 100%;
    color: #fff;
    display: block;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    text-indent: -9999px;
  }

  #toolSearch .searchForm .btnSearch:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    border-right: 1px solid var(--yellow);
    border-bottom: 1px solid var(--yellow);
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  #toolSearch .searchForm .advSearch {
    text-align: right;
    margin-top: 5px;
  }

  #toolSearch .searchForm .advSearch a {
    color: #fff;
  }

  #toolSearch .searchForm .advSearch a:hover {
    text-decoration: underline;
  }

  /* #toolShare .shareWrap {
    left: 0;
    position: absolute;
  }

  #toolShare.active .shareWrap {
    display: block;
  }

  #toolShare .shareWrap > ul {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease 0s;
  }

  #toolShare.active .shareWrap > ul {
    max-height: 260px;
  }

  #toolShare.active .shareWrap > ul li:first-child {
    border: none;
  }

  #toolShare.active .shareWrap > ul li {
    border-top: 1px solid #fff;
    line-height: 30px;
  }

  #toolShare.active .shareWrap > ul a {
    color: #03563e;
    padding: 10px 10px 10px 40px;
    position: relative;
    display: block;
    background-position: 15px 50%;
    background-repeat: no-repeat;
    background-size: 18px 18px;
    transition: background-color 0.3s ease 0s, color 0.3s ease 0s;
  } */

  #mobileMenu .shareWrap {
    padding: 20px 15px;
    display: grid;
    gap: 15px;
    align-items: flex-start;
    grid-template-columns: max-content auto;
    transition: padding .3s;
  }

  #mobileMenu .shareWrap .txt {
    line-height: 2.22em;
    position: relative;
    color: var(--dark-green3);
	
	display: none;
  }

  #mobileMenu .shareWrap > div.socialmedia{
    display: grid;
    gap: 10px 20px;
    justify-content: flex-start;
    grid-template-columns: repeat(auto-fit, minmax(50px, auto));
  }

  #mobileMenu .socialmedia > a {
    padding-left: 30px;
    line-height: 2.5em;
    color: var(--dark-green3);
    display: inline-block;
    position: relative;
  }
  #mobileMenu .socialmedia > a:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    background-position: 0 50%;
    background-repeat: no-repeat;
    background-size: 20px 20px;
  }
  #mobileMenu .socialmedia > a.btnEmail:before {
    background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20enable-background%3D%22new%200%200%2020%2020%22%20version%3D%221.1%22%20viewBox%3D%220%200%2020%2020%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M13.45%2C12.26c-.42.31-.77.56-1%2C.73a5.94%2C5.94%2C0%2C0%2C1-1.05.54%2C3.29%2C3.29%2C0%2C0%2C1-1.23.28h0a3.29%2C3.29%2C0%2C0%2C1-1.23-.28A6.07%2C6.07%2C0%2C0%2C1%2C7.83%2C13c-.26-.17-.61-.42-1-.73L6.41%2C12%2C.74%2C17.68a1.72%2C1.72%2C0%2C0%2C0%2C1.17.44H18.34a1.72%2C1.72%2C0%2C0%2C0%2C1.17-.44L13.84%2C12ZM1.25%2C8.38a5.88%2C5.88%2C0%2C0%2C1-1.12-1v8.68l5-5Q3.62%2C10%2C1.25%2C8.38Zm13.88%2C2.67%2C5%2C5V7.4a6.25%2C6.25%2C0%2C0%2C1-1.12%2C1C17.49%2C9.41%2C16.2%2C10.31%2C15.13%2C11.05ZM2.05%2C7.18l2.28%2C1.6c.69.48%2C1.29.89%2C1.8%2C1.26l1.13.79.16.12.31.22c.24.18.45.32.61.43s.35.23.58.36a3.11%2C3.11%2C0%2C0%2C0%2C.64.31%2C2%2C2%2C0%2C0%2C0%2C.56.1h0a2.07%2C2.07%2C0%2C0%2C0%2C.56-.1%2C3.37%2C3.37%2C0%2C0%2C0%2C.64-.31c.22-.13.42-.25.58-.36l.6-.43.31-.22a.91.91%2C0%2C0%2C1%2C.17-.12L14.12%2C10l4.1-2.86a5.44%2C5.44%2C0%2C0%2C0%2C1.36-1.39%2C3%2C3%2C0%2C0%2C0%2C.55-1.69%2C1.73%2C1.73%2C0%2C0%2C0-.53-1.27%2C1.76%2C1.76%2C0%2C0%2C0-1.26-.53H1.91a1.59%2C1.59%2C0%2C0%2C0-1.32.58A2.28%2C2.28%2C0%2C0%2C0%2C.13%2C4.34%2C2.62%2C2.62%2C0%2C0%2C0%2C.74%2C5.88%2C5.55%2C5.55%2C0%2C0%2C0%2C2.05%2C7.18Z%22%20fill%3D%22%23378500%22%2F%3E%3C%2Fsvg%3E");
  }

  #mobileMenu .socialmedia > a.btnWhatsapp:before {
    background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20enable-background%3D%22new%200%200%2050%2050%22%20version%3D%221.1%22%20viewBox%3D%220%200%2050%2050%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23A6CF4D%22%20class%3D%22st0%22%20d%3D%22M40.5%2C9.5c-4.1-4.1-9.6-6.4-15.4-6.4c-12%2C0-21.7%2C9.7-21.7%2C21.7c0%2C3.8%2C1%2C7.6%2C2.9%2C10.9L3.2%2C46.9l11.5-3c3.2%2C1.7%2C6.7%2C2.6%2C10.4%2C2.6h0c12%2C0%2C21.7-9.7%2C21.7-21.7C46.8%2C19%2C44.6%2C13.6%2C40.5%2C9.5zM25.1%2C42.9L25.1%2C42.9c-3.2%2C0-6.4-0.9-9.2-2.5L15.2%2C40l-6.8%2C1.8l1.8-6.7l-0.4-0.7C8%2C31.5%2C7%2C28.2%2C7%2C24.8c0-9.9%2C8.1-18%2C18.1-18c4.8%2C0%2C9.4%2C1.9%2C12.8%2C5.3s5.3%2C7.9%2C5.3%2C12.8C43.1%2C34.8%2C35%2C42.9%2C25.1%2C42.9z%22%2F%3E%3Cpath%20fill%3D%22%23A6CF4D%22%20class%3D%22st0%22%20d%3D%22M36%2C30c-0.1-0.2-0.5-0.4-1-0.6c-0.5-0.3-3.2-1.6-3.7-1.8c-0.5-0.2-0.9-0.3-1.2%2C0.3c-0.4%2C0.5-1.4%2C1.8-1.7%2C2.1c-0.3%2C0.4-0.6%2C0.4-1.2%2C0.1c-0.5-0.3-2.3-0.8-4.4-2.7c-1.6-1.4-2.7-3.2-3-3.8c-0.3-0.5%2C0-0.8%2C0.2-1.1c0.6-0.7%2C1.2-1.5%2C1.4-1.9c0.2-0.4%2C0.1-0.7%2C0-1c-0.1-0.3-1.2-2.9-1.7-4c-0.4-1.1-0.9-0.9-1.2-0.9c-0.3%2C0-0.7%2C0-1%2C0c-0.4%2C0-0.9%2C0.1-1.4%2C0.7c-0.5%2C0.5-1.9%2C1.9-1.9%2C4.5c0%2C2.7%2C1.9%2C5.2%2C2.2%2C5.6c0.3%2C0.4%2C3.8%2C5.8%2C9.3%2C8.2c1.3%2C0.6%2C2.3%2C0.9%2C3.1%2C1.1c1.3%2C0.4%2C2.5%2C0.4%2C3.4%2C0.2c1-0.2%2C3.2-1.3%2C3.7-2.6C36.2%2C31.3%2C36.2%2C30.2%2C36%2C30z%22%2F%3E%3C%2Fsvg%3E");
  }

  #mainNavWrap {
    position: relative;
    background-color: var(--primary-light);
    z-index: 500;
  }

  #mainNav > ul {
    position: relative;
    z-index: 100;
    display: flex;
    justify-content: center;
  }

  #mainNav > ul > li {
    position: relative;
    text-align: center;
  }

  /* #mainNav > ul > li:after {
    content: "";
    background-color: #dcf0f0;
    width: 1px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
  }

  #mainNav > ul > li:first-child:before {
    content: "";
    background-color: #dcf0f0;
    width: 1px;
    height: 100%;
    position: absolute;
    top: 0;
    left: -1px;
  } */

  #mainNav > ul > li > a {
    color: var(--dark-green);
    display: flex;
    align-items: center;
    position: relative;
    height: 100%;
    padding: 0 28px;
    width: 100%;
    /* min-height: 50px; */
    transition: padding 0.3s ease 0s, color 0.3s ease 0s,
      background-color 0.3s ease 0s;
  }

  #mainNav > ul > li > a > span {
	position:relative;
    text-align: center;
    width: 100%;
    font-size: 1.1111em;
	line-height: 1;
    padding: 2px 0;
  }
  
  #mainNav > ul > li > a > span:before {
	content: '';
	position: absolute;
	bottom: 0;
	left:50%;
	transform: translateX(-50%);
	width: 0;
	height:1px;
	background-color: var(--hover-menu-color);
	transition: width .3s;
  }
  
  #mainNav > ul > li > a > span:after {
    content: "";
    height: 8px;
    width: 8px;
    display: block;
    border: 2px solid var(--hover-menu-color);
    border-left-width: 0;
    border-bottom-width: 0;
    transform-origin: center center;
    transform: rotate(-45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: -20px;
    /* margin-top: -2px; */
    transition: all .3s;	
  }

  #mainNav > ul > li.selected > a,
  #mainNav > ul > li.active > a,
  #mainNav > ul > li > a:hover,
  #mainNav > ul > li > a.focus {
    /* background-color: var(--primary-blue); */
	color: var(--hover-menu-color);
  }
  
  #mainNav > ul > li > a:hover > span:before,
  #mainNav > ul > li > a.focus > span:before {
	 width:100%;
  }
  
  #mainNav > ul > li > a:hover > span:after,
  #mainNav > ul > li > a.focus > span:after {
	  /* transform-origin: left top; */
	  margin-top: -5px;
	  right: -17px;
	 transform: rotate(135deg);
  }

  #mainNav > ul > li > .subnav {
    position: absolute;
    /* left: 0; */
	left: 28px;
    top: 100%;
    pointer-events: none;
  }

  /* #mainNav > ul > li > a > span:before {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    height: 0;
    width: 0;
    display: block;
    border: 7px transparent solid;
    border-bottom-color: #fff;
    border-top-width: 0;
    opacity: 0;
    transition: opacity 0.3s ease 0s;
  }

  #mainNav > ul > li.active > a > span:before {
    opacity: 1;
  } */

  #mainNav > ul > li.active > .subnav {
    pointer-events: visible;
  }

  #mainNav > ul > li > .subnav.alignRight {
    left: inherit;
    right: 0;
  }

  #mainNav > ul > li > .subnav > ul {
    width: 240px;
    opacity: 0;
    transform: translate(0, 20px);
    transition: opacity 0.3s ease 0s, transform 0.3s ease 0s;
  }

  #mainNav > ul > li.active > .subnav > ul {
    opacity: 1;
    transform: translate(0, 10px);
  }

  #mainNav .subnav > ul > li {
    border-bottom: 1px solid rgba(2, 92, 88, 0.5);
    position: relative;
  }

  #mainNav .subnav > ul > li:last-child {
    border-bottom: none;
  }

  #mainNav > ul > li > .subnav > ul > li > a {
    background-color: var(--dark-green);
  }

  #mainNav > ul > li > .subnav > ul > li.active > a,
  #mainNav > ul > li > .subnav > ul > li.selected > a,
  #mainNav > ul > li > .subnav > ul > li > a:hover,
  #mainNav > ul > li > .subnav > ul > li > a:focus {
    background-color: var(--yellow);
  }

  #mainNav > ul > li > .subnav > ul > li:first-child {
    border-top: none;
  }

  #mainNav .subnav > ul > li > a {
    position: relative;
    display: block;
    padding: 12px 15px;
    text-align: left;
    color: var(--yellow);
    line-height: 1.33em;
    transition: background-color 0.3s ease 0s, color 0.3s ease 0s;
  }

  #mainNav .subnav > ul > li.active > a,
  #mainNav .subnav > ul > li.selected > a,
  #mainNav .subnav > ul > li > a:hover,
  #mainNav .subnav > ul > li > a.focus {
    color: var(--dark-green);
  }

  #mainNav .subnav > ul > li.selected > a:before,
  #mainNav .subnav > ul > li > a:hover:before,
  #mainNav .subnav > ul > li > a.focus:before {
    opacity: 1;
    height: 100%;
  }

  #mainNav > ul > li.hasSubnav > .subnav > ul > li.hasSubnav > a:before {
    content: "";
    width: 8px;
    height: 8px;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%) rotate(-45deg);
    display: block;
    border: 2px solid #fff;
    border-left-width: 0;
    border-top-width: 0;
    transition: transform 0.3s ease 0s;
  }

  #mainNav > ul > li.hasSubnav > .subnav > ul > li.hasSubnav:hover > a:before {
    border-color: #ebd639;
  }

  #mainNav > ul > li.hasSubnav > .subnav > ul > li.hasSubnav:hover > .subnav,
  #mainNav > ul > li.hasSubnav > .subnav > ul > li.hasSubnav > a.focus + .subnav,
  #mainNav > ul > li.hasSubnav > .subnav > ul > li.hasSubnav.active > a + .subnav {
    opacity: 1;
    pointer-events: visible;
  }

  #mainNav > ul > li.hasSubnav > .subnav > ul > li.hasSubnav > .subnav > ul > li > a {
    background-color: #004277;
  }

  #mainNav > ul > li.hasSubnav > .subnav > ul > li.hasSubnav > .subnav > ul > li > a:hover,
  #mainNav > ul > li.hasSubnav > .subnav > ul > li.hasSubnav > .subnav > ul > li > a.focus {
    background-color: #00355f;
  }

  /*mainNav css ends*/
  
  
  #logoWrap{
	  height:var(--page-header-height);
  }
  
  #headerZone.fixed #logoWrap{
	  height:var(--fixed-page-header-height);
  }

  #mainZone {
    position: relative;
    background: #fff;
  }

  #footerZone {
    position: relative;
    background-color: #fff;
	border-top: 3px solid var(--light-green);
	z-index:10;
	box-shadow: 0px -8px 10px 0px rgba(50, 50, 50, 0.1);
  }
  
  #footerLink {
	  display:none;
	  padding-top:40px;
	  padding-bottom:40px;
	  border-bottom:2px dotted #A6A6A6;
  }
  
  #footerLink > * {
	  display:grid;
	  gap:25px 20px;
	  grid-template-columns:50% 50%;
  }
  
  #footerLink a {
	  position:relative;
	  font-size:1.444em;
	  font-weight:500;
	  padding-left:25px;
	  color:var(--dark-green);
	  transition:color .3s;
  }
  
  #footerLink a:hover,
  #footerLink a.focus {
	  color:var(--orange);
	  text-decoration:underline;
  }
  
  #footerLink a:before {
	content:'';
	position:absolute;
	display:block;
	width:10px;
	height:10px;
	border:2px solid var(--light-green);
	border-left-width: 0;
	border-bottom-width: 0;
	transform: rotate(45deg);
	top:0.385em;
	left:-5px;
  }

  #footerMain {
    /* display: flex;
    justify-content: space-between;
    align-items: center; */
    padding-top: 30px;
	padding-bottom: 40px;
    /* gap: 10px 15px; */
    color: #333;
    /* font-size: 0.833em; */
  }
  
  #footerTop,
  #footerBottom {
	display: flex;
	justify-content: space-between;
  }
  
  #footerTop {
	gap:0 20px;
	padding-bottom:30px;
	border-bottom:1px solid #E9E0BF;
	color:#000;
  }
  
  #footerTop>.left {
	display:flex;
	gap:0 50px;
  }
  
  #footerTop>.left>*:not(.icon-wrap) {
	display:inline-flex;
	align-items:center;
  }
  #footerTop>.left>*:not(.icon-wrap) img {
	height:90px;
  }
  #footerTop>.left .icon-wrap {
	display:inline-flex;
	align-items:center;
	gap:0 15px;
	font-size:1.222em;
	font-weight:700;
  }
  
  #footerTop>.left .icon-wrap img {
	width:90px;
	display:block;
  }
  
  #footerTop>.right {
	display:flex;
	align-items:center;
	gap:0 20px;
  }

  #footerTop>.right>*:nth-child(1) img{
	width:125px;
  }
  
  #footerTop>.right>*:nth-child(2) img{
	width:165px;
  }
  
  #footerBottom {
	padding-top:30px;
	justify-content:space-between;
	gap:0 20px;
  }
  
  #footerBottom>.left ul>li {
	position:relative;
	display:inline-block;
	margin-right:30px;
	padding-left:20px;
  }
  
  #footerBottom>.left ul>li:last-child {
	margin-right:0;
  }
  
  #footerBottom>.left ul>li:before {
	content:'';
	position:absolute;
	width:5px;
	height:5px;
	border-radius:50%;
	background-color:var(--light-green);
	left:5px;
	top:0.4em;
  }
  
  #footerBottom>.left ul>li>a {
	font-size:1.067em;
	font-weight:500;
    border-bottom: 1px solid transparent;
    transition: color 0.25s ease 0s, border-color 0.25s ease 0s;
  }
  
  #footerBottom>.left ul>li>a:is(:hover, .focus) {
	color: var(--orange);
	border-bottom-color: var(--orange);
  }
  
  #footerBottom>.left p {
	font-size:0.889em;
	margin:10px 0 0 0;
  }
  
  #footerBottom>.right {
	font-size:0.889em;
	align-self:flex-end;
  }
  
  /* #footerLeft{
    flex: 1 1 auto;
  }
  
  #footerLeft>*{
	display:inline-grid;
	column-gap:30px;
	align-items:center;
  }
  
  #footerIcon {
	grid-area: afcdIcon;
  }
  #footerIcon img{
	 width:90px;
	 display:block;
  }
  #footerNav {
	grid-area: footerNav;
    display: grid;
    gap: 10px 20px;
    margin-bottom: 10px;
	grid-template-columns: repeat(4, auto);
	align-self:flex-end;
	justify-content:flex-start;
	font-size:1.133em;
  }
  #footerNav a {
    position: relative;
  }

  #footerNav a:not(:first-child):before {
    content: "";
    background-color: rgba(0, 0, 0, 0.15);
    width: 1px;
    height: 14px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -10px;
  }

  #footerNav a {
    border-bottom: 1px solid transparent;
    transition: color 0.25s ease 0s, border-color 0.25s ease 0s;
  }
  #footerNav a:hover{
    color: var(--orange);
	border-bottom-color: var(--orange);
  }

  #footerCopyright{
	grid-area: footerCopyright;
    display: grid;
	gap: 5px;
    align-items: flex-start;
  }

  #footerCopyright > div {
    position: relative;
    color: #000;
  }

  #footerRight {
    flex: 1 1 auto;
	display: flex;
    gap: 10px 20px;
    align-items: center;
    justify-content: flex-end;
  }

  #footerRight a {
    line-height: 0;
  }
  
  #footerRight *:nth-child(1) img{
	  width:125px;
  } */
  
  #footerRight *:nth-child(2) img{
	  width:165px;
  }
  
  
  
/* updated footer */

#footerWrap{
	color: #333;
}
#footerWrap a{
  color: #333;
  display: inline-block;
}
#topFooter, #btmFooter{
  display: flex;
  padding: 25px 0;
  border-bottom: 1px solid #E9E0BF;
  align-items: center;
}
#btmFooter{
  border-bottom: 0;
}
#topFooter .link, #btmFooter #leftFooter{
  flex: 1 1 auto;
}
#topFooter .link a{
  /* font-size:1.067em; */
  font-weight: 500;
  color: #333;
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease 0s, border-color 0.25s ease 0s;
  margin-right: 40px;
}
#topFooter .link a:is(:hover, .focus){
	color: var(--orange);
	border-bottom-color: var(--orange);
}
#topFooter #socialLink, #btmFooter #accessIcon{
  font-weight: 700;
  display: flex;
  align-items: center;
  color: #333;
}
/* #topFooter #socialLink span{
  margin-right: 10px;
}
#topFooter #socialLink a{
  display: inline-block;
  margin-left: 15px;
  color: #fff;
  position: relative;
  line-height: 40px;
  padding-left: 55px;
  padding-right: 15px;
  height: 40px;
  border-radius: 10px;
  overflow: hidden;
}
#topFooter #socialLink a:before{
	content: '';
	position: absolute;
	width: 40px;
	height: 40px;
	left: 0;
	top: 0;
	background-size: 40px 40px;
	transition: background-color 0.25s ease 0s;
}
#topFooter #socialLink a.fb, #topFooter #socialLink a.fb:hover:before,
#topFooter #socialLink a.fb, #topFooter #socialLink a.fb:focus:before{
	background-color: #1465CE;
}
#topFooter #socialLink a.fb:before{
  background-image: url(../images/footer-icon-facebook.svg);
  background-color: #2272EF;
}
#topFooter #socialLink a.youtube, #topFooter #socialLink a.youtube:hover:before{
	background-color: #D80001;
}
#topFooter #socialLink a.youtube:before{
  background-image: url(../images/footer-icon-youtube.svg);
  background-color: #FD0000;
} */
#btmFooter #leftFooter{
  display: flex;
}
#leftFooter .footerLogo {
    width: 50px;
    line-height: 0;
}
#leftFooter .footerLogo a{
	position: relative;
}
/* #leftFooter .footerLogo a:focus:before{
	content: '';
    border: 2px solid #00988C;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    position: absolute;
    top: -5px;
    left: -5px;
    opacity: 1;
} */
#leftFooter .footerLogo img, #btmFooter #accessIcon a#brandHK img{
  width: 100%;
}
#btmFooter #copyright{
  padding-left: 20px;
  font-size: 0.889em;
}
#btmFooter #copyright div:first-child{
  margin-bottom: 5px;
}
#btmFooter #accessIcon a{
  display: block;
  line-height: 0;
  margin-left: 30px;
  position: relative;
}
/* #btmFooter #accessIcon a:before{
	content: '';
    border: 5px solid transparent;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    position: absolute;
    top: -5px;
    left: -5px;
    opacity: 1;
}
#btmFooter #accessIcon a:focus:before{
	border-color: #00988C;
} */
#btmFooter #accessIcon a:first-child{
  margin-left: 0!important;
}
#btmFooter #accessIcon a#brandHK {
    width: 145px;
}

/* updated footer */

  /*mobile menu css starts*/
  #mobileBgLayer {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.5;
    z-index: 998;
    left: 0;
    top: 0;
  }

  #mobileNavWrap {
    position: fixed;
    width: 100%;
    height: calc(100% - 80px);
    top: -100%;
    opacity: 1;
    z-index: 999;
    display: none;
    background: var(--white);
    transition: top 0.5s ease 0s;
  }

  .showMMenu #mobileNavWrap {
    display: block;
  }

  #mobileNavWrap.show {
    top: 80px;
  }

  #mobileNav {
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    height: 100%;
  }

  #mobileMenu {
    padding: 1.666em;
    transition: padding .3s ease 0s;
  }

  #mobileMenu a {
    font-size: 0.889em;
    line-height: 1em;
  }

  #mainNav_m > ul > li > a:not(.arrow) {
    padding: 15px 0;
    display: inline-block;
    position: relative;
  }

  #mainNav_m .hasSubnav {
    position: relative;
  }

  #mainNav_m .hasSubnav > button {
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    top: 3px;
    right: 0px;
    text-indent: -9999px;
    cursor: pointer;
  }

  #mainNav_m .hasSubnav.selected > button {
    display: none;
  }

  #mainNav_m > ul > li.hasSubnav.active > button {
    top: 5px;
  }

  #mainNav_m > ul > li.hasSubnav > a {
    padding: 15px 40px 15px 0;
    position: relative;
  }

  #mainNav_m li.hasSubnav > button:before,
  #mainNav_m li.hasSubnav > button:after {
    content: "";
    display: block;
    background-color: var(--light-green);
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center center;
    transition: background-color 0.3s ease 0s, transform 0.3s ease 0s;
  }

  #mainNav_m li.hasSubnav > button:before {
    height: 14px;
    width: 2px;
    margin-top: -7px;
    margin-left: -1px;
  }

  #mainNav_m li.hasSubnav > button:after {
    height: 2px;
    width: 14px;
    margin-top: -1px;
    margin-left: -7px;
  }

  #mainNav_m li.hasSubnav.active > button:before {
    transform: rotate(90deg);
  }
  #mainNav_m li.hasSubnav.active > button:before,
  #mainNav_m li.hasSubnav.active > button:after {
    background-color: var(--light-green);
  }

  #mainNav_m > ul > li.hasSubnav.selected > .subnav > ul {
    max-height: 1000px;
  }

  #mainNav_m > ul > li > .subnav > ul {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease 0s;
  }

  #mainNav_m > ul > li.hasSubnav.active > .subnav > ul {
    max-height: 1000px;
  }
  #mainNav_m > ul > li > .subnav > ul > li {
    margin-bottom: 1px;
  }
  #mainNav_m .subnav > ul > li:last-child {
    margin-bottom: 10px;
  }

  #mainNav_m > ul > li > .subnav > ul > li > a {
    padding: 15px 30px 15px 12px;
    display: block;
    position: relative;
  }

  #mainNav_m > ul > li > .subnav > ul > li.hasSubnav > button:before,
  #mainNav_m > ul > li > .subnav > ul > li.hasSubnav > button:after {
    background-color: #262626;
  }

  #mainNav_m > ul > li > .subnav > ul > li.hasSubnav.active > a:before,
  #mainNav_m > ul > li > .subnav > ul > li.hasSubnav.active > a:after {
    /*background-color: #fff;*/
  }

  #mainNav_m > ul > li > .subnav > ul > li {
    transition: background 0.3s ease 0s;
  }
  #mainNav_m > ul > li > .subnav > ul > li > a {
    display: block;
    position: relative;
    background-color: #f4f4f4;
  }
  #mainNav_m > ul > li > .subnav > ul > li.active {
    background-color: var(--primary-blue);
  }

  #mainNav_m > ul > li > .subnav > ul > li.li.hasSubnav > .subnav > ul {
    border-left: 2px solid #262626;
  }

  #mainNav_m > ul > li > .subnav > ul > li.li.hasSubnav > .subnav > ul > li {
    padding: 8px 0 8px 10px;
  }

  #mainNav_m > ul > li > .subnav > ul > li > .subnav {
    padding: 0 12px;
  }
  #mainNav_m > ul > li > .subnav > ul > li > .subnav > ul {
    overflow: hidden;
    display: none;
  }

  #mainNav_m > ul > li > .subnav > ul > li > .subnav > ul > li > a {
    padding: 10px 20px 10px 24px;
    display: inline-block;
    position: relative;
    font-weight: 300;
    color: #fff;
  }

  #mainNav_m > ul > li > .subnav > ul > li > .subnav > ul > li > a:before {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: #fff;
    border-radius: 50%;
    left: 10px;
    top: 1em;
  }

  #mainNav_m > ul > li.hasSubnav.selected > .subnav > ul > li.hasSubnav.selected > .subnav {
    display: block;
  }

  #mobileMenu .others_m > li,
  #mainNav_m > ul > li {
    border-bottom: 1px solid var(--light-green);
    padding: 0 15px;
  }

  #mobileMenu .others_m > li a,
  #mainNav_m > ul > li > a:not(.arrow) {
    color: var(--dark-green);
    font-weight: 600;
  }

  #mainNav_m li.selected > a:not(.arrow),
  #mainNav_m li.active > a:not(.arrow),
  #mainNav_m li > a:not(.arrow):hover,
  #mainNav_m li > a:not(.arrow).focus {
    color: var(--brown);
  }

  #mobileMenu .others_m li a {
    padding: 15px 0;
    display: inline-block;
  }

  /*mobile menu css ends*/
  #backToTop {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 60px;
    height: 60px;
    opacity: 0;
    z-index: 1000;
    text-indent: -9999px;
    color: var(--primary-blue);
    background-color: var(--light-green);
    visibility: hidden;
    border-radius: 50%;
    transition: background-color .3s, background-position .3s;
	background-image:url(../images/icon-btn-arr-top.svg);
	background-repeat:no-repeat;
	background-size:20px;
	background-position:center center;
  }

  #backToTop:hover,
  #backToTop.focus {
    background-color: var(--hover-color);
    color: var(--secondary-light);
	background-position:center top 10px;
  }
  
  

  /* #backToTop:before {
    content: "";
    height: 12px;
    width: 12px;
    display: block;
    border: 2px solid var(--dark-green);
    border-left-width: 0;
    border-bottom-width: 0;
    transform-origin: left top;
    transform: rotate(-45deg) translate(-50%,-50%);
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -2px;
    transition: border-color 0.3s ease 0s;
  }
  
  #backToTop:after {
    content: "";
    height: 14px;
    width: 2px;
    display: block;
	background-color: var(--dark-green);
    transform: translate(-50%,-50%);
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 2px;
    transition: background-color 0.3s ease 0s;
  } */

  #backToTop.fixed {
    position: absolute;
    bottom: -30px;
  }

  #backToTop.active {
    opacity: 1;
    visibility: visible;
  }

  #wrapper.showMMenu #backToTop {
    visibility: hidden;
  }

  /*inside*/
  #insideVisualWrap {
    position:relative;
    /* overflow: hidden; */
	background-image: url('../images/bg-inside-main-vis.jpg');
    background-repeat: repeat;
    background-position: 50% 50%;
    background-size: cover;
  }
  /* #insideVisualWrap:before {
	content:'';
	position:absolute;
	width:2000px;
	height:60px;
	background-image:url('../images/bg-inside-main-vis-bottom.png');
	background-repeat:no-repeat;
	background-size:cover;
	background-position:50% 0;
	bottom:-6px;
	left:50%;
	transform:translateX(-50%);
  } */
  #insideVisualWrap:before {
	content:'';
	position:absolute;
	width:2000px;
	height:60px;
	bottom:-5px;
	left:50%;
	transform:translateX(-50%);
	clip-path: polygon(100% 100%, 0% 100% , 0.00% 91.67%, 2.00% 90.36%, 4.00% 86.51%, 6.00% 80.37%, 8.00% 72.33%, 10.00% 62.88%, 12.00% 52.62%, 14.00% 42.19%, 16.00% 32.26%, 18.00% 23.44%, 20.00% 16.29%, 22.00% 11.26%, 24.00% 8.66%, 26.00% 8.66%, 28.00% 11.26%, 30.00% 16.29%, 32.00% 23.44%, 34.00% 32.26%, 36.00% 42.19%, 38.00% 52.62%, 40.00% 62.88%, 42.00% 72.33%, 44.00% 80.37%, 46.00% 86.51%, 48.00% 90.36%, 50.00% 91.67%, 52.00% 90.36%, 54.00% 86.51%, 56.00% 80.37%, 58.00% 72.33%, 60.00% 62.88%, 62.00% 52.62%, 64.00% 42.19%, 66.00% 32.26%, 68.00% 23.44%, 70.00% 16.29%, 72.00% 11.26%, 74.00% 8.66%, 76.00% 8.66%, 78.00% 11.26%, 80.00% 16.29%, 82.00% 23.44%, 84.00% 32.26%, 86.00% 42.19%, 88.00% 52.62%, 90.00% 62.88%, 92.00% 72.33%, 94.00% 80.37%, 96.00% 86.51%, 98.00% 90.36%, 100.00% 91.67%);
	background-color:var(--white);
  }
  #insideVisualWrap .sectionImg{
	background-repeat: no-repeat;
	background-position: 100% 100%;
    background-size: auto;
  }
  #insideVisualWrap.loaded {
  }
  #insideVisualWrap .line{
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	bottom:0;
	width:2000px;
	height:100px;
	z-index:10;
  }
  #insideVisualWrap .line *{
	display:block;
  }
  #insideVisualContainer {
	position:relative;
	max-width:var(--container-max-width);
	padding:0 var(--container-gap);
	margin:0 auto;
	/* height: 500px; */
	transition: height .3s;
  }
  #secTitlWrap{
	/* padding-top:40px; */
	padding-top:10px;
	max-width:60%;
  }
  #pageTitle {
	font-family: 'Roboto Condensed', "微軟正黑體", "Microsoft JhengHei";
	position:relative;
	font-size:4.556em;
	font-weight:500;
	line-height:1.1;
	text-shadow:0 0 15px rgba(0,0,0,0.8);
    color: var(--yellow);
	padding-top:70px;
	margin-bottom:15px;
    /* text-transform: uppercase; */
    transition: font-size .3s ease 0s, padding .3s ease 0s;
  }
  #pageTitle:before {
	content:'';
	position:absolute;
	background-image:url('../images/hd-butterfly.png');
	background-repeat:no-repeat;
	background-position:0 0;
	background-size:contain;
	width:150px;
	height:150px;
	top:0;
	left:-100px;
  }
  .blankTPL #pageTitle {
	padding:0 !important;
	/* margin:0 !important; */
  }
  .blankTPL #pageTitle:before {
	display:none;
  }
  #secTitle {
	font-family: 'Roboto Condensed', "微軟正黑體", "Microsoft JhengHei";
    font-size: 1.444em;
    color: #fff;
    font-weight: 500;
	text-shadow:0 0 15px rgba(0,0,0,0.8);
  }
  /*breadcrumb*/
  #breadcrumb {
    font-size: 0.889em;
    padding: 20px 0 60px 0;
  }

  #breadcrumb .navHome {
    padding-left: 0;
    margin-right: 0px;
  }

  #breadcrumb .navHome > a {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2017.49%2017.53%22%3E%3Cpath%20fill%3D%22%239f6a26%22%20d%3D%22M14.53%2C17.53h-3.79c-.41%2C0-.75-.34-.75-.75v-3.94h-2.27v3.94c0%2C.41-.34.75-.75.75h-3.88c-.41%2C0-.75-.34-.75-.75v-7.13c0-.41.34-.75.75-.75s.75.34.75.75v6.38h2.38v-3.94c0-.41.34-.75.75-.75h3.77c.41%2C0%2C.75.34.75.75v3.94h2.29v-6.38c0-.41.34-.75.75-.75s.75.34.75.75v7.13c0%2C.41-.34.75-.75.75Z%22%2F%3E%3Cpath%20fill%3D%22%239f6a26%22%20d%3D%22M16.74%2C9.5c-.19%2C0-.38-.07-.53-.22L8.75%2C1.81%2C1.28%2C9.28c-.29.29-.77.29-1.06%2C0s-.29-.77%2C0-1.06L8.22.22c.29-.29.77-.29%2C1.06%2C0l8%2C8c.29.29.29.77%2C0%2C1.06-.15.15-.34.22-.53.22Z%22%2F%3E%3Cpath%20fill%3D%22%239f6a26%22%20d%3D%22M15.57%2C4.88c-.41%2C0-.75-.34-.75-.75v-1.55h-1.47c-.41%2C0-.75-.34-.75-.75s.34-.75.75-.75h2.22c.41%2C0%2C.75.34.75.75v2.3c0%2C.41-.34.75-.75.75Z%22%2F%3E%3C%2Fsvg%3E");
    background-position: 0 50%;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    padding-left: 16px;
    text-indent: -9999px;
    text-align: left;
    display: inline-block;
  }
  
  #breadcrumb .navHome > a:is(:hover, .focus) {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2017.49%2017.53%22%3E%3Cpath%20fill%3D%22%23016936%22%20d%3D%22M14.53%2C17.53h-3.79c-.41%2C0-.75-.34-.75-.75v-3.94h-2.27v3.94c0%2C.41-.34.75-.75.75h-3.88c-.41%2C0-.75-.34-.75-.75v-7.13c0-.41.34-.75.75-.75s.75.34.75.75v6.38h2.38v-3.94c0-.41.34-.75.75-.75h3.77c.41%2C0%2C.75.34.75.75v3.94h2.29v-6.38c0-.41.34-.75.75-.75s.75.34.75.75v7.13c0%2C.41-.34.75-.75.75Z%22%2F%3E%3Cpath%20fill%3D%22%23016936%22%20d%3D%22M16.74%2C9.5c-.19%2C0-.38-.07-.53-.22L8.75%2C1.81%2C1.28%2C9.28c-.29.29-.77.29-1.06%2C0s-.29-.77%2C0-1.06L8.22.22c.29-.29.77-.29%2C1.06%2C0l8%2C8c.29.29.29.77%2C0%2C1.06-.15.15-.34.22-.53.22Z%22%2F%3E%3Cpath%20fill%3D%22%23016936%22%20d%3D%22M15.57%2C4.88c-.41%2C0-.75-.34-.75-.75v-1.55h-1.47c-.41%2C0-.75-.34-.75-.75s.34-.75.75-.75h2.22c.41%2C0%2C.75.34.75.75v2.3c0%2C.41-.34.75-.75.75Z%22%2F%3E%3C%2Fsvg%3E");
  }
  
  
  #breadcrumb .curPage {
	  color: var(--brown);
  }

  #breadcrumb ul {
    color: #6e6e6e;
    display: grid;
    gap: 5px 20px;
    grid-template-columns: repeat(auto-fit, minmax(16px, max-content));
  }

  #breadcrumb ul li {
    position: relative;
  }

  #breadcrumb ul li > a {
    position: relative;
    color: var(--dark-green);
    text-decoration: underline;
  }

  #breadcrumb ul li > a:hover {
    text-decoration: none;
  }

  #breadcrumb ul li:not(:first-child):before {
    /* border: 1px solid rgba(23, 121, 87, 0.5);
    content: "";
    background: none;
    height: 5px;
    top: 0.45em;
    left: -13px;
    width: 5px;
    pointer-events: none;
    position: absolute;
    transform: rotate(45deg);
    border-bottom: none;
    border-left: none;
    transition: transform 0.25s ease 0s; */
	
	content:'';
	position:absolute;
	width:2px;
	height:14px;
	background-color:var(--grey);
	left:-10px;
	top:0.2em;
	transform: rotate(20deg);
  }

  #contentWrap {
    position: relative;
	/* overflow: hidden; */
  }

  #contentWrap.hasLeftNav .container{
    display: flex;
    column-gap: 40px;
  }
  .hasLeftNav #mainContent {
    /* width: calc(100% - 320px); */
	width: 100%;
  }
  #leftNavWrap {
    width: 280px;
    padding-top: 40px;
	display:none;
  }
  #leftNav {
    margin-bottom: 30px;
    position: relative;
    width: 100%;
    transition: all 0.3s ease 0s;
  }

  #leftNav > ul > li {
    position: relative;
    padding: 2px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  }

  #leftNav > ul > li > ul {
    overflow: hidden;
    transition: height 0.5s ease;
  }
  #leftNav > ul > li:not(.active) > ul {
    display: none;
  }
  #leftNav > ul > li.selected > ul {
    display: block;
  }

  #leftNav li.hasSubnav > button {
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    top: 6px;
    right: 8px;
    text-indent: -9999px;
    cursor: pointer;
    z-index: 1000;
    background: none;
    transition: border-color 0.3s ease 0s;
  }

  #leftNav li.hasSubnav > a:not(.arrow) {
    padding-right: 45px;
  }

  #leftNav li.hasSubnav.selected > button {
    display: none;
  }

  #leftNav li.hasSubnav > button:before {
    content: "";
    width: 14px;
    height: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    display: block;
    border: 2px solid var(--primary-light);
    border-left-width: 0;
    border-top-width: 0;
    transition: transform 0.3s ease 0s;
  }

  #leftNav > ul > li.hasSubnav.selected > button:before,
  #leftNav > ul > li.hasSubnav.active > button:before,
  #leftNav > ul > li.hasSubnav > a:hover + button:before {
    border-color: #fff;
  }

  #leftNav li.hasSubnav.active > button:before {
    transform: translate(-50%, -50%) rotate(-135deg);
  }

  #leftNav > ul > li:first-child {
    border-top: none;
  }

  #leftNav > ul > li > a:not(.arrow) {
    display: block;
    position: relative;
    transition: color 0.3s ease 0s, background-color 0.3s ease 0s;
    padding: 12px 30px 12px 18px;
    font-size: 1em;
    color: var(--primary-light);
    line-height: 1.3em;
  }

  #leftNav > ul > li.selected > a:not(.arrow),
  #leftNav > ul > li.active > a:not(.arrow),
  #leftNav > ul > li > a:not(.arrow):hover {
    background-color: var(--primary-light);
    color: #fff;
  }

  #leftNav > ul > li > ul > li {
    position: relative;
    background-color: #f5f5f5;
    transition: background-color 0.3s ease 0s;
  }

  #leftNav > ul > li > ul > li > a:not(.arrow):before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--primary-light);
    position: absolute;
    top: 1.15em;
    left: 20px;
  }

  #leftNav > ul > li > ul > li.selected > a:not(.arrow):before,
  #leftNav > ul > li > ul > li:hover > a:not(.arrow):before {
    background-color: var(--primary-blue);
  }

  #leftNav > ul > li > ul > li > a:not(.arrow) {
    padding: 15px 15px 0px 40px;
    display: inline-block;
    color: var(--primary-dark);
    position: relative;
    transition: color 0.3s ease 0s;
  }

  #leftNav > ul > li > ul > li:last-child > a:not(.arrow) {
    padding: 15px 15px 15px 40px;
  }

  #leftNav > ul > li > ul > li.hasSubnav:last-child > a:not(.arrow) {
    padding: 15px 15px 0 40px;
  }

  #leftNav > ul > li > ul > li.hasSubnav:last-child {
    padding-bottom: 15px;
  }

  #leftNav > ul > li > ul > li.selected a,
  #leftNav > ul > li > ul > li > a:hover {
    color: #000;
  }

  #leftNav > ul > li > ul > li > ul {
    display: none;
    overflow: hidden;
    margin: 0 20px;
  }

  #leftNav > ul > li > ul > li.selected > ul {
    display: block;
  }

  #leftNav > ul > li > ul > li > ul > li {
    padding: 10px 0 0;
  }

  #leftNav > ul > li > ul > li > ul > li > a:not(.arrow) {
    position: relative;
    padding: 0 0 0 35px;
    display: inline-block;
  }

  #leftNav > ul > li > ul > li > ul > li > a:hover,
  #leftNav > ul > li > ul > li > ul > li > a.focus,
  #leftNav > ul > li > ul > li > ul > li.selected > a {
    text-decoration: underline;
  }

  #leftNav > ul > li > ul > li > ul > li:last-child {
    padding-bottom: 0;
  }

  #leftNav > ul > li > ul > li > ul > li > a:not(.arrow):before {
    content: "";
    position: absolute;
    width: 6px;
    height: 2px;
    background-color: #037957;
    left: 20px;
    top: 10px;
  }
  #mainContent {
    width: 100%;
    /* padding:20px 0 70px; */
	/* padding-bottom:180px; */
	padding-bottom:300px;
    position: relative;
    min-height: 460px;
    opacity: 0;
    transition: opacity 0.2s ease 0s;
  }
  #contentWrap.shown #mainContent,
  #contentWrap.shown #content {
    opacity: 1;
  }
  #content {
    opacity: 0;
  }
  #lastRevDate {
    text-align: left;
    color: #6e6e6e;
    font-size: 0.833em;
    padding: 10px 20px;
  }

  .fancybox-content {
    max-width: 800px;
  }

  #lastRevDate {
    text-align: left;
    color: #6e6e6e;
    font-size: 0.833em;
    padding: 10px 20px;
  }
  
  /*swiper*/
.swiper-wrap {
  position: relative;
}
.swiper-wrap .swiper-play {
  position: absolute;
  right: 60px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}
.swiper-wrap .swiper-play:hover {
}
.swiper-wrap .swiper-arrow {
  position: absolute;
  width: 50px;
  height: 60px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 10;
  font-size: 0;
  line-height: 0;
  display: block;
  overflow: hidden;
  opacity: 1;
  border: none;
  transition: opacity 0.3s ease 0s, background-color 0.3s ease 0s,
    left 0.3s ease 0s, right 0.3s ease 0s;
}

.swiper-wrap .swiper-arrow span {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  border-style: solid;
  border-width: 2px;
  border-color: #fff;
  border-top: none;
  border-left: none;
}

.swiper-wrap .swiper-next {
  right: 20px;
}

.swiper-wrap .swiper-prev {
  left: 20px;
}

.swiper-wrap .swiper-arrow:not(.swiper-button-disabled):hover,
.swiper-wrap .swiper-arrow:not(.swiper-button-disabled).focus {
}

.swiper-wrap .swiper-prev span {
  transform: translate(-50%, -50%) rotate(135deg);
  margin-left: 4px;
}

.swiper-wrap .swiper-prev:not(.swiper-button-disabled):hover,
.swiper-wrap .swiper-prev:not(.swiper-button-disabled).focus {
  left: 15px;
}

.swiper-wrap .swiper-next span {
  transform: translate(-50%, -50%) rotate(-45deg);
  margin-left: -4px;
}

.swiper-wrap .swiper-next:not(.swiper-button-disabled):hover,
.swiper-wrap .swiper-next:not(.swiper-button-disabled).focus {
  right: 15px;
}
.swiper-paging {
  display: inline-block;
  vertical-align: top; 
  padding: 0 10px;
}
.swiper-paging > a {
  display: inline-block;
  height: 34px;
  width: 20px;
  position: relative;
  vertical-align: top;
  text-indent: -9999px;
  opacity: 1;
}
.swiper-paging > a:before {
  content: "";
  position: absolute;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  width: 10px;
  height: 10px;
  display: block;
  box-shadow: 0px 5px 30px 5px rgba(0, 0, 0, 0.2);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease 0s, height 0.3s ease 0s,
    background-color 0.3s ease 0s;
}
.swiper-paging .swiper-pagination-bullet-active:before {
  background-color: #fff;
  width: 16px;
  height: 16px;
}
.swiper-paging .swiper-pagination-bullet:hover:before {
  background-color: #fff;
}
.swiper-paging .swiper-pagination-bullet,
.swiper-paging .swiper-pagination-bullet-active {
  background: none;
}
.swiper-button-disabled {
  cursor: default;
}
.swiper-notification {
  position: absolute;
  height: 0;
  width: 0;
  display: inline-block;
  overflow: hidden;
  margin: 0;
  padding: 0;
  font-size: 0;
  text-indent: -9999px;
}
.btn-play {
  display: inline-block;
  position: relative;
  text-indent: -9999px;
  width: 35px;
  height: 34px;
  z-index: 10;
  transition: background-color 0.3s ease 0s;
}
.btn-play:hover {
}
.btn-play:before {
  left: 12px;
}

.btn-play:after {
  right: 12px;
}

.btn-play:before,
.btn-play:after {
  position: absolute;
  width: 3px;
  height: 14px;
  background-color: #fff;
  content: "";
  top: 50%;
  transform: translateY(-50%);
  /*transition: background-color .3s ease 0s;*/
}

.btn-play.stop:before {
  content: "";
  border-bottom: 7px solid transparent;
  border-left: 10px solid #fff;
  border-top: 7px solid transparent;
  background: none;
  border-radius: 0;
  height: 0;
  top: 50%;
  left: 50%;
  width: 0;
  transform: translate(-50%, -50%);
}

.btn-play.stop:hover:before,
.btn-play.stop:focus:before {
  border-bottom: 7px solid transparent;
  border-left: 10px solid #fff;
  border-top: 7px solid transparent;
}

.btn-play.stop::after {
  display: none;
}
/*swiper*/
}
/*end layer*/
/*custom style*/
.f-left {
  float: left;
}

.f-right {
  float: right;
}

img.f-left {
  margin: 0 15px 15px 0;
}

img.f-right {
  margin: 0 0 15px 15px;
}

.a-center {
  text-align: center;
}

.a-left {
  text-align: left;
}

.a-right {
  text-align: right;
}

.v-top {
  vertical-align: top;
}

.v-middle {
  vertical-align: middle;
}

.v-bottom {
  vertical-align: bottom;
}

.no-wrap {
  white-space: nowrap;
}

.no-padding {
  padding: 0  !important;
}

.no-margin {
  margin: 0 !important;
}

.display-m {
  display: none;
}

.uppercase{
	text-transform:uppercase;
}

.text-truncate{
	text-overflow:ellipsis;
	white-space:nowrap;
	overflow:hidden;
}

/* footer v1 */
.footer-gh1{
	position:absolute;
	left:0px;
	bottom:-30px;
	display:block;
}
.footer-gh2{
	position:absolute;
	right:270px;
	bottom:-20px;
	display:block;
}
.footer-gh3{
	position:absolute;
	right:0px;
	bottom:-20px;
	display:block;
}
.footer-frog{
	position:absolute;
	left:140px;
	bottom:-25px;
	display:block;
}
.footer-crab{
	position:absolute;
	right:190px;
	bottom:-10px;
	display:block;
}

/* footer v2 */
.footer-gh-v2-left1{
	position:absolute;
	left:0px;
	bottom:0;
	display:block;
	z-index:2;
}
.footer-gh-v2-left2{
	position:absolute;
	left:0;
	bottom:0;
	display:block;
}
.footer-gh-v2-right1{
	position:absolute;
	right:0px;
	bottom:0;
	display:block;
	z-index:2;
}
.footer-gh-v2-right2{
	position:absolute;
	right:0px;
	bottom:0;
	display:block;
}
.footer-clownfish{
	position:absolute;
	/* left:220px; */
	bottom:100px;
	display:block;
	z-index:1;
}
.footer-dolphin{
	position:absolute;
	/* right:300px; */
	bottom:70px;
	display:block;
	z-index:1;
}

/* footer v3 */
.footer-gh-v3-left{
	position:absolute;
	left:0px;
	bottom:0;
	display:block;
}
.footer-gh-v3-right1{
	position:absolute;
	right:0px;
	bottom:0;
	display:block;
	z-index:2;
}
.footer-gh-v3-right2{
	position:absolute;
	right:0px;
	bottom:0;
	display:block;
}
.footer-owl{
	position:absolute;
	left:145px;
	bottom:123px;
	display:block;
	z-index:1;
}
.footer-muntjac{
	position:absolute;
	right:75px;
	bottom:-15px;
	display:block;
	z-index:1;
}

.btn-link,
.btn-search{
/*   display:inline-block;
  position:relative;
  padding:15px 80px 15px 35px;
  border:2px solid var(--yellow);
  color:var(--yellow);
  border-radius:30px;
  background-color:var(--btn-color);
  font-size:1.111em;
  font-weight:500;
  text-decoration:none;
  transition:all .3s; */
}
.btn-link:hover,
.btn-link.focus,
.btn-search:hover,
.btn-search.focus,
#content .search-result-list-wrap .result-list:hover .btn-link,
#content .search-result-list-wrap .result-list:focus .btn-link{
/*   color:var(--btn-color);
  border-color:var(--btn-color);
  background-color:var(--hover-btn-color); */
}
.btn-link:before,
.btn-search:before{
  content:'';
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  right:40px;
  background-position:0 0;
  background-size:contain;
  background-repeat:no-repeat;
  width:20px;
  height:20px;
  z-index:40;
  transition:right .3s;
}
.btn-link:before{
	background-image:url('../images/icon-btn-arr-right.svg');
}
.btn-link.download:before{
	background-image:url('../images/icon-download.svg');
}
.btn-search:before{
	background-image:url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20fill%3D%22%23FFFCA6%22%20d%3D%22M8.4%2C16.8c-4.6%2C0-8.3-3.7-8.3-8.3c0-4.6%2C3.7-8.3%2C8.3-8.3s8.3%2C3.7%2C8.3%2C8.3C16.8%2C13.1%2C13%2C16.8%2C8.4%2C16.8z%20M8.4%2C2.2%09C5%2C2.2%2C2.1%2C5%2C2.1%2C8.5s2.8%2C6.3%2C6.3%2C6.3c3.5%2C0%2C6.3-2.8%2C6.3-6.3S11.9%2C2.2%2C8.4%2C2.2z%22%2F%3E%3Cpath%20fill%3D%22%23FFFCA6%22%20d%3D%22M17.4%2C19.8c-0.6%2C0-1.3-0.3-1.7-0.7l-3.9-3.9c-0.4-0.4-0.4-1%2C0-1.4c0.4-0.4%2C1-0.4%2C1.4%2C0l3.9%2C3.9%09c0.2%2C0.2%2C0.4%2C0.2%2C0.6%2C0c0.1-0.1%2C0.1-0.2%2C0.1-0.3c0-0.1%2C0-0.2-0.1-0.3l-3.9-3.9c-0.4-0.4-0.4-1%2C0-1.4s1-0.4%2C1.4%2C0l3.9%2C3.9%09c0.5%2C0.5%2C0.7%2C1.1%2C0.7%2C1.7c0%2C0.6-0.3%2C1.3-0.7%2C1.7C18.7%2C19.5%2C18.1%2C19.8%2C17.4%2C19.8z%22%2F%3E%3C%2Fsvg%3E');
}
.btn-link:is(:hover, .focus):before{
	right:30px;
}
/* .btn-link:hover:before,
.btn-link.focus:before,
#content .search-result-list-wrap .result-list:hover .btn-link:before,
#content .search-result-list-wrap .result-list:focus .btn-link:before{ */
.btn-link:hover:before,
.btn-link.focus:before{
  background-image:url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Crect%20x%3D%220.5%22%20y%3D%229%22%20fill%3D%22%23003723%22%20width%3D%2213%22%20height%3D%222%22%2F%3E%3Cpolygon%20fill%3D%22%23003723%22%20points%3D%2211.2%2C18.3%209.8%2C16.9%2016.7%2C10%209.8%2C3.1%2011.2%2C1.7%2019.5%2C10%22%2F%3E%3C%2Fsvg%3E');
}
.btn-link.download:hover:before,
.btn-link.download.focus:before{
  background-image:url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2019.16%2018.81%22%3E%3Cpath%20fill%3D%22%23003723%22%20d%3D%22M16.41%2C18.81H2.75c-1.52%2C0-2.75-1.23-2.75-2.75v-6.53c0-.41.34-.75.75-.75s.75.34.75.75v6.53c0%2C.69.56%2C1.25%2C1.25%2C1.25h13.66c.69%2C0%2C1.25-.56%2C1.25-1.25v-6.53c0-.41.34-.75.75-.75s.75.34.75.75v6.53c0%2C1.52-1.23%2C2.75-2.75%2C2.75Z%22%2F%3E%3Cpath%20fill%3D%22%23003723%22%20d%3D%22M9.58%2C15.62c-.19%2C0-.38-.07-.53-.22l-4.55-4.55c-.29-.29-.29-.77%2C0-1.06s.77-.29%2C1.06%2C0l4.02%2C4.02%2C4.02-4.02c.29-.29.77-.29%2C1.06%2C0s.29.77%2C0%2C1.06l-4.55%2C4.55c-.15.15-.34.22-.53.22Z%22%2F%3E%3Cpath%20fill%3D%22%23003723%22%20d%3D%22M9.58%2C15.62c-.41%2C0-.75-.34-.75-.75V.75c0-.41.34-.75.75-.75s.75.34.75.75v14.12c0%2C.41-.34.75-.75.75Z%22%2F%3E%3C%2Fsvg%3E');
}
.btn-search:hover:before,
.btn-search.focus:before{
  background-image:url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20fill%3D%22%23003723%22%20d%3D%22M8.4%2C16.8c-4.6%2C0-8.3-3.7-8.3-8.3c0-4.6%2C3.7-8.3%2C8.3-8.3s8.3%2C3.7%2C8.3%2C8.3C16.8%2C13.1%2C13%2C16.8%2C8.4%2C16.8z%20M8.4%2C2.2%09C5%2C2.2%2C2.1%2C5%2C2.1%2C8.5s2.8%2C6.3%2C6.3%2C6.3c3.5%2C0%2C6.3-2.8%2C6.3-6.3S11.9%2C2.2%2C8.4%2C2.2z%22%2F%3E%3Cpath%20fill%3D%22%23003723%22%20d%3D%22M17.4%2C19.8c-0.6%2C0-1.3-0.3-1.7-0.7l-3.9-3.9c-0.4-0.4-0.4-1%2C0-1.4c0.4-0.4%2C1-0.4%2C1.4%2C0l3.9%2C3.9%09c0.2%2C0.2%2C0.4%2C0.2%2C0.6%2C0c0.1-0.1%2C0.1-0.2%2C0.1-0.3c0-0.1%2C0-0.2-0.1-0.3l-3.9-3.9c-0.4-0.4-0.4-1%2C0-1.4s1-0.4%2C1.4%2C0l3.9%2C3.9%09c0.5%2C0.5%2C0.7%2C1.1%2C0.7%2C1.7c0%2C0.6-0.3%2C1.3-0.7%2C1.7C18.7%2C19.5%2C18.1%2C19.8%2C17.4%2C19.8z%22%2F%3E%3C%2Fsvg%3E');
}

.swiper-ctrl{
	position:absolute;
	bottom:0;
	left:50%;
	transform:translateX(-50%);
	display:grid;
	align-items:center;
	grid-template-columns:auto auto;
}
.swiper-pagination-custom{
	display:flex;
}
.swiper-pagination-bullet{
	position:relative;
	background-color:transparent;
	width:20px;
	height:20px;
	margin:0 8px;
	border:2px solid var(--light-green);
	text-indent:-9999px;
	opacity:1;
	border-radius:50%;
	vertical-align:middle;
}
.swiper-pagination-bullet:before{
	display:none;
}
.swiper-pagination-bullet-active:after{
	content:'';
	position:absolute;
	background-color:var(--dark-green);
	width:10px;
	height:10px;
	top:3px;
	left:3px;
	border-radius:50%;
}
.btnPlay {
	display:inline-block;
	position:relative;
	width:30px;
	height:26px;
	text-indent:-9999px;
}
.btnPlay:before {
	left:9px;
}
.btnPlay:after {
	right:8px;
}
.btnPlay:before, .btnPlay:after {
	position:absolute;
	width:4px;
	height:16px;
	background-color:var(--dark-green);
	content:'';
	top:50%;
	transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
	transition:background-color .3s, border-color .3s;
	/* box-shadow:var(--swiper-pagination-shadow); */
}
.btnPlay:hover:before, .btnPlay:hover:after {
	background-color:var(--brown);
}
.btnPlay:hover {
}
.btnPlay.pause:hover:before {
	border-left-color:var(--brown);
}
.btnPlay.pause:before {
	border-bottom: 8px solid transparent;
	border-left: 12px solid var(--dark-green);
	border-top: 8px solid transparent;
	content: "";
	background:none;
	height: 0;
	top: 50%;
	left:50%;
	width: 0;
	transform:translate(-50%, -50%);
	-webkit-transform:translate(-50%, -50%);
	box-shadow:none;
}
.btnPlay.pause::after {
	display:none;
}

.js-btn,
.js-btn2{
    display: inline-block;
    position: relative;
    padding: 15px 80px 15px 35px;
    border: 2px solid var(--yellow);
    color: var(--yellow);
    border-radius: 30px;
	font-weight: 500;
    background-color: var(--btn-color);
    text-decoration: none;
	text-align: left;
	overflow:hidden;
	transition:all .4s;
}
.js-btn.general{
	padding-right:35px;
}
.js-btn + .js-btn{
	margin-left:20px;
}
.js-btn:hover,
.js-btn.focus{
	border-color:var(--btn-color);
}
:is(.js-btn,.js-btn2) .bg-h-btn{
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 200%;
    border-radius: 50%;
    background-color: var(--hover-btn-color);
    transform: scale(0.8);
    z-index: 20;
}
:is(.js-btn,.js-btn2) .bg-btn {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    background-color: var(--btn-color);
    z-index: 10;
}
:is(.js-btn,.js-btn2) .text {
    position: relative;
    font-size: 1.111em;
    font-weight: 500;
	line-height: 1.2;
    height: 1.2em;
    overflow: hidden;
    z-index: 30;
}
:is(.js-btn,.js-btn2) .text__in {
    /* color: var(--btn-color); */
    display: flex;
    flex-direction: column;
    font-size: inherit;
    line-height: 1.2;
    transition: color .3s linear;
    mix-blend-mode: difference;
}
:is(.js-btn,.js-btn2):is(:hover,.focus) .text__in {
/* .js-btn:hover .text__in,
.js-btn.focus .text__in { */
	color:var(--btn-color);
}
:is(.js-btn,.js-btn2) .text__in::after {
    content: attr(data-content);
}
:is(.js-btn,.js-btn2) .outer {
	position: relative;
	z-index: 30;
	display: block;
	overflow: hidden;
}
:is(.js-btn,.js-btn2) .outer>* {
	filter: drop-shadow(0 40px 0 currentColor);
	display: block;
	line-height: 1.2;
	transition: transform .3s;
}
:is(.js-btn,.js-btn2):is(:hover,.focus) .outer>* {
	color:var(--btn-color);
	transform: translateY(-40px);
}
/* normal style */
:is(.js-btn,.js-btn2):is(:hover,.focus) {
	background-color: var(--hover-btn-color);
	color: var(--btn-color);
}


.swiper-wrapper.center{
	justify-content:center;
}

.lg-components{
	background-color:rgba(0,0,0,0.6);
}

.line svg{
	/* position:absolute;
	top:0;
	left:50%;
	transform:translateX(-50%); */
	position:absolute;
	width:2000px;
	height:100px;
	top:0;
	left:0;
}