@charset "UTF-8";
/* ------------------------------------------------------------------
author:        谷辰網路資訊
email:         service@gcii.tw
website:       http://www.gcii.tw
 -------------------------------------------------------------------*/

html, body {
	font-family: "Montserrat","Arial","蘋果儷中黑","Apple LiGothic Medium","微軟正黑體","Microsoft JhengHei",sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.8;
}


.index-page .header-area {background-color:#FFFFFF;}
.index .hero-area {padding-top: 100px;margin-top: 100px;}
.index .hero-area-bg {position: absolute;width: 100%;height: 100%;top: 0;inset-inline-start: 0;}
.index .hero-area-bg .bg-overlay {position: absolute;content: "";width: 100%;height: 100%;background-color: #000;top: 0;inset-inline-start: 0;opacity: .5;mix-blend-mode: multiply;}
.index .hero-area-bg img {width: 100%;height: 100%;object-fit: cover;}
.index .section-spacing-bottom {padding-bottom: 150px;}
.index .hero-area .section-title-wrapper {margin-top: 154px;}
.index .hero-area .section-title-wrapper .title-wrapper {min-height: 450px;}
.index .team-area .section-header {display: grid;gap: 20px 60px;grid-template-columns: 1fr auto;align-items: center;}
.index .team-area .btn-protfolio {display: flex;justify-content: flex-start;gap: 15px;margin-top: 35px;}
.index .team-area .team-wrapper {display: grid;gap: 40px 30px;grid-template-columns: repeat(3, 1fr);}
.index .team-area .team-box .thumb {border-radius: 0;overflow: hidden;}
.index .team-area .team-box .content {margin-top: 20px;}
.index .team-area .team-box .thumb img {transition: all 0.5s;}
.index .team-area .team-box:hover .thumb img {transform: scale(1.1);}
.index .team-area .team-box .title {font-size: 16px;line-height: 1.4;}
.index .client-area .client-area-inner {padding-top: 0px;}
.index .client-area-text {position: relative;}
.index .client-area-text .text {font-size: 30px;line-height: 1;max-width: 370px;position: absolute;inset-inline-start: 40%;top: 70px;}
.index .client-area .clients-wrapper {display: grid;grid-template-columns: repeat(6, 1fr);}
.index .client-area .client-box {display: flex;justify-content: center;align-items: center;border: 1px solid var(--border);min-width: 100px;aspect-ratio: 100 / 100;padding: 0 20px;margin-top: -1px;border-inline-start-color: rgba(0, 0, 0, 0);}
.index .client-area .client-box:nth-child(1) {grid-column-start: 2;border-inline-start-color: var(--border);}
.index .client-area .client-box:nth-child(2) {grid-column-start: 1;border-inline-start-color: var(--border);}
.index .client-area .client-box:nth-child(7) {grid-column-start: 2;border-inline-start-color: var(--border);}
.index .client-area .client-box:nth-child(12) {grid-column-start: 5;border-inline-start-color: var(--border);}
.index .client-area .client-box img {opacity: .6;transition: all .5s;}
.about-area .section-title {font-size:38px;font-weight:600;line-height:1.5;}
.about-area .section-title-wrapper {position:relative;}
.about-area .image-wrapper {position:absolute;right:0;bottom:0;}
.about-area .info-text .number {font-size:140px;line-height:.84;display:flex;padding-top:50px;}
.about-area .info-text .number span {position:absolute;top:0;left:0;font-size: 25px;}
.about .service-area .section-content {display:grid;gap:35px 60px;grid-template-columns:auto 900px;}
.about .service-area .section-title {font-size:40px;}
.about .service-area .service-box .title {font-size:18px;}
.about .service-area  .wc-btn-circle {border: 1px solid #c9f21e;}
.about .work-area .section-content {display:grid;gap:35px 60px;grid-template-columns:auto 900px;margin-top:100px;}
.about .work-area .subtitle-wrapper {margin-top:0;}
.about .work-area .section-title-wrapper {padding-bottom:18px;border-bottom:0px solid transparent;}
.about .work-area h3.section-title {font-size:40px;}
.about .service-details-area {padding-bottom:100px;}
.about .service-details-area2 {padding-bottom:150px;}
.about .service-details-area .steps-wrapper-box {border-top:1px solid var(--border);margin-top:0px;}
.about .service-details-area .working-steps {display:grid;gap:40px 30px;grid-template-columns:repeat(4, 1fr);}
.about .service-details-area2 .working-steps {display:grid;gap:40px 30px;grid-template-columns:repeat(3, 1fr);}
.about .service-details-area .working-step {padding-top:20px;position:relative;}
.about .service-details-area .working-step:before {position:absolute;content:"";width:7px;height:7px;background-color:var(--primary);border-radius:50%;top:-4px;inset-inline-start:0;}
.about .service-details-area .working-step .title {font-size:18px;line-height:1.29;}
.about .service-details-area .working-step .text {margin-top:15px;}
.about .client-area-text {position: relative;}
.about .client-area-text .text {font-size: 30px;line-height: 1;max-width: 370px;position: absolute;inset-inline-start: 40%;top: 70px;}
.about .client-area .clients-wrapper {display: grid;grid-template-columns: repeat(6, 1fr);}
.about .client-area .client-box {display: flex;justify-content: center;align-items: center;border: 1px solid var(--border);min-width: 100px;aspect-ratio: 100 / 100;padding: 0 20px;margin-top: -1px;border-inline-start-color: rgba(0, 0, 0, 0);}
.about .client-area .client-box:nth-child(1) {grid-column-start: 2;border-inline-start-color: var(--border);}
.about .client-area .client-box:nth-child(2) {grid-column-start: 1;border-inline-start-color: var(--border);}
.about .client-area .client-box:nth-child(7) {grid-column-start: 2;border-inline-start-color: var(--border);}
.about .client-area .client-box:nth-child(12) {grid-column-start: 5;border-inline-start-color: var(--border);}
.about .client-area .client-box img {opacity: .6;transition: all .5s;}
.about .client-area .client-box img:hover {opacity: 1;}

.team-area .section-title {max-width:630px;font-size:50px;}
.team-area .awards-list {margin-top:30px;}
.team-area .awards-list ul {display:flex;gap:20px 40px;max-width:460px;justify-content:space-between;}
.team-area .meta {display:grid;gap:18px;grid-template-columns:auto;}
.team-area .meta .number {font-size:30px;line-height:.85;}
.team-area .meta .text {margin-top:11px;}
.team-area .awards-list ul li:not(:first-child) {padding-inline-start:40px;border-inline-start:1px solid var(--border);}
.team-area .team-wrapper {display:grid;gap:40px 30px;grid-template-columns:repeat(3, 1fr);}
.team-box .content {margin-top: 20px;}
.team-box .thumb {overflow: hidden;}
.team-box .thumb img {transition: all 0.5s;}
.team-box:hover .thumb img {transform: scale(1.1);}
.team-box .title {font-size: 16px;line-height: 1.4;}
.hero-area .section-title {font-size: 60px;line-height: 1.4;}
.btn-protfolio {display: flex;justify-content:flex-end;gap:15px;margin-top:35px;}
.hero-area .section-content .text-wrapper {margin-inline-start:100px;margin-top:25px;}
.hero-area .section-content .text {max-width:500px;text-indent:0px;}
.clients-area-inner .shape-1 {width:-moz-max-content;width:max-content;position:absolute;top:0;inset-inline-end:78%;height:100%;overflow:hidden;}
.service-area .service-top-wrapper {padding-bottom: 150px;}
.service-area .services-grid {display:grid;grid-template-columns:repeat(4, 1fr);margin:0 -50px;gap:50px 0;}
.service-area .service-item {padding:0 50px;border-inline-start: 1px solid #ece7e4;}
.service-area .service-item .title {padding-bottom: 25px;font-size:26px;}
.service-area .service-item .service-features li {font-size:18px;color:var(--secondary);font-weight:400;padding-bottom:1px;list-style:disc;list-style-position:inside;}
.about-area .section-content .bg:after {background-color:rgba(18, 18, 18, .5);}
.contact-page .section-title {font-size:60px;}
.contact-page .contact-area .contact-formfield textarea {width:100%;height:100px;border:none;border-bottom:1px solid rgba(18, 18, 18, 0.08);outline:none;background-color:rgba(0, 0, 0, 0);transition:all .5s;}


.mainbody .pagination-box {margin-top: 100px;margin-bottom: 0px;}
.mainbody .pagination {display: flex;gap: 10px;justify-content:center;}
.mainbody .pagination a {width: 50px;height: 50px;border: 1px solid var(--border);display: inline-flex;justify-content: center;align-items: center;border-radius: 50%;font-size: 18px;color: var(--primary);}
.mainbody .pagination a.current,.mainbody .pagination a:hover {background-color:#c9f21e;border:1px solid #c9f21e;}


.footer-area {background-color:#000000;}
.footer-area .section-title {font-size:40px;line-height:1;margin-top:-29px;}
.footer-area .section-header .text {font-size:20px;line-height:1.2;max-width:850px;font-weight:400;}
.footer-area .footer-logo {position:absolute;right:0;margin-top:50px;}
.footer-area .footer-cta {gap:0px;grid-template-columns:40% 60%;border-top: 1px solid #4a4a4a;border-bottom: 1px solid #4a4a4a;}
.footer-area .section-header {position:relative;}
.footer-area .footer-contact-bottoms {display:inline-block;width:160px;margin-right:200px;}
.footer-area .footer-contact-bottom {position:relative;width:360px;border:1px solid #e7e7e7;padding:15px 15px 10px 15px;}
.footer-area .footer-contact-bottom img {position:absolute;right:10px;margin-top:6px;}
.footer-area .footer-contact-bottom h4 {color:#FFFFFF;text-align:left;font-size:20px;line-height:30px;font-weight:400;}
.footer-area .copyright-area-inner {position:relative;z-index:2;border-top:0px solid rgba(255, 255, 255, 0);}

.wc-btn-protfolio {font-size:16px;font-weight:500;border-radius:25px;padding:10px 20px;background-color:#ffffff;color: #000000;border:1px solid #002217;}
.wc-btn-protfolio.active,.wc-btn-protfolio:hover {background-color:#c9f21e;color: #000000;border:1px solid #c9f21e;}
.protfolio_d .wc-btn-protfolio {padding:10px 50px;}

@media (max-width: 1919px) {
    .index .hero-area {margin-top: 0px;}
    .index .header-area .header-area__inner {height: 80px;}
}
@media (max-width: 1199px) {
	.mainbody {padding:80px 0 0 0;}
	.index .hero-area {height: auto;}
	.service .service-area .services-grid {grid-template-columns: repeat(3, 1fr);}
	.service .service-area .service-item {padding: 0 30px;}
	.service .service-area .services-grid {margin: 0 -20px;}
}
@media (max-width: 991px) {
	.footer-area .footer-logo {position:relative;right:0;margin-top:10px;margin-bottom:80px;}
	.about .service-area .section-content {grid-template-columns: auto;}
	.about .work-area .section-content {grid-template-columns: auto;margin-top: 50px;}
	.about .client-area-text .text {font-size: 18px;max-width: 230px;top: 40px;}
	.service .client-area-text .text {font-size: 18px;max-width: 230px;top: 40px;}
	.service .clients-area-inner {padding-inline-start: 0;margin-inline-end: 0;}
	.service .service-area .services-grid {grid-template-columns: 1fr 1fr;}
	.index .team-area .section-header {grid-template-columns: 1fr;}
	.index .team-area .team-wrapper {display: grid;gap: 40px 30px;grid-template-columns: repeat(2, 1fr);}
	.protfolio .team-area .team-wrapper {display: grid;gap: 40px 30px;grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 768px) {
	.header__logo img {max-width:200px;}
	.footer-area .section-title {font-size:30px;line-height:1;margin-top:-29px;}
	.footer-area .section-header .text {font-size:16px;}
	.footer-area .footer-cta {gap:0px;grid-template-columns:100% 100%;padding-top:20px;padding-bottom:20px;margin-top:20px;}
	.footer-area .footer-cta .text-end {display:none;}
	.about .about-area .section-title {font-size: 28px;font-weight: 600;line-height: 1.5;}
	.about .about-area .image-wrapper {bottom: -50px;right: -40px;}
	.about .about-area .image-wrapper img {width: 60%;}
	.about .about-area .info-text .number {font-size: 100px;line-height: .84;padding-top: 50px;}
	.about .service-area .section-title {font-size: 30px;}
	.about .work-area h3.section-title {font-size: 28px;line-height: 1.2;}
	.about .work-area h2.section-title {font-size: 40px;text-align: center;}
	.about .service-details-area .steps-wrapper-box {border-top: 0;}
	.about .service-details-area .working-steps {grid-template-columns: repeat(2, 1fr);}
	.about .service-details-area .working-step {padding-top: 20px;border-top: 1px solid var(--border);}
	.about .client-area-text .text {text-align: center;position: static;margin: 0 auto;margin-bottom: 30px;}
	.about .client-area .client-box {border: none;aspect-ratio: 100 / 50;}
	.about .client-area .client-box:nth-child(1) {grid-column-start: auto;}
	.about .client-area .client-box:nth-child(2) {grid-column-start: auto;}
	.about .client-area .client-box:nth-child(7) {grid-column-start: auto;}
	.about .client-area .client-box:nth-child(12) {grid-column-start: auto;}

	.service .client-area-text .text {text-align: center;position: static;margin: 0 auto;margin-bottom: 30px;}
	.service .client-area .client-box {border: none;aspect-ratio: 100 / 50;}
	.service .client-area .client-box:nth-child(1) {grid-column-start: auto;}
	.service .client-area .client-box:nth-child(2) {grid-column-start: auto;}
	.service .client-area .client-box:nth-child(7) {grid-column-start: auto;}
	.service .client-area .client-box:nth-child(12) {grid-column-start: auto;}

	.service .hero-area-inner {padding-top: 100px;}
	.service .hero-area .section-title {font-size: 40px;line-height: 1.4;}
	.service .hero-area .section-content .text-wrapper {margin-inline-start: 10px;margin-top: 25px;}
	.service .service-area .service-item .title {padding-bottom: 25px;font-size: 20px;}
}
@media (max-width: 575px) {
	.index .team-area .team-wrapper {display: grid;gap: 40px 0px;grid-template-columns: repeat(1, 1fr);}
	.about .service-details-area .working-steps {grid-template-columns: repeat(1, 1fr);}
	.about .client-area .clients-wrapper {grid-template-columns: repeat(2, 1fr);}
	.service .client-area .clients-wrapper {grid-template-columns: repeat(2, 1fr);}
	.service .service-area .services-grid {grid-template-columns: 1fr;}
	.protfolio .btn-text-flip span:before {display: none;}
	.protfolio .team-area .team-wrapper {display: grid;gap: 40px 0px;grid-template-columns: repeat(1, 1fr);}
}