@import url(http://fonts.googleapis.com/earlyaccess/hanna.css);
@font-face {
    font-family: 'jua';
	src: url('/fonts/jua.eot');
  	src: url(/fonts/jua.eot?#iefix) format('embedded-opentype'),
       url(/fonts/jua.woff) format('woff'),
       url(/fonts/jua.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}
@CHARSET "ISO-8859-1";
/* Reset CSS
 * --------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
    padding: 0;
    margin: 0;
}
a{
	text-decoration:none;
	outline: none;
}
table {
    border-spacing: 0;
}
fieldset,img {
    border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-weight: normal;
    font-style: normal;
}
strong{
	font-weight: bold;
}
ol,ul {
    list-style: none;
    margin:0;
    padding:0;
}
caption,th {
    text-align: left;

}
h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    font-size: 100%;
    margin:0;
    padding:0;
    color:#444;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border: 0;
}
/************** end reset **************/

body{
	font-family: 'jua';
}
div {
	text-align: center;
}
p {
	font-size:40px;
}

/************** 메뉴 관련 start **************/
	.menu_back
	{
		z-index: 101;
		display: block;
		position: fixed;
		width:100%;
		height:100%;
		background-color: rgba(0,0,0,0.9)
	}
	.menu_back ul {
		margin-top:60px;
	}
	.menu_back ul>li {
		padding:10px;
	}
	.menu_back ul>li>a {
		color:#fff;
		font-size:24px;
	}

	.menu-trigger {
		margin:7px 0 7px -29px;
		position: relative;
		height: 27px;
	}
	.menu-trigger,
	.menu-trigger span {
		display: inline-block;
		transition: all .4s;
		box-sizing: border-box;
	}
	.menu-trigger span {
		position: absolute;
		left: 0px;
		width: 29px;
		height: 4px;
		background-color: #fff;
		border-radius: 4px;
	}
	.menu-trigger span:nth-of-type(1) {
		top: 0px;
	}

	.menu-trigger span:nth-of-type(2) {
		top: 12px;
	}

	.menu-trigger span:nth-of-type(3) {
		bottom: 0px;
	}

	/* 메뉴 전체가 회전하면서 엑스자 버튼 만들기 */
	.menu-trigger.active-1 {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}

	.menu-trigger.active-1 span:nth-of-type(1) {
		-webkit-transform: translateY(12px) rotate(-45deg);
		transform: translateY(12px) rotate(-45deg);
	}

	.menu-trigger.active-1 span:nth-of-type(2) {
		-webkit-transform: translateY(0) rotate(45deg);
		transform: translateY(0) rotate(45deg);
	}
	.menu-trigger.active-1 span:nth-of-type(3) {
		opacity: 0;
	}

	.facebook2 {
	}
	.naver2 {
	}
	.kakao2 {
		color:#eddf00;
	}
	.tel2 {
		color:#efbe2d;
	}
	.menu_center {
		width:100%;
	}
	.me1 {
		width:50%;
		float:left;
		text-align:right;
		padding:0 10px 20px 0;
	}
	.me2 {
		width:50%;
		float:left;
		text-align:left;
		padding:0 0 20px 10px;
	}
	.menu_back a {
		font-size:24px;
		text-decoration:none;
	}

/************** 메뉴 관련 end **************/

.logo img
{
	width:100%;
}
#section1 {
	background-image: url(../../img/main/panorama_back.png);
	background-color:#30995b;
	background-position: 0px 0px;
	background-repeat: repeat-x;
	animation : animatedBackground 35s linear infinite;
	-webkit-animation : animatedBackground 35s linear infinite;
}
@keyframes animatedBackground {
	from { background-position: 0 0; }
	to { background-position: 100% 0; }
}
@-webkit-keyframes animatedBackground {
	from { background-position: 0 0; }
	to { background-position: 100% 0; }
}
#section2 {
	background: #f6e1a4;
}
#section3 {
	background: -webkit-gradient(radial, 50% 40%, 0, 50% 40%, 100, color-stop(0%, #fff), color-stop(10%, #d7dbde), color-stop(100%, #364959));
  	background: -webkit-radial-gradient(50% 40%, circle cover, #fff, #d7dbde 10%, #364959 100%);
	background: -moz-radial-gradient(50% 40%, circle cover, #fff, #d7dbde 10%, #364959 100%);
	background: -o-radial-gradient(50% 40%, circle cover, #fff, #d7dbde 10%, #364959 100%);
	background: radial-gradient(50% 40%, circle cover, #fff, #d7dbde 10%, #364959 100%);
	background: -ms-radial-gradient(50% 40%, circle cover, #fff, #d7dbde 10%, #364959 100%);
}

.box_memo a, .box_memo2 a{
	color:#fff;
}

.contact_back {
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.9);
	z-index:103;
	position:fixed;
}
.contact a {
	float:right;
	font-size:50px;
	text-decoration:none;
	outline: none;
	color:#fff;
}
.close-thik:after {
	content: '✖'; /* UTF-8 symbol */
}
.c_title {
	color:#fff;
	font-size:20px;
	padding:10px 0 0 0;
}
.c_wrap {
	margin:20px;
}
.btn-xl {
    color: #fff;
    background-color: #ca4158;
    border-color: #ca4158;
    text-transform: uppercase;
    border-radius: 3px;
    font-size: 22px;
    padding: 20px 40px;
}

@media (min-width: 1381px) {
	/* 날개 스크립트 영역 start */
	.right-banner {
		width: 90px;
		height: 400px;
		position: fixed;
		z-index: 100;
		top: 50%;
		margin-top: -200px;
		left: 50%;
		margin-left: 600px;
		overflow: hidden;
	}
	.right-banner .facebook {
		display: block;
		height: 80px;
		color: #fff;
		border-radius: 10px 10px 0 0px;
		background: #e4e4e4 url("/img/main/facebook.png") no-repeat;
    	background-position: 33px 17px;
		text-decoration:none;
		outline: none;
	}
	.right-banner .naver {
		display: block;
		height: 80px;
		color: #fff;
		background: #e9e9e9 url("/img/main/naver.png") no-repeat;
    	background-position: 29px 19px;
		text-decoration:none;
		outline: none;
	}
	.right-banner .kakao {
		display: block;
		height: 80px;
		color: #fff;
		background: #dadada url("/img/main/kakao.png") no-repeat;
    	background-position: 14px 15px;
		text-decoration:none;
		outline: none;
	}
  .right-banner .product {
		display: block;
		height: 80px;
		color: #fff;
		background: #e9e9e9 url("/img/main/price.png") no-repeat;
    background-size: 60%;
    	background-position: center;
		text-decoration:none;
		outline: none;
	}
  .right-banner .tel {
		display: block;
		height: 80px;
		color: #fff;
		border-radius: 0px 0 10px 10px;
		background: #3c3c3c url("/img/main/tel.png") no-repeat;
    	background-position: 25px 16px;
		text-decoration:none;
		outline: none;
	}
	/* 날개 스크립트 영역 end */
}
@media (min-width: 1022px) and (max-width: 1380px) {
	/* 날개 스크립트 영역 start */
	.right-banner {
		width: 400px;
		height: 90px;
		position: fixed;
		z-index: 100;
		top: 50%;
		margin-top: 250px;
		left: 50%;
		margin-left: -200px;
		overflow: hidden;
		float:left;
	}
	.right-banner .facebook {
		float:left;
		display: block;
		width: 80px;
		height:72px;
		color: #fff;
		border-radius: 10px 0px 0 10px;
		background: #e4e4e4 url("/img/main/facebook.png") no-repeat;
    	background-position: 29px 14px;
		text-decoration:none;
		outline: none;
	}
	.right-banner .naver {
		float:left;
		display: block;
		width: 80px;
		height:72px;
		color: #fff;
		background: #e9e9e9 url("/img/main/naver.png") no-repeat;
    	background-position: 24px 16px;
		text-decoration:none;
		outline: none;
	}
	.right-banner .kakao {
		float:left;
		display: block;
		width: 80px;
		height:72px;
		color: #fff;
		background: #dadada url("/img/main/kakao.png") no-repeat;
    	background-position: 9px 10px;
		text-decoration:none;
		outline: none;
	}
  .right-banner .product {
		float:left;
		display: block;
		width: 80px;
		height:72px;
		color: #fff;
		background: #e9e9e9 url("/img/main/price.png") no-repeat;
    background-size:80%;
    	background-position: center;
		text-decoration:none;
		outline: none;
	}
	.right-banner .tel {
		float:left;
		display: block;
		width: 80px;
		height:72px;
		color: #fff;
		border-radius: 0px 10px 10px 0px;
		background: #3c3c3c url("/img/main/tel.png") no-repeat;
    	background-position: 19px 12px;
		text-decoration:none;
		outline: none;
	}
	/* 날개 스크립트 영역 end */
}
@media (min-width: 1021px) {
	.contact {
		width:50%;
		margin: 50px auto;
	}
	.contact_title {
		color:#fff;
		font-size:36px;
		padding:50px;
	}
	.logo
	{
		width:150px;
		display: block;
		position: fixed;
		z-index: 100;
		left: 0;
		top: 5px;
	}
	.menu
	{
		display:none;
	}
	.air {
		width:250px;
		position: absolute;
		margin:-100px 0px 0 500px;
	}
	.air img {
		width:100%;
	}
	.box {
		position: relative;
		width: 500px;
		height: 500px;
		margin: 25px auto;
		border-radius: 0 0 10px 10px;
		overflow: hidden;
	}
	.box1 {
		background:url("/img/main/monitor1.png") center center / cover;
	}
	.box2 {
		background:url("/img/main/monitor2.png") center center / cover;
	}
	.box3 {
		background:url("/img/main/monitor3.png") center center / cover;
	}
	.box4 {
		background:url("/img/main/monitor4.png") center center / cover;
	}
	.box5 {
		background:url("/img/main/monitor5.png") center center / cover;
	}
	.box_memo
	{
		width:314px;
		position: relative;
		color:#252525;
		font-size: 28px;
		font-family: 'jua', sans-serif;
		margin:230px 50px 0 143px;
		line-height:45px;
		letter-spacing: 3px;
	}
	.box_memo2
	{
		width:400px;
		position: relative;
		color:#252525;
		font-size: 28px;
		font-family: 'jua', sans-serif;
		/*margin:230px 50px 0 102px;*/
		margin:280px 50px 0 50px;
		line-height:45px;
		letter-spacing: 3px;
	}
	.box_memo p
	{
		background-color: #94090c;
		color: #fff;
		width: 250px;
		padding: 20px 0 20px 10px;
		margin: 20px 0 0 30px;
		border-radius:10px;
		letter-spacing: 10px;
		text-align:center;
	}
	.box_memo2 p
	{
		background-color: #94090c;
		color: #fff;
		width: 250px;
		padding: 20px 0 20px 10px;
		margin: 20px 0 0 75px;
		border-radius:10px;
		letter-spacing: 10px;
		text-align:center;
	}
	.slideOne
	{
	    background: url("/img/main/cumilia_main1_bg.jpg") center center / cover;
	}
	.slideTwo
	{
	    background: url("/img/main/cumilia_main2_bg.jpg") center center / cover;
	}
	.slideThree
	{
	    background: url("/img/main/cumilia_main3_bg.jpg") center center / cover;
	}

	.left-menu
	{
		width: 206px;
		height: 270px;
		position: fixed;
		z-index: 100;
		/*top: 50%;*/
		top:52%;
		margin-top: -134px;
		/*left: 50%;*/
		left:52.4%;
		margin-left: -502px;
		overflow: hidden;
	}
	.left-menu .menu {
		display: block;
		height: 60px;
		line-height: 60px;
		color: #fff;
		font-size: 24px;
		text-indent: 17px;
		font-weight: 500;
		border-radius: 30px 0 0 30px;
		background: rgba(37,37,37,0.9);
		/*margin:5px 0;*/
		margin:10px 0;
		text-align:right;
		padding:0 30px 0 0;
		text-decoration:none;
		outline: none;
	}
	.ok {
		color: #252525 !important;
		background-color: rgba(255,255,255,0.8) !important;
		border: 4px #252525 solid;
		line-height: 55px !important;
	}
	.right-menu
	{
		width: 206px;
		height: 270px;
		position: fixed;
		z-index: 100;
		/*top: 50%;*/
		top:54%;
		margin-top: -145px;
		/*left: 50%;*/
		left:47.6%;
		margin-left: 297px;
		overflow: hidden;
	}
	.right-menu .m-contact {
		display: block;
		height: 206px;
		line-height: 58px;
		color: #fff;
		font-size: 28px;
		text-indent: 17px;
		font-weight: 500;
		border-radius: 0px 20px 20px 0;
		background: rgba(252,197,45,0.9)url("/img/main/contact.png") no-repeat;
		background-position: 30px 45px;
		padding: 145px 0 0 18px;
		text-decoration:none;
		outline: none;
		letter-spacing: 5px;
	}
}
@media (min-width: 800px) and (max-width: 1020px) {
	.header {
			z-index: 102;
			display: block;
			position: fixed;
			width:100%;
			height:110px;
			background-color:rgba(255,255,255,0.9);
	}
	.logo
	{
		float:left;
		width:100px;
		left: 0;
		top: 5px;
	}
	.menu
	{
		display:block;
		float:right;
		margin: 33px;
		background-color: #333;
		width:43px;
		height: 40px;
	}
	.menu_back ul {
		margin-top:130px;
	}
	.contact {
		width:50%;
		margin: 50px auto;
	}
	.contact_title {
		color:#fff;
		font-size:36px;
		padding:50px;
	}
	.air {
		width:250px;
		position: absolute;
		margin:-100px 0px 0 500px;
	}
	.air img {
		width:100%;
	}
	.box {
		position: relative;
		width: 597px;
		height: 509px;
		margin: 25px auto;
		border-radius: 0 0 10px 10px;
		overflow: hidden;
	}
	.box1 {
		background:url("/img/main/monitor1.png") center center / cover;
	}
	.box2 {
		background:url("/img/main/monitor2.png") center center / cover;
	}
	.box3 {
		background:url("/img/main/monitor3.png") center center / cover;
	}
	.box4 {
		background:url("/img/main/monitor4.png") center center / cover;
	}
	.box5 {
		background:url("/img/main/monitor5.png") center center / cover;
	}
	.box_memo
	{
		width:314px;
		position: relative;
		color:#252525;
		font-size: 28px;
		/*font-family: 'Hanna', sans-serif;*/
		font-family: 'jua', sans-serif;
		margin:85px 50px 0 143px;
		line-height:45px;
		letter-spacing: 3px;
	}
	.box_memo2
	{
		width:400px;
		position: relative;
		color:#252525;
		font-size: 28px;
		/*font-family: 'Hanna', sans-serif;*/
		font-family: 'jua', sans-serif;
		margin:230px 50px 0 102px;
		line-height:45px;
		letter-spacing: 3px;
	}
	.box_memo p
	{
		background-color: #94090c;
		color: #fff;
		width: 250px;
		padding: 20px 0 20px 10px;
		margin: 230px 0 0 30px;
		border-radius:10px;
		letter-spacing: 10px;
		text-align:center;
	}
	.box_memo2 p
	{
		background-color: #94090c;
		color: #fff;
		width: 250px;
		padding: 20px 0 20px 10px;
		margin: 20px 0 0 75px;
		border-radius:10px;
		letter-spacing: 10px;
		text-align:center;
	}
	.slideOne
	{
	    background: url("/img/main/cumilia_main1_bg.jpg") center center / cover;
	}
	.slideTwo
	{
	    background: url("/img/main/cumilia_main2_bg.jpg") center center / cover;
	}
	.slideThree
	{
	    background: url("/img/main/cumilia_main3_bg.jpg") center center / cover;
	}
}
@media (min-width: 601px) and (max-width: 799px) {
	.contact {
		width:80%;
		margin: 50px auto;
	}
	.contact_title {
		color:#fff;
		font-size:36px;
		padding:50px;
	}
	.header {
		z-index: 102;
		display: block;
		position: fixed;
		width:100%;
		height:50px;
		background-color:rgba(255,255,255,0.9);
	}
	.logo
	{
		float:left;
		width:50px;
		left: 0;
		top: 5px;
	}
	.menu
	{
		float:right;
		margin: 5px;
		background-color: #333;
		width:43px;
    	height: 40px;
	}
	.air {
		display:none;
	}
	.box {
		position: relative;
		width: 597px;
		height: 509px;
		margin: 25px auto;
		border-radius: 0 0 10px 10px;
		overflow: hidden;
	}
	.box1 {
		background:url("/img/main/monitor1.png") center center / cover;
	}
	.box2 {
		background:url("/img/main/monitor2.png") center center / cover;
	}
	.box3 {
		background:url("/img/main/monitor3.png") center center / cover;
	}
	.box4 {
		background:url("/img/main/monitor4.png") center center / cover;
	}
	.box5 {
		background:url("/img/main/monitor5.png") center center / cover;
	}
	.box_memo, .box_memo2
	{
		position: relative;
		color:#252525;
		font-size: 28px;
		font-family: 'jua', sans-serif;
		margin:230px 50px 0 50px;
		line-height:45px;
		letter-spacing: 3px;
	}
	.box_memo p, .box_memo2 p
	{
		background-color: #94090c;
		color: #fff;
		width: 250px;
		padding: 20px 0 20px 10px;
		margin: 230px 0 0 123px;
		border-radius:10px;
		letter-spacing: 10px;
		text-align:center;
	}
	.slideOne
	{
	    background: url("/img/main/cumilia_main1_bg.jpg") center center;
	}
	.slideTwo
	{
	    background: url("/img/main/cumilia_main2_bg.jpg") 0 0;
	}
	.slideThree
	{
	    background: url("/img/main/cumilia_main3_bg.jpg") center center;
	}
}
@media (min-width: 601px) {
	.m_box_memo { display:none; }
}
@media (max-width: 600px) {
	.contact {
		width:80%;
		margin: 30px auto;
	}
	.contact_title {
		color:#fff;
		font-size:36px;
		padding:30px;
	}
	.header {
		z-index: 102;
		display: block;
		position: fixed;
		width:100%;
		height:50px;
		background-color:rgba(255,255,255,0.9);
	}
	.logo
	{
		float:left;
		width:50px;
		left: 0;
		top: 5px;
	}
	.menu
	{
		float:right;
		margin: 5px;
		background-color: #333;
		width:43px;
    	height: 40px;
	}
	.air {
		display:none;
	}
	.box {
		position: relative;
		/*width: 310px;
		height: 495px;*/
		width:300px;
		height:300px;
		margin: 25px auto;
		border-radius: 0 0 10px 10px;
		overflow: hidden;
	}
	.box1 {
		background:url("/img/main/mobile1.png") center center / cover;
	}
	.box2 {
		background:url("/img/main/mobile2.png") center center / cover;
	}
	.box3 {
		background:url("/img/main/mobile3.png") center center / cover;
	}
	.box4 {
		background:url("/img/main/mobile4.png") center center / cover;
	}
	.box5 {
		background:url("/img/main/mobile5.png") center center / cover;
	}
	.box_memo , .box_memo2 { display:none; }
	.m_box_memo
	{
		display:block;
		width:210px;
		position: relative;
		color:#252525;
		font-size: 28px;
		font-family: 'jua', sans-serif;
		/*margin:330px 50px 0 54px;*/
		margin:10px auto;
		line-height:30px;
		letter-spacing: 8px;
	}
	.m_box_memo p
	{
		background-color: #94090c;
		color: #fff;
		width: 190px;
		padding: 20px 0 20px 10px;
		margin: 30px 0 0 7px;
		border-radius:10px;
		letter-spacing: 10px;
		text-align:center;
		font-size: 28px;
	}
	.m_box_memo p a { color:white; }
	.slideOne
	{
	    background: url("/img/main/cumilia_main1_bg.jpg") center center;
	}
	.slideTwo
	{
	    background: url("/img/main/cumilia_main2_bg.jpg") 0 0;
	}
	.slideThree
	{
	    background: url("/img/main/cumilia_main3_bg.jpg") center center;
	}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) {
 @media (max-width: 600px) {
}
 @media (min-width: 601px) and (max-width: 799px) {

}
}