/* CSS Document */
@import url(font-awesome/css/font-awesome.min.css);

body {  -webkit-text-size-adjust:100%; margin:0; text-align:center; font-family:"Arial", "微軟正黑體", sans-serif; font-size:16px; color:#777777; line-height:24px; letter-spacing:1px; }
img {   border:0; }

/* Reset ================================================================================= */
.text{
    text-align: center;
    color:#000000;
}
a { text-decoration:none; color:#777777;
-webkit-transition: all 0.4s ease-out 0s;
-moz-transition: all 0.4s ease-out 0s;
transition: all 0.4s ease-out 0s; }
a:hover {   color:#777777; text-decoration:none; }
#content1 { background:url(../images/demo-main-bg.jpg) repeat-y top center; overflow: hidden; padding:0 0 0px 0;    }
* {padding:0;list-style:none;-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */-moz-box-sizing: border-box;    /* Firefox, other Gecko */box-sizing: border-box;         /* Opera/IE 8+ */}

.main-Box, .top-Box, .menu-Box, .banner-Box,  .content2-Box, .footer-Box, .copyright-Box { max-width:964px; margin:0 auto; text-align:left; position:relative; clear:both; }
.content-Box { max-width:964px; margin:0 auto; text-align:left; position:relative; clear:both;}
.after-0:after { clear:both; display:block; content:""; height:0; text-indent:-99999px;}
.after-5:after { clear:both; display:block; content:""; height:5px; text-indent:-99999px;}
.after-10:after { clear:both; display:block; content:""; height:10px; text-indent:-99999px;}
.after-15:after { clear:both; display:block; content:""; height:15px; text-indent:-99999px;}
.after-20:after { clear:both; display:block; content:""; height:20px; text-indent:-99999px;}

#gotop { display: none; position: fixed; right:0px; bottom:20px; cursor: pointer; }
#gotop a { display:inline-block; width:30px; height:30px; padding-top:6px; color:#fff; opacity:0.5;  filter: alpha(opacity=50); background:#000;}
#gotop a:hover { color:#fff; opacity:1;  filter: alpha(opacity=100);}

.slider a:before { content:""; display:block; position:absolute; width:100%; height:100%; z-index:1;}


#content { background:url(../images/demo-main-bg.jpg) repeat-y top center; overflow: hidden;padding-top: 148px;   }
.banner { background:url(../images/banner.jpg) no-repeat top center; height:245px; background-size:cover;}

#main {}
.path { min-height:58px; background:#555555; border-top:6px solid #c5792b; padding:14px 0 7px 0; font-size:18px; color:#fff;
margin:0 0 25 0;}
.path a, .path span { color:#fff; display:inline-block; padding-bottom:5px;}
.path a:hover { color:#f08f2c;}
.path a:after { content:">"; display:inline-block; padding:0 14px; vertical-align:top;}
h1 {padding:20px 0 20px 0;color:#545454;font-size:30px;line-height:130%;}

.main-pro-link { padding-top:10px;}
.main-pro-link li { float:left; width:50%; position:relative; overflow:hidden; line-height:0;margin-bottom: 50px;}
.main-pro-link li img {-webkit-transition: all 0.4s ease-out 0s;
-moz-transition: all 0.4s ease-out 0s;
transition: all 0.4s ease-out 0s;}
.main-pro-link-name { position:absolute; z-index:2; bottom:35px; right:0; width:80%; height:35px; background:rgba(0,0,0,.4); color:#fff; font-size:20px; padding:4px 70px 2px 10px; line-height:130%; white-space:nowrap; text-overflow : ellipsis; overflow:hidden;
-webkit-transition: all 0.4s ease-out 0s;
-moz-transition: all 0.4s ease-out 0s;
transition: all 0.4s ease-out 0s;}
.main-pro-link-arrow { position:absolute; font-size:30px; right:35px; top:2px; width:30px; height:30px; border-radius:100%; border:1px solid #fff; line-height:20px; text-align:center;
-webkit-transition: all 0.4s ease-out 0s;
-moz-transition: all 0.4s ease-out 0s;
transition: all 0.4s ease-out 0s;}
.main-pro-link li:hover img {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
transform: scale(1.1);}
.main-pro-link li:hover .main-pro-link-name { background:rgba(0,0,0,.8);}
.main-pro-link li:hover .main-pro-link-arrow {
transform: rotate(-90deg) ;
-webkit-transform: rotate(-90deg) ;
-moz-transform: rotate(-90deg) ;
-o-transform: rotate(-90deg) ;
-ms-transform: rotate(-90deg) ;}

/*product-list*/
.product-data { padding-bottom:15px;}
.product-data > h2 { font-weight:normal;}
.pro-list li { display:inline-block; vertical-align:top; margin:0 25px 30px 25px; width:calc(25% - 50px - 5px); border:1px solid #686868;
-webkit-transition: all 0.4s ease-out 0s;
-moz-transition: all 0.4s ease-out 0s;
transition: all 0.4s ease-out 0s; }
.pro-list-pto { line-height:0; overflow:hidden;}
.pro-list-pto img {
-webkit-transition: all 0.4s ease-out 0s;
-moz-transition: all 0.4s ease-out 0s;
transition: all 0.4s ease-out 0s;}
.pro-list-name { background:#666666; color:#fff; font-size:16px; padding:10px 10px; white-space:nowrap; text-overflow : ellipsis; overflow:hidden; line-height:140%; text-align:center;
-webkit-transition: all 0.4s ease-out 0s;
-moz-transition: all 0.4s ease-out 0s;
transition: all 0.4s ease-out 0s;}
.pro-list li:hover { border-color:#11376a;}
.pro-list li:hover img {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
transform: scale(1.1);}
.pro-list li:hover .pro-list-name { background:#11376a;}
#page { text-align:center; padding:20px 0 0px 0; color:#666666;}
#page a { display:inline-block; vertical-align:top; color:#666666; font-size:18px; padding:0px 14px 5px 14px; }
#page a:hover, #page a.current { color:#c5792b;}
.page-prev { padding-right:40px; padding-left:0; position:relative; top:-4px;}
.page-next { padding-left:40px; padding-right:0; position:relative; top:-4px;}
.page-prev i, .page-next i { font-size:30px;}

/*products-detail*/
.pro-box { position:relative; padding:0 0px; width:100%; margin:0 auto;}
.pro-b { float:left; width:50%; }
.pro-b img { width:100%;}
.pro-s { text-align:center; padding:10px 0;}
.rslides_tabs { margin-top:0px;}
.rslides_tabs li { display:inline-block; width:calc(25% - 2px - 5px); margin:1px; opacity:0.35;  filter: alpha(opacity=35);}
.rslides_tabs li a img { width:100%; border:1px solid #d8d8d8;}
.rslides_here { opacity:1 !important;  filter: alpha(opacity=100) !important;}

.pro-content { float:left; width:50%; text-align:left; padding:0 0 0 24px; line-height:130%; position:relative; }   
.pro-data-title { font-size:30px; color:#333333; padding-bottom:10px; line-height:140%; border-bottom:1px solid #c4c4c4; margin-bottom:10px;clear: both;}
.pro-data { padding-bottom:50px;}
.pro-data ul li {margin-left: 16px;position:relative;margin-bottom: 3px;}
.pro-data ul li:before {
    position:absolute;
    content:"• ";
    left: -14px;
    top:0px;
}
.inquiry { text-align:right; padding-right:7px; padding-top:0px; padding-bottom:25px;}
.inquiry a { display:inline-block; width:141px; height:38px; border-radius:7px; font-size:18px; color:#666666; text-align:center; line-height:37px; border:1px solid #666666;}
.inquiry a:hover { color:#fff; background:#11376a;}
.btn-box { padding:0px 5px 20px 0px;}
.btn-box a { display:inline-block; vertical-align:top; width:calc(33.333% - 5px - 6px); color:#fff; background:#666666; border-radius:7px; font-size:18px; margin:0 10px 5px 0; text-align:center; height:38px; line-height:37px;}
.btn-box a:hover { color:#fff; background:#11376a;}
.btn-box a:last-child { margin-right:0;}

.detatable th,.detatable td   {
    border: 1px solid #c4c4c4;
    padding: 0px 7px;
    font-size: 13px;
}

.detatable th  {
    background: #c4c4c4;
    border-color: #929292;
}
.detatable tr:nth-child(odd) td {
    background: #f1f1f1;
}

/*company*/
.company-content { background:#787878; color:#fff; padding:30px; line-height:26px; font-size:16px; margin-bottom:55px;}
.company-title { font-weight:bold; font-size:50px; line-height:140%; text-align:center; padding-bottom:20px;}
h2 { font-size:16px; font-weight:normal;}
.title01 { font-size:40px; letter-spacing:1px; color:#c5792b; text-align:center; line-height:140%; position:relative;}
.line { padding-top:15px;  border-bottom:2px solid #b5b5b5; position:relative; margin-bottom:30px;}
.line:after { position:absolute; content:""; bottom:-15px; left:calc(50% - 15px); 
width: 0;
height: 0;
border-style: solid;
border-width: 15px 15px 0 15px;
border-color: #555555 transparent transparent transparent;
}
.title02 { font-size:18px; color:#c5792b; padding:0 0 12px 0;}
.img-l { display:inline-block; vertical-align:top; width:calc(34% - 7px); padding-right:15px;}
.img-l img { width:100%;}
.company-data { display:inline-block; vertical-align:top; width:66%; color:#545454; font-size:15px; }

.A1{margin:24px 0 10px 0;}
.achie  {
    text-align: center;
    display:inline-block;
    vertical-align:top;
    width: calc( 80% / 3 - 20px );
    margin-left: 60px;
    margin-bottom: 50px;
}
/*.achie:nth-child(3n)  {*/
    /*margin-right: 0px;*/
/*}*/

/*star.video*/

.youtubecontent{
position: relative;
padding-top: 30px; height: 0; overflow: hidden;
}
.youtubecontent{
padding-bottom: 56.25%;
margin:39px 0 0 0; 
}
.youtubecontent iframe,
.youtubecontent object,
.youtubecontent embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/*end.video*/
.Certificate li {
    display: inline-block;
    vertical-align: top;
    width: calc(100% / 4 - 12px);
    margin: 20px 10px 0 0;
    border: 1px solid #dddddd;
}
.Certificate li:nth-child(4n) {
    margin-right:0;
}
.achievements li {
    margin-bottom:50px;
    display: inline-block;
    vertical-align: top;
    width: calc(100% / 4 - 27px);
    margin-right: 30px;
    -webkit-transition: all 1.5s;
    -moz-transition: all 1.5s;
    transition: all 1.5s;
}

.achievements li:nth-child(4n) {margin-right:0;}
.achievements li span {
    display:block;
    background: #555555;
    color: #FFF;
    padding: 5px 10px;
    font-size: 15px;
    text-align: center;
}
.achievements li:hover {
    -moz-transform:scale(1.3);
    -webkit-transform:scale(1.3);
    -o-transform:scale(1.3);
    -ms-transform:scale(1.3);
    transform:scale(1.3);
}
@media only screen and (max-width: 964px) {
.content-Box { padding-left:20px; padding-right:20px;}
#content{padding-top: 76px;}
}

@media only screen and (max-width: 768px) {
.pro-list li { margin:0 10px 30px 10px; width:calc(25% - 20px - 5px);}

.achievements li {width: calc(100% / 2 - 27px);}
.achievements li:nth-child(4n) {margin-right:30px;}
.achievements li:nth-child(2n) {margin-right:0;}
}
@media only screen and (max-width: 640px) {
.pro-list li { width:calc(50% - 20px - 5px);}
.pro-b, .pro-content { width:100%;}
.pro-content { padding-left:0;}
.achie  {width: calc( 100% / 2 - 12px );margin-left: 17px;}
.achie:nth-child(odd) {
    margin-left: 0;
}
.achie:nth-child(2n)  {
    margin-right: 0px;
}


}
@media only screen and (max-width: 570px) {
h1 { font-size:26px;}
.company-title {
    font-size: 32px;
}
.Certificate li {
    width: calc(100% / 2 - 12px);
}
.Certificate li:nth-child(4n),.Certificate li:nth-child(3n) {
    margin-right:10px;
}
.Certificate li:nth-child(2n) {
    margin-right:0;
}
.achievements li {width: calc(100% / 2 - 27px);}
.achievements li:nth-child(4n) {margin-right:30px;}
.achievements li:nth-child(2n) {margin-right:0;}
}

@media only screen and (max-width: 414px) {
.path { font-size:15px;}
.main-pro-link li { width:100%;}
.inquiry { padding-right:0;}
.inquiry a  { width:100%;}
.btn-box { padding-right:0;}
.btn-box a { width:100%; margin-right:0;}
.img-l { width:100%; padding-right:0;}
.company-data { width:100%;}
.company-title {
    font-size: 24px;
}
.achievements li {width: calc(100% - 65px);margin: 0 30px 60px 30px;}
.achievements li:nth-child(4n),.achievements li:nth-child(2n) {margin-right:0;}

}

@media only screen and (max-width: 320px) {
.pro-list li { margin:0 0 30px 0; width:100%;}
.Certificate li,.Certificate li:nth-child(4n),.Certificate li:nth-child(3n) {
    width: calc(100% / 1 - 12px);
    margin-right:0;
}
}