/*!
 *
 * Copyright 2016 
 * Created by: crowdpic
 * URL: www.crowdpic.net */

/*
===========================
CONTENTS:

000 default
001 기본설정
002 navbar
003 header
004 button
008 login
011 footer
014 faq & 공지사항



000 default
====================================================================
*/
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);
html {
  font-family: 'Noto Sans KR', sans-serif;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: 'Noto Sans KR', sans-serif !important;
  font-weight: 400 !important;
  color: #444141;
}
.notice_link:hover{
  color: #D8D8D8;
}
.modal_title{
  font-size: 22px !important;
  padding-bottom: 10px;
  text-align: center;
}
.ff7171_a{
  color: #ff7171;
}
.ff7171_a:hover, .ff7171_a:active, .ff7171_a:focus{
  color: #ff7171;
}
.ff7171{
  color: #ff7171;
}
.color338fed{
  color: #338fed;
}
.BDBDBD{
  color: #bdbdbd;
}
.C9C9C9{
  color: #C9C9C9;
}
.f3f0f0{
  color: #f3f0f0;
}
.opacity{
  opacity: 0.9;
}
.color827b7b{
  color: #827b7b;
}
.color1a1a1a{
  color: #1a1a1a;
}

.question-modal a{
  color: #338fed;
  font-weight: 500;
  border-bottom: 1px solid #338fed;
}
.question-modal a:hover, .question-modal a:active, .question-modal a:focus{
  color: #338fed;
  font-weight: 500;
  outline: none !important;
}

html,
body {
  height: 100%;
  width: 1366px;
}
@media (min-width: 768px){
  html,
  body {
    height: 100%;
    width: 100%;
  }
}
hr {
  border-color: white;
  border-width: 3px;
  max-width: 50px;
}

