@charset "utf-8";

/*common*/
body {
  word-break: break-all;
}
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
form,
fieldset,
p,
button,
input {
  margin: 0;
  padding: 0;
}
ul,
ol,
dl {
  list-style: none;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
img,
fieldset,
iframe {
  border: 0;
}
img {
  vertical-align: top;
}
input,
select,
button {
  vertical-align: middle;
}
input {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 0;
}
button * {
  position: relative;
}
em,
address {
  font-style: normal;
}
a {
  text-decoration: none;
  color: inherit;
  display: block;
}
.clear {
  clear: both;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
* {
  -webkit-tap-highlight-color: transparent;
}
img.map,
map area {
  outline: none;
}
textarea {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
img {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}
input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
textarea:focus,
input:focus {
  outline: none;
}
.obj {
  position: absolute;
  z-index: 2;
}
.btn {
  position: absolute;
  z-index: 2;
}
.btn a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  font-size: 0px;
}
.hidden {
  font-size: 0px;
  display: none;
}

body {
  font-size: 14px;
  font-weight: 400;
  overflow-x: hidden;
  font-family: "Pretendard";
  color: #222222;
}

.pc {
  display: block;
}
.mo {
  display: none;
}

#wrap {
  padding-top: 121px;
  background-color: #ffffff;
  text-align: center;
}

#gnb {
  width: 100%;
  top: 0%;
  left: 0%;
  background-color: #ffffff;
  position: fixed;
  z-index: 100;
}
#gnb ul {
  width: 1200px;
  margin: 0px auto;
  display: flex;
}
#gnb ul li {
  position: relative;
  overflow: hidden;
}
#gnb ul li a {
  padding: 0px 78px;
}
#gnb ul li:after {
  width: 2px;
  height: 61px;
  top: 38px;
  right: 0px;
  background-color: #d4d4d4;
  content: "";
  display: block;
  position: absolute;
}
#gnb ul li:last-child:after {
  display: none;
}

.section {
  position: relative;
  background-repeat: no-repeat;
  background-position-x: center;
}
.section .wrap {
  width: 1000px;
  height: 100%;
  margin: 0px auto;
  position: relative;
}

#main {
  height: 1738px;
  background-image: url("../images/section0.jpg");
}
#procress {
  height: 810px;
  background-image: url("../images/section1.jpg");
}
#gift {
  height: 880px;
  background-image: url("../images/section2.jpg");
}
#footer {
  height: 903px;
  background-image: url("../images/section3.jpg");
}

#main #playerContainer {
  width: 52.5%;
  height: 56.6%;
  top: 30.6%;
  left: 23.8%;
}
#main .menu {
  width: 90%;
  height: 8.6%;
  top: 3.3%;
  left: 5%;
  background-color: #ffffff;
}
#main .menu ul {
  height: 100%;
  position: relative;
  display: flex;
}
#main .menu ul li {
  width: 27%;
  padding: 0% 4%;
  position: relative;
  cursor: pointer;
}
#main .menu ul li:after {
  width: 1px;
  height: 100%;
  top: 0px;
  right: 0px;
  background-color: #d4d4d4;
  content: "";
  display: block;
  position: absolute;
}
#main .menu ul li:last-child:after {
  display: none;
}
#main .menu ul li.m0 a {
  background-image: url("../images/section1_menu0.png");
}
#main .menu ul li.m1 a {
  background-image: url("../images/section1_menu1.png");
}
#main .menu ul li.m2 a {
  background-image: url("../images/section1_menu2.png");
}
#main .menu ul li.m0.active a {
  background-image: url("../images/section1_menu0h.png");
}
#main .menu ul li.m1.active a {
  background-image: url("../images/section1_menu1h.png");
}
#main .menu ul li.m2.active a {
  background-image: url("../images/section1_menu2h.png");
}
#main .menu ul li a {
  position: absolute;
  width: 73%;
  height: 100%;
  top: 0px;
  left: 14%;
  font-size: 0px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
