*{box-sizing:border-box;}
html {height:auto;-webkit-text-size-adjust: none;-moz-text-size-adjust: none;-ms-text-size-adjust: none; }
html,body,div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,address,blockquote,table,caption,tr,td,th,thead,tbody,form,fieldset,legend,header,nav,aside,section,article,main,footer,figure,figcaption {margin: 0; padding: 0;}

header,nav,aside,main,section,article,footer,figure {display: block;}
li {list-style: none;}
a {text-decoration: none; color: inherit;}
table {border-collapse: collapse;}
em,i,cite,address {font-style: normal;}
h1,h2,h3,h4,h5,h6,strong {font-weight: normal;}

div {box-sizing:border-box;}

.clear:before, .clear:after {clear:both; content: ''; display: block;}

.media_bg {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 500;
    background-image: url(../img/media_bg.webp);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}

.boaWrap{
	position:relative;
	width:100%;
	padding:80px 0;
}
.boaSideBox{
	max-width:1240px;
	padding:0 20px;
	margin:0 auto;
}

.boaWrap .rea_TabBox{ margin-top:0px;}


.boah1{
	position:Relative;
	margin:100px 0 56px 0;
}
.boah1 h1{
	color: #000;
	text-align: center;
	font-family: 'NEXON Lv1 Gothic OTF Bold';
	font-size: 40px;
	font-style: normal;
	font-weight: 700;
	line-height: 46px; /* 115% */
}
.boaListBox{
	position:Relative;
	width:100%;
}
.boaListBox ul {
	list-style:none;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: -15px;
    list-style-type: none;
    justify-content: flex-start;
}
.boaListBox li {
	list-style:none;
    position: Relative;
    flex: 0 0 calc(33.3333333% - 30px);
    margin: 15px;
    box-sizing: border-box;
}

.boaCont{
	position:Relative;
	width:100%;
	cursor:pointer;
}
.boaCont:hover .boaTextBox{
	border-right: 1px solid #2A63BA;
	border-bottom: 1px solid #2A63BA;
	border-left: 1px solid #2A63BA;
}

.boaCont figure {
	margin:0;
    width: 100%;
    position: Relative;
    padding-bottom: 56.32%;
    overflow: hidden;
    border-radius: 0rem;
    background: #F4F4F4;
}
.boaCont figure.webtoon{
	padding-bottom: 100.005%;
}

.boaCont figure img {
    max-width: max-content;
    z-index: 3;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}



.boaTextBox{
	padding: 26px 26px 16px 26px;
	width:100%;
	border-right: 1px solid #EEE;
	border-bottom: 1px solid #EEE;
	border-left: 1px solid #EEE;
	background: #FFF;
}
.boaTitle h2{
	min-height:56px;
	margin: 0;
    text-align: left;
    display: block;
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
	color: #000;
	font-family: 'NEXON Lv1 Gothic OTF Bold';
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	line-height: 28px; /* 140% */
}
.boaBot {
	border-top:1px solid #eee;
	padding:16px 0 0 0;
	margin:16px 0 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.boaBot p {
    text-align: left;
    margin: 0;
    color: #000;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.3px;
}
.boaBot span{
	text-align: left;
	margin: 0;
	color: #AAA;
	font-size: 15px;
	font-style: normal;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: -0.3px;
}


.put_contbox {
    width: 100%;
    position: relative;
    margin: 0rem 0 40px 0;
}
.put_cont {
    max-width: 100rem;
    position: relative;
    margin: 0 auto;
}
.putcifame {
    display: block;
    text-align: center;
    position: relative;
    overflow: hidden;
    padding-bottom: 56.18%;
}
.putcifame iframe {
    position: absolute;
    left: 0rem;
    top: 0rem;
    width: 100%;
    height: 100%;
}

.cd_centent img{
	max-width:100%;
}


@media (max-width: 1400px) {
	.boah1 {
		margin: 80px 0 40px 0;
	}
	.boaListBox ul {
		margin: -10px;
	}
	.boaListBox li {
		flex: 0 0 calc(33.3333333% - 20px);
		margin: 10px;
	}
	.boaTextBox {
		padding: 22px 22px 14px 22px;
	}
	.boaTitle h2 {
		min-height: 50px;
		font-size: 19px;
		line-height: 26px;
	}
}

@media (max-width: 991px) {
	.boah1 {
		margin: 60px 0 30px 0;
	}
	.boaListBox ul {
		margin: -10px;
	}
	.boaListBox li {
		flex: 0 0 calc(50% - 20px);
		margin: 10px;
	}
}

@media (max-width: 767px) {
	.media_bg {
		background-image: url(../img/media_bg_mo.webp);
		background-position: top;
	}
	.boaWrap {
		padding: 40px 0 60px 0;
	}
	.boaSideBox {
		padding: 0 16px;
	}
	.boah1 h1 {
		font-size: 30px;
		line-height: 34px;
	}
	.boah1 {
		margin: 30px 0 20px 0;
	}
	
	
	.boaTextBox {
		padding: 16px 14px 14px 14px;
	}
	.boaTitle h2 {
		min-height: 44px;
		font-size: 16px;
		line-height: 22px;
	}
	.boaBot {
		padding: 12px 0 0 0;
		margin: 12px 0 0 0;
	}
	.boaBot p {
		font-size: 13px;
		line-height: 16px;
		letter-spacing: -0.3px;
	}
	.boaBot span {
		font-size: 13px;
		line-height: 16px;
		letter-spacing: -0.3px;
	}
}


@media (max-width: 550px) {
	.boaListBox ul {
		gap:20px;
		margin: 0;
	}
	.boaListBox li {
		flex: 0 0 calc(100% - 0px);
		margin: 0;
	}
}