p {
  font-size: 16px;
}
.page-wrap{
  min-height: 100%;
  width: 100%;
  display: table;
  padding-top: 60px;
}
button{
  outline: none;
}
.loader-wrap{display: none;}
.loader-wrap .loader {border: 3px solid #f3f3f3; border-radius: 50%; border-top: 3px solid black; width: 40px; height: 40px; -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite; margin: 0 auto;}

.transparent-btn{
  background-color: rgba(0,0,0,0.3);
  border: 1px solid white;
  border-radius:0;
}
.transparent-btn:active{
  box-shadow:none;
}
.transparent-btn:hover{
  color: white;
}
.transparent-btn:focus{
  color: white;
  outline: none !important;
}

.transparent-btn2{
  background-color: white;
  border: 2px solid #338fed;
  border-radius:5px;
  color: #338fed;
  font-weight: 500;
  padding: 8px 0;
  -webkit-transition: all 0.08s linear; -moz-transition: all 0.08s linear; -o-transition: all 0.08s linear; transition: all 0.08s linear;
}
.transparent-btn2:hover,
.transparent-btn2:focus,
.transparent-btn2:active{
  border: 2px solid #338fed !important;
  color: white !important;
  background-color: #338fed !important;
}
.transparent-btn3{
  background-color: #338fed;
  border: 2px solid #338fed;
  border-radius:5px;
  color: white;
  font-weight: 400;
  padding: 10px 0;
  -webkit-transition: all 0.08s linear; -moz-transition: all 0.08s linear; -o-transition: all 0.08s linear; transition: all 0.08s linear;
  width: 140px;
  font-size: 16px;
}
.transparent-btn3:hover,
.transparent-btn3:focus,
.transparent-btn3:active{
  border: 2px solid #338fed !important;
  color: white !important;
  background-color: #338fed !important;
}

.ff7171-btn3{
  background-color: #ff7171;
  border: 2px solid #ff7171;
  border-radius:5px;
  color: white;
  font-weight: 400;
  padding: 10px 0;
  -webkit-transition: all 0.08s linear; -moz-transition: all 0.08s linear; -o-transition: all 0.08s linear; transition: all 0.08s linear;
  width: 140px;
  font-size: 16px;
}
.ff7171-btn3:hover,
.ff7171-btn3:focus,
.ff7171-btn3:active{
  border: 2px solid #ff7171 !important;
  color: white !important;
  background-color: #ff7171 !important;
}

.d0d0d0-btn{
  background-color: #d0d0d0;
  border: 2px solid #d0d0d0;
  border-radius:5px;
  color: white;
  font-weight: 400;
  padding: 10px 0;
  -webkit-transition: all 0.08s linear; -moz-transition: all 0.08s linear; -o-transition: all 0.08s linear; transition: all 0.08s linear;
  width: 140px;
  font-size: 16px;
}
.d0d0d0-btn:hover,
.d0d0d0-btn:focus,
.d0d0d0-btn:active{
  border: 2px solid #d0d0d0 !important;
  color: white !important;
  background-color: #d0d0d0 !important;
}


#paging{text-align: center;}
#paging .navi{width: 500px; margin: 5px; padding:2px 5px; border:1px solid #eee;}
#paging .show{color: blue;margin: 5px 0;padding: 3px 5px;cursor: pointer;}
#paging .show a {text-decoration: none;}
#paging .show:hover {text-decoration: underline;}
#paging ul.setPaginate li.setPage{padding:15px 10px;font-size:14px;}
#paging ul.setPaginate{margin: 0px; padding: 0px;height:100%;overflow:hidden;list-style-type:none;display: inline-block;}
#paging ul.setPaginate li.dot{padding: 3px 0;}
#paging ul.setPaginate li{float:left; padding: 0px; margin:0 2px;}
#paging ul.setPaginate li a{color: #999999;display: inline-block;text-align: center;text-decoration: none;font-size: 14px;padding:5px 8px;border: 1px solid #f3f0f0;}
#paging ul.setPaginate li a.current_page{border: 1px solid #e0e0e0;color: #338fed;text-decoration: none;font-weight: 600;}
#paging ul.setPaginate li a:hover{border: 1px solid #e0e0e0;color: #338fed;}

.autocomplete-wrap{background-color: white; position: absolute; width: 100%; left: 0; cursor: pointer; max-height: 300px; overflow-y: scroll; display: none;}
.keywordList ul{margin-bottom: 0;}
.keywordList li{padding: 6px; text-align: left; font-size: 16px; margin-right: 10px; background-color: inherit;}
.keywordList .selected{background-color:#f5f5f5;}
.search-row .autocomplete-wrap{top: 83px;}
#top-search .navbar-form .autocomplete-wrap{top: 35px;}

#overlay {z-index: 999;position: absolute;left: 0;top: 0;width: 100%;height: 100%;display: none;}
#overlay div {position:absolute;left:50%;top:50%;margin-top:-32px;margin-left:-32px;}
/*
002 navbar
==============================================================================================*/


  .top-search .navbar-form {
    width: auto;
    padding-top: 0;
    padding-bottom: 0;
    margin-right: 0;
    margin-left: 0;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  .top-search{
    position: relative;
    margin-top: 5px;
    float: left;
    min-width: 241px;
    max-width: 430px;
    width: 25%;
    margin-left: 29px;
  }
  .guide .dropdown-menu{
    left: -25px;
  }
  .mypage .dropdown-menu{
    left: 50%;
    transform: translateX(-50%);
  }

.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover{
  color: #ff7171;
}
#logout{
  font-weight: bold;
}
.dropdown-menu .subtop{
  padding-top: 5px;
}
.nav-subtitle{
  text-align: center;
  color: #ff7171;
  font-weight: bold;
}
.nav-subtitle{
  padding-top: 0;
}
.dropdown-menu{
  min-width: 130px;
  max-width: 200px;
}
.dropdown-menu .nav-nickname{
  padding: 3px 10px;
}
.navbar{height: 60px;}
@media (min-width: 768px) {
  .dropdown:hover .dropdown-menu {
      display: block;
      margin-top: 0;
  }
}
@media (min-width: 768px){
  .navbar-right .dropdown-menu {
    right: auto;
  }
}

#crowdpic_logo{
  width: auto;
  height: 50px;
  margin-top: 5px;
}
.navbar-default {
  background-color: white;
  border-color: rgba(34, 34, 34, 0.05);
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
}
.navbar-default .navbar-header .navbar-brand {
  color: #ff7171;
  font-weight: 700;
  text-transform: uppercase;
  padding:0;
  padding-left: 21px;
}
.navbar-default .navbar-header .navbar-brand:hover,
.navbar-default .navbar-header .navbar-brand:focus {
  color: #eb3812;
}
.navbar-default .navbar-header .navbar-toggle {
  font-weight: 700;
  font-size: 12px;
  color: #222222;
  text-transform: uppercase;
}
.navbar-default .nav > li.active > a,
.navbar-default .nav > li.active > a:focus {
  color: #ff7171 !important;
  background-color: transparent;
}
.navbar-default .nav > li.active > a:hover,
.navbar-default .nav > li.active > a:focus:hover {
  background-color: transparent;
}

  .navbar-nav{
    margin: 0;
  }
  .navbar-right{
    margin-right: 50px;
  }
  .navbar-top{
    margin-top: 4px;
  }
  .navbar-default {
    background-color: white;
    border-color: rgba(0, 0, 0, 0.1);
  }
  .navbar-default .navbar-header .navbar-brand {
    color: #338fed;
    margin:0;
  }
  .navbar-default .navbar-header .navbar-brand:hover,
  .navbar-default .navbar-header .navbar-brand:focus {
    color: white;
  }
  .navbar-default .nav > li > a,
  .navbar-default .nav > li > a:focus {
    color: #444141 !important;
    background-color: transparent !important;
    font-weight: 500;
  }
  .navbar-default .nav > li > a:hover,
  .navbar-default .nav > li > a:focus:hover {
    color: #ff7171;
  }
  .navbar-default.affix {
    background-color: white;
    border-color: rgba(34, 34, 34, 0.05);
  }
  .navbar-default.affix .navbar-header .navbar-brand {
    color: #ff7171;
    font-size: 14px;
  }
  .navbar-default.affix .navbar-header .navbar-brand:hover,
  .navbar-default.affix .navbar-header .navbar-brand:focus {
    color: #eb3812;
  }
  .navbar-default.affix .nav > li > a,
  .navbar-default.affix .nav > li > a:focus {
    color: #222222;
  }
  .navbar-default.affix .nav > li > a:hover,
  .navbar-default.affix .nav > li > a:focus:hover {
    color: #ff7171;
  }

  .navbar-nav>li {
    float: left !important;
    height: 55px;
  }
  .navbar-right{
    float: right !important;
  }
  .navbar-header{
    float: left;
  }
@media (max-width: 767px) {
  .nav-margin{
    margin-top: 6px;
  }
}


/*모바일 임시*/
@media (max-width: 767px) {
  .navbar-nav .open .dropdown-menu>li>a{
    padding: 3px 20px !important;
  }
  .navbar-nav .open .dropdown-menu{
    position: absolute !important;
    background: white;
    -webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);
    box-shadow:0 6px 12px rgba(0,0,0,.175);
    border: 1px solid rgba(0,0,0,.15);
  }
}
.navbar-default .nav > li > a, .navbar-default .nav > li > a:focus{
  text-align: right;
}
.navbar-nav #nav-profile{
  background-size: cover;
  background-position: center;
  width: 40px; height: 40px; border-radius: 80px; border: 2px solid #ff7171; float: left;
  overflow: hidden;
  position: relative;
}
.navbar-nav #nav-profile img{
  position: absolute; top: -2px; left: -2px; width: 40px;
}
/*
003 header
==============================================================================================*/
.bg-filter{
  position: absolute;
  min-width: 100%;
  min-height: 100%;
  background-color: rgba(0, 0, 0, 0.30);
}
#homeHeading,
.homeHeading{
  font-weight: 200 !important;
  color: white !important;
  margin: 7px auto !important;
}
header {
  position: relative;
  width: auto;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  background-position: center;
  background-image: url('https://cdn.crowdpic.net/images/intro/login_join_image.jpg');
  text-align: center;

}
header .header-content {
  position: relative;
  text-align: center;
  padding: 170px 15px 100px;
  width: 100%;
}
header .header-content .header-content-inner h1 {
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 30px;
}
header .header-content .header-content-inner hr {
  margin: 20px auto;
}
header .header-content .header-content-inner p {
  font-weight: 300;
  color: rgba(255, 255, 255, .8);
  font-size: 16px;
}
header .find-password-btn{
  color: white;
  width: 200px;
}
header .login-btn, header .register-btn{
  width: 200px;
}
header .login-btn:hover{
  background-color: #338fed;
  border-color: #338fed;
  color: white;
}
header .register-btn:hover{
  background-color: #338fed;
  border-color: #338fed;
  color: white;
}
header .find-password-btn:hover{
  background-color: #338fed;
  border-color: #338fed;
  color: white;
}

