@charset "utf-8";

#main_popup {position:fixed; z-index:9999; top:50%; left:50%; transform:translate(-50%,-50%); overflow:hidden;}
/*
#main_popup.horizontal {max-width:720px;}
*/
#main_popup .pop_slide {background:#fff; overflow:hidden; max-width:900px;}
#main_popup .pop_slide .slick-slide li {display:block;}
#main_popup .pop_slide li,
#main_popup .pop_slide div {display:block;}
#main_popup .pop_slide .slick-slide .mo_img {display:none;}

#main_popup .pop_dots {position:relative; z-index:5; display:flex; align-items:center; text-align:center; flex-wrap:wrap; margin-top:-5px; background:#fff; margin-left:-1px; width:calc(100% + 2px)}
#main_popup .pop_dots > button {flex:1; width:50%; min-width:33.33%; font-size:14px; font-weight:700; color:#000; padding:16px 0; background:#fff; border-left:1px solid #E0E0E0; border-bottom:1px solid #E0E0E0;}
#main_popup .pop_dots > button.on,
#main_popup .pop_dots > button:hover {background:#131313; color:#fff;}

#main_popup .pop_ctrl {margin-top:-1px;display:flex; padding:0; align-items:center; justify-content:space-between; background:#fff;}
#main_popup .pop_ctrl a {padding:19px 10px; color:#333; font-size:14px;}
#main_popup .pop_ctrl a i {display:inline-block; margin-right:8px; width:16px; height:16px; border-radius:4px; border:1px solid #e0e0e0; vertical-align:middle;}
#main_popup .pop_ctrl .close {width:54px; background:url(../images/ico/ico_pop_close01.svg) no-repeat center; text-indent:-9999px;}

@media all and (max-width:1024px) {
	#main_popup.horizontal {top:50%; left:50%; width:calc(100% - 200px); max-width:100%; transform:translate(-50%,-50%);}
}

@media all and (max-width:768px) {	
	#main_popup {top:50%; left:50%; width:calc(100% - 200px); max-width:100%; transform:translate(-50%,-50%);}
	#main_popup .pop_dots > button {min-width:50%;}
}
@media all and (max-width:640px){
	#main_popup ,
	#main_popup.horizontal {width:calc(100% - 30px);}

	#main_popup .pop_slide .slick-slide .pc_img {display:none;}
	#main_popup .pop_slide .slick-slide .mo_img {display:block;}
	#main_popup .pop_dots > button {font-size:10px; padding:6px 0;}
	#main_popup .pop_ctrl a {font-size:10px; padding:7px 4px;}
	#main_popup .pop_ctrl a i {vertical-align:middle; width:10px; height:10px; border-radius:1.33px; margin-right:2px;}
	#main_popup .pop_ctrl .close {width:20px; background-size:12px;}
}

@media all and (max-width:480px){
	#main_popup.horizontal {width:calc(100% - 20px);}
	#main_popup .pop_dots > button {min-width:33.33%; font-size:8px; padding:6px 0;}
}