@charset "utf-8";
/* CSS Document */

#container{
	background: #fff url(../img/main/container_bg.gif) repeat-y center top;
	min-width:1000px;
	position:relative;
	padding: 100px 0 0 0;
}
#container h3{
	text-align:center;
	padding: 26px 0;
}
/* slide button */
.container_btn{
	position:absolute;
	right:0;
	top:100px;
}
/*visual */
.visual{
	height:405px;
	text-align:center;
	width:100%;
	overflow:hidden;
	background:#99cc00 url(../img/main/visual_pat.png) repeat-x;
}

/*device */
.device
{
    height:640px;
    width:100%;
    background:url(../img/main/device_bg.gif);
    overflow:hidden;
    position:relative;
}
.device h3 img
{
    padding:14px 0;
    z-index:10;
    position:relative;
}
.device_info
{
    width:1200px;
    margin: 0 auto;
    z-index:10;
    position:relative;
}
.device_width2
{
    width:1000px;
     transition-duration: 1s;
}
.already-visible 
{
    width:1000PX;
	-webkit-transform: translateX(20px);
	-moz-transform: translateX(20px);
	-ms-transform: translateX(20px);
	-o-transform: translateX(20px);
	transform: translateX(20px);
	-webkit-animation: google 0.4s ease forwards;
	-moz-animation: google 0.4s ease forwards;
	-o-animation: google 0.4s ease forwards;
	animation: google 0.4s ease forwards;
}
.move_right
{
    animation: google 0.4s ease forwards;
}
@-webkit-keyframes google {
 0% {
 -webkit-transform: translateY(100px) perspective(350px) rotatex(20deg);
}
 100% {
 -webkit-transform: translateY(0px) perspective(350px) rotatex(0deg);
}
}
@-moz-keyframes google {
 0% {
 -moz-transform: translateY(100px) perspective(350px) rotatex(20deg);
}
 100% {
 -moz-transform: translateY(0px) perspective(350px) rotatex(0deg);
}
}
@-o-keyframes google {
 0% {
 -o-transform: translateY(100px) perspective(350px) rotatex(20deg);
}
 100% {
 -o-transform: translateY(0px) perspective(350px) rotatex(0deg);
}
}
@keyframes google {
 0% {
 -webkit-transform: translateY(100px) perspective(350px) rotatex(20deg);
 transform: translateY(100px) perspective(350px) rotatex(20deg);
}
 100% {
	 
 -webkit-transform: translateY(0px) perspective(350px) rotatex(0deg);
 transform: translateY(0px) perspective(350px) rotatex(0deg);
}
}
.device_info ul
{
    width:33.3%;
    float:left;
}
.device_info ul li
{
    text-align:center;
    color:#000;
    line-height:20px;
    font-size:12px;
}
.device_info ul li dt
{
    padding:40px 0 20px 0;
}
.con_title
{
    font-weight:bold;
    padding:0 0 10px 0;
    font-size:14px;
    color:#2a2a2a;
}
/* story_area */
.story_area
{
    height:575px;
    background: url(../img/main/story_bg.gif) center bottom no-repeat fixed;
    position:relative;
}
.story_area h3 img
{
    padding:14px 0;
}
.story_area .story
{
    width: 1000px;
    margin: 0 auto;
}
.story_area .man
{
    width:292px;
    position:absolute;
    left: 50%;
    bottom:0;
    margin-left: 200px;
    
}
/* slider
----------------------*/
.story_area .slide-mask
{
    width:700px;
	position: relative;
	overflow: hidden;
	height: 130px;
	top:90px;
	left:0;
	text-align:left;
}

.slide-group{
	position: absolute;
	left: 0;
	width: 100%;
	top:0;
	font-size:18px;
	line-height:30px;
}
.slide{
	height: 130px;
}
/* nav
----------------------*/
.slide-nav{
	position:relative;
	top:100px;
	left: 250px;
}
.slide-nav ul{
	padding: 20px 0;
	width:100px;
	
}
.slide-nav li{
	display: inline-block;
	width: 10px;
	height: 10px;
	background: #ccc;
	cursor: pointer;
	margin-left: .5em;
	float:left;
}
.slide-nav li.current{
	background: #f6921d;
}
.contact
{
    background:#2f3d4d url(../img/main/contact_bg.png);
    height: 506px;
}
.contact h3 img
{
    padding:14px 0;
}
.contact ul
{
    width:1000px;
    margin: 0 auto;
    padding: 40px 0 0 0;
}
.contact ul li
{
    float:left;
    text-align:center;
    width:33%;
    line-height:227px;
}
.contact ul li img
{
    vertical-align:bottom;
}
/* 공지 */
.notice_area{
	height:94px;
	width: 100%;
	background: #8c9aaa;
}
.notice_area  .notice{
	width:1000px;
	margin:0 auto;
}