@media (min-width: 768px) {
  header {
    min-height: 100%;
  }
  header .header-content {
    position: absolute;
    top: 47%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    padding: 0 50px;
  }
  header .header-content .header-content-inner {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }
  header .header-content .header-content-inner h1 {
    font-size: 44px;
  }
  header .header-content .header-content-inner p {
    font-size: 14px;
    max-width: 500px;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
  }
}
/*
004 button
==============================================================================================*/
.btn-default {
  color: #222222;
  background-color: white;
  border-color: white;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
}
.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  color: #222222;
  background-color: #f3f0f0;
  border-color: #ededed;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  background-image: none;
}
.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active {
  background-color: white;
  border-color: white;
}
.btn-primary {
  color: white;
  background-color: #338fed;
  border-color: #338fed;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  color: white;
  background-color: #338fed;
  border-color: #338fed;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background-image: none;
  background-color: #ff7171;
}
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
  background-color: #ff7171;
  border-color: #ff7171;
}

.header-content-inner .search-btn{
  border: none;
  width: 200px;
  font-weight: 700;
  text-transform: uppercase;
}
.header-content-inner .btn-xl {
  padding: 15px 30px;
}
::-moz-selection {
  color: white;
  text-shadow: none;
  background: #222222;
}
::selection {
  color: white;
  text-shadow: none;
  background: #222222;
}
img::selection {
  color: white;
  background: transparent;
}
img::-moz-selection {
  color: white;
  background: transparent;
}
body {
  webkit-tap-highlight-color: #222222;
}


