@charset "utf-8";

/* sub */
#content .content-wrap { padding: calc(var(--gap100)/2) 0 calc(var(--gap100)*2.5); }
#content .content-wrap section {width: 100%; overflow: hidden;}
#content .content-wrap section .inner {width: 90%; max-width: 1740px; margin: 0 auto;}
#content .content-wrap .subpage-head {display: flex; justify-content: space-between; align-items: end; margin-bottom: var(--gap100); flex-wrap: wrap; gap: 40px;}
#content .content-wrap .subpage-head .title {font-size: 150px; font-weight: 700; line-height: 1.5;}
#content .content-wrap .subpage-head .desc {font-size: var(--font20); padding-bottom: 2.2em; padding-right: 5%; line-height: 1.5; margin-left: auto;}

@media screen and (max-width:1260px){
  #content .content-wrap .subpage-head {flex-direction: column; align-items: start;}
  #content .content-wrap .subpage-head .title {font-size: 120px;}
}
@media screen and (max-width:1024px){
  #content .content-wrap .subpage-head .title {font-size: 100px;}
}
@media screen and (max-width:768px){
  #content .content-wrap  section .inner {width: 90%;}
  #content .content-wrap .subpage-head .title {font-size: 64px;}
  #content .content-wrap .subpage-head .desc {margin-left: 0; padding-right: 0;padding-bottom: 0;}
}
@media screen and (max-width:480px){
  #content .content-wrap .subpage-head {gap: 26px;}
  #content .content-wrap .subpage-head .title {font-size: 46px;}
  #content .content-wrap .subpage-head .desc {font-size: 14px;}
}

/******************** works list ********************/
.work-area {}
.work-area .category { max-width: 1310px; margin: auto;  --itemH:43px; position: relative; }
.work-area .category .cate-box {width: 100%; padding: 0 55px; display: flex; justify-content: center; align-items: start; gap: 10px; flex-wrap: wrap; max-height: calc(var(--itemH)*2 + 10px); overflow: hidden;}
.work-area .category .more-btn {height: 40px; position: absolute; right: 0; bottom: 0; display: none;}
.work-area .category .cate {display: flex; border-radius: 8px; border: 1px solid var(--primary-op); align-items: center; justify-content: center; padding: 0 20px; font-weight: 600; line-height: 1.5; font-size: var(--font18); color: var(--primary); height: var(--itemH);}
.work-area .category .cate.on {color: var(--white); background: var(--primary);}

.work-area .category .cate-box.open {max-height: unset;}

.work-area .works-list {margin-top: var(--gap80); margin-bottom: calc(var(--gap100)*1.5); display: flex; gap: var(--gap100) var(--gap40); flex-wrap: wrap; padding: 0 1.7%;}
.work-area .works-list .work-item {width: calc((100% - var(--gap40))/2);}
.work-area .works-list .work-item .thumbnail {width: 100%; overflow: hidden;}
.work-area .works-list .work-item .thumbnail span {display: block; padding-top: 60.9%; overflow: hidden; position: relative; }
.work-area .works-list .work-item .thumbnail span img {width: 100%; height: 100%; object-fit: cover;  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); transition: transform 0.8s;}
.work-area .works-list .work-item .thumbnail:hover span img {transform: translate(-50%,-50%) scale(1.1);}
.work-area .works-list .work-item .name {font-family: var(--mincho); font-weight: 700; font-size: var(--font28); margin-top: 1em; margin-bottom: 0.6em;}
.work-area .works-list .work-item .tag-box {max-height: 90px; overflow: hidden;}
.work-area .works-list .work-item .tag-box .tag {cursor: default;}
@media screen and (max-width:1024px){
  .work-area .works-list .work-item .tag-box {max-height: 82px; gap: 8px; }
}
@media screen and (max-width:768px){
  .work-area .category {--itemH:38px; }
  .work-area .category .cate-box {justify-content: start;  padding-left: 0; padding-right: 40px;}
  .work-area .category .cate {font-size: 15px; padding: 0 1em; }
  .work-area .category .more-btn {height: 36px;}

  .work-area .works-list {padding: 0;}
  .work-area .works-list .work-item {width: 100%;}
  .work-area .works-list .work-item .tag-box {}
  .work-area .works-list .work-item .thumbnail span::after {content:""; position: absolute; right: 5%; bottom: 10%; width: 24px; height: 10px; background: url(/img/arrow_r_red.svg) center no-repeat; background-size: cover; }
}
@media screen and (max-width:480px){
  .work-area .works-list .work-item .tag-box {max-height: 66px; gap: 6px; }
  .work-area .works-list .work-item .tag-box .tag {min-height: 30px; padding: 0 15px;}
}

