@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');

html, body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, span, form, fieldset, input, select, label, textarea, table, caption, thead, tfoot, tbody, tr, th, td
{margin:0;padding:0;font:14px/1.5 'Nanum Gothic', '맑은고딕','Malgun Gothic','나눔고딕','nanumgothic',돋움,Dotum,굴림,Gulim,Sans-serif;color:#000;}
button, span, strong, input, b, em{font-size:inherit;font-family:inherit;color:inherit;font-style:normal}
section, article, aside, header, footer, nav, hgroup, dialog, details, summary, figure, figcaption {display: block;}
cite{display:inline}
html, body {height:100%;} 
body {margin:0px;width:100%;overflow:Hidden;}
a{display:inline-block;font-size:0}
a:link {text-decoration:none;} 
a:visited {text-decoration:none;}
img{border:0;}
label, input, textarea, select{vertical-align:middle}
ol, ul{list-style:none;} 
table{border-collapse:collapse;table-layout:fixed;}
fieldset{border:none}

#tutorial {
	position: relative;
	height: 100%;
}

[data-step] {
	display: none;
}

.active[data-step] {
	display: block;
}

.pc{
	position:relative;top:50%;left:50%;
	width:1024px;height:746px;
	background:url(/assets/img/main/v2/tutorial/pos1_1.png) no-repeat;
	transform:translate(-50%, -50%);
}
.app{
	position:relative;top:50%;left:50%;
	width:1024px;height:746px;
	transform:translate(-50%, -50%);
	box-sizing:border-box;
	background:#7fa6f0 url(/assets/img/main/v2/tutorial/app1_1.png) no-repeat center -8px;
}
.balloon{
	position:absolute;
	visibility:hidden;opacity:0;transition:.5s;
	z-index:1;
}
.balloon{
	animation-name: bounce;
	animation-duration: 0.8s;
	transform-origin:50% 50%;
	animation-iteration-count: 2;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
}
.balloon.action{animation-iteration-count: infinite;}
.balloon.off{opacity:0 !important;transition-delay:0s;}
@keyframes bounce {
    0 {transform:translateY(-5px)}
    25% {transform:translateY(0)}
	50% {transform:translateY(-5px)}
    100% {transform:translateY(0)}
}
.end_btn{
	position:absolute;top:0;left:0;
	width:100%;height:100%;
	box-sizing:border-box;
	padding-top:332px;
	background:rgba(0,0,0,0.85);
	text-align:center;
	z-index:10;
	opacity:0;transition:.6s;visibility:hidden;
}
.end_btn.btns{padding-top:303px}
.end_btn p{margin-top:40px;font-size:0}
.end_btn p a{display:inline-block;}
.end_btn p a+a{margin-left:10px}
.end_btn.off{visibility:hidden;display:none}
.end_btn.on,
.end_btn.active{visibility:visible;}
.end_btn.active{display:block;}

.on{opacity:1;visibility:visible}
.ani0{transition-delay:0s;animation-delay: 0s;}
.ani05{transition-delay:.5s;animation-delay: .5s;}
.ani1{transition-delay:1s;animation-delay: 1s;}
.ani2{transition-delay:2s;animation-delay: 2s;}
.ani3{transition-delay:3s;animation-delay: 3s;}
.ani4{transition-delay:4s;animation-delay: 4s;}
.ani5{transition-delay:5s;animation-delay: 5s;}
.ani6{transition-delay:6s;animation-delay: 6s;}
.ani7{transition-delay:7s;animation-delay: 7s;}
.ani8{transition-delay:8s;animation-delay: 8s;}
.ani9{transition-delay:9s;animation-delay: 9s;}
.ani10{transition-delay:10s;animation-delay: 10s;}
.ani11{transition-delay:11s;animation-delay: 11s;}
.ani12{transition-delay:12s;animation-delay: 12s;}
.ani13{transition-delay:13s;animation-delay: 13s;}
.ani14{transition-delay:14s;animation-delay: 14s;}
.ani15{transition-delay:15s;animation-delay: 15s;}

