@charset "UTF-8";body.fancybox-active{overflow:hidden}body.fancybox-iosfix{position:fixed;left:0;right:0}.fancybox-is-hidden{position:absolute;top:-9999px;left:-9999px;visibility:hidden}.fancybox-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:99992;-webkit-tap-highlight-color:transparent;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform:translateZ(0);transform:translateZ(0);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.fancybox-bg,.fancybox-inner,.fancybox-outer,.fancybox-stage{position:absolute;top:0;right:0;bottom:0;left:0}.fancybox-outer{overflow-y:auto;-webkit-overflow-scrolling:touch}.fancybox-bg{background:#1e1e1e;opacity:0;-webkit-transition-duration:inherit;transition-duration:inherit;-webkit-transition-property:opacity;transition-property:opacity;-webkit-transition-timing-function:cubic-bezier(.47,0,.74,.71);transition-timing-function:cubic-bezier(.47,0,.74,.71)}.fancybox-is-open .fancybox-bg{opacity:.87;-webkit-transition-timing-function:cubic-bezier(.22,.61,.36,1);transition-timing-function:cubic-bezier(.22,.61,.36,1)}.fancybox-caption-wrap,.fancybox-infobar,.fancybox-toolbar{position:absolute;direction:ltr;z-index:99997;opacity:0;visibility:hidden;-webkit-transition:opacity .25s,visibility 0s linear .25s;transition:opacity .25s,visibility 0s linear .25s;-webkit-box-sizing:border-box;box-sizing:border-box}.fancybox-show-caption .fancybox-caption-wrap,.fancybox-show-infobar .fancybox-infobar,.fancybox-show-toolbar .fancybox-toolbar{opacity:1;visibility:visible;-webkit-transition:opacity .25s,visibility 0s;transition:opacity .25s,visibility 0s}.fancybox-infobar{top:0;left:0;font-size:13px;padding:0 10px;height:44px;min-width:44px;line-height:44px;color:#ccc;text-align:center;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:subpixel-antialiased;mix-blend-mode:exclusion}.fancybox-toolbar{top:0;right:0;margin:0;padding:0}.fancybox-stage{overflow:hidden;direction:ltr;z-index:99994;-webkit-transform:translateZ(0)}.fancybox-is-closing .fancybox-stage{overflow:visible}.fancybox-slide{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;padding:0;overflow:auto;outline:none;white-space:normal;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center;z-index:99994;-webkit-overflow-scrolling:touch;display:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition-property:opacity,-webkit-transform;-webkit-transition-property:opacity,-webkit-transform;transition-property:transform,opacity;transition-property:transform,opacity,-webkit-transform}.fancybox-slide:before{content:"";display:inline-block;vertical-align:middle;height:100%;width:0}.fancybox-is-sliding .fancybox-slide,.fancybox-slide--current,.fancybox-slide--next,.fancybox-slide--previous{display:block}.fancybox-slide--image{overflow:visible}.fancybox-slide--image:before{display:none}.fancybox-slide--video .fancybox-content,.fancybox-slide--video iframe{background:#000}.fancybox-slide--map .fancybox-content,.fancybox-slide--map iframe{background:#e5e3df}.fancybox-slide--next{z-index:99995}.fancybox-slide>*{display:inline-block;position:relative;padding:24px;margin:44px 0;border-width:0;vertical-align:middle;text-align:left;background-color:#fff;overflow:auto;-webkit-box-sizing:border-box;box-sizing:border-box}.fancybox-slide>base,.fancybox-slide>link,.fancybox-slide>meta,.fancybox-slide>script,.fancybox-slide>style,.fancybox-slide>title{display:none}.fancybox-slide .fancybox-image-wrap{position:absolute;top:0;left:0;margin:0;padding:0;border:0;z-index:99995;background:transparent;cursor:default;overflow:visible;-webkit-transform-origin:top left;transform-origin:top left;background-size:100% 100%;background-repeat:no-repeat;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition-property:opacity,-webkit-transform;-webkit-transition-property:opacity,-webkit-transform;transition-property:transform,opacity;transition-property:transform,opacity,-webkit-transform}.fancybox-can-zoomOut .fancybox-image-wrap{cursor:-webkit-zoom-out;cursor:zoom-out}.fancybox-can-zoomIn .fancybox-image-wrap{cursor:-webkit-zoom-in;cursor:zoom-in}.fancybox-can-drag .fancybox-image-wrap{cursor:-webkit-grab;cursor:grab}.fancybox-is-dragging .fancybox-image-wrap{cursor:-webkit-grabbing;cursor:grabbing}.fancybox-image,.fancybox-spaceball{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;padding:0;border:0;max-width:none;max-height:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.fancybox-spaceball{z-index:1}.fancybox-slide--iframe .fancybox-content{padding:0;width:80%;height:80%;max-width:calc(100% - 100px);max-height:calc(100% - 88px);overflow:visible;background:#fff}.fancybox-iframe{display:block;padding:0;border:0;height:100%}.fancybox-error,.fancybox-iframe{margin:0;width:100%;background:#fff}.fancybox-error{padding:40px;max-width:380px;cursor:default}.fancybox-error p{margin:0;padding:0;color:#444;font-size:16px;line-height:20px}.fancybox-button{-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;vertical-align:top;width:44px;height:44px;margin:0;padding:10px;border:0;border-radius:0;background:rgba(30,30,30,.6);-webkit-transition:color .3s ease;transition:color .3s ease;cursor:pointer;outline:none}.fancybox-button,.fancybox-button:link,.fancybox-button:visited{color:#ccc}.fancybox-button:focus,.fancybox-button:hover{color:#fff}.fancybox-button[disabled]{color:#ccc;cursor:default;opacity:.6}.fancybox-button svg{display:block;position:relative;overflow:visible;shape-rendering:geometricPrecision}.fancybox-button svg path{fill:currentColor;stroke:currentColor;stroke-linejoin:round;stroke-width:3}.fancybox-button--share svg path{stroke-width:1}.fancybox-button--pause svg path:nth-child(1),.fancybox-button--play svg path:nth-child(2){display:none}.fancybox-button--zoom svg path{fill:transparent}.fancybox-navigation{display:none}.fancybox-show-nav .fancybox-navigation{display:block}.fancybox-navigation button{position:absolute;top:50%;margin:-50px 0 0;z-index:99997;background:transparent;width:60px;height:100px;padding:17px}.fancybox-navigation button:before{content:"";position:absolute;top:30px;right:10px;width:40px;height:40px;background:rgba(30,30,30,.6)}.fancybox-navigation .fancybox-button--arrow_left{left:0}.fancybox-navigation .fancybox-button--arrow_right{right:0}.fancybox-close-small{position:absolute;top:0;right:0;width:44px;height:44px;padding:0;margin:0;border:0;border-radius:0;background:transparent;z-index:10;cursor:pointer}.fancybox-close-small:after{content:"\D7";position:absolute;top:5px;right:5px;width:30px;height:30px;font:20px/30px Arial,Helvetica Neue,Helvetica,sans-serif;color:#888;font-weight:300;text-align:center;border-radius:50%;border-width:0;background-color:transparent;-webkit-transition:background-color .25s;transition:background-color .25s;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:2}.fancybox-close-small:focus{outline:none}.fancybox-close-small:focus:after{outline:1px dotted #888}.fancybox-close-small:hover:after{color:#555;background:#eee}.fancybox-slide--iframe .fancybox-close-small,.fancybox-slide--image .fancybox-close-small{top:0;right:-44px}.fancybox-slide--iframe .fancybox-close-small:after,.fancybox-slide--image .fancybox-close-small:after{font-size:35px;color:#aaa}.fancybox-slide--iframe .fancybox-close-small:hover:after,.fancybox-slide--image .fancybox-close-small:hover:after{color:#fff;background:transparent}.fancybox-is-scaling .fancybox-close-small,.fancybox-is-zoomable.fancybox-can-drag .fancybox-close-small{display:none}.fancybox-caption-wrap{bottom:0;left:0;right:0;padding:60px 2vw 0;background:-webkit-gradient(linear,left top, left bottom,color-stop(0, transparent),color-stop(20%, rgba(0,0,0,.1)),color-stop(40%, rgba(0,0,0,.2)),color-stop(80%, rgba(0,0,0,.6)),to(rgba(0,0,0,.8)));background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.1) 20%,rgba(0,0,0,.2) 40%,rgba(0,0,0,.6) 80%,rgba(0,0,0,.8));pointer-events:none}.fancybox-caption{padding:30px 0;border-top:1px solid hsla(0,0%,100%,.4);font-size:14px;color:#fff;line-height:20px;-webkit-text-size-adjust:none}.fancybox-caption a,.fancybox-caption button,.fancybox-caption select{pointer-events:all;position:relative}.fancybox-caption a{color:#fff;text-decoration:underline}.fancybox-slide>.fancybox-loading{border:6px solid hsla(0,0%,39%,.4);border-top:6px solid hsla(0,0%,100%,.6);border-radius:100%;height:50px;width:50px;-webkit-animation:a .8s infinite linear;animation:a .8s infinite linear;background:transparent;position:absolute;top:50%;left:50%;margin-top:-30px;margin-left:-30px;z-index:99999}@-webkit-keyframes a{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes a{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fancybox-animated{-webkit-transition-timing-function:cubic-bezier(0,0,.25,1);transition-timing-function:cubic-bezier(0,0,.25,1)}.fancybox-fx-slide.fancybox-slide--previous{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);opacity:0}.fancybox-fx-slide.fancybox-slide--next{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}.fancybox-fx-slide.fancybox-slide--current{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}.fancybox-fx-fade.fancybox-slide--next,.fancybox-fx-fade.fancybox-slide--previous{opacity:0;-webkit-transition-timing-function:cubic-bezier(.19,1,.22,1);transition-timing-function:cubic-bezier(.19,1,.22,1)}.fancybox-fx-fade.fancybox-slide--current{opacity:1}.fancybox-fx-zoom-in-out.fancybox-slide--previous{-webkit-transform:scale3d(1.5,1.5,1.5);transform:scale3d(1.5,1.5,1.5);opacity:0}.fancybox-fx-zoom-in-out.fancybox-slide--next{-webkit-transform:scale3d(.5,.5,.5);transform:scale3d(.5,.5,.5);opacity:0}.fancybox-fx-zoom-in-out.fancybox-slide--current{-webkit-transform:scaleX(1);transform:scaleX(1);opacity:1}.fancybox-fx-rotate.fancybox-slide--previous{-webkit-transform:rotate(-1turn);transform:rotate(-1turn);opacity:0}.fancybox-fx-rotate.fancybox-slide--next{-webkit-transform:rotate(1turn);transform:rotate(1turn);opacity:0}.fancybox-fx-rotate.fancybox-slide--current{-webkit-transform:rotate(0deg);transform:rotate(0deg);opacity:1}.fancybox-fx-circular.fancybox-slide--previous{-webkit-transform:scale3d(0,0,0) translate3d(-100%,0,0);transform:scale3d(0,0,0) translate3d(-100%,0,0);opacity:0}.fancybox-fx-circular.fancybox-slide--next{-webkit-transform:scale3d(0,0,0) translate3d(100%,0,0);transform:scale3d(0,0,0) translate3d(100%,0,0);opacity:0}.fancybox-fx-circular.fancybox-slide--current{-webkit-transform:scaleX(1) translateZ(0);transform:scaleX(1) translateZ(0);opacity:1}.fancybox-fx-tube.fancybox-slide--previous{-webkit-transform:translate3d(-100%,0,0) scale(.1) skew(-10deg);transform:translate3d(-100%,0,0) scale(.1) skew(-10deg)}.fancybox-fx-tube.fancybox-slide--next{-webkit-transform:translate3d(100%,0,0) scale(.1) skew(10deg);transform:translate3d(100%,0,0) scale(.1) skew(10deg)}.fancybox-fx-tube.fancybox-slide--current{-webkit-transform:translateZ(0) scale(1);transform:translateZ(0) scale(1)}.fancybox-share{padding:30px;border-radius:3px;background:#f4f4f4;max-width:90%}.fancybox-share h1{color:#222;margin:0 0 20px;font-size:33px;font-weight:700;text-align:center}.fancybox-share p{margin:0;padding:0;text-align:center}.fancybox-share p:first-of-type{margin-right:-10px}.fancybox-share_button{display:inline-block;text-decoration:none;margin:0 10px 10px 0;padding:10px 20px;border:0;border-radius:3px;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.16);box-shadow:0 2px 2px 0 rgba(0,0,0,.16);background:#fff;white-space:nowrap;font-size:16px;line-height:23px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;min-width:140px;color:#707070;-webkit-transition:all .2s;transition:all .2s}.fancybox-share_button:focus,.fancybox-share_button:hover{text-decoration:none;color:#333;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.3);box-shadow:0 2px 2px 0 rgba(0,0,0,.3)}.fancybox-share_button svg{margin-right:5px;width:20px;height:20px;vertical-align:text-bottom}.fancybox-share input{-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;margin:5px 0 0;padding:10px 15px;border:1px solid #d7d7d7;border-radius:3px;background:#ebebeb;color:#5d5b5b;font-size:14px;outline:none}.fancybox-thumbs{display:none;position:absolute;top:0;bottom:0;right:0;width:212px;margin:0;padding:2px 2px 4px;background:#fff;-webkit-tap-highlight-color:transparent;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:99995}.fancybox-thumbs-x{overflow-y:hidden;overflow-x:auto}.fancybox-show-thumbs .fancybox-thumbs{display:block}.fancybox-show-thumbs .fancybox-inner{right:212px}.fancybox-thumbs>ul{list-style:none;position:absolute;position:relative;width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:auto;font-size:0;white-space:nowrap}.fancybox-thumbs-x>ul{overflow:hidden}.fancybox-thumbs-y>ul::-webkit-scrollbar{width:7px}.fancybox-thumbs-y>ul::-webkit-scrollbar-track{background:#fff;border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);box-shadow:inset 0 0 6px rgba(0,0,0,.3)}.fancybox-thumbs-y>ul::-webkit-scrollbar-thumb{background:#2a2a2a;border-radius:10px}.fancybox-thumbs>ul>li{float:left;overflow:hidden;padding:0;margin:2px;width:100px;height:75px;max-width:calc(50% - 4px);max-height:calc(100% - 8px);position:relative;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}li.fancybox-thumbs-loading{background:rgba(0,0,0,.1)}.fancybox-thumbs>ul>li>img{position:absolute;top:0;left:0;max-width:none;max-height:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.fancybox-thumbs>ul>li:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:4px solid #4ea7f9;z-index:99991;opacity:0;-webkit-transition:all .2s cubic-bezier(.25,.46,.45,.94);transition:all .2s cubic-bezier(.25,.46,.45,.94)}.fancybox-thumbs>ul>li.fancybox-thumbs-active:before{opacity:1}@media (max-width:800px){.fancybox-thumbs{width:110px}.fancybox-show-thumbs .fancybox-inner{right:110px}.fancybox-thumbs>ul>li{max-width:calc(100% - 10px)}}@charset "UTF-8"; @charset "UTF-8"; html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; } html { line-height: 1; } ol, ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } q, blockquote { quotes: none; } q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; } a img { border: none; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } @-webkit-keyframes sk-scaleout { 0% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } @keyframes sk-scaleout { 0% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } /* top */ @-webkit-keyframes fade-in-up { from { -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes fade-in-up { from { -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @-webkit-keyframes fade-in-down { from { -webkit-transform: translate(0, -20px); transform: translate(0, -20px); opacity: 0; } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; } } @keyframes fade-in-down { from { -webkit-transform: translate(0, -20px); transform: translate(0, -20px); opacity: 0; } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; } } @-webkit-keyframes scrollAnimaiton { 0% { -webkit-transform: translate(0, -30px); transform: translate(0, -30px); } 50% { opacity: 1; } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 0; } } @keyframes scrollAnimaiton { 0% { -webkit-transform: translate(0, -30px); transform: translate(0, -30px); } 50% { opacity: 1; } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 0; } } @-webkit-keyframes left-right-up { 0% { -webkit-transform: translate(-100px, 100px) scale(0.7); transform: translate(-100px, 100px) scale(0.7); opacity: 0; } 14% { -webkit-transform: translate(74px, -74px) scale(1.12); transform: translate(74px, -74px) scale(1.12); opacity: 1.37; } 28% { -webkit-transform: translate(-32px, 32px) scale(0.9); transform: translate(-32px, 32px) scale(0.9); opacity: 0.84; } 46% { -webkit-transform: translate(8px, -8px) scale(1.02); transform: translate(8px, -8px) scale(1.02); opacity: 1.04; } 58% { -webkit-transform: translate(-3.28px, 3.28px) scale(0.99); transform: translate(-3.28px, 3.28px) scale(0.99); opacity: 0.95; } 74% { -webkit-transform: translate(1.16px, -1.16px) scale(1); transform: translate(1.16px, -1.16px) scale(1); opacity: 1; } 89% { -webkit-transform: translate(-1.5px, 1.5px) scale(0.99); transform: translate(-1.5px, 1.5px) scale(0.99); opacity: 0.99; } 100% { -webkit-transform: translate(0, 0) scale(1); transform: translate(0, 0) scale(1); opacity: 1; } } @keyframes left-right-up { 0% { -webkit-transform: translate(-100px, 100px) scale(0.7); transform: translate(-100px, 100px) scale(0.7); opacity: 0; } 14% { -webkit-transform: translate(74px, -74px) scale(1.12); transform: translate(74px, -74px) scale(1.12); opacity: 1.37; } 28% { -webkit-transform: translate(-32px, 32px) scale(0.9); transform: translate(-32px, 32px) scale(0.9); opacity: 0.84; } 46% { -webkit-transform: translate(8px, -8px) scale(1.02); transform: translate(8px, -8px) scale(1.02); opacity: 1.04; } 58% { -webkit-transform: translate(-3.28px, 3.28px) scale(0.99); transform: translate(-3.28px, 3.28px) scale(0.99); opacity: 0.95; } 74% { -webkit-transform: translate(1.16px, -1.16px) scale(1); transform: translate(1.16px, -1.16px) scale(1); opacity: 1; } 89% { -webkit-transform: translate(-1.5px, 1.5px) scale(0.99); transform: translate(-1.5px, 1.5px) scale(0.99); opacity: 0.99; } 100% { -webkit-transform: translate(0, 0) scale(1); transform: translate(0, 0) scale(1); opacity: 1; } } @-webkit-keyframes scale-in { 0% { -webkit-transform: translate(0, -50px) scale(5); transform: translate(0, -50px) scale(5); opacity: 0; } 100% { -webkit-transform: translate(0, 0) scale(1); transform: translate(0, 0) scale(1); opacity: 1; } } @keyframes scale-in { 0% { -webkit-transform: translate(0, -50px) scale(5); transform: translate(0, -50px) scale(5); opacity: 0; } 100% { -webkit-transform: translate(0, 0) scale(1); transform: translate(0, 0) scale(1); opacity: 1; } } @-webkit-keyframes right-left-up { 0% { -webkit-transform: translate(100px, 100px) scale(0.7); transform: translate(100px, 100px) scale(0.7); opacity: 0; } 14% { -webkit-transform: translate(-74px, -74px) scale(1.1); transform: translate(-74px, -74px) scale(1.1); opacity: 1.37; } 28% { -webkit-transform: translate(32px, 32px) scale(0.95); transform: translate(32px, 32px) scale(0.95); opacity: 0.84; } 46% { -webkit-transform: translate(-8px, -8px) scale(1.012); transform: translate(-8px, -8px) scale(1.012); opacity: 1.04; } 58% { -webkit-transform: translate(3.28px, 3.28px) scale(0.99); transform: translate(3.28px, 3.28px) scale(0.99); opacity: 0.98; } 74% { -webkit-transform: translate(-1.16px, -1.16px) scale(1); transform: translate(-1.16px, -1.16px) scale(1); opacity: 1.0058; } 89% { -webkit-transform: translate(0.4px, 0.4px) scale(0.99); transform: translate(0.4px, 0.4px) scale(0.99); opacity: 0.99; } 100% { -webkit-transform: translate(0, 0) scale(1); transform: translate(0, 0) scale(1); opacity: 1; } } @keyframes right-left-up { 0% { -webkit-transform: translate(100px, 100px) scale(0.7); transform: translate(100px, 100px) scale(0.7); opacity: 0; } 14% { -webkit-transform: translate(-74px, -74px) scale(1.1); transform: translate(-74px, -74px) scale(1.1); opacity: 1.37; } 28% { -webkit-transform: translate(32px, 32px) scale(0.95); transform: translate(32px, 32px) scale(0.95); opacity: 0.84; } 46% { -webkit-transform: translate(-8px, -8px) scale(1.012); transform: translate(-8px, -8px) scale(1.012); opacity: 1.04; } 58% { -webkit-transform: translate(3.28px, 3.28px) scale(0.99); transform: translate(3.28px, 3.28px) scale(0.99); opacity: 0.98; } 74% { -webkit-transform: translate(-1.16px, -1.16px) scale(1); transform: translate(-1.16px, -1.16px) scale(1); opacity: 1.0058; } 89% { -webkit-transform: translate(0.4px, 0.4px) scale(0.99); transform: translate(0.4px, 0.4px) scale(0.99); opacity: 0.99; } 100% { -webkit-transform: translate(0, 0) scale(1); transform: translate(0, 0) scale(1); opacity: 1; } } @-webkit-keyframes fall-in { 0% { -webkit-transform: translate(0, -50px) scale(1.1); transform: translate(0, -50px) scale(1.1); opacity: 0; } 10% { opacity: 1; } 100% { -webkit-transform: translate(0, 0) scale(1); transform: translate(0, 0) scale(1); opacity: 1; } } @keyframes fall-in { 0% { -webkit-transform: translate(0, -50px) scale(1.1); transform: translate(0, -50px) scale(1.1); opacity: 0; } 10% { opacity: 1; } 100% { -webkit-transform: translate(0, 0) scale(1); transform: translate(0, 0) scale(1); opacity: 1; } } @-webkit-keyframes slide-left-in { from { -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); opacity: 0; } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; } } @keyframes slide-left-in { from { -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); opacity: 0; } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; } } @-webkit-keyframes slide-right-in { from { -webkit-transform: translate(100%, 0); transform: translate(100%, 0); opacity: 0; } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; } } @keyframes slide-right-in { from { -webkit-transform: translate(100%, 0); transform: translate(100%, 0); opacity: 0; } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; } } @-webkit-keyframes flash-fade-in { 0% { opacity: 0; } 90% { -webkit-transform: scale(1.11); transform: scale(1.11); } 100% { opacity: 1; } } @keyframes flash-fade-in { 0% { opacity: 0; } 90% { -webkit-transform: scale(1.11); transform: scale(1.11); } 100% { opacity: 1; } } @-webkit-keyframes flash-fade-in2 { 0% { opacity: 0; -webkit-transform: scale(1.3); transform: scale(1.3); } 50% { -webkit-transform: scale(1.3); transform: scale(1.3); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes flash-fade-in2 { 0% { opacity: 0; -webkit-transform: scale(1.3); transform: scale(1.3); } 50% { -webkit-transform: scale(1.3); transform: scale(1.3); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes flash-fade-in3 { 0% { opacity: 0; -webkit-transform: scale(2) translate(100px, -100px) rotate(5.5deg); transform: scale(2) translate(100px, -100px) rotate(5.5deg); } 50% { -webkit-transform: scale(1) translate(20px, -20px); transform: scale(1) translate(20px, -20px); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes flash-fade-in3 { 0% { opacity: 0; -webkit-transform: scale(2) translate(100px, -100px) rotate(5.5deg); transform: scale(2) translate(100px, -100px) rotate(5.5deg); } 50% { -webkit-transform: scale(1) translate(20px, -20px); transform: scale(1) translate(20px, -20px); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes shake-rotate { 2% { -webkit-transform: translate(0.5px, -0.5px) rotate(0.5deg); transform: translate(0.5px, -0.5px) rotate(0.5deg); } 4% { -webkit-transform: translate(2.5px, 1.5px) rotate(1.5deg); transform: translate(2.5px, 1.5px) rotate(1.5deg); } 6% { -webkit-transform: translate(2.5px, 0.5px) rotate(0.5deg); transform: translate(2.5px, 0.5px) rotate(0.5deg); } 8% { -webkit-transform: translate(0.5px, -0.5px) rotate(0.5deg); transform: translate(0.5px, -0.5px) rotate(0.5deg); } 10% { -webkit-transform: translate(-0.5px, -1.5px) rotate(1.5deg); transform: translate(-0.5px, -1.5px) rotate(1.5deg); } 12% { -webkit-transform: translate(-0.5px, 0.5px) rotate(1.5deg); transform: translate(-0.5px, 0.5px) rotate(1.5deg); } 14% { -webkit-transform: translate(-1.5px, 1.5px) rotate(1.5deg); transform: translate(-1.5px, 1.5px) rotate(1.5deg); } 16% { -webkit-transform: translate(2.5px, 1.5px) rotate(1.5deg); transform: translate(2.5px, 1.5px) rotate(1.5deg); } 18% { -webkit-transform: translate(0.5px, -0.5px) rotate(-0.5deg); transform: translate(0.5px, -0.5px) rotate(-0.5deg); } 20% { -webkit-transform: translate(0.5px, 1.5px) rotate(0.5deg); transform: translate(0.5px, 1.5px) rotate(0.5deg); } 22% { -webkit-transform: translate(2.5px, -0.5px) rotate(0.5deg); transform: translate(2.5px, -0.5px) rotate(0.5deg); } 24% { -webkit-transform: translate(-0.5px, 0.5px) rotate(1.5deg); transform: translate(-0.5px, 0.5px) rotate(1.5deg); } 26% { -webkit-transform: translate(-1.5px, 0.5px) rotate(1.5deg); transform: translate(-1.5px, 0.5px) rotate(1.5deg); } 28% { -webkit-transform: translate(0.5px, 0.5px) rotate(-0.5deg); transform: translate(0.5px, 0.5px) rotate(-0.5deg); } 30% { -webkit-transform: translate(1.5px, 1.5px) rotate(1.5deg); transform: translate(1.5px, 1.5px) rotate(1.5deg); } 32% { -webkit-transform: translate(0.5px, 0.5px) rotate(0.5deg); transform: translate(0.5px, 0.5px) rotate(0.5deg); } 34% { -webkit-transform: translate(1.5px, -1.5px) rotate(-0.5deg); transform: translate(1.5px, -1.5px) rotate(-0.5deg); } 36% { -webkit-transform: translate(1.5px, 2.5px) rotate(1.5deg); transform: translate(1.5px, 2.5px) rotate(1.5deg); } 38% { -webkit-transform: translate(-1.5px, 0.5px) rotate(-0.5deg); transform: translate(-1.5px, 0.5px) rotate(-0.5deg); } 40% { -webkit-transform: translate(0.5px, -0.5px) rotate(1.5deg); transform: translate(0.5px, -0.5px) rotate(1.5deg); } 42% { -webkit-transform: translate(2.5px, -1.5px) rotate(-0.5deg); transform: translate(2.5px, -1.5px) rotate(-0.5deg); } 44% { -webkit-transform: translate(-1.5px, -1.5px) rotate(0.5deg); transform: translate(-1.5px, -1.5px) rotate(0.5deg); } 46% { -webkit-transform: translate(1.5px, 0.5px) rotate(0.5deg); transform: translate(1.5px, 0.5px) rotate(0.5deg); } 48% { -webkit-transform: translate(0.5px, -0.5px) rotate(-0.5deg); transform: translate(0.5px, -0.5px) rotate(-0.5deg); } 50% { -webkit-transform: translate(0.5px, 1.5px) rotate(0.5deg); transform: translate(0.5px, 1.5px) rotate(0.5deg); } 52% { -webkit-transform: translate(0.5px, -0.5px) rotate(0.5deg); transform: translate(0.5px, -0.5px) rotate(0.5deg); } 54% { -webkit-transform: translate(2.5px, 0.5px) rotate(1.5deg); transform: translate(2.5px, 0.5px) rotate(1.5deg); } 56% { -webkit-transform: translate(-1.5px, -1.5px) rotate(0.5deg); transform: translate(-1.5px, -1.5px) rotate(0.5deg); } 58% { -webkit-transform: translate(-1.5px, -0.5px) rotate(-0.5deg); transform: translate(-1.5px, -0.5px) rotate(-0.5deg); } 60% { -webkit-transform: translate(0.5px, -1.5px) rotate(0.5deg); transform: translate(0.5px, -1.5px) rotate(0.5deg); } 62% { -webkit-transform: translate(1.5px, 1.5px) rotate(0.5deg); transform: translate(1.5px, 1.5px) rotate(0.5deg); } 64% { -webkit-transform: translate(0.5px, 2.5px) rotate(0.5deg); transform: translate(0.5px, 2.5px) rotate(0.5deg); } 66% { -webkit-transform: translate(0.5px, 0.5px) rotate(1.5deg); transform: translate(0.5px, 0.5px) rotate(1.5deg); } 68% { -webkit-transform: translate(-1.5px, 2.5px) rotate(0.5deg); transform: translate(-1.5px, 2.5px) rotate(0.5deg); } 70% { -webkit-transform: translate(-1.5px, 1.5px) rotate(1.5deg); transform: translate(-1.5px, 1.5px) rotate(1.5deg); } 72% { -webkit-transform: translate(-0.5px, 2.5px) rotate(1.5deg); transform: translate(-0.5px, 2.5px) rotate(1.5deg); } 74% { -webkit-transform: translate(1.5px, 2.5px) rotate(-0.5deg); transform: translate(1.5px, 2.5px) rotate(-0.5deg); } 76% { -webkit-transform: translate(-0.5px, 0.5px) rotate(1.5deg); transform: translate(-0.5px, 0.5px) rotate(1.5deg); } 78% { -webkit-transform: translate(1.5px, -1.5px) rotate(0.5deg); transform: translate(1.5px, -1.5px) rotate(0.5deg); } 80% { -webkit-transform: translate(-0.5px, 2.5px) rotate(0.5deg); transform: translate(-0.5px, 2.5px) rotate(0.5deg); } 82% { -webkit-transform: translate(-1.5px, -1.5px) rotate(1.5deg); transform: translate(-1.5px, -1.5px) rotate(1.5deg); } 84% { -webkit-transform: translate(1.5px, 1.5px) rotate(0.5deg); transform: translate(1.5px, 1.5px) rotate(0.5deg); } 86% { -webkit-transform: translate(0.5px, -0.5px) rotate(-0.5deg); transform: translate(0.5px, -0.5px) rotate(-0.5deg); } 88% { -webkit-transform: translate(-1.5px, 2.5px) rotate(-0.5deg); transform: translate(-1.5px, 2.5px) rotate(-0.5deg); } 90% { -webkit-transform: translate(1.5px, 0.5px) rotate(0.5deg); transform: translate(1.5px, 0.5px) rotate(0.5deg); } 92% { -webkit-transform: translate(0.5px, -1.5px) rotate(0.5deg); transform: translate(0.5px, -1.5px) rotate(0.5deg); } 94% { -webkit-transform: translate(0.5px, -1.5px) rotate(1.5deg); transform: translate(0.5px, -1.5px) rotate(1.5deg); } 96% { -webkit-transform: translate(0.5px, 1.5px) rotate(-0.5deg); transform: translate(0.5px, 1.5px) rotate(-0.5deg); } 98% { -webkit-transform: translate(-0.5px, -0.5px) rotate(0.5deg); transform: translate(-0.5px, -0.5px) rotate(0.5deg); } 0%, 100% { -webkit-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } } @keyframes shake-rotate { 2% { -webkit-transform: translate(0.5px, -0.5px) rotate(0.5deg); transform: translate(0.5px, -0.5px) rotate(0.5deg); } 4% { -webkit-transform: translate(2.5px, 1.5px) rotate(1.5deg); transform: translate(2.5px, 1.5px) rotate(1.5deg); } 6% { -webkit-transform: translate(2.5px, 0.5px) rotate(0.5deg); transform: translate(2.5px, 0.5px) rotate(0.5deg); } 8% { -webkit-transform: translate(0.5px, -0.5px) rotate(0.5deg); transform: translate(0.5px, -0.5px) rotate(0.5deg); } 10% { -webkit-transform: translate(-0.5px, -1.5px) rotate(1.5deg); transform: translate(-0.5px, -1.5px) rotate(1.5deg); } 12% { -webkit-transform: translate(-0.5px, 0.5px) rotate(1.5deg); transform: translate(-0.5px, 0.5px) rotate(1.5deg); } 14% { -webkit-transform: translate(-1.5px, 1.5px) rotate(1.5deg); transform: translate(-1.5px, 1.5px) rotate(1.5deg); } 16% { -webkit-transform: translate(2.5px, 1.5px) rotate(1.5deg); transform: translate(2.5px, 1.5px) rotate(1.5deg); } 18% { -webkit-transform: translate(0.5px, -0.5px) rotate(-0.5deg); transform: translate(0.5px, -0.5px) rotate(-0.5deg); } 20% { -webkit-transform: translate(0.5px, 1.5px) rotate(0.5deg); transform: translate(0.5px, 1.5px) rotate(0.5deg); } 22% { -webkit-transform: translate(2.5px, -0.5px) rotate(0.5deg); transform: translate(2.5px, -0.5px) rotate(0.5deg); } 24% { -webkit-transform: translate(-0.5px, 0.5px) rotate(1.5deg); transform: translate(-0.5px, 0.5px) rotate(1.5deg); } 26% { -webkit-transform: translate(-1.5px, 0.5px) rotate(1.5deg); transform: translate(-1.5px, 0.5px) rotate(1.5deg); } 28% { -webkit-transform: translate(0.5px, 0.5px) rotate(-0.5deg); transform: translate(0.5px, 0.5px) rotate(-0.5deg); } 30% { -webkit-transform: translate(1.5px, 1.5px) rotate(1.5deg); transform: translate(1.5px, 1.5px) rotate(1.5deg); } 32% { -webkit-transform: translate(0.5px, 0.5px) rotate(0.5deg); transform: translate(0.5px, 0.5px) rotate(0.5deg); } 34% { -webkit-transform: translate(1.5px, -1.5px) rotate(-0.5deg); transform: translate(1.5px, -1.5px) rotate(-0.5deg); } 36% { -webkit-transform: translate(1.5px, 2.5px) rotate(1.5deg); transform: translate(1.5px, 2.5px) rotate(1.5deg); } 38% { -webkit-transform: translate(-1.5px, 0.5px) rotate(-0.5deg); transform: translate(-1.5px, 0.5px) rotate(-0.5deg); } 40% { -webkit-transform: translate(0.5px, -0.5px) rotate(1.5deg); transform: translate(0.5px, -0.5px) rotate(1.5deg); } 42% { -webkit-transform: translate(2.5px, -1.5px) rotate(-0.5deg); transform: translate(2.5px, -1.5px) rotate(-0.5deg); } 44% { -webkit-transform: translate(-1.5px, -1.5px) rotate(0.5deg); transform: translate(-1.5px, -1.5px) rotate(0.5deg); } 46% { -webkit-transform: translate(1.5px, 0.5px) rotate(0.5deg); transform: translate(1.5px, 0.5px) rotate(0.5deg); } 48% { -webkit-transform: translate(0.5px, -0.5px) rotate(-0.5deg); transform: translate(0.5px, -0.5px) rotate(-0.5deg); } 50% { -webkit-transform: translate(0.5px, 1.5px) rotate(0.5deg); transform: translate(0.5px, 1.5px) rotate(0.5deg); } 52% { -webkit-transform: translate(0.5px, -0.5px) rotate(0.5deg); transform: translate(0.5px, -0.5px) rotate(0.5deg); } 54% { -webkit-transform: translate(2.5px, 0.5px) rotate(1.5deg); transform: translate(2.5px, 0.5px) rotate(1.5deg); } 56% { -webkit-transform: translate(-1.5px, -1.5px) rotate(0.5deg); transform: translate(-1.5px, -1.5px) rotate(0.5deg); } 58% { -webkit-transform: translate(-1.5px, -0.5px) rotate(-0.5deg); transform: translate(-1.5px, -0.5px) rotate(-0.5deg); } 60% { -webkit-transform: translate(0.5px, -1.5px) rotate(0.5deg); transform: translate(0.5px, -1.5px) rotate(0.5deg); } 62% { -webkit-transform: translate(1.5px, 1.5px) rotate(0.5deg); transform: translate(1.5px, 1.5px) rotate(0.5deg); } 64% { -webkit-transform: translate(0.5px, 2.5px) rotate(0.5deg); transform: translate(0.5px, 2.5px) rotate(0.5deg); } 66% { -webkit-transform: translate(0.5px, 0.5px) rotate(1.5deg); transform: translate(0.5px, 0.5px) rotate(1.5deg); } 68% { -webkit-transform: translate(-1.5px, 2.5px) rotate(0.5deg); transform: translate(-1.5px, 2.5px) rotate(0.5deg); } 70% { -webkit-transform: translate(-1.5px, 1.5px) rotate(1.5deg); transform: translate(-1.5px, 1.5px) rotate(1.5deg); } 72% { -webkit-transform: translate(-0.5px, 2.5px) rotate(1.5deg); transform: translate(-0.5px, 2.5px) rotate(1.5deg); } 74% { -webkit-transform: translate(1.5px, 2.5px) rotate(-0.5deg); transform: translate(1.5px, 2.5px) rotate(-0.5deg); } 76% { -webkit-transform: translate(-0.5px, 0.5px) rotate(1.5deg); transform: translate(-0.5px, 0.5px) rotate(1.5deg); } 78% { -webkit-transform: translate(1.5px, -1.5px) rotate(0.5deg); transform: translate(1.5px, -1.5px) rotate(0.5deg); } 80% { -webkit-transform: translate(-0.5px, 2.5px) rotate(0.5deg); transform: translate(-0.5px, 2.5px) rotate(0.5deg); } 82% { -webkit-transform: translate(-1.5px, -1.5px) rotate(1.5deg); transform: translate(-1.5px, -1.5px) rotate(1.5deg); } 84% { -webkit-transform: translate(1.5px, 1.5px) rotate(0.5deg); transform: translate(1.5px, 1.5px) rotate(0.5deg); } 86% { -webkit-transform: translate(0.5px, -0.5px) rotate(-0.5deg); transform: translate(0.5px, -0.5px) rotate(-0.5deg); } 88% { -webkit-transform: translate(-1.5px, 2.5px) rotate(-0.5deg); transform: translate(-1.5px, 2.5px) rotate(-0.5deg); } 90% { -webkit-transform: translate(1.5px, 0.5px) rotate(0.5deg); transform: translate(1.5px, 0.5px) rotate(0.5deg); } 92% { -webkit-transform: translate(0.5px, -1.5px) rotate(0.5deg); transform: translate(0.5px, -1.5px) rotate(0.5deg); } 94% { -webkit-transform: translate(0.5px, -1.5px) rotate(1.5deg); transform: translate(0.5px, -1.5px) rotate(1.5deg); } 96% { -webkit-transform: translate(0.5px, 1.5px) rotate(-0.5deg); transform: translate(0.5px, 1.5px) rotate(-0.5deg); } 98% { -webkit-transform: translate(-0.5px, -0.5px) rotate(0.5deg); transform: translate(-0.5px, -0.5px) rotate(0.5deg); } 0%, 100% { -webkit-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } } @-webkit-keyframes infinite-shake { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 85%, 95%, 88% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 87.5%, 92.5%, 97.5% { -webkit-transform: translate3d(20px, -5px, 0); transform: translate3d(20px, -5px, 0); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes infinite-shake { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 85%, 95%, 88% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 87.5%, 92.5%, 97.5% { -webkit-transform: translate3d(20px, -5px, 0); transform: translate3d(20px, -5px, 0); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .fade-in { opacity: 0; -webkit-transition: 0.3s; transition: 0.3s; } .fade-in.run { opacity: 1; } @-webkit-keyframes fv-char-scale-in { 0% { -webkit-transform: translate(-100px, -100px) scale(5); transform: translate(-100px, -100px) scale(5); opacity: 0; } 50%, 80% { -webkit-transform: translate(0, 0) scale(0.6); transform: translate(0, 0) scale(0.6); opacity: 1; } 100% { -webkit-transform: translate(100px, 100px) scale(0.2); transform: translate(100px, 100px) scale(0.2); opacity: 0; } } @keyframes fv-char-scale-in { 0% { -webkit-transform: translate(-100px, -100px) scale(5); transform: translate(-100px, -100px) scale(5); opacity: 0; } 50%, 80% { -webkit-transform: translate(0, 0) scale(0.6); transform: translate(0, 0) scale(0.6); opacity: 1; } 100% { -webkit-transform: translate(100px, 100px) scale(0.2); transform: translate(100px, 100px) scale(0.2); opacity: 0; } } @-webkit-keyframes fv-char-scale-in-right { 0% { -webkit-transform: translate(-100px, -100px) scale(5); transform: translate(-100px, -100px) scale(5); opacity: 0; } 50%, 80% { -webkit-transform: translate(0, 0) scale(0.6); transform: translate(0, 0) scale(0.6); opacity: 1; } 100% { -webkit-transform: translate(-100px, 100px) scale(0.2); transform: translate(-100px, 100px) scale(0.2); opacity: 0; } } @keyframes fv-char-scale-in-right { 0% { -webkit-transform: translate(-100px, -100px) scale(5); transform: translate(-100px, -100px) scale(5); opacity: 0; } 50%, 80% { -webkit-transform: translate(0, 0) scale(0.6); transform: translate(0, 0) scale(0.6); opacity: 1; } 100% { -webkit-transform: translate(-100px, 100px) scale(0.2); transform: translate(-100px, 100px) scale(0.2); opacity: 0; } } @-webkit-keyframes fv-char-scale-in-sp { 0% { -webkit-transform: translate(-100px, -100px) scale(3); transform: translate(-100px, -100px) scale(3); opacity: 0; } 50%, 80% { -webkit-transform: translate(0, 0) scale(0.3); transform: translate(0, 0) scale(0.3); opacity: 1; } 100% { -webkit-transform: translate(100px, 100px) scale(0.1); transform: translate(100px, 100px) scale(0.1); opacity: 0; } } @keyframes fv-char-scale-in-sp { 0% { -webkit-transform: translate(-100px, -100px) scale(3); transform: translate(-100px, -100px) scale(3); opacity: 0; } 50%, 80% { -webkit-transform: translate(0, 0) scale(0.3); transform: translate(0, 0) scale(0.3); opacity: 1; } 100% { -webkit-transform: translate(100px, 100px) scale(0.1); transform: translate(100px, 100px) scale(0.1); opacity: 0; } } @-webkit-keyframes fv-char-scale-in-right-sp { 0% { -webkit-transform: translate(-100px, -100px) scale(3); transform: translate(-100px, -100px) scale(3); opacity: 0; } 50%, 80% { -webkit-transform: translate(0, 0) scale(0.3); transform: translate(0, 0) scale(0.3); opacity: 1; } 100% { -webkit-transform: translate(-100px, 100px) scale(0.1); transform: translate(-100px, 100px) scale(0.1); opacity: 0; } } @keyframes fv-char-scale-in-right-sp { 0% { -webkit-transform: translate(-100px, -100px) scale(3); transform: translate(-100px, -100px) scale(3); opacity: 0; } 50%, 80% { -webkit-transform: translate(0, 0) scale(0.3); transform: translate(0, 0) scale(0.3); opacity: 1; } 100% { -webkit-transform: translate(-100px, 100px) scale(0.1); transform: translate(-100px, 100px) scale(0.1); opacity: 0; } } @-webkit-keyframes loadingAnim { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 15% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } 30% { -webkit-transform: translateY(4px); transform: translateY(4px); } 45% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 60% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } 75% { -webkit-transform: translateY(-4px); transform: translateY(-4px); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes loadingAnim { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 15% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } 30% { -webkit-transform: translateY(4px); transform: translateY(4px); } 45% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 60% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } 75% { -webkit-transform: translateY(-4px); transform: translateY(-4px); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @-webkit-keyframes loadingAnim2 { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(2px); transform: translateY(2px); } } @keyframes loadingAnim2 { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(2px); transform: translateY(2px); } } @charset "UTF-8"; .fancybox-bg { opacity: 0; background: #000; -webkit-animation: fancybox-fade-out 0.3s ease-in 0s forwards; animation: fancybox-fade-out 0.3s ease-in 0s forwards; } .fancybox-slide--iframe .fancybox-content { margin-top: 5vw; } .fancybox-close-small { display: none !important; } .close-btn:after { display: block; background: url(../../resources/img/common/modal_movie_close_62604939009c543352e1750eaaf6602c.png) no-repeat; background-size: contain; width: 5vw; height: 5vw; content: ""; position: absolute; right: 0; min-width: auto; top: -5vw; pointer-events: none; } .fancybox-iframe { background: #000; } .fancybox-slide--iframe .fancybox-content { background: #000; } .fancybox-is-open .fancybox-bg { opacity: 0; -webkit-animation: fancybox-fade-in 0.3s ease-in 0s forwards; animation: fancybox-fade-in 0.3s ease-in 0s forwards; } .fancybox-slide--iframe.fancybox-slide--video .fancybox-content { width: 921px; height: 518px; max-width: 100%; } @-webkit-keyframes fancybox-fade-in { 0% { opacity: 0; visibility: hidden; } 1% { visibility: visible; } 100% { opacity: 0.9; visibility: visible; } } @keyframes fancybox-fade-in { 0% { opacity: 0; visibility: hidden; } 1% { visibility: visible; } 100% { opacity: 0.9; visibility: visible; } } @-webkit-keyframes fancybox-fade-out { 0% { opacity: 0.9; visibility: visible; } 99% { opacity: 0; } 100% { opacity: 0; visibility: hidden; } } @keyframes fancybox-fade-out { 0% { opacity: 0.9; visibility: visible; } 99% { opacity: 0; } 100% { opacity: 0; visibility: hidden; } } html { background: #000; } body { overflow-x: hidden; font-family: "Malgun Gothic", "Dotum", '\B3CB\C6C0', "Apple SD Gothic Neo", "HY Gulim", Helvetica, Arial, "HY Dotum", "Roboto", sans-serif; -webkit-text-size-adjust: 100%; } section { position: relative; } #container { overflow: hidden; position: relative; } .clearfix:after { content: "."; display: block; height: 0; font-size: 0; clear: both; visibility: hidden; } .disp-none { display: none; } .hide-text { text-indent: 100%; white-space: nowrap; overflow: hidden; height: 0; display: inline-block; } main { display: block; } a { cursor: pointer; outline: none; } .to-mt-btn, .to-top-btn { opacity: 0; position: fixed; z-index: 98; pointer-events: none; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .to-mt-btn.show, .to-top-btn.show { opacity: 1; pointer-events: auto; } .to-top-btn { background: url(../../resources/img/common/to_top_btn_bfc13295386354f4f6d1611761277a5a.png) no-repeat; width: 130px; height: 119px; bottom: 25px; right: 0; } .loading { width: 100%; height: 100%; background: #000; position: fixed; top: 0; z-index: 1000; } .loading .loading-img { width: 72px; height: 43px; position: absolute; margin: auto; top: 0; bottom: 0; -webkit-transform: translateX(-100px); transform: translateX(-100px); } .loading .loading-img .loading-parts1 { width: 72px; -webkit-animation: loadingAnim 0.2s infinite; animation: loadingAnim 0.2s infinite; } .loading .loading-img .loading-parts2, .loading .loading-img .loading-parts3 { width: 12px; } .loading .loading-img .loading-parts2 { position: absolute; top: 28px; left: 8px; -webkit-animation: loadingAnim2 0.2s infinite; animation: loadingAnim2 0.2s infinite; } .loading .loading-img .loading-parts3 { position: absolute; top: 28px; left: 44px; -webkit-animation: loadingAnim2 0.2s 0.1s infinite; animation: loadingAnim2 0.2s 0.1s infinite; } .loading.end { -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-transition: 0.3s ease-in-out 0.3s; transition: 0.3s ease-in-out 0.3s; } .wrapper { width: 1024px; position: relative; margin: auto; } header { width: 100%; position: absolute; z-index: 100; height: 94px; } header.top { position: relative; } header.top .header-contents ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; opacity: 0; } header.top .header-contents ul.run { -webkit-animation: fade-in-down 0.5s 1.2s both; animation: fade-in-down 0.5s 1.2s both; } header .header-contents { background: url(../../resources/img/common/h_bg_de4d0372259719d9c832ff3482e070ff.png) center 5px repeat-x; width: 100%; top: 0; } header .header-contents.disp-enabled { position: fixed; -webkit-transition: top 0.2s; transition: top 0.2s; top: -140px; opacity: 0; } header .header-contents.disp { top: 0; opacity: 1; } header .header-contents ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } header .header-contents ul li { position: relative; -webkit-transition: 0.1s; transition: 0.1s; } header .header-contents ul li:hover { -webkit-transform: scale(1.1); transform: scale(1.1); } header .header-contents ul li:nth-child(1) { margin-left: -2px; margin-top: 1px; } header .header-contents ul li:nth-child(2) { margin-left: 23px; margin-top: -6px; } header .header-contents ul li:nth-child(3) { margin-left: 53px; margin-top: -6px; } header .header-contents ul li:nth-child(4) { margin-left: 52px; margin-top: -12px; } header .header-contents ul li:nth-child(5) { margin-left: 40px; margin-top: -15px; } header .header-contents ul li:nth-child(6) { margin-left: 20px; margin-top: -10px; } footer { position: relative; background: #000; padding: 32px 0 34px; z-index: 100; } footer .wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } footer .atlus-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } footer .atlus-box .pstudio-logo { background: url(../../resources/img/top/footer_p_studio_4caa72ea51bc43d58b1d0d3ac13a41c6.png) no-repeat; width: 59px; height: 88px; margin-right: 28px; } footer .atlus-box .atlus-logo { background: url(../../resources/img/top/footer_atlus_35764fb619bd8942b240269acc26e46f.png) no-repeat; width: 193px; height: 58px; margin-right: 32px; } footer .copyright { color: #fff; text-align: left; font-size: 16px; line-height: 1.3; } body { background-color: #b71505; } body.lock { width: 100%; height: 100%; overflow: hidden; } section { position: relative; } a { display: inline-block; } .ss { opacity: 0; position: relative; } .ss img { -webkit-transition: 0.1s; transition: 0.1s; } .ss img:hover { -webkit-transform: scale(1.1); transform: scale(1.1); } .chara-detail, .persona-detail { position: absolute; z-index: 10; } .chara-detail img, .persona-detail img { -webkit-transition: 0.1s; transition: 0.1s; } .chara-detail img:hover, .persona-detail img:hover { -webkit-transform: scale(1.1); transform: scale(1.1); } #character-contents { z-index: 10; } #character-contents h1 { padding: 122px 0 0 201px; position: relative; z-index: 2; } #character-contents .chara-img, #character-contents .chara-name-en, #character-contents .chara-movie-box, #character-contents .chara-name, #character-contents .chara-txt, #character-contents .chara-detail { opacity: 0; } #character-contents .chara-img, #character-contents .chara-name-en, #character-contents .chara-detail { position: absolute; } #character-contents .chara-img.run, #character-contents .chara-name-en.run { -webkit-animation: fade-in-up 0.3s both; animation: fade-in-up 0.3s both; } #character-contents .chara-movie-box { width: 543px; height: 361px; position: relative; z-index: 3; } #character-contents .chara-movie-box.run { -webkit-animation: flash-fade-in2 0.1s 0.2s both; animation: flash-fade-in2 0.1s 0.2s both; } #character-contents .chara-movie-box:before { content: url(../../resources/img/character/common/movie_frame_47a891f4d34a0e5e6a7de0ed292f1321.png); position: absolute; z-index: 2; } #character-contents .chara-movie-box .movie-area { width: 490px; height: 273px; background: #000; pointer-events: none; overflow: hidden; position: absolute; top: 39px; left: 23px; -webkit-transform: rotate(9deg); transform: rotate(9deg); } #character-contents .chara-movie-box #chara-movie { width: 490px; height: 273px; } #character-contents .chara-name { position: relative; z-index: 2; } #character-contents .chara-name.run { -webkit-animation: flash-fade-in2 0.1s 0.4s both; animation: flash-fade-in2 0.1s 0.4s both; } #character-contents .chara-txt { position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; } #character-contents .chara-txt p { line-height: 1.7; font-size: 18px; font-weight: bold; } #character-contents .chara-txt.run { -webkit-animation: flash-fade-in2 0.1s 0.4s both; animation: flash-fade-in2 0.1s 0.4s both; } #character-contents .ss.run { -webkit-animation: flash-fade-in2 0.1s 0.6s both; animation: flash-fade-in2 0.1s 0.6s both; } #character-contents .chara-detail.run { -webkit-animation: flash-fade-in2 0.1s 0.4s both; animation: flash-fade-in2 0.1s 0.4s both; } #action-contents { z-index: 11; } #action-contents h2, #action-contents .action-copy, #action-contents .action-version, #action-contents .action-txt { opacity: 0; } #action-contents h2 { position: relative; z-index: 2; } #action-contents h2.run { -webkit-animation: flash-fade-in2 0.1s both; animation: flash-fade-in2 0.1s both; } #action-contents .action-copy { position: relative; } #action-contents .action-copy:after { opacity: 0; position: absolute; pointer-events: none; -webkit-transition: 0.3s 0.1s; transition: 0.3s 0.1s; -webkit-transform: scale(0.5); transform: scale(0.5); } #action-contents .action-copy.run { -webkit-animation: flash-fade-in2 0.1s both; animation: flash-fade-in2 0.1s both; } #action-contents .action-copy.run:after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } #action-contents .action-txt { position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; } #action-contents .action-txt.run { -webkit-animation: flash-fade-in2 0.1s 0.2s both; animation: flash-fade-in2 0.1s 0.2s both; } #action-contents .action-txt p { line-height: 1.7; font-size: 18px; font-weight: bold; } #action-contents .ss.run { -webkit-animation: flash-fade-in2 0.1s 0.4s both; animation: flash-fade-in2 0.1s 0.4s both; } #skill-contents { z-index: 10; } #skill-contents h2, #skill-contents .persona-img, #skill-contents .persona-name, #skill-contents .persona-txt, #skill-contents .persona-copy, #skill-contents .persona-detail { opacity: 0; } #skill-contents h2 { position: relative; z-index: 2; } #skill-contents h2.run { -webkit-animation: flash-fade-in2 0.1s 0.2s both; animation: flash-fade-in2 0.1s 0.2s both; } #skill-contents .persona-img, #skill-contents .persona-detail { position: absolute; } #skill-contents .persona-img { pointer-events: none; } #skill-contents .persona-img.run { -webkit-animation: fade-in-up 0.3s both; animation: fade-in-up 0.3s both; } #skill-contents .persona-name { position: relative; } #skill-contents .persona-name.run { -webkit-animation: flash-fade-in2 0.1s 0.4s both; animation: flash-fade-in2 0.1s 0.4s both; } #skill-contents .persona-txt { position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; } #skill-contents .persona-txt.run { -webkit-animation: flash-fade-in2 0.1s 0.6s both; animation: flash-fade-in2 0.1s 0.6s both; } #skill-contents .persona-txt p { line-height: 1.7; font-size: 18px; font-weight: bold; } #skill-contents .ss.run { -webkit-animation: flash-fade-in2 0.1s 0.6s both; animation: flash-fade-in2 0.1s 0.6s both; } #skill-contents .persona-copy { position: relative; } #skill-contents .persona-copy:after { opacity: 0; position: absolute; pointer-events: none; -webkit-transition: 0.3s 0.8s; transition: 0.3s 0.8s; -webkit-transform: scale(0.5); transform: scale(0.5); } #skill-contents .persona-copy.run { -webkit-animation: flash-fade-in2 0.1s 0.8s both; animation: flash-fade-in2 0.1s 0.8s both; } #skill-contents .persona-copy.run:after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } #skill-contents .persona-detail.run { -webkit-animation: flash-fade-in2 0.1s 0.6s both; animation: flash-fade-in2 0.1s 0.6s both; } #showtime-contents { z-index: 10; } #showtime-contents h2, #showtime-contents .showtime-copy { opacity: 0; } #showtime-contents h2 { position: relative; } #showtime-contents h2.run { -webkit-animation: flash-fade-in2 0.1s both; animation: flash-fade-in2 0.1s both; } #showtime-contents .ss.run { -webkit-animation: flash-fade-in2 0.1s 0.2s both; animation: flash-fade-in2 0.1s 0.2s both; } #showtime-contents .showtime-copy { position: relative; } #showtime-contents .showtime-copy:after { opacity: 0; position: absolute; pointer-events: none; -webkit-transition: 0.3s 0.4s; transition: 0.3s 0.4s; -webkit-transform: scale(0.5); transform: scale(0.5); } #showtime-contents .showtime-copy.run { -webkit-animation: flash-fade-in2 0.1s 0.4s both; animation: flash-fade-in2 0.1s 0.4s both; } #showtime-contents .showtime-copy.run:after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .nav-chara-list { background: #000; z-index: 10; padding-bottom: 15px; } .nav-chara-list:before { content: ""; width: 0; height: 0; border-style: solid; border-width: 0 0 55px 100vw; border-color: transparent; border-bottom-color: #000; position: absolute; top: -55px; pointer-events: none; } .nav-chara-list h2 { position: absolute; top: -74px; left: 289px; } .nav-chara-list .chara-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-line-pack: start; align-content: flex-start; } .nav-chara-list .chara-list a { -webkit-transition: 0.1s; transition: 0.1s; position: relative; } .nav-chara-list .chara-list a:hover { -webkit-transform: scale(1.1); transform: scale(1.1); } .nav-chara-list .chara-list a:nth-child(1) { background: url(../../resources/img/character/common/chara_list_hero_717c53631267340c6cd0b7854fe42dd0.png) no-repeat; width: 166px; height: 186px; margin: 36px 0 0 46px; } .nav-chara-list .chara-list a:nth-child(2) { background: url(../../resources/img/character/common/chara_list_sophia_4a287011dc4086c8e80fa8fc4e2ff024.png) no-repeat; width: 162px; height: 174px; margin: 41px 0 0 26px; } .nav-chara-list .chara-list a:nth-child(3) { background: url(../../resources/img/character/common/chara_list_ryuji_b7925797303341d734200b8724ba7753.png) no-repeat; width: 163px; height: 174px; margin: 40px 0 0 27px; } .nav-chara-list .chara-list a:nth-child(4) { background: url(../../resources/img/character/common/chara_list_morgana_34682b43d98a5b8cb75f1571dd4845fa.png) no-repeat; width: 163px; height: 172px; margin: 36px 0 0 26px; } .nav-chara-list .chara-list a:nth-child(5) { background: url(../../resources/img/character/common/chara_list_anne_dec056d064b8b4c65a3b737d436ddce2.png) no-repeat; width: 161px; height: 166px; margin: 34px 0 0 29px; } .nav-chara-list .chara-list a:nth-child(6) { background: url(../../resources/img/character/common/chara_list_yusuke_cd1b3946448a3ad98e8b1846d483e66b.png) no-repeat; width: 168px; height: 177px; margin: 63px 0 0 52px; } .nav-chara-list .chara-list a:nth-child(7) { background: url(../../resources/img/character/common/chara_list_makoto_ddbe26c8cc47423ae459703f741a8dab.png) no-repeat; width: 165px; height: 168px; margin: 71px 0 0 20px; } .nav-chara-list .chara-list a:nth-child(8) { background: url(../../resources/img/character/common/chara_list_futaba_eeb94cdfc270d155eaf6148c9776a550.png) no-repeat; width: 165px; height: 176px; margin: 52px 0 0 22px; } .nav-chara-list .chara-list a:nth-child(9) { background: url(../../resources/img/character/common/chara_list_haru_11fb0861c19996fefc26311d8decc96b.png) no-repeat; width: 164px; height: 169px; margin: 63px 0 0 22px; } .nav-chara-list .chara-list a:nth-child(10) { background: url(../../resources/img/character/common/chara_list_zenkichi_3b61c23a606a96e6b773a08aa05db5d7.png) no-repeat; width: 162px; height: 177px; margin: 61px 0 0 16px; } .nav-chara-list .remark { color: #fff; margin: 72px auto 0; text-align: center; font-size: 16px; line-height: 1.6; font-weight: bold; } footer { padding: 24px 0; } #bg-cover { background: url(../../resources/img/character/top/bg_cover_bc3d088d4a8f1936217024f07130f309.jpg) center top no-repeat; width: 100%; height: 100%; background-size: cover; position: fixed; top: 0; left: 0; } #bg { background: url(../../resources/img/character/common/detail_bg_48aca913390a978d1a562c9198129ce8.png) center top no-repeat; width: 100%; height: 5000px; position: absolute; top: 0; left: 0; overflow: hidden; } #bg .wrapper:before { content: ''; position: absolute; top: 0; bottom: 0; background-color: #b71505; width: 3840px; height: 11250px; left: -4167px; } #bg .wrapper:after { content: ''; position: absolute; top: 0; bottom: 0; background-color: #b71505; width: 3840px; height: 11250px; right: -4167px; } #bg-particle { width: 100%; position: absolute; top: 0; z-index: 5; pointer-events: none; } #bg-particle img { position: absolute; } #bg-particle .bg-particle1 { top: 83px; left: -114px; } #bg-particle .bg-particle2 { top: 180px; left: -5px; } .detail-modal { display: none; width: 100%; height: 100%; position: fixed; top: 0; z-index: 1001; overflow-y: auto; overflow-x: hidden; } .detail-modal .modal-dialog { width: 1024px; position: absolute; margin: auto; top: 150px; left: 0; right: 0; z-index: 10; } .detail-modal .modal-dialog .detail-close-btn { background: url(../../resources/img/character/common/close_btn_1c36b2289afd5abb51e650c27a0e0919.png) no-repeat; width: 56px; height: 54px; position: absolute; top: 0; right: 0; z-index: 10; } .detail-modal .modal-dialog .detail-img { position: absolute; } .detail-modal .modal-overlay { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); position: fixed; overflow: auto; outline: 0; top: 0; } #character_hero #character-contents h1 { padding: 118px 0 0 202px; } #character_hero #character-contents .chara-img { top: -191px; left: -271px; } #character_hero #character-contents .chara-name-en { top: 580px; left: -7px; z-index: 4; } #character_hero #character-contents .chara-movie-box { margin-top: -11px; } #character_hero #character-contents .chara-name { margin: -27px 0 0 177px; z-index: 5; } #character_hero #character-contents .chara-txt { background: url(../../resources/img/character/hero/chara_txt_bg_7db2336bf429d7de84cb292257422731.png) no-repeat; width: 666px; height: 389px; margin: -58px 0 0 37px; } #character_hero #character-contents .chara-txt p { padding: 82px 0 0 92px; } #character_hero #character-contents .chara-ss1 { margin: -150px 0 0 563px; } #character_hero #character-contents .chara-ss2 { margin: -311px 0 0 137px; } #character_hero #character-contents .chara-detail { top: 696px; left: 736px; } #character_hero #action-contents { margin-top: -145px; } #character_hero #action-contents h2 { margin-left: 3px; } #character_hero #action-contents .action-copy { margin: -79px 0 0 373px; z-index: 2; } #character_hero #action-contents .action-copy:after { content: url(../../resources/img/character/hero/action_copy_deco_efffd90b42b7724e267f51bc00284c17.png); top: -22px; left: -157px; } #character_hero #action-contents .action-txt { background: url(../../resources/img/character/hero/action_txt_bg_ce99eae1f19c7ec0248c7a48a458220e.png) no-repeat; width: 658px; height: 232px; margin: -64px 0 0 12px; z-index: 4; } #character_hero #action-contents .action-txt p { padding: 50px 0 0 88px; } #character_hero #action-contents .action-ss1 { margin: -248px 0 0 553px; z-index: 2; } #character_hero #action-contents .action-ss2 { margin: -245px 0 0 111px; z-index: 3; } #character_hero #skill-contents { margin-top: -71px; } #character_hero #skill-contents h2 { margin-left: 522px; } #character_hero #skill-contents .persona-img { top: -393px; left: -778px; } #character_hero #skill-contents .persona-name { margin: -51px 0 0 578px; } #character_hero #skill-contents .persona-txt { background: url(../../resources/img/character/hero/persona_txt_bg_837503628a0d5c218a79cfbcc55b376c.png) no-repeat; width: 484px; height: 275px; margin: -24px 0 0 534px; } #character_hero #skill-contents .persona-txt p { font-size: 17px; padding: 83px 0 0 36px; } #character_hero #skill-contents .persona-ss1 { margin: -49px 0 0 509px; } #character_hero #skill-contents .persona-ss2 { width: 428px; display: block; margin: -419px 0 0 215px; } #character_hero #skill-contents .persona-copy { margin: -115px 0 0 85px; } #character_hero #skill-contents .persona-copy:after { content: url(../../resources/img/character/hero/persona_copy_deco_874f1c3fa7776e563e268bf1d9615813.png); top: -35px; left: -56px; } #character_hero #skill-contents .persona-detail { top: 438px; left: 358px; } #character_hero #showtime-contents { margin: -71px 0 162px; } #character_hero #showtime-contents h2 { margin-left: 2px; } #character_hero #showtime-contents .showtime-ss { margin: -155px 0 0 38px; } #character_hero #showtime-contents .showtime-copy { margin: -122px 0 0 258px; } #character_hero #showtime-contents .showtime-copy:after { content: url(../../resources/img/character/hero/showtime_copy_deco_472580a694ef8b4c97268a4e51eebfba.png); top: -58px; left: -117px; } #character_hero .detail-modal .modal-dialog .detail-img.chara { background: url(../../resources/img/character/hero/modal_chara_9c52eb7df8c5c0ae7b6eccfbfd1c628a.png) no-repeat; width: 1000px; height: 1103px; top: -226px; left: 12px; } #character_hero .detail-modal .modal-dialog .detail-img.persona { background: url(../../resources/img/character/hero/modal_persona_79ef4800294dff9ee10e55fea4b7999b.png) no-repeat; width: 1500px; height: 1005px; top: -110px; left: 45px; } #character_sophia #character-contents .chara-img { top: 253px; left: -116px; } #character_sophia #character-contents .chara-name-en { top: 573px; left: 391px; z-index: 4; } #character_sophia #character-contents .chara-movie-box { margin-top: -11px; margin-left: 438px; } #character_sophia #character-contents .chara-name { margin: 81px 0 0 515px; z-index: 5; } #character_sophia #character-contents .chara-txt { background: url(../../resources/img/character/sophia/chara_txt_bg_9bf8cb8f4ae8c37b06c50b2a55d65609.png) no-repeat; width: 666px; height: 452px; margin: -128px 0 0 37px; } #character_sophia #character-contents .chara-txt p { padding: 82px 0 0 85px; } #character_sophia #character-contents .chara-ss1 { margin: -185px 0 0 563px; } #character_sophia #character-contents .chara-ss2 { margin: -279px 0 0 137px; } #character_sophia #character-contents .chara-detail { top: 810px; left: 95px; } #character_sophia #action-contents { margin-top: -129px; } #character_sophia #action-contents h2 { margin-left: 3px; } #character_sophia #action-contents .action-copy { margin: -108px 0 0 258px; z-index: 2; } #character_sophia #action-contents .action-copy:after { content: url(../../resources/img/character/sophia/action_copy_deco_1f5cc8266785a00acfb8d3faec5b28b8.png); top: 35px; left: -112px; } #character_sophia #action-contents .action-version { position: absolute; top: 312px; right: -11px; z-index: 3; } #character_sophia #action-contents .action-version.run { -webkit-animation: flash-fade-in2 0.1s 0.3s both; animation: flash-fade-in2 0.1s 0.3s both; } #character_sophia #action-contents .action-txt { background: url(../../resources/img/character/sophia/action_txt_bg_ec934a85d6f5dffe4e2501851d7643c4.png) no-repeat; width: 658px; height: 265px; margin: -39px 0 0 14px; z-index: 5; } #character_sophia #action-contents .action-txt p { padding: 54px 0 0 67px; } #character_sophia #action-contents .action-ss1 { margin: -56px 0 0 126px; z-index: 4; } #character_sophia #action-contents .action-copy2 { position: absolute; opacity: 0; margin: -111px 0 0 177px; z-index: 5; } #character_sophia #action-contents .action-copy2:after { opacity: 0; content: url(../../resources/img/character/sophia/action_copy2_deco_13ca2875aa0489006fb60e27da0245ab.png); top: -44px; left: -33px; position: absolute; pointer-events: none; -webkit-transition: 0.3s 0.6s; transition: 0.3s 0.6s; -webkit-transform: scale(0.5); transform: scale(0.5); } #character_sophia #action-contents .action-copy2.run { -webkit-animation: flash-fade-in2 0.1s 0.6s both; animation: flash-fade-in2 0.1s 0.6s both; } #character_sophia #action-contents .action-copy2.run:after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } #character_sophia #skill-contents { margin-top: 96px; } #character_sophia #skill-contents h2 { margin-left: 523px; } #character_sophia #skill-contents .persona-img { top: -44px; left: -8px; } #character_sophia #skill-contents .persona-name { margin: -18px 0 0 431px; } #character_sophia #skill-contents .persona-txt { background: url(../../resources/img/character/sophia/persona_txt_bg_d74172c93d64034ea85112b38b919de7.png) no-repeat; width: 482px; height: 264px; margin: -55px 0 0 536px; } #character_sophia #skill-contents .persona-txt p { font-size: 17px; padding: 85px 0 0 54px; } #character_sophia #skill-contents .persona-ss1 { margin: -225px 0 0 137px; z-index: 2; } #character_sophia #skill-contents .persona-ss2 { width: 573px; display: block; margin: -161px 0 0 347px; } #character_sophia #skill-contents .persona-detail { top: 359px; left: 268px; } #character_sophia #showtime-contents { margin: -124px 0 131px 4px; } #character_sophia #showtime-contents .showtime-ss { margin: -148px 0 0 36px; } #character_sophia #bg { background: url(../../resources/img/character/sophia/detail_bg_257a58b288bc7445774e0d6bd052e40a.png) center top no-repeat; } #character_sophia .detail-modal .modal-dialog .detail-img.chara { background: url(../../resources/img/character/sophia/modal_chara_5cf4ade59eee5d241cac7d60df1e9f83.png) no-repeat; width: 1163px; height: 954px; top: -126px; left: -108px; } #character_sophia .detail-modal .modal-dialog .detail-img.persona { background: url(../../resources/img/character/sophia/modal_persona_7aa82c0892762d376ead573cc3eadd83.png) no-repeat; width: 1358px; height: 838px; top: -110px; left: -115px; } #character_ryuji #character-contents h1 { padding: 116px 0 0 221px; } #character_ryuji #character-contents .chara-img { top: -53px; left: -23px; } #character_ryuji #character-contents .chara-name-en { top: 535px; left: 347px; z-index: 4; } #character_ryuji #character-contents .chara-movie-box { margin-top: -10px; margin-left: 492px; } #character_ryuji #character-contents .chara-name { margin: 36px 0 0 356px; z-index: 5; } #character_ryuji #character-contents .chara-txt { background: url(../../resources/img/character/ryuji/chara_txt_bg_cd576c9ce3e55ca10c2fc067ee48a014.png) no-repeat; width: 666px; height: 425px; margin: -34px 0 0 355px; } #character_ryuji #character-contents .chara-txt p { padding: 89px 0 0 78px; font-size: 16px; line-height: 1.82; } #character_ryuji #character-contents .chara-ss1 { margin: -233px 0 0 -61px; z-index: 2; } #character_ryuji #character-contents .chara-ss2 { margin: -279px 0 0 260px; } #character_ryuji #character-contents .chara-detail { top: 1002px; left: 71px; } #character_ryuji #action-contents { margin-top: -83px; } #character_ryuji #action-contents h2 { margin-left: 3px; } #character_ryuji #action-contents .action-copy { margin: -92px 0 0 286px; z-index: 2; } #character_ryuji #action-contents .action-copy:after { content: url(../../resources/img/character/ryuji/action_copy_deco_c030825147992cdb0bb6dd6568b27862.png); top: 28px; left: -131px; } #character_ryuji #action-contents .action-txt { background: url(../../resources/img/character/ryuji/action_txt_bg_d30c580eaf73a98b581d3b27f08dfd4f.png) no-repeat; width: 658px; height: 232px; margin: -22px 0 0 14px; z-index: 5; } #character_ryuji #action-contents .action-txt p { padding: 45px 0 0 77px; line-height: 1.85; } #character_ryuji #action-contents .action-ss1 { margin: -338px 0 0 633px; z-index: 3; } #character_ryuji #action-contents .action-ss2 { margin: -188px 0 0 126px; z-index: 4; } #character_ryuji #action-contents .action-copy2 { position: absolute; opacity: 0; margin: -85px 0 0 120px; z-index: 4; } #character_ryuji #action-contents .action-copy2:after { opacity: 0; content: url(../../resources/img/character/ryuji/action_copy2_deco_3ab354f3066a4124b1c623b76ea3af16.png); top: -53px; left: -36px; position: absolute; pointer-events: none; -webkit-transition: 0.3s 0.6s; transition: 0.3s 0.6s; -webkit-transform: scale(0.5); transform: scale(0.5); } #character_ryuji #action-contents .action-copy2.run { -webkit-animation: flash-fade-in2 0.1s 0.6s both; animation: flash-fade-in2 0.1s 0.6s both; } #character_ryuji #action-contents .action-copy2.run:after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } #character_ryuji #skill-contents { margin-top: 205px; } #character_ryuji #skill-contents h2 { margin-left: 522px; } #character_ryuji #skill-contents .persona-img { top: -860px; left: -1005px; } #character_ryuji #skill-contents .persona-name { margin: -28px 0 0 431px; } #character_ryuji #skill-contents .persona-txt { background: url(../../resources/img/character/ryuji/persona_txt_bg_525b42d008d78c111a5d27f5ec8a8d7f.png) no-repeat; width: 482px; height: 277px; margin: -38px 0 0 536px; } #character_ryuji #skill-contents .persona-txt p { padding: 92px 0 0 60px; font-size: 17px; } #character_ryuji #skill-contents .persona-ss1 { margin: -184px 0 0 143px; z-index: 2; } #character_ryuji #skill-contents .persona-ss2 { margin: -161px 0 0 347px; } #character_ryuji #skill-contents .persona-detail { top: 430px; left: 71px; } #character_ryuji #showtime-contents { margin: -48px 0 119px; } #character_ryuji #showtime-contents h2 { margin-left: 2px; } #character_ryuji #showtime-contents .showtime-ss { margin: -141px 0 0 38px; } #character_ryuji #bg { background: url(../../resources/img/character/ryuji/detail_bg_adf58b67cf9e8f71736af9df0ffc30f5.png) center top no-repeat; } #character_ryuji .detail-modal .modal-dialog .detail-img.chara { background: url(../../resources/img/character/ryuji/modal_chara_32c21532ec286f5c6ca77ca2a1c91fee.png) no-repeat; width: 560px; height: 1164px; top: -140px; left: 245px; } #character_ryuji .detail-modal .modal-dialog .detail-img.persona { background: url(../../resources/img/character/ryuji/modal_persona_c479548b0c48e8472d3f4af808b7a0eb.png) no-repeat; width: 1000px; height: 933px; top: -140px; left: 12px; } #character_morgana #character-contents .chara-img { top: 3px; left: 485px; } #character_morgana #character-contents .chara-name-en { top: 547px; left: -30px; z-index: 4; } #character_morgana #character-contents .chara-movie-box { margin-top: -11px; margin-left: 5px; } #character_morgana #character-contents .chara-name { margin: 88px 0 0 51px; z-index: 5; } #character_morgana #character-contents .chara-txt { background: url(../../resources/img/character/morgana/chara_txt_bg_01cad5197e7f3ef566c8aaa8c1e0fffe.png) no-repeat; width: 666px; height: 442px; margin: -139px 0 0 355px; } #character_morgana #character-contents .chara-txt p { padding: 92px 0 0 93px; line-height: 1.75; font-size: 16px; } #character_morgana #character-contents .chara-ss1 { margin: -229px 0 0 -43px; z-index: 2; } #character_morgana #character-contents .chara-ss2 { margin: -279px 0 0 279px; } #character_morgana #character-contents .chara-detail { top: 736px; left: 846px; } #character_morgana #action-contents { margin-top: -90px; } #character_morgana #action-contents h2 { margin-left: 4px; } #character_morgana #action-contents .action-copy { margin: -89px 0 0 270px; z-index: 2; } #character_morgana #action-contents .action-copy:after { content: url(../../resources/img/character/morgana/action_copy_deco_d1e1d460a6c44299018f18cfed3f4e36.png); top: 37px; left: -165px; } #character_morgana #action-contents .action-txt { background: url(../../resources/img/character/morgana/action_txt_bg_aab53d5089fcf31cc2de866f3c1ff067.png) no-repeat; width: 658px; height: 232px; margin: -35px 0 0 14px; z-index: 5; } #character_morgana #action-contents .action-txt p { padding: 55px 0 0 78px; line-height: 1.65; } #character_morgana #action-contents .action-ss1 { margin: -337px 0 0 634px; z-index: 3; } #character_morgana #action-contents .action-ss2 { margin: -189px 0 0 127px; z-index: 4; } #character_morgana #action-contents .action-copy2 { position: absolute; opacity: 0; margin: -85px 0 0 164px; z-index: 4; } #character_morgana #action-contents .action-copy2:after { opacity: 0; content: url(../../resources/img/character/morgana/action_copy2_deco_129390bd0538bf6dd7b68b854c3e4b5a.png); top: -40px; left: -55px; position: absolute; pointer-events: none; -webkit-transition: 0.3s 0.6s; transition: 0.3s 0.6s; -webkit-transform: scale(0.5); transform: scale(0.5); } #character_morgana #action-contents .action-copy2.run { -webkit-animation: flash-fade-in2 0.1s 0.6s both; animation: flash-fade-in2 0.1s 0.6s both; } #character_morgana #action-contents .action-copy2.run:after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } #character_morgana #skill-contents { margin-top: 213px; } #character_morgana #skill-contents h2 { margin-left: 523px; } #character_morgana #skill-contents .persona-img { top: -1284px; left: -632px; } #character_morgana #skill-contents .persona-name { margin: -13px 0 0 464px; } #character_morgana #skill-contents .persona-txt { background: url(../../resources/img/character/morgana/persona_txt_bg_13c7d884167848a1d6c9f6704980177a.png) no-repeat; width: 482px; height: 301px; margin: -65px 0 0 537px; } #character_morgana #skill-contents .persona-txt p { font-size: 17px; padding: 70px 0 0 69px; line-height: 1.85; } #character_morgana #skill-contents .persona-ss1 { margin: -244px 0 0 153px; z-index: 2; } #character_morgana #skill-contents .persona-ss2 { margin: -129px 0 0 348px; } #character_morgana #skill-contents .persona-detail { top: 360px; left: 269px; } #character_morgana #showtime-contents { margin: -59px 0 104px; } #character_morgana #showtime-contents h2 { margin-left: 2px; } #character_morgana #showtime-contents .showtime-ss { margin: -129px 0 0 38px; } #character_morgana #bg { background: url(../../resources/img/character/morgana/detail_bg_1a42d2a3ff45dc9f181b763c2397286f.png) center top no-repeat; } #character_morgana .detail-modal .modal-dialog .detail-img.chara { background: url(../../resources/img/character/morgana/modal_chara_3debdbb2b685923a54ef68de2c4af2f0.png) no-repeat; width: 600px; height: 774px; top: 34px; left: 213px; } #character_morgana .detail-modal .modal-dialog .detail-img.persona { background: url(../../resources/img/character/morgana/modal_persona_a1e87df66a45cba24bbf8d1980c4c236.png) no-repeat; width: 1000px; height: 1095px; top: -140px; left: 12px; } #character_anne #character-contents .chara-img { top: -46px; left: -455px; } #character_anne #character-contents .chara-name-en { top: 642px; left: 267px; } #character_anne #character-contents .chara-movie-box { margin-top: -15px; margin-left: 493px; } #character_anne #character-contents .chara-name { margin: 91px 0 0 373px; } #character_anne #character-contents .chara-txt { background: url(../../resources/img/character/anne/chara_txt_bg_c44821a8e35d00104a979d90f246f475.png) no-repeat; width: 711px; height: 501px; margin: -4px 0 0 338px; } #character_anne #character-contents .chara-txt p { padding: 86px 0 0 79px; font-size: 17px; line-height: 1.85; } #character_anne #character-contents .chara-ss1 { margin: -191px 0 0 -58px; z-index: 2; } #character_anne #character-contents .chara-ss2 { margin: -322px 0 0 279px; } #character_anne #character-contents .chara-detail { top: 903px; left: 72px; } #character_anne #action-contents { margin-top: -89px; } #character_anne #action-contents h2 { margin-left: 4px; } #character_anne #action-contents .action-copy { margin: -91px 0 0 234px; z-index: 2; } #character_anne #action-contents .action-copy:after { content: url(../../resources/img/character/anne/action_copy_deco_63ad4f515ff3f7cdbbc47d1b39a5f2bb.png); top: 34px; left: -110px; } #character_anne #action-contents .action-txt { background: url(../../resources/img/character/anne/action_txt_bg_56b75d83a7c31676ae66e050701450f8.png) no-repeat; width: 658px; height: 295px; margin: -59px 0 0 14px; z-index: 5; } #character_anne #action-contents .action-txt p { padding: 57px 0 0 82px; } #character_anne #action-contents .action-ss1 { margin: -361px 0 0 634px; z-index: 3; } #character_anne #action-contents .action-ss2 { margin: -141px 0 0 187px; z-index: 4; } #character_anne #action-contents .action-copy2 { position: absolute; opacity: 0; margin: -143px 0 0 430px; z-index: 4; } #character_anne #action-contents .action-copy2:after { opacity: 0; content: url(../../resources/img/character/anne/action_copy2_deco_1cd2036998807525a3c7e8053543f93a.png); top: -21px; left: -66px; position: absolute; pointer-events: none; -webkit-transition: 0.3s 0.6s; transition: 0.3s 0.6s; -webkit-transform: scale(0.5); transform: scale(0.5); } #character_anne #action-contents .action-copy2.run { -webkit-animation: flash-fade-in2 0.1s 0.6s both; animation: flash-fade-in2 0.1s 0.6s both; } #character_anne #action-contents .action-copy2.run:after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } #character_anne #skill-contents { margin-top: 156px; } #character_anne #skill-contents h2 { margin-left: 523px; } #character_anne #skill-contents .persona-img { top: -142px; left: -456px; } #character_anne #skill-contents .persona-name { margin: -39px 0 0 434px; z-index: 2; } #character_anne #skill-contents .persona-txt { background: url(../../resources/img/character/anne/persona_txt_bg_39ada60fee4b797f1d86dce1d27f93d7.png) no-repeat; width: 482px; height: 277px; margin: -41px 0 0 537px; } #character_anne #skill-contents .persona-txt p { font-size: 17px; padding: 77px 0 0 78px; } #character_anne #skill-contents .persona-ss1 { margin: -220px 0 0 153px; z-index: 2; } #character_anne #skill-contents .persona-ss2 { margin: -161px 0 0 347px; } #character_anne #skill-contents .persona-detail { top: 360px; left: 269px; } #character_anne #showtime-contents { margin: -63px 0 106px; } #character_anne #showtime-contents h2 { margin-left: 3px; } #character_anne #showtime-contents .showtime-ss { margin: -147px 0 0 38px; } #character_anne #bg { background: url(../../resources/img/character/anne/detail_bg_ef428a0dd9c90be19805ac0dfd7cfe03.png) center top no-repeat; } #character_anne .detail-modal .modal-dialog .detail-img.chara { background: url(../../resources/img/character/anne/modal_chara_a4ccd3809b8fd0f1151ff02e51204cc0.png) no-repeat; width: 1300px; height: 1198px; top: -130px; left: -90px; } #character_anne .detail-modal .modal-dialog .detail-img.persona { background: url(../../resources/img/character/anne/modal_persona_e65e543102039172a8e2f987220093b4.png) no-repeat; width: 1200px; height: 986px; top: -65px; left: 104px; } #character_yusuke #character-contents h1 { padding: 126px 0 0 236px; } #character_yusuke #character-contents .chara-img { top: 103px; left: -455px; } #character_yusuke #character-contents .chara-name-en { top: 606px; left: -24px; } #character_yusuke #character-contents .chara-movie-box { margin-top: -12px; margin-left: 35px; } #character_yusuke #character-contents .chara-name { margin: 115px 0 0 22px; } #character_yusuke #character-contents .chara-txt { background: url(../../resources/img/character/yusuke/chara_txt_bg_3f72603d5931efe58f4de1103529b5bf.png) no-repeat; width: 666px; height: 483px; margin: -76px 0 0 52px; } #character_yusuke #character-contents .chara-txt p { padding: 85px 0 0 103px; font-size: 17px; line-height: 1.82; } #character_yusuke #character-contents .chara-ss1 { margin: -112px 0 0 230px; z-index: 3; } #character_yusuke #character-contents .chara-ss2 { position: absolute; top: 1457px; left: 550px; z-index: 2; } #character_yusuke #character-contents .chara-detail { top: 920px; left: 996px; } #character_yusuke #action-contents { margin-top: -51px; } #character_yusuke #action-contents h2 { margin-left: 4px; } #character_yusuke #action-contents .action-copy { margin: -117px 0 0 254px; z-index: 2; } #character_yusuke #action-contents .action-copy:after { content: url(../../resources/img/character/yusuke/action_copy_deco_b9a14385b609d76294e076580fcbae82.png); top: -8px; left: -112px; } #character_yusuke #action-contents .action-txt { background: url(../../resources/img/character/yusuke/action_txt_bg_2575005f80b4d5c6ac3ff7fa86ec9221.png) no-repeat; width: 658px; height: 280px; margin: -24px 0 0 14px; z-index: 5; } #character_yusuke #action-contents .action-txt p { padding: 40px 0 0 116px; line-height: 1.65; } #character_yusuke #action-contents .action-ss1 { margin: -368px 0 0 634px; z-index: 3; } #character_yusuke #action-contents .action-ss2 { margin: -137px 0 0 248px; z-index: 4; } #character_yusuke #action-contents .action-copy2 { position: absolute; opacity: 0; margin: -109px 0 0 31px; z-index: 4; } #character_yusuke #action-contents .action-copy2:after { opacity: 0; content: url(../../resources/img/character/yusuke/action_copy2_deco_ba772d7250b6f357807f5dee1594f215.png); top: -33px; left: -23px; position: absolute; pointer-events: none; -webkit-transition: 0.3s 0.6s; transition: 0.3s 0.6s; -webkit-transform: scale(0.5); transform: scale(0.5); } #character_yusuke #action-contents .action-copy2.run { -webkit-animation: flash-fade-in2 0.1s 0.6s both; animation: flash-fade-in2 0.1s 0.6s both; } #character_yusuke #action-contents .action-copy2.run:after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } #character_yusuke #skill-contents { margin-top: 78px; } #character_yusuke #skill-contents h2 { margin-left: 16px; } #character_yusuke #skill-contents .persona-img { top: -439px; left: -548px; } #character_yusuke #skill-contents .persona-name { margin: 3px 0 0 98px; } #character_yusuke #skill-contents .persona-txt { background: url(../../resources/img/character/yusuke/persona_txt_bg_a87743f994020943662197be08659f16.png) no-repeat; width: 482px; height: 277px; margin: -45px 0 0 49px; } #character_yusuke #skill-contents .persona-txt p { padding: 89px 0 0 41px; } #character_yusuke #skill-contents .persona-ss1 { margin: -60px 0 0 63px; z-index: 2; } #character_yusuke #skill-contents .persona-ss2 { margin: -161px 0 0 258px; } #character_yusuke #skill-contents .persona-detail { top: 756px; left: 849px; } #character_yusuke #showtime-contents { margin: -57px 0 97px; } #character_yusuke #showtime-contents h2 { margin-left: 2px; } #character_yusuke #showtime-contents .showtime-ss { margin: -154px 0 0 39px; } #character_yusuke #bg { background: url(../../resources/img/character/anne/detail_bg_ef428a0dd9c90be19805ac0dfd7cfe03.png) center top no-repeat; } #character_yusuke .detail-modal .modal-dialog .detail-img.chara { background: url(../../resources/img/character/yusuke/modal_chara_1f4a8660e81c0a1d278f4cea17d6217a.png) no-repeat; width: 1400px; height: 1030px; top: 55px; left: -310px; } #character_yusuke .detail-modal .modal-dialog .detail-img.persona { background: url(../../resources/img/character/yusuke/modal_persona_ac25df88e31a8d7789e65b340c638bc9.png) no-repeat; width: 1200px; height: 1127px; top: -20px; left: -170px; } #character_makoto #character-contents .chara-img { top: -237px; left: -1268px; } #character_makoto #character-contents .chara-name-en { top: 550px; left: 382px; z-index: 4; } #character_makoto #character-contents .chara-movie-box { margin-top: -15px; margin-left: 492px; } #character_makoto #character-contents .chara-name { margin: 68px 0 0 311px; z-index: 5; } #character_makoto #character-contents .chara-txt { background: url(../../resources/img/character/makoto/chara_txt_bg_8885b3f38cfd735bc2454f74b8eab721.png) no-repeat; width: 666px; height: 453px; margin: -48px 0 0 355px; } #character_makoto #character-contents .chara-txt p { padding: 97px 0 0 81px; font-size: 16px; line-height: 1.72; } #character_makoto #character-contents .chara-ss1 { margin: -197px 0 0 -47px; z-index: 2; } #character_makoto #character-contents .chara-ss2 { margin: -309px 0 0 278px; } #character_makoto #character-contents .chara-detail { top: 907px; left: 70px; } #character_makoto #action-contents { margin-top: -79px; } #character_makoto #action-contents h2 { margin-left: 3px; } #character_makoto #action-contents .action-copy { margin: -82px 0 0 251px; z-index: 2; } #character_makoto #action-contents .action-copy:after { content: url(../../resources/img/character/makoto/action_copy_deco_658c9da4de27420cc8952cd507705603.png); top: 45px; left: -146px; } #character_makoto #action-contents .action-txt { background: url(../../resources/img/character/makoto/action_txt_bg_0908791bb1a493389e65901df78996b6.png) no-repeat; width: 658px; height: 291px; margin: -50px 0 0 14px; z-index: 5; } #character_makoto #action-contents .action-txt p { padding: 51px 0 0 65px; line-height: 1.85; font-size: 17px; } #character_makoto #action-contents .action-ss1 { margin: -364px 0 0 633px; z-index: 3; } #character_makoto #action-contents .action-ss2 { margin: -165px 0 0 186px; z-index: 4; } #character_makoto #action-contents .action-copy2 { position: absolute; opacity: 0; margin: -122px 0 0 112px; z-index: 4; } #character_makoto #action-contents .action-copy2:after { opacity: 0; content: url(../../resources/img/character/makoto/action_copy2_deco_496f1e3d166018f07f42fc68879759a8.png); top: -40px; left: -3px; position: absolute; pointer-events: none; -webkit-transition: 0.3s 0.6s; transition: 0.3s 0.6s; -webkit-transform: scale(0.5); transform: scale(0.5); } #character_makoto #action-contents .action-copy2.run { -webkit-animation: flash-fade-in2 0.1s 0.6s both; animation: flash-fade-in2 0.1s 0.6s both; } #character_makoto #action-contents .action-copy2.run:after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } #character_makoto #skill-contents { margin-top: 157px; } #character_makoto #skill-contents h2 { margin-left: 13px; } #character_makoto #skill-contents .persona-img { top: -70px; left: 338px; } #character_makoto #skill-contents .persona-name { margin: -15px 0 0 43px; } #character_makoto #skill-contents .persona-txt { background: url(../../resources/img/character/makoto/persona_txt_bg_e9952263a97a0686b3f0346f39f86601.png) no-repeat; width: 547px; height: 277px; margin: -9px 0 0 23px; } #character_makoto #skill-contents .persona-txt p { padding: 86px 0 0 68px; } #character_makoto #skill-contents .persona-ss1 { margin: -56px 0 0 152px; z-index: 2; } #character_makoto #skill-contents .persona-ss2 { margin: -161px 0 0 347px; } #character_makoto #skill-contents .persona-detail { top: 694px; left: 869px; } #character_makoto #showtime-contents { margin: -106px 0 125px; } #character_makoto #showtime-contents h2 { margin-left: 3px; } #character_makoto #showtime-contents .showtime-ss { margin: -147px 0 0 38px; } #character_makoto #bg { background: url(../../resources/img/character/makoto/detail_bg_0a224e785ba276b6067669512903e9f0.png) center top no-repeat; } #character_makoto .detail-modal .modal-dialog .detail-img.chara { background: url(../../resources/img/character/makoto/modal_chara_4a75d19ff5000f22361a1d86e1b09770.png) no-repeat; width: 1625px; height: 1206px; top: -80px; left: -450px; } #character_makoto .detail-modal .modal-dialog .detail-img.persona { background: url(../../resources/img/character/makoto/modal_persona_b7565c4af0f9a4325c9f2da73735bdc1.png) no-repeat; width: 750px; height: 1027px; top: 120px; left: 136px; } #character_futaba #character-contents .chara-img { top: 156px; left: -189px; } #character_futaba #character-contents .chara-name-en { top: 466px; left: 331px; } #character_futaba #character-contents .chara-name { margin: 359px 0 0 374px; } #character_futaba #character-contents .chara-txt { background: url(../../resources/img/character/futaba/chara_txt_bg_418949a71014ffb23845a0016d5bbcf5.png) no-repeat; width: 666px; height: 483px; margin: 4px 0 0 355px; } #character_futaba #character-contents .chara-txt p { padding: 95px 0 0 118px; font-size: 17px; line-height: 1.62; } #character_futaba #character-contents .chara-ss1 { margin: -233px 0 0 -43px; z-index: 2; } #character_futaba #character-contents .chara-ss2 { margin: -277px 0 0 278px; } #character_futaba #character-contents .chara-detail { top: 907px; left: 70px; } #character_futaba #action-contents { margin-top: -59px; } #character_futaba #action-contents h2 { margin-left: 6px; } #character_futaba #action-contents .action-copy { margin: -18px 0 0 273px; z-index: 2; } #character_futaba #action-contents .action-copy:after { content: url(../../resources/img/character/futaba/action_copy_deco_c615a0896909e89c9eacc58ce9987736.png); top: -34px; left: -70px; } #character_futaba #action-contents .action-txt { background: url(../../resources/img/character/futaba/action_txt_bg_21a2e63b8727e1942da521f7d38851aa.png) no-repeat; width: 658px; height: 271px; margin: -46px 0 0 28px; z-index: 2; } #character_futaba #action-contents .action-txt p { padding: 66px 0 0 69px; line-height: 1.65; font-size: 17px; } #character_futaba #action-contents .action-ss1 { margin: -370px 0 0 633px; z-index: 2; } #character_futaba #action-contents .action-ss2 { margin: -143px 0 0 126px; z-index: 3; } #character_futaba #action-contents .action-ss3 { margin: -237px 0 0 523px; z-index: 4; } #character_futaba #action-contents .action-copy2 { opacity: 0; margin: -149px 0 0 192px; position: relative; z-index: 5; } #character_futaba #action-contents .action-copy2:after { opacity: 0; content: url(../../resources/img/character/futaba/action_copy2_deco_a27b734b5502562b7b06749b232f743d.png); top: -38px; left: -60px; position: absolute; pointer-events: none; -webkit-transition: 0.3s 0.6s; transition: 0.3s 0.6s; -webkit-transform: scale(0.5); transform: scale(0.5); } #character_futaba #action-contents .action-copy2.run { -webkit-animation: flash-fade-in2 0.1s 0.6s both; animation: flash-fade-in2 0.1s 0.6s both; } #character_futaba #action-contents .action-copy2.run:after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } #character_futaba #action-contents .action-ss4.run, #character_futaba #action-contents .action-ss5.run { -webkit-animation: flash-fade-in2 0.1s 0.8s both; animation: flash-fade-in2 0.1s 0.8s both; } #character_futaba #action-contents .action-ss4 { margin: 15px 0 0 347px; z-index: 6; } #character_futaba #action-contents .action-ss5 { position: absolute; top: 1211px; left: 0; z-index: 7; } #character_futaba #skill-contents { margin: 65px 0 650px; } #character_futaba #skill-contents h2 { margin-left: 584px; } #character_futaba #skill-contents .persona-img { top: -198px; left: -179px; } #character_futaba #skill-contents .persona-name { margin: -10px 0 0 349px; } #character_futaba #skill-contents .persona-txt { background: url(../../resources/img/character/futaba/persona_txt_bg_1393af4f2520b258acc61f834ffacbfa.png) no-repeat; width: 479px; height: 277px; margin: -30px 0 0 553px; z-index: 2; } #character_futaba #skill-contents .persona-txt p { padding: 85px 0 0 47px; } #character_futaba #skill-contents .persona-detail { top: 500px; left: 375px; } #character_futaba #bg { background: url(../../resources/img/character/futaba/detail_bg_37b89f9ecca4bb41d2271f4a87983d75.png) center top no-repeat; } #character_futaba .detail-modal .modal-dialog .detail-img.chara { background: url(../../resources/img/character/futaba/modal_chara_caf6bc953dc274913220a5cb42a1f8cd.png) no-repeat; width: 1050px; height: 1136px; top: -110px; left: 13px; } #character_futaba .detail-modal .modal-dialog .detail-img.persona { background: url(../../resources/img/character/futaba/modal_persona_e18d255d5323c754f08daa69b201608e.png) no-repeat; width: 1200px; height: 1231px; top: 30px; left: 125px; } #character_haru #character-contents .chara-img { top: 280px; left: -50px; } #character_haru #character-contents .chara-name-en { top: 590px; left: 416px; z-index: 4; } #character_haru #character-contents .chara-movie-box { margin-top: -21px; margin-left: 399px; } #character_haru #character-contents .chara-name { margin: 91px 0 0 308px; z-index: 5; } #character_haru #character-contents .chara-txt { background: url(../../resources/img/character/haru/chara_txt_bg_56ad65d95ed47e6e88c986fd12ff4c4a.png) no-repeat; width: 682px; height: 493px; margin: -38px 0 0 366px; } #character_haru #character-contents .chara-txt p { padding: 100px 0 0 85px; font-size: 17px; line-height: 1.65; } #character_haru #character-contents .chara-ss1 { margin: -242px 0 0 -34px; z-index: 2; } #character_haru #character-contents .chara-ss2 { margin: -275px 0 0 281px; } #character_haru #character-contents .chara-detail { top: 997px; left: 21px; } #character_haru #action-contents { margin-top: -83px; } #character_haru #action-contents h2 { margin-left: 3px; } #character_haru #action-contents .action-copy { margin: -51px 0 0 243px; z-index: 2; } #character_haru #action-contents .action-copy:after { content: url(../../resources/img/character/haru/action_copy_deco_34b4f43c46be3cb864c29c0c36a134c7.png); top: -3px; left: -138px; } #character_haru #action-contents .action-txt { background: url(../../resources/img/character/haru/action_txt_bg_16ed4953bc9f72d2f1ea0b5e3119e8af.png) no-repeat; width: 658px; height: 278px; margin: -31px 0 0 14px; z-index: 5; } #character_haru #action-contents .action-txt p { padding: 48px 0 0 97px; line-height: 1.85; } #character_haru #action-contents .action-ss1 { margin: -366px 0 0 633px; z-index: 3; } #character_haru #action-contents .action-ss2 { margin: -153px 0 0 130px; z-index: 4; } #character_haru #action-contents .action-copy2 { position: absolute; opacity: 0; margin: -141px 0 0 212px; z-index: 4; } #character_haru #action-contents .action-copy2:after { opacity: 0; content: url(../../resources/img/character/haru/action_copy2_deco_e8ac71b9e82dff5b08000026c49baaa1.png); top: -37px; left: -69px; position: absolute; pointer-events: none; -webkit-transition: 0.3s 0.6s; transition: 0.3s 0.6s; -webkit-transform: scale(0.5); transform: scale(0.5); } #character_haru #action-contents .action-copy2.run { -webkit-animation: flash-fade-in2 0.1s 0.6s both; animation: flash-fade-in2 0.1s 0.6s both; } #character_haru #action-contents .action-copy2.run:after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } #character_haru #skill-contents { margin-top: 63px; } #character_haru #skill-contents h2 { margin-left: 586px; } #character_haru #skill-contents .persona-img { top: -71px; left: -510px; } #character_haru #skill-contents .persona-name { margin: -8px 0 0 419px; } #character_haru #skill-contents .persona-txt { background: url(../../resources/img/character/haru/persona_txt_bg_a87743f994020943662197be08659f16.png) no-repeat; width: 482px; height: 277px; margin: -45px 0 0 535px; } #character_haru #skill-contents .persona-txt p { padding: 86px 0 0 44px; font-size: 17px; } #character_haru #skill-contents .persona-ss1 { margin: -60px 0 0 249px; z-index: 2; } #character_haru #skill-contents .persona-ss2 { margin: -161px 0 0 444px; } #character_haru #skill-contents .persona-detail { top: 633px; left: 41px; } #character_haru #showtime-contents { margin: -57px 0 107px; } #character_haru #showtime-contents h2 { margin-left: 2px; } #character_haru #showtime-contents .showtime-ss { margin: -154px 0 0 38px; } #character_haru #bg { background: url(../../resources/img/character/zenkichi/detail_bg_2ceacf4f5680fb93f88ee768fa7744cc.png) center top no-repeat; } #character_haru .detail-modal .modal-dialog .detail-img.chara { background: url(../../resources/img/character/haru/modal_chara_c6c8abd4495edb408b4b5304a1bbea33.png) no-repeat; width: 1200px; height: 928px; top: 54px; left: 133px; } #character_haru .detail-modal .modal-dialog .detail-img.persona { background: url(../../resources/img/character/haru/modal_persona_c659ee5da39b01b8b3c9788156274f97.png) no-repeat; width: 1000px; height: 919px; top: 115px; left: 15px; } #character_zenkichi #character-contents h1 { padding: 123px 0 0 237px; } #character_zenkichi #character-contents .chara-img { top: -214px; left: -471px; } #character_zenkichi #character-contents .chara-name-en { top: 645px; left: 305px; } #character_zenkichi #character-contents .chara-movie-box { margin-top: -3px; margin-left: 529px; } #character_zenkichi #character-contents .chara-name { margin: 99px 0 0 358px; } #character_zenkichi #character-contents .chara-txt { background: url(../../resources/img/character/zenkichi/chara_txt_bg_f13ac3a1e2de4a7722583850b7ef7d9f.png) no-repeat; width: 666px; height: 425px; margin: -67px 0 0 391px; position: relative; } #character_zenkichi #character-contents .chara-txt p { padding: 96px 0 0 96px; font-size: 17px; line-height: 1.6; } #character_zenkichi #character-contents .chara-ss1 { position: absolute; top: 1246px; left: -7px; z-index: 3; } #character_zenkichi #character-contents .chara-ss2 { margin: -66px 0 0 316px; z-index: 2; } #character_zenkichi #character-contents .chara-detail { top: 908px; left: 106px; } #character_zenkichi #action-contents { margin-top: -72px; } #character_zenkichi #action-contents h2 { margin-left: 3px; } #character_zenkichi #action-contents .action-copy { margin: -60px 0 0 223px; z-index: 2; } #character_zenkichi #action-contents .action-copy:after { content: url(../../resources/img/character/zenkichi/action_copy_deco_e77f07c0630019867c6064d985ad8ce3.png); top: 24px; left: -112px; } #character_zenkichi #action-contents .action-txt { background: url(../../resources/img/character/zenkichi/action_txt_bg_7c2c94dfabb39ad31f42b7b42e6a2c36.png) no-repeat; width: 658px; height: 248px; margin: -44px 0 0 14px; z-index: 5; } #character_zenkichi #action-contents .action-txt p { padding: 45px 0 0 90px; line-height: 1.6; } #character_zenkichi #action-contents .action-ss1 { margin: -336px 0 0 633px; z-index: 3; } #character_zenkichi #action-contents .action-ss2 { margin: -189px 0 0 126px; z-index: 4; } #character_zenkichi #action-contents .action-copy2 { position: absolute; opacity: 0; margin: -102px 0 0 201px; z-index: 4; } #character_zenkichi #action-contents .action-copy2:after { opacity: 0; content: url(../../resources/img/character/zenkichi/action_copy2_deco_6f3d361f5642fccc4dad96e3b294cc32.png); top: -41px; left: -46px; position: absolute; pointer-events: none; -webkit-transition: 0.3s 0.6s; transition: 0.3s 0.6s; -webkit-transform: scale(0.5); transform: scale(0.5); } #character_zenkichi #action-contents .action-copy2.run { -webkit-animation: flash-fade-in2 0.1s 0.6s both; animation: flash-fade-in2 0.1s 0.6s both; } #character_zenkichi #action-contents .action-copy2.run:after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } #character_zenkichi #skill-contents { margin-top: 151px; } #character_zenkichi #skill-contents h2 { margin-left: 586px; } #character_zenkichi #skill-contents .persona-img { top: -465px; left: -526px; } #character_zenkichi #skill-contents .persona-name { margin: -15px 0 0 567px; } #character_zenkichi #skill-contents .persona-txt { background: url(../../resources/img/character/zenkichi/persona_txt_bg_03ea78cd24c5aaab963c87b35f88659b.png) no-repeat; width: 482px; height: 277px; margin: -19px 0 0 535px; } #character_zenkichi #skill-contents .persona-txt p { padding: 73px 0 0 73px; } #character_zenkichi #skill-contents .persona-ss1 { margin: -60px 0 0 205px; z-index: 2; } #character_zenkichi #skill-contents .persona-ss2 { margin: -161px 0 0 400px; } #character_zenkichi #skill-contents .persona-detail { top: 634px; left: 41px; } #character_zenkichi #showtime-contents { margin: -90px 0 139px; } #character_zenkichi #showtime-contents h2 { margin-left: 2px; } #character_zenkichi #showtime-contents .showtime-ss { margin: -142px 0 0 38px; } #character_zenkichi #bg { background: url(../../resources/img/character/zenkichi/detail_bg_2ceacf4f5680fb93f88ee768fa7744cc.png) center top no-repeat; } #character_zenkichi .detail-modal .modal-dialog .detail-img.chara { background: url(../../resources/img/character/zenkichi/modal_chara_817f1fa5d2059fdf5fc8c46afbdb1157.png) no-repeat; width: 1018px; height: 1421px; top: -135px; left: -22px; } #character_zenkichi .detail-modal .modal-dialog .detail-img.persona { background: url(../../resources/img/character/zenkichi/modal_persona_c65cf8b3cc253040a5c49845201f7c36.png) no-repeat; width: 925px; height: 1019px; top: 35px; left: 45px; } @media screen and (max-width: 640px) { .fancybox-slide--iframe.fancybox-slide--video .fancybox-content { width: 640px; height: 330px; max-width: 100%; } .fancybox-slide--iframe .fancybox-close-small { top: -60px; right: 4; } body, #container, .wrapper { width: 640px; } .to-top-btn { bottom: 25px; right: 0; } } @media screen and (min-width: 641px) { .to-top-btn { -webkit-transition: 0.1s; transition: 0.1s; } .to-top-btn:hover { -webkit-transform: scale(1.1); transform: scale(1.1); } }