@charset "utf-8";
/* CSS Document */
/*=====================default page set=====================*/
.trinityd0{padding:100px 0 50px 0;}
.trinityd0 .dtit,.trinityd2 .dtit,.trinityd3 .dtit,	.trinityd5 .dtit{font-size:50px; text-align:center; letter-spacing: 2px; font-weight:500;}
.trinityd0 .dtit span,.trinityd2 .dtit span,.trinityd3 .dtit span,.trinityd4 .dtit span{font-size:16px; color:#ff971c; font-weight:500; margin-bottom:20px; display:inline-block;}
.trinityd2 .dtit{font-size:44px;}
@media screen and (max-width:1286px){/*desktop*/
	.trinityd0 .dtit,.trinityd2 .dtit,.trinityd3 .dtit,	.trinityd5 .dtit{font-size:40px;}
	.trinityd0 .dtit span,.trinityd2 .dtit span,.trinityd3 .dtit span,.trinityd4 .dtit span{font-size:14px;} 
}
@media screen and (max-width:960px){/*desktop-small pad*/
.trinityd0 .dtit,.trinityd2 .dtit,.trinityd3 .dtit,	.trinityd5 .dtit{font-size:30px;}
	.trinityd0 .dtit span,.trinityd2 .dtit span,.trinityd3 .dtit span,.trinityd4 .dtit span{font-size:14px;} 
}
@media screen and (max-width:767px){/*phone*/
.trinityd0{padding:30px 0; background:linear-gradient(#ccc 3%,#fff 45%);}
}
/*trinityd1*/
.trinityd1{padding:0px;}
.trinityd1 .list .frm{display:flex; align-items: center; position:relative;}
.trinityd1 .list .frm::after{content:""; width:3px; height:3%; display:block; opacity:.8; background:#ff971c; position:absolute; left:55%; top:10%; z-index: -1; transition-duration: .5s;}
.trinityd1 .list .frm:hover::after{height:80%;}
.trinityd1 .list figure{width:55%; position:relative;}
.trinityd1 .list .frm::before{content:""; width:50%; height:90%; background:#ff971c; opacity:.1; display:block; position:absolute; top:5%; left:30%;}
.trinityd1 .list section{width:45%; padding:0 3%; font-size:26px; line-height:180%; color:#000;}
.trinityd1 .list .innerhtml{font-size:26px;}
.trinityd1 .list.rr .frm::after{right:55%; left:auto;}
.trinityd1 .list.rr .frm::before{right:30%; left:auto;}
.trinityd1 .list.rr figure{order:1;}
.trinityd1 .list.rr section{order:0; text-align:right;}
.trinityd1 .list h3.subject{font-size:48px; font-weight:500; margin:0; line-height:150%; letter-spacing: 2px;}
.trinityd1 .list h3.subject span{color:#ff971c;}

.trinityd1 .more{text-align:left; margin-top:15px; display:inline-block;}
.trinityd1 .more span{display:inline-block; padding:.4em 4em 0.4em 1.5em; border-radius:1em; background:#306c12; color:#fff; position:relative;}
.trinityd1 .more span::after{content:""; position:absolute; right:10px; top:50%; transform:translateY(-50%) rotate(45deg); width:7px; height:7px; display:block; border:1px solid #fff; border-bottom:none; border-left:none; }
@media screen and (max-width:767px){/*phone*/
.trinityd1{padding:20px 0;}
.trinityd1 .list .frm{flex-wrap:wrap;}
.trinityd1 .list figure{width:100%; order:1;}
.trinityd1 .list section{width:100%; order:0; padding:3%;}
.trinityd1 .list h3.subject{font-size:32px;}
.trinityd1 .list h3.subject span{color:#ff971c;}
.trinityd1 .list .frm::after{height:80%; left:0%; }
.trinityd1 .list.rr .frm::after{right:0; left:auto;}
.trinityd1 .list .frm::before{content:""; width:100%; height:90%; top:10%;}
}
.trinityd2 {padding:200px 0 0 0; background:linear-gradient(#fff,#efefef 20%);}
.trinityd2 table td:first-of-type{width:70%;}
.trinityd2 table td:nth-of-type(2){position:relative; background:rgba(255,153,91,.2);}
.trinityd2 table div{background:rgba(255,255,255,.8); position:absolute; width:90%; height:90%; top:5%; left:-10%; padding:5% 5% 5% 15%; text-align:left;}
.trinityd2 table img{max-width:none !important; width:100%; height:auto;}
.trinityd2 table div p{font-size:22px;}
@media screen and (max-width:1600px){
	.trinityd2 table td:first-of-type{width:55%;}
}
@media screen and (max-width:1200px){
	.trinityd2 table td:first-of-type, .trinityd2 table td:nth-of-type(2){width:100%; display:block; float:right;}
	.trinityd2 table div{position:relative; width:100%; padding:3%; left:0;}
	.trinityd2 table div p{font-size:14px;}
}
@media screen and (max-width:767px){/*phone*/
.trinityd2 {padding:0;}
}
.trinityd3{background:#efefef; overflow:hidden;}
.trinityd3 .list .frm{position:relative;}
.trinityd3 .list .frm:hover section{opacity:1;}
.trinityd3 .list .frm:hover::before{opacity:1;}
.trinityd3 .list .frm:hover img{transform:scale(1.05,1.05); transition:3s;}
.trinityd3 .list section{position:absolute; z-index: 10; color:#fff; bottom:0; left:0; display:block; padding:1em; min-height:auto !important; opacity:0; transition:.5s;}
.trinityd3 .list h3.subject{font-size:26px; font-weight:300;}
.trinityd3 .list .frm::before{content:"111"; background:rgba(0,0,0,0.7); position:absolute; top:0; left:0; width:100%; height:100%; display:block; z-index:5; opacity:0; transition:.3s;}
.trinityd5{background:#efefef; position:relative; display:flex; align-items: center; padding:100px 0 30px 0;}
.trinityd5 .dtit{position:relative; z-index: 3;}
.trinityd5 .dtit span{display:block; width:12em; height:20px; background:rgba(255,153,91,.2); position:absolute; left:50%; transform:translate(-50%,-10px);}
.trinityd5 p{font-size:22px; position:relative; z-index: 3;}
.trinityd6{background:#efefef; padding:80px 0 100px 0;}
.trinityd6 .more{text-align:center;}
.trinityd6 .more a{display:inline-block; color:#000; border:1px solid #000; font-size:20px; padding:0.5em 3em;}
.trinityd6 .more a:hover{color:#ff971c; border:1px solid #ff971c;}
@media screen and (max-width:767px){/*phone*/
	.trinityd5{padding:50px 0 30px 0;}
	.trinityd6{padding:20px 0 70px 0;}
}
/*=====================default page set end=====================*/
#defaultimg .mask{width:90%;}
/*以下為預設功能用*/

/*prodetail*/
.prodetail .main h1.syis{width:50%; float:right;}
.prodetail .main .sum{width:50% !important; float:right;}
.prodetail .main figure{padding-right:3em; width:50%;}
.prodetail .main .cnt::before{content:"詳細介紹"; font-size:16px; color:#999; display:block; width:100%; border-bottom:1px solid #ccc; font-weight:700; letter-spacing: 1px; margin:2em 0 1em 0;}
@media screen and (max-width:767px){/*phone*/
.prodetail .main h1.syis{width:100%; float:right;}
.prodetail .main .sum{width:100% !important; float:right;}
}
/*Contact4*/
.Contact4{padding-bottom:0;}
.Contact4 .gmap .page{max-width:100%; width:100%;}
/*A0201 style*/
.A0201 .main .list .frm{background:#fff; box-shadow:0 0 5px rgba(200,200,200,.2);}
/*A0202 style*/
.A0202 .page{max-width:960px;}
.A0202 .main .list{border-bottom:1px solid #ccc;}
/*A0203 A0204 style*/
@media screen and (max-width:767px){/*phone*/
.A0203_detail .side, .A0204_detail .side{display: none;}
}
/*A0204 style*/
/*A0205 style*/
.A0205 .page{max-width:960px;}
.A0205 .main .list h3.subject{width:calc(100% - 7em); display: inline-block;}
.A0205 .main .list .path{width:6em; display: inline-block;}
.A0205 .main .list .more{width:4em; display: inline-block;}
.A0205 .main .list{border-bottom:1px dotted #ccc;}
@media screen and (max-width:767px){/*phone*/
.A0205 .main .list section{ flex-wrap: wrap;}
.A0205 h3.subject{width:100%;}
.A0205 .main .list .path {width:50%;}
.A0205 .main .list .more{width:50%; text-align: right;}
}
/*A0207*/
.A0207_class .main .list{text-align: center;}
.A0207_class .main .list .frm{background:#fff; box-shadow: 0 0 3px rgba(0,0,0,0.1);}
/*A0208*/
.A0208 .main .ptit{display:none;}
/*A0209*/
.A0209 .main .list h3.subject{width:calc(100% - 7em); display: inline-block;}
.A0209 .main .list .path{width:6em; display: inline-block;}
.A0209 .main .list .more{width:4em; display: inline-block;}
.A0209 .main .list{border-bottom:1px dotted #ccc;}
@media screen and (max-width:960px){/*desktop-small pad*/
/*A0209*/
.A0209 .main .list h3.subject{width:100%; display: inline-block;}
.A0209 .main .list .path{width:6em; display: inline-block; }
.A0209 .main .list .more{width:4em; display: inline-block; float:right;}
}
/*A0301*/
.A0301_detail .main h1{display:none;}
/*A0302*/
.A0302 .main .list{text-align:center;}
/*A0306*/
.A0306 .main .list .more{text-align:center;}
/*A0403*/
.A0403_class .main .list{text-align:center;}
.A0403 .main .list h3.subject{font-size:15px;}
/*A0404*/
.A0404_class .main .list{text-align:center;}
.A0404_class .main .list h3.subject{border-top:3px solid #666; background:#f5f5f5;}
.A0404_detail .subtit{display:none;}
.A0404_detail .prodetail .rr{width:100%;}
/*A0405*/
.A0405 .main .list .frm{padding:0;}
.A0405 .main .list h3.subject{font-size:16px;}
/*A0406*/
.A0406 .main .list figure, .A0406 .main .list section{width:50%; padding:0.5em; display:inline-block; float:left;}
.A0406 .main .list.rr figure{float:right;}
/*A0407*/
.A0407 .ptit{display:none;}
/*A0408*/
.A0408_BCat .main .list{text-align:center;}
.A0408_BCat .main .list .frm{background:#fff; box-shadow:0 0 3px rgba(0,0,0,0.1);}
.A0408 .main .list h3.subject{font-size:16px;}
/*A0501*/
.A0501 .main .list .frm{background:#fff; box-shadow:0 0 10px rgba(0,0,0,0.1);}
.A0501 .main .list .innerhtml{padding-left:30px; border-top:1px solid #ccc;}
/*A0502*/
.A0502 .main .list .frm{border:1px solid #ccc; position:relative;}
.A0502 .main .list .frm::before{content:""; width:45px; height:100%; position:absolute; top:0; left:0; background:#ccc; display: block; z-index: -1;}
.A0502 .main .list .innerhtml{padding:5px 0 5px 45px; border-top:1px solid #ccc;}
.A0502 .main .list h3.subject{padding:5px; margin-left:45px !important; text-indent: -45px !important;}
.A0502 .main .list h3.subject .foricon{color:#fff; text-align: center; font-size:30px; width:40px; line-height: 32px; margin-right:5px; display: inline-block; text-indent:initial;}
/*A0503*/
.A0503 .main .list{padding:0;}
.A0503 .main .list h3.subject{border-bottom:1px solid #ccc;}
.A0503 .main .list .innerhtml{padding-left:30px;}
/*A0601*/
.A0601 .main .list h3.subject .foricon{display:none;}
.A0601 .main .list .frm{background:#fff; box-shadow:0 0 10px rgba(0,0,0,0.1);}
/*A0602*/
.A0602 .main .list .frm{background:#fff; border:1px solid #efefef;}
.A0602 .main .list h3.subject{font-weight:normal;}
.A0602 .main .list h3.subject .foricon{padding:5px; opacity:.5; }
.A0602 .main .list h3.subject .foricon images{width:10px; height:auto; padding-top:10px;}
/*A0603*/
.A0603 .main .list h3.subject .foricon{padding:5px; opacity:.5; }
.A0603 .main .list .frm{background:#fff; border-radius:1em;}
/*A0604*/
.presentall .list, .presentall .list .frm{margin:0; padding:0;}
.presentall .list{margin-top:0.5em;}
.A0604 .list h3.subject{font-weight:normal; width:calc(100% - 5em); display:inline-block;}
.A0604 .list .more{width:5em; display:inline-block;}
.A0604 .list .more span{display:inline-block; border-radius:1em; padding:2px 6px; background:#666; color:#fff;}
.A0604 .list h3.subject .foricon{padding:5px; opacity:.5; }
.A0604 .list{border-bottom:1px dotted #999; padding:0; margin:0;}
.A0604 .list .frm{padding:0;}
.A0604 .list .frm:hover .more span{background:#333;}
/*A0701*/
.A0701 .main .list{text-align:center;}
/*A0702*/
.A0702 .main .list h3.subject{font-weight:normal; width:calc(100% - 5em); display:inline-block;}
.A0702 .main .list .more{width:5em; display:inline-block;}
.A0702 .main .list .more span{display:inline-block; border-radius:1em; padding:2px 6px; background:#666; color:#fff;}
.A0702 .main .list h3.subject .foricon{padding:5px; opacity:.5; }
.A0702 .main .list{border-bottom:1px dotted #999; padding:0; margin:0;}
.A0702 .main .list .frm{padding:0;}
.A0702 .main .list .frm:hover .more span{background:#333;}
/*A1702*/
.A1702 .main .list{border-bottom:1px dotted #ccc;}
/*Contact4*/
.Contact4{padding-bottom:0;}
.Contact4 .gmap .page{max-width:100%; width:100%;}
/*A0901*/
.MBLayout h1{width:66%; float:right;}
.MBLayout figure{width:33%;}
.MBLayout .innerhtml.sum{width:66%; padding-left:2em;}
.MBLayout .innerhtml{margin-top:2em;}
@media screen and (max-width:767px){/*phone*/
.MBLayout figure,.MBLayout h1{width:100%; text-align: left; font-size:20px;}
.MBLayout .innerhtml.sum{width:100%; padding-left:0;}
}
/*QALayout*/
.QALayout .main .list h3.subject{text-indent:-30px; margin-left:30px;}
/*syis default product*/
.Ctlist .main .list{text-align:center;}

/*syis default download*/
.DWlist .main .list{border-bottom:1px dotted #ccc;}
.DWlist .main .list h3.subject, .DWlist .main .list .path{display:inline-block; vertical-align: top;}
.DWlist .main .list .frm{padding:0;}
.DWlist .main .list .path{width:6em; line-height:180%; padding:0.5em 0;}
.DWlist .main .list h3.subject{width:calc(100% - 6em); }