:root {
  --main: #a84228;
  --text: #111;
  --muted: #666;
  --light: #eee;
  --line: #222;
  --container: 1280px;
}
* {
  box-sizing: border-box
}
html {
  scroll-behavior: smooth
}
body {
  margin: 0;
  color: var(--text);
  /*font-family: "Times New Roman", "Noto Serif TC", serif;*/
  font-family: "Times New Roman","Noto Sans TC", serif;
  letter-spacing: .06em;
  background: #fff;
  line-height: 1.8
}
a {
  color: inherit;
  text-decoration: none
}
img {
  max-width: 100%;
  display: block
}
.container {
  width: min(var(--container), calc(100% - 80px));
  margin: auto
}
.sectionGap {
  padding: 58px 0
}
.siteHeader {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px)
}
.headerInner {
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between
}
.brand {
  display: flex;
  align-items: center;
  gap: 34px
}
.brandMark, .footerLogo {
  font-size: 62px;
  line-height: 1;
  color: var(--main);
  letter-spacing: -.12em;
  font-weight: 400
}
.brandText {
  font-size: 14px;
  letter-spacing: .25em
}

.brand{
  display:flex;
  align-items:center;
  gap:22px;
  text-decoration:none;
}

.brandLogo{
  width:72px;
  height:auto;
  display:block;
  flex-shrink:0;
}

.brandText{
  font-size:14px;
  letter-spacing:.18em;
  color:#111;
  white-space:nowrap;
}

.mainNav {
  display: flex;
  gap: 42px;
  font-size: 14px;
  letter-spacing: .12em
}
.mainNav a {
  position: relative
}
.mainNav a:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 1px;
  background: var(--main);
  transition: .3s
}
.mainNav a:hover:after {
  width: 100%
}
.menuBtn {
  display: none;
  background: none;
  border: 0;
  width: 42px;
  height: 42px
}
.menuBtn span {
  display: block;
  height: 1px;
  background: #111;
  margin: 8px 0
}
.heroGrid {
  display: grid;
  grid-template-columns: 38% 62%;
  align-items: center
}
.heroTxt {
  padding-right: 60px
}
.area {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 38px
}
.hero h1 {
  /*font-family: "Noto Sans TC", sans-serif;*/
  font-size: 29px;
  line-height: 1.45;
  letter-spacing: .12em;
  margin: 0 0 28px
}
.lead {
  /*font-family: "Noto Sans TC", sans-serif;*/
  font-size: 14px;
  font-weight: 600;
  line-height: 1.8;
  margin-bottom: 36px
}
.heroImg img {
  width: 100%;
  height: 430px;
  object-fit: cover
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 22px;
  border-radius: 999px;
  background: var(--main);
  color: #fff;
  /*font-family: "Noto Sans TC", sans-serif;*/
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em
}
.btn.small {
  font-size: 12px;
  padding: 7px 18px
}
.btn.large {
  font-size: 20px;
  padding: 11px 34px
}
.note {
  /*font-family: "Noto Sans TC", sans-serif;*/
  font-size: 12px;
  margin-top: 14px
}
.aboutGrid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 45px;
  align-items: center
}
.aboutImg img {
  height: 390px;
  width: 100%;
  object-fit: cover
}
.enTitle {
  color: var(--main);
  /*font-family: "Noto Sans TC", sans-serif;*/
  font-weight: 800;
  font-size: 20px;
  letter-spacing: .16em
}
.aboutTxt h2 {
  /*font-family: "Noto Sans TC", sans-serif;*/
  font-size: 28px;
  line-height: 1.75;
  letter-spacing: .12em
}
.aboutTxt p:not(.enTitle) {
  /*font-family: "Noto Sans TC", sans-serif;*/
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: .08em
}
.titleBox {
  margin-bottom: 42px
}
.titleBox.center {
  text-align: center
}
.titleBox h2 {
  font-size: 36px;
  font-weight: 400;
  letter-spacing: .24em;
  margin: 0;
  line-height: 1.3
}
.titleBox h2 span {
  letter-spacing: .22em;
  margin-right: 18px
}
.titleBox p {
  font-size: 14px;
  margin: 4px 0 0
}
.projectGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}
.projectCard {
  text-align: center
}
.projectCard img {
  width: 100%;
  height: 350px;
  object-fit: cover
}
.projectCard h3 {
  font-size: 19px;
  font-weight: 500;
  margin: 24px 0 0
}
.projectCard p {
  font-size: 17px;
  margin: 0
}
.processLine {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  /*position: relative;*/
  /*margin-top: 72px;*/
  align-items: center
}
.processLine:before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 98px;
  height: 1px;
  background: #111
}
.step {
  min-height: 195px;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  /*font-family: "Noto Sans TC", sans-serif;*/
  font-size: 13px;
  font-weight: 700
}
.step .icon {
  font-size: 38px;
  line-height: 1
}
.step span {
  width: 30px;
  height: 30px;
  border: 1px solid #111;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  /*font-family: serif;*/
  font-size: 13px;
  font-weight: 400;
  z-index: 1
}
.step.down {
  justify-content: flex-end;
  padding-bottom: 8px
}

.contactCta {
  padding: 70px 0
}
.ctaInner {
  border-top: 1px solid #111;
  border-bottom: 1px solid #111;
  min-height: 178px;
  display: flex;
  align-items: center;
  justify-content: space-between
}
.ctaInner h2 {
  font-size: 38px;
  font-weight: 400;
  letter-spacing: .25em
}
.footer {
  padding: 38px 0 18px
}
.footerInner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end
}
.footerInfo {
  /*font-family: "Noto Sans TC", sans-serif;*/
  font-size: 13px;
  letter-spacing: .03em
}
.footerInfo p {
  margin: 3px 0
}
.footerInfo span {
  display: inline-block;
  width: 70px;
  /*font-family: serif*/
}
.footerLogo{
  margin-bottom:25px;
}

.footerLogo a{
  display:inline-block;
}

.footerLogo img{
  display:block;
  width:90px;
  height:auto;
}
/*.social {
  display: flex;
  gap: 12px
}
.social a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #1677f2;
  color: #fff;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 16px
}
.social a:nth-child(2) {
  background: #c84d95
}
.social a:nth-child(3) {
  background: #09c755;
  font-size: 10px
}*/
.copy {
  text-align: center;
  font-size: 11px;
  margin: 45px 0 0
}

