@charset "utf-8";
/* smw.css */
@import url("reset.css");

/* ::-webkit-scrollbar {display: none;}   */
/* Firefox  */
html {scrollbar-width: none;}
/* IE 10+  */
html {-ms-overflow-style: none;}

body {font-family: 'Pretendard Variable', sans-serif;color:#333}
h2{font-size:72px;font-weight: 700;line-height:96px;}  
h3{font-size:24px;font-weight: 700;line-height:40px;}
h4{font-size:24px;font-weight: 400;line-height:34px;}
h5{font-size:20px;font-weight: 400;line-height:32px;}
h4 > strong {font-weight: 700;}
.clear:after{content: "";display: block;clear: both;}
.tb1200, .mb, .mb580, .mb1000{display: none;}



/*header*/
.header{z-index:100;width:100%;height:80px;box-sizing: border-box;position: fixed;top:0}
.header.on{background: rgba(255, 255, 255, 0.8);backdrop-filter: blur(15px);box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);}
.headWrap{height:80px;margin:0 auto;box-sizing: border-box;position: relative;}
.logo{width:124px;height:50px;box-sizing: border-box;position: absolute;left:0;top:20px}
.logo img{width:100%}
.gnb{position: absolute;right:0;top:30px}
.gnb li{float: left;margin-right:35px;}
.gnb li:last-of-type{margin-right:0}
.gnb a{font-size:16px;font-weight: 700;}


/* contens */
.contens{width:100%}
.w1200{width:1200px;margin:0 auto;box-sizing:border-box}
section{padding-top:120px}

/* visual */
.visual{padding-top:200px;position: relative;}
.visual h2{font-size:60px;line-height:72px ; margin-bottom:50px}
.visual h3{margin-bottom:20px;line-height: 40px;}
.visual i{z-index: 10; display:block;width:160px;height:160px;border-radius: 50%;box-sizing: border-box;position: absolute;right:0;bottom:0}
.visual i img{width:100%}

@keyframes bounce {
    0%, 100% { bottom: 0px; }
    50% { bottom: 20px; }
  }  
  .visual i {animation: bounce 1s infinite ease-in-out;}

