@charset "utf-8";

.main {width: 100%;}
.main section {width: 100%; overflow: hidden; margin: 0 0 max(calc(var(--vwpx)*110), var(--gap100));}
.main section .inner {width: 90%; margin: auto; }
.main section .section-title {font-size: max(calc(var(--vwpx)*90),calc(var(--font20)*4.5)); font-weight: 700;}
@media screen and (max-width:1024px){
  .main section .section-title {font-size: 60px;}
}
@media screen and (max-width:768px){
  .main section .section-title {font-size: 50px;}
}
@media screen and (max-width:480px){
  .main section .section-title {font-size: 36px;}
}

/* intro */
#intro {width: 100%; height: 100vh; overflow: hidden; position: fixed; z-index: 10000; left: 0; top: 0; background: var(--bgc);}

#intro .intro-cont {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; gap: calc(var(--gap100)*1.5); }
#intro .intro-cont .item {font-weight: 600; font-size: var(--font20);}
#intro .intro-cont .item .item-wrap {overflow: hidden;}
#intro .intro-cont .logo {font-size: 0;}
#intro .intro-cont .logo .item-wrap {overflow: hidden;}
#intro .intro-cont .logo img {height: 150px;}

#intro .intro-cont .item-wrap span {display: block; transform: translateY(-100%);}

@media screen and (max-width:1600px){
  #intro .intro-cont {gap: var(--gap100);}
  #intro .intro-cont .logo img {height: 110px;}
}
@media screen and (max-width:1024px){
  #intro .intro-cont {flex-direction: column;}
}
@media screen and (max-width:768px){
  #intro .intro-cont .logo {padding: 3vh 0;}
  #intro .intro-cont .logo img {height: 80px;}
}
@media screen and (max-width:480px){
  #intro .intro-cont .logo img {height: 70px;}
}


/* visual */
.main .visual {padding: calc(var(--vwpx)*90) 0 10px; height: calc(100vh - var(--headerH)); min-height: fit-content; box-sizing: border-box;}
.main .visual .inner {width: 90%; height: 100%; position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 80px;}
.main .visual .text-desc {display: flex; justify-content: end;}
.main .visual .text-desc .text-item {width: max(25%,400px); padding-right: calc(var(--gap24)*2); line-height: 1.6; font-size: max(calc(var(--vwpx)*18), var(--font18));}
.main .visual .text-desc .text-item.ko {line-height: 1.6;}

.main .visual .title-box {}
.main .visual .title-box .visual-title {font-weight: 700; font-size: max(calc(var(--vwpx)*38), calc(var(--font18)*2)); line-height: 1.35; margin-bottom: var(--gap80);}
.main .visual .title-box .logo-img-box {font-size: 0; overflow: hidden; height: max(calc(var(--vwpx)*360), 280px); aspect-ratio: 1/0.3;}
.main .visual .title-box .mask-logo { width: 100%; height: 100%; mask-image: url(/img/logo_red.svg); mask-size:100%; mask-repeat: no-repeat; -webkit-mask-image: url(/img/logo_red.svg); -webkit-mask-size:100%; -webkit-mask-repeat: no-repeat; font-size: 0; background: var(--primary);}
.main .visual .title-box .mask-logo img {width: 100%; height: 100%; object-fit: cover; }

.main .visual .side-text {font-size: max(calc(var(--vwpx)*22), 22px); width: 1.5em; height: 100%; position: absolute; right: 0; top: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; padding-bottom: 1em;}
.main .visual .side-text p {width: fit-content; white-space: nowrap; font-size: inherit; font-weight: 600; transform: rotate(90deg);}
.main .visual .side-text p span {display: block;}

@media screen and (max-width:1024px){
  .main .visual {padding: 5% 0;}
  .main .visual .inner {width: 90%; justify-content: center;}
  .main .visual .title-box .visual-title {position: absolute; top: 0; width: 100%; padding-right: calc(var(--font20)*3);}
  .main .visual .title-box .logo-img-box {height: auto; width: 90%; margin: 0 auto;}
  .main .visual .side-text {font-size: var(--font20); align-items: start;}
  .main .visual .side-text p {transform: rotate(90deg) translateX(50%);}

  .main .visual .text-desc {position: absolute; bottom: 0; right: 0; }
  .main .visual .text-desc .text-item {padding: 0;}
  .main .visual .text-desc .text-item.ko {display: none;}

}
@media screen and (max-width:768px){}
@media screen and (max-width:480px){
  .main .visual {/*padding-bottom: 80px;*/ height: calc(100svh - var(--headerH));}
  .main .visual .side-text {font-size: 14px;}
  .main .visual .title-box .visual-title {font-size: 20px; }
}


