﻿@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}

/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		4;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

.fluid {
	clear: both;
	margin-left: 0;
	width: 100%;
	/* float: left; */ 
        float: center;   
	display: block;
}

.fluidList {
    list-style:none;
    list-style-image:none;
    margin:0;
    padding:0;        
}


/* css 参数设置

普通手机   200x300

iPhone 2   320x480

iPhone 5   320x568

iPhone 6   375x667

iPhone 6 Plus 414x736


mini iPad, iPad 1 & 2   768x1024

笔记本电脑 1024以上

本程序为了适应大多数笔记本电脑和台式电脑的屏幕宽度，设置1080以上为电脑屏幕最低宽度（模式05）

所有的手机宽度都低于480, 所以，对于480以下的宽度，适应于所有手机竖立着浏览

*/
/* Style the navigation menu */
.topnav {
  overflow: hidden;
  background-color: #333;
  position: relative;
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
  display: none;
}

/* Style navigation menu links */
.topnav a {
  color: black; /*--------------menu color-------------*/
  padding: 6px 6px;
  text-decoration: none;
  font-size: 16.5px;
  display: block;
}

/* Style the hamburger menu */
.topnav a.icon {
  background: #ddd;
  color: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

/* Add a grey background color on mouse-over */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Style the active link (or home/logo) */
.active {
  background-color: #36B128;
  color: black;
}


@media (min-width: 320px) and (max-width: 359px)   /*-----------  320和以上屏宽-----------iPhone 7 竖立------------------*/
{html 

{font-size: 95%!important;}


        .myDesktop {
            display: none;
        }
} 


@media (min-width: 360px) and (max-width: 374px) /* ---------安桌手机 竖立---------*/
{html 


{font-size: 110%!important;}

        .myDesktop {
            display: none;
        }
} 

@media (min-width: 640px) and (max-width: 667px) /* ---------安桌手机 横着---------*/
{html 


{font-size: 120%!important;}

        .myDesktop {
            display: none;
        }
} 



/*------------------------------------------------------模式01------------------------------------------------------*/

/* Mobile Layout: below 480px . 手机竖立起来浏览*/
 @media only screen and (max-width: 479px) {

 

        .myDesktop {
            display: none;
        }

}


/*------------------------------------------------------模式02------------------------------------------------------*/


/* 手机横着浏览 Tablet Layout: 480px to 767px. Inherits styles from: Mobile Layout. */

/*@media only screen and (min-width: 480px) */     /*需要放480，而不是481*/


@media (min-width: 480px) and (max-width: 767px)

{

        .myDesktop {
            display: none;
        }  

}

/*------------------------------------------------------模式03------------------------------------------------------*/


/* iPad 和 mini iPad 竖立起来浏览: 768px to a max of 1023px.  Inherits styles from: Mobile Layout and Tablet Layout. 

*/

/*@media only screen and (min-width: 768px) {   */      /*需要放768，而不是769*/

@media (min-width: 768px) and (max-width: 1023px)
{
        .myDesktop {
            display: none;
        }  

}

/*------------------------------------------------------模式04------------------------------------------------------*/


/* iPad，mini iPad 横着浏览, 或屏幕宽度1024px的笔记本电脑.  Inherits styles from: Mobile Layout and Tablet Layout.*/


/* @media only screen and (min-width: 1024px)  {   需要放1024，而不是1025*/
 
@media (min-width: 1024px) and (max-width: 1079px)
{
   
        .myMobile {
            display: none;
        }

}

/*------------------------------------------------------模式05------------------------------------------------------*/


/* 笔记本和台式电脑屏幕 Desktop Layout: 1080px 或以上 .  Inherits styles from: Mobile Layout and Tablet Layout.*/


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

        .myMobile {
            display: none;
        }

}

/*------------------------------------------------------模式结束------------------------------------------------------*/

　　body {
　　　　font: normal 100% Helvetica, Arial, sans-serif;
　　}


