/******************** 모달 공통*********************/ .modal_bg { position:fixed; left:0; top:0; width:100%; height:100%; overflow:auto; background-color:rgba(0,0,0,0.6); z-index:999; } .modal { display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); width:94%; overflow:hidden; background:#fff; border-radius:10px; box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); z-index:1000;} /* 타이틀*/ .modal .pop_tit { padding:.9em 1.8rem .8em; font-size:1.33em; font-weight:500; color:#000; letter-spacing:-.05em; border-bottom:1px solid #ccc;} /* 버튼 관련 */ .modal>.btn_close { position:absolute; top:.8em; right:1em; width:2.5em; height:2.5em; padding:1em; background:#000; border-radius:100%; z-index:20; } .modal>.btn_close:before, .modal>.btn_close:after { position:absolute; width:60%; height:1px; left:20%; top:50%; background:#fff; content:"" } .modal>.btn_close:before { transform:translateY(-50%) rotate(45deg); } .modal>.btn_close:after { transform:translateY(-50%) rotate(-45deg);} .modal .btn_area { display:flex; align-items:center; justify-content:center; gap:5px;} .modal .btn_area { margin-top:1.5em; display:flex; align-items:center; justify-content:center; gap:10px;} .modal .btn_area a, .modal .btn_area button { display:flex; font-size:.95rem; line-height:1; padding:14px 20px 11px; border-radius:5px; min-width:90px; justify-content:center; } .modal .btn_area a:hover, .modal .btn_area button:hover { animation:iconShow 0.7s ease-in-out 1 forwards; } .modal .btn_area .btn_close { border:1px solid rgba(0,0,0,.1); } .modal .btn_area .btn_check { border:1px solid var(--color-point); background:var(--color-point); color:#fff; } /*확대보기*/ .more_view_layer { display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); width:94%; overflow:hidden; background:#fff; border-radius:10px; box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); z-index:1000;} .modal_zoom_bg { position:fixed; left:0; top:0; width:100%; height:100%; overflow:auto; background-color:rgba(0,0,0,0.6); z-index:999; } .more_view_layer>.btn_close { position:absolute; top:15px; right:15px; width:40px; height:40px; padding:1em; background:#000; border-radius:100%; z-index:20; } .more_view_layer>.btn_close:before, .more_view_layer>.btn_close:after { position:absolute; width:60%; height:1px; left:20%; top:50%; background:#fff; content:"" } .more_view_layer>.btn_close:before { transform:translateY(-50%) rotate(45deg); } .more_view_layer>.btn_close:after { transform:translateY(-50%) rotate(-45deg);} .modal.more_view_layer { max-width:1000px; height:auto; max-height:calc(100vh - 100px); } .more_view_layer .zoom_area { position:relative; } .more_view_layer .zoom_area .swiper-slide { width:100%; height:0; padding-top:71.2%; overflow:hidden } .more_view_layer .zoom_area .swiper-slide img { position:absolute; top:50%; left:50%; max-height:100%; min-height:100%; transform:translate(-50%,-50%) scale(1); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform: translate(-50%,-50%); } .more_view_layer .zoom_area .swiper_bottom button { position:fixed; top:50%; width:40px; height:40px; background:#fff; border:1px solid #ccc; border-radius:100%; transform:translateY(-50%); z-index:10} .more_view_layer .zoom_area .swiper_bottom .swiper_prev { left:1em; } .more_view_layer .zoom_area .swiper_bottom .swiper_next { right:1em; } .more_view_layer .zoom_area .swiper_bottom .swiper_page { position:absolute; top:15px; right:35px; font-size:.85rem; width:fit-content !important; left:inherit; height:40px; display:flex; align-items:center; justify-content:center; padding:10px 20px; padding-right:50px; margin:0; z-index:2; border-radius:25px 0 0 25px; background:#000; color:#fff; gap:5px } /* 본인인증 */ .pass_layer { max-width:700px; padding:2em;} .pass_layer h4 { font-size:1.467em; color:#fff; font-weight:bold; text-align:center; background:#222; padding:15px;} .pass_layer .img { margin-top:1.5em; } .pass_layer .img img { width:250px; } .pass_layer strong { display:block; font-size:1.167em; font-weight:bold; line-height:1.3; margin-top:.5em; } .pass_layer .text { font-size:1.03em; line-height:1.4; margin-top:.75em;} /* 본인인증 */ [data-subarea="system_app"] .pass_layer, [data-subarea="system_app"] .comp_layer { max-width:700px; padding:2em; text-align:center} [data-subarea="system_app"] .pass_layer h4 { font-size:1.467em; font-weight:bold; text-align:center; background:#ebf2f8; border-radius:10px; padding:15px;} [data-subarea="system_app"] .pass_layer .img, [data-subarea="system_app"] .comp_layer .img { margin-top:1.5em; margin-left:auto; margin-right:auto } [data-subarea="system_app"] .pass_layer .img img { width:250px; } [data-subarea="system_app"] .comp_layer .img img { width:350px; } [data-subarea="system_app"] .pass_layer strong, [data-subarea="system_app"] .comp_layer strong { display:block; font-size:1.167em; font-weight:bold; line-height:1.3; margin-top:.5em; } [data-subarea="system_app"] .pass_layer .text, [data-subarea="system_app"] .comp_layer .text { font-size:1.03em; line-height:1.4; margin-top:1.25em } @media all and (max-width:968px){ /*확대보기*/ .more_view_layer .zoom_area .swiper_bottom .swiper_page { top:10px; right:25px; height:35px; padding-right:35px; font-size:.75rem; } .more_view_layer>.btn_close { top:10px; right:10px; width:35px; height:35px; } .more_view_layer>.btn_close:before, .more_view_layer>.btn_close:after { width:50%; top:49.5%; } /* 본인인증 */ .pass_layer h4 { font-size:1.367em; } } @media all and (max-width:668px){ } @media all and (max-width:668px){ .modal .pop_tit { padding:.7em 1rem .6em; } .modal.completion_wrap { padding:2.5em; } .modal .area_btn { display:flex; flex-wrap:wrap; gap:2px; justify-content:center; } /*확대보기*/ .more_view_layer .zoom_area .swiper_bottom .swiper_page { height:32px; padding:12px 15px 10px; padding-right:30px; font-size:.72rem; } .more_view_layer>.btn_close { width:32px; height:32px; } .more_view_layer .zoom_area .swiper_bottom button { width:35px; height:35px; } .more_view_layer .zoom_area .swiper_bottom .swiper_next { right:5px; } .more_view_layer .zoom_area .swiper_bottom .swiper_prev { left:5px; } /* 본인인증 */ [data-subarea="system_app"] .pass_layer, [data-subarea="system_app"] .comp_layer { padding:1.25em;} [data-subarea="system_app"] .pass_layer h4 { font-size:1.267em; } [data-subarea="system_app"] .modal .btn_area a, [data-subarea="system_app"] .modal .btn_area button { font-size:.9rem; } [data-subarea="system_app"] .modal .btn_area { gap:5px; } } @media all and (max-width:468px){ .modal .zoom_area .swiper_bottom button { width:33px; height:33px; } .modal.completion_wrap { padding:2em; } .modal.completion_wrap .modal_con strong { font-size:1.43em;} .modal.completion_wrap .modal_con p { font-size:1.067em; } /*확대보기*/ .more_view_layer .zoom_area .swiper_bottom .swiper_page { padding:13px 15px 9px; padding-right:25px; top:5px; right:20px;} .more_view_layer>.btn_close { top:5px; right:5px} .more_view_layer .zoom_area .swiper_bottom button { width:30px; height:30px; } .more_view_layer .zoom_area .swiper_bottom .swiper_next { right:5px; } .more_view_layer .zoom_area .swiper_bottom .swiper_prev { left:5px; } }