@media screen and (max-width: 1280px) {
}


@media screen and (max-width: 1180px) {
}

@media screen and (max-width: 991.98px) {
}



@media screen and (max-width: 820px) {

	.pc{ display: none; }
	.sp{ display: block; }
		header{ width: 100%; top: 0; }
	header.fixed{ position: unset; }
	header .box{ position: unset; }
	header .box .left{ width: 30%; top: 0; height: 60px; padding: 15px; position: fixed; z-index: 980; }
	header .box .left h1{ display: inline-block; }
	header .box .left h1 img{  object-fit: cover;}
	header .box .right{ padding: 15px; position: fixed; z-index: 999; }
	header .box .container.flex { padding: 0; }
	header .box .right{ z-index: 999; position: fixed; top: 0; right: 50%!important; left: auto!important; transition: 0.3s; width: 50%!important; height: 100vh; transform: translateX(200%); }
	header .box .right.open{ background: #fff; transform: translateX(100%);  }
	header .box .right .modalnav{ padding-top: 60px; overflow: scroll; background: var(--blue-color); height: 100%; position: fixed; top: 0; left: 0; width: 100%; z-index: 998; }
	header .box .right .modalnav ul{ -ms-flex-wrap: wrap; flex-wrap: wrap; }
	header .box .right .modalnav ul li{ width: 100%; margin-bottom: 60px;  }
	header .box .right .modalnav ul li:not(:last-child){ margin-right: 0; }
	header .box .right .modalnav ul li a{ color: var(--main-color); padding-bottom: 0px; font-size: 2rem; }
	header .box .right .nav-box li a .en{ margin-bottom: 10px; }
	header .box .right .modalbtn{ transition: 0.3s; display: block;  position: absolute; right: 100%; top: 0; width: 60px; height: 60px; z-index: 999; }
	header .box .right .modalbtn:before{ content: ""; transition: 0.3s; position: absolute; width: 23px; height: 2px; background: #fff; top: 25px; left: 0; right: 0; margin: auto; }
	header .box .right .modalbtn:after{ content: ""; transition: 0.3s; position: absolute; width: 23px; height: 2px; background: #fff; bottom: 25px; left: 0; right: 0; margin: auto; }
	header .box .right .modalbtn.active{ background: none; }
	header .box .right .modalbtn.active:before{ -webkit-transform: rotate(45deg); transform: rotate(45deg); top: 29px; }
	header .box .right .modalbtn.active:after{ -webkit-transform: rotate(-45deg); transform: rotate(-45deg); bottom: 29px; }
	header .box .right .nav-box{ margin-top: 0px; }
	.black-bg { display: none; position: fixed; left: 0; top: 0; bottom: 0; right: 0; width: 100vw; height: 100vh; z-index: 990; background-color: #000; opacity: 0; visibility: hidden; transition: all .3s; cursor: pointer; }
	.nav-open .black-bg { display: block; opacity: .4; visibility: visible; }
}

@media screen and (max-width: 768px) {
}


@media screen and (max-width: 640px) {

	.container { padding: 0 15px; }

	header .box .container.flex{ padding: 0 15px; }
	header .box .right{ right: 70%!important; width: 70%!important; }

}


@media screen and (max-width: 420px) {
}