/* 怨듯넻 */
div,p,dl,dt,dd,table,th,td,form,fieldset,address,h1,h2,h3,h4,h5,h6,ul,ol,li {margin:0;padding:0;list-style:none;}
body {margin:0;padding:0;background:url(../img/bg.png);} 
a {color:#333;text-decoration:none;}


header{ background-color:#000;}
header .center{ position:relative; width:1660px; margin:0 auto; overflow:hidden; }
header .center .logo{ display:block; position:absolute; left:0; top:3px;}
header .center .logo img{ display:block; width:177px;}
header .center .textBox{text-align:center; margin:20px 0;}
header .center .textBox .text01{ font-size:25px; font-weight:bold; color:#fff;}
header .center .textBox .text02{ font-size:30px; font-weight:bold; color:#F00; margin-top:10px;}
#main_area{}
#main_area .center{ width:1660px; margin:40px auto;}
#main_area .center .banner_list01{ overflow:hidden;}
#main_area .center .banner_list01:after{ content:""; display:block; clear:both}
#main_area .center .banner_list01 li{ position:relative; float:left; width:820px; border:2px solid #444; box-sizing:border-box;}
#main_area .center .banner_list01 li:first-child{ margin-right:20px;}
#main_area .center .banner_list01 li .imgBox{ width:100%;}
#main_area .center .banner_list01 li .imgBox img{ display:block; width:100%;}
#main_area .center .banner_list01 li .over{ display:none; position:absolute; width:100%; height:100%; left:0; top:0; z-index:10; background-color:rgba(0,0,0,0.9); padding:55px 10px; box-sizing:border-box;}
#main_area .center .banner_list01 li .over p{ font-size:20px; font-weight:bold; color:#fff; margin-bottom:10px; text-align:center;}
#main_area .center .banner_list01 li:hover {border:2px solid #00ffff;animation-name:border-animation;animation-duration:1s;animation-iteration-count:100;}
#main_area .center .banner_list01 li:hover .over{ display:block;}
#main_area .center .banner_list02{ overflow:hidden; margin-top:30px;}
#main_area .center .banner_list02:after{ content:""; display:block; clear:both}
#main_area .center .banner_list02 li{ position:relative; float:left; width:400px; border:2px solid #444; background-color:#000; box-sizing:border-box; margin-right:20px; margin-bottom:20px;}
#main_area .center .banner_list02 li:nth-child(4n){ margin-right:0 !important;}
#main_area .center .banner_list02 li .title{ width:100%; padding:20px 0; box-sizing:border-box; font-size:30px; font-weight:bold; color:#fff; text-align:center;}
#main_area .center .banner_list02 li .imgBox{ width:100%; height:300px;}
#main_area .center .banner_list02 li .imgBox img{ display:block; width:100%;}
#main_area .center .banner_list02 li .contents{ width:100%; padding:20px 10px; box-sizing:border-box;}
#main_area .center .banner_list02 li .contents span{ font-size:20px; font-weight:bold; color:#fff; line-height:24px; text-align:center; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
#main_area .center .banner_list02 li .over{ display:none; position:absolute; width:100%; height:100%; left:0; top:0; z-index:10; background-color:rgba(0,0,0,0.9); padding:200px 10px; box-sizing:border-box;}
#main_area .center .banner_list02 li .over p{ font-size:15px; font-weight:bold; color:#fff; margin-bottom:10px; text-align:center;}
#main_area .center .banner_list02 li:hover {border:2px solid #00ffff;animation-name:border-animation;animation-duration:1s;animation-iteration-count:100;}
#main_area .center .banner_list02 li:hover .over{ display:block;}
footer{width:100%; padding:20px 0; background-color:#000; margin:30px 0 0;}
footer .copy{ font-size:14px; font-weight:bold; color:#444; text-align:center;}
/* �좊땲硫붿씠�� */
@keyframes border-animation {
	0%   {border-color:red;}
	25%  {border-color:yellow;}
	50%  {border-color:blue;}
	75%  {border-color:green;}
	100% {border-color:red;}
}
@media (max-width:768px) {
header .center{ width:100%; padding:0 10px; box-sizing:border-box}
header .center .logo{ position:static}
header .center .logo img{ width:100px; margin:0 auto}
header .center .textBox{ margin:20px 0;}
header .center .textBox .text01{ font-size:20px}
header .center .textBox .text02{ font-size:20px; margin-top:5px}

#main_area .center{ width:100%; padding:0 10px; box-sizing:border-box; margin-top:20px}
#main_area .center .banner_list01 li{ width:100%; margin-bottom:10px}
#main_area .center .banner_list02{ margin-top:20px}
#main_area .center .banner_list02 li{ width:100%;}
#main_area .center .banner_list02 li .title{ padding:15px 0;}
#main_area .center .banner_list02 li .imgBox{ height:auto}
#main_area .center .banner_list02 li .contents{ padding:10px}
#main_area .center .banner_list02 li .contents span{ font-size:20px;}
footer .copy{ font-size:20px;}
}
/*공통*/
.mb20{ margin-bottom:20px;}
.t_color { color:#222;}
.breadcrumb { position:absolute; right:0; font:12px "dotum", "돋움"; margin-top:-40px;}
	@media (max-width: 800px) {
		.breadcrumb { position:relative; margin-bottom:5px; margin-top:0;}
	}
.breadcrumb a { text-decoration:none; font-weight:bold;}
.breadcrumb .current { font-weight:bold; color:#222;}
/* 공통 하단 txt */
.ba_line03 { background-color:#ddd; position:relative; height:100%; width:100%; padding:30px 0 30px 0;}
.banner_box05 { width:960px; height:300px; background-color:#FFFFFF; margin:0 auto; border-radius:8px;}
	@media (max-width: 1280px) {
		.banner_box05 { width:800px;}
	}
		@media (max-width: 800px) {
			.banner_box05 { width:337px; height:100%;}
		}
.txt_box { width:31%; height:280px; padding:10px 20px 10px 10px; border-left:1px solid #ccc; float:left; border-radius:8px;}
	@media (max-width: 1280px) {
		.txt_box { width:235px;}
	}
		@media (max-width: 800px) {
			.txt_box { width:307px; height:280px; float:none; margin:0 auto; border-left:none; border-bottom:1px solid #ccc; }
		}
.txt_box2 { width:578px; height:280px; padding:10px 10px 10px 10px; border-left:1px solid #ccc; float:left; border-radius:8px;}
	@media (max-width: 1280px) {
		.txt_box2 { width:470px;}
	}
		@media (max-width: 800px) {
			.txt_box2 { width:307px; height:280px; float:none; margin:0 auto; border-left:none; border-bottom:1px solid #ccc;}
		}
.txt_box3 { width:290px; height:280px; padding:10px 20px 10px 30px; border-left:1px solid #ccc; float:left;}
	@media (max-width: 1280px) {
		.txt_box3 { width:245px; padding:10px 30px 10px 30px;}
	}
		@media (max-width: 800px) {
			.txt_box3 { width:290px; height:280px; float:none; margin:0 auto; padding:10px 25px 10px 25px; border-left:none; border-bottom:1px solid #ccc; }
		}
.txt_box_tit {font:24px "Nanum Gothic", "나눔고딕"; margin:10px 0 10px 0; width:100%; background-color:#10193a; padding:5px;}
.txt_box_tit2 {font:24px "Nanum Gothic", "나눔고딕"; margin:10px 0 10px 0; width:100%; color:#10193a;}
.txt_box_tit3 {font:15px "Nanum Gothic", "나눔고딕"; margin-bottom:10px;}
.txt_box_con {color:#fbfbfb; font:13px "dotum", "돋움"; letter-spacing:-0.5px; line-height:19px;}
.style1 {color: #af54c2}
.style2 {color: #15fcf4}
.style3 {color: #f5e923}