@media (max-width:1024px) {
  .container {
    width: min(100% - 44px, var(--container))
  }
  .mainNav {
    gap: 18px
  }
  .heroGrid {
    grid-template-columns: 1fr
  }
  .heroTxt {
    padding: 20px 0 35px
  }
  .heroImg {
    order: -1
  }
  .heroImg img {
    height: 420px
  }
  .aboutGrid {
    grid-template-columns: 1fr;
    gap: 28px
  }
  .projectCard img {
    height: 210px
  }
  .processLine {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px
  }
  .processLine:before {
    display: none
  }
  .step, .step.down {
    min-height: auto;
    justify-content: flex-start;
    padding: 22px;
    border: 1px solid #ddd
  }
  .blogGrid {
    grid-template-columns: 1fr
  }
  .blogText {
    text-align: left;
    font-size: 32px
  }
}
@media (max-width:760px) {
  body {
    letter-spacing: .03em
  }
  .siteHeader {
    position: fixed;
    left: 0;
    right: 0
  }
  .headerInner {
    height: 72px
  }
  .brand {
    gap: 16px
  }
  .brandMark {
    font-size: 48px
  }
  .brandText {
    font-size: 11px;
    letter-spacing: .12em
  }
  .menuBtn {
    display: block
  }
  .mainNav {
    position: fixed;
    left: 0;
    right: 0;
    top: 72px;
    background: #fff;
    display: none;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid #eee
  }
  .mainNav.active {
    display: flex
  }
  .mainNav a {
    padding: 16px 24px;
    border-bottom: 1px solid #eee
  }
  .sectionGap {
    padding: 42px 0
  }
  .hero {
    padding-top: 100px
  }
  .hero h1 {
    font-size: 23px
  }
  .heroImg img {
    height: 300px
  }
  .aboutTxt h2 {
    font-size: 23px
  }
  .aboutImg img {
    height: 300px
  }
  .titleBox h2 {
    font-size: 28px;
    letter-spacing: .14em
  }
  .projectGrid {
    grid-template-columns: 1fr;
    gap: 32px
  }
  .projectCard img {
    height: 230px
  }
  .processLine {
    grid-template-columns: 1fr;
    margin-top: 34px
  }
  
  .ctaInner {
    min-height: 160px;
    display: block;
    padding: 45px 0
  }
  .ctaInner h2 {
    font-size: 30px
  }
  .btn.large {
    font-size: 16px
  }
  .footerInner {
    display: block
  }
  /*.social {
    margin-top: 28px
  }*/
}
@media (max-width:420px) {
  .container {
    width: calc(100% - 28px)
  }
  .brandText {
    display: none
  }
  .hero h1 {
    font-size: 21px
  }
  .heroImg img, .aboutImg img, .projectCard img {
    height: 230px
  }
  .titleBox h2 {
    font-size: 24px
  }
  .blogText {
    font-size: 22px
  }
  .ctaInner h2 {
    font-size: 26px
  }
  .footerInfo {
    font-size: 12px
  }
}
/* ===== Common active nav ===== */

.mainNav a.isActive:after {
  width: 100%;
}
@media (max-width:760px) {
  .mainNav a.isActive:after {
    margin-bottom: 5px;
  }
}
/* ===== About page ===== */


/* ========================================
   ABOUT HERO
======================================== */

.aboutHero{
  position:relative;
  height:680px;
  overflow:hidden;
}

.aboutHeroBg{
  position:absolute;
  inset:0;
}

.aboutHeroBg img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* 深色遮罩 */

.aboutHero:before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0);
  z-index:1;
}

.aboutHero .container{
  position:relative;
  height:100%;
  z-index:2;
}

.aboutHeroContent{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  max-width:620px;
  color:#fff;
}

.aboutHeroEn{
  /*font-family:"Times New Roman",serif;*/
  font-size:28px;
  letter-spacing:.12em;
  margin:0 0 15px;
  color:#fff;
}

.aboutHeroContent h1{
  font-size:56px;
  font-weight:500;
  letter-spacing:.15em;
  margin:0 0 40px;
  color:#fff;
}

.aboutHeroDesc{
  font-size:17px;
  line-height:2.4;
  letter-spacing:.12em;
  color:#fff;
  margin:0;
}


.teamIntro {
  padding-top: 120px;
  padding-bottom: 110px
}
.teamGrid {
  display: grid;
  grid-template-columns: 56% 44%;
  align-items: center;
  gap: 105px
}
.teamPhoto img {
  width: 100%;
  height: 548px;
  object-fit: cover
}
.teamTxt {
  /*font-family: "Noto Sans TC", sans-serif;*/
  max-width: 440px;
  letter-spacing: .12em
}
.subEn {
  /*font-family: "Times New Roman", serif;*/
  color: var(--main);
  font-size: 13px;
  letter-spacing: .14em;
  margin: 0 0 32px;
  text-transform: uppercase
}
.teamTxt h2 {
  font-size: 28px;
  letter-spacing: .18em;
  line-height: 1.4;
  margin: 0;
  font-weight: 700
}
.shortLine {
  display: block;
  width: 70px;
  height: 1px;
  background: var(--main);
  margin: 32px 0 72px
}
.teamTxt p:not(.subEn) {
  font-size: 14px;
  line-height: 2.15;
  margin: 0;
  font-weight: 500
}
.followSection {
  padding: 30px 0 100px
}
.followTitle {
  text-align: center;
  /*font-family: "Noto Sans TC", sans-serif;*/
  margin-bottom: 60px;
  letter-spacing: .12em
}
.followTitle span {
  color: var(--main);
  /*font-family: "Times New Roman", serif;*/
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em
}
.followTitle h2 {
  font-size: 28px;
  line-height: 1.4;
  margin: 8px 0 0;
  letter-spacing: .18em
}
.followTitle p {
  font-size: 14px;
  margin: 6px 0 0;
  letter-spacing: .12em
}


/* ========================================
   FOLLOW SECTION
======================================== */

.socialGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:50px 70px;
}

.socialItem{
  display:grid;
  grid-template-columns:minmax(0,1fr) 180px;
  gap:30px;
  align-items:start;
}

.socialHead{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:28px;
}

.socialHead img{
  width:62px;
  height:62px;
  object-fit:contain;
  flex-shrink:0;
}

.socialTitle{
  flex:1;
  border-bottom:1px solid #111;
  padding-bottom:10px;
}

.socialTitle h3{
  margin:0;
  font-size:18px;
  font-weight:700;
  letter-spacing:.12em;
}

.socialInfo p{
  margin:0 0 25px;
  font-size:14px;
  line-height:2;
  letter-spacing:.08em;
}

