@charset "utf-8";

/* 나눔스퀘어 */
@import url('https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css?1');

/* 나눔스퀘어 라운드 */
@import url('https://webfontworld.github.io/naver/NanumSquareRound.css?1');

/* 노토산스 고딕 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

/* 노토산스 명조 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=swap');

html { -webkit-text-size-adjust: 100%; }

body {
	/*font-family: 'NanumSquare', 'Noto Sans KR', "Malgun Gothic", "맑은 고딕", dotum, "돋움", sans-serif !important;*/
	font-family: 'Noto Sans KR', "Malgun Gothic", "맑은 고딕", dotum, "돋움", sans-serif !important;
	font-size: 18px;
	line-height: 1.8em;
	color: #000000;
	background-color: #ffffff;
	/* width: fit-content; */
	min-width: 1280px;
	/* overflow-x: hidden; */
}

html, body {
  overflow-x: hidden;
}

.wrapper {
  max-width: 100%;
}

.normal     { font-weight: 400; }
.bold       { font-weight: 700; }
.bolder     { font-weight: 700; }  /* 나눔스퀘어에서 노토산스로 변경되면서 800이 너무 두꺼워지는 문제로 수정함 */
/* .bolder     { font-weight: 800; } */
.light      { font-weight: 300; }

.bold { font-weight: bold; }

.bolder { font-family:  font-weight: 700 !important; }  /* 나눔스퀘어에서 노토산스로 변경되면서 800이 너무 두꺼워지는 문제로 수정함 */
/* .bolder { font-family:  font-weight: 800 !important; } */
.light	{font-family:  font-weight: 300 !important; }  


body, p, ul, h1, h2, h3 {
	margin: 0;
	padding: 0;
}

a {
	text-decoration: none;
	color: #000000;
}

li {
	list-style-type: none;
	border: 0;
	margin: 0;
	font-size: 0;
}

img {
	border: 0;
	margin: 0;
	padding: 0;
	vertical-align: top;
}

.img_middle {
	vertical-align: middle;
}

input, select, textarea, button {
	vertical-align:middle;
}

.clearfix:after {
	content: ".";	/* the period is placed on the page as the last thing before the div closes */
	display: block;	/* inline elements don't respond to the clear property */ 
	height: 0;	/* ensure the period is not visible */
	clear: both;	/* make the container clear the period */
	visibility: hidden;		/* further ensures the period is not visible */
}

.clearfix {display: inline-block;}   /* a fix for IE Mac */

/* next a fix for the dreaded Guillotine bug in IE6 */

/* Hides from IE-mac \*/

* html .clearfix {height: 1%;}

.clearfix {display: block;}

/* End hide from IE-mac */

/* end of "no-extra-markup" clearing method */

/* .clearfix {
	overflow: hidden;
} */


.mt0 { margin-top: 0 !important; }
.mt10 { margin-top: 10px !important; }
.mt20 { margin-top: 20px !important; }
.mt30 { margin-top: 30px !important; }
.mt40 { margin-top: 40px !important; }
.mt50 { margin-top: 50px !important; }
.mt60 { margin-top: 60px !important; }
.mt70 { margin-top: 70px !important; }
.mt80 { margin-top: 80px !important; }
.mt90 { margin-top: 90px !important; }
.mt100 { margin-top: 100px !important; }
.minus_mt50 { margin-top: -50px !important; }
.minus_mt80 { margin-top: -80px !important; }

.mb0 { margin-bottom: 0px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb40 { margin-bottom: 40px !important; }
.mb50 { margin-bottom: 50px !important; }
.mb60 { margin-bottom: 60px !important; }
.mb70 { margin-bottom: 70px !important; }
.mb80 { margin-bottom: 80px !important; }
.mb90 { margin-bottom: 90px !important; }
.mb100 { margin-bottom: 100px !important; }
.mb200 { margin-bottom: 200px !important; }

.ml0 { margin-left: 0px !important; }
.ml10 { margin-left: 10px !important; }
.ml20 { margin-left: 20px !important; }
.ml25 { margin-left: 25px !important; }
.ml30 { margin-left: 30px !important; }
.ml35 { margin-left: 35px !important; }
.ml40 { margin-left: 40px !important; }
.ml50 { margin-left: 50px !important; }

.mr0 { margin-right: 0px !important; }
.mr10 { margin-right: 10px !important; }
.mr20 { margin-right: 20px !important; }
.mr30 { margin-right: 30px !important; }
.mr40 { margin-right: 40px !important; }
.mr50 { margin-right: 50px !important; }

.pt0 { padding-top: 0 !important; }
.pt10 { padding-top: 10px !important; }
.pt20 { padding-top: 20px !important; }
.pt30 { padding-top: 30px !important; }
.pt40 { padding-top: 40px !important; }
.pt50 { padding-top: 50px !important; }
.pt60 { padding-top: 60px !important; }
.pt70 { padding-top: 70px !important; }
.pt80 { padding-top: 80px !important; }
.pt90 { padding-top: 90px !important; }
.pt100 { padding-top: 100px !important; }

.pb0 { padding-bottom: 0px !important; }
.pb10 { padding-bottom: 10px !important; }
.pb20 { padding-bottom: 20px !important; }
.pb30 { padding-bottom: 30px !important; }
.pb40 { padding-bottom: 40px !important; }
.pb50 { padding-bottom: 50px !important; }
.pb60 { padding-bottom: 60px !important; }
.pb70 { padding-bottom: 70px !important; }
.pb80 { padding-bottom: 80px !important; }
.pb90 { padding-bottom: 90px !important; }
.pb100 { padding-bottom: 100px !important; }

.pl0 { padding-left: 0px !important; }
.pl10 { padding-left: 10px !important; }
.pl20 { padding-left: 20px !important; }
.pl30 { padding-left: 30px !important; }
.pl40 { padding-left: 40px !important; }
.pl50 { padding-left: 50px !important; }

.pr0 { padding-right: 0px !important; }
.pr10 { padding-right: 10px !important; }
.pr20 { padding-right: 20px !important; }
.pr30 { padding-right: 30px !important; }
.pr40 { padding-right: 40px !important; }
.pr50 { padding-right: 50px !important; }

.a_c {text-align: center !important; }
.a_l {text-align: left !important; }
.v_m {vertical-align: middle !important;}
.v_b {vertical-align: bottom !important;}

.color_black { color: #000000; !important; }

.text_st::placeholder {
  color: #999;
  font-size: 15px;
  opacity: 1; /* 일부 브라우저에서 흐릿하게 나오는 걸 방지 */
}

/* 크로스 브라우징용 (선택사항) */
.text_st::-webkit-input-placeholder {
  color: #999;
}
.text_st:-ms-input-placeholder {
  color: #999;
}
.text_st::-moz-placeholder {
  color: #999;
  opacity: 1;
}

.text_st_02::placeholder {
  color: #999;
  font-size: 15px;
  opacity: 1; /* 일부 브라우저에서 흐릿하게 나오는 걸 방지 */
}

/* 크로스 브라우징용 (선택사항) */
.text_st_02::-webkit-input-placeholder {
  color: #999;
}
.text_st_02:-ms-input-placeholder {
  color: #999;
}
.text_st_02::-moz-placeholder {
  color: #999;
  opacity: 1;
}

#container {
	width: 100%;
	text-align: center;
}

.wrapper {
	width: 1280px;
	margin: 0 auto;
}

#main_global {
	width: 100%;
	background-color: #f8f8f8;
}

