.grid{
		position: absolute;
		opacity: 0;
	}
	.grid.on{
		transition: opacity 300ms ease;
		opacity: 1;		
	}
	.grid-box{
		position: absolute;
	}
	.is-accesed .grid{
		opacity: 1;		
	}
	.is-accesed .grid-box{
		opacity: 0;
	}
	.is-accesed .grid-box.on{
		transition: opacity 300ms ease;
		opacity: 1;
	}
	.show .grid{
		opacity: 1;		
	}


	.grid-inner{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%) rotate(45deg);
		overflow: hidden;
	}
	.grid img{
		width: 100%;
		height: auto;
	}

	.grid span{
		position: absolute;
		top: 50%;
		left: 50%;
		display: block;
		transform: translate(-50%,-50%) rotate(-45deg);
		width: 165px;
		height: 165px;
	}

	.grid-wr .grid-inner{
		transform: translate(-50%,-50%) rotate(135deg);
	}
	.grid-wr span{
		transform: translate(-50%,-50%) rotate(-135deg);
	}

	.grid span{

	}
	.grid figure{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		transition: opacity 800ms linear;
	}
	.grid-motion figure{
		will-change: opacity;
	}
	.grid figure.hide{
		opacity: 0;
	}


	.grid-s,
	.grid-s span{
		width: 165px;
		height: 165px;
	}

	.grid-m,
	.grid-m span{
		width: 356px;
		height: 356px;
	}

	.grid-l,
	.grid-l span{
		width: 546px;
		height: 546px;
	}
	.grid-ll,
	.grid-ll span{
		width: 740px;
		height: 740px;
	}
	.grid-wl,
	.grid-wl span,
	.grid-wr,
	.grid-wr span{
		width: 260px;
		height: 260px;
	}

	.lower #gfooter .bg-wrap{
		display: none;
	}