.pc .btn{position:absolute;bottom:83px;right:20px;display:block;width:120px;height:45px;font-size:0;}
.app .btn{position:absolute;top:173px;left:367px;display:block;width:290px;height:155px;font-size:0;}
.pc .flicker{
	position:absolute;top:0;left:0;
	width:100%;height:100%;
	animation-name: flicker;
	animation-duration: 2s;
	transform-origin:50% 50%;
	animation-iteration-count: infinite;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
	transition:.3s;opacity:0
}
@keyframes flicker {
    0 {opacity:0}
	25% {opacity:1}
	50% {opacity:0}
	75% {opacity:1}
	100% {opacity:0}
}

.scroll_wrap{position:absolute;top:241px;left:357px;width:309px;height:446px;overflow:Hidden;}
.scroll_wrap img{display:block;width:100%;transition:.5s}

/* bg */
#pos1_a{background-image:url(/assets/2025062302/img/main/v2/tutorial/pos1/bg1.png)}
#pos1_b{background-image:url(/assets/2025062302/img/main/v2/tutorial/pos1/bg2.png)}
#pos1_c{background-image:url(/assets/2025062302/img/main/v2/tutorial/pos1/bg3.png)}

#pos2_a{background-image:url(/assets/2025062302/img/main/v2/tutorial/pos2/bg1.png)}
#pos2_b{background-image:url(/assets/2025062302/img/main/v2/tutorial/pos2/bg2.png)}
#pos2_c{background-image:url(/assets/2025062302/img/main/v2/tutorial/pos2/bg3.png)}

#pos3_a{background-image:url(/assets/2025062302/img/main/v2/tutorial/pos3/bg1.png)}
#pos3_b{background-image:url(/assets/2025062302/img/main/v2/tutorial/pos3/bg2.png)}
#pos3_c{background-image:url(/assets/2025062302/img/main/v2/tutorial/pos3/bg3.png)}
#pos3_d{background-image:url(/assets/2025062302/img/main/v2/tutorial/pos3/bg4.png)}
#pos3_e{background-image:url(/assets/2025062302/img/main/v2/tutorial/pos3/bg5.png)}
#pos3_f{background-image:url(/assets/2025062302/img/main/v2/tutorial/pos3/bg6.png)}

#pos4_a{background-image:url(/assets/2025062302/img/main/v2/tutorial/pos4/bg1.png)}
#pos4_b{background-image:url(/assets/2025062302/img/main/v2/tutorial/pos4/bg2.png)}
#pos4_c{background-image:url(/assets/2025062302/img/main/v2/tutorial/pos4/bg3.png)}
#pos4_d{background-image:url(/assets/2025062302/img/main/v2/tutorial/pos4/bg4.png)}

#app1_a{background-image:url(/assets/2025062302/img/main/v2/tutorial/app1/bg1.png)}
#app1_b{background-image:url(/assets/2025062302/img/main/v2/tutorial/app1/bg2.png)}
#app1_c{background-image:url(/assets/2025062302/img/main/v2/tutorial/app1/bg3.png)}
#app1_d{background-image:url(/assets/2025062302/img/main/v2/tutorial/app1/bg4.png)}

#app2_a{background-image:url(/assets/2025062302/img/main/v2/tutorial/app2/bg1.png)}
#app2_b{background-image:url(/assets/2025062302/img/main/v2/tutorial/app2/bg2.png)}
#app2_c{background-image:url(/assets/2025062302/img/main/v2/tutorial/app2/bg3.png)}
#app2_d{background-image:url(/assets/2025062302/img/main/v2/tutorial/app2/bg4.png)}
#app2_e{background-image:url(/assets/2025062302/img/main/v2/tutorial/app2/bg5.png)}
#app2_f{background-image:url(/assets/2025062302/img/main/v2/tutorial/app2/bg6.png)}
#app2_g{background-image:url(/assets/2025062302/img/main/v2/tutorial/app2/bg7.png)}
#app2_h{background-image:url(/assets/2025062302/img/main/v2/tutorial/app2/bg8.png)}
#app2_i{background-image:url(/assets/2025062302/img/main/v2/tutorial/app2/bg9.png)}

