/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

html {
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
   
/*  wrapper of the site   ============================================================================= */   
body { font-size:62.5%;  color:#676767; line-height:1.5; padding:0; margin:0; font-family:Arial, Helvetica, sans-serif; background:#5b77a3; }

#bkg_wrapper { background:url(/images/midAutumn2015/top_background.jpg) repeat-x; background-repeat:no-repeat;
background-size:contain;
 width:100%; }


#outer_wrapper { width:100%; margin:20px auto 0px auto; clear:both;  background:url(/images/midAutumn2015/top.png) center top no-repeat;}
#content_wrapper { width:970px; clear:both; margin:0 auto;  position:relative; }
.content {width:970px;   position:relative;} 
.intercontent {width:930px; margin-bottom:8em; float:left;  padding:0px; padding:20px;  background:url(/images/midAutumn2015/content_bg.png) repeat;    box-shadow: 0 0 5px rgba(60, 60, 60, 0.2);    border-radius: 10px;/*padding:20px 10px; background:url(/images/midAutumn2015/red_65.png); -webkit-box-shadow: 0px 0px 4px rgba(50, 50, 50, 0.4);-moz-box-shadow:    0px 0px 4px rgba(50, 50, 50, 0.4);box-shadow:         0px 0px 4px rgba(50, 50, 50, 0.4); */}



.first_wrapper	{ width: 920px;}
.second_wrapper { width: 910px;}
.third_wrapper	{ width:620px;}
.forth_wrapper	{ width:462px;}
.fifth_wrapper	{ width:300px;}
.fifth_wrapper div{}e
.fifth_wrapper div.boxborder { margin-bottom:10px;}

.FL		{float:left;}
.FR 	{float:right;}

a:link, a:visited { color:#644F40; text-decoration:none; }
a:hover, a:active { color:#8f3651; text-decoration:none; }

.color1st { color:#E8BC5D; } 
.color2nd { color:#cb8b00; } 
.color3rd { color:#333333; }
.color4th { color:#cb8b00; }
.color5th { color:#dd7e7c; }
.color6th { color:#597877; }


.color1st a:link, .color1st a:visited, a.color1st:link, a.color1st:visited { color:#E8BC5D; text-decoration:none; }
.color1st a:hover, .color1st a:active { color:#C56942; text-decoration:none; }
.color2nd a:link, .color2nd a:visited, a.color2nd:link, a.color2nd:visited { color:#644f40; text-decoration:none; }
.color2nd a:hover, .color2nd a:active { color:#8f3651; text-decoration:none; }
.color3rd a:link, .color3rd a:visited, a.color3rd:link, a.color3rd:visited { color:#333333; text-decoration:none; }
.color3rd a:hover, .color3rd a:active { color:#000000; text-decoration:none; }
.color4th a:link, .color4th a:visited, a.color4th:link, a.color4th:visited { color:#ffffff; text-decoration:none; }
.color4th a:hover, .color4th a:active { color:#ffffff; text-decoration:none; }

.txt1 { font-size:120%; }
.txt2 { font-size:130%; _font-size:120%; }
.txt3 { font-size:160%; }
.txt4 { font-size:190%; }
.txt5 { font-size:200%; }
.txt6 { font-size:300%; }
.txt7 { font-size:150%; }

textarea {font-family:Arial, Helvetica, sans-serif; resize: none;}

h1 { font-size: 240%; *font-size: 190%; font-family: Arial, '·L³n¥¿¶ÂÅé', 'Microsoft JhengHei', Helvetica, sans-serif;}
h2 { font-size: 180%; font-family: Arial, '·L³n¥¿¶ÂÅé', 'Microsoft JhengHei', Helvetica, sans-serif;}
h3 { font-size: 150%; font-family: Arial, '·L³n¥¿¶ÂÅé', 'Microsoft JhengHei', Helvetica, sans-serif;}
h4 { font-size: 140%; font-family: Arial, '·L³n¥¿¶ÂÅé', 'Microsoft JhengHei', Helvetica, sans-serif;}
h5 { font-size: 130%; _font-size:120%; font-family: Arial, '·L³n¥¿¶ÂÅé', 'Microsoft JhengHei', Helvetica, sans-serif;}


.boxshadow	{/* -webkit-box-shadow: 0px 0px 4px rgba(50, 50, 50, 0.4);-moz-box-shadow:    0px 0px 4px rgba(50, 50, 50, 0.4);box-shadow:         0px 0px 4px rgba(50, 50, 50, 0.4);*/} 
.boxborder	{ /*-webkit-box-shadow: 0px 0px 4px rgba(50, 50, 50, 0.4);-moz-box-shadow:    0px 0px 4px rgba(50, 50, 50, 0.4);box-shadow:         0px 0px 4px rgba(50, 50, 50, 0.4);*/}  
.boxborder .AD_img, #block_v4_Christmas2013_Adv_index2 .AD_img{  border: solid 4px #FFF;  background: #FFF;  border-radius:5px; float:left; display:block;}  

.vday_bg{ background:url(/images/midAutumn2015/vday_bg.jpg) fixed;}
.vday_bg{ background-size:100%;}

/*************************************************************/
.photo 			{background-attachment: fixed;background-position: 50% 0; background-repeat: no-repeat;height: 400px;position: relative;}
.photo span 	{bottom: 0;color: white;display: block;left: 50%; margin-left: -0px;font-size: 38px;padding: 10px;position: absolute;text-shadow: 0 2px 0 black, 0 0 10px black;width: 1280px;}
.summer 	{background-image: url(/images/midAutumn2015/front_rose.png);}
.autumn		{background-image: url(/images/midAutumn2015/back_rose.png);}
.winter 	{background-image: url(/images/midAutumn2015/front_rose.png);}
.spring 	{background-image: url(/images/midAutumn2015/back_rose.png);}

.movelayer	{width:100%; height:1200px; background:url(/images/midAutumn2015/front_rose.png) repeat ; }
.movelayer .inner { width:100%; height:1200px; background:url(/images/midAutumn2015/back_rose.png) repeat; }

/*********************** nav **********************************/
.nav-bg				{ width:100%; height:325px;  width:920px/9; }
.nav_wrapper		{ width:920px; margin:0px auto 0 ; height:177px; position:relative;} 
#mainnav_wrapper			{ width:100%; float:right; margin:246px 0 0 0;   height:42px ;  position:relative;}
.backto_main a		{ width:153px; height:153px; position:absolute; top:20px; left:407px; } 

.mainnav			{ width:420px; height:30px; margin:0 auto; }
.mainnav ul li		{ padding:0; margin:0;  }
.mainnav li		{font-size: 210%; *font-size: 190%; font-family: Arial, '·L³n¥¿¶ÂÅé', 'Microsoft JhengHei', Helvetica, sans-serif;  text-align:center; width:208px; height:44px;}
.mainnav li:last-child { padding-right:0; background:none;}
.mainnav .menu_a a{ background:url(/images/midAutumn2015/menu_a.gif) top center; width:208px; height:44px;}
.mainnav .menu_a a:hover { background:url(/images/midAutumn2015/menu_a.gif) bottom center;  transition-delay: 0s; transition-duration: 0.5s;}
.mainnav .menu_b a{ background:url(/images/midAutumn2015/menu_b.gif) top center; width:208px; height:44px;}
.mainnav .menu_b a:hover { background:url(/images/midAutumn2015/menu_b.gif) bottom center;  transition-delay: 0s; transition-duration: 0.5s;}

/***************************** index **************************************/
#header-div {height: 100%; width: 100%;top: 0; left: 0;background: url(/images/midAutumn2015/main.jpg) no-repeat top;position: relative; -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/main.jpg', sizingMethod='scale')";}
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
#header-div { background-size: cover;}
#header-div a{height: 100%; width: 100%;top: 0; left: 0; display:block;}

#header-div .nav-button_wrapper{top:60%; left:46%; width:9%; height:190px; z-index:100; position:absolute;}
.nav-button{ width:100%;  margin:0 auto; display:block; }
.nav-button img{
width:100%;  
    margin:0 auto;
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;



-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;

overflow:hidden;
}





.indexpage{ padding-bottom:10px;}
.firstLH{ padding-bottom:0px;}
.index_bottom{background:url(/images/midAutumn2015/indexS3_bottom.png) no-repeat center top; width:100%; height:180px; position: absolute; bottom:0px; }
.index_bottom_hidden{background:url(/images/midAutumn2015/index_hidden.png) no-repeat center top; width:100%; height:46px; position: absolute; bottom:0px; }
.index_bottom_hidden .for_but{ display:none;}
.indexS1{ width:100%; height:100%; float:left; padding-bottom:3em;}
.typeListing { width:100%; float:left; border: 1px solid #e6bc8f; box-sizing: border-box; -moz-box-sizing: border-box;}
.typeListing ul{ padding:0; margin:0; list-style:none;}
.typeListing li{   float:left;}
.typeListing li.last{margin:0 0px 0 0; }
.typeListing > *li:first-child+html  {margin:0 0px 0 0;}
.typeListing li figure{ height:100%; overflow:hidden; float:left;} 
.typeListing li figure a{ -webkit-transition: all .5s ease; -moz-transition: all .5s ease; transition: all .5s ease; }
.typeListing li figcaption {font-family: Arial, '·L³n¥¿¶ÂÅé', 'Microsoft JhengHei', Helvetica, sans-serif;}
.typeListing li figcaption a:link {width:100%; padding-top:0.5em; text-align:center; color:#E8BC5D; float:left; } 
.typeListing li figcaption a:hover{color:#F1AF1A; text-decoration:underline;  }
.typeListing li figure a img:hover {  opacity:0.6;
transition: opacity .2s ease-out;
-moz-transition: opacity .2s ease-out;
-webkit-transition: opacity .2s ease-out;
-o-transition: opacity .2s ease-out;}
.typeListing .samll{ font-size:13px;}


.photo_slider{ width:100%}
.photo_slider2, .photo_slider3{ width:300px; position:relative; }
.photo_slider2 .title, .photo_slider3 .title{background:url(/images/midAutumn2015/report_title.png) no-repeat left top; width:135px; height:42px; position:absolute; top:10px; left:0px; z-index:99; font-family: Arial, '·L³n¥¿¶ÂÅé', 'Microsoft JhengHei', Helvetica, sans-serif;}
.photo_slider2 .title span, .photo_slider3 .title span{ padding:5px 10px 10px 20px; float:left; font-size:15px; color:#FFF; font-weight:bold;}
.content_pad1{ padding:0; }

.salebanner{ width:100%; float:left; }
.mktbanner{ width:100%; float:left; border:1px solid #d8cec6; box-sizing: border-box; -moz-box-sizing: border-box; }
.report{ width:100%; background:url(/images/midAutumn2015/section_bg.gif) top left no-repeat #FFF ; height:176px; float:left;  position:relative; border: 1px solid #e6bc8f;box-sizing: border-box; -moz-box-sizing: border-box;}
.report .title{  width:158px; height:42px; position:absolute; top:0px; left:0px; z-index:99; font-family: Arial, '·L³n¥¿¶ÂÅé', 'Microsoft JhengHei', Helvetica, sans-serif; }
.report .title span{ padding:2px 10px 10px 15px; float:left; font-size:21px;  }
.report .title .deco{ padding:2px 10px 10px 15px; float:left; font-size:21px; color:#8f3651; }
.report .pad{ padding:10px;}
.report .col{
	width:587px;
	margin-top:25px;
}
.report .pad{ padding:10px 16px;}
.report figure{ width:160px; height:120px;     border: 4px solid #FFFFFF; }
.report p{
	width:405px;
	margin:0;
	padding:0;
	float:right;
}
.report h3{
	width:115px;
	margin:0 15px 5px;
	padding:0;
	float:left;
}



.youtuber_wrapper{  float:left; margin-bottom:20px; overflow:hidden;}
.youtuber_wrapper iframe{ width:100%; border:0;}

.rest{ float:left;}
.rest .title{ background:url(/images/midAutumn2015/title.png) no-repeat center top; width:100%; height:50px; margin:0 auto; float:left; position:relative; font-family: Arial, '·L³n¥¿¶ÂÅé', 'Microsoft JhengHei', Helvetica, sans-serif;}

.rest .title span { font-size: 21px; padding: 5px 0;  text-align:center; margin:0 auto; width:100%; text-align:center; display:block;}
.rest .title .deco {background: url("../images/title_deco.png") no-repeat scroll center top rgba(0, 0, 0, 0); height: 61px; position: absolute; top: -5px; width: 100px; z-index:100;}
.mosaic-wrapper		{ width:100%; margin:0 auto;}
.mosaic-box	, .mosaic-box2		{ position:relative; float:left;width:195px; height:195px; margin:0 14px 14px 0px; border:1px #e6bc8f solid;}
.mosaic-box.last, .mosaic-box2.last{ margin:0 0px 14px 0px; }

.mosaic-box .mosaic-shopbottom	{ position:absolute; z-index: 100; width:100%; height:93px; background:url(/images/midAutumn2015/freature_shop_title.png) no-repeat bottom; bottom:-19px; height:19px;}
.mosaic-box2 .mosaic-shopbottom	{ position:absolute; z-index: 100; width:100%; height:93px; background:url(/images/midAutumn2015/freature_shop_title_2.png) no-repeat bottom; bottom:-19px; height:19px;}

.mosaic-block 		{float:left;  position:relative;  width:195px; height:195px;background:url(/images/midAutumn2015/progress.gif) no-repeat center center #fff  ;overflow:hidden;}
.mosaic-block h3	{ height: 50px;line-height: 120%; margin:18px 15px 15px 18px; text-align: center; width: 162px; color:#cb8b00; }
.mosaic-block #dic, .boxslider .mosaic-block #dic {margin: 0px 20px 20px 20px; text-align:center; color:#333333;}
.mosaic-backdrop	{display:none; position:absolute;top:0;height:100%;width:100%; background:#FFF;overflow:hidden;}
.mosaic-backdrop img{height:100%;}
.mosaic-overlay		{display:none;z-index:5;position:absolute;width:100%;height:100%;background:#111;}
	
/*** Custom Animation Styles (You can remove/add any styles below) ***/
.bar2 .mosaic-overlay {bottom:-125px;height:210px;background:url(/images/midAutumn2015/white_85.png);}
.bar2 .mosaic-overlay:hover {/*opacity:1;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter:alpha(opacity=100);*/}
.borderFL { border-left: 1px solid #d8cec6;}
.borderRT { border-right: 1px solid #d8cec6;}


.fifth_wrapper div.boxborder.MB35	{margin-bottom: 35px;}
.clr{ clear:both;}
/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}