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

body {
	font-family: "微軟正黑體", Arial;
	margin: 0; padding: 0;
	
	background:#f7f7f7;
/*background: rgb(225,255,255);  Old browsers */
/*background: -moz-linear-gradient(top, rgba(225,255,255,1) 0%, rgba(225,255,255,1) 0%, rgba(253,255,255,1) 2%, rgba(253,255,255,1) 3%, rgba(230,248,253,1) 30%, rgba(200,238,251,1) 54%, rgba(190,228,248,1) 75%, rgba(177,216,245,1) 100%);  FF3.6-15 */
/*background: -webkit-linear-gradient(top, rgba(225,255,255,1) 0%,rgba(225,255,255,1) 0%,rgba(253,255,255,1) 2%,rgba(253,255,255,1) 3%,rgba(230,248,253,1) 30%,rgba(200,238,251,1) 54%,rgba(190,228,248,1) 75%,rgba(177,216,245,1) 100%);  Chrome10-25,Safari5.1-6 */
/*background: linear-gradient(to bottom, rgba(225,255,255,1) 0%,rgba(225,255,255,1) 0%,rgba(253,255,255,1) 2%,rgba(253,255,255,1) 3%,rgba(230,248,253,1) 30%,rgba(200,238,251,1) 54%,rgba(190,228,248,1) 75%,rgba(177,216,245,1) 100%);  W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1ffff', endColorstr='#b1d8f5',GradientType=0 );  IE6-9 */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: #333333;
	background: #ffffff;
}
img, object, embed, video {max-width: 100%;}

/* IE 6 不支援最大寬度，因此寬度預設為 100% */
.ie6 img {width:100%;}
.clear {clear: both;}




/* 每頁的背景 - 淡藍色漸層 */
#section1, #section2, #section3, #section4{
/*background: rgb(225,255,255);  Old browsers */
/*background: -moz-linear-gradient(top, rgba(225,255,255,1) 0%, rgba(225,255,255,1) 0%, rgba(253,255,255,1) 2%, rgba(253,255,255,1) 3%, rgba(230,248,253,1) 30%, rgba(200,238,251,1) 54%, rgba(190,228,248,1) 75%, rgba(177,216,245,1) 100%);  FF3.6-15 */
/*background: -webkit-linear-gradient(top, rgba(225,255,255,1) 0%,rgba(225,255,255,1) 0%,rgba(253,255,255,1) 2%,rgba(253,255,255,1) 3%,rgba(230,248,253,1) 30%,rgba(200,238,251,1) 54%,rgba(190,228,248,1) 75%,rgba(177,216,245,1) 100%);  Chrome10-25,Safari5.1-6 */
/*background: linear-gradient(to bottom, rgba(225,255,255,1) 0%,rgba(225,255,255,1) 0%,rgba(253,255,255,1) 2%,rgba(253,255,255,1) 3%,rgba(230,248,253,1) 30%,rgba(200,238,251,1) 54%,rgba(190,228,248,1) 75%,rgba(177,216,245,1) 100%);  W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1ffff', endColorstr='#b1d8f5',GradientType=0 );  IE6-9 */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: #333333;
	background:#ffffff;
}

/* 電腦版 中間內容 */
.pc_container {
    clear: both;
    width: 95%;
    height: auto;
    padding: 20px 0px;
    margin: 0 auto;
    /*margin-top: 85px;*/
    background: #ffffff;
}



/* 票券樣式背景 - 票券圖案 */
.ticket {
	width: 95%;
    height: auto;
    margin: 0 auto;
}
@media (min-width: 500px) and (max-width: 767px) {
.pc_container {
    clear: both;
    width: 95%;
    height: auto;
    padding: 20px 0px;
    margin: 0 auto;
    margin-top: 85px;
    background: #ffffff;
}
/* 票券樣式背景 - 票券圖案 */
.ticket {
	width: 95%;
    height: auto;
    margin: 0 auto;
}}



/* Page1 票券樣式 - TOP.廠商名稱及LOGO */
.ticket .ticketTitle {
    float: left;
    width: 100%;
    margin-bottom: 10px;
	/*border-bottom: 1px solid #eeeeee;*/
}
.ticketTitle .logo {
	float: left;
    width: 25%;
    /*height: 50px;*/
    margin-right: 2%;
    margin-left: -2%;
}
.ticketTitle .logo img {
	width:100%;
	height:auto;
	margin: 0px;
}
.ticketTitle .name {
    float: left;
    width: 74%;
    height: auto;
    text-align: left;
    font-size: 18px;
    font-weight: bold;
    line-height: 40px;
	color: #000000 !important;
}



