@charset "utf-8";

/* sub */
main.sub .page-top {padding-top: calc(var(--headerH) + 80px); color: #fff; padding-bottom: var(--gap100);}
main.sub .page-top .sub-tit {font-weight: 500; line-height: 1.5; font-size: clamp(16px,2.6vw, 50px); }
main.sub .page-top .sub-tit .mobr {display: none;}
main.sub .page-top h1 {font-weight: 700; line-height: 1.1; font-size: clamp(45px, 12vw, 230px);}
main.sub .page-top .text-over {transition: transform 0.8s;}

main.sub .inner {width: 90%; margin: auto;}
main.sub .inner2 { max-width: 100%; padding: 0 80px; margin: auto;}

main.sub .tab-menu {width: 100%; display: flex; text-align: center;}
main.sub .tab-menu .tab-btn {flex: 1 1 0; font-size: var(--font25); font-weight: 600; line-height: 1.5; color: var(--white); }
main.sub .tab-menu .tab-btn.active {color: var(--primary); font-weight: 700;}

main.sub .tab-area .tab-item {display: none;}
main.sub .tab-area .tab-item.active {display: block;}

@media screen and (max-width:1024px){
  main.sub .inner2 {padding: 0 5%;}
}
@media screen and (max-width:768px){
  main.sub .page-top .sub-tit .mobr {display: block;}
}

/* about */
.about .intro {width: 100%; height: 1100vh; position: relative; }
.about .intro .fixed-box {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.about .intro .pin-box {width: 100%; height: 100vh; position: sticky; left: 0; top: 0;}

.about .intro .ko,
.about .intro .ko * {font-family: var(--pretendard); }

.about .intro .white {color: #fff;}
.about .intro .orange {color: var(--primary);}

.about .intro .bold {font-weight: 700;}
.about .intro .semibold {font-weight: 600;}

.about .intro .size120 {font-size: 120px; }
.about .intro .mo-768 {display: none;}

.about .intro .color-fill span {display: block; background-clip: text; -webkit-background-clip: text; color: rgba(0,0,0,0); background-size: auto 200%; background-image: linear-gradient(to top, var(--white) 50%, var(--primary) 50%); background-position-y:100%; }
.about .intro .color-fill-hor span {display: block; background-clip: text; -webkit-background-clip: text; color: rgba(0,0,0,0); background-size: 200% auto; background-image: linear-gradient(to left, var(--white) 50%, var(--primary) 50%); background-position-x:100%; }

.about .intro .step-box {position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden;}
.about .intro .step-box .text-raise {}
.about .intro .step-box .text-raise .line {overflow: hidden;}
.about .intro .step-box .text-raise .line span {display: block;}

.about .intro .step-box.step1,
.about .intro .step-box.step2 {font-size: calc(var(--font20)*6);  line-height: 0.9; padding: 0 5%;}
.about .intro .step-box.step3,
.about .intro .step-box.step4 {font-size: calc(var(--font20)*3);}
.about .intro .step-box.step5 {font-size: calc(var(--font20)*12); line-height: 0.9;}

.about .intro .step-box.step3 .line {overflow: hidden;}
.about .intro .step-box.step3 .line span {display: block;}


.about .intro .step-box.step6 {}
.about .intro .step-box.step6 .wrapper {width: 100%;}
.about .intro .step-box.step6 .text {position: relative;}
.about .intro .step-box.step6 .center {font-weight: 500; font-size: calc(var(--font25)*1.4); position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%); width: 100%;}
.about .intro .step-box.step6 .line:not(.ko) {font-size: 0; }
.about .intro .step-box.step6 .line:not(.ko) {width: fit-content; margin: auto;}
.about .intro .step-box.step6 .line svg {height: 240px;}

.about .intro .step-box.step7 {position: relative;}
.about .intro .step-box.step7 .slide {position: absolute; width: 100%; height: 100%; left: 0; top: 0; display: flex; align-items: center; justify-content: center;}
.about .intro .step-box.step7 .slide .wrapper {width: 90%; height: 100%; padding: var(--headerH) 0;}
.about .intro .step-box.step7 .side-text {display: flex; align-items: center; justify-content: space-between; gap: 240px; width: 100%; height: 100%;}
.about .intro .step-box.step7 .side-text > div {width: calc(50% - 120px); line-height: 1.55; color: var(--primary);}
.about .intro .step-box.step7 .slide:nth-child(2n) .side-text > div {color: var(--black);}
.about .intro .step-box.step7 .left {font-weight: 600; font-size: calc(var(--font20)*2.25);}
.about .intro .step-box.step7 .right {font-family: var(--pretendard); font-size: calc(var(--font25)*1.4);}
.about .intro .step-box.step7 .center {--size:200px; position: absolute; left: 50%; top: 50%; width: var(--size); height: var(--size); display: flex; align-items: center; font-size: 0; transform: translate(-50%,-50%); overflow: hidden; }
.about .intro .step-box.step7 .center span svg {width: var(--size);}

.about .intro .step-box.step8 {display: flex; pointer-events: none;} 
.about .intro .step-box.step8 .bar {width: 20%; height: 100%; background: var(--primary);}

@media screen and (max-width:1024px){
  .about .intro .step-box.step3, .about .intro .step-box.step4 {font-size: calc(var(--font20)*2);}
  .about .intro .step-box.step5 {font-size: calc(var(--font20)*10);}
  .about .intro .step-box.step6 .line svg {height: 200px;}
  .about .intro .step-box.step7 .side-text {flex-direction: column; justify-content: space-around;}
  .about .intro .step-box.step7 .side-text > div {width: 100%;}
  .about .intro .step-box.step7 .center {--size: 163px; }
}
@media screen and (max-width:768px){
  .about .intro .pc {display: none;}
  .about .intro .mo-768 {display: block;}

  .about .intro .step-box.step1, .about .intro .step-box.step2 {font-size: calc(var(--font20)*3.5);}
  .about .intro .step-box.step5 {font-size: calc(var(--font20)*8);}
  .about .intro .step-box.step6 .line svg {height: 120px;}
}
@media screen and (max-width:480px){
  .about .intro .step-box.step1, .about .intro .step-box.step2 {font-size: calc(var(--font20)*2.5);}
  .about .intro .step-box.step3, .about .intro .step-box.step4 {font-size: calc(var(--font20)*1.4);}
  .about .intro .step-box.step5 {font-size: calc(var(--font20)*5);}
  .about .intro .step-box.step6 .center {font-size: calc(var(--font25)*1.2);}
  .about .intro .step-box.step6 .line svg {height: 80px;}
  .about .intro .step-box.step7 .center {--size:120px;}
  .about .intro .step-box.step7 .left {font-size: calc(var(--font20)*1.6);}
  .about .intro .step-box.step7 .right {font-size: var(--font25);}
}

/* what section2 */
.about .what {width: 100%; position: relative; padding-bottom: calc(120px * 2.4);}
.about .what .section-cont {position: relative; height: 600vh;}
.about .what .section-btn {position: absolute; height: 100%; width: 100%; left: 0; top: 0;}
.about .what .fixed-box {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.about .what .pin-box {width: 100%; height: 100vh; position: sticky; left: 0; top: 0;}
.about .what .step-box {position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden;}

.about .what .text-raise {}
.about .what .text-raise .line {white-space: nowrap; overflow: hidden;}
.about .what .text-raise .line span {display: block;}

.about .what .step-box.step1 {display: flex; z-index: 5;} 
.about .what .step-box.step1 .bar {width: 20%; height: calc(100% + 20px); background: var(--primary);  position: relative; }

.about .what .step-box.step2 .wrapper {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
.about .what .step-box.step2 .wrapper .text {color: var(--white);font-size: calc(var(--font25)*6); font-weight: 600; line-height: 1.1; }

.about .what .step-box.step3 {position: relative; }
.about .what .step-box.step3 .slide {position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding-top: calc(var(--headerH) + var(--gap100)/2); padding-bottom: calc(var(--gap100)*1.3);}
.about .what .step-box.step3 .slide .thumb-box {width: 100%; height: 100%; position: absolute; left: 0; top: 0; padding-top: calc(var(--headerH) + var(--gap100)/2); padding-bottom: calc(var(--gap100)*1.3); display: flex; justify-content: center; align-items: center; }
.about .what .step-box.step3 .slide .thumb-box span {width: 78%; height: 100%; display: block; overflow: hidden; background: var(--black); font-size: 0; border-radius: var(--gap40); }
.about .what .step-box.step3 .slide .thumb-box span img {width: 100%; height: 100%; object-fit: cover; opacity: 0.6;}
.about .what .step-box.step3 .slide .text-box {width: 90%; position: relative; z-index: 1; text-align: left; margin: auto; padding-top: 34px;}
.about .what .step-box.step3 .slide .text-box .title {color: var(--primary); font-size: calc(var(--font25)*6); line-height: 1.1; font-weight: 600; height: 2.2em;}
.about .what .step-box.step3 .slide .text-box .desc {color: var(--white); font-weight: 500; font-size: calc(var(--font20)*2); line-height: 1.1; margin-top: var(--gap100);}
.about .what .step-box.step3 .slide .text-box .desc li + li {margin-top: 0.4em;}

.about .what .section-btn .view-btn {position: absolute; padding: 0 5%; width: 100%; left: 0; bottom: calc(var(--gap100)*0.5); z-index: 5; transform-origin: 87% 100%;}
.about .what .section-btn .view-btn a {color: var(--primary); font-size: calc(var(--font25)*4.8); font-weight: 700; line-height: 1.2; display: flex; justify-content: space-between; align-items: center;}
.about .what .section-btn .view-btn a::after {content:""; height: var(--gap80); aspect-ratio: 1/0.5; background: url(/img/sub/about_what_arrow.svg) center no-repeat; background-size: auto 100%; }
@media screen and (min-width:1281px) and (max-height:800px) {
  .about .what .step-box.step3 .slide .text-box .title {font-size: calc(var(--font25)*3);}
  .about .what .step-box.step3 .slide .text-box .desc {font-size: calc(var(--font20)*1.4);}
}
@media screen and (max-width:1680px){
  .about .what .step-box.step3 .slide .text-box .title {font-size: calc(var(--font25)*5);}
}
@media screen and (max-width:1440px){
  .about .what .section-btn .view-btn a {font-size: calc(var(--font25)*4);}
}
@media screen and (max-width:1280px){
  .about .what .step-box.step3 .slide .text-box .title {font-size: calc(var(--font25)*4);}
  .about .what .section-btn .view-btn a {font-size: calc(var(--font25)*3);}
}
@media screen and (max-width:1024px){
  .about .what .step-box.step2 .wrapper .text .mobr {display: block;}
  .about .what .step-box.step3 .slide .text-box .title {font-size: calc(var(--font25)*3);}
  .about .what .step-box.step3 .slide .text-box .desc {font-size: calc(var(--font20)*1.4);}
}
@media screen and (max-width:768px){
  .about .what .step-box.step1 .bar {border-bottom-left-radius: 12px; }
  .about .what .step-box.step3 .slide .thumb-box span {width: 90%; }
  .about .what .section-btn .view-btn a {font-size: calc(var(--font25)*1.5);}
  .about .what .section-btn .view-btn a::after {height: 1em;}
}
@media screen and (max-width:480px){
  .about .what .step-box.step2 .wrapper .text {font-size: calc(var(--font25)*4);}
  .about .what .step-box.step3 .slide .text-box .title {font-size: calc(var(--font25)*1.6);}
  .about .what .step-box.step3 .slide .text-box .desc {font-size: calc(var(--font20)*1.2);}
  .about .what .section-btn .view-btn {transform-origin: 12% 100%;}
}

/* standard section3 */
.about .standard {overflow: hidden; margin: calc(var(--gap100)*2) 0; padding: var(--gap100) 0;}
.about .standard .inner {width: 90%; max-width: 1740px; margin: auto;}
.about .standard .card-list {display: flex; justify-content: center; align-items: center; /*flex-wrap: wrap;*/ }
.about .standard .card-list li {max-width: 290px; flex: 1 1 0;}
.about .standard .card-list li:nth-child(1) {transform: rotate(-8deg);}
.about .standard .card-list li:nth-child(2) {transform: rotate(4deg);}
.about .standard .card-list li:nth-child(3) {transform: rotate(-3deg);}
.about .standard .card-list li:nth-child(4) {transform: rotate(8deg);}
.about .standard .card-list li:nth-child(5) {transform: rotate(-4deg);}
.about .standard .card-list li:nth-child(6) {transform: rotate(5deg);}
.about .standard .card-list .card-item {width: 100%;  border-radius: 20px; background: #464646; overflow: hidden; padding: 36px 22px 56px;}
.about .standard .card-list li:nth-child(2n) .card-item {background: #9E9E9E;}
.about .standard .card-list .card-item .icon-box {font-size: 0; text-align: center;}
.about .standard .card-list .card-item .icon-box img {max-width: 100%; }
.about .standard .card-list .card-item .text-box {font-size: calc(var(--font20)*1.5); margin-top: 1.15em; line-height: 1.55; height: 3.1em; display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--pretendard); font-weight: 600; color: #fff; }
@media screen and (max-width:1620px){
  .about .standard .card-list {max-width: 1000px; width: 100%; margin: auto; flex-wrap: wrap; }
  .about .standard .card-list li {flex:unset;}
  .about .standard .card-list li:nth-child(n+4){}
}
@media screen and (max-width:1024px){
  .about .standard .card-list li {width: 33%;}
  .about .standard .card-list .card-item {width: 100%;}
  .about .standard .card-list .card-item .text-box {font-size: calc(var(--font20)*1.1);}
}
@media screen and (max-width:768px){
  .about .standard .card-list .card-item {padding: 24px 12px 32px; border-radius: 8px;}
  .about .standard .card-list .card-item .text-box {font-size: var(--font20);}
}
@media screen and (max-width:480px){
  .about .standard .card-list .card-item {padding: 16px 6px 24px;}
  .about .standard .card-list .card-item .text-box {font-size: 14px;}
}

/* list-section section4,5 */
.about .list-section {}
.about .list-section .section-title {text-align: center; margin-bottom: calc(var(--gap100)*1.5); }
.about .list-section .section-title h2 {font-size: calc(var(--font25)*4); color: #000; font-weight: 600; line-height: 0.9;}

.about .list-section .btn-box {display: flex; justify-content: center; margin-top: var(--gap100);}
.about .list-section .btn-box .more-btn {color: var(--primary); font-size: 30px; font-weight: 600; line-height: 1.2; position: relative; --height:30px; --gap:5px;}
.about .list-section .btn-box .more-btn .arrow {height: var(--height); overflow: hidden; font-size: 0; margin-top: 10px;}
.about .list-section .btn-box .more-btn .arrow span {height: calc(var(--height)*2 + var(--gap)); display: flex; flex-direction: column; gap: var(--gap); transform: translateY(calc((var(--height) + var(--gap))*-1)); transition: transform 0.6s cubic-bezier(0.83, 0, 0.17, 1);}
.about .list-section .btn-box .more-btn .arrow span svg {height: var(--height);}
.about .list-section .btn-box .more-btn:hover .arrow span {transform: translateY(0);}
@media screen and (max-width:768px){
  .about .list-section .btn-box .more-btn {font-size: 24px; --height:24px; }
}
@media screen and (max-width:480px){
  .about .list-section .btn-box .more-btn {font-size: 20px;  --height:20px;}
}

/* awards section4 */
.about .awards .inner {width: 90%; max-width: 1540px; margin: auto; padding: var(--gap100) 0;}
.about .awards .cont {display: flex; justify-content: space-between; align-items: stretch; }
.about .awards .cont .left {position: relative;}
.about .awards .cont .left .sticky-box {position: sticky; left: 0; top: calc(var(--headerH) + var(--gap40)); font-size: calc(var(--font25)*2.8); color: #000; line-height: 0.9; font-weight: 600; text-align: left;}
.about .awards .cont .left .sticky-box .num {color: var(--primary); font-weight: 700; font-size: 2.14em; margin-bottom: var(--font20);}

.about .awards .right {width: 50%; padding-left: var(--font20); flex-shrink: 0;}
.about .awards .awards-list {color: #000; font-size: calc(var(--font25)*1.4); line-height: 1;}
.about .awards .awards-list li {display: none;}
.about .awards .awards-list li:nth-child(-n+10) {display: block;}
.about .awards .awards-list li + li {margin-top: calc(var(--gap100)/2);}
.about .awards .awards-list li .tit {text-transform: uppercase; font-weight: 600;}
.about .awards .awards-list li .desc {text-transform: uppercase; margin-top: var(--font20); line-height: 1.2;}

@media screen and (max-width:1024px){
  .about .awards .cont {flex-direction: column; gap: var(--gap100);}
  .about .awards .cont .left .sticky-box {text-align: center;}
  .about .awards .right {width: 100%;}
}
@media screen and (max-width:768px){
  .about .awards .cont .left .sticky-box {font-size: calc(var(--font25)*1.4);}
  .about .awards .right {padding-left: 0;}
}
@media screen and (max-width:480px){
  .about .awards .inner {padding: 20px 0;}
  .about .awards .awards-list {font-size: calc(var(--font25)*1.2);}
  .about .awards .awards-list li .tit {font-size: 20px; margin-bottom: 0.7em;}
  .about .awards .awards-list li .desc {font-size: 16px; margin-top: 0.5em;}
}


/* partner section5 */
.about .partner {margin-top: calc(var(--gap100)/2);}
.about .partner .inner {width: 90%; max-width: 1400px; margin: auto; padding: var(--gap100) 0;}

.about .partner .partner-list {display: grid; gap: var(--gap100) calc(var(--gap100)/2); grid-template-columns: repeat(3, 1fr);}
.about .partner .partner-list li {display: none;}
.about .partner .partner-list li:nth-child(-n+9) {display: block;}
.about .partner .partner-list .partner-item {color: #000; text-align: center; font-size: var(--font25);}
.about .partner .partner-list .partner-item .logo-box { max-width: 300px; margin: 0 auto var(--font20);}
.about .partner .partner-list .partner-item .logo-box span {width: 100%; display: block; padding-top: 50%; position: relative; overflow: hidden;}
.about .partner .partner-list .partner-item .logo-box span img {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; object-fit: cover;}
.about .partner .partner-list .partner-item .tit {font-size: 1.4em; font-weight: 600; line-height: 1.1; text-transform: uppercase; }
.about .partner .partner-list .partner-item .desc {font-family: var(--pretendard); font-size: 1em; margin-top: 0.6em; line-height: 1.55; letter-spacing: -0.01em;}
.about .partner .partner-list .partner-item .desc + .desc {margin-top: 0.2em;}

@media screen and (max-width:1024px){}
@media screen and (max-width:768px){
  .about .partner .partner-list {grid-template-columns: repeat(2, 1fr); }
  .about .partner .partner-list li:nth-child(-n+9) {display: none;}
  .about .partner .partner-list li {display: none;}
  .about .partner .partner-list li:nth-child(-n+8) {display: block;}

  .about .list-section .section-title h2 {font-size: calc(var(--font25)*2);}
}
@media screen and (max-width:480px){
  .about .partner .inner {padding: 20px 0;}
  .about .partner .partner-list .partner-item .tit {font-size: 1em;}
  .about .partner .partner-list .partner-item .desc {font-size: 0.8em;}
}



/* pf board list */
.list-page .rb-section {padding: var(--gap80) 0 calc(var(--gap100)*1.5);}

.list-page .list-content {padding-top: calc(var(--gap10)*3);}
.list-page .list-content .category-box {font-size: var(--font25); display: flex; justify-content: space-between; align-items: center; font-weight: 600; line-height: 1.5; margin-bottom: 1.68em; gap: 0.6em var(--gap40); flex-wrap: wrap;  }
.list-page .list-content .category-box .cate {text-transform: uppercase;}
.list-page .list-content .category-box .cate.active span {background-position-y:100%; }
.list-page .list-content .category-box .cate .text-over {transition: 0.8s;}

.list-page.ani-start .list-top .text-over {transform: translateY(0);}
.list-page.ani-start .list-content .text-over {transform: translateY(0);}

@media screen and (max-width:768px){
  .list-page .list-content .category-box {font-size: 16px; flex-direction: column; align-items: start;}
}


/* portfolio */
.portfolio-list {}

.portfolio-list .pf-list .pf-item {}
.portfolio-list .pf-list .pf-item .img-thumb {display: block; width: 100%; position: relative; font-size: 0; overflow: hidden; border-radius: calc(var(--gap10)*5); margin-bottom: var(--gap40);}
.portfolio-list .pf-list .pf-item .img-thumb span {display: block; width: 100%; padding-top: 48%; overflow: hidden;  position: relative;}
.portfolio-list .pf-list .pf-item .img-thumb span img {position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%,-50%); }
.portfolio-list .pf-list .pf-item .img-thumb .hover {position: absolute; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background:rgba(0,0,0,0.5); backdrop-filter: blur(30px); font-size: 0; opacity: 0; pointer-events: none; transition: opacity 0.5s;}
.portfolio-list .pf-list .pf-item .img-thumb .hover img {width: 100%; height: 100%; object-fit: cover; }
.portfolio-list .pf-list .pf-item .text-box {}
.portfolio-list .pf-list .pf-item .text-box .name {font-size: calc(var(--font25)*2); font-family: var(--pretendard); color: var(--black); font-weight: 600; line-height: 1.3; margin-bottom: 0.4em;}

.portfolio-list .pf-list .pf-item .text-box .cate-box {display: flex; gap: 0.7em calc(var(--gap10)*6); flex-wrap: wrap; font-size: var(--font20); margin-top: 2em; }
.portfolio-list .pf-list .pf-item .text-box .cate-box .cate {font-family: var(--pretendard); letter-spacing: -0.01em; color: #333; line-height: 1.2; text-transform: uppercase; position: relative; }
.portfolio-list .pf-list .pf-item .text-box .cate-box .cate:not(:last-child)::before {content:""; width: 1px; height: 0.75em; background: #999; position: absolute; right: calc(var(--gap10)*-3); top: 50%; transform: translateY(-50%); }

@media (hover: hover){
  .portfolio-list .pf-list .pf-item .img-thumb:hover .hover {opacity: 1; pointer-events: auto;}
}

.portfolio-list .pf-list .pf-item.best .img-thumb {border-radius: calc(var(--gap10)*6);}
.portfolio-list .pf-list .pf-item.best .text-box .name {font-size:  calc(var(--font25)*4); margin-bottom: 0.2em;}


.portfolio-list .pf-list .pf-list-box {display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(var(--gap40)*2) var(--gap40); margin-top: 110px; }
.portfolio-list .pf-list .pf-list-box li {width: 100%; }





@media screen and (max-width:1024px){
  .portfolio-list .pf-list .pf-item .text-box .name {font-size: calc(var(--font25)*1.2);}
  
  .portfolio-list .pf-list .pf-item.best .text-box .name {font-size: calc(var(--font25)*2);}
  
}
@media screen and (max-width:768px){
  .portfolio-list .pf-list .pf-item .text-box .cate-box {font-size: 16px;}
  .portfolio-list .pf-list .pf-item .text-box .cate-box .cate {width: 100%;}
  .portfolio-list .pf-list .pf-item .text-box .cate-box .cate::before {display: none;}
}
@media screen and (max-width:480px){
  .portfolio-list .pf-list .pf-list-box {grid-template-columns: 100%;}

  .portfolio-list .pf-list .pf-item .img-thumb {border-radius: calc(var(--gap10)*3);}


  .portfolio-list .pf-list .pf-item.best .img-thumb {border-radius: calc(var(--gap10)*3);}
  .portfolio-list .pf-list .pf-item.best .text-box .name {font-size: calc(var(--font25)*1.5); margin-bottom: 0.5em;}
  
}


/* board */
.board-list .bd-list {}
.board-list .bd-list .bd-list-box {margin-top: calc(var(--gap100)*1.5);}
.board-list .bd-list .bd-list-box li + li {margin-top: calc(var(--gap100)*0.9);}

.board-list .bd-list .bd-item {display: flex; align-items: center; gap: calc(var(--gap100));}
.board-list .bd-list .bd-item .left {width: clamp(260px, 20.625vw, 396px); flex-shrink: 0;}
.board-list .bd-list .bd-item .img-thumb {width: 100%;}
.board-list .bd-list .bd-item .img-thumb span {display: block; border-radius: 40px; position: relative; overflow: hidden; padding-top: 68%;}
.board-list .bd-list .bd-item .img-thumb span img {width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.board-list .bd-list .bd-item .text-box {width: 100%;}
.board-list .bd-list .bd-item .text-box * {font-family: var(--pretendard); letter-spacing: -0.01em;}
.board-list .bd-list .bd-item .text-box .date {color: #555; font-size: var(--font18);}
.board-list .bd-list .bd-item .text-box .subject {display:-webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; font-weight: 600; font-size: calc(var(--font20)*2); line-height: 1.2; margin-top: 1em; color: var(--black);}
.board-list .bd-list .bd-item .text-box .desc {display:-webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; font-size: var(--font20); line-height: 1.7; color: #333; margin-top: 0.5em; margin-bottom: 1.5em;}
.board-list .bd-list .bd-item .text-box .tag-box {}

.board-list .bd-list .bd-item.best {flex-direction: row-reverse; gap: calc(var(--gap100)*1.3);}
.board-list .bd-list .bd-item.best .left {width: calc(50% - var(--gap100)*1.3);}
.board-list .bd-list .bd-item.best .img-thumb span {border-radius: 50px;}
.board-list .bd-list .bd-item.best .text-box {width: 50%;}
.board-list .bd-list .bd-item.best .text-box .subject {font-size: calc(var(--font20)*2.5);}
.board-list .bd-list .bd-item.best .tag-box {margin-top: calc(var(--gap10)*6);}


.board-view .bd-view-top {position: relative; background: #000; padding-top: calc(var(--headerH) + var(--gap40)); padding-bottom: calc(var(--gap100)*2); margin-bottom: calc(var(--gap100)*-1);}
.board-view .bd-view-top .back-img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; font-size: 0; opacity: 0.4; pointer-events: none;}
.board-view .bd-view-top .back-img img {width: 100%; height: 100%; object-fit: cover; }
.board-view .bd-view-top .back-btn {}
.board-view .bd-view-top .back-btn a {display: flex; font-size: 30px; gap: 0.5em; align-items: center; color: #ccc; font-weight: 600; line-height: 1.5;}
.board-view .bd-view-top .back-btn a svg {width: 1em; display: block;}
.board-view .bd-view-top .back-btn a svg path {stroke: #ccc;}

.board-view .bd-view-top .view-head {width: 100%; max-width: 1100px; margin: auto; position: relative; z-index: 1; font-size: var(--font20);}
.board-view .bd-view-top .view-head * {font-family: var(--pretendard); letter-spacing: -0.01em; color: var(--white);}
.board-view .bd-view-top .view-head .category { font-size: 1em; line-height: 1.7;  color: #ccc; padding-top: 1em; padding-bottom: 1.25em; display: flex; gap: 3em;}
.board-view .bd-view-top .view-head .category li {position: relative;}
.board-view .bd-view-top .view-head .category li:not(:last-child)::before {content:""; width: 1px; height: 0.75em; background: var(--white); position: absolute; right: -1.5em; top: 50%; transform: translateY(-50%); }
.board-view .bd-view-top .view-head h1 {font-weight: 700; font-size: 3em; line-height: 1.2; min-height: 2.4em; }
.board-view .bd-view-top .view-head p {font-size: 1em; margin-top: 2em;  line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; height: 5.1em;}
.board-view .bd-view-top .view-head .date {color: #888; text-align: right; margin-top: 1.25em;}

.board-view .bd-view-cont {position: relative; z-index: 1;}
.board-view .bd-view-cont .inner {max-width: 960px;}
.board-view .bd-view-cont .template-area {font-size: 20px;}
.board-view .bd-view-cont .template-area * {font-family: var(--pretendard); letter-spacing: -0.01em; color: var(--black); line-height: 1.7;}
.board-view .bd-view-cont .template-area .tit-l {font-size: 2.5em; font-weight: 700; line-height: 1.2; padding: calc(var(--gap10)*4) 0;}
.board-view .bd-view-cont .template-area .tit-m {font-size: 1.2em; font-weight: 600; padding: calc(var(--gap10)*1) 0;}
.board-view .bd-view-cont .template-area .tit-s {font-size: max(15px,1em); font-weight: 500;  padding: calc(var(--gap10)*1) 0;}
.board-view .bd-view-cont .template-area .desc {font-size: max(14px, 0.9em); font-weight: 400;  padding-bottom: calc(var(--gap10)*3); color: #222; }
.board-view .bd-view-cont .template-area .h-line {padding: calc(var(--gap10)*3) 0;  }
.board-view .bd-view-cont .template-area .h-line::before {content:""; display: block; width: 100%; height: 1px; background: #888;}
.board-view .bd-view-cont .template-area .slogan {margin: calc(var(--gap10)*4) 0; padding: calc(var(--gap10)*5) 5%;  display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(var(--gap10)*4) 0; --deco-height:calc(var(--gap10)*2); --border-c:#888; --board-gap:8px;  background-image: repeating-linear-gradient(90deg, var(--border-c), var(--border-c) var(--board-gap), transparent var(--board-gap), transparent calc(var(--board-gap)*2)), repeating-linear-gradient(270deg, var(--border-c), var(--border-c) var(--board-gap), transparent var(--board-gap), transparent calc(var(--board-gap)*2));  background-position: 0 0, 0 100%; background-size: 100% 1px, 100% 1px; background-repeat: no-repeat;}
.board-view .bd-view-cont .template-area .slogan::before,
.board-view .bd-view-cont .template-area .slogan::after {content:""; height: var(--deco-height); aspect-ratio: 1/0.8; background: url(/img/com/icon_quotes.svg) center no-repeat; background-size: cover;}
.board-view .bd-view-cont .template-area .slogan::after {transform: scale(-1); }
.board-view .bd-view-cont .template-area .slogan span {text-align: center; font-size: 1.5em; font-weight: 600; line-height: 1.5;}
.board-view .bd-view-cont .template-area figure {appearance: none;  margin: 0; padding: 0; display: block;}
.board-view .bd-view-cont .template-area .image { padding: calc(var(--gap10)*4) 0; }
.board-view .bd-view-cont .template-area .image img {max-width: 100%; display: block; border-radius: calc(var(--gap10)*2); margin: auto; }
.board-view .bd-view-cont .template-area .image figcaption {text-align: center; margin-top: calc(var(--gap10)*2); font-size: 0.8em; color: #333; }
.board-view .bd-view-cont .template-area .video {padding: calc(var(--gap10)*4) 0; }
.board-view .bd-view-cont .template-area .video > div {width: 100%; padding-top: 56.25%; position: relative; border-radius: calc(var(--gap10)*2); overflow: hidden;}
.board-view .bd-view-cont .template-area .video iframe {width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }

.board-view .bd-view-cont .bd-cont-foot {margin-top: calc(var(--gap100)*1.2); }
.board-view .bd-view-cont .bd-cont-foot .share-btn {margin-top: calc(var(--gap10)*6); position: relative;}
.board-view .bd-view-cont .bd-cont-foot .share-btn .arrow svg {width: 24px;}
.board-view .bd-view-cont .bd-cont-foot .share-btn .tooltip-layer {display: flex; background: var(--white); position: absolute; bottom: -30px; left: 50%; transform: translate(-50%, 100%); gap: 10px; padding: 0 30px; max-width: min(100%, 490px); height: 52px; align-items: center; justify-content: center; border-radius: 27px; cursor: pointer; pointer-events: none; opacity: 0; transition: opacity 0.4s; }
.board-view .bd-view-cont .bd-cont-foot .share-btn.open .tooltip-layer {opacity: 1; pointer-events: auto;}
.board-view .bd-view-cont .bd-cont-foot .share-btn .tooltip-layer p {font-size: 18px; color: #333; line-height: 1.7; font-family: var(--pretendard); letter-spacing: -0.01em;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: underline; text-underline-position: under;}
.board-view .bd-view-cont .bd-cont-foot .share-btn .tooltip-layer .icon {width: 32px; height: 32px; border-radius: 50%; background-color: #dfdfdf; background-image: url(/img/com/icon_link.svg); background-position: center; background-size: 24px; background-repeat: no-repeat; flex-shrink: 0; }

.board-view .bd-view-cont .bd-cont-foot .paging {border: 1px solid #999; border-width: 1px 0 1px 0; margin-top: calc(var(--gap100)*1.1);}
.board-view .bd-view-cont .bd-cont-foot .paging .paging-btn {padding: calc(var(--gap10)*2.5); padding-left: 175px; position: relative;}
.board-view .bd-view-cont .bd-cont-foot .paging .paging-btn + .paging-btn {border-top: 1px solid #ccc;}
.board-view .bd-view-cont .bd-cont-foot .paging .paging-btn a {display: flex; gap: var(--gap40); align-items: center;}
.board-view .bd-view-cont .bd-cont-foot .paging .paging-btn a p {font-family: var(--pretendard); letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font20); font-weight: 500; line-height: 1.7; color: #222; width: 100%;}
.board-view .bd-view-cont .bd-cont-foot .paging .paging-btn a .thumb {height: 70px; aspect-ratio: 1/0.68; border-radius: var(--gap10); overflow: hidden; font-size: 0; flex-shrink: 0;}
.board-view .bd-view-cont .bd-cont-foot .paging .paging-btn a .thumb img {width: 100%; height: 100%; object-fit: cover; }
.board-view .bd-view-cont .bd-cont-foot .paging .paging-btn i {font-family: var(--montserrat); font-size: var(--font25); line-height: 1.2; font-weight: 600; width: 110px;  position: absolute; left: calc(var(--gap10)*2.5); top: 50%; transform: translateY(-50%); display: flex; gap: 15px; align-items: center; font-style: normal; color: var(--black); }
.board-view .bd-view-cont .bd-cont-foot .paging .paging-btn i::before {content:""; width: 22px; height: 22px; background: url(/img/com/arrow_paging_black.svg) center no-repeat; background-size: cover;}
.board-view .bd-view-cont .bd-cont-foot .paging .paging-btn.next i::before {transform: scale(-1);}

.board-view .bd-view-cont .bd-cont-foot .list-btn {display: flex; justify-content: center; margin-top: calc(var(--gap10)*6);}
.board-view .bd-view-cont .bd-cont-foot .list-btn .button {--height:44px; font-size: var(--font20); padding: 0 calc(var(--gap10)*3); font-family: var(--montserrat); letter-spacing: 0; font-weight: 600;}
.board-view .bd-view-cont .bd-cont-foot .list-btn .button svg {height: 18px;}


@media screen and (max-width:1024px){
  .board-list .bd-list .bd-item {gap: 32px;}
  .board-list .bd-list .bd-item .left {width: 250px;}
  .board-list .bd-list .bd-item .text-box .subject {margin-top: 0.5em; font-size: calc(var(--font20)*1.5);}

  .board-list .bd-list .bd-item.best {flex-direction: column; align-items: start; gap: calc(var(--gap100)*0.8);}
  .board-list .bd-list .bd-item.best .left {display: block; width: 100%;}
  .board-list .bd-list .bd-item.best .text-box {width: 100%;}

  .board-view .bd-view-top .back-btn {margin-top: var(--gap40); margin-bottom: var(--gap80);}
  .board-view .bd-view-top .back-btn a {font-size: 24px;}
  .board-view .bd-view-top .view-head {font-size: 16px;}
  .board-view .bd-view-cont .template-area {font-size: 18px;}
  .board-view .bd-view-cont .bd-cont-foot .paging .paging-btn {padding-left: 150px;}
}
@media screen and (max-width:768px){
  .board-list .bd-list .bd-item {flex-direction: column; gap: var(--gap40);}
  .board-list .bd-list .bd-item .left {width: 100%; max-width: 400px;}
  .board-list .bd-list .bd-item .img-thumb span {border-radius: calc(var(--gap10) * 3);}
  .board-list .bd-list .bd-item .text-box .subject {font-size: calc(var(--font20)*1.3);}
  .board-list .bd-list .bd-item .text-box .desc {display: none;}
  .board-list .bd-list .bd-item .text-box .tag-box {margin-top: 1em;}

  .board-list .bd-list .bd-item.best {gap: calc(var(--gap100)*0.5);}
  .board-list .bd-list .bd-item.best .left {max-width: 100%;}
  .board-list .bd-list .bd-item.best .text-box .subject {font-size: calc(var(--font20)*1.5);}

  .board-view .bd-view-top .back-btn a span {display: none;}
  .board-view .bd-view-top .view-head {font-size: 14px;}
  .board-view .bd-view-top .view-head h1 {font-size: 2.5em;}
  .board-view .bd-view-top .view-head p {display: none;}
  .board-view .bd-view-top .view-head .date {margin-top: 2em;}
  
  .board-view .bd-view-cont .template-area {font-size: 16px;}
  .board-view .bd-view-cont .template-area .tit-l {font-size: 2em;}
  .board-view .bd-view-cont .template-area .slogan {--board-gap:6px; --deco-height:16px;}
  .board-view .bd-view-cont .template-area .slogan span br {display: none;}
  .board-view .bd-view-cont .bd-cont-foot .list-btn .button {font-size: 16px;}

  .board-view .bd-view-cont .bd-cont-foot .paging .paging-btn {padding: calc(var(--gap10)*3) calc(var(--gap10)*3) calc(var(--gap10)*3) calc(var(--gap10)*2.5 + 30px) ;}
  .board-view .bd-view-cont .bd-cont-foot .paging .paging-btn i {font-size: 0; width: 22px; gap: 0;}
  .board-view .bd-view-cont .bd-cont-foot .paging .paging-btn i::before {width: 18px; height: 18px;}
  .board-view .bd-view-cont .bd-cont-foot .paging .paging-btn a p {font-size: 16px;}
  .board-view .bd-view-cont .bd-cont-foot .paging .paging-btn a .thumb {display: none;}

  
  .board-view .bd-view-cont .bd-cont-foot .share-btn .tooltip-layer p {font-size: 16px;}
}
@media screen and (max-width:480px){
  .board-list .bd-list .bd-item.best .img-thumb span {border-radius: 28px;}
  .board-list .bd-list .bd-item.best .tag-box {margin-top: calc(var(--gap10)*4);}
  .board-list .bd-list .bd-item .text-box .date {font-size: 14px;}
  .board-list .bd-list .bd-item .text-box .desc {font-size: 15px; line-height: 1.5; margin-bottom: 1.2em;}
  

  .board-view .bd-view-top .back-btn a {font-size: 20px;}
  .board-view .bd-view-top .view-head h1 {font-size: 2em;}
  .board-view .bd-view-cont .template-area {font-size: 14px;} 
  .board-view .bd-view-cont .template-area .slogan span {font-size: 20px;}
  .board-view .bd-view-cont .bd-cont-foot .paging .paging-btn i::before {width: 16px; height: 16px;}
  .board-view .bd-view-cont .bd-cont-foot .paging .paging-btn a p {font-size: 14px;}

  .board-view .bd-view-cont .bd-cont-foot .list-btn .button {height: 40px; padding: 0 calc(var(--gap10)*4);}
  .board-view .bd-view-cont .bd-cont-foot .list-btn .button svg {height: 14px;}

  .board-view .bd-view-cont .bd-cont-foot .share-btn .tooltip-layer {bottom: -14px; padding: 0 24px; height: 46px;}
  .board-view .bd-view-cont .bd-cont-foot .share-btn .tooltip-layer p {font-size: 14px;}
  .board-view .bd-view-cont .bd-cont-foot .share-btn .tooltip-layer .icon {width: 28px; height: 28px; background-size: 20px;}
}


/* contact */
.contact {}
.contact {--fontZ:22px;}
.contact .ct-top {width: 100%; overflow: hidden;}
.contact .ct-top .rb-section {padding: var(--gap80) 0;}
.contact .ct-top .inner {padding: 0; max-width: 1680px; }
.contact .ct-top .inquiry-form {}
.contact .ct-top .inquiry-form .step-indicator { display: flex; gap: var(--gap10);}
.contact .ct-top .inquiry-form .step-indicator .idt-box {text-align: center; width: 70px;}
.contact .ct-top .inquiry-form .step-indicator .idt-box p {opacity: 0; font-size: var(--font16); color: #111; line-height: 1.3;}
.contact .ct-top .inquiry-form .step-indicator .idt-box span {display: block; width: 100%; height: 4px; border-radius: 2px; background: #d8d8d8; margin-top: 6px;}
.contact .ct-top .inquiry-form .step-indicator .idt-box.current p {opacity: 1;}
.contact .ct-top .inquiry-form .step-indicator .idt-box.current span {background: var(--primary);}
.contact .ct-top .inquiry-form .step-indicator .idt-box.previous span {background: var(--black);}

.contact .ct-top .inquiry-form .step-ctrl {display: flex; font-size: 30px; gap: 2.3em;}
.contact .ct-top .inquiry-form .step-ctrl button {display: flex; align-items: center; font-size: inherit; gap: 0.5em; color: var(--black);}
.contact .ct-top .inquiry-form .step-ctrl button svg {width: 30px; stroke: var(--black); }
.contact .ct-top .inquiry-form .step-ctrl button span {font-size: inherit; font-weight: 600; line-height: 1.2;}
.contact .ct-top .inquiry-form .step-ctrl button.disabled {color: #C5C5C5; }
.contact .ct-top .inquiry-form .step-ctrl button.disabled svg {stroke:#c5c5c5;}

.contact .ct-top .inquiry-form .step-box {padding: var(--gap80) 0; box-sizing: content-box; transition: height 0.3s;}
.contact .ct-top .inquiry-form .step-box .inquiry-item { display: none; }
.contact .ct-top .inquiry-form .step-box .inquiry-item.active {display: block; }
.contact .ct-top .inquiry-form .step-box .inquiry-item .question-box {display: flex; gap: var(--gap100); align-items: start;}
.contact .ct-top .inquiry-form .step-box .inquiry-item .question-box + .question-box {margin-top: calc(var(--gap100)*1.2);}
.contact .ct-top .inquiry-form .step-box .inquiry-item .form-box {display: flex; gap: 25px 20px; flex-wrap:wrap;}
.contact .ct-top .inquiry-form .step-box .inquiry-item .form-line {display: flex; gap: 0.9em; font-size: var(--fontZ); font-family: var(--pretendard); align-items: center; color: var(--black); font-weight: 500;}
.contact .ct-top .inquiry-form .step-box .inquiry-item .form-line + .form-line {margin-top: 1.1em;}
.contact .ct-top .inquiry-form .step-box .inquiry-item .form-line .tit {width: 200px; flex-shrink: 0; font-size: inherit; font-family: inherit; font-weight: inherit;}
.contact .ct-top .inquiry-form .step-box .inquiry-item .form-line .cont {display: flex; gap: 0.9em; width: 100%;}
.contact .ct-top .inquiry-form .step-box .inquiry-item .form-line .box {width: 50%; display: flex; gap: 0.5em; align-items: center; font-size: inherit; font-family: inherit; min-height: 64px;}
.contact .ct-top .inquiry-form .step-box .inquiry-item .form-line.col {flex-direction: column; gap: 0.45em;}
.contact .ct-top .inquiry-form .step-box .inquiry-item .form-line.col + .form-line.col {margin-top: 1.5em;}
.contact .ct-top .inquiry-form .step-box .inquiry-item .form-line.col .tit {width: 100%; font-weight: 600;}
.contact .ct-top .inquiry-form .step-box .inquiry-item .form-line.col .box {width: 100%;}

.contact .ct-top .inquiry-form .step-box .inquiry-item .privacy-chk {display: flex; justify-content: center; align-items: center; font-size: var(--font20); gap: 1em; font-family: var(--pretendard); line-height: 1.7; font-weight: 500; color: var(--black); letter-spacing: -0.01em; margin-bottom: var(--gap80);}
.contact .ct-top .inquiry-form .step-box .inquiry-item .privacy-chk a {text-decoration: underline; font-weight: 700;}

.contact .ct-top .inquiry-form .step-box .inquiry-item .select-box {display: inline-flex; align-items: center; justify-content: center; position: relative; font-size: var(--fontZ);  font-family: var(--pretendard); color: var(--black); border: 1px solid #999;  border-radius: 30px; box-sizing: border-box; padding: 0.54em 1.36em; cursor: pointer;}
.contact .ct-top .inquiry-form .step-box .inquiry-item .select-box:has(input:checked) {color: var(--primary); background: var(--black); border-color: var(--black); font-weight: 700; }
.contact .ct-top .inquiry-form .step-box .inquiry-item .select-box input {width: 1px; height: 1px; opacity: 0; overflow: hidden; position: absolute; left: 0; top: 0; pointer-events: none;}

.contact .ct-top .inquiry-form .step-box .dot-list {font-size: inherit; --color:#333; }

.contact .ct-top .inquiry-form .step-box .attach-btn {margin-top: var(--font20);}
.contact .ct-top .inquiry-form .step-box .attach-btn .button {display: inline-flex; position: relative; cursor: pointer;}
.contact .ct-top .inquiry-form .step-box .attach-btn .button input {position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;}
.contact .ct-top .inquiry-form .step-box .attach-btn .button svg {width: 24px;}
.contact .ct-top .inquiry-form .step-box .attach-list {margin-top: var(--gap40);}
.contact .ct-top .inquiry-form .step-box .inquiry-item .attach-list .tit {display: flex; font-size: var(--fontZ); gap: 0.9em; font-weight: 600; align-items: center; margin-bottom: var(--font20); }
.contact .ct-top .inquiry-form .step-box .attach-list .tit span {color: var(--primary); font-size: max(0.7em, 14px); font-weight: 400;}
.contact .ct-top .inquiry-form .step-box .attach-list .attach-item {padding: 0 calc(var(--gap10)*7) 0 calc(var(--gap10)*3); position: relative; border-radius: var(--gap10); background: #DFDFDF; display: flex; align-items: center; height: 44px; }
.contact .ct-top .inquiry-form .step-box .attach-list .attach-item + .attach-item {margin-top: var(--gap10);}
.contact .ct-top .inquiry-form .step-box .attach-list .attach-item p {font-family: var(--pretendard); font-size: var(--font16); width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #333; }
.contact .ct-top .inquiry-form .step-box .attach-list .attach-item .remove-btn {width: 20px; height: 20px; position: absolute; right: calc(var(--gap10)*3); top: 50%; transform: translateY(-50%); background: url(/img/com/icon_x_circle.svg) center no-repeat; background-size: cover; }

.contact .ct-top .inquiry-form .step-box .submit-btn {}
.contact .ct-top .inquiry-form .step-box .submit-btn .button {--arrW:30px; --gap:5px; width: 100%;}

.contact .ct-top .inquiry-form .step-box .inquiry-item .left {width: calc(50% - var(--gap100)); }
.contact .ct-top .inquiry-form .step-box .inquiry-item .right {width: 50%;}
.contact .ct-top .inquiry-form .step-box .inquiry-item .sub-tit {font-size: var(--font20); color: var(--primary); font-weight: 700; line-height: 1.2; text-transform: uppercase; margin-bottom: 1.5em;}
.contact .ct-top .inquiry-form .step-box .inquiry-item .tit {color: var(--black); font-size: 60px; font-weight: 700; line-height: 1.3; font-family: var(--pretendard); letter-spacing: -0.01em;}
.contact .ct-top .inquiry-form .step-box .inquiry-item .tit.required::after {content:" *"; color: var(--primary); }
.contact .ct-top .inquiry-form .step-box .inquiry-item .etc {font-size: var(--font20); margin-top: 0.5em; color: #333; font-family: var(--pretendard); line-height: 1.7; letter-spacing: -0.01em; } 

.contact .ct-top .inquiry-form .step-box .textarea-box {height: 450px;}

.contact .ct-top .inquiry-form .step-box .inquiry-item.step1 .question-box .right {margin-top: 9px;}
.contact .ct-top .inquiry-form .step-box .inquiry-item.step1 .form-box.btm {--board-size:7px; --board-gap:5px; margin-top: calc(var(--gap10)*6); padding-top: calc(var(--gap10)*6); background-image: repeating-linear-gradient(90deg, #999, #999 var(--board-size), transparent var(--board-size), transparent calc(var(--board-gap) + var(--board-size))); background-position: 0 0; background-size: 100% 1px; background-repeat: no-repeat;}
.contact .ct-top .inquiry-form .step-box .inquiry-item.step1 .form-box.btm .color1 {font-size: var(--font18); line-height: 1.7; margin-top: 0.9em;}
.contact .ct-top .inquiry-form .step-box .inquiry-item.step2 .question-box { align-items: center;}
.contact .ct-top .inquiry-form .step-box .inquiry-item.step4 .question-box:first-child {align-items: center;}
.contact .ct-top .inquiry-form .step-box .inquiry-item.step4 .question-box:last-child .left {margin-top: 18px;}
.contact .ct-top .inquiry-form .step-box .inquiry-item.step5 .question-box:first-child .right {margin-top: 60px;}
.contact .ct-top .inquiry-form .step-box .inquiry-item.step5 .question-box:nth-child(3) {align-items: center;}

.contact .ct-top .inquiry-form .step-box .inquiry-item.end-step {text-align: center; padding: var(--gap80) 0; }
.contact .ct-top .inquiry-form .step-box .inquiry-item.end-step .tit {font-size: calc(var(--font25)*4.8); font-weight: 700; color: var(--primary); line-height: 1.1;}
.contact .ct-top .inquiry-form .step-box .inquiry-item.end-step .tit span {font-size: 0.9em; vertical-align: top;}
.contact .ct-top .inquiry-form .step-box .inquiry-item.end-step .tit2 {font-size: calc(var(--font25)*2); margin-top: 1em; font-weight: 700; line-height: 1.3; color: var(--black);}
.contact .ct-top .inquiry-form .step-box .inquiry-item.end-step ul {font-size: var(--font20); --color:#333; margin-top: 1em; }
.contact .ct-top .inquiry-form .step-box .inquiry-item.end-step ul li {display: block; width: fit-content; margin: auto;}
.contact .ct-top .inquiry-form .step-box .inquiry-item.end-step .btn-box {margin-top: var(--gap80); display: flex; gap: calc(var(--gap10)*5); justify-content: center; }
.contact .ct-top .inquiry-form .step-box .inquiry-item.end-step .btn-box a {width: 50%; max-width: 390px; font-size: 30px; font-weight: 600;}
.contact .ct-top .inquiry-form .step-box .inquiry-item.end-step .btn-box a svg {width: 30px;}

.contact .ct-top .inquiry-form.ending .step-indicator {opacity: 0;}
.contact .ct-top .inquiry-form.ending .step-ctrl {opacity: 0;}


.contact .ct-btm {padding: calc(var(--gap10)*6) 0 var(--gap100); overflow: hidden; }
.contact .ct-btm .inner2 {display: flex; gap: var(--gap40); align-items: stretch; }
.contact .ct-btm .inner2 > div {width: calc((100% - var(--gap40))/2);}
.contact .ct-btm .left {text-align: center; padding: var(--gap32); display: flex; flex-direction: column; justify-content: end; gap: 70px; }
.contact .ct-btm .left .logo {height: 70px; width: 100%;}
.contact .ct-btm .left .logo svg {max-height: 100%; max-width: 90%;}
.contact .ct-btm .left .addr {--gap:64px; display: flex; align-items: stretch; justify-content: center; font-size: var(--font20); color: #333; line-height: 1.2; gap: var(--gap);  }
.contact .ct-btm .left .addr .addr-item {display: flex; align-items: center; justify-content: center; flex-direction: column; gap: var(--gap10); position: relative; }
.contact .ct-btm .left .addr .addr-item:nth-child(2)::before,
.contact .ct-btm .left .addr .addr-item:nth-child(2)::after {content:""; width: 1px; height: 100%; position: absolute; background: #999; top: 0;}
.contact .ct-btm .left .addr .addr-item:nth-child(2)::before {left: calc(var(--gap)*-0.5);}
.contact .ct-btm .left .addr .addr-item:nth-child(2)::after {right: calc(var(--gap)*-0.5);}
.contact .ct-btm .left .addr .addr-item .tit {font-weight: 700;}
.contact .ct-btm .left .addr .addr-item .desc {font-family: var(--pretendard); letter-spacing: -0.01em; }
.contact .ct-btm .left .btn-box .button {--gap:3px; --arrH:35px;}
.contact .ct-btm .left .btn-box .button .arrow {position: relative; margin-bottom: 3px;}
.contact .ct-btm .left .btn-box .button .arrow::before {content:""; width: 100%; height: 4px; background: var(--primary); position: absolute; left: 0; bottom: 0; }
.contact .ct-btm .map-box {border-radius: var(--gap100); overflow: hidden; height: 500px;}
.contact .ct-btm .map-box .root_daum_roughmap {width: 100%; height: 100%;}
.contact .ct-btm .map-box .root_daum_roughmap .wrap_map {height: 100%;}
.contact .ct-btm .map-box .root_daum_roughmap .wrap_controllers {display: none;}
.contact .ct-btm .map-box .root_daum_roughmap .cont {display: none;}

.modal-layer[data-modal="privacy"] .modal-cont {}
.modal-layer[data-modal="privacy"] .modal-cont > p {margin: 0.9em 0;}
.modal-layer[data-modal="privacy"] .modal-cont > ul > li p {font-weight: 600;}
.modal-layer[data-modal="privacy"] .modal-cont > ul > li + li {margin-top: 0.68em;}
.modal-layer[data-modal="privacy"] .modal-cont .dot-list {--color:#222; }

@media screen and (max-width:1820px){
  .contact .ct-top .inquiry-form .step-box .inquiry-item .tit {font-size: 50px;}
}
@media screen and (max-width:1440px){
  .contact .ct-btm .map-box {height: 650px;}
  .contact .ct-btm .left .addr {flex-direction: column; gap: 32px;}
  .contact .ct-btm .left .addr .addr-item:nth-child(2)::before, 
  .contact .ct-btm .left .addr .addr-item:nth-child(2)::after {display: none;}
}
@media screen and (max-width:1280px){
  .contact {--fontZ:20px;}
  .contact .ct-top .inquiry-form .step-box .inquiry-item .tit {font-size: calc(var(--fontZ)*2);}
  .contact .ct-top .inquiry-form .step-box .inquiry-item .tit br {display: none;}

  .contact .ct-top .inquiry-form .step-box .inquiry-item .form-line {flex-direction: column; align-items: start; gap: 0.5em;}
  .contact .ct-top .inquiry-form .step-box .inquiry-item .form-line + .form-line {margin-top: 1.5em;}
  .contact .ct-top .inquiry-form .step-box .inquiry-item .form-line .cont {width: 100%;}

  .contact .ct-top .inquiry-form .step-box .inquiry-item.end-step .btn-box a {font-size: 25px; max-width: 360px;}
}
@media screen and (max-width:1024px){
  .contact {--fontZ:16px;}

  .contact .ct-top .inquiry-form .step-box .inquiry-item .question-box {flex-direction: column; gap: var(--gap80);}
  .contact .ct-top .inquiry-form .step-box .inquiry-item .form-box {gap: 16px;}
  .contact .ct-top .inquiry-form .step-box .inquiry-item .left,
  .contact .ct-top .inquiry-form .step-box .inquiry-item .right {width: 100%;}

  .contact .ct-top .inquiry-form .step-box .inquiry-item.step1 {}
  .contact .ct-top .inquiry-form .step-box .inquiry-item.step1 .form-box.btm .color1 {font-size: 14px;}
  .contact .ct-top .inquiry-form .step-box .inquiry-item.step4 .question-box:last-child .left {margin-top: 0px;}
  .contact .ct-top .inquiry-form .step-box .inquiry-item.step5 .question-box:first-child .right {margin-top: 0px;}

  .contact .ct-top .inquiry-form .step-box .inquiry-item.end-step .tit {font-size: 70px;}
  .contact .ct-top .inquiry-form .step-box .inquiry-item.end-step .tit2 {font-size: 32px;}
  .contact .ct-top .inquiry-form .step-box .inquiry-item.end-step .btn-box a svg {width: 24px;}

  .contact .ct-btm .inner2 {flex-direction: column;}
  .contact .ct-btm .inner2 > div {width: 100%;}
  .contact .ct-btm .left {border-radius: 40px; gap: 40px; }
  .contact .ct-btm .left .logo {height: 50px; margin-top: 20px;}
  .contact .ct-btm .left .addr {flex-direction: row; --gap:54px; gap: var(--gap);}
  .contact .ct-btm .left .addr .addr-item:nth-child(2)::before, 
  .contact .ct-btm .left .addr .addr-item:nth-child(2)::after {display: block;}
  .contact .ct-btm .left .btn-box .button {--arrH: 26px;}
  .contact .ct-btm .left .btn-box .button .arrow::before {height: 3px;}
  .contact .ct-btm .map-box {height: 320px; border-radius: 40px;}
}
@media screen and (max-width:768px){
  .contact .ct-top .inquiry-form .step-box .inquiry-item .form-box {gap: 12px 10px;}
  .contact .ct-top .inquiry-form .step-box .inquiry-item .form-line .box {min-height: 56px; }

  .contact .ct-top .inquiry-form .step-box .inquiry-item.end-step .tit {font-size: 56px;}
  .contact .ct-top .inquiry-form .step-box .inquiry-item.end-step .tit2 {font-size: 26px;}
  .contact .ct-top .inquiry-form .step-box .inquiry-item.end-step ul li {text-align: left; width: 90%;}
  .contact .ct-top .inquiry-form .step-box .inquiry-item.end-step .btn-box {gap: 16px; }
  .contact .ct-top .inquiry-form .step-box .inquiry-item.end-step .btn-box a {font-size: 16px;}
  .contact .ct-top .inquiry-form .step-box .inquiry-item.end-step .btn-box a svg {width: 20px; }

  .contact .ct-btm .left .addr {font-size: 16px; flex-direction: column; --gap:32px;}
  .contact .ct-btm .left .addr .addr-item:nth-child(2)::before, 
  .contact .ct-btm .left .addr .addr-item:nth-child(2)::after {display: none;}
}
@media screen and (max-width:480px){
  .contact {--fontZ:15px;}
  .contact .ct-top .inquiry-form .step-indicator .idt-box {width: 54px;}
  .contact .ct-top .inquiry-form .step-indicator .idt-box p {font-size: 12px;}

  .contact .ct-top .inquiry-form .step-ctrl {justify-content: space-between; font-size: 26px;}
  .contact .ct-top .inquiry-form .step-ctrl button svg {width: 26px;}

  .contact .ct-top .inquiry-form .step-box .inquiry-item .sub-tit {margin-bottom: 1em;}
  .contact .ct-top .inquiry-form .step-box .inquiry-item .etc {font-size: 15px;}

  .contact .ct-top .inquiry-form .step-box .textarea-box {height: 200px;}
  
  .contact .ct-top .inquiry-form .step-box .attach-btn .button svg {width: 20px;}

  .contact .ct-top .inquiry-form .step-box .submit-btn .button {--arrW:22px;}

  .contact .ct-top .inquiry-form .step-box .inquiry-item.end-step .tit {font-size: 40px;}
  .contact .ct-top .inquiry-form .step-box .inquiry-item.end-step .tit2 {font-size: 20px;}
  .contact .ct-top .inquiry-form .step-box .inquiry-item.end-step ul {font-size: 14px;}
  .contact .ct-top .inquiry-form .step-box .inquiry-item.end-step .btn-box {flex-direction: column; gap: 8px; align-items: center;}
  .contact .ct-top .inquiry-form .step-box .inquiry-item.end-step .btn-box a {width: 240px;}

  .contact .ct-btm .left .btn-box .button {--arrH:20px;}
  .contact .ct-btm .left .btn-box .button .arrow::before {height: 2px;}
}


/* faq */
.faq .faq-list {}
.faq .faq-list .faq-list-box {display: flex; flex-direction: column; gap: calc(var(--gap10)*2);}
.faq .faq-list .faq-list-box .faq-item {--size:20px; font-size: var(--size); }
.faq .faq-list .faq-list-box .faq-item .item-box .wrapper {padding: calc(var(--size)*2) calc(var(--size)*2.5); background: var(--white); border-radius: var(--size); position: relative; display: flex; gap: calc(var(--size)*2.5); font-family: var(--pretendard); letter-spacing: -0.01em; align-items: start; justify-content: start; }
.faq .faq-list .faq-list-box .faq-item .item-box .wrapper::before {content:""; font-family: var(--montserrat); color: var(--white); background: var(--primary);  font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; font-size: calc(var(--size)*2); border-radius: calc(var(--size)*0.25); width: calc(var(--size)*3); aspect-ratio: 1; flex-shrink: 0; }
.faq .faq-list .faq-list-box .faq-item .item-box .icon {position: absolute; right: 0; top: 50%; transform: translate(calc(var(--size)*-2.5),-50%); width: calc(var(--size)*3); height: calc(var(--size)*3); border-radius: 50%; background: #eee;}
.faq .faq-list .faq-list-box .faq-item .item-box .icon::before,
.faq .faq-list .faq-list-box .faq-item .item-box .icon::after {content:""; width: 50%; height: 3px; background: #000; border-radius: 2px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.faq .faq-list .faq-list-box .faq-item .item-box .icon::after {transform: translate(-50%,-50%) rotate(90deg); transition: transform 0.3s;}

.faq .faq-list .faq-list-box .faq-item.open .item-box .icon::after {transform: translate(-50%,-50%) rotate(0deg);}

.faq .faq-list .faq-list-box .faq-item .item-box.q-box .wrapper {font-size: calc(var(--size)*2); color: #333; font-weight: 700; line-height: 1.2; padding-right: calc(var(--size)*7); cursor: pointer;}
.faq .faq-list .faq-list-box .faq-item .item-box.q-box p {margin-top: calc(var(--size)*0.3);}
.faq .faq-list .faq-list-box .faq-item .item-box.q-box .wrapper::before {content:"Q";}
.faq .faq-list .faq-list-box .faq-item .item-box.a-box {display: none;}
.faq .faq-list .faq-list-box .faq-item .item-box.a-box .wrapper {font-size: max(var(--size), 14px); line-height: 1.7; color: #111; margin-top: var(--size);}
.faq .faq-list .faq-list-box .faq-item .item-box.a-box .wrapper::before {content:"A";}

@media screen and (max-width:1280px){
  .faq .faq-list .faq-list-box .faq-item {--size:16px;}
}
@media screen and (max-width:768px){
  .faq .faq-list .faq-list-box .faq-item {--size:12px;}
  .faq .faq-list .faq-list-box .faq-item .item-box.a-box p br {display: none;}
}
@media screen and (max-width:480px){
  .faq .faq-list .faq-list-box .faq-item {--size:10px;}
  .faq .faq-list .faq-list-box .faq-item .item-box .wrapper {padding: calc(var(--size)*2); gap: calc(var(--size)*1.5);}
  .faq .faq-list .faq-list-box .faq-item .item-box .wrapper::before {font-size: calc(var(--size)*1.5); width: calc(var(--size)*2.5);}
  .faq .faq-list .faq-list-box .faq-item .item-box .icon {transform: translate(calc(var(--size)*-2),-50%);}
  .faq .faq-list .faq-list-box .faq-item .item-box .icon::before, 
  .faq .faq-list .faq-list-box .faq-item .item-box .icon::after {width: 46%; height: 2px;}

  .faq .faq-list .faq-list-box .faq-item .item-box.q-box p {margin-top: 0;}
  .faq .faq-list .faq-list-box .faq-item .item-box.q-box .wrapper {font-size: calc(var(--size)*1.8);}
}


/* tag page */
main.sub.tag-page .page-top .sub-tit {font-size: clamp(15px,1.82vw, 35px); font-family: var(--pretendard); letter-spacing: -0.01em; line-height: 1.7;}
main.sub.tag-page .page-top h1 {font-size: clamp(28px,5.2vw, 100px); font-family: var(--pretendard); letter-spacing: -0.01em; font-weight: 400; line-height: 1.2; margin-top: 0.4em;}
main.sub.tag-page .page-top h1 em {color: var(--primary); font-size: 1.2em; font-weight: 700;}

.tag-page .tab-menu {margin-bottom: var(--gap40);}
.tag-page .bd-list .bd-list-box {margin-top: 0;}

@media screen and (max-width:1280px){}
@media screen and (max-width:1024px){}
@media screen and (max-width:768px){}
@media screen and (max-width:480px){}