#main_menu {
	width: 100%;
	background-color: #0056e1;
}

/* #main_banner {
	width: 100%;
	text-align: center;
} */


/* .mouse__cursor, .mouse__cursor2 {
      position: absolute;
      pointer-events: none;
      z-index: 9999;
      border-radius: 50%;
      transform: translate(-50%, -50%);
	  transition: transform 0.1s ease, opacity 0.2s ease;
}

 .mouse__cursor {
      width: 8px;
      height: 8px;
      background: #195cc8 !important;
 }

  .mouse__cursor2 {
      width: 30px;
      height: 30px;
      border: 1px solid #3985ff !important;
 }

 .mouse__cursor.a:hover, .mouse__cursor2.a:hover {
      transform: translate(-50%, -50%) scale(1.5);
      background: #3985ff;
      border-color: #3985ff;
	  opacity: 50%;
} */


.mouse__cursor,
.mouse__cursor2 {
  position: fixed;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  transform-origin: center;
  pointer-events: none;
  z-index: 1000;
  transition: opacity 0.2s ease;
}

.mouse__cursor {
  width: 8px;
  height: 8px;
  background-color: #195cc8;
  border-radius: 50%;
}

.mouse__cursor2 {
  width: 30px;
  height: 30px;
  border: 1px solid #3985ff;
  border-radius: 50%;
  background-color: transparent;
}

#main_global {
	height: 45px;
}

#main_member {
	float: right;
}

#main_member li {
	float: left;
	font-family: 'Noto Sans KR', "Malgun Gothic", "맑은 고딕", dotum, "돋움", sans-serif !important;
	font-size: 13px;
	line-height: 45px;
	color: #5f5f5f;
	padding-left: 10px;
	margin-right: 10px;
	background-image: url(/image/main/global_text_gap.gif);
	background-repeat: no-repeat;
	background-position: -0px 19px;
}

#main_member li:last-child {
	margin-right: 0px;
}

#main_member li:first-child {
	background-image: none;
}

#main_member li a:hover {
	color: #0056df;
}

#main_search {
	height: 127px;
	position: relative;
}

.main_logo {
	margin-top: 27px;
}


.search-box {
	position: absolute;
	left: 319px;
	top:31px;
	display: flex;
	align-items: center;
	border: 1px solid #ddd;
	border-radius: 60px;
	background-color: #fff;
	/* padding: 10px 15px; */
	width: 640px;
	height: 63px;
	/* box-shadow: 0 2px 5px rgba(0,0,0,0.05); */
}


 .custom-dropdown {
	position: relative;
	font-size: 16px;
	margin-left: 30px;
	width: 120px;
	color :#5f5f5f;
}

/*.dropdown-btn {
	background: #fff;
	cursor: pointer;
	font-size: 16px;
	margin-left: 40px;
	width: 90px;
	color :#5f5f5f;
} */

.dropdown-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #fff;
  /* border: 1px solid #ddd;
  border-radius: 10px; */

  padding: 5px 5px;
  /* padding: 5px 10px; */

  cursor: pointer;

  /* 250611. 요청에 따른 수정 */
  font-size: 18px;
  font-weight: 700;

  /* font-size: 16px; */
}

.dropdown-btn:hover {
	color: #000000;
}

.dropdown-icon {
  width: 17px;
  height: 9px;
  transform: translateY(-6px); 
}

.dropdown-btn img {
	margin-top: 12px;
	margin-left: 10px;
}

.dropdown-list {
	position: absolute;
	top: 52px;;
	left: -10px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 10px;
	/* box-shadow: 0 2px 5px rgba(0,0,0,0.1); */
	margin-top: 5px;
	width: 120px;
	display: none;
	flex-direction: column;
	z-index: 100;
	animation: fadeDown 0.2s ease;
}

.dropdown-list.active {
	display: flex;
}

.dropdown-item {
	padding: 3px 20px;
	/* padding: 5px 20px; */
	cursor: pointer;

	/* 250611. 요청에 따른 수정 */
	font-size: 18px;

	/* font-size: 16px; */
}

.dropdown-item:first-child {
	padding-top: 10px !important;
}

.dropdown-item:last-child {
	padding-bottom: 10px !important;
}

.dropdown-item:hover {
	background-color: #f0f0f0;
}

@keyframes fadeDown {
	from { opacity: 0; transform: translateY(-5px); }
	to { opacity: 1; transform: translateY(0); }
}

/* .dropdown {
	border: none;
	background: none;
	font-size: 16px;
	margin-right: 10px;
	cursor: pointer;
	width: 110px;
	text-align: center;
	margin-left: 20px;
} */

