/* BASIC css start */ #SMS_style input, #SMS_style input[type=text], #SMS_style input[type=date], #SMS_style input[type=tel], #SMS_style input[type=number], #SMS_style input[type=email], #SMS_style input[type=password], #SMS_style select { border-color: #ccc !important; height: 35px; border-radius: 0; padding: 0 5px; } #SMS_style input[type=text]:focus, #SMS_style input[type=date]:focus, #SMS_style input[type=tel]:focus, #SMS_style input[type=number]:focus, #SMS_style input[type=email]:focus, #SMS_style input[type=password]:focus { color: #333; background: #fff !important; outline: none;border: 2px solid #000 !important; } #SMS_style input[type=checkbox], #SMS_style input[type=radio] { -webkit-appearance: button !important; width: 21px !important; height: 21px !important; margin-bottom: 1px !important; border-radius: 0 !important; transition: .4s !important; background-image: url(img/check_input.png) !important; background-color: #ddd !important; background-position: center !important; background-size: 90% !important; border: 1px solid #ddd !important; border-radius: 100px !important; } #SMS_style input[type=checkbox]:checked, #SMS_style input[type=radio]:checked { background-color: #fededf !important; border-color: #fededf !important; } #pooky_store_search a, #pooky_store_search dd, #pooky_store_search del, #pooky_store_search div, #pooky_store_search dl, #pooky_store_searc dt, #pooky_store_search em, #pooky_store_search h1,#pooky_store_search h3, #pooky_store_search h4, #pooky_store_search h5, #pooky_store_search h6, #pooky_store_search i, #pooky_store_search iframe, #pooky_store_search img, #pooky_store_search input, #pooky_store_search label, #pooky_store_search legend, #pooky_store_search li, #pooky_store_search ol, #pooky_store_search p, #pooky_store_search select, #pooky_store_search span, #pooky_store_search strike, #pooky_store_search strong, #pooky_store_search table, #pooky_store_search tbody, #pooky_store_search td, #pooky_store_search textarea, #pooky_store_search tfoot, #pooky_store_search th, #pooky_store_search thead, #pooky_store_search tr, #pooky_store_search ul { font-family: 'Noto Sans KR', 'Quicksand', 'malgun gothic', sans-serif !important; } #pooky_store_search { text-align: center; background: #faf9f7; padding-bottom: 50px; } #pooky_store_search .title { text-align: center; font-size: 18px; font-weight: bold; font-family: 'LATO', sans-serif; padding: 20px 0 10px; background: #fff; } #pooky_store_search .store_img { margin-bottom: 20px; padding-top: 15px; background: #fff; } #pooky_store_search .store_img img { max-width: 100%; } #pooky_store_search .filter_area { text-align: center; position: relative; margin-bottom: 20px; background: #faf9f7; } #pooky_store_search .filter_area #select_location { font-size: 14px; font-weight: bold; padding: 0 25px; background: url(https://www.ilovej.net/design/iloveje/Pooky/arrow02.png) no-repeat 95% 43%; background-size: 13%; } #pooky_store_search .filter_area #select_location.active { background: url(https://www.ilovej.net/design/iloveje/Pooky/arrow03.png) no-repeat 95% 43%; background-size: 13%; } #pooky_store_search .filter_area #hidden_layer { position: absolute; left: 50%; background: #fff; border: 1px solid #c9cbca; padding: 20px; margin-left: -127px; top: 25px; z-index: 100; display: none; } #pooky_store_search .filter_area #hidden_layer ul { } #pooky_store_search .filter_area #hidden_layer ul li { margin-bottom: 10px; } #pooky_store_search .filter_area #hidden_layer ul li:last-child { margin-bottom:0; } #pooky_store_search .filter_area #hidden_layer ul li label { font-size: 14px; margin-right: 25px; } #pooky_store_search .filter_area #hidden_layer ul li label .hidden_text { display:none !important; } #pooky_store_search .filter_area #hidden_layer ul li label.active { font-weight: bold; } #pooky_store_search .filter_area #hidden_layer ul li label:last-child { margin-right:0; } #pooky_store_search .filter_area #hidden_layer ul li label input { appearance: none !important; background-image: url(https://www.ilovej.net/design/iloveje/Pooky/button_off.png) !important; width: 18px !important; height: 18px !important; margin-right: 2px; vertical-align: top; background-color: transparent !important; border-color: transparent !important; background-repeat: no-repeat; } #pooky_store_search .filter_area #hidden_layer ul li label input[type=radio]:checked { background-image: url(https://www.ilovej.net/design/iloveje/Pooky/button_on.png) !important; } #pooky_store_search #search_area { display: inline-block; position: relative; margin-bottom: 30px; } #pooky_store_search #search_area #search_location { border: 2px solid #c9cbca !important; width: 275px; height: 45px; font-size: 13px !important; padding: 0 35px 0 10px; } #pooky_store_search #search_area #search_btn { width: 17px; height: 17px; background: url(https://www.ilovej.net/design/iloveje/Pooky/search.png) no-repeat center; background-size: contain; display: block; position: absolute; right: 4%; top: 14px; } #pooky_store_search #result_area { max-width: 80%; margin: 0 auto; } #pooky_store_search #result_area ul { /*max-height: 545px; overflow-y: scroll; */} #pooky_store_search #result_area ul li { background: #fff; margin-bottom: 15px; padding: 25px; text-align: left; position: relative; } #pooky_store_search #result_area ul li.hidden { display:none !important; } #pooky_store_search #result_area ul li .name { font-size: 13px; font-weight: bold; margin-bottom: 10px; } #pooky_store_search #result_area ul li .address { font-size: 13px; margin-bottom: 10px; padding-right: 40px; line-height: 1.5; } #pooky_store_search #result_area ul li .number { font-size: 13px; } #pooky_store_search #result_area ul li .call_btn { position: absolute; right: 5%; top: 50%; width: 25px; height: 25px; background: url(https://www.ilovej.net/design/iloveje/Pooky/telephone.png) no-repeat center; background-size: contain; margin-top: -12px; } button span { visibility: visible; } /* 페이지 전환 시, 아래에서 올라오는 효과 */ #contentWrapper { width: 1460px; margin: 0 auto; overflow: hidden; transform: translateY(0%) scale(1); transition: transform 1.3s; animation: fadein 1.3s, changeShape 2.5s; /* 여기서 하나의 animation 속성으로 fadein과 changeShape를 함께 적용 */ -moz-animation: fadein 1.3s, changeShape 2.5s; /* Firefox */ -webkit-animation: fadein 1.3s, changeShape 2.5s; /* Safari and Chrome */ -o-animation: fadein 1.3s, changeShape 2.5s; /* Opera */ } #contentWrap{width:100%;} @keyframes fadein { from { transform: translateY(80%) scale(0); } to { transform: translateY(0%) scale(1); } } @keyframes changeShape { 0% { border-radius: 50%; } 100% { border-radius: 0; } } /* BASIC css end */