@font-face { 
  font-family: 'AvenirLTProBook'; 
  src: url('./fonts/AvenirLTProBook.woff2') format('woff');
  font-style: normal;
}
@font-face { 
  font-family: 'AvenirLTProRoman'; 
  src: url('./fonts/AvenirLTProRoman.woff2') format('woff');
  font-style: normal;
}
@font-face { 
  font-family: 'AvenirLTProMedium'; 
  src: url('./fonts/AvenirLTProMedium.woff2') format('woff');
  font-style: normal;
}
@font-face { 
  font-family: 'AvenirLTProHeavy'; 
  src: url('./fonts/AvenirLTProHeavy.woff2') format('woff');
  font-style: normal;
}
@font-face { 
  font-family: 'AvenirLTProBlack'; 
  src: url('./fonts/AvenirLTProBlack.woff2') format('woff');
  font-style: normal;
}
/* root */
:root{
  --color-green:#008043;
  --color-green-hover:#016e3a;
  --color-gray:#555;
}

html,
body,
p,ul,li,h1,h2,h3,h4,h5,form {
  margin: 0;
  padding: 0;
}
html{ color: #231f20; font-size: 15px; line-height: 1.5;}
a{ text-decoration: none;}
ul{ list-style-type: none;}
.wrap {
  max-width: 1180px;
  margin: auto;
  padding: 0 2rem;
}
*{ outline: none;}
img{ vertical-align: top;}
html,body,p,h1,h2,h3,h4,h5,form,ul,li,dl,dt,dd{ margin: 0; padding: 0;}
body{ color: #000; background-color: #FFF; font-size: 14px; }
body,button,input,textarea{font-family: "AvenirLTProBook","微軟正黑體",sans-serif, "Microsoft Yahei", "WenQuanYi Micro Hei"; }
/* Loader */
.mouth {
    fill: none;
    stroke: #008043;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 75, 75;
    transform-origin: center;   /* transform动画时以自身中心作为基点 */
    animation: mounthAni 2.3s ease-out infinite;
}

.eye {
    fill: none;
    stroke: #008043;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 0, 110;
    transform-origin: center;
    transform: rotate(-42deg);
    animation: eyeAni 2.3s ease-in-out infinite;
}

@keyframes mounthAni {
    40% {
        stroke-dasharray: 75, 80;   /* 间距改为1/4 */
    }
    80%, 100% {
        stroke-dasharray: 75, 75;   /* 间距恢复为1/2 */
        transform: rotate(720deg);
    }
}

@keyframes eyeAni {
    40% {
        stroke-dasharray: 0, 56;    /* 间距改为7/8 */
    }
    80%, 100% {
        transform: rotate(678deg);  /* 间距恢复为3/4 */
        stroke-dasharray: 0, 110;
    }
}
#loader{ position: fixed; z-index: 1001; width: 100%; height: 100%; left: 0; top: 0; display: flex; justify-content: center; align-items: center; background-color: #FFF;}
/* Loader */

/* public */
.img-icon{ background-position: center; background-repeat: no-repeat; background-size: cover;}
.text-shadow{text-shadow: 2px 2px 5px rgb(46, 45, 45);}
#alert{ position: fixed; width: 100px; height: 100px; background-color: #FFF; border: 1px solid #CCC; display: flex; justify-content: center; align-items: center; z-index: 101; left: 50%; top: 50%; margin: -50px 0 0 -50px;}
#alert a{ position: absolute; overflow: hidden; text-indent: -100px; width: 26px; height: 26px; background-color: red; border-radius: 50%; top: -10px; right: -10px;}

/* 分页 */
.pagination{ text-align: center;}
.nav-links{ display: flex; justify-content: center; padding: 4rem 0;}
.nav-links .page-numbers{display: block; width: 32px; height: 32px;  color: #999;  text-align: center; line-height: 32px; font-size: 1.6rem; font-family: "AvenirLTProHeavy"; margin: 0 .5rem;}
.nav-links .prev, .nav-links .next{background-image: url(../image/page-btn.png); width: 32px; height: 32px; background-size:  100% 100%; overflow: hidden; text-indent: -1000px; background-repeat: no-repeat;}
.nav-links a:hover{ color: #000;}
.nav-links .next{ transform: rotate(180deg);}
.nav-links .current{color: var(--color-green);}
.nav-links .disabled{ opacity: 0.4;}


.art-page a, .art-page span{ display: block; width: 32px; height: 32px;}
.art-page .page-no a, .art-page .page-no span{  color: #999;  text-align: center; padding: 0 .3rem; line-height: 32px; font-size: 1.6rem; font-family: "AvenirLTProHeavy";}
.art-page .page-no span{ color: var(--color-green);}
.art-page .page-no a:hover{ color: var(--color-green);}

/* header */
body::before, .header-wrapper{ content: ''; display: block; height: 200px; transition: all .5s;}
.header{ width: 100%; position: fixed; left: 0; top: 0; z-index: 11; background-color: #FFF;}
.header-wrapper{ width: 100%; max-width: 1180px; margin: auto; position: relative; display: flex; flex-direction: column; justify-content: space-between;}
.top-logo{ text-align: center;}
.top-logo img{ display: inline-block; vertical-align: middle; height: 90px; transition: all 0.5s; opacity: 1;}
.top-logo .m-search-btn, .top-logo .m-menu-btn{ display: none;}

.primary-navigation{position: relative; z-index: 10; max-width: 800px; width: 100%; margin-left: auto; margin-right: auto; }
.primary-navigation .primary-menu-container{ width: 100%;}
.menu-button-container{ display: none;}
.menu-wrapper{ width: 100%; display: flex; justify-content: space-between; }
.menu-item{
  position:relative;
}
.menu-wrapper>.menu-item>a{ display: block; font-size: 1.1rem; font-family: "AvenirLTProHeavy"; color: #231f20; height: 40px; position: relative;}
.menu-wrapper>.menu-item:hover>a::after{ content: ''; position: absolute; left: 50%;bottom: 0; margin-left: -50px; width: 100px; height: 5px; background-color: #a0a47c; }
.menu-wrapper>.menu-item>a:hover{ color: var(--color-green-hover); }

/* search */
/*
.nav-search-wrap{ position: relative; top: -5px; }
.search-popup{ display: none; overflow: hidden; background-color: #FFF; box-shadow: 0 1px 10px 0 rgba(0,0,0,.2); position: absolute; top: 50px; right: 0; align-items: center; padding: 20px;}
.search-popup>div{ display: flex;}
a.nav-search-open, button.nav-search-btn{display: inline-block; margin-left: 10px; border: none; cursor: pointer; width: 26px; height: 30px; background-image: url(../image/search-btn-black.svg); background-size: 22px 22px; background-position: center center; background-repeat: no-repeat; overflow: hidden; text-indent: -999px; background-color: transparent;}
a.nav-search-open:hover, button.nav-search-btn:hover{ background-image: url(../image/search-btn-green.svg);}
a.nav-search-open.active{ background-image: url(../image/icon-close.svg);}
*/

.search-pc{margin-right: 20px; position: relative;}
.search-key{ position: absolute; display: flex; align-items: flex-end; z-index: 1; right: 20px; bottom: 0; width: 0; height: 36px; transition: all .5s; overflow: hidden; }
.search-key input{border: none; display: block; width: 100%; height: 18px; border-bottom: 1px solid #909090; }
.search-pc button{ position: relative; z-index: 2; width: 18px; height: 18px; background-image: url(../image/search-btn-black.svg); background-size: 100% 100%; border: none; background-color: #FFF; overflow: hidden; text-indent: -999px; cursor: pointer;}
.search-pc:hover button{ background-image: url(../image/search-btn-green.svg);}
.search-pc:hover .search-key{ width: 150px;}


.search-popup input[type='text']{ display: inline-block; padding: 0 1rem;  height: 30px; border-radius: 1px; width: 130px; border: 1px solid #909090; }
.search-popup input[type='text']:focus{ border-color: var(--color-green-hover);}

/* header-fixed */
.header-fixed::before, .header-fixed .header-wrapper{ height: 120px;}
.header-fixed .header{box-shadow: 0 1px 5px 0 rgba(0,0,0,.2);}
.header-fixed .top-logo img{ height: 0; opacity: 0;}


/* 下拉菜单内容，设置为隐藏 */
.sub-menu{
  left: 50%;
  top: 40px;
  background-color:rgba(255, 255, 255, 0.8);
  position:absolute;
  display:none;
  padding: 1.5rem 0;

}
.sub-menu a{ display: block; padding: 1rem 0 1rem 1.5rem; font-size: 1.1rem; color: #231f20; }
.sub-menu a:hover{ color: var(--color-green-hover);}

.menu-item:nth-child(2) .sub-menu{  width: 14rem;  margin-left: -7rem;}
.menu-item:nth-child(3) .sub-menu{  width: 16rem;  margin-left: -8rem;}
.menu-item:nth-child(4) .sub-menu{  width: 12rem;  margin-left: -6rem;}
.menu-item:nth-child(5) .sub-menu{  width: 12rem;  margin-left: -6rem;}

.top-lang{ width: 100%; margin:0 auto; display: flex;  align-items: center; padding-top: 1rem;}
.top-lang,.top-lang a{ color: #909090;}

.top-toolbar{ display: flex; align-items: center; margin-left: auto;}
.font-size{ position: relative;}
.font-size a{ display: block; width: 22px; padding: 0;}
.font-size a:hover{ color: var(--color-green-hover);}
.font-size-selected{ position: relative;}
.font-size-selected a{ display: block; padding-right: 1rem; text-align: center;}
.font-size-selected a:hover{ color: var(--color-green-hover);}
.font-size-selected a::before{ content: ''; width: 22px; position: absolute; left: 0; bottom: 0;  border-bottom: 1px solid #909090;}
.font-size-selected a::after{ content: ''; position: absolute; top: 0; right: 0; width: 12px; height: 22px; background-image: url(../image/font-arrow.png); background-repeat: no-repeat; background-position: center center;}
.font-size-selected a.active::after{ transform: rotate(180deg);}
.font-size-xs{ font-size: 12px;}
.font-size-sm{ font-size: 15px;}
.font-size-lg{ font-size: 18px;}
.font-size-option{ display: none; position: absolute; top: 1.8rem; left: 0; text-align: center;  background-color: #FFF; z-index: 11;}

.dec-btn{  margin-left: 1.6rem;}
.dec-btn a { display: block; height: 100%; border: 1px solid #909090; padding: 0.2rem 0.5rem;}
.dec-btn a:hover{ color: var(--color-green-hover);}

/* change lang */
.languages a.lang-zh-CN{ display: none;}
.languages{ display: flex;}
.languages a, .languages span{ display: flex; align-items: center; margin-left: 1.5rem;}
.languages a:hover{ color: var(--color-green-hover);}

.top-social{ display: flex; justify-content: right; margin-left: 1rem;}
.top-social a{ margin-left: 1rem;}
.top-social a:hover{ opacity: 0.8;}
.top-social img{ width: 23px; vertical-align: bottom;}


/* form */
.home-newsletter{ background:linear-gradient(#f4f4ee, #f4f4ee); margin-top: 5rem; }
.home-form-desc{ text-align: right; padding-bottom: 0.5rem;  color: #666;}
.home-form-header{ font-size: 2rem; padding: 5rem 0 4rem; text-align: center; color: #666;}
.home-form-body{ max-width: 550px; margin: auto;}
.form-item-footer{ text-align: center; padding-top: 1rem; padding-bottom: 5rem;}
.form-btn-submit{ cursor: pointer; display: inline-block; text-transform: uppercase; width: 300px; height: 60px; line-height: 60px; border: none; background-color: var(--color-green); font-size: 1.5rem; color: #FFF; text-align: center;}
.form-btn-submit:hover{ background-color: var(--color-green-hover);}
.form-item{ margin-bottom: 2rem; color: #666;}
.form-item-name{ display: flex; justify-content: space-between;}
.form-item-name>div{ width: 48%;}
.form-input{ border: 1px solid #a5a5a5; box-sizing: border-box; width: 100%; height: 44px; line-height: 44px; padding: 0 20px; font-size: 1rem; }
.form-item .error{ font-size: 12px; color: #e95f03; padding-top: 5px;}
.form-item-newsletter label{ display: flex; font-size: 1rem;}
.form-item-newsletter label p:nth-child(1){ width: 50px;}
.checkbox-newsletter{ display: inline-block; width: 20px; height: 20px; border: 1px solid #666; border-radius: 50%; cursor: pointer;}
.checkbox-newsletter.active{ background-image: url(../image/icon-checked.png); background-position: center center; background-size: 80%; background-repeat: no-repeat;}
.form-item-newsletter a{ display: inline-block; border-bottom: 1px solid #888; color: #666;}
#newsletter{ opacity: 0;}

/* no-results */
.no-results{ padding-top: 3rem;}
.no-results .page-content p{ padding: 2rem 0;}
.no-results .page-content .search-field, .search-wrap .search-field{ border: 1px solid var(--color-green); padding: 10px;}
.no-results .page-content .search-submit, .search-wrap .search-submit{ display: inline-block; height: 38px; line-height: 38px; padding: 0 1rem; background-color: var(--color-green); color: #FFF; border: none; cursor: pointer;}
.no-results .page-content .search-submit:hover, .search-wrap .search-submit:hover{ background-color: var(--color-green-hover);}
/* search page */
.search-wrap .search-form{ padding: 2rem 0;}
.search-wrap .search-field{ width: 200px;}


.result-item{ padding-top: 2rem;}
.result-item h4 a{ font-size: 1.2rem; color: var(--color-green);  text-decoration: underline;}
.result-item .desc{ padding-top: 0.5rem; font-size: 1.1rem; line-height: 1.6; color: var(--color-gray);}


/* roll top */
.gototop{ position: fixed; right: 1rem; bottom: 2rem; z-index: 10;}
.gototop a{ font-size: 1.1rem;  color: var(--color-green); display: flex; align-items: center;}
.gototop a:hover{ text-decoration: underline;}
.gototop a::before{ content: ''; width: 18px; height: 18px; border: 2px solid #999; 
  display: inline-block; background-image: url(../image/arrow-top-gray.svg); 
  background-repeat: no-repeat; 
  background-position: center center; 
 margin-right: 5px; border-radius: 50%; transition: all .2s ease-out; 
 background-size: 60%;}
 .gototop a:hover::before{ border-color: var(--color-green-hover); background-color: var(--color-green-hover); background-image: url(../image/arrow-top-white.svg);}




/* footer */
.footer{ background-color: #edede2; margin-top: 5rem;}
.footer, .footer a{ color: #505050;}
.home-footer-about .title{ padding: 4rem 0; font-size: 2rem;}
.home-footer-cotent{ font-size: 1rem; text-align: justify;
  text-justify: inter-word;}
.home-footer-cotent p:nth-child(2){ margin-top: 1rem; }

.footer-nav{ margin-top: 3rem; padding-top: 3rem; border-top:  1px solid #505050;}
.footer-nav-left ul{ display: flex;  flex-wrap: wrap; justify-content: center;}
.footer-nav-left ul li{ margin: 0 1rem 1.5rem 1rem;}
.footer-nav-left ul a{ font-size: 1rem;}
.footer-nav-left ul a:hover{ color: var(--color-green-hover);}

.footer-social-title{ font-size: 1.3rem; color: var(--color-green); text-align: center; margin-top: 2rem; }
.footer-social ul{ display: flex; margin-top: 1rem; justify-content: center;}
.footer-social ul li{ margin:0 1rem;}
.footer-social ul li>a>img:hover{ opacity:  0.8;}
.footer-social .wechat{ position: relative;}

.footer-social .wechat-qrcode{ cursor: default; display: none; position: absolute; left: 0; bottom: 30px; background-color: #FFF; padding: 10px; }
.footer-social .wechat:hover .wechat-qrcode{ display: block;}
.footer-social .wechat-qrcode img{ width: 200px;}
.footer-social .wechat-qrcode span{ display: block; text-align: center;}
.footer-social .wechat-qrcode span:nth-child(2){ font-size: 13px; color: #000; margin-top: 20px;}
.footer-social .wechat-qrcode span:nth-child(3){ color: #888; font-size: 12px; margin-top: 10px;}
.footer-social .wechat-qrcode::after{ content: ''; position: absolute; left: 10px; bottom: -20px; 
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-top: 10px solid #fff;}

.footer-copyright{ padding-top: 3rem; font-size: 14px; padding-bottom: 2rem; text-align: center;}

.cookie-popup{ background-color:var(--color-green); position: fixed; width: 100%; left: 0; bottom: 0; color: #FFF; z-index: 10; display: none; }
.cookie-popup .wrap{ display: flex; justify-content: space-between; padding: 2rem 0; align-items: center;}
.cookie-left{ padding-right: 2rem; font-size: 1.1rem;}
.cookie-left a{ display: inline-block; border-bottom: 1px solid #FFF; color: #FFF;}
.cookie-right a{ text-transform: uppercase; display: block; font-size: 1.3rem; width: 270px; height: 60px; line-height: 60px; color:var(--color-green); text-align: center; background-color: #FFF;}

.pc-br{ display: block;}
.back-btn{ text-align: right; padding:20px 0 10px 0;}
.back-btn a{ display: inline-block; padding: 8px 20px; color: #FFF; background-color: var(--color-green); font-size: 1rem;  vertical-align: middle;}
.back-btn a:hover{ background-color: var(--color-green-hover); }
.back-btn a::before{ content: ''; position: relative; top: 1px; margin-right: 5px; transform: rotate(180deg); display: inline-block; width: 12px; height: 12px; background-image: url(../image/more-arrow-white.svg); background-size: 100% 100%;}

/* hover */
.img-hover, .social-icon-hover{transition: all 0.5s;}
.img-hover:hover{transform: translateY(-10px); 
  box-shadow:0px 0px 10px rgba(68, 68, 68, 0.3);
}
.social-icon-hover:hover{transform: translateY(-5px); }


@media screen and (max-width: 1108px) {

.header-wrapper{ height: auto;}
  .header-fixed .top-logo{ display: block;}
  .header{ height: auto; width: 100%; left: 0; top: 0; z-index: 9; display: flex; flex-direction: column;}
  .top-logo{ order: 1; height: auto; border-bottom: 1px solid #CCC;  padding: 1rem 0;}
  .top-logo a {
    display: block;
    height: auto;
}
  .top-logo img{ height: 80px; vertical-align: top;}
  .primary-navigation{ order: 2; max-width: 100%;}
  .top-lang{ order: 3;}

  /* top menu */
  .primary-navigation, .top-lang{ display: none;}
  .menu-wrapper {
    flex-direction: column;
  }
  .top-logo .m-search-btn, .top-logo .m-menu-btn{ display: block; position: absolute; top: 40px; background-repeat: no-repeat; background-position: center center; text-indent: -999px; overflow: hidden; width: 30px; height: 30px;}

  body::before,.header-fixed::before {
    content: '';
    height: 110px;
  }
  .header-fixed .header-wrapper{ height: auto;}
  /*  header-fixed */
  .header-fixed .top-logo img{ height: 80px; opacity: 1;}

  .top-logo .m-search-btn{ background-image: url(../image/icon-search.png); left: 1.5rem; background-size: 70%;}
  .top-logo .m-menu-btn{ background-image: url(../image/icon-menu.svg); right: 1.5rem; background-size: 100%;}
  .top-logo .m-menu-btn.active{ background-image: url(../image/icon-close.svg);}

  .menu-wrapper .menu-item-has-children>a::before{ content: ''; position: absolute; top: 0.8rem; right: 1.5rem; width: 25px; height: 25px; background-image: url(../image/arrow-down-green.svg); background-size: 100% 100%; transition: all .2s ease-out }
  .menu-wrapper .menu-item-has-children:hover>a::before{ left: auto;bottom: auto; margin-left: 0; width: 25px; height: 25px; background-color: #fff;  }
  .menu-wrapper .menu-item-has-children>a.active::before{transform: rotate(180deg);}
  .menu-wrapper>.menu-item:hover>a::after{ display: none;}

  .sub-menu {
    width: 100% !important;
    margin: 0 !important;
    left: 0;
    top: 0;
    background-color:#f4f4ed;
    position: relative;
    padding: 1rem 0;
  }
  .menu-wrapper>.menu-item>a {
    font-size: 1rem;
    height: auto;
    width: auto;
    padding: 1rem 0 1rem 2rem;
  }

  .sub-menu a {
    padding: 0.5rem 0 0.5rem 2.5rem;
    font-size: 1rem;
  }
  .nav-search-wrap{ display: none;}

  .top-lang {
    height: auto;
    padding:20px 0;
  }
  .top-toolbar{ justify-content: right; margin-right: 2rem;}
  .top-social{ margin-top: 1rem; margin-right: 2rem;}
  .languages a, .languages span{ font-size: 13px;}

  .home-footer-about .title {
    padding: 3rem 0 1.5rem;
    font-size: 1.5rem;
}
}


@media screen and (max-width: 640px) {
  .pc-br{ display: inline;}

  .top-logo img {
    height: 50px;
}
body::before,.header-fixed::before {
  height: 60px;
}
/* header-fixed */
.header-fixed::before{ height: 60px;}
.header-fixed .top-logo img{ height: 50px; opacity: 1;}


.top-logo .m-search-btn, .top-logo .m-menu-btn {
  top: 20px;
  width: 28px;
  height: 28px;
}
.top-logo {
  padding: 0.5rem 0;
}
.home-form-header {
  font-size: 1.5rem;
  padding: 2rem 0 2rem;

}
.home-form-body {
  max-width: 550px;
  margin: 0 2rem;
}
.checkbox-newsletter {
  width: 18px;
  height: 18px;
}
.form-item-newsletter label p:nth-child(1) {
  width: 80px;
}
.form-btn-submit {

  width: 260px;
  height: 46px;
  line-height: 46px;
  font-size: 1.2rem;

}
.footer{ margin-top: 2rem;}
.form-item-footer {
  padding-bottom: 3rem;
}
.home-footer-cotent{ font-size: 0.8rem;}
.footer-social img{ width: 28px;}
.footer-copyright {
  font-size: 10px;
}
.nav-links {
  padding: 2rem 0;
}
.nav-links .page-numbers {
  width: 28px;
  height: 28px;
  line-height: 28px;
  font-size: 1.2rem;
}
.footer-social .wechat-qrcode {
  left: -90px;
  bottom: 30px;
  padding: 10px;
}
.footer-social .wechat-qrcode img {
  width: 180px;
}
.footer-social .wechat-qrcode::after {
  left: 93px;

}
.footer-nav-left ul li {
  margin: 0 1rem 1rem 1rem;
}
.home-footer-about .title {
  padding: 2rem 0 1rem;
  font-size: 1.5rem;
}

}