/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 *= stub "active_admin"
 */

 /* Custom Settings */
  /* Font */
  @font-face { font-family: 'Chosunilbo_myungjo'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Chosunilbo_myungjo.woff') format('woff'); font-weight: normal; font-style: normal; }

 body{
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 16px;
    background-color: #f9f9f9;
 }
 /* 배포시에 이 부분에서 에러 발생함 */
 /*:lang=[en]{*/
    /*font-family: 'Noto Sans', sans-serif;*/
 /*}*/
/* Channel */
.sc-bwzfXH.dzYtRe{
  bottom: 75px !important;
  right: 15px !important;
}
 #notice_wrapper{
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1111;
  background: rgba(220, 227, 233, 0.85);
  padding: 20px 0;
  text-align: center;
  color: black;
  transition: all 2s;
  height: 62px;
 }

 #notice_wrapper.red-alert{
   background-color: #f8d7da;
   opacity: 0.85;
   color: #721c24;
 }

 #notice_wrapper.fadeout{
   height: 0;
   padding: 0;
   opacity: 0;
 }

 .visible-xs, .visible-xs-flex{
   display: none !important;
 }

 .font-grey{
   color: #858585 !important;
 }

 .font-red{
   color: #d12a2d !important;
 }
.font-black{
  color: #434343 !important;
}
 .font-10{
   font-size: 10px !important;
 }

 .font-12{
   font-size: 12px !important;
 }

 .font-14{
   font-size: 14px !important;
 }

 .font-16{
   font-size: 16px !important;
 }

 .font-18{
   font-size: 18px !important;
 }

 .font-20{
   font-size: 20px !important;
 }

 .font-22{
   font-size: 22px !important;
 }

 .font-24{
   font-size: 24px !important;
 }

 .font-36{
   font-size: 36px !important;
 }

 .font-dark{
   color: #434343 !important;
 }

 a{
   text-decoration: none;
   color: black !important;
 }

 a:hover, a:focus, a:active{
   text-decoration: none;
   outline: none;
 }

 pre{
   color: black;
   font-family: 'Noto Sans KR', sans-serif;
 }

 .bg-base{
   background-color: #f9f9f9;
 }

 .bg-light{
   background-color: white !important;
 }

 .button-none{
   border: none;
   cursor: pointer;
 }

 .button-none:focus{
   border: none;
   outline: none;
 }

.height-inherit{
  height: inherit;
}

button{
  cursor: pointer;
}

 @media (min-width: 992px) {

   .category-list a{
     font-size: 16px !important;
   }

   .font-lg-14{
     font-size: 14px !important;
   }

   .font-lg-16{
     font-size: 16px !important;
   }

   .font-lg-18{
     font-size: 18px !important;
   }

   .font-lg-20{
     font-size: 20px !important;
   }

   .font-lg-22{
     font-size: 22px !important;
   }

   .font-lg-24{
     font-size: 24px !important;
   }

   .font-lg-26{
     font-size: 26px !important;
   }

   .font-lg-28{
     font-size: 28px !important;
   }

   .font-lg-30{
     font-size: 30px !important;
   }

   .font-lg-32{
     font-size: 32px !important;
   }

   .font-lg-34{
     font-size: 34px !important;
   }

   .font-lg-36{
     font-size: 36px !important;
   }
 }

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

   .visible-xs{
     display: block !important;
   }
   .visible-xs-flex{
     display: flex !important;
   }

   .visible-lg{
     display: none !important;
   }

   .font-sm-10{
     font-size: 10px !important;
   }
   
   .font-sm-12{
    font-size: 12px !important;
   }

 }
 /* Header */

 .header{
   background-color: #f9f9f9 !important;
   height: 62px;
 }

 .header > .navbar{
   padding: 8px 12px !important;
 }

 .logo{
   width: 90px;
   height: 28px;
 }
 .navbar{
   align-items: baseline;
   padding: .5rem 1.5rem;
 }

 .navbar-light .navbar-toggler {
   border: none;
 }

 .navbar-light .navbar-toggler:focus {
   border: none;
   outline: none;
 }

 .navbar-toggler{
   padding: 0 0;
 }

 .brand .navbar-brand{
   font-family: 'Chosunilbo_myungjo', sans-serif;
   color: #434343;
   font-size: 20px;
 }

 .icon_bars{
   width: 21px;
   height: 18px;
 }

 .icon_search{
   width: 18px;
   height: 18px;
 }

 .navbar-right{
   position: fixed;
   top: 0;
 }

 /* Sidebar */
 #sidebar{
   overflow-y: scroll;
   width: 300px;
   margin-right: -300px;
   background-color: white !important;
   position: fixed;
   top: 0;
   right: 0;
   z-index: 999;
   height: 100%;
   /* top layer */
   transition: all 0.3s;
 }

 .overlay {
     display: none;
     position: fixed;
     /* full screen */
     width: 100vw;
     height: 100vh;
     /* transparent black */
     background: rgba(0, 0, 0, 0.7);
     /* middle layer, i.e. appears below the sidebar */
     z-index: 998;
     opacity: 0;
     /* animate the transition */
     transition: all 0.5s ease-in-out;
 }

 .overlay.active {
     display: block;
     opacity: 1;
 }

 #dismiss {
     width: 35px;
     height: 25px;
     margin-left: 8px;
     margin-top: 5px;
     margin-bottom: 20px;
     /* top right corner of the sidebar */
 }

 .sign-status{
   font-family: 'Noto Sans KR',sans-serif;
   margin-right: 15px;
   font-size: 12px;
   color: #7f7f7f;
 }

 #sidebar > .container-fluid > .row{
   padding: 16px 0;
   margin: 0;
   border-top: 1px solid #7f7f7f;
   border-bottom: 1px solid #7f7f7f;
 }

 #sidebar > .container-fluid > .row > .col-3{
   padding-left: 0px;
   padding-right: 0px;
 }

 .category-icon{
   height: 20px;
 }

 .category-title{
   font-size: 12px;
 }

