@charset "UTF-8";

/* header */
.header {
    position: relative;
    display: flex;
    background: #fff;
    padding: 0 8px;
    z-index: 2247483646;
}
.header-container {
    clear: both;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

.header-masthead {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    height: 94px;
    padding: 0 2px;
    border-bottom: 1px solid #eaeaea;
}
.header-masthead-hamburger {
    display: none;
}
.header-masthead-date {
    display: flex;
    padding: 12px 0;
}
.header-masthead-date span {
    font-size: 1.2rem;
    color: #707070;
}
.header-masthead-logo {
    display: flex;
    height: 100%;
}
.header-masthead-logo a {
    display: flex;
    align-items: center;
}
.header-masthead-language {
    display: flex;
    padding: 12px 0;
}
.header-masthead-language-wrap {
    display: flex;
}
.header-masthead-language-wrap a {
    font-size: 1.2rem;
    color: #707070;
}
.header-masthead-language-wrap span {
    padding: 0 8px;
    font-size: 1.2rem;
    color: #d7d7d7;
}
.header-masthead-search {
    display: none;
}
.header-masthead-search button {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    background: 0;
    cursor: pointer;
}

.header-masthead-utils {
    display: none;
    margin-bottom: 10px;
    margin-right: 16px;
}
.header-masthead-utils-item {
    display: flex;
    margin-left: 16px;
    cursor: pointer;
}

.header-masthead-utils-item-share-list {
    position: absolute;
    display: none;
    justify-content: space-between;
    top: 60px;
    right: 16px;
    width: 188px;
    padding: 16px 12px;
    background-color: #fff;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
    z-index: 10;
}
.header-masthead-utils-item-share-list.open {
    display: flex;
}
.header-masthead-utils-item-share-list-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    cursor: pointer;
}
.header-masthead-utils-item-share-list-item.active svg path,
.header-masthead-utils-item-share-list-item:hover svg path {
    fill: #222;
}
.header-masthead-utils-item-share-list-item.active svg circle,
.header-masthead-utils-item-share-list-item:hover svg circle {
    stroke: #222;
}

.header-masthead-utils-item-font-list {
    position: absolute;
    display: none;
    justify-content: space-between;
    top: 60px;
    right: 16px;
    width: 208px;
    padding: 16px;
    background-color: #fff;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
    z-index: 10;
}
.header-masthead-utils-item-font-list.open {
    display: flex;
}
.header-masthead-utils-item-font-list-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid #d7d7d7;
    cursor: pointer;
}
.header-masthead-utils-item-font-list-item.active,
.header-masthead-utils-item-font-list-item:hover {
    border: 1px solid #222;
}
.header-masthead-utils-item-font-list-item.active svg path,
.header-masthead-utils-item-font-list-item:hover svg path {
    fill: #222;
}

.header-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2px;
    width: 100%;
    height: 40px;
    border-bottom: 2px solid #222;
    overflow-x: scroll;
    overflow-y: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.header-nav::-webkit-scrollbar {
    display: none;
}
.header-nav-hamburger {
    display: flex;
    flex-direction: row;
}
.header-nav-list {
    display: flex;
    width: 100%;
}
.header-nav-list ul {
    display: flex;
    align-items: center;
    height: 40px;
    margin: 0 auto;
}
.header-nav-list ul li {
    display: flex;
    margin: 0 15px;
    white-space: nowrap;
}
.header-nav-list ul li a {
    position: relative;
    font-size: 1.6rem;
    font-weight: 500;
    color: #222;
}
.header-nav-list ul li a:hover:after,
.header-nav-list ul li a.on:after {
    content: "";
    display: block;
    border-bottom: 3px solid #222;
    position: absolute;
    bottom: -9px;
    left: 0;
    width: 100%;
}

.header-nav-search {
    display: flex;
}
.header-nav-search button {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    background: 0;
    cursor: pointer;
}

.header-hamburger {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    width: 20px;
    height: 18px;
    margin: 0;
    padding: 0;
    border: 0;
    background: 0;
    cursor: pointer;
}
.header-hamburger span {
    display: block;
    width: 20px;
    height: 2px;
    background: #000;
}
.header-hamburger.open span {
    position: absolute;
    display: block;
    top: 50%;
    left: -2px;
    width: 26px;
    height: 1px;
    background: #fff;
}
.header-hamburger.open span:nth-child(2),
.header-hamburger.open span:nth-child(3) {
    display: none;
}
.header-hamburger.open span:after,
.header-hamburger.open span:before {
    background: #000;
    width: 26px;
    height: 1px;
}
.header-hamburger.open span:after,
.header-hamburger.open span:before {
    content: "";
}
.header-hamburger.open span:before {
    position: absolute;
    top: -6px;
    left: 0;
    -ms-transform: translateY(6px) rotate(-45deg);
    transform: translateY(6px) rotate(-45deg);
}
.header-hamburger.open span:after {
    position: absolute;
    bottom: -6px;
    left: 0;
    -ms-transform: translateY(-6px) rotate(45deg);
    transform: translateY(-6px) rotate(45deg);
}

.side-menu {
    position: absolute;
    display: none;
    left: 0;
    top: 134px;
    width: 200px;
    height: calc(-134px + 100vh);
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    overflow: visible;
}
.side-menu.open {
    display: flex;
}

.side-menu-container {
    clear: both;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: visible;
    -ms-overflow-style: none;
    scrollbar-width: none;
    position: relative;
}
.side-menu-container::-webkit-scrollbar {
    display: none;
}

.side-menu-scroll-area {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: visible;
}
.side-menu-scroll-area::-webkit-scrollbar {
    display: none;
}