.socialInfo a{
  display:block;
  text-align:right;
  color:var(--main);
  /*font-family:"Times New Roman",serif;*/
  font-size:15px;
  font-weight:700;
  letter-spacing:.12em;
}

.socialPhoto{
  overflow:hidden;
}

.socialPhoto img{
  width:100%;
  display:block;
  transition:.5s;
}

.socialItem:hover .socialPhoto img{
  transform:scale(1.05);
}



@media (max-width:1024px) {
  
  .aboutHero{
    height:560px;
  }

  .aboutHeroContent{
    max-width:520px;
  }

  .aboutHeroContent h1{
    font-size:42px;
  }

  .aboutHeroDesc{
    font-size:15px;
    line-height:2.1;
  }

  .teamIntro {
    padding-top: 80px;
    padding-bottom: 80px
  }
  .teamGrid {
    grid-template-columns: 1fr;
    gap: 44px
  }
  .teamTxt {
    max-width: none
  }
  .teamPhoto img {
    height: 420px
  }
  .shortLine {
    margin: 24px 0 32px
  }
  .followSection {
    padding-bottom: 80px
  }
 .socialGrid{
    grid-template-columns:1fr;
    gap:45px;
  }
}
@media (max-width:760px) {


  .aboutHero{
    height:520px;
    margin-top: 70px;
  }

  .aboutHero:before{
    background:rgba(0,0,0,.45);
  }

  .aboutHeroContent{
    left:0;
    right:0;
    width:100%;
    max-width:none;
    padding:0 20px;
  }

  .aboutHeroEn{
    font-size:18px;
    margin-bottom:10px;
  }

  .aboutHeroContent h1{
    font-size:34px;
    margin-bottom:25px;
    letter-spacing:.08em;
  }

  .aboutHeroDesc{
    font-size:14px;
    line-height:1.9;
    letter-spacing:.05em;
  }

  .aboutHeroDesc br{
    display:none;
  }


  .teamIntro {
    padding-top: 56px;
    padding-bottom: 60px
  }
  .teamPhoto img {
    height: 320px
  }
  .teamTxt h2, .followTitle h2 {
    font-size: 24px
  }
  .shortLine {
    margin: 20px 0 28px
  }
  .followSection {
    padding: 10px 0 60px
  }
  .followTitle {
    margin-bottom: 40px
  }
  @media(max-width:768px){

  .socialItem{
    grid-template-columns:1fr;
    gap:20px;
  }

  .socialPhoto{
    max-width:260px;
    margin:0 auto;
  }

  .socialHead{
    gap:14px;
    margin-bottom:20px;
  }

  .socialHead img{
    width:52px;
    height:52px;
  }

  .socialTitle h3{
    font-size:16px;
  }

  .socialInfo p{
    font-size:13px;
    line-height:1.9;
  }

}
}
@media (max-width:420px) {
  .aboutKvImg img, .teamPhoto img {
    height: 240px
  }
  .aboutKvTxt h1 {
    font-size: 27px
  }
  .pageEn {
    font-size: 16px
  }
}



/* =========================
   PROJECT PAGE
========================= */

.projectKv {
  background: #f3f3f3;
  padding: 40px 0 90px;
}
.projectKvGrid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 80px;
  align-items: center;
}
.projectKvTxt {
  padding-left: 20px;
}
.projectEn {
  color: var(--main);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .15em;
  margin: 0 0 8px;
  /*font-family: "Noto Sans TC", sans-serif;*/
  text-transform: uppercase;
}
.projectKvTxt h1 {
  font-size: 64px;
  font-weight: 400;
  letter-spacing: .08em;
  line-height: 1.1;
  margin: 0 0 40px;
}
.projectIntro {
  /*font-family: "Noto Sans TC", sans-serif;*/
  font-size: 15px;
  font-weight: 600;
  line-height: 2;
  letter-spacing: .08em;
}
.projectIntro p {
  margin: 0;
}
.projectKvImg img {
  width: 100%;
  height: 560px;
  object-fit: cover;
}
/* =========================
   FILTER
========================= */

.projectFilter {
  padding: 70px 0 40px;
}
.filterWrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}
.filterBtns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.filterBtn {
  height: 42px;
  padding: 0 24px;
  border: 1px solid #bdbdbd;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  /*font-family: "Noto Sans TC", sans-serif;*/
  font-size: 14px;
  font-weight: 600;
  transition: .3s;
}
.filterBtn:hover {
  border-color: var(--main);
  color: var(--main);
}
.filterBtn.active {
  background: var(--main);
  color: #fff;
  border-color: var(--main);
}
.filterReset {
  border: none;
  background: none;
  cursor: pointer;
  /*font-family: "Noto Sans TC", sans-serif;*/
  font-size: 14px;
  font-weight: 700;
  padding: 0;
  transition: .3s;
}
.filterReset:hover {
  color: var(--main);
}
/* =========================
   PROJECT LIST
========================= */

.projectList {
  padding-bottom: 100px;
}
.projectGrid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 90px;
}
.projectItem {
  position: relative;
}
.projectThumb {
  display: block;
  overflow: hidden;
}
.projectThumb img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  transition: .6s;
}
.projectItem:hover .projectThumb img {
  transform: scale(1.05);
}
.projectInfo {
  padding: 18px 14px 0;
  position: relative;
}
.projectInfo h3 {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  /*font-family: "Noto Sans TC", sans-serif;*/
}
.projectMeta {
  /*font-family: "Noto Sans TC", sans-serif;*/
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 18px;
}
.projectColor {
  display: flex;
  gap: 6px;
}
.projectColor span {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: block;
}
.projectMore {
  position: absolute;
  right: 0;
  bottom: 0;
  color: var(--main);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  /*font-family: "Noto Sans TC", sans-serif;*/
}
.projectMore:hover {
  opacity: .7;
}
.projectMoreWrap {
  text-align: right;
  margin-top: -20px;
}
.projectMoreWrap .btn {
  min-width: 150px;
  height: 50px;
  font-size: 15px;
}


.projectPager {
  display: none;
}

/* =========================
   TABLET
========================= */

@media (max-width:1024px) {
  .projectKvGrid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .projectKvTxt {
    padding-left: 0;
  }
  .projectKvTxt h1 {
    font-size: 52px;
  }
  .projectKvImg {
    order: -1;
  }
  .projectKvImg img {
    height: 450px;
  }
  .projectGrid3 {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }
}
/* =========================
   MOBILE
========================= */

