@charset "UTF-8";

/* 1. 1 Column Grid 0px - 399px
----------------------------------------------------------------------------- */
@media screen and (min-width:0px) and (max-width:399px){
	.next-project .next-inner a h3, .project-area .project-top .project-name div h3{font-size:1.5em;}
	.oh-itm div{width: 110px; height: 110px;}
	.oh-itm div::after{width: 110px; height: 110px;}
	.oh-itm div::before{width: 90px; height: 90px;}
}

/* 2. 1 Column Grid 400px - 767px
----------------------------------------------------------------------------- */
@media screen and (min-width:400px) and (max-width:767px){
	.next-project .next-inner a h3, .project-area .project-top .project-name div h3{font-size:2em;}
}
@media screen and (max-width:766px){
	.about-service .service-right .service-box{width: 100%; height: 1100px;}
	.about-service .service-right .service-box .s-top{margin-left: -130px}
	.about-service .service-right .service-box .s-right{top: 280px; right: 50%; margin-top: 0; margin-right: -130px;}
	.about-service .service-right .service-box .s-left{width: 360px; height: 360px; top: 510px; left: 50%; margin-top: 0; margin-left: -180px;}
	.about-service .service-right .service-box .s-left .s-item-in .s-in-block{margin: 50px auto}
	.about-service .service-right .service-box .s-bottom{bottom: 0; margin-left: -130px}
	.h4-display{display: block;}
}
/* 2. 2 Column Grid Infinity - 767px
----------------------------------------------------------------------------- */
@media screen and (min-width:767px){

}
@media screen and (max-width:767px){
	.oh-itm{justify-content: center; flex-wrap: wrap; align-items:flex-start;}
	.oh-itm li{width: 50%; margin-bottom: 40px;}
	.oh-itm div{margin: 0 auto 20px;}
	.ohmeet-2 .h3-new{margin-top: 0}
	.ohmeet-2 .h3-new b::before,
	.ohmeet-3 .h3-new b::before{top: auto; bottom: 0; transform: translate(-50%, 0);}
	.ohmeet-1 .h3-new span{font-size:1.8em;}
	.ohmeet-1 .h3-new b{font-size:2.3em;}
	.ohmeet-3 .h3-new b,
	.ohmeet-2 .h3-new b em{font-size:2.1em;}
	.about-design ul li{padding-bottom: 50px; float: none; width: 100%}
	.about-design ul li .design-box{width: 100%}
	.about-design ul li .design-num{margin-left: 22px}
	.about-design ul li .design-arrow{margin-left: 30px}
	.list-item ul li a{padding:20px 0px;}
	.list-item ul li a:hover,
	.list-item ul li a:active,
	.list-item ul li a:focus{padding:20px 0px;background:transparent;}
	.list-item ul li a:hover .item-box img,
	.list-item ul li a:active.item-bo img,
	.list-item ul li a:focus.item-box img{
		-webkit-transform:  scale(1.05);
		-moz-transform: scale(1.05);
		-o-transform: scale(1.05);
		-ms-transform:  scale(1.05);
		transform: scale(1.05);
	}
	.list-item ul li a:hover .item-box .item-h3,
	.list-item ul li a:active .item-box .item-h3,
	.list-item ul li a:focus .item-box .item-h3{font-weight:bold;}
	.list-item ul li a .item-box{float: none; width: 100%}
	.list-item ul li a .item-box .item-h3{padding-bottom: 5px; font-size: 1.7em;white-space:normal;overflow:visible;text-overflow:clip}
	.list-item ul li a .item-box img{display: block; max-width: 100%; margin-bottom: 30px;}
	.list-item ul li a .item-arrow{display: none;}
	.btn-backlist a .text-list{display: none;}
	.project-info ul li{padding: 10px 10px 20px; float: none; width:100% !important; border-bottom: 1px solid #eee}
	.project-info ul li p a{height: auto}
	.project-info ul li p a .a-line{top: 0}
	.project-info ul li p a .a-spin-down{top: 0}
	.project-info ul li p a:hover .a-spin-top{top: -2px}
	.project-info ul li p a:hover .a-spin-down{top: 2px}
	.mobile-device ul li{width: 100%}
	.map{padding-top: 0}
	.tabarea{width: 100%;}
	.info-item ul li{float: none; width: 100%;}
	.info-item ul li .info-box{margin: 20px 10px 60px 10px; padding: 10px;}

	.banner-zone{height:500px;}
	.banner-zone .regular .regular-item{height:500px;}
	.banner-zone .regular .regular-item a{height: 250px;}
	.banner-zone .regular .regular-item img{min-height:250px;}
	.banner-zone .regular .regular-item.no-img{height:250px;}
	.banner-zone .regular .regular-item a h4{left: 20px; top: auto; bottom: 20px;}
}

/* 3. 1 Column Grid 768px - 1024px
----------------------------------------------------------------------------- */
@media screen and (min-width:767px) and (max-width:767px){
	.about-service .service-right .service-box{width: 100%; height: 550px;}
	.about-service .service-right .service-box .s-top{margin-left: -285px}
	.about-service .service-right .service-box .s-right{top: 0; right: 50%; margin-top: 0; margin-right: -285px;}
	.about-service .service-right .service-box .s-bottom{bottom: 0; left: 50%; margin-left: -285px}
	.about-service .service-right .service-box .s-left{width: 260px; height: 260px; top: auto; left: 53%; bottom: 0;margin-right: -285px; margin-top: 0; background-color: #fd531a; background-image:none; box-shadow: 0 20px 30px -10px rgb(0 0 0 / 40%)}
	.about-service .service-right .service-box .s-left .s-item-in .s-in-block{margin: 0 auto; box-shadow: none; background-color: #fd531a; box-shadow: 0 20px 30px -10px rgb(255 50 0 / 90%);}
	.about-service .service-right .service-box .s-left .s-item-in .s-in-block dl dd{color: #202020}
	.about-design ul li{padding-bottom: 50px; float: none; width: 100%}
	.about-design ul li .design-box{width: 100%}
	.about-design ul li .design-num{margin-left: 22px}
	.about-design ul li .design-arrow{margin-left: 30px}
}
@media screen and (min-width:768px) and (max-width:1024px){
	.about-service .service-right .service-box{width: 100%; height: 550px;}
	.about-service .service-right .service-box .s-top{margin-left: -285px}
	.about-service .service-right .service-box .s-right{top: 0; right: 50%; margin-top: 0; margin-right: -285px;}
	.about-service .service-right .service-box .s-bottom{bottom: 0; left: 50%; margin-left: -285px}
	.about-service .service-right .service-box .s-left{width: 260px; height: 260px; top: auto; left: 53%; bottom: 0;margin-right: -285px; margin-top: 0; background-color: #ffdf1b; background-image:none; box-shadow: 0 20px 30px -10px rgb(0 0 0 / 40%)}
	.about-service .service-right .service-box .s-left .s-item-in .s-in-block{margin: 0 auto; box-shadow: none; background-color: #ffdf1b; box-shadow: 0 20px 30px -10px rgb(255 223 27 / 99%);}
	.about-service .service-right .service-box .s-left .s-item-in .s-in-block dl dd{color: #202020}
	.about-design ul li{padding-bottom: 50px; float: none; width: 100%; overflow: hidden}
	.about-design ul li .design-num{padding-top: 20px; margin-left: 0; float: left; width: 12%;}
	.about-design ul li .design-num span{display: none}
	.about-design ul li .design-arrow{padding-top: 50px; margin-left: 0; float: left;
		border-top:16px solid transparent;
		border-right: 18px solid #eee;
		border-bottom: 16px solid transparent}
	.about-design ul li .yell{border-right: 18px solid #191919; border-bottom:16px solid transparent !important}
	.about-design ul li .design-box{padding: 0 30px 80px; float: left; width: 80%; background-position: 95% 80%;}
	.about-design ul li .design-box dl{padding-top: 40px;}
	.mobile-device ul li{width: 50%}
	.mobile-device ul li.top-two{display: none;}
	.next-project .next-inner a h3, .project-area .project-top .project-name div h3{font-size:2em;}
}

/* 3. 2 Column Grid Infinity - 1024px
----------------------------------------------------------------------------- */
@media screen and (min-width:1024px){
}

/* 3. 3 Column Grid Infinity - 1023px
----------------------------------------------------------------------------- */
@media screen and (max-width:1023px){
	.h3-style{padding-top: 50px;}
	.page-inner{position: relative; margin:0 auto; width:100%}
	.content-area{padding: 50px 8%}
	.about-technology ul{padding: 10px 0 30px}
	.about-technology ul li{margin-top: 30px; float: none; width: 100%}
	.about-technology ul li:first-child{margin-top: 0;}
	.about-technology ul li.t-pad70t{padding-top: 0}
	.about-technology ul li .t-item{padding: 40px; margin: 0 auto; position: relative; width: 100%; text-align: left; background-position: 95% center}
	.about-technology ul li .t-item::after{display: none}
	.about-technology ul li .t-item .t-big{margin-top: 0; padding-top: 0; border-top: none; width: 85%;}
	.btn-backlist a{width: 80px; height: 70px;}
	.desktop-device ul{float: none; width: 100%;}
	.desktop-device ul li{padding: 40px 5%}
	.project-info ul li{width:50%}
	.project-area .project-top .project-name div{padding:0;}
}


/* 4. 1 Column Grid 1025px - 1199px (Site Default 1200px :No Media Query)
----------------------------------------------------------------------------- */
@media screen and (min-width:1025px) and (max-width:1199px){
	.mobile-device ul li{width: 50%}
	.next-project .next-inner a h3, .project-area .project-top .project-name div h3{font-size:3em;}
}

@media screen and (max-width: 1199px){
	.point01::before,
	.point02::before,
	.point03::before,
	.point04::before,
	.point05::before{display: none;}
	.ohmeet-1 .oto-anim{top: -20%; right: -40%;}
	.oh-vis{width: 100%;}
	.webcam{right: -5%; bottom: 40px; width: 80px; height: auto;}
	.o-point{margin-top: 0; margin-bottom: 0; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; align-items:flex-start;}
	.o-left,
	.o-right{width: 100%; margin-bottom: 50px;}
	.project-pc,
	.project-app{position: relative; width: 100%; clear: both; border-bottom: 1px solid #eee;}
	.project-pc .notebook,
	.project-app .d-app{position:relative; margin: 0 auto; padding: 15px 10px 20px 10px;}
	.project-pc .notebook .notebook-obj,
	.project-app .d-app .d-app-obj{position:relative;}
	.project-pc .notebook .notebook-obj .dnp-logo,
	.project-app .d-app .d-app-obj .dnp-logo{padding-bottom: 5px; color: #191919;font-weight: 600; letter-spacing: 0.05em;}
	.project-pc .notebook .notebook-obj .main-sian,
	.project-app .d-app .d-app-obj .main-sian{display: none;}

	.project-pc .notebook .role-java,
	.project-pc .notebook .role-php,
	.project-pc .notebook .role-js,
	.project-pc .notebook .role-left,
	.project-pc .notebook .role-top,
	.project-pc .notebook .role-right,
	.project-pc .notebook .role-bottom,
	.project-pc .notebook .role-r-right,
	.project-pc .notebook .role-r-bottom,
	.project-pc .notebook .role-r-left,
	.project-pc .notebook .role-round-java,
	.project-pc .notebook .role-round-js,
	.project-pc .notebook .role-round-php,
	.project-app .d-app .role-java,
	.project-app .d-app .role-php,
	.project-app .d-app .role-js,
	.project-app .d-app .role-left,
	.project-app .d-app .role-top,
	.project-app .d-app .role-right,
	.project-app .d-app .role-bottom,
	.project-app .d-app .role-r-right,
	.project-app .d-app .role-r-bottom,
	.project-app .d-app .role-r-left,
	.project-app .d-app .role-round-java,
	.project-app .d-app .role-round-js,
	.project-app .d-app .role-round-php{display: none;}

	.project-pc .notebook .role-java-m,
	.project-pc .notebook .role-php-m,
	.project-pc .notebook .role-js-m,
	.project-pc .notebook .role-html,
	.project-pc .notebook .role-design,
	.project-pc .notebook .role-cibi,
	.project-app .d-app .role-java-m,
	.project-app .d-app .role-php-m,
	.project-app .d-app .role-js-m,
	.project-app .d-app .role-html,
	.project-app .d-app .role-design,
	.project-app .d-app .role-cibi{letter-spacing: 0.03em; color: #999;}

	.project-pc .notebook span::after,
	.project-area .project-app .d-app span::after{content: ' . ';}
	.overview{padding: 30px 10px 0;}
	.mobile-device ul li.top-two{display: none}
}
@media screen and (min-width: 1200px){
	/* website일 경우 */
	.project-pc{position: relative; padding: 150px 0 0; margin: 50px auto; width: 100%; overflow: hidden;}
	.project-pc .notebook{position:relative; margin: 0 auto; padding-top: 35px; width: 1110px; height: 700px; background-image: url(../images/contents/works/notebook.png); background-repeat: no-repeat; background-position: center}
	.project-pc .notebook .notebook-obj{margin: 20px auto 0; position:relative; width: 788px; height: 515px; background-color: #111;overflow: hidden;}
	.project-pc .notebook .notebook-obj .dnp-logo{position: absolute; top: 40%; left: 33%; font-size: 3em; font-weight: 600; letter-spacing: 0.05em; color: #fff;}
	.project-pc .notebook .notebook-obj .dnp-logo{
		-webkit-animation: dnp-logo 3s ease-out 1.5s 1 both;
		-moz-animation: dnp-logo 3s ease-out 1.5s 1 both;
		-o-animation: dnp-logo 3s ease-out 1.5s 1 both;
		-ms-animation: dnp-logo 3s ease-out 1.5s 1 both;
		animation: dnp-logo 3s ease-out 1.5s 1 both
	}
	.project-pc .notebook .notebook-obj .main-sian{position: absolute; left: 0; top: 0}
	.project-pc .notebook .notebook-obj .main-sian img{width: 100%}
	.project-pc .notebook .notebook-obj .main-sian img{
		-webkit-animation: main-sian 3s ease-out 4.5s 1 both;
		-moz-animation: main-sian 3s ease-out 4.5s 1 both;
		-o-animation: main-sian 3s ease-out 4.5s 1 both;
		-ms-animation: main-sian 3s ease-out 4.5s 1 both;
		animation: main-sian 3s ease-out 4.5s 1 both
	}
	.project-pc .notebook .role-java,
	.project-pc .notebook .role-php,
	.project-pc .notebook .role-js,
	.project-pc .notebook .role-html,
	.project-pc .notebook .role-design,
	.project-pc .notebook .role-cibi{position: absolute; opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)}
	.project-pc .notebook .role-html,
	.project-pc .notebook .role-design,
	.project-pc .notebook .role-cibi{font-size: 1.2em; font-weight: 600; letter-spacing: 0.05em; color: #fd531a}
	.project-pc .notebook .role-java-m,
	.project-pc .notebook .role-php-m,
	.project-pc .notebook .role-js-m{display: none}
	.project-pc .notebook .role-java{
		width: 150px;
		-webkit-animation: role-java 1.5s ease-out 7.9s 1 forwards;
		-moz-animation: role-java 1.5s ease-out 7.9s 1 forwards;
		-o-animation: role-java 1.5s ease-out 7.9s 1 forwards;
		-ms-animation: role-java 1.5s ease-out 7.9s 1 forwards;
		animation: role-java 1.5s ease-out 7.9s 1 forwards
	}
	.project-pc .notebook .role-php{
		width: 130px;
		-webkit-animation: role-php 1.5s ease-out 7.9s 1 forwards;
		-moz-animation: role-php 1.5s ease-out 7.9s 1 forwards;
		-o-animation: role-php 1.5s ease-out 7.9s 1 forwards;
		-ms-animation: role-php 1.5s ease-out 7.9s 1 forwards;
		animation: role-php 1.5s ease-out 7.9s 1 forwards
	}
	.project-pc .notebook .role-js{
		width: 130px;
		-webkit-animation: role-js 1.5s ease-out 7.9s 1 forwards;
		-moz-animation: role-js 1.5s ease-out 7.9s 1 forwards;
		-o-animation: role-js 1.5s ease-out 7.9s 1 forwards;
		-ms-animation: role-js 1.5s ease-out 7.9s 1 forwards;
		animation: role-js 1.5s ease-out 7.9s 1 forwards
	}
	.project-pc .notebook .role-html{
		-webkit-animation: role-html .5s ease-out 8.4s 1 forwards;
		-moz-animation: role-html .5s ease-out 8.4s 1 forwards;
		-o-animation: role-html .5s ease-out 8.4s 1 forwards;
		-ms-animation: role-html .5s ease-out 8.4s 1 forwards;
		animation: role-html .5s ease-out 8.4s 1 forwards
	}
	.project-pc .notebook .role-design{
		-webkit-animation: role-design .5s ease-out 8.4s 1 forwards;
		-moz-animation: role-design .5s ease-out 8.4s 1 forwards;
		-o-animation: role-design .5s ease-out 8.4s 1 forwards;
		-ms-animation: role-design .5s ease-out 8.4s 1 forwards;
		animation: role-design .5s ease-out 8.4s 1 forwards
	}
	.project-pc .notebook .role-cibi{
		-webkit-animation: role-cibi .5s ease-out 8.4s 1 forwards;
		-moz-animation: role-cibi .5s ease-out 8.4s 1 forwards;
		-o-animation: role-cibi .5s ease-out 8.4s 1 forwards;
		-ms-animation: role-cibi .5s ease-out 8.4s 1 forwards;
		animation: role-cibi .5s ease-out 8.4s 1 forwards
	}
	.project-pc .notebook .role-left,
	.project-pc .notebook .role-top,
	.project-pc .notebook .role-right,
	.project-pc .notebook .role-bottom,
	.project-pc .notebook .role-r-right,
	.project-pc .notebook .role-r-bottom,
	.project-pc .notebook .role-r-left{display: block; position: absolute; border-color: #fd531a; border-style: dashed; opacity: 0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)}
	.project-pc .notebook .role-left{right: 980px; top: 330px; width: 40px; height: 1px; border-top-width: 1px}
	.project-pc .notebook .role-top{right: 1058px; bottom: 370px;width: 1px; height: 380px; border-left-width: 1px}
	.project-pc .notebook .role-right{left:51px; top:-50px; width: 900px; height: 1px; border-top-width: 1px}
	.project-pc .notebook .role-bottom{right: 207px; top: -50px; width: 1px; height: 73px;border-left-width: 1px}
	.project-pc .notebook .role-r-right{left: 977px; top: 140px;width: 100px; height: 1px; border-top-width: 1px}
	.project-pc .notebook .role-r-bottom{left: 1056px; top: 140px; width: 1px; height: 345px;border-left-width: 1px}
	.project-pc .notebook .role-r-left{right: 54px; top: 484px; width: 100px; height: 1px; border-top-width: 1px}
	.project-pc .notebook .role-left{
		-webkit-animation: role-left .3s linear 9.5s forwards;
		-moz-animation: role-left .3s linear 9.5s forwards;
		-o-animation: role-left .3s linear 9.5s forwards;
		-ms-animation: role-left .3s linear 9.5s forwards;
		animation: role-left .3s linear 9.5s forwards
	}
	.project-pc .notebook .role-top{
		-webkit-animation: role-top .5s linear 9.8s forwards;
		-moz-animation: role-top .5s linear 9.8s forwards;
		-o-animation: role-top .5s linear 9.8s forwards;
		-ms-animation: role-top .5s linear 9.8s forwards;
		animation: role-top .5s linear 9.8s forwards
	}
	.project-pc .notebook .role-right{
		-webkit-animation: role-right 1s linear 10.3s forwards;
		-moz-animation: role-right 1s linear 10.3s forwards;
		-o-animation: role-right 1s linear 10.3s forwards;
		-ms-animation: role-right 1s linear 10.3s forwards;
		animation: role-right 1s linear 10.3s forwards
	}
	.project-pc .notebook .role-bottom{
		-webkit-animation: role-bottom .3s linear 11.3s forwards;
		-moz-animation: role-bottom .3s linear 11.3s forwards;
		-o-animation: role-bottom .3s linear 11.3s forwards;
		-ms-animation: role-bottom .3s linear 11.3s forwards;
		animation: role-bottom .3s linear 11.3s forwards
	}
	.project-pc .notebook .role-r-right{
		-webkit-animation: role-r-right .3s linear 11.7s forwards;
		-moz-animation: role-r-right .3s linear 11.7s forwards;
		-o-animation: role-r-right .3s linear 11.7s forwards;
		-ms-animation: role-r-right .3s linear 11.7s forwards;
		animation: role-r-right .3s linear 11.7s forwards
	}
	.project-pc .notebook .role-r-bottom{
		-webkit-animation: role-r-bottom .4s linear 12.0s forwards;
		-moz-animation: role-r-bottom .4s linear 12.0s forwards;
		-o-animation: role-r-bottom .4s linear 12.0s forwards;
		-ms-animation: role-r-bottom .4s linear 12.0s forwards;
		animation: role-r-bottom .4s linear 12.0s forwards
	}
	.project-pc .notebook .role-r-left{
		-webkit-animation: role-r-left .3s linear 12.5s forwards;
		-moz-animation: role-r-left .3s linear 12.5s forwards;
		-o-animation: role-r-left .3s linear 12.5s forwards;
		-ms-animation: role-r-left .3s linear 12.5s forwards;
		animation: role-r-left .3s linear 12.5s forwards
	}
	.project-pc .notebook .role-round-java,
	.project-pc .notebook .role-round-js,
	.project-pc .notebook .role-round-php{display: block; position: absolute; background-color: #fd531a; opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);}
	.project-pc .notebook .role-round-java{right: 220px; top: 28px; width: 15px; height: 9px; border-radius: 10px}
	.project-pc .notebook .role-round-js{left: 148px; bottom: 207px; width: 13px; height: 13px; border-radius: 50%}
	.project-pc .notebook .role-round-php{right: 110px; bottom: 207px; width: 20px; height: 20px; border-radius: 50%}
	.project-pc .notebook .role-round-java{
		-webkit-animation: role-round-java .7s ease-in 13.0s infinite alternate-reverse;
		-moz-animation: role-round-java .7s ease-in 13.0s infinite alternate-reverse;
		-o-animation: role-round-java .7s ease-in 13.0s infinite alternate-reverse;
		-ms-animation: role-round-java .7s ease-in 13.0s infinite alternate-reverse;
		animation: role-round-java .7s ease-in 13.0s infinite alternate-reverse
	}
	.project-pc .notebook .role-round-js{
		-webkit-animation: role-round-js .7s ease-in 13.0s infinite;
		-moz-animation: role-round-js .7s ease-in 13.0s infinite;
		-o-animation: role-round-js .7s ease-in 13.0s infinite;
		-ms-animation: role-round-js .7s ease-in 13.0s infinite;
		animation: role-round-js .7s ease-in 13.0s infinite
	}
	.project-pc .notebook .role-round-php{
		-webkit-animation: role-round-php .7s ease-in 13.0s infinite;
		-moz-animation: role-round-php .7s ease-in 13.0s infinite;
		-o-animation: role-round-php .7s ease-in 13.0s infinite;
		-ms-animation: role-round-php .7s ease-in 13.0s infinite;
		animation: role-round-php .7s ease-in 13.0s infinite
	}

	/* app일 경우 */
	.project-app{position: relative; padding: 130px 0 0; margin: 0 auto; width: 100%; overflow: hidden}
	.project-app .d-app{position:relative; margin: 0 auto; padding-top: 78px; width: 600px; height: 700px; background-image: url(../images/contents/works/app.png); background-repeat: no-repeat; background-position: center}
	.project-app .d-app .d-app-obj{margin: 20px auto 0; position:relative; width: 278px; height: 460px; background-color: #202020;overflow: hidden;}
	.project-app .d-app .d-app-obj .dnp-logo{position: absolute; top: 20%; left: 13%; font-size: 2.2em; font-weight: 600; letter-spacing: 0.05em; color: #fff;}
	.project-app .d-app .d-app-obj .dnp-logo{
		-webkit-animation: dnp-logo 3s ease-out 1.5s 1 both;
		-moz-animation: dnp-logo 3s ease-out 1.5s 1 both;
		-o-animation: dnp-logo 3s ease-out 1.5s 1 both;
		-ms-animation: dnp-logo 3s ease-out 1.5s 1 both;
		animation: dnp-logo 3s ease-out 1.5s 1 both
	}
	.project-app .d-app .d-app-obj .main-sian{position: absolute; left: 0; top: 0}
	.project-app .d-app .d-app-obj .main-sian img{width: 100%}
	.project-app .d-app .d-app-obj .main-sian img{
		-webkit-animation: main-sian 3s ease-out 4.5s 1 both;
		-moz-animation: main-sian 3s ease-out 4.5s 1 both;
		-o-animation: main-sian 3s ease-out 4.5s 1 both;
		-ms-animation: main-sian 3s ease-out 4.5s 1 both;
		animation: main-sian 3s ease-out 4.5s 1 both
	}
	.project-app .d-app .role-java,
	.project-app .d-app .role-php,
	.project-app .d-app .role-js,
	.project-app .d-app .role-html,
	.project-app .d-app .role-design,
	.project-app .d-app .role-cibi{position: absolute; opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)}
	.project-app .d-app .role-html,
	.project-app .d-app .role-design,
	.project-app .d-app .role-cibi{font-size: 1.2em; font-weight: 600; letter-spacing: 0.05em; color: #fd531a}
	.project-app .d-app .role-java-m,
	.project-app .d-app .role-php-m,
	.project-app .d-app .role-js-m{display: none}
	.project-app .d-app .role-java{
		width: 150px;
		-webkit-animation: m-role-java 1.5s ease-out 7.9s 1 forwards;
		-moz-animation: m-role-java 1.5s ease-out 7.9s 1 forwards;
		-o-animation: m-role-java 1.5s ease-out 7.9s 1 forwards;
		-ms-animation: m-role-java 1.5s ease-out 7.9s 1 forwards;
		animation: m-role-java 1.5s ease-out 7.9s 1 forwards
	}
	.project-app .d-app .role-php{
		width: 130px;
		-webkit-animation: m-role-php 1.5s ease-out 7.9s 1 forwards;
		-moz-animation: m-role-php 1.5s ease-out 7.9s 1 forwards;
		-o-animation: m-role-php 1.5s ease-out 7.9s 1 forwards;
		-ms-animation: m-role-php 1.5s ease-out 7.9s 1 forwards;
		animation: m-role-php 1.5s ease-out 7.9s 1 forwards
	}
	.project-app .d-app .role-js{
		width: 130px;
		-webkit-animation: role-js 1.5s ease-out 7.9s 1 forwards;
		-moz-animation: role-js 1.5s ease-out 7.9s 1 forwards;
		-o-animation: role-js 1.5s ease-out 7.9s 1 forwards;
		-ms-animation: role-js 1.5s ease-out 7.9s 1 forwards;
		animation: role-js 1.5s ease-out 7.9s 1 forwards
	}
	.project-app .d-app .role-html{
		-webkit-animation: m-role-html .5s ease-out 8.4s 1 forwards;
		-moz-animation: m-role-html .5s ease-out 8.4s 1 forwards;
		-o-animation: m-role-html .5s ease-out 8.4s 1 forwards;
		-ms-animation: m-role-html .5s ease-out 8.4s 1 forwards;
		animation: m-role-html .5s ease-out 8.4s 1 forwards
	}
	.project-app .d-app .role-design{
		-webkit-animation: role-design .5s ease-out 8.4s 1 forwards;
		-moz-animation: role-design .5s ease-out 8.4s 1 forwards;
		-o-animation: role-design .5s ease-out 8.4s 1 forwards;
		-ms-animation: role-design .5s ease-out 8.4s 1 forwards;
		animation: role-design .5s ease-out 8.4s 1 forwards
	}
	.project-app .d-app .role-cibi{
		-webkit-animation: role-cibi .5s ease-out 8.4s 1 forwards;
		-moz-animation: role-cibi .5s ease-out 8.4s 1 forwards;
		-o-animation: role-cibi .5s ease-out 8.4s 1 forwards;
		-ms-animation: role-cibi .5s ease-out 8.4s 1 forwards;
		animation: role-cibi .5s ease-out 8.4s 1 forwards
	}
	.project-app .d-app .role-left,
	.project-app .d-app .role-top,
	.project-app .d-app .role-right,
	.project-app .d-app .role-bottom,
	.project-app .d-app .role-r-right,
	.project-app .d-app .role-r-bottom,
	.project-app .d-app .role-r-left{display: block; position: absolute; border-color: #fd531a; border-style: dashed; opacity: 0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)}
	.project-app .d-app .role-left{right: 450px; top: 330px; height: 1px; border-top-width: 1px}
	.project-app .d-app .role-top{right: 650px; bottom: 370px;width: 1px; height: 380px; border-left-width: 1px}
	.project-app .d-app .role-right{left:-50px; top:-50px; height: 1px; border-top-width: 1px}
	.project-app .d-app .role-bottom{right: 199px; top: -50px; width: 1px; border-left-width: 1px}
	.project-app .d-app .role-r-right{left: 450px; top: 140px;width: 100px; height: 1px; border-top-width: 1px}
	.project-app .d-app .role-r-bottom{left: 610px; top: 140px; width: 1px; height: 345px;border-left-width: 1px}
	.project-app .d-app .role-r-left{right: -10px; top: 484px; width: 100px; height: 1px; border-top-width: 1px}
	.project-app .d-app .role-left{
		-webkit-animation: m-role-left .3s linear 9.5s forwards;
		-moz-animation: m-role-left .3s linear 9.5s forwards;
		-o-animation: m-role-left .3s linear 9.5s forwards;
		-ms-animation: m-role-left .3s linear 9.5s forwards;
		animation: m-role-left .3s linear 9.5s forwards
	}
	.project-app .d-app .role-top{
		-webkit-animation: role-top .5s linear 9.8s forwards;
		-moz-animation: role-top .5s linear 9.8s forwards;
		-o-animation: role-top .5s linear 9.8s forwards;
		-ms-animation: role-top .5s linear 9.8s forwards;
		animation: role-top .5s linear 9.8s forwards
	}
	.project-app .d-app .role-right{
		-webkit-animation: m-role-right 1s linear 10.3s forwards;
		-moz-animation: m-role-right 1s linear 10.3s forwards;
		-o-animation: m-role-right 1s linear 10.3s forwards;
		-ms-animation: m-role-right 1s linear 10.3s forwards;
		animation: m-role-right 1s linear 10.3s forwards
	}
	.project-app .d-app .role-bottom{
		-webkit-animation: m-role-bottom .3s linear 11.3s forwards;
		-moz-animation: m-role-bottom .3s linear 11.3s forwards;
		-o-animation: m-role-bottom .3s linear 11.3s forwards;
		-ms-animation: m-role-bottom .3s linear 11.3s forwards;
		animation: m-role-bottom .3s linear 11.3s forwards
	}
	.project-app .d-app .role-r-right{
		-webkit-animation: m-role-r-right .3s linear 11.7s forwards;
		-moz-animation: m-role-r-right .3s linear 11.7s forwards;
		-o-animation: m-role-r-right .3s linear 11.7s forwards;
		-ms-animation: m-role-r-right .3s linear 11.7s forwards;
		animation: m-role-r-right .3s linear 11.7s forwards
	}
	.project-app .d-app .role-r-bottom{
		-webkit-animation: role-r-bottom .4s linear 12.0s forwards;
		-moz-animation: role-r-bottom .4s linear 12.0s forwards;
		-o-animation: role-r-bottom .4s linear 12.0s forwards;
		-ms-animation: role-r-bottom .4s linear 12.0s forwards;
		animation: role-r-bottom .4s linear 12.0s forwards
	}
	.project-app .d-app .role-r-left{
		-webkit-animation: m-role-r-left .3s linear 12.5s forwards;
		-moz-animation: m-role-r-left .3s linear 12.5s forwards;
		-o-animation: m-role-r-left .3s linear 12.5s forwards;
		-ms-animation: m-role-r-left .3s linear 12.5s forwards;
		animation: m-role-r-left .3s linear 12.5s forwards
	}
	.project-app .d-app .role-round-java,
	.project-app .d-app .role-round-js,
	.project-app .d-app .role-round-php{display: block; position: absolute; background-color: #fd531a; opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);}
	.project-app .d-app .role-round-java{right: 170px; top: 28px; width: 15px; height: 9px; border-radius: 10px}
	.project-app .d-app .role-round-js{left: 121px; bottom: 207px; width: 13px; height: 13px; border-radius: 50%}
	.project-app .d-app .role-round-php{right: 39px; bottom: 207px; width: 20px; height: 20px; border-radius: 50%}
	.project-app .d-app .role-round-java{
		-webkit-animation: role-round-java .7s ease-in 13.0s infinite alternate-reverse;
		-moz-animation: role-round-java .7s ease-in 13.0s infinite alternate-reverse;
		-o-animation: role-round-java .7s ease-in 13.0s infinite alternate-reverse;
		-ms-animation: role-round-java .7s ease-in 13.0s infinite alternate-reverse;
		animation: role-round-java .7s ease-in 13.0s infinite alternate-reverse
	}
	.project-app .d-app .role-round-js{
		-webkit-animation: role-round-js .7s ease-in 13.0s infinite;
		-moz-animation: role-round-js .7s ease-in 13.0s infinite;
		-o-animation: role-round-js .7s ease-in 13.0s infinite;
		-ms-animation: role-round-js .7s ease-in 13.0s infinite;
		animation: role-round-js .7s ease-in 13.0s infinite
	}
	.project-app .d-app .role-round-php{
		-webkit-animation: role-round-php .7s ease-in 13.0s infinite;
		-moz-animation: role-round-php .7s ease-in 13.0s infinite;
		-o-animation: role-round-php .7s ease-in 13.0s infinite;
		-ms-animation: role-round-php .7s ease-in 13.0s infinite;
		animation: role-round-php .7s ease-in 13.0s infinite
	}

	@-webkit-keyframes dnp-logo{
		0%{
			top:40%;
			opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)
		}
		10%{
			top:43%;
			opacity: 1; -ms-filter:none; filter:none
		}
		80%{
			top:43%;
			opacity: 1; -ms-filter:none; filter:none
		}
		100%{
			top:40%;
			opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)
		}
	}
	@-moz-keyframes dnp-logo{
		0%{
			top:40%;
			opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)
		}
		10%{
			top:43%;
			opacity: 1; -ms-filter:none; filter:none
		}
		80%{
			top:43%;
			opacity: 1; -ms-filter:none; filter:none
		}
		100%{
			top:40%;
			opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)
		}
	}
	@-o-keyframes dnp-logo{
		0%{
			top:40%;
			opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)
		}
		10%{
			top:43%;
			opacity: 1; -ms-filter:none; filter:none
		}
		80%{
			top:43%;
			opacity: 1; -ms-filter:none; filter:none
		}
		100%{
			top:40%;
			opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)
		}
	}
	@keyframes dnp-logo{
		0%{
			top:40%;
			opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)
		}
		10%{
			top:43%;
			opacity: 1; -ms-filter:none; filter:none
		}
		80%{
			top:43%;
			opacity: 1; -ms-filter:none; filter:none
		}
		100%{
			top:40%;
			opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)
		}
	}
	@-webkit-keyframes main-sian{
		0%{
			-webkit-transform: translate(100%, 0%) scale(1.05);
			-moz-transform: translate(100%, 0%) scale(1.05);
			-o-transform: translate(100%, 0%) scale(1.05);
			-ms-transform: translate(100%, 0%) scale(1.05);
			transform: translate(100%, 0%) scale(1.05);
			opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)
		}
		30%{
			-webkit-transform: translate(0%, 0%) scale(1.05);
			-moz-transform: translate(0%, 0%) scale(1.05);
			-o-transform: translate(0%, 0%) scale(1.05);
			-ms-transform: translate(0%, 0%) scale(1.05);
			transform: translate(0%, 0%) scale(1.05);
			opacity: 1; -ms-filter:none; filter:none
		}
		70%{
			-webkit-transform: translate(0, 0%) scale(1.05);
			-moz-transform: translate(0, 0%) scale(1.05);
			-o-transform: translate(0, 0%) scale(1.05);
			-ms-transform: translate(0, 0%) scale(1.05);
			transform: translate(0, 0%) scale(1.05)
		}
		90%{
			-webkit-transform: translate(0, 0%) scale(1.0);
			-moz-transform: translate(0, 0%) scale(1.0);
			-o-transform: translate(0, 0%) scale(1.0);
			-ms-transform: translate(0, 0%) scale(1.0);
			transform: translate(0, 0%) scale(1.0)
		}
		100%{
			-webkit-transform: translate(0, 0%) scale(1.0);
			-moz-transform: translate(0, 0%) scale(1.0);
			-o-transform: translate(0, 0%) scale(1.0);
			-ms-transform: translate(0, 0%) scale(1.0);
			transform: translate(0, 0%) scale(1.0);
			opacity: .8; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0.95)";filter:alpha(opacity=0.8)
		}
	}
	@-moz-keyframes main-sian{
		0%{
			-webkit-transform: translate(100%, 0%) scale(1.05);
			-moz-transform: translate(100%, 0%) scale(1.05);
			-o-transform: translate(100%, 0%) scale(1.05);
			-ms-transform: translate(100%, 0%) scale(1.05);
			transform: translate(100%, 0%) scale(1.05);
			opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)
		}
		30%{
			-webkit-transform: translate(0%, 0%) scale(1.05);
			-moz-transform: translate(0%, 0%) scale(1.05);
			-o-transform: translate(0%, 0%) scale(1.05);
			-ms-transform: translate(0%, 0%) scale(1.05);
			transform: translate(0%, 0%) scale(1.05);
			opacity: 1; -ms-filter:none; filter:none
		}
		70%{
			-webkit-transform: translate(0, 0%) scale(1.05);
			-moz-transform: translate(0, 0%) scale(1.05);
			-o-transform: translate(0, 0%) scale(1.05);
			-ms-transform: translate(0, 0%) scale(1.05);
			transform: translate(0, 0%) scale(1.05)
		}
		90%{
			-webkit-transform: translate(0, 0%) scale(1.0);
			-moz-transform: translate(0, 0%) scale(1.0);
			-o-transform: translate(0, 0%) scale(1.0);
			-ms-transform: translate(0, 0%) scale(1.0);
			transform: translate(0, 0%) scale(1.0)
		}
		100%{
			-webkit-transform: translate(0, 0%) scale(1.0);
			-moz-transform: translate(0, 0%) scale(1.0);
			-o-transform: translate(0, 0%) scale(1.0);
			-ms-transform: translate(0, 0%) scale(1.0);
			transform: translate(0, 0%) scale(1.0);
			opacity: .8; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0.95)";filter:alpha(opacity=0.8)
		}
	}
	@-o-keyframes main-sian{
		0%{
			-webkit-transform: translate(100%, 0%) scale(1.05);
			-moz-transform: translate(100%, 0%) scale(1.05);
			-o-transform: translate(100%, 0%) scale(1.05);
			-ms-transform: translate(100%, 0%) scale(1.05);
			transform: translate(100%, 0%) scale(1.05);
			opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)
		}
		30%{
			-webkit-transform: translate(0%, 0%) scale(1.05);
			-moz-transform: translate(0%, 0%) scale(1.05);
			-o-transform: translate(0%, 0%) scale(1.05);
			-ms-transform: translate(0%, 0%) scale(1.05);
			transform: translate(0%, 0%) scale(1.05);
			opacity: 1; -ms-filter:none; filter:none
		}
		70%{
			-webkit-transform: translate(0, 0%) scale(1.05);
			-moz-transform: translate(0, 0%) scale(1.05);
			-o-transform: translate(0, 0%) scale(1.05);
			-ms-transform: translate(0, 0%) scale(1.05);
			transform: translate(0, 0%) scale(1.05)
		}
		90%{
			-webkit-transform: translate(0, 0%) scale(1.0);
			-moz-transform: translate(0, 0%) scale(1.0);
			-o-transform: translate(0, 0%) scale(1.0);
			-ms-transform: translate(0, 0%) scale(1.0);
			transform: translate(0, 0%) scale(1.0)
		}
		100%{
			-webkit-transform: translate(0, 0%) scale(1.0);
			-moz-transform: translate(0, 0%) scale(1.0);
			-o-transform: translate(0, 0%) scale(1.0);
			-ms-transform: translate(0, 0%) scale(1.0);
			transform: translate(0, 0%) scale(1.0);
			opacity: .8; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0.95)";filter:alpha(opacity=0.8)
		}
	}
	@keyframes main-sian{
		0%{
			-webkit-transform: translate(100%, 0%) scale(1.05);
			-moz-transform: translate(100%, 0%) scale(1.05);
			-o-transform: translate(100%, 0%) scale(1.05);
			-ms-transform: translate(100%, 0%) scale(1.05);
			transform: translate(100%, 0%) scale(1.05);
			opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)
		}
		30%{
			-webkit-transform: translate(0%, 0%) scale(1.05);
			-moz-transform: translate(0%, 0%) scale(1.05);
			-o-transform: translate(0%, 0%) scale(1.05);
			-ms-transform: translate(0%, 0%) scale(1.05);
			transform: translate(0%, 0%) scale(1.05);
			opacity: 1; -ms-filter:none; filter:none
		}
		70%{
			-webkit-transform: translate(0, 0%) scale(1.05);
			-moz-transform: translate(0, 0%) scale(1.05);
			-o-transform: translate(0, 0%) scale(1.05);
			-ms-transform: translate(0, 0%) scale(1.05);
			transform: translate(0, 0%) scale(1.05)
		}
		90%{
			-webkit-transform: translate(0, 0%) scale(1.0);
			-moz-transform: translate(0, 0%) scale(1.0);
			-o-transform: translate(0, 0%) scale(1.0);
			-ms-transform: translate(0, 0%) scale(1.0);
			transform: translate(0, 0%) scale(1.0)
		}
		100%{
			-webkit-transform: translate(0, 0%) scale(1.0);
			-moz-transform: translate(0, 0%) scale(1.0);
			-o-transform: translate(0, 0%) scale(1.0);
			-ms-transform: translate(0, 0%) scale(1.0);
			transform: translate(0, 0%) scale(1.0);
			opacity: .8; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0.95)";filter:alpha(opacity=0.8)
		}
	}
	@-webkit-keyframes role-java{
		0%{
			left: 45%;
			top: 30%
		}
		30%{
			left: 45%;
			top: 30%;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			left: 79%;
			top: -1.5%;
			-webkit-box-shadow: -40px 60px 20px -6px rgba(0, 0, 0, .2);
			-moz-box-shadow: -40px 60px 20px -6px rgba(0, 0, 0, .2);
			-o-box-shadow: -40px 60px 20px -6px rgba(0, 0, 0, .2);
			box-shadow: -40px 60px 20px -6px rgba(0, 0, 0, .2);
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-moz-keyframes role-java{
		0%{
			left: 45%;
			top: 30%
		}
		30%{
			left: 45%;
			top: 30%;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			left: 79%;
			top: -1.5%;
			-webkit-box-shadow: -40px 60px 20px -6px rgba(0, 0, 0, .2);
			-moz-box-shadow: -40px 60px 20px -6px rgba(0, 0, 0, .2);
			-o-box-shadow: -40px 60px 20px -6px rgba(0, 0, 0, .2);
			box-shadow: -40px 60px 20px -6px rgba(0, 0, 0, .2);
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-o-keyframes role-java{
		0%{
			left: 45%;
			top: 30%
		}
		30%{
			left: 45%;
			top: 30%;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			left: 79%;
			top: -1.5%;
			-webkit-box-shadow: -40px 60px 20px -6px rgba(0, 0, 0, .2);
			-moz-box-shadow: -40px 60px 20px -6px rgba(0, 0, 0, .2);
			-o-box-shadow: -40px 60px 20px -6px rgba(0, 0, 0, .2);
			box-shadow: -40px 60px 20px -6px rgba(0, 0, 0, .2);
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@keyframes role-java{
		0%{
			left: 45%;
			top: 30%
		}
		30%{
			left: 45%;
			top: 30%;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			left: 79%;
			top: -1.5%;
			-webkit-box-shadow: -40px 60px 20px -6px rgba(0, 0, 0, .2);
			-moz-box-shadow: -40px 60px 20px -6px rgba(0, 0, 0, .2);
			-o-box-shadow: -40px 60px 20px -6px rgba(0, 0, 0, .2);
			box-shadow: -40px 60px 20px -6px rgba(0, 0, 0, .2);
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-webkit-keyframes role-php{
		0%{
			left: 45%;
			top: 39.6%;
		}
		30%{
			left: 45%;
			top: 39.6%;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			left: 78.5%;
			top: 60%;
			-webkit-box-shadow:-10px 50px 20px -6px rgba(0, 0, 0, .2);
			-moz-box-shadow:-10px 50px 20px -6px rgba(0, 0, 0, .2);
			-o-box-shadow:-10px 50px 20px -6px rgba(0, 0, 0, .2);
			box-shadow:-10px 50px 20px -6px rgba(0, 0, 0, .2);
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-moz-keyframes role-php{
		0%{
			left: 45%;
			top: 39.6%;
		}
		30%{
			left: 45%;
			top: 39.6%;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			left: 78.5%;
			top: 60%;
			-webkit-box-shadow:-10px 50px 20px -6px rgba(0, 0, 0, .2);
			-moz-box-shadow:-10px 50px 20px -6px rgba(0, 0, 0, .2);
			-o-box-shadow:-10px 50px 20px -6px rgba(0, 0, 0, .2);
			box-shadow:-10px 50px 20px -6px rgba(0, 0, 0, .2);
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-o-keyframes role-php{
		0%{
			left: 45%;
			top: 39.6%;
		}
		30%{
			left: 45%;
			top: 39.6%;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			left: 78.5%;
			top: 60%;
			-webkit-box-shadow:-10px 50px 20px -6px rgba(0, 0, 0, .2);
			-moz-box-shadow:-10px 50px 20px -6px rgba(0, 0, 0, .2);
			-o-box-shadow:-10px 50px 20px -6px rgba(0, 0, 0, .2);
			box-shadow:-10px 50px 20px -6px rgba(0, 0, 0, .2);
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@keyframes role-php{
		0%{
			left: 45%;
			top: 39.6%;
		}
		30%{
			left: 45%;
			top: 39.6%;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			left: 78.5%;
			top: 60%;
			-webkit-box-shadow:-10px 50px 20px -6px rgba(0, 0, 0, .2);
			-moz-box-shadow:-10px 50px 20px -6px rgba(0, 0, 0, .2);
			-o-box-shadow:-10px 50px 20px -6px rgba(0, 0, 0, .2);
			box-shadow:-10px 50px 20px -6px rgba(0, 0, 0, .2);
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-webkit-keyframes role-js{
		0%{
			left: 45%;
			top: 35%
		}
		30%{
			left: 45%;
			top: 35%;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			left: 6%;
			top: 45%;
			-webkit-box-shadow: 1px -30px 20px -10px rgba(0, 0, 0, .2);
			-moz-box-shadow: 1px -30px 20px -10px rgba(0, 0, 0, .2);
			-o-box-shadow: 1px -30px 20px -10px rgba(0, 0, 0, .2);
			box-shadow: 1px -30px 20px -10px rgba(0, 0, 0, .2);
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-moz-keyframes role-js{
		0%{
			left: 45%;
			top: 35%
		}
		30%{
			left: 45%;
			top: 35%;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			left: 6%;
			top: 45%;
			-webkit-box-shadow: 1px -30px 20px -10px rgba(0, 0, 0, .2);
			-moz-box-shadow: 1px -30px 20px -10px rgba(0, 0, 0, .2);
			-o-box-shadow: 1px -30px 20px -10px rgba(0, 0, 0, .2);
			box-shadow: 1px -30px 20px -10px rgba(0, 0, 0, .2);
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-o-keyframes role-js{
		0%{
			left: 45%;
			top: 35%
		}
		30%{
			left: 45%;
			top: 35%;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			left: 6%;
			top: 45%;
			-webkit-box-shadow: 1px -30px 20px -10px rgba(0, 0, 0, .2);
			-moz-box-shadow: 1px -30px 20px -10px rgba(0, 0, 0, .2);
			-o-box-shadow: 1px -30px 20px -10px rgba(0, 0, 0, .2);
			box-shadow: 1px -30px 20px -10px rgba(0, 0, 0, .2);
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@keyframes role-js{
		0%{
			left: 45%;
			top: 35%
		}
		30%{
			left: 45%;
			top: 35%;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			left: 6%;
			top: 45%;
			-webkit-box-shadow: 1px -30px 20px -10px rgba(0, 0, 0, .2);
			-moz-box-shadow: 1px -30px 20px -10px rgba(0, 0, 0, .2);
			-o-box-shadow: 1px -30px 20px -10px rgba(0, 0, 0, .2);
			box-shadow: 1px -30px 20px -10px rgba(0, 0, 0, .2);
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-webkit-keyframes role-html{
		0%{
			left: 67%;
			top: -4%;
			opacity: 0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)
		}
		100%{
			left: 67%;
			top: -3%;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-moz-keyframes role-html{
		0%{
			left: 67%;
			top: -4%;
			opacity: 0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)
		}
		100%{
			left: 67%;
			top: -3%;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-o-keyframes role-html{
		0%{
			left: 67%;
			top: -4%;
			opacity: 0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)
		}
		100%{
			left: 67%;
			top: -3%;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@keyframes role-html{
		0%{
			left: 67%;
			top: -4%;
			opacity: 0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)
		}
		100%{
			left: 67%;
			top: -3%;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-webkit-keyframes role-design{
		0%{
			left: -0.2%;
			top: 33%;
			opacity: 0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)
		}
		100%{
			left: -0.2%;
			top: 35%;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-moz-keyframes role-design{
		0%{
			left: -0.2%;
			top: 33%;
			opacity: 0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)
		}
		100%{
			left: -0.2%;
			top: 35%;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-o-keyframes role-design{
		0%{
			left: -0.2%;
			top: 33%;
			opacity: 0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)
		}
		100%{
			left: -0.2%;
			top: 35%;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@keyframes role-design{
		0%{
			left: -0.2%;
			top: 33%;
			opacity: 0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)
		}
		100%{
			left: -0.2%;
			top: 35%;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-webkit-keyframes role-cibi{
		0%{
			left: 5.5%;
			top: 27%;
			opacity: 0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)
		}
		100%{
			left: 5.5%;
			top: 29%;
			opacity: 1;-ms-filter:none; filter:none
		}}

	@-moz-keyframes role-cibi{
		0%{
			left: 5.5%;
			top: 27%;
			opacity: 0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)
		}
		100%{
			left: 5.5%;
			top: 29%;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-o-keyframes role-cibi{
		0%{
			left: 5.5%;
			top: 27%;
			opacity: 0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)
		}
		100%{
			left: 5.5%;
			top: 29%;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@keyframes role-cibi{
		0%{
			left: 5.5%;
			top: 27%;
			opacity: 0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)
		}
		100%{
			left: 5.5%;
			top: 29%;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-webkit-keyframes role-left{
		0%{
			width:0;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			width: 79px;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-moz-keyframes role-left{
		0%{
			width:0;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			width: 79px;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-o-keyframes role-left{
		0%{
			width:0;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			width: 79px;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@keyframes role-left{
		0%{
			width:0;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			width: 79px;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-webkit-keyframes role-top{
		0%{
			height: 0;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			height: 380px;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-moz-keyframes role-top{
		0%{
			height: 0;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			height: 380px;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-o-keyframes role-top{
		0%{
			height: 0;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			height: 380px;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@keyframes role-top{
		0%{
			height: 0;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			height: 380px;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-webkit-keyframes role-right{
		0%{
			width:0;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			width: 850px;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-moz-keyframes role-right{
		0%{
			width:0;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			width: 850px;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-o-keyframes role-right{
		0%{
			width:0;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			width: 850px;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@keyframes role-right{
		0%{
			width:0;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			width: 850px;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-webkit-keyframes role-bottom{
		0%{
			height: 0;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			height: 73px;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-moz-keyframes role-bottom{
		0%{
			height: 0;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			height: 73px;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-o-keyframes role-bottom{
		0%{
			height: 0;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			height: 73px;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@keyframes role-bottom{
		0%{
			height: 0;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			height: 73px;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-webkit-keyframes role-r-right{
		0%{
			width:0;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			width: 79px;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-moz-keyframes role-r-right{
		0%{
			width:0;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			width: 79px;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-o-keyframes role-r-right{
		0%{
			width:0;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			width: 79px;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@keyframes role-r-right{
		0%{
			width:0;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			width: 79px;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-webkit-keyframes role-r-bottom{
		0%{
			height: 0;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			height: 345px;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-moz-keyframes role-r-bottom{
		0%{
			height: 0;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			height: 345px;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-o-keyframes role-r-bottom{
		0%{
			height: 0;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			height: 345px;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@keyframes role-r-bottom{
		0%{
			height: 0;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			height: 345px;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-webkit-keyframes role-r-left{
		0%{
			width:0;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			width: 79px;
			opacity: 1;-ms-filter:none; filter:none
		}

	}
	@-moz-keyframes role-r-left{
		0%{
			width:0;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			width: 79px;
			opacity: 1;-ms-filter:none; filter:none
		}

	}
	@-o-keyframes role-r-left{
		0%{
			width:0;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			width: 79px;
			opacity: 1;-ms-filter:none; filter:none
		}

	}
	@keyframes role-r-left{
		0%{
			width:0;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			width: 79px;
			opacity: 1;-ms-filter:none; filter:none
		}

	}
	@-webkit-keyframes role-round-java{
		0%{
			-webkit-transform: translate(0);
			-moz-transform: translate(0);
			-o-transform: translate(0);
			-ms-transform: translate(0);
			transform: translate(0);
			opacity: 1; -ms-filter:none; filter:none
		}
		100%{
			-webkit-transform: translateX(20px);
			-moz-transform: translateX(20px);
			-o-transform: translateX(20px);
			-ms-transform: translateX(20px);
			transform: translateX(20px);
			opacity: 1; -ms-filter:none; filter:none
		}

	}
	@-moz-keyframes role-round-java{
		0%{
			-webkit-transform: translate(0);
			-moz-transform: translate(0);
			-o-transform: translate(0);
			-ms-transform: translate(0);
			transform: translate(0);
			opacity: 1; -ms-filter:none; filter:none
		}
		100%{
			-webkit-transform: translateX(20px);
			-moz-transform: translateX(20px);
			-o-transform: translateX(20px);
			-ms-transform: translateX(20px);
			transform: translateX(20px);
			opacity: 1; -ms-filter:none; filter:none
		}

	}
	@-o-keyframes role-round-java{
		0%{
			-webkit-transform: translate(0);
			-moz-transform: translate(0);
			-o-transform: translate(0);
			-ms-transform: translate(0);
			transform: translate(0);
			opacity: 1; -ms-filter:none; filter:none
		}
		100%{
			-webkit-transform: translateX(20px);
			-moz-transform: translateX(20px);
			-o-transform: translateX(20px);
			-ms-transform: translateX(20px);
			transform: translateX(20px);
			opacity: 1; -ms-filter:none; filter:none
		}

	}
	@keyframes role-round-java{
		0%{
			-webkit-transform: translate(0);
			-moz-transform: translate(0);
			-o-transform: translate(0);
			-ms-transform: translate(0);
			transform: translate(0);
			opacity: 1; -ms-filter:none; filter:none
		}
		100%{
			-webkit-transform: translateX(20px);
			-moz-transform: translateX(20px);
			-o-transform: translateX(20px);
			-ms-transform: translateX(20px);
			transform: translateX(20px);
			opacity: 1; -ms-filter:none; filter:none
		}

	}
	@-webkit-keyframes role-round-js{
		0%{
			-webkit-transform:scale(1.0);
			-moz-transform:scale(1.0);
			-o-transform:scale(1.0);
			-ms-transform:scale(1.0);
			transform:scale(1.0);
			opacity: 1; -ms-filter:none; filter:none
		}
		50%{
			-webkit-transform:scale(1.2);
			-moz-transform:scale(1.2);
			-o-transform:scale(1.2);
			-ms-transform:scale(1.2);
			transform:scale(1.2);
			opacity: 1; -ms-filter:none; filter:none
		}
		100%{
			-webkit-transform:scale(1.0);
			-moz-transform:scale(1.0);
			-o-transform:scale(1.0);
			-ms-transform:scale(1.0);
			transform:scale(1.0);
			opacity: 1; -ms-filter:none; filter:none
		}

	}
	@-moz-keyframes role-round-js{
		0%{
			-webkit-transform:scale(1.0);
			-moz-transform:scale(1.0);
			-o-transform:scale(1.0);
			-ms-transform:scale(1.0);
			transform:scale(1.0);
			opacity: 1; -ms-filter:none; filter:none
		}
		50%{
			-webkit-transform:scale(1.2);
			-moz-transform:scale(1.2);
			-o-transform:scale(1.2);
			-ms-transform:scale(1.2);
			transform:scale(1.2);
			opacity: 1; -ms-filter:none; filter:none
		}
		100%{
			-webkit-transform:scale(1.0);
			-moz-transform:scale(1.0);
			-o-transform:scale(1.0);
			-ms-transform:scale(1.0);
			transform:scale(1.0);
			opacity: 1; -ms-filter:none; filter:none
		}

	}
	@-o-keyframes role-round-js{
		0%{
			-webkit-transform:scale(1.0);
			-moz-transform:scale(1.0);
			-o-transform:scale(1.0);
			-ms-transform:scale(1.0);
			transform:scale(1.0);
			opacity: 1; -ms-filter:none; filter:none
		}
		50%{
			-webkit-transform:scale(1.2);
			-moz-transform:scale(1.2);
			-o-transform:scale(1.2);
			-ms-transform:scale(1.2);
			transform:scale(1.2);
			opacity: 1; -ms-filter:none; filter:none
		}
		100%{
			-webkit-transform:scale(1.0);
			-moz-transform:scale(1.0);
			-o-transform:scale(1.0);
			-ms-transform:scale(1.0);
			transform:scale(1.0);
			opacity: 1; -ms-filter:none; filter:none
		}

	}
	@keyframes role-round-js{
		0%{
			-webkit-transform:scale(1.0);
			-moz-transform:scale(1.0);
			-o-transform:scale(1.0);
			-ms-transform:scale(1.0);
			transform:scale(1.0);
			opacity: 1; -ms-filter:none; filter:none
		}
		50%{
			-webkit-transform:scale(1.2);
			-moz-transform:scale(1.2);
			-o-transform:scale(1.2);
			-ms-transform:scale(1.2);
			transform:scale(1.2);
			opacity: 1; -ms-filter:none; filter:none
		}
		100%{
			-webkit-transform:scale(1.0);
			-moz-transform:scale(1.0);
			-o-transform:scale(1.0);
			-ms-transform:scale(1.0);
			transform:scale(1.0);
			opacity: 1; -ms-filter:none; filter:none
		}

	}
	@-webkit-keyframes role-round-php{
		0%{
			-webkit-transform:scale(1.0);
			-moz-transform:scale(1.0);
			-o-transform:scale(1.0);
			-ms-transform:scale(1.0);
			transform:scale(1.0);
			opacity: 1; -ms-filter:none; filter:none
		}
		50%{
			-webkit-transform:scale(1.3);
			-moz-transform:scale(1.3);
			-o-transform:scale(1.3);
			-ms-transform:scale(1.3);
			transform:scale(1.3);
			opacity: 1; -ms-filter:none; filter:none
		}
		100%{
			-webkit-transform:scale(1.0);
			-moz-transform:scale(1.0);
			-o-transform:scale(1.0);
			-ms-transform:scale(1.0);
			transform:scale(1.0);
			opacity: 1; -ms-filter:none; filter:none
		}

	}
	@-moz-keyframes role-round-php{
		0%{
			-webkit-transform:scale(1.0);
			-moz-transform:scale(1.0);
			-o-transform:scale(1.0);
			-ms-transform:scale(1.0);
			transform:scale(1.0);
			opacity: 1; -ms-filter:none; filter:none
		}
		50%{
			-webkit-transform:scale(1.3);
			-moz-transform:scale(1.3);
			-o-transform:scale(1.3);
			-ms-transform:scale(1.3);
			transform:scale(1.3);
			opacity: 1; -ms-filter:none; filter:none
		}
		100%{
			-webkit-transform:scale(1.0);
			-moz-transform:scale(1.0);
			-o-transform:scale(1.0);
			-ms-transform:scale(1.0);
			transform:scale(1.0);
			opacity: 1; -ms-filter:none; filter:none
		}

	}
	@-o-keyframes role-round-php{
		0%{
			-webkit-transform:scale(1.0);
			-moz-transform:scale(1.0);
			-o-transform:scale(1.0);
			-ms-transform:scale(1.0);
			transform:scale(1.0);
			opacity: 1; -ms-filter:none; filter:none
		}
		50%{
			-webkit-transform:scale(1.3);
			-moz-transform:scale(1.3);
			-o-transform:scale(1.3);
			-ms-transform:scale(1.3);
			transform:scale(1.3);
			opacity: 1; -ms-filter:none; filter:none
		}
		100%{
			-webkit-transform:scale(1.0);
			-moz-transform:scale(1.0);
			-o-transform:scale(1.0);
			-ms-transform:scale(1.0);
			transform:scale(1.0);
			opacity: 1; -ms-filter:none; filter:none
		}

	}
	@keyframes role-round-php{
		0%{
			-webkit-transform:scale(1.0);
			-moz-transform:scale(1.0);
			-o-transform:scale(1.0);
			-ms-transform:scale(1.0);
			transform:scale(1.0);
			opacity: 1; -ms-filter:none; filter:none
		}
		50%{
			-webkit-transform:scale(1.3);
			-moz-transform:scale(1.3);
			-o-transform:scale(1.3);
			-ms-transform:scale(1.3);
			transform:scale(1.3);
			opacity: 1; -ms-filter:none; filter:none
		}
		100%{
			-webkit-transform:scale(1.0);
			-moz-transform:scale(1.0);
			-o-transform:scale(1.0);
			-ms-transform:scale(1.0);
			transform:scale(1.0);
			opacity: 1; -ms-filter:none; filter:none
		}

	}
	@-webkit-keyframes m-role-left{
		0%{
			width:0;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			width: 200px;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-moz-keyframes m-role-left{
		0%{
			width:0;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			width: 200px;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-o-keyframes m-role-left{
		0%{
			width:0;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			width: 200px;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@keyframes m-role-left{
		0%{
			width:0;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			width: 200px;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-webkit-keyframes m-role-right{
		0%{
			width:0;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			width: 450px;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-moz-keyframes m-role-right{
		0%{
			width:0;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			width: 450px;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-o-keyframes m-role-right{
		0%{
			width:0;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			width: 450px;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@keyframes m-role-right{
		0%{
			width:0;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			width: 450px;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-webkit-keyframes m-role-bottom{
		0%{
			height: 0;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			height: 110px;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-moz-keyframes m-role-bottom{
		0%{
			height: 0;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			height: 110px;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-o-keyframes m-role-bottom{
		0%{
			height: 0;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			height: 110px;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@keyframes m-role-bottom{
		0%{
			height: 0;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			height: 110px;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-webkit-keyframes m-role-html{
		0%{
			left: 40%;
			top: -2%;
			opacity: 0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)
		}
		100%{
			left: 40%;
			top: -1%;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-moz-keyframes m-role-html{
		0%{
			left: 40%;
			top: -2%;
			opacity: 0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)
		}
		100%{
			left: 40%;
			top: -1%;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-o-keyframes m-role-html{
		0%{
			left: 40%;
			top: -2%;
			opacity: 0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)
		}
		100%{
			left: 40%;
			top: -1%;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@keyframes m-role-html{
		0%{
			left: 40%;
			top: -2%;
			opacity: 0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)
		}
		100%{
			left: 40%;
			top: -1%;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-webkit-keyframes m-role-java{
		0%{
			left: 45%;
			top: 30%
		}
		30%{
			left: 45%;
			top: 30%;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			left: 70%;
			top: -1.5%;
			-webkit-box-shadow: -40px 60px 20px -6px rgba(0, 0, 0, .2);
			-moz-box-shadow: -40px 60px 20px -6px rgba(0, 0, 0, .2);
			-o-box-shadow: -40px 60px 20px -6px rgba(0, 0, 0, .2);
			box-shadow: -40px 60px 20px -6px rgba(0, 0, 0, .2);
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-moz-keyframes m-role-java{
		0%{
			left: 45%;
			top: 30%
		}
		30%{
			left: 45%;
			top: 30%;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			left: 70%;
			top: -1.5%;
			-webkit-box-shadow: -40px 60px 20px -6px rgba(0, 0, 0, .2);
			-moz-box-shadow: -40px 60px 20px -6px rgba(0, 0, 0, .2);
			-o-box-shadow: -40px 60px 20px -6px rgba(0, 0, 0, .2);
			box-shadow: -40px 60px 20px -6px rgba(0, 0, 0, .2);
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-o-keyframes m-role-java{
		0%{
			left: 45%;
			top: 30%
		}
		30%{
			left: 45%;
			top: 30%;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			left: 70%;
			top: -1.5%;
			-webkit-box-shadow: -40px 60px 20px -6px rgba(0, 0, 0, .2);
			-moz-box-shadow: -40px 60px 20px -6px rgba(0, 0, 0, .2);
			-o-box-shadow: -40px 60px 20px -6px rgba(0, 0, 0, .2);
			box-shadow: -40px 60px 20px -6px rgba(0, 0, 0, .2);
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@keyframes m-role-java{
		0%{
			left: 45%;
			top: 30%
		}
		30%{
			left: 45%;
			top: 30%;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			left: 70%;
			top: -1.5%;
			-webkit-box-shadow: -40px 60px 20px -6px rgba(0, 0, 0, .2);
			-moz-box-shadow: -40px 60px 20px -6px rgba(0, 0, 0, .2);
			-o-box-shadow: -40px 60px 20px -6px rgba(0, 0, 0, .2);
			box-shadow: -40px 60px 20px -6px rgba(0, 0, 0, .2);
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-webkit-keyframes m-role-php{
		0%{
			left: 45%;
			top: 39.6%;
		}
		30%{
			left: 45%;
			top: 39.6%;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			left: 72%;
			top: 60%;
			-webkit-box-shadow:-10px 50px 20px -6px rgba(0, 0, 0, .2);
			-moz-box-shadow:-10px 50px 20px -6px rgba(0, 0, 0, .2);
			-o-box-shadow:-10px 50px 20px -6px rgba(0, 0, 0, .2);
			box-shadow:-10px 50px 20px -6px rgba(0, 0, 0, .2);
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-moz-keyframes m-role-php{
		0%{
			left: 45%;
			top: 39.6%;
		}
		30%{
			left: 45%;
			top: 39.6%;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			left: 72%;
			top: 60%;
			-webkit-box-shadow:-10px 50px 20px -6px rgba(0, 0, 0, .2);
			-moz-box-shadow:-10px 50px 20px -6px rgba(0, 0, 0, .2);
			-o-box-shadow:-10px 50px 20px -6px rgba(0, 0, 0, .2);
			box-shadow:-10px 50px 20px -6px rgba(0, 0, 0, .2);
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-o-keyframes m-role-php{
		0%{
			left: 45%;
			top: 39.6%;
		}
		30%{
			left: 45%;
			top: 39.6%;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			left: 72%;
			top: 60%;
			-webkit-box-shadow:-10px 50px 20px -6px rgba(0, 0, 0, .2);
			-moz-box-shadow:-10px 50px 20px -6px rgba(0, 0, 0, .2);
			-o-box-shadow:-10px 50px 20px -6px rgba(0, 0, 0, .2);
			box-shadow:-10px 50px 20px -6px rgba(0, 0, 0, .2);
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@keyframes m-role-php{
		0%{
			left: 45%;
			top: 39.6%;
		}
		30%{
			left: 45%;
			top: 39.6%;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			left: 72%;
			top: 60%;
			-webkit-box-shadow:-10px 50px 20px -6px rgba(0, 0, 0, .2);
			-moz-box-shadow:-10px 50px 20px -6px rgba(0, 0, 0, .2);
			-o-box-shadow:-10px 50px 20px -6px rgba(0, 0, 0, .2);
			box-shadow:-10px 50px 20px -6px rgba(0, 0, 0, .2);
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-webkit-keyframes m-role-r-right{
		0%{
			width:0;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			width: 160px;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-moz-keyframes m-role-r-right{
		0%{
			width:0;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			width: 160px;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-o-keyframes m-role-r-right{
		0%{
			width:0;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			width: 160px;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@keyframes m-role-r-right{
		0%{
			width:0;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			width: 160px;
			opacity: 1;-ms-filter:none; filter:none
		}
	}
	@-webkit-keyframes m-role-r-left{
		0%{
			width:0;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			width: 160px;
			opacity: 1;-ms-filter:none; filter:none
		}

	}
	@-moz-keyframes m-role-r-left{
		0%{
			width:0;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			width: 160px;
			opacity: 1;-ms-filter:none; filter:none
		}

	}
	@-o-keyframes m-role-r-left{
		0%{
			width:0;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			width: 160px;
			opacity: 1;-ms-filter:none; filter:none
		}

	}
	@keyframes m-role-r-left{
		0%{
			width:0;
			opacity: 1;-ms-filter:none; filter:none
		}
		100%{
			width: 160px;
			opacity: 1;-ms-filter:none; filter:none
		}

	}
}

/* 5. 1 Column Grid 1200px - 1599px
----------------------------------------------------------------------------- */
@media screen and (min-width:1024px) and (max-width:1599px){
	.about-technology ul li{width: 50%}
}
@media screen and (min-width:1200px) and (max-width:1599px){
}

@media screen and (max-width:1599px){
	.about-visual .vistext-bottom{width: 100%}
	.about-service .service-left{padding-top: 50px; float: left; width: 100%;}
	.about-service .service-right{padding-top: 20px; float:none; width: 100%}
	.base-area .contact-info dl{display: block; padding-left: 0; padding-right: 0; padding-bottom: 20px;}
	.base-area .contact-info dl::before{display: none;}
}

/* 5. 2 Column Grid 1600px - Infinity (Main only)
----------------------------------------------------------------------------- */
@media screen and (min-width:1600px){
}

/*240117 추가*/
@media screen and (max-width:767px){
	.think-thumb ul li{margin-bottom: 20px; width: 48%;}
}
@media screen and (max-width:1023px){
	.think-itm li{margin-bottom: 20px; float: none; width: 100%}
	.think-itm li .t-item{padding: 20px 25PX; margin: 0 auto; position: relative; width: 100%; text-align: left;}
	.think-itm li .t-item .t-big{margin-top: 0; padding-top: 0; border-top: none;}
	.think-itm li.t-pad70t{padding-top:0}
}
@media screen and (min-width:1024px) and (max-width:1599px){
	.think-itm li{width: 50%}
}