@charset "utf-8";

.material .titWrap {background:url(/images/material/material_bg.webp) no-repeat center -60px / cover; text-align:center; color:#fff; padding-top:80px;}
.material .titWrap h3 {font-size:var(--fs36); margin-bottom:30px; }
.material .titWrap ul {width:100%; max-width:1400px; margin:auto; background:#fff; display:flex; color:#777; padding-top:70px; justify-content: center; gap: 30px; margin-top:70px;}
.material .titWrap ul li {position:relative;}
.material .titWrap ul li+li:before {content:""; width:1px; height:40%; position:absolute; left:-16px; top:7px; background:#c5c5c5;}
.material .titWrap ul li a.on {position:relative; color:var(--base1); font-weight:700;}
.material .titWrap ul li a.on:before {
    position: absolute;
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 100px;
    background: var(--base1);
    left: -7px;
}

.material .featureWrap {display:grid; grid-template-columns: auto 950px; padding-top:80px;}
.material .featureWrap h4 {font-size:var(--fs30); color:#000;}
.material .featureWrap .feature {display:flex; gap:70px; align-items: flex-start;}
.material .featureWrap .feature>div {border:1px solid #ddd;}
.material .featureWrap .feature ul {display:grid; grid-template-columns:auto auto; gap:0 40px;}
.material .featureWrap .feature ul li {font-size:var(--fs20);}



.material .innerWrap {margin:auto; margin-top:140px; width:100%; max-width:1400px;}
.material .innerWrap>li {display:grid; grid-template-columns: auto 950px; /*border-top:10px solid var(--base1);*/}
.material .innerWrap>li+li {position:relative; margin-top:150px;}
.material.focusring .innerWrap>li+li {position:relative; margin-top:50px;}
.material .innerWrap>li+li:before {content:""; position:absolute; bottom:-170px; width:100vw; left:50%; transform: translateX(-50%); height:114%; background:#f8f8f8; z-index:-1;}

.material .innerWrap>li span {display:block; padding-top:15px; font-size:var(--fs20); font-weight:600;}

.material .innerWrap>li .certiImg {text-align:center;}
.material .innerWrap>li .certiImg img {height:600px; }


.material .innerWrap>li .stickyWrap {height:100%;}
.material .innerWrap>li .sticky {/*position:sticky; top:50px; */}
.material .innerWrap>li .sticky>.img {display:grid; grid-template-columns:auto auto; gap:15px; 
justify-content: start;}
.material .innerWrap>li .sticky>.img>img { height:200px; width:auto; object-fit: contain;filter: drop-shadow(0 10px 15px rgba(0,0,0,0.10));}

.material .innerWrap>li .sticky { /*padding:60px; border:1px solid #ddd;*/ }
/*.material .innerWrap>li .sticky:before {content:""; width:100%; height:10px; background:var(--base1); position:absolute; left:0; top:0;}*/
.material .innerWrap>li .sticky span {font-size:var(--fs16); color:var(--base1); font-weight:700;}
.material .innerWrap>li .sticky h4 {font-size:var(--fs26); margin:5px 0 50px 0; line-height:1.2;}


.material .innerWrap .inner ol>li {padding:40px; border:1px solid #ddd; margin-bottom:-1px; background:#fdfdfd;}
.material .innerWrap .inner ol>li h5 {font-size:var(--fs26);}
.material .innerWrap .inner ol>li p {font-weight:300; margin: 5px 0 30px 0;}
.material .innerWrap .inner ol>li .img {height:380px; padding:40px; border:1px solid #ddd;}
.material .innerWrap .inner ol>li .img img {object-fit: contain;}


/* Arf 블랭크 */
.material .arfWrap .featureWrap .feature ul {display:block;}
.material .arfWrap .featureWrap .feature ul .tit {font-weight:700; color:var(--base1); font-size:var(--fs24); margin-top:40px;}
.material .arfWrap .featureWrap .feature ul li:first-child {margin-top:0;}
.material .arfWrap .featureWrap .feature ul li {font-weight:300;}
.material .arfWrap .featureWrap .feature ul span {font-weight:600;}
.material .arfWrap .featureWrap .feature ul .tit {margin-top:30px;}
.material .arfWrap .innerWrap .inner .tableWrap {margin-top:30px;}

.material .arfWrap .innerWrap>li+li:before {content:none;}

.material .arfWrap .fused h3 {font-size: var(--fs30); color: #000;}
.material .arfWrap .fused ul h4 {font-size: var(--fs20); margin-bottom:5px;}
.material .arfWrap .fused ul li+li {margin-top:35px;}
.material .arfWrap .fused ul li p {position:relative; line-height:1.3; font-weight:300; padding-left:15px;}
.material .arfWrap .fused ul li p:before {position:absolute; left:0; top:10px; content:""; width:4px; height:4px; border-radius:100px; background:#ddd;}



/* ************************ 태블릿 (~1249) ************************ */
@media screen and (max-width:1249px) {
	
	.material .featureWrap .feature ul {grid-template-columns: auto;}
	
	.material .innerWrap>li {grid-template-columns: auto;}
	.material .innerWrap>li .sticky span {text-align:left;}
	.material .innerWrap>li .sticky h4 {margin-bottom:20px;}
	.material .innerWrap>li .sticky h4 br {display:none;}
	.material .innerWrap>li+li {margin-top:80px;}
	
	
}





/* ************************ 태블릿 (~991) ************************ */
@media screen and (max-width:991px) {

	.material .featureWrap {grid-template-columns: auto; gap:40px;}


	.material .titWrap {padding:80px 80px 0;}
	.material .titWrap ul {display: grid; grid-template-columns: repeat(4, 1fr); padding: 40px;  box-sizing: border-box; gap:15px;}
	.material .titWrap ul li+li:before {content:none;}
	.material .innerWrap>li {display:block;}
	.material .innerWrap>li .stickyWrap {height:auto; padding:0; border:0; margin-bottom:60px;}

	.material .arfWrap .fused h3 {margin-bottom:40px;}



}



/* ************************ 모바일 (~767) ************************ */
@media screen and (max-width:767px) {

	body .tableWrap.type4 {overflow-x:auto;}
	body .tableWrap.type4 table {width:100%; min-width:500px;}
	
	.material .featureWrap .feature {    flex-direction: column; gap:30px;}
	
	
	.tableWrap.type4{display:block; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; width:100%; max-width:100%;}
	.tableWrap.type4 table{width:auto; min-width:1000px; border-collapse:collapse;}
	.tableWrap.type4 th, .tableWrap.type4 td{white-space:nowrap;}

	
	.material .innerWrap {margin-top:40px;}
	.material .innerWrap .inner ol>li .img {height:auto; padding:0; border:0;}
	.material .titWrap {padding:40px;}
	.material .titWrap ul {display:none;}
	
	.material .innerWrap>li .stickyWrap {margin-bottom:40px;}
	
	.material .innerWrap>li .certiImg img {width:100%; height:auto;}
	.material .innerWrap>li span {text-align:left; line-height:1.2;}
	
	.material .titWrap h3 {margin-bottom:0;}
	
	
	



}


/* ************************ 모바일 (~500) ************************ */
@media screen and (max-width:500px) {

	.material .titWrap {display:none;}
	.material .featureWrap {padding-top:0;}
	.material .innerWrap>li .sticky>.img>img {height:130px;}
	.material .innerWrap>li .sticky h4 { margin: 5px 0 20px 0;}
	
	.material .innerWrap>li+li {margin-top:60px;}


}