/*
008 login
==============================================================================================*/
.btn-facebook{
  color: white;
  background-color: #4267b2;
  border-color: #4267b2;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
}
.btn-naver{
  color: white;
  background-color: #1EC800;
  border-color: #1EC800;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
}
.btn-facebook:focus, .btn-facebook:hover{
  color: white;
  background-color: #365899;
  border-color: #365899;
}
.btn-naver:focus, .btn-naver:hover{
  color: white;
  background-color: #1EBE00;
  border-color: #1EBE00;
}
.login-container, .find-password-container{
  display: none;
}
.form-signin {
  max-width: 400px;
  display:block;
  background-color: rgba(0,0,0,0.3);
  border: 2px solid rgba(255,255,255,0.6);
  margin: 0 auto;
  padding: 15px 0;
}
.form-signin .login-btn, .form-signin .register-btn, .form-signin .find-password-btn{
  width: 100%;
  background-color: rgba(0,0,0,0.3);
  border-radius: 5px;
  padding: 10px 0;
  margin-top: 15px;
  font-size: 17px;
  color: white;
}
.form-signin .main{
  padding: 20px 30px;
}
.form-signin .division-line{
  padding: 0 38px;
  height: 1px;
}
.form-signin .division-line div{
  border-top: 2px solid rgba(255,255,255,0.6);
  height: 1px;
  width: 100%;
}
.social-box{
  margin: 0 auto;
  padding: 15px 38px;
}
.social-box a{
  font-weight:bold;
  font-size:18px;
  padding:8px;
}
.social-box a i{
  font-weight:bold;
  font-size:20px;
}
.heading-desc{
  font-size:20px;
  font-weight:bold;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
  margin-bottom: 10px;
  font-weight: 300;
  color: #d3d3d3;
}