#main #player {
  width: 88.5%;
  height: 83.8%;
  top: 12.8%;
  left: 5.6%;
}
#main #player .playBtn {
  width: 50%;
  top: 30%;
  left: 25%;
  cursor: pointer;
}
#main #player .playBtn img {
  width: 100%;
  height: auto;
}
#main .join {
  width: 46%;
  height: 6.5%;
  bottom: 4.5%;
  left: 27%;
}
#procress .join {
  width: 46%;
  height: 15%;
  bottom: 9%;
  left: 27%;
}
#footer .btn1 {
  width: 35%;
  height: 5%;
  bottom: 8%;
  left: 3%;
}

/*팝업*/
.popup {
  color: #263a7e;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: 900;
  box-sizing: border-box;
  background-color: hsla(0, 0%, 0%, 0.8);
  text-align: center;
  display: none;
}
.popup:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.05em;
}
.popup .wrap {
  width: 630px;
  border-radius: 0 0 50px 50px;
  margin: 0 auto;
  vertical-align: middle;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  display: inline-block;
  overflow: hidden;
}

.popup .top {
  position: relative;
  margin-bottom: -1px;
  overflow: hidden;
}
.popup .close {
  width: 17%;
  height: 100%;
  top: 0%;
  right: 0%;
  position: absolute;
  z-index: 2;
  cursor: pointer;
}
.popup .close a {
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  position: absolute;
  font-size: 0px;
}
.popup .content {
  padding: 20px 0px;
  position: relative;
  background-size: contain;
  background-color: #ffffff;
}
.popup .bottom {
  position: relative;
  margin-top: -1px;
}

#popup_login .content {
  padding: 20px 0 43px 0px;
  background-color: #fff;
}
.popup .content p.txt1 {
  font-size: 28px;
}
.popup .content p.txt2 {
  font-size: 28px;
  color: #ea5100;
}
#popup_login .content .input {
  padding: 15px 30px;
  margin: 0px 50px;
}
#popup_login .content .input li {
  padding-left: 110px;
  margin: 10px 0px;
  position: relative;
}
#popup_login .content .input li label {
  font-size: 25px;
  width: 100px;
  line-height: 50px;
  top: 0px;
  left: 0px;
  position: absolute;
  display: block;
}
#popup_login .content .input li input {
  font-size: 22px;
  width: 100%;
  height: 48px;
  padding: 0px 10px;
  border-radius: 5px;
  border: none;
  background-color: #e8e8e8;
}
#popup_login .content .input li select {
  font-size: 22px;
  width: 100%;
  height: 48px;
  padding: 0px 10px;
  border-radius: 5px;
  border: none;
  background-color: #e8e8e8;
}
#popup_login .content p.agree {
  font-size: 18px;
}
#popup_login .content p.agree input {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
#popup_login .content .policy {
  height: 125px;
  margin: 10px 74px 35px 80px;
  padding: 10px;
  border: 1px solid #c0c0c0;
  overflow-y: auto;
  text-align: left;
}
#popup_login .content .policy dl {
  margin-bottom: 20px;
}
#popup_login .content .policy dt {
  font-size: 15px;
  margin: 5px 0px;
  font-weight: 700;
}
#popup_login .content .policy dd {
  font-size: 14px;
}
#popup_login .content .confirm {
  margin-top: 20px;
}
#popup_quiz .content {
  padding-top: 0px;
}
#popup_quiz .quizContainer {
  position: relative;
  margin-bottom: 15px;
}
#popup_quiz .quiz {
  width: 100%;
  top: 0%;
  left: 0%;
  position: absolute;
}
#popup_quiz input {
  font-size: 40px;
  padding: 10px 20px;
  bottom: 5%;
  left: 10%;
  width: 80%;
  height: 13%;
  border-radius: 15px;
  border: 3px solid #263a7e;
  font-weight: 800;
  text-align: center;
}
@keyframes blink-red {
  0% {
    border-color: #263a7e;
  }
  50% {
    border-color: red;
    box-shadow: 0 0 5px red;
  }
  100% {
    border-color: #263a7e;
  }
}

.blink-border {
  animation: blink-red 0.5s step-end 2; /* 0.5초 간격으로 3번 반복 */
}

