/* Set a background image by replacing the URL below */
/* body {
  background: url('https://hellotblog.files.wordpress.com/2019/06/sample-bg-01-800.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
} */

@import url('https://fonts.googleapis.com/css?family=Noto+Sans');
@import url(//fonts.googleapis.com/earlyaccess/notosanssc.css);
@import url(//fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);

body {
  font-family: 'Noto Sans KR', sans-serif;
}

.navbar-nav .nav-item .dropdown-menu {
  font-family: 'Noto Sans KR', sans-serif;
}

btn:focus, a:focus {
  outline: none;
}

.navbar-toggler:focus {
  outline: none !important;
  box-shadow: none;
}

@media screen and (max-width: 600px) {

  .custom-border-top {
    border-top: 1px solid rgba(0,0,0,.1);
  }

  .dropdown-menu {
    border : none;
  }

  .navbar {
    padding-left: .4rem !important;
  }

  .navbar-brand {
    margin-right: 0 !important;
  }

  .navbar-brand img {
    display: none !important;
  }

  .navbar-toggler {
    padding: .25rem .5rem !important;
    font-size: 1rem !important;
  }

}

.h1, h1 {
  font-size: 2rem;
}

.badge {
  font-size: 55%;
}

.human-check { display: none !important; }

.form-control:focus {
  border-color: #dc3545;
  border-width: 2px;
  box-shadow: none;
  -webkit-box-shadow: none;
}

.has-error .form-control:focus {
  border-width: 2px;
  box-shadow: none;
  -webkit-box-shadow: none;
}

.free-overlay,
.sale-overlay,
.rank-overlay {
  background: red;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  padding: 5px 10px;
  position: absolute;
  left: 0;
  top: 0;
}

.back-to-top {
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    right: 20px;
    display:none;
    border-radius: 50%;
}

#footer-banner {
  position: fixed;
  display: none;
  bottom: 0px;
  width: 100%;
  max-height: 70px;
  background: linear-gradient(70deg, #93278F, #00A99D, #93278F, #00A99D);
  box-shadow: 0px 10px 20px 0px #333;
  text-align: center;
  z-index: 900;
}

#footer-banner a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

#footer-banner .footer-promo-text {
  position: relative;
  margin: 1em;
  font-size: 14px;
}

.footer-text {
  padding-bottom: 70px;
}

.sbtn {
  position: relative;
  min-width: 50%;
  border: none;
  display: inline-block;
  padding: 0.5em 1em;
  box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);
  font-weight: bold;
  color: #FFF;
  background-image: -webkit-linear-gradient(45deg, #DD8282  0%, #389fe4  100%);
  background-image: linear-gradient(45deg, #DD8282 0%, #389fe4 100%);
  transition: .4s;
  text-align: center;
  text-decoration: none;
  overflow: hidden;
}
.sbtn:hover {
  background-image: -webkit-linear-gradient(45deg, #709dff 50%, #b0c9ff 100%);
  background-image: linear-gradient(45deg, #709dff 50%, #b0c9ff 100%);
}
.sbtn::before {
  position: absolute;
  content: '';
  display: inline-block;
  top: -180px;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: #fff;
  animation: sbtn 5s ease-in-out infinite;
}

@-webkit-keyframes sbtn {
  0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

@-o-keyframes sbtn {
  0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

@keyframes sbtn {
  0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

.sunshine {
  position: relative;
  transition: .4s;
  overflow: hidden;
}

.sunshine::before {
  position: absolute;
  content: '';
  display: inline-block;
  top: -250px;
  /* left: 0; */
  width: 15px;
  height: 100%;
  background-color: #fff;
  animation: sbtn 5s ease-in-out infinite;
}

@media screen and (min-width: 760px) {
  .dropdown:hover .dropdown-menu, .btn-group:hover .dropdown-menu{
    display: block;
  }
  nav .dropdown-menu{
    margin-top: 0;
  }
  #footer-banner .footer-promo-text br {
    display: none;
  }
}

@media screen and (max-width: 760px) {
  .footer-text {
    padding-bottom: 90px;
  }
}