﻿@media only screen and (max-width : 592px) 
{   
    body{width:100%;}
    #content {min-width:100%; }
    #banner>ul>li>img {width:100%;}
    #indexpro {width:100%; }
    #indexpro #proList {left: 102px;}
    #indexNews {margin-left: 160px;}
    #indexlink .link1 {left:27%; }
    #indexlink .link1 p {left:9%;}
    #indexlink .link2 {left:30%;}
    #indexlink .link3 {top: 407px; left:24%;}
    #divTopTitle{ padding-left: 6px;}
    #comment2 .commentdTitle{width:90%;}
    #services .TelWord{ width:60%;margin-top: -60px;padding:0 50px;}
    #FreeTel {width:85%;}
    
    .cktext{width:100%!important;}
}


@media only screen and (max-width : 540px) 
{    
    body{width:100%;}
    #content {min-width:100%; }
    #indexpro {width:100%; }
    #indexpro #arrow_left{left:66px;}
    #indexpro #proList{left:84px;}
    #indexpro #arrow_right {right:56px;}
    #indexNews {margin-left:128px;}
    #indexlink .link1 {left:24%;}
    #indexlink .link2 {left:27%;}
    #indexlink .link3 {top: 407px; left:22%;}
    #comment2 .commentdTitle{width:90%;}
    #services .TelWord{ width:60%;margin-top: -60px;padding:0 50px;}
    #FreeTel {width:85%;}
    
    .cktext{width:100%!important;}
}


@media only screen and (max-width : 530px) 
{
    body{width:100%;}
    #search{position:absolute;width:360px;height:28px;top:76px;left:10px;background-color:transparent;}
    #search p {float:left}
    #language{position:absolute;width:105px;height:28px;top:76px;left:424px;background:#fff;}
    #content {min-width:100%; }
    #indexpro {width:100%; }
    #indexpro #arrow_left{left:66px;}
    #indexpro #proList{left:80px;}
    #indexpro #arrow_right {right:56px;}
    #indexNews {margin-left:126px;}
    #indexlink .link1 {left:25%;}
    #indexlink .link2 {left:29%;}
    #indexlink .link3 {top: 407px; left:23%;}
    #divTopTitle{ padding-left: 6px;}
    #comment2 .commentdTitle{width:90%;}
    #services .TelWord{ width:60%;margin-top: -60px;padding:0 50px;}
    #FreeTel {width:85%;}
    
    .cktext{width:100%!important;}
}
/*Smartphone*/
@media only screen and (max-width : 480px) 
{
    body{width:100%;}
    
#search{position:absolute;width:360px;height:28px;top:76px;left:10px;background-color:transparent;}
#search p {float:left}
#language{position:absolute;width:105px;height:28px;top:76px;left:374px;background:#fff;}

    /*----------------- divWelcome Start-----------------*/
#divWelcome {top: 5px; width: 207px; height: 28px; left: 10px; margin-top: 0px; position: absolute;}
    /*----------------- divWelcome End-----------------*/
    
    
    
    /*----------------- Menu start-----------------*/
#container{
  		width: auto; }
  		 
#header{
  		width: auto; 
  		float:none;
  		/*height: auto;*/ }
#menu{
  		width: auto;
  		height: auto;
  		position: relative;  
  		}
  		
#menu>ul{
  		width: 100%;
  		display:  none;
  		height: auto;
  		position: relative;
  		float: right;}
#menu>ul>li{
		display: block;
		float: none;
		width: 100%;
  		position: relative;}
  		 
  		
#menu>ul>li>a{
    background-size: 99% 99px;
  		width: 100%;
  		display: block;
  		height: 28px;
    }
#menu>ul>li>a:hover{color:#d20014;background:url(/Images/FS/menu.jpg) no-repeat 0 -46px;padding-top:10px;height:36px;  background-size: 99% 36px; background-color:White}
 
  
	#pull 
	{   margin-top : 5px;
		display: block;
		background-color: #C8000E; 
		position: relative;
	    color: #fff;
	    display: inline-block;
		width: 30px;
	    text-align: center;
	    text-decoration: none;
	    line-height: 40px;
	    text-shadow: 1px 1px 0px #283744;
	    float: right;
	}
	#pull:after {
		content:"";
		background: url('nav-icon.png') no-repeat;
		width: 100%;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 15px;
		top: 10px;
	}
	
    /*----------------- Menu End-----------------*/
    
    
    /*----------------- content Start-----------------*/
    #content {min-width:100%; }
    #content h2#title{ width:70%;background-size: 99% 96px;}

    #local .content>#cs_staff>table>tbody>tr>td { float:left}

    #cs_staff h5.title , .divShow h5.title
    { 
        min-width:300px;
    }
    #local h5.title{width:300px;background-size: 97% 40px;}
    
    /*----------------- content End-----------------*/
    
    
    /*----------------- navigation Start-----------------*/
    #navigation{position:absolute;top:100px;left:0px;font-size:12px;color:#999999;}
    .nav li{height:25px;} 
    .nav .rImg{float:left;width:27px;height:25px;text-align:center;}

    /*----------------- navigation End-----------------*/
     
     
    /*----------------- 熱門產品 Start-----------------*/
