html {font-size: 100%;}
html,body {
    margin:  0;
    padding:  0;
    font-family: Arial, Helvetica, sans-serif , Microsoft JhengHei ;
    /* min-width: 1280px; */
	   font-size:0.98em;
     color: #000;
}
p  {
    line-height: 1.5em;
    margin-bottom: 20px;
    text-align: justify;
}
/* img{
  width: inherit;
} */
.skiptocontentstyle{
	left:0px;
	top:-500px;
	width:1px;
	height:1px;
	overflow:hidden;
	position:absolute;
}
/*header*/
#header {
  background-color: #C7E8EF;

}
.wrapper {
    max-width: 1280px;
    /* width: 1280px; */
    margin: 0 auto;
    position: relative;
}
#menu{
  background-color:  #C7E8EF;
}
#nav {
    position: relative;
    margin: 0;
    TEXT-ALIGN: CENTER;
    PADDING: 0;
}
#nav > li {
    position: relative;
    /* line-height: 40px; */
    display: inline-block;
    margin: 0 10px;
    background-color: white;
    border-radius: 10px 10px 0 0;
}
#nav>li>a{
  padding: 10px 14px;
  color: black;
  font-weight: bold;
  font-size: 16px;
  text-decoration: none;
  border-radius: 10px 10px 0 0;
  display: block;
}
#nav > li > a:hover{
  background-color: #c3c3c3;
}
#top_menu{
  float: right;
  top: 0px;
  right: 0px;
  margin-top: 0px;
  position: absolute;
  z-index: 100;

}
#logo {
    height: 100px;
    background-image: url(../images/common/header_bg.png);
    background-position: right;
    /* background-size: 2500px; */
    background-repeat: no-repeat;
    margin-right: 40px;
}
#logo img {
  height: 68px;
    /* width: 550px; */
    margin-top: 15px;
    /* FLOAT: LEFT; */
    margin-left: 40px;
}
#language a {
    margin-right: 10px;
    color:#000;
    text-decoration: none;
    border-left: 2px solid black;
    padding-left: 10px;
    font-weight: bold;
}
#Search{
    display: inline-block;
    margin: 4.5px 0 0 10px;
    font-size: 0.9em;
}
#Fontsize{
  display: inline-block;
  margin: 0 0 0 10px;
  font-size: 0.9em;
}
 #language{
   display: inline-block;
   margin: 0 0 0 10px;
   font-size: 16px;
 }
#Fontsize ul {
    list-style-type: none;
    margin:  0;
    padding: 0;
}
#Fontsize ul li {
    display:  inline-flex;
    margin:  0 5px;
}

/* .font_size_s,.font_size_ss,.font_size_sss,.font_size_s_active,.font_size_ss_active,.font_size_sss_active{
	display:block;
	width:17px;
	height:17px;
} */
.font_size_s{
  display:block;
	background-image:url(../images/common/font_small.png);
  width:10px;
	height:10px;
}
.font_size_ss{
  display:block;
	background-image:url(../images/common/font_mediume.png);
  width:12px;
	height:13px;
}
.font_size_sss{
  display:block;
	background-image:url(../images/common/font_large.png);
  width:15px;
	height:15px;
}
.font_size_s_active{
  display:block;
	background-image:url(../images/common/font_small_active.png);
  width:10px;
	height:11px;
}
.font_size_ss_active{
  display:block;
	background-image:url(../images/common/font_mediume_active.png);
  width:12px;
	height:12px;
}
.font_size_sss_active{
  display:block;
	background-image:url(../images/common/font_large_active.png);
  width:15px;
	height:15px;
}

.access {
    height: 1px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: -500px;
    width: 1px;
}