/* about */
.main .about {padding-bottom: max(calc(var(--vwpx)*100), var(--gap100));}
.main .about .section-title { font-weight: 700; margin-bottom: max(calc(var(--vwpx)*90),var(--gap100));}
.main .about .cont {position: relative;}
.main .about .cont .deco {position: absolute;}
.main .about .cont .deco img {width: 100%;}
.main .about .cont .deco1 {left: 0; bottom: 0; width: max(calc(var(--vwpx)*308),200px);} 
.main .about .cont .deco2 {left: max(calc(var(--vwpx)*334),200px); bottom: max(calc(var(--vwpx)*225),190px); width: max(calc(var(--vwpx)*135),80px);}

.main .about .cont .text-box {width: 50%; margin-left: auto;}
.main .about .cont .text-box .text-wrap {width: fit-content; margin-left: auto;}
.main .about .cont .text-box .title {text-align: left;}
.main .about .cont .text-box .title .en-tit {font-weight: 600; font-size: max(calc(var(--vwpx)*45),36px);}
.main .about .cont .text-box .title .ko-tit {font-weight: 600; font-size: max(calc(var(--vwpx)*22),22px); margin-top: max(calc(var(--vwpx)*30),var(--gap32));}
.main .about .cont .text-box .desc {margin-top: max(calc(var(--vwpx)*80),var(--gap80)); text-align: left;}
.main .about .cont .text-box .desc .desc-en {font-size: max(calc(var(--vwpx)*20),var(--font20)); margin-bottom: 1em;}
.main .about .cont .text-box .desc .desc-ko {font-size: max(calc(var(--vwpx)*18),var(--font18));}

@media screen and (max-width:1440px){
  .main .about .cont .text-box {width: 65%;}
}
@media screen and (max-width:1024px){
  .main .about .cont .deco1 {width: 180px;}
  .main .about .cont .deco2 {bottom: 160px; left: 180px;}

  .main .about .cont .text-box {width: calc(100% - 280px);}
  .main .about .cont .text-box .title .en-tit {font-size: 26px;}
  .main .about .cont .text-box .title .ko-tit {font-size: 20px;}
  .main .about .cont .text-box .desc br {display: none;}
}
@media screen and (max-width:768px){
  .main .about .cont .deco-icon {position: relative; width: 100%; height: 240px;}
  .main .about .cont .deco1 {width: 160px;}
  .main .about .cont .deco2 {bottom: 140px; left: 160px;}

  .main .about .cont .text-box { width: 100%; margin-top: 60px; }
  .main .about .cont .text-box .text-wrap {width: 100%; }
  
}
@media screen and (max-width:480px){
  .main .about .cont .text-box .title .en-tit {font-size: 22px;}
  .main .about .cont .text-box .title .ko-tit {font-size: 16px;}
  .main .about .cont .text-box .desc .desc-en,
  .main .about .cont .text-box .desc .desc-ko {font-size: 15px;}

}

