div.page-bg { height:unset; position:relative;}
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;
}
.cover22 { display:none; position:fixed; top:0; width:100%; height:150px; background:linear-gradient( var(--body-bgColor) 50%, transparent); z-index:2; transition:.5s ease; border:0px solid #f00;
transform: translateY(-50px); opacity:0;  visibility: hidden;
}
.cover.active { transform: translateY(0); opacity:1;  visibility: visible; }
.grid-container .circle {
	width: var(--circle-size);
	height: var(--circle-size);
	background-color: #fff;
	border:1px solid var(--color-main);
	border-radius: 50%;
	opacity: 1;
	transition:1s ease ;
}

.grid-container .circle.active { z-index:2;background-color:var(--color-main)}
.grid-container .circle.do {
		opacity: 0;
}
@media screen and (max-width:1600px){
	.grid-container {
		--circle-gap : 1.8vw;
		--circle-count : 18;
	}
	.grid-container .circle:nth-last-child(-n+8) { display: none; }
}
@media screen and (max-width:1024px){
	.grid-container {
		--circle-gap : 1.6vw;
		--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; }
}	
/*************/
.adps-img { display: flex; align-items: center; justify-content: center;     flex-wrap: wrap; }
.adps-img img {   width: 500px;  }
.adps-img img.arrow {   width: 50px;  }

.title-box { text-align:left; align-items: flex-start;}
section.section-contents p.h1 {  text-align:left; }
section.section-contents .loc1 {margin:200px 0 100px 0}
section.section-contents .loc1 p { text-align:center; font-size:2.5em;font-weight:400; line-height:1.2}
section.section-contents .loc2 p { text-align:center; }
section.section-contents .loc1 p span { font-weight:900}
#eng section.section-contents .loc1 p span { font-weight:700}
.bgmove { height:100%; min-height:400px; background-size: contain; }

.adps-process {padding:80px 100px;  }
.adps-process1 { display:flex; justify-content: space-around; margin-top:20px !important; }
.adps-process1 li { width:50%; max-width:600px; padding:50px 40px;  border-radius:20px;  }
.adps-process1 li h3 { font-size:1.8em; font-weight:700; margin-bottom:40px;}
.adps-process1 li:nth-child(1) h3 {color:#c11220}
.adps-process1 li:nth-child(2) h3 {color:#022f4b}

.inside { display:flex; justify-content: space-between; padding:30px 0;}
.inside li { width: 30%; display:flex; flex-direction: column; font-size:1.2em; line-height:1.6; padding:0 30px}
.inside li + li { border-left:var(--border-basic)}
.inside li span { font-size:2em;  font-variation-settings:  'wght' 400; margin-bottom:10px; color:var(--color-main) }

.loc2 { margin-top:80px !important;}
.loc3 { text-align:center; margin-top:80px !important; }
.loc3 img {width:100%; max-width:800px;}

.gototop {left:unset; right:50px;}

@media screen and (max-width:1600px){
	.adps-img img {   width: 400px;  }
}


@media screen and (max-width:1024px){
	.adps-process1 li { padding:50px 30px; }
	.adps-img img {   width: 40%;  }
}

@media screen and (max-width:768px){
	
	.title-box { text-align:center; align-items: center;}
	.image-container {  width: 100%;   }
	section.section-contents .loc1 {margin:100px 0 100px 0}
	section.section-contents .loc1 p {font-size: 1.5em;}
	.adps-img {    flex-direction: column;}
	.adps-img img {   width: 80%;  }
	.adps-img img.arrow {   width: 10%; margin:20px 0 }
	.adps-process {padding:0 20px;  }
	.adps-process1 { flex-direction: column;  justify-content: unser; margin-top:20px !important; }
	.adps-process1 li { width:100%; padding:0 20px; margin-top:30px;}
	.adps-process1 li h3 { font-size:1.4em;  margin-bottom:20px;}
	
	
	.inside {flex-direction: column;  margin:50px 0 !important;  padding:30px 0 !important; border-top:var(--border-basic-d1); border-bottom:var(--border-basic-d1); }
	.inside li { width: 100%;  }
	.inside li + li { border-top:var(--border-basic); border-left:none; padding-top:20px; margin-top:20px; }
	
	.bgmove { height: 100%; min-height: 300px;background-size: cover;}


}