@charset "UTF-8";.main,img{display:block}.main,div{position:relative}body,div,h1,h2,h3,header,html,li,ul{margin:0;padding:0}body{-webkit-user-select:none;-ms-user-select:none;user-select:none}ul{list-style:none}img{border:0}.main{width:1000px;height:635px;overflow:hidden}.main.course10 .main-contents .main-contents-header .head-course,.main.course9 .main-contents .main-contents-header .head-course{display:none}.main.zoom.vertical{width:1240px;height:1070px}.main.zoom.vertical .storybook{padding:0 40px 40px;width:1160px;height:877px}.main.zoom.vertical .storybook-list-item,.main.zoom.vertical .storybook-list-item img{max-width:580px;max-height:877px}.main.zoom.wide{width:1240px;height:720px}.main.zoom.wide .storybook{padding:0 33px 39px;width:1174px;height:527px}.main.zoom.wide .storybook-list-item,.main.zoom.wide .storybook-list-item img{max-width:587px;max-height:527px}.main.blue{background:#ddf4ff}.main.blue .main-contents .main-contents-header{background:#0097e0}.main.blue .main-contents .main-contents-body .preloader{background:#ddf4ff}.main.blue .main-contents .main-contents-body .menu-window .howto-wrapper-right{background:url(../assets/sb/images/blue/howto_right.jpg) 22px 145px no-repeat #fff}.main.blue .main-contents .main-contents-body .menu-window .menu-close{background:#0097e0}.main.blue .main-contents .main-contents-body .storybook-player .storybook-player-btns .controller{background:#9ad2ed}.main.red{background:#ffe0e3}.main.red .main-contents .main-contents-header{background:#e31e20}.main.red .main-contents .main-contents-body .preloader{background:#ffe0e3}.main.red .main-contents .main-contents-body .menu-window .howto-wrapper-right{background:url(../assets/sb/images/red/howto_right.jpg) 22px 145px no-repeat #fff}.main.red .main-contents .main-contents-body .menu-window .menu-close{background:#e31e20}.main.red .main-contents .main-contents-body .storybook-player .storybook-player-btns .controller{background:#fcb5bc}.main.yellow{background:#fffdc7}.main.yellow .main-contents .main-contents-header{background:#ffcb18}.main.yellow .main-contents .main-contents-body .preloader{background:#fffdc7}.main.yellow .main-contents .main-contents-body .menu-window .howto-wrapper-right{background:url(../assets/sb/images/yellow/howto_right.jpg) 22px 145px no-repeat #fff}.main.yellow .main-contents .main-contents-body .menu-window .menu-close{background:#ffcb18}.main.yellow .main-contents .main-contents-body .storybook-player .storybook-player-btns .controller{background:#ffe08d}.main.orange{background:#ffe0e3}.main.orange .main-contents .main-contents-header{background:#e31e20}.main.orange .main-contents .main-contents-body .preloader{background:#ffe0e3}.main.orange .main-contents .main-contents-body .menu-window .howto-wrapper-right{background:url(../assets/sb/images/orange/howto_right.jpg) 22px 145px no-repeat #fff}.main.orange .main-contents .main-contents-body .menu-window .menu-close{background:#e31e20}.main.orange .main-contents .main-contents-body .storybook-player .storybook-player-btns .controller{background:#fcb5bc}.main.green{background:#ffe0e3}.main.green .main-contents .main-contents-header{background:#e31e20}.main.green .main-contents .main-contents-body .preloader{background:#ffe0e3}.main.green .main-contents .main-contents-body .menu-window .howto-wrapper-right{background:url(../assets/sb/images/green/howto_right.jpg) 22px 145px no-repeat #fff}.main.green .main-contents .main-contents-body .menu-window .menu-close{background:#e31e20}.main.green .main-contents .main-contents-body .storybook-player .storybook-player-btns .controller{background:#fcb5bc}.main.purple{background:#ffe0e3}.main.purple .main-contents .main-contents-header{background:#e31e20}.main.purple .main-contents .main-contents-body .preloader{background:#ffe0e3}.main.purple .main-contents .main-contents-body .menu-window .howto-wrapper-right{background:url(../assets/sb/images/purple/howto_right.jpg) 22px 145px no-repeat #fff}.main.purple .main-contents .main-contents-body .menu-window .menu-close{background:#e31e20}.main.purple .main-contents .main-contents-body .storybook-player .storybook-player-btns .controller{background:#fcb5bc}.main.abcmagicred{background:#ffe0e3}.main.abcmagicred .main-contents .main-contents-header{background:#e31e20}.main.abcmagicred .main-contents .main-contents-body .preloader{background:#ffe0e3}.main.abcmagicred .main-contents .main-contents-body .menu-window .howto-wrapper-right{background:url(../assets/sb/images/abcmagicred/howto_right.jpg) 22px 145px no-repeat #fff}.main.abcmagicred .main-contents .main-contents-body .menu-window .menu-close{background:#e31e20}.main.abcmagicred .main-contents .main-contents-body .storybook-player .storybook-player-btns .controller{background:#fcb5bc}.main.abcmagicorange{background:#ffe0e3}.main.abcmagicorange .main-contents .main-contents-header{background:#e31e20}.main.abcmagicorange .main-contents .main-contents-body .preloader{background:#ffe0e3}.main.abcmagicorange .main-contents .main-contents-body .menu-window .howto-wrapper-right{background:url(../assets/sb/images/abcmagicorange/howto_right.jpg) 22px 145px no-repeat #fff}.main.abcmagicorange .main-contents .main-contents-body .menu-window .menu-close{background:#e31e20}.main.abcmagicorange .main-contents .main-contents-body .storybook-player .storybook-player-btns .controller{background:#fcb5bc}.main.course9{background:#ffe0e3}.main.course9 .main-contents .main-contents-header{background:#e31e20}.main.course9 .main-contents .main-contents-body .preloader{background:#ffe0e3}.main.course9 .main-contents .main-contents-body .menu-window .howto-wrapper-right{background:url(../assets/sb/images/red/howto_right.jpg) 22px 145px no-repeat #fff}.main.course9 .main-contents .main-contents-body .menu-window .menu-close{background:#e31e20}.main.course9 .main-contents .main-contents-body .storybook-player .storybook-player-btns .controller{background:#fcb5bc}.main.course10{background:#ffe0e3}.main.course10 .main-contents .main-contents-header{background:#e31e20}.main.course10 .main-contents .main-contents-body .preloader{background:#ffe0e3}.main.course10 .main-contents .main-contents-body .menu-window .howto-wrapper-right{background:url(../assets/sb/images/red/howto_right.jpg) 22px 145px no-repeat #fff}.main.course10 .main-contents .main-contents-body .menu-window .menu-close{background:#e31e20}.main.course10 .main-contents .main-contents-body .storybook-player .storybook-player-btns .controller{background:#fcb5bc}.main-contents{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%}.main-contents-header{display:block;position:relative;width:100%;height:40px}.main-contents-header-heads{display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;position:absolute;left:0;top:0}.main-contents-header-heads .logo{width:auto;margin:9px 0 0 20px}.main-contents-header-heads .head-course{width:auto;margin:12px 0 0 15px}.main-contents-header-heads .head-unit{width:auto;margin:11px 0 0 7px}.main-contents-header-btns{display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;-webkit-align-items:center;-ms-flex-align:center;align-items:center;position:absolute;right:0;top:0;height:40px}.main-contents-header-btns .btn-close,.main-contents-header-btns .btn-menu{width:auto;margin:0 10px 0 0}.main-contents-body{display:block;position:absolute;top:40px;left:0;width:100%;height:calc(100% - 40px)}.main-contents-body-item{position:absolute;left:0;top:0;width:100%;height:100%}.main-contents-body .preloader{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;z-index:1000}.main-contents-body .preloader-text{padding:0 0 11px}.main-contents-body .preloader-wrapper{padding:4px 6px calc(11px + 7px);width:440px;height:32px;background:url(../assets/common/images/preloader_bar_background.png) left top no-repeat}.main-contents-body .preloader-wrapper .preloader-bar{overflow:hidden;width:0;height:100%;transition:width linear .5s}.main-contents-body .menu-window{display:block;z-index:500;background:#fff}.main-contents-body .menu-window .howto-wrapper{position:absolute;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;left:0;top:0;width:100%;height:100%}.main-contents-body .menu-window .howto-wrapper-left{width:310px}.main-contents-body .menu-window .howto-wrapper-right{width:690px}.main-contents-body .menu-window .menu-close{display:block;position:absolute;left:0;bottom:0;width:100%;height:8px;overflow:visible}.main-contents-body .menu-window .menu-close-white{position:absolute;left:calc(50% - 70px);bottom:0;width:140px;height:100%;background:#fff;overflow:visible}.main-contents-body .menu-window .menu-close-white .btn-menu-close{position:absolute;left:0;bottom:0}.main-contents-body .storybook-player{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.main-contents-body .storybook-player-btns{display:block;padding:11px 20px 0 0;width:172px;height:calc(100% - 11px)}.main-contents-body .storybook-player-btns .controller{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-ms-flex-align:center;align-items:center;padding:6px 0 10px;width:172px;border-radius:10px}.main-contents-body .storybook-player-btns .controller .icon-storybook{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;margin:0 0 10px;padding:10px;width:160px;height:164px;border-radius:10px;background:#fff}.main-contents-body .storybook-player-btns .controller .icon-storybook img{max-width:140px;max-height:144px}.main-contents-body .storybook-player-btns .controller .btn{margin:0 0 5px}.main-contents-body .storybook-player-btns .controller .btn:last-child{margin:0}.main-contents-body .storybook-player-btns .sub-btns{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;-webkit-align-items:center;-ms-flex-align:center;align-items:center;position:absolute;left:0;bottom:13px}.main-contents-body .storybook-player-btns .sub-btns .btn-zoom{margin:8px 0 0}.main-contents-body .storybook-player .storybook{display:block;box-sizing:border-box;padding:11px;width:808px;height:595px}.main-contents-body .storybook-player .storybook-list{width:100%;height:100%;transition:margin-left ease-out .2s,margin-right ease-out .2s;pointer-events:none}.main-contents-body .storybook-player .storybook-list-item,.main-contents-body .storybook-player .storybook-list-item img{max-width:calc(404px - 22px);max-height:calc(595px - 22px)}.main-contents-body .storybook-player .storybook-list .page-wrapper{pointer-events:all}.main-contents .btn-start{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;position:absolute;left:0;top:0;z-index:2000;width:100%;height:100%;background:rgba(0,0,0,.3)}.zoom .main-contents-body .storybook-player-btns .controller .icon-storybook,.zoom .main-contents-body .storybook-player-btns .sub-btns{display:none}.main-contents .btn-start:hover{opacity:1}.btn:hover,.main-contents .btn-start:hover img{opacity:.8}.zoom .main-contents-header .btn-menu{display:none;pointer-events:none}.zoom .main-contents-body .storybook-player{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.zoom .main-contents-body .storybook-player-btns{padding:20px;width:calc(100% - 40px);height:74px}.zoom .main-contents-body .storybook-player-btns .controller{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;box-sizing:border-box;margin:0;padding:10px;width:100%}.zoom .main-contents-body .storybook-player-btns .controller .btn-auto{-webkit-order:1;-ms-flex-order:1;order:1;margin:0 10px 0 0}.zoom .main-contents-body .storybook-player-btns .controller .btn-reset{-webkit-order:2;-ms-flex-order:2;order:2;margin:0 552px 0 0}.zoom .main-contents-body .storybook-player-btns .controller .btn-prev{-webkit-order:3;-ms-flex-order:3;order:3;margin:0 10px 0 0}.zoom .main-contents-body .storybook-player-btns .controller .btn-next{-webkit-order:4;-ms-flex-order:4;order:4;margin:0}.zoom .main-contents-body .storybook-player .storybook{width:100%;height:calc(100% - 114px)}.btn{cursor:pointer}.btn.disable{cursor:default}.btn.disable:hover{opacity:1}.hidden{display:none!important;pointer-events:none!important}