.divider {
	border-left: 1px solid #ccc;
	height: 20px;
	margin: 0 10px 0px 0px;
}

.search-input {
	border: none;
	outline: none;
	flex: 1;
	font-size: 16px;
	color: #333;
}

.search-input::placeholder {
	color: #ccc;
}

/* 250611 국신원 요청에 따른 수정 */
.search-icon {
	display: inline-block;
	cursor: pointer;
	margin-right: 8px;
	width: 50px;
	height: 50px;
	background: #3985ff url(/image/main/main_search_icon.png) no-repeat;
	background-size: 20px 20px;
	background-position: center center;
	border-radius: 50px;
	box-sizing: border-box;
}
.search-icon:hover {
	background: #276fe5 url(/image/main/main_search_icon.png) no-repeat;
	background-size: 20px 20px;
	background-position: center center;
}

/* .search-icon {
	cursor: pointer;
	margin-right: 30px;
	margin-top: 12px;
} */


/* 250611 국신원 요청에 따른 수정 */
.main_search_detail {
	display: inline-block;
	width: 100px;
	position: absolute;
	top: 31px;
	left: 960px;
	font-size: 18px;
	font-weight: 700;
	color: #5f5f5f;
	text-align: center;
	line-height: 63px;
	background: url(/image/main/btn_arrow_next_02.png) no-repeat;
	background-size: 7px 14px;
	background-position: 90px center;
}

.main_search_detail:hover {
	color: #000000;
}

/* .main_search_detail {
	position: absolute;
	top: 31px;
	left: 980px;
	width: 168px;
	height: 63px;
	background-color: #3985ff;
	border: 1px solid #276fe5;
	color: #ffffff;
	text-align: center;
	line-height: 63px;
	border-radius: 63px;
}

.main_search_detail:hover {
	background-color: #0056e1;
	border: 1px solid #274ce5;
	color: #ffffff;
} */

#main_menu {
	width: 100%;
	height: 59px;
	background-color: #0056e1;
}

.main_menu_list ul {
	overflow: hidden;
	width: 100%;
}

.main_menu_list li {
	float: left;
	font-size: 20px;
	margin-right: 42px;
	line-height: 57px;
}

.main_menu_list li a {
	color: #ffffff;
}

.main_menu_list li a:hover {
	color: #ffff00;
}

.main_menu_list .view_guide {
	float: right !important;
	margin-right: 0;
}
.main_menu_list .view_guide a {	
	border-radius: 50px;
	border: 1px solid #276fe5;
	color: #ffffff;
	padding: 6px 30px 8px;
	box-sizing: border-box;
	background-color: #3985ff;
}
.main_menu_list .view_guide a:hover {	
	background-color: #014cc3;
	border: 1px solid #0046b5;
	color: #ffffff;
}


#main_banner {
	width: 100%;
	text-align: center !important;
	margin: 10px auto 0 !important;
	/* margin-top: 10px; */
}

.main_title {
	text-align: left;
	font-size: 29px;
}

.main_subtitle {
	font-size: 16px;
	margin-left: 26px;
	font-weight: 400; 
	color: #676767;
}

html{
	overflow-x: hidden !important;
}

#main_banner {
	position: relative;
}

#main_banner .slider-wrapper {
	margin: 20px 0 110px;
	box-sizing: border-box;
	z-index: 1;
}

#main_banner .swiper {
	min-width: 1280px;
	/* height: 410px; */ /* 슬라이더 높이 고정 */
}

#main_banner .swiper-wrapper {
	overflow: visible;
}

#main_banner .swiper-wrapper .swiper-slide {
	width: 735px;  /* 각 슬라이드 고정 너비 */
	height: 410px; /* 슬라이더 높이 고정 */
	font-family: 'Noto Sans KR', "Malgun Gothic", "맑은 고딕", dotum, "돋움", sans-serif !important;
	background-color: #fff; /* 슬라이드 배경색 */
	border-radius: 15px; /* 모서리 둥글게 */
	/* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */ /* 부드러운 그림자 */
	display: flex;
	align-items: center;
	overflow: hidden;
	position: relative;
	border: 1px solid rgba(0,0,0,0.05);
}

#main_banner .swiper-wrapper .swiper-slide a {
	display: flex;
	width: 735px;  /* 각 슬라이드 고정 너비 */
	height: 410px; /* 슬라이더 높이 고정 */
}


#main_banner .swiper-wrapper .slide-content {
	display: flex;
	width: 100%;
	padding: 65px 75px; /* 슬라이드 내부 좌우 여백 */
}

#main_banner .swiper-wrapper .slide-left {
	flex: 1.5;
	display: flex;
	flex-direction: column; /* 세로 정렬 */
	/* justify-content: center; */
	padding-top: 37px;
}

#main_banner .swiper-wrapper .slide-left h2 {
	font-family: 'Noto Sans KR', "Malgun Gothic", "맑은 고딕", dotum, "돋움", sans-serif !important;
	font-size: 40px;
	font-weight: 700;
	color: #fff;
	letter-spacing: -1.5px;
	line-height: 50px;
	text-align: left;
	margin-bottom: 10px;
	word-break: keep-all;
}

#main_banner .swiper-wrapper .slide-left p {
	font-family: 'Noto Sans KR', "Malgun Gothic", "맑은 고딕", dotum, "돋움", sans-serif !important;
	font-size: 16px;
	font-weight: 400;
	color: #fff;
	text-align: left;
	margin-bottom: 20px;
}

#main_banner .swiper-wrapper .slide-right {
	flex: 1;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

#main_banner .swiper-wrapper .slide-right img {
	width: 195px;
	/* width: 206px; */
	height: 280px;
	box-shadow: none;
	/* box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.35); */
}

#main_banner .swiper-wrapper .slid-label {
	display: block;
	position: absolute;
	top: 0;
	left: 75px;
} 



