body{
    background:url('../images/mainBg-6.png') top center #FFF no-repeat;
    background-size: cover;
    background-attachment: fixed;
    font-family: "Microsoft JhengHei","Helvetica Neue",Helvetica,Arial,sans-serif;
}



#mainContainer{
    /*
    background:url('../images/mainBg-3.png') top center no-repeat;
    */
    padding: 0px;
}

.link-underline{
    text-decoration: underline;
}

.boxTitleBoat{
    font-size: 27px;
    color: #0152a4;
    letter-spacing: 2px;
    padding: 15px 10px 10px 10px;
}

.awardPadding{
    padding:1% 7% 5% 7%;
}

.awardTitle{
    font-weight: bold;
    text-align: left;
    background:none;
    color:#0152a4;
    font-size:42px;
}

.awardSubTitle{
    background:#f05a24;
    color:#FFF;
    padding:5px 30px;
    font-size:20px;
    text-align: left;
}

.awardDeco{
    position: absolute;
    right: 7%;
    bottom: -20%;
}

.img-center{
    margin: auto;
}

.awardWording{
    margin-top: 15px;
    margin-bottom: 15px;
    color:#0152a4;
    font-size:23px;
}

.awardList{
    font-size:21px;
}

.awardDash{
    border-bottom: 1px dashed #464646;
    padding:10px 0px;
}


.textWrapper>img{
    box-shadow: none !important;
    width: 110% !important;
    max-width: 110%;
}

.textWrapper{
    position: absolute;
    bottom: 3px;
    left: 10px;
}



#lightWrapper{
    position: absolute;
    top:0px;
    right: 30%;
    display:none;
}

#ruleModal .modal-content{
    background:transparent;
    box-shadow: none;
    border: none;
}

.carousel-inner>.item{
    background: rgba(255,255,255,0.95);
    border-radius: 10px;
    /**
    border:1px solid #0152a4;
    **/
    padding-bottom: 15px;
}

.specWidthLogo{
    height:63px;
}

.specWidthLogo img{
    margin: auto;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

.commonBoxBg2 {
    border: 1px solid #0152a4;
    background: rgba(255,255,255,0.85);
    border-radius: 10px;
}


.close>span{
    font-size: 56px;
    color: #092f55;
}

.rotateText{
    display: inline-block;
    transform: rotate(-5deg);
}


button,a{
    outline: none;
}

#eventTabBtn{
    background: #f2d700;
    color: #592d13;
    padding: 10px 20px;
    border-radius: 30px;
    margin-bottom: 30px;
    border: none;
    font-weight: bold;
    font-size: 24px;
    box-shadow: 0px 2px 5px #592d13;
}


.specWidthLogo{
    float: left;
    text-align: center;
}

.hoverBigger{
    transition: all linear 0.5s;
}

.hoverBigger:hover{
    transform: scale(1.2);
    transition: all linear 0.5s;
}

.maxWidthImg{
    width:100%;
}

#bananaboat{
    position: fixed;
    left: 1%;
    top: 49%;
}

#umbrella{
    position: fixed;
    left: 0px;
    bottom: 12%;
}

.carousel-inner .item img{
    /**
   width:100%;
    **/
    margin:auto;
}


.waves {
  animation:bgscroll 60s infinite linear;
}

@keyframes bgscroll {
    from {background-position:0 0;}
    to {background-position:-3390px 0px;}
}

.boat {
  animation: bob 3s infinite, boatMove 10s infinite; /* IE 10+ */
    -webkit-animation:bob 3s linear infinite, boatMove 10s linear infinite;
}

@keyframes bob {
  0%,100%   { 
      transform: translateY(5px); 
  }
    
  50% {
      transform: translateY(-5px); 
  }
    
}

@keyframes boatMove {
  0%  { 
     left:-20%;
  }
    
  50% {
      left:50%;
  }
    
  100%{
     left:100%;
  }
    
}


.noFloat{
    float:none !important;
}


.slideDownBtn{
    margin:4px;
    display: inline-block;
}

.bananaVideoFrame{
    background:url('../images/frame.png') top center no-repeat;
    width: 100%;
    height: 482px;
    position: absolute;
    z-index: 10;
    right: 0px;
    top: -6px;
}


.kol-deco{
    box-shadow: none !important;
    position: absolute;
    right:0px;
    top:0px;
}

#flowerFrameTop{
    position: absolute;
    top: 3%;
    left: 0px;
    right: 0px;
    margin: auto;
}


