@charset "UTF-8";
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit-box{}
.main-tit-box .main-tit{color:var(--mainColor); font-size:2rem; font-weight:600; letter-spacing:-0.02em; line-height:1.5; margin-bottom:1.5rem;}
.main-tit-box .main-sub-tit{font-size:6rem; line-height:1.23; letter-spacing:-0.025em; color:#000; font-weight:700; margin-bottom:3.5rem;}
.main-tit-box .main-txt{font-size:1.8rem; line-height:1.66; letter-spacing:-0.02em; color:#888; font-weight:400;}
/* white ver */
.main-tit-box.white .main-txt{color:rgba(255,255,255,0.5)}

/* effect */
.main-txt-effect{transition:all 1.5s; transition-delay:0.3s;}
.main-tit-box .main-tit .main-txt-effect{background: linear-gradient(90deg, var(--mainColor), var(--mainColor) 50%, rgba(69,129,23,0.2) 0); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% 100%; background-position: 100%;}
.main-tit-box .main-sub-tit .main-txt-effect{background: linear-gradient(90deg, #000, #000 50%, rgba(0,0,0,0.2) 0); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% 100%; background-position: 100%;}
.main-tit-box .main-txt .main-txt-effect{background: linear-gradient(90deg, #888, #888 50%, rgba(136,136,136,0.2) 0); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% 100%; background-position: 100%;}

/* animated */
.animated .main-txt-effect{background-position: 0% !important;}

/* -------- 메인 컨텐츠 :: 공통 -------- */
@media all and ( max-width: 800px ){
	/* 공통 :: 타이틀 */
	.main-tit-box .main-sub-tit{font-size:3.6rem; margin-bottom:1.5rem;}
}

/* ===== BTN VIEWMORE ===== */
.btn-viewmore {
    display:inline-block;
    padding:0.313em 0;
    font-size:1.6rem;
    color:#fff;
    font-weight:600;
    vertical-align:middle;
}
.btn-viewmore i {
    display:inline-block;
    margin-left:1.375em;
    width:1.75em;
    height:1.5em;
    background:url(../images/common/ico-viewmore.png) no-repeat center;
    background-size:100%;
    vertical-align:middle;
}
.btn-viewmore:hover i{
    -webkit-animation: viewMoreAni 1s linear infinite;
    -moz-animation: viewMoreAni 1s linear infinite;
    -ms-animation: viewMoreAni 1s linear infinite;
    -o-animation: viewMoreAni 1s linear infinite;
    animation: viewMoreAni 1s linear infinite;
}
.btn-viewmore.blue {
    color:#0b2345;
}
.btn-viewmore.blue i{
    background:url(../images/common/ico-viewmore-blue.png) no-repeat center;
}
@-webkit-keyframes viewMoreAni {
    0% {
        opacity: 1; 
        transform: translateX(0px) scale(1);
    }
    25%{
        opacity: 0; 
        transform:translateX(10px) scale(0.9);
    }
    26%{
        opacity: 0; 

        transform:translateX(-10px) scale(0.9);
    }
    55% {
        opacity: 1; 
        transform: translateX(0px) scale(1);
    }
}
@-moz-keyframes viewMoreAni {
    0% {
        opacity: 1; 
        transform: translateX(0px) scale(1);
    }
    25%{
        opacity: 0; 
        transform:translateX(10px) scale(0.9);
    }
    26%{
        opacity: 0; 

        transform:translateX(-10px) scale(0.9);
    }
    55% {
        opacity: 1; 
        transform: translateX(0px) scale(1);
    }
}
@-ms-keyframes viewMoreAni {
    0% {
        opacity: 1; 
        transform: translateX(0px) scale(1);
    }
    25%{
        opacity: 0; 
        transform:translateX(10px) scale(0.9);
    }
    26%{
        opacity: 0; 

        transform:translateX(-10px) scale(0.9);
    }
    55% {
        opacity: 1; 
        transform: translateX(0px) scale(1);
    }
}
@-o-keyframes viewMoreAni {
    0% {
        opacity: 1; 
        transform: translateX(0px) scale(1);
    }
    25%{
        opacity: 0; 
        transform:translateX(10px) scale(0.9);
    }
    26%{
        opacity: 0; 

        transform:translateX(-10px) scale(0.9);
    }
    55% {
        opacity: 1; 
        transform: translateX(0px) scale(1);
    }
}
@keyframes viewMoreAni {
    0% {
        opacity: 1; 
        transform: translateX(0px) scale(1);
    }
    25%{
        opacity: 0; 
        transform:translateX(10px) scale(0.9);
    }
    26%{
        opacity: 0; 

        transform:translateX(-10px) scale(0.9);
    }
    55% {
        opacity: 1; 
        transform: translateX(0px) scale(1);
    }
}

/* ===== MAIN - VISUAL ===== */
#main-contents {
    position: relative;
}
.main-visual {
	position:relative;
    margin:0 auto;
    height:100vh;
}
.main-visual .visual-slider {
    overflow:hidden;
	position:absolute;
	left:50%;
	top:50%;
	width:100%;
	height:100%;
	-webkit-transform:translate(-50%, -50%);
	-moz-transform:translate(-50%, -50%);
	-ms-transform:translate(-50%, -50%);
	-o-transform:translate(-50%, -50%);
	transform:translate(-50%, -50%);  
}
.main-visual .visual-slider .swiper-slide {
	overflow:hidden;
    position:relative;
    height:100%;
}
.main-visual .visual-slider .swiper-slide .vs-bg {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
	-webkit-transform:scale(1.1);
	-moz-transform:scale(1.1);
	-ms-transform:scale(1.1);
	-o-transform:scale(1.1);
	transform:scale(1.1);   
	transition-duration:3s;
}
.main-visual .visual-slider .swiper-slide .vs-bg:after {
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:linear-gradient(90deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0.16) 100%);
}
.main-visual .visual-slider .swiper-slide .vs-txt {
    display:flex;
    flex-direction:column;
    justify-content:center;
    position:relative;
    margin:0 auto;
    max-width:150em;
    width:90%;
    height:100%;
    z-index:1;
}
.main-visual .visual-slider .swiper-slide .vs-txt h2 {
	opacity:0;
    font-size:7.5rem;
    color:#ffffff;
    font-weight:700;
	-webkit-transform:translateY(40px);
	-moz-transform:translateY(40px);
	-ms-transform:translateY(40px);
	-o-transform:translateY(40px);
	transform:translateY(40px);      
}
.main-visual .visual-slider .swiper-slide .vs-txt p {
	opacity:0;
    margin-top:1.389em;
    font-size:2.4rem;
    color:#ffffff;
    letter-spacing:-0.028em;
    line-height:1.556em;
	-webkit-transform:translateY(40px);
	-moz-transform:translateY(40px);
	-ms-transform:translateY(40px);
	-o-transform:translateY(40px);
	transform:translateY(40px);   
	font-weight:500;
}
.main-visual .visual-slider .swiper-button-prev {
    position:absolute;
    left:auto;
    right:8.5%;
    top:50%;
    z-index:10;
    margin-top:-9.5em;
    width:7em;
    height:7em;
    border-radius:50%;
    border:1px solid #fff;
    background:url(../images/common/cm-arrow-prev01.png) no-repeat center;
}
.main-visual .visual-slider .swiper-button-prev:after {
    display:none;
}
.main-visual .visual-slider .swiper-button-next {
    position:absolute;
    right:8.5%;
    top:50%;
    z-index:10;
    margin-top:-1.5em;
    width:7em;
    height:7em;
    border-radius:50%;
    border:1px solid #fff;
    background:url(../images/common/cm-arrow-next01.png) no-repeat center;
}
.main-visual .visual-slider .swiper-button-next:after {
    display:none;
}
.main-visual .visual-slider .swiper-pagination {
    position:absolute;
    right:8.5%;
    top:50%;
    left:auto;
    bottom:auto;
    z-index:10;
    margin-top:7.083em;
    width:5.833em;
    font-size:1.2rem;
    color:#ffffff;
    letter-spacing:0.333em;
    font-style:italic;
}
.main-visual .visual-slider .swiper-pagination span {
    font-style:normal;
}
.main-visual .visual-slider .swiper-slide.swiper-slide-active .vs-bg {
	-webkit-transform:scale(1);
	-moz-transform:scale(1);
	-ms-transform:scale(1);
	-o-transform:scale(1);
	transform:scale(1);
	-webkit-transition:transform 1.4s;
	-moz-transition:transform 1.4s;
	-ms-transition:transform 1.4s;
	-o-transition:transform 1.4s;
	transition:transform 1.4s;
}
.main-visual .visual-slider .swiper-slide.swiper-slide-active .vs-txt h2 {
	opacity:1;
	-webkit-transform:translateY(0);
	-moz-transform:translateY(0);
	-ms-transform:translateY(0);
	-o-transform:translateY(0);
	transform:translateY(0);
	-webkit-transition:opacity 1s, transform 1.4s;
	-moz-transition:opacity 1s, transform 1.4s;
	-ms-transition:opacity 1s, transform 1.4s;
	-o-transition:opacity 1s, transform 1.4s;
	transition:opacity 1s, transform 1.4s;		
}
	.main-visual .visual-slider .swiper-slide.swiper-slide-active .vs-txt p {
		opacity:1;
		-webkit-transform:translateY(0);
	-moz-transform:translateY(0);
	-ms-transform:translateY(0);
	-o-transform:translateY(0);
	transform:translateY(0);
	-webkit-transition:opacity 1s, transform 1.4s;
	-moz-transition:opacity 1s, transform 1.4s;
	-ms-transition:opacity 1s, transform 1.4s;
	-o-transition:opacity 1s, transform 1.4s;
	transition:opacity 1s, transform 1.4s;	
	-webkit-transition-delay:0.1s;
	-moz-transition-delay:0.1s;
	-ms-transition-delay:0.1s;
	-o-transition-delay:0.1s;
		transition-delay:0.1s;
	}


	/* ===== RESPONSIVE ===== */
@media screen and (max-width:1440px){
	.main-visual .visual-slider .swiper-slide .vs-txt h2 {
		font-size:6rem;
	}
	.main-visual .visual-slider .swiper-slide .vs-txt p {
		font-size:2rem;
	}
}
@media screen and (max-width:1200px){
	.main-tit .tit {
		font-size:4rem;
	}
    .main-visual .visual-slider .swiper-slide .vs-txt {
        margin:0 5%;
        max-width:60em;
    }
	.main-visual .visual-slider .swiper-slide .vs-txt h2 {
		font-size:5rem;
	}
	
}
@media screen and (max-width:820px){
	.main-visual .visual-slider .swiper-slide .vs-txt {
		height:55%;
		justify-content:flex-end; 
	}
	.main-visual .visual-slider .swiper-slide .vs-txt h2 {
	    font-size:3rem;
	}
	.main-visual .visual-slider .swiper-slide .vs-txt p {
		font-size:1.6rem;
	}
	.main-visual .visual-slider .swiper-pagination {
		margin:0 -40px 0 0;
		right:50%;
		top:auto;
		bottom:40%;
		width:80px;
		text-align:center;
	}
	.main-visual .visual-slider .swiper-button-prev {
		margin:0 1.5em 0 0;
		right:50%;
		top:auto;
		bottom:15%;
		width:5em;
		height:5em;
	}
	.main-visual .visual-slider .swiper-button-next {
		margin:0 -6.5em 0 0;
		right:50%;
		top:auto;
		bottom:15%;
		width:5em;
		height:5em;
	}
	
}

/* ===== MAIN - CORE VALUE ===== */
.main-values {
	overflow:hidden;
	position:relative;
	padding:12em 0 13em;
	background:#fff;
}
.main-values .value-inner {
	position:relative;
	z-index:1;
	margin:0 auto;
	max-width:140em;
	width:90%;
}
.main-values .value-head {
	text-align:center;
}
.main-values .value-eyebrow {
	display:block;
	margin-bottom:0.85em;
	font-size:1.4rem;
	color:var(--pointColor);
	font-weight:800;
	letter-spacing:0.16em;
}
.main-values .value-head h2 {
	font-size:4.6rem;
	color:var(--mainColor);
	font-weight:800;
	line-height:1.25;
}
.main-values .value-head h2 strong {
	color:var(--pointColor);
	font-weight:800;
}
.main-values .value-list {
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:5em;
	margin-top:7em;
}
.main-values .value-item {
	position:relative;
	text-align:center;
}
.main-values .value-circle {
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	position:relative;
	margin:0 auto;
	width:26em;
	height:26em;
	border-radius:50%;
	background:var(--mainColor);
	box-shadow:0 0 0 1.4em rgba(11,35,69,0.08);
	color:#fff;
}
.main-values .value-item02 .value-circle {
	background:#128fd6;
	box-shadow:0 0 0 1.4em rgba(18,143,214,0.12);
}
.main-values .value-item03 .value-circle {
	background:#22bfa6;
	box-shadow:0 0 0 1.4em rgba(34,191,166,0.13);
}
.main-values .value-num {
	display:flex;
	align-items:center;
	justify-content:center;
	position:absolute;
	left:50%;
	top:-0.95em;
	width:2.35em;
	height:2.35em;
	border:3px solid #fff;
	border-radius:50%;
	background:var(--pointColor);
	color:#fff;
	font-size:1.4rem;
	font-weight:800;
	-webkit-transform:translateX(-50%);
	-moz-transform:translateX(-50%);
	-ms-transform:translateX(-50%);
	-o-transform:translateX(-50%);
	transform:translateX(-50%);
}
.main-values .value-icon {
	width:7.2em;
	height:7.2em;
}
.main-values .value-icon svg {
	display:block;
	width:100%;
	height:100%;
}
.main-values .value-icon path,
.main-values .value-icon circle {
	fill:none;
	stroke:#fff;
	stroke-width:2.6;
	stroke-linecap:round;
	stroke-linejoin:round;
}
.main-values .value-circle h3 {
	margin-top:1.2em;
	font-size:2.2rem;
	color:#fff;
	font-weight:800;
	line-height:1.25;
}
.main-values .value-line {
	display:block;
	position:relative;
	margin:3.2em auto 0;
	width:1px;
	height:4.8em;
	background:rgba(11,35,69,0.18);
}
.main-values .value-line:after {
	content:"";
	position:absolute;
	left:50%;
	bottom:-0.45em;
	width:0.8em;
	height:0.8em;
	border-radius:50%;
	background:var(--pointColor);
	-webkit-transform:translateX(-50%);
	-moz-transform:translateX(-50%);
	-ms-transform:translateX(-50%);
	-o-transform:translateX(-50%);
	transform:translateX(-50%);
}
.main-values .value-desc {
	margin:2.4em auto 0;
	max-width:31em;
	color:#485466;
	font-size:1.6rem;
	line-height:1.72;
	word-break:keep-all;
}
.main-values .value-desc strong {
	display:block;
	margin-bottom:0.45em;
	color:var(--mainColor);
	font-size:1.8rem;
	font-weight:800;
	line-height:1.35;
}
.main-values .value-desc p {
	font-weight:500;
}


/* ===== COMPANY INTRO ===== */
.company_intro {
    padding: 100px 0;
  }
  .company_intro .txt1 {
    font-weight: 400;
    margin-top: 30px;
    font-size: 24px;
  }
  .company_intro .txt2 {
    font-size: 32px;
    font-weight: 400;

  }

  .company_intro .txt_sub{
    color: #001b72;
    font-weight: bold;
    font-size: 20px;
  }


  .company_intro ul {
    max-width: 852px;
    width: 100%;
    margin-left: auto;
  }
  .company_intro ul li {
    width: 408px;
    height: 590px;
    position: relative;
  }
  .company_intro ul li:nth-child(1), .company_intro ul li:nth-child(2) {
    color: #fff;
  }
  .company_intro ul li a {
    display: block;
    width: 100%;
    height: 100%;
    transition: all 0.5s ease;
  }
  .company_intro ul li a .text {
    position: absolute;
    bottom: 40px;
    left: 30px;
    z-index: 1;
  }
  .company_intro ul li a .text p {
    font-size: 26px;
	font-weight:bold;
  }

  .company_intro ul li a .text > span {
	font-size: 18px;
  }

  .company_intro ul li a::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #001b72;
    opacity: 0;
    z-index: 0;
    transition: opacity 0.5s ease;
    left: 0;
    top: 0;
  }
  .company_intro ul li:hover a {
    color: #fff;
  }
  .company_intro ul li:hover a::after {
    opacity: 0.76;
  }
  .company_intro ul li:nth-child(2n-1) {
    margin: 0 0 0 auto;
  }
  .company_intro ul li:nth-child(2) {
    margin-top: -345px;
  }
  .company_intro ul li:nth-child(3) {
    margin-top: -210px;
  }

  .company_intro img{
    width: 100%;
    height: 100%;
    object-fit: cover;
	filter: brightness(0.6);
  }

  .company_intro .company-intro-copy {
    position: sticky;
    top: 120px;
    z-index: 1;
    width: 360px;
  }
  .company_intro ul li a {
    color: #fff;
  }
  .company_intro ul li a .text p,
  .company_intro ul li a .text > span {
    color: #fff;
  }


  .company_intro ul li:nth-child(4) {
    margin-top: -210px;
  }
  .company_intro ul li a .text > span {
    display: block;
    margin-top: 8px;
  }
  .company_intro .desc-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    /* max-height: 0;
    margin-top: 0; */
    max-height: 120px;
    margin-top: 16px;
    overflow: hidden;
    /* opacity: 0;
    visibility: hidden;
    transition: max-height 0.35s ease, margin-top 0.35s ease, opacity 0.35s ease, visibility 0.35s ease; */
  }
  .company_intro .desc-sub span {
    padding: 6px 10px;
    border: 1px solid rgba(255,255,255,0.45);
    border-radius: 999px;
    color: #fff;
    font-size: 13px;
    line-height: 1.2;
  }
  .company_intro ul li.is-open a {
    color: #fff;
  }
  .company_intro ul li.is-open a::after {
    opacity: 0.76;
  }
  /* .company_intro ul li.is-open .desc-sub {
    max-height: 120px;
    margin-top: 16px;
    opacity: 1;
    visibility: visible;
  } */
  @media all and (max-width: 800px) {
    .company_intro .company-intro-copy {
      position: static;
      width: 100%;
    }
    .company_intro ul {
      max-width: none;
      margin-top: 40px;
      margin-left: 0;
    }
    .company_intro ul li,
    .company_intro ul li:nth-child(2n-1),
    .company_intro ul li:nth-child(2),
    .company_intro ul li:nth-child(3),
    .company_intro ul li:nth-child(4) {
      width: 100%;
      height: 260px;
      margin: 0 0 16px 0;
    }
    .company_intro ul li a {
      position: relative;
      overflow: hidden;
    }
    .company_intro ul li a .text {
      left: 22px;
      right: 22px;
      bottom: 22px;
    }
    .company_intro ul li a .text p {
      font-size: 22px;
    }
    .company_intro .desc-sub span {
      font-size: 14px;
    }
  }

    @media all and (max-width: 480px) {
		.company_intro ul li {
			width: 100%;
			height: 230px;
		}
  }



@media screen and (max-width:1440px){
	.main-values {
		padding:10em 0 11em;
	}
	.main-values .value-head h2 {
		font-size:4rem;
	}
	.main-values .value-circle {
		width:22em;
		height:22em;
	}
	.main-values .value-icon {
		width:6.3em;
		height:6.3em;
	}
	.main-values .value-circle h3 {
		font-size:2rem;
	}
}

@media screen and (max-width:1200px){
	.main-values {
		padding:9em 0 10em;
	}
	.main-values .value-list {
		gap:3.2em;
	}
	.main-values .value-circle {
		width:19em;
		height:19em;
	}
	.main-values .value-desc {
		font-size:1.45rem;
	}
	.main-values .value-desc strong {
		font-size:1.65rem;
	}
}

@media screen and (max-width:820px){
	.main-values {
		padding:7em 0 8em;
	}
	.main-values .value-inner {
		width:88%;
	}
	.main-values .value-eyebrow {
		font-size:1.2rem;
	}
	.main-values .value-head h2 {
		font-size:3.2rem;
	}
	.main-values .value-list {
		display:block;
		margin-top:5em;
	}
	.main-values .value-item + .value-item {
		margin-top:5.6em;
	}
	.main-values .value-circle {
		width:17.5em;
		height:17.5em;
		box-shadow:0 0 0 1em rgba(11,35,69,0.08);
	}
	.main-values .value-item02 .value-circle {
		box-shadow:0 0 0 1em rgba(18,143,214,0.12);
	}
	.main-values .value-item03 .value-circle {
		box-shadow:0 0 0 1em rgba(34,191,166,0.13);
	}
	.main-values .value-icon {
		width:5.2em;
		height:5.2em;
	}
	.main-values .value-circle h3 {
		font-size:1.65rem;
	}
	.main-values .value-line {
		margin-top:2.4em;
		height:3.6em;
	}
	.main-values .value-desc {
		margin-top:2em;
		max-width:34em;
		font-size:1.4rem;
		line-height:1.65;
	}
	.main-values .value-desc strong {
		font-size:1.55rem;
	}
}



/* ===== MAIN - WHY ===== */
#main-why {
	position:relative;
	z-index:5;
	isolation:isolate;
	padding:16rem 0 12rem;
	background:#fff;
}
#main-why > .inner {
	margin:0 auto;
	max-width:150rem;
	width:90%;
}
#main-why .main-tit-box {
	text-align:left;
}
#main-why .main-tit {
	font-size:2rem;
	color:var(--pointColor);
	font-weight:800;
	letter-spacing:0;
}
#main-why .main-sub-tit {
	margin-top:0.55em;
	color:#101010;
	font-size:6rem;
	font-weight:800;
	line-height:1.18;
	letter-spacing:0;
	word-break:keep-all;
}
#main-why .main-txt {
	margin-top:1.65em;
	color:#6f7781;
	font-size:2rem;
	font-weight:500;
	line-height:1.6;
	word-break:keep-all;
}
.main-prd-img-box {
	position:relative;
	background:#000;
}
.prd-hover-bg {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	border-radius:6rem 0 6rem 0;
	overflow:hidden;
}