/* Swiper Controls Custom */   /* 슬라이드 좌우 화살표 커스텀 */
#main_banner .swiper-button-prev,
#main_banner .swiper-button-next {
	margin-top: 0 !important;
	color: #666;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	background: rgba(255, 255, 255, 0.8);  /* 흰색 반투명 배경 */
	border-radius: 50%;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
	z-index: 10;
}

/* 마우스오버시 화살표 커스텀 */
#main_banner .swiper-button-prev:hover,
#main_banner .swiper-button-next:hover {
	color: #0056e1;
	font-weight: 700;
	background: rgba(255, 255, 255, 1);  /* 흰색 100% 적용 */
}

/* 화살표 아이콘 크기 줄이기 */
#main_banner .swiper-button-prev::after,
#main_banner .swiper-button-next::after {
	font-size: 16px; /* 화살표만 작게 */
}

/* 화살표 아이콘 크기 줄이기 */
#main_banner .swiper-button-next, #main_banner .swiper-button-prev {
    svg {
        height: 50% !important;
        object-fit: contain;
        transform-origin: center;
        width: 50% !important;
        fill: currentColor;
        pointer-events: none;
    }
}

/* 가운데 슬라이드 기준, 버튼 좌우 위치 조정 */
#main_banner .swiper-button-prev {
	left: calc(50% - 350px); /* 슬라이드 중심 기준 왼쪽 */
}

#main_banner .swiper-button-next {
	right: calc(50% - 350px); /* 슬라이드 중심 기준 오른쪽 */
}

/* 페이지네이션을 아래쪽 중앙 정렬 */
#main_banner .swiper-pagination {
	position: absolute;
	bottom: -49px;
	left: 0;
	right: 0;
	text-align: center;
}

#main_banner .swiper-pagination-bullet {
	background: #d8d8d8;
	opacity: 1;
	width: var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,10px));
	height: var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,10px));
}

/* 현재 활성화된 페이지네이션 점 색상 변경 */
#main_banner .swiper-pagination-bullet-active {
	background: #ff7900 !important;
}


#main_recent {
	width: 100%;
	height: 395px;
	background-color: #f6f6f6;
}


/*=== 배너광고 슬라이드 영역 ===*/
#banner_wrap {
	display: block;
	/* width: 100%; */   /* 가로 스크롤 없게 하려고 */
	height: 260px;
}
#banner_wrap .banner_slide_area {
	position: relative;
	width: 1280px !important;
	margin: 0 auto;
	overflow: hidden !important;
}
#banner_wrap .swiper-container { 
	padding-top: 83px;
	min-width: 1280px;
	height: 100%;
	border-radius: 0 !important;
	box-shadow: none !important;
}

#banner_wrap .swiper-slide {
	overflow: hidden;  /* 테두리 라운드에서 벗어난 부분 감춰주기 위해 필요 */
	border-radius: 22px;
	-webkit-border-radius: 22px;
	width: 305px;
	height: 120px;
	border: 1px solid rgba(121,176,221,1);
	box-sizing: border-box;
}
#banner_wrap .swiper-slide img{
	display: block;
	width: 305px;
	height: 120px;
	/* width: 100%;
	height: 100%; */
}
/* #banner_wrap .swiper-button-next {
	position: absolute;
    top: 50%;
	right:-60px;
	left:auto;
	margin-top: 7px;
    z-index: 10;
    cursor: pointer;
	background:url(/image/main/btn_next.png) no-repeat;
	width: 22px;
	height: 41px;
	background-size: 22px 41px;
	background-position:center;
	background-repeat:no-repeat;
}
#banner_wrap .swiper-button-next:hover {
	position: absolute;
    top: 50%;
	right:-60px;
	left:auto;
	margin-top: 7px;
    z-index: 10;
    cursor: pointer;
	background:url(/image/main/btn_next_over.png) no-repeat;
	width: 22px;
	height: 41px;
	background-size: 22px 41px;
	background-position:center;
	background-repeat:no-repeat;
} 
#banner_wrap .swiper-button-prev {
	position: absolute;
    top: 50%;
	left:-60px;
	right:auto;
	margin-top: 7px;
    z-index: 10;
    cursor: pointer;
	background:url(/image/main/btn_prev.png) no-repeat;
	width: 22px;
	height: 41px;
	background-size: 22px 41px;
	background-position:center;
	background-repeat:no-repeat;
}
#banner_wrap .swiper-button-prev:hover {
	position: absolute;
    top: 50%;
	left:-60px;
	right:auto;
	margin-top: 7px;
    z-index: 10;
    cursor: pointer;
	background:url(/image/main/btn_prev_over.png) no-repeat;
	width: 22px;
	height: 41px;
	background-size: 22px 41px;
	background-position:center;
	background-repeat:no-repeat;
} */

.my-custom-style {
	width: 150px !important;
	border: 0px !important;
	margin-right: 38px !important;
	background-color: transparent !important;
	height: 300px !important;
	display: flex !important;
	align-items: flex-start !important;
	border-radius: 0 !important;
}

.my-custom-style .thumb {
	width: 148px !important;
	height: 218px !important;
	border: 1px solid #dddddd !important;
	vertical-align: top !important;
	box-sizing: border-box;
}

.my-custom-style .book_txt {
	display: block;
	width: 140px;
	margin-top: 10px !important;
	vertical-align: top !important;
	line-height: 20px !important;
	font-size: 16px;
	text-align: center;
	text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

#main_footer {
	width: 100%;
	background-color: #e7e7e7;
	height: 280px;
	margin-top: 100px;
	text-align: center;
}

.logo_footer {
	margin-top: 38px;
	padding-bottom: 23px;
}

.logo_line {
	display: block;
	height: 126px;
	border-bottom: 1px solid #b6b6b6;
	margin-bottom: 40px;
}

.address {
	font-family: 'Noto Sans KR', "Malgun Gothic", "맑은 고딕", dotum, "돋움", sans-serif !important;
	font-size: 16px;
	margin-bottom: 7px;
}

.copyright {
	font-family: 'Noto Sans KR', "Malgun Gothic", "맑은 고딕", dotum, "돋움", sans-serif !important;
	font-size: 16px;
}

