body{margin:0;padding:0}header{background:#333}header h1{font-family:Roboto,sans-serif;line-height:1;text-indent:10px;padding:10px 0}header h1 a{text-decoration:none}#top a,header h1 a{color:#039fe6}abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1.5}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{text-decoration:none}ins,mark{background-color:#ff9;color:#000}mark{font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}label{cursor:pointer}body{background:#fff;font-size:14px;font-family:sans-serif}#content{width:96%;margin:0 auto}h2{font-size:20px}#cover_canvas{width:100%;-webkit-mask-image:url(../images/mask.png);mask-image:url(../images/mask.png);-webkit-mask-size:cover;mask-size:cover}#title_area{position:absolute;top:0;width:100%;height:50vw;z-index:6;padding-top:10vw;box-sizing:border-box}#title_area .inner{position:absolute;width:100%;top:50%;-webkit-transform:translateY(-60%);transform:translateY(-60%)}#title_area .inner h1{text-align:center}#title_area .inner h1 img{min-width:500px;max-width:900px;width:80%}#intro{text-align:center;font-size:15px;font-weight:700;color:#fff;max-width:640px;margin:0 auto 50px;background:#039fe6 url(../images/star_bg.png);padding:20px;box-sizing:border-box;border-radius: 50px; background-size: 5%;}#tn_comp{margin-top:-100px;padding:100px 0 0}#topics{margin-bottom:50px}#topics h2{text-align:center;font-family:Kreon,sans-serif;color:#039fe6;font-size:50px;line-height:1;margin-bottom:25px}#topics h2 span{font-size:12px;display:block;margin-top:5px}#topics ul{display:flex;flex-wrap:wrap;max-width:960px;margin:0 auto;justify-content:center}#topics ul li{width:31%;text-align:center;padding:1.5%;background-image:linear-gradient(180deg,#c1e38b,#84cc63 26%,#81cfdd 44%,#8b73b5 68%,#ea5588);border-radius:10px;margin:0 1% 2%;box-sizing:border-box}#topics ul li .inner{text-align:left;background:#fff;margin:0 auto;min-height:170px;padding:10px;border-radius:6px;box-sizing:border-box;transition-duration:.2s}#topics ul li .inner a{display:block;text-decoration:none;color:#039fe6}#topics ul li .inner a:hover{color:#000;opacity:.7}#topics ul li .inner h3{text-align:center;color:#555;font-size:200%;font-family:Roboto Condensed,sans-serif}#topics ul li .inner h3 span{font-size:50%;display:inline-block;margin-left:5px}#next{width:25px;margin:0 auto 100px}#next svg{width:50px;fill:#039fe6;-webkit-animation-name:c;animation-name:c;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}#next svg:nth-child(2){-webkit-animation-delay:.3s;animation-delay:.3s}#next svg:nth-child(3){-webkit-animation-delay:.6s;animation-delay:.6s}#list{position:relative}#list ul{text-align:center}#list ul li{display:block;vertical-align:top;margin-bottom:100px;position:relative;z-index:1}#list ul li .inner{max-width:900px;margin:0 auto;will-change:transform,opacity,position;display:flex;align-items:center;position:relative;z-index:5}#list ul li .inner .img{width:50%;opacity:0;position:relative;z-index:5}#list ul li .inner .img>div{position:absolute;top:-36px;width:88px;height:100px;background:url(../images/ear.png) no-repeat;z-index:2}#list ul li .inner .img .ear1{right:-20px;right:-25px}#list ul li .inner .img .ear2{left:-20px;left:-25px;-webkit-transform:scaleX(-1);transform:scaleX(-1)}#list ul li .inner .img img{border-radius:20px;width:100%;position:relative;z-index:3;border:5px solid #573690;box-sizing:border-box}#list ul li .inner .exp{opacity:0;width:50%;-webkit-transform:translateX(-200px) scale(.9);transform:translateX(-200px) scale(.9);transition:opacity .3s,-webkit-transform .2s;transition:transform .2s,opacity .3s;transition:transform .2s,opacity .3s,-webkit-transform .2s;transition-delay:.2s;padding-left:5%;text-align:left;position:relative;z-index:4}#list ul li .inner .exp .cat{text-align:center;font-family:Roboto Condensed,sans-serif;line-height:1;font-size:150%;color:#039fe6;border:2px solid #039fe6;display:inline-block;padding:5px 10px;border-radius:4px}#list ul li .inner .exp span.new{font-size: 12px;font-weight: 400;padding: 3px 8px;line-height: 1;background: crimson;color: #fff; margin: 5px 5px 0 0;border-radius: 3px;-webkit-transform: translateY(-3px);transform: translateY(-3px);display:inline-block;width: 23px;text-align: center;}#list ul li .inner .exp p{margin-top:25px;text-align:left;font-weight:700; font-size: 1.3rem;}#list ul li .inner .exp p a{color:#039fe6}#list ul li .inner .exp p a:hover{text-decoration:none}#list ul li .bg,#list ul li .iv_area{width:100%;height:100px}#list ul li .bg{position:absolute;bottom:150px;-webkit-transform:skewY(10deg) scaleX(0);transform:skewY(10deg) scaleX(0);-webkit-transform-origin:left bottom;transform-origin:left bottom;transition-duration:.5s;background:linear-gradient(120deg,#eef5cc,#c6e6b4 20%,#bae3eb 50%,#c0b6d6 76%,#eda7c0)}#list ul li.ac .inner .img{-webkit-animation-name:a;animation-name:a;-webkit-animation-duration:.3s;animation-duration:.3s;transition-delay:.1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-fill-mode:both;animation-fill-mode:both}#list ul li.ac .inner .img>div{-webkit-animation-name:b;animation-name:b;-webkit-animation-timing-function:steps(3);animation-timing-function:steps(3);-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:.25s;animation-delay:.25s;-webkit-animation-iteration-count:1;animation-iteration-count:1}#list ul li.ac .inner .exp{-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1);opacity:1}#list ul li.ac .bg{-webkit-transform:skewY(10deg) scale(1);transform:skewY(10deg) scale(1)}#list ul li:nth-child(2n) .inner .img{order:2}#list ul li:nth-child(2n) .inner .exp{padding-left:0;padding-right:5%;-webkit-transform:translateX(200px) scale(.9);transform:translateX(200px) scale(.9);transition:opacity .5s,-webkit-transform .3s;transition:transform .3s,opacity .5s;transition:transform .3s,opacity .5s,-webkit-transform .3s;transition-delay:.2s}#list ul li:nth-child(2n) .bg{-webkit-transform-origin:right top;transform-origin:right top;-webkit-transform:skewY(-10deg) scale(0);transform:skewY(-10deg) scale(0)}#list ul li:nth-child(2n).ac .inner .exp{-webkit-transform:translateX(0) scale(1);transform:translateX(0) scale(1); text-align: right;}#list ul li:nth-child(2n).ac .inner .exp p { text-align: right;}#list ul li:nth-child(2n).ac .bg{-webkit-transform:skewY(-10deg) scale(1);transform:skewY(-10deg) scale(1)}#andmore{color:#039fe6;font-family:Kreon,sans-serif;text-align:center;font-size:40px;padding:50px 0}#banners{padding:100px 0;background:#f5f5f5}#banners ul{display:flex;justify-content:space-between;width:500px;margin:0 auto}#banners ul li{width:46%;max-width:230px;text-align:center;flex:0 0 auto;padding:40px 0;box-sizing:border-box}@-webkit-keyframes a{0%{-webkit-transform:translateY(-100vh) scale(.8,3);transform:translateY(-100vh) scale(.8,3);opacity:0}to{-webkit-transform:translateY(0) scaleY(1);transform:translateY(0) scaleY(1);opacity:1}}@keyframes a{0%{-webkit-transform:translateY(-100vh) scale(.8,3);transform:translateY(-100vh) scale(.8,3);opacity:0}to{-webkit-transform:translateY(0) scaleY(1);transform:translateY(0) scaleY(1);opacity:1}}@-webkit-keyframes b{0%{background-position:0 0}50%{-webkit-transform:translateY(5px);transform:translateY(5px)}to{background-position:0 -300px}}@keyframes b{0%{background-position:0 0}50%{-webkit-transform:translateY(5px);transform:translateY(5px)}to{background-position:0 -300px}}@-webkit-keyframes c{0%{fill:#039fe6}to{fill:#fff}}@keyframes c{0%{fill:#039fe6}to{fill:#fff}}@media screen and (max-width:768px){#list>div .inner{width:900px;margin:0 auto}}@media screen and (max-width:640px){body{font-size:12px}h2{font-size:20px}#cover_canvas{height:100vw;-webkit-mask-size:100% 100%;mask-size:100% 100%}#title_area{padding-top:10vw;height:100vw}#title_area .inner h1 img{min-width:0;width:90%}#title_area .inner p{font-size:10px;width:90%;text-align:left;padding:10px 30px}.star_bg{background-size:5%}#intro{width:90%;font-size:11px;margin-top:25px;padding:10px; border-radius: 20px;}#topics{margin-bottom:50px}#topics h2{font-size:30px}#topics h2 span{font-size:12px;display:block;margin-top:5px}#topics ul{display:flex;max-width:800px;margin:0 auto;width:95%;justify-content:space-between}#topics ul li{width:100%;text-align:left;padding:2% 0;background-image:linear-gradient(180deg,#c1e38b,#84cc63 26%,#81cfdd 44%,#8b73b5 68%,#ea5588);border-radius:10px}#topics ul li .inner{background:#fff;margin:0 auto;width:96%;min-height:0;border-radius:6px}#topics ul li .inner h3{color:#555;font-size:20px;font-family:Roboto Condensed,sans-serif}#topics ul li .inner h3 span{display:inline-block;margin-left:5px}#next svg{width:20px}#list{overflow:hidden;padding-top:20px}#list ul li .inner{width:90%}#list ul li .inner .img>div{width:40px;height:50px;background-size:100% 150px;top:-20px}#list ul li .inner .img .ear1{right:-8px}#list ul li .inner .img .ear2{left:-8px}#list ul li .inner .exp p{margin-top:5px; font-size:90%;}#list ul li .iv_area{height:50px}#list ul li .bg{height:25px;bottom:50px;-webkit-transform:skewY(6deg) scaleX(0);transform:skewY(6deg) scaleX(0)}#list ul li.ac .bg{-webkit-transform:skewY(6deg) scale(1);transform:skewY(6deg) scale(1)}#list ul li:nth-child(2n).ac .bg{-webkit-transform:skewY(-6deg) scale(1);transform:skewY(-6deg) scale(1)}#banners{padding:25px 0}#banners ul{width:92%}#banners ul li{width:48%}#banners ul li img{width:100%}.sp_il{display:inline}.sp_bl{display:block}.sp_ib{display:inline-block}@-webkit-keyframes b{0%{background-position:0 0}50%{-webkit-transform:translateY(5px);transform:translateY(5px)}to{background-position:0 -150px}}@keyframes b{0%{background-position:0 0}50%{-webkit-transform:translateY(5px);transform:translateY(5px)}to{background-position:0 -150px}}}