@charset "UTF-8";
/* font*/
@import url(http://fonts.googleapis.com/earlyaccess/cwtexhei.css);
@import url(http://fonts.googleapis.com/earlyaccess/cwtexyen.css);
/* CSS Document */
body{ margin:0; font-family: 'cwTeXHei', serif; }
p{ font-size:1em; line-height:1.6em;}
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none;}
a:active {text-decoration: none;}
@font-face {
  font-family: 'cwTeXHei';
  font-style: normal;
  font-weight: 500;
  src: url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.eot);
  src: url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.eot?#iefix) format('embedded-opentype'),
       url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.woff) format('woff'),
       url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.ttf) format('truetype');
}

#wrapper{ width:100%; margin:0; padding:0; overflow:hidden;}
header{ width:100vw; height:100vh; background:url(../img/top_bg.jpg) top no-repeat; 
		background-size:cover; margin:0; }
section{ min-height:300px; padding:15px; margin:0; width:100%; }
nav{ background-color:#333; margin:0; text-align:center; color:#fff; 
	border:1px solid #333; height:3em; width:100%;}
footer{ padding:10px; text-align:center; background:#000; color:#fff; font-size:0.9em;}
nav ul, li{ list-style-type:none; list-style:none; margin:0; padding:0; }
nav ul{ height:3em; overflow:hidden;}
nav ul li{ display:inline-block; padding:0 3em; line-height: 3em; }
nav ul li a:link, a:visited{ color:#fff;}
nav ul li a:hover{ color:#000;}
nav ul li a:active{ color:#fff;}
nav ul li:hover {  background: #ff0; color:#000;
					border-radius:1.5em;
					-webkit-transition:all 180ms ease-out;transition:all 180ms ease-out;
	-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;}
.navbar-fixed { position: fixed;  top:-3em; z-index:10; background-color:hsla(112,0%,100%,.9);
				border-bottom:1px solid #333;}
.navbar-fixed ul li a:link{ color:#FFF; display: block;}
.navbar-fixed ul li a:visited, a:active{ color:#000; display: block;}



#logo{ position:absolute; z-index:5; bottom:20px; left:10px;}
#intro{ background:url(../img/intro_bg.jpg) top right no-repeat; background-size:cover;
		width:100vw; height:95vh; }
#intro article{ background:url(../img/intro_text.png) top no-repeat; background-size:contain; width:55%; float:left; padding:15px 100px; text-align:center; margin-top:30px; max-width:650px;}
#cart{ display:block; float:right; text-align:center;}
.content-sub{ width:96%; font-size:0.8em; line-height:1.6em; text-align:left; margin:auto;}
.left{ display:inline-block; float:left; width:49%;}
.right{ display:inline-block; float:right; width:49%;}
#cover{ background:url(../img/cover_bg.png) repeat; text-align:center; min-height:95vh;}
#cover article{ width:80%; margin:20px auto; background:#fff; border:1px solid #000; border-radius:50px;
				padding:20px; display:block; min-height:300px;}
#cover-img{ width:30%; display:inline-block; float:left; text-align:center; margin-left:-10%;}
#cover-img img{ width:100%; height:auto;}
#cover-content{ width:79%; display:inline-block; float:right; min-height:100px; text-align:left;}
#cover-content img{ width:auto;}
#photo{ background:url(../img/cover_bg.png) repeat; text-align:center;
		width:100vw; height:95vh; }
#photo article{ text-align:center; padding:50px 0;}
#photo .content-sub{ text-align:center;}
#recommand{ background:url(../img/recommand_bg.jpg) top no-repeat; background-size:cover; text-align:center;
			width:100vw; height:95vh; }
#recommand article { padding:50px 0;}
#event{ text-align:center; min-height:95vh;
		background:url(../img/event_bg.jpg) top  no-repeat; background-size:cover;
		/*background:#F4F3D5;
        animation:eventflash 2s;
      	-moz-animation:eventflash 2s infinite; Firefox */
    	/*-webkit-animation:eventflash 2s infinite;  Safari and Chrome */}
#event article{ padding:50px 20px; width:40%; text-align:center; margin:auto;}
#event article .info img{ width:100%; padding:20px;}
#preview{ /*background:url(../img/cover_bg.png) repeat; text-align:center; padding:50px 0;*/ display:none; }
#preview article{ width:90%; margin:10px auto;}
#preview article .item{ width:23%; padding:5px; display:inline-block; float:left;}
#preview article .item img{ width:98%; height:auto; margin:auto; padding:5px; background:#000;
							}
@-moz-keyframes eventflash /* Firefox */
    {
    0%   {background:#CAEFF2;}
    50%  {background:#E8F6F8;}
    100%   {background:#F4F3D5;}
    }
@-webkit-keyframes eventflash /* Safari and Chrome */
    {
    0%   {background:#CAEFF2;}
    50%  {background:#E8F6F8;}
    100%   {background:#F4F3D5;}
    }

.mark-y{ padding:2px 5px; background:#FF0; border:1px solid #000;}
.mark-p{ padding:2px 5px; background:#EDADAB; border:1px solid #000;}
.mark-w{ padding:2px 5px; background:#fff; border:1px solid #000;}

#chin, #tai {
  /* Custom styling */
  max-width: 80%;
  border-radius: 4px;
  display:none;
  font-size:0.9em;
  /* Custom transition - slide from top*/
  transform: translateY(-50px);
  transition: all .33s;
}

.fancybox-slide--current #chin {
  transform: translateY(0);
}

@media (max-width:	768px){
	section{ width:100%; margin:0; padding:10px 0;}
	nav{ display:none;}
	#logo{ width:90%; margin:auto;}
	#intro, #photo, #preview{ height:auto; }
	#intro .content-sub{ display:none;}
	#intro article{ margin-top:300px;}
	#cover-img{ width:100%; margin:auto;}
	#cover-content{ width:100%; margin:auto;}
	#cover img{ width:100%;}
	#photo article{ width:90%; margin:auto;}
	#recommand{ background:url(../img/recommand_bg.jpg) top left no-repeat; background-size:cover;}
	#event article{ margin:0 auto; width:80%; text-align:center; margin:auto;}
	.info{ width:100%;}
	.info img{ width:100%;}
	}