/*
 * w257 - swan-11 iweb22-style09
 * http://swan-11.com.tw
 *
 * Copyright 2013, Evelyn Wang
 * 
 * 
 * December 2013
 */
 

/* +work-list
*----------------------------------------------------------------------------*/
.wrapper .content #work-list {
	width: 958px;
	background: #fff;
	border: 1px #d9d9d9 solid;
}

.wrapper .content #work-list h3 {
	display: none;
}

.wrapper .content #work-list ul {
	width: 958px;
	height: 300px;
	overflow: hidden;
	position: relative;
}

.wrapper .content #work-list ul li {
	width: 958px;
	height: 300px;
	float: left;
	overflow: hidden;
}

.wrapper .content #work-list ul li .work {
	width: 958px;
	height: 300px;
	overflow: hidden;
	position: relative;
}

.wrapper .content #work-list ul li .work h3 {
	padding: 5px;
	width: 948px;
	height: 50px;
	background: url(/images/12/index/bg-bestcase.png) repeat 0 0;
	display: block;
	overflow: hidden;
	position: absolute;
	bottom: 0;
	color:#fff;
}

.wrapper .content #work-list ul li .work h3 a {
	width: 400px;
	display: inline-block;
	line-height: 160%;
	color: #fff;
}

.wrapper .content #work-list ul li .work .photo {
	position: relative;
}

.wrapper .content #work-list ul li .work .photo img {
	width: 958px;
	height: 300px;
}

.wrapper .content #work-list .pageNav {
	width: 958px;
	height: 30px;
	background: #e9e9e9;
	text-align: right;
}

.wrapper .content #work-list .pageNav span {
	margin: 0 10px 0 0;
	height: 30px;
	display: inline-block;
	line-height: 34px;
	font-size: 16px;
	color: #000;
	font-weight: 900;
}

.wrapper .content #work-list .pageNav p.pager {
	margin: 4px 5px 4px 0;
	height: 30px;
	float: right;
	line-height: 30px;
}

.wrapper .content #work-list .pageNav p.pager a ,
.wrapper .content #work-list .pageNav p.pager a.active {
	margin-right: 5px;
	width: 22px;
	height: 22px;
	background: #000;
	display: inline-block;
	text-align: center;
	line-height: 25px;
	color: #fff;
}

.wrapper .content #work-list .pageNav p.pager a:hover ,
.wrapper .content #work-list .pageNav p.pager a.active {
	background: #fe4e12;
}


/* +service
*----------------------------------------------------------------------------*/
.wrapper .content .wrap {
	margin: 25px 0;
	overflow: hidden;
}

.wrapper .content .wrap #serviceCall {
	width: 365px;
	float: left;
}

.wrapper .content .wrap #serviceCall h3 {
	margin: 0 0 5px;
	padding: 0 0 5px;
	border-bottom: 1px #bbb solid;
	font-size: 24px;
	color: #3d3d3d;
	font-weight: 900;
}

.wrapper .content .wrap #serviceCall h3 span {
	width: 1px;
	height: 1px;
	display: inline-block;
	overflow: hidden;
}

.wrapper .content .wrap #serviceCall p {
	line-height: 160%;
	font-size: 18px;
	color: #888;
	font-weight: 900;
}
.wrapper .content .wrap #serviceCall p.phone {
	height: 50px;
	line-height: 50px;
	font-family: "Arial Black", Gadget, sans-serif;
	font-size: 50px;
	color: #3d3d3d;
}

/**
*
* =promenu
*
**/
.wrapper .content .wrap .promenu {
	width: 575px;
	background: url(/images/12/index/icon-promenu.jpg) no-repeat 450px 20px #fe4e12;
	float: right;
}

.wrapper .content .wrap .promenu h3 {
	margin: 15px 0 0 20px;
	padding: 0 0 5px;
	width: 415px;
	border-bottom: 1px #fff solid;
	text-align: right;
	font-size: 24px;
	color: #fff;
	font-weight: 900;
}

.wrapper .content .wrap .promenu h3 span {
	width: 1px;
	height: 1px;
	display: inline-block;
	overflow: hidden;
}

.wrapper .content .wrap .promenu p {
	margin: 5px 0 5px 20px;
	width: 415px;
	line-height: 160%;
	font-size: 18px;
}

.wrapper .content .wrap .promenu p a {
	color: #fff;
}


