@media screen and (min-width: 1668px) {	
    .index_contain .container,
    .listlaser_content .container{
        max-width: 1336px;
    }



}

@media screen and (max-width: 1667px) {	
    .index_contain .container,
    .listlaser_content .container{
        max-width: 1366px;
    }


    

}

@media screen and (max-width: 1280px) {	
    .index_contain .container{
        max-width: 1080px;
    }

    

}

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

   

}

section,div{
    font-family: Arial, "微軟正黑體", Helvetica, sans-serif;
}

.page_content_s{
    width: 1366px;
    margin: 0 auto;
}

.listpage_bg{
    background-color:#f5f5f5 ;

}


/*index*/

.banner,
.sec-banner{
    font-family: Arial, "微軟正黑體", Helvetica, sans-serif;
    position: relative;
    background-color: #000;
}

.banner .slogen,
.sec-slogen{
    position: absolute;
    top:50%;
    left:50%;
    margin-top: -2%;
    margin-left: 10%;
    margin-right: 1%;
}

.banner .slogen ul{
    list-style: none;
}

.banner .slogen ul li{
    font-size: 22px;
    color: #fff;
    padding-top: 4px;
}

.banner .slogen ul li:before{
    display: inline-block;
    content:'';
    width:0px;
	height:0px;
	border-style:solid;
	border-width:8px 0 8px 8px;
	border-color: transparent transparent transparent #00ccff;
	margin-right:8px;

}



.index_contain{
    font-family: Arial, "微軟正黑體", Helvetica, sans-serif;
    background-color: #000;
}


.index_contain h3{
    font-size: 36px;
    text-align: center;
    padding: 60px 0;
    color: #fff;
}

.index_contain a{
    display: block;
    opacity: 1;
    transition: all 0.3s ease;
    border: 1px solid #000;
    border-radius:10px; 
    background-color: #000;

}

.index_contain a:hover{
    opacity: 0.8;
    border: 1px solid #2db1f3;
    background-color: #2db1f3;
    text-decoration: none;
}

.index_contain a img{
    border-radius: 10px;
}

.index_contain a p{
    text-align: center;
    font-size: 20px;
    color: #fff;
    padding: 10px 0;
    transition: all 0.23s ease;

}



.sec-slogen h4,
.sec-slogen p{
    color: rgb(207, 207, 207);
    text-align: center;

}



/*content*/

.page_contain h3{
    font-size: 36px;
    color: #133656;
}

.page_contain h4{
    color: #2f95c8;
    font-size: 32px;
}

.listpage_bg h3{
    font-size: 40px;
    color: #133656;
}


/*about*/

.about_title{
    align-items: center;
    
}


/*contact*/

.mail_item h5{
    background-color: #2db1f3;
    color: #fff;
    border-radius: 12px 12px 0 0;
    padding: 20px 0 20px 0;
}

.mail_item .con_cards{
    background-color: #e6e6e6;
    border-radius: 12px 12px 12px 12px;
    padding: 0 0 40px 0;
}

.mail_btn a{
    display: block;
    border: 1px solid #2db1f3;
    color:#2db1f3;
    width: 60%;
    text-align: center;
    padding: 10px 0;
    margin: 0 auto;
    border-radius: 12px;
    transition: all 0.25s ease;
}

.mail_btn a:hover{
    text-decoration: none;
    color:#fff;
    background-color: #2db1f3;
}

.map_area{
    background-color:#c8c8c8;
}

.map_ctrl iframe{
    mix-blend-mode: luminosity;
}

/*technology*/

.technology_area a{
    display: block;
    background-color: #000;
    opacity:1;
    transition: all 0.3s ease;
}

.technology_area a:hover{
    text-decoration: none;
}

.technology_area a:hover .tec_btn{
    opacity: 0.82;
    transition: all 0.3s ease;
}



.tec_btn img{
    background-color: #000;
}

.tec_btn_info{
    display: flex;
    align-items: center;
    border-right:0px solid #2db1f3;
    transition: all 0.3s ease
}

.technology_area a:hover .tec_btn_info{
    border-right:15px solid #00aaff;
}

.tec_btn_info_in{
    padding-left:50px;
}

.tec_btn_info_in h5{
    color: #15ecff;
}


.tec_btn_info_in ul{
    list-style: none;
    padding-left: 0;
}

.tec_btn_info_in ul li{
    color: #fff;
}


/*technology item*/


.listpage_item .list-group{
    flex-direction:row;
}

.listpage_item .list-group-item:first-child{
    border-top-left-radius: 0; 
    border-top-right-radius: 0;
    margin-left: 0;
}

.listpage_item  .list-group-item:last-child{
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    margin-right: 0;
}

.listpage_item .list-group-item{
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    margin: 0 10px;
    background-color:#f5f5f5 ;
    border:1px solid #115374;
    color: #115374;
}

.listpage_item .list-group-item.active {
    background-color: #115374;
    border-color: #115374;
}

.list_content{
    width: 100%;
    background-color: #fff;
}

