@charset "utf-8";


/* ******************** 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;
  }
}
input[type="text"]:disabled {
  background: #f4f4f4; pointer-events: none;
  &:focus, &:active, &:hover {
    border-color: unset;
    box-shadow: unset;
  }
}

.alarm-area {
  margin-top: 20px;
  p {
    font-size: 1.3rem; text-align: center; color: #ff003e;
    span {
      font-weight: 500;
    }
  }
}

.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;
        }
      }
    }
  }
}

.detail-tab {
  ul {
    li {
      display: inline-block; padding: 5px 3px 15px 0;
      &.on {
        a {
          background: #15284c; color: #fff;
          &:hover {
            background: #15284c; color: #fff;
          }
        }
      }
      a {
        display: block; font-size: 1.3rem; padding: 7px 20px; border-radius: 4px; border: 1px solid #ddd; font-weight: 500; color: #15284c; transition: border-color .2s;
        &:hover {
          background: #f6f6f6;
        }
      }
    }
  }
}

@media (max-width: 870px) {
  .detail-tab {
    margin-bottom: 10px;
    ul {
      li {
        padding: 5px 3px 0px 0; width: calc(20% - 3px);
        a {
          text-align: center;
        }
      }
    }
  }
}

@media (max-width: 600px) {
  .detail-tab {
    margin-bottom: 10px;
    ul {
      li {
        width: calc(33.3% - 3px);
      }
    }
  }
}

@media (max-width: 370px) {
  .detail-tab {
    ul {
      li {
        width: calc(50% - 3px);
      }
    }
  }
}


.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; 
        }
      }
    }
  }
}