@charset "utf-8";

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

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

*/


/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */
/*header*/
/*上方選單解除滑動固定
.header_area.sticky { position:relative;}
*/
.header_area { background: rgb(255 255 255 / 30%); position: fixed;padding: 0px 10px;}
.main_header_area .container { max-width: 95%; margin: auto; padding: 0 15px;}

.stellarnav > ul > li > a{padding: 0 20px; line-height: 60px; height: 60px;letter-spacing: 2px;}
.stellarnav > ul > li a:before { content: ""; background: #0292d5;  width: 0%;  height: 3px;  top: 0; left: 0; position: absolute;}
.stellarnav > ul > li:hover a:before {  width: 100%;}
.stellarnav > ul > li:hover > a { background: linear-gradient(to bottom, #ffffff, #ffffff00); color: #043e58;}
.stellarnav > ul > li:nth-last-of-type(1) { display: none;}


/*上方選單右邊設定 臉書/LINE/電話/信箱*/
.me_tp_features { display: none;}
/*
.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-header { padding: 10px 0;grid-row: 1;}
.nav-brand { display: flex; align-items: center;}

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

/* 商品下拉超過30個變大 */
.stellarnav.desktop li.bigMenu>ul{display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); left: 0; width: 100%; position: fixed; padding: 20px;}
.stellarnav.desktop li.bigMenu ul ul{top: 100%; left: 0; width: 100%; background: #efefef; height: auto; max-height: 300px; overflow: auto;}
.stellarnav.desktop li.bigMenu ul ul li{margin: 0;} 
.stellarnav.hasBigMenu li.bigMenu li.has-sub > a:after{border-left: 6px solid transparent; border-bottom:unset; border-right: 6px solid transparent; border-top: 6px solid #898989; right: 5px;}
/* 主分類超過30個但次分類直接顯示 
.stellarnav.desktop li.bigMenu>ul{grid-gap: 10px;}
.stellarnav.desktop li.bigMenu li{border: 0;}
.stellarnav.desktop li.bigMenu>ul>li>a{border: 1px solid #ddd;}
.stellarnav.desktop li.bigMenu ul ul{display: block !important; position: relative; top: 0; background: unset; border: 0;}
.stellarnav.desktop li.bigMenu ul ul li{border: 0;}
 主分類超過30個但次分類直接顯示-結束 */

/* 商品下拉超過30個--結束 */

/*footer*/
.footer { padding: 70px 0 0px;}
.footer_info { grid-template-columns: 1fr; padding-right: 0px;}
.footer_info li { padding: 20px 10px;}
.footer_info li:nth-child(1) { padding-top: 0;}
.footer_info li:nth-child(2) { border-top: 1px solid #d9d9d9;padding-bottom: 0;}
.footer_menu a:nth-of-type(1) { display: none;}
.footer_menu a { padding: 5px 14px 5px 0; border: unset; color: #888; background: transparent;}
.footer_menu a:hover { background: transparent; color: #0291d3;}

.box_link { position: relative; right: 0px; width: auto; max-width: fit-content;  flex-direction: row; order: 0;}
.box_link a { width: 35px; border: unset;  }

.copy {  padding: 12px 0; color: #ffffff; border-top: unset;  background: #0291d3;margin-top: 35px;}
.copy a , .copy a:hover { color: #fff;}
/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */

/*購物車*/
/*預設購物車版面 產品分類選單在左側 商品內頁詳細介紹下表單更改樣式 by shint at 2023.1.5  */
.product_page .main_part { max-width:1500px;}
/* .product_info_page .main_part { max-width:1200px;} */

.product_page .show_content,
.product_info_page .show_content { width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-start; align-content: flex-start;}
.product_page .product_menu_list { position: relative; width: 220px; letter-spacing: 1px; /*border-right: 1px solid #ccc;*/min-height: 30vw;}
.product_page .products-list,
.product-wrapper { width: calc(100% - 270px);}
ul.page { width: 100%;}

.product-layer-two li ul { position:static; margin-top:5px; /*display:block !important;*/ width:100%; margin-left:0;}
.product-layer-two li:hover ul { border: none !important; /*display:block !important;*/}
.product-layer-two li li { display: block; padding:0; transition:all ease .3s;}
.product-layer-two li li a{ padding:5px 10px;}
.product-layer-two li li:hover > a { background:#fff; color:#ad925e;}
.product-layer-two > li { width:100%; max-width:100%; padding:0; text-align:left; border-bottom:1px dotted #ccc; padding-bottom: 5px;}
.product-layer-two > li ul > li + li { margin-top:5px;}

.product_info_page .product-layer-two { display: none;}
.product_info_page .products-list,
.product-wrapper { width: 100%;}

.product-layer-two li li:hover{ margin-left: 15px;}
.product-layer-two li li > a:before { content: ""; position: absolute; width: 12px; height: 8px; background: transparent; left: 0; margin-left: -20px; top: 50%; margin-top: -4px; clip-path: polygon(0 0, 100% 50% , 0 100%);}
.product-layer-two li li:hover > a:before { background:#ad925e;}

.product_info_page .half_box { width: 100%; float: none; padding-right: 0;}
.product_info_page .half_box li.btn_blankTop { margin-top: 50px; justify-content: space-between; display: flex;}
.product_info_page .half_box li.btn_blankTop input { width: calc(50% - 10px); background-image: none; padding: 0; text-align: center;}
@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 980px) {
}
@media screen and (max-width: 768px) {
.product_menu_list,
.products-list,
.product-wrapper { width: 100%;}
.product-layer-two { margin-right: 0; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); grid-gap: 5px;}
.product_page .product-layer-two,
.product_page .products-list { width: 100%; border-right: none;}
.product_page .product_menu_list>h5{display: block;}

.product_page .show_content > a { order: 1;}
.product_page ul.products-list { order: 2;}
.product_page ul.page { order: 3;}
.product_page .product_menu_list {width: 100%; order: 0; min-height: unset;}
}
@media screen and (max-width: 600px) {
}


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


/*預設解除背景輪播*/
#content_main { margin:0;}
.bannerindex { position:relative; 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;}
}


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

/*內頁BANNER 設定*/
.banner { background: url(https://pic03.eapple.com.tw/jahyipco/banner.jpg); height: 450px;background-repeat: no-repeat; background-position: center;  background-size: cover;}
.banner h5 { color: #1d3c4a; background: #ffffffad; padding: 10px 50px; font-size: 25px; letter-spacing: 4px; border: 1px solid #fff;}
/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */
/*文章設定1*/
/*首頁*/
.module_i_news { padding: 90px 20px; background: url(https://pic03.eapple.com.tw/jahyipco/new_bg.jpg);  background-attachment: fixed; background-repeat: no-repeat; background-size: cover; background-position: center;}
.module_i_news section {  max-width: 1500px;}

.module_i_news ul { grid-template-columns: 1fr 1fr 1fr 1fr;}
.module_i_news li a { grid-template-columns: 1fr; grid-gap: 10px;}
.module_i_news_list, .module_i_news_list.swiper {  padding: 80px 0 30px;}
.module_i_news .title_i_box {position: relative; margin-bottom: 0px;}
.module_i_news .title_i_box h6 {  display: none;}
.module_i_news .title_i_box h4 { width: fit-content;  margin: 0 auto;font-size: 23px; color: #000; font-weight: 700; letter-spacing: 5px; position: relative;  text-indent: 5px;z-index: 9;}
.module_i_news .title_i_box:after { content: ""; background: url(https://pic03.eapple.com.tw/jahyipco/news_title02.svg); width: 120px;  height: 6px;  position: absolute;
    left: 50%;  transform: translateX(-50%);  top: 50px;  background-size: contain;}

.i_blog_ri { position: absolute; bottom: 0; background: linear-gradient(to top, #000000, #00000000); min-height: 120px;  padding: 30px 20px 5px;  transition: 0.5s;
    display: flex;  flex-direction: column;  justify-content: center;}
.i_blog_ri h5 { font-weight: 800;  letter-spacing: 2px;  filter: drop-shadow(2px 4px 6px black);  color: #ffffff;}
.i_blog_ri em { font-size: 14px;  color: #ffffff;}
.i_blog_ri p { display: none;  opacity: 0;  color: #c6c6c6;}
.module_i_news li a:before { left: 20px; right: 0; text-align: left; bottom: -20px;  opacity: 0; transition: 0.5s;}
.module_i_news .i_blog_b a { background: #0493d7;}

/*hover*/
.module_i_news li a:after { display: none;}
.module_i_news li a:hover .i_blog_ri { min-height: 100%; background: linear-gradient(to top, #000000, #00000087);}
.module_i_news li a:hover .i_blog_ri h5 { padding-bottom: 5px;}
.module_i_news li a:hover .i_blog_ri p { display: block; opacity: 1; padding-top: 15px;  margin-top: 15px;  border-top: 1px solid;}
.module_i_news li a:hover:before { bottom: 20px;}

/*列表*/
.blog_in_page .main_part { max-width: 1500px;}

/*側邊*/
.blog_search input[type=search] {  border-radius: 0px;}
.blog_le .accordion { border-radius: 0px;}
h5.blog_le_t {  font-size: 22px; letter-spacing: 3px;  margin-bottom: 15px; color: #0292D5;}
.blog_le .accordion > li:hover, .blog_le .accordion > li.on_this_category {  background: #0292D5 !important;}


/**/
.blog_subbox { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px;}
.subbox_item a { grid-template-columns: 1fr;}
.blog_list_ri { min-height: 160px;}
.blog_list_ri h5 { font-weight: 800;  letter-spacing: 1px;}
.blog_list_ri p { border-top: 1px solid #d2d2d2; padding-top: 15px;  margin-top: 15px;  font-size: 15px;  color: #666;}

/*hover*/
.subbox_item a:after{display: none;}
.subbox_item a:before { position: absolute; font-size: 30px; background: #0292D5; color: #ffffff; width: 60px;  height: 60px;  display: flex;
    border-radius: 99em;  transition: all .6s;  justify-content: center;  align-items: center;  content: "+";}
.blog_list_le { overflow: hidden;  }
.subbox_item:hover .blog_list_le img { transform:scale(1.1);  transition: 0.8s;}

/*內頁*/
.blog_in_page .main_part { max-width: 1500px; padding: 50px 20px 80px;}
.articel_mainPic img { max-width: 500px; width: 100%;}
.blog_shareData {justify-content: flex-end;}
h4.blog_category_title { margin-bottom: 5px;}
.blog_box_edit { border-top: 1px solid #c2c2c2;}

/*按鈕顏色*/
.blog_back a.article_btn_back { background: #0292D5;}
.blog_back a.article_btn_prev ,.blog_back a.article_btn_next { background: #b6b6b6;}

/*相關文章*/
.news_related_list { max-width: 1500px;}

.lastPage { background: #0292D5;}

/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */
@media screen and (max-width: 1180px) {
/*header*/
.stellarnav > ul > li > a {letter-spacing: 1px; padding: 0 10px;}

/*側邊選單*/
.stellarnav.mobile ul { background: #175d7f;}
.stellarnav.mobile > ul > li > a{color: #fff;}
.stellarnav > ul > li:hover > a { background: transparent; color: #fff;}
.stellarnav > ul > li a:before {display: none;}
.stellarnav.mobile.right .close-menu, .stellarnav.mobile.left .close-menu { background: #175d7f; color: #fff;}
.stellarnav .icon-close:before ,.stellarnav .icon-close:after {border-bottom: solid 3px #ffffff;}

/*文章*/    
.i_blog_ri h5 { font-size: 17px;letter-spacing: 0px;}
}
@media screen and (max-width: 1024px) {
.module_i_news ul { grid-template-columns: 1fr 1fr;}
}
@media screen and (max-width: 768px) {
/*header*/
.main_header_area .container { max-width: 100%;}
.header_area {background: rgb(255 255 255 / 100%); position: relative;}
.header_area.sticky { position: fixed;  background: rgba(255, 255, 255);}
.stellarnav.mobile { top: 15px;}

/*大圖*/
.bannerindex .swiper-slide img { display:none; }
.bannerindex .swiper-backface-hidden .swiper-wrapper { width: 100% !important; aspect-ratio: 7 / 10;}
.bannerindex .swiper-slide.swiper-slide-active { background-image: url(https://pic03.eapple.com.tw/jahyipco/banner01-ph.jpg); background-position: top; background-size:cover;}

/* 開啟手機板下方按鈕所需設定 */
#bottom_menu {display: none; }
.footer.with_shopping_mode { padding:30px 0 0px; }
#to_top { bottom:60px;}

/*文章*/
.module_i_news{background-size: cover;}
.module_i_news ul { grid-template-columns: 1fr;}
/*內頁*/
.blog_subbox {grid-template-columns: 1fr 1fr;}

/*footer*/
.footer_info { padding: 0 20px;padding-right: 20px;}
}

@media screen and (max-width: 600px) { 
.banner { height: 200px;}

/*文章內頁*/
.blog_subbox { grid-template-columns: 1fr;}
}