@charset "UTF-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; }

html { line-height: 1; }

ol, ul { list-style: none; }

table { border-collapse: collapse; border-spacing: 0; }

caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }

q, blockquote { quotes: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; }

a img { border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }

#top h1, .yes, .no { display: block; white-space: nowrap; overflow: hidden; }

html, body { margin: 0 auto; padding: 0; font-family: Arial, "微軟正黑體", "新細明體" , Arial, Helvetica, sans-serif; background-color: #050006; }

.layout { width: 980px; display: block; margin: 0 auto; overflow: hidden; }

h1 { text-align: left; font-size: 20px; font-weight: bold; font-family: Arial, "微軟正黑體", "新細明體" , Arial, Helvetica, sans-serif; letter-spacing: 1px; }

a { text-decoration: none; }

#top { background: url(../img/bg_top.jpg) repeat-x center top; padding: 25px 0 0px; border-bottom: 7px solid #fffdc3; }
#top h1 { display: inline-block; padding-bottom: 18px; font-size: 0px; }
#top h1 a { display: inline-block; }

#ment { background: url(../img/indexbg.jpg) no-repeat center top; }
#ment .layout { position: relative; height: 775px; overflow: hidden; }
#ment h2 { font-size: 20px; font-weight: normal; color: #fff; font-family: Arial, "微軟正黑體", "新細明體" , Arial, Helvetica, sans-serif; text-align: left; position: absolute; top: 525px; left: 576px; letter-spacing: 1px; }

#ment, #main, #story, #wallpaper, #movie, #Courvoisier { min-height: 918px; }

#main { background: url(../img/mainbg.jpg) no-repeat center top; }

#story h1, #wallpaper h1, #movie h1, #Courvoisier h1 { height: 60px; font-size: 0; display: inline-block; width: 180px; border-bottom: 1px solid #fff; }
#story h2, #wallpaper h2, #movie h2, #Courvoisier h2 { font-family: 'Vollkorn', serif; color: #ffe465; line-height: 32px; font-size: 12px; letter-spacing: 1px; }

#story h1 { background: url(../img/title.png) no-repeat; }
#story ul { padding: 205px 0 20px; overflow: hidden; }
#story li { width: 14.2%; background: url(../img/attr.png) no-repeat right center; font-size: 24px; font-weight: normal; color: #fff; font-family: Arial, "微軟正黑體", "新細明體" , Arial, Helvetica, sans-serif; text-align: left; float: left; padding-left: 15px; font-family: 'Antic', sans-serif; vertical-align: baseline; cursor: context-menu; box-sizing: border-box; }
#story li:hover { color: #ffe465; }
#story li.action { color: #ffe465; }

.yearbox1, .yearbox2, .yearbox3, .yearbox4, .yearbox5, .yearbox6, .yearbox7 { position: absolute; text-align: left; cursor: context-menu; }
.yearbox1:hover .box, .yearbox2:hover .box, .yearbox3:hover .box, .yearbox4:hover .box, .yearbox5:hover .box, .yearbox6:hover .box, .yearbox7:hover .box { border: 1px solid #ffe465; }
.yearbox1:hover .potimg, .yearbox2:hover .potimg, .yearbox3:hover .potimg, .yearbox4:hover .potimg, .yearbox5:hover .potimg, .yearbox6:hover .potimg, .yearbox7:hover .potimg { background: url(../img/pottop_hover.png) no-repeat 0 0; }
.yearbox1 .potimg, .yearbox2 .potimg, .yearbox3 .potimg, .yearbox4 .potimg, .yearbox5 .potimg, .yearbox6 .potimg, .yearbox7 .potimg { background: url(../img/pottop.png) repeat-y 0 0; width: 8px; height: 15px; display: block; }
.yearbox1 img, .yearbox2 img, .yearbox3 img, .yearbox4 img, .yearbox5 img, .yearbox6 img, .yearbox7 img { vertical-align: bottom; display: block; }
.yearbox1 .pot, .yearbox2 .pot, .yearbox3 .pot, .yearbox4 .pot, .yearbox5 .pot, .yearbox6 .pot, .yearbox7 .pot { position: absolute; }
.yearbox1 .box, .yearbox2 .box, .yearbox3 .box, .yearbox4 .box, .yearbox5 .box, .yearbox6 .box, .yearbox7 .box { border: 1px solid #6e3574; border-radius: 3px; padding: 10px; display: inline-block; font-size: 13px; font-weight: normal; color: #fff; font-family: Arial, "微軟正黑體", "新細明體" , Arial, Helvetica, sans-serif; text-align: left; line-height: 20px; background-color: #39183f; }
.yearbox1 p, .yearbox2 p, .yearbox3 p, .yearbox4 p, .yearbox5 p, .yearbox6 p, .yearbox7 p { word-break: break-all; }

.action .potimg { background-image: url(../img/pottop_hover.png); }
.action .box { border: 1px solid #ffe465; }

#story { text-align: center; background: url(../img/storybg.jpg) no-repeat top center; }
#story .years { background: url(../img/years.png) no-repeat center center; padding-top: 48px; min-height: 700px; }
#story .years .layout { overflow: visible; position: relative; }
#story h1 { background-position: 0 0; }

#wallpaper { text-align: center; background: url(../img/wallpaperbg.jpg) no-repeat top center; }
#wallpaper h1 { background: url(../img/title.png) no-repeat 0 -180px; margin-top: 65px; }
#wallpaper .imgbox { border-radius: 3px; border: 4px solid #fff; display: inline-block; margin: 10px 0 0 28%; position: relative; overflow: hidden; }
#wallpaper .imgbox img { display: block; }
#wallpaper .imgbox .imghover { position: absolute; top: 110%; -moz-transition: all 1s; -o-transition: all 1s; -webkit-transition: all 1s; transition: all 1s; }
#wallpaper .imgbox:hover .imghover { position: absolute; top: 0; }

#movie { background: url(../img/moviebg.jpg) no-repeat top center; text-align: center; }
#movie h1 { background: url(../img/title.png) no-repeat 0 -60px; margin-top: 65px; }

.moviebox { width: 870px; height: 540px; text-align: center; margin: 40px auto 0; border-radius: 3px; background-color: #050006; border: 1px solid #6e3574; }

#Courvoisier { background: url(../img/productbg.jpg) no-repeat top center; text-align: center; position: relative; overflow: hidden; }
#Courvoisier h1 { background: url(../img/title.png) no-repeat 0 -120px; margin-top: 65px; }

.vsop, .xo { width: 50%; float: left; min-height: 618px; cursor: pointer; position: absolute; }

.vsop { text-align: right; transition: background 2s, transform 2s; left: 0; }
.vsop:hover { background: url(../img/vsophover.png) no-repeat right bottom; }

.xo { transition: background 2s, transform 2s; text-align: left; left: 50%; }
.xo:hover { background: url(../img/xohover.png) no-repeat left bottom; }

.right, .left { text-align: left; width: 50%; min-height: 618px; position: absolute; box-sizing: border-box; }
.right h3, .left h3 { font-size: 21px; font-weight: bold; color: #fff; font-family: Arial, "微軟正黑體", "新細明體" , Arial, Helvetica, sans-serif; text-align: left; padding: 15px 0 20px; }
.right p, .left p { font-size: 13px; font-weight: normal; color: #fff; font-family: Arial, "微軟正黑體", "新細明體" , Arial, Helvetica, sans-serif; text-align: left; line-height: 20px; width: 310px; padding: 0 0px 10px 0; box-sizing: border-box; }
.right li, .left li { padding-bottom: 10px; width: 285px; box-sizing: border-box; font-size: 13px; font-weight: normal; color: #fff; font-family: Arial, "微軟正黑體", "新細明體" , Arial, Helvetica, sans-serif; text-align: left; line-height: 20px; list-style-type: disc; margin-left: 20px; }

.right { right: -100%; padding-left: 140px; }

.left { left: -50%; padding-right: 130px; }

.perv, .next { background-color: #2c0c35; position: absolute; top: 35%; padding: 12px 15px; cursor: pointer; }
.perv:hover, .next:hover { background-color: #481557; }

.perv { border-top-right-radius: 3px; border-bottom-right-radius: 3px; }

.next { right: 0; border-top-left-radius: 3px; border-bottom-left-radius: 3px; }

.menu { display: inline-block; float: right; margin-top: 10px; }
.menu li { float: left; }
.menu a { display: block; min-height: 60px; }
.menu .menu1, .menu .menu2, .menu .menu3 { background: url(../img/menu.png) no-repeat; height: 62px; width: 109px; display: block; cursor: pointer; font-size: 0; -moz-transition: all 1s; -o-transition: all 1s; -webkit-transition: all 1s; transition: all 1s; }
.menu .menu1 { background-position: 0 0; }
.menu .menu1:hover { background-position: 0 -59px; }
.menu .menu2 { background-position: -109px 0; }
.menu .menu2:hover { background-position: -109px -59px; }
.menu .menu3 { background-position: -218px 0; }
.menu .menu3:hover { background-position: -218px -59px; }

.menusen { background: url(../img/menusenbg.png) no-repeat bottom center; position: absolute; z-index: 99; top: 166px; margin-left: -26px; }
.menusen a { min-height: 40px; font-size: 16px; font-weight: normal; color: #fff; font-family: Arial, "微軟正黑體", "新細明體" , Arial, Helvetica, sans-serif; text-align: left; text-align: center; float: none; letter-spacing: 2px; width: 127px; line-height: 46px; display: block; }
.menusen a:hover { color: #ffe465; }

.yes, .no { font-size: 0px; background: url(../img/yes_no.png) no-repeat; height: 100px; width: 127px; display: inline-block; cursor: pointer; position: absolute; top: 416px; }

.yes { background-position: left top; left: 560px; }

.yes:hover { background-position: left bottom; }

.no { background-position: right top; left: 680px; }

.no:hover { background-position: right bottom; }

#footer { padding: 10px 0 38px; border-top: 4px solid #fffdc3; text-align: center; 
	background: url(../img/bg_footer.jpg) top center; width: 100%; position: fixed; bottom: 0; }

@media screen and (max-width: 980px) { body { width: 980px; } }

/*# sourceMappingURL=layout.css.map */