.company {
    display: none;
    width: 100%;
}
.company.on {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: column;
}
.company .m-visual {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(./img/tech-bg.jpg) 50% 50% / cover no-repeat;
    flex-direction: column;
    min-width: 320px;
    width: 100%;
    align-content: center;
    min-height: 932px;
}

.company .m-visual .visual-txt {
    gap: 20px;
    max-width: 100%;
    flex-direction: row;
}

.company .m-visual .c-sub-txt {
    /* width: 650px; */
    font-size: 40px;
    font-weight: 600;
    text-align: center;
    line-height: 1.6;
    /* width: 1100px; */
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    flex-direction: column;
    transition: .3s;
}

.company .m-visual .button {
	display: flex;
	width: 580px;
	height: 80px;
	border-radius: 40px;
	background: #FFF;
	font-size: 20px;
	transition: .3s;
	justify-content: center;
	align-items: center;
	border: none;
	z-index: 0;
	font-family: 'SUIT';
	font-weight: 600;
	margin-bottom: 120px;
	transition: .3s;
}

.company .m-visual .m-box {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 200px;
    gap: 30px;
}


.button-hover {
	margin: 0;
	display: flex;
	background: #7DA4E7;
	width: 60px;
	height: 60px;
	border-radius: 40px;
	position: absolute;
	right: 13px;
	top: 50%;
	align-items: center;
	justify-content: center;
	transition: .3s;
	transform: translateY(-50%);
}

.button-hover .downbtn {
    transform: rotate(90deg);
}
button:hover .button-hover {
	background-color: #FDBF31;
}

.c-solution .sol-wrap {
	display: flex;
	flex-direction: column;
	gap: 98px;
	align-items: center;
	height: 110vh;
	justify-content: center;
	width: 100%;
	max-width: 1624px;
	align-content: center;
	min-height: 932px;
}

.c-solution .sol-wrap .sol-img {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	width: 900px;
	transition: .3s;
	transition-duration: 1.5s;
}
.c-solution .sol-wrap .sol-img div {
	width: 100%;
	border-radius: 500px;
	padding-bottom: 100%;
	display: block;
	/* transition: .3s; */
}
.c-solution .sol-wrap .sol-img .img-01 {
	background: #fff url(./img/c-bg-01.png) 50% 50% / 80%  no-repeat;
	width: 100%;
	z-index: 1;
}
.c-solution .sol-wrap .sol-img .img-02 {
	background: #B9CFFA url(./img/c-bg-02.png) 50% 50% / 80% no-repeat;
	transform: translateX(-22px);
}
.c-solution .sol-wrap .sol-img .img-03 {
	background: url(./img/arrow.png) 50% 50% / 60% no-repeat;
}
.c-solution .sol-wrap .sol-img .img-04 {
	background: url(./img/c-bg-03.png) 50% 50% / contain no-repeat;	
}

.c-solution .sol-wrap .c-sub-txt {
	/* width: 710px; */
	font-size: 40px;
	font-weight: 600;
	text-align: center;
	line-height: 1.6;
	/* width: 1100px; */
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	flex-direction: column;
	transition: .3s;
	min-width: 320px;
	transition-duration: 1.5s;
}

.c-solution .sol-img-list {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 200px;
	max-width: 1764px;
	padding: 0 70px;
	box-sizing: border-box;
	/* margin: 0 70px; */
	/* min-height: 2500px; */
}

.c-solution .sol-img-list .visual-txt {
	justify-content: start;
	flex-direction: column;
	width: 100%;
	width: 100%;
	margin-top: 200px;
	max-width: 100%;
}
.c-solution .sol-img-list .visual-txt p {
	color: #000;
	text-align: left;
}

