﻿

@media screen and (max-width: 768px) 
{
    body{width:100%;}
    #container{ width: 100%; }
    #header{ width:  100%;}
    #search{right:115px;}
    #language{right:5px;}
    #menu{ width: 100%;}
    
    #content {width:100%; }
        
    /*----------------- Banner Start-----------------*/
#banner{position:relative;float:left;width:100%;height:200px;overflow:hidden;height:300px;}
#banner>ul>li{position:absolute;width:100%;height:300px;top:0px;left:0px;}
#banner>ul>li>img {width:100%;}
#banner #ball{position:absolute;top:266px;right:0px;}

    /*----------------- Banner End-----------------*/
    
    #indexpro{width:100%;}
    #indexpro #arrow_right {right: 80px;}
    
    #indexNews{margin-left:225px;}
    
    #indexlink .link1{left:0%;}
    #indexlink .link1 p {left:8%;}
    #indexlink .link2 {left:32%;}
    #indexlink .link3{left:60%;}
    #divTopTitle{ padding-left: 6px;}
    
    #footer{width:100%;}
    .center{width:100%;}
    #footerNav{width:100%;}
    
    /*----------------- left submenu -----------------*/ 
     #local #submenu
        {
            border: medium dotted #FF0000;
            top: 180px;
            position: fixed;
            z-index: 999;
            background-color: white;
            display:none;
            max-height:60%;
            overflow:auto;
        } 
    #showLeftMenu { display: none;} 
    /*----------------- left submenu End-----------------*/
}


@media screen and (max-width: 736px) 
{ 
    body{width:100%;}
    #indexNews{margin-left:225px;}
    
    #indexlink .link1{left:30%;}
    #indexlink .link1 p {left:8%;}
    #indexlink .link2 {left:33%;top:165px;}
    #indexlink .link2 a {color:#000;}
    #indexlink .link3{left:30%;top:400px;}
    #divTopTitle{ padding-left: 6px;}
    
    #footer{display:none;}
    
    /*----------------- left submenu -----------------*/ 
     #local #submenu
        {
            border: medium dotted #FF0000;
            top: 180px;
            position: fixed;
            z-index: 999;
            background-color: white;
            display:none;
            max-height:60%;
            overflow:auto;
        } 
    #showLeftMenu { display: none;} 
    /*----------------- left submenu End-----------------*/
    
    /*----------------- Product -----------------*/
    #content h2#title{width:84%;}
    #local{width:100%;}
    /*----------------- Product End-----------------*/
}
 

@media screen and (max-width: 667px) 
{ 
    body{width:100%;}
    #indexpro #arrow_right{right:12px;}
    #divTopTitle{ padding-left: 6px;}
    
    /*----------------- left submenu -----------------*/ 
     #local #submenu
        {
            border: medium dotted #FF0000;
            top: 180px;
            position: fixed;
            z-index: 999;
            background-color: white;
            display:none;
            max-height:60%;
            overflow:auto;
        }
    /*----------------- left submenu End-----------------*/
    
    /*----------------- Product -----------------*/     
    #showLeftMenu { display: none;}
    
    #local{width:99%;}
    #local .content{width:97%;padding-left:5px;}
    #ctbanner>img{width:96%;padding-left:17px;}
    #ctbanner .divPBannerText{left:48px;top:6px;}
    
    #local .content>#cs_staff>table>tbody>tr>td { float:left}
    #cs_staff h5.title, .divShow h5.title{width:80%;}
    /*-----------------ProductEnd-----------------*/ 
    
}


/*Styles for screen 600px and lower*/
@media screen and (max-width: 640px) 
{
    
    /*----------------- Menu start-----------------*/
#container{
  		width: auto; }
  		 
#header{
  		width: auto; 
  		float:none;
  		/*height: auto;*/ }
#menu{
  		width: auto;
  		height: auto;
  		position: relative;
  		top:  -46px}
#menu>ul{
  		width: 100%;
  		display: block;
  		height: auto;
  		position: relative;}
#menu>ul>li{
  		width: 32%;
  		float: left;
  		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 {
	display: none;
}
    /*----------------- Menu End-----------------*/
    
    
    /*----------------- Banner Start-----------------*/
#banner{position:relative;float:left;width:100%;height:200px;overflow:hidden;}
#banner>ul>li{position:absolute;width:100%;height:400px;top:0px;left:0px;}
#banner>ul>li>img {width:500px;}
#banner #ball{position:absolute;top:180px;right:0px;}

    /*----------------- Banner End-----------------*/
    
    /*----------------- content Start-----------------*/      
#content{position:relative;float:left;width:99%;min-height:500px;margin-top:19px;top:-50px;min-width:100%;}
#content h2#title{ width:75%;background-size: 99% 96px; position:relative}

#local{width:99%;margin:45px auto;}
#local .content{width:97%;padding-left:5px;}
#ctbanner>img{width:96%;}

#cs_staff , .divShow 
{ margin-left:2px;}

#local .content>#cs_staff>table>tbody>tr>td { float:left}

#ProductCenterAutoGen #cs_staff>table>tbody>tr>td { float:left}

#cs_staff h5.title , .divShow h5.title
{ 
    min-width:500px;
}
#local h5.title{width:96%;background-size: 500px 40px;}

.class_news {display:none}

#services #map {width: 100%;  }
#services #map iframe{width: 100%;  }