@media screen and (min-width: 801px) {


	#kv{
		position: relative;
		width: 100%;
		height: 753px;

	}
	#kv-grid{
		position: absolute;
		left: 50%;
		margin: 13px 0 0 -753px;
		width: 1480px;
		height: 753px;
	}


	/* grid-box-1
	------------------------------------------------------------*/

	.sec-1 .grid-box{
		left: 0;
	}
	.sec-1 .grid-sec{
		position: absolute;
		right: 0;
	}
	.sec-2 .grid-box{
		right: 13px;
	}
	.sec-3 .grid-box{
		left: 13px;
	}

	#btm{
		position: absolute;
		top: -572px;
		width: 100%;
	}


	/* bg
	------------------------------------------------------------*/

	.bg{
		position: absolute;
		width: 200vw;
		height: 200vw;
	}
	.bg .paint{
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		width: calc(100% - 370px);
		height: calc(100% - 370px);
		background: #062865;
	}
	.line1{
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
	}
	.line2{
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		width: calc(100% - 180px);
		height: calc(100% - 180px);
		box-sizing: border-box;
	}

	.line1 i:nth-child(1){
		position: absolute;
		display: block;
		width: 100%;
		height: 70px;
		background: #af9340;
	}
	.line2 i:nth-child(1){
		position: absolute;
		display: block;
		width: 100%;
		height: 70px;
		background: #af9340;
	}
	.line1 i:nth-child(2){
		position: absolute;
		display: block;
		width: 70px;
		height: 100%;
		background: #af9340;
	}
	.line2 i:nth-child(2){
		position: absolute;
		display: block;
		width: 70px;
		height: 100%;
		background: #af9340;
	}
	.line1 i.on,
	.line2 i.on{
		transition:height 1000ms linear,width 1000ms linear;
	}
	.line1 i.on.done,
	.line2 i.on.done{
		transition:none
	}

	.line1 i:nth-child(1){
		width: 0;
	}
	.line1 i:nth-child(2){
		height: 0;
	}
	.line2 i:nth-child(1){
		width: 0;
	}
	.line2 i:nth-child(2){
		height: 0;
	}

	.line1 i:nth-child(1).on{
		width: 100%;
	}
	.line1 i:nth-child(2).on{
		height: 100%;
	}
	.line2 i:nth-child(1).on{
		width: 100%;
	}
	.line2 i:nth-child(2).on{
		height: 100%;
	}

	.is-accesed .line1 i:nth-child(1),
	.is-accesed .line2 i:nth-child(1){
		width: 100%;
	}
	.is-accesed .line1 i:nth-child(2),
	.is-accesed .line2 i:nth-child(2){
		height: 100%;
	}


	.bg-wrap{
		position: absolute;
		width: 100%;
	}

	#kv .bg{
		bottom: -180px;
		transform-origin: bottom center;
		transform: rotate(-45deg);
	}
	#kv .line1 i{
		bottom: 0;
		right: 0;
	}
	#kv .line2 i{
		bottom: 0;
		right: 0;
	}
	#kv .bg-wrap{
		top: 500px;
	}



	#gheader .bg-wrap{
		top: 0;
		left: -415px;
	}
	#gheader .bg{
		top: 0;
		left: 0;
		width: 900px;
		height: 200vw;
		transform-origin: top left;
		transform: rotate(-45deg);
	}
	#gheader .line1 i{
		top: 0;
		right: 0;
		height: 100%;
	}
	#gheader .line2 i{
		top: 0;
		right: 0;
		height: 100%;
	}


	#embrem .bg-wrap{
		right: -370px;
	}
	#embrem .bg{
		top: 300px;
		right: 0;
		transform-origin: top right;
		transform: rotate(45deg);
	}
	#embrem .line1 i:nth-child(1){
		top: 0;
		left: 0;
	}
	#embrem .line1 i:nth-child(2){
		right: 0;
		top: 0;
	}

	#embrem .line2 i:nth-child(1){
		top: 0;
		left: 0;
	}
	#embrem .line2 i:nth-child(2){
		right: 0;
		top: 0;
	}
	#gfooter .bg{
		top: -200px;
		left: 50%;
		width: 400vw;
		margin-left: -200vw;
		transform-origin: top center;
		transform: rotate(45deg);
	}
	#gfooter .bg-wrap{
		bottom: 0;
	}

	#gfooter .sec-2 article{
		display: flex;
		justify-content: space-between;
	}
	#gfooter .sec-2 .main-sec{
		position: relative;
		width: 50%;
	}
	#gfooter .sec-2 .grid-sec{
		position: relative;
		width: 50%;
	}


}




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



	#kv{
		position: relative;
		width: 100%;
	}
	#kv .grid-sec-inner{
		position: relative;
		width: 750px;
		height: 1215px;
		transform-origin: top left;
	}
	#kv-grid{
		position: absolute;
		left: 50%;
		margin: 13px 0 0 -753px;
		max-width: 1480px;
		width: 100%;
		height: 753px;
	}



	/* grid-box-1
	------------------------------------------------------------*/
	.grid-box{
		z-index: 100;
	}

	.sec-1 .grid-sec-inner{
		position: relative;
		width: 750px;
		height: 1120px;
		transform-origin: top left;
	}
	.sec-1 .grid-box{
		position: absolute;
		left: 50%;
		margin-left: -273px;
		height: 1120px;
		width: 750px;
	}

	.sec-1 .goods-grid1.grid-box{
		margin: 0 -273px 0 0;
		left: inherit;
		right: 50%;
	}


	.sec-2 .grid-sec-inner{
		position: relative;
		width: 750px;
		height: 1120px;
		transform-origin: top left;
	}
	.sec-2 .grid-box{
		position: absolute;
		right: 50%;
		margin-right: -273px;
		height: 1120px;
		width: 750px;
	}

	.sec-3 .grid-sec-inner{
		position: relative;
		width: 750px;
		height: 1120px;
		transform-origin: top left;
	}
	.sec-3 .grid-box{
		position: absolute;
		left: 50%;
		margin-left: -273px;
		height: 1120px;
		width: 750px;
	}

	#btm{
		position: absolute;
		top: -578px;
		width: 100%;
	}
	#btm .grid-sec-inner{
		transform-origin: center left;
	}

	/* bg
	------------------------------------------------------------*/

	.bg{
		position: absolute;
		width: 200vw;
		height: 200vw;
	}
	.bg .paint{
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		width: calc(100% - 185px);
		height: calc(100% - 185px);
		background: #062865;
	}



	.line1{
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
	}
	.line2{
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		width: calc(100% - 90px);
		height: calc(100% - 90px);
		box-sizing: border-box;
	}

	#gheader .bg .paint{
		width: calc(100% - 130px);
		height: calc(100% - 130px);
	}

	#gheader .line2{
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		width: calc(100% - 64px);
		height: calc(100% - 64px);
		box-sizing: border-box;
	}



	.line1 i:nth-child(1){
		position: absolute;
		display: block;
		background: #af9340;
	}
	.line2 i:nth-child(1){
		position: absolute;
		display: block;
		background: #af9340;
	}
	.line1 i:nth-child(2){
		position: absolute;
		display: block;
		background: #af9340;
	}
	.line2 i:nth-child(2){
		position: absolute;
		display: block;
		background: #af9340;
	}


	#kv .line1 i:nth-child(1){
		height: 0;
		width: 35px;
	}
	#kv .line2 i:nth-child(1){
		height: 0;
		width: 35px;
	}
	#kv .line1 i:nth-child(1).on{
		height: 100%;
	}
	#kv .line2 i:nth-child(1).on{
		height: 100%;
	}
	.is-accesed #kv .line1 i:nth-child(1),
	.is-accesed #kv .line2 i:nth-child(1){
		height: 100%;
	}

	#kv .line1 i{
		top: 0;
		right: 0;
	}
	#kv .line2 i{
		top: 0;
		right: 0;
	}

	#message .line1 i:nth-child(1){
		height: 35px;
		width: 0;
	}
	#message .line2 i:nth-child(1){
		height: 35px;
		width: 0;
	}
	#message .line1 i:nth-child(1).on{
		width: 100%;
	}
	#message .line2 i:nth-child(1).on{
		width: 100%;
	}

	.is-accesed #message .line1 i:nth-child(1),
	.is-accesed #message .line2 i:nth-child(1){
		width: 100%;
	}
	#message .line1 i{
		top: 0;
		left: 0;
	}
	#message .line2 i{
		top: 0;
		left: 0;
	}

	#embrem .line1 i:nth-child(1){
		width: 35px;
		height: 0;
	}
	#embrem .line2 i:nth-child(1){
		width: 35px;
		height: 0;
	}
	#embrem .line1 i:nth-child(1).on{
		height: 100%;
	}
	#embrem .line2 i:nth-child(1).on{
		height: 100%;
	}
	.is-accesed #embrem .line1 i:nth-child(1),
	.is-accesed #embrem .line2 i:nth-child(1){
		height: 100%;
	}
	#embrem .line1 i{
		top: 0;
		right: 0;
	}
	#embrem .line2 i{
		top: 0;
		right: 0;
	}



	#goods .line1 i:nth-child(1){
		height: 35px;
		width: 0;
	}
	#goods .line2 i:nth-child(1){
		height: 35px;
		width: 0;
	}
	#goods .line1 i:nth-child(1).on{
		width: 100%;
	}
	#goods .line2 i:nth-child(1).on{
		width: 100%;
	}
	.is-accesed #goods .line1 i:nth-child(1),
	.is-accesed #goods .line2 i:nth-child(1){
		width: 100%;
	}
	#goods .line1 i{
		top: 0;
		left: 0;
	}
	#goods .line2 i{
		top: 0;
		left: 0;
	}


	#btmarea .line1 i:nth-child(1){
		width: 35px;
		height: 0;
	}
	#btmarea .line2 i:nth-child(1){
		width: 35px;
		height: 0;
	}
	#btmarea .line1 i:nth-child(1).on{
		height: 100%;
	}
	#btmarea .line2 i:nth-child(1).on{
		height: 100%;
	}
	.is-accesed #btmarea .line1 i:nth-child(1),
	.is-accesed #btmarea .line2 i:nth-child(1){
		height: 100%;
	}
	#btmarea .line1 i{
		top: 0;
		right: 0;
	}
	#btmarea .line2 i{
		top: 0;
		right: 0;
	}


	#gheader .line1 i:nth-child(1){
		width: 25px;
		height: 0;
		height: 100%;
	}
	#gheader .line2 i:nth-child(1){
		width: 25px;
		height: 0;
		height: 100%;
	}
	#gheader .line1 i:nth-child(1).on{
		height: 100%;
	}
	#gheader .line2 i:nth-child(1).on{
		height: 100%;
	}
	.is-accesed #gheader .line1 i:nth-child(1),
	.is-accesed #gheader .line2 i:nth-child(1){
		height: 100%;
	}

	#gheader .line1 i{
		top: 0;
		right: 0;
	}
	#gheader .line2 i{
		top: 0;
		right: 0;
	}


	#gfooter .line1 i:nth-child(1){
		height: 35px;
		width: 0;
	}
	#gfooter .line2 i:nth-child(1){
		height: 35px;
		width: 0;
	}
	#gfooter .line1 i:nth-child(1).on{
		width: 100%;
	}
	#gfooter .line2 i:nth-child(1).on{
		width: 100%;
	}
	.is-accesed #gfooter .line1 i:nth-child(1),
	.is-accesed #gfooter .line2 i:nth-child(1){
		width: 100%;
	}

	#gfooter .line1 i{
		top: 0;
		left: 0;
	}
	#gfooter .line2 i{
		top: 0;
		left: 0;
	}


	.line1 i.on,
	.line2 i.on{
		transition:height 500ms linear,width 500ms linear;
	}
	.line1 i.on.done,
	.line2 i.on.done{
		transition:none
	}


	#kv .bg{
		top: 0;
		right: -131px;
		transform: rotate(45deg);
		transform-origin: top right;
	}

	#gheader .bg{
		top: -450px;
		right: 540px;
		width: 100vw;
		height: 300vh;
		transform-origin: top right;
		transform: rotate(-45deg);
	}
	

	#message .bg{
		top: 0;
		left: 0;
		transform: rotate(45deg);
		transform-origin: top left;
	}
	#embrem .bg{
		top: 0;
		right: -131px;
		transform: rotate(45deg);
		transform-origin: top right;
	}
	#projects .bg{
		top: 0;
		left: 0;
		transform: rotate(45deg);
		transform-origin: top left;
	}
/*	#goods .bg{
		top: 0;
		right: -131px;
		transform: rotate(45deg);
		transform-origin: top right;
	}*/
	#goods .bg{
		top: 0;
		left: 0;
		transform: rotate(45deg);
		transform-origin: top left;
	}
	#btmarea .bg{
		top: 0;
		right: -131px;
		transform: rotate(45deg);
		transform-origin: top right;
	}


	#gfooter .bg{
		top: 0;
		left: 0;
		transform: rotate(45deg);
		transform-origin: top left;
	}
	#gfooter .bg-wrap{
		transform: translateY(-100%);

	}
	#gfooter .sec-2 .main-sec{
		position: relative;
	}
	#gfooter .sec-2 .grid-sec{
		position: relative;
	}


	 #gfooter .bg-wrap{
		display: none;
	}



	.bg-wrap{
		position: absolute;
		width: 100%;
		height: 100px;
		overflow: hidden;
	}


}


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


}