@charset "utf-8";
/* CSS Document */
* {
    margin: 0;
    padding: 0;
}
html, body, form {
    height: 100%;
}
/*#site2 {
  font-family: "Microsoft JhengHei", "微軟正黑體", "新細明體", 'Open Sans', sans-serif, Helvetica, Arial;
  font-size: 16px;
  color: #222;
  margin: 0;
  padding: 0;
  background-color: #808080;
  line-height: 2.5rem;
  letter-spacing: 0.035em;
  height: 100vh;
}
*/
body {
    font-family: "Microsoft JhengHei","微軟正黑體", "新細明體", 'Open Sans', sans-serif, Helvetica, Arial;
    font-size: 16px;
    color: #222;
    margin: 0;
    padding: 0;
    background-color: #808080;
    line-height: 2.5rem;
    letter-spacing: 0.035em;
    height: 100%;
    height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
th,
tr,
td,
span,
ul,
ol,
li,
time,
div,
a,
select,
option,
input {
    font-family: "微軟正黑體", "新細明體", 'Open Sans', sans-serif, Helvetica, Arial;
    /*font-size: 16px;*/
    text-decoration: none !important;
    /*color: #333;*/
}
ul,
ol {
    padding: 0;
    margin: 0;
    list-style: none;
    list-style-type: none;
}
.mb_30 {
    margin-bottom: 30px;
}
img {
    border: 0;
}

.img-responsive {
    width: 100%;
    height: auto;
}
a {
    -webkit-transition: 0.2s ease-in-out all;
    -moz-transition: 0.2s ease-in-out all;
    -o-transition: 0.2s ease-in-out all;
    transition: 0.2s ease-in-out all;
    text-decoration: none;
}

section {
    overflow: hidden;
}

a:visited {
    color: #fff;
    text-decoration: none;
}

a:hover,
a:focus {
    color: #fff !important ;
    outline: none;
    text-decoration: none;
}
.banner_div {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding:0;
    overflow:hidden;
}
.banner {    
    z-index: 1;
    width: 100%;
    margin: 0;
    padding: 0; 
}
    .banner img {
        width: 100%;
        max-width: 1280px;
        height: auto;
    }
	
	  .page_main, .banner, .container, footer {
        width: 100%;
        max-width: 1280px;
        padding-right: 0;
        padding-left: 0;
        margin-right: auto;
        margin-left: auto;
    }
	
	
	
	/*---------------------------------------------footer-----------------------------------*/

   footer {
    padding: 10px;
    margin: 0;
    color: #fff;
    background-color: #222
}

    .page_main {
        height: 100%;
        /*overflow :hidden;*/
    }

@media (max-width: 1024px) {
    .page_main {
        width: auto;
        margin-right: 0;
        margin-left: 0;
    }

    .banner,
    .page_main,
    footer {
        width: auto;
        margin-right: auto;
        margin-left: auto;
    }
}
@media (max-width: 768px) {
    .page_main {
        height: auto;
        min-height: initial;
    }
}
    .container {
        margin: 0;
        padding: 0 15px 30px;
        width: 100%;
        max-width: 1280px;
       /* min-height: 500px;*/
        color: #fff !important;
        background-image: url(../images/bg.png);
        background-size: cover;
    }
h1 {
    font-size: 2.5rem; /*40px,30pt*/
    margin-top: 30px;
    margin-left: 2rem;
}
h3 {    
    margin-left: 2rem; 
}

.sub_title {    
    padding-left: 2rem;   
}
@media (max-width: 768px) {
    .sub_title {
        padding-left:4rem;
    }
}
    .container p {     
        padding: 0 30px ;
    }

    .container ul {
        position: relative;
        padding: 0 45px;
        list-style-type: square;
    }

    .container ul li {
            color: #fff;
            margin-bottom: 1rem;
    }
    .row {        
        overflow: hidden;
    }

    @media (max-width: 768px) {     
        .container ul {
            padding: 0 30px 30px 90px;
        }
    }

    @media (max-width: 425px) {
        .container ul {
            padding: 0 10px 10px 60px;
        }
    }
@media (max-width: 375px) {
    .container {
        width:100%;
        max-width :375px;
        margin: 0;
        padding: 0;
    }
}
@media (max-width: 360px) {
    .container {
        width: 100%;
        max-width: 360px;
        margin: 0;
        padding: 0;
    }
}
@media (max-width: 320px) {
    .container {
        width: 100%;
        max-width: 320px;
        margin: 0;
        padding: 0;
    }
}
@media (max-width:240px) {
    .page_main {
        width: 100%;
        max-width: 240px;
        margin: 0;
        padding: 0;
    }
    .container ul {
        position: relative;
        padding: 0 15px 15px 45px;
        list-style-type: square;
    }
}

    .img_border {
        width: 340px;       
        border: 1px solid #808080;
        padding: 10px;
        text-align: center;
        margin: 5px auto 30px;
    }
	
	
	 @media (max-width: 1024px) {
		.img_border {
        width: 340px;       
        border: 1px solid #808080;
        padding: 10px;
        text-align: center;
        margin: 5px auto 30px;
    } 
	 }
	 

    @media (max-width: 1024px) {
        .img_border {
            width: 280px;
            height: auto;
            margin-bottom: 15px;
        }
    }

    @media (max-width: 320px) {
        .img_border {
            width: 250px;
            height: auto;
        }
    }

    @media (max-width: 280px) {
        .img_border {
            width: 220px;
            height: auto;
        }
    }

ul.default {
    list-style-type:square
}

@media (max-width: 768px) {
    .container ul {       
        padding: 0 15px 15px 45px;       
    }
}
	
	
/*-----------sites2--------*/

	.logo{
	position: absolute; top:50px; left:50px; /*background-color:#F60;*/ z-index:999; width:100px;
		}
		
	
	.logo img{
		width:100%;
		max-width:100px;
		height:auto;
		}
	
	/*
	#building .container {
    margin: 0;
    padding: 0 15px 300px;
    background-image: url(../images/bg3.png);
   	background-size: 100% auto;
	background-position: center bottom;
	background-repeat: no-repeat;
	background-color: #fff!important;
	color:#333 !important;
}*/
			
		
/*頁面主標題置中*/
.page_title h1{
	margin: 4rem auto ;
	font-size:2.5rem;
	font-weight: bold;
	color:#333;		
	padding:0 4rem;
	/*text-align:center;*/
	
}

.page_content{	
 clear:both;
	color:#333 !important;
	line-height: 3rem !important;
	min-height: 420px;
}
.page_content ul li , .page_content p{
	/*font-size: 16px;*/
	color:#333 !important;
	line-height: 3rem !important;
}
.page_content p span, .page_content span.font_blue{
	color:#063DD4
}
.page_content span.font_red{
	color:#ff0000;
	font-style: italic;
}

.page_content span.font_red_noitalic{
	color:#c30d0d;	
}

.page_content span.font_green_noitalic{
	color:#008000;	
}


.how_use{
	/*float:left; */
	width:100%;
	max-width:340px;
	margin:10px auto 5px; 
	padding:5px 18px ; 
	text-align:center; 
	background-color: #333; 
	color:#fff; 
	/*border: 1px solid #666*/
}
.how_use a{
	color:#fff; 
}
.how_use a:hover{
	color:#ff0000 !important; 	
}

@media (max-width: 1024px) {
	
	.how_use{	
	padding:5px 10px ; 
		text-align:left;
}  
}

@media (max-width:960px) {
	.how_use{	
	margin:20px 3px 0 6px; 
}
   
}

@media (max-width:375px) {
	.how_use{	
	margin:20px 3px 40px 6px; 
}
   
}
@media (max-width:320px) {
	.how_use{	
	padding:5px 10px ; 
}
   
}
@media (max-width:280px) {
	.how_use{	
	width:100%;	 
	margin:20px 0px 0px 0px;
}
 
}


.page_content_building{	
	color:#333 !important;
	line-height: 3rem !important;
	min-height: 400px;
}
.sites2_bg2{
 /* max-width: 1280px; */  
  background-image: url(../images/bg_smart.png);
  background-size: 100% auto;
	background-position: center bottom;
	background-repeat: no-repeat;
	background-color: #fff;
	color:#333 !important;
}

.sites3_bg3{
 /* max-width: 1280px; */  
  background-image: url(../images/bg_smart_b.png);
  background-size: 100% auto;
	background-position: center bottom;
	background-repeat: no-repeat;
	background-color: #fff;
	color:#333 !important;
}

.sites3_bg3{
 /* max-width: 1280px; */  
  background-image: url(../images/bg_smart_b.png);
  background-size: 100% auto;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-color: #fff;
  color:#333 !important;
}

@media (max-width: 1190px){	

.sites3_bg3{
background-image: url(../images/bg_smart_b.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #f9fcfd;
}  	
}	



.webname2 {
  position: absolute;
  top: 60px;
  left: 180px;
  color: #333;
  font-size: 44px;
  font-family: "微軟正黑體";
  font-weight:bold;
  /*	line-height: 4.5rem;*/
}
.sub_name2 {
  color: #333;
  font-size: 28px;
  font-family: "微軟正黑體";
  /*margin-top: 20px;
	margin-left: 30px;*/
  position: absolute;
  top: 104px;
  left: 190px;
  font-weight:bold;
}


.banner_pfc{
	width:100%;
	max-width: 297px;
	position: absolute;
	top:55px;
	right:10px;
}

@media (max-width: 1160px){	
		
	.banner_pfc{
	width:100%;
	max-width: 250px;
	position: absolute;
	top:65px;
	right:50px;
}	

	
}

@media (max-width: 1024px){
	.banner_pfc{
	width:100%;
	max-width: 22%;
	position: absolute;
	top:55px;
	right:50px;
}	
	
}

@media (max-width: 960px){
	.banner_pfc{
	width:100%;
	max-width: 20%;
	position: absolute;
	top:55px;
	right:45px;
}	
	
}
/*640時圖及文字不呈現*/
@media (max-width: 640px){
	.banner_pfc{
	display:none;
}	
	
}

.page_content{	
	width:100%;
	margin:0 auto;
	padding:0 30px;
	/*color:#63F;*/
	line-height: 3rem !important;
	min-height: 400px;
}



@media (max-width: 960px){	
.logo{
	left:75px;
	/* top:50px;*/
		width:50px !important;
		height:auto;
		}

.webname2 {
  position: absolute;
  top: 45px;
  left: 160px;
  color: #333;
  font-size: 40px;
  font-family: "微軟正黑體";
  /*	line-height: 4.5rem;*/
}
.sub_name2 {
  color: #333;
  font-size: 28px;
  font-family: "微軟正黑體";
   position: absolute;
  top: 85px;
  left: 165px;
}


/*頁面主標題置中*/
.page_title h1{
	margin: 2rem auto ;
	font-size:2.5rem;
	font-weight: bold;
	color:#333;		
	padding:0 4rem;
	text-align:center;
	
}


}
@media (max-width: 640px){
	
.webname2 {  
  font-size: 30px;  
}
.sub_name2 {  
  font-size: 22px ; top: 80px; 
}
}


@media (max-width: 480px){

  .page_title h1{	
	font-size:2rem;
}	
	
.webname2 { 
  top: 60px;
  left: 160px;
  font-size: 26px;   
}
.sub_name2 {  
  font-size: 26px ; 
  top: 60px;
  left: 270px ;
}

}
@media (max-width: 425px){	
.webname2 { 
  top: 50px;
  left: 130px;  
}	
.sub_name2 { 
  top: 50px;
  left: 240px ;
}
}

@media (max-width: 960px){
.container {
    width: 100%;
    max-width: 960px;
    margin: 0;
    padding: 0 0 150px 0;
}
}

@media (max-width: 375px){
.container {
    width: 100%;
    max-width: 375px;
    margin: 0;
    padding: 0 0 60px 0;
}
.logo{
	left:220px;	
	top:40px;
		width:30px !important;
		height:auto;
		}
.webname2 { 
  top: 45px;
  left: 110px;  
}
.sub_name2 { 
  top: 40px;
  left: 220px ;
}
}



@media (max-width: 320px){
.logo{
	left:200px;	
	top:40px !important;
		width:25px !important;
		height:auto;
		}
.webname2 { 
  top: 40px;
  left: 100px;  
  font-size:20px !important;
}
.sub_name2 { 
  top: 40px;
  left: 185px ;
  font-size:20px !important;
}
}

@media (max-width:280px){
	
  .page_title h1{	
	font-size:1.75rem;
}	
.logo{
	left:180px;	
	top:35px !important;
		width:25px !important;
		height:auto;
		}
		.webname2 { 
  top: 35px;
  left: 100px;    
}
.sub_name2 { 
  top: 35px;
  left: 185px ; 
}
}

@media (max-width:240px){
		
.logo{
	left:60px !important;	
	top:32px !important;
		width:20px !important;
		height:auto;
		}
		.webname2 { 
  top: 30px;
  left: 80px;    
  font-size:18px !important;
}
.sub_name2 { 
  top: 30px;
  left: 150px ;
  font-size:18px !important; 
}
}


/*----------------網站3智慧製造解決方案------------------------------*/
.page_content ul li , .page_content p{
	/*font-size: 16px;*/
	color:#333 !important;
	line-height: 3rem !important;
}
.page_content p span, .page_content span.font_blue{
	color:#063DD4
}
.page_content span.font_red{
	color:#ff0000;
	font-style: italic;
}




/*聯絡我們*/
.company_name{
	margin: 4rem 30px 2rem; font-weight: bold; font-size:3rem;color:#333; padding:0 !important;
	text-shadow: 0px 4px 3px rgb(0 0 0 / 30%), 0px 4px 13px rgb(0 0 0 / 10%), 0px 8px 23px rgb(0 0 0 / 10%);
}
.conpany_ul{
	list-style: none !important ; list-style-type: none !important; padding:0 !important ;margin-left: 15px;
}
.conpany_ul li i{
	margin: 0 15px;
}
.conpany_ul li{
	display:inline-block; margin-bottom:1.2rem;color:#222 !important; width:100%;
}
/*圖片*/
.con_ul{
	width:100%; list-style: none !important ; list-style-type: none !important; padding:0 15px !important;
}
.con_ul_li{
	float:left;width:46%; margin-right: 15px; text-align: center;
}
.con_ul_li p{
	font-weight: bold; color:#333; font-size: 18px !important ;
}
.con_ul_li img{
	border: 1px solid #9E9A9A;padding:2px;
}


@media (max-width:1024px) {
.con_ul{
	float:none; width:100%; margin:0;  padding:0 !important; 
}
	.con_ul_li{
	float:left; margin: 0; text-align: center;/*background-color:#CC3;*/ 
}
}
@media (max-width:1000px) {
	.con_ul_li{
	float:left; width:45.5%!important;  margin: 0; text-align: center;/*background-color:#CC3;*/ 
}
}


@media (max-width:960px) {
	.company_name{
		margin: 4rem 0 2rem 50px; 
}

.conpany_ul{
		width:90%; margin:0 ;
}
.conpany_ul li{
	display:block; margin: 0 0 5px 50px; 
}

.con_ul{
	float:none; width:80%; margin:20px auto 20px; padding:0 5px;
}
	.con_ul_li{
	float:left;width:45%; margin: 0 10px 0 0; text-align: center;/*background-color:#CC3;*/ 
}
}

@media (max-width:640px) {
	.company_name{
		margin: 2rem 0 1.5rem 50px; 
}	
	.conpany_ul li {
	padding:0 0px; 
}

.con_ul{
	float:none; width:90%; margin:10px auto 20px; padding:0 5px;
}
	.con_ul_li{
	float:left;width:45%; margin: 0 10px 0 0; text-align: center;/*background-color:#CC3;*/ 
}
}
@media (max-width:540px) {
.con_ul{
	clear: both;
	float:none; width:98%; margin:0; padding:0;
}

	.con_ul_li{
	 width:90%; margin: 0 5px 0 15px; text-align: center;
}
	.con_ul_li p {
	margin-bottom: 30px;
}
}
@media (max-width:480px) {
.container ul {
    padding:0  ;
}
.company_name{
		margin: 2rem 0 1.5rem 50px; font-size: 2.25rem;
}
.conpany_ul{
		width:90%; margin:0 auto;
}
.conpany_ul li{
	display:block; margin: 0 0 5px 10px; border:1px dashed #588ba0; padding:5px ;
}	
.con_ul{
		width:100%;
	margin:15px auto 0 ; padding: 0;
}
.con_ul_li{display:inline-block;
	  margin: 0 0 15px 15px; 
}
}
@media (max-width:414px) {	
		.conpany_ul{
		width:100%; margin:0 ;
}
		.con_ul{
	  float:none !important ; width:80% !important; margin: 0 auto; /*background-color:#CC3;*/
}
	.con_ul li.con_ul_li{
		clear: both;
	float:none;width:100% !important; margin: 15px auto 0 !important; text-align: center !important;
}
	
}