/*---------------------------------------
  CUSTOM PROPERTIES ( VARIABLES )             
-----------------------------------------*/
:root {
  --white-color:                  #ffffff;
  --primary-color:                #eed6b8;
  --gray-color:                   #dddddd;
  --coffee-color:                 #d8cfc4;
  --brown-color:                  #9c7a4a;
  --secondary-color:              #777c59;
  --section-bg-color:             #f0f8ff;
  --line-color:                   #919576;
  --custom-btn-bg-color:          #80d0c7;
  --custom-btn-bg-hover-color:    #13547a;
  --dark-color:                   #000000;
  --p-color:                      #717275;
  --border-color:                 #7fffd4;
  --link-hover-color:             #13547a;
  --body-color:                   #fbfaf8;  

  --body-font-family:             'Open Sans', sans-serif;
  --title-font-family:            'Noto Serif TC','cwtexhei', 'Varela Round', 'Montserrat', '微軟正黑體', sans-serif;
  
  --e-title-color:                #97846b;
  

  --h1-font-size:                 58px;
  --h2-font-size:                 46px;
  --h3-font-size:                 32px;
  --h4-font-size:                 28px;
  --h5-font-size:                 24px;
  --h6-font-size:                 22px;
  --p-font-size:                  20px;
  --menu-font-size:               14px;
  --btn-font-size:                18px;
  --copyright-font-size:          15px;

  --border-radius-large:          100px;
  --border-radius-medium:         20px;
  --border-radius-small:          10px;

  --font-weight-normal:           400;
  --font-weight-medium:           500;
  --font-weight-semibold:         600;
  --font-weight-bold:             700;
}

body {
	background-color: var(--body-color);
	font-family: var(--body-font-family);
	scroll-behavior: smooth;
	letter-spacing: 1px;
}

a,a:link,a:hover,a:active,a:visited{transition: 1s;text-decoration: none;
font-family: 'Noto Serif TC','cwtexhei', 'Varela Round', '微軟正黑體', sans-serif;}
a:hover{
	transform: translateY(-3px);
}
.logo{
	width: 100%;
}

.pc{
	display: block;
}
.mobile{
	display: none;
}

.float{
	position: fixed;
	z-index: 2;
	top: 60%;
	right: 0px;
}

.float .area{
	margin-bottom: 5px;
	width: 45px;
}

.float .fb{
	margin-bottom: 8px;
}

.float .contact{
	margin-bottom: 8px;
}

.float-m{
	position: fixed;
	z-index: 2;
	top: 25%;
	right: 0px;
}

.float-m .area{
	margin-bottom: 5px;
	width: 45px;
}

.float-m .line{
	margin-bottom: 8px;
}


.float-m .fb{
	margin-bottom: 8px;
}

.float-m .contact{
	margin-bottom: 8px;
}

.float-m .lines{
	margin-bottom: 0px;
}


.float-m .fbs{
	margin-bottom: 0px;
}

.float-m .contacts{
	margin-bottom: 0px;
}

#btn-back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
}

/* =====================
   Hero 進場動畫
===================== */

.hero-sub {
transform: translate(100px, -200px);
transition: opacity 1s ease, transform 1s ease;
}




/*---------------------------------------
  TYPOGRAPHY               
-----------------------------------------*/

h2,
h3,
h4,
h5,
h6 {
  color: var(--dark-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--title-font-family); 
  font-weight: var(--font-weight-semibold);
}

h1 {
  font-size: var(--h1-font-size);
  font-weight: var(--font-weight-bold);
}

h2 {
  font-size: var(--h2-font-size);
  font-weight: var(--font-weight-bold);
}

h3 {
  font-size: var(--h3-font-size);
}

h4 {
  font-size: var(--h4-font-size);
}

h5 {
  font-size: var(--h5-font-size);
}

h6 {
  color: var(--primary-color);
  font-size: var(--h6-font-size);
}

p {
  color: var(--p-color);
  font-size: var(--p-font-size);
  font-weight: var(--font-weight-normal);
}

ul li {
  color: var(--p-color);
  font-size: var(--p-font-size);
  font-weight: var(--font-weight-normal);
}

