/*! 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:#333; line-height:1.5; padding:0; margin:0; font-family:Arial, Helvetica, sans-serif; }

#bkg_wrapper { background:url(/Images/Marketing/vday2014/vday_bg.jpg) fixed;  width:100%; }


#outer_wrapper { width:100%; margin:0px auto; clear:both;  }
#content_wrapper { width:920px; clear:both; margin:0 auto;  position:relative; }
.content {width:920px;   position:relative;} 
.intercontent {width:920px; margin-bottom:3em; float:left;  }



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

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

a:link, a:visited { color:#7E356C; text-decoration:none; }
a:hover, a:active { color:#352014; text-decoration:none; }

.color1st { color:#7E356C; } 
.color2nd { color:#885c49; } 
.color3rd { color:#333333; }
.color4th { color:#ffffff; }
.color5th { color:#dd7e7c; }
.color6th { color:#597877; }


.color1st a:link, .color1st a:visited, a.color1st:link, a.color1st:visited { color:#7E356C; text-decoration:none; }
.color1st a:hover, .color1st a:active { color:#660954; text-decoration:none; }
.color2nd a:link, .color2nd a:visited, a.color2nd:link, a.color2nd:visited { color:#885c49; text-decoration:none; }
.color2nd a:hover, .color2nd a:active { color:#352014; 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, '微軟正黑體', 'Microsoft JhengHei', Helvetica, sans-serif;}
h2 { font-size: 180%; font-family: Arial, '微軟正黑體', 'Microsoft JhengHei', Helvetica, sans-serif;}
h3 { font-size: 150%; font-family: Arial, '微軟正黑體', 'Microsoft JhengHei', Helvetica, sans-serif;}
h4 { font-size: 140%; font-family: Arial, '微軟正黑體', 'Microsoft JhengHei', Helvetica, sans-serif;}
h5 { font-size: 130%; _font-size:120%; font-family: Arial, '微軟正黑體', '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/Marketing/vday2014/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/Marketing/vday2014/front_rose.png);}
.autumn		{background-image: url(/Images/Marketing/vday2014/back_rose.png);}
.winter 	{background-image: url(/Images/Marketing/vday2014/front_rose.png);}
.spring 	{background-image: url(/Images/Marketing/vday2014/back_rose.png);}

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

/*********************** nav **********************************/
.nav-bg				{ background:url(/Images/Marketing/vday2014/header_bg.png) no-repeat center top; width:100%; height:245px; }
.nav_wrapper		{ width:970px; margin:25px auto 0 ; height:177px; position:relative;} 
#mainnav_wrapper			{ width:100%; float:right; padding:205px 0 0 0; /* background:url(/Images/Marketing/vday2014/vday_navbg.png) no-repeat center top;*/ position:relative; overflow:hidden}
.backto_main a		{ width:153px; height:153px; position:absolute; top:20px; left:407px; } 

.mainnav			{ width:100%;margin:0 auto; }
.mainnav ul li		{ padding:0; margin:0;}

.mainnav li		{font-size: 210%; *font-size: 190%; font-family: Arial, '微軟正黑體', 'Microsoft JhengHei', Helvetica, sans-serif; /*float:left; padding:14px 55px 0 60px;*/ text-align:center;}
.mainnav li:last-child { /*padding-right:0; background:none;*/}

.mainnav .menu_a a{ background:url(/Images/Marketing/vday2014/menu_a.png) top center; width:196px; height:64px; margin-left:4px;}
.mainnav .menu_a a:hover { background:url(/Images/Marketing/vday2014/menu_a2.png) bottom center;  transition-delay: 0s; transition-duration: 0.5s;}
.mainnav .menu_b a{ background:url(/Images/Marketing/vday2014/menu_b.png) top center; width:196px; height:64px;}
.mainnav .menu_b a:hover { background:url(/Images/Marketing/vday2014/menu_b2.png) bottom center;  transition-delay: 0s; transition-duration: 0.5s;}



