/*==================== KV ==========================*/ #KV .mob{display: none;} #KV .pc{display: block;} #KV{height: 100vh; width: 100%; position: relative;background-color:#1E122D ;} #KV_parallax{height: 100vh; width: 100%;position: relative; overflow: hidden;} #KV_parallax #canvas-basic {position: absolute;display: block;width: 100%;height: 100vh;top: 0;right: 0;bottom: 0;left: 0;z-index: 1;} #KV_parallax .mainttl a.kvbtn{border-bottom: 4px solid #d32f79;color:#fff;font-size: 30px;letter-spacing:2px;display:block; text-align: center; line-height: 80px;width: 300px; height: 80px;margin:0 auto; background: #8c1c87; /* Old browsers */ background: -moz-linear-gradient(left, #8c1c87 0%, #efa33d 84%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #8c1c87 0%,#efa33d 84%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #8c1c87 0%,#efa33d 84%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8c1c87', endColorstr='#efa33d',GradientType=1 ); /* IE6-9 */ animation: pulse 0.6s infinite alternate;animation-delay:2s; animation-fill-mode:backwards;} #KV_parallax .mainttl{width: 800px; position: absolute;top:15%;left:50%; margin-left: -400px; z-index:1000; } #KV_parallax .left_t{width: 1500px; height: 847px;background: url(../images/index/left_t.png);background-size: cover;position: absolute; top:-18%;left: -10%;z-index: 10;} #KV_parallax .left_t2{width: 1200px; height: 972px;background: url(../images/index/left_t2.png);background-size: cover;position: absolute; top:5%;left: -10%;z-index: 11;} #KV_parallax .right_t{width: 1400px; height: 725px;background: url(../images/index/right_t.png);background-size: cover;position: absolute; top:-18%;right: -15%;z-index: 10;} #KV_parallax .right_t2{width: 1200px; height: 698px;background: url(../images/index/right_t2.png);background-size: cover;position: absolute; top:-5%;right: -40%;z-index: 9;} #KV_parallax .left_feather{width: 420px; height: 334px;background: url(../images/index/left_feather.png);background-size: cover;position: absolute; z-index:29 ;bottom:20%;left: 2%;animation: floating 1s infinite alternate;-webkit-animation: floating 2s infinite alternate;} #KV_parallax .glass{width: 320px; height: 272px;background: url(../images/glass.png);background-size: cover;position: absolute; z-index:29 ;bottom:-1%;left: 3%; animation: pulse 0.6s infinite alternate;-webkit-animation: pulse 0.6s infinite alternate;} #KV_parallax .left_b{width: 1200px; height: 588px;background: url(../images/index/left_b.png); background-size: cover; position: absolute; bottom:-20%;left: -11%;z-index: 10;} #KV_parallax .peace{width: 220px; height: 220px;background: url(../images/peace.png);background-size: cover;position: absolute;bottom:2%;right: 35%; z-index: 12;-webkit-animation: spin 5s 0s infinite;-o-animation: spin 5s 0s infinite; animation: spin 5s 0s infinite;} #KV_parallax .lip{width:250px; height: 356px;background: url(../images/index/lipstick.png);background-size: cover;position: absolute;bottom:4%;right: 26%; z-index:9 ;animation: floating 2s infinite alternate;} #KV_parallax .tree{width: 400px;height: 398px; background:url(../images/header_tree2.png); background-size: cover;position: absolute; bottom:15%;right: 12%;z-index: 8;} #KV_parallax .feather{width: 300px; height: 347px;background: url(../images/feather02.png);background-size: cover;position: absolute; z-index:29 ;bottom:15%;right: 2%;animation: floating 4s infinite alternate;-webkit-animation: floating 2s infinite alternate;} #KV_parallax .right_b{width: 1600px; height: 722px;background: url(../images/index/right_b.png);background-size: cover;position: absolute; bottom:-17%;right: -10%;z-index: 10;} #KV_parallax .right_b2{width: 900px; height: 502px;background: url(../images/index/right_b2.png);background-size: cover;position: absolute; bottom:-12%;right: 20%;z-index: 7;} #KV_parallax .star{width: 800px;height: 144px; background:url(../images/star.png); position: absolute; top:30px;left: 15%;animation: flash 5s infinite alternate;z-index: 2;} #KV_parallax .star2{width: 800px;height: 144px; background:url(../images/star.png); position: absolute; top:0;right:5%;animation: flash 3s infinite alternate;z-index: 2;} @media screen and (max-width: 1930px) { #KV_parallax .left_t{width: 900px; height: 508px;background: url(../images/index/left_t.png);background-size: cover;position: absolute; top:-18%;left: -5%;z-index: 10;} #KV_parallax .left_t2{width: 800px; height: 648px;background: url(../images/index/left_t2.png);background-size: cover;position: absolute; top:5%;left: -15%;z-index: 11;} #KV_parallax .right_t{width: 800px; height: 415px;background: url(../images/index/right_t.png);background-size: cover;position: absolute; top:-18%;right: -8%;z-index: 10;} #KV_parallax .right_t2{width: 800px; height: 465px;background: url(../images/index/right_t2.png);background-size: cover;position: absolute; top:-5%;right: -30%;z-index: 9;} #KV_parallax .left_feather{width: 300px; height: 240px;background: url(../images/index/left_feather.png);background-size: cover;position: absolute; z-index:29 ;bottom:25%;left: 2%;animation: floating 1s infinite alternate;-webkit-animation: floating 2s infinite alternate;} #KV_parallax .glass{width: 220px; height: 187px;background: url(../images/glass.png);background-size: cover;position: absolute; z-index:29 ;bottom:-1%;left: 3%; animation: pulse 0.6s infinite alternate;-webkit-animation: pulse 0.6s infinite alternate;} #KV_parallax .left_b{width: 850px; height: 417px;background: url(../images/index/left_b.png); background-size: cover; position: absolute; bottom:-22%;left: -11%;z-index: 10;} #KV_parallax .peace{width: 140px; height: 140px;background: url(../images/peace.png);background-size: cover;position: absolute;bottom:2%;right: 35%; z-index: 12;-webkit-animation: spin 5s 0s infinite;-o-animation: spin 5s 0s infinite; animation: spin 5s 0s infinite;} #KV_parallax .lip{width: 150px; height: 267px;background: url(../images/index/lipstick.png);background-size: cover;position: absolute;bottom:-3%;right: 22%; z-index:9 ;animation: floating 2s infinite alternate;} #KV_parallax .tree{width: 280px;height: 279px; background:url(../images/header_tree2.png); background-size: cover;position: absolute; bottom:10%;right: 6%;z-index: 8;} #KV_parallax .feather{width: 200px; height: 231px;background: url(../images/feather02.png);background-size: cover;position: absolute; z-index:29 ;bottom:25%;right: 2%;animation: floating 4s infinite alternate;-webkit-animation: floating 2s infinite alternate;} #KV_parallax .right_b{width: 1100px; height: 497px;background: url(../images/index/right_b.png);background-size: cover;position: absolute; bottom:-16%;right: -20%;z-index: 10;} #KV_parallax .right_b2{width: 650px; height: 362px;background: url(../images/index/right_b2.png);background-size: cover;position: absolute; bottom:-12%;right: 10%;z-index: 7;} #KV_parallax .star{width: 682px;height: 123px; background:url(../images/star.png); position: absolute; top:30px;left: 15%;animation: flash 5s infinite alternate;z-index: 2;} #KV_parallax .star2{width: 682px;height: 123px; background:url(../images/star.png); position: absolute; top:0;right:5%;animation: flash 3s infinite alternate;z-index: 2;} #KV_parallax .mainttl{width: 500px; position: absolute;top:15%;left:50%; margin-left: -250px; z-index:1000; } #KV_parallax .mainttl h1{margin-bottom: 5%;} #KV_parallax .mainttl a.kvbtn{border-bottom: 4px solid #d32f79;color:#fff;font-size: 22px;letter-spacing:2px;display:block; text-align: center; line-height: 55px;width: 200px; height: 55px;margin:0 auto; } } @media screen and (max-width: 1600px) { #KV_parallax .mainttl{width: 450px; position: absolute;top:10%;left:50%; margin-left: -220px; z-index: 1000;} #KV_parallax .right_t{width: 750px; height: 389px; top:-18%;right: -15%;z-index: 10;} #KV_parallax .right_t2{width: 800px; height: 465px;top:-10%;right: -40%;z-index: 9;} #KV_parallax .left_t{width: 800px; height: 452px;top:-22%;left: -15%;} #KV_parallax .left_t2{width: 800px; height: 648px;top:-4%;left: -25%;} #KV_parallax .peace{width: 130px; height: 130px;bottom:2%;right: 35%;} #KV_parallax .lip{width: 100px; height: 178px;bottom:4%;right: 25%; animation: floating 2s infinite alternate;} #KV_parallax .tree{width: 220px;height: 219px; bottom:18%;right: 10%;z-index: 9;} #KV_parallax .feather{width: 160px; height: 185px;bottom:5%;right: 4%;} #KV_parallax .left_feather{width: 280px; height: 224px;bottom:25%;left: 0%;} #KV_parallax .glass{width: 200px; height: 170px;bottom:2%;left: 5%;} #KV_parallax .left_b{width: 750px; height: 367px;bottom:-22%;left: -15%;} #KV_parallax .right_b{width: 1100px; height: 496px;bottom:-20%;right: -25%;} #KV_parallax .right_b2{width: 500px; height: 279px;bottom:-10%;right: 15%;} } @media screen and (max-width: 1439px) { #KV_parallax .mainttl{width: 400px; position: absolute;top:20%;left:50%; margin-left: -200px; z-index: 1000;} #KV_parallax .right_t{width: 750px; height: 389px; top:-18%;right: -10%;z-index: 10;} #KV_parallax .right_t2{width: 800px; height: 465px;top:-10%;right: -50%;z-index: 9;} #KV_parallax .left_t{width: 800px; height: 452px; top:-22%;left: -15%;} #KV_parallax .left_t2{width: 600px; height: 485px;top:10%;right: -30%;} #KV_parallax .peace{width: 130px; height: 130px;bottom:2%;right: 30%;} #KV_parallax .lip{width: 100px; height: 178px;bottom:8%;right: 23%; animation: floating 2s infinite alternate;} #KV_parallax .tree{width: 220px;height: 219px; bottom:19%;right: 5%;z-index: 9;} #KV_parallax .feather{width: 160px; height: 185px;bottom:-5%;right: 10%;} #KV_parallax .left_feather{width: 280px; height: 224px;bottom:25%;left: 0%;} #KV_parallax .glass{width: 200px; height: 170px;bottom:2%;left: 5%;} #KV_parallax .left_b{width: 680px; height: 333px;bottom:-22%;left: -10%;} #KV_parallax .right_b{width: 1000px; height: 452px;bottom:-20%;right: -15%;} #KV_parallax .right_b2{width: 550px; height: 308px;bottom:-15%;right: 10%;} } @media screen and (max-width: 1300px) { #KV_parallax .mainttl{width: 480px; position: absolute;top:15%;left:50%; margin-left: -240px; z-index: 1000;} #KV_parallax .left_t{width: 800px; height: 452px;top:-22%;left: -15%;} #KV_parallax .left_t2{width: 800px; height: 648px;top:5%;left: -25%;} #KV_parallax .right_t{width: 750px; height: 389px; top:-18%;right: -10%;z-index: 10;} #KV_parallax .right_t2{width: 800px; height: 465px;top:-10%;right: -40%;z-index: 9;} #KV_parallax .left_feather{width: 320px; height: 256px;bottom:25%;left: 0%;} #KV_parallax .glass{width: 200px; height: 170px;bottom:4%;left: 5%;} #KV_parallax .left_b{width: 750px; height: 367px;bottom:-15%;left: -15%;} #KV_parallax .tree{bottom:13%;right: 6%;z-index: 9;} #KV_parallax .lip{bottom:2%;right: 26%; } #KV_parallax .peace{width: 130px; height: 130px;bottom:2%;right: 35%;} #KV_parallax .feather{width: 200px; height: 231px;bottom:28%;right: 2%;} #KV_parallax .right_b{width: 1000px; height: 452px;bottom:-17%;right: -20%;} #KV_parallax .right_b2{width: 550px; height: 308px;bottom:2%;right: -5%;} } @media screen and (max-width: 1260px) { #KV_parallax .mainttl{width: 400px; position: absolute;top:15%;left:50%; margin-left: -200px; z-index: 1000;} #KV_parallax .left_t{width: 500px; height: 283px; top:-12%;left: -5%;} #KV_parallax .left_t2{width: 500px; height: 405px;top:5%;right: -10%;} #KV_parallax .right_t{width: 600px; height: 312px; top:-18%;right: -10%;z-index: 10;} #KV_parallax .right_t2{width: 500px; height: 290px;top:5%;right: -30%;z-index: 9;} #KV_parallax .left_feather{width: 250px; height: 200px;bottom:25%;left: 0%;} #KV_parallax .glass{width: 150px; height: 127px;bottom:2%;left: 5%;} #KV_parallax .left_b{width: 500px; height: 244px;bottom:-15%;left: -10%;} #KV_parallax .feather{width: 150px; height: 174px;bottom:28%;right: 2%;} #KV_parallax .tree{width: 120px;height: 119px; bottom:18%;right: 10%;z-index: 9;} #KV_parallax .lip{width: 100px; height: 178px;bottom:2%;right: 26%; } #KV_parallax .peace{width: 90px; height: 90px;bottom:2%;right: 43%;} #KV_parallax .right_b{width: 700px; height: 316px;bottom:-9%;right: -20%;} #KV_parallax .right_b2{width: 350px; height: 196px;bottom:-5%;right: 8%;} } @media screen and (max-width: 991px) { #KV_parallax .mainttl{width: 280px; position: absolute;top:15%;left:50%; margin-left: -140px; z-index: 1000;} #KV_parallax .mainttl a.kvbtn{font-size: 20px; line-height: 50px;width: 150px; height: 50px;} #KV_parallax .left_t{width: 500px; height: 283px; top:-12%;left: -20%;} #KV_parallax .left_t2{display:none;} #KV_parallax .right_t{width: 600px; height: 312px; top:-18%;right: -30%;z-index: 10;} #KV_parallax .right_t2{display:none;} #KV_parallax .left_feather{width: 250px; height: 200px;bottom:25%;left: 0%;} #KV_parallax .glass{display:none;} #KV_parallax .left_b{width: 500px; height: 244px;bottom:-20%;left: -30%;} #KV_parallax .feather{width: 150px; height: 174px;bottom:28%;right: 2%;} #KV_parallax .tree{width: 120px;height: 119px; bottom:16%;right: 10%;z-index: 9;} #KV_parallax .lip{width: 100px; height: 178px;bottom:2%;right: 26%; } #KV_parallax .peace{width: 90px; height: 90px;bottom:2%;right: 53%;} #KV_parallax .right_b{width: 700px; height: 316px;bottom:-15%;right: -30%;} #KV_parallax .right_b2{width: 350px; height: 196px;bottom:-15%;right: 18%;} } @media screen and (max-width: 790px) { #KV{height: 100vh; width: 100%; position: relative;background: url(../images/kv_m.jpg) center center; background-size: cover;} #KV .mob{display: block;height: 100vh; width: 100%; position: relative;overflow: hidden;} #KV .pc{display: none;} .peace{width: 180px; height: 180px;background: url(../images/peace.png);background-size: cover;position: absolute;top:20%;left: -8%; -webkit-animation: spin 5s 0s infinite;-o-animation: spin 5s 0s infinite; animation: spin 5s 0s infinite;} .glass{width: 200px; height: 170px;background: url(../images/glass.png);background-size: cover;position: absolute; top:25%;right: -10%; animation: pulse 0.6s infinite alternate;-webkit-animation: pulse 0.6s infinite alternate;} .feather01{width: 149px; height: 165px;background: url(../images/feather01.png);background-size: cover;position: absolute; bottom:25%;left: -2%;animation: floating 3s infinite alternate;-webkit-animation: floating 3s infinite alternate;} .feather02{width: 130px; height: 150px;background: url(../images/feather02.png);background-size: cover;position: absolute; bottom:20%;right: 0%;animation: floating 2s infinite alternate;-webkit-animation: floating 2s infinite alternate;} #KV .mob h1 img{padding: 20% 20% 3% 20%;} #KV .mob a.kvbtn{border-bottom: 4px solid #d32f79;color:#fff;font-size: 20px;letter-spacing:2px;display:block; text-align: center; line-height: 50px;width: 180px; height: 50px;margin:0 auto; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#8c1c87+0,efa33d+84 */ background: #8c1c87; /* Old browsers */ background: -moz-linear-gradient(left, #8c1c87 0%, #efa33d 84%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #8c1c87 0%,#efa33d 84%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #8c1c87 0%,#efa33d 84%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8c1c87', endColorstr='#efa33d',GradientType=1 ); /* IE6-9 */ animation: pulse 0.6s infinite alternate;animation-delay:2s; animation-fill-mode:backwards;} #KV .mob a.kvbtn:hover{ border-bottom-width:0 ;text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ff00de, 0 0 40px #ff00de;} } @media screen and (max-width: 590px) { #KV{height: 650px; width: 100%; position: relative;background: url(../images/kv_m.jpg) center center; background-size:470px auto;} .peace{width: 120px; height: 120px;position: absolute;top:25%;left: -10%; } .glass{width: 150px; height: 128px;background-size: cover;position: absolute; top:5%;right: -10%; } .feather02{bottom:35%;right: -10%;} .feather01{ bottom:20%;left: -10%;} #KV .mob h1 img{padding: 30% 15% 15% 15%;} } @media screen and (max-width: 414px) { #KV{height: 600px; width: 100%; position: relative;background: url(../images/kv_m.jpg) center center; background-size:500px auto;} } @media screen and (max-width: 320px) { #KV{height: 480px; width: 100%; position: relative;background: url(../images/kv_m.jpg) center center; background-size:400px auto;} .peace{width: 90px; height: 90px;position: absolute;top:25%;left: -10%; } .feather02{width: 110px; height: 127px; bottom:35%;right: -15%;} .feather01{ width: 120px; height: 133px; bottom:20%;left: -15%;} } @-webkit-keyframes wave { 0% { -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); } 100% { -webkit-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); -moz-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); } } @-moz-keyframes wave { 0% { -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); } 100% { -webkit-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); -moz-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); } } @-ms-keyframes wave { 0% { -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); } 100% { -webkit-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); -moz-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); } } @keyframes wave { 0% { -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); } 100% { -webkit-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); -moz-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); } }