@charset "utf-8";
body {font-family: 'Barlow', noto sans tc;}

#content_main { margin:0;}
#content{ margin-top: 10%;}

/*隱藏內容*/
.me_tp_features{display:none;}
.box_link{display:none;}
.path { display: none;}

/*================================================Logo*/
.header_area .nav-brand { transition: all 0.3s; max-width: 200px; margin: 10px auto 0;}
.header_area.sticky .nav-brand{}

/*.header_area .nav-brand {  animation: logo 1.5s infinite linear alternate; }
@keyframes logo{ 0% { transform: translateX(-20px);} 100% { transform: translateX(20px);}}*/

/*================================================header*/
.header_area { 
    padding: 0;
    position: fixed;
    width: 100%;
	background: transparent;
    background-image: url(https://pic03.eapple.com.tw/greengrassspa/header.png);
    height: 20%;background-size: cover;
}
.bannerindex{  margin: 3% 0 0;}
@media screen and (max-width: 1024px) {.header_area { height: 25%;} .bannerindex{  margin: 8% 0 0;}}
@media screen and (max-width: 768px) {.header_area { height: 15%;} }
@media screen and (max-width: 500px) {.header_area { height: 13%;}}
@media screen and (max-width: 425px) {.bannerindex{  margin: 15% 0 0;}}

.header_area.sticky {
	background: transparent;
    background-image: url(https://pic03.eapple.com.tw/greengrassspa/header.png);background-size: cover;
    opacity: 0.9;}
	
.navigation { max-width: 95%; margin: auto;}

/*第一層*/
.stellarnav { margin-top: 15px;}
.stellarnav li { }

.stellarnav > ul > li { letter-spacing: 0.5px;}
.stellarnav > ul > li > a { color: transparent;}
.stellarnav > ul > li > a b { color: #fdffae; letter-spacing: 2px;}
.stellarnav > ul > li:nth-child(even) > a b { color: #bbebb1; }

.stellarnav > ul > li > a:hover b {  color: #d7b771;}
.stellarnav li.has-sub > a:after { border-top: 6px solid #ffaf50; right: 5px;}

/*隱藏下拉*/
.stellarnav li:nth-of-type(7).has-sub > a:after, .stellarnav li:nth-of-type(5).has-sub > a:after{display:none;}
.stellarnav ul li:nth-of-type(7) ul, .stellarnav ul li:nth-of-type(5) ul{display:none !important;}
.stellarnav > ul > li:nth-of-type(7).has-sub > a, .stellarnav > ul > li:nth-of-type(5).has-sub > a{  padding-right: 0;}

/*第二層下拉*/
.stellarnav ul ul { background: transparent;    border: 1px #fff solid;}
.stellarnav li li { background: transparent;  border: none;}

.stellarnav li li a{ transition: all 0.6s; text-align: center; color: #fff; background: #427638de;}
.stellarnav li li:nth-child(even) a{ color: #fff; background: #7fa755;}
.stellarnav li li:hover a{ background: #c4a03f; color: white;}

/*================================================footer*/
.footer { background: #aba38d;border-top: 10px solid white;}
.footer_info { display: flex; padding: 0 80px;}
.footer_info ul{ max-width: 700px;}
.footer_logo img{/*display: none;*/}
.footer_info li{  padding: 0 0 10px;}
.footer_info li:nth-child(1){  display: flex; flex-wrap: wrap;}
.footer_info li p.add2:before {  content: '時間：';}
.footer_info li p:not(.line) { display: none;}

/*資訊*/
.footer_info li p {color: #ffe5b6; padding: 0 10px 5px 0;}
.footer_info li p a {color: #fff;}
/*按鈕*/
.footer_menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));}
.footer_menu a { margin: 0 5px 10px 0;  border: 1px #ffffff57 solid; background: white;color: #a19b8a;  transition: 1s;}
.footer_menu a:hover {color: #fff; background: #84aa7c; }


.copy { border-top: none;background: #504830; color:#a19b8a;}
.copy a{ color: #fff; }

#to_top{border: 1px solid #ffffff33;background:#00000059;box-shadow: none;border-radius: 0;color: #ffffff;}
#to_top i.top {height: 16px;}
#to_top i.top:before, #to_top i.top:after {background: white;}

/*================================================首頁外掛*/

/*英文*/
.i_prod_tit h2, .i_video_tit h2, .news_part .title_i_box h6
{font-size: 70px; font-weight: 600; color: #ffc762; letter-spacing: 5px;}
/*中文*/
.i_prod_tit span, .i_video_tit span, .news_part .title_i_box h4
{font-size: 20px; color: #d79529; letter-spacing: 3px; padding: 10px 0 0; font-weight: bold;}

/*================================================BANNER*/
/*大圖*/
/*預設解除背景輪播*/
.bannerindex { position:relative; height:auto;}
.swiper-banner { position:static; margin:0; height:auto;background: #acbca8;} 
.swiper-banner .swiper-slide img {  margin: auto;}
/* .swiper-slide img { height:auto;} */

/*內頁*/
.banner {  display:none; height: 450px; padding: 5% 0; background-size: cover; /*background-image: url(https://pic03.eapple.com.tw/penguin/ban.jpg);*/}
.banner h5 { display:none;/*display: flex; flex-direction: column;
    font-size: 25px; color: #d79529; letter-spacing: 3px; padding: 10px 0 0; font-weight: bold;*/}
.banner h5:before{
	/*content: 'PENGUIN'; font-size: 50px;font-weight: 600;color: #ffc762;letter-spacing: 5px;*/}
.main_part {  padding: 0px 20px;}


.banner.banC h5:before{}
.banner.banC {/*background-image: url(https://pic03.eapple.com.tw/penguin/banC.jpg) ;*/}
.banner.banblog h5:before{}
.banner.banblog {}

/*================================================按鈕*/
.animated-arrow {
	border: 1px #98c58d solid;
    color: #ffffff;
    background: #ffffff2e;
    border-radius: 30px;
	transition:.3s;
	position:relative;
	overflow:hidden;
}
.animated-arrow b, .animated-arrow i{position:relative; z-index:99;}
.animated-arrow b{font-weight: 400;}
.animated-arrow::after {
	content:"";
	position:absolute;
	width:0px;
	height:100%;
	top:0px;
	left:0px;
	background: #e3dda8;
	transition:.5s;
}
.animated-arrow:hover {	color:#538149;}
.animated-arrow:hover::after {	width:100%;}



/*================================================文章*/
.module_i_news li:nth-of-type(3), .module_i_news li:nth-of-type(4){display: none;}

.module_i_news, .blog_page .main_part{background: linear-gradient(90deg, #d8c89712 50%, white 50%);  background-size: 30px;}
.module_i_news{background: url(https://pic03.eapple.com.tw/greengrassspa/3p1_bg.jpg) 70% no-repeat;
    background-size: cover;}

.module_i_news .title_i_box h6{font-size: 45px; color: #facfa3; font-family: 'Barlow', noto sans tc; font-weight: 100;}
.module_i_news .title_i_box h4 { font-size: 20px; color: #fff; font-weight: 400;}
.module_i_news ul { grid-template-columns: 1fr 1fr;}
.module_i_news_list{max-width: 800px; margin: auto; padding: 0;}
.i_blog_le,.blog_list_le, .blog_list_le img { border-radius: 20px;aspect-ratio: 2 / 1;}
.i_blog_ri {  text-align: center;}
.i_blog_ri h5, .blog_list_ri h5 {  font-weight: 400;  font-size: 20px;}
.i_blog_ri h5{color: #fff;}
.i_blog_ri em{color: #ccf5a7;}
.module_i_news li a, .subbox_item a { grid-template-columns: auto;}
.module_i_news li a:after, .subbox_item a:after {  background: rgb(94 136 85 / 29%);    border-radius: 20px;}
.module_i_news li a:before, .subbox_item a:before { color: #ffffff;}
.blog_list_ri {  text-align: center;}
@media (max-width: 768px) {    .module_i_news li {  border-bottom: none; }}

.blog_page .main_part { padding: 45px 20px;}
.blog_box {  max-width: 900px;}
h4.blog_category_title {  border-bottom: 1px #ccc solid;}

.articel_mainPic{ display:none;}
.blog_subbox { grid-template-columns: 1fr 1fr;}
@media screen and (max-width: 640px) { .blog_subbox {   grid-template-columns: 1fr; }}

/*回列表按鈕*/
.blog_back a.article_btn_back{background: #dba950;}
/*上一頁按鈕*/
.lastPage{background: #bebebe;}

h5.blog_le_t span {  display: none;}
h5.blog_le_t em:before { font-family: 'Barlow', noto sans tc; content: "NEWS"; width: 100px;  font-size: 40px; color: #7eaf71;}
h5.blog_le_t em {  display: flex; flex-direction: column; color: #353535; padding: 10px; font-size: 20px;}
/*================================================相簿*/
.show-list .show_pic img { border-radius: 20px;}
.other_subalbum li a p { text-align: center;}

/*相簿內頁瀑布排版*/
.pic-list {
  display: block;
  -moz-column-count: 3;
  -moz-column-gap: 10px;
  -webkit-column-count: 3;
  -webkit-column-gap: 10px;
  column-count: 3;
  column-gap: 10px;
  width: 100%;
  margin: 0 auto;
}
.pic-list .item {
 /* -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;*/
}
.pic-list .show_pic {
  aspect-ratio: auto;
}
@media screen and (max-width: 768px) {
.pic-list {-moz-column-count: 2;-webkit-column-count: 2;column-count: 2;}
}
@media screen and (max-width: 425px) {
.pic-list {-moz-column-count: 1;-webkit-column-count:1;column-count: 1;}
}
/*================================================表單*/
/*標題*/
.list_before.info li {  padding: 10px 0 15px 60px; border-bottom: 1px #f5f5f5 solid;}
.blank_letter { padding-top: 4px; padding-left: 3px; font-size: 20px;}

.information_left:before {
    content: "CONTACT"; border-top: 1px solid black; 
	font-size: 30px; font-weight: 600;
}
.information_right:before { content: "FORM";border-top: 1px solid black; 
	font-size: 30px; font-weight: 600;}

/*左邊資料*/
.info_TEL:before, .info_TEL2:before, .info_PHONE:before, .info_LINE:before, .info_FAX:before, .info_TAXID:before, .info_MAIL:before, .info_ADD:before, .info_ADD2:before{
	width: 44px;
    margin-left: 15px;
    font-size: 15px;
    height: 25px;
    /*border-right: 1px solid #ededed;*/
    letter-spacing: 0.05em;
    color: #545454;
    font-weight: bold;
}
.info_TEL:after, .info_TEL2:after, .info_PHONE:after, .info_LINE:after, .info_FAX:after, .info_TAXID:after, .info_MAIL:after, .info_ADD:after, .info_ADD2:after{
	position: absolute;
    content: "●";
    color: #135f9f;
    font-size: 5px;
    width: 30px;
    height: 17px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

/*右邊表單*/
.contact_form li{padding: 7px 0;  border-bottom: 1px #f5f5f5 solid;}
.contact_form li .form__label{letter-spacing: 0.05em; color: #545454; font-weight: bold;}
.contact_form li input.noborder, 
.contact_form li textarea.noborder { border: none; background: #f3f3f3; border-radius: 5px;}


/*================================================RWD1024*/
@media screen and (max-width: 1024px) { 
/*Logo*/
.header_area .nav-brand{max-width: 150px;}
.header_area.sticky .nav-brand{/*max-width: 110px;*/}

/*header*/
.stellarnav {    margin-top: 5px;}
.navigation { max-width: 100%;}
}

/*================================================RWD768*/
@media screen and (max-width: 768px) {
	
	
/*********************側邊選單*/
/*menu*/
.stellarnav { margin: 10px;}
.stellarnav .menu-toggle:after { color: #ffffff;}
.stellarnav .menu-toggle span.bars span { background: #e3b073;}
.stellarnav .menu-toggle, .stellarnav .call-btn-mobile, .stellarnav .location-btn-mobile, .stellarnav .close-menu {  padding: 0;}

/*close*/
.stellarnav.mobile.right .close-menu, .stellarnav.mobile.left .close-menu { background: transparent;}
.stellarnav .icon-close:before, .stellarnav .icon-close:after { border-bottom: solid 3px #90b788;}
.stellarnav.mobile.right .close-menu, .stellarnav.mobile.left .close-menu {  color: #949494;}

/*底色*/
.stellarnav.mobile li a { border-bottom: none;}
.stellarnav.mobile.right > ul, .stellarnav.mobile.left > ul{background: #fffffff2; max-width: 300px;padding: 15px;backdrop-filter: saturate(93%) blur(3px);}
.stellarnav.mobile > ul > li { border-bottom: 1px #0000000f solid;}
.stellarnav.mobile > ul > li > a{ padding: 15px 43px 15px 10px;}

/*第二層*/
.stellarnav.mobile li.open{ background: transparent;}
.stellarnav.mobile ul ul {margin: 0 15px 15px;}
.stellarnav li li a {}
.stellarnav li li:hover a {}

/*文字*/
.stellarnav a.dd-toggle .icon-plus:before, .stellarnav a.dd-toggle .icon-plus:after {  border-bottom: solid 3px #767676;}

.stellarnav > ul > li > a b, .stellarnav > ul > li:nth-child(even) > a b { color: #757575;}
.stellarnav > ul > li > a b:nth-child(2){color: #b5c6b1; }
	
/*********************footer*/
#bottom_menu {display: flex; }
#bottom_menu li { background: #c4a03f;}
#bottom_menu li a { color: #fff;}
#bottom_menu li a i { color: #fff;}

.footer.with_shopping_mode { padding:30px 0 55px; }
#to_top { bottom:60px;}
.copy { padding-top: 8px;}
.footer_info { padding:0 10px; flex-direction: column;}

h5.blog_le_t, .blog_le .accordion {display: block; text-align: center;}
h5.blog_le_t em:before {  margin: auto;}

.contact_content .information_right {  padding: 50px 10px 10px; }

/*大圖*/
.bannerindex { padding:0; /*margin:0;*/}


}
@media screen and (max-width: 600px) { 
.banner h5:before {font-size: 40px;}
.banner h5 { font-size: 20px;}

.news_list ul li p:after { margin-right: 0;}
.news_list ul li { margin: 10px; background: #ffffff;}

.contact_form li .form__label { background: transparent;}

}

@media screen and (max-width: 570px) { 
.stellarnav .menu-toggle, .stellarnav .call-btn-mobile, .stellarnav .location-btn-mobile, .stellarnav .close-menu {  padding: 0;}

}

@media screen and (max-width: 425px) { 
.banner h5:before {font-size: 30px;}
.banner h5 { font-size: 17px;}
.module_i_news ul { grid-template-columns: 1fr;}

.footer { }
}