@charset "utf-8"; h1,h2,h3,h4,h5,h6,p,a,span,input,button,ul,li,b,label{font-family: "pretendard", sans-serif !important;} input::placeholder{font-family: "pretendard", sans-serif !important;} button:focus, button:active{box-shadow: unset !important;} .fa{ font: normal normal normal 14px / 1 FontAwesome !important;} /* head 시작 */ /*#nt_menu{background:#e8f1e1;z-index:1030;} */ #nt_menu{background:#fff;z-index:1030;} #nt_menu .nt-container .d-flex{height: 60px;align-items: center;} #nt_menu .nt-container .d-flex .me-list{height: 100%;} #nt_menu .nt-container .d-flex .me-list .logo_wrap{width: fit-content; margin: 0 auto; padding: 15px 20px; height: 100%;cursor: pointer;} #nt_menu .nt-container .d-flex .me-list .logo_wrap #logo_img{height: 85%;} #nt_menu .nt-container .d-flex .scan_wrap{cursor: pointer;} #nt_menu .nt-container .d-flex .me-icon i{font-size: 25px !important; line-height: 30px !important;} #nt_menu .me-li.on .me-a, #nt_menu .me-li:hover .me-a{background: unset !important;} /* head 끝 */ /* tail 시작 */ #nt_footer{position: fixed; width: 100%; left: 0; bottom: 0;background:#e8f1e1;z-index:1030; box-shadow: 0px -3px 3px -2px rgba(50, 60, 70, 0.15); -webkit-box-shadow: 0px -3px 3px -2px rgba(50, 60, 70, 0.15); -moz-box-shadow: 0px -3px 3px -2px rgba(50, 60, 70, 0.15);} #nt_footer>div{} #nt_footer>div>ul{display: flex;justify-content: space-between;align-items: center;} #nt_footer>div>ul li{width: 25%;text-align: center;height: 50px;padding: 10px;line-height: 30px;cursor: pointer;} #nt_footer>div>ul li p{} #nt_footer>div>ul li p i{font-size: 20px !important;} /* tail 끝 */ /* 커뮤니티 메인 시작 */ #nt_body #friend_pop{display: none;position: fixed; top: 0; left: 0; width: 100%; height: 100vh; backdrop-filter: blur(0px); background: rgba(0, 0, 0, 0.5); z-index: 999999;} #nt_body #friend_pop .modal{position:unset;display: block;width: fit-content;height: fit-content;overflow: unset;outline: unset;} #nt_body #friend_pop .modal .modal-body{ position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 30px); max-width: 600px; padding: 50px 20px; background: #fff; border-radius: 10px; z-index: -1;} #nt_body #friend_pop .modal .modal-body .modal-header{width: 70px; height: 70px; border-radius: 50%;padding: 0; position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);} #nt_body #friend_pop .modal .modal-body .modal-header i{font-size: 30px !important;color: #fff;line-height: 70px !important;margin: 0 auto;} #nt_body #friend_pop .modal .modal-body .title_wrap{} #nt_body #friend_pop .modal .modal-body .title_wrap p{font-size: 15px;display: block;text-align: center;word-break:keep-all;} #nt_body #friend_pop .modal .modal-body .title_wrap p:first-child{font-weight: bold;font-size: 20px;} #nt_body #friend_pop .modal .modal-body .icon-container{justify-content: space-between; align-items: center; margin: 50px auto; width: 100%;flex-flow: row wrap;} #nt_body #friend_pop .modal .modal-body .icon-container .icon_wrap{width: 25%; text-align: center;cursor: pointer;padding: 20px 10px;border-radius: 5px;} #nt_body #friend_pop .modal .modal-body .icon-container .icon_wrap>div{width: 80%;max-width: 70px; height: fit-content;aspect-ratio: auto 1 / 1; background: #EAEAEA; border-radius: 50%; box-shadow: 3px 3px 1px #0000002b; margin: 0 auto 20px;padding: 0;} #nt_body #friend_pop .modal .modal-body .icon-container .icon_wrap>div img{width:100%;height:100%;margin: 0 auto 0px;display: block;padding: 20px;} #nt_body #friend_pop .modal .modal-body .icon-container .icon_wrap:hover, #nt_body #friend_pop .modal .modal-body .icon-container .icon_wrap:active{box-shadow: 0 0px 5px rgba(0, 0, 0, 0.2);} #nt_body #friend_pop .modal .modal-body .icon-container .icon_wrap>p{font-size: 13px;} #nt_body #friend_pop .modal .modal-body button{width: 100%;height: 50px;outline: none;border-radius: 50px;padding: 0;text-align: center;border: none;font-size: 15px;} #nt_body #agree_pop{display: none;position: fixed; top: 0; left: 0; width: 100%; height: 100vh; backdrop-filter: blur(0px); background: rgba(0, 0, 0, 0.5); z-index: 999999;} #nt_body #agree_pop .modal{position:unset;display: block;width: fit-content;height: fit-content;overflow: unset;outline: unset;} #nt_body #agree_pop .modal .modal-body{ position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 30px); max-width: 600px; padding: 50px 20px; background: #fff; border-radius: 10px; z-index: -1;} #nt_body #agree_pop .modal .modal-body .modal-header{width: 70px; height: 70px; border-radius: 50%;padding: 0; position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);} #nt_body #agree_pop .modal .modal-body .modal-header i{font-size: 30px !important;color: #fff;line-height: 70px !important;margin: 0 auto;} #nt_body #agree_pop .modal .modal-body .title_wrap{} #nt_body #agree_pop .modal .modal-body .title_wrap p{font-size: 15px;display: block;text-align: center;word-break:keep-all;} #nt_body #agree_pop .modal .modal-body .title_wrap p:first-child{font-weight: bold;font-size: 20px;} #nt_body #agree_pop .modal .modal-body .icon-container{justify-content: space-between; align-items: center; margin: 50px auto; width: 100%;flex-flow: row wrap;} #nt_body #agree_pop .modal .modal-body .icon-container .icon_wrap{width: 25%; text-align: center;cursor: pointer;padding: 20px 10px;border-radius: 5px;} #nt_body #agree_pop .modal .modal-body .icon-container .icon_wrap>div{width: 80%;max-width: 70px; height: fit-content;aspect-ratio: auto 1 / 1; background: #EAEAEA; border-radius: 50%; box-shadow: 3px 3px 1px #0000002b; margin: 0 auto 20px;padding: 0;} #nt_body #agree_pop .modal .modal-body .icon-container .icon_wrap>div img{width:100%;height:100%;margin: 0 auto 0px;display: block;padding: 20px;} #nt_body #agree_pop .modal .modal-body .icon-container .icon_wrap:hover, #nt_body #agree_pop .modal .modal-body .icon-container .icon_wrap:active{box-shadow: 0 0px 5px rgba(0, 0, 0, 0.2);} #nt_body #agree_pop .modal .modal-body .icon-container .icon_wrap>p{font-size: 13px;} #nt_body #agree_pop .modal .modal-body button{width: 100%;height: 50px;outline: none;border-radius: 50px;padding: 0;text-align: center;border: none;font-size: 15px;} #nt_body #eggx_pop{display: none;position: fixed; top: 0; left: 0; width: 100%; height: 100vh; backdrop-filter: blur(0px); background: rgba(0, 0, 0, 0.5); z-index: 999999;} #nt_body #eggx_pop .modal{position:unset;display: block;width: fit-content;height: fit-content;overflow: unset;outline: unset;} #nt_body #eggx_pop .modal .modal-body{ position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 30px); max-width: 600px; padding: 50px 20px; background: #fff; border-radius: 10px; z-index: -1;} #nt_body #eggx_pop .modal .modal-body .modal-header{width: 70px; height: 70px; border-radius: 50%;padding: 0; position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);} #nt_body #eggx_pop .modal .modal-body .modal-header i{font-size: 30px !important;color: #fff;line-height: 70px !important;margin: 0 auto;} #nt_body #eggx_pop .modal .modal-body .title_wrap{} #nt_body #eggx_pop .modal .modal-body .title_wrap p{font-size: 15px;display: block;text-align: center;word-break:keep-all;} #nt_body #eggx_pop .modal .modal-body .title_wrap p:first-child{font-weight: bold;font-size: 20px;} #nt_body #eggx_pop .modal .modal-body .icon-container{justify-content: space-between; align-items: center; margin: 50px auto; width: 100%;flex-flow: row wrap;} #nt_body #eggx_pop .modal .modal-body .icon-container .icon_wrap{width: 25%; text-align: center;cursor: pointer;padding: 20px 10px;border-radius: 5px;} #nt_body #eggx_pop .modal .modal-body .icon-container .icon_wrap>div{width: 80%;max-width: 70px; height: fit-content;aspect-ratio: auto 1 / 1; background: #EAEAEA; border-radius: 50%; box-shadow: 3px 3px 1px #0000002b; margin: 0 auto 20px;padding: 0;} #nt_body #eggx_pop .modal .modal-body .icon-container .icon_wrap>div img{width:100%;height:100%;margin: 0 auto 0px;display: block;padding: 20px;} #nt_body #eggx_pop .modal .modal-body .icon-container .icon_wrap:hover, #nt_body #eggx_pop .modal .modal-body .icon-container .icon_wrap:active{box-shadow: 0 0px 5px rgba(0, 0, 0, 0.2);} #nt_body #eggx_pop .modal .modal-body .icon-container .icon_wrap>p{font-size: 13px;} #nt_body #eggx_pop .modal .modal-body button{width: 100%;height: 50px;outline: none;border-radius: 50px;padding: 0;text-align: center;border: none;font-size: 15px;} #nt_body #main_event_pop{display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; backdrop-filter: blur(0px); background: rgba(0, 0, 0, 0.5); z-index: 999999;} #nt_body #main_event_pop .pop_wrap{position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 30px); max-width: 600px; z-index: -1;}ㄴ #nt_body #main_event_pop .pop_wrap .event_Swiper{border-radius: 10px;} #nt_body #main_event_pop .pop_wrap .event_Swiper .swiper-wrapper{} #nt_body #main_event_pop .pop_wrap .event_pop_close{position: absolute;top:0;right: 0;height: 50px;width: 50px;text-align: center;cursor: pointer;margin: 0;z-index: 9;/*background:#fff ;border-radius: 10px;*/} #nt_body #main_event_pop .pop_wrap .event_pop_close i{font-size: 28px !important; text-align: center; line-height: 50px !important; color: #5e834d !important;} #nt_body #main_event_pop .pop_wrap .event_Swiper .swiper-wrapper .swiper-slide{padding: 50px 20px; background: #fff; border-radius: 10px;width: 100%;position: relative;top: 0;left: 0;z-index: 1; overflow: hidden;height: auto;} #nt_body #main_event_pop .pop_wrap .event_Swiper .swiper-wrapper .swiper-slide.one{} #nt_body #main_event_pop .pop_wrap .event_Swiper .swiper-wrapper .swiper-slide.one::after{content:"";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-image: URL('../../../../img/event_pop_bgg.png'); background-repeat: no-repeat; background-position: center -10vh; background-size:cover; z-index: -1;opacity: 0.5;} #nt_body #main_event_pop .pop_wrap .event_Swiper .swiper-wrapper .swiper-slide.one b{font-size: 25px; text-align: center; display: block;} #nt_body #main_event_pop .pop_wrap .event_Swiper .swiper-wrapper .swiper-slide.one span{font-size: 18px; display: block; text-align: center; width: 100%; max-width: 300px; word-break: keep-all; font-weight: bold; line-height: normal; margin: 20px auto 50px; color: #000 !important;} #nt_body #main_event_pop .pop_wrap .event_Swiper .swiper-wrapper .swiper-slide.one img.img_1{display: block; width: 60%; max-width: 200px;margin: 0px auto 50px;} #nt_body #main_event_pop .pop_wrap .event_Swiper .swiper-wrapper .swiper-slide.one img.img_2{width: 40%;margin: 0 auto 20px;display: block;} #nt_body #main_event_pop .pop_wrap .event_Swiper .swiper-wrapper .swiper-slide p.btn-primary{font-size: 15px; text-align: center; height: 50px; line-height: 50px; border-radius: 50px; cursor: pointer;} #nt_body #main_event_pop .pop_wrap .event_Swiper .swiper-wrapper .swiper-slide.two::after{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: URL('../../../../img/newimg1.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; z-index: -1;} #nt_body #main_event_pop .pop_wrap .event_Swiper .swiper-wrapper .swiper-slide.two p.btn-primary{position: absolute; bottom: 40px; width: calc(100% - 40px);background: #fff !important;color: #48b813 !important; font-weight: bold;} #nt_body #main_event_pop .pop_wrap .event_Swiper .swiper-wrapper .swiper-slide.three::after{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: URL('../../../../img/newimg3.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; z-index: -1;} #nt_body #main_event_pop .pop_wrap .event_Swiper .swiper-wrapper .swiper-slide.three p.btn-primary{position: absolute; bottom: 40px; width: calc(100% - 40px);background: #fff !important;color: #48b813 !important; font-weight: bold;;} #nt_body #main_event_pop .pop_wrap .event_Swiper .swiper-wrapper .swiper-slide.three img{width: 100%;height: auto;display: block;} #nt_body #main_event_pop .pop_wrap .event_Swiper .swiper-wrapper .swiper-slide.four::after{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: URL('../../../../img/newimg2.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; z-index: -1;} /* #nt_body #main_event_pop .pop_wrap .event_Swiper .swiper-wrapper .swiper-slide.four p.btn-primary{position: absolute; bottom: 40px; width: calc(100% - 40px);background: #48b813 !important;color: white !important; font-weight: bold;} */ #nt_body #main_event_pop .pop_wrap .event_Swiper .swiper-wrapper .swiper-slide.four p.btn-primary{position: absolute; bottom: 40px; width: calc(100% - 40px);background: #fff !important;color: #48b813 !important; font-weight: bold;;} #nt_body #main_event_pop .pop_wrap .event_Swiper .swiper-wrapper .swiper-slide.five::after{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: URL('../../../../img/pet_check_event4.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; z-index: -1;} #nt_body #main_event_pop .pop_wrap .event_Swiper .swiper-wrapper .swiper-slide.five p.btn-primary{position: absolute; bottom: 40px; width: calc(100% - 40px);background: #fff !important;color: #48b813 !important; font-weight: bold;;} #nt_body #main_event_pop .pop_wrap .event_Swiper .swiper-wrapper .swiper-slide.wpet::after{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: URL('../../../../img/warning_pet.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; z-index: -1;} #nt_body #main_event_pop .pop_wrap .event_Swiper .swiper-wrapper .swiper-slide.wpet p.btn-primary{position: absolute; bottom: 40px; width: calc(100% - 40px);background: #fff !important;color: #48b813 !important; font-weight: bold;;} #nt_body #main_event_pop .pop_wrap .event_Swiper .swiper-wrapper .swiper-slide.wpet img{width: 100%;height: auto;display: block;} #nt_body #main_event_pop .pop_wrap .event_Swiper .swiper-wrapper .swiper-slide.wcan::after{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: URL('../../../../img/warning_can.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; z-index: -1;} #nt_body #main_event_pop .pop_wrap .event_Swiper .swiper-wrapper .swiper-slide.wcan p.btn-primary{position: absolute; bottom: 40px; width: calc(100% - 40px);background: #fff !important;color: #48b813 !important; font-weight: bold;;} #nt_body #main_event_pop .pop_wrap .event_Swiper .swiper-wrapper .swiper-slide.wcan img{width: 100%;height: auto;display: block;} #nt_body #main_event_pop .pop_wrap .event_Swiper .swiper-pagination{} #nt_body #main_event_pop .pop_wrap .event_Swiper .swiper-pagination span.swiper-pagination-bullet{width: 10px;height: 10px;} #nt_body #main_event_pop .pop_wrap .event_Swiper .swiper-pagination span.swiper-pagination-bullet-active{background: #48b813;} #nt_body #main_event_pop .pop_wrap>p{color: #fff; text-align: center; font-size: 15px; width: fit-content; margin: 30px auto 0; height: 40px; line-height: 40px; cursor: pointer;} #nt_body #index{} #nt_body #index .visual{background: #e8f1e1;position: relative;top: 0;left: 0;z-index: 1;padding: 20px 0 70px;} #nt_body #index .visual::after{ content: ""; width: 100%; height: 100%; position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); background-image: URL('../../../../img/main_bg.svg'); background-repeat: no-repeat; background-position: center bottom; background-size:100%, cover; z-index: -1;} #nt_body #index .visual .egg_comment{width: calc(100% - 30px);max-width: 1200px;margin: 0 auto;display: flex;align-items: center;justify-content: space-between;} #nt_body #index .visual .egg_comment>img{width: 70px;height: 70px;} #nt_body #index .visual .egg_comment>.text{width: calc(100% - 80px);} #nt_body #index .visual .egg_comment>.text b{font-size: 15px;} #nt_body #index .visual .egg_comment>.text p{font-size: 13px;color: #747474;line-height: 12px;} #nt_body #index .visual .user_egg{width: calc(100% - 30px);max-width: 1200px;margin: 0 auto;text-align: right;} #nt_body #index .visual .user_egg span{font-size: 15px;font-weight: bold;} #nt_body #index .visual .user_egg span b{font-size: 20px;} #nt_body #index .visual .user_egg p{font-size: 13px;color: #747474;line-height: 12px;} #nt_body #index .visual .quick_btn{width: calc(100% - 30px);max-width: 1200px;margin: 20px auto 0;display: flex;justify-content: space-between;align-items: center;} #nt_body #index .visual .quick_btn b{width: calc(50% - 5px);height: 50px;line-height: 50px;text-align: center;border-radius: 3px;font-size: 13px;cursor: pointer;} #nt_body #index .visual .quick_btn b i{margin-right: 10px;} #nt_body #index .over{padding: 20px 15px 0; border-radius: 30px; position: relative; top: -30px; z-index: 15; background: #fff;} #nt_body #index .over .notice_oneline{width: 100%;max-width: 1200px;margin: 0 auto; height: 50px; line-height: 50px; background: #f8f8f8; display: flex; justify-content: space-between; align-items: center; padding: 0 15px; border-radius: 50px} #nt_body #index .over .notice_oneline i{font-size: 20px !important;} #nt_body #index .over .notice_oneline p{font-size: 13px; width: calc(100% - 30px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} #nt_body #index .over .round_egg{width: 100%;max-width: 1200px; margin: 30px auto 100px;} #nt_body #index .over .round_egg>b{font-size: 17px;display: block;width: 100%;margin-bottom: 10px;word-break:keep-all;} #nt_body #index .over .round_egg>span{display: block;position: relative;top: 0;left: 0;padding-left: 20px;font-size: 12px;color: #747474; line-height: 17px; margin-bottom: 10px;word-break:keep-all;} #nt_body #index .over .round_egg>span i{position: absolute;top: 2px;left: 0;color: #e8f1e1;} #nt_body #index .over .round_egg .count_wrap{margin: 30px 0;} #nt_body #index .over .round_egg .count_wrap p.num{display: block; width: fit-content; margin: 0 auto; font-size: 13px; background: #e8f1e1; padding: 0 10px; border-radius: 20px;} #nt_body #index .over .round_egg .count_wrap p.num span{font-size: 15px;font-weight: bold;} #nt_body #index .over .round_egg .count_wrap p.amount{font-weight: bold;font-size: 27px;width: 100%;text-align: center;} #nt_body #index .over .round_egg .count_wrap p.amount span{color: #000;font-size: 13px;} #nt_body #index .over .round_egg .count_wrap p.noti{font-size: 12px; color: #747474; display: block;text-align: center;word-break:keep-all;} #nt_body #index .over .round_egg>p{font-size: 15px; text-align: center; height: 50px; line-height: 50px; border-radius: 5px;cursor: pointer;} #nt_body #index .over .history_wrap{width: 100%;max-width: 1200px;margin: 0 auto;} #nt_body #index .over .history_wrap>.title_wrap{display: flex;justify-content: space-between;align-items: center;flex-flow: row wrap;width: 100%;} #nt_body #index .over .history_wrap>.title_wrap .left{width: calc(100% - 70px);} #nt_body #index .over .history_wrap>.title_wrap .left b{font-size: 17px;display: block;width: 100%;margin-bottom: 10px;word-break:keep-all;} #nt_body #index .over .history_wrap>.title_wrap .left span{display: block;position: relative;top: 0;left: 0;padding-left: 20px;font-size: 12px;color: #747474; line-height: 17px; margin-bottom: 10px;word-break:keep-all;} #nt_body #index .over .history_wrap>.title_wrap .left span i{position: absolute;top: 2px;left: 0;color: #e8f1e1;} #nt_body #index .over .history_wrap>.title_wrap .more{ width: 50px; height: 50px; background: #f8f8f8; border-radius: 5px; text-align: center; cursor: pointer;} #nt_body #index .over .history_wrap>.title_wrap .more i{font-size: 20px !important; line-height: 50px !important;color: #747474;} #nt_body #index .over .history_wrap>.title_wrap .more:active, #nt_body #index .over .history_wrap>.title_wrap .more:hover{background: #eae7e7;} #nt_body #index .over .history_wrap .history_slide{padding-bottom: 30px;} #nt_body #index .over .history_wrap .history_slide .swiper-wrapper{} #nt_body #index .over .history_wrap .history_slide .swiper-wrapper .swiper-slide{opacity: 1;background: #e8f1e1;padding: 20px;border-radius: 5px;} #nt_body #index .over .history_wrap .history_slide .swiper-wrapper .swiper-slide .his_title{display: flex;align-items: center;justify-content: space-between;} #nt_body #index .over .history_wrap .history_slide .swiper-wrapper .swiper-slide .his_title img{height: 30px;} #nt_body #index .over .history_wrap .history_slide .swiper-wrapper .swiper-slide .his_title p{width: calc(100% - 30px); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: keep-all; line-height: 17px; font-size: 13px; font-weight: bold;} #nt_body #index .over .history_wrap .history_slide .swiper-wrapper .swiper-slide .his_num{text-align: center; margin-top: 20px;} #nt_body #index .over .history_wrap .history_slide .swiper-wrapper .swiper-slide .his_num p{font-size: 15px;font-weight: bold;line-height: 20px;} #nt_body #index .over .history_wrap .history_slide .swiper-wrapper .swiper-slide .his_num p span{font-size: 20px;} #nt_body #index .over .history_wrap .history_slide .swiper-wrapper .swiper-slide .his_num p span.minus{color: #d33939 !important;} #nt_body #index .over .history_wrap .history_slide .swiper-wrapper .swiper-slide .his_num>span{font-size: 13px;color: #747474;line-height: 12px;} #nt_body #index .over .history_wrap .history_slide .swiper-wrapper .swiper-slide.no_data{width: 100% !important;} #nt_body #index .over .history_wrap .history_slide .swiper-wrapper .swiper-slide.no_data p{font-size: 13px;color: #747474;line-height: 12px;} #nt_body #index .over .history_wrap .history_slide .swiper-pagination{bottom: 0;} #nt_body #index .over .history_wrap .history_slide .swiper-pagination .swiper-pagination-bullet{width: 7px; height: 7px;background: #3ca50a;opacity: 0.3;} #nt_body #index .over .history_wrap .history_slide .swiper-pagination .swiper-pagination-bullet-active {width: 40px;height: 7px;transition: width .5s;border-radius: 40px;background: #3ca50a; opacity: 1; } /* 커뮤니티 메인 끝 */ /* 서브페이지 공통 시작*/ .sub_mom{padding-bottom: 50px;} .sub_baby{padding: 20px 15px 0; border-radius: 30px; position: relative; top: -30px; z-index: 15; background: #fff;} .page_title{background: #e8f1e1;position: relative;top: 0;left: 0;z-index: 1;padding: 50px 0 90px;} .page_title::after{ content: ""; width: 100%; height: 100%; position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); background-image: URL('../../../../img/main_bg.svg'); background-repeat: no-repeat; background-position: center bottom; background-size:100%, cover; z-index: -1;} .page_title>b{font-size: 20px; width: calc(100% - 30px); margin: 0 auto 20px; max-width: 1200px; display: block;text-align: left;} .page_title>b i{font-size: 20px !important;} .page_title .search_wrap{width: calc(100% - 30px); margin: 0 auto; max-width: 1200px;display: flex;justify-content: space-between;align-items: end;} .page_title .search_wrap .input_wrap{position: relative;width: calc(100% - 70px);top: 0;left: 0; padding-top: 25px; border-radius: 5px; overflow: hidden;margin-bottom: 0px;} .page_title .search_wrap .input_wrap input{font-size: 15px;width: 100%;border:none; color:#000 !important; padding: 0 10px;height: 50px;line-height: 50px;position: relative;z-index: 5;border-radius: 5px;background: #ffffff8f;} .page_title .search_wrap .input_wrap input::-webkit-inner-spin-button { appearance: none; -moz-appearance: none; -webkit-appearance: none; } .page_title .search_wrap .input_wrap input::placeholder { color: #aaaaaa;} .page_title .search_wrap .input_wrap input:focus { outline: none; box-shadow: unset;} .page_title .search_wrap .input_wrap label{width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #000; position: absolute; left: 10px; font-size: 15px; bottom: 11px; margin-bottom: 0; transition: all .2s; z-index: 3;} .page_title .search_wrap .input_wrap span{background: #c3c9be; display: block; position: absolute; bottom: 0; left: 0%; width: 0; height: 2px; border-radius: 2px; transition: 0.5s; z-index: 6;} .page_title .search_wrap .input_wrap input:focus, .page_title .search_wrap .input_wrap input:valid {background: #ffffff8f;} .page_title .search_wrap .input_wrap input:focus ~ label, .page_title .search_wrap .input_wrap input:valid ~ label {color: #818181; bottom: 50px; left: 0;font-weight: bold;} .page_title .search_wrap .input_wrap input:focus ~ span, .page_title .search_wrap .input_wrap input:valid ~ span {width: 100%; } .page_title .search_wrap .input_wrap.readonly label {color: #818181; bottom: 50px; left: 0;font-weight: bold;} .page_title .search_wrap .input_wrap.readonly span {width: 100%; } .page_title .search_wrap .input_wrap.readonly input {background: unset !important;} .page_title .search_wrap .input_wrap.unable label {color: #818181; bottom: 50px; left: 0;font-weight: bold;} .page_title .search_wrap .input_wrap.unable span {width: 100%; } .page_title .search_wrap .input_wrap.unable input {background: unset !important;} .page_title .search_wrap>button{padding: 0;width: 50px;height: 50px;border-radius: 0.25rem !important;background:#c3c9be ;border: none;} .page_title .search_wrap>button i{color: #fff;} .page_title_mini{background: #e8f1e1; position: relative; top: 0; left: 0; z-index: 1; padding: 20px 0 30px;} .page_title_mini b{font-size: 20px; width: calc(100% - 30px); margin: 0 auto 20px; max-width: 1200px; display: block;text-align: center;} .page_title_mini b i{font-size: 20px !important;} .line_bold{ height: 3px; width: 100%; background: #48b813; margin: 5px 0;} .line_slim{ height: 1px; width: 100%; background: #48b813; margin: 5px 0;} #nt_body p.pager{display: flex; justify-content: center; align-items: center; margin: 0;padding: 0 10px;} #nt_body p.pager a{width: 30px; height: 30px; text-align: center; line-height: 30px; background: #f0f0f0; border-radius: 5px; margin: 0 3px;color: #000 !important;cursor: pointer;font-size: 13px;font-weight: normal;} #nt_body p.pager a.atv{color: #fff !important;} /* 서브페이지 공통 끝*/ /* 내역 시작*/ #history{} #history .list_wrap{} #history .list_wrap .history_btn{display: flex;justify-content: space-between;align-items: center;width: 100%;max-width: 1200px; margin: 0 auto 20px;} #history .list_wrap .history_btn p{width: calc(50% - 5px); margin: 0; font-size: 13px;border-radius: 3px;height: 45px;line-height: 43px;padding: 0;} #history .list_wrap>button{background: #f0f0f0 !important; color: #000; border: none;width: 100%;max-width: 1200px; margin: 0 auto 20px; height: 45px; line-height: 43px; padding: 0; font-size: 13px; border: 1px solid #d9d9d9; border-radius: 3px;display: block;} #history .list_wrap>ul{width: 100%;max-width: 1200px ;margin: 0 auto;} #history .list_wrap>ul>li{background: #fff; box-shadow: 0px 0px 5px #e4e4e4; margin-bottom: 10px; padding: 15px;border-radius: 5px;margin-bottom: 10px;} #history .list_wrap>ul>li:last-child{margin-bottom: 0px;} #history .list_wrap>ul>li .his_title{display: flex;align-items: center;justify-content: space-between;} #history .list_wrap>ul>li .his_title img{height: 30px;} #history .list_wrap>ul>li .his_title p{width: calc(100% - 30px); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: keep-all; line-height: 17px; font-size: 13px; font-weight: bold;} #history .list_wrap>ul>li .his_num{text-align: right;} #history .list_wrap>ul>li .his_num p{font-size: 15px;font-weight: bold;line-height: 20px;} #history .list_wrap>ul>li .his_num p span{font-size: 20px;} #history .list_wrap>ul>li .his_num p span.minus{color: #d33939 !important;} #history .list_wrap>ul>li .his_num>span{font-size: 13px;color: #747474;line-height: 12px;} #history .list_wrap>ul>li.no_data{width: 100% !important;background: none;box-shadow: unset;text-align: center;} #history .list_wrap>ul>li.no_data p{font-size: 13px;color: #747474;line-height: 12px;} /* 내역 끝*/ /* 페트방위치 시작 */ #petroom{} #petroom .sub_baby{} #petroom .sub_baby .area_wrap{width: 100%; max-width: 1200px; margin: 0 auto;} #petroom .sub_baby .area_wrap #map{width: 100%;height: 300px;margin-bottom: 20px;border-radius: 20px;} #petroom .sub_baby .area_wrap #map img{} #petroom .sub_baby .area_wrap #map img#my_now_location{position: absolute; z-index: 9; width: 30px; height: 30px; right: 20px; filter: brightness(0) saturate(100%) invert(15%) sepia(95%) saturate(6679%) hue-rotate(207deg) brightness(92%) contrast(97%); top: 20px; cursor: pointer;} #petroom .sub_baby .area_wrap .area_btn{text-align: center;} #petroom .sub_baby .area_wrap .area_btn button{padding: 0; width: 70px; height: 50px;font-size: 13px; line-height: 50px; border: none;margin: 0 0 5px 0 !important;} #petroom .sub_baby .detail_wrap{width: 100%; max-width: 1200px; margin: 0 auto;} #petroom .sub_baby .detail_wrap .title{ margin: 20px 0; line-height: 40px; font-size: 15px;text-align: right;} #petroom .sub_baby .detail_wrap{} #petroom .sub_baby .detail_wrap>ul{display: flex;justify-content: space-between;align-items: center;flex-flow: row wrap;width: 100%;} #petroom .sub_baby .detail_wrap>ul li{width: calc(50% - 10px); background: #fff; box-shadow: 0px 0px 5px #e4e4e4; padding: 15px; border-radius: 5px; margin-bottom: 20px;} #petroom .sub_baby .detail_wrap>ul li .con{position: relative;top: 0;left: 0;} #petroom .sub_baby .detail_wrap>ul li .con b{width: calc(100% - 50px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 17px; font-size: 15px; font-weight: bold;display: block;margin-bottom: 5px;} #petroom .sub_baby .detail_wrap>ul li .con p{width: calc(100% - 50px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 17px; font-size: 13px;margin-bottom: 20px;} #petroom .sub_baby .detail_wrap>ul li .con::after{content: ""; display: block; position: absolute; top: 50%; transform: translateY(-50%); right: 0; width: 40px; height: 40px; background-repeat: no-repeat; background-position: center;} #petroom .sub_baby .detail_wrap>ul li .con.can::after{background-image: url(../../../img/can_use_icon.svg);} #petroom .sub_baby .detail_wrap>ul li .con.cant::after{background-image: url(../../../img/cant_use_icon.svg);} #petroom .sub_baby .detail_wrap>ul li .con.open::after{background-image: url(../../../img/coming_use_icon.svg);} #petroom .sub_baby .detail_wrap>ul li .btn_wrap{justify-content: space-between;align-items: center;} #petroom .sub_baby .detail_wrap>ul li .btn_wrap p{width: calc(50% - 5px); height: 50px; line-height: 50px; text-align: center; border-radius: 3px; font-size: 13px; cursor: pointer;background: #f8f8f8;} #petroom .sub_baby #pop_content{position: fixed; display: none; width: 100%; height: 100%; top: 0; left: 0; background: #00000047; z-index: 999;} #petroom .sub_baby #pop_content .wrap{width: calc(100% - 30px); max-width: 600px; height: fit-content; max-height: calc(100% - 150px); overflow: auto;overflow-x: hidden !important; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; border-radius: 10px; background: #fff;} #petroom .sub_baby #pop_content .wrap #map_detail_content .map_details{} #petroom .sub_baby #pop_content .wrap #map_detail_content .map_details .img_wrap{} #petroom .sub_baby #pop_content .wrap #map_detail_content .map_details .img_wrap .con1{margin-bottom: 20px;} #petroom .sub_baby #pop_content .wrap #map_detail_content .map_details .img_wrap .con1>p{width: 100%; display: block; height: 50px; line-height: 50px; padding: 0; font-size: 13px;} #petroom .sub_baby #pop_content .wrap #map_detail_content .map_details .img_wrap .con1>#roadViewDetail{width: 100%; height: 300px; border: 1px solid #eee;display: none;} #petroom .sub_baby #pop_content .wrap #map_detail_content .map_details .img_wrap .con2{margin-bottom: 20px;} #petroom .sub_baby #pop_content .wrap #map_detail_content .map_details .img_wrap .con2>p{width: 100%; display: block; height: 50px; line-height: 50px; padding: 0; font-size: 13px;} #petroom .sub_baby #pop_content .wrap #map_detail_content .map_details .img_wrap .con2>.details_Swiper{width: 100%; height: 300px; margin: 0; background: #000;display: none;} #petroom .sub_baby #pop_content .wrap #map_detail_content .map_details .img_wrap .con2>.details_Swiper{} #petroom .sub_baby #pop_content .wrap #map_detail_content .map_details .img_wrap .con2>.details_Swiper .swiper-wrapper{} #petroom .sub_baby #pop_content .wrap #map_detail_content .map_details .img_wrap .con2>.details_Swiper .swiper-wrapper .swiper-slide{position: relative; top: 0; left: 0; width: 100%; height: auto; overflow: hidden;} #petroom .sub_baby #pop_content .wrap #map_detail_content .map_details .img_wrap .con2>.details_Swiper .swiper-wrapper .swiper-slide img{ width: 100%; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} #petroom .sub_baby #pop_content .wrap #map_detail_content .map_details .img_wrap .con2>.details_Swiper .swiper-pagination{} #petroom .sub_baby #pop_content .wrap #map_detail_content .map_details .table{} #petroom .sub_baby #pop_content .wrap #map_detail_content .map_details .table ul{} #petroom .sub_baby #pop_content .wrap #map_detail_content .map_details .table ul li{font-size: 15px;align-items: center;flex-flow: row wrap;margin-bottom: 10px;} #petroom .sub_baby #pop_content .wrap #map_detail_content .map_details .table ul li p{font-weight: bold;} #petroom .sub_baby #pop_content .wrap #map_detail_content .map_details .table ul li p i{padding-right: 5px;} #petroom .sub_baby #pop_content .wrap #map_detail_content .map_details .table ul li span{padding-left: 5px;line-height: 20px;} #petroom .sub_baby #pop_content .wrap>a{display: block;width: 100%;height: 50px;line-height: 50px;padding: 0;font-size: 13px;border: none;margin-top: 50px;} /* 페트방위치 끝 */ /* 회차별 그린에그 시작 */ #details_by_round{} #details_by_round .sub_baby{} #details_by_round .sub_baby .round_egg{width: 100%;max-width: 1200px; margin: 30px auto 100px;} #details_by_round .sub_baby .round_egg>b{font-size: 17px;display: block;width: 100%;margin-bottom: 10px;word-break:keep-all;width: 100%;text-align: center;} #details_by_round .sub_baby .round_egg>span{display: block;position: relative;top: 0;left: 0;padding-left: 20px;font-size: 12px;color: #747474; line-height: 17px; margin-bottom: 10px;word-break:keep-all;} #details_by_round .sub_baby .round_egg>span i{position: absolute;top: 2px;left: 0;color: #e8f1e1;} #details_by_round .sub_baby .round_egg .count_wrap{margin: 0px 0 30px;} #details_by_round .sub_baby .round_egg .count_wrap p.num{display: block; width: fit-content; margin: 0 auto; font-size: 13px; background: #e8f1e1; padding: 0 10px; border-radius: 20px;} #details_by_round .sub_baby .round_egg .count_wrap p.num span{font-size: 15px;font-weight: bold;} #details_by_round .sub_baby .round_egg .count_wrap p.amount{font-weight: bold;font-size: 27px;width: 100%;text-align: center;} #details_by_round .sub_baby .round_egg .count_wrap p.amount span{color: #000;font-size: 13px;} #details_by_round .sub_baby .round_egg .count_wrap p.noti{font-size: 12px; color: #747474; display: block;text-align: center;word-break: keep-all;} #details_by_round .sub_baby .round_egg>p{font-size: 15px; text-align: center; height: 50px; line-height: 50px; border-radius: 5px;cursor: pointer;} #details_by_round .sub_baby>p{width: 100%; max-width: 1200px; margin: 0px auto 10px;font-size: 17px;font-weight: bold;} #details_by_round .sub_baby>ul{width: 100%; max-width: 1200px; margin: 0 auto;} #details_by_round .sub_baby>ul li{box-shadow: 0px 0px 5px #e4e4e4;padding: 15px;margin-bottom: 10px;border-radius: 5px;} #details_by_round .sub_baby>ul li b{display: block; width: fit-content; font-size: 13px; background: #e8f1e1; padding: 0 10px; border-radius: 20px;margin-bottom: 15px;} #details_by_round .sub_baby>ul li p{font-size: 13px;} #details_by_round .sub_baby>ul li span{color: #000; font-size: 13px; font-weight: bold; word-break: keep-all; line-height: 18px; display: block; margin-top: 15px;} #details_by_round .btn_wrap{display: flex;justify-content: space-between;align-items: center;width: 100%;max-width: 1200px; margin: 20px auto 0px;} #details_by_round .btn_wrap a{width: calc(100% / 8); text-align: center; border-radius: 100px; height: 40px; line-height: 40px; font-size: 15px;padding: 0;border: none;} /* 회차별 그린에그 끝 */ /* 그린에그 선물하기, 그린에그>그린포인트 전환, 그린에그>TMTK전환 */ #egg_change{} #egg_change .page_title_mini{} #egg_change .page_title_mini b{} #egg_change .sub_baby{} #egg_change .sub_baby form{} #egg_change .sub_baby form .your_egg{width: 100%; max-width: 1200px; margin: 0 auto 50px;box-shadow: 0px 0px 3px #7cc15b; padding: 15px;border-radius: 5px;} #egg_change .sub_baby form .your_egg p{font-size: 15px;text-align: left;font-weight: bold;} #egg_change .sub_baby form .your_egg span{font-size: 15px;display: block;width: 100%;text-align: right;font-weight: bold;} #egg_change .sub_baby form .your_egg span b{font-size: 20px;} #egg_change .sub_baby form .your_egg span input{border: none; text-align: right; display: block; width: 100%; font-weight: bold; font-size: 15px;pointer-events: none;} #egg_change .sub_baby form .your_egg span input::placeholder{color: #000 !important;} #egg_change .sub_baby form .input_wrap{width: 100%; max-width: 1200px; margin: 0 auto;position: relative; top: 0;left: 0; padding-top: 25px; border-radius: 5px; overflow: hidden;margin-bottom: 20px;} #egg_change .sub_baby form .input_wrap input{font-size: 15px;width: 100%;border:none; color:#000 !important; padding: 0 10px;height: 50px;line-height: 50px;position: relative;z-index: 5;border-radius: 5px;background: #f8f8f8;} #egg_change .sub_baby form .input_wrap input::-webkit-inner-spin-button { appearance: none; -moz-appearance: none; -webkit-appearance: none; } #egg_change .sub_baby form .input_wrap input::placeholder { color: #aaaaaa;} #egg_change .sub_baby form .input_wrap input:focus { outline: none; box-shadow: unset;} #egg_change .sub_baby form .input_wrap label{color: #000; position: absolute; left: 10px; font-size: 15px; bottom: 11px; margin-bottom: 0; transition: all .2s; z-index: 6;pointer-events: none;} #egg_change .sub_baby form .input_wrap span{background: #c3c9be; display: block; position: absolute; bottom: 0; left: 0%; width: 0; height: 2px; border-radius: 2px; transition: 0.5s; z-index: 6;} #egg_change .sub_baby form .input_wrap input:focus, #egg_change .sub_baby form .input_wrap input:valid {background: #f8f8f8;} #egg_change .sub_baby form .input_wrap input:focus ~ label, #egg_change .sub_baby form .input_wrap input:valid ~ label {color: #818181; bottom: 50px; left: 0;font-weight: bold;} #egg_change .sub_baby form .input_wrap input:focus ~ span, #egg_change .sub_baby form .input_wrap input:valid ~ span {width: 100%; } #egg_change .sub_baby form .input_wrap.readonly label {color: #818181; bottom: 50px; left: 0;font-weight: bold;} #egg_change .sub_baby form .input_wrap.readonly span {width: 100%; } #egg_change .sub_baby form .input_wrap.readonly input {background: #f8f8f8 !important;} #egg_change .sub_baby form .input_wrap.unable label {color: #818181; bottom: 50px; left: 0;font-weight: bold;} #egg_change .sub_baby form .input_wrap.unable span {width: 100%; } #egg_change .sub_baby form .input_wrap.unable input {background: #f8f8f8 !important;} #egg_change .sub_baby form .input_wrap.three input{width: calc(100% - 110px);} #egg_change .sub_baby form .input_wrap.three label{width: calc(100% - 130px);white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} #egg_change .sub_baby form .input_wrap.three input:focus ~ span, #egg_change .sub_baby form .input_wrap.three input:valid ~ span {width: calc(100% - 110px); } #egg_change .sub_baby form .input_wrap.three input:focus ~ label, #egg_change .sub_baby form .input_wrap.three input:valid ~ label {width: 100%;} #egg_change .sub_baby form .input_wrap.three.readonly span {width: calc(100% - 110px); } #egg_change .sub_baby form .input_wrap.three.unable span {width: calc(100% - 110px); } #egg_change .sub_baby form .input_wrap button{padding: 0;width: 100px;height: 50px;line-height: 50px;font-size: 13px; position: absolute; bottom: 0; right: 0;} #egg_change .sub_baby form>button{width: 100%; max-width: 1200px; margin: 50px auto 0;display: block;height: 50px;line-height: 50px;padding: 0;font-size: 15px;border: none;} /* tmtk_change */ #tmtk_change{padding-bottom: 80px;} #tmtk_change input::placeholder{color: #777 !important;} #tmtk_change form{} #tmtk_change .sub_title { font-size: 15px; padding: 15px !important; font-style: normal; color: #fff; background-color: #48b813; text-align: center; font-weight: normal; margin: 0px; } #tmtk_change .sub_title i{margin: 0 10px;} #tmtk_change .user .your_egg{width: 100%; border-bottom: 1px solid #eee;} #tmtk_change .user .your_egg .wrap{width: calc(100% - 40px);padding: 15px 0 5px; max-width: 900px;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;flex-flow: row wrap;} #tmtk_change .user .your_egg .wrap p{font-size: 15px;margin: 0px 0px 10px;} #tmtk_change .user .your_egg .wrap span{width: calc(100% - 130px); text-align: right; font-size: 15px; font-weight: bold; display: flex; justify-content: flex-end; align-items: center;margin: 0px 0px 10px;} #tmtk_change .user .your_egg .wrap span input{pointer-events: none;text-align: right;display: block;width: 100%;border: none;margin-right: 3px;} #tmtk_change .user .your_egg .wrap span input::placeholder{color: rgb(70, 70, 70) !important;} #tmtk_change .user .per_wrap{display: flex;justify-content: space-between;width: calc(100% - 40px);padding: 0; max-width: 900px;margin: 30px auto;} #tmtk_change .user .per_wrap li{width: 19%;display: block;text-align: center;background-color: #fff;line-height: 50px; border-radius: 30px;color:#48b813; transition: 0.2s;cursor: pointer;border: 1px solid #48b813;font-size: 15px;} #tmtk_change .user .per_wrap li:active{background-color: #48b813;color: #fff;} #tmtk_change .user .input_wrap{width: calc(100% - 40px);max-width: 900px;margin: 0 auto;} #tmtk_change .user .input_wrap li{margin-bottom: 30px;display: flex;justify-content: space-between;align-items: center;flex-flow: row wrap;} #tmtk_change .user .input_wrap li p{font-size: 15px;width: 100%;} #tmtk_change .user .input_wrap li input{display: block;width: 100%;height: 50px;line-height: 50px;border: none;background:#f6f6f6; border-radius: 5px;padding: 0px 10px;font-size: 15px;text-align: center;color: #48b813;} #tmtk_change .user .input_wrap li input#send_gegg{width: 100%;} #tmtk_change .user .input_wrap li input#to_mb_id{width:calc(100% - 110px);} #tmtk_change .user .input_wrap li input:focus{outline: none;} #tmtk_change .notice_content{padding: 20px; font-size: 13px;width: 100%; max-width: 860px; margin: 0 auto;} #tmtk_change .notice_content span{color: #ff5600;} #tmtk_change .notice_content p{} #tmtk_change .finish{ display: block; background: #48b813; color: #fff !important;border: none; border-radius: 50px; width: calc(100% - 40px); max-width: 600px; margin: 0 auto; line-height: 50px;font-size: 15px;} #tmtk_change .confirm_id{display: block; border: 1px solid #48b813; color: #48b813 !important; border-radius: 5px; width: calc(100% - 40px); max-width: 100px; margin: 0; line-height: 50px; font-size: 15px; background: #fff;} /* pet_check.php */ #pet_check{padding-bottom: 0;} #pet_check .page_title_mini{overflow: hidden; background:#fff;} #pet_check .page_title_mini::after{content:"";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-image: URL('../../../../img/event_pop_bgg2.png'); background-repeat: no-repeat; background-position: center; background-size:cover; z-index: -1;opacity: 0.5;} #pet_check .page_title_mini b{font-size: 20px; text-align: center; display: block;} #pet_check .page_title_mini img{display: block; width: 70%; max-width: 200px;margin: 20px auto 30px;} #pet_check .page_title_mini span{font-size: 15px; display: block; text-align: center; width: 80%; max-width: 300px; word-break: keep-all; font-weight: bold; line-height: normal; margin: 0 auto 30px; color: #000 !important;} #pet_check .sub_baby{box-shadow: 0px -3px 3px -2px rgba(50, 60, 70, 0.15); -webkit-box-shadow: 0px -3px 3px -2px rgba(50, 60, 70, 0.15); -moz-box-shadow: 0px -3px 3px -2px rgba(50, 60, 70, 0.15); height: calc(100vh - 405px); overflow-y: auto; overflow: hidden;} #pet_check .sub_baby>b{font-size: 18px;width: 100%; max-width: 1200px; margin: 0 auto 10px;display: flex;align-items: center;} #pet_check .sub_baby>b img{height: 30px;margin-right: 10px;} #pet_check .sub_baby>ul{height: calc(100% - 60px); overflow-y: auto;width: 100%;max-width: 1200px;margin: 0 auto;} #pet_check .sub_baby>ul li{justify-content: space-between; align-items: center; padding: 15px; height: 100px; transition: 0.1s; border-radius: 5px; cursor: pointer;} #pet_check .sub_baby>ul li:active, #pet_check .sub_baby>ul li:hover{background: #eae7e7;} #pet_check .sub_baby>ul li .icon{width: 50px; height: 50px; padding: 10px; border-radius: 50px;position: relative;top: 0;left: 0;border: 2px solid;} #pet_check .sub_baby>ul li .icon img{} #pet_check .sub_baby>ul li .icon i{position: absolute; right: -3px; bottom: -2px; font-size: 20px !important; z-index: 3333; background: #fff; border-radius: 50px;} #pet_check .sub_baby>ul li .text{width: calc(100% - 70px);} #pet_check .sub_baby>ul li .text b{font-size: 15px;} #pet_check .sub_baby>ul li .text p{font-size: 13px;color: #747474; line-height: 13px;} /* pet_check.php */ /* 룰렛 */ #roulette{} #roulette .page_title_mini{overflow: hidden; background:#fff;} #roulette .page_title_mini::after{content:"";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-image: URL('../../../../img/event_pop_bgg2.png'); background-repeat: no-repeat; background-position: center; background-size:cover; z-index: -1;opacity: 0.5;} #roulette .page_title_mini{} #roulette .page_title_mini b{font-size: 25px; text-align: center; display: block;line-height: 20px;margin-bottom: 0;} #roulette .page_title_mini>div{width: fit-content; margin: 20px auto 0; align-items: center;} #roulette .page_title_mini>div img{height: 30px;width: 46px;} #roulette .page_title_mini>div span{font-size: 20px;font-weight: bold;margin: 0px 10px;} #roulette .page_title_mini>span{color: #747474; font-size: 13px; display: block; margin: 0 auto 20px; text-align: center; padding: 0 20px; word-break: keep-all; line-height: 16px;} #roulette>.resultLayer{position: fixed; width: 100%; height: 100vh; display: none; top: 0; left: 0; background: rgba(0, 0, 0, 0.5);z-index: 9999;} #roulette>.resultLayer .wrap{position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); background: #fff; width: calc(100% - 40px); max-width: 600px; padding: 80px 20px 30px; text-align: center; border-radius: 10px;} #roulette>.resultLayer .wrap .icon{position: absolute; top: -50px; left: 50%; transform: translateX(-50%); width: 100px; height: 100px; background: #fff; border-radius: 100px; border: 2px solid; padding: 5px;} #roulette>.resultLayer .wrap .icon img{display: block; height: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} #roulette>.resultLayer .wrap>span{display: block; font-size: 15px;text-align: center; line-height: 15px;font-weight: bold;} #roulette>.resultLayer .wrap>b{font-size: 20px;} #roulette>.resultLayer .wrap .img_wrap{justify-content: center; align-items: center; margin: 20px 0 5px;} #roulette>.resultLayer .wrap .img_wrap #resultImg{height: 40px; width: 40px;margin-right: 10px;} #roulette>.resultLayer .wrap .img_wrap #result_price{font-size: 30px;font-weight: bold;line-height: 25px;} #roulette>.resultLayer .wrap #result_text{font-size: 13px; color: #777; margin-bottom: 30px;} #roulette>.resultLayer .wrap #closeLayer{width: 100%; height: 50px; line-height: 48px; padding: 0; font-size: 15px; border-radius: 50px;} #roulette>.resultLayer#pop particule{ position: absolute; top: 0; left: 0; border-radius: 50%; width: 30px; height: 30px; box-shadow: 1px 1px 4px #eb6383; z-index: -1; opacity: 0.5; } #roulette .sub_baby{box-shadow: 0px -3px 3px -2px rgba(50, 60, 70, 0.15); -webkit-box-shadow: 0px -3px 3px -2px rgba(50, 60, 70, 0.15); -moz-box-shadow: 0px -3px 3px -2px rgba(50, 60, 70, 0.15);padding-top: 0;} #roulette .sub_baby .baby_wrap{width: 100%;max-width: 1200px;margin: 0 auto; justify-content: space-between;flex-flow: row wrap;} #roulette .sub_baby .baby_wrap .roulette_wrap{width:calc(50% - 10px);padding-top: 20px;overflow: hidden;} #roulette .sub_baby .baby_wrap .roulette_wrap .roulette_title{position: relative;top: 0;left: 0;} #roulette .sub_baby .baby_wrap .roulette_wrap .roulette_title b{font-size: 18px; display: block; text-align: center;} #roulette .sub_baby .baby_wrap .roulette_wrap .roulette_title span{display: block; font-size: 13px; text-align: center; color: #777; font-weight: bold; margin-bottom: 50px;} #roulette .sub_baby .baby_wrap .roulette_wrap .roulette_title p{position: absolute;right: 0;top: 0; font-size: 15px; height: 40px; line-height: 40px; padding: 0 10px; border-radius: 50px;} #roulette .sub_baby .baby_wrap .roulette_wrap>.roulette-wrapper{position: relative; left: 50%; top: 0; transform: translateX(-50%); width: 100%; max-width: 400px;} #roulette .sub_baby .baby_wrap .roulette_wrap>.roulette-wrapper::after{ content: ""; position: absolute; top: -30%; left: 50%; transform: translateX(-50%); background-image: URL('../../../../main_frame/roulette/roulette_color_bg.png'); background-repeat: no-repeat; background-position: center; background-size: 100% auto; z-index: -1;width: 0;opacity: 0; height: 100%;} #roulette .sub_baby .baby_wrap .roulette_wrap>.roulette-wrapper.atv::after{animation: roulette_bg 0.5s 0s forwards;} @keyframes roulette_bg { from { width: 0; opacity: 0; } to { width: 120%; opacity: 1; } } #roulette .sub_baby .baby_wrap .roulette_wrap>.roulette-wrapper #roulette-bg{width: 100%;} #roulette .sub_baby .baby_wrap .roulette_wrap>.roulette-wrapper #roulette-gift{width: calc(100% - 30px); position: absolute; top: 17px;left: 15px;} #roulette .sub_baby .baby_wrap .roulette_wrap>.roulette-wrapper #roulette-niddle{position: absolute; top: -15px; left: 50%; transform: translateX(-50%); width: 14%;} #roulette .sub_baby .baby_wrap .roulette_wrap>.roulette-wrapper #start-rotate{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30%; padding: 0; margin: 0; border: none;background:unset; } #roulette .sub_baby .baby_wrap .roulette_wrap>.roulette-wrapper #start-rotate:active img{ scale: 0.9; } #roulette .sub_baby .baby_wrap .roulette_wrap>.roulette-wrapper #start-rotate img{width: 100%;} #roulette .sub_baby .baby_wrap .roulette_wrap .ticket{ margin: 20px auto 0px;justify-content: space-between; align-items: center;} #roulette .sub_baby .baby_wrap .roulette_wrap .ticket .wrap{background: #fff; border: 1px solid; padding: 15px; border-radius: 5px; justify-content: space-between; align-items: center; width: calc(100% - 70px);} #roulette .sub_baby .baby_wrap .roulette_wrap .ticket.car .wrap{border-color:#e52929;} #roulette .sub_baby .baby_wrap .roulette_wrap .ticket .wrap img{height: 50px;width: 50px;} #roulette .sub_baby .baby_wrap .roulette_wrap .ticket .wrap .text{text-align: right; height: 43px;} #roulette .sub_baby .baby_wrap .roulette_wrap .ticket .wrap .text b{font-size: 15px;} #roulette .sub_baby .baby_wrap .roulette_wrap .ticket .wrap .text p{font-size: 13px;line-height: 10px;} #roulette .sub_baby .baby_wrap .roulette_wrap .ticket>b{width: 60px; height: 82px; text-align: center; display: block; line-height: 82px; border-radius: 3px; color: #fff; font-weight: normal; cursor: pointer;padding: 0;font-size: 13px;} #roulette .sub_baby .baby_wrap .roulette_wrap .ticket.car>b{border:1px solid #e52929;background: #e52929;transition: 0.3s;} #roulette .sub_baby .baby_wrap .roulette_wrap .ticket.car>b:focus, #roulette .sub_baby .baby_wrap .roulette_wrap .ticket.car>b:hover{border:1px solid #c52323;background: #c52323;} #roulette .sub_baby .baby_wrap .border-line{width: 1px;border-left: 1px dashed #ddd;margin: 20px 0 0;} #roulette .sub_baby .baby_wrap .roulette_list{width: calc(50% - 10px); height: calc(100vh - 180px); overflow: hidden;padding-top: 20px;min-height: 730px;} #roulette .sub_baby .baby_wrap .roulette_list#ticket_list{display: none;} #roulette .sub_baby .baby_wrap .roulette_list .list_title{margin: 0 auto 20px;padding: 0;justify-content: space-between;align-items: center;} #roulette .sub_baby .baby_wrap .roulette_list .list_title b{font-size: 18px; display: flex; align-items: center;} #roulette .sub_baby .baby_wrap .roulette_list .list_title b img{ height: 30px; margin-right: 10px;} #roulette .sub_baby .baby_wrap .roulette_list .list_title p{font-size: 15px; height: 40px; line-height: 40px; padding: 0 10px; border-radius: 50px;} #roulette .sub_baby .baby_wrap .roulette_list ul{height: calc(100% - 110px); overflow-y: auto; padding: 3px 20px;margin-bottom: 20px} #roulette .sub_baby .baby_wrap .roulette_list ul::-webkit-scrollbar { width: 2px; } #roulette .sub_baby .baby_wrap .roulette_list ul::-webkit-scrollbar-thumb { background-color: #e8f1e1; } #roulette .sub_baby .baby_wrap .roulette_list ul::-webkit-scrollbar-track { background-color: #fff; } #roulette .sub_baby .baby_wrap .roulette_list ul li{background: #fff; box-shadow: 0px 0px 5px #e4e4e4; padding: 15px; border-radius: 5px; margin-bottom: 10px; justify-content: space-between; align-items: center; position: relative; top: 0; left: 0;} #roulette .sub_baby .baby_wrap .roulette_list ul li#hide_motion{box-shadow: unset; text-align: center; justify-content: center;} #roulette .sub_baby .baby_wrap .roulette_list ul li> p{font-size: 15px;} #roulette .sub_baby .baby_wrap .roulette_list ul li> p span{font-weight: bold; font-size: 15px;font-weight: bold;} #roulette .sub_baby .baby_wrap .roulette_list ul li> span{font-size: 13px; color: #747474;text-align: right;} #roulette .sub_baby .baby_wrap .roulette_list .pager_wrap{display: flex; justify-content: center; align-items: center; margin: 0;} #roulette .sub_baby .baby_wrap .roulette_list .pager_wrap a{width: 30px; height: 30px; text-align: center; line-height: 30px; background: #f0f0f0; border-radius: 5px; margin: 0 3px; color: #000 !important;display:block;} #roulette .sub_baby .baby_wrap .roulette_list .pager_wrap a.atv{color: #fff !important;} #roulette .sub_baby .baby_wrap .roulette_list .pager_wrap a i{} #roulette .roulette_notice{position: fixed; top: 0; left: 0; width: 100%; height: 100vh; backdrop-filter: blur(0px); background: rgba(0, 0, 0, 0.5); z-index: 999999;display: none;} #roulette .roulette_notice .wrap{position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); width: fit-content; z-index: -1; text-align: center; padding: 0;height: fit-content;width: calc(100% - 40px);max-width: 600px; background: #fff;padding: 0;border-radius: 10px;overflow: hidden;} #roulette .roulette_notice .wrap>b{display: block; font-size: 18px; margin-bottom: 0; padding: 30px 0 20px; background: #e8f1e1; color: #48b813;} #roulette .roulette_notice .wrap>ul{padding: 20px 20px 0;} #roulette .roulette_notice .wrap>ul li{margin-bottom: 15px;} #roulette .roulette_notice .wrap>ul li>div{ text-align: left; justify-content: flex-start; align-items: flex-start;font-size: 13px;} #roulette .roulette_notice .wrap>ul li>div>b{width: 23px;word-break:keep-all;line-height: 18px;text-align: right;} #roulette .roulette_notice .wrap>ul li>div>p{width: calc(100% - 23px);word-break:keep-all;line-height: 18px;padding-left: 5px;} #roulette .roulette_notice .wrap>ul li .q{font-weight: bold;margin-bottom: 5px;} #roulette .roulette_notice .wrap>ul li .q>b{color: #48b813;font-size: 15px;} #roulette .roulette_notice .wrap>ul li .a>b{color: #ffc931;font-size: 15px;} #roulette .roulette_notice .wrap>ul li.add{margin-bottom: 10px;} #roulette .roulette_notice .wrap>ul li.add b{width: 100%; display: block; height: 40px; line-height: 38px; text-align: center; border: 1px solid; border-radius: 20px; margin-top: 10px; cursor: pointer;} #roulette .roulette_notice .wrap>ul li.add b:active{background: #f5f5f5;} #roulette .roulette_notice .wrap>ul li.add p{font-size: 12px; line-height: 16px; color: #747474; margin-top: 30px;word-break:keep-all;text-align: center;} #roulette .roulette_notice .wrap>p{font-size: 15px; text-align: center; height: 50px; line-height: 50px; border-radius: 50px; cursor: pointer;width: calc(100% - 40px);margin: 0 auto 20px;display: block;} @media (max-width:1000px){ #roulette .sub_baby .baby_wrap .border-line{width: 100%;height: 1px;border-left: none;border-top:1px dashed #ddd;margin:40px 0 0;} #roulette .sub_baby .baby_wrap .roulette_wrap {width: 100%;} #roulette .sub_baby .baby_wrap .roulette_list{width: 100%;height: fit-content; overflow: auto; min-height:unset;} #roulette .sub_baby .baby_wrap .roulette_list ul{height: fit-content;padding:3px;} #roulette .sub_baby .baby_wrap .roulette_list ul li> p{font-size: 13px;font-weight: bold;} } @media (max-width:499px){ #roulette .sub_baby .baby_wrap .roulette_wrap{overflow: inherit;} #roulette .sub_baby .baby_wrap .roulette_wrap>span{margin-bottom: 30px;} #roulette .sub_baby .baby_wrap .roulette_wrap>.roulette-wrapper{max-width: 350px;} #roulette .sub_baby .baby_wrap .roulette_wrap .ticket{float: right;width: 49%;justify-content: center; flex-flow: row wrap;} #roulette .sub_baby .baby_wrap .roulette_wrap .ticket.car{float: left;} #roulette .sub_baby .baby_wrap .roulette_wrap .ticket .wrap{width: 100%; flex-flow: row wrap; justify-content: center;} #roulette .sub_baby .baby_wrap .roulette_wrap .ticket .wrap img{width: 30px;height: 30px;margin-bottom: 10px;} #roulette .sub_baby .baby_wrap .roulette_wrap .ticket .wrap .text{height: fit-content;width: 100%;text-align: center;} #roulette .sub_baby .baby_wrap .roulette_wrap .ticket .wrap .text b{font-size: 13px;} #roulette .sub_baby .baby_wrap .roulette_wrap .ticket>b{margin-top: 10px; width: 100%;height: 50px;line-height: 50px;} } /* 룰렛 */ /* 자동차 응모 */ #car_event{} #car_event .page_title_mini{overflow: hidden; background:#fff;} #car_event .page_title_mini::after{content:"";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-image: URL('../../../../img/event_pop_bgg2.png'); background-repeat: no-repeat; background-position: center; background-size:cover; z-index: -1;opacity: 0.5;} #car_event .page_title_mini{} #car_event .page_title_mini b{font-size: 25px; text-align: center; display: block;line-height: 20px;margin-bottom: 0;} #car_event .page_title_mini>div{width: fit-content; margin: 20px auto 0; align-items: center;} #car_event .page_title_mini>div img{height: 30px;width: 46px;} #car_event .page_title_mini>div span{font-size: 20px;font-weight: bold;margin: 0px 10px;} #car_event .page_title_mini>span{color: #747474; font-size: 13px; display: block; margin: 0 auto 20px; text-align: center; padding: 0 20px; word-break: keep-all; line-height: 16px;} #car_event .sub_baby{box-shadow: 0px -3px 3px -2px rgba(50, 60, 70, 0.15); -webkit-box-shadow: 0px -3px 3px -2px rgba(50, 60, 70, 0.15); -moz-box-shadow: 0px -3px 3px -2px rgba(50, 60, 70, 0.15);padding-top: 0;} #car_event .sub_baby .baby_wrap{width: 100%;max-width: 1200px;margin: 0 auto; justify-content: space-between;flex-flow: row wrap;} #car_event .sub_baby .baby_wrap .event_wrap{width:calc(50% - 10px);padding-top: 20px;overflow: hidden;} #car_event .sub_baby .baby_wrap .event_wrap .event_title{position: relative;top: 0;left: 0;} #car_event .sub_baby .baby_wrap .event_wrap .event_title b{font-size: 18px; display: block; text-align: center;} #car_event .sub_baby .baby_wrap .event_wrap .event_title span{display: block; font-size: 13px; text-align: center; color: #777; font-weight: bold; margin-bottom: 50px;} #car_event .sub_baby .baby_wrap .event_wrap .event_title p{position: absolute;right: 0;top: 0; font-size: 15px; height: 40px; line-height: 40px; padding: 0 10px; border-radius: 50px;} #car_event .sub_baby .baby_wrap .event_wrap>.event-wrapper{position: relative; left: 50%; top:0; transform: translateX(-50%); width: 100%; max-width: 400px; height: fit-content; aspect-ratio: auto 1 / 1;} #car_event .sub_baby .baby_wrap .event_wrap>.event-wrapper::after{ content: ""; position: absolute; top: -30%; left: 50%; transform: translateX(-50%); background-image: URL('../../../../main_frame/roulette/roulette_color_bg.png'); background-repeat: no-repeat; background-position: center; background-size: 100% auto; z-index: -1;width: 0;opacity: 0; height: 100%;} #car_event .sub_baby .baby_wrap .event_wrap>.event-wrapper.atv::after{animation: event_bg 0.5s 0s forwards;} @keyframes event_bg { from { width: 0; opacity: 0; } to { width: 120%; opacity: 1; } } #car_event .sub_baby .baby_wrap .event_wrap>.event-wrapper .img_wrap{position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%;height: 100%;} #car_event .sub_baby .baby_wrap .event_wrap>.event-wrapper .img_wrap .box1{background-image: URL('../../../../main_frame/roulette/car_box1.png'); top: -10%; width: 27%; height: 53%;} #car_event .sub_baby .baby_wrap .event_wrap>.event-wrapper .img_wrap .box2{background-image: URL('../../../../main_frame/roulette/car_box2.png'); top: 86px; width: 100%; aspect-ratio: auto 1 / 0.8;} #car_event .sub_baby .baby_wrap .event_wrap>.event-wrapper .img_wrap .box3{background-image: URL('../../../../main_frame/roulette/car_box3.png'); bottom: -6px; width: 56%; height: 65%; left: 38%;} #car_event .sub_baby .baby_wrap .event_wrap>.event-wrapper:active .img_wrap .box3{background-image: URL('../../../../main_frame/roulette/car_box3_atv.png');} #car_event .sub_baby .baby_wrap .event_wrap>.event-wrapper.atv .img_wrap .box1{animation: event_ticket 0.5s 0s forwards;} @keyframes event_ticket { from { top: -10%; } to { top: 10%; } } #car_event .sub_baby .baby_wrap .event_wrap>.event-wrapper .img_wrap>div{ background-repeat: no-repeat; background-position: center; background-size: 100% auto; position: absolute; left: 50%; transform: translateX(-50%); } #car_event .sub_baby .baby_wrap .event_wrap .ticket{ margin: 20px auto 0px;justify-content: space-between; align-items: center;} #car_event .sub_baby .baby_wrap .event_wrap .ticket .wrap{background: #fff; border: 1px solid; padding: 15px; border-radius: 5px; justify-content: space-between; align-items: center; width: calc(100% - 70px); flex-flow: row wrap;} #car_event .sub_baby .baby_wrap .event_wrap .ticket.car .wrap{border-color:#e52929;} #car_event .sub_baby .baby_wrap .event_wrap .ticket .wrap img{height: 50px;width: 50px;} #car_event .sub_baby .baby_wrap .event_wrap .ticket .wrap .text{text-align: right; height: 43px;} #car_event .sub_baby .baby_wrap .event_wrap .ticket .wrap .text b{font-size: 15px;} #car_event .sub_baby .baby_wrap .event_wrap .ticket .wrap .text p{font-size: 13px;line-height: 10px;} #car_event .sub_baby .baby_wrap .event_wrap .ticket>b{width: 60px; height: 82px; text-align: center; display: block; line-height: 82px; border-radius: 3px; color: #fff; font-weight: normal; cursor: pointer;padding: 0;font-size: 13px;} #car_event .sub_baby .baby_wrap .event_wrap .ticket.car>b{border:1px solid #e52929;background: #e52929;transition: 0.3s;} #car_event .sub_baby .baby_wrap .event_wrap .ticket.car>b:focus, #car_event .sub_baby .baby_wrap .event_wrap .ticket.car>b:hover{border:1px solid #c52323;background: #c52323;} #car_event .sub_baby .baby_wrap .border-line{width: 1px;border-left: 1px dashed #ddd;margin: 20px 0 0;} #car_event .sub_baby .baby_wrap .car_event_list{width: calc(50% - 10px); height: calc(100vh - 180px); overflow: hidden;padding-top: 20px;min-height: 730px;} #car_event .sub_baby .baby_wrap .car_event_list#ticket_list{display: none;} #car_event .sub_baby .baby_wrap .car_event_list .list_title{margin: 0 auto 20px;padding: 0;justify-content: space-between;align-items: center;} #car_event .sub_baby .baby_wrap .car_event_list .list_title b{font-size: 18px; display: flex; align-items: center;} #car_event .sub_baby .baby_wrap .car_event_list .list_title b img{ height: 30px; margin-right: 10px;} #car_event .sub_baby .baby_wrap .car_event_list .list_title p{font-size: 15px; height: 40px; line-height: 40px; padding: 0 10px; border-radius: 50px;} #car_event .sub_baby .baby_wrap .car_event_list ul{height: calc(100% - 110px); overflow-y: auto; padding: 3px 20px;margin-bottom: 20px} #car_event .sub_baby .baby_wrap .car_event_list ul::-webkit-scrollbar { width: 2px; } #car_event .sub_baby .baby_wrap .car_event_list ul::-webkit-scrollbar-thumb { background-color: #e8f1e1; } #car_event .sub_baby .baby_wrap .car_event_list ul::-webkit-scrollbar-track { background-color: #fff; } #car_event .sub_baby .baby_wrap .car_event_list ul li{background: #fff; box-shadow: 0px 0px 5px #e4e4e4; padding: 15px; border-radius: 5px; margin-bottom: 10px; justify-content: space-between; align-items: center; position: relative; top: 0; left: 0;} #car_event .sub_baby .baby_wrap .car_event_list ul li#hide_motion{box-shadow: unset; text-align: center; justify-content: center;} #car_event .sub_baby .baby_wrap .car_event_list ul li> p{font-size: 15px;} #car_event .sub_baby .baby_wrap .car_event_list ul li> p span{font-weight: bold; font-size: 15px;font-weight: bold;} #car_event .sub_baby .baby_wrap .car_event_list ul li> span{font-size: 13px; color: #747474;text-align: right;} #car_event .sub_baby .baby_wrap .car_event_list .pager_wrap{display: flex; justify-content: center; align-items: center; margin: 0;} #car_event .sub_baby .baby_wrap .car_event_list .pager_wrap a{width: 30px; height: 30px; text-align: center; line-height: 30px; background: #f0f0f0; border-radius: 5px; margin: 0 3px; color: #000 !important;display:block;} #car_event .sub_baby .baby_wrap .car_event_list .pager_wrap a.atv{color: #fff !important;} #car_event .sub_baby .baby_wrap .car_event_list .pager_wrap a i{} #car_event .car_notice{position: fixed; top: 0; left: 0; width: 100%; height: 100vh; backdrop-filter: blur(0px); background: rgba(0, 0, 0, 0.5); z-index: 999999;display: none;} #car_event .car_notice .wrap{position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); width: fit-content; z-index: -1; text-align: center; padding: 0;height: fit-content;width: calc(100% - 40px);max-width: 600px; background: #fff;padding: 0;border-radius: 10px;overflow: hidden;} #car_event .car_notice .wrap>b{display: block; font-size: 18px; margin-bottom: 0; padding: 30px 0 20px; background: #e8f1e1; color: #48b813;} #car_event .car_notice .wrap>ul{padding: 20px 20px 0;} #car_event .car_notice .wrap>ul li{margin-bottom: 15px;} #car_event .car_notice .wrap>ul li>div{ text-align: left; justify-content: flex-start; align-items: flex-start;font-size: 13px;} #car_event .car_notice .wrap>ul li>div>b{width: 23px;word-break:keep-all;line-height: 18px;text-align: right;} #car_event .car_notice .wrap>ul li>div>p{width: calc(100% - 23px);word-break:keep-all;line-height: 18px;padding-left: 5px;} #car_event .car_notice .wrap>ul li .q{font-weight: bold;margin-bottom: 5px;} #car_event .car_notice .wrap>ul li .q>b{color: #48b813;font-size: 15px;} #car_event .car_notice .wrap>ul li .a>b{color: #ffc931;font-size: 15px;} #car_event .car_notice .wrap>ul li.add{margin-bottom: 10px;} #car_event .car_notice .wrap>ul li.add b{width: 100%; display: block; height: 40px; line-height: 38px; text-align: center; border: 1px solid; border-radius: 20px; margin-top: 10px; cursor: pointer;} #car_event .car_notice .wrap>ul li.add b:active{background: #f5f5f5;} #car_event .car_notice .wrap>ul li.add p{font-size: 12px; line-height: 16px; color: #747474; margin-top: 30px;word-break:keep-all;text-align: center;} #car_event .car_notice .wrap>p{font-size: 15px; text-align: center; height: 50px; line-height: 50px; border-radius: 50px; cursor: pointer;width: calc(100% - 40px);margin: 0 auto 20px;display: block;} @media (max-width:1000px){ #car_event .sub_baby .baby_wrap .border-line{width: 100%;height: 1px;border-left: none;border-top:1px dashed #ddd;margin:40px 0 0;} #car_event .sub_baby .baby_wrap .event_wrap {width: 100%;} #car_event .sub_baby .baby_wrap .car_event_list{width: 100%;height: fit-content; overflow: auto; min-height:unset;} #car_event .sub_baby .baby_wrap .car_event_list .list_title{padding: 0;} #car_event .sub_baby .baby_wrap .car_event_list ul{height: fit-content;padding:3px;} #car_event .sub_baby .baby_wrap .car_event_list ul li> p{font-size: 13px;font-weight: bold;} } @media (max-width:499px){ #car_event .sub_baby .baby_wrap .event_wrap{overflow: inherit;} #car_event .sub_baby .baby_wrap .event_wrap>span{margin-bottom: 30px;} #car_event .sub_baby .baby_wrap .event_wrap>.event-wrapper{max-width: 350px;aspect-ratio: auto 1 / 0.8;} #car_event .sub_baby .baby_wrap .event_wrap>.event-wrapper .img_wrap .box1{width: 22%;top: -13%;} #car_event .sub_baby .baby_wrap .event_wrap>.event-wrapper .img_wrap .box2{width: 80%;top: unset;bottom: 0;} #car_event .sub_baby .baby_wrap .event_wrap>.event-wrapper .img_wrap .box3{bottom: 0px; width: 45%;left: 41%;} @keyframes event_ticket { from { top: -13%; } to { top: 13%; } } #car_event .sub_baby .baby_wrap .event_wrap .ticket{float: left;width: 49%;justify-content: center; flex-flow: row wrap;} #car_event .sub_baby .baby_wrap .event_wrap .ticket.car{float: right;} #car_event .sub_baby .baby_wrap .event_wrap .ticket .wrap{justify-content: center;width: 100%;} #car_event .sub_baby .baby_wrap .event_wrap .ticket .wrap img{width: 30px;height: 30px;margin-bottom: 10px;} #car_event .sub_baby .baby_wrap .event_wrap .ticket .wrap .text{height: fit-content;width: 100%;text-align: center;} #car_event .sub_baby .baby_wrap .event_wrap .ticket .wrap .text b{font-size: 13px;} #car_event .sub_baby .baby_wrap .event_wrap .ticket>b{margin-top: 10px; width: 100%;height: 50px;line-height: 50px;} } /* 자동차 응모 */ /* 환경지킴이 */ #pet_register{} #pet_register .page_title_mini{overflow: hidden; background:#fff;} #pet_register .page_title_mini::after{content:"";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-image: URL('../../../../img/event_pop_bgg2.png'); background-repeat: no-repeat; background-position: center; background-size:cover; z-index: -1;opacity: 0.5;} #pet_register .page_title_mini{} #pet_register .page_title_mini b{font-size: 25px; text-align: center; display: block;line-height: 20px;margin-bottom: 0;} #pet_register .page_title_mini>div{width: fit-content; margin: 20px auto 0; align-items: center;} #pet_register .page_title_mini>div img{height: 30px;width: 46px;} #pet_register .page_title_mini>div span{font-size: 20px;font-weight: bold;margin: 0px 10px;} #pet_register .page_title_mini>span{color: #747474; font-size: 13px; display: block; margin: 0 auto 20px; text-align: center; padding: 0 20px; word-break: keep-all; line-height: 16px;} #pet_register .sub_baby{box-shadow: 0px -3px 3px -2px rgba(50, 60, 70, 0.15); -webkit-box-shadow: 0px -3px 3px -2px rgba(50, 60, 70, 0.15); -moz-box-shadow: 0px -3px 3px -2px rgba(50, 60, 70, 0.15);} #pet_register .sub_baby .baby_wrap{width: 100%;max-width: 1200px;margin: 0 auto; justify-content: space-between;flex-flow: row wrap;} #pet_register .sub_baby .baby_wrap .visual{margin-bottom: 50px;} #pet_register .sub_baby .baby_wrap .visual img{width: 100%;max-width: 1200px;border-radius: 10px;} #pet_register .sub_baby .baby_wrap .visual img.pc{display: block;} #pet_register .sub_baby .baby_wrap .visual img.mo{display: none;} #pet_register .sub_baby .baby_wrap form .input_wrap{width: 100%; max-width: 1200px; margin: 0 auto;position: relative; top: 0;left: 0; padding-top: 25px; border-radius: 5px; overflow: hidden;margin-bottom: 20px;} #pet_register .sub_baby .baby_wrap form .input_wrap input, #pet_register .sub_baby .baby_wrap form .input_wrap select{font-size: 15px;width: 100%;border:none; color:#000 !important; padding: 0 10px;height: 50px;line-height: 50px;position: relative;z-index: 5;border-radius: 5px;background: #f8f8f8;} #pet_register .sub_baby .baby_wrap form .input_wrap select{cursor: pointer;color: #f8f8f8 !important;} #pet_register .sub_baby .baby_wrap form .input_wrap input::-webkit-inner-spin-button, #pet_register .sub_baby .baby_wrap form .input_wrap select::-webkit-inner-spin-button { appearance: none; -moz-appearance: none; -webkit-appearance: none; } #pet_register .sub_baby .baby_wrap form .input_wrap input::placeholder, #pet_register .sub_baby .baby_wrap form .input_wrap select::placeholder { color: #aaaaaa;} #pet_register .sub_baby .baby_wrap form .input_wrap input:focus, #pet_register .sub_baby .baby_wrap form .input_wrap select:focus { outline: none; box-shadow: unset;} #pet_register .sub_baby .baby_wrap form .input_wrap label{color: #000; position: absolute; left: 10px; font-size: 15px; bottom: 11px; margin-bottom: 0; transition: all .2s; z-index: 6;pointer-events: none;} #pet_register .sub_baby .baby_wrap form .input_wrap span{background: #c3c9be; display: block; position: absolute; bottom: 0; left: 0%; width: 0; height: 2px; border-radius: 2px; transition: 0.5s; z-index: 6;} #pet_register .sub_baby .baby_wrap form .input_wrap input:focus, #pet_register .sub_baby .baby_wrap form .input_wrap select:focus, #pet_register .sub_baby .baby_wrap form .input_wrap input:valid, #pet_register .sub_baby .baby_wrap form .input_wrap select:valid {background: #f8f8f8;color:#000 !important;} #pet_register .sub_baby .baby_wrap form .input_wrap input:focus ~ label, #pet_register .sub_baby .baby_wrap form .input_wrap select:focus ~ label, #pet_register .sub_baby .baby_wrap form .input_wrap input:valid ~ label, #pet_register .sub_baby .baby_wrap form .input_wrap select:valid ~ label {color: #818181; bottom: 50px; left: 0;font-weight: bold;} #pet_register .sub_baby .baby_wrap form .input_wrap input:focus ~ span, #pet_register .sub_baby .baby_wrap form .input_wrap select:focus ~ span, #pet_register .sub_baby .baby_wrap form .input_wrap input:valid ~ span, #pet_register .sub_baby .baby_wrap form .input_wrap select:valid ~ span {width: 100%; } #pet_register .sub_baby .baby_wrap form .input_wrap.readonly label {color: #818181; bottom: 50px; left: 0;font-weight: bold;} #pet_register .sub_baby .baby_wrap form .input_wrap.readonly span {display: none;} #pet_register .sub_baby .baby_wrap form .input_wrap.readonly input {background: #f8f8f8 !important;pointer-events: none;color: #898989 !important;} #pet_register .sub_baby .baby_wrap form>button{width: 100%; max-width: 1200px; margin: 50px auto 0;display: block;height: 50px;line-height: 50px;padding: 0;font-size: 15px;border: none;} @media (max-width:800px){ #pet_register .sub_baby .baby_wrap .visual img.pc{display: none;} #pet_register .sub_baby .baby_wrap .visual img.mo{display: block;} } /* 환경지킴이 */ /* 단말기 시작 */ #machine{} #machine .sub_baby .register_list{width: 100%;max-width: 1200px;margin: 0 auto 50px;} #machine .sub_baby .register_list>p.list_title{font-size: 17px; font-weight: bold; margin-bottom: 10px;} #machine .sub_baby .register_list>.table_wrap{width: 100%;overflow-x:auto;} #machine .sub_baby .register_list>.table_wrap::-webkit-scrollbar { height: 5px; } #machine .sub_baby .register_list>.table_wrap::-webkit-scrollbar-thumb { background-color: #48b813; } #machine .sub_baby .register_list>.table_wrap::-webkit-scrollbar-track { background-color: #fff; } #machine .sub_baby .register_list>.table_wrap table{width: 100%;min-width:600px; table-layout: fixed; border-top: 2px solid; border-bottom: 2px solid;} #machine .sub_baby .register_list>.table_wrap table tr{width: 100%;border-bottom:1px solid #e8f1e1;} #machine .sub_baby .register_list>.table_wrap table tr:last-child{border-bottom:none;} #machine .sub_baby .register_list>.table_wrap table tr th{background: #e8f1e1; text-align: center; padding: 0; border: 1px solid #ffffff; height: 40px; line-height: 40px; font-size: 13px; font-weight: bold;} #machine .sub_baby .register_list>.table_wrap table tr th:nth-child(1){width: 30%;} #machine .sub_baby .register_list>.table_wrap table tr th:nth-child(2){width: 30%;} #machine .sub_baby .register_list>.table_wrap table tr th:nth-child(3){width: 20%;} #machine .sub_baby .register_list>.table_wrap table tr th:nth-child(4){width: 20%;} #machine .sub_baby .register_list>.table_wrap table tr td{text-align: center; padding: 0; height: 50px; font-size: 13px; font-weight: normal;padding: 10px;word-break:keep-all;} #machine .sub_baby .register_list>.table_wrap table tr td:nth-child(1){width: 30%;} #machine .sub_baby .register_list>.table_wrap table tr td:nth-child(2){width: 30%;border-right: 1px solid #e8f1e1;border-left: 1px solid #e8f1e1;} #machine .sub_baby .register_list>.table_wrap table tr td:nth-child(3){width: 20%;border-right: 1px solid #e8f1e1;} #machine .sub_baby .register_list>.table_wrap table tr td:nth-child(4){width: 20%;} #machine .sub_baby .register_list .pager{margin: 10px 0 0} #machine .sub_baby form{width: 100%;max-width: 1200px;margin: 0 auto;} #machine .sub_baby form .input_wrap{width: 100%; margin: 0 auto;position: relative; top: 0;left: 0; padding-top: 25px; border-radius: 5px; overflow: hidden;margin-bottom: 20px;} #machine .sub_baby form .input_wrap input, #machine .sub_baby form .input_wrap select, #machine .sub_baby form .input_wrap textarea{font-size: 15px;width: 100%;border:none; color:#000 !important; padding: 0 10px;height: 50px;line-height: 50px;position: relative;z-index: 5;border-radius: 5px;background: #f8f8f8;} #machine .sub_baby form .input_wrap textarea{height: 90px !important; line-height: 23px !important; padding: 10px !important;resize: none;} #machine .sub_baby form .input_wrap select{cursor: pointer;color: #f8f8f8 !important;} #machine .sub_baby form .input_wrap input::-webkit-inner-spin-button, #machine .sub_baby form .input_wrap select::-webkit-inner-spin-button, #machine .sub_baby form .input_wrap textarea::-webkit-inner-spin-button{ appearance: none; -moz-appearance: none; -webkit-appearance: none; } #machine .sub_baby form .input_wrap input::placeholder, #machine .sub_baby form .input_wrap select::placeholder, #machine .sub_baby form .input_wrap textarea::placeholder{ color: #aaaaaa;} #machine .sub_baby form .input_wrap input:focus, #machine .sub_baby form .input_wrap select:focus, #machine .sub_baby form .input_wrap textarea:focus{ outline: none; box-shadow: unset;} #machine .sub_baby form .input_wrap label{color: #000; position: absolute; left: 10px; font-size: 15px;top:37px; margin-bottom: 0; transition: all .2s; z-index: 6;pointer-events: none;} #machine .sub_baby form .input_wrap span{background: #c3c9be; display: block; position: absolute; bottom: 0; left: 0%; width: 0; height: 2px; border-radius: 2px; transition: 0.5s; z-index: 6;} #machine .sub_baby form .input_wrap input:focus, #machine .sub_baby form .input_wrap select:focus, #machine .sub_baby form .input_wrap textarea:focus, #machine .sub_baby form .input_wrap input:valid, #machine .sub_baby form .input_wrap select:valid, #machine .sub_baby form .input_wrap textarea:valid {background: #f8f8f8;color:#000 !important;} #machine .sub_baby form .input_wrap input:focus ~ label, #machine .sub_baby form .input_wrap select:focus ~ label, #machine .sub_baby form .input_wrap textarea:focus ~ label, #machine .sub_baby form .input_wrap input:valid ~ label, #machine .sub_baby form .input_wrap select:valid ~ label, #machine .sub_baby form .input_wrap textarea:valid ~ label {color: #818181; top: -5px; left: 0;font-weight: bold;} #machine .sub_baby form .input_wrap input:focus ~ span, #machine .sub_baby form .input_wrap select:focus ~ span, #machine .sub_baby form .input_wrap textarea:focus ~ span, #machine .sub_baby form .input_wrap input:valid ~ span, #machine .sub_baby form .input_wrap select:valid ~ span, #machine .sub_baby form .input_wrap textarea:valid ~ span {width: 100%; } #machine .sub_baby form .input_wrap.readonly label {color: #818181; top: -5px; left: 0;font-weight: bold;} #machine .sub_baby form .input_wrap.readonly span {display: none;} #machine .sub_baby form .input_wrap.readonly input {background: #f8f8f8 !important;pointer-events: none;color: #898989 !important;} #machine .sub_baby form>button{width: 100%; max-width: 1200px; margin: 50px auto 0;display: block;height: 50px;line-height: 50px;padding: 0;font-size: 15px;border: none;} /* 단말기 끝 */ @media (max-width:1199px){ #nt_body #index .over .history_wrap .history_slide .swiper-wrapper .swiper-slide{opacity: 0.3;background: #eff7e9;} #nt_body #index .over .history_wrap .history_slide .swiper-wrapper .swiper-slide-active{opacity: 1;background: #e8f1e1;} #nt_body #index .over .history_wrap .history_slide .swiper-wrapper .swiper-slide-next{opacity: 1;background: #e8f1e1;} } @media (max-width:699px){ #nt_body #index .over .history_wrap .history_slide .swiper-wrapper .swiper-slide{opacity: 0.3;background: #eff7e9;} #nt_body #index .over .history_wrap .history_slide .swiper-wrapper .swiper-slide-active{opacity: 1;background: #e8f1e1;} #nt_body #index .over .history_wrap .history_slide .swiper-wrapper .swiper-slide-next{opacity: 0.3;background: #eff7e9;} #petroom .sub_baby .detail_wrap>ul li{width: 100%} #petroom .sub_baby #pop_content .wrap #map_detail_content .map_details .table ul li{font-size: 13px; padding-bottom: 10px; border-bottom: 1px dotted #ddd;} #petroom .sub_baby #pop_content .wrap #map_detail_content .map_details .table ul li p{width: 100%;} #petroom .sub_baby #pop_content .wrap #map_detail_content .map_details .table ul li span{padding-left: 0px;width: 100%;} } @media (max-width: 499px){ #nt_body #friend_pop .modal .modal-body .modal-header{width: 50px;height: 50px;} #nt_body #friend_pop .modal .modal-body .modal-header i{font-size: 20px !important;line-height: 50px !important;} #nt_body #friend_pop .modal .modal-body .icon-container .icon_wrap{padding: 10px 10px;} #nt_body #friend_pop .modal .modal-body .icon-container .icon_wrap>div{max-width: 50px;margin: 0 auto 10px;padding: 0px;} #nt_body #friend_pop .modal .modal-body .icon-container .icon_wrap>div img{padding: 13px;} #nt_body #friend_pop .modal .modal-body .title_wrap p{font-size: 13px;} #nt_body #friend_pop .modal .modal-body .title_wrap p:first-child{font-size: 15px;} #nt_body #friend_pop .modal .modal-body .icon-container{margin: 20px auto;} #nt_body #friend_pop .modal .modal-body .icon-container .icon_wrap{width: 50%;} #nt_body #agree_pop .modal .modal-body .modal-header{width: 50px;height: 50px;} #nt_body #agree_pop .modal .modal-body .modal-header i{font-size: 20px !important;line-height: 50px !important;} #nt_body #agree_pop .modal .modal-body .icon-container .icon_wrap{padding: 10px 10px;} #nt_body #agree_pop .modal .modal-body .icon-container .icon_wrap>div{max-width: 50px;margin: 0 auto 10px;padding: 0px;} #nt_body #agree_pop .modal .modal-body .icon-container .icon_wrap>div img{padding: 13px;} #nt_body #agree_pop .modal .modal-body .title_wrap p{font-size: 13px;} #nt_body #agree_pop .modal .modal-body .title_wrap p:first-child{font-size: 15px;} #nt_body #agree_pop .modal .modal-body .icon-container{margin: 20px auto;} #nt_body #agree_pop .modal .modal-body .icon-container .icon_wrap{width: 50%;} #nt_body #main_event_pop .pop_wrap .event_Swiper .swiper-wrapper .swiper-slide.one::after{background-position:right -50px;} #nt_body #main_event_pop .pop_wrap .event_Swiper .swiper-wrapper .swiper-slide.one b{font-size: 20px;} #nt_body #main_event_pop .pop_wrap .event_Swiper .swiper-wrapper .swiper-slide.one span{font-weight: normal; margin: 10px auto 30px;font-size: 15px;} #nt_body #main_event_pop .pop_wrap .event_Swiper .swiper-wrapper .swiper-slide.one img.img_1{width: 50%;} #nt_body #main_event_pop .pop_wrap>p{font-size: 13px;margin: 0px auto 0;font-weight: bold;} #pet_check .sub_baby>ul{padding-bottom: 100px;} #pet_check .page_title_mini img{width: 60%;} #pet_check .page_title_mini span{font-weight: normal;} }