#Search{
  MARGIN: 0;
  position: relative;
  margin-right: 10px;
}
#Search input {
    width: 140PX;
      BORDER: 2px solid #333;
      background: #fff;
      height: 20PX;
      padding: 1PX 5PX;

}
#Search form{
      margin-right: 20px;
}
button#Search {
  BACKGROUND: URL(../images/common/search_icon.png);
      margin-top: 2px;
      height: 15px;
      width: 15px;
      border: 0;
      background-size: cover;
      margin: 0;
      padding: 0;
      position: absolute;
      right: -5PX;
      top:2px;
}
#slides {
  display: none
}

#slides .slidesjs-navigation {
  position:relative;
  bottom:40px;
  right:20px;
  z-index:9999;
  display:none !important;
}
.toggleMenu {
  display:block;
  width:45px;
  height:45px;
  background:url(../images/common/nav_icon.png) no-repeat left top;
  display: none;
  position: absolute;
left: 40px;
top: 100px;
}




/*content*/
body{
  width: 100%;
  height: 100%;
}
.row{
  margin-right: 0px;
margin-left: 0px;
}
.space_area{
    background-image:url(../images/common/space.png);
    background-repeat: repeat-x;
    background-position: bottom left;
}
.space_area1{
    background-image:url(../images/common/space1.png);
    background-repeat: repeat-x;
    background-position: bottom left;
}
#main_content{
  background-color:  #C7E8EF;
  background-image:url(../images/common/bg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
}
#content{
  	/* background-image:url(../images/common/bg.png); */
    width: auto;
    padding: 0 40px;
    min-height: 600px;
}
h1{
  padding: 20px;
  border-radius: 10px;
  margin: 0px;
  background-color:  #ffffff;
  color: #A83B00;
}
div.warning{
  color: red;
  text-align: center;
  font-size: 24px ;
  padding: 20px;
  border-radius: 10px;
  background-color:  #ffffff;
  font-weight: bold;
  margin: 0 auto;
  width: 50%;
}
div.warning img{
  padding-right: 50px;
  width: 50%;
}
.sub_tittle{
  padding: 20px;
  border-radius: 10px;
  margin: 0px;
  background-color:  #ffffff;
  color: #A83B00;
}
h2{
  padding: 0px;
  color: #A83B00;
}
.nav-tabs .nav-link{
  border: 0px;
}
.nav-link{
  border-radius: 15px 15px 0 0 !important;
  box-shadow: 0px 7px 5px 0px #888888;
}
.nav-link:hover{
  box-shadow: none;
  /* position: absolute;
  bottom: -80px;
  transition: 0.3s;
  width: 100px;
  text-decoration: none;
  color: white;
  border-radius: 0 5px 5px 0; */
}
.modal-dialog{
  max-width: 800px;
}
.safety_tips h1{
  padding: 20px;
  border-radius: 0px;
  /* border-radius: 10px 10px 0 0; */
  margin: 0px;
  background-color:  #ffffff;
  color: #A83B00;
}
.publication h2{
  padding: 10px;
  background-color:  #ffffff;
  border-radius: 10px;
}
#moblie_index{
  display: none;
}
.contact_us table td, .contact_us table th{
  vertical-align: top;
  padding-right: 20px;
  padding-bottom: 20px;
}
.tab-pane{
  width: 100%;
  background-image: url(../images/common/bg-tips.png);
  background-repeat: repeat-y;
  background-size: contain;
}
.sitemap ul.list{
  border-radius: 10px;
  background-color: white;
  width: 75%;
}
.sitemap ul.list li{
  padding: 10px 0;
  list-style-image: url(../images/common/point.png);
  list-style-type: none;

}
.v_th{
  /* padding: 20px; */
  border-radius: 10px;
  background-color: white;
}
.v_th th, .v_th td{
  padding: 10px;
}
.v_th th{
  width: 10%;
}
.contact_us, .sitemap{
  padding: 40px;
  min-height: 600px;
}
.fun_zone{
  padding-bottom: 250px;
}
/* .trivia{
  padding-bottom: 300px;
} */
.trivia ul li{
  width: 75%;
  /* margin-top: 20px; */
  margin-bottom: 20px;
  padding-bottom: 5px;
  border-bottom: 2px solid #FFC62D;
  /* width: 50%; */
  list-style-image: url(../images/common/point.png);
  list-style-type: none;
  /* float: left; */
  /* display: inline; */
}

