@charset "UTF-8";

/*
Theme Name: Justfont
Author: boyu 
Requires at least: 1.1
Tested up to: 6.2
Requires PHP: 5.6
Version: 1.5
Text Domain: justfont

Justfont WordPress Theme, (C) 2023 boyu.one
*/


/*Mobile*/
@import url('style-mobile.css');

@import url('style-justfont.css');

/* Variables */
:root {
  --justfont-color-green: #66AC35;
  --justfont-color-info-grey: #6C757E;
  --justfont-color-Gray900: #212529;
  --justfont-color-Gray800: #343a40;
  --justfont-color-Gray700: #495057;
  --justfont-color-Gray600: #6c757d;
  --justfont-color-Gray500: #adb5bd;
  --justfont-color-Gray400: #ced4da;
  --justfont-color-Gray300: #dee2e6;
  --justfont-color-Gray200: #e9ecef;
  --justfont-color-Gray100: #f8f9fa;
  --justfont-color-white: #FFFFFF;
  --justfont-color-accent: #ffc107;

  --justfont-color-black: #000000;
  --justfont-h-color: #343434;
  --justfont-p-color: #221122;



  /*Desktop-專案頁面、首頁*/
  --font-size-h1: 40px; /*H1 - 金萱 - 40 pt*/
  --font-size-h2: 37.196px; /*H2 -金萱SemiBold - 37.196pt*/
  --font-size-h3: 28px; /*H3 -金萱SemiBold - 28pt */
  --font-size-h4: 21.25px; /*H4 - 金萱SemiBold  - 21.5 pt */
  --font-size-h5: 20px; /*H5- 源樣黑體 Bold  - 21.5 pt */
  --font-size-h6: 16px; /*H6- 源樣黑體 Medium  - 16px*/
  --font-size-p: 16px; /* P -  源樣黑體 Regular - 16px */
  --font-size-caption: 16px;
  --font-size-small: 14px; /*Small Text 源樣黑體 regular - -14pt*/

  --line-height-h1: 58px;
  --line-height-h2: 50px;
  --line-height-h3: 31px;
  --line-height-h4: 26px;
  --line-height-h5: 33px;
  --line-height-h6: 33px;

  /*文章*/
  --single-font-size-h1: 40px; /*H1 - 金萱  - 40 pt*/
  --single-font-size-h2: 37.196px; /*H2 -金萱SemiBold - 37.196pt*/
  --single-font-size-h3: 28px; /*H3 -金萱SemiBold - 28pt*/ 
  --single-font-size-h4: 21.25px; /*H4 - 金萱SemiBold  - 21.5 pt */
  --single-font-size-h5: 20px; /*H5- 源樣黑體 Bold  - 21.5 pt */
  --single-font-size-h6: 16px; /*H6- 源樣黑體 Medium  - 18px*/
  --single-font-size-p: 18px;  /* P - 源樣黑體  regular20 pt  14px*/
  --single-font-size-caption: 16px;
  --single-font-size-18px: 18px; /*blockquote蘭陽明體*/
  --single-font-size-post: 18px; /*Aside金萱、P01源樣黑體、P02凝書體、P03金萱那提、P04金萱、P05蘭陽明體源樣黑體*/
  --copy-font-size-p:16px;

  /*字體*/
  --justfont-font-family-jf-jinxuan: 'jf-jinxuan'; /*金萱*/
  --justfont-font-family-genyogothictw: 'genyogothictw'; /*P01 -  源樣黑體 Regular - 18px*/
  --justfont-font-family-inter: 'Inter'; /*Small Text 源樣黑體 regular - -14pt*/
  --justfont-font-family-lanyang: 'jf-lanyangming'; /*blockquote- 蘭陽明體 W4  - 18px & P05 -  蘭陽明體 W4 - 18px*/
  --justfont-font-family-creamfont: 'creamfont'; /*P02 -  凝書體 Regular - 18px*/
  --justfont-font-family-jf-jinxuanlatte: 'jf-jinxuanlatte'; /*P03- 金萱那提 Regular - 18px*/


  /*new posts & single posts 列表*/
   --article-post-container-width: 360px;
   --article-post-container-height: 490px;
   --article-post-container-height-img: 189px;
   --article-post-title: var(--font-size-h4);

   /*simple single posts 簡單文章模板列表*/
   --simple-post-container-width: 360px;
   --simple-post-container-height: 357.5px;
	 --simple-post-container-height-img: 189px;
	 --simple-post-title: 24px;

   --entry-content-single-block-p-font-weight: 500;

   --card-font-weight: 600;

   --card1-width: 360px;
   --card1-height: 280px;
   /* --card1-width-img: 328px;
   --card1-height-img: 185px; */
   --card1-width-img: 328px;
   --card1-height-img: 172.2px;
   --card1-line-height: 26px;
   --card1-line-height-info: 26px;
   --card1-font-size-title: 21.25px;
   --card1-font-size-info: var(--font-size-p);
   --card1-content-height: 57px;/*28.32px;*/

   --card2-width: 358.91px;
   --card2-height: 360px;
   --card2-width-img: 328px;
   --card2-height-img: 246px; /*184.5px*/
   --card2-line-height: 30.6px;
   --card2-line-height-info: 26px; /*22.9px;*/
   --card2-font-size-title: 21.25px;
   --card2-font-size-info: var(--font-size-p);
   --card2-letter-spacing-title: 0.0015rem;
   
   --btn-font-size: 20px;
   --btn-more-font-size: 16px;

   --custom-collapse-width: 24px;
   --custom-collapse-height: 16.04px;
   --custom-collapse-border-radius: 10.5px;

   --new-post-label-width: 38.14px;
   --new-post-label-height: 19.1px;
   --new-post-label-font-size: 12px;
   --new-post-label-line-height: 22px;

   --single-bread-width: 390px;
}