@media (max-width:768px) {
  .projectKv {
    padding-top: 110px;
    padding-bottom: 50px;
  }
  .projectKvTxt h1 {
    font-size: 40px;
    margin-bottom: 25px;
  }
  .projectIntro {
    font-size: 14px;
    line-height: 1.9;
  }
  .projectKvImg img {
    height: 280px;
  }
  .filterWrap {
    display: block;
  }
  .filterBtns {
    margin-bottom: 20px;
  }
  .projectGrid3 {
    grid-template-columns: 1fr;
    margin-bottom: 50px;
  }
  .projectThumb img {
    height: 240px;
  }
  .projectInfo {
    padding: 14px 0 0;
  }
  .projectInfo h3 {
    font-size: 17px;
  }
  .projectMeta {
    font-size: 15px;
    margin-bottom: 12px;
  }
  .projectMore {
    position: static;
    display: inline-block;
    margin-top: 12px;
  }
  .projectMoreWrap {
    text-align: center;
    margin-top: 10px;
  }
}
/* ========================================
   PROCESS PAGE
======================================== */

.processKv {
  background: #f3f3f3;
  padding: 40px 0 80px;
}
.processKvGrid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 80px;
  align-items: center;
}
.processKvTxt {
  padding-left: 20px;
}
.processEn {
  color: var(--main);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .15em;
  margin: 0 0 10px;
  /*font-family: "Noto Sans TC", sans-serif;*/
  text-transform: uppercase;
}
.processKvTxt h1 {
  font-size: 42px;
  font-weight: 700;
  letter-spacing: .12em;
  margin: 0 0 24px;
  /*font-family: "Noto Sans TC", sans-serif;*/
}
.processLine {
  display: block;
  width: 46px;
  height: 1px;
  background: var(--main);
  margin-bottom: 42px;
}
.processIntro {
  /*font-family: "Noto Sans TC", sans-serif;*/
  font-size: 14px;
  font-weight: 600;
  line-height: 2.1;
  letter-spacing: .08em;
}
.processIntro p {
  margin: 0;
}
.processKvImg img {
  width: 100%;
  height: 460px;
  object-fit: cover;
}
/* ========================================
   TIMELINE
======================================== */

.processTimeline {
  padding: 90px 0 140px;
}
.timeline {
  position: relative;
  max-width: 650px;
  margin: 0 auto;
}
.timeline:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--main);
  transform: translateX(-50%);
}
.timelineItem {
  position: relative;
  width: 50%;
  margin-bottom: 80px;
}
.timelineItem.left {
  padding-right: 85px;
  text-align: left;
}
.timelineItem.right {
  margin-left: 50%;
  padding-left: 85px;
}
.timelineDot {
  position: absolute;
  top: 0;
  width: 42px;
  height: 42px;
  border: 1px solid var(--main);
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  /*font-family: "Times New Roman", serif;*/
  z-index: 2;
}
.timelineItem.left .timelineDot {
  right: -21px;
}
.timelineItem.right .timelineDot {
  left: -21px;
}
.timelineContent {
  position: relative;
}
.timelineContent:before {
  content: "";
  position: absolute;
  top: 21px;
  width: 80px;
  height: 1px;
  background: #d6a8a0;
}
.timelineItem.left .timelineContent:before {
  right: -80px;
}
.timelineItem.right .timelineContent:before {
  left: -80px;
}
.timelineContent h3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
  /*font-family: "Noto Sans TC", sans-serif;*/
  letter-spacing: .08em;
}
.timelineContent span {
  display: block;
  font-size: 21px;
  margin-top: 4px;
  margin-bottom: 18px;
  /*font-family: "Times New Roman", serif;*/
  letter-spacing: .08em;
}
.timelineContent ul {
  margin: 0;
  padding-left: 20px;
  /*font-family: "Noto Sans TC", sans-serif;*/
  font-size: 14px;
  line-height: 2;
  letter-spacing: .04em;
}
.timelineContent li {
  margin: 0;
}
.priceBox {
  margin-top: 28px;
  /*font-family: "Noto Sans TC", sans-serif;*/
}
.priceBox strong {
  display: block;
  font-size: 15px;
  margin-bottom: 10px;
}
.priceBox p {
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
}
/* 最後圓點 */

.timeline:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -35px;
  width: 42px;
  height: 42px;
  border: 1px solid var(--main);
  border-radius: 50%;
  background: #fff;
  transform: translateX(-50%);
}
/* ========================================
   TABLET
======================================== */

@media(max-width:1024px) {
  .processKvGrid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .processKvTxt {
    padding-left: 0;
  }
  .processKvImg {
    order: -1;
  }
  .processKvImg img {
    height: 420px;
  }
  .timeline {
    max-width: 100%;
  }
}
/* ========================================
   MOBILE
======================================== */

@media(max-width:768px) {
  .processKv {
    padding-top: 110px;
    padding-bottom: 50px;
  }
  .processKvTxt h1 {
    font-size: 34px;
  }
  .processKvImg img {
    height: 260px;
  }
  .processTimeline {
    padding: 60px 0 90px;
  }
  .timeline:before {
    left: 25px;
    transform: none;
  }
  .timeline:after {
    left: 25px;
    transform: none;
  }
  .timelineItem {
    width: 100%;
    padding-left: 80px !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-bottom: 50px;
  }
  .timelineDot {
    left: 4px !important;
    right: auto !important;
  }
  .timelineContent:before {
    left: -60px !important;
    right: auto !important;
    width: 60px;
  }
  .timelineContent h3 {
    font-size: 22px;
  }
  .timelineContent span {
    font-size: 18px;
  }
  .timelineContent ul {
    font-size: 14px;
    line-height: 1.8;
  }
}
/* ========================================
   SMALL MOBILE
======================================== */

@media(max-width:420px) {
  .processKvTxt h1 {
    font-size: 30px;
  }
  .processIntro {
    font-size: 13px;
  }
  .timelineContent h3 {
    font-size: 20px;
  }
  .timelineContent span {
    font-size: 17px;
  }
}
/* ========================================
   BLOG PAGE
======================================== */

/* ========================================
   BLOG KV
======================================== */

.blogKv{
  position:relative;
  height:430px;
  overflow:hidden;
  background:#e9e9e9;
}

.blogKvBg{
  position:absolute;
  inset:0;
}

.blogKvBg img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

.blogKv:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,.05) 0%,
    rgba(255,255,255,.25) 45%,
    rgba(255,255,255,.85) 100%
  );
  z-index:1;
}

.blogKvContent{
  position:relative;
  z-index:2;
  height:100%;
}

