@charset "utf-8";
/* css setting start */
.sec-wrap,
.sec-header,
.sec-content,
.sec-footer {position:relative;width:100%;margin:0;padding:0;box-sizing:border-box;}

/* contents */
.dv-conts-wrap {position:relative;width:100%;max-width:1280px;margin:0 auto;padding:0;box-sizing:border-box;overflow:hidden;}


/* contents 공통 css, 수정 주의 */
.cont-wr{width:90%; max-width:1200px; margin:0 auto;}
.inner{padding:160px 0;}
strong,b{vertical-align:baseline;}
.mo-br{display:none;}
.mo-block{display:none;}

/* aos */

/* header */
.sec-header{position:fixed; top:0; left:0; width:100%; z-index:9; height:100px;background:#fff; display:flex; align-items:center; transition:all ease .5s; }
.sec-header::before {content: '';z-index: -1;position: absolute;left: 0;top: 0;width: 100%;height: 100%;backdrop-filter: blur(10px);}
.sec-header a{color:#000;}
.sec-header .cont-wr{width:90%; max-width:1720px; margin:0 auto; display:flex; justify-content:space-between; align-items:center;}
.sec-header .logo a{font-size:24px;  }
.sec-header .nav > ul{display:flex;}
.sec-header .nav > ul > li{margin-left:40px;}
.sec-header .nav > ul > li > a{font-size:18px; font-weight:600;}
.sec-header .nav > ul > li > a i{display:none;}
.sec-header.reserve{background:transparent; }
.sec-header.reserve::before{display:none;}
.sec-header.reserve a{ color:#fff; }
.sec-header.scroll{  background:rgba(255, 255, 255, 0.95); }
.sec-header.scroll a{color:#000;}
.sec-header.top{top:-100px; background:none;}
.sec-header.top a{color:#fff;}
.mo-open{ display:none;}
.mo-open a{font-size:24px;width: 40px;height: 40px;display: flex; align-items: center; justify-content: center;}
.mo-close{font-size:24px; display:none;}
.mo-close a{font-size:24px;width: 40px;height: 40px;display: flex; align-items: center; justify-content: center;}


/* footer */
.sec-footer{background:#292a2c; color:#fff; padding:60px 0 30px ;}
.sec-footer .ft-logo{float:left;  margin-top:-7px;font-size:24px; font-weight:700;color:#848890;}
.sec-footer .ft-cont{  width:70%; margin-left:auto; }
.sec-footer .ft-cont .ft-link li{display:inline-block; margin-right:20px;}
.sec-footer .ft-cont .ft-link a{color:#fff; font-weight:500;}
.sec-footer .ft-cont p{color:#848890; margin-top:15px;}
.sec-footer .ft-cont p span + span{border-left:1px solid rgb(132 136 144 / 34%); margin-left:10px; padding-left:10px; line-height:1;}
.sec-footer .ft-cont p.copy{font-size:14px; margin-top:60px;}


/* main */
.main-tit{margin-bottom:100px; color:#000;}
.main-tit h2{color:#fff; font-size:60px; line-height:1.3; margin-bottom:70px;}
.main-tit h3{ font-size:50px; line-height:1.3; margin-bottom:20px; font-weight:300;}
.main-tit h3 strong{color:#0070e1;  }
.main-tit p{font-size:18px; }
.btn-more{font-size:18px; color:#000; font-weight:700;}
.btn-more i{display:inline-block;    line-height: 32px;  text-align: center; font-style:normal; width:30px; height:30px;border-radius:50%; background:#0070e1; color:#fff; margin-left:10px; font-size:16px; font-weight:300;}
.scroll-down{color:#fff; text-align:center; position:absolute; left:0; right:0; margin:0 auto; bottom:30px; display:inline-block; letter-spacing:2px; font-size:14px;}
.scroll-down .line{ position:relative; width:1px; height:30px;  display:block; margin:0 auto 15px;  overflow:hidden;}
.scroll-down .line span{position:absolute; width:100%; height:100%; left:0; top:0;background:#fff;  animation: heightAnimation 2s infinite;}
@keyframes heightAnimation {
  0% {
    top:-100%;
  }
  100% {
    top:100%;
  }
}


.main-visual{position:relative;width:100%; height:100vh;background:url('/images/main_visual.jpg') no-repeat center center / cover; display:flex; align-items:center;}
.main-visual .main-tit{margin-bottom:0; margin-top:100px;}
.main-visual .main-tit b{color:#0070e1;  }
.main-visual .btn-more{color:#fff;}
.main-data{position:relative; }
.main-data .cont-wr{z-index:2; position:relative;}
.main-data .bg span{ position:absolute; }
.main-data .bg{width:100%; position:absolute; left:0; top:0; height:100%; overflow:hidden; z-index:1;}
.main-data .bg span.big{width:670px; height:670px; border:1px solid #eeeeee; border-radius:100px;}
.main-data .bg span.big.left{left:0; bottom:-30%; transform:rotate(30deg);}
.main-data .bg span.big.right{right:0; top:-40%; transform:rotate(60deg);}
.main-data .bg span.min{width:60px; height:60px; background:#e5f0fa; border-radius:10px;}
.main-data .bg span.min.left{left:5%; top:40%; transform:rotate(20deg);}
.main-data .bg span.min.right{right:5%; top:30%;  border-radius:50px; width:80px; height:80px;}
.main-data .data-list{width:100%; max-width:1000px; margin-left:auto; display:flex; justify-content:space-between;}
.main-data .data-list > li{width:31%; border-radius:30px; padding:40px; background:#f4f4f4;}
.main-data .data-list > li p:first-child{color:#000; font-weight:600;}
.main-data .data-list > li .num{font-size:50px; color:#000; font-weight:700; letter-spacing:-0.05em; display:flex; align-items:center;   margin-bottom:20px;}
.main-data .data-list > li .num strong{font-size:16px; color:#0070e1; margin-left:10px; letter-spacing:-0.02em; }
.main-data .data-list > li .num small{font-size:12px; vertical-align:baseline; margin-right:5px;}
.main-data .data-list > li .img{height:154px; display:flex; justify-content:flex-end; align-items:flex-end;}
.main-data .data-list > li .img img{mix-blend-mode: multiply; max-height:100%;}
.main-mkt{position:relative; background:#000; color:#fff;}
.main-mkt .cont-wr{z-index:2; position:relative;}
.main-mkt .bg{width:100%; position:absolute; left:0; top:0; height:100%; overflow:hidden; z-index:1;}
.main-mkt .bg > span{ position:absolute; left:0; top:-20%; font-size:500px; color:#222; transform:rotate(90deg) ; font-weight:600; transform-origin: left; line-height: 1; margin:0 50px ;}
.main-mkt .bg > span.right{right:0; left:auto; top:-160%;transform-origin: right; transform: rotate(-90deg) ;}
.main-mkt .main-tit {color:#fff;}
.main-mkt .mkt-list{width:100%; max-width:1000px; margin-left:auto;}
.main-mkt .mkt-list > li{ display:flex; flex-wrap:wrap; font-size:18px; padding:40px 0 80px; border-top:1px solid #fff;}
.main-mkt .mkt-list > li:last-child{padding-bottom:0;}
.main-mkt .mkt-list > li .num{font-size:24px; font-weight:600; width:100px;  }
.main-mkt .mkt-list > li .tit{font-size:28px; font-weight:600; width:calc(50% - 100px); line-height:1.3; margin-bottom:10px;}
.main-mkt .mkt-list > li .txt{margin-top:5px; width:50%;}
.main-ptn .btn-more{float:right; margin-top:-50px;}
.landing-client{position: relative; overflow: hidden;}
.landing-client:before,
.landing-client:after {content: "";position: absolute;top: 0;bottom: 0;width: 380px;z-index: 2;}
.landing-client:before {left: 0;background: white;background: linear-gradient(90deg, white 0%, rgba(255, 255, 255, 0) 100%);}
.landing-client:after {right: 0;background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, white 100%);}
.landing-client> div {position: relative;display: flex;animation-duration: 40s;animation-iteration-count: infinite;animation-timing-function: linear; }
.landing-client> div img {height:100px;max-width:none;}
.landing-client> div:nth-child(1) {animation-name: move1;}
.landing-client> div:nth-child(2) {animation-name: move2; margin:30px 0;}
.landing-client> div:nth-child(3) {animation-name: move3;}

@keyframes move1 {
	0% {
		margin-left: 0;
	}
	100% {
		margin-left: -2886px;
	}
}

@keyframes move2 {
	0% {
		margin-left: -2761px;
	}
	100% {
		margin-left: 0;
	}
}

@keyframes move3 {
	0% {
		margin-left: 0;
	}
	100% {
		margin-left: -3006px;
	}
}





/* sub */
.sub-tit{margin-bottom:100px; color:#000;}
.sub-tit h2{color:#fff; font-size:60px; line-height:1.2; margin-bottom:70px; text-align: center;}
.sub-tit h3{ font-size:50px; line-height:1.2; margin-bottom:20px;  }
.sub-tit h3 strong{color:#0070e1;}

.mkt-banner{text-align:center; padding:84px 0; background:#0070e1; color:#fff;}
.mkt-banner p{font-size:36px; font-weight:600; }
.mkt-banner a{font-size:18px; display:inline-block; margin:30px auto 0;color:#fff; padding:13px 28px; font-weight:600; border:2px solid #fff; border-radius:6px; transition:all ease .3s;}
.mkt-banner a i{font-style:normal; margin-left:10px; transition:all ease .3s; display:inline-block;}
.mkt-banner a:hover{ background:#0168cf;}
.mkt-banner a:hover i{transform:translateX(5px);}


/* about */
.about .sub-tit .ani{opacity:0;}
.about .sub-tit .line{position: absolute;left: 0;top: 25px;background:#000; height:2px; width:54px;  display: block; }
.about .sec-different .sub-tit h3{position:relative; padding-left:80px;}
.about .about-tit { margin-top:170px; margin-bottom: 30px;position:relative; z-index:2;}
.about .about-tit h2{font-size:100px; color:#0070e1; line-height:1;}
.about .sec-vision{position:relative; min-height:calc(100vh - 200px);}
.about .sec-vision .line{background:#fff; height:2px; width:0;}
.about .sec-vision .sub-tit{color:#fff; margin-bottom: 50px;}
.about .vision-img{width:90%; max-width:1720px;height:100%; position:absolute; left:0;right:0; top:0; object-fit:cover; background:#000; overflow:hidden; z-index:-1;margin:0 auto; border-radius:40px; }
.about .vision-img img{opacity:.3; position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; }
.about .vision-txt{position:absolute; left:45%; color:#fff; top:180px; font-size:22px; padding-left:50px;}
.about .vision-txt::before{content:''; width:30px; height:1px; background:#fff; opacity:0.5;position:absolute; left: 0; top:12px;}
.about .vision-txt2{position:relative; left:45%; color:#fff; top:20px; font-size:30px; opacity:0; display:inline-block;    line-height: 2;}
.sec-vision .vision-txt2 p{position:relative;   padding-left:40px;    line-height: 1.5;   margin: 10px 0;}
.sec-vision .vision-txt2 p i{position:absolute; top:5px; left:0;}
.about .vision-txt2 strong{position:relative; /* padding:5px 15px; margin:5px 0; font-size:24px; z-index:1; white-space:nowrap; */color:#0070e1; display:inline;}
.about .sec-vision div,
.about .sec-vision span{  animation-fill-mode:forwards; animation-duration:.3s; animation-timing-function: linear;}
.vision-txt{ animation-delay:5s;  animation-name: fadeUp;}
.sec-vision .sub-tit .line{animation-delay:5s;  animation-name: fadeLine;}
.sec-vision .sub-tit .ani{animation-delay:6s;  animation-name: fadeTxt;}
.sec-vision .vision-txt2{animation-delay:7s;  animation-name: fadeTxt2;}
@keyframes fadeUp {
	0% {
		transform:translateY(0);
		opacity:1;
	}
	100% {
		transform:translateY(-20px);
		opacity:0;
	}
}
@keyframes fadeLine {
	0% {
	}
	100% {
		width:54px;
		margin-right:20px;
	}
}
@keyframes fadeTxt {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}
@keyframes fadeTxt2 {
	0% {
		opacity:0;
		transform:translateY(0);
	}
	100% {
		opacity:1;
		transform:translateY(-20px);
	}
}





.about .vision-txt2 strong:before{  width:100%; height:100%; position:absolute; left:0; top:0; border-radius:50px; background:#0070e1; z-index:-1;}
.about .dif-list{display:flex; justify-content:space-between; flex-wrap:wrap; }
.about .dif-list li{text-align:center; width:30%; }
.about .dif-list li p{font-size:20px; margin-top:30px; color:#000;}




/* smart 공통 */
.smart .d-flex{display:flex; justify-content:space-between;}



/* smart */
.smart-visual{position:relative;width:100%; height:100vh;  display:flex; align-items:center; color:#fff; overflow:hidden;; }
.smart-visual::before{content:''; position:absolute; left:0; top:0; z-index:-1; width:100%; height:101%;   background:url('/images/smart_visual.jpg') no-repeat center center / cover; animation-delay:.3s;  animation-duration:1s; animation-timing-function: linear;  animation-fill-mode:forwards; animation-name: bgAni; transform:scale(1.02);}
.smart-tit{margin-bottom:50px;}
.smart-tit h2{font-size:60px; font-weight:300; line-height:1.2;}
.smart-tit h3{font-size:40px; margin-bottom:40px; font-weight:400; line-height:1.3;}
.smart-tit h3 strong{font-weight:700; }
.smart-tit p{font-size:20px; margin-top:40px; }
.smart-tit p strong{font-size:24px; font-weight:600;  margin-bottom:20px;}
.smart-tit .t-under{position:relative; z-index:1; font-weight:700; }
.smart-tit .t-under::before{content:''; width:0; height:15px; background:#0070e1; position:absolute; left:0; bottom:0; z-index:-1; animation-duration:1s; animation-delay:.6s; animation-fill-mode:forwards;  animation-timing-function: linear;  animation-name: lineAni;}
@keyframes lineAni {
	0% {
		width:0;
	}
	100% {
		width:100%;
	}
}
@keyframes bgAni {
	0% {
		transform:scale(1.02);
	}
	100% {
		transform:scale(1);
	}
}

.smart-tit .t-dot {position:relative; font-weight:600; color:#0070e1; vertical-align:baseline;}
.smart-tit .t-dot::after{content:''; width:72px; height:6px; position:absolute; left:0; right:0; margin:0 auto; top:-3px;  background:url('/images/t_dot.png') no-repeat center center / contain;}
.smart-typo{background:#000; color:#fff;}
.smart-typo .cont-wr{ max-width: 920px;  margin: 0 auto; }
.smart-typo .typo-tit{font-size:60px;   }
.smart-typo .typo-tit p:nth-child(2){ margin-left:14%;}
.smart-typo .typo-tit span{font-size:110px; font-family: 'Cafe24Shiningstar', sans-serif; line-height:1; }
.smart-typo .typo-tit span.tit1{color:#0070e1;}
.smart-typo .typo-tit span.tit2{ position:relative; z-index:1; }
.smart-typo .typo-tit span.tit2::before{content:''; width:594px; height:113px; position:absolute; left:0; bottom:-70px; background:url('/images/tit_line.png') no-repeat center center / contain; z-index:-1;}
.smart-typo .typo-txt{padding-left:50px; position:relative; margin-top:100px;}
.smart-typo .typo-txt:before{content:''; width:30px; height:1px; background:#fff; opacity:0.5; position:absolute; left:0; top:15px;}
.smart-typo .typo-txt p:first-child{font-size:24px; margin-bottom:20px; font-weight:500;}
.smart-typo .typo-txt p{font-size:18px;}
.smart-keyword{background:#0070e1; color:#fff;}
.smart-keyword .key-box .img{border-radius:30px; overflow:hidden; }
.smart-keyword .key-box .img video{margin-left:-4px;   width:calc(100% + 4px);    max-width: none;  vertical-align: top;}
.smart-keyword .key-box .img img{margin-left:-4px;   width:calc(100% + 4px);    max-width: none;  vertical-align: top;}
.smart-keyword .d-flex > div{width:48%;}
.smart-keyword .d-flex{padding:30px 0 0}
.smart-keyword .d-flex li{width:50%; text-align:center;}
.smart-keyword .d-flex li + li{border-left:1px solid rgba(255,255,255,0.3);}
.smart-keyword .d-flex li p{font-size:20px;}
.smart-keyword .d-flex li p span{    vertical-align: top;}
.smart-keyword .d-flex li p sub{    font-size: .5em; vertical-align: baseline;margin-left: 5px;}
.smart-keyword .d-flex li p:nth-child(2){font-size:40px; font-weight:600;}
.smart-diff{background:#e5f0fa;}
.smart-diff h3{color:#000;}
.smart-diff .d-flex{flex-wrap:wrap;}
.smart-diff .d-flex li{position:relative; width:32%; padding:40px 40px 80px 40px; border-radius:20px; box-shadow:3px 3px 20px rgba(0,0,0,0.1); background:#fff;}
.smart-diff .d-flex p{font-size:22px; color:#000; margin-bottom:20px; font-weight:700;}
.smart-diff .d-flex p span{font-size:16px; color:#999; margin-right:20px;font-weight:400;}
.smart-diff .d-flex li img{position:absolute; right:40px; bottom:40px; }
.smart-diff .d-flex li:first-child img{max-width: 200px; margin-bottom: 20px;}
.smart-mkt {color:#000;}
.smart-case li{position:relative;padding:70px 50% 300px 70px; background:#15c999; color:#fff; border-radius:30px;}
.smart-case li + li{margin-top:30px;}
.smart-case li:nth-child(2){background:#4f8ecf;}
.smart-case li p strong{font-size:18px; opacity:.7; font-weight:400;}
.smart-case li .case-tit{font-size:30px; font-weight:700; margin-top:30px;}
.smart-case li img{position:absolute; max-width:50%; right:60px; top:20%; z-index:-1;}
.smart-refer{position:relative; background:#000; color:#fff; text-align:center;}
.smart-refer .sub-tit{color:#fff; margin-bottom:40px;}
.smart-refer .sub-tit p{font-size:20px;}
.smart-refer .tab-menu {  display:flex; justify-content:center;}
.smart-refer .tab-menu li{ margin:0 6px; }
.smart-refer .tab-menu li a{display:block; font-size:18px; width:140px; padding:10px; border-radius:50px; border:2px solid #fff; color:#fff; font-weight:600; text-align:center; cursor:pointer;}
.smart-refer .tab-menu li a.active{background:#0070e1; border-color:#0070e1;}
.smart-refer .tab{opacity: 0;visibility: hidden;height: 0;overflow: hidden;}
.smart-refer .tab.active{opacity: 1;visibility: visible;height: auto;}
.refer-slider {position:relative; z-index:1; margin :80px 0;}
.refer-slider .swiper-container{position:relative; z-index:1; padding-top:20px;}
.refer-slider .swiper-slide{opacity:.5; padding-top:15px; transition:transform ease .3s; background:#fff; border-radius:20px; overflow:hidden;}
.refer-slider .swiper-slide-active{opacity:1; transform:translateY(-20px);}
.refer-slider::after {
    content: "";
    display: block;
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    width: 15%;
    z-index: 1;
    background: url('/images/phone.png') no-repeat center center / contain;
}
.refer-slider::before {
    /*content: "";*/
    display: inline-block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 8%;
    height: 5%;
    z-index: 3;
    background: url('/images/frame_top.png') no-repeat top center / contain;
}
.refer-slider .swiper-button-prev{left:calc(50% - 600px);}
.refer-slider .swiper-button-next{right:calc(50% - 600px);}
.refer-slider .swiper-button-prev,
.refer-slider .swiper-button-next{width:70px; height:70px; background:#0070e1; color:#fff; border-radius:50%; }
.refer-slider .swiper-button-next:after,
.refer-slider .swiper-button-prev:after{font-size:22px; font-weight:600;}


.marquee {
  position: absolute;
  bottom:0;
  width: 100vw;
  max-width: 100%;
  height: 220px;
  overflow: hidden;
  font-size:240px;
  font-weight:700;
  font-style:italic;
  opacity:.1;
}

.track {
  position: absolute;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 100s linear infinite;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}




/* cafe */
.cafe-visual{position:relative;width:100%; height:100vh;  display:flex; align-items:center; color:#fff; overflow:hidden; }
.cafe-visual::before{content:''; position:absolute; left:0; top:0; z-index:-1; width:100%; height:101%; background:url('/images/cafe_visual.jpg') no-repeat center center / cover; animation-delay:.3s;  animation-duration:1s; animation-timing-function: linear;  animation-fill-mode:forwards; animation-name: bgAni; transform:scale(1.02);}
.cafe-tit h2{font-size:60px;  line-height:1.2; margin-bottom:30px;}
.cafe-tit h3{font-size:40px; margin-bottom:40px; font-weight:400; line-height:1.3;}
.cafe-tit h3 strong{font-weight:700}
.cafe-tit p{font-size:18px; margin-top:40px; }
.cafe-tit p strong{font-size:22px; font-weight:600;  margin-top:10px;}
.cafe-tit .t-under{position:relative; z-index:1; font-weight:700; }
.cafe-tit .t-under::before{content:''; width:0; height:15px; background:#0070e1; position:absolute; left:0; bottom:0; z-index:-1; animation-duration:1s;animation-delay:.6s; animation-fill-mode:forwards;   animation-timing-function: linear;  animation-name: lineAni;}
.cafe-typo{background:#000; color:#fff;}
.cafe-typo .cont-wr{ text-align:center;}
.cafe-typo .typo-tit{font-size:60px;   }
.cafe-typo .typo-tit span{font-size:110px; font-family: 'Cafe24Shiningstar', sans-serif; line-height:1; }
.cafe-typo .typo-tit span.tit1{ position:relative; z-index:1; padding-bottom:30px; white-space: nowrap;}
.cafe-typo .typo-tit span.tit1::before{content:''; width:200px; height:57px; position:absolute; left:50%; margin-left:-110px; bottom:20px; background:url('/images/tit_line2.png') no-repeat center center / contain; z-index:-1;}
.cafe-typo .typo-txt{ margin-top:40px;}
.cafe-typo .typo-txt p:first-child{font-size:40px; margin :0 0 40px;   font-weight:500; text-decoration: underline;display:inline-block; }
.cafe-typo .typo-txt p:last-child strong{font-size:40px; margin :20px 0 0;   font-weight:500; color:#fff; display:inline-block; text-decoration:none}
.cafe-typo .typo-txt p{font-size:18px;}
.cafe-typo .typo-txt strong{color:#0070e1; text-decoration: underline;}
.cafe-typo .typo-dot{font-size:30px; margin-bottom:30px;}
.cafe-typo .typo-dot strong{position:relative;font-size:50px; font-family: 'Cafe24Shiningstar', sans-serif; font-weight:300; letter-spacing:0.15em; padding-left:10px;}
.cafe-typo .typo-dot strong::after{content:''; width:72px; height:6px; position:absolute; left:0; right:0; margin:0 auto; top:0;  background:url('/images/t_dot.png') no-repeat center center / contain;}
.cafe-mkt {background:#e5f0fa; color:#000; }
.cafe-case li{position:relative;padding:90px 70px ; text-align:center; background:#fff; box-shadow:3px 3px 20px rgba(0,0,0,0.1); border-radius:30px;}
.cafe-case li + li{margin-top:30px;}
.cafe-case li p{font-size:18px;}
.cafe-case li .case-tit{font-size:30px; font-weight:700; margin :50px 0 30px;}
.cafe-case li .case-tit strong{color:#0070e1;}
.cafe-review {background:#fff; color:#000; text-align:center;}
.cafe-review .cont-wr{max-width:1320px;}
.review-slider{padding:0 60px; position: relative;}
.review-slider .swiper-container{background:#000; border-radius:30px; padding:20px;}
.review-slider .swiper-slide{border-radius:30px; overflow:hidden;}
.review-slider .swiper-button-prev{left:0;}
.review-slider .swiper-button-next{right:0;}
.review-slider .swiper-button-prev,
.review-slider .swiper-button-next{  color:#000; }
.review-slider .swiper-slide img{
	vertical-align: top;
}




/* portfolio */
.portfolio{margin-top:100px;}
.portfolio .sub-tit h2{color:#000;}
.certification-tab{display:flex; flex-wrap:wrap; margin-bottom: 50px; justify-content:center;}
.certification-tab span{margin: 0 6px 12px;}
.certification-tab span a{display:block; font-size:18px; width:140px; padding:10px; border-radius:50px; border:1px solid #ddd;  color: #000; font-weight:600; text-align:center; cursor:pointer;}
.certification-tab span.active a{background:#0070e1; border-color:#0070e1; }
.certification-tab span.active a{color: #fff;}


.portfolio .port-top{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; margin-bottom:40px;}
.portfolio .port-top .total strong{color:#000;}
.portfolio .port-top .port-search {position:relative;width:100%; max-width:300px;  }
.portfolio .port-top .port-search input{width:100%;  height:60px; line-height:60px; padding:0 20px; border-radius:60px; background:#f4f4f4; border:0; font-size:18px;}
.portfolio .port-top .port-search .btn-search{width:40px; height:40px; border:0; background:#0070e1; color:#fff; display:flex; justify-content:center; align-items:center; border-radius:40px; position:absolute; right:10px; top:10px; font-size:20px;}
.portfolio .port-list ul{display:flex; flex-wrap:wrap;}
.portfolio .port-list ul li{width:30.666%; margin-right:4%;  margin-bottom:2%; }
.portfolio .port-list ul li:nth-child(3n){margin-right:0;}
.portfolio .port-list ul li .img-box{ position:relative; width:100%; height:0; padding-bottom:166%; cursor:pointer;}
.portfolio .port-list ul li .img-box > img{position:absolute; left:0; top:0; object-fit:cover; width:100%; height:100%; border-radius:10px;     border: 1px solid #ddd;}
.portfolio .port-list ul li p{position:relative; padding-right:30px;font-size:22px; color:#000; margin:20px 0; font-weight:600;}
.portfolio .port-list ul li p i{font-style:normal; position:absolute; right:0; top:0;}
.portfolio .popUp {position:fixed;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5);display:flex;opacity:0;visibility:hidden;top:0;left:0;z-index:99;}
/* .portfolio .popUp-inner {  width:70%;  height:70%; margin:auto;display: flex;align-items: center;justify-content: center;} */
.portfolio .popUp-inner { max-width:70%;  max-height:70%; margin:auto;display: flex;justify-content: center;}
.portfolio .popUp-inner img{border-radius:10px;}
.portfolio .popup-slide{  position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); z-index:2; text-align: center;}
.portfolio .popup-slide .swiper-container{width:95vw; max-width:600px; overflow:hidden;}
.portfolio .popup-slide .swiper-button-next, .popup-slide .swiper-button-prev{color:#fff; z-index:10;}
.portfolio .control {position:absolute;top:50%;transform:translatey(-50%);color:#fff;font-size: 50px;cursor:pointer;}
.portfolio .prev {left:50px}
.portfolio .next {right:50px;}
.portfolio .close {position:fixed; color:#fff; font-size: 50px;right:40px;top:20px;cursor:pointer;}
.portfolio .show {opacity:1;visibility:visible;}
.portfolio .hide {display:none;}
.portfolio .paging{text-align:center; display:flex; justify-content:center; align-items:center; margin:30px 0 0;}
.portfolio .paging a{display:inline-block;  border-radius:50%; padding:10px;}
.portfolio .paging a.prev,
.portfolio .paging a.next{background:#eee;  width:40px; height:40px; padding:0; display:flex; align-items:center;  justify-content:center; margin:0 10px; }
.portfolio .paging a i{ color:#000;font-weight:600;}
.portfolio .paging a.on{ color:#000;font-weight:600;}



/* contact */
.contact{background:#f4f4f4; margin-top:100px;}
.contact .sub-tit h2{color:#000;}
.contact-cont{background:#fff; border-radius:10px; padding:80px;     box-shadow: 3px 3px 20px rgba(0,0,0,0.05);}
.contact-cont h3{font-size:24px; border-bottom:2px solid #000; color:#000; padding-bottom:20px;}
.contact-cont > ul{padding:20px 0; display:flex; flex-wrap:wrap; justify-content:space-between;}
.contact-cont > ul > li{width:48%;}
.contact-cont > ul > li p{font-size:20px; color:#000; margin:30px 0 15px; font-weight:600;}
.contact-cont > ul > li input{height:60px;  line-height:60px; padding:0 20px; border:0; font-size:18px; background:#f8f8f8; border-radius:4px; width:100%; color:#000;}
.contact-cont > ul > li input::placeholder{color:#aaa;}
.contact-cont > ul > li select{height:60px;  line-height:60px; padding:0 20px;border:0; font-size:18px; background:url('/images/ico_select.png') no-repeat #f8f8f8 center right 20px; border-radius:4px; width:100%;}
.contact-cont .btn-group { display: flex; justify-content: center; align-items: center; gap: 40px; margin:40px auto 0;}
.contact-cont .btn-group button {display:block; border:0; background:#000; color:#fff; padding:20px 0; width:100%; max-width:250px; text-align:center; font-size:20px; font-weight:600; border-radius:6px;}
.contact-cont .btn-group button.accent { background: #0070e1;}

/* privacy */
.privacy{margin-top:100px;}
.privacy .sub-tit h2{color:#000;}
.privacy .privacy-cont > div{border-bottom:1px solid #eee; padding:50px 0; color:#000;}
.privacy .privacy-cont > div:first-child{padding-top:0;}
.privacy .privacy-cont > div:last-child{border-bottom:0; padding-bottom:0;}
.privacy .privacy-cont h3{font-size:20px; color:#000; margin-bottom:10px;}
.privacy .privacy-cont ul{margin:20px 0;}
.privacy .privacy-cont ul li{margin:5px 0; padding-left: 17px; text-indent: -17px;}





/* css setting end */

/* media size setting start */

@media screen and (max-width:1000px){
	.mo-br{display:block !important;}
	.pc-br{display:none !important;}
	.mo-block{display:block; height:15px;}

	/* layout */
	html{font-size:14px;}
	.mo-open{display:block;}
	.mo-close{display:block; position:absolute; right:10px; top:10px;}
	.sec-header{height:60px;}
	.sec-header .logo a{font-size:20px;}
	.sec-header .nav{width:100%; height:100%; position:fixed; z-index:9; right:-100%; top:0; background:#fff; transition: all ease .5s;  padding:100px 20px;}
	.sec-header .nav.open{right:0;}
	.sec-header .nav a{color:#000;}
	.sec-header .nav > ul{display:block;   border-top:1px solid #e8e8e8;}
	.sec-header .nav > ul > li{margin-left:0; border-bottom:1px solid #e8e8e8;}
	.sec-header .nav > ul > li > a{display:block; padding:15px 10px ; font-size:24px; font-weight:600;  }
	.sec-header .nav > ul > li > a i{   margin-left: 5px;width: 24px;height: 24px;background: #0070e1;color: #fff;border-radius: 50%;display: inline-flex;align-items: center;justify-content: center;font-size: 12px;font-weight: 600;vertical-align: text-bottom;   display:none;}
	.sec-footer {padding:30px 0; font-size:14px;}
	.sec-footer .ft-logo{font-size:20px; float:none; margin:0 0 20px; display:inline-block;}
	.sec-footer .ft-cont{width:100%;}
	.sec-footer .ft-cont p span:last-child{margin-left:0; padding-left:0; border-left:0; display:block; margin-top:5px;}
	.sec-footer .ft-cont p.copy{margin-top:30px; font-size:12px;}


	/* main */
	.main-tit{ margin-bottom:50px;}
	.main-tit h2{font-size:36px; margin-bottom:30px;}
	.main-tit h3{font-size:26px;}
	.main-visual .main-tit{margin-top:50px;}
	.main-tit p{font-size:15px;}
	.main-tit p br{display:none;}
	.btn-more{font-size:16px;}
	.btn-more i{width:24px; height:24px; font-size:15px; margin-left:5px; line-height:28px;}
	.main-data .data-list{flex-wrap:wrap;}
	.main-data .data-list > li{width:100%; margin-bottom:4%; padding:40px 30px;}
	.main-data .data-list > li .num{font-size:36px; margin-bottom:10px;}
	.main-data .data-list > li .img{height:80px; padding-left:50%; margin-top:-40px; margin-bottom:-10px;}
	.main-data .data-list > li .num strong{font-size:13px;}
	.main-data .data-list > li .num small{font-size:10px;}
	.main-data .bg span.min{width:30px; height:30px;}
	.main-data .bg span.min.left{display:none;top:3%;}
	.main-data .bg span.min.right{display:none;top:auto; bottom:-2%;}
	.main-data .bg span.big{width:300px; height:300px; border-radius: 50px;}
	.main-data .bg span.big.right{top:0;}
	.main-data .bg span.big.left{bottom:0;}
	.main-mkt .mkt-list > li{position:relative; padding: 30px 0 40px;}
	.main-mkt .mkt-list > li .num{width:50px; font-size: 18px; position: absolute; top:28px; left:0;}
	.main-mkt .mkt-list > li .tit{width:100%; padding-left:50px; font-size: 22px;}
	.main-mkt .mkt-list > li .txt{width:100%;padding-left:50px;  font-size: 15px;}
	.main-mkt .bg {display:none;}
	.main-ptn .btn-more{float:none; margin-top:20px;}
	.landing-client> div img{height:60px;}
	.landing-client:before,
	.landing-client:after {width: 100px;}
	.landing-client> div:nth-child(2){margin:  0;}



	/* sub */
	.privacy,
	.contact,
	.portfolio{margin-top:60px;}
	.inner {  padding: 70px 0; }
	.sub-tit{ margin-bottom:30px;}
	.sub-tit h2{font-size:36px; margin-bottom: 30px; }
	.sub-tit h3{font-size:28px;}



	.about .about-tit{margin-top: 100px;  }
	.about .about-tit h2{font-size:50px; padding-left:5%;}
	.about .sec-vision{    min-height: calc(100vh - 100px);}
	.about .sec-vision .sub-tit{ padding-left:5%; margin-bottom: 30px;}
	.about .sec-vision .sub-tit h3{  line-height: 1.4;}
	.about .sub-tit .ani{display:block;}
	.about .vision-txt{left:10%; top:130px;width: calc(90% - 50px); font-size:16px;  }
	.about .vision-txt2{left:5%;width:90%; top:0; font-size:20px;}
	.sec-vision .vision-txt2 p{padding-left:26px;}
	.sec-vision .vision-txt2 p i{top:5px;}
	.about .vision-img{border-radius:20px;}
	.about .sec-vision .line{display:none;}
	.about .sec-different .sub-tit h3{ position:relative;padding-left:40px;}
	.about .sub-tit .line{width: 30px  ; position:absolute; left:0; top:14px; margin-top:0;}
	.about .dif-list li{width:100%; }
	.about .dif-list li + li{margin-top:6%;}
	.about .dif-list li img{max-width:70%;}
	.about .dif-list li p{margin-top: 10px; font-size: 18px;}


	.smart-tit{margin-bottom:30px;}
	.smart-tit h2{font-size:38px; }
	.smart-tit h3{font-size:20px; margin-bottom:20px;  }
	.smart-tit h3 strong{display:inline;}
	.smart-tit p{font-size:15px; margin-top:20px; }
	.smart-tit p strong{font-size:18px; }
	.smart-visual::before{background-position: center right 40%;}
	.smart-typo .cont-wr{ max-width:500px; }
	.smart-typo .typo-tit{font-size:20px;   }
	.smart-typo .typo-tit span{font-size:40px;  }
	.smart-typo .typo-tit span.tit2::before{  width:100%; }
	.smart-typo .typo-txt{  margin-top:50px;}
	.smart-typo .typo-txt p:first-child{font-size:18px; }
	.smart-typo .typo-txt p{font-size:14px;}
	.smart-keyword .d-flex{flex-wrap:wrap;}
	.smart-keyword .d-flex > div{width:100%; }
	.smart-keyword .d-flex > div + div{margin-top:30px;}
	.smart-keyword .d-flex li p{font-size:14px;}
	.smart-keyword .d-flex li p:nth-child(2){font-size:30px;}
	.smart-keyword .d-flex {padding:10px 0 0}
	.smart-keyword .d-flex li{margin-top:20px;}
	.smart-keyword .d-flex li:nth-child(3){border-left:0;}
	.smart-keyword .key-box .img{border-radius:15px;}
	.smart-diff .d-flex li{width:100%; margin-bottom:4%;     padding: 30px 30px 40px 30px;}
	.smart-diff .d-flex li img{right:20px; bottom:20px; max-width:60px; }
	.smart-diff .d-flex li:first-child img{ margin-bottom:0; max-width:120px;}
	.smart-diff .d-flex p{font-size:18px; margin-bottom: 10px;}
	.smart-diff .d-flex p span{font-size:14px;}
	.smart-case li{  padding:30px;}
	.smart-case li + li{margin-top:4%;}
	.smart-case li .case-tit{font-size:18px; margin-top: 15px;}
	.smart-case li p strong{font-size:14px;}
	.smart-case li img{position:relative; right:auto; top:auto; max-width:100%;         margin-left: auto; display: block;}
	.smart-refer .sub-tit{margin-bottom:30px}
	.smart-refer .sub-tit p{font-size:15px;}
	.smart-refer .tab-menu li{margin:0 3px}
	.smart-refer .tab-menu li a{font-size:14px;  padding:7px 0; width:80px;}
	.refer-slider::after{top:-12px;width:60%;}
	.refer-slider::before{width:20%;}
	.refer-slider{margin:60px 0;}
	.refer-slider .swiper-button-prev, .refer-slider .swiper-button-next{width:40px; height:40px;}
	.refer-slider .swiper-button-next:after, .refer-slider .swiper-button-prev:after{font-size:16px;}
	.refer-slider .swiper-button-next{right:10px;}
	.refer-slider .swiper-button-prev{left:10px;}
	.refer-slider .swiper-slide{padding-top: 3.7vw; }
	.marquee{font-size:120px; height:120px;}
	.mkt-banner{padding:40px 0; }
	.mkt-banner p{font-size:22px;}
	.mkt-banner p br{display:none;}
	.mkt-banner a{font-size:14px; padding: 10px 20px; margin-top: 20px;}


	.cafe-visual::before{background-position: center right 40%;}
	.cafe-tit h2{font-size:40px;   margin-bottom:20px;}
	.cafe-tit h3{font-size:24px; margin-bottom:20px; }
	.cafe-tit p{font-size:16px; margin-top:30px; }
	.cafe-tit p strong{font-size:18px; }
	.cafe-typo .typo-tit{font-size:30px;   }
	.cafe-typo .typo-tit span{font-size:50px; }
	.cafe-typo .typo-tit span.tit1{ padding-bottom:0;}
	.cafe-typo .typo-tit span.tit1::before{ width:100px;  bottom: -20px; margin-left: -60px;}
	.cafe-typo .typo-txt{ margin-top:20px;}
	.cafe-typo .typo-txt p:first-child{font-size:20px; margin :0 0 20px;  }
	.cafe-typo .typo-txt p:last-child strong{font-size: 20px;}
	.cafe-typo .typo-txt p{font-size:16px;}
	.cafe-typo .typo-dot{font-size:20px; margin-bottom:15px;}
	.cafe-typo .typo-dot strong{ font-size:30px;  }
	.cafe-typo .typo-dot strong::after{width:45px;}
	.cafe-case li{padding:40px 20px;}
	.cafe-case li + li{margin-top:4%;}
	.cafe-case li .case-tit{font-size:18px; margin: 20px 0 15px;}
	.cafe-case li .case-tit br{display:none;}
	.cafe-case li p{font-size:14px;}
	.smart-tit .t-dot::after{width:45px;}
	.review-slider{padding:0 20px;}
	.review-slider .swiper-container{  border-radius:20px;padding:0; }
	.swiper-button-next:after, .swiper-button-prev:after{font-size:20px;}
	.review-slider .swiper-button-next{right:-10px;}
	.review-slider .swiper-button-prev{left:-10px;}
	.review-slider .swiper-slide{border-radius:10px;}




	.certification-tab span,
	.certification-tab span + span{margin:3px 3px 6px; }
	.certification-tab span a{font-size:14px;  padding:7px 0; width:100px;}
	.portfolio .port-top .port-search{margin-top:20px;     max-width: 100%;}
	.portfolio .port-top .port-search input{height:50px; line-height:50px; font-size:16px;}
	.portfolio .port-top .port-search .btn-search{width:30px; height:30px; font-size:18px;}
	.portfolio .port-list ul li{width:100%; margin-right:0; margin-bottom:30px;}
	.portfolio .port-list ul li p{font-size:18px;     margin: 10px 0;}
	.portfolio .prev{left:10px;font-size:30px;}
	.portfolio .next{right:10px;font-size:30px;}
	.portfolio .close{right:20px; font-size:30px;}

	.portfolio .paging{    margin:10px 0 0;}
	.portfolio .paging a{padding:7px; font-size:12px;}
	.portfolio .paging a.prev, .portfolio .paging a.next{width:30px; height:30px;}

	.contact-cont{padding:40px 20px; border-radius:10px;}
	.contact-cont h3{font-size:16px;}
	.contact-cont > ul > li{width:100%;}
	.contact-cont > ul > li select,
	.contact-cont > ul > li input{height:50px; line-height:50px; font-size:16px;}
	.contact-cont > ul > li p{font-size:17px;     margin: 20px 0 10px;}
	.contact-cont > ul{padding:10px 0;}
	.contact-cont .btn-send{font-size:16px; padding:15px 0; max-width:100%;}




	.privacy .privacy-cont h3{font-size:18px;}
	.privacy .privacy-cont > div{padding:30px 0;}


	/* aos */
	.wrap [data-aos][data-aos][data-aos-delay="200"].aos-animate,
	body[data-aos-delay="200"] [data-aos].aos-animate,
	.wrap [data-aos][data-aos][data-aos-delay="400"].aos-animate,
	body[data-aos-delay="400"] [data-aos].aos-animate{
		transition-delay:0s !important;
	}
}

@media screen and (max-width: 767px) {
  .contact-cont .btn-group { gap: 10px 20px; flex-wrap: wrap;}
  .contact-cont .btn-group button { padding: 15px 5px; font-size: 14px; }
}



@media screen and (max-width:360px){
	.smart-tit h3{font-size: 18px;}
}

/* media size setting end */