@charset "utf-8";
/* CSS Document */
html, body {background-color: #E9E9E9!important; padding:0;margin:0; font-family: "Microsoft JhengHei"!important; font-size: 100%;height: 100%;}
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,awardsColicon, awards_listing, text, play, topnav,
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;
}

#ctn {
  position: relative;
  height: 10px;
}

#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 10px; /* Place the button at the bottom of the page */
  right: 10px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #555; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
  opacity: 0.8;
}

#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}
.main_wrap {width:100%;}
.container {width:100%;max-width:950px;margin:0 auto;}
.nav_wrap {top:0;position:relative;padding:0; text-align: center;}
.nav_wrap:after{clear:both;}
.sponsorlogo_wrap{background-color:#ffffff;padding-top:20px; padding-bottom:10px; width:100%;text-align:center;} 
.sponsorlogo_w {max-width:950px; margin-left: auto; margin-right: auto;}
.sponsorlogo_w img {width:100%;height:auto;max-height:90px;}
.sponsorlogo_m {max-width:640px; margin-left: auto; margin-right: auto;}
.sponsorlogo_m img {width:100%;height:auto;max-height:100px;}
.sponsorlogo_m img {width:100%;height:auto;max-height:100px;}
.sponsorlogo_m{display:none;}
.sponsorlogo_m img{display:none;}
.header {width:100%; }
.logo_wrap {max-width: 800px; height:auto;width:100%;margin:0 auto; text-align:center;overflow:hidden;}
.logo_wrap img{width: 100%;}
.logo img {margin:0 auto;text-align:center;margin-top:40px;max-width:560px;background-size:cover;width:96%;}
.intro_wrap{background-color:#ffffff;padding:10px 0 0px 0;text-align: center;}
.intro_wrap .title {color: #37C4A7;text-align: center;}
.intro_wrap .information {color: #000000; margin-left: auto; margin-right: auto; text-align: center;}
.intro_wrap p {padding:10px; color:#ffffff; font-size:14px; text-align:justify;}
.content_wrap { padding-bottom:50px; padding-top:2px; min-height: 100%;}
.content { background-color:#ffffff; margin-bottom:20px; }
.guest_pic { display: block; margin: 2% 0; }
.guest_pic_m {display: none; margin: 2% 0;}
.guest_pic img{ width: 100%; }
.guest_pic_m img{ width: 100%; }
.description {max-width: 800px;margin: auto;}
.introduction {background-color: #024279; padding: 2% 5%; font-size: 16px; line-height: 26px; color: #FFFFFF; border-left: 6px solid #7fc2d2;}
.seminar_wrap { margin-top: 2px;}
.seminar_pic {max-width: 680px;}
.seminar_pic img {width: 100%;}
.seminar {background-color: #cbdce8; width: 100%; box-sizing:border-box; text-align: center; align-items: center; align-content: center; padding: 4% 0;}
.seminar img {width: 100%; max-width: 500px;}
.seminar_text { width: 100%; color: #00538e; font-size: 24px; line-height: 28px; font-weight: bold; display: inline-block; text-align: left; }
.seminar_info { width: 46%; padding: 0 2% 0 2%; color: #2e5267; font-size: 18px; line-height: 26px; font-weight: bold; display: inline-block; text-align: left; vertical-align: top;}
.seminar_info2 { width: 92%; padding: 0 2% 0 2%; color: #2e5267; font-size: 18px; line-height: 26px; font-weight: bold; display: inline-block; text-align: left; vertical-align: top;}
.platform { width: 280px; background-color: #efefef; display: flex; align-items: center; align-content: center; margin-bottom: 4%; border-radius: 18px; border: 1px solid #81ACD8; display:inline-flex;}
.platform_text {width: 100%; display: inline-block; float: left; padding-left: 4%; color: #505050; font-size: 16px;}
.platform_pic img { max-width: 40px; display: inline-block; float: left; }
.speaker { display: flex; align-items: center; align-content: center; padding-bottom: 4%;}
.speaker2 { padding-bottom: 4%; margin: auto;}
.speaker_pic img { max-width: 140px; display: inline-block; float: left; }
.speaker_text { width: 80%; display: inline-block; float: left; color: #30323a; padding-left: 2%;}
.speaker_text b{ font-size: 20px; color: #00538e; }
.speaker_bio {font-size: 14px; color: #6D6D6D; padding-bottom: 4%;}
.clearfix {clear:both;}
.header{display:block;margin-bottom:-2;}
.header img{width:100%;}
.divider-1 {
		border-bottom: 1px dotted #16347D;
		height: 1px;
		margin: 0em 0px 1em;
}
.divider-2 {
		border-bottom: 1px solid #B2C5D3;
		height: 1px;
		margin: 0em 0px 1em;
}
.disclaimer { font-size: 14px; line-height: 20px; color: #3D3D3D; text-align: left; padding: 2% 4%; background-color: #FFFFFF; border: solid 1px #B9B9B9; margin: 4%;}
.intro_text {line-height:24px;padding:10px auto;margin-top:6px;margin-bottom:30px;}
.menu_wrap {width:100%;background-color: #af0a2b; text-align: center;}
.menu {width: 700px; text-align: center; margin: auto;}
.flex-container { display: flex; align-items: center;margin-bottom: 5%;}
.flex-container .text { color: #d0308a; font-size: 16px; padding-left: 4px;}
.flex-container .text b{ color: #00ada7; font-size: 22px; }
.play {
	background-color:#05aba0;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
	border:2px solid #ffffff;
	display:flex;
	justify-content: center;
	align-items: center;
	cursor:pointer;
	color:#FFFFFF;
	font-size:16px;
	font-weight:bold;
	padding:6px 28px;
	text-decoration:none;
	min-width: 150px;
	max-width: 150px;
	transition: 0.2s;
}

.text a:hover { background-color: #af0a2b;}

.topnav {
  overflow: hidden;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 18px;
  transition: 0.5s; 
}

.topnav a:hover {
  background-color: #E81942;
  color: #ffffff;
}

.topnav a.active {
  background-color: #af0a2b;
  color: white;
}

.topnav a.all {
  background-color: #E81942;
  color: white;
  animation: mymove 3s infinite;
}

@keyframes mymove {
  50% {background-color: #af0a2b;}
}

.topnav .icon {
  display: none;
}

.button1 {font-size: 16px; line-height: 28px; max-width: 180px; width: 98%; background-color: #0D4792; margin-top: 2%; padding: 6px 16px; text-align: center; display: inline-block; vertical-align: middle;transition: 0.5s;color: #FFFFFF; border: solid 0.5px #E9E9E9; display:flex; justify-content: center;align-items: center; box-sizing: border-box;}
.button1:hover {background-color: #007B8E;color: #FFFFFF; }

@media (max-width: 973px){
.flex-container {display: flex; flex-direction: row;}
}

@media (max-width: 800px){
.speaker_text { width: 70%;}
}

@media only screen and (max-width: 40em) /* 670 */{
.sponsorlogo_w{display:none;}
.sponsorlogo_w img{display:none;}
.sponsorlogo_m{display:block;}
.sponsorlogo_m img{display:block;}
.guess_intro {margin-top:10px;}
.guessimg2 {width:100%;max-width: 320px; float:left;margin-right:5px;display:block;}
.guessimg2 img {width:100%;}
.result_wrap {width:100%;max-width:700px;margin:0px auto;padding:5px 15px;}
.winner_wrap{width:100%;margin:20px auto;}
.winner_wrap .award{width:100%;float:left;height:auto;font-weight:bold;font-size:15px;}
.winner_wrap .company{width:100%;float:left;height:auto;}
.nav_wrap {background-color:#ffffff;top:0;position:relative;}
.menu {width: 100%;}
.topnav {
  width:100%;
  overflow: hidden;
}
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
	   
.description .title img {width:80%;}
.bio_headerinfo { padding: 20% 0% 1% 8%; width: 98%;}
.bio_namecard {width: 58%;}
.seminar_info {width: 90%;}
}

@media (max-width: 767px){

.logo img{background-size:cover;width:70%;margin-top:50px;}
.flex-container {display: flex; flex-direction:column;}
.awardsColicon {max-width: 240px;}
.text  { padding-top: 6px;}
.flex-container .text { text-align: center; padding-left: 0px;}
.flex-container .text b{ text-align: center; }
}

@media (max-width: 640px){
.logo img{background-size:cover;width:70%;margin-top:30px;}
.sponsorlogo_m {max-width:500px; margin-left: auto; margin-right: auto;}
.sponsorlogo_m img {width:100%;height:auto;}
.awards_list {margin: auto; padding-bottom: 30px;}
.awards_listing {width:48%;float:left;margin:1%;}
.guest_pic {display: none;}
.guest_pic_m {display: block;}
 }

@media (max-width: 581px){
.bio_headerinfo { padding: 18% 2% 1% 2%;}
.logo img{max-width:400px;background-size:cover;width:90%;margin-top:30px;}
.speaker_text { width: 60%;}
	
}

@media (max-width: 480px){
.logo img{max-width:360px;background-size:cover;width:80%;margin-top:30px;}
.description .title {text-align:center;padding:5px 0 3px 5px;}
.description .title img {width:100%;max-width:320px;}
.topweb {display:none;}
.topapp{display:block;}
.videoplayer {width: 98%;height: auto;margin-left:auto;margin-right:auto;}
.viewbox_wrap{width:96%;float:left;margin:1% 1%; text-align:left;}
.bio_headerinfo { padding: 18% 1% 1% 1%;}
.bio_namecard {padding-top: 3%;}
.bio_name {font-size: 20px; font-weight: bold; line-height: 24px; padding-bottom: 2px;}
.bio_title {font-size: 14px; font-weight: 500; line-height: 18px;}
.awards_listing {width:96%;float:left;margin:1%;padding: 5px 0px; }
.speaker {display:inherit; text-align: center; width: 100%;}
.speaker2 {text-align: center;}
.speaker_text { width: 100%;}
.speaker_pic img { max-width: 160px; float: initial;}
.button1 { margin-left: auto; margin-right: auto;}
 }

@media (max-width: 420px){
.logo img{max-width:380px;background-size:cover;width:80%;margin-top:20px;}
.seminar_info {padding: 10px 0;}
.seminar_text { text-align: left; display: inline-block; text-align: left;}
}

@media (max-width: 320px){
.logo img{max-width:380px;background-size:cover;width:90%;margin-top:20px;}
.winner_wrap{width:100%;margin:20px auto;}
.content_wrap {padding:0px;}
.topweb {display:none;}
.topapp{display:block;}
}