/* ----------basic -------------- */
	body {overflow: hidden; }
	body.loading-done {overflow: auto; }
	.skin_loading {
		position: fixed;
		top: 0px;
		left: 0px;
		bottom: 0px;
		right: 0px;
		opacity: 1;
		background: #961e23;
		z-index: 9999;
	}
	.loading-done .skin_loading {
		opacity: 0;
		pointer-events: none;
	}
	.skin_loading img {
		position: fixed;
		margin: -120px 0 0 -78px;
		top: 50%;
		left: 50%;
		animation: skin_shiny 2s linear alternate infinite;
		-webkit-animation: skin_shiny 2s linear alternate infinite;
	}
	.nav_section.nav_button {background-color: rgba(255, 255, 255, .8); }
	.anim_nav .pv_menu {background-color: transparent; }
	.anim_nav.on .pv_menu {background-color: rgba(255, 255, 255, .9); }
	.anim_nav.on .nav_section.nav_button {background-color: transparent; }
/* -----center -------- */
	.skin_fix {
		width: 100%;
		display: none;
		height: 0;
		background-image: url(img/bg.jpg);
		background-size: cover;
		background-position: center;
		position: relative;
		z-index: 1001;
	}
	.skin_fix.skinShow {
		display: block;
		height: 100vh;
	}
	.skin_fix .skin_center {
		width: 54%;
		height: 0;
		padding-bottom: 41.6%;
		position: absolute;
		top: 0;right: 0;bottom: 0;left: 0;
		margin:auto;
		overflow: hidden;
	}
	.loading-done .skin_fix .skin_center .main svg{
		stroke-dasharray: 1200px;
    	stroke-dashoffset: 1200px;
		animation-name: circle;
		animation-duration: 2.2s;
		animation-timing-function:linear;
		animation-delay: 0;
    	animation-iteration-count: 1;
    	animation-fill-mode: forwards;
	}
    .loading-done .skin_fix .skin_center img.bg,
    .loading-done .skin_fix .skin_center img.txt{
		width: 100%;
		height: 100%;
		max-width: 100%;
		max-height: 100%;
		opacity: 0;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		position: absolute;
		top: 0;right: 0;bottom: 0;left: 0;
		margin:auto;
		user-select: none;
		animation-name: center_img;
		animation-duration: 2.5s;
		animation-timing-function:linear;
		animation-delay: .5s;
    	animation-fill-mode: forwards;

	}
    .loading-done .skin_fix .skin_center .note{
    	opacity: 0;
    	animation-name: center_img;
		animation-duration: .2s;
		animation-timing-function:linear;
		animation-delay: 1s;
    	animation-fill-mode: forwards;
    }
    .skin_fix .skin_center .note img{
    	position: absolute;
    	animation-name: note;
    	animation-iteration-count:infinite;
    	animation-timing-function:linear;
    }
	.skin_fix .skin_center img.note01{
		width: 4%;
	    left: 37%;
	    bottom: 23%;
		animation-duration: 1.5s;
		animation-delay: 0s;
	}
	.skin_fix .skin_center img.note02{
		width: 3.3%;
	    left: 41%;
	    bottom: 25%;
		animation-duration: 1.5s;
		animation-delay: .3s;
	}
	.skin_fix .skin_center img.note03{
		width: 5%;
	    left: 45%;
	    bottom: 27%;
	    animation-duration: 1.5s;
		animation-delay: .9s;
	}
	.skin_fix .skin_center img.note04{
		width: 3.3%;
	    left: 50%;
	    bottom: 25%;
	    animation-duration: 1.5s;
		animation-delay: 1.2s;
	}
	.skin_fix .skin_center img.note05{
		width: 4%;
	    left: 54%;
	    bottom: 26%;
	    animation-duration: 1.5s;
		animation-delay: .6s;
	}
	.skin_fix .skin_center img.note06{
		width: 5.2%;
	    left: 57%;
	    bottom: 22%;
	    animation-duration: 1.5s;
		animation-delay: 1.5s;
	}
	@keyframes circle{
    0% {
    	stroke-dashoffset: 1200px;
        }
    100%{
		stroke-dashoffset: 0;
        }
    }
	@keyframes center_img{
    0% {
    	opacity: 0;
        }
    100%{
		opacity: 1;
        }
    }
	@keyframes note{
    0% {
    	-moz-transform:translateY(10%);
		-webkit-transform:translateY(10%);
		-o-transform:translateY(10%);
		-ms-transform:translateY(10%);
		transform:translateY(10%);
        }
    50%{
		-moz-transform:translateY(-10%);
		-webkit-transform:translateY(-10%);
		-o-transform:translateY(-10%);
		-ms-transform:translateY(-10%);
		transform:translateY(-10%);
        }
    100%{
		-moz-transform:translateY(10%);
		-webkit-transform:translateY(10%);
		-o-transform:translateY(10%);
		-ms-transform:translateY(10%);
		transform:translateY(10%);
        }
    }
