@charset "UTF-8";
*{
  padding:0;
  margin:0;
  text-decoration:none;
  box-sizing:border-box;
  font-family: 'Pretendard Variable';
  -webkit-text-size-adjust: 100%;
}
li{list-style:none}
body, html {
  height: 100%;
  margin: 0;
  scroll-behavior: smooth;
}
a[href^="tel:"] {
  color:#000;
  text-decoration: none;
}
/* slide styling */
.card_slide{
  width:100%;
  height:100%;
  background: #fff;
  overflow:hidden;
}
.card_slide.tax .slide{
  display: none;
}
.card_slide.tax .slide:first-child{
  display: flex;
}
.slide {
  height: 100%;
  position: relative;
  display:flex;
  flex-wrap: wrap;
  align-content:center;
  padding:30px 20px;
  overflow: hidden;
  background:#fff;
}
#savecard{
  border:1px #f00 solid;
  font-size:0;
  width:100px;
  height:50px;
}
#savecard.act{
  display: none;
}
.slide .mid_wrap{
  max-width:1240px;
  width:100%;
  position: relative;
  height:100%;
  box-sizing:border-box;
  display: flex;
  align-items:flex-end;
  margin:0 auto;
  flex-wrap: wrap;
}
.slide .top_info{
  position: absolute;
  width:100%;
  top:0;
  left:0;
  padding:4% 0 26% 3%;
  box-sizing: border-box;
}
.slide .top_info h1{
  text-transform: uppercase;
  font-size:60px;
  line-height:120%;
  color:#000;
  letter-spacing:1px;
  font-weight: 600;
  /* transition:all 0.8s; */
}
.slide .big_tit{
  position: absolute;
  width:100%;
  top: 8%;
}
.slide .big_tit p{
  text-transform: uppercase;
  font-size:60px;
  line-height:130%;
  font-weight:700;
  letter-spacing: 1px;
}
.slide .big_tit .position{
  font-size:35px;
  margin:10px 0 0 0
}
.slide .big_tit .depart{
  font-size:25px;
  margin:10px 0 0 0;
  color:#999;
  font-weight:300;
}
.slide .user_info{
  width:100%;
  position:relative;
}
.slide .user_info ul{
  background:url(../images/card/info_bg.png) no-repeat right 101%;
  background-size:50px;
  padding:20px 0 0 0;
}
.slide .user_info li{
  line-height:100%;
  margin:2% 0 0 0;
  font-size:22px;
  display:flex;
  flex-wrap:nowrap;
  color:#999;
  align-items: center;
}
.slide .user_info li span:first-child{
  width:20%;
  text-transform:uppercase;
}
.slide .user_info li span:last-child{
  width:80%;
}
.slide .user_info li:first-child{
  margin:0;
}
.slide .user_info li span a{
  color:#999;
  display: block;
  margin:15px 0 0 0
}
.slide .user_info li span a:first-child{
  margin:0;
}
.slide .user_info .tax_info{
  padding:0 0 90px 0;
}
.slide .user_info .tax_info li{
  display: block;
  margin: 3% 0 0 0;
}
.slide .user_info .tax_info li:first-child{
  display: flex;
}
.slide .user_info .tax_info li span{
  display: block;
  width: 100%;
}
.slide .user_info .tax_info li span:first-child{
  color:#333;
  font-size:15px;
  background:#333;
  color:#fff;
  display: inline-block;
  width: auto;
  padding:.8% 1.2%;
  margin:0 0 5px;
  letter-spacing: .5px;
}
.office_info{
  display:flex;
  width:100%;
  flex-wrap:wrap;
}
.office_info.map{
  max-height:40%;
  height: 100%;
  position: absolute;
  top: 0;
}
.office_info#map_list{
  align-content: baseline;
  position: absolute;
  bottom: 0;
  height:auto;
  align-content: space-between;
  display: grid;
}