.form-signin .form-control {
  position: relative;
  font-size: 16px;
  height: 40px;
  padding: 0 20px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.form-signin input[type="text"] {
  margin-bottom: 10px;
  border-radius: 5px;
  background-color: transparent;
  color: white;
}
.form-signin input[type="text"]:focus{
  border-color: white;
  box-shadow: none;
}
.form-signin input[type="text"]::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #d3d3d3;
}
.form-signin input[type="text"]::-moz-placeholder { /* Firefox 19+ */
  color: #d3d3d3;
}
.form-signin input[type="text"]:-ms-input-placeholder { /* IE 10+ */
  color: #d3d3d3;
}
.form-signin input[type="text"]:-moz-placeholder { /* Firefox 18- */
  color: #d3d3d3;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-radius: 5px;
  background-color: transparent;
  color: white;
}
.form-signin input[type="password"]:focus{
  border-color: white;
  box-shadow: none;
}
.form-signin input[type="password"]::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #d3d3d3;
}
.form-signin input[type="password"]::-moz-placeholder { /* Firefox 19+ */
  color: #d3d3d3;
}
.form-signin input[type="password"]:-ms-input-placeholder { /* IE 10+ */
  color: #d3d3d3;
}
.form-signin input[type="password"]:-moz-placeholder { /* Firefox 18- */
  color: #d3d3d3;
}


.login-footer, .find-password-footer{
  margin: 0 auto;
/*  border-top: 1px solid #dadada;*/
  padding:20px 38px;
}
.login-footer .row, .find-password-footer .row{
  margin: 0;
}
.login-footer .row div:first-child, .find-password-footer .row div:first-child{
  width: 100%;
  margin: 0 auto;
}
.login-footer .left-section a, .find-password-footer .left-section a{
  font-weight:300;
  color:#d3d3d3;
  line-height:19px;
}
.login-footer .left-section, .find-password-footer .left-section{
  text-align: left !important;
}
.mg-btm{
  margin-bottom:20px;
}
/*.btn-email-confirm, .btn-email-confirm:hover, .btn-email-confirm:focus, .btn-email-confirm:active{
  color: white;
}*/
.btn-email-confirm{
  color: white;
  width: 150px;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 400;
}
.btn-email-confirm:hover{
  background-color: #338fed;
  border-color: #338fed;
  color: white;
}
.email_ok_container .social-box, .email_ok_container .main{
  font-size: 16px;
  font-weight: 400;
}
.email_ok_container .form-signin{
  max-width: 470px;
}

/*
011 footer
==============================================================================================*/
footer .container{width: 100%;}
footer .mypage-footer{display: none;}

footer .row:nth-child(2){
  padding-top: 10px;
}
footer .row:nth-child(3){
  padding-bottom: 20px;
  padding-top: 20px;
}
@media (max-width: 730px) and (min-width: 450px){
  .br{
    display: block;
  }
}
@media (max-width: 450px){
  .br{
    display: block;
  }
}
footer .container{
  padding: 20px 0;
}
footer .clause>a{
  color: white;
  padding: 0 10px;
}
footer .clause a:hover{
  text-decoration: underline;
}
footer .sns>a{
  padding: 0 5px;
}

