@charset "UTF-8"; /* RESET - ADAPTED FROM MEYER RESET URL - http://meyerweb.com/eric/tools/css/reset/ LICENSE - PUBLIC DOMAIN */ a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, caption, canvas, center, cite, code,dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, form, footer, header, hgroup, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, main, small, span, strike, strong, sub, summary, sup, tt, table, tbody, tfoot, thead, time, tr, th, td,u, ul, var, video{font-family:inherit;font-size:100%;font-weight:inherit;font-style:inherit;vertical-align:baseline;margin:0;padding:0;border:0;outline:0;background:transparent;}textarea{font-family:inherit;font-size:100%;font-weight:inherit;font-style:inherit;vertical-align:baseline;margin:0;padding:0;background:transparent;} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main{display:block;}ol, ul{list-style:none;}blockquote, q{quotes:none;}table{border-collapse:collapse;border-spacing:0;}body{line-height:1;} /* YUI 3.14.1 (build 63049cb) Copyright 2013 Yahoo! Inc. All rights reserved. Licensed under the BSD License. http://yuilibrary.com/license/ */ body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small}select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif}table{font-size:inherit;font:100%}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%}#yui3-css-stamp.cssfonts{display:none} /*12 COLUMN :RESPONSIVE GRID SYSTEM DEVELOPER :DENIS LEBLANC URL :http://responsive.gs VERSION :3.0 LICENSE :GPL & MIT */ *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} .container{width:100%; max-width:1120px; margin:0 auto; padding:0 5%;} .container:after,.row:after,.col:after,.clr:after,.group:after{content:"";display:table;clear:both;} .row{padding:auto; margin:0 auto;} .col{display:block; float:left; width:100%;} .reverse .col{float:right;} @media(min-width:769px){ .container{padding:0 20px;} } @font-face { font-family:'fontello'; src:url('font/fontello.eot?94586018'); src:url('font/fontello.eot?94586018#iefix') format('embedded-opentype'), url('font/fontello.woff2?94586018') format('woff2'), url('font/fontello.woff?94586018') format('woff'), url('font/fontello.ttf?94586018') format('truetype'), url('font/fontello.svg?94586018#fontello') format('svg'); font-weight: normal; font-style: normal; } [class^="icon-"]:before, [class*=" icon-"]:before { font-family: "fontello"; font-style: normal; font-weight: normal; display: inline-block; text-decoration: inherit; width: 1em; text-align: center; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-down-open-big:before { content: '\e800'; } /* '' */ .icon-up-open-big:before { content: '\e801'; } /* '' */ .icon-right-small:before { content: '\e802'; } /* '' */ .icon-up-small:before { content: '\e803'; } /* '' */ .icon-left-small:before { content: '\e804'; } /* '' */ .icon-down-small:before { content: '\e805'; } /* '' */ .icon-cancel:before { content: '\e806'; } /* '' */ .icon-twitter:before { content: '\f099'; } /* '' */ .icon-youtube-play-1:before { content: '\f16a'; } /* '' */ .icon-instagram:before { content: '\f16d'; } /* '' */ // COLOR @black:#1D1D1D; @white:#FFF; @gray:#999; @grayD:#666; @grayL:#ddd; @grayLL:#eee; @red:#E20303; // LESS @ncc:no-repeat center center; // MIXIN .trans{-webkit-transition:0.3s; transition:0.3s;} .fb{font-weight:700;} .tac{text-align:center;} .tar{text-align:right;} .tdn{text-decoration:none;} .tdu{text-decoration:underline;} .bgsc{-webkit-background-size:cover; background-size:cover;} .inline{display:inline-block;} /*BASE*/ html,body{height:100%; margin:0;} body{color:@black; line-height:1; -webkit-text-size-adjust:100%; font-weight:400; font-style:normal; font-feature-settings:"palt"; background:@white; font-family:"Helvetica Neue",Helvetica,"Droid Sans",Arial,Avenir,Verdana,Roboto,"游ゴシック Medium","YuGothic M","游ゴシック体","YuGothic","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Sans","ヒラギノ角ゴシック","Meiryo UI","メイリオ",Meiryo,sans-serif;} img{max-width:100%; height:auto; vertical-align:middle;} /*CF*/ .cf:before,.cf:after{content:" ";display:table;}.cf:after{clear:both;}.cf{*zoom:1;} /*LETTER*/ strong{.fb()} .wf{font-family:"Montserrat";} .midashi{font-family:"a-otf-midashi-go-mb31-pr6n"; font-weight:600;} .attention{color:@red;} .fontgray{color:@grayD;} .fontsmall{font-size:85%!important;} .fontlarge{font-size:124%!important;} .italic{font-style:italic;} i.rotate::before{font-size:120%; transform:rotate(-45deg);} ::selection{background:@black; color:@white;} ::-moz-selection{background:@black; color:@white;} /*LINK*/ a:link{color:@black; .tdu(); .trans();} a:visited{color:@black; .tdu();} a:hover{color:@grayD; .tdu();} a:active{color:@black; .tdn();} a img{border:none; .tdn(); .trans();} a img:hover{opacity:0.6; .tdn();} /*HEADER*/ header#header{z-index:200; position:fixed; top:0; left:0; padding:18px 6%; background:rgba(0,0,0,0.85); width:100%; display:flex; -webkit-flex-flow:row nowrap; flex-flow:row nowrap; -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:center; align-items:center; h1{position:relative; width:140px; a{display:block;} } nav{ ul{display:flex; -webkit-flex-flow:row nowrap; flex-flow:row nowrap; -webkit-justify-content:flex-end; justify-content:flex-end; -webkit-align-items:center; align-items:center; li{width:26px; margin:0 0 0 16px;} } } } /*LINE BN*/ div.linebn{z-index:260; position:fixed; bottom:0; right:0; line-height:1.6; background:rgba(0,0,0,0.8); width:100%; .trans(); a{font-size:15px; letter-spacing:2px; padding:20px; display:block; .tac(); white-space:nowrap; i{font-size:120%;} } a:link{color:@white; .tdn();} a:visited{color:@white; .tdn();} a:hover{color:@white; .tdn();} a:active{color:@white; .tdn();} } /*TOP KV*/ div.topteaser{position:relative; width:100%; height:100vh; overflow:hidden; div.topkv{position:relative; width:100%; height:100vh; overflow:hidden; div.topkvtxt{z-index:3; position:absolute; top:50%; left:50%; transform:translateY(-50%) translateX(-50%);} div.spmask{z-index:2; position:absolute; background:rgba(255,255,255,0.3); width:100%; height:100vh;} } } div.sliderbox{z-index:1; position:relative; width:100%; height:100%; overflow:hidden; pointer-events:none; display:flex; -webkit-flex-flow:row nowrap; flex-flow:row nowrap; -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:flex-start; align-items:flex-start; div.slider{position:relative; width:50%; height:100%; overflow:hidden; pointer-events:none; ul{z-index:1; position:relative; width:100%; pointer-events:none; li{display:flex; flex-direction:column; width:100%; height:auto; padding-bottom:12px; pointer-events:none; img{display:block; width:100%; height:auto; pointer-events:none;} } } } } div.sliderL{padding-right:6px;} div.sliderR{padding-left:6px;} .start{ ul.slider01{transform:translateY(0); animation:slide1 50s -25s linear infinite; -webkit-animation:slide1 50s -25s linear infinite;} ul.slider02{transform:translateY(0); animation:slide2 50s linear infinite; -webkit-animation:slide2 50s linear infinite;} ul.slider03{transform:translateY(0); animation:slide3 50s -25s linear infinite; -webkit-animation:slide3 50s -25s linear infinite;} ul.slider04{transform:translateY(0); animation:slide4 50s linear infinite; -webkit-animation:slide4 50s linear infinite;} } /*LAYOUT*/ div.wrapper{position:relative; display:block; width:100%;} main{position:relative; clear:both; display:block; padding:12% 0 0;} /*TOPBOX*/ div.topbox{margin:0 auto 18%; section.topttl{position:relative; margin:0 auto 9%; span{z-index:1 ;position:absolute; font-size:40px; top:-24px; left:-24px; display:block; letter-spacing:1px; margin:0 0 10px; color:@grayL; .fb(); opacity:0.7;} div{position:relative; z-index:2; display:flex; -webkit-flex-flow:row nowrap; flex-flow:row nowrap; -webkit-justify-content:flex-start; justify-content:flex-start; -webkit-align-items:center; align-items:center; img{width:42px;} } h2{font-size:22px; letter-spacing:1px; white-space:nowrap; .fb(); margin:0 0 0 15px;} } p{font-size:13px; line-height:1.8; margin:0 auto;} } div.bgbox{position:relative;} div.topabout{position:relative; z-index:10; h3{margin:0 0 9%;} h4{margin:0 0 9%; .fb(); .tac(); font-size:22px; line-height:1.5; letter-spacing:1px; span{background: linear-gradient(transparent 60%, #eb6aa4 60%);} } p{margin:0 0 9%;} ul{display:flex; -webkit-flex-flow:row nowrap; flex-flow:row nowrap; -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:flex-start; align-items:flex-start; li{width:48%; .tac(); .fb(); font-size:12px; a{display:block; border-radius:36px; padding:15px 0; background:#eb6aa4;} a:link{color:@white; .tdn();} a:visited{color:@white; .tdn();} a:hover{background:@gray; color:@white; .tdn();} a:active{color:@white; .tdn();} } li:last-child{ a{background:@black;} a:link{color:@white; .tdn();} a:visited{color:@white; .tdn();} a:hover{background:@gray; color:@white; .tdn();} a:active{color:@white; .tdn();} } } } div.ticker{width:100%; z-index:1; position:absolute; overflow:hidden; white-space:nowrap; padding:0; pointer-events:none; top:60%; left:0; ul{.inline(); animation:hscrollrev 150s linear infinite; opacity:0.17; li{.inline(); font-size:100px; color:@gray; .fb(); padding:0 0 20px;} } } div.topfeature{ p{.tac();} ul{ li{margin:0 0 9%; border:2px solid @grayD; padding:6% 0; border-radius:6px; background:url(../img/bg/note.jpg) repeat center center; background-size:500px auto; img{display:block; margin:0 auto 6%; width:50%; padding:9%; border-radius:50%; background:linear-gradient(15deg, rgba(255,213,25,1) 0%, rgba(195,84,195,1) 100%); } h3{font-size:18px; .midashi(); .fb(); .tac(); line-height:1.7; span{font-size:12px; display:block;} } } } } /*HOWTO*/ ul.howtolist{width:90%; margin:60px auto 0; li{margin:0 0 10%; div{position:relative; width:100%; height:100%; margin:0 0 5%; .tac(); span.num{.wf(); z-index:2; position:absolute; top:-28px; left:-28px; width:56px; height:56px; line-height:56px; background:linear-gradient(15deg, rgba(255,213,25,1) 0%, rgba(195,84,195,1) 100%); color:@white; border-radius:50%; font-size:20px; .fb();} img{position:relative; z-index:1;} } h5{.fb(); line-height:1.7; font-size:16px; margin:0 0 10px; letter-spacing:1px;} p{line-height:1.7; font-size:14px; text-align:left; margin:0 0 7.5%;} } li:after{content:""; display:block; width:0; height:0; margin:0 auto; border-right:20px solid transparent; border-left:20px solid transparent; border-top:20px solid #eb6aa4; } li:last-child:after{content:none; display:none;} } div.linebtn{ a{display:block; .tac(); background:#06c755; padding:24px 0; border-radius:8px; section{ display:flex; -webkit-flex-flow:row nowrap; flex-flow:row nowrap; -webkit-justify-content:center; justify-content:center; -webkit-align-items:center; align-items:center; /***img{width:36px;}***/ p{margin:0; line-height:1; white-space:nowrap;} } } a:link{color:@white; .tdn(); .trans();} a:visited{color:@white; .tdn();} a:hover{color:@white; .tdn();} a:active{color:@white; .tdn();} } ul.flow{margin:0; li{margin:0 0 25px; border:2px solid @grayD; padding:20px 16px; position:relative; border-radius:16px; background:url(../img/bg/note.jpg) repeat center center; background-size:500px auto; display:flex; -webkit-flex-flow:row nowrap; flex-flow:row nowrap; -webkit-justify-content:center; justify-content:center; -webkit-align-items:center; align-items:center; div.tag{background:linear-gradient(15deg, rgba(255,213,25,1) 0%, rgba(195,84,195,1) 100%); border-radius:50%; font-size:10px; color:@white; width:56px; height:56px; padding:10px 0 0; .tac(); .fb(); span{font-size:22px; display:block; margin:4px 0 0;} } section{width:calc(~'100% - 63px'); margin-left:20px; line-height:1.7; position:relative; p{font-size:14px; margin:0;} } } li:last-child{margin:0;} li:after{content:""; width:3px; background:@black; height:25px; position:absolute; bottom:-26px; left:calc(~'50% - 1.5px');} li:last-child:after{display:none;} } ul.faqlist{ li{margin:0 0 3px; section:first-child{padding:5%; width:100%; cursor:pointer; .trans(); background:@black; color:@white; display:flex; -webkit-flex-flow:row nowrap; flex-flow:row nowrap; -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:center; align-items:center; span{font-size:20px; width:5%; .fb(); color:rgba(195,84,195,1);} h4{word-wrap:break-word; width:85%; font-size:13px; line-height:1.7; .fb();} } section:last-child{padding:5%; background:@grayLL; display:flex; -webkit-flex-flow:row nowrap; flex-flow:row nowrap; -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:flex-start; align-items:flex-start; span{font-size:20px; width:5%; .fb(); color:rgba(195,84,195,1);} p{font-size:13px; line-height:1.7; width:92%;} } section:first-child:hover{opacity:0.7;} section.none-submenu:after{.fb(); width:5%; content:'↓'; font-family:-apple-system,"system-ui","Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; font-size:116%; line-height:1; float:right;} section.active-submenu:after{.fb(); width:5%; content:'↑'; font-family:-apple-system,"system-ui","Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; font-size:116%; line-height:1; float:right;} } } /*TICKER*/ div.rows{margin:0; display:-ms-grid; -ms-grid-columns:min-content; overflow:hidden; -webkit-backface-visibility:hidden; backface-visibility:hidden; } div.autoplay-slider{ display:flex; min-width:100%; width:min-content; overflow:hidden; will-change:transform,animation; -webkit-backface-visibility:hidden; backface-visibility:hidden; transform:translate3d(0,0,0); } div.slide{ position: relative; width:107px; height:auto; padding:0 20px; will-change:transform,animation; -webkit-backface-visibility:hidden; backface-visibility:hidden; transform:translate3d(0,0,0); } div.anim{ animation:sliderAnimation 36s linear infinite; } /*LIVERLIST*/ ul.liverlist{ display:flex; -webkit-flex-flow:row wrap; flex-flow:row wrap; -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:flex-start; align-items:flex-start; li{width:46%; img{position:relative; margin:0 0 15px; border-radius:50%;} h3{font-size:12px; letter-spacing:1px; color:@black; .fb(); .tac();} a{font-size:10px; i::before{font-size:13px;} } a:link{color:@black; .tdu();} a:visited{color:@black; .tdu();} a:hover{color:@gray; .tdu();} a:active{color:@black; .tdu();} } } /*TOPLIVER*/ div.topliver{ ul.liverlist{ li:nth-child(even){margin-top:7.5%;} } } /*PROFILE*/ div.vbox-content{margin-top:84px!important;} div.vbox-overlay{z-index:10010;} div.vbox-inline{height:auto!important; max-width:88vw!important; background:none!important;} .vbox-close{z-index:10050; top:1%; right:6%; position:fixed; font-weight:400!important; color:@grayL!important; background:none!important; padding:0; font-size:64px; line-height:1; width:auto; height:auto; text-align:center; cursor:pointer; overflow:hidden; display:block; } div.lightbox{background:@white; padding:6%; section.heading{margin:0 0 6%; .normttl{margin:0; font-size:22px; span{color:@gray;} } } section{position:relative;} img{margin:0 0 6%;} table{width:100%; line-height:1.8; font-size:13px; border-top:1px solid @grayL; -webkit-backface-visibility:visible; tr{border-bottom:1px solid @grayL; th{padding:15px 0; white-space:nowrap; .fb();} td{padding:15px 0 15px 20px;} } } div.watchbtn{margin:6% 0 0; a{display:block; width:fit-content; background:@black; padding:16px 32px; border-radius:24px; letter-spacing:1px; .fb();} a:link{color:@white; .tdn();} a:visited{color:@white; .tdn();} a:hover{background:@grayD; color:@white; .tdn();} a:active{color:@white; .tdn();} } ul.liversns{margin:6% 0 0; display:flex; -webkit-flex-flow:row nowrap; flex-flow:row nowrap; -webkit-justify-content:flex-start; justify-content:flex-start; -webkit-align-items:center; align-items:center; li{width:38px; margin:0 24px 0 0;} li.ig{width:35px;} li.tt{width:34px;} li:last-child{margin:0;} } } /*FOOTER*/ footer{position:relative; background:@black; padding:30px 6%; small{font-size:12px; display:block; color:@white; .tac();} } /****************************************************/ /************************ PC ************************/ /****************************************************/ @media(min-width:769px){ .sp{display:none!important;} /*HEADER*/ header#header{position:absolute; padding:20px 30px; background:rgba(0,0,0,0.8); h1{position:relative; width:180px;} nav{ ul{ li{width:32px; margin:0 0 0 24px;} } } } /*TOP KV*/ div.topteaser{height:100vh; div.topkv{height:100vh; display:flex; -webkit-flex-flow:row nowrap; flex-flow:row nowrap; -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:center; align-items:center; div.topkvtxt{z-index:1; position:relative; width:50%; top:0; left:0; transform:translateY(0) translateX(0); h1{opacity:1; width:50%; margin:0 auto;} } } } div.sliderbox{width:50%;} /*COMMON TTL*/ .normttl{font-size:50px; margin:0 auto 60px; letter-spacing:4px; span{font-size:15px; margin:0 0 15px;} } /*TOPBOX*/ div.topbox{margin:0 auto 120px; section.topttl{margin:0 auto 60px; width:fit-content; span{font-size:50px; top:-24px; left:-24px} div{position:relative; z-index:2; img{width:54px;} } h2{font-size:36px; letter-spacing:3px; margin:0 0 0 20px;} } p{font-size:15px; line-height:1.8; margin:0 auto;} } div.topabout{ h3{width:50%; margin:0 auto 60px;} h4{font-size:30px; margin:0 auto 40px; line-height:1; letter-spacing:2px;} p{width:50%; margin:0 auto 40px; .tac();} ul{width:50%; margin:0 auto 0; li{font-size:15px; a{padding:18px 0;} } } } div.ticker{top:57%; left:0; ul{animation:hscrollrev 170s linear infinite; opacity:0.17; li{font-size:150px; padding:0 0 20px;} } } div.topfeature{ p{fopnt-size:18px; letter-spacing:1.5px; .fb();} ul{margin:0 auto 30px; display:flex; -webkit-flex-flow:row nowrap; flex-flow:row nowrap; -webkit-justify-content:space-between; justify-content:space-between; li{width:31%; margin:0; padding:30px 0; border-radius:8px;} } } /*HOWTO*/ ul.howtolist{width:100%; margin:100px auto 0; display:flex; -webkit-flex-flow:row wrap; flex-flow:row wrap; -webkit-justify-content:flex-start; justify-content:flex-start; -webkit-align-items:flex-start; align-items:flex-start; li{position:relative; width:28%; margin:0 8% 40px 0; div{margin:0 0 5%;} h5{font-size:18px; margin:0 0 12px; letter-spacing:1px;} p{margin:0;} } li:after{position:absolute; right:-78px; top:40%; margin:auto; border-top:22px solid transparent; border-bottom:22px solid transparent; border-left:22px solid #eb6aa4; } li:nth-child(3n){margin:0 0 40px;} li:nth-child(3n):after{content:none; display:none;} li:last-child{margin:0; >p{margin:0 0 5%;} } } div.linebtn{ a:link{color:@white; .tdn(); .trans();} a:visited{color:@white; .tdn();} a:hover{color:@white; .tdn(); background:@black;} a:active{color:@white; .tdn();} } ul.flow{width:60%; margin:0 auto; li{ section{ p{font-size:15px; margin:0; line-height:1.7!important; span{} } } } } ul.faqlist{width:60%; margin:0 auto; li{ section:first-child{ span{font-size:22px;} h4{font-size:16px;} } section:last-child{ span{font-size:22px;} p{font-size:16px;} } } } /*TICKER*/ div.slide{ width:214px; padding:0 40px; } div.anim{ animation:sliderAnimation 54s linear infinite; } /*LIVERLIST*/ ul.liverlist{ -webkit-justify-content:flex-start; justify-content:flex-start; li{width:22%; margin:0 4% 4% 0; div.numtag{top:8px; left:10px; img{width:26px; margin:0;} } span.num{width:64px; height:64px; line-height:64px; font-size:20px;} h3{font-size:16px; margin:0 0 18px;} a{font-size:13px; i::before{font-size:16px;} } a:link{color:@black; .tdn(); .trans();} a:visited{color:@black; .tdn();} a:hover{color:@gray; .tdu();} a:active{color:@black; .tdn();} } li:nth-child(4n){margin:0 0 4%;} } /*TOPLIVER*/ div.topliver{ ul.liverlist{margin:0 0 12%; li:nth-child(even){margin-top:4%;} } } /*PROFILE*/ div.vbox-inline{max-width:76vw!important;} .vbox-close{top:0.5%; font-size:80px;} div.lightbox{padding:4%; display:-webkit-flex; display:flex; -webkit-flex-flow:row wrap; flex-flow:row wrap; -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:flex-start; align-items:flex-start; section{width:40%;} section:last-child{width:56%} section.heading{width:100%; display:block; margin:0 0 4%;} div.numtag{top:6px; left:6px; img{width:30px; margin:0;} } img{margin:0;} table{line-height:1.9; font-size:16px; letter-spacing:1px; tr{border-bottom:1px solid @grayL; th{padding:20px 0; white-space:nowrap; text-align:left;} td{padding:20px 0 20px 20px;} } } div.watchbtn{margin:4.5% 0 0; a{font-size:116%; padding:20px 40px; border-radius:32px;} } ul.liversns{margin:4.5% 0 0; li{width:38px; margin:0 24px 0 0;} li.ig{width:35px;} li.tt{width:34px;} li:last-child{margin:0;} } } /*FOOTER*/ footer{ } } /************************ SP ************************/ @media (max-width:768px){ .pc{display:none;} .spmb{margin-bottom:5%;} /*** body{background:none;} body::before{ content:""; display:block; position:fixed; top:0; left:0; z-index:-1; width:100%; height:100vh; background-repeat:no-repeat; background-image:url("../img/bg/mathsp.jpg"); .bgsc(); } ***/ } /************************ VIDEO ************************/ div.video_box{position:relative; overflow:hidden; padding-bottom:56.25%; height:0;} div.video_box iframe,div.video_box object,div.video_box embed{position:absolute; top:0; left:0; width:100%; height:100%} /************************ SLIDE ************************/ @keyframes sliderAnimation{ to{transform:translateX(-50%);} } @keyframes slide1 { 0%{transform:translateY(100%);} 100%{transform:translateY(-100%);} } @keyframes slide2 { 0%{transform:translateY(0%);} 100%{transform:translateY(-200%);} } @keyframes slide3 { 0%{transform:translateY(-100%);} 100%{transform:translateY(100%);} } @keyframes slide4 { 0%{transform:translateY(-200%);} 100%{transform:translateY(0%);} } @keyframes hscrollrev{ 0%{transform:translateX(-100%);} 100%{transform:translateX(4%);} } /************************ NOISE ************************/ div.noisewrap{ position:absolute; display:block; overflow:hidden; top:0; left:0; width:100%; height:100%; z-index:-1; } div.noisebg{ width:100%; height:100%; opacity:0.3; } div.noisebg::before { content:''; position:absolute; display:block; background-image:url(../img/bg/noise.png); top:-50%; left:-50%; width:200%; height:200%; will-change:transform; animation:noiseBGS 0.9s steps(4) infinite; } @keyframes noiseBGS { 0% { transform: translate(0); } 10% { transform: translate(-5%, -5%); } 20% { transform: translate(-10%, 5%); } 30% { transform: translate(5%, -10%); } 40% { transform: translate(-5%, 15%); } 50% { transform: translate(-10%, 5%); } 60% { transform: translate(15%); } 70% { transform: translateY(10%); } 80% { transform: translate(-15%); } 90% { transform: translate(10%, 5%); } 100% { transform: translate(5%); } }