/* work */
.main .work {margin-bottom: 0;}
.main .work .package {padding: max(calc(var(--vwpx)*90), var(--gap80)) 0 max(calc(var(--vwpx)*120),var(--gap120)); }
.main .work .package:nth-child(2n - 1) {background: var(--secondary); }
.main .work .package .work-head {display: flex; justify-content: space-between; position: relative; margin-bottom: max(calc(var(--vwpx)*70), calc(var(--gap100)*0.7));}
.main .work .package .work-head .work-title { font-size: max(calc(var(--vwpx)*70), calc(var(--font20)*3.5)); padding-right: 60px; font-weight: 600; width: 50%;}
.main .work .package .work-head .work-title em {font-weight: 700; text-transform: uppercase;}
.main .work .package .work-head .desc {width: 50%; }
.main .work .package .work-head .desc .desc-en {font-size: max(calc(var(--vwpx)*22), 22px); margin-top: 1em;}
.main .work .package .work-head .desc .desc-ko {font-size: max(calc(var(--vwpx)*18), var(--font18)); margin-top: 1em; padding-right: 70px;}
.main .work .package .work-head .btn-box {position: absolute; right: 0; bottom: 0;}
.main .work .package .work-cont {}
.main .work .package .work-cont ul {display: grid; grid-template-columns: repeat(auto-fit, minmax(25%, 1fr)); aspect-ratio: 1/0.286;}
.main .work .package .work-cont ul li {height: 100%; overflow: hidden;}
.main .work .package .work-cont ul li .img-box {display: block; height: 100%; font-size: 0; clip-path: polygon(0 0, 100% 0, 100% 0%, 0 0%); transition: clip-path 0.8s cubic-bezier(.04,.3,.4,1.01);}
.main .work .package .work-cont ul li:nth-child(1) .img-box {transition-delay: 0.3s;}
.main .work .package .work-cont ul li:nth-child(2) .img-box {transition-delay: 0.4s;}
.main .work .package .work-cont ul li:nth-child(3) .img-box {transition-delay: 0.5s;}
.main .work .package .work-cont ul li:nth-child(4) .img-box {transition-delay: 0.6s;}
.main .work .package .work-cont ul li img {width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; will-change: transform; transform: scale(1.01);}

.main .work .package.ani-start .work-cont ul li .img-box {clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}

.main .work .package .work-cont ul li .img-box:hover img {transform: scale(1.1);}

@media screen and (max-width:1260px){
}
@media screen and (max-width:1024px){
  .main .work .package .work-head {flex-direction: column; gap: var(--gap32);}
  .main .work .package .work-head .work-title {width: 100%; font-size: 54px;}
  .main .work .package .work-head .desc {width: 100%;}
  .main .work .package .work-head .desc .desc-en {font-size: 18px;}

  .main .work .package .work-head .btn-box {bottom:unset; top: calc(var(--font20)*3.5/2); }
}
@media screen and (max-width:768px){
  .main .work .package .work-head .work-title {font-size: calc(var(--font20)*2);}
  .main .work .package .work-head .work-title em {display: block;}
  .main .work .package .work-head .desc .desc-ko {padding-right: 0;}

  .main .work .package .work-cont ul {grid-template-columns: 1fr; aspect-ratio: unset; gap: 20px; }
  .main .work .package .work-cont ul li {height: unset;}
  .main .work .package .work-cont ul li a::after {content:""; width: 32px; height: 32px; margin-top: 10px; display: block; margin-left: auto; background: url(/img/arrow_r_red.svg) center no-repeat; background-size: 25px 10px;}
   .main .work .package .work-cont ul li .img-box {aspect-ratio: 1/0.568; height: unset; overflow: hidden;}
 

  .main .work .package .work-head .btn-box {top: calc(var(--font20)*2*1.5/2);}
}
@media screen and (max-width:480px){
  .main .work .package .work-head .desc .desc-en,
  .main .work .package .work-head .desc .desc-ko {font-size: 15px;}
}


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

.main .rolling-banner.ty2 {border: none; background: var(--secondary);}

@media screen and (max-width:768px){
  .main .rolling-banner {padding: 20px 0;}
  .main .rolling-banner .swiper-slide {padding: 0 20px; }
  .main .rolling-banner img {height: 24px;}
}



/* service - who we are */
.main .service {padding: max(calc(var(--vwpx)*50), calc(var(--gap100)/2)) 0;}
.main .service .section-title { text-align: center; }
.main .service .desc {text-align: center; font-size: max(calc(var(--vwpx)*18), var(--font18)); }
.main .service .desc .desc-ko {margin-top: 0.8em;}
.main .service .desc .mo-br {display: none;}

