/* 팝업창 CSS */ /* A A A : A : A : A : */ .JR_popupCont{ font-size : 15px; display : none; align-items : stretch; font-family : "Noto Sans Kr"; position : relative; z-index : 999;} .JR_popupCont .popupImgNext:after, .JR_popupCont .popupImgPrev:after { content : unset; } .JR_popupCont .popupImgNext, .JR_popupCont .popupImgPrev { width : min(10%,60px); height : auto; color : #555; background : #ffffff; opacity : 0; transition : .2s; border-radius : 50%; padding-top : min(10%,60px); min-width : 35px; min-height : 35px; } .JR_popupCont:hover .popupImgNext, .JR_popupCont:hover .popupImgPrev { opacity : .7; transition : .2s; } .JR_popupCont .popupImgNext:hover, .JR_popupCont .popupImgPrev:hover { opacity : 1; transition : .2s; } .JR_popupCont .popupImgNext img.buttonArrow, .JR_popupCont .popupImgPrev img.buttonArrow { width : 70%; height : 50%; object-fit : contain; position : absolute; top : 50%; left : 50%; transform : translate(-50%,-50%); } .JR_popupCont .popupImgSlide { width : 100%; height : 100%!important; } .JR_popupCont .popupImgSlide .swiper-slide { height : auto; } .JR_popupCont .popupThumSlide { overflow : unset; position : absolute; } .JR_popupCont .popupThumSlide .swiper-slide { width : 100% !important; cursor : pointer; } .JR_popupCont .thumnailWrap { width : auto; height : auto; display : grid; box-sizing : border-box; background : #ffffffe6; padding : 0.5em; gap : 0.25em; transform : unset!important; } .JR_popupCont .thumnailWrap .thumnail { border-radius : 7px; background : #cccccc; transition : .2s; } .JR_popupCont .thumnailWrap .thumnail:hover { background : #aaa; transition : .2s; } .JR_popupCont .thumnailWrap .swiper-slide-thumb-active .thumnail { background : #84a9cd; pointer-events : none; } .JR_popupCont .thumnailWrap .thumnail p { width : 80%; overflow : hidden; text-overflow : ellipsis; color : #fff; display : -webkit-box; -webkit-line-clamp : 2; -webkit-box-orient : vertical; word-break : keep-all; line-height : 1.2em; text-align : center; font-weight : 400; } .JR_popupCont .popupThumSlide .closeWrap { position : absolute; width : 13em; display : flex; align-items : center; justify-content : flex-end; } .JR_popupCont .popupThumSlide .closeWrap .todayInput { display : none; } .JR_popupCont .popupThumSlide .closeWrap .today { background : #ddd; border : 1px solid #999; font-weight : 500; color : #555; padding : 0.2em 0.8em; border-radius : 7px; transition : .2s; cursor : pointer; margin-right : 0.34em; } .JR_popupCont .popupThumSlide .closeWrap .today:hover { background : #cfcfcf; transition : .2s; } .JR_popupCont .popupThumSlide .closeWrap .todayInput:checked + label { background : #555; color : #fff; transition : .2s; } .JR_popupCont .popupThumSlide .closeWrap .popupCloseBtn { width : 1.8em; height : 1.8em; color : #fff; border-radius : 50%; display : flex; align-items : center; justify-content : center; background : #555555; transition : .2s; cursor : pointer; } .JR_popupCont .popupThumSlide .closeWrap .popupCloseBtn:hover { background : #333; transition : .2s; } .JR_popupCont .popupContImg { width : 100%; height : 100%; object-fit : cover; } /* 레이어 */ /* A A A : A : A : A : */ /* .JR_popupCont_layer .popupContImg { border : 4px solid #cccccc; border-top-left-radius : 27px; border-top-right-radius : 27px; } */ .JR_popupCont_layer .popupThumSlide { width : 100%; bottom : 0; } .JR_popupCont_layer .popupThumSlide .swiper-slide { opacity : 0; pointer-events : none; } .JR_popupCont_layer .thumnailWrap { width : 100%; height : 0; padding : 0; overflow : hidden; } .JR_popupCont_layer .popupThumSlide .closeWrap { right : 0; top : calc(100% + 0.5em); } /* 가로형 */ /* A A A : A : A : A : */ /* .JR_popupCont_horizontal .popupContImg { border : 4px solid #cccccc; border-top-left-radius : 27px; border-bottom-left-radius : 27px; } */ .JR_popupCont_horizontal .popupThumSlide { height : 100%; top : 0; left : 100%; } .JR_popupCont_horizontal .thumnailWrap { height : 100%; } .JR_popupCont_horizontal .thumnailWrap.items2 { grid-template-columns : 100%; } .JR_popupCont_horizontal .thumnailWrap.items3 { grid-template-columns : 100%; } .JR_popupCont_horizontal .thumnailWrap.items4 { grid-template-columns : 50% 50%; } .JR_popupCont_horizontal .thumnailWrap.items5 { grid-template-columns : 50% 50%; grid-template-rows : repeat(6,1fr); } .JR_popupCont_horizontal .thumnailWrap.items5 .swiper-slide:nth-child(1) { grid-column : 1 / 2; grid-row : 1 / 4; } .JR_popupCont_horizontal .thumnailWrap.items5 .swiper-slide:nth-child(2) { grid-column : 1 / 2; grid-row : 4 / 7; } .JR_popupCont_horizontal .thumnailWrap.items5 .swiper-slide:nth-child(3) { grid-column : 2 / 3; grid-row : 1 / 3; } .JR_popupCont_horizontal .thumnailWrap.items5 .swiper-slide:nth-child(4) { grid-column : 2 / 3; grid-row : 3 / 5; } .JR_popupCont_horizontal .thumnailWrap.items5 .swiper-slide:nth-child(5) { grid-column : 2 / 3; grid-row : 5 / 7; } .JR_popupCont_horizontal .thumnailWrap.items6 { grid-template-columns : 50% 50%; grid-template-rows : repeat(3,1fr); } .JR_popupCont_horizontal .thumnailWrap .thumnail { display : flex; align-items : center; justify-content : center; width : 9em; height : 100%; } .JR_popupCont_horizontal .popupThumSlide .closeWrap { top : calc(100% + 0.5em); right : 0; } /* 세로형 */ /* A A A : A : A : A : */ /* .JR_popupCont_vertical .popupContImg { border : 4px solid #cccccc; border-top-left-radius : 27px; border-top-right-radius : 27px; } */ .JR_popupCont_vertical .popupThumSlide { width : 100%; top : calc(100% + 1px); left : 0; } .JR_popupCont_vertical .thumnailWrap { width : 100%; } .JR_popupCont_vertical .thumnailWrap.items2 { grid-template-columns : 50% 50%; } .JR_popupCont_vertical .thumnailWrap.items3 { grid-template-columns : repeat(3,1fr); } .JR_popupCont_vertical .thumnailWrap.items4 { grid-template-columns : 50% 50%; } .JR_popupCont_vertical .thumnailWrap.items5 { grid-template-columns : repeat(6,1fr); grid-template-rows: repeat(2,1fr); } .JR_popupCont_vertical .thumnailWrap.items5 .swiper-slide:nth-child(1) { grid-column : 1 / 4; grid-row : 1 / 2; } .JR_popupCont_vertical .thumnailWrap.items5 .swiper-slide:nth-child(2) { grid-column : 4 / 7; grid-row : 1 / 2; } .JR_popupCont_vertical .thumnailWrap.items5 .swiper-slide:nth-child(3) { grid-column : 1 / 3; grid-row : 2 / 3; } .JR_popupCont_vertical .thumnailWrap.items5 .swiper-slide:nth-child(4) { grid-column : 3 / 5; grid-row : 2 / 3; } .JR_popupCont_vertical .thumnailWrap.items5 .swiper-slide:nth-child(5) { grid-column : 5 / 7; grid-row : 2 / 3; } .JR_popupCont_vertical .thumnailWrap.items6 { grid-template-columns : repeat(3,1fr); } .JR_popupCont_vertical .thumnailWrap .thumnail { display : flex; align-items : center; justify-content : center; height : 5em; } .JR_popupCont_vertical .popupThumSlide .closeWrap { top : calc(100% + 0.5em); right : 0; } #popup_3{ width : 500px; height : auto; position : fixed; top:42px; left:49px; display : flex;}@media(max-width:1024px){ #popup_3{ display:none;}}@media(max-width:1024px){#popup_3{ width : 48.9%; height : auto; position : fixed; top:21px; left:280px;display : flex;}}@media(max-width:640px){ #popup_3{ display:none; }}@media(max-width:640px){#popup_3{ width : 78.1%; height : auto; position : fixed; top:0px; left:67px;display : flex;}}