.sidebar_cate > .row > .col-3 > .sidebar-category a:hover, .sidebar_cate > .row > .col-3 > .sidebar-category a:focus{
  font-weight: bold;
}

 .sidebar-menus, .sidebar-sns{
   margin-top: 20px;
   margin-left: 25px;
   margin-bottom: 40px;
 }

 .sidebar-menu{
   display: block;
   color: black;
   margin-bottom: 7px;
   font-size: 12px;
 }
 /* //Sidebar */
 /* // Header */

 /* Bottom bar */

 .bottom-bar{
   height: 60px;
   z-index: 999;
 }

 .bottom-icon{
   height: 20px;
 }

 .wrapper{
   background-color: #f9f9f9;
   margin-top: 62px;
   margin: 62px auto 0 auto;
   width: 1000px;
 }

 @media screen and (max-width: 768px)  {
   .wrapper{
     width: 700px;
     margin: 62px auto 0 aut0;
   }
 }

 @media screen and (max-width: 576px)  {
   .wrapper{
     width: auto;
     margin: 62px auto 0 aut0;
   }
 }

 /* Footer */

 .footer{
   padding: 60px 40px 0 40px;
   background-color: rgba(249,249,249, 0.75);
   margin-bottom: 60px;
 }
 .footer p{
   margin-bottom: 0;
   line-height: 20px;
 }
 .menus{
   line-height: 20px;
   color: black;
 }

 .menus a{
   color: black !important;
 }

 .footer-right a{
   color: black !important;
 }

 @media screen and (max-width: 576px) {
   .footer{
     padding: 20px 10px;
   }

 }

 .policy{
   padding: 60px 16px;
   margin: 0 9%;
 }
 .policy_text p{
   line-height: 32px;
   margin-bottom: 0;
 }

 @media screen and (max-width: 576px) {
   .policy{
     margin: 0 5%;
     padding: 40px 0 20px 0;
   }
 }

 /* Devise */
 .field input{
   width: 230px;
   height: 52px;
   border-radius: 8px;
   background-color: #eeeeee !important;
   box-shadow: none;
   border: none;
   padding: 16px 20px;
   color: #434343;
 }

 .field textarea{
   width: 230px;
   border-radius: 8px;
   background-color: #eeeeee !important;
   box-shadow: none;
   border: none;
   padding: 16px 20px;
   color: #434343;
 }

 .field input:focus, .field input:active{
   outline: none;
   border: 2px solid skyblue;
 }

 .field input::placeholder{
   font-size: 14px;
   color: #434343;
 }

 .field input[type=checkbox]{
   width: 20px;
   height: 20px;
   border-radius: 4px;
   background-color: #eeeeee !important;
   box-shadow: none;
   position: relative;
   top: 5px;
 }

 .btn-login{
   width: 100px;
   height: 52px;
   border-radius: 8px;
   background-color: #434343;
   box-shadow: none;
   border: none;
 }

 .btn-login:hover, .btn-login:active, .btn-login:focus{
   cursor: pointer;
   border: none;
   border-radius: none;
   box-shadow: none;
   outline: none;
 }

 input[type="button"]{
     border-radius: 8px;
     background-color: #434343 !important;
     box-shadow: none;
     border: none;
 }

 .login-row{
   width: 230px;
   margin: 0 auto;
 }

 .links{
   width: 230px;
   margin: 0 auto;
 }

 .box-230{
   width: 230px;
   margin: 0 auto;
 }

 .custom-file-label::after{
   display: none !important;
 }

.custom-file-label{
   margin: 0 auto;
   width: 230px;
   height: 52px;
   border-radius: 8px;
   background-color: #eeeeee !important;
   box-shadow: none;
   border: none;
   padding: 16px 20px;
   color: #434343;
}

/* Search */
.search-box{
  width: 300px;
  border: 2px;
}

.fa-search:before {
  color: #9a9a9a;
}

.search-btn{
  background-color: inherit;
  border: none;
  position: absolute;
}

.search-btn:focus, .fa-seach:focus{
  border: none;
  outline: none;
}

.search-form{
  background-color: inherit;
  border-width: 2px;
  border-style: solid;
  border-color: rgba(0,0,0,0);
  width: 300px;
  height: 36px;
  border-radius: 18px;
  background-color: #e8e8e8;
  padding: 0 40px;
  box-shadow: none;
}

.search-form:focus{
  outline: none;
  border-color: #4dabf7;
  transition: all .1s ease-in-out;
}

.result-card {
    border: none;
    background-color: inherit;
}

.loading-indicator:before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  height: 60px;
  width: 60px;
  background: rgba(0,0,0,.0);
  border-radius: 50%;
  border: 3px solid #a51832;
  border-top-color: #a51832;
  border-bottom: 3px solid #e0ced1;
  animation: spin 1.5s linear infinite;
}

@keyframes spin {
    from {
       transform: translate(-50%,-50%) rotate(0deg);
    }
  to {
    transform: translate(-50%,-50%) rotate(360deg);
  }
}
.loading-background {
background-color: #FEFCFB;
border-radius: 6px;
top: 0;
left: 0;
height: 100%;
width: 100%;
position: fixed;
content: " ";
}

.btn-subscribe{
  width: 180px;
  height: 32px;
  background-color: #eb5555;
  display: block;
  margin: 0 auto;
  border: 0;
}

.newsletter-main{
  width: 70%;
  margin: 0 auto;
  display: block;
}

@media screen and (max-width: 576px){
  .newsletter-main{
    width: 100%;
  }
}