@charset 'utf-8';

/* ===================================================================
    * AMUNA Admin Style
    * Last Edit : 2017. 11. 22
    =================================================================== */
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);

/* Common Style
    =================================================================== */
body {
  width: 100%;
  min-width: 1280px;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 13px;
  line-height: 18px;
  font-weight: 300;
  color: #20201e;
  background-color: #FFFEF4;
}

a {
  color: #20201e;
}

/* Header Style
    =================================================================== */
#admHeader .logo {
  display: block;
  width: 100%;
  border-bottom: 0.5px dotted #888;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  line-height: 30px;
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
}
#admHeader .gnb {
  position: absolute;
  top: 0;
  right: 30px;
  padding: 0 15px;
  line-height: 30px;
  font-weight: 400;
  font-size: 12px;
}
#admHeader nav {
  border-bottom: 1px solid #888; 
  text-align: center;
}
#admHeader nav > ul > li {
  position: relative;
  display: inline-block;
  padding: 0 2vw;
  line-height: 40px;
}
#admHeader nav > ul > li > a {
  min-width: 60px;
  font-weight: 500;
}
#admHeader .subMenu {
  overflow: hidden;
  position: absolute;
  top: 40px;
  left: 0;
  height: 0;
  opacity: 0;
  transition: all 0.2s;
}
#admHeader nav > ul > li:hover .subMenu {
  height: auto;
  opacity: 1;
}
#admHeader .subMenu li {
  border-bottom: 1px dotted #FFFEF4;
  background-color: #20201e;
  transition: all 0.1s;
}
#admHeader .subMenu li:last-child {
  border-bottom: 0;
}
#admHeader .subMenu li:hover {
  background-color: #30301e;
}
#admHeader .subMenu li a {
  display: block;
  padding: 0 2vw;
  line-height: 30px;
  color: #FFFEF4;
}

/* Main Style
    =================================================================== */
#admMainWrap .container {
  max-width: 1280px;
  margin: 0 auto;
}
#admMainWrap .pageLink {
  margin-top: 28vh;
}
#admMainWrap dl {
  float: left;
  width: 25%;
  text-align: center;
  opacity: 0.8;
  transition: all 0.2s;
}
#admMainWrap dl:hover {
  opacity: 1;
  transform: scale(1.1);
}
#admMainWrap dt {
  padding: 30px;
}
#admMainWrap dt img {
  width: 60%;
}
#admMainWrap dd {
  font-weight: 500;
}
#admMainWrap dd a {
  font-size: 12px;
  font-weight: 300;
}

/* Login Page Style
    =================================================================== */
#admLogin {
  margin-top: 15vh;
  text-align: center;
}
#admLogin h3 {
  margin-bottom: 30px;
  font-size: 24px;
  font-weight: 500;
  text-transform: uppercase;
}
#admLogin h3 small {
  font-size: 18px;
  font-weight: 300;
  color: #616161;
}
#admLogin li {
  margin-bottom: 10px;
}
#admLogin input {
  width: 250px;
  padding: 0 10px;
  border: 2px solid #212121;
  height: 32px;
  line-height: 32px;
  background-color: transparent;
}
#admLogin a {
  display: inline-block;
  width: 250px;
  margin-top: 5px;
  line-height: 32px;
  background-color: #212121;
  color: #fff;
}

/* Sub Page Style
    =================================================================== */
#admSubWrap .container {
  max-width: 1280px;
  margin: 0 auto;
}
#admSubWrap .viewContents {
  margin: 7vh auto;
}
/* List Style */
.listTop {
  margin-bottom: 10px;
}
.listTop h3 {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  line-height: 30px;
}
.listTop h3 small {
  font-size: 12px;
  font-weight: 300;
  margin-left: 5px;
}
.listTop .searchSet {
  float: right;
}
.listTop .searchSet li {
  display: inline-block;
  margin-left: 3px;
}
.listTopSelect select {
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  border: 0;
  background-color: transparent;
}
.listTopInput input {
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  border: 0;
  background-color: #edeee2;
  font-weight: 100;
}
.listContents {
  margin-bottom: 15px;
}
.listContents table {
  width: 100%;
  padding: 15px;
  border: 1px solid #20201e;
  font-size: 13px;
}
.listContents th {
  padding: 0 15px;
  border-bottom: 1px solid #20201e;
  line-height: 40px;
  text-align: center;
}
.listContents td {
  padding: 0 15px;
  border-right: 0.5px dotted #888;
  border-bottom: 1px solid #20201e;
  line-height: 36px;
  text-align: center;
}
.listContents td:last-child {
  border-right: 0;
}
.listContents tr:last-child td {
  border-bottom: 0;
}
.listBTN {
  display: inline-block;
  position: relative;
  top: 5px;
  height: 24px;
  line-height: 24px;
  padding: 0 5px;
  font-size: 12px;
}
.listBottom .pagination {
  text-align: center;
}
.listBottom .pagination li {
  display: inline-block;
}
.listBottom .pagination li a {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  font-size: 12px;
}
.listBottom .pagination li a i {
  position: relative;
  top: 3px;
  font-size: 14px;
}
.listBottom .pagination li a:hover {
  color: #d32f2f;
}
.listBottom .pagination .active {
  font-weight: 500;
}
.listBottomBTNSet {
  margin-top: 30px;
  text-align: center;
}
.listBottomBTNSet a {
  font-weight: 500;
  margin: 0 15px;
  height: 32px;
  line-height: 32px;
}
/* List Style */
.formTop {
  margin-bottom: 10px;
}
.formTop h3 {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  line-height: 30px;
}
.formTop h3 small {
  font-size: 12px;
  font-weight: 300;
  margin-left: 5px;
}

