@charset "utf-8";

body {
    display: none;
}

.switchContent{
	display: none;
}

.switchContent.show{
	display: block;
}

#container{
	padding-bottom: 0 !important;
}




.slide { font-family: NanumSquareRound; }
.slide .content {  margin: 0 auto; width: 1000px; }
.slide .content > img { position: absolute; opacity: 0; }

.slide .count { position: absolute; left: 50%; margin-top: 81px; width: 500px; text-align: right; opacity: 0; }
.slide .count .title{ font-size: 13px; color: #666; position: relative; top: -5px; }
.slide .count .number{ font-weight: 700; font-size: 30px; color: #333; padding-left: 7px; letter-spacing: -1px;}


.emailValidation{
	position: absolute;
	font-size: 14px;
	color: #ff0000;
	letter-spacing: -0.6px;
	opacity: 0;
	transform: translateY(5px);
	transition: 0.2s;
}

.emailValidation.failed{
	opacity: 1;
	transform: translateY(0px);
	transition: 0.2s;
}

#mainTop{
	height: 810px;
	background: url(/main/image/heading.png) no-repeat;
	background-position: top 109px center;
	padding-top: 490px;
	box-sizing: border-box;
}
#mainTop.godo .mainControlBox{
	display: none;
}
#mainTop.godo{
	padding-top: 400px;
	height: 577px;
}

#mainTop .mainControlBox{
	position: relative;
	width: 1000px;
	margin: 0 auto;
}
#mainTop .mainControlBox .emailValidation{
	top: 21px;
	left: 10px;
}

#mainFreeStartSection{
	opacity: 0;
	transition: opacity .3s linear, transform .2s linear;
	transform: translateX(223px);
}

#mainFreeStartSection.show{
	opacity: 1;
	transform: translateX(223px);
}


.mainControlBox .freeStartForm{
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mainControlBox .freeStartForm .inputWrap{
	position: relative;
	top: 13px;
}

.mainControlBox .freeStartForm .emailButtonWrap{
	box-sizing: border-box;
	padding-top: 40px;
	text-align: center;
	width: 140px;
	height: 140px;
	background-color: #ff7800;
	border-radius: 70px;
	margin-left: 10px;
}
.mainControlBox .freeStartForm .emailButton{
	display: inline-block;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	font-size: 0;
	width: 74px;
	height: 52px;
	background-image: url(/main/image/mainTop/button.start.png);
	background-size: 74px 52px;
	background-repeat: no-repeat;
	background-color: transparent;
}

.mainControlBox .freeStartForm .inputWrap{
	width: 280px;
	text-align: left;
}

.mainControlBox .freeStartForm .emailInput{
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	padding-left: 37px;
	box-sizing: border-box;
	background-image: url(/main/image/mainTop/icon.email.png);
	background-size: 20px 15px;
	background-repeat: no-repeat;
	background-position: left 10px center;
	font-size: 16px;
	color: #888;
	letter-spacing: -0.6px;
}

.mainControlBox .freeStartForm .emailInput + p{
	padding-left: 10px;
	margin-top: 19px;
	border-top: 2px solid #32302e;
	padding-top: 10px;
	font-size: 14px;
	color: #32302e;
	letter-spacing: -0.6px;
}



.mainLinkButton{
	margin-left: 5px;
	margin-right: 5px;
	display: inline-block;
	width: 140px;
	height: 140px;
	background-color: #32302e;
	border-radius: 70px;
	overflow:auto
}

.mainLinkButton button{
	width: 100%;
	margin-top: 46px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	font-size: 20px;
	color: #fff;
	background-color: transparent;
	letter-spacing: -0.7px;
	font-weight: 700;
	line-height: 25px;
}

.mainLinkButton.freeStart{
	position: absolute;
	left: 0;
	top: 0;
	transform: translateX(358px);
	transition: opacity .5s linear 0s, transform .5s linear 0s, width .5s linear 1s;
}
.mainLinkButton.freeStart.hide{
	opacity: 0;
	z-index: -1;
	transform: translateX(358px) translateY(10px);
}


.mainLinkButton.demo{
	transform: translateX(508px);
}
.mainLinkButton.freeStart.hide + .mainLinkButton.demo{
	transition: transform .2s linear 0s;
	transform: translateX(658px)
}

.mainLinkButton.demo button{
	display: block;
	margin: 0 auto;
	width: 99px;
}

.mainLinkButton.demo button:first-child{
	font-size: 16px;
	margin-top: 37px;
	margin-bottom: 8px;
}
.mainLinkButton.demo button + button{
	font-size: 16px;
	padding-top: 10px;
	border-top: 1px solid #fff;
}

#mainTab{
	margin: 0 auto;
	margin-top: 127px;
	width: 240px;
	height: 50px;
	display: flex;
}

