html, body { overflow-x: hidden; }

body {
  padding: 0;
  margin: 0;
  background-color: #fff;
  color: #fff;
}
a:hover, a:visited, a:link, a:active{
    text-decoration: none;
}
p {
  color: #fff;
  font-size: 14px;
}
.no-padding {
	padding: 0;
}
hr.style14 { 
  border: 0; 
  height: 1px; 
  /* background-image: -webkit-linear-gradient(left, #0dad4a, #fff, #0dad4a); */
  background-image: -webkit-linear-gradient(left, #00fffb, #49a1a0, #00fffb);
  background-image: -moz-linear-gradient(left, #0dad4a, #fff, #0dad4a);
  background-image: -ms-linear-gradient(left, #0dad4a, #fff, #0dad4a);
  background-image: -o-linear-gradient(left, #0dad4a, #fff, #0dad4a); 
}
hr.style13 { 
  border: 0; 
  height: 1px; 
  background-image: -webkit-linear-gradient(left, #900, #FF0, #900);
  background-image: -moz-linear-gradient(left, #900, #FF0, #900);
  background-image: -ms-linear-gradient(left, #900, #FF0, #900);
  background-image: -o-linear-gradient(left, #900, #FF0, #900); 
}

.navbar {
	background: -moz-linear-gradient(top,  #8cc63f , #0dad4a ); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(,#8cc63f), color-stop(,#0dad4a)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #8cc63f ,#0dad4a ); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #8cc63f ,#0dad4a ); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #8cc63f ,#0dad4a ); /* IE10+ */
	/* background: linear-gradient(to bottom,  #8cc63f ,#0dad4a ); */ 
	/*background: linear-gradient(to bottom, #6dcecc ,#4a5f73 );  W3C */
	background: linear-gradient(to bottom, #215b73 ,#14191a );  /*W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8cc63f', endColorstr='#0dad4a',GradientType=0 ); /* IE6-9 */
	margin-bottom:0;
	z-index: 10;
	border:0;
}
.navbar-default .navbar-brand {
    color: #fff;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #6F0;
}
.navbar-default .navbar-nav > li > a {
    color: #fff;
}
.navbar-default .navbar-nav > li > a:hover {
    color: #43ffdb;
}
.navbar-default .navbar-nav > li > a:focus {
	color:#FFF
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #43ffdb;
	background-color:transparent;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color: #fff;
    background-color: #D5D5D5;
}
	
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #0dad4a;
}

.content-section-event {
	height:auto;
	padding:0;
	background-color:#b9272d;
    border-bottom: 2px solid #e7e7e7;
	height:auto;
}
.event-btn {
  padding:15px;
  overflow: hidden;
  min-width: 150px;
  position: relative;
  opacity: 0.7;
  backface-visibility: hidden;
}
.event-btn:hover {
  padding:15px;
  overflow: hidden;
  min-width: 150px;
  position: relative;
  opacity: 1;
  backface-visibility: hidden;
}
.event-btn img {
  position: relative;
  width:100%;
  backface-visibility: hidden;
  transition: all 0.4s ease-out;
  border: 1px solid rgba(256, 256, 256, 0.1);
  box-shadow: 0px 0px 14px #000;
}
.event-btn img:hover {
  position: relative;
  width:100%;
  backface-visibility: hidden;
  transition: all 0.4s ease-out;
  border: 1px solid #FFF;
  box-shadow: 0px 0px 14px #FFF;
}
.cny {
	padding:20px;
}
.cny-logo {
	position:absolute;
}
.red-bg {

}
.red-bg:hover {

}
svg {
    display: block;
    font: 8em 'Arial';
    margin: 0 auto;
}

.text-copy {
    fill: none;
    stroke: white;
    stroke-dasharray: 6% 29%;
    stroke-width: 3px;
    stroke-dashoffset: 0%;
    animation: stroke-offset 5.5s infinite linear;
}

.text-copy:nth-child(1){
    stroke: #F60;
	animation-delay: -1;
}

.text-copy:nth-child(2){
	stroke: #FF0;
	animation-delay: -2s;
}

.text-copy:nth-child(3){
	stroke: #900;
	animation-delay: -3s;
}

.text-copy:nth-child(4){
	stroke: #F00;
	animation-delay: -4s;
}

.text-copy:nth-child(5){
	stroke: #F93;
	animation-delay: -5s;
}

@keyframes stroke-offset{
	100% {stroke-dashoffset: -35%;}
}

.neon {
  font-family: Arial, Helvetica,"Microsoft Yahei", "微软雅黑", sans-serif;
  color: #FB4264;
  font-size: 48px;
  text-shadow: 0 0 0.5vw #F40A35;
}
@media only screen and (max-width: 768px){
  .neon {
  font-family: Arial, Helvetica,"Microsoft Yahei", "微软雅黑", sans-serif;
  color: #FB4264;
  font-size: 36px;
  text-shadow: 0 0 0.5vw #F40A35;
}
}
.neon {
  animation: neon 1s ease infinite;
  -moz-animation: neon 1s ease infinite;
  -webkit-animation: neon 1s ease infinite;
}

@keyframes neon {
  0%,
  100% {
    text-shadow: 0 0 1vw #FA1C16, 0 0 3vw #FA1C16, 0 0 10vw #FA1C16, 0 0 10vw #FA1C16, 0 0 .4vw #FED128, .2vw .2vw .1vw #806914;
    color: #FED128;
  }
  50% {
    text-shadow: 0 0 .5vw #800E0B, 0 0 1.5vw #800E0B, 0 0 5vw #800E0B, 0 0 5vw #800E0B, 0 0 .2vw #800E0B, .2vw .2vw .1vw #40340A;
    color: #806914;
  }
}

.title{
  font-weight: 500;
}

.form-control{
  background-color: #ffffff;
  border: 1px solid #ffffff;
  color: #000000;
}




/* ------------------------------DROPDOWN MENU------------------------------ */
.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus{
	background: -webkit-linear-gradient(top, #009245, #004537);
}

.dropdown-menu{
	background: linear-gradient(to bottom, #8cc63f, #0dad4a );
}

.dropdown-menu > li > a{
	color: #fff;
}
.dropdown-menu > li > a:hover, 
.dropdown-menu > li > a:focus{
	background: none;
	color: #6F0;
	outline: none;
}

.dropdown-submenu .dropdown-menu{
	top: 0;
    left: 100%;
    margin-top: 12px;
}

/* ------------------------------button2------------------------------ */
button2{
  text-align:center;
  display: inline-block;
  position: relative;
  background: none;
  border: none;
  color: #FC0;
  font-size: 18px;
  cursor: pointer;
  width:33%;
  background:rgba(100,13,19,0.8);
}
span2{
  display: block;
  padding: 10px 0px;
  font-family: Arial, Helvetica,"Microsoft Yahei", "微软雅黑", sans-serif;
}
button2::before, button2::after{
  content:"";
  width: 0;
  height: 2px;
  position: absolute;
  transition: all 0.2s linear;
  background: #FC0;
}

span2::before, span2::after{
  content:"";
  width:2px;
  height:0;
  position: absolute;
  transition: all 0.2s linear;
  background: #FC0;
}
button2:hover::before, button2:hover::after{
  width: 100%;
}
button2:hover span2::before, button2:hover span2::after{
  height: 100%;
}
.btn-6::before{
  left: 50%;
  top: 0;
  transition-duration: 0.4s;
}
.btn-6::after{
  left: 50%;
  bottom: 0;
  transition-duration: 0.4s;
}
.btn-6 span2::before{
  left: 0;
  top: 50%;
  transition-duration: 0.4s;
}
.btn-6 span2::after{
  right: 0;
  top: 50%;
  transition-duration: 0.4s;
}
.btn-6:hover::before, .btn-6:hover::after{
  left: 0;
}
.btn-6:hover span2::before, .btn-6:hover span2::after{
  top: 0;
}

.btn-text{
  color: #ffffff;
  text-shadow: #6c4f00 1px 0 10px;
}

.btn-primary.gradient{
  background: linear-gradient(to bottom,  #f6d577 ,#e8ad02);
}
.btn-primary.gradient:hover{
  /* background: linear-gradient(to bottom,  #73D4D4 ,#0397b8); */
  background: linear-gradient(to bottom, #6dcecc ,#4a5f73);
}

.star{
  color: #ffde00;
  top: 3px;
}


/* ------------------------------modal-right------------------------------ */
.modal2.right .modal-dialog2 {
	position: fixed;
	top:0;
	background-color:#FFF;
	margin: auto;
	width: 100%;
	height: 100%;
	-webkit-transform: translate3d(0%, 0, 0);
	-ms-transform: translate3d(0%, 0, 0);
	-o-transform: translate3d(0%, 0, 0);
	transform: translate3d(0%, 0, 0);
	z-index:2000;
}


.modal2.right .modal-content2 {
	height: 100%;
	overflow-y: auto;
}
/* ----- MODAL STYLE ----- */
	.modal-content2 {
		border-radius: 0;
		border: none;
		padding:0;
	}
	
	.modal-body2 {
		max-height: calc(100vh - 80px);
    	overflow-y: auto;
		font-family: Arial, Helvetica,"Microsoft Yahei", "微软雅黑", sans-serif;
	}
	.modal-body2 > div {
		font-family: Arial, Helvetica,"Microsoft Yahei", "微软雅黑", sans-serif;
	}
	.modal-body2 > div > div{
		font-family: Arial, Helvetica,"Microsoft Yahei", "微软雅黑", sans-serif;
	}
	.modal-title {
		font-family: Arial, Helvetica,"Microsoft Yahei", "微软雅黑", sans-serif;
	}

	.modal-header2 {
		height:50px;
		background: -moz-linear-gradient(top,  #8cc63f , #0dad4a ); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(,#8cc63f), color-stop(,#0dad4a)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  #8cc63f ,#0dad4a ); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  #8cc63f ,#0dad4a ); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  #8cc63f ,#0dad4a ); /* IE10+ */
		background: linear-gradient(to bottom,  #8cc63f ,#0dad4a); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8cc63f', endColorstr='#0dad4a',GradientType=0 ); /* IE6-9 */
		padding-left:20px;
		padding-top:12px;
	}
	.modal-header2 >label {
		position:absolute;
		font-size:18px;
		color:#FFF;
	} 
/*Right*/
.modal2.right.fade .modal-dialog2 {
	right: -100%;
	-webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
	-moz-transition: opacity 0.3s linear, right 0.3s ease-out;
	-o-transition: opacity 0.3s linear, right 0.3s ease-out;
	transition: opacity 0.3s linear, right 0.3s ease-out;
}
	
.modal2.right.fade.in .modal-dialog2 {
	right: 0;
}
/* ------------------------------intro------------------------------ */
#hero {
  height: 600px;
  overflow: hidden;
  position: relative;
}
.affix {
   top: 0;
   width: 100%;
}

.affix + .hero{
    padding-top: 600px;
}
#hero-mobile {
  display: none;
  background: url(../../img/logo-mono.png) no-repeat center bottom;
  height: 400px;
  width:100%;
}
#hero, .layer {
  /*min-height: 600px;*/
  min-height: 1148px;
}
.layer {
  background-position: bottom center;
  background-size: auto;
  background-repeat: no-repeat;
  width: 100%;
  height: auto;
  position: fixed;
  z-index: -1;
}

.layer-bg-bounce {
}
.layer-bg {
  background-image: url(../img/tofe/launch/bg.png);
  background-position:bottom;
  background-size: cover; 
  background-repeat: no-repeat;

}

.layer-bg1 {
  background-image: url(../img/mosiang/banner_background.png);
  background-size: cover; 
  background-position:center;
}

.layer-bg2 {
  background-image: url(../img/mosiang/banner_char1.png);
  background-position:center;
}
/* .layer-bg2 {
  background-image: url(../../img/mosiang/banner_char1.png);
  background-position:center;
} */


.layer-bg2-cn {
  background-image: url(../img/cny2022/mobile-scn.png);
  background-position:center;
}
.layer-bg2-tcn {
  background-image: url(../img/cny2022/mobile-tcn.png);
  background-position:center;
}

.layer-bg3 {
  background-image: url(../img/new-wulin/wulin_banner.jpg);
  background-position:center;
}
.layer-bg3_cn {
  background-image: url(../img/new-wulin/wulin_banner.jpg);
  background-position:center;
}

.layer-bg3-cn {
  background-image: url(../img/cny2022/1-ipad-scn.png);
  background-position:center;
}

.layer-bg3-tcn {
  background-image: url(../img/cny2022/1-ipad-tcn.png);
  background-position:center;
}

.layer-2 {
  background-image: url(../img/cny2022/1-ipad.png);
  background-position: center;
}
.layer-3 {
  background-image: url(../img/gujian/char1.png);
  background-position:center;
}
.layer-3-mobile {
  background-image: url(../img/gujian/top/mobile.png);
  background-position: center;
}
.layer-4 {
  background-image: url(../img/new-wulin/wulin_banner.jpg);
  background-position:center;
}
.layer-4_cn {
  background-image: url(../img/new-wulin/wulin_banner.jpg);
  background-position:center;
}
.layer-4-cn {
  background-image: url(../img/cny2022/char-scn.png);
  background-position:center;
}
.layer-4-tcn {
  background-image: url(../img/cny2022/char-tcn.png);
  background-position:center;
}

.layer-overlay {
  background-image: url(../img/para3a.png);
  background-position:top;
}
.layer-overlay2 {
  background-image: url(../img/para3b.png);
}
.content-section-cny {
	height:auto;
	padding:0;
	background-color:#030;
  border-bottom: 0px solid #e7e7e7;
	height:auto;
}

.content-section-xmas {
	height:auto;
	padding:50px;
  background :url(../img/raya2022/web-cibmall-bg.jpg) no-repeat;
  background-size: cover;
  border-bottom: 0px solid #e7e7e7;
	height:auto;
}
.raya-btn {
  padding:5px;
  overflow: hidden;
  min-width: 150px;
  position: relative;
  opacity: 0.5;
  backface-visibility: hidden;
  transition: all 0.4s ease-out;
  border: 1px solid rgba(256, 256, 256, 0.1);
  box-shadow: 0px 0px 14px #000;
}
.raya-btn:hover {
  padding:5px;
  overflow: hidden;
  min-width: 150px;
  position: relative;
  opacity: 1;
  backface-visibility: hidden;
  transition: all 0.4s ease-out;
  border: 1px solid #6F0;
  box-shadow: 0px 0px 14px #6F0;
}
.raya-btn img {
  position: relative;
  width:100%;
  backface-visibility: hidden;
}
#awan {
z-index: -1;
position:fixed;
top:0px;left:0px;
width:100%;
height:100%;
text-align:center;
margin:0px;
padding:0px;
background-color:#C0DEED;
background: url(../img/cloud.png) center top repeat-x;
padding-top:100px;
padding-bottom:10px;
  width: 100%;
  height: 600px;
  animation: awan-animasi 35s linear infinite;
  -ms-animation: awan-animasi 35s linear infinite;
  -moz-animation: awan-animasi 35s linear infinite;
  -webkit-animation: awan-animasi 35s linear infinite;
}
@keyframes awan-animasi {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  };
}
@-webkit-keyframes awan-animasi {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  };
}
@-ms-keyframes awan-animasi {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  };
}
@-moz-keyframes awan-animasi {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  };
}


/* ------------------------------section-moxiang----------------------------- */
.content-section-mx {
  padding: 50px 0;

/* ------------------------------ Background image ----------------------------- */
background :url(../img/mosiang/bg1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  border-bottom: 1px solid #e7e7e7;
height:auto;
}
.section-heading {
text-shadow: 1px 1px #333
}
.game {
padding:20px;
background-color: rgba(0, 0, 0, 0.5);
}
.anime1 {
z-index: -2;
position:absolute;
}
.anime2 {
z-index: -3;
position:absolute;
}
.anime3 {
z-index: -4;
position:absolute;
}
.anime4 {
z-index: -1;
position:absolute;
}
.w33 {
width:32%;
}
.modal-content {
margin-top:10%;
border: 0px;
}
.modal {
border: 0px;
}
.modal-body {
height:auto;
padding: 5%;
background: -moz-linear-gradient(top,  #fff , #ccc ); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(,#fff), color-stop(,#ccc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #fff ,#ccc ); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #fff ,#ccc ); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #fff ,#ccc ); /* IE10+ */
background: linear-gradient(to bottom,  #fff ,#ccc ); /* W3C */
text-align: center;
border-radius: 4px;
}
.modal-body > h1{
color:#0dad4a;
}
.modal-body > h3{
color:#000;
}
.modal-body > p{
color:#555;
}

.content-section-b {
  padding: 50px 0;
background :url(../img/bg2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  border-top: 1px solid #e7e7e7;
  border-bottom: 1px solid #e7e7e7;
height:auto;
}

.content-section-c {
  padding: 50px 0;
background :url(../img/bg3.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  border-top: 1px solid #e7e7e7;
  border-bottom: 1px solid #e7e7e7;
height:auto;
}



/* ------------------------------section-a----------------------------- */
.content-section-a {
    padding: 50px 0;
	background :url(../img/bg1.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    border-bottom: 1px solid #e7e7e7;
	height:auto;
}
.section-heading {
	text-shadow: 1px 1px #333
}
.game {
	padding:20px;
	background-color: rgba(0, 0, 0, 0.5);
}
.anime1 {
	z-index: -2;
	position:absolute;
}
.anime2 {
	z-index: -3;
	position:absolute;
}
.anime3 {
	z-index: -4;
	position:absolute;
}
.anime4 {
	z-index: -1;
	position:absolute;
}
.w33 {
	width:32%;
}
.w34 {
	width:49%;
}
.modal-content {
	margin-top:10%;
	border: 0px;
}
.modal {
	border: 0px;
}
.modal-body {
	height:auto;
	padding: 5%;
	background: -moz-linear-gradient(top,  #fff , #ccc ); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(,#fff), color-stop(,#ccc)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #fff ,#ccc ); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #fff ,#ccc ); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #fff ,#ccc ); /* IE10+ */
	background: linear-gradient(to bottom,  #fff ,#ccc ); /* W3C */
	text-align: center;
	border-radius: 4px;
}
.modal-body > h1{
	color:#0dad4a;
}
.modal-body > h3{
	color:#000;
}
.modal-body > p{
	color:#555;
}

.content-section-b {
    padding: 50px 0;
	background :url(../img/bg2.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    border-top: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
	height:auto;
}

.content-section-c {
    padding: 50px 0;
	background :url(../img/tlbb/new-server/bg.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    border-top: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
	height:auto;
}

.content-section-c1 {
  padding: 50px 0;
background :url(../img/prefectworld/cb_pw_bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  border-top: 1px solid #e7e7e7;
  border-bottom: 1px solid #e7e7e7;
height:auto;
}


/* ------------------------------section-d------------------------------ */
.content-section-d {
	background-color:#FFF;
	height:auto;
}
.aos-all {
  margin: 0 auto 0 auto;
}
.aos-item {
  display: inline-block;
  width: 100%;
}
.aos-item2 {
  display: inline-block;
  float: left;
  width: 33.3333%;
  padding: 20px;
}
.aos-item__inner {
  position: relative;
  width: 100%;
  height: 35%;
  float: left;
  text-align: center;
}
.box {
  z-index: 5;
  overflow: hidden;
  position: relative;
  border: 7px solid #0dad4a;

}
.box:hover > img {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
  opacity: 1;
}
.box img {
  display: block;
  position: relative;
  -webkit-transition: all 0.6s ;
  -moz-transition: all 0.6s ;
  -o-transition: all 0.6s ;
  -ms-transition: all 0.6s ;
  transition: all 0.6s ;
}
.top-title {
	top: 0;
    left:0;
	position: absolute;
	z-index:1000;
}
.game-title {
	top:60%;
    right:0;
	position: absolute;
	z-index:1000;
}

/* ------------------------------section-e------------------------------ */
.content-section-e {
	background: -moz-linear-gradient(top,  #8cc63f , #0dad4a ); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(,#8cc63f), color-stop(,#0dad4a)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #8cc63f ,#0dad4a ); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #8cc63f ,#0dad4a ); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #8cc63f ,#0dad4a ); /* IE10+ */
	background: linear-gradient(to bottom,  #8cc63f ,#0dad4a ); /* W3C */
	height:auto;
	padding-top:30px;
	padding-bottom:30px;
}
.counter-value { font-size: 40px; font-weight: normal;  margin-top: 10px; margin-bottom: 0; text-align: center; }
.num { font-size: 18px; font-weight: normal;  margin-top: 10px; margin-bottom: 0; text-align: center; }

/* ------------------------------section-f------------------------------ */
.content-section-f {
	background-color:#FFF;
	height:auto;
}
.thumbnail {
	height:350px;
}
.caption>h3 {
	font-size:16px;
}

/* ------------------------------section-g------------------------------ */
.content-section-g {
	padding-top:50px;
	padding-bottom:50px;
	background :url(../img/map-sea.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    border-top: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
	height:auto;
}

.button-b {
  -webkit-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
  -moz-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
  -ms-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
  -o-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
  transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
  display: block;
  margin: 20px auto;
  width:100%;
  text-decoration: none;
  border-radius: 4px;
  padding: 20px 30px;
  color: rgba(256, 256, 256, 1);
  box-shadow: rgba(256, 256, 256, 1) 0 0px 0px 2px inset;
  background-color: rgba(0, 0, 0, 0.5);
}

.button-b:hover {
  display: block;
  margin: 20px auto;
  text-decoration: none;
  border-radius: 4px;
  padding: 20px 30px;
  color: rgba(256, 256, 256, 1);
  text-shadow:  5px 5px 5px 5px #000;
  box-shadow: rgba(158, 21, 34, 1) 0 0px 0px 40px inset;
}

/* ------------------------------section-h------------------------------ */
.content-section-h {
	background-color:#000;
    border-bottom: 1px solid #e7e7e7;
	height:auto;
}
.event {
	position: absolute;
    z-index:0;
}
.bounce {
  -moz-animation: bounce 5s infinite;
  -webkit-animation: bounce 5s infinite;
  animation: bounce 5s infinite;
}

/* ------------------------------section-i------------------------------ */
.content-section-i {
  background-color:#FFF;
	height:auto;
}
#tab-content {
	padding: 20px;
	background-color: rgba(0, 0, 0, 0.5);
	height:auto;
	margin-bottom:5%;
}
.list {
    color: #fff;
    list-style: none;
    padding-left: 0px;
    display:block;
}
.list> a> li{
    padding:3px 30px;
    display: inline-block;
    font-size:15px;
    margin:0px;
    color:#fff;
    background: linear-gradient(#8cc63f,#0dad4a);
	border:1px solid #0dad4a;
    box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.25);
}
.list> a> li:first-of-type {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.list> a> li:last-of-type {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.list> a> li:hover {
    color:#0F0;
    text-shadow: 4px 4px 20px #6F9;
    background: linear-gradient(#009245,#004537);
    border:1px solid #0dad4a;
    box-shadow: 0px 0px 8px 3px #004537;
    padding:3px 30px;
    cursor:pointer;
    -webkit-transition: box-shadow 0.2s ease-in-out,  background-image 0.3s ease-in-out, text-shadow 0.5s linear, color 0.5s linear;
    -moz-transition: box-shadow 0.2s ease-in-out,  background-image 0.3s ease-in-out, text-shadow 0.5s linear, color 0.5s linear;
}
.list> a> li:active {
  background:linear-gradient(#2c2e38,#060708);
  padding:3px 30px;
}
.content-section-channel {
	background-color:#FFF;
	border-top: 2px solid #8cc63f;
	border-bottom: 2px solid #8cc63f;
}

.channel{
    padding:0px;
    display: inline-block;
    font-size:15px;
    margin:0px;
    color:#666;
    background: none;
	border-bottom:3px solid #0dad4a;

}

.channel:hover {
    color:#0dad4a;
    text-shadow: 4px 4px 20px #6F9;
    background: none;
    border-bottom:3px solid #8cc63f;

    padding:0px;
    cursor:pointer;
    -webkit-transition: box-shadow 0.2s ease-in-out,  background-image 0.3s ease-in-out, text-shadow 0.5s linear, color 0.5s linear;
    -moz-transition: box-shadow 0.2s ease-in-out,  background-image 0.3s ease-in-out, text-shadow 0.5s linear, color 0.5s linear;
}

.slick-slide {
    margin: 5px 5px;
}

.slick-slide img {
    width: 100%;
	opacity: 1;
}
.slick-slide img:hover {
	opacity: 1;
}

.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

.tab-pane {overflow-x: hidden;}

/* ------------------------------section-j------------------------------ */
.content-section-j {
	background-color:#666;
	height:auto;
}

/* ------------------------------section-k------------------------------ */
.content-section-k {
	background-color:#000;
	height:auto;
}

@media only screen and (max-width: 768px){
	.button2{
  text-align:center;
  display: inline-block;
  position: relative;
  background: none;
  border: none;
  color: #FC0;
  font-size: 15px;
  cursor: pointer;
  width:32%;
  background:rgba(100,13,19,0.8);
}

.content-section-xmas {
	height:auto;
	padding-top:20px;
  padding-bottom:20px;
  padding-right: 0px;
  padding-left: 0px;
  background :url(../img/xmas-2021/cibmall-bg.jpg) no-repeat;
  background-size: cover;
  border-bottom: 0px solid #e7e7e7;
	height:auto;
}
	
	.content-section-c1{
		height:870px;
	}
	
	.content-section-a {
		height:870px;
	}
	
	.content-section-b {
		height:870px;
	}
	
	.content-section-c {
		height:870px;
	}
  
	.aos-item {
	display: inline-block;
	width: 100%;
	border: 5px #FFF;
	}
	
	.aos-item2 {
	display: inline-block;
	float: left;
	width: 100%;
	padding: 20px;
	border: 5px #FFF;
	}
	
	.aos-item__inner {
    position: relative;
    width: 100%;
    height: 50%;
    float: left;
    background: #fff;
    line-height: 260px;
    text-align: center;
    color: #fff;
	}
  
	.btn-primary {
	border:0;
	font-size:10px;
	padding:15px;
	}	
	
	.list> a> li{
    padding:3px 10px;
    display: inline-block;
    font-size:10px;
    margin:0px;
    color:#fff;
    background: linear-gradient(#8cc63f,#0dad4a);
	border:1px solid #0dad4a;
    box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.25);
	}
	
	.list> a> li:hover {
    color:#0F0;
    text-shadow: 4px 4px 20px #6F9;
    background: linear-gradient(#009245,#004537);
    border:1px solid #0dad4a;
    box-shadow: 0px 0px 8px 3px #004537;
    padding:3px 10px;
    cursor:pointer;
    -webkit-transition: box-shadow 0.2s ease-in-out,  background-image 0.3s ease-in-out, text-shadow 0.5s linear, color 0.5s linear;
    -moz-transition: box-shadow 0.2s ease-in-out,  background-image 0.3s ease-in-out, text-shadow 0.5s linear, color 0.5s linear;
	}

	.footer {
		font-size:12px;
	}
	
	.footer-dark {
		font-size:12px;
	}
}

.f-logo > img{
  margin-right: 2.4375rem;
}

.f-space{
  padding-top: 15px;
  padding-bottom: 15px;
  float: right;
}
@media only screen and (max-width: 996px){
	.f-space{
	  float: none;
	  padding-left: 15px;
	}
}

.f-rules{
  color: #b8b9b9;
  font-size: 12px;
}
.f-rules:hover{
  color: #23527c;
  /* background-color: transparent; */
  font-size: 12px;
}

.f-info{
  margin-right: 2.4375rem;
}

.f-copyright{
  font-size: 12px;
}


























/* ------------------------------footer------------------------------ */
.footer {
	height:auto;
	background: -moz-linear-gradient(top,  #8cc63f , #0dad4a ); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(,#8cc63f), color-stop(,#0dad4a)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #8cc63f ,#0dad4a ); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #8cc63f ,#0dad4a ); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #8cc63f ,#0dad4a ); /* IE10+ */
	/*background: linear-gradient(to bottom,  #8cc63f ,#0dad4a );  W3C */
	background: linear-gradient(to bottom, #215b73 ,#14191a ); /* W3C */
	padding: 20px;
}
.small-p >p {
	font-size:11px;
}

.footer-dark {
	height:auto;
	background-color:#333;
}

.snowflake {
  color: #fff;
  font-size: 1em;
  font-family: Arial;
  text-shadow: 0 0 1px #000;
}

@-webkit-keyframes snowflakes-fall{
  0%{top:-10%}
  100%{top:100%}
}
@-webkit-keyframes snowflakes-shake{
  0%{-webkit-transform:translateX(0px);
    transform:translateX(0px)
  }50%{-webkit-transform:translateX(80px);transform:translateX(80px)}
  100%{-webkit-transform:translateX(0px);transform:translateX(0px)}
}
@keyframes snowflakes-fall{
  0%{top:-10%}100%{top:100%}
}
@keyframes snowflakes-shake{
  0%{transform:translateX(0px)}
  50%{transform:translateX(80px)}
  100%{transform:translateX(0px)}}

.snowflake{
  position:fixed;
  top:-10%;
  z-index:9999;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  cursor:default;
  -webkit-animation-name:snowflakes-fall,snowflakes-shake;
  -webkit-animation-duration:10s,3s;
  -webkit-animation-timing-function:linear,ease-in-out;
  -webkit-animation-iteration-count:infinite,infinite;
  -webkit-animation-play-state:running,running;
  animation-name:snowflakes-fall,snowflakes-shake;
  animation-duration:10s,3s;
  animation-timing-function:linear,ease-in-out;
  animation-iteration-count:infinite,infinite;
  animation-play-state:running,running}

.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}
.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}
.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}
.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}
.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}
.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}
.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}
.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}
.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}
.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}


/*--------------------------------------------------------------
# Alet Section
--------------------------------------------------------------*/
.alert{
	position: absolute;
	top: -12px;
	right:0px;
	padding: 1px 8px;
	border-radius: 10%;
	background-color: red;
	color: white;
}