/** * Swiper 5.3.0 * Most modern mobile touch slider and framework with hardware accelerated transitions * http://swiperjs.com * * Copyright 2014-2020 Vladimir Kharlampidi * * Released under the MIT License * * Released on: January 11, 2020 */ @font-face{font-family:swiper-icons;src:url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff");font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper-container{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-container-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-container-multirow>.swiper-wrapper{flex-wrap:wrap}.swiper-container-multirow-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-container-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-container-3d{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{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:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{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:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-container-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-container-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-container-horizontal.swiper-container-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-container-vertical.swiper-container-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(-1 * var(--swiper-navigation-size)/ 2);z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;text-transform:none;font-variant:initial}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-container-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-container-rtl .swiper-button-prev:after{content:'next'}.swiper-button-next.swiper-button-white,.swiper-button-prev.swiper-button-white{--swiper-navigation-color:#ffffff}.swiper-button-next.swiper-button-black,.swiper-button-prev.swiper-button-black{--swiper-navigation-color:#000000}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;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{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{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;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:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px,-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%;transform:translateY(-50%);width:8px}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 4px}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{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-color:#ffffff}.swiper-pagination-black{--swiper-pagination-color:#000000}.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:flex;justify-content: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%;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;transform-origin:50%;animation:swiper-preloader-spin 1s infinite linear;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{100%{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{transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;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;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{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:0px;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} [data-aos][data-aos][data-aos-easing=linear],body[data-aos-easing=linear] [data-aos]{transition-timing-function:cubic-bezier(.25,.25,.75,.75)}[data-aos][data-aos][data-aos-easing=ease],body[data-aos-easing=ease] [data-aos]{transition-timing-function:ease}[data-aos][data-aos][data-aos-easing=ease-in],body[data-aos-easing=ease-in] [data-aos]{transition-timing-function:ease-in}[data-aos][data-aos][data-aos-easing=ease-out],body[data-aos-easing=ease-out] [data-aos]{transition-timing-function:ease-out}[data-aos][data-aos][data-aos-easing=ease-in-out],body[data-aos-easing=ease-in-out] [data-aos]{transition-timing-function:ease-in-out}[data-aos][data-aos][data-aos-easing=ease-in-back],body[data-aos-easing=ease-in-back] [data-aos]{transition-timing-function:cubic-bezier(.6,-.28,.735,.045)}[data-aos][data-aos][data-aos-easing=ease-out-back],body[data-aos-easing=ease-out-back] [data-aos]{transition-timing-function:cubic-bezier(.175,.885,.32,1.275)}[data-aos][data-aos][data-aos-easing=ease-in-out-back],body[data-aos-easing=ease-in-out-back] [data-aos]{transition-timing-function:cubic-bezier(.68,-.55,.265,1.55)}[data-aos][data-aos][data-aos-easing=ease-in-sine],body[data-aos-easing=ease-in-sine] [data-aos]{transition-timing-function:cubic-bezier(.47,0,.745,.715)}[data-aos][data-aos][data-aos-easing=ease-out-sine],body[data-aos-easing=ease-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.39,.575,.565,1)}[data-aos][data-aos][data-aos-easing=ease-in-out-sine],body[data-aos-easing=ease-in-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.445,.05,.55,.95)}[data-aos][data-aos][data-aos-easing=ease-in-quad],body[data-aos-easing=ease-in-quad] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quad],body[data-aos-easing=ease-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quad],body[data-aos-easing=ease-in-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-cubic],body[data-aos-easing=ease-in-cubic] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-cubic],body[data-aos-easing=ease-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-cubic],body[data-aos-easing=ease-in-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-quart],body[data-aos-easing=ease-in-quart] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quart],body[data-aos-easing=ease-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quart],body[data-aos-easing=ease-in-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-duration='50'],body[data-aos-duration='50'] [data-aos]{transition-duration:50ms}[data-aos][data-aos][data-aos-duration='100'],body[data-aos-duration='100'] [data-aos]{transition-duration:.1s}[data-aos][data-aos][data-aos-duration='150'],body[data-aos-duration='150'] [data-aos]{transition-duration:.15s}[data-aos][data-aos][data-aos-duration='200'],body[data-aos-duration='200'] [data-aos]{transition-duration:.2s}[data-aos][data-aos][data-aos-duration='250'],body[data-aos-duration='250'] [data-aos]{transition-duration:.25s}[data-aos][data-aos][data-aos-duration='300'],body[data-aos-duration='300'] [data-aos]{transition-duration:.3s}[data-aos][data-aos][data-aos-duration='350'],body[data-aos-duration='350'] [data-aos]{transition-duration:.35s}[data-aos][data-aos][data-aos-duration='400'],body[data-aos-duration='400'] [data-aos]{transition-duration:.4s}[data-aos][data-aos][data-aos-duration='450'],body[data-aos-duration='450'] [data-aos]{transition-duration:.45s}[data-aos][data-aos][data-aos-duration='500'],body[data-aos-duration='500'] [data-aos]{transition-duration:.5s}[data-aos][data-aos][data-aos-duration='550'],body[data-aos-duration='550'] [data-aos]{transition-duration:.55s}[data-aos][data-aos][data-aos-duration='600'],body[data-aos-duration='600'] [data-aos]{transition-duration:.6s}[data-aos][data-aos][data-aos-duration='650'],body[data-aos-duration='650'] [data-aos]{transition-duration:.65s}[data-aos][data-aos][data-aos-duration='700'],body[data-aos-duration='700'] [data-aos]{transition-duration:.7s}[data-aos][data-aos][data-aos-duration='750'],body[data-aos-duration='750'] [data-aos]{transition-duration:.75s}[data-aos][data-aos][data-aos-duration='800'],body[data-aos-duration='800'] [data-aos]{transition-duration:.8s}[data-aos][data-aos][data-aos-duration='850'],body[data-aos-duration='850'] [data-aos]{transition-duration:.85s}[data-aos][data-aos][data-aos-duration='900'],body[data-aos-duration='900'] [data-aos]{transition-duration:.9s}[data-aos][data-aos][data-aos-duration='950'],body[data-aos-duration='950'] [data-aos]{transition-duration:.95s}[data-aos][data-aos][data-aos-duration='1000'],body[data-aos-duration='1000'] [data-aos]{transition-duration:1s}[data-aos][data-aos][data-aos-duration='1050'],body[data-aos-duration='1050'] [data-aos]{transition-duration:1.05s}[data-aos][data-aos][data-aos-duration='1100'],body[data-aos-duration='1100'] [data-aos]{transition-duration:1.1s}[data-aos][data-aos][data-aos-duration='1150'],body[data-aos-duration='1150'] [data-aos]{transition-duration:1.15s}[data-aos][data-aos][data-aos-duration='1200'],body[data-aos-duration='1200'] [data-aos]{transition-duration:1.2s}[data-aos][data-aos][data-aos-duration='1250'],body[data-aos-duration='1250'] [data-aos]{transition-duration:1.25s}[data-aos][data-aos][data-aos-duration='1300'],body[data-aos-duration='1300'] [data-aos]{transition-duration:1.3s}[data-aos][data-aos][data-aos-duration='1350'],body[data-aos-duration='1350'] [data-aos]{transition-duration:1.35s}[data-aos][data-aos][data-aos-duration='1400'],body[data-aos-duration='1400'] [data-aos]{transition-duration:1.4s}[data-aos][data-aos][data-aos-duration='1450'],body[data-aos-duration='1450'] [data-aos]{transition-duration:1.45s}[data-aos][data-aos][data-aos-duration='1500'],body[data-aos-duration='1500'] [data-aos]{transition-duration:1.5s}[data-aos][data-aos][data-aos-duration='1550'],body[data-aos-duration='1550'] [data-aos]{transition-duration:1.55s}[data-aos][data-aos][data-aos-duration='1600'],body[data-aos-duration='1600'] [data-aos]{transition-duration:1.6s}[data-aos][data-aos][data-aos-duration='1650'],body[data-aos-duration='1650'] [data-aos]{transition-duration:1.65s}[data-aos][data-aos][data-aos-duration='1700'],body[data-aos-duration='1700'] [data-aos]{transition-duration:1.7s}[data-aos][data-aos][data-aos-duration='1750'],body[data-aos-duration='1750'] [data-aos]{transition-duration:1.75s}[data-aos][data-aos][data-aos-duration='1800'],body[data-aos-duration='1800'] [data-aos]{transition-duration:1.8s}[data-aos][data-aos][data-aos-duration='1850'],body[data-aos-duration='1850'] [data-aos]{transition-duration:1.85s}[data-aos][data-aos][data-aos-duration='1900'],body[data-aos-duration='1900'] [data-aos]{transition-duration:1.9s}[data-aos][data-aos][data-aos-duration='1950'],body[data-aos-duration='1950'] [data-aos]{transition-duration:1.95s}[data-aos][data-aos][data-aos-duration='2000'],body[data-aos-duration='2000'] [data-aos]{transition-duration:2s}[data-aos][data-aos][data-aos-duration='2050'],body[data-aos-duration='2050'] [data-aos]{transition-duration:2.05s}[data-aos][data-aos][data-aos-duration='2100'],body[data-aos-duration='2100'] [data-aos]{transition-duration:2.1s}[data-aos][data-aos][data-aos-duration='2150'],body[data-aos-duration='2150'] [data-aos]{transition-duration:2.15s}[data-aos][data-aos][data-aos-duration='2200'],body[data-aos-duration='2200'] [data-aos]{transition-duration:2.2s}[data-aos][data-aos][data-aos-duration='2250'],body[data-aos-duration='2250'] [data-aos]{transition-duration:2.25s}[data-aos][data-aos][data-aos-duration='2300'],body[data-aos-duration='2300'] [data-aos]{transition-duration:2.3s}[data-aos][data-aos][data-aos-duration='2350'],body[data-aos-duration='2350'] [data-aos]{transition-duration:2.35s}[data-aos][data-aos][data-aos-duration='2400'],body[data-aos-duration='2400'] [data-aos]{transition-duration:2.4s}[data-aos][data-aos][data-aos-duration='2450'],body[data-aos-duration='2450'] [data-aos]{transition-duration:2.45s}[data-aos][data-aos][data-aos-duration='2500'],body[data-aos-duration='2500'] [data-aos]{transition-duration:2.5s}[data-aos][data-aos][data-aos-duration='2550'],body[data-aos-duration='2550'] [data-aos]{transition-duration:2.55s}[data-aos][data-aos][data-aos-duration='2600'],body[data-aos-duration='2600'] [data-aos]{transition-duration:2.6s}[data-aos][data-aos][data-aos-duration='2650'],body[data-aos-duration='2650'] [data-aos]{transition-duration:2.65s}[data-aos][data-aos][data-aos-duration='2700'],body[data-aos-duration='2700'] [data-aos]{transition-duration:2.7s}[data-aos][data-aos][data-aos-duration='2750'],body[data-aos-duration='2750'] [data-aos]{transition-duration:2.75s}[data-aos][data-aos][data-aos-duration='2800'],body[data-aos-duration='2800'] [data-aos]{transition-duration:2.8s}[data-aos][data-aos][data-aos-duration='2850'],body[data-aos-duration='2850'] [data-aos]{transition-duration:2.85s}[data-aos][data-aos][data-aos-duration='2900'],body[data-aos-duration='2900'] [data-aos]{transition-duration:2.9s}[data-aos][data-aos][data-aos-duration='2950'],body[data-aos-duration='2950'] [data-aos]{transition-duration:2.95s}[data-aos][data-aos][data-aos-duration='3000'],body[data-aos-duration='3000'] [data-aos]{transition-duration:3s}[data-aos][data-aos][data-aos-delay='50'],body[data-aos-delay='50'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='50'].aos-animate,body[data-aos-delay='50'] [data-aos].aos-animate{transition-delay:50ms}[data-aos][data-aos][data-aos-delay='100'],body[data-aos-delay='100'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='100'].aos-animate,body[data-aos-delay='100'] [data-aos].aos-animate{transition-delay:.1s}[data-aos][data-aos][data-aos-delay='150'],body[data-aos-delay='150'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='150'].aos-animate,body[data-aos-delay='150'] [data-aos].aos-animate{transition-delay:.15s}[data-aos][data-aos][data-aos-delay='200'],body[data-aos-delay='200'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='200'].aos-animate,body[data-aos-delay='200'] [data-aos].aos-animate{transition-delay:.2s}[data-aos][data-aos][data-aos-delay='250'],body[data-aos-delay='250'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='250'].aos-animate,body[data-aos-delay='250'] [data-aos].aos-animate{transition-delay:.25s}[data-aos][data-aos][data-aos-delay='300'],body[data-aos-delay='300'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='300'].aos-animate,body[data-aos-delay='300'] [data-aos].aos-animate{transition-delay:.3s}[data-aos][data-aos][data-aos-delay='350'],body[data-aos-delay='350'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='350'].aos-animate,body[data-aos-delay='350'] [data-aos].aos-animate{transition-delay:.35s}[data-aos][data-aos][data-aos-delay='400'],body[data-aos-delay='400'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='400'].aos-animate,body[data-aos-delay='400'] [data-aos].aos-animate{transition-delay:.4s}[data-aos][data-aos][data-aos-delay='450'],body[data-aos-delay='450'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='450'].aos-animate,body[data-aos-delay='450'] [data-aos].aos-animate{transition-delay:.45s}[data-aos][data-aos][data-aos-delay='500'],body[data-aos-delay='500'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='500'].aos-animate,body[data-aos-delay='500'] [data-aos].aos-animate{transition-delay:.5s}[data-aos][data-aos][data-aos-delay='550'],body[data-aos-delay='550'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='550'].aos-animate,body[data-aos-delay='550'] [data-aos].aos-animate{transition-delay:.55s}[data-aos][data-aos][data-aos-delay='600'],body[data-aos-delay='600'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='600'].aos-animate,body[data-aos-delay='600'] [data-aos].aos-animate{transition-delay:.6s}[data-aos][data-aos][data-aos-delay='650'],body[data-aos-delay='650'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='650'].aos-animate,body[data-aos-delay='650'] [data-aos].aos-animate{transition-delay:.65s}[data-aos][data-aos][data-aos-delay='700'],body[data-aos-delay='700'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='700'].aos-animate,body[data-aos-delay='700'] [data-aos].aos-animate{transition-delay:.7s}[data-aos][data-aos][data-aos-delay='750'],body[data-aos-delay='750'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='750'].aos-animate,body[data-aos-delay='750'] [data-aos].aos-animate{transition-delay:.75s}[data-aos][data-aos][data-aos-delay='800'],body[data-aos-delay='800'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='800'].aos-animate,body[data-aos-delay='800'] [data-aos].aos-animate{transition-delay:.8s}[data-aos][data-aos][data-aos-delay='850'],body[data-aos-delay='850'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='850'].aos-animate,body[data-aos-delay='850'] [data-aos].aos-animate{transition-delay:.85s}[data-aos][data-aos][data-aos-delay='900'],body[data-aos-delay='900'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='900'].aos-animate,body[data-aos-delay='900'] [data-aos].aos-animate{transition-delay:.9s}[data-aos][data-aos][data-aos-delay='950'],body[data-aos-delay='950'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='950'].aos-animate,body[data-aos-delay='950'] [data-aos].aos-animate{transition-delay:.95s}[data-aos][data-aos][data-aos-delay='1000'],body[data-aos-delay='1000'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='1000'].aos-animate,body[data-aos-delay='1000'] [data-aos].aos-animate{transition-delay:1s}[data-aos][data-aos][data-aos-delay='1050'],body[data-aos-delay='1050'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='1050'].aos-animate,body[data-aos-delay='1050'] [data-aos].aos-animate{transition-delay:1.05s}[data-aos][data-aos][data-aos-delay='1100'],body[data-aos-delay='1100'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='1100'].aos-animate,body[data-aos-delay='1100'] [data-aos].aos-animate{transition-delay:1.1s}[data-aos][data-aos][data-aos-delay='1150'],body[data-aos-delay='1150'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='1150'].aos-animate,body[data-aos-delay='1150'] [data-aos].aos-animate{transition-delay:1.15s}[data-aos][data-aos][data-aos-delay='1200'],body[data-aos-delay='1200'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='1200'].aos-animate,body[data-aos-delay='1200'] [data-aos].aos-animate{transition-delay:1.2s}[data-aos][data-aos][data-aos-delay='1250'],body[data-aos-delay='1250'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='1250'].aos-animate,body[data-aos-delay='1250'] [data-aos].aos-animate{transition-delay:1.25s}[data-aos][data-aos][data-aos-delay='1300'],body[data-aos-delay='1300'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='1300'].aos-animate,body[data-aos-delay='1300'] [data-aos].aos-animate{transition-delay:1.3s}[data-aos][data-aos][data-aos-delay='1350'],body[data-aos-delay='1350'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='1350'].aos-animate,body[data-aos-delay='1350'] [data-aos].aos-animate{transition-delay:1.35s}[data-aos][data-aos][data-aos-delay='1400'],body[data-aos-delay='1400'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='1400'].aos-animate,body[data-aos-delay='1400'] [data-aos].aos-animate{transition-delay:1.4s}[data-aos][data-aos][data-aos-delay='1450'],body[data-aos-delay='1450'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='1450'].aos-animate,body[data-aos-delay='1450'] [data-aos].aos-animate{transition-delay:1.45s}[data-aos][data-aos][data-aos-delay='1500'],body[data-aos-delay='1500'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='1500'].aos-animate,body[data-aos-delay='1500'] [data-aos].aos-animate{transition-delay:1.5s}[data-aos][data-aos][data-aos-delay='1550'],body[data-aos-delay='1550'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='1550'].aos-animate,body[data-aos-delay='1550'] [data-aos].aos-animate{transition-delay:1.55s}[data-aos][data-aos][data-aos-delay='1600'],body[data-aos-delay='1600'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='1600'].aos-animate,body[data-aos-delay='1600'] [data-aos].aos-animate{transition-delay:1.6s}[data-aos][data-aos][data-aos-delay='1650'],body[data-aos-delay='1650'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='1650'].aos-animate,body[data-aos-delay='1650'] [data-aos].aos-animate{transition-delay:1.65s}[data-aos][data-aos][data-aos-delay='1700'],body[data-aos-delay='1700'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='1700'].aos-animate,body[data-aos-delay='1700'] [data-aos].aos-animate{transition-delay:1.7s}[data-aos][data-aos][data-aos-delay='1750'],body[data-aos-delay='1750'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='1750'].aos-animate,body[data-aos-delay='1750'] [data-aos].aos-animate{transition-delay:1.75s}[data-aos][data-aos][data-aos-delay='1800'],body[data-aos-delay='1800'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='1800'].aos-animate,body[data-aos-delay='1800'] [data-aos].aos-animate{transition-delay:1.8s}[data-aos][data-aos][data-aos-delay='1850'],body[data-aos-delay='1850'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='1850'].aos-animate,body[data-aos-delay='1850'] [data-aos].aos-animate{transition-delay:1.85s}[data-aos][data-aos][data-aos-delay='1900'],body[data-aos-delay='1900'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='1900'].aos-animate,body[data-aos-delay='1900'] [data-aos].aos-animate{transition-delay:1.9s}[data-aos][data-aos][data-aos-delay='1950'],body[data-aos-delay='1950'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='1950'].aos-animate,body[data-aos-delay='1950'] [data-aos].aos-animate{transition-delay:1.95s}[data-aos][data-aos][data-aos-delay='2000'],body[data-aos-delay='2000'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='2000'].aos-animate,body[data-aos-delay='2000'] [data-aos].aos-animate{transition-delay:2s}[data-aos][data-aos][data-aos-delay='2050'],body[data-aos-delay='2050'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='2050'].aos-animate,body[data-aos-delay='2050'] [data-aos].aos-animate{transition-delay:2.05s}[data-aos][data-aos][data-aos-delay='2100'],body[data-aos-delay='2100'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='2100'].aos-animate,body[data-aos-delay='2100'] [data-aos].aos-animate{transition-delay:2.1s}[data-aos][data-aos][data-aos-delay='2150'],body[data-aos-delay='2150'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='2150'].aos-animate,body[data-aos-delay='2150'] [data-aos].aos-animate{transition-delay:2.15s}[data-aos][data-aos][data-aos-delay='2200'],body[data-aos-delay='2200'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='2200'].aos-animate,body[data-aos-delay='2200'] [data-aos].aos-animate{transition-delay:2.2s}[data-aos][data-aos][data-aos-delay='2250'],body[data-aos-delay='2250'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='2250'].aos-animate,body[data-aos-delay='2250'] [data-aos].aos-animate{transition-delay:2.25s}[data-aos][data-aos][data-aos-delay='2300'],body[data-aos-delay='2300'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='2300'].aos-animate,body[data-aos-delay='2300'] [data-aos].aos-animate{transition-delay:2.3s}[data-aos][data-aos][data-aos-delay='2350'],body[data-aos-delay='2350'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='2350'].aos-animate,body[data-aos-delay='2350'] [data-aos].aos-animate{transition-delay:2.35s}[data-aos][data-aos][data-aos-delay='2400'],body[data-aos-delay='2400'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='2400'].aos-animate,body[data-aos-delay='2400'] [data-aos].aos-animate{transition-delay:2.4s}[data-aos][data-aos][data-aos-delay='2450'],body[data-aos-delay='2450'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='2450'].aos-animate,body[data-aos-delay='2450'] [data-aos].aos-animate{transition-delay:2.45s}[data-aos][data-aos][data-aos-delay='2500'],body[data-aos-delay='2500'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='2500'].aos-animate,body[data-aos-delay='2500'] [data-aos].aos-animate{transition-delay:2.5s}[data-aos][data-aos][data-aos-delay='2550'],body[data-aos-delay='2550'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='2550'].aos-animate,body[data-aos-delay='2550'] [data-aos].aos-animate{transition-delay:2.55s}[data-aos][data-aos][data-aos-delay='2600'],body[data-aos-delay='2600'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='2600'].aos-animate,body[data-aos-delay='2600'] [data-aos].aos-animate{transition-delay:2.6s}[data-aos][data-aos][data-aos-delay='2650'],body[data-aos-delay='2650'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='2650'].aos-animate,body[data-aos-delay='2650'] [data-aos].aos-animate{transition-delay:2.65s}[data-aos][data-aos][data-aos-delay='2700'],body[data-aos-delay='2700'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='2700'].aos-animate,body[data-aos-delay='2700'] [data-aos].aos-animate{transition-delay:2.7s}[data-aos][data-aos][data-aos-delay='2750'],body[data-aos-delay='2750'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='2750'].aos-animate,body[data-aos-delay='2750'] [data-aos].aos-animate{transition-delay:2.75s}[data-aos][data-aos][data-aos-delay='2800'],body[data-aos-delay='2800'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='2800'].aos-animate,body[data-aos-delay='2800'] [data-aos].aos-animate{transition-delay:2.8s}[data-aos][data-aos][data-aos-delay='2850'],body[data-aos-delay='2850'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='2850'].aos-animate,body[data-aos-delay='2850'] [data-aos].aos-animate{transition-delay:2.85s}[data-aos][data-aos][data-aos-delay='2900'],body[data-aos-delay='2900'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='2900'].aos-animate,body[data-aos-delay='2900'] [data-aos].aos-animate{transition-delay:2.9s}[data-aos][data-aos][data-aos-delay='2950'],body[data-aos-delay='2950'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='2950'].aos-animate,body[data-aos-delay='2950'] [data-aos].aos-animate{transition-delay:2.95s}[data-aos][data-aos][data-aos-delay='3000'],body[data-aos-delay='3000'] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay='3000'].aos-animate,body[data-aos-delay='3000'] [data-aos].aos-animate{transition-delay:3s}[data-aos^=fade][data-aos^=fade]{opacity:0;transition-property:opacity,transform}[data-aos^=fade][data-aos^=fade].aos-animate{opacity:1;transform:translate(0)}[data-aos=fade-up]{transform:translateY(100px)}[data-aos=fade-down]{transform:translateY(-100px)}[data-aos=fade-right]{transform:translate(-100px)}[data-aos=fade-left]{transform:translate(100px)}[data-aos=fade-up-right]{transform:translate(-100px,100px)}[data-aos=fade-up-left]{transform:translate(100px,100px)}[data-aos=fade-down-right]{transform:translate(-100px,-100px)}[data-aos=fade-down-left]{transform:translate(100px,-100px)}[data-aos^=zoom][data-aos^=zoom]{opacity:0;transition-property:opacity,transform}[data-aos^=zoom][data-aos^=zoom].aos-animate{opacity:1;transform:translate(0) scale(1)}[data-aos=zoom-in]{transform:scale(.6)}[data-aos=zoom-in-up]{transform:translateY(100px) scale(.6)}[data-aos=zoom-in-down]{transform:translateY(-100px) scale(.6)}[data-aos=zoom-in-right]{transform:translate(-100px) scale(.6)}[data-aos=zoom-in-left]{transform:translate(100px) scale(.6)}[data-aos=zoom-out]{transform:scale(1.2)}[data-aos=zoom-out-up]{transform:translateY(100px) scale(1.2)}[data-aos=zoom-out-down]{transform:translateY(-100px) scale(1.2)}[data-aos=zoom-out-right]{transform:translate(-100px) scale(1.2)}[data-aos=zoom-out-left]{transform:translate(100px) scale(1.2)}[data-aos^=slide][data-aos^=slide]{transition-property:transform}[data-aos^=slide][data-aos^=slide].aos-animate{transform:translate(0)}[data-aos=slide-up]{transform:translateY(100%)}[data-aos=slide-down]{transform:translateY(-100%)}[data-aos=slide-right]{transform:translateX(-100%)}[data-aos=slide-left]{transform:translateX(100%)}[data-aos^=flip][data-aos^=flip]{backface-visibility:hidden;transition-property:transform}[data-aos=flip-left]{transform:perspective(2500px) rotateY(-100deg)}[data-aos=flip-left].aos-animate{transform:perspective(2500px) rotateY(0)}[data-aos=flip-right]{transform:perspective(2500px) rotateY(100deg)}[data-aos=flip-right].aos-animate{transform:perspective(2500px) rotateY(0)}[data-aos=flip-up]{transform:perspective(2500px) rotateX(-100deg)}[data-aos=flip-up].aos-animate{transform:perspective(2500px) rotateX(0)}[data-aos=flip-down]{transform:perspective(2500px) rotateX(100deg)}[data-aos=flip-down].aos-animate{transform:perspective(2500px) rotateX(0)} /*# sourceMappingURL=aos.css.map*/ #main #wrap { padding-bottom: 0; } .header__logo-item { opacity: 0; visibility: hidden; } html.loaded .main-banner__nav svg, html.loaded .swiper-pagination-progressbar-fill { -webkit-transition: all 1400ms; transition: all 1400ms; } html.loaded .header-link { -webkit-transition: color 1400ms; transition: color 1400ms; } html.loaded .header__wrap::before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .2)), to(rgba(0, 0, 0, 0))); background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)); opacity: 0; visibility: hidden; -webkit-transition: all 1400ms; transition: all 1400ms; } html.loaded .header__logo-item { -webkit-transition: opacity 1.4s, visibility 1.4s var(--common-easing); transition: opacity 1.4s, visibility 1.4s var(--common-easing); } html:not(.header-transform) body[class*="white"] .header__wrap::before { opacity: 1; visibility: visible; } html:not(.header-transform) body[class*="white"] .header__logo-item:first-child, html:not(.header-transform) body[class*="black"] .header__logo-item:last-child { opacity: 0; visibility: hidden; } html:not(.header-transform) body[class*="black"] .header__logo-item:first-child, html:not(.header-transform) body[class*="white"] .header__logo-item:last-child, .header-transform .header__logo-item:first-child { opacity: 1; visibility: visible; } html:not(.header-transform) body[class*="white"] .header-link { color: #fff; } html:not(.header-transform) body[class*="white"] .main-banner__nav svg { fill: #fff; } html:not(.header-transform) body[class*="white"] .swiper-pagination-progressbar-fill { background: #fff !important; } html.header-transform .header * { transition-duration: 0.6s; } #main .header { height: 0; padding-bottom: 0; } #contents::before { content: ''; position: absolute; top: 100vh; left: 0; width: 100%; height: calc(100% - 100vh); background: var(--bg-color); z-index: 1; } .section { padding-bottom: 200px; background: var(--bg-color); z-index: 1; position: relative; } .section__info { width: 35%; box-sizing: border-box; padding-left: 50px; } .section__info--sticky { position: sticky; top: 130px; padding-bottom: 33px; } .section__cont { width: 65%; overflow: hidden; } .section__cont--padding { padding-right: 50px; box-sizing: border-box; } .section__title { font-size: 28px; line-height: 1.4; margin-bottom: 20px; } .section__desc { font-size: 15.5px; line-height: 1.7; font-weight: 300; word-break: keep-all; } .section__btn { display: block; width: 300px; height: 60px; box-sizing: border-box; border: 1px solid var(--sub-color-third); line-height: 58px; font-size: 14px; padding-left: 24px; margin-top: 30px; position: relative; -webkit-transition: all 0.6s var(--common-easing); transition: all 0.6s var(--common-easing); } .section__btn:hover { border-color: var(--main-color); background: var(--main-color); color: #fff; } .section__btn::after { content: ''; color: currentColor; position: absolute; top: 50%; right: 23px; border: solid currentColor; border-width: 0 1px 1px 0; display: inline-block; padding: 3.5px; margin-top: -3.5px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } .section__btn-txt { display: block; -webkit-transition: transform 0.6s var(--common-easing); transition: transform 0.6s var(--common-easing); } .section__btn:hover .section__btn-txt { -webkit-transform: translateX(5px); transform: translateX(5px); } html.loaded .slide-nav { -webkit-transition: -webkit-transform .5s cubic-bezier(.215, .61, .355, 1); transition: -webkit-transform .5s cubic-bezier(.215, .61, .355, 1); -o-transition: transform .5s cubic-bezier(.215, .61, .355, 1); transition: transform .5s cubic-bezier(.215, .61, .355, 1); transition: transform .5s cubic-bezier(.215, .61, .355, 1), -webkit-transform .5s cubic-bezier(.215, .61, .355, 1); } #contents .slide-nav { position: absolute; width: 60px; height: 60px; top: 50%; margin-top: -30px; left: 0; background: var(--main-color); z-index: 1; cursor: pointer; display: none; } #contents .swiper-container-initialized ~ .slide-nav, #contents .swiper-container-initialized .slide-nav { display: flex; } #contents .slide-nav--prev { -webkit-transform: translateX(-100%); transform: translateX(-100%); } #contents .slide-nav--next { left: auto; right: 0; -webkit-transform: translateX(100%); transform: translateX(100%); } #contents .section__cont:hover .slide-nav:not(.swiper-button-disabled) { -webkit-transform: translateX(0); transform: translateX(0); } #contents .slide-nav svg { width: 15px; fill: #fff; } .slide-scrollbar { height: 2px; background: rgba(0, 0, 0, .2); width: calc(100% - 50px); margin: 30px 50px 0 0; } .swiper-container:not(.swiper-container-initialized) .slide-scrollbar { display: none; } .slide-pagination { display: none; margin: 30px 0 0 50px; width: calc(100% - 50px); } .slide-scrollbar--left { margin: 0; width: 100%; } #contents .swiper-container-initialized ~ .slide-pagination { display: block; } .swiper-scrollbar-drag, .slide-scrollbar__current { height: 100%; width: 100%; position: relative; background: var(--main-color); left: 0; top: 0; border-radius: 0px; -webkit-transition-timing-function: cubic-bezier(.215, .61, .355, 1); -o-transition-timing-function: cubic-bezier(.215, .61, .355, 1); transition-timing-function: cubic-bezier(.215, .61, .355, 1); } .slide-scrollbar__current { position: absolute; height: 2px; -webkit-transition: left 0.8s var(--common-easing); transition: left 0.8s var(--common-easing); } /* Main banner */ .main-banner { width: 100%; height: 100vh; position: sticky; top: 0; z-index: 0; } .main-banner__container { width: 100%; height: 100%; } .main-banner__slide { overflow: hidden; position: relative; background-position: center; background-repeat: no-repeat; background-size: cover; } .main-banner__cont { position: absolute; width: 100%; height: 100%; left: 0; top: 0; } .main-banner__link { width: 100%; height: 100%; background-size: cover; background-position: center; } .main-banner img { display: none; } .main-banner iframe { position: absolute; width: 300% !important; left: -100%; height: 118% !important; /* top: 50%; left: 50%; width: 125% !important; height: 125% !important; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); */ } /* .main-banner iframe + .main-banner__link::before { content: ''; background: rgba(0, 0, 0, .3); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } */ .main-banner__caption { display: table-cell; vertical-align: middle; font-size: 18px; color: #fff; } .main-banner__caption .word { position: relative; top: 10px; opacity: 0; } .main-banner__pager { width: 350px !important; height: 2px !important; position: absolute; left: 50% !important; top: auto !important; bottom: 45px !important; z-index: 1; background-color: rgba(255, 255, 255, 0.3) !important; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .main-banner__pager .swiper-pagination-progressbar-fill { background: var(--main-color); } .main-banner__nav { position: absolute; width: 30px; height: 30px; top: 50%; margin-top: -15px; left: 43px; z-index: 1; cursor: pointer; } .main-banner__nav--next { left: auto; right: 43px; } .main-banner__nav svg { width: 30px; fill: var(--main-color); } body[class*="black"] .header__link, body[class*="black"] .main-banner__caption, body[class*="black"] .pager-nav { color: var(--main-color); } /* main product */ .prd-slide { padding-top: 100px; } #contents .prd-slide__nav { top: 0; margin-top: calc((28.5% / 2) - 30px); } /* Sub banner */ .section__cont--banner { width: 65%; padding-right: 7.5%; box-sizing: border-box; } .section__info--banner { width: 33.33333%; padding-right: 80px; padding-left: 0; } .sub-banner__item img { width: 100%; height: auto; } .sub-banner__subject { min-height: 35px; text-align: right; font-size: 14px; margin-top: 15px; opacity: 0; visibility: hidden; -webkit-transform: translateY(2px); transform: translateY(2px); -webkit-transition: transform 0.6s var(--common-easing), opacity 0.6s var(--common-easing), visibility 0.6s var(--common-easing); transition: transform 0.6s var(--common-easing), opacity 0.6s var(--common-easing), visibility 0.6s var(--common-easing); } .sub-banner__subject.on { opacity: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } .slide-scrollbar--left .swiper-pagination-bullet { margin: 0 !important; opacity: 0; } /* Video banner */ .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container::after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100.1%; height: 100.1%; } @charset "utf-8"; /* **************************** //필수 CSS 수정 및 삭제 불가 **************************** */ /* tag reset */ html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,img { margin:0; padding:0; } html { width:100%; height:100%; } body,code { font: 13px var(--main-font); color:var(--main-color); background:var(--bg-color); } body#popup { min-width:0; } li { list-style:none; } img,fieldset { border:none; vertical-align:top; } table { width:100%; border:0; border-spacing:0; border-collapse:collapse; } caption { display:none; } th,td { border:0; vertical-align:top; } button { overflow:visible; padding:0; margin:0; border:0; cursor:pointer; } hr.layout { display:none; } a { text-decoration:none; color:inherit; } a:hover { text-decoration:none; } a:active { text-decoration:none; } .objHidden { visibility:hidden; position:absolute; left:-1000px; top:-1000px; height:0; width:0; } #content_CONTAINER table, #bi_inquire_content_CONTAINER table { border:0; margin:0 0 -1px; } #content_CONTAINER table:before, #bi_inquire_content_CONTAINER table:before { display:none; } #content_CONTAINER td, #bi_inquire_content_CONTAINER td { width:auto !important; padding:0; } table.nneditor-table { width:auto !important; } /* 결제진행바 */ #progressPaybarBackground { position:absolute; z-index:99; left:0; top:0; width:100%; height:100%; } #progressPaybarView { position:absolute; z-index:100; top:160px; left:20px; width:471px; font-size:12px; } #progressPaybarView .box { height:180px; background:url(//img.cafe24.com/images/ec_hosting/popup/layer_guide/bg_layer_box1.gif) 0 0 no-repeat; } #progressPaybarView .box .graph { padding:15px 0 0 0; text-align:center;} #progressPaybarView .box .graph span { display:block; text-align:center; margin:20px 0; } #progressPaybarView .box .txt { text-align:center; padding:15px 0 0; color:#555555; } div.layerProgress { filter:alpha(opacity=40); opacity:0.4; -moz-opacity:0.4; background-color:#999; } /* contents */ #skipNavigation {position:absolute; top:0; left:0; z-index:100; width:100%; height:0;} #skipNavigation p, #skipNavigation ul, #skipNavigation ul li {height:0;} #skipNavigation p a {position:absolute; left:0; top:0; display:block; overflow:hidden; width:1px; height:1px; margin-left:-1px; margin-bottom:-1px; text-align:center; color:#000; white-space:nowrap;} #skipNavigation p a:focus, #skipNavigation p a:hover, #skipNavigation p a:active {width:100%; height:auto; padding:10px 0; background:#c4122f; color:#fff; z-index:100;} .displaynone { display:none; } .dimmed { position:fixed; top:0; left:0; z-index:99; width:100%; height:100%; background:#fff; opacity:0.8; filter:alpha(opacity=80); } #zipcodeLayer { z-index:10000 !important; } .gMobile.typeAll .search { opacity:1; visibility:visible; } /* **************************** 필수 CSS 수정 및 삭제 불가 **************************** */ @charset "utf-8"; /* Layout */ html { min-width: 1280px; } #sidebar { float: left; width: 180px; } #sidebar .banner { padding: 0 0 20px; border-bottom: 1px solid #e8e8e8; } #sidebar .banner p a { display: block; position: relative; height: 20px; margin: 0 0 0 10px; padding: 10px 0 10px 25px; font-size: 13px; font-weight: bold; line-height: 20px; } #sidebar .banner [class*="Banner"]:before { position: absolute; top: 11px; left: 0; content: ""; display: block; width: 20px; height: 20px; background: url("//img.echosting.cafe24.com/skin/base/layout/sfix_sidebar_banner.png") no-repeat; } #sidebar .banner p a.giftBanner:before { background-position: 0 0; } #sidebar .banner p a.opdiaryBanner:before { background-position: -50px 0; } #sidebar .banner p a.sosBanner:before { background-position: -100px 0; } #sidebar .banner p a.attendBanner:before { background-position: 0 -50px; } #sidebar .banner p a.couponzoneBanner:before { background-position: -50px -50px; } #sidebar .banner p a.calendarBanner:before { background-position: -100px -50px; } #sidebar .banner [class*="Banner"]:hover { text-decoration: none; } #contents .visual img { max-width: 100%; } #banner { position: absolute; top: 0; left: 0; width: 90px; } #quick { position: absolute; top: 0; right: 0; width: 90px; } #quick .banner a { display: block; margin: 15px 0 0; } /* Main */ #boardArea { overflow: hidden; margin: 50px 0 0; border-top: 1px solid #d8d8d8; } #bannerArea { margin: 22px 0 0; } #bannerArea h2 { margin: 0 0 16px; font-weight: normal; font-size: 20px; color: #2e2e2e; text-align: center; } /* 탐색경로바 */ .path { display: none; } /* .path { overflow:hidden; height:30px; line-height:30px; *zoom:1; } .path span { overflow:hidden; position:absolute; width:0; height:0; white-space:nowrap; text-indent:100%; } .path ol { float:right; } .path li { float:left; padding:0 0 0 12px; margin:0 0 0 8px; color:#757575; background:url("//img.echosting.cafe24.com/skin/base/layout/ico_path.gif") no-repeat 0 10px; } .path li:first-child { background:none; } .path li a { color:#757575; } .path li strong, .path li strong a { color:#2e2e2e; } */ /* 타이틀 */ .titleArea { min-height: 30px; margin: 0; padding-bottom: 100px; } .titleArea h2, .titleArea h2 font { display: block; text-align: center; color: var(--main-color) !important; font-size: 22px !important; *display: inline; font-weight: normal; } .titleArea p { display: inline-block; position: relative; margin: 0 0 0 6px; padding: 0 0 0 10px; color: #939393; *display: inline; display: none; } .titleArea p:before { display: inline-block; position: absolute; top: 0; left: 0; content: ""; width: 1px; height: 13px; border-left: 1px solid #d9d9d9; } .titleArea ul { padding: 5px 0; color: #939393; line-height: 18px; } .titleArea ul li { position: relative; padding: 0 0 0 9px; } .titleArea ul li:before { display: block; position: absolute; top: 50%; left: 0; content: ""; width: 2px; height: 2px; margin: -2px 0 0 0; background: #939393; } /* 게시판 메인 */ .boardMain { overflow: hidden; *zoom: 1; } .boardMain td img { vertical-align: middle; margin: 1px; } .boardMain .board { position: relative; margin: 0 0 65px; } .boardMain .leftArea { float: left; width: 50%; } .boardMain .leftArea .board { margin: 0 23px 65px 0; } .boardMain .rightArea { float: right; width: 50%; } .boardMain .rightArea .board { margin: 0 0 65px 23px; } .boardMain .board h3 { margin: 0 0 13px; height: 28px; font-size: 16px; color: #2e2e2e; border-bottom: 2px solid #626672; } .boardMain .board .btnLink { position: absolute; top: 3px; right: 0; } .boardMain .board .ec-base-table.typeList td { color: #a4a4a4; } .boardMain .board .ec-base-table.typeList td.title a, .boardMain .board .ec-base-table.typeList td.title a:hover { color: #4f4f4f; } .boardMain .board .galleryList { overflow: hidden; } .boardMain .board .galleryList ul { overflow: hidden; margin: 0 -10px; } .boardMain .board .galleryList li { float: left; position: relative; width: 20%; padding: 0 0 12px 0; word-break: break-all; } .boardMain .board .galleryList li span { display: block; margin: 0 10px; font-size: 11px; color: #a4a4a4; } .boardMain .board .galleryList li .imgLink, .boardMain .board .galleryList li .imgLink:hover { display: block; margin: 0 10px 5px; font-size: 12px; } .boardMain .board .galleryList li .imgLink img { width: 100%; max-height: 110px; border: 1px solid #ededed; } /* 퀵뷰 모달 */ #modalBackpanel { display: none; position: absolute; top: 0; left: 0; z-index: 10000; width: 100%; height: 100%; background: #000; } #modalContainer { display: none; position: absolute; top: 100px; left: 100px; z-index: 10001; width: 975px; height: 720px; border: 1px solid #333; background: #fff; } #modalContainer #modalContent { width: 100%; height: 100%; } /* Font */ .txtInfo { color: var(--sub-color-first); } .txtWarn { color: #f76560; } .txtEm { color: var(--main-color); } .txtDel, .strike, .discount { text-decoration: line-through; font-weight: normal; } .strike strong, .discount strong { font-weight: normal; } .txtNormal { font-weight: normal; font-style: normal; } .txtNum { display: inline-block; color: var(--sub-color-first); word-break: normal; } .txt11 { font-size: 11px; } .txt12 { font-size: 12px; } .txt14 { font-size: 14px; } .txt16 { font-size: 16px; } .txt18 { font-size: 18px; } .txtIcon { font-size: 12px; font-style: normal; } .txtBreak { word-break: break-all; word-wrap: break-word; } /* JP, TW, CN */ html:lang(ja) .txt11, html:lang(zh) .txt11, html:lang(zh-tw) .txt11 { font-size: 12px; } /* grid */ .gBlank5 { display: block; margin-top: 5px; } .gBlank10 { display: block; margin-top: 10px; } .gBlank20 { display: block; margin-top: 20px; } .gBlank30 { display: block; margin-top: 30px; } .gIndent10 { margin-left: 10px; } .gIndent20 { margin-left: 20px; } .gSpace10 { margin-right: 10px; } .gSpace20 { margin-right: 20px; } .gMerge { position: relative; z-index: 1; margin-top: -1px; } /* ec-base-qty */ .ec-base-qty { position: relative; display: inline-block; width: 50px; margin: 0 1px 0 0; text-align: left; overflow: hidden; } .ec-base-qty input[type="text"] { width: 27px; height: 28px; padding: 0; text-align: center; line-height: 25px; border: 1px solid var(--sub-color-third); border-radius: 0; background: transparent; } .ec-base-qty .up { position: absolute; left: 27px; top: 0; width: 0; height: 0; padding: 13px 22px 0 0; } .ec-base-qty a[onclick*="Basket.addQuan"]::after { content: '+'; position: absolute; top: 0; right: 0; display: block; font-size: 13px; width: 22px; height: 15px; line-height: 15px; text-align: center; border: 1px solid var(--sub-color-third); box-sizing: border-box; } .ec-base-qty .down { position: absolute; left: 27px; bottom: 0; width: 0; height: 0; padding: 13px 22px 0 0; } .ec-base-qty a[onclick*="Basket.outQuan"]::after { content: '-'; position: absolute; bottom: 0; right: 0; display: block; font-size: 13px; width: 22px; height: 16px; line-height: 16px; text-align: center; border: 1px solid var(--sub-color-third); border-top: none; box-sizing: border-box; } .ec-base-qty + .btnNormal { width: 50px; } /* ec-base-chk */ .ec-base-chk { display: inline-block; position: relative; margin: 0 8px 0 0; width: 15px; height: 15px; vertical-align: top; cursor: pointer; position: relative; top: 2px; } .ec-base-chk input { z-index: 1; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .ec-base-chk .checkbox { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid var(--sub-color-third); -webkit-transition: background-color 0.3s ease, border-color 0.3s ease; -ms-transition: background-color 0.3s ease, border-color 0.3s ease; transition: background-color 0.3s ease, border-color 0.3s ease; } .ec-base-chk .checkbox::before { content: ''; display: block; width: 23%; height: 45%; /* background: #000; */ color: #d9d9d9; position: absolute; top: 50%; left: 50%; border: 2px solid var(--sub-color-third); border-top: 0; border-left: 0; border-bottom-width: 2px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); margin-top: -6px; margin-left: -2px; -webkit-transition: border-color 0.3s ease; -ms-transition: border-color 0.3s ease; transition: border-color 0.3s ease; } .ec-base-chk input:checked + .checkbox { border-color: var(--main-color); background: var(--main-color); } .ec-base-chk input:checked + .checkbox::before { border-color: #fff; } /* Form */ input, select, textarea { font-size: 100%; font-family: inherit; color: var(--main-color); vertical-align: middle; background: transparent; } input[type=radio], input[type=checkbox] { width: 13px; height: 13px; border: 0; } input[type=text], input[type=password] { height: 22px; line-height: 20px; padding: 2px 4px; border: 1px solid var(--sub-color-third); font-size: 12px; } input[type=text]:focus, input[type=password]:focus { outline: none; } input[type=radio] + label, input[type=checkbox] + label { margin: 0 4px 0 2px; } select { height: 28px; background: transparent; border: 1px solid var(--sub-color-third); } textarea { padding: 5px 6px; border: 1px solid var(--sub-color-third); line-height: 1.5; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: var(--sub-color-first); } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: var(--sub-color-first); } input::-moz-placeholder, textarea::-moz-placeholder { color: var(--sub-color-first); opacity: 1; } legend { visibility: hidden; position: absolute; left: -9999px; top: -9999px; width: 0; height: 0; line-height: 0; } table tr.radioType input, span.noBorder input { border: none !important; width: auto !important; height: auto !important; margin: 0 3px 0 0 !important; vertical-align: middle !important; background: none !important; } .gLabel { display: inline-block; } .gLabel label { margin-right: 20px; line-height: 22px; } .fWidthFull input[type=text] { width: 100%; height: 24px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .fWidthFull textarea { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .fWidthFull select { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .fList.typeHor .gLabel { margin-right: 20px; } .fList.typeVer .gLabel { display: block; } .ec-base-tooltip { display: none; z-index: 2; position: absolute; top: 24px; padding: 15px; border: 1px solid var(--sub-color-third); background: #fff; -webkit-box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.15); -moz-box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.15); box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.15); } .ec-base-tooltip h3 { margin: 0 0 8px; padding: 0 10px; font-size: 12px; border-bottom: 0; background: url("//img.echosting.cafe24.com/skin/base/common/ico_layer_title.gif") no-repeat 0 50%; } .ec-base-tooltip h3+p { margin: 0 5px 10px; } .ec-base-tooltip h4 { margin: 15px 10px 8px 5px; font-size: 12px; } .ec-base-tooltip h4:before { display: inline-block; content: ""; margin: 0 5px 0 0; width: 3px; height: 3px; background: var(--main-color); vertical-align: middle; } .ec-base-tooltip .btnClose { position: absolute; right: 14px; top: 14px; } .ec-base-tooltip .edge { z-index: 20; position: absolute; left: 50%; top: -6px; display: block; margin: 0 0 0 -5px; width: 10px; height: 6px; } .ec-base-tooltip .edge:before, .ec-base-tooltip .edge:after { display: inline-block; content: ""; position: absolute; top: 0; width: 0; height: 0; border: solid transparent; } .ec-base-tooltip .edge:before { margin: 1px 0 0; border-bottom-color: var(--sub-color-third); border-width: 0 5px 5px 5px; } .ec-base-tooltip .edge:after { left: 1px; margin: 2px 0 0; border-bottom-color: #fff; border-width: 0 4px 4px 4px; } .ec-base-tooltip table th, .ec-base-tooltip table td { padding: 8px 10px 7px 10px; border: 1px solid var(--sub-color-third); line-height: 1.5em; } .ec-base-tooltip table th { padding-right: 0; /* background: #fbf9fa; */ } .ec-base-tooltip table thead th { text-align: center; } .ec-base-tooltip table tbody th { text-align: left; } .ec-base-tooltip table .left { text-align: left; } .ec-base-tooltip table .center { text-align: center; } .ec-base-tooltip table .right { text-align: right; } .ec-base-tooltip table .info { padding: 0; color: #757575; } .ec-base-tooltip table p.info:before, .ec-base-tooltip table ul.info li:before { display: inline-block; content: ""; margin: 0 3px 0 0; width: 4px; height: 1px; background: var(--main-color); vertical-align: middle; } .ec-base-tooltip .info { padding: 10px 10px 0; margin: 5px 0 0; } .ec-base-tooltip p.bullet, .ec-base-tooltip ul.bullet { margin: 8px 10px; } .ec-base-tooltip p.bullet:before, .ec-base-tooltip ul.bullet li:before { display: inline-block; content: ""; margin: -3px 3px 0 0; width: 0; height: 0; border: solid transparent; border-left-color: #333; border-width: 2px 0 2px 2px; vertical-align: middle; } .ec-base-tooltip ul.bullet li { line-height: 1.5em; } .ec-base-tooltip .txtEm { color: #008bcc; } .ec-base-tooltip .txtWarn { color: #f65b54; } /* typeUpper */ .ec-base-tooltip.typeUpper { top: auto; bottom: 34px; } .ec-base-tooltip.typeUpper .edge { top: auto; bottom: -6px; } .ec-base-tooltip.typeUpper .edge:before { margin: 0 0 -5px; border-top-color: var(--sub-color-third); border-width: 5px 5px 0 5px; } .ec-base-tooltip.typeUpper .edge:after { left: 1px; margin: 0 0 -4px; border-top-color: #fff; border-width: 4px 4px 0 4px; } span.ec-base-help, p.ec-base-help, ul.ec-base-help li { margin: 2px 9px; padding: 1px 0 1px 20px; line-height: 1.4; background: url('//img.echosting.cafe24.com/skin/base/common/ico_info.gif') no-repeat 0 2px; } div.ec-base-help { margin: 20px 0; line-height: 18px; } div.ec-base-help > h2, div.ec-base-help > h3 { padding: 0; border-bottom: 2px solid var(--main-color); color: var(--main-color); font-size: 14px; line-height: 38px; } div.ec-base-help .inner { padding: 10px 10px 25px; border-bottom: 1px solid var(--sub-color-third); } div.ec-base-help h4 { margin: 22px 0 -4px; color: var(--main-color); font-size: 12px; font-weight: normal; } div.ec-base-help h4:first-child { margin-top: 13px; } div.ec-base-help p { margin: 15px 0 0 10px; color: var(--sub-color-first); } div.ec-base-help ul, div.ec-base-help ol { margin: 15px 0 0 11px; } div.ec-base-help li { color: var(--sub-color-first); font-size: 11px; line-height: 1.6; } /* number */ div.ec-base-help ol li { padding: 0 0 0 25px; background: url('//img.echosting.cafe24.com/skin/base/common/ico_number.png') no-repeat; } div.ec-base-help ol .item1 { background-position: -484px 0; } div.ec-base-help ol .item2 { background-position: -434px -100px; } div.ec-base-help ol .item3 { background-position: -384px -200px; } div.ec-base-help ol .item4 { background-position: -334px -300px; } div.ec-base-help ol .item5 { background-position: -284px -400px; } div.ec-base-help ol .item6 { background-position: -234px -500px; } div.ec-base-help ol .item7 { background-position: -184px -600px; } div.ec-base-help ol .item8 { background-position: -134px -700px; } div.ec-base-help ol .item9 { background-position: -84px -800px; } div.ec-base-help ol .item10 { background-position: -34px -900px; } /* typeDash */ div.ec-base-help ul li { padding: 0 0 0 11px; background: url('//img.echosting.cafe24.com/skin/base/common/ico_dash.gif') no-repeat 0 7px; } .ec-base-help.typeDash li { padding: 0 0 0 11px; background: url("//img.echosting.cafe24.com/skin/base/common/ico_dash.gif") no-repeat 0 7px; } .ec-base-tooltip .ec-base-help.typeDash li { margin: 2px 0; } .ec-base-product { margin: 0; } .ec-base-product .title { margin: 0 0 17px; } .ec-base-product .title h2 { font-weight: normal; font-size: 20px; color: #2e2e2e; text-align: center; } .ec-base-product .title h3 { font-weight: normal; font-size: 20px; color: #2e2e2e; text-align: center; } .ec-base-product .icon_img { vertical-align: middle; position: absolute; bottom: 24px; right: 24px; } .ec-base-product a[href^='/product/detail.html'] > img { border: 1px solid #ececec; } .ec-base-product .prdList { width: calc(100% + 15px); font-size: 0; line-height: 0; margin-left: -7.5px; } .ec-base-product .prdList > li { position: relative; display: inline-block; margin: 0 0 50px; color: #757575; vertical-align: top; } .ec-base-product .prdList > li.swiper-slide { margin-bottom: 20px; } .ec-base-product .prdList .chk { position: absolute; top: -10px; left: 0; right: 0; display: block; display: block; margin: 0 0 10px; } .ec-base-product .prdList .thumbnail { position: relative; } .ec-base-product .prdList .thumbnail .prdImg { position: relative; } .ec-base-product .prdList .thumbnail img { max-width: 100%; width: 100%; height: auto; box-sizing: border-box; } .thumbnail__hover { position: absolute; top: 0; left: 0; opacity: 0; visibility: hidden; -webkit-transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out; transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out; } .ec-base-product .prdList > li:hover .thumbnail__hover { opacity: 1; visibility: visible; } .ec-base-product .prdList .thumbnail .wish { position: absolute; right: 3px; bottom: 4px; z-index: 1; cursor: pointer; } .ec-base-product .prdList .thumbnail .prdIcon { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; } .ec-base-product .prdList .thumbnail .icon { margin: 10px 0 0; border-bottom: 1px solid #e8e8e8; vertical-align: middle; } .ec-base-product .prdList .thumbnail .icon:after { content: ""; display: block; clear: both; } .ec-base-product .prdList .thumbnail .promotion { float: left; margin: 0 0 4px; text-align: left; } .ec-base-product .prdList .thumbnail .promotion img { margin: 0 4px 0 0; } .ec-base-product .prdList .thumbnail .button { float: right; margin: 0 0 4px; } .ec-base-product .prdList .thumbnail .button img { margin: 0 2px 0 0; cursor: pointer; } .ec-base-product .prdList .thumbnail .button .option { display: inline; position: relative; } .ec-base-product .prdList .thumbnail .button .likeButton { display: inline-block; margin: 0 5px; } .ec-base-product .prdList .thumbnail .button .likeButton button { font-family: inherit; color: #9a9a9a; letter-spacing: -1px; background: none; } .ec-base-product .prdList .thumbnail .button .likeButton button img { margin: 0; vertical-align: middle; } .ec-base-product .prdList .thumbnail .button .likeButton button strong { height: 16px; vertical-align: middle; } .ec-base-product .prdList .thumbnail .button .likeButton.selected button { color: #353535; } .ec-base-product .prdList .description { padding-top: 10px; } .ec-base-product .prdList .icon_img { display: none; } .ec-base-product .prdList .icon_img+.description::after { content: 'Sold out'; display: block; width: 160px; text-align: center; height: 40px; line-height: 40px; background: var(--main-color); color: #fff; font-size: 15px; position: absolute; top: 50%; left: 50%; margin: -20px 0 0 -80px; } .ec-base-product ul.prdList > li:hover .description, .ec-base-product .prdList .icon_img+.description { opacity: 1; visibility: visible; } .ec-base-product .prdList .description .inner { width: 100%; height: 100%; display: table; } .ec-base-product .prdList .icon_img+.description .inner { display: none; } .ec-base-product .prdList .description .align { display: table-cell; vertical-align: middle; } .ec-base-product .prdList .description .name { display: block; line-height: 1.5; font-family: inherit; margin-bottom: 4px; } .ec-base-product .prdList .description .name a { color: #2e2e2e; } .ec-base-product .prdList .description .mileage { display: block; } .ec-base-product .prdList .description span.grid { display: block; } .ec-base-product .prdList .description .color { margin-bottom: 10px; } .ec-base-product .prdList .description .chips { width: 10px; height: 10px; border-radius: 50%; margin: 0 2px; } /* grid */ .ec-base-product .prdList--slide { /* width: calc(100% + 10px);*/ margin: 0; -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1); -o-transition-timing-function: cubic-bezier(.215,.61,.355,1); transition-timing-function: cubic-bezier(.215,.61,.355,1); } .ec-base-product .prdList--slide > li { width: 28.5%; margin-right: 15px; } .ec-base-product .prdList--slide > li:last-child { margin-right: 0; } .ec-base-product ul.grid2 > li { width: 50%; } .ec-base-product ul.grid3 > li { /* width: calc(33.333% - 35px);*/ width: calc(33.333% - 15px); margin: 0 7.5px 35px; } .ec-base-product ul.grid4 > li { width: calc(25% - 15px); margin: 0 7.5px 35px; } .ec-base-product ul.grid5 > li { width: 20%; } .ec-base-product ul.grid4 > li .color { max-width: 190px; } .ec-base-product ul.grid5 > li .color { max-width: 130px; } /* right display */ .ec-base-product ul.grid2 li:after { content: ""; display: block; clear: both; } .ec-base-product ul.grid2 li .thumbnail { float: left; width: 220px; text-align: left; margin: 0; } .ec-base-product ul.grid2 li .description .chk { position: static; text-align: left; } /* module="product_ListItem" */ .ec-base-product .spec { margin: 0; } .ec-base-product .spec li { display: block; line-height: 1.5; font-family: inherit; } .ec-base-product .spec li.summary_desc, .ec-base-product .spec li.simple_desc { width: 100%; margin-bottom: 5px; } .ec-base-product .spec li.summary_desc span, .ec-base-product .spec li.simple_desc span { font-weight: 300; } .ec-base-product .spec li.product_custom, .ec-base-product .spec li.product_price { margin-right: 8px; } .ec-base-product .spec li .color { overflow: hidden; display: inline-block; margin: 3px 0 0 0; } .ec-base-product .spec li .chips { float: left; width: 10px; height: 10px; margin: 0 2px 2px 0; border: 1px solid #e3e3e3; font-size: 0; line-height: 0; } .ec-base-product .discountPeriod { display: inline-block; z-index: 10; position: relative; width: 55px; height: 19px; vertical-align: middle; } .ec-base-product .layerDiscountPeriod { left: 50%; top: 26px; width: 247px; margin: 0 0 0 -124px; } .ec-base-product .layerDiscountPeriod strong.title { display: block; margin: 0 0 12px; padding: 0 35px 0 0; font-weight: bold; color: #2e2e2e; } .ec-base-product .layerDiscountPeriod .content p { margin: 2px 0 0; font-size: 11px; line-height: 16px; color: #757575; letter-spacing: -1px; } .ec-base-product .layerDiscountPeriod .content p strong { font-weight: normal; font-size: 12px; color: #2e2e2e; } .ec-base-product .layerDiscountPeriod .content p strong span { font-size: 11px; } .ec-base-product .prdList .shippingFee { position: relative; display: inline-block; } .ec-base-product .prdList .shippingFee .button { display: inline-block; float: none; } .ec-base-product .prdList .shippingFee .ec-base-tooltip { z-index: 11; display: block; margin: 0 0 0 -170px; width: 360px; } .ec-base-product .prdList .shippingFee .ec-base-tooltip table th { width: 40px; } .ec-base-product .prdList .shippingFee .ec-base-tooltip table th, .ec-base-product .prdList .shippingFee .ec-base-tooltip table td { padding: 7px 10px 8px 10px; } .ec-base-product .btnTooltip { position: relative; display: inline-block; } .differentialShipping { display: none; overflow: hidden; position: absolute; left: 50%; top: 17px; z-index: 100; width: 350px; margin: 0 0 0 -176px; } .differentialShipping h3.title { margin: 0; height: 35px; padding: 0 35px 0 19px; border: 0; color: #fff; font-size: 14px; line-height: 35px; background: #495164; } .differentialShipping .content { padding: 12px 18px 14px 18px; border: 1px solid #757575; border-top: 0; text-align: center; background: #fff; } .differentialShipping .close { position: absolute; right: 14px; top: 12px; } .differentialShipping .close img { cursor: pointer; } .differentialShipping .content ul { color: #757575; line-height: 25px; } .differentialShipping .content li { overflow: hidden; } .differentialShipping .content li strong { float: left; font-weight: normal; } .differentialShipping .content li span { float: right; color: #2e2e2e; } .differentialShipping .content .info { margin: 7px 0 0; padding: 7px 0 0; border-top: 1px dotted #b0b1b3; color: #80aeef; text-align: right; } /* Thumbnail icon position */ .ec-product-bgLT { background-position: left top; } .ec-product-bgLC { background-position: left center; } .ec-product-bgLB { background-position: left bottom; } .ec-product-bgRT { background-position: right top; } .ec-product-bgRC { background-position: right center; } .ec-product-bgRB { background-position: right bottom; } .ec-product-bgCT { background-position: center top; } .ec-product-bgCC { background-position: center center; } .ec-product-bgCB { background-position: center bottom; } .ec-base-paginate { margin: 30px 0; text-align: center; font-size: 0; line-height: 0; } .ec-base-paginate .first { float: left; } .ec-base-paginate .last { float: right; } .ec-base-paginate .first::after, .ec-base-paginate .first+a::after, .ec-base-paginate .last::after, .ec-base-paginate ol+a::after { display: inline-block; font-size: 13px; color: var(--main-color); font-family: inherit; line-height: 32px; } .ec-base-paginate .first::after { content: '처음으로'; } .ec-base-paginate .first+a::after { content: '이전'; padding: 0 10px; } .ec-base-paginate ol+a::after { content: '다음'; padding: 0 10px; } .ec-base-paginate .last::after { content: '마지막'; } .ec-base-paginate::after { content: ''; display: block; clear: both; } .ec-base-paginate ol { display: inline-block; font-size: 0; line-height: 0; vertical-align: top; *display: inline; *zoom: 1; *margin: 0; } .ec-base-paginate li { display: inline-block; vertical-align: top; *display: inline; *zoom: 1; } .ec-base-paginate li:first-child { margin-left: 0; } .ec-base-paginate img { vertical-align: top; display: none; } .ec-base-paginate li a { display: block; width: 30px; padding: 9px 0; color: var(--main-color); line-height: 14px; font-size: 13px; font-family: inherit; opacity: 0.6; -webkit-transition: opacity 0.3s ease-in-out; -ms-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; } .ec-base-paginate li a:hover, .ec-base-paginate li a.this { opacity: 1; text-decoration: none; } .ec-base-paginate a.nolink { cursor: default; } /* typeSub */ .ec-base-paginate.typeSub ol { margin: 0; vertical-align: top; } .ec-base-paginate.typeSub li { font-size: 12px; border: 0; } .ec-base-paginate.typeSub img { vertical-align: middle; } .ec-base-paginate.typeSub li a { width: auto; margin: 0 5px 0; padding: 0; line-height: 32px; color: var(--main-color); background: none; opacity: 0.6; font-size: 13px; } .ec-base-paginate.typeSub li a.this { text-decoration: none; border: 0; opacity: 1; } .ec-base-paginate.typeSub .first { margin-right: 3px; } .ec-base-paginate.typeSub .last { margin-left: 3px; } .ec-base-tab { position: relative; } .ec-base-tab .menu { margin: 0 0 25px; border: none; border-bottom-color: none; border-left: 0; background: transparent; box-sizing: border-box; } .ec-base-tab .menu:after { content: ""; display: block; clear: both; } .ec-base-tab .menu li { float: left; border-left: none; background: transparent; /* margin-right: 20px; */ } .ec-base-tab .menu li:not(:first-child)::before { content: '/'; display: inline-block; color:var(--sub-color-first); font-size: 14px; margin: 0 15px; } .ec-base-tab .menu li a { color:var(--sub-color-first); background: transparent; display: inline-block; font-size: 14px; /* min-width: auto; margin: 0; padding: 0 0 3px; border-right: none; color: var(--main-color); text-decoration: none; outline: 0; text-align: center; background: transparent; border-bottom: 1px solid transparent; */ } .ec-base-tab .menu li.selected a { position: relative; top: 0; left: 0; margin: 0; border: 0; border-bottom:0; /* color: #fff; font-weight: normal; background: var(--main-color); */ color: var(--main-color); background: transparent; font-weight: bold; } .ec-base-tab > .right { position: absolute; top: 8px; right: 10px; line-height: 24px; color: var(--main-color); } /* typeLight */ .ec-base-tab.typeLight .menu li.selected a { margin: 0; border-bottom: 1px solid var(--main-color); color: var(--main-color); background: transparent; } /* grid (2~7) */ .ec-base-tab[class*="grid"] .menu { display: table; table-layout: fixed; width: 100%; } .ec-base-tab[class*="grid"] .menu li { float: none; display: table-cell; vertical-align: middle; border-top: 1px solid var(--sub-color-third); border-bottom: 1px solid var(--sub-color-third); } .ec-base-tab[class*="grid"] .menu li a { display: inline-block; width: 100%; min-width: 0; margin: 0; padding: 11px 0; border: 0; } .ec-base-tab[class*="grid"] .menu li.selected { position: relative; top: 0; right: -1px; border: 1px solid var(--main-color); border-bottom: 0; background: var(--main-color); } .ec-base-tab[class*="grid"] .menu li:first-child.selected { right: 0; } .ec-base-tab[class*="grid"] .menu li.selected a { position: static; background: none; } .ec-base-tab.grid2 .menu li { width: 50.5%; } .ec-base-tab.grid3 .menu li { width: 34%; } .ec-base-tab.grid4 .menu li { width: 25.5%; } .ec-base-tab.grid5 .menu li { width: 20.5%; } .ec-base-tab.grid6 .menu li { width: 17%; } .ec-base-tab.grid7 .menu li { width: 14.8%; width: 15% \0/; } .ec-base-tab.grid7 .menu li:first-child { width: 13% \0/; } /* gFlex */ .ec-base-tab.gFlex .menu { display: flex; border-right: 0; } .ec-base-tab.gFlex .menu:after { display: none; } .ec-base-tab.gFlex .menu li { display: flex; align-items: center; float: none; flex: 1; position: relative; } .ec-base-tab.gFlex .menu li:last-child { border-right: 1px solid #cbcdce; } .ec-base-tab.gFlex .menu li a { width: 100%; min-width: 0; border-right: 0; background: none; word-break: break-all; } .ec-base-tab.gFlex .menu li a:after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .ec-base-tab.gFlex .menu li.selected { border: 1px solid var(--main-color); border-bottom: 0; background: var(--main-color); } .ec-base-tab.gFlex .menu li.selected a { left: 0; margin: 0 0 -1px -1px; background: var(--main-color); border: 0; position: initial; } /* .ec-base-tab .menu li[class*="tab_class"] { margin: 0; } .ec-base-tab .menu li[class*="tab_class"] a { color:var(--sub-color-first); background: transparent; display: inline-block; font-size: 14px; } .ec-base-tab .menu li[class*="tab_class"].selected a { color: var(--main-color); background: transparent; font-weight: bold; } .ec-base-tab .menu li:not(:first-child)::before { content: '/'; display: inline-block; color:var(--sub-color-first); font-size: 14px; margin: 0 15px; } */ /* button */ [class^='btnNormal'], a[class^='btnNormal'] { display: inline-block; box-sizing: border-box; padding: 0 13px; color: var(--main-color); border: 1px solid var(--sub-color-third); font-size: 12px; line-height: 30px; height: 34px; /* font-weight: 300;*/ text-decoration: none; vertical-align: top; letter-spacing: 0; text-align: center; white-space: nowrap; background-color: transparent; } [class^='btnSubmit'], a[class^='btnSubmit'] { display: inline-block; box-sizing: border-box; padding: 0 13px; border: 1px solid var(--main-color); font-size: 12px; line-height: 30px; height: 34px; /* font-weight: 300;*/ text-decoration: none; vertical-align: top; letter-spacing: 0; text-align: center; white-space: nowrap; color: #fff; background-color: var(--main-color); } [class^='btnEm'], a[class^='btnEm'] { display: inline-block; box-sizing: border-box; padding: 0 13px; border: 1px solid var(--main-color); font-size: 12px; line-height: 30px; height: 34px; /* font-weight: 300;*/ text-decoration: none; vertical-align: top; letter-spacing: 0; text-align: center; white-space: nowrap; color: var(--main-color); } [class^='btnBasic'], a[class^='btnBasic'] { display: inline-block; box-sizing: border-box; padding: 0 13px; color: var(--main-color); border: 1px solid var(--sub-color-third); border-radius: 0; font-size: 12px; line-height: 30px; height: 34px; /* font-weight: 300;*/ text-decoration: none; vertical-align: top; letter-spacing: 0; text-align: center; white-space: nowrap; } /* [class^='btnNormal']:not(.disabled):hover { background-color: #f3f3f3; } [class^='btnSubmit']:not(.disabled):hover { background-color: #43495a; } [class^='btnEm']:not(.disabled):hover { background-color: #77797d; } [class^='btnBasic']:not(.disabled):hover { background-color: #e5e5e5; } */ [class^='btnNormal'].disabled { border-color: #e3e3e3; color: #999; } [class^='btnSubmit'].disabled { background-color: #9297a2; color: #f0f0f0; } [class^='btnEm'].disabled { background-color: #b5b6b9; color: #f0f0f0; } [class^='btnBasic'].disabled { color: #999; } /* size */ [class^='btn'].sizeS { padding: 0 8px; } [class^='btn'].sizeM { padding: 0 16px; } [class^='btn'].sizeL { padding: 0 16px; min-width: 80px; height: 40px; line-height: 38px; } /* width Fix */ [class^='btn'][class*='Fix'] { width: 72px; word-break: keep-all; word-wrap: break-word; } [class^='btn'][class*='Fix'].sizeS { width: 96px; } [class^='btn'][class*='Fix'].sizeM { width: 120px; padding-left: 8px; padding-right: 8px; } [class^='btn'][class*='Fix'].sizeL { width: 160px; padding-left: 8px; padding-right: 8px; } /* icon button */ a.btnLink { color: var(--main-color); } a.btnLink:hover { text-decoration: none; -webkit-box-shadow: 0 1px 0 0 #222; -moz-box-shadow: 0 1px 0 0 #222; box-shadow: 0 1px 0 0 #222; } a.btnLink:after { content: ""; display: inline-block; margin: -2px -2px 0 3px; vertical-align: top; border: 0 0 0 10px; border-style: solid; border-color: transparent transparent transparent #77797d; } [class^='btn'] i { display: none \0/IE8; } [class^='btn'] .icoArrow { display: inline-block; width: 3px; height: 3px; margin: -2px 1px 0 1px; border: 2px solid #77797d; border-width: 0 2px 2px 0; vertical-align: top; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); } [class^='btnSubmit'] .icoArrow, [class^='btnEm'] .icoArrow { border-color: #f0f0f0; } [class^='btn'] .icoDelete { position: relative; overflow: hidden; display: inline-block; width: 10px; height: 10px; margin: -2px 2px 0 0; vertical-align: top; -webkit-transform: rotate(45deg); transform: rotate(45deg); display: none; } [class^='btn'] .icoDelete:before { content: ""; position: absolute; top: 0; right: 4px; width: 2px; height: 10px; background: var(--main-color); } [class^='btn'] .icoDelete:after { content: ""; position: absolute; top: 4px; right: 0; width: 10px; height: 2px; background: var(--main-color); } [class^='btnSubmit'] .icoDelete:before, [class^='btnSubmit'] .icoDelete:after, [class^='btnEm'] .icoDelete:before, [class^='btnEm'] .icoDelete:after { background: #f0f0f0; } [class^='btn'] .icoAdd, [class^='btn'] .icoRemove { position: relative; overflow: hidden; display: inline-block; width: 8px; height: 8px; margin: -2px 2px 0 0; vertical-align: top; } [class^='btn'] .icoAdd:before, [class^='btn'] .icoAdd:after, [class^='btn'] .icoRemove:before { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-radius: 0; background: var(--main-color); } [class^='btn'] .icoAdd:before, [class^='btn'] .icoRemove:before { height: 2px; margin: -1px 0 0 -4px; } [class^='btn'] .icoAdd:after { width: 2px; margin: -4px 0 0 -1px; } [class^='btn'] img { margin: -2px 1px 0; vertical-align: top; display: none; } /* unique */ .btnLogin, a.btnLogin { display: inline-block; box-sizing: border-box; width: 100px; height: 70px; line-height: 70px; border-radius: 0; text-align: center; font-family: inherit; font-size: 12px; font-weight: bold; text-decoration: none; color: #fff; background-color: #4a5164; } .btnLogin:hover { background-color: #43495a; } .btnAgree, a.btnAgree { display: inline-block; box-sizing: border-box; width: 80px; height: 70px; line-height: 70px; border: 1px solid #d1d1d1; border-radius: 0; text-align: center; font-size: 12px; font-weight: bold; color: #222; text-decoration: none; background-color: #fff; } .btnAgree:hover { background-color: #f3f3f3; } .btnToggle { display: inline-block; font-size: 0; line-height: 0; } .btnToggle button { display: inline-block; box-sizing: border-box; border: 1px solid #d1d1d1; margin: 0 -1px 0 0; padding: 0 7px; height: 24px; line-height: 24px; text-align: center; font-size: 12px; outline: 0; text-decoration: none; color: #222; background: #fff; } .btnToggle button:first-child { border-radius: 2px 0 0 2px; } .btnToggle button:last-child { border-radius: 0 2px 2px 0; } .btnToggle button.selected { position: relative; border: 1px solid #84868b; color: #fff; background: #84868b; } /* ec-base-button */ .ec-base-button { padding: 10px 0; text-align: center; } .ec-base-button.justify { position: relative; } .ec-base-button:after { display: block; content: ""; clear: both; } .ec-base-button .gLeft { float: left; text-align: left; } .ec-base-button .gRight { float: right; text-align: right; } .ec-base-button .gRight [class^='btn']:nth-child(1) { margin-right: 3px; } .ec-base-button .gLeft [class^='btn']:last-child { margin-left: 3px; } .ec-base-button.justify .gLeft { position: absolute; left: 0; } .ec-base-button.justify .gRight { position: absolute; right: 0; } .ec-base-button .text { margin: 0 6px 0 0px; color: var(--main-color); line-height: 34px; } /* type */ .ec-base-button.typeBorder { margin-top: -1px; padding: 10px 20px; border: 1px solid var(--sub-color-third); } .ec-base-button.typeBG { padding: 20px 0px; /* border: 1px solid var(--sub-color-third);*/ /* background: #fbfafa;*/ } /* gColumn */ .ec-base-button[class*="gColumn"] { margin: 0 auto; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; } .ec-base-button[class*="gColumn"]:after { display: none; } .ec-base-button[class*="gColumn"] [class^='btn'] { margin: 0 2px; padding-left: 8px; padding-right: 8px; word-break: keep-all; word-wrap: break-word; white-space: normal; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; } .ec-base-button[class*="gColumn"] [class^='btn'][class*='Fix'] { -webkit-flex: none; -moz-flex: none; -ms-flex: none; flex: none; } /* gFlex */ .ec-base-button[class*="gColumn"] .gFlex2 { -webkit-flex: 2; -moz-flex: 2; -ms-flex: 2; flex: 2; } .ec-base-button[class*="gColumn"] .gFlex3 { -webkit-flex: 3; -moz-flex: 3; -ms-flex: 3; flex: 3; } .ec-base-button[class*="gColumn"] .gFlex4 { -webkit-flex: 4; -moz-flex: 4; -ms-flex: 4; flex: 4; } /* base */ .ec-base-box { /* padding: 20px; */ margin-left: auto; margin-right: auto; border: 1px solid var(--sub-color-third); } .ec-base-box.gHalf { position: relative; padding: 20px 0; } .ec-base-box.gHalf:before { position: absolute; top: 0; left: 50%; display: block; content: ""; width: 1px; height: 100%; background-color: var(--sub-color-third); } .ec-base-box.typeBg { background-color: #fbfafa; } .ec-base-box.typeThin { border-width: 1px; border-color: var(--sub-color-third); } .ec-base-box.typeThin h3.boxTitle { margin: 0 0 20px; font-size: 18px; text-align: center; } .ec-base-box.typeThinBg { border-width: 1px; border-color: var(--sub-color-third); /* background-color: #fbfafa; */ } .ec-base-box.center { text-align: center; } /* 약관 */ .ec-base-box.typeThinBg > .agree { padding: 20px; border: 1px solid var(--sub-color-third); /* background: #fff; */ } .ec-base-box.typeThinBg > .agree p { padding: 0 0 17px; } .ec-base-box.typeThinBg > .agree * { font-family: inherit !important; font-size:inherit !important; color:inherit !important; } /* typeMember */ .ec-base-box.typeMember { padding: 0; } .ec-base-box.typeMember .information { display: table; table-layout: fixed; padding: 10px 0; width: 100%; box-sizing: border-box; } .ec-base-box.typeMember .information > .title, .ec-base-box.typeMember .information > .thumbnail { display: table-cell; padding: 0 15px; width: 70px; text-align: center; vertical-align: middle; } .ec-base-box.typeMember .information > .title { vertical-align: middle; } .ec-base-box.typeMember .information > .thumbnail img { max-width: 60px; border-radius: 50%; opacity: 0.4; } .ec-base-box.typeMember .information .description { display: table-cell; padding: 0 10px; width: auto; line-height: 1.5em; border-left: 1px solid var(--sub-color-third); vertical-align: middle; } .ec-base-box.typeMember.gMessage { border-width: 1px; border-color: var(--sub-color-third); } .ec-base-box .message { display: block; padding: 10px 0 10px 35px; border-bottom: 1px solid var(--sub-color-third); background: url("//img.echosting.cafe24.com/skin/base/common/ico_info.gif") no-repeat 10px center; } /* typeProduct */ .ec-base-box.typeProduct { display: table; table-layout: fixed; padding: 20px 0; width: 100%; box-sizing: border-box; } .ec-base-box.typeProduct .thumbnail, .ec-base-box.typeProduct .information { display: table-cell; padding: 0 20px; vertical-align: middle; } .ec-base-box.typeProduct .thumbnail { /* width: 100px;*/ width: 89px; padding: 0; } .ec-base-box.typeProduct .thumbnail img { width: 100%; height: auto; border: 1px solid var(--sub-color-third); } .ec-base-box.typeProduct .information { padding-left: 0; } .ec-base-table table { position: relative; margin: 0; /* border: 1px solid var(--sub-color-third); */ border-top: 1px solid var(--sub-color-third); border-bottom: 1px solid var(--sub-color-third); border-top: 0; line-height: 1.5; } .xans-board .ec-base-table table { border: none; border-bottom: 1px solid var(--sub-color-third); } .xans-board .ec-base-table.typeWrite table { border: 1px solid var(--sub-color-third); border-top: 0px; } .ec-base-table.gLayoutFixed table { table-layout: fixed; } .ec-base-table.gLayoutFixed .gLayoutAuto table { table-layout: auto; } .ec-base-table table:before { position: absolute; top: 0; left: 0; display: block; content: ""; width: 100%; height: 1px; background: var(--sub-color-third); } .ec-base-table thead th { padding: 15px 0; /* border-left: 1px solid var(--sub-color-third);*/ border-bottom: 1px solid var(--sub-color-third); color: var(--main-color); vertical-align: middle; font-weight: normal; } .ec-base-table tbody th { padding: 11px 0 10px 18px; border: 1px solid var(--sub-color-third); border-bottom-width: 0; color: var(--main-color); text-align: left; font-weight: normal; /* background-color: #fbfafa;*/ } .ec-base-table th { word-break: break-all; word-wrap: break-word; } .ec-base-table th:first-child { border-left: 0; } .ec-base-table td { padding: 11px 10px 10px; border-top: 1px solid var(--sub-color-third); /* color: var(--main-color);*/ color: inherit; vertical-align: middle; word-break: break-all; word-wrap: break-word; } .ec-base-table td.clear { padding: 0 !important; border: 0 !important; } /* horizontal */ /* typeWrite */ .ec-base-table.typeWrite th { font-weight: 300; } .ec-base-table.typeWrite td { padding: 12px 10px; } .ec-base-table.typeWrite img { max-width: 100% !important; height: auto !important; } .ec-base-table.typeWrite img[alt="필수"] { width: 0; height: 0 !important; display: inline-block; background-image: url("//henzy.co.kr/moa/img/default/icon_required.svg"); background-repeat: no-repeat; padding: 15px 7px 0 0; } /* vertical */ /* typeList */ .ec-base-table.typeList table { /* border-top: 1px solid var(--sub-color-third);*/ border-top: 2px solid var(--main-color); } .ec-base-table.typeList table:before { display: none; } .ec-base-table.typeList td { padding: 20px 10px; } .ec-base-table.typeList tfoot td { padding: 20px 10px 17px; } .ec-base-table .message { border: 1px solid var(--sub-color-third); padding: 50px 0; text-align: center; color: var(--main-color); font-weight: bold; } .ec-base-table table + .message { margin: -1px 0 0; } .ec-base-table table td.message { padding: 50px 0; } .ec-base-table .scroll .message { border: 0; } /* scroll */ .ec-base-table.typeList .head td { padding: 11px 0 10px; border-left: 1px solid var(--sub-color-third); border-bottom: 1px solid var(--sub-color-third); color: var(--main-color); vertical-align: middle; text-align: center; /* background: #fbfafa; */ } .ec-base-table.typeList .head td:first-child { border-left: 0; } .ec-base-table.typeList .scroll { position: relative; overflow-x: hidden; overflow-y: scroll; max-height: 185px; min-height: 100px; border: 1px solid var(--sub-color-third); border-top-width: 0; margin-top: -1px; } .ec-base-table.typeList .scroll table { border: 0; margin: 0; } .ec-base-table.typeList .scroll table:before { display: none; } .ec-base-table.typeList .scroll .message { border: 0; } /* thead - blind */ .ec-base-table thead.blind, .ec-base-table thead.blind th { display: none; } .ec-base-table thead.blind + tbody tr:first-child th, .ec-base-table thead.blind + tbody tr:first-child td { border-top-width: 0; } /* Line */ .ec-base-table.typeList.gLine table { border-width: 0; border-bottom-width: 1px; } /* common */ /* border, background style none */ .ec-base-table.typeClear table:before { display: none; } .ec-base-table.typeClear table, .ec-base-table.typeClear th, .ec-base-table.typeClear td { border: 0 none; background: none; } .ec-base-table.typeClear th { font-weight: bold; } /* border */ .ec-base-table.gBorder td:first-child { border-left: 0; } .ec-base-table.gBorder td.gClearLine { border-left: 0; } .ec-base-table.typeList.gBorder tbody tr:not(:last-child) td { border-bottom: 1px solid var(--sub-color-third); } .ec-base-table tbody tr { background-color: transparent !important; background: transparent !important; } /* align */ .ec-base-table .left { text-align: left; } .ec-base-table .center { text-align: center; } .ec-base-table .right { text-align: right; } .ec-base-table.typeList .center td, .ec-base-table.typeList td.center { padding-left: 0; padding-right: 0; } .ec-base-table.typeList .center td.left { padding-left: 10px; } .ec-base-table.typeList .center td.right { padding-right: 10px; } .ec-base-table .top th, .ec-base-table th.top, .ec-base-table .top td, .ec-base-table td.top { vertical-align: top; } .ec-base-table .middle th, .ec-base-table th.middle, .ec-base-table .middle td, .ec-base-table td.middle { vertical-align: middle; } /* form */ .ec-base-table img { vertical-align: middle; } @media print { .ec-base-table table:before { display: none; } } .ec-base-desc { overflow: hidden; text-align: left; } .ec-base-desc:after { content: ""; display: block; clear: both; } .ec-base-desc dt, .ec-base-desc .term { float: left; width: 100px; margin: 0 0 2px; padding: 0 4px 0 0; line-height: 22px; -webkit-box-sizing: border-box; -moz-webkit-box: border-box; box-sizing: border-box; font-weight: normal; } .ec-base-desc dd, .ec-base-desc .desc { display: block; margin: 0 0 2px; padding: 0 5px 0 100px; min-height: 22px; line-height: 22px; word-wrap: break-word; word-break: break-all; } .ec-base-desc dd:after, .ec-base-desc .desc:after { content: ""; display: block; clear: left; } /* size */ .ec-base-desc.gSmall dt, .ec-base-desc.gSmall .term { width: 30%; } .ec-base-desc.gSmall dd, .ec-base-desc.gSmall .desc { padding-left: 30%; } .ec-base-desc.gMedium dt, .ec-base-desc.gMedium .term { width: 40%; } .ec-base-desc.gMedium dd, .ec-base-desc.gMedium .desc { padding-left: 40%; } .ec-base-desc.gLarge dt, .ec-base-desc.gLarge .term { width: 50%; } .ec-base-desc.gLarge dd, .ec-base-desc.gLarge .desc { padding: 0 0 0 50%; } /* align */ .ec-base-desc.centerDT dt, .ec-base-desc.centerDD dd, .ec-base-desc.centerDT .term, .ec-base-desc.centerDD .desc, .ec-base-desc.center, .ec-base-desc .center { text-align: center; } .ec-base-desc.rightDT dt, .ec-base-desc.rightDD dd, .ec-base-desc.rightDT .term, .ec-base-desc.rightDD .desc, .ec-base-desc.right, .ec-base-desc .right { text-align: right; } .ec-base-desc.rightDD dd, .ec-base-desc.rightDD .desc { padding-right: 0; } /* typeBullet */ .ec-base-desc.typeBullet dt, .ec-base-desc.typeBullet .term { padding: 0 4px 0 10px; background: url("//img.echosting.cafe24.com/skin/base/common/ico_arrow.png") no-repeat 0 7px; } /* typeDot */ .ec-base-desc.typeDot dt, .ec-base-desc.typeDot .term { position: relative; padding: 0 4px 0 10px; } .ec-base-desc.typeDot dt:before, .ec-base-desc.typeDot .term:before { position: absolute; top: 50%; left: 0; content: ""; display: block; width: 2px; height: 2px; margin: -2px 0 0 0; background: #383838; } :root { /* ================================== -메인 폰트 ================================== */ --main-font: 'Noto Sans KR',Verdana,Dotum,AppleGothic, sans-serif; /* ================================== -한글 폰트 ================================== */ --kr-font: 'Noto Sans KR', sans-serif; /* ================================== -배경 컬러 ================================== */ --bg-color: #fff; /* ================================== -메인 컬러 ================================== */ --main-color: #333; /* ================================== -서브 컬러 (진한 정도: 진함) -각종 서브 타이틀 (게시판 등) -포토리뷰 모달 팝업 서브 텍스트 -인풋 placeholder -우편번호 검색, 아이디,이메일 중복확인 버튼 BG -공통 버튼 보더 컬러 : Reverse ================================== */ --sub-color-first: #999; /* ================================== -서브 컬러 (진한 정도: 연함) -인풋 보더 컬러 -서브페이지 보더 컬러 (게시판, 테이블 등) -로그인 페이지 인풋 보더 컬러 -포토리뷰 모달 팝업 보더 컬러 ================================== */ --sub-color-third: #D6D6D6; /* ================================== -서브 컬러 (진한 정도: 보통) -게시판 탭 텍스트 컬러 ================================== */ --sub-color-second: #9a9a9a; /* ================================== -푸터 텍스트 컬러 ================================== */ --footer-txt-color: #fff; /* ================================== -우편번호 검색, 아이디,이메일 중복확인 버튼 보더 컬러 ================================== */ --sub-btn-border-color: #333; /* ================================== -애니메이션 Easing ================================== */ --common-easing: cubic-bezier(.32,.24,.15,1); /* --border-color-regular: rgb(83 92 76 / 79%); --btn-bg-color: var(--main-color); --btn-bg-reverse-color: transparent; --btn-border-color: var(--main-color); --btn-border-reverse-color: #a4a79f; --btn-txt-color: #fff; --btn-txt-reverse-color: var(--main-color); */ } .clearfix::after { content: ''; display: block; clear: both; } .pull-left { float: left; } .pull-right { float: right; } .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .inline { font-size: 0; } .inline>*, .inline .inline__block { display: inline-block; vertical-align: top; } .relative { position: relative; } a:hover { text-decoration: none; } .hover-opacity { -webkit-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; } .hover-opacity:hover { opacity: 0.5; } .underline { border-bottom: 1px solid var(--main-color); } .flex { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .flex--v-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .flex--h-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .ui-unset { appearance: none; -moz-appearance: none; -webkit-appearance: none; } /* Button */ .btn-basic { box-sizing: border-box; background-color: var(--main-color) !important; color: #fff !important; border: 1px solid var(--main-color) !important; border-radius: 0px !important; } .btn-basic--reverse { background-color: transparent !important; color: var(--main-color) !important; -webkit-transition: background-color 0.3s var(--common-easing), color 0.3s var(--common-easing); -ms-transition: background-color 0.3s var(--common-easing), color 0.3s var(--common-easing); transition: background-color 0.3s var(--common-easing), color 0.3s var(--common-easing); } .btn-basic--reverse:hover { background-color: var(--main-color) !important; color: #fff !important; } /* Table */ .ec-base-box { padding: 0; margin-bottom: 50px; } .ec-base-box.typeThinBg { border: 0; background: none; } .ec-base-box .message { background: none; } /* Board tab */ .board__tab { padding-bottom: 50px; /* border-bottom: 2px solid var(--main-color); */ } .board__tab li { margin: 0; } .board__tab li:not(:last-child)::after { content: '/'; display: inline-block; vertical-align: middle; color: var(--main-color); font-size: 13px; margin: 0 15px; } .board__tab li a { font-size: 13px; color: var(--sub-color-second); display: inline-block; vertical-align: middle; -webkit-transition: color 0.3s var(--common-easing); -ms-transition: color 0.3s var(--common-easing); transition: color 0.3s var(--common-easing); } .board__tab li:hover a, .board__tab li.current a { color: var(--main-color); } /* Hover effect */ .hover-line { position: relative; } .hover-line::after { content: ''; display: block; width: 0; height: 1px; background: currentColor; position: absolute; bottom: -1px; right: 0; -webkit-transition: all 0.4s var(--common-easing); transition: all 0.4s var(--common-easing); } .hover-line.on::after, .hover-line:hover::after, .hover-line.on > *::after, .hover-line:hover > *::after { content: ''; left: 0; width: 100%; } /* Layer */ body .ec-base-layer .header { background: var(--main-color); } /* loaded UX */ @keyframes loadedCont { from { opacity: 0; visibility: hidden; /* transform: translateY(10px); */ } to { opacity: 1; visibility: visible; /* transform: translateY(0); */ } } @keyframes loadedTitle { from { opacity: 0; visibility: hidden; -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); } to { opacity: 1; visibility: visible; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @keyframes loadedTab { from { opacity: 0; visibility: hidden; -webkit-transform: translateY(5px); -ms-transform: translateY(5px); transform: translateY(5px); } to { opacity: 1; visibility: visible; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } body { opacity: 0; visibility: hidden; } body#popup { opacity: 1; visibility: visible; } html.loaded body { -webkit-animation: loadedCont 0.6s var(--common-easing) forwards; animation: loadedCont 0.6s var(--common-easing) forwards; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .titleArea h2 { opacity: 0; visibility: hidden; -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); } html.loaded .titleArea h2 { -webkit-animation: loadedTitle 0.6s var(--common-easing) forwards; animation: loadedTitle 0.6s var(--common-easing) forwards; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .board__tab { opacity: 0; visibility: hidden; -webkit-transform: translateY(5px); -ms-transform: translateY(5px); transform: translateY(5px); } html.loaded .board__tab { -webkit-animation: loadedTab 0.6s var(--common-easing) forwards; animation: loadedTab 0.6s var(--common-easing) forwards; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .left-category .menu-category li { position: relative; left: -10px; opacity: 0; } /* brand popup */ .brand-popup { position: fixed; top: 200px; left: 88px; width: 400px; height: 400px; z-index: 1; /* box-shadow: 1px 1px 10px #808080;*/ box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px; border-radius: 3px; opacity: 0; visibility: hidden; -webkit-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); } html.loaded .brand-popup { -webkit-transition: all 0.6s ease; -ms-transition: all 0.6s ease; transition: all 0.6s ease; } .brand-popup.on { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; visibility: visible; } .brand-popup__layer { width: 100%; height: 100%; border-radius: 3px; background: var(--bg-color); 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; } .brand-popup__logo { width: 110px; margin: 0 auto; } .brand-popup__logo svg { width: 100%; height: auto; } .brand-popup__txt { font-size: 14px; margin: 30px 0; line-height: 1.65; } .brand-popup__link { display: block; width: 170px; height: 45px; line-height: 45px; border-radius: 3px; background: var(--main-color); color: #fff; margin: 0 auto; } .brand-popup__close { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; font-size: 0; cursor: pointer; } .brand-popup__close::before, .brand-popup__close::after { content: ''; display: block; width: 1px; height: 20px; background: var(--main-color); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: 20%; left: 45%; } .brand-popup__close::after { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } #wrap { position: relative; z-index: 1; background: var(--bg-color); padding-bottom: 150px; } #contents { min-height: calc(100vh - 587px); background: var(--bg-color); } .container { /* max-width: 1920px;*/ min-width: 1280px; width: 100%; margin: 0 auto; box-sizing: border-box; padding: 0 50px; } .container-l { padding: 0 50px; min-width: 1200px; box-sizing: border-box; } @keyframes fade-in { 0% { opacity: 0; visibility: hidden; } 100% { opacity: 1; visibility: visible; } } @keyframes depth-right { 0% { width: 0; } 100% { width: 650px; } } @keyframes depth-left { 0% { width: 423px; } 100% { width: 0; } } @keyframes aside-fade-right { 0% { opacity: 0; visibility: hidden; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; visibility: visible; -webkit-transform: translateX(0); transform: translateX(0) } } @keyframes aside-fade-left { 0% { opacity: 1; visibility: visible; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; visibility: hidden; -webkit-transform: translateX(-20px); transform: translateX(-20px); } } @keyframes search-border-eft { 0% { width: 0%; } 100% { width: 100%; } } @keyframes fade-in-up { 0% { opacity: 0; visibility: hidden; -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fade-in-left { 0% { opacity: 0; visibility: hidden; -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; visibility: visible; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes cart-loader { 0% { transform: rotate(0deg); border-radius: 50%; } 50% { transform: rotate(90deg); border-radius: 0%; } 100% { transform: rotate(180deg); border-radius: 50%; } } /* Header */ .header { width: 100%; padding-bottom: 193px; z-index: 98; } .header__wrap { position: fixed; top: 0; left: 0; width: 100%; height: 113px; border-bottom: 1px solid transparent; } .top-banner.on + .header .header__wrap { top: 85px; } .header__wrap.pos-up, .top-banner.disabled + .header .header__wrap { top: 50px !important; } .header__logo { position: absolute; top: 50%; left: 50%; margin-left: -45px; margin-top: -16px; width: 90px; } .header__logo-item { position: absolute; top: 0; left: 0; width: 100%; } .header__logo-item:not(:first-child) { opacity: 0; visibility: hidden; } .header__logo img { width: 100%; height: auto; } .header-left, .header-right { position: fixed; top: 0; left: 50px; height: 113px; z-index: 100; } .header-right { left: auto; right: 50px; } .header-menu { margin-right: 25px; line-height: 1; } .header-menu[data-name="이벤트(게시판)"] { display: none; } .header-menu--right { margin: 0 0 0 25px; } .header-link { font-size: 13.5px; color: var(--main-color); } .header-link.black { color: var(--main-color) !important; } .header-link.cart-count { font-size: 13px; } .header-link.cart-count::before, .header-link.cart-count::after { content: '('; font-size: 12px; } .header-link.cart-count::after { content: ')'; } html.loaded .header-left, html.loaded .header-right { -webkit-transition: height 0.6s var(--common-easing); transition: height 0.6s var(--common-easing); } html.loaded .header__wrap { transition: background 0.6s var(--common-easing), border-color 0.6s var(--common-easing), height 0.6s var(--common-easing); } html.header-transform .header__wrap { background: #fff; border-bottom-color: #d9d9d9; height: 80px; } .header-transform .header-left, .header-transform .header-right { height: 78px; } /* aside */ .aside { position: fixed; top: 0; left: 0; width: 680px; height: 100%; z-index: 99; opacity: 0; visibility: hidden; } .aside--right { left: auto; right: 0; } .aside.display { opacity: 1; visibility: visible; } .aside.has-depth-three { width: 846px; } .aside__depth { position: relative; width: 100%; height: 100%; background: #fff; box-sizing: border-box; z-index: 2; overflow: hidden; -webkit-animation: depth-right 0.8s var(--common-easing) forwards; animation: depth-right 0.8s var(--common-easing) forwards; } .aside__depth--right { margin-left: auto; } .aside__depth.close { -webkit-animation: depth-left 0.4s var(--common-easing) forwards; animation: depth-left 0.4s var(--common-easing) forwards; } .aside__depth--two { z-index: 1; } .aside__depth--three { z-index: 0; } .aside__depth:not(:last-child) { border-right: 1px solid #dfdfd4; } .aside__inner { padding: 195px 50px 50px; } .aside__inner--cart { padding: 100px 50px 50px; } .aside__list, .aside__content { width: 322px; } .aside__category { opacity: 0; visibility: hidden; -webkit-animation: aside-fade-right 0.8s var(--common-easing) forwards; animation: aside-fade-right 0.8s var(--common-easing) forwards; margin-bottom: 20px; } .aside__category--view-all { margin-bottom: 40px; } .aside__depth.close .aside__category { opacity: 1; visibility: visible; -webkit-animation: aside-fade-left 0.8s var(--common-easing) forwards; animation: aside-fade-left 0.8s var(--common-easing) forwards; -webkit-animation-delay: 0s !important; animation-delay: 0s !important; } .aside__link { display: inline-block; font-size: 25px; font-weight: 300; letter-spacing: -1px; line-height: 1.1; } .aside__link.hover-line::after { bottom: -5px; } .header-menu.on .header-link::after, .aside__link.on::after { content: ''; left: 0; width: 100%; } .aside-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .6); z-index: 98; opacity: 0; visibility: hidden; -webkit-transition: opacity 0.8s var(--common-easing), visibility 0.8s var(--common-easing); transition: opacity 0.8s var(--common-easing), visibility 0.8s var(--common-easing); } .aside.display ~ .aside-bg { opacity: 1; visibility: visible; } .aside__close { width: 26px; height: 26px; position: absolute; top: 43px; left: 235px; -webkit-transform: translateX(365px); transform: translateX(365px); -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; opacity: 0; visibility: hidden; -webkit-transition: top 0.8s var(--common-easing), opacity 0.8s var(--common-easing), visibility 0.8s var(--common-easing), transform 0.8s var(--common-easing); transition: top 0.8s var(--common-easing), opacity 0.8s var(--common-easing), visibility 0.8s var(--common-easing), transform 0.8s var(--common-easing); z-index: 10; } .aside__close--right { -webkit-transform: translateX(44px); transform: translateX(44px); } .aside__close.on { opacity: 1; visibility: visible; } .aside__close.move { -webkit-transform: translateX(788px); transform: translateX(788px); } .aside__close.left-delay-0 { -webkit-transition: top 0.6s var(--common-easing), opacity 0.4s var(--common-easing), visibility 0.4s var(--common-easing); transition: top 0.6s var(--common-easing), opacity 0.4s var(--common-easing), visibility 0.4s var(--common-easing); } .aside__close::before, .aside__close::after { background-color: #333; content: ""; height: 1px; top: 12px; left: 5px; position: absolute; top: 12px; width: 15px; box-shadow: 0px 0px 1px; } .aside__close::before { transform: rotate(45deg); } .aside__close::after { transform: rotate(-45deg); } html.header-transform .aside__close { top: 27px; } /* Search layer */ .search__title { font-size: 25px; font-weight: 300; margin-bottom: 40px; opacity: 0; visibility: hidden; -webkit-animation: fade-in 0.8s var(--common-easing) forwards; animation: fade-in 0.8s var(--common-easing) forwards; -webkit-animation-delay: 200ms; animation-delay: 200ms; } .search__input-wrap::after { content: ''; display: block; width: 0; height: 1px; background: var(--main-color); position: absolute; bottom: 0; right: 0; -webkit-animation: search-border-eft 1.4s var(--common-easing) forwards; animation: search-border-eft 1.4s var(--common-easing) forwards; /* animation-delay: 0.4s;*/ } #keyword.search__input { border: none; width: calc(100% - 34px); padding: 10px 0; margin: 0; font-size: 25px; font-weight: 300; } #keyword.search__input:focus { outline: none; } .search__submit { display: block; width: 24px; position: absolute; top: 9px; right: 0; cursor: pointer; } .hot-keyword { padding-top: 40px; } .hot-keyword__title { font-size: 14px; font-weight: 300; margin-bottom: 15px; color: #6d6d6d; opacity: 0; visibility: hidden; -webkit-animation: aside-fade-right 0.8s var(--common-easing) forwards; animation: aside-fade-right 0.8s var(--common-easing) forwards; } .hot-keyword__item { opacity: 0; visibility: hidden; margin-bottom: 10px; -webkit-animation: aside-fade-right 0.8s var(--common-easing) forwards; animation: aside-fade-right 0.8s var(--common-easing) forwards; } .hot-keyword__link { font-size: 20px; font-weight: 300; } /* Cart */ .aside__inner--cart, .aside-cart { opacity: 0; visibility: hidden; } .aside__inner--cart.on, .aside-cart { -webkit-animation: fade-in 0.8s var(--common-easing) forwards; animation: fade-in 0.8s var(--common-easing) forwards; -webkit-animation-delay: 200ms; animation-delay: 200ms; } #cart-data { width: 322px; /* height: calc(100vh - 140px);*/ height: calc(100vh - 221px); } #cart-data.empty { height: calc(100vh - 195px); } .aside-cart__empty { opacity: 0; height: 100vh; font-size: 14px; -webkit-animation: fade-in 0.8s var(--common-easing) forwards; animation: fade-in 0.8s var(--common-easing) forwards; -webkit-animation-delay: 200ms; animation-delay: 200ms; } .aside-cart__scroll { /* height: calc(100vh - 152px);*/ height: calc(100vh - 67px); overflow: auto; } .aside-cart__list { overflow: hidden; } .aside-cart__item { margin: 0; padding: 19.5px 0; } .aside-cart__item:not(:last-child) { border-bottom: 1px solid var(--sub-color-third); } .aside-cart__thumb { width: 80px; font-size: 0; line-height: 1; } .aside-cart__thumb img { width: 100%; height: auto; } .aside-cart__spec { width: calc(100% - 90px); margin-left: 10px; } .aside-cart__prd-name { font-size: 12px; min-height: 21px; font-weight: 500; } .aside-cart__option { color: #888; font-size: 11px; } .aside-cart__prd-price { font-size: 12px; margin-left: auto; } .aside-cart__qty { border: 1px solid var(--sub-color-third); position: absolute; bottom: 20px; } .aside-cart__qty-btn { width: 22px; height: 22px; /* border: 1px solid #d9d9d9;*/ } .aside-cart__qty-btn svg { width: 7px; } body .aside-cart__qty-btn ~ input { text-align: center; font-size: 12px; height: 22px; line-height: 22px; padding: 0px 2px; border: none !important; } .aside-cart__delete { position: absolute; bottom: 20px; right: 0; border-bottom: 1px solid #d9d9d9; color: #888; } .aside-cart__footer { position: absolute; bottom: 0; left: 0; width: 322px; opacity: 0; visibility: hidden; -webkit-animation: fade-in 0.8s var(--common-easing) forwards; animation: fade-in 0.8s var(--common-easing) forwards; /* -webkit-animation-delay: 200ms; animation-delay: 200ms; */ } .cart-total { border-top: 1px solid var(--sub-color-third); padding: 18px 0px; } .cart-total__row { height: 30px; /* border-top: 1px solid var(--main-color);*/ } .cart-total__title { font-size: 13px; } .cart-total__val { margin-left: auto; font-size: 13px; } .cart-total__val strong { font-weight: normal; } .cart-total__title--result, .cart-total__val--result strong { font-weight: 500; } .cart-total__btn-wrap { margin: 0 !important; } #cart-data.empty + .cart-total__btn-wrap .cart-total__btn { display: none; } .cart-total__btn, #cart-data.empty + .cart-total__btn-wrap .cart-total__btn-more { display: block; width: 100%; box-sizing: border-box; border: 1px solid var(--main-color); background: var(--main-color); font-size: 15px; height: 50px; line-height: 46px; color: #fff; margin: 0; font-weight: normal; text-align: center; } .cart-total__btn-more { margin-top: 23px; border-bottom: 1px solid var(--main-color); display: inline-block; font-size: 14px; font-weight: 500; } #NaverChk_Button:empty { margin: 0; } .loader-wrap { position: absolute; top: 0; left: 0; width: 100%; /* height: calc(100% - 113px);*/ height: 100%; } .loader { width: 30px; height: 30px; border-radius: 50%; margin: 3em; display: inline-block; position: relative; vertical-align: middle; } .loader, .loader:before, .loader:after { -webkit-animation: 1s infinite ease-in-out; animation: 1s infinite ease-in-out; } .loader:before, .loader:after { width: 100%; height: 100%; border-radius: 50%; position: absolute; top: 0; left: 0; } .loader-black { background-color: #333; } .loader-5 { -webkit-animation: cart-loader 1s infinite ease-in-out; animation: cart-loader 1s infinite ease-in-out; } /* Layout */ .left-category { width: 200px; float: left; position: fixed; } .left-category .menu-category ul { padding: 5px 0 0 7px; } .left-category ol li { margin-bottom: 10px; } .left-category .menu-category li { margin-bottom: 10px; } .left-category li a { font-size: 13px; color: var(--sub-color-second); -webkit-transition: color 0.3s ease-in-out; -ms-transition: color 0.3s ease-in-out; transition: color 0.3s ease-in-out; } .left-category li a:hover, .left-category li.selected a { color: var(--main-color); } .right-content { float: right; width: calc(100% - 200px); } /* Footer */ .footer { position: relative; background: var(--main-color); } .footer__dummy { display: block; background-color: var(--theme-color-primary); border-radius: 0; height: 244px; margin-top: -244px; z-index: 0; } .footer__inner { position: sticky; bottom: 0; } .container--footer { position: absolute; padding: 50px; } .footer__logo { margin-bottom: 15px; } .footer__column:not(:first-child) { margin-left: 100px; } .footer__txt { display: block; font-size: 12px; line-height: 2; color: var(--footer-txt-color); } .footer__txt--link { display: inline; } .footer__link { -webkit-transition: opacity 0.4s var(--common-easing); transition: opacity 0.4s var(--common-easing); } .footer__link:hover { opacity: .3; } /* Scroll button */ .scroll-page { position: fixed; bottom: 0; right: 50px; margin-bottom: 100px; opacity: 0; visibility: hidden; z-index: 1; -webkit-transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; -ms-transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; } .scroll-page.fade-in { opacity: 1; visibility: visible; } .scroll-page__btn { width: 40px; height: 40px; border: 1px solid #bbb; background: rgba(255,255,255,.8); margin-top: 7px; cursor: pointer; -webkit-transition: opacity 0.3s ease-in-out; -ms-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; } .scroll-page__btn svg { width: 20px; height: auto; -webkit-transform: translateY(1px); transform: translateY(1px); } .scroll-page__btn--kakao svg { width: 40px; } /* reset */ li { list-style:none; } table { width:100%; border:0; border-spacing:0; border-collapse:collapse; } caption { display:none; } h1, h3 { margin:0; } /* common */ .ec-base-layer { position:absolute; z-index:100; border:1px solid var(--sub-color-third); background:#fff; } .ec-base-layer .header { padding:7px 35px 7px 19px; color:#fff; background:var(--main-color); } .ec-base-layer .header > h1, .ec-base-layer .header > h3 { font-size:14px; line-height:1.5; } .ec-base-layer .content { padding:20px; font-size:12px; } .ec-base-layer div.ec-base-help { margin-top:0; } .ec-base-layer .ec-base-button { padding:9px; border-top:1px solid var(--sub-color-third); text-align:center; } .ec-base-layer .close { position:absolute; right:0; top:0; padding:11px 20px; cursor:pointer; } /* popup */ #popup .ec-base-layer { position:relative; border:0; } #popup .ec-base-layer .header { padding:12px 35px 12px 19px; } #popup .ec-base-layer .close { top:5px; } /* ec-base-table */ .ec-base-layer .content > .ec-base-table table:first-child { margin-top:0; } .ec-base-layer .ec-base-table table { line-height:1.4; } .ec-base-layer .ec-base-table thead th { padding:9px 0 8px; } .ec-base-layer .ec-base-table tbody th { padding:9px 0 8px 10px; } .ec-base-layer .ec-base-table td { padding:9px 10px 8px; } /* horizontal - typeWrite */ .ec-base-layer .ec-base-table.typeWrite td { padding:5px 10px 4px; } /* vertical - typeList */ .ec-base-layer .ec-base-table.typeList tfoot td { padding:10px 10px 12px; } /* typeBorder */ .ec-base-layer .ec-base-table.typeBorder tfoot td { padding:10px 10px 12px; } .xans-layout-multishopshipping { display:none; } .xans-layout-multishopshipping .worldshipLayer { top:303px; left:50%; width:448px; margin:0 0 0 -225px; } .xans-layout-multishopshipping .worldshipLayer .content { padding:153px 20px 30px; line-height:1.8; background:url("//img.echosting.cafe24.com/skin/base/link/bg_worldship.gif") center 21px no-repeat; } .xans-layout-multishopshipping .worldshipLayer .content .desc { display:block; margin:4px 0 14px; } .xans-layout-multishopshipping .worldshipLayer .select { margin:10px 0 0; } .xans-layout-multishopshipping .worldshipLayer .select select { width:100%; } .xans-layout-conversionpc { background:#fff; padding:45px; text-align:center; } .xans-layout-conversionpc a { margin:20px; padding:20px 40px 20px 110px; font-size:68px; color:#63666e; text-decoration:none; text-align:center; border:4px solid #9d9db0; border-radius:10px; background:url("//img.echosting.cafe24.com/skin/base/layout/ico_mobile.png") no-repeat 40px 50%; }