@charset "utf-8";
/* CSS Document */
.sec{margin: 0 auto 100px;}
.business h4{
	font-size: 24px;
	font-weight: 600;
}
@media (max-width: 500px) {
	.sec1{margin: 0 auto 50px;}
	.business h4{font-size: 21px;}
}
@media (max-width: 850px) {
    .last-section {margin-bottom: 160px;}
}
/****************************
sec1
****************************/
.sec1 ul{
	display: flex;
	flex-wrap: wrap;
	gap:40px;
}
.sec1 li:first-child{
	width: 100%;
	display: flex;
	gap:6%;
	align-items: flex-start;
}
.sec1 li:first-child img{
	width: 40%;
	max-width: 400px;
}
.sec1 li:first-child >div{width: 54%;}
.sec1 li:not(:first-child){width: calc((100% - 80px)/3);}
.sec1 h4{
	position: relative;
	margin-bottom: 40px;
}
.sec1 h4::before{
	content: "◆";
	font-size: 16px;
	margin: 0 5px 0 0;
	display: inline-block;
}
.sec1 h4>span{
	color: #d1e1f1;
	font-weight: 500;
	position: absolute;
	z-index: -1;
	left: 60px;
	top: 0;
}
.sec1 h4 span span{	font-size: 1.5em;}
.sec1 li p{margin-bottom: 20px;}
.sec1 li div div{
	font-size: 14px;
	border-top: solid 1px #f2f6fa;
	padding: 10px 0;
}
@media (max-width: 850px) {
	.sec1 ul{gap:30px 5% ;}
	.sec1 li:first-child{display: block;}
	.sec1 li:first-child img,.sec1 li:first-child >div{width: 100%;max-width: 100%;}
	.sec1 li:first-child,.sec1 li:not(:first-child){width: 47.5%;}
	.sec1 li>img{margin-bottom: 20px;}
	.sec1 h4{margin-bottom: 20px;font-size: 21px;}
}
@media (max-width: 500px) {
	.sec1 ul{gap:30px 5% ;}
	.sec1 li:first-child,.sec1 li:not(:first-child){width: 100%;}
}
/****************************
project_box
****************************/
.project_box{
	display: flex;
	align-items: flex-start;
	gap: 40px;
	padding: 40px;
	background-color: #f2f6fa;
	margin-bottom: 30px;
}
.project_box .info{width: 50%;}
.project_box .info h4{margin-bottom: 40px;}
.project_box .info p{margin-bottom: 50px;}
.project_box .info span{
	display: block;
	text-indent: -5em;
	padding-left: 5em;
}
.slider-container {
	flex: 1;
	overflow: hidden;
	display: flex;
	max-width: 440px;
	flex-direction: column;
	position: relative;
}
.slider-track {
  display: flex;
  overflow-x: auto; 
  scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.slider-track::-webkit-scrollbar {display: none;}
.slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
}
.prev-btn, .next-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 15px; 
  height: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: #27416D; 
  z-index: 10;
  padding: 0;
  display: flex;
  align-items: center;
}
.arrow-icon { width: 100%; height: auto;}
.arrow-icon.is-right {transform: scaleX(-1);}
.prev-btn { left: 20px; }
.next-btn { right: 20px; }
.prev-btn:hover, .next-btn:hover { opacity: 0.7;}
.slider-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #2c3e50;
  background-color: transparent;
  cursor: pointer;
}
.dot.active { background-color: #2c3e50;}
@media (max-width: 850px) {
	.project_box{
		flex-direction: column;
		gap: 20px;
		padding: 30px 5%;
		margin-bottom: 20px;
	}
	.project_box .info {width: 100%;}
	.project_box .info h4{text-align:center;margin-bottom: 20px;}
	.project_box .info p{margin-bottom: 30px;}
	.slider-container {
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
	}
	.prev-btn {left: 10px;}
	.next-btn {right: 10px;}
}