@charset "utf-8";

/* ******************** default ******************** */

/* 폰트 */
@import "../../../font/NanumSquareNeo.css";

/* G마켓 폰트 */
@import "../../../font/gmarketsans.css";

/* root */
@import "../../common/color";

/* mixin */ 
@import "../../mixin/ui-mixin";

/* common */ 
@import "../../common/common";


/* ******************** 공통 요소 ******************** */

/* header */
@import "../../common/header";

/* footer */
@import "../../common/footer";

/* fix-btn */ 
@import "../../common/fixed-btn";


/* ******************** component ******************** */

/* input */ 
@import "../../component/input-style";

/* 컨텐츠 공용 타이틀 */
@import "../../component/title-style";

/* btn-style */ 
@import "../../component/button-style.scss";

/* check-style */ 
@import "../../component/check-style.scss";

/* vertical-table */
@import "../../component/vertical-table.scss";

/* normal-table */
@import "../../component/normal-table.scss";


/* ******************** sub-common ******************** */ 

/* sub-common-cont */
@import "../common/_sub-cont";



/* ******************** open api ******************** */ 

/* intro */
@import "./_intro";

/* 라디오 인풋 */
.check-input {
  &.inline {
    display:inline-block;
  }
  input[type="radio"] {       
    & + label:before {
      background-image:url("../../../img/common/radio.svg");
    }    
  }
}

.api-wrap {
  position: relative; padding-top: 30px;
  .api-title {
    text-align: center;
    .tit {
      font-size: 3.3rem; font-weight: 600; padding-bottom: 15px;
    }
    .sub-tit {
      font-size: 1.7rem; padding-bottom: 21px; color: #afafaf; font-weight: 100;
    }
    .desc-txt {
      position: relative; padding-top: 21px; font-size: 1.4rem; line-height: 1.9;
      &:after {
        content: ''; position: absolute; top: 0; left: 50%; margin-left: -15px; width: 30px; height: 1px; background: #999; 
      }
    }
  }
}

input[type=text].text-input {
  &.mt-5 {
    margin-top: 5px;
  }
}

.agreement {
  position: relative; width: 100%; height: 150px; overflow-y: auto; font-size: 1.2rem; background: #f8f8f8; padding: 20px; border: 1px solid var(--line-color); line-height: 1.8;
}

.tab-menu {
  position: relative; margin-bottom: 20px;
  ul {
    position: relative; display: flex; gap: 2px; width: 100%; border-bottom: 1px solid var(--main-color);
    li {
      flex-basis: 130px; text-align: center; background: #e9e9e9;
      a {
        display: block; width: 100%; height: 100%; padding: 12px 0; font-weight: 600; font-size: 1.3rem;
      }
      &:not(.active):hover {
        background: #ddd;
      }
      &.active {
        background: var(--main-color); 
        a {
          color: #fff;
        }
      }
    }
  }
}

.btn-wrap {
  button {
    &.w-250px {
      width: 250px; max-width: 100%;
    }
  }
}

.code-view {
  position: relative; padding: 20px; background: #27282E; color: #fff; white-space: pre-wrap; line-height: 1.9; font-size: 1.1rem; border-radius: 5px; letter-spacing: 0;
  .mark {
    color: #FFEF61; background: transparent;
  }
}

@media (max-width: 768px) {
  .api-wrap {
    .api-title {
      .tit {
        font-size: 2.5rem;
      }
      .sub-tit {
        font-size: 1.5rem;
      }
      .desc-txt {
        font-size: 1.3rem;
        br {
          display: none; 
        }
      }
    }
  }
}