@charset "utf-8";


/* **************************************** *
 * SUB layout
* @description 서브단에서만 달라지는 header, footer 정의
 * **************************************** */
/*#container:has(.board-page) + #footer{margin-top: 140rem;}*/
#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(9.3750vw, 130rem);*/ padding-top:105rem;}
.sub-content:has(.board-page){padding-top: 120rem;}
.sub01_01:not(.policy) .sub-content{padding-top: 125rem;}
.sub-tit{text-align:center; margin-bottom:70rem;}
.sub-tit > em{display:inline-block; margin-bottom:20rem; font-size:var(--font-20); font-weight: 700; color:var(--c-01);}
.sub-tit > h2{display:block; font-size:var(--font-55); font-weight: 700; line-height:1.3em; word-break:keep-all; color:var(--b-01); /*text-transform:uppercase;*/ font-family:var(--lang-ko);}
.main-scroll{position:absolute; right:185rem; bottom:-9rem; display: flex; justify-content: center; align-items: center; width:164rem; height:54rem; z-index:10; background:#fff; border-radius:9rem; box-sizing:border-box;}
.main-scroll:before{content:''; position:absolute; left: -10rem; bottom: 9rem; width:10rem; height:10rem; background:url(../img/main/ic-scroll-corner.svg)no-repeat center; background-size:contain;}
.main-scroll:after{content:''; position:absolute; right: -10rem; bottom: 9rem; width:10rem; height:10rem; background:url(../img/main/ic-scroll-corner02.svg)no-repeat center; background-size:contain; }
.main-scroll span{position:relative; margin-bottom:10rem; padding-right:24rem; font-size:14rem; font-weight:500; color:#111; line-height:1em; word-break:keep-all;}
.main-scroll span:before{content:''; position:absolute; top:0; right:0; width:13rem; height:13rem; background:url(../img/main/ic-scroll-arr.svg)no-repeat center; background-size:contain;}

@media (max-width:1200px){
	.main-scroll{right:90rem;}
}

@media all and (max-width:1023px){
	.sub-content:has(.board-page){padding-top:110rem;}
	.main-scroll{width:140rem; height:50rem;}
	.main-scroll span{padding-right:19rem;}
}

@media (max-width: 860px){
	.sub01_01:not(.policy) .sub-content{padding-top:70rem;}
	.main-scroll{right:70rem; width:130rem; height:45rem; border-radius:7rem;}
}

@media (max-width: 540px){
	.sub-content,
	.sub-content:has(.board-page){padding-top:30rem;}
	.sub01_01:not(.policy) .sub-content{padding-top:30rem;}

	.main-scroll{right:40rem; width:90rem; height:30rem; bottom:-5rem; border-radius:5rem;}
	.main-scroll span{font-size:10rem; margin-bottom:5rem; padding-right:15rem;}
	.main-scroll span:before{width:10rem; height:10rem;}
	.main-scroll:after{right:-9rem;}
	.main-scroll:before,
	.main-scroll:after{bottom:4rem;}

	.sub-tit{margin-bottom:25rem;}
	.sub-tit > em{margin-bottom:6rem;}
}

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

/* 회사소개 */
.about-intro{position:relative; padding-bottom:110rem;}
.about-intro > div{gap:100rem;}
.about-intro > div .img{width:550rem; border-radius:75rem; overflow:hidden; display: flex; justify-content: center;  align-items: center;}
.about-intro > div .img img{width:auto; max-width:100%;}
.about-intro > div .txt{width:calc(100% - 650rem);}
.about-intro > div .txt > em{display:inline-block; margin-bottom:15rem; font-size:var(--font-20); font-weight: 700; line-height:1em; color: var(--c-01);}
.about-intro > div .txt h3{display:block; font-size: 40rem; font-weight: 700; line-height:1.3em; color:#111; word-break:keep-all;}
.about-intro > div .txt h3 i{color: var(--c-01);}
.about-intro > div .txt p{display:block; margin-top:20rem; font-size:var(--font-17); font-weight:300; line-height:1.7em; word-break:keep-all; }
.about-intro > div .txt p.pfirst{margin-top:25rem;}
.about-intro > div .txt .ceo{display:flex; align-items:center; gap:15rem; margin-top:40rem;}
.about-intro > div .txt .ceo em{display:inline-block; font-size:var(--font-17); font-weight:500; color:#333;}
.about-intro .symbol{position:absolute; right:5%; bottom:-1rem; z-index:-1;}
.about-feature{display:block; margin:0 28rem 35rem; padding:113rem 0 130rem; border-radius:25rem; overflow:hidden; background:url(../img/sub/bg-company.jpg)no-repeat center; background-size:cover;}
.about-feature .sub-title{display:block; text-align:center; margin-bottom:65rem;}
.about-feature .sub-title .logo{display:inline-block; margin-bottom:20rem; font-size: 20rem; font-weight: 400; line-height:1em; font-family: "Audiowide", sans-serif; color:#fff; opacity:0.2;}
.about-feature .sub-title h3{display:block; font-size:var(--font-55); font-weight: 700; line-height:1.3em; word-break:keep-all; color:#fff;}
.about-list__wrap{display: flex; white-space: nowrap; gap:50rem;}
.about-list{display: flex; flex-wrap: nowrap; width:auto; gap:40rem; animation: textLoopL 30s linear infinite;}
.about-list > li{position:relative; display:inline-block; border-radius:20rem; overflow:hidden; width:320rem; cursor:default;}
.about-list > li:nth-child(odd){animation: zigzag 6s infinite ease-in-out;}
.about-list > li:nth-child(even){animation: zigzag-reverse 6s infinite ease-in-out;}
.about-list > li .img{display: flex; justify-content: center;  align-items: center;}
.about-list > li .img img{width:100%;}
.about-list > li .txt{position:absolute; left:0; bottom:0; padding:25rem 30rem; box-sizing:border-box;}
.about-list > li .txt > h3{color:#fff; font-size:25rem; font-weight:600; line-height:1.3em;}


@keyframes textLoopL {
	0% {
	  -webkit-transform: translate3d(0, 0, 0);
	  transform: translate3d(0, 0, 0);
	}
	100% {
	  -webkit-transform: translate3d(-100%, 0, 0);
	  transform: translate3d(-100%, 0, 0);
	}
}

@keyframes zigzag {
  0%, 100% { transform: translateY(15rem); }
  50% { transform: translateY(-15rem); }
}
@keyframes zigzag-reverse {
  0%, 100% { transform: translateY(-15rem); }
  50% { transform: translateY(15rem); }
}
@keyframes zigzag2 {
  0%, 100% { transform: translateY(5rem); }
  50% { transform: translateY(-5rem); }
}
@keyframes zigzag-reverse2 {
  0%, 100% { transform: translateY(-5rem); }
  50% { transform: translateY(5rem); }
}


@media (max-width:1500px){
	.about-intro .symbol img{height:200rem;}
}
@media (max-width:1200px){
	.about-intro > div{gap:60rem;}
	.about-intro > div .img{width:500rem;}
	.about-intro > div .txt{width: calc(100% - 560rem);}
	.about-intro > div .txt p br{display:none;}
	.about-intro .symbol img{height:170rem;}
}
@media (max-width:1023px){
	/*화면 1024에 맞춰놓고 작업*/
	.about-intro > div{gap:50rem;}
	.about-intro > div .img{width:400rem; border-radius:50rem;}
	.about-intro > div .txt{width: calc(100% - 450rem);}
	.about-intro > div .txt h3{font-size:34rem;}
	.about-intro > div .txt p.pfirst{margin-top:20rem;}
	.about-intro > div .txt p{margin-top:15rem;}
	.about-intro .symbol img{height:150rem;}
	.about-intro > div .txt .ceo{margin-top:30rem;}
	.about-intro > div .txt .ceo img{height:48rem;}

	.about-feature{padding:80rem 0 100rem;}
	.about-feature .sub-title{margin-bottom:55rem;}
	.about-feature .sub-title .logo{font-size:18rem; margin-bottom:15rem;}
	.about-feature .sub-title h3{font-size:45rem;}
	.about-list__wrap{gap:30rem;}
	.about-list{gap:30rem;}
	.about-list > li{width:260rem;}
	.about-list > li .txt{padding:20rem 25rem;}
	.about-list > li .txt > h3{font-size:22rem;}
}
@media all and (max-width:860px){
	.about-intro{padding-bottom:60rem;}
	.about-intro > div{display:block;}
	.about-intro > div .img{width:100%; height:450rem; border-radius:30rem;}
	.about-intro > div .img img{width:100%;}
	.about-intro > div .txt{margin-top:35rem; width:100%;}
	.about-intro > div .txt p.pfirst br{display:block;}
	.about-intro .symbol img{height:130rem;}

	.about-feature{padding:60rem 0 80rem;}
	.about-feature .sub-title{margin-bottom:45rem;}
	.about-feature .sub-title h3{font-size:38rem;}
	.about-list{gap:25rem;}
	.about-list > li{width:220rem; border-radius:15rem;}
	.about-list > li .txt > h3{font-size:20rem;}
}

@media (max-width: 540px){
	.about-intro{padding-bottom:30rem;}
	.about-intro > div .img{height:250rem; border-radius:20rem;}
	.about-intro > div .txt{margin-top:12rem;}
	.about-intro > div .txt > em{margin-bottom:7rem;}
	.about-intro > div .txt h3{font-size:20rem;}
	.about-intro > div .txt p.pfirst{margin-top:12rem;}
	.about-intro > div .txt p{margin-top:7rem;}
	.about-intro > div .txt .ceo{margin-top:12rem; gap:7rem;}
	.about-intro > div .txt .ceo img{height:30rem;}
	.about-intro .symbol img{height:65rem;}

	.about-feature{margin:0 10rem 15rem; padding:30rem 0 40rem; border-radius:15rem;}
	.about-feature .sub-title{margin-bottom:25rem;}
	.about-feature .sub-title .logo{font-size:14rem; margin-bottom:8rem;}
	.about-feature .sub-title h3{font-size:20rem;}
	.about-list__wrap,
	.about-list{gap:10rem;}
	.about-list > li{width:125rem; border-radius:8rem;}
	.about-list > li:nth-child(odd){animation: zigzag2 6s infinite ease-in-out;}
	.about-list > li:nth-child(even){animation: zigzag-reverse2 6s infinite ease-in-out;}
	.about-list > li .txt{padding:10rem 12rem;}
	.about-list > li .txt > h3{font-size:12rem;}
}


/* 인증 */
.certify-list > div{gap:60rem;}

@media (max-width:1200px){
	.certify-list > div{gap:40rem;}
}
@media (max-width:1023px){
	.certify-list > div{gap:30rem;}
}
@media (max-width:540px){
	.certify-list > div{gap:10rem;}
}

/* 오시는 길 */
.location-page{}
.map{width:100%; height:500rem; border-radius:10rem; box-sizing:border-box; overflow:hidden;}
.map iframe{width:100%; height:100%;}
.location-txt{margin:60rem 0 0; display:flex; justify-content: space-between; gap:50rem;}
.location-txt .addr{width:calc(100% - 650rem);}
.location-txt .addr em{display:inline-block; margin-bottom:14rem; font-size:17rem; font-weight:700; color:var(--c-01); line-height:1em; text-transform:uppercase;}
.location-txt .addr h3{display:block; font-size:40rem; font-weight:700; color:#222; line-height:1.3em; word-break:keep-all;}
.location-txt .addr .btn-wrap{margin-top:50rem;}
.location-info__list{display:block; width:600rem;}
.location-info__list > li{display:flex; align-items: center; padding:10rem 30rem; margin-bottom:10rem; width:100%; height:80rem; border:1px solid #e9e9e9; box-sizing:border-box; border-radius:10rem;}
.location-info__list > li:last-child{margin:0;}
.location-info__list > li > em{display:inline-block; width:75rem; font-size:18rem; font-weight:700; color:var(--c-01);}
.location-info__list > li > span{display:inline-block; width:calc(100% - 75rem); font-size:18rem; font-weight:400; color:#333; line-height:1em; word-break:keep-all;}

@media (max-width:1300px){
	.location-txt .addr{width:calc(100% - 600rem);}
	.location-txt .addr h3{font-size:35rem;}
	.location-info__list{width:500rem;}
}
@media (max-width:860px){
	.map{height:400rem;}
	.location-txt{display:block; margin:30rem 0 0;}
	.location-txt .addr{width:100%; display:flex; justify-content: space-between; align-items: flex-end;}
	.location-txt .addr .txt{width:calc(100% - 300rem);}
	.location-txt .addr em{font-size:15rem; margin-bottom:10rem;}
	.location-txt .addr h3{font-size:30rem;}
	.location-txt .addr .btn-wrap{margin-top:20rem;}
	.location-info__list{margin:30rem 0 0; width:100%;}
	.location-info__list > li{height:70rem; padding:10rem 20rem;}
}
@media (max-width:620px){
	.map{height:300rem;}
	.location-txt .addr em{font-size:14rem;}
	.location-txt .addr h3{font-size:24rem;}
	.location-txt .addr .btn-wrap{margin-top:15rem;}
	.location-info__list{margin:20rem 0 0; }
	.location-info__list > li{height:60rem; padding:10rem 15rem; margin-bottom:7rem; border-radius:7rem;}
	.location-info__list > li > em,
	.location-info__list > li > span{font-size:16rem;}
}
@media (max-width:540px){
	.map{height:180rem;}
	.location-txt{margin:15rem 0 0;}
	.location-txt .addr .txt{width:calc(100% - 130rem);}
	.location-txt .addr em{font-size:11rem; margin-bottom:6rem;}
	.location-txt .addr h3{font-size:17rem;}
	.location-txt .addr .btn-wrap{margin-top:10rem;}
	.location-info__list{margin:15rem 0 0; }
	.location-info__list > li{height:45rem; padding:10rem 12rem; margin-bottom:5rem; border-radius:5rem;}
	.location-info__list > li > em{width:45rem;}
	.location-info__list > li > em,
	.location-info__list > li > span{font-size:13rem;}
}


/* 제품 */
.product-top{gap:80rem;}
.prodcut-img{display:flex; justify-content: center; align-items: center; width:680rem; height:600rem; border-radius: 15px; border: 1px solid #EEE; background: #F9F9F9; box-sizing:border-box;}
.prodcut-img img{width:auto; max-width:90%;}
.product-desc{width:calc(100% - 760rem);}
.product-desc .top{padding-top:50rem;}
.product-desc .top > em{display:inline-block; margin-bottom:18rem; color: var(--c-01); font-size:var(--font-17); font-weight: 700; line-height:1em; text-transform: capitalize;}
.product-desc .top > h2{display:block; font-size:var(--font-55); font-weight: 700;  line-height:1em; text-transform: uppercase; color:#222;}
.product-desc .top > p{display:block; margin-top:18rem; font-size:var(--font-18); font-weight: 500;  line-height:1em; color:#333;}
.product-desc .cont{display:block; padding-top:30rem; margin-top:25rem; border-top:1px solid #eee; box-sizing:border-box;}
.product-desc .cont [data-list] > *{margin-bottom:16rem;}
.product-desc .cont [data-list="dot"] > *{font-size:var(--font-17); font-weight: 400; color:#666; line-height:1em;}
.product-desc .cont [data-list="dot"] > *::before{top:10rem; width:3rem; height:3rem; background:#d9d9d9;}
.product-desc .cont [data-list="dot"] > li:last-child{margin:0;}
.product-desc .btn-pd{margin-top:40rem;}
.product-detail > div{margin-top:80rem;}
.product-detail .pd-title{display:block; margin-bottom:20rem; color: #111; font-size: 25rem; font-weight: 600; line-height:1em;}
.product-detail .feature-list{gap:50rem;}
.product-detail .feature-list > li{text-align:center;}
.product-detail .feature-list > li .img{display:flex; justify-content: center; align-items: center; border:1px solid #eee; box-sizing:border-box; border-radius:10rem; overflow:hidden;}
.product-detail .feature-list > li .img img{width:100%; height:100%;}
.product-detail .feature-list > li .txt{margin-top:25rem;}
.product-detail .feature-list > li .txt > h3{display:block; color:#222; font-size: 22px; font-style: normal; font-weight: 600; line-height:1em; color:#222; word-break:keep-all;}
.product-detail .feature-list > li .txt > p{display:block; margin-top:8rem; color:#666; font-size:var(--font-18); font-weight: 300; line-height:1.3em; color:#666; word-break:keep-all;}
.product-video {}
.product-video .video-container{position:relative; width:100%; height:auto; }
.product-video .video-container video{width:100%; height:100%; border-radius:10rem; overflow:hidden;}
.play-button-wrapper{position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: auto; pointer-events: none;}
#btn-play{display: flex; justify-content: center;  align-items: center; width:94rem; height:94rem; background:#fff; cursor: pointer; pointer-events: auto; fill: #FFF; border-radius:50rem; filter: drop-shadow(0 20px 50px #000);}
#btn-play img{width:100%;}
#btn-play span {display: block; position: relative; margin-left:7rem; z-index: 3; width: 0; height: 0; border-left: 26rem solid var(--c-01); border-top: 16rem solid transparent; border-bottom: 16rem solid transparent; }

@media all and (max-width:1500px){
	.product-video .video-container{height:auto; border-radius:0;}
}
@media all and (max-width:1200px){
	.product-top{gap:0;}
	.prodcut-img{width:50%; margin-right:5%;}
	.product-desc{width:45%;}
}
@media all and (max-width:1023px){
	.product-top{flex-direction: column; gap:40rem;}
	.prodcut-img{width:100%; height:auto; padding:30rem; margin:0;}
	.product-desc{width:100%;}
	.product-desc .top{padding-top:0;}
	.product-detail > div{margin-top:60rem;}
	.product-detail .feature-list{gap:30rem;}
	.product-detail .feature-list > li .txt{margin-top:20rem;}
	.product-detail .feature-list > li .txt > h3{font-size:20rem;}
	.product-detail .feature-list > li .txt > p{margin-top:6rem;}
}
@media all and (max-width:540px){
	.product-top{gap:15rem;}
	.prodcut-img{border-radius:10rem; padding:15rem;}
	.product-desc .top > em{margin-bottom:9rem;}
	.product-desc .top > h2{font-size:27rem;}
	.product-desc .top > p{margin-top:9rem;}
	.product-desc .cont{margin-top:15rem; padding-top:20rem;}
	.product-desc .cont [data-list] > *{margin-bottom:10rem;}
	.product-desc .cont [data-list="dot"] > *::before{top:8rem; width:2rem; height:2rem;}
	.product-desc .btn-pd{margin-top:25rem;}
	.product-detail > div{margin-top:30rem;}
	.product-detail .pd-title{font-size:16rem; margin-bottom:10rem;}
	.product-detail .feature-list{gap:15rem;}
	.product-detail .feature-list > li .img{border-radius:7rem;}
	.product-detail .feature-list > li .txt{margin-top:15rem;}
	.product-detail .feature-list > li .txt > h3{font-size:15rem;}
	.product-detail .feature-list > li .txt > p{margin-top:4rem;}
	#btn-play{position:relative; top:-13rem; width:75rem; height:75rem;}
	#btn-play span{margin-left:4rem; border-left: 16rem solid var(--c-01);border-top: 11rem solid transparent;border-bottom: 11rem solid transparent;}
	.product-video .video-container video{border-radius:5rem;}
}

/* 문의하기 */
.cs_text{max-width:820rem;}
.cs_text__cont{position:relative; padding-left:46rem}
.cs-page__wrap{display:flex;}
.cs_info{width:540rem; margin-right:100rem; }
.cs_info__cont {position:relative; 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; }
.cs_info__cont ul li span{font-size: 17rem; font-weight:500; }
*/
.cs_info__cont{display:block; width:100%;}
.cs_info__cont .img{width:100%; border-radius:20rem; overflow:hidden;}
.cs_info__cont .img img{width:100%; height:auto;}
.cs_info__cont ul{margin-top:28rem; border:1px solid #e9e9e9; box-sizing:border-box; border-radius:10rem; box-sizing:border-box;}
.cs_info__cont ul > li{display:flex; align-items: center; gap:10rem; padding:10rem 24rem; width:100%; height:70rem; border-bottom:1px dashed #e9e9e9; box-sizing:border-box;}
.cs_info__cont ul > li:last-child{margin:0; border:none;}
.cs_info__cont ul > li > em{display:inline-block; width:75rem; font-size:18rem; font-weight:700; color:var(--c-01);}
.cs_info__cont ul > li > span{display:inline-block; width:calc(100% - 75rem); font-size:18rem; font-weight:400; color:#333; line-height:1em; word-break:keep-all;}
.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:1023px){
	.cs_info__cont ul > li{padding:10rem 18rem;}
	.cs_info__cont ul > li > em,
	.cs_info__cont ul > li > span{font-size:17rem;}
}
@media all and (max-width:860px){
	.cs_text{width:55%;}
	.cs_info {width: calc(45% - 40rem); margin-right:40rem;}
	.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 .img{border-radius:15rem;}
	.cs_info__cont ul{margin-top:15rem;}
	.cs_info__cont ul > li{align-items: flex-start; flex-direction: column; gap:5rem;}
	.cs_info__cont ul li span{width:100%; 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;}
}