/******************** works view ********************/
.work-view {}
.work-view .work-top {padding-top: calc(var(--gap100)*0.3);}
.work-view .work-top .title { font-size: calc(var(--font25)*2); border: solid var(--primary-op); border-width: 1px 0 1px 0; margin-bottom: 1em; padding: 0.5em 0; text-align: center;}
.work-view .work-top .title h1 {font-size: inherit; font-family: var(--mincho); font-weight: 800;}
.work-view .work-top .main-img {width: 100%; font-size: 0; text-align: center;}
.work-view .work-top .main-img img {width: 100%;}

.work-view .work-top .work-info {margin-top: calc(var(--gap100)*0.6); display: flex; justify-content: space-between; align-items: start; gap: var(--gap80);}
.work-view .work-top .work-info .tag-box {max-width: 650px; }
.work-view .work-top .work-info .tag-box .tag {font-family: var(--noto); font-weight: 500;}
.work-view .work-top .work-info .info {width: 280px;}
.work-view .work-top .work-info .info li {display: flex; justify-content: space-between; align-items: center; font-size: var(--font16); gap: 20px;}
.work-view .work-top .work-info .info li + li {margin-top: var(--gap10);}
.work-view .work-top .work-info .info li .tit {}
.work-view .work-top .work-info .info li .cont {font-weight: 600;}

.work-view .work-details {margin-top: var(--gap100);}
.work-view .work-details .detail-item {margin-bottom: var(--gap100); display: flex; justify-content: space-between; --title-size:65px; gap: 0.2em var(--gap80);}
.work-view .work-details .detail-item .heading {flex-shrink: 0; width: calc(40% - var(--gap80));}
.work-view .work-details .detail-item .cont {padding-top: calc(var(--title-size)*0.4); max-width: 1000px; width: 60%;}

.work-view .work-details .detail-item .title {font-weight: 600; font-size: var(--title-size);}
.work-view .work-details .detail-item .tit {font-weight: 600; font-size: var(--font20); margin-bottom: 0.5em;}
.work-view .work-details .detail-item .desc.en {font-size: var(--font18);}
.work-view .work-details .detail-item .desc.ko {font-size: var(--font16);}
.work-view .work-details .detail-item .desc + .desc {margin-top: var(--gap10);}

.work-view .work-details .detail-item .item-box {}
.work-view .work-details .detail-item .item-box + .item-box {margin-top: calc(var(--gap100)/2);}
.work-view .work-details .detail-item .item-box.ty2 + .item-box.ty2 {margin-top: calc(var(--gap100)*0.3);}
.work-view .work-details .detail-item .item-box.ty2 .desc + .desc {margin-top: calc(var(--gap10)/2);}

.work-view .work-details .detail-item .item-box.ty3 {display: flex; gap: calc(var(--gap100)/2); flex-wrap: wrap; text-align: left;}
.work-view .work-details .detail-item .item-box.ty3 .item {width: calc((100% - var(--gap100))/3); max-width: 300px; }

.work-view .work-details .detail-item .item-box.ty4 {}
.work-view .work-details .detail-item .item-box.ty4 .tit {margin-bottom: 0.75em;}

.work-view .work-details .detail-item .item-box.character-box {display: flex; gap: 40px calc(var(--gap100)/2); flex-wrap: wrap;}
.work-view .work-details .detail-item .item-box.character-box .item {width: 130px; text-align: center;}
.work-view .work-details .detail-item .item-box.character-box .item .img-box {font-size: 0;}
.work-view .work-details .detail-item .item-box.character-box .item p {font-size: var(--font16); margin-top: 0.94em;}

.work-view .work-imgs {margin-top: calc(var(--gap100)/2); --gap:calc(var(--gap100)/2)}
.work-view .work-imgs .img-list {display: flex; flex-direction: column; gap: var(--gap);}
.work-view .work-imgs .img-list .img-item {font-size: 0; }
.work-view .work-imgs .img-list .img-type1 {width: 100%;}
.work-view .work-imgs .img-list .img-type1 .img-item {width: 100%;}
.work-view .work-imgs .img-list .img-type2 {width: 100%; display: flex; gap: var(--gap);}
.work-view .work-imgs .img-list .img-type2 .img-item {width: calc((100% - var(--gap))/2);}
@media screen and (max-width:1260px) {
  .work-view .work-details .detail-item {--title-size: 50px;}
}
@media screen and (max-width:1024px){
  .work-view .work-top .work-info {flex-direction: column-reverse;}
  .work-view .work-top .work-info .tag-box {max-width: 100%;}
  .work-view .work-top .work-info .info {margin-left: auto;}

  .work-view .work-details .detail-item {flex-direction: column;}
  .work-view .work-details .detail-item .heading,
  .work-view .work-details .detail-item .cont {width: 100%;}
}
@media screen and (max-width:768px){
  .work-view .work-details .detail-item {--title-size: 46px;}
  .work-view .work-details .detail-item .item-box.character-box .item {width: 100px;}
  .work-view .work-details .detail-item .item-box.ty3 .item {width: calc((100% - var(--gap100)/2)/2);}

  .work-view .work-imgs .img-list {--gap:24px; }
}
@media screen and (max-width:480px){
  .work-view .work-top .title {font-size: 30px;}
  .work-view .work-top .work-info .info {width: 100%;}
  .work-view .work-top .work-info .tag-box {gap: 6px; }
  .work-view .work-top .work-info .tag-box .tag {padding: 0 16px; min-height: 34px; }

  .work-view .work-details .detail-item .desc.en {font-size: 15px;}
  .work-view .work-details .detail-item .desc.ko {font-size: 14px;}
  .work-view .work-details .detail-item .item-box.ty3 .item {width: 100%; max-width: 100%; }

  .work-view .work-details .detail-item .item-box.character-box {gap: 16px; }
  .work-view .work-details .detail-item .item-box.character-box .item {width: calc((100% - 32px)/3);}

  .work-view .work-imgs .img-list {--gap:12px; }
}