.prd-hover-bg:after{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:#000;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.4s;
}
.prd-hover-bg.is-dimmed:after {
	opacity:0.3;
}

.prd-hover-bg .list-item {
	position:absolute;
	width:100%;
	height:calc(100% + 20rem);
	top:-20rem;
	left:0;
	background:no-repeat;
	background-size:cover;
	opacity:0;
	-webkit-transition:opacity 0.4s;
	-moz-transition:opacity 0.4s;
	-ms-transition:opacity 0.4s;
	-o-transition:opacity 0.4s;
	transition:opacity 0.4s;
}
.prd-cover-list {
	position:relative;
	display:flex;
	overflow:hidden;
	margin-top:14rem;
}
.prd-cover-list .list-item {
	position:relative;
	width:25%;
}
.prd-cover-list .list-item a {
	display:block;
	position:relative;
	overflow:hidden;
	color:#fff;
}
.prd-cover-list .list-item .bg {
	position:absolute;
	width:100%;
	height:calc(100% + 20rem);
	top:-20rem;
	left:0;
	background-repeat:no-repeat !important;
	background-size:cover !important;
	-webkit-transition:opacity 0.4s;
	-moz-transition:opacity 0.4s;
	-ms-transition:opacity 0.4s;
	-o-transition:opacity 0.4s;
	transition:opacity 0.4s;
}
.prd-cover-list .list-item .bg:after{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:#000;
    opacity:0.3;
}
.prd-cover-list .list-item .inner {
	position:relative;
	z-index:1;
	width:100%;
	height:0;
	padding-top:205.26%;
}
.prd-cover-list .list-item .inner:before {
	position:absolute;
	content:"";
	width:100%;
	height:100px;
	background:#fff;
	left:0;
	top:0;
}
.prd-cover-list .list-item .inner:after {
	position:absolute;
	content:"";
	width:100%;
	height:100px;
	background:#fff;
	left:0;
	bottom:0;
}
.prd-cover-list .list-item .line {
	position:absolute;
	content:"";
	left:0;
	top:0;
	width:1px;
	height:100%;
	background:#fff;
}
.prd-cover-list .list-item:first-child .line {
	display:none;
}
.prd-cover-list .list-item .plus {
	position:absolute;
	width:9rem;
	height:9rem;
	background:#fff;
	background:radial-gradient(circle at 0 0, transparent 71%, #fff 72%);
}
.prd-cover-list .list-item:nth-child(1) .plus {
	top:99px;
	left:0;
	-webkit-transform:rotate(180deg);
	-moz-transform:rotate(180deg);
	-ms-transform:rotate(180deg);
	-o-transform:rotate(180deg);
	transform:rotate(180deg);
}
.prd-cover-list .list-item:nth-child(4) .plus {
	right:0;
	bottom:99px;
}
.prd-cover-list .list-item .txt-box {
	position:absolute;
	left:0;
	bottom:0;
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
	width:100%;
	height:calc(100% - 100px);
	padding:6rem;
	box-sizing:border-box;
}
.prd-cover-list .list-item:nth-child(even) .txt-box {
	bottom:100px;
}
.prd-cover-list .list-item:nth-child(even) .inner:before {
	top:-100px;
}
.prd-cover-list .list-item:nth-child(odd) .inner:after {
	bottom:-100px;
}
.prd-cover-list .list-item .txt-box .num {
	color:var(--pointColor);
	font-size:1.6rem;
	font-weight:800;
}
.prd-cover-list .list-item .txt-box .tit {
	margin-top:0.55em;
	color:#fff;
	font-size:3.8rem;
	font-weight:700;
	line-height:1.25;
	letter-spacing:0;
	word-break:keep-all;
}
.prd-cover-list .list-item .txt-box .txt {
	margin-top:1.3em;
	color:#fff;
	font-size:1.55rem;
	font-weight:500;
	line-height:1.7;
	letter-spacing:0;
	word-break:keep-all;
}
.prd-cover-list .list-item:nth-child(1) .bg,
.prd-hover-bg .list-item:nth-child(1) {
	background-image:url('../images/main/service-fire.jpg');
	background-position:center center;
}
.prd-cover-list .list-item:nth-child(2) .bg,
.prd-hover-bg .list-item:nth-child(2) {
	background-image:url('../images/main/service-special-cleaning.jpg');
	background-position:33.33% center;
}
.prd-cover-list .list-item:nth-child(3) .bg,
.prd-hover-bg .list-item:nth-child(3) {
	background-image:url('../images/main/service-restoration.jpg');
	background-position:66.66% center;
}
.prd-cover-list .list-item:nth-child(4) .bg,
.prd-hover-bg .list-item:nth-child(4) {
	background-image:url('../images/main/service-emergency.jpg');
	background-position:100% center;
}

@media all and (max-width:1280px){
	#main-why {
		padding:12rem 0 9rem;
	}
	#main-why .main-sub-tit {
		font-size:4.6rem;
	}
	.prd-cover-list .list-item .txt-box {
		padding:3.2rem;
	}
	.prd-cover-list .list-item .txt-box .tit {
		font-size:2.8rem;
	}
}