.footer_gap {
	padding-right: 40px;
	background-image: url(/image/main/footer_gap.gif);
	background-repeat: no-repeat;
	background-position: 20px 6px;
}

#main_list {
	width: 1158px;
	border: 1px solid #cccccc;
	min-height: 400px;
	padding: 60px 60px 100px;
	/* padding: 60px; */
	position: relative;
}

#main_list li {
	float: left;
	width: 50%;
	text-align: left;
	margin-top: 70px;
	position: relative;
	font-size: 20px;
	display: inline-block;
}

#main_list li:nth-child(1),
#main_list li:nth-child(2) {
	margin-top: 0px;
}

.btn_view_more {
	position: absolute;
    bottom: 30px;
    right: 30px;

	/* float: right;
	margin-top: 50px; */
}

.btn_view_more a {
	display: inline-block;
    padding: 8px 33px 10px 20px;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.5);
    background: #fff url(/image/sub/icon_plus_01.png) no-repeat;
    background-size: 13px 13px;
    background-position: 78px center;
    box-sizing: border-box;
}

.btn_view_more a:hover {
	border: 1px solid rgba(0,86,225,1);	
	background-color: #fff;
	box-sizing: border-box;
}



#book_listview {
	display: inline-block;
	width: 100%;
}

#book_listview ul {
	display: inline-block;
	width: 100%;
}

#book_listview ul li {
	float: left;
	width: 579px;
	text-align: left;
	margin-top: 70px;
	position: relative;
	font-size: 20px;
	display: inline-block;
}

.book-card {
  gap: 20px;
  position: relative;
}

.book-card .book_photo {
  border: 1px solid  #dddddd;
  max-width: 150px;
  max-height: 220px;
}

.book-info {
	font-size: 29px;
	width: 100%;
}

.book-info .book_detail {
	font-family: 'Noto Sans KR', "Malgun Gothic", "맑은 고딕", dotum, "돋움", sans-serif !important;
	position: absolute;
	font-size: 20px;
	bottom: 0px;
	/* top: 92px; */
	left: 172px;
	width: 375px;
	overflow: hidden;
}

.book-info h3 {
	font-family: 'Noto Sans KR', "Malgun Gothic", "맑은 고딕", dotum, "돋움", sans-serif !important;
    position: absolute;
	font-size: 29px;
	top: 0px;
	left: 172px;
	height: 100px;
	line-height: 40px;
	font-weight: 700;
	width: 375px;
	word-break: keep-all;
}

.book-info p {
	margin: 10px 0;
	font-size: 20px;
	line-height: 1.6em;
	width: 375px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.writer_gap {
	display: inline-block;
	font-size: 16px !important;
	font-weight: 500 !important;
	color: #606060;
	padding: 0 10px;
	vertical-align: text-bottom;
	/* vertical-align: top; */
	/* margin-top: -2px; */
}

.tag1 {
	display: inline-block;
	background-color: #1f88e5;
	color: #fff;
	font-size: 16px;
	padding: 2px 8px;
	margin-right: 13px;
	border-radius: 4px;
	width: 75px; 
	height: 28px;
	text-align: center;
	letter-spacing: 4px;
	line-height: 28px;
	font-weight: bold;
	font-family: 'Noto Sans KR', "Malgun Gothic", "맑은 고딕", dotum, "돋움", sans-serif !important;
	text-indent: 5px;
}

.tag2 {
	display: inline-block;
	background-color: #1976b3;
	color: #fff;
	font-size: 16px;
	padding: 2px 8px;
	margin-right: 13px;
	border-radius: 4px;
	width: 75px; 
	height: 28px;
	text-align: center;
	letter-spacing: 4px;
	line-height: 28px;
	font-weight: bold;
	font-family: 'Noto Sans KR', "Malgun Gothic", "맑은 고딕", dotum, "돋움", sans-serif !important;
	text-indent: 5px;
}


.tag3 {
	display: inline-block;
	background-color: #199db2;
	color: #fff;
	font-size: 16px;
	padding: 2px 8px;
	margin-right: 13px;
	border-radius: 4px;
	width: 75px; 
	height: 28px;
	text-align: center;
	letter-spacing: 4px;
	line-height: 28px;
	font-weight: bold;
	font-family: 'Noto Sans KR', "Malgun Gothic", "맑은 고딕", dotum, "돋움", sans-serif !important;
	text-indent: 5px;
}

#main_submenu {
	/* 25.06.11. 카테고리 메뉴 증가로 인한 수정 */
	display: block;
	width: 1280px;
	margin:58px auto 0;
	text-align: center;
	
	/* text-align: center;
	height: 124px; */
}

#main_submenu ul {
	/* 25.06.11. 카테고리 메뉴 증가로 인한 수정 */
	display: inline-block;

	/* margin-top: 21px;
	height: 103px; */	
}

#main_submenu li {
	float: left;
	margin-right: 14px;
	height: 50px;
	padding-bottom: 20px;  /* 25.06.11. 카테고리 메뉴 증가로 인한 수정 */

	/* padding-top: 37px; */	
}

#main_submenu li:last-child {
	margin-right: 0px;
}

.submenu_i {
	display: inline-block;
	height: 48px;
	padding-left: 18px;
	padding-right: 18px;
	border: 1px solid #d8d8d8;
	border-radius: 50px;
	font-size: 20px;
	line-height: 45px;
	background-color: #ffffff;
}

.submenu_i:hover {
	display: inline-block;
	height: 48px;
	padding-left: 18px;
	padding-right: 18px;
	border: 1px solid #0056e1;
	border-radius: 50px;
	font-size: 20px;
	line-height: 45px;
	background-color: #3985ff;
	color: #ffffff;
}

.submenu_i_on {
	display: inline-block;
	height: 48px;
	padding-left: 18px;
	padding-right: 18px;
	border: 1px solid #0056e1;
	border-radius: 50px;
	font-size: 20px;
	line-height: 45px;
	background-color: #3985ff;
	color: #ffffff;
}

