.swiper-container{ margin:0 auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1 } .swiper-container-no-flexbox .swiper-slide{ float:left } .swiper-container-vertical>.swiper-wrapper{ -ms-flex-direction:column;flex-direction:column } .swiper-wrapper{ position:relative;width:100%;height:29%;z-index:1;display:-ms-flexbox;display:flex;transition-property:transform;box-sizing:content-box } .swiper-container-android .swiper-slide,.swiper-wrapper{ transform:translate3d(0px, 0, 0) } .swiper-container-multirow>.swiper-wrapper{ -ms-flex-wrap:wrap;flex-wrap:wrap } .swiper-container-free-mode>.swiper-wrapper{ transition-timing-function:ease-out;margin:0 auto } .swiper-slide{ -ms-flex-negative:0;flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform } .swiper-invisible-blank-slide{ visibility:hidden } .swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{ height:auto } .swiper-container-autoheight .swiper-wrapper{ -ms-flex-align:start;align-items:flex-start;transition-property:transform, height } .swiper-container-3d{ perspective:1200px } .swiper-container-3d .swiper-wrapper, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-cube-shadow{ transform-style:preserve-3d } .swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-slide-shadow-bottom{ position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10 } .swiper-container-3d .swiper-slide-shadow-left{ background-image:linear-gradient(to left, rgba(0,0,0,0.5), transparent) } .swiper-container-3d .swiper-slide-shadow-right{ background-image:linear-gradient(to right, rgba(0,0,0,0.5), transparent) } .swiper-container-3d .swiper-slide-shadow-top{ background-image:linear-gradient(to top, rgba(0,0,0,0.5), transparent) } .swiper-container-3d .swiper-slide-shadow-bottom{ background-image:linear-gradient(to bottom, rgba(0,0,0,0.5), transparent) } .swiper-container-wp8-horizontal,.swiper-container-wp8-horizontal>.swiper-wrapper{ -ms-touch-action:pan-y;touch-action:pan-y } .swiper-container-wp8-vertical,.swiper-container-wp8-vertical>.swiper-wrapper{ -ms-touch-action:pan-x;touch-action:pan-x } .swiper-button-prev,.swiper-button-next{ position:absolute;top:50%;width:27px;height:44px;margin-top:-22px;z-index:10;cursor:pointer;background-size:27px 44px;background-position:center;background-repeat:no-repeat } .swiper-button-prev.swiper-button-disabled,.swiper-button-next.swiper-button-disabled{ opacity:0.35;cursor:auto;pointer-events:none } .swiper-button-prev,.swiper-container-rtl .swiper-button-next{ background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");left:10px;right:auto } .swiper-button-next,.swiper-container-rtl .swiper-button-prev{ background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");right:10px;left:auto } .swiper-button-prev.swiper-button-white,.swiper-container-rtl .swiper-button-next.swiper-button-white{ background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E") } .swiper-button-next.swiper-button-white,.swiper-container-rtl .swiper-button-prev.swiper-button-white{ background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E") } .swiper-button-prev.swiper-button-black,.swiper-container-rtl .swiper-button-next.swiper-button-black{ background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E") } .swiper-button-next.swiper-button-black,.swiper-container-rtl .swiper-button-prev.swiper-button-black{ background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E") } .swiper-button-lock{ display:none } .swiper-pagination{position:absolute;text-align:center;transition:300ms opacity;transform:translate3d(0, 0, 0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-fraction,.swiper-pagination-custom,.swiper-container-horizontal>.swiper-pagination-bullets{bottom:10px;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-ms-transform:scale(0.33);transform:scale(0.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{-ms-transform:scale(1);transform:scale(1)} .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{-ms-transform:scale(0.66);transform:scale(0.66)} .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{-ms-transform:scale(0.33);transform:scale(0.33)} .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{-ms-transform:scale(0.66);transform:scale(0.66)} .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{-ms-transform:scale(0.33);transform:scale(0.33)} .swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:100%;background:#000;opacity:0.2}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet-active{opacity:1;background:#007aff}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px, -50%, 0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:6px 0;display:block} .swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;-ms-transform:translateY(-50%);transform:translateY(-50%);width:8px}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:200ms transform, 200ms top}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 4px}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;-ms-transform:translateX(-50%);transform:translateX(-50%);white-space:nowrap} .swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:200ms transform, 200ms left}.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:200ms transform, 200ms right}.swiper-pagination-progressbar{background:rgba(0,0,0,0.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:#007aff;position:absolute;left:0;top:0;width:100%;height:100%;-ms-transform:scale(0);transform:scale(0);-ms-transform-origin:left top;transform-origin:left top} .swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{-ms-transform-origin:right top;transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progressbar{width:100%;height:4px;left:0;top:0} .swiper-container-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0} .swiper-pagination-white .swiper-pagination-bullet-active{background:#ffffff} .swiper-pagination-progressbar.swiper-pagination-white{background:rgba(255,255,255,0.25)} .swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill{background:#ffffff} .swiper-pagination-black .swiper-pagination-bullet-active{background:#000000} .swiper-pagination-progressbar.swiper-pagination-black{background:rgba(0,0,0,0.25)} .swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill{background:#000000} .swiper-pagination-lock{display:none} .swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,0.1)} .swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%} .swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%} .swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,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:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;text-align:center} .swiper-zoom-container>img,.swiper-zoom-container>svg,.swiper-zoom-container>canvas{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;-ms-transform-origin:50%;transform-origin:50%;animation:swiper-preloader-spin 1s steps(12, end) infinite} .swiper-lazy-preloader:after{display:block;content:'';width:100%;height:100%;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-position:50%;background-size:100%;background-repeat:no-repeat} .swiper-lazy-preloader-white:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}@keyframes swiper-preloader-spin{100%{transform:rotate(360deg)}}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-container-fade.swiper-container-free-mode .swiper-slide{transition-timing-function:ease-out} .swiper-container-fade .swiper-slide{pointer-events:none;transition-property:opacity} .swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto} .swiper-container-cube{overflow:visible} .swiper-container-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;-ms-transform-origin:0 0;transform-origin:0 0;width:100%;height:100%} .swiper-container-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-cube.swiper-container-rtl .swiper-slide{-ms-transform-origin:100% 0;transform-origin:100% 0} .swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto} .swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-prev,.swiper-container-cube .swiper-slide-next+.swiper-slide{pointer-events:auto;visibility:visible} .swiper-container-cube .swiper-slide-shadow-top,.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden} .swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;background:#000;opacity:0.6;filter:blur(50px);z-index:0} .swiper-container-flip{overflow:visible} .swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1} .swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none} .swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto} .swiper-container-flip .swiper-slide-shadow-top,.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden} .swiper-container-coverflow .swiper-wrapper{-ms-perspective:1200px} .tabs-wrap{width:100%;margin:0 auto} .tabs-wrap .tabs-menu{margin:0 auto} .tabs-wrap .tabs-menu li{display:inline-block;*display:inline;zoom:1;width:33.3%;margin:0 auto;padding:10px 0;cursor:pointer;position:relative;text-align:center;color:#909090;font-size:1rem} .tabs-wrap .tabs-menu li.active-tab{color:#0097CE;font-weight:700; } .tabs-wrap .tabs-contents{width:100%;margin:0 auto;margin-top:5px; background-color: #EEEEEE; } .tabs-wrap.tab_style1{background:#fff} .tabs-wrap.tab_style1 .tabs-menu{width:100%; } .tabs-wrap.tab_style1 .tabs-menu li{padding:15px 0;background:#fff;border:none;border-bottom:1px solid #dedede} .tabs-wrap.tab_style1 .tabs-menu li.active-tab:after{content:'';display:block;width:70%;height:3px;background:#202020;position:absolute;bottom:0;left:15%} .tabs-wrap.tab_style2 .tabs-menu{width:80%} .tabs-wrap.tab_style2 .tabs-menu li{padding:10px 0;background:#fff;border:none;border:1px solid #dedede} .tabs-wrap.tab_style2 .tabs-menu li.active-tab{background:#fff;border:1px solid #202020} .tabs-wrap.tab_style3 .tabs-menu{width:250px} .tabs-wrap.tab_style3 .tabs-menu li{padding:10px 0;border:none;position:relative} .tabs-wrap.tab_style3 .tabs-menu li:first-child:after{content:'';display:block;width:1px;height:10px;background:#ccc;position:absolute;right:0;top:1rem} .mfp-bg{top:0;left:0;width:100%;height:100%;z-index:1042;overflow:hidden;position:fixed;background:#0b0b0b;opacity:0.8} .mfp-wrap{top:0;left:0;width:100%;height:100%;z-index:1043;position:fixed;outline:none !important;-webkit-backface-visibility:hidden} .mfp-container{text-align:center;position:absolute;width:100%;height:100%;left:0;top:0;padding:0 8px;box-sizing:border-box} .mfp-container:before{content:'';display:inline-block;height:100%;vertical-align:middle} .mfp-align-top .mfp-container:before{display:none} .mfp-content{position:relative;display:inline-block;vertical-align:middle;margin:0 auto;text-align:left;z-index:1045} .mfp-inline-holder .mfp-content,.mfp-ajax-holder .mfp-content{width:100%;cursor:auto}.mfp-ajax-cur{cursor:progress} .mfp-zoom-out-cur,.mfp-zoom-out-cur .mfp-image-holder .mfp-close{cursor:zoom-out}.mfp-zoom{cursor:pointer;cursor:zoom-in} .mfp-auto-cursor .mfp-content{cursor:auto} .mfp-close,.mfp-arrow,.mfp-preloader,.mfp-counter{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} .mfp-loading.mfp-figure{display:none} .mfp-hide{display:none !important} .mfp-preloader{color:#CCC;position:absolute;top:50%;width:auto;text-align:center;margin-top:-0.8em;left:8px;right:8px;z-index:1044} .mfp-preloader a{color:#CCC} .mfp-preloader a:hover{color:#FFF} .mfp-s-ready .mfp-preloader{display:none} .mfp-s-error .mfp-content{display:none}button.mfp-close,button.mfp-arrow{overflow:visible;cursor:pointer;background:transparent;border:0;-webkit-appearance:none;display:block;outline:none;padding:0;z-index:1046;box-shadow:none;-ms-touch-action:manipulation;touch-action:manipulation}button::-moz-focus-inner{padding:0;border:0} .mfp-close-btn-in .mfp-close{color:#333} .mfp-image-holder .mfp-close,.mfp-iframe-holder .mfp-close{color:#FFF;right:-6px;text-align:right;padding-right:6px;width:100%} .mfp-counter{position:absolute;top:0;right:0;color:#CCC;font-size:12px;line-height:18px;white-space:nowrap} .mfp-arrow{position:absolute;opacity:0.65;margin:0;top:50%;margin-top:-55px;padding:0;width:90px;height:110px;-webkit-tap-highlight-color:transparent} .mfp-arrow:active{margin-top:-54px} .mfp-arrow:hover,.mfp-arrow:focus{opacity:1} .mfp-arrow:before,.mfp-arrow:after{content:'';display:block;width:0;height:0;position:absolute;left:0;top:0;margin-top:35px;margin-left:35px;border:medium inset transparent} .mfp-arrow:after{border-top-width:13px;border-bottom-width:13px;top:8px} .mfp-arrow:before{border-top-width:21px;border-bottom-width:21px;opacity:0.7} .mfp-arrow-left{left:0} .mfp-arrow-left:after{border-right:17px solid #FFF;margin-left:31px} .mfp-arrow-left:before{margin-left:25px;border-right:27px solid #3F3F3F} .mfp-arrow-right{right:0} .mfp-arrow-right:after{border-left:17px solid #FFF;margin-left:39px} .mfp-arrow-right:before{border-left:27px solid #3F3F3F} .mfp-iframe-holder{padding-top:40px;padding-bottom:40px} .mfp-iframe-holder .mfp-content{line-height:0;width:100%;max-width:900px} .mfp-iframe-holder .mfp-close{top:-40px}.mfp-iframe-scaler{width:100%;height:0;overflow:hidden;padding-top:56.25%} .mfp-iframe-scaler iframe{position:absolute;display:block;top:0;left:0;width:100%;height:100%;box-shadow:0 0 8px rgba(0,0,0,0.6);background:#000}img.mfp-img{width:auto;max-width:100%;height:auto;display:block;line-height:0;box-sizing:border-box;padding:40px 0 40px;margin:0 auto} .mfp-figure{line-height:0}.mfp-figure:after{content:'';position:absolute;left:0;top:40px;bottom:40px;display:block;right:0;width:auto;height:auto;z-index:-1;box-shadow:0 0 8px rgba(0,0,0,0.6);background:#444} .mfp-figure small{color:#BDBDBD;display:block;font-size:12px;line-height:14px} .mfp-figure figure{margin:0}.mfp-bottom-bar{margin-top:-36px;position:absolute;top:100%;left:0;width:100%;cursor:auto}.mfp-title{text-align:left;line-height:18px;color:#F3F3F3;word-wrap:break-word;padding-right:36px} .mfp-image-holder .mfp-content{max-width:100%} .mfp-gallery .mfp-image-holder .mfp-figure{cursor:pointer} @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px){.mfp-img-mobile .mfp-image-holder{padding-left:0;padding-right:0} .mfp-img-mobile img.mfp-img{padding:0} .mfp-img-mobile .mfp-figure:after{top:0;bottom:0}.mfp-img-mobile .mfp-figure small{display:inline;margin-left:5px} .mfp-img-mobile .mfp-bottom-bar{background:rgba(0,0,0,0.6);bottom:0;margin:0;top:auto;padding:3px 5px;position:fixed;box-sizing:border-box} .mfp-img-mobile .mfp-bottom-bar:empty{padding:0} .mfp-img-mobile .mfp-counter{right:5px;top:3px} .mfp-img-mobile .mfp-close{top:0;right:0;width:35px;height:35px;line-height:35px;background:rgba(0,0,0,0.6);position:fixed;text-align:center;padding:0}} @media all and (max-width: 900px){.mfp-arrow{-ms-transform:scale(0.75);transform:scale(0.75)}.mfp-arrow-left{-ms-transform-origin:0;transform-origin:0} .mfp-arrow-right{-ms-transform-origin:100%;transform-origin:100%} .mfp-container{padding-left:20px;padding-right:20px}}.mfp-fade.mfp-bg{opacity:0;transition:all 0.15s ease-out} .mfp-fade.mfp-bg.mfp-ready{opacity:0.4}.mfp-fade.mfp-bg.mfp-removing{opacity:0} .mfp-fade.mfp-wrap .mfp-content{opacity:0;transition:all 0.15s ease-out} .mfp-fade.mfp-wrap.mfp-ready .mfp-content{opacity:1} .mfp-fade.mfp-wrap.mfp-removing .mfp-content{opacity:0} @keyframes jconfirm-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}body[class*=jconfirm-no-scroll-]{overflow:hidden !important} .jconfirm{position:fixed;top:0;left:0;right:0;bottom:0;z-index:99999999;font-family:inherit;overflow:hidden} .jconfirm .jconfirm-bg{position:fixed;top:0;left:0;right:0;bottom:0;transition:opacity .4s} .jconfirm .jconfirm-bg.jconfirm-bg-h{opacity:0 !important} .jconfirm .jconfirm-scrollpane{position:fixed;top:0;left:0;right:0;bottom:0;overflow-y:auto;perspective:500px;perspective-origin:center} .jconfirm .jconfirm-box{background:white;box-sizing:border-box;border-radius:10px;position:relative;outline:none;padding:30px 0 0 0;overflow:hidden} @keyframes type-blue{1%,100%{border-color:#3498db}50%{border-color:#5faee3}}@keyframes type-green{1%,100%{border-color:#2ecc71}50%{border-color:#54d98c}} @keyframes type-red{1%,100%{border-color:#e74c3c}50%{border-color:#ed7669}}@keyframes type-orange{1%,100%{border-color:#f1c40f}50%{border-color:#f4d03f}} @keyframes type-purple{1%,100%{border-color:#9b59b6}50%{border-color:#b07cc6}}@keyframes type-dark{1%,100%{border-color:#34495e}50%{border-color:#46627f}} .jconfirm .jconfirm-box.jconfirm-type-animated{animation-duration:2s;animation-iteration-count:infinite} .jconfirm .jconfirm-box.jconfirm-blue{border-top:solid 7px #3498db;animation-name:type-blue} .jconfirm .jconfirm-box.jconfirm-green{border-top:solid 7px #2ecc71;animation-name:type-green} .jconfirm .jconfirm-box.jconfirm-red{border-top:solid 7px #e74c3c;animation-name:type-red} .jconfirm .jconfirm-box.jconfirm-orange{border-top:solid 7px #f1c40f;animation-name:type-orange} .jconfirm .jconfirm-box.jconfirm-purple{border-top:solid 7px #9b59b6;animation-name:type-purple} .jconfirm .jconfirm-box.jconfirm-dark{border-top:solid 7px #34495e;animation-name:type-dark} .jconfirm .jconfirm-box.loading{height:120px} .jconfirm .jconfirm-box.loading:before{content:'';position:absolute;left:0;background:white;right:0;top:0;bottom:0;border-radius:10px;z-index:1} .jconfirm .jconfirm-box.loading:after{opacity:0.6;content:'';height:30px;width:30px;border:solid 3px transparent;position:absolute;left:50%;margin-left:-15px;border-radius:50%;animation:jconfirm-spin 1s infinite linear;border-bottom-color:dodgerblue;top:50%;margin-top:-15px;z-index:2} .jconfirm .jconfirm-box div.jconfirm-closeIcon{height:20px;width:20px;position:absolute;top:5px;right:5px;cursor:pointer;opacity:.6;text-align:center;transition:opacity 0.3s ease-in;font-size:27px !important;line-height:14px !important;display:none} .jconfirm .jconfirm-box div.jconfirm-closeIcon:empty{display:none} .jconfirm .jconfirm-box div.jconfirm-closeIcon .fa{font-size:16px} .jconfirm .jconfirm-box div.jconfirm-closeIcon .glyphicon{font-size:16px} .jconfirm .jconfirm-box div.jconfirm-closeIcon .zmdi{font-size:16px} .jconfirm .jconfirm-box div.jconfirm-closeIcon:hover{opacity:1} .jconfirm .jconfirm-box div.jconfirm-title-c{display:block;font-size:14px;font-weight:700;color:#202020;line-height:17px;text-align:center;padding-right:25px;padding-left:25px} .jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-icon-c{font-size:inherit;padding-bottom:15px;display:inline-block;margin-right:8px;vertical-align:middle} .jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-icon-c i{vertical-align:middle} .jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-icon-c:empty{display:none} .jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-title{font-size:inherit;font-family:inherit;display:inline-block;vertical-align:middle} .jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-title:empty{display:none} .jconfirm .jconfirm-box div.jconfirm-content-pane{box-sizing:border-box;margin-top:6px;margin-bottom:-6px;padding-right:20px;padding-left:20px;height:auto;transition:height 0.4s ease-in;display:inline-block;width:100%;position:relative;overflow:hidden;font-size:13px;font-weight:400;color:#909090;line-height:16px;text-align:center} .jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content img{max-width:100%;height:auto} .jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content:empty{display:none} .jconfirm .jconfirm-box .jconfirm-buttons{display:-ms-flexbox;display:flex;margin-top:26px;border-top:1px solid #b0b0b0} .jconfirm .jconfirm-box .jconfirm-buttons>button{margin:0} .jconfirm .jconfirm-box .jconfirm-buttons button{display:block;-ms-flex:1;flex:1;height:42px;font-size:13px;font-weight:700;color:#909090;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;min-height:1em;outline:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;-webkit-tap-highlight-color:transparent;border:none;background-image:none} .jconfirm .jconfirm-box .jconfirm-buttons button+button{border-left:1px solid #b0b0b0} .jconfirm .jconfirm-box .jconfirm-buttons button.btn-confirm{color:#0057E3;text-shadow:none;transition:background .2s} .jconfirm .jconfirm-clear{clear:both}.jconfirm.jconfirm-rtl{direction:rtl} .jconfirm.jconfirm-rtl div.jconfirm-closeIcon{left:5px;right:auto} .jconfirm.jconfirm-white .jconfirm-bg,.jconfirm.jconfirm-light .jconfirm-bg{background-color:#444;opacity:.2} .jconfirm.jconfirm-white .jconfirm-box,.jconfirm.jconfirm-light .jconfirm-box{margin:0 auto} .jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons button,.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button{text-transform:uppercase;font-size:14px;font-weight:bold;text-shadow:none} .jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons button.btn-default,.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button.btn-default{box-shadow:none;color:#333} .jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons button.btn-default:hover,.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button.btn-default:hover{background:#ddd} .jconfirm.jconfirm-black .jconfirm-bg,.jconfirm.jconfirm-dark .jconfirm-bg{background-color:darkslategray;opacity:.4} .jconfirm.jconfirm-black .jconfirm-box,.jconfirm.jconfirm-dark .jconfirm-box{box-shadow:0 2px 6px rgba(0,0,0,0.2);background:#444;border-radius:5px;color:white} .jconfirm.jconfirm-black .jconfirm-box .jconfirm-buttons,.jconfirm.jconfirm-dark .jconfirm-box .jconfirm-buttons{float:right} .jconfirm.jconfirm-black .jconfirm-box .jconfirm-buttons button,.jconfirm.jconfirm-dark .jconfirm-box .jconfirm-buttons button{border:none;background-image:none;text-transform:uppercase;font-size:14px;font-weight:bold;text-shadow:none;transition:background .1s;color:white} .jconfirm.jconfirm-black .jconfirm-box .jconfirm-buttons button.btn-default,.jconfirm.jconfirm-dark .jconfirm-box .jconfirm-buttons button.btn-default{box-shadow:none;color:#fff;background:none} .jconfirm.jconfirm-black .jconfirm-box .jconfirm-buttons button.btn-default:hover,.jconfirm.jconfirm-dark .jconfirm-box .jconfirm-buttons button.btn-default:hover{background:#666} .jconfirm .jconfirm-box.hilight.jconfirm-hilight-shake{animation:shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;transform:translate3d(0, 0, 0)} .jconfirm .jconfirm-box.hilight.jconfirm-hilight-glow{animation:glow 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;transform:translate3d(0, 0, 0)} @keyframes shake{10%,90%{transform:translate3d(-2px, 0, 0)}20%,80%{transform:translate3d(4px, 0, 0)}30%,50%,70%{transform:translate3d(-8px, 0, 0)}40%,60%{transform:translate3d(8px, 0, 0)}} @keyframes glow{0%,100%{box-shadow:0 0 3px red}50%{box-shadow:0 0 30px red}} .jconfirm{perspective:400px} .jconfirm .jconfirm-box{opacity:1;transition-property:all} .jconfirm .jconfirm-box.jconfirm-animation-top,.jconfirm .jconfirm-box.jconfirm-animation-left,.jconfirm .jconfirm-box.jconfirm-animation-right,.jconfirm .jconfirm-box.jconfirm-animation-bottom,.jconfirm .jconfirm-box.jconfirm-animation-opacity,.jconfirm .jconfirm-box.jconfirm-animation-zoom,.jconfirm .jconfirm-box.jconfirm-animation-scale,.jconfirm .jconfirm-box.jconfirm-animation-none,.jconfirm .jconfirm-box.jconfirm-animation-rotate,.jconfirm .jconfirm-box.jconfirm-animation-rotatex,.jconfirm .jconfirm-box.jconfirm-animation-rotatey,.jconfirm .jconfirm-box.jconfirm-animation-scaley,.jconfirm .jconfirm-box.jconfirm-animation-scalex{opacity:0}.jconfirm .jconfirm-box.jconfirm-animation-rotate{-ms-transform:rotate(90deg);transform:rotate(90deg)} .jconfirm .jconfirm-box.jconfirm-animation-rotatex{transform:rotateX(90deg);-ms-transform-origin:center;transform-origin:center} .jconfirm .jconfirm-box.jconfirm-animation-rotatexr{transform:rotateX(-90deg);-ms-transform-origin:center;transform-origin:center} .jconfirm .jconfirm-box.jconfirm-animation-rotatey{-ms-transform:rotatey(90deg);transform:rotatey(90deg);-ms-transform-origin:center;transform-origin:center} .jconfirm .jconfirm-box.jconfirm-animation-rotateyr{-ms-transform:rotatey(-90deg);transform:rotatey(-90deg);-ms-transform-origin:center;transform-origin:center} .jconfirm .jconfirm-box.jconfirm-animation-scaley{-ms-transform:scaley(1.5);transform:scaley(1.5);-ms-transform-origin:center;transform-origin:center} .jconfirm .jconfirm-box.jconfirm-animation-scalex{-ms-transform:scalex(1.5);transform:scalex(1.5);-ms-transform-origin:center;transform-origin:center} .jconfirm .jconfirm-box.jconfirm-animation-top{-ms-transform:translate(0px, -100px);transform:translate(0px, -100px)} .jconfirm .jconfirm-box.jconfirm-animation-left{-ms-transform:translate(-100px, 0px);transform:translate(-100px, 0px)} .jconfirm .jconfirm-box.jconfirm-animation-right{-ms-transform:translate(100px, 0px);transform:translate(100px, 0px)} .jconfirm .jconfirm-box.jconfirm-animation-bottom{-ms-transform:translate(0px, 100px);transform:translate(0px, 100px)} .jconfirm .jconfirm-box.jconfirm-animation-zoom{-ms-transform:scale(1.2);transform:scale(1.2)} .jconfirm .jconfirm-box.jconfirm-animation-scale{-ms-transform:scale(0.5);transform:scale(0.5)} .jconfirm .jconfirm-box.jconfirm-animation-none{visibility:hidden} .swipe-wrappper{overflow:hidden;visibility:hidden;position:relative;height:100vh} .swipe-slide-items{position:relative} .swipe-slide-item{float:left;width:100%;height:100vh;position:relative;background:#fff} .swipe-slide-item>.layout-contents{width:100%;height:95vh;overflow-y:auto;-webkit-overflow-scrolling:touch} #btn-close-modal{text-align:center;cursor:pointer;color:#333} .animated-modal-content{position:relative;overflow:hidden;min-height:100%} .animated-modal-content>.layout-contents{width:100%;height:75vh;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-top:38px;margin-top:68px} .animated{animation-duration:1s;animation-fill-mode:both} @keyframes slideInUp{0%{transform:translateY(100%);visibility:visible}100%{transform:translateY(0)}} .slideInUp{animation-name:slideInUp} @keyframes slideOutDown{0%{transform:translateY(0)}100%{visibility:hidden;transform:translateY(100%)}} .slideOutDown{animation-name:slideOutDown}.jspContainer{overflow:hidden;position:relative} .jspPane{position:absolute} .jspVerticalBar{position:absolute;top:0;right:0;width:4px;height:100%;background:red} .jspHorizontalBar{position:absolute;bottom:0;left:0;width:100%;height:4px;background:red} .jspCap{display:none}.jspHorizontalBar .jspCap{float:left}.jspTrack{background:#eee;position:relative} .jspDrag{background:#aeaeae;position:relative;top:0;left:0;cursor:pointer} .jspHorizontalBar .jspTrack,.jspHorizontalBar .jspDrag{float:left;height:100%} .jspArrow{background:#50506d;text-indent:-20000px;display:block;cursor:pointer;padding:0;margin:0} .jspArrow.jspDisabled{cursor:default;background:#80808d} .jspVerticalBar .jspArrow{height:4px} .jspHorizontalBar .jspArrow{width:4px;float:left;height:100%} .jspVerticalBar .jspArrow:focus{outline:none} .jspCorner{background:#eeeef4;float:left;height:100%}* html .jspCorner{margin:0 -3px 0 0} .grayscale{filter:url("data:image/svg+xml;utf8,#grayscale");filter:gray;-webkit-filter:grayscale(100%)} .grayscale.grayscale-fade{-webkit-transition:-webkit-filter .5s} .grayscale.grayscale-fade:hover{filter:none} .grayscale-replaced.grayscale-fade svg{opacity:1;transition:opacity .5s ease} .grayscale-replaced.grayscale-fade:hover svg{opacity:0}#itoast_frame{position:fixed;top:0px;font-size:.8125rem;text-align:center;display:none;padding:40px 1rem;opacity:0.7;width:100%;z-index:1000}.theme_red{border:2px solid #da6262;background-color:#cd6c6c;color:#FFF}.theme_green{border:2px solid #D6E9C6;background-color:#DFF0D8;color:#468847}.theme_dark{background-color:#202020;color:#fff} .layout-header{display:block;overflow:hidden;position:fixed;top:0;right:0;left:0;z-index:800;box-shadow:0px 1px 3px 0px rgba(0,0,0,0.15)} .layout-header .layout-navigation-bar{ /*padding: 0px; height: 50px; position: relative; background-color: rgb(0, 87, 227); -- 빨강 */ /*padding: 0px; height: 50px; position: relative; background-color: #0057E3; 파랑 */ /* 기본색(대표색) #ffcc00 버튼색 #005174 */ /* padding: 0px; height: 50px; position: relative; background-color: #ffcc00; 노랑 */ /* padding: 0px; height: 50px; position: relative; background-color: #0057E3; 파랑 */ /* padding: 0px; height: 50px; position: relative; background-color: #333333; 블랙 */ /* padding: 0px; height: 50px; position: relative; background-color: #fff; 화이트 */ /* padding: 0px; height: 50px; position: relative; background-color: #FF8080; 다홍 */ /* padding: 0px; height: 50px; position: relative; background-color: #00B0F0; 하늘 0, 176, 240 */ /* padding: 0px; height: 50px; position: relative; background-color: #01BDD5; 청록 */ /* padding: 0px; height: 50px; position: relative; background-color: #4F4CCE; 퍼플 */ /* padding: 0px; height: 50px; position: relative; background-color: #00B0F0; */ padding: 0px; height: 50px; position: relative; background-color: #fff; border-bottom:1px solid #00B0F0; box-shadow: 3px 3px 3px 1px #BFBFBF; /* 1fc5bf 1bacaa 1b72ac 678bf7 da2828 2bf0b8 */ } .layout-header .layout-navigation-bar .logo{ /* display:block;text-indent:-9999px;margin-top:12px;background-image:url(../img/sprites.png);background-position:0px -239px;width:72px;height:20px; */ display:block;text-indent:-9999px;margin-top:7px;width:72px;height:20px } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.layout-header .layout-navigation-bar .logo{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} /* 텍스트 로고 */ .layout-header .layout-navigation-bar .logo-sm-txt { width: 24px; height: 44px; display: block; text-align: center; font-size: 0.37rem; color: white; /* 화이트 */ /* width: 24px; height: 44px; display: block; text-align: center; font-size: 0.37rem; color: #333333; 블랙 */ } @media not all, all and (min-resolution:192dpi) { .layout-header .layout-navigation-bar .logo-sm-txt { /*background-image: url("../img/sprites@2x.png");*/ /*background-size: 366px 347px;*/ } } .layout-header .layout-navigation-bar .logo-big-txt { width: 57px; height: 35px; padding-top:5px; display: block; text-align: center; font-size: 1.4rem; font-weight: 900; color: #333333; } .layout-header .layout-navigation-bar .btn-back-black{display:inline-block;text-indent:-9999px;background-image:url(../img/sprites.png);background-position:-192px -55px;width:44px;height:44px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.layout-header .layout-navigation-bar .btn-back-black{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .layout-header .layout-navigation-bar .btn-back-white{display:inline-block;text-indent:-9999px;background-image:url(../img/sprites.png);background-position:-126px -64px;width:44px;height:44px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.layout-header .layout-navigation-bar .btn-back-white{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .layout-header .layout-navigation-bar .btn-close{display:inline-block;text-indent:-9999px;background-image:url(../img/sprites.png);background-position:-66px -133px;width:44px;height:44px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.layout-header .layout-navigation-bar .btn-close{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} /*.layout-header .layout-navigation-bar .btn-menu{display:inline-block;text-indent:-9999px;background-image:url(../img/icon/house_logo_white_44x44.png);width:35px;height:35px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.layout-header .layout-navigation-bar .btn-menu{background-image:url(../img/icon/house_logo_white_44x44.png); background-size:35px 35px; }} .layout-header .layout-navigation-bar .btn-menu{display:inline-block;text-indent:-9999px;background-image:url(../img/icon/vills_white_45x40.png);width:35px;height:35px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.layout-header .layout-navigation-bar .btn-menu{background-image:url(../img/icon/vills_white_45x40.png); background-size:35px 35px; }} */ .layout-header .layout-navigation-bar .btn-menu{display:inline-block;text-indent:-9999px;background-image:url(../img/icon/vills_blue_30x30.png);width:30px;height:30px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.layout-header .layout-navigation-bar .btn-menu{background-image:url(../img/icon/vills_blue_30x30.png); background-size:30px 30px; }} .layout-header .layout-navigation-bar .btn-login-black{display:inline-block;text-indent:-9999px;background-image:url(../img/icon/round_login_black_24dp.png); margin:3px 8px; width:24px;height:24px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.layout-header .layout-navigation-bar .btn-login-black{background-image:url(../img/icon/round_login_black_24dp.png);background-size:24px 24px}} .layout-header .layout-navigation-bar .btn-search-white{display:inline-block;text-indent:-9999px;background-image:url(../img/sprites.png);background-position:-192px 0px;width:44px;height:44px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.layout-header .layout-navigation-bar .btn-search-white{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .layout-header .layout-navigation-bar .btn-search-pink{display:inline-block;text-indent:-9999px;background-image:url(../img/sprites.png);background-position:-192px -100px;width:44px;height:44px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.layout-header .layout-navigation-bar .btn-search-pink{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .layout-header .layout-navigation-bar .btn-search-black{display:inline-block;text-indent:-9999px;background-image:url(../img/sprites.png);background-position:-100px -189px;width:44px;height:44px} .layout-header .layout-navigation-bar .btn-share-white{display:inline-block;text-indent:-9999px;background-image:url(../img/icon/outline_share_white_24dp.png); width:30px;height:30px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.layout-header .layout-navigation-bar .btn-share-white{background-image:url(../img/icon/outline_share_white_24dp.png);background-size:30px 30px}} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.layout-header .layout-navigation-bar .btn-search-black{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .layout-header .layout-navigation-bar .btn-push{display:inline-block;text-indent:-9999px;background-image:url(../img/sprites.png);background-position:-50px -189px;width:44px;height:44px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.layout-header .layout-navigation-bar .btn-push{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .layout-header .layout-navigation-bar .search-word-input{width:90%;height:36px;border:1px solid #0057E3;padding:8px 10px;-webkit-appearance:none;-webkit-border-radius:0} .layout-header .layout-navigation-bar .left-view{position:absolute;top:9px;left:10px} .layout-header .layout-navigation-bar .left-view *{float:left} .layout-header .layout-navigation-bar .right-view{position:absolute;top:10px;right:1rem; } .layout-header .layout-navigation-bar .right-view ~ .layout-page-title{height:60px} .layout-header .layout-navigation-bar .layout-page-title{height:50px;font-size:1.063rem;font-weight:700;color:#fff;text-align:center;line-height:50px; } /* .layout-header .layout-gnb{top:50px;left:0;width:100%;border-bottom:1px solid #979797;background:#fff;height:39px} .layout-header .layout-gnb .layout-gnb-title-bar{line-height:39px;text-align:center;font-size:.875rem} .layout-header .layout-gnb .layout-gnb-scroll-bar{left:0;float:none;overflow-x:auto;width:100%;white-space:nowrap;padding:0 1rem} .layout-header .layout-gnb .layout-gnb-scroll-bar li{height:39px;margin:0 10px;float:none;display:inline-block;white-space:nowrap} .layout-header .layout-gnb .layout-gnb-scroll-bar li a{display:block;font-size:.875rem;line-height:39px;color:#202020;position:relative;font-weight:700} .layout-header .layout-gnb .layout-gnb-scroll-bar li.active a{color:#0057E3} .layout-header .layout-gnb .layout-gnb-scroll-bar li.active a::after{content:'';display:block;width:100%;height:2px;background:#0057E3;position:absolute;bottom:0px;left:0;z-index:1000000} .layout-header .layout-gnb .layout-gnb-scroll-bar::-webkit-scrollbar{display:none} */ .layout-header .layout-gnb{left:0;width:100%;border-bottom:1px solid #979797;background:#fff;} .layout-header .layout-gnb .layout-gnb-title-bar{line-height:39px;text-align:center;font-size:.875rem} .layout-header .layout-gnb .layout-gnb-scroll-bar{left:0;float:none;overflow-x:auto;width:100%;white-space:nowrap;padding:0 1rem} .layout-header .layout-gnb .layout-gnb-scroll-bar li{height:39px;margin:0 10px;float:none;display:inline-block;white-space:nowrap} .layout-header .layout-gnb .layout-gnb-scroll-bar li a{display:block;font-size:.875rem;line-height:39px;color:#202020;position:relative;font-weight:700} .layout-header .layout-gnb .layout-gnb-scroll-bar li.active a{color:#0057E3} .layout-header .layout-gnb .layout-gnb-scroll-bar li.active a::after{content:'';display:block;width:100%;height:2px;background:#0057E3;position:absolute;bottom:0px;left:0;z-index:1000000} .layout-header .layout-gnb .layout-gnb-scroll-bar::-webkit-scrollbar{display:none} .layout-header .sub-header .layout-gnb{left:0;width:100%;border-bottom:1px solid #979797;background:#fff;} .layout-header .sub-header .layout-gnb .layout-gnb-title-bar{line-height:39px;text-align:center;font-size:.875rem} .layout-header .sub-header .layout-gnb .layout-gnb-scroll-bar{left:0;float:none;overflow-x:auto;width:100%;white-space:nowrap;padding:0 1rem} .layout-header .sub-header .layout-gnb .layout-gnb-scroll-bar li{height:39px;margin:0 10px;float:none;display:inline-block;white-space:nowrap} .layout-header .sub-header .layout-gnb .layout-gnb-scroll-bar li a{display:block;font-size:.875rem;line-height:39px;color:#202020;position:relative;font-weight:700} .layout-header .sub-header .layout-gnb .layout-gnb-scroll-bar li.active a{color:#0057E3} .layout-header .sub-header .layout-gnb .layout-gnb-scroll-bar li.active a::after{content:'';display:block;width:100%;height:2px;background:#0057E3;position:absolute;bottom:0px;left:0;z-index:1000000} .layout-header .sub-header .layout-gnb .layout-gnb-scroll-bar::-webkit-scrollbar{display:none} .layout-header.menu{height:55px;background:#696867;color:#fff} .layout-header.menu .layout-navigation-bar{height:55px;background:transparent} .layout-header.menu .layout-navigation-bar .user-name{padding:1rem;font-size:1.125rem;font-weight:700} .layout-header.menu .layout-navigation-bar .user-name .icon{display:inline-block;margin-right:5px} .layout-header.menu .layout-navigation-bar .user-name .icon.icon-medal{background-image:url(../img/sprites.png);background-position:-324px -260px;width:19px;height:24px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.layout-header.menu .layout-navigation-bar .user-name .icon.icon-medal{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .layout-header.menu .layout-navigation-bar .btn-close{display:inline-block;text-indent:-9999px;background-image:url(../img/sprites.png);background-position:0px -189px;width:44px;height:44px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.layout-header.menu .layout-navigation-bar .btn-close{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .layout-header.menu .private-menu-list li{width:25%;float:left;border-top:1px solid #848382;border-right:1px solid #848382;height:50px} .layout-header.menu .private-menu-list li:last-child{border-right:none} .layout-header.menu .private-menu-list li a{display:block;color:#fff;font-size:.6875rem;text-align:center;position:relative;font-weight:300} .layout-header.menu .private-menu-list li a .icon{margin-top:1rem;display:inline-block} .layout-header.menu .private-menu-list li a .icon.icon-mypage{background-image:url(../img/sprites.png);background-position:-288px -108px;width:25px;height:25px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.layout-header.menu .private-menu-list li a .icon.icon-mypage{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .layout-header.menu .private-menu-list li a .icon.icon-cpn{background-image:url(../img/sprites.png);background-position:-288px -36px;width:25px;height:25px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.layout-header.menu .private-menu-list li a .icon.icon-cpn{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .layout-header.menu .private-menu-list li a .icon.icon-filter{background-image:url(../img/sprites.png);background-position:-192px -150px;width:25px;height:25px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.layout-header.menu .private-menu-list li a .icon.icon-filter{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .layout-header.menu .private-menu-list li a .icon.icon-zzim{background-image:url(../img/sprites.png);background-position:-192px -150px;width:25px;height:25px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.layout-header.menu .private-menu-list li a .icon.icon-zzim{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .layout-header.menu .private-menu-list li a span{display:block;margin-top:1rem} .layout-header.menu .private-menu-list li a .count{display:inline-block;background:#fff;color:#0057E3;border-radius:15px;padding:1px;width:30px;position:absolute;top:13px;left:53%;font-size:.6875rem} /* 메뉴 - 그룹구분 */ .layout-header.menu .private-group-list li{width:25%;float:left;top:80px;background-color:#fff;border-top:1px solid #848382;border-right:1px solid #848382;height:50px} .layout-header.menu .private-group-list li:last-child{border-right:none} .layout-header.menu .private-group-list li a{display:block;color:#696867;font-size:.6875rem;text-align:center;position:relative;font-weight:300} .layout-header.menu .private-group-list li.active a{color:#0057E3} .layout-header.menu .private-group-list li.active a::after{display:block;color:#0057E3;font-size:1.6875rem;text-align:center;position:relative;font-weight:600} .layout-header.menu .private-group-list li a .icon{margin-top:1rem;display:inline-block} .layout-header.menu .private-group-list li a .icon.icon-yw{background-image:url(../img/sprites.png);background-position:-288px -108px;width:25px;height:25px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.layout-header.menu .private-group-list li a .icon.icon-yw{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .layout-header.menu .private-group-list li a .icon.icon-ym{background-image:url(../img/sprites.png);background-position:-288px -36px;width:25px;height:25px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.layout-header.menu .private-group-list li a .icon.icon-ym{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .layout-header.menu .private-group-list li a .icon.icon-fw{background-image:url(../img/sprites.png);background-position:-192px -150px;width:25px;height:25px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.layout-header.menu .private-group-list li a .icon.icon-fw{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .layout-header.menu .private-group-list li a .icon.icon-fm{background-image:url(../img/sprites.png);background-position:-192px -150px;width:25px;height:25px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.layout-header.menu .private-group-list li a .icon.icon-fm{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .layout-header.menu .private-group-list li a span{display:block;margin-top:1rem} .layout-header.menu .private-group-list li a .count{display:inline-block;background:#fff;color:#0057E3;border-radius:15px;padding:1px;width:30px;position:absolute;top:13px;left:53%;font-size:.6875rem} /* 메뉴 - 그룹구분 */ /* 필터 */ .layout-header.filter{height:110px;background:#696867;color:#fff} .layout-header.filter .layout-navigation-bar{height:55px;background:transparent} .layout-header.filter .layout-navigation-bar .user-name{padding:1rem;font-size:1.125rem;font-weight:700} .layout-header.filter .layout-navigation-bar .user-name .icon{display:inline-block;margin-right:5px} .layout-header.filter .layout-navigation-bar .user-name .icon.icon-medal{background-image:url(../img/sprites.png);background-position:-324px -260px;width:19px;height:24px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.layout-header.filter .layout-navigation-bar .user-name .icon.icon-medal{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .layout-header.filter .layout-navigation-bar .btn-close{display:inline-block;text-indent:-9999px;background-image:url(../img/sprites.png);background-position:0px -189px;width:44px;height:44px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.layout-header.filter .layout-navigation-bar .btn-close{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .layout-header.filter .private-group-list li{width:25%;float:left;top:80px;background-color:#fff;border-top:1px solid #848382;border-right:1px solid #848382;height:50px} .layout-header.filter .private-group-list li:last-child{border-right:none} .layout-header.filter .private-group-list li a{display:block;color:#696867;font-size:.6875rem;text-align:center;position:relative;font-weight:300} .layout-header.filter .private-group-list li.active a{color:#0057E3} .layout-header.filter .private-group-list li.active a::after{display:block;color:#0057E3;font-size:1.6875rem;text-align:center;position:relative;font-weight:600} .layout-header.filter .private-group-list li a .icon{margin-top:1rem;display:inline-block} .layout-header.filter .private-group-list li a .icon.icon-yw{background-image:url(../img/sprites.png);background-position:-288px -108px;width:25px;height:25px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.layout-header.filter .private-group-list li a .icon.icon-yw{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .layout-header.filter .private-group-list li a .icon.icon-ym{background-image:url(../img/sprites.png);background-position:-288px -36px;width:25px;height:25px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.layout-header.filter .private-group-list li a .icon.icon-ym{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .layout-header.filter .private-group-list li a .icon.icon-fw{background-image:url(../img/sprites.png);background-position:-192px -150px;width:25px;height:25px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.layout-header.filter .private-group-list li a .icon.icon-fw{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .layout-header.filter .private-group-list li a .icon.icon-fm{background-image:url(../img/sprites.png);background-position:-192px -150px;width:25px;height:25px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.layout-header.filter .private-group-list li a .icon.icon-fm{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .layout-header.filter .private-group-list li a span{display:block;margin-top:1rem} .layout-header.filter .private-group-list li a .count{display:inline-block;background:#fff;color:#0057E3;border-radius:15px;padding:1px;width:30px;position:absolute;top:13px;left:53%;font-size:.6875rem} /* 필터 */ .layout-header.product-detail-view-header{background:transparent;height:250px;box-shadow:none;background:rgba(0,0,0,0.3);background:-webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0.3)), color-stop(100%, transparent));background:linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, transparent 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0)} .layout-header.product-detail-view-header .layout-navigation-bar{height:100%;background:transparent} .layout-header.product-detail-view-header .layout-navigation-bar .layout-page-title{display:none;color:#202020} .layout-header.product-detail-view-header-scroll{display:none; background:#fff; height:50px; } .layout-header.product-detail-view-header-scroll .layout-navigation-bar{height:100%;background:transparent} .layout-header.product-detail-view-header-scroll .layout-navigation-bar .layout-page-title{height:50px;font-size:1.063rem;font-weight:700;color:#202020;text-align:center} .layout-header.search-header{background:#fff;height:55px} .layout-header.search-header .layout-navigation-bar{height:100%;background:transparent;padding:8px 1rem} .layout-header.search-header .layout-navigation-bar .layout-page-title{display:block;color:#202020} .layout-header.sub-header{background:#fff} /*.layout-header.sub-header .layout-navigation-bar{height:50px;background:#ffcc00;border-bottom:1px solid #202020}*/ .layout-header.sub-header .layout-navigation-bar{height:50px; border-bottom:1px solid #202020} .layout-header.sub-header .layout-navigation-bar .layout-page-title{height:50px;font-size:1.063rem;font-weight:700;color:#202020;text-align:center} .layout-header.sub-header .layout-gnb{background:#fff;border-bottom:1px solid #979797} .layout-contents{display:block;box-sizing:border-box;position:relative;min-height:100%;} .layout-contents .layout-contents-nav{background:#fff;margin-bottom:5px;height:40px} .layout-contents .layout-contents-nav .layout-contents-nav-scroll-bar{left:0;float:none;overflow-x:auto;width:100%;white-space:nowrap;padding:0 1rem} .layout-contents .layout-contents-nav .layout-contents-nav-scroll-bar li{height:40px;margin:0 10px;float:none;display:inline-block;white-space:nowrap} .layout-contents .layout-contents-nav .layout-contents-nav-scroll-bar li a{display:block;font-size:.875rem;line-height:39px;color:#909090;position:relative;font-weight:400} .layout-contents .layout-contents-nav .layout-contents-nav-scroll-bar li.active a{color:#202020;font-weight:700;text-decoration:underline} .layout-contents .layout-contents-nav .layout-contents-nav-scroll-bar::-webkit-scrollbar{display:none} .layout-contents .contents-top-message{padding:0 1rem 1rem; margin-bottom:1rem;font-size:0.813rem;font-weight:400;color:#202020;text-align:center;line-height:1.385em;border-bottom:1px dotted #e0e0e0} .layout-contents .contents-top-message mark{color:#e73c44} .layout-contents .contents-top-message em{font-size:0.688rem;color:#909090} .layout-contents.none-bottom{padding-bottom:0} .layout-contents.bottom-shortcut{min-height:80%; } .layout-contents.vertical-middle{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center} .layout-footer{padding:20px 1rem 50px;font-size:11px;color:#909090;line-height:140%;position:relative;background:#fff} .layout-footer li{display:inline-block;margin-right:10px} .layout-footer li:after{content:'';display:inline-block;width:1px;height:8px;border-right:1px solid #d7d7d7;margin-left:10px} .layout-footer li:last-child:after{display:none} .layout-footer .link li a{font-size:11px;color:#000;font-weight:700} .layout-footer .address-contents,.layout-footer .call-center{margin-top:10px} .layout-footer .copyright{margin-top:15px;font-size:11px;color:#979797} .layout-footer .btn{position:fixed;bottom:70px;display:block;z-index:100;text-indent:-9999px;opacity:0.8} .layout-footer .btn.btn-back{left:1rem;background-image:url(../img/sprites.png);background-position:-196px -189px;width:40px;height:40px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.layout-footer .btn.btn-back{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .layout-footer .btn.btn-top{right:1rem;background-image:url(../img/sprites.png);background-position:-242px -92px;width:40px;height:40px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.layout-footer .btn.btn-top{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} /* 레이아웃 바텀 네비 */ .layout-footer-nav{width:100%;position:fixed;bottom:0;left:0;z-index:2000;border-top:1px solid #707070;background:#fff;box-shadow:0px -1px 3px 0px rgba(0,0,0,0.15)} .layout-footer-nav:before,.layout-footer-nav:after{content:"";display:table} .layout-footer-nav:after{clear:both}.layout-footer-nav li{width:20%;float:left;height:55px} .layout-footer-nav li {display:block;text-align:center;padding:6px 0;color:#202020;font-size:.6875rem;font-weight:600;} .layout-footer-nav li .icon{display:block;margin:0 auto;margin-bottom:3px} .layout-footer-nav li .icon.home{background-image:url(../img/icon/nav_home_black_24dp.png);width:24px;height:24px; filter: grayscale(100%); } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.layout-footer-nav li .icon.home{background-image:url(../img/icon/nav_home_black_24dp.png);}} .layout-footer-nav li.active .icon.home{background-image:url(../img/icon/nav_home_black_fill_24dp.png);width:24px;height:24px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.layout-footer-nav li.active .icon.home{background-image:url(../img/icon/nav_home_black_fill_24dp.png);}} .layout-footer-nav li .icon.serv{background-image:url(../img/icon/nav_serv_black_24dp.png);width:24px;height:24px; filter: grayscale(100%); } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.layout-footer-nav li .icon.serv{background-image:url(../img/icon/nav_serv_black_24dp.png);}} .layout-footer-nav li.active .icon.serv{background-image:url(../img/icon/nav_serv_black_fill_24dp.png);width:24px;height:24px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.layout-footer-nav li.active .icon.serv{background-image:url(../img/icon/nav_serv_black_fill_24dp.png);}} .layout-footer-nav li .icon.our{background-image:url(../img/icon/vills_white_24x24.png);width:24px;height:24px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.layout-footer-nav li .icon.our{background-image:url(../img/icon/vills_white_24x24.png);}} .layout-footer-nav li.active .icon.our{background-image:url(../img/icon/vills_blue_weight_24x24.png);width:24px;height:24px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.layout-footer-nav li.active .icon.our{background-image:url(../img/icon/vills_blue_weight_24x24.png);}} .layout-footer-nav li .icon.mq{background-image:url(../img/icon/nav_mq_black_24dp.png);width:24px;height:24px; filter: grayscale(100%); } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.layout-footer-nav li .icon.mq{background-image:url(../img/icon/nav_mq_black_24dp.png);}} .layout-footer-nav li.active .icon.mq{background-image:url(../img/icon/nav_mq_black_fill_24dp.png);width:24px;height:24px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.layout-footer-nav li.active .icon.mq{background-image:url(../img/icon/nav_mq_black_fill_24dp.png);}} .layout-footer-nav li .icon.more{background-image:url(../img/icon/nav_more_black_24dp.png);width:24px;height:24px; filter: grayscale(100%); } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.layout-footer-nav li .icon.more{background-image:url(../img/icon/nav_more_black_24dp.png);}} .layout-footer-nav li.active .icon.more{background-image:url(../img/icon/nav_more_black_fill_24dp.png);width:24px;height:24px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.layout-footer-nav li.active .icon.more{background-image:url(../img/icon/nav_more_black_fill_24dp.png);}} .layout-footer-ad{width:100%;position:fixed;bottom:0;left:0;z-index:800;border-top:1px solid #707070;background:#fff;box-shadow:0px -1px 3px 0px rgba(0,0,0,0.15)} .layout-submit{display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;padding:1rem 0.7rem} .layout-submit .btn-submit-normal{display:block;-ms-flex:1;flex:1;padding-top:2px;font-size:1.000rem;font-weight:700;color:#333333;text-align:center;line-height:48px;background-color:#00B0F0;border-radius:4px} .layout-submit .btn-submit-normal:active{background-color:#009AD3} .layout-submit .btn-submit-normal[disabled]{box-shadow:inset 0 1px 0 0 #bbb;background-color:#e0e0e0} .layout-submit .btn-submit-white{display:block;-ms-flex:1;flex:1;padding-top:2px;font-size:1.000rem;font-weight:700;color:#333333;text-align:center;line-height:48px;box-shadow:inset 0 1px 0 0 rgba(175,171,171,0.9);background-color:#fff; border-radius:4px} .layout-submit .btn-submit-white{background-color:#fff} .layout-submit .btn-submit-dark{display:block;-ms-flex:1;flex:1;padding-top:2px;font-size:1.000rem;font-weight:700;color:#fff;text-align:center;line-height:48px;background-color:#333333;border-radius:4px} .layout-submit .btn-submit-dark:active{background-color:#005174} .layout-submit .btn-submit-dark[disabled]{box-shadow:inset 0 1px 0 0 #bbb;background-color:#e0e0e0} .layout-submit .btn-submit-navy{display:block;-ms-flex:1;flex:1;padding-top:2px;font-size:1.000rem;font-weight:700;color:#fff;text-align:center;line-height:48px;background-color:#0057E3;border-radius:4px} .layout-submit .btn-submit-navy:active{background-color:#003D57} .layout-submit .btn-submit-navy[disabled]{box-shadow:inset 0 1px 0 0 #bbb;background-color:#e0e0e0} .layout-submit .btn-submit-line{display:block;-ms-flex:1;flex:1;margin: 0 3px; padding-top:2px;font-size: 0.8rem;font-weight:600;color:#333;text-align:center;line-height:40px;border:1px solid #005174; border-radius:4px} .layout-submit .btn-submit-line:active{background-color:#003D57} .layout-submit .btn-submit-cancel{display:block;-ms-flex:1;flex:1;padding-top:2px;font-size:1.000rem;font-weight:700;color:#fff;text-align:center;line-height:48px;box-shadow:inset 0 1px 0 0 rgba(175,171,171,0.9);background-color:#afabab; border-radius:4px} .layout-submit .btn-submit-cancel:active{background-color:#9a9695} .layout-submit .btn-submit-multi-cancel{display:block;-ms-flex:1;flex:1;padding-top:2px;margin-right:10px;font-size:1.000rem;font-weight:700;color:#fff;text-align:center;line-height:48px;box-shadow:inset 0 1px 0 0 rgba(175,171,171,0.9);background-color:#afabab; border-radius:4px} .layout-submit .btn-submit-multi-cancel{background-color:#9a9695} .layout-submit .btn-submit-search{display:block;-ms-flex:1;flex:1;padding-top:2px;font-size:1.000rem;font-weight:700;color:#fff;text-align:center;line-height:48px;box-shadow:inset 0 1px 0 0 rgba(255,192,0,0.9);background-color:#FF7F27; border-radius:4px} .layout-submit .btn-submit-search:active{background-color:#FFC000} .layout-multi-submit{display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;padding:0.2rem 0.5rem} .layout-multi-submit .btn-submit-line{display:block;-ms-flex:1;flex:1;margin: 0 3px; padding-top:2px;font-size: 1.0rem;font-weight:600;color:#333;text-align:center;line-height:40px;border:1px solid #005174; border-radius:4px} .layout-multi-submit .btn-submit-line:active{background-color:#9a9695} .layout-submit.fix{position:fixed;right:0;bottom:0;left:0;z-index:800;background:#F1F1F1;height:auto;border-top:1px solid #ccc} .layout-submit.pay{position:fixed;right:0;bottom:0;left:0;z-index:800;background:#F1F1F1;height:auto;border-top:1px solid #ccc} .layout-submit.pay .btn-submit-normal{border-radius:3px} .layout-submit.share{position:fixed;right:0;bottom:0;left:0;z-index:800;background:#fff;height:auto;border-top:1px solid #ccc; border-radius:20px;} .layout-submit.share .btn-submit-normal{border-radius:3px} /* .layer-container.share{position:fixed;right:0;bottom:0;left:0;z-index:800;background:#fff;height:auto;border-top:1px solid #ccc; border-radius:20px;} .layer-container.share .btn-submit-normal{border-radius:3px} */ .layout-popup{padding:10px 25px 0;height:80%;height:80vh;border-radius:10px;background-color:#fff} .layout-popup .layout-popup-title{display:block;padding:15px 0 10px;font-size:1.000rem;font-weight:700;color:#333;text-align:center;border-bottom:1px solid #aaa} .layout-popup .layout-popup-footer{display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;position:absolute;right:0;bottom:0;left:0;height:42px;border-top:1px solid #aaa;z-index:999999999999999} .layout-popup .layout-popup-footer .btn-popup-footer{border-radius:10px;background:#fff;display:block;-ms-flex:1;flex:1;font-size:0.875rem;font-weight:700;color:#0057E3;text-align:center;line-height:42px} .layout-popup .layout-popup-contents{display:block} .layout-loading{display:block;position:fixed;left:0;top:0;right:0;bottom:0;z-index:1000} .layout-loading:after{content:'';display:block;width:100%;height:100%;background:#000;opacity:0.5} .layout-loading .loading-item{position:absolute;left:50%;top:50%;margin-left:-50px;margin-top:-50px;z-index:1000} .ad-container .ad-title{display:none} .ad-container .banners:before,.ad-container .banners:after{content:"";display:table} .ad-container .banners:after{clear:both} .ad-container .banners .banner-item{display:block;background:#fff} .ad-container .banners .banner-item.pink{display:block; background-color:#FBCFD0; } .ad-container .banners .banner-item img{max-height:100%;max-width:100%} .ad-container .banners .swiper-pagination{width:auto;background:#000;padding:0 5px;color:#fff;font-size:0.55em;border-radius:5px;right:16px;opacity:0.5;bottom:5px} .front-container .front{width:100%; height:160px;} .front-container .front-title{display:none} .front-container .front:before,.front-container .front:after{content:"";display:table} .front-container .front:after{clear:both} .front-container .front .front-item{display:block; height:160px; } .front-container .front .front-item img{max-width:100%} .iframe-external-wrapper{width:100%;height:90vh;overflow:hidden;-webkit-overflow-scrolling:touch;overflow-y:scroll} .iframe-external-wrapper .iframe-external{width:100%;height:100%;height:100vh} .ex-event-trigger{position:fixed;right:0;bottom:100px;left:0;z-index:800;height:50px;text-align:center;background-color:rgba(255,255,255,0.1)} .ex-event-trigger li{float:left;margin-left:10px}.ex-event-trigger .btn{color:#ccc;font-size:10px} .term-box{margin-top:50px;margin-bottom:50px; padding-left:1rem;padding-right:1rem;position:relative;overflow:hidden} .external-iframe{margin-top:50px;margin-bottom:50px; padding-left:1rem;padding-right:1rem;position:relative;overflow:hidden} .external-iframe iframe{width:100%;height:100vh} @keyframes heart{0%{transform:scale(1)}50%{transform:scale(1.3)}100%{transform:scale(1)}} .forms{position:relative} .forms label.label{display:block;padding-top:5px;padding-bottom:2px;padding-left:5px;font-size:1rem;font-weight:600;color:#202020} .forms label.label .btn-info{display:inline-block;margin:-2px 0 0 0;vertical-align:middle;text-indent:-9999px;background-image:url(../img/sprites.png);background-position:-268px -220px;width:13px;height:13px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.forms label.label .btn-info{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .forms .btn-inline{display:inline-block;box-sizing:border-box;height:40px;padding:0 5px;min-width:70px;background-color:#F1F1F1;border:1px solid #DEDEDE;border-radius:3px;line-height:40px;font-size:.8125rem;font-weight:400;color:#909090;text-align:center} .forms .btn-inline2{display:inline-block;box-sizing:border-box;height:40px;padding:0 5px;min-width:70px;background-color:#F1F1F1;border:1px solid #DEDEDE;border-radius:3px;line-height:40px;font-size:.8125rem;font-weight:400;color:#909090;text-align:right} .forms textarea {width: 100%; height: 450px; padding: 10px; box-sizing: border-box; border: solid 1px #909090; border-radius: 5px; font-size: 1rem; resize: vertical; } .forms textarea.cmmt{width: 100%; height: 53px; min-height: 40px; max-height: 140px; padding: 10px; box-sizing: border-box; border: solid 1px #909090; border-radius: 5px; font-size: 1rem; resize: vertical; } .forms textarea.report{height: 100px; } /*.textarea{ white-space:pre-line }*/ textarea{ height: 100%; white-space:pre-line; } textarea::placeholder {color:#ccc; font-size: 1rem; color:#BFBFBF; } textarea:focus::placeholder{ color:transparent; } textarea::-webkit-input-placeholder {color:#ccc; font-size: 1rem; color:#BFBFBF; } textarea:-ms-input-placeholder {color:#ccc; font-size: 1rem; color:#BFBFBF; } textarea:focus::-ms-input-placeholder{ color:transparent; } /* Chrome, Safari, Firefox */ input::placeholder {color:#ccc; font-size: 1rem; color:#BFBFBF; } input:focus::placeholder{ color:transparent; } input::-webkit-input-placeholder {color:#ccc; font-size: 1rem; color:#BFBFBF; } /* IE, Edge */ input:-ms-input-placeholder {color:#ccc; font-size: 1rem; color:#BFBFBF; } input:focus::-ms-input-placeholder{ color:transparent; } .forms .selects input[type=radio]{position:absolute;left:-9999px} .forms .selects input[type=radio]+label{display:block;position:relative;padding:0 0 0 22px;font-size:0.875rem;font-weight:400;color:#909090} .forms .selects input[type=radio]+label:before{content:'';display:block;position:absolute;top:0;left:0;background-image:url(../img/sprites.png);background-position:-324px -232px;width:22px;height:22px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.forms .selects input[type=radio]+label:before{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .forms .selects input[type=radio]:checked+label{color:#333} .forms .selects input[type=radio]:checked+label:before{background-image:url(../img/sprites.png);background-position:-324px -176px;width:22px;height:22px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.forms .selects input[type=radio]:checked+label:before{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .forms .selects input[type=checkbox]{position:absolute;left:-9999px} .forms .selects input[type=checkbox]+label{display:block;position:relative;padding:0 0 0 22px;font-size:0.875rem;font-weight:400;color:#909090} .forms .selects input[type=checkbox]+label:before{content:'';display:block;position:absolute;top:0;left:0;background-image:url(../img/sprites.png);background-position:-240px -239px;width:20px;height:13px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.forms .selects input[type=checkbox]+label:before{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .forms .selects input[type=checkbox]:checked+label{color:#333} .forms .selects input[type=checkbox]:checked+label:before{background-image:url(../img/sprites.png);background-position:-242px -220px;width:20px;height:13px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.forms .selects input[type=checkbox]:checked+label:before{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .forms select,.forms input[type=text],.forms input[type=password],.forms input[type=tel]{display:block;height:40px;width:100%;font-size:1rem;font-weight:400;color:#202020;border:1px solid #909090;padding:0 10px;border-radius:3px;-webkit-appearance:none} .forms select[readonly=readonly],.forms input[type=text][readonly=readonly],.forms input[type=password][readonly=readonly],.forms input[type=tel][readonly=readonly]{background:#FAFAFA;border:1px solid #f1f1f1;color:#909090} .forms input::-webkit-input-placeholder{color:#ccc;text-shadow:none;-webkit-text-fill-color:initial} .forms .forms-item{display:block;position:relative;transition:border 0.2s ease-in-out; } /*.forms .forms-item ~ .forms-item{margin-bottom:1rem}*/ .forms .forms-item ~ .forms-item.none{border:1px solid red} /* input 체크박스 크기 타입 */ input[type=checkbox]{ width: 20px; height: 20px; margin: 5px; padding: 15px 5px 5px 5px; } /* input 라디오 버튼타입 */ .check_obj input[type="radio"] {display: none;} .check_obj input[type="radio"] + span {display: inline-block; height:40px; margin: 0.5rem 1rem 0.5rem 3px ; padding: 0.5rem 1rem; border: 1px solid #113a6b; background-color: #F1F1F1; text-align: center; cursor: pointer; } .check_obj input[type="radio"]:checked + span {background-color: #113a6b; color: #ffffff; } .check-def-obj input[type="radio"] {margin: 2rem 0.5rem 1rem 1rem; } .check-def-obj input[type="radio"] + span {display: inline-block; margin: 0.5rem 0.5rem 3px 0 ; padding: 0.3rem; } .check-def-obj input[type="radio"] + label{cursor:pointer; } .check-def-obj input[type="radio"]:checked + span {background-color: #113a6b; color: #ffffff; } /* 하단 고정 div */ .bottom-fix-div{position:fixed; bottom:0; left:0; z-index:800; width:100%; padding:10px; background:#fff; border-top: solid 1px #ccc; } /* 댓글쓰기 */ .cmmt-div{ display: inline-block; padding: 5px; background-color:#fff; border: 1px solid #00B0F0; border-radius: 10px; width: 100%; height:80px; } .cmmt-div .cmmt-reg{ position: absolute; display: block; width: 70%; max-height: 60px; padding: 10px; border: 0; line-height: 1.6; font-size: 1.2rem; font-weight: 400; color: #444; resize: vertical; overflow:hidden; } .cmmt-div .btn{ float:right; -ms-flex:1;flex:1; margin-top:1rem; margin-right:5px; width: 50px; font-size:1rem;font-weight:700;color:#fff;text-align:center;line-height:30px;background-color:#00B0F0; border: 1px solid #333333; border-radius:4px; } /* 댓글의 답글쓰기 */ .cmmt-reply-div{ display: inline-block; padding: 5px; border: 1px solid #333333; border-radius: 10px; width: 100%; height:120px; } .cmmt-reply-div .cmmt-reply-reg{ display: block; width: 100%; max-height: 60px; padding: 10px; border: 0; line-height: 1.6; font-size: 1.2rem; font-weight: 400; color: #444; resize: vertical; overflow:hidden; } .cmmt-reply-div .cmmt-btn{ float:right; -ms-flex:1;flex:1; margin:10px 5px; width: 50px; font-size:1rem;font-weight:700;color:#fff;text-align:center;line-height:30px;background-color:#00B0F0; border: 1px solid #333333; border-radius:4px; } .cmmt-reply-div .cmmt-cancel-btn{ float:right; -ms-flex:1;flex:1; margin:10px 5px; width: 50px; font-size:1rem;font-weight:700;color:#333333;text-align:center;line-height:30px;background-color:#F1F1F1; border: 1px solid #333333; border-radius:4px} /* 신고하기 */ .report-div{ display: inline-block; padding: 5px; width: 100%; } .report-div .report-reg{ position: absolute; display: block; width: 70%; max-height: 60px; padding: 10px; border: 0; line-height: 1.6; font-size: 1.2rem; font-weight: 400; color: #444; resize: vertical; overflow:hidden; } .report-div .report-btn{ float:right; -ms-flex:1;flex:1; margin:10px 5px; width: 50px; font-size:1rem;font-weight:700;color:#fff;text-align:center;line-height:30px;background-color:#00B0F0; border: 1px solid #333333; border-radius:4px; } .report-div .report-cancel-btn{ float:right; -ms-flex:1;flex:1; margin:10px 5px; width: 50px; font-size:1rem;font-weight:700;color:#333333;text-align:center;line-height:30px;background-color:#F1F1F1; border: 1px solid #333333; border-radius:4px} /* 주소 검색 */ .search input[type="text"] { display: block; width: 100%; height: 50px; border: 5px solid #186bb9; padding: 0 15px; color: #444; font-size: 14px; font-weight: normal; background: #fff url(../img/btn_search.png) 15px 13px no-repeat; background-image: url(../img/btn_search.png); background-position-x: 95%; background-position-y: 8px; background-size: 44px 25px; background-repeat-x: no-repeat; background-repeat-y: no-repeat; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(255, 255, 255); } /*************** 라인 시작 ****************/ .blank{height:50px; background: #fff; } .blank.half{height:25px; background: #fff; } .line{display:block;margin:1rem 0;border-bottom:1px solid #dedede;} .line.end{display: none} .inner-line{display:block;margin:1rem;border-bottom:1px solid #dedede;} /* 글쓰기 버튼 아이콘 */ .write-icon{background-image:url(../img/icon/write_blue_70x70.png);width:70px;height:70px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.write-icon{background-image:url(../img/icon/write_blue_70x70.png);}} /* 공유하기 아이콘 */ .btn-share-black{display:inline-block;text-indent:-9999px;background-image:url(../img/icon/outline_share_black_24dp.png); width:24px;height:24px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.btn-share-black{background-image:url(../img/icon/outline_share_black_24dp.png);background-size:24px 24px}} .share-icon { position: relative; display: inline-block; width: auto; font-size: 14px; font-weight: 500; color: #333; padding-top: 80px; } .share-icon.clipboard { background-image: url(../img/icon/sns_clipboard_68x68.png); background-repeat: no-repeat; width:70px; height:34px; } .share-icon.twitter { background-image: url(../img/icon/sns_twitter_68x68.png); background-repeat: no-repeat; width:70px; height:34px; } .share-icon.facebook { background-image: url(../img/icon/sns_facebook_68x68.png); background-repeat: no-repeat; width:70px; height:34px; } .share-icon.kakao { background-image: url(../img/icon/sns_kakao_68x68.png); background-repeat: no-repeat; width:70px; height:34px; } .share-icon.kakaostory { background-image: url(../img/icon/sns_kakaostory_68x68.png); background-repeat: no-repeat; width:70px; height:34px; } .share-icon.instagram { background-image: url(../img/icon/sns_instagram_68x68.png); background-repeat: no-repeat; width:70px; height:34px; } .share-icon.telegram { background-image: url(../img/icon/sns_telegram_68x68.png); background-repeat: no-repeat; width:70px; height:34px; } .share-icon.post { background-image: url(../img/icon/post_black_68x68.png); background-repeat: no-repeat; width:70px; height:34px; } /* 공유하기 아이콘 */ /*************** 공유하기 목록 시작 ****************/ .share-list{width:100%; margin-top: 20px; background:#fff;margin-bottom:5px} .share-list:before,.share-list:after{content:"";display:table} .share-list:after{clear:both} .share-list .item{width:25%; height:130px; background:#fff; float:left; display:inline-block; text-align:center; padding-top: 1rem; position:relative; } .share-list .item:nth-child(4n){border-right:none} .share-list .item .item-image{display:block;position:absolute;top:50%;left:50%; width:44px;height:44px;margin-top:-30px;margin-left:-22px; } .btn-submit-normal{border-radius:3px} /*************** 공유하기 목록 끝 ****************/ /*************** 회원가입 화면 시작 ****************/ /* 회원가입 - 약관동의 */ .term-list{background:#fff; width:100%; border-bottom:1px solid #dedede;padding:1rem;line-height:1.4;border-radius:10px;} .term-list.end{border-bottom:none;} .term-list .title{font-size:1rem;font-weight:600;color:#202020;position:relative} .term-list .title[data-state=new]:after{display:inline-block;content:'';position:absolute;top:4px;right:-15px;z-index:800;background-image:url(../img/sprites.png);background-position:-266px -239px;width:12px;height:12px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.term-list .title[data-state=new]:after{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .term-list .next{float:right;display:inline-block;position:relative;text-decoration: underline;font-size:1rem;font-weight:500;color:#909090;} /* 회원가입 - 약관동의 */ /*************** 회원가입 화면 끝 ****************/ /* info-box */ .info-box{ border-top:1px solid #BFBFBF; border-bottom:1px solid #BFBFBF; } .info-box.date{border:none; padding-top:0.7rem; padding-bottom:3px; padding-right:3px; } .info-box.hou-tip{background:#fff;padding-top:1rem; margin:9px 0; } .info-box.hou-tip>.title{padding-left:1rem;padding-bottom:10px;font-size:.75rem} /* info-box */ /* list-box */ .list-box{background:#fff;} .list-box.hou-tip{background:#fff;padding-top:1rem; margin-bottom:1rem; border-top:1px solid #BFBFBF; border-bottom:1px solid #BFBFBF} .list-box.hou-tip>.title{padding-left:1rem;padding-bottom:10px;font-size:.75rem} /* list-box */ /* 로그인 폼 */ .forms.forms-title .forms-fieldset{background:#fff;margin:1.5rem 0;} .forms.forms-title .forms-fieldset .forms-item{padding: 0.5rem 0.7rem;} .forms.forms-login .forms-fieldset{background:#fff; } .forms.forms-login .forms-fieldset .forms-item{padding: 0.2rem 0.7rem;} .forms.forms-login .forms-fieldset .forms-item .multi-item{display: inline-block; width: 30%; margin: 0.7rem 0; text-align: center; font-size:1rem;font-weight:600;} .forms.forms-login .forms-fieldset .forms-item .car-item{display: block; width: 100%; margin: 0.3rem 0; font-size:1.2rem;font-weight:600;} .forms.forms-login .forms-fieldset .forms-item .car-plus{display: block; width: 150px; text-align: center; font-size:1.2rem;font-weight:600;} .forms.forms-login .forms-fieldset .forms-item .year-plus{display: inline-block; width: 100px; text-align: center; font-size:1.2rem;font-weight:600;} .forms.forms-login .forms-fieldset .forms-item .month-plus{display: inline-block; width: 80px; text-align: center; font-size:1.2rem;font-weight:600;} /* datepicker 달력 */ .forms.forms-login .forms-fieldset .forms-item .datepicker{display: inline-block; width: 150px; text-align: center; font-size:1.2rem;font-weight:600;} /* 카드타입 폼 */ .forms.forms-card .forms-fieldset.end{margin-bottom:1rem;} .forms .forms-fieldset.cell-phone{margin-top:1rem} .forms .forms-fieldset.base{margin:0.5rem 0.7rem;border:1px solid #005174;padding-top:10px;padding-bottom:5px;border-radius:3px;-webkit-appearance:none} .forms .forms-fieldset.addr{margin:0.5rem 0.7rem;border:1px solid #dedede;padding-top:0;padding-bottom:5px;border-radius:3px;-webkit-appearance:none} .forms .forms-fieldset.blue{margin:0.5rem 0.7rem;border:1px solid #dedede;background-color:#C8EBFA;border-radius:10px;-webkit-appearance:none} .forms .forms-fieldset.pink{margin:0.5rem 0.7rem;border:1px solid #dedede;background-color:#FBCFD0;border-radius:10px;-webkit-appearance:none} .forms .forms-fieldset.white{margin:0.5rem 0.7rem;border:1px solid #dedede;background-color:#FFFFFF;border-radius:10px;-webkit-appearance:none} .forms .forms-fieldset.black{margin:0.5rem 0.7rem;border:1px solid #dedede;background-color:#000000;border-radius:10px;-webkit-appearance:none} .forms .forms-fieldset.gray{margin:0.5rem 0.7rem;border:1px solid #dedede;background-color:#BFBFBF;border-radius:10px;-webkit-appearance:none} .forms .forms-fieldset.light_gray{margin:0.5rem 0.7rem;border:1px solid #dedede;background-color:#F1F1F1;border-radius:10px;-webkit-appearance:none} .forms .forms-fieldset.yellow{margin:0.5rem 0.7rem;border:1px solid #dedede;background-color:#FFF200;border-radius:10px;-webkit-appearance:none} .forms .forms-fieldset.light_yellow{margin:0.5rem 0.7rem;border:1px solid #dedede;background-color:#FFFCCC;border-radius:10px;-webkit-appearance:none} .forms .forms-fieldset.orange{margin:0.5rem 0.7rem;border:1px solid #dedede;background-color:#FFCCA9;border-radius:10px;-webkit-appearance:none} .forms .forms-fieldset.green{margin:0.5rem 0.7rem;border:1px solid #dedede;background-color:#C8EFD4;border-radius:10px;-webkit-appearance:none} .forms .forms-fieldset.none{margin:0.5rem 0.7rem;} .forms .forms-fieldset.blue_line{margin:0.5rem 0.7rem;border:3px solid #C8EBFA;background-color:#FFFFFF;border-radius:10px;-webkit-appearance:none} .forms .forms-fieldset.pink_line{margin:0.5rem 0.7rem;border:3px solid #FBCFD0;background-color:#FFFFFF;border-radius:10px;-webkit-appearance:none} .forms .forms-fieldset.black_line{margin:0.5rem 0.7rem;border:3px solid #000000;background-color:#FFFFFF;border-radius:10px;-webkit-appearance:none} .forms .forms-fieldset.gray_line{margin:0.5rem 0.7rem;border:1px solid #BFBFBF;background-color:#FFFFFF;border-radius:10px;-webkit-appearance:none} .forms .forms-fieldset.yellow_line{margin:0.5rem 0.7rem;border:3px solid #FFF200;background-color:#FFFFFF;border-radius:10px;-webkit-appearance:none} .forms .forms-fieldset.orange_line{margin:0.5rem 0.7rem;border:3px solid #FFCCA9;background-color:#FFFFFF;border-radius:10px;-webkit-appearance:none} .forms .forms-fieldset.green_line{margin:0.5rem 0.7rem;border:3px solid #C8EFD4;background-color:#FFFFFF;border-radius:10px;-webkit-appearance:none} .forms span.sm_left_title_gray{display:inline-block; position:relative; text-align:left; padding-top:15px;padding-bottom:10px;font-size:1rem;font-weight:600;color:#BFBFBF; } .forms span.sm_left_title{display:block;padding-top:15px;padding-bottom:10px;font-size:1rem;font-weight:600;color:#202020} .forms span.sm_center_title{display:block;text-align:center; padding-top:10px;padding-bottom:15px;font-size:1rem;font-weight:700;color:#202020} .forms span.mid_left_title{display:block;padding-top:15px;padding-bottom:10px;font-size:1.2rem;font-weight:600;color:#202020} .forms span.mid_center_title{text-align:center; padding-top:10px;padding-bottom:15px;font-size:1.2rem;font-weight:700;color:#202020} .forms span.big_left_title{display:block;padding-top:15px;padding-bottom:10px;font-size:1.4rem;font-weight:700;color:#202020} .forms span.big_center_title{text-align:center; padding-top:10px;padding-bottom:15px;font-size:1.4rem;font-weight:700;color:#202020} .forms span.sm_center_gray{display:block;text-align:center; font-size:1rem;font-weight:700;color:#333} .forms span.sm_left_txt{text-align:left; padding-top:5px;padding-bottom:5px;font-size:1rem;font-weight:600;color:#202020} .forms span.sm_center_txt{display:block;text-align:center; padding-top:5px;padding-bottom:5px;font-size:1rem;font-weight:700;color:#202020} .forms span.sm_right_txt{display:block;text-align:right; font-size:0.8rem;font-weight:700;color:#000000} .forms span.mid_left_txt{display:block;padding-top:5px;padding-bottom:5px;line-height:1.4;font-size:1.2rem;font-weight:600;font-family:'Nanum Gothic', sans-serif;color:#202020} .forms span.mid_center_txt{display:block;text-align:center; padding-top:5px;padding-bottom:5px;font-size:1.2rem;font-weight:600;font-family:'Nanum Gothic', sans-serif;color:#202020} .sm_right_btn.white{float:right; width:30%; display:block;margin:0 5px;text-align:center; font-size:0.8rem;font-weight:700;color:#000000;background-color:#fff;border-radius:10px;-webkit-appearance:none} .sm_right_btn.blue{float:right; width:30%; display:block;margin:0 5px;text-align:center; font-size:0.8rem;font-weight:700;color:#000000;background-color:#C8EBFA;border-radius:10px;-webkit-appearance:none} .sm_right_btn.orange{float:right; width:30%; display:block;margin:0 5px;text-align:center; font-size:0.8rem;font-weight:700;color:#000000;background-color:#FFCCA9;border-radius:10px;-webkit-appearance:none} .forms span.sm_right_btn.blue{float:right; width:25%; display:block;margin:0 5px;text-align:center; font-size:0.8rem;font-weight:700;color:#000000;background-color:#C8EBFA;border-radius:10px;-webkit-appearance:none} .forms span.sm_right_btn.orange{float:right; width:25%; display:block;margin:0 5px;text-align:center; font-size:0.8rem;font-weight:700;color:#000000;background-color:#FFCCA9;border-radius:10px;-webkit-appearance:none} .forms span.sm_right_btn.gray{float:right; width:25%; display:block;margin:0 5px;text-align:center; font-size:0.8rem;font-weight:700;color:#000000;background-color:#666;border-radius:10px;-webkit-appearance:none} .forms span.sm_right_btn.light_gray{float:right; width:25%; display:block;margin:0 5px;text-align:center; font-size:0.8rem;font-weight:700;color:#000000;background-color:#F1F1F1;border-radius:10px;-webkit-appearance:none} .forms span.big_center_btn{width:100%; display:block; padding:10px;margin-top:1rem;margin-bottom:1rem;text-align:center; font-size:1.2rem;font-weight:600;color:#000000;background-color:#F1F1F1;border:1px solid #BFBFBF; border-radius:10px;-webkit-appearance:none} .forms span.amount{display:block;text-align:center; padding-bottom:15px;font-size:2rem;font-weight:700;color:#202020;} /*.forms span.title{display:block;padding-bottom:5px;font-size:.6875rem;font-weight:700;color:#202020}*/ .forms .forms-item.title{text-align:center; font-size:1.7rem;font-weight:600;color:#333; width:100%} .forms .forms-item.subtitle{text-align:center; font-size:1.4rem;font-weight:600;color:#202020; width:100%} .forms .forms-item.subtitle_sm{text-align:center; font-size:1rem;font-weight:600;color:#333; padding-top:1rem; line-height:25px; width:100%;} .forms .forms-item.subtitle_md{text-align:center; font-size:1.2rem;font-weight:500;color:#202020; width:100%} .forms .forms-item.txt{font-size:1.2rem;font-weight:800;color:#333; padding-top:30px; line-height:25px; width:100%;} .forms .forms-item.part{font-size:1rem;font-weight:600;color:#333; padding-top:30px; line-height:25px; width:100%;} .forms .forms-item.comment{font-size:1.2rem;font-weight:500;color:#333; padding-bottom:0; line-height:25px; width:100%;} .forms .forms-item.loginid {padding-top:30px; width:100%} .forms .forms-item.loginid input{width:100%} .forms .forms-item.loginpw input{width:100%} .forms .forms-item .mfee .monthly{width:30%; text-align:right;} /* 날짜(년월) 그룹 셀렉트박스 */ .date-box{ position:relative; width:100%; height:50px; } .date-group{float:right; padding-right:0.5rem; width:180px; line-height:1.6rem; display:block;text-align:center; font-size:0.8rem;font-weight:700;color:#000000;background:#fff;border-radius:5px;} .date-group:before,.date-group:after{content:"";display:table} .date-group .selectbox{width:180px;height:50px; margin-right:20px; padding-right:20px; top:0;z-index:2000; background:#fff; border:1px solid #808080; } /* 셀렉트 */ /* select { font-size: 1.2rem; font-weight:700; padding: 2px 5px; } */ .select{height:50px; font-size: 1.2rem; font-weight:700; padding-left: 10px; } .select:after{content:'';display:block;position:absolute;top:50%;left:150px;margin-top:-7px;background-image:url(../img/sprites.png);background-position:-20px -329px;width:14px;height:14px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.select:after{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .select li{z-index:800;color:#50506d;font-size:1.2rem;width:180px;line-hieght:1.8; background:#F2F2F2; } .select li.init{width:180px;height:50px;padding:5px 6px;line-height:1.8; cursor:pointer;background:#fff;border:1px solid #808080;} .select li:not(.init){padding:8px 12px;width:180px;border:1px solid #808080;border-top:none;border-bottom:none;display:none;background:#F2F2F2} .select li:not(.init):last-child{border-bottom:1px solid #808080; padding-bottom: 1rem; } .select li:not(.init):hover{background:#fff} .select li.selected:not(.init){color:#0057E3} /* 날짜(년월) 그룹 셀렉트박스 */ body{background-color:#fff}*,*:before,*:after{box-sizing:border-box} html{-webkit-touch-callout:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}*{margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,font,img,ins,q,s,samp,strike,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend{border:0 none} body{position:relative;min-height:320px;margin:0 auto;font-size:100%;line-height:1.3em;font-family:"Nanum Gothic",sans-serif;-ms-text-size-adjust:100%;text-size-adjust:100%;-webkit-text-size-adjust:100%}header,h1{font-size:100%}html,body{height:100%}caption,legend{position:absolute;top:-9999px;left:-9999px;width:0;height:0;font-size:0;overflow:hidden;visibility:hidden}caption{display:none}img{border:none;vertical-align:top} select,input{vertical-align:initial;border:0px;border-radius:0;background-color:transparent} hr{display:none;border:0 none}ol,ul,ul li{list-style:none}em{font-style:normal}menu li{list-style:none}address{display:inline;font-style:normal}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;border:0px;background-color:transparent}table{border-collapse:collapse;border-spacing:0}input,textarea,keygen,select,button{font-family:"Nanum Gothic",sans-serif}strong{font-weight:normal}dfn{font-style:normal}a:link,a:visited,a:active,a:focus{text-decoration:none;color: inherit;}a:hover{text-decoration:none;color: inherit;}.is-hidden{display:none !important}.visible-hidden{visibility:hidden !important}.clear{clear:both}.txt-center{text-align:center !important}.inline-block{display:inline-block;vertical-align:middle} mark{background-color:transparent}button,select,input[type=radio],input[type=submit],input[type=search]{overflow:visible;cursor:pointer;border:0px}input:focus,button:focus,textarea:focus,select,div{outline:0}body{-webkit-user-select:none;background-color:transparent;background-color:#eee} fieldset{-webkit-appearance:none;-moz-appearance:none;appearance:none} /**************** 공통 box / list *************/ /* 프레임 - 틀 */ .frame-wide-box{display:block; width:100%; line-height:1.8rem; color:#202020;cursor:pointer;position:relative;border-radius:5px;} .frame-height-box{display:block; margin:1rem 0; width:100%; line-height:1.8rem; color:#202020;cursor:pointer;position:relative;border-radius:5px;} .frame-height-box.white{background-color:#FFFFFF; margin:0; padding:0; } .frame-box{display:block; width:100%; padding:1rem;line-height:1.8rem; color:#202020;cursor:pointer;position:relative;border-radius:5px;} .frame-box.sky_blue{background-color:#C8EBFA; } .frame-box.pink{background-color:#FBCFD0; } .frame-box.white{background-color:#FFFFFF; } .frame-box.black{background-color:#000000; } .frame-box.gray{background-color:#BFBFBF; } .frame-box.light_gray{ background-color:#F1F1F1; } .frame-box.yellow{background-color:#FFF200; } .frame-box.light_yellow{background-color:#FFFCCC; } .frame-box.orange{background-color:#FFCCA9; } .frame-box.green{background-color:#C8EFD4; } .frame-box.light_green{background-color:#A9DFDB; } .frame-title{display:block; font-size:1rem; font-weight:700; color:#666; cursor:pointer;position:relative } .frame-title.wide{padding:0 1rem; } .frame-title .title-info{display:block; text-align:left; margin:1rem 0; padding-bottom:5px; line-height:1.8; font-size:1.2rem; color:#202020; font-weight:700; border-bottom:1px solid #BFBFBF; } .frame-title .title-info.no-line{ border-bottom:none; } .frame-title .title-info.skyblue{color:#0097CE; font-size:1.4rem; font-weight:600; border-bottom:1px solid #0097CE; } .frame-title .right-view-more{float:right; position:absolute;top:0; right:1rem; padding: 8px 0 3px; } .frame-conts{padding-bottom:5px; } .frame-conts.center{text-align:center; } .frame-conts .sm-txt{display:block; text-align:center; margin:1rem 0; padding-bottom:5px; line-height:1.8; font-size:1rem; color:#202020; font-weight:500; } .no-data{display:block; text-align:center; padding-bottom:5px; font-size:1.1rem; color:#202020; font-weight:400; } /* 가로화면 꽉찬 메세지 박스 ( 우리집, 관리사무소 건물정보 ) */ .msg-wide-box{display:block; width:100%; padding:1rem; font-size:1rem; font-weight:500; color:#202020;cursor:pointer;text-align:center;position:relative;} .msg-wide-box.blue{background-color:#00B0F0; } .msg-wide-box li{line-height:1.6; } .msg-wide-box .buld-no{display:block; width:100%; font-size:1rem; font-weight:700; color:#202020;cursor:pointer;text-align:left;position:relative; } .msg-wide-box .stat-btn{float:right; width:25%; font-size:0.8rem;font-weight:700;color:#000000;background-color:#C8EBFA;border-radius:10px;-webkit-appearance:none; } .msg-wide-box .bd-nm{width:100%; font-size:1.2rem; font-weight:700; color:#202020;cursor:pointer;text-align:center;position:relative; } .msg-wide-box li .addr{line-height:none; } /* 카드형 메세지 박스 ( 우리집 주차, 관리사무소 공지 ) */ .msg-card-box{margin-bottom:1rem; padding: 12px 12px;line-height:1.6rem; background:#fff; border:1px solid #666;color:#202020;cursor:pointer;position:relative;border-radius:10px; box-shadow: 3px 3px 3px 1px #BFBFBF; } .msg-card-box.yellow{background:#FFFCCC; } .msg-card-box.skyblue_line{border:1px solid #00B0F0;background-color:#FFFFFF; } .msg-card-box.orange_line{border:3px solid #FFCCA9;background-color:#FFFFFF; } /* 카드형 메세지 박스안 테이블 ( 우리집 주차, 관리사무소 공지 ) */ .info-table{width:100%; word-break:break-all; } .info-table th{padding:8px 0;padding-left:1rem; font-size:1rem;font-weight:500;text-align:left; color:#666; } .info-table td{padding-left:5px; font-size:1.2rem;font-weight:600;text-align:left; color:#202020; } .info-table td.big_txt{font-size:1.4rem;font-weight:700; color:#202020; } .info-table tr:last-child th,.info-table tr:last-child td{border-bottom:none} .line-table{width:100%; } .line-table tr{padding:10px 0; border-bottom:1px solid #BFBFBF; } .line-table th{font-size:1.2rem;font-weight:500;text-align:center; color:#666; height: 50px; } .line-table td{font-size:1.2rem;font-weight:600;text-align:center; color:#202020; height: 90px; line-height:1.6;} .line-table td span{font-size:1rem;font-weight:400;text-align:center; color:#202020; } .line-table td img{padding-top:10px; } .line-table td.big_txt{font-size:1.4rem;font-weight:700; color:#202020; } .line-table tr:last-child th,.line-table tr:last-child td{border-bottom:none} /* .line-table{width:100%; } .line-table tr{padding:10px 0; border-bottom:1px solid #BFBFBF; height: 90px; line-height:1.6; } .line-table th{font-size:1.2rem;font-weight:500;text-align:center; color:#666; } .line-table td{font-size:1.2rem;font-weight:600;text-align:center; color:#202020; } .line-table td span{font-size:1rem;font-weight:400;text-align:center; color:#202020; } .line-table td img{padding-top:10px; } .line-table td.big_txt{font-size:1.4rem;font-weight:700; color:#202020; } .line-table tr:last-child th,.line-table tr:last-child td{border-bottom:none} */ /* 1줄 2개 카드형 메세지 리스트 ( 우리집 관리비 ) */ .multi-card-list{width:100%; display: flex; } .multi-card-list:before,.multi-card-list:after{content:"";display:table} .multi-card-list:after{clear:both} .multi-card-list .item{width:48%;height:100px; display:inline-block;margin-bottom:1.2rem; margin-right:1.2rem; line-height:1.6rem;background:#fff;border:1px solid #A6A6A6;color:#202020;cursor:pointer;text-align:center;position:relative;border-radius:10px; box-shadow: 3px 3px 3px 1px #BFBFBF; } .multi-card-list .item.light_yellow{background: #FFFCCC} .multi-card-list .item:nth-child(2n){margin-right:0} .multi-card-list .item .item-image{width:30px;height:30px; } .multi-card-list .item .item-image img{ float:left; margin-top:13px; margin-left:10px; width:30px;height:30px; } .multi-card-list .item .item-name{float:left; padding:1rem 5px; font-size:1.2rem;font-weight:500;line-height:1.6rem;color:#333333; } .multi-card-list .item .item-pay{float:right; width:100%; position:relative; right:-15px; font-size:1.5rem;font-weight:700; line-height:1.6rem;color:#005174; } /* 1줄 1개 카드형 메세지 리스트 ( 우리집 관리비 ) */ .msg-card-list{margin-bottom:1rem; padding: 12px 12px;line-height:1.6rem; background:#fff; border:1px solid #666; color:#202020;cursor:pointer;position:relative;border-radius:10px; box-shadow: 3px 3px 3px 1px #BFBFBF; } .msg-card-list.light_yellow{background:#FFFCCC; } .msg-card-list.light_blue{background:#C8EBFA; } .msg-card-list.light_orange{background:#FFCCA9; } .msg-card-list.light_gray{background:#BFBFBF; } .msg-card-list.light_purple{background:#D5BBE0; } .msg-card-list.light_green{background:#C8EFD4; } .msg-card-list:before,.msg-card-list:after{content:"";display:table} .msg-card-list:after{clear:both} .msg-card-list .item{margin-bottom:1.2rem; line-height:1.6; background:#fff; color:#202020;cursor:pointer;text-align:center; } .msg-card-list .item.light_yellow{background: #FFFCCC} .msg-card-list .item:nth-child(2n){margin-right:0} .msg-card-list .item .item-image{width:30px;height:30px; } .msg-card-list .item .item-image img{ float:left; margin-top:13px; margin-left:10px; width:30px;height:30px; } .msg-card-list .item .item-name{float:left; padding:0.7rem 5px; font-size:1.2rem;font-weight:700; color:#333333; } .msg-card-list .item .item-more{float:right; padding:0.7rem 1rem; font-size:1.2rem;font-weight:700; color:#333333; } .msg-card-list .item .item-pay{float:right; width:100%; position:relative; padding-bottom:1rem; font-size:2.2rem;font-weight:700; color:#005174; } .msg-card-list .item .item-limit{float:left; width:100%; position:relative; right:-15px; text-align:left; font-size:1.2rem;font-weight:400; color:#005174; } .msg-card-list .item .item-unpaid{float:left; display:inline-block; position:relative; right:-15px; text-align:left; font-size:1.2rem;font-weight:400; color:#B71218; } .item .right_btn.white{float:right; width:25%; display:block;padding:2px 3px; text-align:center; font-size:0.9rem;font-weight:600; color:#000000; background-color:#fff; border:1px solid #666; border-radius:10px;-webkit-appearance:none} .item .right_btn.light_gray{float:right; width:25%; display:block;padding:2px 3px; text-align:center; font-size:0.9rem;font-weight:600; color:#000000; background-color:#DDDDDD; border:1px solid #666; border-radius:10px;-webkit-appearance:none} .item .right_btn.light_red{float:right; width:25%; display:block;padding:2px 3px; text-align:center; font-size:0.9rem;font-weight:600; color:#000000; background-color:#E65C61; border:1px solid #666; border-radius:10px;-webkit-appearance:none} /* 아이콘형 메세지 리스트 ( 관리사무소 메뉴 ) */ .msg-icon-list{width:100%; display: flex; justify-content: space-between;} .msg-icon-list:before,.msg-icon-list:after{content:"";display:table} .msg-icon-list:after{clear:both} .msg-icon-list .item{width:30%;height:100px; margin:0.5rem 1rem; background:#fff;border:1px solid #BFBFBF;color:#202020;cursor:pointer; position:relative;border-radius:10px; box-shadow: 3px 3px 3px 1px #202020;} .msg-icon-list .item.gray{background: #909090} .msg-icon-list .item.light_yellow{background: #FFFCCC} .msg-icon-list .item:nth-child(1n){margin-left:0} .msg-icon-list .item:nth-child(3n){margin-right:0} .msg-icon-list .item .item-name{width:100%;position:absolute;left:0;top:60%;z-index:100; line-height:1.2; font-size:1rem;font-weight:700;color:#202020;text-align:center} .msg-icon-list .item .item-image{display:block;position:absolute;top:40%;left:50%; width:44px;height:44px;margin-top:-30px;margin-left:-22px; } .msg-icon-list .item .item-image img{width:100%} /* 메인화면 게시판 리스트 - 라운드형, 와이드형 ( 관리사무소 공지, 입주민 소통 ) */ .board-list-rnd.inline-type{padding: 1rem; background:#fff; border:1px solid #666; color:#202020;cursor:pointer;position:relative;border-radius:10px; box-shadow: 3px 3px 3px 1px #BFBFBF; } .board-list-rnd.inline-type.top-none{ border-top:none; } .board-list-rnd.inline-type.wide{ border-left:none; border-right:none; border-radius:0; } .board-list-rnd.inline-type .board{overflow:hidden; padding:1rem 5px; line-height:1.2; width:100%; border-bottom:1px solid #dedede; } .board-list-rnd.inline-type .board:first-child{padding-top:0; } .board-list-rnd.inline-type .board:nth-last-child(2){border-bottom: none; } .board-list-rnd.inline-type .board:last-child{border-bottom: none; padding-top:1rem; } .board-list-rnd.inline-type .board .board-item{display:block; width:100%;position:relative; } .board-list-rnd.inline-type .board .board-item .data-info{display:block; padding:5px 0; line-height:1.4; } .board-list-rnd.inline-type .board .board-item .data-info span{display:block; } .board-list-rnd.inline-type .board .board-item .data-info.left{ text-align:left; } .board-list-rnd.inline-type .board .board-item .data-info.right{ text-align:right; } .board-list-rnd.inline-type .board .board-item .data-info.more{background-color:#E9EDEF; line-height:1.8; text-align:center; border:1px solid #BFBFBF; border-radius:5px; box-shadow: 3px 3px 3px 1px #BFBFBF;} .board-list-rnd.inline-type .board .board-item .data-inline-info{padding:5px; } .board-list-rnd.inline-type .board .board-item .data-inline-info.left{ text-align:left; } .board-list-rnd.inline-type .board .board-item .data-inline-info.right{ text-align:right; } /* 메인화면 게시판 리스트 - 라운드형, 와이드형 ( 관리사무소 공지, 입주민 소통 ) */ /* 게시판 공통사용 아이템 */ .board-item .data-info span.item-user{padding-top:8px; font-size:1rem;font-weight:700;font-family:'Nanum Gothic', sans-serif; } .board-item .data-info span.item-date{padding-top:8px; font-size:1rem;color:#909090;font-weight:500; } .board-item .data-info span.item-cnt{padding-top:8px;font-size:1rem;color:#202020;font-weight:500; } .board-item .data-info span.item-like{padding-top:8px;font-size:1rem;color:#202020;font-weight:400; } .board-item .data-info span.item-reply{padding-top:8px;font-size:1rem;color:#202020;font-weight:400; } .board-item .data-info span.item-title{padding-top:8px;font-size:1.2rem;color:#202020;font-weight:500; } .board-item .data-info span.item-conts{padding-top:8px;font-size:1.3rem;color:#202020;font-weight:500; } .board-item .data-info span.item-desc{padding-top:8px;font-size:1rem;color:#202020;font-weight:500; } .board-item .data-info span.item-bar{padding-top:8px;font-size:1rem;color:#F1F1F1;font-weight:700; } .board-item .data-inline-info span.item-user{padding-top:8px; font-size:1rem;font-weight:700;font-family:'Nanum Gothic', sans-serif} .board-item .data-inline-info span.item-date{padding-top:8px; font-size:1rem;color:#909090;font-weight:500; } .board-item .data-inline-info span.item-cnt{padding-top:8px;font-size:1rem;color:#202020;font-weight:500; } .board-item .data-inline-info span.item-like{padding-top:8px;font-size:1rem;color:#202020;font-weight:400; } .board-item .data-inline-info span.item-reply{padding-top:8px;font-size:1rem;color:#202020;font-weight:500; } .board-item .data-inline-info span.item-title{padding-top:8px;font-size:1.2rem;color:#202020;font-weight:500; } .board-item .data-inline-info span.item-conts{padding-top:8px;font-size:1.3rem;color:#202020;font-weight:500; } .board-item .data-inline-info span.item-desc{padding-top:8px;font-size:1rem;color:#202020;font-weight:500; } .board-item .data-inline-info span.item-bar{padding-top:8px;font-size:1rem;color:#F1F1F1;font-weight:700; } /* 게시판 공통사용 아이템 */ /* .board-list-def.inline-type .board-list-def.inline-type .board{overflow:hidden;padding-bottom:0;width:100%} .board-list-def.inline-type .board:last-child{border-bottom: none} .board-list-def.inline-type .board .board-item{-js-display:flex;display:-ms-flexbox;width:100%;position:relative} .board-list-def.inline-type .board .board-item .board-info{padding: 0.5rem 1rem;line-height:1.5rem;border-top:none} .board-list-def.inline-type .board .board-item .date-info{-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch;padding-bottom:15px; border-bottom:1px solid #dedede} .board-list-def.inline-type .board .board-item .date-info.end{padding-bottom:0; border-bottom:none;} .board-list-def.inline-type .board .board-item .date-info span{display:block} .board-list-def.inline-type .board .board-item .reply-info{-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch;padding-top:10px;padding-bottom:15px; border-bottom:1px solid #dedede} .board-list-def.inline-type .board .board-item .reply-info.end{padding-bottom:0; border-bottom:none;} .board-list-def.inline-type .board .board-item .reply-info span{display:block} .board-list-def.inline-type .board .board-item .item-info{display:block;width:100%; } */ /**************** 공통 box / list *************/ /* 공통 item-box */ .forms .forms-item .item-box{padding:5px 1rem; line-height:1.4rem;} .forms .forms-item .message-box{display:block;padding:20px 1rem;line-height:1.6rem;background:#fff;color:#202020;position:relative;border-radius:10px;} .forms .forms-item .message-box.white{display:block;margin:0.5rem 0.5rem;background:#fff;border:1px solid #BFBFBF;border-radius:10px;} .forms .forms-item .message-box.light_yellow{display:block;margin:0.5rem 0.5rem;background:#FFFCCC;border:1px solid #BFBFBF;border-radius:10px;} .forms .forms-item .message-box.gray{display:block;margin:0.5rem 0.5rem;background:#BFBFBF;border:1px solid #BFBFBF;border-radius:10px;} .forms .forms-item .message-box.light_gray{display:block;margin:0.5rem 0.5rem;background:#F1F1F1;border:1px solid #F1F1F1;border-radius:10px;} .forms .forms-item .message-box.light_orange{display:block;margin:0.5rem 0.5rem;background:#FFE5D4;border:1px solid #BFBFBF;border-radius:10px;} /* 납부계좌 */ .forms .forms-item.account-box{display:block;margin:0.5rem 0.5rem;padding-top:12px;padding-bottom:12px;line-height:1.6rem;background:#FFFCCC;border:1px solid #BFBFBF;color:#202020;cursor:pointer;text-align:center;position:relative;border-radius:10px;} /* 나의정보 - 주소 선택 */ .forms .forms-item.house-box.skyblue{margin:1rem 0; padding: 12px 12px;line-height:1.6rem;background:#00B0F0;border:1px solid #BFBFBF;color:#202020;cursor:pointer;position:relative;border-radius:10px; box-shadow: 3px 3px 3px 1px #BFBFBF; } .forms .forms-item.house-box.yellow{margin-bottom:1rem; padding: 12px 12px;line-height:1.6rem;background:#FFFCCC;border:1px solid #666;color:#202020;cursor:pointer;position:relative;border-radius:10px; box-shadow: 3px 3px 3px 1px #BFBFBF; } .forms .forms-item.house-box.gray{margin:1rem 0; padding: 12px 12px;line-height:1.6rem;background:#BFBFBF;border:1px solid #BFBFBF;color:#202020;cursor:pointer;position:relative;border-radius:10px; box-shadow: 3px 3px 3px 1px #BFBFBF; } .forms .forms-item.house-box.white{margin:1rem 0; padding: 12px 12px;line-height:1.6rem;background:#fff;border:1px solid #BFBFBF;color:#202020;cursor:pointer;position:relative;border-radius:10px; box-shadow: 3px 3px 3px 1px #BFBFBF; } .forms .forms-item.house-box.orange_line{margin:1rem 0; padding: 12px 12px;line-height:1.6rem;border:3px solid #FFCCA9;background-color:#FFFFFF;border-radius:10px;-webkit-appearance:none; box-shadow: 3px 3px 3px 1px #BFBFBF; } .forms .forms-item.idcheck input{width:77%} .forms .forms-item.idcheck .btn-inline{width:20%} .forms .forms-item.gender input{width:45%} .forms .forms-item.gender .btn-inline{width:45%} .forms .forms-item.birth input{width:30%} .forms .forms-item.birth .btn-inline{width:30%} .forms .forms-item.birth .btn-inline2{width:30%} .forms .forms-item.receive input{width:77%} .forms .forms-item.receive .btn-inline{width:20%} .forms .forms-item .btn-inline{position:absolute;bottom:1rem;right:1rem;z-index:1} .forms .forms-item .btn-inline2{position:absolute;bottom:1rem;right:1rem;z-index:1} .forms .forms-item .remain{position:absolute;bottom:5px;right:0;z-index:1} .forms .forms-item[data-state=is-focused] input{border:1px solid #0057E3} .forms .forms-item.forms-card-point-select{background:#f1f1f1;margin-top:0;border-bottom:1px solid #ccc} .forms .forms-item.forms-card-point-select .label{display:none} .forms .forms-item.forms-card-point-select .card-point-list:before,.forms .forms-item.forms-card-point-select .card-point-list:after{content:"";display:table} .forms .forms-item.forms-card-point-select .card-point-list:after{clear:both} .forms .forms-item.forms-card-point-select .card-point-list>li{width:72px;height:82px;float:left;margin-left:5px;position:relative;margin-bottom:5px} .forms .forms-item.forms-card-point-select .card-point-list>li .logo{display:block;position:absolute;top:20%;left:50%;margin-left:-15px} .forms .forms-item.forms-card-point-select .card-point-list>li .logo.bc{background-image:url(../img/sprites.png);background-position:-288px -216px;width:30px;height:30px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.forms .forms-item.forms-card-point-select .card-point-list>li .logo.bc{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .forms .forms-item.forms-card-point-select .card-point-list>li .logo.wr{background-image:url(../img/sprites.png);background-position:-242px -184px;width:30px;height:30px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.forms .forms-item.forms-card-point-select .card-point-list>li .logo.wr{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .forms .forms-item.forms-card-point-select .card-point-list>li .logo.kb{background-image:url(../img/sprites.png);background-position:0px -301px;width:30px;height:22px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.forms .forms-item.forms-card-point-select .card-point-list>li .logo.kb{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .forms .forms-item.forms-card-point-select .card-point-list>li .logo.hana{background-image:url(../img/sprites.png);background-position:-36px -265px;width:30px;height:27px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.forms .forms-item.forms-card-point-select .card-point-list>li .logo.hana{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .forms .forms-item.forms-card-point-select .card-point-list>li .logo.shinhan{background-image:url(../img/sprites.png);background-position:-288px -144px;width:30px;height:30px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.forms .forms-item.forms-card-point-select .card-point-list>li .logo.shinhan{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .forms .forms-item.forms-card-point-select .card-point-list>li>input[type=radio]{position:absolute;left:-9999px} .forms .forms-item.forms-card-point-select .card-point-list>li>input[type=radio]+label{display:block;width:100%;height:100%;border-radius:3px;font-size:.8125rem;font-weight:400;color:#202020;position:absolute;left:0;right:0;top:0;padding-top:55px;text-align:center;font-size:.6875rem} .forms .forms-item.forms-card-point-select .card-point-list>li>input[type=radio]:checked+label{border:1px solid #0057E3;color:#0057E3;background:#fff} .forms .forms-item.forms-pay-method{margin:0;padding:0;width:100%} .forms .forms-item.forms-pay-method .pay-method-list{border-top:1px solid #ccc} .forms .forms-item.forms-pay-method .pay-method-list>li{width:100%;position:relative;height:50px;border-bottom:1px solid #ccc} .forms .forms-item.forms-pay-method .pay-method-list>li>input[type=radio]{position:absolute;left:-9999px} .forms .forms-item.forms-pay-method .pay-method-list>li>input[type=radio]+label{display:block;width:100%;height:100%;font-size:.875rem;font-weight:400;color:#202020;position:absolute;left:0;right:0;top:0;line-height:50px;padding-left:40px} .forms .forms-item.forms-pay-method .pay-method-list>li>input[type=radio]+label:before{content:'';display:block;position:absolute;top:50%;left:1rem;margin-top:-8px;background-image:url(../img/sprites.png);background-position:-80px -301px;width:16px;height:16px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.forms .forms-item.forms-pay-method .pay-method-list>li>input[type=radio]+label:before{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .forms .forms-item.forms-pay-method .pay-method-list>li>input[type=radio]:checked+label{font-weight:700} .forms .forms-item.forms-pay-method .pay-method-list>li>input[type=radio]:checked+label:before{background-image:url(../img/sprites.png);background-position:-58px -301px;width:16px;height:16px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.forms .forms-item.forms-pay-method .pay-method-list>li>input[type=radio]:checked+label:before{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .forms.forms-order .forms-fieldset{margin-top:.3125rem;background:#fff} .forms.forms-order .forms-fieldset .forms-item{padding:1rem} .forms.forms-order .forms-fieldset .forms-item.forms-pay-method{padding:0} .forms.forms-order .forms-fieldset .forms-item.forms-pay-method label.label{padding:1rem} .forms.forms-order .forms-fieldset.agreement-box{background:transparent} .forms.forms-order .forms-fieldset.agreement-box .agree-text{color:#909090;font-size:.8125rem;text-align:center;padding:1rem}[data-focusout=true]{overflow:hidden;opacity:0.1;transition:opacity 0.3s ease-in-out}[data-focusout=false]{opacity:1;transition:opacity 0.3s ease-in-out} .btns-area{margin-top:1rem;text-align:center} .btn-common-strong{display:inline-block;padding-top:2px;font-size:1.250rem;font-weight:700;color:#0057E3} .btn-common-strong:after{content:'';display:inline-block;margin:-2px 0 0 5px;vertical-align:middle;background-image:url(../img/sprites.png);background-position:-356px -126px;width:4px;height:7px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.btn-common-strong:after{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .btn-common-strong:active{color:#c70025}.btn-common-strong:active:after{background-image:url(../img/sprites.png);background-position:-356px -100px;width:4px;height:7px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.btn-common-strong:active:after{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .btn-common-normal{display:inline-block;font-size:0.813rem;font-weight:400;color:#666} .btn-common-normal:after{content:'';display:inline-block;margin:-2px 0 0 5px;vertical-align:middle;background-image:url(../img/sprites.png);background-position:-356px -74px;width:4px;height:7px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.btn-common-normal:after{background-image:url(../img/sprites@2x.png);background-size:366px 347px}}.btn-common-normal:active{color:#404040} .btn-common-normal:active:after{background-image:url(../img/sprites.png);background-position:-356px -61px;width:4px;height:7px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.btn-common-normal:active:after{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .btn-common-round{display:inline-block;font-size:0.813rem;font-weight:400;color:#666;background:#e0e0e0;padding:14px 30px;border-radius:3px} .btn-more-list{display:block;text-align:center;font-size:.8125rem;line-height:3rem;color:#909090;background:#dedede} .btn-more-list strong{font-weight:700;color:#202020;padding:0 5px} .btn-zzim{display:inline-block;text-indent:-9999px;background-image:url(../img/sprites.png);background-position:-324px -62px;width:24px;height:24px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.btn-zzim{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .btn-zzim[data-state=active]{background-image:url(../img/sprites.png);background-position:-324px -32px;width:24px;height:24px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.btn-zzim[data-state=active]{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .btn-zzim.animate{-webkit-animation:heart 0.5s ease-out alternate} .btn-like{display:inline-block;text-indent:-9999px;background-image:url(../img/icon/like_yellow_24x24.png); width:24px;height:24px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.btn-like{background-image:url(../img/icon/like_yellow_24x24.png);}} .btn-like[data-state=active]{background-image:url(../img/icon/like_yellow_24x24.png); width:24px;height:24px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.btn-like[data-state=active]{background-image:url(../img/icon/like_yellow_24x24.png);}} .btn-like.animate{-webkit-animation:heart 0.5s ease-out alternate} /* .message-box{width:100%;background:#979CB1;padding:1rem;color:#fff;position:relative;font-size:11px;font-weight:300;line-height:140%} .message-box .tel{display:block;margin-top:5px;color:#fff} */ .forms-stepper .label{display:block;font-size:.6875rem;font-weight:700;color:#202020;margin-top:20px;margin-bottom:5px} .forms-stepper .stepper-widget{width:100%;background:#fff;padding:1rem;position:relative} .forms-stepper .stepper-widget .form-control{width:60px;line-height:30px;text-align:center;font-weight:800;font-size:1rem} .forms-stepper .stepper-widget .amount-control{display:inline-block;height:40px;border:1px solid #ccc;background:#fff} .forms-stepper .stepper-widget .btn{width:40px;height:40px;font-size:1.125rem;display:inline-block} .forms-stepper .stepper-widget .btn.btn-subtraction{border-right:1px solid #ccc} .forms-stepper .stepper-widget .btn.btn-subtraction:active{background:#dedede} .forms-stepper .stepper-widget .btn.btn-addition{border-left:1px solid #ccc} .forms-stepper .stepper-widget .btn.btn-addition:active{background:#dedede} .forms-stepper .stepper-widget .cost{display:block;font-size:.8125rem;margin-bottom:10px} .forms-stepper .total-cost{padding:12px 0;text-align:right;font-size:1.125rem;color:#202020} .forms-stepper .total-cost strong{font-weight:800;font-size:1.125rem;color:#0057E3} .accordion{margin:0 auto;width:100%} .accordion.stepper dt .btn-toggle{display:none;position:absolute;top:1rem;right:1rem;z-index:999} .accordion.stepper dt.is-opened .btn-toggle{display:block;background-image:url(../img/sprites.png);background-position:-324px -204px;width:22px;height:22px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.accordion.stepper dt.is-opened .btn-toggle{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .accordion.stepper dt.is-opened .btn-submit-normal{display:none}.accordion.stepper dt.is-opened+dd{max-height:2000px;transition:max-height 0.3s ease-in-out;position:relative} .accordion.stepper dd{overflow:hidden;max-height:0} .sort-type{display:inline-block;padding:5px}.sort-type:before,.sort-type:after{content:"";display:table}.sort-type:after{clear:both}.sort-type>li{display:inline-block;float:left;margin-left:10px} .sort-type input[type=radio]{position:absolute;left:-9999px} .sort-type input[type=radio]+label{display:block;position:relative;font-size:0.75rem;color:#909090;letter-spacing:-1px} .sort-type input[type=radio]+label:before{content:'';display:inline-block;margin-right:0;background-image:url(../img/sprites.png);background-position:-76px -329px;width:12px;height:12px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.sort-type input[type=radio]+label:before{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .sort-type input[type=radio]:checked+label{color:#333} .sort-type input[type=radio]:checked+label:before{background-image:url(../img/sprites.png);background-position:-40px -329px;width:12px;height:12px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.sort-type input[type=radio]:checked+label:before{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .category-menu{margin-top:.3125rem} .category-menu .title{display:none} .list{position:relative;} /*.list .title{display:none;font-size:1rem}*/ .list .title{padding-top: 15px; height: 40px; text-align:center; font-size:1rem;} .common-tab.faq .tabs-menu li{width:25%}.common-tab.buying-list{margin-bottom:5px} .common-tab.buying-list .tabs-menu li{width:50%} .list-accordion{border-top:1px solid #e0e0e0} .list-accordion dt{border-bottom:1px solid #e0e0e0;background-color:#fff;} .list-accordion dt .accordion-title{display:block;position:relative;padding:1rem 3rem 0.75rem 1rem} .list-accordion dt .accordion-title:after{content:'';display:block;position:absolute;top:50%;right:1rem;margin-top:-5.5px;background-image:url(../img/sprites.png);background-position:-128px -301px;width:20px;height:11px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.list-accordion dt .accordion-title:after{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .list-accordion dt .accordion-title .title{display:block;font-size:1rem; line-height:1.6rem} .list-accordion dt .accordion-title .title[data-new=new]:after{content:'N';display:inline-block;margin-top:-4px;font-size:0.563rem;color:#e73c44;vertical-align:top} .list-accordion dt .accordion-title time{display:block;margin-top:-2px;font-size:0.888rem;color:#909090} .list-accordion dt.is-opened .accordion-title:after{margin-top:-5.5px;background-image:url(../img/sprites.png);background-position:-102px -301px;width:20px;height:11px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.list-accordion dt.is-opened .accordion-title:after{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .list-accordion dt.is-opened+dd{max-height:2000px;transition:max-height 0.3s ease-in-out} .list-accordion dd{overflow:hidden;max-height:0;background-color:#eee} .list-accordion dd .accordion-content{position:relative;padding:1rem;font-size:1rem;color:#202020;line-height:1.6rem;border-bottom:1px solid #e0e0e0} .list-accordion.etiqu{border-top:1px solid #e0e0e0; } .list-accordion.etiqu dt{border-bottom:1px solid #e0e0e0; background-color:#fff; line-height:1.8rem; } .list-accordion.etiqu dt.is-opened{border:1px solid #202020; background-color:#202020; font-size:1.2rem; font-weight:600; color:#fff; } .list-accordion.etiqu dt.is-opened .accordion-title:before{color:#202020; font-size:1.4rem;font-weight:700; line-height:2.6rem; border-left:2px solid #202020; border-right:2px solid #202020; } .list-accordion.etiqu dt .accordion-title .num{display:block; font-size:0.9rem; font-weight:600; margin-bottom:5px; } .list-accordion.etiqu dt .accordion-title .title{display:block; padding-left: 1rem; font-size:1.2rem; } .list-accordion.etiqu dt .accordion-title:before{display:block;position:absolute; } .list-accordion.etiqu dd .accordion-content{padding-left:20px; font-size:1.2rem; color:#202020; line-height:2.2rem; background:#fff; border:3px solid #202020; } .list-accordion.faq dt .accordion-title{padding-left:40px} .list-accordion.faq dt .accordion-title:before{content:'Q';display:block;position:absolute;top:1rem;left:20px;font-size:1.2rem;font-weight:700;color:#b0b0b0} .list-accordion.faq dt .accordion-title time{display:none} .list-accordion.faq dt.is-opened .accordion-title:before{content:'Q';color:#202020} .list-accordion.faq dd .accordion-content{padding-left:40px;background:#eee;} .list-accordion.faq dd .accordion-content:before{content:'A';display:block;position:absolute;top:1rem;left:20px;font-size:1.063rem;font-weight:700;color:#202020;} /* 관리비 사용내역 */ .list-accordion.mq_use dt .accordion-title{padding-left:40px} .list-accordion.mq_use dt .accordion-title .title{font-size:1rem;font-weight:700;} /* .list-accordion.mq_use dt.is-opened{border-bottom:1px solid #e0e0e0;background-color:#FFFCCC;} */ .list-accordion.mq_use dt.is-opened{border:1px solid #202020;background-color:#FFFCCC;} .list-accordion.mq_use dt .accordion-title:before{content:'Q';display:block;position:absolute;top:1rem;left:20px;font-size:1.2rem;font-weight:700;color:#b0b0b0} .list-accordion.mq_use dt .accordion-title time{display:none} .list-accordion.mq_use dt.is-opened .accordion-title:before{content:'Q';color:#202020;} /* .list-accordion.mq_use dd .accordion-content{padding-left:40px;background:#eee;} .list-accordion.mq_use dd .accordion-content:before{content:'A';display:block;position:absolute;top:1rem;left:20px;font-size:1.063rem;font-weight:700;color:#202020;} */ .list-accordion.mq_use dd .accordion-content{background:#FFFCCC;border:1px solid #202020;} .list-accordion.mq_use dd .accordion-content:before{display:block;position:absolute;top:1rem;font-size:1rem;font-weight:700;color:#202020;} /* 관리비 사용내역 */ /* 상품 */ .product-item{display:block;background:#fff;color:#202020;cursor:pointer;position:relative} .product-item .product-thumb{text-align:center} .product-item .item-info span{display:block;line-height:1.4} .product-item .item-info span.product-name{font-size:.8125rem;font-weight:400;margin-bottom:0;color:#202020;width:80%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .product-item .item-info span.brand-name{font-size:11px;color:#909090;font-weight:400;display:none} .product-item .item-info .btn-zzim{position:absolute;bottom:2rem;right:1rem} .product-item .item-info .btn-like{position:absolute;bottom:2rem;right:1rem} .product-item .price-info{display:block;line-height:1.2;margin-top:2px} .product-item .price-info span{display:inline-block;font-size:.6875rem} .product-item .price-info span.price{margin-right:5px} .product-item .price-info span.price strong{font-size:0.875rem;font-weight:600;font-family:'Nanum Gothic', sans-serif} .product-item .price-info span.original-price del{color:#909090;text-decoration:line-through;padding-top:3px;font-weight:400;font-family:'Nanum Gothic', sans-serif} .product-item .price-info span.discount-rate{position:absolute;left:0;top:1rem;z-index:100;font-size:.6875rem;color:#0057E3;padding:4px 5px;background:#FFE3E4;text-align:center;font-weight:400} .product-item .price-info span.discount-rate strong{font-size:.8125rem;font-weight:900;font-family:'Nanum Gothic', sans-serif} .product-list.card-type .product{margin-bottom:5px;position:relative} .product-list.card-type .product .product-item{display:block;background:#fff;color:#202020;cursor:pointer;position:relative;border-bottom:1px solid #909090} .product-list.card-type .product .product-item .product-thumb{height:150px;text-align:center} .product-list.card-type .product .product-item .product-thumb img{height:150px} .product-list.card-type .product .product-item .product-info{border-top:1px solid #dedede;padding:10px 1rem 1rem} .product-list.card-type .product .product-item .item-info span{display:block;line-height:1.4} .product-list.card-type .product .product-item .item-info span.product-name{font-size:.8125rem;font-weight:400;margin-bottom:0;color:#202020;width:80%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .product-list.card-type .product .product-item .item-info span.brand-name{font-size:11px;color:#909090;font-weight:400;display:none} .product-list.card-type .product .product-item .item-info span.brand-image{position:absolute;top:0;right:0;width:80px;height:80px;text-align:center} .product-list.card-type .product .product-item .item-info span.brand-image img{margin-top:15px;width:50px;height:50px} .product-list.card-type .product .product-item .item-info span.sold-count{font-size:.6875rem;color:#909090;font-weight:400;position:absolute;right:1rem;bottom:10px} .product-list.card-type .product .product-item .item-info .btn-zzim{position:absolute;bottom:2rem;right:1rem} .product-list.card-type .product .product-item .item-info .btn-like{position:absolute;bottom:2rem;right:1rem} .product-list.card-type .product .product-item .price-info{display:block;line-height:1.2;margin-top:2px} .product-list.card-type .product .product-item .price-info span{display:inline-block;font-size:.6875rem} .product-list.card-type .product .product-item .price-info span.price{margin-right:5px} .product-list.card-type .product .product-item .price-info span.price strong{font-size:1.125rem;font-weight:900;font-family:'Nanum Gothic', sans-serif} .product-list.card-type .product .product-item .price-info span.original-price del{color:#909090;text-decoration:line-through;padding-top:3px;font-weight:400;font-family:'Nanum Gothic', sans-serif} .product-list.card-type .product .product-item .price-info span.discount-rate{position:static;background:none;margin-right:5px;padding:0;font-weight:400;color:#0057E3;display:inline-block} .product-list.card-type .product .product-item .price-info span.discount-rate strong{font-size:1.125rem;font-weight:900;font-family:'Nanum Gothic', sans-serif} .product-list.inline-type .product{overflow:hidden;height:112px;padding-bottom:0;border-bottom:1px solid #dedede} .product-list.inline-type .product:last-child{border-bottom:1px solid #dedede} .product-list.inline-type .product .product-item{-js-display:flex;display:-ms-flexbox;display:flex;width:100%;height:128px;position:relative} .product-list.inline-type .product .product-item .product-thumb{width:100px;height:100px;text-align:center} .product-list.inline-type .product .product-item .product-thumb img{width:100px;height:100px;margin:0.4rem} .product-list.inline-type .product .product-item .product-info{padding:20px 1rem;border-top:none} .product-list.inline-type .product .product-item .item-info{-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch} .product-list.inline-type .product .product-item .item-info span{display:block} .product-list.inline-type .product .product-item .item-info span.brand-image{display:none} .product-list.inline-type .product .product-item .item-info span.sold-count{display:none} .product-list.inline-type .product .product-item .item-info span.product-name{width:100%} .product-list.inline-type .product .product-item .price-info{display:block;margin-top:1rem;width:100%} .product-list.column-type:before,.product-list.column-type:after{content:"";display:table} .product-list.column-type:after{clear:both} .product-list.column-type .product{width:50%;float:left;border-right:1px solid #dedede;border-bottom:1px solid #dedede} .product-list.column-type .product:nth-child(2n){border-right:none} .product-list.column-type .product .product-item{width:100%;height:280px;position:relative} .product-list.column-type .product .product-item .product-thumb{width:100%;height:185px;text-align:center} .product-list.column-type .product .product-item .product-thumb img{width:175px;height:175px;margin:0 auto;margin-top:0.5rem} .product-list.column-type .product .product-item .product-info{padding:0 1rem;border-top:none} .product-list.column-type .product .product-item .item-info{border-top:none;-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch} .product-list.column-type .product .product-item .item-info span{display:block} .product-list.column-type .product .product-item .item-info span.brand-image{display:none} .product-list.column-type .product .product-item .item-info span.sold-count{display:none} .product-list.column-type .product .product-item .item-info span.product-name{width:100%} .product-list.column-type .product .product-item .item-info .btn-zzim{bottom:1rem} .product-list.column-type .product .product-item .item-info .btn-like{bottom:1rem} .product-list.column-type .product .product-item .price-info{display:block;margin-top:0.5rem;width:100%} .product-list.column-type .product .product-item .price-info span{display:block} .product-list.slider-type{left:0;float:none;overflow-y:hidden;overflow-x:auto;width:100%;white-space:nowrap;height:180px} .product-list.slider-type:before,.product-list.slider-type:after{content:"";display:table} .product-list.slider-type:after{clear:both} .product-list.slider-type .product{width:110px;margin-right:5px;float:none;display:inline-block;white-space:nowrap} .product-list.slider-type .product .product-item{background:transparent} .product-list.slider-type .product-thumb{width:100px;height:100px;text-align:center;border-radius:100px;overflow:hidden;margin:0 auto;border:1px solid #dedede} .product-list.slider-type .product-thumb img{height:100px} .product-list.slider-type .product-info{border-top:none} .product-list.slider-type .item-info span{text-align:center} .product-list.slider-type .item-info span.brand-name{display:none} .product-list.slider-type .item-info span.product-name{width:100%} .product-list.slider-type .item-info .btn-zzim{display:none} .product-list.slider-type .item-info .btn-like{display:none} .product-list.slider-type .price-info{margin-top:0} .product-list.slider-type .price-info span{text-align:center;display:block;font-size:.875rem} .product-list.slider-type .price-info span.discount-rate{display:none} .product-list.slider-type .price-info span.price strong{font-size:.875rem} .product-list.slider-type .price-info span.original-price{font-size:.6875rem} .product-list.card-type .product .flag-group{position:absolute;z-index:1;top:131px;left:1rem} .product-list.card-type .product .flag-group:before,.product-list.card-type .product .flag-group:after{content:"";display:table} .product-list.card-type .product .flag-group:after{clear:both} .product-list.card-type .product .flag-group .flag{display:block;float:left;color:#fff;font-size:10px;text-align:center;letter-spacing:-0.5px;width:50px;height:20px;line-height:20px;font-weight:400;background-image:url(../img/sprites.png);background-position:-134px -239px;width:50px;height:20px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.product-list.card-type .product .flag-group .flag{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .product-list.card-type .product .flag-group .flag:not(:first-child){background-image:url(../img/sprites.png);background-position:-78px -239px;width:50px;height:20px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.product-list.card-type .product .flag-group .flag:not(:first-child){background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .product-list.inline-type .product,.product-list.column-type .product{position:relative} .product-list.inline-type .product .flag-group,.product-list.column-type .product .flag-group{position:absolute;z-index:1;top:92px;left:145px} .product-list.inline-type .product .flag-group:before,.product-list.inline-type .product .flag-group:after,.product-list.column-type .product .flag-group:before,.product-list.column-type .product .flag-group:after{content:"";display:table} .product-list.inline-type .product .flag-group:after,.product-list.column-type .product .flag-group:after{clear:both} .product-list.inline-type .product .flag-group .flag,.product-list.column-type .product .flag-group .flag{background:#fff;border:1px solid #ccc;font-size:10px;padding:1px 5px;border-radius:3px;color:#0098FB;font-weight:400} .product-list.inline-type .product .flag-group .flag:not(:first-child),.product-list.column-type .product .flag-group .flag:not(:first-child){margin-left:2px;color:#F62386} .product-list.column-type .product{position:relative}.product-list.column-type .product .flag-group{position:absolute;z-index:100;top:104px;left:1rem} .product-list.column-type .product .flag-group:before,.product-list.column-type .product .flag-group:after{content:"";display:table} .product-list.column-type .product .flag-group:after{clear:both} /********************** 공통 기본 리스트/ 상세 시작 *********************/ /********************** 공통 기본 리스트 상세 시작 *********************/ /********************** Basic 리스트 *********************/ /* 홈(하우스관리), */ .basic-item{display:block;background:#fff;color:#202020;cursor:pointer;position:relative} .basic-item .basic-thumb{text-align:center} .basic-item normal-name{margin-top:5px; font-size:1.2rem;font-weight:400;font-family:'Nanum Gothic', sans-serif; } .basic-item .word{display: block; width:90%; margin-top:10px; line-height:1.4; font-size:1.2rem;font-weight:400;font-family:'Nanum Gothic', sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: normal; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 4 ; -webkit-box-orient: vertical; } .basic-item .desc-info span{display:block;line-height:1.4} .basic-item .desc-info span.big-desc{font-size:1.2rem;font-weight:700;margin-bottom:0;color:#202020;width:90%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .basic-item .desc-info span.middle-desc{font-size:1rem;font-weight:600;margin-bottom:0;color:#202020;width:90%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .basic-item .desc-info span.small-desc{font-size:.8125rem;font-weight:400;margin-bottom:0;color:#202020;width:90%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .basic-item .desc-info span.micro-desc{font-size:11px;color:#909090;font-weight:400;display:none} .basic-item .desc-info span.inline-desc{display:inline-block; font-size:1rem;font-weight:400;margin-bottom:0;color:#202020;width:100%; } .basic-item .desc-info span.desc-bar{font-size:1rem;color:#E5E5E5;} .basic-item .desc-info .btn-like{position:absolute;bottom:2rem;right:1rem} .basic-item .item-info{display:block;line-height:1.2;margin-top:2px} .basic-item .item-info span{display:inline-block;font-size:.6875rem} .basic-item .item-info span.big-name{margin-right:5px; font-size:1.2rem;font-weight:700;font-family:'Nanum Gothic', sans-serif} .basic-item .item-info span.middle-name{margin-right:5px; font-size:1rem;font-weight:600;font-family:'Nanum Gothic', sans-serif} .basic-item .item-info span.small-name{margin-right:5px; font-size:0.875rem;font-weight:400;font-family:'Nanum Gothic', sans-serif} .basic-item .item-info span.normal-name{margin-right:20px; font-size:1.2rem;font-weight:400;font-family:'Nanum Gothic', sans-serif} .basic-item .item-info span.inline-name{display:inline-block; font-size:1rem;font-weight:400;margin-bottom:0;color:#202020;width:80%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .basic-item .item-info span.original-price del{color:#909090;text-decoration:line-through;padding-top:3px;font-weight:400;font-family:'Nanum Gothic', sans-serif} .basic-item .item-info span.special-name{position:absolute;left:0;top:1rem;z-index:100;font-size:.6875rem;color:#0057E3;padding:4px 5px;background:#FFE3E4;text-align:center;font-weight:400} .basic-list.card-type .basic{margin-bottom:5px;position:relative} .basic-list.card-type .basic .basic-item{display:block;background:#fff;color:#202020;cursor:pointer;position:relative;border-bottom:1px solid #909090} .basic-list.card-type .basic .basic-item .basic-thumb{height:150px;text-align:center} .basic-list.card-type .basic .basic-item .basic-thumb img{height:150px} .basic-list.card-type .basic .basic-item .basic-info{border-top:1px solid #dedede;padding:10px 1rem 1rem} .basic-list.card-type .basic .basic-item .desc-info span{display:block;line-height:1.4} .basic-list.card-type .basic .basic-item .desc-info span.big-desc{font-size:1.2rem;font-weight:700;margin-bottom:0;color:#202020;width:90%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .basic-list.card-type .basic .basic-item .desc-info span.middle-desc{font-size:1rem;font-weight:600;margin-bottom:0;color:#202020;width:90%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .basic-list.card-type .basic .basic-item .desc-info span.small-desc{font-size:.8125rem;font-weight:400;margin-bottom:0;color:#202020;width:90%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .basic-list.card-type .basic .basic-item .desc-info span.normal-desc{font-size:1.2rem;font-weight:400;margin-bottom:0;color:#202020;width:90%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .basic-list.card-type .basic .basic-item .desc-info span.micro-desc{font-size:11px;color:#909090;font-weight:400;display:none} .basic-list.card-type .basic .basic-item .desc-info span.brand-image{position:absolute;top:0;right:0;width:80px;height:80px;text-align:center} .basic-list.card-type .basic .basic-item .desc-info span.brand-image img{margin-top:15px;width:50px;height:50px} .basic-list.card-type .basic .basic-item .desc-info span.sold-count{font-size:.6875rem;color:#909090;font-weight:400;position:absolute;right:1rem;bottom:10px} .basic-list.card-type .basic .basic-item .desc-info .btn-like{position:absolute;bottom:2rem;right:1rem} .basic-list.card-type .basic .basic-item .item-info{display:block;line-height:1.2;margin-top:2px} .basic-list.card-type .basic .basic-item .item-info span{display:inline-block;font-size:.6875rem} .basic-list.card-type .basic .basic-item .item-info span.big-name{margin-right:5px; font-size:1.2em;font-weight:700;font-family:'Nanum Gothic', sans-serif} .basic-list.card-type .basic .basic-item .item-info span.middle-name{margin-right:5px; font-size:1rem;font-weight:600;font-family:'Nanum Gothic', sans-serif} .basic-list.card-type .basic .basic-item .item-info span.small-name{margin-right:5px; font-size:0.875rem;font-weight:400;font-family:'Nanum Gothic', sans-serif} .basic-list.card-type .basic .basic-item .item-info span.normal-name{margin-right:5px; font-size:1.2rem;font-weight:400;font-family:'Nanum Gothic', sans-serif; width:90%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .basic-list.card-type .basic .basic-item .item-info span.original-price del{color:#909090;text-decoration:line-through;padding-top:3px;font-weight:400;font-family:'Nanum Gothic', sans-serif} .basic-list.card-type .basic .basic-item .item-info span.special-name{position:static;background:none;margin-right:5px;padding:0;font-weight:400;color:#0057E3;display:inline-block} .basic-list.inline-type .basic{overflow:hidden; height:100%; max-height:280px; padding-bottom:0;border-bottom:1px solid #dedede} .basic-list.inline-type .basic:last-child{border-bottom:1px solid #dedede} .basic-list.inline-type .basic .basic-item{-js-display:flex;display:-ms-flexbox;display:flex;width:100%; position:relative; padding:1rem; } .basic-list.inline-type .basic .basic-item .basic-thumb{width:100px;height:100px;text-align:center} .basic-list.inline-type .basic .basic-item .basic-thumb img{width:100px;height:100px; border-radius: 5px; } .basic-list.inline-type .basic .basic-item .basic-info{padding:1rem 1rem;border-top:none} .basic-list.inline-type .basic .basic-item .desc-info{margin:5px 0; -ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch} .basic-list.inline-type .basic .basic-item .desc-info span{display:block} .basic-list.inline-type .basic .basic-item .desc-info span.brand-image{display:none} .basic-list.inline-type .basic .basic-item .desc-info span.sold-count{display:none} .basic-list.inline-type .basic .basic-item .desc-info span.normal-desc{width:100%;} .basic-list.inline-type .basic .basic-item .item-info{display:block;width:100%} .basic-list.column-type:before,.basic-list.column-type:after{content:"";display:table} .basic-list.column-type:after{clear:both} .basic-list.column-type .basic{width:50%;float:left;border-right:1px solid #dedede; } .basic-list.column-type .basic:nth-child(2n){border-right:none} .basic-list.column-type .basic .basic-item{width:100%; position:relative; } .basic-list.column-type .basic .basic-item .basic-thumb{width:100%; text-align:center; padding-top:1rem;} .basic-list.column-type .basic .basic-item .basic-thumb img{width:110px;height:110px; border-radius: 5px; } .basic-list.column-type .basic .basic-item .basic-info{padding:1rem 1rem;border-top:none} .basic-list.column-type .basic .basic-item .desc-info{margin: 1rem 0; border-top:none;-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch} .basic-list.column-type .basic .basic-item .desc-info span{display:block} .basic-list.column-type .basic .basic-item .desc-info span.brand-image{display:none} .basic-list.column-type .basic .basic-item .desc-info span.sold-count{display:none} .basic-list.column-type .basic .basic-item .desc-info span.big-desc{width:100%} .basic-list.column-type .basic .basic-item .desc-info span.middle-desc{width:100%} .basic-list.column-type .basic .basic-item .desc-info span.small-desc{width:100%} .basic-list.column-type .basic .basic-item .desc-info span.normal-desc{width:100%} .basic-list.column-type .basic .basic-item .desc-info .btn-like{bottom:1rem} .basic-list.column-type .basic .basic-item .item-info{display:block;margin-top:0.5rem;width:100%} .basic-list.column-type .basic .basic-item .item-info span{display:block} /* .basic-list.slider-type{left:0;float:none;overflow-y:hidden;overflow-x:auto;width:100%;white-space:nowrap;height:180px} .basic-list.slider-type:before,.basic-list.slider-type:after{content:"";display:table} .basic-list.slider-type:after{clear:both} .basic-list.slider-type .basic{width:110px;margin-right:5px;float:none;display:inline-block;white-space:nowrap} .basic-list.slider-type .basic .basic-item{background:transparent} .basic-list.slider-type .basic-thumb{width:100px;height:100px;text-align:center;border-radius:100px;overflow:hidden;margin:0 auto;border:1px solid #dedede} .basic-list.slider-type .basic-thumb img{height:100px} .basic-list.slider-type .basic-info{border-top:none} .basic-list.slider-type .desc-info span{text-align:center} .basic-list.slider-type .desc-info span.micro-desc{display:none} .basic-list.slider-type .desc-info span.big-desc{width:100%} .basic-list.slider-type .desc-info span.middle-desc{width:100%} .basic-list.slider-type .desc-info span.small-desc{width:100%} .basic-list.slider-type .desc-info span.normal-desc{width:100%} .basic-list.slider-type .desc-info .btn-like{display:none} .basic-list.slider-type .item-info{margin-top:0} .basic-list.slider-type .item-info span{text-align:center;display:block;font-size:.875rem} .basic-list.slider-type .item-info span.special-name{display:none} .basic-list.slider-type .item-info span.original-price{font-size:.6875rem} */ .basic-list.card-type .basic .flag-group{position:absolute;z-index:1;top:131px;left:1rem} .basic-list.card-type .basic .flag-group:before,.basic-list.card-type .basic .flag-group:after{content:"";display:table} .basic-list.card-type .basic .flag-group:after{clear:both} .basic-list.card-type .basic .flag-group .flag{display:block;float:left;color:#fff;font-size:10px;text-align:center;letter-spacing:-0.5px;width:50px;height:20px;line-height:20px;font-weight:400;background-image:url(../img/sprites.png);background-position:-134px -239px;width:50px;height:20px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.basic-list.card-type .basic .flag-group .flag{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .basic-list.card-type .basic .flag-group .flag:not(:first-child){background-image:url(../img/sprites.png);background-position:-78px -239px;width:50px;height:20px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.basic-list.card-type .basic .flag-group .flag:not(:first-child){background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .basic-list.inline-type .basic,.basic-list.column-type .basic{position:relative} .basic-list.inline-type .basic .flag-group,.basic-list.column-type .basic .flag-group{position:absolute;z-index:1;top:92px;left:145px} .basic-list.inline-type .basic .flag-group:before,.basic-list.inline-type .basic .flag-group:after,.basic-list.column-type .basic .flag-group:before,.basic-list.column-type .basic .flag-group:after{content:"";display:table} .basic-list.inline-type .basic .flag-group:after,.basic-list.column-type .basic .flag-group:after{clear:both} .basic-list.inline-type .basic .flag-group .flag,.basic-list.column-type .basic .flag-group .flag{background:#fff;border:1px solid #ccc;font-size:10px;padding:1px 5px;border-radius:3px;color:#0098FB;font-weight:400} .basic-list.inline-type .basic .flag-group .flag:not(:first-child),.basic-list.column-type .basic .flag-group .flag:not(:first-child){margin-left:2px;color:#F62386} .basic-list.column-type .basic{position:relative}.basic-list.column-type .basic .flag-group{position:absolute;z-index:100;top:104px;left:1rem} .basic-list.column-type .basic .flag-group:before,.basic-list.column-type .basic .flag-group:after{content:"";display:table} .basic-list.column-type .basic .flag-group:after{clear:both} .basic-more-list{display:block;text-align:center;font-size:1.2rem;font-weight:400;line-height:3.5rem; background-color:#D4D4D4;} /* Basic */ /* 불편러 썰 */ .basic-list.slider-type{left:0;float:none;overflow-y:hidden;overflow-x:auto;width:100%;white-space:nowrap;height:180px} .basic-list.slider-type:before,.basic-list.slider-type:after{content:"";display:table} .basic-list.slider-type:after{clear:both} .basic-list.slider-type .product{width:160px;margin-right:5px;float:none;display:inline-block;white-space:nowrap} .basic-list.slider-type .product .product-item{background:transparent} .basic-list.slider-type .product-thumb{width:150px;height:120px;text-align:center;border-radius:10px;overflow:hidden; } .basic-list.slider-type .product-thumb img{width:150px; height:120px; } .basic-list.slider-type .product-info{border-top:none;margin-top:5px; } .basic-list.slider-type .item-info span{text-align:center} .basic-list.slider-type .item-info span.brand-name{display:none;text-align:center} .basic-list.slider-type .item-info span.product-name{width:100%} .basic-list.slider-type .item-info .btn-zzim{display:none} .basic-list.slider-type .sub-info{margin-top:0; margin-left:3px; } .basic-list.slider-type .sub-info span{display:inline-block; text-align:center;font-size:.875rem} .basic-list.slider-type .sub-info span.cmmt{display:inline-block; font-size:.875rem; } .basic-list.slider-type .sub-info span.original-price{font-size:.6875rem} /* 불편러 썰 */ /* 불편러 썰 */ .basic-list.ssul{padding:10px 0 0 1rem;height:200px} .basic-list.ssul .product{width:130px;margin-right:0;position:relative} .basic-list.ssul .product .ranking{display:inline-block;position:absolute;top:0;left:0;z-index:100;font-size:.6875rem;background:#303030;padding:0 5px;width:20px;height:20px;text-align:center;color:#fff} .basic-list.ssul .product-thumb{border:none} .basic-list.ssul .item-info span{text-align:left} .basic-list.ssul .item-info span.brand-name{display:block} .basic-list.ssul .sub-info span{text-align:left; } /* 불편러 썰 */ /******************** notice 리스트 *********************/ /* 홈(빌스톡톡), 관리실 공지사항 리스트 */ /* .notice-box{display:block;margin:0.3rem 0.3rem;padding: 12px 12px;line-height:1.6rem;background:#fff;border:1px solid #BFBFBF;color:#202020;cursor:pointer;position:relative;border-radius:10px;} */ .notice-box{display:block;margin:1rem 1rem;padding: 12px 12px;line-height:1.6rem;background:#fff;border:1px solid #BFBFBF;color:#202020;cursor:pointer;position:relative;border-radius:10px;} .notice-item{display:block;background:#fff;color:#202020;cursor:pointer;position:relative;} .notice-item .item-info{display:block;line-height:1.8;} /*.notice-item .item-info .line{display:block;margin-top:1rem;border-bottom:1px solid #dedede;}*/ .notice-item .part-info span{display:inline-block;font-size:1.2rem} .notice-item .item-info span.noti-title{margin-right:5px; } .notice-item .item-info span.noti-title{display:block; line-height:1.4;font-size:1.2rem;font-weight:600;font-family:'Nanum Gothic', sans-serif} .notice-item .item-info span.noti-date{font-size:1rem;color:#202020;} .notice-item .item-info span.noti-writer{font-size:1rem;color:#202020;} .notice-item .item-info span.noti-cnt{font-size:1rem;color:#202020;} .notice-item .item-info span.noti-conts{display:block; margin-top:1rem;line-height:1.6;font-size:1.2rem;font-weight:500;font-family:'Nanum Gothic', sans-serif} .notice-item .item-info span.noti-bar{font-size:1rem;color:#E5E5E5;} .notice-item .item-info span.noti-reply{font-size:1rem; } .notice-item .item-info span.noti-road{display:block; line-height:1.4;font-size:1rem;font-weight:600;font-family:'Nanum Gothic', sans-serif} .notice-item .item-info span.noti-jibun{display:block; line-height:1.4;font-size:1rem;font-weight:400;font-family:'Nanum Gothic', sans-serif} .notice-item .item-info span.noti-name{line-height:1.4;font-size:1rem;font-weight:600;font-family:'Nanum Gothic', sans-serif} .notice-item .item-info .noti-btn{ display:inline-block; float:right; -ms-flex:1;flex:1; margin-right:5px; width: 50px; font-size:1rem;font-weight:700;color:#fff;text-align:center;line-height:30px;background-color:#00B0F0; border: 1px solid #333333; border-radius:4px; } .notice-list.inline-type .notice{overflow:hidden;padding-bottom:0;width:100%;} .notice-list.inline-type .notice:last-child{border-bottom: none} .notice-list.inline-type .notice .notice-item{-js-display:flex;display:-ms-flexbox;width:100%;position:relative} .notice-list.inline-type .notice .notice-item .notice-info{padding: 0 1rem;line-height:1.5rem;border-top:none} .notice-list.inline-type .notice-list.inline-type .notice .notice-item .item-info{display:block;width:100%; } .notice-left-title{display:block; margin:0 1rem; text-align:left;font-size:1.2rem;font-weight:400;line-height:2rem; } .notice-more-list{display:block;text-align:center;font-size:1.2rem;font-weight:400;line-height:3.5rem; background-color:#D4D4D4;} /* notice */ /********************** Basic 상세 *********************/ /* basic detail view */ .basic-detail-view{display:block;background:#fff;color:#202020;cursor:pointer;position:relative} .basic-detail-view .detail-info{padding:0 1rem 1rem} .basic-detail-view span.line{display:block;margin:1rem 0;border-bottom:1px solid #dedede;} .basic-detail-view span.bar{font-size:1rem;color:#E5E5E5;} .basic-detail-view .view-info{display:block; line-height:1.4; padding:1rem; border-bottom:1px solid #dedede; } .basic-detail-view .view-info.end{ border-bottom:none} .basic-detail-view .view-info span{display:inline-block;font-size:.6875rem} .basic-detail-view .view-info span.writer{display:inline-block; font-size:1rem;font-weight:600;color:#202020;} .basic-detail-view .view-info span.date{display:block; font-size:1rem;font-weight:400;} .basic-detail-view .view-info span.count{display:inline-block; font-size:1rem;font-weight:400;color:#202020;} .basic-detail-view .view-info span.title{margin-right:5px; font-size:1rem;font-weight:600;font-family:'Nanum Gothic', sans-serif} .basic-detail-view .view-info span.conts{margin-right:20px; font-size:1rem; font-family:'Nanum Gothic', sans-serif; white-space:pre-line; } .basic-detail-view .view-info span.report{float:right; font-size:0.6rem;color:#909090;font-weight:400; } .basic-detail-view .view-info span.big-name{margin-right:5px; font-size:1.2rem;font-weight:700;font-family:'Nanum Gothic', sans-serif} .basic-detail-view .view-info span.middle-name{margin-right:5px; font-size:1rem;font-weight:600;font-family:'Nanum Gothic', sans-serif} .basic-detail-view .view-info span.small-name{margin-right:5px; font-size:0.875rem;font-weight:400;font-family:'Nanum Gothic', sans-serif} .basic-detail-view .view-info span.normal-name{margin-right:20px; font-size:1.2rem;font-weight:400;font-family:'Nanum Gothic', sans-serif} .basic-detail-view .view-info span.inline-name{display:inline-block; font-size:1rem;font-weight:400;margin-bottom:0;color:#202020;width:80%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .basic-detail-view .view-conts-info{display:block; line-height:1.6; padding:1.5rem 1rem; border-bottom:1px solid #dedede; } .basic-detail-view .view-conts-info.end{ border-bottom:none} .basic-detail-view .view-conts-info span{display:inline-block;font-size:.6875rem} .basic-detail-view .view-conts-info span.writer{display:inline-block; font-size:1.2rem;font-weight:600;color:#202020;} .basic-detail-view .view-conts-info span.date{display:block; font-size:1.2rem;font-weight:400;} .basic-detail-view .view-conts-info span.count{display:inline-block; font-size:1rem;font-weight:400;color:#202020;} .basic-detail-view .view-conts-info span.title{margin-right:5px; font-size:1.4rem;font-weight:600;font-family:'Nanum Gothic', sans-serif} .basic-detail-view .view-conts-info span.conts{margin-right:20px; font-size:1.2rem; font-family:'Nanum Gothic', sans-serif; white-space:pre-line; } .basic-detail-view .view-conts-info span.big-name{margin-right:5px; font-size:1.2rem;font-weight:700;font-family:'Nanum Gothic', sans-serif} .basic-detail-view .view-conts-info span.middle-name{margin-right:5px; font-size:1rem;font-weight:600;font-family:'Nanum Gothic', sans-serif} .basic-detail-view .view-conts-info span.small-name{margin-right:5px; font-size:0.875rem;font-weight:400;font-family:'Nanum Gothic', sans-serif} .basic-detail-view .view-conts-info span.normal-name{margin-right:20px; font-size:1.2rem;font-weight:400;font-family:'Nanum Gothic', sans-serif} .basic-detail-view .view-conts-info span.inline-name{display:inline-block; font-size:1rem;font-weight:400;margin-bottom:0;color:#202020;width:80%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .basic-detail-view .add-info{display:block; padding-left:1rem; } .basic-detail-view .right-view{float:right} .basic-detail-view .right-view{position:absolute;top:0; right:2rem; } .basic-detail-view .center-view{display:inline-block; width:100%; text-align:center; } /* basic detail view */ /*************************** Basic 댓글 리스트 ****************************/ .reply-item{display:block;background:#fff;color:#202020;cursor:pointer;position:relative;} .reply-item .reply-thumb{text-align:center} .reply-item span.bar{font-size:1rem;color:#E5E5E5;} .reply-item .front-info span{display:inline-block; line-height:1.8; } .reply-item .front-info span.reply-user{font-size:1rem;font-weight:700;font-family:'Nanum Gothic', sans-serif} .reply-item .front-info span.reply-date{font-size:1rem;color:#909090;font-weight:400; } .reply-item .front-info span.report{float:right; font-size:0.6rem;color:#909090;font-weight:400; } .reply-item .item-info{display:block;line-height:1.6;margin-top:5px} .reply-item .item-info span{font-size:.6875rem} .reply-item .item-info span.reply-conts{font-size:1.2rem; ;font-weight:400; font-family:'Nanum Gothic', sans-serif; white-space:pre-line; } .reply-item .desc-info span{display:inline-block; line-height:1.8; } .reply-item .desc-info span.reply-like{padding-top:10px; font-size:1rem;color:#909090;font-weight:600; } .reply-item .desc-info span.reply-write{padding-top:10px; font-size:1rem;color:#909090;font-weight:600; } .reply-item .desc-info span.reply-modify{padding-top:10px; font-size:1rem;color:#909090;font-weight:600; } .reply-item .desc-info span.reply-del{padding-top:10px; font-size:1rem;color:#909090;font-weight:600; } .reply-item .cmmt-info span{display:inline-block; line-height:1.8; width:100%; } .reply-item .cmmt-info span.cmmt_reg{padding-top:10px; font-size:1rem;color:#909090;font-weight:600; } .reply-list.inline-type .reply{overflow:hidden; background-color:#fff; } .reply-list.inline-type .reply:last-child{padding-bottom:3.5rem; border-bottom:1px solid #dedede} .reply-list.inline-type .reply .reply-item{-js-display:flex;display:-ms-flexbox;display:flex;width:100%; position:relative; padding:1rem; } .reply-list.inline-type .reply .reply-item.one-depth{ margin-left:2rem; padding-right:3rem; } .reply-list.inline-type .reply .reply-item.two-depth{ margin-left:4rem; padding-right:5rem; } .reply-list.inline-type .reply .reply-item.three-depth{ margin-left:6rem; padding-right:7rem; } .reply-list.inline-type .reply .reply-item .reply-thumb{width:30px;height:30px;text-align:center} .reply-list.inline-type .reply .reply-item .reply-thumb img{width:30px;height:30px; border-radius: 5px; } .reply-list.inline-type .reply .reply-item .reply-info{display:block; width:100%; padding-left:10px; line-height: 1.6; } .reply-list.inline-type .reply .reply-item .item-info{display:block;width:100%} .reply-more-list{display:block;text-align:center;font-size:1.2rem;font-weight:400;line-height:3.5rem; background-color:#D4D4D4;} /*************************** Basic 댓글 리스트 ****************************/ /********************** 공통 기본 리스트/상세 끝 *********************/ /********************** 공통 기본 리스트/상세 끝 *********************/ /* 서비스 업체 목록 */ .service-item{display:block;background:#fff;color:#202020;cursor:pointer;position:relative} .service-item .service-thumb{text-align:center} .service-item .part-info span{display:inline-block; margin-top:3px;} .service-item .part-info span.ctgr-name{float:left; font-size:0.8rem;color:#909090;font-weight:400;display:none} .service-item .part-info span.brand-eval{float:right; font-size:0.9rem;font-weight:600;font-family:'Nanum Gothic', sans-serif} .service-item .part-info .btn-zzim{position:absolute;bottom:2rem;right:1rem} .service-item .part-info .btn-like{position:absolute;bottom:2rem;right:1rem} /*.service-item .item-info{display:inline-block;}*/ .service-item .item-info span{display:block;font-size:1.2rem; font-weight:600;} .service-item .item-info span.brand-name{ font-size:1.2rem;font-weight:600;font-family:'Nanum Gothic', sans-serif; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .service-item .item-info span.brand-comment{font-size:1.2rem;font-weight:400;font-family:'Nanum Gothic', sans-serif} .service-item .item-info span.brand-url{font-size:1rem;font-weight:600;font-family:'Nanum Gothic', sans-serif} .service-item .item-info span.brand-desc{margin-top:5px; line-height:1.2; font-size:0.9rem;font-weight:400;font-family:'Nanum Gothic', sans-serif; /* 글자 말줄임 */ white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .service-item .item-info span.brand-eval{float:right; margin-top: 5px; font-size:0.9rem;font-weight:600;font-family:'Nanum Gothic', sans-serif} .service-list.card-type .service{margin-bottom:5px;position:relative} .service-list.card-type .service .service-item{display:block;background:#fff;color:#202020;cursor:pointer;position:relative;border-bottom:2px solid #909090} .service-list.card-type .service .service-item .service-thumb{height:150px;text-align:center} .service-list.card-type .service .service-item .service-thumb img{height:150px} .service-list.card-type .service .service-item .service-info{line-height:1.4; border-top:1px solid #dedede;padding:10px 1rem 1rem} .service-list.card-type .service .service-item .part-info span{display:inline-block;line-height:1; margin-top:3px;} .service-list.card-type .service .service-item .part-info span.brand-name{font-size:11px;color:#909090;font-weight:400;display:none} .service-list.card-type .service .service-item .part-info span.brand-image{position:absolute;top:0;right:0;width:80px;height:80px;text-align:center} .service-list.card-type .service .service-item .part-info span.brand-image img{margin-top:15px;width:50px;height:50px} .service-list.card-type .service .service-item .part-info span.sold-count{font-size:.6875rem;color:#909090;font-weight:400;position:absolute;right:1rem;bottom:10px} .service-list.card-type .service .service-item .part-info .btn-zzim{position:absolute;bottom:2rem;right:1rem} .service-list.card-type .service .service-item .part-info .btn-like{position:absolute;bottom:2rem;right:1rem} .service-list.card-type .service .service-item .item-info{display:block;line-height:1.2;margin-top:2px} .service-list.card-type .service .service-item .item-info span{display:inline-block;font-size:.6875rem} .service-list.card-type .service .service-item .item-info span.brand-name{font-size:1.2rem;font-weight:600;font-family:'Nanum Gothic', sans-serif} .service-list.card-type .service .service-item .item-info span.brand-comment{font-size:1rem;font-weight:600;font-family:'Nanum Gothic', sans-serif} .service-list.card-type .service .service-item .item-info span.brand-url{font-size:1rem;font-weight:400;margin-bottom:0;color:#202020;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .service-list.card-type .service .service-item .item-info span.brand-desc{font-size:0.9rem;font-weight:400;margin-bottom:0;color:#202020;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .service-list.card-type .service .service-item .item-info span.brand-eval{font-size:0.9rem;font-weight:400;margin-bottom:0;color:#202020;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .service-list.inline-type .service{overflow:hidden;height:120px; padding-top:5px; padding-bottom:0; padding-left:5px; border-bottom:1px solid #dedede} .service-list.inline-type .service:last-child{border-bottom:1px solid #dedede} .service-list.inline-type .service .service-item{-js-display:flex;display:-ms-flexbox;display:flex; width:100%; position:relative} .service-list.inline-type .service .service-item .service-thumb{width:90px;height:90px;text-align:center; border-radius:5px;} .service-list.inline-type .service .service-item .service-thumb img{width:90px;height:90px;margin:0.5rem; border-radius:5px;} .service-list.inline-type .service .service-item .service-info{width:100%; padding-top:25px; padding-left:115px; padding-right:1rem; border-top:none; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .service-list.inline-type .service .service-item .part-info{display:inline-block; -ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch} .service-list.inline-type .service .service-item .part-info span{display:block} .service-list.inline-type .service .service-item .part-info span.brand-image{display:none} .service-list.inline-type .service .service-item .part-info span.sold-count{display:none} .service-list.inline-type .service-list.inline-type .service .service-item .item-info{display:block;margin-top:1rem;width:100%} .service-list.column-type:before,.service-list.column-type:after{content:"";display:table} .service-list.column-type:after{clear:both} .service-list.column-type .service{width:50%;float:left;border-right:1px solid #dedede;border-bottom:1px solid #dedede} .service-list.column-type .service:nth-child(2n){border-right:none} .service-list.column-type .service .service-item{width:100%;height:280px;position:relative} .service-list.column-type .service .service-item .service-thumb{width:100%;height:145px;text-align:center} .service-list.column-type .service .service-item .service-thumb img{width:125px;height:125px;margin:0 auto;margin-top:0.5rem} .service-list.column-type .service .service-item .service-info{padding:0 1rem;border-top:none} .service-list.column-type .service .service-item .part-info{border-top:none;-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch} .service-list.column-type .service .service-item .part-info span{display:block} .service-list.column-type .service .service-item .part-info span.brand-image{display:none} .service-list.column-type .service .service-item .part-info span.sold-count{display:none} .service-list.column-type .service .service-item .part-info span.brand-url{width:100%} .service-list.column-type .service .service-item .part-info .btn-zzim{bottom:1rem} .service-list.column-type .service .service-item .part-info .btn-like{bottom:1rem} .service-list.column-type .service .service-item .item-info{display:block;margin-top:0.5rem;width:100%} .service-list.column-type .service .service-item .item-info span{display:block} .service-list.slider-type{left:0;float:none;overflow-y:hidden;overflow-x:auto;width:100%;white-space:nowrap;height:180px} .service-list.slider-type:before,.service-list.slider-type:after{content:"";display:table} .service-list.slider-type:after{clear:both} .service-list.slider-type .service{width:110px;margin-right:5px;float:none;display:inline-block;white-space:nowrap} .service-list.slider-type .service .service-item{background:transparent} .service-list.slider-type .service-thumb{width:100px;height:100px;text-align:center;border-radius:100px;overflow:hidden;margin:0 auto;border:1px solid #dedede} .service-list.slider-type .service-thumb img{height:100px} .service-list.slider-type .service-info{border-top:none} .service-list.slider-type .part-info span{text-align:center} .service-list.slider-type .part-info span.ctgr-name{display:none} .service-list.slider-type .part-info span.brand-url{width:100%} .service-list.slider-type .part-info .btn-zzim{display:none} .service-list.slider-type .part-info .btn-like{display:none} .service-list.slider-type .item-info{margin-top:0} .service-list.slider-type .item-info span{text-align:center;display:block;font-size:.875rem} .service-list.slider-type .item-info span.special-name{display:none} .service-list.slider-type .item-info span.price strong{font-size:.875rem} .service-list.slider-type .item-info span.original-price{font-size:.6875rem} .service-list.card-type .service .flag-group{position:absolute;z-index:1;top:131px;left:1rem} .service-list.card-type .service .flag-group:before,.service-list.card-type .service .flag-group:after{content:"";display:table} .service-list.card-type .service .flag-group:after{clear:both} .service-list.card-type .service .flag-group .flag{display:block;float:left;color:#fff;font-size:10px;text-align:center;letter-spacing:-0.5px;width:50px;height:20px;line-height:20px;font-weight:400;background-image:url(../img/sprites.png);background-position:-134px -239px;width:50px;height:20px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.service-list.card-type .service .flag-group .flag{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .service-list.card-type .service .flag-group .flag:not(:first-child){background-image:url(../img/sprites.png);background-position:-78px -239px;width:50px;height:20px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.service-list.card-type .service .flag-group .flag:not(:first-child){background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .service-list.inline-type .service,.service-list.column-type .service{position:relative} .service-list.inline-type .service .flag-group,.service-list.column-type .service .flag-group{position:absolute;z-index:1;top:92px;left:145px} .service-list.inline-type .service .flag-group:before,.service-list.inline-type .service .flag-group:after,.service-list.column-type .service .flag-group:before,.service-list.column-type .service .flag-group:after{content:"";display:table} .service-list.inline-type .service .flag-group:after,.service-list.column-type .service .flag-group:after{clear:both} .service-list.inline-type .service .flag-group .flag,.service-list.column-type .service .flag-group .flag{background:#fff;border:1px solid #ccc;font-size:10px;padding:1px 5px;border-radius:3px;color:#0098FB;font-weight:400} .service-list.inline-type .service .flag-group .flag:not(:first-child),.service-list.column-type .service .flag-group .flag:not(:first-child){margin-left:2px;color:#F62386} .service-list.column-type .service{position:relative}.service-list.column-type .service .flag-group{position:absolute;z-index:100;top:104px;left:1rem} .service-list.column-type .service .flag-group:before,.service-list.column-type .service .flag-group:after{content:"";display:table} .service-list.column-type .service .flag-group:after{clear:both} /*************** 우리집 화면 시작 ****************/ /* 우리집 관리비 리스트 */ .our-box{display:block; width:100%; padding:1rem;line-height:1.8rem; color:#202020;cursor:pointer;text-align:center;position:relative;border-radius:5px;} .our-conts{padding:5px 0;} .our-conts .title{display:block; text-align:left; margin:1rem 0; padding-bottom:5px; line-height:1.8; font-size:1.2rem; color:#202020; font-weight:700; border-bottom:1px solid #BFBFBF; } .our-conts .data-none{display:block; text-align:center; padding-bottom:5px; font-size:1.2rem; color:#202020; font-weight:400; } .our-card-list{width:100%; display: flex; } .our-card-list:before,.our-card-list:after{content:"";display:table} .our-card-list:after{clear:both} .our-card-list .item{width:48%;height:100px; display:inline-block;margin-bottom:1.2rem; margin-right:1.2rem; line-height:1.6rem;background:#fff;border:1px solid #A6A6A6;color:#202020;cursor:pointer;text-align:center;position:relative;border-radius:10px; box-shadow: 3px 3px 3px 1px #BFBFBF; } .our-card-list .item.light_yellow{background: #FFFCCC} .our-card-list .item:nth-child(2n){margin-right:0} .our-card-list .item .item-image{width:30px;height:30px; } .our-card-list .item .item-image img{ float:left; margin-top:13px; margin-left:10px; width:30px;height:30px; } .our-card-list .item .item-name{float:left; padding:1rem 5px; font-size:1.2rem;font-weight:500;line-height:1.6rem;color:#333333; } .our-card-list .item .item-pay{float:right; width:100%; position:relative; right:-15px; font-size:1.5rem;font-weight:700; line-height:1.6rem;color:#005174; } /* 우리집 관리비 리스트 */ /*************** 우리집 화면 끝 ****************/ /* 관리비고지서 상세 리스트 */ .forms .forms-item.bill-box{display:block;margin:0.5rem 0.5rem;padding: 12px 12px;line-height:1.6rem;background:#fff;border:1px solid #BFBFBF;color:#202020;cursor:pointer;text-align:center;position:relative;border-radius:10px;} .bill-item{display:block;border-bottom:1px solid #BFBFBF;color:#202020;cursor:pointer;position:relative;} .bill-item.end{border-bottom:none;} .bill-item .amt-info span{display:block;} .bill-item .amt-info span.item-amt{margin-right:1px; font-size:1.2rem;font-weight:500;font-family:'Nanum Gothic', sans-serif} .bill-item .amt-info span.item-tot-amt{font-size:1.2rem;font-weight:600;font-family:'Nanum Gothic', sans-serif} .bill-item .item-info{display:block;line-height:1.2;width:56%;text-align:left;} .bill-item .item-info.title{background:#fff;text-align:center; font-size:1.2rem;font-weight:500; color:#666; } .bill-item .item-info span{display:inline-block;font-size:.6875rem} .bill-item .item-info span.item-title{margin-right:5px; font-size:1.2rem;font-weight:500;font-family:'Nanum Gothic', sans-serif} .bill-list.inline-type .bill{overflow:hidden;padding-bottom:0; border-radius:5px} .bill-list.inline-type .bill:last-child{border-bottom: none} .bill-list.inline-type .bill .bill-item{-js-display:flex;display:-ms-flexbox;width:100%;position:relative} .bill-list.inline-type .bill .bill-item .bill-info{padding:15px 0;border-top:none} .bill-list.inline-type .bill .bill-item .amt-info{position:absolute;top:15px;right:0;width:44%;text-align:right;} .bill-list.inline-type .bill .bill-item .amt-info.title{background:#fff;text-align:center; font-size:1.2rem;font-weight:500; color:#666; } .bill-list.inline-type .bill .bill-item .amt-info span{display:block} .bill-list.inline-type .bill-list.inline-type .bill .bill-item .item-info{position:absolute;top:2px;left:5px} .bill-list.inline-type .bill .bill-item .item-info*{float:left} .bill-more-list{display:block;text-align:center;font-size:1.2rem;font-weight:600;line-height:2rem;color:#666;} /* 관리비고지서 상세 리스트 */ /*************** 홈 화면 끝 ****************/ /*************** 관리실 화면 시작 ****************/ /* 관리실 메뉴 리스트 */ /* .cent-list .item .item-image img{width:100%} .cent-list .item .item-name{width:100%;position:absolute;left:0;top:60%;z-index:100;font-size:1.2rem;font-weight:700;line-height:1.6rem;color:#202020;text-align:center} .cent-conts{margin:0.5rem;} .cent-conts .title{display:block; text-align:center; font-size:1.2rem;color:#202020; margin:1.5rem 1rem;font-weight:700} .cent-list{width:100%; display: flex; justify-content: space-between;} .cent-list .item{width:40%;height:150px} .cent-list .item.gray{background: #909090} .cent-list .item.light_yellow{background: #FFFCCC} .cent-list .item:nth-child(2n){margin-right:0} .cent-list .item .item-image{width:44px;height:44px;margin-top:-30px;margin-left:-22px} .cent-list{width:100%;} .cent-list:before,.cent-list:after{content:"";display:table} .cent-list:after{clear:both} .cent-list .item{float:left;display:inline-block;margin-bottom:1rem; margin-right:0.5rem;line-height:1.6rem;background:#fff;border:1px solid #BFBFBF;color:#202020;cursor:pointer;text-align:center;position:relative;border-radius:10px; box-shadow: 3px 3px 3px 1px #202020;} .cent-list .item .item-image{display:block;position:absolute;top:40%;left:50%} */ .cent-conts{margin-right:0.5rem;} .cent-conts .title{display:block; text-align:center; font-size:1.2rem;color:#202020; margin:1.5rem 1rem;font-weight:700} .cent-list{width:100%; display: flex; justify-content: space-between;} .cent-list:before,.cent-list:after{content:"";display:table} .cent-list:after{clear:both} .cent-list .item{width:30%;height:100px; margin:1rem 5px; background:#fff;border:1px solid #BFBFBF;color:#202020;cursor:pointer; position:relative;border-radius:10px; box-shadow: 3px 3px 3px 1px #202020;} .cent-list .item.gray{background: #BFBFBF} .cent-list .item.light_blue{background: #C8EBFA} .cent-list .item.light_yellow{background: #FFFCCC} .cent-list .item:nth-child(3n){margin-right:0} .cent-list .item .item-name{width:100%;position:absolute;left:0;top:60%;z-index:100;font-size:1rem;font-weight:700;color:#202020;text-align:center} .cent-list .item .item-image{display:block;position:absolute;top:40%;left:50%; width:44px;height:44px;margin-top:-30px;margin-left:-22px; } .cent-list .item .item-image img{width:100%} /* 관리실 메뉴 리스트 */ /* 관리실 입주민제안/민원, 자유게시판 리스트 */ .forms .forms-item.board-box{display:block; padding: 12px 12px;line-height:1.6rem;background:#fff;border:1px solid #BFBFBF;color:#202020;cursor:pointer;position:relative;border-radius:10px;} /* .board-item{display:block;background:#fff;color:#202020;cursor:pointer;position:relative;} .board-item .date-info span{display:block;} .board-item .date-info span.brd-date{font-size:1rem;color:#909090;font-weight:400;display:none} .board-item .reply-info span{display:block;} .board-item .reply-info span.reply-user{font-size:1rem;font-weight:700;font-family:'Nanum Gothic', sans-serif} .board-item .reply-info span.reply-date{font-size:1rem;color:#909090;font-weight:400; } .board-item .reply-info span.reply-conts{padding-top:8px;font-size:1.2rem;color:#202020;font-weight:500; } .board-item .reply-info span.reply-reg{padding-top:8px;font-size:1rem;color:#202020;font-weight:700; } .board-item .item-info{display:block;line-height:1.2;margin-top:2px; padding-bottom:5px;} .board-item .item-info span{display:inline-block;font-size:1.2rem} .board-item .item-info span.brd-user{font-size:1rem;font-weight:600;font-family:'Nanum Gothic', sans-serif} .board-item .item-info span.brd-title{line-height:1.4;font-size:1.2rem;font-weight:600;font-family:'Nanum Gothic', sans-serif} .board-item .item-info span.brd-conts{padding-top:1rem;line-height:1.6;font-size:1.2rem;font-weight:500;font-family:'Nanum Gothic', sans-serif; white-space:pre; } */ .board-list.inline-type .board{overflow:hidden;padding-bottom:0;width:100%} .board-list.inline-type .board:last-child{border-bottom: none} .board-list.inline-type .board .board-item{-js-display:flex;display:-ms-flexbox;width:100%;position:relative} .board-list.inline-type .board .board-item .board-info{padding: 0.5rem 1rem;line-height:1.5rem;border-top:none} .board-list.inline-type .board .board-item .date-info{-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch;padding-bottom:15px; border-bottom:1px solid #dedede} .board-list.inline-type .board .board-item .date-info.end{padding-bottom:0; border-bottom:none;} .board-list.inline-type .board .board-item .date-info span{display:block} .board-list.inline-type .board .board-item .reply-info{-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch;padding-top:10px;padding-bottom:15px; border-bottom:1px solid #dedede} .board-list.inline-type .board .board-item .reply-info.end{padding-bottom:0; border-bottom:none;} .board-list.inline-type .board .board-item .reply-info span{display:block} .board-list.inline-type .board-list.inline-type .board .board-item .item-info{display:block;width:100%; } /* 관리실 입주민제안/민원, 자유게시판 리스트 */ /* 관리실 반상회 리스트 */ .forms .forms-item.meet-box{display:block;margin:0.3rem 0.3rem;padding: 12px 12px;line-height:1.6rem;background:#fff;border:1px solid #BFBFBF;color:#202020;cursor:pointer;position:relative;border-radius:10px;} .meet-item{display:block;background:#fff;color:#202020;cursor:pointer;position:relative;} .meet-item .date-info span{display:block;} .meet-item .date-info span.noti-date{font-size:1rem;color:#909090;font-weight:400;display:none} .meet-item .item-info{display:block;line-height:1.2;margin-top:2px; padding-bottom:5px;} .meet-item .item-info span{display:inline-block;font-size:.6875rem} .meet-item .item-info span.noti-title{margin-right:5px} .meet-item .item-info span.noti-title{line-height:1.4;font-size:1.2rem;font-weight:600;font-family:'Nanum Gothic', sans-serif} .meet-list.inline-type .meet{overflow:hidden;padding-bottom:0;width:100%} .meet-list.inline-type .meet:last-child{border-bottom: none} .meet-list.inline-type .meet .meet-item{-js-display:flex;display:-ms-flexbox;width:100%;position:relative} .meet-list.inline-type .meet .meet-item .meet-info{padding: 0.5rem 1rem;line-height:1.5rem;border-top:none} .meet-list.inline-type .meet .meet-item .date-info{-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch;padding-bottom:15px; border-bottom:1px solid #dedede} .meet-list.inline-type .meet .meet-item .date-info.end{padding-bottom:0; border-bottom:none;} .meet-list.inline-type .meet .meet-item .date-info span{display:block} .meet-list.inline-type .meet .meet-item .reply-info{-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch;padding-bottom:15px; border-bottom:1px solid #dedede} .meet-list.inline-type .meet .meet-item .reply-info.end{padding-bottom:0; border-bottom:none;} .meet-list.inline-type .meet .meet-item .reply-info span{display:block} .meet-list.inline-type .meet-list.inline-type .meet .meet-item .item-info{display:block;width:100%; } /* 관리실 반상회 리스트 */ /* 관리실 주택정보 - 건물수선내역 리스트 */ .repair-item{display:block;background:#fff;color:#202020;cursor:pointer;position:relative;} .repair-item .date-info span{display:block;} .repair-item .date-info span.date{font-size:1.2rem;color:#202020;font-weight:600;display:none} .repair-item .item-info{display:block;line-height:1.2;margin-top:2px; padding-bottom:5px;} .repair-item .item-info span{display:inline-block;font-size:1.2rem} .repair-item .item-info span.conts{margin-right:5px} .repair-item .item-info span.conts{line-height:1.4;font-size:1.2rem;font-weight:600;font-family:'Nanum Gothic', sans-serif} .repair-item .item-info span.amt{line-height:1.4;font-size:1.2rem;font-weight:600;font-family:'Nanum Gothic', sans-serif} .repair-list.inline-type .repair{overflow:hidden;padding-bottom:0;width:100%} .repair-list.inline-type .repair:last-child{border-bottom: none} .repair-list.inline-type .repair .repair-item{-js-display:flex;display:-ms-flexbox;width:100%;position:relative} .repair-list.inline-type .repair .repair-item .repair-info{padding: 0.5rem 1rem;line-height:1.5rem;border-top:none} .repair-list.inline-type .repair .repair-item .date-info{-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch;padding-bottom:15px; border-bottom:1px solid #dedede} .repair-list.inline-type .repair .repair-item .date-info.end{padding-bottom:0; border-bottom:none;} .repair-list.inline-type .repair .repair-item .date-info span{display:block} .repair-list.inline-type .repair-list.inline-type .repair .repair-item .item-info{display:block;width:100%; } .repair-more-list{display:block;text-align:center;font-size:1.2rem;font-weight:600;line-height:2rem;color:#666;} /* 관리실 주택정보 - 건물수선내역 리스트 */ /* 관리실 주택정보 - 수선계획 리스트 */ .plan-box{display:block;margin:0.5rem 0.5rem;padding: 12px 12px;line-height:1.6rem;background:#fff;border:1px solid #BFBFBF;color:#202020;cursor:pointer;text-align:center;position:relative;border-radius:10px;} .plan-item{display:block;border-bottom:1px solid #BFBFBF;color:#202020;cursor:pointer;position:relative;} .plan-item.end{border-bottom:none;} .plan-item .amt-info span{display:block;} .plan-item .amt-info span.item-amt{margin-right:1px} .plan-item .amt-info span.item-amt{font-size:1.2rem;font-weight:700;font-family:'Nanum Gothic', sans-serif} .plan-item .item-info{display:block;line-height:1.2;width:56%;text-align:left;} .plan-item .item-info.title{background:#fff;text-align:center;} .plan-item .item-info span{display:inline-block;font-size:.6875rem} .plan-item .item-info span.item-title{margin-right:5px} .plan-item .item-info span.item-title{font-size:1.2rem;font-weight:700;font-family:'Nanum Gothic', sans-serif} .plan-item .item-info span.item-date{padding-bottom:10px; font-size:1.2rem;font-weight:700;font-family:'Nanum Gothic', sans-serif; color:#666;} .plan-list.inline-type .plan{overflow:hidden;padding-bottom:0; border-radius:5px} .plan-list.inline-type .plan:last-child{border-bottom: none} .plan-list.inline-type .plan .plan-item{-js-display:flex;display:-ms-flexbox;width:100%;position:relative} .plan-list.inline-type .plan .plan-item .plan-info{padding:15px 0;border-top:none} .plan-list.inline-type .plan .plan-item .amt-info{position:absolute;top:15px;right:0;width:44%;text-align:right;} .plan-list.inline-type .plan .plan-item .amt-info.title{background:#fff;text-align:center;} .plan-list.inline-type .plan .plan-item .amt-info span{display:block} .plan-list.inline-type .plan-list.inline-type .plan .plan-item .item-info{position:absolute;top:2px;left:5px} .plan-list.inline-type .plan .plan-item .item-info*{float:left} .plan-list.inline-type .plan .plan-item .item-memo{text-align:left;font-size:1.2rem;font-weight:500;font-family:'Nanum Gothic', sans-serif;} .plan-more-list{display:block;text-align:center;font-size:1.2rem;font-weight:600;line-height:2rem;color:#666;} /* 관리실 주택정보 - 수선계획 리스트 */ /* 관리비 납부현황 리스트 */ .fee-box{display:block;margin:0.5rem 0.5rem;padding: 12px 12px;line-height:1.6rem;background:#fff;border:1px solid #BFBFBF;color:#202020;cursor:pointer;text-align:center;position:relative;border-radius:10px;} .fee-item{display:block;border-bottom:1px solid #BFBFBF;color:#202020;cursor:pointer;position:relative;} .fee-item.end{border-bottom:none;} .fee-item .amt-info{display:block;line-height:1.2;width:44%;text-align:right} /* .fee-item .amt-info span{display:block;} */ .fee-item .amt-info span.item-amt{margin-right:1px} .fee-item .amt-info span.item-amt{font-size:1.2rem;font-weight:700;font-family:'Nanum Gothic', sans-serif} .fee-item .amt-info span.item-amt.blue{color:#0070C0;font-weight:700;} .fee-item .amt-info span.item-amt.red{color:#FF0000;font-weight:700;} .fee-item .amt-info span.item-balance{display:inline-block;padding-top:2rem;font-size:1.2rem;font-weight:700;font-family:'Nanum Gothic', sans-serif} .fee-item .amt-info span.item-gubun{display:inline-block;padding-right:10px; font-size:1rem;color:#797979;} .fee-item .amt-info span.item-txt{display:inline-block;padding-right:10px; font-size:1rem;font-weight:400;color:#FF0000;} .fee-item .item-info{display:block;line-height:1.2;width:56%;text-align:left;} .fee-item .item-info.title{background:#fff;text-align:center;} .fee-item .item-info span{display:inline-block;font-size:.6875rem} .fee-item .item-info span.item-title{margin-right:5px} .fee-item .item-info span.item-title{font-size:1.2rem;font-weight:700;font-family:'Nanum Gothic', sans-serif} .fee-item .item-info span.item-title.underline{text-decoration:underline;} .fee-item .item-info span.item-title.red{color:#FF0000;font-weight:700;} .fee-item .item-info span.item-dong{font-size:1.5rem;font-weight:500;font-family:'Nanum Gothic', sans-serif} .fee-item .item-info span.item-date{margin-top:5px;font-size:1rem;font-weight:500;font-family:'Nanum Gothic', sans-serif;color:#909090;} .fee-list.inline-type .fee{overflow:hidden;padding-bottom:0; border-radius:5px} .fee-list.inline-type .fee:last-child{border-bottom: none} .fee-list.inline-type .fee .fee-item{-js-display:flex;display:-ms-flexbox;width:100%;position:relative} .fee-list.inline-type .fee .fee-item .fee-info{padding:10px 0;border-top:none;font-size:1.5rem;font-weight:700; } .fee-list.inline-type .fee .fee-item .amt-info{position:absolute;top:10px;right:0;width:44%;text-align:right;} .fee-list.inline-type .fee .fee-item .amt-info.title{background:#fff;text-align:center;} /* .fee-list.inline-type .fee .fee-item .amt-info span{display:block} */ .fee-list.inline-type .fee-list.inline-type .fee .fee-item .item-info{position:absolute;top:2px;left:5px} .fee-list.inline-type .fee .fee-item .item-info*{float:left} .fee-more-list{display:block;text-align:center;font-size:1.2rem;font-weight:600;line-height:2rem;color:#666;} /* 관리비 납부현황 리스트 */ /* 관리비 사용내역 리스트 */ .use-box{display:block;margin:0.5rem 0.5rem;padding: 12px 12px;line-height:1.6rem;background:#fff;border:1px solid #BFBFBF;color:#202020;cursor:pointer;text-align:center;position:relative;border-radius:10px;} .use-item{display:block;border-bottom:1px solid #BFBFBF;color:#202020;cursor:pointer;position:relative;} .use-item.end{border-bottom:none;} .use-item .amt-info{display:block;line-height:1.2;width:44%;text-align:right} /* .use-item .amt-info span{display:block;} */ .use-item .amt-info span.item-amt{margin-right:1px} .use-item .amt-info span.item-amt{font-size:1.2rem;font-weight:700;font-family:'Nanum Gothic', sans-serif} .use-item .amt-info span.item-amt.blue{color:#0070C0;font-weight:700;} .use-item .amt-info span.item-amt.red{color:#FF0000;font-weight:700;} .use-item .amt-info span.item-balance{display:inline-block;padding-top:2rem;font-size:1.2rem;font-weight:700;font-family:'Nanum Gothic', sans-serif} .use-item .amt-info span.item-gubun{display:inline-block;padding-right:10px; font-size:1rem;color:#797979;} .use-item .amt-info span.item-txt{display:inline-block;padding-right:10px; font-size:1rem;font-weight:400;color:#FF0000;} .use-item .item-info{display:block;line-height:1.2;width:56%;text-align:left;} .use-item .item-info.title{text-align:center;} .use-item .item-info span{display:inline-block;font-size:.6875rem} .use-item .item-info span.item-title{margin-right:5px} .use-item .item-info span.item-title{font-size:1.2rem;font-weight:700;font-family:'Nanum Gothic', sans-serif} .use-item .item-info span.item-title.underline{text-decoration:underline;} .use-item .item-info span.item-title.red{color:#FF0000;font-weight:700;} .use-item .item-info span.item-dong{font-size:1.5rem;font-weight:500;font-family:'Nanum Gothic', sans-serif} .use-item .item-info span.item-date{margin-top:5px;font-size:1rem;font-weight:500;font-family:'Nanum Gothic', sans-serif;color:#909090;} .use-list.inline-type .use{overflow:hidden;padding-bottom:0; border-radius:5px} .use-list.inline-type .use:last-child{border-bottom: none} .use-list.inline-type .use .use-item{-js-display:flex;display:-ms-flexbox;width:100%;position:relative} .use-list.inline-type .use .use-item .use-info{padding:5px 0;border-top:none;font-size:1.5rem;font-weight:700; } .use-list.inline-type .use .use-item .amt-info{position:absolute;top:5px;right:0;width:44%;text-align:right;} .use-list.inline-type .use .use-item .amt-info.title{text-align:center;} /* .use-list.inline-type .use .use-item .amt-info span{display:block} */ .use-list.inline-type .use-list.inline-type .use .use-item .item-info{position:absolute;top:2px;left:5px} .use-list.inline-type .use .use-item .item-info*{float:left} .use-more-list{display:block;text-align:center;font-size:1.2rem;font-weight:600;line-height:2rem;color:#666;} /* 관리비 사용내역 리스트 */ /*************** 관리실 화면 끝 ****************/ /*************** 나의정보 화면 시작 ****************/ /* 나의정보 */ .my-info{background:#fff;height:70px;box-shadow:0 0 8px rgba(0,0,0,0.6);border-right:1px solid #dedede;padding:1rem;line-height:1.4} .my-info .user-name{top:5px;font-size:1.2rem;font-weight:700;color:#202020;position:relative} .my-info .user-name[data-state=new]:after{display:inline-block;content:'';position:absolute;top:4px;right:-15px;z-index:800;background-image:url(../img/sprites.png);background-position:-266px -239px;width:12px;height:12px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.my-info .user-name[data-state=new]:after{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .my-info .btn-inline{float:right;display:inline-block;height:40px;padding:0 15px;min-width:70px;background-color:#BFBFBF;border:1px solid #DEDEDE;border-radius:3px;line-height:40px;font-size:1rem;font-weight:700;color:#202020;text-align:center} /* 나의정보 */ /* 빌스 고객센터 */ .mq-list{background:#fff;border-bottom:1px solid #dedede;padding:1rem;line-height:1.4;border-radius:10px;} .mq-list.end{border-bottom:none;} .mq-list .title{font-size:1.2rem;font-weight:700;color:#202020;position:relative} .mq-list .title[data-state=new]:after{display:inline-block;content:'';position:absolute;top:4px;right:-15px;z-index:800;background-image:url(../img/sprites.png);background-position:-266px -239px;width:12px;height:12px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.mq-list .title[data-state=new]:after{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .mq-list .next{float:right;display:inline-block;position:relative;bottom:6px;font-size:1.5rem;font-weight:700;color:#909090;} .mq-list .term{float:right;display:inline-block;position:relative;font-size:1em;font-weight:500;color:#909090;} /* 빌스 고객센터 */ /*************** 나의정보 화면 끝 ****************/ /* 플리 메인 카드형 */ .card-type.product-list .product .product-item .pply-info { background-color: rgb(212, 230, 244); height: 220px; text-align: center; padding: 50px 1rem 1rem; } .card-type.product-list .product .product-item .pply-info span { font-size: 0.68rem; display: block; } .card-type.product-list .product .product-item .pply-info span.txt { padding-top: 30px; color: rgb(0, 87, 227); font-weight: 400; position: static; } .card-type.product-list .product .product-item .pply-info span.txt strong { font-family: "Roboto", sans-serif; font-size: 4.82rem; font-weight: 900; } .card-type.product-list .product .product-item .pply-info span.original-txt del { color: rgb(144, 144, 144); padding-top: 3px; font-family: "Roboto", sans-serif; font-weight: 400; text-decoration: line-through; } .card-type.product-list .product .product-item .pply-info span.blue-txt { padding: 0px; color: rgb(0, 87, 227); font-weight: 400; margin-right: 5px; display: inline-block; position: static; } .card-type.product-list .product .product-item .pply-info span.blue-txt strong { font-family: "Roboto", sans-serif; font-size: 1.12rem; font-weight: 900; } /* 플리 메인 카드형 */ /* 즐겨찾기 목록 */ .favo-item{position:relative;border-bottom:1px solid #BBBBBB} .favo-item .favo-item{-js-display:flex;display:-ms-flexbox;display:flex;width:100%;height:70px;position:relative;border-bottom:1px solid #dedede} .favo-item .favo-item .favo-thumb{width:60px;height:60px;text-align:center} .favo-item .favo-item .favo-thumb img{width:60px;height:60px;margin-left:3rem;margin-top:5px;border-radius:100px;} .favo-item .favo-item .favo-info{padding:24px 4rem;border-top:none} .favo-item .favo-item .item-info{-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch} .favo-item .favo-item .item-info span{display:block;line-height:1.4} .favo-item .favo-item .item-info span.favo-name{font-size:1.0125rem;font-weight:400;margin-bottom:0;color:#202020;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .favo-item .favo-item .item-info span.brand-name{font-size:11px;color:#909090;font-weight:400} /* 즐겨찾기 목록 */ /* 메모 아이템 시작 */ .memo-item { background: rgb(255, 255, 255); color: rgb(32, 32, 32); display: block; position: relative; cursor: pointer; } .memo-item .memo-thumb { text-align: center; } .memo-item .item-info span { line-height: 1.4; display: block; } .memo-item .item-info span.memo-name { width: 80%; color: rgb(32, 32, 32); overflow: hidden; font-size: 0.81rem; font-weight: 400; margin-bottom: 0px; white-space: nowrap; -ms-text-overflow: ellipsis; } .memo-item .item-info span.brand-name { color: rgb(144, 144, 144); font-size: 11px; font-weight: 400; display: none; } .memo-item .item-info .btn-zzim { right: 1rem; bottom: 2rem; position: absolute; } .memo-item .price-info { line-height: 1.2; margin-top: 2px; display: block; } .memo-item .price-info span { font-size: 0.68rem; display: inline-block; } .memo-item .price-info span.price { margin-right: 5px; margin-bottom: 15px; } .memo-item .price-info span.price strong { font-family: "Roboto", sans-serif; font-size: 1.12rem; font-weight: 900; } .memo-item .price-info span.original-price del { color: rgb(144, 144, 144); padding-top: 3px; font-family: "Roboto", sans-serif; font-weight: 400; text-decoration: line-through; } .memo-item .price-info span.discount-rate { background: rgb(255, 227, 228); padding: 4px 5px; left: 0px; top: 1rem; text-align: center; color: rgb(0, 87, 227); font-size: 0.68rem; font-weight: 400; position: absolute; z-index: 100; } .memo-item .price-info span.discount-rate strong { font-family: "Roboto", sans-serif; font-size: 0.81rem; font-weight: 900; } /* 메모 아이템 끝 */ .zzim-item{position:relative;border-bottom:1px solid #BBBBBB} .zzim-item .product-item{-js-display:flex;display:-ms-flexbox;display:flex;width:100%;height:130px;position:relative;border-bottom:1px solid #dedede} .zzim-item .product-item .product-thumb{width:200px;height:200px;text-align:center} .zzim-item .product-item .product-thumb img{width:100px;height:100px;margin:1rem} .zzim-item .product-item .product-info{padding:24px 1rem;border-top:none} .zzim-item .product-item .item-info{-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch} .zzim-item .product-item .item-info span{display:block;line-height:1.4} .zzim-item .product-item .item-info span.product-name{font-size:.8125rem;font-weight:400;margin-bottom:0;color:#202020;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .zzim-item .product-item .item-info span.brand-name{font-size:11px;color:#909090;font-weight:400} .zzim-item .product-item .price-info{display:block;line-height:1.2;display:block;margin-top:1rem;width:100%} .zzim-item .product-item .price-info span{display:inline-block;font-size:.6875rem} .zzim-item .product-item .price-info span.price{margin-right:5px;font-weight:700} .zzim-item .product-item .price-info span.price strong{font-size:1.125rem;font-weight:700} .zzim-item .product-item .price-info span.original-price del{color:#909090;text-decoration:line-through;padding-top:3px;font-weight:400} .zzim-item .product-item .price-info span.discount-rate{font-weight:400;margin-right:10px;color:#0057E3;display:inline-block} .zzim-item .product-item .price-info span.discount-rate strong{font-size:1.125rem;font-weight:700} .zzim-item .bottom-btns{background:#fff;padding:8px 1rem;height:44px} .zzim-item .bottom-btns a{display:inline-block;float:left;font-size:.6875rem;height:26px;line-height:26px} .zzim-item .bottom-btns .btn-del{color:#909090}.zzim-item .bottom-btns .btn-buy{float:right;background:#202020;border-radius:20px;padding:0 1rem;color:#fff} .product-list.zzim li{position:relative} .product-list.zzim li input[type=checkbox]{position:absolute;left:-9999px} .product-list.zzim li input[type=checkbox]+label{display:block;position:relative;padding:0 0 0 22px;font-size:0.875rem;font-weight:400;color:#909090} .product-list.zzim li input[type=checkbox]+label:before{content:'';display:block;position:absolute;top:1rem;left:1rem;z-index:100;background-image:url(../img/sprites.png);background-position:-324px -120px;width:22px;height:22px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.product-list.zzim li input[type=checkbox]+label:before{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .product-list.zzim li input[type=checkbox]:checked+label{color:#333}.product-list.zzim li input[type=checkbox]:checked+label:before{background-image:url(../img/sprites.png);background-position:-324px -148px;width:22px;height:22px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.product-list.zzim li input[type=checkbox]:checked+label:before{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .product-list.zzim.grayscale .zzim-item{border-bottom:none} .product-list.zzim.grayscale .zzim-item .bottom-btns{display:none} .add-amount{display:none} .add-amount:before{z-index:1000;content:'';display:block;background:#000;width:100%;height:100%;position:fixed;top:0;left:0;bottom:0;right:0;opacity:0.6} .add-amount .btn-close{display:inline-block;position:fixed;right:2rem;top:1rem;z-index:1000000000000;text-indent:-9999px;background-image:url(../img/sprites.png);background-position:-324px -204px;width:22px;height:22px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.add-amount .btn-close{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .add-amount .forms-stepper{padding:0 2rem 2rem;width:100%;background:#fff;position:fixed;top:0;left:0;right:0;z-index:1000} .add-amount .forms-stepper .stepper-widget{background:#f1f1f1} .add-amount .btn-submit-normal{display:block;-ms-flex:1;flex:1;padding-top:2px;font-size:1.000rem;font-weight:700;color:#fff;text-align:center;line-height:48px;background-color:#0057E3;border-radius:4px} .add-amount .btn-submit-normal:active{background-color:#D15558} .orderd-item{height:200px;overflow:hidden;border-bottom:1px solid #e0e0e0;position:relative;background:#fff;margin-bottom:5px} .orderd-item .orderd-date{padding:0 1rem;height:32px;line-height:32px;font-size:.6875rem;color:#909090;margin-bottom:10px;background:#DEDEDE} .orderd-item .orderd-date>mark{color:#909090} .orderd-item.useable .btn-cpn{display:block;height:60px;padding:.75rem 1rem 0 63px;position:relative} .orderd-item.useable .btn-cpn>span{display:block;padding:0} .orderd-item.useable .btn-cpn>span.text{font-size:.8125rem;font-weight:700;color:#202020} .orderd-item.useable .btn-cpn>span.date{margin-top:-4px;font-size:.6875rem;color:#0098FB} /* 상품 */ /* best 상품 */ .best-list.slider-type{left:0;float:none;overflow-y:hidden;overflow-x:auto;width:100%;white-space:nowrap;height:180px} .best-list.slider-type:before,.best-list.slider-type:after{content:"";display:table} .best-list.slider-type:after{clear:both} .best-list.slider-type .product{width:110px;margin-right:5px;float:none;display:inline-block;white-space:nowrap} .best-list.slider-type .product .product-item{background:transparent} .best-list.slider-type .product-thumb{width:100px;height:100px;text-align:center;border-radius:100px;overflow:hidden;margin:0 auto;border:1px solid #dedede} .best-list.slider-type .product-thumb img{height:100px} .best-list.slider-type .product-info{border-top:none;margin-top:1rem;} .best-list.slider-type .item-info span{text-align:center} .best-list.slider-type .item-info span.brand-name{display:none;text-align:center} .best-list.slider-type .item-info span.product-name{width:100%} .best-list.slider-type .item-info .btn-zzim{display:none} .best-list.slider-type .price-info{margin-top:0} .best-list.slider-type .price-info span{text-align:center;display:block;font-size:.875rem} .best-list.slider-type .price-info span.discount-rate{display:none} .best-list.slider-type .price-info span.price strong{font-size:.875rem} .best-list.slider-type .price-info span.original-price{font-size:.6875rem} /* best 상품 */ /* 쇼핑몰 best 상품 */ .best-list.category-best{padding:10px 0 0 1rem;height:200px} .best-list.category-best .product{width:130px;margin-right:0;position:relative} .best-list.category-best .product .ranking{display:inline-block;position:absolute;top:0;left:0;z-index:100;font-size:.6875rem;background:#303030;padding:0 5px;width:20px;height:20px;text-align:center;color:#fff} .best-list.category-best .product-thumb{border:none} .best-list.category-best .item-info span{text-align:left} .best-list.category-best .item-info span.brand-name{display:block} .best-list.category-best .price-info{margin-top:8px} .best-list.category-best .price-info span{text-align:center;} /* 쇼핑몰 best 상품 */ /* 리뷰피드 목록 */ .review-item{display:block;background:#fff;color:#202020;cursor:pointer;position:relative} .review-item .review-thumb{text-align:center; vertical-align:middle;} .review-item .item-info span{display:block;line-height:1.4} .review-item .item-info span.review-name{font-size:.8125rem;font-weight:400;margin-bottom:0;color:#202020;width:80%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .review-item .item-info span.brand-name{font-size:11px;color:#909090;font-weight:400;} .review-item .item-info .btn-zzim{position:absolute;bottom:2rem;right:1rem} .review-item .price-info{display:block;line-height:1.2;margin-top:2px} .review-item .price-info span{display:inline-block;font-size:.6875rem} .review-item .price-info span.price{margin-right:5px} .review-item .price-info span.price strong{font-size:0.875rem;font-weight:600;font-family:'Nanum Gothic', sans-serif} .review-item .price-info span.original-price del{color:#909090;text-decoration:line-through;padding-top:3px;font-weight:400;font-family:'Nanum Gothic', sans-serif} .review-item .price-info span.discount-rate{position:absolute;left:0;top:1rem;z-index:100;font-size:.6875rem;color:#0057E3;padding:4px 5px;background:#FFE3E4;text-align:center;font-weight:400} .review-item .price-info span.discount-rate strong{font-size:.8125rem;font-weight:900;font-family:'Nanum Gothic', sans-serif} .review-list.card-type .review{margin-bottom:5px;position:relative} .review-list.card-type .review .review-item{display:block;background:#fff;color:#202020;cursor:pointer;position:relative;border-bottom:1px solid #909090} .review-list.card-type .review .review-item .review-thumb{max-height:250px;text-align:center} .review-list.card-type .review .review-item .review-thumb img{height:190px; padding:0.2rem;} .review-list.card-type .review .review-item .review-info{border-top:1px solid #dedede;padding:10px 1rem 0.5rem} .review-list.card-type .review .review-item .item-info span{display:block;line-height:1.4} .review-list.card-type .review .review-item .item-info span.review-name{font-size:.8125rem;font-weight:400;margin-bottom:0;color:#202020;width:80%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .review-list.card-type .review .review-item .item-info span.brand-name{font-size:11px;color:#909090;font-weight:400;width:80%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .review-list.card-type .review .review-item .item-info span.brand-image{position:absolute;top:0;right:0;width:80px;height:80px;text-align:center} .review-list.card-type .review .review-item .item-info span.brand-image img{margin-top:15px;width:50px;height:50px} .review-list.card-type .review .review-item .item-info span.sold-count{font-size:.6875rem;color:#909090;font-weight:400;position:absolute;right:1rem;bottom:1px;} .review-list.card-type .review .review-item .item-info span.grade{font-size:.6875rem;color:#909090;font-weight:400;position:absolute;right:1rem;bottom:1px;} .review-list.card-type .review .review-item .item-info .btn-zzim{position:absolute;bottom:2rem;right:1rem} .review-list.card-type .review .review-item .price-info{display:block;line-height:1.2;margin-top:2px} .review-list.card-type .review .review-item .price-info span{display:inline-block;font-size:.6875rem} .review-list.card-type .review .review-item .price-info span.price{margin-right:5px} .review-list.card-type .review .review-item .price-info span.price strong{font-size:1.125rem;font-weight:900;font-family:'Nanum Gothic', sans-serif} .review-list.card-type .review .review-item .price-info span.original-price del{color:#909090;text-decoration:line-through;padding-top:3px;font-weight:400;font-family:'Nanum Gothic', sans-serif} .review-list.card-type .review .review-item .price-info span.discount-rate{position:static;background:none;margin-right:5px;padding:0;font-weight:400;color:#0057E3;display:inline-block} .review-list.card-type .review .review-item .price-info span.discount-rate strong{font-size:1.125rem;font-weight:900;font-family:'Nanum Gothic', sans-serif} .review-list.card-type .review .flag-group{position:absolute;z-index:1;top:131px;left:1rem} .review-list.card-type .review .flag-group:before,.review-list.card-type .review .flag-group:after{content:"";display:table} .review-list.card-type .review .flag-group:after{clear:both} .review-list.card-type .review .flag-group .flag{display:block;float:left;color:#fff;font-size:10px;text-align:center;letter-spacing:-0.5px;width:50px;height:20px;line-height:20px;font-weight:400;background-image:url(../img/sprites.png);background-position:-134px -239px;width:50px;height:20px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.review-list.card-type .review .flag-group .flag{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .review-list.card-type .review .flag-group .flag:not(:first-child){background-image:url(../img/sprites.png);background-position:-78px -239px;width:50px;height:20px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.review-list.card-type .review .flag-group .flag:not(:first-child){background-image:url(../img/sprites@2x.png);background-size:366px 347px}} /* 리뷰피드 목록 */ /* 리뷰피드 슬라이드 리뷰 */ .review_slider-list.slider-type{left:0;float:none;overflow-y:hidden;overflow-x:auto;width:100%;white-space:nowrap;height:110px;padding-top:0.3rem;border-top:1px solid #dedede;} .review_slider-list.slider-type:before,.review_slider-list.slider-type:after{content:"";display:table} .review_slider-list.slider-type:after{clear:both} .review_slider-list.slider-type .product{width:110px;margin-right:5px;float:none;display:inline-block;white-space:nowrap} .review_slider-list.slider-type .product .product-item{background:transparent} .review_slider-list.slider-type .product-thumb{width:60px;height:60px;text-align:center;overflow:hidden;margin:0 auto;border:1px solid #dedede} .review_slider-list.slider-type .product-thumb img{height:60px} .review_slider-list.slider-type .product-info{border-top:none;margin-top:0.3rem;} .review_slider-list.slider-type .item-info span{text-align:center} .review_slider-list.slider-type .item-info span.brand-name{display:none;text-align:center;padding-right:10px;} .review_slider-list.slider-type .item-info span.product-name{width:100%} .review_slider-list.slider-type .item-info span.grade{display:none;margin-top:1rem;} /* 리뷰피드 슬라이드 리뷰 */ /* 쇼핑몰 */ .shop-item{display:block;background:#fff;color:#202020;cursor:pointer;position:relative} .shop-item .shop-thumb{text-align:center} .shop-item .item-info span{display:block;line-height:1.4} .shop-item .item-info span.shop-name{font-size:1.1125rem;font-weight:800;margin-bottom:0;color:#202020;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .shop-item .item-info span.shop-style{font-size:.8125rem;font-weight:200;margin-bottom:0;color:#909090;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .shop-item .item-info span.age-grp{font-size:11px;color:#909090;font-weight:400;display:none} .shop-item .item-info .btn-zzim{position:absolute;bottom:2rem;right:1rem} .shop-item .item-info span.fav-cnt{position:absolute;bottom:1rem;right:1rem;font-size:10px;color:#909090;font-weight:200;} .shop-item .shop-info span{display:block;line-height:1.5;margin-top:2px} .shop-item .shop-info span{font-size:.6875rem} .shop-item .shop-info span.rank{position:absolute;left:0;top:1.5rem; width:2rem; z-index:100;font-size:.5875rem;color:#909090;text-align:center;font-weight:200} .shop-item .shop-info span.rank strong{font-size:.7525rem;font-weight:500;font-family:'Nanum Gothic', sans-serif} .shop-list.inline-type .shop{overflow:hidden;height:70px;padding-bottom:0;border-bottom:1px solid #dedede} .shop-list.inline-type .shop:last-child{border-bottom:1px solid #dedede} .shop-list.inline-type .shop .shop-item{-js-display:flex;display:-ms-flexbox;display:flex;width:100%;height:70px;position:relative} .shop-list.inline-type .shop .shop-item .shop-thumb{width:60px;height:60px;} .shop-list.inline-type .shop .shop-item .shop-thumb img{width:60px;height:60px;margin-left:2rem;margin-top:5px;border-radius:100px;} .shop-list.inline-type .shop .shop-item .shop-info{margin-left:2rem;padding:2px 1rem;border-top:none} .shop-list.inline-type .shop .shop-item .item-info{-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch} .shop-list.inline-type .shop .shop-item .item-info span{display:block} .shop-list.inline-type .shop .shop-item .item-info span.brand-image{display:none} .shop-list.inline-type .shop .shop-item .item-info span.sold-count{display:none} .shop-list.inline-type .shop-list.inline-type .shop .shop-item .shop-info{display:block;margin-top:1rem;width:100%} /* 쇼핑몰 */ .orderd-item.useable .btn-cpn:before{content:'';display:block;position:absolute;top:1rem;left:1rem;background-image:url(../img/sprites.png);background-position:-288px -180px;width:30px;height:30px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.orderd-item.useable .btn-cpn:before{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .orderd-item.usecomplate .item-info span.product-name,.orderd-item.usecomplate .item-info span.brand-name,.orderd-item.sendcomplate .item-info span.product-name,.orderd-item.sendcomplate .item-info span.brand-name{color:#909090;text-decoration:line-through} .orderd-item.usecomplate .order-info span,.orderd-item.sendcomplate .order-info span{color:#909090;text-decoration:line-through} .orderd-item.usecomplate .order-info .original-price,.orderd-item.sendcomplate .order-info .original-price{display:none} .orderd-item.usecomplate .btn-cpn,.orderd-item.sendcomplate .btn-cpn{display:block;height:60px;padding:.75rem 1rem 0 63px;position:relative} .orderd-item.usecomplate .btn-cpn span,.orderd-item.sendcomplate .btn-cpn span{display:block;padding:0;color:#909090;text-decoration:line-through} .orderd-item.usecomplate .btn-cpn span.text,.orderd-item.sendcomplate .btn-cpn span.text{font-size:.8125rem;font-weight:700} .orderd-item.usecomplate .btn-cpn span.date,.orderd-item.sendcomplate .btn-cpn span.date{margin-top:-4px;font-size:.6875rem} .orderd-item.usecomplate .btn-cpn:before,.orderd-item.sendcomplate .btn-cpn:before{content:'';display:block;position:absolute;top:1rem;left:1rem;background-image:url(../img/sprites.png);background-position:0px -265px;width:30px;height:30px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.orderd-item.usecomplate .btn-cpn:before,.orderd-item.sendcomplate .btn-cpn:before{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .orderd-item.sendcomplate .btn-cpn:before{background-image:url(../img/sprites.png);background-position:-288px 0px;width:30px;height:30px}@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.orderd-item.sendcomplate .btn-cpn:before{background-image:url(../img/sprites@2x.png);background-size:366px 347px}}.order-item{-js-display:flex;display:-ms-flexbox;display:flex;width:100%;height:100px;position:relative;background:#fff;border-bottom:1px solid #dedede} .order-item .product-thumb{width:100px;height:100px;text-align:center} .order-item .product-thumb img{width:90px;height:90px} .order-item .product-info{padding:5px 1rem} .order-item .product-info .item-info span{display:block;line-height:1.4;font-size:.8125rem} .order-item .product-info .item-info span.product-name{width:auto;font-weight:400;margin-bottom:0;color:#202020;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .order-item .product-info .item-info span.brand-name{color:#909090;font-weight:400} .order-item .product-info .order-info{padding:0;margin-top:10px} .order-item .product-info .order-info span{display:inline-block;font-size:.6875rem} .order-item .product-info .order-info span.price{margin-right:0} .order-item .product-info .order-info span.price strong{font-size:1rem;font-weight:900;font-family:'Nanum Gothic', sans-serif} .order-item .product-info .order-info span.original-price{display:block;line-height:100%} .order-item .product-info .order-info span.original-price del{color:#909090;text-decoration:line-through;font-weight:400;font-family:'Nanum Gothic', sans-serif} .event-items>li .event-item{display:block;cursor:pointer;color:#333;background:#fff;margin:0 auto;max-width:720px;margin-bottom:5px} .event-items>li .event-item .event-image-container{overflow:hidden;position:relative;height:0;padding-bottom:37.777777778%;background:#f4f4f4} .event-items>li .event-item .event-image-container .event-image{position:absolute;left:0;top:0;width:100%;height:auto} .event-items>li .event-item .event-info-contents{position:relative;padding:12px 1rem} .event-items>li .event-item .event-info-contents .event-title{font-size:.8125rem} .event-items>li .event-item .event-info-contents .time{font-size:.6875rem;color:#0098FB;line-height:200%} .event-items>li .event-item .event-info-contents .d-day{position:absolute;top:22px;right:1rem;color:#0057E3;font-size:1rem;padding-left:20px;font-weight:700} .event-items>li .event-item .event-info-contents .d-day:before{content:'';display:block;background-image:url(../img/sprites.png);background-position:-36px -301px;width:16px;height:16px;position:absolute;top:3px;left:0}@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){ .event-items>li .event-item .event-info-contents .d-day:before{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .category-list{width:100%; box-shadow: 0 0 4px #202020; } .category-list:before,.category-list:after{content:"";display:table} .category-list:after{clear:both} .category-list .item{background:#fff;float:left;display:inline-block;border-right:1px solid #dedede;border-bottom:1px solid #dedede;position:relative} .category-list .item .item-image{display:block;position:absolute;top:50%;left:50%} /* 해야할일(체크리스트) */ .todo-items>li .todo-item{display:block;cursor:pointer;background:#EEEEEE;margin:0 auto;max-width:720px;margin:15px 15px;} .todo-items>li .todo-item .todo-info-contents{position:relative; text-align:center; height:80px; padding:1rem 1rem; background-color:#FF88A7;border-radius:10px} .todo-items>li .todo-item .todo-info-contents .todo-title{font-size:1.3125rem; color:#fff;} .todo-items>li .todo-item .todo-info-contents .todo-sub-title{font-size:0.9875rem;color:#fff;line-height:200%} /* 해야할일(체크리스트) */ /* 피팅홈 */ .pting-items>li .pting-item{display:block;cursor:pointer;color:#333;background:#fff;margin:0 auto;max-width:720px;margin-bottom:5px} .pting-items>li .pting-item .pting-image-container{overflow:hidden;position:relative;height:0;padding-bottom:37.777777778%;background:#f4f4f4} .pting-items>li .pting-item .pting-image-container .pting-image{position:absolute;left:0;top:0;width:100%;height:auto} .pting-items>li .pting-item .pting-info-contents{position:relative;margin:0.5rem;padding:12px 1rem;padding-bottom:2rem;} .pting-items>li .pting-item .pting-info-contents .pting-title{font-size:.8125rem} .pting-items>li .pting-item .pting-info-contents span.pting-content{font-size:.8125rem} /* 피팅홈 */ .category-list .item .item-image img{width:100%} .category-list .item .item-name{width:100%;position:absolute;left:0;top:70%;z-index:100;font-size:0.8rem;font-weight:500;color:#202020;text-align:center} .brand-list{width:100%;border-top:1px solid #dedede} .brand-list:before, .brand-list:after{content:"";display:table} .brand-list:after{clear:both} .brand-list .item{background:#fff;float:left;display:inline-block;border-right:1px solid #dedede;border-bottom:1px solid #dedede;position:relative;width:33.33333333%;height:120px;padding:1px} .brand-list .item:nth-child(3n){border-right:none} .brand-list .item .item-image{/* display:block;position:absolute;top:50%;left:50%;margin-left:-40px;margin-top:-50px */} .brand-list .item .item-image img{width : 100%; height : 100%;} .brand-list .item .item-name{overflow: hidden; left: 50%; top : 50%; transform : translate(-50%, -50%); width: 80%; line-height: 120%; text-align: left; color: rgb(255, 255, 255); font-size: 1.28rem; position: absolute; z-index: 100;} .pages .title-group{position:relative;height:44px;padding:10px 1rem;border-top:1px solid #dedede;border-bottom:1px solid #dedede;background:#fff} .pages .title-group:before,.pages .title-group:after{content:"";display:table} .pages .title-group:after{clear:both} .pages .title-group .cnt{font-size:.8125rem;font-weight:400} .pages .title-group .cnt{color:#0057E3} .pages .title-group .title{font-size:1.2rem;font-weight:600} .pages .title-group .title.skyblue{color:#0097CE; font-size:1.4rem; font-weight:600; } .pages .title-group .left-view{float:left} .pages .title-group .right-view{float:right} .pages .title-group .right-view{position:absolute;top:0;right:0} .pages .title-group .right-view .selectbox{display:inline-block;width:100px;height:40px;position:absolute;top:0;right:90px;z-index:500} .pages .title-group .right-view .btn{display:block;float:left;text-indent:-9999px} .pages .title-group .right-view .btn.btn-list-style-view{background-image:url(../img/sprites.png);background-position:-242px -46px;width:40px;height:40px;border-left:1px solid #dedede} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.pages .title-group .right-view .btn.btn-list-style-view{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .pages .title-group .right-view .btn.btn-list-style-view[data-state=active]{background-image:url(../img/sprites.png);background-position:-150px -189px;width:40px;height:40px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.pages .title-group .right-view .btn.btn-list-style-view[data-state=active]{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .pages .title-group .right-view .btn.btn-box-style-view{background-image:url(../img/sprites.png);background-position:-242px -138px;width:40px;height:40px;border-left:1px solid #dedede} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.pages .title-group .right-view .btn.btn-box-style-view{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .pages .title-group .right-view .btn.btn-box-style-view[data-state=active]{background-image:url(../img/sprites.png);background-position:-242px 0px;width:40px;height:40px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.pages .title-group .right-view .btn.btn-box-style-view[data-state=active]{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .pages .content-no-item{text-align:center;font-size:.8125rem;color:#909090;padding:50px 0} .page-no-access-site .layout-contents .contents-top-message{border-bottom:none} .page-no-access-site .layout-contents .title{margin-top:2rem;line-height:130%;text-align:center;font-size:.875rem} .page-no-access-site .layout-contents .txt{margin-top:10px;text-align:center;color:#909090;font-size:.8125rem} .page-include-app .layout-contents{padding-top:0} .page-include-app .title{display:block;margin-top:5px;border-bottom:1px solid #dedede;line-height:40px;padding:0 1rem;font-size:0.812rem;color:#202020;font-weight:700} .page-include-app .btn-zzim{display:none} /* 페이지 레이아웃 크기 */ /*.page-intro .layout-contents{background:#ffcc00;}*/ .page-intro .layout-contents{background:#fff;} .page-form .layout-contents{padding-top:50px; padding-bottom:0; color:#666;position:relative; background:#fff; } .page-main .layout-contents{padding-top:50px; padding-bottom:57px; background:#fff; } .page-view .layout-contents{padding-top:0; padding-bottom:57px; } .page-sub .layout-contents{padding-top:50px; padding-bottom:102px; } .page-none .layout-contents{padding-top:0px} /* 우리집 메인 */ .page-our .our-view{position:relative;background:#fff} .page-our .our-view .our-image{background:#fff;text-align:center; width: auto; height: 300px; overflow: hidden; } /*.page-our .our-view .our-image img{width:100%;margin:0 auto;max-width:280px;}*/ .page-our .our-view .our-image img{width:100%; height:100%; } .page-our .our-view .our-info{padding:1rem;position:relative} .page-our .our-view .our-info .item-info span{display:block} .page-our .our-view .our-info .item-info span.our-name{font-size:1.2rem;font-weight:400;margin-bottom:0;color:#202020;width:80%} .page-our .our-view .our-info .item-info span.shop-name{font-size:0.8rem;font-weight:400;margin-bottom:0;color:#909090;width:80%} .page-our .our-view .our-info .btn-zzim{position:absolute;top:1rem;right:1rem;z-index:100} .page-our .our-view .our-info .price-info{display:block;line-height:1.2;margin-top:1rem} .page-our .our-view .our-info .price-info span{display:block;font-size:1rem;position:relative} .page-our .our-view .our-info .price-info span.price{margin-right:5px;font-weight:700} .page-our .our-view .our-info .price-info span.price strong{font-size:1.375rem;font-weight:700} .page-our .our-view .our-info .price-info span.original-price del{color:#909090;text-decoration:line-through;padding-top:3px;font-weight:400;font-size:.8125rem} .page-our .our-view .our-info .price-info span.discount-rate{position:absolute;right:0;bottom:1rem;font-weight:400;margin-right:10px;color:#0057E3;display:inline-block;font-size:1rem} .page-our .our-view .our-info .price-info span.discount-rate strong{font-size:1.875rem;font-weight:700} .page-our .info-box{margin-top:.3125rem} .page-our .info-box.category-best{background:#fff;padding:1rem 0} .page-our .info-box.category-best>.title{padding-left:1rem;padding-bottom:10px;font-size:.75rem} /* .page-our .info-table{width:100%; word-break:break-all; } .page-our .info-table th{padding:8px 0;padding-left:1rem; font-size:1rem;font-weight:500;text-align:left; color:#666; } .page-our .info-table td{padding-left:5px; font-size:1.2rem;font-weight:600;text-align:left; color:#202020; } .page-our .info-table td.big_txt{font-size:1.4rem;font-weight:700; color:#202020; } .page-our .info-table tr:last-child th,.page-our .info-table tr:last-child td{border-bottom:none} .page-our .tabs-discription{width:100%; color:#666; } .page-our .tabs-discription .title{color:#333;margin-top:10px} .page-our .tabs-discription .use-img{width:100%;max-width:480px;text-align:center;padding:2rem;margin:0 auto} .page-our .tabs-discription .use-img img{width:100%} */ /* .tabs-discription{width:100%; color:#666; } .tabs-discription .title{color:#333;margin-top:10px} .tabs-discription .use-img{width:100%;max-width:480px;text-align:center;padding:2rem;margin:0 auto} .tabs-discription .use-img img{width:100%}*/ /* 우리집 메인 */ /* .page-main .layout-contents{padding-top:60px;color:#666;position:relative;background:#fff} .page-main .ad-container{background:transparent;margin:0 auto;margin-bottom:5px} .page-main .list{background:transparent;margin:0 auto;padding:0;margin-bottom:5px} .page-main .list.slider{padding: 0 0 5px;background:#fff;position:relative} .page-main .list.slider .title{display:block;text-align:center;margin-bottom:20px} .page-main .review-list.slider{padding:0px 0 5px;background:#fff;position:relative} .page-main .review-list.slider .title{display:block;text-align:center;margin-bottom:5px} */ /* 메인 */ /* 홈, 관리실 .page-hom .layout-contents{padding-top:50px;color:#666;position:relative;background:#fff} .page-hom .ad-container{background:transparent;margin:0 auto;text-align:center;} .page-hom .list{background:transparent;margin:0 auto;padding:0;} .page-hom .list.slider{padding: 0 0 5px;background:#fff;position:relative} .page-hom .list.slider .title{display:block;text-align:center;margin-bottom:20px} .page-hom .message-box .line{display:block;margin-top:1rem;margin-bottom:1rem;border-bottom:1px solid #BFBFBF;} .page-hom .message-box .stat-btn.blue{float:right; width:25%; display:block;margin-top:3px;padding:0 8px;text-align:center; font-size:0.8rem;font-weight:600;color:#000000;background-color:#C8EBFA;border-radius:10px;-webkit-appearance:none} .page-hom .message-box .stat-btn.orange{float:right; width:25%; display:block;padding:0 8px;text-align:center; font-size:0.8rem;font-weight:600;color:#000000;background-color:#FFCCA9;border-radius:10px;-webkit-appearance:none} .page-hom .message-box .stat-btn.gray{float:right; width:25%; display:block;padding:0 8px;text-align:center; font-size:0.8rem;font-weight:600;color:#000000;background-color:#666;border-radius:10px;-webkit-appearance:none} .page-hom .message-box .stat-btn.light_gray{float:right; width:25%;display:inline-block;margin-top:3px;padding:0 8px;text-align:center; font-size:0.8rem;font-weight:600;color:#000000;background-color:#F1F1F1;border-radius:10px;-webkit-appearance:none} .page-hom .message-box .submit-btn{width:100%; display:block; padding:10px;margin-top:1rem;text-align:center; font-size:1.2rem;font-weight:600;color:#000000;background-color:#F1F1F1;border:1px solid #BFBFBF; border-radius:10px;-webkit-appearance:none} .page-hom .message-box .serial{display:block;margin-bottom:5px;font-weight:600;font-size:1rem;color:#202020;} .page-hom .message-box .title{display:block;padding:5px;text-align:center;font-weight:900;font-size:1.2rem;color:#202020;} .page-hom .message-box .sub-title{display:inline-block;padding-right:10px;font-weight:700;font-size:1.2rem;color:#666;} .page-hom .message-box .exit-title{display:inline-block;padding-right:10px;font-weight:700;font-size:1.0rem;color:#666;} .page-hom .message-box .name{font-weight:700;font-size:1rem} .page-hom .message-box .date{display:inline-block;margin-top:5px;font-size:1.2rem;font-weight:700;color:#202020;} .page-hom .message-box .addr{display:block;margin-top:5px;text-align:center;font-size:1rem;font-weight:700;color:#202020;} .page-hom .message-box .house-num{display:inline-block;margin-top:5px;font-size:1.2rem;font-weight:700;color:#202020;} .page-hom .message-box .car-num{display:inline-block;margin-top:5px;font-size:1.2rem;font-weight:700;color:#202020;} .page-hom .message-box .phone-num{display:inline-block;margin-top:5px;font-size:1.2rem;font-weight:700;color:#202020;} .page-hom .message-box .memo{display:inline-block;margin-top:5px;font-size:1.2rem;font-weight:700;color:#202020;} .message-more-list{display:block;padding-top:1rem;text-align:center;font-size:1.2rem;font-weight:600;line-height:2rem;color:#666;} 홈, 관리실 */ /* 홈 new .page-hom .layout-contents{padding-top:60px; padding-bottom:90px;} .page-hom .info-box{margin-top:.7rem; } .page-hom .info-box.hou-tip{background:#fff;padding-top:1rem; margin-bottom:1rem; } .page-hom .info-box.hou-tip>.title{padding-left:1rem;padding-bottom:10px;font-size:.75rem} */ .page-hom .info-table{width:100%;background:#fff;border-bottom:1px solid #fff} .page-hom .info-table th,.page-hom .info-table td{padding:12px 0;padding-left:1rem;border-bottom:1px solid #e0e0e0;font-size:0.875rem;font-weight:300;text-align:left;color:#666} .page-hom .info-table th{width:100px} .page-hom .info-table tr:last-child th,.page-hom .info-table tr:last-child td{border-bottom:none} /* 홈 new */ /* 서브 .page-sub .layout-contents{padding-top:100px;color:#666;position:relative;background:#fff} .page-sub .ad-container{background:transparent;margin:0 auto;margin-bottom:5px} .page-sub .list{margin:0 auto;padding:0;margin-bottom:5px} .page-sub .list.slider{padding: 0 0 5px;background:#fff;position:relative} .page-sub .list.slider .title{display:block;text-align:center;margin-bottom:20px} .page-sub .review-list.slider{padding:0px 0 5px;background:#fff;position:relative} .page-sub .review-list.slider .title{display:block;text-align:center;margin-bottom:5px} 서브 */ /* 서비스 .page-serv .layout-contents{padding-top:50px; padding-bottom:50px; color:#666;position:relative;background:#fff} .page-serv .ad-container{background:transparent;margin:0 auto;margin-bottom:5px} .page-serv .list{background:transparent;margin:0 auto;padding:0;margin-bottom:5px} .page-serv .list.slider{padding: 0 0 5px;background:#fff;position:relative} .page-serv .list.slider .title{display:block;text-align:center;margin-bottom:20px} .page-main .review-list.slider{padding:0px 0 5px;background:#fff;position:relative} .page-main .review-list.slider .title{display:block;text-align:center;margin-bottom:5px} 서비스 */ /* 동네소식 */ .page-town .layout-contents{padding-top:90px;color:#666;position:relative;background:#fff} .page-town .ad-container{background:transparent;margin:0 auto;margin-bottom:5px} .page-town .list{background:transparent;margin:0 auto;padding:0;margin-bottom:5px} /*.page-town .list .title{display:none}*/ .page-town .list.slider{padding: 0 0 5px;background:#fff;position:relative} .page-town .list.slider .title{display:block;text-align:center;margin-bottom:20px} .page-town .review-list.slider{padding:0px 0 5px;background:#fff;position:relative} .page-town .review-list.slider .title{display:block;text-align:center;margin-bottom:5px} /* 동네소식 */ /* 필터 */ .page-filter{padding-top:43px} .page-filter .category-conts{background:#fff;} .page-filter .category-conts .title{font-size:.8125rem;color:#909090;padding:.5rem 1rem;font-weight:400} .page-filter .category-list{background:#fff;margin-bottom:5px} .page-filter .category-list .item{width:25%;height:90px} .page-filter .category-list .item:nth-child(4n){border-right:none} .page-filter .category-list .item .item-image{width:44px;height:44px;margin-top:-30px;margin-left:-22px} /* 필터 */ .page-category .category-list .item{width:33.33333%;height:120px} .page-category .category-list .item:nth-child(3n){border-right:none} .page-category .category-list .item .item-image{width:60px;height:60px;margin-top:-40px;margin-left:-30px} .page-brand .brand-top-msg{position:relative;background:#fff;padding:1.25rem 1rem;margin-bottom:5px;display:-ms-flexbox;display:flex;lex-wrap:row;-ms-flex-pack:start;justify-content:flex-start} .page-brand .brand-top-msg:before,.page-brand .brand-top-msg:after{content:"";display:table}.page-brand .brand-top-msg:after{clear:both}.page-brand .brand-top-msg .brand-image{width:50px;height:50px;min-width:50px} .page-brand .brand-top-msg .brand-image img{width:100%} .page-brand .brand-top-msg .brand-msg{margin-left:1.5rem} .page-brand .brand-top-msg .brand-msg .main-msg{font-size:.875rem;margin-bottom:5px;font-weight:700} .page-brand .brand-top-msg .brand-msg .sub-msg{font-size:.6875rem;line-height:130%;color:#909090} /*.page-menu{padding-top:43px}*/ .page-menu .category-conts{background:#fff;margin-top:5px} .page-menu .category-conts .title{font-size:.8125rem;color:#909090;padding:.5rem 1rem;font-weight:400} .page-menu .category-list{background:#fff;margin-bottom:5px} .page-menu .category-list .item{width:25%;height:90px} .page-menu .category-list .item:nth-child(4n){border-right:none} .page-menu .category-list .item .item-image{width:44px;height:44px;margin-top:-30px;margin-left:-22px} .page-menu .common-menu-list{margin-bottom:5px} .page-menu .common-menu-list:before,.page-menu .common-menu-list:after{content:"";display:table} .page-menu .common-menu-list:after{clear:both} .page-menu .common-menu-list li{width:50%;background:#fff;float:left;border-right:1px solid #dedede;border-bottom:1px solid #dedede} .page-menu .common-menu-list li:nth-child(2n){border-right:0} .page-menu .common-menu-list li a{display:block;padding:1rem;font-size:.8125rem;color:#202020} .page-menu .common-menu-list li a span{position:relative} .page-menu .common-menu-list li a span[data-state=new]:after{display:inline-block;content:'';position:absolute;top:4px;right:-15px;z-index:800;background-image:url(../img/sprites.png);background-position:-266px -239px;width:12px;height:12px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.page-menu .common-menu-list li a span[data-state=new]:after{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .page-menu .event-list{background:#fff;border-right:1px solid #dedede;border-bottom:1px solid #dedede;padding:1rem;line-height:1.4} .page-menu .event-list .title{font-size:.8125rem;color:#202020;position:relative} .page-menu .event-list .title[data-state=new]:after{display:inline-block;content:'';position:absolute;top:4px;right:-15px;z-index:800;background-image:url(../img/sprites.png);background-position:-266px -239px;width:12px;height:12px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.page-menu .event-list .title[data-state=new]:after{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .page-menu .event-list .date{margin-top:3px;display:block;font-size:.6875rem;color:#909090} .page-mypage .message-box{padding:20px 1rem;background:#fff;color:#202020;margin-bottom:5px} .page-mypage .message-box .name{font-weight:700;font-size:1rem} .page-mypage .message-box .name{font-weight:700} .page-mypage .message-box .phone-number{display:block;margin-top:5px;color:#909090;font-size:.8125rem} .page-mypage .summary{background:#fff;padding:1rem 1rem;margin-bottom:5px} .page-mypage .summary .title{font-size:.8125rem;font-weight:700} .page-mypage .order-summary:before,.page-mypage .order-summary:after{content:"";display:table} .page-mypage .order-summary:after{clear:both}.page-mypage .order-summary .btns{width:80%;margin:0 auto} .page-mypage .order-summary .btns>li{display:inline-block;float:left;width:50%;padding:1rem;position:relative} .page-mypage .order-summary .btns>li>a{display:block;text-align:center;color:#303030;text-align:center} .page-mypage .order-summary .btns>li>a .icon{padding:1.5em 0 0;font-size:1.125rem;font-weight:700} .page-mypage .order-summary .btns>li>a .icon-useable-cpn{display:inline-block;background-image:url(../img/sprites.png);background-position:-126px 0px;width:60px;height:58px;color:#0057E3} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.page-mypage .order-summary .btns>li>a .icon-useable-cpn{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .page-mypage .order-summary .btns>li>a .icon-all-cpn{display:inline-block;background-image:url(../img/sprites.png);background-position:0px -126px;width:60px;height:57px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.page-mypage .order-summary .btns>li>a .icon-all-cpn{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .page-mypage .order-summary .btns>li>a .text{display:block;font-size:.8125rem;margin-top:5px} .page-mypage .order-summary .btns>li:first-child:before{content:'';display:inline-block;width:1px;height:30px;background:#dedede;position:absolute;top:50%;right:0;margin-top:-20px} .page-mypage .zzim-summary .title{margin-bottom:1rem} .page-zzim-list .list{padding:0} .page-zzim-list .list .list-title-bar{border-bottom:1px solid #dedede;height:40px;padding:0 1rem} .page-zzim-list .list .list-title-bar:before,.page-zzim-list .list .list-title-bar:after{content:"";display:table} .page-zzim-list .list .list-title-bar:after{clear:both} .page-zzim-list .list .list-title-bar .title{display:inline-block;font-size:.6875rem;color:#202020;height:40px;line-height:40px} .page-zzim-list .list .list-title-bar .title strong{color:#0057E3} .page-zzim-list .list .list-title-bar .left-view{float:left} .page-zzim-list .list .list-title-bar .right-view{float:right} .page-zzim-list .list .list-title-bar .btn-select-del,.page-zzim-list .list .list-title-bar .btn-all-del{position:relative;display:inline-block;font-size:.6875rem;color:#606060;line-height:40px} .page-zzim-list .list .list-title-bar .btn-select-del{margin-right:10px} .page-zzim-list .list .list-title-bar .btn-select-del:after{content:'';display:block;width:1px;height:10px;background:#dedede;position:absolute;top:15px;right:-8px} .page-zzim-list .list:not(:first-child){margin-top:5px} .page-cs .layout-contents{padding-top:60px;color:#666;position:relative;background:#fff} .page-cs.info .cs-info{text-align:center;font-size:1rem;color:#666;line-height:140%;padding:50px 2rem} .page-cs.info .cs-info .cs-img{display:inline-block;margin:0 auto;margin-bottom:10px;background-image:url(../img/sprites.png);background-position:0px 0px;width:120px;height:120px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.page-cs.info .cs-info .cs-img{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .page-cs.info .message-box{bottom:0;left:0;background:#00B0F0;padding:2rem 1rem} .page-cs.info .message-box>h3,.page-cs.info .message-box p{font-size:.8125rem;font-weight:400} .page-cs.info .message-box .txt{display:block;margin-top:15px;font-size:1.2rem;font-family:'Nanum Gothic', sans-serif;font-weight:700} .page-cs.info .message-box .tel{display:block;margin-top:15px;font-size:1.375rem;font-family:'Nanum Gothic', sans-serif;font-weight:900} .page-cs.faq .list-accordion{margin-top:-5px}.page-cs.notice .list-accordion{margin-top:-5px} .page-cs.guide .layout-contents{background:#fff} .page-cs.guide .layout-contents .guide-box{padding:2rem 1rem;font-size:.8125rem;line-height:160%} .page-agreements .layout-contents{background:#fff} .page-event .list{position:relative;padding:1rem;background:#fff;margin-top:.3125rem} .page-event .list .title{display:none} .page-event .event-detail-view .event-detail-view-header{padding:1rem;background:#fff;border-top:1px solid #dedede} .page-event .event-detail-view .event-detail-view-header .event-title{font-size:.8125rem;color:#202020;position:relative} .page-event .event-detail-view .event-detail-view-header .event-title[data-state=new]:after{display:inline-block;content:'';position:absolute;top:4px;right:-15px;z-index:800;background-image:url(../img/sprites.png);background-position:-266px -239px;width:12px;height:12px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.page-event .event-detail-view .event-detail-view-header .event-title[data-state=new]:after{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .page-event .event-detail-view .event-detail-view-header .time{margin-top:3px;display:block;font-size:.6875rem;color:#909090} .page-event .event-detail-view .event-detail-view-conts{background:#fff} .page-event .event-detail-view .event-detail-view-conts img{width:100%} .page-product .product-detail-view{position:relative;background:#fff} .page-product .product-detail-view .product-image{background:#fff;text-align:center; width: auto; height: 250px; overflow: hidden; } /*.page-product .product-detail-view .product-image img{width:100%;margin:0 auto;max-width:280px;}*/ .page-product .product-detail-view .product-image img{width:100%; height:100%; } .page-product .product-detail-view .product-info{padding:1rem;position:relative} .page-product .product-detail-view .product-info .item-info span{display:block} .page-product .product-detail-view .product-info .item-info span.product-name{font-size:1.2rem;font-weight:400;margin-bottom:0;color:#202020;width:80%} .page-product .product-detail-view .product-info .item-info span.shop-name{font-size:0.8rem;font-weight:400;margin-bottom:0;color:#909090;width:80%} .page-product .product-detail-view .product-info .btn-zzim{position:absolute;top:1rem;right:1rem;z-index:100} .page-product .product-detail-view .product-info .btn-like{position:absolute;top:1rem;right:2.5rem;z-index:100} .page-product .product-detail-view .product-info .like-cnt{position:absolute;top:1.2rem;right:1rem;z-index:100} .page-product .product-detail-view .product-info .price-info{display:block;line-height:1.2;margin-top:1rem} .page-product .product-detail-view .product-info .price-info span{display:block;font-size:1rem;position:relative} .page-product .product-detail-view .product-info .price-info span.price{margin-right:5px;font-weight:700} .page-product .product-detail-view .product-info .price-info span.price strong{font-size:1.375rem;font-weight:700} .page-product .product-detail-view .product-info .price-info span.original-price del{color:#909090;text-decoration:line-through;padding-top:3px;font-weight:400;font-size:.8125rem} .page-product .product-detail-view .product-info .price-info span.discount-rate{position:absolute;right:0;bottom:1rem;font-weight:400;margin-right:10px;color:#0057E3;display:inline-block;font-size:1rem} .page-product .product-detail-view .product-info .price-info span.discount-rate strong{font-size:1.875rem;font-weight:700} .page-product .info-box{margin-top:.3125rem} .page-product .info-box.category-best{background:#fff;padding:1rem 0} .page-product .info-box.category-best>.title{padding-left:1rem;padding-bottom:10px;font-size:.75rem} .page-product .info-table{width:100%;background:#fff;border-bottom:1px solid #fff} .page-product .info-table th,.page-product .info-table td{padding:12px 0;padding-left:1rem;border-bottom:1px solid #e0e0e0;font-size:0.875rem;font-weight:300;text-align:left;color:#666} .page-product .info-table th{width:100px} .page-product .info-table tr:last-child th,.page-product .info-table tr:last-child td{border-bottom:none} .page-product .tabs-discription{width:100%; color:#666;font-size:.75rem} .page-product .tabs-discription .title{font-size:.75rem;color:#333;margin-top:10px} .page-product .tabs-discription .use-img{width:100%;max-width:480px;text-align:center;padding:2rem;margin:0 auto} .page-product .tabs-discription .use-img img{width:100%} .page-cpn-barcord .layout-contents{padding-top:60px} .page-cpn-barcord .product{position:relative;background:#fff} .page-cpn-barcord .product .product-image{padding:1rem 1rem;background:#fff;text-align:center} .page-cpn-barcord .product .product-image img{width:70%;margin:0 auto;max-width:200px} .page-cpn-barcord .product .cpn-barcord{padding:1rem} .page-cpn-barcord .product .info-table{margin-top:20px;width:100%;border-top:1px solid #dedede} .page-cpn-barcord .product .info-table th,.page-cpn-barcord .product .info-table td{border-bottom:1px solid #dedede;text-align:left;padding:0.8rem 1rem;font-size:.8125rem;color:#666} .page-cpn-barcord .warning{padding:1rem;text-align:center;font-size:.8125rem;color:#909090} .page-order .order-sheet{background:#fff;padding:1rem} .page-order .order-sheet .title{font-size:.8125rem;display:none} .page-order .order-sheet .order-item{border-bottom:none} .page-order .order-sheet .price-total{padding:10px 0 2rem;margin:0 auto;border-top:1px dashed #dedede} .page-order .order-sheet .price-total dt{float:left;font-size:.8125rem}.page-order .order-sheet .price-total dd{float:right;font-size:1.125rem;color:#0057E3} .page-order .order-sheet .price-total dd strong{font-weight:900;font-family:'Nanum Gothic', sans-serif} .page-order.complate .order-sheet .title{display:block} .page-order.complate .message-box{width:100%;background:#fff;padding:1.5rem 1rem;color:#202020;position:relative;font-size:.875rem;text-align:center;margin-bottom:5px} .page-order.complate .message-box strong{font-weight:700;color:#0098FB}.page-order.complate .fail{display:-ms-flexbox;display:flex} .page-order.complate .fail .message-box{padding-top:50px;-ms-flex-align:stretch;align-items:stretch}.page-order.complate .orderd-info{background:#fff;padding:1rem;margin-top:5px} .page-order.complate .orderd-info:before,.page-order.complate .orderd-info:after{content:"";display:table} .page-order.complate .orderd-info:after{clear:both} .page-order.complate .orderd-info .title{font-size:.8125rem} .page-order.complate .orderd-info .orderd-info-list{font-size:.8125rem;margin:1rem 0 0.5rem;border-top:1px dashed #dedede;padding-top:10px} .page-order.complate .orderd-info .orderd-info-list:before,.page-order.complate .orderd-info .orderd-info-list:after{content:"";display:table} .page-order.complate .orderd-info .orderd-info-list:after{clear:both} .page-order.complate .orderd-info .orderd-info-list dt,.page-order.complate .orderd-info .orderd-info-list dd{color:#909090;width:50%;line-height:24px;display:inline-block} .page-order.complate .orderd-info .orderd-info-list dd{float:right;text-align:right;color:#202020} .page-order.complate .orderd-info .orderd-info-list dd strong{font-size:1rem;color:#0057E3;font-weight:700} /* 로그인/회원가입 */ .page-login .login-sheet{background:#fff;padding:1rem} .page-login .login-sheet .title{font-size:.8125rem;display:none} .page-login .login-sheet .login-item{border-bottom:none} .page-login.complate .login-sheet .title{display:block} /* 로그인/회원가입 */ .page-search .layout-contents{padding-top:60px} .page-search .tabs-menu{text-align:center} .page-search .tabs-contents{padding:0 1rem 1rem} .page-search .tabs-contents .search-list li{background:#fff;border:1px solid #dedede;height:44px;padding:11px 1rem;font-size:.8125rem;margin-top:-1px;position:relative} .page-search .tabs-contents .search-list li .icon{display:inline-block;position:absolute;right:1rem;top:50%} .page-search .tabs-contents .search-list li .icon.icon-search-del{margin-top:-11px;background-image:url(../img/sprites.png);background-position:-324px -92px;width:22px;height:22px} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.page-search .tabs-contents .search-list li .icon.icon-search-del{background-image:url(../img/sprites@2x.png);background-size:366px 347px}} .page-search .tabs-contents .search-list.latest .no-search-word{text-align:center;color:#909090;background:transparent;border:none;padding:50px 0} .page-search .tabs-contents .search-list.popular li{position:relative;padding-left:35px;font-size:.875rem} .page-search .tabs-contents .search-list.popular li a{color:#202020;display:block} .page-search .tabs-contents .search-list.popular li a .num{position:absolute;top:50%;left:13px;margin-top:-7px;display:block;width:16px;height:16px;background:#202020;border-radius:2px;color:#fff;font-size:8px;text-align:center;line-height:16px} .page-search .tabs-contents .search-list.popular li:first-child a,.page-search .tabs-contents .search-list.popular li:nth-child(2) a,.page-search .tabs-contents .search-list.popular li:nth-child(3) a{color:#0057E3} .page-search .tabs-contents .search-list.popular li:first-child a .num,.page-search .tabs-contents .search-list.popular li:nth-child(2) a .num,.page-search .tabs-contents .search-list.popular li:nth-child(3) a .num{background:#0057E3} .page-search .tabs-contents .btn-group{display:none;padding:12px 1rem;background:#dedede;position:relative} .page-search .tabs-contents .btn-group:before,.page-search .tabs-contents .btn-group:after{content:"";display:table} .page-search .tabs-contents .btn-group:after{clear:both}.page-search .tabs-contents .btn-group .btn-all-clear{display:inline-block;float:right;color:#666;font-size:.6875rem} .layout-popup.popup-agreement .layout-popup-contents.agreement{width:100%;height:60vh;-webkit-overflow-scrolling:touch;overflow-y:auto} .layout-popup.popup-agreement .layout-popup-contents.agreement iframe{width:100%;height:100%} .pages-external .layout-popup-title{position:fixed;top:0;left:5%;right:0;width:90%;z-index:1000000;background:#fff;padding:30px 0 10px 0} .pages-external .layout-popup-contents{margin-top:50px} .layer-popup .layer-popup-contents{position:fixed;left:50%;top:20%;width:300px;height:370px;margin-left:-150px;display:block;overflow:hidden;text-align:center;z-index:1000000000;font-size:12px;color:#fff} .layer-popup .layer-popup-contents .layer-popup-img{width:300px;height:325px;background:#fff;width:100%;margin:0 auto;text-align:center} .layer-popup .layer-popup-contents .layer-popup-img img{width:100%;margin:0 auto} .layer-popup .layer-popup-contents .btns-close{font-size:.8125rem;width:100%;height:45px;background:#000;position:absolute;opacity:0.75;bottom:0;left:0;z-index:9999;border-top:1px solid #AAAAAA;padding:0 1rem;box-sizing:border-box} .layer-popup .layer-popup-contents .btns-close a{display:inline-block;float:left} .layer-popup .layer-popup-contents .btns-close a.btn-close.today-popup-window,.layer-popup .layer-popup-contents .btns-close a.btn-close.popup-window{display:block;color:#999;line-height:45px;font-size:.8125rem} .layer-popup .layer-popup-contents .btns-close a.today-popup-window{text-align:left} .layer-popup .layer-popup-contents .btns-close a.btn-close.popup-window{color:#50E3C2;text-align:right;float:right} /* 레이어 풀 팝업 - 약관동의 */ .term-wrap { position: relative; } .layer-full-popup { position: fixed; top: 10px; right: 10px; bottom: 10px; left: 10px; z-index: 999; margin: 0 auto; display: none; height: auto; background-color: #fff; border-radius: 5px; } .layer-full-popup.open { display: block; } .layer-full-popup .header { position: relative; height: 50px; line-height: 50px; font-weight: bold; text-align: center; color: #fff; background-color: #00B0F0; border-radius: 5px 5px 0 0; } .layer-full-popup .header .btn_close_layer { position: absolute; display:inline-block; top: 10px; right: 5px; text-indent:-9999px;background-image:url(../img/sprites.png);background-position:-66px -133px;width:44px;height:44px; } .layer-full-popup .layer-containers { position: absolute; top: 50px; right: 0; bottom: 0; left: 0;} .layer-full-popup .layer-containers .inner { height: 100%; background-color: #F1F1F1; border-radius: 0 0 5px 5px; } .layer-full-popup .layer-containers .box { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 10px 10px; overflow: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Bottom Layer 바텀쉬트 */ .layer-wrap {display: none; opacity: 0; position: fixed; top: 0; left: 0; width: 100%; height: 100%; font-size: 0; line-height: 0; white-space: nowrap; text-align: center; background: rgba(0, 0, 0, 0.7); overflow: auto; -webkit-overflow-scrolling: touch; } .layer-wrap::before { content: ''; display: inline-block; vertical-align: middle; height: 100%; } .layer-container { display: inline-block; vertical-align: middle; font-size: 16px; line-height: normal; white-space: normal; text-align: left; } .layer-container .btm-layer{position:fixed; right:0; bottom:0;left:0;z-index:800;background:#fff;height:auto;border-top:1px solid #ccc; border-top-left-radius:20px; border-top-right-radius:20px; } .layer-container .btm-layer .head{width:100%; height:55px; padding:3px 1rem; border-bottom:1px solid #ccc; background-color:#00B0F0; border-top-left-radius:20px; border-top-right-radius:20px; } .layer-container .btm-layer .layer-title{float:left; display:inline-block; font-size:1rem; font-weight:600; color:#202020;padding:0.8rem 1rem; } .layer-container .btm-layer .layer-close{float:right; top:5px;right:15px; display:block;text-indent:-9999px;background-image:url(../img/sprites.png);background-position:-66px -126px;width:44px;height:44px; } .layer-container .btm-layer .layer-conts{margin:1rem; } /* .layer-container .btm-layer .share-list{background:#fff;margin-bottom:5px} .layer-container .btm-layer .share-list .item{width:25%;height:130px} .layer-container .btm-layer .share-list .item:nth-child(4n){border-right:none} .layer-container .btm-layer .share-list .item .item-image{width:44px;height:44px;margin-top:-30px;margin-left:-22px} .layer-container .btm-layer .btn-submit-normal{border-radius:3px} */ /* ui-layer */ .ui-layer { overflow: hidden; position: relative; width: auto; box-sizing: border-box; border-radius: 10px; background: #fff; } .ui-layer--small { width: 365px; } .ui-layer__head { padding: 15px 25px; background-color: #000; } .ui-layer__title { margin: 0; font-size: 18px; line-height: 26px; font-weight: 700; color: #fff; text-align: center; } .ui-layer__close { display: block; width: 24px; height: 24px; position: absolute; top: 25px; right: 25px; } .ui-layer__close::before, .ui-layer__close::after { content: ''; display: block; position: absolute; top: 50%; left: 50%; width: 4px; height: 16px; border-radius: 1px; margin: -8px 0 0 -2px; -webkit-transform: rotate(45deg); transform: rotate(45deg); background: #7c7c7c; } .ui-layer__close::after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .ui-layer__title--icon { position: relative; padding-left: 30px; } .ui-layer__title--icon::before { content: ''; display: block; position: absolute; top: -2px; left: 0; width: 20px; height: 20px; background: no-repeat 50% 50%; } .ui-layer__body { margin: 30px 25px; } .ui-layer__body-inner::before, .ui-layer__body-inner::after { content: ''; display: table; white-space:pre-line; } .ui-layer__body ~ .ui-layer__foot { margin-top: -30px; } .ui-layer__foot .ui-buttons { padding: 30px; } .ui-layer__foot .ui-buttons-list { white-space: nowrap; } .ui-layer__foot .ui-buttons__item { padding-left: 8px; } .ui-layer__foot .ui-basic-button { min-width: 120px; } .ui-layer__body-inner > .ui-scroller { max-height: 420px; } .ui-layer__body-inner > .ui-scroller--slim { margin-right: -25px; padding-right: 25px; } .ui-layer__body-inner > .ui-scroller--slim > .simplebar-track.simplebar-horizontal, .ui-layer__body-inner > .ui-scroller--slim:hover > .simplebar-track.simplebar-horizontal { -webkit-transform: translateY(-10px); transform: translateY(-10px); } .ui-layer__body-inner > .ui-scroller--slim > .simplebar-track.simplebar-vertical, .ui-layer__body-inner > .ui-scroller--slim:hover > .simplebar-track.simplebar-vertical { -webkit-transform: translateX(-10px); transform: translateX(-10px); } .ui-layer__body-inner > .ui-scroller--slim > .simplebar-track.simplebar-horizontal, .ui-layer__body-inner > .ui-scroller--slim > .simplebar-track.simplebar-vertical { -webkit-transition: none; transition: none; } /* layer-alert */ .layer-alert .ui-layer { width: auto; min-width: 120px; } .ui-layer__head--alert { position: relative; } .ui-layer__head--alert::before { content: ''; display: block; position: absolute; top: 26px; left: 0; width: 100%; height: 40px; } .layer-alert .ui-layer__body { margin: 42px 25px 40px; min-height: 0; } .layer-alert__message { margin: 0; font-size: 14px; line-height: 20px; text-align: center; white-space: nowrap; } /* layer-toast */ .layer-toast { background-color: transparent; } .layer-toast .layer-toast__message { box-sizing: border-box; display: inline-block; width: 380px; padding: 20px; vertical-align: middle; font-size: 15px; line-height: 22px; color: #fff; text-align: center; background-color: rgba(0, 0, 0, 0.9); border-radius: 5px; } .ui-input-error { display: block; margin-top: 2px; padding: 0 10px; font-size: 12px; line-height: 18px; color: #ff5353; } /* ui-button */ .ui-basic-button { display: block; box-sizing: border-box; min-width: 100px; border-radius: 5px; padding: 10px 5px; font-size: 14px; font-weight: 600; line-height: 20px; color: #141414; text-align: center; border: 1px solid #a8a8a8; background: #e2e2e2; } .ui-basic-button--secondary { color: #fff; border-color: #141414; background-color: #141414; } .ui-basic-button--tertiary { color: #fff; border-color: #a36b4f; background-color: #a36b4f; } .ui-basic-button--quaternary { border-color: #141414; background-color: #fff; } .ui-button { display: block; box-sizing: border-box; min-width: 80px; padding: 6px 10px; border: 1px solid #a8a8a8; background: #fff; color: #6f6f6f; font-size: 12px; line-height: 18px; text-align: center; } .ui-button--sm { display: inline-block; min-width: auto; height: 20px; margin-left: 15px; padding: 0 6px; vertical-align: middle; font-size: 10px; line-height: 18px; } .ui-button--delete { min-width: 70px; line-height: 16px; } .ui-button--delete::before { content: ''; display: inline-block; vertical-align: -2px; width: 12px; height: 12px; margin-right: 4px; background: url(../images/ic-delete.png) no-repeat; } /* ui-buttons */ .ui-buttons::before, .ui-buttons::after { content: ''; display: table; } .ui-buttons__list { list-style: none; padding: 0; margin-left: -6px; font-size: 0; line-height: 0; text-align: center; } .ui-buttons__item { display: inline-block; vertical-align: top; padding-left: 6px; box-sizing: border-box; text-align: left; } .ui-buttons--left .ui-buttons__list { text-align: left; } .ui-buttons--right .ui-buttons__list { text-align: right; } /* 글쓰기 고정 버튼 시작 (CSS, 버튼 스타일) */ #plusBtn { display: none; position: fixed; /* 위치 옵션 - fixed(고정) */ right: 20px; /* 오른쪽 여백 */ bottom: 130px; /* 아래 여백 */ transform: scale(0.7); -webkit-transform: scale(0.7); transform-origin: right bottom; /* 정렬 옵션 - 오른쪽/아래 정렬 */ -webkit-transform-origin: right bottom; } #plusBtn ul li a.rgyTop { /* TOP 버튼 세부 옵션 */ font-size: 33px; cursor: pointer; /* 해당 버튼 위치시 커서 모양 옵션 */ } #plusBtn ul li a.rgyBottom { font-size: 33px; cursor: pointer; } /* 글쓰기 고정 버튼 끝 (CSS, 버튼 스타일) */ .dim-layer { display: none; position: fixed; _position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; } .dim-layer .dimBg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: .5; filter: alpha(opacity=50); }