.list_content h5{  
    font-size: 36px; 
    text-align: center;
    color:#115374 ;
    border-bottom:1px solid #88a9b9;
}

.list_content span{
    font-size: 18px;
    text-align: center;
    color:#115374 ;
}

.list_content p{
    padding: 20px;
    font-size: 18px;
    color:#115374 ;
    text-align: center;
    margin-bottom: 0;
}

.listlaser {
    align-items: center;
}

.listlaser p span{
    display: inline;
    vertical-align:40%;
    font-size:8px; 
    
}

.list_content h6{
    color:#115374 ;
    font-size: 22px;
    padding: 0 20px;
}


.list_content li{
    
    font-size: 18px;
    color:#115374 ;
}

.list_title{
    width: 100%;
    background-color:#dee7f0;
    color: #0f416b;
    
    padding: 16px;
}

.list_title h5{
    font-size: 28px;
    border:none;
}



/*news*/

.newsblock{
    width: 100%;
 }
 
 .newsinfo{
     padding: 12px;
     border:1px solid #d4d4d4;
 }
 
 .newsimg{
     display: flex;
     align-items: center; 
 }
 
 .newstext{
     position: relative;
 }
 
 .newstext p{
     color:#747474 ;
 }
 
 .newstext h5{
     color: #009cdd
 }
 
 .newstext a{
     position: absolute;
     width: 100px;
     height: 30px;
     text-align: center;
     text-decoration: none;
     line-height: 30px;
     background-color: #009cdd;
     color: #fff;
     border-radius: 15px;
     bottom: 10px;
     right: 10px;
     opacity: 1;
 }
 
 .newstext a:hover{
     text-decoration: none;
     color: #fff;
     opacity: 0.85;
 }
 
 .newslist{
     text-align: center;
 }
 
 .newslist h5{
     width: 100%;
     height: 40px;
     font-size: 22px;
     line-height: 40px;
     color: #000;

 }
 
 
 .newslist ul{
     list-style: none;
 }
 
 .newslist ul li{
     height: 40px;
 }
 
 .newslist ul li a{
     display: block;
     font-size: 18px;
     width: 100%;
     height: 40px;
     color:#000;
     line-height: 40px;
     border-bottom: 1px solid rgba(255, 255, 255, .5);
     text-decoration: none;
     background-color: #fff;
     transition: all 0.25s ease;
 
 }
 
 .newslist ul .active a{
     color: #fff;
     background-color: #ffc623;
 }
 
 .newslist ul li a:hover{
     color: #000;
     background-color: #ffe18e;
 }
 
 .newslist ul .active a:hover{
     color: #fff;
     background-color: #ffc623;
 }





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

    .banner .slogen,
    .sec-slogen{
        position: absolute;
        top:30%;
        left:50%;
        margin-top: -2%;
        margin-left: 10%;
        margin-right: 1%;
    }

    .banner .slogen ul li{
        font-size: 18px;
        color: #fff;
        padding-top: 4px;
        
    }

    .page_content_s{
        width: 100%;
        margin: 0 auto;
    }

    .list_content h5{  
        font-size: 28px; 
        text-align: center;
        color:#115374 ;
        border-bottom:1px solid #88a9b9;
    }

    /*news*/

    .newslist h5{
        color:#009cdd ;
        border-bottom:1px solid transparent;
        background: #009cdd;
        color: #fff;
    }
    
    

}



@media screen and (max-width: 767px) {	
    
    /*index*/

    .index_contain a{
        display: block;
        opacity: 1;
        transition: all 0.3s ease;
        border: 1px solid #000;
        border-radius:0px; 
        background-color: #000;
    
    }
    
    .index_contain a:hover{
        opacity: 0.8;
        border: 1px solid #000;
        background-color: #000;
        text-decoration: none;
    }

    .index_contain a img{
        border-radius: 0px;
    }

    .index_contain h3{
        font-size: 28px;
        text-align: center;
        padding: 40px 0;
        color: #fff;
    }

    
   /*content*/

   .listpage_item .list-group{
    flex-direction:column;
}
    

.listpage_item .list-group-item:first-child{
    margin:10px 10px;
}

.listpage_item .list-group-item{
    border: 1px solid #d4d4d4;
    margin: 8px;
}

   .page_contain h3{
    font-size: 28px;
    color: #133656;
}

.page_contain h4{
    color: #2f95c8;
    font-size: 28px;
}

.listpage_bg h3{
    font-size: 28px;
    color: #133656;
}

.list_content h5{  
    font-size: 22px; 
    text-align: center;
    color:#115374 ;
    border-bottom:1px solid #88a9b9;
}

.list_content p{
    padding: 16px;
    font-size: 16px;
    color:#115374 ;
    text-align: center;
    line-height: 1.5;
}

.list_content h6{
    color:#115374 ;
    font-size: 20px;
    padding: 0 20px;
}


.list_content li{
    
    font-size: 16px;
    color:#115374 ;
}

.list_title{
    width: 100%;
    background-color:#dee7f0;
    color: #0f416b;
    
    padding: 16px;
}

.list_title h5{
    font-size: 20px;
    border:none;
}




}