@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
*{
  box-sizing:border-box;
  font-family: 'Roboto Condensed', sans-serif!important;
}
.logo{
  margin-bottom: 20px;
  text-align: left;
}
.logo img{
  width: 160px;
}
#address{
  padding: 5px 15px;
    border: solid 1px #213185;
    background: #fff;
    width: 100%;
}
button {
/*     margin-top: 20px; */
    padding: 10px 20px;
    border: 0;
    box-shadow: 2px 2px 4px #42413f;
    color: #fff;
    background: #0a248d;
    margin:0 auto;
    display:block;
}

.bn {
    background: url('/wp-content/uploads/2021/04/kh-mng-bg-min.jpg');
    background-position: bottom center;
}

.bn__container {
  display: -webkit-box;
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  flex-direction: column;
  max-width: 1024px;
  min-height: 92vh;
  justify-content: center;
}
.bn__container .notes{
  position:relative;
  width:100%;
  padding: 50px 20px 0;
  z-index: 2;
}

.notes h2{
  color:#fff;
  font-size:22px;
  font-style:italic;
  /* text-transform:uppercase; */
  margin-bottom:15px;
  text-align: center;
  line-height: 1.3;
}
.notes h2 span{
      border: solid 2px #DCDD6C;
    padding: 5px 10px;
    border-radius: 20px;
}
.bn__container .notes ul{
  display:flex;
  flex-wrap: wrap;
  justify-content:space-between;
  
}
.bn__container .notes li{
  color:#fff;
  width:48%;
  font-size:14px;
  font-weight: 300;
  line-height: 1.5;
}
.bn__drop {
  /*margin-left: 45px;*/
  opacity: 0;
  position: fixed;
  /* margin-top: 25px; */
  transform: translate(-50%, -300%);
  top: 50%;
  transition: all .5s;
  z-index: 999;
  width: 600px;
  left: 50%;
}
.bn__info {
  width: 100%;
  margin-bottom: 20px;
}
.bn__title {
  text-align:center;
}
.bn__title img{
  width: 70%;
}
.bn__button {
  position: relative;
  display: -webkit-inline-box;
  display: inline-flex;
  -webkit-box-align: center;
          align-items: center;
  height: 40px;
  padding: 0 14px;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  background-color: #3d7cc9;
  border-radius: 5px;
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
  -webkit-transition: box-shadow 0.1s;
  transition: box-shadow 0.1s;
}
.bn__button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -30px;
  width: 20px;
  height: 100%;
  background-color: rgba(255,255,255,0.4);
  -webkit-transform: skew(-10deg);
          transform: skew(-10deg);
  -webkit-animation: vkBnBlink 4s linear infinite;
          animation: vkBnBlink 4s linear infinite;
}
@-webkit-keyframes vkBnBlink {
  0%, 10.1%, 100% {
    left: -30px;
    opacity: 0;
  }
  0.1%, 10% {
    opacity: 1;
  }
  10%, 99.9% {
    left: calc(100% + 100px);
  }
}
@keyframes vkBnBlink {
  0%, 10.1%, 100% {
    left: -30px;
    opacity: 0;
  }
  0.1%, 10% {
    opacity: 1;
  }
  10%, 99.9% {
    left: calc(100% + 100px);
  }
}
.bn__button:hover {
  box-shadow: 0 2px 2px rgba(0,0,0,0.2);
}
@media (hover: none), (hover: on-demand) {
  .bn__button:hover {
    box-shadow: none;
  }
}
.kim{
  position:absolute;
  left:50%;
  z-index:4;
  transform:translateX(-50%);
  top:-1%;
}
.bn-drop {
  position: relative;
  text-align: center;
  background-color: #fff;
  /* border-radius: 5px; */
  color: #0a248d;
  padding: 0;
  width: 600px;
  box-sizing: border-box;
}
.bn-drop img{
   width: 100%;
   margin: 0;
   display: block;
}
.bn-drop__q {
  /* position: absolute; */
  /* top: 0; */
  bottom: 0;
  left: 0;
  right: 0;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  color: #f70505;
  font-size: 14px;
  font-weight: 500;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
  line-height: 1.3;
}
.model{
  position: absolute;
  width: 55%;
  right: -10%;
  bottom: -65px;
  z-index: 2;
}
.model img{
  width: 100%;
}
/*.bn-drop__q.hide,*/
.hide {
}
.bn__drop.show {
  opacity: 1;
  transform: translate(-50%,-50%);
  box-shadow: 0 0 20px #0000001c;
  transition: all .5s;
}
.bn-drop__info {
  position: relative;
  z-index: 2;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  /* min-height: 208px; */
  box-sizing: border-box;
  /*opacity: 0;
  -webkit-transition: opacity 0;
  transition: opacity 0;*/
}
/*.bn-drop__info.show {
  opacity: 1;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}*/
