@charset "UTF-8";
.font_div {
	margin-top: 10px;
	border-top: 1px solid #ccc;
}
.font_pop_wrap{	
	color: #000;
	max-width:760px; 
	margin: 30px auto 0;
	/* margin: 100px auto 0; */
	background:#f9f9f9;	
}
.pop_container {	
	overflow: hidden;
	padding: 0 40px 34px;
}
.pop_head {
	position:relative;
	padding: 20px 30px 0;
}
.pop_main {	
	text-align: center;
}
.pop_main .logo1 {
	position:absolute;
	width: 60px;
	height: 48px;
	top: 522px;
	left: 129px;
	font-size: 0;
	line-height: 0;
}
.pop_main .logo2 {
	position:absolute;
	width: 70px;
	height:34px;
	top: 528px;
	left: 234px;
	font-size: 0;
	line-height: 0;
}
.pop_all_down {
	display:flex;
	justify-content:space-between;
	padding: 0 94px 0 156px;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 99;
	margin-bottom: 5.7%;
}
.pop_all_down a {
	width:calc(50% - 5px); 
	height:50px;
	line-height: 50px; 
	background:#000;
	border-radius: 25px;
	text-align: center;
}
.pop_all_down a span {
	font-size:18px; 
	font-weight:500; 
	color:#fff; 
	letter-spacing:-0.2px;
	line-height:1;
}
.pop_all_down a span::after {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 18px;
	height: 18px;
	background: url(../img2/new/ico-download.png) 50% no-repeat;
	margin-left: 10px;
}
.pop_content a img{
	vertical-align: middle;
}
.pop_content {
	margin-top: 70px;
	border:1px solid;
	border-radius: 20px;
	background-color: #fff;
}
.pop_content .box_title {
	height: 76px;
	display:flex; 
	align-items:center; 
	justify-content:center;
	border-radius: 18px 18px 0 0;
}
.pop_content .box_title strong {
	font-size:26px; 
	font-weight:700; 
	color:#fff; 
	letter-spacing:-0.025em;
}
.pop_content .box_title .btn_help {
	width:26px; 
	height:26px; 
	margin-left:18px;
	background:url(../img2/new/ico-info.png) center no-repeat;
	border:0;
}
.pop_content .box_new_list { 
	padding: 25px 20px;
	position:relative;
}
.pop_content .box_new_list:before {
	content:"";
	display:block;
	width: 110px;
	height:40px;
	position:absolute;
	top: -16px;
	left: 5px;
	z-index: 10;
}
.pop_content .box_new_list ul {
	display:flex; 
	align-items:center; 
	flex-wrap:wrap;
	margin: 0 -10px;
}
.pop_content .box_new_list ul li {
	width:calc(25% - 10px);
	border-radius:10px; 
	border:1px solid #00947b; 
	background:transparent; 
	height:50px; 
	display: inline-block;
	text-align: center;
	margin: 5px;
}
.pop_content .box_new_list ul#ofl_area li {
	border-color: #454fb7;
}
.pop_content .box_list {
	padding: 10px;
}
.pop_content .box_list ul {
	display:flex; 
	align-items:center; 
	flex-wrap:wrap;
	/* margin: 0 -10px; */
	background-color: #f9f9f9;
	padding: 5px;
	border-radius: 20px;
}
.pop_content .box_list ul li {
	width:calc(25% - 10px); 
	border-radius: 10px;  
	height:50px; 
	display: inline-block;
	text-align: center;
	margin: 5px;
	box-sizing: border-box;

	background-color: #fff;
	border: 1px solid #ccc;
}
.pop_content .box_list ul li.qaut_box {
	width:calc(50% - 10px);
}
.pop_content.box_kogl {
	border-color:#00a589;
}
.pop_content.box_kogl .box_title {
	background:#00a589;
}
.pop_content.box_kogl .box_new_list {
	background:#e5f6f3;
	border-bottom: 1px solid #00947b;
}
.pop_content.box_kogl .box_new_list + .box_list {border-color:#00a589;}
.pop_content.box_ofl {
	border-color: #454fb7; 
	margin-top: 60px;
}
.pop_content.box_ofl .box_title {background: #454fb7;}
.pop_content.box_ofl .box_new_list {
	background: #f0f1fa;
	border-bottom: 1px solid #454fb7;
}
.pop_content.box_ofl .box_new_list + .box_list {
	/* border-color: #454fb7; */
	background-color: #fff;
	border-radius: 20px;
}
.pop_content.box_kogl .box_new_list:before,
.pop_content.box_ofl .box_new_list:before {
	background:url(../img2/new/kogl_new_label.png) center no-repeat;
}
/* #freefontEvent {position:relative;}
#freefontEvent #check_area {position:absolute; bottom:20px; right:50px;}
#freefontEvent #check_area span b {font-size:15px;} */
/*  */
.pop_content__info{
	margin-top: 50px;
	font-size: 16px;
}
.pop_content__info h4{
	font-size: 22px;
	font-weight: 700;
}
.pop_content__info h4 + h5 {
	margin-top: 20px;
}
.pop_content__info h5{
	font-size: 18px;
	letter-spacing: -0.45px;
	margin-top: 40px;
	margin-bottom: 10px;
}
.pop_content__info .idt{
	position: relative;
	padding-left: 13px;
}
.pop_content__info .idt::before {
	content: "";
	display: inline-block;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background-color: #acacac;
	position: absolute;
	top: 10px;
	left: 0;
}
.pop_content__info .reference{
	color: #e01c53;
	padding-left: 20px;
	text-indent: -20px;
	margin-top: 15px;
}
@media (max-width: 1199px){
    .pop_head {
		padding: 0;
	}
}


@media (max-width: 749px){
    .pop-modal .pop-wrap .pop-container {height: calc(100vh - 289px);}
    .font_pop_wrap{
		width:100%;
		margin: 30px 0 0;
	}
    .pop_container {padding: 0 10px 24px;}
    .pop_main {
		padding: 33px 0 0;
		position: relative;
	}
    .pop_all_down {
		flex-direction: column;
		margin-top: -39%;
	}
    .pop_all_down a {
		width: 100%;
		margin: 6px 0;
	}
    .pop_all_down a span {font-size: 18px;}
    .pop_content {
		margin-top: 10% !important;
	}    
    .pop_content .box_title{padding-bottom: 8px;}
    .pop_content .box_title strong {
		font-size: 22px;
	}
    .pop_content .box_new_list {padding: 15px;}
    .pop_content .box_new_list ul li {width: calc(50% - 10px);height: 35px;display: flex;align-items: center;justify-content: center;}
    .pop_content .box_list {padding:15px;}
    .pop_content .box_list ul li {width:calc(50% - 10px);height: 42px;display: flex;align-items: center;justify-content: center} 
    .pop_content .box_list ul li.qaut_box {width:100%;}
    .pop_main .logo1 ,
    .pop_main .logo2 {display:none;}

	.pop_content__info {
		padding: 0 10px;
	}
	.pop_all_down {
		position: relative;
		padding: 0 12% 0 18%;
	}
	.pop_main::before,
	.pop_main::after {
		content: "";
		display: inline-block;
		position: absolute;
		bottom: 1%;
		z-index: 9;
	}
	.pop_main::before {		
		width: 68px;
		height: 102px;
		background: url(../img2/new/character-01.png) 50% no-repeat;
		left: 1.4%;
	}
	.pop_main::after {
		width: 38px;
		height: 60px;
		background: url(../img2/new/character-02.png) 50% no-repeat;
		right: 1%;
	}
}
@media (max-width: 460px){
	.pop_all_down {
		margin-top: -44.6%;
	}
}