/* CSS Document */
@import url("https://fonts.googleapis.com/css?family=Noto+Sans:400,700|Sawarabi+Mincho|Sunflower:300,700|Trirong:400,700");
@import url("https://fonts.googleapis.com/earlyaccess/notosanstc.css");
@import url("https://fonts.googleapis.com/css?family=Play:400,700");
@import url("https://asset.msi.com/event/nb/2018/Prestige_Limited_Edition/css/Fonts_CenturyGothic.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;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	background: #000;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after {
	content: '';
	content: none;
}
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a {
	text-decoration: none;
 noFocusline: expression(this.onFocus=this.blur());
	outline: 0;
}
a:hover {
	text-decoration: none;
}
a:focus {
	-moz-outline-style: none;
}
/*img*/
img {
	max-width: 100%;
 width: expression(document.body.clientWidth>100?"100%":"auto");
	overflow: hidden;
}
 @keyframes arrow {
 0% {
 transform: translateX(0px);
 opacity: 0;
}
 100% {
 transform: translateX(10px);
 opacity: 1;
}
}
 @keyframes arrowY {
 0% {
 transform: translateY(0px) rotate(90deg);
 opacity: 0;
}
 100% {
 transform: translateY(10px) rotate(90deg);
 opacity: 1;
}
}
 @keyframes colorful {
 0% {
 -webkit-filter: hue-rotate(0deg);
 filter: hue-rotate(0deg);
}
 100% {
 -webkit-filter: hue-rotate(360deg);
 filter: hue-rotate(360deg);
}
}
 @keyframes color {
 from {
 -webkit-filter: hue-rotate(0deg);
 filter: hue-rotate(0deg);
}
 to {
 -webkit-filter: hue-rotate(359deg);
 filter: hue-rotate(359deg);
}
}
* {
	-webkit-transition: 0.5s ease-in-out;
	transition: 0.5s ease-in-out;
	box-sizing: border-box;
}
#au-monitor-b {
	font-family: 'DINCond-Medium', Helvetica, Arial, sans-serif;
	color: #000;
	overflow: hidden;
	margin: 0 auto;
	background-size: 100% auto;
	color: #fff;
}
#au-monitor-b .kvinfo {
	position: absolute;
	top: 20%;
	font-size: 2em;
	text-align: left;
	left: 2%;
	width: 27%;
	font-family: 'DINPro-Medium', sans-serif;
	text-transform: uppercase;
}
#au-monitor-b .kvinfo h2 {
	font-size: 140%;
	font-weight: bold;
	letter-spacing: -2px;
	padding-top: 15px;
	line-height: 1.2;
}
#au-monitor-b .kv {
	position: relative;
}
#au-monitor-b .kv img {
	width: 100%;
}
#au-monitor-b .kv a {
	color: #f00;
	text-decoration: none;
	background: #fff;
	padding: 5px 15px;
	margin-top: 25px;
	display: inline-flex;
	cursor: pointer;
}
#au-monitor-b .kv a:hover {
	background: #000;
}
#au-monitor-b .kv .dt {
	position: absolute;
	bottom: 20px;
	color: rgba(220,220,220,1.00);
	left: 2%;
}
#au-monitor-b .kv .dt p {
	font-size: 1.5em;
}
#au-monitor-b .kv .dt p span {
	font-size: 0.6em;
}
#au-monitor-b .b2 {
	background: url(https://storage-asset.msi.com/event/2019/au_eofy_netflix/images/bg1.jpg);
	padding: 5% 0px 0px;
	background-size: 100%;
	background-position: 50% 32%;
}
#au-monitor-b .b3 {
	padding-bottom: 5%;
	background: url(https://storage-asset.msi.com/event/2019/au_eofy_netflix/images/b2_bg.jpg) no-repeat;
}
#au-monitor-b .b2 .boxrow {
	display: flex;
	flex-wrap: wrap;
	width: 80%;
	margin: 0 auto;
	padding-bottom: 5%;
}
#au-monitor-b .b2 .boxrow p {
	font-size: 130%;
}
#au-monitor-b .b2 .td {
	width: 50%;
}
#au-monitor-b .b2 .td .tdblue {
	background: url(https://storage-asset.msi.com/event/2019/au-dt-eofy-bundle/images/bg_blue.png) no-repeat center;
	padding-top: 3%;
	background-size: 100%;
}
#au-monitor-b .b2 .pru {
	background: url(https://storage-asset.msi.com/event/2019/au-dt-eofy-bundle/images/bg_pru.png) no-repeat center;
	padding-bottom: 8%;
	background-size: cover;
	text-align: center;
}
#au-monitor-b .b2 .pru a {
	text-align: center;
	color: rgba(232,232,232,.7);
	display: block;
}
.img80 {
	width: 70%;
	max-width: 350px;
}
#au-monitor-b .b4 {
	background: url(https://storage-asset.msi.com/event/2019/au_eofy_netflix/images/b2_bg_2.jpg);
	padding: 3% 0px;
	background-size: cover;
}
#au-monitor-b .redeem {
	text-align: center;
	background-size: cover;
	padding-bottom: 5%;
}
#au-monitor-b .redeem .step-wrap {
	display: flex;
	justify-content: center;
}
#au-monitor-b .redeem .step-wrap .step {
	max-width: 300px;
	margin: 0 1%;
}
#au-monitor-b .redeem .step-wrap .step h3 {
	text-shadow: 0 0 15px #8382e1, 0 0 15px #8382e1, 0 0 15px #8382e1;
	margin: 0px 0 20px;
	color: #fff;
	font-size: 140%;
}
#au-monitor-b .redeem .step-wrap .arrow {
	position: relative;
}
#au-monitor-b .redeem .step-wrap .arrow i {
	font-size: 54px;
	position: absolute;
	top: 35%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#au-monitor-b .redeem .redeem-btn {
	margin-top: 3%;
}
#au-monitor-b .redeem .redeem-btn button {
	font-size: 1.2em;
	letter-spacing: 1px;
	background: transparent;
	padding: 10px 5%;
	border-radius: 45px;
	margin: 15px 10px 0;
	border: 2px solid #756ed7;
	transition: all 0.5s ease;
	outline: none;
	font-weight: bold;
}
#au-monitor-b .redeem .redeem-btn button:hover {
	border: 2px solid #fff;
	background-position: 100% 0;
	background-size: 200% 200%;
	box-shadow: 0 0 20px #8382e1, inset 0 0 20px #8382e1, 0 2px 0 #8382e1;
}
#au-monitor-b .redeem .step-wrap .step {
	width: 60%;
	margin: 0 auto;
}
#au-monitor-b .redeem .step-wrap .step a {
	color: #8382e1;
	font-size: 24px;
}
#au-monitor-b .redeem .step-wrap .arrow {
	padding-bottom: 36px;
}
#au-monitor-b .redeem .step-wrap .arrow i {
 transform rotate(90deg)
}
h1 {
	font-size: 1.6em;
	text-transform: uppercase;
	padding-top: 30px;
	line-height: 1.25;
	text-align: center;
	position: relative;
	z-index: 99;
	transform: skewY(-0.3deg);
	margin-bottom: 25px;
	font-family: 'DINCond-Medium-Regular', sans-serif;
	font-size: 1.8em;
	color: #fd006f;
}
/*
#au-monitor-b .f1 .eligible_model_cost h1::after,#au-monitor-b .f1 .eligible_model_cost h1::before{display: none!important;}
#au-monitor-b .f1 .eligible_model_cost h1{color: #fd006f;font-size: 190%; }
*/
h1::before, h1::after {
	width: 30%;
	margin: 0 auto;
	text-align: center;
	display: block;
	top: 50%;
	z-index: 1;
	content: '';
	transition-property: background border;
	transition-duration: .2s;
	transition-timing-function: ease-out;
	transition-delay: initial;
	-webkit-animation: lightglow 0.5s ease-in-out infinite alternate;
	-moz-animation: lightglow 0.5s ease-in-out infinite alternate;
	animation: lightglow 0.5s ease-in-out infinite alternate;
}
 @keyframes lightglow {
 0% {
border:1px dashed rgba(253,0,111,1.00);
 box-shadow: 0 0 20px rgba(253,0,111,1.00), 0 0 20px rgba(253,0,111,1.00), inset 0 0 20px rgba(253,0,111,1.00);
}
 50% {
 border:1px dashed #fd006f;
 box-shadow: 0 0 20px rgba(0,50,255,1.00), 0 0 20px rgba(0,50,255,1.00), inset 0 0 20px rgba(0,50,255,1.00);
}
 100% {
 border:1px dashed #fd006f;
box-shadow: 0 0 20px rgba(253,0,111,1.00), 0 0 20px rgba(253,0,111,1.00), inset 0 0 20px rgba(253,0,111,1.00);
}
}
#au-monitor-b .shout p {
	color: #fff;
	position: absolute;
	bottom: 0.5%;
	text-align: center;
	left: 0;
	right: 0;
	font-size: 200%;
	line-height: 1.2;
	font-weight: bold;
	text-transform: uppercase;
	text-shadow: 5px 5px 5px #000;
}
#au-monitor-b .shout {
	position: relative;
	z-index: 1;
}