#flowerFrameLeft{
    position: absolute;
    left: -36px;
    top: 12%;
}


#flowerFrameRight{
    position: absolute;
    right: -17px;
    top: 12%;
}

#flowerFrameBottom{
    position: absolute;
    margin: auto;
    bottom: -86px;
    left: 0px;
    right: -7px;
}


#invoice_prefix{
    width:20%;
}

#invoice_no{
    width:53%;
}

.navbar{
    min-height: 40px;
}

.carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev{
    margin-left: -30px;
}

.carousel-control .glyphicon-chevron-right, .carousel-control .icon-next {
    margin-right: -30px;
}

#kol_wrapper{
    position: absolute;
    right: 0px;
    top: 70px;
    z-index: 500;
}

#kolTitle{
    z-index: 600;
    position: absolute;
    left: 5px;
    
    font-size:21px;
    color:#0152a4;
    font-weight: bold;
    writing-mode: tb-rl;
    padding-top: 80%;
    
    /**
   text-shadow:
   -1px -3px 0 #003c78,  
    1px -3px 0 #003c78,
    -1px 3px 0 #003c78,
     1px 3px 0 #003c78;
    **/
    
     text-shadow:
   -1px -3px 0 #fbc50e,  
    1px -3px 0 #fbc50e,
    -1px 3px 0 #fbc50e,
     1px 3px 0 #fbc50e;
    
    margin-left:-3px;
}

#subTitle{
    margin: -93px auto 0px 27%;
}

.kol-textbg{
    background:url('../images/deco-1.png') center center no-repeat;
    background-size:contain;
    color:#FFF;
    font-size:7.5px;
    width: 90px;
    height: 28px;
    padding: 7%;
    position: absolute;
    z-index: 10;
    bottom: -1px;
    left: 7px;
    
}

.kolBox{
    /**
    background:#003c78;
    **/
    background:rgba(255,255,255,0.6);
    border-radius: 8px;
    padding:10px 10px 20px 10px;
    width: 95px;
    box-shadow: 0px 0px 8px #000;
    position: relative;
}

.kolBox img{
    border-radius: 8px;
    box-shadow: 2px 3px 3px #464646;
    width:100%;
}

.orangeLabel{
    padding:5px 10px;
    color:#FFF;
    background:#f05a24;
}

.menuFont{
    font-size:14px;
    color:#000;
    margin:10px 0px;
    padding:0px 10px;
    border-left:1px solid #000;
}

.nav>li>a{
    padding:0px 20px;
    color:#000;
}

.navbar-inverse .navbar-nav>li>a{
    color:#000;
}

#keyLogo{
    margin-left:15px;
    margin-top: -45px;
    z-index: 8888;
    position: relative;
    float:left;
}

.termFont{
    font-size: 17.1px;
}

.smallLogo{
    padding: 10px 3px;
    margin: auto;
}

.imgCenter{
    margin:auto;
}

.termDescSize{
    color:#004283;
    font-size: 17.1px;
}

.termDesc{
    color:#004283;
    font-size: 17.1px;
    padding:10px 0px;
    text-align: justify;
}

.carousel-inner .item img{
    border-radius: 10px;
}

.carousel-control.right{
    background:none;
}

.carousel-control.left{
    background:none;
}

.boxWrapperMargin{
    margin-top: 40px;
    margin-bottom: 40px;
}

.formSubmitBtn{
    background:url('../images/confirm.png') center center no-repeat !important;
    width:188px !important;
    height:50px !important;
    text-indent: -999999px !important;
    border:none !important;
    box-shadow: none !important;
}

.formResetBtn{
    background:url('../images/reset.png') center center no-repeat;
    width:190px;
    height:50px;
    text-indent: -999999px;
}

.giftWrapper{
    z-index: 200;
    margin-top:2px;
    margin-right:60px;
}

.TwoBtnsWrapper{
    margin-top: 30px;
}

.commonBoxBg{
    border:1px solid #0152a4;
    background:rgba(255,255,255,0.6);
    border-radius: 10px;
}

.boxTitle{
    font-size:37.5px;
    color:#0152a4;
    text-align: center;
    padding:15px 10px 10px 10px;
    letter-spacing: 5px;

    
    /**
    -webkit-border-image: 
      -webkit-gradient(linear, 0 0, 0 100%, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
    -webkit-border-image: 
      -webkit-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
    -moz-border-image:
      -moz-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;    
    -o-border-image:
      -o-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
    border-image:
      linear-gradient(to bottom, black, rgba(0, 0, 0, 0)) 1 100%;
    **/

}