.blogKvText{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  color:#241822;
  width:100%;
  max-width:900px;
  padding:0 30px;
}

.blogKvText h1{
  margin:0 0 12px;
  /*font-family:"Noto Sans TC",sans-serif;*/
  font-size:44px;
  font-weight:800;
  line-height:1.3;
  letter-spacing:.18em;
}

.blogKvText p{
  margin:0;
  /*font-family:"Noto Sans TC",sans-serif;*/
  font-size:21px;
  font-weight:700;
  letter-spacing:.08em;
}

.blogInfo h3{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* TABLET */

@media(max-width:1024px){

  .blogKv{
    height:360px;
  }

  .blogKvText{
    left:42%;
  }

  .blogKvText h1{
    font-size:36px;
  }

  .blogKvText p{
    font-size:17px;
  }

}

/* MOBILE */

@media(max-width:768px){

  .blogKv{
    height:320px;
    margin-top: 70px;
  }

  .blogKv:after{
    background:rgba(255,255,255,.62);
  }

  .blogKvText{
    left:0;
    right:0;
    top:50%;
    transform:translateY(-50%);
    text-align:center;
    padding:0 20px;
  }

  .blogKvText h1{
    font-size:28px;
    letter-spacing:.08em;
  }

  .blogKvText p{
    font-size:15px;
    line-height:1.7;
  }

}

/* SMALL MOBILE */

@media(max-width:420px){

  .blogKv{
    height:260px;
  }

  .blogKvText h1{
    font-size:24px;
  }

  .blogKvText p{
    font-size:14px;
  }

}
/* ========================================
   BLOG CONTENT
======================================== */

.blogSection {
  padding: 90px 0 120px;
}
.blogGrid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 80px;
  align-items: flex-start;
}
.blogIntro {
  padding-top: 140px;
}
.blogEn {
  color: var(--main);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .12em;
  margin: 0 0 12px;
  /*font-family: "Noto Sans TC", sans-serif;*/
}
.blogIntro h2 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  letter-spacing: .08em;
  /*font-family: "Noto Sans TC", sans-serif;*/
}
.blogLine {
  display: block;
  width: 42px;
  height: 1px;
  background: var(--main);
  margin: 24px 0 24px;
}
.blogIntro p {
  font-size: 15px;
  font-weight: 600;
  line-height: 2;
  letter-spacing: .04em;
  /*font-family: "Noto Sans TC", sans-serif;*/
  margin-bottom: 40px;
}
.blogIntro .btn {
  min-width: 120px;
  height: 42px;
  font-size: 13px;
}
/* ========================================
   BLOG LIST
======================================== */

.blogList {
  border-left: 1px solid #d8a8a0;
  padding-left: 40px;
}
.blogItem {
  border-bottom: 1px solid #d8a8a0;
}
.blogItem a {
  display: grid;
  grid-template-columns: 90px 1fr 40px;
  gap: 22px;
  align-items: center;
  padding: 22px 0;
  color: inherit;
  text-decoration: none;
}
.blogThumb {
  width: 90px;
  height: 90px;
  background: #d9d9d9;
  overflow: hidden;
}
.blogThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .5s;
}
.blogItem:hover .blogThumb img {
  transform: scale(1.05);
}
.blogCategory {
  display: block;
  color: var(--main);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .12em;
  margin-bottom: 8px;
  /*font-family: "Noto Sans TC", sans-serif;*/
}
.blogInfo h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 10px;
  /*font-family: "Noto Sans TC", sans-serif;*/
}
.blogDate {
  color: var(--main);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  /*font-family: "Noto Sans TC", sans-serif;*/
}
.blogArrow {
  font-size: 28px;
  color: var(--main);
  text-align: center;
  transition: .3s;
}
.blogItem:hover .blogArrow {
  transform: translateX(6px);
}
/* ========================================
   TABLET
======================================== */