.submenu_p {
	display: inline-block;
	height: 48px;
	padding-left: 18px;
	padding-right: 18px;
	border: 1px solid #d8d8d8;
	border-radius: 50px;
	font-size: 20px;
	line-height: 45px;
	background-color: #ffffff;
}

.submenu_p:hover {
	display: inline-block;
	height: 48px;
	padding-left: 18px;
	padding-right: 18px;
	border: 1px solid #f57025;
	border-radius: 50px;
	font-size: 20px;
	line-height: 45px;
	background-color: #ff7900 !important;
	color: #ffffff !important;
}

.submenu_p_on {
	display: inline-block;
	height: 48px;
	padding-left: 18px;
	padding-right: 18px;
	border: 1px solid #f57025;
	border-radius: 50px;
	font-size: 20px;
	line-height: 45px;
	background-color: #ff7900;
	color: #ffffff;
}

.submenu_p_off {
	display: inline-block;
	height: 48px;
	padding-left: 18px;
	padding-right: 18px;
	border: 1px solid #d8d8d8;
	border-radius: 50px;
	font-size: 20px;
	line-height: 45px;
	background-color: #ffffff;
	color: #000000 !important;
}

.submenu_k {
	display: inline-block;
	height: 48px;
	padding-left: 42px;
	padding-right: 42px;
	border: 1px solid #ffa423;
	border-radius: 50px;
	font-size: 20px;
	line-height: 45px;
	background-color: #fff265;
	/* background-color: #fff681; */
	color: #ff7a00;
	background-image: url(/image/main/submenu_icon.png), url(/image/main/submenu_icon.png);
	background-repeat: no-repeat;
	background-position: 10px 12px, 105px 12px;
	font-weight: bold;
}

.submenu_k_on {
	display: inline-block;
	height: 48px;
	padding-left: 42px;
	padding-right: 42px;
	border: 1px solid #ffa423;
	border-radius: 50px;
	font-size: 20px;
	line-height: 45px;
	background-color: #ffd681;
	color: #ff3a01;
	background-image: url(/image/main/submenu_icon.png), url(/image/main/submenu_icon.png);
	background-repeat: no-repeat;
	background-position: 10px 12px, 105px 12px;
	font-weight: bold;
}

.submenu_k:hover {
	display: inline-block;
	height: 48px;
	padding-left: 42px;
	padding-right: 42px;
	border: 1px solid #ffea825;
	border-radius: 50px;
	font-size: 20px;
	line-height: 45px;
	background-color: #ffd681;
	color: #ff3a01;
	background-image: url(/image/main/submenu_icon.png), url(/image/main/submenu_icon.png);
	background-repeat: no-repeat;
	background-position: 10px 12px, 105px 12px;
	font-weight: bold;
}


.submenu_star {
	/* 25.06.11. 카테고리 메뉴 증가로 인한 수정 */
	position: absolute;
    top: -36.5px;
    left: 50%;
    margin-left: -37px;
    background-image: url(/image/main/submenu_star.png);
    background-repeat: no-repeat;
    background-size: 76px 37px;
    width: 76px;
    height: 37px;

	/* background-image: url(/image/main/submenu_star.gif);
	background-repeat: no-repeat;
	background-position: 40px 1px; */
}

.nav_k:hover .submenu_ks {
	display: block;
}

.nav_k {
	position: relative;

	/* padding-bottom: 20px; */
}

.submenu_ks {
	display: none;
	position: absolute;
	width: 137px;
	margin-top: 10px;
	border: 1px solid #ffde27;
	background-color: #fff265;
	/* background-color: #fff681; */
	z-index: 2;
	border-radius: 20px;
}

.submenu_ks a {
	display: block;
	font-size: 18px;
	color: #ff7a01;
	font-weight: bold;
	border-bottom: 1px solid #fedf25;
	height: 40px;
	line-height: 40px;
}

.submenu_ks a:first-child {
	border-radius: 20px 20px 0px 0px;
}

.submenu_ks a:last-child {
	border-bottom: 0px;
	border-radius: 0px 0px 20px 20px;
}

.submenu_ks a:hover {
	background-color: #fedf25;
	color: #fe7900;
}

.list_label_list {
	position: absolute;
	top: 1px;
	left: 1px;
}

.banner_slide_area .list_label {
	position: absolute;
	width: 40px !important;
	height: 51px !important;
	top: 1px;
	left: 1px;
}

.main_total {
	position: relative;
}

.recent_total {
	position: absolute;
	right: 0px;
	top: 10px;
	display: inline-block;
	font-size: 12px;
	border: 1px solid #d8d8d8;
	width: 80px;
	height: 28px;
	line-height: 28px;
	border-radius: 30px;
	text-align: center;
	background-image: url(/image/main/ar_total.gif);
	background-repeat: no-repeat;
	background-position: 65px 9px;
	text-indent: -10px;
	background-color: #ffffff;
}

.book_detail_list>div {
	float: left;
	margin-right: 20px;
}

.recent_total:hover {
	border: 1px solid #0056e1;
}



#main_recent {
	width: 100%;
	background-color: #f6f6f6;
}

#recent_wrap {
	display: block;
	padding: 30px 15px;
}
#recent_wrap .recent_slide_area {
	position: relative;
	width: 100% !important;
	margin: 0 auto;
	overflow: hidden !important;
}
#recent_wrap .swiper-container { 
	min-width: 290px;
	height: 100%;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.my-custom-style2 {
	width: 74px !important;
	height: 130px !important;
	border: 0px !important;
	margin-right: 15px !important;
	background-color: transparent !important;	
	display: flex !important;
	align-items: flex-start !important;
	border-radius: 0 !important;
}

.my-custom-style2 .thumb {
	width: 74px !important;
	height: 109px !important;
	border: 1px solid #dddddd !important;
	vertical-align: top !important;
	box-sizing: border-box;
}

.my-custom-style2 .book_txt {
	display: block;
	width: 74px;
	margin-top: 5px !important;
	vertical-align: top !important;
	line-height: 20px !important;
	font-size: 10px;
	text-align: center;
	text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* .list_label {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 20px !important;
    height: 25px !important;
} */


#view_guide {
	width: 1280px;
	margin: 0 auto;
	text-align: center;
	position: relative;
}

