:root{
    --color1: #ffd400;
}
.primary_btn{
    background-color: #ffd400;
    color: #000;
}
/* 滾軸顏色改為預設 */
* {
  scrollbar-width: thin;
  scrollbar-color: auto;
}


/* 導覽列(側邊欄) ==================================================== */
.offcanvas_logo{
    max-width: 180px;
}
.offcanvas_menu .mean-nav ul li a:hover,.offcanvas_menu .mean-nav ul li.dropdown-opened > a,.offcanvas_menu .mean-nav ul li a.mean-expand.mean-clicked,.offcanvas_close_btn:hover,.offcanvas_menu .mean-nav ul li.active a{
    color: #ffd400;
}

/* 導覽列 ==================================================== */
.header-area.sticky{
    background-color: #000;
    padding: 15px 30px;
}
.site_logo::after{
    background-color: transparent;
}
.site_logo .logo{
    max-width: 100%;
}
.site_logo img{
    max-width: 200px;
}
.menu_bar .menu_bar_icon{
    background-color: #ffd400;
}
.menu_bar .menu_bar_icon i{
    color: #000;
}
.main_menu ul > li > a{
    font-weight: normal;
}
.main_menu.style-2 ul > li.active > a{
    color: #000;
}
.main_menu.style-2 ul > li.active .sub-menu li > a{
    color: #fff;
}
.main_menu.style-2 ul > li.active > a::before {
    visibility: visible;
    opacity: 1;
}
@media (min-width:768px){
    .site_logo img{
        max-width: 250px;
    }
}
@media (min-width:1200px){
    .site_logo {
        max-width: 350px;
    }
    .site_logo img{
        max-width: 280px;
    }
    .main_menu ul > li > a{
        font-size: 16px;
    }
}
@media (max-width: 575px){
    .site_logo {
        padding: 15px 0;
    }
    .site_logo img{
        max-width: 180px;
    }
}
/* 大圖 ==================================================== */
.hero-section{
    background-position: center;
    background-repeat: no-repeat;
}
.hero_content .title{
    font-weight: 600;
}
.hero_content .desc{
    color: #ffd400;
    font-weight: normal;
}
.primary_btn .icon_box .icon_first,.primary_btn .icon_box .icon_second{
    color: #000;
}
.primary_btn > span{
    font-size: 14px;
}
/* 行車記錄器安裝、販售/氣氛燈安裝/測速器安裝/抬頭顯示器/客製化方向盤 ==================================================== */
.feature_item .icon img {
    max-width: 90px;
    max-height: 60px;
}
.feature_item .content .title{
    font-weight: 600;
}

/* 核心服務項目 ==================================================== */
.service_item{
    padding: 30px;
}
.section_title .subtitle{
    font-weight: 500;
    color: #000;
}
.section_title .title{
    font-weight: normal;
    line-height: 1.5;
    color: #000;
}
.section_title .desc p{
    font-size: 14px;
    margin: 0;
    line-height: 1.7;
    color: #666;
}
.service_item .service_icon{
    background-color: #ffd400;
}