#indexpro{position:relative;float:left;margin-top:1px;width:100%;height:270px;background:url(/Images/FS/indexpro.png) no-repeat; background-size: 99% 270px;} 
#indexpro #proList { width:190px;left:30%;}
    /*----------------- 熱門產品 End-----------------*/
    
    
    /*----------------- News Start-----------------*/
div#allshow {right:70px; display:none}
#indexNews {margin-left: 20%;}
    #divTopTitle{ padding-left: 6px;}
    /*----------------- News End-----------------*/
    
    /*----------------- link Start-----------------*/
    #indexlink .link1 {left:20%; }
    #indexlink .link2 {left:25%;}
    #indexlink .link3 {top: 408px; left:18%;}
    /*----------------- link End-----------------*/
    #comment2 .commentdTitle{width:90%;}
    #services .TelWord{ width:60%;margin-top: -60px;padding:0 50px;}
    #FreeTel {width:85%;}
    
    .cktext{width:100%!important;}
}


@media only screen and (max-width : 435px) 
{
    body{width:100%;}
    #language { left: 76%;}   
    #divTopTitle{ padding-left: 6px;}
    #comment2 .commentdTitle{width:90%;}
    #services .TelWord{ width:60%;margin-top: -60px;padding:0 50px;}
    #FreeTel {width:85%;}
    
    .cktext{width:100%!important;}
}

@media only screen and (max-width : 414px) 
{
    body{width:100%;}

    #language { left: 308px;}
    #content {min-width:100%; }
    #banner>ul>li>img {width:100%;}
    #banner #ball {top:130px;}    
    #indexpro {width:100%; }
    #indexpro h4 {left:115px;}
    #indexpro #arrow_left{ left:40px; }
    #indexpro #proList {left: 108px;}
    #indexpro #arrow_right {right: 45px;}
    #indexNews {margin-left: 60px;}
    #indexlink {top:-49px;}
    #indexlink .link1 {left:16%; }
    #indexlink .link1 p {left:20px;}
    #indexlink .link2 {left:21%;}
    #indexlink .link3 {top: 408px; left:14%;}
    
    #divTopTitle{ padding-left: 6px;}
    #comment2 .commentdTitle{width:90%;}
    #services .TelWord{ width:60%;margin-top: -60px;padding:0 50px;}
    #FreeTel {width:85%;}
    
    .cktext{width:100%!important;}
}

@media only screen and (max-width : 384px) 
{
    body{width:100%;}

    #language { left: 72%;}
    #divTopTitle{ padding-left: 6px;}
    #comment2 .commentdTitle{width:90%;}
    #services .TelWord{ width:60%;margin-top: -60px;padding:0 50px;}
    #FreeTel {width:85%;}
    
    #local h5{width:96%;}
    .local .left{width:100%;}
    .local .left ul li{width:100%;}
    .local .left ul li p{width:86%;}
    .local .left .img{width:95%;height:95%;}    
    .local .left .img img{width:88%;}
    .local .right ul{width:95%;}
    .local .right li {width:100%;}
    .local .right li h6{width:100%;}
    .local .right li .rcontent{width:56%;}
    .local .right li h6{padding-left:0;}
    .local .right{width:100%;}
    .local .right img{width:100%;}
    
    .cktext{width:100%!important;}
}

@media only screen and (max-width : 375px) 
{
    body{width:100%;}

    #language { left: 72%;}
    #divTopTitle{ padding-left: 6px;}
    #comment2 .commentdTitle{width:90%;}
    #services .TelWord{ width:60%;margin-top: -60px;padding:0 50px;}
    #FreeTel {width:85%;}
    
    #local h5{width:96%;}
    .local .left{width:100%;}
    .local .left ul li{width:100%;}
    .local .left ul li p{width:86%;}
    .local .left .img{width:95%;height:95%;}    
    .local .left .img img{width:88%;}
    .local .right ul{width:95%;}
    .local .right li {width:100%;}
    .local .right li h6{width:100%;}
    .local .right li .rcontent{width:56%;}
    .local .right li h6{padding-left:0;}
    .local .right{width:100%;}
    .local .right img{width:100%;}
    
    .cktext{width:100%!important;}
    
    #cs_staff img, #cs_staff .img img{width:100%;max-width:initial;}
}