.trivia ul {
  margin-bottom: 250px;
  }
.trivia a{
  font-weight: bold;
  color: #d80202;
}
.trivia a:hover{
  font-weight: bold;
  color: #d80202;
}

.col-md-4, .col-md-3{
text-align: center;
}

.bg_1{
    height: 100%;
    background: url(../images/common/bg-01.png) bottom center no-repeat;
    /* background-size: contain; */
}

.bg_2{
    height: 100%;
    background: url(../images/common/bg-02.png) bottom center no-repeat;
    /* background-size: contain; */
}


.bg_3{
    height: 100%;
    background: url(../images/common/bg-03.png) bottom center no-repeat;
    /* background-size: contain; */
}
.modal-body > li{
  padding: 10px;
  list-style: none;
}
.modal-body #homeBtn{

}
.modal-body #topBtn{

}

.modal-content{
  background-color: #61D2FF !important;
  border:0px;
}
.modal-title{
  margin-bottom: 0;
  line-height: 1.5;
  font-size: 1.25rem;
  font-weight: 500;
}
#notice1 li, #notice2 li, #notice3 li, #notice4 li, #notice5 li, #notice6 li{
  background-color: #ffffff;
    border-radius: 10px;
    margin-bottom: 10px;
}
table.trivia_table{
  width: 100%;
}
table.trivia_table td, table.trivia_table th{
  /* width: 100%; */
  border: solid 1px #767676;
  padding-right: 20px;
  padding-bottom: 20px;
}
table.q_table{
  margin: 20px;
}

table.q_table td{
  padding: 0 20px;
}
table.q_table td:nth-child(2){
  padding: 20px;
  border-radius: 10px;
  background-color: white;
}
.trivia_list, .video, .fun_zone{
  display: flex;
}
.trivia_list{
   margin-bottom: 20px;
}
.trivia_content{
  min-height: 200px;
  padding: 20px;
  border-radius: 10px;
  background-color: white;
}
.game_content{
  min-height: 360px;
  padding: 20px;
  border-radius: 10px;
  background-color: white;
}
.trivia_q, .video_list{
  padding-left: 20px;
  padding-right: 20px;
  width: calc(100% / 3);
}

.game_list{
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  width:50%;
}
.game_list img{
  border-radius: 10px;
}
.trivia_index, .fun_zone{
  padding: 40px
}
.publication, .video{
  border-radius: 10px;
  padding: 40px
}
.trivia_detail, .about{
  margin-top: 40px;
}
.important_notices, .privacy_policy,.trivia_detail, .about{
  background-color: #ffffff;
  /* padding-top: 10px; */
  border-radius: 10px;
  padding: 40px
}
.about{
  text-align: center;
}
.important_notices{
  margin-top: 30px;
}
.trivia img{
  width: inherit;
}
.trivia_index h2{
color: #eb6100;
}
.safety_tips .col-md-8{
  margin: 10px 0px;
  padding-left: 40px;
  padding-top: 5px;
  background: url(../images/common/point_m.png) no-repeat left top;
}
.safety_tips .col-md-4, .safety_tips .col-md-3{
  margin: 10px 0px;
  padding: 0px;
}
.about img{
  width: 50%;
}
/*footer*/
#footer{
  background-color:  #000;
  color: #fff;
  text-align: center;
}
#footer a{
  color: #fff;
  text-align: center;
  padding: 0 10px;
}
#footer .footer__logos{
  padding-top: 20px;
}
#footer .footer__bottom-links{
  padding-top: 20px;
  padding-bottom: 20px;
}
#footer .footer__copyright{
  padding-bottom: 40px;
}
#footer .footer__copyright span{
  padding-right: 5px;
}
/* .title{
  background-color:  #fff;
} */
#homeBtn {
  display: block;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #0F93FF;
  color: black;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
  }
