* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

@font-face {
  font-family: OpenSans-SemiBold; /* set name */
  src: url(../fonts/OpenSans-SemiBold.ttf); /* url of the font */
}

@font-face {
  font-family: OpenSans-Bold; /* set name */
  src: url(../fonts/OpenSans-Bold.ttf); /* url of the font */
}

@font-face {
  font-family: BoonTook-Regular; /* set name */
  src: url(../fonts/BoonTook-Regular.ttf); /* url of the font */
}

h1 {
    margin: 0;
}

.yellow {
    color: #ffdf00;
}

body.en main {
    background-image: url(../img/bg-en.jpg);
    background-repeat: no-repeat;
    background-position: center -120px;
    height: auto;
}

body.th main {
    background-image: url(../img/bg-th.jpg);
    background-repeat: no-repeat;
    background-position: center -120px;
    height: auto;
}

.main-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

.title-box {
    padding-top: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

body.th .title-box {
    padding-top: 40px;
}

body.en .title {
    background-image: url(../img/title-en.png);
    background-repeat: no-repeat;
    background-position: center 0px;
    background-size: contain;
    width: 968px;
    height: 60px;
}

body.th .title {
    background-image: url(../img/title-th.png);
    background-repeat: no-repeat;
    background-position: center 0px;
    background-size: contain;
    width: 844px;
    height: 100px;
}

body.en .desc {
    color: white;
    font-size: 20px;
    text-align: center;
    font-family: OpenSans-SemiBold;
    font-weight: 500;
    margin-top: 15px;
}

body.th .desc {
    /* font-family: OpenSans-Bold; */
    font-family: Tahoma,Geneva,sans-serif;
    font-weight: 700;
    color: white;
    font-size: 20px;
    text-align: center;
     margin-top: 15px;
}

.input-box {
    margin-top: 430px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

body.th .input-box {
    margin-top: 410px;
}

.input-box-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

input[type=text] {
    width: 300px;
    height: 50px;
    background: rgba(158, 159, 158, 0.5);
    border: 1px solid white;
    color: white;
    text-align: center;
    font-family: OpenSans-Bold;
    font-size: 18px;
}

input[type=text]::placeholder {
    color: white;
    text-align: center;
    font-family: OpenSans-Bold;
    font-size: 18px;
    transform: translateY(0px);
    transform: translateX(3px);
}

.lbox-msg {
    height: 74px;
    padding: 0px;
    font-size: 16px;
    box-shadow: 0px 0px 10px 10px white;
    width: 410px;
    display: none;
    color: white;
    background: #aa0604;
    text-align: center;
    position: absolute;
    z-index: 8;
    top: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
}

.lbox-msg span {
    font-family: 'MyriadPro-Regular';
    font-size: 17px;
    position: relative;
    top: 29px;
}

input[type=submit] {
    background-color: #5f0b0c;
    width: 101px;
    height: 50px;
    color: white;
    font-size: 18px;
    font-family: OpenSans-Bold;
    border: 1px solid #ea382f;
    margin-left: 10px;
    cursor: pointer;
}

.input-box p {
    color: white;
    font-size: 16px;
    font-family: OpenSans-SemiBold;
    margin-top: 10px;
}

a {
    color: #ffea00;
    text-decoration: underline;
}

.box-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 0px;
}

.box {
    background-image: url(../img/box-bg.png);
    background-repeat: no-repeat;
    background-position: center 0px;
    background-size: contain;
    width: 250px;
    height: 70px;
    color: white;
    font-size: 16px;
    font-family: OpenSans-Bold;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.box a {
    color: white;
    text-decoration: none;
    cursor: pointer;
}

/*BUTTON HOVER EFFECT*/

@keyframes pulse {
    from { transform: scale(1); }
    to { transform: scale(1.08); }
}

.box:hover {
    background: #ffe000;
    color: #af0000;
    border-radius: 18px;
    animation: pulse 0.6s infinite alternate;
}

.box:hover a {
  color: #af0000;
}

.overlay {
    background: rgba(0, 0, 0, .9);
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 0;
    display: none;
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 15px;
    font-family: OpenSans-Bold;
}

.overlay-box {
    width: 768px;
    height: 640px;
    background-image: url(../img/overflow-box.png);
    background-repeat: no-repeat;
    background-position: center 0px;
    background-size: cover;
    position: relative;
    top: 50%;
    left: 0px;
    right: 0px;
    margin: auto;
    transform: translateY(-50%);
    padding: 10px 50px;
}

.close {
    color: white;
    font-size: 30px;
    position: absolute;
    right: 15px;
    font-family: OpenSans-Bold;
    top: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.close:hover {
    color: #ffe000;
    animation: pulse 0.6s infinite alternate;
}

.overlay h2 {
    color: #fee100;
    font-size: 30px;
    font-family: BoonTook-Regular;
    text-align: center;
    font-weight: 500;
    padding-top: 40px;
    padding-bottom: 25px;
}

.hiw-box p:nth-of-type(1) {
    text-align: center; 
}

.overlay ol {
    padding-left: 25px;
}

.hiw-box ol {
    padding-bottom: 20px;
}

table {
    border: 1px solid #ffdf00;
    margin: 10px 0px;
    width: 100%;
}

.table-winners-th {
    border-collapse: collapse;
    width: 50%;
    margin: 0 auto;
}

.table-winners-en {
    border-collapse: collapse;
    width: 50%;
    margin: 0 auto;
}

table tr th {
    background: #ffdf00;
    color: black;
    text-transform: uppercase;
    font-size: 12px;
}

table tr td {
    border-bottom: 1px solid #ffdf00;
    border-right: 1px solid #ffdf00;
    text-align: center;
    font-size: 12px;
}

.last-column-td {
    border-right: none;
}

.last-row-td {
    border-bottom: none;
}

.scroll-pane {
    width: 100%!important;
    height: 510px;
    overflow: auto;
}

.jspPane {
    width: 95%!important;
}

.jspVerticalBar {
    width: 10px!important;
    margin: 0 auto;
    background: #ff7000!important;
    border-radius: 5px;
}

.jspTrack {
    background: #ff7000!important;
    border-radius: 5px;
}

.jspDrag {
    background: #ffe001!important;
    border-radius: 5px;
    width: 10px!important;
}

.tnc-box table {
    width: 50%;
    margin: 10px auto;
}

.overlay-box-winners {
    background-image: url(../img/overflow-box-winners.png);
}

.overlay-winners h3 {
    color: white;
    font-size: 20px;
    text-align: center;
    font-family: BoonTook-Regular;
    font-weight: 500;
}

.overlay-winners h3 span {
    color: #fee101;
    font-size: 30px;
}

.overlay-winners p {
    color: #fee101;
    font-size: 50px;
    font-family: BoonTook-Regular;
    margin: 155px auto;
    text-align: center;
}

.overlay-winners .slick-2 p {
    font-size: 30px;
}

.overlay-winners .slick-3 p, .overlay-winners .slick-4 p, .overlay-winners .slick-5 p, .overlay-winners .slick-6 p, .overlay-winners .slick-7 p, .overlay-winners .slick-8 p {
    font-size: 14px;
    color: white;
    margin: 0;
    text-transform: uppercase;
}

.overlay-winners .slick-3 p:nth-of-type(2), .overlay-winners .slick-4 p:nth-of-type(2), .overlay-winners .slick-5 p:nth-of-type(2), .overlay-winners .slick-6 p:nth-of-type(2), .overlay-winners .slick-7 p:nth-of-type(2), .overlay-winners .slick-8 p:nth-of-type(2) {
    margin-top: 80px;
}

.overlay-winners p:nth-of-type(2) {
    color: white;
    font-size: 20px;
}

.slick-slider {
    height: 470px;
    width: 668px!important;
}

.slick-next,.slick-prev {
    width: 60.7px!important;
    height: 100px!important;
    top: 240px!important;
    z-index: 1;
}

.slick-prev:before,[dir=rtl] .slick-next:before {
    content: '\27A7'!important;
    color: #f7bf38!important;
    font-size: 100px!important;
    opacity: 1!important;
    display: inline-block !important; /* needed for transform */
    transform: rotate(180deg) !important;
}

.slick-next:before, [dir=rtl] .slick-prev:before {
    content: '\27A7'!important;
    color: #f7bf38!important;
    font-size: 100px!important;
    opacity: 1!important;
}

.slick-prev {
    left: 10px!important;
}

.slick-next {
    right: 10px!important;
}

.slick-3 .img {
    background-image: url(../img/tesla.png);
    background-repeat: no-repeat;
    background-position: center 0px;
    background-size: contain;
    height: 225px;
    margin-top: 60px;
}

.slick-4 .img {
    background-image: url(../img/iphone-17.png);
    background-repeat: no-repeat;
    background-position: center 0px;
    background-size: contain;
    height: 225px;
    margin-top: 60px;
}

.slick-5 .img {
    background-image: url(../img/ipad-air.png);
    background-repeat: no-repeat;
    background-position: center 0px;
    background-size: contain;
    height: 225px;
    margin-top: 60px;
}

.slick-6 .img {
    background-image: url(../img/galaxy-watch.png);
    background-repeat: no-repeat;
    background-position: center 0px;
    background-size: contain;
    height: 225px;
    margin-top: 60px;
}

body.th .slick-7 .img {
    background-image: url(../img/galaxy-bunds.png);
    background-repeat: no-repeat;
    background-position: center 0px;
    background-size: contain;
    height: 225px;
    margin-top: 60px;
}

body.en .slick-7 .img {
    background-image: url(../img/gold-bar.png);
    background-repeat: no-repeat;
    background-position: center 0px;
    background-size: contain;
    height: 225px;
    margin-top: 60px;
}