/* +seo
*----------------------------------------------------------------------------*/
.wrapper .content #webSeo {
	margin: 0 auto;
	padding: 5px 10px;
	width: 940px;
	height: 30px;
	background: #3d3d3d;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	overflow: hidden;
	line-height: 30px;
	color: #fff;
}

.wrapper .content #webSeo .seo {
	width: 940px;
	overflow: hidden;
}


/* +product-list
*----------------------------------------------------------------------------*/
#product-list{margin-top: 60px;}
#product-list ul{display: flex;flex-wrap: wrap;}
#product-list ul li{
	width: 33%;
    display: flex;
    padding: 20px;
    box-sizing: border-box;
    flex-wrap: wrap;
    position: relative;
}
#product-list ul li .photo{width:100%;position: relative;}
#product-list ul li .photo img{width: 100%;height: 200px;object-fit: fill;}
#product-list ul li .info{position: relative; width: 100%;background: #f5f5f5;transition: .3s; padding:20px 30px 35px;box-sizing: border-box;}
#product-list ul li .info h3{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size: 22px;padding-bottom: 15px;}
#product-list ul li .info h3 a{font-weight: bold;}
#product-list ul li .info .desc{-webkit-line-clamp: 3;font-size: 16px;}

#product-list ul li .photo::after{
	content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 6px;
    background: transparent;
    transition: .3s;
}
#product-list ul li .info::before{
	content: "";
	position: absolute;
	bottom: 0px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 20px 15px 20px;
	border-color: transparent transparent #f39800 transparent;
	transition: .3s;
}
#product-list ul li .info::after{content: "";transition: .3s;position: absolute;bottom: 0px;left: 0px;width: 100%;height: 4px;background: #f39800;}

#product-list ul li:hover .photo::after{ background: #f39800;}
#product-list ul li:hover .info{background: #f39800;color: #fff; }
#product-list ul li:hover .info h3,#product-list ul li:hover .info h3 a{color: #fff;}

/* +news-list
*----------------------------------------------------------------------------*/
#news .container{display: flex;width: 100%;}
#news .container .newsTitle{
	width: 215px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    display: block;
    position: relative;
}
#news .container .newsTitle::after{
	content: "";
	position: absolute;
	left: 0px;
	top: 0px;
	width: 90px;
	height: 100%;
	background: linear-gradient(90deg, #f2c193 20.37144%, #f1c093 20.37144%, #f0bab7 80.373%);
	z-index: -1;
}
#news .container .newsTitle .title{
	padding-left: 36px;
    font-size: 28px;
    letter-spacing: 10px;
    font-weight: bold;
    position: relative;
}
#news .container .newsTitle .title::after{
	content: "";
	position: absolute;
	right: 7px;
	top: 50%;
	transform: translateY(-50%);
	width: 80px;
	height: 1px;
	background: linear-gradient(90deg, #f2c193 20.37144%, #f1c093 20.37144%, #f0bab7 80.373%);
	z-index: 10;
}
#news .container .newsItem{width: calc(100% - 215px);margin-bottom: 0px;padding: 18px 0px;}
#news .container .newsItem li{display: flex;align-content: center;}
#news .container .newsItem li img{margin-right: 15px;margin-top: 5px;}
#news .container .newsItem li p{margin-right: 8px;}
#news .container .newsItem li h3{line-height: 1;width: calc(100% - 150px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.section-box > div{
	    box-shadow: -1px 2px 9px 0px rgb(119 119 119 / 15%);
}