.side-menu-container ul {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.side-menu-container ul li {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 16px;
}
.side-menu-container ul li:hover {
    background: #f7f7f7;
}
.side-menu-container ul li a {
    display: flex;
    padding: 10px 8px 10px 16px;
    width: 100%;
    font-size: 1.6rem;
    font-weight: 500;
}
.side-menu-container ul li a:hover {
    font-weight: 700;
}

.side-menu-expend {
    position: fixed;
    display: none;
    flex-direction: column;
    background-color: #fff;
    padding: 0;
    margin: 0;
    width: 200px;
    max-height: 400px;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    overflow-y: auto;
    overflow-x: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
    z-index: 10001;
    border: 1px solid #eaeaea;
}
.side-menu-expend::-webkit-scrollbar {
    display: none;
}
.side-menu-expend-item:hover  {
    background: #f7f7f7;
}

.side-menu-sns {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #eaeaea;
}
.side-menu-sns-item {
    display: flex;
}
.side-menu-sns-item:hover {
    background: #f7f7f7;
}
.side-menu-sns-item a {
    display: flex;
    width: 100%;
    padding: 10px 8px 10px 16px;
    font-size: 1.6rem;
    font-weight: 500;
}
.side-menu-sns-item a:hover a {
    font-weight: 700;
}

.side-menu-btn {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #eaeaea;
}
.side-menu-btn-item {
    display: flex;
}
.side-menu-btn-item:hover {
    background: #f7f7f7;
}
.side-menu-btn-item a {
    display: flex;
    width: 100%;
    padding: 10px 8px 10px 16px;
    font-size: 1.6rem;
    font-weight: 500;
}
.side-menu-btn-item a:hover a {
    font-weight: 700;
}

.side-menu-language {
    display: flex;
    justify-content: center;
    padding: 32px;
    border-top: 1px solid #eaeaea;
}
.side-menu-language-wrap {
    display: flex;
}
.side-menu-language-wrap a {
    font-size: 1.2rem;
    color: #707070;
}
.side-menu-language-wrap span {
    padding: 0 8px;
    font-size: 1.2rem;
    color: #d7d7d7;
}

/* header fixed */
.header.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    border-bottom: 1px solid #222;
}
.header.fixed .header-masthead  {
    align-items: center;
    height: 48px;
    border-bottom: 0;
}
.header.fixed .header-masthead-hamburger {
    display: flex;
}
.header.fixed .header-masthead-date {
    display: none;
}
.header.fixed .header-masthead-logo a svg {
    width: 100px;
    height: 26px;
}
.header.fixed .header-masthead-language {
    display: none;
}
.header.fixed .header-masthead-search {
    display: flex;
}
.header.fixed .header-nav {
    display: none;
}
.header.fixed .side-menu {
    top: 49px;
    height: calc(-49px + 100vh);
}

/* main */
.main {
    display: flex;
    padding: 0 8px;
}
.main-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    max-width: 1280px;
    margin: 24px auto;
}

.main-headline {
    display: flex;
}
.main-headline-article {
    display: flex;
    flex-direction: column;
    max-width: 75%;
    padding: 0 16px 0 0;
    border-right: solid 1px #eaeaea;
}
.main-headline-article-top {
    display: flex;
    flex-wrap: wrap;
}
.main-headline-article-top-title {
    display: flex;
    justify-content: center;
    width: 100%;
    padding-bottom: 12px;
}
.main-headline-article-top-title h2 {
    font-size: 3.8rem;
    font-weight: 700;
    text-align: center;
}
.main-headline-article-top-title h2:hover {
    color: #707070;
}
.main-headline-article-top-summary {
    display: flex;
    flex-direction: column;
    flex-basis: 33.33%;
    max-width: 33.33%;
}
.main-headline-article-top-summary h3 {
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.43;
}
.main-headline-article-top-summary h3:hover {
    color: #707070;
}
.main-headline-article-top-summary p {
    margin-top: 8px;
    font-size: 1.4rem;
    color: #999;
    word-break: break-all;
}
.main-headline-article-top-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-left: 16px;
    max-height: 300px;
    overflow: hidden;
    flex-basis: 66.67%;
    max-width: 66.67%;
}
.main-headline-article-top-image a {
    display: flex;
}
.main-headline-article-top-image figcaption {
    display: none;
}

/* main headline list */
.main-headline-list {
    display: flex;
    margin-top: 36px;
    padding-top: 20px;
    border-top: 1px solid #222;
}

.main-headline-list-wrap {
    display: flex;
    flex-direction: column;
    flex-basis: 66%;
    max-width: 66%;
    margin-right: 16px;
    padding-right: 16px;
    border-right: 1px solid #eaeaea;
}
.main-headline-list-item {
    display: flex;
    flex-wrap: wrap;
    padding: 12px 0;
    border-bottom: 1px solid #eaeaea;
}
.main-headline-list-item-title {
    display: flex;
    width: 100%;
}
.main-headline-list-item-title h2 {
    font-size: 2rem;
    font-weight: 500;
}
.main-headline-list-item-title h2:hover {
    color: #707070;
}
.main-headline-list-item-image {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-right: 16px;
    max-height: 160px;
    overflow: hidden;
    flex-basis: 50%;
    max-width: 50%;
}
.main-headline-list-item-image a {
    display: flex;
}
.main-headline-list-item-image figcaption {
    display: none;
}
.main-headline-list-item-summary {
    display: none;
    flex-basis: 50%;
    max-width: 50%;
}
.main-headline-list-item-summary p {
    font-size: 1.4rem;
    color: #999;
    word-break: break-all;
}
.main-headline-list-item:first-child {
    padding-top: 0;
}
.main-headline-list-item:first-child .main-headline-list-item-title {
    padding-bottom: 12px;
}
.main-headline-list-item:first-child .main-headline-list-item-title h2 {
    font-size: 2.4rem;
}
.main-headline-list-item:first-child .main-headline-list-item-image {
    display: flex;
}
.main-headline-list-item:first-child .main-headline-list-item-summary {
    display: flex;
}
.main-headline-list-item:last-child {
    border-bottom: 0;
}
.main-headline-list-item:last-child .main-headline-list-item-title {
    padding-bottom: 12px;
}
.main-headline-list-item:last-child .main-headline-list-item-title h2 {
    font-size: 2rem;
}
.main-headline-list-item:last-child .main-headline-list-item-image {
    display: flex;
}
.main-headline-list-item:last-child .main-headline-list-item-summary {
    display: flex;
}

/* main headline aside */
.main-headline-list-aside {
    flex-basis: 34%;
    max-width: 34%;
}
.main-headline-list-aside-header {
    display: none;
    margin-bottom: 20px;
}
.main-headline-list-aside-header span {
    display: flex;
    align-items: center;
    font-size: 1.8rem;
    font-weight: 700;
}
.main-headline-list-aside-container {
    display: flex;
    flex-direction: column;
}
.main-headline-list-aside-item {
    display: flex;
    flex-flow: row-reverse;
    padding: 12px 0;
    border-top: 1px solid #eaeaea;
}
.main-headline-list-aside-item-image {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-height: 160px;
    overflow: hidden;
}
.main-headline-list-aside-item-image a {
    display: flex;
}
.main-headline-list-aside-item-image figcaption {
    display: none;
}
.main-headline-list-aside-item-title {
    display: flex;
    width: 100%;
}
.main-headline-list-aside-item-title h2 {
    font-size: 1.8rem;
    font-weight: 500;
}
.main-headline-list-aside-item-title h2:hover {
    color: #707070;
}
.main-headline-list-aside-item:first-child {
    flex-direction: column;
    padding-top: 0;
    border-top: 0;
}
.main-headline-list-aside-item:first-child .main-headline-list-aside-item-image {
    display: flex;
}
.main-headline-list-aside-item:first-child .main-headline-list-aside-item-title {
    margin-top: 8px;
}

