@keyframes book_wrap_none1{0%{height:180px}30%{height:180px}}@keyframes Book_wrap{40%{height:375px;top:50px}to{height:375px;top:0}}@keyframes Book_wrap_out{50%{height:120px}to{height:120px}}@keyframes Book{0%{height:375px}50%{width:100%;height:375px;margin:0;left:0;right:0}to{width:100%;height:375px;margin:0;top:0;left:0;right:0}}@keyframes BookOut{15%{width:60%;position:absolute;left:0}90%{width:73px;height:105px;margin-left:-36.5px;position:absolute;top:30px;left:50%}to{width:73px;height:105px;margin-left:-36.5px;position:absolute;top:30px;left:50%}}@keyframes book_img_none{0%{width:130px;height:180px;margin-left:-65px;position:absolute;top:20px}30%{width:130px;height:180px;margin-left:-65px;position:absolute;top:20px}}@keyframes ConActive1{0%{z-index:50;width:100%;height:80vh;position:absolute;top:96px;overflow:hidden}to{overflow:hidden}}@keyframes ConActive2{0%{z-index:50;width:100%;height:80vh;position:absolute;top:96px;overflow:hidden}40%{z-index:50;width:100%;height:80vh;position:absolute;top:96px;overflow:hidden}to{overflow:hidden}}@keyframes ConOut1{0%{top:0}}@keyframes ConOut2{0%{top:0}40%{top:0}}@keyframes Btn_active{0%{top:-100px}}@keyframes book_wrap_none2{0%{height:230px}30%{height:230px}}@keyframes Book_wrap2{0%{height:174px}50%{height:375px}to{height:375px}}@keyframes Book_wrap_out2{50%{height:175px;top:0;overflow:hidden}to{-webkit-user-select:none;user-select:none;height:175px;overflow:hidden}}@keyframes Book2{50%{width:100%;height:375px;margin:0;left:0;right:0}to{width:100%;height:375px;margin:0;top:0;left:0;right:0}}@keyframes BookOut2{0%{width:100%}to{width:100%}}@keyframes layoutDimOn{0%{opacity:0}to{opacity:.65}}@keyframes layoutDimOut{0%{opacity:.65;display:block}99%{height:100%;display:block}to{opacity:0;height:0}}@keyframes layoutListOn{0%{height:0}to{height:360px}}@keyframes layoutListOut{0%{height:360px}to{height:0}}.book_wrap_none1{-webkit-user-select:none;user-select:none;height:120px;animation-name:book_wrap_none1;animation-duration:1.5s;animation-fill-mode:forwards;position:relative}.book_wrap_active1{-webkit-user-select:none;user-select:none;height:120px;animation-name:Book_wrap;animation-duration:.5s;animation-fill-mode:forwards;position:relative;top:60px}.book_wrap_out1{-webkit-user-select:none;user-select:none;height:375px;animation-name:Book_wrap_out;animation-duration:.5s;animation-fill-mode:forwards;position:relative;top:0}.book_img_Active1{width:73px;height:105px;margin-left:-73px;animation-name:Book;animation-duration:.5s;animation-fill-mode:forwards;position:absolute;top:30px;left:50%;overflow:hidden}.book_img_out1{width:100%;height:95px;margin:0;animation-name:BookOut;animation-duration:.5s;animation-fill-mode:forwards;position:absolute;top:10px;left:0;right:0}.book_img_none1{width:73px;height:105px;margin-left:-36.5px;animation-name:book_img_none;animation-duration:1.5s;animation-fill-mode:forwards;position:absolute;top:30px;left:50%}.book1{width:100%;height:100%}.book_out1{width:100%;height:auto}.con_active1{z-index:50;width:100%;height:calc(100vh - 60px);animation-name:ConActive1;animation-duration:.5s;animation-fill-mode:forwards;position:absolute;top:0}.con_active2{z-index:50;width:100%;height:calc(100vh - 60px);animation-name:ConActive2;animation-duration:.5s;animation-fill-mode:forwards;position:absolute;top:0;overflow:hidden}.con_out1{z-index:50;width:100%;animation-name:ConOut1;animation-duration:.5s;animation-fill-mode:forwards;position:absolute;top:96px;overflow:hidden}.con_out2{z-index:50;width:100%;animation-name:ConOut2;animation-duration:.5s;animation-fill-mode:forwards;position:absolute;top:96px;overflow:hidden}.con_none{z-index:50;width:100%;height:100%;position:relative;top:auto;overflow:hidden}.btn_active{animation-name:Btn_active;animation-duration:.5s;animation-fill-mode:forwards}.book_wrap_none2{-webkit-user-select:none;user-select:none;height:175px;animation-name:book_wrap_none2;animation-duration:1.5s;animation-fill-mode:forwards;position:relative;overflow:hidden}.book_wrap_active2{-webkit-user-select:none;user-select:none;height:375px;animation-name:Book_wrap2;animation-duration:.5s;animation-fill-mode:forwards;position:relative}.book_wrap_out2{-webkit-user-select:none;user-select:none;height:375px;animation-name:Book_wrap_out2;animation-duration:.5s;animation-fill-mode:forwards;position:relative;top:0;overflow:hidden}.book_img_Active2{width:100%;height:175px;animation-name:Book2;animation-duration:.5s;animation-fill-mode:forwards;position:absolute;overflow:hidden}.book_img_out2{width:100%;height:375px;margin:0;animation-name:BookOut2;animation-duration:.5s;animation-fill-mode:forwards;position:absolute;top:0;left:0;right:0}.book_img_none2{width:100%;height:auto;position:absolute}.book2,.book_out2{width:100%;height:auto}.layerDimOn{z-index:9000;width:100%;height:100%;margin:0;animation-name:layoutDimOn;animation-duration:.5s;animation-fill-mode:forwards;position:fixed;top:0;left:0;right:0}.layerDimOut{z-index:9000;width:100%;height:100%;margin:0;animation-name:layoutDimOut;animation-duration:.5s;animation-fill-mode:forwards;position:fixed;bottom:0;left:0;right:0}.layerListOn{z-index:9000;width:100%;height:0;margin:0;animation-name:layoutListOn;animation-duration:.5s;animation-fill-mode:forwards;display:block;position:absolute;bottom:0;left:0;right:0}.layerListOut{z-index:9000;width:100%;height:50vh;margin:0;animation-name:layoutListOut;animation-duration:.5s;animation-fill-mode:forwards;display:block;position:absolute;top:0;left:0;right:0}
.attendance .img>img{width:100%}.attendance .calendar-area{position:relative}.attendance .calendar-area .calendar{width:100%;height:100%;padding:0 9.5%;position:absolute;top:0;left:0;overflow:hidden}.attendance .calendar-area .calendar li{float:left;text-align:center;width:14.285%;height:20%;padding-top:1.5%;font-size:2.5vw}.attendance .calendar-area .calendar li .icon img{width:100%}.attendance .check{position:relative}.attendance .check .button{position:absolute;top:4%;left:5%;right:5%}.roulette-section{position:relative}.roulette-section .img>img{width:100%}.roulette-section .go{z-index:10;width:20%;position:absolute;top:44%;left:40%}.roulette-section .pin{z-index:10;width:8%;margin-left:-4%;position:absolute;top:24.5%;left:50%}.roulette-section .roulette .img{z-index:0;width:75%;margin:-38.5% 0 0 -37.5%;transition:transform 5s;position:absolute;top:50%;left:50%}