#services .submit .btn{left:0px; display:none}
#services .submit span{background-image: url("/Images/FS/btnRedBg.png"); width: 135px; height:43px;text-align: center;left:0px }

#services  table{ position: relative;float:left; }
#services  tr{ position: relative;float:left; height:100%}
#services  td{ position: relative; padding:5px;float:left }
#services .btnarea{position: relative;}


.proListDiv { width:95%;  }
.proListDiv .right{width:85%; }
#ctbanner .divPBannerText{  font-size:25px }
#ctbanner .divPBannerText{top:3px;}
#pronav_F {width:100%;}

#downloadList{width:100%;}
#downloadtop {width:100%;}
    /*----------------- content End-----------------*/
    
    /*----------------- News Start-----------------*/

#indexNews {margin-left: 28%;}
    #divTopTitle{ padding-left: 6px;}
    /*----------------- News 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:380px;left:20%;}
    /*----------------- 熱門產品 End-----------------*/
    
    /*----------------- footer Start-----------------*/
#footer{ display:none} 
    /*----------------- footer End-----------------*/
    
    /*----------------- indexlink Start -----------------*/
    
#indexlink{position:relative;float:left;margin-top:44px;width:99%;height:171px;background:url(/Images/FS/find.jpg) repeat-x bottom;}
.center{position:relative;width:99%;margin:0px auto;}

    /*產品資訊*/ 
#indexlink .link1{position:absolute;top:0px;left:28%;width:234px;height:135px;}
#indexlink .link1 p {left:8%;}
#indexlink .link1 a{display:block;width:234px;height:135px; height:20px;color:#fff} 

    /*  營業與服務據點查詢*/ 
#indexlink .link2{position:absolute;top:180px;left:31%;width:275px;height:135px;}
#indexlink .link2 a{display:block;width:234px;height:135px; height:20px;color:#000} 

    /*客戶意見徵詢*/ 
#indexlink .link3{position:absolute;top:407px;left:27%;width:308px;height:139px;}
#indexlink .link3 a{display:block;width:234px; color:#fff; } 
    /*----------------- indexlink End-----------------*/

    /*----------------- divWelcome Start-----------------*/
#divWelcome {top: 5px; width: 207px; height: 28px; right: 114px; margin-top: 10px; position: absolute;}
    /*----------------- divWelcome End-----------------*/
    
    /*----------------- left submenu -----------------*/ 
 #local #submenu
    {
        border: medium dotted #FF0000;
        top: 180px;
        position: fixed;
        z-index: 999;
        background-color: white;
        display:none;
        max-height:60%;
        overflow:auto;
    } 
#showLeftMenu { display: none;}
    /*----------------- left submenu End-----------------*/
    
    /*----------------- News Start-----------------*/
div#allshow {right:100px}
    /*----------------- News End-----------------*/
    
    /*----------------- 聯絡我們 Start-----------------*/
#comment{width:99%;}
#comment2{width:95%;}
#comment2 td { width:95%;float:left}
#comment2 textarea{ width:100%;float:left}

#comment2 .btn{ left: 20px; top: 55px;}
#comment2 .btnarea a span {left:-72px; top: 42px;}


#comment2 .btn2{ left: 0px; top: 55px;}

#comment2 .btnarea a:nth-child(2) span{ left:-93px; top: 42px; }


#divDisplayMessage span.right{ margin-left:0px }

 /*聯絡我們 From 規格表*/
#divAddcontact { overflow-x: hidden} 
#divAddcontact #comment2 .btn{ left: 20px; }
#divAddcontact #comment2 .btnarea a span {left:-95px;  top:0px; position:relative;  }
#divAddcontact #comment2 .btnarea a img {left:0px;  top:10px; position: relative;  }

#divAddcontact #comment2 .btn2{ left: 0px; }

#divAddcontact #comment2 .btnarea a:nth-child(2) span{left:-95px;  top:0px; position:relative; white-space:nowrap  }
#divAddcontact #comment2 .cancel{  white-space:nowrap  }
#divAddcontact #comment2 .btnarea a:nth-child(2) img{ left:0px;  top:10px; position: relative; color:Black  }

    /*----------------- 聯絡我們 End-----------------*/
    
    
   /*----------------- Level 3 公司訊息 Start-----------------*/ 
   
   #search{right:115px;}
   #language{right:5px;}
   #newsList div#newsShow{width:85%;margin-left:33px; margin-top:12px;}
   #newsList li a{width:100%;margin-left:0px;}
   
   /*----------------- Level 3 公司訊息 End-------------------*/ 
    
   #local h5
   {
       background:transparent!important;
       font-size:28px!important;
   }
   #local h5.title
   {
       margin-top:15px!important;
       margin-bottom:5px!important;
       height: inherit!important;
   }
   #local h5.title p
   {
       margin-bottom:0px!important;
   }
   #local h5.title p span span
   {
       font-size:28px!important;
   }
}


@media screen and (max-width: 620px) 
{
    body{width:100%;}
    #content {min-width:100%; } 
    #indexpro {width:100%; }
    #indexpro #proList{left:120px;}
    #indexNews {margin-left:170px;}
    #indexlink .link1 {left:28%;}
    #indexlink .link1 p {left:8%;}
    #indexlink .link2 {left:31%;}
    #indexlink .link3 {top: 407px; left:26%;}
    
    #newsList li a{width:100%;}
    #divTopTitle{ padding-left: 6px;}
}