@charset "UTF-8";
/* CSS Document */


.wrap-layer-popup { display:none; align-items:center; justify-content:center; position:fixed; z-index:991;left:0; top:0; width:100%; height:100%; }
.wrap-layer-popup::after { content:''; position:fixed; z-index:990; display:block; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,.5); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition: opacity .2s;}
.wrap-layer-popup.open { display: flex; }
.wrap-layer-popup.open > .inner-layer-popup { animation:innerPpopup 0.3s both; }
.wrap-layer-popup.prev-popup { z-index: 989;}
.wrap-layer-popup > .inner-layer-popup { position:relative; z-index:999; display:flex; flex-wrap:wrap; align-content:stretch; width:400px; max-height:100%; height:auto; opacity:0; border-radius:20px; overflow:hidden; }
.wrap-layer-popup .wrap-layer-popup-title { width:100%; padding:1em 1em; background:#fff; font-size:1.2em;}
.wrap-layer-popup .wrap-layer-popup-title h1 { margin:0; font-size:18px; font-weight:700; line-height:30px;}

@keyframes innerPpopup { from { opacity:0; transform:translateY(-30%) } to { opacity:1; transform:translateY(0px); } }
@keyframes fadePpopup { from { opacity:0; } to { opacity:1; } }

.wrap-layer-popup .layer-popup-contents { position:relative; width:100%; max-height:calc(100% - 50px); overflow-y:auto; background:#fff; padding:1.5em;}
.wrap-layer-popup .layer-popup-bottom { display:flex; border-top:1px solid #ededed; width:100%; padding:10px; background:#fff; }
.scroll-lock { overflow: hidden;}
.wrapper { width: 900px; margin: 0 auto;}
.hidden { position:relative; z-index:-1; display:inline-block; overflow:hidden; height:1px; width:1px; border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); word-break:initial; word-wrap: initial;}

.btn-layer-close { position: absolute; right:18px; top:20px; width: 26px; height: 26px; padding: 0; border: 0; background: transparent; border-radius:0;transform:rotate(0deg);}
.btn-layer-close::before, .btn-layer-close::after { position: absolute; content: ''; top:50%; left:50%; width: 20px; height: 1px; background: #999; transition:all 0.3s;}
.btn-layer-close::before { transform:translate(-50%, -50%) rotate(45deg); }
.btn-layer-close::after { transform: translate(-50%, -50%) rotate(-45deg); }

.btn-layer-close:hover { transform:rotate(90deg);transition:all 0.3s;}
.btn-layer-close:hover::before, .btn-layer-close:hover::after { background:#000; }


/*통합검색*/
.wrap-layer-popup.search_popup { align-items:flex-start; }
.wrap-layer-popup.search_popup > .inner-layer-popup { width:100%; border-radius:0; }
.wrap-layer-popup.search_popup .layer-popup-contents { background:rgba(255,255,255,.95); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.int_search { display:block; width:100%; }
.int_search .inner { width:1000px; padding:15px 0; }
.int_search .search_wrap { float:none; position:relative; }
.int_search .search_wrap .inputText { height:60px; width:calc(100% - 60px); background:none; padding:10px; border:none; border-radius:0; font-size:1.5em; font-weight:600; }
.int_search .search_wrap .inputText:hover { box-shadow:none; }
.int_search .search_wrap .btn_search { width:60px; height:60px; border-radius:0 !important; border:none; font-size:2em; background:none; color:#727272; transition:all 0.3s; }
.int_search .search_wrap .btn_search:hover { box-shadow:none; color:#333; }
/* 
.main_modal_wrap { width:100%; height:100%; position:fixed; top:0; left:0; z-index:999; display:flex; justify-content:center; align-items:center;}
.main_modal_wrap::after { content:'';  background:rgba(0,0,0,0.8); width:100%; height:100%; display:block; position:absolute; top:0; left:0; z-index:10; -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); }
 */
.main_modal_wrap { width:100%; height:100%; position:fixed; top:0; left:0; z-index:999; display:flex; justify-content:center; align-items:center;}
.main_modal_wrap::after { content:'';  background:rgba(0,0,0,0.3); width:100%; height:100%; display:block; position:absolute; top:0; left:0; z-index:10; }
.main_modal {border-radius:20px 20px 10px 10px; position:relative; z-index:11; display:flex; flex-direction:column-reverse; align-items:center; }
.main_modal .modal_control { width:100%; display:flex; justify-content:center; flex-direction:column; align-items:center;}
.main_modal .modal_control ul { display:flex; justify-content:center; }
.main_modal .modal_control ul li {margin:0 5px;  display:flex; justify-content:center; align-items:center; animation:fadeUp 1s both;}
.main_modal .modal_control ul li .modal_count { padding:0 15px; background:#fff; border-radius:50px; height:40px; display:flex; align-items:center;}
.main_modal .modal_control ul li .btn_s { padding:0 20px; border-radius:50px; border:none; height:40px; background:#fff; }
.main_modal .modal_control ul li .check { align-items: center; padding:0 15px; margin:0; background:#fff; height:40px; border-radius:50px; }
.main_modal .modal_control ul li:nth-child(1) { animation-delay:0.2s; }
.main_modal .modal_control ul li:nth-child(2) { animation-delay:0.4s; }
.main_modal .modal_control ul li:nth-child(3) { animation-delay:0.5s; }
.main_modal .modal_control ul li .modal_count,
.main_modal .modal_control ul li .btn_s,
.main_modal .modal_control ul li .check { height:40px; font-weight:600; border-radius:50px; background:#fff; border:2px solid #333; box-shadow:5px 5px 10px 0 rgba(0,0,0,0.3); }

.main_modal .modal_content { width:400px; height:500px; margin-bottom:20px; padding:0; animation:fadeUp 1s both; overflow:hidden;}
.main_modal .modal_content .modal_slide .swiper-slide { width:100%; height:auto; }
.main_modal .modal_content .swiper-slide { width:auto; height:500px; overflow:hidden; }
.main_modal .modal_content .swiper-slide a { width:400px; height:500px; display:block; position:relative; background-color:#fff; }
.main_modal .modal_content .swiper-slide img { height:100%; }

.modal-slide { position:relative; }
.modal-slide-control { position:absolute; bottom:75px; right:40px; z-index:9;}
.modal_contr.swiper-button-next, .modal_contr.swiper-button-prev { position:static; height:45px;width:45px; border-radius:50px; margin:0; }
.modal_contr.swiper-button-next:after, .modal_contr.swiper-button-prev:after { font-size:20px; font-weight:900; color:#333; }
.modal_contr.swiper-pagination { width:auto; display:flex; align-items:center; position:static; }
.modal_contr.swiper-pagination span { background:#fff; border:2px solid #000; width:12px; height:12px; position:relative; margin:0 5px !important; display:inline-block; }
.modal_contr.swiper-pagination-bullet-active::after { border:1px solid #fff; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:15px; height:15px; display:inline-block; border-radius:50px; content:''; animation:fadeIndot 0.5s both cubic-bezier(0.550, 0.085, 0.680, 0.530); }

.m_slide a { width:100%; display:block; }
.m_slide a img { width:100%; min-height:500px; max-height:500px; }
.modal_slide .slick-prev, .modal_slide .slick-next { width:30px; height:30px; transform:none; top:auto; top:50%; margin-top:-15px; color:#fff; background:none; }
.modal_slide .slick-prev { left:-50px; }
.modal_slide .slick-next { right:-50px; }
.modal_slide .slick-dots { position:static; margin:0; }
.modal_slide .slick-dots li a { color:white; border:1px solid #fff; }
.modal_slide .slick-dots li.slick-active a { color:white; background:#fff; }

.modal_slide .slick-slide { opacity:0; }
.modal_slide .slick-slide.slick-current { opacity:1; }

#qna_popup .inner-layer-popup { width:600px;transform: perspective(1px) translateZ(0); backface-visibility: hidden;}
#qna_popup .inner-layer-popup p { margin-bottom:8px; font-weight:600; }
#qna_popup .layer-popup-contents { max-height:calc(100% - 115px); transform: perspective(1px) translateZ(0); backface-visibility: hidden; }
#qna_popup .board_write li label { width:110px; font-weight:600; }
#qna_popup .board_write li > strong { width:110px; }
#qna_popup .board_write li > strong span { font-weight:400; font-size:0.8em; margin-left:3px; display:inline-block; }
#qna_popup .board_write li { padding:15px 0; display:flex; justify-content:space-between; align-items: center; }
#qna_popup .board_write li .exp { font-size:0.8em; margin-top:10px; line-height: 1.6em; }
#qna_popup .board_write li .exp span { display:flex;align-items: center; }
#qna_popup .board_write li .exp span::before { content:''; display:inline-block; width:3px; height:3px; background:#666; margin-right:5px; }
#qna_popup .layer-popup-bottom .btn_m { height:35px; }

.joinAgreeText .inner-layer-popup { width:500px; }
.joinAgreeText .agree_text { width:100%; height:400px; overflow-y:auto; padding:20px; }	
.joinAgreeText .layer-popup-contents { padding:0; position:static; }
.joinAgreeText .layer-popup-bottom { width:100%; padding:0 15px 15px; border-top:none; }
.joinAgreeText .article { margin-bottom:25px; display:block; }
.joinAgreeText .article.last { margin-bottom:0; }
.joinAgreeText .article > strong { font-size:1.1em; margin-bottom:10px; display:block; }
.joinAgreeText .agree_text_wrap { padding-left:15px; }
.joinAgreeText .agree_text_wrap li { margin:5px 0; }
.joinAgreeText .agree_text_wrap p { margin-bottom:8px; }
.joinAgreeText .layer-popup-bottom label { padding:10px 0; width:100%; text-align:center; border-radius:5px; border:1px solid #ccc; }
.joinAgreeText .headline { margin-bottom:25px; }

.wrap-layer-popup.search_login  > .inner-layer-popup { width:500px; }

@media all and (max-width: 1200px) {
	.modal_contr.swiper-button-next, .modal_contr.swiper-button-prev { display:flex; }
}
@media all and (max-width: 500px) {
	.modal-slide-control { bottom:90px; }
}
@media all and (max-width: 450px) {
	.main_modal .modal_control { margin-top:15px; }
	.modal_contr.swiper-button-next, .modal_contr.swiper-button-prev { display:none; }
	.modal-slide-control { bottom:90px; }
	.modal_contr.swiper-pagination span { margin:0 5px !important; }
	.main_modal .modal_content { width:calc(100% - 40px); margin:0 20px; height:auto; }
	.main_modal .modal_content .swiper-slide { width:100% !important; }
	.main_modal .modal_content .swiper-slide a { width:100%; height:auto; display:flex; }
	.main_modal .modal_content img { width:100%; height:auto !important; min-height:0; }
	.modal-slide-control { margin:13px 0; }
	.main_modal .modal_control ul { flex-wrap:wrap; padding:0 20px; }
	.main_modal .modal_control ul li:nth-child(1) { width:100%; }
	.main_modal .modal_control ul li { font-size:12px; margin:2px; height:30px;}
	.main_modal .modal_control ul li .modal_count { padding:0 10px;height:30px; }
	.main_modal .modal_control ul li .check { padding:0 10px; height:30px; }
	.main_modal .modal_control ul li .btn_s { padding:0 10px; height:30px; }
}