.bananaForm div.form-inline{
    text-align: left;
    margin:10px;
}


.repeatBg{
    /**
    background:url('../images/sandBg.png') repeat-y;
    **/
}


.bananaForm div input[type="text"]{
    width:74%;
    padding:10px;
    height:50px;
}

.bananaForm div label{
    font-size:25px;
    font-weight: 200;
    width: 25%;    
}

#videoMain{
    margin-top: 20px;
}

#videoWrapper{
    margin-top: 95px;
}

.mainTitle{
    position: absolute;
    top:-80px;
    z-index: 30;
}

#bananaMenu{
    background:#ffe30a;
    border:none;
}

#myNavbar{
    border:none;
}

.alignCenter{
    text-align: center;
}

.nopadding{
    padding:0px;
}

.floatRight{
    float:right;   
}

.floatLeft{
    float:left;   
}

.clearfix{
    clear:both !important;
}

.col-center{
    margin:auto !important;
    float:none !important;
}


@media (min-width: 1200px){

    .container {
        width: 1024px;
        height:100%;
    }
    
    
    #umbrella{
        top: 21%;
        bottom: 0%;
    }
    
}




@media (min-width: 1400px){
    body{
        background:url('../images/mainBg-big-2.png') top 0% center #FFF no-repeat;
        background-size: cover;
        background-attachment: fixed;
        font-family: "Microsoft JhengHei";
    }
    
    
    #lightWrapper{
        display:block;
    }
    
    #umbrella{
        top: 13%;
        bottom: 0%;
    }
    
    #bananaboat{
        top:40.5%;
    }
   
}


@media (min-width: 1500px){
    #umbrella{
        top: 16%;
        bottom: 0%;
    }
}

@media (min-width: 1600px){
    #umbrella{
        top: 20%;
        bottom: 0%;
    }
}


@media (min-width: 1700px){
    #umbrella{
        top: 25%;
        bottom: 0%;
    }
}

@media (min-width: 1700px){
    #umbrella{
        top: 30%;
        bottom: 0%;
    }
}


@media (max-width: 1119px){
    body{
        background:url('../images/mainBg-3.png') top 5% center #FFF no-repeat;
        background-size: cover;
        background-attachment: fixed;
    }
    
    #umbrella{
        top: 7%;
        bottom: 0%;
    }
}

@media (max-width: 996px){
    .giftWrapper{
        margin-right:0px;
        float:none;
    }
    
    img.imgCenterMobile{
        margin:auto;
    }
    #bananaboat{
    	top: 25%;
	}

}

@media (min-width: 768px){
    .modal-dialog {
        width: 650px;
        margin: 30px auto;
    }

}
  

@media (max-width: 764px){
	
    #bananaboat{
        top:15%;
    }

    
    #keyLogo{
        margin-top: 10px;
    }
    
    #kol_wrapper{
        position: relative;
        top:0px;
        left:0px;
        right:0px;
        margin:25px 0px;
    }
    
    .kolBox{
        display:inline-block;
    }
    
    #wholeKolWrapper{
        text-align: center;
        float:none;
        margin:auto;
    }
    
    #kolTitle{
        position: relative;
        left:0px;
        padding-top: 5px;
        padding-bottom: 10px;
        width:100%;
        writing-mode:initial;
        text-align: center;
    }
    
     li.menuFont{
        border:none;
    }
    
    #videoMain{
        padding:0px;
    }
    
    #videoMain iframe{
        width:100%;
    }
    
    #keyLogo{
        margin:0px;
        padding: 0px;
    }
    
}