/* quote */



/******************** about ********************/
#content .content-wrap.about {padding: 0;}
#content .content-wrap.about section {padding: var(--gap100) 0;}
#content .content-wrap.about section .section-title {font-size: calc(var(--font20)*4.5); font-weight: 700; }
@media screen and (max-width:768px){
  #content .content-wrap.about section .section-title {font-size: calc(var(--font20)*2.6);}
}
@media screen and (max-width:480px){
  #content .content-wrap.about section .section-title {font-size: 36px;}
}

/* visual */
@keyframes iconRotate {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}
.about .visual {width: 100%; height: calc(100vh - var(--headerH)); align-items: start;}
#content .content-wrap.about .visual .subpage-head {flex-direction: column; align-items: start; gap: 0;}

.about .visual .inner {display: flex; flex-direction: column; justify-content: space-between; height: 100%; position: relative;}
.about .visual .since {font-size: calc(var(--font20)*1.1); font-weight: 600;}
.about .visual .icon {position: absolute; right: 0; top: 0; font-size: 0; display: flex; align-items: end; transform: translateY(-20%);}
.about .visual .icon .img1 {width: 130px; transform: translateY(40%);}
.about .visual .icon .img1 img {animation: iconRotate 6s linear infinite;}
.about .visual .icon .img2 img {animation: iconRotate 9s linear infinite;}
.about .visual .side {position: absolute; left: 0; bottom: 0; font-size: calc(var(--font20)*1.1); font-weight: 600;}
.about .visual .side p { }
.about .visual .side p span {display: block; transform: translateY(100%); opacity: 0; transition: 1s 0.4s;}
.about .visual .desc > div {width: fit-content; margin-left: auto;}
.about .visual .desc .en {font-weight: 600; font-size: 36px;}
.about .visual .desc .ko {font-size: var(--font20); margin-top: 1em;}

.about .visual.ani-start .side p span {transform: translateY(0%); opacity: 1;}

@media screen and (max-width:1440px){
  .about .visual .icon {top:unset; bottom: 200px;} 
}
@media screen and (max-width:1024px){
  .about .visual .desc .en {font-size: 28px;}
}
@media screen and (max-width:768px){
  .about .visual .inner {padding: var(--gap40) 0; justify-content: start;}

  .about .visual .desc > div {margin: 0;}
  .about .visual .desc .ko {display: none;}
  .about .visual .desc .en {font-size: 24px;}

  .about .visual .side {height: 100%; display: flex; align-items: center; justify-content: center; width: 1.5em; padding-top: 20%;}
  .about .visual .side p {transform: rotate(90deg); white-space: nowrap;}
  
  .about .visual .icon {bottom: 30px; transform: translateY(0);}
  .about .visual .icon .img1 {width: 100px;}
  .about .visual .icon .img2 {width: 200px;}
}
@media screen and (max-width:480px){
  #content .content-wrap.about .visual .subpage-head {margin-bottom: 40px;}
  .about .visual .inner {padding: 0;}
  .about .visual .since {font-size: 14px;}
  .about .visual .desc .en {font-size: 18px;}
  .about .visual .side {font-size: 14px; }

  .about .visual .icon .img2 {width: 180px;}
}

/* philosophy */
.about .philosophy {margin-bottom: var(--gap100);}
.about .philosophy .section-head {margin-bottom: var(--gap80);}
.about .philosophy .section-head .section-title {text-align: center;}
.about .philosophy .img-box {display: flex; justify-content: center; align-items: center; gap: var(--gap100); font-size: 0;  width: 100%; max-width: 960px; margin: auto; margin-bottom: 60px;}
.about .philosophy .img-box .img img {max-width: 100%;}
.about .philosophy .img-box .left {flex: 1;}
.about .philosophy .img-box .center {flex: 2;}
.about .philosophy .img-box .right {flex: 1;}
.about .philosophy .text-box {text-align: center;}
.about .philosophy .text-box .head {font-weight: 600;}
.about .philosophy .text-box .head .en {font-size: calc(var(--font20)*2);}
.about .philosophy .text-box .head .ko {font-size: var(--font20); margin-top: 1em;}
.about .philosophy .text-box .desc {font-size: var(--font20); margin-top: 2em;}
.about .philosophy .text-box .desc .ko {font-size: 0.8em; margin-top: 1.25em; }

