div.page-bg { height:unset}
div.page-bg:after { display:none;}
.grid-container {
	--circle-gap : 2vw;
	--circle-count : 20;
	--circle-size : calc((96vw /  var(--circle-count)) - var(--circle-gap));
	width:100%; display: grid;
	grid-template-columns: repeat(var(--circle-count), var(--circle-size));
	grid-gap: var(--circle-gap);
	padding:2.5vw;
}
.grid-container .circle {
	width: var(--circle-size);
	height: var(--circle-size);
	background-color: #fff;
	border:1px solid var(--color-main);
	border-radius: 50%;
	opacity: 0;
	animation: fadeIn 0.5s forwards;
}

.grid-container .circle.active { z-index:1;background-color:var(--color-main)}
.grid-container .circle.active:after { content:""; display:block; width: 100%; height: 100%; position: relative; top:-1px; left:-1px; background-color: #fff; border:1px solid var(--color-main); border-radius: 50%; transition:.3s ease ; transform:scale(100%); pointer-events: none;}
.grid-container .circle.active.do:after {
	transform: translateX(-10px) translateY(-10px);
}
@keyframes fadeIn {
	to {
	   opacity: 1;
	}
} 
@media screen and (max-width:1600px){
	.grid-container {
		--circle-gap : 1.6vw;
		--circle-count : 18;
	}
	.grid-container .circle:nth-last-child(-n+8) { display: none; }
}
@media screen and (max-width:1024px){
	.grid-container {
		--circle-gap : 2vw;
		--circle-count : 14;
	}
	
}
@media screen and (max-width:768px){
	div.page-bg { height: }
	.grid-container {
		--circle-gap : 2.5vw;
		--circle-count : 10;
	}
	.grid-container .circle:nth-last-child(-n+8) { display: block; }
	.grid-container .circle.active.do:after {
		transform: translateX(-5px) translateY(-5px);
	}	
}	

/*************/
.adps-img { display: flex; align-items: center; justify-content: center;}
.image-container { position: relative; width: 500px; height:350px }
.image { position: absolute; width: 100%; opacity: 0; animation: fade 4s infinite;}
.image1 { animation-delay: 0s;}
.image2 { animation-delay: 2s; /* À̹ÌÁö1 ¾Ö´Ï¸ÞÀ̼ÇÀÇ Àý¹Ý ÁÖ±â */}

@keyframes fade {
    0% {
        opacity: 1;
    }
   50% {
        opacity: 1;
    }
	51% {
        opacity: 0;
    }
	100% {
        opacity: 0;
    }
}


section.section-contents .title-box p.h2 { text-align:center}
.loc1 h2 { margin:100px 0 50px 0}
.loc1 p.h1 { margin:70px 0 50px 0}


.benefit { display:flex; justify-content: center;   flex-wrap: wrap;  margin-top:100px !important}
.benefit > li { display: flex; width: calc(100% / 3); flex-direction: column; justify-content: center;  }

.benefit ul { margin-top:50px; font-size:1.3em;  padding-left:50px;}
.benefit ul li { padding-left:20px;}
.benefit ul li i {width:20px; margin-left:-20px}
.benefit ul li + li { margin-top:10px;}
.benefit h3 {padding-left:50px; font-weight:300 !important; font-size:2em !important; line-height:1; display: inline-block; }
.benefit img { width:100%;}
.benefit i.bx { opacity:.5}
@media screen and (max-width:1024px){
	.benefit ul {  font-size:1em;}
	.benefit > li {    justify-content: flex-start; }
	.benefit > li:nth-child(1) {width:37%; }
	.benefit > li:nth-child(2) {width:37%; }
	.benefit > li:nth-child(3) {width:26%; }	
	.benefit h3 { font-size:1.5em !important; }
}
@media screen and (max-width:768px){
	.benefit {margin-top:50px !important; }
	.benefit > li {width:100% !important}
	.benefit ul { margin-top:20px; font-size:1.2em; padding-left:0; padding:0 10vw}
	.benefit h3 { font-size:1.5em !important;  font-weight:400 !important;  text-align:center; display:block; padding:10px 0;}
	.benefit > li + li { margin-top:30px}
}