@charset "utf-8";


/* **************************************** *
 * SUB layout
* @description 서브단에서만 달라지는 header, footer 정의
 * **************************************** */
#container:has(.board-page) + #footer{}
#header{}
#footer{}

@media (max-width:1200px){

}
@media all and (max-width:1023px){

}

@media (max-width: 540px){

}

/* **************************************** *
 * SUB common
 * **************************************** */
/*.sub-content{position:relative;padding-top: max(6.78vw, 130rem);}*/
.sub-content{position:relative;padding-top: max(4.687vw, 90rem);}
/*
.sub02_01 .sub-content,
.sub02_02 .sub-content,
.sub04_01 .sub-content{padding-top:max(4.687vw, 90rem);}*/
.sub-content:has(.board-page){}
.sub-tit{text-align:center; margin-bottom:45rem;}
.sub-tit > em{display:inline-block; margin-bottom:20rem; font-size: 20rem; font-weight: 700; color:var(--c-01);}
.sub-tit > h2{display:block; font-size: 55rem; font-weight: 700; line-height:1.3em; word-break:keep-all; color:var(--b-01); /*text-transform:uppercase;*/ font-family:var(--lang-ko);}
[lang="ko-KR"] .sub-tit > h2,
[lang="zh-CN"] .sub-tit > h2{text-transform:uppercase;}
.bn-inquiry{position:relative; width:100%; height:500rem; margin-top:120rem; background:url(../img/sub/bg-inquiry.jpg)no-repeat center; background-size:cover;}
.bn-inquiry .wrap{height:100%;}
.bn-inquiry .wrap .txt{}
.bn-inquiry .wrap .txt > em{display:inline-block; color:#fff; font-size: 19rem; font-weight:600; }
.bn-inquiry .wrap .txt > h3{display:block; margin:20rem 0 40rem; font-size: 54rem; font-weight: 800; line-height:1.3em; color:#fff; font-family:var(--lang-ko);}
[lang="ko-KR"] .bn-inquiry .wrap .txt > h3,
[lang="zh-CN"] .bn-inquiry .wrap .txt > h3{text-transform:uppercase;}

.bn-inquiry.v2{background:url(../img/sub/bg-inquiry02.jpg)no-repeat center; background-size:cover;}
.bn-inquiry.v2 .wrap .txt{text-align:center;}

.product-page .bn-inquiry{margin:0;}

@media (max-width:1200px){
	#sub-visual::after{height:60rem; border-radius:50rem 50rem 0 0;}

	.bn-inquiry .wrap .txt > h3{font-size:44rem;}
	.bn-inquiry .wrap .img{height:280rem;}
	.bn-inquiry .wrap .img img{height:100%;}
}

@media all and (max-width:1023px){
	#sub-visual::after{height:30rem; border-radius:35rem 35rem 0 0;}
	.sub-content,
	.sub02_01 .sub-content,
	.sub02_02 .sub-content{padding-top:60rem;}

	.sub-tit > em{font-size:18rem; margin-bottom:15rem;}
	.sub-tit > h2{font-size:45rem;}

	.bn-inquiry,
	.bn-inquiry.v2{height:350rem;}
	.bn-inquiry .wrap .txt > h3{margin:20rem 0 25rem; font-size:34rem;}


}

@media (max-width: 860px){
}

@media (max-width: 540px){
	#sub-visual::after{height:20rem; border-radius:10rem 10rem 0 0;}
	.sub-content{padding-top:30rem;}
	.sub-tit{margin-bottom:20rem;}
	.sub-tit > em{font-size:11rem; margin-bottom:8rem;}
	.sub-tit > h2{font-size:25rem;}

	.bn-inquiry,
	.sub05_01 .bn-inquiry.v2{margin-top:40rem; height:250rem;}
	.bn-inquiry.v2{margin-top:0;}
	.bn-inquiry .wrap{gap:10rem;}
	.bn-inquiry .wrap .txt > em{font-size:13rem;}
	.bn-inquiry .wrap .txt > h3{margin:10rem 0 15rem; font-size:18rem;}
	.bn-inquiry.v2 .wrap .txt > h3{font-size:22rem;}
	.bn-inquiry .wrap .img{height:180rem;}
}

/* **************************************** *
 * SITE CUSTOM
 * **************************************** */

/* 회사소개 */
.about-why{padding-bottom:120rem;}
.about-why__list{margin-top:100rem;}
.about-why__item{padding:60rem 0; border-bottom:1px dashed #eee; box-sizing:border-box;}
.about-why__item:last-child{padding-bottom:0; border:none;}
.about-why__item.item01{gap:100rem; padding-top:0;}
.about-why__item.item01 > .txt{width:calc(100% - 784rem);}
.about-why__item.item01 > .img{position:relative;display: flex; justify-content: center; align-items: center;  width:675rem; height:312rem; border:2px solid #eee; box-sizing:border-box; border-radius:10rem;}
.about-why__item.item01 > .img > i{position:absolute; top:-18.5rem; left:50%; display:flex; justify-content: center; align-items: center; width:160rem; height:37rem; background:#444; border-radius:50rem; font-size: 18rem; font-weight: 600; color:#fff; transform:translateX(-50%);}
.about-why__item.item01 > .img ul{gap:80rem;}
.about-why__item.item01 > .img ul > li{text-align:center;}
.about-why__item.item01 > .img ul > li .chart{position:relative;}
.about-why__item.item01 > .img ul > li .chart img{width:auto; max-width:100%;}
.about-why__item.item01 > .img ul > li .num{position:absolute; top:50%; left:50%; font-size:25rem; font-weight:700; color:#0173FF; line-height:1em; transform:translate(-50%, -50%);}
.about-why__item.item01 > .img ul > li:last-child .num{color:#FF3457;}
.about-why__item.item01 > .img ul > li h3{display:block; margin-top:15rem; font-size:17rem; font-weight:600; color:#333; line-height:1em; word-break:keep-all;}
.about-why__item > .txt{}
.about-why__item > .txt > h3{display:block; margin-bottom:15rem; font-size: 34rem; font-weight: 700; line-height:1em; color: var(--b-01); }
.about-why__item > .txt > p{display:block; font-size: 17rem; font-weight:300; line-height:1.8em; color:#666; }
.why-img__list{margin-top:35rem; gap:20rem;}
.why-img__list > li{position:relative; border-radius: 10rem; overflow:hidden;}
.why-img__list > li .img{width:100%;}
.why-img__list > li .img img{width:100%;}
.why-img__list > li .txt{position:absolute; left:0; bottom:0; width:100%; padding:30rem 10rem; box-sizing:border-box; text-align:center;}
.why-img__list > li .txt > em{display:inline-block; margin-bottom:8rem; font-size: 15rem; font-weight: 500; color:#fff; line-height:1em;}
.why-img__list > li .txt > h3{display:block; font-size: 22rem; font-weight:600; line-height:1.4em; word-break:keep-all; color:#fff;}
.about-birth{position:relative; background: #F9F9F9;}
.about-birth .wrap{gap:80rem; padding:195rem 0 254rem; }
.about-birth .img{width:558rem; border-radius:10rem; box-sizing:border-box; overflow:hidden;}
.about-birth .img img{width:100%;}
.about-birth .txt{display: flex; flex-direction: column; justify-content: center; width:calc(100% - 638rem);}
.about-birth .txt > em{display:inline-block; margin-bottom:20rem; font-size:20rem; font-weight: 600; line-height:1em; word-break:keep-all; color: var(--c-01);}
.about-birth .txt > h3{display:block; margin-bottom:30rem; font-size:50rem; font-weight:700;  color: var(--b-01); line-height:1.3em; word-break:keep-all; text-transform:uppercase; font-family:var(--lang-ko);}
.about-birth .txt > p{display:block; font-size: 18rem; font-weight:300; line-height:1.8em; color:#666; word-break:keep-all;}
.about-birth .obj{position:absolute; border-radius:10rem; overflow:hidden;}
.about-birth .obj.v1{top:120rem; right:296rem;}
.about-birth .obj.v2{right:452rem; bottom:120rem;}
.about-bn{display:flex; flex-direction: column; align-items: center; justify-content: center;height:400rem; text-align:center; background:url(../img/sub/bg-about-bn.jpg)no-repeat center; background-size:cover; background-attachment:fixed;}
.about-bn .txt em{display: inline-flex; margin-bottom:20rem; padding: 9rem 20rem; border:1px solid rgba(255, 255, 255, 0.20); border-radius:50rem; justify-content: center; align-items: center; font-size: 16rem; font-weight: 500; line-height:1em; color:#fff;}
.about-bn .txt h3{display:block; font-size: 50rem; font-weight: 800; line-height:1.4em; color:#fff; word-break:keep-all; font-family:var(--lang-ko); text-transform:uppercase;} 
.about-bn .txt p{display:block; margin-top:20rem; font-size: 17rem; font-weight:200; line-height:1em; word-break:keep-all; color: rgba(255, 255, 255, 0.70);}
.about-necessity{position:relative; padding:120rem 0 120rem;}
.group-wrap{margin-top:-50rem;}
.groups { box-sizing: border-box; }
.groups{position: relative;  /*height: 65vh;*/}
/*.group {position: absolute; top: 0; left: 0;}*/
.group{margin-top:100rem; max-width:100%; perspective:1000rem;}
.group .bg {width: 100%; height: calc(100vh - 160px - 151px); transition:: all 0.5s; border-radius: 20rem;  background-size:cover;}
.group .text-wrap ,
.group {width: 100%; height: calc(100vh - 160px - 151px);}
.group.no1 .bg	{background-image: url('../img/sub/necessity01.jpg');}
.group.no2 .bg	{background-image: url('../img/sub/necessity02.jpg');}
.group.no3 .bg	{background-image: url('../img/sub/necessity03.jpg');}
.group.no4 .bg	{background-image: url('../img/sub/necessity04.jpg');}
.group.no5 .bg	{background-image: url('../img/sub/necessity05.jpg');}
.group .flex_necessity{display:flex; align-items: center; gap:40rem; padding:0 120rem; box-sizing:border-box; height: 100%;}
.group .flex_necessity .txt{width:calc(100% - 610rem); width:-webkit-calc(100% - 610rem);}
.group .flex_necessity .txt > h2{display:block; font-size:38rem; font-weight: 700; line-height: 1em; color:#fff; word-break:keep-all;}
.group .flex_necessity > .txt > p{display:block; margin-top:24rem; font-size:18rem; font-weight:300; line-height: 1.9em; color:#fff; word-break:keep-all;}
.group .flex_necessity .list-info{width:570rem;}
.group .flex_necessity .list-info > li{gap:15rem; padding:20rem; background:#fff; border-radius:5rem; box-sizing:border-box; margin-bottom:10rem;}
.group .flex_necessity .list-info > li:last-child{margin:0;}
.group .flex_necessity .list-info > li .icon{display: flex; justify-content: center; align-items: center; width: 65rem; height: 65rem; border-radius: 50rem; background: #f6f6f6;}
.group .flex_necessity .list-info > li .icon img{height:30rem;}
.group .flex_necessity .list-info > li .txt{width:calc(100% - 80rem);}
.group .flex_necessity .list-info > li .txt h3{display:block; font-size:18rem; font-weight:700; color:var(--b-01); line-height:1em; word-break:keep-all;}
.group .flex_necessity .list-info > li .txt p{display:inline-block; margin-top:8rem; font-size:17rem; font-weight:300; color:#777; line-height:1.2em; word-break:break-word;}
.about-intro{position:relative; width:100%; height:100vh; display:flex; align-items: center; flex-direction: column; justify-content: center; background: url('../img/sub/bg-intro.jpg')no-repeat center; background-size:cover;}
.about-intro .txt{text-align:center;}
.about-intro .txt .logo{display:flex; justify-content: center;  align-items: center; text-align:center; margin-bottom:50rem;}
.about-intro .txt .logo img{height:50rem;}
.about-intro .txt h3{display:block; font-size:70rem; font-weight:700; color:#fff; line-height:1em; word-break:keep-all; }
.about-intro .txt p{display:inline-block; margin-top:30rem; font-size:17rem; font-weight:200; color:#fff; line-height:1em; word-break:keep-all; opacity:0.6;}
[lang="ko-KR"] .about-intro .txt p{text-transform:uppercase;}

@media (max-width:1500px){
	.about-birth .obj.v1{right:10%;}
	.about-birth .obj.v2{right:18%;}
	
}
@media (max-width:1200px){
	/*화면 1024에 맞춰놓고 작업*/
	.about-why{padding-bottom:100rem;}
	.about-why__item.item01{gap:50rem;}
	.about-why__item.item01 > .txt{width:calc(100% - 480rem);}
	.about-why__item.item01 > .img{width:430rem;}
	.about-why__item.item01 > .img ul{gap:30rem;}
	.about-why__item.item01 > .img ul > li .chart{width:160rem;}

	.about-birth .wrap{gap:5%;}
	.about-birth .img{width:45%; height:auto; overflow:hidden;}
	.about-birth .txt{width:50%;}
	.about-birth .txt > em{font-size:18rem;}
	.about-birth .txt > h3{font-size:40rem; margin-bottom:20rem;}
	.about-birth .txt > p{font-size:17rem;}
	.about-birth .txt > p br{display:none;}

	.about-birth .obj img{width:100%; height:100%;}
	.about-birth .obj.v1{top:100rem; width:140rem; height:140rem;}
	.about-birth .obj.v2{bottom:100rem; width:120rem; height:120rem;}

	.group .flex_necessity{padding:0 80rem;}
	.group .flex_necessity .txt > h2{font-size:30rem; line-height:1.3;}
	.group .flex_necessity > .txt > p{font-size:17rem; line-height:1.6;}
	.group .flex_necessity .list-info{width:65%;}
}
@media all and (max-width:1023px){
	/*화면 768에 맞춰놓고 작업*/
	.about-why__list{margin-top:50rem;}
	.about-why__item{padding:40rem 0;}
	.about-why__item.item01{display:block;}
	.about-why__item > .txt > h3{font-size:28rem;}
	.about-why__item.item01 > .txt,
	.about-why__item.item01 > .img{width:100%;}
	.about-why__item.item01 > .img{margin-top:30rem;}
	.about-why__item.item01 > .img ul{gap:50rem;}
	.about-why__item.item01 > .img ul > li .chart{width:auto;}
	.why-img__list{grid-template-columns: 1fr 1fr;}
	.about-birth .wrap{padding:150rem 0 150rem;}
	.about-birth .img{height:0; padding-bottom:43%; border-radius:7rem;}
	.about-birth .txt > em{margin-bottom:15rem; font-size:16rem;}
	.about-birth .txt > h3{font-size:35rem; margin-bottom:10rem;}
	.about-birth .txt > p{font-size:16rem;}
	.about-birth .txt > p br{display:none;}
	.about-birth .obj{border-radius:7rem;}
	.about-birth .obj.v1{top:50rem; right:5%; width:100rem; height:100rem;}
	.about-birth .obj.v2{bottom:50rem; right:10%; width:80rem; height:80rem;}
	
	.group .flex_necessity{gap:20rem; flex-direction: column; align-items: flex-start; justify-content: space-evenly; padding: 0 60rem;}
	.group .flex_necessity .txt{width:100%;}
	.group .flex_necessity .txt > h2 br{display:none;}
	.group .flex_necessity > .txt > p{margin-top:12rem;}
	.group .flex_necessity .list-info{width:100%;}
}

@media (max-width: 540px){
	.about-why{padding-bottom:40rem;}
	.about-why__list{margin-top:0rem;}
	.about-why__item{padding:20rem 0;}
	.about-why__item > .txt > h3{margin-bottom:10rem; font-size:20rem;}
	.about-why__item > .txt > p{font-size:14rem; line-height:1.6; word-break: break-word;}
	.about-why__item > .txt > p br{display:none;}
	.about-why__item.item01 > .img{margin-top:30rem; height:auto; padding:25rem 0;}
	.about-why__item.item01 > .img ul{gap:20rem;}
	.about-why__item.item01 > .img ul > li .chart{width:120rem; margin:0 auto;}
	.about-why__item.item01 > .img ul > li .num{font-size:18rem;}
	.about-why__item.item01 > .img > i{top:-14rem; padding:5rem 10rem; width:127rem; height:auto; font-size:13rem;}
	.about-why__item.item01 > .img ul > li h3{margin-top:10rem; font-size:14rem;}
	.why-img__list{margin-top:15rem; gap:10rem;}
	.why-img__list > li .txt{padding:12rem 10rem;}
	.why-img__list > li .txt > em{font-size:12rem; margin-bottom:5rem;}
	.why-img__list > li .txt > h3{font-size:15rem;}

	.about-birth .wrap{padding:40rem 0; display:block;}
	.about-birth .img{width:100%; padding-bottom:90%;}
	.about-birth .txt{width:100%; margin-top:30rem;}
	.about-birth .txt > em{margin-bottom:7rem; font-size:14rem;}
	.about-birth .txt > h3{font-size:22rem; margin-bottom:7rem;}
	.about-birth .txt > p{font-size:14rem; line-height:1.6}
	.about-birth .obj{display:none;}

	.about-bn{height:250rem; background-attachment: initial;}
	.about-bn .txt{width:90%; margin:0 auto;}
	.about-bn .txt em{padding:5rem 10rem; font-size:14rem; margin-bottom:10rem;}
	.about-bn .txt h3{font-size:22rem; }
	.about-bn .txt p{margin-top:10rem; font-size:14rem; line-height:1.3;}

	.about-necessity{padding:40rem 0;}
	.group-wrap{margin-top:0rem;}
	.group .flex_necessity{padding:20rem;}
	.group .flex_necessity .txt > h2{font-size:18rem;}
	.group .flex_necessity > .txt > p{margin-top:6rem; font-size:14rem; line-height:1.4;}

	.group .flex_necessity .list-info > li{padding:10rem; gap:10rem; margin-bottom:7rem;}
	.group .flex_necessity .list-info > li .icon{width:40rem; height:40rem;}
	.group .flex_necessity .list-info > li .icon img{height:20rem;}
	.group .flex_necessity .list-info > li .txt{width: calc(100% - 50rem);}
	.group .flex_necessity .list-info > li .txt h3{font-size:15rem;}
	.group .flex_necessity .list-info > li .txt p{margin-top:5rem; font-size:13rem;}


	.about-intro{height:400rem;}
	.about-intro .txt{width:90%; margin:0 auto;}
	.about-intro .txt .logo{margin-bottom:20rem;}
	.about-intro .txt .logo img{height:30rem;}
	.about-intro .txt h3{font-size:30rem; line-height:1.3;}
	.about-intro .txt p{margin-top:20rem; font-size:14rem; line-height:1.3;}

	.group{margin-top:12rem;}
	.group .text-wrap, .group{height:400rem;}
	.group .bg{width:100%; height:100%; border-radius:15rem;}
	.group .flex_necessity > .txt > p br{display:none;}
}


 /* 인증서 */
.patent-page .certify-item figure{background:#fff; border:1px solid #eee;}
.patent-page .certify-item img{width:100%; margin:0 auto;}
.patent-page .certify-item strong{display:block; margin-top:20rem; line-height: 1.5; font-family:var(--lang-ko); font-weight:700; font-size:18rem; color:#222; text-align:center; word-break:break-word;}
.patent-page .certify-pop{position:fixed;opacity:0;top:0px;left:0px;z-index: -1;width:100%;height:100%;background:rgba(0,0,0,0.5);}
.patent-page .certify-pop > div{position:absolute; top:50%; left:50%; margin:0 auto; box-shadow:26px 18px 49px rgba(0,0,0,0.2); transform:translate(-50%, -50%); max-width:540rem;}
.patent-page .certify-pop.active{opacity:1;z-index:99;transition: opacity 0.3s ease-out 0s;}
.patent-page .certify-pop .close{display:block;width: 60rem;height: 60rem;position: absolute;right: -70rem;top: -13rem;background: url(../img/common/ic-cancle_w.svg) no-repeat 50% 50%;background-size: 28rem;font-size: 0;background-color: transparent;}
#layer-src img{width:100%;}
.patent-page .tabs{display: flex; justify-content: center; width: 100%; margin-bottom:54rem}
.patent-page .tabs li {padding:19rem 57rem; margin:0 5rem; border-radius:100rem;border: 1px solid #d6d6d6;color: #888; line-height:1em;}
.patent-page .tabs li.active{background-color:var(--c-01);color:#fff; border-color:var(--c-01)}
.patent-page .tab_container {width:100%;}
.patent-page .tab_content {width:100%; gap:40rem;}


@media (max-width:1023px){
	.certify-item strong{margin-top: 15rem;}
	.certify-list{	gap: 35rem 20rem;}
}

@media (max-width:540px){
	.patent-page .tabs li{padding: 11rem 20rem;margin: 0 2rem;}
	.patent-page .tabs{margin-bottom:30rem;}
	.patent-page .tab_content {gap:10rem;}

    .patent-page .certify-list{gap:25rem 10rem;}
    .patent-page .certify-item strong{margin-top:8rem; font-size:14rem}
    .patent-page .certify-pop > div{width:80%;}
    .patent-page .certify-pop .close{display:flex; justify-content:center; align-items:center; top:auto; right:auto; bottom:-45rem; left:0; width:100%; height:auto; padding:12rem 0rem; background:var(--b-01); font-weight:700; font-size:15rem; font-size:12rem; color:#fff; text-align:center; border-radius:3rem;}
 }



/* 사용방법 */
.guide-img{margin:0 60rem 80rem;}
.guide-img img{margin:0 auto; text-align:center; width:auto; max-width:100%; border-radius:20rem; overflow:hidden;}
.guide-page .wrap{gap:20rem;}
.guide-page .wrap .title{width:350rem;}
.guide-page .wrap .title > h3{font-size: 35rem; font-weight: 700; line-height:1.3em; color: var(--b-01);}
.guide-page .wrap .cont{position:relative; width:calc(100% - 370rem);}
.step-list{gap:40rem; }
.guide-step .step-list > li{border-top: 1px solid #ddd; padding:40rem 30rem; box-sizing:border-box;}
.step-list > li .top{gap:20rem;}
.step-list > li .top > .icon{display:flex; justify-content: center; align-items: center; width:70rem; height:70rem; border-radius: 50rem; background: #F9F9F9;}
.step-list > li .top > .txt{}
.step-list > li .top > .txt > em{display:inline-block; margin-bottom:10rem; font-size: 12rem; line-height:1em; font-weight: 600; color: var(--c-01);}
.step-list > li .top > .txt > h3{display:block; font-size: 26rem; font-weight: 700; line-height:1em; word-break:keep-all; color: var(--b-01);}
.step-list > li .des{margin-top:25rem;}
.step-list > li .des [data-list="dot"]{}
.step-list > li .des [data-list="dot"] > li{font-size:17rem; font-weight:300; color:#666; line-height:1.1em; word-break:keep-all;}
.step-list > li .des [data-list="dot"] > *::before{width:2rem; height:2rem; background:#666;}
.step-list > li .des [data-list="check"]{margin-top:14rem; padding:12rem; border-radius: 5rem; border: 1px solid #eee; background: #f9f9f9;}
.step-list > li .des [data-list="check"] > *{margin-bottom:8rem;}
.step-list > li .des [data-list="check"] > *:last-child{margin-bottom:0;}
.step-list > li .des [data-list="check"] > li{padding-left:17rem; font-size:15rem; font-weight:300; color:#666; line-height:1.2em; word-break:keep-all;}
.step-list > li .des [data-list="check"] > li::before{top:1.2rem; width:13rem; height:13rem; background:url(../img/common/ic-circle-chk.svg)no-repeat center; background-size:contain;}
[data-list="check"] > li::after{display:none;}
.guide-web{margin:90rem 0 130rem;}
.guide-device .step-list{gap:0; margin-bottom:40rem;}
.guide-device .step-list > li{display:flex; justify-content:center; align-items:center; flex-direction: column; text-align: center;}
.guide-device .step-list > li .icon{display:flex; justify-content: center; align-items: center; margin-bottom:25rem; width:100rem; height:100rem; border-radius: 50rem; background:#F5FAFB; border:1px solid #EDF6F8; box-sizing:border-box;}
.guide-device .step-list > li .icon img{}
.guide-device .step-list > li .txt{position:relative; display:block; width:100%; padding:25rem 0 0; box-sizing:border-box;}
.guide-device .step-list > li:nth-child(1) .txt:before{content:''; position:absolute; top:-3rem; left:-2.5rem; width:5rem; height:5rem; background:var(--c-01); border-radius:50rem;}
.guide-device .step-list > li .txt:after{content:''; position:absolute; top:-5rem; left:0; width:4rem; height:9rem; background:url(../img/common/ic-arr-gray.svg)no-repeat center; background-size:cover; z-index:4;}
.guide-device .step-list > li:nth-child(4) .txt:before{content:''; position:absolute; top:-3rem; right:-2.5rem; width:5rem; height:5rem; background:#d9d9d9; border-radius:50rem;}
.guide-device .step-list > li .txt:before{content:''; position:absolute; }
.guide-device .step-list > li .txt > em{display:inline-block; font-size:14rem; font-weight:600; color:#aaa; line-height:1em;}
.guide-device .step-list > li .txt > h3{display:block; margin:10rem 0; font-size:23rem; font-weight:700; color:var(--b-01); line-height:1em; word-break:keep-all;}
.guide-device .step-list > li .txt > p{display:block; font-size:17rem; font-weight:300; color: #666; line-height:1.4em; word-break:keep-all;}
.guide-device [data-list="check"]{padding:20rem; border-radius: 10rem; border: 1px solid #eee; background:#f9f9f9;}
.guide-device [data-list="check"] > li{padding-left:24rem; font-size:17rem; font-weight:300; color:#666; line-height:1em; word-break:keep-all;}
.guide-device [data-list="check"] > li:before{width:15rem; height:15rem; background:url(../img/common/ic-chk.svg)no-repeat center; background-size:contain;}


.guide-device .step-list > li.on .txt:after{background:url(../img/common/ic-arr-blue.svg)no-repeat center; background-size:cover;}
.guide-device .step-list > li:nth-child(1).on .txt:after{display:none; background:var(--c-01);}
.guide-device .step-list > li:nth-child(4).on .txt:before{background:var(--c-01); }

.progressbar {width:100%; height:1px; position:absolute; overflow:hidden; background:#eee; top:124rem; left:50%; transform: translateX(-50%); width:100%; z-index:-1;}
.mo_progressbar {height:83.5%; width:1px; position:absolute; overflow:hidden; background:#999; left:42.5px; top:44px; display:none; }


/* 애니메이션 키프레임 정의 */
@keyframes progress{
  0%{width: 0px}
  100%{width: 100%;}
}

@keyframes progress_m {
  0%{height: 0px}
/*  100%{height: 100%;}*/
	75%{height: 100%;}
	100%{height: 100%;}
}



/* 애니메이션 적용을 위해 클래스 추가 */
.progress-started::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 1px;
    width: 100%;
    background: var(--c-01);
    animation: progress 8s linear infinite;
	
}

.mo_progress-started::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 435px;
    width: 1px;
    background: #fff;
    animation: progress_m 8s linear infinite;
}



@media (max-width:1200px){
	.guide-page .wrap .title{width:230rem;}
	.guide-page .wrap .title > h3{font-size:28rem;}
	.guide-page .wrap .cont{width:calc(100% - 250rem);}
	.guide-device .step-list{grid-template-columns: 1fr 1fr 1fr 1fr;}
	.guide-step .step-list > li{padding:40rem 10rem;}

}
@media all and (max-width:1023px){
	.guide-img{margin:0 40rem 40rem;}
	.guide-img img{border-radius:15rem;}
	.guide-page .guide-step .wrap,
	.guide-page .guide-device .wrap{display:block;}
	.guide-page .wrap .title{width:100%; margin:0 0 30rem;}
	.guide-page .wrap .title > h3 br{display:none;}
	.guide-page .wrap .cont{width:100%;}
	.guide-step .step-list > li{padding:30rem 0 0;}
	.guide-web{margin:70rem 0;}
}

@media (max-width:860px){
	.guide-device .step-list > li .txt > p{font-size:16rem;}
}
@media (max-width: 540px){
	.guide-img{margin:0 20rem 20rem;}
	.guide-img img{border-radius:7rem;}
	.guide-page .wrap .title{margin:0 0 10rem;}
	.guide-page .wrap .title > h3{font-size:20rem;}
	.guide-page .wrap .title > i{font-size:12rem;}
	.progressbar{display:none;}
	.step-list{grid-template-columns: 1fr; gap:20rem;}
	.guide-step .step-list > li{padding:18rem 0 0;}
	.step-list > li .top{gap:10rem;}
	.step-list > li .top > .icon{width:50rem; height:50rem;}
	.step-list > li .top > .icon img{width:25rem;}
	.step-list > li:nth-child(2) .top > .icon img{width:15rem;}
	.step-list > li .top > .txt > em{margin-bottom:5rem;}
	.step-list > li .top > .txt > h3{font-size:17rem;}
	.step-list > li .des{margin-top:10rem;}
	.step-list > li .des [data-list="dot"] > li{font-size:14rem; margin-bottom:8rem; padding-left:8rem;}
	.step-list > li .des [data-list="dot"] > li:last-child{margin:0;}
	.step-list > li .des [data-list="dot"] > *::before{top:6rem;}
	.step-list [data-list="check"] > li{padding:0; padding-left:18rem !important;}
	.step-list > li .des [data-list="check"] > li{font-size:14rem;}
	.step-list > li .des [data-list="check"] > li::before{top:1rem;}
	.guide-web{margin:40rem 0;}
	.guide-device .step-list{position:relative; grid-template-columns: 1fr; gap:20rem; margin-bottom:20rem;}
	.guide-device .step-list:before{content:''; position:absolute; top:38rem; left:0; width:1px; height:80%; background:#eee;}
	.guide-device .step-list:after{content:''; position:absolute; top:38rem; left:0; width:1px; height:80%; background:var(--c-01); animation: progress_m 8s linear infinite;}
	.guide-device .step-list > li{position:relative; flex-direction: row; justify-content: flex-start; text-align:left; padding-left:15rem; gap:14rem;}
	.guide-device .step-list > li .icon{width:50rem; height:50rem; margin:0;}
	.guide-device .step-list > li .icon img{width:20rem;}
	.guide-device.guide-app .step-list > li:nth-child(2).icon img{width:15rem;}
	.guide-device .step-list > li .txt{padding:0; border-top:none; width:auto; width:calc(100% - 64rem);}
	.guide-device .step-list > li .txt > em{font-size:11rem;}
	.guide-device .step-list > li .txt > h3{margin:4rem 0 3rem; font-size:18rem;}
	.guide-device .step-list > li .txt > h3 br{display:none;}
	.guide-device .step-list > li .txt > p{font-size:14rem;}
	.guide-device .step-list > li .txt > p br{display:none;}
	.guide-device .step-list > li:nth-child(1):before{content:''; position:absolute; top:36rem; left:-1.5rem; width:4px; height:4px; background:var(--c-01); border-radius:50rem;}
	.guide-device .step-list > li:nth-child(4):before{content:''; position:absolute; top:36rem; left:-1.5rem; width:4px; height:4px; background:#d9d9d9; border-radius:50rem;}
	.guide-device .step-list > li:after{content:''; position:absolute; top:50%; left:-1.5px; width:3rem; height:7rem; background:url(../img/common/ic-arr-gray.svg)no-repeat center; background-size:cover; transform: rotate(90deg);}
	.guide-device .step-list > li:nth-child(1):after,
	.guide-device .step-list > li:nth-child(4):after{display:none;}
	.guide-device .step-list > li .txt:after{display:none;}
	.guide-device .step-list > li:nth-child(1) .txt:before{display:none;}
	.guide-device [data-list="check"]{padding:10rem; border-radius:7rem;}
	.guide-device [data-list="check"] > li{padding:0; font-size:14rem; padding-left:17rem !important; margin-bottom:8rem;}
	.guide-device [data-list="check"] > li:last-child{margin:0;}
	.guide-device [data-list="check"] > li:before{width:13rem; height:13rem;}

	.guide-device .step-list > li.on:after{background: url(../img/common/ic-arr-blue.svg) no-repeat center; background-size: cover;}
	.guide-device .step-list > li:nth-child(4).on:before{background:var(--c-01);}

	.guide-device .step-list > li:nth-child(4) .txt:before{display:none;}
}
@keyframes progress_m {
  0%{height: 0px}
/*  100%{height: 100%;}*/
	75%{height: 80%;}
	100%{height: 80%;}
}

/* 제품 */
.product-top{}
.product-top .wrap{gap:100rem;}
.product-top .img{display:flex; justify-content:center; align-items:center; width:600rem; height:600rem; border-radius: 10rem; box-sizing:border-box; overflow:hidden;}
.sub02_01 .product-top .img{border: 1px solid #ddd;}
.sub02_01 .product-top .img img{width:auto; max-width:90%;}
.product-top .img img{width:auto; max-width:100%;}
.product-top .txt{display: flex; flex-direction: column; justify-content: center; width:calc(100% - 700rem);}
.product-top .txt .top{padding-bottom:40rem; margin-bottom:40rem; border-bottom:2rem solid #222; box-sizing:border-box;}
.product-top .txt em{display:inline-block; margin-bottom:20rem; font-size:20rem; font-weight: 700; color: var(--c-01); line-height:1em;}
.product-top .txt h2{display:block; font-size: 55rem; font-weight:700; line-height:1em; text-transform: uppercase; color: var(--b-01); word-break:keep-all;  font-family:var(--lang-ko);}
.product-top .txt p{display:block; font-size: 17rem; font-weight:300; line-height:1.6em; color:#666; word-break:break-word;}
.btn-cs{margin-top:180rem; width: 200rem; height: 60rem; }
.btn-cs > a{width:100%; height:100%; display: flex; justify-content: space-between; align-items: center; padding:0 28rem; border-radius: 54rem; border: 2px solid var(--c-01); transition:all 0.3s ease;}
.btn-cs > a span{ font-size: 16rem; font-weight:700; line-height:1em; color: var(--c-01); transition:all 0.3s ease;}
.btn-cs > a .btn-arr{display: flex; justify-content: center; align-items: center; width:auto; height:100%; padding:4rem; box-sizing:Border-box; z-index:1; opacity:1; transition:all 0.3s ease;}
.btn-cs > a .btn-arr svg{position:relative; overflow:hidden;}
.btn-cs > a .btn-arr svg path{stroke:var(--c-01);}
.btn-cs > a .btn-arr svg > *{transition-duration: .5s; transition-timing-function: cubic-bezier(.5,0,.25,1);}
.btn-cs > a .btn-arr svg > .arr2,
.btn-cs > a .btn-arr svg > .arr3{display: flex; position: absolute;}
.btn-cs > a .btn-arr svg > .arr3{transform: translate(-200%, 200%);}
.btn-cs > a .btn-arr svg > .arr2{transform: translate(-100%, 100%);}
.btn-cs > a .btn-arr svg > .arr1{transform: translate(0);}
.btn-cs > a:hover{background:var(--c-01);}
.btn-cs > a:hover span{color:#fff;}
.btn-cs > a:hover .btn-arr svg path{stroke:#fff;}
.btn-cs > a:hover .btn-arr svg > .arr1{transform: translate(200%, -200%);}
.btn-cs > a:hover .btn-arr svg > .arr2{transform: translate(100%, -100%);}
.btn-cs > a:hover .btn-arr svg > .arr3{transform: translate(0);}
.product-detail{position:relative; padding:100rem 0; margin-top:100rem; background: #EEF5F8;}
.product-detail .wrap{gap:30rem;}
.product-detail .detail-list > li{display: flex; gap:20rem; padding: 30rem 40rem; flex-direction: column; justify-content: center; align-items: center; height:400rem; background:#fff; border-radius:10rem; box-sizing:border-box; background:#fff; text-align:center;}
.product-detail .detail-list > li .icon{display: flex; width: 90rem; height: 90rem; justify-content: center; align-items: center; gap:10rem; border-radius: 50rem; background: linear-gradient(319deg, #0095FF 14.41%, #20B9FF 85.8%);}
.product-detail .detail-list > li .icon img{width:auto;}
.product-detail .detail-list > li .txt{}
.product-detail .detail-list > li .txt > h3{display:block; font-size: 25rem; font-weight: 700; line-height:1.4em; word-break:keep-all; color: var(--b-01); font-family:var(--lang-ko);}
@media (max-width:1200px){
	.product-top .wrap{gap:5%;}
	.product-top .img{width:50%; height:530rem;}
	.product-top .txt{width:45%;}
	.product-top .txt .top{padding-bottom:25rem; margin-bottom:25rem;}
	.product-top .txt em{font-size:18rem; margin-bottom:15rem;}
	.product-top .txt h2{font-size:43rem;}
	.product-top .txt p{font-size:16rem;}
	.product-top .txt p br{display:none;}
	.btn-cs{margin-top:140rem; width:160rem; height:55rem;}
	.btn-cs > a{padding:0 20rem;}
	
}
@media all and (max-width:1023px){
	.product-top .img{height:400rem;}
	.product-top .txt .top{padding-bottom:20rem; margin-bottom:20rem;}
	.product-top .txt em{font-size:17rem; margin-bottom:12rem;}
	.product-top .txt h2{font-size:35rem;}
	.product-top .txt p{font-size:15rem;}
	.btn-cs{margin-top:80rem; width:150rem; height:50rem;}
	.product-detail{margin-top:60rem; padding:60rem 0;}
	.product-detail .detail-list > li{padding:20rem; height:230rem; gap:15rem;}
	.product-detail .detail-list > li .icon{width:80rem; height:80rem;}
	.product-detail .detail-list > li .icon img{width:35rem;}
	.product-detail .detail-list > li:last-child .icon img{width:30rem;}
	.product-detail .detail-list > li .txt > h3{font-size:20rem;}
	
}

@media (max-width: 860px){
	.product-top .img{height:370rem;}
}
@media (max-width: 540px){
	.product-top .wrap{display:block;}
	.product-top .img{width:100%; height:330rem;}
	.product-top .txt{margin-top:20rem; width:100%;}
	.product-top .txt .top{padding-bottom:15rem; margin-bottom:15rem;}
	.product-top .txt em{font-size:14rem; margin-bottom:9rem;}
	.product-top .txt h2{font-size:25rem;}
	.product-top .txt p{font-size:14rem;}
	.btn-cs{margin-top:20rem; width:130rem; height:45rem;}
	.btn-cs > a{padding:0 15rem;}
	.btn-cs > a span{font-size:14rem;}
	.product-detail{padding:40rem 0; margin-top:40rem; }
	.product-detail .detail-list{gap:10rem;}
	.product-detail .detail-list > li{gap:8rem; border-radius:7rem; height:160rem;}
	.product-detail .detail-list > li .icon{width:55rem; height:55rem;}
	.product-detail .detail-list > li .icon img{width:27rem;}
	.product-detail .detail-list > li:last-child .icon img{width:24rem;}
	.product-detail .detail-list > li .txt > h3{font-size:17rem; line-height:1.3;}
	
}



/* 문의하기 */
.cs_text{max-width:820rem;}
.cs_text__cont{position:relative; padding-left:46rem}
.cs-page__wrap{display:flex;}
.cs_info{width:552rem; margin-right:80rem; }
.cs_info__cont {position:relative; padding:45rem; border-radius: 15rem; background: linear-gradient(118deg, #25496B 0.04%, #0A233B 94.51%); position: sticky; right:0; top:10%;}
.cs_info__cont:before{content:''; position:absolute; top:22rem; right:40rem; width: 72rem; height: 125rem; background:url(../img/sub/ic-symbol.svg)no-repeat center; background-size:contain;}
.cs_info__cont i{ text-transform:uppercase; font-size:15rem; font-weight: 800; letter-spacing: 3px; color:#fff;}
.cs_info__cont h4{margin:63rem 0 30rem; padding-bottom:30rem; font-size:21rem; font-weight:700; color:#fff; word-break: keep-all; border-bottom:1px solid rgba(255,255,255,0.1);}
.cs_info__cont ul li{margin-bottom:30rem;}
.cs_info__cont ul li:last-child{margin-bottom:0}
.cs_info__cont ul li p{margin-bottom:3rem; font-size:15rem; font-weight: 700; color: rgba(255, 255, 255, 0.70);}
.cs_info__cont ul li span{font-size: 17rem; font-weight:500; color:#fff;letter-spacing: -0.17px;}
.cs-page .button-style{border-top:0}

.cs-page__wrap{margin-top:80rem;}
.cs-page__wrap .cs-form{border:none; padding:0; margin:0;}


@media all and (max-width:1200px){
	.cs_text{width:55%;}
	.cs_info{width:calc(45% - 56rem); margin-right: 56rem;}
	.cs_info__cont{}
}

@media all and (max-width:860px){
	.cs_text{width:55%;}
	.cs_info {width: calc(45% - 40rem); margin-right:40rem;}
	.cs_info__cont{padding:35rem 30rem;}
	.cs_info__cont i{font-size:14rem;}
	.cs_info__cont h4{margin-top:43rem; font-size:18rem}
	.cs_info__cont:before{width:52rem; height:105rem; right:20rem;}
	.cs_info__cont ul li span{font-size:15rem;}
}

@media (max-width: 540px){
	
	.cs_text{width:100%;}
	.cs_info{width:100%;margin-left:0;margin-top:80rem;display: none;}
	.cs-page{margin-top:0}
	.cs-page__wrap{margin-top:0rem;}
	.cs_info__cont h4{font-size:16rem}
	.cs_info__cont{display: none;}
}