@charset "utf-8";

.main-visual-wrap { background-color: var(--dark-color); }
.cont-title { text-align: center; padding-bottom: 30px; }
.cont-title .tit { font-size: 3.2rem; font-weight: 800; }


/* 소개문구 */
.sec01 { padding: 0 0 30px; }
.sec01 .cont-title { display: flex; justify-content: space-between; align-items: center; text-align: left; }
.sec01 .cont-title .text-area { width: 50%; }
.sec01 .cont-title .text-area .tit { font-size: 3.4rem; font-weight: 900; line-height: 1.4; }
.sec01 .cont-title .text-area .txt { font-size: 1.7rem; font-weight: 400; line-height: 1.8; padding-top: 20px;}
.sec01 .cont-title .text-area .link { font-size: 1.8rem; margin-top: 15px; padding: 15px 50px;font-weight: 600; background: var(--dark-color); color: #fff; border-radius: 40px; display: inline-block; border: 1px solid var(--dark-color); transition: background .2s, color .2s;}
.sec01 .cont-title .text-area .link.white-bg { background: #fff; color: #000;}
.sec01 .cont-title .text-area .link:hover {  box-shadow: rgba(50, 50, 93, 0.25) 0px 10px 40px -17px, rgba(0, 0, 0, 0.3) 0px 9px 27px -14px; }
.sec01 .cont-title .img-area { width: 50%; }
.sec01 .cont-title .img-area img { width: 100%; height: auto; }


/* 인증수상 */
.sec02 { background: var(--dark-color); padding: 70px 0; }
.sec02 .cont-title { text-align: left; }
.sec02 .cont-title .tit { color: #fff; font-size: 2.5rem; padding-left: 20px; position: relative; }
.sec02 .cont-title .tit:after { content: ''; position: absolute; top: 1px; left: 0; width: 7px; height: 7px; background: var(--main-blue); border-radius: 10px; }
.sec02 .cont-title .tit:before { content: ''; position: absolute; top: 16px; left: 0; width: 7px; height: 7px; background: var(--main-green); border-radius: 10px; }
.sec02 .awards-area { display: flex; gap: 30px; }
.sec02 .awards-area .item { flex: 1;}
.sec02 .awards-area .item .img { position: relative; width: 100%; background: #fff; border-radius: 10px; padding: 15px 5px; outline: 5px solid rgba(255,255,255,0.3); text-align: center; min-height: 110px;}
.sec02 .awards-area .item .img img { max-width: 85%; width: 85%; max-height: 65px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.sec02 .awards-area .item .text { color: #fff; padding-top: 25px; }
.sec02 .awards-area .item .text .tit { font-size: 2rem; font-weight: 900; line-height: 1.5; }
.sec02 .awards-area .item .text .txt { font-size: 1.6rem; padding-top: 5px; line-height: 1.6; color: rgba(255,255,255,0.6); font-weight: 400; transform: skewX(-0.1deg);}


/* 주요특징 */
.sec03 .feature-wrap { display: flex; gap: 40px; align-items: baseline; }
.sec03 .feature-wrap .img-area { position: relative; width: calc(50% - 40px); height: auto; overflow: hidden; border-radius: 20px; border: 8px solid rgba(0,0,0,0.12); }
.sec03 .feature-wrap .img-area img { width: 100%; }
.sec03 .feature-wrap .txt-area { width: 50%; }
.sec03 .feature-wrap .txt-area .item { padding: 25px 0; word-break: keep-all; }
.sec03 .feature-wrap .txt-area .item:not(:first-child) { border-top: 1px solid rgba(0,0,0,0.2); }
.sec03 .feature-wrap .txt-area .item .tit { position: relative; font-size: 2rem; font-weight: 900; padding: 0 0 15px 15px; }
.sec03 .feature-wrap .txt-area .item .tit:after { content: ''; position: absolute; top: 3px; left: 0; width: 5px; height: 5px; background: var(--main-blue); border-radius: 10px; }
.sec03 .feature-wrap .txt-area .item .tit:before { content: ''; position: absolute; top: 13px; left: 0; width: 5px; height: 5px; background: #65c500; border-radius: 10px; }
.sec03 .feature-wrap .txt-area .item .txt { font-size: 1.6rem; line-height: 1.8; transform: skewX(-0.1deg); }


/* 주요기능 */
.sec04 { position: relative; background: #eff1f3; }
.sec04 .function-wrap { display: flex; flex-wrap: wrap; gap: 20px; }
.sec04 .function-wrap .box {width: calc(50% - 10px); }
.sec04 .function-wrap .box .img-area { width: 100%; height: 230px; background: #ddd; position: relative; border-radius: 30px 30px 0 0; border-bottom: 1px solid #CFCFCF; overflow: hidden; }
.sec04 .function-wrap .box .img-area img { width: 100%; height: 100%; object-fit: cover; }
.sec04 .function-wrap .box .txt-area { text-align: left; padding: 15px 0;}
.sec04 .function-wrap .box .txt-area .tit { font-size: 2.3rem; font-weight: 600; display: inline-block; position: relative; padding-bottom: 15px;}
.sec04 .function-wrap .box .txt-area .txt { position: relative; padding: 0 0 10px 13px; font-size: 1.6rem; color: #444; transform: skew(-0.3deg); padding-bottom: 10px;}
.sec04 .function-wrap .box .txt-area .txt:after { content: ''; position: absolute; top: 6px; left: 2px; width: 3px; height: 3px; background: #867e7e; border-radius: 50%; }
.sec04 .function-wrap .box .txt-area .keyword { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 5px; }
.sec04 .function-wrap .box .txt-area .keyword span { display: inline-block; font-size: 1.3rem; font-weight: 600; transform: skew(-0.1deg); color: #3f51b5; }

.sec04 .function-extras { display: flex; flex-wrap: wrap; margin-top: 50px;}
.sec04 .function-extras .item { width: 33.33%; display: flex; align-items: center; gap: 20px; padding: 30px 20px; background: #fff; border-radius: 15px; border: 5px solid #f3f3f3; }
.sec04 .function-extras .item .icon { width: 55px; height: 55px; padding: 10px; }
.sec04 .function-extras .item .icon img { width: 100%; height: 100%; object-fit: contain; }
.sec04 .function-extras .item .txt { font-size: 1.5rem; transform: skew(-0.1deg); line-height: 1.6; }
.sec04 .function-extras .item .txt b { font-weight: 900; }



/* 구성도 */
.sec05 .progress { width: 100%; border:1px solid #ccc; }
.sec05 .progress img { width: 100%; height: auto; }



/* 구축사례 */
.sec06 { background: var(--dark-color); }
.sec06 .cont-title .tit { color: #fff; }
.sec06 .cont-title .txt { color: rgba(255,255,255,0.6); font-size: 1.8rem; padding-top: 20px; }
.sec06 .case-study .item { display: flex; gap: 30px; padding:45px 35px; background: #fff; border-radius: 20px; }
.sec06 .case-study .item .logo-area { position: relative; width: 200px; height: 200px; background: #fff; border: 1px solid #b5b5b5; padding: 20px;}
.sec06 .case-study .item .logo-area img { width: 100%; height: 100%; object-fit: contain; }
.sec06 .case-study .item .txt-area { width: calc(100% - 80px); padding-top: 10px; }
.sec06 .case-study .item .txt-area .title .tit { font-size: 2.3rem; font-weight: 800; line-height: 1.6; }
.sec06 .case-study .item .txt-area .title a { color: #7c7ceb; font-size: 1.6rem; padding-top: 10px; display: inline-block; font-weight: 600; transform: skew(-0.1deg); word-break: break-word; }
.sec06 .case-study .item .txt-area .title a:hover { text-decoration: underline; }
.sec06 .case-study .item .txt-area .txt { font-size: 1.6rem; padding-top: 15px; line-height: 1.5; transform: skew(-0.1deg); color: #555;}
.sec06 .case-study .item .txt-area .txt strong { font-size: 1.7rem; font-weight: 700; }
.sec06 .case-study .slick-dots li { width: 10px; height: 10px;}
.sec06 .case-study .slick-dots li button { text-indent: -9999px; width: 100%; height: 100%;}
.sec06 .case-study .slick-dots li button:before { background: #fff; border-radius: 10px; width: 100%; height: 100%;}
.sec06 .case-study .slick-prev,
.sec06 .case-study .slick-next { width: 35px; }
.sec06 .case-study .slick-prev { left: -50px;}
.sec06 .case-study .slick-next { right: -50px; }
.sec06 .case-study .slick-prev:before,
.sec06 .case-study .slick-next:before { font-size: 40px; }


/* 지원사양 */
.sec07 .spec-wrap { border-top: 1px solid #000; }
.sec07 .spec-wrap dl { display: flex; align-items: center; border-bottom: 1px solid #ddd; padding: 20px 0; }
.sec07 .spec-wrap dl dt { width: 250px; padding-left: 30px; font-weight: 800; color: #b3b3b3; font-size: 2.5rem; font-family: 'Rajdhani'; }
.sec07 .spec-wrap dl dd { font-size: 1.8rem; line-height: 1.7;}



/* 자주하는 질문 */
.sec08 { padding-top: 0; }
.sec08 .qna-wrap { border-top: 1px solid #000; }
.sec08 .qna-wrap details { font-size: 1.8rem; border-bottom: 1px solid #ddd; line-height: 1.6; }
.sec08 .qna-wrap details[open] summary::before { transform: rotate(135deg); top: 35px; }
.sec08 .qna-wrap details summary { position: relative; font-weight: 700; padding: 25px 70px; list-style: none; -webkit-appearance: none; appearance: none;}
.sec08 .qna-wrap details summary::-webkit-details-marker { display: none; }
.sec08 .qna-wrap details summary::after { content: 'Q'; font-size: 3rem; color: #aaa; position: absolute; top: 15px; left: 25px; font-weight: 900; }
.sec08 .qna-wrap details summary::before { content: ''; width: 12px; height: 12px; border-bottom: 1px solid #000; border-left: 1px solid #000; position: absolute; top: 27px; right: 25px; transform: rotate(-45deg); }
.sec08 .qna-wrap details .answer { position: relative; border-top: 1px solid #ddd; padding: 25px 25px 25px 70px; background:  #f6f6f6; }
.sec08 .qna-wrap details .answer::after { content: 'A'; font-size: 3rem; color: #aaa; position: absolute; top: 15px; left: 25px; font-weight: 900; }
.sec08 .qna-wrap details .answer .img { max-width: 100%; display: block; margin: 10px 0;}
.sec08 .qna-wrap details .answer .link { color: #007bff; text-decoration: underline; }



/* 주요 고객사 */
.sec09 { background: var(--dark-color); }
.sec09 .cont-title .tit { color: #fff; }
.sec09 .partner-wrap { display: flex; gap: 20px; flex-wrap: wrap;  }
.sec09 .partner-wrap .item { width: calc(25% - 16px); height: 110px; background: #fff; text-align: center; padding: 35px; border-radius: 5px; }
.sec09 .partner-wrap .item img { width: 85%; height: 95%; display: inline-block; object-fit: contain; }


@media (max-width: 1300px) {
	.sec06 .case-study .slick-prev, .sec06 .case-study .slick-next { display: none !important; }
}


@media all and (max-width: 1200px) {

	.box-wrap { padding-top: 0; }
	.cont-title .tit { font-size: 3rem; }

	.sec01 { padding: 60px 30px; }
	.sec01 .cont-title .text-area { width: 55%; }
	.sec01 .cont-title .text-area .tit { font-size: 2.9rem; }
	.sec01 .cont-title .text-area .txt { font-size: 1.6rem; }
	.sec01 .cont-title .img-area { width: 45%; }

	.sec02 { padding: 60px 0; }
	.sec02 .cont-title .tit { font-size: 2.3rem; }
	.sec02 .cont-title .tit:after { width: 6px; height: 6px; }
	.sec02 .cont-title .tit:before { width: 6px; height: 6px; top: 14px; }
	.sec02 .awards-area .item .text .tit { font-size: 1.8rem; }

	.sec03 { padding: 60px 30px; }
	.sec03 .feature-wrap .img-area { width: 40%; }
	.sec03 .feature-wrap .txt-area { width: 60%; }

	.sec04 { padding: 60px 0; }

	.sec05 { padding: 60px 30px; }

	.sec06 { padding: 60px 0; }

	.sec07 { padding: 60px 30px 0; }

	.sec08 { padding: 60px 30px; }

	.sec09 { padding: 60px 0; }
	.sec09 .partner-wrap { gap: 10px; }
	.sec09 .partner-wrap .item { width: calc(33% - 7px); }

}

@media all and (max-width: 1024px) {
	.sec01 .cont-title .text-area { word-break: keep-all; }
	.sec01 .cont-title .text-area .tit { font-size: 2.6rem; }
	.sec01 .cont-title .text-area .txt { font-size: 1.6rem; padding-top: 15px; line-height: 1.6; transform: skew(-.1deg); }
	.sec01 .cont-title .text-area .txt br { display: none; }

	.sec02 .awards-area { gap: 20px; }
	.sec02 .awards-area .item .text { padding-top: 15px; word-break: keep-all; }
	.sec02 .awards-area .item .text .tit { font-size: 1.7rem; }

	.sec03 .feature-wrap { gap: 30px; }
	.sec03 .feature-wrap .txt-area .item { padding: 20px 0; }
	.sec03 .feature-wrap .txt-area .item .tit { padding-bottom: 10px; }

	.sec04 .function-wrap .box .txt-area .tit { font-size: 2rem; }
	.sec04 .function-wrap .box .img-area { height: 200px; }
	.sec04 .function-extras .item { flex-direction: column; gap: 10px; padding: 20px 10px; }
	.sec04 .function-extras .item .icon { padding: 5px; width: 40px; height: 40px; }
	.sec04 .function-extras .item .txt { text-align: center; width: 100%; word-break: keep-all; }

	.sec06 .case-study .item .logo-area { width: 140px; height: 140px; padding: 10px; }
	.sec06 .case-study .item { gap: 20px; }
	.sec06 .case-study .item .txt-area .title .tit { font-size: 2rem; }
	.sec06 .case-study .item .txt-area .title a { font-size: 1.5rem; }

}

@media all and (max-width: 768px) {
	.cont-title .tit { font-size: 2.7rem; }

	.sec01 { padding: 50px 30px; }
	.sec01 .cont-title { flex-direction: column; }
	.sec01 .cont-title .text-area { width: 100%; text-align: center; }
	.sec01 .cont-title .img-area { width: 100%; padding-top: 40px; text-align: center; }
	.sec01 .cont-title .img-area img { width: 80%; }
	.sec01 .cont-title .text-area .link { font-size: 1.6rem; padding: 12px 50px;}

	.sec02 .awards-area { flex-direction: column; }
	.sec02 .awards-area .item { display: flex; gap: 20px; align-items: center;  }
	.sec02 .awards-area .item .img { width: 150px; height: 100px; min-height: auto; }
	.sec02 .awards-area .item .text { width: calc(100% - 170px); padding-top: 0; }

	.sec03 .feature-wrap { flex-direction: column; }
	.sec03 .feature-wrap .img-area { width: 70%; margin: 0 auto; }
	.sec03 .feature-wrap .txt-area { width: 100%; }
	.sec03 .feature-wrap .txt-area .item .tit { font-size: 1.8rem; line-height: 1.5; }
	.sec03 .feature-wrap .txt-area .item .txt { font-size: 1.5rem; }
	
	.sec04 .function-wrap { gap: 20px 10px; }
	.sec04 .function-wrap .box .txt-area .tit { font-size: 1.8rem; }
	.sec04 .function-wrap .box .txt-area .txt { font-size: 1.5rem; }
	.sec04 .function-wrap .box .img-area { height: 150px; }
	.sec04 .function-extras { margin-top: 20px; }
	.sec04 .function-extras .item .txt { font-size: 1.4rem; }

	.sec06 .case-study .item { padding: 30px 20px; min-height: 340px; }
	.sec06 .case-study .item .logo-area { width: 120px; height: 120px; }
	.sec06 .case-study .item .txt-area .title .tit { font-size: 1.8rem; }
	.sec06 .case-study .item .txt-area .title a { font-size: 1.4rem; }
	.sec06 .case-study .item .txt-area .txt strong { font-size: 1.5rem; }
	.sec06 .case-study .item .txt-area .txt { font-size: 1.4rem; }

	.sec07 .spec-wrap dl { align-items: baseline; }
	.sec07 .spec-wrap dl dt { width: 120px; font-size: 2rem; padding-left: 15px; }
	.sec07 .spec-wrap dl dd { font-size: 1.6rem; width: calc(100% - 120px); line-height: 1.5; transform: skew(-.1deg); }

	.sec08 .qna-wrap details { font-size: 1.6rem; transform: skew(-.1deg); }
	.sec08 .qna-wrap details summary { padding: 25px 70px 25px 55px; }
	.sec08 .qna-wrap details summary::after,
	.sec08 .qna-wrap details .answer::after { font-size: 2.5rem; top: 18px; left: 15px; }
	.sec08 .qna-wrap details .answer { padding: 25px 25px 25px 55px; }
	
	.sec09 .partner-wrap .item { padding: 20px; height: 80px; }
}

@media all and (max-width: 485px) {
	.cont-title .tit { font-size: 2.5rem; }

	.sec01 { padding-bottom: 0; }
	.sec01 .cont-title .img-area img { width: 100%; }
	.sec01 .cont-title .text-area .tit { font-size: 2.3rem; }
	.sec01 .cont-title .text-area .txt { font-size: 1.5rem; }

	.sec02 { padding: 40px 0 50px;}
	.sec02 .cont-title .tit { font-size: 2rem; }
	.sec02 .awards-area .item { align-items: flex-start; }
	.sec02 .awards-area .item .img { width: 100px; height: 70px; border-radius: 5px; padding: 5px; }
	.sec02 .awards-area .item .img img { max-height: 100px;}
	.sec02 .awards-area .item .text { width: calc(100% - 120px); }

	.sec03 .feature-wrap .img-area { width: 100%; }
	.sec03 .feature-wrap .txt-area .item .tit { font-size: 1.7rem; padding-bottom: 0; }
	.sec03 .feature-wrap .txt-area .item .tit:after { top: 5px; }
	.sec03 .feature-wrap .txt-area .item .tit:before { top: 14px; }
	.sec03 .feature-wrap .txt-area .item .txt { font-size: 1.4rem; }

	.sec04 .function-wrap { flex-direction: column; }
	.sec04 .function-wrap .box { width: 100%; }
	.sec04 .function-wrap .box .img-area { height: 120px; border-radius: 15px 15px 0 0; }
	.sec04 .function-wrap .box .txt-area { padding-bottom: 0; }
	.sec04 .function-wrap .box .txt-area .tit { font-size: 1.7rem; font-weight: 800; }
	.sec04 .function-wrap .box .txt-area .txt { font-size: 1.4rem; padding-left: 10px; }
	.sec04 .function-wrap .box .txt-area .keyword { gap: 7px; }
	.sec04 .function-wrap .box .txt-area .keyword span { font-size: 1.2rem; }
	.sec04 .function-extras .item { border-width: 2px; border-radius: 0; width: 50%; }
	.sec04 .function-extras .item .txt { font-size: 1.2rem; }

	.sec06 .case-study .item { gap: 10px; min-height: 480px; }
	.sec06 .case-study .item .logo-area { width: 80px; height: 80px; }
	.sec06 .case-study .item .txt-area { padding-top: 5px; }
	.sec06 .case-study .item .txt-area .title .tit { font-size: 1.7rem; }
	.sec06 .case-study .item .txt-area .txt strong { font-size: 1.5rem; }
	.sec06 .case-study .item .txt-area .txt { font-size: 1.4rem; }

	.sec07 .spec-wrap dl { padding: 15px 0; }
	.sec07 .spec-wrap dl dt { width: 100px; font-size: 1.7rem; padding-left: 10px; }
	.sec07 .spec-wrap dl dd { font-size: 1.4rem; width: calc(100% - 100px); }
	
	.sec08 .qna-wrap details { font-size: 1.4rem; }
	.sec08 .qna-wrap details summary { padding: 15px 70px 15px 50px; }
	.sec08 .qna-wrap details summary::after,
	.sec08 .qna-wrap details .answer::after { font-size: 2.3rem; top: 12px; left: 15px; }
	.sec08 .qna-wrap details .answer { padding: 15px 15px 15px 50px; }
	
	.sec09 .partner-wrap { gap: 5px; }
	.sec09 .partner-wrap .item { padding: 10px; border-radius: 3px; height: 60px; width: calc(50% - 5px); }
}

@media (max-width: 385px) {
	.sec06 .case-study .item { min-height: 530px; }
}