@charset "UTF-8";

/* Search */
.board-search {display: inline-block; width: 100%; margin-bottom: 26px;}
.board-search .form-search {background: #f7f7f7; padding:20px;}
.board-search .tbl-search {text-align: center;}
.board-search .box-title {display: inline-block; margin-right: 20px; background: url('../images/ico-search-title.png') no-repeat left center; font-family: 'Dream Medium'; font-size: 20px; vertical-align: middle; color: #333;}
.board-search .box-sel {position: relative; top: 0px; display: inline-block; margin-right: 2px; vertical-align: middle;}
.board-search .box-sel select {background: #fff url('../images/arrow-search.png') no-repeat right center; font-size: 16px; font-family: 'Dream Regular'; color: #888; border:1px solid #ccd0d7; height: 55px; min-width: 130px; padding-left: 20px; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
.board-search .box-search {position: relative; top:0; display: inline-block; vertical-align: middle; background: #fff; height: 55px; line-height: 55px; border:1px solid #ccd0d7; min-width: 350px;}
.board-search .box-search input {position: relative; top: -1px; width: 100%; height: 100%; background: transparent; border: 0; font-family: 'Dream Regular'; font-size: 16px; text-indent: 10px; color: #888;}
.board-search .box-search input::placeholder {color: #888;}
.board-search .box-search input[type="submit"] {position: absolute; left: 100%; top: 0; width: 70px; height: 55px; margin-left: 5px; background: #0068b7; text-indent: 0; color: #fff; cursor: pointer;}
.board-search .util-search {margin-bottom: 20px; font-family: 'Dream Regular'; font-size: 16px; color: #666;}
.board-search .util-search a {display: inline-block; width: 30px; text-indent: -9999px; background: url('../images/ico-rss.png') no-repeat center center; margin-right:10px;}
.board-search .util-search strong {font-family: 'Dream Regular'; font-size: 16px; color: #333;}

@media all and (max-width: 1070px) {
    .board-search .box-title {display: none;}
}

@media all and (max-width: 780px) {
    .board-search {margin-bottom: 20px;}
    .board-search .box-title {display: none;}
    .board-search .tbl-search {display: table; width: 100%; table-layout: fixed;}
    .board-search .util-search {display: none;}
    .board-search .box-sel {width:35%; display: table-cell; margin-right: 0; padding-right: 20px;}
    .board-search .box-sel select {min-width: auto; width: 100%;}
    .board-search .box-search {display: table-cell;}
    .board-search .box-search input[type="submit"] {left: auto; right: 0;}
}

/* Keyword*/
.box-key {overflow: hidden;}
.box-key .key-kr {float: left; width: 34.4%; margin-right: 1.5%;}
.box-key .key-en {float: left; width: calc(100% - 35.9%);}
.box-key .title {margin-bottom: 10px; font-family: 'Dream Bold'; font-size: 22px; color: #0068b7;}
.box-key .title h3 {position: relative; display: inline-block;}
.box-key .title h3::after {content: ''; position: absolute; left: 100%; top: 0; width: 8px; height: 8px; border-radius: 100%; background: #0068b7;}

.box-key .key ul {overflow: hidden; width: 102%;}
.box-key .key li {float: left; width: 14.285%; padding-right: 10px; padding-bottom: 10px;}
.box-key .key li a {display: inline-block; width: 100%; height: 60px; border: 1px solid #c5cbcf; font-family: 'Dream Light'; font-size: 24px; line-height: 60px; text-align: center; color: #333;}
.box-key .key li a:hover,
.box-key .key li a.on {border-color: #0068b7;}

.box-key .key.key-en ul {width: 101%;}
.box-key .key.key-en li {width: 7.692%;}

.word-result {overflow: hidden; margin-top: 7px;}
.word-result .list  {float: left; width: 34.4%; margin-right: 1.5%; border: 1px solid #c5cbcf;}
.word-result .list li {padding: 6px 0; font-family: 'Dream Light'; font-size: 16px; color: #666; cursor: pointer;}
.word-result .list li.on {font-family: 'Dream Regular'; color: #0068b7;}
.word-result .detail {float: left; width: calc(100% - 35.9%); border: 1px solid #c5cbcf;}
.word-result .title {padding: 15px 30px; font-family: 'Dream Light'; font-size: 18px; color: #666;}
.word-result .desc { padding: 15px 30px; background: #f7f7f7;}
.word-result .desc strong {font-family: 'Dream Medium'; font-size: 22px; color: #111;}
.word-result .desc #dcArea li {padding-bottom: 10px; font-family: 'Dream Regular'; font-size: 16px; color: #666;}

.word-result #wordListArea {overflow: auto; height: 400px;}
.word-result #wordListArea::-webkit-scrollbar {width: 18px;}
.word-result #wordListArea::-webkit-scrollbar-thumb {background-color: #dddddd; border-radius: 0px;}

.word-result #dcArea {overflow: auto; height: 400px;}
.word-result #dcArea::-webkit-scrollbar {width: 18px;}
.word-result #dcArea::-webkit-scrollbar-thumb {background-color: #dddddd; border-radius: 0px;}

@media all and (max-width: 1060px) {
    .box-key .key-kr,
    .box-key .key-en  {float: none; width: 100%; margin-right: 0; padding-right: 0;}
    .box-key .key-kr {margin-bottom: 10px;}
    .box-key .key ul {width: 101%;}
    .box-key .key li {width: 7.14%;}
}

@media all and (max-width: 700px) {
    .box-key .key li {width: 14.14%;}
    .box-key .key li a {font-size: 20px; height: 40px; line-height: 40px;}
    .box-key .key.key-en li {width: 14.2%;}
    .box-key .title {font-size: 20px;}
    .word-result .list,
    .word-result .detail {float: none; width: 100%; margin-right: 0;}
    .word-result .list {margin-bottom: 20px;}
    .word-result #wordListArea {height: 180px;}
    .word-result #dcArea {height: 180px;}
}