@charset "euc-kr";

*{margin: 0; padding: 0;}

body {
	margin: 0 auto;
	font-family:'Malgun Gothic';
}

ul, ol, li {text-decoration: none; list-style: none;}

#LB_content>div {width: 100%;}

@font-face {
  font-family: 'RixBGoPMA';
  src: url('/include/LB/font/RixBGoPMA.eot');
  src: url('/include/LB/font/RixBGoPMA.eot?#iefix') format('embedded-opentype'),
       url('/include/LB/font/RixBGoPMA.svg#RixBGoPMA') format('svg'),
       url('/include/LB/font/RixBGoPMA.ttf') format('truetype'),
       url('/include/LB/font/RixBGoPMA.woff') format('woff'),
       url('/include/LB/font/RixBGoPMA.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

/****************************ÀüÃ¼Àû µðÀÚÀÎ***************************/

#LB_title {
	height: 80px;
	background: url("./img/title.jpg") no-repeat 0 0;
	background-size: cover;
	overflow: hidden;
	text-align: center;
}

#LB_title h1 span {display: none;}

/****************************title µðÀÚÀÎ***************************/

#LB_tab {
	height: 80px;
	overflow: hidden;
	border-bottom: 1px solid #ccc;
}

.LB_tabs {float: left;}

#LB_tab input {display: none;}

#LB_tab label {
	cursor: pointer;
	font-weight: bold;
}

.LB_all-list {
	display: inline-block;
	width: 200px;
	height: 80px;
	color: #263576;
	line-height: 80px;
	font-size: 17px;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	position: relative;
	float: left;
}

.LB_all-list:before {
  content: '';
  position: absolute;
  border: white solid 3px;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  opacity: 0;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: opacity;
  transition-property: opacity;
}

.LB_all-list img {width: 35px; vertical-align: middle;}

.LB_button {
	display: inline-block;
	text-align: center;
	line-height: 70px;
	font-size: 15px;
	float: left;
	color: #263576;
}

.LB_all-list:hover, .LB_button:hover { background: #eee; }

.LB_button_1, .LB_button_2, .LB_button_3 {
	width: 260px;
	height: 40px;
	line-height: 40px;
}

.LB_button_4, .LB_button_5, .LB_button_6, .LB_button_7 {
	width: 195px;
	height: 40px;
	line-height: 40px;
}

input#LB_all-check:checked~.LB_all-list,
input#LB_tab_1:checked~.LB_button_1,
input#LB_tab_2:checked~.LB_button_2,
input#LB_tab_3:checked~.LB_button_3,
input#LB_tab_4:checked~.LB_button_4,
input#LB_tab_5:checked~.LB_button_5,
input#LB_tab_6:checked~.LB_button_6,
input#LB_tab_7:checked~.LB_button_7 {color: #fff;}


input#LB_all-check:checked~.LB_all-list:before {opacity: 1;}
input#LB_all-check:checked~.LB_all-list, 
input#LB_tab_1:checked~.LB_button_1,
input#LB_tab_2:checked~.LB_button_2, 
input#LB_tab_3:checked~.LB_button_3, 
input#LB_tab_4:checked~.LB_button_4, 
input#LB_tab_5:checked~.LB_button_5, 
input#LB_tab_6:checked~.LB_button_6,
input#LB_tab_7:checked~.LB_button_7 {background: #263576;}


/****************************tab µðÀÚÀÎ***************************/
#LB_box-list {
	padding: 30px 7.5px 0;
	overflow: hidden;
}

#LB_box-list li {
	width: 230px;
	height: 235px;
	border: 1px solid #999;
	border-radius: 10px;
	box-sizing: border-box;
	float: left;
	margin: 0 15px 30px 0;
	text-align: center;
	position: relative;
	letter-spacing: 0.04em;
	overflow: hidden;
}

#LB_box-list li:nth-child(4n) {margin-right: 0;}

#LB_box-list li img.LB_back_bg {
	width: 230px;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: -1;
	transition: all 0.5s;
}

#LB_box-list li:hover img.LB_back_bg {width: 280px;}

#LB_box-list li:hover {border: 3px solid #5b6cb6;}

#LB_box-list li .LB_explain {
	width: 100%;
	height: 70px;
	box-sizing: border-box;
	text-align: left;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

#LB_box-list li:hover .LB_explain {
	width: 232px;
	position: absolute;
	top: -2px;
	left: -2px;
}

#LB_box-list li .LB_explain p{
	border-left: 3px solid #fff;
	margin: 10px 0 10px 20px;
	line-height: 25px;
	height: 50px;
	font-size: 16px;
	letter-spacing: 0.05em;
	color: #fff;
	padding-left: 15px;
	cache-control: no-store;
	font-family: 'RixBGoPMA';
}

#LB_box-list li .LB_explain {background: #5b6cb6;}

#LB_box-list li .LB_detail {
	width: 100%;
	height: 135px;
	position: absolute;
	top: 70px;
	left: 0;
	overflow: hidden;
	z-index: 1;
	color: #000;
}

#LB_box-list li:hover .LB_detail {
	height: 135px;
	position: absolute;
	top: 68px;
	overflow: hidden;
	z-index: 1;
	color: #000;
}

#LB_box-list li h3 {
	border-top: 1px solid #fff;
	font-size: 20px; 
	font-weight: bold; 
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	line-height: 34px;
	padding-top: 3px;
	width: 228px;
	position: absolute;
	top: 0;
	left: 0;
}

#LB_box-list li:hover h3 {left: -2px;}

#LB_box-list li .LB_teacher {
	width: 100px;
	text-align: center;
	font-size: 13px;
	line-height: 15px;
	position: absolute;
	bottom: 15px;
	left: 65px;
	background: rgba(255, 255, 255, 0.75);
	padding-bottom: 5px;
	font-weight: bold;
}

#LB_box-list li:hover .LB_period,
#LB_box-list li:hover .LB_teacher {left: 63px;}

.LB_medal {
	position: absolute;
	top: 0px;
	right: 5px;
	z-index: -1;
	display: none;
}

#LB_box-list li:hover .LB_medal {
	position: absolute;
	top: 0px;
	right: 3px;
}

#LB_box-list li .LB_period_4 {color: #ff0000;}
#LB_box-list li .LB_period_5 {color: #0000ff;}
#LB_box-list li .LB_period_6 {color: #006600;}

.LB_period {
	width: 100px;
	font-size: 18px;
	text-align: center;
	position: absolute;
	bottom: 35px;
	left: 65px;
	font-weight: bold;
	background: rgba(255, 255, 255, 0.75);
}

.LB_period span {font-size: 30px;}

.LB_period img {width: 80px;}

.LB_more {
	width: 100%;
	height: 28px;
	line-height: 28px;
	color: #fff;
	font-size: 15px;
	letter-spacing: 2px;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1000;
	font-weight: bold;
	transition-property: color, background-color; 
	transition-duration: 0.3s;
}

#LB_box-list li .LB_more  {
	background: #5b6cb6;
	box-sizing: border-box;
}

#LB_box-list li:hover .LB_more {
	border-top: 2px solid #5b6cb6;
	color: #5b6cb6;
	background: #fff;
}

/****************************box-list µðÀÚÀÎ***************************/