/* aside */
.main-aside {
    display: flex;
    flex-direction: column;
    max-width: 25%;
    padding-left: 16px;
}
.main-aside-header {
    display: flex;
    margin-bottom: 20px;
}
.main-aside-header span {
    font-size: 1.8rem;
    font-weight: 700;
}
.main-aside-list-item {
    display: flex;
    flex-direction: row;
    padding: 12px 0;
    border-bottom: 1px solid #eaeaea;
}
.main-aside-list-item-info {
    display: flex;
    flex-direction: column;
    flex-basis: 66.67%;
    max-width: 66.67%;
}
.main-aside-list-item-info-category {
    display: flex;
    padding-bottom: 4px;
}
.main-aside-list-item-info-category span {
    font-size: 1.4rem;
    font-weight: 500;
    color: #126ccd;
}
.main-aside-list-item-info-title h3 {
    font-size: 1.8rem;
    font-weight: 500;
    color: #222;
}
.main-aside-list-item-info-title h3:hover {
    color: #707070;
}
.main-aside-list-item-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-left: 16px;
    flex-basis: 33.33%;
    max-width: 33.33%;
    max-height: 60px;
    overflow: hidden;
}
.main-aside-list-item-image a {
    display: flex;
}
.main-aside-list-item-image figcaption {
    display: none;
}
.main-aside-list-item:first-child {
    flex-direction: column;
    padding-top: 0;
}
.main-aside-list-item:first-child .main-aside-list-item-info {
    padding-top: 8px;
    flex-basis: 100%;
    max-width: 100%;
    order: 2;
}
.main-aside-list-item:first-child .main-aside-list-item-image {
    flex-basis: unset;
    max-width: unset;
    padding-left: 0;
    max-height: 160px;
    order: 1;
}
.main-aside-list-item:last-child {
    border-bottom: 0;
}
.main-aside-list-banner {
    display: flex;
    margin-top: 16px;
}

/* main grid-1 */
.main-grid-1 {
    display: flex;
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid #222;
}
.main-grid-1-wrap {
    display: flex;
}
.main-grid-1-column {
    display: flex;
    flex-direction: column;
    flex-basis: 33%;
    max-width: 33%;
    padding: 0 16px;
    border-left: 1px solid #eaeaea;
}
.main-grid-1-column-item {
    display: flex;
    flex-flow: row-reverse;
    padding: 12px 0;
    border-top: 1px solid #eaeaea;
}
.main-grid-1-column-item-image {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-height: 226px;
    overflow: hidden;
}
.main-grid-1-column-item-image a {
    display: flex;
}
.main-grid-1-column-item-image figcaption {
    display: none;
}
.main-grid-1-column-item-title {
    display: flex;
    width: 100%;
}
.main-grid-1-column-item-title h2 {
    font-size: 1.8rem;
    font-weight: 500;
}
.main-grid-1-column-item-title h2:hover {
    color: #707070;
}
.main-grid-1-column:first-child {
    flex-basis: 34%;
    max-width: 34%;
    padding-right: 16px;
    padding-left: 0;
    border-left: 0;
}
.main-grid-1-column:first-child .main-grid-1-column-item:first-child {
    flex-direction: column;
}
.main-grid-1-column:first-child .main-grid-1-column-item:first-child .main-grid-1-column-item-title h2 {
    font-size: 2.4rem;
}
.main-grid-1-column:first-child .main-grid-1-column-item:last-child .main-grid-1-column-item-title h2 {
    font-size: 2rem;
}
.main-grid-1-column:first-child .main-grid-1-column-item:last-child .main-grid-1-column-item-image {
    display: flex;
    flex-basis: 40%;
    max-width: 40%;
    height: 70px;
    padding-left: 16px;
}
.main-grid-1-column:nth-child(2) .main-grid-1-column-item:first-child .main-grid-1-column-item-title {
    display: flex;
    flex-basis: 50%;
    max-width: 50%;
    margin-top: 0;
}
.main-grid-1-column:nth-child(2) .main-grid-1-column-item:first-child .main-grid-1-column-item-title h2 {
    font-size: 2rem;
}
.main-grid-1-column:nth-child(2) .main-grid-1-column-item:first-child .main-grid-1-column-item-image {
    display: flex;
    flex-basis: 50%;
    max-width: 50%;
    height: 100px;
    padding-left: 16px;
}
.main-grid-1-column:nth-child(2) .main-grid-1-column-item:first-child.hidden-column .main-grid-1-column-item-title {
    flex-basis: 100%;
    max-width: 100%;
}
.main-grid-1-column:nth-child(2) .main-grid-1-column-item:first-child.hidden-column .main-grid-1-column-item-image {
    display: none;
}
.main-grid-1-column:last-child {
    padding-right: 0;
}
.main-grid-1-column:last-child .main-grid-1-column-item:first-child .main-grid-1-column-item-title {
    display: flex;
    flex-basis: 50%;
    max-width: 50%;
    margin-top: 0;
}
.main-grid-1-column:last-child .main-grid-1-column-item:first-child .main-grid-1-column-item-title h2 {
    font-size: 2rem;
}
.main-grid-1-column:last-child .main-grid-1-column-item:first-child .main-grid-1-column-item-image {
    display: flex;
    flex-basis: 50%;
    max-width: 50%;
    height: 100px;
    padding-left: 16px;
}
.main-grid-1-column-item:first-child {
    border-top: 0;
    padding-top: 0;
}
.main-grid-1-column-item:first-child .main-grid-1-column-item-image {
    display: flex;
}
.main-grid-1-column-item:first-child .main-grid-1-column-item-title {
    margin-top: 8px;
}

/* main grid-2 */
.main-grid-2 {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid #222;
}
.main-grid-2-header {
    display: flex;
    margin-bottom: 20px;
}
.main-grid-2-header span {
    display: flex;
    font-size: 1.8rem;
    font-weight: 700;
    align-items: center;
}
.main-grid-2-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    width: 100%;
}
.main-grid-2-list-item {
    position: relative;
    display: flex;
    flex-direction: column;
}
.main-grid-2-list-item::after {
    content: '';
    position: absolute;
    top: 0;
    right: -16px;
    bottom: 0;
    width: 1px;
    background-color: #eaeaea;
  }
.main-grid-2-list-item:last-child::after {
    display: none; /* 마지막 아이템은 구분선 제거 */
}
.main-grid-2-list-item-info {
    display: flex;
    flex-direction: column;
    margin-top: 8px;
}
.main-grid-2-list-item-info-category {
    display: flex;
    padding-bottom: 4px;
}
.main-grid-2-list-item-info-category span {
    font-size: 1.4rem;
    font-weight: 500;
    color: #126ccd;
}
.main-grid-2-list-item-info-title h3 {
    font-size: 1.8rem;
    font-weight: 500;
    color: #222;
}
.main-grid-2-list-item-info-title h3:hover {
    color: #707070;
}
.main-grid-2-list-item-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-height: 160px;
    overflow: hidden;
}
.main-grid-2-list-item-image a {
    display: flex;
}
.main-grid-2-list-item-image figcaption {
    display: none;
}

