@charset "utf-8";
/*2024 top one CSS Document */
@import url("bootstrap-grid.css");


* { margin:0; padding:0;}
iframe{border: 0px;display: block;}

@media only screen and (max-width: 991px) {
.mobile{display:block;}
.desktop{display:none;}
}

@media (min-width: 992px) {
.mobile{display:none;}
.desktop{display:block;}
}

@media only screen and (min-width: 992px) {
  .dropdown:hover .dropdown-menu {
    display: block;

  }
}

@media only screen and (max-width: 991px) {
#container{width:100%;height:100% !important;margin:0 auto;padding: 0 1.5em;}
#container:after {content:''; clear:both; display:block;}	

#nav_container{position:fixed;z-index:1030;width:100%;top:0;left:0;margin:0 auto;padding:0 ; height: 76px;/*background: #454585;*/}  		
}

@media screen and (min-width: 992px) and (max-width: 1439px) {
#container{width:100%;height:100% !important;margin:0 auto;padding: 0 1.5em;}
#container:after {content:''; clear:both; display:block;}	

#nav_container{position:fixed;z-index:1030;width:100%;top:0;left:0;margin:0 auto;padding:0 ; height:76px;background: rgba(255,255,255,1);box-shadow:0 2px 10px rgba(0,0,0,.175)}   		
}
@media (min-width: 1440px) {
#container{width:1400px;height:100% !important;margin:0 auto;padding: 0 1em;background:rgba(255,0,4,0);}
#container:after {content:''; clear:both; display:block;}	
    
#nav_container{position:fixed;z-index:1030;width:100%;margin:0 auto;padding:0; height: 76px;background: rgba(255,255,255,1);box-shadow:0 2px 10px rgba(0,0,0,.175)}  
}

#Icontainer{width:1400px;height:100% !important;margin:0 auto;padding: 0 0em;}

@media only screen and (max-width: 991px) {
#nav_container{position:fixed;z-index:1030;width:100%;margin:0 auto;padding:0 auto; height: 76px;}		
#Tcontainer{width:100%;height:100% !important;margin:0 auto;padding:0 0 0 0;background: transparent}	

#Icontainer{width:100%;height:100% !important;margin:0 auto;padding: 0 0em;}	
}
@media screen and (min-width: 992px) and (max-width: 1389px) {
#Icontainer{width:100%;height:100% !important;margin:0 auto;padding: 0 ;}		
}


#pic_block{width:100%;background: url("../Nimages/in.jpg") repeat top;padding:1em 0;margin:0;}
#pic_block .pic_text_block{width:100%;display: flex;flex-wrap: wrap;justify-content: center;align-content: space-around; align-items: center}
#pic_block .pic_text_block .btn_pic_block{padding:2em 0.5em 0.5em 0.5em;}
#pic_block .pic_text_block .btn_pic_block a:hover{ opacity:0.4;filter:alpha(opacity=60);}


#footer_block{width:100%;padding:0.5em 0;}

#footer_block .fb_block{width:30%;}

#sys_block{width:100%;padding:3em 2em;}
#sys_block #sys_Ilist{display: flex;flex-wrap: wrap;justify-content: flex-start;align-content: space-around;align-items: stretch;padding:0 2em}
#sys_block #sys_Ilist .Ilist{width:calc(100%/5);padding:1em;text-align: center}

/*about*/
.aboutBg{width:100%;background: url("../Nimages/bg-about.jpg") repeat top;padding:2em 0}

