@charset "utf-8";
.red{color:#e13535;}
body{overflow:initial}
#header {position: fixed; background-color:#fff; border-bottom:1px solid #ddd;}
#logo a .fix { display: none;}
#logo a .stiky {display: inline-block !important; }
#header #gnb_wrap .dep1_con .dep1 { color:#000 !important}
#header .top_util a {display:  inline-block;  transition:.25s; z-index:9999; color:#222;}
#header #logo img:nth-child(1){display:none}
#header #logo img:nth-child(2){display:block}
#header.stiky #logo img:nth-child(2) {display: block;}
.all_menu_btn .menu_btn span {background: #174175;}
.all_menu_btn .menu_btn:before,
.all_menu_btn .menu_btn:after {color: #174175;}
.all_menu_btn.stiky.active .menu_btn.active span {background: #fff;}
.all_menu_btn.stiky.active .menu_btn.active:before,
.all_menu_btn.stiky.active .menu_btn.active:after {color: #fff;}
.all_menu_btn.active span {background: #fff !important;}
.all_menu_btn.active .menu_btn:before, .all_menu_btn .menu_btn:after{color:#fff !important}

#quick {bottom: auto; top: 40%; transition:.5s;}
#quick.stiky {top: auto; bottom: 50px;}

#visual{position:relative; width:100%; height:var(--sub-visual-height); border-bottom:1px solid #dfdfdf}
#visual .visual-img-con{
	position:absolute; 
	top:0px; 
	left:0px; 
	width:100%;
	height:var(--sub-visual-height);
	overflow:hidden; 
}
#visual .visual-img-inner{
	width:100%; 
	height:100%; 
	background-size:cover !important; 
	transform: scale(1.1,1.1); 
	transition:transform 5s linear;
}
#visual .visual-txt-con{position:relative; z-index:1; text-align:left; display:table; width:100%; height:100%;}
#visual .visual-txt-con .table-cell-layout {vertical-align: bottom;}
#visual .visual-txt-container{position:relative; width:100%; height:calc(100% - (var(--header-height))); display: flex; align-items:center;}
.table-layout{display:table; width:100%; height:100%; }
.table-cell-layout{display:table-cell; width:100%; height:100%; vertical-align:middle;}

#visual .visual-tit{
	
	letter-spacing:-0.03em;
	color:#000;
	text-transform:uppercase;
	margin-right:3rem;
}
#visual .visual-sub-txt{
	
	transition-delay:0.3s;
	letter-spacing:-0.025em;
	line-height:1.7em;
	color:#555555;
}
#visual .visual-sub-txt-bg{position: absolute;left: 54%;bottom: 55%;margin-bottom: -5rem;display: block;font-size: 10rem;letter-spacing:-0.055em;line-height:1.01;color:#f3f3f3;font-weight:900;white-space:nowrap;z-index:-1;}
/* SUB LAYOUT :: 상단효과 active */
#visual.active .visual-img-inner{
     transform: scale(1.0,1.0) rotate(0.002deg);
}
#visual.active .visual-tit,
#visual.active .visual-sub-txt{
	opacity:1.0;
    transform: translateY(0px);
}
#visual.active .visual-sub-txt-bg{
	opacity:1; transform:translateX(0);
}

.about-section {
  background-color: #fff;
}

.about-inner {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 100px;
}

.about-images {
  display: flex;
  gap: 24px;
  width: 55%;
}

.about-img-left,
.about-img-right {
  flex: 1;
}

.about-img-left img,
.about-img-right img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
}

.about-img-right{margin-top:100px}
.about-text {
  width: 45%;
}

.case_slide_wrap {padding: 160px 0 160px; position: relative; overflow: hidden; background:#f5f6f9}
.case_slide_wrap:after {content:''; display: block; width: 100%; height: 100%;background: url('/assets/images/common/case_slide_bg.jpg') 50% 100% no-repeat; background-size:100% auto; position: absolute; bottom: -100%; left: 0; transition:1s; z-index: -1;}
.case_slide_wrap.active:after {bottom: 0;}
.case_slide_wrap .inner {position: relative;}
.case_slide_wrap .tit_box {max-width:1430px; padding: 0 15px; margin: 0 auto; position: relative;}
.case_slide_wrap .tit_box .tit_wrap {position: absolute; top: 0; left: 15px;}
.case_slide_wrap .tit_box .tit_wrap h3 {letter-spacing: 0; text-transform:uppercase; letter-spacing:1px;}
.case_slide_wrap .case_slide {  max-width:2600px; margin: 0 auto; text-align: right; position: relative;}
.case_slide_wrap .case_slide .case_list {display: inline-block;width: 55%; }
.case_slide_wrap .case_slide .list {text-align: center; margin: 0 20px; overflow: hidden; }
.case_slide_wrap .case_slide .list_in { position:relative;}
.case_slide_wrap .case_slide .list .img {border-radius:0 0 0 0; overflow: hidden; position:relative; }


.case_slide_wrap .case_slide .list_in {position: relative; }
.case_slide_wrap .case_slide .list .img::before {position: absolute;top: 0;left: -75%;z-index: 2;display: block;content: '';width: 50%;	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg); opacity: 0;}
.case_slide_wrap .case_slide .list .img:hover::before {-webkit-animation: shine .75s;animation: shine .75s;}