/* PC 화면에서 2열로 표시 */
@media (min-width: 1024px) {
  #map_list {
      grid-template-columns: repeat(2, 1fr); /* 강제 2열 */
      justify-content: center;
      gap: 20px; /* li 요소 사이 여백 */
  }
}


/* 모바일에서는 자동 1열 */
@media (max-width: 1023px) {
  #map_list {
      grid-template-columns: 1fr; /* 1열 */
  }
}

.office_info li{
  width:100%;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  font-size:17px;
  color:#999;
  line-height:120%;
  align-items:flex-start;
  margin:4.5% auto 0 auto;
}
.office_info.sm li{
  font-size:14px;
  margin:2% auto 0 auto;
  text-transform: uppercase;
}
/* .office_info li:first-child{
  margin:0 auto;
} */
.office_info li b,
.office_info li p{
  width:100%;
}
.office_info li b{
  font-size:30px;
  line-height:100%;
  color:#000;
  display: block;
  margin:0 0 2%;
}
.office_info.sm li:not(.map) b{
  position:relative;
  overflow: hidden;
  display:inline-block;
  width:auto;
  padding:0 0 4px;
}
.office_info.sm li:not(.map) b:before{
  content:"";
  position:absolute;
  bottom:0;
  width:100%;
  height:2px;
  left:-400px;
  /* transition:all 0.8s; */
  background:#fa6862;
  display: none;
}
.office_info.sm li.act b:before{
  left:0;
}
.office_info.sm li b{
  font-size:24px;
  margin:0 0 1.5%
}
.office_info.sm li.map b{
  font-size:35px;
  margin:0;
}
.office_info.sm li.map .map_box{
  width:100%; 
  background:url(../images/card/map_img.png) no-repeat 20% center;
  background-size: contain;
  height: 100%;
  position: relative;
}
.office_info.sm li.map .map_box.type0{
  background:url(../images/card/map_1_on.png) no-repeat 20% center;
  background-size: contain;
}
.office_info.sm li.map .map_box.type1{
  background:url(../images/card/map_2_on.png) no-repeat 20% center;
  background-size: contain;
}
.office_info.sm li.map .map_box.type2{
  background:url(../images/card/map_3_on.png) no-repeat 20% center;
  background-size: contain;
}
.office_info.sm li.map .map_box.type3{
  background:url(../images/card/map_5_on.png) no-repeat 20% center;
  background-size: contain;
}
.office_info.sm li.map .map_box.type4{
  background:url(../images/card/map_4_on.png) no-repeat 20% center;
  background-size: contain;
}
.office_info.sm li.map .map_box span{
  position: absolute;
  font-size:0;
  width:25px;
  height:25px;
  background:url(../images/card/marker_icon.png) no-repeat center;
  background-size:contain;
}
.office_info.sm li.map .map_box span.type1{
  left:34.5%;
  top:51%;
}
.link{
  width: 100%;
  display:flex;
  flex-wrap:wrap;
  justify-content :flex-start;
  position:absolute;
  top:0;
}
.link p{
  margin:0 0 0 3%;
  font-size:30px;
  text-transform: uppercase;
  padding:1.5% 2.5%;
  border-radius:10px;
  border:1px #999 solid;
  box-shadow: 5px 5px 10px #ececec;
}
.link p:hover{
  background:#1a1a1a;
}
.link p:first-child{
  margin:0;
}
.link p a{
  display: block;
  color:#1a1a1a;
  font-weight:600;
}
.link p:hover a,
.link p:hover input{
  color:#fff;
}
.link p input{
  background:none;
  border:0;
  font-size:20px;
  font-weight:600;
}
#navdot {
  position: fixed;
  padding: 0;
  margin: 0;
  top: 50%;
  right: 2%;
  transform: translateY(-50%);
}

#navdot li {
  height: 18px;
  width: 18px;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.5;
  background:#ccc;
  margin:10px 0;
  text-indent:-999px;
  font-size:0;
}

