@charset "utf-8";

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  font-family: 'NanumSquare', sans-serif;
  font-weight: 700;
}

#wrapper {
  width: 100%;
  max-width: 72rem;
  background-image: url('/theme/squid/img/645img/bg.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  /* height: 1280px; */
  margin: 0 auto;
  padding-top: 10rem;
}

#header {
  width: 100%;
  max-width: 72rem;
  height: 10rem;
  margin: 0 auto;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
}

.header_ {
  position: relative;
  ;
  height: 100%;
}

.header_title {
  margin: 0 auto;
  width: 100%;
  max-width: 600px;
  line-height: 10.0rem;
  display: flex;
  justify-content: space-between;
  height: 100%;
  align-items: center;
}

.header_logo {
  width: 100%;
  max-width: 25rem;
  height: 4.3rem;
  margin: 0 auto;
  /*background-image: url('/squid_game/theme/645co/img/645img/logo.png');*/
  background-image: url('/theme/squid/img/645img/logo_new.png');
 /* background-image: url('/theme/squid/img/645img/logo.png');*/
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

.gnb_menu_btn {
  border: 0;
  outline: 0;
  background-color: unset;
  position: absolute;
  top: 50%;
  left: 4rem;
  transform: translateY(-50%);
}

.button_img {
  background-image: url('/theme/squid/645co/img/645img/menu.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 3em;
  width: 3em;

}

.content_1_flex {
  padding-left: 5.0rem;
  display: flex;
  align-items: center;
  height: 10rem;
  margin-top: 25px;
}

.star_icon {
  width: 3.0rem;
  height: 3.0rem;
  background-image: url('/theme/squid/645co/img/645img/star.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.content_1_flex p {
  color: white;
  font-size: 3.6rem;
  padding-left: 2rem;
}

.content_2 {
  margin-bottom: 35px;
}

.content_2_img {
  width: 100%;
  height: 57.6388888vw;
  background-image: url('/theme/squid/645co/img/645img/video.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}

.content_2_arrow {
  width: 19.30555%;
  height: 0;
  padding-top: calc(139 / 139 * 19.30555%);
  background-image: url('/theme/squid/img/645img/play_icon.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;

}

.content_3 {
  margin-bottom: 13rem;
}

.content_3 p {
  text-align: center;
  color: #fff;
  font-size: 3rem;
  line-height: 8rem;
}

.select_box_flex {
  width: 100%;
  display: flex;
  padding: 0 5rem;
  justify-content: space-between;
}

.select_box_flex select {
  color: #fff;
  width: 64.516%;
  max-width: 40rem;
  padding: .8em .5em;
  font-family: inherit;
  background: url('/theme/squid/645co/img/645img/number.png') no-repeat 95% 50%;
  border: 1px solid #999;
  border-radius: 8px 8px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-align: center;
  font-size: 3rem;
  background-size: 3.4rem 2.5rem;
}

.select_submit {
  width: 33.87096%;
  max-width: 21rem;
  color: #fff;
  font-size: 3rem;
  line-height: 8.5rem;
  border: 0;
  outline: 0;
  background-color: rgba(179, 157, 32, 0.8);
  border-radius: 8px 8px;
}

.content_4 {
  padding-bottom: 5rem;
}

.content_4_flex {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 0 5rem;
  justify-content: space-between;
}

.content_4_box p {
  color: #fff;
  line-height: 8.5rem;
  text-align: center;
  font-size: 3rem;
  font-weight: 600;
}

.content_4_box {
  border-radius: 8px 8px;
}

.content_4_box1 {
  width: calc(50% - 0.5rem);
  max-width: 30.5rem;
  background-color: rgba(43, 92, 143, 0.8);
}

.content_4_box2 {
  width: calc(50% - 0.5rem);
  max-width: 30.5rem;
  background-color: rgba(141, 70, 47, 0.8);
}

.content_4_box3 {
  width: calc(50% - 0.5rem);
  max-width: 30.5rem;
  background-color: rgba(49, 86, 38, 0.8);
  margin: 1rem 0;
}

.content_4_box4 {
  width: calc(50% - 0.5rem);
  max-width: 305px;
  background-color: rgba(91, 74, 77, 0.8);
  margin: 1rem 0;
}

.content_4_box5 {
  width: 100%;
  background-color: rgba(179, 157, 32, 0.8);
}

.login_1_box1 {
  width: calc(20%);
  max-width: 30.5rem;
  background-color: rgba(30, 80, 200, 0.8);
  display: inline-block;
  margin: 0.5px;
  position:absolute;
  top:34px;
  right:0;
}
.holding_coins{
    width: 100%;
    height: 50px;
}
.holding_coins ul li{float: left; width: 50%; text-align: center; font-size:20px; font-weight:bold; color:#ffffff;}
.span_coin{font-size:20px; color:#DF0101; font-weight:bold;}
.span_game{font-size:20px; color:#DF7401; font-weight:bold;}
.m_go_fix{
    position: fixed;
    left: 55%;
    bottom: 7%;
    border: 2px solid #ff3982;
    border-radius: 10px;
    padding: 10px;
    color: #ffffff;
    font-size: 2em;
    cursor: pointer;
	background: #34404c;
	z-index:999;
}

/* .content_1_flex{
    padding-left: 0;
    justify-content: center;
  } */
@media all and (max-width:718px) {
  html {
    font-size: 61%;
  }
}

@media all and (max-width:706px) {
  html {
    font-size: 60%;
  }
}

@media all and (max-width:694px) {
  html {
    font-size: 59%;
  }
}

@media all and (max-width:682px) {
  html {
    font-size: 58%;
  }
}

@media all and (max-width:670px) {
  html {
    font-size: 57%;
  }
}

@media all and (max-width:658px) {
  html {
    font-size: 56%;
  }
}

@media all and (max-width:646px) {
  html {
    font-size: 55%;
  }
}

@media all and (max-width:634px) {
  html {
    font-size: 54%;
  }
}

@media all and (max-width:622px) {
  html {
    font-size: 53%;
  }
}

@media all and (max-width:610px) {
  html {
    font-size: 52%;
  }
}

@media all and (max-width:598px) {
  html {
    font-size: 51%;
  }
}

@media all and (max-width:586px) {
  html {
    font-size: 50%;
  }
}

@media all and (max-width:574px) {
  html {
    font-size: 49%;
  }
}

@media all and (max-width:562px) {
  html {
    font-size: 48%;
  }
}

@media all and (max-width:550px) {
  html {
    font-size: 47%;
  }
}

@media all and (max-width:538px) {
  html {
    font-size: 46%;
  }
}

@media all and (max-width:526px) {
  html {
    font-size: 45%;
  }
}

@media all and (max-width:514px) {
  html {
    font-size: 44%;
  }
}

@media all and (max-width:502px) {
  html {
    font-size: 43%;
  }
}

@media all and (max-width:490px) {
  html {
    font-size: 42%;
  }
}

@media all and (max-width:476px) {
  html {
    font-size: 41%;
  }
}

@media all and (max-width:464px) {
  html {
    font-size: 40%;
  }
}


@media all and (max-width:452px) {
  html {
    font-size: 39%;
  }
}

@media all and (max-width:440px) {
  html {
    font-size: 38%;
  }
}

@media all and (max-width:428px) {
  html {
    font-size: 37%;
  }
}

@media all and (max-width:412px) {
  html {
    font-size: 36%;
  }
}

@media all and (max-width:400px) {
  html {
    font-size: 35%;
  }
}

@media all and (max-width:388px) {
  html {
    font-size: 34%;
  }
}

@media all and (max-width:376px) {
  html {
    font-size: 33%;
  }
}


@media all and (max-width:364px) {
  html {
    font-size: 32%;
  }
}

@media all and (max-width:352px) {
  html {
    font-size: 31%;
  }
}

@media all and (max-width:340px) {
  html {
    font-size: 30%;
  }
}

@media all and (max-width:328px) {
  html {
    font-size: 29%;
  }
}

@media all and (max-width:316px) {
  html {
    font-size: 28%;
  }
}

@media all and (max-width:304px) {
  html {
    font-size: 27%;
  }
}

@media all and (max-width:292px) {
  html {
    font-size: 26%;
  }
}

@media all and (max-width:281px) {
  html {
    font-size: 25%;
  }
}