@charset "UTF-8";

/* reset */
* {
    padding: 0;
    margin: 0;
    position: relative;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

li,
ul,
ol {
    list-style: none;
}

a {
    width: 100%;
    display: inline-block;
    text-decoration: none;
    color: inherit;
}

img {
    display: block;
}


table {
  border-collapse: collapse;
}

/* css variable */
:root{
  --color-point-lt:#36B4E5;
  --color-point-dk:#002551;

  --color-tab1-bg:#E6EFF5;
  --color-tab2-bg:#F2F2EB;
  --color-tab-text:#495D6A;

  --color-black-basic:#333333;
  --color-black-md:#464646;
  --color-black-lt:#767676;
}

/* button */
button{
  border: none;
  border-radius: 0.5rem;
  text-align: center;
  line-height: 5rem;
  cursor: pointer;
  overflow: hidden;
}
.btn-point{
  background-color: var(--color-point-dk);
  color: #fff;
}
.btn-line{
  border: 1px solid var(--color-black-lt);
  background-color: #fff;
  color: var(--color-black-lt);
}
.btn-add{
  background-color: var(--color-point-lt);
  color: #fff;
}
.btn-del{
  background-color: var(--color-black-lt);
  color: #fff;
}
button::before{
  content: '';
  width: 0%;
  height: 100%;
  position: absolute;
  top: 0; left: 0%;
  border-radius: 0.5rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.btn-point::before{
  background-color: #fff;
  border: 2px solid var(--color-point-dk);
}
.btn-line::before{
  background-color: var(--color-point-lt);
}
.btn-add::before{
  background-color: #fff;
  border: 2px solid var(--color-point-lt);
}
.btn-del::before{
  background-color: #fff;
  border: 2px solid var(--color-black-lt);
}

.btn-point:hover{
  color: var(--color-point-dk) !important;
}
.btn-line:hover{
  border-color: var(--color-point-lt) !important;
  color: #fff !important;
}
.btn-add:hover{
  color: var(--color-point-lt) !important;
}
.btn-del:hover{
  color: var(--color-black-lt) !important;
}
button:hover::before{
  width: 100%;
  transition: 0.7s;
}

/* input */
input{
  -webkit-appearance: none;
    -moz-appearance: none;
      appearance: none;
  border: none;
  padding: 1.6rem 0;
  background-color: transparent;
  box-shadow:0px 0.1rem 0.4rem rgba(0, 0, 0, 0.25);
}
input:focus{
  outline: 2px solid var(--color-point-dk);
}
input::placeholder{
  color: #c7c7c7;
  font-size: 1.6rem;
}
input[type=checkbox]{
  outline: none;
}

/* select */
select{
  width: 100%;
  padding: 1rem;
  border: 1px solid #c6c6c6;
  border-radius: 0.5rem;
  outline: none;
  appearance: none;
}
.selectedOption {
  background-color: #f3f3f3;
}

/* scroll */
::-webkit-scrollbar{
  width: 8px;
  background-color: #f1f1f1;

}
::-webkit-scrollbar-thumb{
  background-color: #c2c2c2;
  border-radius: 0.5rem;
}

/* drag */
::selection{
  background-color: var(--color-point-dk);
  color: white;
}

/* font */
body,
button,
input,
textarea
{
  font-family: "Pretendard";
  font-weight: 400;
}
h1,h2,h3{font-weight: 700;}
h1{font-size: 4rem;}
h2{font-size: 3rem;}
h3{font-size: 2.4rem;}
h4{font-size: 2.0rem; font-weight: 500;}
h5{font-size: 1.6rem;}
h6{font-size: 1.4rem; font-weight: 400;}
p{font-size: 1.6rem;}

html,
body {
  height: 100vh;
  font-size: 62.5%;
  line-height: 1.285;
  color: var(--color-black-basic);
}


/* font - 'Pretendard' */
@font-face {
  font-family: "Pretendard";
  font-weight: 900;
  font-display: swap;
  src: local("Pretendard Black"), url("../font/Pretendard-Black.woff2") format("woff2"), url("../font/Pretendard-Black.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 800;
  font-display: swap;
  src: local("Pretendard ExtraBold"), url("../font/Pretendard-ExtraBold.woff2") format("woff2"), url("../font/Pretendard-ExtraBold.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 700;
  font-display: swap;
  src: local("Pretendard Bold"), url("../font/Pretendard-Bold.woff2") format("woff2"), url("../font/Pretendard-Bold.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 600;
  font-display: swap;
  src: local("Pretendard SemiBold"), url("../font/Pretendard-SemiBold.woff2") format("woff2"), url("../font/Pretendard-SemiBold.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 500;
  font-display: swap;
  src: local("Pretendard Medium"), url("../font/Pretendard-Medium.woff2") format("woff2"), url("../font/Pretendard-Medium.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 400;
  font-display: swap;
  src: local("Pretendard Regular"), url("../font/Pretendard-Regular.woff2") format("woff2"), url("../font/Pretendard-Regular.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 300;
  font-display: swap;
  src: local("Pretendard Light"), url("../font/Pretendard-Light.woff2") format("woff2"), url("../font/Pretendard-Light.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 200;
  font-display: swap;
  src: local("Pretendard ExtraLight"), url("../font/Pretendard-ExtraLight.woff2") format("woff2"), url("../font/Pretendard-ExtraLight.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 100;
  font-display: swap;
  src: local("Pretendard Thin"), url("../font/Pretendard-Thin.woff2") format("woff2"), url("../font/Pretendard-Thin.woff") format("woff");
}