@charset "utf-8";
/* CSS Document */
:root {
	--phone-height0: 657px;
	--txt-height0: calc(96px / 2);
	--tit-top0: calc( ((100vh - var(--phone-height0)) / 2) - var(--txt-height0));

	--phone-height: 422px;
	--txt-height: calc(74px / 2);
	--tit-top: calc( ((100vh - var(--phone-height)) / 2) - var(--txt-height));

	--phone-height2: 422px;
	--txt-height2: calc(170px / 2);
	--tit-top2: calc( ((100vh - var(--phone-height2)) / 2) - var(--txt-height2));
	
	--tit-top3: calc( ((100vh - var(--phone-height2)) / 2) - var(--txt-height));

}

/* COMMON */
.bl {color: #1761fe;}
.gr {color: #00e08d;}
.nv {color: #161827;}


/* MAIN */
.floatingBanner{
  width: 15.2rem;
  background-color: #FFFFFFE5;
  font-size: 1.4rem;
  font-weight: 500;
  position: fixed;
  top: 51%;
  right: 0;
  transform: translateY(-50%);
  z-index: 999999;
  border: 1px solid #d8d8d8;
  box-shadow: 0px 0px 8px 0px #00000026;
  border-radius: 1rem 0 0 1rem;
}
.floatingM-Auto{
  margin: 0 auto;
}
.floatingItem{
  padding:1.5rem 0;
  display: grid;
  gap: .8rem;
  justify-content: center;
  text-align: center;
  border-bottom: 1px solid #d8d8d8;
}
.floatingItem:last-child{
  border-bottom: none;
}
.floatingBanner .floatingImg{
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.floatingBanner .floatingImg1{
  width: 102px;
  height:59px;
  background-image: url(../img/floatingLogo1.png);
}
.floatingBanner .floatingImg2{
  width: 85px;
  height:33px;
  background-image: url(../img/floatingLogo2.png);
}
.floatingBanner .floatingImg3{
  width: 69px;
  height:40px;
  background-image: url(../img/floatingLogo3.png);
}
.floatingBanner .floatingImg4{
  width: 48px;
  height:48px;
  background-image: url(../img/floatingLogo4.png);
}
.floatingBanner .floatingImg5{
  width: 49px;
  height:48px;
  background-image: url(../img/floatingLogo5.png);
}
.floatingBanner .floatingImg6{
  width: 54px;
  height:48px;
  background-image: url(../img/floatingLogo6.png);
}

.main .size {position: relative; max-width: 1450px;}
.main .section {background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; overflow: hidden;}
.main .section.sec1 {background-image: url('/resource/home/img/main_bg_1.jpg');}
.main .section.sec3 {background-image: url('/resource/home/img/main_bg_2.jpg');}
.main .section.sec5 {background-color: #00e08b;}
.main .section.sec6 {background-color: #f9f9f9;}
.main .section.sec7 .top_wrap {background-image: url('/resource/home/img/main_bg_3.jpg');}
.main .phone_bg {position: absolute; top: 50%; background-repeat: no-repeat; background-size: 100% auto;}

.main .free_btn_box {position: relative; margin-top: 55px;}
.main .free_btn_box a {display: block; padding: 25px; width: 100%; max-width: 300px; margin: 0 auto; line-height: 1.2; font-size: 1.7rem; color: #fff; letter-spacing: -.1rem; text-align: center; border-radius: 70px; background-color: #0060ff; box-sizing: border-box; box-shadow: 0px 1px 13px 0px rgba(0, 0, 0, 0.34);}
.main .free_btn_box a span {font-weight: 600;}

.main .cont_box strong {position: relative; display: block; line-height: 1.2; font-size: 5rem; font-weight: 300; letter-spacing: -.17rem;}
.main .cont_box strong b {display: block; font-weight: 700;}
.main .cont_box strong .ft_pins {font-weight: 600;}
.main .cont_box p {position: relative; margin-top: 33px; font-size: 2rem; font-weight: 400; letter-spacing: -.05rem;}
.main .cont_box a {position: relative; display: inline-block; margin-top: 50px; line-height: 1; font-size: 1.4rem; font-weight: 700; letter-spacing: -.08rem;}
.main .cont_box a:before {content: ''; position: absolute; top: -2px; right: -10px; display: block; width: 6px; height: 6px; border-radius: 6px; background-color: #1761fe;}

.main .sec1 .txt_box {color: #fff; letter-spacing: -.2rem; text-shadow: 0px 0px 13px rgba(0, 0, 0, 0.3);}
.main .sec1 .txt_box .slogan {position: relative;}
.main .sec1 .txt_box em {position: relative; display: block; margin-top: 8px; font-size: 4rem; font-weight: 300;}
.main .sec1 .txt_box em .ft_pins {font-weight: 200;}
.main .sec1 .txt_box strong {position: relative; display: block; line-height: 1; font-size: 7.5rem; font-weight: 600;}
.main .sec1 .txt_box strong span {font-family: 'Noto Sans KR', sans-serif;}
.main .sec1 .txt_box strong i {display: inline-block; line-height: 1; color: #00e08d; font-style: normal;}

.main .bg_line {stroke-dasharray: 500; stroke-dashoffset: 500;}
.main .bg_line circle, .main .bg_line ellipse {opacity: 0;}
.main .active .bg_line {animation: svgAni 1.2s linear forwards;}
.main .active .bg_line circle, .main .active .bg_line ellipse {animation: opacityAni .3s linear 1.2s forwards;}

.main .sec2 .size {position: relative;}
.main .sec2 .size:before {content: ''; position: absolute; top: 0; left: -80%; width: 100%; height: 100%; background-color: #fff; z-index: 1;}
.main .sec2 .cont_wrap {float: right; padding-left: 170px; width: 100%; max-width: 1050px; box-sizing: border-box;}
.main .sec2 .cont_inner {position: relative;}
.main .sec2 .cont_inner.end .cont2 {margin-top: 80px; transition: all 0.7s ease 0.2s; -webkit-transition: all 0.7s ease 0.2s; -ms-transition: all 0.7s ease 0.2s; -moz-transition: all 0.7s ease 0.2s; -o-transition: all 0.7s ease 0.2s;}
.main .sec2 .cont2 {margin-top: 260px;}
.main .sec2 .cont2 p {color: #444;}
.main .sec2 .cont_box.mo {display: none;}
.main .sec2 .ico_list {position: absolute; top: 200px; left: 0; min-width: 1110px;}
.main .sec2 .ico_list li {position: relative; float: left; width: 150px; margin-right: 35px; height: 150px; text-align: center; border-radius: 20px; background-color: #fff; box-shadow: 0px 0px 27px 0px rgba(0, 0, 0, 0.09);}
.main .sec2 .ico_list li:last-child {margin-right: 0;}
.main .sec2 .ico_list li img {display: inline-block; max-width: 100%; height: 77px; line-height: 77px;}
.main .sec2 .ico_list .li1 img {width: 82px;}
.main .sec2 .ico_list .li2 img {width: 67px;}
.main .sec2 .ico_list .li3 img {width: 62px;}
.main .sec2 .ico_list .li4 img {width: 74px;}
.main .sec2 .ico_list .li5 img {width: 82px;}
.main .sec2 .ico_list .li6 img {width: 68px;}
.main .sec2 .ico_list li em {display: block; margin-top: 10px; line-height: 1; font-size: 1.4rem; font-weight: 500; color: #1660fd; letter-spacing: -.05rem;}
.main .sec2_line {position: absolute; bottom: var(--line2-bottom); left: var(--line2-left); width: auto; height: 869px;}
.main .sec2_line_2 {display: none; position: absolute; bottom: var(--line2-bottom); left: var(--line2-left); width: auto; height: 869px;}

.main .sec2.active .ico_list.move1 li:nth-child(1) {animation: objMove .8s forwards;}
.main .sec2.active .ico_list.move2 li:nth-child(2) {animation: objMove .8s forwards;}
.main .sec2.active .ico_list.move3 li:nth-child(3) {animation: objMove .8s forwards;}
.main .sec2.active .ico_list.move4 li:nth-child(4) {animation: objMove .8s forwards;}
.main .sec2.active .ico_list.move5 li:nth-child(5) {animation: objMove .8s forwards;}
.main .sec2.active .ico_list.move6 li:nth-child(6) {animation: objMove .8s forwards;}

.main .sec2.active .ico_list.move1 {animation: boxMove .8s forwards;}
.main .sec2.active .ico_list.move2 {animation: boxMove2 .8s forwards;}
.main .sec2.active .ico_list.move3 {animation: boxMove3 .8s forwards;}
.main .sec2.active .ico_list.move4 {animation: boxMove4 .8s forwards;}
.main .sec2.active .ico_list.move5 {animation: boxMove5 .8s forwards;}
.main .sec2.active .ico_list.move6 {animation: boxMove6 .8s forwards;}

@keyframes objMove {
	0% {left: 0;} 
	100% {left: -170px;}
}
@keyframes boxMove {
	0% {left: 0;}
	100% {left: -185px;}
}
@keyframes boxMove2 {
	0% {left: -185px;}
	100% {left: -370px;}
}
@keyframes boxMove3 {
	0% {left: -370px;}
	100% {left: -555px;}
}
@keyframes boxMove4 {
	0% {left: -555px;}
	100% {left: -740px;}
}
@keyframes boxMove5 {
	0% {left: -740px;}
	100% {left: -925px;}
}
@keyframes boxMove6 {
	0% {left: -925px;}
	100% {left: -1110px;}
}

.main .sec3 .cont_box {position: absolute; top: 14%; left: 0; color: #fff;}
.main .sec3 .cont_box strong {font-weight: 200;}
.main .sec3 .cont_box p {margin-top: 40px; color: #d9e2f4; font-weight: 300;}
.main .sec3 .bg_box {opacity: 0; position: absolute; bottom: 0; left: 50%; width: 100%; max-width: 1166px; height: 640px; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -moz-ransform: translateX(-50%); -o-transform: translateX(-50%);}
.main .sec3 .bg_box .bg {height: 100%; background-image: url('/resource/home/img/sec3_border.png'); background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% auto;}
.main .sec3 .ico_list {position: absolute; left: 50%; bottom: 0; width: 330px; height: 480px; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -moz-ransform: translateX(-50%); -o-transform: translateX(-50%); z-index: 5;} 
.main .sec3 .ico_list li {opacity: 0; position: absolute; width: 130px; height: 130px; text-align: center; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; cursor: pointer;}
.main .sec3 .ico_list li:before {content: ''; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; border-radius: 130px; background-color: rgba(217,224,240,.9); transition: all .4s; -webkit-transition: all .4s; -ms-transition: all .4s; -moz-transition: all .4s; -o-transition: all .4s; transform-origin: center; transform-origin: center; -webkit-transform-origin: center; -ms-transform-origin: center; -moz-transform-origin: center; -o-box-shadow: -4px 8px 32px 0px rgba(0, 0, 0, 0.28); z-index: -1;}
.main .sec2 .ico_list li img {display: inline-block; max-width: 100%;}
.main .sec3 .ico_list li em {display: block; height: 0; margin-top: 10px; line-height: 1; font-size: 1.7rem; font-weight: 700; color: #242b42; letter-spacing: -.05rem; transform: scale(0); -webkit-transform: scale(0); -ms-transform: scale(0); -moz-transform: scale(0); -o-transition: all .4s; -webkit-transition: all .4s; -ms-transition: all .4s; -moz-transition: all .4s; -o-transition: all .4s;}
.main .sec3 .ico_list li.active:before {background-color: #f8faff; transform: scale(1.4); -webkit-transform: scale(1.4); -ms-transform: scale(1.4); -moz-transform: scale(1.4); -o-transform: scale(1.4);}
.main .sec3 .ico_list li.active em {height: auto; transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1);}
.main .sec3 .ico_list li.active img {filter: drop-shadow(-3px 3px 3px rgba(0,0,0, .3)); -ms-filter: drop-shadow(-3px 3px 3px rgba(0,0,0, .3));}
.main .sec3_line {position: absolute; bottom: var(--line3-bottom); left: var(--line3-left); width: 1100px; height: auto; z-index:1;}
.main .sec3_line_2 {display: none; position: absolute; bottom: var(--line3-bottom); left: var(--line3-left); width: 640px; height: auto; z-index:1;}
.main .sec3_line_3 {display: none; position: absolute; bottom: var(--line3-bottom); left: var(--line3-left); width: 330px; height: auto; z-index:1;}
@media (hover: hover) {
	.main .sec3 .ico_list li:hover:before {background-color: #f8faff; transform: scale(1.4); -webkit-transform: scale(1.4); -ms-transform: scale(1.4); -moz-transform: scale(1.4); -o-transform: scale(1.4);}
	.main .sec3 .ico_list li:hover em {height: auto; transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1);}
	.main .sec3 .ico_list li:hover img {filter: drop-shadow(-3px 3px 3px rgba(0,0,0, .3)); -ms-filter: drop-shadow(-3px 3px 3px rgba(0,0,0, .3));}
}

.main .sec3 .ico_list .li1 {bottom: 63px; left: -475px; margin-left: 400px;}
.main .sec3 .ico_list .li2 {bottom: 357px; left: -335px; margin-left: 260px; margin-bottom: -200px; transition-delay: 0.35s; -webkit-transition-delay: 0.35s; -ms-transition-delay: 0.35s; -moz-transition-delay: 0.35s; -o-transition-delay: 0.35s;}
.main .sec3 .ico_list .li3 {bottom: 540px; left: -100px; margin-left: 30px; margin-bottom: -300px;}
.main .sec3 .ico_list .li4 {bottom: 540px; right: -100px; margin-right: 30px; margin-bottom: -300px; transition-delay: 0.35s; -webkit-transition-delay: 0.35s; -ms-transition-delay: 0.35s; -moz-transition-delay: 0.35s; -o-transition-delay: 0.35s;}
.main .sec3 .ico_list .li5 {bottom: 357px; right: -335px; margin-right: 260px; margin-bottom: -200px;}
.main .sec3 .ico_list .li6 {bottom: 63px; right: -475px; margin-right: 400px; transition-delay: 0.35s; -webkit-transition-delay: 0.35s; -ms-transition-delay: 0.35s; -moz-transition-delay: 0.35s; -o-transition-delay: 0.35s;}

.main .sec3 .ico_list.on li {opacity: 1;}
.main .sec3 .ico_list.on .li1 {margin-left: 0;}
.main .sec3 .ico_list.on .li2 {margin-left: 0; margin-bottom: 0;}
.main .sec3 .ico_list.on .li3 {margin-left: 0; margin-bottom: 0;}
.main .sec3 .ico_list.on .li4 {margin-right: 0; margin-bottom: 0;}
.main .sec3 .ico_list.on .li5 {margin-right: 0; margin-bottom: 0;}
.main .sec3 .ico_list.on .li6 {margin-right: 0;}

.main .sec3 .ico_list .li1 img {width: 60px;}
.main .sec3 .ico_list .li2 img {width: 58px; margin-left: -12px;}
.main .sec3 .ico_list .li3 img {width: 73px;}
.main .sec3 .ico_list .li4 img {width: 70px;}
.main .sec3 .ico_list .li5 img {width: 62px;}
.main .sec3 .ico_list .li6 img {width: 70px;}

.main .sec4 .phone_bg {left: 0; width: 650px; height: 510px; transform: translateY(-42%); -webkit-transform: translateY(-42%); -ms-transform: translateY(-42%); -moz-transform: translateY(-42%); -o-transform: translateY(-42%); background-image: url('/resource/home/img/object_img.svg'); background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% auto;}
.main .sec4 .cont_wrap {position: relative; float: right; padding-right: 5%; box-sizing: border-box; z-index: 1;}
.main .sec4 .cont_box p {letter-spacing: -.1rem;}
.main .sec4_line {position: absolute; top: var(--line4-top); left: var(--line4-left); width: 1440px; height: auto; z-index:1; transform: rotate(7deg); -webkit-transform: rotate(7deg); -ms-transform: rotate(7deg); -moz-transform: rotate(7deg); -o-transform: rotate(7deg);}
.main .sec4_line_2 {display: none; position: absolute; top: var(--line4-top); left: var(--line4-left); width: 700px; height: auto; z-index:1;}
/* .main .sec4_line_3 {display: none; position: absolute; top: var(--line4-top); left: var(--line4-left); width: 1440px; height: auto; z-index:1;} */

.main .sec5 .phone_bg {right: 5%; width: 660px; height: 455px; transform: translateY(-30%); -webkit-transform: translateY(-30%); -ms-transform: translateY(-30%); -moz-transform: translateY(-30%); -o-transform: translateY(-30%); background-image: url('/resource/home/img/object_img_02.svg'); background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% auto;}
.main .sec5 .cont_wrap {position: relative; padding-left: 5%; box-sizing: border-box; z-index: 1;}
.main .sec5 .cont_box p {color: #444;}
.main .sec5 .cont_box a:before {background-color: #fff;}
.main .sec5_line {position: absolute; top: var(--line5-top); left: var(--line5-left); width: 1150px; height: auto; z-index:1;}
.main .sec5_line_2 {display: none; position: absolute; top: var(--line5-top); left: var(--line5-left); width: 700px; height: auto; z-index:1;}
.main .sec5_line_3 {display: none; position: absolute; top: var(--line5-top); left: var(--line5-left); width: 560px; height: auto; z-index:1;}

.main .sec6 .btn_box {position: relative; margin-top: 100px; width: 103%; margin-left: -3%;}
.main .sec6 .btn_box:before {content: ''; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; z-index: 500;}
.main .sec6 .btn_box a {position: relative; float: left; padding: 0 6%; width: 47%; margin-left: 3%; height: 380px; border-radius: 20px; background-color: #f9f9f9;; box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.1); overflow: hidden; -moz-overflow: hidden; box-sizing: border-box; }
.main .sec6 .btn_box a .bg {opacity: 0; position: absolute; top: -27%; width: 769px; height: 717px; background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% 100%;}
.main .sec6 .btn_box a > div {position: relative; z-index: 1;}
.main .sec6 .btn_box a .img_box {font-size: 0;}
.main .sec6 .btn_box a .img_box .img_cont {position: relative;}
.main .sec6 .btn_box a .img_box .img_cont img {position: absolute; display: block;}
.main .sec6 .btn_box a .txt_box {padding-left: 10%; letter-spacing: -.05rem; box-sizing: border-box;}
.main .sec6 .btn_box a .txt_box em {display: block; line-height: 1; font-size: 3rem; font-weight: 800;}
.main .sec6 .btn_box a .txt_box p {margin-top: 20px; font-size: 1.6rem;}
.main .sec6 .btn_box a.cloud .bg {left: -10%; background-image: url('/resource/home/img/object_bg_02.svg');}
.main .sec6 .btn_box a.cloud .img_box {width: 41%;}
.main .sec6 .btn_box a.cloud .img_box .img_cont {height: 205px;}
.main .sec6 .btn_box a.cloud .img_box .img1 {top: 26px; left: 8px; width: 190px;}
.main .sec6 .btn_box a.cloud .img_box .img2 {top: 0; left: 0; width: 152px;}
.main .sec6 .btn_box a.cloud .img_box .img3 {top: 30px; right: 0; width: 95px;}
.main .sec6 .btn_box a.cloud .txt_box {width: 59%;}
.main .sec6 .btn_box a.premise .bg {left: 3%; background-image: url('/resource/home/img/object_bg.svg');}
.main .sec6 .btn_box a.premise .img_box {width: 38%;}
.main .sec6 .btn_box a.premise .img_box .img_cont {height: 214px;}
.main .sec6 .btn_box a.premise .img_box .img1 {top: 0; left: 0; width: 100%;}
.main .sec6 .btn_box a.premise .img_box .img2 {top: 77px; left: 16px; width: 123px;}
.main .sec6 .btn_box a.premise .img_box .img3 {top: 8px; right: 10px; width: 92px;}
.main .sec6 .btn_box a.premise .txt_box {width: 62%;}

.main .sec6 .btn_box a .bg {animation: bgMove 2s linear 0.5s infinite alternate;} 
.main .sec6 .btn_box.done:before {display: none;}
.main .sec6_line {position: absolute; bottom: var(--line6-bottom); left: var(--line6-left); width: 610px; height: auto; z-index:1;}
.main .sec6_line_2 {display: none; position: absolute; bottom: var(--line6-bottom); left: var(--line6-left); width: 610px; height: auto; z-index:1;}
@-moz-document url-prefix() {
    .main .sec6 .btn_box a .bg {display: none;}
	.main .sec6 .btn_box a:hover {background-color: #1761fe;}
}
@media (hover: hover) {
	.main .sec6 .btn_box a:hover .txt_box em {color: #fff; text-shadow: 0px 0px 9px rgba(0, 0, 0, 0.38);}
	.main .sec6 .btn_box a:hover .txt_box p {color: #fff;}
	.main .sec6 .btn_box a:hover .bg {opacity: 1;}
}

.main .sec7 .top_wrap {height: 500px;}
.main .sec7 .top_wrap strong {position: relative; display: block; font-size: 3.4rem; font-weight: 500; color: #fff; letter-spacing: -.15rem;}
.main .sec7 .top_wrap strong i {color: #00e08d; font-style: normal;}
.main .sec7 .top_wrap strong span {font-size: 3.8rem;}
.main .sec7 .top_wrap img {position: relative; display: inline-block; margin-top: 10px;}
.main .sec7 .top_wrap .free_btn_box {position: relative; margin-top: 45px;}
.main .sec7 .top_wrap .free_btn_box a {max-width: 400px; font-size: 2rem; font-weight: 500;}
.main .sec7 .top_wrap .free_btn_box a i {display: block; margin-top: 5px; font-size: 1.6rem; font-style: normal;}

.phone_frame {position: fixed; width: 340px; height: 657px;}
.phone_frame:before {content: ''; position: absolute; top: -20px; left: -150px; display: block; width: 452px; height: 763px; background-image: url('/resource/home/img/phone_shadow.png'); background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% 100%; z-index: -1;}
.phone_frame .frame_img {position: relative; width: 100%; height: 100%; padding: 23px 22px 22px 24px; background-image: url('/resource/home/img/phone_frame2_none.png'); background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% 100%; box-sizing: border-box;}
.phone_frame .frame_img:before {content: ''; position: absolute; top: 7px; left: 50%; display: block; margin-left: -86px; width: 172px; height: 40px; background-image: url('/resource/home/img/phone_frame_top.png'); background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% 100%; z-index: 5;}
.phone_frame .inner {width: 100%; height: 100%; border-radius: 28px 26px 26px 28px; overflow: hidden;}
.phone_frame .inner > div {width: 100%; height: 100%;}
.phone_frame .cont {display: none;}

.phone_frame .sec2 .sec2_cont {position: relative; height: 100%;}
.phone_frame .sec2 .sec2_cont li {position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;}
.phone_frame .sec2 .sec2_cont li img {width: 100%;}
.phone_frame .sec2 .sec2_cont li img.pc {display: block;}
.phone_frame .sec2 .sec2_cont li img.mo {display: none;}
.phone_frame .sec2 .sec2_cont li:first-child {opacity: 1;}
.phone_frame .sec2 .deco {position: absolute; opacity: 0;} 
.phone_frame .sec2 .deco img {display: block; width: 100%;}
.phone_frame .sec2 .dc1 {top: 135px; left: -54px;}
.phone_frame .sec2 .dc2 {top: 53px; left: -15px;}
.phone_frame .sec2 .dc3 {top: 70px; left: -75px;}
.phone_frame .sec2 .dc4 {top: -65px; left: -515px;}
.phone_frame .sec2_mo_ico {display: none; position: absolute; top: -12px; right: -33px; width: 100px; height: 100px; border-radius: 20px; border: 2px solid #0060ff; background-color: #fff; box-shadow: 0px 0px 16px 0px rgba(20, 20, 20, 0.18); overflow: hidden; box-sizing: border-box; z-index: 5;}
.phone_frame .sec2_mo_ico ul {position: relative; top: 0; left: 0; }
.phone_frame .sec2_mo_ico li {height: 96px; display: flex; display: -ms-flex; display: -moz-flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: center; -webkit-justify-content: center;}
.phone_frame .sec2_mo_ico li img {-webkit-transform: translateZ(0);}
.phone_frame .sec2_mo_ico li.li1 img {width: 63px;}
.phone_frame .sec2_mo_ico li.li2 img {width: 50px;}
.phone_frame .sec2_mo_ico li.li3 img {width: 47px;}
.phone_frame .sec2_mo_ico li.li4 img {width: 54px;}
.phone_frame .sec2_mo_ico li.li5 img {width: 63px;}
.phone_frame .sec2_mo_ico li.li6 img {width: 50px;}

.phone_frame .sec3 {background-image: url('/resource/home/img/phone_inner.png'); background-repeat: no-repeat; background-position: 50% 0; background-size: 100% auto;}
.phone_frame .sec3 ul {height: 100%; background-image: url('/resource/home/img/logo_c.svg'); background-repeat: no-repeat; background-position: 50% 50px; background-size: 95px;}
.phone_frame .sec3 ul li {display: none; padding-top: 140px; height: 100%; box-sizing: border-box;}
.phone_frame .sec3 ul li:first-child {display: block;}
.phone_frame .sec3 ul li .ico {opacity: 0; display: flex; display: -ms-flex; display: -moz-flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: center; -webkit-justify-content: center; height: 120px;}
.phone_frame .sec3 ul li .ico img {filter: drop-shadow(-7px 7px 0 rgba(18,255,176, 1)); -ms-filter: drop-shadow(-7px 7px 0 rgba(18,255,176, 1));}
.phone_frame .sec3 ul li .txt {opacity: 0; margin-top: 37px; text-align: center; letter-spacing: -.1rem;}
.phone_frame .sec3 ul li .txt em {display: block; line-height: 1; font-size: 24px; font-weight: 700; color: #ff754b;}
.phone_frame .sec3 ul li .txt span {display: block; margin-top: 20px; font-size: 18px;}
.phone_frame .sec3 ul li.on .ico {animation-duration: .5s; animation-name: fromBottom; animation-fill-mode: forwards;}
.phone_frame .sec3 ul li.on .txt {animation-delay: .1s; animation-duration: .5s; animation-name: fromBottom; animation-fill-mode: forwards;}

.phone_frame .sec3 ul .li1 .ico img {width: 94px;}
.phone_frame .sec3 ul .li2 .ico img {width: 95px;}
.phone_frame .sec3 ul .li3 .ico img {width: 125px;}
.phone_frame .sec3 ul .li4 .ico img {width: 110px;}
.phone_frame .sec3 ul .li5 .ico img {width: 100px;}
.phone_frame .sec3 ul .li6 .ico img {width: 107px;}

.phone_frame .type1 .bg_slide .bg {border-radius: 28px 26px 26px 28px; overflow: hidden;}
.phone_frame .type1 .bg_slide .sl1 .bg {background-image: url('/resource/home/img/sec4_cont_01.jpg');}
.phone_frame .type1 .bg_slide .bg {height: 100%; background-repeat: no-repeat; background-position: 50% 0; background-size: contain;}
.phone_frame .type1 .swiper-pagination {bottom: -40px;}
.phone_frame .type1 .swiper-pagination-bullet {opacity: 1;}
.phone_frame .type1 .swiper-pagination-bullet-active {background-color: #151726; }
.phone_frame .type1 .cont_slide {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10;}
.phone_frame .type1 .cont_slide .swiper-slide {opacity: 0 !important;}
.phone_frame .type1 .cont_slide .swiper-slide-active {opacity: 1 !important;}
.phone_frame .type1 .cont_slide .ico_box {position: absolute; opacity: 0; display: flex; display: -ms-flex; display: -moz-flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: center; -webkit-justify-content: center; width: 80px; height: 80px; border-radius: 80px; background-repeat: no-repeat; background-position: 50% 50%; box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.7);}
.phone_frame .type1 .cont_slide .ico_box img {display: inline-block;}
.phone_frame .type1 .cont_slide .obj_box {position: absolute; opacity: 0; transform: scale(0.5); -webkit-transform: scale(0.5); -ms-transform: scale(0.5); -moz-transform: scale(0.5); -o-transform: scale(0.5);}
.phone_frame .type1 .cont_slide .tit_box {position: absolute; opacity: 0; width: 300px; height: 103px; font-size: 1.6rem; font-weight: 500; text-align: center; letter-spacing: -.1rem; border-radius: 10px; background-color: rgba(255,255,255,.9); box-shadow: 0px 9px 32px 0px rgba(0, 0, 0, 0.28);  box-sizing: border-box;}
.phone_frame .type1 .cont_slide .tit_box b {display: block; font-size: 2.2rem; font-weight: 700; color: #0060ff; line-height: 1.2;} 
.phone_frame .type1 .swiper-slide-active .ico_box {animation-delay: .5s; animation-duration: .3s; animation-name: showDeco; animation-fill-mode: forwards;}
.phone_frame .type1 .swiper-slide-active .obj_box {animation-delay: .65s; animation-duration: .2s; animation-name: showDeco; animation-fill-mode: forwards;}
.phone_frame .type1 .swiper-slide-active .tit_box {animation-delay: .3s; animation-duration: .3s; animation-name: showDeco; animation-fill-mode: forwards;}
.phone_frame .type1 .swiper-slide-duplicate-active .ico_box {animation-delay: .5s; animation-duration: .3s; animation-name: showDeco; animation-fill-mode: forwards;}
.phone_frame .type1 .swiper-slide-duplicate-active .obj_box {animation-delay: .65s; animation-duration: .2s; animation-name: showDeco; animation-fill-mode: forwards;}
.phone_frame .type1 .swiper-slide-duplicate-active .tit_box {animation-delay: .3s; animation-duration: .3s; animation-name: showDeco; animation-fill-mode: forwards;}

.phone_frame .sec4 .bg_slide .sl1 .bg, .phone_frame .sec4 .bg_slide .sl2 .bg {background-image: url('/resource/home/img/sec4_cont_01.jpg');}
.phone_frame .sec4 .bg_slide .sl3 .bg {background-image: url('/resource/home/img/sec4_cont_02.jpg');}
.phone_frame .sec4 .bg_slide .sl4 .bg {background-image: url('/resource/home/img/sec4_cont_03.jpg');}
.phone_frame .sec4 .cont_slide .ico_box {background-color: #00e08b; box-shadow: 5px 3px 8px 0px rgba(0, 0, 0, 0.33);}
.phone_frame .sec4 .cont_slide .sl1 .obj_box {bottom: 170px; right: -53px;}
.phone_frame .sec4 .cont_slide .sl2 .obj_box {top: 25px; right: 5px;}
.phone_frame .sec4 .cont_slide .sl3 .obj_box {top: 155px; left: -49px;}
.phone_frame .sec4 .cont_slide .sl4 .obj_box {top: 110px; left: -60px;}
.phone_frame .sec4 .cont_slide .sl1 .ico_box {top: 55px; left: -35px;}
.phone_frame .sec4 .cont_slide .sl1 .ico_box img {width: 35px;}
.phone_frame .sec4 .cont_slide .sl2 .ico_box {top: 2px; right: -24px;}
.phone_frame .sec4 .cont_slide .sl2 .ico_box img {width: 33px;}
.phone_frame .sec4 .cont_slide .sl3 .ico_box {top: 305px; left: -85px; z-index: 1;}
.phone_frame .sec4 .cont_slide .sl3 .ico_box img {width: 38px;}
.phone_frame .sec4 .cont_slide .sl4 .ico_box {top: 60px; left: -35px;}
.phone_frame .sec4 .cont_slide .sl4 .ico_box img {width: 30px;}
.phone_frame .sec4 .cont_slide .tit_box {bottom: 45px; right: -70px; }
.phone_frame .sec4 .swiper-pagination-bullet {background-color: #cfd3dd;}
.phone_frame .sec4 .swiper-pagination-bullet-active {background-color: #151726; }

.phone_frame .sec5 .bg_slide .sl1 .bg, .phone_frame .sec5 .bg_slide .sl3 .bg {background-image: url('/resource/home/img/sec5_cont_01.jpg');}
.phone_frame .sec5 .bg_slide .sl2 .bg {background-image: url('/resource/home/img/sec5_cont_03.jpg');}
.phone_frame .sec5 .bg_slide .sl4 .bg {background-image: url('/resource/home/img/sec5_cont_02.jpg');}
.phone_frame .sec5 .cont_slide .ico_box {background-color: #115dfd; box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.7);}
.phone_frame .sec5 .cont_slide .sl1 .obj_box {top: 190px; left: -187px;}
.phone_frame .sec5 .cont_slide .sl2 .obj_box {top: 120px; right: -115px;}
.phone_frame .sec5 .cont_slide .sl3 .obj_box {top: 170px; right: -133px;}
.phone_frame .sec5 .cont_slide .sl4 .obj_box {top: 380px; right: -120px;}
.phone_frame .sec5 .cont_slide .sl1 .ico_box {top: 55px; right: -30px;}
.phone_frame .sec5 .cont_slide .sl1 .ico_box img {width: 33px;}
.phone_frame .sec5 .cont_slide .sl2 .ico_box {top: 40px; left: -35px;}
.phone_frame .sec5 .cont_slide .sl2 .ico_box img {width: 36px;}
.phone_frame .sec5 .cont_slide .sl3 .ico_box {top: 40px; left: -35px;}
.phone_frame .sec5 .cont_slide .sl3 .ico_box img {width: 25px;}
.phone_frame .sec5 .cont_slide .sl4 .ico_box {top: 40px; right: -35px;}
.phone_frame .sec5 .cont_slide .sl4 .ico_box img {width: 33px;}
.phone_frame .sec5 .cont_slide .tit_box {width: 310px; bottom: 190px; left: -178px; }
.phone_frame .sec5 .swiper-pagination-bullet {background-color: #fff;}
.phone_frame .sec5 .swiper-pagination-bullet-active {background-color: #151726; }

.phone_frame.in_sec1 {display: none; opacity: 0;}
.phone_frame.in_sec2 .sec2 {display: block;}
.phone_frame.in_sec3 .sec3 {display: block;}
.phone_frame.in_sec4 .sec4 {display: block;}
.phone_frame.in_sec5 .sec5 {display: block;}
.phone_frame.in_sec6 {display: none;opacity: 0;}
.phone_frame.in_sec7 {display: none; opacity: 0;}

.mo_txt_slide {display: none; position: fixed; bottom: 0; left: 0; width: 100%; height: 140px; background-color: rgba(255,255,255,.95); box-shadow: 0px 0px 27px 0px rgba(0, 0, 0, 0.18);}
.mo_txt_slide .tit_box {text-align: center;}
.mo_txt_slide .tit_box span {display: block; line-height: 1; font-size: 18px; font-weight: 500; overflow: hidden; opacity: 0; transform: translateY(100%);}
.mo_txt_slide .tit_box b {display: block; margin-top: 8px; line-height: 1.2; font-size: 24px; font-weight: 700; color: #0060ff; letter-spacing: -.05rem; overflow: hidden; opacity: 0; transform: translateY(100%);}
.mo_txt_slide .swiper-slide {opacity: 0 !important;}
.mo_txt_slide .swiper-slide-active {opacity: 1 !important;}
.mo_txt_slide .swiper-slide-active span {animation-delay: .3s; animation-duration: .3s; animation-name: showTxt; animation-fill-mode: forwards;}
.mo_txt_slide .swiper-slide-active b {animation-delay: .4s; animation-duration: .3s; animation-name: showTxt; animation-fill-mode: forwards;}
.mo_txt_slide .swiper-slide-duplicate-active span {animation-delay: .3s; animation-duration: .3s; animation-name: showTxt; animation-fill-mode: forwards;}
.mo_txt_slide .swiper-slide-duplicate-active b {animation-delay: .4s; animation-duration: .3s; animation-name: showTxt; animation-fill-mode: forwards;}

.main .swiper-button-next.pc, .main .swiper-button-prev.pc {display: none;}
.main .swiper-button-next.pc, .main .swiper-button-prev.pc {width: 50px; height: 50px; line-height: 50px; text-align: center; border-radius: 50px; background-color: #fff; box-shadow: 0px 2px 11.83px 1.17px rgba(0, 0, 0, 0.1);}
.main .swiper-button-prev.pc:after, .main .swiper-button-next.pc:after {display: inline-block; font-size: 19px;}
.main .swiper-button-prev.pc:after {margin-right: 3px;}
.main .swiper-button-next.pc:after {margin-left: 3px;}
.main .swiper-button-next.pc {right: -240px;}
.main .swiper-button-prev.pc {left: -240px;}

.main .swiper-button-next.mo, .main .swiper-button-prev.mo {height: 50px; line-height: 50px;}
.main .swiper-button-prev.mo:after, .main .swiper-button-next.mo:after {font-size: 30px;}


@keyframes svgAni {
	0% {
		stroke-dashoffset: 500;
	}
	100% {
		stroke-dashoffset: 0;
	}
}

@keyframes opacityAni {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes bgMove{
    0%{transform:skew(0, 0); -webkit-transform:skew(0, 0); -ms-transform:skew(0, 0); -moz-transform:skew(0, 0); -o-transform:skew(0, 0);}
    100%{transform:skew(5deg, 5deg); -webkit-transform:skew(5deg, 5deg); -ms-transform:skew(5deg, 5deg); -moz-transform:skew(5deg, 5deg); -o-transform:skew(5deg, 5deg);}
}

@keyframes showDeco {
	0%{
		opacity: 0;
		transform: scale(0.5); -webkit-transform: scale(0.5); -ms-transform: scale(0.5); -moz-transform: scale(0.5); -o-transform: scale(0.5);
	}
	100% {
		opacity: 1;
		transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1);
	}
}

@keyframes fromBottom {
	0%{
		opacity: 0;
		transform: translateY(30px); -webkit-transform: translateY(30px); -ms-transform: translateY(30px); -moz-transform: translateY(30px); -o-transform: translateY(30px);
	}
	100% {
		opacity: 1;
		transform: translateY(0); -webkit-transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0);
	}
}

@keyframes showTxt {
	0%{
		opacity: 0;
		transform: translateY(100%);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 수출 바우저용 홈페이지 영문 이미지 설정 취합 이미지 */

.en .main .section.sec1 {
	background-image: url('/resource/home/img/en/img/main_bg_1.jpg');
}

.en .main .section.sec3 {
	background-image: url('/resource/home/img/en/img/main_bg_2.jpg');
}

.en .main .section.sec7 .top_wrap {
	background-image: url('/resource/home/img/en/img/main_bg_3.jpg');
}

.en .main .sec3 .bg_box .bg {
	background-image: url('/resource/home/img/en/img/sec3_border.png');
}

.en .main .sec4 .phone_bg {
	background-image: url('/resource/home/img/en/img/object_img.svg');
}

.en .main .sec5 .phone_bg {
	background-image: url('/resource/home/img/en/img/object_img_02.svg');
}

.en .main .sec6 .btn_box a.cloud .bg {
	background-image: url('/resource/home/img/en/img/object_bg_02.svg');
}

.en .main .sec6 .btn_box a.premise .bg {
	background-image: url('/resource/home/img/en/img/object_bg.svg');
}

.en .phone_frame:before {
	background-image: url('/resource/home/img/en/img/phone_shadow.png');
}

.en .phone_frame .frame_img {
	background-image: url('/resource/home/img/en/img/phone_frame2_none.png');
	background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% 100%; box-sizing: border-box;}

.en .phone_frame .frame_img:before {
	background-image: url('/resource/home/img/en/img/phone_frame_top.png');
}

.en .phone_frame .sec3 {
	background-image: url('/resource/home/img/en/img/phone_inner.png');
}

.en .phone_frame .sec3 ul {
	background-image: url('/resource/home/img/en/img/logo_c.svg');
}

.en .phone_frame .type1 .bg_slide .sl1 .bg {
	background-image: url('/resource/home/img/en/img/sec4_cont_01.jpg');
}

.en .phone_frame .sec4 .bg_slide .sl1 .bg,
.phone_frame .sec4 .bg_slide .sl2 .bg {
	background-image: url('/resource/home/img/en/img/sec4_cont_01.jpg');
}

.en .phone_frame .sec4 .bg_slide .sl3 .bg {
	background-image: url('/resource/home/img/en/img/sec4_cont_02.jpg');
}

.en .phone_frame .sec4 .bg_slide .sl4 .bg {
	background-image: url('/resource/home/img/en/img/sec4_cont_03.jpg');
}

.en .phone_frame .sec5 .bg_slide .sl1 .bg,
.phone_frame .sec5 .bg_slide .sl3 .bg {
	background-image: url('/resource/home/img/en/img/sec5_cont_01.jpg');
}

.en .phone_frame .sec5 .bg_slide .sl2 .bg {
	background-image: url('/resource/home/img/en/img/sec5_cont_03.jpg');
}

.en .phone_frame .sec5 .bg_slide .sl4 .bg {
	background-image: url('/resource/home/img/en/img/sec5_cont_02.jpg');
}

.main_wrapper.promtionActive .floatingBanner {
	z-index : 99;
	width: 11.33rem;
	font-size: 1.1rem;
	box-sizing: border-box;
	top: calc(51% + 27px);
}

.main_wrapper.promtionActive .floatingBanner .floatingItem{
	padding: .99rem 0;
	gap: .66rem;
}

.main_wrapper.promtionActive .floatingBanner .floatingImg1 {
	width: 74.8px;
  height: 42.9px;
}

.main_wrapper.promtionActive .floatingBanner .floatingItem .floatingText{
	line-height: 1.54;
}