.main .service .img-area {margin: max(calc(var(--vwpx)*80), var(--gap80)) 0; height: max(calc(var(--vwpx)*400), 360em); display: flex; align-items: end; justify-content: center; position: relative; font-size: max(calc(var(--vwpx)*1), 1px);}
.main .service .img-area .icon,
.main .service .img-area .tw-icon {position: absolute; left: 50%; }
.main .service .img-area .tw-icon {bottom: 0;}
.main .service .img-area img {width: 100%; font-size: 0;}
.main .service .img-area .hole {width: max(calc(var(--vwpx)*350), 300em);}
.main .service .img-area .icon1 {width: max(calc(var(--vwpx)*66), 60em); }
.main .service .img-area .icon2 {width: max(calc(var(--vwpx)*36), 30em); }
.main .service .img-area .icon3 {width: max(calc(var(--vwpx)*120), 110em); }
.main .service .img-area .icon4 {width: max(calc(var(--vwpx)*330), 300em); opacity: 0;}
.main .service .img-area .icon5 {width: max(calc(var(--vwpx)*200), 180em); opacity: 0;}
.main .service .img-area .icon5 span {transform: scaleX(-1); display: block;}

.main .service .img-area .icon1 img {animation: imgAni 2s linear infinite alternate;}
.main .service .img-area .icon2 img {animation: imgAni 1.6s linear infinite alternate;}
.main .service .img-area .icon3 img {animation: imgAni 2.5s linear infinite alternate;}
.main .service .img-area .icon4 img {animation: imgAni2 4s linear infinite alternate;}
.main .service .img-area .icon5 img {animation: imgAni2 3.8s linear infinite alternate;}
@keyframes imgAni {
  0% {transform: translateY(0);}
  100% {transform: translateY(30%);}
}
@keyframes imgAni2 {
  0% {transform: translateX(-5%);}
  100% {transform: translateX(5%);}
}
/* .main .service .img-area .icon1 {left: 35%; top: 25%;}
.main .service .img-area .icon2 {left: 55%; top: 19%;}
.main .service .img-area .icon3 {left: 67%; top: 43%;}
.main .service .img-area .icon4 {left: 25%; top: 75%;}
.main .service .img-area .icon5 {left: 80%; top: 83%; } */

.main .service .card-list {overflow: hidden; --gap:1.56vw; --item:4; margin-top: var(--gap120); --vw: 0.052vw;}
.main .service .card-list ul {display: flex; gap: var(--gap); /*--width:calc((100% - (var(--gap)*(var(--item) - 1))) / var(--item));*/ /*--width:19.24vw;*/ --width:calc(var(--vw)*370); margin: auto; justify-content: center;  }
.main .service .card-list ul li { width: var(--width); height: calc(var(--vw)*555); position: relative; transition: 0.6s 0.2s; --boxw: var(--width)}

.main .service .card-list .card-item {width: 100%;  border: 1px solid var(--primary-op); display: flex; height: 100%;}
.main .service .card-list .card-item .left {padding: calc(var(--vw)*40); width: var(--width); position: absolute; left: 0; top: 0; height: 100%; transition: opacity 0.2s 0.4s;}
.main .service .card-list .card-item .right {width: 0; overflow: hidden; position: relative; width: var(--width); height: 100%; padding: calc(var(--vw)*40); padding-left: 0; position: absolute; right: 0; top: 0; opacity: 0; transition: opacity 0.3s 0s;}
.main .service .card-list .card-item .icon-box {width: 100%; margin-bottom: var(--gap); background: var(--bgc); font-size: 0;}
.main .service .card-list .card-item .icon-box img {width: 100%;}
.main .service .card-list .card-item .text-box {overflow: hidden;}
.main .service .card-list .card-item .text-box .num {font-size: calc(var(--vw)*18); font-weight: 600; }
.main .service .card-list .card-item .text-box .title {box-sizing: border-box; text-align: center; font-family: var(--mincho); font-size: calc(var(--vw)*28); /*font-size: var(--font28);*/ font-weight: 700; border: solid var(--primary-op); padding: calc(var(--vw)*15) 0; border-width: 1px 0 1px 0;  margin: 1em 0; overflow: hidden;}
.main .service .card-list .card-item .text-box .tag-box {gap: 0.52vw;}
.main .service .card-list .card-item .text-box .tag-box span {min-height: calc(var(--vw)*40); border-radius: calc(var(--vw)*20); padding: 0 calc(var(--vw)*20); font-size: calc(var(--vw)*16);}


