@charset "utf-8";

/********** ÅؽºÆ® ...ó¸® **********/
.txt-over1 {display: -webkit-box; display: -ms-flexbox; height: fit-content; overflow: hidden; text-overflow: ellipsis; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 1;} /* 1ÁÙ */
.txt-over2 {display: -webkit-box; display: -ms-flexbox; height: fit-content; overflow: hidden; text-overflow: ellipsis; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 2;} /* 2ÁÙ */
.txt-over3 {display: -webkit-box; display: -ms-flexbox; height: fit-content; overflow: hidden; text-overflow: ellipsis; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 3;} /* 3ÁÙ */

.container-main .content {}

/* main-icon */
.container-main .icon-main {
  background: url("../images/main/icon_main.png") no-repeat;
}
.container-main .icon-main-more {
  width: 21px;
  height: 21px;
  background-position: 0 -200px;
}
.container-main .icon-main-map {
  width: 10px;
  height: 16px;
  background-position: -90px -200px;
}
.container-main .icon-main-call {
  width: 12px;
  height: 16px;
  background-position: -101px -200px;
}
.container-main .icon-main-time {
  width: 15px;
  height: 16px;
  background-position: -114px -200px;
}

/* panel-common */
.container-main .panel-h {
  margin: -5px 0 -5px -5px;
  padding: 5px;
  line-height: 1;
}
.container-main .panel-h > span {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  overflow: hidden;
  height: 15px;
  text-indent: -9999em;
  background: url("../images/main/icon_main.png") no-repeat;
  vertical-align: top;
}
.container-main .panel-more {
  display: block;
}
.container-main .panel-more:hover .icon-main-more {
  background-position: -30px -200px;
}

@media only all and (max-width: 400px) {
  .container-main .panel-h > span {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
    -webkit-transform-origin: 0 50%;
    -moz-transform-origin: 0 50%;
    -ms-transform-origin: 0 50%;
    -o-transform-origin: 0 50%;
    transform-origin: 0 50%;
  }
}

/* panel */
.container-main .panel {
}
.container-main .panel + .panel {
	margin-top: 10px;
}
.container-main .panel .flex-panel {
	display: flex;
	gap: 10px;
}
.container-main .panel .panel-spacer {
	padding: 20px;
	border: 1px solid #e9e9e9;
	border-radius: 5px;
}
.container-main .panel-tit {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	margin-bottom: 15px;
}
.container-main .panel-gray .panel-spacer {
  background-color: #f6f6f6;
}


.container-main .panel-search {}
.container-main .panel-search .search-flex {
	display: flex;
	align-items: center;
	gap: 10px;
}
.container-main .panel-search .search-flex > div { flex: 1;}
.container-main .panel-search .search-flex > div:last-of-type { flex: 2;}

.container-main .panel-notice {
	width: calc(100% - 210px);
}
.container-main .panel-notice .notice-swiper {
	padding-bottom: 20px;
}
.container-main .panel-notice .notice-swiper .swiper-pagination {
	bottom: 0;
}
.container-main .panel-notice .panel-h > span {
  width: 51px;
  background-position: 0 -40px;
}
.container-main .panel-notice .dot-list > li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 0;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #dddddd;
  background-position: 0 center;
  font-size: 1.3em;
  color: #666;
}
.container-main .panel-notice .dot-list > li:last-child {border: 0;}
.container-main .panel-notice .dot-list > li span {font-size: 0.9em; color: #888; white-space: nowrap;}

.container-main .panel-quick {
	flex-shrink: 0;
}
.container-main .panel-quick.panel-spacer {
	border-color: #b2cadf;
	background-color: #c9def1;
}
.container-main .panel-quick .panel-inner {
	display: flex;
	flex-flow: column wrap;
	justify-content: center;
	gap: 10px;
	height: 100%;
}
.container-main .panel-quick a {
	display: block;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
	font-size: 1.5em;
	color: #333;
	white-space: nowrap;
}
.container-main .panel-quick a > i {
	margin-right: 5px;
}
.container-main .icon-main-qna {
	width: 30px;
	height: 30px;
	background-position: -32px -154px;
	background-size: 70px 184px;
}
.container-main .icon-main-book {
	width: 30px;
	height: 30px;
	background-position: 0px -122px;
	background-size: 70px 184px;
}
.container-main .icon-main-pin {
	width: 30px;
	height: 30px;
	background-position: -32px -122px;
	background-size: 70px 184px;
}
.container-main .icon-main-dl {
	width: 30px;
	height: 30px;
	background-position: 0 -154px;
	background-size: 70px 184px;
}

.container-main .panel-books .panel-h > span {
	width: 49px;
	background-position: 0 -60px;
}
.container-main .panel-books .books {
	display: flex;
	justify-content: space-between;
	gap: 20px;
}
.container-main .panel-books .books li {
	flex: 1;
}
.container-main .panel-books .books a {
	display: block;
}
.container-main .panel-books .books .book-thumb {
	position: relative;
	display: block;
	height: 0;
/*	min-height: 220px;*/
	padding-top: 10px;
	padding-bottom: 135%;
/*  max-width: 115px;*/
/*  margin: 0 auto;*/
}
.container-main .panel-books .books .book-thumb:before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 10px;
	padding: 0;
}
.container-main .panel-books .books a p {
	display: inline-block;
	font-size: 1.3em;
}
.container-main .panel-books .books a:hover p {
	text-decoration: underline;
}
.container-main .panel-books .books .book-thumb img {
	position: absolute;
	left: 0;
	top: 10px;
	width: 100%;
	height: calc(100% - 10px);
}