#popup_winCheck .content p.txt1 {
  margin-bottom: 20px;
}
#popup_winCheck .content .roulette {
  position: relative;
}
#popup_winCheck .content .roulette .pin {
  width: 11%;
  margin-left: -5.5%;
  top: 3%;
  left: 50%;
  position: absolute;
  z-index: 2;
}
#popup_winCheck .content .roulette .pan span {
  display: none;
}
#popup_winCheck .content .roulette .pan .start {
  display: block;
  cursor: pointer;
}

.popup.result .content {
  padding: 15px 20px;
  padding-bottom: 20px;
}
.popup.result .content .bg {
  width: 95%;
}
#popup_lose .box {
  display: flex;
  justify-content: space-evenly;
}
#popup_lose .box .kakao {
  margin-right: 5px;
}
.popup.result.win .content {
  padding: 20px 20px;
}
.popup.result.win .box {
  margin-top: 20px;
}
.popup.result.win .box .closeBtn img {
  width: 60%;
  max-width: 300px;
}

@media screen and (max-width: 1000px) {
  img {
    width: 100%;
    height: auto;
  }
  .pc {
    display: none;
  }
  .mo {
    display: block;
  }

  #wrap {
    padding-top: 50px;
  }
  #gnb ul {
    width: 100%;
    height: 50px;
    margin: 0px auto;
    display: flex;
  }
  #gnb ul li a {
    padding: 0px 10%;
    height: 100%;
  }
  #gnb ul li {
    width: 33.3%;
  }
  #gnb ul li a img {
    height: 100%;
    width: auto;
  }
  #gnb ul li:after {
    width: 1px;
    height: 30px;
    top: 10px;
    right: 0px;
  }
  .section .wrap {
    width: 100%;
    height: 100%;
    margin: 0px auto;
    position: absolute;
  }

  #main {
    height: auto;
    background-image: none;
  }
  #procress {
    height: auto;
    background-image: none;
  }
  #gift {
    height: auto;
    background-image: none;
  }
  #financial {
    height: auto;
    background-image: none;
  }
  #financial .wrap{position: relative;}
  #footer {
    height: auto;
    background-image: none;
  }
  #main #playerContainer {
    width: 70.1%;
    height: 56.6%;
    top: 30.6%;
    left: 14.9%;
  }
  #main .join {
    bottom: 5.5%;
  }
  #footer .btn1 {
    left: 8%;
  }

  .popup .wrap {
    width: 94%;
    border-radius: 0 0 30px 20px;
  }
  .popup .button {
    width: 50%;
    max-width: 200px;
    margin: 0px auto;
  }
  #popup_login .content {
    padding: 15px 0 15px 0px;
  }
  .popup .content p.txt1 {
    font-size: 16px;
  }
  .popup .content p.txt2 {
    font-size: 16px;
  }
  #popup_login .content .input {
    padding: 15px 0px;
    margin: 0px 15px;
  }
  #popup_login .content .input li {
    padding-left: 80px;
    margin: 5px 0px;
  }
  #popup_login .content .input li label {
    font-size: 16px;
    width: 70px;
    line-height: 40px;
  }
  #popup_login .content .input li input {
    font-size: 16px;
    height: 38px;
  }
  #popup_login .content .input li select {
    font-size: 16px;
    width: 100%;
    height: 38px;
  }
  #popup_login .content p.agree {
    font-size: 14px;
  }
  #popup_login .content p.agree input {
    width: 16px;
    height: 16px;
    margin-right: 5px;
  }
  #popup_login .content .policy {
    height: 60px;
    margin: 10px 20px 10px 20px;
    padding: 5px;
  }
  #popup_login .content .policy dl {
    margin-bottom: 20px;
  }
  #popup_login .content .policy dt {
    font-size: 11px;
    margin: 5px 0px;
  }
  #popup_login .content .policy dd {
    font-size: 10px;
  }
  #popup_login .content .confirm {
    margin-top: 15px;
  }
  #popup_quiz input {
    font-size: 26px;
    padding: 10px 10px;
    border-radius: 10px;
    border: 2px solid #263a7e;
  }
}