/*** 공통 ***/
.table.typeA table tr th, .table.typeA table tr td {padding:15px 20px;}
.table.typeA table thead tr th {background:var(--base1); color:#fff; font-size:18px; font-weight:600;}
.table.typeA table tbody tr td {text-align:center; font-size:18px;}
.table.typeA table tbody tr {border-bottom:1px solid var(--gray); }
.table.typeA .source {text-align:right; margin-top:10px; color:#666;}

.aboutus .sub-part {padding:80px 0;}
.aboutus .sub-part:first-of-type {padding-top:30px;}
.aboutus .sub-part:last-of-type {padding-bottom:0;}

.aboutus .sub-part.introduce {background:#F5F5FF;}
.aboutus .sub-part.tech-intro {background:#F5F5FF;}

.aboutus .topics .inner {display:grid; grid-template-columns:repeat(3,1fr); gap:27px; justify-content:space-between;}
.aboutus .topic-bx {display:flex; flex-direction:column; align-items:center; position:relative; border:1px solid var(--gray); box-sizing:border-box; text-align:center; padding:50px 30px 30px 30px; border-radius:20px; justify-content:space-between;}
.aboutus .topic-bx h3 {position:absolute; left:50%; top:-28px; transform:translateX(-50%); color:#fff; display:inline-block; font-size:24px; font-weight:600; padding:15px 25px; background:var(--base1); border-radius:3rem; white-space:nowrap;}
.aboutus .topic-bx:nth-of-type(1) h3 {background:var(--base3);}
.aboutus .topic-bx:nth-of-type(2) h3 {background:var(--base1);}
.aboutus .topic-bx:nth-of-type(3) h3 {background:var(--base2);}
.aboutus .topic-bx ul {text-align:left; font-size:18px;}
.aboutus .topic-bx ul li {position:relative; padding-left:15px; color:#000;}
.aboutus .topic-bx ul li:before {content:""; display:block; width:5px; height:5px; background:#ccc; border-radius:50%; position:absolute; left:0; top:12px;}
.aboutus .topic-bx ul li+li {margin-top:15px;}
.aboutus .topic-bx .ref-img {margin-top:30px;}
.aboutus .topic-bx .ref-img .frame {height:260px; padding:20px;  border:1px solid var(--gray); border-radius:20px;}
.aboutus .topic-bx .ref-img img {width:100%; height:100%; object-fit:contain;}
.aboutus .topic-bx .ref-img .txt {min-height:65px; line-height:1.4; margin-top:10px;}
.aboutus .topic-bx .ref-img p {}
.aboutus .topic-bx .ref-img small {font-size:14px; display:block; margin-top:3px;}

.aboutus .sub-part.flex-type .inner {display:flex; gap:100px;}
.aboutus .sub-part .left {width:450px; }
.aboutus .sub-part .left .sticky-in {position:sticky; top:120px;}
.aboutus .sub-part .right {width:calc(100% - 550px); color:#000; }

.aboutus .sub-part.introduce .left img {width:100%; border-radius:20px;}
.aboutus .sub-part.introduce .left img+img {margin-top:20px;}
.aboutus .sub-part.introduce .right {font-size:17px; line-height:1.7;}
.aboutus .sub-part.introduce .right .big {font-size:30px; font-weight:700; color:var(--base1);}
.aboutus .sub-part.introduce .right p+p {margin-top:30px;}

.aboutus .sub-part.enterprise .left img {width:100%;}
.aboutus .sub-part.enterprise .left img.logo {max-width:280px; width:62%;}
.aboutus .sub-part.enterprise .left img.logo_txt {margin-top:30px;}
.aboutus .sub-part.enterprise .left p {margin-top:20px; line-height:1.7; font-size:24px;}
.aboutus .sub-part.enterprise .enter-bx {display:grid; grid-template-columns:150px auto; gap:40px; border:1px solid var(--gray); border-radius:20px; box-sizing:border-box; padding:30px 40px;  align-items:center;}
.aboutus .sub-part.enterprise .enter-bx+.enter-bx {margin-top:20px;}
.aboutus .sub-part.enterprise .enter-bx .logo {text-align:center;}
.aboutus .sub-part.enterprise .enter-bx .logo img {max-width:100%; max-height:60px;}
.aboutus .sub-part.enterprise .enter-bx ul {display:flex; flex-wrap:wrap; gap:10px;}
.aboutus .sub-part.enterprise .enter-bx ul li {color:#000; line-height:1.7; font-size:18px; background:var(--gray); padding:5px 20px; display:inline-block; border-radius:3rem;}
.aboutus .sub-part.enterprise .table {margin-top:40px;}

.aboutus .sub-part.tech-intro p.tit {position:relative; font-size:24px; font-weight:600; color:#000; padding-left:30px; margin-bottom:20px;}
.aboutus .sub-part.tech-intro p.tit:before {content:""; display:block; position:absolute; width:10px; height:30px; border-radius:10px; left:0; top:5px; border-radius:10px;}
.aboutus .sub-part.tech-intro .tech-wrap:nth-of-type(1) p.tit:before {background:var(--base3);}
.aboutus .sub-part.tech-intro .tech-wrap:nth-of-type(2) p.tit:before {background:var(--base1);}
.aboutus .sub-part.tech-intro .tech-wrap:nth-of-type(3) p.tit:before {background:var(--base2);}
.aboutus .sub-part.tech-intro .inner {display:grid; grid-template-columns:1fr 1fr; gap:40px 100px;}
.aboutus .sub-part.tech-intro .grid-row {grid-row:1/3;}
.aboutus .sub-part.tech-intro .grid-row .white-bx {padding:40px; box-sizing:border-box; height: calc(100% - 58px);}
.aboutus .sub-part.tech-intro .grid-row .white-bx img {max-width:100%;}
.aboutus .sub-part.tech-intro .white-bx {background:#fff; border-radius:20px; box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.15); text-align:center; display:flex; justify-content:center; align-items:center;}

.aboutus .sub-part.tech-intro .conclusion {grid-column:1/3; text-align:center; background:var(--base1); color:#fff; font-size:24px; font-weight:600; padding:20px; border-radius:20px;}
.aboutus .sub-part .grid-wrap.repeat3 {display:grid; grid-template-columns:repeat(3,1fr); gap:15px;}
.aboutus .sub-part .grid-wrap .white-bx {padding:35px 20px; line-height:1.5;  color:#000; font-size:20px;}
.aboutus .sub-part .grid-wrap .white-bx span {font-weight:600;}
.aboutus .sub-part .grid-wrap .white-bx span.base1 {color:var(--base1);}
.aboutus .sub-part .grid-wrap .white-bx span.base2 {color:var(--base2);}

.aboutus .sub-part.key-tech .flex-wrap {display:flex; justify-content:space-between;}
.aboutus .sub-part.key-tech .flex-wrap .key-tech-bx {width:35%; border:5px solid #d9d9d9; box-sizing:border-box; padding:50px; border-radius:20px;}
.aboutus .sub-part.key-tech .flex-wrap .rotation-wrap {width:25%; text-align:center; display:grid; gap:20px;}
.aboutus .sub-part.key-tech .conclusion {background:#008E55; color:#fff; text-align:center; font-size:24px; padding:20px; border-radius:20px; font-weight:600; margin-top:40px;}
.aboutus .sub-part.key-tech .rotation-wrap {font-size:20px; font-weight:600; line-height:1.4;}
.aboutus .sub-part.key-tech .rotation-wrap .top {align-self:end; padding-bottom:40px; background:url(/images/intro/i-rotation_navy.png) no-repeat center bottom / 80px; color:var(--base1);}
.aboutus .sub-part.key-tech .rotation-wrap p+p {margin-top:10px;}
.aboutus .sub-part.key-tech .rotation-wrap .bottom {padding-top:40px; background:url(/images/intro/i-rotation_purple.png) no-repeat center top / 80px; color:#5F4664;}
.aboutus .sub-part.key-tech .flex-wrap .key-tech-bx:nth-of-type(1) {border:5px solid var(--base1);}
.aboutus .sub-part.key-tech .flex-wrap .key-tech-bx:nth-of-type(3) {border:5px solid #5F4664;}
.aboutus .sub-part.key-tech .flex-wrap .key-tech-bx .logo {display:flex; gap:30px;}
.aboutus .sub-part.key-tech .flex-wrap .key-tech-bx .logo img {height:50px; width:100%; object-fit:contain; object-position:left;}
.aboutus .sub-part.key-tech .flex-wrap .key-tech-bx .logo img.hyu_logo {width:35%;}
.aboutus .sub-part.key-tech .flex-wrap .key-tech-bx .logo img.csppl {width:calc(65% - 30px);}
.aboutus .sub-part.key-tech .flex-wrap .key-tech-bx .txt {margin-top:30px;}
.aboutus .sub-part.key-tech .flex-wrap .key-tech-bx .txt p {font-size:24px; font-weight:600;}
.aboutus .sub-part.key-tech .flex-wrap .key-tech-bx:nth-of-type(1) .txt p {color:var(--base1);}
.aboutus .sub-part.key-tech .flex-wrap .key-tech-bx:nth-of-type(3) .txt p {color:#5F4664;}
.aboutus .sub-part.key-tech .flex-wrap .key-tech-bx .txt ul {margin-top:15px;}
.aboutus .sub-part.key-tech .flex-wrap .key-tech-bx .txt li {position:relative; padding-left:15px; position:relative; font-size:18px; line-height:1.7; color:#000;}
.aboutus .sub-part.key-tech .flex-wrap .key-tech-bx .txt li:before {content:""; display:block; width:5px; height:5px; background:#ccc; position:absolute; top:12px; left:0; border-radius:50%;}
.aboutus .sub-part.key-tech .flex-wrap .key-tech-bx .txt li+li {margin-top:5px;}
.aboutus .sub-part.key-tech .flex-wrap .ref-img {border:1px solid var(--gray); margin-top:30px; padding:20px; text-align:center;}
.aboutus .sub-part.key-tech .flex-wrap .ref-img img {max-width:100%;}
.aboutus .sub-part.key-tech .flex-wrap .ref-img p {text-align:center; font-size:14px; margin-top:10px;}
/* ************************ 태블릿 이하(~1249) ************************ */
@media screen and (max-width: 1249px) { 
.table.typeA table tbody tr td, .table.typeA table thead tr th {font-size:17px;}

.aboutus .sub-part {padding:60px 0;}
.aboutus .sub-part:first-of-type {padding-top:30px;}

.aboutus h3 {}
.aboutus .inner {padding:0 30px;}
.aboutus .topics .inner {gap:60px; grid-template-columns:1fr;}
.aboutus .topic-bx {padding:40px 30px 20px 30px; align-items:unset; }
.aboutus .topic-bx h3 {font-size:20px; top:-25px;}
.aboutus .topic-bx ul {font-size:17px;}
.aboutus .topic-bx ul li+li {margin-top:5px;}
.aboutus .topic-bx .ref-img {margin-top:20px;}

.aboutus .sub-part.flex-type .inner {flex-direction:column; gap:40px;}
.aboutus .sub-part.introduce .left .sticky-in {display:grid; gap:20px; grid-template-columns:1fr 1fr;}
.aboutus .sub-part .right {width:100%;}
.aboutus .sub-part.introduce .right {font-size:16px;}
.aboutus .sub-part.introduce .right .big {font-size:24px;}
.aboutus .sub-part.introduce .left img+img {margin-top:0;}



.aboutus .sub-part .left {width:100%;}
.aboutus .sub-part.introduce .left {max-width:991px;}

.aboutus .sub-part.enterprise .left img.logo {max-width:60px;}
.aboutus .sub-part.enterprise .left img.logo_txt {max-width:350px; margin-top:5px; margin-left:10px;}

.aboutus .sub-part.enterprise .left p {font-size:20px;}
.aboutus .sub-part.enterprise .enter-bx {padding:20px 30px;}
.aboutus .sub-part.enterprise .enter-bx ul li {font-size:17px;}
.aboutus .sub-part.enterprise .enter-bx .logo img {height:50px;}

.aboutus .sub-part.tech-intro .inner {grid-template-columns:1fr; gap:40px;}
.aboutus .sub-part.tech-intro .grid-row {grid-row:auto;}
.aboutus .sub-part.tech-intro .conclusion {grid-column:auto;}
.aboutus .sub-part.tech-intro p.tit {font-size:24px;}
.aboutus .sub-part .grid-wrap .white-bx {font-size:18px;}
.aboutus .sub-part.tech-intro .conclusion {font-size:20px;}

.aboutus .sub-part.key-tech .flex-wrap .key-tech-bx {padding:30px;}
.aboutus .sub-part.key-tech .flex-wrap .key-tech-bx .txt p {font-size:20px;}
.aboutus .sub-part.key-tech .conclusion {font-size:20px;}
}

/* ************************ 태블릿 이하(~991) ************************ */
@media screen and (max-width: 991px) {
	
.table.typeA table tr th, .table.typeA table tr td {padding:12px 15px;}	
.table.typeA table tbody tr td, .table.typeA table thead tr th {font-size:16px;}
	
.aboutus h3 {}
.aboutus .topic-bx h3 {font-size:18px;}

.aboutus .sub-part.introduce .right p+p {margin-top:20px;}
.aboutus .sub-part.introduce .right .big {font-size:22px;}
.aboutus .sub-part.flex-type .inner {gap:30px;}


.aboutus .sub-part.tech-intro p.tit {font-size:20px; padding-left:20px; margin-bottom:15px;}
.aboutus .sub-part.tech-intro p.tit:before {width:8px; height:20px; left:0; top:6px;}
.aboutus .sub-part.tech-intro .grid-row .white-bx {height:auto;}

.aboutus .sub-part.tech-intro .inner {gap:30px;}

.aboutus .sub-part.key-tech .flex-wrap {flex-direction:column; gap:30px;}
.aboutus .sub-part.key-tech .flex-wrap .key-tech-bx {width:100%;}
.aboutus .sub-part.key-tech .flex-wrap .rotation-wrap {width:100%;}
.aboutus .sub-part.key-tech .flex-wrap .key-tech-bx .logo img.hyu_logo {width:auto;}
.aboutus .sub-part.key-tech .flex-wrap .key-tech-bx .txt li {font-size:16px;}
.aboutus .sub-part.key-tech .flex-wrap .key-tech-bx .txt li:before {top:11px;}
.aboutus .sub-part.key-tech .flex-wrap .key-tech-bx .txt ul {margin-top:5px;}
.aboutus .sub-part.key-tech .rotation-wrap {font-size:18px;}
.aboutus .sub-part.key-tech .flex-wrap .ref-img {margin-top:15px;}
.aboutus .sub-part.key-tech .flex-wrap .key-tech-bx .txt {margin-top:20px;}
.aboutus .sub-part.key-tech .conclusion {margin-top:30px;}
.aboutus .sub-part.key-tech .rotation-wrap .top {background: url(/images/intro/i-rotation_navy.png) no-repeat center bottom / 60px;}
.aboutus .sub-part.key-tech .rotation-wrap .bottom {background: url(/images/intro/i-rotation_purple.png) no-repeat center top / 60px;}
}

/* ************************ 태블릿 이하(~767) ************************ */
@media screen and (max-width: 767px) { 
.pc_767 {display:none;}
.table.typeA table tbody tr td, .table.typeA table thead tr th {font-size:15px;}
.table.typeA table tr th, .table.typeA table tr td {padding:10px 5px;} 
.table.typeA .source {font-size:14px;}

.aboutus .inner {padding:0 20px;}
.aboutus .sub-part {padding:50px 0;}
.aboutus .topic-bx {padding:40px 20px 20px 20px}
.aboutus .sub-part.enterprise .left p {margin-top:15px; font-size:18px;}
.aboutus .sub-part.enterprise .left .sticky-in>div {display:flex; flex-wrap:wrap; gap:20px;}
.aboutus .sub-part.enterprise .left img.logo_txt {margin:0;}
.aboutus .sub-part.introduce .right .big {font-size:20px;}

.aboutus .sub-part.enterprise .enter-bx {grid-template-columns:1fr; gap:15px; padding:20px;}
.aboutus .sub-part.enterprise .enter-bx ul {justify-content:center;}
.aboutus .sub-part.enterprise .enter-bx ul li {font-size:16px;}
.aboutus .sub-part.enterprise .enter-bx+.enter-bx {margin-top:10px;}
.aboutus .sub-part.enterprise .table {margin-top:20px;}

.aboutus .sub-part .grid-wrap.repeat3 {grid-template-columns:1fr; gap:10px;}
.aboutus .sub-part .grid-wrap .white-bx {padding:20px; font-size:16px;}
.aboutus .sub-part.tech-intro .conclusion {font-size:18px; padding:10px 20px;}
.aboutus .sub-part.key-tech .flex-wrap .key-tech-bx {padding:30px 20px;}
.aboutus .sub-part.key-tech .flex-wrap .key-tech-bx .logo img {height:35px;}
.aboutus .sub-part.key-tech .conclusion {padding:10px 20px; font-size:18px;}
}

/* ************************ 태블릿 이하(~500) ************************ */
@media screen and (max-width: 500px) { 
.pc_500 {display:none;}
.aboutus .sub-part {padding:40px 0;}
.aboutus .sub-part.introduce .left .sticky-in {gap:10px;}
.aboutus .sub-part.tech-intro .conclusion {font-size:17px;}
.aboutus .sub-part.key-tech .conclusion {font-size:17px;}
.aboutus .sub-part.key-tech .flex-wrap .key-tech-bx .logo {gap:15px;}
}