@media only screen and (max-width : 360px) 
{
    body{width:100%;}
    
    #language { left: 256px;}
    #content {min-width:100%; }
    #banner>ul>li>img {width:100%;}
    #banner #ball {top:130px;}    
    #indexpro {width:100%; }
    #indexpro h4{left:115px;}
    #indexpro #arrow_left { left:40px; }
    #indexpro #proList {left:86px;}
    #indexpro #arrow_right {right: 45px;}
    #indexNews {margin-left: 34px;}
    #indexlink {top:-49px;}
    #indexlink .link1 {left:10%; }
    #indexlink .link1 p {left:20px;}
    #indexlink .link2 {left:15%;}
    #indexlink .link3 {top: 408px; left:8%;}
    
    #divTopTitle{ padding-left: 6px;}
    #comment2 .commentdTitle{width:90%;}
    #services .TelWord{ width:60%;margin-top: -60px;padding:0 50px;}
    #FreeTel {width:85%;}
    
    #local h5{width:96%;}
    .local .left{width:100%;}
    .local .left ul li{width:100%;}
    .local .left ul li p{width:86%;}
    .local .left .img{width:95%;height:95%;}    
    .local .left .img img{width:88%;}
    .local .right ul{width:95%;}
    .local .right li {width:100%;}
    .local .right li h6{width:100%;}
    .local .right li .rcontent{width:56%;}
    .local .right li h6{padding-left:0;}
    .local .right{width:100%;}
    .local .right img{width:100%;}
    
    .cktext{width:100%!important;}
    .payroll{width:80%;}

    #cs_staff img, #cs_staff .img img{width:100%;max-width:initial;}
}


@media only screen and (max-width : 320px) 
{
    body{width:100%;}
    #search {width: 185px;}
    #search .input {width:140px;}
    #search p {float:left}
    #language { left: 214px;}
    #content {min-width:100%; }
    #banner>ul>li>img {width:100%;}
    #banner #ball {top:130px;}    
    #indexpro {width:100%;}
    #indexpro #arrow_left{ left:40px; }
    #indexpro #proList {left:65px;}
    #indexpro #arrow_right {right: 45px;}
    #indexNews {margin-left: 22px;}
    #indexlink {top:-49px;}
    #indexlink .link1 {left:8%; }
    #indexlink .link1 p {left:20px;}
    #indexlink .link2 {left:13%;}
    #indexlink .link3 {top: 390px; left:3%;}    
    
    #divTopTitle{ padding-left: 6px;}    
    #comment2 .commentdTitle{width:90%;}  
    .d1list>ul>div>li .right{width:77%;}  
    #services .TelWord{ width:60%;margin-top: -60px;padding:0 50px;}
    #FreeTel {width:85%;}
    
    #local h5{width:96%;}
    .local .left{width:100%;margin-top:8%;}
    .local .left ul li{width:100%;}
    .local .left ul li p{width:86%;}
    .local .left .img{width:95%;height:95%;margin-top:-10%;}    
    .local .left .img img{width:88%;}
    .local .right ul{width:95%;}
    .local .right li {width:100%;}
    .local .right li h6{width:100%;}
    .local .right li .rcontent{width:56%;}
    .local .right li h6{padding-left:0;}
    .local .right{width:100%;}
    .local .right img{width:100%;}
    
    .cktext{width:100%!important;}
    
    #local h5.title{width:95%;}
    #cs_staff h5.title, .divShow h5.title{min-width:95%;}
	
	/*--------------------- Product Content -----------------------------*/
	
	#cs_staff img, #cs_staff .img img{width:100%;max-width:100%;height:auto;}
	/*--------------------- Product Content -----------------------------*/
	
	
	/*--------------------- Product Spec -----------------------------*/
	  #ctbanner a img {width:100%;}
	  #ctbanner .divPBannerText {font-size:21px;}
	  #downloadList .spectr td {white-space:normal;padding-right:6px;}
	  #downloadList .spectr  .checkbox {margin-right:2px;}
	/*--------------------- Product Spec -----------------------------*/
	
}