body{overflow-x: hidden; overflow-y: auto;}
.deco{
}
.deco-text-right{
  font-size: 0.875rem;
  color:#767676;
  writing-mode: vertical-rl;
  position: fixed;
  right:20px;
  z-index: 9;
  height: 100vh;
   display: flex;
  flex-direction: row;
    align-items: center;
    justify-content: center;}
.deco-text-left{
  font-size: 0.875rem;
  color:#767676;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  position: fixed;
  left:20px;
  z-index: 9;
  height: 100vh;
   display: flex;
  flex-direction: row;
    align-items: center;
    justify-content: center;}
/* GNB */
.header {
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  height: 70px;
  /* background-color: #ffffff; */
  z-index: 9;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);

}
.logo{font-size: 30px; font-weight: bold; margin-left: 1rem; }
.logo a{color:#000000;}
.logo a:hover{color:#F43053;}
.menu{height: 60px; width: 100%;max-width: 1660px; display: flex; justify-content: space-between; align-items: center;}
.menu .active{color:#F43053;}
.menu ul{list-style: none; margin-bottom: 0rem;}
.menu ul li{list-style: none; text-align: center; float: left;}
.menu ul li a{font-size: 1.125rem; padding: 0rem 1rem;}
.introduce{margin-right:1rem;}
.introduce a{display: flex;align-items: flex-end;}
.download-icon{ margin-left: 5px; margin-bottom: 4px;
width: 1.25rem; height: 1.25rem;
  background-color: #191919;
    -webkit-mask: url("../images/download-icon-grey.svg") no-repeat center;
    mask: url("../images/download-icon-grey.svg") no-repeat center;}
.introduce:hover .download-icon{transition:all 0.3s; background-color: #F43053;}
a{transition:all 0.3s;}

@media (max-width: 991px){
  .mobile-menu{width: 3.5rem; height: 3.5rem;}
  .menu{height: 100%; margin: 0 1rem;}
  .offcanvas-body {padding-right: 3rem;}
.offcanvas-body .menu{display: flex;justify-content: flex-start; align-items: flex-start;}
.offcanvas-body .nav-item{padding-top: 1rem;}
.offcanvas-body .nav-item a{font-size: 2.5rem; }
.offcanvas-header {flex-direction: row-reverse;height: 70px; margin: 0 1rem;}
.offcanvas{width: 50%!important;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  border:0px!important;}
.offcanvas .download-icon{height: 3rem; width: 3rem;}
.offcanvas .btn-close{background-image: url("../images/close-icon-black.svg")!important;    opacity: 1; width:3.5rem; height: 3.5rem;
background: transparent var(--bs-btn-close-bg) ; padding:0;margin: 0;}
.offcanvas .introduce{padding-top: 4rem;}
.header {height: 4.375rem;}
.offcanvas-backdrop{opacity: 0!important;}
}
@media (max-width: 768px){
  .offcanvas-header {height: 50px; margin: 0 1rem;}
  .menu{height: 100%; margin: 0 1rem;}
.header {height: 6.375rem;}
}

/* 섹션 */
.section{display: flex; justify-content: center; align-items: center;}
.section1 {
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  z-index: 8;
  min-height: 1000px;
  position: relative;
}

.section2 {
  width: 100%;
  height: 100vh;
  background-color: #131313;
  background-image: url("../images/bg-section2.png");
  background-position: center;
  z-index: 9;
  min-height: 600px;
}

.section3 {
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
}
.section4 {
  width: 100%;
  position: relative;
  padding-top:9.375rem;
    padding-bottom:9.375rem;

  background-color: #ffffff;
}
.section5 {
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
}
.section6 {
  width: 100%;
  height: 100vh;

  background-image: url("../images/bg-section6.png");
  background-position: center;
  z-index: 9;
  min-height: 600px;
}
.section7 {
  width: 100%;
  height: 350px;
  padding-top: 90px;
  padding-bottom: 90px;
  background-color: #191919;
}

@media (max-width: 991px){
  .section2 {
    background-size: cover;
  }
  .section6 {
    background-size: cover;
  }
}
/* 상단애니메이션 */
.main-anmaion {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 100vh;
      align-items: center;

}

.cont{
  max-width: 1660px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
iframe{}
.ani-iframe {}
.title{text-align: center;}
.title-point {font-size: 1.125rem;font-weight: 500;  }
.title-body{font-size: 2.25rem;font-weight: 200;  }
.title-body2{font-size: 2.5rem;font-weight: 700; }
.title-nomal{font-size: 2.25rem; font-weight: 700;}
.title-semibig{font-size: 2.5rem; font-weight: 600;}
.title-big{font-size: 2.875rem; font-weight: 700;}
.title-subbody{font-size: 1.25rem;font-weight: 400;  }
.contents{display: flex; justify-content: center; align-items: center; height: 100%;}
@media (max-width: 641px) {
  .main-anmaion .title-nomal{font-size: 2.575rem; font-weight: 700;}
  .main-anmaion .title-big{font-size: 2.575rem; font-weight: 700;}
  .section2 .title-body{line-height: 1.7;}
  .title-subbody{font-size: 1.5rem;  }
  .ani-iframe {
    display: none;
  }

  .m-ani-iframe {
    display: block;
  }

}
.iframe100 {
  display: block;
  border: none;
  height: 35vh;
  width: 100vw;

}
.container {
  max-width: 1400px;
}

#animation_container {
  background-color: rgba(255, 255, 255, 1.00);
  width: 100%;
  max-width: 191.25rem;
  margin: 0 auto;
}

#canvas {
  position: absolute;
  display: block;
  background-color: rgba(255, 255, 255, 1.00);
}

#dom_overlay_container {
  pointer-events: none;
  overflow: hidden;
  width: 100%;
  max-width: 767px;
  position: absolute;
  left: 0px;
  top: 0px;
  display: block;
}


.main_contents {
  width: 1920px;
  max-width: 1920px;
}


/* 서비스 */
.service-card{width: 100%; max-width: 1240px; margin: 0 auto;}
.card-item{
  background-color: #131313;
  text-align: left;
  padding:100px 10px 50px 20px;
  height: 410px;
  cursor: pointer;
}
.online .icon-img{height:112px; background-repeat: no-repeat; background-image: url("../images/service-icon-nomal-01.png");}
.card-mobile .icon-img{height:112px; background-repeat: no-repeat; background-image: url("../images/service-icon-nomal-02.png");}
.offline .icon-img{height:112px; background-repeat: no-repeat; background-image: url("../images/service-icon-nomal-03.png");}
.design .icon-img{height:112px; background-repeat: no-repeat; background-image: url("../images/service-icon-nomal-04.png");}
.card-title{color:#ffffff; font-size: 1.875rem; padding-top: 30px;}
.card-sub{color:#BEBEBE; font-size: 0.938rem;padding-top: 20px;}
.online:hover{transition:all 0.3s; background: #F8F8FA;}
.online:hover .icon-img{transition:all 0.3s; background-image: url("../images/service-icon-hover-01.png");}
.online:hover .card-title{transition:all 0.3s;color:#000000;}
.online:hover .card-sub{transition:all 0.3s;color:#767676; }
.card-mobile:hover{transition:all 0.3s; background: #F8F8FA;}
.card-mobile:hover .icon-img{transition:all 0.3s; background-image: url("../images/service-icon-hover-02.png");}
.card-mobile:hover .card-title{transition:all 0.3s;color:#000000;}
.card-mobile:hover .card-sub{transition:all 0.3s;color:#767676; }
.offline:hover{transition:all 0.3s; background: #F8F8FA;}
.offline:hover .icon-img{transition:all 0.3s; background-image: url("../images/service-icon-hover-03.png");}
.offline:hover .card-title{transition:all 0.3s;color:#000000;}
.offline:hover .card-sub{transition:all 0.3s;color:#767676; }
.design:hover{transition:all 0.3s; background: #F8F8FA;}
.design:hover .icon-img{transition:all 0.3s; background-image: url("../images/service-icon-hover-04.png");}
.design:hover .card-title{transition:all 0.3s;color:#000000;}
.design:hover .card-sub{transition:all 0.3s;color:#767676; }
@media (max-width: 991px){
  .card-item{
    background-color: #131313;
    text-align: left;
    padding:3.125rem;
    height: auto;
    cursor: pointer;
    display: flex;
    flex-direction: row;
  }
  .online .icon-img{width:112px; height:112px; background-position: center; margin: 0rem 1.50rem 0 0; background-size:contain; }
  .card-mobile .icon-img{width:112px; height:112px; margin: 0rem 1.58rem 0 0.5rem; background-size:contain; background-position: 20%;}
  .offline .icon-img{width:112px; height:112px; margin: 0rem 1.58rem 0 0.5rem; background-size:contain; }
  .design .icon-img{width:112px; height:112px; margin: 0rem 1.58rem 0 0.5rem; background-size:contain; }
  .card-title{color:#ffffff; font-size: 2.25rem; padding-top: 0px;}
  .card-sub{color:#BEBEBE; font-size: 1.5rem;padding-top: 0px;}
}
@media (max-width: 768px){
  .card-item{
    padding:2.125rem;
  }
  .online .icon-img{width:150px; height:auto; margin: 0rem 1.50rem 0 0; background-size:contain; }
  .card-mobile .icon-img{width:150px; height:auto; margin: 2.5rem 1.58rem 0 0.5rem; background-size:contain; }
  .offline .icon-img{width:150px; height:auto; margin: 2.5rem 1.58rem 0 0.5rem; background-size:contain; }
  .design .icon-img{width:150px; height:auto; margin: 2.5rem 1.58rem 0 0.5rem; background-size:contain; }
  .card-title{color:#ffffff; font-size: 2.25rem; padding-top: 0px;}
  .card-sub{color:#BEBEBE; font-size: 1.5rem;padding-top: 0px;}
}


/* 포트폴리오 */
.portfolio-page .portfolio-card{max-width: 1650px;}
.portfolio-page .cont{max-width: 1650px;}
.portfolio-card{width: 100%; max-width: 1240px; margin: 0 auto; padding-bottom: 2rem;}
.port-item{cursor: pointer; text-align: left;}
.no-item{cursor:default; }
.thum-img{transition:all 0.3s;  overflow: hidden;}
.thum-img img{transition:all 0.3s;}
.thum-img img:hover{transition:all 0.5s; transform: scale(1.1);}
.thum-title{color:#000000; font-size: 1.25rem; padding-top: 10px; font-weight: 600;}
.thum-sub{color:#7E7E7E; font-size: 1rem;}
.more{padding-top:2rem; font-size: 1.25rem;}
.more a{color:#767676;}
.more a:hover{color:#F43053;}
.more-icon{width:1.625rem; }
@media (max-width: 991px){
  .thum-title{font-size: 1.75rem;padding-top: 5px;}
  .thum-sub{font-size: 1.375rem;}
  .more{ font-size: 1.75rem; }
  .more-icon{width:2.125rem; }
  .more a{color:#000000;}
}

/* 포트폴리오 modal */
.modal-header{border: 0px;position:relative; width: 100%; z-index: 9; background: rgba(0,0,0,0.7);
  backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
 border-radius: 0px;
}
.modal-content{background-color: #F8F8FA;border-radius: 0px;}
.modal-body{ padding-top:4.25rem;text-align: center; height: 70vh; overflow: hidden; overflow-x: hidden;overflow-y:scroll;}
.modal-cont{max-width: 960px; margin:0 auto; padding:2rem 0; }
.modal .btn-close{background-image: url("../images/close-icon.svg")!important;    opacity: 1; width:1.25rem; height: 1.25rem;
background: transparent var(--bs-btn-close-bg) ; padding:0;
}
.modal-fullscreen .modal-header {  border-radius: 0; padding: 0rem 1rem; height: 40px;}
.modal-xl .modal-header {  border-radius: 0; padding: 0rem 1rem; height: 40px;}
.modal-body .title-subbody{font-weight: 400;}
@media (max-width: 991px){
.modal-fullscreen .modal-header {padding: 0rem 2rem;}
.modal .btn-close{width:1.75rem; height: 1.75rem;}
.modal-body{ padding-top:6.25rem;text-align: center; height: auto;top: 0; overflow-x: hidden; overflow-y: hidden;}
.modal-header{position:fixed;}
.modal-xl {top:-1px;}
.modal-xl .modal-header {padding: 0rem 2rem; }
.modal-xl{width: 100vw; max-width: none;  margin: 0;}
}

.map-img{padding-top:3rem; max-width: 1240px; margin: 0 auto;}

.download-ara a{font-size: 1.25rem; color:#767676; }
.download-ara a:hover{transition:all 0.3s; color:#F43053; }
.download{display: flex;     justify-content: center; padding-top: 2.7rem;     align-items: flex-end;}
.download .download-icon{ background-color:#F43053; width: 1.3rem; height: 1.3rem; padding-top: 10px;;}
@media (max-width: 991px){
  .section6 .title-point{font-size: 1.75rem;}
  .section6 .title-semibig{font-size: 1.85rem; padding-top: 2rem!important;}
  .download-ara a{font-size: 1.75rem; color:#000000; }
.download .download-icon{ width: 2rem; height: 2rem; padding-top: 10px;;}
}

.footer .cont{display: flex; justify-content: space-between; max-width: 1240px; }
.footer .footer-left{position: relative; text-align: left; display: flex; flex-direction: column; justify-content: space-between;}
.footer .slogan{font-size: 1.75rem}
.footer .copyrignt{font-size: 0.75rem; position: absolute; bottom: 0rem;}
.footer .footer-right{text-align: left; display: flex; height: 165px;  flex-direction: column;     justify-content: space-between;}
.footer .c-name{font-size: 1.125rem}
.footer .info{font-size: 0.75rem}
.info-table{text-align: left; font-size: 0.875rem; font-weight: 400;}
.info-table td{padding-right: 20px; padding-top: 10px;}
@media (max-width: 991px){
  .section7 {
    width: 100%;
    padding-top: 3.375rem;
    padding-bottom: 3.375rem;
    background-color: #191919;
  }
.footer .red-divide{background-color:#F43053; width:5.625rem; height: 2px; }
.footer .slogan{font-size: 1.75rem; padding-bottom: 1rem;}
.footer .c-name{font-size: 1.375rem; padding-top: 2.5rem;}
.info-table td{padding-right: 10px; padding-top: 0.313rem;}
.info-table{text-align: left; font-size: 1.375rem; font-weight: 400;}
.footer .copyrignt{font-size: 1.25rem; padding-top: 4.5rem; position: relative;;}
}