/*
014 faq & 공지사항
==============================================================================================*/
.faq-wrap .tab-wrap a{
  font-size: 23px;
  padding: 0 20px;
}
.faq-wrap a{
  color: #444141;
}
.tab-wrap a{color:#444141;}
.tab-wrap a.active{color:#338fed;}
.faq-wrap a:hover, .faq-wrap a:focus{
  color: #338fed;
}
.faq-wrap .panel-title{
  font-size: 20px;
}
.faq-wrap .panel-body{
  font-size: 17px;
  line-height: 1.7;
  padding:30px;
  padding-right: 200px;
}
.faq-wrap .panel-group .panel{
  margin: 10px 0;
}
.faq-wrap .panel-default>.panel-heading{
  background-color: inherit;
}

.notice-wrap .tab-wrap a{
  font-size: 23px;
  padding: 0 20px;
}
.notice-wrap a{
  color: #444141;
}
.notice-wrap a:hover, .notice-wrap a:focus{
  color: #338fed;
}
.notice-wrap .panel-title{
  font-size: 20px;
  font-weight: 400;
}
.notice-wrap .panel-body{
  font-size: 17px;
  line-height: 1.8;
  padding:30px;
  padding-right: 200px;
}
.notice-wrap .panel-group .panel{
  margin: 10px 0;
}
.notice-wrap .panel-default>.panel-heading{
  background-color: inherit;
}
.panel-heading [data-toggle="collapse"]:after {
  font-family: 'Glyphicons Halflings';
  content: "\e072"; /* "play" icon */
  float: right;
  color: #ff7171;
  font-size: 18px;
  line-height: 22px;
  /* rotate "play" icon from > (right arrow) to down arrow */
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.panel-heading [data-toggle="collapse"].collapsed:after {
  /* rotate "play" icon from > (right arrow) to ^ (up arrow) */
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  color: #B1B1B1;
}

/*
015 이미지 리스트
==============================================================================================*/
#image-gallery{background-color: white; border: 2px solid #d5d5d5; width: 100%; height: 100%; position: relative; display: block; padding: 10px; overflow-x: hidden; -webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s;}
#image-gallery.noactive{right: 0; display: none;}
#image-gallery .gallery-close{font-size: 25px; cursor: pointer; position: absolute; right: 20px; z-index: 1;}
#image-gallery .thumbs-wrap{position: relative; width: 100%; height: 100%; text-align: left;}
#image-gallery .thumbs-wrap hr{max-width: 100%; border-color: #d5d5d5;}
#image-gallery .thumbs-wrap .each-wrap{width: 230px; height: 336px; position: relative; display: inline-block; overflow: hidden; margin: 10px; background-color: #f6f6f6; text-align: center;}
#image-gallery .thumbs-wrap .each-wrap .image-wrap{width: 100%; height: 306px; line-height: 306px;}
#image-gallery .thumbs-wrap .each-wrap .view-larger{width: 100%; background-color: #338fed; color: white; padding: 4px; font-size: 16px; font-weight: 500; user-select: none; cursor: pointer;}
#image-gallery .thumbs-wrap .each-wrap > img{max-width: 100%; max-height: 100%; vertical-align: middle;}
#image-gallery .image-checkbox{position: absolute; top: 3px; right: 3px; margin-top: 0px; z-index: 1; display: block;}
#image-gallery .checkbox label {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  padding-left: 5px; }
#image-gallery .checkbox label::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 20px;
  height: 20px;
  left: 0;
  margin-left: -20px;
  border: 2px solid #338fed;
  border-radius: 3px;
  background-color: #fff;
  -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  transition: border 0.15s ease-in-out, color 0.15s ease-in-out; }
#image-gallery .checkbox label::after {
  display: inline-block;
  position: absolute;
  width: 20px;
  height: 20px;
  left: -1px;
  top: -3px;
  margin-left: -20px;
  padding-left: 3px;
  padding-top: 1px;
  font-size: 17px;
  color: #338fed; }
#image-gallery .checkbox input[type="checkbox"],
#image-gallery .checkbox input[type="radio"] {
  opacity: 0;
  z-index: 1;
  cursor: pointer;
}
#image-gallery .checkbox input[type="checkbox"]:focus + label::before,
#image-gallery .checkbox input[type="radio"]:focus + label::before {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px; }
#image-gallery .checkbox input[type="checkbox"]:checked + label::after,
#image-gallery .checkbox input[type="radio"]:checked + label::after {
  font-family: "FontAwesome";
  content: "\f00c";}
#image-gallery .checkbox input[type="checkbox"]:indeterminate + label::after,
#image-gallery .checkbox input[type="radio"]:indeterminate + label::after {
  display: block;
  content: "";
  width: 10px;
  height: 3px;
  background-color: #555555;
  border-radius: 2px;
  margin-left: -16.5px;
  margin-top: 7px;
}
#image-gallery .checkbox input[type="checkbox"]:disabled,
#image-gallery .checkbox input[type="radio"]:disabled {
  cursor: not-allowed;
}
#image-gallery .checkbox input[type="checkbox"]:disabled + label,
#image-gallery .checkbox input[type="radio"]:disabled + label {
  opacity: 0.65; }
#image-gallery .checkbox input[type="checkbox"]:disabled + label::before,
#image-gallery .checkbox input[type="radio"]:disabled + label::before {
  background-color: #eeeeee;
  cursor: not-allowed; }