@media(max-width:1024px) {

  .blogGrid {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .blogIntro {
    padding-top: 0;
  }
  .blogList {
    padding-left: 0;
    border-left: none;
  }
}
/* ========================================
   MOBILE
======================================== */

@media(max-width:768px) {

  .blogSection {
    padding: 60px 0 80px;
  }
  .blogIntro h2 {
    font-size: 42px;
  }
  .blogIntro p {
    font-size: 14px;
  }
  .blogItem a {
    grid-template-columns: 70px 1fr 24px;
    gap: 14px;
  }
  .blogThumb {
    width: 70px;
    height: 70px;
  }
  .blogCategory {
    font-size: 13px;
  }
  .blogInfo h3 {
    font-size: 17px;
    line-height: 1.5;
  }
  .blogDate {
    font-size: 13px;
  }
  .blogArrow {
    font-size: 22px;
  }
}
/* ========================================
   SMALL MOBILE
======================================== */

@media(max-width:480px) {

  .blogItem a {
    grid-template-columns: 60px 1fr;
  }
  .blogArrow {
    display: none;
  }
  .blogThumb {
    width: 60px;
    height: 60px;
  }
  .blogInfo h3 {
    font-size: 16px;
  }
}
/* ========================================
   CONTACT PAGE
======================================== */

/* ========================================
   CONTACT KV
======================================== */

.contactKv{
  position:relative;
  height:520px;
  background:url("../images/inbanner05.jpg") center center / cover no-repeat;
  overflow:hidden;
}

/*.contactKvOverlay{
  position:absolute;
  inset:0;
  background:
  linear-gradient(
    90deg,
    rgba(0,0,0,.35) 0%,
    rgba(0,0,0,.25) 20%,
    rgba(255,255,255,.35) 55%,
    rgba(255,255,255,.05) 100%
  );
}*/

.contactKv .container{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  align-items:center;
}

.contactKvTxt{
  max-width:620px;
  color:#fff;
}

.contactEn{
  margin:0 0 18px;
  color:#b45332;
  font-size:13px;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.contactKvTxt h1{
  margin:0 0 28px;
  font-size:54px;
  line-height:1.25;
  font-weight:700;
  letter-spacing:.05em;
  color:#222;
}

.contactIntro p{
  margin:0;
  font-size:16px;
  line-height:2;
  font-weight:500;
  color:#222;
}

/* ========================================
   TABLET
======================================== */

@media(max-width:1024px){

  .contactKv{
    height:460px;
  }

  .contactKvTxt{
    max-width:460px;
  }

  .contactKvTxt h1{
    font-size:42px;
  }

  .contactIntro p{
    font-size:15px;
  }

}

/* ========================================
   MOBILE
======================================== */

@media(max-width:768px){

  .contactKv{
    height:380px;
    margin-top: 70px;
  }

  /*.contactKvOverlay{
    background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.55) 0%,
      rgba(0,0,0,.45) 45%,
      rgba(0,0,0,.20) 100%
    );
  }*/

  .contactKvTxt{
    max-width:100%;
  }

  .contactKvTxt h1{
    font-size:32px;
    margin-bottom:18px;
  }

  .contactIntro p{
    font-size:14px;
    line-height:1.8;
  }

}
/* ========================================
   FORM
======================================== */

.contactFormSection {
  padding: 90px 0 120px;
}
.contactFormTitle {
  max-width: 900px;
  margin: 0 auto 50px;
}
.contactFormTitle h2 {
  font-size: 27px;
  font-weight: 700;
  margin: 0 0 12px;
  /*font-family: "Noto Sans TC", sans-serif;*/
}
.contactFormTitle p {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  /*font-family: "Noto Sans TC", sans-serif;*/
}
.contactForm {
  max-width: 900px;
  margin: 0 auto;
}
.formGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 28px;
}
.formGroup {
  display: flex;
  flex-direction: column;
}
.formGroup label {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
  /*font-family: "Noto Sans TC", sans-serif;*/
}
.formGroup input, .formGroup select, .formGroup textarea {
  width: 100%;
  border: 1px solid #cfcfcf;
  background: #fff;
  border-radius: 4px;
  padding: 0 16px;
  font-size: 15px;
  /*font-family: "Noto Sans TC", sans-serif;*/
  color: #333;
  transition: .3s;
}
.formGroup input, .formGroup select {
  height: 52px;
}
.formGroup textarea {
  height: 180px;
  padding-top: 16px;
  resize: none;
}
.formGroup input:focus, .formGroup select:focus, .formGroup textarea:focus {
  outline: none;
  border-color: var(--main);
}
.formGroup.full {
  margin-top: 24px;
}
.agreeBox {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  cursor: pointer;
  font-size: 15px;
  /*font-family: "Noto Sans TC", sans-serif;*/
}
.agreeBox input {
  width: 18px;
  height: 18px;
}
.submitBtn {
  margin-top: 28px;
  min-width: 170px;
  height: 52px;
  font-size: 16px;
}
/* ========================================
   MAP
======================================== */

.contactMap {
  padding: 0 0 120px;
}
.contactMap h2 {
  max-width: 900px;
  margin: 0 auto 30px;
  font-size: 27px;
  font-weight: 700;
  /*font-family: "Noto Sans TC", sans-serif;*/
}
.mapBox {
  max-width: 900px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}
.mapBox iframe {
  width: 100%;
  height: 420px;
  border: none;
  display: block;
}

/* ========================================
   MOBILE
======================================== */

@media(max-width:768px) {
  
  .contactFormSection {
    padding: 60px 0 80px;
  }
  .contactFormTitle h2, .contactMap h2 {
    font-size: 24px;
  }
  .contactFormTitle p {
    font-size: 16px;
  }
  .formGrid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .formGroup.full {
    margin-top: 20px;
  }
  .mapBox iframe {
    height: 300px;
  }
}
/* ========================================
   SMALL MOBILE
======================================== */

@media(max-width:480px) {

  .contactFormTitle h2, .contactMap h2 {
    font-size: 24px;
  }
  .formGroup label {
    font-size: 15px;
  }
  .formGroup input, .formGroup select {
    height: 48px;
    font-size: 14px;
  }
  .formGroup textarea {
    height: 150px;
    font-size: 14px;
  }
  .submitBtn {
    width: 100%;
  }
}
/* ========================================
   PROJECT DETAIL
======================================== */

.projectDetail {
  padding: 40px 0 120px;
}
/* ========================================
   GALLERY
======================================== */

.projectGallery {
  margin-bottom: 40px;
}
.projectMainImage {
  margin-bottom: 20px;
}
.projectMainImage img {
  width: 100%;
  display: block;
  object-fit: cover;
  border-radius: 2px;
}
.projectThumbs {
  display: flex;
  align-items: center;
  gap: 12px;
}
.thumbItem {
  width: 110px;
  height: 75px;
  padding: 0;
  border: none;
  cursor: pointer;
  background: none;
  overflow: hidden;
  opacity: .45;
  transition: .3s;
}
.thumbItem.active {
  opacity: 1;
}
.thumbItem:hover {
  opacity: 1;
}
.thumbItem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.thumbNext {
  width: 42px;
  height: 42px;
  border: none;
  background: #f1f1f1;
  cursor: pointer;
  font-size: 24px;
  transition: .3s;
}
.thumbNext:hover {
  background: var(--main);
  color: #fff;
}
/* ========================================
   SUMMARY
======================================== */

.projectSummary {
  margin-bottom: 60px;
}
.projectSummary h1 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.6;
  margin: 0 0 24px;
  /*font-family: "Noto Sans TC", sans-serif;*/
}
.projectSummary ul {
  margin: 0;
  padding-left: 20px;
}
.projectSummary li {
  font-size: 15px;
  line-height: 2;
  letter-spacing: .04em;
  /*font-family: "Noto Sans TC", sans-serif;*/
}
/* ========================================
   ARTICLE
======================================== */

.projectArticle {
  margin-bottom: 60px;
}
.projectArticle h2 {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 24px;
  /*font-family: "Noto Sans TC", sans-serif;*/
}
.projectArticle p {
  font-size: 15px;
  line-height: 2;
  letter-spacing: .04em;
  margin: 0;
  /*font-family: "Noto Sans TC", sans-serif;*/
}
/* ========================================
   CONTENT IMAGES
======================================== */

.projectContent {
  display: flex;
  flex-direction: column;
  gap: 50px;
}
.projectContent img {
  width: 100%;
  display: block;
  object-fit: cover;
  border-radius: 2px;
}
/* ========================================
   TABLET
======================================== */

@media(max-width:1024px) {
  .projectSummary h1 {
    font-size: 28px;
  }
  .projectArticle h2 {
    font-size: 24px;
  }
}
/* ========================================
   MOBILE
======================================== */