/* -----cover --------- */
	.skin_anim {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		pointer-events: none;
		opacity: 0;
		z-index: 1002;
	}
	.skin_anim img {
		position: absolute;
	}
	.skin_anim img.skin_anim_img01 {
		width: 24%;
		top: 0;
		left: 0;
		transform-origin: left top;
	}
	.skin_anim img.skin_anim_img02 {
		width: 24%;
		top: 0;
		right: 0;
		transform-origin: right top;
	}
	.skin_anim img.skin_anim_img03 {
		    width: 42vw;
		    bottom: -21vw;
		    left: -21vw;
		-webkit-animation: flower 16s infinite linear;
		-moz-animation: flower 16s infinite linear;
		-o-animation: flower 16s infinite linear;
		animation: flower 16s infinite linear;
		-webkit-transition: all .25s ease;
		   -moz-transition: all .25s ease;
		    -ms-transition: all .25s ease;
		     -o-transition: all .25s ease;
		        transition: all .25s ease;
	}
	.skin_anim img.skin_anim_img04 {
		width: 42vw;
		bottom: -21vw;
		right: -21vw;
		-webkit-animation: flower02 16s infinite linear;
		-moz-animation: flower02 16s infinite linear;
		-o-animation: flower02 16s infinite linear;
		animation: flower02 16s infinite linear;
		-webkit-transition: all .25s ease;
		   -moz-transition: all .25s ease;
		    -ms-transition: all .25s ease;
		     -o-transition: all .25s ease;
		        transition: all .25s ease;
	}
	@-webkit-keyframes flower {
		from {
			-webkit-transform: rotate(0deg);
		}
		to {
			-webkit-transform: rotate(360deg);
		}
	}
	@keyframes flower {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(360deg);
		}
	}
	@-webkit-keyframes flower02 {
		from {
			-webkit-transform: rotate(360deg);
		}
		to {
			-webkit-transform: rotate(0deg);
		}
	}
	@keyframes flower02 {
		from {
			transform: rotate(360deg);
		}
		to {
			transform: rotate(0deg);
		}
	}
	.loading-done .skin_anim {
		/*opacity: 1;*/
		-webkit-animation: fadeIn .8s forwards;
		-o-animation: fadeIn .8s forwards;
		animation: fadeIn .8s forwards;
	}
	@keyframes fadeIn{
		to{opacity: 1;}
	}
/* -----playbar ------- */
	.skin_playbar {
		width: 100%;
		height: 100vh;
		position: fixed;
		left: 0;
		bottom: 65px;
		pointer-events: none;
		z-index: 100;
		-webkit-transition: all 0.8s 0.15s cubic-bezier(.4, 0, 0, 1);
		-moz-transition: all 0.8s 0.15s cubic-bezier(.4, 0, 0, 1);
		-ms-transition: all 0.8s 0.15s cubic-bezier(.4, 0, 0, 1);
		-o-transition: all 0.8s 0.15s cubic-bezier(.4, 0, 0, 1);
		transition: all 0.8s 0.15s cubic-bezier(.4, 0, 0, 1);
	}
	.skin_playbar .img_playbar {
		position: absolute;
		bottom: -15%;
		left: 0;
		width: 100%;
		opacity: 0;
	}
	.skin_playbar.moved .img_playbar {
		bottom: 0;
		opacity: 1;
	}
	.video-js .vjs-control-bar {
		/*bottom: -15% !important;*/
	}
	.video-js .vjs-control-bar.moved {
		/*bottom: 0 !important;*/
	}
	.video-js .vjs-control-bar.vjs-up{
		/*bottom: 89px !important;*/
	}