#image-gallery .select-div{width: 100%; height: 306px; background-color: rgba(0,0,0,0); position: absolute; top: 0; left: 0; z-index: 1000;}
/*
000 default
==============================================================================================*/
.background-f3f0f0{
  background-color: #f3f0f0;
}
.pt5{
  padding-top: 5px;
}
.pt15{
  padding-top: 15px;
}
.pt100{
  padding-top: 100px;
}
.pb100{
  padding-bottom: 100px;
}
.pb30{
  padding-bottom: 30px;
}
.pt30{
  padding-top: 30px;
}
.pt50{
  padding-top: 50px;
}
.pb50{
  padding-bottom: 50px;
}
.pb20{
  padding-bottom: 20px;
}
.pt20{
  padding-top: 20px;
}
.pt10{
  padding-top: 10px;
}
.pb10{
  padding-bottom: 10px;
}
.pb15{
  padding-bottom: 15px;
}
.pt80{
  padding-top: 80px;
}
.pb80{
  padding-bottom: 80px;
}
.mb20{
  margin-bottom: 20px;
}
.mt10{
  margin-top: 10px;
}
.mb10{
  margin-bottom: 10px;
}
.fl{
  float: left;
}
.fr{
  float: right;
}
.bold{
  font-weight: bold;
}
.wh{
  color: white !important;
}
.align-c{
  text-align: center;
}
.align-l{
  text-align: left;
}
.align-r{
  text-align: right;
}
.m-color{
  color: #1a1a1a;
}
.mb25{
  margin-bottom: 25px;
}
.mt20{
  margin-top: 20px !important;
}
.ml-20{
  margin-left: -20px;
}
.mt30{
  margin-top: 30px !important;
}
.display-block{
  display: block;
}
.display-inline-block{
  display: inline-block;
}
.pt25percent{
  padding-top: 25%;
}
.line-through{text-decoration:line-through;}
.p0{padding: 0;}

.mt25{margin-top: 25px;}
.margin0auto{margin: 0 auto;}
.weight400{
  font-weight: 400;
}
.width120{width: 120px;}
.width170{width: 170px;}
.margin0{margin: 0;}
.margin-left-0{margin-left:0 !important;}
.margin-right-0{margin-right:0 !important;}
.padding20{padding: 20px;}
.font-30{font-size: 30px;}

.page-title{
  margin-top: 20px;
  text-align: center;
}
.table.dataTable tbody th, table.dataTable tbody td{
  font-size: 17px;
  text-align: center;
}
.button-wrap{
  text-align: left;
  padding: 20px 0px;
}
.button-wrap span{
  font-size: 16px;
  font-weight: bold;
}
.button-wrap button{
  font-weight: 500;
}
.dataTables_info, div.dataTables_wrapper div.dataTables_paginate{
  width: 100%;
  text-align: center;
  padding-bottom: 20px;
}






