@charset "utf-8";

/* **************************************** *
 * SUB set
* @description 서브 비주얼 및 기본 레이아웃 세팅입니다.
 * **************************************** */

/* Sub title  */
#page-title{}

/* SUB VISUAL */
#sub-visual{position:relative;height:390rem;}
#sub-visual h2{font-weight:600;font-size:50rem;color:var(--c-title); font-family: var(--lang-en-title); letter-spacing: -1%; }
#sub-visual .wrap-narrow{height: 100%;}
#sub-visual .scroll-down{position: absolute; right: 0; bottom: -96rem;}

.sub-visual__desc{margin-top:24rem; color: var(--op-w80); font-weight: 300; font-family: var(--lang-en-title);}
.sub-visual__bg{position:absolute;top:0;left:0;width:100%;height:100%;overflow: hidden;border-bottom-left-radius: 15rem;border-bottom-right-radius: 15rem;}
.sub-visual__bg > i{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:50% 50%;transition:var(--trans-01);background-repeat:no-repeat;opacity: 1 !important;}
.sub-visual__inner{position: absolute; top: 210rem;}
#sub-visual .line{position: absolute; width: 100%; max-width: 1700rem; bottom: 0; border-top: 1px solid var(--op-w10); left: 50%; transform: translateX(-50%);}

body{background-color: var(--bg-default);}
body[class^="sub01_"] .sub-visual__bg > i{background-image:url(../img/sub/sub-visual01.jpg);}
body[class^="sub02_"] .sub-visual__bg > i{background-image:url(../img/sub/sub-visual02.jpg);}
body[class^="sub03_"] .sub-visual__bg > i{background-image:url(../img/sub/sub-visual03.jpg);}
body[class^="sub04_"] .sub-visual__bg > i{background-image:url(../img/sub/sub-visual04.jpg);}
body[class^="sub05_"] .sub-visual__bg > i{background-image:url(../img/sub/sub-visual05.jpg);}
body[class^="sub06_"] .sub-visual__bg > i{background-image:url(../img/sub/sub-visual06.jpg);}

/* board visual set */
/* 생성한 게시판 테이블 명 입력 */
/* 다국어시 세팅하면서 _en 붙이는 습관 들이기 */
body:is(.notice, .notice_en) .sub-visual__bg > i{background-image:url(../img/sub/sub-visual06.jpg);}

/* lnb */
#lnb{position: absolute;width: 100%;top: 510rem;z-index: 10;}
#lnb .select-link{width: auto;}
#lnb .select-link > ul{margin-top:20rem;}
#lnb .depth1 .sub-menu,
#lnb .select-link__btn{display:none;}

#lnb.lnb-select .select-link__btn{display:flex; align-items:center; font-size:20rem; color:#fff;padding-right: 70rem;}
#lnb.lnb-select  .select-link__btn::after{content:"";position:absolute;right:0;width:40rem;height:40rem;background-color:rgba(255,255,255,0.2);background-size: 8rem;background-position:50% 50%;background-image:url(../img/common/arrow-basic_w.svg);background-repeat:no-repeat;border-radius:100%;transform: rotate(90deg);}
#lnb.lnb-select .select-link__btn.on::after{transform: rotate(270deg);}
#lnb.none-select .select-link__btn{pointer-events:none; cursor:text;}
#lnb.none-select .select-link__btn::after{opacity:0;}

#lnb:not(.lnb-select) .select-link:has(.depth1){display:none; height:100rem; background:#000;}
#lnb:not(.lnb-select) .select-link > ul{opacity:1;visibility:visible;padding:0 0;background:none;flex-direction:row;flex-wrap:nowrap;flex-wrap: wrap;position: relative;}
#lnb:not(.lnb-select) .select-link > ul a{padding:0;font-size: 18rem;margin-right: 30rem; opacity: 0.5;}
#lnb:not(.lnb-select) .select-link > ul > li.on > a{opacity: 1;}
#lnb:not(.lnb-select) .select-link > ul a:hover{opacity:1;}
/*#lnb:not(.lnb-select) .select-link > ul a.on{opacity: 1;} 위의 소스 3차까지 먹이기 체크필요 */ 
#lnb:not(.lnb-select) .select-link > ul > li{width: auto;}
#lnb:not(.lnb-select):not(:has(li:nth-child(2))){display: none;} /* 2차가 하나일때 lnb 숨기기 */

#lnb.lnb-select:has(.select-link:nth-child(2)){display:flex;align-items: center;}
#lnb.lnb-select .select-link + .select-link:has(.depth2){margin-left:20rem;}
#lnb .lnb-inner{display:flex;}

a.lnb-home{display:block; width:15rem; margin-right:20rem; background:url(../img/common/ic-nav-home_w.svg) no-repeat 50% 50%; font-size:0; min-height:100%;}

