@charset "utf-8";

body , .wrapper{ color:#222; background:#2d9dab; }
.wrapper{ padding-bottom:80px; }

/*a 鏈結字*/
a { color:#222;}
/*a:hover, a:focus { color:#646464;}*/



/*********/



/*頁首*/
.header{ position:relative; z-index:5; min-height:45px;  }

.logo{
	position:absolute;
	left:-10px;
	top:0px;
	width:230px;
	height:55px;
}
.logo img{ max-width:100%; height:auto;}


/*語系*/
.site-language{ position:absolute; right:10px; top:10px; }
.site-language a {
	display:inline-block;
	margin:0 0px 0 15px;
	width:30px;
	height:30px;
	line-height:28px;
	text-align:center;
	color:#cbf6e0;
	border:1px solid #cbf6e0;
	font-size:14px;
	vertical-align:middle;
	
	-ms-border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	-o-bborder-radius:3px;
	border-radius:3px;
}
.site-language a:hover , .site-language a:focus, .site-language a:active {
    color:#ffffff;
	background:#fd9a0c;
}


/*輪播*/
.banner{ width:100%; }
.owl-theme .owl-dots{ position:relative; z-index:3; text-align:right; margin-top:-30px; padding-right:10px;}
.owl-theme .owl-dots .owl-dot { display:inline-block; zoom:1 }
.owl-theme .owl-dots .owl-dot span {
	width:12px;
	height:12px;
	margin:0px 12px;
	display:block;
	-webkit-backface-visibility:visible;
	transition:opacity .2s ease;
	border-radius:30px;
	
	background: rgba(255, 255, 255, 1);
	border:1px solid #fd9a0c;
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background:#fd9a0c; }
@media (max-width:992px) { .owl-theme .owl-dots{ display:none; } }


/*選單*/
.menu-wrap{ z-index:10;}

.menu{ background:#cbf6e0; }
.menu:before, .menu:after{ display:table; content:" " }
.menu:after{ clear:both }
.menu li{ float:left; width:25%; text-align:center; }
.menu li a{ 
	display:block; 
	width:100%; 
	height:100%;
	padding:10px 3px;
	font-size:1.05em;
	border:1px solid #9a9a9a;
	border-right-width:0px;
	color:#084047;
}
.menu li:first-child a { border-left-width:0px; }

.menu-bottom{
	position:fixed;
	bottom:0;
	left:50%;
	width:100%;
	max-width:640px;
	margin-left:-320px;
}
/*滾輪往下滾時，.product-cate變化*/
#menu-top.is-down{ 
	top:0;
	left:0%;
	left:50%;
	width:100%;
	max-width:640px;
	margin-left:-320px;
}


/*主內容區*/
.main{ background:#cbf6e0; padding-bottom:50px; }


/*頁尾*/
.footer{ position:relative; font-size:1.1em;}
.footer-info-box{
	color:#FFF;
	color:#cbf6e0;
}
.footer-info-box li{ position:relative; margin-bottom:10px; padding-left:60px; min-height:30px; }
.footer-info-box li.company-title{
	display:block;
	padding-bottom:5px;
	border-bottom:1px solid rgba(203,246,224, 0.4);
	font-size:20px;
	font-weight:600;
}
.footer-info-title{
	position:absolute;
	top:0;
	left:0;
	display:inline-block;
	width:58px;
	text-align:right;
}

.info-box li.company-title , .info-box li.info-line{ padding-left:0; }

.footer:before{
	position:absolute;
	top:-40px;
	left:50%;
	margin-left:-320px;
	width: 640px;
	height: 50px;
	content:"";
	background:#cbf6e0 url(../images/oblique-bg.png) no-repeat center;
	background-size:cover;
	-moz-transform:scale(-1);
	-webkit-transform:scale(-1);
	-o-transform:scale(-1);
	-ms-transform:scale(-1);
	transform:scale(-1);
}
.footer-info-box a , .footer-contact , .footer-contact a{ color:#cbf6e0; }

.footer-contact a:hover{ color:#fd9a0c; }
.footer-contact li.web-designer{ margin-top:10px; }
.empty-title{ display:inline-block; width:45px; }



.page-area{
	position:relative; 
	min-height:350px;
	padding-bottom:10px;
	border-top:55px solid #2d9dab;
}
.page-area:before{
	position:absolute;
	top:0px;
	left:50%;
	margin-left:-320px;
	width: 640px;
	height: 50px;
	content:"";
	background: url(../images/oblique-bg.png) no-repeat center;
	background-size:cover;
}
.page-area-title{
	position:absolute; 
	top:-45px; 
	left:0;
	width:100%;
	text-align:center; 
	color:#cbf6e0;
	font-size:1.9em; 
}
.page-area-title span{ display:inline-block; position:relative; }
.page-area-title span:before{
	position:absolute;
	left:50%;
	bottom:0px;
	margin-left:-10px;
	width: 0;
    height: 0;
	content:"";
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 20px solid #cbf6e0;
	opacity:0.2;
}
.page-area-content{ margin-top:70px; }


/*分類*/
.category-wrap{text-align:left; margin-bottom:30px; margin-top:-35px; }
.cate-gp{
	display:inline-block; 
	border:1px solid #2d9dab;
	padding-right:5px;
	border-radius:4px;
	background:#FFF;
	/*font-size:1.05em;*/
}
.cate-title{ 
	display:block;
	width:80px;
	padding:0px 15px; 
	font-size:1em; 
	background:#2d9dab;
	color:#FFF;
	text-align:center;
	margin-bottom:5px;
}
.cate-selt{
	display:block;
	background:#FFF;
	width:auto;
	padding-right:35px;
	border-color:transparent;
	font-size:1.05em;
	/*line-height:3;*/
	height:35px;
	padding-left:10px;
	
	appearance:none;
    -webkit-appearance: none;/* Chrome */
    -moz-appearance: none;/* Firefox */
	background:url(../images/selt-arrow.png) no-repeat scroll right 5px center transparent;
}
.cate-selt::-ms-expand { display: none; } /*for ie*/


/*單張照片*/
.single-photo{ margin:10px 0; }
.single-photo img { display:block; margin:0 auto; max-width:100%; height:auto; }


/*影片*/
.video{ text-align:center; margin:30px 0; }
.video iframe{ max-width:100%; min-height:250px; }


/*檔案下載*/
.download-line{ text-align:center; margin:30px 0; }
.download-btn{
	position:relative;
	display:inline-block;
	color:#333;
	padding-left:13px;
	font-size:1.05em;
}
.download-btn:before{
	position:absolute;
	top:50%;
	left:5px;
	width:0;
	height:0;
	margin-top:-4px;
	content:"";

	border-bottom: 5px solid transparent;
	border-right: 5px solid #333;
	border-top: 5px solid transparent;
}





/* -------------------------------------------------------------------------------------------- */



/*首頁 index ========================== */
.sec{ position:relative; min-height:150px; }
.first-area{
	padding-bottom:60px;
	border-top:55px solid #2d9dab;
}
.first-area:before{
	position:absolute;
	top:0px;
	left:50%;
	margin-left:-320px;
	width: 640px;
	height: 50px;
	content:"";
	background: url(../images/oblique-bg.png) no-repeat center;
	background-size:cover;
}
.second-area{ background:#2d9dab; padding-bottom:10px; }
.second-area:before{
	position:absolute;
	top:-50px;
	left:50%;
	margin-left:-320px;
	width: 640px;
	height: 50px;
	content:"";
	background: url(../images/oblique-bg.png) no-repeat center;
	background-size:cover;
	-moz-transform:scaleY(-1);
	-webkit-transform:scaleY(-1);
	-o-transform:scaleY(-1);
	-ms-transform:scaleY(-1);
	transform:scaleY(-1);
}
.second-area:after{
	position:absolute;
	bottom:-50px;
	left:50%;
	margin-left:-320px;
	width: 640px;
	height: 50px;
	content:"";
	background: url(../images/oblique-bg.png) no-repeat center;
	background-size:cover;
	-moz-transform:scaleX(-1);
	-webkit-transform:scaleX(-1);
	-o-transform:scaleX(-1);
	-ms-transform:scaleX(-1);
	transform:scaleX(-1);

}

.third-area{ padding-top:50px; }
.area-title{ text-align:center; color:#cbf6e0; font-size:1.9em; }
.area-title span{ display:inline-block; position:relative; }
.area-title span:before{
	position:absolute;
	left:50%;
	bottom:0px;
	margin-left:-10px;
	width: 0;
    height: 0;
	content:"";
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 20px solid #cbf6e0;
	opacity:0.2;
}
.first-area .area-title{ position:absolute; top:-45px; left:0; width:100%; }
.second-area .area-title{ top:-120px; right:0; }
.third-area .area-title{ top:-30px; left:0; color:#2D9DAB;}
.third-area .area-title span:before{border-top-color:#2D9DAB; opacity:0.1;}

.area-content{ margin-top:15px; }
.first-area .area-content{ margin-top:70px; }

/*more 按鈕*/
.btn-wrap{ text-align:center; margin-top:30px;}
.btn-wrap .more-btn{
	position:relative;
	display:inline-block;
	padding:5px 20px;
	margin:0 5px;
	font-size:0.9em;
	color:#2d9dab;
	border:1px solid #2d9dab;
}
.btn-wrap .more-btn:before{
	position:absolute;
	top:50%;
	right:-17px;
	margin-top:-9px;
	width: 0;
    height: 0;
	content:"";
	border-left: 12px solid #2d9dab;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
}
.btn-wrap.light-btn-group .more-btn{ color:#cbf6e0; border:1px solid #cbf6e0; }
.btn-wrap.light-btn-group .more-btn:before{ border-left-color:#cbf6e0; }


/*商品列表*/
.pro-list{}
.pro-list:before, .pro-list:after{ display:table; content:" " }
.pro-list:after{ clear:both }
.pro-list li{
	float:left;
	width:32%;
	margin-right:2%;
	margin-bottom:20px;
	padding:3px 3px;
	background:#fff;
	text-align:center;
}
.pro-list li:nth-child(3n){ margin-right:0%; }
.pro-list li:nth-child(3n+1){ clear:both; float:left; }

.pro-box .photo{
	position:relative;
	width:100%;
	height:155px;
	overflow:hidden;
	margin-bottom:5px;
}
.pro-box .photo img{
	width:auto;
	height:auto;
	max-width: 100%;
	max-height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.pro-box .title{ line-height:1.2;}
/*@media (max-width:480px) { .pro-box .photo{ height:150px; } }
@media (max-width:360px) { .pro-box .photo{ height:150px; } }*/


/*關於我們 about ========================== */



/*最新消息 news ========================== */
.news-box{
	position:relative;
	border:1px solid #2d9dab;
	padding:10px 20px 35px 20px;
	color:#084047;
	margin-bottom:50px;
}
.news-box:before{
	position:absolute;
	top:0px;
	left:0px;
	width: 0;
    height: 0;
	content:"";
    border-top: 25px solid #2d9dab;
    border-right: 25px solid transparent;     
}
.news-box .meta{ font-size:0.9em; }
.news-box .title{ font-size:1.1em; }
.news-box .title , .news-box .title a{ color:#2d9dab; }
.news-box .content{ max-height:33px; overflow:hidden; color:#084047; }
.news-box .more-btn{
	position:absolute;
	bottom:-15px;
	right:-1px;
	display:inline-block;
	padding:3px 30px;
	background:#2d9dab;
	color:#FFF;
}


/*最新消息詳細頁 news_view ========================== */
.new-view-area{ color:#084047; }
.new-view-area .meta{ font-size:0.9em; padding:2px 0; margin-bottom:10px; border-bottom:1px solid #2d9dab; color:#2d9dab; }
.new-view-area .title{ font-size:1.2em; margin-bottom:10px; font-weight:600; }


/*商品詳細介紹 prodcut ========================== */
.product-view-area .title{ font-size:1.3em; margin:20px 0; border-bottom:1px solid #2d9dab; color:#2d9dab; font-weight:600; }
.product-view-area .content-title{ font-size:1.2em; margin:45px 0 10px 0; color:#084047; }

/*.page-btn-line{ text-align:center; }*/
.page-back-btn{ 
	display:inline-block;
	padding:5px 15px;
	margin:0px 0px 10px 0px;
	background:#2d9dab;
	color:#FFF;
	border-radius:3px;
	font-size:15px;
}







/*常見問題 qa ========================== */
.qa-box{
	position:relative;
	border-top:1px solid #2d9dab;
	padding:15px 0px 10px 40px;
	color:#084047;
	margin:0 0 50px 0;
}
.qa-box:before{
	position:absolute;
	top:0px;
	left:0px;
	width: 0;
    height: 0;
	content:"";
    border-top: 50px solid #2d9dab;
    border-right: 50px solid transparent;     
}
.qa-box .text{
	position:absolute;
	top:-8px;
	left:6px;
	font-size:26px;
	color:#ffffff;
	font-weight:900;
}
.qa-box .title{ margin:0px 0 10px 0; font-size:1.2em; font-weight:600; }
.qa-download-line{ text-align:right; margin:15px 0 0 0; }
.qa-download-btn{
	display:inline-block;
	text-align:center;
	padding:1px 15px;
	color:#fff;
	background:#2d9dab;
	border:1px solid #2d9dab;
}


/*常見問題*/
#qaContent { width:100%; }
.accordionPart { margin: 0px 0px 10px 00px;}
#qaContent ul.accordionPart > li {
	width:100%;
	color:#41596D;
	padding:20px 0;
	/*border-top:1px solid #ccc;*/
	transition:All 0.35s ease;
	-webkit-transition:All 0.5s ease;
	-moz-transition:All 0.5s ease;
	-o-transition:All 0.5s ease;
}
/*#qaContent ul.accordionPart li:first-child{ border-top-width:0px; padding-top:0; }
#qaContent ul.accordionPart li:last-child{ border-bottom:1px solid #ccc; }*/
#qaContent ul.accordionPart > li .qa_title {
	position:relative;
	cursor: pointer;
	font-size:1.2em; 
	font-weight:600;
	border-top:1px solid #2d9dab;
	padding:15px 0px 10px 40px;
	color:#084047;
}

#qaContent ul.accordionPart > li .qa_title:before{
	position:absolute;
	top:0px;
	left:0px;
	width: 0;
    height: 0;
	content:"";
    border-top: 50px solid #2d9dab;
    border-right: 50px solid transparent;     
}	
#qaContent ul.accordionPart > li .qa_title:after{
	position:absolute;
	content:"Q";
	top:-8px;
	left:6px;
	font-size:26px;
	color:#ffffff;
	font-weight:900;
}

#qaContent ul.accordionPart > li .qa_content {
	display:none;
	position:relative;
	padding:0px 10px 5px 45px;
	margin-top:5px;
	margin-bottom:20px;
	font-size:1em;
}





/*商品型錄 catalogue ========================== */
.catalogue-list:before, .catalogue-list:after{ display:table; content:" " }
.catalogue-list:after{ clear:both }
.catalogue-list li{
	float:left;
	width:49%;
	margin-right:2%;
	margin-bottom:30px;
}
.catalogue-list li:nth-child(2n){ margin-right:0%; }
.catalogue-list li:nth-child(2n+1){ clear:both; float:left; }
.catalogue-list li img{ width:100%; height:auto;}



/*聯絡我們 contact ========================== */
.info-box{
	position:relative;
	background: #2d9dab;
	font-size:1.1em;
	padding:10px;
	color:#FFF;
}
.info-box li{ position:relative; margin-bottom:15px; padding-left:60px; }
.info-box:before{
	position:absolute;
	bottom:0px;
	right:20px;
	width: 0;
    height: 0;
	content:"";
    border-right: 20px solid transparent;
    border-left: 20px solid transparent;
    border-bottom: 30px solid #EAEAEA;
}
.info-box a{ color:#FFF;}
.info-box li.company-title{
	display:block;
	padding-bottom:5px;
	border-bottom:1px solid rgba(203,246,224, 0.4);
	font-size:20px;
	font-weight:600;
}
.info-title{
	position:absolute;
	top:0;
	left:0;
	display:inline-block;
	width:58px;
	text-align:right;
}

.info-box li.company-title , .info-box li.info-line{ padding-left:0; }

.map-box{ margin-bottom:20px; }
.info-line span{ display:inline-block; vertical-align:middle; }







/* -------------------------------------------------------------------------------------------- */


@media (max-width:640px) {
	#menu-top.is-down , .menu-bottom{ left:0; max-width:100%; margin-left:0px; }
}

@media (max-width:480px) {
	.pro-box .photo{ height:125px; }
}

@media (max-width:360px) {
	.pro-box .photo{ height:90px; }
}


/*@media (min-width: $mobile) and (max-width: $mobile-max){
	 select option{ font-size:20px; line-height:1.5;}
}*/