@charset "UTF-8";
/* ==============================================================================================================
문학DB - 리스트
============================================================================================================== */
.visual {
  background: #EFF3FF;
  height: 27rem;
  max-width: inherit;
}
.visual .container {
  margin: auto;
  height: 100%;
  position: relative;
  flex-direction: column;
}
.visual .input_text_wrap .form-control, .visual .select_wrap .option_group, .visual .select_wrap .option_open {
  border: 0.4rem solid #1877F2;
  border-radius: 0;
  padding: 1rem 3rem;
  background-color: transparent;
}
.visual .db_search {
  display: flex;
  color: #1877F2;
  font-weight: 700;
}
.visual .select_wrap {
  margin-right: 0.5rem;
  position: relative;
}
.visual .select_wrap .option_open {
  width: 20rem;
  height: 7rem;
  text-align: left;
  color: inherit;
  background-image: url("../img/sub/db_select_angle_down.png");
  background-position: right 2rem center;
  background-size: 2rem 1.2rem;
}
.visual .select_wrap .option_open:focus { /*background: url('../img/sub/db_select_angle_up.png') #1877F2;*/
  background-color: #1877F2;
  color: #fff;
}
.visual .select_wrap .option_group {
  padding-left: 0;
  padding-right: 0;
  display: none;
  width: 100%;
  position: absolute;
  z-index: 2;
  transform: translateY(-0.4rem);
}
.visual .select_wrap .option_group input {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.visual .select_wrap .option_group input ~ label {
  display: block;
  color: #151515;
  cursor: pointer;
  text-align: left;
  padding: 0.5rem 3rem;
}
.visual .select_wrap .option_group input:hover + label, .visual .select_wrap .option_group input:focus + label {
  background: #F1F5FC;
}
.visual .select_wrap.active .option_open {
  background-color: #fff;
  color: #1877F2;
}
.visual .select_wrap.active .option_group {
  display: block;
  background-color: #fff;
}
.visual .input_text_wrap {
  position: relative;
}
.visual .input_text_wrap .form-control {
  height: 7rem;
  padding-right: 6.6rem;
  width: 70rem;
}
.visual .input_text_wrap .form-control::placeholder {
  color: #1877F2;
}
.visual .input_text_wrap button {
  font-size: 3.6rem;
  font-weight: 400;
  position: absolute;
  transform: translate(0, -50%);
  right: 2rem;
  top: 50%;
}

.dark-theme .visual {
  background: #2f3032;
}

.snb_wrap {
  padding-top: 4rem;
}

.snb_section {
  flex-basis: 35rem;
}
.snb_section .snb {
  /* .depth3{@include inactive(.2s);position: absolute; top:0; width:var(--container); z-index: 2; background: #fff; border-radius: 0.5rem; border: .4rem solid #408EDC; padding: 4rem; box-shadow: 0px 3px 15px #00000029;
  	.title{display: block;margin-bottom: 4rem;}
  	ul{display:flex; flex-wrap:wrap;
  		li{flex:0 0 20%;
  			&.active{color:#4a7cc2;font-weight:700}                        
  			>a{display:flex;position:relative;padding:1rem 2rem; transition: 0.2s;
  				span{margin-right: auto;font-weight: 500;}
  				em{font-weight: 600;}
  				&:hover{background: #F8F8F8;
  					span{font-weight: 700;}
  				}
  			}
  		}
  	}
  	.btn_close{@include pos(rt, 3rem, 3rem); font-size: 2.5rem; color: #000;}
  }  */
}
.snb_section .snb.stick {
  width: 27rem;
}
.snb_section .snb .depth2 > li > a {
  font-size: 2.4rem;
  font-weight: 700;
}
.snb_section .snb .depth2 > li > a.inactive {
  color: var(--txt6);
}
.snb_section .snb .depth2 > li > a.active {
  border-right: 1px solid var(--black);
  color: var(--black);
}
.snb_section .snb .depth2 > li > a::after {
  color: inherit;
}
.snb_section .snb .depth2 > li > a:hover::after {
  color: var(--black);
}
.snb_section .snb .depth2 > li.active .depth3 {
  opacity: 1;
  visibility: visible;
  overflow: visible;
}
.snb_section .snb .depth3 {
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: 0.2s;
  position: absolute;
  top: 0;
  left: 15.6rem;
  width: calc(var(--container) - 20.6rem + 5rem);
  z-index: 2;
  background: var(--white);
  border-radius: 0.5rem;
  border: 0.4rem solid #408EDC;
  padding: 4rem 1.5rem 4rem 4rem;
  box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.1607843137);
}
.snb_section .snb .depth3 .title {
  display: block;
  margin-bottom: 4rem;
}
.snb_section .snb .depth3 ul {
  display: flex;
  flex-wrap: wrap;
  max-height: 50rem;
  overflow: auto;
}
.snb_section .snb .depth3 ul::-webkit-scrollbar-track {
  background-color: var(--txte);
  border-radius: 0;
}
.snb_section .snb .depth3 ul::-webkit-scrollbar {
  width: 0.4rem;
}
.snb_section .snb .depth3 ul::-webkit-scrollbar-thumb {
  background-color: var(--txtb);
  border-radius: 0;
}
.snb_section .snb .depth3 ul li {
  flex: 0 0 20%;
}
.snb_section .snb .depth3 ul li.active {
  color: #4a7cc2;
  font-weight: 700;
}
.snb_section .snb .depth3 ul li > a {
  display: flex;
  position: relative;
  padding: 1rem 2rem;
  transition: 0.2s;
}
.snb_section .snb .depth3 ul li > a span {
  margin-right: auto;
  font-weight: 500;
}
.snb_section .snb .depth3 ul li > a em {
  font-weight: 600;
}
.snb_section .snb .depth3 ul li > a:hover {
  background: var(--txtf);
}
.snb_section .snb .depth3 ul li > a:hover span {
  font-weight: 700;
}
.snb_section .snb .depth3 .btn_close {
  position: absolute;
  right: 3rem;
  top: 3rem;
  font-size: 2.5rem;
  color: var(--black);
}
.snb_section .snb .depth3 .btn_prev {
  display: none;
  position: absolute;
  left: 3rem;
  top: 3rem;
  font-size: 2.5rem;
  color: var(--black);
}

