@charset "UTF-8";

.system2 .title1 {text-align: center; margin-bottom: 4.5rem;}
.system2 .text2 {line-height: 1.5; white-space: pre-line;}

.system2 img {display: block;}

.detergent, .soap, .disposal-bin {background: #F0F9FF; border-top: 1px solid #A8E1FF; border-bottom: 1px solid #A8E1FF;}
.sub-page>*:first-child {border-top: 0;}

.ul-info {width: 100%; max-width: 1200px; margin: 0 auto; display: -webkit-flex; display: flex; justify-content: end; align-items: start;}
.ul-info .img-area {display: -webkit-flex; display: flex; justify-content: start; align-items: center; flex-direction: column; gap: 36px; -webkit-flex-shrink: 0; flex-shrink: 0; margin: 0 auto;}
.ul-info .txt-area {width: 65%;}

.eco {display: -webkit-flex; display: flex; justify-content: start; align-items: center;}
.mark-eco {height: 6.25rem; position: relative;}
.mark-eco img {width: 100%; height: 100%; object-fit: contain;}
.img-area .title2 .tint1 {color: #147CC2;}
.img-area .title2 .tint2 {color: #51A844;}

.product {display: -webkit-flex; display: flex; justify-content: center; align-items: center;}
.product img {max-width: 100%; height: 12.5rem; object-fit: contain; filter: drop-shadow(0 0 8px var(--shadow));}

.txt-area .title2 {color: #1941B2; margin-bottom: 12px;}
.txt-area .text2 + .title2 {margin-top: 26px;}
.ul-txt>.text2 {display: -webkit-flex; display: flex; justify-content: start; align-items: start;}
.ul-txt>.text2::before {content: ''; display: block; width: 7px; height: 7px; border-radius: 50%; background: #9CD6DF; -webkit-flex-shrink: 0; flex-shrink: 0;}

/* .ul-icon {margin-top: 3.125rem; display: -webkit-flex; display: flex; justify-content: start; align-items: center;}
.ul-icon .circle {width: 7rem; height: 7rem; display: -webkit-flex; display: flex; justify-content: center; align-items: center; border-radius: 50%; background: #FFFFFF; border: 2px dashed #0ACFB4; -webkit-flex-shrink: 0; flex-shrink: 0;} */
.ul-icon {margin-top: 3.125rem; display: grid; grid-template-columns: repeat(4, 7rem); justify-content: start; align-items: center;}
.ul-icon .circle {height: 7rem; display: -webkit-flex; display: flex; justify-content: center; align-items: center; border-radius: 50%; background: #FFFFFF; border: 2px dashed #0ACFB4;}
.ul-icon .circle img {object-fit: contain;}


.air-freshener .ul-info {margin-bottom: 50px;}

.ul-diagram {display: grid; justify-content: center; margin-bottom: 4.5rem;}
.ul-diagram01 {display: grid; justify-content: center; margin-bottom: 1rem;}
.ul-diagram .title3 {padding: 10px 24px; background: #147CC2; border-radius: 10px 10px 0px 0px; color: #FFFFFF; text-align: center;}
.ul-diagram .text3 {height: calc(100% - 1.25rem*1.2 - 20px); padding: 2rem 1.5rem; display: -webkit-flex; display: flex; justify-content: center; align-items: center; background: #F0F9FF; border: 1px solid #A8E1FF; border-radius: 0px 0px 10px 10px; text-align: center;}

.air-freshener .title2 {color: #1941B2; text-align: center;}

.report {display: -webkit-flex; display: flex; justify-content: center; align-items: start;}
.report img {object-fit: contain;}





@media screen and (max-width:1200px){
	.system2 {padding-left: 0; padding-right: 0;}

	.detergent, .soap, .disposal-bin, .air-freshener, .seat-cleaner {padding-left: 36px; padding-right: 36px;}
}

@media screen and (min-width:993px){
	.system2 {padding-top: 0; padding-bottom: 0;}

	.detergent, .soap, .disposal-bin {padding-top: 80px; padding-bottom: 80px;}

	.ul-info {gap: 100px;}
	.ul-info .txt-area {max-width: 779px;}

	.eco {gap: 24px;}

	.product {gap: 24px;}

	.ul-txt>.text2 {gap: 10px;}
	.ul-txt>.text2::before {margin: 8.5px 0;}

	.ul-icon {gap: 24px;}
	.ul-icon .circle:first-child img {width: 57.23px; height: 56.38px;}
	.ul-icon .circle:nth-child(2) img {width: 53.76px; height: 61.69px;}
	.ul-icon .circle:nth-child(3) img {width: 84.88px; height: 60.13px;}
	.ul-icon .circle:nth-child(4) img {width: 67.79px; height: 36.05px;}


	.air-freshener, .seat-cleaner {padding-top: 120px; padding-bottom: 120px;}
	.ul-diagram {gap: 24px;}

	.report {gap: 40px; margin-top: 40px;}
	.report img {width: calc((100% - 80px)/3); max-width: 270px;}
}

@media screen and (max-width:992px){
	.system2 {padding-top: 0; padding-bottom: 0;}

	.detergent, .soap, .disposal-bin {padding-top: 60px; padding-bottom: 60px;}

	.ul-info {gap: 80px;}

	.eco {gap: 16px;}

	.product {gap: 16px;}

	.ul-txt>.text2 {gap: 8px;}
	.ul-txt>.text2::before {margin: 7px 0;}

	.ul-icon {gap: 16px;}
	.ul-icon .circle:first-child img {width: 45.784px; height: 45.104px;}
	.ul-icon .circle:nth-child(2) img {width: 43.008px; height: 49.352px;}
	.ul-icon .circle:nth-child(3) img {width: 67.904px; height: 48.104px;}
	.ul-icon .circle:nth-child(4) img {width: 54.232px; height: 28.84px;}


	.air-freshener, .seat-cleaner {padding-top: 100px; padding-bottom: 100px;}
	.ul-diagram {gap: 16px;}

	.report {gap: 36px; margin-top: 36px;}
	.report img {width: calc((100% - 72px)/3); max-width: 200px;}
}

@media screen and (min-width:769px) and (max-width:992px){
	.ul-info .txt-area {max-width: 564px;}
}

@media screen and (min-width:769px){
	.ul-diagram {grid-template-columns: repeat(4, 1fr);}
}

@media screen and (max-width:768px){
	.system2 .text2 {text-align: center;}

	.detergent, .soap, .disposal-bin, .air-freshener, .seat-cleaner {padding-left: 32px; padding-right: 32px;}

	.ul-info {align-items: center; flex-direction: column;}
	.ul-info .txt-area {width: 100%;}

	.txt-area .title2 {text-align: center;}
	.ul-txt>.text2 {justify-content: center;}

	.ul-icon {justify-content: center;}

	.ul-diagram {grid-template-columns: repeat(2, 1fr);}

	.report {flex-wrap: wrap; gap: 32px; margin-top: 32px;}
	.report img {width: calc((100% - 32px)/2); max-width: 200px;}
}

@media screen and (max-width:480px){
	.system2 {padding-top: 0; padding-bottom: 0;}

	.detergent, .soap, .disposal-bin, .air-freshener, .seat-cleaner {padding-left: 16px; padding-right: 16px;}

	.detergent, .soap, .disposal-bin {padding-top: 54px; padding-bottom: 54px;}

	.ul-info {gap: 60px;}

	.eco {gap: 12px;}

	.product {gap: 12px;}

	.ul-txt>.text2 {gap: 6px;}
	.ul-txt>.text2::before {margin: 5.5px 0;}

	/* .ul-icon {gap: 12px; flex-wrap: wrap;} */
	.ul-icon {grid-template-columns: repeat(2, 7rem); gap: 12px;}
	.ul-icon .circle:first-child img {width: 36.6272px; height: 36.0832px;}
	.ul-icon .circle:nth-child(2) img {width: 34.4064px; height: 39.4816px;}
	.ul-icon .circle:nth-child(3) img {width: 54.3232px; height: 38.4832px;}
	.ul-icon .circle:nth-child(4) img {width: 43.3856px; height: 23.072px;}


	.air-freshener, .seat-cleaner {padding-top: 80px; padding-bottom: 80px;}
	.ul-diagram {grid-template-columns: unset; gap: 12px;}

	.report {gap: 16px; margin-top: 24px;}
	.report img {width: calc((100% - 16px)/2);}
}