.main-grid-2-list-aside-column {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    max-width: 100%;
    padding: 0 16px;
    border-right: 1px solid #eaeaea;
}
.main-grid-2-list-aside-column:first-child {
    padding-left: 0;
}
.main-grid-2-list-aside-column:last-child {
    border-right: 0;
    padding-right: 0;
}
.main-grid-2-list-aside-column-item {
    display: flex;
    flex-flow: row-reverse;
    padding: 12px 0;
    border-top: 1px solid #eaeaea;
}
.main-grid-2-list-aside-column-item-image {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-height: 160px;
    overflow: hidden;
}
.main-grid-2-list-aside-column-item-image a {
    display: flex;
}
.main-grid-2-list-aside-column-item-image figcaption {
    display: none;
}
.main-grid-2-list-aside-column-item-title {
    display: flex;
    width: 100%;
}
.main-grid-2-list-aside-column-item-title h2 {
    font-size: 1.8rem;
    font-weight: 500;
}
.main-grid-2-list-aside-column-item-title h2:hover {
    color: #707070;
}
.main-grid-2-list-aside-column-item:first-child {
    flex-direction: column;
    padding-top: 0;
    border-top: 0;
}
.main-grid-2-list-aside-column-item:first-child .main-grid-2-list-aside-column-item-image {
    display: flex;
}
.main-grid-2-list-aside-column-item:first-child .main-grid-2-list-aside-column-item-title {
    margin-top: 8px;
}

/* main grid-3 */
.main-grid-3 {
    display: flex;
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid #222;
}
.main-grid-3-list {
    display: flex;
    flex-direction: column;
    flex-basis: 50%;
    max-width: 50%;
    margin-right: 16px;
    padding-right: 16px;
    border-right: 1px solid #eaeaea;
}
.main-grid-3-list-item {
    display: flex;
    flex-wrap: wrap;
    padding: 12px 0;
    border-bottom: 1px solid #eaeaea;
}
.main-grid-3-list-item-title {
    display: flex;
    width: 100%;
}
.main-grid-3-list-item-title h2 {
    font-size: 2rem;
    font-weight: 500;
}
.main-grid-3-list-item-title h2:hover {
    color: #707070;
}
.main-grid-3-list-item-image {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-right: 16px;
    max-height: 160px;
    overflow: hidden;
    flex-basis: 50%;
    max-width: 50%;
}
.main-grid-3-list-item-image a {
    display: flex;
}
.main-grid-3-list-item-image figcaption {
    display: none;
}
.main-grid-3-list-item-summary {
    display: none;
    flex-basis: 50%;
    max-width: 50%;
}
.main-grid-3-list-item-summary p {
    font-size: 1.4rem;
    color: #999;
    word-break: break-all;
}
.main-grid-3-list-item:first-child {
    padding-top: 0;
}
.main-grid-3-list-item:first-child .main-grid-3-list-item-title {
    padding-bottom: 12px;
}
.main-grid-3-list-item:first-child .main-grid-3-list-item-title h2 {
    font-size: 2.4rem;
}
.main-grid-3-list-item:first-child .main-grid-3-list-item-image {
    display: flex;
}
.main-grid-3-list-item:first-child .main-grid-3-list-item-summary {
    display: flex;
}
.main-grid-3-list-item:last-child {
    border-bottom: 0;
}
.main-grid-3-list-item:last-child .main-grid-3-list-item-title {
    padding-bottom: 12px;
}
.main-grid-3-list-item:last-child .main-grid-3-list-item-title h2 {
    font-size: 2rem;
}

.main-grid-3-list-aside {
    display: flex;
    flex-basis: 50%;
    max-width: 50%;
}
.main-grid-3-list-aside-column {
    display: flex;
    flex-direction: column;
    flex-basis: 50%;
    max-width: 50%;
    padding: 0 16px;
    border-right: 1px solid #eaeaea;
}
.main-grid-3-list-aside-column:first-child {
    padding-left: 0;
}
.main-grid-3-list-aside-column:last-child {
    border-right: 0;
    padding-right: 0;
}
.main-grid-3-list-aside-column-item {
    display: flex;
    flex-flow: row-reverse;
    padding: 12px 0;
    border-top: 1px solid #eaeaea;
}
.main-grid-3-list-aside-column-item-image {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-height: 160px;
    overflow: hidden;
}
.main-grid-3-list-aside-column-item-image a {
    display: flex;
}
.main-grid-3-list-aside-column-item-image figcaption {
    display: none;
}
.main-grid-3-list-aside-column-item-title {
    display: flex;
    width: 100%;
}
.main-grid-3-list-aside-column-item-title h2 {
    font-size: 1.8rem;
    font-weight: 500;
}
.main-grid-3-list-aside-column-item-title h2:hover {
    color: #707070;
}
.main-grid-3-list-aside-column-item:first-child {
    flex-direction: column;
    padding-top: 0;
    border-top: 0;
}
.main-grid-3-list-aside-column-item:first-child .main-grid-3-list-aside-column-item-image {
    display: flex;
}
.main-grid-3-list-aside-column-item:first-child .main-grid-3-list-aside-column-item-title {
    margin-top: 8px;
}

/* main grid-4 */
.main-grid-4 {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 50px;
    padding-top: 8px;
    border-top: 1px solid #222;
}
.main-grid-4-header {
    display: flex;
    margin-bottom: 20px;
}
.main-grid-4-header span {
    display: flex;
    font-size: 1.8rem;
    font-weight: 700;
    align-items: center;
}
.main-grid-4-list {
    display: grid;
    gap: 30px 32px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    width: 100%;
}
.main-grid-4-list-item {
    position: relative;
    display: flex;
    flex-direction: column;
}
.main-grid-4-list-item-info {
    display: flex;
    flex-direction: column;
    margin-top: 8px;
}
.main-grid-4-list-item-info-category {
    display: flex;
    padding-bottom: 4px;
}
.main-grid-4-list-item-info-category span {
    font-size: 1.4rem;
    font-weight: 500;
    color: #126ccd;
}
.main-grid-4-list-item-info-title h3 {
    font-size: 1.8rem;
    font-weight: 500;
    color: #222;
}
.main-grid-4-list-item-info-title h3:hover {
    color: #707070;
}
.main-grid-4-list-item-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-height: 160px;
    overflow: hidden;
}
.main-grid-4-list-item-image a {
    display: flex;
}
.main-grid-4-list-item-image figcaption {
    display: none;
}

