@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/Nanum Gothic.eot'); /* IE9 Compat Modes */
  src: local('NanumGothic'),
       url('./fonts/Nanum Gothic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/Nanum Gothic.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/Nanum Gothic.woff') format('woff'), /* Modern Browsers */
       url('./fonts/Nanum Gothic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/Nanum Gothic.svg#NanumGothic') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Do Hyeon';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/do-hyeon-v4-korean-regular.eot'); /* IE9 Compat Modes */
  src: local('Do Hyeon Regular'), local('DoHyeon-Regular'),
       url('./fonts/do-hyeon-v4-korean-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/do-hyeon-v4-korean-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/do-hyeon-v4-korean-regular.woff') format('woff'), /* Modern Browsers */
       url('./fonts/do-hyeon-v4-korean-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/do-hyeon-v4-korean-regular.svg#DoHyeon') format('svg'); /* Legacy iOS */
}

body {
  padding-top: 100px;
  font-family: "Nanum Gothic", sans-serif !important;
}

.DoHyeon {
  font-family: "Do Hyeon", sans-serif !important;
}



.site-name {
  vertical-align: top;
}



.hover-bright:hover {
  -webkit-filter: brightness(130%);
}

.hover-bright:active {
  -webkit-filter: brightness(70%);
}



#address-bar-gif {
  border: 1px gray solid;
}



.notice {
  background-color: #B9121B;
  color: white;
  padding: 20px;
}

.notice .title {
  margin-top: 0;
  font-family: "Do Hyeon", sans-serif !important;
}

.notice .content {
  font-size: large;  
}

.notice a {
  font-weight: bold;
  cursor: pointer;
}



h2 {
  font-size: 45px !important;
}

.box-shadow {
  box-shadow: 3px 3px 7px gray;
}

.text-shadow {
  text-shadow: 1px 1px 2px gray;
}

.btn-big {
  width: 280px;
  height: 70px;
  font-size: 25px;
}

.x-small-icon {
  width: 15px;
  height: 15px;
}

.small-icon {
  width: 36px;
  height: 36px;
}

.middle-icon {
  width: 50px;
  height: 50px;
}

.download-icon {
  vertical-align: text-top;
}



.badge-container {
  position: relative;
}

.badge-recommand {
  position: absolute;
  bottom: 20px;
  left: -17px;
  background-color: red;
  transform: rotate(-30deg);
  z-index: 1;
  pointer-events: none;
}

.badge-offline {
  position: absolute;
  bottom: 20px;
  left: -20px;
  background-color: red;
  transform: rotate(-30deg);
  z-index: 1;
  pointer-events: none;
  font-size: 5px;
}



.img-responsive-center {
  margin-left: auto;
  margin-right: auto;
}



.github-box {
  display: inline-block;
  background: lightgray;
  padding: 5px 15px;
  border: solid gray 2px;
  border-radius: 10px;
  vertical-align: text-bottom;
  font-size: 20px;
  color: black !important;
}

.github-box>img {
  width: 25px;
  height: 25px;
}

.github-box:hover {
  background: gray;
}

.github-box:active {
  background: dimgray;
}



.footer {
  padding: 30px;
}



.text-white {
  color: white !important;
}



.mb-1 {
  margin-bottom: 10px;
}

.mb-2 {
  margin-bottom: 40px;
}

.mb-3 {
  margin-bottom: 60px;
}

.mb-4 {
  margin-bottom: 80px;
}

.mb-5 {
  margin-bottom: 100px;
}



.mr-1 {
  margin-right: 5px;
}

.mr-2 {
  margin-right: 10px;
}

.mr-3 {
  margin-right: 20px;
}

.mr-4 {
  margin-right: 30px;
}

.mr-5 {
  margin-right: 50px;
}
 


.br-5 {
  border-radius: 5px;
}

.br-8 {
  border-radius: 8px;
}

.br-10 {
  border-radius: 10px;
}



.pointer {
  cursor: pointer;
}



.text-bottom {
  vertical-align: text-bottom;
}

.text-top {
  vertical-align: text-top;
}

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



#survey-dialog {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vw;
  background: #AAAAAAAA;
  z-index: 9999;
  padding-top: 50px;
  padding-bottom: 50px;
}

#survey-close {
  display: block;
  margin-right: 0;
  margin-left: auto;
  background: red;
  color: black;
  border: none;
  border-radius: 3px;
  font-weight: bold;
}

.hidden {
  display: none !important;
}