@font-face {
  font-family: 'Clear Sans';
  src: url('../fonts/clearsans_regular/ClearSans-Regular-webfont.eot'); /* IE9 Compat Modes */
  src: url('../fonts/clearsans_regular/ClearSans-Regular-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/clearsans_regular/ClearSans-Regular-webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/clearsans_regular/ClearSans-Regular-webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('../fonts/clearsans_regular/ClearSans-Regular-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/clearsans_regular/ClearSans-Regular-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

/* reset css */
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-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* ---------------- global ---------------- */
body{
	text-align: center;
	font-family: 'Clear Sans', "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	letter-spacing: 0.05em;
	color: #f19b9a;
	line-height: 1.5;
}
h3{width: 100%; display: block; margin: 0px auto;}

a:link{color: #4fc0b2; text-decoration: none;}
a:visited{color: #4fc0b2;}
/*
.container-center{
	display: inline-block;
	margin: 0px;
	padding: 0px;
	text-align: center;
}
*/
.text-left{
	text-align: left;
}
.container-left{
	display: inline-block;
	margin: 0px;
	padding: 0px;
	text-align: left;
}
.container-form{
	display: inline-block;
	margin: 0px;
	text-align: left;
	border-radius: 10px;
	width: 100%;
}
/* input submit reset */
input[type=submit]{
    background: none;
    border: 0;
    color: inherit;
    /* cursor: default; */
    font: inherit;
    /* line-height: normal; */
    overflow: visible;
    padding: 0;
    -webkit-appearance: button; /* for input */
    -webkit-user-select: none; /* for button */
       -moz-user-select: none;
        -ms-user-select: none;
}
input::-moz-focus-inner,
button::-moz-focus-inner {
    border: 0;
    padding: 0;
}
input[type=submit],
.button {
	display: inline-block;
	cursor: pointer;
	padding: 10px 25px;
	margin: 20px 0px 0px 0px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	color:#fff!important;
	font-size:1.1em;
	letter-spacing: 0.05em;
	text-decoration: none;
	background: #f19b9a;
/* 	background: #e36463; */
	box-shadow: 2px 2px 10px #E8E3BC;
	margin: 20px 0px 50px;
}
.fucking_space{width: 10px; height: 10px; display: inline-block;}

input[type=submit]:hover,
input[type=submit]:focus,
.button:hover,
.button:focus {
	background-color: #89334e;
	color: #ffffff;
}
.form-submit .button-no-bottom-space{
	margin-bottom: 0px;
}

input[type=text]{
	width: 280px;
	padding: 10px 15px;
	margin-left: 0px;
	background-color: #fff;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	box-shadow: 2px 2px 8px #E8E3BC;
	color:#333333;
	letter-spacing: 0.05em;
	/* box-shadow: inset 0px 2px 3px rgba( 143, 165, 225, 0.3 ); */
	font-size:.8em;
	font-family: 'Clear Sans', "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	border: 0px;
	/* box-shadow: 0px 0px 10px #ccc; */
	border: 1px solid #f1f1f1;
}

input[type=text]:hover, input[type=text]:focus{
	background-color: #ffffff;
	outline: none;
}

input[type=tel]{
	width: 280px;
	padding: 10px 15px;
	margin-left: 0px;
	background-color: #fff;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	box-shadow: 2px 2px 8px #E8E3BC;
	color:#333333;
	letter-spacing: 0.05em;
	/* box-shadow: inset 0px 2px 3px rgba( 143, 165, 225, 0.3 ); */
	font-size:.8em;
	font-family: 'Clear Sans', "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	border: 0px;
	/* box-shadow: 0px 0px 10px #ccc; */
	border: 1px solid #f1f1f1;
}

input[type=tel]:hover, input[type=tel]:focus{
	background-color: #ffffff;
	outline: none;
}


/*
input[type=checkbox]{
	width: 50px;
	padding: 10px 15px;
	margin-left: 0px;
	background-color: #fff;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	box-shadow: 2px 2px 8px #E8E3BC;
	color:#333333;
	letter-spacing: 0.05em;
	font-size:.8em;
	border: 0px;
	border: 1px solid #f1f1f1;
}
*/

/* ------ checkbox ------- */

.checkbox-custom {
    opacity: 0;
    position: absolute;
}

.checkbox-custom, .checkbox-custom-label {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
}

.checkbox-custom-label{
    position: relative;
}

.checkbox-custom + .checkbox-custom-label:before{
    content: '';
    background: #fff;
    border: 1px solid #f1f1f1;
    border-radius: 8px;
	box-shadow: 2px 2px 8px #E8E3BC;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    padding: 2px;
    margin-right: 10px;
    text-align: center;
}

.checkbox-custom:checked + .checkbox-custom-label:before {
    content: "✔";
/*     font-family: 'FontAwesome'; */
    background: #fff;
    color: #333/* f19b9a */;
}

.checkbox-custom:focus + .checkbox-custom-label{
  outline: 1px solid #ddd; /* focus style */
}

/* ------ checkbox end -------- */

p.wt_txt3.checkbox-text{
	margin-top: 22px;
	margin-bottom: 14px;
}
.checkbox-line-height-fix{
	vertical-align: middle;
}
.hide-raffle-rule{
	display: none;
}

.captcha-img img{
	margin-left: 10px;
	vertical-align: middle;
}
#captcha{ max-width: 260px;}
.reloadCaptchaBtn{
	font-size: 0.8em;
	vertical-align: middle;
	margin-left: 8px;
	border: 1px solid #4fc0b2;
	border-radius: 8px;
	padding: 2.75px 15px;
}
.reloadCaptchaBtn:hover{
	color: #fff;
	background: #4fc0b2;
}

/* ---------------- sticker intro ---------------- */

.description{
	background-color:;
}
.sticker-info1{
	margin-bottom: 10px;
	margin-top: 0px;
	color: #f19b9a;
	font-size: 1.6em;
	font-family: 'Clear Sans', "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	padding-bottom: 10px;
	/* dotted line */
	background-image: linear-gradient(to right, #ccc 20%, rgba(255, 255, 255, 0) 0%);
    background-position: bottom;
    background-size: 10px 2px;
    background-repeat: repeat-x;
}

/* blockquote start */
blockquote{
  display:block;
  background: rgba(255, 255, 255, 0.8);
  padding: 15px 25px 15px 55px;
  margin: 20px;
  position: relative;

  /*Font*/
/*
  font-family: Georgia, serif;
  font-size: 16px;
  line-height: 1.2;
  color: #666;
*/
/*   text-align: center; */
  letter-spacing: 0.05em;
  font-style: italic;

  /*Borders - (Optional)*/
  border-left: 15px solid #f19b9a /* #fff */;
  border-right: 2px solid /* #f19b9a */ #fff;
  border-radius: 8px;

  /*Box Shadow - (Optional)*/
  -moz-box-shadow: 2px 2px 15px #E8E3BC;
  -webkit-box-shadow: 2px 2px 15px #E8E3BC;
  box-shadow: 2px 2px 15px #E8E3BC;
}

blockquote::before{
  content: "\201C"; /*Unicode for Left Double Quote*/

  /*Font*/
  font-family: Georgia, serif;
  font-size: 60px;
  font-weight: bold;
  color: #a9a9a9;

  /*Positioning*/
  position: absolute;
  left: 10px;
  top:0px;
}

blockquote::after{
  /*Reset to make sure*/
  content: "";
}

blockquote a{
  text-decoration: none;
  background: #eee;
  cursor: pointer;
  padding: 0 3px;
  color: #c76c0c;
}

blockquote a:hover{
 color: #666;
}

blockquote em{
  font-style: italic;
}

blockquote cite {
color: #a9a9a9;
font-size: 14px;
display: block;
text-align: right;
font-style: italic;
margin-top: 5px;
}

blockquote cite:before {
content: "\2014 \2009";
}


/* blockquote end */

.sticker-info{
	margin-bottom: 0px;
	margin-top: 25px;
	margin-bottom: 10px;
	color: #3ae5cb;
}
.text-center{
	text-align: center;
}

.container-left ol li {
  position: relative;
  margin-bottom: 20px;
}

.container-left li p {
  padding-left: 40px;
}

.container-left span {
  position: absolute;
}

.sticker-img img{
	width: 100px;
	margin: 5px 0px 10px;
}
.sticker01{
	padding:0px;
}
.sticker02, .sticker03{
	padding:0px 0px 0px 15px;
}
.sticker04{
	display: inline-block;
	width: 460px;
	clear: both;
	margin: 15px 0px 25px;
}
/* ---------------- sticker verify ---------------- */

.radio_item{
	display: none !important;
}

.label_item {
	opacity: 0.1;
}

.radio_item:checked + label {
	opacity: 1;
}

.select-logo{
	width: 100px;
}

/* ---------------- sticker verify ---------------- */

.brand-selector input{
    margin:0;padding:0px;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}

.laysmon{ background-image:url("img/laysmon-logo.png");}
.rosa{ background-image:url("img/rosa-logo.png"); }
.atlie{ background-image:url("img/atlie-logo.png"); }
.lifpia{ background-image:url("img/lifpia-logo.png"); }

.brand-selector input:active +.brand-logo{opacity: 1;}
.brand-selector input:checked +.brand-logo{
    -webkit-filter: none;
       -moz-filter: none;
            filter: none;
}

.inner{
	display: block;
	vertical-align: middle;
}

.brand-logo{
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    width:70px;height:70px;
    margin-left: 1px;
    -webkit-transition: all 100ms ease-in;
       -moz-transition: all 100ms ease-in;
            transition: all 100ms ease-in;
    -webkit-filter: brightness(0) grayscale(1) opacity(.8);
       -moz-filter: brightness(0) grayscale(1) opacity(.8);
            filter: brightness(0) grayscale(1) opacity(.8);
}
.brand-logo:hover{
    -webkit-filter: brightness(1.3) grayscale(0) opacity(1);
       -moz-filter: brightness(1.3) grayscale(0) opacity(1);
            filter: brightness(1.3) grayscale(0) opacity(1);
}

/* ---------------- sticker verify results ---------------- */


.text-large{
	margin-top: 0px;
	color: #f19b9a;
	font-size: 1.6em;
	font-family: 'Clear Sans', "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
.text-medium{
	font-size: 1.25em;
}
.last-line-l{
	margin-bottom: 5px;
}
.last-line-m{
	margin-bottom: 30px;
}

.button-top-margin{
	margin-top: 20px;
}

/* ---------------- raffle form ---------------- */

.date{
	display: inline-block;
}
.datefield {
    display: inline;
    width: 280px;
    padding: 15px 15px;
    margin-left: 10px;
    border: 1px solid #c9c9c9;
    color: #333;
    background-color: #f7f4ff;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	box-shadow: inset 0px 2px 3px rgba( 143, 165, 225, 0.3 );
	font-size:.8em;
	font-family: "PingFang TC";
}

.datefield input {
    width: 60px;
    border: none;
    font-size: 1em;
    background-color: #f7f4ff;
}

.datefield input#year { width: 120px;}
.datefield input:focus { outline:none; }

/*
select {
		border: 0 !important;
		width: 312px;
		height: 50px;
		margin-left: 0px;
		color: #333;
		font-size: .8em;
		font-family: "PingFang TC";
		border: 1px solid #c9c9c9;
		border-radius: 3px;
		padding: 15px;
		box-shadow: inset 0px 2px 3px rgba(143, 165, 225, 0.3);
	}
*/

/* ---------------- for fun ---------------- */
h1{
	text-align: center;
	font-size: 2 00px;
}




/*other*/
.error { color:#89334e; margin-left: 5px; }

.ui-datepicker-trigger {
	margin-left: 10px;
	position: absolute;
	top: 308px;
}
#ui-datepicker-div{top: 346px;}
.security_title{color: #f19b9a;}




#zalo , #facebook , #address , #storeNo , #mobile , #email , #insideSticker , #outsideSticker , #lotteryNumber{width: 92%;}
#address{margin: 10px 0px 0px;}

.number{width: 100%;}
.wt_txt{margin: 0px 0px 0px; display: block;}
.wt_txt2{margin: 5px 0px 5px 15px; display: block; color: /* #c6c9ce */ #a9a9a9; font-size: 0.8em;}
.wt_txt3{margin: 8px 0px 5px; display: block; clear: both; width: 100%;}
.all_brand{margin: 0px}

.wt_button{width: 535px;}
.wt_number{color: #4fc0b2; font-size: 24px;}

/*
.film_category {
    margin: 0px 10px 10px 0px;
    width: 200px;
    overflow: hidden;
    border: 1px solid #f1f1f1;
    border-radius: 8px;
    box-shadow: 2px 2px 8px #E8E3BC;
    background: #fff url("img/arrowdown.gif") no-repeat 90% 50%;
}
*/
/* reset default select dropdown style */
/*
.film_category select{
	border:none;
    background-image:none;
    background-color:transparent;
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}
.film_category select {
    padding: 5px 8px; margin: 0px 0px 0px 0px!important;
    padding: 10px 15px;
    width: 180px;
    color: #a9a9a9;
    letter-spacing: 0.05em;
    font-size: .8em;
    font-family: 'Clear Sans', "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
.film_category select:focus {
    outline: none;
}
.float_wtf{float: left;}
*/






/* placeholder text fade out transition */
::-webkit-input-placeholder {
  color: #a9a9a9;
  -webkit-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}
:-moz-placeholder {
  color: #a9a9a9;
  -moz-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}
::-moz-placeholder {
  color: #a9a9a9;
  -moz-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}
:-ms-input-placeholder {
  color: #a9a9a9;
  -ms-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}


/* Place Holder CSS for Focus */
:focus::-webkit-input-placeholder {
  opacity: 0;
  -webkit-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}
:focus:-moz-placeholder {
  opacity: 0;
  -moz-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}
:focus::-moz-placeholder {
  opacity: 0;
  -moz-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}
:focus:-ms-input-placeholder {
  opacity: 0;
  -ms-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}


/* reset select */

.minimal {

  /* styling */
  background-color: white;
  margin: 0px 0px 10px 0px;
  width: 200px;
  overflow: hidden;
  border: 1px solid #f1f1f1;
  border-radius: 8px;
  box-shadow: 2px 2px 8px #E8E3BC;
  padding: 10px 15px;
  color: #a9a9a9;
  letter-spacing: 0.05em;
  font-size: .8em;
  font-family: 'Clear Sans', "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

  /* reset */

  /*   margin: 0; */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* select minimal arrows */

.minimal {
  background-image:
  	linear-gradient(45deg, transparent 50%, #f19b9a 50%),
    linear-gradient(135deg, #f19b9a 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
}

.select-box-left{
  margin-right: 10px;
}

select:focus {
    outline: none;
}
.float_wtf{float: left;}
.fb_iframe_widget{bottom: 2px;}
.top-space{margin-top:25px;}

/* media queries */


@media only screen and (max-width: 600px) {

	/* main */
	body{ margin: 0px;}

	.container-form{
		width: 100%;
		margin: 0 auto;
		padding: 0px;
	}
	.container-left{ width: 100%;}
	.sticker-info1{ width: 100%;}
	.stickr-info{ width: 100%;}
	.sticker04{ width: 100%;}
	.text-center{ width: 100%;}

	/* 貼紙介紹頁面 */
	input[type=submit],
	.button {
		display: block;
		width: 100%;
		padding: 10px 0px;
		margin: 0px;
	}
	.sticker-img img{
		width: 28%;
	}
	.fucking_space{ display: block; height: 10px;}


	/* 防偽驗證頁面 */
	.brand-logo{ width: 21%;}
	#zalo , #facebook , #address , #storeNo ,
	#mobile , #email , #insideSticker , #outsideSticker , #lotteryNumber, #name{ width: 84%;}
	#captcha{ width: 44%; max-width: none;}
	a.reloadCaptchaBtn{ line-height: 4;}
	a.button{ text-align: center;}

	input[type=tel], input[type=text]{ font-size: 16px;}
	.all_brand{ margin: 0px 0px -12px 0px;}
	input#laysmon, input#rosa, input#atlie, input#lifpia{ display: none;}
	.minimal{ font-size: 16px; width: 230px;}


	/*驗證結果頁面 */
	.last-line-m{ margin-bottom: 10px;}


	/* 填寫資料頁 */
	#birthday{ width: 66%;}
	img.ui-datepicker-trigger{ margin-left: 10px; position: static;}
	.ui-datepicker{ width: 96%;}


	/* 資料送出頁 */
	.mobile-other-raffle-btn{ margin-top: -13px;}
	.mobile-form-submit-btns{ margin-top: 20px;}

 }