/* Page1 票券樣式 - 商品名稱及票券分類 */
.ticketName {
	/*float: left;
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding-top: 10px;
    border-top: 1px solid #eeeeee;*/
	float: left;
    width: 110%;
    height: auto;
    margin: 0 auto;
    padding: 10px 4%;
    padding-bottom: 5px;
    background: #f7f7f7;
    margin-left: -5%;
    border-bottom: 0px solid #e6e6e6;
}
.ticketName .logo {
    float: left;
    width: 8%;
    height: 50px;
    margin-right: 3%;
    opacity: 0.2;
}
.ticketName .logo img {
	width:100%;
	height:auto;
	margin-top:5px;
}
.ticketName .name {
    float: left;
    width: 88%;
    height: auto;
    text-align: left;
    font-size: 16px;
	
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}



/* Page1 票券樣式 - 票券內容 */
.ticketInfo {
	font-family: "微軟正黑體", Arial;
    float: left;
    width: 100%;
    height: auto;
    margin: 0 auto;
	margin-top: 20px;
	margin-bottom: 20px;
}
.ticketInfo .Info1 {
    float: left;
    width: 75%;
}
.ticketInfo .Info2 {
    float: right;
    width: 25%;
}
.ticketInfo .Info3 {
    float: left;
    width: 50%;
}
.ticketInfo .Info4 {
    float: left;
    width: 100%;
}

.t_sub {
    float: left;
    display: block;
	width:100%;
    font-size: 12px;
    color:#6991b4;
	line-height:1.1em;
	text-align:left;
}
.t_info {
    float: left;
    display: block;
	width:100%;
	letter-spacing:0px;
    color:#333333;
	line-height:1.5em;
	text-align:left;
	margin-bottom:15px;
}
.t_info a {
    color:#000000;
}
.tar {
	text-align:right;
}



/* Page1 票券樣式 - QRcode & code */
.ticketQR {
    width: 30%;
	height:auto;
    margin: 0 auto;
	padding:0px;
    padding-top: 30px;
}
.ticketCode {
    width: 88%;
	height:auto;
    margin: 0 auto;
	padding:10px;
    padding-top: 30px;
}
.ticketQR img,
.ticketCode img {
    width: 100%;
	height:auto;
}
.ticketCode .Info3 {
    float: left;
    width: 50%;
	margin-top:-10px;
}
.opacity {
	opacity:0.2;
	-moz-opacity:0.2;　
	filter: alpha(opacity=20); // IE 5-7
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; // IE8
}
.use {
	color:#E53535 !important;
}
.expired {
	position:absolute;
	/*z-index:999;
	right:6%;
	width:24%;
	height:auto;
	margin-top:-9%;*/
	width:55%;
	height:auto;
    margin-left: 20%;
    margin-top: 10%;
	-moz-transform:rotate(-15deg);
	-webkit-transform:rotate(-15deg);
	-o-transform:rotate(-15deg);
	-ms-transform:rotate(-15deg);
	transform:rotate(-15deg);
}




/* Page2 票券內容 - 商品名稱及票券分類 */
.ticketName2 {
	float: left;
    width: 110%;
    height: auto;
    margin: 0 auto;
    padding: 15px 4%;
    background: #eeeeee;
    margin-left: -5%;
    border-left: 5px solid #99b0c4;
    /*box-shadow: 0px 0px 2px rgba(38,50,56,.1);*/
}
.ticketName2 .name {
	float:left;
	width:100%;
	height:auto;
	text-align:left;
	font-size:20px;
	font-weight:bold;
}




/* Page2 票券內容 - 使用說明 */
.ticketInfo .txt {
	line-height:1.5em;
	text-align:left;
    font-size: 16px;
}
.txt ul {
	line-height:1.5em;
	text-align:left;
    font-size: 15px;
	list-style: none;
    margin: 0;
    padding: 0;
	/*list-style-position: outside;*/
}

/*20190325 Duke require to close*/
/*.txt li::before {
	content: "\25AA"; 
	color:#09F;
	display: inline-block; 
	width: 1em;
}*/

.ticketInfo .infobtnbox {
	float:right; 
	width:32px;  
	height:auto;
	margin-top:-80px;
}
.infobtnbox .infobtn {
	float:left; 
	width:32px;  
	height:32px;
	margin:7px 0px 0px 0px;
    cursor: pointer;
}

