@charset "UTF-8";

/* 슬라이더 박스 */
.vi_top { position: relative; z-index: 1; }

/* 상단슬라이더 */
#main .pc_v{ overflow: hidden; }
#main .mob_v{ display: none; }

.pc_v .slick-dots,
.mob_v .slick-dots{ bottom: 30px; padding: 0 20px; text-align: right; }
.pc_v .slick-dots li,
.mob_v .slick-dots li { width: 20px; height: 20px; }
.pc_v .slick-dots li button,
.mob_v .slick-dots li button { width: 20px; height: 20px; border: 5px solid #fff; border-radius: 50px; }
.pc_v .slick-dots li.slick-active button,
.mob_v .slick-dots li.slick-active button { background: #fff; }
.pc_v .slick-dots li button:before,
.mob_v .slick-dots li button:before { display: none; }

@media (max-width:991px) {
	#main .pc_v{ display: none; }
	#main .mob_v{ display: block; overflow: hidden; background: #ebf0f7; }
}

/* 로그인 박스 */
.login_box { display: flex; flex-direction: column; align-items: flex-end; gap: 30px; position: absolute; bottom: 50%; transform: translate(0, 50%); left: 0; right: 0; z-index: 999; margin: 0 auto; padding: 0 15px; }
.login_box .in_box { width: 340px; padding: 10px 20px; border-radius: 20px; background: #fff; }

/* 로그인전 */
.login_box .out li { padding: 5px 0; text-align: center; }
.login_box .out input { border: 0; border-top: 1px solid #dbdcdd; }

/* 로그인 후 */
.login_box .log li { padding: 10px 0; }
.login_box .in_01 { display: flex; gap: 5px; align-items: center; }
.login_box .in_01 i { font-size: 3em; line-height: 1; color: #a4a4a4; }
.login_box .in_01 .btn_out { margin-left: auto; color: #f15a25; text-decoration: underline; }
.login_box .btn_go { display: block; width: 100%; padding: 10px 0; text-align: center; }
.login_box .time_out { text-align: center; }

.ban_login { display: flex; gap: 10px; width: 340px; }
.ban_login li { width: calc(50% - 5px); text-align: center; }
.ban_login a { display: block; padding: 10px; color: #fff; border-radius: 10px; background: rgba(0,0,0,0.7); }

@media (max-width:991px) {
	.login_box { align-items: center; position: relative; transform: translate(0, 0); padding-bottom: 20px; background: #ebf0f7; }
	.login_box .in_box { margin-top: -20px; }
	.ban_login { display: none; }
}

@media (min-width: 768px) {
  .login_box { width: 750px; }
}
@media (min-width: 992px) {
  .login_box { width: 970px; }  
}
@media (min-width: 1200px) {
  .login_box { width: 1170px; }
}

/* 베너 */
.ban_box { padding: 30px 0; }
	.ban_box p { font-size: 0.8em; text-align: center; }
	.ban_box img { margin: 0 auto; }

/* 베스트 컨텐츠 */
.product { padding: 5% 0; border-top: 1px solid #eee; }
	.product .title { padding: 0 0 20px 0; text-align: center; }
	.product .list a { display: block; padding: 5px; }
	.product .list .img { position: relative; display: flex; justify-content: center; align-items: center; height: 180px; overflow: hidden; }
	.product .list .img span { position: absolute; top: 0; right: 0; padding: 2px 5px 2px 10px; color: #fff; }
	.product .list .img img { width: 100%; }
	.product .list h5{ padding: 10px 10px 3px 10px;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.product .list p{ padding: 0 10px 10px 10px; }
@media (max-width:991px) {
	.product .list .slick-list{ margin: 0 -15px; padding: 0 100px 0 0 !important; }
}

/* 리뷰 */
.review_box { padding: 5% 0; border-top: 1px solid #eee; }
	.review_box h3 { padding: 0 0 5rem 0; text-align: center; }
	.review_box ul { display: flex; gap: 20px; }

/* 공지사항 */
.board_box { padding: 4% 0; background: url(../../img/00_main/board_bg.png) no-repeat; }
.board_box > div { display: flex; flex-wrap: wrap; gap: 20px; }
.board_box > div:before,
.board_box > div:after { display: none; }

.board_box .title { width: 100%; color: #fff; }

.board_box .board ,
.board_box .call { width: calc(50% - 15px); padding: 20px; border-radius: 10px; background: #fff; }

.board ul { overflow: hidden; }
	.board li { float: left; width: 33.3%; text-align: center; }
	.board li:nth-child(1){ border-right: 1px solid #ccc; }
	.board li:nth-child(3){ text-align: right; border: 0; }
	.board li button{ display: block; width: 100%; height: 3em; line-height: 3em; text-align: center; font-weight: 700; background: #fff; }
	.board li:nth-child(3) a{ height: 1em; line-height: 1.5em; font-size: 1.7em; }
	.board li button:hover{ color: #565cf8; }
	.board .on button{ color: #565cf8; }
	.board > div { padding: 5px; }
	.board table th{ padding: 5px 10px; font-weight: 400; }
	.board table th a { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.board table th a:hover { text-decoration: underline; }
	.board table td{ padding: 5px 10px; text-align: right; }

.call { padding: 16px; background: #f3f2f8; }
	.call > div { padding: 0 0 15px 0; }
	.call h2{ padding: 7px 0; font-size: 1.75em; }
	.call ul{ padding-top: 30px; }
	.call a{ display: block; text-align: center; height: 50px; line-height: 50px; }
	.call a:hover { opacity: 0.9; }
	.call .bg01 { color: #fff; background: #a8abf8; }
	.call .bg02 { color: #fff; background: #dbdae8; }

.board_box .ban_list { display: flex; justify-content: center; gap: 10px; padding: 10px; width: 100%; border-radius: 10px; background:#efebde; }
	.board_box .ban_list li { padding: 0 40px; border-left: 1px solid #f15a25; }
	.board_box .ban_list li:nth-child(1) { border-left: 0; }
	
@media (max-width:991px) {
	.board_box { padding: 0; background: none; }
	.board_box .board ,
	.board_box .call { width: 100%; padding: 0; }
	.board_box .call { padding: 10px; border: 1px solid #ccc; }
	.board_box .ban_list { display: none; }
}

/* 하단 배너 */
.f_wrap { padding: 10px 0; }