#app3_a{background-image:url(/assets/2025062302/img/main/v2/tutorial/app3/bg1.png)}
#app3_b{background-image:url(/assets/2025062302/img/main/v2/tutorial/app3/bg2.png)}
#app3_c{background-image:url(/assets/2025062302/img/main/v2/tutorial/app3/bg3.png)}
#app3_d{background-image:url(/assets/2025062302/img/main/v2/tutorial/app3/bg4.png)}
#app3_e{background-image:url(/assets/2025062302/img/main/v2/tutorial/app3/bg5.png)}

#pos1_a p:nth-child(1){top:149px;left:165px}
#pos1_a .btn{top:100px;left:20px;width:205px;height:250px}
#pos1_b:before{
	content:'';
	position:absolute;top:153px;left:19px;
	display:block;width:450px;height:30px;
	background:#fff
}
#pos1_b.bg:before{display:none}
#pos1_b p:nth-child(1){top:274px;left:672px}
#pos1_b p:nth-child(2){top:573px;left:726px}
#pos1_b .btn1{top:160px;left:495px;width:509px;height:159px}
#pos1_b .btn2{bottom:14px;right:6px;width:145px;height:80px}
#pos1_c p:nth-child(1){top:162px;left:210px}

#pos2_a .flicker{background-image:url(/assets/2025062302/img/main/v2/tutorial/pos2/blueline.png)}
#pos2_a p:nth-child(1){top:118px;left:34px}
#pos2_a p:nth-child(2){top:551px;left:676px}
#pos2_b p:nth-child(1){top:295px;left:538px}
#pos2_b ul{position:absolute;top:110px;right:23px;font-size:0}
#pos2_b ul li{font-size:0}
#pos2_b ul li a{
	display:block;width:262px;height:50px;line-height:48px;
	box-sizing:border-box;
	border:1px solid #444;border-radius:5px;
	margin-bottom:5px;
	background:#fff;
	text-align:center;font-size:15px;color:#222;font-weight:500
}
#pos2_b ul li a:hover{background:#444;color:#fff}
#pos2_c p:nth-child(1){top:118px;left:155px}
#pos2_c p:nth-child(2){top:324px;left:519px}
#pos2_c p:nth-child(3){top:551px;left:673px}

#pos3_a p:nth-child(1){top:551px;left:676px}
#pos3_b p:nth-child(1){top:178px;left:519px}
#pos3_b p:nth-child(2){top:309px;left:519px}
#pos3_b p:nth-child(3){top:417px;left:519px}
#pos3_b p:nth-child(4){top:525px;left:524px}
#pos3_b p:nth-child(5){top:551px;left:625px}
#pos3_b ul{position:absolute;bottom:138px;right:18px;width:272px;font-size:0;text-align:right}
#pos3_b ul li{display:inline-block;}
#pos3_b ul li a{
	display:block;width:64px;height:50px;line-height:48px;
	box-sizing:border-box;
	border:1px solid #444;border-radius:5px;
	margin:5px 3px 0 0;
	background:#fff;
	text-align:center;font-size:15px;color:#222;font-weight:500;letter-spacing:-1px
}
#pos3_b ul li a.on,
#pos3_b ul li a:hover{background:#444;color:#fff}
#pos3_b .btn{width:165px}
#pos3_c p:nth-child(1){top:119px;left:568px}
#pos3_c p:nth-child(2){top:431px;left:516px}
#pos3_c p:nth-child(3){top:554px;left:523px}
#pos3_d p:nth-child(1){top:431px;left:587px}
#pos3_e p:nth-child(1){top:431px;left:652px}
#pos3_f p:nth-child(1){top:119px;left:689px}
#pos3_f p:nth-child(2){top:431px;left:716px}

