@charset "utf-8";

/* 내용관리 */


@keyframes fade-bottom-1 {
0% {
	transform: translateY(50px);
	opacity: 0;
	}
100% {
	transform: translateY(0);
	opacity: 1;
	}
}

@keyframes fade-bottom-2 {
0% {
	transform: translateY(60px);
	opacity: 0;
	}
100% {
	transform: translateY(0);
	opacity: 1;
	}
}

/* tab 일반 */
.board_list nav .tab {margin-bottom: -2px; }

.board_list>header .tab li {border-bottom:1px solid #f9f9f9}
.board_list>header .tab li:first-child a.active {border-right:1px solid #ddd; border-left:1px solid #ddd}
.board_list>header .tab li a {border:1px solid #ddd; padding: 12px 20px; background: #f9f9f9;}
.board_list>header .tab li a.active { background: #fff; border-bottom: 1px solid #fff; border-left:0; }



.board_list header .area { vertical-align: bottom; position: relative; z-index: 1;}
.board_list header .area::after { position: absolute; width: 100%; height: calc(100% - 1px); content: ""; top:0; right: 0px; z-index: -1;}
.board_list header .area nav { margin-top: 92px;}
.blind {position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);}

	/* 내용관리 */
.board_list {position: relative;}
.board_list header {font-size: 24px; height: 300px; background-color: #eee; font-weight: bold; padding: 0;  background: url(../../../theme/basic/img/bg_p2.png) no-repeat center center; background-size: cover;}
.board_list header .btn_set {position: absolute; top: 25px; right: 0; width: auto; z-index: 10; }
.board_list header h2 {position: relative; font-size: 34px; color: #fff; padding: 5px; margin-top: 100px;  margin-bottom: 10px; display: inline-block; background: rgba(0,0,0,0.3)}
.board_list header h2 img {margin-bottom: -8px;}
.board_list header p {display: inline-block; font-size: 14px; color: #bbb; line-height: 22px;  background: rgba(0,0,0,0.25)}
.board_list header h2 .btn_set {position: absolute; top:-20px; right: 0px;  font-size: 0;}

	/* tab 일반 */
	.board_list nav .tab {position: absolute; bottom: 0; margin-bottom: -2px; }
	.board_list>header .tab li {border-bottom:1px solid #f9f9f9}
	.board_list>header .tab li:first-child a.active {border-right:1px solid #ddd; border-left:1px solid #ddd}
	.board_list>header .tab li a {border:1px solid #ddd; padding: 12px 20px; background: #f9f9f9;}
	.board_list>header .tab li a.active { background: #fff; border-bottom: 1px solid #fff; border-left:0; }

	.board_list .container {margin: 120px auto;}
	.board_list .container .title {font-size: 26px; text-align: left; line-height: 160%; letter-spacing: -1px; animation-name: fade-bottom; margin-bottom: 100px;}
	.board_list .container .title p { animation: fade-bottom-1 1s ease-out; }
	.board_list .container .title p:nth-child(2) { animation: fade-bottom-2 1s ease-out;}
	
	section.ot { background: #f6eee8;}
	section.ot .area {display: flex; flex-wrap: wrap;  padding: 80px 0;}
	section.ot .img {display: flex; flex-wrap: wrap; gap:10px; width: 50%;}
	section.ot .img li {display: inline-block; border: 1px solid #ddd; margin-bottom: -1px; margin-left: -1px;}
	section.ot .img img { width: 180px; border: 0;}
	section.ot .info h3 {font-weight: bold; margin-bottom: 10px; color: #ff7f00;}
	section.ot .info li {margin-bottom: 10px;}
	
	.reaction { text-align: center;}
	.reaction h3 {font-weight: bold; margin-top: 40px; margin-bottom: 80px; color: #ff7f00;}
	.reaction h3 p {color: #555; font-size: 14px;}
	.reaction .img img { width: 480px; border: 0;}
	.reaction .img li {display: inline-block; border: 1px solid #ddd; margin-bottom: -1px; margin-left: -1px;}
	.reaction .img li:nth-child(2) img {width: 100px;}
	.reaction .img li:nth-child(3) img {width: 180px;}
	
	.refort h3 {font-size: 40px; margin: 130px 0 30px; color: #ff7f00; text-align: center;}
	.refort h3 p {font-size: 20px; margin-top: 10px; color: #333;}
	.refort .area{display: flex;}
	.refort .img {width: 60%;}
	.refort .img img {border: 1px solid #ddd;}
	.refort ul {width: 35%;}
	.refort li {margin-bottom: 20px;}
	.refort .num {display: inline-block; width: 25px; height: 25px; padding: 3px 0; text-align: center;background: #ff7f00; color: #fff; border-radius: 20px; margin-right: 5px;}
	
@keyframes fade-bottom-1 {
	0% { transform: translateY(50px); opacity: 0;}
	100% { transform: translateY(0); opacity: 1;}
}

@keyframes fade-bottom-2 {
	0% { transform: translateY(60px); opacity: 0;}
	100% {transform: translateY(0); opacity: 1;}
}