@charset "utf-8";

html {font-family: 'Noto Sans';}
.document_popup_menu {display: none;}

/* ResponsBoard
-----------------------------------------------------------------*/
#responBoard {border-collapse: collapse;}
#responBoard .xe_content {color:#666;}
#responBoard .btn {background-image:none;}
#responBoard th,#responBoard td{font-size:12px;color:#777;}
#responBoard .form-control {padding-top:0;padding-bottom:0;font-size:12px;}
#responBoard a.title {color:#333;}
#responBoard td.tableuser a {color:#666;}
#responBoard thead th a {color: #ffffff;}
#responBoard h3.cont-title,
#responBoard thead th {
	text-align:center;
/*	border-top:1px solid #444547;
	border-bottom:1px solid #bbb;*/
	background-color: #696969;
	color: #ffffff;
/*
	background:#f2f2f2 repeat;
	background-image: linear-gradient(top, #F9F9F9, #F2F2F2);
	background-image: -webkit-linear-gradient(top, #F9F9F9, #F2F2F2);
	background-image: -moz-linear-gradient(top, #F9F9F9, #F2F2F2);
	background-image: -ms-linear-gradient(top, #F9F9F9, #F2F2F2);
	background-image: -o-linear-gradient(top, #F9F9F9, #F2F2F2);	
*/
}
#responBoard table {border-bottom:1px solid #ddd}
#responBoard table td {border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd;}
#responBoard table th {border-top: 0px; border-bottom: 0px;}
#responBoard .table>thead>tr>th,#responBoard .table>tbody>tr>th,#responBoard .table>tfoot>tr>th,
#responBoard .table>thead>tr>td,#responBoard .table>tbody>tr>td,#responBoard .table>tfoot>tr>td	{
	padding: 12px;vertical-align:middle; font-family: 'Noto Sans'; font-size: 15px;
}
.table-hover > tbody > tr:hover > td,.table-hover > tbody > tr:hover > th {background-color: #f9f9f9;}
.table > tbody > tr:first-child > td {border-top: 1px solid #e1e1e1;}
#responBoard .btn-group {margin-bottom:0;}

#board-header.page-header {margin:0;padding-bottom:20px;border:none;}
#board-header.page-header h1 {margin:5px 0;font-size:16px;}
#board-header.page-header h1 a {font-size:16px;color:#555;}
#board-header.page-header h1 small {font-size:12px;}
#board-header.page-header h1 small span {margin:0 3px;font-family:lato,sans-serif;}
/* search */
#responBoard select,#responBoard .searchfoot input {}
#responBoard .search-select{margin-right:-1px;border-radius:2px 0 0 2px;}
/* pagination */
#responBoard .pagination{padding:0 !important;margin:10px auto 20px;text-align:center;}
#responBoard .pagination-sm>li>a, #responBoard .pagination-sm>li>span {color:#666;padding: 4px 8px 3px;}
#responBoard .pagination-sm>li>a.page-no{font-family:arial;font-size:11px;line-height:17px;}
.pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus {color:#666 !important;background-color: #eee !important;border-color: #ccc !important;}
/* category */
#responBoard .nav.nav-pills {margin-bottom:10px;}
#responBoard .nav.nav-pills li {width: auto; margin-bottom: 15px; text-align: center;}
#responBoard .nav.nav-pills a {font-size:12px;color:#777; padding: 5px 15px; font-size: 13px;}
#responBoard .nav>li>a {padding:3px 15px;border-radius:2px;}
#responBoard .nav-pills>li+li {margin-left:4px;}

#responBoard .nav.nav-pills>li > a {font-size: 14px; color: #ffffff; background-color: #aaaaaa; border: 0px; font-weight: 400;}


/*
#responBoard .nav.nav-pills {margin-bottom:10px;}
#responBoard .nav.nav-pills li {width: auto; margin-bottom: 5px; text-align: center;}
#responBoard .nav.nav-pills a {font-size:12px;color:#777; padding: 5px 15px; font-size: 13px;}
#responBoard .nav>li>a {padding:3px 15px;border-radius:2px;}
#responBoard .nav-pills>li+li {margin-left:4px;}
*/
/*
#responBoard .nav.nav-pills a:hover,
#responBoard .nav-pills>li.active>a,
#responBoard .nav-pills>li.active>a:focus,
#responBoard .nav-pills>li.active>a:hover{color:#fff; background-color: #219bf0;}
*/
/*#responBoard .nav-pills>li.active:after{border-top: 5px solid #26CCBE;}*/
#responBoard .nav-pills>li.active:after{
	content: "";position: absolute;left: 0%;bottom: -8px;
	margin-left: 0px auto;/*width: 0;height: 0;*/
	border-left: 5px solid #03aeee;
	border-right: 5px solid #03aeee;
	border-top: 5px solid #03aeee;
	width: 100%;
}

#responBoard .nav.nav-pills>li:nth-child(1) a {background-color: #333333;}


#responBoard .nav-pills>li>a{background-color:#f5f5f5;border-bottom:1px solid #ddd;}
/* webzine */
#responBoard .media-heading {margin-top:5px}
#responBoard .media-list h3 a{font-size:16px;color:#555;}
#responBoard .media-list p{font-size:12px;color:#777;line-height:20px;}
#responBoard .media-list .viewinfo{border:0;}
#responBoard .media-list .viewinfo li{padding-left:0;}

#responBoard .thumbnail {margin-bottom: 0px;}
#responBoard .thumbnail .media {padding:20px 0 0;}
#responBoard .thumbnail .media .media-body{padding:0px 0px 0px 5px;}
#responBoard .webzineborder {border-top:1px solid #efefef; padding:20px 0px;}
#responBoard .webzineborder .media-body {padding:0px 0px 0px 5px;}
#responBoard .webzineborder .checkbox{margin-right:10px;}
#responBoard .caption .cardinfoname {font-size:11px;}

#responBoard .thumbnail .caption{border:1px solid #ddd;border-top:0;}
#responBoard .caption{padding:15px;}
#responBoard .caption h4 {margin-top:5px;font-size:14px;overflow:hidden;text-overflow:ellipsis;color:#666;}
#responBoard .caption h4 small a{color:#44B39E}
#responBoard .caption a{color:#333;}
#responBoard .caption .content {margin-top:10px;font-size:12px;color:#777;line-height:18px;}

/* webzine B */
#responBoard .bgStyle {margin-bottom:30px;background-color:#F4F5F7;}

.ribonicon {position:absolute;right:6px;top:4px;}
.rcheckbox {position:absolute;left:7px;top:0;}

.caption h5 {overflow:hidden;width:100%;height:18px;line-height:140%;text-overflow:ellipsis;}
.caption p {padding:0px;margin:0px;overflow:hidden;width:100%;font-size: 12px;text-overflow:ellipsis;}
.caption ul {padding:0px;margin:0px;overflow:hidden;text-overflow:ellipsis;}
.caption li {padding:0px;margin:0px;font-size:12px;}
.caption .cardinfoname {margin:10px 0px 0px 0px;}


/* reply */
#reply {margin-bottom:20px;}
#responBoard #comments .media-list{margin-bottom:30px;}
#responBoard #comments .media-list .media-body .reply-body {position:relative;margin-left:10px;padding:10px 10px 30px 20px;background-color:#F1F1F1;border-radius:10px;}
#responBoard #comments .media-list .media-body .reply-body:before {content:"";position:absolute;top:20px;left:-10px;height:0;border-right: 10px solid;
border-top: 10px solid rgba(0, 0, 0, 0);
border-bottom: 10px solid rgba(0, 0, 0, 0);}
#responBoard #comments .media-list .media-body .reply-body:before{border-right-color:#eee;}

/* blog */
#responBoard .kso-blog {margin-bottom:30px;}
#responBoard .kso-blog.view-doc h3.cont-title{padding: 15px 5px 5px;margin-bottom:0;font-size: 16px;text-align: left;line-height: 20px;border:0;background:none}
#responBoard .kso-blog.view-doc .viewinfo {padding-top:0;}
#responBoard .kso-blog.view-doc .upload-file{text-align:right;font-size: 11px;}

/* view-doc */
#responBoard .view-doc .viewinfo {padding: 10px;font-weight: 600; margin-bottom: 18px;}
#responBoard .view-doc h3.cont-title {padding:12px 12px;margin:0;font-size:15px;text-align:left;line-height:20px; font-weight: 600;}
#responBoard .view-footer{padding-top:10px;border-top:1px solid #ddd;}
#responBoard .view-footer .foot-navi {margin:10px 0;}
#responBoard .view-signature .media{margin-bottom:20px;} 
#responBoard .view-signature .media .media-body .arrow{position:relative;margin-left:10px;padding:10px 15px;background-color:#eee;}
#responBoard .view-signature .media .media-body .arrow:before
{content:"";position:absolute;top:20px;left:-10px;height:0;border-right: 10px solid;border-top:10px solid rgba(0,0,0,0);border-bottom:10px solid rgba(0,0,0,0);}
#responBoard .view-signature .media .media-body .arrow:before{border-right-color:#eee;}

/* comment */
#responBoard .commentcont .upload-file {text-align:right;padding-bottom:10px;}
#responBoard .commentcont .upload-file a{font-size:11px;}

#responBoard #re_cmt label.checkbox-inline {font-size:12px;}

/* write-form */
.write-form label.checkbox-inline,.write-form label.radio-inline{font-size:12px;}

/* bootstrap customize */
#responBoard .alert {padding: 10px 15px;border-radius: 2px;}
#responBoard .alert-default {font-size:12px;background-color: #efefef;border-color: #eee;color: #777;}
#responBoard .label {padding:.2em .4em .2em;font-size: 9px;border-radius:.2em;}
#responBoard .label-primary {background-color: #EACD4D;}
#responBoard .label-warning {background-color: #E15B50;}
#responBoard .label-danger {background-color: #f0ad4e;}

#responBoard .input-group-addon,#fo_write .form-control,
#responBoard .searchfoot .form-control,#responBoard .search-select .form-control {padding-top:2px;padding-bottom:2px;height:34px !important;font-size:12px;}
#responBoard textarea.form-control{padding:10px;width:100%;height:auto !important;}
#responBoard .btn:active,#responBoard .btn.active {box-shadow:none;}

#responBoard .nav-pills>li>a>.badge{margin:0;}
#responBoard .badge{padding:1px 3px;font-size:9px;font-family:arial;color:#999;background-color:#fff;}

#responBoard .btn-default {color:#666;}

.mTop20 {margin-top:20px;}
.mTop40 {margin-top:40px;}


#popup_menu_area{position:absolute;background:#fff;border:1px solid #e9e9e9;border-radius:5px;margin:10px 0;padding:2px 0px;outline:none;}
#popup_menu_area ul{list-style:none;margin:0;padding:0}
#popup_menu_area li{margin:0;line-height:1.5}
#popup_menu_area a{display:block;text-decoration:none;padding:5px 10px;color:#333;}
#popup_menu_area a:hover,
#popup_menu_area a:active,
#popup_menu_area a:focus{background:#efefef;}
.document_popup_menu {text-align:right; padding:10px 0px;}

.nocolor {color:#999;}
.nocolor a {color:#999;}
.nocolorlist {color:#000;}
.nocolorlist a {color:#000;}
.width30 {width:30px;}
.width50 {width:50px;}
.width70 {width:70px;}
.width90 {width:90px;}
.padding10 {padding:10px;}
.paddingb10 {padding:0px 0px 10px 0px;}
.paddingb20 {padding:0px 0px 20px 0px;}
.paddingtb10 {padding:10px 0px;}
.font12 {font-size:12px;}
.font9 {font-size:9px !important;}
.overflow {overflow:hidden;text-overflow:ellipsis;}

table {table-layout:fixed}
.tableuser {white-space:nowrap;overflow:hidden; text-overflow:ellipsis;width:100px; text-align:center;}
.tabledate {width:90px;text-align:center;}
.nowrap {white-space:nowrap;}
.relative {position:relative;}

.selectextra.videocheckbox {vertical-align:-10px !important;maring:0;padding:0;width:13px;height:13px;}

/* secrit */
.noimgwh {position: relative;width: 100%;height: 0;overflow: hidden; padding-bottom: 65%;background-color: #efefef}
.noimgwh .wrap {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.noimgwh .wrap .secret-block{position:relative;margin:30% auto;font-family:'Merriweather Sans', sans-serif;color:#bbb;}

/*
thumbnailover > div >
.nothumbfocus - noimg
thumbnailgrow - wz 
thumbnailcoverinfo - gallery
thumbnailcover - movie
*/
.nothumbfocus,.effect {
	display:block; 
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;opacity:0;
}
.nothumbfocus:hover {background-color:#000;opacity: 0.3;}
.nothumbnail {margin-bottom:30px;}
.nothumbnail .content {width:100%;/*height: 34%;*/overflow:hidden;text-overflow:ellipsis;line-height:149%;}
/* > div */
.thumbnailover {overflow:hidden;text-overflow:ellipsis;}
.thumbnailover .read,
.thumbnailover .effect { 
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); 
}
.thumbnailover:hover .read,
.thumbnailover:hover .effect { 
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; 
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); 
	opacity: 0;
}
.thumbnailover:hover img,
.thumbnailcover:hover img{
	-webkit-transform: scale(1.1,1.1);
	-moz-transform: scale(1.1,1.1);
	-o-transform: scale(1.1,1.1);
	-ms-transform: scale(1.1,1.1);
	transform: scale(1.1,1.1);
}
.thumbnailover .read{position:absolute;right:10px;bottom:10px;width:50%;text-align: right;}
.thumbnailover .vote{position:absolute;left:10px;bottom:10px;text-align: left;}
.thumbnailover:hover .nothumbfocus {background-color:#000;opacity: 0.3;}
.thumbnailover a {text-decoration:none;}
.thumbnailover a:hover {text-decoration:none;}
.thumbnailover h4{font-size:16px;color:#fff;overflow:hidden;text-overflow:ellipsis;}
.thumbnailover p{font-size:12px;}
.thumbnailover .viewbutton{position:absolute; bottom:0; width:100%;left:50%;margin-left:-50%;padding:10px 0px;}

/* wz */
.thumbnailgrow img {-webkit-transition: all 700ms;-moz-transition: all 700ms;transition: all 700ms;}
.thumbnailgrow:hover img{
	-webkit-transform: scale(1.1,1.1);
	-moz-transform: scale(1.1,1.1);
	-o-transform: scale(1.1,1.1);
	-ms-transform: scale(1.1,1.1);
	transform: scale(1.1,1.1);
}
/* movie */
.thumbnailcover {
	position:absolute;left:0;top:0;
	padding:20px; width:100%;height:100%; 
	overflow:hidden;text-overflow:ellipsis; 
	background:rgba(0,0,0,.5); 
	filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#7f000000);
}
.thumbnailcoverimg {padding:20px;overflow:hidden;text-overflow:ellipsis;}
/* gallery */
.thumbnailcoverinfo {padding:20% 0; position:absolute;left:0;bottom:0px; width:100%;height:100%;color:#fff; background-color:#000;opacity:0;}
.thumbnailcoverinfo h5,.thumbnailcoverinfo p{padding:0;margin:0;width:100%;color:#fff !important;letter-spacing:0!important;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.thumbnailcoverinfo h5{margin-bottom:5px;}
.thumbnailcoverinfo p.regdate{}

.thumbnailimg {display:inline-block; width:auto\9 !important; /* ie8 */ width:auto !important; max-width:100%; min-width:100%; /* height:auto !important; */}
.thumbnailimg.vimeothumb {max-width:100% !important;/* margin-left:-7%;*/}


/* view */
.caption p .btn {margin-top:10px;}
.cardextra {height:20px;margin-top:10px;}
.cardextrabtn  {position:absolute;right: 6px; bottom: 10px;}
.viewinfo {color:#666 !important;padding:0 0 10px;margin-bottom:20px;border-bottom:1px solid #eee;}
.viewinfo li {font-size:11px;}
.viewinfo a {color:#666 !important;}

.row.extra-row{margin:0 auto;margin-bottom:-1px;border: 1px solid #e4e4e4}
.extra-row [class^="col-"] {
padding-top: 10px;
padding-bottom: 10px;
}
.extra-row .extra-left {background-color: #fafafa}
.extra-row .extra-right {border-left:1px solid #e4e4e4}
.viewbody{padding:20px 10px; margin-bottom: 18px; font-size: 15px; font-family: 'Noto Sans';}

.viewinfoextra a {color:#999 !important;}
.viewtag {color:#999 !important; padding:0px 0px 10px 0px;}
.viewtag a {font-size:12px !important; font-weight:normal !important;}

.viewinfocomment {padding:3px 10px;margin:0;text-align:right;color:#999 !important;background-color:#f8f8f8;}
.viewinfocomment li a.author {font-size:12px;color:#666;}
.viewinfocomment li.regdate{}
.viewinfocomment li {font-size:11px;}
.viewinfocomment li:first-child{padding-left:10px;}
.commentcont {position:relative;padding:10px 0 0;}
.commentcont .re_comment{position:absolute;right:5px;bottom:-20px;font-size:12px;font-family:'Open Sans',sans-serif!important;font-weight:bold;color:#8995B4;text-transform: uppercase;}
.commentcont img {margin:0px 10px 0px 5px;}
#mod_cmt {margin-top:10px;}
#re_cmt {margin-top:10px;}

video {display:inline-block; width:auto\9 !important; /* ie8 */ width:auto !important; max-width:100%; min-width:100%; height:auto !important;}
.video-container {position:relative; height:0; padding-top:30px; padding-bottom:56.25%; overflow:hidden; z-index:1;}
.video-container iframe,.video-container object,.video-container embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.extra .text, .extra .select, .extra .homepage {width: 100%; height: 34px; padding: 6px 12px; font-size: 14px;line-height: 1.428571429; color: #555555; background-color: #ffffff; background-image: none; border: 1px solid #cccccc; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;}
.extra .text:focus , .extra .select:hover {border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);}
.extra textarea {width: 100%; height:100px; padding: 6px 12px; font-size: 14px;line-height: 1.428571429; color: #555555; background-color: #ffffff; background-image: none; border: 1px solid #cccccc; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;}
.extra textarea:focus {border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);}
.extra ul {list-style:none; vertical-align:bottom;display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14px;line-height: 1.428571429; color: #555555; background-color: #ffffff; background-image: none; border: 1px solid #cccccc; border-radius: 4px;}
.extra li {display:inline; padding-right:10px;}
.extra label{margin-left:5px; margin-right: 15px;}
.extra li>input {vertical-align:-2px;margin:0;padding:0;width:13px;height:13px;}

/* ie8 */
.ie8 .form-control {height:26px\9 !important;}
.form-control {height:26px\9 !important;line-height:1.6 !important;}

/* Media Query */
@media (max-width: 480px) {
.viewdoc img {display:inline-block; width:auto\9 !important; /* ie8 */ width:auto !important; max-width:100%; min-width:100%; height:auto !important;}
.thumbnailimg.vimeothumb {max-width: 100% !important;margin-left: 0%;}
}
@media (max-width: 767px) {.viewdoc img {display:inline-block; width:auto\9 !important; /* ie8 */ width:auto !important; max-width:100%; min-width:100%; height:auto !important;}}
@media (min-width: 768px) and (max-width: 979px) {.viewdoc img {display:inline-block; width:auto\9 !important; /* ie8 */ width:auto !important; max-width:100%; min-width:100%; height:auto !important;}}


.sns{position:relative;top:5px;right:0;text-align:center; padding:0 !important;}
.sns li{display:inline;vertical-align:top}
.sns a{display:inline-block;/*width:32px;*/height:32px;border:1px solid #e0e0e0;background-color:#f4f4f4; border-radius:2px; padding:0 5px;}
.sns i{font-size:22px;line-height:32px;color:#bcbcbc}
.sns a:hover{border-color:#DECA79;background-color:#f9dc5f;transition: all 0.2s ease-in-out;-webkit-transition: all 0.2s ease-in-out}
.sns a:hover {color:#747474;transition: all 0.2s ease-in-out;-webkit-transition: all 0.2s ease-in-out}

#fo_write .form-control {width: 100%; height: 34px; padding: 6px 12px; font-size: 14px;line-height: 1.428571429; color: #555555; background-color: #ffffff; background-image: none; border: 1px solid #cccccc; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;}


.galleryinfobox {padding: 10px 0px; margin-bottom:25px; color: ##363636; font-weight: 700;}

@media (min-width: 769px) {
	.gallerytitle {font-size: 16px; margin: 0px; color: #000000; font-family: 'Noto Sans';}
	.extravarbox {padding-top: 5px; font-size: 12px; font-weight: 600; line-height: 18px;}
	.datebox {padding-top: 10px; font-size: 12px; font-weight: 600; line-height: 18px;}
	.rednumber {color: #d84765; font-weight: 600;}
	.gotovideo {font-size: 70px; position: absolute; top: 28%; left: 42%; color: #ffffff; opacity: 0.7;}
}
@media (max-width: 768px) {
	.gallerytitle {font-size: 12px; margin: 0px; letter-spacing: -1px; color: #000000;}
	.extravarbox {padding-top: 5px; font-size: 10px; font-weight: 600; line-height: 18px;}
	.datebox {padding-top: 10px; font-size: 10px; font-weight: 600; line-height: 18px;}
	.rednumber {color: #d84765; font-weight: 600;}
	.gotovideo {font-size: 50px; position: absolute; top: 28%; left: 43%; color: #ffffff; opacity: 0.7;}
}
@media (max-width: 576px) {
	.gallerytitle {font-size: 12px; margin: 0px; letter-spacing: -1px; color: #000000;}
	.extravarbox {padding-top: 5px; font-size: 10px; font-weight: 600; line-height: 18px;}
	.datebox {padding-top: 10px; font-size: 10px; font-weight: 600; line-height: 18px;}
	.rednumber {color: #d84765; font-weight: 600;}
	.gotovideo {font-size: 30px; position: absolute; top: 15%; left: 45%; color: #ffffff; opacity: 0.7;}
}