@import url("/css/edunavi/web/arc/fonts.css");
@import url("/css/edunavi/web/arc/reset.css");
/* songayeon 2022.07 */
/* desktop*/
/* 1280 1366 1600 1920 2560 */
/* tablet */
/* IPad Pro(1366X1024) IPad Air(1180X820) Galaxy Tab(1138X712) IPad(1024X768) */
/* mobile */
/* iPhone XR(414X896) Galaxy Note3(360X640) Galaxy Fold(280X653) */
body {
  font-size: 16px;
}

body::after {
  content: '';
  display: block;
  width: 100%;
  clear: both;
}

.hide{display: none !important;}

@media screen and (max-width: 1280px) {
  body {
    font-size: 14px ;
  }
}

::-webkit-scrollbar {
  width: 17px;
  background: #ddd;
}

::-webkit-scrollbar-thumb {
  background: #b7b7b7;
}

::-webkit-scrollbar-track {
  background: #ddd;
}

input[type='number'],
input[type='password'],
input[type='text'] {
  position: relative;
  padding: 0 .75em;
  height: 2.5em;
  line-height: 2.5;
  color: #333;
  background-color: white;
  border: 1px solid #d3dcee;
  border-radius: .375em;
  font-size: inherit;
}

select {
  height: 2.5em;
  line-height: 2.5;
  padding: 0 2em 0 .75em;
  background-position: 90% 50%;
  background-repeat: no-repeat;
  background-image: url(/images/edunavi/web/arc/select_arrow.png);
  background-repeat: no-repeat;
  border: 1px solid #d3dcee;
  border-radius: .375em;
  cursor: pointer;
  font-size: inherit;
}

select:focus,
input[type="number"]:focus,
input[type="text"]:focus {
  border-color: #5eaae4 !important;
}

input[type='checkbox'] {
  display: inline-block;
  padding: 0;
  margin: .19em 0;
  width: 1.250em;
  height: 1.250em;
  background-color: white;
  border: 1px solid #737b8d;
}

input[type='checkbox']:checked {
  background-size: 1.125em;
  background-image: url(/images/edunavi/web/arc/icon_checkbox_checked.gif);
}

input[type='radio'] {
  display: inline-block;
  width: 1.1250em;
  height: 1.1250em;
  padding: 0;
  margin: .19em 0;
  border: 1px solid #737b8d;
  border-radius: 50%;
}

input[type='radio']:disabled {
  border-color: #ccc;
}

input[type='radio']:checked {
  border-width: 5px;
}

textarea {
  padding: .5em .75em;
  border: 1px solid #d3dcee;
  border-radius: .375em;
}

button {
  font-size: inherit;
}

.align-middle { vertical-align: middle; }

.align-left { text-align: left !important; }
.align-center { text-align: center !important; }
.align-right { text-align: right !important; }

.fontBold { font-weight: 600 !important; }

.fontWhite { color: white; }
.fontWhiteGray { color: #c6c6c6 !important; }
.fontBlue { color: #4583b8 !important; }
.fontRed { color: red !important; }
.fontBlack { color: #222 !important; }

.bg-blueGray { background-color: #737b8d; }
.bg-blue { background-color: #426dd1; }
.bg-deepBlue { background-color: #2c5dcd; }
.bg-green { background-color: #258f1e; }
.bg-white { background-color: white; }
/*.bgSkyBlue { background-color: #4583b8 !important; }*/

.w15em {
  width: 15em;
  max-width: 100%;
}

.mt-10px { margin-top: -10px; }
.mt4px { margin-top: 4px; }
.mb4px { margin-bottom: 4px; }
.mb8px { margin-bottom: 8px; }
.ml4px { margin-left: 4px; }

.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.ml-1 { margin-left: 0.25rem; }

.w-1per { width: 1%; }
.w-2per { width: 2%; }
.w-3per { width: 3%; }
.w-4per { width: 4%; }
.w-5per { width: 5%; }
.w-6per { width: 6%; }
.w-7per { width: 7%; }
.w-8per { width: 8%; }
.w-9per { width: 9%; }
.w-10per { width: 10%; }
.w-15per { width: 15%; }
.w-20per { width: 20%; }
.w-25per { width: 25%; }
.w-30per { width: 30%; }
.w-40per { width: 40%; }
.w-50per { width: 50%; }
.w-60per { width: 60%; }
.w-70per { width: 70%; }
.w-80per { width: 80%; }
.w-85per { width: 85%; }
.w-90per { width: 90%; }
.w-100per { width: 100%; }


@media screen and (min-width: 1281px) {
  .desktop__hide {
    display: none;
  }
}

@media screen and (max-width: 1280px) {
  .tablet__hide {
    display: none;
  }
}

@media screen and (max-width: 640px) {
  .mobile__hide {
    display: none;
  }
}

.ellipsis2 {
  width: 100%;
  height: 2.8em;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
}
.ellipsis3 {
  width: 100%;
  height: 4.2em;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
}
.ellipsis4 {
  width: 100%;
  height: 5.6em;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
}