* {margin:0;padding:0;word-break:keep-all;box-sizing:border-box !important;list-style:none;font-size:17px;font-family:roboto,noto-sans-kr;line-height:160%;text-decoration:none;color:#333;-webkit-text-size-adjust:100%;}

html, body {width:100%;text-align:center;background-color:whitesmoke;}

a {cursor:pointer;}
a:hover {color:dodgerblue;}
h1 {font-size:21px;font-weight:bold;}

.header {position:fixed;top:0;left:0;width:100%;height:55px;z-index:100;background:linear-gradient(135deg,#17C9A1,#0FB9B1,#1CA7EC);}
.header .title a {display:inline-block;font-size:31px;line-height:58px;color:white;font-weight:bold;letter-spacing:5px;}
.footer {padding:10px 0 50px 0;font-size:14px;color:grey;font-style:italic;}
.main {display:grid;grid-template-columns:680px 300px;justify-content:center;margin-top:55px;}
.main .right {text-align:left;background-color:#fcfcfc;}
@media (max-width:980px) { 
    .main {display:inline-block;width:100%;max-width:650px;} 
    .main .right {background-color:white;border-top:1px dotted lightgrey;}
}

.main .center {text-align:left;}
.main .center .lists {width:100%;background-color:white;}
.main .center .lists > div {padding:15px;border-bottom:1px dotted lightgrey;}
.main .center .lists .list .title {position:relative;}
.main .center .lists .list .date {color:grey;margin-bottom:10px;position:relative;}
.main .center .lists .list .date > a {font-size:20px;color:steelblue;}
.main .center .lists .list .date > a:hover {color:dodgerblue;}
.main .center .lists .list .date > a.list-link {position:absolute;right:0;top:-5px;}
.main .center .lists .list .card {display:grid;grid-template-columns:1fr 6fr;gap:15px;align-items:stretch;}
@media (max-width:980px) { .main .center .lists .list .card {grid-template-columns:1fr 3fr;gap:10px;align-items:start;} }
.main .center .lists .list .card .image { aspect-ratio:1/1;background-color:azure;background-size:cover;background-position:center;align-self:start;}
.main .center .lists .list .card .snippet > a {color:grey;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.main .center .lists .list .card .snippet > a:hover {color:dodgerblue;}

.main .center .view ul, .main .view li {all:revert;}
.main .center .view {width:100%;background-color:white;}
.main .center .view > div {padding:15px;}
.main .center .view .info .title {font-size:26px;font-weight:bold;color:steelblue;}
.main .center .view .info .date {color:grey;margin-bottom:10px;}
.main .center .view .info .lead {color:grey;margin-bottom:10px;}
.main .center .view .info .image {width:100%;text-align:center;}
.main .center .view .info .image img {width:100%;height:auto;}

.main .center .view .context .category {margin-bottom:15px;}
.main .center .view .context .category > .topics {margin-bottom:15px;}
.main .center .view .context .category > .topics > .topic {margin-bottom:15px;}

.main .center .view .context .category > .title {font-size:24px;font-weight:bold;color:lightcoral;margin-bottom:10px;}
.main .center .view .context .category > .para {margin-bottom:10px;}
.main .center .view .context .category > .topics > .topic > div > p {margin-bottom:10px;}
.main .center .view .context .category > .topics > .topic > .title {font-size:18px;font-weight:bold;color:steelblue;margin-bottom:10px;}
.main .center .view .context .category > .topics > .topic > .items li {line-height:120%;}
.main .center .view .context .category > .topics > .topic > .items li a {color:dodgerblue;font-size:15px;line-height:inherit;}
.main .center .view .context .category > .topics > .topic > .items li a::after{content:"⧉";margin-left:5px;}
.main .center .view .context hr {border:none;border-top:1px dotted lightgrey;margin-bottom:15px;}
.main .center .view .tags {text-align:center;}
.main .center .view .tags .tag {display:inline-block;color:lightcoral;font-weight:bold;margin:0 3px;}
.main .center .view .tags .tag::before {content:"#";}
.main .center .view .note {text-align:center;font-size:14px;color:grey;}

.main .center .page {padding:20px 0;text-align:center;background-color:white;}
.main .center .page .num {margin:0 2px;color:grey;}
.main .center .page .num:hover {color:dodgerblue;}

.main .center .info-header > div {color:#0FB9B1;font-size:18px;font-weight:bold;padding:10px 15px;background-color:white;border-bottom:1px dotted lightgrey;}

.main .right ul, .main .right li {all:revert;}
.main .right .sec  {padding:15px;}
.main .right .sec .title {font-size:19px;color:steelblue;font-weight:bold;}
.main .right .sec ul {margin:5px 0 0 0;}
.main .right .sec ul li a {color:grey;}
.main .right .sec ul li a:hover {color:dodgerblue;}

.att-width-400 {width:min(100%, 400px) !important;}
.att-highlight {color:lightcoral !important;}
.att-padding-left {padding-left:15px;}
/*
.att-color-lightcoral {color:lightcoral !important;}
*/