.sol-img-list .s-list {
	display: flex;
	gap: 60px;
	flex-direction: row;
	width: 100%;
	/* flex-wrap: wrap; */
	display: none;
	margin: 0;
	padding-bottom: 200px;
	justify-content: center;
	/* max-width: 1624px; */
}
.sol-img-list .s-list.on {
	display: flex;
}
.sol-img-list .s-list .img {
	display: flex;
	gap: 60px;
	width: calc(50% - 30px);
	margin: 0;
	flex-direction: column;
	height: max-content;
	padding: 0;
	/* min-width: 320px; */
}
.sol-img-list .s-list div {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	align-content: center;
}
.sol-img-list .s-list div:nth-child(2) {
	/* margin-top: 150px; */
}
.sol-img-list .s-list div {
	display: block;
	width: 100%;
	border-radius: 20px;
	position: relative;
	box-sizing: border-box;
	height: 0;
	padding-bottom: 100%;
	transition: .3s;
}
.sol-img-list .s-list div::after {
  content: "";
  display: block;
/*   padding-bottom: 100%; */
  box-sizing: border-box;
}
.sol-img-list .s-list .img:nth-child(1) {
	transform: translateY(0px);
}

.sol-img-list .s-list .img:nth-child(2) {margin-top: 150px;}
.sol-img-list .s-list .img div a::after {
  content: "";
  display: block;
  padding-bottom: 100%;
  box-sizing: border-box;
}
.sol-img-list .s-list .img:first-child div:first-child {
	background: url(./img/solution-bg.png) 50% 50% / contain no-repeat ;
}
.sol-img-list .s-list .img:first-child div:nth-child(2) {
	background: url(./img/planning-bg.png) 50% 50% / contain no-repeat ;
}
.sol-img-list .s-list .img:first-child div:nth-child(2) p {
	color: #000;
}
.sol-img-list .s-list .img:nth-child(2) div:first-child {
	background: #2B2B2B url(./img/svmap-bg.png) 50% 50% / contain no-repeat ;
}
.sol-img-list .s-list .img:nth-child(2) div:nth-child(2) {
	background: url(./img/3d-content.jpg) 50% 50% / contain no-repeat ;
}
.c-solution {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	align-content: center;
	justify-content: center;
}

.sol-img-list .s-list div .c-sub-txt {
	font-size: 40px;
	display: inline-flex;
	width: auto;
	/* 	text-transform: uppercase; */
	font-weight: 800;
	flex-direction: column;
	gap: 0;
	line-height: 1.4;
	padding: 60px 0 0 60px;
	position: inherit;
	transition: .3s;
	width: 100%;
	box-sizing: border-box;
}

.sol-img-list .s-list div .c-sub-txt span {
	text-align: left;
}

.sol-img-list .s-list div p {
	color: #fff;
	font-size: 20px;
	font-weight: 600;
	padding: 0 60px 60px;
	position: absolute;
	bottom: 0;
	line-height: 2;
	display: flex;
	flex-direction: column;
	width: 100%;
	box-sizing: border-box;
	transition: .3s;
}
.sol-img-list .s-list div .on {
	display: flex;
}
.sol-img-list .s-list div .none {
	display: none;
}
.sol-teck {
	width: 100%;
	height: 110vh;
	background: #D4E6FF;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 50px;
	min-height: 932px;
}
.marquee-two .js-marquee {
	margin-right: 32px !important;
}
.sol-teck .visual-txt {
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 100px;
}

.sol-teck .visual-txt p {
	color: #000;
	width: 100%;
	max-width: 1764px;
	text-align: left;
	padding: 0 70px;
}
.sol-teck .marquee-two {
	overflow: hidden;
}
.sol-teck .marquee-two .teck-list {
	display: block;
    width: 100%;
    border-radius: 20px;
    position: relative;
    box-sizing: border-box;
    height: 0;
    padding-bottom: 100%;
}

.sol-teck .marquee .teck-list:after {
	content: "";
	display: block;
	padding-bottom: 100%;
	box-sizing: border-box;
}