@media(max-width:768px) {
  .projectDetail {
    padding-top: 110px;
    padding-bottom: 80px;
  }
  .projectMainImage {
    margin-bottom: 12px;
  }
  .projectThumbs {
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
  }
  .projectThumbs::-webkit-scrollbar {
    height: 4px;
  }
  .projectThumbs::-webkit-scrollbar-thumb {
    background: #ccc;
  }
  .thumbItem {
    flex: 0 0 80px;
    width: 80px;
    height: 60px;
  }
  .thumbNext {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
  .projectSummary {
    margin-bottom: 40px;
  }
  .projectSummary h1 {
    font-size: 24px;
    line-height: 1.5;
  }
  .projectSummary li {
    font-size: 14px;
    line-height: 1.9;
  }
  .projectArticle {
    margin-bottom: 40px;
  }
  .projectArticle h2 {
    font-size: 22px;
    margin-bottom: 16px;
  }
  .projectArticle p {
    font-size: 14px;
    line-height: 1.9;
  }
  .projectContent {
    gap: 24px;
  }
}
/* ========================================
   SMALL MOBILE
======================================== */

@media(max-width:480px) {
  .projectSummary h1 {
    font-size: 20px;
  }
  .projectArticle h2 {
    font-size: 20px;
  }
  .projectSummary li, .projectArticle p {
    font-size: 13px;
  }
}
.projectMainImage {
  overflow: hidden;
}
.projectMainImage img {
  width: 100%;
  display: block;
  transition: .4s;
}
.thumbItem {
  border: none;
  background: none;
  cursor: pointer;
  opacity: .4;
  transition: .3s;
}
.thumbItem.active {
  opacity: 1;
}
.thumbItem img {
  width: 100%;
  display: block;
}



/* ========================================
   HOME PROCESS FLOW
======================================== */

.homeProcessFlow{
  position:relative;
  display:grid;
  grid-template-columns:repeat(7,1fr);
  align-items:center;
  min-height:330px;
  margin-top:70px;
}

.homeProcessTrack{
  position:absolute;
  left:3%;
  right:3%;
  top:50%;
  height:1px;
  background:#111;
  transform:translateY(-50%);
  z-index:1;
}

.homeProcessNode{
  position:relative;
  z-index:2;
  height:330px;
  display:flex;
  flex-direction:column;
  align-items:center;
  /*font-family:"Noto Sans TC",sans-serif;*/
  font-weight:700;
  text-align:center;
}

.homeProcessNode span{
  position:absolute;
  top:50%;
  left:50%;
  width:46px;
  height:46px;
  border:2px solid #111;
  border-radius:50%;
  background:#fff;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  /*font-family:"Times New Roman",serif;*/
  font-size:18px;
  font-weight:700;
  z-index:3;
}

.processContent{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:190px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.processContent:after{
  content:"";
  position:absolute;
  left:50%;
  width:1px;
  background:#111;
  transform:translateX(-50%);
}

.isTop .processContent{
  bottom:calc(50% + 45px);
}

.isTop .processContent:after{
  top:100%;
  height:45px;
}

.isBottom .processContent{
  top:calc(50% + 45px);
}

.isBottom .processContent:after{
  bottom:100%;
  height:45px;
}

.processContent img{
  width:86px;
  height:86px;
  object-fit:contain;
  display:block;
}

.processContent strong{
  display:block;
  margin-top:10px;
  font-size:17px;
  line-height:1.45;
  letter-spacing:.08em;
  white-space:nowrap;
  font-weight:500;
}

.isBottom .processContent strong{
  margin-top:10px;
  margin-bottom:0;
}

.isBottom .processContent img{
  order:0;
}






/* ========================================
   HOME PROCESS
======================================== */

.homeProcessDesktop{
  display:block;
}

.homeProcessMobile{
  display:none;
}


/* ========================================
   MOBILE PROCESS
======================================== */

.processMobileItem{
  position:relative;
}

.processMobileContent{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.processMobileContent img{
  display:block;
  object-fit:contain;
}


/* ========================================
   TABLET + MOBILE
======================================== */

@media(max-width:1024px){

  .homeProcessDesktop{
    display:none;
  }

  .homeProcessMobile{
    display:block;
    position:relative;
    max-width:700px;
    margin:60px auto 0;
    padding:0 20px;
  }

  /* 中央時間軸 */

  .homeProcessMobile:before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    width:1px;
    background:#111;
    transform:translateX(-50%);
  }

  .processMobileItem{
    min-height:150px;
  }

  /* 數字圈 */

  .processMobileItem span{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);

    width:48px;
    height:48px;

    border:2px solid #111;
    border-radius:50%;
    background:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    /*font-family:"Times New Roman",serif;*/
    font-size:18px;
    font-weight:700;

    z-index:3;
  }

  /* 左側 */

  .processMobileItem.left .processMobileContent{
    position:absolute;
    right:calc(50% + 55px);
    top:50%;
    transform:translateY(-50%);
    width:170px;
  }

  .processMobileItem.left:before{
    content:"";
    position:absolute;
    top:50%;
    right:50%;
    width:55px;
    height:1px;
    background:#111;
  }

  /* 右側 */

  .processMobileItem.right .processMobileContent{
    position:absolute;
    left:calc(50% + 55px);
    top:50%;
    transform:translateY(-50%);
    width:170px;
  }

  .processMobileItem.right:before{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:55px;
    height:1px;
    background:#111;
  }

  .processMobileContent img{
    width:60px;
    height:60px;
    margin-bottom:10px;
  }

  .processMobileContent strong{
    font-size:15px;
    line-height:1.5;
    text-align:center;
    font-weight:500;
  }

}


/* ========================================
   MOBILE
======================================== */

@media(max-width:640px){

  .homeProcessMobile{
    padding:0 10px;
  }

  .processMobileItem{
    min-height:125px;
  }

  .processMobileItem span{
    width:40px;
    height:40px;
    font-size:15px;
  }

  .processMobileItem.left .processMobileContent{
    right:calc(50% + 38px);
    width:120px;
  }

  .processMobileItem.right .processMobileContent{
    left:calc(50% + 38px);
    width:120px;
  }

  .processMobileItem.left:before,
  .processMobileItem.right:before{
    width:38px;
  }

  .processMobileContent img{
    width:60px;
    height:60px;
    margin-bottom:8px;
  }

  .processMobileContent strong{
    font-size:15px;
    line-height:1.4;
  }

}












/* ========================================
   HOME BLOG SLIDER
======================================== */

.homeBlogSlider{
  position:relative;
  height:450px;
  overflow:hidden;
  background:#e9e9e9;
}

.homeBlogSlide{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  background-size:cover;
  background-position:center;
  transition:opacity 1s ease;
}

.homeBlogSlide:before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(255,255,255,0);
  z-index:1;
}

.homeBlogSlide.active{
  opacity:1;
  pointer-events:auto;
}

.homeBlogInner{
    position:relative;
    z-index:2;
    height:100%;
    display:block;
}