/* main grid-5 */
.main-grid-5 {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 50px;
    padding-top: 8px;
    border-top: 1px solid #222;
}
.main-grid-5-header {
    display: flex;
    margin-bottom: 20px;
}
.main-grid-5-header span {
    display: flex;
    font-size: 1.8rem;
    font-weight: 700;
    align-items: center;
}
.main-grid-5-list {
    display: grid;
    gap: 30px 32px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    width: 100%;
}
.main-grid-5-list-item {
    position: relative;
    display: flex;
    flex-direction: column;
}
.main-grid-5-list-item-info {
    display: flex;
    flex-direction: column;
    margin-top: 8px;
}
.main-grid-5-list-item-info-category {
    display: flex;
    padding-bottom: 4px;
}
.main-grid-5-list-item-info-category span {
    font-size: 1.4rem;
    font-weight: 500;
    color: #126ccd;
}
.main-grid-5-list-item-info-title h3 {
    font-size: 1.8rem;
    font-weight: 500;
    color: #222;
}
.main-grid-5-list-item-info-title h3:hover {
    color: #707070;
}
.main-grid-5-list-item-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-height: 160px;
    overflow: hidden;
}
.main-grid-5-list-item-image a {
    display: flex;
}
.main-grid-5-list-item-image figcaption {
    display: none;
}

/* main grid-6 */
.main-grid-6 {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 50px;
    padding-top: 8px;
    border-top: 1px solid #222;
}
.main-grid-6-header {
    display: flex;
    margin-bottom: 20px;
}
.main-grid-6-header span {
    display: flex;
    font-size: 1.8rem;
    font-weight: 700;
    align-items: center;
}
.main-grid-6-list {
    display: grid;
    gap: 30px 32px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    width: 100%;
}
.main-grid-6-list-item {
    position: relative;
    display: flex;
    flex-direction: column;
}
.main-grid-6-list-item-info {
    display: flex;
    flex-direction: column;
    margin-top: 8px;
}
.main-grid-6-list-item-info-category {
    display: flex;
    padding-bottom: 4px;
}
.main-grid-6-list-item-info-category span {
    font-size: 1.4rem;
    font-weight: 500;
    color: #126ccd;
}
.main-grid-6-list-item-info-title h3 {
    font-size: 1.8rem;
    font-weight: 500;
    color: #222;
}
.main-grid-6-list-item-info-title h3:hover {
    color: #707070;
}
.main-grid-6-list-item-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-height: 160px;
    overflow: hidden;
}
.main-grid-6-list-item-image a {
    display: flex;
}
.main-grid-6-list-item-image figcaption {
    display: none;
}

/* main grid-7 */
.main-grid-7 {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 50px;
    padding-top: 8px;
    border-top: 1px solid #222;
}
.main-grid-7-header {
    display: flex;
    margin-bottom: 20px;
}
.main-grid-7-header span {
    display: flex;
    font-size: 1.8rem;
    font-weight: 700;
    align-items: center;
}
.main-grid-7-list {
    display: grid;
    gap: 30px 32px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    width: 100%;
}
.main-grid-7-list-item {
    position: relative;
    display: flex;
    flex-direction: column;
}
.main-grid-7-list-item-info {
    display: flex;
    flex-direction: column;
    margin-top: 8px;
}
.main-grid-7-list-item-info-category {
    display: flex;
    padding-bottom: 4px;
}
.main-grid-7-list-item-info-category span {
    font-size: 1.4rem;
    font-weight: 500;
    color: #126ccd;
}
.main-grid-7-list-item-info-title h3 {
    font-size: 1.8rem;
    font-weight: 500;
    color: #222;
}
.main-grid-7-list-item-info-title h3:hover {
    color: #707070;
}
.main-grid-7-list-item-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-height: 160px;
    overflow: hidden;
}
.main-grid-7-list-item-image a {
    display: flex;
}
.main-grid-7-list-item-image figcaption {
    display: none;
}

/* main grid-8 */
.main-grid-8 {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 50px;
    padding-top: 8px;
    border-top: 1px solid #222;
}
.main-grid-8-header {
    display: flex;
    margin-bottom: 20px;
}
.main-grid-8-header span {
    display: flex;
    font-size: 1.8rem;
    font-weight: 700;
    align-items: center;
}
.main-grid-8-list {
    display: grid;
    gap: 30px 32px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    width: 100%;
}
.main-grid-8-list-item {
    position: relative;
    display: flex;
    flex-direction: column;
}
.main-grid-8-list-item-info {
    display: flex;
    flex-direction: column;
    margin-top: 8px;
}
.main-grid-8-list-item-info-category {
    display: flex;
    padding-bottom: 4px;
}
.main-grid-8-list-item-info-category span {
    font-size: 1.4rem;
    font-weight: 500;
    color: #126ccd;
}
.main-grid-8-list-item-info-title h3 {
    font-size: 1.8rem;
    font-weight: 500;
    color: #222;
}
.main-grid-8-list-item-info-title h3:hover {
    color: #707070;
}
.main-grid-8-list-item-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-height: 148px;
    overflow: hidden;
}
.main-grid-8-list-item-image a {
    display: flex;
}
.main-grid-8-list-item-image figcaption {
    display: none;
}

/* main grid-9 */
.main-grid-9 {
    display: none;
    flex-direction: column;
    width: 100%;
    margin-top: 50px;
    padding-top: 8px;
}
.main-grid-9-list {
    display: flex;
    justify-content: center;
    width: 100%;
}
.main-grid-9-list-item-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-height: 148px;
    overflow: hidden;
}
.main-grid-9-list-item-image a {
    display: flex;
}
.main-grid-9-list-item-image figcaption {
    display: none;
}

.footer {
    display: flex;
    padding: 0 8px 36px 8px;
}
.footer-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    max-width: 1280px;
    margin: 30px auto;
}
.footer-sns {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-top: 20px;
    border-top: 1px solid #222;
}
.footer-sns-header {
    display: flex;
    align-items: center;
    font-size: 1.4rem;
    font-weight: 700;
}
.footer-content {
    display: flex;
    flex-direction: column;
    padding-top: 25px;
    margin-top: 20px;
    border-top: 1px solid #eaeaea;
}
.footer-sns-list {
    display: flex;
}
.footer-sns-list li {
    display: flex;
    margin-left: 12px;
}
.footer-sns-list-item {
    display: flex;
    width: 30px;
    height: 30px;
}
.footer-info {
    display: flex;
    flex-wrap: wrap;
}
.footer-info:last-child {
    margin-top: 10px;
}
.footer-info-item {
    font-size: 1.4rem;
    font-style: normal;
    margin-right: 24px;
    color: #707070;
}
.footer-info-item a:hover {
    text-decoration: underline;
}
.footer-info-item-person {
    font-weight: 700;
}

/* section */
.main-section {
    display: flex;
}
.main-section.sub {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #eaeaea;
}
.main-section.sub .main-section-content {
    margin-top: 0;
    border-top: 0;
}
.main-section.sub .main-section-list-item:last-child {
    border-bottom: 0;
}