@media screen and (max-width:768px){
  .about .philosophy .img-box {gap: 30px;}
  .about .philosophy .text-box .head .en {font-size: calc(var(--font20)*1.4);}

  .about .philosophy .text-box .desc .en br {display: none;}
}
@media screen and (max-width:480px){
  .about .philosophy .text-box .head .en {font-size: 20px;}
  .about .philosophy .text-box .head .ko {font-size: 15px;}
  .about .philosophy .text-box .head .ko .mo-br {display: block;}

  .about .philosophy .text-box .desc {font-size: 15px;}
  .about .philosophy .text-box .desc .ko {font-size: 1em;}
  .about .philosophy .text-box .desc .ko br {display: none;}
}

/* rolling banner */
.about .rolling-banner {width: 100%; background: var(--secondary); overflow: hidden; display: flex; align-items: center;  font-size: 0;}
#content .content-wrap.about section.rolling-banner {padding: max(calc(var(--vwpx)*30), 30px) 0;}
.about .rolling-banner .swiper-container {width: 100%;}
.about .rolling-banner .swiper-wrapper {transition-timing-function: linear !important; position: relative;}
.about .rolling-banner .swiper-slide {width: fit-content; padding: 0 max(calc(var(--vwpx)*75), 75px);}
.about .rolling-banner img {height: max(calc(var(--vwpx)*35), 35px);}

@media screen and (max-width:768px){
  #content .content-wrap.about section.rolling-banner {padding: 20px 0 !important;}
  .about .rolling-banner .swiper-slide {padding: 0 20px; }
  .about .rolling-banner img {height: 24px;}
}

/* mission */
@keyframes imgRotate {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}
#content .content-wrap.about section.mission {padding: calc(var(--gap100)*1.5) 0 calc(var(--gap100)*1.8);}
.about .mission {background: var(--secondary); }
.about .mission .section-head {display: flex; justify-content: space-between; margin-bottom: var(--gap80); }
.about .mission .section-head .section-desc {padding-left: 30px; padding-top: 40px; width: 50%;}
.about .mission .section-head .section-desc .en {font-size: calc(var(--font20)*1.1); margin-bottom: 0.9em;}
.about .mission .section-head .section-desc .ko {font-size: var(--font18); }

.about .mission .mission-slide {display: flex; justify-content: space-between; align-items: center;}
.about .mission .img-slide {width: calc(50% - 70px); background: var(--bgc); overflow: hidden; }
.about .mission .img-slide .item {width: 100%; padding: var(--gap40) 0; text-align: center; background: var(--bgc);}
.about .mission .img-slide .item .img-box {margin: auto; font-size: 0;}
.about .mission .img-slide .item .img-box img {max-width: 100%;}
.about .mission .img-slide .item p {font-size: calc(var(--font20)*1.1); margin-top: 1.1em; font-weight: 600;}
.about .mission .text-slide {width: calc(50% - 30px); padding: 10px 0; margin-left: 30px;  }
.about .mission .text-slide .swiper-wrapper {flex-direction: column;}
.about .mission .text-slide .text-item {padding: 30px 60px; display: flex; align-items: center; gap: 12px var(--gap80); border-top: 1px solid var(--primary-op); transition: background-color 0.5s; }
.about .mission .text-slide .swiper-slide:last-child .text-item {border-bottom: 1px solid var(--primary-op);}
.about .mission .text-slide .text-item .num {font-weight: 600; font-size: var(--font20);}
.about .mission .text-slide .text-item .name {font-family: var(--mincho); font-size: 40px; font-weight: 700;}
.about .mission .text-slide .text-item p {display: none; font-size: var(--font18);}

.about .mission .text-slide .swiper-slide-active .text-item {background-color: var(--bgc); }

.about .mission .swiper-pagination {opacity: 0; pointer-events: none;}