.formContents2 {
  overflow: hidden;
  margin-bottom: 15px;
  padding: 50px 10vw;
  border: 1px solid #20201e;
}
.formContents2 li {
  overflow: hidden;
  line-height: 40px;
}
.formContents2 label {
  display: inline-block;
  width: 70px;
  vertical-align: top;
}

.formContents2 input[type=text],.formContents2 input[type=password] {
  width: 80px;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  border: 0;
  background-color: #edeee2;
  font-weight: 100;
}

.formContents {
  overflow: hidden;
  margin-bottom: 15px;
  padding: 50px 10vw;
  border: 1px solid #20201e;
}
.formContents li {
  overflow: hidden;
  line-height: 40px;
}
.formContents label {
  display: inline-block;
  width: 120px;
  vertical-align: top;
}
.formContents input[type=text],.formContents input[type=password] {
  width: 180px;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  border: 0;
  background-color: #edeee2;
  font-weight: 100;
}
.formContents select {
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  border: 0;
  background-color: transparent;
}
.formContents span {
  margin-left: 5px;
  font-size: 12px;
}
.formContents .addArticel {
  float: right;
  width: calc(100% - 120px);
}
.formContents .addArticel i {
  margin-left: 10px;
  font-size: 8px;
  color: #d32f2f;
}
.formContents .addArticleResult {
  width: 100%;
  line-height: 32px;
  margin-bottom: 10px;
  padding: 0 5px;
  border: 1px dotted #20201e;
  border-radius: 5px;
}
.formContents .addArticleResult span {
  height: 28px;
  line-height: 28px;
  padding: 0 10px;
  background-color: #edeee2;
  font-size: 12px;
}
.formContents .addArticleResult span a {
  margin-left: 3px;
}
.formContents .applyDetailWebmail li {
  float: left;
  width: 50%;
}
.formContents .applyDetailWebmail label {
  width: 60px;
}
.formContents .formBTN {
  display: inline-block;
  position: relative;
  top: 5px;
  height: 24px;
  line-height: 24px;
  padding: 0 5px;
  font-size: 12px;
}
.formBottomBTNSet {
  margin-top: 30px;
  text-align: center;
}
.formBottomBTNSet a {
  font-weight: 500;
  margin: 0 15px;
  height: 32px;
  line-height: 32px;
}
/* Popup */
.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.5);
  transition: opacity 0.2s;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}
.popup {
  margin: 30vh auto;
  padding: 30px 45px;
  border: 1px solid #20201e;
  background: #FFFEF4;
  width: 100%;
  max-width: 480px;
  position: relative;
  transition: all 5s ease-in-out;
}
.popup h3 {
  font-size: 14px;
  font-weight: 500;
  line-height: 30px;
  margin-bottom: 15px;
}
.popup li {
  line-height: 40px;
}
.popup label {
  display: inline-block;
  width: 120px;
}
.popup input {
  width: 180px;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  border: 0;
  background-color: #edeee2;
  font-weight: 100;
}
.popup select {
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  border: 0;
  background-color: transparent;
}
.popup .popupBTNSet {
  margin-top: 30px;
  text-align: center;
}
.popup .popupBTNSet a {
  display: inline-block;
  height: 24px;
  line-height: 24px;
  padding: 0 5px;
}

/* 페이스북 연동 설정 */
.formContents .snsPanel {
  display: inline-block;
  width: calc(80% - 150px);
  margin-top: 10px;
  padding: 20px 30px;
  border: 1px solid #c1c1c1;
}
#snsPage {
  margin-bottom: 20px;
  border-bottom: 1px dotted #c1c1c1;
}
.formContents .snsPanel h5 {
  font-size: 14px;
  line-height: 18px;
  font-weight: 400;
  margin-bottom: 20px;
}
.formContents .snsPanel ul {
  font-size: 0;
}
.formContents .snsPanel li {
  display: inline-block;
  width: 50%;
  padding: 0 15px;
  font-size: 13px;
  line-height: 18px;
}
.formContents .snsPanel li label {
  margin-left: 10px;
}
.formContents .snsPanel .snsResult {
  margin-top: 20px;
  text-align: center;
}
.formContents .snsPanel .snsResult strong {
  color: #d32f2f;
}

/* Footer Style
    =================================================================== */
#admFooter {
  position: fixed;
  bottom: 0;
  right: 30px;
  height: 50px;
}
#admFooter span {
  display: inline-block;
  font-size: 12px;
  line-height: 50px;
}
#admFooter strong {
  font-weight: 500;
}

/* OOCSS
    =================================================================== */
/* effect 5 */
.hover5{
  display: inline-block;
  position: relative;
}
.hover5:before{
  content: '' attr(data-hover-label) '';
  position: absolute;
  top: 0;
  transform: rotateX(90deg);
  transition: transform .1s linear;
}
.hover5:hover:before, .hover5:focus:before{
  transition-delay: .2s;
  transform: rotateX(0deg);
}
.hover5:hover .hover5__label, .hover5:focus .hover5__label{
  transform: rotateX(90deg);  
  transition-delay: 0s
}
.hover5__label{
  display: inline-block;
  transform: rotateX(0);
  transition: transform .1s linear .2s;
}
/* effect 7 */
.hover7{
  display: inline-block;
}
.hover7:hover .hover7__label:after,
.hover7:focus .hover7__label:after{
  transform: translate3d(0, 0, 0);
}
.hover7__label{
  position: relative;
  overflow: hidden;
  padding-bottom: 0;
  display: inline-block;
}
.hover7__label:after{
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translate3d(-70%, 0, 0);
  transition: transform .2s ease-in;
}
.hover7__label:after{
  background-color: #d32f2f;
}