#topBtn{
  display: none;
  position: fixed;
  bottom: 20px;
  right: 120px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #0F93FF;
  color: black;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}


#topBtn:hover, #homeBtn:hover {
  background-color: #71BFFF;
}
.title{
  background-color: white;
    padding: 20px;
    margin-top: 10px;
    border-radius: 10px;
    font-weight: bold;
}


/*tabs*/
.tab-content{
  width: 100%;
}
.container{
  margin: 0 auto;
  max-width: 1280px;
  width: auto;
  padding: 0;
  /* background-color: #ffffff; */
}
.safety_tips{
  max-width: 900px;
}
.about-con{
  max-width: 900px;
  padding-bottom: 20px;
}
.nav-tabs>li{
  /* width: 50%; */
  text-align: center;
}
.active{
  background-color: #ffffff !important;
  box-shadow: none;
}
.nav-tabs>li>a:hover{
  /* background-color: #fff; */
  border:0px;
}
.nav>li>a:focus, .nav>li>a:hover{
  /* background-color: #fff; */
}
.nav-tabs>li>a{
  margin-right: 0px;
  background-color: #FFDC8F;
  border: 0px;
}
.nav-tabs{
      border-bottom: 0px;
      width: 100%;
}
.tab-content>.active{
  padding:40px;
}






.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
}
.fade.show {
    opacity: 1;
}
.modal {
    overflow-y: auto;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    /* overflow: hidden; */
    outline: 0;
}
.fade {
    opacity: 0;
    transition: opacity .15s linear;
}

#notice1 .modal-body{
  background-image: url(../images/common/bg_popup-01.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    padding-bottom: 250px;
}
#notice2 .modal-body{
  background-image: url(../images/common/bg_popup-02.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    padding-bottom: 250px;
    height: 600px;
}
#notice3 .modal-body{
  background-image: url(../images/common/bg_popup-03.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    padding-bottom: 250px;
    height: 600px;
}
#notice4 .modal-body{
  background-image: url(../images/common/bg_popup-04.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    padding-bottom: 250px;
}
#notice5 .modal-body{
  background-image: url(../images/common/bg_popup-05.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    padding-bottom: 250px;
}
#notice6 .modal-body{
  background-image: url(../images/common/bg_popup-06.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    padding-bottom: 250px;
}