@media screen and (max-width:1440px) {
  .about .mission .section-head {flex-direction: column;}
  .about .mission .section-head .section-desc {width: fit-content; margin-left: auto;}
  .about .mission .img-slide {width: calc(50% - 20px);}
  .about .mission .img-slide .item .img-box {width: 300px;}
  .about .mission .text-slide {width: calc(50% - 20px); margin-left: 0;}
  .about .mission .text-slide .text-item {padding: 24px 40px; }
  .about .mission .text-slide .text-item .name {font-size: 30px;}
}
@media screen and (min-width:1025px){
  .about .mission .img-slide .swiper-slide-active .item .img-box img {animation: imgRotate 3s linear 0.1s infinite;}
}
@media screen and (max-width:1024px){
  .about .mission .mission-slide {flex-direction: column; gap: var(--font26);}
  .about .mission .img-slide {background: none; width: 100%;}
  .about .mission .img-slide .item .img-box {width: 200px;}
  .about .mission .img-slide .item p {display: none;}
  .about .mission .text-slide {width: 100%;}
  .about .mission .text-slide .swiper-wrapper {flex-direction: row;}
  .about .mission .text-slide .text-item {padding: var(--font18) 0; flex-direction: column; border-bottom: 1px solid var(--primary-op);}
  .about .mission .text-slide .text-item p {display: block;}
  .about .mission .text-slide .swiper-slide-active .text-item {background-color: unset;}
  .about .mission .swiper-pagination {opacity: 1; pointer-events: auto;}
}
@media screen and (max-width:768px){
  .about .mission .section-title {text-align: center;}
  .about .mission .section-head {margin-bottom: 60px;}
  .about .mission .section-head .section-desc {padding-left: 0; text-align: center; margin-left: unset; width: 100%; max-width: 320px; margin: auto;}
  .about .mission .section-head .section-desc .en,
  .about .mission .section-head .section-desc .ko {font-size: 15px;}
  .about .mission .section-head .section-desc .en .br {display: none;}

  .about .mission .img-slide {overflow: visible;}
}
@media screen and (max-width:480px){
  .about .mission .section-head .section-desc {max-width: 100%;}
  .about .mission .img-slide .item {padding: 30px 0;}
  .about .mission .img-slide .item .img-box {width: 140px;}
  .about .mission .text-slide .text-item .name {font-size: 28px;}
  .about .mission .text-slide .text-item p {font-size: 15px;}
}


/* story */
.about .story {}
.about .story .section-head {margin-bottom: calc(var(--gap100)/2); }
.about .story .tab-area {display: flex; justify-content: space-between; align-items: start;}
.about .story .tab-area .tab-menu {display: flex; flex-direction: column; gap: 24px 10px;}
.about .story .tab-area .tab-menu .tab-btn {display: inline-flex; height: 52px; align-items: center; justify-content: center; padding: 0 36px; border-radius: 26px; font-size: var(--font24); font-weight: 700; color: var(--primary); flex-shrink: 0; }
.about .story .tab-area .tab-menu .tab-btn.active {background: var(--primary); color: var(--bgc); }
.about .story .tab-area .tab-cont {width: 50%; padding: 0 30px;}
.about .story .tab-area .tab-cont .tab-cont-box {display: none;}
.about .story .tab-area .tab-cont .tab-cont-box.active {display: block;}
.about .story .tab-area .tab-cont .tab-cont-box article {padding: var(--gap40) 0;}
.about .story .tab-area .tab-cont .tab-cont-box article + article {border-top: 1px solid var(--primary-op);}

.about .story .tab-area .tab-cont .tab-cont-box article .story-item + .story-item {margin-top: var(--gap40);}
.about .story .tab-area .tab-cont .tab-cont-box article .story-item .year {font-size: var(--font24); font-weight: 600;}
.about .story .tab-area .tab-cont .tab-cont-box article .story-item .text {font-size: var(--font20); margin-top: 0.75em; }

.about .story .tab-area .tab-cont .tab-cont-box article:first-child {padding-top: 0;}
.about .story .tab-area .tab-cont .tab-cont-box article:last-child {padding-bottom: 0;}

@media screen and (max-width:1260px){
  .about .story .tab-area .tab-cont {width: 70%;}
}
@media screen and (max-width:768px){
  .about .story .section-head {text-align: center;}
  .about .story .tab-area {flex-direction: column; }
  .about .story .tab-area .tab-menu {flex-direction: row; margin-bottom: 50px; overflow-x: auto; }
  .about .story .tab-area .tab-menu .tab-btn {height: 40px; border-radius: 8px; border: 1px solid var(--primary-op); padding: 0 20px;}
  .about .story .tab-area .tab-cont {width: 100%; padding: 0;}

  .about .story .tab-area .tab-cont .tab-cont-box article .story-item .year {}
}
@media screen and (max-width:480px){
  .about .story .tab-area .tab-menu .tab-btn {font-size: 15px;}

  .about .story .tab-area .tab-cont .tab-cont-box article {padding: 30px 0;}
  .about .story .tab-area .tab-cont .tab-cont-box article .story-item + .story-item {margin-top: 30px;}
  .about .story .tab-area .tab-cont .tab-cont-box article .story-item .year {font-size: 15px;}
  .about .story .tab-area .tab-cont .tab-cont-box article .story-item .text {font-size: 15px; margin-top: 0.35em;}
}

/* where */
.about .where {margin: var(--gap100) 0;}
.about .where .section-head .section-title {text-align: center;}

.about .where .location {padding-top: 510px; position: relative; margin-top: 40px;}
.about .where .location .globe {position: absolute; left: 50%; top: 60px; transform: translateX(-50%); font-size: 0;}
.about .where .location .globe .logo {width: 100%; text-align: center; position: absolute; top: 50%; transform: translateY(-50%); opacity: 0;}