/*Mobile*/
@media only screen and (max-width: 1099px) {
  :root {
    /*Mobile專案頁面、首頁*/
    --font-size-h1: 40px; /*H1 - 金萱SemiBold   - 40 pt*/
    --font-size-h2: 28px; /*H2 -金萱SemiBold -28 pt*/
    --font-size-h3: 28px; /*H3 -金萱SemiBold- 24.44 pt*/
    --font-size-h4: 21.25px; /*H4 - 金萱SemiBold  - 21.5 pt */
    --font-size-h5: 20px; /*H5- 源樣黑體 Bold  - 21.5 pt  */
    --font-size-h6: 16px; /*H6H6- 源樣黑體 Medium  - 16px*/
    --font-size-p: 16px; /*P -  源樣黑體 Regular - 16px */
    --font-size-caption: 16px;
    --font-size-small: 14px; /*Small Text 源樣黑體 regular - -14px */
    
    --line-height-h1: 37px;
    --line-height-h2: 36px;
    --line-height-h3: 40px;
    --line-height-h4: 31px;
    --line-height-h5: 26px;
    --line-height-h6: 21px;

    /*文章*/
    --single-font-size-h1: 40px; /*H1 - 金萱  - 40 pt*/
    --single-font-size-h2: 24px; /*H2 -金萱SemiBold - 24.44 pt*/
    --single-font-size-h3: 24.4px; /*H3 -金萱SemiBold - 24.44 pt */ 
    --single-font-size-h4: 21.25px; /*H4 - 金萱SemiBold  - 21.25 pt */
    --single-font-size-h5: 20px; /*H5- 源樣黑體 Bold  - 21.5 pt */
    --single-font-size-h6: 16px; /*H6- 源樣黑體 Medium  - 18px*/
    --single-font-size-p: 16px;  /* P - 源樣黑體  regular20 pt  14px*/
    --single-font-size-18px: 18px; /*blockquote蘭陽明體*/
    --single-font-size-post: 16px; /*Aside金萱、P01源樣黑體、P02凝書體、P03金萱那提、P04金萱、P05蘭陽明體源樣黑體*/
    --single-font-size-caption: 14px; /*caption 源樣黑體 regular -12 pt  16px*/
    --single-font-size-small: 14px; /*Small Text 源樣黑體 regular - -14px */
    --copy-font-size-p: 14px;  /* P - 源樣黑體  regular20 pt  14px*/

    /*new posts & single posts 列表*/
    --article-post-container-width: 330px;
    --article-post-container-height: auto;/*547px*/;
    --article-post-container-height-img: 173.25px;
    --article-post-title: 24.44px;/*var(--font-size-h3)*/;

   
    /*simple single posts 簡單文章模板列表*/
    --simple-post-container-width: 330px;
    --simple-post-container-height: auto;/*320.5px;*/
	  --simple-post-container-height-img: 173.25px;
	  --simple-post-title: var(--font-size-h4);

    --entry-content-single-block-p-font-weight: 500;
    --card-font-weight: 600;

    --card1-width: 272px;
    --card1-height: 206px;
    /* --card1-width-img: 256px;
    --card1-height-img: 144px; */
    --card1-width-img: 246px;
    --card1-height-img: 129.15px;
    --card1-line-height: 21.25px;
    --card1-line-height-info: 21.6px;
    --card1-font-size-title: var(--font-size-h6);
    --card1-font-size-info: var(--font-size-small);
    --card1-font-weight: 400;
    --card1-content-height: 43px;


    --card2-width: 271.93px;
    --card2-height: 271.93px;
    --card2-width-img:246px ;/*248.51px;*/
    --card2-height-img:184.5px;/*185.7px;*/
    --card2-line-height: 26px;
    --card2-line-height-info: 20.72px;
    --card2-font-size-title: var(--font-size-h6);
    --card2-font-size-info: var(--font-size-small);
    --card2-letter-spacing: auto;

    --custom-collapse-width: 20px;
    --custom-collapse-height: 13.36px;
    --custom-collapse-border-radius: 10.5px;

    --new-post-label-width: 44.5px;
    --new-post-label-height: 22.6px;
    --new-post-label-font-size: 14px;
    --new-post-label-line-height: 20.72px;

    --single-bread-width: 330px;
  }
  .parent-element:has(.focused){
    height: 42.5px!important;
    box-shadow: 0px 0px 0px 4px rgb(102 172 53 / 40%);
    border-radius: 50px;
  }
  .material-symbols-outlined, .material-symbols-outlined:active{
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
    border: 2px solid #66AC35 !important;
    border-radius: 50%;
    padding: 5px !important;
    color: #66AC35 !important;
    font-size: 23px;
    font-weight: 800;
    font-weight: bold !important;
  }
  .modal-single-post .post-thumbnail img{
    width: 390px !important;
    height:204.75px !important;
    max-width: 1140px;
    vertical-align: middle;
  }
  .Desktopheight{
    /* height:60.891px; */
  }
  .NewPost{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  /* .modal-open{
    overflow-y: hidden;
  } */
}

@media only screen and (min-width: 1100px) {
  #jf-navbar .navbar-brand{
    position: absolute !important;
  }
  header .desktop-header, .desktop-carousel, footer .desktop-footer, .desktop-div{
    display: block;
  }
  header .mobile-header, .mobile-carousel, footer .mobile-footer{
    display: none;
  }
  .mobile-div{
    display: none !important;
  }
  .NewPost{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

}
.parent-element:has(.focused){
  height: 40px;
  box-shadow: 0px 0px 0px 4px rgb(102 172 53 / 40%);
  border-radius: 50px;
}
html, body {
    box-sizing: border-box;
    height: 100%;
    padding: 0;
    margin: 0;
}
.site {
    box-sizing: border-box;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
header, footer {
    flex-grow: 0;
    flex-shrink: 0;
}
.site-content {
    flex-grow: 1;
}
.model-footer-color{
  background-color: var(--justfont-color-Gray200);
}

h1{ /*H1 - 金萱  - 40 pt*/
  font-family: var(--justfont-font-family-jf-jinxuan);
  font-style: normal;
  font-weight: 700;
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  letter-spacing: 0.03em;
  color: var(--justfont-h-color);
}
h2{ /*H2 -金萱SemiBold - 37.196pt*/
  font-family: var(--justfont-font-family-jf-jinxuan);
  font-style: normal;
  font-weight: 600;
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  color: var(--justfont-color-black);
}
h3{ /*H3 -金萱SemiBold - 28pt */
  font-family: var(--justfont-font-family-jf-jinxuan);
  font-style: normal;
  font-weight: 600;
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  color: var(--justfont-color-black);
}
h4{ /*H4 - 金萱SemiBold  - 21.5 pt */
  font-family: var(--justfont-font-family-jf-jinxuan);
  font-style: normal;
  font-weight: 600;
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  color: var(--justfont-color-black);
}
h5{ /*H5- 源樣黑體 Bold  - 21.5 pt  */
  font-family: var(--justfont-font-family-genyogothictw);
  font-style: normal;
  font-weight: 700;
  font-size: var(--font-size-h5);
  line-height: var(--line-height-h5);
  /* identical to box height, or 163% */
  /*text-align: center;*/
  color: var(--justfont-color-black);
}
h6{ /*H6- 源樣黑體 Medium  - 16px */
  font-family: var(--justfont-font-family-genyogothictw);
  font-style: normal;
  font-weight: 500;
  font-size: var(--font-size-h6);
  line-height: var(--line-height-h6);
  /* identical to box height, or 204% */
  color: var(--justfont-color-black);
}
p{ /*PP -  源樣黑體 Regular - 16px */
  font-family: var(--justfont-font-family-genyogothictw), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  font-size: var(--font-size-p);
  line-height: 30px;
  /* identical to box height, or 188% */
  /*text-align: center;*/
  color: var(--justfont-color-black);
}
.p-small{ /*Small Text 源樣黑體 regular - -14pt*/
  font-family: var(--justfont-font-family-genyogothictw), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  font-size: var(--font-size-small);
  line-height: 17px;
  /* identical to box height */
  /*text-align: center;*/
  color: var(--justfont-color-black);
}

span{ /*P -  源樣黑體 regular - 16 pt*/
  color: var(--justfont-p-color);
  font-size: var(--font-size-p);
  font-family: var(--justfont-font-family-genyogothictw), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.home_title { /*首頁 h2 */
    margin-bottom: 0.2rem;
}
.single-project h5{
  font-weight: 500 !important;
}

/**單篇文章 頁面**/
.modal-single-post h1, .modal-single-post h4, .modal-single-post h5, .modal-single-post h6{
  word-wrap: break-word;
  margin-bottom: 2px;
}
.modal-single-post h1{ /*H1 - 金萱  - 40 pt*/
}
.modal-single-post .entry-content h2{
 /*padding-top: 10px;*/
 color: var(--justfont-h-color);
 font-weight: 500;
 font-family: jf-jinxuan /*post-title for px*/;
}
.modal-single-post h2{ /*H2 -金萱SemiBold - 37.196pt*/
  /*line-height: 30.6px;*/
  margin-bottom: 5px;
}
.modal-single-post h3{ /*H3 -金萱SemiBold - 28pt*/
  /*line-height: 32.6px;*/
  font-size: var(--single-font-size-h3) !important;
  margin-bottom: 8px;
}
.modal-single-post .entry-content h3{
 font-weight: 500;
 line-height: 36px;
}
.modal-single-post h4{ /*H4 - 金萱SemiBold  - 21.5 pt */
}
.modal-single-post h5{ /*H5- 源樣黑體 Bold  - 21.5 pt  */
  font-size: 21.5px !important;
  font-weight: 500;
}
.modal-single-post h6{ /*H6- 源樣黑體 Medium  - 18px */
}
.modal-single-post p{ /*P -  源樣黑體 regular - 16 pt*/
  color: var(--justfont-p-color);
  font-size: var(--single-font-size-p);
}
/*Caption - 源樣黑體  regular-16 pt*/
/*.modal-single-post p{ 
  color: var(--justfont-p-color);
  font-size: var(--single-font-size-caption);
  font-family: Noto Sans CJK TC;
}*/
.entry-content span, .modal-single-post span {
    font-size: var( --single-font-size-p);
    font-style: normal;
}
.single-post .wp-caption-text span, .entry-content figcaption, .entry-content figcaption span{
  font-size: inherit;
  font-weight: 400;
}
.modal-single-post blockquote p{ /*blockquote- 蘭陽明體 W4  - 18px*/
  font-family: var(--justfont-font-family-lanyang) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: var(--single-font-size-p) !important;
  line-height: 33px !important;
  /* identical to box height, or 181% */
  color: var(--justfont-color-black) !important;
  padding: 0  !important;
  margin: 0  !important;
}
.modal-single-post .aside{ /*Aside- 金萱 Medium - 18px*/
  font-family: var(--justfont-font-family-jf-jinxuan);
  font-style: normal;
  font-weight: 500;
  font-size: var(--single-font-size-post);
  line-height: 26px;
  /* identical to box height, or 144% */
  color: var(--justfont-color-black);
}
.modal-single-post .p01{ /*P01 -  源樣黑體 Regular - 18px*/
  font-family: var(--justfont-font-family-lanyang) !important;
  font-style: normal;
  font-weight: 400;
  font-size: var(--single-font-size-post);
  line-height: 32px;
  /* identical to box height, or 178% */
  /*text-align: center;*/
  color: var(--justfont-color-black);
}
.modal-single-post .p02{ /*P02 -  凝書體 Regular - 18px*/
  font-family: var(--justfont-font-family-creamfont) !important;
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 32px;
  /* identical to box height, or 178% */
  /*text-align: center;*/
  color: var(--justfont-color-black);
}
.modal-single-post .p03{ /*P03- 金萱那提 Regular - 18px*/
  font-family: var(--justfont-font-family-jf-jinxuanlatte) !important;
  font-style: normal;
  font-weight: 400;
  font-size: var(--single-font-size-post);
  line-height: 32px;
  /* identical to box height, or 178% */
  /*text-align: center;*/
  color: var(--justfont-color-black);
}
.modal-single-post .p04{ /*P04 -  金萱 Regular - 18px*/
  font-family: var(--justfont-font-family-jf-jinxuan) !important;
  font-style: normal;
  font-weight: 400;
  font-size: var(--single-font-size-post);
  line-height: 32px;
  /* identical to box height, or 178% */
  /*text-align: center;*/
  color: var(--justfont-color-black);
}
.modal-single-post .p05{ /*P05 -  蘭陽明體 W4 - 18px*/
  font-family: var(--justfont-font-family-lanyang) !important;
  font-style: normal;
  font-weight: 400;
  font-size: var(--single-font-size-post);
  line-height: 32px;
  /* identical to box height, or 178% */
  /*text-align: center;*/
  color: var(--justfont-color-black);
}
.modal-single-post .p-small{ /*Small Text 源樣黑體 regular - -14pt*/
}
/**--單篇文章 頁面**/
/* 複製icon */
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 48
}
/* 複製icon */

/**--單篇文章字體 頁面**/
.author-bio .author-bio-content .author-info h5{
  color: #6C757D; /*#66AC35*/
  font-family: var(--justfont-font-family-genyogothictw), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 21.25px;
}
/**--單篇文章字體 頁面**/
/**Button-style**/
/*button 按鈕*/
.btn {
  font-family: var(--justfont-font-family-genyogothictw);
  font-style: normal;
  font-weight: 400;
  font-size: var(--btn-font-size);
  line-height: 24px;
  align-items: center;
  text-align: center;
  letter-spacing: 0.1em;
  color: var(--justfont-color-green);
  background-color: var(--justfont-color-white);
  border: 2px solid var(--justfont-color-green);
  border-radius: 210px;/*50px;*/
  min-width: 101.06px;
  min-height: 36.25px;
  cursor: pointer;
}
.btn:hover {
  color: var(--justfont-p-color);
  background-color: var(--justfont-color-green);
  transition: width 0.15s ease-in-out;
}
.btn:active, .btn:focus{
  background-color: var(--justfont-color-green);
  /*border: 4px solid rgba(102, 172, 53, 0.5);*/
  box-shadow: 0px 0px 0px 4px rgb(102 172 53 / 50%) !important;
  color: var(--justfont-color-black) !important;
}
.btn-more{
  font-family: var(--justfont-font-family-genyogothictw);
  font-size: var(--btn-more-font-size)!important;
  line-height: 22px;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.25);
  border-radius: 44px;
  min-width:103px;
  min-height:42px;
  margin-top:50px;
}
/*--button 按鈕*/

/**分享網址**/
@media only screen and (min-width: 1100px) {
  .Desktopheight{
    height:42px;
  }
  .groups-share-link:has(img){
    padding-bottom: 9px;
    padding-top: 8.6px;
  }
  .groups-share-link img{
    width: 20px;
  }
  .groups-share-link{
    height: 42.5px;
    line-height:42.5px;
    border: 2px solid var(--justfont-color-Gray600);
    padding: 0px 14px 0px 20px;
    display: flex;
    align-items: center;
    font-family: var(--justfont-font-family-genyogothictw);
    font-size: var(--font-size-h6); 
    letter-spacing: 0rem;
  }
  .groups-share-icon{
    line-height:42.5px;
    height: 42.5px;
    border: 2px solid var(--justfont-color-Gray600);
    padding: 0em 14px;
    font-family: var(--justfont-font-family-genyogothictw);
    font-size: var(--font-size-h6); 
    letter-spacing: 0.16rem;
  }
  .groups-share-link-middle{
    line-height:42.5px;
    height: 42.5px;
    border: 2px solid var(--justfont-color-Gray600);
    padding: 0px 15px 0px 10px;
    display: flex;
    align-items: center;
    font-family: var(--justfont-font-family-genyogothictw);
    font-size: var(--font-size-h6); 
    letter-spacing: 0rem;
  }
  .share-link .material-symbols-outlined{
      border: none !important;
      color:var(--justfont-color-Gray600) !important;
      font-size: 1.5em !important;
      padding:0px 0px 5px 0px!important;      
  }
  .copy-link .material-symbols-outlined:active{
	   border: none !important;
	   color: var(--justfont-color-white) !important;
	}
  /*--url button 按鈕*/
}
.share-link .material-symbols-outlined{
	transform: rotateX(180deg);
}
.copy-link:has(.material-symbols-outlined:active), .copy-link:has(.material-symbols-outlined:focus){
	background-color: var(--justfont-color-Gray600);
	color: var(--justfont-color-white);
}
.copy-link:active, .copy-link:active *, .copy-link:focus, .copy-link:focus *{
  background-color: var(--justfont-color-Gray600);
  /*border:none!important;*/
  color: var(--justfont-color-white) !important;
}


.share-link{
    padding: 0 !important;
    transition: box-shadow 0.15s ease;
    border-radius: 60px  !important;
  }

.parent-element .share-link:has(.material-symbols-outlined:active)
  ,.parent-element .share-link:has(.groups-share-icon:active){
    box-shadow: 0px 0px 0px 4px rgba(108, 117, 125, 0.5)  !important;
    /*border: 3px solid rgba(108, 117, 125, 0.5) !important;*/
}
.groups-share-icon:hover{
    cursor: pointer;
}
.share-link *{
  color: var(--justfont-color-Gray600);
}
.share-link-box{
  padding: 4em 0 5em 0;
}
.share-link-box .parent-element{
    display: flex;
    justify-content: center;
    align-items: center;
}
.share-link, .share-link-box hr{
  margin-bottom: 0px;
}
.share-link {
  display: flex; 
  justify-content: center;
  align-items: center;
  padding: 3em 0;
}
.share-link .copy-link-url{
  overflow: hidden;
  white-space: nowrap;
  width:267.75px;
  border-left: none;
  border-right: none;
}
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 48
}
/* .share-link .material-symbols-outlined{
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
    border: none !important;
    padding: 5px;
    color: #495057 !important;
    font-size: 16px !important;
    font-weight: 800;
    font-weight: bold !important;
} */
.groups-share-link img:hover{
  cursor: pointer;
}
.groups-share-width{
  border-top-left-radius: 60px;
  border-bottom-left-radius: 60px;
}
.share-link .copy-link{
  border-top-right-radius: 60px;
  border-bottom-right-radius: 60px;
}
/**分享網址**/

