@charset "utf-8";
.dimmed{overflow: hidden;height: 100%;}
.popup_modal{width: 100vw; height: 100vh; background-color: rgba(0,0,0,.7); position: fixed; left: 0; top: 0; z-index:100; color: #fff;}
.popup_modal_wrap{position: absolute; left: 50%; top: 50%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); width: 100%; max-width:1600px;}
.popup_modal h3{text-align: center; font-size: 50px; font-weight: bold; vertical-align: middle; margin-bottom: 50px; font-family:'Gmarket Sans';letter-spacing: -2px;}
.popup_modal h3 .popup_pagi{position: static; width: auto; display:inline-block; font-size: 20px; font-weight: bold; padding: 10px 20px; background-color: #2093ff; border-radius:99px; vertical-align: middle; margin-top: -10px; margin-left: 20px;}
.banner_slider .swiper-wrapper,.swiper-wrapper li{list-style-type: none;margin: 0;padding: 0;}
/*슬라이드*/
.popup_modal .banner_slider{position: relative;}
.popup_modal .banner_area{width: calc(100% - 160px); max-width:1280px;}
.popup_modal .banner_area ul li{text-align: center; width: 33.3333%;}
.popup_modal .banner_area.pop_css1{max-width:600px;}
.popup_modal .banner_area.pop_css1 ul li{width: 100%;}
.popup_modal .banner_area.pop_css2{max-width:815px;}
.popup_modal .banner_area.pop_css2 ul li{width: 50%;}
.popup_modal .banner_area ul li img{max-width: 95%;display: inline;border-radius:28px ;overflow: hidden;}
.popup_modal .banner_area ul li:last-child{margin-right: 0;}
.popup_modal .banner_area ul li p{display: inline;}
.popup_modal .banner_slider .banner_area_wrap{position: relative;}
.popup_modal .banner_slider .popup-next,
.popup_modal .banner_slider .popup-prev{width: 80px; height: 80px; top: 50%; transform: translateY(-50%); border-radius:40px; transition:.2s; outline:none;}
.popup_modal .banner_slider .popup-next{right: 0;}
.popup_modal .banner_slider .popup-prev{left: 0;}
.popup_modal .banner_slider .popup-next:after,
.popup_modal .banner_slider .popup-prev:after{content:''; width: 100%; height: 100%; background: url('../img/popup_aro.png') no-repeat center / 40%;}
.popup_modal .banner_slider .popup-next:after{transform:rotate(180deg);}
.popup_modal .banner_slider .popup-next:hover,
.popup_modal .banner_slider .popup-prev:hover{background-color:rgba(255,255,255,.2);}

/*버튼*/
.popup_modal .btn_area{text-align: center; margin-top: 60px;}
.popup_modal .btn_area a{display:inline-block; font-size: 18px; font-weight: 600; padding: 10px 50px 10px 20px; background-color: #000; border-radius:99px; margin-right: 10px; background:#000 url('../img/popup_close.png') no-repeat right 20px center / 15px;}
.popup_modal .btn_area a:last-child{margin-right: 0;}
@media all and (max-width : 1024px){
.popup_modal .banner_area ul li{width: 50% !important;}
}
@media all and (max-width : 600px){
.popup_modal .banner_area ul li{width: 100% !important;}
.popup_modal .banner_area ul li img{max-width: 100%;}
.popup_modal h3{font-size: 30px; margin-bottom: 30px;}
.popup_modal h3 .popup_pagi{font-size: 15px; padding: 5px 15px; margin-top: -5px; margin-left: 10px;}
.popup_modal .btn_area{margin-top: 30px;}
.popup_modal .btn_area a{font-size: 15px;}
.popup_modal .banner_area{width: calc(100% - 100px);}
.popup_modal .banner_slider .popup-next, .popup_modal .banner_slider .popup-prev{width: 50px; height: 50px;}
}
/*****************
 super z-index
******************/
.modal{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.8);z-index:100;overflow:auto;display:none}
.modal .modal_con{position: fixed; top: 50%; left: 50%; transform:translate(-51%, -50%); width: 90%; max-width:640px; }
.modal .modal_con .ttl_area{overflow:hidden; margin-bottom: 10px;}
.modal .modal_con .ttl_area h4{font-size: 22px; font-weight: 600; color: #fff; float:left; width: calc(100% - 40px); line-height: 40px; letter-spacing: -.5px;}
.modal .modal_con a.menuX{float:left; display:block; width: 40px; height: 40px; font-size: 0;}
.modal .modal_con a.menuX::after{content:" \2715";display:block;color:#fff;font-size:30px;line-height:40px;text-align:right;height:40px;width:40px;right:0;position:absolute;top:0;font-weight:100;text-indent:0}
.modal .modal_con video{width: 100%; height: auto;display: block;}
.modal .modal_con .input_chk{display:block; margin-top: 10px;}
.modal .modal_con .input_chk label{font-size: 14px; color: #fff; padding-left: 5px;}
.modal .modal_con .input_chk input:checked ~ label{color: #fff !important;}
.modal .modal_con.for_img{position: fixed; top: 50%; left: 50%; transform:translate(-50%, -50%); width:95%; max-width:1376px; }
.modal .modal_con img{width: auto; max-width: 100%;height: auto;font-size: 0;margin: 0 auto;}
.modal .modal_content{border: 0 solid #ff0;text-align: center;}
.modal .modal_con img.m-y{display: none;}

@media all and (max-width : 800px){
.modal .modal_con .ttl_area h4{font-size: 13px;}
.modal .modal_con img.m-x{display: none;}
.modal .modal_con img.m-y{display: block;}
.modal .modal_con.for_img{position: absolute; top: 0; left: 0; transform:translate(0, 0); width:100%; }
.modal .modal_con img{width: 100%;}
.modal .modal_content{padding: 0 10px;}
}