@font-face{font-family:Main;src:url(../fonts/Montserrat-Medium.woff2) format("woff2"),url(../fonts/Montserrat-Medium.woff) format("woff");font-weight:400;font-style:normal}*{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0}body,html{width:100%;height:100vh}.app{width:100%;height:100%;position:relative;background-image:url(../image/bg.jpg);background-position:center;background-size:cover;background-repeat:no-repeat;overflow:hidden;font-family:Main}.logo{position:absolute;width:12%;left:44%;top:0;opacity:0;-webkit-animation:top-elem 1s ease;animation:top-elem 1s ease;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-delay:.2s;animation-delay:.2s}.logo img{width:100%}.title{width:26%;position:absolute;left:37%;top:20%;opacity:0;-webkit-animation:top-elem 1s ease;animation:top-elem 1s ease;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-delay:.6s;animation-delay:.6s}.title img{width:100%}.cards{width:90%;margin:15% auto;position:relative;height:100%}.cards .arrows{position:absolute;width:50%;height:100vh;top:-20%;z-index:2;-webkit-transition:all ease .5s;transition:all ease .5s}.cards .arrows img{width:23%;margin-top:20%}.cards .arrow1{padding-left:15%;padding-top:10%;left:0}.cards .arrow2{padding-left:15%;padding-top:10%;left:52%}.cards .arrow2 img{-webkit-transform:rotate(180deg) translateX(-100%);transform:rotate(180deg) translateX(-100%)}.cards .cards-wrapper{width:50%;position:absolute;left:25%;top:0;overflow:hidden}.cards .cards-wrapper .cards-block{width:100%;height:100%;position:relative}.cards .cards-wrapper .cards-block .light{width:48%;margin:0 auto -3%;opacity:0}.cards .cards-wrapper .cards-block .light img{width:100%;-webkit-transform:translateX(2%);transform:translateX(2%)}.cards .cards-wrapper .cards-block .light-active{-webkit-animation:show-light .5s ease;animation:show-light .5s ease;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-delay:.6s;animation-delay:.6s}.cards .cards-wrapper .cards-block .card-item{position:absolute;top:0;left:70%;width:30%;-webkit-transform:scale(0,0);transform:scale(0,0);opacity:0;-webkit-transition:all linear .6s;transition:all linear .6s}.cards .cards-wrapper .cards-block .card-item img{width:100%}.cards .cards-wrapper .cards-block .card-item_active{top:5%;left:35%;opacity:1;-webkit-transform:scale(1.2,1.2);transform:scale(1.2,1.2);z-index:2}.cards .cards-wrapper .cards-block .card-item_active:hover{-webkit-transform:scale(1.25,1.25);transform:scale(1.25,1.25)}.cards .cards-wrapper .cards-block .card-item_pre{top:0;left:0;z-index:1;opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1);-webkit-filter:grayscale(100%);filter:grayscale(100%)}.cards .cards-wrapper .cards-block .card-item_next{top:0;left:69%;z-index:1;opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1);-webkit-filter:grayscale(100%);filter:grayscale(100%)}.notice{position:absolute;top:30%;width:30%;left:35%;z-index:2;opacity:0;-webkit-animation:notice-show 1s ease;animation:notice-show 1s ease;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-delay:.3s;animation-delay:.3s}.notice .notice-wrapper{width:100%;height:100%;position:relative}.notice .notice-wrapper img{width:100%}.notice .notice-wrapper .notice-close{position:absolute;top:-1%;right:-1%;width:10%;-webkit-transition:all ease .4s;transition:all ease .4s}.notice .notice-wrapper .notice-close:hover{-webkit-transform:scale(1.1,1.1);transform:scale(1.1,1.1)}.notice .notice-wrapper .notice-btn{width:40%;left:30%;position:absolute;bottom:15%;-webkit-transition:all ease .4s;transition:all ease .4s}.notice .notice-wrapper .notice-btn img{width:100%}.notice .notice-wrapper .notice-btn:hover{-webkit-transform:scale(1.1,1.1);transform:scale(1.1,1.1)}.notice .notice-wrapper .notice-btn-no{position:absolute;bottom:6%;left:0;width:100%;text-align:center;color:#000}.game-link{position:absolute;bottom:3%;left:35%;width:30%;-webkit-animation:btn 1s linear;animation:btn 1s linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;z-index:2;padding:30px 0}.game-link img{width:60%;margin:0 auto;display:block}@-webkit-keyframes active_card{from{-webkit-transform:scale(1.2,1.2);transform:scale(1.2,1.2)}50%{-webkit-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}to{-webkit-transform:scale(1.2,1.2);transform:scale(1.2,1.2)}}@keyframes active_card{from{-webkit-transform:scale(1.2,1.2);transform:scale(1.2,1.2)}50%{-webkit-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}to{-webkit-transform:scale(1.2,1.2);transform:scale(1.2,1.2)}}@-webkit-keyframes btn{from{-webkit-transform:scale(1,1);transform:scale(1,1)}50%{-webkit-transform:scale(1.2,1.2);transform:scale(1.2,1.2)}to{-webkit-transform:scale(1,1);transform:scale(1,1)}}@keyframes btn{from{-webkit-transform:scale(1,1);transform:scale(1,1)}50%{-webkit-transform:scale(1.2,1.2);transform:scale(1.2,1.2)}to{-webkit-transform:scale(1,1);transform:scale(1,1)}}@-webkit-keyframes show-light{from{opacity:0}to{opacity:1}}@keyframes show-light{from{opacity:0}to{opacity:1}}@-webkit-keyframes top-elem{from{opacity:0;-webkit-transform:translateY(-10%);transform:translateY(-10%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes top-elem{from{opacity:0;-webkit-transform:translateY(-10%);transform:translateY(-10%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes notice-show{from{opacity:0;-webkit-transform:scale(0,0);transform:scale(0,0)}to{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}}@keyframes notice-show{from{opacity:0;-webkit-transform:scale(0,0);transform:scale(0,0)}to{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}}@media screen and (max-width:450px){.app{background-attachment:fixed;overflow-y:auto}.logo{width:50%;left:25%;position:fixed;z-index:4}.title{width:90%;left:5%;position:fixed;z-index:4;top:8%}.cards{margin-top:40%}.cards .arrows{display:none}.cards .cards-wrapper{width:100%;left:0;overflow:visible;padding-bottom:120px}.cards .cards-wrapper .cards-block .light{opacity:0;display:none}.cards .cards-wrapper .cards-block .card-item{position:relative;display:block;opacity:1;width:65%;top:0;-webkit-transform:scale(1,1);transform:scale(1,1);left:17.5%;margin-bottom:-40px}.cards .cards-wrapper .cards-block .card-item_active{-webkit-transform:scale(1,1);transform:scale(1,1)}.cards .cards-wrapper .cards-block .card-item_active:hover{-webkit-transform:scale(1,1);transform:scale(1,1)}.cards .cards-wrapper .cards-block .card-item_pre{-webkit-filter:grayscale(0);filter:grayscale(0)}.cards .cards-wrapper .cards-block .card-item_next{-webkit-filter:grayscale(0);filter:grayscale(0)}.notice{position:fixed;top:30%;width:90%;left:5%;z-index:2;opacity:0;-webkit-animation:notice-show 1s ease;animation:notice-show 1s ease;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-delay:.3s;animation-delay:.3s}.notice .notice-wrapper{width:100%;height:100%;position:relative}.notice .notice-wrapper img{width:100%}.notice .notice-wrapper .notice-close{position:absolute;top:-1%;right:-1%;width:10%;-webkit-transition:all ease .4s;transition:all ease .4s}.notice .notice-wrapper .notice-close:hover{-webkit-transform:scale(1.1,1.1);transform:scale(1.1,1.1)}.notice .notice-wrapper .notice-btn{width:40%;left:30%;position:absolute;bottom:17%;-webkit-transition:all ease .4s;transition:all ease .4s}.notice .notice-wrapper .notice-btn img{width:100%}.notice .notice-wrapper .notice-btn:hover{-webkit-transform:scale(1.1,1.1);transform:scale(1.1,1.1)}.game-link{position:fixed;width:50%;left:25%;z-index:4}}