.main .service .card-list .card-item .desc-box { width: calc(var(--width) - calc(var(--vw)*40)); font-size: calc(var(--vw)*18); }
.main .service .card-list .card-item .desc-box .desc-ko {margin-top: 1.6em; }
.main .service .card-list .card-item .deco {position: absolute; right: calc(var(--vw)*40); bottom: calc(var(--vw)*40); opacity: 0; font-size: 0; width: calc(var(--vw)*80);}
.main .service .card-list .card-item .deco img {width: 100%;}

.main .service .card-list .card-item .bookspine {width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; padding: calc(var(--vw)*40); display: flex; justify-content: end; }
.main .service .card-list .card-item .bookspine .name {font-size: calc(var(--vw)*28); width: 2.5em;  display: flex;  }
.main .service .card-list .card-item .bookspine .name p { white-space: nowrap; line-height: 2.5em; border: solid var(--primary-op); border-width: 1px 0 1px 0; padding: 0 0.7em; transform-origin: 1.25em 50%; transform: rotate(90deg); height: 2.5em; font-family: var(--mincho); font-weight: 700;}




@media screen and (max-width:1400px){
  .main .service .card-list {--vw:0.056vw}
  /* .main .service .card-list .card-item .bookspine .name {font-size: 26px;} */
}
@media screen and (max-width:1260px){
  .main .service .img-area {font-size: 0.8px;}

  /* .main .service .card-list .card-item .bookspine .name {font-size: 20px;} */
}
@media screen and (min-width:1025px){
  .main .service .card-list ul li:hover {width: calc(var(--width)*2); flex-shrink: 0; transition: 0.6s 0s;}
  .main .service .card-list ul li:hover .card-item {background: var(--secondary);}
  .main .service .card-list ul:has(li:hover) li:not(:hover) .card-item .left {opacity: 0; overflow: hidden; width: 0; }
  .main .service .card-list ul:has(li:hover) li:not(:hover) .card-item .left .text-box {display: none;}
  .main .service .card-list ul:has(li:hover) li:not(:hover) .card-item .bookspine {opacity: 1;}
  .main .service .card-list ul:has(li:hover) li:not(:hover) .card-item .deco {opacity: 1; right: unset; left: 2.08vw; }
  .main .service .card-list ul li:hover .card-item .right {opacity: 1; transition: opacity 0.3s 0.4s;}
  .main .service .card-list ul li:hover .card-item .deco {opacity: 1; transition: 0.3s 0.3s;}
}
@media screen and (max-width:1024px){
  .main .service .img-area {font-size: 0.6px; margin: 60px 0;} 

  .main .service .card-list {--vw:0.73px; padding: 0 1px 40px;}
  .main .service .card-list ul {justify-content: start; gap: unset;}
  .main .service .card-list ul li {flex-shrink: 0;}

  .main .service .card-list .swiper-pagination {position: absolute; top: unset; bottom: 0;}
}
@media screen and (max-width:768px){
  .main .service .desc .mo-br {display: block;}
  .main .service .img-area .hole {width: 400em;}
  .main .service .img-area .icon4 {width: 240em;}
  .main .service .img-area .icon5 {width: 120em;}
}
@media screen and (max-width:480px){
  .main .service .img-area {font-size: 0.5px;}
  .main .service .desc {font-size: 15px;}

  .main .service .card-list .card-item .text-box .num {font-size: 14px;}
  .main .service .card-list .card-item .text-box .title {font-size: 22px;}
  .main .service .card-list .card-item .text-box .tag-box {gap: 9px; }
  .main .service .card-list .card-item .text-box .tag-box span {height: 36px; border-radius: 18px; padding: 0 18px; font-size: 13px;}
}



/* awards */
.main .awards {padding: max(calc(var(--vwpx)*100), var(--gap100)) 0;}
.main .awards .inner {max-width: 1600px; }
.main .awards .section-title {text-align: center; margin-bottom: var(--gap80); }

