@charset "utf-8";

.article a.more {display:block; width:100%; margin-top:16px; line-height:50px; font-weight:600; text-align:center; border:1px solid #ededed; border-radius:3px; box-sizing:border-box;}

/* 검색 */
.article > * > * > .article-form {padding:0 16px; margin-top:16px;}
.article > * > * > .article-form > strong {display:none; font-size:20px; line-height:22px;}
.article > * > * > .article-form > div {position:relative;}
.article > * > * > .article-form > div > input {height:46px; border-radius:23px;}
.article > * > * > .article-form > div > button {position:absolute; top:0; right:0; height:100%; width:54px; background:url(../images/icon-search-form.png) no-repeat; background-size:22px auto; background-position:center center;}

/* 카테고리 */
.article > .category {display:flex; align-items:center; margin-top:16px; border-top:1px solid #eee;}
.article > .category > strong {display:block; width:80px; margin-left:16px;}
.article > .category > .list {width:calc(100% - 80px - 16px);}
.article > .category > .list > ul {display:flex;}
.article > .category > .list > ul > li {display:inline-flex; justify-content:center; align-items:center; width:auto;}
.article > .category > .list > ul > li:after {display:inline-flex; justify-content:center; align-items:center; content:'|'; color:#eee;}
.article > .category > .list > ul > li:last-child:after {display:none;}
.article > .category > .list > ul > li > a {display:block; padding:16px 8px; line-height:16px; box-sizing:border-box;}
.article > .category > .list > ul > li > a.on {font-weight:600; text-decoration:underline;}

/* 목록 */
.article > .list {padding:16px; border-top:1px solid #eee;}
.article > form + .list {margin-top:16px;}
.article > .list > ul > li {width:100%; padding-top:16px; margin-top:16px; border-top:1px solid #f2f3fe;}
.article > .list > ul > li:first-child {padding-top:0; margin-top:0; border-top-style:none;}
.article > .list > ul > li > a {display:block; width:100%; height:100%;}
.article > .list > ul > li > a > span {display:inline-block; padding:0 12px; font-size:12px; line-height:28px; color:#6b60eb; background-color:#eee; border-radius:5px;}
.article > .list > ul > li > a > strong {display:block; margin-top:8px; font-size:16px; font-weight:500; line-height:25px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.article > .list > ul > li > a > em {display:block; height:69px; margin-top:5px; font-size:14px; line-height:23px; color:#999; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;}
.article > .list > ul > li > a > small {display:block; margin-top:8px; color:#999; text-align:right; line-height:20px;}
.article > .list > ul > li > a > small > img {width:20px; height:20px; margin-right:4px; border:1px solid #eee; border-radius:10px; vertical-align:middle;}

/* 조회 */
.article > .subject {padding:0 16px; margin-top:16px;}
.article > .subject > span {display:inline-block; padding:0 12px; font-size:12px; line-height:28px; color:#6b60eb; background-color:#eee; border-radius:5px;}
.article > .subject > strong {display:block; margin-top:8px; font-size:16px; font-weight:500; line-height:25px;}
.article > .view {padding:16px 0; margin:0 16px; margin-top:16px; border-top:1px solid #f2f3fe;}
.article > .view > .copy {padding:16px; margin-top:32px; font-size:12px; line-height:16px; background-color:#f9f9f9; border-radius:3px;}
.article > .view > .copy > strong {display:block; font-size:13px; font-weight:500; line-height:20px; color:#ff4500;}
.article > .view > .expert {position:relative; display:flex; align-items:center; padding:16px 0; margin-top:16px; border-top:1px solid #f2f3fe;}
.article > .view > .expert > img {width:50px; height:50px; margin-right:4px; border:1px solid #eee; border-radius:25px; vertical-align:middle;}
.article > .view > .expert > strong {margin-left:16px;}
.article > .view > .expert > strong > em {display:block; margin-top:4px; font-weight:400; color:#999;}
.article > .view > .expert > button {position:absolute; right:0; top:16px; padding:0 16px; height:50px; color:#fff; background-color:#333; border-radius:3px;}
.article > .view img,
.article > .view iframe,
.article > .view video {max-width:100%;}

/* 이미지 */
.article.image > .list > ul > li {height:calc(100vw - 32px);}
.article.image > .list > ul > li > a > em {position:relative; display:block; width:100%; height:100%; margin:0; overflow:hidden; background-color:#fefefe;}
.article.image > .list > ul > li > a > em > img {position:absolute; left:0; top:50%; transform:translateY(-50%); display:block; width:100%;}
.article.image > .list > ul > li > a > strong {display:block; margin-top:8px; font-weight:500; line-height:23px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}

/* 동영상 */
.article > .video {margin:0 16px; margin-top:16px; background-color:#333;}
.article > .video > iframe {width:100%; height:calc(100vw * 0.5625); border-style:none;}

/** PC */
@media all and (min-width:760px) {
	.article {width:1320px; margin:0 auto;}
	.article a.more {width:250px; margin:0 auto; margin-top:32px; border-radius:25px;}
	
	.article > * > * > .article-form {display:flex; align-items:center; justify-content:space-between; padding:0; margin-top:16px;}
	.article > * > * > .article-form > strong {display:block;}
	.article > * > * > .article-form > div {width:350px; margin-left:auto;}
	
	.article > .category > strong {margin-left:0;}
	.article > .category > .list {width:calc(100% - 80px);}
	
	.article > .list {padding:0;}
	.article > .list > ul {display:flex; flex-wrap:wrap; width:100%;}
	.article > .list > ul > li {width:645px; padding-top:0; margin-top:30px !important; margin-left:30px; border-top-style:none;}
	.article > .list > ul > li:nth-child(odd) {margin-left:0;}
	.article > .list > ul > li > a > span {font-size:14px; line-height:30px;}
	.article > .list > ul > li > a > strong {font-size:17px;}
	.article > .list > ul > li > a > em {font-size:15px;}
	
	.article > .subject {padding:0; margin-top:32px;}
	.article > .subject > strong {font-size:20px; line-height:30px;}
	.article > .view {padding:32px 0; margin:0; margin-top:32px;}
	.article > .view > .copy {padding:0; margin-top:64px; background-color:#fff;}
	.article > .view > .expert {padding:32px 0; margin-top:32px;}
	.article > .view > .expert > button {top:32px; padding:0 32px;}
	
	.article.image > .list > ul > li {width:307.5px; height:307.5px; padding-top:0; margin-left:0; margin-right:30px !important; margin-top:32px !important; border-top-style:none;}
	.article.image > .list > ul > li:nth-child(4n) {margin-right:0 !important;}
	.article.image > .list > ul > li > a {display:block; width:100%; height:100%;}
	.article.image > .list > ul > li > a > strong {margin-top:15px; font-size:15px;}
	
	.article > .video {margin:0; margin-top:32px; background-color:#333;}
	.article > .video > iframe {display:block; width:800px; height:450px; margin:0 auto;}
}