.board .list h2 {text-align: center;}
.board .list h3 {text-align: center;padding-bottom: 20px;}
.board .list .button {text-align: right;padding: 10px 0;}
.board .list .button a {display: inline-block;padding: 3px 20px; background: #38b0de;font-size: 14px; color: #eee;border-radius: 3px;}
.board .list ul {}
.board .list ul li {overflow: hidden;padding: 10px 0;}
.board .list ul li span {display: block;float: left;text-align: center;}
.board .list ul li span.num {display: none;}
.board .list ul li span.view {display: none;}
.board .list ul li span.subject a {color: #4682b4;}
.board .list ul li .data-link {float: left;width: 100%;}
.board .list ul li .data-info {float: right;}
.board .list ul li.label {display: none;border-radius: 5px;}
.board .list ul li.field {border-bottom: 1px solid #f4f4f4;}
.board .list ul li.field .data-link {}
.board .list ul li.field .data-link .subject {}
.board .list ul li.field .data-info {font-size: 12px; color: #aaa;}


.board .write h2 {text-align: center;}
.board .write h3 {text-align: center;padding-bottom: 20px;}
.board .write p {text-align: center;color: #ccc;}
.board .write .row {overflow: hidden;margin-top: 10px;padding: 20px;background: #e1f5fe;border-radius: 5px;}
.board .write .row label {display: block;}
.board .write .row ul {padding: 20px 0 10px 20px;}
.board .write .row ul li {line-height: 180%;}
.board .write .row ul li input {margin-right: 10px;}
.board .write .row .input input {width: 90%;border: none; margin: 0;padding: 10px 5%;background: #4fc3f7; border-radius: 3px;}
.board .write .row .input {padding: 10px 0;}
.board .write .row .textarea {padding: 10px 0;}
.board .write .row .textarea textarea {margin: 0;padding: 10px 5%;width: 90%;height: 300px;background: #4fc3f7; border: none;border-radius: 3px;}
.board .write .button {overflow: hidden;margin: 0 auto; padding: 50px 0;width: 210px; }
.board .write .button a {display: block;float: left;width: 100px;line-height: 40px;text-align: center;background: #999;border-radius: 5px; color: #fff;}
.board .write .button input {display: block;float: right;width: 100px;line-height: 40px;text-align: center;border: none;font-family: roboto;border-radius: 5px; color: #fff; background: #66cdaa;}
.board .write .hide {display: none;}

/*답변하기 특수 css start*/
.board .write .data .option {margin-top: 20px; padding: 20px 0;background: #eee;text-align: center;}
.board .write .data .option p {text-align: center;font-weight: bold;font-size: 18px;}
.board .write .data dl {margin-top: 20px; text-align: center; font-size: 13px;}
.board .write .data dt {margin-top: 10px;font-weight: bold; color: #8ba753;}
.board .write .data dd {}
/*답변하기 특수 css end*/

.board .view h2 {text-align: center;}
.board .view h3 {padding: 50px 0 20px;font-size: 24px; color: #4682b4;text-align: center;}
.board .view .info {text-align: right;border-bottom: 1px solid #eee;padding: 10px 0;}
.board .view .info span {margin-left: 10px; font-size: 13px;}
.board .view .info span i {color: #7a5dc7;}
.board .view .data .option {margin-top: 20px; padding: 20px 0;background: #eee;text-align: center;}
.board .view .data .option p {text-align: center;font-weight: bold;font-size: 18px;}
.board .view .data dl {margin-top: 20px; text-align: center; font-size: 13px;}
.board .view .data dt {margin-top: 10px;font-weight: bold; color: #8ba753;}
.board .view .data dd {}
.board .view {}
.board .view {}
.board .view {}
.board .view {}
.board .view {}
.board .view .desc {padding: 20px 0;}
.board .view .control {overflow: hidden;padding: 50px 0;}
.board .view .control .left {float: left;}
.board .view .control .right {float: right;}
.board .view .control li {float: left;}
.board .view .control .left li {margin-right: 10px;}
.board .view .control .right li {margin-left: 10px;}
.board .view .control li a {display: block; padding: 5px 10px; background: #38b0de; color: #fff;border-radius: 3px;font-size: 14px;}


@media screen and (max-width: 320px){
  .board .view .control li a {padding: 3px 5px; font-size: 11px;}
}
@media screen and (min-width: 321px) and (max-width: 479px){
  .board .view .control li a {padding: 3px 5px; font-size: 11px;}
}
@media screen and (min-width: 480px) and (max-width: 639px){}
@media screen and (min-width: 640px) and (max-width: 799px){
  .board .write .row ul li {float: left; margin-right: 10px;}
  /*답변하기 특수 css start*/
  .board .write .data dt {display: inline-block;margin-top: 10px;font-weight: bold;padding: 0 3px;}
  .board .write .data dd {display: inline-block;padding: 0 3px;}
  .board .write .data .option.customer dl {display: inline-block;padding: 0 5px;}
  /*답변하기 특수 css end*/

  .board .view .data dt {display: inline-block;margin-top: 10px;font-weight: bold;padding: 0 3px;}
  .board .view .data dd {display: inline-block;padding: 0 3px;}
  .board .view .data .option.customer dl {display: inline-block;padding: 0 5px;}

}
@media screen and (min-width: 800px) and (max-width: 959px){
  .board .list ul li {padding: 20px 0;}
  .board .list ul li.label {display: block;background: #eee; }
  .board .list ul li.label .num {}
  .board .list ul li .data-link {width: 75%;}
  .board .list ul li .data-info {width: 25%;}
  .board .list ul li span.subject {padding-left: 20px;}
  .board .list ul li span.name {width: 50%;}
  .board .list ul li span.date {width: 50%;}
  .board .list ul li.label .view {}

  .board .write .row ul li {float: left; margin-right: 10px;}
  /*답변하기 특수 css start*/
  .board .write .desc {padding: 20px;}
  .board .write .data dt {display: inline-block;margin-top: 10px;font-weight: bold;padding: 0 3px;}
  .board .write .data dd {display: inline-block;padding: 0 3px;}
  .board .write .data .option.product dl {display: inline-block;padding: 0 5px;}
  .board .write .data .option.customer dl {display: inline-block;padding: 0 5px;}
  /*답변하기 특수 css end*/

  .board .view .desc {padding: 20px;}
  .board .view .data dt {display: inline-block;margin-top: 10px;font-weight: bold;padding: 0 3px;}
  .board .view .data dd {display: inline-block;padding: 0 3px;}
  .board .view .data .option.product dl {display: inline-block;padding: 0 5px;}
  .board .view .data .option.customer dl {display: inline-block;padding: 0 5px;}


}
@media screen and (min-width: 960px){
  .board .list ul li {padding: 20px 0;}
  .board .list ul li.label {display: block;background: #eee; }
  .board .list ul li .data-link {width: 70%;}
  .board .list ul li .data-info {width: 250px;}
  .board .list ul li span.num {display: block;width: 10%;}
  .board .list ul li span.subject {padding-left: 20px;}
  .board .list ul li span.name {width: 37%;}
  .board .list ul li span.date {width: 37%;}
  .board .list ul li span.view {display: block;width: 26%;}
  
  .board .write .float {overflow: hidden;}
  .board .write .row ul li {float: left; margin-right: 5%;}
  /*답변하기 특수 css start*/
  .board .write .desc {padding: 30px;}
  .board .write .data dt {display: inline-block;margin-top: 10px;font-weight: bold;padding: 0 3px;}
  .board .write .data dd {display: inline-block;padding: 0 3px;}
  .board .write .data .option.product dl {display: inline-block;padding: 0 5px;}
  .board .write .data .option.customer dl {display: inline-block;padding: 0 5px;}
  /*답변하기 특수 css end*/

  .board .view .desc {padding: 30px;}
  .board .view .data dt {display: inline-block;margin-top: 10px;font-weight: bold;padding: 0 3px;}
  .board .view .data dd {display: inline-block;padding: 0 3px;}
  .board .view .data .option.product dl {display: inline-block;padding: 0 5px;}
  .board .view .data .option.customer dl {display: inline-block;padding: 0 5px;}
 
}
@media screen and (min-width: 960px) and (max-width: 1119px){}
@media screen and (min-width: 1120px) and (max-width: 1279px){}
@media screen and (min-width: 1280px){}