.notice_area  .notice h4{
	padding: 35px 30px 14px 0;
	background: url(../img/main/notice_line.gif) no-repeat right center;
	width:50px;
	display:inline-block;
}
.notice_area  .notice .title{
	width:600px;
	padding: 0px 0 0 40px;
	font-size:14px;
}
.notice_area  .notice .title a{
	color:#fff;
	
}
.notice_area .notice .more{
	float:right;
	padding: 20px 0 0 0;
}
/*03. info */
#info{
	margin: 26px auto 0px auto;
	padding: 100px 0 0px 0; /*메뉴바높이 */
	height:860px;
	width:1000px;
	position:relative;
}
#info .map{
	position: absolute;
	left:250px;
	z-index: 10;
	width:750px;
}
#info .map h4{
	position: absolute;
	right:0;
	z-index: 10;
}
#info .cs{
	position: absolute;
	right:0;
	top: 360px;
	width: 219px;
}
#info .cs h4{
	padding: 0 0 10px 0;
}
#info .time{
	position: absolute;
	left:0px;
	top:600px;
	z-index: 1;
}
#info .time h4{
	padding: 0 0 10px 0;
}


/* 구름 */

.device .clouds {
	position: absolute;
	top: 70px;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	overflow:hidden;
	z-index:1;
}
 [class^="cloud-"] {
 position: absolute;
 right: 120%;
 width: 200px;
 height: 60px;
 background: #fff;
 -webkit-border-radius: 200px;
 border-radius: 200px;
}
[class^="cloud-"]:before, [class^="cloud-"]:after {
	content: '';
	position: absolute;
	top: -15px;
	left: 10px;
	width: 100px;
	height: 80px;
	background: #fff;
	-webkit-border-radius: 100px;
	border-radius: 100px;
	-webkit-transform: rotate(30deg);
	-moz-transform: rotate(30deg);
	transform: rotate(30deg);
}
[class^="cloud-"]:after {
	top: -55px;
	left: auto;
	right: 15px;
	width: 120px;
	height: 120px;
}
.cloud-1 {
	top: 50px;
	-webkit-animation: moveclouds 30s linear infinite;
	-moz-animation: moveclouds 30s linear infinite;
	-o-animation: moveclouds 30s linear infinite;
	animation: moveclouds 30s linear infinite;
}
.cloud-2 {
	top: 100px;
	opacity: 0.8;
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	transform: scale(0.8);
	-webkit-animation: moveclouds 45s linear infinite;
	-moz-animation: moveclouds 45s linear infinite;
	-o-animation: moveclouds 45s linear infinite;
	animation: moveclouds 45s linear infinite;
	-webkit-animation-delay: 5s;
	-moz-animation-delay: 5s;
	animation-delay: 5s;
}
.cloud-3 {
	top: 150px;
	opacity: 0.6;
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	transform: scale(0.6);
	-webkit-animation: moveclouds 40s linear infinite;
	-moz-animation: moveclouds 40s linear infinite;
	-o-animation: moveclouds 40s linear infinite;
	animation: moveclouds 40s linear infinite;
}
.cloud-4 {
	top: 200px;
	opacity: 0.75;
	-webkit-transform: scale(0.75);
	-moz-transform: scale(0.75);
	transform: scale(0.75);
	-webkit-animation: moveclouds 26s linear infinite;
	-moz-animation: moveclouds 26s linear infinite;
	-o-animation: moveclouds 26s linear infinite;
	animation: moveclouds 26s linear infinite;
	-webkit-animation-delay: 8s;
	-moz-animation-delay: 8s;
	animation-delay: 8s;
}
 @-webkit-keyframes moveclouds {
 0% {
right: 5%;
}
 100% {
right: 120%;
}
}
@-moz-keyframes moveclouds {
 0% {
right: 5%;
}
 100% {
right: 120%;
}
}
@-o-keyframes moveclouds {
 0% {
right: 5%;
}
 100% {
right: 120%;
}
}