.ssbanner .sideAD ul{display: flex;justify-content: space-between;background: #f5f5f5;flex-wrap: wrap;}
.ssbanner .sideAD ul li{width: calc((100%/4) - 10px);}
.ssbanner .sideAD ul li a{display:block;}
.ssbanner .sideAD ul li img{transition: .3s;width: 100%;}



@media screen and (max-width: 1024px){
	#product-list ul li .info h3{font-size: 18px;}
	#product-list ul li .photo img{height: 150px;}
}
@media screen and (max-width: 768px){
	#product-list ul li{width: 50%;}
	#news .container{flex-wrap: wrap;}
	#news .container .newsTitle,
	#news .container .newsItem{width: 100%;}
	#news .container .newsItem{padding: 18px 10px;}
	#news .container .newsTitle .title::after{right: auto;}
}

@media screen and (max-width: 640px){
	#product-list ul li .info{padding: 20px 15px 35px;}
	#product-list ul li .photo img{height: 130px;}
}
@media screen and (max-width: 520px){
	#product-list ul li{width: 100%;}
	#product-list ul li .photo img{height: auto;}
}
@media screen and (max-width: 480px){
	.ssbanner .sideAD ul{flex-wrap: wrap;}
	.ssbanner .sideAD ul li{width: 50%;}
	
}



:root{
  --bg:#ffffff;
  --text:#111;            
  --muted:#4b5563;       
  --border:#e5edf3;      


  --brand-1:#14815e;     
  --brand-2:#0f6b4e;     
  --brand-3:#0b4b37;     


  --accent:#0f6b4e;      
  --note-bg:#e9f7f2;     
  --note-text:#0f3d2f;    

  --link:#0c7a56;        
  --time:#0c7a56;        

  --bubble-bg:#ffffff;
  --bubble-text:#1f2937;
  --bubble-bg-hover:#eef8f4;

  --focus:#0ea5a6;        
}


.faq-section{
  font-family:"Noto Sans TC", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  padding:2rem;
  border-radius:14px;
  max-width:980px;
  margin:0 auto;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
}


.faq-section h2{
  font-size:1.9rem;font-weight:800;margin-bottom:1.25rem;
  padding:1rem 0;text-align:center;position:relative;letter-spacing:.5px;color:#0f3d2f;
}
.faq-section h2::before,.faq-section h2::after{
  content:"";position:absolute;left:0;right:0;height:2.5px;
  background:linear-gradient(90deg, var(--brand-1), var(--brand-2), var(--brand-3));
  opacity:.95;
}
.faq-section h2::before{top:0;}
.faq-section h2::after{bottom:0;}


.faq-guide{text-align:center;margin-bottom:1.5rem;}
.faq-guide h3{font-size:1.2rem;font-weight:700;margin-bottom:.35rem;color:#0f3d2f;}
.faq-guide p{font-size:1rem;color:var(--muted);}


.leo-announcement{
  max-width:1540px;
  margin:0 auto 20px auto; 
  padding:0 16px;         
}

p.activity-highlight{
  background:var(--note-bg);
  border-left:4px solid var(--accent);
  padding:12px 14px;margin:16px 5px;border-radius:10px;
  line-height:1.7;color:var(--note-text);
}
p.activity-highlight a{color:var(--link);text-decoration:none;}
p.activity-highlight a:hover{text-decoration:underline;}
.update-note{font-size:.92rem;color:var(--muted);margin:6px 0 18px 4px;font-style:italic;}
.update-note time{color:var(--time);font-weight:700;}


html{scroll-behavior:smooth;}
.faq-bubbles{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 1.25rem;
}
.faq-bubbles a{
  padding:8px 14px;border:1px solid var(--border);border-radius:999px;
  font-size:.95rem;color:var(--bubble-text);text-decoration:none;
  background:var(--bubble-bg);
  transition:background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.faq-bubbles a:hover,
.faq-bubbles a:focus-visible{
  background:var(--bubble-bg-hover);border-color:var(--brand-2);color:var(--brand-2);
  outline:none;box-shadow:0 0 0 2px color-mix(in srgb, var(--brand-2) 28%, transparent);
}


.faq-item{
  border-bottom:1px solid var(--border);
  padding:1rem 0;margin-bottom:12px;
}
.faq-question{
  font-size:1.1rem;font-weight:700;cursor:pointer;position:relative;padding-right:2rem;color:#0f3d2f;
}
.faq-question::after{
  content:"+";position:absolute;right:0;top:0;line-height:1;font-weight:800;color:var(--brand-2);
}
.faq-item.open .faq-question::after{content:"-";}
.faq-answer{display:none;margin-top:.55rem;line-height:1.85;color:var(--muted);}
.faq-item.open .faq-answer{display:block;}

/* 可達性 */
.faq-question:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;border-radius:6px;
}

/* RWD */
@media (max-width:768px){
  .faq-section{padding:1.25rem;}
  .faq-section h2{font-size:1.55rem;}
  .faq-guide h3{font-size:1.05rem;}
  .faq-guide p{font-size:.95rem;}
  .faq-bubbles a{font-size:.78rem;padding:6px 10px;}
  .faq-question{font-size:1rem;}
  .faq-answer{font-size:.95rem;}
}