@media (max-width: 480px){
    
    .awardWording{
        font-size:21px;
        padding:0px 10px;
    }
    
    .awardPadding{
        padding: 1% 1% 5% 1%;
    }
    
    .awardTitle{
        font-size:38px;
        padding-left: 10px;
        margin-top: 10px;
    }
    
    .awardSubTitle{
        padding:5px 10px;
    }
    
    .awardDeco{
        right:-10%;
    }
    
    .awardDeco img{
        max-width: 65%;
    }
    
    
    .boxTitleBoat{
        font-size:26px;
    }
    
    .navbar-inverse .navbar-nav>li>a{
        text-align: right;
    }
    
    
    body{
        /**
        background:url('../images/mainBg-mobile.png') top center #FFF no-repeat;
        **/
        background:url('../images/mobile-sand-bg.png') bottom center #FFF;
        background-size: contain;
        background-attachment: initial;
    }
    
    #mainContainer2{
        /*
        background:url('../images/sandBg.png') top center #FFF;
        */
        position: relative;
        z-index: 100;
        margin-top:-12% !important;
    }
    
    
    #videoMain{
        margin-top: -35%;
    }
    
    #mobileSpeBg{
        width:100%;
        height:100%;
        position: absolute;
        top:0px;
        left:0px;
        z-index: 2;
        
    }
    
    .kolBox{
        width: 30%;
        margin: 10px;
    }
    
    .carousel-inner>.item{
        padding:7px;
    }
    
    #mainContainer2{
        /**
        margin-top: 50px;
        **/
        margin-top: 35%;
    }
    
    #bananaMenu{
        /*
        margin-bottom: 5px;
        */
        top: 0px;
        position: fixed;
        width: 100%;
        z-index: 9999;
    }
    
    
    
    #keyLogo>img{
        max-width: 50%;
    }
    
    
    #keyLogoMobile>img{
        max-width: 50%;
        position: absolute;
        left: 0px;
        top: 5px;
    }
    
    

    .kol-textbg{
        padding: 4px 5px;
        text-align: left;
    }
    
    
    .boxTitle{
        font-size:28px;
    }
    
    .specWidthLogo {
        width: 28%;
        float: left;
        height: 70px;
        text-align: center;
    }
    
    .smallLogo{
        padding:5px 2px;
        margin: auto auto auto 0px;
    }
    
    #invoice_prefix{
        width:30%;
    }
    
    
    #umbrella{
        top:100px;
    }
    
    #bananaboat{
        top:18%;
        z-index: 200;
    }
    
    #invoice_no{
        width:68%;
    }
    
    
    .slideDownBtn{
        margin:35px 0px 10px 0px;
    }
    
    #subTitle{
        margin:auto;
        margin-top: -15%;
        transform: rotate(9deg);
    }
    
    
    .bananaForm div label{
        width:100%;
        font-size:20px;
    }
    
    .bananaForm div input[type="text"]{
        width:100%;
        padding: 5px;
        height: 35px;
        display: inline-block;
    }
    
    
    .carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev{
        margin-left: -20px;
    }

    .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next {
        margin-right: -20px;
    }
    
    
    #flowerFrameRight{
        right: -81px;
    }
    
    #flowerFrameLeft{
        left: -85px;
    }
    
    #flowerFrameBottom{
        bottom: -25px;
        left: 0px;
        right: -32px;
    }
    
    
    #kol_wrapper{
        visibility: visible !important;
    }
    
    .mainTitleMobile{
        position: relative;
        z-index: 200;
        margin-top:27%;
        margin-bottom: -8%;

    }
    
     #mainContainer2{
        height: 470px;
        margin-bottom: 20px;
        overflow-y: scroll;
    }
    
    .wow{
        visibility: visible !important;
    }
    
    #ruleModal .modal-body{
        margin-top: 25%;
    }
    
    .kol-textbg{
        font-size:9px;
    }
    
   
}

@media (max-width: 400px){
    
    
    
    
    
    @keyframes boatMove {
      0%  { 
         left:-20%;
      }

      50% {
          left:25%;
      }

      100%{
         left:50%;
      }

    }
    
  
    #bananaboat{
        position: absolute;
        top:20%;
        z-index: 200;
    }
    
    .nav.navbar-nav{
        margin-top:10%;
    }
    
    body{
        /**
        overflow-y: hidden;
        **/
    }
}

@media (max-width: 375px){
    
    .awardDeco img {
        max-width: 55%;
    }
    
    .awardDeco {
        right: -18%;
    }
    
    .boxTitleBoat{
        font-size:23px;
    }
    
    
    #mainContainer2{
        height:450px;
        overflow-y: scroll;
    }
}

@media (max-width: 320px){
    .awardWording{
        font-size:16px;
        padding:0px 5px;
    }
    
    .awardDeco {
        right: -16%;
    }
    
    .awardSubTitle{
        font-size:14px;
    }
    
    .awardTitle{
        font-size:32px;
    }
    
    #mainContainer2 {
        margin-top: 40%;
        height:480px;
        overflow-y: scroll;
    }
    
    .boxTitle {
        font-size: 24px;
    }
    
    #subTitle{
        width:96%;
    }
    
    #mainContainer2{
        height: 284px;
    }

}