.aboutBg .about_title{width:100%;font:3.6rem "微軟正黑體";font-weight: 500;color:#ffbf4b}
.aboutBg #about_block{width:100%;display: flex;flex-wrap: wrap;justify-content: flex-start;align-content: center;align-items: center;padding:1em 0 0 0;}
.aboutBg #about_block .Labout_block{width:70%;padding:0 2em 0 0;font:1.8rem "微軟正黑體";font-weight: 500;line-height: 1.5;}
.aboutBg #about_block .Rabout_block{width:30%;}

/**/
.info{width:100%;padding:3em 0;}
.info_title{width:100%;font:3.6rem "微軟正黑體";font-weight: 500;color:#ffbf4b}
.info_subtitle{width:100%;}
#info_block{width:100%;display: flex;flex-wrap: wrap;justify-content: flex-start;align-content: center;align-items: center;padding:0em 0 0 0;} 
#info_block .Ilist{width:calc(100%/4);padding:0.5em;text-align: center}
#info_block .Ilist img{padding:0.7em;border: 1px rgba(0,0,0,0.1) solid;box-shadow:0 2px 10px rgba(0,0,0,.15) }


/*service*/
.serviceBg{width:100%;background:url("../Nimages/bg-service.jpg")repeat top;padding:2em 0;}
.serviceBg #service_block{width:100%;display: flex;flex-wrap: wrap;justify-content: flex-start;align-content:space-around;align-items:stretch;}
.serviceBg #service_block .Lservice_block{width:50%;font:1.8rem "微軟正黑體";font-weight: 500;line-height: 1.5;}
.serviceBg #service_block .Rservice_block{width:50%;text-align: center;}

.serviceBg #service_block .Lservice_block .service_title{width:100%;font:3.6rem "微軟正黑體";font-weight: 500;padding:0 0 0.7em 0;color:#ffbf4b}

/*Design*/
#Design_block{width:100%;display: flex;flex-wrap: wrap;justify-content: flex-start;align-content:space-around;align-items:stretch;padding:3em 0;}
#Design_block .LDesign_block{width:50%;font:1.8rem "微軟正黑體";font-weight: 500;line-height: 1.5;}
#Design_block .RDesign_block{width:50%;}

#Design_block  .LDesign_block .Design_title{width:100%;font:3.6rem "微軟正黑體";font-weight: 500;padding:0 0 0.7em 0;color:#ffbf4b}

/*contact*/
.contactBg{width:100%;background:url("../Nimages/bg-contact.jpg") repeat top;padding:2em 0;}

#contact_block{width:100%;display: flex;flex-wrap: wrap;justify-content: flex-start;align-content:space-around;align-items:stretch;}
#contact_block .Lcontact_block{width:50%;/*font:1.8rem "微軟正黑體";font-weight: 500;line-height: 1.5;*/}
#contact_block .Rcontact_block{width:50%;text-align: center}

#contact_block .Lcontact_block .contact_title{width:100%;font:3.6rem "微軟正黑體";font-weight: 500;padding:0 0 0.7em 0;color:#ffbf4b}
#contact_block .Lcontact_block .contact_info{width:100%;font:2.2rem "微軟正黑體";font-weight: 500;margin:0 0 1em 0;}

#contact_block .Lcontact_block .input_block{width:100%;display: flex;flex-wrap: wrap;justify-content: flex-start;align-content:space-around;align-items:stretch;}

#contact_block .Lcontact_block .input_block .text02-1{width:140px;padding:0.3em 0;font-weight: 700;}
#contact_block .Lcontact_block .input_block .text02-2{width:calc(100% - 140px);padding:0.3em 0;}

#contact_block .Lcontact_block .input_block .input01{width:50%}
#contact_block .Lcontact_block .input_block .input02{width:80%}
#contact_block .Lcontact_block .input_block .textarea01{width:100%}

#contact_block .Lcontact_block .input_block input{font:1.6rem  "微軟正黑體";border:1px #a5a5a5 solid;background:#ffffff;padding:5px;color:#282828;width:auto}
#contact_block .Lcontact_block .input_block textarea{width:90%;font:1.6rem  "微軟正黑體";height:150px;max-height:150px; border:1px #a5a5a5 solid;padding:5px;background:#ffffff;color:#282828;}		


/*********************mobile******************************/

@media only screen and (max-width: 479px) {
	
#footer_block .fb_block{width:100%;}	
	
#sys_block{width:100%;padding:3em 2em;}
#sys_block #sys_Ilist{display: flex;flex-wrap: wrap;justify-content: center;align-content: space-around;align-items: stretch;padding:0}
#sys_block #sys_Ilist .Ilist{width:calc(100%/2);padding:0.5em 0;text-align: center}	
	
/*about*/
.aboutBg{width:100%;background: url("../Nimages/bg-about.jpg") repeat top;padding:2em 0}

.aboutBg .about_title{width:100%;font:3.6rem "微軟正黑體";font-weight: 500;color:#ffbf4b}
.aboutBg #about_block{width:100%;flex-direction: column-reverse; display: flex;flex-wrap: wrap;justify-content: flex-start;align-content: center;align-items: center;padding:1em 0 0 0;}
.aboutBg #about_block .Labout_block{width:100%;padding:2em 0 0 0;font:1.8rem "微軟正黑體";font-weight: 500;line-height: 1.5;}
.aboutBg #about_block .Rabout_block{width:100%;}

/**/
.info{width:100%;padding:3em 0;}
.info_title{width:100%;font:3.6rem "微軟正黑體";font-weight: 500;color:#ffbf4b}
.info_subtitle{width:100%;}
#info_block{width:100%;display: flex;flex-wrap: wrap;justify-content: flex-start;align-content: center;align-items: center;padding:0em 0 0 0;} 
#info_block .Ilist{width:calc(100%/2);padding:0.5em;text-align: center}	
	
/*service*/
.serviceBg{width:100%;background:url("../Nimages/bg-service.jpg")repeat top;padding:2em 0;}
.serviceBg #service_block{width:100%;/*flex-direction: column-reverse;*/display: flex;flex-wrap: wrap;justify-content: flex-start;align-content:space-around;align-items:stretch;}
.serviceBg #service_block .Lservice_block{width:100%;font:1.8rem "微軟正黑體";font-weight: 500;line-height: 1.5;}
.serviceBg #service_block .Rservice_block{width:100%;text-align: center;}

.serviceBg #service_block .Lservice_block .service_title{width:100%;font:3.6rem "微軟正黑體";font-weight: 500;padding:0 0 0.7em 0;color:#ffbf4b}
	
/*Design*/
#Design_block{width:100%;display: flex;flex-wrap: wrap;justify-content: flex-start;align-content:space-around;align-items:stretch;padding:3em 0;}
#Design_block .LDesign_block{width:100%;font:1.8rem "微軟正黑體";font-weight: 500;line-height: 1.5;}
#Design_block .RDesign_block{width:100%;}

#Design_block  .LDesign_block .Design_title{width:100%;font:3.6rem "微軟正黑體";font-weight: 500;padding:0 0 0.7em 0;color:#ffbf4b}	
	
/*contact*/
.contactBg{width:100%;background:url("../Nimages/bg-contact.jpg") repeat top;padding:2em 0;}

#contact_block{width:100%;display: flex;flex-wrap: wrap;justify-content: flex-start;align-content:space-around;align-items:stretch;}
#contact_block .Lcontact_block{width:100%;}
#contact_block .Rcontact_block{width:100%;text-align: center;display: none;}

#contact_block .Lcontact_block .contact_title{width:100%;font:3.6rem "微軟正黑體";font-weight: 500;padding:0 0 0.7em 0;color:#ffbf4b;}
#contact_block .Lcontact_block .contact_info{width:100%;font:2.2rem "微軟正黑體";font-weight: 500;margin:0 0 1em 0;}

#contact_block .Lcontact_block .input_block{width:100%;display: flex;flex-wrap: wrap;justify-content: flex-start;align-content:space-around;align-items:stretch;}

#contact_block .Lcontact_block .input_block .text02-1{width:100%;padding:0em 0;}
#contact_block .Lcontact_block .input_block .text02-2{width:100%;padding:0em 0 0.5em 0;}	

#contact_block .Lcontact_block .input_block input{font:1.6rem  "微軟正黑體";border:1px #a5a5a5 solid;background:#ffffff;padding:5px;color:#282828;width:auto}
#contact_block .Lcontact_block .input_block textarea{width:90%;font:1.6rem  "微軟正黑體";height:150px;max-height:150px; border:1px #a5a5a5 solid;padding:5px;background:#ffffff;color:#282828;}		
	
}
@media only screen and (min-width: 480px) and (max-width: 575px) {
#footer_block .fb_block{width:100%;}		
	
#sys_block{width:100%;padding:3em 2em;}
#sys_block #sys_Ilist{display: flex;flex-wrap: wrap;justify-content: center;align-content: space-around;align-items: stretch;padding:0}
#sys_block #sys_Ilist .Ilist{width:calc(100%/2);padding:0.5em 0;text-align: center}		
	
/*about*/
.aboutBg{width:100%;background: url("../Nimages/bg-about.jpg") repeat top;padding:2em 0}

.aboutBg .about_title{width:100%;font:3.6rem "微軟正黑體";font-weight: 500;color:#ffbf4b}
.aboutBg #about_block{width:100%;flex-direction: column-reverse; display: flex;flex-wrap: wrap;justify-content: flex-start;align-content: center;align-items: center;padding:1em 0 0 0;}
.aboutBg #about_block .Labout_block{width:100%;padding:2em 0 0 0;font:1.8rem "微軟正黑體";font-weight: 500;line-height: 1.5;}
.aboutBg #about_block .Rabout_block{width:100%;text-align: center;}	
/**/
.info{width:100%;padding:3em 0;}
.info_title{width:100%;font:3.6rem "微軟正黑體";font-weight: 500;color:#ffbf4b}
.info_subtitle{width:100%;}
#info_block{width:100%;display: flex;flex-wrap: wrap;justify-content: flex-start;align-content: center;align-items: center;padding:0em 0 0 0;} 
#info_block .Ilist{width:calc(100%/2);padding:0.5em;text-align: center}	
	
/*service*/
.serviceBg{width:100%;background:url("../Nimages/bg-service.jpg")repeat top;padding:2em 0;}
.serviceBg #service_block{width:100%;/*flex-direction: column-reverse;*/display: flex;flex-wrap: wrap;justify-content: flex-start;align-content:space-around;align-items:stretch;}
.serviceBg #service_block .Lservice_block{width:100%;font:1.8rem "微軟正黑體";font-weight: 500;line-height: 1.5;}
.serviceBg #service_block .Rservice_block{width:100%;text-align: center;}

.serviceBg #service_block .Lservice_block .service_title{width:100%;font:3.6rem "微軟正黑體";font-weight: 500;padding:0 0 0.7em 0;color:#ffbf4b}	
	
/*Design*/
#Design_block{width:100%;display: flex;flex-wrap: wrap;justify-content: flex-start;align-content:space-around;align-items:stretch;padding:3em 0;}
#Design_block .LDesign_block{width:100%;font:1.8rem "微軟正黑體";font-weight: 500;line-height: 1.5;}
#Design_block .RDesign_block{width:100%;}

#Design_block  .LDesign_block .Design_title{width:100%;font:3.6rem "微軟正黑體";font-weight: 500;padding:0 0 0.7em 0;color:#ffbf4b}	
	
/*contact*/
.contactBg{width:100%;background:url("../Nimages/bg-contact.jpg") repeat top;padding:2em 0;}

#contact_block{width:100%;display: flex;flex-wrap: wrap;justify-content: flex-start;align-content:space-around;align-items:stretch;}
#contact_block .Lcontact_block{width:100%;}
#contact_block .Rcontact_block{width:100%;text-align: center;display: none;}

#contact_block .Lcontact_block .contact_title{width:100%;font:3.6rem "微軟正黑體";font-weight: 500;padding:0 0 0.7em 0;color:#ffbf4b;}
#contact_block .Lcontact_block .contact_info{width:100%;font:2.2rem "微軟正黑體";font-weight: 500;margin:0 0 1em 0;}

#contact_block .Lcontact_block .input_block{width:100%;display: flex;flex-wrap: wrap;justify-content: flex-start;align-content:space-around;align-items:stretch;}

#contact_block .Lcontact_block .input_block .text02-1{width:100%;padding:0em 0;}
#contact_block .Lcontact_block .input_block .text02-2{width:100%;padding:0em 0 0.5em 0;}	

#contact_block .Lcontact_block .input_block input{font:1.6rem  "微軟正黑體";border:1px #a5a5a5 solid;background:#ffffff;padding:5px;color:#282828;width:auto}
#contact_block .Lcontact_block .input_block textarea{width:90%;font:1.6rem  "微軟正黑體";height:150px;max-height:150px; border:1px #a5a5a5 solid;padding:5px;background:#ffffff;color:#282828;}		
	
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
#footer_block .fb_block{width:50%;}		
	
#sys_block{width:100%;padding:3em 2em;}
#sys_block #sys_Ilist{display: flex;flex-wrap: wrap;justify-content: center;align-content: space-around;align-items: stretch;padding:0}
#sys_block #sys_Ilist .Ilist{width:calc(100%/3);padding:0.5em 0;text-align: center}	
	
/*about*/
.aboutBg{width:100%;background: url("../Nimages/bg-about.jpg") repeat top;padding:2em 0}

.aboutBg .about_title{width:100%;font:3.6rem "微軟正黑體";font-weight: 500;color:#ffbf4b}
.aboutBg #about_block{width:100%;flex-direction: column-reverse; display: flex;flex-wrap: wrap;justify-content: flex-start;align-content: center;align-items: center;padding:1em 0 0 0;}
.aboutBg #about_block .Labout_block{width:100%;padding:2em 0 0 0;font:1.8rem "微軟正黑體";font-weight: 500;line-height: 1.5;}
.aboutBg #about_block .Rabout_block{width:100%;text-align: center;}	
	
/**/
.info{width:100%;padding:3em 0;}
.info_title{width:100%;font:3.6rem "微軟正黑體";font-weight: 500;color:#ffbf4b}
.info_subtitle{width:100%;font:2rem "微軟正黑體";font-weight: 700;}
#info_block{width:100%;display: flex;flex-wrap: wrap;justify-content: flex-start;align-content: center;align-items: center;padding:0em 0 0 0;} 
#info_block .Ilist{width:calc(100%/3);padding:0.5em;text-align: center}	
	
#contact_block .Lcontact_block{width:100%;}	
#contact_block .Rcontact_block{width:100%;text-align: center;display: none;}	
	
#contact_block .Lcontact_block .input_block input{font:1.6rem  "微軟正黑體";border:1px #a5a5a5 solid;background:#ffffff;padding:5px;color:#282828;width:auto}
#contact_block .Lcontact_block .input_block textarea{width:90%;font:1.6rem  "微軟正黑體";height:150px;max-height:150px; border:1px #a5a5a5 solid;padding:5px;background:#ffffff;color:#282828;}		

#contact_block .Lcontact_block .input_block{width:100%;display: flex;flex-wrap: wrap;justify-content: flex-start;align-content:space-around;align-items:stretch;}	
#contact_block .Lcontact_block .input_block .text02-1{width:140px;padding:0em 0;}
#contact_block .Lcontact_block .input_block .text02-2{width:calc(100% - 140px);padding:0em 0 0.5em 0;}	
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
#footer_block .fb_block{width:50%;}	
	
#sys_block{width:100%;padding:3em 2em;}
#sys_block #sys_Ilist{display: flex;flex-wrap: wrap;justify-content: center;align-content: space-around;align-items: stretch;padding:0}
#sys_block #sys_Ilist .Ilist{width:calc(100%/4);padding:0.5em 0;text-align: center}			
	
	
/*about*/
.aboutBg{width:100%;background: url("../Nimages/bg-about.jpg") repeat top;padding:2em 0}

.aboutBg .about_title{width:100%;font:3.6rem "微軟正黑體";font-weight: 500;color:#ffbf4b}
.aboutBg #about_block{width:100%;display: flex;flex-wrap: wrap;justify-content: flex-start;align-content: center;align-items: center;padding:1em 0 0 0;}
.aboutBg #about_block .Labout_block{width:60%;padding:0 2em 0 0;font:1.8rem "微軟正黑體";font-weight: 500;line-height: 1.5;}
.aboutBg #about_block .Rabout_block{width:40%;text-align: center}	
	
#contact_block .Lcontact_block{width:100%;}	
#contact_block .Rcontact_block{width:100%;text-align: center;display: none;}	
	
#contact_block .Lcontact_block .input_block input{font:1.6rem  "微軟正黑體";border:1px #a5a5a5 solid;background:#ffffff;padding:5px;color:#282828;width:auto}
#contact_block .Lcontact_block .input_block textarea{width:90%;font:1.6rem  "微軟正黑體";height:150px;max-height:150px; border:1px #a5a5a5 solid;padding:5px;background:#ffffff;color:#282828;}		

#contact_block .Lcontact_block .input_block{width:100%;display: flex;flex-wrap: wrap;justify-content: flex-start;align-content:space-around;align-items:stretch;}	
#contact_block .Lcontact_block .input_block .text02-1{width:140px;padding:0em 0;}
#contact_block .Lcontact_block .input_block .text02-2{width:calc(100% - 140px);padding:0em 0 0.5em 0;}		
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
#footer_block .fb_block{width:60%;}	
		
}