/***************************** index **************************************/
#header-div {height: 100%; width: 100%;top: 0; left: 0;background: url(/Images/Marketing/vday2014/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;
}
/*.cloud1{ width:366px; height:297px; background:url(/Images/Marketing/vday2014/clouds1.png) no-repeat top center; position:absolute; left:50px; top:-45px; z-index:10;}
.cloud2{ width:366px; height:297px; background:url(/Images/Marketing/vday2014/clouds2.png) no-repeat top center; position:absolute; right:35px; top:-50px; z-index:10;}*/
.slider_wrapper{ width:100%; margin-bottom:15px; float:left;}



/************************************************************************/


@-webkit-keyframes cloud1_move {
 0% { -webkit-transform: translate(0, -20); }
 50% { -webkit-transform: translate(0, 10px); }
 100% { -webkit-transform: translate(0, -20); }
}

@-moz-keyframes cloud1_move {
  0% { -moz-transform: translate(0, -20); }
  50% { -moz-transform: translate(0, 10px); }
  100% { -moz-transform: translate(0, -20);}
}


#cloud1_wrapper { position: absolute; z-index: 100; /*left: 50%;*/ margin: 0px 0px 0px 20px;}

#cloud1_wrapper .cloud1 {
  position: relative;
  width:366px; height:297px;
  -webkit-animation-name: cloud1_move;
  -webkit-animation-duration: 3s;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: 0;
  -webkit-animation-play-state: running;
  -moz-animation-name: cloud1_move;
  -moz-animation-duration: 3s;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-delay: 0;
  -moz-animation-play-state: running;
}
#cloud1_wrapper .cloud1 .rev {
  position: absolute;
  width:366px; height:297px;
  margin-top: -280px;
  background:url(/Images/Marketing/vday2014/clouds1.png) no-repeat top center;
  cursor: pointer;
}
#cloud1_wrapper .cloud1 .rev: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;}



/*******************************/



@-webkit-keyframes cloud2_move {
 0% { -webkit-transform: translate(0, -20); }
 50% { -webkit-transform: translate(0, 10px); }
 100% { -webkit-transform: translate(0, -20); }
}

@-moz-keyframes cloud2_move {
  0% { -moz-transform: translate(0, -20); }
  50% { -moz-transform: translate(0, 10px); }
  100% { -moz-transform: translate(0, -20);}
}

#cloud2_wrapper { position: absolute; z-index: 100; /*margin: 0px 0px 0px 60px;*/ right:50px}

#cloud2_wrapper .cloud2 {
  position: relative;
  width:366px; height:297px;
  -webkit-animation-name: cloud1_move;
  -webkit-animation-duration: 3s;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: 0;
  -webkit-animation-play-state: running;
  -moz-animation-name: cloud1_move;
  -moz-animation-duration: 3s;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-delay: 0;
  -moz-animation-play-state: running;
}
#cloud2_wrapper .cloud2 .rev {
  position: absolute;
  width:366px; height:297px;
  margin-top: -240px;
  background:url(/Images/Marketing/vday2014/clouds2.png) no-repeat top center;
  cursor: pointer;
}

#cloud2_wrapper .cloud2 .rev: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;}


/************************************************************************/