#mainTab button{
	flex: 1;
	font-size: 0;
	background-repeat: no-repeat;
	background-color: transparent;
	background-position: top 10px center;
	box-sizing: border-box;
}

#mainTab button.on{
	border-bottom: 2px solid #ff4800;
}

#mainTab .tabChat{
	background-image: url(/main/image/tab.chat.png)
}
#mainTab .tabAnalytics{
	background-image: url(/main/image/tab.analytics.png)
}

#mainTab .tabChat.on{
	background-image: url(/main/image/tab.chat.on.png)
}
#mainTab .tabAnalytics.on{
	background-image: url(/main/image/tab.analytics.on.png)
}



/* SLIDE 1 (강력한) */

#slide1 { background-color: #f8f8f8; }
#slide1 .content { height: 830px; background: url(/main/image/slide1.bg.png) no-repeat; background-position: top 80px left; }
#slide1.active #slide1-01 { animation: fade-in 0.6s ease-out 0.4s forwards; }
#slide1.active #slide1-02 {	animation: fade-slide-up 0.6s ease-out 0.6s forwards; }
#slide1.active #slide1-03 {	animation: fade-in 0.6s ease-out 2.2s forwards; }
#slide1.active #slide1-04 {	animation: fade-slide-up 0.6s ease-out 2.6s forwards; }
#slide1.active .count {	animation: fade-in 1.0s ease-in 3.4s forwards; }

/* SLIDE 2 (디자인) */

#slide2 { background-color: white; }
#slide2 .content { height: 800px; background: url(/main/image/slide2.bg.png) no-repeat; background-position: top 80px left;  }
#slide2 #slide2-01 { position: absolute; width: 1000px; text-align: center; margin-top: 328px;}
#slide2 #slide2-01 li{ font-size: 0; display: inline-block; margin: 0 3.5px; width: 30px; height: 30px;	border-radius: 50%; transition: 0.2s; opacity:0; transform: translateX(-20px); }
#slide2 #slide2-01 li:nth-child(1){	background-color: #32302e; }
#slide2 #slide2-01 li:nth-child(2){	background-color: #f05360; transition-delay: 0.1s; }
#slide2 #slide2-01 li:nth-child(3){	background-color: #ff7900; transition-delay: 0.15s; }
#slide2 #slide2-01 li:nth-child(4){	background-color: #ffc000; transition-delay: 0.2s; }
#slide2 #slide2-01 li:nth-child(5){	background-color: #a3c33e; transition-delay: 0.25s; }
#slide2 #slide2-01 li:nth-child(6){	background-color: #33ae64; transition-delay: 0.3s; }
#slide2 #slide2-01 li:nth-child(7){	background-color: #3db6ae; transition-delay: 0.35s; }
#slide2 #slide2-01 li:nth-child(8){ background-color: #5fbee1; transition-delay: 0.4s; }
#slide2 #slide2-01 li:nth-child(9){ background-color: #063b8c; transition-delay: 0.45s; }
#slide2 #slide2-01 li:nth-child(10){ background-color: #9d4d92; transition-delay: 0.5s; }
#slide2.active #slide2-01 li{ transform: translateX(0px); opacity: 1; }
#slide2.active #slide2-02 {	animation: fade-slide-up 0.6s ease-out 0.7s forwards; }



/* SLIDE 3 (분업처리) */

#slide3 { background-color: #fff; }
#slide3 .content { height: 760px; background: url(/main/image/slide3.bg.png) no-repeat; background-position: top 80px left; }
#slide3.active #slide3-01 {	animation: fade-slide-right 0.6s ease-out 0s forwards; }


/* SLIDE 4 (실시간대시보드) */

