/* 구글 웹폰트 */
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css?family=Acme&display=swap');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap');

/* 공통사항 */
* {
  box-sizing : border-box;
}

html {
  font-size : 14px;
  height    : 100%;
  margin    : 0;
  padding   : 0;
}

body {
  color       : #444444;
  font-family : 'Nanum Gothic', sans-serif;
  font-size   : 14px;
  height      : 100%;
  margin      : 0;
  padding     : 0;
}

ul {
  list-style : none;
  margin     : 0;
  padding    : 0;
}

a {
  color           : inherit;
  text-decoration : none;
}

h1, h2, h3, h4, h5, h6, p {
  margin  : 0;
  padding : 0;
}

form {
  margin : 0;
}

.under {
  text-decoration : underline;
}

.wrap {
  min-height : 100vh;
  min-width  : 1400px;
  padding    : 80px 0px 0px;
  position   : relative;
}

/* 글자색, 배경색 */
.main_color {
  color : #4C99CF;
}

.point_color {
  color : #EBA444;
}

.err_color {
  color : tomato;
}

.bg-main {
  background-color : #4C99CF;
}

.bg-point {
  background-color : #EBA444;
}

.bg-color3 {
  background-color : #D1D1DD;
}

/* 버튼들 */
.btn {
  border        : 1px solid transparent;
  border-radius : 2px;
  cursor        : pointer;
  display       : inline-block;
  font-size     : 17px;
  font-weight   : 600;
  outline       : none;
  padding       : 11px 12px;
  text-align    : center;
}

.btn-basic {
  background-color : white;
  border           : 1px solid #686F7A;
  color            : #686F7A;
}

.btn-basic:hover {
  border-color : #2F3138;
  color        : #2F3138;
}

.btn-primary {
  background-color : #4C99CF;
  color            : white;
}

.btn-primary:hover {
  background-color : #2B90D9;
  border-color     : transparent;
}

.btn-support {
  background-color : #EBA444;
  color            : white;
}

.btn-support:hover {
  background-color : #CA8420;
  border-color     : transparent;
}

.btn-warn {
  background-color : tomato;
  color            : white;
}

.btn-warn:hover {
  background-color : #E75A40;
  border-color     : transparent;
}

.btn-green {
  background-color : mediumseagreen;
  color            : white;
}

.btn-green:hover {
  background-color : #3CA071;
  border-color     : transparent;
}

.btn-big {
  width : 100%;
}

/* TOP 버튼 */
.top-btn {
  align-items      : center;
  background-color : #182838;
  border           : 0px;
  border-radius    : 50%;
  bottom           : 50px;
  box-shadow       : 0 10px 10px rgba(0, 0, 0, 0.15);
  color            : white;
  cursor           : pointer;
  display          : flex;
  display          : none;
  flex-direction   : column;
  font-size        : 25px;
  height           : 70px;
  justify-content  : center;
  outline          : none;
  position         : fixed;
  right            : 50px;
  width            : 70px;
  z-index          : 101;
}

.top-btn:hover {
  box-shadow : 0 2px 8px 2px rgba(20, 23, 28, .15);
}

.top-btn > i {
  font-size : 20px;
}

.top-btn > span {
  font-size   : 16px;
  font-weight : bold;
  padding-top : 5px;
}

/* Text에 밑줄 쳐지는 CSS 효과 */
.magicline:after {
  background-color : #506763;
  content          : '';
  display          : block;
  height           : 2.5px;
  transition       : width .3s;
  width            : 0;
}

.magicline:hover:after {
  width : 100%;
}

/* 로고 폰트 */
.logo {
  font-family : 'Acme', sans-serif;
}

/* 박스쉐도우 */
.border-shadow {
  box-shadow : 0 0 1px 1px rgba(20, 23, 28, .1), 0 3px 1px 0 rgba(20, 23, 28, .1);
}

.box-shadow {
  box-shadow : 5px 5px 25px 0 rgb(46 61 73 / 20%);
}

.new-span {
  color   : #00CC00;
  display : inline;
  padding : 0;
}

.disabled {
  display : none !important;
}

#loading {
  display  : none;
  height   : 100%;
  left     : 0;
  position : absolute;
  top      : 0;
  width    : 100%;
}

@keyframes spinner {
  from {
    transform : rotate(0deg)
  }
  to {
    transform : rotate(360deg)
  }
}

#loading .spinner {
  animation           : spinner .8s ease infinite;
  border              : 8px solid transparent;
  border-bottom-color : #F19022;
  border-radius       : 50%;
  border-top-color    : #F19022;
  box-sizing          : border-box;
  height              : 64px;
  left                : 50%;
  margin-left         : 32px;
  margin-top          : -32px;
  position            : absolute;
  top                 : 50%;
  width               : 64px;
}

.main_item {
  border-bottom : 1px dashed #DADADA;
  color         : #000000;
  font-size     : 2rem;
  font-weight   : bold;
  padding       : 10px 0 20px;
}

.flex-wrapper {
  display        : flex;
  flex-direction : column;
  height         : 100%;
  width          : 100%;
}

.flex-content {
  align-items     : center;
  flex            : 1;
  justify-content : center;
  padding-top     : 120px;
}