@charset "utf-8";

.contact .fp-tableCell {display: table-cell;}
.contact .sect-tit {margin-top: 60px;}
.contact .sect-top {margin-bottom: 20px;}
.contact .sect-tit p{text-align: center;margin-bottom: 55px;}
.contact .location-bottom {margin-top: -35px;}
.contact .sect-top {font-size: 1rem;font-weight: 300;color: #757575;margin-bottom: 20px;}
.contact .sect-tit, .section .sect-tit2 {position: relative; overflow: hidden;}
.contact .sect-tit p {font-size: 48px; line-height: 62px; background: linear-gradient(93deg, #187082 4.42%, rgba(61, 63, 169, 0.60) 99.84%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; word-break: keep-all;}
.contact .sect-tit2 p {font-size: 24px; color: #292929; margin-top: 30px; word-break: keep-all;}


/* .contact .contact-tab > ul {display: flex; align-items: center;} */
.contact .contact-tab > ul > li {position: absolute}
/* .contact .contact-tab > ul > li::before {content: ''; position: absolute; top: 0; left: 0; overflow: hidden; border-radius: 10px; max-width: 0; -webkit-transition: max-width 0.3s; -moz-transition: max-width 0.3s; transition: max-width 0.3s; background: #3D3FA9; width: 100%; height: 100%;} */
/* .contact .contact-tab > ul > li p {font-size: 1.125rem; color: #999; position: relative; z-index: 1;} */
/* .contact .contact-tab > ul > li.swiper-slide-thumb-active {border: 2px solid rgba(61, 63, 169, 0.60);} */
/* .contact .contact-tab > ul > li.swiper-slide-thumb-active::before {max-width: 100%;} */
/* .contact .contact-tab > ul > li.swiper-slide-thumb-active p {color: #fff;} */

.contact .contact-slide {margin-top: 60px;}
.contact .contact-slide > ul > li {display: flex; gap: 100px;}
.contact .contact-slide > ul > li .img {width: 100%; max-width: 1050px; border-radius: 30px; border: 1px solid #E4E4E4; background: rgba(252, 253, 253, 0.72); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 24px;}
.contact .contact-slide > ul > li .img img {max-height: 496px; object-fit: cover;}
.contact .mail {display: flex; align-items: center; gap: 20px;}
.contact .mail i {width: 50px; height: 36px; background-image: url("../../../assets/images/ico/ico-message.svg"); background-repeat: no-repeat; background-size: 100% 100%; flex: none;}
.contact .mail p {font-size: 34px; background: linear-gradient(93deg, #187082 4.42%, rgba(61, 63, 169, 0.60) 99.84%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
/* .contact .location-bottom{position: absolute; bottom: 120px; left: 180px;} */

/* map */
.map-container {position: relative;max-width: 1267px;height: 600px;margin: 0 auto;background: url('../../../assets/images/main/loca1.png') no-repeat center;background-size: cover;} 
.location {position: absolute;cursor: pointer;z-index: 1; transition: .3s;} 
.location-btn {cursor: pointer;width: 36px;height: 36px;background: url("../../../assets/images/ico/ico-location.svg") no-repeat 50% / cover;position: relative;z-index: 3;} 
.location .location-btn::after{content: '';position: absolute;top: -25px;left: 0;width: 36px;height: 44px;background: url('../../../assets/images/ico/ico-location_active.svg') no-repeat 50% / cover;z-index: 5; opacity: 0; visibility: hidden;}
.location.active .location-btn::after{opacity: 1; visibility: visible;}
.location-txt {display: none;position: absolute;top: -143px;left: calc(100% + 95px);transition: .5s; pointer-events: auto;} 
.left .location-txt{left: auto;right: calc(100% + 95px);z-index: 4;}
.left .location-txt::before{right: auto;left: calc(100% - 5px);background-image: url("../../../assets/images/main/loca-line_left.svg");}
.location.left {z-index: 1;}
.location.left.active{z-index: 2;}
 .location.left:hover{z-index: 3;}
.location.right.active{z-index: 3;}
.location.right:hover{z-index: 4;}
.location-box {width: 440px;border-radius: 20px;background: rgba(255, 255, 255, 0.20);box-shadow: -1px -1px 4px 0px rgba(255, 255, 255, 0.25) inset, 0px 0px 20px 6px rgba(113, 138, 178, 0.08);backdrop-filter: blur(10px);padding: 30px;} 
.location-box + .location-box{margin-top: 16px;}
.location.active .location-txt::before{display: block;}
.location-txt::before{display: none;content: '';position: absolute;right: calc(100% - 5px);top: 75px;width: 101px;height: 93px;background: url('../../../assets/images/main/loca-line_right.svg') no-repeat 50% / cover;/* z-index: 1; */}
.location-txt::after {content: '';position: absolute;top: 75px;right: calc(100% - 5px);width: 11px;height: 11px;border-radius: 50%;background: #3D3FA9;} 
.left .location-txt::after {right: auto;left: calc(100% - 5px);}
.location-txt .tit {display: flex;align-items: center;gap: 8px;font-size: 22px;font-weight: 600;color: #292929;}
.location-txt .tit i {width: 26px; height: 26px; background-image: url("../../../assets/images/ico/ico-company.svg"); background-repeat: no-repeat; background-size: cover;}
.location-txt .txt {font-size: 18px;line-height: 1.7;color: #757575;margin-top: 16px;word-break: keep-all;}
.type-mo{display: none;}
.location-btn[data-location="서울"] {z-index: 3;}
.map-kr {position: absolute;top: 133px;left: 49%;transform: translateX(-50%);box-shadow: 0 1px 10px rgba(0,0,0,0.05);max-width: 500px;width: 100%;height: 500px;z-index: 2;border-radius: 50%;} 
.map-kr img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;z-index: 1;} 
.location.right.index{z-index: 1;}
.map-kr::after{content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 50%;background: rgba(255, 255, 255, 0.50);box-shadow: -1px -1px 4px 0px rgba(255, 255, 255, 0.25) inset, 0px 0px 20px 6px rgba(113, 138, 178, 0.08);backdrop-filter: blur(5px);}
.location[data-txt="대구"].left .location-txt::before{background-image: url("../../../assets/images/main/ico-line-left2.svg");}


/* en */
.en .location-txt .tit{font-size: 21px;}

/* th */
.th .location-txt .tit{font-size: 21px;}


.foreMore {
    border-radius: 10px;
    border: 1px solid var(--Gray-700, #5B5B5B);
    width: 310px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    color: var(--Gray-700, #5B5B5B);
    font-weight: 600;
    margin-top: 15px;
}

@media screen and (min-width: 1025px) {
  .location:hover .location-txt {display: block !important;}
  .location.active .location-btn::after{opacity: 1; visibility: visible;}
  .location:hover .location-btn::after{opacity: 1; visibility: visible;}
  .location:hover .location-txt::before{display: block;}
}

@media screen and (max-width: 1024px) {
  /* sect6 */
  .contact {}
  .map-container{height: 0;padding-bottom: 50.44%;}

  .contact .contact-tab > ul > li p {font-size: 1rem;}
  .contact .contact-slide {margin-top: 40px;}
  .contact .contact-slide > ul > li {flex-direction: column-reverse; gap: 20px;}
  .contact .contact-slide > ul > li .info {width: 100%; max-width: 100%; padding: 0;}
  .contact .contact-slide > ul > li .img {width: 100%;}
  .location-btn {width: 30px;height: 30px;z-index: inherit;} 
  .location.active .location-btn::after {width: 31px;height: 38px;} 
  .location-txt::before {width: 85px;background-position: left;} 
  .location-txt { right: calc(100% + 70px); top: -155px; } 
  .left .location-txt {left: calc(100% + 70px);}
  .left .location-txt::before {background-position: right;}

  /* .map-container{background-image: url(../../images/main/loca1_m.png);} */
  .location .location-txt { display: none !important; } 
  .type-mo {display: block;margin-top: 18px;margin-bottom: 34px;} 
  .location-txt {position: static; } 
  .location-box {width: 100%;padding: 15px;border-radius: 15px;}
  .location-txt .tit {font-size: 18px;}
  .location-txt .tit i {width: 20px; height: 20px;}
  .location-txt .txt {font-size: 14px;}
  .sect6 .mail {gap: 8px;} 
  .sect6 .mail i { width: 30px; height: 18px; } 
  .sect6 .mail p {font-size: 18px;} 
  .sect6 .location-bottom{margin-top: 34px;}
  .location-txt::after{display: none;}
  .location-btn { width: 24px; height: 24px; } 
  .location.active .location-btn {width: 24px;height: 30px;} 
  .map-kr {width: 260px;height: 260px;top: 105px;left: 52%;} 
  .map-kr img { padding: 10px; } 
  .contact .location-bottom{margin-top: 34px;}

}



@media (max-width: 768px) {
   /* sect6 */
  .contact {}
  .contact .sect-tit {margin-top: 0;}
  .contact .sect-tit p{margin-bottom: 24px;}
  .contact .sect-top {margin-bottom: 12px;font-size: 12px;}
  .contact .sect-tit p {font-size: 24px;line-height: 1.5;text-align: left;}
  .contact .sect-tit2 p {font-size: 1rem;margin-top: 12px;}
  .contact .contact-tab > ul > li {padding: 6px 14px;}
  .contact .contact-slide {margin-top: 30px;}
  .contact .contact-slide > ul > li .info .mail {gap: 10px;}
  .contact .contact-slide > ul > li .info .mail i {width: 34px; height: 20px;}
  .contact .contact-slide > ul > li .info .mail p {font-size: 24px;}
  .contact .contact-slide > ul > li .info .tit {font-size: 1.125rem; margin-top: 20px;}
  .contact .contact-slide > ul > li .info .tit i {width: 22px; height: 22px;}
  .contact .contact-slide > ul > li .info .txt {font-size: 1rem;}
  .contact .contact-slide > ul > li .img {padding: 10px 20px;}
  /* .map-container{background-image: url(../../../assets/images/main/loca1_m.png);} */
  .location-btn{width: 26px;height: 26px;}
  .location .location-txt { display: none !important; } 
  .type-mo {display: block;margin-top: 18px;margin-bottom: 34px;} 
  .location-txt {position: static; } 
  .location-box {width: 100%;padding: 15px;border-radius: 15px;}
  .location-txt .tit {font-size: 18px;}
  .location-txt .tit i {width: 20px; height: 20px;}
  .location-txt .txt {font-size: 14px;}
  .contact .mail {gap: 8px;} 
  .contact .mail i { width: 30px; height: 18px; } 
  .contact .mail p {font-size: 18px;} 
  .map-container {height: 0;padding-bottom: 46.875%;background-image: url("../../../assets/images/main/loca1_m.png");}
  .map-kr{max-width: 150px;height: 150px;top: 0;}
  .location[data-txt="미국"] {margin-right: -35px;}

  /* en */
  .en .location-txt .tit{font-size: 16px;}

  /* th */
  .th .location-txt .tit{font-size: 17px;}

  .foreMore {
    width: 165px;
    font-size: 14px;
  }
}