/* layout */
body {background: #f1f4fb url(../img/header_bg.jpg) repeat-x center top;}
#header { }
#nav {display: none; }
#nav.show {display: block;}
#tit {background-color: #fff; border-bottom: 1px solid #dbdbdb; }
#contents .container {border-right: 1px solid #dbdbdb; border-left: 1px solid #dbdbdb; }
#cont-left {float: left; width: 250px; }
#cont-center {overflow: hidden; min-height: 1350px; margin-right: 250px; border-right: 1px solid #dbdbdb; border-left: 1px solid #dbdbdb; }
#cont-right {width: 250px; position: absolute; right: 0; top: 0px;  }
#footer {width: 100%; height: 200px; border-top: 1px solid #dbdbdb  }

/* container */
.container {width: 1200px; margin: 0 auto; position: relative;  /* background: rgba(0,0,0,0.3) */ }

/* quick */
.quick {text-align: right;}
.quick a {display: inline-block; color: #fff; padding: 5px 0 4px 10px; transition: all 0.5s ease; }
.quick a:hover {color: #ccc;}

/* title */
.title {text-align: center; text-transform: uppercase; padding-top: 75px;}
.title p {display: inline; font-size: 24px; background-color: #51b0dc; color: #fff; padding: 10px 20px; }
.title h1 a {display: inline-block; color: #fff; background-color: #4a9abf; padding: 10px 20px; font-size: 14px; transition: all .3s ease-in-out; margin-top: -4px;}
.title h1 a:hover {
  box-shadow:
    0 0 0 3px rgba(75,154,191,0.9) inset,
    0 0 0 100px rgba(0,0,0,0.1) inset;
}

/* icon-font */
.icon-font {text-align: center; margin-top: 40px; padding-bottom: 40px;}
.icon-font li {position: relative; display: inline; }
.icon-font li a {display: inline-block; width: 60px; height: 60px; background-color: #3192bf; color: #fff; font-size: 35px; border-radius: 50%; margin: 0 3px; }
.icon-font li a .tool {opacity: 0; font-size: 12px; position: absolute; left: 50%; top: -70px; background-color: #3192bf; padding: 1px 7px; transform: translateX(-50%); border-radius: 6px 0; transition: all 0.3s ease-in-out;}
.icon-font li a:hover .tool {opacity: 1; top: -60px;}
.icon-font li a .tool:before {content: ""; position: absolute; bottom: -5px; left: 50%; margin-left: -5px;
	border-top: 5px solid #3192bf;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
}
.ie7 .icon-font {display: none;}
.ie8 .icon-font li a .tool {display: none;}

/* nav */
.nav {padding: 30px 0;}
.nav h2 {font-size: 16px; color: #25a2d0; padding-bottom: 5px;  }
.nav li {position: relative; float: left; width: 20%; padding-left: 8px; box-sizing: border-box; }
.nav li:before {content: ''; width: 3px; height: 3px; background-color: #25a2d0; position: absolute; left: 0; top: 8px; border-radius: 50%;}
.nav li a {padding: 3px; border-radius: 2px; transition: all .1s ease  }
.nav li a:hover {background-color: #25a2d0; color: #fff;}

/* tit */
.tit {text-align: center;  }
.tit h2 {font-size: 39px; color: #0093bd; font-family: 'Nanum Brush Script'; }
.tit .btn {position: absolute; right: 0; top: 3px;}
.tit .btn a {width: 60px; height: 60px; background-color: #4a9abf;font-size: 33px; line-height: 64px; border-radius: 50%; display: block; color: #fff;}


/* cbox */
.cbox {padding: 15px; border-bottom: 1px solid #dbdbdb;  }
.cbox .cbox-tit {font-size: 20px; color: #2f7fa6; text-transform: uppercase;  }
.cbox .cbox-desc {border-bottom: 1px dashed #dbdbdb; padding-bottom: 15px;margin-bottom: 15px; color: #878787;  }
.cbox.column3 {border-bottom: 0;}
.cbox.column6 {border-bottom: 0;}
.cbox.column9 {border-bottom: 0;}
.cbox.column9 img {display: block;}

/*#cont-left article:nth-child(4) {border-bottom: 0;}
#cont-center article:nth-child(4) {border-bottom: 0;}
#cont-right article:nth-child(4) {border-bottom: 0;}
#cont-left article:last-child {border-bottom: 0;}
#cont-center article:last-child {border-bottom: 0;}
#cont-right article:last-child {border-bottom: 0;}
#content article:nth-child(4) {border-bottom: 0;  }*/

/* menu */
.menu li {position: relative;}
.menu li a {font-size: 16px; text-transform: uppercase; color: #878787; border-bottom: 1px solid #dbdbdb; padding: 10px; display: block; transition: all .3s ease;} 
.menu li a:hover {color: #333;}
.menu li a i {position: absolute; right: 10px; top: 50%; transform: translateY(-50%);} 


/* notice */
.notice {position: relative;  }
.notice h5 {font-size: 14px; color: #2f7fa6;  }
.notice li {position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 8px;  }
.notice li:before {content: ''; width: 3px; height: 3px; background-color: #449ce2; position: absolute; left: 0; top: 8px; border-radius: 50%;}
.notice .more {position: absolute; right: 0px; top: 6px; text-transform: uppercase; font-size: 9px;  }
.notice .more a {color: #878787;}

/* blog */
.blog h5 {font-size: 14px; color: #2f7fa6; padding-bottom: 3px;  }
.blog .blog-img {position: relative; display: block; color: #fff; font-size: 16px; background-color: #dbdbdb; margin-bottom: 3px;}
.blog .blog-img:after {content: ''; position: absolute; left: 0; top:0; display: block; background: rgba(0,0,0,0); width: 100%; height: 100%; z-index: 50; transition: background 0.3s ease-in-out; }
.blog .blog-img:hover:after {background: rgba(0,0,0,0.4);}
.blog .blog-img img {display: block;  }
.blog .blog-img em {opacity: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 100;     }
.blog .blog-img:hover em {opacity: 1;}


/* blog2 */
.blog2 h5 {font-size: 14px; color: #2f7fa6; padding-bottom: 3px;  }
.blog2 .blog-img {position: relative; display: block; color: #fff;overflow: hidden; margin-bottom: 3px;}
.blog2 .blog-img:after {content: ''; width: 100%; height: 100%; display: block; position: absolute; left: 0; top: 0; background-color: rgba(0,0,0,0); z-index: 90; transition: all 0.3s ease-in-out;}
.blog2 .blog-img:hover:after {background-color: rgba(0,0,0,0.4);  }
.blog2 .blog-img img {display: block; transform: scale(1,1); transition: all 0.3s ease-in-out;  }
.blog2 .blog-img:hover img {transform: scale(1.5,1.5);   }
.blog2 .blog-img em {opacity: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 100; transition: all 0.3s ease-in-out; font-size: 0;}
.blog2 .blog-img:hover em {opacity: 1; font-size: 16px; }


/* square */
.square a {position: relative; float: left; width: 19%; margin: 0.5%; }
.square a img {display: block;}
.square a:before {/*content: attr(data-filter); position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background-color: rgba(0,0,0,0.5); color: #fff; width: 100%; height: 100%;*/}
.square a:nth-child(1) img:hover {filter : saturate(200%);}
.square a:nth-child(2) img:hover {filter : sepia(100%);}
.square a:nth-child(3) img:hover {filter : opacity(10%);}
.square a:nth-child(4) img:hover {filter : invert(80%);}
.square a:nth-child(5) img:hover {filter : hue-rotate(250deg);}
.square a:nth-child(6) img:hover {filter : grayscale(100%);}
.square a:nth-child(7) img:hover {filter : contrast(300%);}
.square a:nth-child(8) img:hover {filter : brightness(300%);}
.square a:nth-child(9) img:hover {filter : blur(3px)}
.square a:nth-child(10) img:hover {filter : saturate(8);}


/* video */
.video {position: relative; width: 100%; padding-bottom: 56.25%;  }
.video .iframe {border: 0; position: absolute; width: 100%; height: 100%;}

/* rotate */
.rotate {position: relative;  }
.rotate a {display: block; text-align: center; color: #fff; perspective: 600px;  }
.rotate a .front {transform: rotateY(0deg); transition: all 0.5s ease-in-out; backface-visibility: hidden; }
.rotate a .back {
	background-color: #0093bd; width: 100%; height: 100%; position: absolute; top: 0; z-index: -1; transform: rotateY(-180deg); transition: all 0.5s ease-in-out; backface-visibility: hidden;}
.rotate a:hover .front {transform: rotateY(180deg);}
.rotate a:hover .back {transform: rotateY(0deg); z-index: 1; }
.rotate a:hover figcaption {padding-top: 50%;}
.rotate img {display: block;}

/* rotate2 */
.rotate2 {position: relative; perspective: 500px; }
.rotate2 img {display: block;}
.rotate2 .txt {position: absolute; left: 50%; top:50%; transform: translate(-50%,-50%); opacity: 0; transition: all 0.3s ease-in-out; z-index: 1000; }
.rotate2:after {content: ''; 
	background-color: rgba(255,255,255,0.8); 
	position: absolute; z-index: 500;
	left: 10%; top: 7%; right: 10%; bottom: 7%; 
	display: inline-block;
	transform: rotateX(90deg);
	transition: all 0.3s ease-in-out;
	opacity: 0;
}
.rotate2:hover .txt {opacity: 1;}
.rotate2:hover:after {
	transform: rotateX(0deg);  
	opacity: 1;
}


/* footer */
.footer { text-align: center; padding: 30px 50px; }
.footer ul li { display: inline; padding: 0 7px; position: relative; white-space: nowrap;}
.footer ul li:before {content: ''; width: 1px;height: 10px; background-color:#dbdbdb; position: absolute;
left: 0;top: 2px;}
.footer ul li:first-child:before {width: 0;}
.footer address {padding-top: 15px; }
.footer .w3c img {width: 80px; margin-top: 15px;}





/* mediaquery */
@media (max-width: 1280px){
	.container {width: 100%;}
	.row {padding: 0 15px;}
	.tit .btn {margin-right: 15px;}
	#contents .container {border: 0;}
}
@media (max-width: 1024px){
	.nav li {width: 25%;}
}
@media (max-width: 960px){
	#cont-center {margin-right: 0; border-right: 0;}
	#cont-right {position: static; width: 100%; border-top: 1px solid #dbdbdb;}
	.square a {width: 24%;}
	.square a:nth-child(5n) {display: none;}
	#cont-right {overflow: hidden;}
	#cont-right .cbox {float: left; width: 33.33333%; box-sizing: border-box; }
	#cont-right .cbox.column7 {border-right: 1px solid #dbdbdb;  }
	#cont-right .cbox.column8 {border-right: 1px solid #dbdbdb;  }
  #cont-right .cbox.column9 {border-right: 1px solid transparent; border-bottom: 1px solid #dbdbdb;}

  #footer {border-top:0;}
}
@media (max-width: 768px){
	.nav li {width: 33.33333%;}
	.square a {width: 32.333333%;}
	.square a:nth-child(5) {display: block;}
}
@media (max-width: 600px){
	.title, .icon-font, .nav, .tit .btn {display: none;}
	#cont-left {float: none; width: 100%;} 
	#cont-center {border-left: 0; border-top: 1px solid #dbdbdb;}
	.cbox.column2 {background-color: #f1f4fb;}
	.cbox.column1 {padding: 0; border-bottom:0;}
	.cbox.column1 .cbox-tit {display: none;}
	.cbox.column1 .cbox-desc {display: none;}
	.cbox.column1 .menu li a i {display: none;}
	.cbox.column1 .menu ul {overflow: hidden;}
	.cbox.column1 .menu li {float: left; width: 33.3333%; border-right: 1px solid #dbdbdb; box-sizing: border-box; text-align: center; }
	.cbox.column1 .menu li:nth-child(3n) {border-right: 0;}
	.cbox.column1 .menu li a {color: #fff; text-shadow: 0 0 5px rgba(0,0,0,0.5);}
	.square a {width: 49%;}
	.square a:nth-child(5) {display: none;}

	#cont-right .cbox {width: 50%; }
	#cont-right .cbox.column7 {border-right: 1px solid #dbdbdb;  }
	#cont-right .cbox.column8 {border-right: 1px solid transparent;  }
  #cont-right .cbox.column9 {display: none;}
}
@media (max-width: 480px){
	
}
@media (max-width: 320px){
	.square a {width: 98%; margin: 1%;}
	#cont-right .cbox {width: 100%; }
	#cont-right .cbox.column7 {border-right: 0px;  }
	#cont-right .cbox.column8 {border-right: 0px;  }
}