@charset "UTF-8";
._fnctWrap{line-height:1.5}

.wrap-api .search {display: inline-block; width: 100%; margin-bottom: 50px;}
.wrap-api .search .form-search {background: #f5f6f8; padding:20px;}
.wrap-api .search .tbl-search {text-align: center;}
.wrap-api .search .box-title {display: inline-block; background: url('../images/ico-search-title.png') no-repeat  left center; font-family: 'Noto Regular'; font-size:18px; margin-right: 20px; padding: 6px 0 6px 55px; color: #18327c;}
.wrap-api .search .box-choose {position: relative; display: inline-block; padding-left: 15px; margin-right: 20px; font-family: 'Noto DemiLight'; font-size: 16px; color: #000;}
.wrap-api .search .box-choose:after {content: ''; position: absolute; left: 0; top: 7px; width: 1px; height: 15px; background: #b0b1b2;}
.wrap-api .search .box-sel {position: relative; top: 0px; display: inline-block; margin-right: 2px; vertical-align: middle;}
.wrap-api .search .box-sel select {background: #fff url('../images/arrow-search.png') no-repeat right center; font-size: 16px; font-family: 'Noto Light'; color: #9d9d9d; border:1px solid #ccd0d7; height: 55px; min-width: 200px; padding-left: 20px; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
.wrap-api .box-search {position: relative; display: inline-block; margin-left: 20px; vertical-align: middle;}
.wrap-api .box-search:after {content: ''; position: absolute; left: 32px; bottom: 10px; width: 0px; height: 1px; background: #47578e; transition: .4s;}
.wrap-api .box-search:hover:after {width: 28px;}
.wrap-api .box-search .btn-search-api {display: inline-block; cursor: pointer; background: #1b60c6; border: 1px solid #1b60c6; font-size: 15px; height: 45px; line-height: 45px; text-align: center; min-width:80px; margin: 0 1px; border-radius: 100px; font-family: 'Noto DemiLight'; color: #fff;}
.wrap-api .search .box-search input[type="submit"] {height: 55px; padding-left: 30px; background: url('../images/ico-search-btn.png') no-repeat left center; font-family: 'Noto DemiLight'; font-size: 16px; color: #18327c; cursor: pointer;}

.wrap-api .title {position: relative; padding-bottom: 30px; margin-bottom: 30px;}
.wrap-api .title .util {position: absolute; right: 0; top: 0;}
.wrap-api .title .util .box-sel,
.wrap-api .title .util .box-search  {display: inline-block; vertical-align: middle;}
.wrap-api .title .util .box-sel select {background: #fff url('../images/arrow-search.png') no-repeat right center; font-size: 16px; font-family: 'Noto Light'; color: #555; border:1px solid #949494; height: 45px;  padding-left: 15px; padding-right: 36px; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
.wrap-api .btn-naver {display:inline-block; position:relative; background:#03ba64; padding:3px 16px 4px 43px; border-radius: 5px;  border:1px solid #03ba64; font-family: 'Noto Light'; font-size: 16px; color: #fff;}
.wrap-api .btn-naver:after {content:''; position:absolute; left:14px; top:8px; width:15px; height:15px; background:url('../images/ico-naver.png') no-repeat center top;}

.btn-style.rect {display:inline-block; position:relative; background:#fff; margin-right: 10px; padding:3px 20px 4px 37px; border-radius: 5px;  border:1px solid #b9c1d7; font-family: 'Noto Light'; font-size: 16px; color: #4b4b4b;}
.btn-style.rect:hover {background:#1c3d8d; border-color: #1c3d8d; color:#fff; transition:all 0.3s cubic-bezier(0.7, 0, 0.3, 1);}
.btn-style.rect.type1:after {content:''; position:absolute; left:14px; top:7px; width:13px; height:17px; background:url('../images/ico-btn3.png') no-repeat center top;}
.btn-style.rect.type1:hover:after {background-position: center bottom;}
.btn-style.rect.type2:after {content:''; position:absolute; left:15px; top:8px; width:15px; height:15px; background:url('../images/ico-btn4.png') no-repeat center top;}
.btn-style.rect.type2:hover:after {background-position: center bottom;}
.btn-style.rect.type3:after {content:''; position:absolute; left:15px; top:8px; width:12px; height:15px; background:url('../images/ico-btn5.png') no-repeat center top;}
.btn-style.rect.type3:hover:after {background-position: center bottom;}
.btn-style.rect.type4:after {content:''; position:absolute; left:12px; top:8px; width:19px; height:15px; background:url('../images/ico-btn6.png') no-repeat center top;}
.btn-style.rect.type4:hover:after {background-position: center bottom;}
.btn-style.rect.type5:after {content:''; position:absolute; left:12px; top:8px; width:16px; height:16px; background:url('../images/ico-btn7.png') no-repeat center top;}
.btn-style.rect.type5:hover:after {background-position: center bottom;}


@media all and (max-width:800px) {
    .wrap-api .search .tbl-search {width: 100%;}
    .wrap-api .search .box-sel {display: block; width: 100%; margin: 10px 0;}
    .wrap-api .search .box-sel select {width: 100%; min-width: auto;}
    .wrap-api .box-search {min-width: auto;}
    .wrap-api .box-search input {min-width: auto;}
    .wrap-api .box-search {margin-left: 0;}
    .wrap-api .search .box-search input[type="submit"] {width: 100%; padding: 0; background: #fff; border: 1px solid #ddd;}
    .wrap-api .box-search:after {display: none;}
    .wrap-api .title {padding-bottom: 77px;}
    .wrap-api .title .util {left: 0; right: auto; top: 50px; width: 100%;}
}