/** * Swiper 8.3.1 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2022 Vladimir Kharlampidi * * Released under the MIT License * * Released on: July 13, 2022 */ @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');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-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-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-pointer-events{touch-action:pan-y}.swiper-pointer-events.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d,.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-horizontal.swiper-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-vertical.swiper-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}: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(0px - (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.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.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;font-variant:initial;line-height:1}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.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-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.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:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:50%;background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-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-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-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%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active,.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube{overflow:visible}.swiper-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-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-next+.swiper-slide,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden} @charset "utf-8"; /* form base */ select:focus:not(:focus-visible), textarea:focus:not(:focus-visible), input:focus:not(:focus-visible) {outline:none; border: 1px solid #6f5dd8; } /* base */ body, html { font-size: 62.5%; line-height: 1.285; height:100%;} * { box-sizing: border-box; } .scroll_hidden { overflow-y:hidden; touch-action: none; -webkit-overflow-scrolling: none; overscroll-behavior: none;} /* web font import */ @font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 400; src: url(../font/NotoSans-Regular.woff2) format('woff2'), url(../font/NotoSans-Regular.woff) format('woff'), url(../font/NotoSans-Regular.otf) format('opentype'); } @font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 500; src: url(../font/NotoSans-Medium.woff2) format('woff2'), url(../font/NotoSans-Medium.woff) format('woff'), url(../font/NotoSans-Medium.otf) format('opentype'); } @font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 700; src: url(../font/NotoSans-Bold.woff2) format('woff2'), url(../font/NotoSans-Bold.woff) format('woff'), url(../font/NotoSans-Bold.otf) format('opentype'); } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: local('Roboto'), local('Roboto-Regular'), url(../font/Roboto-Regular.woff) format('woff'); } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap; src: local('Roboto Medium'), local('Roboto-Medium'), url(../font/Roboto-Medium.woff) format('woff'); } /* font family style */ .font-roboto-regular { font-family:'Roboto'; font-weight:400; } .font-roboto-medium { font-family:'Roboto'; font-weight:500; } /* layout */ .wrap.chat-row { padding:0 21px; } .chat-view {padding:10px 21px;} .wrap {height:100%;} /* loading */ .chat-ing { position: relative; } .chat-ing > span { display: inline-block; position: absolute; top: 0; left:0; margin:0 auto; width: 8px; height: 8px; border-radius: 5px; background: #8677e0; color: #8677e0; -webkit-animation: mysecond 1s infinite linear; animation: mysecond 1s infinite linear; } .chat-ing .myfirst { left: -13px; width: 8px; height: 8px; border-radius: 5px; background-color: #8677e0; color: #8677e0; -webkit-animation: myfirst 1s infinite linear; animation: myfirst 1s infinite linear; } .chat-ing .mythird { left: 13px; width: 8px; height: 8px; border-radius: 5px; background-color: #8677e0; color: #8677e0; -webkit-animation: mythird 1s infinite linear; animation: mythird 1s infinite linear; } .progress_wrap {position:absolute; top:0; left:0; z-index:1210; display:flex; width:100%; height:100%; align-items: center; justify-content: center; background-color: rgba(0,0,0,0.2); } .progress_wrap > .inner { position: relative; } .progress_wrap > .inner > span { display: inline-block; position: absolute; top: 0; left:0; margin:0 auto; width: 16px; height: 16px; border-radius: 8px; background: #8677e0; color: #8677e0; -webkit-animation: mysecond 1s infinite linear; animation: mysecond 1s infinite linear; } .progress_wrap > .inner > .myfirst { left: -21px; width: 16px; height: 16px; border-radius: 8px; background-color: #8677e0; color: #8677e0; -webkit-animation: myfirst 1s infinite linear; animation: myfirst 1s infinite linear; } .progress_wrap > .inner > .mythird { left: 21px; width: 16px; height: 16px; border-radius: 8px; background-color: #8677e0; color: #8677e0; -webkit-animation: mythird 1s infinite linear; animation: mythird 1s infinite linear; } @-webkit-keyframes myfirst { 0% { transform: scale(1, 1); } 25% { transform: scale(1, 1.5); } 50% { transform: scale(1, 0.67); } 75% { transform: scale(1, 1); } 100% { transform: scale(1, 1); } } @keyframes myfirst { 0% { transform: scale(1, 1); } 25% { transform: scale(1, 1.5); } 50% { transform: scale(1, 0.67); } 75% { transform: scale(1, 1); } 100% { transform: scale(1, 1); } } @-webkit-keyframes mysecond { 0% { transform: scale(1, 1); } 25% { transform: scale(1, 1); } 50% { transform: scale(1, 1.5); } 75% { transform: scale(1, 1); } 100% { transform: scale(1, 1); } } @keyframes mysecond { 0% { transform: scale(1, 1); } 25% { transform: scale(1, 1); } 50% { transform: scale(1, 1.5); } 75% { transform: scale(1, 1); } 100% { transform: scale(1, 1); } } @-webkit-keyframes mythird { 0% { transform: scale(1, 1); } 25% { transform: scale(1, 1); } 50% { transform: scale(1, 0.67); } 75% { transform: scale(1, 1.5); } 100% { transform: scale(1, 1); } } @keyframes mythird { 0% { transform: scale(1, 1); } 25% { transform: scale(1, 1); } 50% { transform: scale(1, 0.67); } 75% { transform: scale(1, 1.5); } 100% { transform: scale(1, 1); } } /* splash */ .splash_wrap {position:relative; background:#fff url('../image/bg_splash.png') no-repeat right 0 bottom 6%; background-size:257px 358px; height:100%;} .splash_wrap .logo_WA {position:absolute; bottom:36px; left:31px;} .splash_wrap .logo_WA img {width:84px; height:27px;} .splash_wrap .logo_hana {position:absolute; bottom:3%; left:0; right:0; text-align:center;} .splash_wrap .logo_hana img {width:138px; height:19px;} .splash_wrap .ico_hi {position:absolute; top:10%; left:32px; width:40px; height:37px; background:url('../image/ico_splash.png') no-repeat; background-size:40px 37px; animation: bounce .5s ease-in forwards;} .splash_wrap h2 {position:absolute; top:18%; left:32px; font-size:36px; width:100%; font-weight:bold; color: transparent;} .splash_wrap .text_splash2 {opacity:0; position:absolute; top:26%; left:32px; font-size:18px; font-weight:400; color:#564a9d;} /* Interaction */ .text_splah1_1 {animation: blurFadeInOut 2.5s ease-in backwards; animation-delay: 0.2s;} .text_splah1_2 {animation: blurFadeIn 2.0s ease-in 1.1s forwards;} .splash_wrap .text_splash2 {animation: fadeInDown 1s forwards; animation-delay: 2.8s;} @keyframes bounce { 0% { top: 5% } 100% { top: 10% } } @keyframes blurFadeInOut{ 0%{ opacity: 0; text-shadow: 0px 0px 40px #6f5dd8; transform: scale(0.9); } 20%,75%{ opacity: 1; text-shadow: 0px 0px 1px #6f5dd8; transform: scale(1); } 100%{ opacity: 0; text-shadow: 0px 0px 50px #6f5dd8; transform: scale(0); color:#6f5dd8; } } @keyframes blurFadeIn{ 0%{ opacity: 0; text-shadow: 0px 0px 40px #6f5dd8; transform: scale(0.9); } 50%{ opacity: 0.5; text-shadow: 0px 0px 1px #6f5dd8; transform: scale(1); } 100%{ opacity: 1; text-shadow: 0px 0px 1px #6f5dd8; transform: scale(1); color:#6f5dd8; } } /* @keyframes fadeInBack{ 0%{ opacity: 0; transform: scale(0); } 50%{ opacity: 0.4; transform: scale(2); } 100%{ opacity: 0.2; transform: scale(5); } } */ @keyframes fadeInDown { 0% { opacity: 0; transform: translate3d(0, -100%, 0); } to { opacity: 1; transform: translateZ(0); } } /* 인접 간격 */ .list + .control-button-group, .list + .button_inner, .list + .text_basic, .text_basic + .button_inner, .text_basic + .button_inner_big, .text_basic + .button_inner_account, .button_inner_exchange + .button_inner, table + .control-button-group, table + .button_inner, table + .button_inner_big, table + .button_inner_account, .text_basic + table, .text_basic + .form_list, .text_basic + .list, table + .text_basic, table + .button_inner, table + .button_inner_big, .text_basic + .flickity-enabled {margin-top:20px !important;} .control-button-group + .button_link {margin-top:13px !important;} /* margin */ .mt0 {margin-top:0px !important;} .mt14 {margin-top:14px;} .mt16 {margin-top:16px;} .mt25 {margin-top:25px;} /* 개인화 선톡 */ /* [class^="chat_first_talk_type1"] {max-width:100% !important; padding:34px 23px 23px; line-height:1.4; letter-spacing:-1px; word-break:break-all; word-wrap:break-word; background-color:#f5f6fa; border-radius:10px; border:1px solid #e6e7ee; } [class^="chat_first_talk_type1"] { position:relative;} [class^="chat_first_talk_type1"] .text_talk1 {font-size:13px; color:#6f5dd8; } [class^="chat_first_talk_type1"] .text_talk2 {font-size:20px; color:#000; font-weight:bold; padding:12px 90px 17px 0;} [class^="chat_first_talk_type1"] .text_talk2 span {color:#6f5dd8; } [class^="chat_first_talk_type1"] .text_talk3 {font-size:14px; color:#333; } [class^="chat_first_talk_type1"] .text_talk4 {margin-top:13px; font-size:13px; color:#666;} [class^="chat_first_talk_type1"]:after {content:''; display:block; position:absolute; top:24px; right:21px; width:90px; height:90px; background-image:url('../image/ico_first_talk1.png'); background-repeat:no-repeat; background-size:90px 90px;} .chat_first_talk_type1_2:after {background-image:url('../image/ico_first_talk2.png'); } .chat_first_talk_type1_3:after {background-image:url('../image/ico_first_talk3.png'); } .chat_first_talk_type1_4:after {background-image:url('../image/ico_first_talk4.png'); } .chat_first_talk_type1_5:after {background-image:url('../image/ico_first_talk5.png'); } .chat_first_talk_type1_6:after {background-image:url('../image/ico_first_talk6.png'); } .chat_first_talk_type1_7:after {background-image:url('../image/ico_first_talk7.png'); } .chat_first_talk_type1_8:after {background-image:url('../image/ico_first_talk8.png'); } [class^="chat_first_talk_type2"] { line-height:1.4; word-break:break-all; word-wrap:break-word; letter-spacing:-1px} [class^="chat_first_talk_type2"] .subject {position:relative; padding:25px 21px 25px 110px; border-top-left-radius:10px; border-top-right-radius: 10px;} [class^="chat_first_talk_type2"] .subject:after {content:''; display:block; position:absolute; top:20px; left:21px; width:71px; height:71px; background-repeat:no-repeat; background-size:71px 71px;} [class^="chat_first_talk_type2"] .subject p {color:#333; font-size:12px;} [class^="chat_first_talk_type2"] .subject div {font-weight:bold; color:#000; font-size:17px;} [class^="chat_first_talk_type2"] .subject div span {color:#008eb7;} [class^="chat_first_talk_type2"] .description {padding:23px 22px; font-size:14px; color:#333; border-left:1px solid #e6e7ee; border-right:1px solid #e6e7ee;} [class^="chat_first_talk_type2"] .description.bor_bot {border-bottom:1px solid #e6e7ee; border-bottom-left-radius:10px; border-bottom-right-radius:10px;} [class^="chat_first_talk_type2"] .description p {margin-top:13px; font-size:13px; color:#666;} .chat_first_talk_type2_1 .subject {background:#dcf1f7;} .chat_first_talk_type2_1 .subject:after {background-image:url('../image/ico_first_talk1.png');} .chat_first_talk_type2_2 .subject {background:#faedd9;} .chat_first_talk_type2_2 .subject:after {background-image:url('../image/ico_first_talk2.png');} .chat_first_talk_type2_2 .subject div span {color:#ff6124;} .chat_first_talk_type2_3 .subject {background:#eeebfe;} .chat_first_talk_type2_3 .subject:after {background-image:url('../image/ico_first_talk3.png');} .chat_first_talk_type2_3 .subject div span {color:#624dd9;} .chat_first_talk_type2_4 .subject {background:#f6ecff;} .chat_first_talk_type2_4 .subject:after {background-image:url('../image/ico_first_talk4.png');} .chat_first_talk_type2_4 .subject div span {color:#9b42e5;} .chat_first_talk_type2_5 .subject {background:#fff9d7;} .chat_first_talk_type2_5 .subject:after {background-image:url('../image/ico_first_talk5.png');} .chat_first_talk_type2_5 .subject div span {color:#984b00;} .chat_first_talk_type2_6 .subject {background:#e0f5ee;} .chat_first_talk_type2_6 .subject:after {background-image:url('../image/ico_first_talk6.png');} .chat_first_talk_type2_6 .subject div span {color:#006873;} .chat_first_talk_type2_7 .subject {background:#ffecec;} .chat_first_talk_type2_7 .subject:after {background-image:url('../image/ico_first_talk7.png');} .chat_first_talk_type2_7 .subject div span {color:#ed3547;} .chat_first_talk_type2_8 .subject {background:#e7f1ff;} .chat_first_talk_type2_8 .subject:after {background-image:url('../image/ico_first_talk8.png');} .chat_first_talk_type2_8 .subject div span {color:#1a72f4;} */ .chat_first_talk_type1 { position:relative; max-width:100% !important; padding:34px 23px 23px; line-height:1.4; letter-spacing:-1px; word-break:break-all; word-wrap:break-word; background-color:#f5f6fa; border-radius:10px; border:1px solid #e6e7ee; } .chat_first_talk_type1 .text_talk1 {font-size:13px; color:#6f5dd8; } .chat_first_talk_type1 .text_talk2 {font-size:20px; color:#000; font-weight:bold; padding:12px 90px 17px 0;} .chat_first_talk_type1 .text_talk2 span {color:#6f5dd8; } .chat_first_talk_type1 .text_talk3 {font-size:14px; color:#333; } .chat_first_talk_type1 .text_talk4 {margin-top:13px; font-size:13px; color:#666;} .chat_first_talk_type1[class*="bg_icon"]:after {content:''; display:block; position:absolute; top:24px; right:21px; width:90px; height:90px; background-repeat:no-repeat; background-size:90px 90px;} .chat_first_talk_type1.bg_icon1:after {background-image:url('../image/ico_first_talk1.png');} .chat_first_talk_type1.bg_icon2:after {background-image:url('../image/ico_first_talk2.png'); } .chat_first_talk_type1.bg_icon3:after {background-image:url('../image/ico_first_talk3.png'); } .chat_first_talk_type1.bg_icon4:after {background-image:url('../image/ico_first_talk4.png'); } .chat_first_talk_type1.bg_icon5:after {background-image:url('../image/ico_first_talk5.png'); } .chat_first_talk_type1.bg_icon6:after {background-image:url('../image/ico_first_talk6.png'); } .chat_first_talk_type1.bg_icon7:after {background-image:url('../image/ico_first_talk7.png'); } .chat_first_talk_type1.bg_icon8:after {background-image:url('../image/ico_first_talk8.png'); } /* .chat_first_talk_type1.bg_icon9:after {background-image:url('../image/ico_first_talk9.png'); } .chat_first_talk_type1.bg_icon10:after {background-image:url('../image/ico_first_talk10.png'); } .chat_first_talk_type1.bg_icon11:after {background-image:url('../image/ico_first_talk11.png'); } .chat_first_talk_type1.bg_icon12:after {background-image:url('../image/ico_first_talk12.png'); } .chat_first_talk_type1.bg_icon13:after {background-image:url('../image/ico_first_talk13.png'); } .chat_first_talk_type1.bg_icon14:after {background-image:url('../image/ico_first_talk14.png'); } .chat_first_talk_type1.bg_icon15:after {background-image:url('../image/ico_first_talk15.png'); } .chat_first_talk_type1.bg_icon16:after {background-image:url('../image/ico_first_talk16.png'); } .chat_first_talk_type1.bg_icon17:after {background-image:url('../image/ico_first_talk17.png'); } .chat_first_talk_type1.bg_icon18:after {background-image:url('../image/ico_first_talk18.png'); } .chat_first_talk_type1.bg_icon19:after {background-image:url('../image/ico_first_talk19.png'); } .chat_first_talk_type1.bg_icon20:after {background-image:url('../image/ico_first_talk20.png'); } .chat_first_talk_type1.bg_icon21:after {background-image:url('../image/ico_first_talk21.png'); } .chat_first_talk_type1.bg_icon22:after {background-image:url('../image/ico_first_talk22.png'); } .chat_first_talk_type1.bg_icon23:after {background-image:url('../image/ico_first_talk23.png'); } .chat_first_talk_type1.bg_icon24:after {background-image:url('../image/ico_first_talk24.png'); } .chat_first_talk_type1.bg_icon25:after {background-image:url('../image/ico_first_talk25.png'); } */ .chat_first_talk_type2 { line-height:1.4; word-break:break-all; word-wrap:break-word; letter-spacing:-1px} .chat_first_talk_type2 .subject {position:relative; padding:25px 21px 25px 110px; border-top-left-radius:10px; border-top-right-radius: 10px;} .chat_first_talk_type2 .subject:after {content:''; display:block; position:absolute; top:20px; left:21px; width:71px; height:71px; background-repeat:no-repeat; background-size:71px 71px;} .chat_first_talk_type2 .subject p {color:#333; font-size:12px;} .chat_first_talk_type2 .subject div {font-weight:bold; color:#000; font-size:17px;} .chat_first_talk_type2 .subject div span {color:#008eb7;} .chat_first_talk_type2 .description {padding:23px 22px; font-size:14px; color:#333; border-left:1px solid #e6e7ee; border-right:1px solid #e6e7ee;} .chat_first_talk_type2 .description.bor_bot {border-bottom:1px solid #e6e7ee; border-bottom-left-radius:10px; border-bottom-right-radius:10px;} .chat_first_talk_type2 .description p {margin-top:13px; font-size:13px; color:#666;} .chat_first_talk_type2.bg_color1 .subject {background:#dcf1f7;} .chat_first_talk_type2.bg_color2 .subject {background:#faedd9;} .chat_first_talk_type2.bg_color2 .subject div span {color:#ff6124;} .chat_first_talk_type2.bg_color3 .subject {background:#eeebfe;} .chat_first_talk_type2.bg_color3 .subject div span {color:#624dd9;} .chat_first_talk_type2.bg_color4 .subject {background:#f6ecff;} .chat_first_talk_type2.bg_color4 .subject div span {color:#9b42e5;} .chat_first_talk_type2.bg_color5 .subject {background:#fff9d7;} .chat_first_talk_type2.bg_color5 .subject div span {color:#984b00;} .chat_first_talk_type2.bg_color6 .subject {background:#e0f5ee;} .chat_first_talk_type2.bg_color6 .subject div span {color:#006873;} .chat_first_talk_type2.bg_color7 .subject {background:#ffecec;} .chat_first_talk_type2.bg_color7 .subject div span {color:#ed3547;} .chat_first_talk_type2.bg_color8 .subject {background:#e7f1ff;} .chat_first_talk_type2.bg_color8 .subject div span {color:#1a72f4;} .chat_first_talk_type2.bg_icon1 .subject:after {background-image:url('../image/ico_first_talk1.png');} .chat_first_talk_type2.bg_icon2 .subject:after {background-image:url('../image/ico_first_talk2.png');} .chat_first_talk_type2.bg_icon3 .subject:after {background-image:url('../image/ico_first_talk3.png');} .chat_first_talk_type2.bg_icon4 .subject:after {background-image:url('../image/ico_first_talk4.png');} .chat_first_talk_type2.bg_icon5 .subject:after {background-image:url('../image/ico_first_talk5.png');} .chat_first_talk_type2.bg_icon6 .subject:after {background-image:url('../image/ico_first_talk6.png');} .chat_first_talk_type2.bg_icon7 .subject:after {background-image:url('../image/ico_first_talk7.png');} .chat_first_talk_type2.bg_icon8 .subject:after {background-image:url('../image/ico_first_talk8.png');} /* .chat_first_talk_type2.bg_icon9 .subject:after {background-image:url('../image/ico_first_talk9.png');} .chat_first_talk_type2.bg_icon10 .subject:after {background-image:url('../image/ico_first_talk10.png');} .chat_first_talk_type2.bg_icon11 .subject:after {background-image:url('../image/ico_first_talk11.png');} .chat_first_talk_type2.bg_icon12 .subject:after {background-image:url('../image/ico_first_talk12.png');} .chat_first_talk_type2.bg_icon13 .subject:after {background-image:url('../image/ico_first_talk13.png');} .chat_first_talk_type2.bg_icon14 .subject:after {background-image:url('../image/ico_first_talk14.png');} .chat_first_talk_type2.bg_icon15 .subject:after {background-image:url('../image/ico_first_talk15.png');} .chat_first_talk_type2.bg_icon16 .subject:after {background-image:url('../image/ico_first_talk16.png');} .chat_first_talk_type2.bg_icon17 .subject:after {background-image:url('../image/ico_first_talk17.png');} .chat_first_talk_type2.bg_icon18 .subject:after {background-image:url('../image/ico_first_talk18.png');} .chat_first_talk_type2.bg_icon19 .subject:after {background-image:url('../image/ico_first_talk19.png');} .chat_first_talk_type2.bg_icon20 .subject:after {background-image:url('../image/ico_first_talk20.png');} .chat_first_talk_type2.bg_icon21 .subject:after {background-image:url('../image/ico_first_talk21.png');} .chat_first_talk_type2.bg_icon22 .subject:after {background-image:url('../image/ico_first_talk22.png');} .chat_first_talk_type2.bg_icon23 .subject:after {background-image:url('../image/ico_first_talk23.png');} .chat_first_talk_type2.bg_icon24 .subject:after {background-image:url('../image/ico_first_talk24.png');} .chat_first_talk_type2.bg_icon25 .subject:after {background-image:url('../image/ico_first_talk25.png');} */ /* chat basic */ .chat-view {padding:10px 21px 0;} .chat-view .chat-row {margin-bottom:0;} .message-container>.control-text {display:none;} .message-group { margin-top:-40px; } .chat_box { display: inline-block; padding: 20px 21px; border-radius: 15px; font-size: 14px; background-color: #f5f6fa; } .chat_wrap { margin-bottom:80px; } .chat-received .received-profile { position:relative; z-index:1; left:0; bottom:0; margin:0 0 -15px -3px; margin-right:0 !important; display:inline-flex; align-items: center; width:48px; height:48px; background:linear-gradient(#b5abff, #888cf6); border-radius:50%; border:3px solid #ffffff; } .chat-received .received-profile img { margin:0 auto; width:17px; height:16px; position:relative; z-index:1; } .dialog-feedback .control-text { padding: 21px 23px !important; color: #333;} .chat-received .control-frame, .chat-received .control-text, .chat-received .control-html {padding-top: 30px;} .chat-received + .received-time{margin-top:-23px !important;} .group-container + .group-container > .received-bubble + .received-time {margin-top:-23px !important;} .chat_basic, .chat_result { max-width:100% !important; padding:20px 0; line-height:1.3; word-break:break-all; word-wrap:break-word; background-color:#f5f6fa; border-radius:10px; } .chat_basic .chat_subject { font-size:16px; color:#000000; font-weight:bold; } .chat_basic .chat_description { font-size:17px; color:#000; font-weight:700; } .chat_basic .chat_addition { margin:10px 0 0; font-size:13px; color:#666666; font-weight:400; } .chat_basic .received-profile {margin:-45px 0 0 -3px; } .chat_default .received-profile {margin:-30px 0 0 -3px;} .chat_default .received-profile:before, .chat_basic .received-profile:before {content:''; margin:0 auto; display:inline-block; width:17px; height:16px; background:url('../image/ico_porfile.png') no-repeat; background-size:17px 16px;} .chat_white {max-width:100% !important;margin-top:14px;} .chat-text-img {padding:0 21px;} .chat-text-img .text { font-size:16px; font-weight:bold; color:#000000; } .chat-text-img .text span { color:#7968dd; } .chat-text-img img { width:100%; border-radius:16px; } .chat-text-img .text + img, .chat-text-img img + .text { margin-top:26px; } .chat-row .chat-time { display:block; margin:8px 0; color:#757575; font-size:12px; margin-right:0 !important;} .chat-received .received-time-isolation {text-align: left !important;} .received-bubble + .received-time {margin-top:-23px !important;} .chat-received .received-bubble { margin:0 !important; background-color: #f5f6fa !important; } .text_basic {padding:0 21px; font-size:14px; color:#333; line-height:1.5; word-wrap: break-word; word-break: break-all; } .text_bullet1 { margin-top:16px; font-size:14px; color:#333; line-height:1.5; font-weight:700; } .text_bullet1:before { content:''; display:inline-block; vertical-align:middle; margin:0 6px 0 0; width:15px; height:14px; background:url('../image/txt_bullet1.png') no-repeat; background-size:15px 14px; } .text_bullet2 { margin-bottom:16px; font-size:14px; color:#333; line-height:1.5; font-weight:700; } .text_bullet2:before { content:''; display:inline-block; vertical-align:middle; margin:0 6px 0 0; width:11px; height:14px; background:url('../image/txt_bullet4.png') no-repeat; background-size:11px 14px; } .img_copy { display:inline-block; vertical-align:middle; margin-bottom:4px; width:14px; height:16px; background:url('../image/img_copy_screenshot1.png') no-repeat; background-size:14px 16px; } .text_rbox { margin:16px 0 0; padding:18px 14px; font-size:13px; color:#666; background:#fff; border-radius:10px; } .text_rbox p { margin:0 0 5px; font-weight:700; } .text_rbox p:before { content:''; display:inline-block; vertical-align:middle; margin:-4px 6px 0 0; width:16px; height:15px; background:url('../image/txt_bullet2.png') no-repeat; background-size:16px 15px; } .text_rbox p.caution:before { margin:-5px 6px 0 0; width:16px; height:12px; background:url('../image/txt_bullet3.png') no-repeat; background-size:16px 12px; } .chat-sending {margin:-30px 0;} .chat-sending .sending-bubble {margin-top:-30px; background: #fff; color:#5a49be; font-size:20px; padding:1em 0 0.3em 1.6em; text-align: right;word-break:break-all;} .chat-sending .sending-text {padding:30px 0 20px; min-width:135px;} .chat-sending .sending-text:before {content:'"'; display:inline-block; color:#5a49be; font-size:20px; padding-right:5px;} .chat-sending .sending-text:after {content:'"'; display:inline; color:#5a49be; font-size:20px; padding-left:5px;} .chat-date-divider {border-color:#fff;} .chat-date-divider .divider-content {font-size:12px; padding:4px 17px 5px; border-radius:16px;} .chat_default {margin:30px 0 4px; color:#000; font-size:24px; line-height:1.3;} .chat_default strong {color:#6f5dd8; box-shadow: inset 0 -7px 0 #ccfaff;} /* chat result */ /* .chat_result {border:1px solid #e7e9ee; border-radius:10px; background:#fff; padding:32px 24px 30px;} */ .chat_result strong {display:flex; align-items: center; justify-content: space-between; font-size:16px; color:#000; padding:0 21px;} .chat_result strong:after {content:''; display:block; margin:0 0 0 10px; width:39px; height:34px; background:url('../image/ico_chat_result.png') no-repeat; background-size:39px 34px;} .chat_result .text_rbox {margin:16px 21px 0;} /* chat button */ .chat_basic.chat_btn { border-bottom-left-radius: 0; border-bottom-right-radius:0; } .chat_result.chat_btn, [class^="chat_first_talk"].chat_btn { border-bottom-left-radius: 0; border-bottom-right-radius:0; border-bottom:0;} .control-button-group [class^="button_col"] { display:flex; background-color: #7968dd; border-radius:14px;} .control-button-group [class^="button_col"].link button:after { content:''; display: inline-block; vertical-align:middle; margin-left: 4px; width:7px; height:7px; border-top:1px solid #fff; border-right:1px solid #fff; transform:rotate(45deg); } /* .control-button-group .button_col2_1 button { width:calc(100%/2); } .control-button-group .button_col2_2 button:last-child { width:70%; } .control-button-group .button_col3 button { width:calc(100%/3); } */ .control-button-group .button_col2_2 button:first-child { width:30%; } .control-button-group .button_col2_1 button:first-child, .control-button-group .button_col2_2 button:first-child, .control-button-group .button_col3 button:first-child { border-bottom-right-radius:0; } .control-button-group .button_col2_2 button:first-child {color:#e6e4f4;} .control-button-group .button_col2_1 button:last-child, .control-button-group .button_col2_2 button:last-child, .control-button-group .button_col3 button:last-child { border-bottom-left-radius:0; } .control-button-group .button_col3 button:nth-child(2) { border-radius:0; } .control-button-group [class^="button_col"] button, .control-button-group [class^="button_col"] label { position:relative; width:100%; height:50px; line-height:2; font-size:16px; font-weight:400; color:#ffffff; background-color:#7968dd; border-bottom-left-radius:14px; border-bottom-right-radius: 14px; } .control-button-group [class^="button_col"] label {line-height:3; text-align:center;} .control-button-group [class^="button_col"] input {display:none; } .control-button-group [class^="button_col"] button:before , .control-button-group [class^="button_col"] label:before{ content:''; display:block; position:absolute; top:15px; left:0; width:1px; height:20px; background:#dfd9ff; } .control-button-group [class^="button_col"] button:first-child:before, .control-button-group [class^="button_col"] label:first-child:before { display:none; } .button_inner {padding:0 23px;} .button_inner button { width:100%; padding:10px 0; font-size:14px; color:#ffffff; font-weight:400; text-align:center; border-radius:10px; background-color:#7968dd; } .button_inner button.link:after { content:''; display:inline-block; margin-left:4px; width:7px; height:7px; border-top:1px solid #fff; border-right:1px solid #fff; transform:rotate(45deg); } .button_inner button + button {margin:8px 0 0;} .button_inner_big {padding:0 23px; } .button_inner_big button {width:100%; font-size:14px; text-align:center; border-radius:10px; border:1px solid #e6e7ee;} .button_inner_big button > p {padding:13px; font-size:14px; font-weight:bold; color:#6f5dd8; background-color:#fff; border-bottom:1px solid #e6e7ee; border-top-left-radius:10px; border-top-right-radius:10px;} .button_inner_big button > div {padding:13px; font-size:13px; color:#666; background-color:#fff; line-height:1.3; border-bottom-left-radius:10px; border-bottom-right-radius:10px;} .button_inner_big button + button {margin:20px 0 0;} .button_inner_account {padding:0 23px; } .button_inner_account button {position:relative; width:100%; background:#fff; border:1px solid #e7e9ee; border-radius:5px; padding:17px 14px; font-size:13px; color:#666; text-align:left;} .button_inner_account button p {font-size:16px; color:#000; margin-bottom:2px;} .button_inner_account button:after {content:''; position:absolute; top:50%; right:14px; margin-top:-7px; width:7px; height:7px; border-top:1px solid #666; border-right:1px solid #666; transform:rotate(135deg); } .button_inner_account button.one_acc:after {display:none; } .button_inner_exchange {padding:10px 23px 0; display:flex; justify-content: space-between; align-items: center;} .button_inner_exchange button {width:calc(100% - 20px ); height:100px; margin-right:10px; background:#fff; border:1px solid #e7e9ee; border-radius:16px; padding:15px 0; font-size:13px; line-height:1.3; color:#666; text-align:center;} .button_inner_exchange button > p {margin:5px 0 3px; font-size:14px; color:#000;} .button_inner_exchange button:last-child {margin-right:0;} .button_inner_exchange button:before {margin:0 auto;} .button_inner_calculate {padding:16px 0 0; display:flex;} .button_inner_calculate button {position:relative; z-index:1; flex:1 1 auto; width:100%; border:1px solid #e6e7ee; border-right:0; height:48px; text-align:center; font-size:14px; color:#888;} .button_inner_calculate button:first-child {border-top-left-radius:5px; border-bottom-left-radius:5px;} .button_inner_calculate button:last-child {border-right:1px solid #e6e7ee; border-top-right-radius:5px; border-bottom-right-radius:5px;} .button_inner_calculate button.is_active, .button_inner_calculate button:focus {border-color:#6f5dd8; color:#6f5dd8; font-weight:bold;} .button_inner_calculate button.is_active + button:before, .button_inner_calculate button:focus + button:before {content:''; display:block; position:absolute; z-index:2; top:-1px ; left:-1px; width:1px; height:inherit; background:#6f5dd8;} .button_flow { padding: 8px 0 0; } .button_flow button { display: inline-block; margin: 8px 8px 0 0; padding: 6px 13px 8px; border: 1px solid #d5dee9; background-color:#fff; font-size:14px; color:#807f8e; cursor: pointer; border-radius: 16px; line-height:1.3; } .button_flow button.link:after {content:''; display:inline-block; margin-left:4px; width:7px; height:7px; border-top:1px solid #6f6e7e; border-right:1px solid #6f6e7e; transform:rotate(45deg); } .button_flow button:active, .button_flow button:focus {border-color:#6f5dd8; background-color:#6f5dd8; color:#ffffff; } .button_flow button:active .arrow:after, .button_flow button:focus .arrow:after {border-color:#fff; } .button_link button, .button_link label { position:relative; display:block; width:100%; padding:10px; font-size:14px; text-align:left; color:#7968dd; border-radius:10px; border:1px solid #e6e4f4; background:#f6f5ff; } .button_link button:after, .button_link label:after { content:''; position:absolute; top:16px; right:10px; width:7px; height:7px; border-top:1px solid #6f5dd8; border-right:1px solid #6f5dd8; transform:rotate(45deg); } .button_link button + button { margin-top:8px; } .button_link input {display:none; } .button_bottom button {width:100%; padding:15px 0; font-size:16px; text-align:center; color:#fff; background:#6f5dd8; } .button_bottom button:disabled {background:#888; } /* table */ .table-small { margin:20px 23px 0; width:calc(100% - 46px); border-top:1px solid #8b8e98; } .table-small th, .table-small td { font-size:13px; color:#333333; font-weight:400; padding:10px; text-align:center; word-break: break-all; word-wrap: break-word;} .table-small th:last-child, .table-small td:last-child { border-right:0; } .table-small th.last_border, .table-small td.last_border {border-right:1px solid #e7e9ee;} .table-small th { border-right:1px solid #e7e9ee; border-bottom:1px solid #e7e9ee; background-color:#dddfe8; } .table-small td { border-right:1px solid #e7e9ee; border-bottom:1px solid #e7e9ee; background-color:#ffffff; } .table-basic { margin:20px 23px 0; width:calc(100% - 46px); border-top:1px solid #8b8e98; table-layout: fixed;} .table-basic th, .table-basic td { font-size:14px; font-weight:400; padding:14px 10px 13px; border-bottom:1px solid #e7e9ee; background-color:#ffffff;word-break: break-all; word-wrap: break-word; } .table-basic th {color:#757575; text-align:left; } .table-basic th strong {color:#333; font-weight:500;} .table-basic th strong + p, .table-basic td strong + p {font-size:13px; color:#666;} .table-basic td { color:#333333; text-align:right; } /* text style */ .text_style1 {color:#6f5dd8 !important; } .text_style2 {color:#de0327 !important; } /* 만기일 경과 */ .text_style3 {margin: 18px 0 0; padding:0 0 8px; font-size: 13px; color: #666; border-bottom:1px solid #8b8e98;} .text_style4 {color:#1a55ff !important; } /* 만기일 normal */ .text_style5 {color:#d43500 !important; } /* 만기일 도래 */ .text_due_date_style1 {color:#5573e2 !important;}/* 만기일 normal */ .text_due_date_style2 {color:#f17900 !important;}/* 만기일 도래 */ .text_due_date_style3 {color:#e53a4c !important;}/* 만기일 경과 */ .ico_up {display:inline-block; vertical-align:middle; margin:-4px 3px 0 0; width:7px; height:6px; background:url('../image/ico_up.png') no-repeat; background-size:7px 6px;} .ico_down {display:inline-block; vertical-align:middle; margin:-3px 3px 0 0; width:7px; height:6px; background:url('../image/ico_down.png') no-repeat; background-size:7px 6px;} .text_up {color:#ED1651 !important;} .text_down {color:#423CBD !important;} .error, .error:focus {border-color:#de0327 !important; } .text_count {display:inline-block; vertical-align:middle; margin:-4px 0 0 3px; height:20px; border-radius:16px; background:#8b8e98; font-size:12px; color:#fff; font-family: 'Roboto'; padding:5px 8px 0; line-height:13px; text-align:center; font-weight:500;} .text_right1 {margin:8px 23px -10px; text-align:right; font-size:13px; color:#666;} .text_right2 {padding:15px 0 10px; text-align:right; font-size:13px; color:#666; border-bottom:1px solid #8b8e98;} .text_wrap_style1 {margin:10px 23px 0; display:flex; justify-content: space-between; align-items:center; font-size:13px; color:#666;} .text_wrap_style1 span {color:#6f5dd8; text-align:right;} .title_exchagne1 {padding:15px 0 8px; margin-bottom:8px; color:#6f5dd8; font-size:15px; border-bottom:1px solid #e7e9ee;} .text_exchagne1 {margin:13px 23px; display:flex; align-items: center;} .text_exchagne1 .rate strong {display:block; margin-bottom:2px; font-size:15px; color:#333;} .text_exchagne1 .rate {font-size:12px; color:#757575;} .text_exchagne2 {margin:13px 23px; display:flex; justify-content:center; align-items: center; min-height:103px;} .text_exchagne2 div {min-height:inherit;padding:16px 0 0; width:calc(100% - 26px); background:#fff; border-radius:16px; text-align:center; font-size:13px; color:#666;} .text_exchagne2 div [class^="icon_exchange"]:before {margin:0 auto;} .text_exchagne2 div strong {display:block; padding:7px 0 2px; font-size:14px; color:#000;} .text_exchagne2 > p {padding:0 9px;} .text_exchagne2 > p:before {content:''; display:block; margin:-4px auto 0; width: 7px; height: 7px; border-top: 1px solid #6f6e7e; border-right: 1px solid #6f6e7e; transform: rotate(45deg);} .text_exchagne3 {margin:0 23px; display:flex; justify-content:space-between; align-items: center;} .text_exchagne3 [class^="icon_exchange"] {font-size:15px; color:#000; } .text_exchagne3 .currency {font-size:15px; color:#6f5dd8; text-align:right;} .text_exchagne3 .currency > p {font-size:12px;} .text_exchagne3 .currency > p.up {color:#ED1651;} .text_exchagne3 .currency > p.down {color:#423CBD;} .text_exchagne3 .currency > p.normal {color:#333;} .min_height1 strong {display:block; min-height:18px;} .min_height1 p {min-height:17px;} .min_height1 th, .min_height1 td {height:62px;} .min_height1 th strong, .min_height1 th p {min-height:auto;} /* Chat input search */ .chat_input_search_wrap { position:fixed; bottom:0; left:0; display:flex; width:100%; min-height:60px; border-top-left-radius:10px; border-top-right-radius:10px; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px; } .chat_input_search_wrap:after { content:''; display:block; position:absolute; top: 0.6rem; right: 1rem; width: 8.725rem; height: 8.725rem; background-color: lightblue; border-radius: 1rem; clip-path: polygon(0% 0%, 100% 100%, 100% 0%); position: absolute; transform: rotate(-45deg); box-shadow: rgba(167, 175, 198, 0.22) 0px 0px 10px 0px, rgba(167, 175, 198, 0.26%) 0px 0px 10px 0px; } .chat-input-container + div { z-index:1; } .chat-input { height:48px; border-top:0; } .chat-input-container { position:fixed; bottom:0; left:0; right:0; z-index:1; width:100%; overflow-y:unset !important; } .chat-input { position:relative; z-index:1; display:flex; align-items:center; overflow:unset; width:100%; min-height:48px; padding:6px 0; border-top-left-radius:16px; border-top-right-radius:16px; box-shadow: rgba(167, 175, 198, 0.18) 0px 0px 13px 0px, rgba(167, 175, 198, 0.18) 0px 0px 12px 0px; } .input-container {margin:0 0 0 4px; width:calc(100% - 35px); } .input-container input { width:100%; border:0; font-size:14px; color:#757575; background: #f5f6fa; border: 1px solid #e7e9ee; border-radius: 24px 0 0 24px; border-right: 0;} .input-container input:focus {border-color:transparent !important;} .chat-input > div:first-child {margin:0 0 0 4px !important; padding:0 !important; background:#fff;border-color:#fff;} .input-button-container {display:flex !important; align-items:center; justify-content: center; margin:0 14px 0 0 !important; padding:0 !important; min-height:36px; background: #f5f6fa; border: 1px solid #e7e9ee; border-radius: 0 24px 24px 0; border-left: 0;} .livechat-image-button>div>div{width:25px !important; height:25px !important; line-height:25px !important; margin:5px 5px 5px 0!important;} .livechat-end-button>div{width:28px !important; height:28px !important; line-height:28px !important;} .input-button-container .send-button { margin:0 10px 0 0; position:relative; z-index:3; width:18px; height:18px; } .chat-input-menu-button.menu-close, .chat-input-menu-button.menu-open {width:32px; height: 32px; } .chat-input-menu-button.menu-open i, .chat-input-menu-button.menu-close i {display:none;} .chat-input-menu-button.menu-open div, .chat-input-menu-button.menu-close div {margin:0 0 0 5px !important;background-color:#fff !important;} .chat-input-menu-button.menu-close > div:before, .chat-input-menu-button.menu-close > div:after { position: absolute; top:14px; left: 20px; content:' '; height: 18px; width: 2px; background-color: #6f6e7e; } .chat-input-menu-button.menu-close > div:before { transform: rotate(90deg); } .chat-input-menu-button.menu-close > div:after { transform: rotate(-180deg); } .chat-input-menu-button.menu-open > div:before, .chat-input-menu-button.menu-open > div:after { position: absolute; top:14px; left: 20px; content:' '; height: 18px; width: 2px; background-color: #6f6e7e; } .chat-input-menu-button.menu-open > div:before { transform: rotate(45deg); } .chat-input-menu-button.menu-open > div:after { transform: rotate(-45deg); } .chat-input-disabled {background-color:#fff;} .chat-input-disabled .input-button-container {background-color:#dddee4;} .chat-input-disabled .input-container {background-color:#dddee4; color:#888; border-radius: 24px 0 0 24px;} .input-container input:disabled, .input-container input:disabled::-webkit-input-placeholder { background-color: #dddee4; color:#888;} .input-container input::-webkit-input-placeholder { color:#757575; } .chat-menu-container {position:relative; z-index:2; border-top:0 !important;} .chat-menu-container ul {display:flex; flex-wrap: wrap;} .chat-menu-container ul li {text-align:center; min-height:115px; width:calc(100%/3); border-top:1px solid #e7e9ee; border-right:1px solid #e7e9ee; font-size:14px; color:#000; line-height:1.2;} .chat-menu-container ul li:nth-child(3n) {border-right:0; } .chat-menu-container ul li > p {width:30px; height:30px; margin:22px auto 6px; padding:5px 0 0; background-color:#f6f5ff; border-radius:6px; } .chat-menu-container ul li p:before {content:''; display:block; width:30px; height:20px; background-color:#f6f5ff; border-radius:6px; background-image:url('../image/ico_sprite_bottom_menu_1.png'); background-repeat: no-repeat; background-size:20px auto; background-position:50% 0;} /* [220779] 2025-10-28 수정-이미지 파일명 변경 */ .chat-menu-container ul li:nth-child(2) p:before {background-position:50% -18px;} .chat-menu-container ul li:nth-child(3) p:before {background-position:50% -36px;} .chat-menu-container ul li:nth-child(4) p:before {background-position:50% -75px;height:18px} /* [220779] 2025-10-28 수정 */ .chat-menu-container ul li:nth-child(5) p.login:before {height:18px; background-position:50% -75px;} .chat-menu-container ul li:nth-child(5) p:before {background-position:50% -112px;} .chat-menu-container ul li:nth-child(6) p:before {background-position:50% -149px;} /* [220779] 2025-10-28 수정 */ /* layout */ /* .container { padding:56px 0 70px;} */ .container { padding:0px 0px 0px 0px; } .container.hi_swiper_wrap { padding:0; height:100%;} header { position:fixed; top:0; left:0; z-index:2; min-height:56px; width:100%; background:#fff; text-align:center; border-bottom:1px solid #e7e9ee;} header h1 { margin:16px 0 0; font-size:16px; color:#333; } .all_menu_btn { position:absolute; top:12px; left:0; width:50px; height:36px; } .all_menu_btn a { position:relative; left:0; display:block; width:100%; height:100%; } .all_menu_btn a em { position:absolute; top:15px; left:24px; width:22px; height:2px; border-radius:5px; background:#333; } .all_menu_btn a:before, .all_menu_btn a:after { content:''; display:block; position:absolute; left:24px; width:22px; height:2px; border-radius:5px; background:#333; } .all_menu_btn a:before { top:8px; } .all_menu_btn a:after { top:22px; } .back_btn { position:absolute; top:11px; left:14px; width:30px; height:32px; } .back_btn a { position:relative; display:block; width:30px; height:32px; } .back_btn a:after { content:''; position:absolute; top:7px; left:10px; width:14px; height:14px; border-top:2px solid #333; border-right:2px solid #333; transform:rotate(225deg); } .side_btn_area { position:absolute; top:18px; right:10px; display:flex; } .side_btn_area .chat_close_btn { position:relative; display:block; width:19px; height: 19px; } .side_btn_area .chat_close_btn:before, .side_btn_area .chat_close_btn:after { position: absolute; top:-2px; left: 11px; content:' '; height: 23px; width: 2px; background-color: #333; } .side_btn_area .chat_close_btn:before { transform: rotate(45deg); } .side_btn_area .chat_close_btn:after { transform: rotate(-45deg); } .side_btn_area .call_bot_btn { display:block; margin-right:26px; width:26px; height:21px; background:url('../image/ico_call_bot.png') no-repeat; background-size:26px 21px; } /* [220779] 2025-11-07 수정 */ .side_btn_area .chat_bot_btn { display:block; margin-right:12px; width:19px; height:19px; background:url('../image/ico_hi_bot.png') no-repeat 0 50%; background-size:18px 16px; } .menu_bg { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); position: absolute; top: 0; z-index:100; display: none; } .sidebar_menu { display: none; overflow-y:auto; width: 100%; height: 100%; background: #fff; position: absolute; top: 0; left: -100%; z-index:100; } .sidebar_menu .menu_header { position:fixed; z-index:2; top:0; width:100%; background:#fff; min-height:56px; text-align:center; border-bottom:1px solid #e7e9ee; } .sidebar_menu .menu_header h3 { padding-top:15px; font-size:16px; color:#333; } .sidebar_close_btn { position:absolute; top:16px; left:24px; } .sidebar_close_btn a { position:relative; display:block; width:19px; height: 19px; } .sidebar_close_btn a:before, .sidebar_close_btn a:after { position: absolute; top:-2px; left: 9px; content:' '; height: 23px; width: 2px; background-color: #333; } .sidebar_close_btn a:before { transform: rotate(45deg); } .sidebar_close_btn a:after { transform: rotate(-45deg); } /* 230405 수정[s] */ .tooltip-call {opacity:0; width:48px; white-space:nowrap; color:#fff; font-size:10px; background-size:100% auto; display:inline-flex; align-items:center; justify-content:center; transform:translateY(0px); height:0; line-height:1; position:absolute; top:26px; border-radius:5px; right:calc(50% - 9px); transition:all 0.1.5s ease-in-out; background:#272b43;} /* //230405 수정[e] */ .tooltip-call:after{position:absolute; top:-3px; left:calc(50% - 3px); width:6px; height:4px; content:''; background:url('../image/ico_h_tooltip.png') no-repeat; background-size:100% 100%;} .call_bot_btn.is-load .tooltip-call {height:15px; transform:translateY(0px); animation:chatHeight .8s; opacity:1;} .call_bot_btn.is-top .tooltip-call {animation:chatDisappear .3s; opacity:0;} @keyframes chatHeight { 0% {height:0; opacity:0;} 18% {opacity:1; height:15px;} 20% {transform:translateY(3px);} 35% {transform:translateY(0);} 50% {transform:translateY(3px);} 65% {transform:translateY(0px);} } @keyframes chatDisappear { 0% {transform:translateY(0); opacity:1;} 100%{width:0; right:calc(50% + 15px); opacity:0;} } .profile_area {margin-top:56px; padding:30px 24px; background:#f6f5ff; border-bottom:12px solid #e7e9ee; } .info_area { display:flex; justify-content:space-between; align-items:center; } .info_area h4 { font-size:20px; color:#000; font-weight:400; line-height:1.3; letter-spacing:-0.09em; } .info_area h4 strong { color:#6f5dd8; } .info_area .level_sec { position:relative; } .info_area .level_sec .thumb { position:relative; left:0; bottom:0; display:inline-flex; align-items: center; width:56px; height:56px; background:linear-gradient(#b5abff, #888cf6); border-radius:50%; } .info_area .level_sec .thumb img { margin:0 auto; width:23px; height:20px; position:relative; z-index:1; } .info_area .level_sec .txt_level { position:absolute; left:0; bottom:-8px; min-width: 44px; margin:0 6px; height:16px; font-size:10px; color:#a15000; font-family:'Roboto'; font-weight:600; text-align:center; border-radius:16px; padding:0; background:#feb54e; line-height:1.5; } .hi_level_area { margin-top:7px; } .hi_level_area button { height:24px; color:#333; font-size:12px; } .hi_level_area button:focus {border-color: transparent !important; } .hi_level_area button:after { content:''; display: inline-block; vertical-align:middle; margin-left:6px; width:5px; height:5px; border-top:1px solid #6f5dd8; border-right:1px solid #6f5dd8; transition: transform .2s ease-out; } .hi_level_area button.close:after { margin-top:-5px; transform:rotate(135deg); } .hi_level_area button.open:after { transform:rotate(315deg); } .hi_level_area .level_content {position:relative; margin-top:15px; padding:18px 0 0; background:#7563da url('../image/bg_hi_level.png') no-repeat 100% 0; height:192px; background-size:212px 192px; border-radius:15px; } .hi_level_area .level_content h4 { text-align:center; font-size:14px; color:#fff; font-weight:400; } .hi_level_area .level_content .level_list { margin:18px 24px 5px; display:flex; justify-content: space-between; } .hi_level_area .level_content .level_list li { width:calc(100%/5 - 7px); margin-right:7px; } .hi_level_area .level_content .level_list li:last-child { margin-right:0; } .hi_level_area .level_content .level_list li .step { display:inline-flex; justify-content: center; align-items:center; width:100%; height:50px; border-radius:10px; font-size:12px; font-family:'Roboto'; font-weight:700; color:#fff; border:1px dashed #b3ade2 } .hi_level_area .level_content .level_list li .step.is_active { border:0; background:#feb54e url('../image/bg_step_active.png') no-repeat; background-size:25px 25px; color:#a15000;} .hi_level_area .level_content .level_list li > p { margin-top:8px; font-size:12px; color:#fff; text-align:center; } .hi_level_area .level_content .txt_desp {position:absolute; bottom:0; left:0; width:100%; padding:13px 24px; font-size:12px; color:#dddfe8; line-height:1.3; letter-spacing:-1px; background:#6250c9; border-bottom-left-radius:15px; border-bottom-right-radius:15px; } .menu_list { margin-top:13px; } .menu_list li { border-bottom:1px solid #e7e9ee; } .menu_list li a { position:relative; display:block; padding:13px 24px; color:#333; font-size:16px; } .menu_list li a:before { content:''; display:inline-block; vertical-align: middle; margin:-3px 10px 0 0; width:23px; height:22px; background-image:url('../image/ico_sprite_sidebar_menu.png'); background-repeat:no-repeat; background-size:100% 147px; } .menu_list li.menu2 a:before { background-position:0 -25px; } .menu_list li.menu3 a:before { background-position:0 -50px; } .menu_list li.menu4 a:before { background-position:0 -75px; } .menu_list li.menu5 a:before { background-position:0 -100px; } .menu_list li.menu6 a:before { background-position:0 -125px; } .menu_list li a:after { content:''; display:block; position:absolute; top:50%; right:24px; margin-top:-4px; width:7px; height:7px; border-top:1px solid #6f5dd8; border-right:1px solid #6f5dd8; transform:rotate(45deg); } /* accordion */ .chat_accordion {padding:0 0 8px;} .chat_accordion details { padding-bottom:23px; position:relative; font-size:14px; color:#333333; line-height: 1.5; word-wrap: break-word; word-break: keep-all; } .chat_accordion details[open] { min-height:100%; } .chat_accordion details summary { list-style:none; cursor:pointer; padding:0 23px;} .chat_accordion details summary::-webkit-details-marker { display:none;} .chat_accordion details summary:before { content:'더보기'; margin:0 0 -8px; display:block; font-size:13px; color:#6f6e7e; text-align:center; position:absolute; bottom:0; left:-13px; background:url('../image/ico_accordion.png') no-repeat 60% 6px; width:100%; height:20px; background-size:11px 6px; } .chat_accordion details[open] summary:before {content:'접기'; background:url('../image/ico_accordion_open.png') no-repeat 59% 6px; background-size:11px 6px;} .chat_accordion details summary:after {content:''; display:block; position:absolute; bottom:0; left:0; margin:0 0 24px; width:100%; background:linear-gradient(rgba(245,246,250, 0.3), rgba(245,246,250, 0.5),rgba(245,246,250, 0.75),rgba(245,246,250, 1)); height:20px;} .chat_accordion details[open] summary:after {display:none;} .text_rbox .chat_accordion {padding:0;} .text_rbox .chat_accordion details { font-size:13px; color:#666; line-height: 1.5; padding-bottom:25px;} .text_rbox .chat_accordion details summary { padding:0;} .text_rbox .chat_accordion details summary:before {content:''; margin:0; left:0; background:url('../image/ico_accordion_s.png') no-repeat 50% 0; width:100%; height:10px; background-size:18px 10px; } .text_rbox .chat_accordion details summary:after {display:none;} .text_rbox .chat_accordion details[open] summary:before { transform: rotate(180deg);} /* Modal Bottomsheet */ .modal table {margin:20px 0 0 !important; width:100% !important;} .modal_wrap { visibility: hidden; display:flex; position: fixed; left:0; top:0; width:100%; height:100%; z-index: 1100; } .modal { position: relative; z-index: 1001; display:flex; flex-direction: column; background-color: #fff; overflow: hidden; } .modal_header { position: relative; z-index: 100; width:100%; text-align:center;} .modal_wrap .modal_bottomsheet { transform: translateY(110%); transition: none; } .modal_wrap .modal_password { height:42.7rem; background:#f6f5ff; } .modal .modal_close_btn { position:absolute; z-index: 101; top:3rem; right:1.2rem; display:block; width:2.6rem; height: 2rem; } .modal .modal_close_btn:before, .modal .modal_close_btn:after { position: absolute; top:0px; left: 11px; content:' '; height: 1.9rem; width: 0.2rem; background-color: #333; } .modal .modal_close_btn:before { transform: rotate(45deg); } .modal .modal_close_btn:after { transform: rotate(-45deg); } .modal_bottomsheet { position:relative; display: flex; flex-direction: column; width:100%; max-height:calc(100% - 96px); max-height:calc(100% - constant(safe-area-inset-bottom) - constant(safe-area-inset-top) - 96px); max-height:calc(100% - env(safe-area-inset-bottom) - env(safe-area-inset-top) - 96px); margin-top:auto; padding-bottom:var(--safeBottom); border-radius:25px 25px 0 0; box-shadow: rgba(167, 175, 198, 0.18) 0px 0px 13px 0px, rgba(167, 175, 198, 0.18) 0px 0px 12px 0px;} .modal_bottomsheet .modal_header { height:auto; padding:3rem 2.4rem; } .modal_password .modal_header { height:4rem; } .modal_bottomsheet .modal_tit { font-size:17px; line-height:22px; color:#000; font-weight:700; word-break: keep-all; word-wrap: break-word; } .modal_bottomsheet .modal_desp {margin-top:7px; font-size:14px; } .modal_bottomsheet .modal_content { flex:0 1 auto; height:100%; overflow-x:hidden; overflow:auto; padding:0 2.4rem 1.8rem; } .modal_bottomsheet .modal_content .button_inner {padding:0;} .is_dimmed { overflow: hidden !important; touch-action:none !important; position: fixed; left:0; top:0; width: 100%; height: 100%; } .dimmer { visibility: hidden; opacity: 0; transition: all 0.2s ease; display: block; position: fixed; left: 0; top: 0; z-index: 1000; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); -ms-touch-action: none; touch-action: none; } .is_visible .dimmer, .is_visible.dimmer { visibility: visible; } .is_active .dimmer, .is_active.dimmer { opacity: 1; } .is_active .modal_bottomsheet + .dimmer { opacity: 0.01; } .is_active .modal_bottomsheet + .dimmer.bg { opacity: 0.4; } .modal_wrap.is_visible { visibility: visible; pointer-events: auto; } .modal_wrap.is_active .modal_bottomsheet { transform: translateY(0%); transition: all 0.5s ease;} .modal_animation {animation-name:bottomsheetStart; animation-duration: 0.2s; animation-timing-function: ease;} .modal_animation_end {animation-name:bottomsheetEnd; animation-duration: 0.2s; animation-timing-function: ease;} @keyframes bottomsheetStart { 0% { transform: translateY(110%) } 100% { transform: translateY(0%); } } @keyframes bottomsheetEnd { 0% { transform: translateY(0%) } 100% { transform: translateY(110%); } } .picker_list {display:flex; height:152px;} .picker_list .picker_item {flex:1 1 auto; font-size:20px; color:#9d9ba3;} .picker_list .picker_item .ui_swiper, .picker_list .picker_item .swiper, .picker_list .picker_item .swiper-container {height:100%;} .picker_list .picker_item .swiper-container::before {content: ''; display: block; position: absolute; left: 0; top: 50%; z-index: 10; width: 100%; height:63px; border-radius:6px; background: #f5f6fa; -webkit-transform: translateY(-50%); transform: translateY(-50%);} .ui_swiper.is_swiper {opacity:1;} .ui_swiper .swiper-container {z-index:0;} .picker_list > div:first-child {margin-right:19px;} .picker_list .picker_item .swiper-wrapper {flex-direction: column; position: relative; z-index: 11;} .picker_list .picker_item .swiper-slide {display:flex; align-items:center; justify-content:center; height:53px; color:#9d9ba3; font-size:20px;} .picker_list .picker_item .swiper-slide-active {height:63px; font-size:24px; color:#333;} /* Fullpopup */ .modal_fullpopup { width:100%; height:100%; padding:0; margin:0; border-radius:0; box-shadow:none; padding-top:var(--safeTop); padding-bottom:var(--safeBottom); } .modal_fullpopup .modal_header { position:relative; padding:0; height:56px; text-align:center; border-bottom:1px solid #e7e9ee; } .modal_fullpopup .modal_header h3 { line-height:4.9rem; font-size:16px; color:#333; } .modal_fullpopup .modal_close_btn { position:relative; display:block; right:0; width:19px; height: 19px; } .modal_fullpopup .modal_close_btn { position:absolute; top:17px; left:24px; } .modal_fullpopup .modal_close_btn:before, .modal_fullpopup .modal_close_btn:after { position: absolute; top:-2px; left: 8px; content:' '; height: 23px; width: 2px; background-color: #333; } .modal_fullpopup .modal_close_btn:before { transform: rotate(45deg); } .modal_fullpopup .modal_close_btn:after { transform: rotate(-45deg); } .modal_fullpopup .modal_content { flex:0 1 auto; height:100%; overflow-x:hidden; overflow:auto; padding:0 2.4rem 1.8rem; } /* alert, dimmed */ .modal_alert, .modal_dimmed { width:90%; padding:0 0 1.8rem; margin:auto; border-radius:16px; opacity: 0; -webkit-transform: scale(0.75); transform: scale(0.75); transition: all 0.2s ease; } .modal_wrap.is_active>.modal_alert, .modal_wrap.is_active>.modal_dimmed { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .modal_alert .modal_close_btn, .modal_dimmed .modal_close_btn { top:2rem; } .modal_alert .modal_header { padding:0 !important; margin-bottom:8px; border-bottom:0; letter-spacing: -0.2px; height:4rem; } .modal_dimmed .modal_header { padding:0 !important; margin-bottom:8px; border-bottom:0; letter-spacing: -0.2px; height:6rem; } .modal_dimmed .modal_header h4 { padding:1.6rem 0 0; font-size:18px; color:#000; text-align:center; } .modal_alert .modal_content { padding:0 0 26px !important; text-align:center; } .modal_dimmed .modal_content { padding:24px !important; max-height:40rem; font-size:16px; color:#333; line-height:1.5; } .modal_alert .modal_content .msg { font-size:16px; color:#333; line-height:1.3; } .modal_footer { display:flex; height:56px; margin-bottom:-18px; } .modal_footer.mar1 {margin-bottom:0; } .modal_footer .button_gray { width:100%; background:#888; color:#fff; font-size:16px; border-radius:0;} .modal_footer.button_col2 button:first-child { width:30%; } .modal_footer.button_col2 button:last-child { width:70%; } .modal_footer button { position:relative; width:100%; height:56px; line-height:2; font-size:16px; font-weight:400; color:#ffffff; background-color:#7968dd; border-bottom-left-radius:16px; border-bottom-right-radius: 16px; } .modal_footer button:before { content:''; display:block; position:absolute; top:13px; left:0; width:1px; height:29px; background:#dfd9ff; } .modal_footer button:first-child:before { display:none; } .modal_footer.button_col2 button:first-child { border-bottom-right-radius:0; } .modal_footer.button_col2 button:first-child { font-weight:200; } .modal_footer.button_col2 button:last-child { border-bottom-left-radius:0; } /* tab */ .tab { display:flex; height:3.2rem; margin:24px 0 -30px; border-bottom:2px solid #e7e9ee;} .tab.type1 li {flex:1 1 auto; -webkit-box-flex:1; width:100%; height:100%; padding:0; } .tab.type1 li:first-child { padding:0 0.5rem 0 0; } .tab.type1 li a { position:relative; display:block; width:100%; height:100%; padding-top:6px; font-size:15px; color:#888; text-align:center; letter-spacing:-1px;} .tab.type1 li.is_active a { font-weight:700; color:#6f5dd8; } .tab.type1 li.is_active a:after { content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px; background-color:#6f5dd8; } .tab_cont { display: none; padding: 10px 0 8px;} .tab_cont.is_active { display: block; } /* form */ .modal_content .form_list {margin:13px 0 0;} .form_list {margin:0 23px;} .form_list select + input, .form_list input + .input_clear, .form_list .input_clear + .input_clear, .form_list .button_inner_account + input, .form_list .button_inner_account + .input_clear, .form_list input + input {margin:8px 0 0;} .form_list li > p {margin:18px 0 8px; font-size:13px; color:#666;} .form_list li > p.mar1 {margin:13px 0 8px;} .form_list li > p.mar2 {margin:8px 0 18px;} .form_list li .button_inner_account {padding:0;} .form_list li .button_inner_account button, .form_list li .button_inner_account .info {padding:14px 14px 15px; font-size:14px;} .form_list .is_active { border-color:#6f5dd8; } .form_list .text_wrap_style1 {background:#ebecf1; margin: 0; padding:0 14px 15px; align-items:flex-end; font-size:12px; color:#666; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;} .form_list .account {margin:10px 0px 0; } .form_list .account .button_inner_account button:disabled, .form_list .account .button_inner_account button:read-only, .form_list .account .button_inner_account .info {border-color:#ebecf1; background:#ebecf1; color:#757575; border-radius:5px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;} .form_list .account .button_inner_account button:read-only:focus {border-color:#ebecf1 !important; } .form_list .account .button_inner_account button:disabled p, .form_list .account .button_inner_account button:read-only p, .form_list .account .button_inner_account .info p {color:#757575;} .form_list .account .button_inner_account button:disabled:after, .form_list .account .button_inner_account button:read-only:after {display:none;} .form_wrap1 {display:flex;} .form_wrap1 > * {width:calc(100%/2 - 5px); } .form_wrap1 > *:first-child {margin-right:9px;} .input_clear {position: relative;} .input_clear input {padding:0 40px 0 13px;} .input_clear button {position: absolute; top:0; right:0px; height:48px; width:40px; background: transparent;visibility: hidden;} .input_clear button:before {content:''; display:block; margin:0 auto; height:18px; width:18px; background:url('../image/ico_input_clear.png') no-repeat; background-size:18px 18px;} .input_clear button.visibile {visibility: visible;} .input_clear button.hidden {visibility: hidden;} /* list */ .list {background:#fff; } .list li { border-bottom:1px solid #e7e9ee; } .list li a {display:block; font-size:14px; line-height:1.3; padding:14px 10px 13px;} .list li input {display:none;} .text_style3 + .list.type1 li a {font-size:14px; color:#333;} .list.type1 li strong { display:block; font-size:14px; color:#333; text-overflow: ellipsis; white-space:nowrap; overflow:hidden;} .list.type1 li a {position:relative; font-size:13px;padding:14px 30px 13px 10px;} .list.type1 li a:after { content:''; position:absolute; top:50%; right:14px; margin-top:-4px; display:block; width:7px; height:7px; border-top:1px solid #6f5dd8; border-right:1px solid #6f5dd8; transform:rotate(45deg); } .list.type2 {display:flex; flex-wrap: wrap;} .list.type2 li {width:calc(100%/2); padding:4px 0; border-bottom:0; } .list.type2 li a {padding:4px 0 4px 14px;} .list.type3 a {display:flex; justify-content:flex-start; align-items:center;} .list.type3 a > div {width:50%; font-size:14px; color:#666;} .list.wid_100 a div {width:100%;} .list.type3 a > div strong {display:block; font-size:14px; color:#333; font-weight:500;} .list.type3 a > div > span {display:block; font-size:13px; color:#666;} .list.type3 a > p {width:50%; text-align:right; font-size:14px; color:#333;} .list.type3 a > p strong {font-family: 'Roboto';} .list.type3 a > p > span {display:block; font-size:13px; color:#666; letter-spacing:-1px;} .list.type3 a[class^="icon_bank"]:before {margin-right:0; width:35px;} .list.type3 a[class^="icon_exchange"]:before {margin-right:0; width:40px;} .list.type4 li a {min-height:62px;} .list.type4 a {display:flex; justify-content:space-between; align-items:center;} .list.type4 a .account_info {width:50%; font-size:13px; color:#666;} .list.type4 a .account_info strong {display:block; font-weight:500; font-size:14px; color:#333; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .list.type4 a .amount {width:50%; text-align:right; font-size:14px;color:#333;} .list.type4 a .amount.minus {color:#333;} .list.type4 a .amount p {font-size:13px; color:#666;} .list.type4 + .button_link {margin-top:14px;} .list.type5 li { display:block; padding:14px 30px 13px 10px;; font-size:14px; color:#333; text-overflow: ellipsis; white-space:nowrap; overflow:hidden;} /* .list.type5 li a {position:relative; font-size:13px;padding:14px 30px 13px 10px;} */ /* .list.type5 li a:after { content:''; position:absolute; top:50%; right:14px; margin-top:-4px; display:block; width:7px; height:7px; border-top:1px solid #6f5dd8; border-right:1px solid #6f5dd8; transform:rotate(45deg); } */ .chat_basic .list.type4 {margin:0 23px; border-top:1px solid #8b8e98;} .list_calculate {margin:3rem -2.4rem -3rem; background-color:#f7f8fa; padding:3rem 2.4rem;} .list_calculate ul {margin:0 1.3rem 0.8rem;} .list_calculate ul li {padding:0 0 1rem; display:flex; justify-content: space-between; align-items: center; font-size:13px; color:#757575;} .list_calculate ul li > p {color:#333;} .list_calculate dl {padding:1.8rem 1.3rem 0; display:flex; justify-content: space-between; align-items: flex-start;border-top:1px solid #e6e7ee; font-size:15px; color:#6f5dd8;} .list_calculate dl dt {font-weight:bold;} .list_calculate dl dt > p {margin-top:5px; font-weight:400; font-size:13px; color:#666;} /* faq list */ .faq_list dt, .faq_list dd { position:relative; display:flex; border-bottom:1px solid #e7e9ee; word-wrap: break-word; word-break:keep-all; } .faq_list dt:after { content:''; display:block; position:absolute; top:20px; right:24px; width:6px; height:6px; border-top:1px solid #6f5dd8; border-right:1px solid #6f5dd8; transform:rotate(135deg); transition: transform .2s ease-out; } .faq_list dt.is_active:after { transform:rotate(315deg); } .faq_list dt { padding:13px 48px 13px 24px } .faq_list dt > span { display:block; margin-right:8px; width:24px; height:24px; background:#6f5dd8; border-radius:50%; font-size:14px; color:#fff; font-family:'Roboto'; text-align:center; line-height:1.7; } .faq_list dt p { width:calc(100% - 32px); font-size:16px; color:#000; } .faq_list dd { display:none; padding:13px 24px; background:#f5f6fa; } .faq_list dd > div { display:flex; } .faq_list dd > div > span { display:block; margin-right:8px; width:24px; height:24px; background:#757575; border-radius:50%; font-size:14px; color:#fff; font-family:'Roboto'; text-align:center; line-height:1.7; } .faq_list dd > div > p { width:calc(100% - 32px); font-size:14px; color:#666; } .faq_list dd .txt_point { color:#6f5dd8; } /* icon bank */ [class^="icon_bank"]:before {content:''; display:inline-block; vertical-align:middle; margin-right:10px; width:25px; height:25px; background:url('../image/ico_sp_bank.png') no-repeat; background-size:130px 340px;} .icon_bank_hana:before {background-position:0 0;} /* 하나 */ .icon_bank_woori:before {background-position:0 -70px;}/* 우리 */ .icon_bank_kakao:before {background-position:-70px -140px;} /* 카카오뱅크 */ .icon_bank_kb:before {background-position:0 -35px;} /* 국민 */ .icon_bank_shinhan:before {background-position:-35px 0;} /* 신한 */ .icon_bank_ibk:before {background-position:0 -140px;} /* 기업 */ .icon_bank_dgb:before {background-position:0 -175px;} /* 대구 */ .icon_bank_bnk:before {background-position:0 -210px;} /* 부산/경남 */ .icon_bank_kjb:before {background-position:0 -280px;} /* 광주/전북 */ .icon_bank_jeju:before {background-position:0 -105px;} /* 제주 */ .icon_bank_nh:before {background-position:-35px -35px;} /* 농협 */ .icon_bank_kdb:before {background-position:-35px -70px;} /* 산업 */ .icon_bank_sh:before {background-position:-35px -105px;} /* 수협 */ .icon_bank_citi:before {background-position:-35px -140px;} /* 한국씨티 */ .icon_bank_sc:before {background-position:-35px -175px;} /* SC제일 */ .icon_bank_hsbc:before {background-position:-35px -210px;} /* HSBC */ .icon_bank_deutsche:before {background-position:-35px -245px;} /* 도이치뱅크 */ .icon_bank_boa:before {background-position:-35px -280px;} /* BOA */ .icon_bank_jp:before {background-position:-35px -315px;} /* JP모간 */ .icon_bank_icbc:before {background-position:-70px 0;} /* 중국공상 */ .icon_bank_bnp:before {background-position:-70px -35px;} /* BNP파리바 */ .icon_bank_epost:before {background-position:-70px -70px;} /* 우체국 */ .icon_bank_kbank:before {background-position:-70px -105px;} /* 케이뱅크 */ .icon_bank_nfcf:before {background-position:-70px -175px;} /* 산림조합 */ .icon_bank_fsb:before {background-position:-70px -210px;} /* 저축은행 */ .icon_bank_kfcc:before {background-position:-70px -245px;} /* 새마을금고 */ .icon_bank_cu:before {background-position:-70px -280px;} /* 신협 */ .icon_bank_china:before {background-position:-105px 0;} /* 중국 */ .icon_bank_china_const:before {background-position:-70px -315px;} /* 중국건설 */ .icon_bank_toss:before {background-position:-105px -35px;} /* 토스뱅크 */ /* icon stock */ [class^="icon_stock"]:before {content:''; display:inline-block; vertical-align:middle; margin-right:10px; width:25px; height:25px; background:url('../image/ico_sp_stock.png') no-repeat; background-size:89px 445px;} .icon_stock_hana:before {background-position:-32px 0;} /* 하나금융투자 */ .icon_stock_ipro:before {background-position:0 0;} /* 교보증권 */ .icon_stock_daish:before {background-position:0 -35px;} /* 대신증권 */ .icon_stock_mirae:before {background-position:0 -70px;} /* 미래에셋증권 */ .icon_stock_db:before {background-position:0 -105px;} /* DB금융투자 */ .icon_stock_myasset:before {background-position:0 -140px;} /* 유안타증권 */ .icon_stock_mertiz:before {background-position:0 -175px;} /* 메리츠증권 */ .icon_stock_book:before {background-position:0 -210px;} /* 부국증권 */ .icon_stock_samsu:before {background-position:0 -245px;} /* 삼성증권 */ .icon_stock_shinyo:before {background-position:0 -280px;} /* 신영증권 */ .icon_stock_shinha:before {background-position:0 -315px;} /* 신한금융투자 */ .icon_stock_nh:before {background-position:0 -350px;} /* NH투자증권 */ .icon_stock_eugen:before {background-position:0 -385px;} /* 유진증권 */ .icon_stock_kiw:before {background-position:0 -420px;} /* 키움증권 */ .icon_stock_hiib:before {background-position:-32px -35px;} /* 하이투자증권 */ .icon_stock_true:before {background-position:-32px -70px;} /* 한국투자 */ .icon_stock_hanw:before {background-position:-32px -105px;} /* 한화투자증권 */ .icon_stock_kb:before {background-position:-32px -140px;} /* KB증권 */ .icon_stock_ebest:before {background-position:-32px -175px;} /* 이베스트투자증권 */ .icon_stock_hmsec:before {background-position:-32px -210px;} /* 현대차증권 */ .icon_stock_cape:before {background-position:-32px -245px;} /* 케이프증권 */ .icon_stock_sk:before {background-position:-32px -280px;} /* SK증권 */ .icon_stock_fossbefore {background-position:-32px -315px;} /* 한국포스증권 */ .icon_stock_ktb:before {background-position:-32px -350px;} /* 다올투자증권 */ .icon_stock_bnk:before {background-position:-32px -385px;} /* BNK투자증권 */ .icon_stock_kakao:before {background-position:-32px -420px;} /* 카카오페이증권 */ .icon_stock_ibk:before {background-position:-64px 0;} /* IBK투자증권 */ .icon_stock_toss:before {background-position:-65px -35px;} /* 토스증권 */ /* icon exchange */ .list.type2 [class^="icon_exchange"] {padding:4px 0;} [class^="icon_exchange"]:before {content:''; display:inline-block; vertical-align:middle; margin-right:10px; width:30px; height:30px; background-size:30px 30px; background-repeat: no-repeat;} .icon_exchange_krw:before {background-image:url('../image/nation/img_flag_krw.png');} /* 대한민국 KRW */ .icon_exchange_usd:before {background-image:url('../image/nation/icon_currency_usd.png');} /* 미국 USD */ .icon_exchange_jpy:before {background-image:url('../image/nation/icon_currency_jpy.png');} /* 일본 JPY */ .icon_exchange_eur:before {background-image:url('../image/nation/icon_currency_eur.png');} /* 유럽연합 EUR */ .icon_exchange_cny:before {background-image:url('../image/nation/img_flag_cny.png');} /* 중국 CNY */ .icon_exchange_aud:before {background-image:url('../image/nation/img_flag_aud.png');} /* 호주 AUD */ .icon_exchange_cad:before {background-image:url('../image/nation/img_flag_cad.png');} /* 캐나다 CAD */ .icon_exchange_chf:before {background-image:url('../image/nation/img_flag_chf.png');} /* 스위스 CHF*/ .icon_exchange_gbp:before {background-image:url('../image/nation/img_flag_gbp.png');} /* 영국 GBP */ .icon_exchange_hkd:before {background-image:url('../image/nation/img_flag_hkd.png');} /* 홍콩 HKD */ .icon_exchange_nzd:before {background-image:url('../image/nation/img_flag_nzd.png');} /* 뉴질랜드 NZD */ .icon_exchange_sgd:before {background-image:url('../image/nation/img_flag_sgd.png');} /* 싱가포르 SGD */ .icon_exchange_thb:before {background-image:url('../image/nation/img_flag_thb.png');} /* 태국 THB */ .icon_exchange_dkk:before {background-image:url('../image/nation/img_flag_dkk.png');} /* 덴마크 DKK */ .icon_exchange_nok:before {background-image:url('../image/nation/img_flag_nok.png');} /* 노르웨이 NOK */ .icon_exchange_sek:before {background-image:url('../image/nation/img_flag_sek.png');} /* 스웨덴 SEK */ .icon_exchange_idr:before {background-image:url('../image/nation/img_flag_idr.png');} /* 인도네시아 IDR */ .icon_exchange_myr:before {background-image:url('../image/nation/img_flag_myr.png');} /* 말레이시아 MYR */ .icon_exchange_php:before {background-image:url('../image/nation/img_flag_php.png');} /* 필리핀 PHP */ .icon_exchange_rub:before {background-image:url('../image/nation/img_flag_rub.png');} /* 러시아 RUB */ .icon_exchange_twd:before {background-image:url('../image/nation/img_flag_twd.png');} /* 대만 TWD */ .icon_exchange_vnd:before {background-image:url('../image/nation/img_flag_vnd.png');} /* 베트남 VND */ .icon_exchange_zar:before {background-image:url('../image/nation/img_flag_zar.png');} /* 남아공화국 ZAR */ .icon_exchange_mxn:before {background-image:url('../image/nation/img_flag_mxn.png');} /* 멕시코 MXN */ .icon_exchange_mnt:before {background-image:url('../image/nation/img_flag_mnt.png');} /* 몽골 MNT */ .icon_exchange_bhd:before {background-image:url('../image/nation/img_flag_bhd.png');} /* 바레인 BHD */ .icon_exchange_bdt:before {background-image:url('../image/nation/img_flag_bdt.png');} /* 방글라데시 BDT */ .icon_exchange_brl:before {background-image:url('../image/nation/img_flag_brl.png');} /* 브라질 BRL */ .icon_exchange_bnd:before {background-image:url('../image/nation/img_flag_bnd.png');} /* 브루나이 BND */ .icon_exchange_sar:before {background-image:url('../image/nation/img_flag_sar.png');} /* 사우디아라비아 SAR */ .icon_exchange_lkr:before {background-image:url('../image/nation/img_flag_lkr.png');} /* 스리랑카 LKR */ .icon_exchange_aed:before {background-image:url('../image/nation/img_flag_aed.png');} /* 아랍에미리트공화국 AED */ .icon_exchange_dzd:before {background-image:url('../image/nation/img_flag_dzd.png');} /* 알제리 DZD */ .icon_exchange_omr:before {background-image:url('../image/nation/img_flag_omr.png');} /* 오만 OMR */ .icon_exchange_jod:before {background-image:url('../image/nation/img_flag_jod.png');} /* 요르단 JOD */ .icon_exchange_ils:before {background-image:url('../image/nation/img_flag_ils.png');} /* 이스라엘 ILS */ .icon_exchange_egp:before {background-image:url('../image/nation/img_flag_egp.png');} /* 이집트 EGP */ .icon_exchange_inr:before {background-image:url('../image/nation/img_flag_inr.png');} /* 인도 INR */ .icon_exchange_czk:before {background-image:url('../image/nation/img_flag_czk.png');} /* 체코 CZK */ .icon_exchange_clp:before {background-image:url('../image/nation/img_flag_clp.png');} /* 칠레 CLP */ .icon_exchange_kzt:before {background-image:url('../image/nation/img_flag_kzt.png');} /* 카자흐스탄 KZT */ .icon_exchange_qar:before {background-image:url('../image/nation/img_flag_qar.png');} /* 카타르 QAR */ .icon_exchange_kes:before {background-image:url('../image/nation/img_flag_kes.png');} /* 케냐 KES */ .icon_exchange_cop:before {background-image:url('../image/nation/img_flag_cop.png');} /* 콜롬비아 COP */ .icon_exchange_kwd:before {background-image:url('../image/nation/img_flag_kwd.png');} /* 쿠웨이트 KWD */ .icon_exchange_tzs:before {background-image:url('../image/nation/img_flag_tzs.png');} /* 탄자니아 TZS */ .icon_exchange_try:before {background-image:url('../image/nation/img_flag_try.png');} /* 터어키 TRY */ .icon_exchange_pkr:before {background-image:url('../image/nation/img_flag_pkr.png');} /* 파키스탄 PKR */ .icon_exchange_pln:before {background-image:url('../image/nation/img_flag_pln.png');} /* 폴란드 PLN */ .icon_exchange_huf:before {background-image:url('../image/nation/img_flag_huf.png');} /* 헝가리 HUF */ /* .icon_exchange_etb:before {background-image:url('../image/nation/img_flag_etb.png');} */ /* 에티오피아 ETB */ /* .icon_exchange_fjd:before {background-image:url('../image/nation/img_flag_fjd.png');} */ /* 피지 FJD */ /* .icon_exchange_khr:before {background-image:url('../image/nation/img_flag_khr.png');} */ /* 캄보디아 KHR */ /* .icon_exchange_lyd:before {background-image:url('../image/nation/img_flag_lyd.png');} */ /* 리비아 LYD */ /* .icon_exchange_mmk:before {background-image:url('../image/nation/img_flag_mmk.png');} */ /* 미얀마 MMK */ /* .icon_exchange_mop:before {background-image:url('../image/nation/img_flag_mop.png');} */ /* 마카오 MOP */ /* .icon_exchange_npr:before {background-image:url('../image/nation/img_flag_npr.png');} */ /* 네팔 NPR */ /* .icon_exchange_ron:before {background-image:url('../image/nation/img_flag_ron.png');} */ /* 루마니아 RON */ /* .icon_exchange_uzs:before {background-image:url('../image/nation/img_flag_uzs.png');} */ /* 우즈베키스탄 UZS */ /* carousel */ .flickity-enabled { position:relative; margin-bottom:20px;touch-action:pan-x !important;} .flickity-viewport { overflow: hidden; position: relative; height: 100%; } .flickity-slider {position:absolute; width:100%; height:100%; left:0; margin-left:23px;} .flickity-slider > div {position:absolute; left:0; width:90%; height:100%;} .flickity-slider>div.button_flow:first-child {padding: 16px 0 0 !important;} .carousel-cell { width:95%; min-height:100%; height:100%; padding:20px; border:1px solid #e7e9ee; border-radius:14px; border-bottom-right-radius:30px; background:#fff; box-shadow: rgb(167, 175, 198, 0.1) 1.95px 1.95px 3.6px; } .carousel-cell.type2 {width:90%; } .carousel-cell.type2 .button_carousel {margin-top:20px;} .carousel-cell .text_basic {padding:0;} .carousel-cell.type3 {width:90%; margin-left:-23px; padding:0;} .carousel_flex_cloumn {display:flex; flex-direction:column; justify-content: space-between; height:100%; } .button_carousel button {width:100%; padding: 12px 0; text-align:center; border: 1px solid #6f5dd8; background-color:#fff; font-size:14px; color:#6f5dd8; cursor: pointer; border-radius: 10px; line-height:1.3; } .button_carousel button.link:after { content:''; display:inline-block; vertical-align:middle; margin:-2px 0 0 4px; width:7px; height:7px; border-top:1px solid #6f5dd8; border-right:1px solid #6f5dd8; transform:rotate(45deg); } .account_transfer {position:relative; font-size:14px;} .account_transfer p {margin-top:10px; font-size:12px; color:#666;} .account_transfer:after {content:''; display:block; position:absolute; top:0; right:0; width:40px; height:40px; background:url('../image/img_savings.png') no-repeat; background-size: 40px 40px; border-radius:15px;} .account_search {position:relative;} .account_search > a {position:absolute; top:-7px; right:0; width:30px; height:30px; background:url('../image/ico_carou_detail.png') no-repeat 50% 50%; background-size:14px 14px;} .account_search .flag {display:inline-block; padding:3px 9px; border:1px solid #e6e4f4; border-radius:5px; background:#f6f5ff; color:#6f5dd8; font-size:12px;} .account_search .info {margin-top:10px; min-height:72px; } .account_search .info strong {margin-bottom:6px; font-size:14px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .account_search .info p {font-family:'Roboto'; font-size:12px; color:#666;} .account_search .info p > span {font-weight:500; color:#6f5dd8;} .account_search .info p > span:after {content:'|'; display:inline-block; color:#757575; font-size: 11px; vertical-align: middle; margin: -2px 3px 0 5px;} .account_search .number {font-size: 15px; } .account_search .number strong {font-family:'Roboto';} .account_search .info_summary {margin-top:10px; color:#333; font-size:13px; } .account_search .info_summary strong {margin-bottom:13px; font-size:15px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .account_search .info_summary p {margin:16px 0 10px; font-size:14px; } .account_search .info_summary p span {color:#6f5dd8; } .account_search .info_summary > span {display:block; margin:6px 0 0; font-size:12px; color:#666;} .oneq_question_section > p {padding:16px 19px; font-size:15px; color:#333;} .oneq_question_section > ul {border-bottom-left-radius: 14px; border-bottom-right-radius: 30px; background:#f6f5ff;} .oneq_question_section > ul li {border-top:1px solid #e7e9ee;} .oneq_question_section > ul li a {position:relative; display:block; padding:16px 32px 16px 19px; font-size:13px; color:#333; text-overflow: ellipsis; overflow: hidden; white-space:nowrap;} .oneq_question_section > ul li a:after {content:''; position:absolute; top:50%; right:20px; margin-top:-4px; display:block; width:7px; height:7px; border-top:1px solid #6f6e7e; border-right:1px solid #6f6e7e; transform:rotate(45deg);} .flickity-page-dots { position: absolute; width: 100%; bottom: -20px; padding: 0; margin: 0; list-style: none; text-align: center; line-height: 1; } .flickity-page-dots .dot.is-selected { width:14px; border-radius:15px; background:#6f5dd8; } .flickity-page-dots .dot { display: inline-block; width: 6px; height: 6px; margin: 0 1px; background: #b2a9e9; border-radius: 50%; cursor: pointer; } /* 영업점 찾기 */ .modal_search .modal_header { display:block; height:auto; text-align:center; } .modal_search .modal_desp {margin-top:7px; font-size:14px; } .search_wrap {position:relative; margin-top:26px; } .search_wrap input { width:100%; height:48px; padding:0 13px; margin-right:10px; border-radius:10px; } .search_wrap input.is_active {border-color:#6f5dd8;} .search_wrap button {position:absolute; top:4px; right:0; width:40px; height:40px; background:transparent url('../image/ico_carou_detail.png') no-repeat 50% 50%; text-align:center; background-size:14px 14px; cursor:pointer;} .search_wrap button:focus {border-radius:10px; } .text_total {margin:20px 0 -20px; padding:0 0 10px; font-family:'Roboto'; font-size:13px; color:#666; text-align:right; border-bottom:1px solid #8b8e98; } .search_result_list li { border-bottom:1px solid #e7e9ee; } .search_result_list li a { display:block; padding:16px 13px; } .search_result_list li a .branch { display:flex; align-items:flex-end; } .search_result_list li a .branch p { max-width:calc(100% - 46px); font-size:15px; font-weight:500; color:#333; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .search_result_list li a .branch span { margin-left:8px; width:38px; display:inline-block; text-align:center; line-height:1.5; height:20px; font-size:12px; font-family:'Roboto'; color:#6f5dd8; border:1px solid #e6e4f4; border-radius:5px; background:#f6f5ff; } .search_result_list li a .address { margin-top:2px; font-size:14px; color:#666; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* nodata */ .no_data { padding:131px 0; text-align:center; font-size:15px; border-top:1px solid #8b8e98; border-bottom:1px solid #e7e9ee; } .no_data.no_border {border:0;} .no_data:before { content:''; display:block; margin:0 auto 14px; width:45px; height:45px; background:url('../image/ico_nodata.png') no-repeat; background-size:45px 45px; } /* datepicker */ #datepicker .ui-widget-content {width:100%; padding:0 5px 10px;} .datepicker_inline {position:relative;} .date_range_wrap {display:flex; align-items: center; margin-bottom:13px;} .date_range_wrap span {padding:0 5px;} .date_range_wrap input {font-size:16px; height:48px; padding:0 15px; background:url('../image/ico_calendar.png') no-repeat right 14px top 50%; background-size:16px 16px;} .date_range_wrap input[readonly], .date_range_wrap input[disabled] {font-size:16px; color:#333; background-color:#fff; background-image:url('../image/ico_calendar.png'); background-repeat: no-repeat; background-position: right 14px top 50%; background-size:16px 16px;} .date_range_wrap input.is_active {border:1px solid #6f5dd8;} .datepicker_inline .ui-widget.ui-widget-content {border:1px solid #e7e9ee; border-radius:5px; font-size:16px;} .datepicker_inline .ui-widget-header {border:0; background:transparent;} .datepicker_inline .ui-icon {width:7px; height:7px; border-top:1px solid #666; border-right:1px solid #666; transform:rotate(225deg);} .datepicker_inline .ui-icon-circle-triangle-e {transform:rotate(45deg);} .datepicker_inline .ui-datepicker .ui-datepicker-prev span {margin-top:-3px; margin-left:-2px;} .datepicker_inline .ui-datepicker .ui-datepicker-next span {margin-top:-3px; margin-left:-5px;} .datepicker_inline .ui-datepicker .ui-datepicker-prev {top:12px; left:50%; margin-left:-72px;} .datepicker_inline .ui-datepicker .ui-datepicker-next {top:12px; right:50%; margin-right:-70px;} .datepicker_inline .ui-datepicker td span, .ui-datepicker td a {text-align:center;} .datepicker_inline .ui-state-default, .datepicker_inline .ui-widget-content .ui-state-default, .datepicker_inline .ui-widget-header .ui-state-default, .datepicker_inline .ui-button, html .ui-button.ui-state-disabled:hover, .datepicker_inline html .ui-button.ui-state-disabled:active {border:1px solid #fff; background:#fff; color:#333;} .datepicker_inline .ui-state-default {width:32px; margin:0 auto;} .datepicker_inline .ui-state-active {border:1px solid #6f5dd8 !important; background:#6f5dd8 !important; border-radius:50%; color:#fff !important;} .datepicker_inline .ui-state-highlight, .datepicker_inline .ui-widget-content .ui-state-highlight, .datepicker_inline .ui-widget-header .ui-state-highlight {border:1px solid #e7e9ee; border-radius:50%; background:#e7e9ee; color:#333;} .datepicker_inline .ui-datepicker td span, .ui-datepicker td a {padding:6px 0; height:32px;} .datepicker_inline .ui-datepicker .ui-datepicker-title {padding:10px 0; font-size:17px;} .datepicker_inline .ui-widget-content {border-top:0;} .datepicker_inline .ui-datepicker .ui-datepicker-buttonpane {position:absolute; top:76px; right:0; margin:0; padding:0; width:60px !important; background:transparent;} .datepicker_inline .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {float:right; margin:0 14px 0 0; padding:0; width:40px; height:30px; text-align:center; border:1px solid #d5dee9; border-radius:4px; font-size:14px; color:#6f6e7e;} /* .ui-datepicker .ui-datepicker-title select {height:30px; padding:0 5px; font-size:18px; color:#333; border:0; background:url('../image/ico_select_arrow_cal.png') no-repeat 100% 50%; background-size:7px 6px;} */ .ui-datepicker .ui-datepicker-title select {height:30px; padding:0 5px; font-size:18px; color:#333; border:0; background-size:7px 6px;} .ui-datepicker .ui-datepicker-title select:focus {border-color:transparent !important;} .ui-datepicker select.ui-datepicker-month {width:19%;} .ui-datepicker select.ui-datepicker-year {width:22%; margin-right:10px;} .ui-datepicker table {margin:10px 0 0 !important;} /* 하이 알아보기 swipe */ .hi_swipe_wrap {height:100%;} .hi_swiper_wrap .swiper {width: 100%; height: 100%; background:#f5f6fa;} .hi_swiper_wrap .swiper-slide {text-align: center; font-size: 18px; background:#f5f6fa; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;} .hi_swiper_wrap .swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical>.swiper-pagination-bullets {top:20%; right:20px;} .hi_swiper_wrap .swiper-pagination-bullet {width:6px; height:6px; background:#b2a9e9; opacity:1;} .hi_swiper_wrap .swiper-pagination-bullet-active {height:15px; background:#6f5dd8; border-radius:15px;} .hi_swiper_wrap .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } [class^='slide_content'] {position:relative; height:inherit; width:100%;} [class^='slide_content'] h2 {position:absolute; top:20%; transform: translate3d(0px,-50%,0); left:0; right:0; text-align:center; font-size:24px; color:#000; line-height:1.5;} [class^='slide_content'] h2 span {color:#6f5dd8; box-shadow: inset 0 -7px 0 #ccfaff;} [class^='slide_content'] > p {position:absolute; top:31%; transform: translate3d(0px,-50%,0); left:0; right:0; text-align:center; font-size:14px; color:#666; line-height:1.5;} [class^='slide_content'] > p span {color:#6f5dd8;} /* [220779] 2025-10-28 수정[S]-이미지 파일명 변경 */ [class^='slide_content']:after {content:''; display:block; position:absolute; bottom:0; left:50%; margin-left:-127px; width:258px; height:366px; background-image:url('../image/hi_tutorial1_01.png'); background-repeat:no-repeat; background-size:258px 366px;} .slide_content_type1:after {background-image:url('../image/hi_tutorial1.png');} .slide_content_type2:after {background-image:url('../image/hi_tutorial2.png');} .slide_content_type3:after {background-image:url('../image/hi_tutorial3.png');} .slide_content_type4:after {background-image:url('../image/hi_tutorial4.png');} .slide_content_type5:after {background-image:url('../image/hi_tutorial5.png');} .slide_content_type1_v2:after {background-image:url('../image/hi_tutorial1_01.png');} .slide_content_type2_v2:after {background-image:url('../image/hi_tutorial2_01.png');} .slide_content_type3_v2:after {background-image:url('../image/hi_tutorial3_01.png');} .slide_content_type4_v2:after {background-image:url('../image/hi_tutorial4_01.png');} .slide_content_type5_v2:after {background-image:url('../image/hi_tutorial5_01.png');} /* [220779] 2025-10-28 수정[E]-이미지 파일명 변경 */ /* 의견 남기기 */ .chat-feedback-container {border-radius:17px;} .chat-feedback-comment-container {border:0 !important; margin:0 !important; padding:0 21px 10px;} .chat-feedback-comment-container textarea {height:103px; border-radius:6px; padding:16px 13px;} .chat-feedback-grade-container {padding:10px 21px 0;} .chat-feedback-info-text {font-size:15px;} .chat-feedback-cancel-button {height:48px; line-height:48px; font-size:16px; background:#888; border-bottom-left-radius:14px; color:#fff;} .chat-feedback-send-button {position:relative;height:48px; line-height:48px; font-size:0; width:70%; background:#6f5dd8; border-bottom-left-radius:14px;} .chat-feedback-send-button:before {content: '확인'; color: #fff; font-size: 16px;} .chat-feedback-grade-star {padding:0 10px;} .chat-feedback-comment-max-bytes {font-size:12px !important; color:#757575;} .chat-feedback-send-button.send-disabled {background:#8a7cdf; opacity:1;} /* 자동완성 */ /* .chat-auto-complete {z-index:10; opacity:.95; font-size:14px; padding:15px 0 0; border-top-left-radius:10px; border-top-right-radius:10px; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px; } */ .chat-auto-complete {z-index:10; opacity:.95; font-size:14px; padding:15px 0 0; border-top-left-radius:10px; border-top-right-radius:10px; box-shadow:rgba(167, 175, 198, 0.62) 0px 0px 34px 0px, rgba(167, 175, 198, 0.55) 0px 0px 27px 0px; } .chat-auto-complete-item {color:#333; padding:4px 23px;} .chat-auto-complete-item em {color:#6f5dd8;} /* 마이크 */ .voice-popup .voice-popup-content { height: 327px; background-color: #fff; border-radius: 25px 25px 0 0; padding:0 21px; position:relative; z-index:10; } .voice-popup #voice-popup-close-button { width: 26px; height: 26px; position: absolute; top: 30px; right: 17px; } #voice-popup-close-button:before, #voice-popup-close-button:after { position: absolute; top: 3px; left: 11px; content: ''; width: 2px; height: 19px; background-color: #333; } .voice-popup #voice-popup-close-button:before { transform: rotate(45deg); } .voice-popup #voice-popup-close-button:after { transform: rotate(-45deg); } .voice-speech{padding:45px 0 0;} #voice-popup-speech-text {text-align:center; color:#000; font-size:17px; font-weight:bold; line-height:1.3;} #voice-popup-speech-text > p {margin-top:16px; color:#757575; font-size:14px; font-weight:400;} /* .fa-microphone {position:absolute; top:160px; left:50%; z-index:3; width:86px; height:86px; background:#6f5dd8 url('../image/ico_voice_popup.png') no-repeat 50% 50%; background-size:34px 36px; border-radius:50%; margin-left:-43px; animation: voice 1s linear infinite; box-shadow: rgba(111,93,216, 0.15) 0px 1px 1px, rgba(111,93,216, 0.15) 0px 2px 2px, rgba(111,93,216, 0.15) 0px 3px 3px, rgba(111,93,216, 0.34) 0px 5px 5px, rgba(111,93,216, 0.04) 0px 10px 10px;} */ .fa-microphone {position:absolute; top:160px; left:50%; z-index:3; width:86px; height:86px; background:#6f5dd8; background-size:34px 36px; border-radius:50%; margin-left:-43px; animation: voice 1s linear infinite; box-shadow: rgba(111,93,216, 0.15) 0px 1px 1px, rgba(111,93,216, 0.15) 0px 2px 2px, rgba(111,93,216, 0.15) 0px 3px 3px, rgba(111,93,216, 0.34) 0px 5px 5px, rgba(111,93,216, 0.04) 0px 10px 10px;} .fa-microphone:before {display:none;} .fa-microphone-ios {margin:0 auto; width:86px; height:86px; background:#888 url('../image/ico_voice_popup_off.png') no-repeat 50% 50%; background-size:34px 36px; border-radius:50%; box-shadow: rgba(136, 136, 136, 0.15) 0px 1px 1px, rgba(136, 136, 136, 0.15) 0px 2px 2px, rgba(136, 136, 136, 0.15) 0px 3px 3px, rgba(136, 136, 136, 0.34) 0px 5px 5px, rgba(136, 136, 136, 0.04) 0px 10px 10px;} .voice_hana1q {margin:18px auto 30px; width:86px; height:86px; border:1px solid #e7e9ee; border-radius:15px; text-align:center; } .voice_hana1q:before {content:''; display:inline-block; margin:16px 0 0; width:49px; height:56px; background:url('../image/ico_hana1q.png') no-repeat; background-size:49px 56px;} .voice_focus {opacity:0; position:absolute; top:153px; left:50%; margin-left:-50px; width:100px; height:100px; border-radius:50%; background-color:rgba(111,93,216, 0.3); animation: loader-scale 1s ease-out 5s infinite; } .voice_focus:before {content:''; position:absolute; top:-11px; left:-11px; width:120px; height:120px; border-radius:50%; border:2px solid rgba(111,93,216, 0.3); animation-delay:1s; } .voice_focus:after {content:'';position:absolute; top:-21px; left:-21px; width:140px; height:140px; border-radius:50%; border:2px solid rgba(111,93,216, 0.1); animation-delay:0.5s;} .text_voice {margin:10px 0 40px; color:#333; font-size:14px; text-align:center;} @keyframes loader-scale { 0% { transform: scale(1); opacity: 0; } 50% { transform: scale(1.3); opacity: 1; } 100% { transform: scale(1); opacity: 0.7; } } @-webkit-keyframes voice { 0% { transform: scale(1, 1); } 50% { transform: scale(1.3, 1.3); } 75% { transform: scale(1, 1); } 100% { transform: scale(1, 1); } } @keyframes voice { 0% { transform: scale(1, 1); } 50% { transform: scale(1.3, 1.3); } 75% { transform: scale(1, 1); } 100% { transform: scale(1, 1); } } /* [220779] 2025-10-28 추가[S] */ /* AI 챗봇 공유하기 팝업 */ .ai_chatbot .modal_bottomsheet .modal_tit{font-size:17px;letter-spacing:-0.9px;line-height:16px;} .ai_chatbot .modal_bottomsheet .modal_tit span{color:#6f5dd8} .ai_chatbot .modal_bottomsheet .modal_content{padding-bottom:4rem;} .ai_chatbot .sns_list{display:flex;align-items: center;justify-content: center;width:249px;margin:0 auto;} .ai_chatbot .sns_list li{width:63px;height:63px;margin-left:30px;flex-shrink:0;background:url('../image/ico_ai_chatbot_share1.png') no-repeat 0 0; background-size:63px 63px;} .ai_chatbot .sns_list li:nth-child(2){background-image:url('../image/ico_ai_chatbot_share2.png');} .ai_chatbot .sns_list li:nth-child(3){background-image:url('../image/ico_ai_chatbot_share3.png');} .ai_chatbot .sns_list li:first-child{margin-left:0;} .ai_chatbot .sns_list li button{display:block;width:63px;height:63px;} .ai_chatbot .modal_close_btn{right:2.1rem} /* [220779] 2025-10-28 추가[E] */ #clipboardToast {width: 190px; padding: 5px 6px 10px 10px; background-color: rgba(43,43,43,0.842); color: white; border-radius: 6px; position: absolute; bottom: 0%; left: 50%; transform: translate(-50%, 100%); transition: transform 0.1s ease; font-size :15px; display: none;} #clipboardToast.active {bottom: 10%; z-index: 100; transform: translate(-50%, -50%); display: block;}