#navdot li.active {
  background:#fa6862;
  opacity: 1;
}

.qr_wrap{
  position: absolute;
  bottom:0;
  right:0;
  width:70px;
  height:70px;
  height: auto;
  overflow: hidden;
}
.tax_info .qr_wrap{
  position: relative;
  margin: 0 10px 0 0;
}
.qr_wrap:before{
  position:absolute;
  width:100%;
  height:100%;
  content:"";
  text-align: center;
  color:#fff;
  font-size:12px;
  left:0;
  line-height:70px;
  bottom:-100px;
  /* transition:all 0.5s; */
  background:#000000b3 url(../images/card/down_icon.png) no-repeat center center;
  background-size:20px;
}
.qr_wrap.plus:before{
  background:#000000b3 url(../images/card/zoom_icon.png) no-repeat center center;
  background-size:30px;
}
.qr_wrap:hover:before{
  bottom:0;
  cursor: pointer;
}
.qr_wrap #qr_canvas{
  width:100%;
  height:100%;
  cursor: pointer;
}
.qr_wrap #qr_canvas img{
  max-width: 100%;
}
.qr_wrap #qr_canvas canvas{
  max-width:100%;
}

.capture_wrap{
  max-width:600px;
  width:95%; 
  height: 69vh;
  border:2px #333 solid;
  overflow-y: auto;
}
#capture_area{
  position: relative;
  background:#fff;
  box-sizing:border-box;
}
#capture_area .swiper-wrapper {
  height: auto;
}
#capture_area .swiper-wrapper .swiper-slide{
  height:80vh;
}

#downPop{
  position: absolute;
  top:0;
  left:0;
  background: #fff;
  width: 100%;
  height: 100%;
  z-index: 5;
  padding:5% 2%;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  display: none;
}
#downPop .btn_area{
  position: absolute;
  bottom:0;
  left:0;
  width:100%;
  text-align: center;
  padding:2%;
}
#downPop .btn_area input{
  padding:10px 20px;
  border-radius:5px;
  box-shadow: none;
  border:0;
  font-size:15px;
  color:#333;
}

#capture_pop{
  border:1px #f00 solid;
  position: absolute;
  left:0;
  top:0;
  z-index: 2;
}
#capture_pop canvas{
  width:500px;
}

#capture{
  border:1px #f00 solid;
  position: absolute;
  z-index: 5;
  width:100px;
  height:100px;
  background:#333;
  color:#fff;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
}

.user_info li input{
  border:0;
  background:none;
  box-shadow: none;
  font-size:0;
  width:50px;
  height:50px;
  display: inline-block;
  filter: grayscale(1);
  cursor:pointer;
}
.user_info li input:first-child{
  margin:0 0 5px 0;
}
.user_info li #capturebtn{
  background:url(../images/card/capture_icon.png) no-repeat center;
  background-size: 45px;
}
.user_info li #capturebtn.share{
  background:url(../images/card/share_icon.png) no-repeat center;
  background-size: 45px;
}
.user_info li #sharedbtn{
  background:url(../images/card/url_icon.png) no-repeat center;
  background-size: 32px;
}
.user_info li input:hover{
  filter: grayscale(0);
}

.clip_area{
  position: relative;
  margin:0 0 0 10px;
  display: none;
}
#confirm_pop{
  position:absolute;
  left:45px;
  top:50%;
  margin:-14px 0 0 0;
  font-size:0.8rem;
  line-height: 100%;
  background:#333;
  color:#fff;
  border-radius:5px;
  padding:5px;
  display: none;
  /* transition:all 1s; */
}
#qr_pop{
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  background:rgba(0,0,0,0.8);
  display: none;
}
#qr_pop .mid_wrap .pop_close{
  font-size:0;
  width:3rem;
  height:3rem;
  position: absolute;
  right:2%;
  top:2%;
  background:none;
  border:0;
  transform: rotate(45deg);
  cursor: pointer;
}
#qr_pop .mid_wrap .pop_close span{
  position: absolute;
  width:100%;
  background:#fff;
  height:2px;
  top:50%;
  margin:-1px 0 0 0;
}
#qr_pop .mid_wrap .pop_close span:nth-of-type(2){
  transform: rotate(90deg)
}
#qr_pop p {
  border:3px #ffe142 solid;
  padding:2%;
  background:#fff;
  max-width:80%;
  margin:0 auto;
}
#qr_pop .mid_wrap img{
  max-width:100%;
}


