@charset "utf-8";
/* CSS Document */
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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
}

p,h1,h2,h3,h4,h5,h6 {color:#ffffff;}
p,a  {color:#ffffff;} 
a {}
hr {color: #96bacc;}

a:link {text-decoration: none;} 

body {
	padding: 0;
	border: 0;
	font-family: "微軟正黑體", "儷黑 Pro", Arial, Helvetica, sans-serif;
}

.wrapper_full {
	margin: 0 auto;
	text-align: center;
	width: 100%;
	background-repeat: no-repeat;
	background-position: top;
	background-attachment: fixed;
	background-size: cover;
	background-color: #DEE9EF;
}
.container{margin:0 auto;max-width:800px;width:90%;}
#header {padding:0px 0 0 0;line-height:0;}

.imgresponse img {width:100%;height:auto;max-width:500px;}
.clearfix {clear:both;}
a {cursor:pointer;}

.topweb {visibility:visible;line-height:0;}
.topweb img {width:100%;}
.topapp{display:none;}
.topapp img{width:100%;}

.content_wrap {}
.content_main {
	background-color: #AFD3E6;
	min-height: 320px;
}
.padding{margin:10px auto;}
.logo {margin:10px auto;}
.logo img{width:100%; max-width:200px;}
.logo_campaign {width:100%;margin:0 auto;}
.logo_campaign img {width:100%;max-width:450px;height:auto;}

.intro{
	min-height: 100px;
	background-color: #B00931;
}
.intro p {padding:3% 3%; text-align:left;line-height:22px;}
.title {text-align:left;padding-top:8px;margin-left:3%;}

.center {text-align:center;}

.videolist_wrap {padding:0% 2% 2% 2%;}
.videowrap {
	width: 100%;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;

}

.viewbox_wrap{
	width: 100%;
	max-width: 640px;
	text-align: left;
	border-radius: 5px;
	margin-left: auto;
	margin-right: auto;
}
.viewbox{
	border-radius: 0px 0px 5px 5px;
	min-height: 110px;
}
.viewbox_app{background-color:#50819e;}
.viewbox_chapter {
	color: #FFFFFF;
	padding: 2%;
	font-size: 20px;
	line-height: 26px;
	text-align: center;
	font-weight: bold;
	background-color: #19435d;
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	border-bottom: 1px 1px 1px solid #FFFFFF;
}
.viewbox_title {
	color: #03707b;
	font-size: 18px;
	font-weight: bold;
	width: 100%;
}
.viewbox{padding:2%;}
.guess {
	color: #FFFFFF;
	font-size: 16px;
	text-align: left;
}
.clearfix {clear:both;}
.capimage img{
	width: 20%;
	height: auto;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 10px;
	border: 1px solid #FFFFFF;
	float: right;	
	display:none;
}


.webcapimage img{
	width: 20%;
	height: auto;
	min-height: 80px;
	border: 1px solid #FFFFFF;
	float: right;
	visibility:visible;
	 
}


.viewbox p{font-weight:bold;}
.btn_play {float:right;width:35px;}
.description {max-width: 560px; border-radius:10px;text-align:left;color:#FFFFFF;margin-left:auto;margin-right:auto;line-height:26px;}
.button {max-width: 200px; width: 25%; border-radius:20px; background-color:#739DBF;padding:2% 2% 2% 2%;text-align:middle;color:#FFFFFF;margin-left:auto;margin-right:auto;line-height:26px;}
.footer {padding-top: 50px}
 
 @media (max-width: 767px){
.mb_login .half{width:95%;float:left;padding:0 0;}
.videoplayer {width: 98%;height: auto;margin-left:auto;margin-right:auto;}
.viewbox_wrap{
	width: 98%;
	min-height: 300px;
	text-align: left;
}
.viewbox_chapter { font-size: 18px; text-align: left;}
	 .capimage img{width:100%;height:auto;margin:10px auto;border:1px solid #FFFFFF;display:block;}
	 .webcapimage img{	display: none;}
}

 @media (max-width: 680px){
.container{width:100%;}
.topweb {display:none;}
.topapp {display:block;width:100%;}
.viewbox_title { font-size: 24px; line-height: 32px;}
.viewbox_chapter {font-size: 22px; line-height: 32px;}
.videoplayer {width: 98%;height: auto;margin-left:auto;margin-right:auto;}
.bannerzone {margin:0 auto;width:100%;text-align:center;max-width:800px;}
.bannerzone728 {margin:0 auto;width:728px;text-align:center;display:none; }
.bannerzone320 {margin:0 auto;width:320px;text-align:center;display:block; }
.bannerzone300 {width:100%;text-align:center;float:left; }
.logo img{width:90%; max-width:200px;}
.title {text-align:center;margin-left:0%;}
.webcapimage img{	display: none;}
}



@media (max-width: 480px){
.viewbox_wrap{
	width: 97%;
	min-height: 300px;
	margin: 2% 1.6%;
	text-align: left;
} .intro p {
	padding: 3% 3%;
	text-align: left;
	font-size: 14px;
}
.videoplayer {width: 98%;height: auto;margin-left:auto;margin-right:auto;}
	   .webcapimage img{	display: none;}
	   .intro p {
	padding-top: 2%;
	padding-right: 3%;
	padding-left: 3%;
	padding-bottom: 2%;
	text-align: left;
	font-size: 14px;
	line-height: 16px;
}
	

.guess {font-size: 14px;}
  }
 
  @media (max-width: 320px){

.videoplayer {width: 98%;height: auto;margin-left:auto;margin-right:auto;}
 .webcapimage img{	display: none;}
.viewbox_title { font-size: 18px}

  }
