body{font-family:  'Noto Sans TC', serif;overflow-x: hidden;font-weight: 600;background:#ddd;margin-bottom: 100px}
* {
  scrollbar-width: thin;
  scrollbar-color: blue orange;
}
*::-webkit-scrollbar {
  width: 12px;
}
*::-webkit-scrollbar-track {
  background: #000;
}
*::-webkit-scrollbar-thumb {
  background-color: #931b49;
  border-radius: 20px;
  border: 3px solid #000;
}

.page-camp #form1{height:100%}

h1,h2,h3,h4,h5,h6{font-weight:700;}

.container-sm {}
@media (min-width: 576px) {
.container-sm {max-width: 540px;}}
@media (min-width: 768px) {
.container-sm {max-width: 720px;}} 
@media (min-width: 992px) {
.container-sm {max-width: 960px;}}
@media (min-width: 1200px) {
.container-sm {max-width: 960px;}}

.container-lg {max-width: 360px;}
@media (min-width: 576px) {
.container-lg {max-width: 540px;}}
@media (min-width: 768px) {
.container-lg {max-width: 720px;}} 
@media (min-width: 992px) {
.container-lg {max-width: 900px;}}
@media (min-width: 1100px) {
.container-lg {max-width: 1080px;}}
@media (min-width: 1280px) {
.container-lg {max-width: 1260px;}}
@media (min-width: 1460px) {
.container-lg {max-width: 1440px;}}
@media (min-width: 1640px) {
.container-lg {max-width: 1620px;}}
@media (min-width: 1820px) {
.container-lg {max-width: 1800px;}}

.nav.nav-menu{position:fixed;bottom:0px;z-index: 999;width:100%;display: flex;background: #fff;box-shadow: 0px 0px 15px rgba(0,0,0,0.2);}
.nav.nav-menu a:link,.nav.nav-menu a:visited{display:block;color:#007bff;padding: 10px 0px;font-size: 10px;text-decoration: none;}
.nav.nav-menu a i,.nav a span{display:block}
.nav.nav-menu a i{font-size:24px;}
.nav.nav-menu a span{font-weight: normal}
body.page-home .nav a[title~="menu-home"],
body.page-login .nav a[title~="menu-login"],
body.page-comments .nav a[title~="menu-comments"],
body.page-live .nav a[title~="menu-live"],
body.page-profile .nav a[title~="menu-login"]{color:#aaa;background:#f6f6f6;}

.page-home {
    background: url(../images/bg-camp-kv2.jpg) no-repeat;
    background-size: cover;
    background-color: #010745;
    color: #ff0;
}
.page-home .btn-homelogin{background:#ff0;border-radius:50px;font-size: 12px;font-weight: bold;}
.page-home .container-home{padding:25px;}
.page-home .container-home .col-6{padding:10px;}
.page-home .card{background:url(../images/bg-award.jpg) #fa0;background-size:cover;background-position:center center;color:#fff;border:none;border-radius: 20px;overflow: hidden;border: dotted 5px #fa0;}
.page-home .card h5{color: #ff0}
.page-home .card h5 img{width:20px;}
.page-home .card h3{font-size: 14px;}
.page-home .card .btn{border-radius:50px;font-size: 12px;font-weight: bold;background:#ff0;}

.page-comments{background:url(../images/bg-camp.jpg) #590e46 fixed;background-size:cover;background-position:center center;color:#ff0;}
.grid{padding-top:50px;padding-bottom: 200px}
.grid-comment {width: 170px;margin:5px 5px 15px; padding:8px 15px;float: left;border:none;background: rgb(255,145,0);background: linear-gradient(0deg, rgba(255,145,0,1) 0%, rgba(255,255,0,1) 100%);color:#000;border-radius:15px;position: relative;box-shadow: 0px 5px 5px rgba(0,0,0,0.4)}
.grid-comment:after{content:'';display: block;width: 25px;height: 13px;background: url(../images/comment.png) ;position: absolute;bottom: -13px;right: 30px;}
.grid .message{line-height:1.2rem;margin-bottom: 5px;color: #000;font-weight: bold;;font-size: 14px;}
.grid .info{font-size: 12px;font-weight: normal;color:rgba(0,0,0,0.4);text-align: right;}
.grid .info .info-member{color:#000;margin-right:5px;font-weight: bold;}

/*直播畫面*/
html,body.page-live {height: 100%;}
body.page-live {display: -ms-flexbox;display: flex;-ms-flex-align: center;align-items: center;padding-top: 40px;padding-bottom: 40px;background:url(../images/bg-camp.jpg) #590e46 fixed;background-size:cover;background-position:center center;color:#ff0;}
.page-liveinfo{width: 100%;max-width: 330px;padding: 15px;margin: auto;text-align: center}
.page-liveinfo .btn{background:#ff0;border-radius:50px;font-size: 20px;font-weight: bold;}

/*登入畫面*/
html,body.page-login {height: 100%;}
body.page-login {display: -ms-flexbox;display: flex;-ms-flex-align: center;align-items: center;background:url(../images/bg-camp-kv.jpg) #590e46 fixed;background-size:cover;background-position:center center;color:#007bff;}
.form-signin {width: 100%;max-width: 330px;padding: 15px;margin: auto;}
.form-signin img {width:200px;}
.form-signin .checkbox {font-weight: 400;}
.form-signin .form-control {position: relative;box-sizing: border-box;height: auto;padding: 10px;font-size: 16px;}
.form-signin .form-control:focus {z-index: 2;}
.form-signin input[type="text"] {border-radius: 20px;-1px;border-bottom-right-radius: 0;border-bottom-left-radius: 0;text-align: center}
.form-signin input[type="password"] {border-radius: 20px;margin-bottom:20px;border-top-left-radius: 0;border-top-right-radius: 0;text-align: center}
.page-login .btn-homelogin {background: #007bff;border-radius: 50px;font-size: 18px;font-weight: bold;color:#fff;}
.note{font-size:12px;color: rgba(255,255,255,.4)}

/*個人畫面*/
body.page-profile {height: 100%;background:#72002c;}
.profile-main{background:#931b49;padding:20px 0px;}
.profile-avatar{width:50px;height:50px;background:#ddd;border-radius: 25px;margin: 0px auto 5px;overflow: hidden;}
.profile-avatar img{width:50px;height: 50px;;}
.profile-department{font-size:10px;font-weight: normal;color: rgba(255,255,255,.6)}
.profile-english-name{font-size:24px;line-height:30px; letter-spacing: -1px;color:#fff;}
.profile-original-name{font-size:17px;color:#fff;margin-bottom: 10px}
.profile-info{font-size:12px;font-weight: normal;color: rgba(255,255,255,.4)}
.profile-info span {margin-right:2px;}
.profile-info span span{color:#fff;font-weight: bold;margin-left: 5px;}
.nav-justified > .nav-link, .nav-justified .nav-item{border:none;border-radius: 0px;border-bottom: 5px solid #931b49;background:#931b49;padding:1rem 1rem;color:rgba(255,255,255,.6);}
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link{background:#931b49;}
.nav-tabs .nav-link:hover{border-color: #fff #fff #ccc;}
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link{border:none;border-radius: 0px;border-bottom: 5px solid #ff0;color:#ff0;}
.tab-content .container{padding-bottom: 200px}
.btn-refresh{color:#fff;background-color:#931b49;border-color:#931b49;font-weight: bold;font-size: 14px;}
.btn-refresh i{margin-right:5px;}
.card-comment {margin:15px 0px;padding:10px 20px;border:none;background: linear-gradient(0deg, rgba(255,145,0,1) 0%, rgba(255,255,0,1) 100%);border-radius:15px;position: relative;display: inline-block;float: right;color:#000;}
.card-comment:after{content:'';display: block;width: 25px;height: 13px;background: url(../images/comment.png) ;position: absolute;bottom: -13px;right: 30px;}
.card-comment .message{line-height:1.2rem;margin-bottom: 5px;color: #000;font-weight: normal;font-size: 14px;}
.card-comment .info{font-size: 12px;font-weight: normal;color:rgba(0,0,0,0.4);text-align: right;}
.card-comment .info .info-member{color:#000;margin-right:5px;font-weight: bold;}
.profile-box-commentinput{position:fixed;width: 100%;left: 0%;right: 0%;bottom:58px;background: #fff;padding:10px 15px;}
.profile-box-commentinput.active{bottom:0px;box-shadow: 0px 0px 0px 5000px rgba(0,0,0,0.5)}
.profile-box-commentinput .col-9{padding-right: 0px;}
.form-fstep{color: rgba(255,255,255,.4);margin: 40px 20px;}
.form-fstep textarea{border-radius:20px;padding:10px 20px;text-align: center}
.form-fstep .input-lucky{text-align: center;font-size:14px}
.form-fstep .btn {background: #007bff;border-radius: 50px;font-size: 18px;font-weight: bold;color:#fff;} 
.form-fstep-congrat{color: rgba(255,255,255,.4);margin: 40px 20px;}
.form-fstep-congrat h1{font-size:24px;color:#fc0;}
.form-fstep-congrat p{font-size:14px;color:#fa0;}
.form-fstep-congrat .btn {background: #f80;border-radius: 50px;font-size: 18px;font-weight: bold;color:#fff;border:1px solid #f80} 
.icon-congrat{max-width:70%;width:70%}

.ticket{padding:0px;color:#72002c;margin:20px 0px;display: flex;align-items: stretch;align-content: stretch;}
.ticket-left{padding:0px;flex: 1 2 200px;display: flex;justify-content:center;align-items:center;text-align: center;background: 
url('../images/ticket-bg2.png') left -3px top 7px no-repeat,
url('../images/ticket-bg2.png') right -3px top 7px no-repeat,
url('../images/ticket-bg1.png') left -15px top -15px no-repeat,
url('../images/ticket-bg1.png') right -15px top -15px no-repeat,
url('../images/ticket-bg1.png') left -15px bottom -15px no-repeat,
url('../images/ticket-bg1.png') right -15px bottom -15px no-repeat,
url('../images/bg-ticket.png'),
rgba(1,126,254,1);}
.ticket-title{font-size:20px;color:#72002c;border-top:dotted 3px #72002c;border-bottom:dotted 3px #72002c;padding:10px 0px;}
.ticket-title a:link,.ticket-title a:visited{color:#72002c;text-decoration: none;}
.ticket-title i{color:#72002c;}
.ticket-right{padding:20px;background: 
url('../images/ticket-bg2.png') left -3px top 7px no-repeat,
url('../images/ticket-bg2.png') right -3px top 7px no-repeat,
url('../images/ticket-bg1.png') left -15px top -15px no-repeat,
url('../images/ticket-bg1.png') right -15px top -15px no-repeat,
url('../images/ticket-bg1.png') left -15px bottom -15px no-repeat,
url('../images/ticket-bg1.png') right -15px bottom -15px no-repeat,
url('../images/bg-item.jpg') center center no-repeat,
#ff0;}
.btn-winning{font-size:10px;font-weight: bold;background: rgb(255,145,1);background: linear-gradient(0deg, rgba(255,145,0,1) 0%, rgba(255,255,0,1) 100%);border-color:#c55300 !important;color:#000;}
.ticket-timer{font-size:24px;font-weight: bold;}
.ticket-winning .ticket-left{padding:10px 0px;}
.ticket-winning .ticket-left .ticket-title{padding:5px 0px;}
.ticket-winning .ticket-right{justify-content:center;align-items:center;text-align: center;background: 
url('../images/ticket-bg2.png') left -3px top 7px no-repeat,
url('../images/ticket-bg2.png') right -3px top 7px no-repeat,
url('../images/ticket-bg1.png') left -15px top -15px no-repeat,
url('../images/ticket-bg1.png') right -15px top -15px no-repeat,
url('../images/ticket-bg1.png') left -15px bottom -15px no-repeat,
url('../images/ticket-bg1.png') right -15px bottom -15px no-repeat,
#bbb;
color:#fff;}

.modal-winning{background: url(../images/bg-item.jpg) #fa0;background-size: cover;background-position: center center;color:#fff;border-radius: 30px;padding:20px;margin: 0px 15px}
.modal-winning .close{position:absolute;right: 0px;top: 0px;}
.modal-winning table{border-radius:15px;overflow: hidden;margin-bottom:0rem;}
.modal-body-timerbox{font-size:12px;}
.modal-winning .ticket-timer{font-size:36px;}
.modal-winning .form-group{margin-bottom:0.8rem;}
.modal-winning label{font-size:12px;font-weight: normal}
.modal-winning input{text-align: center;font-weight: bold;font-size: 14px;}
.modal-winning .btn{font-size:14px;font-weight: bold;}
.modal-signin{background:#007bff;color:#fff;border-radius: 30px;padding:30px;margin: 0px 15px}
.modal-signin .close{position:absolute;right: 0px;top: 0px;}
.modal-signin p{font-size:12px;font-weight: normal}
.modal-signin .btn-outline-light{border-radius:50px;font-weight: bold;font-size: 14px; border:2px solid #fff}


.page-camp{border:20px solid transparent;-moz-border-image:url('../images/body-border.gif') 20 20 round;-webkit-border-image:url('../images/body-border.gif') 20 20 round;-o-border-image:url('../images/body-border.gif') 20 20 round;border-image:url('../images/body-border.gif') 20 20 round;background:url('../images/body-border.gif') #000}
.camp-index h1,.camp-index h2,.camp-index h3{color:#ff0} 
.page-camp,.page-camp .container-fluid,.page-camp .page-camp-row{height:100%;}
.page-camp nav{position:fixed;z-index: 222;padding:20px;}
.page-camp nav ul{list-style:none;padding-inline-start:0px;}
.page-camp nav ul li{display:inline-block;}
.page-camp nav ul li a:link,.page-camp nav ul li a:visited{width:80px;height:80px;background:url(../images/bg-btn.jpg) #fc0;background-size:cover;display: block;text-align: center;border-radius: 40px;margin-right: 10px;font-size: 10px;text-decoration: none;color:#fff;box-shadow: 0px 5px 5px rgba(66,0,0,0.5);}
.page-camp nav ul li a i{font-size:20px;padding-top:20px}
.camp-logo{max-width:50%}
.col-wh{height:100%;}
.col-left{background:url(../images/bg-camp-kv.jpg) #a00;background-size:cover;background-position:center center;color:#FFcc00;justify-content:center;align-items:center;display: flex}
.col-right{background:#000;background-size:cover;background-position:center center;overflow-y: scroll;padding:30px 50px 20px 50px;color:#ff0;display: flex;flex-flow: column;}
.col-right ul{list-style:none;padding-inline-start:0px;}
.camp-list{}
.camp-list-item{margin-bottom: 20px}
.camp-list-item a{background:url(../images/bg-award.jpg) #fa0;background-size:cover;background-position:center center;display:block;border-radius: 30px;overflow: hidden;text-decoration: none;box-shadow: 0px 10px 10px rgba(0,0,0,0.5);border:dotted 5px #fa0}
.camp-list-item a:hover{box-shadow:0px 0px 20px rgba(255,255,0,8);}
.camp-list-item h5{color:#ff0;}
.camp-list-item h5 img{width:20px;}
.camp-list-item h1{text-shadow:0px 3px 3px rgba(66,0,0,0.5);}
.camp-list-item a .col-8{display:flex;justify-content:center;align-items:center;text-align: center;color: #fff;}
.camp-list-item-info{margin-left:-25px;}
.camp-list-item-info h1{font-size:32px;}
.camp-item-box{margin:30px;}
.form-box-select-country{font-size:30px}


.page-camp .ticket-left{padding:20px;background: url('../images/camp-ticket-bg2.png') left -3px top 7px no-repeat,
url('../images/camp-ticket-bg2.png') right -3px top 7px no-repeat,
url('../images/camp-ticket-bg1.png') left -15px top -15px no-repeat,
url('../images/camp-ticket-bg1.png') right -15px top -15px no-repeat,
url('../images/camp-ticket-bg1.png') left -15px bottom -15px no-repeat,
url('../images/camp-ticket-bg1.png') right -15px bottom -15px no-repeat,
url('../images/bg-ticket.png'),rgba(255,255,255,1)}
.page-camp .ticket-right{background: url('../images/camp-ticket-bg2.png') left -3px top 7px no-repeat,
url('../images/camp-ticket-bg2.png') right -3px top 7px no-repeat,
url('../images/camp-ticket-bg1.png') left -15px top -15px no-repeat,
url('../images/camp-ticket-bg1.png') right -15px top -15px no-repeat,
url('../images/camp-ticket-bg1.png') left -15px bottom -15px no-repeat,
url('../images/camp-ticket-bg1.png') right -15px bottom -15px no-repeat,url('../images/bg-item.jpg') center center no-repeat,#ffa800;color: #ff0;font-size:20px;width:37%;text-align: center}
.ticket-info-department{font-size:20px;color:#666}
.ticket-name{font-size:48px;color:#000;line-height: 2rem}
.ticket-name a{border:none;background:rgba(0,0,0,0);padding: 0px;color:#f80;margin-left: 5px}
.ticket-received .ticket-right{padding:35px 0px;background: url('../images/camp-ticket-bg2.png') left -3px top 7px no-repeat,
url('../images/camp-ticket-bg2.png') right -3px top 7px no-repeat,
url('../images/camp-ticket-bg1.png') left -15px top -15px no-repeat,
url('../images/camp-ticket-bg1.png') right -15px top -15px no-repeat,
url('../images/camp-ticket-bg1.png') left -15px bottom -15px no-repeat,
url('../images/camp-ticket-bg1.png') right -15px bottom -15px no-repeat,#bbb;color: #fff;font-size:20px;}
.ticket-status .count{font-size:10px;}
.ticket-number .profile-original-name{color:#666;}
.ticket-number {color: #000;font-size:22px;}
.ticket-number .profile-number {color: #000;font-size: 20px;}
.ticket-received .ticket-left{position:relative}
.btn-extra, .ticket-right a, #btnExtra {
	background: #f00;
	color: #fff;
	border-radius: 40px;
	font-weight: bold;
	font-size: 13px;
	border: 1px solid #f00;
	box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	text-align: center;
	padding: 6px 20px;
}

a.btn-extra1:link, a.btn-extra1:visited {
	background: #f00;
	border: 1px solid #f00;
}

a.btn-extra2:link, a.btn-extra2:visited {
	background: #f80;
	border: 1px solid #f80;
}

a.btn-extra3:link, a.btn-extra3:visited {
	background: #480;
	border: 1px solid #480;
}

.btn-extra.disabled{background:#aaa;border:1px solid #aaa;}

.page-camp-item .col-left{background:#0f0027;background-size:cover;background-position:center center;}
.col-left-box{max-width:100%}
.col-left-box h4{color:#ff0;}
.col-left-box h4 img{width:30px;}
.col-left-box h1{color:#fff;}
.machine{margin-top:-50px}
.machine img{max-width:100%;}

.machine.default .machine-default{display: block}
.machine.default .machine-rolling-bar{display: none}
.machine.default .machine-rolling{display: none}
.machine.default .machine-done{display: none}

.machine.active .machine-default{display: none}
.machine.active .machine-rolling-bar{display: block}
.machine.active .machine-rolling{display: none}
.machine.active .machine-done{display: none}

.machine.active-rolling .machine-default{display: none}
.machine.active-rolling .machine-rolling{display: none}
.machine.active-rolling .machine-rolling{display: block}
.machine.active-rolling .machine-done{display: none}

.machine.done .machine-default{display: none}
.machine.done .machine-done{display: block}
.machine.done .machine-rolling-bar{display: none}
.machine.done .machine-rolling{display: none}



.form-box{margin-top:-60px;}
.btn-start {
	background: rgb(162,0,0);
	background: linear-gradient(0deg, rgba(162,0,0,1) 0%, rgba(255,0,0,1) 72%, rgba(255,98,0,1) 100%);
	border: 1px solid rgba(162,0,0,1);
	color: #fff;
	padding: 10px 40px;
	font-weight: bold;
	font-size: 30px;
	border-radius: 50px;
	margin-top: 20px;
	display: inline-block
}

.btn-start.active {
	display: none
}

.btn-stop {
	background: rgb(162,0,0);
	background: linear-gradient(0deg, rgba(162,0,0,1) 0%, rgba(255,0,0,1) 72%, rgba(255,98,0,1) 100%);
	border: 1px solid rgba(162,0,0,1);
	color: #fff;
	padding: 10px 40px;
	font-weight: bold;
	font-size: 30px;
	border-radius: 50px;
	margin-top: 20px;
	display: none
}

.btn-stop.active {
	display: inline-block
}
.camp-item-box .camp-item-boxul li{display:block;opacity: 0;transition-duration:.3s;transition-timing-function: linear;transform: translate(-120px,0px);}
.camp-item-box.active .camp-item-boxul li{display:block;opacity: 1;transform: translate(0px,0px)}
.camp-item-boxul li:first-child{transition-delay: 1s;}
.camp-item-boxul li:nth-child(2){transition-delay: 2s;}
.camp-item-boxul li:nth-child(3){transition-delay: 3s;}
.camp-item-boxul li:nth-child(4){transition-delay: 4s;}
.camp-item-boxul li:nth-child(5){transition-delay: 5s;}
.camp-item-boxul li:nth-child(6){transition-delay: 6s;}
.camp-item-boxul li:nth-child(7){transition-delay: 7s;}
.camp-item-boxul li:nth-child(8){transition-delay: 8s;}
.camp-item-boxul li:nth-child(9){transition-delay: 9s;}
.camp-item-boxul li:nth-child(10){transition-delay: 10s;}
.camp-item-boxul li:nth-child(11){transition-delay: 11s;}

.btn-extraolus{position:absolute;bottom: 20px;right: 20px;background: #fa0;color: #fff;border:1px solid #fa0;border-radius: 50px;padding: 7px 20px;}

.page-camp-comments{background:url("../images/bg-comments.gif") #000 fixed;background-size:cover;background-position:center center;color:#FFcc00;height: 100%;overflow-x:hidden;overflow-y: scroll}

@media (max-width: 1400px) {
.camp-list-item-info h1{font-size:24px;}
.camp-list-item a{border-radius:25px;}
.col-right{padding:20px 30px 20px 30px;}
.ticket-name {font-size: 22px;}}
@media (max-width: 1200px) {
.camp-list-item-info h1{font-size:20px;}
.camp-list-item a{border-radius:20px;}
.col-right{padding:15px 20px;}
.camp-item-box{margin:20px;}
.ticket-name {font-size: 20px;}}
@media (max-width: 992px) {
.col-right{padding:20px;}
.page-camp .ticket-left {padding:10px;}
.page-camp .ticket-right{font-size: 12px}
.ticket-received .ticket-right{font-size: 12px}
.ticket-info-department{font-size:10px;color:#666}
.ticket-name{font-size:18px;}
.camp-list-item-info h1{font-size:16px;}
.camp-list-item a{border-radius:15px;}
.col-right{padding:12px 16px;}
.camp-item-box{margin:15px;}
.ticket-name {font-size: 18px;}}
@media (max-width:900px) {}


#exampleModalLong h4{font-size: 16px;margin:0px 30px;}
.close{opacity:1;text-shadow:0px 0px 0px rgba(0,0,0,0);color:#fff;}

.extra-btn {
	position: absolute;
	bottom: 20px;
	right: 20px;
}

	.extra-btn button {
		background: rgb(162,0,0);
		background: linear-gradient(0deg, rgba(162,0,0,1) 0%, rgba(255,0,0,1) 72%, rgba(255,98,0,1) 100%);
		border: 1px solid rgba(162,0,0,1);
		color: #fff;
		padding: 5px 20px 7px;
		font-weight: bold;
		font-size: 16px;
		border-radius: 50px;
		display: inline-block;
	}