.homeBlogTxt{
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
    max-width:520px;
}

.homeBlogInner .btn{
    position:absolute;
    right:0;
    bottom:45px;
}

.homeBlogTxt h2{
  /*font-family:"Noto Sans TC",sans-serif;*/
  font-size:22px;
  font-weight:700;
  letter-spacing:.15em;
  border-bottom:1px solid #111;
  padding-bottom:16px;
  margin:0 0 18px;
}

.homeBlogTxt p{
  /*font-family:"Noto Sans TC",sans-serif;*/
  font-size:15px;
  line-height:1.9;
  font-weight:600;
  letter-spacing:.08em;
  margin:0;
}

.homeBlogDots{
  position:absolute;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  z-index:4;
  display:flex;
  gap:10px;
}

.homeBlogDots button{
  width:9px;
  height:9px;
  padding:0;
  border:1px solid #fff;
  border-radius:50%;
  background:rgba(255,255,255,.45);
  cursor:pointer;
}

.homeBlogDots button.active{
  background:var(--main);
  border-color:var(--main);
}

/* RWD */
@media(max-width:768px){

  .homeBlogSlider{
    height:360px;
  }

  .homeBlogInner{
    grid-template-columns:1fr;
    align-content:center;
    gap:28px;
  }

  .homeBlogTxt h2{
    font-size:20px;
  }

  .homeBlogTxt p{
    font-size:14px;
  }

  .homeBlogInner .btn{
    width:max-content;
  }

    .homeBlogTxt{
        position:static;
        transform:none;
        max-width:none;
        padding-top:40px;
    }

    .homeBlogInner .btn{
        position:static;
        margin-top:25px;
    }


}












.social{
  display:flex;
  align-items:center;
  gap:16px;
}

.social a{
  display:block;
  transition:.3s;
}

.social a:hover{
  transform:translateY(-4px);
}

.social img{
  display:block;
  width:52px;
  height:52px;
  object-fit:contain;
}












/* BLOG ARTICLE */

.articleHero{
  padding:80px 0 60px;
}

.articleCategory{
  text-align:center;
  color:var(--main);
  letter-spacing:.2em;
  font-size:13px;
  font-weight:700;
  margin-bottom:20px;
}

.articleHero h1{
  text-align:center;
  font-size:42px;
  line-height:1.5;
  letter-spacing:.08em;
  margin:0;
}

.articleDate{
  text-align:center;
  margin-top:20px;
  color:#777;
  letter-spacing:.1em;
}

.articleCover{
  margin-top:50px;
}

.articleCover img{
  width:100%;
  display:block;
}

.articleSubtitle {
  text-align: center;
}

.articleContent{
  padding:80px 0;
}

.narrow{
  max-width:900px;
}

.articleContent h2{
  font-size:32px;
  margin:70px 0 25px;
  line-height:1.5;
}

.articleContent h3{
  font-size:24px;
  margin:35px 0 15px;
}

.articleContent p{
  font-size:17px;
  line-height:2;
  margin-bottom:20px;
}

.introBox{
  background:#f7f5f2;
  padding:40px;
  border-left:4px solid var(--main);
}

.introBox ul{
  margin:20px 0 0;
  padding-left:20px;
}

.introBox li{
  margin-bottom:12px;
  line-height:1.8;
}

.articlePhoto{
  margin:60px 0;
}

.articlePhoto img{
  width:100%;
  display:block;
}

.articlePhoto figcaption{
  margin-top:12px;
  font-size:14px;
  color:#777;
  line-height:1.8;
}

.articlePoint{
  margin-top:30px;
}

.articleCta{
  margin-top:80px;
  background:#f7f5f2;
  text-align:center;
  padding:60px 40px;
}

.articleCta h3{
  margin-top:0;
}

@media(max-width:768px){

  .articleHero{
    padding:50px 0;
  }

  .articleHero h1{
    font-size:30px;
  }

  .articleContent{
    padding:50px 0;
  }

  .articleContent h2{
    font-size:24px;
  }

  .articleContent h3{
    font-size:20px;
  }

  .articleContent p{
    font-size:15px;
    line-height:1.9;
  }

  .introBox{
    padding:25px;
  }

  .articleCta{
    padding:40px 25px;
  }

}






/* 浮動LINE */

.lineFloat{
  position:fixed;
  right:20px;
  bottom:50px;

  width:72px;
  height:72px;

  background:rgba(255,255,255,.28);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);

  border:1px solid rgba(255,255,255,.5);
    border-radius:18px;

  display:flex;
  align-items:center;
  justify-content:center;

  z-index:999;

  box-shadow:
  0 8px 20px rgba(0,0,0,.12);

  transition:.3s;
}

.lineFloat:hover{
  transform:translateX(-5px);
}

.lineFloat img{
  width:50px;
  height:50px;
  display:block;
}

@media(max-width:768px){

  .lineFloat{
    right:12px;
    bottom:20px;
    top:auto;

    width:62px;
    height:62px;
    border-radius:18px;
  }

  .lineFloat img{
    width:42px;
    height:42px;
  }

}











/* ===============================
   MainNav Hover 中文切換
================================ */

.mainNav a{
  overflow:hidden;
  /*min-width: 75px;*/
  text-align: center;
}

.mainNav a .en,
.mainNav a .tw{
  display:block;
  transition:transform .35s ease, opacity .35s ease;
}

.mainNav a .en{
  transform:translateY(0);
}

.mainNav a .tw{
  /*position:absolute;
  left:0;
  right:0;
  top:0;
  transform:translateY(100%);*/
  opacity:0;
  font-size: 13px;

  position:absolute;
    left:50%;
    top:0;

    transform:translate(-50%,100%);
    white-space:nowrap;
}

.mainNav a:hover .en{
  transform:translateY(-120%);
  opacity:0;
}

.mainNav a:hover .tw{
  /*transform:translateY(0);*/
  opacity:1;
  color:var(--main);
  transform:translate(-50%,0);
}



/* ===============================
   MainNav Hover（RWD 關閉）
================================ */

@media (max-width: 1024px){

  .mainNav a{
    width:100%;
    overflow:visible;
  }

  /* 手機版只顯示英文 */
  .mainNav a .tw{
    display:none;
  }

  .mainNav a .en{
    position:static;
    transform:none !important;
    opacity:1 !important;
  }

  /* 關閉 Hover 切換 */
  .mainNav a:hover .en{
    transform:none;
    opacity:1;
  }

  .mainNav a:hover .tw{
    transform:none;
    opacity:0;
  }

}