.main .awards .cont {padding-bottom: var(--gap120); position: relative;}
.main .awards .cont .btn-box {width: 100%; position: absolute; left: 0; bottom: 0; display: none;}
.main .awards .awards-list {border-top: 1px solid var(--primary-op);}
.main .awards .awards-list .item {display: flex; align-items: center; padding: calc(var(--gap80)/2); text-align: center; gap: 120px; justify-content: center; font-size: var(--font18); border-bottom: 1px solid var(--primary-op);}
.main .awards .awards-list .item .icon {width: 80px; font-size: 0; flex-shrink: 0;}
.main .awards .awards-list .item .icon img {max-width: 100%;}
.main .awards .awards-list .item .name {width: 360px; margin-right: 5%;}
.main .awards .awards-list .item .name .en {font-size: 1.3em; font-weight: 700;}
.main .awards .awards-list .item .ko {font-family: var(--noto); margin-top: 0.5em;}
.main .awards .awards-list .item .part {width: 180px;}
.main .awards .awards-list .item .organizer {width: 220px;}

.main .awards .awards-list li:nth-child(n+6) {display: none;}

.main .awards .cont:has(.awards-list li:nth-child(6)) .btn-box {display: flex; justify-content: center;}

.main .awards .cont.open .awards-list li:nth-child(n+6) {display: block;}

@media screen and (max-width:1400px){
  .main .awards .awards-list .item {gap: 80px;}
  .main .awards .awards-list .item .name {margin-right: 0;}
}
@media screen and (max-width:1260px){
  .main .awards .awards-list .item { font-size: 16px; gap: 20px 40px;  }
}
@media screen and (max-width:1024px){
  .main .awards .awards-list .item .part,
  .main .awards .awards-list .item .organizer {display: none;}
}
@media screen and (max-width:768px){
  .main .awards .awards-list .item {flex-wrap: wrap; font-size: 15px; padding: 30px 20px;}
  .main .awards .awards-list .item .name {width: 100%; max-width: 600px;}
  .main .awards .awards-list .item .name .en {font-size: 18px;}
}
@media screen and (max-width:480px){
  .main .awards .awards-list .item .icon {width: 60px;}
}


/* location */
.main .location {padding-bottom: max(calc(var(--vwpx)*100), var(--gap100)) 0; overflow: unset;}
.main .location .inner {max-width: 1600px; }

.main .location .section-head {}
.main .location .section-head .desc-box {font-size: max(calc(var(--vwpx)*18), var(--font18)); margin-bottom: 1.5em;}
.main .location .section-head .desc-box > div {margin-top: max(calc(var(--vwpx)*20), var(--font20)); text-align: left; width: max(calc(var(--vwpx)*650), 650px); margin-left: auto;}

.main .location .cont {padding: max(calc(var(--vwpx)*100), var(--gap100)) 0; position: relative; height: 150vh;}
.main .location .loca-list {display: flex; gap: max(calc(var(--vwpx)*100), 40px); justify-content: center; align-items: center;  position: sticky; left: 0; top: 0; height: 100vh; align-items: center;}
.main .location .loca-list .loca-item {width: 400px; position: relative;}
.main .location .loca-list .loca-item .frame {border: 1px solid var(--primary-op); }
.main .location .loca-list .img-box {font-size: 0; width: 80%; margin: auto;}
.main .location .loca-list .img-box img {width: 100%;}
.main .location .loca-list .tag-box {padding: var(--gap24); padding-top: 0; justify-content: center; align-items: start;}
.main .location .loca-list .country {padding: calc(var(--gap10)*2) 0; display: flex; align-items: end; justify-content: space-between; border-bottom: 1px solid var(--primary-op);}
.main .location .loca-list .country .name {font-family: var(--mincho); font-size: 40px; font-weight: 700;}
.main .location .loca-list .country .city {font-family: var(--noto); font-size: var(--font18);}
.main .location .loca-list .country .city li { text-align: right;}
.main .location .loca-list .country .city li span {position: relative; padding-left: 1em; display: inline-block;}
.main .location .loca-list .country .city li span::before {content:""; width: 4px; height: 4px; border-radius: 50%; background: var(--primary); position: absolute; left: 0.2em; top: 0.65em;}

