/** * Swiper 4.4.2 * Most modern mobile touch slider and framework with hardware accelerated transitions * http://www.idangero.us/swiper/ * * Copyright 2014-2018 Vladimir Kharlampidi * * Released under the MIT License * * Released on: November 1, 2018 */ .swiper-container{margin:0 auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-container-no-flexbox .swiper-slide{float:left}.swiper-container-vertical>.swiper-wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform;-webkit-box-sizing:content-box;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.swiper-container-multirow>.swiper-wrapper{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.swiper-container-free-mode>.swiper-wrapper{-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out;margin:0 auto}.swiper-slide{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:100%;position:relative;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;-webkit-transition-property:height,-webkit-transform;transition-property:height,-webkit-transform;-o-transition-property:transform,height;transition-property:transform,height;transition-property:transform,height,-webkit-transform}.swiper-container-3d{-webkit-perspective:1200px;perspective:1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-container-3d .swiper-slide-shadow-left{background-image:-webkit-gradient(linear,right top,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top{background-image:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-wp8-horizontal,.swiper-container-wp8-horizontal>.swiper-wrapper{-ms-touch-action:pan-y;touch-action:pan-y}.swiper-container-wp8-vertical,.swiper-container-wp8-vertical>.swiper-wrapper{-ms-touch-action:pan-x;touch-action:pan-x}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:27px;height:44px;margin-top:-22px;z-index:10;cursor:pointer;background-size:27px 44px;background-position:center;background-repeat:no-repeat}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");left:10px;right:auto}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");right:10px;left:auto}.swiper-button-prev.swiper-button-white,.swiper-container-rtl .swiper-button-next.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next.swiper-button-white,.swiper-container-rtl .swiper-button-prev.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-button-prev.swiper-button-black,.swiper-container-rtl .swiper-button-next.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next.swiper-button-black,.swiper-container-rtl .swiper-button-prev.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;-webkit-transition:.3s opacity;-o-transition:.3s opacity;transition:.3s opacity;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{-webkit-transform:scale(.66);-ms-transform:scale(.66);transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{-webkit-transform:scale(.66);-ms-transform:scale(.66);transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33)}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:100%;background:#000;opacity:.2}button.swiper-pagination-bullet{border:none;margin:0;padding:0;-webkit-box-shadow:none;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet-active{opacity:1;background:#007aff}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:6px 0;display:block}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:8px}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;-webkit-transition:.2s top,.2s -webkit-transform;transition:.2s top,.2s -webkit-transform;-o-transition:.2s transform,.2s top;transition:.2s transform,.2s top;transition:.2s transform,.2s top,.2s -webkit-transform}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 4px}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);white-space:nowrap}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:.2s left,.2s -webkit-transform;transition:.2s left,.2s -webkit-transform;-o-transition:.2s transform,.2s left;transition:.2s transform,.2s left;transition:.2s transform,.2s left,.2s -webkit-transform}.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:.2s right,.2s -webkit-transform;transition:.2s right,.2s -webkit-transform;-o-transition:.2s transform,.2s right;transition:.2s transform,.2s right;transition:.2s transform,.2s right,.2s -webkit-transform}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:#007aff;position:absolute;left:0;top:0;width:100%;height:100%;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top}.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{-webkit-transform-origin:right top;-ms-transform-origin:right top;transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progressbar,.swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-container-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-white .swiper-pagination-bullet-active{background:#fff}.swiper-pagination-progressbar.swiper-pagination-white{background:rgba(255,255,255,.25)}.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill{background:#fff}.swiper-pagination-black .swiper-pagination-bullet-active{background:#000}.swiper-pagination-progressbar.swiper-pagination-black{background:rgba(0,0,0,.25)}.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill{background:#000}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;-webkit-transform-origin:50%;-ms-transform-origin:50%;transform-origin:50%;-webkit-animation:swiper-preloader-spin 1s steps(12,end) infinite;animation:swiper-preloader-spin 1s steps(12,end) infinite}.swiper-lazy-preloader:after{display:block;content:'';width:100%;height:100%;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-position:50%;background-size:100%;background-repeat:no-repeat}.swiper-lazy-preloader-white:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}@-webkit-keyframes swiper-preloader-spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes swiper-preloader-spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-container-fade.swiper-container-free-mode .swiper-slide{-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;-webkit-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube{overflow:visible}.swiper-container-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;width:100%;height:100%}.swiper-container-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-cube.swiper-container-rtl .swiper-slide{-webkit-transform-origin:100% 0;-ms-transform-origin:100% 0;transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0;width:100%;height:100%;background:#000;opacity:.6;-webkit-filter:blur(50px);filter:blur(50px);z-index:0}.swiper-container-flip{overflow:visible}.swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-coverflow .swiper-wrapper{-ms-perspective:1200px} @media screen and (max-width:374px) { #fixed_pc{ } .fixed_pc { } #fixed_tab{ } .fixed_tab { } #fixed_sp{ display:block; z-index:3; } .fixed_sp { display:block; width:100%!important; height:50px; position: fixed!important; top: 0; right:0; margin:0px auto; } } @media screen and (min-width: 375px) and (max-width: 767px){ #fixed_pc{ } .fixed_pc { } #fixed_tab{ } .fixed_tab { } #fixed_sp{} .fixed_sp { } .fixed_sp6{ display:block; z-index:3; } .fixed_sp6_on { display:block; width:100%!important; height:50px; position: fixed!important; top: 0; right:0; margin:0px auto; } } @media screen and (min-width: 767px) and (max-width: 1024px) { #fixed_pc{ } .fixed_pc { } #fixed_tab{ display:block; z-index:3; } .fixed_tab { display:block; width:100%!important; height:50px; position: fixed!important; top: 0; right:0; margin:0px auto; } #fixed_sp{ } .fixed_sp { } } @media screen and (min-width:1024px) { #fixed_pc{ display:block; z-index:3; } .fixed_pc { width:100%!important; height:95.56px; position: fixed!important; top: 0; right:0; margin:0px auto; } #fixed_tab{ } .fixed_tab { } #fixed_sp{ } .fixed_sp { } } @media screen and (max-width:768px) { #fixed_001{ z-index:3; } .fixed_001 { width:100%!important; height:50px; position: fixed; top: 0; right:0; margin:0px auto; } #header_cover{ width:100%; height:50px; position:relative; } #side_fixed{ } .side_fixed{ } } @media screen and (min-width:768px) and (max-width:1024px){ #side_fixed{ transition:1s; } .side_fixed{ padding-top:45px; } #fixed_001{ z-index:3; } .fixed_001 { width:100%!important; height:50px; position: fixed; top: 0; right:0; margin:0px auto; } #header_cover{ width:100%; height:50px; position:relative; } } @media screen and (min-width:1024px) { #fixed_001{ z-index:3; } .fixed_001 { width:100%!important; height:95px; position: fixed; top: 0; right:0; margin:0px auto; } #header_cover{ width:100%; height:95px; position:relative; } #side_fixed{ transition:1s; } .side_fixed{ padding-top:90px; } } @keyframes slide_001_in { from { transform: translateY(-100%); } to { transform: translateY(0); } } #fixed_002{ width:100%; height:100px; float:right; z-index:1; } .fixed_002 { position: fixed; top: 0; right:0; background:#303030; z-index: 999; margin:0px auto; animation-name: slide_002_in; animation-duration: .5s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(.8,0,.5,1); } #fixed_003{ width:100%; height:100px; float:right; z-index:1; } .fixed_003 { position: fixed; top: 0; right:0; background:#303030; z-index: 999; margin:0px auto; animation-name: slide_003_in; animation-duration: .5s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(.8,0,.5,1); } #fixed_004{ width:100%; height:100px; float:right; z-index:1; } .fixed_004 { position: fixed; top: 0; right:0; background:#303030; z-index: 999; margin:0px auto; animation-name: slide_004_in; animation-duration: .5s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(.8,0,.5,1); } @keyframes more_link { 0% { width:0%; height:2px; top:calc(50% - 1px); left:0; } 50% { width:100%; height:2px; top:calc(50% - 1px); left:0; } 100% { width:100%; height:100%; top:0; left:0; } } @-webkit-keyframes swing-in-left-fwd { 0% { -webkit-transform: rotateY(100deg); transform: rotateY(100deg); -webkit-transform-origin: left; transform-origin: left; opacity: 0; } 100% { -webkit-transform: rotateY(0); transform: rotateY(0); -webkit-transform-origin: left; transform-origin: left; opacity: 1; } } @keyframes swing-in-left-fwd { 0% { -webkit-transform: rotateY(100deg); transform: rotateY(100deg); -webkit-transform-origin: left; transform-origin: left; opacity: 0; } 100% { -webkit-transform: rotateY(0); transform: rotateY(0); -webkit-transform-origin: left; transform-origin: left; opacity: 1; } } @-webkit-keyframes scale-up-hor-left { 0% { -webkit-transform: scaleX(0.4); transform: scaleX(0.4); -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; } 100% { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; } } @keyframes scale-up-hor-left { 0% { -webkit-transform: scaleX(0.4); transform: scaleX(0.4); -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; } 100% { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; } } @-webkit-keyframes scale-up-ver-top { 0% { -webkit-transform: scaleY(0.4); transform: scaleY(0.4); -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; } 100% { -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; } } @keyframes scale-up-ver-top { 0% { -webkit-transform: scaleY(0.4); transform: scaleY(0.4); -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; } 100% { -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; } } #page-top { position: fixed; bottom: 50px; right: 10px; font-size: 77%; z-index: 10; } #page-top a { background: #666; text-decoration: none; color: #fff; width: 50px; padding: 10px 0; text-align: center; display: block; border-radius: 5px; font-size: 20px; } #page-top a:hover { text-decoration: none; background: #999; } @keyframes fade_in{ 0%{ opacity:0;} 100%{ opacity:1;} } @keyframes fade_out{ 0%{ opacity:1;} 100%{ opacity:0;} } @media screen and (max-width:1280px) { .pick_top_1{ } .pick_top_1on { animation-name: puff-in-center; animation-duration: 1.1s; animation-fill-mode: both; animation-timing-function: cubic-bezier(.8,0,.5,1); } .move_004_1{ } .move_004_1on { } .move_004_2{ width: inherit; height: inherit; overflow: hidden; } .move_004_2on { animation-name: bounce-in-bottom; animation-duration: 2s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(.8,0,.5,1); position: relative; opacity: 1 !important; height: auto !important; } .company_anime{ opacity:0; } .company_anime_on{ opacity:1; animation-name: slide-in-fwd-center; animation-duration: 1.1s; animation-fill-mode: both; animation-timing-function: cubic-bezier(.8,0,.5,1); } } @media screen and (min-width:1280px) { .move_004_1{ width: inherit; height: inherit; overflow: hidden; } .move_004_1on { animation-name: bounce-in-top; animation-duration: 1.1s; animation-fill-mode: both; animation-timing-function: cubic-bezier(.8,0,.5,1); position: relative; opacity: 1 !important; height: auto !important; } .move_004_2{ } .move_004_2on { } .pick_top_1{ } .pick_top_1on { animation-name: puff-in-center; animation-duration: 1.1s; animation-fill-mode: both; animation-timing-function: cubic-bezier(.8,0,.5,1); } .company_anime{ opacity:0; } .company_anime_on{ opacity:1; animation-name: slide-in-fwd-center; animation-duration: 1.1s; animation-fill-mode: both; animation-timing-function: cubic-bezier(.8,0,.5,1); } } .move_fade{ width: inherit; height: inherit; overflow: hidden; } .move_fade_on { animation-name: fade_in; animation-duration: 1s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(.8,0,.5,1); height: auto !important; } .move_001,.move_002,.move_003,.move_004 { transition: opacity 1.5s; transition: transform 1.5s; transition-duration:2s; } @keyframes move_001_in{ 0%{ transform : translateY( -100%);} 100%{ transform : translateY( 0px);} } @keyframes move_001_out{ 0%{ transform : translateY( 0px);} 100%{ transform : translateY( -100%);} } @keyframes move_002_in{ 0%{ transform : translateY( 100%);} 100%{ transform : translateY( 0px);} } @keyframes move_002_out{ 0%{ transform : translateY( 0px);} 100%{ transform : translateY( 100%);} } @keyframes move_003_in{ 0%{ transform : translateX( -100%);} 100%{ transform : translateX( 0px);} } @keyframes move_003_out{ 0%{ transform : translateX( 0px);} 100%{ transform : translateX( -100%);} } @keyframes move_004_in{ 0%{ transform : translateX( 100%);} 100%{ transform : translateX( 0px);} } @keyframes move_004_out{ 0%{ transform : translateX( 0px);} 100%{ transform : translateX( 100%);} } @keyframes move_005_in{ 0%{ opacity:0; transform : translateY( -100%);} 100%{ opacity:1; transform : translateY( 0px);} } @keyframes move_005_out{ 0%{ opacity:1; transform : translateY( 0px);} 100%{ opacity:0; transform : translateY( -100%);} } @keyframes move_006_in{ 0%{ opacity:0; transform : translateY( 100%);} 100%{ opacity:1; transform : translateY( 0px);} } @keyframes move_006_out{ 0%{ opacity:1; transform : translateY( 0px);} 100%{ opacity:0; transform : translateY( 100%);} } @keyframes move_007_in{ 0%{ opacity:0; transform : translateX( -100%);} 100%{ opacity:1; transform : translateX( 0px);} } @keyframes move_007_out{ 0%{ opacity:1; transform : translateX( 0px);} 100%{ opacity:0; transform : translateX( -100%);} } @keyframes move_008_in{ 0%{ opacity:0; transform : translateX( 100%);} 100%{ opacity:1; transform : translateX( 0px);} } @keyframes move_008_out{ 0%{ opacity:1; transform : translateX( 0px);} 100%{ opacity:0; transform : translateX( 100%);} } @-webkit-keyframes slide-in-fwd-center { 0% { -webkit-transform: translateZ(-1400px); transform: translateZ(-1400px); opacity: 0; } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } } @keyframes slide-in-fwd-center { 0% { -webkit-transform: translateZ(-1400px); transform: translateZ(-1400px); opacity: 0; } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } } @-webkit-keyframes puff-in-center { 0% { -webkit-transform: scale(2); transform: scale(2); -webkit-filter: blur(2px); filter: blur(2px); opacity: 0; } 100% { -webkit-transform: scale(1); transform: scale(1); -webkit-filter: blur(0px); filter: blur(0px); opacity: 1; } } @keyframes puff-in-center { 0% { -webkit-transform: scale(2); transform: scale(2); -webkit-filter: blur(2px); filter: blur(2px); opacity: 0; } 100% { -webkit-transform: scale(1); transform: scale(1); -webkit-filter: blur(0px); filter: blur(0px); opacity: 1; } } @-webkit-keyframes bounce-in-top { 0% { -webkit-transform: translateY(-500px); transform: translateY(-500px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 38% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } 55% { -webkit-transform: translateY(-65px); transform: translateY(-65px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 72% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 81% { -webkit-transform: translateY(-28px); transform: translateY(-28px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 90% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 95% { -webkit-transform: translateY(-8px); transform: translateY(-8px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes bounce-in-top { 0% { -webkit-transform: translateY(-500px); transform: translateY(-500px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 38% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } 55% { -webkit-transform: translateY(-65px); transform: translateY(-65px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 72% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 81% { -webkit-transform: translateY(-28px); transform: translateY(-28px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 90% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 95% { -webkit-transform: translateY(-8px); transform: translateY(-8px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-webkit-keyframes bounce-in-bottom { 0% { -webkit-transform: translateY(500px); transform: translateY(500px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 38% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } 55% { -webkit-transform: translateY(65px); transform: translateY(65px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 72% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 81% { -webkit-transform: translateY(28px); transform: translateY(28px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 90% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 95% { -webkit-transform: translateY(8px); transform: translateY(8px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes bounce-in-bottom { 0% { -webkit-transform: translateY(500px); transform: translateY(500px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 38% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } 55% { -webkit-transform: translateY(65px); transform: translateY(65px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 72% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 81% { -webkit-transform: translateY(28px); transform: translateY(28px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 90% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 95% { -webkit-transform: translateY(8px); transform: translateY(8px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-webkit-keyframes bounce-in-fwd { 0% { -webkit-transform: scale(0); transform: scale(0); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 38% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } 55% { -webkit-transform: scale(0.7); transform: scale(0.7); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 72% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 81% { -webkit-transform: scale(0.84); transform: scale(0.84); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 89% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 95% { -webkit-transform: scale(0.95); transform: scale(0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes bounce-in-fwd { 0% { -webkit-transform: scale(0); transform: scale(0); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 38% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } 55% { -webkit-transform: scale(0.7); transform: scale(0.7); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 72% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 81% { -webkit-transform: scale(0.84); transform: scale(0.84); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 89% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 95% { -webkit-transform: scale(0.95); transform: scale(0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-webkit-keyframes bounce-in-bck { 0% { -webkit-transform: scale(7); transform: scale(7); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 38% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } 55% { -webkit-transform: scale(1.5); transform: scale(1.5); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 72% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 81% { -webkit-transform: scale(1.24); transform: scale(1.24); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 89% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 95% { -webkit-transform: scale(1.04); transform: scale(1.04); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes bounce-in-bck { 0% { -webkit-transform: scale(7); transform: scale(7); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 38% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } 55% { -webkit-transform: scale(1.5); transform: scale(1.5); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 72% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 81% { -webkit-transform: scale(1.24); transform: scale(1.24); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 89% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 95% { -webkit-transform: scale(1.04); transform: scale(1.04); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-webkit-keyframes bounce-in-left { 0% { -webkit-transform: translateX(-600px); transform: translateX(-600px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 38% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } 55% { -webkit-transform: translateX(-68px); transform: translateX(-68px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 72% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 81% { -webkit-transform: translateX(-28px); transform: translateX(-28px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 90% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 95% { -webkit-transform: translateX(-8px); transform: translateX(-8px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes bounce-in-left { 0% { -webkit-transform: translateX(-600px); transform: translateX(-600px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 38% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } 55% { -webkit-transform: translateX(-68px); transform: translateX(-68px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 72% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 81% { -webkit-transform: translateX(-28px); transform: translateX(-28px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 90% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 95% { -webkit-transform: translateX(-8px); transform: translateX(-8px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } #tab02 .pick-post,#tab03 .pick-post,#tab04 .pick-post,#tab05 .pick-post{ animation-name: slide_003_in; animation-duration: .5s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(.8,0,.5,1); position: relative; opacity: 1 !important; } #tab02 .pick-post:before,#tab03 .pick-post:before,#tab04 .pick-post:before,#tab05 .pick-post:before { animation-name: slide_003_out; animation-duration: .5s; animation-delay: .5s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(.8,0,.5,1); content: ''; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background-color: #fff; } .bounce-left{ width: inherit; height: inherit; opacity: 0; overflow: hidden; } .bounce-left_on { animation-name: slide-in-elliptic-left-fwd; animation-duration: 1.5s; animation-fill-mode: both; animation-timing-function: cubic-bezier(.8,0,.5,1); position: relative; opacity: 1 !important; } .bounce-left_on li:nth-child(1){ animation-name: slide-in-elliptic-left-fwd; animation-duration: 1.4s; animation-fill-mode: both; animation-timing-function: cubic-bezier(.8,0,.5,1); position: relative; opacity: 1 !important; } .bounce-left_on li:nth-child(2){ animation-name: slide-in-elliptic-left-fwd; animation-duration: 1.7s; animation-fill-mode: both; animation-timing-function: cubic-bezier(.8,0,.5,1); position: relative; opacity: 1 !important; } .bounce-left_on li:nth-child(n+3){ animation-name: slide-in-elliptic-left-fwd; animation-duration: 2s; animation-fill-mode: both; animation-timing-function: cubic-bezier(.8,0,.5,1); position: relative; opacity: 1 !important; } .logo_img { width: inherit; opacity: 0; overflow: hidden; } .logo_img_on { animation-name: scale-in-hor-center; animation-duration: .5s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(.8,0,.5,1); position: relative; opacity: 1 !important; } .company_img { width: inherit; opacity: 0; overflow: hidden; } .company_img_on { animation-name:bounce-in-top; animation-duration: 1s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(.8,0,.5,1); position: relative; opacity: 1 !important; } .anime_cate_on{ animation-name: slide-in-elliptic-left-fwd; animation-duration: 1s; animation-fill-mode: both; animation-timing-function: cubic-bezier(.8,0,.5,1); position: relative; opacity: 1 !important; } .slide_001 { width: inherit; height: inherit; opacity: 0; overflow: hidden; } .slide_001_on { animation-name: slide_001_in; animation-duration: .5s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(.8,0,.5,1); position: relative; opacity: 1 !important; } .slide_001_on:before { animation-name: slide_001_out; animation-duration: .5s; animation-delay: .5s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(.8,0,.5,1); content: ''; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background-image: linear-gradient( 180deg, rgba(156,252,248,1) 11.2%, rgba(110,123,251,1) 91.1% ); } .slide_002 { width: inherit; height: inherit; opacity: 0; overflow: hidden; } .slide_002_on { animation-name: slide_002_in; animation-duration: .5s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(.8,0,.5,1); position: relative; opacity: 1 !important; } .slide_002_on:before { animation-name: slide_002_out; animation-duration: .5s; animation-delay: .5s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(.8,0,.5,1); content: ''; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background-image: linear-gradient( 180deg , rgba(110,123,251,1) 11.2% , rgba(156,252,248,1) 91.1% ); } .slide_003 { width: inherit; height: inherit; opacity: 0; overflow: hidden; } .slide_003_on { animation-name: slide_003_in; animation-duration: .5s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(.8,0,.5,1); position: relative; opacity: 1 !important; } .slide_003_on:before { animation-name: slide_003_out; animation-duration: .5s; animation-delay: .5s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(.8,0,.5,1); content: ''; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background-color: #fff; } .slide_004 { width: inherit; height: inherit; opacity: 0; overflow: hidden; } .slide_004_on { animation-name: slide_004_in; animation-duration: 1s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(.8,0,.5,1); position: relative; opacity: 1 !important; } .slide_004_on:before { animation-name: slide_004_out; animation-duration: 1s; animation-delay: 1s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(.8,0,.5,1); content: ''; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background-color:#ddd; } @keyframes slide_001_in { from { transform: translateY(-100%); } to { transform: translateY(0); } } @keyframes slide_001_out { from { transform: translateY(0); } to { transform: translateY(100%); } } @keyframes slide_002_in { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes slide_002_out { from { transform: translateY(0); } to { transform: translateY(-100%); } } @keyframes slide_003_in { from { transform: translateX(-100%); } to { transform: translateX(0); } } @keyframes slide_003_out { from { transform: translateX(0); } to { transform: translateX(100%); } } @keyframes slide_004_in { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes slide_004_out { from { transform: translateX(0); } to { transform: translateX(-100%); } } @-webkit-keyframes swing-in-bottom-fwd { 0% { -webkit-transform: rotateX(100deg); transform: rotateX(100deg); -webkit-transform-origin: bottom; transform-origin: bottom; opacity: 0; } 100% { -webkit-transform: rotateX(0); transform: rotateX(0); -webkit-transform-origin: bottom; transform-origin: bottom; opacity: 1; } } @keyframes swing-in-bottom-fwd { 0% { -webkit-transform: rotateX(100deg); transform: rotateX(100deg); -webkit-transform-origin: bottom; transform-origin: bottom; opacity: 0; } 100% { -webkit-transform: rotateX(0); transform: rotateX(0); -webkit-transform-origin: bottom; transform-origin: bottom; opacity: 1; } } @-webkit-keyframes slide-in-bck-bottom { 0% { -webkit-transform: translateZ(700px) translateY(300px); transform: translateZ(700px) translateY(300px); opacity: 0; } 100% { -webkit-transform: translateZ(0) translateY(0); transform: translateZ(0) translateY(0); opacity: 1; } } @keyframes slide-in-bck-bottom { 0% { -webkit-transform: translateZ(700px) translateY(300px); transform: translateZ(700px) translateY(300px); opacity: 0; } 100% { -webkit-transform: translateZ(0) translateY(0); transform: translateZ(0) translateY(0); opacity: 1; } } @-webkit-keyframes scale-in-hor-center { 0% { -webkit-transform: scaleX(0); transform: scaleX(0); opacity: 1; } 100% { -webkit-transform: scaleX(1); transform: scaleX(1); opacity: 1; } } @keyframes scale-in-hor-center { 0% { -webkit-transform: scaleX(0); transform: scaleX(0); opacity: 1; } 100% { -webkit-transform: scaleX(1); transform: scaleX(1); opacity: 1; } } @-webkit-keyframes bounce-in-left { 0% { -webkit-transform: translateX(-600px); transform: translateX(-600px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 38% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } 55% { -webkit-transform: translateX(-68px); transform: translateX(-68px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 72% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 81% { -webkit-transform: translateX(-28px); transform: translateX(-28px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 90% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 95% { -webkit-transform: translateX(-8px); transform: translateX(-8px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes bounce-in-left { 0% { -webkit-transform: translateX(-600px); transform: translateX(-600px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 38% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } 55% { -webkit-transform: translateX(-68px); transform: translateX(-68px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 72% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 81% { -webkit-transform: translateX(-28px); transform: translateX(-28px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 90% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 95% { -webkit-transform: translateX(-8px); transform: translateX(-8px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-webkit-keyframes slide-in-elliptic-left-fwd { 0% { -webkit-transform: translateX(-800px) rotateY(30deg) scale(0); transform: translateX(-800px) rotateY(30deg) scale(0); -webkit-transform-origin: -100% 50%; transform-origin: -100% 50%; opacity: 0; } 100% { -webkit-transform: translateX(0) rotateY(0) scale(1); transform: translateX(0) rotateY(0) scale(1); -webkit-transform-origin: 1800px 50%; transform-origin: 1800px 50%; opacity: 1; } } @keyframes slide-in-elliptic-left-fwd { 0% { -webkit-transform: translateX(-800px) rotateY(30deg) scale(0); transform: translateX(-800px) rotateY(30deg) scale(0); -webkit-transform-origin: -100% 50%; transform-origin: -100% 50%; opacity: 0; } 100% { -webkit-transform: translateX(0) rotateY(0) scale(1); transform: translateX(0) rotateY(0) scale(1); -webkit-transform-origin: 1800px 50%; transform-origin: 1800px 50%; opacity: 1; } } .tab-button-outer { display: none; } .tab-select-outer { display: block; } @media screen and (max-width: 1280px) { .tab-button-outer { display: none; } .tab-select-outer { display: block; position: absolute; top: 11px; right: 5px; width: 189px; height: 27px; cursor: pointer; z-index:1; } .tab-select-outer select{ width: 189px; height: 27px; background: #fff; } .tabs{ width: calc(100%); margin: 0px auto; position: relative; overflow:hidden; padding: 0px; } .tab-contents{ padding: 0 0 35px 0; display:none; } .is-active{ display:block; } } @media screen and (min-width: 1280px) { .tab-button-outer { display: none; } .tab-select-outer { display: block; position: absolute; top: 14px; right: 35px; width: 189px; height: 27px; cursor: pointer; z-index:1; } .tab-select-outer select{ width: 189px; height: 27px; background: #fff; } .tabs{ width: 1010px; margin: 30px auto 0px auto; position: relative; overflow:hidden; } .tab-contents{ padding: 0 0 35px 0; display:none; } .is-active{ display:block; } } .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } .slick-loading .slick-list { background: #fff url('./ajax-loader.gif') center center no-repeat; } @font-face { font-family: 'slick'; font-weight: normal; font-style: normal; src: url('./fonts/slick.eot'); src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg'); } .slick-prev, .slick-next { font-size: 0; line-height: 0; position: absolute; top: 50%; display: block; width: 20px; height: 20px; padding: 0; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); cursor: pointer; color: transparent; border: none; outline: none; background: transparent; } .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { color: transparent; outline: none; background: transparent; } .slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; } .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: .25; } .slick-prev:before, .slick-next:before { font-family: 'slick'; font-size: 20px; line-height: 1; opacity: .75; color: white; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-prev { left: -25px; } [dir='rtl'] .slick-prev { right: -25px; left: auto; } .slick-prev:before { content: '←'; } [dir='rtl'] .slick-prev:before { content: '→'; } .slick-next { right: -25px; } [dir='rtl'] .slick-next { right: auto; left: -25px; } .slick-next:before { content: '→'; } [dir='rtl'] .slick-next:before { content: '←'; } .slick-dotted.slick-slider { margin-bottom: 30px; } .slick-dots { position: absolute; bottom: -25px; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center; } .slick-dots li { position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 5px; padding: 0; cursor: pointer; } .slick-dots li button { font-size: 0; line-height: 0; display: block; width: 20px; height: 20px; padding: 5px; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent; } .slick-dots li button:hover, .slick-dots li button:focus { outline: none; } .slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; } .slick-dots li button:before { font-family: 'slick'; font-size: 6px; line-height: 20px; position: absolute; top: 0; left: 0; width: 20px; height: 20px; content: '•'; text-align: center; opacity: .25; color: black; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-dots li.slick-active button:before { opacity: .75; color: black; } @media screen and (max-width:767px) { .menu-btn{ position:absolute; display:block; top: 0px; right: 0px; font-size:15px; text-align:center; width:50px; height:50px; z-index:3; } .my-example { font-size: 60px; height:50px; color:#fff; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity:1; } .my-example2 { font-size: 60px; height:50px; color:#fff; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity:0; } .close-menu{ position: absolute; top:0px; right: 0; width: calc(100% - 400px); height: 100vh; margin: 95px 0 0 0; background: rgba(0,0,0,0); -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: .3s; transition-duration: .3s; -webkit-transition-delay: 0s; transition-delay: 0s; visibility: hidden; opacity: 0; } .menu-btn:hover .bar{ background: #aaa; } .menu-btn:hover .menu-btn__text{ color: #fff; } .check:checked ~ .drawer-menu{ -webkit-transition-delay: .3s; transition-delay: .3s; -webkit-transform: none; -ms-transform: none; transform: none; opacity: 1; z-index: 2000; width:100%; } .check:checked ~ #contents,.check:checked ~ #slide_screen,.check:checked ~ #footer,.check:checked ~ #loop_003_wrap { -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } .check:checked ~ .menu-btn .my-example{ opacity:0; } .check:checked ~ .menu-btn .my-example2{ opacity:1; } .check:checked ~ .close-menu{ -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-delay: .3s; transition-delay: .3s; background: rgba(0, 0, 0,0.5); visibility: visible; opacity: 1; z-index: 3; } .check { display: none; } .pick-up_inner{ width:100%; background:#fff; position:relative; padding: 0 0 30px 0; } .tab_back{ position: absolute; top: 0; left: 0; width: 100%; height: 48px; background: #efefef; } .tab_menu{ width: 100%; height: 100%; margin: 0px auto; position:relative; } .tab { position: absolute; top: 14px; right: 130px; width: 189px; height: 27px; cursor: pointer; z-index:1; } .pul_tab{ border:1px solid #bbb; width: calc(100% - 7px); height: calc(100% - 2px); line-height: 27px; background: #fff; position: absolute; top: 0; left: 0; padding-left: 5px; z-index: 4; } .pul_tab span{ position: absolute; top: 0; right: 5px; } .tab:hover .bt01{ top:27px; } .tab:hover .bt02{ top:54px; } .tab:hover .bt03{ top:81px; } .pul_tab:hover .bt04{ top:108px; } .pul_tab:hover .bt05{ top:135px; } .tab li { color: #333; cursor: pointer; list-style: none; transition: .3s; background:#fff; position: absolute; width: calc(100% - 7px); height:calc(100%); top: 0; left: 0; padding-left:5px; border-right:1px solid #bbb; border-left:1px solid #bbb; } .tab li.active { color: #000000; background: #c8c8c8; cursor: auto; } .tab li:last-child{ border-bottom:1px solid #bbb; height:calc(100% - 1px)!important; } .show_tag{ width: calc(125px - 46px); height: calc(56px - 20px); text-align: center; padding: 10px 23px; background: #fff; margin-left: 30px; } .show_tag h4{ border-bottom: 2px solid #fbb443; line-height: 32px; color: #000000; font-size: 14px; font-family: "ＭＳ Ｐゴシック,ＭＳ ゴシック", sans-serif; } .area{ width:98%; height:919px; margin:0px auto; } .area ul { display: none; } .area ul.show { display: block; } .pick-post{ width: calc(100% - 14px); position: relative; padding: 24px 7px 7px 7px; } .show{ position:relative; } .pr_img{ width:300px; height:250px; margin:70px auto 0px auto; position:relative; z-index:1; } .pick-post li{ list-style:none; width:calc(100%); height:73px; margin-right:0px!important; padding:9px 0px 0px 0px; border-bottom: 1px solid #ddd; } .pick-post li:last-child{ display:none; } .pick-post li:nth-child(1){ padding:0px; } .pick-post li img{ width:90px; height:60px; float:left; object-fit: cover; object-position: center; } .pick-post li .post_doc{ width:calc(100% - 100px); height:60px; float:left; padding-left:10px; position:relative; padding-bottom: 14px; } .pick-post li .post_doc h2{ color: #000000; font-size: 15px; font-family: "ＭＳ Ｐゴシック,ＭＳ ゴシック", sans-serif; line-height: 23px; padding:0px; width:100%; height:23px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pick-post li .post_doc p{ color: #000000; font-size: 12px; font-family: "ＭＳ Ｐゴシック,ＭＳ ゴシック", sans-serif; padding: 0px 0 0 0; line-height: 18px; width:100%; height:18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pick-post li .post_doc h5{ position: absolute; bottom: 10px; left: 10px; font-size: 10px; padding: 1px 8px; color: #fff; font-weight: normal; } .tag_news{ background: #3d91e0; } .tag_future{ background: #f39800; } .tag_cloud{ background: #9fbb3b; } .tag_present{ background: #da0250; } .tag_pickup { background: #ff9a9a; } .tag_recruit { background: #746BAC; } .tag_blog{ background: #3B917A; } .pick-post li .post_doc span{ position: absolute; bottom: 10px; right: 0px; color: #b9b9b9; font-size: 12px; font-family: "ＭＳ Ｐゴシック,ＭＳ ゴシック", sans-serif; } .pick_more{ width: 150px; height: 36px; padding: 15px 0px 25px 0px; margin: 0px auto; position: relative; float:left; } .box_more{ width: 150px; height: 36px; padding: 15px 0px 25px 0px; margin: 0px auto; position: relative; float:left; } .more_link{ width: 133px; height: 36px; background-color: #2ea7e0; text-align: center; font-size: 14px; line-height: 36px; color: #fff; float:left; } .list_link{ width:139.47px; height:36px; background-color: #2ea7e0; text-align:center; font-size: 14px; line-height:36px; float:right; } .blog_link{ width:169.55px; height:36px; background-color: #2ea7e0; text-align:center; font-size: 14px; line-height:36px; margin:0px auto; color: #fff; } .more_link a,.list_link a,.blog_link a{ color:#fff; display:block; } .pick-post li a:hover{ transform:tlanslate(0px, 10px); } .more_link a p,.list_link a p,.movie_link a p,.blog_link a p,.partner_link a p{ position: relative; z-index: 0; } } @media screen and (min-width:768px) and (max-width:1024px){ .menu-btn{ position:absolute; display:block; top: 0px; right: 0px; font-size:15px; text-align:center; width:50px; height:50px; z-index:3; } .my-example { font-size: 60px; width:50px; color:#fff; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity:1; } .my-example2 { font-size: 60px; width:50px; color:#fff; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity:0; } .close-menu{ position: absolute; top:0px; right: 0; width: calc(100% - 400px); height: 100vh; margin: 50px 0 0 0; background: rgba(0,0,0,0); -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: .3s; transition-duration: .3s; -webkit-transition-delay: 0s; transition-delay: 0s; visibility: hidden; opacity: 0; } .menu-btn:hover .bar{ background: #aaa; } .menu-btn:hover .menu-btn__text{ color: #fff; } .check:checked ~ .drawer-menu{ -webkit-transition-delay: .3s; transition-delay: .3s; -webkit-transform: none; -ms-transform: none; transform: none; opacity: 1; z-index: 2000; } .check:checked ~ #contents,.check:checked ~ #slide_screen,.check:checked ~ #footer,.check:checked ~ #loop_003_wrap { -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } .check:checked ~ .menu-btn .my-example{ opacity:0; } .check:checked ~ .menu-btn .my-example2{ opacity:1; } .check:checked ~ .close-menu{ -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-delay: .3s; transition-delay: .3s; background: rgba(0, 0, 0,0.5); visibility: visible; opacity: 1; z-index: 3; } .check { display: none; } .pick-up_inner{ width:100%; background:#fff; position:relative; padding: 0 0 30px 0; } .tab_back{ position: absolute; top: 0; left: 0; width: 100%; height: 48px; background: #efefef; } .tab_menu{ width: 100%; height: 100%; margin: 0px auto; position:relative; } .tab { position: absolute; top: 14px; right: 130px; width: 189px; height: 27px; cursor: pointer; z-index:1; } .pul_tab{ border:1px solid #bbb; width: calc(100% - 7px); height: calc(100% - 2px); line-height: 27px; background: #fff; position: absolute; top: 0; left: 0; padding-left: 5px; z-index: 4; } .pul_tab span{ position: absolute; top: 0; right: 5px; } .tab:hover .bt01{ top:27px; } .tab:hover .bt02{ top:54px; } .tab:hover .bt03{ top:81px; } .pul_tab:hover .bt04{ top:108px; } .pul_tab:hover .bt05{ top:135px; } .tab li { color: #333; cursor: pointer; list-style: none; transition: .3s; background:#fff; position: absolute; width: calc(100% - 7px); height:calc(100%); top: 0; left: 0; padding-left:5px; border-right:1px solid #bbb; border-left:1px solid #bbb; } .tab li.active { color: #000000; background: #c8c8c8; cursor: auto; } .tab li:last-child{ border-bottom:1px solid #bbb; height:calc(100% - 1px)!important; } .show_tag{ width: calc(125px - 46px); height: calc(56px - 20px); text-align: center; padding: 10px 23px; background: #fff; margin-left: 30px; } .show_tag h4{ border-bottom: 2px solid #fbb443; line-height: 32px; color: #000000; font-size: 14px; font-family: "ＭＳ Ｐゴシック,ＭＳ ゴシック", sans-serif; } .area{ width:98%; height:919px; margin:0px auto; } .area ul { display: none; } .area ul.show { display: block; } .pick-post{ width: calc(100% - 14px); position: relative; padding: 24px 7px 7px 7px; } .show{ position:relative; } .pr_img{ width:300px; height:250px; margin:70px auto 0px auto; position:relative; z-index:1; } .pick-post li{ list-style:none; width:calc(100%); height:87px; margin-right:0px; padding:9px 0px 0px 0px; border-bottom: 1px solid #ddd; } .pick-post li:nth-child(1){ padding:0px; } .pick-post li img{ width:130px; height:90px; float:left; object-fit: cover; object-position: center; } .pick-post li .post_doc{ width: calc(98% - 130px - 22px); height:90px; float:left; padding-left:10px; position:relative; padding-bottom: 14px; } .pick-post li .post_doc h2{ color: #000000; font-size: 15px; font-family: "ＭＳ Ｐゴシック,ＭＳ ゴシック", sans-serif; line-height: 23px; padding:0px; width:100%; height:23px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pick-post li .post_doc p{ color: #000000; font-size: 12px; font-family: "ＭＳ Ｐゴシック,ＭＳ ゴシック", sans-serif; padding: 0px 0 0 0; line-height: 18px; width:100%; height:18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pick-post li .post_doc h5{ position: absolute; bottom: 10px; left: 10px; font-size: 10px; padding: 1px 8px; color: #fff; font-weight: normal; } .tag_news{ background: #3d91e0; } .tag_future{ background: #f39800; } .tag_cloud{ background: #9fbb3b; } .tag_present{ background: #da0250; } .tag_pickup { background: #ff9a9a; } .tag_recruit { background: #746BAC; } .tag_blog{ background: #3B917A; } .pick-post li .post_doc span{ position: absolute; bottom: 10px; right: 0px; color: #b9b9b9; font-size: 12px; font-family: "ＭＳ Ｐゴシック,ＭＳ ゴシック", sans-serif; } .pick_more{ width: 150px; height: 36px; padding: 15px 0px 25px 0px; margin: 0px auto; position: relative; float:left; } .box_more{ width: 150px; height: 36px; padding: 15px 0px 25px 0px; margin: 0px auto; position: relative; float:left; } .more_link{ width: 133px; height: 36px; background-color: #2ea7e0; text-align: center; font-size: 14px; line-height: 36px; color: #fff; float:left; } .list_link{ width:139.47px; height:36px; background-color: #2ea7e0; text-align:center; font-size: 14px; line-height:36px; float:right; } .blog_link{ width:169.55px; height:36px; background-color: #2ea7e0; text-align:center; font-size: 14px; line-height:36px; margin:0px auto; color: #fff; } .more_link a,.list_link a,.blog_link a{ color:#fff; display:block; } .pick-post li a:hover{ transform:tlanslate(0px, 10px); } .more_link a p,.list_link a p,.movie_link a p,.blog_link a p,.partner_link a p{ position: relative; z-index: 0; } } @media screen and (min-width:1024px) { .menu-btn{ position:absolute; display:block; top: 0px; left: 0px; font-size:15px; text-align:center; width:95px; height:95px; z-index:3; } .my-example { font-size: 60px; line-height: 50px; width:95px; color:#fff; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity:1; } .my-example2 { font-size: 60px; line-height: 50px; width:95px; color:#fff; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity:0; } .close-menu{ position: absolute; top:0px; right: 0; width: calc(100% - 400px); height: 100vh; margin: 95px 0 0 0; background: rgba(0,0,0,0); -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: .3s; transition-duration: .3s; -webkit-transition-delay: 0s; transition-delay: 0s; visibility: hidden; opacity: 0; } .menu-btn:hover .bar{ background: #aaa; } .menu-btn:hover .menu-btn__text{ color: #fff; } .check:checked ~ .drawer-menu{ -webkit-transition-delay: .3s; transition-delay: .3s; -webkit-transform: none; -ms-transform: none; transform: none; opacity: 1; z-index: 2000; } .check:checked ~ #contents,.check:checked ~ #slide_screen,.check:checked ~ #footer,.check:checked ~ #loop_003_wrap { -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } .check:checked ~ .menu-btn .my-example{ opacity:0; } .check:checked ~ .menu-btn .my-example2{ opacity:1; } .check:checked ~ .close-menu{ -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-delay: .3s; transition-delay: .3s; background: rgba(0, 0, 0,0.5); visibility: visible; opacity: 1; z-index: 3; } .check { display: none; } .pick-up_inner{ width:100%; background:#fff; position:relative; padding: 0 0 30px 0; } .tab_back{ position: absolute; top: 0; left: 0; width: 100%; height: 56px; background: #efefef; } .tab_menu{ width: 1010px; height: 100%; margin: 0px auto; position:relative; padding: 0px 0px 0px 0px; } .tab { position: absolute; top: 14px; right: 130px; width: 189px; height: 27px; cursor: pointer; z-index:1; } .pul_tab{ border:1px solid #bbb; width: calc(100% - 7px); height: calc(100% - 2px); line-height: 27px; background: #fff; position: absolute; top: 0; left: 0; padding-left: 5px; z-index: 4; } .pul_tab span{ position: absolute; top: 0; right: 5px; } .tab:hover .bt01{ top:27px; } .tab:hover .bt02{ top:54px; } .tab:hover .bt03{ top:81px; } .pul_tab:hover .bt04{ top:108px; } .pul_tab:hover .bt05{ top:135px; } .tab li { color: #333; cursor: pointer; list-style: none; transition: .3s; background:#fff; position: absolute; width: calc(100% - 7px); height:calc(100%); top: 0; left: 0; padding-left:5px; border-right:1px solid #bbb; border-left:1px solid #bbb; } .tab li.active { color: #000000; background: #c8c8c8; cursor: auto; } .tab li:last-child{ border-bottom:1px solid #bbb; height:calc(100% - 1px)!important; } .show_tag{ width: calc(125px - 46px); height: calc(56px - 20px); text-align: center; padding: 10px 23px; background: #fff; margin-left: 35px; } .show_tag h4{ padding-bottom:1px; border-bottom: 2px solid #fbb443; line-height: 31px; color: #000000; font-size: 14px; font-family: "ＭＳ Ｐゴシック,ＭＳ ゴシック", sans-serif; } .area{ width:1010px; height:919px; margin:0px auto; } .area ul { display: none; } .area ul.show { display: block; } .pick-post{ width: calc(100% + 30px); position: relative; } .show{ position:relative; } .pr_img{ width:300px; height:250px; position:absolute; top:96px; right:0px; overflow: hidden; } .pick-post li{ list-style:none; } .tag_news{ background: #3d91e0; } .tag_future{ background: #f39800; } .tag_cloud{ background: #9fbb3b; } .tag_present{ background: #da0250; } .tag_pickup { background: #ff9a9a; } .tag_recruit { background: #746BAC; } .tag_blog{ background: #3B917A; } .pick-post li:nth-child(n+1) { width: 490px; height: 120px!important; float: left; padding-top: 19px; border-bottom: 1px solid #ddd; margin-right: 30px; } .pick-post li:nth-child(n+1) img{ width:141px; height: 94px; float:left; object-fit: cover; object-position: center; } .pick-post li:nth-child(n+1) .post_doc{ width:303px; height:130px; float:left; padding-left:22px; position:relative; } .pick-post li:nth-child(n+1) .post_doc h2{ color: #000000; font-size: 16px; font-family: "ＭＳ Ｐゴシック,ＭＳ ゴシック", sans-serif; line-height: 22px; padding:0px 0px 0px 0px; max-height: 44px; overflow: hidden; text-overflow: ellipsis; } .pick-post li:nth-child(n+1) .post_doc p{ color: #000000; font-size: 13px; font-family: "ＭＳ Ｐゴシック,ＭＳ ゴシック", sans-serif; padding: 9px 0 0 0; line-height: 20px; height: 40px; overflow: hidden; text-overflow: ellipsis; } .pick-post li:nth-child(n+1) .post_doc h5{ position: absolute; bottom: 22px; left: 22px; font-size: 10px; padding: 1px 8px; color: #fff; font-weight: normal; } .pick-post li:nth-child(n+1) .post_doc span{ position: absolute; bottom: 22px; right: 0px; color: #b9b9b9; font-size: 12px; font-family: "ＭＳ Ｐゴシック,ＭＳ ゴシック", sans-serif; } .pick_more{ width: 100%; height: 46px; padding: 10px 0px 15px 0px; margin: -2px auto 0px auto; position: relative; float: left; background: #fff; } .sub_blog-post .pick_more{ background: #fff; width: 150px; height: 36px; padding: 15px 0px 25px 0px; margin: 0px auto; position: relative; float: left; } .box_more{ width: 100%; float: left; height: 46px; margin-bottom: -46px; position:relative; } .more_link{ width: 140px; height: 46px; background-color: #2ea7e0; text-align: center; font-size: 14px; line-height: 46px; color: #fff; position: absolute; right: 177px; top: 8px; z-index: 2; } .list_link{ position:absolute; top:10px; right:30px; width:130px; height:46px; background-color: #2ea7e0; text-align:center; font-size: 14px; line-height:46px; } .blog_link{ position:absolute; top:10px; right:0px; width:229.55px; height:46px; background-color: #2ea7e0; text-align:center; font-size: 14px; line-height:46px; } .more_link a,.list_link a,.blog_link a{ color:#fff; display:block; } .pick-post li a:hover{ transform:tlanslate(0px, 10px); } .more_link a:hover span,.list_link a:hover span,.movie_link a:hover span,.blog_link a:hover span,.partner_link a:hover span{ position: absolute; top: 0; left: 0; background: #90b7ca; width: 100%; height: 100%; animation-name: more_link; animation-duration: .5s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(.8,0,.5,1); } .more_link a p,.list_link a p,.movie_link a p,.blog_link a p,.partner_link a p{ position: relative; z-index: 0; } }