.service_item .service_icon img{
    max-width: 50px;
}
@media (min-width:992px){
    .section_title .title{
        font-size: 26px;
    }
    .section_title .desc p{
        font-size: 16px;
    }
}
/* 無論身價，皆是座上貴賓 ==================================================== */
.about_content{
    padding: 0 10px; 
    padding-right: 20px;
}
.feature_item.style-2 .icon{
    background-color: #ffd400;
}
.about_content .desc p{
    color: #292e36;
}
.about_content .content .desc p{
    font-size: 16px;
}
/* OUR SERVICES ==================================================== */
.services-section {
    background-size: cover;
    background-position: center;
}
.services-section .section_title .subtitle::before{
    background-color: #fff;
}
.service_item.style-2{
    background-color: #1a1a1a;
    border-color: #979797;
}
.service_item.style-2::after{
    background-image: none;
}
.service_item.style-2 .title a,.service_item.style-2 .service_content .desc p{
    color: #fff;
}
.service_item.style-2 .service_btn{
    background-color: #4d4d4d;
    border-color: #b1b1b1;
    color: #b1b1b1;
}
.service_item .title a{
    font-weight: 600;
    color: #000;
}
.service_item .desc p{
    color: #666;
} 
.service_item .title a:hover {
    color: #ffd400;
}
.service_item.style-2:hover{
    border-color: #ffd400;
}
.service_item.style-2 .service_btn:hover{
    background-color: #ffd400;
    border-color: #ffd400;
}
.service_item.style-2 .service_content .icon_btn:hover i{
    color: #000;
}
@media (min-width:992px){
    .service_item .title a{
        font-size: 22px;
    }
}
/* Q&A ==================================================== */
.faq-section{
    margin: 80px 0;
}
.faq_wrapper .faq_item .faq_question:not(.collapsed)::after{
    background-color: #ffd400;
    color: #000;
}
.faq_wrapper .faq_item .faq_question{
    padding-right: 33px;
}
.faq_wrapper .faq_item .faq_answer .accordion-body p{
    color: #808080;
    padding-right: 25px;
}
.testimonial_thumbs_carousel .testi_thumb img{
    mask-image: url(../img/testi-shape.svg);
}
/* 行車記錄器安裝/CarPlay/安卓機升級/客戶滿意度/改裝經驗 ==================================================== */
.fun_fact-section{
    background-color: #e4e4e4;
}
.fun_fact_item .title{
    color: #000;
}
.fun_fact_item .fact_number{
    color: #000;
}
@media (min-width:992px) and (max-width:1199px){
    .fun_fact_item .fact_number{
        font-size: 55px!important;
    }
}
@media (max-width: 575px) {
    .fun_fact_item .fact_number {
        font-size: 36px;
    }
}
/* On Sale ==================================================== */
.cta-section.style-2{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 120px 0;
}
.cta-section.style-2 .car_image::after{
    background-color: transparent;
    background-image: none;
}
.cta_content .discount{
    text-transform: capitalize;
}
@media only screen and (min-width: 576px) and (max-width: 767px){
    .cta-section.style-2 .car_image{
        width: 70%;
    }
}
@media only screen and (max-width: 575px) {
    .cta-section.style-2 {
        padding-bottom: 220px;
    }
    .cta-section.style-2 .car_image {
        max-width: 100%;
    }
    .cta-section.style-2 .car_image img{
        margin-bottom: -20px;
    }
}
/* 評價 ==================================================== */
.testimonial-section{
    background-color: #fff;
}
.testimonial_content_item .testi_author .icon{
    color: #ffd400;
}