.indexpage{ padding-bottom:100px;}
.firstLH{ padding-bottom:0px;}
.index_bottom{background:url(/Images/Marketing/vday2014/indexS3_bottom.png) no-repeat center top; width:100%; height:180px; position: absolute; bottom:0px; }
.index_bottom_hidden{background:url(/Images/Marketing/vday2014/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;}
.typeListing ul{ padding:0; margin:0; list-style:none;}
.typeListing li{ width:195px; margin:0 12px 0 0; float:left; }
.typeListing li.last{margin:0 0px 0 0; }
.typeListing > *li:first-child+html  {margin:0 0px 0 0;}
.typeListing li figure{ width:100%; 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 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 li figcaption {font-family: Arial, '微軟正黑體', 'Microsoft JhengHei', Helvetica, sans-serif;}
.typeListing li figcaption a:link {width:100%; padding-top:0.5em; text-align:center; color:#660954; float:left; } 
.typeListing li figcaption a:hover{color:#7E356C; text-decoration:underline;  }
.typeListing .samll{ font-size:13px;}
.typeListing li{ width:300px; margin:0 10px 0 0; float:left; }

.photo_slider{ width:100%}
.photo_slider2, .photo_slider3{ width:300px; position:relative; }
.photo_slider2 .title, .photo_slider3 .title{ background:url(/Images/Marketing/vday2014/sidebar_title.png) no-repeat left top; width:135px; height:42px; position:absolute; top:10px; left:-8px; z-index:99; font-family: Arial, '微軟正黑體', 'Microsoft JhengHei', Helvetica, sans-serif;}
.photo_slider2 .title span, .photo_slider3 .title span{ padding:5px 10px 10px 20px; float:left; font-size:16px;}
.content_pad1{ padding:0 ;}

.salebanner{ width:100%; float:left; }
.mktbanner{ width:100%; float:left; }
.report{ width:100%; background:url(/Images/Marketing/vday2014/white_60.png) repeat; height:169px; float:left;  position:relative;}
.report .title{ background:url(/Images/Marketing/vday2014/report_title.png) no-repeat left top; width:158px; height:42px; position:absolute; top:-4px; left:-8px; z-index:99; font-family: Arial, '微軟正黑體', 'Microsoft JhengHei', Helvetica, sans-serif;}
.report .title span{ padding:5px 10px 10px 20px; float:left; font-size:16px;}
.report .pad{ padding:10px;}
.report .col{ width:284px; margin-top:23px; }
.report .pad{ padding:10px 16px;}
.report figure{ width:160px; height:120px; }
.report p{ width:115px; margin:0; padding:0; float:right;}
.report h3{ width:115px; margin:0 0 5px; padding:0; float:right;}



.youtuber_wrapper{  float:left; margin-bottom:10px;  overflow:hidden;}

.youtuber_wrapper iframe{ width:100%; border:0;}

.rest{ float:left;}
.rest .title{ background:url(/Images/Marketing/vday2014/rest_title.png) no-repeat center top; width:100%; height:70px; margin:0 auto; float:left; position:relative; font-family: Arial, '微軟正黑體', 'Microsoft JhengHei', Helvetica, sans-serif;}
.rest .title span{ padding:5px 10px 10px 20px; float:left; font-size:16px; position:absolute; left:250px; top:10px;}

.mosaic-wrapper		{ width:100%; margin:0 auto;}
.mosaic-box	, .mosaic-box2		{ position:relative; float:left;width:195px; height:195px; margin:0 12px 10px 0px;   box-shadow: 0 0 4px rgba(50, 50, 50, 0.4); }
.mosaic-box.last, .mosaic-box2.last{ margin:0 0px 10px 0px; }

.mosaic-box .mosaic-shopbottom	{ position:absolute; z-index: 100; width:100%; height:93px; background:url(/Images/Marketing/vday2014/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/Marketing/vday2014/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/Marketing/vday2014/progress.gif) no-repeat center center #fff  ;overflow:hidden;}
.mosaic-block h3	{ height: 75px;line-height: 120%; text-align: center; width: 195px; color:#801020; display:table-cell; vertical-align: middle; padding: 15px 15px 0 15px; }
.mosaic-block #dic, .boxslider .mosaic-block #dic {margin: 0px 20px 20px 20px; text-align:center;}
.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/Marketing/vday2014/white_85.png);}
.bar2 .mosaic-overlay:hover {/*opacity:1;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter:alpha(opacity=100);*/}



.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;
}

.bigSilder .newSlider{
    width: 610px;
}
.bigSilder .flexslider
{
    min-height: 250px;
    background: transparent !important;
    box-shadow: none !important;
}
.bigSilder .flex-viewport
{
    height: 220px;
}
.bigSilder .flex-control-paging
{
    bottom: 0px !important;
}

.bigSilder .flex-caption2
{
    padding: 2% 1% 2% 1% !important;
    text-align: center;
    width: 100%;
}
/* ==========================================================================
   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;
    }
}