@charset "utf-8";

/*汽車音響救難大隊(郡偉企業)*/

/*
關於CSS設定說明
CSS屬性是會繼承的，而且還是由上往下繼承。
同樣元素設定16px 後 12px 再 15px 最後會以最後設定的15px為準
但是有兩種情況除外:
1.絕對路徑命名. 如: .xx .yy .zz p {設定值;}
2.important.  如: .xx p {設定值 !important;}

CSS3選取器語法 :nth-child(n) 

*/


/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */


/*上方選單解除滑動固定
.header_area.sticky { position:relative;}
*/


/*上方選單右邊設定 臉書/LINE/電話/信箱
.tp_links a:before {寬高大小設定}
.tp_links a.me_tp_fb {}
.tp_links a.me_tp_fb:before {背景換圖/建議.SVG}
.tp_links a.me_tp_line {}
.tp_links a.me_tp_line:before {背景換圖/建議.SVG}
.tp_links a.me_tp_call {}
.tp_links a.me_tp_call:before {背景換圖/建議.SVG}
.tp_links a.me_tp_mail {}
.tp_links a.me_tp_mail:before {背景換圖/建議.SVG}
*/


/*電腦LOGO
.nav-brand {}
*/
.nav-brand img {filter: invert(1); padding-top: 8px;}
.other_select_page .nav-brand img { filter: none;}

/*手機LOGO
.nav-brand-m {}
*/


/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */


/*預設解除背景輪播*/
#content_main { margin:0;}
.bannerindex { position:static; height:auto;}
.swiper-banner { position:static; margin:0; height:auto;} 
.swiper-slide img { height:auto;}
@media screen and (max-width: 768px) {
.bannerindex { padding:0; margin:0;}
}


/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */

/*首頁*/
.news_part { display: none;}
.pageIndex .main_part { border-top: none;}
.pageIndex .nav-brand img { filter: none; }
.pageIndex .products-list .item:first-child { width: 100%;}
.pageIndex .products-box {
    padding: 80px 20px;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
	display: none;
}


#content_main { margin:0;}
.main_header_area { height: 0; }
.pageIndex .header_area { position: relative;}
.other_select_page .header_area { position: relative;}
.services_page .header_area { position: relative;} 
.blog_page .header_area { position: relative;}
.product_page .header_area { position: relative;}
.contact_page .header_area { position: relative;}

.main_header_area .container { background-color: rgba(0,0,0,0.0); max-width: 2000px; padding: 10px 30px 10px 30px; }
.nav-header { padding: 5px;}

