/* layout */
body {background:#51b0dc; background:url(../img/header_bg.jpg) repeat-x center top;}
#header { width:100%; height:80px;background:#51b0dc; }
#tit { width:100%; background:#fff; border-bottom:1px solid #dedede;}
#contents { position:relative;}
#contents .container { border-left:1px solid #dedede;  border-right:1px solid #dedede;}
#cont-left { float:left; width:250px;}
#cont-center { overflow:hidden; margin-right:250px; min-height:1345px;  border-left:1px solid #dedede;  border-right:1px solid #dedede;}
#cont-right { position:absolute; right:0; top:0; width:250px;}
#footer { width:100%; height:200px; border-top:1px solid #dedede;}

/* container */
.container { width:1200px; margin:0 auto; position:relative; overflow:hidden;}

/* quick */
.quick { text-align:right;}
.quick a { display:inline-block; color:#fff; padding-left:10px; padding-top:5px;}
.quick a:hover { color:#ccc;}

/* title */
.title { text-align:center; padding-top:15px; backgound:#fff;}
.title h2 { font-size:24px; background-color:#51b0dc; text-transform:uppercase; color:#fff; display:inline; padding:10px 20px;}
.title h3 a { font-size:14px; background-color:#4a9abf; color:#fff; padding:10px 20px; display:inline-block; margin-top:-5px;
 text-transform:uppercase; transition:all 0.8s ease-out;}
 .title h3 a:hover { 
	box-shadow:
		300px 0 0 0 rgba(0,0,0,0.5) inset,
		-300px 0 0 0 rgba(0,0,0,0.5) inset; }

/* icon */ 
.icon { text-align:center; margin-top:30px;}
.icon li { display:inline;  margin:0 2px;}
.icon li a { width:57px; height:57px; background-color:#3192bf; display:inline-block; color:#fff; border-radius:50%;
transform:rotateY(0deg); transition:all 400ms ease-out;}
.icon li a:hover { transform:rotateY(180deg);}
.icon li i { font-size:35px; line-height:57px;}

/* nav */ 
.nav { padding:10px 0;}
.nav .html {}
.nav .html h4 { font-size:18px; color:#25a2d0; font-weight:bold;}
.nav .html ul { overflow:hidden;}
.nav .html li { float:left; width:15%; margin:0.1%; position:relative; padding-left:8px;
	-o-box-sizing:border-box; /* opera */
	-ms-box-sizing:border-box; /* ie */
	-moz-box-sizing:border-box; /* firefox */
	-webkit-box-sizing:border-box; /* sapari & chrome */
	box-sizing:border-box; /* w3c */
}
.nav .html li a {padding:3px; transition:all 0.5s; border-radius:2px;}
.nav .html li a:hover {background-color:#25a2d0; color:#fff; }
.ie7 .nav .html li { width:17%; background:url(../img/dot.gif) no-repeat 0 9px;}
.nav .html li:before { content:''; width:3px; height:3px; background-color:#499ce2; position:absolute; top:8px; left:0;}

/* tit */
.tit { position:relative; }
.tit h1 { font-size:39px; color:#2c94c4; letter-spacing:2px; text-align:center; padding:5px 0; font-family: 'Nanum Brush Script';}
.tit .btn { position:absolute; top:8px; right:10px;}
.tit .btn a { display:inline-block; width:57px; height:57px; background-color:#3192bf; border-radius:50%; color:#fff;
 font-size:37px; line-height:57px; text-align:center;}
 .tit .btn a i { line-height:57px;}

/* contents layout */
#contents .menu {border-bottom:0px solid #dbdbdb;}
#contents .h4 { font-size:20px; color:#2f7fa6;}
#contents .desc { border-bottom:1px dashed #dbdbdb; padding-bottom:15px; margin-bottom:15px; color:#878787;}
/* #contents .last {border-bottom:0;}
#cont-left div:last-child {border-bottom:0;}
#cont-center div:last-child {border-bottom:0;}
#cont-right div:last-child {border-bottom:0;} */
#contents div:last-child {border-bottom:0;}
#contents .last {border-bottom:0;}

/* menu */
.box {padding:15px; border-bottom:1px solid #dbdbdb;}
.menu ul li { position:relative;}
.menu ul li a {display:block; font-size:16px; font-weight:500; border-bottom:1px solid #dbdbdb; color:#787878; text-transform:uppercase; padding:10px;}
.menu ul li a i { position:absolute; top:17px; right:20px;}
.ie7 .menu ul {border-bottom:0px;}

/* Notice */
.notice {position:relative; margin-bottom:10px;}
.notice h5 {font-size:16px; color:#2f7fa6;}
.notice p {position:absolute; top:6px; right:8px;}
.notice p a {font-size:8px; color:#555;}
.notice p a i {margin-left:3px;}
.notice ul {}
.notice ul li {overflow:hidden; text-overflow:ellipsis; white-space:nowrap; position:relative; padding-left:8px;}
.notice ul li:before {content:''; width:3px; height:3px; background-color:#499ce2; position:absolute; top:9px; left:-1px;}

/* BLOG */
.blog {}

/* image */
.image ul {overflow:hidden;}
.image li {width:19%; float:left; margin:0.5%; font-size:0;}

/* VIDEO */
.ie7 .video {background:url(../img/fullimage1.jpg); width:100%; height:350px;}
.ie8 .video {background:url(../img/fullimage1.jpg);  width:100%; height:350px;}

/* footer */
.footer {text-align:center; padding:30px 30px;}
.footer ul {overflow:hidden; display:inline-block;}
.footer ul li {display:inline; padding:0 5px; margin:0 5px; position:relative; white-space:nowrap;}
.footer ul li:before {content:''; width:1px; height:10px; background-color:#ccc; position:absolute; top:5px; left:-5px;}
.footer ul li:first-child:before {width:0px; height:0px;}
.footer address {padding-top:10px;}
.footer address a {color:#444; font-family:Tahoma, Geneva, sans-serif; font-weight:bold; font-size:9px;}
.footer address a:hover { color:#009bc8;}

/* mediaquary */
@media screen and (max-width:1280px) {
	.container { width:95%;}
}

@media screen and (max-width:1024px) {
	.container { width:100%;}
	.quick { margin-right:10px;}
	.nav { padding:30px 15px;}
	#contents .container { border-left:0px;  border-right:0;}
}

@media screen and (max-width:960px) {
	.nav .html li { width:23%;}
	#cont-center { margin-right:0px; border-right:0px;}
	#cont-right { position:static; width:100%; border-top:1px solid #dedede; overflow:hidden;}
	#cont-right .box {float:left; width:33.3333%;
		-o-box-sizing:border-box; /* opera */
		-ms-box-sizing:border-box; /* ie */
		-moz-box-sizing:border-box; /* firefox */
		-webkit-box-sizing:border-box; /* sapari & chrome */
		box-sizing:border-box; /* w3c */}
	#cont-right .box7 {border-bottom:none; border-right:1px solid #dedede; border-left:none;}
	#cont-right .box8 {border-bottom:none; border-right:1px solid #dedede;}
	#cont-right .box9 {border-right:none;}
	.image li {width:24%;}
	.image li:nth-child(9) {display:none;}
	.image li:nth-child(10) {display:none;}
}

@media screen and (max-width:768px) {}

@media screen and (max-width:600px) {
	.nav .html li { width:31.3333%}
	#cont-left { float:none; width:100%; border-bottom:1px solid #dedede;}
	#cont-center { border-left:0px;}
	#cont-left div:nth-child(2) {background-color:#f1f4fb;}
}

@media screen and (max-width:480px) {
	.title {display:none;}
	.icon {display:none;}
	.nav {display:none;}
	.tit .btn a {display:none;}
	#header { height:27px;}
	#cont-left div:first-child h4 {display:none;}
	#cont-left div:first-child .desc {display:none;}
	#cont-left div:first-child {padding:0; border-bottom:0;}
	.box .menu ul {overflow:hidden;}
	.box .menu ul li {float:left; width:33.3333%; text-align:center;}
	.box .menu ul li a {color:#fff; border-right:1px solid; #dbdbdb;}
	.box .menu ul li a i { display:none; text-shadow:0 0 5px rgba(0,0,0,0.8);}
	/* .box .menu ul li:nth-child(3) a {border-right:0;}
	.box .menu ul li:nth-child(6) a {border-right:0;} */
	.box .menu ul li:nth-child(3n) a {border-right:0;}
	.image li {width:48%; margin:1%;}
	#cont-right .box7 {width:50%;}
	#cont-right .box8 {width:50%;}
	#cont-right .box9 {display:none;}
}

@media screen and (max-width:320px) {
	.image li {width:98%; margin:1%;}
	#cont-right .box7 {width:100%;}
	#cont-right .box8 {display:none;}
}