.ticketInfo .txtscroll {
	width: 100%;
	height:440px;
	/*overflow-y:auto;*/
	overflow: hidden;
}
.pd0 {
	padding-left:0px;
	padding-right:0px;
}
/*.txtscroll::-webkit-scrollbar {
	width: 11px;
}
.txtscroll::-webkit-scrollbar-track {
	background-color:#transparent;
} */
.txtscroll::-webkit-scrollbar-thumb {
	border-radius:10px;
	box-shadow: 1px 1px 4px 0px rgba(184, 113, 25, .5);
	/*background: -moz-linear-gradient(top, #fee899 0%, #fcd177 30%, #ebbc62 100%);  FF3.6+ */
	/*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcd177), color-stop(100%,#ebbc62));  Chrome,Safari4+ */
	/*background: -webkit-linear-gradient(top, #fee899 0%, #fcd177 30%, #ebbc62 80%, #dea435 100%);  Chrome10+,Safari5.1+ */
	/*background: -o-linear-gradient(top, #fee899 0%, #fcd177 30%, #ebbc62 100%);  Opera 11.10+ */
	/*background: -ms-linear-gradient(top, #fee899 0%, #fcd177 30%, #ebbc62 100%);  IE10+ */
	/*background: linear-gradient(top, #fee899 0%, #fcd177 30%, #ebbc62 100%);  W3C */
	/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcd177', endColorstr='#ebbc62',GradientType=0 );  IE6-9 */
	background-color:#337ab7;
}
/*.txtscroll::-webkit-scrollbar-button {
	background-color:#transparent;
}
.txtscroll::-webkit-scrollbar-corner {
	background-color: black;
}*/

hr.style11 {
    height: 3px;
    background: url(../images/hr.png) repeat-x 0 0;
    border: 0;
	margin-top:10px;
	margin-bottom:25px;
}





/* i678 */
@media (min-width: 100px) and (max-width: 375px) {
.ticketName .name {
	font-size:16px;
}
.ticketName2 .name {
	font-size:18px;
	color: #446c8f;
}
.ticketQR {
    width: 30%;
	height:auto;
    margin: 0 auto;
	padding:0px;
    padding-top: 15px;
}
.ticketCode {
    width: 88%;
	height:auto;
    margin: 0 auto;
	padding:10px;
    padding-top: 20px;
}
.ticketInfo .txt {
	line-height:1.4em;
	text-align:left;
    font-size: 15px;
	
	/*多行
	display: -webkit-box;  
	overflow:hidden;
	text-overflow : ellipsis;
	-webkit-line-clamp: 18;
    -webkit-box-orient: vertical;*/
}
.txt ul {
	line-height:1.4em;
	text-align:left;
    font-size: 15px;
	list-style: none;
    margin: 0;
    padding: 0;
	/*list-style-position: outside;*/
}
.i6 {
	/*line-height:1.3em;*/
}
.t_info {
	letter-spacing:0px;
    /*font-weight: 200;*/
	line-height:1.4em;
	margin-bottom:13px;
}
}