.testimonial_thumbs_carousel .testi_thumb::before{
    background-color: #ffd400;
}
.testimonial-section::after{
    background-image: none;
}
.testimonial_navigations .icon_btn:hover{
    background-color: #ffd400;
    border-color: #ffd400;
}
.testimonial_navigations .icon_btn:hover i{
    color: #000;
}
@media (min-width:992px){
    .testimonial_carousel_wrap .testimonial_thumbs_carousel .testi_thumb{
        max-width: 395px;
    }
    .testimonial_thumbs_carousel .testi_thumb::before{
        left: -4px;
    }
}
@media (max-width: 575px){
    .testimonial_content_item .testi_text{
        padding-right: 20px;
    }
}
/* 想替愛車升級嗎？立即預約聯繫！ ==================================================== */
.cta_wrap{
    background-image: none;
    background-color: #ffd400;
    justify-content: center;
}
.cta_wrap img{
    max-width: 270px;
}
.cta_wrap p{
    color: #000;
    margin-bottom: 0;
    font-weight: 500;
}
.cta_wrap .primary_btn{
    background-color: #000;
    color: #fff;
}
.cta_wrap .primary_btn .icon_first, .cta_wrap .primary_btn .icon_second{
    color: #fff;
}
.cta_wrap .primary_btn:hover{
    background-color: #ffd400;
    color: #000;
}
.cta_wrap .primary_btn:hover .icon_first, .cta_wrap .primary_btn:hover .icon_second{
    color: #000;
}
@media (min-width:1400px){
    .cta_wrap{
        flex-wrap: nowrap;
        gap: 20px;
        justify-content: space-between;
    }
    .cta_wrap img{
        max-width: 350px;
    }
}
/* footer */
.footer-area{
    background-color: #1a1a1a;
}
.footer_widget.ts_contact_info ul > li .content .label{
    color: #b1b1b1;
}
.footer_widget.ts_contact_info ul > li .content a, .footer_widget.ts_contact_info ul > li .content p {
    color: #fff;
}
.footer_widget.ts_contact_info ul > li{
    max-width: 370px;
}
.footer_widget.ts_contact_info ul > li .icon{
    min-width: 29px;
}
.footer_widget.ts_contact_info ul > li .content{
    width: calc(100% - 50px);
}
.footer-area .bottom_area{
    background-color: #000;
}
.footer-area .bottom_area .footer_bottom_wrap{
    justify-content: center;
    
}
.footer-area .bottom_area .footer_bottom_wrap .copyright_text p{
    color: #fff;
}
.footer-area .footer1_col_3 {
    padding-left: 10px;
}
.footer_widget.wp-nav-menu ul li > a{
    color: #b1b1b1;
}
@media (max-width:576px){
    .footer_widget.wp-nav-menu ul li > a,.footer_widget.ts_contact_info ul > li .content a,.footer_widget.ts_contact_info ul > li .content p{
        font-size: 16px;
    }
}
/* aside側邊攔(置頂鍵獨立) ==================================================== */
aside {
  display: flex;
  position: fixed;
  flex-direction: column;
  right: 0;
  bottom: 15px;
  text-align: center;
  align-items: center;
  overflow: hidden;
  padding: 0.5em 0;
  width: 50px;
  border-radius: 10px;
  transform: scale(0.8);
  z-index: 999;
}
aside a {
  width: 100%;
  height: 100%;
  text-decoration: none;
  display: block;
  cursor: pointer;
  margin: 10px 0;
}
aside .asideBottom {
  margin-top: 5px;
  transition: opacity 0.3s ease;
  opacity: 1;
}
aside .asideBottom a {
  display: flex;
  align-items: center;
  margin: 0;
  justify-content: center;
}
aside .asideBottom.hidden {
  opacity: 0;
  pointer-events: none;
}
@media (min-width:768px){
    aside {
        right: 10px;
        transform: scale(1);
    }
}
@media (min-width:992px){
    aside {
        right: 20px;
        transform: scale(1);
    }
}
/* Breadcrumb ==================================================== */
@media (min-width:992px){
    .breadcrumb-area .breadcrumb_wrap .page_title .title{
        font-size: 40px;
    }
}
/* 文章設定 ==================================================== */
.content_box{
    max-width: 880px;
}
.content_box img {
    width: 100% !important;
    height: auto !important;
    display: block;
}
.content_box iframe {
    width: 100% !important;
    height: 100% !important;
}
@media (min-width:768px){
    .content_box p{
        font-size: 16px;
    }
}
@media (min-width:992px){
    .content_box img {
        max-width: 880px !important;
        max-height: 100% !important;
    }
    .content_box iframe {
        width: 100% !important;
        height: 100% !important;
        max-width: 800px !important;
    }
}
@media(max-width:576px){
    .content_box{
        padding-right: 20px;
    }
    .content_box p{
        font-size: 14px;
    }
}
/* breadcrumb ==================================================== */
.breadcrumb-area .breadcrumb_wrap .page_title .title {
    font-size: 22px;
}
@media (min-width: 992px) {
    .breadcrumb-area .breadcrumb_wrap .page_title .title {
        font-size: 32px;
    }
}
/* 服務項目 ==================================================== */
.sidebar_widget.services_widget .services_list li.active > a, .sidebar_widget.services_widget .services_list li:hover > a{
    background-color: #ffd400;
    color: #000;
}
.sidebar_widget.services_widget .services_list li.active > a .icon, .sidebar_widget.services_widget .services_list li:hover > a .icon{
    color: #000;
}
.main_sidebar{
    border-top: #fff;
}
@media(max-width:576px){
    .services_details_content .content_box{
        padding-right: 20px;
    }
    .sidebar_widget.services_widget .services_list li > a{
        font-size: 16px;
    }
}
/* 常見問題 ==================================================== */
.faq-section.style-2 .faq_content{
    padding-bottom: 80px;
    border-top-color: #fff;
}
@media (min-width: 992px){
    .faq-section.style-2 .faq_img{
        margin-left: -45%;
    }
}
@media (min-width: 1200px){
    .faq_wrapper .faq_item .faq_question{
        font-size: 22px;
    }
}
@media (min-width: 1700px){
    .faq-section.style-2 .faq_img{
        margin-left: -65%;
    }   
}
@media (max-width:576px){
    .faq_wrapper .faq_item .faq_answer .accordion-body p{
        font-size: 16px;
    }
}
/* 最新消息 ==================================================== */
.blog_item .blog_content{
    background-image: none;
}
.blog_item.grid .blog_content .title{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    margin-bottom: 10px;
    height: 58px;
}
.blog_item.grid .blog_content p{
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    line-height: 1.5;
    height: 72px;
}
.blog_item:hover .icon_btn ,.icon_btn:hover{
    background-color: #ffd400;
    border-color: #ffd400;
}
.blog_item:hover .icon_btn i,.icon_btn:hover i{
    color: #000;
}
.blog_item .blog_image  img {
    width: 100%;
    height: auto;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}
