@charset "UTF-8";
/* CSS Document */

body { background:#332211; color:#ffffff; }
body, textarea, select { font-family:微軟正黑體, Microsoft Jhenghei, Verdana, Helvetica, Arial, sans-serif; }
body, textarea { font-size:14px; }
select { font-size:.8em; }
body, html, *, div { margin:0; padding:0; }
table { border:none; border-collapse:collapse; border-spacing:0; }
img { border:none; }
a { text-decoration:none; color:red; }
a:hover { text-decoration:underline; }
p { font-size:1em; margin-bottom:1.3em; line-height:1.3em; 2text-align:justify; text-justify:inter-ideograph; }


/* UTIL */

.clr { clear:both; height:0; }
.floatL { float:left; }
.floatR { float:right; }
.last { margin:0; }
.hide { display:none; }

/* ESSENTIAL */

#header { width:100%; height:15px; background:#ff9900; border-bottom:1px solid #ffffff; margin-bottom:1em; }

#wrapper { width:780px; margin:0 auto; }

#wrapper #main { width:780px; margin:0 auto; float:left; background:#110d0b; }

#wrapper #main #top { width:100%; float:left; position:relative; }
#wrapper #main #top img { float:left; width:100%; }

#wrapper #main #hdr { position:relative; float:left; width:100%; z-index:2; }
#wrapper #main #hdr img { position:absolute; left:0; top:0; }
#wrapper #main #hdr.btm { background:none; }
#wrapper #main #hdr.btm img { position:relative; left:0; top:0; margin:50px 0 10px; }

#wrapper #main #contents { width:100%; float:left; position:relative; z-index:1; overflow:hidden; }
#wrapper #main #contents img { float:left; width:100%; transition:all 2s; }
#wrapper #main #contents img:hover { transform:scale(1.1); }
#wrapper #main #contents .text, #wrapper #main #contents .text2 { position:absolute; left:50px; top:1187px; width:307px; }
#wrapper #main #contents .text p, #wrapper #main #contents .text2 p { margin-bottom:1em; line-height:21px; font-size:12px; }
#wrapper #main #contents a { position:absolute; }

#wrapper #main #text { position:relative; float:left; width:100%; z-index:2; }
#wrapper #main #text #text_container { position:absolute; width:307px; }
#wrapper #main #text #text_container p { margin-bottom:1em; line-height:1.6em; font-size:14px; }
#wrapper #main #text #trailer { width:181px; height:47px; position:absolute; left:439px; top:39px; background:url('../img/trailer.png') 0 0 no-repeat; outline:0; }

#wrapper #main #zoom { width:100%; float:left; position:relative; transition:all 300ms; }
#wrapper #main #zoom * { transition:all 300ms; }
#wrapper #main #zoom a { width:100%; height:70px; float:left; position:relative; overflow:hidden; cursor:pointer; }
#wrapper #main #zoom a span { width:43px; height:43px; top:14px; right:27px; position:absolute; background-color:white; color:#363636; font-size:25px; line-height:43px; z-index:1; text-align:center; cursor:default; opacity:.5; filter:alpha(opacity=50); cursor:pointer; }
#wrapper #main #zoom a span i.icon-zoom-out { display:none; }
#wrapper #main #zoom a img { width:100%; position:absolute; left:0; top:0; z-index:0; 2transition:all 2s; }
#wrapper #main #zoom a img:hover { transform:scale(1.1); }
#wrapper #main #zoom a:hover span { opacity:1; filter:alpha(opacity=100); }
#wrapper #main #zoom a.active span i.icon-zoom-in { display:none; }
#wrapper #main #zoom a.active span i.icon-zoom-out{ display:inline; }
#wrapper #main #zoom a.active img { float:left; width:100%; position:relative; top:0 !important; transform:scale(1.1); }

#wrapper #main #infobox { width:100%; float:left; padding-top:1em; }
#wrapper #main #infobox .promoitm { width:236px; margin:0 0 1em 2.5em; float:left; display:inline; }
#wrapper #main #infobox .promoitm .poster { margin-bottom:1em; float:left; width:234px; }
#wrapper #main #infobox .promoitm .poster.border { border:1px solid #cccccc; }
#wrapper #main #infobox .promoitm .brand { float:left; }

#wrapper #main #infobox .promotion { width:460px; margin:0 2.5em 1em 0; float:right; overflow:hidden; display:inline; color:#ffffff; display:none; }
#wrapper #main #infobox .promotion.hide { display:none; }
#wrapper #main #infobox .promotion .disable, #wrapper #main #infobox .promotion .disable p, #wrapper #main #infobox .promotion .disable h1, #wrapper #main #infobox .promotion .disable a { color:#999999; }
#wrapper #main #infobox .promotion h1 { font-size:1.1em; color:red; margin-bottom:1em; }
#wrapper #main #infobox .promotion p { }
#wrapper #main #infobox .promotion .ticketcode { font-weight:bold; }
#wrapper #main #infobox .promotion .class3 { display:none; }
#wrapper #main #infobox .promotion .finish { display:none; }
#wrapper #main #infobox .promotion #terms { font-size:.8em; }
#wrapper #main #infobox .promotion #terms h2 { font-size:1em; text-decoration:underline; margin-bottom:1em; }
#wrapper #main #infobox .promotion #terms ol { margin-bottom:1em; }
#wrapper #main #infobox .promotion #terms ol li { margin-left:2em; }
#wrapper #main #infobox .promotion #terms strong { font-size:1.3em; color:red; }
#wrapper #main #infobox .specialthanks { margin-left:2.5em; }
#wrapper #main #infobox .sprt { background:#ff9900; height:1px; line-height:1px; width:100%; margin:.7em 0; overflow:hidden; }

#wrapper #footer { width:780px; margin:0 auto; background:white; float:left; color:#363636; }
#wrapper #footer a { color:#999999; }
#wrapper #footer a:hover { color:#333333; }
#wrapper #footer .btmnav { width:766px; padding:.5em 0 1.5em .5em; float:left; }
#wrapper #footer .btmnav li { list-style-type:none; font-size:.75em; float:left; padding-right:.3em; }
#wrapper #footer .btmnav li.copyright { float:none; width:100%; }
#wrapper #footer .btmnav li.copyright strong { color:#ff9900; font-weight:normal; }
#wrapper #footer .iconlineup { width:778px; height:60px; padding-right:2px; float:left; }
#wrapper #footer .iconlineup li { list-style-type:none; float:right; height:60px; }
#wrapper #footer .iconlineup li a { float:left; width:100%; height:100%; }
#wrapper #footer .iconlineup li.so002 { width:86px; background:url('/img/officialdist-so002.gif') 0 0 no-repeat; }
#wrapper #footer .iconlineup li.pjur { width:59px; background:url('/img/logo-pjur.gif') 0 0 no-repeat; }
#wrapper #footer .iconlineup li.sprt { height:22px; width:1px; margin:2em 6px 0 0; background:#999999; }
#wrapper #footer .iconlineup li.nielson { width:55px; background:url('/img/logo-nielsen.gif') 0 0 no-repeat; }
#wrapper #footer .iconlineup li.union { width:47px; background:url('/img/logo_nl.gif') 0 0 no-repeat; }
#wrapper #footer .iconlineup li.eps { width:42px; background:url('/img/logo-eps.gif') 0 0 no-repeat; }
#wrapper #footer .iconlineup li.visa { width:55px; background:url('/img/nv/vbv_logo_enus.gif') 0 0 no-repeat; }
#wrapper #footer .iconlineup li.mc { width:74px; background:url('/img/nv/sc_74x40.gif') 0 0 no-repeat; }
#wrapper #footer .iconlineup li.paypal { width:59px; background:url('/img/nv/logo3vs.gif') 0 0 no-repeat; }
#wrapper #footer .iconlineup li.alipay { width:72px; background:url('/img/nv/logo_alipay.gif') 0 0 no-repeat; }
#wrapper #footer .iconlineup li.hkpharmacy { width:86px; background:url('/img/nv/poison_zhhk.jpg') 0 0 no-repeat; }
#wrapper #footer .iconlineup li.neovision { width:125px; background:url('/img/logo-neovision.gif') 0 0 no-repeat; }
#wrapper #footer .iconlineup li.caringcompany { width:119px; background:url('/img/caringcompany2012.jpg') 0 0 no-repeat; }

.withlove { width:100%; position:relative; background-color:white; margin-bottom:28px; font-family:Arial,san-serif; overflow:hidden; }
.withlove, .withlove * { box-sizing:border-box; }
.withlove img { display:inline-block; vertical-align:top; width:100%; top:7.94%; }
.withlove h1 { background:url('../img/withlove-header.jpg') center center no-repeat; background-size:cover; width:100%; 2padding-bottom:8.97%; height:70px; line-height:70px; text-align:center; font-weight:normal; display:inline-block; vertical-align:top; }
.withlove .hdr { width:100%; padding:0 5.38%; }

.withlove .intro { display:inline-block; vertical-align:top; width:100%; position:relative; margin-top:48px; }
.withlove .intro .product {
	width:42.82%; width:48.2%; position:absolute; left:-1.02%; top:0; margin-top:14.94%;
	transform:none; transition:transform 1s;
	-webkit-transform:none; -webkit-transition:-webkit-transform 1s;
	-ms-transform:none; -ms-transition:-ms-transform 1s;
}
.withlove .intro .product:hover { transform:perspective(300px) rotateY(-10deg); }
.withlove .intro .text { width:47.3%; width:41.66%; margin-left:47.17%; margin-left:52.82%; position:relative; margin-top:70px; }
.withlove .intro .text p { font-size:14px; line-height:1.6em; color:#384c72; }
.withlove .intro .text img { width:242px; margin-bottom:40px; }

.withlove .description { padding:43px; padding:5.38%; display:inline-block; }
.withlove .description .typeface { width:46.82%; display:block; margin-bottom:40px; }
.withlove .description .text { width:46.82%; color:#384c72; }
.withlove .description .text p { font-size:14px; line-height:1.6em; }
.withlove .description .left { float:left; }
.withlove .description .right { float:right; }
.withlove .description .hdr { padding:0; width:auto; height:41px; margin-bottom:28px; }
.withlove .description ol { margin-left:18px; }
.withlove .description ol li { margin-bottom:18px; }

.withlove .photo { width:100%; }
.withlove .photo > div { width:50%; padding-bottom:50%; background:center center no-repeat; background-size:100%; float:left; transition:background-size 1s; }
.withlove .photo > div:hover { background-size:120%; }
.withlove .photo .left { background-image:url('../img/withlove-photo-l.jpg'); }
.withlove .photo .right { background-image:url('../img/withlove-photo-r.jpg'); }
.withlove .mv { width:100%; position:relative; float:left; }
.withlove .mv .symbol { width:185px; position:absolute; right:20px; bottom:20px; }


/* STATUS */

body.compli .promotion.compli { display:inline !important; }
body.compli .promotion.preview { display:none !important; }
body.preview .promotion.compli { display:none !important; }
body.preview .promotion.preview { display:inline !important; }

body.disable .promotion, body.disable .promotion p, body.disable .promotion h1, body.disable .promotion a, body.disable .promotion strong { color:#999999 !important; }
body.disable .promotion .ticketcode { display:none !important; }
body.disable .promotion .finish { display:block !important; color:#999999 !important; }

body.class3 .promotion .class3 { display:block !important; }


/* AMENDMENT */

body { background:#222; color:#ffffff; }
#wrapper #main { background:#fff; }
#wrapper #main #infobox .promotion, #wrapper #main #infobox .specialthanks { color:#384c72; }
#wrapper #main #top { }
#wrapper #main #hdr { background-color:#202d38; }
#wrapper #main #hdr img { left:43px; top:76px; width:209px; }
#wrapper #main #hdr.btm img { left:43px; width:209px; }
#wrapper #main #contents { }
#wrapper #main #text { color:#ffffff; background-color:#555555; }
#wrapper #main #text #text_container { left:43px; top:-478px; width:268px; }
#wrapper #main #text #text_container p { }
#wrapper #main #text #trailer { width:242px; height:135px; left:494px; top:-130px; }
#wrapper #main #zoom a span { background-color:white; color:#000; }


@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
	#wrapper #main #text #trailer { background:url('../img/trailer@2x.png') 0 0 no-repeat; background-size:100%; background-position:center center; }
}
@media screen and (min-width: 960px) {
	
}
@media screen and (max-width: 959px) {

}
@media screen and (max-width: 819px) {

}
@media screen and (max-width: 780px) {
	#wrapper { width:100%; }
	#wrapper #main { width:100%; }
	#wrapper #main #top { width:100%; background-size:100%; height:auto; }
	#wrapper #main #hdr, #wrapper #main #hdr.btm { background-color:#000; text-align:center; }
	#wrapper #main #hdr img, #wrapper #main #hdr.btm img { position:relative; display:inline-block; left:18px; top:0; margin:6.4% 0 3.2% 0 !important; width:30%; left:0; }
	#wrapper #main #hdr img { width:30%; }
	#wrapper #main #hdr.btm img { margin:0; }
	#wrapper #main #contents { width:100%; background-size:100%; height:auto; }
	
	#wrapper #main #contents { width:100%; float:left; position:relative; z-index:1; overflow:hidden; padding-top:70%; }
	#wrapper #main #contents img { position:absolute; top:-10%; left:0; width:100%; }
	
	#wrapper #main #text { }
	#wrapper #main #text #text_container { position:relative; left:0; top:0; display:block; width:auto; margin:6.3%; }
	#wrapper #main #text #trailer { width:242px; height:135px; left:auto; right:8%; top:-100px; }
	
	#wrapper #main #zoom a { height:auto !important; }
	#wrapper #main #zoom a span { display:none; }
	#wrapper #main #zoom a img { position:relative; width:100%; top:0 !important; left:0; float:left; }
	
	#wrapper #main #infobox .promotion { width:auto; margin:0; display:block; padding:5%; }
	#wrapper #main #infobox .promoitm { margin:0 auto; float:none; display:block; position:relative; text-align:center; }
	
	#wrapper #footer { width:auto; display:block; padding:4%; }
	#wrapper #footer .btmnav { width:auto; padding:.5em 0 1.5em .5em; float:left; padding:0; }
	#wrapper #footer .btmnav li { 2display:block; float:left; width:auto !important; }
	#wrapper #footer .btmnav li.copyright { margin-bottom:2%; }
	#wrapper #footer .iconlineup { width:auto; display:block; height:auto; padding-right:2px; float:left; padding:0; }
	#wrapper #footer .iconlineup li { float:left; }
	
	.withlove .intro .product { position:relative; left:auto; top:auto; width:100%; padding:0 5.38%; margin-top:28px; margin-bottom:28px; }
	.withlove .intro .text { width:100%; margin-left:0; margin-top:0; padding:0 5.38%; }
	
	.withlove .description .text { width:100%; }
}
@media screen and (max-width: 669px) {

}
@media screen and (max-width: 479px) {
	#wrapper #main #hdr img, #wrapper #main #hdr.btm img { width:50%; }
}
@media screen and (max-width: 349px) {
	
}