.bn-drop__icon {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto 16px;
}
.bn-drop__title {
  font-size: 18px;
  font-weight: bold;
  font-size: 18px;
  line-height: 1.3;
  text-align: center;
  margin-top: 10px;
  text-transform: uppercase;
}
.bn-drop__link {
  margin-top: auto;
}
.bn-drop__link > a {
  color: #3d7cc9;
  font-weight: 500;
  font-size: 14px;
  line-height: 13px;
  text-align: center;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none !important;
  border-bottom: 1px solid currentColor;
}
.bn-drop__link > a:hover {
  opacity: 0.8;
}
.logs{
  font-style:italic;
  color:red;
  margin-top:10px;
  font-size:14px;
}
.logs b{
  font-weight:bold;
  
  
}
.close{
  margin-top:10px
}
.bn__drop .hide{
    position: absolute;
    top: 0;
    right: 0;
    box-shadow:none;
    background: #f7d113;
}
@media (hover: none), (hover: on-demand) {
  .bn-drop__link > a:hover {
    opacity: 1;
  }
}
.bn__spinwheel {
  position:relative;
  width: 100%;
  display: flex;
  /* margin-bottom: 60px; */
  align-items: center;
  justify-content: center;
}

.bn-spinwheel {
  position: relative;
  /* display: flex; */
  width: 54%;
}
.bn-spinwheel__rim {
  position: absolute;
  z-index: 2;
  top: -1%;
  /* bottom: 0; */
  left: -1%;
  /* right: 0; */
  width: 102%;
  height: 102%;
  /* display: block; */
}
.bn-spinwheel__rim > img {
  display: block;
  width: 100%;
}
.bn-spinwheel__pin {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  right: -10px;
  margin: auto;
  width: 48px;
  height: 35px;
}
.bn-spinwheel__pin > svg {
  display: block;
  width: 100%;
}
.bn-spinwheel__logo {
  position: absolute;
  z-index: 2;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
  margin: auto;
  width: 100px;
  height: 100px;
  border-radius: 5px;
  padding: 5px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  z-index: 999;
}
.bn-spinwheel__logo img {
  max-width:100%;
}
.bn-spinwheel__logo > svg {
  display: block;
  width: 100%;
}
.bn-spinwheel__drum {
  position: relative;
  z-index: 1;
  border-radius: 100%;
  overflow: hidden;
  top: 0;
}
.bn-spinwheel__drum-inner {
  width: 100%;
  background-color: #fff;
  border-radius: 100%;
  overflow: hidden;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: -webkit-transform 2s linear;
  transition: -webkit-transform 2s linear;
  transition: transform 2s linear;
  transition: transform 2s linear, -webkit-transform 2s linear;
}
.bn-spinwheel__drum-inner::before {
  content: '';
  display: block;
  padding-top: 100%;
}
.bn-spinwheel__sector {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 50%;
  width: 280px;
  height: 50%;
  -webkit-transform-origin: bottom center;
  transform-origin: bottom center;
  -webkit-transform: translate3d(-50%, 0, 0);
  transform: translate3d(-50%, 0, 0);
}
.bn-spinwheel__sector::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 282.5px 188px 0 140px;
  border-color: #00178E transparent transparent transparent;
}
.bn-spinwheel__sector:nth-child(odd)::before {
  border-top-color: #d2c624;
}
.v1 .bn-spinwheel__sector::before {
    border-color: #123feab8 transparent transparent transparent;

}
.v1 .bn-spinwheel__sector:nth-child(odd)::before {
   border-top-color: #08248e;
}
.bn-spinwheel__sector:nth-child(2) {
  -webkit-transform: translate3d(-50%, 0, 0) rotate(36deg);
  transform: translate3d(-50%, 0, 0) rotate(60deg);
}
.bn-spinwheel__sector:nth-child(3) {
  -webkit-transform: translate3d(-50%, 0, 0) rotate(72deg);
  transform: translate3d(-50%, 0, 0) rotate(120deg);
}
.bn-spinwheel__sector:nth-child(4) {
  -webkit-transform: translate3d(-50%, 0, 0) rotate(108deg);
  transform: translate3d(-50%, 0, 0) rotate(180deg);
}
.bn-spinwheel__sector:nth-child(5) {
  -webkit-transform: translate3d(-50%, 0, 0) rotate(144deg);
  transform: translate3d(-50%, 0, 0) rotate(240deg);
}
.bn-spinwheel__sector:nth-child(6) {
  -webkit-transform: translate3d(-50%, 0, 0) rotate(180deg);
  transform: translate3d(-50%, 0, 0) rotate(300deg);
}
.bn-spinwheel__sector:nth-child(7) {
  -webkit-transform: translate3d(-50%, 0, 0) rotate(216deg);
          transform: translate3d(-50%, 0, 0) rotate(216deg);
}
.bn-spinwheel__sector:nth-child(8) {
  -webkit-transform: translate3d(-50%, 0, 0) rotate(252deg);
          transform: translate3d(-50%, 0, 0) rotate(252deg);
}
.bn-spinwheel__sector:nth-child(9) {
  -webkit-transform: translate3d(-50%, 0, 0) rotate(288deg);
          transform: translate3d(-50%, 0, 0) rotate(288deg);
}
.bn-spinwheel__sector:nth-child(10) {
  -webkit-transform: translate3d(-50%, 0, 0) rotate(324deg);
          transform: translate3d(-50%, 0, 0) rotate(324deg);
}
.bn-spinwheel__emoji {
  position: absolute;
  z-index: 1;
  display: block;
  bottom: 135px;
  padding: 0 10px;
  font-size: 50px;
  font-weight: bold;
  /* -webkit-transform: rotate(2deg); */
  /* transform: rotate(2deg); */
  width: 70%;
  left: 15%;
  /* height: 100%; */
  letter-spacing: 1px;
  line-height: 1.3;
}
.bn-spinwheel__emoji{
  color: #ffffff;
  text-align: center;
}
.gift-item{
  margin-top:20px;
  padding: 20px;
  box-shadow: 0 0 10px #0000001a;
  border-radius: 5px;
  background-color: #fff;
}
.gift-item .reward .count {
    color: #ffffff;
    font-size: 18px;
    font-weight: bolder;
    margin-right: 10px;
    line-height: 1;
    width: 20px;
    border-radius: 99%;
    background: #d6a41d;
    height: 20px;
    padding: 8px;
    text-align: center;
    flex: 0 0 20px;
}
.gift-item h1 {
    text-transform: uppercase;
    color: #0041a5;
    font-weight: bold;
    margin-bottom: 15px;
    text-align: center;
    display: block;
    font-size:22px;
}