#pos4_a p:nth-child(1){top:14px;left:48px}
#pos4_a .btn{top:0;left:0}
#pos4_b p:nth-child(1){top:259px;left:224px}
#pos4_c p:nth-child(1){top:90px;left:94px}
#pos4_c p:nth-child(2){top:606px;left:777px}
#pos4_d p:nth-child(1){top:15px;left:73px}
#pos4_d p:nth-child(2){top:15px;left:315px}
#pos4_d p:nth-child(3){top:325px;left:73px}
#pos4_d p:nth-child(4){top:327px;left:556px}
#pos4_d p:nth-child(5){top:584px;left:302px}
#pos4_d p:nth-child(6){top:327px;left:798px}

#app1_a p:nth-child(1){top:358px;left:403px}
#app1_a p:nth-child(2){top:145px;left:143px}
#app1_a p:nth-child(3){top:228px;left:632px}
#app1_b p:nth-child(1){top:356px;left:140px}
#app1_b p:nth-child(2){top:571px;left:632px}
#app1_b .btn{width:176px;height:46px;top:635px;left:481px;}
#app1_c p:nth-child(1){top:314px;left:612px}
#app1_c ul{position:absolute;top:236px;left:387px;width:255px;font-size:0}
#app1_c ul li{display:inline-block;}
#app1_c ul li a{
	display:block;width:122px;height:49px;line-height:46px;
	box-sizing:border-box;
	border:1px solid #444;border-radius:2px;
	margin:4px 4px 0 0;
	background:#fff;
	text-align:center;font-size:15px;color:#222;font-weight:500;letter-spacing:-1px
}
#app1_c ul li a:hover{background:#444;color:#fff}
#app1_d p:nth-child(1){top:143px;left:218px}
#app1_d p:nth-child(2){top:227px;left:629px}

#app2_a p:nth-child(1){top:227px;left:625px}
#app2_b p:nth-child(1){top:390px;left:141px}
#app2_b p:nth-child(2){top:469px;left:614px}
#app2_b .btn{width:176px;height:46px;top:550px;left:481px;}
#app2_c p:nth-child(1){top:570px;left:630px}
#app2_c .btn{width:176px;height:46px;top:635px;left:481px;}
#app2_d p:nth-child(1){top:145px;left:574px}
#app2_d p:nth-child(2){top:257px;left:627px}
#app2_e p:nth-child(1){top:457px;left:148px}
#app2_f p:nth-child(1){top:457px;left:225px}
#app2_g p:nth-child(1){top:457px;left:572px}
#app2_h p:nth-child(1){top:145px;left:652px}
#app2_i p:nth-child(1){top:457px;left:645px}

#app3_a p:nth-child(1){top:93px;left:113px}
#app3_b p:nth-child(1){top:286px;left:540px}
#app3_b .btn{top:245px;width:221px;height:84px}
#app3_c p:nth-child(1){top:345px;left:640px}
#app3_c p:nth-child(2){top:366px;left:640px}
#app3_c p:nth-child(3){top:446px;left:640px}
#app3_c p:nth-child(4){top:369px;left:640px}
#app3_d p:nth-child(1){top:402px;left:640px}
#app3_d p:nth-child(2){top:211px;left:632px}
#app3_e p:nth-child(1){top:350px;left:140px}
#app3_e p:nth-child(2){top:344px;left:155px}
#app3_e p:nth-child(3){top:327px;left:136px}

/* usp */
.usp{
	position:relative;top:50%;left:50%;
	width:1024px;height:746px;
	background:url(/assets/2025062302/img/main/v2/tutorial/usp_bg.jpg) no-repeat;
	transform:translate(-50%, -50%);
}
.usp dt, .usp dd{position:absolute;top:135px;left:0;width:100%;text-align:center;font-size:0;transition:.8s;transform:translateY(20px);opacity:0}
.usp dt{transition-delay:.2s;}
.usp dd{top:331px;transition-delay:.6s;}
.usp dd img{margin:0 4px}
.usp dd.txt:before{
	content:'';
	display:block;width:1px;height:76px;
	margin:0 auto 45px;
	background:#000
}
.usp dt.on, .usp dd.on{transform:translateY(0);opacity:1}