.about .where .location .map-box {width: 100%; height: 510px; position: absolute; left: 0; top: 0;}
.about .where .location .map-box .branch {position: absolute;}
.about .where .location .map-box .branch .title {position: absolute;}
.about .where .location .map-box .branch .title div {font-family: var(--mincho); margin-bottom: 28px; font-weight: 700; font-size: 30px; }
.about .where .location .map-box .branch .title ul {font-size: var(--font16); min-height: 3em; }
.about .where .location .map-box .branch .title li {font-family: var(--noto);  position: relative; padding-left: 1.5em;}
.about .where .location .map-box .branch .title li::before {content:""; width: 0.25em; height: 0.25em; border-radius: 50%; position: absolute; left: 0.6em; top: 0.65em; background: var(--primary);}
.about .where .location .map-box .branch .img-wrap {display: flex; gap: 16px; align-items: end; flex-direction: row-reverse;}
.about .where .location .map-box .branch .loca {width: 185px; font-size: 0; border: 1px solid var(--primary-op);}
.about .where .location .map-box .branch .tag-box {flex-direction: column; align-items: start;}
.about .where .location .map-box .branch .tag-box .tag {font-family: var(--noto);}

.about .where .location .map-box .branch .line {position: absolute; font-size: 0;}
.about .where .location .map-box .branch .line svg {vector-effect: non-scaling-stroke; width: 100%;}
.about .where .location .map-box .branch .line .point {position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--primary); box-sizing: border-box; display: flex; align-items: center; justify-content: center;  background: var(--bgc);}
.about .where .location .map-box .branch .line .point::before {content:""; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); }

.about .where .location .map-box .branch.sk {right: 50%; top: 145px; transform: translateX(max(calc(var(--vwpx)*-522),-520px));}
.about .where .location .map-box .branch.sk .title {right: max(calc(var(--vwpx)*-242),-240px); top: 21px;}
.about .where .location .map-box .branch.sk .img-wrap {flex-direction: row;}
.about .where .location .map-box .branch.sk .tag-box {align-items: end;}
.about .where .location .map-box .branch.sk .line {right: 0; transform: translateX(calc(100% - 75px)); top: 79px; width: min(calc(var(--vwpx)*474),472px);}
.about .where .location .map-box .branch.sk .line .point {right: -4px; top: -10px;}
.about .where .location .map-box .branch.sk svg {stroke-dasharray: 464; stroke-dashoffset: 464;}

.about .where .location .map-box .branch.ch {left: 50%; top: 0; transform: translateX(min(calc(var(--vwpx)*442),440px));}
.about .where .location .map-box .branch.ch .title {left: max(calc(var(--vwpx)*-172),-170px); top: 30px;}
.about .where .location .map-box .branch.ch .loca {height: 144px; display: flex; align-items: center;}
.about .where .location .map-box .branch.ch .line {left: 0; transform: translateX(calc(-100% + 30px)); top: 87px; width: min(calc(var(--vwpx)*382),380px);}
.about .where .location .map-box .branch.ch .line .point {left: -4px; bottom: -4px;}
.about .where .location .map-box .branch.ch svg {stroke-dasharray: 465; stroke-dashoffset: 465;}

.about .where .location .map-box .branch.vt {left: 50%; bottom: 0px; transform: translateX(min(calc(var(--vwpx)*472),470px));}
.about .where .location .map-box .branch.vt .title {left: max(calc(var(--vwpx)*-222),-220px); bottom: 0px;}
.about .where .location .map-box .branch.vt .line {left: 0; transform: translateX(calc(-100% + 95px)); bottom: 62px; width: min(calc(var(--vwpx)*500),498px);}
.about .where .location .map-box .branch.vt .line .point {left: -4px; top: -10px;}
.about .where .location .map-box .branch.vt svg {stroke-dasharray: 520; stroke-dashoffset: 520;}

.about .where .text-box {font-size: var(--font18); text-align: center; margin-top: 60px;}
.about .where .text-box .ko {margin-top: 1.1em;}

.about .where .swiper-pagination {margin-top: 12px; display: none;}