@media(max-width:960px){
  .slide{
    padding:30px 25px;
  } 
  .slide .top_info h1,
  .slide .big_tit .position{
    font-size:1.5rem
  }
  .slide .big_tit .depart{
    font-size:1rem;
    color:#999;
    font-weight:300
  }
  .slide .big_tit .name{
    font-size:3.2rem
  }
  .slide .user_info li{
    font-size:1rem;
    line-height:120%;
    margin:10px 0 0 0;
  }
  .link p{
    font-size:1.4rem;
  }
  .office_info{
    width:100%;
  }
  .office_info#map_list{
    width:82%;
  }
  .office_info li{
    font-size: 0.8rem;
    word-break: keep-all;
    margin:6% auto 0 auto
  }
  .office_info.sm li{
    margin:3.5% auto 0 auto;
    font-size: 0.7rem;
  }
  .office_info.sm li:first-child{
    margin:0 auto;
  }
  .office_info li b,
  .office_info.sm li.map b{
    font-size:1.2rem;
  }
  .office_info.sm li b{
    font-size:0.9rem;
  }
  #navdot li{
    width:14px;
    height:14px;
  }
  .qr_wrap{
    width:50px;
    height:50px;
    
  }
  .qr_wrap:before{
    line-height:50px;
  }
}

@media(max-height:550px){
  .slide{
    padding:4% 3%;
  }
  .slide .top_info h1,
  .slide .user_info .big_tit p{
    font-size:1.2rem
  }
  .slide .user_info .big_tit{
    padding:3% 0;
  }
  .slide .user_info li,
  .slide .user_info .tax_info li span:first-child{
    font-size:0.8rem;
    line-height:110%;
  }
  .slide .user_info .tax_info li span:first-child{
    padding:3px 7px;
  }
  .office_info li{
    margin:3% auto 0 auto;
  }
  .office_info.line li{
    margin:1% auto 0 auto;
    padding:1% 2%
  }
  .office_info li b{
    font-size:1rem;
  }
  .office_info li{
    font-size:0.7rem;
  }
}


@media((min-width:420px) and (max-height:550px)){
  .slide{
    padding:2% 3%;
  }
  .link p{
    font-size:0.7rem;
    text-align: center;
    line-height:1rem;;
    border-radius:5px;
  }
  .slide .big_tit .name{
    font-size:2.5rem;
  }
  .slide .big_tit .position{
    font-size:1.2rem;
  }
  .office_info.map li{
    display: none;
  }
  .office_info#map_list{
    height: 100%;
  }
  .office_info#map_list li b{
    font-size:0.65rem;
  }
  .office_info.sm li{
    margin:1% auto 0 auto;
    font-size: 0.6rem;
  }
}

@media((min-width:420px) and (max-height:320px)){
  .slide{
    padding:2% 3%;
  }
  .link p{
    font-size:0.7rem;
    padding:1% 1.2%;
    border-radius:5px;
  }
  .office_info.sm li{
    font-size:0.5rem;
   }
  .office_info li{
    font-size:0.6rem;
  }
  .office_info li b{
    font-size:0.7rem;
  }
  .office_info#map_list li b{
    font-size:0.5rem;
  }
}
@keyframes fadein {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}
@-moz-keyframes fadein { /* Firefox */
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}
@-o-keyframes fadein { /* Opera */
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}