@charset "euc-kr";

/* ±âº» ·¹À̾ƿô */
/* body {background-color: #F8F9FA;} */
body {word-break: keep-all;}
/* .wrap {overflow: hidden;} */
.layout {max-width: 1280px; margin: 0 auto; padding: 0 15px;}

@media (min-width: 1280px) {
    .layout {padding: 0;}
}


/* »ó´ÜÇì´õ */
.header {position: fixed; top: 0; left: 0; width: 100%; height: 90px; overflow: hidden; transition: all 0.5s; z-index: 9999;}
/* .header::after {content: ""; position: absolute; top: 90px; left: 0; width: 100%; height: 1px; background: #ddd;} */
.header.on {position: fixed; top: 0; background: #333;}
.header .header-inner {position: relative; text-align: center; display: flex; justify-content: space-between; align-items: center;}
.header .header-logo {padding-left: 40px;}
.header .header-logo a{display: block;}
.header .header-logo a img{width: 100%;}
#logo-white {display: block;}
#logo-black {display: none;}

.header .header-gnb {position: relative; z-index: 1; display: none;}
.header .header-gnb .gnb-depth-1 > .depth-1 {vertical-align: top; float: left; margin-left: 30px;}
.header .header-gnb .gnb-depth-1 .depth-1-1 {margin-left: 0px;}
/* .header .header-gnb .gnb-depth-1:last-child {margin-left: 30px;} */
.header .header-gnb .gnb-depth-1 > .depth-1 > a {display: block; line-height: 90px; color: #444; font-size: 18px; position: relative; text-align: center; font-weight: 600;}
.header .header-gnb .gnb-depth-1 > .depth-1 > a:after {
    position: absolute; left: 50%; right: 50%; height: 2px; bottom: 20px; content: ''; background-color: #fff; transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); transform: translate3d(0, 0, 0); opacity: 0;
}
.header .header-gnb .gnb-depth-1 > .depth-1 > a.on:after {background-color: #fff;}

.header .header-gnb .gnb-depth-1 > .depth-1 > a:hover::after {left: 12px; right: 12px; opacity: 1;}
.header .header-gnb .gnb-depth-1 > .depth-1 > a span {font-weight: normal; font-size: 1.7rem; color: #fff;}
.header .header-gnb .gnb-depth-1 > .depth-1 > a span.on {color: #fff;}

.contact-btn {display: none;}
.contact-btn button {padding: 12px 50px; border-radius: 30px; transition: all 0.3s; border: 1px solid #f4f4f4; color: #fff ; font-size: 1.8rem; font-weight: 500;}
/* .contact-btn button.on {border: 1px solid #787878; color: #191919;} */
.contact-btn button:hover {background-color: #191919; border: 1px solid #191919; color: #fff;}

.contact-btn button.on {border: 1px solid #f4f4f4; color: #fff}
.contact-btn button.on:hover {background-color: #fff; border: 1px solid #fff; color: #191919 !important;}

/* ¸ð¹ÙÀÏ ¸Þ´º */
.header .mobile-gnb {display: none;}
.header .mobile-gnb .sidebar-btn {position: relative; width: 65px; height: 65px; z-index: 1; cursor: pointer; background-color: transparent;}
.header .mobile-gnb .sidebar-btn span {display: block; position: absolute; left: 20px; width: 24px; height: 2px; background-color: #fff;}

.header .sub-mobile-gnb .sidebar-btn span {display: block; position: absolute; left: 20px; width: 24px; height: 2px; background-color: #000;}

.header .mobile-gnb .sidebar-btn span.on {background-color: #fff;}
.header .mobile-gnb .sidebar-btn span:nth-child(1) {top: 22px;}
.header .mobile-gnb .sidebar-btn span:nth-child(2) {top: 32px; transition: opacity 0s 0.15s;}
.header .mobile-gnb .sidebar-btn span:nth-child(3) {top: 42px;}
.header .mobile-gnb .sidebar-btn span:nth-child(1),
.header .mobile-gnb .sidebar-btn span:nth-child(3) {transition: top 0.15s 0.15s, transform 0.15s, width 0.15s, left 0.15s;}
.header .mobile-gnb.open .sidebar-btn span:nth-child(2) {opacity: 0; transition: opacity 0.15s;}
.header .mobile-gnb.open .sidebar-btn span:nth-child(1),
.header .mobile-gnb.open .sidebar-btn span:nth-child(3) {top: 32px; width: 30px; transition: top 0.15s, transform 0.15s 0.15s, width 0.15s 0.15s, left 0.15s 0.15s;}
.header .mobile-gnb.open .sidebar-btn span:nth-child(1) {left: 18px; transform: rotate(45deg);}
.header .mobile-gnb.open .sidebar-btn span:nth-child(3) {left: 18px; transform: rotate(-45deg);}

.header .mobile-gnb .sidebar-wrap {
    position: fixed; width: 100%; height: 100%; top: 80px; left: 0; background-color: rgba(0,0,0,0.6); transition: all 0.5s; visibility: hidden; opacity: 0;
}
.header .mobile-gnb.open .sidebar-wrap {visibility: visible; opacity: 1;}
.header .mobile-gnb .sidebar-wrap .sidebar {position: absolute;
    top: 0; right: 0; width: 100%; max-width: 375px; height: calc(100vh - 65px); background-color: #fff; transform: translateX(100%); transition: all 0.5s;
}
.header .mobile-gnb.open .sidebar-wrap .sidebar {transform: translateX(0);}
.header .mobile-gnb .gnb-depth-1 {height: 100%; overflow-y: auto;}


.header .mobile-gnb .gnb-depth-1 .depth-1 {position: relative; transition: all .2s ease-in-out;}
.header .mobile-gnb .gnb-depth-1 .depth-1:hover {background-color: #C8214F;}
.header .mobile-gnb .gnb-depth-1 .depth-1:hover span {color: #fff;}

.header .mobile-gnb .gnb-depth-1 .depth-1 span {color: #3D5469;}
/* .header .mobile-gnb .gnb-depth-1 .depth-1:first-child > a {border-top: 1px solid #e9e9e9;} */
.header .mobile-gnb .gnb-depth-1 .depth-1 > a {display: flex; align-items: center; position: relative; padding: 0 60px 0 25px; height: 60px; font-size: 17px; font-weight: 500; border-bottom: 1px solid #e9e9e9;}
.header .mobile-gnb .gnb-depth-1 .depth-1 > a > span {position: relative; display: block; line-height: normal; transition: all .3s; color: #3D5469;}
.header .mobile-gnb .gnb-depth-1 .depth-1 > a > span::before {
    content: ""; display: block; position: absolute; left: -2px; bottom: 0; width: 0; height: 9; transition: all 0.5s; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); z-index: -1; background-color: #D0C09E;
}
.header .mobile-gnb .gnb-depth-1 .depth-1.current > a > span::before {
    content: ""; display: block; width: calc(100% + 4px);
}

/* ¸ð¹ÙÀÏ ¸Þ´º ³¡ */
@media (max-width: 900px) {
  .header .mobile-gnb {display: block;}
}
@media (max-width: 1024px) {
  .header .header-gnb {display: none;}
}
@media (max-width: 1280px) {
  /* body {margin-top: 65px;;} */
  .header {position: fixed; width: 100%; height: 90px;}
  .header .header-logo {top: 12px; padding-left: 20px;}
  /* .header .header-logo a {padding: 0 0 0 15px;} */
  .header .header-logo img {width: 200px;}
  
  .header::after {content: none;}
  /* .contact-btn {display: none;} */
  .header .mobile-gnb .sidebar-wrap {top: 65px;}
}
@media (max-width:500px) {
    html.not-scroll .header .header-logo {opacity: 1;}
    .header .mobile-gnb .sidebar-wrap .sidebar {max-width: 100%;}
}

@media (max-width: 1240px) {
    .header .header-logo {padding: 0}
}
@media (min-width: 901px) {
.header .header-gnb {display: block;}
.header .header-inner {padding: 0 20px;}
  .header .header-logo {padding-left: 0px;}
}

@media (min-width: 1080px) {
  .contact-btn {display: block;}
}

@media (min-width: 1240px) {
    #logo-white {display: block;}
    #logo-black {display: none;}
    .header .header-gnb .gnb-depth-1 > .depth-1 {margin-left: 50px;}
}

/* »ó´ÜÇì´õ ³¡ */

.aside {position: fixed; z-index: 9999; bottom: 80px; right: 10px;}
.aside ul {display: flex; flex-direction: column; gap: 10px;}
.aside ul li {width: 50px; height: 50px; border-radius: 15px; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 4px; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; cursor: pointer;}
.aside ul .call {background-color: #2AA996;}
.aside ul .contact {background-color: #C8214F; }
.aside ul .topbutton {background-color: #333333;}
.aside ul li p {font-size: 1.4rem; color: #fff; display: none;}

@media (min-width: 768px) {
  .aside ul .call {display: none;}
}
@media (min-width: 1200px) {
  .aside {bottom: 50px; right: 50px;}
  .aside ul li {width: 65px; height: 65px;}
  .aside ul li p {display: block;}
}

/* section01(main-slide) css */
/* ¸ÞÀÎ ¹è³Ê ½½¶óÀÌ´õ */
.main-slide {background-color: #F1F3F8; padding-bottom: 80px;}

.main-slide .txt-box {
	position: absolute;
	left: 50%;
	top: 55%;
	box-sizing: border-box;
	width: 100%;
	padding: 0 2.0rem;
	transform: translate(-50%, -60%);
	z-index: 10;
}
.main-slide .txt-box > h3 {
	color: #fff;
	font-size: clamp(1.8rem,7.6vw,5.2rem);
	font-weight: 700;
	line-height: 1.3;
	word-break: keep-all;
	transform: translateY(20px);
	opacity: 0;
	transition: 1s 0.2s;
}
.main-slide .txt-box > p {
	color: #fff;
	margin-top: 1.6em;
	font-size: clamp(1.4rem, calc(2.1vw + 12.44px), 2rem);
	transform: translateY(20px);
	opacity: 0;
	word-break: keep-all;
	transition: 1s 0.4s;
}
.main-slide .swiper-slide-active .txt-box > h3,
.main-slide .swiper-slide-active .txt-box > p {
	transform: translateY(0);
	opacity: 1;
}

.main-slide .img-box {
  display: block;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}
.main-slide img {
	transform: scale(1.05);
	transition: 1.5s 0.1s;
}
.main-slide .swiper-slide-active img {
	transform: scale(1.0);
}
.main-slide .all-box {
	position: absolute;
	display: inline-flex;
	width: 90%;
	height: 50px;
	left: 50%;
	bottom: 15%;
	box-sizing: border-box;
	padding: 0 20px;
	transform: translate(-50%, -50%);
	z-index: 20;
}
.main-slide .progress-box {
	position: relative;
	width: 170px;
	height: 50px;
	z-index: 11;
}
.autoplay-progress {
	position: absolute;
	left: 30px;
	top: 10px;
	z-index: 10;
	width: 100px;
	height: 5px;
	background-color: rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.autoplay-progress svg {
  --progress: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.autoplay-progress svg line {
  stroke: #fff;
  stroke-width: 5; /* ¼± ±½±â ¸íÈ®È÷ */
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 * (1 - var(--progress)));
}

.main-slide .swiper-pagination {
	display: flex;
	color: #fff;
	justify-content: space-between;
	position: static;
	text-align: left;
  margin-top: 3px;
}
.main-slide .swiper-pagination span {font-size: 1.4rem; font-weight: 600;}

.main-slide .arrow-box {
	position: relative;
	width: 80px;
	height: 50px;
}

.main-slide .swiper-button-next,
.main-slide .swiper-button-prev {
	width: 21px;
	height: 21px;
	top: 0;
	margin-top: 0;
	background: url('../images3/arrow-left.png') no-repeat center / 100%;
}

.main-slide .swiper-button-next {
	background-image: url('../images3/arrow-right.png');
}
.main-slide .swiper-button-next::after,
.main-slide .swiper-button-prev::after {
	font-size: 0;
}

@media screen and (max-width: 480px) {
  .main-slide .txt-box {
    /* left: 46%; */
  }
  .main-slide .all-box {
    bottom: 20%;
    height: 30px;
  }
}
@media screen and (min-width: 700px) {
  .main-slide .txt-box > h3 span {display: block;}
}

@media screen and (min-width: 768px) {
  .main-slide {padding-bottom: 100px;}
  .main-slide .txt-box {width: 85%;}
  .main-slide .all-box {width: 85%;}
  .main-slide .swiper-pagination span {font-size: 1.5rem;}
}
@media screen and (min-width: 1024px) {
  .main-slide {padding-bottom: 120px;}
}
@media screen and (min-width: 1280px) {
  .main-slide {padding-bottom: 140px;}
}
/* section01(main-sdlie) ³¡ */

/* section02(service-section) css */
#section02 {padding-bottom:100px; background-color: #F1F3F8;}
.service-section article {max-width:1400px;margin:0 auto; padding: 0 15px;}
.service-section article .tit{margin-bottom:60px;font-size:18px;
  /* text-transform:uppercase; */
}
.service-section article .tit>span {font-size: clamp(1.4rem, 2.5vw, 1.6rem); font-weight: 400; display: block; margin-bottom: 10px; line-height: 1.4;}
.service-section article .tit p{font-size: clamp(2rem,7.6vw,5rem); margin-bottom: 12px; position: relative; display: inline-block; font-family: 'montserrat'; font-weight: 800;}
.service-section article .tit p::before {content: ''; background-color: #C73D54; border-radius: 50%; width: 12px; height: 12px; position: absolute; right: -15px;}
.service-section article .tit div span{font-size: clamp(1.7rem,7.6vw,2.2rem); font-weight:600; display: block; line-height: 1.3;}


.service-section article .tit{text-align:center}
.service-section article .bnr {display: flex; flex-wrap: wrap; gap: 20px;}
.service-section article .bnr li {display:flex;flex-wrap:wrap;align-content:space-between;height:300px;border-radius:20px;background-size:cover;background-color: #fff; transition: all .2s ease-in-out; background-position: center; width: 100%; box-shadow: rgba(149, 157, 165, 0.3) 0px 8px 24px; position: relative;}

.service-section article .bnr li a:before {content: ''; position: absolute;}

.service-section article .bnr li:nth-child(1) a:before {width: 260px; height: 192px; background: url('../images3/service_homepage.png') no-repeat; bottom: -8px; right: 25px;}
.service-section article .bnr li:nth-child(2) a:before {width: 230px; height: 171px; background: url('../images3/service_shopping.png') no-repeat;bottom: 15px; right: 10px;}
.service-section article .bnr li:nth-child(3) a:before {width: 215px; height: 180px; background: url('../images3/service_program.png') no-repeat;bottom: 10px; right: 25px;}

.service-section article .bnr li:hover {background-color: #3D3D3D;}

.service-section article .bnr li a {width: 100%; height: 100%; padding: 40px;}
.service-section article .bnr li:hover a div p {color: #fff;}
.service-section article .bnr li:hover a div span {color: #fff;}

.service-section article .bnr .txt{position:absolute;top:30px;right:40px;font-size:17px;font-weight:800;text-align:right;text-transform:uppercase; color: #FFF; font-family: 'Montserrat';}
.service-section article .bnr li>div{width:100%}
.service-section article .bnr div p{color: #222; margin-bottom:35px;font-size: clamp(1.7rem,5.8vw,3.2rem);font-weight:300;line-height:1.3;white-space:pre-line}
.service-section article .bnr div p em {font-weight: 700;}
.service-section article .bnr div span {white-space:pre-line;opacity:.8; color: #4b4b4b; font-size: clamp(1.4rem,6vw,1.6rem); line-height: 1.5;}

@media (min-width: 768px) {
  #section02 {padding-bottom:140px;}
  .service-section article .tit {margin-bottom: 80px;}
  .service-section article .tit div span {display: inline;}
  .service-section article .bnr li a {padding: 55px 50px;}
}
@media (min-width: 1024px) {
    #section02 {padding-bottom:150px;}
  .service-section article .bnr {gap: 30px;}
  .service-section article .bnr li {width: calc((100% - 60px)/3); height: 360px;}
}


/* section02(service-section) css end */



/* section04(portfolio-section) css */
.section04 {background-color: #F1F3F8; padding: 100px 0;}


.section04 .portfolio-arrow {display: flex; gap: 10px;}
.section04 .portfolio-btn button {margin-right: 0; width: 160px; padding: 14px 0; border: 1px solid #222; border-radius: 30px; color: #222 ; font-size: 1.6rem; font-weight: 500; transition: all 0.3s;}
.section04 .portfolio-btn button:hover {background-color: #222; border: 1px solid #222; color: #fff;}

.portfolio-section .portfolio-wrap .tit-wrap {display: flex; justify-content: space-between; flex-wrap: wrap; gap: 50px; margin-bottom: 40px; align-items: end;}
.portfolio-section .portfolio-wrap .tit-wrap .tit p {font-family: 'Montserrat'; font-size: clamp(2rem,7.6vw,5rem); font-weight: 800; margin-bottom: 12px; position: relative; display: inline-block;}
.portfolio-section .portfolio-wrap .tit-wrap .tit p::before {content: ''; background-color: #C73D54; border-radius: 50%; width: 12px; height: 12px; position: absolute; right: -15px;}
.portfolio-section .portfolio-wrap .tit-wrap .tit h2 {font-size: clamp(1.7rem,7.6vw,2.2rem); font-weight: 600; color: #222; line-height: 1.3;}

.portfolio-section .portfolio-wrap .slide-warp { margin: 0 auto; position: relative;}
.portfolio-section .portfolio-wrap .slide-warp .swiper {
    width: 100%;
    height: 100%;
    /* overflow: visible; */
}
.portfolio-section .swiper-wrapper {display: flex;}
.portfolio-section .swiper-slide {
  text-align: center;
  font-size: 18px;
  /* background: #fff; */
  flex-shrink: 0;
  width: auto;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.portfolio-section .swiper-slide:last-child {
  margin-right: 0; /* ¸¶Áö¸· ½½¶óÀ̵åÀÇ ¿À¸¥ÂÊ ¿©¹é Á¦°Å */
}

.portfolio-section .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.portfolio-section .swiper-button-next,
.portfolio-section .swiper-button-prev{
	width:50px;
	height:50px;
	background-color:white;
	color:black;
	border-radius:30px;
	position:static !important;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease 0s;
/* 	opacity:0; */
}

.portfolio-section .swiper-button-next:hover,
.portfolio-section .swiper-button-prev:hover {
  background-color: #222;
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.4);
  color: #fff;
}

.portfolio-section .swiper-button-next::after{
	content:"next";
	font-size:17px;
	font-weight:bold;
}

.portfolio-section .swiper-button-prev::after{
	content:"prev";
	font-size:17px;
	font-weight:bold;
}
.portfolio-section .swiper-button-next{

}

.portfolio-section .swiper-button-prev{

}

.portfolio-section .pagination {display: flex; gap: 30px; align-items: center; margin-top: 40px; justify-content: center; flex-wrap: wrap;}
/* .portfolio-section .swiper-pagination { top: 95% !important; } */

.portfolio-section .swiper-pagination {
  height: 4px; /* ÇÁ·Î±×·¹½º¹Ù´Â º¸Åë ³ôÀ̸¦ ÁöÁ¤ÇØÁà¾ß ÇÔ */
  background: rgba(0, 0, 0, 0.1);
  position: relative;
  bottom: 10px;
  /* left: 50%; */
  /* transform: translateX(-50%); */
  /* width: 95%; */
  z-index: 10;
}
.portfolio-section .swiper-pagination-progressbar-fill {
  background: #222 !important;
  height: 100%;
  transition: transform 0.3s;
}
.portfolio-section .swiper-slide a .portfolio {color: #fff; padding: 40px 35px;  width: clamp(320px, 20vw, 500px);
  height: clamp(400px, 70vh, 520px); display: flex; flex-direction: column; justify-content: space-between; transition: all .2s ease-in-out; border-radius: 20px; font-size: 0;}
/* .section04 .content .con .portfolio:hover {margin-top: -10px;} */

.portfolio-section .swiper-slide a .portfolio .category p {font-size: 1.6rem; text-align: right;}
.portfolio-section .swiper-slide a .portfolio .category p:nth-child(1) {margin-bottom: 6px;}
.portfolio-section .swiper-slide a .portfolio h3 {font-size: clamp(2rem,7.6vw,3.6rem); font-weight: 700; text-align: center;}
.portfolio-section .swiper-slide a .portfolio span {font-size: 1.6rem; font-family: 'Montserrat', 'san-serif'; display: block; text-align: center;}
.portfolio-section .swiper-slide a .cityvalley {background: url('../images3/section04-cityvalley.jpg?t=1') no-repeat center center; transition: background-size .3s ease; background-size: 100%;}
.portfolio-section .swiper-slide a .sj-fnc {background: url('../images3/section04-sjfnc.jpg') no-repeat center center; transition: background-size .3s ease; background-size: 100%;}
.portfolio-section .swiper-slide a .mrinnoagro {background: url('../images3/section04-mrinnoagro.jpg') no-repeat center center; transition: background-size .3s ease; background-size: 100%;}
.portfolio-section .swiper-slide a .mgyc {background: url('../images3/section04-mgyc.jpg?+=1') no-repeat center center; transition: background-size .3s ease; background-size: 100%;}
.portfolio-section .swiper-slide a .gbcp {background: url('../images3/section04-gbcp.jpg') no-repeat center center; transition: background-size .3s ease; background-size: 100%;}
.portfolio-section .swiper-slide a .dasad {background: url('../images3/section04-dasad.jpg') no-repeat center center; transition: background-size .3s ease; background-size: 100%;}
.portfolio-section .swiper-slide a .deltacast {background: url('../images3/section04-deltacast.jpg') no-repeat center center; transition: background-size .3s ease; background-size: 100%;}
.portfolio-section .swiper-slide a .drsf {background: url('../images3/section04-drsf.jpg') no-repeat center center; transition: background-size .3s ease; background-size: 100%;}
.portfolio-section .swiper-slide a .wowwash {background: url('../images3/section04-wowwash.jpg') no-repeat center center; transition: background-size .3s ease; background-size: 100%;}
.portfolio-section .swiper-slide a .koreatmt {background: url('../images3/section04-koreatmt.jpg') no-repeat center center; transition: background-size .3s ease; background-size: 100%;}

.portfolio-section .swiper-slide a .portfolio:hover {background-size: 110%;}
@media (min-width: 670px) {
  .portfolio-section .swiper-button-next,
  .portfolio-section .swiper-button-prev{
    width:60px;
    height:60px;
  }
  .portfolio-section .swiper-button-next::after{ font-size: 20px;}
  .portfolio-section .swiper-button-prev::after{ font-size: 20px;}
}
@media (min-width: 768px) {
  .section04 {padding: 120px 0;}
  .portfolio-section .portfolio-wrap .tit-wrap {margin-bottom: 65px;}
  .section04 .portfolio-btn button {width: 200px; padding: 16px 0; font-size: 1.8rem;}
  .portfolio-section .pagination {flex-wrap: nowrap; gap: 40px; margin-top: 50px;}
}
/* section04(portfolio-section) css end */

/* section5 css */
.section05 .contact-wrap {text-align: center; padding: 130px 15px; position: relative;}

.section05 .contact-wrap h2 {font-size: clamp(4.2rem,7.6vw,5.6rem); font-weight: 700;}
.section05 .contact-wrap p {font-size: clamp(1.4rem,2.5vw,1.8rem); font-weight: 400; line-height: 1.6; margin: 30px 0 40px 0; padding: 0 15px;}
.section05 .contact-wrap .contact-btn {display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;}
.section05 .contact-wrap .contact-btn button {margin-right: 0; width: 200px; padding: 12px 0; color: #fff ;  font-size: 1.8rem; font-weight: 500; background-color: #191919;}
.section05 .contact-wrap .contact-btn button:hover {color: #191919 !important; background-color: #fff !important; border: 1px solid #191919;}

.section05 .contact-wrap .contact-kidp {display: flex; gap: 10px; margin: 40px 15px 0 15px; justify-content: center; flex-wrap: wrap;}
.section05 .contact-wrap .contact-kidp .txt {font-size: clamp(2rem,7.6vw,1.6rem); font-weight: 600; margin-top: 2px;}

@media (min-width: 768px) {
  .section05 .contact-wrap .contact-btn  {gap: 20px;}
  .section05 .contact-wrap .contact-btn button {padding: 20px 0; width: 220px;}
  .section05 .contact-wrap .contact-kidp {margin: 40px auto 0 auto !important; padding: 0 15px;}
  .section05 .contact-wrap .contact-kidp {padding: 0 15px 20px 15px;}
   .section05 .contact-wrap .contact-kidp {gap: 20px;}
}

@media (min-width: 1200px) {
  .section05 .contact-wrap .contact-kidp {width: 1280px; flex-direction: row;}

  /* .section05 .contact-wrap:before {content: ''; display: block; width: 398px; height: 290px; background: url('../images3/contact-img.png') no-repeat center center; position: absolute; right: -120px; top: 90px;} */
}
/* section5 css end */

/* section6 css */
/* .section06 {background-color: #191919; padding: 100px 0;}
.section06 h2 {font-size: clamp(4.2rem,7.6vw,5.6rem); font-weight: 700; margin-bottom: 36px; color: #fff;}
.section06 .content {margin-top: 80px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.section06 .content .con {width: 100%; display: flex; gap: 55px; flex-wrap: wrap; justify-content: center;}
.section06 .content .con .portfolio {color: #fff; padding: 40px 40px; width: 350px; height: 600px; display: flex; flex-direction: column; justify-content: space-between;}
.section06 .content .con .portfolio .category p {font-size: 1.6rem; text-align: right;}
.section06 .content .con .portfolio .category p:nth-child(1) {margin-bottom: 6px;}
.section06 .content .con .portfolio h3 {font-size: 3.6rem; font-weight: 700; text-align: center;}
.section06 .content .con .portfolio span {font-size: 1.6rem; font-family: 'Montserrat', 'san-serif'; display: block; text-align: center;}
.section06 .content .con .portfolio01{background: url('../images3/section04-imexglobiz.jpg') no-repeat;}
.section06 .content .con .portfolio02{background: url('../images3/section04-gbcp.jpg') no-repeat;}
.section06 .content .con .portfolio03{background: url('../images3/section04-sjfnc.jpg') no-repeat;}
.section06 .content .con .portfolio04{background: url('../images3/section04-dasad.jpg') no-repeat;}
.section06 .content .con .portfolio05{background: url('../images3/section04-spraynozzle.jpg') no-repeat;}
.section06 .content .con .portfolio06{background: url('../images3/section04-youngintech.jpg') no-repeat;}

@media (min-width: 1200px) {
  .section06 {padding: 140px 0;}
  .section06 .content {margin-top: 100px;}
  .section06 .content .con {gap: 115px;}
} */

/* footer css*/
footer {background-color: #f3f3f3;}
/* footer .footer-wrap {display: flex; flex-wrap: wrap; flex-direction: column;} */

footer .footer-wrap .footer-top {display: flex; justify-content: start; border-bottom: 1px solid rgb(125 125 125 / 10%); border-top: 1px solid rgb(125 125 125 / 10%); flex-direction: column;}
footer .footer-wrap .util-wrap {display: flex; justify-content: space-between; gap: 20px;}
footer .footer-wrap .util {display: flex; line-height: 60px; flex-wrap: wrap; width: calc((100% - 20px)/2);}
footer .footer-wrap .util li {width: 100%; text-align: center;}
footer .footer-wrap .util li a {color: #191919; font-size: 1.4rem; font-weight: 500;}


footer .footer-wrap .footer-middle {display: flex; justify-content: space-between; flex-wrap: wrap; margin: 60px 15px 20px 15px; gap: 30px;}
footer .footer-wrap .footer-middle .middle-right {width: 100%; display: none;}
footer .footer-wrap .footer-middle .middle-right .map {border-bottom: 1px solid #ddd;}


footer .footer-wrap .footer-middle .info {width: 100%; display: flex; flex-wrap: wrap; color: #999999; margin-top: 40px;}
footer .footer-wrap .footer-middle .info li {font-size: 1.6rem; font-family: 'Pretendard', sans-serif; color: #191919; font-size: 1.5rem; padding-left: 4px; font-weight: 400; line-height: 1.75; word-break: keep-all; margin-right: 20px;}
footer .footer-wrap .footer-middle .info p {font-family: 'Montserrat', sans-serif; font-size: 1.5rem; font-weight: 300; color: #191919; margin-top: 28px;}
/* footer .footer-wrap .footer-bottom {display: flex; padding: 20px 0; align-items: center; justify-content: space-between; flex-direction: column; margin: 0 15px 0 15px;} */

footer .footer-wrap .footer-kidp {display: flex; gap: 10px; margin: 30px 15px 20px 15px;}
footer .footer-wrap .footer-kidp .txt {font-size: clamp(2rem,7.6vw,1.6rem); font-weight: 600; margin-top: 2px;}

footer .footer-wrap .copyright-wrap { margin: 0 15px; text-align: center; border-top: 1px solid rgb(125 125 125 / 10%);}
footer .footer-wrap .copyright-wrap .copyright {font-family: 'Montserrat', sans-serif; font-size: 1.3rem; font-weight: 300; color: #999999; width: 100%; font-weight: 400; padding: 25px 0;}


@media (min-width: 768px) {
    /* footer .footer-wrap {gap: 70px;} */
    footer .footer-wrap .util-wrap {justify-content: baseline; width: 100%;}
    footer .footer-wrap .util {line-height: 80px; gap: 46px; width: auto;}
    footer .footer-wrap .util li {width: auto;}
    footer .footer-wrap .util li a {color: #191919; font-size: 1.6rem;}
    footer .footer-wrap .footer-middle,
    footer .footer-wrap .footer-bottom,
    footer .footer-wrap .footer-kidp,
    footer .footer-wrap .copyright-wrap {margin: 0 auto !important; padding: 0 15px;}
    footer .footer-wrap .footer-middle {padding: 60px 15px 30px 15px;}
    footer .footer-wrap .footer-bottom {padding: 0 15px 60px 15px; }
    footer .footer-wrap .footer-kidp {padding: 0 15px 20px 15px;}

    footer .footer-wrap .footer-middle .middle-left {width: 50%;}
    footer .footer-wrap .footer-middle .middle-right {width: 45%;}

}

@media (min-width: 1024px) {
  footer .footer-wrap .footer-middle .middle-right {display: block;}
}

@media (min-width: 1280px) {
    footer .footer-wrap .util-wrap {width: 1280px; justify-content: space-between;}

    footer .footer-wrap .footer-middle {width: 1280px; padding: 60px 0 30px 0;}
    
    footer .footer-wrap .footer-middle .info {width: 100%;}
    /* footer .footer-wrap .footer-bottom {width: 1280px; align-items: end; justify-content: space-between; flex-direction: row; padding: 0 0 60px 0;} */
    footer .footer-wrap .footer-kidp {width: 1280px; flex-direction: row; padding: 0 0 30px 0;}
    footer .footer-wrap .copyright-wrap {width: 1280px;}
    footer .footer-wrap .copyright-wrap .copyright {font-family: 'Montserrat', sans-serif; font-size: 1.3rem; font-weight: 300; font-weight: 500;}
}

/* °è¾àÇöȲ ¹× °ßÀû¹®ÀÇ css */
.news-section {padding: 80px 0;}
.news-section>h2 {font-size: clamp(2.8rem,5vw,4.8rem); font-weight: 700;margin-bottom: 36px; text-align: center; line-height: 1.3;}
.news-section .content {display: flex; gap: 30px; flex-wrap: wrap;}

.news-section .content>div {width: 100%;padding: 30px 25px;box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; border-radius: 20px;}
.news-section .content>div .con-tit {display: flex;justify-content: space-between;margin-bottom: 20px;align-items: center;}
.news-section .content>div .con-tit .tit {display: flex; gap: 10px; align-items: center;}
.news-section .content>div .con-tit .tit h2 {font-size: 2rem; font-weight: 700;}
.news-section .content .news-right .con-tit .tit h2 {color: #fff;}

.news-section .content>div .con-tit .more a {font-size: 2rem;color: #888888;font-weight: 400;transition: all .2s ease-in-out;border: 1px solid #c0c0c0;padding: 5px 10px;}
.news-section .content>div .con-tit .more a:hover {color: #000; border-color: #000;}

.news-section .content .news-right .con-tit .more a {border: 1px solid #888888;}
.news-section .content .news-right .con-tit .more a:hover {color: #fff; border-color: #fff;}

.news-section .content>div ul {display: flex; flex-direction: column; gap: 10px;}
.news-section .content>div ul li {padding: 10px 5px; border: 1px solid transparent;display: flex;align-items: center;gap: 20px;transition: all .2s ease-in-out;}
.news-section .content>div ul li .date-wrap {display: flex; flex-direction: column; align-items: center;}
/* .news-section .content>div ul li .date-wrap .day1 {font-size: clamp(2.4rem,2.5vw,4rem); font-weight: 700; line-height: 1;} */
.news-section .content>div ul li .date-wrap .date {font-size: 1.3rem; font-weight: 400;}
.news-section .content .news-right ul li .date-wrap .date {color: #b9b9b9;}

.news-section .content>div ul li .title {display: flex;align-items: center;width: 100%;gap: 20px;}
.news-section .content>div ul li .title .box span {
  display: inline-block;border-radius: 2px;padding: 8px 12px;color: #fff;font-weight: 500;font-size: 1.3rem; transition: all .2s ease-in-out; width: 72px; text-align: center;}

.news-section .content .news-left {border: 1px solid #EAEAEA;}
.news-section .content .news-right {background-color: #2C2D2D;}



.news-section .content .news-left ul li:hover .title h3 {color: #00B3CE;}
.news-section .content .news-right ul li:hover .title h3 {color: #C73D54;}

.news-section .content .news-left ul li .title .box span {background-color: #00B3CE; color: #fff;}

.news-section .content .news-right ul li .title .box span {background-color: #fff; color: #2C2D2D;}
.news-section .content .news-right ul li .title .box span.on {background-color: #C73D54; color: #fff;}

/* .news-section .content .news-left ul li:hover .title .box span {background-color: #00B3CE;}
.news-section .content .news-right ul li:hover .title .box span {background-color: #C73D54; color: #fff;} */

.news-section .content>div ul li .title h3 {font-size: clamp(1.4rem,2.5vw,1.7rem); transition: all .2s ease-in-out; font-weight: 500;}
.news-section .content .news-right ul li .title h3 {color: #fff;}

@media (min-width: 475px) {
  .news-section .content>div .con-tit .tit h2 {font-size: 2.4rem;}
  .news-section .content>div ul li .title .box span {font-size: 1.4rem;}
  .news-section .content>div ul li .date-wrap .date {font-size: 1.4rem;}
}

@media (min-width: 768px) {
  .news-section {padding: 100px 0;}
  .news-section>h2 {margin-bottom: 80px;}
  .news-section .content>div {padding: 40px 35px;}
  .news-section .content>div .con-tit {margin-bottom: 30px;}
  .news-section .content>div .con-tit .tit h2 {font-size: 3.6rem;}
  .news-section .content>div ul {gap: 15px;}
  .news-section .content>div ul li {gap: 40px;}
  .news-section .content>div ul li .title {gap: 30px;}
}
@media (min-width: 850px) {
  .news-section .content {gap: 20px;}
  .news-section .content>div {width: calc((100% - 20px)/2);}
}

@media (min-width: 1024px) {
  .news-section {padding: 120px 0;}
  .news-section>h2 {margin-bottom: 90px;}
  .news-section .content {gap: 30px;}
  .news-section .content>div {width: calc((100% - 30px)/2);}
  .news-section .content>div .con-tit {margin-bottom: 35px;}
}

@media (min-width: 1280px) {
  .news-section {padding: 120px 0 140px 0;}
  .news-section .content {gap: 40px;}
  .news-section .content>div {width: calc((100% - 40px)/2);}
}
/* °è¾àÇöȲ ¹× °ßÀû¹®ÀÇ css end*/


.splittype-text span {display: inline-block;}

.line {
  display: inline-block;
  overflow: hidden;
}

.sr-only {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    clip: rect(0,0,0,0);
}

.root_daum_roughmap .cont {display: none;}