/* ------------------- mediaqueries ------------------- */
@media screen and (max-height: 1000px) {
	/* NoteBook height */
}
@media screen and (max-height: 620px) {
	/* NoteBook height */
}
@media screen and (max-width: 1440px) {
	/* width */
	.KV{ background-size: auto 100%;}
}
@media screen and (max-width: 960px) {
	/* width */
	

	h4{ height: auto; padding-top: 228px; background-size: auto 228px; background-position: top center;}
	h4.list{ flex-direction: column; padding-top: 228px;}
	h4.list .sort{ margin: var(--pdh) auto;}
	h4.list .sort:hover{ transform: none;}
	h4.list .sort .group{ padding: 8px; border-radius: 3rem;}
	h4.list .sort a{ padding: 8px 30px; border-radius: 3rem;}
	h4.list .searchbox{ width: 100%;}


	/* .vlist{ padding: 0 var(--pd2);} */
	.vlist .item { width: calc(100% / 2 - var(--pd));}
	.vlist .item .h2{ font-size: 1.6rem;}
	.vlist .item .h4{flex-direction: column; align-items: stretch;}
	.vlist .item .h4 .like{ margin-bottom: var(--pdh);}

	.notice{ padding: 0 var(--pd) var(--pd);}



}
@media screen and (max-width: 750px) {
	/* width */
	html, body{ font-size: 20px;} /* 1rem */
	
	footer{height: 185px;}
	.lightbox .contain{ width: 700px; padding: 0 1rem;}
	a.gotop{ width: 96px; height: 96px; font-size: 2rem; line-height: 90px; right: var(--pd); bottom: var(--pd);}
	a.gotop:hover{ opacity: .7; transform: none;}

	.KV{ background-image: url(../Images/KV_m.png); height: 1200px;}
	.KV .container{ left: 0; bottom: 120px; transform: none;}
	.KV .logo{ width: 144px; position: relative; display: block; margin: 0 auto 0 var(--pd);}
	.KV .title{ background-image: url(../Images/KV_title_m.png);}
	.KV li.title::after{ padding-top: 82.844%;}
	.KV li.man{ width: 683px;}
	.KV a.join{background-image: url(../Images/KV_btn_m.png); height: 105px; bottom: -100px;}

	.validatebox img{height: 70px;}

	.lightbox.join iframe{ height: 70vh;}
	.btnbox{ padding: var(--pd);}
	.btnbox a.btn{ width: 100%; }
	.btnbox.main a.btn,
	.lightbox .btnbox a.btn,
	.contain.formbox .btnbox a.btn{ width: 100%; margin: .5rem 0;}
	.lightbox .btnbox,
	.contain.formbox .btnbox{ padding: var(--pd) 0;}
	a.btn2{ width: 100%; padding: 1rem 2rem;}

	div.tablebox li.upload img{ max-width: 80%;}

	/* brand */
	.brand .pic,
	.brand div.tablebox,
	.brand div.tablebox > ul,
	.brand div.tablebox > ul li{ display: block; width: 100%;}
	.brand .pic::before{ width: 198px; height: 142px; bottom: -30px;}
	.brand .pic.p1::before{ left: -60px;}
	.brand .pic.p2::before{ right: -30px;}
	.brand .pic.p3::before{ left: -60px;}
	.brand .pic.p4::before{ right: -30px;}
	.brand div.tablebox > ul > li{ border-width: 2px;}

}