@media screen and (max-width:1440px){
  .about .where .location {padding-top: 0; margin-top: var(--gap100);}
  .about .where .location .globe {position: relative; left: 0; top: 0; transform: none; display: flex; align-items: center; justify-content: center;}
  .about .where .location .globe .img-box {width: 380px;}
  .about .where .location .globe .logo {opacity: 1;}
  .about .where .location .globe .logo img {width: 160px;}

  .about .where .location .map-box {position: relative; height: auto; margin-top: var(--gap100);}
  .about .where .location .map-box .box-wrap {display: flex; gap: 30px;}
  .about .where .location .map-box .branch {position: relative; left: unset !important; top: unset !important; right:unset !important; bottom: unset !important; transform: none !important; flex: 1; border: 1px solid var(--primary); padding: 28px 36px; display: flex; flex-direction: column; justify-content: space-between;}
  .about .where .location .map-box .branch .img-wrap {flex-direction: row;}
  .about .where .location .map-box .branch .img-wrap .tag-box span {border-radius: 34px;}
  .about .where .location .map-box .branch .line {display: none;}
  .about .where .location .map-box .branch .title {position: static;}
  .about .where .location .map-box .branch .title div {margin-bottom: 12px;}
  .about .where .location .map-box .branch .tag-box {width: 50%;}
  .about .where .location .map-box .branch .tag-box span {font-size: 14px;}
  .about .where .location .map-box .branch .loca {border: none; width: 50%;}
  
  .about .where .location .map-box .branch.sk .tag-box {align-items: start;}
  .about .where .location .map-box .branch.ch .loca {height: unset;}
}
@media screen and (max-width:1024px){
  .about .where .location .map-box .branch {padding: 28px 18px; min-width: 300px;}
  .about .where .location .map-box .branch .title div {font-size: 26px;}

  .about .where .location .map-box .box-wrap {gap: 0;}

  .about .where .swiper-pagination {display: block;}
}
@media screen and (max-width:768px){
  .about .where .text-box .en {max-width: 480px; margin: auto; }
  .about .where .text-box .en br {display: none;}
  .about .where .text-box .ko br {display: none;}
  .about .where .text-box .ko .mo-br {display: block;}
}
@media screen and (max-width:480px){
  .about .where .text-box {font-size: 15px;}

  .about .where .location .globe .img-box {width: 240px;}
  .about .where .location .globe .logo img {width: 105px;}

  .about .where .location .map-box .branch .title div {font-size: 22px; margin-bottom: 10px;}
  .about .where .location .map-box .branch .title ul {font-size: 14px;}
  .about .where .location .map-box .branch .tag-box span {font-size: 13px;}
}


/* contact */
#content .content-wrap.about section.contact {padding: var(--gap80) 0;}
.about .contact {border: solid var(--primary-op); border-width: 1px 0 1px 0; position: relative;} 
.about .contact .bg {height: 100%; aspect-ratio: 1/1.25; pointer-events: none; font-size: 0; position: absolute; bottom: 0; transition: transform 1.6s;}
.about .contact .bg.deco1 {left: 0; transform: translateX(-100%);}
.about .contact .bg.deco2 {right: 0; transform: translateX(100%);}
.about .contact .bg span {display: block; width: 100%; height: 100%; background-image: url(/img/main/bg_contact.svg); background-position: top right; background-size: 100% auto; background-repeat: no-repeat;  }
.about .contact .bg.deco2 span {transform: scaleX(-1);}

.about .contact.ani-start .bg.deco1 {transform: translateX(-10%);}
.about .contact.ani-start .bg.deco2 {transform: translateX(10%);}

.about .contact .section-head {display: flex; align-items: center; position: relative;}
.about .contact .section-head .section-title {width: 50%; text-align: center;}
.about .contact .section-head .section-desc {width: 50%; }
.about .contact .section-head .section-desc .en {margin-left: 80px; font-size: var(--font18);}
.about .contact .section-head .btn-box {position: absolute; left: calc(50% + 610px); top: 38px; }

@media screen and (max-width:1440px){
  .about .contact .section-head {flex-direction: column; gap: var(--gap40);}
  .about .contact .section-head .section-title {width: 100%;}
  .about .contact .section-head .section-desc {width: 100%;}
  .about .contact .section-head .section-desc .en {margin-left: 0; text-align: center;}
  .about .contact .section-head .btn-box {position: relative; left: unset; top: unset;}
}
@media screen and (max-width:768px){
  .about .contact {border: none;}
  .about .contact .bg {height: 60%; bottom: 5%;}
  .about .contact .section-head {padding-bottom: calc(var(--gap100)*2);}
  .about .contact .section-head .section-desc .en .mo-br {display: block;}
  .about .contact .section-head .btn-box {margin-top: 100px;}
}
@media screen and (max-width:480px){
  .about .contact .section-head {}
  .about .contact .section-head .section-desc .en {font-size: 15px;}
  .about .contact .bg {height: 260px; bottom: 10%;}
}

/******************** contact ********************/
.contact {}
.contact .visual {padding: calc(var(--gap100)/2) 0; margin-bottom: calc(var(--gap100)*0.5);}

#content .content-wrap section.form {overflow: unset;}
.contact .form { }
.contact .form .form-layout {display: flex; justify-content: space-between; align-items: stretch; }
.contact .form .form-layout .left {position: relative;}
.contact .form .form-layout .left .sticky-box {position: sticky; left: 0;top: calc(var(--headerH) + var(--gap80));}
.contact .form .form-layout .left .title {font-size: var(--font28); font-weight: 600;}
.contact .form .form-layout .left .icon {display: flex; align-items: baseline; margin-top: calc(var(--gap100)*1.2); font-size: 0;}
.contact .form .form-layout .left .icon .img2 {height: 80px; transform: translateY(50%);}
.contact .form .form-layout .left .icon img {max-height: 100%;}

.contact .form .form-layout .right {width: 50%;}
.contact .form .form-layout .form-box {max-width: 820px;}