/*heard search 按鈕*/
.inp-heard-search{
  border:none;
  width:536.92px;
  height:40px;
  border-top-right-radius:50px!important;
  border-bottom-right-radius:50px!important;
  background-color:#FFFFFF;
  border-style:solid;
  border-color:var(  --justfont-color-green);
  border-left-style:none;
}
.bt-heard-search{
  background-color:#FFFFFF!important;
  border:none;
  height:40px;
  padding-left:13px;
  border-top-left-radius: 50px; 
  border-bottom-left-radius: 50px;
  border-top-right-radius:0px;
  border-bottom-right-radius:0px;
  border-style:solid;
  border-color:var(  --justfont-color-green);
  border-right-style:none;
}
.parent-element .form-control:focus {
    border-color: var(  --justfont-color-green)!important;
    box-shadow: none !important;
}
/*.inp-heard-search.focused{
  border-color: var(--justfont-color-green) !important;
  box-shadow: 0px 0px 0px 0px rgba(172, 213, 172, 0.916), 4px 0px 0px 4px rgba(172, 213, 172, 0.916)
}
.bt-heard-search.focused {
  border-color: var(--justfont-color-green) !important;
  box-shadow:  4px 0px 0px 0px rgba(172, 213, 172, 0.916), 0px 0px 0px 4px rgba(172, 213, 172, 0.916)
}*/
/*heard search 按鈕*/
.inp-heard-search::-webkit-input-placeholder {
  color: #96b98a;
  font-size: .83em;
}

