@charset "utf-8";

/* bbs-view */

.bbs-view {padding:30px 0 0 0;}
.bbs-view a {text-decoration:none;}
.bbs-view .header {border-top:1px solid #555555; border-bottom:1px solid #e8e8e8; background-color:#fff;}
.bbs-view .header .title {
    padding:15px 15px 15px 20px;
    display:-webkit-box;
    display:-moz-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
}
.bbs-view .header .title ul:nth-child(1) {
    margin-right:20px;
    display:-webkit-box;
    display:-moz-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-align-items:center;
    -ms-flex-align:center;
    -webkit-justify-content:center;
    align-items:center;
    justify-content:center;
}
.bbs-view .header .title ul:nth-child(1) li {
    display:-webkit-inline-box;
    display:-moz-inline-box;
    display:-webkit-inline-flex;
    display:-ms-inline-flexbox;
    display:inline-flex;
    display:flex;
}
.bbs-view .header .title ul:nth-child(1) span,
.bbs-view .header .title ul:nth-child(1) h1 {
    display:inline-block;
    -webkit-box:none;
    -moz-box:none;
    -webkit-flex:none;
    -ms-flex:none;
    flex:none;
}
.bbs-view .header .title ul:nth-child(2) {margin-left:auto; white-space:nowrap;}
.bbs-view .header .title ul:nth-child(2) li {display:inline-block; vertical-align:top;}
.bbs-view .header .title ul:nth-child(2) li:nth-child(n+2) {margin-left:2px;}
.bbs-view .header .icon-notice {margin-right:15px; width:30px; height:30px; background:var(--bbs-btn) no-repeat; background-position:-300px 0px;}
.bbs-view .header .ct {margin-right:5px;}
.bbs-view .header .ct {font-family: var(--family-regular);font-weight: var(--weight-regular); line-height:1.7; font-size:16px; color:var(--bbs-color1);}
.bbs-view .header h2 {max-width:100%; width:100%; margin-left:auto; word-wrap:break-word; word-break:break-all;}
.bbs-view .header h2 {font-family: var(--family-regular);font-weight: var(--weight-regular); line-height:1.7; font-size:16px; color:#000000;}
.bbs-view .header .btn {z-index:1; position:relative; display:block; width:40px; height:40px; background-color:#f4f4f4; border-radius:100%; cursor:pointer;}
.bbs-view .header .btn:after {z-index:-1; content:''; position:absolute; left:calc(50% - 15px); top:calc(50% - 15px); width:30px; height:30px; background:var(--bbs-btn) no-repeat; background-position-y:-400px; opacity:0.5;}
.bbs-view .header .btn p {display:none;}
.bbs-view .header .btn p {z-index:10; position:absolute; left:calc(50% - 50px); top:-36px; width:100px; text-align:center;}
.bbs-view .header .btn p span {z-index:1; display:inline-block; position:relative; padding:0 10px; background-color:#fbbc05; border-radius:3px;}
.bbs-view .header .btn p span {font-family: var(--family-regular);font-weight: var(--weight-regular); line-height:27px; font-size:15px; color:#fff;}
.bbs-view .header .btn p span:after {z-index:-1; content:''; position:absolute; left:calc(50% - 4px); bottom:-4px; width:8px; height:4px; background:var(--bbs-btn) no-repeat; background-position:0px -200px;}
.bbs-view .header .btn:hover {z-index:1000; background-color:var(--bbs-color1);}
.bbs-view .header .btn:hover p {display:block;}
.bbs-view .header .btn:hover:after {background-position-y:-350px; opacity:1;}
.bbs-view .header .btn.ty-write:after {background-position-x:-750px;}
.bbs-view .header .btn.ty-edit:after {background-position-x:-800px;}
.bbs-view .header .btn.ty-del:after {background-position-x:-850px;}
.bbs-view .header .btn.ty-list:after {background-position-x:-900px;}
.bbs-view .header .name {
    padding:15px 15px 15px 20px;
    border-top:1px solid #e8e8e8;
    display:-webkit-box;
    display:-moz-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
}
.bbs-view .header .name ul:nth-child(1) {}
.bbs-view .header .name ul:nth-child(2) {margin-left:auto; white-space:nowrap;}
.bbs-view .header .name li {z-index:1; position:relative; display:inline-block; vertical-align:top;}
.bbs-view .header .name li {font-family: var(--family-regular);font-weight: var(--weight-regular); line-height:1.4; font-size:12px; color:#999999;}
.bbs-view .header .name li:nth-child(n+2) {margin-left:31px;}
.bbs-view .header .name li:nth-child(n+2):before {z-index:-1; content:''; position:absolute; left:-15px; top:calc(50% - 5px); width:0; height:12px; border-left:1px solid #e8e8e8;}
.bbs-view .header .name li.pointer:hover {color:#000;}
.bbs-view .header .name li.ty-police:hover {color:#ed1c24;}

html[data-useragent*='MSIE 10.0'] .bbs-view .header .title ul:nth-child(1) {max-width:calc(100% - 200px);}

.bbs-view .files {position:relative; height:70px; background-color:#f9f9fa; border-bottom:1px solid #e8e8e8; background-color:#fff;}
.bbs-view .files .f-url {top:14px; margin-left:20px; margin-right:230px; position:relative;}
.bbs-view .files .f-url span {display:block; position:absolute; left:0; top:calc(50% - 9px); width:20px; height:18px; background:var(--bbs-btn) no-repeat; background-position:-150px -550px; opacity:0.3;}
.bbs-view .files .f-url a {margin-left:30px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; word-break:break-all;}
.bbs-view .files .f-url a {font-family: var(--family-regular);font-weight: var(--weight-regular); line-height:40px; font-size:12px; color:#666666;}
.bbs-view .files .f-url a:hover {text-decoration:underline; color:#0000ff;}
.bbs-view .files .f-files {position:absolute; right:20px; top:15px;}
.bbs-view .files .tx {font-family: var(--family-regular);font-weight: var(--weight-regular); line-height:40px; font-size:15px; color:#666666;}
.bbs-view .files .tx span:nth-child(2) {color:var(--bbs-color2);}
.bbs-view .files .btn {margin-left:20px; display:inline-block; vertical-align:top; padding:0 20px 0 20px; background-color:#555; border-radius:4px; cursor:pointer;}
.bbs-view .files .btn {font-family: var(--family-medium);font-weight: var(--weight-medium); line-height:40px; font-size:13px; color:#ffffff;}
.bbs-view .files .btn:hover {background-color:#000;}

.bbs-view .shares {height:30px; padding:20px; background-color:#fff;}
.bbs-view .shares ul { text-align:right;}
.bbs-view .shares li {display:inline-block; vertical-align:top;}
.bbs-view .shares li:nth-child(n+2) {margin-left:12px;}
.bbs-view .shares li a {z-index:1; position:relative; display:block; width:30px; height:30px; background:var(--bbs-btn) no-repeat; background-position-y:-150px; opacity:0.9;}
.bbs-view .shares a:hover {opacity:1;}
.bbs-view .shares .ty-kakaotalk {background-position-x:-750px;}
.bbs-view .shares .ty-line {background-position-x:-800px;}
.bbs-view .shares .ty-story {background-position-x:-1000px;}
.bbs-view .shares .ty-twitter {background-position-x:-850px;}
.bbs-view .shares .ty-facebook {background-position-x:-900px;}

.bbs-view .article {position:relative; background-color:#fff;}
.bbs-view .article .police {padding:8px 10px 10px 10px; display:block; position:absolute; right:10px; top:10px; background-color:#ffffff; border:1px solid #ec1c23; border-radius:3px;}
.bbs-view .article .police p {text-align:center;}
.bbs-view .article .police p {line-height:1.4; font-size:12px; color:#000000; font-family:gulim,'굴림',sans-serif;}
.bbs-view .article .police ul {margin-top:6px; width:100px;}
.bbs-view .article .police ul li {padding-top:1px; height:24px; display:block; background-color:#fbd2d3; border-radius:3px; text-align:center; cursor:pointer;}
.bbs-view .article .police ul li {line-height:24px; font-size:12px; color:#ec1c23; font-family:gulim,'굴림',sans-serif;}
.bbs-view .article .police ul li:nth-child(n+2) {margin-top:4px;}
.bbs-view .article .police ul li:hover {text-decoration:underline;}
.bbs-view .article .police ul li.on {text-decoration:none; background-color:#ec1c23; color:#fff;}
.bbs-view .article .video {font-size:0; line-height:0; padding-bottom:50px; overflow:hidden; text-align:center;}
.bbs-view .article .video .item {margin-top:40px;}
.bbs-view .article .video .item:first-child {margin-top:0;}
.bbs-view .article .image {font-size:0; line-height:0; padding-bottom:50px; overflow:hidden; text-align:center;}
.bbs-view .article .image a {margin:0 auto; display:table;}
.bbs-view .article .image img {margin:0 auto; display:table; max-width:100%; border:0;}
.bbs-view .article .wrap {padding-top: 20px; padding-bottom:150px; min-height:250px;}
.bbs-view .article .content {vertical-align:top; overflow:hidden; text-overflow:ellipsis; word-break:break-all;}
.bbs-view .article .content {font-family: var(--family-regular);font-weight: var(--weight-regular); line-height:1.625; font-size:16px; color:#000000;}
.bbs-view .article .content a {color:#0000ff;}
.bbs-view .article .content img {max-width:100%; border:0;}
.bbs-view .article .viewer {display:inline-block; position:relative;}
.bbs-view .article .viewer .icon {z-index:10; display:block; position:absolute; right:0; bottom:0; width:36px; height:36px; background:var(--bbs-btn) no-repeat; background-position:-750px -500px; cursor:pointer;}

.bbs-view .hashtag {padding-bottom:10px; background-color:#fff;}
.bbs-view .hashtag div {margin:-10px 0 0 -10px;}
.bbs-view .hashtag a {margin:10px 0 0 10px; padding:0 15px 0 15px; display:inline-block; vertical-align:top; background-color:#f4f4f4; border-radius:36px;}
.bbs-view .hashtag a {font-family: var(--family-regular);font-weight: var(--weight-regular); line-height:36px; font-size:16px; color:#666666;}
.bbs-view .hashtag a:hover {background-color:var(--bbs-color2); color:#fff;}

.bbs-view .shares2 {padding-bottom:20px; border-bottom:1px solid #e8e8e8; background-color:#fff;}
.bbs-view .shares2 ul {text-align:right;}
.bbs-view .shares2 li {display:inline-block; vertical-align:top;}
.bbs-view .shares2 li:nth-child(n+2) {margin-left:20px;}
.bbs-view .shares2 a {z-index:1; position:relative; display:block; width:30px; height:30px;}
.bbs-view .shares2 a:after {z-index:-1; display:block; content:''; position:absolute; width:100%; height:100%; background:var(--bbs-btn) no-repeat; background-position-y:0px; opacity:0.4;}
.bbs-view .shares2 p {display:none;}
.bbs-view .shares2 p {z-index:10; position:absolute; left:calc(50% - 90px); top:-36px; width:180px; text-align:center;}
.bbs-view .shares2 p span {z-index:1; display:inline-block; position:relative; padding:0 10px; background-color:#fbbc05; border-radius:3px;}
.bbs-view .shares2 p span {font-family: var(--family-regular);font-weight: var(--weight-regular); line-height:27px; font-size:15px; color:#fff;}
.bbs-view .shares2 p span:after {z-index:-1; content:''; position:absolute; left:calc(50% - 4px); bottom:-4px; width:8px; height:4px; background:var(--bbs-btn) no-repeat; background-position:0px -200px;}
.bbs-view .shares2 a:hover {z-index:1000;}
.bbs-view .shares2 a:hover p {display:block;}
.bbs-view .shares2 a:hover:after {background-position-y:-100px; opacity:1;}
.bbs-view .shares2 .ty-kakaotalk:after {background-position-x:-750px;}
.bbs-view .shares2 .ty-line:after {background-position-x:-800px;}
.bbs-view .shares2 .ty-story:after {background-position-x:-1000px;}
.bbs-view .shares2 .ty-twitter:after {background-position-x:-850px;}
.bbs-view .shares2 .ty-facebook:after {background-position-x:-900px;}

.bbs-view .goods {padding:80px 0 40px 0; text-align:center; background-color:#fff;}
.bbs-view .goods ul li {transition:border 0.2s, background 0.2s, color 0.2s; width:148px; height:48px; text-align:center; display:inline-block; vertical-align:top; border:1px solid #e8e8e8; background-color:#fff; border-radius:48px; cursor:pointer;}
.bbs-view .goods ul li:nth-child(n+2) {margin-left:20px;}
.bbs-view .goods ul li span {z-index:1; transition:color 0.2s; position:relative; display:inline-block; vertical-align:top; padding-left:38px;}
.bbs-view .goods ul li span {font-family: var(--family-bold);font-weight: var(--weight-bold); line-height:48px; font-size:20px; color:#666666;}
.bbs-view .goods ul li span:before {z-index:-1; display:block; content:''; position:absolute; left:0; top:calc(50% - 13px); width:26px; height:26px; background:var(--bbs-btn) no-repeat; background-position-x:-250px;}

.bbs-view .goods ul li.good1 span:before {background-position-y:-250px;}
.bbs-view .goods ul li.good2 span:before {background-position-y:-300px;}

.bbs-view .goods ul li.good1 span {color:#0078dd;}
.bbs-view .goods ul li.good2 span {color:#ed1c24;}

.bbs-view .goods ul li.good1:hover {border-color:#0078dd;}
.bbs-view .goods ul li.good2:hover {border-color:#ed1c24;}

.bbs-view .goods ul li.good1.active {border-color:#0078dd; background-color:#0078dd;}
.bbs-view .goods ul li.good2.active {border-color:#ed1c24; background-color:#ed1c24;}

.bbs-view .goods ul li.good1.active span,
.bbs-view .goods ul li.good2.active span {color:#ffffff;}

.bbs-view .goods ul li.good1.active span:before,
.bbs-view .goods ul li.good2.active span:before {background-position-x:-200px;}

.bbs-view .emotion {padding:40px 0; background-color:#fff;}
.bbs-view .emotion ul {display:block; text-align:center;}
.bbs-view .emotion ul li {position:relative; width:120px; height:110px; text-align:center; display:inline-block; vertical-align:top; cursor:pointer;}
.bbs-view .emotion ul li:nth-child(n+2) {margin-left:10px;}
.bbs-view .emotion ul li .icon {margin:0 auto; position:relative; display:block; text-align:center; width:70px; height:70px;}
.bbs-view .emotion ul li .icon img {transition:all .1s ease; display:block; position:absolute; left:calc(50% - 25px); top:calc(50% - 25px); width:50px; height:50px; border:0;}
.bbs-view .emotion ul li p {transition:all .1s ease;}
.bbs-view .emotion ul li .name {display:block; position:absolute; left:0; top:67px; width:100%; text-align:center;}
.bbs-view .emotion ul li .name {font-family: var(--family-regular);font-weight: var(--weight-regular); line-height:1.4; font-size:15px; color:#666666;}
.bbs-view .emotion ul li .count {display:block; position:absolute; left:0; right:0; top:88px; text-align:center;}
.bbs-view .emotion ul li .count span {position:relative; display:inline-block;}
.bbs-view .emotion ul li .count span {font-family: var(--family-bold);font-weight: var(--weight-bold); line-height:1.4; font-size:20px; color:#333333;}
.bbs-view .emotion ul li.focus .name {color:var(--bbs-color1);}
.bbs-view .emotion ul li.focus .count span {color:var(--bbs-color1);}
.bbs-view .emotion ul li.focus .icon img {left:calc(50% - 30px); top:calc(50% - 30px); width:60px; height:60px;}
.bbs-view .emotion ul li:hover .icon img {left:0; top:0; width:70px; height:70px;}
.bbs-view .emotion ul li:hover .count span:after {display:block; content:''; position:absolute; left:0; bottom:0; width:100%; height:0; border-bottom:1px solid #333333;}

.bbs-view .btns {display:block; padding:40px 0 100px 0; text-align:center;}
.bbs-view .btns a {text-decoration:none; position:relative; display:inline-block; width:200px; height:59px; text-align:center; background-color:#555555; border-radius:4px; cursor:pointer;}
.bbs-view .btns a {font-family: var(--family-medium);font-weight: var(--weight-medium); line-height:59px; font-size:18px; color:#ffffff;}
.bbs-view .btns a:hover {background-color:#000000;}

.bbs-view .nextarticle {padding-bottom:40px;}
.bbs-view .nextarticle li {text-decoration:none; position:relative; display:block; height:58px; background-color:#fff; border-top:1px solid #e8e8e8;}
.bbs-view .nextarticle li:last-child {border-bottom:1px solid #e8e8e8;}
.bbs-view .nextarticle li {position:relative;}
.bbs-view .nextarticle li a {z-index:2; display:block; position:absolute; left:0; right:0; top:0; bottom:0; width:100%; height:100%; background-color:#ffffff; opacity:0;}
.bbs-view .nextarticle .title {
    height:58px;
    margin-right:150px;
    display:-webkit-box;
    display:-moz-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center;
}
.bbs-view .nextarticle .title span:nth-child(1) {
    display:inline-block;
    -webkit-box:none;
    -moz-box:none;
    -webkit-flex:none;
    -ms-flex:none;
    flex:none;
}
.bbs-view .nextarticle .title span:nth-child(1) {white-space:nowrap; margin:0 20px; padding:0 30px; height:26px; background-color:#f4f4f4; border-radius:26px; text-align:center;}
.bbs-view .nextarticle .title span:nth-child(1) {font-family: var(--family-light);font-weight: var(--weight-light); line-height:26px; font-size:13px; color:#999999;}
.bbs-view .nextarticle .title span:nth-child(2) {max-width:calc(100% - 150px); height:58px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; word-wrap:break-word; word-break:break-all;}
.bbs-view .nextarticle .title span:nth-child(2) {font-family: var(--family-regular);font-weight: var(--weight-regular); line-height:58px; font-size:16px; color:#888888;}
.bbs-view .nextarticle .dt {display:block; position:absolute; right:20px; top:15px; width:130px; text-align:right;}
.bbs-view .nextarticle .dt {font-family: var(--family-light);font-weight: var(--weight-light); line-height:26px; font-size:13px; color:#999999;}
.bbs-view .nextarticle li:hover {background-color:#f8f9fb;}
.bbs-view .nextarticle li:hover .title span:nth-child(1) {background-color:#666666; color:#fff;}
.bbs-view .nextarticle li:hover .title span:nth-child(2),
.bbs-view .nextarticle li:hover .dt {color:#333;}

.bbs-view-footer {height:100px;}