@media all and ( max-width: 800px ){
	.main-prd-img-box{background:#fff;}
	.prd-cover-list{display:block; width:100%; overflow:visible; margin-top:5rem;}
	.prd-cover-list .list-item{width:100%; margin-bottom:1.2rem;}
	.prd-cover-list .list-item a{width:100%; height:16rem;}
	.prd-cover-list .list-item .bg{width:100%; height:100%; top:0; left:0; background-size:cover !important; background-position:center !important; transform:none !important;}
	.prd-cover-list .list-item .inner{width:100%; height:16rem; padding-top:0; transform:none !important;}
	.prd-cover-list .list-item .inner .plus,
	.prd-cover-list .list-item .inner .line{display:none;}
	.prd-cover-list .list-item .inner:before,
	.prd-cover-list .list-item .inner:after{display: none;}
	.prd-cover-list .list-item .inner .txt-box{top:0 !important; bottom:auto !important; height:16rem; padding:0 4rem; justify-content:center;}
	.prd-cover-list .list-item .inner .txt-box .txt{display: none;}
}

/* ===== MAIN FIELD REVIEW ===== */
#main-field {
	position:relative;
	overflow:hidden;
	padding:12rem 0 11rem;
	background:#fff;
	color:#111;
}
#main-field:before {
	display:none;
}
.main-field-head {
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:4rem;
	margin-bottom:4.8rem;
}
.field-kicker {
	display:block;
	margin-bottom:1.2rem;
	color:var(--pointColor);
	font-size:1.5rem;
	font-weight:900;
	letter-spacing:0.08em;
}
.main-field-head h3 {
	color:var(--mainColor);
	font-size:5.2rem;
	font-weight:900;
	line-height:1.15;
	letter-spacing:-0.03em;
}
.main-field-head p {
	margin-top:1.6rem;
	color:#111;
	font-size:1.8rem;
	font-weight:500;
	line-height:1.6;
	letter-spacing:-0.02em;
}
.field-slider-control {
	display:flex;
	gap:1rem;
	flex:0 0 auto;
}
.field-slider-control button {
	display:flex;
	align-items:center;
	justify-content:center;
	width:5.6rem;
	height:5.6rem;
	border:1px solid #d8e2ee;
	border-radius:50%;
	background:#fff;
	color:var(--mainColor);
	font-size:2.4rem;
	box-shadow:0 1rem 2.4rem rgba(11,35,69,0.08);
	transition:background-color 0.25s, border-color 0.25s, color 0.25s;
}
.field-slider-control button:hover {
	border-color:var(--mainColor);
	background:var(--mainColor);
	color:#fff;
}
.field-slider {
	overflow:visible;
	padding-bottom:0.6rem;
}
.field-slider .swiper-slide {
	width:calc((100% - 8.8rem) / 3);
	height:auto;
}
.field-ba-card {
	overflow:hidden;
	display:grid;
	grid-template-columns:1fr;
	height:100%;
	min-height:0;
	border:1px solid #ddd;
	background:#fff;
	border-radius:1rem;
	/* box-shadow:0 2.4rem 5.2rem rgba(11,35,69,0.11); */
}
.ba-visual {
	position:relative;
	overflow:hidden;
	--ba-position:50%;
	min-height:0;
	aspect-ratio:16 / 11;
	background:#111;
	cursor:ew-resize;
}
.ba-panel {
	position:absolute;
	inset:0;
	min-height:0;
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
}
.ba-panel.after {
	z-index:1;
}
.ba-panel.before {
	z-index:2;
	clip-path:inset(0 calc(100% - var(--ba-position)) 0 0);
}
.ba-panel:after {
	position:absolute;
	inset:0;
	background:linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.42));
	content:"";
}
.ba-label {
	position:absolute;
	left:2.4rem;
	bottom:2.4rem;
	z-index:1;
	display:flex;
	align-items:center;
	justify-content:center;
	min-width:10.5rem;
	height:4.2rem;
	padding:0 2rem;
	border-radius:4.2rem;
	background:#fff;
	color:var(--mainColor);
	font-size:1.7rem;
	font-weight:900;
}
.ba-panel.after .ba-label {
	left:auto;
	right:2.4rem;
	background:var(--pointColor);
	color:#fff;
}
.ba-divider {
	position:absolute;
	left:var(--ba-position);
	top:50%;
	z-index:3;
	display:flex;
	align-items:center;
	justify-content:center;
	width:5.2rem;
	height:5.2rem;
	border:0.4rem solid #fff;
	border-radius:50%;
	background:var(--pointColor);
	color:#fff;
	font-size:2.2rem;
	transform:translate(-50%, -50%);
	box-shadow:0 1rem 2.4rem rgba(0,0,0,0.22);
	pointer-events:none;
}
.ba-divider:before,
.ba-divider:after {
	position:absolute;
	left:50%;
	width:0.3rem;
	height:24rem;
	background:#fff;
	content:"";
	transform:translateX(-50%);
	box-shadow:0 0 1.2rem rgba(0,0,0,0.2);
}
.ba-divider:before {
	bottom:100%;
}
.ba-divider:after {
	top:100%;
}
.ba-range {
	position:absolute;
	inset:0;
	z-index:4;
	width:100%;
	height:100%;
	margin:0;
	opacity:0;
	cursor:ew-resize;
}
@media all and (max-width: 799px) {
	.ba-range {
		touch-action:none;
		overscroll-behavior:contain;
	}

	body.ba-range-dragging {
		overflow:hidden;
		touch-action:none;
	}
}
.field-ba-info {
	display:flex;
	flex-direction:column;
	justify-content:center;
	gap:1.4rem;
	padding:2.4rem;
	border-top:1px solid #e5eaf0;
	color:var(--mainColor);
}
.field-type {
	display:inline-flex;
	align-items:center;
	align-self:flex-start;
	height:3.4rem;
	padding:0 1.4rem;
	border-radius:3.4rem;
	background:#fff4e9;
	color:var(--pointColor);
	font-size:1.4rem;
	font-weight:900;
}
.field-ba-info h4 {
	margin-top:0;
	color:var(--mainColor);
	font-size:2.3rem;
	font-weight:900;
	line-height:1.28;
	letter-spacing:-0.03em;
	word-break:keep-all;
}
.field-slider-pagination {
	display:flex;
	justify-content:center;
	gap:0.8rem;
	margin-top:3rem;
}
.field-slider-pagination .swiper-pagination-bullet {
	width:0.9rem;
	height:0.9rem;
	margin:0 !important;
	background:rgba(11,35,69,0.22);
	opacity:1;
}
.field-slider-pagination .swiper-pagination-bullet-active {
	width:3rem;
	border-radius:1rem;
	background:var(--mainColor);
}
.field-system-panel {
	display:grid;
	gap:7rem;
	margin-top:7rem;
}
.field-equipment-section,
.field-step-section {
	padding:0;
	color:var(--mainColor);
}
.field-system-head,
.field-step-head {
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:2rem;
	margin-bottom:2.6rem;
	padding-bottom:1.8rem;
	text-align:left;
}
.field-system-head span,
.field-step-head span {
	display:block;
	margin-bottom:0.8rem;
	color:var(--pointColor);
	font-size:1.4rem;
	font-weight:900;
	letter-spacing:0.12em;
}
.field-system-head h4,
.field-step-head h4 {
	color:var(--mainColor);
	font-size:3.4rem;
	font-weight:900;
	line-height:1.25;
	letter-spacing:-0.03em;
}
.field-step-list {
	display:grid;
	grid-template-columns:repeat(5, minmax(0, 1fr));
	gap:1.4rem;
}
.field-step-list li {
	position:relative;
	overflow:hidden;
	min-height:13.8rem;
	padding:2rem 1.4rem 1.8rem;
	border:1px solid #dbe4ee;
	background:transparent;
	border-radius:0.8rem;
	text-align:center;
}
.field-step-list .step-num {
	display:block;
	margin-bottom:0.8rem;
	border-radius:2.8rem;
	color:var(--pointColor);
	font-size:1.2rem;
	font-weight:900;
	letter-spacing:0.06em;
}
.field-step-list strong {
	display:block;
	min-height:4.6rem;
	color:var(--mainColor);
	font-size:1.85rem;
	font-weight:900;
	line-height:1.28;
	letter-spacing:-0.03em;
}
.step-iconset {
	display:flex;
	align-items:center;
	justify-content:center;
	gap:0.6rem;
	margin-top:1.4rem;
	min-height:4.6rem;
}
.step-iconset img {
	display:block;
	flex:0 0 4.2rem;
	width:4.2rem;
	height:4.2rem;
	object-fit:contain;
}
.field-equipment-list {
	display:grid;
	grid-template-columns:repeat(6, minmax(0, 1fr));
	gap:0;
	border-top:1px solid #dbe4ee;
	border-bottom:1px solid #dbe4ee;
}
.field-equipment-list li {
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	min-height:16rem;
	padding:2.6rem 1.6rem 2.2rem;
	border-right:1px solid #dbe4ee;
	text-align:center;
}
.field-equipment-list li:last-child {
	border-right:0;
}
.equipment-num {
	position:absolute;
	left:1.4rem;
	top:1.3rem;
	color:rgba(11,35,69,0.34);
	font-size:1.3rem;
	font-weight:900;
	letter-spacing:0.06em;
}
.equipment-icon {
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	width:12rem;
	height:8rem;
	margin-bottom:1.4rem;
}
.equipment-icon img {
	display:block;
	width:100%;
	height:100%;
	object-fit:contain;
}
.field-equipment-list strong {
	display:block;
	color:#000;
	font-size:1.8rem;
	font-weight:900;
	line-height:1.35;
	letter-spacing:-0.03em;
}

