@charset"utf-8";

/* Eric Meyer reset.css */
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,embed, 
figure,figcaption,footer,header,hgroup, 
menu,nav,output,ruby,section,summary,
time,mark,audio,video{margin:0; padding:0; border:0 none; vertical-align:middle; font-size:14px; font-family:"nanum","돋움",sans-serif; color:#606060; line-height:1; font-weight:normal;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:""; content:none;}
table{border-collapse:collapse; border-spacing:0; width:100%; table-layout:fixed;}

/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}

span,em,i,strong,sup{font-size:inherit; font-family:inherit; color:inherit; line-height:inherit; vertical-align:baseline; font-weight:inherit;}

/* font */
@font-face {
     font-family : "SpoqaHanB";
	 src :url(../../inc/fonts/SpoqaHanSansBold.woff) format('woff');
}

@font-face {
     font-family : "SpoqaHanL";
	 src :url(../../inc/fonts/SpoqaHanSansThin.woff) format('woff');
}

@font-face {
     font-family : "SpoqaHan";
	 src :url(../../inc/fonts/SpoqaHanSansRegular.woff) format('woff');
}

/* basic */
.wrap{min-width:1350px;  overflow:hidden;}
section > .inner{position:relative; width:1350px; height:100%; margin:auto;}

/* sense1 */
.scene1{height:1080px; background:url(image/portal_bg1.png) repeat center center; box-sizing:border-box; text-align:center; overflow:hidden;}
.scene1 .tag{width:750px; margin:auto; padding:110px 0 15px 0; }
.scene1 .tag:after{content:""; display:block; clear:both;}
.scene1 .tag li{float:left; padding:0 18px; margin-right:12px; line-height:32px; font-size:14px; color:#007cff; border:1px solid #007cff; border-radius:17px;}
.scene1 strong{display:block; font-size:54px; font-family:"SpoqaHanB","돋움",sans-serif; color:#fff;}
.scene1 strong span{color:#007cff;}
.scene1 .desc{padding-top:40px; font-family:"SpoqaHanL","돋움",sans-serif; color:#fff; font-size:20px; line-height:28px;}
.scene1 .img1{position:absolute; bottom:-80px; left:0; opacity:0;}
.scene1 .img2{position:absolute; bottom:-80px; right:0; opacity:0;}

@keyframes move1_1 {
  0% {bottom:-80px; opacity:0;}
  80% {bottom:20px; opacity:0.8;}
  100% {bottom:0; opacity:1;}
}

@keyframes move1_2 {
  0% {bottom:-80px; opacity:0;}
  50% {bottom:-80px; opacity:0;}
  80% {bottom:20px; opacity:0.8;}
  100% {bottom:0; opacity:1;}
}

.scene1.move .img1{animation:move1_1 0.5s ease-out forwards;}
.scene1.move .img2{animation:move1_2 0.8s ease-out forwards;}


/* sense2 */
.scene2{padding:200px 0 180px 0; background:#027CFE url(image/portal_bg2.optimized.webp) no-repeat  center 0; box-sizing:border-box; text-align:center; text-align:left;}
.scene2 .inner > strong{display:block; padding-left:145px; font-size:60px; color:#fff; font-family:"SpoqaHanL","돋움",sans-serif;}
.scene2 .inner > strong:before{content:""; display:block; position:absolute; top:0; left:0; width:133px; height:66px; background:url(image/portal.svg) no-repeat center center; background-size:100% auto;}
.scene2 .inner > strong + dl{padding-top:128px;}
.scene2 dl{padding:184px 0 35px 0;}
.scene2 dl dt{padding-bottom:5px; font-size:20px; font-family:"SpoqaHanB","돋움",sans-serif; color:#fff; line-height:28px;}
.scene2 dl dd{font-family:"SpoqaHanL","돋움",sans-serif; color:#fff; font-size:20px; line-height:28px;}
.scene2 .imgs{position:relative;}
.scene2 .img1{position:relative; text-align:center; bottom:-120px; opacity:0;}
.scene2 .img2{position:absolute; top:-156px; right:-80px; z-index:2; opacity:0;}
.scene2 .img3{position:absolute; top:334px; left:-80px; z-index:2; opacity:0;}
.scene2 .img4{position:absolute; top:714px; right:-80px; z-index:2; opacity:0;}
.scene2 .img5{position:absolute; bottom:69px; left:-20px; z-index:2; opacity:0;}
.scene2 .slide {position:relative;}
.scene2 .slide .swiper-container {position:relative;width:1200px;box-sizing: border-box;}
.scene2 .slide .swiper-container .swiper-wrapper .swiper-slide img {width:100%; display: block;}
.scene2 .slide .swiper-container .swiper-slide:before{content:""; display:block;position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.3);}
.scene2 .slide .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active:before {display: none;}
.scene2 .slide .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-prev {}
.scene2 .slide .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-next {}
.scene2 .slide .swiper-pagination{position:absolute;bottom:-60px;text-align: center;display: block;width: 100%}
.scene2 .slide .swiper-pagination .swiper-pagination-bullet{width:18px; height:18px; border-radius:9px; background:#5aa2ef; opacity:1;margin: 0 5px;}
.scene2 .slide .swiper-pagination .swiper-pagination-bullet-active{background:#fff;}
.scene2 .img_list{text-align:center;}
.scene2 .img_list li{position:relative; displaY:inline-block; margin:0 10px; opacity:0; bottom:-80px;}
.scene2 .last:after{content:""; display:block; clear:both;}
.scene2 .last li{float:left; position:relative; opacity:0; bottom:-80px; margin-right:25px; width:424px; height:175px; box-sizing:border-box; border:1px solid #fff; border-radius:16px; text-align:center;}
.scene2 .last li strong{display:block; padding:40px 0 24px 0; color:#fff; font-size:22px; font-family:"SpoqaHanB","돋움",sans-serif;}
.scene2 .last li p{color:#fff; font-family:"SpoqaHanL","돋움",sans-serif; color:#fff; font-size:16px; line-height:1.3;}

@keyframes move2_1 {
  0% {bottom:-120px; opacity:0;}
  100% {bottom:0; opacity:1;}
}

@keyframes move2_2 {
  0% {right:-80px; opacity:0;}
  50% {right:-80px; opacity:0;}
  80% {right:20px; opacity:1;}
  100% {right:0; opacity:1;}
}

@keyframes move2_3 {
  0% {left:-80px; opacity:0;}
  60% {left:-80px; opacity:0;}
  80% {left:20px; opacity:1;}
  100% {left:0; opacity:1;}
}

@keyframes move2_4 {
  0% {right:-80px; opacity:0;}
  70% {right:-80px; opacity:0;}
  80% {right:20px; opacity:1;}
  100% {right:0; opacity:1;}
}

@keyframes move2_5 {
  0% { left:-20px; opacity:0;}
  80% { left:-20px;opacity:0;}
  90% {left:80px; opacity:1;}
  100% {left:60px; opacity:1;}
}

@keyframes move2_6 {
  0% {bottom:-80px; opacity:0;}
  80% {bottom:20px; opacity:0.8;}
  100% {bottom:0; opacity:1;}
}

@keyframes move2_7 {
  0% {bottom:-100px; opacity:0;}
  30% {bottom:-100px; opacity:0;}
  80% {bottom:20px; opacity:0.8;}
  100% {bottom:0; opacity:1;}
}

@keyframes move2_8 {
  0% {bottom:-120px; opacity:0;}
  50% {bottom:-120px; opacity:0;}
  80% {bottom:20px; opacity:0.8;}
  100% {bottom:0; opacity:1;}
}

@keyframes move2_9 {
  0% {bottom:-80px; opacity:0;}
  80% {bottom:20px; opacity:0.8;}
  100% {bottom:0; opacity:1;}
}

@keyframes move2_10 {
  0% {bottom:-100px; opacity:0;}
  30% {bottom:-100px; opacity:0;}
  80% {bottom:20px; opacity:0.8;}
  100% {bottom:0; opacity:1;}
}

@keyframes move2_11 {
  0% {bottom:-120px; opacity:0;}
  50% {bottom:-120px; opacity:0;}
  80% {bottom:20px; opacity:0.8;}
  100% {bottom:0; opacity:1;}
}

.scene2.move .img1{animation:move2_1 0.5s ease-out forwards;}
.scene2.move .img2{animation:move2_2 1s ease-out forwards;}
.scene2.move .img3{animation:move2_3 1.5s ease-out forwards;}
.scene2.move .img4{animation:move2_4 2s ease-out forwards;}
.scene2.move .img5{animation:move2_5 2.5s ease-out forwards;}
.scene2 .img_list.move li:nth-child(1){animation:move2_6 0.5s ease-out forwards;}
.scene2 .img_list.move li:nth-child(2){animation:move2_7 0.8s ease-out forwards;}
.scene2 .img_list.move li:nth-child(3){animation:move2_8 1s ease-out forwards;}
.scene2 .last.move li:nth-child(1){animation:move2_9 0.5s ease-out forwards;}
.scene2 .last.move li:nth-child(2){animation:move2_10 0.8s ease-out forwards;}
.scene2 .last.move li:nth-child(3){animation:move2_11 1s ease-out forwards;}

/* sense3 */
.scene3{padding:200px 0; background:#E6F0FF url(image/portal_bg3.png) no-repeat  center 0; box-sizing:border-box; text-align:center; text-align:left;}
.scene3 .inner > strong{display:block; padding-left:145px; font-size:60px; color:#1f52d8; font-family:"SpoqaHanL","돋움",sans-serif;}
.scene3 .inner > strong:before{content:""; display:block; position:absolute; top:0; left:0; width:133px; height:66px; background:url(image/chatbot.svg) no-repeat center center; background-size:100% auto;}
.scene3 .img1{position:relative; width:318px; height:757px; margin:79px auto 0; overflow:hidden;}
.scene3 .img1 img{position:absolute; top:0; right:0;}
.scene3 .img_list{padding-top:180px;}
.scene3 .img_list:after{content:""; display:block; clear:both;}
.scene3 .img_list li{float:right;}
.scene3 .img_list li:first-child{float:left;}
.scene3 .img_list img{display:block; position:relative; opacity:0;}
.scene3 .img_list li:first-child img:first-child{margin-bottom:24px;}
.scene3 dl{padding:184px 0 35px 0;}
.scene3 dl dt{padding-bottom:5px; font-size:20px; font-family:"SpoqaHanB","돋움",sans-serif; color:#333; line-height:28px;}
.scene3 dl dd{font-family:"SpoqaHanL","돋움",sans-serif; color:#333; font-size:20px; line-height:28px;}
.scene3 .last:after{content:""; display:block; clear:both;}
.scene3 .last li{float:left; position:relative; bottom:-80px; opacity:0; margin-right:25px; width:424px; height:175px; box-sizing:border-box; background:#fff; border-radius:16px; text-align:center;}
.scene3 .last li strong{display:block; padding:40px 0 24px 0; color:#457cf0; font-size:24px; font-family:"SpoqaHanB","돋움",sans-serif;}
.scene3 .last li p{color:#fff; font-family:"SpoqaHanL","돋움",sans-serif; color:#333; font-size:16px; line-height:1.3;}

@keyframes move3_1 {
  0% {width:318px;}
  100% {width:636px;}
}

@keyframes move3_2 {
  0% {bottom:-80px; opacity:0;}
 80% {bottom:20px; opacity:0.8;}
  100% {bottom:0; opacity:1;}
}

@keyframes move3_3 {
  40% {bottom:-80px; opacity:0;}
  80% {bottom:20px; opacity:0.8;}
  100% {bottom:0; opacity:1;}
}

@keyframes move3_4 {
  60% {bottom:-80px; opacity:0;}
  80% {bottom:20px; opacity:0.8;}
  100% {bottom:0; opacity:1;}
}

@keyframes move3_5 {
  0% {bottom:-80px; opacity:0;}
  80% {bottom:20px; opacity:0.8;}
  100% {bottom:0; opacity:1;}
}

@keyframes move3_6 {
  40% {bottom:-80px; opacity:0;}
  80% {bottom:20px; opacity:0.8;}
  100% {bottom:0; opacity:1;}
}

@keyframes move3_7 {
  60% {bottom:-80px; opacity:0;}
  80% {bottom:20px; opacity:0.8;}
  100% {bottom:0; opacity:1;}
}

.scene3.move .img1{animation:move3_1 1s ease-out forwards;}
.scene3 .img_list.move li:first-child img:first-child{animation:move3_2 0.5s ease-out forwards;}
.scene3 .img_list.move li:first-child img:last-child{animation:move3_3 0.8s ease-out forwards;}
.scene3 .img_list.move li:last-child img{animation:move3_4 1s ease-out forwards;}
.scene3 .last.move li:nth-child(1){animation:move3_5 0.5s ease-out forwards;}
.scene3 .last.move li:nth-child(2){animation:move3_6 0.8s ease-out forwards;}
.scene3 .last.move li:nth-child(3){animation:move3_7 1s ease-out forwards;}

@media all and (max-width:1024px){/*1024이하 모바일*/
	img{max-width:100%;}
	.wrap{min-width:360px; margin:auto; overflow:hidden;}
	section > .inner{position:relative; width:100%;  padding:0 30px; box-sizing:border-box;}
	.scene1{height:auto;}
	.scene1 .tag{width:auto; padding:140px 0 0 0; text-align:left;}
	.scene1 .tag li{float:none; display:inline-block; margin:0 3px 8px 0; font-size:12px; height:24px; line-height:24px; padding:0 12px; border-radius:12px;}
	.scene1 strong{width:300px; font-size:40px; line-height:56px; text-align:left;}
	.scene1 .desc{padding:17px 0 44px; font-size:14px; line-height:18px; text-align:left;}
	.scene1.move .img1{position:relative; text-align:left;}
	.scene1.move .img1 img{max-width:80%;}
	.scene1.move .img2{right:30px; text-align:right;}
	.scene1.move .img2 img{max-width:42%;}
	
	.scene2{padding:150px 0 100px;}
	.scene2 .inner > strong{position:relative; font-size:32px; text-align:left; padding:0;}
	.scene2 .inner > strong:before{top:-60px; width:91px;}
	.scene2 .inner > strong + dl{padding-top:35px;}
	.scene2 dl{padding:120px 0 20px 0;}
	.scene2 dl dt{font-size:16px;}
	.scene2 dl dd{font-size:14px; line-height:18px;}
	.scene2.move .img1{padding-top:25px; text-align:center;}
	.scene2.move .img1 img{max-width:60%;}
	.scene2.move .img2{top:0; text-align:right;}
	.scene2.move .img2 img{max-width:35%;}
	.scene2.move .img3{top:30%; text-align:left;}
	.scene2.move .img3 img{max-width:35%;}
	.scene2.move .img4{top:50%; text-align:right;}
	.scene2.move .img4 img{max-width:35%;}
	.scene2.move .img5{top:60%; text-align:left;}
	.scene2.move .img5 img{max-width:35%;}

	.scene2 .slide .swiper-container{width:100%;}
	.scene2 .slide .swiper-pagination{bottom:-30px;}
	.scene2 .slide .swiper-pagination .swiper-pagination-bullet{width:10px; height:10px; border-radius:5px;}

	@keyframes move2_5 {
	  0% { left:-20px; opacity:0;}
	  80% { left:-20px;opacity:0;}
	  90% {left:20px; opacity:1;}
	  100% {left:0; opacity:1;}
	}

	.scene2 .img_list li{margin-bottom:20px;}
	.scene2 .img_list li:last-child{margin-bottom:0;}
	.scene2 .last li{float:none; width:100%; padding:0 20px; height:auto; margin-bottom:30px; box-sizing:border-box;}
	.scene2 .last li:last-child{margin-bottom:0;}
	.scene2 .last li strong{font-size:18px; padding:35px 0 15px 0;}
	.scene2 .last li p{padding-bottom:30px; font-size:14px; line-height:18px;}

	@keyframes move3_1 {
	  0% {width:50%;}
	  100% {width:100%;}
	}

	@keyframes move3_1_1 {
	  0% {max-width:200%;}
	  100% {max-width:100%;}
	}

	.scene3{padding:150px 0 100px;}
	.scene3 .inner > strong{position:relative; font-size:32px; text-align:left; padding:0;}
	.scene3 .inner > strong:before{top:-60px; width:91px;}
	.scene3 .img1{width:50%; height:0;  padding-top:120%; margin:40px auto 0; text-align:right;}

	.scene3 .img1 img{max-width:200%;}
	.scene3.move .img1 img{animation:move3_1_1 1s ease-out forwards;}

	.scene3 .img_list{padding-top:120px;}
	.scene3 .img_list li:first-child img:first-child,
	.scene3 .img_list li:first-child{margin-bottom:12px;}

	.scene3 dl{padding:120px 0 20px 0;}
	.scene3 dl dt{font-size:16px;}
	.scene3 dl dd{font-size:14px; line-height:18px;}
	.scene3 .last li{width:100%; height:auto; padding:0 20px; margin-bottom:30px; box-sizing:border-box;}
	.scene3 .last li:last-child{margin-bottom:0;}
	.scene3 .last li strong{font-size:18px; padding:35px 0 15px 0;}
	.scene3 .last li p{padding-bottom:30px; font-size:14px; line-height:18px;}
}