.main-section-container {
    display: flex;
    flex-direction: column;
    flex-basis: 75%;
    max-width: 75%;
    padding-right: 16px;
}
.main-section-header {
    display: flex;
    width: 100%;
}
.main-section-header a {
    font-size: 2.4rem;
    font-weight: 400;
    color: #222;
    line-height: 1.36;
}
.main-section-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 24px;
    border-top: 1px solid #222;
}
.main-section-list {
    display: flex;
    flex-direction: column;
}
.main-section-list-item {
    display: flex;
    padding: 16px 0;
    border-bottom: 1px solid #eaeaea;
}
.main-section-list-item-info {
    display: flex;
    flex-direction: column;
    flex-basis: 66.67%;
    max-width: 66.67%;
}
.main-section-list-item-info-title {
    display: flex;
}
.main-section-list-item-info-title h2 {
    font-size: 2rem;
    font-weight: 500;
    color: #222;
}
.main-section-list-item-info-title h2:hover {
    color: #707070;
}
.main-section-list-item-info-summary {
    display: flex;
    margin-top: 8px;
}
.main-section-list-item-info-summary p {
    font-size: 1.4rem;
    line-height: 1.43;
    color: #999;
}
.main-section-list-item-info-pipe {
    display: flex;
    margin-top: 8px;
}
.main-section-list-item-info-pipe-time {
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.43;
    color: #999;
}
.main-section-list-item-info-pipe-bar {
    padding: 0 4px;
    font-size: 1.4rem;
    color: #eaeaea;
}
.main-section-list-item-info-pipe-author {
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.43;
    color: #999;
}
.main-section-list-item-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-basis: 33.33%;
    max-width: 33.33%;
    padding-left: 16px;
    max-height: 160px;
    overflow: hidden;
}
.main-section-list-item-image a {
    display: flex;
}
.main-section-list-item-image figcaption {
    display: none;
}

.main-section-paging {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 24px;
}
.main-section-paging ul {
    display: flex;
}
.main-section-paging ul li {
    display: flex;
    list-style: none;
    margin: 0 6px;
}
.main-section-paging ul li a {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    width: 24px;
    height: 24px;
    color: #999;
    font-size: 1.4rem;
}
.main-section-paging ul li a.prev,
.main-section-paging ul li a.next {
    border: 1px solid #d7d7d7;
}
.main-section-paging ul li a.prev:hover,
.main-section-paging ul li a.next:hover {
    border: 1px solid #222;
}
.main-section-paging ul li a.prev:hover svg path,
.main-section-paging ul li a.next:hover svg path {
    fill: #222;
}
.main-section-paging ul li a:hover {
    color: #222;
    font-weight: 700;
}
.main-section-paging ul li a.on {
    color: #222;
    font-weight: 700;
    background-color: #eaeaea;
}

.main-section-aside {
    display: flex;
    flex-direction: column;
    flex-basis: 25%;
    max-width: 25%;
    padding-left: 16px;
}
.main-section-aside-header {
    display: flex;
}
.main-section-aside-header span {
    font-size: 1.8rem;
    font-weight: 700;
    color: #222;
}
.main-section-aside-content {
    display: flex;
    margin-top: 20px;
}
.main-section-aside-list {
    display: flex;
    flex-direction: column;
}
.main-section-aside-list-item {
    display: flex;
    padding: 12px 0;
    border-top: 1px solid #eaeaea;
}
.main-section-aside-list-item:first-child {
    padding-top: 0;
    border-top: 0;
}
.main-section-aside-list-item-number {
    display: flex;
    margin-right: 16px;
}
.main-section-aside-list-item-number span {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.44;
    color: #222;
}
.main-section-list-item-info-title {
    display: flex;
}
.main-section-list-item-info-title h3 {
    font-size: 1.8rem;
    font-weight: 400;
    color: #222;
    line-height: 1.5;
}
.main-section-list-item-info-title h3:hover {
    color: #707070;
}

.main-news-header {
    display: flex;
    flex-direction: column;
    padding-bottom: 32px;
}
.main-news-header-category {
    display: flex;
    align-items: center;
    padding: 0 calc((116)* 1px);
    margin-bottom: 12px;
}
.main-news-header-category a {
    display: flex;
    align-items: center;
    font-size: 1.8rem;
    line-height: 1.43;
    font-weight: 400;
}

.main-news-header-advertise {
    display: flex;
    align-items: center;
    padding: 0 calc((116)* 1px);
}

.main-news-header-title {
    display: flex;
    align-items: center;
    padding: 0 calc((116)* 1px);
    font-size: 3.8rem;
    font-weight: 700;
    line-height: 1.4;
}
.main-news-article-header {
    display: flex;
    flex-direction: column;
}

.main-news-content {
    display: flex;
    flex-basis: 100%;
    max-width: 100%;
}

.main-news-article {
    position: relative;
    display: flex;
    flex-direction: column;
}

.main-news-article-byline {
    display: flex;
    margin-bottom: 8px;
}
.main-news-article-byline p {
    font-size: 1.4rem;
    font-weight: 400;
    color: #222;
}

.main-news-article-dateline {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 14px;
}
.main-news-article-dateline-date {
    display: flex;
    flex-direction: column;
    cursor: pointer;
}
.main-news-article-dateline-date time {
    display: flex;
    align-items: center;
    font-size: 1.4rem;
    color: #707070;
}
.main-news-article-dateline-date time:first-child {
    display: none;
    margin-bottom: 2px;
}
.main-news-article-dateline-date.open time:first-child {
    display: flex;
}
.main-news-article-dateline-date.open time:last-child svg {
    transform: rotate(180deg);
}

.main-news-article-dateline-utils {
    position: relative;
    display: flex;
}
.main-news-article-dateline-utils ul {
    display: flex;
}
.main-news-article-dateline-utils ul li {
    display: flex;
    padding-left: 16px;
}
.main-news-article-dateline-utils ul li div {
    display: flex;
    width: 24px;
    height: 24px;
    cursor: pointer;
}
.main-news-article-dateline-utils ul li div:hover svg path {
    fill: #222;
}

.main-news-article-dateline-utils-voice.active svg g {
    fill: #222;
}

.main-news-article-dateline-utils-font-list {
    position: absolute;
    display: none;
    justify-content: space-between;
    top: 66px;
    right: 0;
    width: 208px;
    padding: 16px;
    background-color: #fff;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
    z-index: 10;
}
.main-news-article-dateline-utils-font-list.open {
    display: flex;
}
.main-news-article-dateline-utils-font-list-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid #d7d7d7;
    cursor: pointer;
}
.main-news-article-dateline-utils-font-list-item.active,
.main-news-article-dateline-utils-font-list-item:hover {
    border: 1px solid #222;
}
.main-news-article-dateline-utils-font-list-item.active svg path,
.main-news-article-dateline-utils-font-list-item:hover svg path {
    fill: #222;
}