.a-class:hover h5{
  color: var(--justfont-color-green);
}
/*search 按鈕*/
.btn-search{
  box-sizing: border-box;
  background: var(--justfont-color-white);
  border: 2px solid var(--justfont-color-Gray600);
  border-radius: 21px;
  color: var(--justfont-color-Gray600);
  width: 64px;
  height: 42.5px;
}
.btn-search:hover {
  cursor: pointer;
}
.btn-search:hover *{
  fill: var(--justfont-color-white);
  /* color: var(--justfont-color-white)!important; */
  background-color: var(--justfont-color-Gray600)!important;
}
.btn-search{
  color: var(--justfont-color-white);
  background-color: var(--justfont-color-Gray600);
  border: 2px solid rgba(108, 117, 125, 0.5);
}
/*--search 按鈕*/

/*收合下拉 collapse*/
.custom-collapse{
  background: var(--justfont-color-white);
  border: 1px solid var(--justfont-color-green);
  border-radius: var(--custom-collapse-border-radius); /*50%;*/
  color: var(--justfont-color-green) !important;
  cursor: pointer;
  vertical-align: middle;
  margin: 0 3px 3px 3px !important;
  padding: 0.46px 4.5px;
  font-size: 10px;
  line-height: 12.5px;
}
.dashicons, .dashicons-before:before{
  color: var(--justfont-color-green) !important;
  font-size: 14px !important;
  width: var(--custom-collapse-width) !important;
  height: var(--custom-collapse-height) !important;
  transform: matrix(1, 0, 0, -1, 0, 0);
}
/*--收合下拉 collapse*/
/**--Button-style**/


/**Tag-style**/
/* btn-tag 按鈕 */
.single-keyword{
	white-space: pre-wrap !important;
}
.modal-single-post .entry-footer .tags-links{
  background-color: var(--justfont-color-white);
  border: 2px solid var(--justfont-color-Gray600);
  border-radius: 20px;
  padding: 5px 30px;
  margin-left: 16px;
  font-size: var(--font-size-small);
  line-height: 42px;
  white-space: nowrap;
}
.modal-single-post .entry-footer .tags-links:hover{
  background-color: var(--justfont-color-Gray600);
  border: 2px solid var(--justfont-color-Gray600);
}
.modal-single-post .entry-footer .tags-links:hover *{
  color: var(--justfont-color-white);
}
.modal-single-post .entry-footer .tags-links a{
  color: var(--justfont-color-Gray600); /*#66AC35*/
  font-family: var(--justfont-font-family-genyogothictw);
  font-size: var(--font-size-small);
  line-height: var(--font-size-small);
}
.modal-single-post .entry-footer h5{
  color: var(--justfont-color-Gray600); /*#66AC35*/
  /*font-family: var(--justfont-font-family-genyogothictw);
  font-size: 21.25px;*/
}
.modal-single-post .entry-footer .tags-links:active
{
  box-shadow: 0px 0px 0px 4px rgba(157, 161, 157, 0.916);
}
/* btn-tag 按鈕 */
/*hot news*/
.new-post-label{
  background: var(--justfont-color-green);
  border-radius: 4px;
  width: var(--new-post-label-width);
  height: var(--new-post-label-height);
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -1.5em;
}
.new-post-label label{
  /*font-size: 3px;
  line-height: 11px;*/
  font-family: var(--justfont-font-family-genyogothictw);
  font-style: normal;
  font-weight: 500;
  font-size: var(--new-post-label-font-size);
  line-height: var(--new-post-label-line-height);
  /* or 180% */
  display: flex;
  align-items: flex-end;
  text-align: center;
  color: var(--justfont-color-white);
}
/*hot news*/
/**--Tag-style**/

/**Card-style**/
.card-1{
  max-width: var(--card1-width);
  height: var(--card1-height);
  /*border: none;
  box-shadow:0px 3px 5px 0px #d1d1d1;*/

  background: var(--justfont-color-white);
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 4px !important;
  filter: grayscale(1);
  overflow: hidden;
}
.card-1 .post-img{
  max-width: var(--card1-width-img);
  width: var(--card1-width-img);
  height: var(--card1-height-img);
  background: var(--justfont-color-Gray200);
  overflow: hidden;
  margin: .8em;
}
.card-1 img{
  width: 100%;
  height: 100%;/*var(--card1-height-img);*/
  object-fit: cover;
  object-position: 100% 0; 
}
.card-1 .main-post{
  /*display: flex;
  justify-content: center;*/
}
.card-1 .post-inner{
  height: var(--card1-content-height);
  /* position: relative; */
  top: 2%;
  margin: 1.2em .8em;
}
.card-1 .post-title h5{
  /*color: var(--justfont-p-color);
  font-weight: var(--card-font-weight);
  font-family: Noto Sans TC;
  padding-left: 6%;
  padding-top: 6px;*/
  font-size: var(--card1-font-size-title);
  line-height: var(--card1-line-height);
  margin: 0px !important;
  font-weight: 500;
}
.card-1 .post-content{
  /*font-size: var(--card1-font-size-info);
  font-family: Noto Sans TC;
  padding-left: 6%;*/
  margin-top: 0px;
}
.card-1 .post-content p{
  font-size: var(--card1-font-size-info);
  color: var( --justfont-color-Gray600);
  line-height: var(--card1-line-height-info);
  font-weight: 400;
}
.card-1:hover, .card-2:hover, .modal-posts-center:has(.active) .card-2{
  box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.15);
  filter: grayscale(0);
  transition: box-shadow 0.15s ease, filter 0.15s ease;
}
.card-1:hover h5, .card-2:hover h5, .swiper-slide-active:has(.active) .card-1 h5, .modal-posts-center:has(.active) .card-2 h5{
  color: var(--justfont-color-green);
  transition: color 0.15s ease;
}

