.clearfix:after{content:""; display:block; clear:both;}
#wrap, #footer{position: relative; z-index: 5;}

.mgztv_wrap {position: relative;}
.mgztv_wrap *{letter-spacing:-0.5px; box-sizing:border-box; color: #1a1a1a;}
.mgztv_wrap a:hover{text-decoration:none;}
.mgztv_wrap .bgWrap { position: absolute; width: 100%; height: 100%; background: #F3FAFF; overflow: hidden;}
.mgztv_wrap .mgztv_tit { position: relative; margin: 0 auto;padding: 0 16px; padding-top: 30px; }
.mgztv_wrap .mgztv_content { position: relative; margin: 0 auto;padding: 0 16px 30px; margin-top: 30px; }

.mgztv_wrap .bgWrap .bg_c {display: inline-block; width: 169px; height: 174px; right: -30px; top: -10px; position: absolute; transform-origin: 40% 50%; animation:rotate 20s infinite linear;}
.mgztv_wrap .bgWrap .bg_c img{width: 100%; animation:rotate 20s reverse infinite linear;}

@keyframes rotate {
	from { transform: rotate(0);}
	to { transform: rotate(360deg);}
}

.mgztv_wrap .mgztv_tit h3{font-family: 'Noto-B'; font-size: 18px; font-weight: normal;}
.mgztv_wrap .mgztv_tit h5 { font-family: 'Noto-R'; font-size: 14px; font-weight: 400; margin-top: 10px; }
.mgztv_element { width: 100%; height: fit-content; margin-bottom: 20px; background: #fff; border-radius: 10px; background-color: #ffffff99; backdrop-filter: blur(5px);
    border: 1px solid #fff; overflow: hidden; position: relative; .max-height: calc(45.7173vw + 417px);}
.mgztv_element:last-of-type{margin-bottom: 0;}
.mgztv_element_inner{ font-size: 0;}
.mgztv_element .thumbnail_img { display: block; border-radius: 15px; overflow: hidden; margin: 10px 20px 0; font-size: 0;}
.mgztv_element .thumbnail_img img{width: 100%;}
.mgztv_element .ele_tit{font-family: 'Noto-B'; font-size: 16px; text-align: center; margin: 0 20px; padding-top: 20px;}
.mgztv_element .ele_content{font-family: 'Noto-R'; font-size: 14px; margin: 0 20px; padding: 10px 0 20px;}
.ele_prd_wrap{padding: 20px 0; border-top: 1px solid #D8D8D8; position: relative; overflow: hidden;}
.ele_prd_wrap{ max-height: 280px; transition:0.3s;}

.ele_prd_wrap .ele_prd{display: flex; margin: 0 20px; margin-bottom: 10px; height: 70px;}
.ele_prd_wrap .ele_prd:last-of-type{margin-bottom: 0px;}
.ele_prd .prd_img{width: 70px;flex: none;border-radius: 6px;overflow: hidden;}
.ele_prd .prd_img img{width: 100%;}
.ele_prd .prd_info  {  padding: 10px 0px 10px 10px; height: 70px; box-sizing: border-box; }
.ele_prd .prd_name{font-family: 'Noto-R'; font-size: 14px;overflow: hidden; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical; word-break: break-all;}
.ele_prd .prd_price_wrap{ margin-top: 3px;}
.prd_price_wrap .prd_discount{ font-family: 'spoqa B'; font-size: 18px; color: #F14738; float: left; margin-right: 10px; }
.prd_price_wrap .ele_prd_price { float: left; font-family: 'spoqa B'; font-size: 18px; }

.mgztv_element .show_more_btn {width: 100%; height: 120px; position: absolute; left: 0; bottom: 0; z-index: 2; font-size: 0;
    background: linear-gradient(#fff0, #fff 71%, #fff);}
.mgztv_element .show_more_btn span{position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); font-size: 16px; font-family: "Noto-M"; color: #3A3A3A; line-height: 24px;}
.mgztv_element .show_more_btn span i{width: 24px; height: 24px;display: inline-block;background: url(https://image5.compuzone.co.kr/img/images/magazine/down_arrow_24px.png)no-repeat;
    background-size: cover;vertical-align: bottom; margin-left: 4px;}
.mgztv_element .hide_btn{ height: 24px; display: block; width: 100%; text-align: center; margin-top: 10px; display: none;}
.mgztv_element .hide_btn span{font-size: 16px; color: #3A3A3A; line-height: 24px;font-family: "Noto-M";}
.mgztv_element .hide_btn span i{width: 24px; height: 24px;display: inline-block;margin-left: 4px;
    background: url(https://image5.compuzone.co.kr/img/images/magazine/up_arrow_24px.png)no-repeat;
    background-size: cover;vertical-align: bottom; }

@media only screen and (min-width: 768px) {
.mgztv_wrap .mgztv_tit{ max-width: 706px; padding: 30px 0 0;}    
.mgztv_content_wrap{max-width: 706px; margin: 0 auto;}
.mgztv_wrap .mgztv_content  { display: block; width: 706px; padding: 0 0 30px; }
.ele_prd_wrap{ max-height: 280px;}
.mgztv_content .mgztv_element{width: 343px; float: left; transition: 0;}
}