.go_quiz_sample {
    display: inline-block;
	position: absolute;
	top: -90px;
    right: 0px;
    width: 300px;
    height: 70px;
    text-align: center;
    color: #ffffff;
    font-weight: 700;
    background-color: #0056e0;
    line-height: 70px;
    font-size: 19px;
}


/* 250618. 국신원 요청에 따른 추가 */
.list_view_option {
	display: block;
	width: 1280px;
	margin: 0 auto 5px;
	text-align: right;
	clear: both;
}

.btn_recent {
	display: inline-block;
	font-size: 16px;
	font-weight: 400;
	color: #7c7c7c;
}

.btn_recent.on {
	font-weight: 700;
	color: #ff7900;
}

.btn_published {
	display: inline-block;
	font-size: 16px;
	font-weight: 400;
	color: #7c7c7c;
}

.btn_published.on {
	font-weight: 700;
	color: #ff7900;
}

.btn_most_viewed {
	display: inline-block;
	font-size: 16px;
	font-weight: 400;
	color: #7c7c7c;
}

.btn_most_viewed.on {
	font-weight: 700;
	color: #ff7900;
}

.btn_gap {
	display: inline-block;
	font-size: 10px !important;
	font-weight: 500 !important;
	color: #707070;
	margin: 0 2px 0 8px;
	vertical-align: middle;
    margin-top: -5px;
}


/*=== 서재 사용안내 가이드 애니메이션 ===*/
#guide_animation_wrap {
	display: block;
	width: 1280px;
	height: 1302px;
	background: url(/image/sub/guide_scene/guide_bg_default.jpg) no-repeat;
	position: relative;
	overflow: hidden;
}

/* scene_04-2부터 배경을 가리도록 추가된 CSS */
#guide_animation_wrap.hide-background {
    background: none !important;
}

.scene_01-1, .scene_01-2, .scene_02-1, .scene_02-2, .scene_03-1, .scene_03-2  {
	width: 1280px;
	height: 1302px;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: opacity 1s ease-in-out;
}

.scene_04-1, .scene_04-2, .scene_04-3, .scene_05-1, .scene_05-2, .scene_06-1  {
	width: 1280px;
	height: 1302px;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: opacity 1s ease-in-out;
}

.scene_01-1 {
	background: url(/image/sub/guide_scene/guide_scene_01_black_bg.png) no-repeat;
}

.scene_01-2 {
	background: url(/image/sub/guide_scene/guide_scene_01_popup.jpg) no-repeat;
}

.scene_02-1 {
	background: url(/image/sub/guide_scene/guide_scene_02_black_bg.png) no-repeat;
}

.scene_03-1 {
	background: url(/image/sub/guide_scene/guide_scene_03_black_bg.png) no-repeat;
}

.scene_03-2 {
	background: url(/image/sub/guide_scene/guide_scene_03_popup.jpg) no-repeat;
}

.scene_04-1 {
	background: url(/image/sub/guide_scene/guide_scene_05_black_bg_01.png) no-repeat;
}

.scene_04-2 {
	background: url(/image/sub/guide_scene/guide_scene_05_bg_01.jpg) no-repeat;
}

.scene_04-3 {
	background: url(/image/sub/guide_scene/guide_scene_05_bg_02.jpg) no-repeat;
}

.scene_05-1 {
	background: url(/image/sub/guide_scene/guide_scene_06_bg_01.jpg) no-repeat;
}

.scene_05-2 {
	background: url(/image/sub/guide_scene/guide_scene_06_bg_02.jpg) no-repeat;
}

.scene_06-1 {
	background: url(/image/sub/guide_scene/guide_scene_07_bg_01.jpg) no-repeat;
}



.scene_01-1 img, .scene_01-2 img {
	opacity: 0;
	transition: opacity 1s ease-in-out;
	position: absolute;
}

.scene_02-1 img, .scene_02-2 img {
	opacity: 0;
	transition: opacity 1s ease-in-out;
	position: absolute;
}

.scene_03-1 img, .scene_03-2 img {
	opacity: 0;
	transition: opacity 1s ease-in-out;
	position: absolute;
}


.scene_04-1 img, .scene_04-2 img, .scene_04-3 img {
	opacity: 0;
	transition: opacity 1s ease-in-out;
	position: absolute;
}

.scene_05-1 img, .scene_05-2 img {
	opacity: 0;
	transition: opacity 1s ease-in-out;
	position: absolute;
}

.scene_06-1 img {
	opacity: 0;
	transition: opacity 1s ease-in-out;
	position: absolute;
}

/*=== 이미지 위치 ===*/
/* 도서 크게 보기 이미지들 */
.scene_01-1_img_01 { top: 545px; left: 215px; z-index: 2; }  /* 마우스커서 손 */
.scene_01-1_img_02 { top: 515px; left: 175px; z-index: 1; }  /* 점선 박스 */
.scene_01-1_img_03 { top: 528px; left: 520px; }  /* 클릭 글자 흰색 */

.scene_01-2_img_01 { top: 468px; left: 101px; }  /* 왼쪽 화살표 설명 */
.scene_01-2_img_02 { top: 468px; right: 99px; }  /* 오른쪽 화살표 설명 */
.scene_01-2_img_03 { top: 82px; right: 67px; }  /* 팝업 닫기 설명 */
.scene_01-2_img_04 { top: 69px; right: 57px; }  /* 마우스커서 손 */
.scene_01-2_img_05 { top: 57px; right: 96px; }  /* 클릭 글자 검정색 */

/* 찜하기 이미지들 */
.scene_02-1_img_01 { top: 91px; right: 109px; }  /* 마우스커서 손 */
.scene_02-1_img_02 { top: 59px; right: 91px; }  /* 점선 원 */
.scene_02-1_img_03 { top: 31px; right: 98px; }  /* 클릭 글자 흰색 */

