@charset "UTF-8"; ._fnctWrap{line-height:1.5} div[id^='map_'].defaultMap { background: url("../images/default_map.png") no-repeat 0 0; background-size: 100% 100%; } .wrap-location .map {width: 100%; min-height: 570px;} .wrap-location .desc {position: relative; display: inline-block; width: 100%; margin: -31px 0 0 0; padding: 20px; background: #EDF1F4; z-index: 10;} .wrap-location .desc .address, .wrap-location .desc .tel {position: relative; padding:7px 10px 0px 80px; min-height: 60px;} .wrap-location .desc .tel::before {content: ""; position: absolute; width: 60px; height: 60px; background: #06988D url("../images/ic_call.png") no-repeat center; border-radius: 50%; left: 0; top: 0px;} .wrap-location .desc .address {margin-bottom: 10px;} .wrap-location .desc .address::before {content: ""; position: absolute; width: 60px; height: 60px; background: #06988D url("../images/ic_location.png") no-repeat center; border-radius: 50%; left: 0; top: 0px;} .wrap-location .desc strong {display:block; font-family: 'Montserrat'; font-weight: 700; font-size: 14px; color: #333333} .wrap-location .desc p {font-family: 'Noto Light'; font-size: 16px; color: #333;} .location-info {float: left; width: calc(100% - 193px); padding-right: 20px;} .location-btn-bx {float: left; text-align: right; width: 193px;} .wrap-location .desc .btn-location {display: inline-block; position: relative; padding: 15px 55px 15px 20px; background: #003956 url('../images/btn_repeat_bg.png'); font-family: 'Noto Regular'; font-size: 18px; color: #fff; white-space: nowrap; text-align: left; width: 100%;} .wrap-location .desc .btn-location:last-child {margin-top: 10px;} .wrap-location .desc .btn-location::after {content: ""; position: absolute; width: 30px; height: 30px; background: url("../images/ic_location_arrow.png") no-repeat center; right: 15px; top: 14px; transition: right 0.5s;} .wrap-location .desc .btn-location:hover::after {right: 10px;} @media all and (max-width: 1220px) { .location-info {float: none; width: 100%;} .wrap-location .desc .link-wrap{float: none; margin-top: 20px; clear: both;} .location-btn-bx {float: none; width: 100%; margin-top: 15px;} .wrap-location .desc .btn-location {width: auto;} } @media all and (max-width: 950px) { } @media all and (max-width: 768px) { .location-btn-bx {width: 100%; margin-top: 10px;} .wrap-location .desc .btn-location {display: inline-block; margin-top: 10px;} .wrap-location .desc .address {margin-right: 0%; margin-bottom: 10px;} .wrap-location .desc .address, .wrap-location .desc .tel {width: 100%; margin-right: 0%;} } @media all and (max-width: 400px){ .wrap-location .desc .btn-location {width: 100%; font-size: 15px;} } .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%;} }