body {
  background-position: left top;
  background-attachment: scroll;
}
body .block-item {
  background-position: left top;
  background-attachment: scroll;
  border-style: none;
}
body .widget-item {
  background-position: left top;
  background-attachment: scroll;
  border-style: none;
}
body .header {
  background-position: left top;
  background-attachment: scroll;
  border-style: none;
}
body .left {
  background-position: left top;
  background-attachment: scroll;
  border-style: none;
}
body .right {
  background-position: left top;
  background-attachment: scroll;
  border-style: none;
}
body .footer {
  background-position: left top;
  background-attachment: scroll;
  border-style: none;
}
/****共用 start****/
* {font-family: 'PT Sans', '微軟正黑體', sans-serif;}
.top-mt{ margin-top: 0px;}
.m002-title .header-title{ position: relative;  display: table;  width: auto; margin:40px auto 30px; font-size: 2.2rem; }
.m002-title .header-title::before{  content: "";  position: absolute; width: 60px; height: 6px;  left: 50%; bottom: -13px; background: #cfa972; z-index: -1; transform: translate(-50%, -50%) skewX(-30deg);}
.web-page-frame .M-002-tab ul { padding: 8px 0 0; }
.M-002-tab li.nav-item { margin-bottom: 8px;}
.M-002-tab li.nav-item +li{ padding-left: 15px; }
.M-002-tab .nav-pills .nav-link { padding: 3px 14px; background: #ffffff; border: 1px solid #00bae2; border-radius: 0;  color: #00bae2;  font-size: 1.2rem; font-weight: 600;  -webkit-transition: all 0.3s ease-in-out;  -moz-transition: all 0.3s ease-in-out;  -ms-transition: all 0.3s ease-in-out;  -o-transition: all 0.3s ease-in-out;  transition: all 0.3s ease-in-out; }
.M-002-tab .nav-pills .nav-link.active,.M-002-tab .nav-pills .show>.nav-link{ background-color:#00bae2; border: 1px solid #00bae2; color: #ffffff;}

/****共用 end****/
/****主題頁theme1 start****/
/*大圖輪播*/
.theme1-banner .carousel-fade .carousel-item > picture{height: 500px; display: block; overflow: hidden;}
.theme1-banner .carousel-fade .carousel-item > picture > img{object-fit: cover; object-position: center center; height: 100%; width: 100%;}
@media (max-width:767px){
  .theme1-banner .carousel-fade .carousel-item > picture{height:300px;}
}
.M-002.theme1-banner .carousel-caption {top: 50%; right: inherit;  bottom: inherit; left: 50%; transform: translate(-50%, -50%);}
.M-002.theme1-banner .bs-carousel .carousel-item h5,.M-002.theme1-banner .bs-carousel .carousel-item p {  text-shadow: 0px 0px 4px #000;font-weight: 400; letter-spacing: 0.05rem; }
.M-002.theme1-banner .bs-carousel .carousel-item h5{  font-size: 2.2rem;   line-height: 3.2rem; }
.M-002.theme1-banner .bs-carousel .carousel-item .slider-btn {  display: table; margin: 0 auto;  padding: 5px 15px; border: 1px solid rgb(255 255 255 / 0.5); -webkit-transition: all 0.3s ease; 	-moz-transition: all 0.3s ease; 	transition: all 0.3s ease; }
.M-002.theme1-banner .bs-carousel .carousel-item .slider-btn:hover {  background: #fff; color: #545454;}
.M-002.theme1-banner .carousel-control-next,.M-002.theme1-banner .carousel-control-prev{  opacity: 0.5;  width: 10%; top: 40%; bottom: 40%; }
.M-002.theme1-banner .carousel-control-next:hover,.M-002.theme1-banner .carousel-control-prev:hover{  opacity: 0.8;  }
.M-002.theme1-banner .carousel-control-next-icon,.M-002.theme1-banner .carousel-control-prev-icon {  width: 68px;  height: 120px;  background: no-repeat 50%/100% 100%;}
.M-002.theme1-banner .carousel-control-prev-icon,.M-002.theme1-banner .carousel-control-next-icon{ background-image: url('https://materials.fillo.com.tw/materials/design/images/31232e89-ea8a-442e-ba0b-e2f0bc891af9.svg'); }
.M-002.theme1-banner .carousel-control-next-icon{ transform: rotate(180deg); }
/*style1*/
.web-page-frame .M-002.theme1-style1 .widget-item.lg-img >.module-container { background: #4E9466;  border-radius:0;height: 100%;}
.M-002.theme1-style1 .lg-img .hover-wall .htpro_tit{  display: none;}
.M-002.theme1-style1 .lg-img .hover-wall .mb-4{ margin-bottom: 0rem!important;}
.M-002.theme1-style1 .lg-img .hover-wall .icon_info{  background: #4E9466;  border-radius: 0;  box-shadow: none;}
.M-002.theme1-style1 .lg-img .hover-wall .icon_info:hover{ box-shadow: none;}
.M-002.theme1-style1 .lg-img .hover-wall .icon_info h4{ display: table;  margin: 0 auto; padding: 0 10px;   margin-bottom: 0.6rem;  color: #e6d33c;  font-style: initial; text-overflow: ellipsis; display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;  overflow: hidden; }
.M-002.theme1-style1 .lg-img .hover-wall .icon_info h3{color:#ffffff !important;   font-size: 1.6em; margin-bottom: 0.8rem;  padding-top: 1rem;   text-overflow: ellipsis; display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;  overflow: hidden;}
.M-002.theme1-style1 .lg-img .hover-wall .icon_info:hover h3{color:#e4da88 !important}
.M-002.theme1-style1 .lg-img .hover-wall .icon_info p.animate-text {  max-width: 600px;  margin: 0 auto 30px; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;  -webkit-box-orient: vertical; overflow: hidden;   font-size: 0.95rem;  letter-spacing: 0.03rem;}
.M-002.theme1-style1 .lg-img .hover-wall .icon_info:hover figure .overlay i{ display:none; }
.M-002.theme1-style1 .md-img .row.wall-row>div+div{  margin-top: 30px;}
.M-002.theme1-style1 .md-img .thicon_info figure{ max-height:300px}
.M-002.theme1-style1 .md-img .wall-wrapper .theme_info { width: 40%; right: 0; top:0;    background: rgba(255, 255, 255, 0.88) !important;}
.M-002.theme1-style1 .md-img .wall-wrapper .wall-row>div:last-child .theme_info { left: 0;}
.M-002.theme1-style1 .md-img .wall-wrapper .wall-row>div:last-child .thicon_info span{ left:5px}
.M-002.theme1-style1 .md-img .wall-wrapper .thicon_info h3{ top: 50px;  right: 18px; text-shadow: none; bottom: initial; background: rgb(255 255 255 / 0.8);  padding: 5px;  font-size: 1.5em; text-overflow: ellipsis; display: -webkit-box;  -webkit-line-clamp: 1; -webkit-box-orient: vertical;  overflow: hidden;}
.M-002.theme1-style1 .md-img .wall-wrapper .wall-row>div:last-child .thicon_info h3{  left:15px; right: inherit;}
.M-002.theme1-style1 .md-img .wall-wrapper .theme_info p.theme-text{ opacity: 1; color: #545454 !important; font-size: 0.95rem;  letter-spacing: 0.05px; padding-top: 6em; line-height: 26px;  text-overflow: ellipsis;   display: -webkit-box; -webkit-line-clamp: 4;  -webkit-box-orient: vertical; overflow: hidden;}
.M-002.theme1-style1 .md-img .wall-wrapper .thicon_info span{  right: 5px;  top: 20px; font-size: 1.1rem; text-shadow: none;}
/*style2*/
.theme1-style2-block .widget-item .header-title { margin: 10px 10px 20px; padding: 8px 10px; background: #eee; color: #cfa972; font-size: 1.2rem; font-weight: 600; text-align: center; letter-spacing: 0.5rem;}
.theme1-style2-block .widget-item .expand-graphics .item_box figure { border-radius: 0;aspect-ratio: 3/2;}
.theme1-style2-block .widget-item .expand-graphics .item_box figure img{object-fit: cover; object-position: center center; height: 100%; width: 100%;}
.theme1-style2-block .widget-item .expand-graphics .item_box { height: 100%;}
.theme1-style2-block .widget-item .expand-graphics .item_box:hover figure img { opacity: 1;}
.theme1-style2-block .expand-graphics .item_box a { position: relative; padding-bottom: 50px; height: 100%; background: #f1fbfc; border: 2px solid #ffffff; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.theme1-style2-block .expand-graphics .item_box:hover a { background: #ffffff; border: 2px solid #00bae2;}
.theme1-style2-block .expand-graphics .item_box .item_more_txt h3 { font-size: 1.2rem; line-height: 1.8rem; margin-bottom: 0.5em; text-align: justify;}
.theme1-style2-block .expand-graphics .item_box .item_more_txt,.theme1-style2-block .expand-graphics .item_box h4 { padding: 0 20px;}
.theme1-style2-block .expand-graphics .item_box span.item_btn,.theme1-style2-block .expand-graphics .item_box span.item_btn_hover,.theme1-style2-block .expand-graphics .item_box:hover span.item_btn_hover { display: none;}
.theme1-style2-block .expand-graphics .item_box h4 { position: absolute; bottom: 10px; right: 5px; padding-right: 33px;}
.theme1-style2-block .widget-item .expand-graphics .item_box h4::before { content: "起";  position: absolute;  right: 15px; bottom: 2px; font-size: 0.9rem;}
.theme1-style2-block .expand-graphics .item_box .item_more_txt span.item_tag { padding: 2px 5px;}
.theme1-style2-block .expand-graphics .item_morebox a { padding: 6px 35px; font-size: 1.3rem; border-radius: 0; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.theme1-style2-block .expand-graphics .item_morebox a:hover { background: #e57700 !important;}
.theme1-style2-block .expand-graphics .item_morebox a i { margin-right: 5px; font-size: 1em; opacity: 0.8;}
/****主題頁theme1 end****/
/****主題頁theme2 start****/
/*主圖*/
.M-002.theme2-banner .carousel-caption {top: 50%; right: inherit;  bottom: inherit; left: 50%; transform: translate(-50%, -50%);}
.M-002.theme2-banner .bs-carousel .carousel-item h5,.M-002.theme2-banner .bs-carousel .carousel-item p {  text-shadow: 0px 0px 4px #000;font-weight: 400; letter-spacing: 0.05rem; }
.M-002.theme2-banner .bs-carousel .carousel-item h5{  font-size: 2.2rem;   line-height: 3.2rem; }
.M-002.theme2-banner .carousel-control-next,.M-002.theme2-banner .carousel-control-prev,.M-002.theme2-banner .carousel-indicators{ display:none;}
/*style1*/
.theme2-style1{ margin-top:80px; }
.theme2-style1 .wall-wrapper .thicon_info{ padding:5px; }
.theme2-style1 .wall-wrapper .thicon_info h3 { bottom: 0;  margin: 0;  padding: 5px 10px;  width: auto;  height: 42px;   background: rgb(78 148 102/1);  font-size: 1.3em;  letter-spacing: 0.08rem; line-height: 2rem; text-align: center;  text-shadow: 0 0 black;   overflow: hidden;  text-overflow: ellipsis;  display: -webkit-box; -webkit-line-clamp: 2;  -webkit-box-orient: vertical;   white-space: normal; }
.theme2-style1 .wall-wrapper .thicon_info:hover h3 { background: rgb(78 148 102/1);}
.theme2-style1 .thicon_info .theme_info{ background: transparent !important;}
.theme2-style1 .thicon_info .theme_info p.theme-text{ top: 50%;  left: 50%;  background: rgb(255 255 255 / 0.7); color:#4e9466 !important; width: 70px;  height: 70px;  border-radius: 40px;  font-size:1.3rem; text-align:center;  transform: translate(-50%, -50%); display: block;  position: absolute;  padding: 22px 0 0;  overflow: hidden; text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 1; -webkit-box-orient: vertical;  white-space: normal; }
/*style2*/
.M-002.theme2-style2 .widget-item .hover-wall .mb-4{ margin-bottom: 1rem!important;}
.M-002.theme2-style2 .widget-item .hover-wall .icon_info{ padding-bottom: 45px; background:#e9f2ec;  border-radius: 0;  box-shadow: none; height: 100%; }
.M-002.theme2-style2 .widget-item .hover-wall .icon_info:hover{ box-shadow: none;}
.M-002.theme2-style2 .hover-wall .htpro_tit h1{ border-bottom: 1px solid #b6d2bf; margin: 0 auto; width: 100%;}
.M-002.theme2-style2 .widget-item .hover-wall .icon_info h4{ position: absolute; display: table; top: 0;  left: 0; padding: 10px 15px; font-weight: 600;  font-size: 1.6rem;  color: #ffffff;  z-index: 11; }
.M-002.theme2-style2 .widget-item .hover-wall .icon_info h4::before {  content: ""; position: absolute; top: 0; left: 0;  border-style: solid;  width: 0; height: 0;  border-width: 40px; border-color: #e2857e transparent transparent #e2857e;  -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out;  -o-transition: all 0.3s ease-in-out;  transition: all 0.3s ease-in-out;     z-index: -1; }
.M-002.theme2-style2 .widget-item .hover-wall .icon_info h3{ margin-top: 1.2rem; margin-bottom: 0.7rem;  font-size: 1.2em; line-height: 1.6rem; letter-spacing: 0.02rem; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;  -webkit-box-orient: vertical; overflow: hidden; }
.M-002.theme2-style2 .widget-item .hover-wall .icon_info p.animate-text { position: absolute; width: 100%;  text-align: right; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1;  -webkit-box-orient: vertical; overflow: hidden; font-size: 1.2rem;  letter-spacing: 0rem; font-weight: 600; right: 0; bottom: 0;}
.M-002.theme2-style2 .widget-item .hover-wall .icon_info p.animate-text::after { content: "起";font-size: 0.9rem; padding-left: 3px;}
.M-002.theme2-style2 .widget-item .hover-wall .icon_info figure .overlay i,.M-002.theme2-style2 .widget-item .hover-wall .icon_info:hover figure .overlay i{ display:none; }
.M-002.theme2-style2 .btn-green div.link-list ul li {  background: #4E9466;  display: table !important; margin: 0 auto; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out;  -o-transition: all 0.3s ease-in-out;  transition: all 0.3s ease-in-out;  }
.M-002.theme2-style2 .btn-green div.link-list ul li:hover{ background:#36734b;}
.M-002.theme2-style2 .btn-green div.link-list ul li a,.M-002.theme2-style2 .btn-green div.link-list ul li span{ padding: 6px 35px;}
/****主題頁theme2 end****/
/****主題頁theme3 start****/
/*主圖*/
.M-002.theme3-banner .carousel-caption {  width: 100%;  height: 100%;  top: 50%;  right: inherit;  bottom: inherit; left: 0;  background: rgb(0 0 0 / 0.3); transform: translate(0%, -50%); }
.M-002.theme3-banner .bs-carousel .carousel-item h5,.M-002.theme3-banner .bs-carousel .carousel-item p{ text-shadow: 0 0 black; font-weight: 400; letter-spacing: 0.05rem; }
.M-002.theme3-banner .bs-carousel .carousel-item h5 {  position: absolute;   font-size: 2.4rem;  line-height: 3.2rem;  top: 50%;  letter-spacing: 0.4rem; right: inherit;  bottom: inherit; left: 50%;  color: #ffffff;     transform: translate(-50%, -50%);  text-shadow: 2px 2px 4px rgb(0 0 0 / 0.5); }
.M-002.theme3-banner .carousel-control-next,.M-002.theme3-banner .carousel-control-prev,.M-002.theme3-banner .carousel-indicators{ display:none;}
.M-002.theme3-banner .carousel-inner a.carousel-item{ cursor:default;}
/*style1*/
.M-002 .theme3-style1 .side-menu ul{ box-shadow: 0 0 black; background: transparent;}
.M-002 .theme3-style1 .side-menu>ul>li{border-bottom: 1px dotted #4e9466;}
.M-002 .theme3-style1 .side-menu ul li label{ position:relative;  background: #ffffff;  color: #545454; font-size: 1.1rem; text-shadow: 0 0 black; border-top: 0; border-bottom: 0;  cursor: pointer; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out;  -o-transition: all 0.3s ease-in-out;  transition: all 0.3s ease-in-out; }
.M-002 .theme3-style1 .side-menu ul li label:hover { background: #edf7f1;}
.M-002 .theme3-style1 .side-menu ul li label::after { content: "+";  position: absolute;   right: 13px; font-size: 1.58rem; top: 2px;  color: #ccc;}
.M-002 .theme3-style1 .side-menu ul li input[type='checkbox']:checked ~ label{ position: relative; border-top: 0; border-bottom:0; background: #edf7f1; color: #4e9466;}
.M-002 .theme3-style1 .side-menu ul li input[type='checkbox']:checked ~ label::after{ content: "-";  position: absolute; top: 0;  right: 15px; font-size: 2rem; color: #f0c100;}
.M-002 .theme3-style1 .side-menu ul li i{  display: inline-block; margin-right: 5px;  font-size: 19px;  vertical-align: baseline; color: #4e9466; }
.M-002 .theme3-style1 .side-menu ul ul li a{ padding-left: 60px; color:#333333; font-size: 1.1rem; }
.M-002 .theme3-style1 .side-menu ul ul li:hover a{ color:#333333; }
.M-002 .theme3-style1 .side-menu ul ul.options li i{ color: #f0c100; text-indent: -25px; margin: 0;}
/*style2*/
.theme3-style2{ padding: 25px;}
.theme3-style2 div.link-list ul {  display: flex !important;}
.theme3-style2 div.link-list { background: transparent;}
.theme3-style2 div.link-list ul li{  flex: 1;   text-align: center; margin: 10px;} 
.theme3-style2 div.link-list ul li a,.theme3-style2 div.link-list ul li span{ padding:30px; width:100%; height:100%; background: #e9f2ec; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out;  -o-transition: all 0.3s ease-in-out;  transition: all 0.3s ease-in-out; }
.theme3-style2 div.link-list ul li:hover a,.theme3-style2 div.link-list ul li:hover span{ background: #4E9466; color:#ffffff; }
.theme3-style2 section.text-link h2 { padding-left: 28px;}
.theme3-style2  section.text-link h2.text-left::before{ position: absolute; content: "";  border: 0;  top: 21px; left: 18px;  background-image: url(https://materials.fillo.com.tw/materials/design/images/746e8d07-f6d8-460b-8b38-11c47e35c13a.svg);  width: 20px; height: 20px; background-position: center; background-repeat: no-repeat;     background-size: 18px; transform: rotate(270deg);  opacity: 0.8;}
/*style3*/
.theme3-style3 { margin-bottom: 1rem; color: #545454; line-height: 1.8rem; }
.theme3-style3 .header-title{ margin-top: 10px;  margin-bottom: 10px; color: #4e9466;  font-size: 1.2rem; font-weight: 600;  }
/****主題頁theme3 end****/

@media screen and (max-width:1600px){
	/*首頁style1*/
	.M-002.main-style1 .swiper-slide-style { height: 480px;}
}
@media screen and (max-width:1499px){
	/*主題頁1-style1*/
	.M-002.theme1-style1 .md-img .wall-wrapper .thicon_info h3{ top:20px;}
	.M-002.theme1-style1 .md-img .wall-wrapper .theme_info p.theme-text{ padding-top: 65px; line-height: 24px; letter-spacing: 0; }
}
@media screen and (max-width:1199px) {
	/*主題頁1-style1*/	
	.M-002.theme1-style1{ -ms-flex: 0 0 91.666667%;  flex: 0 0 91.666667%;  max-width: 91.666667%;}
}
@media screen and  (max-width:1199px) and (min-width:992px) {
	.M-002.theme2-style1 .widget-item,.M-002.theme2-style2 .widget-item{ -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; }
} 
@media screen and (max-width:1023px) {
}
@media (max-width: 991px){
  .top-mt{margin-top:60px}
	/*主題頁1-style1*/	
	.M-002.theme1-style1 .lg-img .hover-wall .icon_info h3{font-size: 1.3rem; padding: 0 20px;}
	.M-002.theme1-style1 .md-img .offer-guide-mdimg {padding-top: 30px;}
	.M-002.theme1-style1 .md-img .wall-wrapper .thicon_info{   height: 100%; background: #e9f2ec;}
	.M-002.theme1-style1 .md-img .wall-wrapper .thicon_info span {display:none;}
	.M-002.theme1-style1 .md-img .wall-wrapper .thicon_info h3 {  position: relative;  top: initial;  right: initial;  bottom: inherit;  padding: 15px 15px 0;  letter-spacing: 0; background: transparent;  font-size: 1.3rem;  }
	.M-002.theme1-style1 .md-img .wall-wrapper .wall-row>div:last-child .thicon_info h3{ left: inherit;}
	.M-002.theme1-style1 .md-img .px-0{ padding-left: 15px !important;   padding-right: 15px !important;}
	.M-002.theme1-style1 .md-img .wall-wrapper .theme_info{position: relative;right: 0;  top: 0; width: 100%; overflow: hidden; background: transparent !important;}
	.M-002.theme1-style1 .md-img .wall-wrapper .theme_info p.theme-text{padding-top: 0;}
}
@media (min-width: 768px) and (max-width: 991px){
	/*主題頁1-style1*/
	.M-002.theme1-style1 .lg-img  .hover-wall .icon_info:hover{bottom:0}
	.M-002.theme1-style1 .lg-img .hover-wall .col-md-6{ -ms-flex: 0 0 100%;   flex: 0 0 100%;     max-width: 100%; }
	.M-002.theme1-style1 .lg-img .hover-wall .icon_info figure{  width: 50%;  margin: 0;}
	.M-002.theme1-style1 .lg-img .hover-wall .icon_info h3{  position: absolute;  width: 50%; font-size: 1.3rem;  right: 0; top: 15px; }
	.M-002.theme1-style1 .lg-img .hover-wall .icon_info h4 {   position: absolute; font-size: 0.95rem;  top: 70px;   right: 0;   width: 50%; }
	.M-002.theme1-style1 .lg-img .hover-wall .icon_info p.animate-text{ position: absolute;  width: 50%;  top: 110px;  right: 0;   -webkit-line-clamp: inherit;}
	.M-002.theme1-style1 .md-img .row.wall-row>div+div { margin-top: 0px;}	
}
@media screen and (max-width:768px) {}
@media screen and (max-width:767px) {
	.top-mt { margin-top: 50px;}
	/* 共用*/	
	.m002-title .header-title { font-size: 1.8rem;}
	/*主題頁1-輪播圖*/
	.M-002.theme1-banner .carousel-caption { display: block !important;  right: 10%; left: 10%; transform: translate(0%, -50%);}
	.M-002.theme1-banner .carousel-control-next,.M-002.theme1-banner .carousel-control-prev{ display:none;}
	.M-002.theme1-banner .bs-carousel .carousel-item h5{ font-size: 1.8rem; line-height: 2.6rem;}
	.M-002.theme1-banner .bs-carousel .carousel-item p{font-size: 1rem;}
}
@media screen and (max-width:600px) {}
@media (max-width:575px){}