.nav-menu {  margin: 10px; }
.nav-menu > li > a {
    margin-top: 0px!important;
    padding: 20px;
    letter-spacing: 2px;
    background: #12151fe6;
    color: #fff;
	font-size: 16px;
}
.nav-menu>li:nth-child(odd) > a{background: #11141dd1;}
.nav-menu>li:hover>a, .nav-menu>li.active>a, .nav-menu>li.focus>a { color: #ECFFFF; }
.nav-menu>li:nth-child(8) { display: none;}

/*下拉*/
.submenu-indicator { display: none;}/*下拉箭頭*/
.nav-menu>li>.nav-dropdown {  border: none;  background: transparent;}
.nav-dropdown > li > a {
    color: #ffffff;
    padding: 10px 20px;
    border-bottom: 1px solid #afafaf2b;
    background: linear-gradient(156deg, #15366e, #131620d9);
	font-size: 15px;
}
.nav-dropdown .nav-dropdown { background: transparent;}/*第三層*/
.nav-dropdown > li > a:hover, .nav-dropdown > li > a:focus {  color: #131521 !important;  background: #ECFFFF;  transition: all .5s;font-weight: bold;}
.nav-dropdown>li:hover>a, .nav-dropdown>li.focus>a { color: #ECFFFF;}

/*內頁BANNER 設定*/
.banner {
    background-repeat: no-repeat;
    background-image: url(https://pic03.eapple.com.tw/zestaudio/ban.jpg);
    padding: 200px 0;
    background-size: cover;
	position:relative;
}

.banner h5 {
    font-size: 36px;
    color: #484d51;
    left: 20%;
    top: 65%;
    text-shadow: 0 0 10px rgb(255 255 255);
    text-align: left;
    font-weight: 600;
	line-height: 90%;
	position:absolute;
	z-index: 1;
}
.banner h5:before {
    content: " ";
    display: block;
    font-size: 20px;
    font-weight: normal;
	width: 100%;
}
.blog_page .banner h5:before { content: "ACTIVITY"}
.product_page .banner h5:before { content: "AGENCY BRAND";}
.contact_page .banner h5:before { content: "CONTACT";}
.other_select_page .banner h5:before { content: "ABOUT ZEST AUDIO";}
.services_page .banner h5:before { content: "SERVICES"}
.album_page .banner h5:before { content: "INSTALLATION"}
.share_page .banner h5:before { content: "DOWNLOAD"}

.banner.banA {background-image: url(https://pic03.eapple.com.tw/zestaudio/ban_a.jpg);}
.banner.banB {background-image: url(https://pic03.eapple.com.tw/zestaudio/ban_b.jpg);}
.banner.banC {background-image: url(https://pic03.eapple.com.tw/zestaudio/ban_c.jpg);}
.banner.banD {}
.banner.banF {background-image: url(https://pic03.eapple.com.tw/zestaudio/ban_f.jpg);}


.banner:after {
    content: "";
    background-image: url(https://pic03.eapple.com.tw/zestaudio/38349319_m.png);
    left: 0;
    bottom: 0;
    position: absolute;
    display: block;
    -webkit-animation: anime_wave01 20s linear 10s infinite alternate;
    animation: anime_wave01 20s linear 0s infinite alternate;
    /* background-position: bottom left; */
    background-repeat: repeat-x;
    height: 85%;
    width: 100%;
    opacity: 0.7;
}

/*.services_page .banner:after {background-size: contain;top: 53%;}*/
@keyframes anime_wave01 {
	0% {background-position: 0 0, 0 bottom;}
	100% { background-position: 1200px 0, 1200px bottom;}
}


/*footer*/
.footer {
    padding-top: 50px;
    background: linear-gradient(244deg, #12151f, #121418);
}
.footer_info li p, .footer_info li p a {color: #ECFFFF;}

.footer_menu a {
    border: 1px #ECFFFF solid;
    color: #ECFFFF;
    background: transparent;
    width: 48%;
    text-align: center;
	border-radius: 6px 0;
}


/*聯絡我們*/
.list_before.info li:nth-child(6) { padding-left: 0;}
.footer_menu a:hover {
    background: #ECFFFF;
    color: #12151f;
    transition: all .5s;
    transition-timing-function: ease-in-out;
    border: 1px #ecffff00 solid;
}


/*送出按鈕*/
.animated-arrow {background: #292c35;}
.animated-arrow:after {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    left: 0;
    top: 0;
    opacity: 0;
    transition: all .4s 100ms cubic-bezier(.42,0,.58,1);
    -webkit-transform: skewX( -50deg ) translateX(-50%);
    -ms-transform: skewX(-50deg) translateX(-50%);
    transform: skewX( -50deg ) translateX(-50%);
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    background: -webkit-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 100%);
    background: linear-gradient(to right,#ecffff00 0%,#ecffff 100%);
}
.animated-arrow:hover:after{ left: 150%; opacity: 1;}

/*關於我們下方選單*/
ul.other_promotion.clearfix { margin: 65px auto; max-width: 1200px; width: 100%;}

/*其他頁面*/
.promotion_title h2 { border-bottom: 2px solid #cbcbc9;}
.promotion_title { border-bottom: 1px solid #cbcbc9;}


/*購物車*/
/*qa隱藏*/
li.prod-item:nth-child(2) { display: none;}


.product-layer-two li a {
    border: none;
    background:#ecffff;
    padding: 13px 14px 10px;
    color: #12151f;
    border-bottom: 1px solid #8facc0;
}
.product-layer-two li.active a {
    font-weight: normal;
    background: #8facc0;
    color: #ecffff;
}
.products-list .name { text-align: center; margin-bottom: 13px;}
.products-list .more { border: 1px solid #484d51; color: #484d51;}
.products-list a:hover .more { border: 1px solid #12151f;background: #12151f;}

.products-list .pic { overflow: hidden;background:#fff;}
.products-list .pic:after {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    left: 0;
    top: 0;
    opacity: 0;
    transition: all .4s 100ms cubic-bezier(.42,0,.58,1);
    -webkit-transform: skewX( -50deg ) translateX(-50%);
    -ms-transform: skewX(-50deg) translateX(-50%);
    transform: skewX( -50deg ) translateX(-50%);
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    background: -webkit-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 100%);
    background: linear-gradient(to right,#ecffff00 0%,#ecffff 100%);
}
.products-list .pic:hover:after { left: 150%; opacity: 1;}

/*購物車選單下拉*/
.product-layer-two li:hover ul { border: none !important; border-top: none !important;}
.product-layer-two li li a { background: transparent; color: #000000;}
#menuTop li li:hover a, .product-layer-two li li:hover a { color: #000;}
.product-layer-two li li { border-bottom: 1px solid #8facc0;linear-gradient(156deg, #15366e, #131620d9)}
.product-layer-two li li:hover {background: #ecffff;}

/*商品資訊*/
h3.prod-thumb { margin-bottom: 14px;}
.nextaction { background-color: #3c3e46;}
.lastaction { color: #3c3e46; background-color: #ecffff;}	
.lastPage { background: #ecffff;}
			
/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */


/*文章設定*/
/*一排呈現
.subbox_item { width:100%;}
*/

/*文章側邊*/
.blog_le .accordion {  border: none; border-bottom: 1px #12151f3d solid; border-radius: 0;}
.blog_le .accordion > li:hover, .blog_le .accordion > li.on_this_category { background: #ECFFFF !important;}
.blog_le .accordion > li:hover .link a, .blog_le .accordion > li.on_this_category .link a { color: #12151f !important;}

.blog_page .main_part{ max-width: 1400px;}
.blog_in_page .main_part{ max-width: 1300px;}
.blog_subbox { display: flex; flex-wrap: wrap;}
.blog_box_edit { line-height: 180%;    text-align: justify;}
h4.blog_category_title { text-align: justify;}

.subbox_item { width: 32%; margin-right: 1%;}
.subbox_item a:before , .subbox_item a:after { transition: 0.3s;}
.subbox_item a:after {background: #ecffff54; border: none;}
.blog_list_le { width: 100%;}
.blog_list_ri { width: 100%;}
.subbox_item a:before {
    color: #12151c;
    background: #ecffffed;
}


/*文章內文*/
.blog_box_edit div {word-break: break-all;}
/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */
.show-list .show_name {
    position: absolute;
    bottom: 50%;
    left: 50%;
    width: 300px;
    height: 50px;
    font-size: 18px;
    margin-left: -150px;
    margin-bottom: -35px;
    color: #fff !important;
    text-align: center;
    transition: all ease-in .3s;
    opacity: 0;
}
.show-list .item:hover .show_name { opacity: 1;}


/*相本分類全版面 ( 限制最寬2000px
.work_page .main_part { max-width:2000px;}
.work_page .show_content { padding:0; width:100%;}
.work_page .show-list .item { width:33%; display:inline-block; float:none; margin:0; padding:0;}
@media screen and (max-width: 768px) {
.work_page .show-list .item { width:49%;}
}
@media screen and (max-width: 570px) {
.work_page .show-list .item { width:100%;}
}
.work_page .show-list .item a { max-width:100%;}
.work_page .show-list .show_pic { height:auto; line-height:0;}
.work_page .show-list .show_pic img { max-width:100%; max-height:100%;}
.work_page .show-list .show_name { position:absolute; top:50%; right:10%; width:80%; height:auto; line-height:160%; font-size: 20px; color: #FFFFFF !important; border: solid 1px #fff; text-align: center; margin: -20px 0 0 -120px; padding:5px 20px; transition:all ease-in .3s; opacity:0;}
.work_page .show-list .item:hover .show_name {opacity:1;}
*/


/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */


/*相本列表
.work_info_page .main_part { max-width:2000px;}
.work_info_page .show_content { padding:0; width:100%;}
.work_info_page .subalbum-menu { text-align:center;}
.work_info_page .subalbum-menu h2 { float:none;}
.work_info_page .pic-list .item { margin:0; padding:10px; width:49%; float:none; display:inline-block;}
@media screen and (max-width: 768px) {
.work_info_page .pic-list .item { width:100%;}
}
.work_info_page .pic-list .show_pic { height:auto; line-height:0;}
.work_info_page .pic-list .show_pic img { max-width:100%; max-height:100%;}
.work_info_page .pic-list .item a { max-width:100%; pointer-events: none; cursor: default; } 取消連結被點擊效果
*/


/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */





@media screen and (max-width: 768px) {
/* 開啟手機板下方按鈕所需設定 */
#bottom_menu {display: block; }
.footer.with_shopping_mode { padding:30px 0 70px; }
#to_top { bottom:60px;}

/*logo*/
.nav-brand img { filter: none; }

/*header*/
.main_header_area .container { padding: 10px 0;}
.main_header_area { height: 78px;}
.main_header_area {background: #12151f;}
.nav-header { padding: 0;}
.nav-brand img {max-width: 100%;}

.nav-toggle:before {
    background-color: #ecffff;
    box-shadow: 0 0.5em 0 0 #ecffff, 0 1em 0 0 #ecffff;
}
.nav-toggle:after {color: #ecffff;}

/*footer*/
.footer_logo { text-align: center; margin: 15px auto 20px;}
.footer_info li:nth-child(1) { width: 100%; text-align: center;}
.footer_info li:nth-child(2) { width: 100%; margin-top: 18px;margin-bottom:5px;}

/*menu*/
.nav-menu > li > a, .nav-menu>li:nth-child(odd) > a { background: #fff;}
.nav-menu > li > a { color: #484d51;}
.nav-menu>li:hover>a, .nav-menu>li.active>a, .nav-menu>li.focus>a { color: #8facc0;}

/*banner*/
.banner {
    padding: 140px 0;
}
.banner h5 {top: 40%;}
.banner:after {height: 250px;opacity: 1;}

.submenu-indicator {
    display: block;
}


/* 大圖調整 */
.swiper-slide img {
animation-fill-mode: none;
-webkit-animation-fill-mode: none;}

/* 新版最新消息內頁 */
.blog_back {display: flex; justify-content: space-between; align-items: center; align-content: center;}
.blog_back a {width:31.5%;}
}

@media screen and (max-width: 600px) { 
.subbox_item { width: 100%;}

}