/* 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; }
img {	border:0; }

/* Reset ================================================================================= */

a { text-decoration:none; 
-webkit-transition: all 0.2s ease-out 0s;
-moz-transition: all 0.2s ease-out 0s;
transition: all 0.2s ease-out 0s; }
a:hover { text-decoration:none; }

* { margin: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+ */}

.content-Box { max-width:980px; 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;}


.content-top { /*background:#ededed; */min-height:370px; padding:52px 10px; background: url(../../../images/sub-bg.jpg) no-repeat top center; background-size: cover;}
.title01 { margin-bottom:20px; position:relative; text-align:center;}
.title01:after { content:""; display:inline-block; position:absolute; max-width:350px; width:100%; bottom:0; left:calc(50% - 175px); background:#cc0212; height:1px;}
.title01 h1 { display:inline-block; min-height:48px; text-align:center; padding:12px; color:#fff; font-size:20px; line-height:110%; background:#cc0212; min-width:140px;}
.path { padding-bottom:30px; text-align:center;}
.path li { display:inline-block; vertical-align:top; color:#494949; font-size:12px;}
.path li:after { content:">"; display:inline-block; vertical-align:top; padding:0 2px;}
.path li:last-child:after { display:none;}
.path li a { color:#494949;}
.path li a:hover { opacity:0.7;}
.content-top-data { max-width:790px; margin:0 auto; text-align:left; position:relative; color:#494949; font-size:14px; line-height:28px; }

.pro-list { display:flex; flex-direction:row; flex-wrap:wrap; position:relative; margin-top:-66px; padding-bottom:20px;}
.pro-list > div { width:25%; padding:0 20px 50px 20px;}
.pro-list-pto { line-height:0; background:#000; position:relative;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);}
.pro-list-pto span { display:block; width:100%; height:100%; text-align:center; position:absolute; padding:0 10px;  top:calc(50% - 15px);color:#fff; font-size:16px; left:0; opacity:0; line-height:110%;
-webkit-transition: all 0.2s ease-out 0s;
-moz-transition: all 0.2s ease-out 0s;
transition: all 0.2s ease-out 0s;}
.pro-list-pto img { width:100%;
-webkit-transition: all 0.2s ease-out 0s;
-moz-transition: all 0.2s ease-out 0s;
transition: all 0.2s ease-out 0s;}
.pro-list-name { padding-top:20px; font-size:16px; color:#494949; text-align:center;
-webkit-transition: all 0.2s ease-out 0s;
-moz-transition: all 0.2s ease-out 0s;
transition: all 0.2s ease-out 0s;}
.pro-list > div:hover img { opacity:0.2;}
.pro-list > div:hover span { opacity:1;}
.pro-list > div:hover .pro-list-name { opacity:0;}

/*products-detail*/
.pro-detail-top { display:flex; flex-direction:row; flex-wrap:no-wrap; align-items:center;}
.pro-detail-top > div:nth-of-type(1), .pro-detail-top > div:nth-of-type(3) { width:140px;}
.pro-detail-top > div:nth-of-type(2) { width:calc(100% - 280px); display:flex; flex-direction:row; flex-wrap:wrap; align-items:flex-start;}
.pro-detail-top > div:nth-of-type(2) > div { width:50%;}
.pro-detail-top > div:nth-of-type(2) > div:last-child { padding:0 30px;}
.arrowbox{height:100px; width:100px; overflow:hidden; margin:0 auto; position:relative;}
.arrow{ width:200px; display:flex; position:absolute; left:-100px; transition:all .4s ease;}
.arrow::before, .arrow::after{ height:100px; width:100px; display:flex; align-items:center; color:#dbdbdb; justify-content:center;}
.arrow::before{content:'NEXT'; font-size:20px; padding-top:10px;}
.arrow::after{content:'>'; left:100px; font-size:130px;}
.arrow:hover{ left:0px; }
.arrow2{ width:200px; display:flex; position:absolute; right:-100px; transition:all .4s ease;}
.arrow2::before, .arrow2::after{ height:100px; width:100px; display:flex; align-items:center; color:#dbdbdb; justify-content:center;}
.arrow2::before{content:'<'; font-size:130px;}
.arrow2::after{content:'PREV'; left:100px; font-size:20px; padding-top:10px;}
.arrow2:hover{ right:0px; }

#slider2 .rslides img {
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);}
.pro-detail-content { color:#494949; font-size:14px; line-height:30px;}
.pro-detail-content-title { font-size:24px; padding-bottom:12px;}
.btn-box { padding-top:30px;}
.btn-box a { display:inline-block; vertical-align:top; margin-right:15px; width:80px; height:80px; border-radius:100%; text-align:center; padding-top:28px; font-size:16px; color:#626262; letter-spacing:1px; background:#fff;
-webkit-box-shadow: 0px 0px 0px 7px #e7e7e7;
-moz-box-shadow: 0px 0px 0px 7px #e7e7e7;
box-shadow: 0px 0px 0px 7px #e7e7e7;}
.btn-box a:first-child { color:#fff; background:#cc0212;}
.btn-box a:hover { background:#222; color:#fff;}

.pro-detail-bottom { background:url(../../../images/pro-detail-bottom-bg.jpg) no-repeat top center; background-size:cover; padding:52px 10px;}
.pro-detail-bottom-box { max-width:800px; margin:0 auto; text-align:center; position:relative; clear:both;}
.pro-detail-bottom-title { padding-bottom:34px;}
.pro-detail-bottom-title > div { display:inline-block; min-width:140px; height:48px; color:#fff; font-size:20px; text-align:center; padding-top:13px; line-height:110%; background:#000000;}

.back-btn { text-align:center; padding:25px 0 0 0;}
.back-btn a { display:inline-block; padding:10px 7px 0 7px; border-top:1px solid #000000; font-size:14px; color:#000;}
.back-btn a:hover { padding:10px 12px 0 12px;}

/*company*/
.company-top-bg { background:url(../../../images/company-bg.jpg) no-repeat top left; background-size:cover; height:370px;}
.company-top-title { width:355px; margin:0 120px 0 auto; padding-top:115px;}
.company-top-title > div { border-bottom:1px solid #cc0212; margin-bottom:15px;}
.company-top-title > div span { display:inline-block; color:#fff; font-size:20px; line-height:110%; padding:14px 20px; background:#cc0212;}
.company-top-title h1 { font-size:34px; line-height:110%; color:#000;text-shadow: 0px 0px 5px #fff, 0px 0px 8px #fff, 0px 0px 25px #fff;}

.company-content { padding:18px 10px 0 10px;}
.company-content .path { text-align:right;}
.company-content-data { max-width:790px; margin:0 auto; text-align:left; padding:20px 0 80px 0; color:#494949; font-size:14px; line-height:32px;}
.company-content-data span { display:block; font-size:24px; line-height:38px; padding-bottom:30px; font-weight:bold;}
.company-title > div { background:#cc0212;}

.company-main-pro-box { text-align:center;}
.company-main-pro { display:flex; flex-direction:row; flex-wrap:no-wrap; justify-content:space-around; padding-top:10px;}
.company-main-pro > div { width:250px; height:250px; background:url(../../../images/main-pro-bg.png) no-repeat; margin:0 25px; background-size:contain; font-weight:bold; font-size:24px; color:#3e3e3e; text-align:center; line-height:36px; padding:0 15px; display:flex;flex-direction:column; justify-content:center; }
.company-main-pro > div span { display:block; text-align:center; color:#797979; font-size:17px; line-height:30px; font-weight:normal;}

.pro-s { text-align:center; padding:10px 0;}
.rslides_tabs { margin-top:0px;}
.rslides_tabs li { display:inline-block; width:calc(25% - 5px - 3px); 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;}

/*history*/
.history_title{text-align: center;font-size: 24px;color: #cc0212;font-weight: 700;}
.history {display: flex;flex-wrap: wrap;position: relative;z-index: 1;margin: 65px 0px;}
.history::before {content: '';height: 100%;border-left: 1px solid #000000;position: absolute;top: 0;left: 50%;z-index: -2;}
.history::after {content: '';width: 15px;height: 15px;position: absolute;top: 0;left: calc(50% - 6.5px);z-index: -1;background: #2b2b2b;border-radius: 100%;}
.history > div:first-child{margin: 110px 0 0 0;}
.history > div {display: flex;flex-wrap: wrap;position: relative;margin: 10px 0 0 0;width: 100%;}
.history > div.color_01 > div.history_year::after, .history > div.color_01 > div.history_text > div > div.history_date{background: #cc0212;}
.history > div.color_01 > div.history_text > div > div.history_date::after, .history > div.color_01 > div.history_text > div > div.history_date::before{border-top-color: #890d17;}
.history > div.color_02 > div.history_year::after, .history > div.color_02 > div.history_text > div > div.history_date{background: #4a88a8;}
.history > div.color_02 > div.history_text > div > div.history_date::after, .history > div.color_02 > div.history_text > div > div.history_date::before{border-top-color: #234d63;}
.history > div.color_03 > div.history_year::after, .history > div.color_03 > div.history_text > div > div.history_date{background: #023e7b;}
.history > div.color_03 > div.history_text > div > div.history_date::after, .history > div.color_03 > div.history_text > div > div.history_date::before{border-top-color: #09233e;}
.history > div.color_04 > div.history_year::after, .history > div.color_04 > div.history_text > div > div.history_date{background: #8f9939;}
.history > div.color_04 > div.history_text > div > div.history_date::after, .history > div.color_04 > div.history_text > div > div.history_date::before{border-top-color: #60681e;}
.history > div > div.history_year::before {content: '';width: 65px;height: 65px;border-radius: 50%;background-color: #fff;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: -2;background: #fff;box-shadow: rgba(0,0,0,0.4) 2px 2px 5px 0px, rgba(0,0,0,0.4) 1px 1px 6px 0px inset;}
.history > div > div.history_year::after{content: '';width: 88px;height: 88px;border-radius: 50%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: -3;}
.history > div > .history_year{position: absolute;font-size: 18px;font-weight: bold;top:50%;left: 50%;transform: translate(-50%, -50%);z-index: 3;}
.history > div > div.history_text::before{position: absolute;content: '';width: 96px;top: 50%;transform: translateY(-50%);border-bottom: 1px dashed #000000;left: calc(50% - 130px);height: 1px;}
.history > div > .history_text{width: 50%;}
.history > div > .history_text > div{width: calc(100% - 106px);position: relative;z-index: 3;margin: 0 auto 0 0;background: #fff;box-shadow: rgba(0,0,0,0.2) 2px 2px 5px 1px;padding: 20px;}
.history > div > div.history_text > div > div.history_date{position: absolute;left: -12px;z-index: 10;height: 45px;margin: 0;color: #fff;display: none;flex-wrap: wrap;justify-content: center;align-items: center;text-align: center;top: 15px;font-size: 18px;font-weight: bold;width: calc(100% + 24px);}
.history > div > div.history_text > div > div.history_date::before{content: '';width: 0;height: 0;border-top-width: 8px;border-top-style: solid;border-top-color: #14366a;border-left-width: 12px;border-left-style: solid;border-left-color: transparent;position: absolute;bottom: -8px;left: 0;z-index: -1;}
.history > div > div.history_text > div > div.history_date::after{content: '';width: 0;height: 0;border-top-width: 8px;border-top-style: solid;border-top-color: #14366a;border-right-width: 12px;border-right-style: solid;border-right-color: transparent;position: absolute;bottom: -8px;right: 0;z-index: -1;}
.history > div > .history_text > div > p{line-height: 38px;font-size: 18px;}
.history > div:nth-child(2n+2) > div.history_text::before{right: calc(50% - 130px);left: auto;}
.history > div:nth-child(2n+2) > .history_text{margin: 0 0 0 auto;}
.history > div:nth-child(2n+2) > .history_text > div{margin: 0 0 0 auto;}

/*contact*/
.contact-content{display: flex;flex-wrap: wrap;justify-content: center; margin: 50px auto 30px;}
.contact-content > div{width: 45%;padding: 15px;border: 1px #efefef solid;border-radius: 10px;margin: 0 20px;}
.contact-content > div p{color: #0950a2;font-weight: 600;font-size: 18px;padding: 10px 0;}
.contact-content > div ul{padding: 15px 0;}
.contact-content > div ul li{padding-left: 30px;color: #3a3a3a;position: relative;margin-bottom: 10px;}
.contact-content > div ul li a{color: #3a3a3a;}
.contactus-pic{text-align: center;}

.contact-content > div ul li::before{content: '';width: 25px;height: 25px;position: absolute;top: 0;left: 0;}
.contact-content > div ul li:nth-child(1)::before{background: url("../../../images/contactus-add.png") no-repeat;}
.contact-content > div ul li:nth-child(2)::before{background: url("../../../images/contactus-phone.png") no-repeat;}
.contact-content > div ul li:nth-child(3)::before{background: url("../../../images/contactus-fax.png") no-repeat;}
.contact-content > div ul li:nth-child(4)::before{background: url("../../../images/contactus-email.png") no-repeat;}
.contact-content > div:nth-child(2) ul li:nth-child(3)::before{background: url("../../../images/contactus-line.png") no-repeat;}


@media only screen and (max-width: 980px) {
.pro-detail-top > div:nth-of-type(2) > div { width:100%;}
.pro-detail-top > div:nth-of-type(2) > div:last-child { padding:20px 0 0 0;}
.company-content-data span { font-size:20px; line-height:32px; padding-bottom:20px;}

.contact-content > div{width: 80%; margin: 0 auto 20px;}     
}

@media only screen and (max-width: 768px) {
.company-content .path { text-align:left;}
.company-content-data { padding:0 0 40px 0;}
.company-main-pro { flex-direction:column; align-items:center;}
.company-main-pro > div { margin-bottom:20px;}
.history > div{margin: 30px 0 0 0;}
.history::after{left: calc(90% - 7px);}
.history::before{left: 90%;}
.history > div > .history_year{left: 90%;}
.history > div > div.history_text::before{left: calc(90% - 130px);}
.history > div:nth-child(2n+2) > div.history_text::before{right: auto;left: calc(90% - 130px);}
.history > div > .history_text{ width: 90%;}
.history > div:nth-child(2n+2) > .history_text{margin: 0 auto 0 0;}
.history > div:nth-child(2n+2) > .history_text > div{margin: 0 auto 0 0}
}
@media only screen and (max-width: 640px) {
.pro-list > div { width:50%; padding:0 20px 50px 20px;}
.title01 h1 { font-size:17px; min-height:40px;}

.pro-detail-top { align-items:flex-start;}
.pro-detail-top > div:nth-of-type(1), .pro-detail-top > div:nth-of-type(3) { width:40px; padding-top:100px;}
.pro-detail-top > div:nth-of-type(2) { width:calc(100% - 80px); padding:0 10px;}
.arrowbox{height:40px; width:40px; overflow:hidden; margin:0 auto; position:relative;}
.arrow{ width:80px; display:flex; position:absolute; left:-40px; transition:all .4s ease;}
.arrow::before, .arrow::after{ height:40px; width:40px; display:flex; align-items:center; color:#dbdbdb; justify-content:center;}
.arrow::before{content:'NEXT'; font-size:15px; padding-top:5px;}
.arrow::after{content:'>'; left:40px; font-size:50px;}
.arrow:hover{ left:0px; }
.arrow2{ width:80px; display:flex; position:absolute; right:-40px; transition:all .4s ease;}
.arrow2::before, .arrow2::after{ height:40px; width:40px; display:flex; align-items:center; color:#dbdbdb; justify-content:center;}
.arrow2::before{content:'<'; font-size:50px;}
.arrow2::after{content:'PREV'; left:40px; font-size:15px; padding-top:5px;}
.arrow2:hover{ right:0px; }
}
@media only screen and (max-width: 570px) {
.company-top-bg { background-position:-130px 0;}
.company-top-title { width:100%; padding-left:10px; padding-right:10px;}
    
.contact-content > div{width: calc(100% - 20px);}  
.contact-content{ margin: 50px auto 0px;}     
}

@media only screen and (max-width: 430px) {
.history > div > div.history_text > div > div.history_date{display: flex;}
.history > div > .history_text > div{padding: 65px 0px 15px 0px;}
.history > div > .history_text > div > p{padding: 0 20px;}
.history > div > .history_year{font-size: 0px;}
.history > div > div.history_year::before{width: 8px;height: 8px;box-shadow: inherit;}
.history > div > div.history_year::after{width: 16px;height: 16px;background: #fff!important;border: 1px solid;}
.history::after{left: calc(97% - 7px);}
.history::before, .history > div > .history_year{left: 97%;}
.history > div > div.history_text::before, .history > div:nth-child(2n+2) > div.history_text::before{left: auto;right: 7px;}
.history > div > .history_text{ width: 100%;padding: 0 10px;}
.history > div > .history_text > div{width: calc(100% - 45px);}
.history > div > .history_text > div > img{margin-top: 10px;}
.history > div.color_01 > div.history_year::before{background: #cc0212;}
.history > div.color_02 > div.history_year::before{background: #4a88a8;}
.history > div.color_03 > div.history_year::before{background: #023e7b;}
.history > div.color_04 > div.history_year::before{background: #8f9939;}
.history > div.color_01 > div.history_year::after{border-color: #cc0212;}
.history > div.color_02 > div.history_year::after{border-color: #4a88a8;}
.history > div.color_03 > div.history_year::after{border-color: #023e7b;}
.history > div.color_04 > div.history_year::after{border-color: #8f9939;}
}
@media only screen and (max-width: 414px) {
.title01:after { max-width:100%; left:0;}
.pro-list > div { width:100%; padding:0 10px 30px 10px;}
}

@media only screen and (max-width: 320px) {

}