/* sub nav */
#sub-nav{display: flex; align-items: center; margin-bottom: 25rem;}
#sub-nav > *{position: relative;}
#sub-nav > *:last-child::after{display: none;}
#sub-nav .sub-home{display: block;width: 14rem;height: 14rem;background:url(../img/common/ic-nav-home_w.svg) no-repeat;opacity: 0.5;}
#sub-nav span{color: var(--w); font-size: 18rem; display: block;}
#sub-nav > i{display:block; opacity:0.7; width:4rem; height:4rem; margin:0rem 10rem; background-color:#cbcbcb; border-radius:14rem;}
#sub-nav:has(.depth02:empty) .depth01::after{display: none;}
body:has(#sub-nav span:empty) #sub-nav .depth01 ~ i{display: none;}

/* snb */
#snb{display:flex;align-items:center;}
#snb li.on a{opacity:1;}
#snb li a{display:flex;justify-content:center;align-items:center;height: 50rem;box-sizing:border-box;border: 1px solid var(--g-01);font-size:18rem;font-size:var(--font-18);transition:var(--trans-01);padding: 0rem 30rem;}
#snb li:not(:last-child) a{border-right:0;}
#snb li.on a{background:var(--c-01); color:#fff; border-color:var(--c-01);}
#snb-title{font-weight:400;}
#snb li:not(.on) a:hover{color: var(--g-02);}

body:has(.cs-page),body:is(.blog,.blog_en){background-color: var(--w) !important;}
body:has(.cs-page) #sub-visual strong{font-size: 80rem;}
body:is(.blog,.blog_en) #sub-visual{height: 350rem;}
body:is(.blog,.blog_en) #sub-visual p,
body:has(.cs-page) #sub-visual p{display: none;}
body:is(.blog,.blog_en) #sub-visual .line{display: none;}
body:is(.blog,.blog_en) .line{width: 100%; border-top: 1px solid var(--op-b10); height: 1px; display: block; margin-top: 28rem;}
body:has(.cs-page) #logo a,
body:is(.blog,.blog_en)  #logo a{background-color: var(--bg-default); border-color: var(--bg-default);}
body:has(.cs-page) .gnb-container,
body:is(.blog,.blog_en) .gnb-container{background-color: var(--bg-default);}
body:has(.cs-page)  #gnb .gnb-item > a,
body:is(.blog,.blog_en) #gnb .gnb-item > a{color: #747474;}
body:is(.blog,.blog_en) a.scroll-down,
body:has(.cs-page)  a.scroll-down{display: none;}

@media all and (max-width:1023px){
	
	#lnb.lnb-select .select-link__btn{font-size:18rem;}
	#lnb{top:420rem;}
}

@media (max-width: 540px){
    body:is(.blog,.blog_en) #sub-visual,
	#sub-visual{height: 270rem;}
	#sub-visual h2{font-size: 32rem;}
    #sub-visual .line{width: calc(100% - 40rem);}
    .sub-visual__desc{margin-top: 18rem;}
	.sub-visual__inner{top: 140rem;}
	.sub-visual__title:has(.title-ko.none) .title-ko{display:block !important; margin-top:5rem; font-weight:700 !important; font-size:18rem !important;}
	.sub-visual__bg{border-bottom-left-radius:5rem; border-bottom-right-radius:5rem;}
    #sub-visual .scroll-down{bottom: 14rem;}

	#sub-nav span{font-size:13rem;}
	#sub-nav > i{margin: 0rem 6rem;}

	#lnb{top:auto; bottom:0rem; z-index:10; padding:17rem 0rem; background:var(--b-01); border-top-left-radius:5rem; border-top-right-radius:5rem;}
	#lnb.lnb-select .select-link__btn{font-size:17rem;}
	#lnb .select-link:has(.depth1){display:none;}
	#lnb .select-link:has(.depth2){margin-left:0;}
	#lnb.lnb-select:not(:has(li:nth-child(2))){display: none;}
	#lnb.lnb-select .select-link:nth-child(2){margin-left:0;}
	#lnb .lnb-inner{display:block;margin:0;width:100%; box-sizing:border-box;}
	#lnb.lnb-select{opacity:1 !important;width:calc(100% - 40px);box-sizing:border-box;margin:0 20rem;transform:none !important;}
	/* #lnb.lnb-select:has(li:nth-child(2)){display:block;}	 */
	#lnb.lnb-select .select-link + .select-link:has(.depth2){margin-left:0;}
	#lnb.lnb-select .select-link{width:100%; box-sizing:border-box; margin-left:0;}
	#lnb.lnb-select .select-link__btn{padding:0rem 20rem;font-size: 14rem;}
	#lnb.lnb-select  .select-link__btn::after{right:6rem; background-color:inherit;}
	#lnb .select-link > ul{margin-top:15rem; padding:0rem 0rem 13rem; border-radius:0; border-bottom-left-radius:5rem; border-bottom-right-radius:5rem;}
	#lnb .select-link > ul a{padding: 8rem 20rem;font-weight:200;font-size:14rem;}

	#lnb:not(.lnb-select) .select-destroy li a{white-space:nowrap;}
	#lnb:not(.lnb-select) {width:100% !important; margin:0 !important; background:none;}
	#lnb:not(.lnb-select) .select-destroy{padding-left:20rem; overflow-x:scroll;}
	#lnb:not(.lnb-select) .select-destroy li:last-child{padding-right:40rem;}
	#lnb:not(.lnb-select) .select-destroy li a{opacity:0.5; color:#fff;}
	#lnb:not(.lnb-select) .select-destroy li.on a{opacity:1;}
	#lnb:not(.lnb-select) .select-destroy li + li{margin-left: 10rem;}
	#lnb:has(.select-destroy):not(.lnb-select) .select-link__btn::after{display:none;}
}

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

[data-ver="light"] #gnb .gnb-item > a{font-weight: 400; color: #747474;}
[data-ver="light"] .lang-menu li a{border-color: var(--op-b10);color: var(--op-b40);}
[data-ver="light"] #logo a{background-color: var(--w); border:0}
[data-ver="light"] .gnb-container{background-color: var(--w);}

@media (max-width:1200px){

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

    #container:has(.board-page) + #footer{margin-top: 120rem;}
    
    [data-ver="light"] .lang-menu li a{border-color:transparent; background-color: var(--w);}
    [data-ver="light"] .gnb-mobile-btn{border-color: transparent; background-color: var(--w);}
    [data-ver="light"] .gnb-mobile-btn span{background-color: var(--c-primary);}

    [data-ver="light"]  #header:is( .on) .gnb-mobile-btn{background-color: transparent;}
    [data-ver="light"]  #header:is(.color-on, .on) .gnb-mobile-btn span{background-color: var(--c-primary);}

    body:has(.cs-page) .gnb-mobile-btn,
    body:is(.blog,.blog_en) .gnb-mobile-btn,
    body:has(.cs-page) .lang-menu li a,
    body:is(.blog, .blog_en) .lang-menu li a{background-color: var(--bg-default);}
     
    

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

    #container:has(.board-page) + #footer{margin-top: 100rem;}
}

@media (max-width: 540px){

    #container:has(.board-page) + #footer{margin-top: 80rem;}
    #container:has(.board-page)  #bo_cate a{font-size: 14rem;white-space: nowrap;}
    #container:has(.board-page)  #bo_cate ul{gap: 15rem;}
	[data-ver="light"] .lang-menu li.on a {background: var(--c-01) !important;color: #fff !important;}
}

/* **************************************** *
 * SUB common
 * **************************************** */
.sub-content{position:relative;padding-top: 160rem;}
.sub-content:has(.board-page){padding-top: 0;}
.sub #footer{margin-top: 0;}
.sub .policy #footer{margin-top: 180rem;}

.comm-title{text-align: center;}
.comm-title .caption{display: inline-flex; margin: 0 auto 18rem; align-items: center; justify-content: center; font-size:17rem; font-weight: 700; color: var(--c-secondary); padding: 10rem 16rem; border-radius: 90rem; border:1px solid var(--c-secondary);  }
.comm-title p b{color: var(--w);}
[data-ver="light"] .comm-title p b{color: var(--c-default);}


.sec-last{background-color: var(--bg-default);/* padding: var(--space160) 0 183rem; */border-radius: 90rem 90rem 0 0;min-height: 689rem;position: relative;overflow: hidden;position: relative;z-index: 2;display: flex;align-items: center;justify-content: center;}
.sec-last .btn-wrap{justify-content: center; margin-top: 84rem;}
.sec-last video{width: 100%;height: 100%;position: absolute;left: 0;top: 0;object-fit: cover;opacity: 0.3;}
.sec-last .wrap-narrow{height: 100%;display: flex;align-items: center;justify-content: center;position: relative;z-index: 1;flex-direction: column;}
.sub02_01 .sec-last video { object-fit: contain; background: #000;}

@media (max-width:1200px){

    .sub-content{padding-top: 120rem;}
    .sub .policy #footer{margin-top: 140rem;}
}

@media all and (max-width:1023px){
    .sub-content{padding-top: 120rem;}
    .sub .policy #footer{margin-top: 120rem;}
}

@media (max-width: 860px){
    .sec-last{border-radius: 60rem 60rem 0 0; min-height: 600rem;}
    .sub .policy #footer{margin-top: 100rem;}
}

@media (max-width: 540px){
	.sub-content{padding-top: 60rem;}
    .comm-title .caption{font-size: 13rem;padding: 4rem 12rem;margin: 0 auto 10rem;}

    .sec-last{padding: 100rem 0; min-height: 500rem; border-radius: 44rem 44rem 0 0;}
    .sec-last .btn-wrap{margin-top: 54rem;}
    .sub .policy #footer{margin-top: 80rem;}
    
    
}

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

/* 회사소개 */
@media (max-width:1200px){
	/*화면 1024에 맞춰놓고 작업*/
}
@media all and (max-width:1023px){
	/*화면 768에 맞춰놓고 작업*/
}

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

/* 오시는길 */
@media (max-width:1200px){
	/*화면 1024에 맞춰놓고 작업*/
}
@media all and (max-width:1023px){
	/*화면 768에 맞춰놓고 작업*/
}

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


/* product */
.sub02_01 .sub-content{padding-top: 0;}

.proudct-nav {position: sticky; top: 0; z-index: 100;}
.proudct-nav ul{background-color: var(--c-primary); gap: 35rem; display: inline-flex; padding: 20rem 50rem 23rem; border-radius: 0 0 30rem 30rem;} 
.proudct-nav ul a{color: var(--w); font-size: 16rem; opacity: 0.4;}
.proudct-nav ul a.on{opacity: 1;}


.product-compare{padding-bottom: var(--space160); margin-top: 100rem;}
.compare-choose--wrap{ margin: 106rem auto 0; }
.compare-choose__box li p{font-size: 15rem; font-weight: 300; color: var(--op-w70);}

.product-item--List{margin-top: 130rem;}

.product-item{border-radius: 90rem; background-color: #191825; padding: var(--space160) 0;}
.product-item .slide-sec .comm-title{margin-bottom: 130rem;}
.product-item .slide-sec{max-width: 342rem;  width: 100%;}
.product-item .slide-sec .swiper-controls *{font-size: 0;}

.product-item .swiper-slide{background-color: var(--w); height: 230rem;  border-radius: 22rem; overflow: hidden;}
.product-item .slide-sec .swiper-slide img{width: 100%; height: 100%; object-fit: cover;}
.product-item .swiper-controls{position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); z-index: 30; justify-content: space-between; padding: 0 14rem;}
.product-item .swiper-controls *[class^="swiper-btn--"]{width: 16rem; height: 22rem; margin: 0; background-image: url(../img/sub/arrow-nav.svg); background-size: contain; background-repeat: no-repeat;}
.product-item .swiper-controls *[class^="swiper-btn--"] i{font-size: 0;}
.product-item .swiper-controls *[class^="swiper-btn--prev"]{transform: rotate(180deg);}

.product-item__part{display: flex; gap: 50rem; align-items: center; position: relative;}
.product-item__part + .product-item__part{margin-top: 60rem;}
.product-item__info{flex: 1;}
.product-item__store{position: absolute; z-index: 2; right: 0; top: 0; display: flex; gap: 8rem;}
.product-item__store a{display: flex; transition: var(--trans-01); font-size: 0; width: 150rem; height: 54rem; border-radius: 8rem; border:1px solid var(--op-w10); align-items: center; justify-content: center;}
.product-item__store a img{max-width: 100%;}

.product-item__title *{display: block;}
.product-item__title span{font-size: 17rem; color: var(--c-primary); font-weight: 400; margin-bottom: 5rem;}
.product-item__title strong{color: var(--w); font-size: 28rem; font-family: var(--lang-en-title); font-weight: 600;}
.product-item__title p{color: var(--op-w70); font-weight: 300; margin-top: 18rem;}

.product-item__download:has(a){border-top: 1px dashed rgba(255,255,255,0.15); margin-top: 31rem; padding-top: 20rem; display: flex; width: 100%; justify-content: flex-end; gap: 8rem;} 
.product-item__download a{transition: var(--trans-01); display: inline-flex; align-items: center; padding: 8rem 16rem 8rem 20rem; border-radius: 50rem; border:1px solid var(--op-w20);gap: 14rem; }
.product-item__download a *{transition: var(--trans-01);}
.product-item__download a span{font-size: 15rem; color: var(--op-w70);}
.product-item__download a svg{opacity: .8;}
.product-item:not(:has(.swiper-slide:nth-child(2))) .swiper-controls {display: none;}

.product-overview{padding-bottom: 140rem; padding-top: 176rem;}
.product-overview__title{display: flex; justify-content: space-between; align-items: center;}
.product-overview__title .comm-title{text-align: left;}
.product-overview__content{margin-top: 100rem; }
.product-overview__part + .product-overview__part{margin-top: 100rem;}
.product-overview__part{display: flex; justify-content: space-between; gap: 100rem;}
.product-overview__tt p{color: var(--w); margin-top: 11rem; font-weight: 400;}
.product-overview__table{width: 100%; max-width: 865rem; flex: 1;}
.product-overview__table table{width: 100%; border-collapse: collapse;}
.product-overview__table thead th{background-color:rgba(59, 79, 193, 0.20); color: var(--w); font-weight: 600; padding:14rem; text-align: center;}
.product-overview__table thead th:nth-child(1){border-top-left-radius: 10rem; border-right: 1px solid var(--bg-default);}
.product-overview__table thead th:nth-child(2){border-top-right-radius: 10rem;}
.product-overview__table tbody tr > *{font-size: 17rem; color: var(--op-w70); text-align: center; padding: 18rem 12rem; border-bottom: 1px solid var(--op-w10);}
.product-overview__table tbody th{background: rgba(255, 255, 255, 0.03); color: var(--w); font-weight: 600; border-right: 1px solid var(--op-w10);}
.product-overview__content .btn-wrap{margin-top: 90rem;justify-content: center;display: none;}


@media (hover: hover) and (pointer: fine){
    .product-item__download a:hover{background-color: var(--c-primary); border-color: var(--c-primary);}  
    .product-item__download a:hover span{color: var(--w);}
    .product-item__download a:hover svg{opacity: 1;}
    .product-item__store a:hover{border-color: var(--c-primary); background-color: var(--c-primary);}
}

@media all and (max-width:1200px){
	.product-item{border-radius: 60rem;}
    .product-item__title strong{font-size: 24rem;}
    .product-item__download a span{line-height: 1.2;}
    .product-item__download a{padding: 10rem 16rem 10rem 20rem;}

    .product-overview__title p br{display: none;}
    .product-overview__title .comm-title{padding-right: 80rem;}
    .product-overview__table{max-width: 640rem;}
}
@media all and (max-width:1023px){
	.compare-choose--wrap{margin: 80rem auto 0;}

    .product-item__title span{font-size: 15rem;}
    .product-item__title strong{font-size: 22rem;}
    .product-item .slide-sec{max-width: 272rem;}
    .product-overview__part{flex-direction: column; gap: 32rem;}
    .product-overview__table{max-width: 100%;}
    .product-overview__tt strong br{display: none;}
    .product-overview__tt p{font-size: 16rem; font-weight: 300;}
    .product-overview__content{margin-top: 72rem;}

    .product-overview{padding: 120rem 0;}
    .product-overview__part + .product-overview__part{margin-top: 80rem;}
    .product-overview__title img{max-width: 240rem;}

    .product-overview__table tbody tr > *{font-size: 15rem;}
    .product-item--List{margin-top: 100rem;}

    .proudct-nav ul{gap: 28rem; padding: 16rem 34rem 19rem; border-radius: 0 0 24rem 24rem}
   
}
@media (max-width:860px){

    .product-item__part{flex-direction: column; align-items: flex-start; gap: 22rem;}
    .product-item__info{flex: none; width: 100%;}
    .product-item .swiper-slide{height: inherit;}
    .product-item .slide-sec{max-width: 100%; aspect-ratio:  16 / 9;}
    .product-item__store{right: 30rem; top: 30rem;}

    .product-overview__title img{max-width: 180rem;}
   .product-overview{padding: 100rem 0;}
   .product-item--List{margin-top: 60rem;}
    

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

     .product-item{border-radius: 40rem;}
    .compare-choose--wrap{margin: 64rem auto 0;}
    .compare-choose--wrap .mob-block{display: flex !important}
    .compare-choose{gap: 0;}
    .compare-choose__part.second{margin-top: 64rem;}

    .product-overview__tt p{font-size: 15rem;}
     .product-overview__table tbody tr > *{padding: 16rem 12rem;}
    .product-overview__title{flex-direction: column; gap: 18rem;}
    .product-overview__title .comm-title{padding-right: 0;}

    .product-overview__content{margin-top: 56rem;}
    .product-overview__table tbody tr > *{padding: 12rem 22rem; font-size: 14rem; vertical-align: middle;}

    .product-overview__part{gap: 22rems;}
    .product-overview__part + .product-overview__part{margin-top: 54rem;}
    .product-overview__tt p{margin-top: 8rem;}

    .product-overview__content .btn-wrap{margin-top: 54rem;}

    .product-overview{padding: 64rem 0;}
    .product-item--List{margin-top: 42rem;}

	.compare-choose__box li p {font-size: 13rem;}
	.product-item__store{position:relative;top:0;right:0;margin-bottom:19rem;gap:5rem;display: flex;justify-content: center;}
	.product-item .slide-sec{aspect-ratio:auto;}
	.product-item__store a{width:105rem; height:37rem;}
	.product-item__store a img{max-width:69%;}
	.product-item__title p {margin-top: 9rem;}
	.product-item__title {text-align: center;}
}



/* 솔루션 */
.solution-display--wrap{padding-bottom: 290rem;}
.solution-display{align-items: center; justify-content: space-between; margin-top: 140rem;}
.solution-display__item:not(:nth-child(2)){text-align: center;z-index: -1;position: relative;}
.solution-display__item:not(:nth-child(2)) span{display: block; margin-top: 22rem;}
.solution-display__item:nth-of-type(2){position: relative;z-index: 9;}
.solution-display__item:nth-of-type(2) svg{position: absolute;left: 52%;top: 45%;transform: translate(-50%, -50%);}
.solution-display__item [data-font-heading]{color: var(--c-primary);}
.solution-display__textBox{position: absolute;padding: 30rem;text-align: left;/* display: flex; *//* flex-direction: column; */border-radius: 20rem;border:1px solid var(--c-secondary);background-color: var(--op-b60);white-space: nowrap;}
.solution-display__textBox i{width: 32rem;height: 32rem;border-radius: 100%;background-color: rgba(84, 102, 201, 0.39);border:1px solid #5466C9;position: absolute;}
.solution-display__textBox i::after{content: ""; animation:zomm_out 2s ease 0s infinite; width: 48rem; height: 48rem; border-radius: 100%; position: absolute; background-color: var(--c-primary); opacity: 0.4; left: 50%; top: 50%; transform: translate(-50%,-50%);} 
.solution-display__textBox.first{top: 0;left: 63%;}
.solution-display__textBox.first i{left: -50rem; top: 44rem}
.solution-display__textBox.second{left: -33%;top: 59%;}
.solution-display__textBox.second i{right: 82rem;top: -50rem;}
.solution-display__textBox.third{bottom: -120rem;left: 110rem;display: flex;align-items: center;gap: 33rem;}
.solution-display__textBox strong{color: var(--w); font-size: 19rem; font-weight: 600; display: block; margin-bottom:7rem;}
.solution-display__textBox p{font-size: 16rem; color: var(--op-w70); font-weight: 300;}

.solution-device__switch{margin-top: 55rem;}
.solution-device{background-color: var(--w); border-radius: 90rem; padding: 140rem 0; position: relative; z-index: 1;}
.solution-device__desc .tab__item{display:none;}
.solution-device__desc .tab__item.active{display:block;}
.device-visual{height:100%;background-color: var(--b-01); border-radius:32rem;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;transition:var(--trans-01);}
.device-visual__media{width:100%;height:100%;object-fit:contain;position:absolute;inset:0;opacity:0;visibility:hidden;z-index:1;pointer-events:none;transition:var(--trans-01);}
.solution-device__switch.is-tab01 .device-visual__media.tab01,
.solution-device__switch.is-tab02 .device-visual__media.tab02,
.solution-device__switch.is-tab03 .device-visual__media.tab03{opacity:1;visibility:visible;z-index:3;}

.device-visual video{width:100%;height:100%;object-fit:cover;}
.solution-device__tab li{transition: var(--trans-01);}
.solution-device__tab li.active{ color: var(--w); border-color: var(--c-primary); background-color: var(--c-primary); font-weight: 400; }
.solution-device__desc .tab__item{display:none;}
.solution-device__desc .tab__item *{opacity: 0; transition: var(--trans-01);}
.solution-device__desc .tab__item.active{display:block;}
.solution-device__desc .tab__item.active *{opacity: 1; transition-delay: 0.3s;}
.solution-device__display{height:665rem;display:flex;align-items:center;justify-content:center;}
.solution-device__switch.is-tab01 .device-visual{width:30%;}
.solution-device__switch.is-tab02 .device-visual{width:80%}
.solution-device__switch.is-tab03 .device-visual{width:100%;}

.solution-device__point{margin-top: 70rem; justify-content: center; gap: 22rem;}
.solution-device__point li{display: flex; max-width: 452rem; min-height: 250rem; width: 100%; flex-direction: column; justify-content: center; align-items: center; text-align: center; background-color: var(--bg-surface); border-radius: 20rem; }
.solution-device__point li *{display: block;}
.solution-device__point li span{color:var(--c-01); font-size: 15rem; margin-bottom: 25rem; font-weight: 700; font-family: var(--lang-en-title);}
.solution-device__point li strong{color: var(--c-title); margin-bottom: 12rem;}
.solution-device__point li p{color: var(--c-default);}

.solution-device__tab{justify-content: center; gap: 8rem; margin-top: 50rem;}
.solution-device__tab li{display: flex; padding: 8rem 21rem; color: var(--c-default); border-radius: 10rem; border:1px solid var(--op-b10); font-family: var(--lang-en); font-size: 16rem;}

.solution-device__desc{margin-top: 58rem; text-align: center;}
.solution-device__desc li{display: none;}
.solution-device__desc strong{display: block; font-family: var(--lang-en-title); margin-bottom: 16rem; margin-bottom: 30rem; font-size: 32rem; font-weight: 700; color: var(--c-title);}
.solution-device__desc p{color: var(--c-default);  font-weight: 300;} 

.solution-software{background-color: var(--bg-surface);padding:230rem 0; margin-top: -90rem;}
.solution-software li{background-color: var(--w); border-radius: 30rem; display: flex; gap: 80rem; align-items: center; overflow: hidden; }
.solution-software li figure{max-width: 424rem; height: 240rem; width: 100%; background-color: #e8e8ed; background-image: url(../img/layout/logo.svg); background-size: 100rem; background-repeat: no-repeat; background-position: 50% 50%; border-radius: 30rem; overflow: hidden; }
.solution-software li figure video{width: 100%; height: 100%; object-fit: cover;}
.solution-software li + li{margin-top: 42rem;}
.solution-software__list{margin-top: 90rem;}
.solution-software__desc strong{display: block; margin-bottom: 16rem;}
.solution-software__desc p{color: var(--c-default);}

.solution-page .sec-last{margin-top: -90rem; }

/* 추가 수정사항 04-09 */
.solution-software__list video{display: none;}


@media (max-width:1480px){

     .solution-display__item{width: 24%;}
	.solution-display__item:nth-of-type(2){width: 40%;}

	.solution-display__textBox.second i{right: 62rem;}
	.solution-display__textBox.first i {left: -62rem; top: 52rem;}
}

@media  (max-width:1200px){
.solution-display__textBox.second i{right: 102rem;}
.solution-display__textBox.first i {left: -34rem;}
   .solution-display__textBox.first i {left: -56rem;  top: 43rem;}

}

@media all and (max-width:1023px){
    
    .solution-display__textBox{padding: 22rem; border-radius: 18rem;}
    .solution-display__textBox.second{left: -13%; top: 65%;}
    .solution-display__textBox.second i{right: inherit; left: 82rem;}
    .solution-display > i:nth-of-type(1){width: 30rem;}
    .solution-display > i:nth-of-type(2){width: 40rem;}
    .solution-display > i svg{width: 100%;}

    .solution-device__point li{max-width: 100%; width: 100%}
    .solution-device__display{height: 510rem;}
    .solution-device{padding: 110rem 0; border-radius: 60rem;}

    .solution-device__desc{margin-top: 46rem;}
    .solution-device__point li strong{margin-bottom: 6rem;}
    .solution-device__desc strong{margin-bottom: 20rem;}

    .solution-software li{gap: 40rem; padding-right: 40rem;}
    .solution-software li figure{max-width: 380rem;}
    .solution-software li{border-radius: 24rem;}
    .solution-software li + li{margin-top: 30rem;}
    .solution-software__list{margin-top: 60rem;}
    .solution-software{padding: 200rem 0;}

    .solution-page .sec-last{display: flex; align-items: center; justify-content: center; padding: var(--space160) 0 ;}
	.solution-display__textBox.first i {left: -49rem; top: 30rem;}

	/*화면 768에 맞춰놓고 작업*/
}
@media (max-width:860px){

     .solution-software__desc p br{display: none;}
     .solution-display__textBox{padding: 16rem; border-radius: 15rem;}
     .solution-display__textBox strong{font-size: 16rem;}
     .solution-display__textBox.third img{width: 90rem;}
     .solution-display__textBox.third{bottom: -90rem; left: 110rem;}
     .solution-display--wrap{padding-bottom: 220rem;}
     .solution-display{margin-top: 100rem;}
     .solution-display__item:nth-of-type(2) svg{width: 80rem;}
     .solution-display__textBox.first i{top: 26rem;}

	.solution-display__textBox.second i {left: 53rem;}
     
}
@media (max-width: 540px){

    .device-visual{border-radius: 18rem;}

    .solution-display{flex-direction: column; justify-content: center;}
    .solution-display__item{width: 44%;}
    .solution-display__item:nth-of-type(2){width: 80%;margin: 110rem 0;}
    .solution-display--wrap{overflow: hidden;}
    .solution-display__textBox.first{white-space: normal;width: 90%;top: -71rem;left: inherit;right: -40rem;}
    .solution-display__textBox{padding: 14rem;}
    .solution-display > i:nth-of-type(1){margin-top: 34rem;}
    .solution-display__textBox i{width: 22rem; height: 22rem;}
    .solution-display__textBox i::after{width: 32rem; height: 32rem;}
    .solution-display__textBox.second i{left: 56rem; top: -30rem;}
    .solution-display__textBox.second{top: 59%;}

    .solution-display__textBox.first i{top: 94rem;left: 72rem;}
    .solution-display__textBox.third {left: 0;width: 100%;white-space: normal;bottom: -80rem;}
    .solution-display__textBox.third img{width: 90rem;}

    .solution-display--wrap{padding-bottom: 70rem;}

    .solution-device__display{height: 310rem;}
    .solution-device__tab{flex-direction: column; display: block; text-align: center;}
    .solution-device__tab li{font-size: 14rem;  margin: 4rem; padding: 5rem 12rem; border-radius: 5rem; display: inline-flex;}
    .solution-device__point{flex-direction: column; gap: 12rem;}
    .solution-device__point li{min-height: auto; padding: 28rem 0;}
    .solution-device__point li span{margin-bottom: 14rem; font-size: 14rem;}
    .solution-device__tab{margin-top: 32rem;}

    .solution-device__point li{border-radius: 18rem;}
    .solution-device__desc strong{font-size: 25rem; margin-bottom: 12rem;}

    .solution-device{padding: 64rem 0;}
    .solution-device__switch.is-tab01 .device-visual{width: 48%;}
    .solution-software{padding: 170rem 0;}
    .solution-software li{flex-direction: column; padding-right: 0; border-radius: 18rem; gap: 0;}
    .solution-software li figure{max-width: 100%; height: inherit; aspect-ratio:  16 / 9; border-radius: 18rem;}
    .solution-software__desc{padding: 16rem 22rem 22rem 22rem}
    .solution-software__desc strong{margin-top: 7rem;}
    .solution-page .sec-last__bg{background-size: cover;}
    .solution-device{border-radius: 44rem;}
    .solution-device__point{margin-top: 40rem;}

	.solution-display__textBox p {font-size: 14rem;}
}

body.sub03_01{background-color: var(--bg-surface);}
body[data-ver="light"] #sub-visual p{color: var(--c-default); }
body[data-ver="light"] #sub-visual .line{border-color: var(--op-b10);}

/* .usercase-page{padding-bottom: 180rem;} */
.usercase-list{margin-top: 68rem;}
.usercase-list__part{background-color: var(--w); border-radius: 24rem; overflow: hidden; display: flex; align-items: center; }
.usercase-list__part + *{margin-top: 45rem;}
.usercase-list__part figure{min-width: 503rem; height: 480rem; border-radius: 24rem; overflow: hidden;}
.usercase-list__info{padding: 0 60rem 0 80rem;}
.usercase-list__title > *{display: block;}
.usercase-list__title span{color: var(--c-primary); font-weight: 500;}
.usercase-list__title strong{font-size: 35rem; font-family: var(--lang-en-title); color: var(--c-title); margin-top: 8rem;}
.usercase-list__title strong em{display: inline; font-size: 23rem;}
.usercase-list__title{margin-bottom: 70rem;}

.usercase-list__info dl + dl{margin-top: 34rem;}
.usercase-list__info dl dt{color: var(--c-title); font-size: 17rem; margin-bottom: 10rem; font-weight: 500;}
.usercase-list__info dl span{font-size: 16rem; margin-right: 6rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 90rem; padding: 5rem 16rem; border:1px solid var(--op-b20)}
.usercase-list__info dl dd{color: var(--c-default); line-height: 1.7; word-break: keep-all;}

.usercase-page > section:nth-child(1){padding-bottom: 140rem;}
.usercase-page .btn-wrap{margin-top: 60rem; justify-content: center;}
.usercase-page .sec-last{background-color:#0A0A12 }
.usercase-page .sec-last h3{color: var(--w);}
.usercase-page .sec-last p{color: var(--op-w70);}
.usercase-page .rolling-img{position: absolute; bottom: 80rem;}

@media (max-width:1480px){

}

@media all and (max-width:1200px){
	.usercase-list__part figure{width: 390rem; min-width: 390rem; height: inherit; aspect-ratio: 1 / 1;}
    .usercase-list__part{padding: 32rem;}
    .usercase-list__info{padding-right: 0; padding-left: 60rem;}
    .usercase-list__title span{font-size: 15rem;}
    .usercase-list__title strong{font-size: 30rem; }
    .usercase-list__title strong em{font-size: 18rem;}
    .usercase-list__title{margin-bottom: 44rem;text-align: left;}
    
}
@media all and (max-width:1023px){
    .usercase-page > section:nth-child(1){padding-bottom: 120rem;}
    .usercase-list__part{align-items: flex-start;}
	.usercase-list__part figure{min-width: 250rem; width: 250rem;}
    .usercase-list__info dl dd{line-height: 1.5;}
    .usercase-list__info dl span{font-size: 14rem; padding: 5rem 12rem;}
    .usercase-list__info dl + dl{margin-top: 26rem;}
    .usercase-page .rolling-img img{max-height: 40rem; max-width: 140rem;}
}
@media (max-width:860px){

    .usercase-list__part{padding: 24rem;}
    .usercase-list__part figure{min-width: 210rem; width: 250rem;}
    .usercase-list__info{padding-left: 48rem;}
    .usercase-list__part + *{margin-top: 24rem;}
    .usercase-page > section:nth-child(1){padding-bottom: 100rem;}
    .usercase-list__title strong{font-size: 26rem;}
}
@media (max-width: 540px){
    .usercase-list{margin-top: 34rem;}
    .usercase-list__part{flex-direction: column; padding: 0;  border-radius: 18rem;}
    .usercase-list__part figure{width: 100%; min-width: 100%; aspect-ratio:  16 / 10; border-radius: 18rem;}
    .usercase-list__info{padding-left: 0;padding: 20rem 20rem;text-align: center;}
    .usercase-list__title strong{font-size: 23rem;margin-top: 3rem;}
    .usercase-list__title strong em{font-size: 16rem;display: block;margin-top: 1rem;}
    .usercase-list__title span{line-height: 1.5;font-size: 14rem;width: 79%;}
    .usercase-list__info dl span{border-color: var(--op-b10);}
    .usercase-list__info dl dd{line-height: 1.6;}
    .usercase-page .btn-wrap{margin-top: 44rem;}
    .usercase-page .rolling-img img{max-width: 110rem; max-height: 36rem;}    
	.usercase-list__info dl dt {font-size: 15rem;}
	.usercase-list__info dl * { text-align: left;}
	.usercase-list__info dl span { border-color: var(--op-b20);  font-size: 13rem;}
	.usercase-list__title { margin-bottom: 25rem; text-align: left;}
}

.cs-accodion{padding-bottom: 140rem;}
.cs-inquery{background-color: #0A0A12; padding: 140rem 0; border-radius: 90rem 90rem 0 0;}
.cs-inquery .line{max-width: 1700rem; width: 100%; margin: 0 auto 72rem; display: block; border-top: 1px dashed var(--op-w10);} 
.cs-inquery .btn-wrap{margin-top: 88rem; justify-content: center;}
.cs-inquery__form{gap: 26rem;}
.cs-inquery__form figure{max-width: 662rem;/* height: 100%; */}
.cs-inquery__form figure video{width: 100%;position: sticky;top: 0;height: 442rem;}
.cs-inquery .form-area > em{display: none;}
.cs-form{flex: 1;}
.accordion-custom__cont ul{margin: 10rem 0;}
.accordion-custom{border-top: 2rem solid var(--c-title); margin-top: 50rem;}

.cs-inquery__title{position: relative; padding-bottom: 94rem;}
.cs-inquery__title ul{position: absolute; bottom: 30rem; right: 0;}
.cs-inquery__title h3{color: var(--w); font-size: 60rem;}
.cs-inquery__title h3 i{font-family: var(--lang-point); color: var(--c-secondary); font-style: italic;}

.form-area{position: relative;}
.cs-page:not(.cs-page--basic) .form-select select{color: var(--op-w50); font-size: 17rem; font-weight: 300;}
.form-area input,
.form-area textarea{color:#fff}
.form-label { position:absolute; left:20rem; top:22rem; font-size:17rem; color: var(--op-w50); pointer-events:none; transition:all .2s ease; }
.form-label .form-req { color:var(--c-primary); opacity:1; }
.form-label p{font-size: 16rem; margin-top: 11rem; font-weight: 300;}
.form-area.is-filled .form-label { opacity:0; visibility:hidden; }

@media all and (max-width:1200px){
	.cs-inquery__form figure{max-width: 520rem;}
}

@media all and (max-width:1023px){
	.accordion-custom{margin-top: 30rem;}
    .cs-accodion{padding-bottom: 100rem;}
    body:has(.cs-page) .sub-content{padding-top: 100rem;}

    .cs-inquery{padding-top: 100rem; border-radius: 60rem 60rem 0 0;}
    .cs-inquery__title h3{font-size: 50rem;}
    .cs-inquery__form figure{max-width: 420rem;}

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

    body:has(.cs-page) .sub-content{padding-top: 90rem;}
    
    .cs-accodion{padding-bottom: 80rem;}
    .cs-inquery__form{flex-direction: column;}
    .cs-inquery__form figure{max-width: 100%; width: 100%;}

    .cs-inquery .line{margin: 0 auto 42rem;}
    .cs-inquery{padding-top: 80rem;}
    .cs-inquery__form figure video{height: auto;}
    .cs-inquery{padding: 100rem 0;}
}
@media (max-width: 540px){
    body:has(.cs-page) .sub-content{padding-top: 60rem;}
    .accordion-custom{margin-top: 20rem;}
    .cs-accodion{padding-bottom: 50rem;}
    .cs-inquery{border-radius: 44rem 44rem 0 0; padding-top: 60rem;}
    .cs-inquery__title h3{font-size: 36rem;line-height: 1.2;}
    .cs-inquery__title ul{bottom: -53rem;}
	.cs-inquery__title {padding-bottom: 74rem;}

    .cs-page:not(.cs-page--basic) .form-select select{font-size: 14rem;}
    .form-label{font-size:14rem; top: 14rem; left: 12rem;}
    .form-label p{font-size: 13rem;}

    .cs-inquery .btn-wrap{margin-top: 44rem;}
    .cs-inquery{padding: 80rem 0;}

}