/*animation*/
#notice1 li:nth-child(n), #notice2 li:nth-child(n), #notice3 li:nth-child(n), #notice4 li:nth-child(n), #notice5 li:nth-child(n), #notice6 li:nth-child(n){
  opacity: 0;
  width: 50%;
  box-shadow: 5px 5px 5px grey;
}
#notice1 li:nth-child(1), #notice1 li:nth-child(2), #notice1 li:nth-child(4), #notice1 li:nth-child(5), #notice1 li:nth-child(8), #notice1 li:nth-child(9){
	animation: scale-up-tr 1s forwards;
  float: right;
  margin-left: 50px;
}
#notice1 li:nth-child(3), #notice1 li:nth-child(6), #notice1 li:nth-child(7){
	animation: scale-up-tl 1s forwards;
  float: left;
  margin-right: 50px;
}
#notice4 li:nth-child(2), #notice4 li:nth-child(4), #notice4 li:nth-child(5){
  animation: scale-up-tr 1s forwards;
  float: right;
  margin-left: 50px;
}
#notice4 li:nth-child(1), #notice4 li:nth-child(3), #notice4 li:nth-child(6){
  animation: scale-up-tl 1s forwards;
    float: left;
    margin-right: 50px;
}
#notice5 li:nth-child(1), #notice5 li:nth-child(2), #notice5 li:nth-child(3), #notice5 li:nth-child(5){
  animation: scale-up-tr 1s forwards;
  float: right;
  margin-left: 50px;
}
#notice5 li:nth-child(4){
  animation: scale-up-tl 1s forwards;
  float: left;
  margin-right: 50px;
}
#notice2 li:nth-child(even), #notice3 li:nth-child(even), #notice6 li:nth-child(even){
	animation: scale-up-tr 1s forwards;
  float: right;
  margin-left: 50px;
}
#notice2 li:nth-child(Odd), #notice3 li:nth-child(Odd), #notice6 li:nth-child(Odd){
	animation: scale-up-tl 1s forwards;
  float: left;
  margin-right: 50px;
}
#notice1 li:nth-child(2), #notice2 li:nth-child(2), #notice3 li:nth-child(2), #notice4 li:nth-child(2), #notice5 li:nth-child(2), #notice6 li:nth-child(2){
  animation-delay: 1.5s;
}
#notice1 li:nth-child(3), #notice2 li:nth-child(3), #notice3 li:nth-child(3), #notice4 li:nth-child(3), #notice5 li:nth-child(3), #notice6 li:nth-child(3){
  animation-delay: 2.5s;
}
#notice1 li:nth-child(4), #notice2 li:nth-child(4), #notice3 li:nth-child(4), #notice4 li:nth-child(4), #notice5 li:nth-child(4), #notice6 li:nth-child(4){
  animation-delay: 3.5s;
}
#notice1 li:nth-child(5), #notice2 li:nth-child(5), #notice3 li:nth-child(5), #notice4 li:nth-child(5), #notice5 li:nth-child(5), #notice6 li:nth-child(5){
  animation-delay: 4.5s;
}
#notice1 li:nth-child(6), #notice2 li:nth-child(6), #notice3 li:nth-child(6), #notice4 li:nth-child(6), #notice5 li:nth-child(6), #notice6 li:nth-child(6){
  animation-delay: 5.5s;
}
#notice1 li:nth-child(7), #notice2 li:nth-child(7), #notice3 li:nth-child(7), #notice4 li:nth-child(7), #notice5 li:nth-child(7), #notice6 li:nth-child(7){
  animation-delay: 6.5s;
}
#notice1 li:nth-child(8), #notice2 li:nth-child(8), #notice3 li:nth-child(8), #notice4 li:nth-child(8), #notice5 li:nth-child(8), #notice6 li:nth-child(8){
  animation-delay: 7.5s;
}
#notice1 li:nth-child(9), #notice2 li:nth-child(9), #notice3 li:nth-child(9), #notice4 li:nth-child(9), #notice5 li:nth-child(9), #notice6 li:nth-child(9){
  animation-delay: 8.5s;
}

.tracking-in-expand-fwd-bottom {
	-webkit-animation: tracking-in-expand-fwd-bottom 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: tracking-in-expand-fwd-bottom 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}
@-webkit-keyframes tracking-in-expand-fwd-bottom {
  0% {
    letter-spacing: -0.5em;
    -webkit-transform: translateZ(-700px) translateY(500px);
            transform: translateZ(-700px) translateY(500px);
    opacity: 0;
  }
  40% {
    opacity: 0.4;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    opacity: 1;
  }
}
@keyframes tracking-in-expand-fwd-bottom {
  0% {
    letter-spacing: -0.5em;
    -webkit-transform: translateZ(-700px) translateY(500px);
            transform: translateZ(-700px) translateY(500px);
    opacity: 0;
  }
  40% {
    opacity: 0.4;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    opacity: 1;
  }
}



.scale-up-tr {
	-webkit-animation: scale-up-tr 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: scale-up-tr 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@-webkit-keyframes scale-up-tr {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
  }
}
@keyframes scale-up-tr {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
  }
}


.scale-up-tl {
	-webkit-animation: scale-up-tl 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: scale-up-tl 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes scale-up-tl {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
  }
}
@keyframes scale-up-tl {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
  }
}

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}