/* 반응형 쿼리 정리 */

@media (max-width: 1024px) {
  body,
  html {
    font-size: 12px;
  }
  input {
    font-size: 12px;
  }

  button {
    -webkit-transition: none !important;
    transition: none !important;
  }
  /* only mobile */
  .mobile-item {
    display: inline-block !important;
  }
  /* //only mobile */
  /* select */
  .select-label input[type="radio"] + label {
    height: 80px;
    font-size: 16px;
    line-height: 80px;
  }

  /* //select */
  /* input */
  .input__search {
    height: 38px !important;
    padding-right: 40px !important;
  }
  .input__search > button {
    width: 20px;
    height: 20px;
    right: 10px;
  }
  .input__cancel > input {
    line-height: 38px;
  }
  .input__cancel > button {
    right: 12px;
  }
  .input__agree > input + label {
    width: 100px;
    font-size: 12px;
    letter-spacing: 1px;
  }
  .input__normal {
    width: 100%;
    max-width: 80px;
    height: 36px;
    padding: 0 10px;
  }
  /* //input */
  /* button */
  .btn--point {
    font-size: 14px;
  }
  .btn--confirm {
    max-width: 400px;
    height: 48px;
    margin: 25px auto 10px;
    line-height: 48px;
    font-size: 14px;
  }
  /* //button */
  /* select */
  .select-box {
    width: 100%;
    min-width: 0;
    height: 40px;
    margin: 0;
  }
  .select-box:after {
    right: 10px;
  }
  .select-box select {
    padding: 0 30px 0 10px;
    font-size: 12px;
  }
  /* //select */
  /* slick */
  .slick-prev,
  .slick-next {
    width: 20px;
    height: 20px;
  }
  .slick-prev:before,
  .slick-next:before {
    width: 8px;
    height: 8px;
    margin-top: -4px;
  }
  .slick-prev:before {
    margin-left: -12px;
  }
  .slick-next:before {
    margin-right: -12px;
  }
  /* slick */
  /* table */
  .table__grid .server {
    width: 14%;
  }
  .table__grid .tit {
    width: 56%;
  }
  .table__grid .tit.second {
    width: calc(65% - 40px);
  }
  .table__grid .tit em {
    margin-right: 5px;
    padding: 1px 2px;
    font-size: 8px;
  }
  .table__grid .price {
    width: 23%;
  }
  .table__grid .price--summary {
    font-size: 9px;
  }
  /* .table__grid .date {
      display: none;
    } */
  /* .table__grid .career {
      display: none;
    } */
  .table__grid .game {
    width: 40px;
  }
  .table__grid .game .logo-area {
    width: 20px;
    margin: 0 auto;
  }
  .table__grid--title {
    height: 38px;
    font-size: 12px;
  }
  .table__grid--title > li {
    white-space: nowrap;
  }
  .table__grid--title .tit {
    text-align: center;
  }
  .table__grid--cont {
    font-size: 10px;
  }
  .table__grid--cont a {
    display: block;
    margin-top: 2px;
  }
  .table__grid--cont a:before {
    display: none;
  }
  .table__grid--cont > ul {
    min-height: 50px;
  }
  .table__grid--cont > ul:after {
    font-size: 14px;
  }
  .table__grid--cont > ul > li {
    padding: 10px 0px;
  }
  .table__grid--cont .tit > * {
    font-size: 10px;
  }
  .table__grid--cont .price {
    text-align: right;
  }
  .table__grid--cont .price > * {
    padding-right: 5px;
  }
  /* //table */
  /* tablebox */
  .tablebox .input__cancel {
    width: 100%;
    height: 38px;
    padding: 0 10px;
    line-height: 38px;
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }
  .tablebox .select-box {
    width: 100%;
    margin: 5px 0 0 0;
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
  }
  .tablebox__content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
  .tablebox__group--item > * {
    margin-right: 4px;
  }
  /* //tablebox */
  /* progress bar */
  .progress {
    margin-top: 10px;
  }
  .progress__txt {
    font-size: 12px;
  }
  /* //progress bar */
  /* step */
  .step .ico {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 20px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .step .ico--party {
    width: 29px;
    height: 18px;
  }
  .step .ico--document {
    width: 28px;
    height: 28px;
  }
  .step .ico--idcard {
    width: 29px;
    height: 18px;
  }
  .step .ico--confirm {
    width: 27px;
    height: 27px;
  }
  .step__content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 0;
    text-align: left;
    position: relative;
  }
  .step__content--box {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 30px;
    padding-left: 60px;
  }
  .step__content--box .order {
    height: 20px;
    padding-bottom: 0;
    font-size: 12px;
  }
  .step__content--box:before {
    width: 8px;
    height: 8px;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .step__content--box:not(:first-child):after {
    width: 1px;
    height: calc(100% + 30px);
    top: calc(-50% - 30px);
    right: auto;
    left: 4px;
  }
  .step__content--type {
    font-size: 14px;
  }
  /* //step */
  /* 단계 step */
  .stage {
    width: calc(100% - 25px);
  }
  .stage__list {
    height: 100px;
  }
  .stage__list:before,
  .stage__list:after {
    border-top-width: 50px;
    border-bottom-width: 50px;
    border-left-width: 25px;
    right: -25px;
  }
  .stage__list--step {
    width: 43px;
    height: 17px;
    font-size: 9px;
  }
  .stage__list--register {
    margin-top: 10px;
    font-size: 10px;
  }
  .stage__list--num {
    margin-top: 5px;
    font-size: 14px;
  }
  .stage__list.on:before {
    right: -26px;
  }
  /* //단계 step */
  /* 인증 */
  .certify {
    width: 100%;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .certify li {
    flex-direction: column;
  }
  .artiInfo .certify .grade__txt--info,
  .artiInfo .certify .grade__txt--score {
    font-size: 12px;
  }
  .certify .ico {
    height: 30px;
    margin: 10px auto 0;
  }
  .certify .m-br {
    display: block;
  }
  .certify__tit {
    width: 100%;
    height: 38px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
  }
  .certify__cont {
    width: 100%;
  }
  .certify__cont > li {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 20px 10px;
  }
  .certify__cont > li:not(:last-child) {
    border-right: 1px solid #eee;
  }
  .certify__cont .ico {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
  }
  .certify__cont--item {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    font-size: 12px;
    text-align: center;
  }
  /* //인증 */
  /* go cart */

  /* //go cart */
  /* *** common content *** */
  /* header */
  .header {
    -webkit-box-shadow: 2px 4px 8px 0 rgba(0, 0, 0, 0.05);
    box-shadow: 2px 4px 8px 0 rgba(0, 0, 0, 0.05);
    width: 100%;
    /*height: 80px;*/
    background: #fff;
    /*position: fixed;2021-12-14dongyoung*/
    top: -1px;
    left: 0;
    z-index: 100;
  }

  .header__menu--link_mobile {
    height: 100%;
    position: relative;
    background: #0048c8;
    width: 49.5%;
    text-align: center;
    /*border-right: 2px solid #fff;*/

    /*효과 추가*/
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;

    background: rgb(0, 72, 200);
    /*background: linear-gradient(0deg, rgba(251,33,117,1) 0%, rgba(234,76,137,1) 100%);*/
    background: linear-gradient(
      0deg,
      rgba(0, 72, 200, 1) 0%,
      rgba(0, 72, 300, 1) 100%
    );
    color: #fff;
    overflow: hidden;
  }

  .header__menu--link_mobile:before {
    position: absolute;
    content: "";
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny-btn1 3s ease-in-out infinite;
    /*animation-delay: 1s;*/
  }

  .header__menu--link_mobile:active {
    box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, 0.3),
      -4px -4px 6px 0 rgba(116, 125, 136, 0.2),
      inset -4px -4px 6px 0 rgba(255, 255, 255, 0.2),
      inset 4px 4px 6px 0 rgba(0, 0, 0, 0.2);
  }

  @-webkit-keyframes shiny-btn1 {
    0% {
      -webkit-transform: scale(0) rotate(45deg);
      opacity: 0;
    }
    80% {
      -webkit-transform: scale(0) rotate(45deg);
      opacity: 0.5;
    }
    81% {
      -webkit-transform: scale(4) rotate(45deg);
      opacity: 1;
    }
    100% {
      -webkit-transform: scale(50) rotate(45deg);
      opacity: 0;
    }
  }

  .header__menu--link_mobile a {
    display: block;
    height: 100%;
    line-height: 40px;
    width: 100%;
  }

  header__menu--link_mobile:after {
    content: "";
    width: 10px;
    height: 3px;
    margin-left: -5px;
    background: #fff;
    position: absolute;
    left: 50%;
    bottom: 0;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }

  header__menu--link_mobile:hover,
  header__menu--link_mobile:focus {
    font-family: "GmarketSansBold", sans-serif;
  }

  header__menu--link_mobile:hover:after,
  header__menu--link_mobile:focus:after {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  /* 오중세 추가 끝*/
  .header nav {
    display: none;
  }
  .header .logo a {
    width: 160px !important;
    height: 48px !important;
    margin: 0 auto !important;
  }
  .header .menu {
    display: block;
    width: 30px;
    height: 30px;
    padding: 7px 2px;
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .header .menu .bar {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .header .menu .bar > span {
    display: block;
    width: 100%;
    height: 2px;
    background: #0048c8;
    position: absolute;
    left: 0;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  .header .menu .bar > span:nth-child(1) {
    top: 0;
  }
  .header .menu .bar > span:nth-child(2) {
    top: 50%;
  }
  .header .menu .bar > span:nth-child(3) {
    top: 100%;
  }
  .header .menu.on .bar span:nth-child(1) {
    top: 50%;
    -webkit-transform: translateY(0) rotate(-45deg);
    transform: translateY(0) rotate(-45deg);
  }
  .header .menu.on .bar span:nth-child(2) {
    display: none;
  }
  .header .menu.on .bar span:nth-child(3) {
    top: 50%;
    -webkit-transform: translateY(0) rotate(45deg);
    transform: translateY(0) rotate(45deg);
  }

  /* //header */
  /* footer */
  .footer {
    margin-bottom: 70px;
    display: block;
  }
  /* 오중세 추가(모바일 푸터 추가를 위하여) */
  .footer__main {
    padding: 10px;
    flex-direction: column;
    align-items: flex-start;
  }
  .footer__topmenu--inner {
    gap: 10px;
    flex-wrap: wrap;

    justify-content: flex-start;
  }
  .footer__topmenu--inner > li {
    margin: 0 !important;
  }
  .footer__main--logo {
    height: 70px;
  }
  .footer__main--adres {
    margin: 0px;
    text-align: left;
  }
  /* 오중세 추가 끝 */

  /* //footer */
  /* 퀵메뉴 */
  .quickmenu {
    display: none !important;
  }
  /* //퀵메뉴 */
  /* layer */
  .layer__wrap--inner {
    padding: 58px 10px;
  }
  .layer__title {
    margin-bottom: 40px;
  }
  /* //layer */
  /* 콘텐츠 공통 */
  .content {
    padding: 20px 0 85px !important;
    height: auto;
  }
  .content__title {
    margin: 25px 0;
    font-size: 14px;
  }
  .content__title--sub {
    margin-top: 25px;
    font-size: 14px;
  }
  .content__title--info a {
    font-size: 11px;
  }
  .content__top {
    margin-bottom: 25px !important;
  }

  .content__grid {
    margin-top: 25px;
  }
  .content__grid--title {
    height: 38px;
    padding: 0 10px;
    line-height: 38px;
  }
  .content__grid--title i {
    width: 12px;
    height: 12px;
    background-size: contain;
  }
  .content__grid--title h3 {
    font-size: 14px;
  }
  .content__grid--title h4 {
    font-size: 14px;
  }
  .content__grid--item {
    padding: 5px;
  }
  .content__grid--define dt {
    min-width: 8.333rem;
    letter-spacing: -0.5px;
  }
  .content__grid--define .radio-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: -5px;
  }
  .content__grid--define .radio {
    width: 50%;
    margin: 5px 0;
  }
  .content__grid--head {
    height: 43px;
    line-height: 43px;
  }
  .content__grid--head h3 {
    font-size: 16px;
    font-weight: normal;
  }
  .content__grid--notice {
    margin-top: 10px;
  }
  .content__grid--notice > li {
    margin-bottom: 3px;
    padding-left: 8px;
    font-size: 10px;
  }
  .content__grid--notice > li:before {
    width: 2px;
    height: 2px;
    top: 6px;
  }
  .content__item {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: 10px;
  }
  .content__item--title {
    width: 100% !important;
    height: 38px;
    padding: 0 10px;
    line-height: 38px;
    /* border-bottom: 1px solid #eee; */
    text-align: left !important;
    font-size: 14px !important;
  }
  .content__item--cont {
    width: 100% !important;
    height: auto;
    padding: 0 10px;
    line-height: 1.5;
    font-size: 12px;
  }
  .content__item--input {
    height: 38px;
  }
  .content__item--price {
    padding: 0 30px 0 10px;
  }
  .content__item--price .won {
    line-height: 38px;
    right: 10px;
  }
  .content__colgroup {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .content__colgroup--item {
    width: 50%;
  }
  .content__colgroup--item > * {
    border-bottom: 0;
  }

  .content__table > dl {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: 10px;
  }
  .content__table > dl > * {
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    text-align: left;
  }
  .content__table > dl > dt {
    width: 100%;
    font-size: 14px;
  }
  .content__table > dl > dd {
    width: 100%;
  }
  .content__table .tb-con {
    padding: 0 10px;
  }
  .content__table .tb-price {
    width: calc(100% + 20px);
    height: 40px;
    margin: 0 -10px;
  }
  .content__table .tb-price > input {
    padding-left: 10px;
    border-bottom: 0;
  }
  .content__table .tb-price .won {
    line-height: 40px;
  }
  .content__table--title > * {
    font-size: 12px;
  }
  .content__table--sub {
    font-size: 10px;
  }
  .content__list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .content__list > * {
    width: 100%;
  }
  .content__list .btn--outline {
    min-width: 110px;
    height: 40px;
    margin-left: 10px;
    font-size: 12px;
  }
  .content__list--title {
    margin-bottom: 6px;
    line-height: 1.4;
  }
  .content__list--title:before {
    margin-right: 5px;
  }
  .content__list--input {
    height: 40px;
    padding: 0 10px;
  }
  .content__list--box + .content__list--box {
    margin-top: 10px;
  }
  .content__text {
    margin-top: 10px;
  }
  .content__text--sub {
    font-size: 10px;
  }
  .content__notice {
    margin: 25px 0;
  }
  .content__notice--title {
    background-size: 12px 10px;
    padding-left: 20px;
    font-size: 14px;
  }
  .content__notice--cont > li {
    font-size: 10px !important;
  }
  /* //콘텐츠 공통 */

  .btnGuideIdFarm {
    height: 30px;
    font-size: 12px;
  }
}

@media (max-width: 768px) {
  #DIVID > div:nth-child(4) > div.content__table > dl.content__table--cont {
    margin-top: 0px;
  }
  .content__table .tb-con.tb-con-price.game-money-add-payment-dd {
    min-height: 40px;
  }
  .game-money-add-payment-dl .tb-tit {
    height: auto;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
  }

  .content .link:before {
    -webkit-transform: translateX(-50%) scaleX(1);
    transform: translateX(-50%) scaleX(1);
  }

  .content__title--info a:before {
    -webkit-transform: translateX(-50%) scaleX(1);
    transform: translateX(-50%) scaleX(1);
  }
  .content__table--total {
    padding: 0 10px;
    font-size: 14px;
  }
  .content__table--total > * {
    max-width: 100%;
    padding: 0 !important;
  }

  /* 유태 start */
  .content__grid--cho {
    justify-content: center;
    align-items: center;
    display: flex;
    width: 100%;
    height: 100%;
    gap: 1.5px;
    column-gap: 10px;
    flex-wrap: wrap;
  }
  .content__grid--cho-item {
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 3rem;
    height: 3rem;
    display: flex;
  }
  /* 유태 end */
}

@media (max-width: 480px) {
  body,
  html {
    font-size: 10px;
  }
  .inner {
    padding-left: 5px;
    padding-right: 5px;
  }
  .select-label input[type="radio"] + label {
    font-size: 14px;
  }

  #server_r {
    display: flex;
    flex-direction: column;
  }

  .game-money-add-payment-dl,
  #content > div > div > div:nth-child(11) > dl:nth-child(3) > dt {
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .game-money-add-payment-dl .tb-tit {
    height: auto;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
  }
  .game-money-add-payment-dd,
  #content > div > div > div:nth-child(11) > dl:nth-child(3) > dd.tb-con-price {
    line-height: 12px;
    min-height: 40px;
    height: auto;
    flex-direction: column;
    padding: 10px;
  }
  .content__table .tb-con.tb-con-price.game-money-add-payment-dd {
    gap: 3px;
  }

  /* 결제 */
  #DIVID
    > div:nth-child(4)
    > div.content__table
    > dl.content__table--cont
    > dd:nth-child(3) {
    min-height: 40px;
    height: auto !important;
    line-height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  #article-lists li.name,
  #article-lists li.date {
    word-break: break-word;
  }

  .footer__topmenu {
    height: auto;
    padding: 10px 0px;
  }
}