.main-news-article-dateline-utils-share-list {
    position: absolute;
    display: none;
    justify-content: space-between;
    top: 66px;
    right: 0;
    width: 208px;
    padding: 16px;
    background-color: #fff;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
    z-index: 10;
}
.main-news-article-dateline-utils-share-list.open {
    display: flex;
}
.main-news-article-dateline-utils-share-list-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    cursor: pointer;
}
.main-news-article-dateline-utils-share-list-item.active svg path,
.main-news-article-dateline-utils-share-list-item:hover svg path {
    fill: #222;
}

.main-news-article-body {
    display: flex;
    flex-direction: column;
    font-size: 1.8rem;
    line-height: 1.67;
    word-break: break-all;
    color: #222;
}
.main-news-article-body .middle-header {
    position: relative;
    display: block;
    padding: 0 15px;
    font-size: 1.8rem;
    font-weight: 700;
}
.main-news-article-body .middle-header:before {
    content: '';
    display: inline-block;
    position: absolute;
    left: 0;
    top: 4px;
    width: 3px;
    height: calc(100% - 5px);
    background: #404040;
}
.main-news-article-body .lead-header {
    position: relative;
    display: block;
    padding: 0 15px;
    font-size: 1.8rem;
    font-weight: 700;
}
.main-news-article-body .lead-header:before {
    content: '';
    display: inline-block;
    position: absolute;
    left: 0;
    top: 4px;
    width: 3px;
    height: calc(100% - 5px);
    background: #404040;
}


.main-news-article-footer {
    display: flex;
    flex-direction: column;
    margin-top: 32px;
}

.main-news-article-footer-tags {
    display: flex;
    flex-wrap: wrap;
    word-break: break-all;
}
.main-news-article-footer-tags ul {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.main-news-article-footer-tags ul li p {
    display: flex;
    margin-right: 12px;
    margin-bottom: 8px;
    font-size: 1.8rem;
    line-height: 20px;
    color: #126ccd;
    border-bottom: 1px solid #c8c8c8;
    cursor: pointer;
}
.main-news-article-footer-tags ul li p:hover {
    color: #107ef3;
}

.main-news-article-footer-byline {
    display: flex;
    align-items: center;
    margin-top: 36px;
}
.main-news-article-footer-byline-image {
    display: flex;
    width: 28px;
    height: 28px;
}
.main-news-article-footer-byline-info {
    display: flex;
    align-items: center;
    margin-left: 6px;
}
.main-news-article-footer-byline-info-email {
    display: flex;
    margin-top: 2px;
    margin-left: 12px;
}
.main-news-article-footer-byline-info-email a {
    display: flex;
    align-items: center;
    justify-content: center;
}


.main-news-article-taboola {
    display: flex;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #222;
}
.main-news-article-taboola-container {
    display: block;
    width: 100%;
}

.main-news-aside {
    display: flex;
    padding: 0 calc((16)* 1px);
}
.main-news-aside-container {
    display: flex;
    flex-direction: column;
}
.main-news-aside-header {
    display: flex;
    padding-top: 8px;
    margin-top: 32px;
    border-top: 1px solid #222;
}
.main-news-aside-header span {
    font-size: 1.8rem;
    font-weight: 700;
    color: #222;
}
.main-news-aside-content {
    display: flex;
    margin-top: 20px;
    margin-bottom: 32px;
}
.main-news-aside-list {
    display: flex;
    flex-direction: column;
}
.main-news-aside-list-item {
    display: flex;
    padding: 12px 0;
    border-top: 1px solid #eaeaea;
}
.main-news-aside-list-item:first-child {
    padding-top: 0;
    border-top: 0;
}
.main-news-aside-list-item-number {
    display: flex;
    margin-right: 16px;
}
.main-news-aside-list-item-number span {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.44;
    color: #222;
}
.main-news-list-item-info-title {
    display: flex;
}
.main-news-list-item-info-title h3 {
    font-size: 1.8rem;
    font-weight: 400;
    color: #222;
    line-height: 1.5;
}
.main-news-list-item-info-title h3:hover {
    color: #707070;
}

.main-news-article-share {
    position: absolute;
    top: 80px;
    width: 66px;
    transform: translateX(-116px);
    z-index: 8;
}
.main-news-article-share.fixed {
    position: fixed;
}
.main-news-article-share-container {
    position: relative;
    display: flex;
}

.main-news-article-share-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 58px;
    height: 58px;
    border: 1px solid #eaeaea;
    cursor: pointer;
}
.main-news-article-share-btn:hover {
    background: #f7f7f7;
}

.main-news-article-share-list {
    position: absolute;
    display: none;
    justify-content: space-between;
    top: 0;
    left: 66px;
    width: 208px;
    padding: 16px;
    background-color: #fff;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
    z-index: 10;
}
.main-news-article-share-container:hover .main-news-article-share-list,
.main-news-article-share-list:hover {
    display: flex;
}
.main-news-article-share-list-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    cursor: pointer;
}
.main-news-article-share-list-item.active svg path,
.main-news-article-share-list-item:hover svg path {
    fill: #222;
}
.main-news-article-share-list-item.active svg circle,
.main-news-article-share-list-item:hover svg circle {
    stroke: #222;
}

.fixed-bottom-ad {
    position: fixed;
    display: flex;
    justify-content: center;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 50px;
    min-width: 320px;
    max-width: 640px;
    margin: 0 auto;
    background: 0 0;
    z-index: 9999999995
}

.fixed-bottom-ad-close,.fixed-bottom-ad-close-google {
    position: absolute;
    display: block;
    width: 15px;
    height: 15px;
    z-index: auto
}

.fixed-bottom-ad-close {
    top: 0;
    right: 0;
    background: #000
}

.fixed-bottom-ad-close svg {
    position: absolute;
    top: 0;
    right: 0;
    height: 15px;
    width: 15px;
    stroke: #fff;
    fill: #fff;
    stroke-width: 1.25
}

.fixed-bottom-ad-close-google {
    bottom: 0;
    left: 0;
    background: 0 0
}

/** clipboard **/
.clipboard-alert {
    position: fixed;
    display: flex;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 16px;

    z-index: 99999;
}
.clipboard-alert-container {
    clear: both;
    display: flex;
    flex: 1;
    justify-content: space-between;
    max-width: 1280px;
    margin: 0 auto;
    padding: 8px;
    background: #126ccd;
}
.clipboard-alert-message {
    display: flex;
    align-items: center;
}
.clipboard-alert-message span {
    margin-left: 8px;
    font-size: 1.4rem;
    color: #fff;
}
.clipboard-alert-close {
    display: flex;
    align-items: center;
}

