._battery{}
._battery .contents{}
._battery .contents .wrap{
	padding: 130px 0;
}
._battery .row{margin-bottom: 60px;}
._battery .row:last-child{margin-bottom: 0;}
._battery h3{
	font-size: 50px; letter-spacing: -0.025em; font-weight: 700;
	margin-bottom: max(calc(40/50*1em),20px); overflow: hidden;
}
._battery h3 p{}
._battery h4{
	font-size: 30px; font-weight: 700; letter-spacing: -0.025em;
	display: flex; align-items: center; gap: 0.5em; margin-bottom: max(1em,20px);
	overflow: hidden;
}
._battery h4::before {
	content:''; display: block; width: 0.4em; height: 0.4em; border-radius: 50%; background-color: var(--point-color-1);
}
._battery h4 p{}

@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {
	._battery h3{font-size: max(calc(50/1280*100vw),34px);}
}
@media screen and (max-width:1024px) {
	._battery .contents .wrap{padding: 100px 0; padding-bottom: 120px;}
}
@media screen and (max-width:820px) {}
@media screen and (max-width:500px) {
	._battery .contents .wrap{padding: 80px 0; padding-bottom: 120px;}
	._battery h3{font-size: max(calc(34/500*100vw),22px);}
	._battery h4{font-size: max(calc(30/500*100vw),20px);}
}
@media screen and (max-width:320px) {}




/* n1 */
._battery .row.n1{}
._battery .row.n1 .cont{
	display: flex; align-items: flex-start; gap: 70px;
}
._battery .row.n1 .imgBx{
	position: relative; min-width: 610px; border: 1px solid #e0e0e0; box-sizing: border-box;
}
._battery .row.n1 .imgBx::before {
	content:''; display: block; padding-bottom: calc(470/610*100%);
}
._battery .row.n1 .imgBx img{
	position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;
}
._battery .row.n1 .txt{
	font-size: 22px; font-weight: 500; color: #373737; line-height: 1.8181; padding-top: 44px;
}

@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {
	._battery .row.n1 .cont{gap: 20px; }
	._battery .row.n1 .imgBx{min-width: 50%;}
	._battery .row.n1 .txt{padding-top: 0; font-size: max(calc(22/1280*100vw),16px);}
}
@media screen and (max-width:1024px) {}
@media screen and (max-width:820px) {
	._battery .row.n1 .cont{flex-direction: column;}
	._battery .row.n1 .imgBx{min-width: unset; width: 100%;}
	._battery .row.n1 .txt{width: 100%;}
}
@media screen and (max-width:500px) {
	._battery .row.n1 .txt{font-size: 14px;}
}
@media screen and (max-width:320px) {}



/* n2 */
._battery .row.n2{}
._battery .row.n2 .grayBx{
	background-color: #f3f3f3;
	font-size: 22px; letter-spacing: -0.025em; color: #373737; line-height: 1.8181;
	padding: 55px 60px; box-sizing: border-box; width: 100%;
}

@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {
	.test .row.n2 .grayBx{padding: 40px 30px; font-size: 18px;}
}
@media screen and (max-width:820px) {}
@media screen and (max-width:500px) {
	._battery .row.n2 .grayBx{padding: 20px 10px; font-size: 14px;}
}
@media screen and (max-width:320px) {}




/* n3 */
._battery .row.n3{position: relative;}
._battery .row.n3 .imgArea{
	max-height: 800px; overflow: hidden;
}
._battery .row.n3 .imgArea > div{
	display: flex; flex-wrap: wrap; gap: 50px; position: relative;
	overflow: auto;
}
._battery .row.n3 .imgArea .imgBx{
	width: 100%; min-width: 740px;
}
._battery .row.n3 .imgArea .imgBx img{width: 100%;}
._battery .row.n3 .more{
	position: absolute; left: 0; bottom: 0;
	width: 100%; height: 3px; background-color: var(--point-color-2);
	display: flex; align-items: center; justify-content: center; z-index: 1;
	transition: opacity 0.2s;
}
._battery .row.n3 .gradiant{
	background: linear-gradient(0deg,rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0) 100%);
	position: absolute; left: 0; bottom: 3px; width: 100%; height: 240px; z-index: -1;
	pointer-events: none;
}
._battery .row.n3 .btn{
	width: 220px; height: 62px;
	display: flex; align-items: center; justify-content: center; color: #fff;
	font-size: 20px; font-weight: 700; letter-spacing: -0.025em;
	border-radius: 20px 0 20px 20px; background-color: var(--point-color-2);
	cursor: pointer; transition: background-color 0.2s;
}
._battery .row.n3 .btn:hover{background-color: #444;}
._battery .row.n3 .btn p{}
._battery .row.n3 .btn i{}

/* nomore */
._battery .row.n3.noMore{}
._battery .row.n3.noMore .imgArea{max-height: unset;}
._battery .row.n3.noMore .more{opacity: 0; pointer-events: none;}


@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {}
@media screen and (max-width:820px) {
	._battery .row.n3 .btn{width: 170px; height: 50px; font-size: 18px; border-radius: 4px;}
}
@media screen and (max-width:500px) {
	._battery .row.n3 .imgArea{max-height: 140vw;}
	._battery .row.n3 .btn{width: 130px; height: 40px; font-size: 16px;}
}
@media screen and (max-width:320px) {}


.img_popup .cont{max-width: 1200px;}