@charset "utf-8";

/*景好設計*/
body{ font-family: 'Roboto',  'Noto Sans TC', 'sans-serif','微軟正黑體';}


/*
關於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}
*/
li.tp_links {  display: none;}

/*電腦LOGO
.nav-brand {}
*/
.nav-brand { width: 100px;}
.nav-brand img {  max-width: 100px;}


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


/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */
/*反白顏色*/
::-moz-selection{
  background-color: #b5b5b4;
  color: #fff;
}
::selection{
  background-color: #b5b5b4;
  color: #fff;
}

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


/*預設解除背景輪播*/
#content_main { margin:0;}
.bannerindex { position:static; height:auto;}
.swiper-banner { position:static; margin:0; height:auto;} 
.swiper-slide img { height:auto;}

.swiper-slide:nth-child(1):after {
    content: "";
    position: absolute;
    top: 65%;
    right: 20%;
    width: 100%;
    height: 350px;
    background: url(https://pic03.eapple.com.tw/goodlife/cover_1-1a.png);
    background-repeat: no-repeat;
    background-position: center;
    transform: translate(50%,-50%);
    transition: all .3s;
    background-size: contain;
}
@media screen and (max-width: 1100px) {
.swiper-slide:nth-child(1):after { height: 250px;}
}

@media screen and (max-width: 900px) {
.swiper-slide:nth-child(1):after { height: 200px;  right: 15%; top: 70%;}
}

@media screen and (max-width: 768px) {
.bannerindex { padding:0; margin:0;}
.swiper-slide:nth-child(1):after {top: 65%;}
}

@media screen and (max-width: 500px) {
.swiper-slide:nth-child(1):after { height: 120px; right: 20%;  top: 52%;}
}

/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */
.path {display:none;}



/*首頁*/
.swiper-pagination { left: 50%; margin-left: 0; transform: translate(-50% , 0);}

.pageIndex .main_part { border-top: none;}
.pageIndex header.header_area { position:relative;  width: 100%;}
.pageIndex .header_area.sticky{position: fixed;}
.pageIndex .sticky .main_header_area.animated {  background: #fff;}


.header_area .main_header_area {  background: #FFFFFF;}

.nav-menu {  margin: 0;}
.nav-menu > li > a {  padding: 30px 15px;  font-family: 'Noto Sans TC';}
.nav-menu>li:hover>a, .nav-menu>li.active>a, .nav-menu>li.focus>a {  color: #b5b5b4;}

/*下拉選單*/
.nav-menu>li>.nav-dropdown {  border: none;}
.nav-dropdown > li > a { border-bottom: 1px solid #b5b5b445;}
.nav-dropdown > li > a:hover, .nav-dropdown > li > a:focus {
    color: #ffffff;
    background: #b5b5b4;
    transition: all .5s;
}



/*內頁BANNER 設定*/
.banner {
    padding: 140px 0 125px;
    background: #ffffff;
    background: url(https://pic03.eapple.com.tw/goodlife/ban.jpg) no-repeat fixed;
    background-size: cover;
    background-attachment: inherit;
}

.banner h5 {
    color: #111;
    font-weight: normal;
    letter-spacing: 2px;
    font-size: 40px;
    line-height: 107%;
}

.banner h5:before {
    display: block;
    font-size: 22px;
    color: #b5b5b4;
    font-weight: 400;
    font-family: 'Roboto', 'Noto Sans TC';
}
.blog_page .banner h5:before, .blog_in_page .banner h5:before { content: "LATEST NEWS";}
.product_page .banner h5:before, .product_info_page .banner h5:before { content: "PROJECT";}
.contact_page .banner h5:before { content: "CONTACT US";}

 /*footer*/
.footer {
    padding-top: 40px;
    border-top: 1px solid #b5b5b4;
    background: #ffffff;
}

.footer_info { padding: 0; text-align: center;}

.footer_logo {  display: none;}
.footer_info li:nth-child(1) {  width: 100%; padding-bottom: 17px;}
.footer_info li:nth-child(2) {  width: 100%;}
.footer_info li p {  display: inline-block;  margin-right: 20px;}

.footer_menu a { border: none;  background: transparent;  transition: all .5s;}

.footer .center { display: flex; flex-direction: column-reverse;}
.box_link {
    float: none;
    display: flex;
    justify-content: center;
    margin-top: 10px;
    padding-right: 0;
}
.box_link a { border: none;}
.box_link a.me_ft_fb:before {
    background-image: url(https://pic03.eapple.com.tw/goodlife/fb.png);
    background-size: contain;
    filter: invert(70%) sepia(46%) saturate(0%) hue-rotate(140deg) brightness(95%) contrast(93%);
}
.box_link a.me_ft_line:before{
    background-image: url(https://pic03.eapple.com.tw/goodlife/line.png);
    background-size: contain;
    filter: invert(70%) sepia(46%) saturate(0%) hue-rotate(140deg) brightness(95%) contrast(93%);
}

/*聯絡我們*/
.blank_letter { color: #111; font-weight: 600;}
.list_before.info li:last-child {  padding-left: 0;}
.list_before.info li:last-child iframe {  filter: grayscale(1);}
.TEL:before, .TEL2:before, .PHONE:before, .FAX:before, .TAXID:before, .MAIL:before, .ADD:before, .ADD2:before {
font-weight: 400;}

.contact_form li {  border-bottom: none;}
.noborder {border: 1px solid #ddd;}

/*聯絡按鈕*/
.animated-arrow {
    background: transparent;
    border: 1px solid #b5b5b4;
    position: relative;
}
.animated-arrow:hover:before {  transform: scaleX(1);}
.animated-arrow:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #b5b5b4;
    z-index: -1;
    transition: transform .8s;
    transform-origin: 0 0;
    -webkit-transition-timing-function: cubic-bezier(0.5,1.6,0.4,0.7);
    -moz-transition-timing-function: cubic-bezier(0.5,1.6,0.4,0.7);
    -ms-transition-timing-function: cubic-bezier(0.5,1.6,0.4,0.7);
    -o-transition-timing-function: cubic-bezier(0.5,1.6,0.4,0.7);
    transition-timing-function: cubic-bezier(0.5,1.6,0.4,0.7);
    transform: scaleX(0);
}
input.innersend {  color: #b5b5b4;}
.animated-arrow:hover  input.innersend:hover {  color: #fff;}
.animated-arrow:hover .arrow {  fill: #ffffff;}
.arrow {fill: #b5b5b4;}


/*購物車*/
/*選單按鈕*/
.product-layer-two { text-align: center;}
.product-layer-two li a { border: none; border-bottom: 1px solid #aaa;}
.products-list .more { display: none;}

.products-list .pic {  overflow: hidden;position: relative;}

.products-list .pic:after {
    position: absolute;
    content: 'View More';
    display: block;
    font-size: 18px;
    line-height: 180%;
    border-top: solid 1px #ffffff54;
    border-bottom: solid 1px #ffffff54;
    width: 30%;
    left: 50%;
    transform: translate(-50%,-50%);
    top: 50%;
    color: #fff;
    opacity: 0;
    transition: all .8s;
}
.products-list a:hover .pic:after {    opacity: 1;}

.products-list .pic img {
    max-width: 100%;
    min-width: 100%;
    height: 100%;
    object-fit: cover;
    -moz-object-fit: cover;
    -ms-object-fit: cover;
    -o-object-fit: cover;
    -webkit-object-fit: cover;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) scale(1.01);
    transition: all 5000ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
.products-list .pic img:hover {
    transform: translate(-50%,-50%) scale(1.2);
}

.products-list .item {  width: calc(calc(100% - 30px) / 3);}
.products-list .name {  text-align: center;}

/*購物車內文*/
.product-wrapper {
    display: flex;
    flex-wrap: wrap-reverse;
    justify-content: center;
}
.product_pic { display: none;}/*輪播*/

.product_main {  width: 100%;}
.sidebarBtn {
    width: 100%;
    border: none;
    text-align: center;
}
.toShare { display: none;}
.sidebarBtn h2 {  font-size: 32px;  font-weight: normal;}

/*商品資訊*/
.product_info li { display: none;}/*商品規格*/
h3.prod-thumb { display: none;}/*商品資訊*/
.product_info_page form.style1 { display: none;}/*qa*/
.prod-panel {
    text-align: center;
    font-size: 18px;
    line-height: 200%;
    letter-spacing: 1.5px;
}
.prod-panel u {  text-decoration: underline;}
.lastPage { background: #c6c7c6;}

.prod-panel img {
    width: 100% !important;
    height: 100% !important;
    max-width: 800px;
}

@media screen and (max-width: 800px){
.prod-panel img {  max-width: 100%;  height: auto !important;}
.mobile_product_name { display: none;}/*標題重覆*/
}

@media screen and (max-width: 768px) {
.products-list .item {  width: calc(calc(100% - 30px) / 2);}
.sidebarBtn {   padding: 0;}
.sidebarBtn h2 {  font-size: 20px;}
}

@media screen and (max-width: 600px) {
.products-list .item {  width: 49%;}
}



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

.blog_page .main_part {  padding: 80px 0;}
.blog_list_le , .blog_list_ri {    width: 100%;}
.blog_list_ri {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
	padding: 0px 0 13px;
}
@media screen and (max-width: 450px) {
.blog_list_ri {
    flex-direction: column;
}}

.blog_list_ri h5{padding: 0 16px;}

.blog_list_ri p{ padding: 10px 10px 0;   line-height: 100%;}

.blog_list_le img{display:none;}

.blog_list_ri em{margin: 7px 10px;}


.blog_subbox {       display: grid;   }
.subbox_item:hover {  border: 1px #ddd solid; box-shadow: 1px 1px 7px 0px #ddd;}
.subbox_item { width: 100%;    border-bottom: 1px solid #e5e5e5; padding: 10px; margin-bottom: 0px;}

/*文章設定*/
.blog_back a.article_btn_back { background: #b5b5b4; color: #151515;}
.blog_le .accordion > li:hover, .blog_le .accordion > li.on_this_category { background: #b5b5b4 !important;}
.share_page .edit {    text-align: justify;    line-height: 180%;}
.blog_le .accordion { background: #fff; border: none; border-radius: 0;}
.blog_le .accordion > li { transition: all 0.3s; border-bottom: 1px #ccc solid;}

.blog_box_edit img { width: 100% !important;    display: block;    margin: 10px 0;}
.blog_box_edit * { line-height: 200%;    text-align: justify;    letter-spacing: 0.5px;}

h4.blog_category_title { text-align: justify; font-size: 28px; font-weight: normal; letter-spacing: 1px;}
.blog_page h4.blog_category_title {  display: none;}

.link a {    width: 100%;    display: block;    padding: 15px 10px;}
.accordion li .link { padding: 0; font-weight: 400;}
.blog_back a.article_btn_prev , .blog_back a.article_btn_next{    background: #101010;}
h5.blog_le_t span {font-family: 'Roboto', 'Noto Sans TC';}
.blog_search input[type=search] { border-radius: 0;}

.subbox_item a:after{display:none;}
.subbox_item a:hover:before {
	right: 0;
    transform: none;
    transform: translate(-50%, -50%) scale(1);
    transition: all 500ms;
	transform: none;
    padding: 28px;
    height: 100%;
}
.subbox_item a:before {
	top: 0;
    left: 0;
    font-size: 15px;
    transition: all .5s;
    overflow: hidden;
    padding: 14px 5px;
    height: 45px;
    background: #8e7068d1;
    color: #fff;
	transition: 0.3s;
	width: auto;
}


/**/

@media screen and (max-width: 768px) {
h4.blog_category_title {    font-size: 24px;}
}
@media screen and (max-width: 600px) {
h4.blog_category_title {    font-size: 20px;}
}

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

/*相本分類全版面 ( 限制最寬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: 1024px) {
.banner { padding: 100px 0;}
}

@media screen and (max-width: 768px) {
/* 開啟手機板下方按鈕所需設定 */
#bottom_menu {display: block; }
.footer.with_shopping_mode { padding:30px 0 70px; }
#bottom_menu li:first-child:nth-last-child(1), #bottom_menu li:first-child:nth-last-child(1) ~ li{width: 50%;}
#to_top {width: 50%; right: 0; bottom: 10px; left: unset; box-shadow: unset; display: block !important; opacity: 1 !important;}

/* 符合行動裝置調整-大圖調整 */
.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%;}

.pageIndex header.header_area {  position: relative;}
.nav-header { padding-bottom: 0;}

.banner {
    background-attachment: inherit;
    background-position: 41% 62%;
}
.banner h5 {
    font-size: 36px;
    line-height: 99%;
}
}

@media screen and (max-width: 600px) { 
.banner { padding: 70px 0;}
.banner h5 {  font-size: 30px;}
.banner h5:before { font-size: 18px;}
}

@media screen and (max-width: 450px) { 
.footer_menu a {  width: 24%;}
}