#slide4 { background-color: #f8f8f8; }
#slide4 .content { height: 800px; background: url(/main/image/slide4.bg.png) no-repeat; background-position: top 80px left; }
#slide4.active #slide4-01 {	animation: fade-slide-down 0.6s ease-out 0s forwards; }
#slide4.active #slide4-02 {	animation: fade-slide-down 0.6s ease-out 0.3s forwards; }
#slide4.active #slide4-03 {	animation: fade-slide-down 0.6s ease-out 0.6s forwards; }
#slide4.active .count {	animation: fade-in 1.0s ease-in 1.4s forwards; }


/* SLIDE 5 (비교분석) */

#slide5 { background-color: #fff; }
#slide5 .content { height: 950px; background: url(/main/image/slide5.bg.png) no-repeat; background-position: top 80px left;  }
#slide5.active #slide5-01 {	animation: fade-slide-left 0.6s ease-out 0s forwards; }
#slide5.active #slide5-02 {	animation: fade-slide-right 0.6s ease-out 0.4s forwards; }
#slide5.active #slide5-03 {	animation: fade-in 0.6s ease-out 0.8s forwards; }
#slide5.active #slide5-04 {	animation: fade-slide-down 0.6s ease-out 1.5s forwards; }
#slide5.active .count {	animation: fade-in 1.0s ease-in 2.3s forwards; }


/* SLIDE 5 (목록형) */

#slide6 { background-color: #f8f8f8; }
#slide6 .content { height: 650px; background: url(/main/image/slide6.bg.png) no-repeat; background-position: top 80px left;  }
#slide6.active #slide6-01 {	animation: fade-slide-up 0.6s ease-out 0s forwards; }
#slide6.active #slide6-02 {	animation: fade-slide-up 0.6s ease-out 0.4s forwards; }
#slide6.active #slide6-03 {	animation: fade-slide-up 0.6s ease-out 0.8s forwards; }
#slide6.active #slide6-04 {	animation: fade-slide-up 0.6s ease-out 1.2s forwards; }
#slide6.active #slide6-05 {	animation: fade-in 0.6s ease-out 1.8s forwards; }
#slide6.active .count {	animation: fade-in 1.0s ease-in 2.6s forwards; }


#freeStartSection{
	overflow: auto;
	height: 272px;
	background-color: #d8d8d8;
	background-image: url(/main/image/bg.free.start.png);
	background-position: top 60px center;
	background-repeat: no-repeat;
}


#freeStartSection .freeStartForm{
	position: relative;
	width: 450px;
	margin-top: 160px;
	margin-left: auto;
	margin-right: auto;
}

#freeStartSection .freeStartForm .emailValidation{
	top: 64px;
	left: 30px;
}

#freeStartSection .freeStartForm input[type="email"]{

	background-image: url(/main/image/icon.email.png);
	background-position: left 23px center;
	background-repeat: no-repeat;

	border: 1px solid #d8d8d8;
	border-radius: 30px;
	box-shadow: 0 1px 8px rgba(0, 0, 0, 0.15);
	width: inherit;
	height: 52px;
	padding-left: 50px;
	font-size: 14px;
	box-sizing: border-box;
	padding-right: 170px;
	transition: 0.2s;
}


#freeStartSection .freeStartForm input[type="email"].failed{
	background-color: rgba(255, 35, 19, 0.37);
}

#freeStartSection .freeStartForm input[type="email"]::placeholder{
	color: #888;
}

#freeStartSection .freeStartForm button{
	position: absolute;
	top: 0px;
	right: -1px;
	display: inline-block;
	width: 160px;
	height: 52px;
	line-height: 51px;
	-webkit-appearance: none;
	appearance: none;
	font-size: 18px;
	font-weight: 700;
	color: #fff;
	border-radius: 30px;
	background-color: #32302e;
}



/** ANIMATION **/

@keyframes fade-in {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes fade-slide-up {
	0% { opacity: 0; transform: translateY(50px); }
	100% { opacity: 1; transform: translateY(0); }
}

@keyframes fade-slide-down {
	0% { opacity: 0; transform: translateY(-50px); }
	100% { opacity: 1; transform: translateY(0); }
}

@keyframes fade-slide-left {
	0% { opacity: 0; transform: translateX(50px); }
	100% { opacity: 1; transform: translateX(0); }
}

@keyframes fade-slide-right {
	0% { opacity: 0; transform: translateX(-50px); }
	100% { opacity: 1; transform: translateX(0); }
}

@keyframes rotate-360 {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@keyframes timeline-reveal {
	0% { opacity: 0; max-height: 400px; }
	100% { opacity: 1; max-height: 2000px; }
}