.article .center {  display: grid; grid-template-columns: 1fr 250px; gap: 30px; }

.article .outline { position: relative; width: 100%; height: 100%; }
.article .outline .outline-wrap { position: sticky; top: 80px; width: 100%; height: auto; }
.article .calculator { margin: 0 0 16px 0; }
.article .button-main { position: relative; display: inline-block; width: calc(100% - 40px); text-align: center; padding: 16px 20px; margin-bottom: 16px; cursor: pointer; border-radius: 10px; background: var(--blue); color: white; font-size: 14px; }
.article .button-main i { position: relative; margin-left: 5px; background-color: black; color: white; font-style: normal; font-weight: bold; padding: 2px 12px; border-radius: 8px; user-select: none; }
.article .button-main:hover { background: var(--grad-blue); }

.article .article-content { position: relative; text-align: justify; }
.article .article-content picture { position: relative; display: inline-block; width: 100%; height: 500px; border-radius: 14px; overflow: hidden; background-color: #dee2e8; }
.article .article-content picture .photo { position: absolute; display: block; height: 100%; width: 100%; object-fit: cover; }

.article .link-wrap { display: flex; flex-direction: column; gap: 14px; padding-left: 10px; margin: 30px 0; color: #3e64e2; }
.article .link-wrap .item { color: #3e64e2; text-decoration: underline; }
.article .link-wrap .item:hover { color: var(--darkblue); }
.article .link-wrap .item:before { content: '•'; position: absolute; margin-left: -10px; }

.article .article-bottom-wrap { position: relative; width: calc(100% - 32px); padding: 16px; margin: 20px 0; background-color: #f1f1f1; border-radius: 16px; display: flex; justify-content: space-around; align-items: center; color: #5c5c5c; gap: 10px; font-size: 13px; }
.article .article-bottom-wrap .item { display: flex; gap: 16px; align-items: center; }
.article .article-bottom-wrap .item .name { position: relative; max-width: 80px; vertical-align: center; line-height: 15px; }
.article .article-bottom-wrap .item .item-wrap { display: flex; gap: 14px; justify-content: space-between; align-items: center; color: black; font-weight: bold; }
.article .article-bottom-wrap .item .item-wrap a {}
.article .article-bottom-wrap .item .item-wrap img { position: relative; height: 24px; opacity: .7; cursor: pointer; }
.article .article-bottom-wrap .item .item-wrap img:hover { opacity: 1 }

@media screen and (max-width: 1050px) {
.article .article-bottom-wrap { flex-direction: column; align-items: flex-start; }
}

@media screen and (max-width: 400px) {
.article .article-bottom-wrap { width: 100%; margin-left: -20px; padding: 20px; border-radius: 0; }
}