@import url('animate.css');
* { margin: 0; padding: 0; }
*:focus { outline: none; }

body { margin: 0; min-height: 100vh; background: url(../images/img-bodyBg.jpg) no-repeat 50% / cover; }
body ::selection { background: #1e1d24; color: #fff; }
body::-webkit-scrollbar { width: 5px; }
body::-webkit-scrollbar-track { background: #1e1d24; }
body::-webkit-scrollbar-thumb { background: #696870; }
body::-webkit-scrollbar-thumb:hover { background: #7f7d89; }

header, footer, div, nav, article, h2, h3, h4, h5, h6, hr, p, form, label, input, textarea, ul, li, img, span, font, strong, b, a, i{ text-align: left; vertical-align: middle; margin: 0; padding: 0; line-height: 170%; border-width: 0; font-family: "微軟正黑體", "蘋果儷中黑", "Lucida Grande", "Arial", "Arial Narrow"; font-size: 14px; word-wrap: break-word; word-break: break-all; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }

:before , :after { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }

ul, ol { list-style: none; }

fieldset { border: 0; }

input,button,select,textarea { outline:none }

img { max-width: 100%; }

a:link , a:visited , a:hover { text-decoration: none; vertical-align: initial; }

* html .clearfix { height: 1%; }

.clearfix { display: block; }

livedemo00.template-help:after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

/* wow */
.wow { animation-fill-mode: both; -webkit-animation-fill-mode: both; animation-duration: 1s; -webkit-animation-duration: 1s; }

/* wrapper */
.wrapper { position: relative; margin: 0 auto; width: 90vw; }
.wrapper a { position: absolute; width: 100%; height: 100%; display: block; }
.wrapper .row.txtBox .title { margin-bottom: 50px; }
.wrapper .row.txtBox .title p { text-shadow: 0 0 13px #fff; line-height: 130%; font-weight: bold; font-size: 5vw; color: #fff; }
.wrapper .row.txtBox .title p:nth-child(2) { line-height: 100%; font-size: 6vw; letter-spacing: .5vw; }
.wrapper .row.txtBox p { font-size: 3vw; color: #fff; }
.wrapper .row.txtBox p.win { margin-bottom: 2vw; font-weight: bold; font-size: 4vw; }
.wrapper .row.txtBox p.win b { display: inline-block; font-size: 4vw; color: #efc970; vertical-align: bottom; -webkit-animation: jackInTheBox 1s infinite alternate ease-in-out; animation: jackInTheBox 1s infinite alternate ease-in-out; }
.wrapper .row.screenBox { margin-top: 3vw; }

@media screen and (min-width: 769px) {
	.wrapper { padding-top: calc(50vh - 18vw); height: 36vw; }
	.wrapper .row { float: right; width: 50vw; }
	.wrapper .row.txtBox { margin-left: 5vw; width: 35vw; }
}
@media screen and (max-width: 768px) {
	.wrapper { padding: 8vh 0 5vh; }
	.wrapper .row.txtBox .title { margin-bottom: 5vw; }
	.wrapper .row.txtBox .title p { text-align: center; font-size: 10vw; }
	.wrapper .row.txtBox .title p:nth-child(2) { line-height: 130%;  font-size: 12vw; letter-spacing: .7vw; }
	.wrapper .row.txtBox p , .wrapper .row.txtBox p.win , .wrapper .row.txtBox p.win b { text-align: center; font-size: 5vw; }
	.wrapper .row.txtBox p img { width: 75vw; }
	.wrapper .row.screenBox { margin: 0 auto; padding-top: 8vw; width: 70vw; }
}