a, 
button {
  touch-action: manipulation;
  transition: all 0.3s;
}

a {
  display: inline-block;
  color: var(--primary-color);
  text-decoration: none;
}

a:hover {
  color: var(--link-hover-color);
}

b,
strong {
  font-weight: var(--font-weight-bold);
}



/*---------------------------------------
  SECTION               
-----------------------------------------*/
.section-padding {
  padding-top: 100px;
  padding-bottom: 100px;
}

.section-paddings {
	padding-top: 10px;
	padding-bottom: 60px;
}

.section-padding-case {
    padding-top: 80px;
    padding-bottom: 80px;
  }

.section-padding-coll {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  
.section-padding-colls {
    padding-top: 0px;
    padding-bottom: 60px;
  }
  
.section-padding-progress {
	padding-top: 0px;
	padding-bottom: 0px;
  }  

  
.section-padding-news {
    padding-top: 80px;
    padding-bottom: 80px;
  }

.section-padding-footer {
    padding-top: 30px;
    padding-bottom: 10px;
  }
.section-bg {
  background-color: var(--section-bg-color);
}

.section-overlay {
  background-image: linear-gradient(15deg, #13547a 0%, #80d0c7 100%);
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  opacity: 0.85;
}

.section-overlay + .container {
  position: relative;
}

.tab-content {
  background-color: var(--white-color);
  border-radius: var(--border-radius-medium);
}

.nav-tabs {
  border-bottom: 1px solid #ecf3f2;
  margin-bottom: 40px;
  justify-content: center;
}

.nav-tabs .nav-link {
  border-radius: 0;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  color: var(--p-color);
  font-family: var(--title-font-family);
  font-size: var(--btn-font-size);
  font-weight: var(--font-weight-medium);
  padding: 15px 25px;
  transition: all 0.3s;
}

.nav-tabs .nav-link:first-child {
  margin-right: 20px;
}

.nav-tabs .nav-item.show .nav-link, 
.nav-tabs .nav-link.active,
.nav-tabs .nav-link:focus, 
.nav-tabs .nav-link:hover {
  border-bottom-color: var(--primary-color);
  color: var(--primary-color);
}

/*---------------------------------------
  banner img               
-----------------------------------------*/
.banner{
	width: 100%;
	margin-top: 0px;
}

/*---------------------------------------
  title               
-----------------------------------------*/
.title{width: 100%;}
.e-title{color: var(--e-title-color);}
.about-title{width: auto;}
.collection-title{width: auto;}
.news-title{width: auto;}
.progress-title{width: auto;}
.contactus-title{width: auto;}

/*---------------------------------------
  方向               
-----------------------------------------*/
.text-ends{text-align:right!important}
.text-centers{text-align:center!important}
.text-centerss{text-align:center!important}
/*---------------------------------------
  CUSTOM ICON COLOR               
-----------------------------------------*/
.custom-icon {
  color: var(--secondary-color);
}
/*---------------------------------------
 盒子               
-----------------------------------------*/
.box{
  background: #fff;
  border-radius: 30px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  overflow: hidden; /* 讓圓角不破 */
}

.boxs{
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 2px 5px rgba(0,0,0,0);
	overflow: hidden; /* 讓圓角不破 */
	border: 1px solid #CCCCCC;
}

.box-p{
	background: #fff;
	border: 1px solid #D0D0D0;
	width: 98%;
	margin-right: auto;
	margin-left: auto;
}
/*---------------------------------------
  CUSTOM BUTTON               
-----------------------------------------*/
.custom-btn {
  background: var(--custom-btn-bg-color);
  border: 2px solid transparent;
  border-radius: var(--border-radius-large);
  color: var(--white-color);
  font-size: var(--btn-font-size);
  font-weight: var(--font-weight-semibold);
  line-height: normal;
  transition: all 0.3s;
  padding: 10px 20px;
}

.custom-btn:hover {
  background: var(--custom-btn-bg-hover-color);
  color: var(--white-color);
}

.custom-border-btn {
  background: transparent;
  border: 2px solid var(--custom-btn-bg-color);
  color: var(--custom-btn-bg-color);
}

.custom-border-btn:hover {
  background: var(--custom-btn-bg-color);
  border-color: transparent;
  color: var(--white-color);
}

.custom-btn-bg-white {
  border-color: var(--white-color);
  color: var(--white-color);
}


/*---------------------------------------
  SITE HEADER              
-----------------------------------------*/
.site-header {
  background-image: linear-gradient(15deg, #13547a 0%, #80d0c7 100%);
  padding-top: 150px;
  padding-bottom: 80px;
}

.site-header .container {
  height: 100%;
}



.site-header .custom-icon {
  color: var(--white-color);
  font-size: var(--h4-font-size);
}

.site-header .custom-icon:hover {
  color: var(--secondary-color);
}


/*---------------------------------------
  NAVIGATION              
-----------------------------------------*/
.sticky-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}

.sticky-wrapper.is-sticky .navbar {
  background-color: var(--secondary-color);
  opacity: 0.95;
}

.navbar {
  background: transparent;
  border-bottom: 0px solid rgba(128, 208, 199, 0.35);
  z-index: 9;
}

.navbar-brand,
.navbar-brand:hover {
  font-size: var(--h3-font-size);
  font-weight: var(--font-weight-bold);
  display: block;
}

.navbar-brand span {
  font-family: var(--title-font-family);
}

.navbar-expand-lg .navbar-nav .nav-link {
  border-radius: var(--border-radius-large);
  margin: 10px;
  padding: 10px;
}

.navbar-nav .nav-link {
  display: inline-block;
  color: var(--white-color);
  font-family: var(--title-font-family); 
  font-size: var(--btn-font-size);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative;
  padding-top: 15px;
  padding-bottom: 15px;
}

.navbar-nav .nav-link.active, 
.navbar-nav .nav-link:hover {
  color: var(--primary-color);
}

.navbar .dropdown-menu {
  background: var(--white-color);
  box-shadow: 0 1rem 3rem rgba(0,0,0,.175);
  border: 0;
  display: inherit;
  opacity: 0;
  min-width: 9rem;
  margin-top: 20px;
  padding: 13px 0 10px 0;
  transition: all 0.3s;
  pointer-events: none;
}

.navbar .dropdown-menu::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 15px solid var(--white-color);
  position: absolute;
  top: -10px;
  left: 10px;
}

.navbar .dropdown-item {
  display: inline-block;
  color: var(--p-bg-color);
  font-family: var(--title-font-family); 
  font-size: var(--menu-font-size);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative;
}

.navbar .dropdown-item.active, 
.navbar .dropdown-item:active,
.navbar .dropdown-item:focus, 
.navbar .dropdown-item:hover {
  background: transparent;
  color: var(--primary-color);
}

.navbar .dropdown-toggle::after {
  content: "\f282";
  display: inline-block;
  font-family: bootstrap-icons !important;
  font-size: var(--copyright-font-size);
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  left: 2px;
  border: 0;
}

@media screen and (min-width: 992px) {
  .navbar .dropdown:hover .dropdown-menu {
    opacity: 1;
    margin-top: 0;
    pointer-events: auto;
  }
  
  
}

.navbar-icon {
  background: var(--white-color);
  border-radius: var(--border-radius-large);
  display: inline-block;
  font-size: var(--h5-font-size);
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  transition: all 0.3s ease;
}

.navbar-icon:hover {
  background: var(--primary-color);
  color: var(--white-color);
}

.navbar-toggler {
  border: 0;
  padding: 0;
  cursor: pointer;
  margin: 0;
  width: 35px;
  height: 35px;
  outline: none;
}

.navbar-toggler:focus {
  outline: none;
  box-shadow: none;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
  background: transparent;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before,
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
  transition: top 300ms 50ms ease, -webkit-transform 300ms 350ms ease;
  transition: top 300ms 50ms ease, transform 300ms 350ms ease;
  transition: top 300ms 50ms ease, transform 300ms 350ms ease, -webkit-transform 300ms 350ms ease;
  top: 0;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before {
  transform: rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
  transform: rotate(-45deg);
}

.navbar-toggler .navbar-toggler-icon {
  background: var(--white-color);
  transition: background 10ms 300ms ease;
  display: block;
  width: 30px;
  height: 2px;
  position: relative;
}

.navbar-toggler .navbar-toggler-icon:before,
.navbar-toggler .navbar-toggler-icon:after {
  transition: top 300ms 350ms ease, -webkit-transform 300ms 50ms ease;
  transition: top 300ms 350ms ease, transform 300ms 50ms ease;
  transition: top 300ms 350ms ease, transform 300ms 50ms ease, -webkit-transform 300ms 50ms ease;
  position: absolute;
  right: 0;
  left: 0;
  background: var(--white-color);
  width: 30px;
  height: 2px;
  content: '';
}

.navbar-toggler .navbar-toggler-icon::before {
  top: -8px;
}

.navbar-toggler .navbar-toggler-icon::after {
  top: 8px;
}


/*---------------------------------------
  about    	background-image: linear-gradient(15deg, #13547a 0%, #80d0c7 100%);
-----------------------------------------*/
.about-section {
	position: relative;
	overflow: hidden;
	padding-top: 0px;
	padding-bottom: 0px;
}

.w{
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	position: relative;
}

.ws{
	position: absolute;
	left: 0px;
	bottom: -10px;
}
.wss{
	position: absolute;
	left: 0px;
	bottom: 0px;
}

.about-section .input-group {
  background-color: var(--white-color);
  border-radius: var(--border-radius-large);
  padding: 10px 15px;
}

.about-section .input-group-text {
  background-color: transparent;
  border: 0;
}

.about-section input[type="search"] {
  border: 0;
  box-shadow: none;
  margin-bottom: 0;
  padding-left: 0;
}

.about-section button[type="submit"] {
  background-color: var(--primary-color);
  border: 0;
  border-radius: var(--border-radius-large) !important;
  color: var(--white-color);
  max-width: 150px;
}


.about-text{
	padding-top: 360px;
	padding-right: 50px;
	padding-bottom: 0px;
	padding-left: 50px;
}


/*---------------------------------------
  TOPICS              
-----------------------------------------*/
.featured-section {
	border-radius: 0 0 100px 100px;
	padding-bottom: 100px;
}

.featured-section .row {
  position: relative;
  bottom: 100px;
  margin-bottom: -100px;
}

.custom-block {
  border-radius: var(--border-radius-medium);
  position: relative;
  overflow: hidden;
  padding: 30px;
  transition: all 0.3s ease;
  height: 100%;
}

.custom-block:hover {
  background-color: var(--secondary-color);
  transform: translateY(-3px);
}

.custom-block > a {
  width: 100%;
}

.custom-block-image {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
  margin-top: 35px;
}

.custom-block .rounded-pill {
  border-radius: 5px !important;
  display: flex;
  justify-content: center;
  text-align: center;
  width: 30px;
  height: 30px;
  line-height: 20px;
}

.custom-block-overlay {
  height: 100%;
  min-height: 350px;
  padding: 0;
}

.custom-block-overlay > a {
  height: 100%;
}

.custom-block-overlay .custom-block-image {
  border-radius: var(--border-radius-medium);
  display: block;
  height: 100%;
  margin-top: 0;
}

.custom-block-overlay-text {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  padding: 30px;
}

.social-share {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 2;
  padding: 20px 35px;
}

.social-share .bi-bookmark {
  color: var(--white-color);
  font-size: var(--h5-font-size);
}

.social-share .bi-bookmark:hover {
  color: var(--secondary-color);
}

.bg-design {
  background-color: #00B0FF;
}

.bg-graphic {
  background-color: #00BFA6;
}

.bg-advertising {
  background-color: #F50057;
}

.bg-finance {
  background-color: #536DFE;
}

.bg-music {
  background-color: #F9A826;
}

.bg-education {
  background-color: #00BFA6;
}


/*---------------------------------------
  TOPICS               
-----------------------------------------*/
.topics-detail-block {
  border-radius: var(--border-radius-medium);
  position: relative;
  overflow: hidden;
}

.topics-detail-block-image {
  display: block;
  border-radius: var(--border-radius-medium);
}

blockquote {
  background-color: var(--section-bg-color);
  border-radius: var(--border-radius-small);
  font-family: var(--title-font-family);
  font-size: var(--h4-font-size);
  font-weight: var(--font-weight-bold);
  display: inline-block;
  text-align: center;
  margin: 30px;
  padding: 40px;
}

.topics-listing-page .site-header {
  padding-bottom: 65px;
}

.custom-block-topics-listing-info {
  margin: 30px 20px 20px 30px;
}

.custom-block-topics-listing {
  height: inherit;
}

.custom-block-topics-listing .custom-block-image {
  width: 200px;
}


/*---------------------------------------
  PAGINATION              
-----------------------------------------*/
.pagination {
  margin-top: 20px;
}

.page-link {
  border: 0;
  border-radius: var(--border-radius-small);
  color: var(--p-color);
  font-family: var(--title-font-family);
  margin: 0 5px;
  padding: 8px 15px;
}

.page-link:hover,
.page-item:first-child .page-link:hover,
.page-item:last-child .page-link:hover {
  background-color: var(--secondary-color);
  color: var(--white-color);
}

.page-item:first-child .page-link {
  margin-right: 10px;
}

.page-item:first-child .page-link,
.page-item:last-child .page-link {
  border-radius: var(--border-radius-small);
}

.active>.page-link, .page-link.active {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
}


/*---------------------------------------
  news             
-----------------------------------------*/
.news-section {position: relative;}
.news-area {width: 100%;}
.news-title {color: var(--brown-color);}
.nbg {
	background-image: url(../images/icon/arrow-icon.png);
	background-repeat: no-repeat;
	background-position: right center;
}

.nbg:hover {
	background-image: url(../images/icon/arrow-icon-hover.png);
	background-repeat: no-repeat;
	background-position: right center;
}

/*---------------------------------------
  works             
-----------------------------------------*/
.works-section {
  position: relative;
}

.work-bg {
	position: relative;
	background-color: #d8cfc4;
	background-image: url(../images/inx/sc.svg);
	background-size: cover 50%;
	background-repeat: no-repeat;
	background-position: right bottom;
}
/*---------------------------------------
  case            
-----------------------------------------*/

.case-area{
	position: relative;
	width: 100%;
	float: left;
}
.case-bg {
	background-color: #ffffff;
}
.case-bg1 {
	background-color: #fac158;
}
.case-bg2 {
	background-color: #fac158;
}
.case-bg3 {
	background-color: #edede3;
}
.case-bg4 {
	background-color: #fdecd2;
}

.case-bg4s {
	background-color: #fdecd2;
	background-image: url(../images/newcase/case01_04-01.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	padding-top: 50px;
	padding-bottom: 50px;
}
.case-bg5 {
	background-color: #ffffff;
}

/*---------------------------------------
  Architectural      
-----------------------------------------*/

.arch-bg {
	position: relative;
	background-image: url(../images/about/body.jpg);
	background-repeat: no-repeat;
	background-position: left bottom;
}
.mts-5{margin-top:3rem!important}
.mts-10{margin-top:6rem!important}
.mts-15{margin-top:9rem!important}

.lbg{
	background-image: url(../images/about/pic3.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	background-size:50%;
}

.rbg{
	background-image: url(../images/about/pic4.jpg);
	background-repeat: no-repeat;
	background-position: right 70%;
	background-size: 30%;
}

.name{
	width: 80%;
}

/*---------------------------------------
  collection            
-----------------------------------------*/
.collection-section {
  position: relative;
}

.collection-bg {
	background-color: #e2ddd4;
}
/*---------------------------------------
  FAQs              
-----------------------------------------*/
.faq-section .accordion-item {
  border: 0;
}

.faq-section .accordion-button {
  font-size: var(--h6-font-size);
  font-weight: var(--font-weight-semibold);
}

.faq-section .accordion-item:first-of-type .accordion-button {
  border-radius: var(--border-radius-large);
}

.faq-section .accordion-button:not(.collapsed) {
  border-radius: var(--border-radius-large);
  box-shadow: none;
  color: var(--primary-color);
}

.faq-section .accordion-body {
  color: var(--p-color);
  font-size: var(--btn-font-size);
  line-height: 40px;
}

/*---------------------------------------
  NEWSLETTER               
-----------------------------------------*/
.newsletter-image {
  border-radius: var(--border-radius-medium);
}


/*---------------------------------------
  CONTACT               
-----------------------------------------*/
.google-map {
  border-radius: var(--border-radius-medium);
}

.contact-form .form-floating>textarea {
  border-radius: var(--border-radius-medium);
  height: 150px;
}


/*---------------------------------------
  SUBSCRIBE FORM               
-----------------------------------------*/
.subscribe-form-wrap {
  padding: 50px;
}

.subscribe-form {
  width: 95%;
}


/*---------------------------------------
  CUSTOM FORM               
-----------------------------------------*/
.custom-form .form-control {
  border-radius: var(--border-radius-large);
  color: var(--p-color);
  margin-bottom: 24px;
  padding-top: 13px;
  padding-bottom: 13px;
  padding-left: 20px;
  outline: none;
}

.form-floating>label {
  padding-left: 20px;
}

.custom-form button[type="submit"] {
  background: var(--custom-btn-bg-color);
  border: none;
  border-radius: var(--border-radius-large);
  color: var(--white-color);
  font-family: var(--title-font-family);
  font-size: var(--p-font-size);
  font-weight: var(--font-weight-semibold);
  transition: all 0.3s;
  margin-bottom: 0;
}

.custom-form button[type="submit"]:hover,
.custom-form button[type="submit"]:focus {
  background: var(--custom-btn-bg-hover-color);
  border-color: transparent;
}


/*---------------------------------------
  SITE FOOTER  position: relative;            
-----------------------------------------*/
.site-footer {
	border-bottom: 0px solid var(--secondary-color);
	background-image: url(../images/inx/footer-body.jpg);
	background-repeat: repeat;
}

.site-footer-title {
  color: var(--primary-color); 
}

.site-footer .dropdown-menu {
  padding: 0;
}

.site-footer .dropdown-item {
  color: var(--p-color);
  font-size: var(--menu-font-size);
  font-weight: var(--font-weight-medium);
  padding: 4px 18px;
}

.site-footer .dropdown-item:hover {
  background-color: transparent;
  color: var(--primary-color);
}

.site-footer .dropdown-menu li:first-child .dropdown-item {
  padding-top: 10px;
}

.site-footer .dropdown-menu li:last-child .dropdown-item {
  padding-bottom: 12px;
}

.site-footer .dropdown-toggle {
  background-color: var(--secondary-color);
  border-color: var(--white-color);
}

.site-footer .dropdown-toggle:hover {
  background-color: var(--primary-color);
  border-color: transparent;
}

.site-footer-links {
  padding-left: 0;
}

.site-footer-link-item {
  display: block;
  list-style: none;
  line-height: normal;
}

.site-footer-link {
  color: var(--white-color);
  font-size: var(--copyright-font-size);
  font-weight: var(--font-weight-medium);
  line-height: normal;
}
.site-footer-link:hover{
  color: var(--coffee-color);
  font-size: var(--copyright-font-size);
  font-weight: var(--font-weight-medium);
  line-height: normal;
}

.copyright-text {
  font-size: var(--copyright-font-size);
  color: var(--white-color);
}



/*---------------------------------------
  SOCIAL ICON               
-----------------------------------------*/
.social-icon {
  margin: 0;
  padding: 0;
}

.social-icon-item {
  list-style: none;
  display: inline-block;
  vertical-align: top;
}

.social-icon-link {
  background: var(--secondary-color);
  border-radius: var(--border-radius-large);
  color: var(--white-color);
  font-size: var(--copyright-font-size);
  display: block;
  margin-right: 10px;
  text-align: center;
  width: 35px;
  height: 35px;
  line-height: 36px;
  transition: background 0.2s, color 0.2s;
}

.social-icon-link:hover {
  background: var(--primary-color);
  color: var(--white-color);
}

@media screen and (max-width: 1366px) {
.navbar-expand-lg .navbar-nav .nav-link {
  border-radius: var(--border-radius-large);
  margin: 10px;
  padding: 10px;
}

/* =====================
   Hero 進場動畫
===================== */

.hero-sub {
transform: translate(100px, -50px);
transition: opacity 1s ease, transform 1s ease;
width: 150px;
}

}

/*---------------------------------------
  RESPONSIVE STYLES               
-----------------------------------------*/
@media screen and (max-width: 991px) {
	
  h1 {
    font-size: 48px;
  }

  h2 {
    font-size: 36px;
  }

  h3 {
    font-size: 32px;
  }

  h4 {
    font-size: 28px;
  }

  h5 {
    font-size: 20px;
  }

  h6 {
    font-size: 18px;
  }

  .section-padding {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  
.breadcrumb{--bs-breadcrumb-padding-x:0;--bs-breadcrumb-padding-y:0;--bs-breadcrumb-margin-bottom:1rem;--bs-breadcrumb-bg: ;--bs-breadcrumb-border-radius: ;--bs-breadcrumb-divider-color:#6c757d;--bs-breadcrumb-item-padding-x:0.5rem;--bs-breadcrumb-item-active-color:#6c757d;
	display: flex;
	flex-wrap: wrap;
	padding: var(--bs-breadcrumb-padding-y) var(--bs-breadcrumb-padding-x);
	margin-bottom: var(--bs-breadcrumb-margin-bottom);
	font-size: var(--bs-breadcrumb-font-size);
	list-style: none;
	justify-content: flex-start;
	border-radius: var(--bs-breadcrumb-border-radius)
}
  
  .navbar {
    background-color: var(--secondary-color);

  }

  .navbar-nav .dropdown-menu {
    position: relative;
    left: 10px;
    opacity: 1;
    pointer-events: auto;
    max-width: 155px;
    margin-top: 10px;
    margin-bottom: 15px;
  }

  .navbar-expand-lg .navbar-nav {
    padding-bottom: 0px;
  }

  .navbar-expand-lg .navbar-nav .nav-link {
    padding: 0;
  }

  .nav-tabs .nav-link:first-child {
    margin-right: 5px;
  }

  .nav-tabs .nav-link {
    font-size: var(--copyright-font-size);
    padding: 10px;
  }

  .featured-section {
    padding-bottom: 50px;
  }

  .custom-block-topics-listing .custom-block-image {
    width: auto;
  }

  .custom-block-topics-listing > .d-flex,
  .custom-block-topics-listing-info,
  .custom-block-topics-listing a {
    flex-direction: column;
  }

  .timeline-container .vertical-scrollable-timeline .list-progress {
    height: 75%;
  }

  .timeline-container .vertical-scrollable-timeline li {
    padding-left: 135px;
  }

  .subscribe-form-wrap {
    padding-top: 30px;
    padding-bottom: 0;
  }
.mt-5s{margin-top:0rem!important}

/*---------------------------------------
  about    	background-image: linear-gradient(15deg, #13547a 0%, #80d0c7 100%);
-----------------------------------------*/
.about-section {
	position: relative;
	overflow: hidden;
	padding-top: 72px;
	padding-bottom: 0px;
}

/*---------------------------------------
  Architectural      
-----------------------------------------*/
.mts-5{margin-top:1rem!important}
.mts-10{margin-top:1rem!important}
.mts-15{margin-top:1rem!important}

.lbg{
	background-image: url();
	background-repeat: no-repeat;
	background-position: left top;
	background-size:50%;
}

.rbg{
	background-image: url(../images/about/pic4.jpg);
	background-repeat: no-repeat;
	background-position: right 70%;
	background-size: 50%;
}  

.start-50{left:30%!important}
.m-5s{margin:0rem!important}
/*---------------------------------------
  banner img               
-----------------------------------------*/
.banner{
	width: 100%;
	margin-top: 0px;
}  
  
/*---------------------------------------
  間格               
-----------------------------------------*/  
  
.mt-4{margin-top: 0.8rem!important;}  
.mt-6{margin-top:1.5rem!important}
  
/*---------------------------------------
  方向               
-----------------------------------------*/
.text-ends{text-align:left!important}
.text-centers{text-align:left!important}  
  
/*---------------------------------------
  about    
-----------------------------------------*/
.about-text{
	padding-top: 30px;
	padding-right: 0px;
	padding-bottom: 30px;
	padding-left: 0px;
} 
/*---------------------------------------
  work    
-----------------------------------------*/
.work-bg {
	position: relative;
	background-color: #d8cfc4;
	background-image: url(../images/inx/sc.svg);
	background-size: auto 15%;
	background-repeat: no-repeat;
	background-position: right bottom;
}
 

/*---------------------------------------
  TOPICS              
-----------------------------------------*/
.featured-section .row {
	position: relative;
	bottom: 0px;
	margin-bottom: 0px;
	margin-top: 50px;
}
  
/*---------------------------------------
  方向設定              
-----------------------------------------*/  
 .text-center{text-align:left!important} 

/* =====================
   Hero 進場動畫
===================== */

.hero-sub {
transform: translate(100px, -50px);
transition: opacity 1s ease, transform 1s ease;
width: 125px;
}  
}
@media screen and (max-width: 736px) {
.logo{
	width: 80%;
}
.w-25{width:100%!important}
.w-10{width:100%!important}
.fs-5s{font-size:1.05rem!important}
/* =====================
   Hero 進場動畫
===================== */

.hero-sub {
	transform: translate(30px, 15px);
	transition: opacity 1s ease, transform 1s ease;
	width: 85px;
}
.d-flex {
    display: flex !important;
    flex-direction: column;
}
.wss{
	position: absolute;
	left: 0px;
	bottom: 2px;
}

/*---------------------------------------
  Architectural      
-----------------------------------------*/

.rbg{
	background-image: url();
	background-repeat: no-repeat;
	background-position: right 70%;
	background-size: 50%;
}  
.case-bg4s {
	background-color: #fdecd2;
	background-image: url(../images/newcase/case01_04-01.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	padding-top: 0px;
	padding-bottom: 30px;
}

/*---------------------------------------
  title               
-----------------------------------------*/
.about-title{width: 90%;}
.collection-title{width: 100%;}
.news-title{width: 90%;}
.progress-title{width: 90%;}
.contactus-title{width: 90%;}

}

@media screen and (max-width: 500px) {
.fs-5s{font-size:1.05rem!important}	
/* =====================
   Hero 進場動畫
===================== */

.hero-sub {
transform: translate(50px, -140px);
transition: opacity 1s ease, transform 1s ease;
width: 160px;
}  	
/*---------------------------------------
  work    
-----------------------------------------*/
.work-bg {
	position: relative;
	background-color: #d8cfc4;
	background-image: url(../images/inx/sc.svg);
	background-size: auto 10%;
	background-repeat: no-repeat;
	background-position: right bottom;
}

/*---------------------------------------
  news             
-----------------------------------------*/

.nbg {
	background-image: url();
	background-repeat: no-repeat;
	background-position: right center;
}

.nbg:hover {
	background-image: url();
	background-repeat: no-repeat;
	background-position: right center;
}
.pc{
	display: none;
}
.mobile{
	display: block;
}
	
}
@media screen and (max-width: 480px) {
.float-m{
	position: fixed;
	z-index: 2;
	top: 22%;
	right: 0px;
}
.fs-5s{font-size:1.05rem!important}
	
  h1 {
    font-size: 36px;
  }

  h2 {
    font-size: 28px;
  }

  h3 {
    font-size: 26px;
  }

  h4 {
    font-size: 22px;
  }

  h5 {
    font-size: 20px;
  }
  
/* =====================
   Hero 進場動畫
===================== */

.hero-sub {
transform: translate(30px, -80px);
transition: opacity 1s ease, transform 1s ease;
width: 130px;
}   
}
@media screen and (max-width: 320px) {
/* =====================
   Hero 進場動畫
===================== */

.hero-sub {
	transform: translate(10px,-55px);
	transition: opacity 1s ease, transform 1s ease;
	width: 110px;
}}