.blog_item:hover .blog_image  img{
    transform: translate(-50%,-50%) scale(1.15);
}
.blog_item .blog_image .boximg4x3{
    position: relative;
}
.blog_item .blog_image .boximg4x3::after {
    position: absolute;
    content: "";
    top: 0;
    left: -75%;
    z-index: 1;
    display: block;
    width: 50%;
    height: 100%;
    background: --webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.3)));
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
    -webkit-transform: skewX(-25deg);
    -ms-transform: skewX(-25deg);
    transform: skewX(-25deg);
}
.blog_item:hover .blog_image .boximg4x3::after {
    -webkit-animation: shine 800ms;
    animation: shine 800ms;
}
.blog_item .blog_image .date{
    background-color: #ffd400;
    color: #000;
    font-size: 14px;
}
@media (min-width:992px){
    .blog_item.grid .blog_content .title{
        font-size: 20px;
    }
    .blog_item .blog_image .date{
        font-size: 16px;
    }
    
}
@media (min-width:1400px){
    .blog_item.grid .blog_content .title{
        font-size: 22px;
    }
}
/* 頁碼 ==================================================== */
.ts_pagination ul{
    display: flex;
    justify-content: center;
    align-items: center;
}
.ts_pagination ul li .page-numbers:not(.prev):not(.next).current, .ts_pagination ul li .page-numbers:not(.prev):not(.next):hover{
    border-color: #ffd400;
    background-color: #ffd400;
    color: #000;
}
.ts_pagination ul li .page-numbers.prev:hover, .ts_pagination ul li .page-numbers.next:hover,.ts_pagination ul li .page-numbers.prev:hover i, .ts_pagination ul li .page-numbers.next:hover i{
    color: #ffd400;
}
/* 最新消息 | 行車記錄器怎麼選？購買前先注意這幾個重點 ==================================================== */
.ts_blog_details .blog_image .date{
    background-color: #ffd400;
    color: #000;
}
.blog-details-area .row{
    justify-content: center;
}
.blog-details-area .content_box{
    max-width: 960px;
}
@media (min-width:768px){
    .ts_blog_details{
        max-width: 960px;
    }
}
@media (min-width:992px){
    .blog-details-area .content_box img {
        max-width: 900px !important;
        max-height: 100% !important;
    }
    .blog-details-area .content_box iframe {
        width: 100% !important;
        height: 100% !important;
        max-width: 800px !important;
    }
}
/* 聯絡我們 ==================================================== */
.contact-section .container > .row{
    row-gap: 50px;
}
.contact-section .contact_content{
    padding: 0 15px;
}
.contact-section .main_sidebar{
    border-top: none;
    padding-top: 0;
}
.contact-section blockquote,.contact-section .wp-block-quote{
    background-image: none;
    border: 1px solid var(--ts-color-border-1);
    background-color: #fff;
}
.contact-section .wp-block-quote h6{
    color: #000;
}
.contact-section .wp-block-quote p{
    font-weight: normal;
    font-size: 14px;
}
.contact-section .sidebar_widget{
    margin: 0;
    max-width: 700px;
}
.contact-section .sidebar_widget .widget_title{
    font-weight: normal;
    margin-bottom: 10px;
    color: #000;
}
.contact-section .sidebar_widget h4{
    margin-bottom: 40px;
    font-weight: normal;
    color: #000;
}
.contact-section .sidebar_widget.project_info_widget .info_list > li .info_label{
    margin-bottom: 8px;
}
.contact-section .sidebar_widget.project_info_widget .info_list > li .info_value{
    color: #1b1d1a;
    text-transform: unset;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 5px;
    font-family: 'DM Sans', sans-serif;
}
.contact-section .sidebar_widget.project_info_widget .info_list > li a.info_value ~ div.info_label{
    font-weight: 500;
    margin-top: 5px;
}
.contact-section .sidebar_widget.project_info_widget .info_list > li a.info_value:hover{
    color: #ffd400;
}
.contact-section .contact_content .section_title .subtitle{
    font-weight: normal;
}
.contact_form .form_group select:focus, .contact_form .form_group .nice-select:focus, .contact_form .form_group input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):focus, .contact_form .form_group textarea:focus {
    border-color: #ffd400;
}
@media (min-width:768px){
    .contact-section .wp-block-quote h6{
        font-size: 22px;
        margin-bottom: 15px;
    }
    .contact-section .wp-block-quote p{
        font-size: 18px;
    }
    .contact-section .sidebar_widget .widget_title{
        margin-bottom: 15px;
    }
}
@media (min-width:992px){
    .contact-section .sidebar_widget h4 ,.contact-section .contact_content .section_title .title{
        font-size: 22px;
    }
    .contact-section .contact_content{
        padding: 30px 15px;
    }
    .contact-section .sidebar_widget.project_info_widget .info_list > li .info_value{
        font-size: 18px;
    }
}
/* 施工案例 | 行車紀錄器  / 施工案例 | 行車紀錄器 | Toyota ==================================================== */
.case-1 .blog_item .blog_image{
    border: 1px solid #f5f6fa;
}
.blog_item .blog_image .boximg4x5{
    position: relative;
}
.blog_item .blog_image .boximg4x5::after {
    position: absolute;
    content: "";
    top: 0;
    left: -75%;
    z-index: 1;
    display: block;
    width: 50%;
    height: 100%;
    background: --webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.3)));
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
    -webkit-transform: skewX(-25deg);
    -ms-transform: skewX(-25deg);
    transform: skewX(-25deg);
}
.blog_item:hover .blog_image .boximg4x5::after {
    -webkit-animation: shine 800ms;
    animation: shine 800ms;
}
/* 施工案例 | 行車紀錄器 | Toyota | Toyota-Camry 代安裝70邁前後雙錄行車記錄器 ==================================================== */
.ts_blog_details .photoBox{
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}
.ts_blog_details .photoBox > div {
    flex: 1;   /* 關鍵 */
}
.ts_blog_details .photoBox img{
    border-radius: 10px;
}
.ts_blog_details .photoBox div .boximg4x5{
    position: relative;
}
.ts_blog_details .photoBox div .boximg4x5::after {
    position: absolute;
    content: "";
    top: 0;
    left: -75%;
    z-index: 1;
    display: block;
    width: 50%;
    height: 100%;
    background: --webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.3)));
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
    -webkit-transform: skewX(-25deg);
    -ms-transform: skewX(-25deg);
    transform: skewX(-25deg);
}
.ts_blog_details .photoBox div:hover .boximg4x5::after {
    -webkit-animation: shine 800ms;
    animation: shine 800ms;
}
@media (min-width:768px){
    .ts_blog_details .photoBox{
        flex-direction: row;
        flex-wrap: wrap;
        row-gap: 0;
    }
    .ts_blog_details .photoBox > div{
        flex: calc(50% - 20px);
        margin: 10px;
    }
}
/* 關於我們 */
.about_content.style-2.page .section_title .title{
    color: #000;
}
.about_content.style-2.page .about_quote{
    line-height: 1.5;
    letter-spacing: 1px;
    padding-right: 15%;
    padding-top:5%;
    font-size: 14px;
}
.about_quote::before{
    right: 5%;
}
.about_content.style-2.page .about_quote::after{
    mask-image:none;
    background-color: #f5f6fa;
    clip-path: polygon(0 0, 95% 0, 100% 100%, 0% 100%);
    border-radius: 10px;
}
.join_team_wrap{
    background-color: #ffd400;
    background-image: none;
    padding-right: 10%;
}
.join_team_wrap .section_title .title{
    color: #000;
}
.join_team_wrap .section_title .desc p{
    color: #1b1d27;
}
.join_team_wrap .section_title .desc h6{
    margin-top: 15px;
    color: #000;
}
.join_team_wrap .join_img .join_inner_img{
    background-position: center 40%;
}
.services-section.style-2 .section_title .subtitle,.services-section.style-2.page .section_title .title{
    color: #000;
}
.services-section.style-2.page{
    background-color: transparent;
}
.page .service_item.style-2 .service_content .desc p{
    color: #666;
}
.page .service_item.style-2.light .title{
    color: #000;
    font-weight: 600;
}
.page .service_item.style-2.light:hover{
    border-color: #ffd400;
}
.page .service_item.style-2.light .service_btn{
    background-color: transparent;
}
.page .service_item.style-2.light .service_btn:hover{
    background-color: #ffd400;
    border-color: #ffd400;
}
.page .service_item.style-2.light .service_btn:hover i{
    color: #000;
}
@media (min-width:768px) and (max-width:992px){
    .join_team_wrap .section_title{
        max-width: 400px;
    }
}
@media (min-width:992px){
    .about_content .desc p{
        font-size: 18px;
    }
    .about_content.style-2.page .about_quote{
        font-size: 16px;
    }
    .service_item.style-2.light .title{
        font-size: 22px;
    }
    .services-section.page .row{
        align-items: stretch;
    }
    .service_item.style-2.light{
        height: 100%;
    }
}
@media (min-width:1200px){
    .about_content.style-2.page .about_quote{
        font-size: 18px;
        line-height: 1.7;
    }
    .join_team_wrap .section_title .desc p{
        font-size: 18px;
    }
    .join_team_wrap .section_title .desc h6{
        font-size: 20px;
        margin-top: 20px;
    }
}
@media (max-width: 767px){
    .join_team_wrap .join_img {
        width: 10%;
    }
    .join_team_wrap .join_img .join_inner_img {
         width: 90%;
        /*-webkit-clip-path: polygon(30% 0%, 101% 0, 101% 101%, 0% 101%);
        clip-path: polygon(60% 0%, 101% 0, 101% 101%, 0% 101%); */
    }
}