.title_area {
  display: flex;
  align-items: center;
}
.title_area .title_h1 {
  margin-bottom: 0;
}
.title_area .title_h1 + .note_list_number {
  margin-left: 2rem;
}
.title_area .title_h1:empty {
  display: none;
}
.title_area .note_list_number {
  font-size: 1.8rem;
  display: block;
}
.title_area .db_list_sort {
  display: flex;
  margin-left: auto;
}
.title_area .db_list_sort .form-select {
  display: block;
  min-height: 4.6rem;
}
.title_area .db_list_sort .form-select ~ .form-select {
  margin-left: 1rem;
}

.db_list.research_list .list_ul {
  display: block;
}
.db_list.research_list .list_ul .list_li ~ .list_li {
  margin-top: 3rem;
}
.db_list.research_list .list_ul .list_li:hover .thumb img {
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 2px 1px 0.7rem rgba(137, 137, 143, 0.3);
}
.db_list.research_list .list_ul .list_li:hover .btn_wrap .icon_more {
  background-position: 0 -1.9rem;
}
.db_list.research_list .list_ul .list_li .item {
  flex-direction: inherit;
}
.db_list.research_list .list_ul .list_li .item .title {
  -webkit-line-clamp: 1;
  height: auto;
}
.db_list.research_list .list_ul .list_li .thumb {
  flex: 0 0 28rem;
  height: 100%;
  margin-right: 4rem;
}
.db_list.research_list .list_ul .list_li .thumb img {
  width: 100%;
  max-width: 28rem;
  height: auto;
  object-fit: cover;
  box-shadow: none;
  border: 1px solid #DDDDDD;
  border-top-left-radius: 2.5rem;
  transition: 0.2s;
}
.db_list.research_list .list_ul .list_li .txt {
  flex: 1;
  border-top: 1px solid #DCDCDC;
  border-bottom: 1px solid #DCDCDC;
  padding: 3.5rem 0;
}
.db_list.research_list .list_ul .list_li .research_info {
  font-size: 1.6rem;
  margin-bottom: 3rem;
}
.db_list.research_list .list_ul .list_li .research_info li {
  display: flex;
}
.db_list.research_list .list_ul .list_li .research_info li ~ li {
  margin-top: 1rem;
}
.db_list.research_list .list_ul .list_li .research_info strong {
  width: 10rem;
}
.db_list.research_list .list_ul .list_li .etc_info {
  font-size: 1.4rem;
}
.db_list.research_list .list_ul .list_li .etc_info span ~ span {
  position: relative;
  padding-left: 1rem;
  margin-left: 1rem;
}
.db_list.research_list .list_ul .list_li .etc_info span ~ span::before {
  content: "";
  display: block;
  background-color: #DBE0E3;
  width: 1px;
  height: 1rem;
  position: absolute;
  transform: translate(0, -50%);
  left: 0;
  top: 50%;
}
.db_list.research_list .list_ul .list_li .btn_wrap {
  position: absolute;
  transform: translate(0, -50%);
  right: 0;
  top: 50%;
}

