@charset "utf-8";

#sub-contents{min-height:300px; margin-bottom:40px;}
a{color:#666;}
ul, ol, li {list-style:none outside; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}

/* 테이블 공통 */
table {width:100%; border-top:2px solid #666; border-bottom:1px solid #999;}
table th,table td{font-size:10.5pt; text-align: center; padding:10px 0;}
table th{color:#333; border-bottom:1px solid #ddd; background:#f7f7f7;}
table tr{border-bottom:1px solid #ddd;}
table tr:hover{background:#f7f7f7; transition:background 1s ease}

/* input 공통 */
div.input-box {display:inline-block;border:1px solid #999;}
div.input-box input{width:100%; font-size:10pt; border:0; padding:8px 10px; vertical-align: middle;}



/* 번호 */
#number {text-align:center; margin-top:20px;}
#number li{display:inline-block; color:#999; font-size:10pt; border:1px solid #ddd; padding:2px 7px ; border-radius:4px;}
#number li:hover{color:#fff; background:#1bb1dc; border:1px solid #1bb1dc; cursor: pointer; transition: all 0.5s ease;}
#number li.num-select{color:#fff; background:#1bb1dc; border:1px solid #1bb1dc;}

/* 서브 이미지 */
#sub-contents div.sub-img{position:relative; height:300px; margin-bottom:60px; background:#f5f8fd url("../images/intro-bg.jpg") center no-repeat; background-size: cover;}
#sub-contents div.sub-img img{position:absolute; width:10%; top:45%; right:25%;}
#sub-contents div.sub-img p{position:absolute; top:60%; left:22%; font-size:22pt;}

/* 서브 타이틀 */
#sub-contents div.sub-title{text-align:center; margin-bottom:40px;}
#sub-contents div.sub-title span{display:block; color:#1bb1dc; font-size:16pt; margin-bottom:10px;}
#sub-contents div.sub-title h3{font-size:25pt; font-weight: bold;}

/* 읽기 */
#read div.btn-box{text-align:center; margin-top:20px; }
#read div.btn-list{display:inline-block; font-size:10.5pt; padding:5px 10px; border: 1px solid #ddd; cursor: pointer;}
#read td.post-info{text-align:left; padding:10px;}
#read td.post-info span{font-weight: bold; margin-right:10px;}
#read td.board-con div{min-height:300px;}
#read td{padding:10px; text-align:left;}
#read tr:hover{background:#fff;}
#read td a.file{display:block; font-weight:bold; margin-left:5px; padding:5px 20px;}
#read td a.file:hover{background:#e8e8e8;}
#read td a:before{content: "\f019";font-size:16px; font-family: 'FontAwesome'; margin-right:5px;}

/* 게시판 공통*/
#board span.division{display:inline-block; padding:5px 10px; font-size:9pt; font-weight:bold; border:1px solid #ddd;}
#board div.search-box{margin-bottom:14px; overflow: hidden;}
#board div.search-box select{color:#666; font-size:10pt; font-weight: bold; padding:8px; border:1px solid #999;}
#board div.search-box div.search-text {float:right;  text-align: right;}
#board div.search-box div.search-text div.input-box{display: inline-block; }
#board div.search-box div.search-text div.btn-search{display: inline-block; text-align: center;}
#board div.search-box div.search-text div.btn-search {vertical-align:middle; background:#333; }
#board div.search-box div.search-text div.btn-search i{font-size:10pt; color:#fff; padding:12px 0;}
#board div.search-box div.search-text div.btn-search i::before{margin-right: 5px;}
#board td.board-title {text-align: left; font-size:10pt; padding-left:20px; }
#board td.board-title a{display:block; text-overflow:ellipsis; word-wrap:normal;  height: 20px; overflow:hidden; box-sizing: border-box;}
#board table td.num{width:10%;}
#board table td.kinds{width:15%;}
#board table td.board-title{width:60%;}
#board table td.date{width:15%;}

/* 소개 */
#sub-contents h4{font-size:14pt; text-align: center; line-height: 160%; margin-bottom:40px;}
#introduce div.intro{overflow: hidden;}
#introduce div.intro div{float:left;}
#introduce div.intro div.intro-img{width:26%; height:414px; margin-right:40px; background: url("../images/about-img.jpg") bottom no-repeat; background-size:100%; border:1px solid #ddd;}
#introduce div.intro div.intro-text{width:60%; }
#introduce div.intro div.intro-text p{font-size:18px; margin-bottom:10px; line-height: 170%;}
#introduce div.intro div.intro-text span{display:inline-block; font-size:17pt; font-weight: bold; margin-top: 20px; margin-left:5px;}

/* 문의하기 */
#contactUs div.contact-box {padding:40px; background:#f9f9f9; border:1px solid #ddd;}
#contactUs div.contact-box div.text-box{margin-bottom:40px;}
#contactUs div.contact-box div.text-box p{font-size:11pt; font-weight: bold; color:#666; margin-bottom:8px;}
#contactUs div.contact-box div.text-box strong{color:#f00; margin-right:2px;}
#contactUs div.contact-box div.text-box span{color:#999; font-size:10pt; margin-left:5px;}
#contactUs div.contact-box div.text-box div.input-box{width:100%;}
#contactUs div.contact-box div.text-box textarea{width:100%; height:200px; resize: none; overflow-y: auto;}
#contactUs div.contact-box div.text-box label{font-size:10pt; vertical-align: middle;}
#contactUs div.contact-box div.text-box input[type="checkbox"]{vertical-align: top;}
#contactUs div.btn-box{text-align: center;}
#contactUs div.btn-box div.btn-blue{color:#fff; font-size:14pt; font-weight:bold; padding:15px 25px; background:#1bb1dc; cursor: pointer;}
#contactUs div.btn-box div.btn-blue:hover{background: #46c9ef; transition: all 1s ease; }

/* 서비스 */

#service div.tab ul{overflow: hidden; margin:0; padding:0;}
#service div.tab li{float:left; width:33.3333%; color:#999; font-size:12pt; font-weight: bold; padding:20px 0; text-align: center; border:1px solid #ddd; border-right:0; cursor: pointer;}
#service div.tab li:last-child{border-right:1px solid #ddd;}
#service div.tab li.conBox-on{color:#1bb1dc; border-bottom:0; border-top:4px solid #1bb1dc; }
#service div.conBox{display:none; padding:20px;}
#service div.conBox-on{display:block;}
#service div.conBox h5 {display:block; font-size:18pt; text-align:center; margin:20px 0 40px 0; line-height: 170%}
#service div.conBox div.text-box{margin-bottom:20px;}
#service div.conBox p{text-align:center; margin:0; line-height:170%;}

@media all and (min-width: 320px) {
  #introduce div.intro div.intro-img{display:none;}
  #introduce div.intro div.intro-text{width:100%;  text-align: center;}
  #sub-contents div.sub-img p{left:5%;}
  /* 게시판 */
  #board div.search-box select{width: 100%; margin-bottom:10px;}
  #board div.search-box div.search-text{width:100%;}
  #board div.search-box div.search-text div.input-box{width:80%;}
  #board div.search-box div.search-text div.btn-search{width:18.5%;}
  #board table td.num{display:none;}
  #board table td.kinds{display:none;}
  #board table td.board-title{width:80%;}
  #board table td.date{width:20%;}
  #board table th.title-num{display: none;}
  #board table th.title-kind{display: none;}
}

@media all and (min-width: 768px) {
  #board div.search-box select{width: 20%;}
  #board div.search-box div.search-text div.input-box{width:auto;}
  #board div.search-box div.search-text{width:50%;}
  #board div.search-box div.search-text div.btn-search{width:20%;}
  #board table td.num{display:table-cell; width:10%;}
  #board table td.kinds{display:table-cell; width:15%;}
  #board table td.board-title{width:60%;}
  #board table td.date{width:15%;}
  #board table th.title-num{display: table-cell;}
  #board table th.title-kind{display: table-cell;}
}

@media all and (min-width: 1200px) {
  #introduce div.intro div.intro-img{display:block;}
  #introduce div.intro div.intro-text{width:60%;  text-align: left;}
  #sub-contents div.sub-img p{left:22%;}

  /* 게시판 */
  #board div.search-box select{width: auto; margin-bottom:0;}
  #board div.search-box div.search-text div.btn-search{width:12%;}


}