/* 下方捷徑提示訊息 20180123 */
.massage_layer{position:fixed; z-index:1000;left:50%;bottom:0;width:300px;margin-left:-150px;padding-top:3px;background:url(images/massage.gif) no-repeat 0 0;background-size:300px auto;}
.massage_layer .layer_inner{padding-bottom:16px;background:url(images/massage.png) no-repeat 0 100%;background-size:300px auto; color:#333333;}
.massage_layer .layer_main{padding:14px 0 12px;background:#e7e7e7;text-align:center;}
.massage_layer .layer_main .headline{padding-bottom:5px;padding-top:5px;font-size:16px;}
.massage_layer .layer_main .headline img{vertical-align:bottom;}
.massage_layer .layer_main .headline .ico_message_1{position:relative;top:-5px;margin-left:4px;margin-right:4px;vertical-align:middle}
.massage_layer .layer_main .headline .ico_message_2{position:relative;margin-left:4px;margin-right:4px;top:-2px;}






/* 票券使用說明修改版20180320 */
.more {
	width:100%;
    height: auto;
    margin: 0 auto;
	margin-top:20px;
}
.more a {
    font-size: 15px !important;
	color:#3889D1;
	cursor: pointer;
}
.more a:hover {
	color:#c43633;
	text-decoration:none;
}




/* 登入密碼頁20180326 */
.password {
	width:100%;
    height: auto;
    margin: 0 auto;
}
.password .top {
	width:100%;
    height:150px;
    margin: 0 auto;
	background:url(../images/password.png) no-repeat;
	-moz-background-size: cover;
	-webkit-background-size:cover;
	-o-background-size:cover;
	background-size:cover;
}
.top .icon {
	width:30%;
    height: auto;
    margin: 0 auto;
	/*float:left;
	width:35%;
    height: auto;*/
	padding:3%;
	padding-top:3%;
}
.top .icon img {
	width:100%;
    height: auto;
	border-radius:100%;
	border:5px solid rgba(177,216,245,1);
    box-shadow: 0px 3px 3px rgba(0,43,77,0.4);
}
.password .title {
    /*float: left;*/
    width: 50%;
    height: auto;
    margin: 0 auto;
    text-align: center;
	letter-spacing:2px;
    /*font-size:40px;*/
    font-weight: 700;
	color:#004e8a;
	margin-top:10%;
    /*display: table;
    position: relative;
    top: 50%;
    transform: translate(-0%, -50%);*/
}
@media (min-width: 100px) and (max-width: 414px) {
.password {
	width:100%;
    height: auto;
    margin: 0 auto;
}
.password .top {
	width:100%;
    height:150px;
    margin: 0 auto;
	background:url(../images/password.png) no-repeat;
	-moz-background-size: contain;
	-webkit-background-size:contain;
	-o-background-size:contain;
	background-size:contain;
}
.top .icon {
	width:35%;
    height: auto;
    margin: 0 auto;
	/*float:left;
	width:35%;
    height: auto;*/
	padding:3%;
	padding-top:5%;
}
.top .icon img {
	width:100%;
    height: auto;
	border-radius:100%;
	border:5px solid rgba(177,216,245,1);
    box-shadow: 0px 3px 3px rgba(0,43,77,0.4);
}
.password .title {
    /*float: left;*/
    width: 70%;
    height: auto;
    margin: 0 auto;
    text-align: center;
	letter-spacing:2px;
    /*font-size:40px;*/
    font-weight: 700;
	color:#004e8a;
	margin-top:20px;
    /*display: table;
    position: relative;
    top: 50%;
    transform: translate(-0%, -50%);*/
}}
.font41 {
	font-size: 41px !important;
}
.font10 {
	font-size: 10px !important;
}
.font12 {
	font-size: 12px !important;
}
.password .title b {
    display: block;
	letter-spacing: 1px;
    font-size:21px;
    font-weight: 200;
    color: #000000;
    line-height: 1.8em;
}
.t_pass {
	margin:5% 0;
	margin-top:20%;
	font-size: 14px;
    font-weight:300;
	text-align:center;
}

.form-control {
  display: block;
  width: 100%;
  height: 40px;
  padding: 6px 12px;
    text-align: center;
  /*font-size: 18px;*/
    font-weight: 200;
  line-height: 1.5em;
  color: #3889D1;
  background:rgba(255, 255, 255, .4);
  border: 1px solid #cccccc;
  border-radius:5px;
  -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075);
          box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
       -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
          transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form-control:focus {
  border-color: #99b0c4;
  outline: 0;
  -webkit-box-shadow: inset 0 0px 0px rgba(0,0,0,.075), 0 0 0px rgba(102, 175, 233, .6);
          box-shadow: inset 0 0px 0px rgba(0,0,0,.075), 0 0 0px rgba(102, 175, 233, .6);
}
.form-control {
    -webkit-appearance: none !important;
    -moz-appearance: none;
    appearance: none;  
}

/*...送出按鈕...*/
.password_btn {
	font-family:"微軟正黑體";
	display:inline-block;
	width:100%;
	height:35px;
	margin:0px 0;
	border:1px solid #99b0c4;
	background:#99b0c4;
	color:#ffffff;
	font-size:18px;
    font-weight: 200;
    border-radius:5px;
	margin-top:10px;
	cursor:pointer;
	-webkit-transition:all 0.2s ease-in;
    -moz-transition:all 0.2s ease-in;
    -ms-transition:all 0.2s ease-in;
    -o-transition:all 0.2s ease-in;
	   transition:all 0.2s ease-in;
}
.password_btn:hover {
	border:1px solid #3E7FB0;
	background:#3E7FB0;
	color:#ffffff;
}
.password_btn:active {color:#cccccc;border:1px solid #3E7FB0;background:#3E7FB0;}
.password_btn:focus {outline: none;}



.mgt10 {
	margin-top:10px;
}