/* Postal Code */ #postal-code { display: none; position: absolute; left: 50%; top: 20px; width: 760px; margin-left: -380px; background-color: #525c74; border-radius: 0.5em; box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5); z-index: 110; } #postal-code .postal-header { margin-left: 20px; } #postal-code .postal-header .title { padding: 15px 30px 12px; background: url("/static/images/homepage/address/address-title-icon.gif") left center no-repeat; color: #fff; font-size: 18px; line-height: 1.5; letter-spacing: -0.05em; } #postal-code .postal-header .close { position: absolute; right: 10px; top: 14px; width: 30px; height: 24px; background: url("/static/images/homepage/address/address-close-icon.gif") no-repeat; } #postal-code .postal-header .close span { display: none; } #postal-code .postal-body { margin: 0 10px; padding: 15px; background-color: #fff; border-radius: 0.5em; color: #7390a0; font-family: "NotoSans Regular"; font-size: 16px; } #postal-code .postal-body .search-type-tab { margin-bottom: 40px; } #postal-code .postal-body .search-type-tab ul { width: 100%; overflow: hidden; } #postal-code .postal-body .search-type-tab ul li { position: relative; float: left; width: 33.3333%; border: 1px solid #bad8e9; border-bottom: 1px solid #739fc7; border-left: none; background-color: #ebf0f3; box-sizing: border-box; } #postal-code .postal-body .search-type-tab ul li:first-child { border-left: 1px solid #bad8e9; } #postal-code .postal-body .search-type-tab ul li a { display: block; line-height: 42px; color: #7390a0; text-align: center; } #postal-code .postal-body .search-type-tab ul li.is-active { border-top: 1px solid #739fc7; border-bottom: none; background-color: #fff; } #postal-code .postal-body .search-type-tab ul li.is-active:before { content: ""; position: absolute; left: -1px; top: 0; width: 1px; height: 43px; background-color: #739fc7; } #postal-code .postal-body .search-type-tab ul li.is-active:after { content: ""; position: absolute; right: -1px; top: 0; width: 1px; height: 43px; background-color: #739fc7; } #postal-code .postal-body .search-type-tab ul li.is-active a { color: #002d40; } #postal-code .postal-body .search-address-form { padding: 20px 15px; border: 5px solid #cee3ee; text-align: center; } #postal-code .postal-body .search-address-form form { position: relative; display: block; padding: 0 97px 0 155px; } #postal-code .postal-body .search-address-form form select { position: absolute; left: 0; top: 0; width: 150px; height: 47px; font-size: 0.9231em; font-family: "NotoSans Regular"; color: #002d40; vertical-align: middle; } #postal-code .postal-body .search-address-form form .search-input { position: relative; height: 47px; padding: 0 45px 0 10px; border: 1px solid #bad8e9; box-sizing: border-box; } #postal-code .postal-body .search-address-form form .search-input .input { display: none; } #postal-code .postal-body .search-address-form form .search-input .input input { width: 100%; height: 45px; padding: 0; border: none; background-color: #fff; font-family: "NotoSans Regular"; line-height: 45px; font-size: 1em; outline: 0; } #postal-code .postal-body .search-address-form form .search-input .input input::-webkit-input-placeholder { font-size: 0.9231em; } #postal-code .postal-body .search-address-form form .search-input .input input::-ms-clear { width: 0; height: 0; } #postal-code .postal-body .search-address-form form .search-input .input.is-active { display: inline; vertical-align: middle; } #postal-code .postal-body .search-address-form form .search-input .clear { display: none; position: absolute; right: 0; top: 0; width: 45px; height: 45px; background: #fff url('/static/images/homepage/address/address-clear-input.png') center center no-repeat; border: none; cursor: pointer; } #postal-code .postal-body .search-address-form form .submit-button { position: absolute; right: 0; top: 0; width: 92px; height: 47px; padding: 5px 0; background-color: #3e7bb2; border: none; color: #fff; cursor: pointer; vertical-align: middle; border-radius: 5px; transition: background-color .2s ease; font-size: 1em; } #postal-code .postal-body .search-address-form form .submit-button:hover { background-color: #0089d5; } #postal-code .postal-body .search-address-form .search-guide { margin-top: 20px; padding: 0 5px; text-align: left; } #postal-code .postal-body .search-address-form .search-guide h3 { margin-bottom: 5px; font-size: 0.875em; } #postal-code .postal-body .search-address-form .search-guide .examples { display: none; } #postal-code .postal-body .search-address-form .search-guide .examples.is-active { display: block; } #postal-code .postal-body .search-address-result { height: 340px; margin-top: 20px; color: #002d40; text-align: left; overflow: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } #postal-code .postal-body .search-address-result .searching { padding: 25px 0 45px; text-align: center; } #postal-code .postal-body .search-address-result .searching i:before { display: block; width: 100px; margin: 0 auto 5px; font-family: "Font Awesome 5 Free"; font-size: 3.125em; -webkit-animation: fa-spin 2s infinite linear; animation: fa-spin 2s infinite linear; } #postal-code .postal-body .search-address-result .searching strong { font-size: 1.25em; } #postal-code .postal-body .search-address-result .info { padding: 25px 0 45px; text-align: center; } #postal-code .postal-body .search-address-result .info i:before { display: block; margin-bottom: 5px; font-size: 3.125em; } #postal-code .postal-body .search-address-result .info strong { font-size: 1.25em; word-break: break-all; } #postal-code .postal-body .search-address-result h3 { margin-bottom: 10px; font-size: 1em; font-weight: normal; word-break: break-all; } #postal-code .postal-body .search-address-result h3 .count { color: #007dee; } #postal-code .postal-body .search-address-result ul { border-top: 2px solid #bad8e9; border-bottom: 2px solid #bad8e9; } #postal-code .postal-body .search-address-result ul li { position: relative; margin-top: -1px; padding: 15px 0 15px 170px; border-top: 1px solid #bad8e9; cursor: pointer; } #postal-code .postal-body .search-address-result ul li:hover { background-color: #e4edf3; } #postal-code .postal-body .search-address-result ul li .zipcode { position: absolute; left: 10px; top: 50%; width: 156px; margin-top: -11px; font-weight:bold; text-align: center; } #postal-code .postal-body .search-address-result ul li .address { word-break: break-all; } #postal-code .postal-body .search-address-result ul li .address .jibun { color: #7390a0; } #postal-code .postal-body .search-address-result ul li .address .jibun span { display: inline-block; margin-bottom: 2px; padding: 0 6px; border: 1px solid #7390a0; border-radius: 3px; font-size: 0.8125em; vertical-align: middle; } #postal-code .postal-close { margin: 3% auto; text-align: center; } #postal-code .postal-close .close-button {} #postal-code .postal-close .close-button:hover { background-position: left top; } #postal-code .postal-close .close-button span { padding: 0 20px; } #postal-code .postal-close .close-button span strong { padding-right: 5px; font-family: "Lucida Sans Unicode", Dotum; font-weight: bold; } @media screen and (max-width:1024px) { #postal-code { width: 610px; margin-left: -305px; } #postal-code .postal-body .search-address-form form { padding-left: 125px; } #postal-code .postal-body .search-address-form form select { width: 120px; } } @media screen and (max-width:640px) { #postal-code { left: 0; width: 100%; max-width: 100%; margin: 0; } #postal-code .postal-body { padding: 8px; font-size: 12px; } #postal-code .postal-body .search-type-tab { margin-bottom: 10px; } #postal-code .postal-body .search-type-tab ul li a { line-height: 26px; } #postal-code .postal-body .search-type-tab ul li.is-active:before, #postal-code .postal-body .search-type-tab ul li.is-active:after { height: 27px; } #postal-code .postal-body .search-address-form { padding: 10px 8px; border-width: 3px; } #postal-code .postal-body .search-address-form form { padding-left: 90px; padding-right: 56px; } #postal-code .postal-body .search-address-form form select { width: 86px; height: 28px; } #postal-code .postal-body .search-address-form form .search-input { height: 28px; padding: 0 23px 0 2px; } #postal-code .postal-body .search-address-form form .search-input .input input { height: 26px; line-height: 26px; } #postal-code .postal-body .search-address-form form .search-input .clear { width: 26px; height: 26px; background-size: 50%; } #postal-code .postal-body .search-address-form form .submit-button { width: 52px; height: 28px; padding: 0; line-height: 28px;} #postal-code .postal-body .search-address-form .search-guide { margin-top: 10px; } #postal-code .postal-body .search-address-form .search-guide h3 { margin-bottom: 0; } #postal-code .postal-body .search-address-result .info { padding: 15px 0 25px; } #postal-code .postal-body .search-address-result { margin-top: 15px; } #postal-code .postal-body .search-address-result h3 { margin-bottom: 5px; } #postal-code .postal-body .search-address-result ul li { padding: 8px 0 8px 20%; } #postal-code .postal-body .search-address-result ul li .zipcode { left: 0; width: 20%; margin-top: -9px; } #postal-code .postal-body .search-address-result ul li .address .jibun { font-size: 0.8462em; } #postal-code .postal-body .search-address-result ul li .address .jibun span { padding: 0 3px; font-size: 0.7692em; line-height: 12px; } }