@media all and (max-width:1280px){
	#main-field {
		padding:10rem 0;
	}
	.field-slider .swiper-slide {
		width:calc((100% - 3.2rem) / 2);
	}
	.field-ba-card {
		grid-template-columns:1fr;
		min-height:0;
	}
	.field-ba-info {
		gap:1.4rem;
		border-top:1px solid #e5eaf0;
		border-left:0;
	}
	.field-equipment-list {
		grid-template-columns:repeat(3, minmax(0, 1fr));
	}
	.field-equipment-list li:nth-child(3n) {
		border-right:0;
	}
	.field-equipment-list li:nth-child(n+4) {
		border-top:1px solid #dbe4ee;
	}
	.field-step-list {
		grid-template-columns:repeat(3, minmax(0, 1fr));
	}
}

@media all and (max-width:800px){
	#main-field {
		padding:7rem 0;
	}
	.main-field-head {
		display:block;
		margin-bottom:3rem;
	}
	.main-field-head h3 {
		font-size:3.6rem;
	}
	.main-field-head p {
		font-size:1.6rem;
	}
	.field-slider-control {
		margin-top:2.4rem;
	}
	.field-slider {
		overflow:hidden;
	}
	.field-slider .swiper-slide {
		width:100%;
	}
	.field-slider-control button {
		width:4.8rem;
		height:4.8rem;
		font-size:2rem;
	}
	.field-ba-card,
	.ba-visual,
	.ba-panel {
		min-height:auto;
	}
	.ba-visual {
		aspect-ratio:16 / 10;
	}
	.ba-panel {
		min-height:0;
	}
	.ba-divider {
		top:50%;
		width:4.8rem;
		height:4.8rem;
		font-size:2rem;
	}
	.field-ba-info {
		padding:2.6rem;
	}
	.field-ba-info h4 {
		font-size:2.2rem;
	}
	.field-system-panel {
		margin-top:5rem;
		gap:5rem;
	}
	.field-equipment-section,
	.field-step-section {
		padding:0;
	}
	.field-system-head h4,
	.field-step-head h4 {
		font-size:2.6rem;
	}
	.field-equipment-list {
		grid-template-columns:1fr 1fr;
	}
	.field-equipment-list li {
		min-height:14.8rem;
		padding:2.4rem 1.2rem 2rem;
	}
	.field-equipment-list li,
	.field-equipment-list li:nth-child(3n) {
		border-right:1px solid #dbe4ee;
	}
	.field-equipment-list li:nth-child(2n) {
		border-right:0;
	}
	.field-equipment-list li:nth-child(n+3) {
		border-top:1px solid #dbe4ee;
	}
	.equipment-icon {
		width:10rem;
		height:6.8rem;
	}
	.field-equipment-list strong {
		font-size:1.7rem;
	}
	.field-step-head {
		display:block;
	}
	.field-step-list {
		grid-template-columns:1fr 1fr;
	}
	.field-step-list li {
		min-height:auto;
		padding:2rem;
	}
	.field-step-list strong {
		font-size:1.9rem;
	}
	.step-iconset {
		gap:0.4rem;
	}
	.step-iconset img {
		flex-basis:3.2rem;
		width:3.2rem;
		height:3.2rem;
	}
}