.card-2{
  max-width: var(--card2-width);
  height: var(--card2-height);
  /* margin: 0 0.3em; */
  background: var(--justfont-color-white);
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 4px !important;
  filter: grayscale(1);
}.card-2 .main-post{
  /*position: relative;
  top: 5%;*/
  display: flex;
  justify-content: center;
}
.card-2 .post-img{
  max-width: var(--card2-width-img);
  height: var(--card2-height-img);
  background: var(--justfont-color-Gray200);
  overflow: hidden;
  margin: 1em;
}
.card-2 img{
  width: var(--card2-width-img);/*100%;*/
  min-height: var(--card2-height-img);
  /*height: 135%;*/
  object-fit: cover; 
  object-position: 100% 0; 
}
.card-2 .post-inner{
  height: var(--card2-content-height);
  /*position: relative;
  top: 5%;*/
}
.card-2 .post-title h5{
  font-size: var(--card2-font-size-title);
  line-height: var(--card2-line-height);
  margin: 0px !important;
  font-weight: 500;
}
.card-2 .post-content p{
  font-size: var(--card2-font-size-info);
  color: var( --justfont-color-Gray600);
  line-height: var(--card2-line-height-info);
  font-weight: 400;
}
.modal-05 .card-2 img{
  /*height: auto;*/
}
/**--Card-style**/

/**Article-style**/
.article-post-container{
  max-width: var(--article-post-container-width);
  height: var(--article-post-container-height);
  padding: 0;
  border-bottom: 1px solid  var(--justfont-color-Gray400);
  display: flex;
  flex-direction: column;
}
.article-post-container .main-post{
  position: relative;
}
.article-post-container .main-post, .simple-post-container .main-post{
  flex-grow: 1;
}
.article-post-container .post_cover{
  width: 100%;
}
.article-post-container img:not(.emoji){
  width: 100%;
  height: var(--article-post-container-height-img);
  object-fit: cover;
  object-position: 100% 0;
  opacity: 1;
  transition: opacity 0.15s ease;
}
.article-post-container img:hover{
  opacity: 0.9;
}
.modal-posts-center:has(.active) .article-post-container img{
  opacity: 0.9;
}
.article-post-container .post-cats, .simple-post-container .post-cats{
	padding-top: 6px;
	font-weight: 500;
	color: var(--justfont-color-info-grey);
	transition: color 0.15s ease;
}
.article-post-container p{
	color: var(--justfont-color-Gray600);
	line-height: 28px;
	letter-spacing: 0.03em;
}
.article-post-container .post-info{
  margin-top: auto;
}
.article-post-container .p-small p{
  color: var(--justfont-color-Gray600);
  font-size: var(--font-size-small);
  line-height: 17px;
}
.article-post-container h4{
  font-size: var(--article-post-title);
  transition: color 0.15s ease-in-out;
}
.article-post-container h4:hover, .simple-post-container h4:hover
, .modal-posts-center:has(.active) .article-post-container h4
, .modal-03-context:has(.active) .simple-post-container h4{
  color: var(--justfont-color-green);
}

.simple-post-container{
  max-width: var(--simple-post-container-width);
  min-height: var(--simple-post-container-height);
  border-bottom: 0.6px solid #CED4DA;
  display: flex;
  flex-direction: column;
}

.simple-post-container .post_cover{
  width: var(--simple-post-container-width);
  height: var(--simple-post-container-height-img);
}

.simple-post-container img{
  width: 100%;/* var(--simple-post-container-width);*/
  object-fit: cover;
  object-position: 100% 0;
  opacity: 1;
  transition: opacity 0.15s ease;
}
.simple-post-container img:hover{
  opacity: 0.9;
}
.modal-03-context:has(.active) img{
  opacity: 0.9;
}
.simple-post-container h4{
  font-size: var(--simple-post-title);
  line-height: 31px;
}
.simple-post-container .p-small p{
  color: var(--justfont-color-Gray600);
  font-size: var(--font-size-small);
  line-height: 21px;
  margin-bottom: .5em;
}
/**--Article-style**/

/**swiper 手機版左用滑動style**/
.swiper, swiper-container {
    /*margin-left: -1em !important;*/
}
.swiper-slide-active:has(.active) .card-1{
	filter: grayscale(0);
}
.swiper-pagination {
    position: relative !important;
}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
	bottom: var(--swiper-pagination-bottom, -.3em) !important;
}
.swiper-pagination-bullet-active{
	background-color: var(--justfont-color-Gray900) !important;
}
/**--swiper 手機版左用滑動style**/

/**Page-sylte**/
/*頁碼*/