/* ----------animation ---------- */
	.skin_loading,
	.skin_loading img,
	.skin_fix,
	.skin_center,
	.skin_anim,
	.skin_anim img,
	.skin_playbar .img_playbar,
	.vjs-control-bar,
	.skin_snow {
		transition: all .6s 0s;
		-webkit-transition: all .6s 0s;
		-moz-transition: all .6s 0s;
		-ms-transition: all .6s 0s;
		-o-transition: all .6s 0s;
	}

	.skin_fix.moved img,
	.skin_anim.moved img {
		transition: all .6s 0s;
		-webkit-transition: all .6s 0s;
		-moz-transition: all .6s 0s;
		-ms-transition: all .6s 0s;
		-o-transition: all .6s 0s;
	}
	.skin_fix.moved .skin_center {
		-ms-transform: scale(0.6);
		-webkit-transform: scale(0.6);
		transform: scale(0.6);
	}
	.skin_anim.moved img.skin_anim_img01 {
		-ms-transform: translate(-8%, -7%);
		-webkit-transform: translate(-8%, -7%);
		transform: translate(-8%, -7%);
	}
	.skin_anim.moved img.skin_anim_img02 {
		-ms-transform: translate(7%, -9%);
		-webkit-transform: translate(7%, -9%);
		transform: translate(7%, -9%);
	}
	.skin_anim.moved img.skin_anim_img03 {
		opacity: 0;
	}
	.skin_anim.moved img.skin_anim_img04 {
		opacity: 0;
	}
	.skin_anim.hide{z-index: 2; }
	.skin_anim.hide img.skin_anim_img01 {
		-ms-transform: scale(.5);
		-webkit-transform: scale(.5);
		transform: scale(.5);
	}
	.skin_anim.hide img.skin_anim_img02 {
		-ms-transform: scale(.5);
		-webkit-transform: scale(.5);
		transform: scale(.5);
	}
	.skin_anim.hide img.skin_anim_img03 {
		-ms-transform: scale(0);
		-webkit-transform: scale(0);
		transform: scale(0);
	}
	.skin_anim.hide img.skin_anim_img04 {
		-ms-transform: scale(0);
		-webkit-transform: scale(0);
		transform: scale(0);
	}