.scene_02-2_img_01 { top: 71px; right: 103px; }  /* 찜아이콘 온 */
.scene_02-2_img_02 { top: 171px; right: 176px; }  /* 얼랏창 */

/* 공유하기 이미지들 */
.scene_03-1_img_01 { top: 91px; right: 66px; }  /* 마우스커서 손 */
.scene_03-1_img_02 { top: 59px; right: 48px; }  /* 점선 원 */
.scene_03-1_img_03 { top: 31px; right: 56px; }  /* 클릭 글자 흰색 */

.scene_03-2_img_01 { top: 209px; right: 98px; }  /* 마우스커서 손 */
.scene_03-2_img_02 { top: 209px; right: 128px; }  /* 클릭 글자 검정색 */


/* 퀴즈 풀기 전 평점 입력 이미지들 */
.scene_04-1_img_01 { top: 487px; right: 591px; }  /* 마우스커서 손 */
.scene_04-1_img_02 { top: 444px; right: 252px; }  /* 설명 박스 */
.scene_04-1_img_03 { top: 420px; right: 520px; }  /* 점선 박스 */
.scene_04-1_img_04 { top: 458px; right: 195px; }  /* 클릭 글자 흰색 */

.scene_04-2_img_01 { top: 520px; right: 620px; }  /* 마우스커서 손 */
.scene_04-2_img_02 { top: 0px; right: 0px; }  /* 설명 배경 */
.scene_04-2_img_03 { top: 477px; right: 150px; }  /* 설명 박스 1 */
.scene_04-2_img_04 { top: 622px; right: 414px; }  /* 설명 박스 2 */
.scene_04-2_img_05 { top: 421px; right: 378px; }  /* 점선 박스 */
.scene_04-2_img_06 { top: 490px; right: 94px; }  /* 클릭 글자 흰색 */

.scene_04-3_img_01 { top: 772px; right: 620px; }  /* 마우스커서 손 */
.scene_04-3_img_02 { top: 0px; right: 0px; }  /* 설명 배경 */
.scene_04-3_img_03 { top: 714px; right: 109px; }  /* 설명 박스 1 */
.scene_04-3_img_04 { top: 800px; right: 414px; }  /* 설명 박스 2 */
.scene_04-3_img_05 { top: 673px; right: 376px; }  /* 점선 박스 */
.scene_04-3_img_06 { top: 728px; right: 52px; }  /* 클릭 글자 흰색 */

/* 퀴즈 풀기 이미지들 */
.scene_05-1_img_01 { top: 447px; left: 307px; }  /* 설명 박스 1 */
.scene_05-1_img_02 { top: 921px; right: 199px; z-index: 3; }  /* 마우스커서 손 */
.scene_05-1_img_03 { top: 871px; right: 160px; z-index: 1; }  /* 다음 버튼 온 */
.scene_05-1_img_04 { top: 787px; right: 50px; }  /* 설명 박스 2 */
.scene_05-1_img_05 { top: 863px; right: 151px; z-index: 2; }  /* 점선 박스 */
.scene_05-1_img_06 { top: 892px; right: 95px; }  /* 클릭 */

.scene_05-2_img_01 { top: 550px; left: 303px; }  /* 설명 박스 1 */
.scene_05-2_img_02 { top: 722px; left: 28px; }  /* 설명 박스 2 */
.scene_05-2_img_03 { top: 730px; left: 276px; }  /* 설명 박스 3 */
.scene_05-2_img_04 { top: 921px; right: 199px; z-index: 2; }  /* 마우스커서 손 */
.scene_05-2_img_05 { top: 787px; right: 50px; }  /* 설명 박스 4 */
.scene_05-2_img_06 { top: 863px; right: 151px; z-index: 1; }  /* 점선 박스 */
.scene_05-2_img_07 { top: 892px; right: 95px; }  /* 클릭 */


/* 퀴즈 풀기 결과 이미지들 */
.scene_06-1_img_01 { top: 741px; right: 59px; }  /* 설명 박스 1 */
.scene_06-1_img_02 { top: 1045px; left: 219px; }  /* 설명 박스 2 */
.scene_06-1_img_03 { top: 1045px; left: 385px; }  /* 설명 박스 3 */
.scene_06-1_img_04 { top: 83px; right: 109px; z-index: 2; }  /* 설명 박스 4 */
.scene_06-1_img_05 { top: 20px; right: 143px; z-index: 1; }  /* 화살표 애니메이션 */

/* 등장 효과 */
.fade-in {
	opacity: 1 !important;
	transition: opacity 1s ease-in;
}

.fade-out {
	opacity: 0 !important;
	transition: opacity 0.75s ease-in-out;
}

/* 깜빡임 애니메이션 */
@keyframes blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
}
.blink-4 {
	animation: blink 1s ease-in-out 4 forwards;
	/* animation: blink 1s ease-in-out 4; */
}

/* 커서 애니메이션: 아래쪽에서 현재 위치로 이동하며 등장 */
@keyframes cursor-move-in-1 {
	from {
		opacity: 0;
		transform: translateY(50px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
.cursor-animate-1 {
	animation: cursor-move-in-1 1s ease forwards;
}

/* 커서 애니메이션: 아래쪽에서 현재 위치로 이동하며 등장 */
@keyframes cursor-move-in-2 {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
.cursor-animate-2 {
	animation: cursor-move-in-2 1s ease forwards;
}


/* 화살표 애니메이션: 위쪽에서 현재 위치로 이동하며 등장 */
@keyframes down-move-in-1 {
	from {
		opacity: 0;
		transform: translateY(-50px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
.down-animate-1 {
	animation: down-move-in-1 1s ease forwards;
}

/* 화살표 애니메이션: 아래쪽에서 현재 위치로 반복 */
@keyframes arrow-move-in-1 {
	0% {
		opacity: 0;
		transform: translateY(100px);
	}
	50% {
		opacity: 1;
		transform: translateY(0);
	}
	100% {
		opacity: 0;
		transform: translateY(100px);
	}
}

.arrow-animate-1 {
	animation: cursor-move-in-1 1s ease-in-out infinite;
}