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

body {-webkit-text-size-adjust:100%; margin:0; text-align:center; font-family:"微軟正黑體" , Lato, Arial, sans-serif; font-size:15px; line-height:24px; overflow-x:hidden; }
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+ */}

aside, .main-Box, .top-Box, .menu-Box, .banner-Box, .content-Box, .content2-Box, .footer-Box, .copyright-Box { max-width:1280px; 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;}

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

.banner { background:url(../images/banner-bg.jpg) no-repeat top center; min-height:280px; background-size:cover;}
.side h1 { font-size:24px; color:#2c7eca; margin:45px auto 30px; -webkit-box-reflect: below 1px -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(.5, transparent), to(rgba(3,3,3,.2)));}
.side h1:before,.side h1:after{content: " "; width: 15%; border-top: solid 1px #2b7fc8; display: inline-block; margin:0  10px; padding-bottom: 8px;}


aside { }
aside:after{
    content: " ";
    display: block;
    background: url(../images/aside_bg.svg) no-repeat top center;
    padding: 20px 0;
    background-size: 220px;
    margin-top: 20px;
}
.side_classLink { }
.side_classLink ul { text-align:center;}
.side_classLink ul li { display:inline-block;}
.side_classLink ul li > a{ background: #2c7eca;;min-width:150px; display:inline-block; padding:0 15px; height:34px; line-height:30px;text-align:center; font-size:16px; color:#fff; margin:0 6px 12px 6px;}
.side_classLink ul li > a:hover, .side_classLink ul li > a.current { background:#11416d; color:#fff;}
.side_classLink ul li.current02{ display:none; }
.m_classLink{ display:none;}

#main { color:#545454; font-size:15px; line-height:1.6; padding-bottom: 100px;}
.main-content { padding:0 20px; position:relative;}
.path { text-align:right; padding:18px 0 25px 0;}
.path li { display:inline-block; color:#a1a1a1; font-size:14px; }
.path li a { color:#a1a1a1;}
.path li a:hover { color:#333;}
.path li:after { font-family: FontAwesome;content:"\f105"; display:inline-block; padding:0 3px;}
.path li:last-child:after { content:"";}
.line { background:url(../images/line.gif) repeat-x; height:7px; margin-bottom:55px;}
.page-description { margin:0 auto; padding-bottom:60px;}
.page-description>ul li{list-style-type:disc;margin-left: 20px; }
.description_text,.page-description img{width: calc(100%/2 - 3px); display: inline-block; vertical-align: top;}


.pro-list { padding: 0 20px 50px;}
.pro-list li {position: relative;display:inline-flex; vertical-align:top; width:calc(100%/3 - 40px - 5px); margin:0 20px 40px 20px; border:1px solid #666; padding:20px; }
.pro-list-box {margin: 0 auto;}
.pro-list-box b { font-size:24px; color:#333; display:block; line-height:140%;width: 100%;}
.btn01 {
    width: 120px;
    letter-spacing: 1px;
    text-align: center;
    display: block;
    color: #fff;
    background: #333;
    line-height: 35px;
    font-size: 14px;
    -webkit-transition: all 0.2s ease-out 0s;
    -moz-transition: all 0.2s ease-out 0s;
    transition: all 0.2s ease-out 0s;
    
}
.b_back{
    margin: 0 auto;
}
.btn01-b { margin-top:20px;}
.btn01:hover { background:#ff8300;}
.pro-list-pto { 
	text-align: center;
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 270px;
}

.pro-list-box>.pro-list-pto>p.btn01:before {
    content: " ";
    display: block;
    height: 30px;
    background: #fff;
}

.pro-list-pto img { -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 li:hover { border-color:#ff8300;}
.pro-list li:hover b { color:#ff8300;}
.pro-list li:hover .btn01, .pro-list2-top > div:hover .btn01, .pro-list2 li:hover .btn01 { background:#ff8300;}
.pro-list li:hover img, /*.pro-list2-top > div:hover img,*/ .pro-list2 li:hover img {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
transform: scale(1.1);}
.pro-list-box2 > div:first-child { order:2;}
.pro-list-box2 > div:last-child { order:1;}

/*products-list2*/
.pro-list2-box { padding-bottom:50px; padding-left:20px; padding-right:20px;}
/*.pro-list2-top { display:flex; flex-direction:row; flex-wrap:no-wrap;}*/
.pro-list2-top > div{
    padding: 20px;
    color: #333;
    font-size: 15px;    
    margin-bottom: 50px; 
    background: #eee;


}
.pro-list2-top > div:last-child { padding-left:20px;}
.pro-list2-name {min-height: 100px; font-size:15px; color:#606060; line-height:120%; padding-bottom:5px;}
.pro-list2-name b { display:block; font-size:25px; color:#000; line-height:140%;font-family:Lato, "微軟正黑體" , Arial, sans-serif}
.pro-list2-name p.list_name{display: block; font-size: 18px; letter-spacing: 3px; }
.pro-list2-pto img { }
.pro-list2 li { 
    background: url(../images/prolist_bg.png)no-repeat center bottom;
    background-size: 270px;
    display:inline-block; width:calc(25% - 40px - 5px); margin:0 20px 60px 20px; padding-bottom: 30px;}

/*products-detail*/
.products-detail-top { padding-bottom:30px;}
.products-detail-content { display:flex; flex-direction:row; flex-wrap:no-wrap; justify-content:center;}
.products-detail-content > div:first-child { width:55%; padding-left:70px; padding-right:30px; }
.products-detail-content > div:last-child { width:40%; display:flex; align-item:center; justify-content:center; padding-left:26px; flex-direction:column;}
.products-detail-icon { padding:30px 0;}
.products-detail-icon img { height:50px; display:inline-block; margin:0 12px 12px 0;}
.btn-inquiry {
    min-width: 150px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    border-radius: 10px;
    font-size: 22px;
    display: inline-block;
    margin: 10px 0;
    background: linear-gradient(90deg, #11416d 0%, #2c7eca 100%);
    background: -moz-linear-gradient(90deg, #fe8556 0%, #df3f01 100%);
    background: -webkit-linear-gradient(90deg, #11416d 0%, #2c7eca 100%);
    background: -o-linear-gradient(90deg, #fe8556 0%, #df3f01 100%);
    letter-spacing: 5px;
    transition: all 0.5s ease-out;
}
.btn-inquiry:hover {
background: linear-gradient(90deg, #ff8300 0%, #FFC107 100%);
background: -moz-linear-gradient(90deg, #ff8300 0%, #FFC107 100%);
background: -webkit-linear-gradient(90deg, #ff8300 0%, #FFC107 100%);
background: -o-linear-gradient(90deg, #ff8300 0%, #FFC107 100%);}
.control-btn { width:100%; position:absolute; top:calc(50% - 35px); display:flex; flex-direction:row; flex-wrap:no-wrap; justify-content:space-between; left:0;}
.control-btn a { color:#bebebe;}
.control-btn a:hover { color:#555;}
.control-btn > div:first-child { padding-left:34px; text-transform:uppercase; font-size:16px; font-weight:bold; color:#bebebe; position:relative; left:0px; }
.control-btn > div:first-child i { position:absolute; left:0px; top:-53px; font-size:120px;}
.control-btn > div:last-child { padding-right:34px; text-transform:uppercase; font-size:16px; font-weight:bold; color:#bebebe; position:relative; right:0px; }
.control-btn > div:last-child i { position:absolute; right:0px; top:-53px; font-size:120px;}
.products-detail-bottom { padding-top:50px; padding-bottom:50px;}
.products-detail-title { color:#052f69; font-size:18px; font-weight:bold; padding-bottom:15px; text-transform:uppercase;}
.description-data { max-width:880px; margin:0 auto;}
.hand-scroll { padding:0px 0 0px 0; font-size:14px; color:#df0012; display:none;}
.hand-scroll img { display:inline-block; vertical-align:middle; padding-right:3px;}
.btn-back { text-align:center; padding:40px 0;}

#right_content{
	overflow:hidden;
	padding:0 0 0 25px;
}


/*about*/
#about_text {
    line-height: 22px;
}

#about_text h2 {
    font-size: 18px;
    color: #505050;
    max-width: 720px;
    padding-bottom: 15px;
    line-height: 25px;
    text-align: left;
}

.about2,
.about3,
.about4{
    max-width: 1002px;
    margin: 0 auto
}
.about_pic{margin: 0 10%;
    padding-bottom: 15px;
    width: 100%;}
.about1 {
    background: url(../images/about_03.jpg) no-repeat top right;
    min-height: 586px;
    padding: 0 119px;
}

.about1 img{display: none;}

.about1_wp {
    max-width: 536px;
    padding: 300px 0 0 0;
}

.about1 p {
    border-bottom: solid 1px #505050;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.about3
 {
    margin-top: 70px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.about3text ul {    
    display: inline-block;
    margin-right: 20px;
    padding-left: 20px;
        
}

.about3text ul *{
    list-style: initial !important;
}
.about4{
display: flex;
flex-wrap: wrap;
flex-direction: column;
margin: 15px 0;
}
.about4text {
width:100%;
padding: 10px 0;
margin: 20px 0;
}
.about4 ul{
padding: 0;
margin: 0;}

.about4 li {
    min-width: 90px;
    min-height: 100px;
    display: inline-flex;
    align-items: flex-end;
    justify-content: left;
}

.about4 li:nth-child(1) {
    background: url(../images/about_04-1.jpg)no-repeat top left;
}

.about4 li:nth-child(2) {
    background: url(../images/about_04-2.jpg)no-repeat top left;
}

.about4 li:nth-child(3) {
    background: url(../images/about_04-3.jpg)no-repeat top left;
}

.about4 h3 {
    font-weight: normal;
    font-size: 18px;
}

.about4 h3 span {
    display: inline-block;
    padding-right: 30px;
}
.about4text img{margin: 10px 0;}

.outbox{display: flex;}
.inbox1{width: 50%;}
.inbox2{width: 50%;padding-top: 15px !important;text-align: end;}


.history_all>div{
    display: inline-block;
    vertical-align: top;
}

.history_all>div:first-child{
    width: 180px;
    height: 180px;
    display: inline-flex;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.history_all>div:first-child:after{
    position: absolute;
    content: ' ';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    box-shadow: 0 0 30px 10px rgba(255, 255, 255, 0.8) inset;
}

.history_all>div:nth-child(2){
    width: 60%;
    text-align: left;
    padding-left: 20px;
}

.history_all>div:nth-child(2) strong{
    font-size: 22px;
    letter-spacing: 2px;
    display: table;
    padding-bottom: 5px;
    border-bottom: solid 4px #2c7eca;
    margin-bottom: 8px;

}
.history_all>div:nth-child(2) p{
    line-height: 24px;    
}
.history_all>div:nth-child(2) li{
    padding-left: 10px; 
}

.history_all>div:nth-child(2) li:before{
    content: "\f0da";
    font-family: FontAwesome;
    padding-right: 5px;
    color: #F44336;
}
.history_all {
    margin: 10px 0;
    padding: 24px;
    border-bottom: dotted 1px #ccc;
}

.history-cht {
    margin: 0 auto;
    text-align: center;
}

/*fancybox*/
#gallery .box_list{
    width: calc(100%/4 - 23px);
    border: solid 1px #666;
    display: inline-block;
    text-align: center;
    margin: 10px;
    position: relative;
    cursor: pointer;
    padding: 20px 20px 10px 20px;
}
.box_list span{
    display: block;
    padding: 10px;
    letter-spacing: 1px;
    margin-right: 0
}
.box_list span:after{
    content: "\f152";
    font-family: FontAwesome;
    margin-left: 10px;

}

#gallery .box_list:hover{
    border-color: #ff8300;
    color: #ff8300;
}

.box_list img { -webkit-transition: all 0.2s ease-out 0s;
-moz-transition: all 0.2s ease-out 0s;
transition: all 0.2s ease-out 0s;}

.box_list:hover img{
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    transform: scale(1.1);
 }

.box_list .photo_first {
    display: flex;
    justify-content: center;
    height: 200px;
    align-items: center;
    width: 200px;
    padding: 10px;
    margin: 0 auto;
    overflow: hidden;
}

.fancybox-slide--iframe .fancybox-content {
    max-width  : 80%;
    max-height : 80%;
    margin: 0;
}
.fancybox-thumbs {
  top: auto;
  width: auto;
  bottom: 20px;
  left: 10px;
  right : 10px;
  height: 100px;
  background: transparent;
}

.fancybox-thumbs > ul > li {
  border-color: transparent;
}

.fancybox-container--thumbs .fancybox-caption-wrap, 
.fancybox-container--thumbs .fancybox-controls, 
.fancybox-container--thumbs .fancybox-slider-wrap {
  right: 0;
  bottom: 90px;
}
/*features*/
.owl-dot {
    width: 10px;
    height: 10px;
    background: #b1b1b1;
    display: inline-block;
    margin: 5px;
    border-radius: 10px;
}
.owl-dots {
    text-align: center;
    margin-top: 20px;
}
.owl-dot.active {
    background: #145c9e;
}

.f_img {
    width: 350px;
    margin: 0 auto;
}

.features_list{
    min-height: 700px;
    border: solid 1px #fff;
    -webkit-transition: all 0.2s ease-out 0s;
    -moz-transition: all 0.2s ease-out 0s;
    transition: all 0.2s ease-out 0s;

}
.features_list .title strong{
    color: #F44336;
    font-size: 20px;
    letter-spacing: 1px;
}



.features_list .title{
    text-align: center;
    margin-bottom: 15px;
}
.features_list .content{
    padding:0 10px;
    line-height: 26px;
}

.features_list .content strong{
    color: #145c9e;
    font-size: 16px;
    margin: 11px 0;
    padding: 3px 0;
    display: block;
    border-bottom: dotted 1px;
}
.features_list:hover{
    border: solid 1px #145c9e;

}
@media only screen and (max-width: 1280px) {
    .about1_wp {   padding: 280px 0 0 0;}
    .about1{ background-position-x: -74px}
    .about1,.about2,.about3,.about4 { padding:0 ;}
.about_pic{    margin: 0 3%;}
}
@media all and (max-width: 800px) {
    .fancybox-thumbs {
        display: none !important;
    }

    .fancybox-container--thumbs .fancybox-controls,
    .fancybox-container--thumbs .fancybox-slider-wrap,
    .fancybox-container--thumbs .fancybox-caption-wrap {
        bottom: 0;
    }
.about_pic{    margin: 0;}
}

@media only screen and (max-width: 980px) {
.about_list{
	width:calc(100% / 4 - 3px);	
    }
#gallery .box_list{
    width: calc(100%/3 - 23px);
    }
    .about3{
        display: inline-block;
        text-align: center;
    }

    .about4,.about4text ,.about3text{ margin-top: 25px; }
    .about3text li{text-align: left;}
    .about4 h3 span:last-child{padding: 0}
    .about4 h3 span{padding-bottom: 5px;}    

}

@media only screen and (max-width: 768px) {
aside:after {display: none;}
.path { text-align:left;}
.banner { min-height:inherit; padding:80px 0;   }
.side h1 { font-size:1.5rem; text-transform:inherit;}
.aside-title { display:none;}
.side_classLink { display:none;}
.m_classLink{ display:block; position:relative;}
.m_classLink a.main{ display:block; font-size:20px; position:relative; padding: 10px 15px; color:#fff; text-align:left; cursor:pointer; 
background: linear-gradient(90deg, #22427b 0%, #22427b 100%);
background: -moz-linear-gradient(90deg, #22427b 0%, #22427b 100%);
background: -webkit-linear-gradient(90deg, #22427b 0%, #22427b 100%);
background: -o-linear-gradient(90deg, #22427b 0%, #22427b 100%);}
.m_classLink a.main>b:after{content: "選單";letter-spacing: 2px;}
.m_classLink a.main i{ display:block; font-size:20px; position:absolute; right:20px; top:50%; margin-top:-11px; color:#fff; font-style:normal; font-family:FontAwesome;}
.m_classLink ul{ display:none; width:100%;  position:absolute; z-index:999; background:rgba(255, 255, 255, 0.8);; border-width:0; border-color:#000; border-style:solid; }
.m_classLink ul li { display:block; margin:0 0; padding:0;}
.m_classLink ul li > a{ display:block; line-height:180%; text-align:left; font-size:16px; color:#000000; padding:10px; border-bottom:1px solid rgba(0,0,0,.1); }
.m_classLink ul li > a:hover, .m_classLink ul li > a.current { background:rgba(44, 126, 202, 0.5); color:#fff;}
.m_classLink ul li.current02{ display:none; }
.path { text-align:left;}
.pro-list, .pro-list2-box { padding-left:0; padding-right:0;}
.pro-list li { width:100%; margin:0 0px 40px 0px; border:2px solid #3b3b3b; padding:30px; min-height:inherit;}
.pro-list-box2 > div:first-child { order:1;}
.pro-list-box2 > div:last-child { order:2;}
.pro-list2-top { flex-wrap:wrap}
.pro-list2-top > div { width:100%;}
.pro-list2-top > div:first-child { margin:0 0 20px 0; padding:20px; min-height:inherit; max-width:inherit;}
.pro-list2-top > div:last-child { padding:20px;}
.pro-list2 {}
.pro-list2 li { width:calc(50% - 40px - 5px); }
.products-detail-content { flex-wrap:wrap;}
.products-detail-content > div:first-child { width:100%; text-align:center; padding:0; }
.products-detail-content > div:last-child { width:100%; padding-left:0px;}
.control-btn { position:inherit; top:auto; border-top:1px solid rgba(0,0,0,.2); margin-top:30px; padding:50px 0; display:none; }
.btn-back { padding-top:20px;}
#gallery .box_list{width: calc(100%/2 - 23px);border: solid 2px #666;}
.side h1:before, .side h1:after{display: none;}

.btn01-b {margin: 20px auto;}
.pro-list-pto{height: auto;}
.products-detail-bottom { padding:0;}
.pro-list2-name { margin-top: 50px;}
.description_text,.page-description img{width: 100%;display: block;}


}

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

	.btn01{position: initial;width: auto;}
/*    .side h1{font-size: 1.1rem;}*/
    .hand-scroll { display:block;}
    .box_list .photo_first {width: auto;height: 130px;overflow: hidden;}
    .history_all>div:nth-child(2){
        width: 100%;
        padding-left: 0;
        padding-top: 20px;
    }
    .history_all>div:first-child {
    width: 250px;
    height: 250px;
    }
    .history_all {padding: 15px;}
    .banner { background-position-x: -230px;}


}
@media only screen and (max-width: 570px) {
    .pro-list2 li { width:100%; margin:0 0px 40px 0px; }
    .pro-list2 li { background: inherit;}
    .about1_wp{padding: 0}
    .about1{background: none;min-height: inherit;}
    .about1 img{display: block;}
    #about_text h2{padding: 15px 0;}
    .about3text ul {   padding-left: 0; }
    .about4 li {min-width: 77px;margin: 5px 10px;}
    .about4text{width: 100%;}
    .about4 h3 span{display: block;padding: 0}
    .about4 h3 {  padding-bottom: 15px;}
    .about4 ul{padding:0!important;}
    .about2,.about3,.about4{ padding-top: 40px; margin-top: 0;}

}




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

}

@media only screen and (max-width: 480px) {.main-content select{width: 100%;}}
@media only screen and (max-width: 414px) {
.side h1 { font-size: 1.1rem;}
.about3text ul { display: block;  padding-left: 20px; margin: 0;}


}

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


 .pro-list-pto{height: auto;}
}


/* vedio iframe */

.ctrl_ifra_yt {
  display: flex;
}
.vedio_box{height: 350px;width: 48%;}
@media only screen and (max-width:1024px){
.vedio_box{height: 280px;}
}
@media only screen and (max-width:800px){
.ctrl_ifra_yt {
  flex-wrap: wrap;
}
.vedio_box{width: 85%;height: 350px;margin-right: 0;margin-bottom: 15px;}
}
@media only screen and (max-width:600px){
.vedio_box{height: 300px;width: 100%;}
}
@media only screen and (max-width:414px){
.vedio_box{height: 200px;}
}