@media (min-width:320px) and (max-width:768px) {
}

@media (min-width:769px) and (max-width:992px) {
}

@media (max-width: 1680px) {
#au-monitor-b .kvinfo {
	font-size: 1.5em;
	top: 13%;
}
#au-monitor-b .kvinfo h2 {
	letter-spacing: 0px;
}
}

@media (max-width: 1320px) {
#au-monitor-b .kvinfo {
	font-size: 1.2em;
}
#au-monitor-b .kv a {
	margin-top: 5px;
}
}

@media (max-width: 1024px) {
#au-monitor-b .kvinfo {
	font-size: 1em;
}
}

@media (max-width: 767px) {
#au-monitor-b .shout p {
	font-size: 130%;
}
#au-monitor-b .kvinfo {
	text-align: center;
	position: relative;
	top: 0px;
	font-size: 1em;
	width: 100%;
	background: #fe0000;
	left: 0px;
}
#au-monitor-b .kvinfo h2 {
	font-size: 200%;
	letter-spacing: normal;
}
}
.arrowDown {
}

/* animita*/
@-webkit-keyframes arrowDown {
 0% {
 opacity: 1;
 transform: translate(0px, 0px);
}
 65% {
 opacity: 1;
 transform: translate(0px, 5px);
}
 100% {
 opacity: 1;
 transform: translate(0px, 0px);
}
}
 @keyframes arrowDown {
 0% {
 opacity: 1;
 transform: translate(0px, 0px);
}
 65% {
 opacity: 1;
 transform: translate(0px, 5px);
}
 100% {
 opacity: 1;
 transform: translate(0px, 0px);
}
}