/* ==============================================================================================================
검색결과 리스트
============================================================================================================== */
.search_list {
  position: relative;
}
.search_list .more {
  position: absolute;
  transform: translate(0, -320%);
  right: 0;
  top: 0;
  color: #767676;
}

/* %book_item {
	.category{ font-size: 1.8rem; font-weight: 600; display: block; color: #1198BB; margin-bottom: 2rem;}
	.title{ font-size: 2.2rem; line-height: 3rem; color: #000;margin-bottom: 2.2rem; @include ellipsis2(2, 5.6rem, 1)}	
	.thumb {
		img{width:33rem; height: 33rem; border-radius: 4rem 0 0 0; margin:0 auto; overflow:hidden; box-shadow:0 0 1.5rem rgba(#000000, .16); object-fit: cover; object-position: top;}
		.prize{background: #fff; color: #546265; border: 1px solid #E5EAEC; border-radius: 2rem;padding: 0.5rem 1.5rem; @include pos(rb, 3.5rem, 1.5rem); font-size: 1.4rem;font-weight: 600;}
	}
} */
@media (max-width: 1439.98px) {
  .db_wrap .snb_section .snb .depth2 > li {
    position: static;
  }
  .db_wrap .snb_section .snb .depth3 {
    width: calc(100% - 20.6rem - 2.5rem);
    top: 5rem;
  }
}
@media (max-width: 1024.98px) {
  .db_wrap .snb_section .snb .depth2 > li > a {
    font-size: 1.8rem;
    font-weight: 500;
    padding: 1rem 2rem;
    margin: 1rem 0;
    text-align: center;
  }
  .db_wrap .snb_section .snb .depth2 > li > a.active {
    border-radius: 2rem;
    border: 0;
    background: var(--txte);
    font-weight: 700;
  }
  .db_wrap .snb_section .snb .depth3 {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    border: 0;
    padding: 5rem 2.4rem 4rem;
  }
  .db_wrap .snb_section .snb .depth3 .title {
    text-align: center;
    margin-top: 2rem;
  }
  .db_wrap .snb_section .snb .depth3 ul {
    display: block;
    height: calc(100% - 5rem);
    max-height: inherit;
  }
  .db_wrap .snb_section .snb .depth3 ul li {
    border-bottom: 1px solid #F8F8F8;
  }
  .snb_section .snb .depth3 ul li > a {
    font-size: 2.57rem;
  }
  .snb_section .snb .depth3 .btn_prev {
    display: block;
  }
  .snb_section .snb .depth3 .btn_close i {
    display: none;
  }
  .snb_section .snb .depth3 .btn_close:before {
    content: "\e921";
    display: inline-block;
    font-family: "xeicon";
  }
}
@media (max-width: 767.98px) {
  .visual .db_search {
    display: block;
  }
  .visual .select_wrap {
    margin-bottom: 1rem;
    margin-right: 0;
  }
  .visual .select_wrap .option_open,
  .visual .input_text_wrap .form-control {
    width: 100%;
  }
  .db_wrap .title_area {
    display: block;
  }
  .db_wrap .title_area .note_list_number {
    text-align: center;
    margin: 2rem 0;
  }
  .db_wrap .title_area .db_list_sort {
    margin-top: 2rem;
  }
  .db_wrap .title_area .db_list_sort .form-select {
    flex: 1;
  }
  .db_list.research_list .list_ul .list_li .item {
    display: block;
  }
  .db_list.research_list .list_ul .list_li .item .thumb {
    margin-right: 0;
    margin-bottom: 4rem;
  }
  .db_list.research_list .list_ul .list_li .item .btn_wrap {
    display: none;
  }
  .db_list .list_li:last-of-type {
    display: none;
  }
  .db_list.writer_list .list_li:last-of-type {
    display: block;
  }
  .snb_section .snb .depth3 .btn_close,
  .snb_section .snb .depth3 .btn_prev {
    font-size: 3.4rem;
  }
}

/*# sourceMappingURL=sub05.css.map */