/* include 공통 CSS */

/************************* 공통 시작*************************/

.inner {width: 100%; max-width:1440px; margin: 0 auto; }
.inner--fill {max-width:none; padding-right: calc((100% - 1440px) / 2); padding-left: calc((100% - 1440px) / 2);}
@media(max-width:1480px){
	.inner {padding: 0 4%;}
}

.mo-br {display: none;}
@media(max-width:500px){
	.pc-br {display: none;}	
	.mo-br {display: block;}	
}

.sub-container {min-height:5rem; padding-bottom: 12.1875em;}

.scr-ani {position: absolute; right: 0; bottom: 0; left: 0; padding-bottom: 4em; text-align: center;}
.scr-ani__desc {animation: scrAni 2s linear infinite; color: #fff; font-size: 0.875em;}
.scr-ani__icon {display: block; width: 2em; margin: 0 auto 0.75em;}
.scr-ani--diffent {mix-blend-mode: difference;}
@keyframes scrAni {
	0% {transform:translateY(-1em); opacity: 0;}
	50% {transform:translateY(0); opacity: 1;}
	100% {transform:translateY(1em); opacity: 0;}
}

.sub-page {padding-top: 10.4em;}
.sub-page__sec {padding-bottom: 18.2em;}
.sub-page__sec--flush {padding-bottom: 0;}
.sub-page__sec--bg {padding-bottom: 0; background-color: var(--bg-gray);}
.sub-page__sec--banner {margin-top: 9.375em; padding-bottom: 0;}
.sub-page__sec--sch {padding-bottom: 0;}
.sub-page__sec:last-child {padding-bottom: 0;}
.sub-page__tit {font-size: 2.625em; font-weight: 600; line-height: 1.7142; text-align: center; letter-spacing: -0.02em;}
.sub-page__tit:before {margin-right: 0.3em; content:''; display: inline-block; width: 0.75em; height: 4px; background-color: var(--main-color); vertical-align: middle;}
.sub-page__dot {width: max-content; margin: 0 auto;}
.sub-page__desc {margin-top: 1.2em; font-size: 1.25em; line-height: 1.6; text-align: center; letter-spacing: -0.02em;}
.sub-page__desc--em {margin-top: 0; font-size: 1.5em; font-weight: 500; line-height: 1;}
.sub-page__desc--dot {position: relative; margin-top: 0; padding-left: .9em; font-size: 1.5em; font-weight: 600; line-height: 1;}
.sub-page__desc--dot:before {position: absolute; top: 0.4em; left: 0; content:''; width: 0.25em; height: 0.25em; border-radius:50%; background-color: var(--main-black);}
@media(max-width:1080px){
	.sub-page__sec {padding-bottom: 14em;}
	.sub-page__tit {font-size: 2.475em;}
}
@media(max-width:500px){
	.sub-page__sec {padding-bottom: 10em;}
	.sub-page__tit {font-size: 2.25em;}
}

.sub-page__int--white {color: #fff;}

.cate-sec__cont {display: flex; justify-content: space-between; gap:2em; margin-bottom: 4.25em; padding-bottom: 5.2em; border-bottom:1px solid var(--line); }
.cate-sec__cont:last-child {margin-bottom: 0; padding-bottom: 0; border:none;}
.cate-sec__info {width: 56%;}
.cate-sec__name {font-size: 2.25em; font-weight: 600; letter-spacing: -0.02em;}
.cate-sec__grid {display: grid; grid-template-columns: repeat(2, 1fr); gap:1.25em;}
.cate-sec__frame {flex:1; border-radius: 1.875em; overflow: hidden;}
.cate-sec__frame--line {border: 1px solid var(--line);}
.cate-sec__list {margin-top: 2em; }
.cate-sec__item {display: flex; font-size: 1.25em; font-weight: 500; line-height: 1.8; color: var(--sub-black); letter-spacing: -0.02em;}
.cate-sec__idx {margin-right: 0.2em;}
.cate-sec__desc {flex:1;}
@media (max-width:768px) {
	.cate-sec__cont {display: block;}
	.cate-sec__info {width: 100%; margin-bottom: 2em;}
}

.sub-page__int + .cate-sec {margin-top: 4.7em;}

.contact-sec {min-height: 25.75em; padding: 5.6em 4.875em 2em 5.6em; background: url('./img/contact_bg.jpg') no-repeat center / cover; border-radius:0.75em; color: #fff;}
.contact-sec__logo {width: 12.5em; margin-bottom: 3.2em;}
.contact-sec__tit {font-size: 2.5em; font-weight: 600;}
.contact-sec__desc {margin-top: 1em; font-size: 1.25em; font-weight: 500;}
.contact-sec__btn {position: relative; overflow: hidden; margin-left: auto; display: flex; align-items: center; width: 9.75em; padding:0.25em; font-size: 1.25em; font-weight: 500; border-radius:3em; border:1px solid #fff; background-color: rgba(255,255,255,.12); backdrop-filter:blur(2px); transition: .3s ease-in-out all;}
.contact-sec__btn::before {content: ''; display: block; position: absolute; transform-origin: right; transform: scaleX(0); left: 0; top: 0; width: 100%; height: 100%; border-radius: 1rem; background-color: #fff; transition: .3s ease-in-out transform; z-index: -1;}
.contact-sec__btn,
.contact-sec__btn:link,
.contact-sec__btn:visited {color: inherit;}
.contact-sec__btn:after {content:''; margin-left: auto; display: block; width: 2.6em; height: 2.6em; border-radius:50%; background:url('./img/more_arr.svg') no-repeat center / cover #fff; transition: .3s ease-in-out all;}
.contact-sec__btn span {display: inline-block; padding-left: 1.95em;}
.contact-sec__ctrl { display: flex; justify-content: space-between; align-items: center; flex-wrap:wrap; gap:2em;}
.contact-sec__download {margin-bottom: 0.4em; font-size: 1.25em; font-weight: 600; letter-spacing: -0.01em;}
.contact-sec__download,
.contact-sec__download:link,
.contact-sec__download:visited {color: #fff;}
.contact-sec__icon {margin-left: 0.15em; vertical-align: -5%; width: 1.1875em;}

@media (hover:hover) {
		.contact-sec__btn:hover::before {transform-origin: left; transform: scaleX(1);}
		.contact-sec__btn:hover::after {background:url('./img/more_arr_on.svg') no-repeat center / cover #001C30;}
		.contact-sec__btn:hover {background-color: #fff; border-color: #fff; color: #001C30;}
}
@media(max-width:1080px){
	.contact-sec__ctrl {margin-top: 2em;}
}
@media (max-width:768px) {
	.contact-sec {padding: 4em 2em;}
	.contact-sec__logo {margin-bottom: 3em;}
	.contact-sec__btn {}
	/* .contact-sec__ctrl {flex-direction:column;} */
	
}


.cate-sec + .contact-sec {margin-top: 7.45em;}

.sch-area {padding-top: 10.85em;}
.sch-area__tit {font-size: 2.25em; font-weight: 600; text-align: center; text-align: center;}
.sch-area__form {margin-top: 2.3em;}

.sch-input {max-width:29.125em; margin: 0 auto; display: flex; border-bottom:2px solid #333;}
.sch-input__word {display: block; flex:1; font-size: 1.125em; height: 2.8em;}
.sch-input__word::placeholder {color: #999;}
.sch-input__icon {width: 1.4375em;}

.filter-area {margin-top: 7.75em; padding-left:0.25em; display: flex; flex-wrap: wrap; justify-content: space-between; gap:1.75em 2em;}
@media(max-width:768px){
	.filter-area {padding-left: 0; row-gap:4em;}
}

.filter-page {display: flex; align-items: center; width: 100%;}
.filter-page__main {font-size: 2.5em; display: inline-flex; align-items: center;}
.filter-page__main:after {content:''; display: inline-block; width: 0.5em; height: 0.5em; margin:0 0.3em; background:url('./img/page_arr01.svg') no-repeat center / cover;}
.filter-page__sub {font-size: 2em; display: inline-flex; align-items: center;}
.filter-page__sub:after {content:''; display: inline-block; width: 0.6em; height: 0.6em; margin-left: 0.2em; background:url('./img/page_arr02.svg') no-repeat center / cover; transition: .15s ease-in-out all;}
.filter-page__sub.on:after {transform:rotate(180deg)}
.filter-page__drop {position: relative;}
.filter-page__drop:last-child {margin-left: 1.3em;}
.filter-page__navi {position: absolute; top: 120%; left: 50%; transform:translateX(-50%); min-width: 100%; height: 0; overflow: hidden; text-align: center; box-shadow:var(--shadow-1); background-color: #fff; border-radius:0.5625em; z-index: 10;}
.filter-page__dir {margin:0.5em 0; display: inline-block; text-align:left;}
.filter-page__link {display: block; padding:0.45em 0;}
@media(max-width:500px){
	.filter-page {flex-wrap: wrap; justify-content: space-between; width: 100%; gap:1.5em;}
	.filter-page__main {width: 100%; display: flex; justify-content: space-between;}
	.filter-page__main:after {margin-right: 0; display: none;}
	.filter-page__drop {width: 100%;}
	.filter-page__drop:last-child {margin-left: 0;}
	.filter-page__sub {width: 100%; justify-content: space-between;}
}

.filter-ctrl {display: flex; align-items: center; justify-content: flex-end; width: 100%;}
.filter-ctrl__result {display: inline-flex; align-items: center; font-size: 1.125em; font-weight: 500; color: var(--light-black);}
.filter-ctrl__result:after {content:''; display: inline-block; margin:0 0.75em; width: 1px; height: 0.889em; background-color: #999;}
.filter-ctrl__refresh {display: inline-flex; align-items: center; font-size: 1.125em; font-weight: 500; color: var(--light-black);}
.filter-ctrl__refresh:before {content:''; display: inline-block; margin-right: 0.25em; width: 1.1112em; height: 1.1112em; background:url('./img/refresh_icon.svg') no-repeat center / cover;}
.filter-ctrl__btn {display: inline-flex; justify-content: center; align-items: center; width: 6.889em; height: 2.667em; margin-left: 1.3em; font-size: 1.125em; color: var(--main-black); border-radius:2.5em; background-color: #fff; box-shadow:var(--shadow-1); transition: .15s ease-in-out all;}
.filter-ctrl__btn.on {background-color: var(--main-black); color: var(--sub-color);}
.filter-ctrl__btn:before {content:''; display: inline-block; width: 1.1112em; height: 1.1112em; margin-right: 0.667em; background:url('./img/filter_icon.svg') no-repeat center / cover; filter: brightness(0); transition: .15s ease-in-out all;}
.filter-ctrl__btn.on:before {filter: brightness(1);}
@media(max-width:768px){
	.filter-ctrl__sch {position: fixed; right: 0; bottom: 0; left: 0; z-index: 150; display: flex; justify-content: center; padding:1em 0; background-color: #fff; box-shadow:var(--shadow-1); transform:translateY(100%); opacity: 0; visibility:hidden; transition: 0.2s 0s ease-in-out all}
	.filter-ctrl__sch.on {transform:translateY(0); opacity: 1; visibility:visible; transition-delay:.1s}
	.filter-ctrl__btn {margin-left: auto;}
	.filter-ctrl__result:after {margin-right: 1.5em; margin-left: 1.5em;}
	.filter-ctrl__refresh {display: inline-flex; justify-content: center; align-items: center; width: 6.889em; height: 2.667em; font-size: 1.125em; color: var(--sub-color); border-radius:2.5em; background-color: var(--main-black); box-shadow:var(--shadow-1);}	
	.filter-ctrl__refresh:before {filter:invert(1)}
}


.filter-chk__label {display: inline-flex; align-items: center; cursor:pointer; font-size: 0.875em; transition: .15s ease-in-out color;}
.filter-chk__checkbox {width: 1.5em; height: 1.5em; margin-right: 0.65em; border-radius:50%; border:1px solid var(--main-black); border-radius:50%; transition: .15s ease-in-out background-color;}
.filter-chk__hidden:checked + .filter-chk__checkbox {background: url('./img/chk_icon.svg') no-repeat center / cover var(--main-black);}
@media(hover:hover){
	.filter-chk__label:hover {color: var(--main-color);}
	.filter-chk__label:hover .filter-chk__checkbox {border-color:var(--light-black); background-color: var(--light-black);}
	.filter-chk__label:hover .filter-chk__hidden:checked + .filter-chk__checkbox {border-color:var(--main-black); background-color: var(--main-black);}
}
.filter-chk--pc {width: 100%;}
.filter-chk--pc .filter-chk__ctrl {display: none;}
.filter-chk--pc .filter-chk__container {height: 0; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);}
.filter-chk--pc .filter-chk__container.open,
.filter-chk--pc .filter-chk__container.auto {height: auto;}
.filter-chk--pc .filter-chk__list {padding: 3.1em 4.64em 3.8em; background-color: #fff; display: flex;}
.filter-chk--pc .filter-chk__item {flex:1;}
.filter-chk--pc .filter-chk__cate {font-size: 1.125em; font-weight: 500; pointer-events: none;}
.filter-chk--pc .filter-chk__fieldset {margin-top: 1.6em; padding-top: 1.1em; display: flex; flex-direction:column; row-gap: 1.45em; border-top:1px solid var(--line);}

@media(max-width:1080px){
	.filter-chk--pc .filter-chk__list {padding-right: 1.5em; padding-left: 1.5em;}
}

.filter-chk--mo {position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; display: flex; flex-direction:column; background-color: #fff; transform:translateY(-100%); opacity: 0; visibility: hidden; transition: 0.2s ease-in-out all}
.filter-chk--mo.visible {transform:translate(0); opacity: 1; visibility: visible;}
.filter-chk--mo .filter-chk__ctrl {display: flex; justify-content: space-between; align-items: center; height: 4.3738em; padding-right: 4%; padding-left: 4%; box-shadow:0 4px 12px rgba(0,0,0,0.08)}
.filter-chk--mo .filter-chk__tit {font-size: 1.5em; font-weight: 700;}
.filter-chk--mo .filter-chk__close {position: relative; width: 1.5em; height: 1.5em;}
.filter-chk--mo .filter-chk__close:before,
.filter-chk--mo .filter-chk__close:after {position: absolute; top: 50%; left: 50%; content:''; display: block; width: 100%; height: 2px;  background-color: var(--main-black);}
.filter-chk--mo .filter-chk__close:before {transform:translate(-50%, -50%) rotate(45deg)}
.filter-chk--mo .filter-chk__close:after {transform:translate(-50%, -50%) rotate(-45deg)}
.filter-chk--mo .filter-chk__list {flex:1;}
.filter-chk--mo .filter-chk__wrap {height: 0; overflow: hidden;}
.filter-chk--mo .filter-chk__cate {display: flex; justify-content: space-between; align-items: center; padding:1em 4%; font-size: 1.25em; font-weight: 500; border-bottom:1px solid var(--line); pointer-events: default; transition: .15s ease-in-out all;}
.filter-chk--mo .filter-chk__cate:after {content: '';display: inline-block;width: 0.6em;height: 0.6em;margin-left: 0.2em;background: url('./img/page_arr02.svg') no-repeat center / cover;transition: .15s ease-in-out all;}
.filter-chk--mo .filter-chk__cate.on:after {transform:rotate(180deg)}
.filter-chk--mo .filter-chk__fieldset {padding:1em 4%; display: flex; flex-wrap:wrap; gap: 1em 1.5em;}

@media(hover:hover){
	.filter-chk--mo .filter-chk__cate:hover {background-color: var(--main-color); border-color:var(--main-color); color: #fff;}
	.filter-chk--mo .filter-chk__cate:hover:after {filter:invert(1)}
}



.result-tb {margin-top: 2.875em; border-top:1px solid var(--main-color); max-height:50vh; overflow: auto;}
.result-tb__tr {display: flex; padding-right: 1.5625em; padding-left: 1.5625em; min-width:960px;}
.result-tb__tr--thead {background-color: var(--bg-gray);}
.result-tb__tr--tbody {padding-top: 1.25em; padding-bottom: 1.25em; border-bottom: 1px solid var(--line)}
.result-tb__cell {flex:1; flex-shrink:0; display: flex; align-items: center;}
.result-tb__cell--img {width: 13.8889%; flex:none; display: none;}
.result-tb__cell--th {font-size: 1.125em; font-weight: 500; min-height: 3.4445em; padding: 1em 0;}
.result-tb__cell--td {padding:1em 0; font-size: 14px;}
.result-tb__frame {width: 6.4286em; height: 6.4286em; border-radius:0.6429em; overflow: hidden;}
.result-tb__frame img {width: 85%; height: 85%; object-fit: cover;}
.result-tb__cate {display: none;}
.result-tb__cate:after {content:':'; margin: 0 0.2em;}
@media(max-width:1080px){
	.result-tb__tr {padding-right: 1em; padding-left: 1em;}
}
@media(max-width:768px){
	.result-tb {margin-top: 1em;}
	.result-tb__cell--img {width: 5.625em;}
	.result-tb__frame {width: 100%; height: auto; margin-bottom: 0.25em; aspect-ratio: 1/1;}
	.result-tb__cate {display: block;}
	.result-tb__cell--td {font-size: 13px;}
}
@media(max-width:500px){
	.result-tb__cell--img {width: 5.625em;}
}

/* .accordion {border-top:3px solid var(--main-black);}
.accordion__item {border-bottom:1px solid var(--line)}
.accordion__btn {display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 6.375em; padding:0.5em 1.25em 0.5em 0.7em; transition: .15s ease-in-out all;}
.accordion__name {font-size: 1.5em; font-weight: 700; line-height: 1.334;}
.accordion__icon {position: relative; width: 1.4375em; height: 1.4375em;}
.accordion__icon:before,
.accordion__icon:after {position: absolute; top: 50%; left: 50%; transform:translate(-50%, -50%); content:''; display: block; background-color: var(--main-black); transition: .15s ease-in-out all;}
.accordion__icon:before {width: 100%; height: 2px;}
.accordion__icon:after {width: 2px; height: 100%;}
.accordion__wrap {height: 0; overflow: hidden;}
.accordion__content {padding-bottom: 2em;}
.accordion__frame {border-radius:0.75em; overflow: hidden;}

.accordion__btn.on .accordion__icon:after {opacity: 0;}
@media(hover:hover){
	.accordion__btn:hover {color: var(--main-color);}
	.accordion__btn:hover .accordion__icon:before,
	.accordion__btn:hover .accordion__icon:after {background-color: var(--main-color);}
} */
.accordion {position: relative; border-radius: 0.15rem; box-shadow: 0px 0px 15px 15px rgb(0, 0, 0, 0.03);}
.accordion__btn {display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 8.25em; padding:0.5em 4.5625em; border-bottom:1px solid var(--line); transition: .15s ease-in-out all;}
.accordion__item:last-child .accordion__btn {border-bottom: 0;}
.accordion__name {font-size: 1.75em; font-weight: 700; line-height: 1.334;}
.accordion__icon {position: relative; width: 2.875em; height: 2.875em; border-radius: 50%; border: 1px solid var(--line); transition: .3s ease all;}
.accordion__icon:before {position: absolute; top: 50%; left: 50%; transform:translate(-50%, -50%); content:''; display: block; width: 1.25em; height: 0.6875em; background: url('./img/accordion_arrow.svg') no-repeat center / cover; transition: .15s ease-in-out all;}
.accordion__wrap {height: 0; overflow: hidden;}
.accordion__content {padding: 2.5em 5.375em; background-color: var(--bg-gray);}
.accordion__frame {border-radius:0.75em; overflow: hidden;}

.accordion__btn.on .accordion__icon:after {opacity: 0;}
.accordion__btn.on .accordion__icon {background-color: var(--sub-color); border-color: var(--sub-color);}
.accordion__btn.on .accordion__icon:before {transform: translate(-50%, -50%) rotate(180deg);}
@media(hover:hover){
	.accordion__btn:hover {color: var(--main-color);}
	.accordion__btn:hover .accordion__icon {background-color: var(--sub-color); border-color: var(--sub-color);}
}
@media (max-width:768px) {
	.accordion__btn {min-height: 7em; padding: 0.5em 2em;}
	.accordion__content {padding: 2em 3em;}
}
.sub-page__int + .accordion {margin-top: 7em;}


.dia-list__item {position: relative; padding-left: 1.55em; font-size: 1.25em; line-height: 1.6; color: var(--sub-black); letter-spacing: -0.02em;}
.dia-list__item:before {position: absolute; position: absolute; top: .7em; left: .55em; content:''; display: block; width: 0.25em; height: 0.25em; transform:rotate(45deg); background-color: var(--main-color);}

.circle-list__item {padding-bottom: 0.9375em;}
.circle-list__item:last-child {padding-bottom: 0;}
.circle-list__title {position: relative; padding-left: 1.35em; font-size: 1.25em; font-weight: 600; line-height: 1.5; letter-spacing: -0.02em;}
.circle-list__title:before {position: absolute; top: .4em; left: 0; content:''; display: block; width: 0.75em; height: 0.75em; border-radius: 50%; border: 2px solid var(--sub-color);}

.line-list {padding-left: 1.6875em;}
.line-list__item {position: relative; padding-left: 1.1111em; font-size: 1.125em;  line-height: 1.5; letter-spacing: -0.02em;}
.line-list__item:last-child {padding-bottom: 0;}
.line-list__item:before {content:'-'; position: absolute; top: 0; left: 0; display: block; }

.accordion__frame + .dia-list {margin-top: 1.9em;}

.zigzag-list {display: flex; flex-wrap: wrap; margin: 0 auto; gap:1.5em;}
.zigzag-list--3n {max-width:1074px;}
.zigzag-list__item {flex:1; border-radius:.75em; overflow: hidden;}
.zigzag-list__item:nth-child(2n) {transform:translateY(2.5em)}
.zigzag-list__link {display: block; height: 33.125em; padding:2.5em; background-position: center; background-repeat: no-repeat; background-size: cover; }
.zigzag-list__link,
.zigzag-list__link:visited,
.zigzag-list__link:link {color: #fff;}
.zigzag-list__cate {font-size: 2.25em; font-weight: 600;}
.zigzag-list__desc {margin-top: 0.3em; font-size: 1.125em; font-weight: 500;}
@media (max-width:768px) {
	.zigzag-list__item {flex: 0 0 calc((100% - 1.5em) / 2);}
	.zigzag-list__item:nth-child(2n) {transform:translateY(50%)}
	.zigzag-list__link {height: 25em;}
}
@media (max-width:500px) {
	.zigzag-list--3n .zigzag-list__item {flex: 0 0 100%;}
	.zigzag-list--3n .zigzag-list__item:nth-child(2n) {transform:translateY(0);}
}

.sub-page__int + .zigzag-list {margin-top: 6.2em;}

.box-list {display: flex; gap:1.25em;}
.box-list__item {position: relative; padding: 3.1em 2.3125em 1em; flex:1; border:1px solid #ccc; border-radius:0.75em; z-index: 0;}
.box-list__tit {padding-bottom: 1.4em; font-size: 1.5em; font-weight: 600; letter-spacing: -0.02em; border-bottom:1px solid var(--line)}
.box-list__figure {margin-top: 2.005em;}
.box-list__bg {position: absolute; bottom: 5.9em; right: 2.375em; z-index: -1;}
.box-list .dot-list {margin-top: 1.4em;}
.box-list .dot-list:nth-of-type(2) {margin-top: 7.8em;}
.box-list .dot-list__item {line-height: 1.8;}

@media(max-width:768px){
	.box-list {flex-direction:column;}
	.box-list__item {padding-right: 1.25em; padding-left: 1.25em;}
}

.product-int--top {margin-bottom: 9.4em; padding-bottom: 9.4em; border-bottom:1px solid var(--line)}

.product-int__frame {border-radius: 0.3rem; overflow: hidden; border:1px solid #ededed;  background-color: #ededed;}
.product-int__desc {margin-top: 1.6em; font-size: 1.5em; font-weight: 600; text-align: center;}
.product-int__dot {position: relative; text-align:left; padding-left: .8em; line-height: 1.4; font-weight: 500;}
.product-int__dot:before {position: absolute; top: 0.6em; left: 0; content:''; display: inline-block; width: 0.2em; height: 0.2em; background-color: #000; border-radius:50%;}
@media(max-width:1080px){
	.product-int--top {margin-bottom: 6.5em; padding-bottom: 6.5em;}

	.product-int__desc {line-height: 1.4;}
}
@media (max-width:768px) {
	.product-int--top {margin-bottom: 5em; padding-bottom: 5em;}

	.product-int__desc {font-size: 1.25em;}
	.product-int__desc--list {width: auto;}
}


.product-int--slider .swiper-container {border-radius: 0.3rem; overflow: hidden;}
.product-int--slider .swiper-pagination-fraction {width: auto; left: auto; right: 1.75em; bottom: 1.41667em; font-size: 1.5em; color: rgba(255,255,255,0.6);}
.product-int--slider .swiper-pagination-current {color: #fff;}
.product-int--slider .swiper-button-prev, 
.product-int--slider .swiper-button-next {width: 2em; height: 2em; background-color: rgba(255,255,255,0.12); border-radius: 50%; background-size: 50% 50%; transition: .3s ease all;}
.product-int--slider .swiper-button-prev {background-image: url('./img/slide_prev.svg');}
.product-int--slider .swiper-button-next {background-image: url('./img/slide_next.svg');}
@media(hover:hover){
	.product-int--slider .swiper-button-prev:hover, .product-int--slider .swiper-button-next:hover {filter: brightness(0) invert(1);}
}

.sub-page__int + .product-int {padding-top: 1.55em;}

.cont-grid {display: grid; grid-template-columns: repeat(2, 1fr); gap:7.5em 5.0625em}
.cont-grid__cell {min-width: 0; display: flex; flex-direction:column;}
.cont-grid__cell--half {max-width: 49.376%;}
.cont-grid__cell--full {grid-column:span 2}
.cont-grid__tit {margin-bottom: 1.2em; font-size: 1.5em; font-weight: 600; letter-spacing: -0.02em;}
.cont-grid__tit--green {margin-bottom: 1.25em; padding-bottom: 0.25em; color: var(--main-color); border-bottom:1px solid var(--main-color)}
.cont-grid__desc {font-size: 1.125em; letter-spacing: -0.01em; line-height: 1.5;}
.cont-grid__frame {display: flex; flex-wrap:wrap; gap:5em;}
.cont-grid__frame--auto {margin-top: auto;}
.cont-grid__frame--block {display: block;}
.cont-grid__frame--harness {gap:1em; justify-content: space-between; flex-wrap:nowrap}
.cont-grid__wrap {display: flex; justify-content: space-between;}

.cont-grid--flex {display: flex; justify-content: space-between;}
.cont-grid--flex .cont-grid__cell:nth-child(2n) {max-width: 66.1806%; flex:1; text-align:right;}
.cont-grid--flex .cont-grid__cell.cont-grid__cell--half:nth-child(2n) {max-width: 49.376%;}
.cont-grid--flex .cont-grid__cell--text:nth-child(2n) {text-align:left;}

.cont-grid--block {display: block;}
.cont-grid--block .cont-grid__cell--block {display: block; margin-bottom: 7.4em; min-width: auto;}
.cont-grid--block .cont-grid__cell--block:last-child {margin-bottom: 0;}
.cont-grid--block .cont-grid__frame--block {margin-top: 1.6em;}


.cont-grid__desc + .cont-grid__frame {margin-top: 1.25em;}
.cont-grid__desc + .cont-grid__frame--auto {margin-top: auto;}

@media(max-width:1080px){
	.cont-grid {gap:6em 3.5em;}
}
@media(max-width:768px){
	.cont-grid {gap:4.5em 2em;}
	.cont-grid--flex {display: block;}
	.cont-grid--flex .cont-grid__cell:nth-child(2n) {max-width: 100%;}
}
@media(max-width:500px){
	.cont-grid {display: flex; flex-direction:column;}
	.cont-grid--flex {display: block;}
}

.feat-list {display: flex; flex-wrap: wrap; gap: 1.25em; padding-top: 2.625em;}
.feat-list__item {flex: 0 1 calc(50% - 0.625em);padding: 2.5em 2.625em 3.375em 2.625em;border-radius: 0.12rem;background-color: var(--bg-gray);}
.feat-list--3n .feat-list__item {flex: 0 1 calc(33.333% - 0.8333em);}
.feat-list__title {margin-bottom: 1.25em; padding-bottom: 0.2916667em; border-bottom: 1px solid var(--line); font-size: 1.5em; font-weight: 600;}
.feat-list__desc {font-size: 1.125em; line-height: 1.4444em;}
@media (max-width:500px) {
	.feat-list__item {flex:none; width: 100%;}
	.feat-list--3n .feat-list__item {flex: 0 1 calc(50% - 0.625em);}
}

.dot-list__item {position: relative; padding-left: 27px; font-size: 1.125em; color: #58595B; font-weight: 500; line-height: 1.6667; letter-spacing: -0.02em;}
.dot-list__item:before {position: absolute; top: 0.8em; left: 0.65em; content:''; display: inline-block; width: 0.223em; height: 0.223em; background-color: #58595B; border-radius:50%}
.dot-list__item--green:before {background-color: var(--main-color);}
.dot-list__item small {font-size: 0.889em;}
.dot-list__item span {color: var(--main-color);}


.pop-req {position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center; padding-top: 1.6em; padding-right: 4%; padding-left: 4%; z-index: 500; opacity: 0; visibility:hidden; transition: .15s ease-in-out all;}
.pop-req.on {opacity: 1; visibility:visible;}
.pop-req__bg {position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background-color: rgba(0,0,0,0.85);}
.pop-req__close {margin-left: auto; position: relative; display: block; width: 2em; height: 2em;}
.pop-req__close:before,
.pop-req__close:after {position: absolute; content:''; top: 50%; left: 50%; width: 100%; height: 2px; background-color: var(--main-black); border-radius:4px;}
.pop-req__close:before {transform:translate(-50%, -50%) rotate(45deg);}
.pop-req__close:after {transform:translate(-50%, -50%) rotate(-45deg);}
.pop-req__container {max-width:45em; width: 100%; height:85.1852vh; background-color: #fff; border-radius:1.875em; padding:3em 3.25em; overflow: auto;}
.pop-req__tit {margin-bottom: 1.2em; font-size: 2em; font-weight: 500; text-align: center;}
.pop-req__form {padding:0 2em; width: 100%; margin: 0 auto;}
.pop-req__field {margin-bottom: 3.75em;}
.pop-req__field:last-child {margin-bottom: 0;}
.pop-req__question {margin-bottom: 0.773em; font-size: 1.125em;}
.pop-req__item {margin-bottom: 0.8125em ;}
.pop-req__label {display: inline-flex; align-items: center; cursor:pointer;}
.pop-req__label--full {width: 100%;}
.pop-req__radio {position: relative; margin-right: 0.75em; width: 1.1875em; height: 1.1875em; border-radius:50%; border:1px solid #ccc}
.pop-req__radio:after {position: absolute; top: 50%; left: 50%; transform:translate(-50%, -50%); content:''; display: none; width: 75%; height: 75%; background-color: var(--main-color); border-radius:50%;}
.pop-req__input {flex:1; display: block; width: 100%; height: 3em; padding:0 1em; border:1px solid #ccc; border-radius:3px; transition: .15s ease-in-out al;}
.pop-req__input::placeholder {color: #ccc;}
.pop-req__input:disabled {background-color: #ccc}
.pop-req__cate {width: 4em;}
.pop-req__submit {display: flex; justify-content: center; align-items: center; width: 100%; height: 3.5em; text-align: center; font-size: 1.125em; background-color: var(--main-black); color: #fff; text-align: center; border-radius:3px;}

.pop-req__hidden:checked + .pop-req__radio:after {display: block;}

@media(max-width:500px){
	.pop-req__container {padding:2em;}
}
/************************* 공통 끝 *************************/

/************************* header_inc 시작*************************/
.header__fix {position: fixed; left:0; top:0; z-index: 100;width:100%;  height: 5em; font-size: var(--fz); border-bottom: 1px solid transparent; background-color: rgba(0,0,0,0.5); --menu-height : 0; transition: 0.15s ease-in-out all;}
.header__fix:after {position: absolute; content:''; top: calc(100% + 1px); left: 0; z-index: -1; width: 100%; height: var(--menu-height); background-color: #fff; transition: 0.15s ease-in-out all;}
.header__inner {display: flex; justify-content: space-between; align-items: center; height: inherit; width: 100%; padding-right: calc((100% - 1676px) / 2 + 2px); padding-left: calc((100% - 1676px) / 2);}
.header__ctrl {display: flex; align-items: center; height: inherit;}

@media(max-width:1720px){
	.header__inner {padding-right: 4%; padding-left: 4%;}
}
.header-home__logo {width: 10em; filter: brightness(0) invert(1); transition: 0.15s ease-in-out all;}

.header-navi {position: relative; height: inherit; transition: .15s ease-in-out all;}
.header-navi__m-list {display: flex; height: inherit;}
.header-navi__m-item {position: relative; height: inherit;}
.header-navi__m-item:last-child {}
.header-navi__m-btn {display: flex; align-items: center; height: inherit;}
.header-navi__m-item {}
.header-navi__s-wrap {position: absolute; left: 0; min-width: 100%;}
.header-navi__s-list {transition: .15s ease-in-out all;}
.header-navi__s-btn {display: block;}
@media(max-width:1080px){
	.header-navi {display: none;}
}

.header-lang {position: relative; display: flex; align-items: center;  text-align:center; height: inherit; margin-left: 1.25em; transition: .15s ease-in-out all;}
.header-lang__btn{display: flex; align-items:center; font-size: 0.875em; letter-spacing: 0.02em; transition: 0.15s ease-in-out all;}
.header-lang__btn,
.header-lang__btn:link,
.header-lang__btn:visited {color: #fff;}
.header-lang__btn:before {content:''; display: block; width: 1.375em; height: 1.375em; margin-right: 0.5em; background: url('./img/earth_icon.svg') no-repeat center / cover; filter:brightness(0) invert(1); transition: .3s ease all;}
.header-lang__btn:after {content:''; display: block; width: 0.875em; height: 0.5em; margin-left: 0.6em; background: url('./img/lang_arr.svg') no-repeat center / cover; transition: .3s ease all;}
.header-lang__btn.on:after {transform: rotate(180deg);}
.header-lang__navi{position:absolute; top: 100%; left: 50%; transform:translateX(-50%); min-width:100%; height: 0; overflow: hidden;}
.header-lang__list {margin: 1em; background-color: rgba(0,0,0,0.5); border-radius: 0.5em; box-shadow:var(--shadow-1); transition: .15s ease-in-out all;}
.header-lang__link{padding:0.5em 1.5em; display: block; white-space: nowrap; transition: 0.15s ease-in-out all;}
.header-lang__link,
.header-lang__link:visited,
.header-lang__link:link {color: #fff;}
.header-lang__icon {width: 1.25em; filter:brightness(0) invert(1)}
@media(hover:hover){
	.header-lang__btn:hover {color: var(--main-color);}
	.header-lang__link:hover {color: var(--main-color);}
}
@media(max-width:1080px){
	.header-lang {display: none;}	
}

.header-drawer {display: none; position: relative; margin-left: 1.5em;}
.header-drawer__btn {position: relative; width: 20px; height: 14px; z-index: 0; transition:.15s ease-in-out all;}
.header-drawer__line {position: absolute; left: 0; width: 100%; height: 2px; background-color: #fff; transition:.15s ease-in-out all;}
.header-drawer__line--top {top: 0;}
.header-drawer__line--middle {top: 50%; transform:translateY(-50%)}
.header-drawer__line--bottom {bottom: 0;}
@media(hover:hover){
	.header-drawer__btn:hover .header-drawer__line--top{left: -0.25em;}
	.header-drawer__btn:hover .header-drawer__line--middle{left: 0.25em;}
	.header-drawer__btn:hover .header-drawer__line--bottom{left: -0.125em;}
}
@media(max-width:1080px){	
	.header-drawer {display:block;}
}
.header__fix.on  {background-color: #fff; border-bottom: 1px solid var(--line);}
.header__fix.on .header-home__logo {filter: brightness(1) invert(0);}
.header__fix.on .header-lang__btn:before {filter: brightness(0) invert(0);}
.header__fix.on .header-lang__btn:after {filter: brightness(0) invert(0);}
.header__fix.enter {background-color: #fff; border-bottom: 1px solid var(--line);}
.header__fix.enter .header-home__logo {filter: brightness(1) invert(0);}
.header__fix.enter .header-navi__m-btn {color: var(--main-black);}
.header__fix.enter .header-navi__m-btn--crt {color: var(--main-color);}
.header__fix.enter .header-navi__s-list {}
.header__fix.enter .header-navi__s-btn {color: var(--main-black);}
.header__fix.enter .header-navi__s-btn--crt {color: var(--main-color);}
.header__fix.enter .header-navi__c-btn {color: var(--main-gray);}
.header__fix.enter .header-navi__c-btn--crt {color: var(--main-color);}
.header__fix.enter .header-lang__btn {color: var(--main-black);}
.header__fix.enter .header-lang__btn.on {color: var(--main-color);}
.header__fix.enter .header-lang__list {background-color: #fff;}
.header__fix.enter .header-lang__link {color: var(--main-black);}
.header__fix.enter .header-lang__btn:before {filter: brightness(0) invert(0);}
.header__fix.enter .header-lang__btn:after {filter: brightness(0) invert(0);}
.header__fix.enter .header-login__link {color: var(--main-black);}
.header__fix.enter .header-drawer__line {background-color: var(--main-black);}
@media(hover:hover){
	.header__fix.enter .header-lang__link:hover {color: var(--main-color);}
}

/************************* header_inc 끝*************************/

/************************* sub-dropdown 시작 *************************/
.drop-menu {border-bottom:1px solid var(--main-gray);}
.drop-menu__inner {display: flex; border-right:1px solid var(--main-gray); border-left:1px solid var(--main-gray);}
.drop-menu__home {display: inline-flex; min-width: 3em; min-height: 3em; height: inherit; justify-content: center; align-items: center;}
.drop-menu__icon {width: 1.75em;}
.drop-menu__wrap {position: relative; z-index: 0; border-left:1px solid var(--main-gray);}
.drop-menu__wrap:last-child {border-right:1px solid var(--main-gray); }
.drop-menu__btn {display: flex; justify-content: space-between; align-items: center; min-width:15em; height: 100%; padding:0 0.15rem; font-weight: 500; transition:.15s ease-in-out all;}
.drop-menu__tit {display: block; font-size: 1.125em;}
.drop-menu__arr {margin-left: 1.5em; width: 0.75em; transition:.15s ease-in-out all;}
.drop-menu__navi {position: absolute; top: 100%; left: -1px; z-index: 10; width:calc(100% + 2px);  height: 0; overflow: hidden;}
.drop-menu__list {background-color: #fff; border:1px solid var(--main-gray);}
.drop-menu__link {display: block; padding:0.5em 0.15rem; transition:.15s ease-in-out all;}
@media(hover:hover){
	.drop-menu__link:hover {background-color: var(--main-color); color: #fff;}
}

.drop-menu__btn.on {background-color: var(--main-color); color: #fff;}
.drop-menu__btn.on .drop-menu__arr {filter:brightness(0) invert(1); transform:rotate(180deg);}

/************************* dropdown 끝 *************************/
/************************* tabmenu 시작 *************************/
.tab-menu {position: sticky; top: 5em; display: flex; justify-content: center; flex-wrap: wrap; background-color: var(--bg); padding:1.6563em 4%; z-index: 9;}
.tab-menu__page {position: absolute; left: calc((100% - 1680px) / 2); top: 50%; transform: translateY(-50%); font-weight: 500; color: rgba(255,255,255,0.6);}
.tab-menu__page--crt {color: #fff;}
.tab-menu__navibox {display: flex;}
.tab-menu__depth1 {margin-right: 1em; padding:0.2em 0.4395em; font-size: 1.25em; font-weight: 500; border:1px solid #fff; border-radius:0.15em; color: #fff;}
.tab-menu__list {display: flex; justify-content: center; height: 100%;}
.tab-menu__item {margin: 0 0.65em; font-size: 1.125em;}
.tab-menu__btn {display: flex; justify-content: center; align-items: center; text-align: center;  padding-right:.45em; padding-left: 0.45em; height: 100%; border-radius:0.1667em; border:1px solid transparent; transition: .15s ease-in-out all;}
.tab-menu__btn,
.tab-menu__btn:link,
.tab-menu__btn:visited {color: #fff;}
.tab-menu__btn--crt,
.tab-menu__btn--crt:link,
.tab-menu__btn--crt:visited {color: var(--main-color);}
@media (max-width:1720px) {
	.tab-menu__page {left: 4%;}
}
@media (max-width:768px) {
	.tab-menu__page {position: static; transform: translateY(0%); width: 100%; padding-bottom: 1em; text-align: center;}
}
@media(hover:hover){
	.tab-menu__btn:hover {color: var(--main-color);}
}
/************************* sub-tabmenu 끝 *************************/

/************************* depth3 시작 *************************/
.depth3__list {display: flex; flex-flow: row wrap; display: none;}
.depth3__item {flex:1;}
.depth3__item:last-child {border:0;}
.depth3__btn {padding:1.5em 0.75em; width: 100%; height: 100%; display: flex; align-items: center;justify-content: center; border-bottom:2px solid var(--main-gray); transition:.15s ease all;}
.depth3__btn--crt {border-color:var(--main-color);}
@media(hover:hover){
	.depth3__btn:hover {border-color:var(--main-color);}
}
/************************* depth3 끝 *************************/


/************************* footer_inc 시작 *************************/
.footer {position: relative; font-size: var(--fz); background-color: #171620; color: #fff;} 
.footer__inner {max-width: 1680px; margin: 0 auto;}

.footer__box {
  position: fixed;
  left: calc((100% - 1676px) / 2 + 2px);
  bottom: 25%;
  z-index: 10;
  font-size: var(--fz);
}
.footer__req {margin-bottom: 0.5em; display: block;}
.footer__req:last-of-type {margin-bottom: 0;}

.footer__req-txt {
  position: relative;
  padding: 0.5em 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 2px solid var(--main-black);
  font-weight: 700;
  overflow: hidden;
  color: #000;
  background-color: #fff;
  transition: .15s ease-in-out all;
}

/* 빛줄기 기본 */
.footer__req-txt::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(0, 150, 172, 0.15) 15%,
    rgba(0, 150, 172, 0.3) 25%,
    rgba(255, 255, 255, 0.5) 40%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0.5) 60%,
    rgba(0, 150, 172, 0.3) 75%,
    rgba(0, 150, 172, 0.15) 85%,
    transparent 100%
  );
  transform: skewX(-20deg);
  animation: shimmer 2.5s infinite;
  pointer-events: none;
}

/* hover 효과: 밝기 증가, 컬러 강조, 추가 광채 */
.footer__req:hover .footer__req-txt {
  background-color: #0096AC;
  border-color: #fff;
  color: #fff;
  box-shadow: 0 0 15px rgba(0, 150, 172, 0.6), 0 0 30px rgba(255, 255, 255, 0.3);
}

/* hover 시 빛줄기 더 강하게 */
.footer__req:hover .footer__req-txt::before {
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(0, 150, 172, 0.3) 20%,
    rgba(255, 255, 255, 0.9) 50%,
    rgba(0, 150, 172, 0.3) 80%,
    transparent 100%
  );
  animation-duration: 1.2s;
}

@keyframes shimmer {
  0% {
    left: -75%;
  }
  100% {
    left: 125%;
  }
}

@media(max-width:1720px){
	.footer__box {left: 4%;}
}

.footer-top {padding: 4.625em 0 4.75em;}
.footer-bottom {padding: 3.125em 0 4em; border-top: 1px solid #5f5f5f;}
.footer__sec {}

.go-top {position: absolute; right: 2.5em; top: 3.75em;}
.go-top__btn {display: inline-flex; flex-direction: column; justify-content: center; align-items: center; width: 2.9375em; height: 2.9375em; border-radius: 50%; background-color: var(--sub-color); color: var(--main-black);}
.go-top__icon {width: 0.6875em; height: 0.75em;}
@media (max-width:1720px) {
	.footer__inner {padding: 0 4%;}
}


.footer-home {display: inline-block;}
.footer-home__logo {width: 16.25em;}

.footer-info {display: flex; margin:3.125em 0 0; gap: 7em; width: 100%;}
.footer-info__item {}
.footer-info__info {display: flex; align-items: center; margin-bottom: 1em; font-size: 0.875em;}
.footer-info__info:last-child {margin-bottom: 0;}
/* .footer-info__info:after {margin:0 1em; content:''; display: inline-block; width: 1px; height: 0.8em; background-color: var(--main-gray); opacity: 0.75;}
.footer-info__info:last-child:after {display: none;} */
.footer-info__cate {display: block; margin-right: 0.8em;}
.footer-info__desc {color: var(--main-gray);}
.footer-info__desc--link {transition:.15s ease all;}
.footer-info__desc--link,
.footer-info__desc--link:visited,
.footer-info__desc--link:link {color: var(--main-gray);}
@media(max-width:500px){
	.footer-info {gap: 1.5em;}
	.footer-info__item {margin-bottom: 0;}
	.footer-info__detail {width: 100%; margin-right: 0;}
}
@media(hover:hover){
	.footer-info__desc--link:hover {color: var(--main-color);}
}

.family {position: relative; z-index: 0;}
.family__btn {padding:0.5em 1em; display: inline-flex; justify-content:space-between; align-items:center; font-weight: 500; border:1px solid #fff; transition:.15s ease all;}
.family__btn,
.family__btn:visited,
.family__btn:link {color: inherit;}
.family__arrow {margin-left: 1em; transition:.15s ease all;}
.family__navi {position: absolute; top: 100%; left: 50%; transform:translateX(-50%); min-width: 100%; text-align: left; background-color: var(--main-black); height: 0; overflow: hidden; z-index: 1;}
.family__list {padding:1em 0; border:1px solid #fff; border-top:none;}
.family__link {padding:0.5em 0.25em; display: block; white-space: nowrap; text-align: center; transition:.15s ease all;}
.family__link,
.family__link:visited,
.family__link:link {color: inherit;}
@media(hover:hover){
	.family__btn:hover {background-color: var(--main-color);}
	.family__link:hover {color: var(--main-color);}
}

.family__btn.on {background-color: var(--main-color); color: #fff;}
.family__btn.on .family__arrow {transform:rotate(-180deg);}

.footer-navi__link {margin-right: 1em; font-size: 0.875em; font-weight: 500; transition:.15s ease all;}
.footer-navi__link,
.footer-navi__link:visited,
.footer-navi__link:link {color: inherit;}
.footer-navi__link:last-of-type {margin-right: 0;}
@media(hover:hover){
	.footer-navi__link:hover {color: var(--main-color);}
}

.footer-adm {display: flex; flex-flow: row wrap; gap: 1em; margin-top: 0.875em;}
.footer-adm__cprt {color: #626262;}
.footer-adm__nav {display: flex;}
.footer-adm__link {margin-right: 1em; display: inline-block; transition:.15s ease all;}
.footer-adm__link,
.footer-adm__link:visited,
.footer-adm__link:link {color: var(--main-gray);}
.footer-adm__link:last-of-type {margin-right: 0;}
@media(max-width:500px){
	.footer-adm__nav {width: 100%;}
}
@media(hover:hover){
	.footer-adm__link:hover {color: var(--main-color);}
}

/************************* footer_inc 끝 *************************/


/************************* split-text *************************/
.split-text__word {font-size: inherit;}
.split-text__letter {display: inline-block; font-size: inherit;}
.split-text--no-delay .split-text__letter {transition-delay:0s !important; animation-delay:0s !important;}