@charset "UTF-8";

/* 타이틀 */
.title-container .page-title { font-size:64px; font-weight:700; text-align:center; line-height:1; margin-top:175px; letter-spacing:-3px }
.title-container .page-desc { font-size:18px; text-align:center; line-height:1; margin-top:42px }
.title-container .page-desc br { display:none }

/* tool */
.tool-container { margin-top:116px }
.tool-container .wrap { display:flex; align-items:center }
.tool-container .info-wrap{
  flex: 1 1 0;
  min-width: 0;
  padding-right: 16px;
  overflow: hidden;
  font-weight: 700;
}
.tool-container .search-wrap{ flex: 0 0 auto;position:relative;}
.tool-container .search-wrap input { border-radius: 30px; height:46px; border:none; font-size:16px; padding:0 56px 0 24px; background-color:#EEF0F4; }
.tool-container .search-wrap button {
  position:absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border: none;
  cursor:pointer;
  background:url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10.5968" cy="10.5968" r="8.09676" stroke="%232C2E2F" stroke-width="3"/><rect x="17.2852" y="15.8497" width="7.08148" height="2.03055" rx="1.01528" transform="rotate(45 17.2852 15.8497)" fill="%232C2E2F" stroke="%232C2E2F"/></svg>') no-repeat center;
}
.tool-container .search-wrap input::placeholder { color:#AAB3C5 }
.tool-container .search-wrap input:focus { outline:none }

/* list */
.list-container .wrap { margin-top:24px; display:grid; grid-template-columns: repeat(3, 1fr); gap:32px; }
.list-container .list-item { display:flex; position:relative; align-items:center; border-top:3px solid #222; border-bottom:1px solid #E8ECF8; padding-bottom:24px; }
.list-container .list-item a { display:flex; flex-direction:column; }
.list-container .list-item .category { flex-basis:10%; min-width: 180px; text-align:center }
.list-container .list-item .category .chip { border-radius: 15px; border: none; background-color: #C8D1E0; color: #fff; padding: 6px 15px; height: unset; font-size: 14px; font-weight: 400 }
.list-container .list-item .media { margin-top:16px; }
.list-container .list-item .media .chip { border-radius: 15px; border: none; background-color: #C8D1E0; color: #fff; padding: 6px 15px; height: unset; font-size: 14px; font-weight: 400 }
.list-container .list-item .title { margin-top:16px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis;height:52px;}
.list-container .list-item .title img { display:inline-block }
.list-container .list-item .date { font-size:14px; color:#A7AEBD; margin-top:16px; }
.list-container .list-item .thumbnail { margin-top:24px; }
.list-container .list-item .mobile-btn { display:none }
.list-container .list-item.pinned { background-color:#EFF4FF; font-weight:700 }
.list-container .list-item.pinned .category .chip { background-color: #1C64FF; color: #fff }

.read .content-container .wrap { margin-top:124px; border-top:3px solid #222222 }
.read .list-item { display:flex; position:relative; height:61px; align-items:center; border-bottom:1px solid #E8ECF8 }
.read .list-item a { display:contents; }
.read .list-item .category { flex-basis:10%; min-width: 180px; text-align:center }
.read .list-item .category .chip { border-radius: 15px; border: none; background-color: #C8D1E0; color: #fff; padding: 6px 15px; height: unset; font-size: 14px; font-weight: 400 }
.read .list-item .title { flex-basis:80%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-left:24px; flex:1 }
.read .list-item .title img { display:inline-block }
.read .list-item .date { flex-basis:10%; min-width:160px; text-align:center; margin-top:8px }
.read .list-item .mobile-btn { display:none }
.read .list-item.pinned { background-color:#EFF4FF; font-weight:700 }

.read .content-container { padding-bottom:160px }
.read .content-container .content { padding:72px 32px; border-bottom:1px solid #222; width:100%;}
.read .content-container .press-link { margin-top:56px; text-align:center }
.read .content-container .press-link a { color:#1C64FF; font-weight:700; text-decoration: underline }
.read .content-container .bottom-btn { margin-top:40px; text-align:center }
.read .content-container .bottom-btn button { border-radius:999px; padding:24px 72px; border:none; background-color:#222; color:#fff; font-size:16px; font-weight:700; cursor:pointer }

/* ========== 모바일(<=768px) ========== */
@media (max-width:768px){
  .header { display:none }
  .sub-header { display:block }

  .content-section .hero { display:none }
  .content-section .mds-submenu { display:none }
  .content-section .wrap, .content-section .caption {
    width: 100%;
  }
  .title-container .page-title { display:none }
  .title-container .page-desc { font-size:16px; line-height: 1.55;padding:0 16px;}
  .title-container .page-desc br { display:block }

  .tool-container { margin-top: 22px }
  .tool-container .wrap { width:min(1184px,92vw); flex-direction:column; align-items: stretch; }
  .tool-container .search-wrap{
    width: 100%;
  }
  .tool-container .search-wrap{ margin-top: 12px }
  .tool-container .search-wrap input{ width: calc(100vw - 40px) }

  .list-container .wrap { margin-top:32px; grid-template-columns: 1fr; gap:0; }
  .list-container .list-item { height:auto; flex-direction:column; padding: 22px 16px; border-top:none; }
  .list-container .list-item:first-child { border-top:3px solid #222; }
  .list-container .list-item .category { min-width:unset; align-self:flex-start }
  .list-container .list-item .media { order:2; margin-top:24px; }
  .list-container .list-item .title { font-size:16px; line-height:1.55; padding-right:56px; position:relative; order:3 }
  .list-container .list-item .date { color: #999; order:4;}
  .list-container .list-item .thumbnail { margin-top:0; order:1; overflow:hidden;}
  .list-container .list-item .thumbnail img {width:100%;}
  .list-container .list-item .mobile-btn { display:block; position:absolute; top: calc(50% - 16px); right: 16px }

  .read .content-container .wrap {
    margin-top: 28px;
  }
  .read .content-container { padding-bottom:80px; }
  .read .list-item { height:auto; flex-direction:column; padding: 22px 16px }
  .read .list-item .category { min-width:unset; align-self:flex-start }
  .read .list-item .title { flex-basis:unset; align-self:flex-start; font-size:16px; line-height:1.55; white-space: unset; padding-left:0 }
  .read .list-item .date { min-width:unset; align-self:flex-start; color: #999999 }

  .read .content-container .content { padding:40px 16px;}
  .read .content-container .press-link { margin-top:32px }
  .read .content-container .bottom-btn { padding:0 16px; margin-top:24px  }
  .read .content-container .bottom-btn button  { width:100%; }
}