@charset "utf-8";

 @import url('https://fonts.googleapis.com/css?family=Noto+Sans'); 
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR'); 
@import url('https://assets.playnccdn.com/ncui/css/theme/ncui-theme-combined.css'); 

::-webkit-scrollbar{ width:10px;height:10px; border-radius:50px;}
::-webkit-scrollbar-track{background-color:#E8E8E8; border-radius:50px;}
::-webkit-scrollbar-thumb{background:#000;border-radius:50px; }
::-webkit-scrollbar-thumb:hover{background:#000;}
::-webkit-scrollbar-thumb:active{background:#000;}
::-webkit-scrollbar-button { display: none; }

/* 초기화 */



html {}
body {margin:0;padding:0;font-size:0.75em;font-family:'Noto Sans','Noto Sans KR',-apple-system,BlinkMacSystemFont,Roboto,Arial,sans-serif;}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;font-family:'Noto Sans','Noto Sans KR',-apple-system,BlinkMacSystemFont,Roboto,Arial,sans-serif;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
#hd ul, nav ul, #ft ul {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle}
input, button {margin:0;padding:0;font-family:'Noto Sans','Noto Sans KR',-apple-system,BlinkMacSystemFont,Roboto,Arial,sans-serif;;font-size:1em}
button {cursor:pointer}
textarea, select {font-family:'Noto Sans','Noto Sans KR',-apple-system,BlinkMacSystemFont,Roboto,Arial,sans-serif;;font-size:1em}
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a:link, a:visited {color:#000;text-decoration:none}
a:hover, a:focus, a:active {color:crimson;text-decoration:none}

/* 레이아웃 */

.ncc-ncservice-btn>span { position: absolute; display: block; width: 20px; height: 20px; top: 20px; left: 16px; }
.ley_top{position: fixed; z-index: 9; width: 100%;}
.ley_top .top{width: 100%;background-color: rgba(0,0,0,5);height: 57px;}
.ley_top .top:after{clear: both;display: block;content: "";}
.ley_top .top .nav,.ley_top .top .ncc-bi{float: left;}
.ley_top .top .login{float: right;padding-top: 16px; padding-right: 16px;}
.nav span { position: absolute; display: block; width: 20px; height: 20px; top: 19px; left: 16px; }

.nav{position: relative;width: 32px;}
.nav span i{ display: block; position:relative; left: 0; width: 100%; border-top: 1px solid white; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); }
.nav span i:nth-child(1){ top: 0; } 
.nav span i:nth-child(2){ top: 6px; } 
.nav span i:nth-child(3){ top: 12px; }
.nav:hover span i:nth-child(1){ -webkit-transform: translate3d(5px, 1.5px, 0) rotate(45deg) scaleX(0.7); transform: translate3d(5px, 1.5px, 0) rotate(45deg) scaleX(0.7); } 
.nav:hover span i:nth-child(2){ -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } 
.nav:hover span i:nth-child(3){ -webkit-transform: translate3d(5px, -1.5px, 0) rotate(-45deg) scaleX(0.7); transform: translate3d(5px, -1.5px, 0) rotate(-45deg) scaleX(0.7); }
.ncc-bi{margin-left: 58px;}
.ncc-bi img{width: 77px; height: 57px;}

.login .login_btn a{font-size: 14px; font-weight: 400; vertical-align: middle; color: hsla(0,0%,100%,.7);}
.login .login_btn a:hover{color: #ffffff;}
.login .login_btn a:nth-child(2):before { content: ""; overflow: hidden; display: inline-block; width: 1px; height: 11px; margin: -3px 10px 0; border-right: 1px solid #fff; opacity: .2; vertical-align: middle; }


.bot{  height: 58px; border-top: 1px solid hsla(0,0%,100%,.1); background-color: rgba(0,0,0,5);}
.bot nav{margin: 0 0 0 36px;position: relative;}
.bot ul{display: flex;}
.bot ul li{position: relative;}
.bot ul li > a { position: relative; display: block; height: 58px; padding: 0 16px; font-size: 15px; font-weight: 400; line-height: 56px; color: hsla(0,0%,100%,.38); }
.bot ul li > a { -webkit-transition: color .4s ease; transition: color .4s ease;color: #fff;}
.bot ul:hover li > a{ color: hsla(0,0%,100%,.38); }
.bot ul:hover li > a:hover{color: #fff;}
.bot ul li dl{position: absolute; left: 0; min-width: 500px;margin: 0;display: none;}
.bot ul li:hover dl{display: block;}
.bot ul li dl dd{margin: 0 10px; width: auto; text-align: center; float: left;}
.bot ul li dl dd a{position: relative; display: block; padding: 10px 5px; font-size: 14px; font-weight: 400; color: #ff763b;} 
.bot ul li dl dd a:hover{color: #fff;}
.sub { float: left; }

.footer{height: 60px;line-height: 60px; text-align: center; background: #000000; color: #fff;margin-top: 84px;}


ol, ul { list-style: none; padding: 0;}
.main{ margin: 40px auto }
.main .line{ width: 100%; max-width: 1180px; margin: 0 auto; }
.main .line:after{clear: both;display: block;content: "";}
.main .news {position: relative; background-color: #fff; overflow: hidden; float: left; -webkit-box-shadow: 0 0 8px rgb(0 0 0 / 10%); box-shadow: 0 0 8px rgb(0 0 0 / 10%); height: 335px; margin-left: 10px; border-radius: 6px; height: 355px;}
.main .news{width: 50%; margin: 0; box-sizing: border-box;}
.main .news  .notice-title{ padding-top: 34px; padding-bottom: 26px; font-size: 20px; }
.notice-list { padding-bottom: 20px; font-size: 14px; line-height: 1.6; margin-top: -5px; }
.notice-list { font-size: 15px; }
.notice .notice-item { position: relative; color: #222; padding: 7px 0 0 10px; font-size: 15px; line-height: 18px; }
.main .news{ position: relative; height: 330px; padding: 0 16px; }
.notice-item:before { position: absolute; left: 0; top: 15px; content: ''; display: block; width: 3px; height: 3px; border-radius: 50%; background-color: #999; }
.notice .notice-more { position: absolute; top: 35px; right: 16px; display: inline-block; width: 21px; height: 21px; border-radius: 50%; background-color: rgba(0,0,0,.35); }
.notice .notice-more:before { position: absolute; left: 6px; top: 9px; content: ''; display: block; width: 10px; height: 2px; background-color: #fff; }
.blind { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden; }
.notice .notice-more:after { position: absolute; left: 10px; top: 5px; content: ''; display: inline-block; width: 2px; height: 10px; background-color: #fff; }
.main .news:nth-child(1){margin-left: 0;}
.main .news:last-child{background: url("../img/bg-membership.png") no-repeat center;}
.main .news:last-child h2{color: #fff;}
.main .news:last-child li a{color: rgba(255,255,255,.7);}
.main .news:last-child .notice-item:before { position: absolute; left: 0; top: 15px; content: ''; display: block; width: 3px; height: 3px; border-radius: 50%; background-color: #fff; }

.main .news.pg{text-align: center;text-align: center; background: url(../img/bg_img.png) no-repeat #ecf0f4; background-size: contain; background-position: bottom;}
.pg h2{padding-top: 41px; padding-bottom: 10px;font-size: 20px;color: #222;}
.pg .desc { padding-bottom: 23px;padding: 0 10px 12px; font-size: 13px; line-height: 1.2; color: rgba(34,34,34,.5); }
.pg .link { display: inline-block; min-width: 120px; max-width: 154px; height: 40px; padding-left: 10px; padding-right: 10px; margin: 0 auto; text-align: center; font-size: 13px; line-height: 40px; color: #3c3c88; background-color: #fff; text-decoration: none; -webkit-box-shadow: 0 1px 2px 1px rgb(136 136 136 / 30%); box-shadow: 0 1px 2px 1px rgb(136 136 136 / 30%); }

.main header { position: relative;  padding: 5px 0 17px; text-align: center; }
.main header h2 { position: relative; display: inline-block; margin: 0 auto; padding: 0 32px; font-size: 18px; line-height: 1.6; color: #1f1f1f; background-color: #fff; z-index: 3; }
.main header::after { content: ''; display: block; position: absolute; top: 20px; left: 0; width: 100%; height: 1px; background-color: #eee; z-index: 1; }

.poto_list{display: flex;}
.poto_list li{width: calc(100% * .25 - 7px * (1 - .25));margin-left: 7px;box-shadow: 0 0 8px rgb(0 0 0 / 10%); border-radius: 6px; background-color: #fff;}
.poto_list li:nth-child(1){margin-left: 0;}
.poto_list li .themp{border-radius: 6px 6px 0 0;overflow: hidden;}
.poto_list li .themp img{width: 100%;}
.poto_list li .info{height: 120px; padding: 40px 0 0 20px;}
.poto_list li .info h3{padding-bottom: 11px;font-size: 20px;}
.poto_list li .info p{white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis;font-size: 18px;}

.wrap-header{ position: static; min-height: 197px; background-repeat: no-repeat; background-size: cover; background-position: 50% 0; background-color: var(--ncui-point); background-image: url(../img/header-bns-2022.jpg);}


.pg_sub .page_list{min-width: 360px; margin: 0 auto; padding-top: 49px;max-width: 1180px;font-size: 15px;padding-top: 55px;}

nav.ui-tab{position: relative; overflow: hidden; height: 49px; display: table; width: 100%; border-bottom: 1px solid rgba(34,34,34,.12); font-size: 0;height: 54px; border-bottom: 0; margin-bottom: 25px; background: 0 0;}
nav.ui-tab .tab{position: relative; display: table; padding: 0; border: 0;width: 100%!important;}

.ui-tab-item{width: 50%;box-sizing: border-box; position: relative; word-break: keep-all; white-space: nowrap; text-decoration: none; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 28px; margin: 8px 10px 0; font-size: 16px; color: rgba(0,0,0,.68); }
.ui-tab-item{ -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0; height: 54px; padding: 0 24px; text-align: center; vertical-align: top; color: rgba(0,0,0,.68); border: 1px solid rgba(34,34,34,.12); background-color: rgba(34,34,34,.04); }
.ui-tab-item+.ui-tab-item, .ui-tab-item:link+.ui-tab-item { border-left: 0; }

.ui-tab-item.is-active, .ui-tab-item:link.is-active { text-decoration: none; color: #fff; padding: 0 12px; border-radius: 14px; background-color: #3b429f; }
.ui-tab-item.is-active, .ui-tab-item:link.is-active { height: 53px; margin: 0; color: #4f4ab1; border-radius: 0; border-bottom: 0; border-top: 2px solid #3b429f; background-color: #fff; }

.board-items{display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; min-width: 0; padding: 16px 0; border-width: 0 0 1px; border-style: solid; border-color: rgba(34,34,34,.08);}
.board-list-compact .board { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; min-width: 0; padding: 0 16px; }
.board-list-compact{border-top: 4px solid #ddd;}
.board-list-compact .board-meta, .board-list-compact .writer { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-negative: 0; flex-shrink: 0; }
.board-list-compact .board-meta { height: 36px; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; margin: 0; padding: 0; }
.board-list-compact .board-meta, .board-list-compact .writer { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-negative: 0; flex-shrink: 0; }
.board-list-compact .writer { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; font-size: 14px; }
.board-list-compact .reactions { -ms-flex-negative: 0; flex-shrink: 0; font-size: 13px; color: rgba(0,0,0,.45);}
.board-list-compact .reactions, .board-list-compact .reactions .wrap-count { display: -webkit-box; display: -ms-flexbox; display: flex; }
.board-list-compact .board-meta { -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 5px; padding: 0 16px; }
.board-list-compact .writer .posted-at { margin: 0 8px; }

.board-view{min-width: 360px; margin: 0 auto;}
.view-header { position: relative; border-bottom: 1px solid rgba(34,34,34,.12); padding-bottom: 18px; margin: 0 18px; }
.view-header .view-title { margin: 0; font-weight: 400; font-size: 22px; line-height: 1.25; color: rgba(0,0,0,.93); }
.view-header .view-info { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; margin-top: 10px; font-size: 14px; line-height: 22px; color: rgba(0,0,0,.45); }
.view-header .view-info .comment-count:before, .view-header .view-info .race:before, .view-header .view-info .recommend:before, .view-header .view-info .server:before, .view-header .view-info .view-count:before {line-height: 25px; content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 0.8em; background-color: rgba(34,34,34,.08); -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.view-header .view-info .comment-count, .view-header .view-info .race, .view-header .view-info .recommend, .view-header .view-info .server, .view-header .view-info .view-count { line-height: 25px;position: relative; padding-left: 6px; margin-left: 6px; }

.view-body { padding: 16px 18px 12px; font-size: 16px; line-height: 1.6; color: rgba(0,0,0,.93); }
.board-view .view-body { min-height: 300px;border-bottom: 1px solid #ddd; }





/* 갤러리 */

.board-list-classic .classic-items { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; min-width: 0; padding-top: 20px; border-width: 0 0 1px; border-style: solid; border-color: rgba(34,34,34,.08); }
.board-list-classic .board { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; min-width: 0;box-sizing: border-box; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 0 16px; }
.board-list-classic .article-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.board-list-classic .article { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; min-width: 0; padding: 0 16px 0 0; }
.board-list-classic .article .summary { direction: auto; margin-top: 5px; font-size: 15px; color: rgba(0,0,0,.45); word-wrap: break-word; position: relative; display: block; display: -webkit-box; overflow: hidden; max-height: 3.8em; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.board-list-classic .thumb { position: relative; -ms-flex-negative: 0; flex-shrink: 0; width: 66px; height: 66px; overflow: hidden; border-radius: 8px; }
.board-list-classic .thumb img { position: absolute; top: 50%; left: 50%; display: block; width: auto; height: 100%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
.board-list-classic .thumb a, .board-list-classic .thumb a:after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.board-list-classic .thumb a:after { content: ""; border: 1px solid rgba(34,34,34,.12); border-radius: 8px; }
.board-list-classic .board-meta { width: 100%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin: 18px 0 17px; font-size: 14px; color: rgba(0,0,0,.45); }
.board-list-classic .board-meta, .board-list-classic .board-meta .board-meta-info, .board-list-classic .board-meta .writer-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; }
.board-list-classic .board-meta .board-meta-info { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.board-list-classic .board-meta .name { color: rgba(0,0,0,.68); }
.board-list-classic .board-meta .race, .board-list-classic .board-meta .server { display: none; }
.board-list-classic .board-meta .race:before, .board-list-classic .board-meta .server:before { content: ""; display: inline-block; width: 2px; height: 2px; margin: 0 4px; border-radius: 100%; vertical-align: middle; background-color: rgba(34,34,34,.2); }
.board-list-classic .board-meta .posted-at { margin: 0 8px 0 0; }
.board-list-classic .board-meta .posted-at:before { content: ""; display: inline-block; width: 2px; height: 2px; margin: 0 4px; border-radius: 100%; vertical-align: middle; background-color: rgba(34,34,34,.2); }
.board-list-classic .reactions { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; min-height: 38px; padding: 0 16px; border-width: 1px 0 0; border-style: solid; border-color: rgba(34,34,34,.08); font-size: 13px; color: rgba(0,0,0,.45); }
.board-list-classic .reactions .wrap-count { display: -webkit-box; display: -ms-flexbox; display: flex; min-width: 0; }
.board-list-classic .reactions .recent-comment, .board-list-classic .reactions .view-count { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.board-list-classic .reactions .wrap-count svg+em { margin: 0 0 0 4px; }
.board-list-classic .reactions .recent-comment { -ms-flex-wrap: nowrap; flex-wrap: nowrap; min-width: 0; }
.board-list-classic .reactions .wrap-count>div+span, .board-list-classic .reactions .wrap-count>span+div, .board-list-classic .reactions .wrap-count>span+span { margin: 0 0 0 14px; }
.board-list-classic .reactions .wrap-count svg+em { margin: 0 0 0 4px; }


.board-top-utils { z-index: 12; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; width: 100%; min-width: 0; height: 58px; padding: 0; border-width: 6px 0 1px; border-style: solid; border-color: rgba(34,34,34,.08); color: rgba(0,0,0,.68); }
.board-top-utils { position: relative; }
.board-top-utils .board-filters { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.board-top-utils .board-utils { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; width: auto; }
.board-top-utils .board-utils, .board-top-utils .board-utils-buttons, .board-top-utils .board-utils-search { display: -webkit-box; display: -ms-flexbox; display: flex; }
.board-top-utils .board-utils-search { width: 100%; text-align: right; -webkit-tap-highlight-color: rgba(0,0,0,0); }
.board-top-utils.is-active .board-utils-search { z-index: 2; }
.co-btn, .nc-comment-more, .nc-comment-more_tag, .ncCommentMore { display: inline-block; margin: 0; padding: 0; border: 0; line-height: 1; text-align: center; vertical-align: middle; white-space: nowrap; text-decoration: none; background: transparent; color: rgba(0,0,0,.68); cursor: pointer; }
.co-btn-ok, .co-btn-write { border: 0!important; color: #fff; background-color: #c69c7c; }
.btn-write, .co-btn-write, .co-btn-write-submit { color: #fff; border: 1px solid #4f4ab1; background-color: #4f4ab1; }
.board-top-utils .board-utils .co-btn-ok, .board-top-utils .board-utils .co-btn-write { position: fixed; right: 16px; bottom: 16px; min-width: auto; width: 52px; height: 52px; z-index: 10; border-radius: 50px; padding: 0; -webkit-box-shadow: 0 2px 4px 0 rgb(0 0 0 / 25%); box-shadow: 0 2px 4px 0 rgb(0 0 0 / 25%); }
.board-top-utils .board-utils .co-btn-ok svg, .board-top-utils .board-utils .co-btn-write svg { width: 26px; height: 26px; }
.co-btn-ok span, .co-btn-ok svg, .co-btn-write span, .co-btn-write svg { color: #fff!important; fill: #fff; }
.board-top-utils .board-utils .co-btn-ok span, .board-top-utils .board-utils .co-btn-write span { display: none; }
.board-top-utils .board-utils, .board-top-utils .board-utils-buttons, .board-top-utils .board-utils-search { display: -webkit-box; display: -ms-flexbox; display: flex; }
.board-top-utils .board-utils-buttons { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -ms-flex-negative: 0; flex-shrink: 0; }


.board-prev-next-article, .nc-community-comment, .nc-community-list, .view-body, .view-bottom, .view-header, .view-signature, .view-utils { max-width: 1260px; margin: 0 auto; }
.co-btn-wrap, .view-bottom { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; }
.view-bottom { -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; padding: 30px 16px 0; border-top: 1px solid rgba(34,34,34,.12); }
.view-bottom .right { position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; }

.co-btn, .nc-comment-more, .nc-comment-more_tag, .ncCommentMore { display: inline-block; margin: 0; padding: 0; border: 0; line-height: 1; text-align: center; vertical-align: middle; white-space: nowrap; text-decoration: none; background: transparent; color: rgba(0,0,0,.68); cursor: pointer; }
.co-btn-view-bottom { height: 36px;line-height: 36px; border: 1px solid rgba(34,34,34,.12); border-radius: 4px; font-size: 14px; padding: 0 9px; }
.view-bottom .left .co-btn-list { font-size: 0; padding-left: 10px; }
.view-bottom .left .co-btn-list .fe-svg, .view-bottom .left .co-btn-list span { vertical-align: middle; }
.view-bottom .left .co-btn-list span { font-size: 14px; }
.view-bottom .right .co-btn-view-bottom { margin: 0 0 0 8px; }
.btn-write, .co-btn-write, .co-btn-write-submit { color: #fff !important; border: 1px solid #4f4ab1; background-color: #4f4ab1; }

/* 갤러리2 */
.nc-community-comment *, .nc-community-list *, .nc-community-view * { box-sizing: border-box; }
.board-list-card *{box-sizing: border-box;}
.board-list-card .card-items { border-color: #ddd; border-style: solid; border-width: 0 0 8px; display: flex; flex-direction: column; margin: 0; padding-top: 16px; width: 100%;padding-bottom:0 ; }
.board-list-card .thumb { border-radius: 8px; flex: none; height: 140px; margin: 0 16px 16px; overflow: hidden; position: relative; }
.board-list-card .thumb img { display: block; position: absolute; top: 50%; transform: translateY(-50%); width: 100%; }
.board-list-card .thumb a, .board-list-card .thumb a:after { bottom: 0; left: 0; position: absolute; right: 0; top: 0; }
.board-list-card .thumb a:after { border-color: #ddd; border-radius: 8px; border-style: solid; border-width: 1px; content: ""; }
.board-list-card .board { display: flex; flex-direction: column; padding: 0 16px; position: relative; }
.board-list-card .board .summary { -webkit-box-orient: vertical; -webkit-line-clamp: 2; word-wrap: break-word; color: var(--ncui-black045); display: block; display: -webkit-box; font-size: 15px; margin-top: 6px; max-height: 3em; overflow: hidden; position: relative; text-overflow: ellipsis; word-break: keep-all; }
.board-list-card .board-meta { align-items: center; color: var(--ncui-black045); display: flex; font-size: 14px; margin: 9px 0 15px; padding: 0 16px; white-space: nowrap; width: 100%; }
.board-list-card .name { line-height: 19px; }
.board-list-card .posted-at { line-height: 19px; }
.board-list-card .posted-at:before { background-color: var(--ncui-gray020); border-radius: 100%; content: ""; display: inline-block; height: 2px; margin: 0 4px 1px; vertical-align: middle; width: 2px; }
.board-list-card .reactions { border-color: #ddd; border-style: solid; border-width: 1px 0 0; color: var(--ncui-black045); font-size: 13px; height: 38px; justify-content: space-between; padding: 0 16px; width: 100%; }
.board-list-card .reactions, .board-list-card .reactions .wrap-count { align-items: center; display: flex; }
.board-list-card .reactions .comment-count, .board-list-card .reactions .count-like, .board-list-card .reactions .view-count { align-items: center; display: flex; }
.board-list-card .reactions .comment-count em, .board-list-card .reactions .count-like em, .board-list-card .reactions .view-count em { margin: 0 0 0 4px; }
.board-list-card { display: flex; flex-wrap: wrap; margin: 16px 0 0; }

.btn__start { position: absolute; z-index: 0; display: block; width: 190px; height: 58px; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: center; font-size: 21.5px; color: #fff; background-color: transparent; -webkit-transition: all .3s ease; transition: all .3s ease; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; vertical-align: top; line-height: 56px; top: 0; right: 0; background: #c58d62; }
.btn__start a{color: #fff;}
.btn__start:hover { background: #5c3f2a; }

.new_icon{background: #f00; color: #fff; width: 20px; height: 20px; display: inline-block; text-align: center; border-radius: 50%; font-size: 12px; line-height: 19px;}

.board-list-compact .writer img{width: 25px;}
.board-list-classic .board-meta .name img{width: 25px;}
.board-list-card .board-meta img{width: 40px;}
@media (min-width: 1180px) {
    .board-view { max-width: 1180px; }
    .main .news{ width: calc(24% - 5px); margin-left: 22px;}
}


@media (min-width: 960px) {
    .pg_sub{ padding-left: 40px; padding-right: 40px; }
    .board-list-compact .compact-items { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 24px 0; }
    .board-list-compact .board { padding: 0 24px; }
    .board-list-compact .writer { width: 220px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
    .board-list-compact .board-meta>div { border-width: 0 0 0 1px; border-style: solid; border-color: rgba(34,34,34,.08); }
    .board-list-compact .reactions { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 170px; padding: 0 24px 0 20px; }
    .board-list-compact .board-meta>div { border-width: 0 0 0 1px; border-style: solid; border-color: rgba(34,34,34,.08); }
    .board-view{ padding-top: 55px; }
    .view-header { padding-bottom: 22px; }
    .view-header .view-title { font-size: 28px; }
    .view-body { font-size: 18px; line-height: 1.7; padding-bottom: 22px; }
    .view-header { padding-bottom: 22px; }
    .board-view { margin-bottom: 42px; }
    .footer{margin-top: 70px;}
    .main .news{ width: calc(24% - 5px); margin-left: 22px;}

    /* 갤러리 */
    .board-list-classic .classic-items { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 24px 0; }
    .board-list-classic .board { min-height: 94px; padding: 0 24px; }
    .board-list-classic .article-wrap { min-height: 94px; }
    .board-list-classic .article { padding: 0 24px 0 0; }
    .board-list-classic .article .wrap-title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 3px; }
    .board-list-classic .article .title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .board-list-classic .article .summary { font-size: 16px; margin-top: 6px; position: relative; display: block; display: -webkit-box; overflow: hidden; max-height: 1.9em; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
    .board-list-classic .thumb { width: 94px; height: 94px; margin-top: -1px; }
    .board-list-classic .board-meta { -webkit-box-pack: initial; -ms-flex-pack: initial; justify-content: initial; margin: -26px 0 0; }
    .board-list-classic .board-meta .race, .board-list-classic .board-meta .server { display: inline-block; }
    .board-list-classic .reactions { display: -webkit-box!important; display: -ms-flexbox!important; display: flex!important; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-negative: 0; flex-shrink: 0; width: 273px; padding: 7px 0 8px 24px; border-width: 0 0 0 1px; }
    .board-list-classic .reactions .wrap-count { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
    .board-list-classic .reactions .wrap-count>div+span, .board-list-classic .reactions .wrap-count>span+div, .board-list-classic .reactions .wrap-count>span+span { margin: 6px 0 0!important; }
    .board-list-classic .reactions .recent-comment .comment-count { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-negative: 0; flex-shrink: 0; }

    .board-top-utils { height: auto; margin-top: 7px; padding-bottom: 20px; border-width: 0 0 5px; }
    .board-top-utils .board-filters { padding: 0!important; }
    .board-top-utils .board-utils-search { width: 100%; text-align: right; -webkit-tap-highlight-color: rgba(0,0,0,0); }
    .board-top-utils .board-utils-search { width: auto; margin: 0 4px; }
    .board-top-utils .board-utils .co-btn-ok, .board-top-utils .board-utils .co-btn-write { position: relative; right: auto; bottom: auto; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; justify-items: center; width: auto; height: 36px; margin-right: 0; margin-left: 4px; padding: 8px 15px 0 12px; border-radius: 4px; -webkit-box-shadow: none; box-shadow: none; font-size: 15px; letter-spacing: -.42px; }
    .board-top-utils .board-utils .co-btn-ok svg, .board-top-utils .board-utils .co-btn-write svg { width: 22px; height: 22px; }
    .board-top-utils .board-utils .co-btn-ok span, .board-top-utils .board-utils .co-btn-write span { display: inline-block; padding: 2px 0; }

    .view-bottom { padding: 25px 0 0; }
   /* 갤러리2 */
   .board-list-card .card-items { max-width: calc(33.3% - 20px) !important; }
   .board-list-card .board .summary { font-size: 16px; }

    }


    @media (min-width: 600px) {
        .view-header .view-info .date { padding-left: 6px; margin-left: 6px; position: relative; }
        .view-header .view-info .comment-count, .view-header .view-info .race, .view-header .view-info .recommend, .view-header .view-info .server, .view-header .view-info .view-count { padding-left: 6px; margin-left: 6px; }
   

         /* 갤러리2 */
         .board-list-card { margin: 20px -6px 5px; }
         .board-list-card .card-items { border-width: 1px; flex: 1 0 500px; height: 456px; margin: 10px 10px 20px; max-width: calc(50% - 20px); padding-top: 24px; }
         .board-list-card .thumb { height: 160px; margin: 0 24px 16px; }
         .board-list-card .board { flex-grow: 1; padding: 0 24px; }
         .board-list-card .board-meta { margin: 18px 0 24px; padding: 0 24px; }
         .board-list-card .reactions { background-color: rgb(34 34 34 / 2%);; border-width: 0; display: flex!important; height: 50px; padding: 0 24px; }
   
    }
    @media (max-width: 520px) {
        .main .news { width: 100%; margin: 0; box-sizing: border-box; }
        .bot{display: none;}
        .poto_list { display: block; }
        .poto_list li { width: 50%; float: left; margin: 0; padding: 0 5px; box-sizing: border-box; margin-bottom: 10px; }
        .board-list-compact .writer img{max-width: 25px;}
        .board-list-compact .writer .date{line-height: 24px;}
        .board-items{padding-bottom: 0;}
    }