.contact .form .form-layout .attach-file {margin-top: 20px;}
.contact .form .form-layout .attach-file .file-list {}
.contact .form .form-layout .attach-file .file-list:has(.upload-file) {margin-top: 30px;}
.contact .form .form-layout .attach-file .file-list .upload-file {background: var(--secondary); border-radius: 10px; padding: 0 30px; display: flex; align-items: center; justify-content: space-between; gap: 1em; font-size: var(--font16); height: 44px; position: relative;}
.contact .form .form-layout .attach-file .file-list .upload-file .file-name {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.contact .form .form-layout .attach-file .file-list .upload-file input[type="file"] {opacity: 0; pointer-events: none; width: 1px; height: 1px; position: absolute;}
.contact .form .form-layout .attach-file .file-list .upload-file .file-remove-btn {width: 20px; height: 20px; background: url(/img/icon_remove.svg) center no-repeat; background-size: cover; flex-shrink: 0; }
.contact .form .form-layout .attach-file .file-list .upload-file + .upload-file {margin-top: 5px;}
.contact .form .form-layout .attach-file .notice {margin-top: 30px; font-size: var(--font18);}

/* .contact .form .form-layout .captcha {margin-top: 30px;}
.contact .form .form-layout .captcha .secure-box {width: 140px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid var(--primary-op); background: var(--secondary); border-radius: 10px; overflow: hidden;}
.contact .form .form-layout .captcha .secure-box img {max-width: 100%; max-height: 100%; object-fit: cover;}
.contact .form .form-layout .captcha .captcha-box {display: flex; gap: 15px; flex-wrap: wrap;}
.contact .form .form-layout .captcha .captcha-box .captcha-btn {background-color: var(--primary); aspect-ratio: 1; border-radius: 10px; background-image: url(/img/icon_refresh.svg); background-position: center; background-repeat: no-repeat; background-size: 28px; flex-shrink: 0;}
.contact .form .form-layout .captcha .captcha-box .input-box {width: calc(100% - 235px); min-width: 370px;}
.contact .form .form-layout .captcha .captcha-box > * {height: 65px;} */
.contact .form .form-layout .captcha .captcha-box .input-box {width: calc(100% - 235px); min-width: 370px;}

.contact .form .form-layout .form-bottom {margin-top: var(--gap100); border-top: 1px solid var(--primary-op); }
.contact .form .form-layout .form-bottom .privacy {padding: calc(var(--gap100)*0.6) 0; text-align: center; font-size: var(--font20); display: flex; align-items: center; justify-content: center; gap: 1em;}
.contact .form .form-layout .form-bottom .privacy a {font-weight: 700; text-decoration: underline; text-underline-position: under;}
.contact .form .form-layout .form-bottom .submit-btn button {width: 100%; height: 65px; font-size: var(--font20);}


@media screen and (max-width:1260px){
  .contact .form .form-layout .left .title {font-size: 24px;}
}
@media screen and (max-width:1024px){
  #content .content-wrap section.form {overflow: hidden;}
  .contact .form .form-layout {flex-direction: column; gap: calc(var(--gap100)*1.5);}
  .contact .form .form-layout .left .sticky-box {display: flex; align-items: center; justify-content: space-between;}
  .contact .form .form-layout .left .icon {margin-top: 0;}
  .contact .form .form-layout .left .icon .img1 {height: 140px;}

  .contact .form .form-layout .right {width: 100%;}
  .contact .form .form-layout .form-box {max-width: 100%; }
}
@media screen and (max-width:768px){
  .contact .form .form-layout .left .sticky-box {flex-direction: column; gap: 40px; align-items: start;}
  .contact .form .form-layout .left .title {font-size: 20px;}
  .contact .form .form-layout .left .icon {margin-left: auto;}
  .contact .form .form-layout .left .icon .img1 {height: 120px;}

  .contact .form .form-layout .form-bottom .submit-btn button {height: 52px;}

  /* .contact .form .form-layout .captcha .captcha-box {gap: 8px; }
  .contact .form .form-layout .captcha .captcha-box > * {height: 48px;}
  .contact .form .form-layout .captcha .secure-box {border-radius: 6px; width: 120px;}
  .contact .form .form-layout .captcha .captcha-box .captcha-btn {border-radius: 6px; background-size: 22px;} */
  .contact .form .form-layout .captcha .captcha-box .input-box {min-width: unset; width: 100%; }
}
@media screen and (max-width:480px){
  .contact .form .form-layout .left .title {font-size: 16px;}
  .contact .form .form-layout .left .icon .img1 {height: 100px;}
  .contact .form .form-layout .left .icon .img2 {height: 60px;}

  .contact .form .form-layout .attach-file .file-list .upload-file {padding: 0 14px; border-radius: 6px; font-size: 14px;}
  .contact .form .form-layout .attach-file .notice {font-size: 14px;}
  .contact .form .form-layout .form-bottom .privacy {gap: 8px; padding: calc(var(--gap100)*0.8) 0; font-size: 16px;}
}