.sol-teck .visual ul {
	display: flex;
	gap: 32px;
}

.sol-teck .visual ul li {
	width: 300px;
	height: 300px;
	background: #fff;
	border-radius: 20px;
}

.sol-teck .visual ul li div {
	border-radius: 20px;
	height: 100%;
}

.sol-teck .visual ul li .t-img-01 {
	background: url(./img/data-bg-img.png) 50% 50% / 90% no-repeat;
}
.sol-teck .visual ul li .t-img-02 {
	background: #7DA4E7 url(./img/tech-2.png) 50% 50% / 50% no-repeat;
}
.sol-teck .visual ul li .t-img-03 {
	background: #2F2F2F url(./img/tech-3.png) 50% 50% / 70% no-repeat;
}
.sol-teck .visual ul li .t-img-04 {
	background: #7DA4E7 url(./img/tech-4.png) 50% 50% / 70% no-repeat;
}
.sol-teck .visual ul li .t-img-05 {
	background: #FFD678 url(./img/tech-5.png) 50% 50% / 50% no-repeat;
}
.sol-teck .visual ul li .t-img-06 {
	background: #D9D9D9 url(./img/tech-6.png) 50% 50% / 70% no-repeat;
}
.sol-teck .visual ul li .t-img-07 {
	background: #2F2F2F url(./img/tech-7.png) 50% 50% / 50% no-repeat;
}
.sol-teck .visual ul li .t-img-08 {
	background: #B9CFFA url(./img/tech-8.png) 50% 50% / 70% no-repeat;
}
.sol-teck .visual ul li .t-img-09 {
	background: #FFD678 url(./img/tech-9.png) 50% 50% / 50% no-repeat;
}

.marquee-three .js-marquee {
	
margin-right: 32px !important;
}
.marquee-three {
	/* display: none; */
	overflow: hidden;
	visibility: hidden;
	height: 0;
}

.c-solution .c-footer {
	background: url(./img/tech-bg.jpg) 50% 50% / cover no-repeat;
	height: 100vh;
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
	min-height: 932px;
}	

.c-solution .footer-box ul li:first-child {
	background: #FFFFFFc7;
}
.c-solution .footer-box ul li:first-child p {
	color: #000;
}
.c-solution .footer-box ul li:nth-child(2) {
	background: #7da4e74a;
	backdrop-filter: blur(10px);
}

.c-solution .footer-box ul li div p {
	color: #000;
	font-weight: 900;
}
.c-solution .footer-box ul li div p span {
		
	background: url(./img/pin1.png) 50% 50% / cover no-repeat;	
	width: 100px;		
	display: none;
}
.c-solution .footer-box ul li div span {
	color: #000;
	margin-top: 25px;
	font-size: 24px;
	display: block;
	font-weight: 500;
	line-height: 1.6;
}
.c-solution .footer-box ul li div span:last-child {
	
margin: 0;
}

.c-solution .footer-box .map-btn {
    background: #fff;
    width: 80px;
    height: 80px;
    border-radius: 20px;
    border: none;
    font-size: 24px;
    font-family: 'SUIT';
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    /* min-width: 290px; */
}
.c-solution .footer-box .bottom-map {
		display:flex;
		flex-direction: row-reverse;
		gap:16px;
}
.c-solution .footer-box .naver-b {
	background: #fff url(./img/naver.png) 50% 50% / 40% no-repeat;
}
.c-solution .footer-box .kakako-b {
	background: #fff url(./img/kakao.png) 50% 50% / 40% no-repeat;
}
.company .c-footer .footer-box {
	max-width: 1764px;
	padding: 0 70px;
	box-sizing: border-box;
}

.company .c-footer .footer-box ul {
	  width: 100%;
	  min-width: 320px;
}

.company .c-footer .footer-box ul li {
	  width: 50%;
}

.c-solution .footer .footer-bottom {
	color: #fff;
	border-top: 1px solid #fff;
}




