@charset "utf-8";

.main-visual-wrap { background-color: var(--dark-color); }
.box-wrap { padding-bottom: 0; }
.box-wrap .title-area { margin-bottom: 30px; }
.box-wrap .title-area h4 { font-size: 3rem; font-family: 'NanumSquare', sans-serif; }

@media (max-width: 1200px) {
	.box-wrap .title-area h4 { font-size: 2.5rem; }
}
@media (max-width: 768px) {
	.box-wrap .title-area { margin-bottom: 0; }
	.box-wrap .title-area h4 { font-size: 2.2rem; }
}


/* 탭메뉴 */
.tab-menu { padding-top: 30px;}
.tab-menu ul { text-align: center; position: relative; width: 100%; }
.tab-menu ul li { position: relative; display: inline-block; padding: 20px 30px; font-size: 1.6rem; font-weight: 900; color: #9ba4b1; cursor: pointer; transition: color .25s;}
.tab-menu ul li:not(:last-child):after { content: ''; display: block; width: 1px; height: 14px; background:#b8bdc5; position: absolute; top:22px; right: -1px; }
.tab-menu ul li:hover,
.tab-menu ul li.on { color: var(--main-blue); }

@media (max-width: 768px) {
  .tab-menu { padding-top: 20px;}
	.tab-menu ul li { padding: 10px 20px; font-size: 1.5rem; }
  .tab-menu ul li:not(:last-child):after { top: 15px; }
}



.sec01 { padding-top: 0; }
.cont-title { border-bottom: 1px solid #b8bdc5; padding-bottom: 30px; }
.cont-title .tit h4 { font-size: 2.3rem; font-weight: 500; line-height: 1.6; }
.cont-title .tit h4 .pot { color: #8b8b8b; font-size: 1.9rem; }
.cont-title .label { padding-bottom: 15px; }
.cont-title .label p { position: relative; font-size: 1.8rem; font-weight: 900; font-family: 'Rajdhani'; letter-spacing: 0; display: inline-block; padding-left: 12px; }
.cont-title .label p:after { content: ''; width: 3px; height: 100%; position: absolute; top: 0; left: 0; background: var(--main-blue); }

@media (max-width: 768px) {
  .cont-title { text-align: center; }
  .cont-title .label { padding-bottom: 10px;}
  .cont-title .label p { display: none; }
  .cont-title .tit h4 { font-size: 1.4rem; }
  .cont-title .tit h4 .pot { font-size: 1.3rem; }
  .cont-title .tit h4 br { display: none; }
}

/* 인증 수상 */
.awards-group { position: relative; padding: 30px 0; display: flex; flex-wrap: wrap; }
.awards-group .item { position: relative; width: calc(25% - 30px); margin:0 15px 30px;}
.awards-group .item .img-area { position: relative; width: 100%; height: 0; padding-bottom: 137%; overflow: hidden; }
.awards-group .item .img-area:after { content: ''; display: block; position: absolute; top:0; left: 0; width: 0px; height: 0px; border-top: 100px solid #eee; border-left: 0px solid transparent; border-right: 100px solid transparent; transition: border .25s; }
.awards-group .item .img-area:before { content: ''; display: block; position: absolute; bottom:0; right: 0; width: 0px; height: 0px; border-bottom: 100px solid #eee; border-left: 100px solid transparent; border-right: 0px solid transparent; transition: border-width 1s; }
.awards-group .item .img-area .img { width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1; padding: 15px; }
.awards-group .item .img-area .img img { max-width: 100%; box-shadow: 4px 4px 15px rgba(0,0,0,0.15); }
.awards-group .item .img-area:hover:after { border-top-width: 400px; border-right-width: 400px; }
.awards-group .item .img-area:hover:before { border-left-width: 400px; border-bottom-width: 400px; }
.awards-group .item .tit-area { text-align: center; padding-top: 15px; }
.awards-group .item .tit-area .tit { font-size: 1.45rem; font-weight: 900; }
.awards-group .item .tit-area .date { padding-top: 6px; font-weight: 500; font-size: 1.3rem; transform: skewX(-0.03deg); }

@media (max-width: 1024px) {
  .awards-group .item .tit-area { min-height: 70px; }
}
@media (max-width: 768px) {
  .awards-group .item { width: calc(25% - 20px); margin: 0 10px 20px; }
  .awards-group .item .img-area .img { padding: 10px; }
  .awards-group .item .tit-area .tit { font-size: 1.4rem;}
}
@media (max-width: 650px) {
  .awards-group .item { width: calc(33.33% - 7px); margin: 0 10px 20px 0; }
  .awards-group .item:nth-child(3n) { margin-right: 0; }
  .awards-group .item .img-area .img { padding: 7px; }
  .awards-group .item .tit-area { padding-top: 10px; min-height: 55px; }
  .awards-group .item .tit-area .tit { font-size: 1.1rem; transform: skewX(-0.03deg); }
  .awards-group .item .tit-area .date { font-size: 1.1rem; }
}
@media (max-width: 425px) {
  .awards-group .item { margin-bottom: 10px; }
}


/* 특허 */
.patent-group { padding: 30px 0; }
.patent-group .table-group { margin-bottom: 40px; }
.patent-group .table-group .title h5 { position: relative; font-size: 1.6rem; padding-left: 15px; }
.patent-group .table-group .title h5:after { content: ''; display: block; width: 5px; height: 5px; background: #000; position: absolute; top: 5px; left:0;}
.patent-group .table-group .normal-table { position: relative; margin-top: 15px; }
.patent-group .table-group .normal-table table { table-layout: fixed; width: 100%; color: #333; transform: skewX(-0.03deg); }
.patent-group .table-group .normal-table:hover .drag { opacity: 0; }
.patent-group .table-group .normal-table table thead tr th { padding: 5px 5px 5px 10px; font-size: 1.3rem; height: 40px; background: #efefef; font-weight: 900; }
.patent-group .table-group .normal-table table tbody tr { border-bottom: 1px solid #dee3eb; }
.patent-group .table-group .normal-table table tbody tr td { padding: 5px 5px 5px 10px; font-size: 1.3rem; height: 45px; font-weight: 500; line-height: 1.5; }


.drag { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); color: #fff; opacity: 0; transition: opacity .3s; z-index: -1; }
.drag .text { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 1.4rem; font-weight: 900; letter-spacing: -0.2px; text-align: center; width: 100%; }
.drag .text .icon { display: inline-block; width: 23px; height: 23px; margin-bottom: 5px;}

@media (max-width: 600px) {
  .drag { z-index: 1; opacity: 1; }
  .patent-group .table-group .normal-table { overflow-x: auto; }
  .patent-group .table-group .normal-table table { width: 600px; }
  .patent-group .table-group .normal-table table thead tr th,
  .patent-group .table-group .normal-table table tbody tr td { font-size: 1.2rem; height: 35px; }
}