body {font-family: 'Pretendard', sans-serif; letter-spacing: -0.05em; background: url(/assets/img/bg-body.png) no-repeat 100% 100% #0D0D0D;}
/**** 비주얼 ****/
.visual {display: flex; flex-direction: column; width: 100%; height: calc(var(--vh, 1vh) * 100); min-height: 100vh; position: relative; overflow: hidden;}
.visual .bg {position: absolute; left: 0; bottom: 0; width: 100%; height: 300px; bottom: 0; z-index: 200; background: linear-gradient(to bottom, rgb(13 13 13 / 0%) 15%, rgb(13 13 13 / 88%) 70%, rgb(13 13 13 / 100%) 90%);}
.visual .bg-black {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; background: rgba(0,0,0,.2);}
.visual .video {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1;}
.visual .video video {width: 100%; height: 100%; object-fit: cover; display: block;}
.visual .phone {position: absolute; right: 0; bottom: 0;}
.visual .phone .inner {position: relative; width: 100%; height: 100%;}
.visual .phone .box {position: absolute; left: 50%; transform: translateX(-50%); margin-left: -3px; top: 165px; width: 360px; height: 100px; border-radius: 15px; background: rgba(255,255,255,.2); backdrop-filter: blur(30px); display: flex; align-items: center; gap: 0 20px; justify-content: center;}
.visual .phone .box .bell {display: inline-block; animation: ring 6s 0.2s ease-in-out infinite;}
.visual .phone .box p {font-size: 1.25rem; color: #fff; text-align: left;}
.visual .phone .box p b {display: block; margin-bottom: 6px; font-size: 1.375rem; color: #FFB800; font-weight: 700;}
.visual .slogan {display: flex; flex-direction: column; padding: 15rem 10rem 0; position: relative; z-index: 50;}
.visual .slogan > span {display: inline-flex; padding: 0.8rem 0; background-color: var(--bg-primary); font-size: 1.3rem; color: #fff; width: 280px; text-align: center; justify-content: center; border-radius: 50px; letter-spacing: -0.5px; font-weight: 500;}
.visual .slogan b {display: inline-block; padding: 1.2rem 2.5rem; background-color: var(--bg-primary); font-size: 2rem; color: #fff;}
.visual .slogan p {margin: 40px 0 10px; font-size: 4.2rem; color: #fff; line-height: 1.3; letter-spacing: -0.13rem; font-weight: 600;}
.visual .slogan br.mb {display: none;}
/*.visual .slogan ul {display: flex; gap: 0 10px;}
.visual .slogan ul li span {color: var(--color-primary); font-size: 1.5rem; font-weight: 300;}*/
.visual .slogan .explain p {font-size: 2rem; font-weight: 300; margin: 5px 0;}
.visual .slogan .explain span {color: var(--color-primary);}
.visual .marquee {position: relative; width: 100%; display: block; transform-origin: 50% 100%; transition: transform 0.25s; margin: 90px 0 0 0; font-size: 13.75rem; color: rgba(255,255,255,.07); z-index: -1;}
.visual .marquee .inner {position: absolute; left: 0; top: 0; display: flex; align-items: flex-end; white-space: nowrap; padding-right: 5vw;}
@keyframes ring {0%,100%,43%,93% {transform: rotate(0)} 1%,51%,59%,9% {transform: rotate(30deg)} 11%,3%,53%,61% {transform: rotate(-28deg)} 5%,55% {transform: rotate(34deg)} 57%,7% {transform: rotate(-32deg)} 13%, 63% {transform: rotate(26deg)} 15%, 65% {transform: rotate(-24deg)} 17%, 67% {transform: rotate(22deg)} 19%, 69% {transform: rotate(-20deg)} 21%, 71% {transform: rotate(18deg)} 23%, 73% {transform: rotate(-16deg)} 25%, 75% {transform: rotate(14deg)} 27%, 77% {transform: rotate(-12deg)} 29%, 79% {transform: rotate(10deg)} 31%, 81% {transform: rotate(-8deg)} 33%, 83% {transform: rotate(6deg)} 35%, 85%{transform: rotate(-4deg)} 37%, 87% {transform: rotate(2deg)} 39%, 89% {transform: rotate(-1deg)} 41%, 91% {transform: rotate(1deg)}}
@media (max-width: 1800px) {
	.visual .phone {right: -7rem;}
	.visual .phone .inner > img {height: 700px; width: auto;}
}
@media (max-width: 1600px) {
	.visual .slogan {padding: 16.875rem 6rem 0;}
	.visual .slogan p {font-size: 3.6rem;}
	.visual .slogan .explain p {font-size: 1.8rem;}
}
@media (max-width: 1400px) {
	.visual .phone .inner > img {height: 600px;}
	.visual .slogan {padding: 10rem 4rem 0;}
	.visual .slogan .explain p {font-size: 1.6rem;}
}
@media (max-width: 1200px) {
	.visual {min-height: auto; height: 700px;}
	.visual .phone {right: -15vw;}
	.visual .phone .inner > img {height: 500px;}
	.visual .phone .box {top: 95px; transform: scale(.7) translateX(-70%);}
	.visual .slogan {padding: 10rem 3rem 0;}
	.visual .marquee {margin: 60px 0 0; font-size: 12rem;}
}
@media (max-width: 991px) {
	.visual {height: 100svh; min-height: 800px;}
	.visual .phone .box p, .visual .phone .box p b {font-size: 1.7rem;}
	.visual .slogan {padding: 7rem 3rem 550px 3rem;}
	.visual .slogan > span {font-size: 1.2rem; width: 240px;}
	.visual .slogan p {font-size: 3.2rem; margin: 25px 0 10px;}
	.visual .slogan .explain p {font-size: 1.4rem; margin: 3px 0;}
	.visual .marquee {position: absolute; bottom: 22rem; margin: 0;}
}
@media (max-width: 640px) {
	.visual {min-height: 700px;}
	.visual .phone {position: absolute; left: 50%; right: auto; transform: translateX(-50%) !important;}
	.visual .phone .inner > img {height: 450px;}
	.visual .slogan {padding: 8rem 3rem 450px 3rem;}
}
@media (max-width: 480px) {
	.visual {min-height: 650px;}
	.visual .phone .inner > img {height: 400px;}
	.visual .phone .box {top: 60px; transform: scale(.55) translateX(-90%);}
	.visual .slogan {padding: 7rem 1.6666rem 400px 1.6666rem;}
	.visual .slogan br.mb {display: block;} 
	.visual .slogan > span {width: 200px;}
	.visual .slogan p {font-size: 2.2rem;}
	.visual .slogan .explain p {font-size: 1.3rem;}
}
@media (max-width: 360px) {
	.visual .slogan ul li span {font-size: 1.4rem;}
}
/**** 소개 ****/
.about {position: relative; width: 100%; height: 100vh; min-height: 800px; background: url(/assets/img/bg_about.jpg) no-repeat 100% 100% #0D0D0D; background-size: cover; padding: 14rem 10rem 0;}
.about p {font-size: 3rem; font-weight: 300; color: #fff;}
.about p br {display: none;}
.about .typing {font-size: 6.25rem; color: #fff; font-weight: 700; margin: 4.2rem 0 2.5rem; display: flex; align-items: center; gap: 0 1rem;}
.about .typing b {display: inline-block; padding: 0 3rem; width: 25.5rem; color: rgba(255,255,255,.5);}
.about .typing b span {font-weight: 700;}
.about .cursor {display: inline-block; animation: blink 0.7s infinite; color: #fff; font-weight: 900; margin-left: 1.2rem;}
.about .typing span.img {display :inline-block; margin: -70px 0 0 20px; vertical-align: top;}
.about .explain {display: block; font-size: 2.125rem; color: #9d9d9d; font-weight: 300; line-height: 1.4;}
.about .explain br {display: none;}
@keyframes blink {0%, 100% {opacity: 1;} 50% {opacity: 0;}}
@media (max-width: 1600px) {
	.about {padding: 10rem 6rem 00;}
	.about p {font-size: 2.4rem;}
	.about .typing {font-size: 5rem;}
	.about .typing b {width: 22rem;}
	.about .typing span.img {margin: -60px 0 0 40px;}
	.about .explain {font-size: 1.8rem;}
}
@media (max-width: 1400px) {
	.about {padding: 10rem 4rem 0; background-size: contain;}
}
@media (max-width: 1200px) {
	.about p {font-size: 2.2rem;}
	.about .typing {font-size: 4rem;}
	.about .typing b {width: 19rem;}
	.about .explain {font-size: 1.6rem;}
}
@media (max-width: 991px) {
	.about {min-height: 700px; padding: 8rem 4rem 0; background-size: cover; background-position: 90% 100%;}
	.about p {font-size: 2rem;}
	.about .typing b {width: 17rem; padding: 0 2rem;}
	.about .typing span.img {display: none;}
	.about .explain br {display: block;}
}
@media (max-width: 640px) {
	.about {padding: 6rem 3rem 0; background-size: 220%; background-position: 90% 100%;}
	.about p {font-size: 1.6rem;}
	.about .typing {flex-direction: column; align-items: flex-start; margin: 3rem 0 2.5rem;}
	.about .typing > div {margin-bottom: 10px;}
	.about .typing b {color: rgba(255,98,0,.7);}
	.about .cursor {color: rgba(255,255,255,.4);}
	.about .explain {font-size: 1.4rem;}
}
@media (max-width: 480px) {
	.about {height: 600px; min-height: auto;padding: 4rem 1.6666rem 0;}
	.about p {font-size: 1.8rem;}
	.about p br {display: block;}
	.about .typing {font-size: 3.6rem;}
	.about .typing b {width: 16rem;}
	.about .explain {font-size: 1.3rem;}
}
@media (max-width: 360px) {
	.about p {font-size: 1.6rem;}
}

/**** 핵심기능 ****/
.func {position: relative; padding: 15rem 3rem;}
.func .title {margin-bottom: 6.25rem; text-align: center; font-size: 5rem; color: #fff; font-weight: 600; letter-spacing: -0.05em; display: flex; justify-content: center;}
.func .title b {font-weight: 600; color: #F9DB39;}
.func .blink {position: relative; display: inline-block; width: 70px; height: 70px; margin: -10px 10px 0 30px;}
.func .blink1 {position: absolute; left: 0; top: 0; animation: twinkle 1.5s infinite ease-in-out;}
.func .blink2 {position: absolute; left: 5px; bottom: 0; animation: twinkle 1.5s infinite ease-in-out; animation-delay: 0.6s;}
.func .blink3 {position: absolute; right: 0; bottom: 0; animation: twinkle 1.5s infinite ease-in-out; animation-delay: 0.3s;}
@keyframes twinkle {0%, 100% {opacity: 1;} 50% {opacity: 0.3;}}
.func .content--sticky {width: 100vw; position: sticky; top: 0; --offset: 0px; top: var(--offset); height: calc(100vh - var(--offset));}
.func .content--card {display: flex; justify-content: center; text-align: center; height:80vh; min-height: 750px; width: 100%; aspect-ratio: 0.8; top: 10vh; margin: auto auto 5vh; border-radius: 30px; overflow: hidden;} 
.func .func1{background: #1B212A;}
.func .func2{background: #3A414C;}
.func .func3{background: url(/assets/img/bg_func3.jpg) no-repeat 50%; background-size: cover;}
.func .func4{background: #5B6570;}
.func .func5{background: url(/assets/img/func5-bg.png) no-repeat 50% 70% #c6dcff; background-size: contain;}
@media screen and (min-width:63em){body{--page-padding:2rem 3rem}}
.func .inner {padding: 3rem 12.5rem 0; display: flex; justify-content: center; align-items: flex-end; gap: 0 10rem; width: 100%;}
.func .inner .img {display: flex; align-items: flex-end;}
.func .inner .txt-wrap {display: flex; flex-direction: column; align-items: flex-start; justify-content: center; height: 100%;}
.func .txt-wrap .box-tit {text-align: left; font-size: 4rem; font-weight: 600; color: #fff;}
.func .txt-wrap ul {width: 100%; margin: 3.75rem 0; display: flex; flex-direction: column; gap: 15px; align-items: flex-start;}
.func .txt-wrap ul li {display: flex; align-items: center; gap: 0.8rem; padding: 10px 20px 10px 10px; background: rgba(255,255,255,.2); backdrop-filter: blur(10px); border-radius: 60px;}
.func .txt-wrap ul li span.num {width: 30px; height: 30px; border-radius: 50%; background: #000; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; color: #fff;}
.func .txt-wrap ul li p {font-size: 1.4rem; color: #fff;  width: calc(100% - 30px)}
.func .txt-wrap p {text-align: left; font-size: 1.875rem; color: #ccc; line-height: 1.4;}	
.func .func2 .txt-wrap {gap: 5.625rem 0;}
.func .func2 .txt-wrap .box-tit, .func .func3 .txt-wrap .box-tit {font-size: 3.2rem;} 	
.func .func2 ul {flex-direction: row; gap: 0 1.875rem; margin: 0; width: 100%;}
.func .func2 ul li {width: 100%; background: none; padding: 0;}
.func .func2 .sBox {display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2.5rem; width: 100%; height: 350px; border: 1px solid rgba(255,255,255,.6); border-radius: 1.25rem; background: #DBDBDB;}
.func .func2 .sBox p {margin: 2.125rem 0 0.8125rem; text-align: center; font-size: 1.375rem; color: #1c2635; font-weight: 500;}
.func .func2 .sBox .explain {display: flex; font-size: 1.125rem; color: #5A6370; text-align: left; font-weight: 500;}
.func .func2 .sBox .explain b {width: 2rem; font-weight: 500;}
.func .func2 ul li:nth-of-type(1) .sBox {background: #B2D3FF;}
.func .func3 .inner .img {height: 100%; align-items: center;}
.func .func3 .txt-wrap p {margin: 5.8125rem 0 1.875rem; color: #fff;}
.func .func3 .txt-wrap .point {display: block; font-weight: 500; font-size: 1.5rem; color: #3AB4D7;}
.func .func4 .inner {position: relative; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;}
.func .func4 .box-tit {font-size: 4rem; color: #fff; text-align: center; font-weight: 600;}
.func .func4 .box-txt {margin: 2.8rem 0 3.75rem;} 
.func .func4 .box-txt b {display: block; margin-bottom: 10px; font-size: 2.25rem; color: #8AB7FE; font-weight: 600;}
.func .func4 .box-txt p {font-size: 1.875rem; color: #ccc; font-weight: 300;}
.func .func4 .img {position: relative; width: 100%; text-align: center; justify-content: center;}
.func .func4 .num1 {position: absolute; left: 0; bottom: 7.5rem; color: #5B6570; font-size: 2.25rem; padding: 1rem 2rem; border-radius: 3rem; background: #E0E6EC;}
.func .func4 .num1:before {position: absolute; right: 40px; bottom: -33px; width: 72px; height: 33px; background: url(/assets/img/chat_bg.png) no-repeat 50% 0; display: block; content: '';}
.func .func4 .num2 {position: absolute; right: 0; top: 3.125rem; color: #fff; font-size: 2.25rem; padding: 1rem 2rem; border-radius: 3rem; background: #5E7CF2;}
.func .func4 .num2:before {position: absolute; left: 40px; bottom: -33px; width: 72px; height: 33px; background: url(/assets/img/chat_bg2.png) no-repeat 50% 0; display: block; content: '';}
.func .func4 .left-blink {position: absolute; left: 27%; top: 0; width: 75px; height: 90px;}
.func .func4 .left-blink .in {position: relative; width: 100%; height: 100%;}
.func .func4 .left-blink .blink1 {right: 0; left: auto;}
.func .func4 .left-blink .blink2 {left: 0;}
.func .func4 .blink3 {left: 50%; right: auto; margin-left: 20%; bottom: 6.25rem;}
.func .func5 {display: block;}
.func .func5 .inner {padding: 0; width: auto;}
.func .func5 .box-tit {margin: 5rem 0 1.25rem; text-align: center; font-size: 3.2rem; color: #182E47; font-weight: 600;}
.func .func5 p {font-size: 1.6rem; color: #577083;}
.func .marquee {position: absolute; bottom: 460px; width: 100%; display: block; transform-origin: 50% 100%; transition: transform 0.25s; margin: 90px 0 0 0; font-size: 13.75rem; color: rgba(255,255,255,.07); z-index: -1;}
.func .marquee .inner {position: absolute; left: 0; top: 0; display: flex; align-items: flex-end; white-space: nowrap; padding-right: 100px; justify-content: flex-start;}
.func .func5 p.ex {position: absolute; left: 50%; bottom: 5rem; transform: translateX(-50%); font-size: 30px; font-weight: 600; color: #606ddd;}
.func .func5 .bt {position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; height: 170px; background: url(/assets/img/func5-bt.png) no-repeat 50% 100%; z-index: -1;}
@media (max-width: 1800px) {
	.func .inner {padding: 5rem 10rem 0; gap: 0 7rem;}
	.func .txt-wrap .box-tit, .func .func4 .box-tit {font-size: 3.6rem;}
	.func .txt-wrap ul li p {font-size: 1.3rem;}
	.func .txt-wrap p {font-size: 1.6rem;}
	.func .func1 .img {height: 100%;}
	.func .inner .img img {height: 100%; width: auto;}
	.func .func3 .inner {padding: 3rem 5rem;}
}
@media (max-width: 1600px) {
	.func .inner {padding: 5rem 5rem 0; gap: 0 4rem;} 
	.func .func2 .txt-wrap .box-tit, .func .func3 .txt-wrap .box-tit, .func .func4 .box-tit, .func .func5 .box-tit {font-size: 2.8rem;}
	.func .txt-wrap ul li span.num {font-size: 1.3rem;}
	.func .func2 .inner .img img {max-width: 400px;}
	.func .func4 .box-txt {margin: 1.5rem 0 3rem;}
	.func .func4 .box-txt b {font-size: 2rem; margin-bottom: 5px;}
	.func .func4 .box-txt p {font-size: 1.6rem;}
	/*.func .inner .img img {max-height: 360px;}*/
	.func .func4 .num1, .func .func4 .num2 {font-size: 2rem;}
	.func .func4 .left-blink {left: 20%;}
}
@media (max-width: 1400px) {
	.func {padding: 10rem 3rem 0;}
	.func .title {font-size: 4.2rem; margin-bottom: 5rem;}
	.func .blink {width: 60px; height: 60px;}
	.func .blink1, .func .blink2 {height: 50%;}
	.func .blink3 {height: 80%; bottom: 15px;}
	.func .content--card {min-height: 640px;}
	.func .inner .img img {max-height: 500px;}
	.func .txt-wrap ul li {border-radius: 10px; width: 100%;}
	.func .func4 .blink3 {height: auto;}
	.func .func4 .blink3 img {max-height: fit-content;}
	.func .func5 .box-tit {margin: 3rem 0 0.6rem;}
	.func .func5 .bt {height: 120px;}
	.func .func5 p.ex {bottom: 4rem; font-size: 24px;}
	.func .marquee {bottom: 360px;}
	.func .func5 .marquee img {height: 240px; width: auto;}
}
@media (max-width: 1200px) {
	.func {padding: 6rem 2rem 0;}
	.func .title {font-size: 3.8rem; margin-bottom: 4rem;}
	.func .content--card {height: 60vh; min-height: 500px; margin: auto auto 3vh;}
	.func .inner {width: 100%; padding: 3rem 3rem 0;}
	.func .inner .img {height: auto;}
	.func .inner .img img {max-height: 400px;}
	.func .func2 .inner .img {width: 40%;}
	.func .func2 .inner .img img {width: 100%;}
	.func .func2 .txt-wrap {gap: 1rem 0;}
	.func .box-tit {font-size: 2.4rem !important;}
	.func .txt-wrap ul {margin: 1.5rem 0; gap: 10px;}
	.func .txt-wrap ul li p {font-size: 1.2rem;}
	.func .txt-wrap ul li span.num {width: 24px; height: 24px; font-size: 1rem;}
	.func .txt-wrap p {font-size: 1.4rem;}
	.func .func2 .sBox {padding: 1.6rem; height: 240px;}
	.func .func2 .sBox i img {height: 60px; width: auto;}
	.func .func2 ul {gap: 0 1rem;}
	.func .func2 .sBox p {font-size: 1.2rem;}
	.func .func2 .sBox .explain {font-size: 1rem;}
	.func .func3 .inner {padding: 1.5rem 3rem;}
	.func .func3 .inner .img  {width: auto;}
	.func .func3 .inner .img img {height: 100%; width: auto;}
	.func .func4 .img img {max-height: 250px;}
	.func .func4 .num1, .func .func4 .num2 {font-size: 1.6rem;}
	.func .func4 .num1:before, .func .func4 .num2:before {background-size: 40px;}
	.func .func4 .left-blink {left: 28%;}
	.func .func4 .blink3 {margin-left: 15%;}
	.func .func5 {background-position: 50% calc(100% - 80px);}
	.func .func5 p.ex {width: 100%; bottom: 2.5rem; font-size: 20px;}
	.func .func5 .bt {height: 80px; background-position: 50% 90%;}
	.func .func5 .marquee {bottom: 270px;}
	.func .func5 .marquee img {height: 200px;}
}
@media (max-width: 991px) {
	.func {padding: 6rem 0 0;}
	.func .title {font-size: 3.4rem; margin-bottom: 3rem;}
	.func .content--card {height: 55vh; border-radius: 0; margin: auto auto 1vh;}
	.func .inner {padding: 0 3rem; gap: 0 3rem;}
	.func .inner .img {width: 40%;}
	.func .inner .img img {height: auto; width: 100%;}
	.func .inner .txt-wrap {width: 60%;}
	.func .func1 .inner {flex-direction: row-reverse;}
	.func .func2 .sBox {padding: 1rem;}
	.func .func2 .sBox i img {height: 40px;}
	.func .func2 .sBox p {width: 100%; word-break: keep-all;}
	.func .func3 .inner .img {width: 50%; height: 100%;}
	.func .func3 .inner .img img {height: auto; width: 100%;}
	.func .func4 .img {width: 100%;}
	.func .func4 .img img {width: auto;}
	.func .func4 .num1, .func .func4 .num2 {font-size: 1.4rem;}
	.func .func4 .left-blink {left: 20%;}
	.func .func4 .blink3 {margin-left: 20%;}
	.func .func5 .box-tit {margin: 4rem 0 0.6rem;}
}
@media (max-width: 767px) {
	.func .func2 .inner .img {display: none;}
	.func .func2 .txt-wrap {width: 100%; max-width: 600px;}sd
  .func .func2 .txt-wrap .box-tit {width: 100%; text-align: center;}
	.func .content--card.func4 {min-height: 450px;}
	.func .func3 .inner {flex-direction: column-reverse; gap: 2rem;}
	.func .func3 .txt-wrap {width: 100%; height: auto; align-items: center;}
	.func .func3 .txt-wrap p {margin: 1.5rem 0 0.3rem;}
	.func .func3 .txt-wrap p br {display: none;}
	.func .func3 .inner .img {width: 100%; height: auto; justify-content: center;}
	.func .func3 .inner .img img {width: auto; max-height: 300px;}
	.func .func4 .box-txt p {font-size: 1.4rem;}
	.func .func4 .box-txt {margin: 1.5rem 0 3rem;}
	.func .func4 .left-blink {width: 50px;}
	.func .func4 .blink1 img {height: 30px; width: auto;}
	.func .func4 .blink2 img {height: 36px; width: auto;}
	.func .func4 .blink3 {margin-left: 25%;}
	.func .func4 .blink3 img {height: 44px; width: auto;}
	.func .func4 .num1, .func .func4 .num2 {padding: 1rem 1.4rem;}
	.func .func5 {background-size: 150%;}
}
@media (max-width: 640px) {
	.func .title {font-size: 2.6rem; margin-bottom: 2.6rem;}
	.func .blink {display: none;}
	.func .title b {margin-left: 15px;}
	.func .func1 .inner {flex-direction: column-reverse; justify-content: flex-start; gap: 2rem 0; padding: 2rem 2rem 0;}
	.func .content--card {height: 60vh; }
	.func .inner .txt-wrap {width: 100%; height: auto;}
	.func .box-tit {font-size: 2rem !important;}
	.func .txt-wrap ul {gap: 3px; margin: 1.2rem 0;}
	.func .func1 .txt-wrap ul li {padding: 0; background: none; padding-left: 10px; position: relative;}
	.func .func1 .txt-wrap ul li:before {position: absolute; left: 0; top: 9px; display: block; content: ''; width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.4);}
	.func .content--card.func2 {min-height: }
	.func .func2 .inner {align-items: center;}
	.func .func2 .txt-wrap ul {gap: 10px;}
	.func .txt-wrap ul li span.num {display: none;}
	.func .txt-wrap p {font-size: 1.2rem;}
	.func .inner .img img {max-height: 240px; width: auto;}
	.func .func4 .box-txt b {font-size: 1.6rem;}
	.func .func4 .left-blink, .func .func4 .blink3 {display: none;}
	.func .func4 .num1, .func .func4 .num2 {font-size: 1rem;}
	.func .func4 .num1 {left: -20px;}
	.func .func4 .num2 {right: -20px;}
	.func .func4 .box-txt {margin: 1.5rem 0 3rem;}
	.func .func5 p, .func .func5 p.ex {font-size: 1.4rem; word-break: keep-all;}
}
@media (max-width: 480px) {
	.func .title {font-size: 2.4rem;}
	.func .title b {margin-left: 7px;}
	.func .content--card {height: 55vh;}
	.func .func1 .inner {padding: 3rem 2rem 0;}
	.func .func2 .inner, .func .func3 .inner {padding: 3rem 2rem;}
	.func .func4 .inner {padding: 3rem 2rem 0;}
	.func .box-tit {width: 100%; text-align: center;}
	.func .txt-wrap ul li p {width: 100%;}
	.func .inner .img {width: 100%; justify-content: center;}
	.func .func4 .num1 {bottom: 9rem;}
	.func .func4 .num2 {top: 1rem;}
	.func .func5 {background-size: 300%;}
	.func .func5 .wrap, .func .func5 p.ex {padding: 0 2rem;}
}
@media (max-width: 360px) {
	.func .func1 .inner {padding: 2rem 1.5rem 0;}
	.func .func2 .inner, .func .func3 .inner  {padding: 2rem 1.5rem;}
	.func .func4 .inner {padding: 2rem 1.5rem 0;}
	.func .box-tit {font-size: 1.6rem !important;}
	.func .txt-wrap ul li p {font-size: 1.1rem;}
	.func .func2 .sBox {height: auto;}
	.func .func2 .txt-wrap ul {flex-direction: column;}
	.func .func2 .sBox p {margin: 1rem 0 0.7rem;}
	.func .func2 .sBox .explain b {width: 2.5rem;}
	.func .func2 .sBox .explain br {display: none;}
	.func .func3 .txt-wrap p {text-align: center;}
	.func .func3 .txt-wrap .point {font-size: 1.2rem;}
	.func .func4 .box-txt b {font-size: 1.4rem;}
	.func .func4 .box-txt p {font-size: 1.2rem;}
	.func .func5 .wrap, .func .func5 p.ex {padding: 0 1.5rem;}
}

/**** 요금안내 ****/
.fee .title {text-align: center; font-size: 3rem; color: #fff; font-weight: 600;}
.fee .sTit {text-align: center; margin-top: 1.2rem; font-size: 1.5rem; color: rgba(255,255,255,.6); font-weight: 300;}
.fee .inner {max-width: 1460px; margin: 9.375rem auto 0; display: flex; align-items: flex-end; gap: 0 1.875rem;}
.fee .box {position: relative; text-align: center; padding: 6.25rem 1.5rem 0; width: calc(33.3333% - 1.25rem); height: 480px; transition: all .5s; cursor: pointer;}
.fee .box-gra {position: relative; border-radius: 2.5rem; background: #212121; color: #fff; z-index: 1;}
.fee .box-gra::before {content: ""; position: absolute; inset: 0; padding: 2px; border-radius: inherit; background: linear-gradient(315deg, #F96D35 0%, #371407 15%, #0D0D0D 50%, #371407 85%,
#972B00 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: -1;}
.fee .best {border-radius: 0 0 2.5rem 2.5rem; border: 2px solid var(--color-primary); background: #212121; padding: 0 !important;}
.fee .best .discTag {float: right; position: relative; top: -0.5rem; left: -0.625rem; width: 6.875rem; z-index: 10;}
.fee .best .tit .retail {font-style: normal; font-size: 1.5rem; font-weight: 400; text-decoration: line-through; color: #ccc; position: relative; top: 8px;}
.fee .best .tit .discount {display: flex; align-items: center; justify-content: center; flex-direction: column;}
.fee .best .tit .discount strong {margin: 0rem 0 0.625rem; color: #FF6C3E; text-shadow: 0px -2px 0px rgb(255 237 196);}
.fee .best .tit .discount span {color: #FF6C3E;}
.fee .best .tit .discount .duration {color: #FEE9DD; font-size: 1.125rem; text-align: center; font-weight: 400; margin-bottom: 2.5rem;}
.fee .best .box-con {padding: 6.25rem 1.5rem 0;}
.fee .best .name {width: calc(100% + 4px); height: 4.375rem; background-color: var(--bg-primary); margin: -4.375rem 0 0 -2px; color: #fff; text-align: center; font-size: 2.5rem; border: 2px solid var(--color-primary); border-radius:
2.5rem 2.5rem 0 0; display: flex; align-items: center; justify-content: center; letter-spacing: 0.7rem;}
.fee .best .tit {position: relative;}
.fee .best .tit:before {position: absolute; left: 50%; transform: translateX(-50%); top: -35px; display: block; content: '추천상품';  font-size: 1.5rem; color: var(--color-primary); font-weight: 500;}
.fee .box.active {background: linear-gradient(to bottom, #070707 48%, var(--color-primary) 100%) !important; transition: all .5s;}
.fee .box-gra .tit:before {position: absolute; left: 50%; transform: translateX(-50%); top: -35px; display: block; content: '특별상품';  font-size: 1.5rem; color: var(--color-primary); font-weight: 500;}
.fee .box-gra:first-child .tit:before {display: none;}
.fee .tit {position: relative;}
.fee .tit p {font-size: 2.5rem; color: #fff; font-weight: 600;}
.fee .tit strong {display: flex; align-items: center; justify-content: center; margin: 2rem 0 4.25rem; font-size: 4.5rem; color: #fff; font-weight: 600;}
.fee .tit strong span {font-size: 2.625rem; color: #fff; font-weight: 600;}
.fee .tit small {font-size: 1.5rem; color: #ccc; font-weight: 300;}
.fee .tit small span {color: #FF802D;}
.fee .point {color: #FEE9DD; font-size: 1.125rem; font-weight: 500; margin: 0.5rem 0 1.8rem;}
.fee a.btn {display: flex; align-items: center; justify-content: space-between; padding: 0 1.2rem; width: 200px; height: 40px; margin: 0 auto; border-radius: 40px; background: rgba(255,255,255,.08); backdrop-filter: blur(15px); font-size: 1.125rem; font-weight: 500; color: #fff;}
.fee .btnWrap {text-align: center; margin: 3.125rem 0 10rem; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1.5rem 0;}
.fee .check {display: flex; align-items: center; justify-content: center;}
.fee label {position: relative; cursor: pointer; border-radius: 5px;}
.fee label .btn {position: absolute; top: 0; left: 0; display: block; width: 1.5rem; height: 1.5rem; background: #1b1b1b; box-shadow: 0 3px 4px rgba(0,0,0,1), inset 0 -2px 5px rgba(0,0,0,1), inset 0 2px 2px rgba(255,255,255,0.5), 0 0 0 2px #000, 0 0 0 5px #0c0c0c, 0 0 0 5.5px #080808;}
.fee label input[type="checkbox"]:checked ~ .btn {box-shadow: 0 0 0 rgba(0,0,0,1), inset 0 -2px 5px rgba(0,0,0,1), inset 0 1px 1px rgba(255,255,255,0.1), 0 0 0 2px #000, 0 0 0 5px #0c0c0c;}
.fee label input[type="checkbox"] {-webkit-appearance: none;}
.fee label .fa {position: absolute; top: 50%; left: 12px; transform: translate(-50%, -50%); font-size: 1.2em; color: #0c0c0c;}
.fee label .fa:before {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.fee label input[type="checkbox"]:checked ~ .fa {color: var(--color-primary); text-shadow: 0 0 15px #FF6200, 0 0 30px #FF6200;}
.fee .check span.txt {font-size: 1.25rem; color: #fff; font-weight: 300; padding: 0 15px 0 30px;}
.fee .check a {padding: 10px; cursor: pointer; display: block;}
.fee .btnWrap button {padding: 1.2rem 5rem; background: none; color: #fff; border: 2px solid #fff; cursor: pointer;}
.fee .wave-effect div {display: flex; overflow: hidden; text-shadow: 0 30px 0 #fff; align-items: center; justify-content: center;}
.fee .wave-effect span {display: block; -webkit-backface-visibility : hidden; backface-visibility: hidden; transition: transform .44s ease; letter-spacing: 1.5px; font-size: 1.5rem;}
.fee .wave-effect span:nth-child(1) {transition-delay: 0.05s;}
.fee .wave-effect span:nth-child(2) {transition-delay: 0.1s;}
.fee .wave-effect span:nth-child(3) {transition-delay: 0.15s;}
.fee .wave-effect span:nth-child(4) {transition-delay: 0.2s;}
.fee .wave-effect:hover span {transform: translateY(calc(30px * -1)) translateZ(0);}
@media (max-width: 1600px) {
	.fee {padding: 0 3rem;}
}
@media (max-width: 1400px) {
	.fee .tit small {font-size: 1.3rem;}
}
@media (max-width: 1200px) {
	.fee {padding: 0 2rem;}
	.fee .title {font-size: 2.4rem;}
	.fee .sTit {font-size: 1.3rem;}
	.fee .inner {gap: 0 1rem; margin: 7rem auto 0;}
	.fee .box {width: calc(33.3333% - 0.6666rem); height: 330px; padding: 5rem 1.5rem 0;}
	.fee .best .discTag {top: -0.4rem; width: 5.650rem;}
	.fee .best .tit .discount .duration {font-size: 0.875rem; margin-bottom: 1.5rem;}
	.fee .best .tit .retail {font-size: 1.2rem; top: 3px;}
	.fee .best .box-con {padding: 5rem 1.5rem 0;}
	.fee .best .name {height: 3.2rem; font-size: 2rem; margin: -3.2rem 0 0 -2px;}
	.fee .box .tit:before {font-size: 1.2rem; top: -28px;}
	.fee .tit p {font-size: 2rem;}
	.fee .tit strong {font-size: 3.6rem; margin: 1.5rem 0 3rem;}
	.fee .tit small {font-size: 1.2rem;}
	.fee .btnWrap button {padding: 1rem 3.5rem;}
	.fee label .fa {left: 11px;}
	.fee .wave-effect span {font-size: 1.3rem;}
}
@media (max-width: 991px) {
	.fee .inner {gap: 0 0.5rem;}
	.fee .box {width: calc(33.3333% - 0.3333rem); height: 280px;}
	.fee .best .discTag {top: -0.3rem; left: -0.4rem; width: 4.5rem;}
	.fee .best .tit .discount strong {margin: 0.2rem 0 0.625rem;}
	.fee .box .tit:before {top: -24px;}
	.fee .tit p {font-size: 1.7rem;}
	.fee .tit strong {font-size: 2.5rem; margin: 1.2rem 0 2rem;}
	.fee .best .box-con, .fee .box {padding: 4rem 1rem 0;}
	.fee .tit small {font-size: 1.1rem;}
}
@media (max-width: 767px) {
	.fee .inner {flex-wrap: wrap; gap: 1rem 0; margin: 3rem auto 0;}
	.fee .title {font-size: 2rem;}
	.fee .sTit {font-size: 1.2rem;}
	.fee .box {width: 100%; height: auto;}
	.fee .best {margin-top: 3.2rem;}
	.fee .box {padding: 2rem 1.5rem;}
	.fee .best .discTag {left: -1.4rem; transform: scale(1.6); transform-origin: top right;}
	.fee .best .box-con {padding: 4rem 1.5rem 2rem 1.5rem;}
	.fee .box:last-child {padding: 3.6rem 0 2rem;}
	.fee .best {margin-top: 0; border: 0; padding: 2rem 1.5rem; border-radius: 0; background: none;}
	.fee .best .box-con {position: relative; background: #212121; border-radius: 2.5rem; z-index: 1;}
	.fee .best .box-con:before {content: ""; position: absolute; inset: 0; padding: 2px; border-radius: inherit; background: linear-gradient(315deg, #F96D35 0%, #371407 15%, #0D0D0D 50%, #371407 85%,
#972B00 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: -1;}
	.fee .best .name {position: absolute; left: 1rem; top: 1rem; margin: 0; width: 50px; height: 50px; border-radius: 50%; letter-spacing: 0; font-size: 1.4rem; z-index: 10;}
	.fee .box.active {background: #212121 !important;}
	.fee .best.active {background: none !important;}
	.fee .best.active .box-con {background: #212121 !important;}
	.fee .box.active:before, .fee .best.active .box-con:before {background: #F96D35;}
	.fee .tit small {display: none;}
	.fee .tit strong {margin: 1.2rem 0 0;}
	.fee label .fa {left: 9px;}
}
@media (max-width: 480px) {
	.fee {padding: 1.6666rem;}
	.fee .inner {gap: 0.5rem 0;}
	.fee .best .discTag {transform: scale(1.4);}
	.fee .box-gra, .fee .best .box-con {border-radius: 1.8rem;}
	.fee .best .name {font-size: 1.2rem;}
	.fee .title {font-size: 1.8rem;}
	.fee .box .tit:before {top: -18px; font-size: 1rem;}
	.fee .tit p {font-size: 1.4rem;}
	.fee .tit strong {margin: 0.5rem 0 0; font-size: 2.2rem;}
	.fee label .fa {left: 9px;}
	.fee .btnWrap {margin: 3.125rem 0 0;}
}
@media (max-width: 360px) {
	.fee .title {font-size: 1.6rem;}
}

/**** 다운로드 ****/
.download {position: relative; width: 100%; max-width: 1460px; margin: 12.5rem auto 6.25rem; display: flex; align-items: center; justify-content: space-between;}
.download .img {width: 40%; flex-shrink: 0;}
.download .img img {max-width: 100%; height: auto; display: block;}
.download .con {width: 48%; display: flex; justify-content: center; flex-direction: column;}
.download .tit {font-size: 5rem; color: #fff; font-weight: 700;}
.download .tit span {color: var(--color-primary);}
.download .con p {font-size: 1.5rem; color: #F9DB39; margin: 5.625rem 0 2.9375rem; line-height: 1.4;}
.download .con p a {color: #F9DB39;}
.download .btnWrap {display: flex; gap: 0 10px;}
.download .method {padding: 0 1.25rem; height: 70px; line-height: 70px; border-radius: 0.5rem; border: 1px solid #F96D35; background: rgba(249,109,53,.46); font-size: 1.625rem; color: #fff; font-weight: 700;}
@media (max-width: 1600px) {
	.download {padding: 0 3rem;}
	.download .tit {font-size: 4.2rem;}
	.download .con p {font-size: 1.4rem;}
	.download .btnWrap button img {height: 60px; width: auto;}
	.download .method {height: 60px; line-height: 60px; font-size: 1.4rem;}
}
@media (max-width: 1400px) {
	.download .con {width: 53%;}
}
@media (max-width: 1200px) {
	.download {padding: 0 2rem; margin: 8rem auto 6rem;}
	.download .tit {font-size: 3.6rem;}
	.download .con p {font-size: 1.2rem; margin: 3rem 0 2rem;}
	.download .btnWrap {gap: 0 5px;}
	.download .btnWrap button img {height: 50px;}
	.download .method {height: 50px; line-height: 50px; font-size: 1.2rem;}
}
@media (max-width: 991px) {
	.download .tit {font-size: 2.8rem;}
	.download .img {width: 36%;}
	.download .con {width: 56%;}
	.download .con p br {display: none;}
	.download .btnWrap {flex-direction: column; gap: 5px; width: 70%;}
	.download .btnWrap button {background: #000; border-radius: 0.5rem;}
	.download .btnWrap button.method {background: rgba(249,109,53,.46);}
}
@media (max-width: 767px) {
	.download {flex-direction: column; gap: 5rem 0;}
	.download .img {width: 50%;}
	.download .con {width: 100%; align-items: center;}
	.download .tit br {display: none;}
	.download .con p {margin: 1rem 0 2.5rem; font-size: 1.4rem; text-align: center;}
	.download .con p br {display: block;}
	.download .btnWrap {flex-direction: row; justify-content: center; width: 100%;}
}
@media (max-width: 640px) {
	.download .img {width: 70%;}
	.download .tit {font-size: 2.3rem; text-align: center;}
	.download .con p {font-size: 1.3rem;}
	.download .con p br {display: none;}
	.download .btnWrap {flex-direction: column; max-width: 300px;}
	.download .btnWrap button img {height: 40px;}
	.download .method {height: 40px; line-height: 40px;}
}
@media (max-width: 480px) {
	.download {padding: 0 1.6666rem;}
	.download .tit br {display: block;}
	.download .con p {font-size: 1.2rem;}
}
@media (max-width: 360px) {
	.download {margin: 6rem 0;}
}