.container-main .panel-story .panel-spacer {
	border-color: #23649f;
	background: #2a79c0 url("../images/main/bg_panel.jpg") center left -332% repeat;
}
.container-main .panel-story .panel-h > span {
	width: 132px;
	height: 18px;
	background-position: 0 0;
}
.container-main .panel-story .story-top {
	width: 20%;
}
.container-main .panel-story .story-top > a {
	display: block;
	border: 1px solid #dddddd;
}
.container-main .panel-story .story-top > a:hover .story-top-name,
.container-main .panel-story .story-top > a:hover .story-top-title {
	text-decoration: underline;
}
.container-main .panel-story .story-top > a > img {
	width: 100%;
}
.container-main .panel-story .story-top-text {
	padding: 7px 10px;
	font-size: 1em;
	font-weight: normal;
	background: #fff;
}
.container-main .panel-story .story-top-name {
	color: #266cac;
	font-size: 1.4em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	word-wrap: normal;
	display: block;
}
.container-main .panel-story .story-top-title {
	color: #333333;
	font-size: 1.8em;
	letter-spacing: -0.05em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	word-wrap: normal;
	display: block;
}
.container-main .panel-story .story-list {
	width: 47.25111441%;
	height: 105.88235294%;
}
.container-main .panel-story .story-list > li {
	position: relative;
	height: 33.33333333%;
}
.container-main .panel-story .story-list > li > a {
	display: block;
}
.container-main .panel-story .story-list > li > a:hover .story-name,
.container-main .panel-story .story-list > li > a:hover .story-title {
	text-decoration: underline;
}
.container-main .panel-story .story-list > li .story-thumb {
	width: 28.7%;
}
.container-main .panel-story .story-thumb {
	height: 100%;
	border: 1px solid #dddddd;
}
.container-main .panel-story .story-cont {
	white-space: nowrap;
}
.container-main .panel-story .story-cont .vertical-middle,
.container-main .panel-story .story-cont:after {
	content: "";
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}
.container-main .panel-story .story-text {
	display: inline-block;
	max-width: 100%;
	margin-top: 10px;
	white-space: normal;
	vertical-align: middle;
}
.container-main .panel-story .story-name {
	color: #d4ebff;
	font-size: 1.2em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	word-wrap: normal;
	display: block;
}
.container-main .panel-story .story-title {
	margin: 0;
	color: #ffffff;
	font-size: 1.4em;
	line-height: 1.3;
}
.story-swiper-wrap .swiper-slide a:hover .story-title {text-decoration: underline;}
.story-swiper-wrap {
	display: flex;
	gap: 20px;
}
.story-swiper-wrap .lf {
	width: 250px;
}
.story-swiper-wrap .rg {
	position: relative;
	width: calc(100% - 270px);
}
.story-swiper-wrap .swiper-slide a {
	display: block;
}
.story-swiper-wrap .swiper-story {
	height: 100%;
}
.story-swiper-wrap .swiper-story .swiper-slide {
	height: 100%;
}
.story-swiper-wrap .swiper-story a {
	height: 100%;
}
.story-swiper-wrap .swiper-story a img {
	height: 100%;
}
.story-swiper-wrap .swiper-btn {
	display: flex; align-items: center; gap: 10px;
	margin-top: 10px;
}
.story-swiper-wrap .swiper-btn a {display: block; color: #fff; text-align: center;}
.story-swiper-wrap .swiper-btn .swiper-pagination {
	position: relative;
	bottom: unset;
	height: 2px;
}
.story-swiper-wrap .swiper-btn .swiper-pagination span {
	margin: 0;
	background-color: transparent;
}
.story-swiper-wrap .swiper-btn .swiper-pagination span::after {
	content: "";
	display: block;
	height: 2px;
	background-color: #fff;
}
.story-swiper-wrap .swiper-btn .swiper-pagination span.swiper-pagination-bullet-active {
	border: 3px solid #fff; background-color: transparent; opacity: 1;
}
.story-swiper-wrap .swiper-btn .swiper-pagination span.swiper-pagination-bullet-active::after {display: none;}
.story-swiper-wrap .swiper-btn .swiper-paging {display: flex; align-items: center; gap: 4px; color: #fff;}
.story-swiper-wrap .swiper-btn .swiper-paging a:not(.stop , .play) {font-size: 15px;}
.story-swiper-wrap .swiper-btn a.play {display: none;}
.story-swiper-wrap .swiper-btn a.swiper-button-disabled i {opacity: 0.4;}

@media only all and (max-width: 1400px) {
	.container-main .panel-story .panel-spacer {
		background: #2a79c0 url("../images/main/bg_panel.jpg") center left -115% repeat;
	}
}
@media only all and (max-width: 992px) {
	.container-main .panel-story .panel-spacer {
		background: #2a79c0 url("../images/main/bg_panel.jpg") center left 65% repeat;
	}
}
@media only all and (max-width: 900px) {
	.container-main .panel-books .books {
		flex-wrap: wrap;
	}
	.container-main .panel-books .books li {
		flex: 1 1 20%;
	}
}
@media only all and (max-width: 767px) {
	.container-main .panel-search .search-flex {
		flex-flow: column wrap;
		gap: 5px;
	}
	.container-main .panel-search .search-flex > div { flex: unset; width: 100%;}
	.container-main .panel-search .search-flex > div:last-of-type { flex: unset;}
	.container-main .panel-search .search-flex .btn {width: 100%; padding: 4px 0 6px;}

	.container-main .panel .flex-panel {
		flex-flow: column wrap;
	}

}
@media only all and (max-width: 500px) {
	.story-swiper-wrap {
		flex-flow: column wrap;
	}
	.story-swiper-wrap .lf {
		width: 100%;
	}
	.story-swiper-wrap .rg {
		width: 100%;
	}
}