.case_slide_wrap .case_slide .list .img img {transition:.5s; border-radius:30px;}
.case_slide_wrap .case_slide .list:hover .img img {transform:scale(1);}
.case_slide_wrap .case_slide .list h4 {padding:0 15px;}
/*.case_slide_wrap .case_slide .list span {display: inline-block; padding: 15px 90px; border: 1px solid #174175; border-radius:50px; transition:.1s; position: relative; overflow: hidden;}
.case_slide_wrap .case_slide .list:hover span { color: #fff; border-color: #9d7365;}
.case_slide_wrap .case_slide .list span:after {content:''; display: block; width: 0; height: 100%; background-color: #9d7365; position: absolute; top: 0; right: 0;  transition:.25s; z-index: -1;}
.case_slide_wrap .case_slide .list:hover span:after {left: 0; width: 100%;} */

.case_slide_wrap .case_slide .list .txt_wrap{display: block;position: absolute;top: 0;margin: 0 auto; padding: 70px 0 50px; width: -webkit-fill-available; color:#fff; }
.case_slide_wrap .case_slide .list .box { border:1px solid #fff; padding:8px 15px; display:inline-block; font-size:16px; margin:0 5px 10px; border-radius:50px; }


#mainIntro {position: relative;}
.main-intro-con {}
.main-intro-con .main-tit-box {text-align: center;}
/* 백그라운드 텍스트 */
.main-intro-bg-txt {position: absolute; width: 100%; left: 0; top: 50%; margin-top: 2.5rem; transform: translateY(-50%);}
.main-intro-flow-txt {display: flex; flex: 0 0 auto; white-space: nowrap;overflow: hidden; transition:all 0.3s; font-size: 22.6rem; font-weight:600; letter-spacing: -0.025em; color: rgba(28,36,62,0.3); }
.main-intro-flow-txt .flow-wrap {animation: textMainLoop 12s linear infinite; margin-right: 3rem;}
@keyframes textMainLoop {
    0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
    }
    100% {
		-webkit-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0);
    }
}
/* 카운트 */
#mainIntro{background:url('/assets/images/sub/about_01_img03bg.jpg')no-repeat;}
.main-intro-info {display: flex; padding: 5rem 0rem 0; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; }
.main-intro-info .info-box {position: relative; width: 38%; text-align: center;}
.main-intro-info .info-box:before {position: absolute; content: ''; width: 0.3rem; height: 3rem; background: rgba(255,255,255,0.5); left: -1rem; top: 50%; margin-top: -3rem;}
.main-intro-info .info-box:first-of-type,
.main-intro-info .info-box:last-of-type {31%}
.main-intro-info .info-box:last-of-type:before {left: 1rem;}
.main-intro-info .info-box:first-of-type:before {display: none;}
.main-intro-info .count-num-box{display:flex; align-items:center; justify-content: center; font-size:3rem; align-items:flex-end}
.main-intro-info .count-num-box strong {display: inline-block; line-height: 1.5em;color:#fff; font-weight:500; margin-left:10px}
.main-intro-info .count-num-item-wrap{height:2.665em; overflow:hidden;}
.main-intro-info .count-num-item-wrap .count-num-item-box{height:26.65em; }
.main-intro-info .count-num-item-wrap .count-num-item-box .count-num-item {text-align: right; line-height: 1em; font-size: 8rem; color:#fff; font-weight:500; }
.main-intro-info .info-txt {font-weight: 500; letter-spacing: -0.05em; color: rgba(255,255,255,0.8); line-height: 1.3; padding-top: 2rem;}
/* active */
.active-section .count-num-item-box{animation:count-up-ani 2s forwards;}
.active-section .count-num-item-box.down {animation:count-down-ani 2s forwards;}
@keyframes count-up-ani {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(0, -90%, 0);
    }
}
@keyframes count-down-ani {
    0% {
        transform: translate3d(0, -90%, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}  

.lt_flex{width:40%;align-content:center;}
.rt_flex{width:60%}
.rt_flex img{width:100%}
.opa{opacity:0.5}



.introduce-history-lounge__container { display: flex; justify-content: space-between; align-items: stretch; gap: 5rem; }
.introduce-history-lounge__sticky { flex: 1; }
.introduce-history-lounge__sticky-inner { position: sticky; top: 15rem; padding-bottom: 30rem; }
.introduce-history-lounge__sticky-item{ position: absolute; left: 0; top: 0; width: 100%;  }
.introduce-history-lounge__mobile { display: none; }
.introduce-history-lounge__range { display: block; color: var(--color-gray-800); margin-bottom: 5rem; }
.introduce-history-lounge__content { width: 57.34%; max-width: 100%; }
.introduce-history-lounge__list > li { display: flex; gap: 3rem; padding: 1rem 0; border-top: 1px solid #dfdfdf; }
.introduce-history-lounge__list > li > h3 { white-space: nowrap; }
.introduce-history-lounge__sublist > li { font-size: 0; padding: 2rem 0; }
.introduce-history-lounge__sublist > li > span { color: var(--color-gray-900); border-bottom: 2px solid transparent; vertical-align: middle; transition: border-color .3s; }
.introduce-history-lounge__sublist > li > .jt-icon { position: relative; margin-left: 1rem; }
.introduce-history-lounge__sublist > li > .jt-icon svg path { fill: var(--color-gray-900); }
.introduce-history-lounge__image { display: none; }
.introduce-history-lounge__year { color: var(--color-gray-900); padding-top: 2.5rem; }

.introduce-history-lounge__sticky-image { position: absolute; right: 0; top: 0; width: 20rem; height: 100%; pointer-events: none; }
.introduce-history-lounge__sticky-image-inner { position: sticky; top: 50%; padding: 3rem 0; display: flex; align-items: center; }
.introduce-history-lounge__sticky-image img { display: block; width: 100%; opacity: 0; transition: none; }


.jt-icon { display: inline-block; vertical-align: middle; }


/* categories.css */
.category-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  margin: 0 auto;
}

.category-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: calc(25% - 15px); /* 4개씩 */
  min-width: 220px;
  padding: 20px;
  border-radius: 12px;
  background-color: #f9f9f9;
  box-shadow: 0 0 0 1px #eee;
  transition: box-shadow 0.2s;
}

.category-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}



.card-icon img {
 
  object-fit: contain;
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animated-item {
  opacity: 0;
  transform: translateY(40px);
  transition: none;
}

.animated-item.animate {
  animation: fadeUp 0.6s ease-out forwards;
}

.slid_img {
  overflow: hidden;
  width: 100%;
}

.slid_img ul {
  display: flex;
  width: max-content;
  animation: slide-left 60s linear infinite;
}

.slid_img li {
  flex: 0 0 auto;
  margin-right: 20px;
}

.slid_img img {
  display: block;
  object-fit: cover;
  border-radius:20px;
}

@keyframes slide-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}


.step-box {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 80px;
  
}
.box_in{border-bottom:1px solid #dfdfdf;padding-bottom:80px;}


.step-text {
  text-align: left;
}


.process-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 140px;
  border-radius: 16px;
  background-color: #f7f7f7;
  padding: 10px;
  text-align: center;
  font-weight: 500;
  font-size: 14px;
  box-shadow: 0 0 0 1px #ddd;
}

.process-step.blue {
  background-color: #228bcc;
  color: #fff;
}

.process-step img {
  margin-bottom: 12px;
}

.arrow {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  align-self: center;
  bottom: 20px;
  margin-top: -55px;
}


.process-flow {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0px;
  margin-bottom: 30px;
}



.process-step.gray {
  background-color: #fff;
  border: 1px solid #ddd;
}

.process-step.blue {
  background-color: #2a9fc9;
  color: #fff;
  border: none;
}

.process-legend {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  font-size: 14px;
  margin-top: 20px;
}

.gray-box,
.blue-box {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: middle;
  border-radius: 4px;
}

.gray-box {
  background: #f5f5f5;
  border: 1px solid #ccc;
}

.blue-box {
  background: #2a9fc9;
}

@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

.process-flow > * {
  opacity: 0;
  transform: translateY(30px);
  transition: none;
}

.process-flow.animate > * {
  animation: fadeUp 0.6s ease-out forwards;
}

.process-flow.animate > *:nth-child(1) { animation-delay: 0.1s; }
.process-flow.animate > *:nth-child(2) { animation-delay: 0.2s; }
.process-flow.animate > *:nth-child(3) { animation-delay: 0.3s; }
.process-flow.animate > *:nth-child(4) { animation-delay: 0.4s; }
.process-flow.animate > *:nth-child(5) { animation-delay: 0.5s; }
.process-flow.animate > *:nth-child(6) { animation-delay: 0.6s; }
.process-flow.animate > *:nth-child(7) { animation-delay: 0.7s; }
.process-flow.animate > *:nth-child(8) { animation-delay: 0.8s; }
.process-flow.animate > *:nth-child(9) { animation-delay: 0.9s; }
.process-flow.animate > *:nth-child(10) { animation-delay: 1.0s; }
.process-flow.animate > *:nth-child(11) { animation-delay: 1.1s; }
.process-flow.animate > *:nth-child(12) { animation-delay: 1.2s; }
.process-flow.animate > *:nth-child(13) { animation-delay: 1.3s; }
.process-flow.animate > *:nth-child(14) { animation-delay: 1.4s; }
.process-flow.animate > *:nth-child(15) { animation-delay: 1.5s; }
.process-flow.animate > *:nth-child(16) { animation-delay: 1.6s; }
.process-flow.animate > *:nth-child(17) { animation-delay: 1.7s; }
.process-flow.animate > *:nth-child(18) { animation-delay: 1.8s; }
.process-flow.animate > *:nth-child(19) { animation-delay: 1.9s; }
.process-flow.animate > *:nth-child(20) { animation-delay: 2.0s; }


.tab_wrap {
  position: sticky;
  top: 95px; /* 상단 메뉴 높이 */
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 999;
  padding: 20px 0;
}

.sticky-tabs {
  display: inline-flex;
  gap: 10px;
  padding: 10px 20px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  background: #fff;
}

.tab {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  color: #111;
  background: transparent;
  transition: background 0.2s, color 0.2s;
}

.tab.active {
  background: #111;
  color: #fff;
}

.rt_txt{width:65%}
.lt_txt{width:35%}

.box_con{background:#fdfdfd; border:1px solid #dfdfdf; padding:100px 0;}

@keyframes fadeDown {
  0% { opacity: 0; transform: translateY(-80px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeLeft {
  0% { opacity: 0; transform: translateX(-80px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes fadeRight {
  0% { opacity: 0; transform: translateX(80px); }
  100% { opacity: 1; transform: translateX(0); }
}


.animate .ani_top {
  animation: fadeDown 0.8s ease-out forwards;
}


.breeft-product {
  display: flex;
  gap: 80px;
  align-items: flex-start;
  
}

.image-section {
  width: 50%;
  position:relative;
  overflow:hidden;
}

.main-img {
  width: 100%;
  height: auto;
  border: 1px solid #eee;
}

.thumbs {
  display: flex;
  margin-top: 10px;
}

.thumb {
  width: 25%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border 0.2s;
}

.thumb:hover {
  border-color: #000;
}

.info-section {
  width: 50%;
}

.label {
  color: #999;
}

.title {

  margin-bottom: 20px;
}

.specs {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  margin-bottom: 30px;
}

.specs li {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
  padding:22px;
}

.specs .label {
  flex: 0 0 120px;
  color: #111;
}

.specs .desc {
  flex: 1;
  color: #666;
  text-align: left;
}


.shop-btn {
  display: inline-block;
  background: #174175;
  color: #fff;
  text-align: center;
  padding: 12px 40px;
  font-weight: bold;
  border-radius: 6px;
  text-decoration: none;
  width:100%;
}

.shop-btn:hover{

  background: #111;
  color: #fff;
}

#mainAppCon .main-tit-box{text-align: center;}



.main-app-container{margin-top: 3rem;}
.main-app-wrapper{}
.main-app-container.animated .main-app-wrapper{transform: scaleX(1);}
.main-app-wrapper > .swiper-wrapper {transition-timing-function: linear !important;}
.main-app-list{display: flex;}
.main-app-item{width: 38rem;}
.main-app-item a{width: 100%; display: block; transition:all 0.4s ease-in-out; }
.main-app-img{position: relative; width: 100%; height: 0; padding-top: 100%; border-radius: 1.5rem; overflow: hidden;}
.main-app-img span{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block;}
.main-app-txt{color: #333; text-align: center;}

.main-app-item {
  transition: opacity 0.3s ease;
  opacity: 1;
}

.main-app-item.dimmed {
  opacity: 0.3;
}

.main-app-item:not(.dimmed) {
  opacity: 1 !important;
}


.section2{
	padding: 150px;
}
.section2 .formarea{}
.section2 .formarea .titwrap{
	padding-bottom: 60px;
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #000;
}
.section2 .formarea .titwrap .tit{
	font-size: 60px;
	font-weight: 600;
}
.section2 .formarea .titwrap .link a{
	margin-left: 35px;
}
.section2 .formarea .method_check{
	margin: 20px 0 50px;
}
.section2 .formarea .method_check input{
	display: none;
}
.section2 .formarea .method_check label{
	font-size: 22px;
	font-weight: 600;
	color: #999;
}
.section2 .formarea .method_check input:checked + label{
	color: #000;
	border-bottom: 1px solid #000;
}
.section2 .formarea .method_check .type1{
	position: relative;
	margin-right: 50px;
}
.section2 .formarea .method_check .type1:after{
	content: "";
	position: absolute;
	right: -25px;
	top: 6px;
	width: 1px;
	height: 14px;
	background: #ccc;
}
.section2 .formarea .formwrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.section2 .formarea .formwrap dl{
	margin-top: 50px;
}
.section2 .formarea .formwrap dl.w50{
	width: 48%;
}
.section2 .formarea .formwrap dl.w100{
	width: 100%;
}
.section2 .formarea .formwrap dl dt{
	font-family: "Lora";
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 20px;
}
.section2 .formarea .formwrap dl dd{
	font-size: 0;
}
.section2 .formarea .formwrap dl dd input {
	box-sizing: border-box;
	width: 100%;
	height: 50px;
	outline: 0;
	font-size: 18px;
	border: none;
	border-bottom: 1px solid #000;
	font-weight: 500;
	color: #000;
}
.section2 .formarea .formwrap dl dd select {
	box-sizing: border-box;
	width: 100%;
	height: 50px;
	outline: 0;
	font-size: 18px;
	border: none;
	border-bottom: 1px solid #000;
	font-weight: 500;
	color: #000;
}
.section2 .formarea .formwrap dl dd textarea{
	width: 100%;
	height: 100px;
	box-sizing: border-box;
	outline: 0;
	font-size: 18px;
	font-weight: 500;
	border: none;
	border-bottom: 1px solid #000;
	resize: none;
	overflow-y: auto;
}
.section2 .formarea .agreewrap{
	margin-top: 50px;
	display: flex;
	justify-content: space-between;
}
.section2 .formarea .agreewrap .chkarea{}
.section2 .formarea .agreewrap .chkarea input{
	display: none;
}
.section2 .formarea .agreewrap .chkarea label{
	position: relative;
	padding-left: 35px;
	font-family: "Lora";
	font-size: 18px;
	color: #000;
}
.section2 .formarea .agreewrap .chkarea label:before{
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1px solid #000;
	box-sizing: border-box;
}
.section2 .formarea .agreewrap .chkarea label:after{
	content: "";
	position: absolute;
	left: 5px;
	top: 7px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #000;
	opacity: 0;
}
.section2 .formarea .agreewrap .chkarea input:checked + label:after{
	opacity: 1;
}
.section2 .formarea .agreewrap .pop_btn{
	font-size: 18px;
	font-weight: 600;
	color: #000;
	border-bottom: 1px solid #000;
}
.section2 .formarea .btnwrap{
	margin-top: 80px;
	background:#174175;
	border-radius:20px;
	text-align: center;
}
.section2 .formarea .btnwrap:hover{
	background:#333;
}
.section2 .formarea .btnwrap button{
	border: none;
	background: none;
	padding:20px 0;
	
}
.section2 .formarea .btnwrap button span{
	font-weight: 500;
	color:#fff;

}
.popup{
	box-sizing: border-box;
	position: fixed;
	left: 50%;
	top: 50%;
	z-index: 5000;
	transform: translate(-50%, -50%);
	width: 92%;
	max-width: 1600px;
	padding: 100px;
	border-radius: 12px;
	background: #fff;
	box-sizing: border-box;
	display: none;
}
.popup .x_btn{
	position: absolute;
	right: 0;
	bottom: calc(100% + 25px);
	width: 27px;
	height: 28px;
	background: url('/assets/images/sub/x_btn.png') no-repeat center / contain;
}
.popup .conwrap{

}
.popup .conwrap .tit{
	font-size: 50px;
	font-weight: 600;
	color: #000;
	margin-bottom: 50px;
}
.popup .conwrap .sub_tit{
	font-family: "Pretendard";
	font-size: 20px;
	font-weight: 600;
	color: #000;
	padding-bottom: 30px;
	margin-bottom: 30px;
	border-bottom: 1px solid #ccc;
}
.popup .conwrap .txts{
	font-family: "Pretendard";
	font-size: 17px;
	line-height: 1.5em;
	color: #000;
	max-height: 36vh;
	overflow-y: auto;
}
.popup .conwrap b{
	font-family: "Pretendard";
	font-size: 20px;
	font-weight: 600;
	color: #000;
	display: block;
	margin-top: 50px;
}
#bgBlack {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 2000;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
}


.client{width:100%}
.client_logo ul{overflow:hidden;}
.client_logo li{width:20%; float:left; border:1px solid #dfdfdf; text-align:center; padding:20px 0 ; background:#fff;}

.notice_con ul{overflow:hidden}
.notice_con li{float:left; width:25%; padding:10px}
.notice_con li img{width:100%;}
.bg_blue{background:#ecf0f5}
.bg_gray{background:#f3f3f3}

.notice_con .txt {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notice_con .img-wrap{position:relative; overflow:hidden;}

.notice_con .img-wrap img {
  transition: transform 0.4s ease;
  display: block;
  width: 100%;
}

.notice_con .img-wrap:hover img {
  transform: scale(1.05);
}

.hardware-section {
  background: #fff;
}

.hardware-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  gap:120px;
}

.hardware-left {
  flex: 0 0 35%;
  position: sticky;
  top: 25%;
  align-self: flex-start;
}


.hardware-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.feature-box {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  border-bottom: 1px solid #eee;
  padding-bottom: 40px;
}

.feature-box:last-child {
  border-bottom: none;
}


.hardware-hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1400px;
  margin: 0 auto;
  background-color: #1f1f1f;
  color: #fff;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  padding: 100px;
}

.hero-text {
  z-index: 2;
  max-width: 60%;
  position: relative;
}




.hero-text .headline strong {
  font-weight: 600;
  display: inline;
}

.hero-image {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: url('/assets/images/sub/pr_bg1.jpg') center center / cover no-repeat;
  animation: zoomInOut 8s ease-in-out infinite;
  z-index: 1;
  border-radius: 0 20px 20px 0;
}

@keyframes zoomInOut {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}

.hero-image1{background: url('/assets/images/sub/pr_bg2.jpg');  background-position:50% 50%;}
.hero-image2{background: url('/assets/images/sub/pr_bg3.jpg');  background-position:50% 50%;}
.hero-image3{background: url('/assets/images/sub/pr_bg4.jpg');  background-position:80% 50%;}

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

}

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

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



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


@media all and (max-width:820px){
	body{overflow:hidden;}
	#quick {bottom: auto; top: 25%; }
	#quick.stiky {top: auto; bottom: 15px;}
	/*  SUB LAYOUT :: 비주얼 */
	#visual{height:19rem;}
	#visual .visual-txt-con{box-sizing:border-box;}
	#visual .visual-txt-container{flex-direction: column; align-items:flex-start; justify-content: flex-start;padding-top:30px}
	#visual .visual-tit{ margin-right:0;}
	#visual .visual-sub-txt{padding-top:1.5rem;}
	#visual .visual-sub-txt-bg{width:100%; text-align:right; font-size:3rem; left:10px}
	#visual.active .visual-sub-txt-bg{left:0;}
	/*  SUB LAYOUT ::  서브메뉴(스타일1,2,3) */
	#topMenu01,
	#topMenu02,
	#topMenu03{display:none}

	.about-inner{display:block}
	.about-images{width:100%}
	.about-text{width:100%; margin-top:50px;}

	.slick_nav  {position: static; width: 100%; padding: 0 15px; margin-top: 40px;}
	.slick_arrow .prev_btn,
	.slick_arrow .next_btn {left: 25px;}
	.slick_arrow .next_btn {left: 125px;}
	.treebg_con {padding: 140px 15px;}
	.case_slide_wrap{padding:80px 0}
	.case_slide_wrap .tit_box .tit_wrap {position: static; margin-bottom: 40px;}
	.case_slide_wrap .case_slide .case_list {width: 100%; }
	.case_slide_wrap .case_slide .list .img {border-radius:0 50px 0 0}
	.case_slide_wrap .case_slide .list .img img{border-radius:10px;}
	.company_info_bot .way_box {padding: 0 15px 0 55px;}
	.company_info_bot .way_box .subway_info:before,
	.company_info_bot .way_box .bus_info:before {width: 40px; height: 40px; background-size:cover; left: -55px;}
	.company_info_bot .way_box .parking_info:before {width: 40px; height: 40px; background-size:cover; left: -55px;}

	.case_slide_wrap .case_slide .list span{font-size:14px}

	.lt_flex{width:100%}
	.rt_flex{width:100%;margin-top:20px}

	.introduce-history-lounge__container { flex-direction: column; }
    .introduce-history-lounge__sticky { display: none; }
    .introduce-history-lounge__mobile { display: block; margin-bottom: 3rem; }
    .introduce-history-lounge__range { margin-bottom: 3rem; }
    .introduce-history-lounge__list { margin-bottom: 3rem; }
    .introduce-history-lounge__list:last-child { margin-bottom: 0; }
    .introduce-history-lounge__list > li { gap: 1.5rem; padding: 1rem 0; }
    .introduce-history-lounge__sublist { flex: 1; }
    .introduce-history-lounge__sublist > li { pointer-events: none; }
    .introduce-history-lounge__sublist > li:has(.introduce-history-lounge__image) + li { padding-top: 3rem; }
    .introduce-history-lounge__sublist > li > .jt-icon { display: none; }
    .introduce-history-lounge__content { max-width: inherit; width: 100%; }
    .introduce-history-lounge__sticky-inner { padding-bottom: 0; }
    .introduce-history-lounge__sticky-image  { display: none; }
    .introduce-history-lounge__image { display: block; width: 100%; margin-top: 2rem; }
    .introduce-history-lounge__image .jt-lazyload img { height: 100%; object-fit: cover; }
    .introduce-history-lounge__image--type-01 .jt-lazyload { width:100%; margin:0}
    .introduce-history-lounge__image--type-02 .jt-lazyload { padding-top: 100%; }
	.introduce-history-lounge__year{padding-top:2.2rem;}

	.category-cards{width:100%}
	.category-card{width:100%}
	.arrow_bt img{width:15% !important}

	.slid_img img {
		width: 120px;
	}

	.step-box{margin-top:30px}
	.box_in{padding-bottom:30px;}

	.process-flow .arrow:nth-of-type(2),
	  .process-flow .arrow:nth-of-type(4),
	  .process-flow .arrow:nth-of-type(6),
	  .process-flow .arrow:nth-of-type(8) {
		display: none;
	  }

	.process-step{margin-top:20px}

	.tab{font-size:14px}
	.lt_txt{width:100%}
	.rt_txt{width:100%}
	.box_con{padding:50px 0}

	.breeft-product{display:block}
	.image-section{width:100%}
	.info-section{width:100%; margin-top:30px}
	.specs .label {flex: 0 0 70px;}

	.section2{
	padding: 100px 0;
	}
	.section2 .formarea .agreewrap{display:block}
	.section2 .formarea{padding:0 15px}
	.section2 .formarea .titwrap{
		padding-bottom: 30px;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #000;
	}
	.section2 .formarea .titwrap .tit{
		font-size: 32px;
		font-weight: 600;
	}
	.section2 .formarea .titwrap .link a{
		margin-left: 12px;
	}
	.section2 .formarea .method_check{
		margin: 20px 0 50px;
	}
	.section2 .formarea .method_check input{
		display: none;
	}
	.section2 .formarea .method_check label{
		font-size: 15px;
		font-weight: 600;
		color: #999;
	}
	.section2 .formarea .method_check input:checked + label{
		color: #000;
		border-bottom: 1px solid #000;
	}
	.section2 .formarea .method_check .type1{
		position: relative;
		margin-right: 13px;
	}
	.section2 .formarea .method_check .type1:after{
		content: "";
		position: absolute;
		right: -9px;
		top: 3px;
		width: 1px;
		height: 14px;
		background: #ccc;
	}
	.section2 .formarea .formwrap{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.section2 .formarea .formwrap dl{
		margin-top: 30px;
	}
	.section2 .formarea .formwrap dl.w50{
		width: 100%;
	}
	.section2 .formarea .formwrap dl.w100{
		width: 100%;
	}
	.section2 .formarea .formwrap dl.blank{
		display: none;
	}
	.section2 .formarea .formwrap dl dt{
		font-family: "Lora";
		font-size: 15px;
		font-weight: 600;
		margin-bottom: 10px;
	}
	.section2 .formarea .formwrap dl dd{
		font-size: 0;
	}
	.section2 .formarea .formwrap dl dd input {
		font-family: "Lora";
		box-sizing: border-box;
		width: 100%;
		height: 35px;
		outline: 0;
		font-size: 15px;
		border: none;
		border-bottom: 1px solid #000;
		font-weight: 500;
		color: #000;
	}
	.section2 .formarea .formwrap dl dd textarea{
		font-family: "Lora";
		width: 100%;
		height: 100px;
		box-sizing: border-box;
		outline: 0;
		font-size: 15px;
		font-weight: 500;
		border: none;
		border-bottom: 1px solid #000;
		resize: none;
		overflow-y: auto;
	}
	.section2 .formarea .agreewrap{
		margin-top: 30px;
	}
	.section2 .formarea .agreewrap .chkarea{}
	.section2 .formarea .agreewrap .chkarea input{
		display: none;
	}
	.section2 .formarea .agreewrap .chkarea label{
		position: relative;
		padding-left: 25px;
		font-family: "Lora";
		font-size: 14px;
		color: #000;
	}
	.section2 .formarea .agreewrap .chkarea label:before{
		content: "";
		position: absolute;
		left: 0;
		top: 1px;
		width: 16px;
		height: 16px;
		border-radius: 50%;
		border: 1px solid #000;
		box-sizing: border-box;
	}
	.section2 .formarea .agreewrap .chkarea label:after{
		content: "";
		position: absolute;
		left: 4px;
		top: 5.5px;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: #000;
		opacity: 0;
	}
	.section2 .formarea .agreewrap .chkarea input:checked + label:after{
		opacity: 1;
	}
	.section2 .formarea .agreewrap .pop_btn{
		display: inline-block;
		font-size: 16px;
		font-weight: 700;
		color: #000;
		border-bottom: 1px solid #000;
		margin-top: 30px;
	}
	.section2 .formarea .btnwrap{
		margin-top: 80px;
		text-align: center;
	}
	.section2 .formarea .btnwrap button{
		border: none;
		background: none;
	}
	.section2 .formarea .btnwrap button img{
		width: 25px; height: 25px;
	}
	.section2 .formarea .btnwrap button span{
		font-size: 18px;
		font-weight: 500;
	}

	.popup{
	box-sizing: border-box;
	position: fixed;
	left: 50%;
	top: 50%;
	z-index: 5000;
	transform: translate(-50%, -50%);
	width: 92%;
	max-width: 1600px;
	padding: 50px 20px;
	border-radius: 12px;
	background: #fff;
	box-sizing: border-box;
	display: none;
	}
	.popup .x_btn{
		position: absolute;
		right: 0;
		bottom: calc(100% + 10px);
		width: 27px;
		height: 28px;
		background: url('/assets/images/sub/x_btn.png') no-repeat center / contain;
	}
	.popup .conwrap{

	}
	.popup .conwrap .tit{
		font-size: 32px;
		font-weight: 600;
		color: #000;
		margin-bottom: 20px;
	}
	.popup .conwrap .sub_tit{
		font-size: 18px;
		font-weight: 600;
		color: #000;
		padding-bottom: 20px;
		margin-bottom: 20px;
		border-bottom: 1px solid #ccc;
	}
	.popup .conwrap .txts{
		font-size: 15px;
		line-height: 1.5em;
		color: #000;
		max-height: 36vh;
		overflow-y: auto;
	}
	.popup .conwrap b{
		font-family: "Pretendard";
		font-size: 18px;
		font-weight: 600;
		color: #000;
		display: block;
		margin-top: 3vh;
	}
	#bgBlack {
		display: none;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 2000;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.8);
	}

	.client_logo li{width:25%}

	.notice_con li{width:100%; padding:10px; margin-top:10px}

	.hardware-left{top:0}
	.hardware-container{display:block}
	.hardware-right{gap:30px; margin-top:40px}
	.feature-box{padding-bottom:30px}

	.hardware-hero-inner{padding:30px}
	.hero-image{background-position:70% 50%}
	.hero-text{max-width:85%}

}

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


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

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


}

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

	
}



@media all and (max-width:1280px){
	
}
@media all and (max-width:800px){
	
	#mainAppCon .main-tit-box{text-align: center;}

	.main-app-container{margin-top: 2rem;}
	.main-app-wrapper{}
	.main-app-container.animated .main-app-wrapper{transform: scaleX(1);}
	.main-app-wrapper > .swiper-wrapper {transition-timing-function: linear !important;}
	.main-app-list{display: flex;}
	.main-app-item{width: 2rem;}
	.main-app-item a{width: 100%; display: block;transition-property: opacity;}
	.main-app-img{position: relative; width: 100%; height: 0; padding-top: 100%; border-radius: 1.5rem;}
	.main-app-img span{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block;}
	.main-app-txt{color: #333; text-align: center;}

	 .sticky-tabs {
		flex-wrap: wrap;
		justify-content: center;
		padding: 10px;
		border-radius: 1rem;
		width:95%
	  }

	  .tab {
		flex: 23%;
		text-align: center;
		margin: 5px 0;
		font-size:12px;
		align-content:center;

	  }
}

@media all and ( max-width: 1280px ){
	#mainIntro {padding: 18rem 0 14rem;}	
	.main-intro-con {padding-top: 0;}
}
@media all and ( max-width: 800px ){
	.main-intro-info {padding: 3rem 0 0; flex-wrap: wrap;}
	.main-intro-info .info-box {width: 100%; display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,0.1);}
	.main-intro-info .info-box:before {display: none;}
	.main-intro-info .count-num-box strong  {font-size: 2rem;}
	.main-intro-info .count-num-item-wrap {height:1.999em;}
	.main-intro-info .count-num-item-wrap .count-num-item-box {height:19.99em;}
	.main-intro-info .count-num-item-wrap .count-num-item-box .count-num-item {font-size: 6rem;}
	
}
@media all and ( max-width: 480px ){	
	.ios-os .main-intro-info .count-num-box strong {position: relative; top: -3px;}
	.ios-os .count-num-item-wrap .count-num-item-box {position: relative; top: 6.5px;}
	.ios-os .count-num-item-wrap .count-num-item-box.down .count-num-item {position: relative; top: -6.5px;}
}