@media (min-width: 1100px) {
  .page-numbers {
      margin: 0px 14px;
  }
  .nav-links:has(.next, .prev):has(.page-numbers) .next, .nav-links:has(.next, .prev):has(.page-numbers) .prev {
    border: 2px solid var(--justfont-color-green);
    border-radius: 21px;
    padding: 1px 12px;
    -webkit-text-stroke: 1px;
  }
  .nav-links .next:hover, .nav-links .next:active, .nav-links .prev:hover, .nav-links .prev:active {
      border-color: var(--justfont-color-green);
      background: var(--justfont-color-green);
  }
  .nav-links .next:hover *, .nav-links .next:active *, .nav-links .prev:hover *, .nav-links .prev:active *{
      color: var(--justfont-color-black);
  }
  .nav-links > .page-numbers:not(.current):not(.next):not(.prev):hover *, .nav-links > .page-numbers:not(.current):not(.next):not(.prev):active *{
    color: var(--justfont-color-green);
  }
  .nav-links .next:active, .nav-links .prev:active {
    box-shadow: 0px 0px 0px 2px rgb(102 172 53 / 40%);
  }
  .nav-links:not(.current) p{
    color: var(--justfont-color-Gray600);
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
  }
  .nav-links .current p{
    color: var(--justfont-color-green);
  }
}
.nav-links, .js-page-numbers{
	display: flex;
	justify-content: center;
	align-items: center;
}
.js-page-numbers *{
	color: var(--justfont-color-green) !important;
	text-decoration: none;
}
.nav-links p{
  display: inline-block;
	/*padding: 0px 12px;*/
	margin: 0;
	width: 16px;
  text-align: center;
}
.nav-links .dots p{
  display: contents;
}
.page-numbers p{
	color: var(--justfont-color-green);
  /*border: 2px solid #66AC35;
  background-color: white;
  cursor: pointer;
  font-size: 22px;
  font-weight: 400;
  border-radius: 50px;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px;
  text-decoration: none;
  color:#66AC35;*/
}
.page-numbers:hover{
  /*background-color: #66AC35;
  color:white !important;*/
}
.page-numbers{
	margin: 0px 12px;
}
span.page-numbers.current .meta-nav {
  display: inline-block;
  position: relative;
  text-align: center;
}
span.page-numbers.current .meta-nav::after {
  content: '';
  position: absolute;
  top: 30px;
  right: 0;
  height: 3px;
  width: 16px;
  background-color: var(--justfont-color-green);
}
.vertical-center:has(.navigation > div.nav-links > a.page-numbers) {
    margin: 4em 0 6.5em 0;
}
/*頁碼*/
/**--Page-sylte**/

	.modal-single-page{
	 padding-bottom: 40px;
	}
	.modal-single-page entry-header, .modal-single-page entry-content, .modal-single-page h1, .modal-single-page h2{
	 padding-top: 20px;
	}
	/*文章*/
	.entry-header .post-thumbnail img{
	   max-width: 100% !important;
	}
	.single-bread a:hover{
	 color: var(--justfont-color-green);
	}
	.entry-content, .entry-footer, .author-bio, .share-post{
	 max-width: 750px;
	 margin: auto;
	}
	/*header title & posted-by*/
	.div-bread{
		max-width: var(--single-bread-width);
	}
	.single-bread{
		margin: auto;
		padding-top: 2em; 
		color: var(--justfont-color-Gray600) !important;
		font-size: var(--font-size-small) !important; 
		font-family: var(--justfont-font-family-genyogothictw) !important;
		/*white-space: pre-wrap;*/

		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.modal-single-post .entry-header{
	 text-align: center;
	}
	.modal-single-post .entry-header h1{
	 letter-spacing: 0.01rem;;
	 padding-top: 40px;
	 padding-bottom: 40px;
	 max-width: 750px;
	 margin: auto;
	}
	.posted-by{
	 padding-bottom: 40px;
	}
	.posted-by *, .modal-single-post .wp-caption-text, .modal-single-post figcaption, .modal-single-post figcaption span{
	 font-size: var(--single-font-size-caption);
	 color: var(--justfont-color-info-grey);
	 text-decoration: none;
	 font-family: var(--justfont-font-family-genyogothictw);
	 text-align: center;
	}
	.modal-single-post .wp-caption-text span, .modal-single-post .single-button span{
	 color: inherit;
	}
	.modal-single-post .post-thumbnail{
	 padding-top: 20px;
	}
	@media (min-width: 1100px) {
		.modal-single-post .post-thumbnail{
			margin: 0 0 2em;
		}
	}

	.modal-single-post .wp-caption-text, .modal-single-post figcaption, .modal-single-post figcaption span{
	 padding-top: 8px;
	}

	/*hr*/
	.single-line{ 
	 opacity: 1 !important;
	 color: #CED4DA !important;
	 margin-top: 4em;
	}
	.modal-single-post .entry-content hr{
	 margin: 0 0 50px 0;
	 color: #66AC35;
	 opacity: 1;
	}
	.modal-single-post hr:not([size]) {
	   height: 1px;
	}

  /*content*/
  @media (min-width: 1100px) {
    .modal-single-post .post-thumbnail img{
      width: 1140px !important;
      height:598.5px !important;
      max-width: 1140px;
      vertical-align: middle;
    }
    /*.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6, */
    .entry-content p
    , .entry-content .single-block, .entry-content aside
    , .modal-single-post .wp-caption-text, .modal-single-post figcaption, .modal-single-post figcaption span, button
    , .entry-content .single-block p, .entry-content aside p {
      margin-bottom: 36px;
    }
    , .entry-content .single-block p, .entry-content aside p 
    , .entry-content .single-block, .entry-content aside *{
      margin: 18px 0;
    }
  }
  .modal-single-post .entry-content p:has(iframe[src*="youtube.com"]) {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 高寬比例的影片 */
    height: 0;
    margin-bottom: 0px;
  }
  .entry-content iframe[src*="youtube.com"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  figcaption * {
    padding-top: 0px !important;
    margin-bottom: 0px !important;
  }
  p:has(.single-media-caption:empty) {
      height: 0px;
      margin-bottom: 0;
  }
  .entry-content p{
    text-align: justify;
    text-justify: inter-word;
  }
  .modal-single-post .entry-content{
    font-weight: 500 !important;
  }
  .modal-single-post .entry-content, .modal-single-post .entry-footer, .modal-single-post .author-bio, .modal-single-post .share-post{
    max-width: 750px;
    margin: auto;
  }
  .modal-single-post .entry-content p{ /*P -  源樣黑體 regular - 16 pt*/
    color: var(--justfont-p-color);
    font-family: var(--justfont-font-family-genyogothictw), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: 400;
    line-height: 32.6px;
  }
  .modal-single-post .entry-content span{
    font-weight: 400;
  }
  .modal-single-post ul li, .modal-single-post ol li{ /*P -  源樣黑體 regular - 16 pt*/
    color: var(--justfont-p-color) !important;
    font-size: var(--single-font-size-p) !important;
    font-family: var(--justfont-font-family-genyogothictw), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: 400;
    line-height: 32px;
  }
  .modal-single-post blockquote{
    background-color: #F8F9FA;
    margin: 3rem auto;
    max-width: 660px;
    padding: 40px 24px;
    border-left: 12px solid #87C168;
  }
  .modal-single-post iframe{
    /*padding-bottom: 10px;
    padding-top: 20px;*/
  }
  .entry-content figure img {  
    height: auto;
    max-width: 100%;
  }
  .modal-single-post .wp-caption, .modal-single-post .entry-content figure{
    width: 100%;
    height: auto;
    max-width: 750px;
    vertical-align: middle;
  }
  .modal-single-post figure + p:empty:nth-child(2n){ /*文章修改時，會自動在兩個圖片中間加入p，導致間距太大*/
    display: none;
  }
  /*
  .modal-single-post .entry-content p:has(iframe){
    margin-bottom: 0px;  
  }*/
  .modal-single-post .entry-content a{
    color: var(--justfont-color-green);
    text-decoration: underline;
  }
  .modal-single-post ul, .modal-single-post ol{
    padding-left: 52px;
    margin-bottom: 2rem;
  }
  /*.modal-single-post .wp-block-button__link{
    border: 2px solid var(--justfont-color-green);
    background-color: white;
    color: var(--justfont-color-green);
    cursor: pointer;
    padding: 3px 24px;
    font-size: 20px;
    font-weight: 400;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 28px;
  }
  .modal-single-post .wp-block-button__link:hover{
    background-color: #66AC35;
    color: #FFFFFF !important;
  }*/
  .modal-single-post .wp-block-button:has(.wp-block-button__link) a{
    text-decoration: none !important;
  }
  .modal-single-post .single-button:has(.wp-block-button__link:hover) a{
    color: var(--justfont-color-black);
  }
  /*傳統編輯器自訂元素*/
  .entry-content .single-collapse {
    display: block;
    background-color: #F8F9FA;
    border-top: 1px solid #66AC35;
    border-bottom: 1px solid #66AC35;
    padding: 18px;
    color: var(--justfont-color-Gray600);
    font-size: var(--single-font-size-p);
  }
  .entry-content .single-block, .entry-content aside{
    background-color: #F8F9FA;
    margin-left: auto;
    margin-right: auto;
    max-width: 660px;
    padding: 36px;
  }
  .entry-content .single-block p, .entry-content aside{
    font-family: var(--justfont-font-family-jf-jinxuan) !important;
    /*padding: 0px !important;
    margin: 0px;*/
    color: var(--justfont-color-black);
    font-size: var(--single-font-size-p);
    line-height: 40px;
    font-weight: var(--entry-content-single-block-p-font-weight) !important;
    text-align: center;
  }
  /*.entry-content .single-block .single-button, .entry-content aside .single-button{
    margin-top: 36px;
  }*/
  .entry-content .single-button{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 18px 0;
  }
  .entry-content .wp-block-button__link{
    /*border: 2px solid var(--justfont-color-green);
    background-color: white;
    color: var(--justfont-color-green);
    cursor: pointer;
    padding: 3px 24px;
    font-size: 20px;
    font-weight: 400;
    border-radius: 50px;*/
    padding: .41em .48em;
    font-size: var(--single-font-size-caption);
    letter-spacing: 0em;
    margin: 0 !important;
  }
  .entry-content .single-button:has(.wp-block-button__link) a{
    text-decoration: none !important;
  }
  .entry-content .single-button:has(.wp-block-button__link)  span {
      font-size: inherit;
  }
  .entry-content .single-media-caption{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .entry-content .single-media-caption figcaption{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .entry-content .single-media-caption .wp-caption-text, .entry-content figcaption, .modal-single-post figcaption span {
    /*padding-bottom: 30px;*/
  }
  .entry-content .single-media-caption {
    display: flex;
    justify-content: center;
    align-items: center;
    /*position: relative;
    top: -40px;*/
  }

  .entry-content .single-collapse a, .entry-content .single-block a, .entry-content aside a{
    text-decoration: none;
  }
  .entry-content .single-collapse a:hover, .entry-content .single-block a:hover, .entry-content aside a:hover{
    cursor: pointer;
  }
  /**自訂元素*/


  /*footer*/
  .modal-single-post .entry-footer p, .modal-single-post .author-bio p, .modal-single-post .related-articles  p, .reproduced-box p{
    color: #6C757D !important;
  }
  .modal-single-post .post-taxonomies{
    padding-bottom: 40px;
  }

  .modal-single-post .author-bio-content{
    padding: 20px;
  }
  .modal-single-post .author-bio img{
    float: right;
    border-radius: 50%;
    width: 120px;
    height: 120px;
  }
  .modal-single-post .author-bio-content .author-info{
    height: 120px;
    display: flex; 
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
  }
  .modal-single-post .author-bio-content .author-info p, .modal-single-post .author-bio-content .author-description{
    padding: 0px;
    margin-bottom: 0px;
    font-size: var(--font-size-p);
  }
  .modal-single-post  .author-description{
    text-align: justify;
    text-justify: inter-word;
    line-height: 26px;
  }
  .modal-single-post .author-bio-content .author-description{
    max-width: 520px;
  }
  .modal-single-post .author-bio-content .author-link{
    color: var(--justfont-color-green);
  }

  /* 字體口袋書 */
  .modal-single-post .entry-header hr{
    margin-bottom: 50px;
    color: #66AC35;
    opacity: 1;
  }
  .post-tag-box h5{
  		padding-bottom: 24px;
  }
  /*相關文章*/
  .related-title, .reproduced-title{
      line-height: 31px;
      color: var(--justfont-color-Gray600);
      padding-bottom: .5em;
  }
  div.related-articles > h6.post-cats{
    line-height: 30.6px;
  }
  .modal-single-post .related-articles .modal-container{
    display: flex; 
    justify-content: center;
    align-items: center;
  }
  .modal-single-post .related-articles .modal-03, .share-link-box, .reproduced-box{
    max-width: 750px;
    margin: auto;
  }
  .modal-single-post .modal-container .modal-03 .col-md-6{
    display: flex; 
    justify-content: center;
    align-items: center;
    /*padding-left: 0;
    padding-right: 0;*/
  }
  /*.modal-single-post .modal-container .modal-03 .col-md-6 .simple-post-container {
    display: flex;
    justify-content: space-between;
  }*/

  /*轉載*/
  .reproduced{
    margin: auto;
    max-width: 640px;
  }
  /*.reproduced-box h5{
    color: #6C757D;
    font-family: Noto Sans TC;
    font-size: 21.25px;
  }*/
  .reproduced p{
      font-family: var(--justfont-font-family-genyogothictw);
      font-style: normal;
      font-weight: 400;
      font-size: var(--font-size-small);
      line-height: 17px;
      color: var(--justfont-color-Gray600);
  }
  .reproduced img{
    margin-top: 1em;
  }
  .reproduced-box{
    padding: 60px 0px;
  }

  /*訊息公告*/
  .modal-anno .entry-header h1, .modal-single-page .entry-header h1{
    text-align: left;
  }
  .modal-anno .post-thumbnail{
    padding-top: 0px;
  }
  .modal-anno .entry-content h2{
    padding-top: 18px;
  }
/**文章*/


.modal-posts-center{
  display: flex; 
  justify-content: space-between; 
  align-items: center;
}
a{
  text-decoration: none ;
  color:  var(--justfont-color-Gray600);
}

       
/*文章div*/
.post-container .post-title{
  height: 76px;
  padding: 0px;
}
.post-container .post-content{
  height: 104px;
  margin: 0px;
}
@media only screen and (min-width: 1100px) {
  .modal-archive{
    padding-top: 102px;
    margin-bottom: 10px;
  }
}
.archive-title-box{
  /*margin-top: 120px;*/
  margin-bottom: .5em;
}
/**archive 分類、標籤 文章列表頁*/


/*header nav*/
/*搜尋 search bar*/
.modal-fullscreen {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background-color:rgb(0 0 0 / 30%);
  overflow-y: unset !important;
}
.modal-content {
  width: 100%;
  max-width: 800px;
}
.modal-body {
  /*padding: 3rem;*/
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow-y: unset !important;
}

.modal-content{
  background-color: rgb(0 0 0 / 0%);
}
.input-group {
  margin: 0;
}
.form-control {
  border-radius: 0;
}
.form-control:focus {
  /* box-shadow:none!important; */
}
.right-inner-addon {
    position: relative;
}
.right-inner-addon input {
    padding-right: 15px !important;
}
.right-inner-addon span {
    position: absolute;
    right: 2px;
    padding: 9px 9px;
    pointer-events: none;
    color: #6C757E;
    font-size: 15px;
  font-weight: 700;
}
input[type="search"]:hover,  input[type="search"]:focus{
  background-color: var(--justfont-color-white) !important;
  color: var(--justfont-color-black) !important;
}
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 23px;
  width: 23px;
  margin-left: .4em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23777'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
  cursor: pointer;
}
/*搜尋*/
/**header nav*/


/*footer 字體顏色*/
.desktop-footer .widget-area, .desktop-footer .widget-area a, pre{
  background: linear-gradient(90deg, #221122 20%, #6C757D 100%);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  color: #6C757E;
  font-family: var(--justfont-font-family-genyogothictw);
  text-decoration: none;
}
.desktop-footer .widget-area u{
  /*text-decoration: overline;
  border-bottom: 1px #6C757D solid;
  padding-bottom: 0px;*/
}
.desktop-footer .widget-area h6{
  color: #343A40;
  font-family: var(--justfont-font-family-genyogothictw);
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 2px;
}
.desktop-footer .widget-area:last-child:has(pre):has(.contact-us) pre{
   padding-top: 8px;
}
.desktop-footer .widget-area a, .desktop-footer .widget-area:last-child:has(pre):has(.add-line) pre{
   line-height: 30px;
   font-size: 14px;
}
.desktop-footer .widget-area:last-child:has(h6):has(.add-line) h6{
  letter-spacing:6px;
  font-weight: 400;
  font-size: 16px;
  margin-bottom: 2px;
}

/*line加入好友btn*/
/*.line-it-button {
  border-radius: 20px !important;
  width: 75px !important;
}*/

/*icon-back-to-top 按鈕 */
.icon-back-to-top {
  cursor: pointer;
  position: fixed;
  right: 4%;
  top: 90%;
  opacity: 0;
  z-index: 999999;
  border-radius: 210px;
  border: 2px solid var(--justfont-color-green);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 35.54px;
  background-color: #FFFFFF;
  transition: transform 0.3s, box-shadow 0.15s ease-in-out, color 0.15s ease-in-out !important;
  transform: translateY(-100%);
}
/*
.icon-back-to-top.visible.show {
  position: absolute;
  text-align: center;
  top: 0;
}
.custom-site-footer{
    position: relative;
    padding: 45px 0;
}*/
.icon-back-to-top.visible {
  opacity: 1;
  transform: translateY(0) !important;
  background-color: var(--justfont-color-white) !important;
  color: var(--justfont-color-green) !important;
}
.icon-back-to-top:hover, .icon-back-to-top.hover {
  background-color: var(--justfont-color-green) !important;
}
.icon-back-to-top:hover *, .icon-back-to-top.hover *, .icon-back-to-top:active * {
  fill: var(--justfont-p-color);
}
.icon-back-to-top:hover *, .icon-back-to-top.hover *, .icon-back-to-top:active * {
  fill: var(--justfont-p-color);
}
.icon-back-to-top:active,
.icon-back-to-top.visible:active{
  box-shadow: 0px 0px 0px 2px rgb(102 172 53 / 50%);
}
.icon-back-to-top:focus{
  background-color: var(--justfont-color-white) !important;
  color: var(--justfont-color-green) !important;
}
.icon_back_seach:hover *{
  fill:#FFFFFF;
}
@media only screen and (min-width: 767px) {
  .icon-back-to-top :hover{
      color: #FFFFFF !important;
  } 
}
/**footer*/



/* 桌機版 */
@media (min-width: 1100px) {
  .icon-back-to-top{
    display: none !important;
  }
  .modal-specified-posts, .modal-learn-more{
    padding: 80px 0px;
    height: 696px;
  }
  .modal-specified-posts .modal-title{
    margin: 0px 0px 0px 0px;
    padding-bottom:3%
  }
  .modal-specified-posts .row, .modal-learn-more.row{
    margin: 0px;
    padding-top: 1%;
  }
  /* 圖片與標題大小設定 */
  .specified-posts{
    width: 359px;
    height: 270px;
    padding: 0px;
  }
  /* 圖片與標題大小設定 */
  /*.modal-learn-more .modal-title{
    padding-bottom: 5%;
    margin: 0px 0px 0px 0px;
  }*/
  .learn-more{
    padding-bottom:5%;
  }
  .card{
    overflow: hidden;
    border-radius: 10px;
    box-shadow:18px 12px 20px -15px #6C757E
  }
  .learn-more .card{
    width: 300px;
    height: 300px;
  }
  .new-posts{
    width: 359px;
    height: 490px;
    padding: 0px;
    border-bottom: solid #CED4DA;
  
  }
  .new-posts img{
    width: 359px;
    height: 202.5px;
  }
  /* 首頁最新文章作者字體顏色 */
  .new-posts .post-info{
    line-height: 16px;
    color: #6C757E;
  }
  .modal-specified-posts .modal-title p{
    color:var(--justfont-color-info-grey) ;
  }
  /* 首頁最新文章作者字體顏色 */
  .new-padding{
    padding-bottom: 0%;
  }
  .modal-new-posts .row{
    margin: 0px;
    padding-top: 1%;
  }
  .title3{
    font-size: 20pt;
    font-weight: 500;
  }
  .p-text{
    font-size: 1.25rem;
    font-weight: 200;
    font-family: var(--justfont-font-family-genyogothictw), sans-serif;
    color: #6C757E;
  }
  .new-posts .post-content{
    height: 30%;
    color: #6C757D;
    margin: 13.5px 0px;
    font-size: 12pt;
    text-decoration: none;
    padding-bottom:15%;
  }
  .specified-posts img{
    width: 360px;
    height: 202px;
  }
    /* 學習字體設計css */
  .specified-posts .post-title{
    color: #221122;
    font-size: 16pt;
    padding-left: 7%;
    text-decoration: none;
    padding-top:10px;
  }
  .specified-posts .post-content{
    height: 28.32px;
    color: #6C757D;
    padding-left: 7%;
    text-decoration: none;
    font-size: 12pt;
  }
  /* 學習字體設計css */
  .learn-more img{
    width: 200px;
    height: 200px;
  }
  /*該div內的元素置中*/
  .vertical-center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
  }
  /*該div內的元素置中*/
}


.default-vertical-center{
  display: flex;
  justify-content: center;
  align-items: center; 
}
/* 通用 */

.modal-new-posts{
  padding: 0px;
  /* margin: 0px 0px 0px 55px; */
}
.modal-archive-posts-center{
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 預覽文章內容的字體大小 */
/* .new-posts .post-content{
	height: 104px;
	color: #6C757D;
	margin: 13.5px 0px;
	font-size: 12pt;
	text-decoration: none;
  padding-bottom:15%;
} */
/* 預覽文章內容的字體大小 */

/* 首頁最新文章標題字體顏色 */
.new-posts .post-title{
  color: #221122;
  font-family:jf-jinxuan;
  text-decoration: none;
}    
/* 首頁最新文章作者字體顏色 */

/* 標題 */
.title3-Bold {
  font-size: 20pt;
  font-weight: 700;
}
.title4{
  font-size:16pt;
  font-weight: 800;
}

.new-posts .post-cats{
  font-weight: 700;
  color: #66AC35;
  margin: 6.5px 0px;
  font-family: var(--justfont-font-family-genyogothictw), sans-serif;
}              
/* 標題 */

/* 最新文章設定大小 */
.new-posts:hover *{
  opacity: 0.80;
}
/* 最新文章設定大小 */

/* button設定 */
.modal-new-posts .btn{
	font-size: 18px;
	font-weight: 500;
}
@media only screen and (max-width: 1099px) {
  .boxshadow-inside-top{ box-shadow: inset 0px 10px 10px -10px rgba(0 0 0 /26%); }
  .boxshadow-bottom{ box-shadow: inset 0px 10px 10px -10px rgba(0 0 0 /26%); }
}
.boxshadow-inside-top{ box-shadow: inset 0px 10px 10px -10px rgba(0 0 0 /26%); }
.boxshadow-bottom{ box-shadow: inset 0px 10px 10px -10px rgba(0 0 0 /26%); }
.model-bottom-shadow{
  /*box-shadow 會有後面產生元素z-index覆蓋優先問題*/
  box-shadow: inset 0px 10px 10px -10px rgba(0 0 0 /26%);
  z-index: 1000;
  position: relative;
}
.model-shadow{
	box-shadow: inset 0px 10px 10px -10px rgba(0 0 0 /26%);
}
.model-grey{
	width:100%;
	background: var(--justfont-color-Gray100);
}
.model-white{
	width:100%;
	/* background: #FFFFFF; */
}
.modal-container {
    margin: 0 auto;
    max-width: 1140px;
}

/* logo */
.logo {
  display: inline-block;
  margin: 14px;
}

.logo img {
  display: block;
  max-width: 100%;
  max-height: 39.85px;
  height: auto;
}
/* logo */
/*字體大小*/

/*最新文章*/
.newh2{
  font-size: 27pt;
  font-weight: 500;
  font-family:jf-jinxuan
}

/*最新專題文章*/
.newh3{
  font-size: 16pt;
  font-weight: 500;
  font-family: var(--justfont-font-family-genyogothictw), sans-serif;
}
/*H1 - 金萱Bold - 45 pt*/
.title1{
  font-size: 45pt;
  font-weight: 800;
  font-family:jf-jinxuan
}
/*H2 - 金萱SemiBold - 32 ptt*/
.title2{
  font-size: 32pt;
  font-weight: 600;
  font-family:jf-jinxuan
}

.caption{
  font-size: 16pt;
  font-weight: 200; 
}

/*首頁最新文章*/
/* .modal-new-posts{
	padding: 0px;
} */
/* .modal-new-posts h4, .modal-new-posts h5{
		padding: 0px;
} */
@media (min-width: 767px) { /*桌機版*/
	.new-posts:nth-child(2){
	  margin:0px 29px;
	}
}


.new-posts .post-info{
	line-height: 16px;
	color: #6C757E;
}


/*首頁最新文章*/

.card img{
	object-fit: cover;
}

.modal-specified-posts h4, .modal-specified-posts h5, .modal-learn-more h4, .modal-learn-more h5{
	padding: 0px;
}
.modal-specified-posts .row, .modal-learn-more.row{
	margin: 0px;
	padding-top: 1%;
}

.specified-posts:hover *{
	opacity: 0.8;
}
@media (min-width: 767px) { /*桌機版*/
	.specified-posts:nth-child(2){
		margin:0px 29px;
	}
}

		/*首頁foot banner背景圖*/
.bg-image {
	background-size: cover;
	background-position: center;
	position: relative;
}

/* a的超連結裡面文字不要有底線 */
.a-tag{
	text-decoration: none;
}

.text-center-title{
	text-align:center!important;
	color:#221122;
	font-family: var(--justfont-font-family-genyogothictw);
	font-size: 20px;
  padding-top:10px;
}

/* 學習更多的css */
.text-center-subtitle{
	text-align:center!important;
	color:#6C757E;
	font-family: var(--justfont-font-family-genyogothictw);
	font-size: 14px;
}
/* 學習更多的css */


.modal-frame{
  width: 738px;
  height:135px;
  background-color:#FFFFFF;
}

/*外部引入的footer 會造成右邊空白超過版面*/
.custom-site-footer footer .row{
  --bs-gutter-x: 0;
}

/* 移除首頁 footer 上方 banner 與 footer 中間的空白 */
body.home #primary, body.home #content {
  margin-bottom:0px;
}

#content {
  position: relative;
}

#content:before {
  content:"";
  height: 10px;
  box-shadow: inset 0px 10px 10px -10px rgba(0 0 0 /26%);
  position: absolute;
  left: 0px;
  right: 0px;
  z-index: 2;
  top: 0px;
  height: 10px;
}