/* partners */
.partners {padding-top: 240px; padding-bottom: 240px; overflow: hidden;}
.partners h2 {margin-bottom: 80px;}
.partners .partner {transform: translateX(calc((100vw - 1200px) / 2)); margin-left: auto;}
.partners .partner + .partner {margin-top: 160px;}
.partners .pSlideWrap {display: flex; flex-direction: column;}
.partners .pSlideWrap > p {display: block; width: 100%; font-size: 48px; font-weight: 700; margin-bottom: 48px;}
.partners .pSlide {position: relative; overflow: hidden; width: 100%; height: 48px; -webkit-mask-image: linear-gradient(to right,#0000,#000 12.5%,#000 60.5%,#0000); mask-image: linear-gradient(to right,#0000,#000 12.5%,#000 60.5%,#0000);}
.partners .pSlide .inner {display: flex; position: relative; white-space: nowrap;}
.partners .box {flex: 0 0 auto; height: 48px; margin: 0 40px;}
.partners .box img {display: block; max-width: 100%; height: 100%; object-fit: contain;}

/* bigTitle */
.bigTitle{position: relative;width: 100%;height:470px;overflow: hidden;}
.bigTitle p{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); font-size: 400px;    font-weight: 700;text-align: center;white-space: nowrap;overflow: hidden;  }

/* rocket */
.rocket{box-sizing: border-box;position: relative;}
.rocket h2{margin-bottom:40px}
.rocket i{display: block; width:386px;height:480px;box-sizing: border-box; padding-top: 160px; position: absolute;right: 390px; bottom: -140px;opacity: 0.2; transition: all 0.7s ease; z-index: 0; animation: none;}
.rocket.on i {right: 90px;bottom: calc(50% - 140px); opacity: 1;}
.rocket i img{width:100%}

/* dev */
.light i{display: block; width: 458px; height:597px;box-sizing: border-box;position: absolute;right: 0; bottom: 0; margin-bottom: -265px; transition: all 0.7s ease;}

/* about */
.aboutWrap li{width:33.333%; float: left;margin-bottom:97px;min-height:252px;box-sizing: border-box;}
.about h2{margin-bottom:100px}
.about h4 p{margin-bottom:10px;font-weight: 700;line-height: 40px;}
.aboutIco{min-height:160px;}
.aboutIco img{box-sizing: border-box;margin-bottom: 15px;}

/* fullbox */
.fullbox {position: relative; padding-bottom: 120px;}
.fullbox h2 {margin-bottom: 40px;}
.fullbox i {z-index: 10; display:block; position: absolute; width: 448px; height: 480px; right: 85px; box-sizing: border-box; animation: bounce 1s infinite ease-in-out;}
.fullbox i img {width: 100%;}
/*bgNo1*/
.bgNo1 {position: relative;}
.bgNo1 > div{z-index:10;width:367px;height:400px;background: url(../img/bgno1.png) no-repeat 0 0;background-size:100% 100%; position: absolute;left:0;top:-84px}


/*bgNo2*/
.bgNo2 {position: relative;}
.bgNo2 > div{z-index:10;width:330px;height:480px;background: url(../img/bgno2.png) no-repeat 0 0;background-size:100% 100%; position: absolute;right:88px;top:288px}



/* service */
/*scrollMagic cardSliderWrap*/
.service {
    width: 100%;
    padding: 120px 0 240px;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
  }

.build.service {padding: 200px 0 120px;}
.service h2{margin-bottom:80px}
  
  .cardSliderWrap {
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    position: relative;
  }
  
  .cardSlider {
    display: flex;
    transform: translateX(calc((100vw - 1200px) / 2)); 
    gap: 30px;
    transition: transform 0.6s ease;
  }
  .cardItem {
    width: 996px;
    height: 480px;
    border-radius: 16px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    position: relative;
  }
.cardItem dl{color:#fff;position: absolute;bottom:0;left:0;padding:40px;box-sizing: border-box;}
.cardItem dt{font-size: 48px;font-weight: 700;margin-bottom:21px}
.cardItem dd{font-size: 24px;font-weight: 400; line-height: 32px;}
.cardItem dd ul {margin-top: 20px;}
.cardItem dd ul li {position: relative; font-size: 16px; line-height: 28px;}
.cardItem dd ul li::before {content: ''; position: relative; display: inline-block; margin-right: 6px; background-size: 4px; width: 4px; height: 4px; background-color: #fff; left: 0; bottom: 2px; vertical-align: middle;}

/* inquiry */
.inquiry {padding-bottom: 240px;}
.inquiry h2 {margin-bottom: 40px;}


/* together */
.slideWrap {margin:80px auto 240px;}
.slide{position: relative;}
.txtWrap{position: absolute;left:0;right:0;margin:0 auto;top:calc(50% - 60px);}
.txtWrap p {text-align: center;font-size: 24px;font-weight: normal;color:#fff;letter-spacing: -0.5px;line-height: 1.3;}
.txtWrap p.tit {margin: 20px 0;font-weight: 600;}
.slick-slide img {margin: 0 auto;}
.slide03 p {color:#333}

/* contact */
/*placeholder*/
/* Chrome, Safari, Opera */
::-webkit-input-placeholder {color: rgba(51, 51, 51, 0.38);}
/* Firefox 19+ */
::-moz-placeholder {color: rgba(51, 51, 51, 0.38);opacity: 1;}
/* Firefox 4-18 */
:-moz-placeholder {color: rgba(51, 51, 51, 0.38);opacity: 1;}
/* Internet Explorer 10-11 */
:-ms-input-placeholder {color: rgba(51, 51, 51, 0.38);}
/* Microsoft Edge */
::-ms-input-placeholder {color: rgba(51, 51, 51, 0.38);}
.contact{padding-bottom:240px; padding-top: 209px;}  
.contactWrap {display: flex;gap: 50px;align-items: flex-start;}   
.contactLeft {flex: 0 0 auto;text-align: left;}
.contactLeft h2 {font-size: 72px;font-weight: bold;margin: 0 0 20px;}   
.contactRight {flex: 1;padding-top:30px}
.formGroup {margin-bottom: 20px;}
.formGroup label {font-size:14px;display: block;margin-bottom: 8px;font-weight: 400;}
.formGroup input,
.formGroup textarea {width: 100%;padding: 19px;box-sizing: border-box;border: 1px solid rgba(0,0,0,0.12);border-radius: 0px;outline: none;font-size: 16px;font-family: 'Pretendard Variable', sans-serif;color:#333;font-weight: 400;}
.formGroup textarea {height: 240px;resize: none;}
.formGroup input {padding: 19px;}
.checkGroup {margin-bottom: 40px;font-size: 14px;}
.checkGroup input {margin-right: 8px;}
.checkGroup input[type="checkbox"] {accent-color: black;}
.starInput {position: relative;}  
.starInput input {width: 100%;padding-right: 30px;box-sizing: border-box;}    
.starInput::after {content: "*";color: #DB4A4A;position: absolute;right: 18px;bottom:9px;transform: translateY(-50%);pointer-events: none;}
.contactBtn[type="submit"] {width:100%;background: #333;color: #fff;padding: 18px 24px;border: none;cursor: pointer;font-size: 16px; font-weight: bold;}
.star{color:#DB4A4A}
.popupOpen{font-weight: 700;text-decoration: underline;color:#000}


/* card */
.cardWrap {margin-top: 80px;}
.wCard {position: relative; float: left; display: block; width: calc(50% - 20px); box-shadow: 3px 6px 20px rgba(0,0,0,0.16); border-radius: 20px; z-index: 1; background-color: #fff;}
.wCard + .wCard {float: right;}
.wCard dl {padding: 40px 40px 0;}
.wCard dt {font-size: 48px; font-weight: 700; margin-bottom: 20px; color: #000;}
.wCard dd {font-size: 24px; font-weight: 400; line-height: 30px; color: #000;}
.wCard dd img {vertical-align: middle; margin-bottom: 2px; margin-left: 3px;}
.wCard .cardImg {position: absolute; bottom: 0; right: 0;padding: 20px 20px 40px; text-align: end; width: 100%; box-sizing: border-box;}
.wCard .cardImg img {max-width: 100%; width: auto; max-height: 160px; object-fit: contain; box-sizing: border-box;}

#business .wCard {padding-bottom: 220px; bottom: -80px; opacity: 0; transition: bottom 0.7s ease 0.3s, opacity 0.7s ease 0.3s, transform 0.3s ease-in-out;}
#business.on .wCard {bottom: 0; opacity: 1;}
#business .wCard + .wCard {transition: bottom 0.7s ease 0.6s, opacity 0.7s ease 0.6s, transform 0.3s ease-in-out;}
#business .wCard .cardImg img{ transition: transform 0.4s ease-in-out;}
.inquiry .wCard {padding-bottom: 92px;}
.inquiry .wCard .cardImg {padding: 40px; height: 100%; }
.inquiry .wCard .cardImg img {position: relative; top: 50%; transform: translateY(-50%);}


/* footer */
.footer{background: #333;padding: 70px 0;}
.footLogo {width:150px;height:40px;box-sizing: border-box;margin-bottom:40px }
.footLogo img{width:100%}
.footerInner{font-size: 16px;font-weight: 400;color:rgba(255, 255, 255, 0.8);line-height: 30px;position: relative;}
.footInfo{margin-bottom:40px}
.footInfo span{position: relative;display: inline-block;margin-right:20px}
.footInfo span:after{content: "";width:1px;height:16px;background: rgba(255, 255, 255, 0.6);;position: absolute;right:-12px;top:7px}
.footInfo span:last-of-type:after{display: none;}
.privacyPolicy{position: absolute;right:0;bottom:0}
.privacyPolicy a{color:rgba(255, 255, 255, 0.8);font-weight: 700;}
.privacyPolicy:hover a{text-decoration: underline;}
.copyRight{color:rgba(255, 255, 255, 0.35);}



.popupOverlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.5);display: none;justify-content: center;align-items: center;z-index: 1000;}
.popup {position: absolute;left:0;right:0;margin:120px auto 0; width:480px;min-height:600px;max-height: 60vh; background: #fff;padding: 30px;border-radius: 8px;box-shadow: 0 5px 15px rgba(0,0,0,0.3);position: relative;overflow-y: scroll;}
.popupClose {position: absolute;top: 10px;right: 10px;background: transparent;border: none;font-size: 24px;cursor: pointer;}
.popup .tit {margin-top: 40px;font-size: 16px;font-weight: 600;}
.popup .txt {margin-top: 10px;font-size: 14px;line-height: 1.3;}
.popup li {padding-left: 13px;font-size: 14px;margin-bottom: 5px;}
.popup li::before {content:'';position: absolute;width: 3px;height: 3px;background: #333;margin-left: -13px;margin-top: 7px;}
.popup li:first-of-type {margin-top: 10px;}
.popup li:last-of-type {margin-bottom: 0px;}



.overlay { 
  position: fixed;
  left:0px;
  top: 0px;
  right:0px;
  bottom:0px;
  display: none;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 200;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  pointer-events: none;
}

.loader {
  position: relative;
  width: 40px;
  margin: auto;
}
.loader .circle {
  position: absolute;
  width: 38px;
  height: 38px;
  opacity: 0;
  transform: rotate(225deg);
  animation-iteration-count: infinite;
  animation-name: orbit;
  animation-duration: 5.5s;
}
.loader .circle:after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 5px;
  background: #FFF;
  /* Pick a color */
}
.loader .circle:nth-child(2) {
  animation-delay: 240ms;
}
.loader .circle:nth-child(3) {
  animation-delay: 480ms;
}
.loader .circle:nth-child(4) {
  animation-delay: 720ms;
}
.loader .circle:nth-child(5) {
  animation-delay: 960ms;
}
@keyframes orbit {
  0% {
    transform: rotate(225deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  7% {
    transform: rotate(345deg);
    animation-timing-function: linear;
  }
  30% {
    transform: rotate(455deg);
    animation-timing-function: ease-in-out;
  }
  39% {
    transform: rotate(690deg);
    animation-timing-function: linear;
  }
  70% {
    transform: rotate(815deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  75% {
    transform: rotate(945deg);
    animation-timing-function: ease-out;
  }
  76% {
    transform: rotate(945deg);
    opacity: 0;
  }
  100% {
    transform: rotate(945deg);
    opacity: 0;
  }
}







@media (max-width: 1920px) {
.bgNo1 > div{transform: scaleX(-1);left:inherit;right:0}
}


/* ________________________________________tablet________________________________________ */
@media (max-width: 1250px) {

.w1200{width:100%;padding-left:5%;padding-right: 5%;}
.pc, .pc1200{display: none;}
.tb1200{display: block;}



/*header*/
.gnb{right:5%}
.logo{left:5%}
/* contens */
.contens{padding-top:130px}
/*visual*/
.visual{padding-top:0}
/* partners */
.partners .partner {transform: none; padding-left: 5%;}
/*bigTitle*/
.bigTitle p{top:60%; left: -100px;transform: translate(-0%, -50%);}
/* partners */
.partners .pSlideWrap > p {font-size: 30px;}
/* about */
.about h2{margin-bottom:50px}
.about h4{font-size: 17px;line-height:22px;}
/* fullbox */
.fullbox i {right: 40px;}
/*service*/
.cardSlider{transform:translateX(calc((100vw - 90%) / 2))}
.cardItem{width: 796px;height: 384px;}
/*bgNo2*/
.bgNo2 > div {right: 40px; top: 60px;}
/* contact */
.contact {padding-top: 0;}
/* card */
.wCard dt {font-size: 30px;}
.wCard dd {font-size: 16px; line-height: 22px;}
.wCard dd img {width: 16px; height: 16px;}
#business .wCard dd {height: 66px;}
.inquiry .wCard {padding-bottom: 122px;}
.inquiry .wCard dd {line-height: 19px;}
/* footer */
.privacyPolicy{right:5%}
}





@media (max-width: 1000px) {
.mb1000{display: block;}
/* rocket */
.rocket i {opacity: 1;position: inherit;right: 0;left: 0;margin: 0 auto;bottom: 0;top: 40px; padding-top: 0;}
/* light */
.light i {opacity: 1;position: inherit;right: 0;left: 0;margin: 0 auto;bottom: 0;margin-top: -10px; margin-bottom: 10px;}
/* fullbox */
.fullbox {padding-bottom: 0;}
.fullbox i {opacity: 1;position: inherit;right: 0;left: 0;margin: 0 auto;bottom: 0; margin-top: 48px;}
/*service*/
.cardItem{width: 597px;height: 288px;}
.cardItem dt{font-size: 30px;}
.cardItem dd{font-size: 18px;}
/* contact */
.contactLeft h2 {font-size: 60px;}
/*bgNo1*/
.bgNo1 > div{transform:none;right: 0; top:40px;width: 130px;height: 240px;background-position-x: 0;background-size: auto 100%;}

/*bgNo2*/
.bgNo2 > div{transform:none;right: 0px; top:-90px;width: 165px;height: 240px;background-position-x: 30px;background-size: auto 100%;}

/* card */
.wCard {float: none; width: 100%; padding: 0;}
.wCard + .wCard {float: none; margin-top: 16px;}


}




/* ________________________________________mobile________________________________________ */

@media (max-width: 730px) {
.pc_tb{display: none;}
.mb{display: block;}
/*header*/
.header.on{background: #fff;}
.header.open{height:100%;background: #fff}
.logo{position: inherit;left:0}   
.gnb{display: none; position: fixed;right:-5%;width: 110%;padding: 0;height: 100%;top: 80px;padding-top: 90px;}
.gnb.open{display: block;}
.gnb li{float: none;margin: 0 auto;text-align: center;padding-bottom: 70px;}
.gnb a{font-size: 20px;}
/*햄버거바*/
.menuToggle { position: absolute; right:5%;top:30px;width: 20px;height: 17px;cursor: pointer;background: none;border: none;z-index: 1001;}  
.menuToggle span {position: absolute;left: 0;width: 100%;height: 2px;background: #000;transition: all 0.2s ease;}
.menuToggle span:nth-child(1) { top: 0; }
.menuToggle span:nth-child(2) { top: 7px;width:80%;right:0;left:inherit }
.menuToggle span:nth-child(3) { top: 15px; }
.menuToggle.active span:nth-child(1) {transform: rotate(45deg);top: 10px;}  
.menuToggle.active span:nth-child(2) {opacity: 0;}  
.menuToggle.active span:nth-child(3) {transform: rotate(-45deg);top: 10px;}

/* contens */
h2{font-size: 48px;line-height:60px;}
h4{font-size: 16px;line-height: 26px;}

/*visual*/
.visual i{width:80px;height:80px;right:calc(50% - 40px);bottom:80px; margin-bottom: -80px;}
@keyframes bounceMobile {
    0%, 100% { bottom: -100px; }
    50% { bottom: -80px; }
  }
.visual i{animation: bounceMobile 1s infinite ease-in-out;}
.visual h2{font-size: 40px;line-height:48px; margin-bottom: 24px;}
.visual h3{font-size: 20px;line-height: 32px;}
.visual h5{font-size: 16px;line-height: 26px;}

/*bigTitle*/
.bigTitle{height:334px; padding-top: 160px;}
.bigTitle p{font-size: 280px; top: auto; transform: none;}

/* partners */
.partners {padding: 120px 0;}
.partners h2 {margin-bottom: 48px;}
.partners .pSlideWrap > p {font-size: 24px; margin-bottom: 24px;}
.partners .partner + .partner {margin-top: 48px;}
.partners .pSlide {height: 32px;}
.partners .box {height: 32px;}

/*rocket*/
.rocket{padding-bottom:40px}
.rocket i{width:350px;height:434px; margin-bottom: 0;}
/* light */
.light i {width: 351px; height: auto; margin-top: -90px; margin-bottom: 90px;}

/* fullbox */
.fullbox i {width: 350px; height: auto;}

/*about*/
.about h4 p{font-size: 20px;line-height:24px;}
.aboutWrap li{min-height:176px;width:50%;margin-bottom:40px}
.aboutWrap li:last-of-type, .aboutWrap li:nth-last-of-type(2) {margin-bottom:0}
.aboutIco {min-height:100px;margin-bottom: 10px;}
.aboutIco img {width: 100px; height: 100px;}


/*service*/
.service{padding: 120px 0;}
.service h2{margin-bottom:48px}
.mbServImg li{position: relative;margin-bottom:16px;width:100%;height:228px;overflow: hidden;border-radius: 10px;}
.mbServImg li:last-child {margin-bottom: 0;}
.mbServImg li img{height:100%; width: 100%; object-fit: cover;}
.mbServImg li ul {margin-top: 16px;}
.mbServImg li ul li {height: auto; font-size: 14px; line-height: 14px; margin-bottom: 14px;}
.mbServImg li ul li::before {content: ''; position: relative; display: inline-block; margin-right: 6px; background-size: 4px; width: 4px; height: 4px; background-color: #fff; left: 0; bottom: 2px; vertical-align: middle;}
.mbServImgTit{position: absolute;left:0;bottom:40px;padding:0 24px}
.mbServImgTit dt{font-size: 24px;font-weight: 700;color:#fff;margin-bottom:16px;}
.build.service {padding: 120px 0 0;}
.build .mbServImgTit dt {margin-bottom: 8px;}
.build .mbServImgTit {bottom: 24px;}
.mbServImgTit dd{font-size: 16px;font-weight: 400;color:#fff; line-height: 24px;}


/* together */
.slideWrap {margin: 48px auto 120px;}
.txtWrap p.tit {margin: 15px 0 20px;}


/* contact */
.contact{padding-bottom:120px}
.contactLeft {font-size: 48px;}
.contactWrap {display: block;}
.contactWrap ::placeholder {font-size: 14px;color: #ccc;}
.checkGroup a {text-decoration: underline;}

.popup {width: auto;height: 80vh;margin: 10vh 5%;overflow-y: scroll;padding: 20px;}

/* card */
.cardWrap {margin-top: 48px;}
.wCard dt {font-size: 24px; margin-bottom: 16px;}
.wCard dl {padding: 24px 24px 0;}
.wCard .cardImg {padding: 24px;}
#business.cardWrap {margin-top: 16px;}
#business .wCard {padding-bottom: 128px;}
#business .wCard dd {height: auto;}
#business .wCard:first-child .cardImg img {height: 112px;}
#business .wCard:last-child .cardImg img {height: 100px;}
.inquiry {padding-bottom: 120px;}
.inquiry h2 {margin-bottom: 24px;}
.inquiry .wCard {padding-bottom: 0;}
.inquiry .wCard dl {padding: 24px;}
.inquiry .wCard .cardImg {padding: 24px;}
.inquiry .wCard .cardImg img {height: 64px;}

/* footer */
.footInfo{margin-bottom:24px}
.footInfo span{font-size:16px;line-height: 30px;display: block;}
.footInfo span:after{display: none;}
.privacyPolicy{position: inherit;right:0;margin-bottom: 24px;}


}



@media (max-width: 580px) {
.mb580{display: block;}

}
@media (max-width: 420px) {
.pc_mb420{display: none;}
/*about*/
.about h4 p{font-size: 16px;line-height:22px;}

}

@media (max-width: 370px) {
  
  .light i,.fullbox i {width: 100%;}
  .rocket i {width: 100%; height: auto;}
}