/* ---------- KEYFRAMES --------- */
	@-webkit-keyframes skin_effect {
		0% {
			opacity: 0;
			top: 0;
		}
		20% {opacity: 1; }
		80% {opacity: 1; }
		100% {
			opacity: 0;
			top: 90%;
		}
	}
	@keyframes skin_effect {
		0% {
			opacity: 0;
			top: 0;
		}
		20% {opacity: 1; }
		80% {opacity: 1; }
		100% {
			opacity: 0;
			top: 90%;
		}
	}

	@-webkit-keyframes skin_shiny {
		0% {opacity: .3; }
		100% {opacity: 1; }
	}
	@keyframes skin_shiny {
		0% {opacity: .3; }
		100% {opacity: 1; }
	}

	@-webkit-keyframes skin_circle_right {
		0% {
			opacity: 0;
			-webkit-transform: rotate(0deg);
		}
		100% {
			opacity: 0;
			-webkit-transform: rotate(360deg);
		}
	}
	@keyframes skin_circle_right {
		0% {
			-webkit-transform: rotate(0deg);
			-moz-transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			-o-transform: rotate(0deg);
			transform: rotate(0deg);
		}
		100% {
			-webkit-transform: rotate(360deg);
			-moz-transform: rotate(360deg);
			-ms-transform: rotate(360deg);
			-o-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}

	@-webkit-keyframes skin_circle_left {
		0% {
			opacity: 0;
			-webkit-transform: rotate(0deg);
		}
		100% {
			opacity: 0;
			-webkit-transform: rotate(-360deg);
		}
	}
	@keyframes skin_circle_left {
		0% {
			-webkit-transform: rotate(0deg);
			-moz-transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			-o-transform: rotate(0deg);
			transform: rotate(0deg);
		}
		100% {
			-webkit-transform: rotate(-360deg);
			-moz-transform: rotate(-360deg);
			-ms-transform: rotate(-360deg);
			-o-transform: rotate(-360deg);
			transform: rotate(-360deg);
		}
	}

	@-webkit-keyframes snowing{
		0%,
		100%{
			opacity: .2;
			-webkit-transform: translateY(-100%);
		}
		30%{opacity: .5; }
		50%{opacity: .2; }
		99.9999%{
			opacity: .1;
			-webkit-transform: translateY(0);
		}
	}
	@keyframes snowing{
		0%,
		100%{
			opacity: .2;
			-webkit-transform: translateY(-100%);
			   -moz-transform: translateY(-100%);
			    -ms-transform: translateY(-100%);
			     -o-transform: translateY(-100%);
			        transform: translateY(-100%);
		}
		30%{opacity: .5; }
		50%{opacity: .2; }
		99.9999%{
			opacity: .1;
			-webkit-transform: translateY(0);
			   -moz-transform: translateY(0);
			    -ms-transform: translateY(0);
			     -o-transform: translateY(0);
			        transform: translateY(0);
		}
	}

	@-webkit-keyframes skin_bg{
		0%{
			opacity: 0;
			-webkit-transform: translate3d(0,100%,0);
		}
		50%{
			opacity: 1;
			-webkit-transform: translate3d(0,1%,0);
		}
		80%{
			opacity: 1;
			-webkit-transform: translate3d(0,.5%,0);
		}
		100%{
			opacity: 1;
			-webkit-transform: translateY(0,0,0);
		}
	}
	@keyframes skin_bg{
		0%{
			opacity: 0;
			-webkit-transform: translate3d(0,100%,0);
			   -moz-transform: translate3d(0,100%,0);
			    -ms-transform: translate3d(0,100%,0);
			     -o-transform: translate3d(0,100%,0);
			        transform: translate3d(0,100%,0);
		}
		50%{
			opacity: 1;
			-webkit-transform: translate3d(0,1%,0);
			   -moz-transform: translate3d(0,1%,0);
			    -ms-transform: translate3d(0,1%,0);
			     -o-transform: translate3d(0,1%,0);
			        transform: translate3d(0,1%,0);
		}
		80%{
			opacity: 1;
			-webkit-transform: translate3d(0,.5%,0);
			   -moz-transform: translate3d(0,.5%,0);
			    -ms-transform: translate3d(0,.5%,0);
			     -o-transform: translate3d(0,.5%,0);
			        transform: translate3d(0,.5%,0);
		}
		100%{
			opacity: 1;
			-webkit-transform: translateY(0,0,0);
			   -moz-transform: translateY(0,0,0);
			    -ms-transform: translateY(0,0,0);
			     -o-transform: translateY(0,0,0);
			        transform: translateY(0,0,0);
		}
	}

	@-webkit-keyframes bell{
		0%,
		100%{-webkit-transform: rotate(-10deg); }
		20%{-webkit-transform: rotate(25deg); }
		70%{-webkit-transform: rotate(-25deg); }
	}
	@keyframes bell{
		0%,
		100%{
			-webkit-transform: rotate(-10deg);
			   -moz-transform: rotate(-10deg);
			    -ms-transform: rotate(-10deg);
			     -o-transform: rotate(-10deg);
			        transform: rotate(-10deg);
		}
		20%{
			-webkit-transform: rotate(25deg);
			   -moz-transform: rotate(25deg);
			    -ms-transform: rotate(25deg);
			     -o-transform: rotate(25deg);
			        transform: rotate(25deg);
		}
		70%{
			-webkit-transform: rotate(-25deg);
			   -moz-transform: rotate(-25deg);
			    -ms-transform: rotate(-25deg);
			     -o-transform: rotate(-25deg);
			        transform: rotate(-25deg);
		}
	}
	@keyframes sled{
		0%,
		100%{
			-webkit-transform:rotate(-1deg);
			   -moz-transform:rotate(-1deg);
			    -ms-transform:rotate(-1deg);
			     -o-transform:rotate(-1deg);
			        transform:rotate(-1deg);
		}
		20%{
			-webkit-transform:rotate(5deg);
			   -moz-transform:rotate(5deg);
			    -ms-transform:rotate(5deg);
			     -o-transform:rotate(5deg);
			        transform:rotate(5deg);
		}
		70%{
			-webkit-transform:rotate(0deg);
			   -moz-transform:rotate(0deg);
			    -ms-transform:rotate(0deg);
			     -o-transform:rotate(0deg);
			        transform:rotate(0deg);
		}
	}
/* ---------- RWD --------------- */
	@media screen and (max-width: 768px) {
		.skin_fix .skin_center{
			width: 70%;
    		padding-bottom: 54%;
		}
		.skin_anim img.skin_anim_img01,
		.skin_anim img.skin_anim_img02 {
		    width: 36%;
		}
		.skin_anim img.skin_anim_img03 {
		    width: 60vw;
		    bottom: -30vw;
		    left: -30vw;
		}
		.skin_anim img.skin_anim_img04 {
		    width: 60vw;
		    bottom: -30vw;
		    right: -30vw;
		}
	}
	@media screen and (max-width: 620px) {
	}
	@media screen and (max-width: 480px) {
		.skin_fix .skin_center {
		    width: 90%;
		    padding-bottom: 69.5%;
		}
		.skin_anim img.skin_anim_img01,
		.skin_anim img.skin_anim_img02 {
		    width: 42%;
		}
	}