/** 404 **/
.search-article {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    width: 100%;
}
.search-article-header {
    display: flex;
    padding: 15px 20px;
}
.search-article-header a {
    font-size: 1.7rem;
    font-weight: 700;
}
.search-article-list {
    display: flex;
    justify-content: space-between;
    padding: 10px 10px 20px 10px;
}
.search-article-list-item {
    display: flex;
    flex-direction: column;
    width: 20%;
    padding: 0 10px;
}
.search-article-list-item-thumbnail {
    display: block;
    width: 100%;
    height: 120px;
}
.search-article-list-item-thumbnail a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}
.search-article-list-item-thumbnail a::after {
    border: 1px solid #000;
    bottom: 0;
    content: "";
    left: 0;
    opacity: .04;
    position: absolute;
    right: 0;
    top: 0;
}
.search-article-list-item-title {
    display: flex;
    margin-top: 10px;
}
.search-article-list-item-title a {
    font-size: 1.5rem;
    font-weight: 700;
}
.search-article-list-item-title a:hover {
    opacity: .7;
}

/** 컨텍트 **/
.contact-container {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 900px;
    margin: 50px auto;
}
.contact-header {
    display: flex;
    flex-direction: column;
}
.contact-header h1 {
    font-size: 3.75rem;
    font-weight: 700;
    line-height: 1.2;
}
.contact-content {
    display: flex;
    flex-direction: column;
    margin-top: 50px;
}
.contact-content span {
    display: flex;
    margin-top: 20px;
    font-size: 1.4rem;
    font-weight: 400;
}
.contact-content span:first-child {
    margin-top: 0;
}
.contact-content span.bold {
    font-weight: 700;
    font-size: 1.5rem;
}
.contact-content span.no-margin {
    margin-top: 0;
}
.contact-form {
    display: flex;
    flex-direction: column;
}
.contact-form.advertise,
.contact-form.report {
    margin-top: 30px;
}
.contact-form-table {
    display: flex;
}
.contact-form-table form {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.contact-form-table table {
    display: block;
    width: 100%;
}
.contact-form-table table tbody {
    display: block;
    width: 100%;
}
.contact-form-table table tbody tr {
    display: block;
    width: 100%;
    border-bottom: 1px solid #ccc;
}
.contact-form-table table tbody tr:first-child {
    border-top: 1px solid #ccc;
}
.contact-form-table table td {
    display: block;
    width: 100%;
    background: #f4f5fa;
}
.contact-form-table table td > span {
    position: absolute;
    margin: 12px;
    right: 0;
    top: 0;
    font-size: 10px;
    color: #70757a;
}
.contact-form-table table td textarea {
    min-height: 154px;
}
.contact-form-table table td select {
    color: #70757a;
}
.contact-form-table table td input,
.contact-form-table table td select {
    height: 40px;
}
.contact-form-table table td input,
.contact-form-table table td select,
.contact-form-table table td textarea {
    width: 100%;
    padding: 10px 15px;
    border: none;
    resize: none;
    background: #f4f5fa;
    font-family: 'Noto Sans KR', "SF Pro KR", "SF Pro Text", "SF Pro Icons", "Apple Gothic", "맑은 고딕", "Malgun Gothic", "돋움", "Dotum", "Helvetica", "Arial", sans-serif;
    font-size: 1.6rem;
    outline: none;
}
.contact-form-check {
    display: flex;
    margin-top: 10px;
}
.contact-form-check label {
    display: flex;
    align-items: center;
    cursor: pointer;
}
.contact-form-check label input {
    vertical-align: middle;
}
.contact-form-check label span {
    margin: 0 0 0 5px;
    vertical-align: middle;
    font-size: 1.2rem;
    color: #70757a;
}
.contact-form-button {
    display: flex;
    justify-content: center;
    margin-top: 60px;
}
.contact-form-button a {
    display: flex;
    padding: 10px 30px;
    margin: 0 10px;
    border: 1px solid #fa3a39;
    font-weight: 700;
}
.contact-form-button a:hover {
    opacity: .7;
}
.contact-info {
    display: flex;
    flex-direction: column;
    margin-top: 50px;
    padding: 30px 0;
    border-top: 1px solid #ccc;
}

/* SUB */
.main-sub-headline {
    display: flex;
}
.main-sub-headline-article {
    display: flex;
    flex-direction: column;
    max-width: 67%;
    padding: 0 16px 0 0;
    border-right: solid 1px #eaeaea;
}
.main-sub-headline-article-top {
    display: flex;
    flex-wrap: wrap;
}
.main-sub-headline-article-top-title {
    display: flex;
    justify-content: center;
    width: 100%;
    padding-bottom: 12px;
}
.main-sub-headline-article-top-title h2 {
    font-size: 3.8rem;
    font-weight: 500;
}
.main-sub-headline-article-top-title h2:hover {
    color: #707070;
}
.main-sub-headline-article-top-summary {
    display: flex;
    flex-direction: column;
    flex-basis: 33.33%;
    max-width: 33.33%;
}
.main-sub-headline-article-top-summary h3 {
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.43;
}
.main-sub-headline-article-top-summary h3:hover {
    color: #707070;
}
.main-sub-headline-article-top-summary p {
    margin-top: 8px;
    font-size: 1.4rem;
    color: #999;
    word-break: break-all;
}
.main-sub-headline-article-top-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-left: 16px;
    max-height: 300px;
    overflow: hidden;
    flex-basis: 66.67%;
    max-width: 66.67%;
}
.main-sub-headline-article-top-image a {
    display: flex;
}
.main-sub-headline-article-top-image figcaption {
    display: none;
}

.main-sub-aside {
    display: flex;
    flex-direction: column;
    max-width: 33%;
    padding-left: 16px;
}
.main-sub-aside-list-item {
    display: flex;
    flex-direction: row;
    padding: 12px 0;
    border-bottom: 1px solid #eaeaea;
}
.main-sub-aside-list-item-info {
    display: flex;
    flex-direction: column;
    flex-basis: 64.67%;
    max-width: 64.67%;
}
.main-sub-aside-list-item-info-title h3 {
    font-size: 2rem;
    font-weight: 500;
    color: #222;
}
.main-sub-aside-list-item-info-title h3:hover {
    color: #707070;
}
.main-sub-aside-list-item-info-name {
    display: flex;
    margin-top: 8px;
}
.main-sub-aside-list-item-info-name span {
    font-size: 1.4rem;
    color: #999;
}
.main-sub-aside-list-item-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-left: 16px;
    flex-basis: 35.33%;
    max-width: 35.33%;
    max-height: 70px;
    overflow: hidden;
}
.main-sub-aside-list-item-image a {
    display: flex;
}
.main-sub-aside-list-item-image figcaption {
    display: none;
}
.main-sub-aside-list-item:last-child {
    border-bottom: 0;
}