.da-slider{ width: 100%; max-width:600px; height: 100%; position: relative; margin: 0 auto; -webkit-transition: background-position 1.4s ease-in-out 0.3s; -moz-transition: background-position 1.4s ease-in-out 0.3s; -o-transition: background-position 1.4s ease-in-out 0.3s; -ms-transition: background-position 1.4s ease-in-out 0.3s; transition: background-position 1.4s ease-in-out 0.3s;}
.da-slide{ position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; text-align: left; z-index:1;}
.da-slide-current{ z-index: 5;}
.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: 50%; z-index:5;}
.da-slider-fb .da-slide h2,
.da-slider-fb .da-slide p,
.da-slider-fb .da-slide .da-link{ left: 10%; opacity: 1;}
.da-slider-fb .da-slide .da-img{ left: 50%; opacity: 1;}

.da-slide h2 {display:inline-block; font-size: 37px; top: 140px; margin-left:10%; font-weight: 600; letter-spacing:-1px; background:url('../img/visual_line.png') no-repeat center bottom; padding-bottom:20px; color:#333; width:80%; text-align:left; font-family:'Nanum Square';}
.da-slide h2 span strong {color:#eb5364;}
.da-slide p{font-size: 15px; top: 200px; left:0; font-weight: 400; text-align:left; margin-left:10%; letter-spacing:-1px; width:80%; text-align:left;}
.da-slide p strong {font-weight:800;}
.da-slide p a {display:inline-block; width:110px; background:#fff; font-size:13px; text-align:center; border:1px solid #ddd; line-height:30px; margin-top:10px; color:#666;}
.da-slide .da-img{ text-align:right; width:680px; top:0; left: 50%; /*60%*/ margin-left:-340px; z-index:5;}
.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{display:inline-block; position: absolute; text-align: center; left:10%; top: 50%; margin-top:-6px; z-index: 5; -moz-user-select: none; -webkit-user-select: none; }
.da-dots span{ display: inline-block; position: relative; width: 12px; height: 12px; border-radius: 8px; margin-right:10px; cursor: pointer; opacity:1; background:#fff; box-shadow:1px 1px 1px #333;}
.da-dots span.da-dots-current{width: 25px; height: 12px; display: inline-block; background:#a19e50; opacity:1;border-radius: 8px; border:none;}
.da-arrows{ -moz-user-select: none; -webkit-user-select: none;}
.da-arrows span{ position: absolute; top: 50%; width: 35px; height: 55px; margin-top:-50px; cursor: pointer; z-index: 5; opacity: 0; -webkit-transition: opacity 0.4s ease-in-out 0.2s; -moz-transition: opacity 0.4s ease-in-out 0.2s; -o-transition: opacity 0.4s ease-in-out 0.2s; -ms-transition: opacity 0.4s ease-in-out 0.2s; transition: opacity 0.4s ease-in-out 0.2s;}
.da-slider:hover .da-arrows span{ opacity: 0.5;}
.da-arrows span:after{ content: '';}
.da-arrows span.da-arrows-next:after{}
.da-arrows span.da-arrows-prev{ left: 0; background:rgba(0,0,0,0.5) url('../img/btn_allow_left.png') no-repeat center center;}
.da-arrows span.da-arrows-next{ right:0; background:rgba(0,0,0,0.5) url('../img/btn_allow_right.png') no-repeat center center;}
 
.da-slide-current h2,
.da-slide-current p,
.da-slide-current .da-link{ left: 0; opacity: 1;}
.da-slide-current .da-img{ left: 50%; opacity: 1; z-index:5;}
/* Animation classes and animations */

@media screen and (max-width: 480px) {
	.da-slide .da-img {width:120%; min-width:420px; margin-left:-60%; top:auto; bottom:-20px;}
	.da-slide .da-img img {width:100%}
	.da-slide h2 {top:40px; font-size:25px;}
	.da-slide p{top: 80px; font-size:12px;}
	.da-dots {top:auto; bottom:20px;}

}



/* Slide in from the right*/
.da-slide-fromright h2{ -webkit-animation: fromRightAnim1 0.6s ease-in 0.3s both; -moz-animation: fromRightAnim1 0.6s ease-in 0.3s both; -o-animation: fromRightAnim1 0.6s ease-in 0.3s both; -ms-animation: fromRightAnim1 0.6s ease-in 0.3s both; animation: fromRightAnim1 0.6s ease-in 0.3s both;}
.da-slide-fromright p{ -webkit-animation: fromRightAnim2 0.6s ease-in 0.8s both; -moz-animation: fromRightAnim2 0.6s ease-in 0.8s both; -o-animation: fromRightAnim2 0.6s ease-in 0.8s both; -ms-animation: fromRightAnim2 0.6s ease-in 0.8s both; animation: fromRightAnim2 0.6s ease-in 0.8s both;}
.da-slide-fromright .da-link{ -webkit-animation: fromRightAnim3 0.4s ease-in 1.2s both; -moz-animation: fromRightAnim3 0.4s ease-in 1.2s both; -o-animation: fromRightAnim3 0.4s ease-in 1.2s both; -ms-animation: fromRightAnim3 0.4s ease-in 1.2s both; animation: fromRightAnim3 0.4s ease-in 1.2s both;}
.da-slide-fromright .da-img{ -webkit-animation: fromRightAnim4 0.6s ease-in 0.8s both; -moz-animation: fromRightAnim4 0.6s ease-in 0.8s both; -o-animation: fromRightAnim4 0.6s ease-in 0.8s both; -ms-animation: fromRightAnim4 0.6s ease-in 0.8s both; animation: fromRightAnim4 0.6s ease-in 0.8s both;}
@-webkit-keyframes fromRightAnim1{ 0%{ left: 50%; opacity: 0; } 100%{ left: 0%; opacity: 1; }}
@-webkit-keyframes fromRightAnim2{ 0%{ left: 50%; opacity: 0; } 100%{ left: 0%; opacity: 1; }}
@-webkit-keyframes fromRightAnim3{ 0%{ left: 50%; opacity: 0; } 1%{ left: 10%; opacity: 0; } 100%{ left: 10%; opacity: 1; }}
@-webkit-keyframes fromRightAnim4{ 0%{ left: 50%; opacity: 0; } 100%{ left: 50%; opacity: 1; }}

@-moz-keyframes fromRightAnim1{ 0%{ left: 50%; opacity: 0; } 100%{ left: 0%; opacity: 1; }}
@-moz-keyframes fromRightAnim2{ 0%{ left: 50%; opacity: 0; } 100%{ left: 0%; opacity: 1; }}
@-moz-keyframes fromRightAnim3{ 0%{ left: 50%; opacity: 0; } 1%{ left: 10%; opacity: 0; } 100%{ left: 10%; opacity: 1; }}
@-moz-keyframes fromRightAnim4{ 0%{ left: 50%; opacity: 0; } 100%{ left:50%; opacity: 1; }}

@-o-keyframes fromRightAnim1{ 0%{ left: 50%; opacity: 0; } 100%{ left: 0%; opacity: 1; }}
@-o-keyframes fromRightAnim2{ 0%{ left: 50%; opacity: 0; } 100%{ left: 0%; opacity: 1; }}
@-o-keyframes fromRightAnim3{ 0%{ left: 50%; opacity: 0; } 1%{ left: 10%; opacity: 0; } 100%{ left: 10%; opacity: 1; }}
@-o-keyframes fromRightAnim4{ 0%{ left: 50%; opacity: 0; } 100%{ left: 50%; opacity: 1; }}

@-ms-keyframes fromRightAnim1{ 0%{ left: 50%; opacity: 0; } 100%{ left: 0%; opacity: 1; }}
@-ms-keyframes fromRightAnim2{ 0%{ left: 50%; opacity: 0; } 100%{ left: 0%; opacity: 1; }}
@-ms-keyframes fromRightAnim3{ 0%{ left: 50%; opacity: 0; } 1%{ left: 10%; opacity: 0; } 100%{ left: 10%; opacity: 1; }}
@-ms-keyframes fromRightAnim4{ 0%{ left: 50%; opacity: 0; } 100%{ left: 50%; opacity: 1; }}

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

@-moz-keyframes fromLeftAnim1{ 0%{ left: -50%; opacity: 0; } 100%{ left: 0%; opacity: 1; }}
@-moz-keyframes fromLeftAnim2{ 0%{ left: -50%; opacity: 0; } 100%{ left: 0%; opacity: 1; }}
@-moz-keyframes fromLeftAnim3{ 0%{ left: -50%; opacity: 0; } 1%{ left: 0%; opacity: 0; } 100%{ left: 10%; opacity: 1; }}
@-moz-keyframes fromLeftAnim4{ 0%{ left: 50%; opacity: 0; } 100%{ left: 50%; opacity: 1; }}

@-o-keyframes fromLeftAnim1{ 0%{ left: -50%; opacity: 0; } 100%{ left: 0%; opacity: 1; }}
@-o-keyframes fromLeftAnim2{ 0%{ left: -50%; opacity: 0; } 100%{ left: 0%; opacity: 1; }}
@-o-keyframes fromLeftAnim3{ 0%{ left: -50%; opacity: 0; } 1%{ left: 10%; opacity: 0; } 100%{ left: 10%; opacity: 1; }}
@-o-keyframes fromLeftAnim4{ 0%{ left: 50%; opacity: 0; } 100%{ left: 50%; opacity: 1; }}

@-ms-keyframes fromLeftAnim1{ 0%{ left: -50%; opacity: 0; } 100%{ left: 0%; opacity: 1; }}
@-ms-keyframes fromLeftAnim2{ 0%{ left: -50%; opacity: 0; } 100%{ left: 0%; opacity: 1; }}
@-ms-keyframes fromLeftAnim3{ 0%{ left: -50%; opacity: 0; } 1%{ left: 10%; opacity: 0; } 100%{ left: 10%; opacity: 1; }}
@-ms-keyframes fromLeftAnim4{ 0%{ left: 50%; opacity: 0; } 100%{ left: 50%; opacity: 1; }}

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

@-moz-keyframes toRightAnim1{ 0%{ left: 0%;  opacity: 1; } 100%{ left: 100%; opacity: 0; }}
@-moz-keyframes toRightAnim2{ 0%{ left: 0%;  opacity: 1; } 100%{ left: 100%; opacity: 0; }}
@-moz-keyframes toRightAnim3{ 0%{ left: 10%;  opacity: 1; } 99%{ left: 10%; opacity: 0; } 100%{ left: 100%; opacity: 0; }}
@-moz-keyframes toRightAnim4{ 0%{ left: 50%;  opacity: 1; } 100%{ left: 50%; opacity: 0; }}

@-o-keyframes toRightAnim1{ 0%{ left: 0%;  opacity: 1; } 100%{ left: 100%; opacity: 0; }}
@-o-keyframes toRightAnim2{ 0%{ left: 0%;  opacity: 1; } 100%{ left: 100%; opacity: 0; }}
@-o-keyframes toRightAnim3{ 0%{ left: 10%;  opacity: 1; } 99%{ left: 10%; opacity: 0; } 100%{ left: 100%; opacity: 0; }}
@-o-keyframes toRightAnim4{ 0%{ left: 50%;  opacity: 1; } 100%{ left: 50%; opacity: 0; }}

@-ms-keyframes toRightAnim1{ 0%{ left: 0%;  opacity: 1; } 100%{ left: 100%; opacity: 0; }}
@-ms-keyframes toRightAnim2{ 0%{ left: 0%;  opacity: 1; } 100%{ left: 100%; opacity: 0; }}
@-ms-keyframes toRightAnim3{ 0%{ left: 10%;  opacity: 1; } 99%{ left: 10%; opacity: 0; } 100%{ left: 100%; opacity: 0; }}
@-ms-keyframes toRightAnim4{ 0%{ left: 50%;  opacity: 1; } 100%{ left: 50%; opacity: 0; }}

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

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

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

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

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