@charset "UTF-8";

body, html {-ms-overflow-style:none;scrollbar-width:none;}.
body::-webkit-scrollbar, html::-webkit-scrollbar {display: none;}

main {padding:0;margin:0;}

.mwrap {position:relative;overflow-y:hidden;}
.mwrap::-webkit-scrollbar {display: none;}
.mwrap {padding:0;margin:0 0 0 200px;transition:all 0.5s;}
.swiper-slide {float: left;height:100vh;box-sizing: border-box;}
.mwrap section{position:relative;display:flex;flex-direction:column;gap:10px;padding:103px 60px;}
.mwrap section:nth-of-type(odd){background: rgba(246, 248, 251, 0.70);}
.mwrap section em{color: var(--c_primary_m);font-size: 16px;font-weight: 700;font-family:var(--f_nsN);}
.mwrap section h2{color:var(--c_primary_m);font-family:var(--f_eli);font-size: 38px;font-weight: 700;line-height: 100%;}
.mwrap section p{min-height:100px;color:rgba(14, 29, 75, 0.58);font-family:var(--f_nsN);font-size: 14px;font-weight:400;line-height:160%;}

/* 공통 - button */
.mwrap section .btnwrap {display:flex;gap:10px;}
.mwrap section .btnwrap a{display:flex;height:94px;justify-content:center;align-items:center;gap:10px;padding:25px 18px;border-radius:20px;border: 1px solid rgba(44, 58, 98, 0.14);color:var(--c_primary_m);text-align: center;font-family:var(--f_nsN);font-size: 16px;font-weight: 800;line-height:1.4;}
.mwrap section .btnwrap a:hover,
.mwrap section .btnwrap a:focus{border-color:var(--c_primary_m);background-color:var(--c_primary_m);color:#fff;}

/* 공통 - ico */
.mwrap section .lottie{position:absolute;bottom:80px;right:20px;width:200px;height:auto;transform:translateX(0);transition:1s transform}
#section2 .lottie{width:264px;}
#section3 .lottie{width:257px;bottom:90px;}
#section4 .lottie{width:245px;}
#section5 .lottie{width:207px;bottom:50px;}
.mwrap section:hover .lottie,
.mwrap section:focus .lottie{transform:translateX(20px);}

#section1{width:calc(56vw - 200px);padding:103px 80px;color:#fff;background:#6CBBF7;overflow:hidden;}
#section1 #slogan {z-index:11;position:relative;}
#section1 #slogan *{opacity:0}
#section1 #slogan em{animation:copy-ani 1s both;color:#fff;font-family:var(--f_eli);}
#section1 #slogan h2{animation:copy-ani 1s .3s both;color:#fff;font-size:58px;line-height:1.2}
#section1 #slogan p{animation:copy-ani 1s .6s both;color:#fff;font-size:16px;}
#section1 #slogan a{animation:copy-ani 1s .9s both;display:inline-flex;align-items:center;gap:8px;padding: 16px 28px;margin-top:20px;color:#fff;border-radius:60px;border: 1px solid rgba(255, 255, 255, 0.60)}
#section1 #slogan a i{opacity:1;border-color:#fff;}
#section1 #slogan a:hover,
#section1 #slogan a:focus{border-color:var(--c_primary_m);background-color:var(--c_primary_m) }
@keyframes copy-ani {    
  0% {opacity:0; transform:translateY(50px);}  
  100% {opacity:1; transform:translateY(0);}  
}
#section1 .obj{animation:bg-ani 1s .6s both;opacity:0;z-index:10;position:absolute;right:0;bottom:80px;width:690px;height:400px;padding-bottom:50px;}
#section1 .obj .bg{z-index:10;position:absolute;left:0;top:0;display:block;width:736px;height:396px;background:url(/images/main/visual_bg.png) no-repeat 100% 100%;}
#section1 .obj .ani{position:absolute;background-repeat:no-repeat;}
#section1 .obj .face{z-index:11;left: 290px;top: 94px;width:59px;height: 74px;background-image:url(/images/main/ani_face.png);transform-origin:50% 100%;animation:ani-face 2s infinite alternate;}
#section1 .obj .face2{z-index:11;left: 501px;top: 140px;width:58px;height: 46px;background-image:url(/images/main/ani_face2.png);transform-origin:50% 100%;animation:ani-face2 2s infinite alternate;}
#section1 .obj .arm{left: 138px;top:100px;width:73px;height:96px;background-image:url(/images/main/ani_arm.png);transform-origin:50% 100%;animation:ani-arm 1s infinite alternate;}
#section1 .obj .arm2{right: 39px;top: 63px;width:53px;height:96px;background-image:url(/images/main/ani_arm2.png);transform-origin:50% 100%;animation:ani-arm 1s .3s infinite alternate;}

@keyframes bg-ani {    
  0% {opacity:0; transform:translateX(50px);}  
  100% {opacity:1; transform:translateX(0);}  
}
@keyframes ani-face {    
  0% {transform:rotate(10deg);}  
  100% {transform:rotate(0deg);}  
}
@keyframes ani-face2 {    
  0% {transform:rotate(10deg);}  
  100% {transform:rotate(-10deg);}  
}
@keyframes ani-arm {    
  0% {transform:rotate(-10deg);}  
  100% {transform:rotate(10deg);}  
}
@keyframes ani-arm2 {    
  0% {transform:rotate(10deg);}  
  100% {transform:rotate(-10deg);}  
}

#section1 .bg{position:absolute;left:50%;top:50%;}
#section1 .bgcir{animation:obj_cir_mv 10s infinite alternate;transform:translateX(-50%);width:66px;height:66px;margin-left:-20%;border-radius:40px;background:#0083E7;opacity:.5}
#section1 .bgcir2{transform:translateX(-50%);top:90%;width:36px;height:36px;margin-left:190px;border-radius:40px;background:#0083E7;opacity:.5}
#section1 .bgstar{animation:obj_star_mv 14s infinite alternate; transform:translateX(-50%);margin-left:270px;margin-top:-180px;width:380px;height:380px;background:url(/images/contents/item1_obj.svg) no-repeat;opacity:.4}
#section1 .bgstar2{animation:obj_star_sm_mv 10s 1s infinite;transform-origin: 50% 50%;transform:translateX(-50%) rotate(-30deg);margin-left:0;margin-top:-180px;width:80px;height:90px;background:url(/images/contents/item1_obj.svg) no-repeat;background-size:100% auto;opacity:.4}

@keyframes obj_star_mv {
     0%  {transform:translate(-50%, 0)}
     30% {transform:translate(-40%, 10%) rotate(-30deg);}
     60% {transform:translate(-80%, 40%) rotate(-90deg) scale(1.5);}
     100% {transform:translate(-50%, 0) rotate(0deg);}
}
@keyframes obj_star_sm_mv {
     0%  {transform:translate(-50%, 0) rotate(-30deg)}
     20% {transform:translate(80%, -40%) rotate(-90deg) scale(1.5);}
     40% {transform:translate(80%, 40%) rotate(-120deg) scale(.8);}
     60% {transform:translate(100%, 20%) rotate(-360deg) scale(.8);}
     100% {transform:translate(-50%, 0) rotate(-30deg);}
}

@keyframes obj_cir_mv {
     0%  {transform:translate(-50%, 0) scale(1)}
     60% {transform:translate(20%, 80%) scale(1.5)}
     100% {transform:translate(0%, 0) scale(1)}
}

#section2{width:22vw;}
#section3{width:22vw;}
#section4{width:22vw;}
#section5{width:22vw;}

#section6{justify-content:space-between;width:19vw;padding:0;}
#section6 .member_info{display: flex;flex-direction: column;justify-content:center;align-items:center;gap:20px;height: 297px;padding: 60px 0px 50px 0px;background: #E9F5FE;}
#section6 .member_info h2{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;color:var(--c_primary);font-family:var(--f_nsN);font-size:20px;font-weight: 800;}
#section6 .member_info h2::after{content:'';display:block;width:70px;height:70px;background:url(/images/main/ico_member.svg) no-repeat;}
#section6 .member_info a{display:flex;align-items:center;color:var(--c_primary);font-family:var(--f_nsN);font-size: 15px}
#section6 .member_info a::after{content:'';display:block;width:13px;height:13px;background:url(/images/main/ico_arr_r.svg) no-repeat;}
#section6 .news{padding:60px 40px;}
#section6 .news .tit{position:relative;}
#section6 .news .tit h2{color:var(--c_primary);font-family:var(--f_nsN);font-size: 15px;font-weight: 800;}
#section6 .news .tit a{position:absolute;right:0;top:2px;ccolor:var(--c_primary);font-family:var(--f_nsN);font-size: 14px;}
#section6 .news .post-list li{margin-bottom:20px;}
#section6 .news .post-list li b{display:block;margin-bottom:4px;overflow:hidden;white-space:nowrap;text-overflow: ellipsis;color:#595959;}
#section6 .news .post-list li span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:keep-all;white-space:normal;text-overflow:ellipsis;overflow:hidden;overflow:hidden;
color:#6F7995;color:#6F7995;font-family:var(--f_nsN);font-size:14px;line-height:1.4;}

#section6 .quick{display:flex;flex-direction:column;padding:50px 40px 100px;}
#section6 .quick a{position:relative;display:flex;align-items:center;gap:10px;width:100%;margin-top:5px;color:#333;font-family:var(--f_nsN);font-weight:800;font-size:15px;}
#section6 .quick a::after{position:absolute;right:0;content:'';display:block;width:13px;height:13px;background:url(/images/main/ico_arr_r_bk.svg) no-repeat;}
#section6 .quick a i{display:block;width:21px;height:21px;background:url(/images/main/ico_faq.svg) no-repeat;}
#section6 .quick a:last-child i{background-image:url(/images/main/ico_qna.svg);}

.scroll-box {z-index:90;position:absolute;bottom:80px;left:calc(52.6vw - 200px);display:flex;flex-direction:column;align-items:center;gap:4px;width:125px;height:125px;padding:18px;line-height:18px;font-size:14px;color:#fff;border-radius:100px;text-align:center;font-size:13px;line-height:1.2;background:#333;}
.scroll-box i{display:block;width:28px;height:28px;background:url(/images/main/ico_mouse.svg) no-repeat;background-size:100% auto;}
.scroll-box:before {display:block; position:absolute;left:20px; bottom:25px; content:''; width:90px;height:2px;background-color:rgba(255, 255, 255, 0.5);}
.scroll-box:after {display:block; position:absolute;left:20px; bottom:25px; content:''; width:15px;height:2px;background-color:#fff; animation: about-scroll-ani 2s ease-in-out infinite;}

@keyframes about-scroll-ani {    
  50% {left:80px;}  
  100% {left:20px;}  
}

/*/////////////반응형/////////////*/
/*모바일 기기*/
@media screen and (hover: none) and (pointer: coarse) { 
	main {overflow-x: scroll;}
	#lottie-pop3 svg, #lottie-pop4 svg {display:none;}
	#lottie-pop3 {height:208px;background:url('/images/main/lottie-pop3-img.svg') no-repeat 50%;background-size:100%;}
	#lottie-pop4 {height:218px;background: url('/images/main/lottie-pop4-img.svg') no-repeat 50%;background-size:100%;}
}
@media(max-width:1400px){
	#section1 .obj {width:490px;height:252px;}
	#section1 .obj .bg {width:490px;height:252px;background-size:100%;}
	#section1 .obj .ani {background-size:100%;}
	#section1 .obj .face {left:193px;top:21px;width:46px;height:33px;}
	#section1 .obj .face2 {left:362px;top:90px;width:44px;height:33px;}
	#section1 .obj .arm {left:6px;top:47px;width:57px;height:84px;}
	#section1 .obj .arm2 {right:17px;top:-18px;width:37px;height:87px;}
}
@media(max-width:1366px){ /*아이패드 프로 12인치*/
	
}
@media(max-width:1365px){/*갤럭시 탭 s6*/
	#section1 .obj,
	.mwrap section .lottie,
	#section3 .lottie,
	#section4 .lottie,
	#section5 .lottie {bottom:20px;}
	#section2 .lottie {width:190px;}
	#section3 .lottie {width:190px;}
	#section4 .lottie {width:170px;height:138px;}
	#section5 .lottie {width:150px;height:145px;}

	#section1 #slogan h2 {font-size:42px;}
	.mwrap section h2 {font-size:32px;}
	.mwrap section em {font-size:15px;line-height:1;}

	#section6 .news {height:70vh;padding:30px 40px;overflow-y:scroll;}
	#section6 .quick {padding:22px 40px;}
}
@media(max-height:632px){ /*갤럭시 탭 s6 높이 사이즈*/
	#section1 {padding:80px 40px 80px 60px;}
	#section2, #section3, #section4, #section5 {padding:80px 40px;}
}