@charset "utf-8";
@import url(common.css);


/*!!!!!!!!!!!!!! 컨텐츠 상단 부분 !!!!!!!!!!!!!!!*/
#content_01 { width:1240px; height:100%; margin:0 auto; clear:both;}

/* 로그인 박스 */
.login_box { width:410px; height:134px; background-color:#fff; margin-bottom:10px; float:left; box-shadow: 0px 1px 1px rgba(0,0,0,0.2), 0px -2px 1px #fff;}
.login_box ul { width:351px; height:71px; padding-top:20px; margin-left:30px; position:relative;}
.login_box .margin_bottom { margin-bottom:8px;} 
.login_box .main_input01 { width:216px; height:30px; line-height:30px; padding-left:10px; border:1px solid #dadadb; background-color:e8e9ea; color:#7d7d7d; font-size:13px;}
.login_box .but_li { position:absolute; top:20px; right:0px; color:#fff;}
.login_box .but_li .but_login { width:107px; height:71px; line-height:71px; text-align:center; vertical-align:middle; background-color:#368fcc; color:#fff; font-size:16px; font-weight:bold; display:inline-block;}

.login_box .hi_li { font-size:18px; font-weight:600; color:#333; margin-bottom:15px;}
.login_box .me_li { font-size:14px;}

.login_box .fl_left { float:left; margin-left:30px; margin-top:10px; color:#7d7d7d; font-size:14px;}
.login_box .fl_left .id_checkbox { border:1px solid #69696a;}
.login_box .fl_right { float:right; margin-right:30px; margin-top:10px; color:#368fcc; font-size:14px;}
.login_box .fl_right a{ color:#368fcc; font-size:14px;}
.login_box .fl_right a:hover{ color:#427191;}


/* 슬라이드 박스 */
.slider { width:820px; height:340px; margin-bottom:10px; background-color:#fff; float:right;}

.da-slider{
	width: 820px;
	height: 340px;
	position: relative;
	overflow: hidden;
	box-shadow: 0px 1px 1px rgba(0,0,0,0.2), 0px -2px 1px #fff;
	-webkit-transition: background-position 1s ease-out 0.3s;
	-moz-transition: background-position 1s ease-out 0.3s;
	-o-transition: background-position 1s ease-out 0.3s;
	-ms-transition: background-position 1s ease-out 0.3s;
	transition: background-position 1s ease-out 0.3s;
	
}

.da-slide{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	text-align: left;
}
.da-slide-current{
	z-index: 1000;
}
.da-slider-fb .da-slide{
	left: 100%;
}
.da-slider-fb  .da-slide.da-slide-current{
	left: 0px;
}
.da-slide h2,
.da-slide p,
.da-slide .da-link,
.da-slide .da-img{
	position: absolute;
	opacity: 0;
	left: 110%;
}
.da-slider-fb .da-slide h2,
.da-slider-fb .da-slide p,
.da-slider-fb .da-slide .da-link{
	left: 58px;
	opacity: 1;
}
.da-slider-fb .da-slide .da-img{
	left: 40%;
	opacity: 1;
}

.da-slide h2{
	color: #fff;
	font-size: 16px;
	top: 60px;
	white-space: nowrap;
	z-index: 10;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
	font-weight: 600;
	background-color:#fe5454;
	padding:5px 10px;
}
.da-slide .h2_type_02{
	top: 98px;
}
.da-slide p{
	top: 140px;
	color: #333333;
	font-size: 36px;
	line-height: 42px;
	overflow: hidden;
	font-weight: bold;
	z-index:100;
}
.da-slide .p_type_02{
	top: 150px;
}
.da-slide p span{
	color: #368fcc;
	font-size: 40px;
}
.da-slide p .txt_type_01{
	color: #999;
	font-size: 16px;
	text-decoration:underline;
}
.da-slide p .txt_type_02{
	color: #626262;
	font-size: 30px;
}
.da-slide .da-img{
	text-align: center;
	top: 0px;
	left: 110%; /*60%*/
}

/* 링크박스 */
.da-slide .da-link{
	top: 270px; /*depends on p height*/
	border-radius: 30px;
	box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
	border: 8px solid rgba(255,255,255,0.8);
	padding: 2px 20px 0px;
	font-size: 18px;
	line-height: 30px;
	width: 80px;
	text-align: center;
	background: rgba(255,255,255,0.2);
}
.da-slide .da-link:hover{
	background: rgba(255,255,255,0.3);
}

/* 동그라미 */
.da-dots{
	width: 100%;
	position: absolute;
	/*text-align: center;*/
	left:710px;
	bottom: 10px;
	z-index: 2000;
	-moz-user-select: none;
	-webkit-user-select: none;
}
.da-dots span{
	display: inline-block;
	position: relative;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #7595ab;
	margin: 3px;
	cursor: pointer;
	box-shadow: 
		1px 1px 1px rgba(0,0,0,0.1) inset, 
		1px 1px 1px rgba(255,255,255,0.1);
}
.da-dots span.da-dots-current:after{
	content: '';
	width: 11px;
	height: 11px;
	position: absolute;
	top: 2px;
	left: 2px;
	border-radius: 50%;
	background: rgb(255,255,255);
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(47%,rgba(246,246,246,1)), color-stop(100%,rgba(237,237,237,1)));
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
	background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
	background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
	background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
}/* 롤링 리스트 */

/* 좌, 우 */
.da-arrows{
	-moz-user-select: none;
	-webkit-user-select: none;
}
.da-arrows span{
	position: absolute;
	top: 50%;
	height: 30px;
	width: 30px;
	border-radius: 50%;
	background: #7595ab;
	cursor: pointer;
	z-index: 2000;
	opacity: 0;
	box-shadow: 
		1px 1px 1px rgba(0,0,0,0.1) inset, 
		1px 1px 1px rgba(255,255,255,0.1);
	-webkit-transition: opacity 0.4s ease-in-out-out 0.2s;
	-moz-transition: opacity 0.4s ease-in-out-out 0.2s;
	-o-transition: opacity 0.4s ease-in-out-out 0.2s;
	-ms-transition: opacity 0.4s ease-in-out-out 0.2s;
	transition: opacity 0.4s ease-in-out-out 0.2s;
}
.da-slider:hover .da-arrows span{
	opacity: 1;
}
.da-arrows span:after{
	content: '';
	position: absolute;
	width: 20px;
	height: 20px;
	top: 5px;
	left: 5px;
	background: transparent url(../images/arrows.png) no-repeat top left;
	border-radius: 50%;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.da-arrows span:hover:after{
	box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
}
.da-arrows span:active:after{
	box-shadow: 1px 1px 1px rgba(255,255,255,0.1);
}
.da-arrows span.da-arrows-next:after{
	background-position: top right;
}
.da-arrows span.da-arrows-prev{
	left: 15px;
}
.da-arrows span.da-arrows-next{
	right: 15px;
}

.da-slide-current h2,
.da-slide-current p,
.da-slide-current .da-link{
	left: 5%;
	opacity: 1;
}
.da-slide-current .da-img{
	left: 40%;
	opacity: 1;
}

/* Animation classes and animations */

/* Slide in from the right 움직는 효과*/
.da-slide-fromright h2{
	-webkit-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
	-moz-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
	-o-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
	-ms-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
	animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
}
.da-slide-fromright p{
	-webkit-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
	-moz-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
	-o-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
	-ms-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
	animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
}
.da-slide-fromright .da-link{
	-webkit-animation: fromRightAnim3 0.4s ease-in-out 1.2s both;
	-moz-animation: fromRightAnim3 0.4s ease-in-out 1.2s both;
	-o-animation: fromRightAnim3 0.4s ease-in-out 1.2s both;
	-ms-animation: fromRightAnim3 0.4s ease-in-out 1.2s both;
	animation: fromRightAnim3 0.4s ease-in-out 1.2s both;
}
.da-slide-fromright .da-img{
	-webkit-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
	-moz-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
	-o-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
	-ms-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
	animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
}
@-webkit-keyframes fromRightAnim1{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@-webkit-keyframes fromRightAnim2{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@-webkit-keyframes fromRightAnim3{
	0%{ left: 110%; opacity: 0; }
	1%{ left: 5%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@-webkit-keyframes fromRightAnim4{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 40%; opacity: 1; }
}

@-moz-keyframes fromRightAnim1{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@-moz-keyframes fromRightAnim2{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@-moz-keyframes fromRightAnim3{
	0%{ left: 110%; opacity: 0; }
	1%{ left: 5%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@-moz-keyframes fromRightAnim4{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 40%; opacity: 1; }
}

@-o-keyframes fromRightAnim1{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@-o-keyframes fromRightAnim2{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@-o-keyframes fromRightAnim3{
	0%{ left: 110%; opacity: 0; }
	1%{ left: 5%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@-o-keyframes fromRightAnim4{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 40%; opacity: 1; }
}

@-ms-keyframes fromRightAnim1{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@-ms-keyframes fromRightAnim2{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@-ms-keyframes fromRightAnim3{
	0%{ left: 110%; opacity: 0; }
	1%{ left: 5%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@-ms-keyframes fromRightAnim4{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 40%; opacity: 1; }
}

@keyframes fromRightAnim1{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@keyframes fromRightAnim2{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@keyframes fromRightAnim3{
	0%{ left: 110%; opacity: 0; }
	1%{ left: 5%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@keyframes fromRightAnim4{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 40%; opacity: 1; }
	
}
/* Slide in from the left*/
.da-slide-fromleft h2{
	-webkit-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
	-moz-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
	-o-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
	-ms-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
	animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
}
.da-slide-fromleft p{
	-webkit-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
	-moz-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
	-o-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
	-ms-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
	animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
}
.da-slide-fromleft .da-link{
	-webkit-animation: fromLeftAnim3 0.4s ease-in-out 1.2s both;
	-moz-animation: fromLeftAnim3 0.4s ease-in-out 1.2s both;
	-o-animation: fromLeftAnim3 0.4s ease-in-out 1.2s both;
	-ms-animation: fromLeftAnim3 0.4s ease-in-out 1.2s both;
	animation: fromLeftAnim3 0.4s ease-in-out 1.2s both;
}
.da-slide-fromleft .da-img{
	-webkit-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
	-moz-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
	-o-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
	-ms-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
	animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
}
@-webkit-keyframes fromLeftAnim1{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@-webkit-keyframes fromLeftAnim2{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@-webkit-keyframes fromLeftAnim3{
	0%{ left: -110%; opacity: 0; }
	1%{ left: 5%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@-webkit-keyframes fromLeftAnim4{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 40%; opacity: 1; }
}

@-moz-keyframes fromLeftAnim1{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@-moz-keyframes fromLeftAnim2{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@-moz-keyframes fromLeftAnim3{
	0%{ left: -110%; opacity: 0; }
	1%{ left: 5%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@-moz-keyframes fromLeftAnim4{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 40%; opacity: 1; }
}

@-o-keyframes fromLeftAnim1{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@-o-keyframes fromLeftAnim2{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@-o-keyframes fromLeftAnim3{
	0%{ left: -110%; opacity: 0; }
	1%{ left: 5%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@-o-keyframes fromLeftAnim4{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 40%; opacity: 1; }
}

@-ms-keyframes fromLeftAnim1{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@-ms-keyframes fromLeftAnim2{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@-ms-keyframes fromLeftAnim3{
	0%{ left: -110%; opacity: 0; }
	1%{ left: 5%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@-ms-keyframes fromLeftAnim4{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 40%; opacity: 1; }
}

@keyframes fromLeftAnim1{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@keyframes fromLeftAnim2{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@keyframes fromLeftAnim3{
	0%{ left: -110%; opacity: 0; }
	1%{ left: 5%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@keyframes fromLeftAnim4{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 40%; opacity: 1; }
}
/* Slide out to the right */
.da-slide-toright h2{
	-webkit-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
	-moz-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
	-o-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
	-ms-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
	animation: toRightAnim1 0.6s ease-in-out 0.6s both;
}
.da-slide-toright p{
	-webkit-animation: toRightAnim2 0.6s ease-in-out 0.3s both;
	-moz-animation: toRightAnim2 0.6s ease-in-out 0.3s both;
	-o-animation: toRightAnim2 0.6s ease-in-out 0.3s both;
	-ms-animation: toRightAnim2 0.6s ease-in-out 0.3s both;
	animation: toRightAnim2 0.6s ease-in-out 0.3s both;
}
.da-slide-toright .da-link{
	-webkit-animation: toRightAnim3 0.4s ease-in-out both;
	-moz-animation: toRightAnim3 0.4s ease-in-out both;
	-o-animation: toRightAnim3 0.4s ease-in-out both;
	-ms-animation: toRightAnim3 0.4s ease-in-out both;
	animation: toRightAnim3 0.4s ease-in-out both;
}
.da-slide-toright .da-img{
	-webkit-animation: toRightAnim4 0.6s ease-in-out both;
	-moz-animation: toRightAnim4 0.6s ease-in-out both;
	-o-animation: toRightAnim4 0.6s ease-in-out both;
	-ms-animation: toRightAnim4 0.6s ease-in-out both;
	animation: toRightAnim4 0.6s ease-in-out both;
}
@-webkit-keyframes toRightAnim1{
	0%{ left: 5%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@-webkit-keyframes toRightAnim2{
	0%{ left: 5%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@-webkit-keyframes toRightAnim3{
	0%{ left: 5%;  opacity: 1; }
	99%{ left: 5%; opacity: 0; }
	100%{ left: 100%; opacity: 0; }
}
@-webkit-keyframes toRightAnim4{
	0%{ left: 40%;  opacity: 1; }
	30%{ left: 55%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}

@-moz-keyframes toRightAnim1{
	0%{ left: 5%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@-moz-keyframes toRightAnim2{
	0%{ left: 5%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@-moz-keyframes toRightAnim3{
	0%{ left: 5%;  opacity: 1; }
	99%{ left: 5%; opacity: 0; }
	100%{ left: 100%; opacity: 0; }
}
@-moz-keyframes toRightAnim4{
	0%{ left: 40%;  opacity: 1; }
	30%{ left: 55%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}

@-o-keyframes toRightAnim1{
	0%{ left: 5%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@-o-keyframes toRightAnim2{
	0%{ left: 5%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@-o-keyframes toRightAnim3{
	0%{ left: 5%;  opacity: 1; }
	99%{ left: 5%; opacity: 0; }
	100%{ left: 100%; opacity: 0; }
}
@-o-keyframes toRightAnim4{
	0%{ left: 40%;  opacity: 1; }
	30%{ left: 55%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}

@-ms-keyframes toRightAnim1{
	0%{ left: 5%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@-ms-keyframes toRightAnim2{
	0%{ left: 5%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@-ms-keyframes toRightAnim3{
	0%{ left: 5%;  opacity: 1; }
	99%{ left: 5%; opacity: 0; }
	100%{ left: 100%; opacity: 0; }
}
@-ms-keyframes toRightAnim4{
	0%{ left: 40%;  opacity: 1; }
	30%{ left: 55%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}

@keyframes toRightAnim1{
	0%{ left: 5%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@keyframes toRightAnim2{
	0%{ left: 5%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@keyframes toRightAnim3{
	0%{ left: 5%;  opacity: 1; }
	99%{ left: 5%; opacity: 0; }
	100%{ left: 100%; opacity: 0; }
}
@keyframes toRightAnim4{
	0%{ left: 40%;  opacity: 1; }
	30%{ left: 55%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
/* Slide out to the left*/
.da-slide-toleft h2{
	-webkit-animation: toLeftAnim1 0.6s ease-in-out both;
	-moz-animation: toLeftAnim1 0.6s ease-in-out both;
	-o-animation: toLeftAnim1 0.6s ease-in-out both;
	-ms-animation: toLeftAnim1 0.6s ease-in-out both;
	animation: toLeftAnim1 0.6s ease-in-out both;
}
.da-slide-toleft p{
	-webkit-animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
	-moz-animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
	-o-animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
	-ms-animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
	animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
}
.da-slide-toleft .da-link{
	-webkit-animation: toLeftAnim3 0.6s ease-in-out 0.6s both;
	-moz-animation: toLeftAnim3 0.6s ease-in-out 0.6s both;
	-o-animation: toLeftAnim3 0.6s ease-in-out 0.6s both;
	-ms-animation: toLeftAnim3 0.6s ease-in-out 0.6s both;
	animation: toLeftAnim3 0.6s ease-in-out 0.6s both;
}
.da-slide-toleft .da-img{
	-webkit-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
	-moz-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
	-o-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
	-ms-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
	animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
}
@-webkit-keyframes toLeftAnim1{
	0%{ left: 5%;  opacity: 1; }
	30%{ left: 15%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-webkit-keyframes toLeftAnim2{
	0%{ left: 5%;  opacity: 1; }
	30%{ left: 15%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-webkit-keyframes toLeftAnim3{
	0%{ left: 5%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-webkit-keyframes toLeftAnim4{
	0%{ left: 40%;  opacity: 1; }
	70%{ left: 30%;  opacity: 0; }
	100%{ left: -50%; opacity: 0; }
}

@-moz-keyframes toLeftAnim1{
	0%{ left: 5%;  opacity: 1; }
	30%{ left: 15%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-moz-keyframes toLeftAnim2{
	0%{ left: 5%;  opacity: 1; }
	30%{ left: 15%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-moz-keyframes toLeftAnim3{
	0%{ left: 5%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-moz-keyframes toLeftAnim4{
	0%{ left: 40%;  opacity: 1; }
	70%{ left: 30%;  opacity: 0; }
	100%{ left: -50%; opacity: 0; }
}

@-o-keyframes toLeftAnim1{
	0%{ left: 5%;  opacity: 1; }
	30%{ left: 15%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-o-keyframes toLeftAnim2{
	0%{ left: 5%;  opacity: 1; }
	30%{ left: 15%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-o-keyframes toLeftAnim3{
	0%{ left: 5%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-o-keyframes toLeftAnim4{
	0%{ left: 40%;  opacity: 1; }
	70%{ left: 30%;  opacity: 0; }
	100%{ left: -50%; opacity: 0; }
}

@-ms-keyframes toLeftAnim1{
	0%{ left: 5%;  opacity: 1; }
	30%{ left: 15%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-ms-keyframes toLeftAnim2{
	0%{ left: 5%;  opacity: 1; }
	30%{ left: 15%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-ms-keyframes toLeftAnim3{
	0%{ left: 5%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-ms-keyframes toLeftAnim4{
	0%{ left: 40%;  opacity: 1; }
	70%{ left: 30%;  opacity: 0; }
	100%{ left: -50%; opacity: 0; }
}

@keyframes toLeftAnim1{
	0%{ left: 5%;  opacity: 1; }
	30%{ left: 15%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@keyframes toLeftAnim2{
	0%{ left: 5%;  opacity: 1; }
	30%{ left: 15%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@keyframes toLeftAnim3{
	0%{ left: 5%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@keyframes toLeftAnim4{
	0%{ left: 40%;  opacity: 1; }
	70%{ left: 30%;  opacity: 0; }
	100%{ left: -50%; opacity: 0; }
}



/* 무료제작안내 박스 */
.main_box_01 { width:410px; height:196px; margin-bottom:10px; float:left; box-shadow: 0px 1px 1px rgba(0,0,0,0.2), 0px -2px 1px #fff; background:url(../images/bg_home.png) no-repeat; background-position:244px 43px;}
.bg_fff {background-color:#fff;}
.main_box_01 dt { margin-top:27px; margin-left:30px; color:#333333; font-weight:bold; font-size:30px;}
.main_box_01 dt span { color:#368fcc;}
.main_box_01 dd { margin-top:15px; margin-left:30px; color:#999999; font-weight:bold; font-size:18px;}

/* 무료제공 박스 */
.main_box_02 { width:410px; height:185px; margin-bottom:10px; margin-right:10px; float:left; box-shadow: 0px 1px 1px rgba(0,0,0,0.2), 0px -2px 1px #fff; background:url(../images/bg_fhone.png) no-repeat; background-position:244px 37px;}
.bg_fff { background-color:#fff;}
.main_box_02 dt { margin-top:27px; margin-left:30px; color:#333333; font-weight:bold; font-size:30px;}
.main_box_02 dt span { color:#70c8bc;}
.main_box_02 dd { margin-top:10px; margin-left:30px; color:#999999; font-weight:bold; font-size:18px;}

/* 현황 박스 공통 */
.inquiry_box_01 { width:405px; height:185px; background-color:#fff; margin-bottom:10px; position:relative; box-shadow: 0px 1px 1px rgba(0,0,0,0.2), 0px -2px 1px #fff;}
.inquiry_box_01 .title { margin-top:27px; margin-left:30px; color:#000; font-size:16px; font-weight:bold;}
.inquiry_box_01 ul { margin-top:15px; margin-left:30px; margin-right:30px;}
.inquiry_box_01 li { line-height:24px; font-size:13px; color:#333232;}
.inquiry_box_01 li .col { color:#196498; font-weight:bold;}
.inquiry_box_01 li .day { color:#656565; font-size:12px; float:right;}
.inquiry_box_01 li .ing { background-color:#368fcc; width:70px; height:17px; font-size:12px; text-align:center; color:#fff; line-height:17px; float:right;}

.inquiry_box_01 .but_the a{ padding:1px 1px; background-color:#f5f5f5; color:#106ec8; border:1px solid #c9c9c9; position:absolute; top:25px; right:30px; font-weight:bold; font-size:13px;}

/*!!!!!!!!!!!!! 컨텐츠 상단 끝 !!!!!!!!!!!!!!!*/




/*!!!!!!!!!!!!!! 컨텐츠 중간 부분 !!!!!!!!!!!!!!!*/
#content_02 { width:1240px; height:100%; margin:0 auto; clear:both;}

/* 최근 제작 사례 */
.new_box { width:825px; height:254px; background-color:#fff; margin-bottom:9px; float:left; }
.new_box .title_box { width:823px; height:51px; background:url(../images/bg_gnb_off.jpg) repeat-x; border:1px solid #7595ab;}
.new_box .title_box p { margin-left:30px; line-height:51px; font-size:16px; font-weight:bold; color:#494949; float:left;}
.new_box .title_box ul { float:right;}
.new_box .title_box li { float:left; width:51px; height:51px; margin-left:1px;}

.new_box .view_dv { margin-top:16px; margin-left:30px; width:764px;}
.new_box .view_dv ul {}
.new_box .view_dv li { width:242px; height:159px; border:2px solid #dddcdc; background-color:#CCC; float:left; margin-left:12px;}
.new_box .view_dv li:first-child{margin-left:0;}


/* 고객센터 */
.contact { width:404px; height:254px; background-color:#5489da; margin-bottom:9px; float:right;}
.bg_box { width:404px; height:254px; background:url(../images/bg_tel.png) no-repeat; background-position:280px 125px;}
.bg_box dl { margin-top:22px; margin-left:30px;}
.bg_box dt { color:#fff; font-size:24px; font-weight:bold; margin-bottom:15px;}
.bg_box dd { color:#fff; font-size:65px; font-weight:bold;}
.bg_box dd.box_txt { width:150px; height:24px; font-size:18px; background-color:#474747; text-align:center; margin-left:185px; letter-spacing:15px;}

.bg_box ul { margin-left:30px; margin-top:10px;}
.bg_box li { font-size:18px; color:#f1f1f1; font-weight:bold;}
.bg_box li span{ color:#6ee5ff; }


/* 추가서비스 박스 */
.main_box_03 { width:410px; height:185px; float:left; margin-right:10px; background:url(../images/bg_the.png) no-repeat; background-position:30px 29px; position:relative; }
.bg_fff { background-color:#fff;}
.main_box_03 dl { margin-top:55px; margin-left:180px;}
.main_box_03 dt { font-size:30px; font-weight:bold; color:#333;}
.main_box_03 dt span { color:#368fcc;}
.main_box_03 p { position:absolute; top:63px; right:35px;}



/* 업종별전용관 박스 */
.main_box_04 { width:404px; height:185px; float:left; background:url(../images/bg_job.png) no-repeat; background-position:30px 17px;}
.bg_fff { background-color:#fff;}
.main_box_04 dl { margin-top:30px; margin-left:190px;}
.main_box_04 dt { font-size:30px; font-weight:bold; color:#333; margin-bottom:15px;}
.main_box_04 dd { font-size:14px; color:#989898; font-weight:bold;}
.main_box_04 p { margin-left:190px; margin-top:20px;}
.main_box_04 p a { background-color:#6a7577; font-size:16px; font-weight:bold; color:#fff; padding:5px 10px;}



/* 계좌번호 박스 */
.kb_box { width:405px; height:185px; float:right; background:url(../images/bg_kb.png) no-repeat; background-position:35px 88px;}
.bg_col2 { background-color:#3c3c3c;}
.kb_box p { margin-top:28px; margin-left:30px; color:#fff; font-size:24px; font-weight:bold;}
.kb_box ul { margin-left:160px; margin-top:20px;}
.kb_box li { color:#fff; font-size:12px; font-weight:bold;}
.kb_box .bank { color:#faf9ab; font-size:15px;}
.kb_box .number { color:#faf9ab; font-size:32px;}


/*!!!!!!!!!!!!!! 컨텐츠 중간 부분 끝 !!!!!!!!!!!!!!!*/



/*!!!!!!!!!  시안박스   !!!!!!!!!!!!!!*/
#cyanogen { width:1240px; height:100%; margin:0 auto; clear:both; overflow:hidden; padding-top:35px;}

.cyanogen_title { width:1240px; height:51px; background:url(../images/bg_gnb_off.jpg) repeat-x; border:1px solid #7595ab; text-align:center; position:relative; margin-bottom:25px;}
.cyanogen_title h3 { line-height:51px; color:#494949; font-size:18px; font-weight:bold;}
.cyanogen_title p { position:absolute; top:0px; right:0px; width:185px; height:51px; background-color:#7595ab; color:#fff; font-size:16px; font-weight:bold; line-height:51px;}

.cyanogen_dv { width:1240px; height:100%; display:block; overflow:hidden; position:relative;}
.cyanogen_dv .cyanogen_box { width:396px; height:366px; background-color:#FFF; float:left; display:inline-block; text-align:center; margin-bottom:25px; margin-left:26px; box-shadow: 0px 1px 1px rgba(0,0,0,0.2), 0px -2px 1px #fff; }
.cyanogen_dv div:first-child { margin-left:0px;}

.cyanogen_box .img_box{ width:347px; height:218px; border:1px solid #dddcdc; background-color:#999; margin-top:25px; margin-left:25px; margin-bottom:25px;}

.cyanogen_box .txt_box { width:347px; height:24px; color:#404040; margin-left:25px;}
.cyanogen_box .txt_box li {}
.cyanogen_box .txt_box .name { font-size:18px; font-weight:bold; float:left;}
.cyanogen_box .txt_box .price { font-size:24px; font-weight:bold; float:right;}
.cyanogen_box .txt_box .price span{ color:#770202;}

.cyanogen_box .but_box { width:347px; height:31px; margin-left:25px; clear:both; margin-top:25px;}
.cyanogen_box .but_box li { float:left; color:#404040; font-size:14px; line-height:31px;}
.cyanogen_box .but_box .but_01 { width:91px; height:29px; border:1px solid #c8c8c8; background-color:#fff;}
.cyanogen_box .but_box .but_02 { width:94px; height:31px; background-color:#7595ab; color:#fff; margin-left:1px;}
.cyanogen_box .but_box .but_03 { width:94px; height:31px; background-color:#7595ab; color:#fff; margin-left:1px;}
.cyanogen_box .but_box .but_04 { width:63px; height:31px; background-color:#6f6f6f; color:#fff; float:right;}


.the_box { width:1240px; height:53px; clear:both; margin:0 auto; line-height:53px; text-align:center; background:url(../images/cyanogen_the.png) no-repeat; background-position:664px 23px; margin-bottom:35px;}
.bg_col { background-color:#9b9b9b;}
.the_box a { color:#fff; font-size:18px; font-weight:bold;}

/*!!!!!!!! 시안박스 끝   !!!!!!!!!!!!*/