.gift-item .reward {
    display: flex;
    color: #0042a9;
    align-items: center;
    font-size: 13.75px;
    margin-bottom: 10px;
}
.num{padding-left:5px;}
.form{
  text-align:left;
  max-width: 100%;
  margin:0 auto;
  padding-top:30px;
}
.form h2{
  margin-bottom:15px;
  text-align:center;
  text-transform:uppercase;
}
#FormBox{
  display:flex;
  flex-wrap:wrap;
  justify-content: space-between;
}
.form .form-group{
  width: 32.5%;
  margin-bottom:10px;
}
.form label{
  font-size:14px;
  width:100%;
  display:block;
  margin-bottom:5px;
}
label.error{
  font-size:12px;
  margin-bottom: 0;
  color: red;
  margin-top: 5px;
  font-style: italic;
}
.form input, 
.form textarea{
  width:100%;
  padding: 5px 15px;
  border: solid 1px #213185;
}
.form .form-group:last-child{
  width:100%;
}
@media screen and (max-width: 768px){
  .bn-spinwheel__sector::before{
    border-width: 211px 115px 0 122px;
  }
  .bn-spinwheel__sector{
    width: 240px;
  }
  .bn-spinwheel__emoji{
    bottom: 30%;
    padding: 0 10px 0 10px;
  }
  .bn__container .notes:before{
    bottom:0;
  }
}