.sidebar-menu {overflow: auto; font-size: 12px; font-weight: 200; background-color: #2e353d; color: white; color: white;}
.sidebar-menu .brand {background-color: #23282e; line-height: 50px; display: block; text-align: center; font-size: 14px;}
.sidebar-menu .toggle-btn {display: none;}
.sidebar-menu ul,
.sidebar-menu li {list-style: none; padding: 0px; margin: 0px; line-height: 50px; cursor: pointer; font-weight: 400;}
.sidebar-menu ul :not(collapsed) .arrow:before,
.sidebar-menu li :not(collapsed) .arrow:before {font-family: FontAwesome; content: "\f078"; display: inline-block; padding-left: 10px; padding-right: 10px; vertical-align: middle; float: right;}
.sidebar-menu ul .active,
.sidebar-menu li .active {border-left: 3px solid yellow; background-color: #4f5b69;}
.sidebar-menu ul .subsub-menu{background-color: #444141 !important; padding-left: 10px;}
.sidebar-menu ul .sub-menu li.active,
.sidebar-menu li .sub-menu li.active {color: yellow;}
.sidebar-menu ul .sub-menu li.active a,
.sidebar-menu li .sub-menu li.active a {color: yellow;}
.sidebar-menu ul .sub-menu li,
.sidebar-menu li .sub-menu li {position: relative; background-color: #181c20; border: none; line-height: 40px; border-bottom: 1px solid #23282e; margin-left: 0px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.sidebar-menu ul .sub-menu li:hover,
.sidebar-menu li .sub-menu li:hover {background-color: #020203;}
.sidebar-menu ul .sub-menu li:before,
.sidebar-menu li .sub-menu li:before {font-family: FontAwesome; content: "\f105"; display: inline-block; padding-left: 10px; padding-right: 10px; vertical-align: middle;}
.sidebar-menu li {padding-left: 0px; border-left: 3px solid #2e353d; border-bottom: 1px solid #23282e;}
.sidebar-menu li a {text-decoration: none; color: white; padding-right: 35px; padding-top: 10px; padding-bottom: 10px;}
.sidebar-menu li a i {padding-left: 10px; width: 20px; padding-right: 20px;}
.sidebar-menu li:hover {border-left: 3px solid yellow; background-color: #4f5b69; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease;}
.sidebar-menu ul .sub-menu li .arrow{position: absolute; top: 0; right: 0; background-color: inherit;}
@media (max-width: 767px) {
  .sidebar-menu {position: relative; width: 100%; margin-bottom: 10px;}
  .sidebar-menu .toggle-btn {display: block; cursor: pointer; position: absolute; right: 10px; top: 10px; z-index: 10 !important; padding: 3px; background-color: #ffffff; color: #000; width: 40px; text-align: center;}
  .brand {text-align: left !important; font-size: 22px; padding-left: 20px; line-height: 50px !important;}
}
@media (min-width: 767px) {
  .sidebar-menu .menu-content {display: block;}

  #menu-content .fa-lg{font-size: 16px; vertical-align: -4%;}
  #menu-content .menu-caption{font-size: 14px;}
  body {margin: 0px; padding: 0px;}

  #menu-close{padding: 15px 15px 0; margin: 0; cursor: pointer; text-decoration: none;}
  #menu-close span{font-size: 26px;}
  .sidebar-menu.active {left: -200px; width: 200px; transition: all 0.5s ease-out 0s; -webkit-transition: all 0.5s ease-out 0s; -moz-transition: all 0.5s ease-out 0s; -ms-transition: all 0.5s ease-out 0s; -o-transition: all 0.5s ease-out 0s;}
  .sidebar-menu {background: #303641;position: fixed; height: 100%; min-height: 100%; overflow-y: auto;z-index: 1000;}
  .main-wrap{margin-left: 250px; transition: all 0.5s ease-out 0s; -webkit-transition: all 0.5s ease-out 0s; -moz-transition: all 0.5s ease-out 0s; -ms-transition: all 0.5s ease-out 0s; -o-transition: all 0.5s ease-out 0s;}
  .main-wrap.active{margin-left: 0; transition: all 0.5s ease-out 0s; -webkit-transition: all 0.5s ease-out 0s; -moz-transition: all 0.5s ease-out 0s; -ms-transition: all 0.5s ease-out 0s; -o-transition: all 0.5s ease-out 0s;}
  /*top-nav===================================================================================================*/
  #top-nav{display: block; z-index: 2; position: relative; height: 50px; margin-left: 250px; transition: all 0.5s ease-out 0s; -webkit-transition: all 0.5s ease-out 0s; -moz-transition: all 0.5s ease-out 0s; -ms-transition: all 0.5s ease-out 0s; -o-transition: all 0.5s ease-out 0s;}
  #top-nav.active{margin-left: 0; transition: all 0.5s ease-out 0s; -webkit-transition: all 0.5s ease-out 0s; -moz-transition: all 0.5s ease-out 0s; -ms-transition: all 0.5s ease-out 0s; -o-transition: all 0.5s ease-out 0s;}
  #top-nav .nav_menu{float: left; border-bottom: 1px solid #d9dee4; margin-bottom: 10px; width: 100%; background-color: white;}
  #top-nav .nav_menu .nav{float: left; margin: 0; padding-top: 12px; width: 55px;}
  #top-nav .nav_menu .nav #menu-toggle{padding: 15px 15px 0; margin: 0; cursor: pointer; text-decoration: none;}
  #top-nav .nav_menu .nav #menu-toggle span{font-size: 26px;}
  #top-nav .nav_menu .logo{float: left;}