/* 제품 상세 설명 (공통) */
h6{ font-size: 3.2rem; font-weight: 600; color: #212121; letter-spacing: -0.02em; margin-bottom: 40px; }
.left{ text-align: left !important; }
.center-title{ font-size: 4rem; font-weight: 700; color: #212121; letter-spacing: -0.02em; margin-bottom: 40px; text-align: center; }
.dashed{ border: 2px dashed #6096BA; padding: 80px 60px; text-align: center; }
.blueBg{ position: relative; z-index: 10; }
.blueBg::before{ content: ""; width: 100vw; height: 100%; background: #F4F6F9; position: absolute; top: 0; left: 50%; z-index: -1; transform: translateX(-50%); }


.blue-box{ background: var(--grayBg); padding: 60px; text-align: center; margin-bottom: 100px; }
.blue-box h5{ font-size: 4rem; font-weight: 700; color: #212121; letter-spacing: -0.02em; margin-bottom: 20px; }
.blue-box p{ font-size: 1.8rem; font-weight: 400; color: #444; letter-spacing: -0.02em; line-height: 1.6; }


.product-box h4{ font-size: 5.4rem; font-weight: 700; color: var(--mainColor); letter-spacing: -0.02em; margin-bottom: 20px; text-align: center; }
.product-box p{ font-size: 2.2rem; font-weight: 400; color: #444; line-height: 1.6; letter-spacing: -0.02em; text-align: center; }
.product-box figure{ display: block; max-width: max-content; width: 100%; border: 1px solid #DDD; margin: 0 auto; text-align: center; }
.product-box figure.none{ border: none; }


.features{ position: relative; z-index: 20; padding-top: 45px; }
.features::before{ content: ""; display: block; max-width: 1500px; width: 100%; margin: 0 auto; padding-bottom: 16%; background: url("/img/sub/product/detail_feature.svg") no-repeat top center / contain; position: relative; z-index: -5; margin-bottom: -5%; }


.features .dl-box{ max-width: 800px; margin: 0 auto; }
.features .dl-box dl{ background: #fff; border: 2px dashed #5FA8D3; padding: 25px 35px; }
.features .dl-box dl:not(:last-of-type){ margin-bottom: 20px; }
.features .dl-box dl dt{ font-size: 2.2rem; font-weight: 600; color: #212121; }
.features .dl-box dl dd{ font-size: 1.8rem; font-weight: 300; color: #666; letter-spacing: -0.02em; line-height: 1.5; padding-left: 12px; position: relative; }
.features .dl-box dl dd:first-of-type{ margin-top: 10px; }
.features .dl-box dl dd::before{ content: "-"; position: absolute; top: 0; left: 0; }
.features .dl-box dl dd.none{ padding-left: 0; }
.features .dl-box dl dd.none::before{ display: none; }


.flex-dl .item{ display: flex; align-items: center; background: #fff; border: 2px dashed #6096BA; padding: 70px 140px; }
.flex-dl .item:not(:last-of-type){ margin-bottom: 105px; }
.flex-dl .item .figure{ width: 720px; }
.flex-dl .item .dl{ width: calc(100% - 720px); padding-left: 80px; text-align: left; }
.flex-dl .item .dl dl:not(:last-of-type){ margin-bottom: 80px; }
.flex-dl .item .dl dl dt{ font-size: 3.2rem; font-weight: 700; color: #212121; letter-spacing: -0.02em; margin-bottom: 20px; }
.flex-dl .item .dl dl dd{ font-size: 1.8rem; font-weight: 300; color: #444; letter-spacing: -0.02em; line-height: 1.5; padding-left: 12px; position: relative; }
.flex-dl .item .dl dl dd::before{ content: "-"; position: absolute; top: 0; left: 0; }
.flex-dl .item .dl dl dd.none{ padding-left: 0; }
.flex-dl .item .dl dl dd.none::before{ display: none; }


.color-table{ overflow-x: auto; overflow-y: clip; padding-bottom: 1px; }
.color-table::-webkit-scrollbar{ width: 24px; height: 24px; }
.color-table::-webkit-scrollbar-thumb{ background: var(--mainColor); background-clip: padding-box; border: 7px solid transparent; border-radius: 100px; }
.color-table::-webkit-scrollbar-track{ background: #E9E9E9; background-clip: padding-box; border: 7px solid transparent; border-radius: 100px; }
.color-table table{ border-top: 2px solid rgba(95, 168, 211, 1); }
.color-table colgroup col.th{ width: 240px; }
.color-table tr > *:last-of-type{ border-right: none; }
.color-table th, .color-table td{ border: 1px solid rgba(95, 168, 211, 0.2); border-left: none; padding: 20px 30px; }
.color-table th{ background: #EBF5FB; }
.color-table thead th{ border-top: 1px solid rgba(95, 168, 211, 1); }
.color-table tbody th{ text-align: left; }
.color-table td{ background: #fff; padding: 20px; }


.process-diagram{ display: flex; flex-wrap: wrap; text-align: center; margin-bottom: -70px; }
.process-diagram .item{ display: flex; flex-direction: column; width: calc((100% - 40px) / 3); margin-right: 20px; margin-bottom: 70px; position: relative; }
.process-diagram .item:nth-of-type(3n){ margin-right: 0; }
.process-diagram .item .arrow{ width: 175px; height: 122px; font-size: 2.6rem; font-weight: 600; color: #fff; letter-spacing: -0.02em; display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; right: 0; z-index: 10; transform: translate(50%, -50%); }
.process-diagram .item .arrow::before{ content: ""; width: 100%; height: 100%; background: url("/img/sub/product/process_diagram.svg") no-repeat center center / contain; position: absolute; top: 0; right: 0; z-index: -2; }
.process-diagram .tit{ background: rgba(95, 168, 211, 0.1); border-top: 2px solid rgba(95, 168, 211, 1); font-family: var(--engFont); padding: 30px; }
.process-diagram .tit p{ font-size: 2.6rem; font-weight: 500; color: #212121; letter-spacing: -0.02em; }
.process-diagram .tit span{ display: block; font-size: 2.2rem; font-weight: 400; color: #666; letter-spacing: -0.02em; margin-top: 10px; }
.process-diagram figure{ padding: 40px 0; position: relative; }
.process-diagram .border{ display: flex; align-items: center; flex: 1 0 auto; border: 1px solid #5FA8D3; padding: 25px; }
.process-diagram .border p{ width: 100%; font-size: 2.2rem; font-weight: 500; color: #212121; letter-spacing: -0.02em; line-height: 1.5; }


.gallery-list ul{ display: flex; flex-wrap: wrap; margin-bottom: -80px; }
.gallery-list ul li{ width: calc((100% - 80px) / 2); margin-right: 80px; margin-bottom: 80px; }
.gallery-list ul li:nth-of-type(2n){ margin-right: 0; }
.gallery-list.white ul li{ background: #fff; }
.gallery-list ul li .text{ background: rgba(90, 90, 90, 0.1); padding: 20px; text-align: center; }
.gallery-list ul li .text p{ font-size: 2.2rem; font-weight: 600; color: #212121; letter-spacing: -0.02em; }
.gallery-list ul li .text + figure{ border: 1px solid rgba(95, 168, 211, 0.2); }
.gallery-list ul li .figcaption{ font-size: 2.2rem; font-weight: 400; color: #444; letter-spacing: -0.02em; margin-top: 15px; text-align: center; }

.gallery-list ul.flex li{ display: flex; flex-direction: column; }
.gallery-list ul.flex li figure{ flex: 1 0 auto; }

.gallery-list ul.wide li{ width: calc(45% - 80px); }
.gallery-list ul.wide li.big{ width: 55%; }

.gallery-list ul li.blue{ border: 1px solid var(--mainColor); }
.gallery-list ul li.blue .text{ background: rgba(95, 168, 211, 0.1); }
.gallery-list ul li.blue figure{ border: none; }


.gallery-list.three ul{ margin-bottom: -30px; }
.gallery-list.three ul li{ width: calc((100% - 60px) / 3); margin-right: 30px; margin-bottom: 30px; }
.gallery-list.three ul li:nth-of-type(3n){ margin-right: 0; }


.gallery-box{ display: flex; flex-wrap: wrap; justify-content: space-between; }
.gallery-box .item{ width: calc((100% - 140px) / 2); }
.gallery-box .item h6{ margin-bottom: 20px; text-align: left; }
.gallery-box .item p{ font-size: 1.8rem; font-weight: 300; color: #444; letter-spacing: -0.02em; line-height: 1.5; text-align: left; }
.gallery-box .item figure{ border: none; margin-top: 40px; }


.border-box{ display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px solid #CCC; padding: 50px; }
.border-box dl{ width: 100%; }
.border-box dl dt{ font-size: 3.2rem; font-weight: 600; color: #212121; letter-spacing: -0.02em; margin-bottom: 20px; }
.border-box dl dd{ font-size: 1.8rem; font-weight: 300; color: #444; padding-left: 12px; position: relative; }
.border-box dl dd:not(:last-of-type){ margin-bottom: 10px; }
.border-box dl dd::before{ content: "-"; position: absolute; top: 0; left: 0; }
.border-box figure{ text-align: center; }
.border-box figure figcaption{ font-size: 2.4rem; font-weight: 600; color: #222; letter-spacing: -0.02em; }
.border-box figure figcaption + img{ margin: 40px 0; }
.border-box p{ font-size: 1.8rem; font-weight: 400; color: #212121; letter-spacing: -0.02em; line-height: 1.6; margin-top: 20px; }


.gallery-list .border-box{ padding: 60px 45px; }


.arrow-graph .scroll-bar{ overflow-x: auto; overflow-y: clip; padding-bottom: 1px; }
.arrow-graph .scroll-bar img{ min-width: 1100px; }
.arrow-graph .center{ margin-top: 30px; text-align: center; }
.arrow-graph .center figure{ border: 1px solid #CCC; }
.arrow-graph .center p{ font-size: 2.8rem; font-weight: 600; color: #000; letter-spacing: -0.02em; margin-top: 20px; }


.keyword{ display: flex; flex-wrap: wrap; margin-bottom: -40px; }
.keyword .box{ width: calc((100% - 80px) / 3); border-radius: 20px; margin-right: 40px; margin-bottom: 40px; padding: 40px; text-align: center; }
.keyword .box:nth-of-type(3n){ margin-right: 0; }
.keyword dl dt{ font-family: var(--engFont); font-size: 5.4rem; font-weight: 700; color: #000; letter-spacing: -0.02em; }
.keyword dl dd{ font-size: 2.4rem; font-weight: 700; color: var(--mainColor); letter-spacing: -0.02em; }
.keyword dl dd p{ font-size: inherit; font-weight: 300; color: #333; letter-spacing: inherit; margin-top: 25px; }
.keyword dl dd p strong{ font-weight: 600; }


.partner-list ul{ display: flex; flex-wrap: wrap; margin-bottom: -40px; }
.partner-list ul li{ width: calc((100% - 160px) / 5); margin-right: 40px; margin-bottom: 40px; }
.partner-list ul li:nth-of-type(5n){ margin-right: 0; }
.partner-list ul li figure{ width: 100%; height: 120px; display: flex; justify-content: center; align-items: center; border: 1px solid #DDD; padding: 20px; }
.partner-list ul li figure img{ max-height: 100%; }

@media screen and (max-width: 1600px){
	h6{ font-size: 2.8rem; margin-bottom: 30px; }
	.center-title{ font-size: 3.5rem; }
	.dashed{ padding: 60px 40px; }

	.blue-box{ padding: 40px; margin-bottom: 80px; }
	.blue-box h5{ font-size: 3.5rem; }
	.blue-box p{ font-size: 1.7rem; }

	.product-box h4{ font-size: 4.5rem; }
	.product-box p{ font-size: 2rem; }

	.features .dl-box dl{ padding: 20px 30px; }
	.features .dl-box dl dt{ font-size: 2rem; }
	.features .dl-box dl dd{ font-size: 1.7rem; }

	.flex-dl .item{ padding: 50px 100px; }
	.flex-dl .item:not(:last-of-type){ margin-bottom: 80px; }
	.flex-dl .item .dl dl:not(:last-of-type){ margin-bottom: 60px; }
	.flex-dl .item .dl dl dt{ font-size: 2.6rem; }

	.color-table th, .color-table td{ padding: 20px; }
	.color-table tbody th{ text-align: left; padding: 20px; }

	.process-diagram .item .arrow{ width: 140px; height: 100px; font-size: 2.2rem; }
	.process-diagram .tit{ padding: 20px; }
	.process-diagram .tit p{ font-size: 2.2rem; }
	.process-diagram .tit span{ font-size: 2rem; }
	.process-diagram figure{ padding: 30px 0; }
	.process-diagram .border{ padding: 20px; }
	.process-diagram .border p{ font-size: 2rem; }

	.gallery-list ul li .text p{ font-size: 2rem; }
	.gallery-list ul li .figcaption{ font-size: 2rem; }

	.gallery-box .item{ width: calc((100% - 100px) / 2); }
	.gallery-box .item h6{ margin-bottom: 15px; }
	.gallery-box .item figure{ margin-top: 30px; }

	.border-box{ padding: 40px; }
	.border-box dl dt{ font-size: 2.6rem; }
	.border-box figure figcaption{ font-size: 2.2rem; }
	.gallery-list .border-box{ padding: 45px 35px; }

	.arrow-graph .center p{ font-size: 2.4rem; }

	.keyword dl dt{ font-size: 4.5rem; }
	.keyword dl dd{ font-size: 2rem; }
	.keyword dl dd p{ margin-top: 20px; }

	.partner-list ul{ margin-bottom: -20px; }
	.partner-list ul li{ width: calc((100% - 80px) / 5); margin-right: 20px; margin-bottom: 20px; }
	.partner-list ul li figure{ height: 100px; }
}

@media screen and (max-width: 1400px){
	.features::before{ font-size: 25rem; }

	.flex-dl .item{ padding: 40px 60px; }
	.flex-dl .item:not(:last-of-type){ margin-bottom: 60px; }
	.flex-dl .item .figure{ width: 50%; }
	.flex-dl .item .dl{ width: 50%; padding-left: 40px; }
	.flex-dl .item .dl dl:not(:last-of-type){ margin-bottom: 40px; }
}

@media screen and (max-width: 1280px){
	h6{ font-size: 2.4rem; margin-bottom: 20px; }
	.center-title{ font-size: 3rem; margin-bottom: 20px; }
	.dashed{ padding: 40px 30px; }

	.blue-box{ padding: 25px; margin-bottom: 60px; }
	.blue-box h5{ font-size: 3rem; margin-bottom: 10px; }
	.blue-box p{ font-size: 1.6rem; }

	.product-box h4{ font-size: 3.5rem; margin-bottom: 10px; }
	.product-box p{ font-size: 1.8rem; }
	
	.features .dl-box dl{ padding: 15px 20px; }
	.features .dl-box dl dt{ font-size: 1.9rem; }
	.features .dl-box dl dd{ font-size: 1.6rem; }

	.flex-dl .item{ padding: 30px; }
	.flex-dl .item:not(:last-of-type){ margin-bottom: 40px; }
	.flex-dl .item .dl dl:not(:last-of-type){ margin-bottom: 30px; }
	.flex-dl .item .dl dl dt{ font-size: 2.2rem; margin-bottom: 10px; }
	.flex-dl .item .dl dl dd{ font-size: 1.7rem; }

	.color-table th, .color-table td{ padding: 10px 15px; }
	.color-table colgroup col.th{ width: 180px; }

	.process-diagram .item .arrow{ width: 100px; height: 70px; font-size: 1.8rem; }
	.process-diagram .tit p{ font-size: 2rem; }
	.process-diagram .tit span{ font-size: 1.8rem; margin-top: 5px; }
	.process-diagram figure{ padding: 20px 0; }
	.process-diagram .border p{ font-size: 1.8rem; }

	.gallery-list ul{ margin-bottom: -50px; }
	.gallery-list ul li{ width: calc((100% - 50px) / 2); margin-right: 50px; margin-bottom: 50px; }
	.gallery-list ul li .text{ padding: 15px 20px; }
	.gallery-list ul li .text p{ font-size: 1.8rem; }
	.gallery-list ul li .figcaption{ font-size: 1.8rem; margin-top: 10px; }

	.gallery-list ul.wide li{ width: calc(45% - 50px); }
	.gallery-list ul.wide li.big{ width: 55%; }

	.gallery-list.three ul{ margin-bottom: -20px; }
	.gallery-list.three ul li{ width: calc((100% - 40px) / 3); margin-right: 20px; margin-bottom: 20px; }

	.gallery-box .item{ width: calc((100% - 50px) / 2); }
	.gallery-box .item h6{ margin-bottom: 10px; }
	.gallery-box .item p{ font-size: 1.7rem; }
	.gallery-box .item figure{ margin-top: 20px; }

	.border-box{ padding: 30px; }
	.border-box dl dt{ font-size: 2.2rem; margin-bottom: 10px; }
	.border-box dl dd{ font-size: 1.7rem; }
	.border-box dl dd:not(:last-of-type){ margin-bottom: 5px; }
	.border-box figure figcaption{ font-size: 2rem; }
	.border-box figure figcaption + img{ margin: 20px 0; }
	.border-box p{ font-size: 1.7rem; margin-top: 10px; }
	.gallery-list .border-box{ padding: 30px 25px; }

	.arrow-graph .center p{ font-size: 2.2rem; margin-top: 10px; }

	.keyword .box{ padding: 30px; }
	.keyword dl dt{ font-size: 3.5rem; }
	.keyword dl dd{ font-size: 1.8rem; }
	.keyword dl dd p{ margin-top: 10px; }

	.partner-list ul li{ width: calc((100% - 60px) / 4); }
	.partner-list ul li:nth-of-type(5n){ margin-right: 20px; }
	.partner-list ul li:nth-of-type(4n){ margin-right: 0; }
	.partner-list ul li figure{ height: 100px; }
}

@media screen and (max-width: 1000px){
	.partner-list ul li{ width: calc((100% - 40px) / 3); }
	.partner-list ul li:nth-of-type(4n){ margin-right: 20px; }
	.partner-list ul li:nth-of-type(3n){ margin-right: 0; }
}
 
 @media screen and (max-width: 900px){
	h6{ font-size: 2.2rem; }
	.center-title{ font-size: 2.4rem; }
	.dashed{ padding: 25px; }

 	.blue-box{  margin-bottom: 50px; }
	.blue-box h5{ font-size: 2.6rem; }

	.product-box h4{ font-size: 3rem; }
	.product-box p{ font-size: 1.7rem; }

	.color-table colgroup col.th{ width: 100px; }
	
	.flex-dl .item .dl dl dt{ font-size: 2rem; }

	.gallery-list ul{ margin-bottom: -20px; }
	.gallery-list ul li{ width: calc((100% - 20px) / 2); margin-right: 20px; margin-bottom: 20px; }

	.gallery-list ul.wide li{ width: calc(45% - 20px); }
	.gallery-list ul.wide li.big{ width: 55%; }

	.border-box dl dt{ font-size: 2rem; }

	.arrow-graph .center p{ font-size: 2rem; }

	.keyword{ margin-bottom: -20px; }
	.keyword .box{ width: calc((100% - 40px) / 3); margin-right: 20px; margin-bottom: 20px; }
	.keyword dl dt{ font-size: 3rem; }
}
 
@media screen and (max-width: 800px){
	.flex-dl .item{ flex-direction: column; padding: 20px; }
	.flex-dl .item .figure{ width: 100%; }
	.flex-dl .item .dl{ width: 100%; padding-left: 0; padding-top: 20px; }

	.process-diagram .item{ width: 100%; margin-right: 0 !important; }
	.process-diagram .item .arrow{ top: 100%; right: 50%; transform: translate(50%, 0); color: #212121; }
	.process-diagram .item .arrow::after{ content: ""; width: 80%; height: 30px; background: #fff; border: 1px solid #5FA8D3; position: absolute; top: 50%; left: 50%; z-index: -1; transform: translate(-50%, -50%); }
	.process-diagram .item .arrow::before{ transform: rotate(90deg); }

	.gallery-list ul.one li{ width: 100% !important; margin-right: 0; }

	.gallery-list.three ul{ margin-bottom: -30px; }
	.gallery-list.three ul li{ width: calc((100% - 10px) / 2); margin-right: 10px; margin-bottom: 30px; }
	.gallery-list.three ul li:nth-of-type(3n){ margin-right: 15px; }
	.gallery-list.three ul li:nth-of-type(2n){ margin-right: 0; }
	.gallery-list ul li .figcaption{ font-size: 1.7rem; }

	.gallery-box .item{ width: 100%; }
	.gallery-box .item:not(:last-of-type){ padding-bottom: 50px; }

	.partner-list ul li{ width: calc((100% - 20px) / 2); }
	.partner-list ul li:nth-of-type(3n){ margin-right: 20px; }
	.partner-list ul li:nth-of-type(2n){ margin-right: 0; }
	.partner-list ul li figure{ height: 75px; padding: 15px; }
}

@media screen and (max-width: 750px){
	.keyword .box{ width: 100%; margin-right: 0; padding: 20px; }
}