@media screen and (max-width:1480px){

}
@media screen and (max-width:1260px){
  .main .location .loca-list .tag-box {height: calc(80px + 10px + var(--gap24));}
  .main .location .loca-list .country .name {font-size: 32px;}
}
@media screen and (max-width:1024px){
  .main .location {overflow: hidden;}
  .main .location .cont {height: unset;}
  .main .location .section-head .desc-box {margin-top: 50px;}
  .main .location .section-head .desc-box > div { width: 100%;}
  .main .location .loca-list {height: unset; position: relative; flex-direction: column; align-items: start; gap: var(--gap100); }

  .main .location .loca-list .tag-box {height: unset; position: absolute; right: -15px; transform: translateX(100%); top: 0; flex-direction: column; padding: 0;}

  .main .location .loca-list .loca-item:nth-child(2n) {margin-left: auto;}
  .main .location .loca-list .loca-item:nth-child(2n) .tag-box {right: unset; left: -15px; transform: translateX(-100%); align-items: end;}
}
@media screen and (max-width:768px){
  .main .location .section-head .desc-box .desc-en br {display: none;}
  .main .location .loca-list .loca-item {width: calc(100% - 135px); max-width: 380px;}
  .main .location .loca-list .tag-box {width: 120px;}
  .main .location .loca-list .tag-box span {border-radius: 30px;}

  .main .location .loca-list .img-box {width: 100%;}
  .main .location .loca-list .country {flex-direction: column; align-items: start; gap: 10px;}
  .main .location .loca-list .country .name {font-size: 26px;}
  .main .location .loca-list .country .city {display: flex; gap: 0.4em;}
  .main .location .loca-list .country .city li {text-align: left;}
}
@media screen and (max-width:480px){
  .main .location .section-head .desc-box {font-size: 15px;}

  .main .location .loca-list .country .name {font-size: 22px;}
  .main .location .loca-list .country .city {font-size: 14px;}
}


/* contact */
.main .contact {text-align: center; padding-top: calc(var(--gap100)*0.5); padding-bottom: calc(var(--gap100)*1.5); position: relative; margin-bottom: 0;}
.main .contact .bg {height: 100%; aspect-ratio: 1/1.69; pointer-events: none; font-size: 0; position: absolute; bottom: 0; transition: transform 1.6s;}
.main .contact .bg.deco1 {left: 0; transform: translateX(-100%);}
.main .contact .bg.deco2 {right: 0; transform: translateX(100%);}
.main .contact .bg span {display: block; width: 100%; height: 100%;  background: url(/img/main/bg_contact.svg) center no-repeat; background-size: cover;  }
.main .contact .bg.deco2 span {transform: scaleX(-1);}

.main .contact .section-title {font-size: max(calc(var(--vwpx)*100),calc(var(--font20)*5));}
.main .contact .sub-title {font-size: max(calc(var(--vwpx)*20), var(--font20)); font-weight: 700; margin-bottom: max(calc(var(--vwpx)*100), var(--gap100));}

.main .contact .cont {margin-top: calc(var(--gap24)*2);}
.main .contact .desc-box {display: flex; gap: 70px; justify-content: center; align-items: start; font-size: max(calc(var(--vwpx)*18), var(--font18)); margin-bottom: calc(var(--gap80)*0.75); text-align: left;}
.main .contact .desc-box > div {width: max(calc(var(--vwpx)*320), 320px);}
.main .contact .btn-box {display: flex; justify-content: center;}

.main .contact.ani-start .bg.deco1, 
.main .contact.ani-start .bg.deco2 {transform: translateX(0);}

@media screen and (max-width:1260px){}
@media screen and (max-width:1024px){
  
  .main .contact .bg {height: 70%; }

  .main .contact .section-title {font-size: 80px;}

  .main .contact .desc-box {flex-direction: column; align-items: center; text-align: center; margin-bottom: calc(var(--gap80)*2);}

  .main .contact.ani-start .bg.deco1 {transform: translateX(-20%);}
  .main .contact.ani-start .bg.deco2 {transform: translateX(20%);}
}
@media screen and (max-width:768px){
  .main .contact .section-title {font-size: 52px;}

  .main .contact .desc-box {gap: 1em;}
  .main .contact {padding-bottom: calc(var(--gap100)*3);}
  .main .contact .bg {bottom: -5%;}

}
@media screen and (max-width:480px){
  .main .contact .section-title {font-size: 40px;}
  .main .contact .bg {height: 50%;}
  .main .contact .desc-box {font-size: 15px;}
}





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