@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */

.doc-pr .tit-wrap{margin-bottom:var(--size100);text-align:center;}
.doc-pr .tit-wrap .tit{font-size:var(--fz48);font-weight:700;line-height:1.2em;}
.doc-pr .tit-wrap .tt{margin-top:15px;line-height:1.5em;}
.doc-pr .img{margin-bottom:var(--size130);}
.doc-pr .con{position:relative;display:flex;gap:160px;justify-content:center;z-index:1;}
.doc-pr .con:before{content:'';width:100vw;height:1px;background-color: #454545;position: absolute;left:50%;top:24px;transform:translateX(-50%);z-index:-1;}
.doc-pr .con .col{}
.doc-pr .con .col .ic{display:flex;justify-content:center;align-items:center;width:48px;height:48px;margin:0 auto 50px;border-radius:100%;background-color:var(--snd);}
.doc-pr .con .col .tit{margin-bottom:25px;text-align:center;font-size:var(--fz24);font-weight:700;line-height:1.2em;}
.doc-pr .con .col .hypen-list li{padding-left:.6em;text-indent:-.6em;color: #ccc;font-size:var(--fz17);line-height:1.41em;}
.doc-pr .con .col .hypen-list li span{color: #fff;margin-right:10px;}

.port-list ul{display:flex;flex-wrap:wrap;margin:0 -20px -65px;}
.port-list ul li{width:25%;padding:0 20px;margin-bottom:65px;}
.port-list ul li .pic {position:relative; height:0; padding-bottom:112.5%; overflow:hidden;border-radius:var(--bd16);}
.port-list ul li .pic img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100% !important; height:100% !important; max-width:100%; min-height:100%; object-fit:cover; transition:0.3s;}
.port-list ul li .date{margin-top:20px;color: #000;font-size:va(--fz14);line-height:1.4em;letter-spacing:0;}
.port-list ul li .tit{margin-top:10px;font-weight:700;letter-spacing:0;color:var(--dark);overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}