*,*:after,*:before{margin:0;padding:0;box-sizing:inherit}
body{font-family:"Noto Sans KR", sans-serif; height:100%; line-height:1; font-smoothing:antialiased; text-rendering:optimizeLegibility; -webkit-text-size-adjust:none; -ms-text-size-adjust:none; text-size-adjust:none;}
html, body, h1, h2, h3, h4, h5, h6, p, img, table, td, th, tr, li, ol, ul, dl, a, textarea, iframe, video, fieldset, input{margin:0; padding:0; border:0;}
li, ol, ul{list-style:none;}
input:focus, input:focus{outline: none;}
textarea{resize:none; border:none;}
img{border:0; max-width:100%; vertical-align:middle; display:inline-block;}
button{cursor:pointer;}

.m{display:none;}
.pc{display:block;}

.top_menu{width:100%; height: 110px; position:fixed; background:none; z-index:9999;}
.topNav{display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 100px;  width: 1150px; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-left:auto; margin-right:auto;}

.topNav_logo{text-align:left; height:auto; order:-1; position:relative; width:auto; object-fit:contain; -o-object-position: 0% 50%; object-position: 0% 50%; max-width: 100%; display: inline-block;}
.topNav_cont{display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; position: relative; float: right;}
.topNav_cont li{display:inline-block; margin:0 30px; font-weight:bold; color:#fff; font-size:18px; cursor:pointer;}
.topNav_cont li:last-child{display:inline-block; padding:15px 50px; border-radius:100px; font-weight:normal; color:#fff; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(126, 112, 240, 1)), to(rgba(155, 73, 222, 1))); background-image: linear-gradient(73deg, rgba(126, 112, 240, 1), rgba(155, 73, 222, 1));}

.Fixed{background:rgba(0,0,0,.8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);}



.main_page{position:relative; height:95vh; overflow:hidden; z-index:-1; background:#000;}
.main_text{position:absolute; top:0; bottom:0; left:0; right:0; width:100%; max-width:1150px; margin:0 auto; padding-top:250px; line-height:1.2;}
.main_page .main_text .main_title{font-size:90px; font-weight:900; /*-webkit-text-stroke: 0.6px white; -webkit-text-stroke-width: 0.6px; -webkit-text-stroke-color: white; color:transparent;*/ color:#fff; line-height:1.4;} 
.main_video{position: relative; min-width:1920px; width: 100%; height: 100vh; /*height:auto;*/ padding-top: 0%; overflow:hidden;}
.main_video .opacity{background:rgba(0,0,0,.1); height:100%; width:100%; position:absolute; top:0px; left:0px; right:0px; bottom:0px; z-index:-1;}
.main_page .main_video iframe{overflow:hidden; overflow-x:hidden; overflow-y:hidden; height:100%; width:100%; position:absolute; top:0px; left:0px; right:0px; bottom:0px; z-index:-3; transform: scale(1.5);}




/*section1*/
.wrapper{background:#000;}
.section1{background:#000; position:relative;}

.section1 .sliderr {margin:150px 0px;}
.section1 .slider__item {/*position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;*/ display:flex; width:100%;}
.section1 .slider__img{/*position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%;*/ display:flex;}
.section1 .slider__img .slider_video{position: relative; width: 440px; height: 200px; border-top-left-radius: 30px; border-bottom-right-radius: 30px; overflow: hidden;}
.section1 .slider__img .slider_video iframe{height: 100%; width: auto; position: absolute; top: 0%; left: 0%; transform: scale(2);}
.section1 .slider__text {/*position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; opacity: 1;*/ display:flex; width:700px; flex-direction: column; align-items: flex-start;}
.section1 .slider__text .sub{font-weight:900; font-size:55px; color:#fff;}
.section1 .slider__text .num{padding-top:30px; font-weight:900; font-size:95px; color:#7836FA;}
.section1 .slider__caption {position: absolute; z-index: 2; bottom: 0; left: 0; padding: 1rem; color: white;}

.section1 .swiper-button-next, .section1 .swiper-button-prev {position: absolute; top: 60%; width: calc(var(--swiper-navigation-size)/ 44 * 27); height: var(--swiper-navigation-size); margin-top: calc(0px - (var(--swiper-navigation-size)/ 2)); text-align:center; z-index: 10; cursor: pointer;  display: flex;  align-items: center;  justify-content: center;  color: var(--swiper-navigation-color,var(--swiper-theme-color));}
.section1 .swiper-button-prev:after, .section1 .swiper-button-next:after{background:#0c0c0c; color:#7836fa; font-size:28px; font-weight:bold; position:absolute; top:0; right:0; left:0; bottom:0; width:60px; height:60px; box-sizing:border-box; padding:15px; z-index:-1; border-radius:100px;}


.swiper { width: 100%; height: 100%;}
.swiper-slide {text-align: center; font-size: 18px; background:none; /* Center slide text vertically */display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }
.swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover;}


.inner{width:1150px; margin:0 auto; padding-top:150px; text-align:left; position:relative;}
.inner .text .info{color:#7836FA; font-size:30px; font-weight:900;}
.inner .text .title{color:#fff; font-size:76px; font-weight:900; letter-spacing:-2px; line-height:1.3; padding-top:20px; padding-bottom:30px;}
.inner .cont .title{color:#000; font-size:76px; font-weight:900; letter-spacing:-2px; line-height:1.3; padding-top:20px; padding-bottom:30px;}


.color_pur{color:#826cee;}


/*section2*/

.section2{height: 4400px; background:#000;}
.section2 .inner{padding-top:0px;}
.section2 #content-wrapper{padding: 60px 0px;}
.section2 #examples-pin{position: relative; width: 100%; max-width: 1150px; height: auto; overflow: hidden; margin:0 auto; right:0;}
.section2 #pin-frame-wipe  {background:none; top:100%;}
.section2 #pin-frame-wipe h2  {color: #D92B00;}
.section2 .pin-frame {position: absolute; width: 100%; height: 100%; overflow: hidden; top:110px !important; padding-top:0px;}
.section2 .pin-frame h2 {margin-top: 120px;}

.section2 #examples-parallax{padding-top:0; height:95vh; margin-bottom:0px; overflow: hidden;}
.section2 #parallax-it {padding: 0; font-size: 80px; position: relative; z-index:99;}
.section2 #parallax-it-left {position: relative; left:auto; right:0; text-align:right; color: #C5C3DE; opacity: 0.9; -moz-opacity: 0.9; filter:alpha(opacity=9); overflow: hidden; z-index:-1;}
.section2 #parallax-it-right {position: relative; font-size: 160px; text-align:right; margin-top: 50px; color: #C5C3DE; opacity: 0.7; -moz-opacity: 0.7; filter:alpha(opacity=2.5); overflow: hidden; z-index:-1;}
.section2 #parallax-it-left img, .section2 #parallax-it-right img{max-width:600px;}




/*section3*/

.section3{height: 1300px; position:relative; overflow:hidden;}
.section3 .inner{position:relative;}
.section3 .inner .text{position:relative;  z-index:1;}
.section3 .inner .text .title{color:#000; font-size:70px; font-weight:900; letter-spacing:-2px; line-height:1.3;  z-index:99; text-align:center;}
.section3 .inner .text .title3{color:#fff; font-size:28px; font-weight:600; letter-spacing:-1.2px; line-height:1.8; z-index:99; text-align:left; display:grid; justify-content: space-around;}
.section3 .inner .cont .title{color:#000; font-size:70px; font-weight:900; letter-spacing:-2px; line-height:1.3; }
.section3 .inner .palbg{position:absolute; bottom:0; left:0; right:0; z-index:0; opacity: .15; width:100%; margin:0 auto;}
.section3 .sliderr { width: 100%; display: grid; place-items: center; overflow:hidden; position:relative;}
.section3 .sliderr .opacity{width:100%; height:100%; position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.1); z-index:1;}
.section3 .sliderr::before, .sliderr::after{position:absolute; background-image:linear-gradient(to right,rgba(0,0,0,1) 0%,rgba(0,0,0,.8) 30%,rgba(0,0,0,0) 100%); content:''; height:100%;width:25%; z-index:2; pointer-events:none;}
.section3 .sliderr::before{ left:0; top:0;}
.section3 .sliderr::after{right:0; top:0; transform:rotateZ(180deg);}

/*  IMPORTANT CODE BELOW */

.section3 .slide-track {width: calc(150px * 20); display: flex; animation: scroll 20s linear infinite; justify-content: space-between;}
.section3 .slidesec {display: grid; place-items: center; transition:0.5s; cursor:pointer;}
.section3 .slidesec li{background:#fff; position:relative; width:320px; height:150px; margin:0 5px 10px 5px; border-radius:3px; display:flex; justify-content:center; align-items:center;}
.section3 .slidesec li img{max-width:100%; max-height:100%;}




/*section4*/

.section4{height: 1080px; position:relative; background:#000;}
.section4 .inner {padding-top:250px;}
.section4 .inner .text{display:block; transform:translate(0, 0);}
.section4 .inner .text .title{color:#999; font-size:40px; font-weight:500; letter-spacing:-2px; line-height:1.6; padding-top:20px; padding-bottom:30px; text-align:right;}




/*section5*/

.section5{height: 1080px; position:relative;}
.section5 .blog_level{color:#fff;}
.section5 .blog_level .title{font-size:30px;}
.section5 .blog_level .levels{display:flex; padding-top:100px;}
.section5 .blog_level .levels .level{width:100%;}
.section5 .blog_level .levels .level .step{}
.section5 .blog_level .levels .level .step li{display:block;}
.section5 .blog_level .levels .level .step li.num{position:relative; background:rgba(126, 112, 240, 1); color:#fff; font-weight:700; font-size:28px; padding:17px 40px; border-radius:100px; display:inline-block;}
.section5 .blog_level .levels .level .step li.num:before{content:''; position:absolute; top:30px; left:150px; width:100%; height:5px; background:rgba(126, 112, 240, 1);}
.section5 .blog_level .levels .level:last-child .step li.num:before{content:''; position:absolute; top:30px; left:150px; width:100%; height:0px; background:rgba(126, 112, 240, 1);}
.section5 .blog_level .levels .level .step li:nth-child(2){font-size:28px; font-weight:700; letter-spacing:-2px; padding:20px 0px;}
.section5 .blog_level .levels .level .step li:nth-child(3){font-size:17px; line-height:1.7; letter-spacing:-1.2px;}




/*section6*/

.section6{height: 1080px; position:relative;}
.section6 .interview{padding-top:100px;}
.section6 .interview ul{display:flex; flex-wrap:nowrap;}
.section6 .interview li{width:33.33%; margin:0 10px; padding:50px 20px; box-sizing:border-box; color:#fff;}
.section6 .interview li:first-child{background:#1c1c1c; border-radius:28px;}
.section6 .interview li:nth-child(2){background:#1c1c1c; border-radius:28px;}
.section6 .interview li:nth-child(3){background:#1c1c1c; border-radius:28px;}
.section6 .interview li .blogger{}
.section6 .interview li .img{position:relative; width:200px; height:200px; margin:0 auto; border-radius:300px; overflow:hidden;}
.section6 .interview li .img img{position:absolute; top:0; left:0; transform:scale(1);}
.section6 .interview li .blogger .title{font-size:28px; text-align:center; font-weight:700; padding:40px 0 30px 0px; letter-spacing:-2px;}
.section6 .interview li .blogger .cont{font-size:16px; font-weight:300; line-height:1.8; box-sizing:border-box; padding:0 0px; letter-spacing:-1.3px;}

.slidecontblock{margin-top:3.74rem;}
.slidecontblock .slidecont{width:3.6rem;margin-right:.3rem;margin-bottom:.3rem;}
.slidecontblock .slidecont ul li{position:relative;width:3.6rem;height:3.07rem;margin-bottom:0.1rem;opacity:0;}
.slidecontblock .slidecont ul li img{width:100%;height:auto;}
.slidecontblock .slidecont ul li .videowrap{ position:absolute;left:0;top:0;width:3.6rem;height:2.6rem;border-radius:.3rem;overflow:hidden;
  -webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);}
.contblock .cont .slidecontblock .slidecont ul li .videowrap video{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);border-radius:.3rem;overflow:hidden;}



/*section7*/

.section7{height: 1080px; position:relative;}
.section7 .palcom{padding-top:40px;}
.section7 .palcom .group input{width:100%; color:#fff; background:#222; font-size:20px; padding:20px 10px; margin:8px 0px; border-radius:5px; box-sizing:border-box;}
.section7 .palcom .group textarea{width:100%; color:#fff; background:#222; font-size:20px; padding:20px 10px; margin:8px 0px; border-radius:5px; box-sizing:border-box;}
.section7 .palcom .group textarea::placeholder { /* Modern browsers */ color: #fff;  }
.section7 .palcom .group input::-webkit-input-placeholder {font-family:"Noto Sans KR", sans-serif;}
.section7 .palcom .group input:-ms-input-placeholder {font-family:"Noto Sans KR", sans-serif;}
.section7 .palcom .group textarea::placeholder {font-family:"Noto Sans KR", sans-serif; color:#666;}
.section7 .palcom .group input::-webkit-input-placeholder {font-family:"Noto Sans KR", sans-serif;}
.section7 .palcom .group input:-ms-input-placeholder {font-family:"Noto Sans KR", sans-serif;}
.section7 .palcom .btn{width:100%; margin-top:30px; padding:20px 0px; font-family:"Noto Sans KR", sans-serif; font-size:22px; border:0; border-radius:5px; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(126, 112, 240, 1)), to(rgba(155, 73, 222, 1))); background-image: linear-gradient(73deg, rgba(126, 112, 240, 1), rgba(155, 73, 222, 1)); color:#fff;}



/*footer*/
.footer{width:100%; background:none; border-top:1px solid #333; padding:50px 20px; box-sizing:border-box;}
.footer_cont{max-width:1200px; margin:0 auto; line-height:1.5; font-size:14px; text-align:left; color:#fff;;}



/*====== ¾Ö´Ï¸ÞÀÌ¼Ç ¸¸µé±â ======*/


@keyframes scroll {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(calc(-150px * 10));
  }
}

@keyframes scroll2 {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(calc(-150px * 5));
  }
}

@media screen and (max-width: 768px) {
  .slide-track {
    width: calc(80px * 20);
  }

  .slide-track2 {
    width: calc(80px * 15);
  }

  .slide {
    width: 80px;
  }

  @keyframes scroll {
    0% {
      transform: translateX(0px);
    }
    100% {
      transform: translateX(calc(-80px * 10));
    }
  }

  @keyframes scroll2 {
    0% {
      transform: translateX(0px);
    }
    100% {
      transform: translateX(calc(-80px * 5));
    }
  }
}


@media screen and (max-width: 1150px) {
	.wrapper{padding:0 20px; box-sizing:border-box;}
	.topNav_logo{padding-left:20px;}
	.main_text{padding:300px 20px 0 20px;}
	.inner{width:100%; margin:0 auto; padding-top:150px; text-align:left; position:relative;}
}


/*demo*/
.simple-demo, .mobile-demo {
	visibility: visible;
}

.simple-demo #content-wrapper {
	height: 1600px;
	padding-top: 400px;
}


h2 {
	font-size: 150px;
	font-weight: normal;
	margin: 0;
	color: #FFB000;
	padding: 60px;
	text-shadow: 0 2px 1px #000;
	font-family: 'Luckiest Guy',Impact,Haettenschweiler,"Franklin Gothic Bold",Charcoal,Gadget,sans-serif;
	text-transform: uppercase;
}
h3 {
	font-size: 60px;
	font-weight: normal;
	margin: 0;
	color: #FFB000;
	text-shadow: 0 2px 1px #000;
	font-family: 'Luckiest Guy',Impact,Haettenschweiler,"Franklin Gothic Bold",Charcoal,Gadget,sans-serif;
	text-transform: uppercase;	
}

p {	width: 80%; text-shadow: 0 2px 1px #000; color: #C5C3DE; }
a, a:visited { color: #D92B00; font-weight: bold; font-style: italic; }
ul { list-style: none; }

figcaption { text-shadow: 0 2px 1px #000; color: #C5C3DE; }

.download { padding: 10px; }

pre { font-size: 15px; }
code { font-style: normal; }
blockquote {
	text-align: left;
	width: 720px;
	margin: 10px auto;
	background: #C5C3DE;
	border: solid 2px #69697A;
	padding: 0 40px;
}

#console {
	display: none;
	position: fixed;
	top: 0;
	left: 15px;
	width: 500px;
	margin: 0;
	font-size: 14px;
	font-style: italic;
	background-color: #69697A;
	text-shadow: none;
	text-align: left;
	padding: 3px 10px;
	border-radius: 0 0 10px 10px;
	z-index: 99;
	opacity: .8;
}

#title {
	overflow: hidden;
	font-size: 180px;
	margin: 0 auto -580px;
	width: 100%;
	height: 1000px;
	position: relative;
	padding-top: 30px;
	z-index: 99;
}

.title-line { position: relative; display: block; margin: auto; width: 300%; left: -100%; }
#title-line2 { top: -60px; }
#title-line3 { top: -120px; }
.title-line span { display: inline-block; line-height: 1.1; position: relative; }
.twitter-follow-button { position: relative; top: 8px; left: 4px; }
#title-info { position: relative; z-index:99998; opacity: 0; }

.credit {
	font-size: 20px;
	margin: 10px auto;
	text-align: center;
	font-style: italic;
	color: #D92B00;
	z-index:100;
}

#download {
	position: relative;
	margin: 50px auto;
	font-size: 18px;
	width: 100%;
	line-height: 1.8;
	z-index: 99999;
}
#hire { margin-bottom: 80px; }

#download a { color: #69697A; }

#examples-1 { overflow: hidden; }
#fly-it { position: relative; }
#scale-it { width: 500%; margin: 0px -200%; padding: 0; }

#examples-pin { position: relative; width: 100%; height: 600px; overflow: hidden; margin-bottom: -200px; }
.pin-frame { position: absolute; width: 100%; height: 100%; overflow: hidden; }
.pin-frame h2 { margin-top: 120px; }
#pin-frame-slide { background: #D92B00; margin-left:-100%; }
#pin-frame-wipe  { background: #FFB000; top:100%; }
#pin-frame-wipe h2  { color: #D92B00; }
#pin-frame-bounce  { background: #222438; }
#pin-frame-color  { background: #222438; }
#pin-frame-unpin  { top:100%; }

#examples-2 { z-index: 9999; width: 100%; height: 100%; overflow: hidden; }
#fling-it, #move-it { position: relative; }
#examples-parallax {
	padding-top: 200px;
	height: 800px;
	margin-bottom: -600px;
	overflow: hidden;
}
#parallax-it {
	padding: 0;
	font-size: 80px;
	position: relative;
}


#showcase { padding: 60px 0; }
.gallery { width: 960px; margin: 0 auto; text-align: center; }
.gallery figure { text-align: center; float: left; margin: 10px; height: 270px; display: inline-block; }

#howtouse { padding-top: 200px; }

.divider { font-size: 14px; padding-top: 20px; }

.disclaimer {
	font-size: 18px;
	font-style: italic;
	font-weight: normal;
	margin: 0 auto;
}

#instructions { padding-top: 40px; }

#instructions p { margin: 0px auto 20px; }

#instructions-animation { padding-top: 40px; }

#instructions .documentation {
	font-size: 16px;
	text-align: left;
	width: 720px;
	margin: 10px auto 30px;
	padding: 20px 40px;
	text-shadow: none;
	border: solid 1px #69697A;
	color:#C5C3DE;
}

#instructions .param-list {
	font-size: 18px;
	line-height: 1.4;
	padding: 0 18px;
	margin: 1em 0 0;
}

#instructions .param-list-sub {
	padding-left: 36px;
	font-size: 15px;
}

#instructions .param-list li {
	font-weight: normal;
	padding-bottom: 20px;
	text-shadow: 0 2px 1px #000;
}
.param {
	font-style:italic;
}

.param-list small {
	display: block;
	font-weight: normal;
	font-style: italic;
}

#credits { padding: 80px 0; }

/* mobile demo */

.mobile-demo #fade-it {
	margin: 400px 0 500px 0;
}
.mobile-demo #examples-1 {
	margin-bottom: 200px;
}
.mobile-demo #instructions {
	width: 800px;
	text-align: left;
	margin: auto;
}
.mobile-demo ul {
	list-style: disc;
	color:#FFFFFF;
	margin: 20px 80px 100px 80px;
}
.mobile-demo #content-wrapper {
	margin-bottom: 100px;
	width: 100%;
}
.mobile-demo h2 {
	width: 90%;
}
.mobile-demo h3 {
	color:#C5C3DE;
}